/* ============================= 🌐 GLOBAL STYLES ============================= */
/* Variables globales: centraliza colores para facilitar cambios de tema */
:root {
  --color-header: #4A3A2A;   /* Marrón cálido - header y menú móvil */
  --color-bg: #F5E9D7;       /* Fondo crema - cuerpo de la web */
  --color-accent: #D98E2B;   /* Naranja acento - hover, highlights */
  --color-text: #2C2C2C;     /* Gris oscuro - texto principal */
  --color-footer: #3B2D20;   /* Marrón oscuro - footer */
}

/* Reset básico: elimina márgenes por defecto y define box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* importante para calcular anchos/paddings */
}

/* Tipografía y base visual del body */
body {
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.8;                /* mejora legibilidad en párrafos largos */
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
}

/* Evita scroll horizontal accidental si algun elemento se pasa */
html {
  overflow-x: hidden;
}

/* ============================= 🟤 HEADER ============================= */
/* Encabezado principal sticky: se queda fijo en top al hacer scroll */
header {
  background: var(--color-header);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;                     /* siempre encima del contenido */
  display: flex;
  justify-content: space-between;   /* logo a la izquierda, nav a la derecha */
  align-items: center;
  padding: 15px 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Nota: tu HTML usa la clase `.header-logo` pero aquí se nombra `header .logo`.
   Si hay discrepancia (logo no toma estilos), cambia uno u otro para que coincidan. */
header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
header .logo img {
  max-height: 40px;
  width: auto;
}

/* ============================= 📌 NAV (desktop) ============================= */
/* Nav en desktop: fila de links y dropdowns */
nav {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: nowrap; /* evita que el menú se quiebre en varias líneas (desktop) */
}

/* Estilo común para enlaces y botones que actúan como dropdown trigger */
nav a,
.dropbtn {
  color: #fff;                 /* texto blanco sobre header marrón */
  text-decoration: none;
  font-weight: 500;
  position: relative;          /* necesario para pseudo-elementos (subrayado) */
  padding: 5px 10px;
  transition: color 0.3s ease;
  font-size: 14px;
  white-space: nowrap;         /* evita salto de línea en links */
}

/* Feedback visual: hover y focus (tecla tab) */
nav a:hover,
nav a:focus,
.dropbtn:hover,
.dropbtn:focus {
  color: var(--color-accent);
}

/* Línea animada debajo del link al hover / enlace activo */
nav a:hover::after,
nav a.active::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  bottom: 0;
  left: 0;
}

/* ============================= 🔽 DROPDOWN (click only) ============================= */
/* Contenedor relativo para que el contenido absoluto se posicione respecto a este */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Botón que abre el dropdown: estilizado como botón para accesibilidad */
.dropbtn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* indicador ▾ junto al texto (rota con .show) */
.dropbtn::after {
  content: "▾";
  display: inline-block;
  transition: transform .2s ease;
  font-size: .9em;
}

/* Contenido del dropdown en desktop - oculto por defecto */
.dropdown-content {
  position: absolute;
  right: 0;                      /* se alinea a la derecha del trigger */
  top: 100%;
  background: #fff;              /* en desktop la caja es blanca */
  min-width: 200px;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
  overflow: hidden;
  z-index: 1000;
  opacity: 0;                    /* oculto por defecto (animado) */
  visibility: hidden;
  transform: translateY(-8px);   /* leve desplazamiento hacia arriba */
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  pointer-events: none;          /* evita clicks cuando está oculto */
}

/* Estilos de los links dentro del dropdown (desktop) */
.dropdown-content a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: #333;                  /* texto oscuro sobre caja blanca */
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
}

/* Hover en items del dropdown (desktop) */
.dropdown-content a:hover {
  background: var(--color-accent);
  color: #fff;
}

/* Clase que controla visibilidad: añadida/quitada por JS (document.querySelector .toggle) */
.dropdown.show .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;         /* permite clicks cuando está visible */
}

/* Rota la flecha cuando el dropdown está abierto */
.dropdown.show .dropbtn::after {
  transform: rotate(180deg);
}

/* ============================= 📖 SECCIONES (contenido) ============================= */
.seccion-estandar {
  padding: 80px 20px;
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.seccion-estandar h2 {
  font-size: 2.5rem;
  color: var(--color-header);
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================= ⚫ FOOTER ============================= */
footer {
  background: var(--color-footer);
  color: #fff;
  text-align: center;
  padding: 60px 20px;
  margin-top: 60px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

/* ============================= 🟤 SEPARADOR/BANNER ============================= */
.separator-banner {
  width: 100%;
  background: #f7e0c5;
  padding: 40px 20px;
  margin: 60px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.separator-banner p {
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 500;
  color: #333;
  max-width: 900px;
  margin: 0;
  line-height: 1.8;
}

/* ============================= 🌐 LANG SWITCH (selector de idioma) ============================= */
/* contenedor de banderas (inline) */
.lang-switch {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* botón que envuelve la imagen de la bandera (sin borde) */
.lang-switch button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s ease;
}

/* pequeño efecto hover */
.lang-switch button:hover {
  transform: scale(1.1);
}

/* tamaño y estilo de la imagen de bandera */
.flag-icon {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* ============================= 📱 MENÚ MÓVIL (base) ============================= */
/* Toggle botón - por defecto oculto (desktop) */
#menu-toggle {
  display: none; /* Lo mostramos únicamente en mobile via @media */
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #fff;
  z-index: 1001;
}

/* control de los iconos dentro del botón (☰ / ✖).
   Se dejan en "none" por defecto y se muestran/ocultan con la clase .active. */
#menu-toggle .icon-open,
#menu-toggle .icon-close {
  display: none;
}

/* por defecto (cuando el botón está visible en mobile) mostramos icon-open */
#menu-toggle .icon-open {
  display: inline-block;
}

/* cuando el botón tiene clase .active (menu abierto) se alternan */
#menu-toggle.active .icon-open {
  display: none;
}
#menu-toggle.active .icon-close {
  display: inline-block;
}

/* ============================= 📱 RESPONSIVE (mobile) ============================= */
@media (max-width: 768px) {
  /* Mostrar el toggle en mobile */
  #menu-toggle {
    display: block;
  }

  /* NAV se transforma en panel lateral (slide-in) alineado a la derecha */
  header nav {
    position: fixed;
    top: 0;
    right: -100%;                 /* fuera de la pantalla por defecto */
    width: 80%;
    height: 100%;
    background-color: var(--color-header); /* mismo color que header para continuidad */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    padding: 20px;
  }

  /* Clase que activa el panel (añadida por JS) */
  header nav.mobile-active {
    right: 0;                     /* trae el panel a la vista */
  }

  /* Links y trigger del dropdown en el panel: letras blancas para buen contraste */
  header nav a,
  header nav .dropbtn {
    font-size: 20px;
    padding: 10px;
    color: #fff;
  }

  /* Dropdown en móvil: el contenido deja de ser absoluto y entra en el flujo */
  .dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .dropdown-content {
    position: static;             /* ahora en flujo del documento */
    background: transparent;
    box-shadow: none;
    display: none;                /* sigue oculto hasta que JS añade .show */
    text-align: center;
  }

  .dropdown.show .dropdown-content {
    display: block;               /* se muestra cuando JS añade la clase .show */
  }

  .dropdown.show .dropbtn {
    color: var(--color-accent);   /* color para indicar que está abierto */
  }

  /* Forzar color blanco dentro del dropdown en mobile (importante por contraste) */
  .dropdown-content a {
    color: #fff !important;       /* se usa !important para sobrescribir reglas desktop si aplica */
  }

  /* Mover el selector de idiomas más cerca del menú (no pegado al bottom) */
  .lang-switch {
    position: relative;
    bottom: auto;
    margin-top: 30px; /* ajuste visual en el panel móvil */
  }
}

/* ============================= 📱 RESPONSIVE BASE (breakpoints generales) ============================= */
/* Desktop grande (≥1200px) */
@media (min-width: 1200px) {
  .seccion-estandar {
    max-width: 1200px;
    padding: 80px 40px;
  }
}

/* Laptop (992px - 1199px) ajustes de layout */
@media (max-width: 1199px) and (min-width: 992px) {
  .seccion-estandar {
    max-width: 1000px;
    padding: 70px 30px;
  }

  .seccion-estandar h2 {
    font-size: 2.2rem;
  }
}

/* Tablet (768px - 991px) ajustes intermedios */
@media (max-width: 991px) and (min-width: 768px) {
  header .logo img {
    max-height: 35px;
  }

  .seccion-estandar {
    max-width: 90%;
    padding: 60px 20px;
  }

  .seccion-estandar h2 {
    font-size: 2rem;
  }

  p {
    font-size: 0.95rem;
  }

  .separator-banner p {
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 10px;
  }
}

/* Móvil (≤767px) ajustes finos adicionales para legibilidad */
@media (max-width: 767px) {
  .seccion-estandar {
    padding: 50px 15px;
  }

  .seccion-estandar h2 {
    font-size: 1.6rem;
  }

  p {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  footer {
    padding: 40px 15px;
    font-size: 0.85rem;
  }

  .separator-banner p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 12px;
  }
}

/* Mini móviles (≤480px) */
@media (max-width: 480px) {
  .seccion-estandar h2 {
    font-size: 1.4rem;
  }

  p {
    font-size: 0.85rem;
  }
}

/* ============================= NOTAS IMPORTANTES / SUGERENCIAS ============================= */
/* 1) Coincidencia de clases: asegúrate que en el HTML el logo tenga la clase
      que usas en CSS (header .logo vs .header-logo). Si no coincide, el selector
      no aplicará y el logo puede romperse. */

/* 2) Accesibilidad: añade aria-expanded al botón #menu-toggle y actualízalo desde JS
      para que lectores de pantalla detecten el estado. Ej:
         menuToggleBtn.setAttribute('aria-expanded', opened ? 'true' : 'false');

   3) Evitar !important cuando sea posible. Aquí lo usamos para forzar color dentro del
      dropdown en móvil por compatibilidad con reglas desktop; si reorganizas el CSS
      puedes eliminar el !important.

   4) Dropdowns dependen de la clase `.show` que tu JS debe añadir/quitar. Si tienes
      problemas con que no se abran, revisa que no haya duplicación de scripts que
      prevenga event listeners (conflictos previos que comentamos antes).

   5) Si quieres que el menú móvil cubra TODO el ancho en vez de 80%, cambia `width: 100%`
      en `header nav` dentro del media query. */