/* ===============================================
   LÍNEA CENTRAL DEBAJO DEL HEADER (como el footer)
   =============================================== */

.main-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);  /* Centra la línea */
  width: 75%;                    /* Ancho central, no toda la página */
  height: 1px;
  background-color: #fffaeb;
  opacity: 0.3;
  pointer-events: none;
}

.main-header.scrolled::after {
  background-color: #6e221c;
  opacity: 0.3;
}

/* Cuando hay scroll (fondo blanco), la línea cambia de color */
.main-header.scrolled::after {
  background-color: #6e221c;   /* Color que contrasta con el fondo blanco */
  opacity: 0.3;
}
/* Cuando hay scroll (fondo blanco), la línea cambia de color */
.main-header.scrolled::after {
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(0, 0, 0, 0.15) 15%,
    rgba(0, 0, 0, 0.15) 85%,
    transparent 100%);
}
/* ===============================================
   RESET Y NORMALIZACIÓN
   =============================================== */
* {
  margin: 0;           /* Elimina márgenes por defecto */
  padding: 0;          /* Elimina paddings por defecto */
  box-sizing: border-box; /* Hace que el padding y border no afecten el ancho total */
}

/* ===============================================
   HEADER PRINCIPAL
   =============================================== */
.main-header {
  background-color: transparent;  /* Fondo transparente inicialmente */
  position: fixed;                /* Fijo en la parte superior */
  top: 0;                         /* Pegado arriba */
  left: 0;                        /* Pegado izquierda */
  width: 100%;                    /* Ocupa todo el ancho */
  z-index: 1000;                  /* Por encima de otros elementos */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Animación suave al cambiar fondo */
}

/* ===============================================
   ESTILOS AL HACER SCROLL (cuando baja la página)
   =============================================== */
/* Fondo blanco y sombra cuando el header tiene la clase 'scrolled' */
.main-header.scrolled {
  background-color: #fffaeb;      
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra sutil */
}

/* Color de los botones cuando hay scroll */
.main-header.scrolled .nav-btn {
  color: #6e221c;                    
}

/* Color al pasar el mouse sobre botones (scroll activo) */
.main-header.scrolled .nav-btn:hover {
  color: #6e221c;                 
}

/* Color del botón activo/seleccionado (scroll activo) */
.main-header.scrolled .nav-btn.active {
  color: #6e221c;                 
}

/* Color de la línea subrayado del botón activo (scroll activo) */
.main-header.scrolled .nav-btn.active::after {
  background-color: #6e221c;      
}

/* Color de las líneas del botón hamburguesa cuando hay scroll */
.main-header.scrolled .menu-toggle span {
  background-color: #6e221c;         
}

/* ===============================================
   CAMBIO DE LOGO AL HACER SCROLL
   =============================================== */
/* Oculta el logo claro (para fondo oscuro) cuando hay scroll */
.main-header.scrolled .logo-light {
  opacity: 0;                     /* Completamente transparente */
  visibility: hidden;             /* Oculto (no interactuable) */
}

/* Muestra el logo oscuro (para fondo blanco) cuando hay scroll */
.main-header.scrolled .logo-dark {
  opacity: 1;                     /* Completamente visible */
  visibility: visible;            /* Visible e interactuable */
}

/* ===============================================
   LOGO
   =============================================== */
.logo {
  position: relative;             /* Para posicionar los logos absolutos dentro */
  flex-shrink: 0;                 /* Evita que el logo se encoja en flexbox */
  z-index: 2;                     /* Por encima de otros elementos */
}

/* Estilos base para todas las imágenes del logo */
.logo-image {
  width: 100px;                   /* Ancho del logo */
  height: 50.8px;                 /* Alto del logo (proporción 100:50.8 ≈ 266:135) */
  object-fit: contain;            /* Mantiene la proporción sin deformar */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Transición suave al cambiar */
}

/* Logo claro (se muestra en fondo oscuro/transparente) */
.logo-light {
  position: absolute;             /* Posición absoluta dentro de .logo */
  top: 0;                         /* Alineado arriba */
  left: 0;                        /* Alineado izquierda */
  opacity: 1;                     /* Visible */
  visibility: visible;            /* Interactuable */
}

/* Logo oscuro (se muestra en fondo blanco al hacer scroll) */
.logo-dark {
  opacity: 0;                     /* Oculto inicialmente */
  visibility: hidden;             /* No interactuable inicialmente */
}

/* ===============================================
   CONTENEDOR DEL HEADER
   =============================================== */
.header-container {
  max-width: 1400px;              /* Ancho máximo del contenido */
  margin: 0 auto;                 /* Centrado horizontal */
  padding: 1rem 2rem;             /* Espaciado interno: arriba/abajo 1rem, izquierda/derecha 2rem */
  display: flex;                  /* Layout flexible */
  justify-content: space-between; /* Distribuye espacio entre logo y menú */
  align-items: center;            /* Centra verticalmente */
  position: relative;             /* Para posicionar elementos internos absolutos */
}

/* ===============================================
   BOTÓN HAMBURGUESA (solo visible en móvil)
   =============================================== */
.menu-toggle {
  display: none;                  /* Oculto en desktop */
  flex-direction: column;         /* Apila las 3 líneas verticalmente */
  justify-content: space-between; /* Distribuye espacio entre líneas */
  width: 30px;                    /* Ancho del botón */
  height: 21px;                   /* Alto del botón */
  background: transparent;        /* Fondo transparente */
  border: none;                   /* Sin borde */
  cursor: pointer;                /* Manita al pasar el mouse */
  z-index: 3;                     /* Por encima del menú */
  padding: 0;                     /* Sin padding */
}

/* Cada línea del botón hamburguesa */
.menu-toggle span {
  width: 100%;                    /* Ocupa todo el ancho del botón */
  height: 3px;                    /* Grosor de la línea */
  background-color: #fffaeb;      /* Color blanco (contrasta con fondo oscuro) */
  border-radius: 3px;             /* Bordes redondeados */
  transition: all 0.3s ease;      /* Transición suave para la animación */
}

/* ===============================================
   ANIMACIÓN DEL BOTÓN HAMBURGUESA (se convierte en X)
   =============================================== */
/* Primera línea: gira 45 grados y se desplaza hacia abajo */
.menu-toggle.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg); /* Baja 9px y rota 45° */
}

/* Segunda línea: se desvanece (desaparece) */
.menu-toggle.active span:nth-child(2) {
  opacity: 0;                     /* Transparente */
}

/* Tercera línea: gira -45 grados y se desplaza hacia arriba */
.menu-toggle.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg); /* Sube 9px y rota -45° */
}

/* ===============================================
   NAVEGACIÓN
   =============================================== */
.nav-menu {
  flex: 1;                        /* Ocupa el espacio disponible */
  display: flex;                  /* Layout flexible */
  justify-content: center;        /* Centra los botones horizontalmente */
  z-index: 2;                     /* Por encima de otros elementos */
}

/* Lista de botones */
.nav-list {
  display: flex;                  /* Layout horizontal en desktop */
  list-style: none;               /* Elimina viñetas */
  gap: 2rem;                      /* Espacio entre botones */
  margin: 0;                      /* Sin margen */
  padding: 0;                     /* Sin padding */
}

/* Cada botón de navegación */
.nav-btn {
  text-decoration: none;          /* Elimina subrayado por defecto */
  color: #fffaeb;                 /* Color blanco (contrasta con fondo oscuro) */
  font-weight: 500;               /* Peso de fuente semi-negrita */
  padding: 0.5rem 0.25rem;        /* Espaciado: arriba/abajo 0.5rem, izquierda/derecha 0.25rem */
  transition: color 0.3s ease;    /* Transición suave al cambiar color */
  font-size: 0.95rem;             /* Tamaño de fuente */
  white-space: nowrap;            /* Evita que el texto haga salto de línea */
  position: relative;             /* Para posicionar la línea subrayado */
}

/* ===============================================
   LÍNEA DE SUBRAYADO DE LOS BOTONES
   =============================================== */
/* Pseudo-elemento que crea la línea debajo del texto */
/* ===============================================
   LÍNEA DE SUBRAYADO DE LOS BOTONES (estado normal - fondo transparente)
   =============================================== */
.nav-btn::after {
  content: '';                    /* Necesario para que aparezca el pseudo-elemento */
  position: absolute;             /* Posición absoluta dentro del botón */
  bottom: 0;                      /* Pegado a la parte inferior */
  left: 0;                        /* Comienza desde la izquierda */
  width: 0;                       /* Ancho inicial: 0 (oculto) */
  height: 2px;                    /* Alto/grosor de la línea */
  background-color: #f5e8a6;      /* Color BLANCO para fondo transparente/oscuro */
  transition: width 0.3s ease;    /* Animación al cambiar el ancho */
}

/* ===============================================
   LÍNEA DE SUBRAYADO CUANDO HAY SCROLL (fondo blanco)
   =============================================== */
.main-header.scrolled .nav-btn::after {
  background-color: #6e221c;      /* Color BEIGE para fondo blanco */
}

/* ===============================================
   EFECTOS HOVER DE LOS BOTONES
   =============================================== */
/* Al pasar el mouse, la línea se extiende al 100% */
.nav-btn:hover::after {
  width: 100%;                    /* Línea completa */
}

/* Al pasar el mouse, el texto cambia a beige */
.nav-btn:hover {
  color: #f5e8a6;                 /* Color beige */
}

/* ===============================================
   BOTÓN ACTIVO (sección visible)
   =============================================== */
/* El botón correspondiente a la sección visible */
.nav-btn.active {
  color: #f5e8a6;                 /* Texto beige */
}

/* La línea del botón activo siempre está visible al 100% */
.nav-btn.active::after {
  width: 100%;                    /* Línea completa */
  background-color: #f5e8a6;      /* Color beige */
}

/* ===============================================
   RESPONSIVE PARA TABLET (pantallas menores a 1024px)
   =============================================== */
@media (max-width: 1024px) {
  .header-container {
    padding: 0.75rem 1.5rem;      /* Reduce el espaciado */
  }
  
  .nav-list {
    gap: 1.25rem;                 /* Reduce espacio entre botones */
  }
  
  .nav-btn {
    font-size: 0.85rem;           /* Reduce tamaño de fuente */
  }
  
  .logo-image {
    width: 106px;                 /* Logo más pequeño */
    height: 54px;                 /* Alto proporcional */
  }
}

/* ===============================================
   RESPONSIVE PARA MÓVIL (pantallas menores a 768px)
   =============================================== */
@media (max-width: 768px) {
  /* Muestra el botón hamburguesa */
  .menu-toggle {
    display: flex;                 /* Visible en móvil */
  }
  
  /* Menú oculto inicialmente (fuera de la pantalla hacia arriba) */
  .nav-menu {
    position: fixed;              /* Fijo en la ventana */
    top: 0;                       /* Arriba */
    left: 0;                      /* Izquierda */
    width: 100%;                  /* Ocupa todo el ancho */
    height: 100vh;                /* Ocupa toda la altura de la pantalla */
    background-color: rgba(0, 0, 0, 0.95); /* Fondo negro semitransparente */
    backdrop-filter: blur(10px);  /* Efecto de desenfoque detrás */
    flex-direction: column;       /* Contenido en columna */
    justify-content: center;      /* Centrado vertical */
    align-items: center;          /* Centrado horizontal */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Animación suave */
    transform: translateY(-100%); /* Oculto: desplazado hacia arriba */
    opacity: 0;                   /* Transparente */
    visibility: hidden;           /* Oculto */
  }
  
  /* Fondo del menú cuando hay scroll (modo blanco) */
  .main-header.scrolled .nav-menu {
    background-color: #fffaeb; /* Fondo blanco semitransparente */
    backdrop-filter: blur(10px);  /* Desenfoque */
  }
  
  /* Color de los botones en el menú cuando hay scroll */
  .main-header.scrolled .nav-menu .nav-btn {
    color: #333;                  /* Texto oscuro */
  }
  
  /* Menú activo/abierto */
  .nav-menu.active {
    transform: translateY(0);      /* Vuelve a su posición original */
    opacity: 1;                   /* Visible */
    visibility: visible;          /* Interactuable */
  }
  
  /* Lista de botones en columna */
  .nav-list {
    flex-direction: column;       /* Apilados verticalmente */
    align-items: center;          /* Centrados */
    gap: 2rem;                    /* Espacio entre botones */
  }
  
  /* Botones más grandes en móvil */
  .nav-btn {
    font-size: 1.2rem;            /* Fuente más grande */
    padding: 0.5rem;              /* Más área de clic */
    white-space: nowrap;          /* Sin salto de línea */
  }
  
  /* Ajuste de la línea subrayado en móvil */
  .nav-btn::after {
    bottom: -5px;                 /* Línea un poco más abajo */
  }
  
  /* Logo más pequeño en móvil */
  .logo-image {
    width: 80px;                  /* Logo pequeño */
    height: 40px;                 /* Alto proporcional */
  }
  
  /* Reduce el padding del contenedor */
  .header-container {
    padding: 0.75rem 1rem;        /* Espaciado más compacto */
  }
  
  /* Evita que el body haga scroll cuando el menú está abierto */
  body.menu-open {
    overflow: hidden;             /* Oculta el scroll */
  }
}