/* ═══════════════════════════════════════════════════════════════════════════
   CAMBUTE MANGROVE TOURS · THE DIGITAL EXPERIENCE
   Sistema de diseño — "BRACKISH"  (agua salobre: ni dulce ni salada)

   Fraunces (editorial, con eje óptico) · Instrument Sans (interfaz)

   ── POR QUÉ ESTE SISTEMA ──────────────────────────────────────────────────
   El material real de Cambute es metraje y fotografía de teléfono. Intentar
   disimularlo con adornos lo delata; tratarlo como material documental lo
   dignifica. De ahí las tres decisiones que gobiernan todo el archivo:

   1. GRADACIÓN, NO DECORACIÓN. Las imágenes llevan una corrección de color
      común (contraste alto, saturación baja, sombras frías). Un carrete
      dispar rodado por cinco personas distintas pasa a parecer una sola
      película. Es lo que más "sube de categoría" y no pesa un byte.
   2. EL CAPÍTULO MANDA. La página alterna oscuro y claro por narrativa, no
      por variedad: oscuro donde se mira (portada, manglar, lugar), claro
      donde se lee y se decide (experiencias, historia, reservar).
   3. EL COLOR DE MARCA VIVE EN FILETES. El naranja y el verde de Cambute
      están en cada capítulo, pero en rayas de un píxel y numeración diminuta.
      Superficie total por debajo del 5%. El verde es de manglar —salobre, con
      gris dentro—, nunca el verde tropical saturado de folleto.

   ── ESCALA ────────────────────────────────────────────────────────────────
   Fraunces se pide con eje óptico (opsz). A 144 adelgaza y abre; a 9 engorda
   para seguir siendo legible. Se usa SOLO por encima de ~1.5rem. Todo lo
   pequeño es Instrument Sans, que es donde ese tamaño se lee de verdad.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── superficies ── */
  --night:#0C120F;        /* agua del estero de noche */
  --deep:#121A15;         /* bloque oscuro elevado */
  --silt:#1E2721;         /* limo: separadores sobre oscuro */
  --paper:#F3EFE7;        /* arena seca */
  --paper-2:#E9E3D7;      /* arena húmeda: banda alterna */

  /* ── texto ── */
  --fg:#141B16;
  --fg-mute:#59665C;
  --fg-d:#EFEBE2;
  --fg-d-mute:#98A296;

  /* ── acento de marca ──
     Dos versiones de cada uno: sobre papel hace falta bajar la luminosidad
     para llegar a contraste legible; sobre foto oscura, subirla. Usar el par
     correcto es lo que evita que el color se vea sucio. */
  --ember:#A85E28;        /* naranja Cambute, terroso, sobre papel */
  --ember-d:#D98A4A;      /* sobre oscuro */
  --moss:#4A5C3E;         /* verde manglar sobre papel */
  --moss-d:#9BB08A;       /* sobre oscuro */

  /* ── filetes ── */
  --line:rgba(20,27,22,.15);
  --line-2:rgba(20,27,22,.3);
  --line-d:rgba(239,235,226,.18);

  /* ── tipografía ── */
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --track:.26em;          /* etiquetas en versalitas */

  /* ── ritmo ── */
  --pad:clamp(1.25rem,5vw,5rem);
  --sec:clamp(5.5rem,10vw,11rem);
  --maxw:1560px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-o:cubic-bezier(.16,1,.3,1);

  /* La gradación común. Un solo sitio donde tocarla y cambia el carrete
     entero. Saturación baja + contraste alto = documental, no folleto. */
  --grade:saturate(.82) contrast(1.07) brightness(.97);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  font-weight:400;line-height:1.75;letter-spacing:.004em;
  color:var(--fg);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
/* `display:contents` disuelve la caja del <picture> para que la <img> herede
   la rejilla del padre. Efecto colateral: el <source>, que no pinta nada,
   pasa a contar como celda y se come un hueco. De ahí la segunda regla. */
picture{display:contents}
picture > source{display:none}
button{font:inherit;color:inherit}
a{color:inherit}
figure{margin:0}

/* Toda imagen y vídeo del sitio comparten la misma corrección. */
.media img,.media video{filter:var(--grade)}

/* Grano. Muy flojo: sobre papel claro el ruido se ve enseguida y ensucia. */
body::after{
  content:"";position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){body::after{display:none}}

/* ═══════════ tipografía ═══════════ */
h1,h2,h3{margin:0;font-weight:400}
.dsp{
  font-family:var(--display);font-optical-sizing:auto;
  font-variation-settings:"SOFT" 20,"WONK" 0;
  font-weight:300;letter-spacing:-.021em;line-height:1.04;
}
.dsp--xl{font-size:clamp(2.05rem,1.05rem + 4.9vw,6.2rem)}
.dsp--l {font-size:clamp(2rem,1.3rem + 2.9vw,3.9rem);line-height:1.08}
.dsp--m {font-size:clamp(1.55rem,1.15rem + 1.6vw,2.5rem);line-height:1.12}
.dsp em{font-style:italic;font-weight:300}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.02rem,.97rem + .3vw,1.2rem);line-height:1.78;color:var(--fg-mute);max-width:54ch;margin-top:2.2rem}

/* Etiqueta de capítulo: número + nombre, separados por un filete naranja.
   Es el hilo que cose los siete capítulos y casi todo el color de la página. */
/* `.eyebrow` es el nombre que usa la página de políticas para la misma pieza.
   Se mantiene como alias para no tener que tocar aquel marcado. */
.chapter,.eyebrow{
  display:flex;align-items:center;gap:1rem;
  font-size:.6rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ember);margin:0 0 2rem;
}
.chapter b{font-weight:500;font-variant-numeric:tabular-nums}
.chapter::after{content:"";flex:1;max-width:120px;height:1px;background:currentColor;opacity:.45}
.chapter--mid{justify-content:center}
.chapter--mid::after{display:none}
.chapter--mid::before{content:"";width:60px;height:1px;background:currentColor;opacity:.45}

.on-dark,.on-dark .lede{color:var(--fg-d)}
.on-dark .lede{color:var(--fg-d-mute)}
.on-dark .chapter{color:var(--ember-d)}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--night);color:var(--paper);padding:.9rem 1.4rem}
.skip:focus{left:0}
:focus-visible{outline:1px solid var(--ember);outline-offset:4px}

/* ═══════════ botones ═══════════ */
/* Rectángulo vivo, muy ancho, letra diminuta. El vacío alrededor del texto es
   lo que se lee como caro; el relleno ajustado, lo que lee como plantilla. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  background:var(--fg);color:var(--paper);border:1px solid var(--fg);
  padding:1.25em 2.9em;
  font-size:.62rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;
  line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.btn:hover{background:transparent;color:var(--fg)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--fg);color:var(--paper);border-color:var(--fg)}
.on-dark .btn,.hero .btn{background:var(--paper);color:var(--night);border-color:var(--paper)}
.on-dark .btn:hover,.hero .btn:hover{background:transparent;color:var(--paper)}
.on-dark .btn--ghost,.hero .btn--ghost{background:transparent;color:var(--fg-d);border-color:rgba(239,235,226,.42)}
.on-dark .btn--ghost:hover,.hero .btn--ghost:hover{background:var(--fg-d);color:var(--night);border-color:var(--fg-d)}
.btn--sm{padding:1em 1.7em;font-size:.55rem;letter-spacing:.2em}
.btn--full{width:100%}

/* Enlace-filete: sustituye al botón donde un botón sería demasiado ruido. */
.link{
  display:inline-flex;align-items:center;gap:.6em;position:relative;padding-bottom:.45rem;
  font-size:.6rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;
  text-decoration:none;color:inherit;background:none;border:0;cursor:pointer;
}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  opacity:.3;transform-origin:left;transition:opacity .4s var(--ease);
}
.link:hover::after{opacity:1}

/* ═══════════ navegación ═══════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  border-bottom:1px solid transparent;
  transition:background .6s var(--ease),border-color .6s var(--ease),backdrop-filter .6s;
}
.nav.is-stuck{
  background:rgba(243,239,231,.94);
  backdrop-filter:saturate(1.2) blur(20px);-webkit-backdrop-filter:saturate(1.2) blur(20px);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--maxw);margin:0 auto;padding:1.55rem var(--pad);
  display:flex;align-items:center;gap:1.5rem;
  transition:padding .6s var(--ease);
  color:var(--fg-d);
}
.nav.is-stuck .nav__in{padding-top:1rem;padding-bottom:1rem;color:var(--fg)}
/* OJO con el `:not(.btn)`. El botón de reservar es un <a>, así que sin esa
   exclusión heredaba el color de la barra: al pegarse arriba, la barra pasa a
   tinta oscura y el botón —que ya tiene relleno oscuro— se quedaba con texto
   oscuro sobre fondo oscuro. Resultado: un bloque negro sin letras. */
.nav__in a:not(.btn){color:inherit}

.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;flex:none}
.brand__mark{width:40px;height:40px;object-fit:contain;transition:width .6s var(--ease),height .6s var(--ease)}
.nav.is-stuck .brand__mark{width:33px;height:33px}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-size:.82rem;font-weight:500;letter-spacing:.28em}
.brand__sub{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;opacity:.62;margin-top:.4em}

.nav__links{display:flex;gap:2.3rem;margin-left:auto}
.nav__links a{
  position:relative;text-decoration:none;
  font-size:.585rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  opacity:.78;transition:opacity .35s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-7px;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-o);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__act{display:flex;align-items:center;gap:.9rem;margin-left:2rem}
/* Sobre la portada el botón sólido es tinta sobre foto oscura: desaparece. Ahí
   va en contorno crema, y sólo se rellena cuando la barra se pega arriba y
   tiene detrás el fondo de arena. */
/* Los dos estados del botón, declarados a la cara para que ninguna regla de
   color de la barra vuelva a pisarlos. */
.nav.is-stuck .nav__act .btn{background:var(--fg);color:var(--paper);border-color:var(--fg)}
.nav.is-stuck .nav__act .btn:hover{background:transparent;color:var(--fg)}
.nav:not(.is-stuck) .nav__act .btn{background:transparent;color:var(--fg-d);border-color:rgba(239,235,226,.45)}
.nav:not(.is-stuck) .nav__act .btn:hover{background:var(--fg-d);color:var(--night);border-color:var(--fg-d)}
.lang{
  display:flex;align-items:center;gap:.42rem;background:transparent;
  border:1px solid currentColor;border-radius:0;padding:.55rem .75rem;
  cursor:pointer;line-height:1;opacity:.5;transition:opacity .35s;
}
.lang:hover{opacity:1}
.lang__on{font-size:.55rem;font-weight:500;letter-spacing:.14em}
.lang__off{font-size:.55rem;font-weight:400;letter-spacing:.14em;opacity:.5}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{display:block;width:24px;height:1px;background:currentColor;transition:transform .45s var(--ease),opacity .3s}
.burger.is-x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-x span:nth-child(2){opacity:0}
.burger.is-x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════ PORTADA ═══════════ */
.hero{
  position:relative;min-height:100svh;min-height:100vh;
  display:flex;flex-direction:column;overflow:hidden;background:var(--night);
  padding-top:clamp(6rem,9vw,8rem);
}
.hero__media{position:absolute;inset:0;z-index:0;background:var(--night)}
.hero__video,.hero__fallback img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:var(--grade);
}
/* Escala lentísima. El metraje es un plano corto y algo estático; medio minuto
   de deriva casi imperceptible lo convierte en una apertura. */
.hero__video,.hero__fallback img{animation:drift 34s var(--ease) infinite alternate}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.13)}}
@media (prefers-reduced-motion:reduce){.hero__video,.hero__fallback img{animation:none}}
.hero__fallback{display:none}
.hero__media.is-still .hero__fallback{display:block}
.hero__media.is-still .hero__video{display:none}

/* Velo en dos capas: una mancha central que despega el titular del follaje y
   un degradado vertical que ancla la barra de datos del pie. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 86% 64% at 50% 46%,rgba(12,18,15,.6) 0%,rgba(12,18,15,.1) 68%,rgba(12,18,15,0) 100%),
    /* El tramo de abajo llega a NEGRO SÓLIDO, el mismo exacto que el fondo de la
       sección siguiente. Es lo que borra la costura: mientras el velo se
       quedaba en 92%, por debajo seguía asomando un 8% de fotografía, y al
       encontrarse con el color plano de la sección aparecía una raya. */
    linear-gradient(to top,
      var(--night) 0%,
      rgba(12,18,15,.94) 5%,
      rgba(12,18,15,.35) 30%,
      rgba(12,18,15,.1) 55%,
      rgba(12,18,15,.4) 85%,
      rgba(12,18,15,.7) 100%);
}
/* Entrada desde negro: el fundido de apertura de un documental. */
.hero__fade{
  position:absolute;inset:0;z-index:3;background:var(--night);pointer-events:none;
  animation:fadeOut 1.9s var(--ease-o) .15s both;
}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero__fade{display:none}}

.hero__grid{
  position:relative;z-index:2;flex:1;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;color:var(--fg-d);
}
.hero__lock{
  display:flex;align-items:center;gap:1.1rem;justify-content:center;
  font-size:.6rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  margin-bottom:clamp(1.8rem,3.5vw,2.8rem);opacity:.9;
}
.hero__lock::before,.hero__lock::after{content:"";width:clamp(20px,4vw,54px);height:1px;background:currentColor;opacity:.5}
.hero h1{max-width:16ch;text-shadow:0 2px 70px rgba(0,0,0,.55)}
.hero__sub{
  font-size:clamp(.82rem,.78rem + .18vw,.95rem);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,235,226,.72);margin:clamp(1.8rem,3vw,2.6rem) auto 0;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:clamp(2.4rem,4vw,3.4rem)}

.hero__bar{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);color:var(--fg-d)}
.hero__bar-in{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.8rem;flex-wrap:wrap;
  border-top:1px solid var(--line-d);
  /* El relleno inferior deja libre la esquina donde vive el chat flotante: sin
     él, el precio y el botón verde se pisan en escritorio. */
  padding:1.7rem 0 clamp(4.6rem,6vw,5.5rem);
}
.hero__facts{display:flex;gap:clamp(1.8rem,5vw,4.5rem);list-style:none;margin:0;padding:0}
.hero__facts li{display:flex;flex-direction:column;gap:.5rem}
.hero__facts strong{font-family:var(--display);font-optical-sizing:auto;font-weight:300;font-size:1.7rem;line-height:1}
.hero__facts span{font-size:.53rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-d-mute)}
.hero__price{text-align:right;line-height:1.1}
.hero__price b{font-family:var(--display);font-optical-sizing:auto;font-weight:300;font-size:2.3rem;display:block}
.hero__price em{font-style:normal;display:block;font-size:.53rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-d-mute);margin-top:.6rem}
.hero__price i{font-style:normal;display:block;font-size:.55rem;color:var(--moss-d);margin-top:.45rem;letter-spacing:.2em;text-transform:uppercase}

.hero__cue{position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:3;width:1px;height:46px;background:rgba(239,235,226,.2);overflow:hidden}
.hero__cue::after{content:"";position:absolute;inset:0;background:var(--ember-d);animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.hero__cue::after{animation:none}}

/* ═══════════ secciones ═══════════ */
.sec{padding:var(--sec) var(--pad)}
.sec__in{max-width:var(--maxw);margin:0 auto}
.sec--paper{background:var(--paper)}
.sec--sand{background:var(--paper-2)}
.sec--deep{background:var(--night);color:var(--fg-d)}
.head{max-width:var(--maxw);margin:0 auto clamp(3.5rem,6vw,5.5rem)}
.head--mid{max-width:46rem;text-align:center;margin-left:auto;margin-right:auto}
.head--mid .lede{margin-left:auto;margin-right:auto}
.head--split{display:grid;grid-template-columns:1fr minmax(0,32rem);gap:clamp(2rem,5vw,5rem);align-items:end}

/* ═══════════ entradas ═══════════ */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease-o),transform 1.1s var(--ease-o)}
.js .rv.in{opacity:1;transform:none}
/* Máscara que sube: la imagen se descubre en vez de aparecer. */
.js .rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease-o)}
.js .rv-img.in{clip-path:inset(0 0 0 0)}
/* Titular por líneas: cada línea sube desde detrás de un borde invisible.
   El `padding-bottom` compensado con un margen negativo es imprescindible: la
   máscara recorta a la altura de línea, y con una interlínea de 1.04 los rasgos
   que bajan —la "p" de "stops", la "j", la "g"— quedaban cortados por abajo.
   El relleno le da aire a la máscara y el margen negativo devuelve el espacio,
   así que la composición no se mueve ni un píxel. */
.js .rv-t span{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.js .rv-t span > i{display:block;font-style:inherit;transform:translateY(105%);transition:transform 1.15s var(--ease-o)}
.js .rv-t.in span > i{transform:none}
.js .rv-t span:nth-child(2) > i{transition-delay:.1s}
.js .rv-t span:nth-child(3) > i{transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-img,.rv-t span>i{opacity:1!important;transform:none!important;clip-path:none!important;transition:none}
}

/* ═══════════ 01 · LA EXPERIENCIA ═══════════
   Fondo de tres fotografías fundiéndose en bucle. Sin guion: tres animaciones
   idénticas de 27 s con el arranque desfasado 9 s cada una. Cada imagen está
   visible un tercio del ciclo y las transiciones se solapan, así que nunca hay
   un fotograma en negro.

   El velo va MUY denso a propósito. Aquí la protagonista es la frase; el fondo
   solo tiene que dar movimiento y profundidad. Un fondo legible competiría con
   el titular y se perderían los dos. */
.exp{position:relative;isolation:isolate;overflow:hidden}
.exp__bg{position:absolute;inset:0;z-index:-2}
.exp__bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:var(--grade);opacity:0;
  animation:expFade 27s linear infinite;
  /* Deriva lentísima: sin ella el corte entre fotos se nota como un parpadeo;
     con ella parece un plano que se mueve. */
  transform:scale(1.06);
}
.exp__bg picture:nth-child(1) img{animation-delay:0s}
.exp__bg picture:nth-child(2) img{animation-delay:9s}
.exp__bg picture:nth-child(3) img{animation-delay:18s}
@keyframes expFade{
  0%   {opacity:0;  transform:scale(1.04)}
  7%   {opacity:.9; transform:scale(1.07)}
  27%  {opacity:.9; transform:scale(1.12)}
  36%  {opacity:0;  transform:scale(1.14)}
  100% {opacity:0;   transform:scale(1.04)}
}
/* Con movimiento reducido se queda una sola imagen fija: ni parpadeo ni
   deriva, pero la sección no pierde su fondo. */
@media (prefers-reduced-motion:reduce){
  .exp__bg img{animation:none;transform:none}
  .exp__bg picture:nth-child(1) img{opacity:.85}
}
.exp__bg::after{
  content:"";position:absolute;inset:0;
  background:
    /* Arranca y acaba en negro sólido y solo abre en el centro: el fondo vivo
       nace del borde de la portada en vez de aparecer de golpe, y se cierra
       antes de la sección siguiente. Ni bordes ni costuras. */
    linear-gradient(to bottom,
      var(--night) 0%,
      rgba(12,18,15,.84) 15%,
      rgba(12,18,15,.6) 45%,
      rgba(12,18,15,.84) 85%,
      var(--night) 100%),
    radial-gradient(ellipse 66% 52% at 50% 40%,rgba(12,18,15,.46) 0%,rgba(12,18,15,0) 100%);
}

/* Cita de apertura a gran cuerpo, centrada y sola en la pantalla. Es la única
   sección sin imagen a propósito: después de la portada, un respiro de puro
   texto hace que la siguiente foto golpee más fuerte. */
.manifesto{max-width:23ch;margin:0 auto;text-align:center}
.manifesto + .lede{max-width:46ch;margin:clamp(2.2rem,4vw,3.2rem) auto 0;text-align:center}

.pillars{
  max-width:var(--maxw);margin:clamp(4rem,7vw,6.5rem) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-d);
}
.sec--paper .pillars,.sec--sand .pillars{border-color:var(--line)}
.pillars>div{padding:clamp(2rem,3.5vw,3rem) clamp(1.2rem,2.5vw,2.4rem);border-left:1px solid var(--line-d)}
.sec--paper .pillars>div,.sec--sand .pillars>div{border-color:var(--line)}
.pillars>div:first-child{border-left:0;padding-left:0}
.pillars b{
  display:block;font-size:.58rem;font-weight:500;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ember-d);margin-bottom:1rem;
}
.sec--paper .pillars b,.sec--sand .pillars b{color:var(--ember)}
.pillars p{font-size:.88rem;line-height:1.7;color:var(--fg-d-mute);margin:0}
.sec--paper .pillars p,.sec--sand .pillars p{color:var(--fg-mute)}

/* ═══════════ 02 · EXPERIENCIAS ═══════════ */
/* Nada de tarjetas. Cada experiencia es una franja editorial a pantalla
   completa, con la ficha desplegable: primero se desea, luego se comprueba. */
.xp{border-top:1px solid var(--line);padding:clamp(3rem,6vw,5rem) 0}
.xp:last-of-type{border-bottom:1px solid var(--line)}
.xp__in{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5.5rem);align-items:center;
}
.xp--rev .xp__art{order:2}
.xp__art{position:relative;overflow:hidden}
/* `object-position` por debajo del centro: en el canal turquesa lo bueno —el
   agua y los kayaks— está en la mitad inferior del encuadre, y un recorte
   centrado se quedaba con las copas de los árboles. */
.xp__art img,.xp__art video{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 68%;transition:transform 2s var(--ease-o)}
.xp:hover .xp__art img{transform:scale(1.04)}
.xp__no{
  font-size:.58rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ember);display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem;
}
.xp__no::after{content:"";width:44px;height:1px;background:currentColor;opacity:.45}
.xp h3{margin-bottom:1.3rem}
.xp__lede{color:var(--fg-mute);max-width:46ch;margin-bottom:2rem}
/* Cifras clave en línea: duración, salidas, mínimo. Lo que decide una compra. */
.xp__key{
  display:flex;flex-wrap:wrap;gap:0 clamp(1.5rem,3vw,3rem);list-style:none;margin:0 0 2rem;padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.xp__key li{padding:1.1rem 0;display:flex;flex-direction:column;gap:.45rem}
.xp__key dt,.xp__key b{font-size:.52rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-mute)}
.xp__key span{font-size:.92rem}
.xp__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.price{margin:0;display:flex;flex-direction:column;line-height:1}
.price__n{font-family:var(--display);font-optical-sizing:auto;font-weight:300;font-size:2.6rem;letter-spacing:-.02em}
.price__u{font-size:.52rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-mute);margin-top:.9em}
.price__cash{font-size:.55rem;color:var(--moss);margin-top:.7em;letter-spacing:.2em;text-transform:uppercase}

/* Ficha desplegable */
.xp__more{margin-top:2rem;border-top:1px solid var(--line)}
.xp__more summary{
  list-style:none;cursor:pointer;padding:1.3rem 0;position:relative;
  font-size:.58rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;
  display:flex;align-items:center;gap:.8rem;
}
.xp__more summary::-webkit-details-marker{display:none}
.xp__more summary::after{content:"+";margin-left:auto;font-size:1rem;line-height:1;color:var(--ember);transition:transform .45s var(--ease-o)}
.xp__more[open] summary::after{transform:rotate(45deg)}
.xp__panel{padding-bottom:1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem)}
.xp__panel h4{
  font-size:.55rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ember);margin:0 0 1rem;
}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.ticks li{position:relative;padding-left:1.9rem;font-size:.87rem;color:var(--fg-mute);line-height:1.65}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--moss)}
.on-dark .ticks li,.sec--deep .ticks li{color:var(--fg-d-mute)}
.on-dark .ticks li::before,.sec--deep .ticks li::before{background:var(--moss-d)}
.why-h{margin-top:2rem!important}
.xp__todo{margin-top:1rem}
/* "Por qué esta experiencia": va en cursiva de la Fraunces para que se lea
   como una recomendación de alguien, no como otro bloque de ficha. */
.why{
  font-family:var(--display);font-optical-sizing:auto;font-style:italic;font-weight:300;
  font-size:1.05rem;line-height:1.6;color:var(--fg);margin:0;
}

/* ═══════════ 03 · EL MANGLAR ═══════════ */
/* Relato con panel fijo: la imagen se queda quieta y el texto pasa por
   delante. Es el recurso que convierte una sección informativa en documental
   sin cargar una sola librería. */
.mg{position:relative;background:var(--night);color:var(--fg-d)}
.mg__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);padding:0 var(--pad)}
.mg__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.mg__stage{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden}
.mg__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--grade);opacity:0;transition:opacity 1.1s var(--ease)}
.mg__stage img.on{opacity:1}
.mg__steps{padding:clamp(4rem,10vw,9rem) 0}
.mg__step{min-height:76svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,4rem) 0}
.mg__step h3{margin-bottom:1.4rem}
.mg__step p{color:var(--fg-d-mute);max-width:44ch}

/* Índice de fauna. Pasa de seis columnas a CINCO: las fichas crecen casi un
   veinte por ciento y los animales se reconocen de un vistazo, que es de lo
   que va esta sección. Con seis, a la mitad de las fotos había que acercarse.

   Y los pies dejan de esconderse: antes la segunda línea solo aparecía al
   pasar el ratón, lo que la hacía invisible en móvil —donde no hay ratón— y
   fácil de perderse en escritorio. Ahora se lee siempre. */
.fauna{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;
  /* `dense` es el seguro: si algún día se añade o se quita un animal y las
     cuentas dejan de cuadrar, el navegador rellena los huecos solo en vez de
     dejar la última fila coja. */
  grid-auto-flow:row dense;
}
.fauna figure{position:relative;overflow:hidden;background:var(--deep);aspect-ratio:4/5}
.fauna figure.tall{grid-row:span 2;aspect-ratio:auto}
/* La última ficha ocupa dos columnas y cierra la rejilla a ras. Sin ella
   quedaba un hueco en la esquina inferior derecha: 14 fotos con 6 dobles no
   reparten limpio en cinco columnas, y un agujero al final delata la retícula. */
.fauna figure.wide{grid-column:span 2;aspect-ratio:auto}
.fauna img,.fauna video{width:100%;height:100%;object-fit:cover;filter:var(--grade);transition:transform 1.8s var(--ease-o),filter .7s}
/* Al pasar por encima la fotografía recupera color: el resto de la rejilla
   sigue apagada, así que la que se mira destaca sola sin necesidad de marcos
   ni sombras. */
.fauna figure:hover img,.fauna figure:hover video{transform:scale(1.05);filter:saturate(1.02) contrast(1.04) brightness(1.02)}
.fauna figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.15rem 1.15rem 1.05rem;
  background:linear-gradient(to top,rgba(12,18,15,.94) 0%,rgba(12,18,15,.72) 55%,transparent 100%);
  display:flex;flex-direction:column;gap:.4rem;
}
/* Filete ámbar sobre el nombre: el mismo hilo que cose los capítulos, aquí en
   miniatura. Crece al pasar por encima. */
.fauna figcaption::before{
  content:"";width:16px;height:1px;background:var(--ember-d);
  transition:width .5s var(--ease-o);
}
.fauna figure:hover figcaption::before{width:34px}
.fauna figcaption b{
  font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.35;color:var(--fg-d);
}
.fauna figcaption i{
  font-family:var(--display);font-optical-sizing:auto;
  font-style:italic;font-weight:300;font-size:.82rem;letter-spacing:.005em;
  line-height:1.35;color:rgba(239,235,226,.72);
}

/* Postura sobre fauna: una sola frase, grande, sola. */
.ethics{max-width:34ch;margin:clamp(4rem,7vw,6rem) auto 0;text-align:center}
.ethics p{font-family:var(--display);font-optical-sizing:auto;font-style:italic;font-weight:300;font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.55;color:var(--fg-d)}

/* ═══════════ 04 · NUESTRA HISTORIA ═══════════
   Fotografía a sangre con el relato escrito encima. El animal ocupa la
   pantalla entera y el texto vive en la mitad izquierda, sobre un velo que se
   desvanece hacia la derecha: así se lee sin tapar al capuchino. */
.story{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;min-height:100vh;display:flex;align-items:center;
  padding:clamp(5rem,10vw,8rem) var(--pad);
  background:var(--night);
}
.story__bg{position:absolute;inset:0;z-index:-2}
.story__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:var(--grade);
}
/* Velo en dos direcciones: fuerte a la izquierda para sostener el texto, y una
   base inferior para que las cifras no floten sobre el follaje claro. */
.story__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(12,18,15,.94) 0%,rgba(12,18,15,.86) 34%,rgba(12,18,15,.5) 62%,rgba(12,18,15,.24) 100%),
    /* Los dos extremos verticales cierran en negro sólido para que la franja se
       funda con las secciones de arriba y de abajo en vez de recortarse. */
    linear-gradient(to bottom,var(--night) 0%,rgba(12,18,15,0) 12%),
    linear-gradient(to top,var(--night) 0%,rgba(12,18,15,.62) 8%,rgba(12,18,15,0) 45%);
}
.story__in{max-width:var(--maxw);margin:0 auto;width:100%}
/* Un punto más claro que el gris secundario del resto: aquí el fondo no es un
   color plano sino pelaje y corteza, y el texto necesita más separación. */
.story__in > p{color:rgba(239,235,226,.84);max-width:44ch}
.story__quote{
  font-family:var(--display);font-optical-sizing:auto;font-style:italic;font-weight:300;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);line-height:1.24;letter-spacing:-.018em;
  color:var(--fg-d)!important;max-width:20ch!important;margin:0 0 2.2rem!important;
  text-shadow:0 2px 50px rgba(0,0,0,.5);
}
.story__rule{display:block;width:64px;height:1px;background:var(--ember-d);margin:0 0 2.4rem}
.story__sign{
  margin:clamp(2.4rem,4vw,3.2rem) 0 0!important;padding-top:1.5rem;
  border-top:1px solid var(--line-d);
  font-size:.55rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--fg-d-mute);max-width:none!important;
}

/* Las cifras van sobre la propia fotografía, en filetes claros. */
.stats{
  max-width:56rem;margin:clamp(2.5rem,5vw,4rem) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-d);
}
.stats>div{
  border-left:1px solid var(--line-d);
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.8rem);
  display:flex;flex-direction:column;gap:.8rem;
}
.stats>div:first-child{border-left:0;padding-left:0}
.stats>div::before{content:"";width:20px;height:1px;background:var(--ember-d)}
.stats dt{
  font-family:var(--display);font-optical-sizing:auto;font-weight:300;
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:.95;color:var(--fg-d);
}
.stats dd{margin:0;font-size:.5rem;letter-spacing:var(--track);text-transform:uppercase;line-height:1.7;color:var(--fg-d-mute);max-width:18ch}

/* ═══════════ 05 · RESEÑAS ═══════════ */
.rev__top{max-width:var(--maxw);margin:0 auto clamp(3rem,5vw,4.5rem);display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.ta{display:flex;flex-direction:column;gap:1rem;padding:1.7rem 0 0;border-top:1px solid var(--line-2);flex:none}
/* `align-self:start` no es decorativo: .ta es flex en columna y sus hijos se
   estiran a lo ancho por defecto, lo que reventaba el logo a proporción 8.9. */
.ta__logo{display:block;height:32px;width:auto;align-self:start}
.ta__score{display:flex;align-items:center;gap:.9rem}
.ta__n{font-family:var(--display);font-optical-sizing:auto;font-weight:300;font-size:2rem;line-height:1}
.bubbles{display:flex;gap:4px}
.bubbles i{width:12px;height:12px;border-radius:50%;border:1px solid #00AA6C;display:block}
.bubbles i.f{background:#00AA6C}
.ta__meta{font-size:.53rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-mute);margin:0}
.ta__meta a{text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:.2em}

.revs{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem)}
.revs blockquote{margin:0;display:flex;flex-direction:column;position:relative;padding:2rem 0 0;border-top:1px solid var(--line)}
.revs .bubbles{margin-bottom:1.5rem}
.revs p{font-family:var(--display);font-optical-sizing:auto;font-style:italic;font-weight:300;font-size:1.14rem;line-height:1.6;margin:0 0 1.7rem}
.revs cite{margin-top:auto;font-style:normal;font-size:.52rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-mute)}
/* La procedencia va absoluta: el <cite> lleva margin-top:auto para pegarse al
   fondo, y meter otro elemento detrás lo despegaría en todas las tarjetas. */
/* Logotipos reales de las plataformas, con el fondo blanco recortado para que
   se apoyen sobre la arena sin recuadro. Pequeños y arriba a la derecha:
   acreditan la procedencia sin competir con la cita. */
.src{position:absolute;top:1.7rem;right:0;height:auto;display:block}
.src--ta{width:34px}
.src--g{width:52px}
.revs__more{display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding:2rem 0 0}
.revs__more p{font-family:var(--display);font-optical-sizing:auto;font-weight:300;font-size:1.14rem;line-height:1.5;margin:0}

/* ═══════════ 06 · EL LUGAR ═══════════ */
.place__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.place__list{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--line-d)}
.place__list li{padding:1.3rem 0;border-bottom:1px solid var(--line-d);display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;align-items:baseline}
.place__list b{font-size:.52rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--ember-d)}
.place__list span{font-size:.92rem;color:var(--fg-d-mute)}
.place__map{position:relative;overflow:hidden;aspect-ratio:4/5}
.place__map img{width:100%;height:100%;object-fit:cover}
.place__link{margin-top:2.5rem}

/* ═══════════ 07 · PLANIFICAR ═══════════ */
.plan__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.form{display:grid;gap:0}

/* ── tramos del formulario ──
   Un filete arriba y un número: la misma gramática que los capítulos de la
   página. Convierte doce campos en tres pasos cortos, que es la diferencia
   entre un formulario que se abandona y uno que se termina. */
.fs{border:0;margin:0;padding:2.2rem 0 .6rem;min-width:0}
.fs + .fs{border-top:1px solid var(--line)}
.fs:first-of-type{padding-top:0}
.fs__n{
  display:flex;align-items:center;gap:.85rem;padding:0;margin:0 0 1.8rem;
  font-size:.55rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ember);
}
.fs__n b{font-weight:500;font-variant-numeric:tabular-nums}
.fs__n::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3}
.fs .f{margin-bottom:1.5rem}
.fs .fgrid .f{margin-bottom:0}
.fs .fgrid{margin-bottom:1.5rem}
.fs .f:last-child,.fs .fgrid:last-child{margin-bottom:0}
/* El texto de ejemplo, más claro que el del campo: es una pista, no un dato. */
.f textarea::placeholder,.f input::placeholder{color:var(--fg-mute);opacity:.55}
#planSend{margin-top:2.4rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.f{display:flex;flex-direction:column;gap:.6rem}
.f > span{font-size:.52rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-mute)}
.f input,.f select,.f textarea{
  font:inherit;font-size:.95rem;color:var(--fg);background:transparent;
  border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:.75rem 0;
  transition:border-color .35s;
}
.f textarea{resize:vertical;min-height:5.5rem}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--ember)}
.form__note{font-size:.78rem;color:var(--fg-mute);margin:0}
/* Trampa antispam: fuera de pantalla, no `display:none`. Algunos robots
   ignoran los campos ocultos con display, pero rellenan los desplazados. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Acuse de recibo. El número es lo único grande de todo el bloque: es el dato
   que el visitante tiene que retener y el que va a citar por WhatsApp. */
.done{border-top:1px solid var(--line-2);padding-top:2.2rem}
.done[hidden]{display:none}
.done__lbl{font-size:.55rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--moss);margin:0 0 1rem}
.done__ref{
  font-family:var(--display);font-optical-sizing:auto;font-weight:300;
  font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem);line-height:1;letter-spacing:-.01em;
  margin:0 0 1.4rem;
}
.done__txt{color:var(--fg-mute);max-width:46ch;font-size:.92rem}
.done__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.plan__aside{border-top:1px solid var(--line);padding-top:2.2rem;margin-top:3rem}
.plan__or{
  font-size:.55rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--fg-mute);margin:0 0 1.6rem;
}

/* Canal de contacto: una fila entera pulsable. El filete de arriba y el de
   abajo la convierten en una pieza de índice, no en un botón — que es el
   registro correcto aquí: no estamos vendiendo, estamos abriendo una puerta. */
.ch{
  display:flex;align-items:center;gap:1.3rem;
  padding:1.5rem 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.ch:first-of-type{border-top:1px solid var(--line)}
.ch__ico{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--fg-mute);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.ch__ico svg{width:20px;height:20px}
.ch__ico--wa{color:#25D366}
.ch:hover .ch__ico{border-color:var(--ember);color:var(--ember)}
.ch:hover .ch__ico--wa{border-color:#25D366;color:#25D366}
.ch__txt{display:flex;flex-direction:column;gap:.45rem;min-width:0}
/* El titular hereda la escala editorial del resto de la página, así que la
   llamada compite de tú a tú con los titulares de sección. */
.ch__txt b{font-weight:300;transition:color .4s var(--ease)}
.ch:hover .ch__txt b{color:var(--ember)}
.ch__sub{font-size:.8rem;color:var(--fg-mute);word-break:break-word}
/* La flecha avanza al pasar por encima. Un detalle de dos líneas que hace que
   la fila se sienta viva sin animar nada más. */
.ch__go{
  margin-left:auto;flex:none;font-size:1.1rem;color:var(--fg-mute);
  transition:transform .45s var(--ease-o),color .4s;
}
.ch:hover .ch__go{transform:translateX(7px);color:var(--ember)}

.plan__social{display:flex;flex-wrap:wrap;gap:1.6rem;margin:2.2rem 0 0}

/* ═══════════ pie ═══════════
   El pie es una fotografía a sangre con todo el contenido escrito encima. Es
   el último plano de la película: en vez de terminar en un rectángulo negro
   con enlaces, la página se cierra volviendo al estero.

   El velo es la pieza clave. Sin él, un texto de 13 px sobre follaje es
   ilegible; con él, la imagen sigue leyéndose y el texto se sostiene. Va en
   dos capas —una general y otra más densa abajo— porque la parte inferior es
   donde se acumula el texto pequeño. */
.foot{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--night);color:var(--fg-d);
  padding:clamp(5rem,9vw,8rem) var(--pad) 2.5rem;
}
.foot__bg{position:absolute;inset:0;z-index:-2}
.foot__bg img{width:100%;height:100%;object-fit:cover;filter:var(--grade)}
.foot__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(12,18,15,.8) 0%,rgba(12,18,15,.66) 42%,rgba(12,18,15,.9) 100%),
    radial-gradient(ellipse 70% 50% at 50% 28%,rgba(12,18,15,.3) 0%,rgba(12,18,15,0) 100%);
}
/* Filete de arranque: separa el pie de la última sección sin una línea dura. */
.foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:-1;
  background:linear-gradient(to right,transparent,var(--line-d) 20%,var(--line-d) 80%,transparent);
}
.foot__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1.2fr;gap:clamp(2rem,4vw,4rem)}
.foot__logo{display:block;width:auto;height:clamp(48px,5.5vw,64px)}
.foot__brand p{color:var(--fg-d-mute);font-size:.82rem;margin-top:1.2rem;max-width:32ch}
.foot__site{font-size:.53rem!important;letter-spacing:var(--track);text-transform:uppercase;color:var(--ember-d)!important;margin-top:1rem!important}
.foot__col{display:flex;flex-direction:column;gap:.9rem}
.foot__col h3{font-size:.53rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--ember-d);margin-bottom:.6rem}
.foot__col a{color:var(--fg-d-mute);text-decoration:none;font-size:.84rem;transition:color .35s;width:fit-content}
.foot__col a:hover{color:var(--fg-d)}
.foot__col a.ico{display:flex;align-items:center;gap:.75rem}
.foot__col a.ico svg{width:15px;height:15px;flex:none}
.foot__col a.ico[href^="https://wa.me"] svg{color:#25D366}
.foot__legal{
  max-width:var(--maxw);margin:clamp(3rem,5vw,4rem) auto 0;padding-top:1.8rem;
  border-top:1px solid var(--line-d);
  font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-d-mute);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem clamp(1.5rem,3vw,3rem);
}
.foot__legal p{margin:0}
.foot__pol{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;margin-left:auto}
.foot__pol a{text-decoration:none;transition:color .35s}
.foot__pol a:hover{color:var(--fg-d)}

/* ── firma de autoría ──
   Placa de autor, no nota al pie. Lo que la hace "cara" no es el tamaño sino
   el VACÍO que se le reserva alrededor. Escalera de tres registros: etiqueta
   diminuta, nombre grande en la editorial, descriptor aún más pequeño. */
.foot__sig{
  max-width:var(--maxw);margin:clamp(4rem,7vw,6rem) auto 0;
  padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(1rem,2vw,1.5rem);
  border-top:1px solid var(--line-d);
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center;
}
/* El tracking se aplica también tras la última letra, así que un texto muy
   espaciado y centrado queda ópticamente corrido a la izquierda: estos
   márgenes le devuelven el centro real. */
.foot__sig-lbl{font-size:.5rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--fg-d-mute);opacity:.8;margin-left:.4em}
/* ── logotipo de Verviere, reconstruido con tipografía ──
   Es un logotipo de palabra: mayúsculas finas con un espaciado muy abierto,
   un filete debajo y el claim. Reproducirlo con letra en vez de con una imagen
   lo mantiene nítido en cualquier pantalla y le deja heredar el color del pie.
   El `margin-left` compensa el espaciado que el navegador añade también detrás
   de la última letra, que descentra ópticamente el bloque. */
.vv{display:flex;flex-direction:column;align-items:center;gap:.85rem;text-decoration:none;color:var(--fg-d);transition:color .5s var(--ease)}
.vv:hover{color:#fff}
.vv__name{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1.15rem,.85rem + 1.1vw,1.85rem);
  letter-spacing:.52em;text-transform:uppercase;line-height:1;
  margin-left:.52em;
}
.vv__rule{display:block;width:clamp(120px,18vw,230px);height:1px;background:currentColor;opacity:.4;transition:opacity .5s var(--ease)}
.vv:hover .vv__rule{opacity:.85}
.vv__tag{
  font-family:var(--sans);font-weight:400;font-size:.65rem;
  letter-spacing:.09em;color:var(--fg-d-mute);opacity:.75;
}

/* ═══════════ chat de WhatsApp ═══════════ */
.fabs{position:fixed;right:1.2rem;bottom:1.2rem;z-index:110;display:flex;flex-direction:column;align-items:flex-end;gap:.8rem}
.fabs__row{display:flex;align-items:center;gap:.7rem}
.fab{
  display:none;background:var(--fg);color:var(--paper);border:1px solid var(--fg);
  padding:1.15em 1.9em;font-size:.55rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;line-height:1;cursor:pointer;text-decoration:none;
}
.fab--wa{
  display:inline-flex;align-items:center;gap:.7rem;flex:none;
  background:#25D366;color:#fff;border:0;height:50px;padding:0 1.4rem 0 1.15rem;
  font-family:var(--sans);font-size:.55rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;cursor:pointer;transition:filter .35s;
}
.fab--wa:hover{filter:brightness(1.07)}
.fab--wa svg{width:22px;height:22px;flex:none}
.fab--wa .fab__x{display:none}
.fabs.is-open .fab--wa .fab__wa{display:none}
.fabs.is-open .fab--wa .fab__x{display:block}
.wa{width:min(330px,calc(100vw - 2.4rem));background:var(--paper);color:var(--fg);border:1px solid var(--line-2);overflow:hidden;transform-origin:bottom right;animation:waIn .4s var(--ease-o)}
.wa[hidden]{display:none}
@keyframes waIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.wa__top{background:#25D366;color:#06331A;padding:1.05rem 1.2rem;display:flex;align-items:center;gap:.8rem}
.wa__top svg{width:27px;height:27px;flex:none}
.wa__who{font-size:.58rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;display:block}
.wa__st{font-size:.62rem;opacity:.82;display:block;margin-top:.25rem}
.wa__body{padding:1.25rem 1.2rem 1.35rem}
.wa__hi{font-size:.83rem;color:var(--fg-mute);line-height:1.6;margin:0 0 1.15rem;padding:.85rem 1rem;background:var(--paper-2)}
.wa__q{
  display:block;width:100%;text-align:left;background:transparent;color:var(--fg);
  border:1px solid var(--line);padding:.75rem 1rem;margin-bottom:.5rem;
  font-family:var(--sans);font-size:.78rem;line-height:1.4;text-decoration:none;cursor:pointer;
  transition:border-color .3s,background .3s;
}
.wa__q:hover{border-color:#25D366;background:rgba(37,211,102,.08)}
.wa__note{margin:1rem 0 0;font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);opacity:.8}

/* ═══════════ marcador de contenido pendiente ═══════════ */
/* Visible sólo para quien edita: se apaga con una clase en el <html> cuando la
   web salga a producción. Nunca se inventa un dato: se marca el hueco. */
.todo{
  display:inline-block;padding:.35em .7em;border:1px dashed var(--ember);
  font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);
}
.on-dark .todo,.sec--deep .todo{border-color:var(--ember-d);color:var(--ember-d)}
.is-live .todo{display:none}

/* ═══════════ páginas interiores ═══════════ */
.subnav{position:sticky;top:0;z-index:100;background:rgba(243,239,231,.95);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:1.1rem var(--pad)}
.subnav__in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:1.2rem;color:var(--fg)}
.subnav__back{margin-left:auto;text-decoration:none;font-size:.55rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-mute);transition:color .35s}
.subnav__back:hover{color:var(--fg)}
.legal{background:var(--paper);padding:clamp(4rem,7vw,6rem) var(--pad) clamp(4.5rem,8vw,7rem)}
.legal__in{max-width:780px;margin:0 auto}
.legal__head{margin-bottom:clamp(3rem,5vw,4.5rem)}
/* En las páginas interiores los titulares también son de la editorial: si no,
   la página de políticas parecería de otra web. */
.legal__head h1,.legal__sec>h2{
  font-family:var(--display);font-optical-sizing:auto;
  font-weight:300;letter-spacing:-.02em;line-height:1.08;
}
.legal__head h1{margin:.8rem 0 0;font-size:clamp(2.1rem,1.4rem + 2.6vw,3.6rem)}
.legal__sec>h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem)}
.legal__upd{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--line);font-size:.53rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-mute)}
.legal__toc{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 0;padding:0;list-style:none}
.legal__toc a{display:block;padding:.65rem 1.2rem;border:1px solid var(--line);font-size:.53rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);text-decoration:none;transition:border-color .3s,color .3s}
.legal__toc a:hover{border-color:var(--ember);color:var(--fg)}
.legal__sec{margin-top:clamp(3.5rem,6vw,5rem);scroll-margin-top:6rem}
.legal__sec>h2{margin:0 0 2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.legal__sec h3{font-size:.55rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--ember);margin:2.6rem 0 .9rem}
.legal__sec h3:first-of-type{margin-top:0}
.legal__sec p{margin:0 0 1.05rem;color:var(--fg-mute);line-height:1.85;font-size:.93rem}
.legal__sec ul{margin:0 0 1.05rem;padding:0;list-style:none}
.legal__sec ul li{position:relative;padding-left:1.7rem;margin-bottom:.7rem;color:var(--fg-mute);line-height:1.75;font-size:.93rem}
.legal__sec ul li::before{content:"";position:absolute;left:0;top:.85em;width:9px;height:1px;background:var(--ember)}
.legal__sec strong{color:var(--fg);font-weight:500}
.legal__note{margin:1.6rem 0;padding:1.3rem 1.6rem;background:var(--paper-2);border-left:1px solid var(--ember)}
.legal__note p{margin:0;color:var(--fg)}

/* ═══════════════════════════════════════════════════════════════════════════
   MÓVIL Y TABLET
   No es "lo mismo pero estrecho": cambian las composiciones. El relato del
   manglar abandona el panel fijo (en una pantalla de mano, texto e imagen
   compitiendo por la altura no funciona) y pasa a alternar imagen y texto.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .fauna{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:1080px){
  .nav__links{display:none}
  .nav__links.is-open{
    display:flex;flex-direction:column;gap:1.5rem;position:absolute;top:100%;left:0;right:0;
    background:rgba(243,239,231,.98);backdrop-filter:blur(20px);
    padding:2.2rem var(--pad) 2.6rem;border-bottom:1px solid var(--line);
  }
  .nav__links.is-open a{font-size:.72rem;color:var(--fg);opacity:1}
  .burger{display:flex;margin-left:auto}
  .nav__act{margin-left:auto}
  .xp__in,.place__in,.plan__in{grid-template-columns:1fr}
  .xp--rev .xp__art{order:0}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillars>div:nth-child(odd){border-left:0;padding-left:0}
  .pillars>div:nth-child(n+3){border-top:1px solid var(--line)}
  .revs{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
  .head--split{grid-template-columns:1fr}
  /* El panel fijo se desactiva: en vertical, imagen y texto no caben a la vez. */
  .mg__in{grid-template-columns:1fr;gap:0}
  .mg__sticky{position:relative;height:auto;padding-top:clamp(3rem,8vw,5rem)}
  .mg__stage{aspect-ratio:4/3}
  .mg__steps{padding:clamp(2rem,6vw,4rem) 0 0}
  .mg__step{min-height:0;padding:clamp(2rem,6vw,3rem) 0}
}

@media (max-width:820px){
  .hero{padding-top:6rem}
  /* En móvil manda el <br> del marcado, no un tope en `ch`: con el tope, la
     segunda línea volvía a partirse y dejaba "river" solo en un renglón. */
  .hero h1{max-width:none}
  .hero__lock{letter-spacing:.3em;font-size:.55rem}
  .hero__bar-in{padding-bottom:4.6rem}
  .hero__cue{display:none}
  .nav__act .btn--sm{display:none}
  .fauna{grid-template-columns:repeat(3,1fr)}
  .fauna figure.tall{grid-row:span 1;aspect-ratio:4/5}
  .revs{grid-template-columns:1fr}
  /* Cuatro cifras en fila en un móvil dejan columnas de 85 px y las etiquetas
     se parten en cuatro renglones. En 2x2 se leen de un vistazo, y hay que
     devolver los filetes a mano porque ya no hay una única fila. */
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div{padding-left:clamp(1.2rem,4vw,1.8rem)}
  .stats>div:nth-child(odd){border-left:0;padding-left:0}
  .stats>div:nth-child(n+3){border-top:1px solid var(--line-d)}
  /* En vertical el velo lateral no sirve: se oscurece de arriba abajo. */
  .story__bg::after{
    background:linear-gradient(to bottom,rgba(12,18,15,.66) 0%,rgba(12,18,15,.82) 45%,rgba(12,18,15,.94) 100%);
  }
  .story__bg img{object-position:center 22%}
  .xp__panel{grid-template-columns:1fr}
  .place__list li{grid-template-columns:1fr;gap:.4rem}
  .fab{display:block}
  .fab--wa{width:50px;padding:0;justify-content:center}
  .fab--wa span{display:none}
  .foot__pol{margin-left:0}
}

@media (max-width:560px){
  .hero__facts{gap:1.5rem}
  .hero__facts strong{font-size:1.35rem}
  .hero__price{text-align:left}
  .hero__price b{font-size:1.85rem}
  .hero__bar-in{flex-direction:column;align-items:flex-start;gap:1.6rem}
  .fauna{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:1fr}
  .pillars>div{border-left:0;padding-left:0}
  .pillars>div+div{border-top:1px solid var(--line)}
  .fgrid{grid-template-columns:1fr}
  .xp__key{gap:0}
  .xp__key li{width:50%}
}