/* home-ui.css */

/* 1. HEADER TRANSPARENTE EN HERO */
/* (Posicionamiento fijo removido, ahora utiliza position: sticky global en #app-header) */
/* Usamos margen negativo para que el Hero se deslice debajo del sticky header solo en el home */
.home-ui #app-header {
  margin-bottom: -64px;
}

.header-scroll {
  background-color: white !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.header-transparent {
  background-color: transparent !important;
  box-shadow: none;
  transition: all 0.3s ease;
}

/* Fondo sólido: páginas sin hero (carrito, checkout, perfil, etc.) */
.header-solid {
  background-color: #e5133a !important;
  box-shadow: 0 2px 10px rgba(229, 19, 58, 0.2);
}

/* ═══════════════════════════════════════════════════════
   SISTEMA DE CÁPSULA ADAPTATIVA (NAV DESKTOP)
   ═══════════════════════════════════════════════════════ */

/* 1. Estado Base (HERO - Transparente) */
.header-transparent .nav-link {
    color: rgba(255, 255, 255, 0.95);
}

.header-transparent .active-nav {
    background-color: white !important;
    color: #e5133a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 2. Estado Sólido (Blanco - Scroll) */
.header-scroll .nav-link:not(.active-nav) {
    color: #000000 !important; /* Negro Puro */
}

.header-scroll .active-nav {
    background-color: #e5133a !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(229, 19, 58, 0.25);
}

/* 3. Hovers */
.header-transparent .nav-link:hover:not(.active-nav) {
    background-color: rgba(255, 255, 255, 0.15);
    color: white !important;
}

.header-scroll .nav-link:hover:not(.active-nav) {
    background-color: #f1f5f9 !important; /* slate-100 */
    color: #e5133a !important;
}

/* 4. INVERSIÓN DE COLORES EN HEADER BLANCO (SCROLL) */
.header-scroll .text-white:not(.btn-primary):not(#cart-badge) {
  color: #000000 !important;
}

/* Hamburger y Logo en modo Scroll (Blanco) */
.header-scroll #menu-toggle,
.header-scroll #header-brand-name {
    color: #e5133a !important; /* Rojo para branding */
}

.header-scroll #header-logo-icon {
    background-color: #e5133a !important;
}
.header-scroll #header-logo-icon svg {
    color: white !important;
}

/* ═══════════════════════════════════════════════════════
   REGLAS GLOBALES — ELIMINADAS (eran destructivas)
   Las reglas de texto y botones se manejan por Tailwind
   y los estilos encapsulados de cada componente.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   MENÚ MOBILE - ESTADO ACTIVO (ESTILO BOTÓN)
   ═══════════════════════════════════════════════════════ */
#mobile-menu {
    color: #000000 !important;
}

#mobile-menu a {
    color: #000000 !important;
}

#mobile-menu .active-nav {
    background-color: #e5133a !important; /* Rojo sólido */
    color: #ffffff !important;           /* Texto blanco */
    border-left: none !important;        /* Quitar barra lateral previa */
    padding-left: 1.5rem !important;     /* Padding normal */
}

#mobile-menu .active-nav svg {
    color: #ffffff !important;
}

/* Efectos hover en modo claro (fondo gris sutil y texto rojo) */
.header-scroll .hover\:bg-white\/10:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #e5133a !important;
}

.header-scroll .hover\:text-white:hover {
    color: #e5133a !important;
}

/* Texto del logo destacando el branding color en fondo blanco */
.header-scroll a[href="/index.html"].text-white {
    color: #e5133a !important;
}

/* ═══════════════════════════════════════════════════════
   NAVEGACIÓN PREMIUM (FORZADO DE ESTILOS)
   ═══════════════════════════════════════════════════════ */
/* Scope estricto: solo afecta links dentro del header público */
#public-header .nav-link {
    font-family: 'Satoshi', system-ui, sans-serif !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    font-size: 14px !important;
    letter-spacing: 0.025em !important;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease !important;
}

.header-scroll .nav-link {
    color: #000000 !important;
}

.header-scroll .active-nav {
    background-color: #e5133a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(229, 19, 58, 0.3) !important;
}

.header-transparent .active-nav {
    background-color: #ffffff !important;
    color: #e5133a !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
}

/* Hamburguesa en rojo sobre fondo blanco */
.header-scroll #menu-toggle {
    color: #e5133a !important;
}

/* 2. RESPONSIVE Y GRID AUTOMATICO DE IMAGENES */
.auto-image-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 1rem 0;
}

@media (min-width: 768px) {
    .auto-image-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.auto-image-grid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease;
}

.auto-image-grid img:hover {
    transform: scale(1.02);
}

/* 3. CONSISTENCIA DE PADDING EN MOBILE PARA EVITAR APIÑAMIENTO */
@media (max-width: 640px) {
    section:not(#inicio) {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}