/* ==========================================================================
   NATURAMAZON EXPEDITIONS
   Sistema visual del sitio.

   PALETA          verde Naturamazon (#042710) + papel frío + acento verde (#337006)
   TIPOGRAFÍA      Bricolage Grotesque (display) + Schibsted Grotesk (texto)
   RADIOS          píldoras 999px  ·  medios y tarjetas 16px  ·  campos 12px
   MOVIMIENTO      solo transform y opacity, curvas ease-out propias
   TEMA            claro por defecto, oscuro automático, con interruptor manual
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Superficies y texto (modo claro) */
  --paper:        #F2F3EE;
  --paper-2:      #E9EBE3;
  --paper-3:      #FFFFFF;
  --ink:          #042710;
  --ink-2:        #45564D;
  --ink-3:        #5D6D64;   /* el tono terciario más claro que aún cumple AA */
  --line:         rgba(16, 31, 25, 0.14);
  --line-soft:    rgba(16, 31, 25, 0.08);

  /* Acento único de marca. Se usa igual en todo el sitio. */
  --accent:       #337006;   /* fondos, bordes, textos grandes */
  /* Croquis y fondo de varillal. Van con los tokens para que el mapa cambie
     solo entre el tema claro y el oscuro, como el resto del sitio. */
  --agua:         #9CC2CE;
  --agua-rot:     #4E7E8D;
  --reserva:      #2C5B3D;
  --reserva-linea:#204630;
  --reserva-rot:  #F2F3EE;
  --varillal:     rgba(16, 31, 25, .085);
  --varillal-2:   rgba(16, 31, 25, .05);
  --accent-ink:   #2A5C05;   /* textos pequeños, cumple AA sobre papel */
  --accent-on:    #FFFFFF;   /* texto sobre el acento */
  --accent-veil:  rgba(51, 112, 6, .08);  /* fondo apenas teñido al pasar */

  /* Sombras teñidas al fondo, nunca negro puro */
  --shadow-sm: 0 1px 2px rgba(16, 31, 25, .06), 0 2px 8px rgba(16, 31, 25, .05);
  --shadow-md: 0 10px 30px rgba(16, 31, 25, .10);

  /* Forma */
  --r-pill: 999px;
  --r-card: 16px;
  --r-field: 12px;

  /* Ritmo */
  --shell: 1240px;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Curvas y tiempos */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 160ms;
  --t-ui: 220ms;
  --t-reveal: 620ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0D1712;
    --paper-2:    #14211B;
    --paper-3:    #16241D;
    --ink:        #E8EBE3;
    --ink-2:      #A8B5AC;
    --ink-3:      #86948B;
    --line:       rgba(232, 235, 227, 0.16);
    --line-soft:  rgba(232, 235, 227, 0.09);
    --accent:     #8CC63F;
    --agua:       #3F6B78;
    --agua-rot:   #7FADBB;
    --reserva:    #24503A;
    --reserva-linea:#3A7A54;
    --reserva-rot:#E8EBE3;
    --varillal:   rgba(232, 235, 227, .075);
    --varillal-2: rgba(232, 235, 227, .045);
    --accent-ink: #A3D65E;
    --accent-on:  #0D1712;
    --accent-veil: rgba(140, 198, 63, .12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .28);
    --shadow-md: 0 12px 34px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:      #0D1712;
  --paper-2:    #14211B;
  --paper-3:    #16241D;
  --ink:        #E8EBE3;
  --ink-2:      #A8B5AC;
  --ink-3:      #86948B;
  --line:       rgba(232, 235, 227, 0.16);
  --line-soft:  rgba(232, 235, 227, 0.09);
  --accent:     #8CC63F;
  --agua:       #3F6B78;
  --agua-rot:   #7FADBB;
  --reserva:    #24503A;
  --reserva-linea:#3A7A54;
  --reserva-rot:#E8EBE3;
  --varillal:   rgba(232, 235, 227, .075);
  --varillal-2: rgba(232, 235, 227, .045);
  --accent-ink: #A3D65E;
  --accent-on:  #0D1712;
  --accent-veil: rgba(140, 198, 63, .12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .28);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1em; height: 1em; fill: currentColor; flex: none; }

a { color: inherit; }

::selection { background: var(--accent); color: var(--accent-on); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.skip-link {
  position: absolute; left: 1rem; top: 1rem; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: var(--r-pill);
  font-size: .875rem; text-decoration: none;
  transform: translateY(-5rem);
  transition: transform var(--t-ui) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- 3. TIPOGRAFÍA ---------- */
.h2 {
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.h2--invert { color: #FFFFFF; max-width: 18ch; }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--ink-2);
  max-width: 62ch;
  margin: 1.1rem 0 0;
}
.lead--short { max-width: 48ch; }

.eyebrow {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent-ink);
  margin: 0 0 .9rem;
  font-weight: 500;
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--flush { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* ---------- 4. BOTONES Y ENLACES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: .72rem 1.35rem;
  font: inherit;
  font-size: .935rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-ui) ease,
              border-color var(--t-ui) ease,
              color var(--t-ui) ease;
}
.btn--lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn--block { width: 100%; padding-block: 1rem; min-width: 0; }

.btn--primary { background: var(--accent); color: var(--accent-on); }
/* El fondo oscuro traslúcido mantiene el texto blanco legible también sobre
   las zonas claras de la foto del hero. */
.btn--ghost {
  background: rgba(9, 20, 14, .38);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Secundario sobre papel. El fantasma de arriba está pensado para ir encima
   de una foto: sobre una tarjeta blanca se vería como una mancha gris. */
.btn--linea { background: transparent; color: var(--ink); border-color: var(--line); }

.btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-ink); }
  .btn--ghost:hover { background: rgba(9, 20, 14, .58); border-color: #FFFFFF; }
  .btn--linea:hover { border-color: var(--ink-3); background-color: var(--paper-2); }
}

@media (prefers-reduced-transparency: reduce) {
  .btn--ghost { background: rgba(9, 20, 14, .82); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease;
}
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--line-soft); }
}

.link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent-ink);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
  padding-top: 1rem;
}
.link svg { font-size: .95em; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link:hover svg { transform: translate(2px, -2px); }
}

.tag {
  display: inline-block;
  align-self: flex-start;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .28rem .7rem;
  margin-bottom: .85rem;
}

/* ---------- 5. NAVEGACIÓN ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  color: #FFFFFF;
  transition: background-color 260ms ease, color 260ms ease, box-shadow 260ms ease;
}
.nav__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  height: 72px;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Logotipo original de la empresa. Sobre la foto del hero y en tema oscuro se
   muestra en blanco, que es la versión que la propia empresa usa en sus piezas. */
/* La barra lleva la marca original de la empresa (el loro) con el nombre en
   texto, porque el logotipo completo es ilegible a la altura de una barra.
   El logotipo completo se usa en el pie, donde sí hay espacio.
   Sobre la foto del hero y en tema oscuro va en blanco, que es la versión que
   la propia empresa usa en sus piezas. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}
/* El nombre es una sola palabra y no puede partirse. Si la barra se quedara
   sin sitio, sin esto el texto se saldría de su caja y se montaría encima de
   las banderas. */
.brand__text { min-width: 0; overflow: hidden; }
.brand__mark {
  width: auto;
  height: 40px;
  filter: brightness(0) invert(1);
  transition: filter 260ms ease;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em;
}
.brand__sub {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .24em;
  opacity: .72;
}

.nav.is-stuck .brand__mark,
.nav.is-open .brand__mark { filter: none; }

.brand__logo { width: auto; height: 82px; }

:root[data-theme="dark"] .nav.is-stuck .brand__mark,
:root[data-theme="dark"] .nav.is-open .brand__mark,
:root[data-theme="dark"] .brand__logo { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav.is-stuck .brand__mark,
  :root:not([data-theme="light"]) .nav.is-open .brand__mark,
  :root:not([data-theme="light"]) .brand__logo { filter: brightness(0) invert(1); }
}

.nav__links { display: flex; gap: clamp(.9rem, 2vw, 1.8rem); }
.nav__links a {
  font-size: .9rem;
  text-decoration: none;
  opacity: .88;
  transition: opacity var(--t-ui) ease;
}
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { opacity: 1; } }

.nav__actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.nav__burger { display: none; }
.nav .icon-btn { border-color: currentColor; opacity: .75; }
.nav.is-stuck .icon-btn { border-color: var(--line); opacity: 1; }

/* Selector de idioma: dos banderas, la de España para el español y la de
   Estados Unidos para el inglés. Se prefiere sobre un menú desplegable porque
   muestra de un vistazo que el sitio existe en los dos idiomas, y la bandera
   se reconoce sin leer. La activa va a todo color sobre una pastilla; la otra
   queda desvaída, que es la señal de "esta no es la que está puesta". */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  opacity: .75;
  transition: opacity var(--t-ui) ease, border-color var(--t-ui) ease;
}
.nav.is-stuck .lang,
.nav.is-open .lang { border-color: var(--line); opacity: 1; }

.lang__btn {
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 0;
  padding: .34rem .46rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  opacity: .72;
  transition: background-color var(--t-ui) ease,
              opacity var(--t-ui) ease,
              transform var(--t-press) var(--ease-out);
}
.lang__btn[aria-pressed="true"] {
  background: color-mix(in srgb, currentColor 20%, transparent);
  opacity: 1;
}
.lang__btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .lang__btn:not([aria-pressed="true"]):hover { opacity: 1; }
  .lang__btn:not([aria-pressed="true"]):hover .flag { filter: none; }
}

/* El filete oscuro despega la bandera del fondo: sin él, las franjas blancas
   de la de Estados Unidos se pierden cuando la barra está en claro.
   La bandera que no está puesta pierde color, pero no del todo: tiene que
   seguir reconociéndose para que alguien la busque y la apriete. */
.flag {
  display: block;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(8, 18, 13, .28);
  filter: saturate(.4);
  transition: filter var(--t-ui) ease;
}
.lang__btn[aria-pressed="true"] .flag { filter: none; }

.theme-toggle__glyph {
  width: 15px; height: 15px; border-radius: 50%;
  background: currentColor;
  box-shadow: inset -4px -4px 0 0 var(--paper);
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease;
}
:root[data-theme="dark"] .theme-toggle__glyph,
.nav.is-stuck .theme-toggle__glyph { box-shadow: inset -4px -4px 0 0 var(--paper); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: .25rem;
  padding: .5rem clamp(1.25rem, 5vw, 3rem) 1.5rem;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transform-origin: top center;
}
.mobile-menu a {
  padding: .8rem 0;
  text-decoration: none;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu .btn { margin-top: 1rem; border-bottom: 0; }

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: inline-grid; }
  .mobile-menu { display: flex; }
  .mobile-menu[hidden] { display: none; }
  .nav.is-open { background: var(--paper); color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav.is-open .icon-btn { border-color: var(--line); opacity: 1; }
}
.burger-close { display: none; }
.nav.is-open .burger-open { display: none; }
.nav.is-open .burger-close { display: block; }

/* En pantallas angostas la barra lleva marca, idioma, tema y menú en una sola
   línea. Todo se compacta para que nada se salga ni se parta en dos filas. */
@media (max-width: 560px) {
  .nav__inner { gap: .75rem; }
  .nav__actions { gap: .4rem; }
  .brand__mark { height: 34px; }
  .brand__name { font-size: .95rem; }
  .brand__sub { font-size: .58rem; letter-spacing: .2em; }
  .lang__btn { padding: .3rem .38rem; }
  .flag { width: 19px; height: 14px; }
  .nav .icon-btn { width: 36px; height: 36px; font-size: 1rem; }
}

/* Por debajo de 400 px el reparto anterior ya no alcanza: marca, banderas,
   tema y menú no caben. Aquí se recorta cada pieza lo justo para que la barra
   siga siendo una sola línea con la marca completa y legible. */
@media (max-width: 400px) {
  .nav__inner { padding: 0 .85rem; gap: .5rem; height: 64px; }
  .nav__actions { gap: .3rem; }
  .brand { gap: .45rem; }
  .brand__mark { height: 28px; }
  .brand__name { font-size: .88rem; }
  .brand__sub { font-size: .52rem; letter-spacing: .16em; }
  .lang { padding: 2px; }
  .lang__btn { padding: .26rem .3rem; }
  .flag { width: 17px; height: 13px; }
  .nav .icon-btn { width: 32px; height: 32px; font-size: .95rem; }
}

/* ---------- 5b. PANTALLA DE CARGA ---------- */
/* Todo cuelga de .cargando, que pone el guion de la cabecera antes del primer
   pintado. Sin JavaScript la clase no existe y esta pantalla no se ve nunca:
   así no puede dejar el sitio tapado si algo falla.

   El fondo es verde profundo en los dos temas, a propósito. Detrás hay una foto
   de bosque oscuro, y un velo blanco en tema claro daría un fogonazo justo al
   destaparse. Por eso aquí los colores van escritos, no tomados de las fichas. */
.carga {
  position: fixed;
  inset: 0;
  z-index: 200;
  place-items: center;
  background: radial-gradient(125% 95% at 50% 36%, #16311F 0%, #0D1D13 48%, #070F0A 100%);
  transition: opacity 420ms var(--ease-out);
  /* Solo el display depende de la clase. El aspecto vive aquí porque, al
     apagarse, la capa deja de llevar .cargando pero todavía tiene que verse
     los milisegundos que dura la despedida. */
  display: none;
}
.cargando .carga,
.carga.se-va { display: grid; }

/* Mientras la pantalla tapa, la entrada escalonada del hero espera su turno.
   Si no, se reproduciría detrás del velo y nadie llegaría a verla. */
.cargando .hero__badge,
.cargando .hero__title .pal__i,
.cargando .hero__sub,
.cargando .hero__actions,
.cargando .hero__media img { animation-play-state: paused; }

.carga__centro {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
}

/* ---- el ave ---- */
.ave {
  width: clamp(132px, 34vw, 190px);
  height: auto;
  fill: #EDF0E7;
  animation: ave-entra 640ms var(--ease-out) both,
             ave-planear 520ms ease-in-out 640ms infinite;
}
.ave__ala {
  /* El giro tiene que ocurrir sobre el hombro, no sobre el centro del ala.
     view-box hace que estas coordenadas sean las del propio dibujo. */
  transform-box: view-box;
  transform-origin: 78px 55px;
  animation: aletear 520ms infinite;
}
.ave__ala--fondo {
  transform-origin: 74px 58px;
  opacity: .42;
  animation-delay: 70ms;          /* el ala de atrás va medio golpe retrasada */
}
.ave__ojo { fill: #0C1A12; }

@keyframes ave-entra {
  from { opacity: 0; transform: translate(-58px, 6px); }
  to   { opacity: 1; transform: translate(0, 2px); }
}
/* El ave sube en el golpe hacia abajo, que termina al 30% del ciclo. */
@keyframes ave-planear {
  0%, 100% { transform: translateY(2px); }
  30%      { transform: translateY(-5px); }
}
/* El ala sube a 45 grados y baja hasta 100 por debajo. El golpe hacia abajo se
   come solo el 30% del ciclo y la recuperación el 70% restante: así vuela un
   ave de verdad, y así la animación no parece un metrónomo. */
@keyframes aletear {
  0%   { transform: rotate(45deg);   animation-timing-function: cubic-bezier(.35, 0, .2, 1); }
  30%  { transform: rotate(-100deg); animation-timing-function: cubic-bezier(.3, 0, .55, 1); }
  100% { transform: rotate(45deg); }
}

/* ---- nombre y barra ---- */
.carga__marca {
  margin: 0;
  text-align: center;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  letter-spacing: -.02em;
  color: #EDF0E7;
  line-height: 1.1;
}
.carga__marca span {
  display: block;
  margin-top: .42rem;
  font-size: .56em;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(237, 240, 231, .62);
}

.carga__barra {
  width: min(210px, 46vw);
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(237, 240, 231, .16);
  overflow: hidden;
}
.carga__avance {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: #8CC63F;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}

/* ---- salida ---- */
.carga__saltar {
  position: absolute;
  bottom: clamp(1.4rem, 5vh, 2.6rem);
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  padding: .55rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(237, 240, 231, .3);
  background: rgba(237, 240, 231, .08);
  color: rgba(237, 240, 231, .82);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  /* Aparece solo si la espera se alarga: en una carga rápida nadie lo ve. */
  opacity: 0;
  animation: saltar-asoma 280ms var(--ease-out) 1400ms forwards;
  transition: background 220ms ease, transform var(--t-press) var(--ease-out);
}
.carga__saltar:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .carga__saltar:hover { background: rgba(237, 240, 231, .16); }
}
@keyframes saltar-asoma { to { opacity: 1; } }

.carga.se-va { opacity: 0; pointer-events: none; }
.carga.se-va .ave {
  /* El ave se va volando hacia arriba a la derecha mientras el velo se apaga.
     Tiene que ser otra animación y no una transición: al quitar la animación
     del cabeceo y cambiar el transform en el mismo fotograma, el navegador no
     arranca ninguna transición y el ave daría un salto seco. Las alas son otro
     elemento y siguen batiendo hasta el final. */
  /* La curva acelera al final, que es como se aleja algo que se va. Aquí no se
     toca la opacidad: de apagarla se encarga el velo, y con una curva de salida
     normal el ave se volvía invisible en el primer tercio del vuelo. */
  animation: ave-vuela 460ms cubic-bezier(.42, 0, .7, 1) forwards;
}
@keyframes ave-vuela {
  from { transform: translateY(2px); }
  to   { transform: translate(104px, -82px) scale(.9); }
}
.carga.se-va .carga__centro > :not(.ave),
.carga.se-va .carga__saltar {
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}

/* ---------- 6. HERO ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-top: 6rem;             /* tope de aire superior */
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: hero-settle 1400ms var(--ease-out) forwards;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    /* Base para el texto. Medida sobre la foto real: con .80 en el borde
       inferior, el 99% de los pixeles bajo el titulo pasa de 5:1 contra el
       blanco, asi que el velo se puede dejar mas claro y la foto respira. */
    linear-gradient(to top, rgba(8, 18, 13, .80) 0%, rgba(8, 18, 13, .38) 38%, rgba(8, 18, 13, .10) 66%, transparent 84%),
    /* franja superior para que la barra se lea sobre cielos claros */
    linear-gradient(to bottom, rgba(8, 18, 13, .55) 0%, rgba(8, 18, 13, .18) 12%, transparent 22%),
    linear-gradient(to right, rgba(8, 18, 13, .38), transparent 60%);
}

@keyframes hero-settle { to { transform: scale(1); } }

.hero__content { color: #FFFFFF; }

.hero__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.9vw, 3.9rem);
  line-height: 1.12;             /* holgura para las descendentes de la itálica */
  letter-spacing: -.032em;
  margin: 0;
  max-width: 24ch;
}
.hero__title em { font-style: italic; }
/* Cada línea es un salto propio en pantallas anchas y fluye libre en móvil. */
.hero__title .line { display: block; }
@media (max-width: 640px) {
  .hero__title { max-width: none; }
  .hero__title .line { display: inline; }
}

.hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: rgba(255, 255, 255, .88);
  max-width: 52ch;
  margin: 1.25rem 0 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Entrada escalonada del hero. El título sube palabra por palabra desde
   detrás de un borde: main.js envuelve cada palabra en un par de span al
   aplicar el idioma, y lo rehace si se cambia de idioma. Sin JavaScript el
   titular sale entero y quieto, que es lo correcto. */
.hero__title .pal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Sitio para las descendentes y la itálica: sin esto la máscara las corta. */
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.hero__title .pal__i {
  display: inline-block;
  transform: translateY(115%);
  animation: sube 880ms var(--ease-out) forwards;
  animation-delay: calc(120ms + var(--p, 0) * 62ms);
}
@keyframes sube { to { transform: translateY(0); } }

.hero__sub, .hero__actions {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 760ms var(--ease-out) forwards;
}
.hero__sub { animation-delay: 420ms; }
.hero__actions { animation-delay: 520ms; }

@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* Paralaje del hero sin escuchar el scroll (fuera del hilo principal) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media img {
      animation: hero-settle 1400ms var(--ease-out) forwards, hero-drift linear both;
      animation-timeline: auto, view();
      animation-range: normal, exit-crossing 0% exit 100%;
    }
    @keyframes hero-drift { to { transform: translateY(11%) scale(1.08); } }
  }
}

/* ---------- 7. NOSOTROS Y CREDENCIALES ---------- */
.statement { max-width: 46ch; }

.creds {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.creds__item {
  padding: 1.75rem clamp(1rem, 2vw, 1.75rem) 0 0;
  border-right: 1px solid var(--line-soft);
}
.creds__item:last-child { border-right: 0; }
.creds__item:not(:first-child) { padding-left: clamp(1rem, 2vw, 1.75rem); }
.creds__icon { font-size: 1.4rem; color: var(--accent-ink); margin-bottom: .85rem; }
.creds__item h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 .4rem;
}
.creds__item p { margin: 0; color: var(--ink-2); font-size: .93rem; }

@media (max-width: 820px) {
  .creds { grid-template-columns: 1fr; }
  .creds__item { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 1.5rem 0; }
  .creds__item:not(:first-child) { padding-left: 0; }
  .creds__item:last-child { border-bottom: 0; }
}

/* ---------- 8. EXPERIENCIAS ---------- */
/* La experiencia principal ocupa una fila propia y las otras cuatro van debajo. */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: var(--gap);
}
.xp {
  display: flex;
  flex-direction: column;
  background: var(--paper-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 380ms var(--ease-out), box-shadow 380ms ease;
}
.xp--lead { flex-direction: row; }

.xp__media { overflow: hidden; background: var(--paper-2); }
.xp__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 620ms var(--ease-out);
}
.xp:not(.xp--lead) .xp__media { aspect-ratio: 4 / 3; }
.xp--lead .xp__media { flex: 1 1 52%; min-height: 340px; }

.xp__body {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.4rem 1.5rem;
  flex: 1;
}
.xp--lead .xp__body {
  flex: 1 1 48%;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  justify-content: center;
}
.xp__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 .55rem;
}
.xp--lead .xp__title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.xp__body p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.xp--lead .xp__body p { font-size: 1.03rem; max-width: 46ch; }

@media (hover: hover) and (pointer: fine) {
  .xp:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .xp:hover .xp__media img { transform: scale(1.045); }
}

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .xp--lead { flex-direction: column; }
  .xp--lead .xp__media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
}

/* ---------- 9. ALLPAHUAYO (BLOQUE PARTIDO) ---------- */
.split { background: var(--paper-2); }
.split__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split__media {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__text p { color: var(--ink-2); max-width: 56ch; }
.split__text > p:first-of-type { margin-top: 1.2rem; }

.facts { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.facts li {
  display: grid;
  grid-template-columns: minmax(0, 12rem) 1fr;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.facts strong { font-weight: 500; }
.facts span { color: var(--ink-2); font-size: .93rem; }

/* Nosotros: el texto va primero y las dos fotos con pie de foto a la derecha. */
.split--reverse .split__grid { grid-template-columns: 6fr 5fr; align-items: start; }

.proof { display: grid; gap: 1.25rem; }
.proof__item { margin: 0; }
.proof__item img {
  width: 100%;
  border-radius: var(--r-card);
  border: 1px solid var(--line-soft);
}
.proof__item figcaption {
  margin-top: .6rem;
  font-size: .86rem;
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 46ch;
}

@media (max-width: 900px) {
  .split__grid,
  .split--reverse .split__grid { grid-template-columns: 1fr; }
  .split__media { aspect-ratio: 16 / 10; }
  .facts li { grid-template-columns: 1fr; gap: .2rem; }
  .proof { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (max-width: 560px) {
  .proof { grid-template-columns: 1fr; }
}

/* ---------- 9b. DÓNDE QUEDA: CROQUIS DE LA RESERVA ---------- */
/* El croquis es un dibujo propio, no un mapa cargado de un tercero. Pesa unos
   pocos kilobytes, no instala rastreadores y se colorea con los mismos tokens
   del sitio, así que cambia solo entre el tema claro y el oscuro. */
.mapa { position: relative; overflow: hidden; }   /* recorta al ave que lo cruza */
.mapa__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.mapa__texto p { color: var(--ink-2); max-width: 46ch; }
.mapa__datos {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}
.mapa__datos li {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: .9rem;
  align-items: baseline;
  padding-top: .85rem;
  border-top: 1px solid var(--line-soft);
}
.mapa__datos strong { font-weight: 600; color: var(--ink); }
.mapa__datos span { color: var(--ink-3); font-size: .93rem; }

.mapa__lienzo { margin: 0; }
.mapa__pie {
  margin: 1rem 0 0;
  font-size: .8rem;
  color: var(--ink-3);
  text-align: right;
}

/* Los ríos y la carretera siguen más allá del encuadre: se recortan en el
   borde para no cruzar por encima de lo que hay debajo del mapa. */
.croquis { width: 100%; height: auto; display: block; overflow: hidden; }

/* Los ríos llevan su ancho relativo: el Amazonas pasa del kilómetro de
   orilla a orilla frente a Iquitos, el Nanay y el Itaya son mucho más
   angostos y serpentean, así que un trazo grueso los volvería una mancha. */
.croquis__agua {
  fill: none;
  stroke: var(--agua);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.croquis__agua--ancho { stroke-width: 13; }
.croquis__agua--fino { stroke-width: 3; }
.croquis__reserva {
  fill: var(--reserva);
  stroke: var(--reserva-linea);
  stroke-width: 2;
  stroke-linejoin: round;
  transform-box: view-box;
  transform-origin: 280px 320px;
}
.croquis__via {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
}
.croquis__ruta {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
}
.croquis__movil { fill: var(--accent); }

.croquis__halo { fill: var(--accent); opacity: .18; }
.croquis__punto { fill: var(--accent); }
.croquis__punto--hueco { fill: var(--paper); stroke: var(--accent); stroke-width: 3.5; }
/* La escala se aplica al grupo de dentro y alrededor de su propio centro:
   el de fuera solo lleva la posicion, escrita en el atributo transform. */
.croquis__pin-i { transform-box: fill-box; transform-origin: 50% 50%; }

.croquis text {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  fill: var(--ink-2);
}
.croquis text.croquis__rot { font-weight: 600; fill: var(--ink); }
.croquis text.croquis__rot--ciudad { font-size: 17px; }
.croquis text.croquis__rot--tenue { font-weight: 500; fill: var(--ink-3); font-size: 13px; }
.croquis text.croquis__agua-rot { fill: var(--agua-rot); font-size: 13px; font-style: italic; }
.croquis text.croquis__via-rot { fill: var(--ink-3); font-size: 12.5px; letter-spacing: .06em; }
.croquis text.croquis__area {
  font-size: 15px;
  font-weight: 600;
  fill: var(--reserva-rot);
  letter-spacing: -.01em;
}

/* ---- las capas nuevas del croquis ---- */
/* La trama de varillal se pinta dentro de la silueta de la reserva. Es la
   misma idea que el fondo de las fichas de aves: troncos finos y juntos. */
.croquis__trama { stroke: var(--reserva-rot); stroke-width: 1.4; stroke-linecap: round; }
.croquis__varillales ellipse {
  fill: url(#croquis-varillal);
  opacity: .5;
  pointer-events: all;
  transition: opacity var(--t-ui) ease;
}

/* El sendero cruza el área protegida, que es oscura, y también el papel, que
   es claro. La línea ancha de debajo le abre un carril para que se lea encima
   de los dos fondos sin tener que dibujarla de dos colores. */
.croquis__sendero-h {
  fill: none;
  stroke: var(--paper);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .8;
}
.croquis__sendero {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}

.croquis__km path { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.croquis .croquis__km text {
  font-size: 11px;
  fill: var(--ink-3);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.croquis__hilo { fill: none; stroke: var(--ink-3); stroke-width: 1.1; }
.croquis text.croquis__rot--chico { font-size: 12.5px; font-weight: 600; fill: var(--ink-2); }

.croquis__punto--sitio { fill: var(--paper); stroke: var(--ink-2); stroke-width: 3; }
.croquis__punto--rio { fill: var(--paper); stroke: var(--agua-rot); stroke-width: 3; }

/* Norte y escala. La escala sale de la propia carretera: la entrada está en el
   kilómetro 28 y en el dibujo cae a 219 unidades de Iquitos, así que un
   kilómetro son 7,84 unidades y la barra de 10 km mide 78. */
.croquis__norte path { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.croquis__norte .croquis__norte-p { fill: var(--ink-3); stroke: none; }
.croquis__escala path { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.croquis .croquis__norte text,
.croquis .croquis__escala text {
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink-3);
  letter-spacing: .05em;
}

/* ---- los puntos que se pueden tocar ---- */
/* La zona sensible es mucho más grande que el punto dibujado: con el dedo o
   con el ratón hay que poder darle sin apuntar. */
.croquis__m-zona { fill: none; stroke: none; stroke-width: 26; pointer-events: stroke; }
circle.croquis__m-zona { stroke-width: 0; pointer-events: all; }
.croquis__m { cursor: pointer; }

/* El contorno del navegador dibuja la caja del grupo entero, y un grupo
   incluye su etiqueta, que puede estar a media pantalla: sale un rectángulo
   enorme alrededor de nada. Se apaga y se señala el punto en sí. */
.croquis__m:focus,
.croquis__m:focus-visible { outline: none; }

/* El aro es el resaltado: crece desde el punto al pasar por encima, al tocar
   y al llegar con el tabulador. Es también el indicador de foco. */
.croquis__aro {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(.5);
  transition: opacity var(--t-ui) ease, transform 300ms var(--ease-out);
}
.croquis__m.is-activa .croquis__aro,
.croquis__m:focus-visible .croquis__aro { opacity: 1; transform: scale(1); }

/* El punto crece un poco con el aro. El grupo de dentro no sirve para esto:
   la animación de entrada le fija la escala y ganaría siempre. */
.croquis__punto,
.croquis__punto--sitio,
.croquis__punto--rio {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 260ms var(--ease-out), stroke var(--t-ui) ease, fill var(--t-ui) ease;
}
.croquis__m.is-activa .croquis__punto { transform: scale(1.22); }
.croquis__m.is-activa .croquis__punto--sitio,
.croquis__m.is-activa .croquis__punto--rio { stroke: var(--accent); }
.croquis__m.is-activa .croquis__halo { opacity: .42; }

/* Las dos zonas grandes no llevan aro: se resaltan solas. Las manchas de
   varillal se contornean y el río se enciende por debajo. */
.croquis__varillales ellipse { stroke: none; }
.croquis__m.is-activa .croquis__varillales ellipse {
  opacity: .95;
  stroke: var(--accent);
  stroke-width: 1.6;
}
.croquis__brillo {
  stroke: var(--accent);
  stroke-width: 17;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-ui) ease;
}
.croquis__m.is-activa .croquis__brillo { opacity: .3; }

.croquis .croquis__m.is-activa text { fill: var(--accent-ink); }
.croquis__m text { transition: fill var(--t-ui) ease; }
/* Mishana queda dentro de la reserva: su nombre va en el color del rótulo del
   área, que se lee sobre el verde en los dos temas. El aro marca si está activa. */
.croquis .croquis__m text.croquis__rot--sobre { fill: var(--reserva-rot); }

/* ---- índice de los puntos ---- */
.croquis-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .9rem;
}
.croquis-tab {
  padding: .38rem .74rem;
  font: inherit;
  font-size: .78rem;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--t-ui) ease, color var(--t-ui) ease,
              background-color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.croquis-tab:active { transform: scale(.97); }
.croquis-tab.is-activa {
  border-color: var(--accent);
  color: var(--accent-ink);
  background-color: var(--accent-veil);
}
@media (hover: hover) and (pointer: fine) {
  .croquis-tab:hover { border-color: var(--ink-3); color: var(--ink); }
}

/* ---- lo que cuenta cada punto ---- */
.croquis-info {
  margin-top: 1.2rem;
  min-height: 5.4rem;
  padding: .9rem 1.1rem;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-field) var(--r-field) 0;
  background: var(--paper-3);
}
.croquis-info__t { margin: 0; font-weight: 600; color: var(--ink); font-size: .98rem; }
.croquis-info__d { margin: .34rem 0 0; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }

.croquis-ley {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.3rem;
  font-size: .8rem;
  color: var(--ink-3);
}
.croquis-ley li { display: flex; align-items: center; gap: .5rem; }
.croquis-ley__m { flex: 0 0 auto; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
.croquis-ley__m--via { height: 0; background: none; border-top: 2px dashed var(--ink-3); }
.croquis-ley__m--sendero { height: 0; background: none; border-top: 2px dotted var(--ink-3); }
.croquis-ley__m--varillal {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background-color: var(--reserva);
  background-image: repeating-linear-gradient(94deg, transparent 0 3px, rgba(255, 255, 255, .5) 3px 4px);
}

/* El croquis se dibuja solo cuando entra en pantalla, en el orden en que uno
   leería un mapa: primero los ríos, luego el área protegida, después la
   carretera y al final la ruta desde la ciudad. Sin JavaScript o con
   movimiento reducido queda dibujado y quieto, que es lo que importa. */
.js [data-croquis] .croquis__agua,
.js [data-croquis] .croquis__via,
.js [data-croquis] .croquis__ruta { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.js [data-croquis] .croquis__via { stroke-dasharray: 9 7; }
.js [data-croquis] .croquis__reserva { opacity: 0; transform: scale(.9); }
.js [data-croquis] .croquis__sendero,
.js [data-croquis] .croquis__sendero-h { stroke-dasharray: 3 7; stroke-dashoffset: 620; }
.js [data-croquis] .croquis__sendero-h { stroke-dasharray: 620; }
.js [data-croquis] .croquis__varillales,
.js [data-croquis] .croquis__km path,
.js [data-croquis] .croquis__hilo,
.js [data-croquis] .croquis__norte path,
.js [data-croquis] .croquis__escala path { opacity: 0; }
.js [data-croquis] .croquis__pin-i,
.js [data-croquis] text,
.js [data-croquis] .croquis__movil { opacity: 0; }

.js [data-croquis].is-in .croquis__agua {
  animation: trazo 1100ms var(--ease-out) forwards;
}
.js [data-croquis].is-in .croquis__agua:nth-of-type(2) { animation-delay: 140ms; }
.js [data-croquis].is-in .croquis__reserva {
  animation: brota 620ms var(--ease-out) 620ms forwards;
}
/* La carretera es punteada: animar el desplazamiento del guion la hace
   aparecer avanzando, sin tocar el patrón de puntos. */
.js [data-croquis].is-in .croquis__via {
  stroke-dashoffset: 700;
  animation: via 900ms linear 900ms forwards;
}
.js [data-croquis].is-in .croquis__ruta {
  animation: trazo 700ms var(--ease-out) 1400ms forwards;
}
.js [data-croquis].is-in .croquis__movil {
  offset-path: path("M618.5 116.6 612.2 126.8 593.1 127.8 586.5 132.5 579.2 133.9 576.7 137.4 571.6 139.6 557.7 151.9 557.4 165 540.9 176.7 539.4 180.8 534.1 186.7 530.6 195.3 524.9 197.1 525.8 206.1 520.9 211.6 520.8 217.4 516.8 223.5 513 225.7 509 232.2 508.1 236.3 509.8 252.5 503.3 255.4 501.3 261.6 501.4 268.3 491.8 278.6 492.7 286.6 496.1 291.7 494.2 297 481.7 305.6 474.3 319.5 469 321.4 465.1 327.1 458 329.5 449.3 334.8 438.7 345.5 408.9 380.8 400.5 405.6");
  animation: asoma 200ms linear 1400ms forwards, recorre 700ms var(--ease-out) 1400ms forwards;
}
.js [data-croquis].is-in .croquis__pin-i { animation: brota 420ms var(--ease-out) forwards; }
/* Nadie toca lo que no parece tocable: cuando el dibujo termina, los aros
   laten dos veces y se apagan. */
.js [data-croquis].is-in .croquis__m:not(.is-activa) .croquis__aro {
  animation: pista 1500ms ease-in-out 3000ms 2;
}
@keyframes pista {
  0%, 100% { opacity: 0; transform: scale(.5); }
  50%      { opacity: .55; transform: scale(1); }
}
.js [data-croquis].is-in .croquis__pin--ciudad .croquis__pin-i { animation-delay: 1500ms; }
.js [data-croquis].is-in .croquis__pin--entrada .croquis__pin-i { animation-delay: 2050ms; }
/* Tres latidos y para. Marcan la entrada sin quedarse parpadeando para siempre. */
.js [data-croquis].is-in .croquis__pin--entrada .croquis__halo {
  animation: latido 2000ms ease-in-out 2500ms 3;
}
.js [data-croquis].is-in .croquis__varillales { animation: asoma 760ms var(--ease-out) 1100ms forwards; }
/* El sendero se dibuja al final, cuando ya están el puesto y la reserva:
   así se lee como lo que es, el paso siguiente al llegar en coche. */
.js [data-croquis].is-in .croquis__sendero-h { animation: trazo 1000ms var(--ease-out) 2300ms forwards; }
.js [data-croquis].is-in .croquis__sendero { animation: via 1000ms linear 2300ms forwards; }
.js [data-croquis].is-in .croquis__km path,
.js [data-croquis].is-in .croquis__hilo,
.js [data-croquis].is-in .croquis__norte path,
.js [data-croquis].is-in .croquis__escala path { animation: asoma 460ms var(--ease-out) 1700ms forwards; }
.js [data-croquis].is-in text { animation: asoma 460ms var(--ease-out) 1700ms forwards; }
.js [data-croquis].is-in .croquis__agua-rot { animation-delay: 900ms; }
.js [data-croquis].is-in .croquis__area { animation-delay: 1200ms; }

@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes via   { to { stroke-dashoffset: 0; } }
@keyframes asoma { to { opacity: 1; } }
@keyframes brota { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes latido { 0%, 100% { opacity: .18; } 50% { opacity: .36; } }
@keyframes recorre { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* La misma ave de la pantalla de carga cruza esta sección una sola vez. Es la
   firma de la marca, no un adorno suelto: por eso reutiliza el mismo dibujo. */
.ave-firma {
  position: absolute;
  top: 14%;
  left: -110px;
  width: clamp(52px, 7vw, 82px);
  height: auto;
  fill: var(--accent);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.ave-firma .ave__ojo { fill: var(--paper); }
.ave-firma .ave__ala { animation: none; }     /* no bate hasta que le toca */
.mapa.vuela .ave-firma { animation: firma 3200ms cubic-bezier(.38, .05, .62, 1) forwards; }
.mapa.vuela .ave-firma .ave__ala { animation: aletear 520ms infinite; }
.mapa.vuela .ave-firma .ave__ala--fondo { animation-delay: 70ms; }

@keyframes firma {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.94); }
  10%  { opacity: .85; }
  50%  { transform: translate(55vw, -26px) scale(1); }
  84%  { opacity: .85; }
  100% { opacity: 0;  transform: translate(118vw, -54px) scale(1.02); }
}

/* Debajo de este ancho, encoger el croquis dejaría las etiquetas en cinco
   píxeles. Se queda a su ancho mínimo y el marco se arrastra de lado. */
@media (max-width: 640px) {
  .croquis-marco { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .croquis-marco .croquis { width: 580px; }
}

@media (max-width: 900px) {
  .mapa__grid { grid-template-columns: minmax(0, 1fr); }
  .mapa__pie { text-align: left; }
  .mapa__datos li { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
}

/* ---------- 10. GALERÍA EN MURO ---------- */
/* Veinte fotos propias en casillas de cuatro tamaños. La altura de fila se
   calcula del ancho real del muro para que la casilla chica salga con la misma
   proporción con la que se recortó la foto: lo que se recortó es lo que se ve.
   Cada casilla dice de qué experiencia salió, y al ampliarla el visor ofrece el
   enlace a esa página. */
.gal__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.5rem;
}
.gal__filtro {
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: .86rem;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out),
              background var(--t-ui) var(--ease-out),
              border-color var(--t-ui) var(--ease-out),
              color var(--t-ui) var(--ease-out);
}
.gal__filtro:active { transform: scale(.97); }
.gal__filtro[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
@media (hover: hover) and (pointer: fine) {
  .gal__filtro:hover { border-color: var(--accent); color: var(--accent-ink); }
  .gal__filtro[aria-pressed="true"]:hover { border-color: var(--ink); color: var(--paper); }
}

.gal__muro {
  --hueco: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(84px, 11.5vw, 152px);
  grid-auto-flow: dense;              /* rellena el hueco que deja una casilla grande */
  gap: var(--hueco);
}
/* 1,1366 es el alto partido por el ancho de la casilla chica (900 × 1023). */
@supports (width: 1cqw) {
  .gal__marco { container-type: inline-size; }
  .gal__muro { grid-auto-rows: calc(((100cqw - 3 * var(--hueco)) / 4 * 1.1366 - var(--hueco)) / 2); }
}
.gal__item { grid-column: span 1; grid-row: span 2; }
.gal__item--ancha { grid-column: span 2; }
.gal__item--pano { grid-column: span 3; }
.gal__item--alta { grid-row: span 4; }
.gal__item[hidden] { display: none; }

.gal__fig {
  position: relative;
  height: 100%;
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper-3);
}
/* Sin esta altura el botón mide lo que mide la foto, y en las casillas altas
   la proporción no cuadra al píxel: quedaría una franja debajo. */
.gal__foto { height: 100%; }
.gal__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.gal__pie {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: .1rem;
  padding: 2.6rem .85rem .8rem;
  color: #FFFFFF;
  text-align: left;
  pointer-events: none;               /* el clic es del botón que hay debajo */
  background: linear-gradient(to top, rgba(4, 25, 12, .88), rgba(4, 25, 12, .46) 42%, rgba(4, 25, 12, 0));
}
.gal__t { font-size: .92rem; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.gal__pk { font-size: .74rem; color: rgba(255, 255, 255, .72); }
.gal__pk b { font-weight: 600; color: rgba(255, 255, 255, .95); }

.gal__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  margin-top: 1.75rem;
}
.gal__cierre p { margin: 0; color: var(--ink-2); max-width: 46ch; }

@media (hover: hover) and (pointer: fine) {
  .gal__foto:hover img { transform: scale(1.04); }
}

@media (max-width: 900px) {
  .gal__muro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(96px, 25vw, 200px);
  }
  .gal__item--ancha, .gal__item--pano { grid-column: span 2; }
  @supports (width: 1cqw) {
    .gal__muro { grid-auto-rows: calc(((100cqw - var(--hueco)) / 2 * 1.1366 - var(--hueco)) / 2); }
  }
}
@media (max-width: 560px) {
  .gal__muro { --hueco: .5rem; }
  .gal__pie { padding: 2rem .65rem .65rem; }
  .gal__t { font-size: .84rem; }
  .gal__pk { font-size: .69rem; }
  .gal__cierre .btn { width: 100%; justify-content: center; }
}

/* ---------- 10b. AVAL EN LA PORTADA ---------- */
/* La credencial más fuerte de la empresa estaba a una pantalla de distancia.
   Aquí va sobre el titular, donde se lee antes de decidir si seguir bajando. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.1rem;
  padding: .42rem .85rem .42rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(9, 20, 14, .42);
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #FFFFFF;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.35;
  text-wrap: balance;
  /* Entra con el mismo escalonado que el resto de la portada, pero primero. */
  opacity: 0;
  transform: translateY(18px);
  animation: rise 760ms var(--ease-out) 20ms forwards;
}
.hero__badge svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }

/* ---------- 10c. CIFRAS DE LA RESERVA ---------- */
.cifras__grid {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.cifra {
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(.9rem, 1.8vw, 1.5rem);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.cifra:last-child { border-right: 0; }
.cifra__n {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--accent-ink);
  /* Las cifras suben mientras cuentan; sin esto el ancho baila en cada paso. */
  font-variant-numeric: tabular-nums;
}
.cifra dd {
  margin: .6rem 0 0;
  font-size: .92rem;
  color: var(--ink-2);
  max-width: 18ch;
  text-wrap: balance;
}
.cifras__fuente {
  margin: 1.4rem 0 0;
  font-size: .82rem;
  color: var(--ink-3);
  max-width: 62ch;
}

@media (max-width: 860px) {
  .cifras__grid { grid-template-columns: repeat(2, 1fr); }
  .cifra:nth-child(2n) { border-right: 0; }
}
@media (max-width: 420px) {
  .cifras__grid { grid-template-columns: 1fr; }
  .cifra { border-right: 0; }
}

/* ---------- 10d. AMPLIAR FOTOS DE LA GALERÍA ---------- */
.gal__foto {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  color: #FFFFFF;
  border-radius: inherit;
  overflow: hidden;
  transition: transform var(--t-press) var(--ease-out);
}
.gal__foto:active { transform: scale(.985); }
.gal__lupa {
  position: absolute;
  right: .6rem;
  top: .6rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(9, 20, 14, .5);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* En táctil se ve siempre; con ratón aparece al acercarse. */
  opacity: 1;
  transform: none;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.gal__lupa svg { width: 17px; height: 17px; fill: currentColor; }

@media (hover: hover) and (pointer: fine) {
  .gal__lupa { opacity: 0; transform: scale(.9); }
  .gal__foto:hover .gal__lupa,
  .gal__foto:focus-visible .gal__lupa { opacity: 1; transform: scale(1); }
}

/* ---------- 10e. VISOR DE FOTOS ---------- */
.visor {
  width: min(96vw, 1100px);
  max-width: none;
  max-height: 94dvh;
  padding: 0;
  border: 0;
  background: none;
  color: #FFFFFF;
  overflow: visible;
}
.visor::backdrop { background: rgba(6, 14, 10, .88); }
.visor[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; }

.visor__figura { margin: 0; min-width: 0; }
.visor__figura img {
  display: block;
  width: 100%;
  max-height: 78dvh;
  object-fit: contain;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .05);
}
.visor__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: .7rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, .82);
}
.visor__cuenta { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .6); flex: 0 0 auto; }

/* Mirar una foto es el momento en que apetece saber de dónde salió. */
.visor__pk {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .55rem;
  padding: .45rem .9rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background var(--t-ui) var(--ease-out);
}
.visor__pk svg { width: 1em; height: 1em; fill: currentColor; }
.visor__pk:active { transform: scale(.97); }
.visor__pk[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .visor__pk:hover { background: rgba(255, 255, 255, .17); }
}

.visor__cerrar, .visor__paso {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1);
  color: #FFFFFF;
  cursor: pointer;
  flex: 0 0 auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.visor__cerrar:active, .visor__paso:active { transform: scale(.94); }
.visor__cerrar svg, .visor__paso svg { width: 20px; height: 20px; fill: currentColor; }
/* Hay un solo icono de flecha, apuntando hacia abajo. Girarlo evita cargar dos. */
.visor__paso--antes svg { transform: rotate(90deg); }
.visor__paso--luego svg { transform: rotate(-90deg); }
.visor__cerrar { position: absolute; top: -3.2rem; right: 0; }

@media (hover: hover) and (pointer: fine) {
  .visor__cerrar:hover, .visor__paso:hover { background: rgba(255, 255, 255, .2); }
}

/* La foto entra creciendo un poco desde donde estaba, nunca desde la nada. */
@media (prefers-reduced-motion: no-preference) {
  .visor[open] { animation: visor-entra 220ms var(--ease-out); }
  @keyframes visor-entra {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* En pantallas angostas no cabe una columna de botones a cada lado: las flechas
   bajan debajo de la foto y el cierre se queda arriba. */
@media (max-width: 700px) {
  .visor[open] { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .visor__figura { grid-column: 1 / -1; order: -1; }
  .visor__cerrar { top: -3rem; }
  .visor__paso { width: 100%; height: 46px; }
}

/* ---------- 10f. ATAJO FLOTANTE DE WHATSAPP ---------- */
.wa-flota {
  position: fixed;
  right: clamp(.9rem, 3vw, 1.6rem);
  bottom: clamp(.9rem, 3vw, 1.6rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.05rem .7rem .9rem;
  border-radius: var(--r-pill);
  background: #1FA855;               /* verde propio de WhatsApp, no el acento */
  color: #FFFFFF;
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(16, 31, 25, .28);
  /* Escondido hasta salir de la portada, y apartado sobre el formulario. */
  opacity: 0;
  transform: translateY(14px) scale(.96);
  pointer-events: none;
  transition: opacity var(--t-ui) var(--ease-out),
              transform var(--t-ui) var(--ease-out);
}
.wa-flota.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-flota:active { transform: scale(.96); }
.wa-flota svg { width: 21px; height: 21px; fill: currentColor; flex: 0 0 auto; }

@media (hover: hover) and (pointer: fine) {
  .wa-flota:hover { background: #1B9149; }
}
/* En móvil se queda solo el icono: una etiqueta ahí tapa contenido real. */
@media (max-width: 520px) {
  .wa-flota { padding: .8rem; }
  .wa-flota__texto { display: none; }
  .wa-flota svg { width: 24px; height: 24px; }
}

/* ---------- 10g. AVES ENDÉMICAS Y GRABACIÓN ---------- */
.aves__grid {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.ave-c {
  position: relative;
  overflow: hidden;
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
/* El fondo de cada tarjeta no es una foto: son los troncos delgados del
   varillal, dibujados con tres capas de rayas de distinto ancho. Así el
   bosque de arena blanca está presente sin inventar fotografías que no
   tenemos derecho a usar. */
.ave-c__varillal {
  position: absolute;
  inset: -8% -12% -2%;
  pointer-events: none;
  /* El color del papel se pinta ENCIMA de los troncos para apagarlos hacia
     arriba. Con una mascara el navegador saca la capa de su recorte y las
     rayas se escapan por los lados de la tarjeta; asi se ve igual y no pasa. */
  background:
    linear-gradient(to top, transparent 4%, var(--paper-3) 68%),
    repeating-linear-gradient(91deg, transparent 0 17px, var(--varillal) 17px 19px, transparent 19px 46px),
    repeating-linear-gradient(89.4deg, transparent 0 11px, var(--varillal-2) 11px 12px, transparent 12px 31px),
    repeating-linear-gradient(90.6deg, transparent 0 6px, var(--varillal-2) 6px 7px, transparent 7px 23px);
  transition: transform 760ms var(--ease-out);
}
.ave-c__cuerpo {
  position: relative;
  padding: 1.5rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.ave-c__marca {
  align-self: start;
  margin: 0 0 .55rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .3rem .66rem;
}
.ave-c--rara .ave-c__marca {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.ave-c__n {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}
.ave-c__en { margin: 0; font-size: .88rem; color: var(--ink-2); }
.ave-c__sci {
  margin: .1rem 0 .6rem;
  font-size: .84rem;
  font-style: italic;
  color: var(--ink-3);
}
.ave-c__d { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ink-2); }

@media (hover: hover) and (pointer: fine) {
  .ave-c:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  /* Los troncos se corren un poco: el bosque tiene profundidad, no es un papel pintado. */
  .ave-c:hover .ave-c__varillal { transform: translateX(-9px) scaleY(1.05); }
}

@media (max-width: 1080px) { .aves__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .aves__grid { grid-template-columns: 1fr; } }

/* --- Grabación de la reserva --- */
/* Llega con el atributo hidden puesto. main.js lo quita solo si el archivo
   existe y el navegador puede abrirlo, así que nunca queda un botón mudo. */
.canto {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.4rem);
  margin-top: 2.5rem;
  padding: clamp(.9rem, 2vw, 1.1rem) clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
}
.canto__btn {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background var(--t-ui) ease;
}
.canto__btn svg { width: 21px; height: 21px; fill: currentColor; }
.canto__btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .canto__btn:hover { background: var(--accent-ink); }
}
.canto__texto { min-width: 0; }
.canto__t {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  font-size: .98rem;
}
.canto__d {
  margin: .15rem 0 0;
  font-size: .82rem;
  color: var(--ink-3);
  display: flex;
  gap: .5rem;
}
.canto__tiempo { font-variant-numeric: tabular-nums; }
.canto__tiempo:not(:empty)::before { content: "·"; margin-right: .5rem; }

/* Las barras se mueven con el sonido real: main.js lee el espectro del audio
   y escribe una escala en cada una. Solo cambia transform, nada de tamaños. */
.canto__onda {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
}
.canto__onda span {
  flex: 1 1 0;
  min-width: 2px;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  opacity: .3;
  transform: scaleY(.1);
  transition: transform 110ms linear, opacity var(--t-ui) ease;
}
.canto.suena .canto__onda span { opacity: .85; }

@media (max-width: 700px) {
  .canto { flex-wrap: wrap; }
  .canto__texto { flex: 1 1 auto; }
  .canto__onda { flex-basis: 100%; height: 28px; order: 3; }
}

/* ---------- 10h. DETALLES DE MOVIMIENTO ---------- */

/* Avance de lectura: una línea de 2 px al pie de la barra superior. La mueve
   el propio scroll del documento, sin escucharlo desde JavaScript, así que no
   cuesta nada en el hilo principal. Donde el navegador no lo entiende, la
   línea se queda en cero y no se ve: nadie echa de menos lo que no existía. */
.nav__avance {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-ui) ease;
}
.nav.is-stuck .nav__avance { opacity: 1; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav__avance {
      animation: avanza linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes avanza { to { transform: scaleX(1); } }

/* Ir a las páginas legales y volver deja de ser un parpadeo en blanco.
   Donde no está implementado, la navegación es la de siempre. */
@view-transition { navigation: auto; }

/* ---------- 8b. TRES PREGUNTAS Y UNA RECOMENDACIÓN ---------- */
/* Sin JavaScript no hay nada que responder, así que la sección no se muestra
   en lugar de dejar tres preguntas muertas apiladas. */
.guia { display: none; }
.js .guia { display: block; }

.guia__caja {
  position: relative;
  overflow: hidden;
  max-width: 780px;
  margin-top: var(--gap);
  padding: clamp(1.6rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
  box-shadow: var(--shadow-sm);
}

.guia__barra {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--line-soft);
}
.guia__avance {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 460ms var(--ease-out);
}

.guia__paso { display: none; }
.guia__paso.is-activo {
  display: block;
  animation: guia-entra 340ms var(--ease-out) both;
}
/* El paso viejo se va antes de que entre el nuevo: el cambio se hace a mitad
   del fundido y no se ve el salto. */
.guia.cambiando .guia__paso.is-activo {
  animation: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 170ms var(--ease-out), transform 170ms var(--ease-out);
}
@keyframes guia-entra { from { opacity: 0; transform: translateY(12px); } }

.guia__cuenta {
  margin: 0 0 .6rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.guia__q {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.3rem, 2.7vw, 1.85rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
}

.guia__ops {
  display: grid;
  gap: .6rem;
  margin-top: 1.6rem;
}
.guia__op {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .95rem 1.15rem;
  text-align: left;
  font: inherit;
  font-size: .98rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  cursor: pointer;
  transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease,
              transform var(--t-press) var(--ease-out);
}
.guia__op svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: var(--accent);
  opacity: 0;
  transform: translateX(-7px);
  transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out);
}
.guia__op:active { transform: scale(.985); }
.guia__op:focus-visible svg { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .guia__op:hover { border-color: var(--accent); background-color: var(--accent-veil); }
  .guia__op:hover svg { opacity: 1; transform: none; }
}

.guia__atras,
.guia__otra {
  margin-top: 1.4rem;
  padding: .3rem 0;
  font: inherit;
  font-size: .86rem;
  color: var(--ink-3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: color var(--t-ui) ease, border-color var(--t-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .guia__atras:hover, .guia__otra:hover { color: var(--ink); border-color: var(--ink-3); }
}

.guia__porque {
  margin: .9rem 0 0;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 52ch;
}
.guia__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.7rem;
}
.guia__pie {
  margin: 1.8rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem;
  color: var(--ink-3);
}

/* La tarjeta recomendada queda señalada, para reconocerla al bajar. */
.xp.is-elegida { position: relative; outline: 2px solid var(--accent); outline-offset: 3px; }
.xp.is-elegida::after {
  content: attr(data-etiqueta);
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 2;
  padding: .34rem .72rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-on);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---------- 11. CÓMO TRABAJAMOS ---------- */
.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.principle {
  padding: 1.9rem clamp(1rem, 2vw, 1.75rem) 0 0;
  border-right: 1px solid var(--line-soft);
}
.principle:last-child { border-right: 0; }
.principle:not(:first-child) { padding-left: clamp(1rem, 2vw, 1.75rem); }
.principle > svg { font-size: 1.5rem; color: var(--accent-ink); margin-bottom: .9rem; }
.principle h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 .4rem;
}
.principle p { margin: 0; color: var(--ink-2); font-size: .93rem; }

@media (max-width: 940px) { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .principles { grid-template-columns: 1fr; }
  .principle { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 1.5rem 0; }
  .principle:not(:first-child) { padding-left: 0; }
  .principle:last-child { border-bottom: 0; }
}

/* ---------- 12. BANDA DE CONSERVACIÓN ---------- */
.banner {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 62vh, 640px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.banner__pic { position: absolute; inset: 0; z-index: -2; }
.banner__img { width: 100%; height: 100%; object-fit: cover; }
.banner__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(8, 18, 13, .84), rgba(8, 18, 13, .48) 55%, rgba(8, 18, 13, .26));
}
.banner__content { padding-block: clamp(3rem, 8vw, 5rem); }
.banner__content p {
  color: rgba(255, 255, 255, .86);
  max-width: 58ch;
  margin: 1.25rem 0 0;
}

/* ---------- 13. PREGUNTAS ---------- */
.faq-shell { max-width: 880px; }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg {
  font-size: 1.1rem;
  color: var(--ink-3);
  transition: transform 260ms var(--ease-out);
}
.faq__item[open] summary svg { transform: rotate(180deg); }

/* Apertura mediante grid, animable y sin saltos */
.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows 300ms var(--ease-out);
}
.faq__panel p {
  margin: 0 0 1.3rem;
  color: var(--ink-2);
  max-width: 68ch;
  font-size: .96rem;
}
.faq__item:not([open]) .faq__panel,
.faq__item.is-closing .faq__panel { grid-template-rows: 0fr; }
.faq__panel > p { min-height: 0; }

/* ---------- 14. CONTACTO ---------- */
.contacto { background: var(--paper-2); }
.contacto__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.contacto__list { list-style: none; margin: 2.25rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.contacto__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem .25rem;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  transition: transform var(--t-ui) var(--ease-out);
}
.contacto__row span { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.contacto__row strong { font-weight: 500; font-size: .98rem; }
/* El correo es una cadena sin espacios de más de 240 px. En una pantalla de
   320 px tiene que poder partirse o arrastra toda la columna fuera de cuadro. */
.contacto__row em { font-style: normal; font-size: .88rem; color: var(--ink-3); overflow-wrap: anywhere; }
.contacto__arrow { margin-left: auto; color: var(--ink-3); font-size: 1.05rem; }
.brandicon { font-size: 1.35rem; color: var(--ink-2); }
.brandicon--wa { color: #25D366; }
.brandicon--ig { color: #E1306C; }
.brandicon--fb { color: #0866FF; }
@media (hover: hover) and (pointer: fine) {
  .contacto__row:hover { transform: translateX(.6rem); }
}

.form {
  background: var(--paper-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 1.1rem;
}
/* Los campos viven dentro de rejillas, y un elemento de rejilla no se encoge
   por debajo de su contenido a menos que se le diga. Sin estos min-width, el
   selector de fecha y el desplegable de experiencias empujan el formulario
   fuera de la pantalla en móviles de 320 px. */
.field { display: grid; gap: .45rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; min-width: 0; }

.field label { font-size: .875rem; font-weight: 500; color: var(--ink); }
.field input,
.field textarea,
.select-wrap select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  padding: .72rem .85rem;
  transition: border-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }

.field input:focus,
.field textarea:focus,
.select-wrap select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.select-wrap { position: relative; display: grid; min-width: 0; }
.select-wrap select { appearance: none; padding-right: 2.4rem; }
.select-wrap > svg {
  position: absolute; right: .9rem; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink-3);
  font-size: 1rem;
}

.field__help { margin: 0; font-size: .8rem; color: var(--ink-3); }
.field__error { margin: 0; font-size: .8rem; color: var(--accent-ink); font-weight: 500; }
.field.has-error input { border-color: var(--accent); }

.form__note { margin: -.2rem 0 0; font-size: .8rem; color: var(--ink-3); }
.form__status { margin: 0; font-size: .875rem; color: var(--ink-2); min-height: 1.2em; }
.form__status.is-ok { color: var(--accent-ink); }

.btn__label { transition: filter 200ms ease, opacity 200ms ease; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy .btn__label { filter: blur(2px); opacity: .7; }

@media (max-width: 900px) {
  .contacto__grid { grid-template-columns: 1fr; }
}
.contacto__grid > * { min-width: 0; }
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- 15. PIE ---------- */
.footer { border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 4.5rem); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer__brand p { color: var(--ink-2); font-size: .92rem; max-width: 34ch; margin: 1rem 0 0; }
.footer__col h2 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3); font-weight: 500; margin: 0 0 .9rem;
}
.footer__col a, .footer__col p {
  display: block;
  margin: 0 0 .45rem;
  font-size: .92rem;
  color: var(--ink-2);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .footer__col a:hover { color: var(--ink); } }

.footer__social { display: flex; gap: .5rem; }
.footer__social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 1.05rem;
  color: var(--ink-2);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease;
}
.footer__social a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .footer__social a:hover { background: var(--line-soft); color: var(--ink); }
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.footer__bottom p { margin: 0; font-size: .82rem; color: var(--ink-3); }

@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__h2--gap { margin-top: 1.75rem; }

/* ---------- 15b. PÁGINAS LEGALES ---------- */
/* Términos y condiciones y protección de datos. Solo texto, ancho de lectura. */
.doc { padding-block: clamp(7rem, 12vw, 9rem) clamp(4rem, 8vw, 6rem); }
.doc__shell { max-width: 760px; }

.doc__back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  color: var(--accent-ink);
  text-decoration: none;
  margin-bottom: 1.75rem;
}
.doc__back svg { transform: rotate(-135deg); font-size: .95em; }

.doc h1 {
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
.doc__meta {
  margin: .9rem 0 0;
  font-size: .88rem;
  color: var(--ink-3);
}
.doc h2 {
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 2.75rem 0 .75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.doc h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.75rem 0 .5rem;
}
.doc p, .doc li { color: var(--ink-2); }
.doc p { margin: 0 0 1rem; }
.doc ul { margin: 0 0 1.25rem; padding-left: 1.15rem; }
.doc li { margin-bottom: .5rem; }
.doc strong { color: var(--ink); font-weight: 600; }

.doc__note {
  margin: 1.75rem 0 0;
  padding: 1rem 1.15rem;
  border-radius: var(--r-card);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  font-size: .9rem;
  color: var(--ink-2);
}

/* ---------- 15c. PÁGINAS DE PAQUETE ---------- */
/* Cada paquete tiene su propia página: portada con la foto, itinerario en línea
   de tiempo, lo que incluye y lo que no, recomendaciones, fotos y forma de
   pago. Todo se arma con los mismos tokens del sitio, así que el tema claro y
   el oscuro salen solos. */

.pk-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(400px, 60vh, 600px);
  overflow: hidden;
}
.pk-hero__media { position: absolute; inset: 0; }
.pk-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El velo va en verde Naturamazon, no en negro: el texto blanco se despega de
   la foto sin apagar el color del bosque. */
.pk-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 39, 16, .62) 0%, rgba(4, 39, 16, .22) 40%, rgba(4, 39, 16, .90) 100%);
}
.pk-hero__inner {
  position: relative;
  width: 100%;
  padding: 7.5rem 0 2.6rem;
}

.pk-volver {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: .88rem;
  margin-bottom: 1.1rem;
  transition: transform var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
}
.pk-volver svg { width: 1.05em; height: 1.05em; fill: currentColor; transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .pk-volver:hover { color: #fff; transform: translateX(-3px); }
}

.pk-hero__tipo {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pk-hero__h1 {
  margin: .55rem 0 0;
  color: #fff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  max-width: 17ch;
  text-wrap: balance;
}
.pk-hero__lead {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: 1.02rem;
  max-width: 54ch;
}

.pk-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.pk-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .45rem .9rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font-size: .85rem;
}
.pk-chip b { font-weight: 600; }
.pk-chip span { color: rgba(255, 255, 255, .72); }

/* ----- Presentación y ficha ----- */
.pk-intro__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
.pk-intro__texto p { margin: 0 0 1rem; color: var(--ink-2); font-size: 1.03rem; max-width: 62ch; }
.pk-intro__texto p:last-child { margin-bottom: 0; }

.pk-ficha {
  position: sticky;
  top: 92px;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
  box-shadow: var(--shadow-sm);
}
.pk-ficha__precio {
  display: block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pk-ficha__nota { margin: .4rem 0 1.2rem; color: var(--ink-3); font-size: .86rem; }
.pk-ficha__datos { margin: 0 0 1.3rem; display: grid; gap: .7rem; }
.pk-ficha__fila { display: grid; gap: .15rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line-soft); }
.pk-ficha__fila:last-child { border-bottom: 0; padding-bottom: 0; }
.pk-ficha__fila dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pk-ficha__fila dd { margin: 0; color: var(--ink); font-size: .95rem; }
.pk-ficha .btn { width: 100%; justify-content: center; }
.pk-ficha .btn + .btn { margin-top: .6rem; }

/* ----- Itinerario ----- */
.pk-dia + .pk-dia { margin-top: 2.6rem; }
.pk-dia__t {
  margin: 0 0 1.2rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.pk-ruta { margin: 0; padding: 0; list-style: none; }
.pk-paso { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 1.2rem; }
.pk-paso__hora {
  align-self: start;
  padding: .45rem .5rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: .8rem;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pk-paso__cuerpo { border-left: 2px solid var(--line); padding: .15rem 0 1.5rem 1.4rem; }
.pk-paso:last-child .pk-paso__cuerpo { border-left-color: transparent; padding-bottom: 0; }
.pk-paso__t { margin: 0 0 .45rem; font-size: 1.06rem; font-weight: 600; color: var(--ink); }
.pk-paso ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.pk-paso li { position: relative; padding-left: 1.15rem; color: var(--ink-2); font-size: .95rem; }
.pk-paso li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ----- Incluye, no incluye y recomendaciones ----- */
.pk-listas { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-lista {
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
}
.pk-lista h3 {
  margin: 0 0 1rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pk-lista ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.pk-lista li { position: relative; padding-left: 1.7rem; color: var(--ink-2); font-size: .94rem; }
.pk-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--accent-veil);
}
/* La marca de visto y la raya se dibujan con bordes: ningún icono que bajar. */
.pk-lista--si li::after {
  content: "";
  position: absolute;
  left: .36rem;
  top: .42em;
  width: .3rem;
  height: .55rem;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pk-lista--no li::before { background: var(--line-soft); }
.pk-lista--no li::after {
  content: "";
  position: absolute;
  left: .28rem;
  top: .68em;
  width: .5rem;
  border-top: 2px solid var(--ink-3);
}

/* ----- Fotos del paquete ----- */
.pk-fotos { display: grid; gap: .9rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pk-foto {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-card);
  background: var(--paper-2);
  cursor: zoom-in;
  transition: transform var(--t-press) var(--ease-out);
}
.pk-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-ui) var(--ease-out); }
.pk-foto:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .pk-foto:hover img { transform: scale(1.05); }
}

/* ----- Cómo se paga ----- */
.pk-pago {
  padding: clamp(1.5rem, 3.4vw, 2.4rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--paper-2);
}
.pk-pago > p { margin: .7rem 0 0; color: var(--ink-2); max-width: 64ch; }
.pk-pago__grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.5rem; }
.pk-pago__item { padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--paper-3); }
.pk-pago__item h3 { margin: 0 0 .35rem; font-size: 1rem; }
.pk-pago__item p { margin: 0; color: var(--ink-2); font-size: .9rem; }

/* ----- Cierre y otros paquetes ----- */
.pk-cierre {
  padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: var(--r-card);
  background: var(--paper-2);
  text-align: center;
}
.pk-cierre h2 { margin: 0 0 .7rem; }
.pk-cierre p { margin: 0 auto 1.5rem; color: var(--ink-2); max-width: 48ch; }
.pk-cierre__btns { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

.pk-otros { display: grid; gap: .9rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pk-otro {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.pk-otro img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pk-otro__t { padding: .85rem .95rem; font-weight: 600; font-size: .95rem; }
.pk-otro:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .pk-otro:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}

/* Precio en la tarjeta de la portada */
.xp__precio { margin-left: auto; color: var(--accent-ink); font-weight: 600; font-size: .86rem; white-space: nowrap; }
/* Si la etiqueta es larga ("3 días · 2 noches") el precio baja de línea
   entero, que se lee mejor que partir la etiqueta en dos. */
.xp__alto { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }

@media (max-width: 980px) {
  .pk-intro__grid { grid-template-columns: 1fr; }
  .pk-ficha { position: static; }
  .pk-listas { grid-template-columns: 1fr; }
  .pk-pago__grid { grid-template-columns: 1fr; }
  .pk-fotos,
  .pk-otros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .pk-hero__inner { padding: 6.5rem 0 2rem; }
  .pk-paso { grid-template-columns: 1fr; gap: .5rem; }
  .pk-paso__hora { justify-self: start; padding-left: .9rem; padding-right: .9rem; }
  .pk-paso__cuerpo { border-left: 0; padding: 0 0 1.6rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-volver:hover,
  .pk-foto:active,
  .pk-foto:hover img,
  .pk-otro:hover,
  .pk-otro:active { transform: none; }
}

/* ---------- 16. REVELADO AL ENTRAR EN PANTALLA ---------- */
/* Se limita a .js para que sin JavaScript el contenido salga visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Las fotos grandes no se desvanecen: se descubren. Un fundido sirve para un
   texto; una fotografía se ve mejor cuando se levanta una cortina.

   El recorte va sobre la imagen y NO sobre su caja. Un elemento recortado a
   cero no cuenta como visible para IntersectionObserver: nunca recibiría la
   clase is-in y se quedaría invisible para siempre. */
.js [data-reveal="foto"] { opacity: 1; transform: none; }
.js [data-reveal="foto"] img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 980ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.js [data-reveal="foto"].is-in img { clip-path: inset(0 0 0 0); }

/* ---------- 17. EL CURSOR ES UN AVE ---------- */
/* El puntero es el mismo pájaro del logotipo, planeando, con la punta del pico
   en el punto que se señala. Sobre lo que se puede tocar levanta las alas: el
   cambio de postura hace de "esto responde" sin necesidad de una mano genérica.

   Se dibuja en SVG dentro del propio CSS, así que no pesa ni pide un archivo
   más. El contorno claro es lo que lo mantiene visible sobre las fotos oscuras
   del bosque y sobre el papel del modo claro, sin necesidad de dos versiones.

   Los colores del ave van escritos a mano dentro del SVG: al ser un data: URI
   no puede leer las variables de la paleta, así que si cambia la marca hay que
   tocarlos aquí. El cuerpo lleva el acento (%23337006), el ala de atrás un verde
   más oscuro y el pico el verde oscuro de marca, que es la punta que señala y
   tiene que leerse también contra el contorno blanco.

   Solo en ratón: en pantallas táctiles no hay cursor que cambiar, y en Safari
   los cursores SVG no se aplican, así que ahí se queda el del sistema.

   Para apagarlo: <html data-cursor="sistema"> en los tres HTML. */
@media (hover: hover) and (pointer: fine) {
  :root {
    --ave-planea: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='-12 4 182 140'><g transform='rotate(25 1 55) translate(170 0) scale(-1 1)'><g fill='none' stroke='%23FFFFFF' stroke-width='9' stroke-linejoin='round' stroke-linecap='round' opacity='.9'><path d='M74 60C68 44 56 26 34 14c2 22 14 40 30 51z'/><path d='M150 54c-6-9-16-14-27-13-9 1-16 6-21 13-13 2-29 4-45 6L12 48l18 12-14 14 40-8c16 5 34 7 50 4 13-2 24-9 32-19 2-3 2-7-1-9z'/><path d='M146 50l23 5-22 6z'/><path d='M78 57C74 38 64 18 42 4c0 24 10 44 26 58z'/></g><path fill='%231E4504' d='M74 60C68 44 56 26 34 14c2 22 14 40 30 51z'/><path fill='%23337006' d='M150 54c-6-9-16-14-27-13-9 1-16 6-21 13-13 2-29 4-45 6L12 48l18 12-14 14 40-8c16 5 34 7 50 4 13-2 24-9 32-19 2-3 2-7-1-9z'/><path fill='%23042710' d='M146 50l23 5-22 6z'/><path fill='%23337006' d='M78 57C74 38 64 18 42 4c0 24 10 44 26 58z'/><circle fill='%23FFFFFF' cx='34' cy='48' r='5.5'/></g></svg>") 3 10;
    --ave-alza: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='-12 4 182 140'><g transform='rotate(25 1 55) translate(170 0) scale(-1 1)'><g fill='none' stroke='%23FFFFFF' stroke-width='9' stroke-linejoin='round' stroke-linecap='round' opacity='.9'><path transform='rotate(45 74 58)' d='M74 60C68 44 56 26 34 14c2 22 14 40 30 51z'/><path d='M150 54c-6-9-16-14-27-13-9 1-16 6-21 13-13 2-29 4-45 6L12 48l18 12-14 14 40-8c16 5 34 7 50 4 13-2 24-9 32-19 2-3 2-7-1-9z'/><path d='M146 50l23 5-22 6z'/><path transform='rotate(45 78 55)' d='M78 57C74 38 64 18 42 4c0 24 10 44 26 58z'/></g><path transform='rotate(45 74 58)' fill='%231E4504' d='M74 60C68 44 56 26 34 14c2 22 14 40 30 51z'/><path fill='%23337006' d='M150 54c-6-9-16-14-27-13-9 1-16 6-21 13-13 2-29 4-45 6L12 48l18 12-14 14 40-8c16 5 34 7 50 4 13-2 24-9 32-19 2-3 2-7-1-9z'/><path fill='%23042710' d='M146 50l23 5-22 6z'/><path transform='rotate(45 78 55)' fill='%23337006' d='M78 57C74 38 64 18 42 4c0 24 10 44 26 58z'/><circle fill='%23FFFFFF' cx='34' cy='48' r='5.5'/></g></svg>") 3 10;
  }

  :root:not([data-cursor="sistema"]) :is(html, body) { cursor: var(--ave-planea), auto; }

  /* Lo que se puede pulsar. La lista lleva una clase para que gane a las reglas
     de cursor que ya traía cada componente. */
  :root:not([data-cursor="sistema"]) :is(a, button, summary, select, [role="button"], .btn) {
    cursor: var(--ave-alza), pointer;
  }

  /* Escribir pide un cursor de texto y ampliar una foto pide una lupa:
     ahí el ave estorbaría más de lo que aporta. */
  :root:not([data-cursor="sistema"]) :is(input, textarea) { cursor: text; }
  :root:not([data-cursor="sistema"]) :is(input[type="checkbox"], input[type="radio"]) {
    cursor: var(--ave-alza), pointer;
  }
  :root:not([data-cursor="sistema"]) .gal__foto { cursor: zoom-in; }
}

/* ---------- 18. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero__media img { transform: none; }
  .hero__badge, .hero__sub, .hero__actions { opacity: 1; transform: none; }
  .hero__title .pal__i { transform: none; }
  .wa-flota:active, .visor__cerrar:active, .visor__paso:active, .gal__foto:active { transform: none; }
  .gal__foto:hover img, .gal__filtro:active, .visor__pk:active { transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal="foto"] img { clip-path: none; }
  .btn:active, .icon-btn:active, .footer__social a:active { transform: none; }
  /* La pantalla de carga se queda quieta: el ave sigue ahí, pero sin batir.
     Y se salta la espera mínima, que main.js pone en cero en este caso. */
  .ave, .ave__ala, .carga__saltar { animation: none; opacity: 1; transform: none; }
  .carga.se-va .ave { animation: none; transform: none; }
  /* El croquis sale dibujado de una vez: el recorrido animado es el adorno,
     no la información. Y el ave no cruza la pantalla. */
  .js [data-croquis] .croquis__agua,
  .js [data-croquis] .croquis__via,
  .js [data-croquis] .croquis__ruta,
  .js [data-croquis] .croquis__sendero,
  .js [data-croquis] .croquis__sendero-h { stroke-dashoffset: 0; }
  .js [data-croquis] .croquis__varillales,
  .js [data-croquis] .croquis__km path,
  .js [data-croquis] .croquis__hilo,
  .js [data-croquis] .croquis__norte path,
  .js [data-croquis] .croquis__escala path { opacity: 1; }
  .js [data-croquis] .croquis__reserva,
  .js [data-croquis] .croquis__pin-i,
  .js [data-croquis] .croquis__movil,
  .js [data-croquis] text { opacity: 1; transform: none; }
  .ave-firma { display: none; }
  .ave-c:hover { transform: none; }
  .ave-c:hover .ave-c__varillal { transform: none; }
  .canto__btn:active { transform: none; }
  /* El aro sigue apareciendo, porque es el indicador de foco, pero sin crecer
     ni latir: aparecer y desaparecer no es movimiento. */
  .js [data-croquis].is-in .croquis__m .croquis__aro { animation: none; }
  .croquis__aro { transform: none; }
  .croquis__m.is-activa .croquis__aro,
  .croquis__m:focus-visible .croquis__aro { transform: none; }
  .croquis__m.is-activa .croquis__punto { transform: none; }
  .croquis-tab:active { transform: none; }
  .guia__paso.is-activo { animation: none; }
  .guia.cambiando .guia__paso.is-activo { opacity: 1; transform: none; }
  .guia__op:active { transform: none; }
  .guia__op svg { opacity: 1; transform: none; }
}