/* ==========================================================================
   BIOIMMERSION — Manuel Antonio Wildlife Tours
   --------------------------------------------------------------------------
   Hoja de estilos única, organizada en capas:
     1. TOKENS      — variables de diseño (colores, espaciado, tipografía…)
     2. BASE        — reset y elementos HTML
     3. LAYOUT      — primitivas de maquetación reutilizables
     4. COMPONENTES — bloques de UI reutilizables
     5. SECCIONES   — composición específica de cada sección
     6. ANIMACIONES — entrada en scroll, respeta prefers-reduced-motion
     7. UTILIDADES
     8. RESPONSIVE

   REGLA: no uses números "mágicos". Todo valor (color, espacio, radio,
   tamaño de letra) sale de un token de la capa 1. Si necesitas un valor
   nuevo, primero créalo como token.

   REGLA MÓVIL: todo :hover va dentro de `@media (hover: hover) and
   (pointer: fine)`. Sin esto, un teléfono puede dejar un botón "pegado"
   en su estado de hover tras tocarlo — una de las causas más comunes de
   que un sitio "se vea raro" en el celular pero no en escritorio.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: light; /* evita que el navegador "oscurezca" el sitio solo */

  /* --- Paleta de marca (del moodboard) --- */
  --c-green-950: #1E2418;
  --c-green-900: #2D3524;
  --c-green-800: #3B4530;
  --c-green-700: #4E5A3F;
  --c-cream-100: #FBF7EE;
  --c-cream-200: #F4EBD9;
  --c-cream-300: #E9DDC2;
  --c-gold-500:  #B7A369;
  --c-gold-600:  #9C8A56;
  --c-white:     #FFFFFF;

  /* --- Roles semánticos (usa estos, no los de arriba) --- */
  --bg:                 var(--c-cream-100);
  --bg-alt:             var(--c-cream-200);
  --bg-dark:            var(--c-green-950);
  --surface:            var(--c-white);
  --border:             var(--c-cream-300);
  --border-on-dark:     rgba(244, 235, 217, .22);
  --text:               #24291E;
  --text-muted:         #5B6350;
  --text-on-dark:       var(--c-cream-100);
  --text-on-dark-muted: var(--c-cream-300);
  --accent:             var(--c-gold-500);
  --accent-strong:      var(--c-gold-600);
  --success:            #3B6B3B;
  --danger:             #A13A2E;

  /* --- Escala de espaciado (base 4px) --- */
  --sp-1: .25rem;   --sp-2: .5rem;    --sp-3: .75rem;   --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 2rem;     --sp-8: 2.5rem;
  --sp-9: 3rem;     --sp-10: 4rem;    --sp-11: 5rem;

  /* --- Escala tipográfica (fluida: escala sola con el ancho) --- */
  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.2rem;
  --fs-xl:   clamp(1.3rem, 1.6vw, 1.5rem);
  --fs-2xl:  clamp(1.7rem, 3vw, 2.4rem);
  --fs-3xl:  clamp(2rem, 4.2vw, 3.4rem);

  --lh-tight: 1.18;
  --lh-base:  1.65;

  --font-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Radios --- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-pill: 999px;

  /* --- Sombras --- */
  --sh-sm: 0 2px 8px rgba(30, 36, 24, .07);
  --sh-md: 0 8px 24px rgba(30, 36, 24, .12);
  --sh-lg: 0 20px 48px rgba(30, 36, 24, .18);

  /* --- Movimiento --- */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       .2s;
  --dur-slow:  .3s;
  --dur-reveal: .7s;

  /* --- Layout --- */
  --container:      1180px;
  --container-narrow: 820px;
  /* Padding lateral fluido: crece con la pantalla, sin media queries */
  --container-pad:  clamp(1rem, 4vw, 1.5rem);
  /* Espaciado vertical de sección, también fluido */
  --section-y:      clamp(3.5rem, 8vw, 5.5rem);
  /* .nav vive DENTRO de .site-header en el HTML, así que su z-index solo
     importa frente a sus hermanos ahí adentro (brand, selector de idioma,
     botón hamburguesa) — por eso puede ser chico. El fondo oscuro
     (.nav__backdrop) SÍ es hermano de <header> a nivel raíz, así que lo
     que de verdad decide si el menú queda tapado o no es --z-header
     contra --z-backdrop. --z-header DEBE ser mayor: si no, el fondo
     oscuro (aunque menor "por dentro") termina pintándose encima de todo
     el <header> —y del menú que vive adentro— porque en el contexto de
     apilamiento raíz solo cuenta el z-index del propio <header>, no el
     de sus descendientes. Fue exactamente el bug que hubo.
     Orden de arriba hacia abajo: header > backdrop > fab > contenido. */
  --z-header:   70;
  --z-backdrop: 60;
  --z-fab:      50;
  --z-nav:      5;

  /* --- Formularios --- */
  --field-h: 2.875rem;          /* altura idéntica para input y select */
  --field-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6350' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Evita que el header sticky tape las secciones al navegar por anclas */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Corta cualquier desborde horizontal residual sin afectar el eje vertical
   (necesario para que el header position:sticky siga funcionando). */
html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Quita el recuadro gris/azul que Android/iOS pintan al tocar un enlace
     o botón — es una de las diferencias visuales más notorias entre
     escritorio (mouse) y móvil (táctil) si no se desactiva. */
  -webkit-tap-highlight-color: transparent;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 .5em;
  color: var(--c-green-950);
  text-wrap: balance;          /* evita huérfanas en títulos */
}
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Foco visible solo para teclado (accesibilidad sin ensuciar el ratón) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. LAYOUT — primitivas reutilizables
   ========================================================================== */

/* .container — ancho máximo + padding lateral fluido */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }

@media (max-width: 480px) {
  .container { padding-inline: 1rem; }
}

/* .section — bloque vertical de página */
.section { padding-block: var(--section-y); }
.section--alt  { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark h2, .section--dark h3 { color: var(--c-white); }

/* Las secciones fuera de pantalla no necesitan pintarse ni tener layout
   calculado hasta que se acercan al viewport — el navegador se salta ese
   trabajo. Ahorra tiempo real de renderizado en páginas largas como esta. */
.section--lazy-paint {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

/*  .grid-auto — rejilla que se reacomoda sola según el espacio disponible.
    Sin media queries: `auto-fit` decide cuántas columnas caben, y
    `min(--grid-min, 100%)` impide que se desborde en pantallas angostas.
    Ajusta columnas con los modificadores o con --grid-min en línea. */
.grid-auto {
  display: grid;
  gap: var(--grid-gap, var(--sp-7));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 280px), 100%), 1fr));
}
.grid-auto--xs { --grid-min: 190px; }
.grid-auto--sm { --grid-min: 230px; }
.grid-auto--md { --grid-min: 300px; }

/* .split — dos columnas que colapsan a una cuando no caben.
   minmax(0,…) es CLAVE: sin él, un hijo ancho (p. ej. un <select> con
   opciones largas) ensancha la columna y rompe la maquetación. */
.split {
  display: grid;
  gap: var(--split-gap, var(--sp-9));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--split-min, 320px), 100%), minmax(0, 1fr)));
  align-items: var(--split-align, start);
}

/* .cluster — fila flexible con separación uniforme (botones, redes, nav…) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--sp-4));
}

/* .stack — separación vertical uniforme entre hijos */
.stack > * + * { margin-top: var(--stack-gap, var(--sp-4)); }

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* --------------------------------------------------- Icono ---------- */
.icon {
  width: var(--icon-size, 1.375rem);
  height: var(--icon-size, 1.375rem);
  flex: none;
  fill: none;
  stroke: currentColor;
}
.icon--sm { --icon-size: 1rem; }
.icon--lg { --icon-size: 1.75rem; }
/* Iconos sólidos (se pintan con fill en vez de trazo) */
.icon--solid { fill: currentColor; stroke: none; }

/* --------------------------------------------------- Badge ---------- */
/* Círculo contenedor de icono. Un solo componente para toda la página. */
.badge-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-size, 3.875rem);
  height: var(--badge-size, 3.875rem);
  border-radius: 50%;
  flex: none;
}
.badge-circle--light {
  background: linear-gradient(150deg, var(--c-cream-200), var(--c-cream-300));
  box-shadow: inset 0 0 0 1px rgba(45, 53, 36, .06);
  color: var(--c-green-800);
}
.badge-circle--dark {
  --badge-size: 2.875rem;
  background: rgba(244, 235, 217, .1);
  border: 1px solid var(--border-on-dark);
  color: var(--accent);
}
.badge-circle--outline {
  --badge-size: 2.5rem;
  border: 1px solid rgba(255, 255, 255, .3);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* --------------------------------------------------- Pill ----------- */
/* Etiqueta pequeña sobre la imagen de una tarjeta (categoría del tour) */
.pill {
  display: inline-block;
  background: var(--accent);
  color: var(--c-green-950);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
}

/* --------------------------------------------------- Botón ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* En táctil no hay hover: el feedback es la propia pulsación (:active) */
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .6; pointer-events: none; }

.btn--primary { background: var(--c-green-900); color: var(--text-on-dark); }
.btn--accent { background: var(--accent); color: var(--c-green-950); padding: .65rem 1.25rem; }
.btn--ghost-light { background: transparent; color: var(--text-on-dark); border-color: rgba(255, 255, 255, .55); }
.btn--block { width: 100%; }

/* --------------------------------------------------- Card ----------- */
/* Superficie base. Se compone con modificadores en vez de duplicar estilos. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card--pad { padding: var(--sp-7) var(--sp-6); }
.card--lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card--lift:active { transform: scale(.985); }
.card--flush { overflow: hidden; }        /* recorta la imagen a los bordes */

/* --------------------------------------------------- Media ---------- */
/* Contenedor de imagen con proporción fija → cero saltos de layout (CLS) */
.media {
  position: relative;
  aspect-ratio: var(--media-ratio, 16 / 10);
  background-color: var(--c-green-800);
  overflow: hidden;
}
.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.media__pill { position: absolute; top: var(--sp-3); left: var(--sp-3); }

/* --------------------------------------------------- Encabezado de sección */
.section-head { margin-bottom: var(--sp-9); max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > *:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--sp-3);
}
.eyebrow--light { color: var(--accent); }

.section-title { font-size: var(--fs-2xl); }
.section-lead  { color: var(--text-muted); font-size: var(--fs-md); }
.section--dark .section-lead { color: var(--text-on-dark-muted); }

/* --------------------------------------------------- Campo de formulario */
/* .field envuelve etiqueta + control. Altura unificada en todos los
   controles para que la rejilla nunca se vea desalineada. */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;               /* permite encoger dentro de grid/flex */
}
.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}
.field__control {
  width: 100%;
  min-width: 0;
  height: var(--field-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 163, 105, .25);
}
/* Los <select> nativos varían mucho entre navegadores: los normalizamos */
select.field__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--sp-8);
  background-image: var(--field-arrow);
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 1.1em;
  text-overflow: ellipsis;    /* trunca en vez de ensanchar el contenedor */
}
textarea.field__control {
  height: auto;
  min-height: 5.5rem;
  padding: var(--sp-3);
  resize: vertical;           /* solo vertical: no puede romper el ancho */
  line-height: 1.55;
}

/* .field-group — fila de campos que colapsa sola cuando no caben */
.field-group {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), minmax(0, 1fr)));
}

/* Teléfono: prefijo país + número. El select puede encogerse (min-width:0
   + flex-shrink activo), por eso ya no deforma la rejilla. */
.field__phone { display: flex; gap: var(--sp-2); min-width: 0; }
.field__phone .field__code   { flex: 1 1 9.5rem; min-width: 0; }
.field__phone .field__number { flex: 1 1 7rem;   min-width: 0; }

/* Honeypot antispam: fuera de pantalla pero accesible para los bots */
.field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  text-align: center;
  font-size: var(--fs-sm);
  margin: var(--sp-3) 0 0;
  min-height: 1.4em;
}
.form-status--ok  { color: var(--success); font-weight: 600; }
.form-status--err { color: var(--danger);  font-weight: 600; }

/* --------------------------------------------------- Acordeón ------- */
.accordion__item { border-bottom: 1px solid var(--border); }
/* El <h3> existe por semántica/SEO; el estilo lo pone el botón interno */
.accordion__heading { margin: 0; font: inherit; }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-1);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-green-950);
  transition: color var(--dur) var(--ease);
}
.accordion__chevron { color: var(--accent-strong); transition: transform var(--dur-slow) var(--ease); }
.accordion__item.is-open .accordion__chevron { transform: rotate(180deg); }

/*  Panel plegable 100% CSS con la técnica grid 0fr → 1fr.
    Ventaja sobre el viejo max-height en JS: no hay que medir alturas, así
    que funciona igual al cambiar de idioma o al redimensionar. */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding: 0 var(--sp-1) var(--sp-5);
  margin: 0;
}

/* ==========================================================================
   4b. HOVER — SOLO para dispositivos con mouse real.
   Todo lo que reacciona al pasar el cursor vive aquí adentro. En un
   teléfono este bloque completo se ignora, así que nada puede quedar
   "pegado" en su estado de hover después de tocarlo.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .topbar__link:hover { opacity: 1; color: var(--accent); }
  .topbar__social a:hover { color: var(--accent); }

  .nav__link:hover::after { width: 100%; }

  .lang-switch__btn:hover:not(.is-active) { color: var(--c-green-900); }

  .badge-circle--outline:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--c-green-950);
  }

  .btn:hover { transform: translateY(-1px); }
  .btn--primary:hover { background: var(--c-green-800); box-shadow: var(--sh-md); }
  .btn--accent:hover { background: var(--accent-strong); }
  .btn--ghost-light:hover { background: rgba(255, 255, 255, .12); }

  .card--lift:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
  .card--lift:hover .media > img { transform: scale(1.06); }

  .accordion__trigger:hover { color: var(--accent-strong); }

  .tour-card__cta:hover { color: var(--accent-strong); }

  .footer__nav a:hover, .footer__social a:hover { color: var(--accent); }

  .fab:hover { transform: scale(1.08); background: var(--accent); color: var(--c-green-950); }
}

/* ==========================================================================
   5. SECCIONES
   ========================================================================== */

/* --------------------------------------------------- Skip link ------ */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 100;
  background: var(--c-green-900);
  color: var(--text-on-dark);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------- Header --------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--sh-md); }

.topbar { background: var(--bg-dark); color: var(--text-on-dark-muted); font-size: var(--fs-xs); }
.topbar__inner { display: flex; align-items: center; gap: var(--sp-6); padding-block: var(--sp-2); }
.topbar__link { display: inline-flex; align-items: center; gap: var(--sp-2); opacity: .9; transition: color var(--dur) var(--ease); }
.topbar__social { margin-left: auto; display: flex; gap: var(--sp-3); }

.header__bar { display: flex; align-items: center; gap: var(--sp-5); padding-block: var(--sp-3); }

.brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-green-950); margin-right: auto; }
.brand__mark { width: 2.75rem; height: 2.75rem; color: var(--c-green-900); flex: none; }
.brand__mark--light { color: var(--c-cream-200); width: 2.5rem; height: 2.5rem; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; font-family: var(--font-serif); }
.brand__name { font-size: var(--fs-lg); letter-spacing: .04em; font-weight: 700; }
.brand__tagline {
  font-family: var(--font-sans);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.brand__mark--light + div .brand__tagline { color: var(--text-on-dark-muted); }

/* Nav de escritorio */
.nav { display: flex; align-items: center; gap: var(--sp-7); font-size: var(--fs-sm); font-weight: 600; }
.nav__link { position: relative; padding-block: var(--sp-1); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}

/* Botón hamburguesa animado: 3 barras que se transforman en X.
   Usa el propio aria-expanded que ya gestiona js/main.js — sin JS extra. */
.nav__toggle {
  display: none;
  background: none;
  border: none;
  color: var(--c-green-950);
  padding: var(--sp-2);
  margin: calc(var(--sp-2) * -1);
}
.nav__toggle-box { position: relative; width: 22px; height: 15px; display: block; }
.nav__toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), top var(--dur-slow) var(--ease);
}
.nav__toggle-bar:nth-child(1) { top: 0; }
.nav__toggle-bar:nth-child(2) { top: 6.5px; }
.nav__toggle-bar:nth-child(3) { top: 13px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { top: 6.5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { top: 6.5px; transform: rotate(-45deg); }

.nav__backdrop { display: none; }
.nav__close { display: none; }

/* Selector de idioma */
.lang-switch { display: flex; gap: 2px; background: var(--bg-alt); border-radius: var(--r-pill); padding: 3px; flex: none; }
.lang-switch__btn {
  border: none;
  background: transparent;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--text-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-switch__btn.is-active { background: var(--c-green-900); color: var(--text-on-dark); }

/* --------------------------------------------------- Hero ----------- */
.hero {
  position: relative;
  min-height: min(88svh, 44rem); /* svh = alto "pequeño" real del navegador móvil, sin saltos por la barra de direcciones */
  display: flex;
  align-items: center;
  padding-block: var(--sp-11);
  color: var(--text-on-dark);
  background-color: var(--c-green-900);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--c-green-900) url("../assets/img/hero.jpg") center / cover no-repeat;
  animation: hero-zoom 16s var(--ease-out) forwards;
}
/* Velo oscuro: garantiza contraste del texto sobre cualquier foto */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--c-green-950) 2%, rgba(30, 36, 24, .35) 55%, rgba(30, 36, 24, .5)),
    linear-gradient(to right, rgba(30, 36, 24, .75), transparent 65%);
}
.hero__content { position: relative; z-index: 1; max-width: 45rem; }
.hero__title { font-size: var(--fs-3xl); color: var(--c-white); margin-bottom: var(--sp-4); }
.hero__lead { font-size: var(--fs-md); color: var(--c-cream-200); max-width: 36rem; margin-bottom: var(--sp-8); }

@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* --------------------------------------------------- Franja de valores */
.features { background: var(--c-green-900); color: var(--text-on-dark); padding-block: var(--sp-6); }
.feature { display: flex; align-items: center; gap: var(--sp-4); }
.feature__title { display: block; font-family: var(--font-serif); font-size: var(--fs-sm); font-weight: 700; }
.feature__sub { display: block; font-size: var(--fs-xs); color: var(--text-on-dark-muted); }

/* --------------------------------------------------- Tours ---------- */
.tour-card { display: flex; flex-direction: column; }
.media--tour { --media-ratio: 16 / 10; }

/* --------------------------------------------------- Carrusel de fotos */
/* Se usa en vez de .media cuando un tour tiene 2 o más fotos. El
   deslizamiento es scroll nativo con scroll-snap — funciona con swipe
   táctil sin nada de JS; js/main.js (módulo Gallery) solo conecta los
   puntos y las flechas encima. */
.tour-gallery {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: var(--c-green-800);
  overflow: hidden;
}
.tour-gallery__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tour-gallery__track::-webkit-scrollbar { display: none; }
.tour-gallery__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.tour-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tour-gallery__dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--sp-3);
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.tour-gallery__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, .5);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tour-gallery__dot.is-active { background: var(--c-white); transform: scale(1.35); }

.tour-gallery__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 36, 24, .55);
  color: var(--c-white);
  font-size: 1.2rem;
  line-height: 1;
  transition: background-color var(--dur) var(--ease);
}
.tour-gallery__arrow--prev { left: var(--sp-2); }
.tour-gallery__arrow--next { right: var(--sp-2); }

@media (hover: hover) and (pointer: fine) {
  .tour-gallery__arrow:hover { background: rgba(30, 36, 24, .8); }
}
.tour-card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.tour-card__meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }
.tour-card__title { font-size: var(--fs-xl); margin: 0; }
.tour-card__desc { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.tour-card__list { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); margin-block: var(--sp-1); }
.tour-card__list li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.tour-card__list .icon { color: var(--accent-strong); margin-top: .2em; }
.tour-card__footer {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.tour-card__price { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 700; color: var(--c-green-900); }
.tour-card__price small { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.tour-card__cta { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 700; color: var(--c-green-900); transition: color var(--dur) var(--ease), gap var(--dur) var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .tour-card__cta:hover { gap: var(--sp-2); }
}

.grid-message { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding-block: var(--sp-7); }

/* --------------------------------------------------- Por qué / Testimonios */
.why-card__title { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2); }
.why-card p { color: var(--text-muted); font-size: var(--fs-sm); }

.stars { display: flex; gap: 2px; color: var(--accent); margin-bottom: var(--sp-4); }
.testimonial p { font-style: italic; margin-bottom: var(--sp-4); }
.testimonial cite { font-style: normal; font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; }

/* --------------------------------------------------- Sobre nosotros - */
.about__media {
  --media-ratio: 4 / 5;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.about__mission h3 { font-size: var(--fs-base); color: var(--accent-strong); margin-bottom: var(--sp-2); }
.about__mission p { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------- Contacto ------- */
.contact__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact__list li { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-on-dark-muted); font-size: var(--fs-sm); }
.contact__list .icon { color: var(--accent); }
.contact__form {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: clamp(var(--sp-5), 4vw, var(--sp-8));
  box-shadow: var(--sh-lg);
  color: var(--text);
}

/* --------------------------------------------------- Footer --------- */
.site-footer { background: var(--bg-dark); color: var(--text-on-dark-muted); }
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer__brand { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-serif); color: var(--c-cream-200); }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); font-size: var(--fs-sm); }
.footer__social { display: flex; gap: var(--sp-4); }
.footer__bottom { padding-block: var(--sp-4); font-size: var(--fs-xs); text-align: center; }
.footer__bottom p { margin: 0; }

/* --------------------------------------------------- Botón flotante - */
.fab {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-fab);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-green-900);
  color: var(--text-on-dark);
  box-shadow: var(--sh-lg);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  /* No queda tapado por la barra gestual de iPhone/Android con notch */
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.fab:active { transform: scale(.94); }
.fab .icon { --icon-size: 1.6rem; }

/* Pequeño "latido" para llamar la atención sin ser molesto — se detiene
   apenas el usuario interactúa con la página. */
.fab { animation: fab-pulse 2.6s ease-in-out 1.2s 3; }
@keyframes fab-pulse {
  0%, 100% { box-shadow: var(--sh-lg), 0 0 0 0 rgba(45, 53, 36, 0); }
  50%      { box-shadow: var(--sh-lg), 0 0 0 10px rgba(45, 53, 36, 0); }
}

/* ==========================================================================
   6. ANIMACIONES DE ENTRADA (scroll reveal)
   --------------------------------------------------------------------------
   La clase .reveal solo hace algo si <html> tiene la clase .js (la agrega
   js/main.js al arrancar). Así, si JavaScript falla o está desactivado,
   todo el contenido es visible igual — nunca depende del JS para
   mostrarse. También se apaga por completo con prefers-reduced-motion.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Efecto cascada dentro de una rejilla: cada tarjeta entra un poco
   después que la anterior, hasta un tope razonable de 8 elementos. */
.js .grid-auto > .reveal:nth-child(1) { transition-delay: .05s; }
.js .grid-auto > .reveal:nth-child(2) { transition-delay: .12s; }
.js .grid-auto > .reveal:nth-child(3) { transition-delay: .19s; }
.js .grid-auto > .reveal:nth-child(4) { transition-delay: .26s; }
.js .grid-auto > .reveal:nth-child(5) { transition-delay: .33s; }
.js .grid-auto > .reveal:nth-child(6) { transition-delay: .4s; }
.js .grid-auto > .reveal:nth-child(n+7) { transition-delay: .46s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .hero__bg { animation: none; }
  .fab { animation: none; }
}

/* ==========================================================================
   7. UTILIDADES
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   8. RESPONSIVE
   Casi todo el layout ya se adapta solo (grid auto-fit + clamp).
   Aquí quedan únicamente los cambios que un cambio de tamaño no resuelve:
   el menú de escritorio → menú lateral móvil.
   ========================================================================== */
@media (max-width: 860px) {
  .topbar { display: none; }
  .nav__toggle { display: block; order: 3; }

  /* Panel lateral deslizante */
  .nav {
    position: fixed;
    inset-block: 0;
    right: 0;
    z-index: var(--z-nav);
    width: min(20rem, 82vw);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
    padding: var(--sp-11) var(--sp-7) var(--sp-7);
    background: var(--bg);
    box-shadow: var(--sh-lg);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
    overflow-y: auto;
    padding-bottom: max(var(--sp-7), env(safe-area-inset-bottom, 0px));
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav .btn { margin-top: var(--sp-2); }

  /* Botón "×" para cerrar el panel a mano, además de tocar fuera,
     el fondo oscuro o Escape — un cierre siempre visible y obvio. */
  .nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background: var(--bg-alt);
    color: var(--text);
  }
  .nav__close:active { transform: scale(.92); }

  /* Fondo oscuro que confirma visualmente que se puede tocar fuera */
  .nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background: rgba(30, 36, 24, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
  }
  .nav__backdrop.is-open { opacity: 1; visibility: visible; }

  /* Bloquea el scroll del fondo con el menú abierto */
  body.has-nav-open { overflow: hidden; }
}

@media (max-width: 400px) {
  .brand__mark { width: 2.25rem; height: 2.25rem; }
  .brand__name { font-size: 1rem; }
  .brand__tagline { display: none; }
  .lang-switch__btn { padding: .3rem .5rem; }
  .fab { width: 3rem; height: 3rem; right: var(--sp-4); bottom: var(--sp-4); }
  .fab .icon { --icon-size: 1.4rem; }
}