/* =========================================================
   Wakamaya Trips
   Sistema visual: crema + tinta + fotografía. El verde de marca es
   firma, no superficie. Tipografía grande en peso regular.
   ========================================================= */

:root{
  /* ---- FIRMA DE MARCA -------------------------------------------------
     El verde es acento, no superficie: rellena botones, marcas y estados
     seleccionados, nunca secciones enteras. El peso cromático lo llevan
     la crema y la tinta; el color lo pone la fotografía. */
  --acento:#79A82E;
  --acento-vivo:#8CC236;      /* hover: sube de brillo, no baja */
  --acento-calado:#4F6F1E;    /* verde legible sobre los fondos claros (5:1) */
  --acento-vel:rgba(121,168,46,.15);
  --acento-linea:rgba(121,168,46,.42);

  --rojo:#E63B22;
  --rojo-hondo:#B93018;

  /* ---- LOS DOS FONDOS DEL SISTEMA ----
     Todo lo que antes era verde macizo es ahora crema o tinta. */
  --crema:#F3EFE3;
  --crema-hondo:#EAE7DB;   /* el escalón más hondo, sin el amarillo de antes */
  --crema-suave:#FBF8F0;
  /* Las tarjetas sobre fondo claro van en blanco puro: con la arena tan
     cerca del blanco, el crema-suave ya no se despegaba de ella. Ese token
     se queda para lo claro sobre tinta (texto, piezas), que es otro oficio. */
  --tarjeta:#FFFFFF;
  /* Pariente oscuro del lima: sirve de superficie sin robarle el papel de
     acento. Sólo la tarjeta del formulario lo usa. */
  --verde-hondo:#173A22;
  --tinta:#181A19;
  --tinta-honda:#0E100F;
  --tinta-alta:#232623;

  --texto:#181A19;
  --texto-tenue:#5C5F58;
  --claro-tenue:#ADB0A6;

  /* Arena: el fondo claro de destinos y FAQ. Casi blanco, con
     un resto de calidez. Va POR ENCIMA de --crema en la escalera de claros
     (tarjetas > arena > crema > crema-hondo), así que las tarjetas de
     crema-suave siguen despegándose de él. */
  --arena:#F6F3EB;
  --arena-tinta:#181A19;
  --arena-tenue:#5E5C52;

  --linea-oscura:rgba(243,239,227,.18);
  --linea-clara:rgba(24,26,25,.16);

  --grano:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2010%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1.5%202.4C3.0%202.1%207.4%201.1%2010.3%200.8C13.3%200.5%2016.2%200.7%2019.1%200.7C22.1%200.7%2025.0%200.7%2028.0%200.7C30.9%200.8%2033.8%200.9%2036.8%201.1C39.7%201.3%2042.7%201.6%2045.6%201.8C48.5%202.0%2051.5%202.2%2054.4%202.3C57.3%202.5%2060.3%202.5%2063.2%202.5C66.2%202.5%2069.1%202.4%2072.0%202.4C75.0%202.3%2077.9%202.3%2080.9%202.2C83.8%202.2%2086.7%202.1%2089.7%202.3C92.6%202.5%2097.0%203.4%2098.5%203.6L98.5%207.7C97.0%207.9%2092.6%208.7%2089.7%209.0C86.7%209.2%2083.8%209.2%2080.9%209.3C77.9%209.4%2075.0%209.5%2072.0%209.6C69.1%209.7%2066.2%209.8%2063.2%209.8C60.3%209.8%2057.3%209.8%2054.4%209.7C51.5%209.6%2048.5%209.5%2045.6%209.4C42.7%209.3%2039.7%209.1%2036.8%208.9C33.8%208.8%2030.9%208.6%2028.0%208.5C25.0%208.4%2022.1%208.3%2019.1%208.3C16.2%208.3%2013.3%208.6%2010.3%208.4C7.4%208.2%203.0%207.4%201.5%207.1Z%22%2F%3E%3C%2Fsvg%3E");

  --paso:clamp(80px,10vw,150px);

  /* El marco del hero y el fondo de «Quiénes somos» comparten esta
     variable: eran verde y ahora son tinta, pero siguen siendo el mismo
     color, que es lo que enlaza el encuadre con la sección siguiente. */
  --marco:clamp(6px,.65vw,11px);
  --marco-color:var(--tinta);
  --radio-hero:clamp(14px,1.9vw,30px);

  --ease:cubic-bezier(.16,1,.3,1);
  /* La curva que usa Here&Away en esta mecánica: arranca rápido y se
     posa. Es lo que hace que el revelado parezca cine y no un fundido. */
  --cine:cubic-bezier(.215,.61,.355,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
/* Cuando el scroll con inercia está al mando —lo marca el guion— el suavizado
   nativo se apaga: dos suavizados encima del mismo movimiento van a rastras. */
html.inercia{scroll-behavior:auto;}

body{
  margin:0;
  background:var(--crema);
  color:var(--texto);
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

::selection{background:var(--acento);color:var(--tinta);}

/* La barra nativa se retira y se dibuja una propia (ver .barra). */
html{scrollbar-width:none;}
html::-webkit-scrollbar{width:0;height:0;}

/* Barra de desplazamiento propia: fina, redondeada, negra translúcida.
   Aparece al hacer scroll y se desvanece al parar. */
.barra{
  position:fixed;
  top:10px;right:6px;bottom:10px;
  width:14px;
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s var(--ease);
}
.barra.visible{opacity:1;pointer-events:auto;}
.barra__pulgar{
  position:absolute;top:0;left:4px;
  width:6px;
  border-radius:100px;
  background:rgba(0,0,0,.34);
  cursor:grab;
  transition:background .25s var(--ease);
}
.barra__pulgar:hover{width:9px;left:2.5px;background:rgba(0,0,0,.52);}
.barra.arrastrando .barra__pulgar{
  width:9px;left:2.5px;cursor:grabbing;background:rgba(0,0,0,.62);
}

:focus-visible{outline:2px solid var(--rojo);outline-offset:3px;}
/* El anillo es rojo y se ve en todos los fondos de la casa —4,2 sobre blanco,
   4,2 sobre tinta, 4,6 sobre tinta honda— salvo en dos: sobre la banda roja da
   1,43 (invisible) y sobre el verde del formulario 3,01 (justo). En esos dos
   pasa a crema: 5,3 y 11,9. Quien navega con el tabulador tiene que VER dónde
   está, y ése es el único sitio donde no lo veía. */
.remate-rojo :focus-visible,
.contacto__tarjeta :focus-visible{outline-color:var(--crema-suave);}
/* DOBLE ANILLO donde el fondo cambia bajo el foco: la cápsula de cristal del
   nav (sobre foto arriba, sobre tinta al bajar), la miga sobre la portada y
   el abanico (fotos oscurecidas). El rojo daba ahí entre 1,4 y 2,2:1 porque
   el fondo no es uno. Crema con un halo de tinta por fuera se ve sobre
   cualquier cosa: crema contra el halo al 85 % sobre blanco puro da ~12:1, y
   el halo contra una foto clara da él solo más de 3. */
.nav :focus-visible,.miga :focus-visible,.abanico :focus-visible,
.pausa--foto:focus-visible,.hero__riel .pausa:focus-visible{
  outline:2px solid var(--crema-suave);outline-offset:2px;
  box-shadow:0 0 0 5px rgba(14,16,15,.85);
}
/* En la cápsula, 3 px. Con la cápsula ya en tinta el halo no suma contraste
   y todo el trabajo lo hace el anillo crema; en un botón redondo de 44 px uno
   de 2 px medía 302 píxeles, por debajo del perímetro de referencia (352). */
.nav :focus-visible{outline-width:3px;}
/* La carta de fondo va oscurecida con `filter`, que oscurece también su
   anillo. Mientras tiene el foco —ella o algo dentro— se enciende. */
.carta:not(.frente):focus-within{filter:none;}

/* Enlace de salto: invisible hasta que el teclado lo enfoca. Sin él, quien
   navega con tabulador tiene que recorrer el menú entero en cada carga. */
.saltar{
  position:fixed;top:0;left:50%;
  z-index:100;
  background:var(--acento);color:var(--tinta);
  padding:12px 22px;border-radius:0 0 12px 12px;
  text-decoration:none;font-size:.9rem;font-weight:500;
  transform:translate(-50%,-120%);
  transition:transform .25s var(--ease);
}
.saltar:focus{transform:translate(-50%,0);}

p{margin:0;}
a{color:inherit;}

.contenedor{max-width:1240px;margin:0 auto;padding:0 clamp(22px,4vw,44px);}
/* La barra flota fija y mide unos 80 px con su separación: sin esto, saltar
   desde el menú deja el titular de la sección debajo de ella. */
section[id],main[id]{scroll-margin-top:clamp(84px,11vh,104px);}

/* ---------- tipografía ---------- */

.titular{
  font-family:"Familjen Grotesk","Hanken Grotesk",sans-serif;
  /* Peso 600 y MAYÚSCULAS. El diagnóstico era «muy elegante y poco punchy»,
     y la causa no era la tipografía: era el peso y la caja. Familjen a 400 en
     caja baja es refinada; a 600 en mayúsculas pega como una condensada de
     cartel y conserva su carácter, que es lo que conversa con el logotipo
     pintado a mano. Ni una fuente nueva que descargar. */
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(2.52rem,5.52vw,4.68rem);
  /* En mayúsculas no hay descendentes, así que el interlineado se cierra de
     1,02 a 0,94 sin que las líneas se toquen. Y el interletrado se afloja un
     punto: a peso 600 el trazo engorda y a -0,022em las letras se pegaban. */
  line-height:.94;
  letter-spacing:-0.018em;
  margin:0;
  text-wrap:balance;
  /* Red de seguridad para el espaciado aumentado (WCAG 1.4.12): con la hoja
     de espaciado, «VENEZUELA,» llegaba a 377 px en una pantalla de 320 y la
     portada la recortaba. Sólo parte una palabra si NO cabe entera; con el
     espaciado normal no cambia ningún corte. Sin guiones automáticos, que
     con `balance` reharían los cortes de todos los titulares. */
  overflow-wrap:break-word;
  text-align:center;
  color:var(--texto);
}
.titular--claro{color:var(--crema-suave);}
/* Y lo mismo dentro de las palabras sueltas del titular animado. El guion las
   parte en `span.palabra` inline-block, y un inline-block mide como mínimo su
   palabra entera: el `overflow-wrap` del titular no llegaba dentro. Con el
   tope al ancho del renglón, la palabra que no cabe se parte ahí. Con el
   espaciado normal ninguna llega al tope y no cambia nada. Va fuera del
   bloque de movimiento a propósito: no toca tiempos ni curvas. */
.palabra{max-width:100%;}


/* ---------- botones ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:"Hanken Grotesk",sans-serif;
  /* Subido de .92 a 1.04rem. Con la escala nueva del sitio, un botón a
     14,7 px se leía como una nota al pie al lado de un cuerpo de 20. */
  font-size:1.04rem;
  font-weight:500;
  letter-spacing:.005em;
  padding:14px 27px;
  border-radius:100px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  background:var(--acento);
  color:var(--tinta);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{background:var(--acento-vivo);transform:translateY(-1px);}
.btn svg{flex:none;transition:transform .35s var(--ease);}
.btn:hover svg{transform:translate(2px,-2px);}

.btn--full{width:100%;justify-content:center;padding:17px 26px;}


/* ---------- marcador de foto pendiente ---------- */
/* El marcador vive siempre en el fondo del contenedor; la imagen real
   se sitúa encima y lo tapa por completo en cuanto existe el archivo.
   Así no depende de JavaScript ni de que la imagen llegue a fallar. */

.hero__media,
.somos__foto,
.viaje__foto,
.paisajes__foto{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 25% 20%, #33372F 0%, transparent 62%),
    radial-gradient(100% 90% at 82% 88%, #14161A 0%, transparent 58%),
    linear-gradient(158deg, #262A28 0%, #0F1110 100%);
}
/* La trama del hueco pendiente es la misma raya diagonal que ya usan la
   portada y las fotos del relato. Antes era el trazo de brocha de --grano
   estirado a la caja entera, y a esa escala no se leía como textura sino
   como una mancha oscura con forma de charco en medio del hueco —se veía en
   las cuatro fotos de testimonios y en las cartas sin foto—. Tres marcadores
   distintos para lo mismo pasan a ser uno. */
.hero__media::before,
.somos__foto::before,
.viaje__foto::before,
.paisajes__foto::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:repeating-linear-gradient(135deg,
    rgba(251,248,240,.035) 0 14px, rgba(251,248,240,.012) 14px 28px);
  pointer-events:none;
}
/* En las cartas el pie degradado tapa la esquina de abajo, donde va la
   etiqueta del hueco: sube a la de arriba. */
.carta__foto.sin-foto::after{top:16px;bottom:auto;}
/* El marcador de hueco pendiente SÓLO cuando no hay imagen. Va con la clase
   que pone el JS al retirar la rota, no por defecto: el ::after es el último
   hijo en orden de árbol, así que con el mismo z-index se pintaba ENCIMA de
   la foto cargada y la etiqueta se veía sobre las fotos oscuras. */
.hero__media.sin-foto::after,
.somos__foto.sin-foto::after,
.viaje__foto.sin-foto::after,
.paisajes__foto.sin-foto::after{
  content:attr(data-cap);
  /* Texto alternativo vacío: la etiqueta del hueco se ve, pero el lector de
     pantalla no la lee («Falta foto · Choroní» en mitad del contenido). Donde
     el navegador no entienda la sintaxis, ignora esta línea y vale la de
     arriba. */
  content:attr(data-cap) / "";
  position:absolute;z-index:0;
  left:16px;bottom:14px;
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(243,239,227,.45);
  pointer-events:none;
}
/* Si el archivo aún no existe, el navegador pinta el texto alternativo
   encima del marcador. Transparente evita ese destello sin tocar el alt,
   que sigue ahí para los lectores de pantalla. */
.hero__media img,
.somos__foto img,
.viaje__foto img,
.paisajes__foto img{color:transparent;}

.hero__media > *,
.somos__foto > *,
.viaje__foto > *{position:relative;z-index:1;}

/* =========================================================
   MARCO DE REVISTA
   ========================================================= */

/* El marco es un color macizo con un hueco redondeado recortado en medio.
   La sombra de gran radio pinta todo lo que queda FUERA del rectángulo
   redondeado, así que las esquinas exteriores llegan rectas hasta el borde
   —el color se ve entero— y lo único curvo es el hueco.
   Vive DENTRO del hero y lo recorta el overflow de éste: al bajar, el marco
   se acaba con el hero en vez de seguir al lector. */
.marco{
  position:absolute;
  inset:var(--marco);
  z-index:5;
  pointer-events:none;
  border-radius:var(--radio-hero);
  box-shadow:0 0 0 100vmax var(--marco-color);
}

/* =========================================================
   NAV
   ========================================================= */

/* Píldora compacta y centrada: ocupa lo que miden sus piezas,
   no el ancho de la página. */
.nav{
  position:fixed;
  top:calc(var(--marco) + clamp(12px,1.8vh,22px));
  left:50%;
  transform:translateX(-50%);
  z-index:80;
  width:auto;
  max-width:calc(100% - var(--marco)*2 - 24px);
  display:flex;
  align-items:center;
  gap:4px;
  padding:7px 7px 7px 19px;
  border-radius:100px;
  /* CRISTAL. El tinte al 40 % y el desenfoque a 28 px: se reconoce lo que
     pasa por detrás sin que compita. El filo claro arriba y la sombra abajo
     son lo que hace que se lea como una lámina con grosor.
     Probado también al 18 %: más cristal, pero la marca caía a 3,4:1 sobre el
     cielo pálido del póster y las barras del menú hacían falta un disco
     propio para verse. A 40 se sostiene solo. */
  background:rgba(14,16,15,.40);
  backdrop-filter:blur(28px) saturate(1.7);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid rgba(251,248,240,.22);
  box-shadow:
    0 14px 38px -16px rgba(10,11,10,.55),
    inset 0 1px 0 rgba(251,248,240,.20),
    inset 0 -1px 0 rgba(10,11,10,.22);
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
/* Al pasar el hero ya no hay foto clara detrás y el cristal puede cerrarse
   un poco: gana cuerpo sin perder el material. */
.nav.solido{background:rgba(14,16,15,.62);border-color:rgba(251,248,240,.12);}

.nav__marca{
  display:flex;align-items:center;
  text-decoration:none;color:var(--crema-suave);
  margin-right:14px;
  min-height:44px;
}
/* La sombra propia sostiene el contraste sin tocar el cristal: sobre el
   cielo más claro del hero sube el icono de 3,2 a 4,6. */
.nav__logo{height:29px;width:auto;filter:drop-shadow(0 1px 4px rgba(10,11,10,.75));}
.nav__logo-txt{
  display:none;
  font-family:"Familjen Grotesk",sans-serif;
  font-weight:600;font-size:1.16rem;
  letter-spacing:-0.01em;text-transform:uppercase;
}
.nav__marca.sin-logo .nav__logo{display:none;}
.nav__marca.sin-logo .nav__logo-txt{display:block;}

.nav__burger{
  /* `flex:none`: en la cápsula a 390 se encogía de 44 a 40 px de ancho. */
  flex:none;
  display:flex;
  width:44px;height:44px;
  border:none;background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:100px;
  transition:background .3s var(--ease);
}
.nav__burger:hover{background:rgba(243,239,227,.14);}
.nav__burger span{
  display:block;width:19px;height:1.4px;background:var(--crema-suave);
  box-shadow:0 1px 3px rgba(10,11,10,.75);
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg);}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg);}

/* ---------- menú a pantalla completa ---------- */

.menu{
  position:fixed;inset:0;z-index:55;
  background:var(--tinta-honda);
  flex-direction:column;
  padding:calc(var(--marco) + clamp(88px,13vh,130px))
          calc(var(--marco) + clamp(20px,5vw,72px))
          calc(var(--marco) + clamp(22px,4vh,40px));
}
.menu[hidden]{display:none;}
.menu:not([hidden]){display:flex;}

.menu__cuerpo{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,6vw,90px);
  align-items:center;
}
.menu__foto{
  margin:0;
  aspect-ratio:4/5;
  max-height:min(56vh,520px);
  border-radius:var(--radio-hero);
  overflow:hidden;
  position:relative;
  background:var(--tinta);
}
.menu__foto img{width:100%;height:100%;object-fit:cover;}

.menu__nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.menu__nav a{
  font-family:"Familjen Grotesk",sans-serif;
  font-size:clamp(1.9rem,5vw,3.6rem);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-0.025em;
  color:var(--crema-suave);
  text-decoration:none;
  padding:6px 0;
  transition:color .3s var(--ease), transform .4s var(--ease);
}
/* El CTA queda fuera: es un <a> dentro de .menu__nav, así que sin el :not()
   este selector (0,2,1) le gana al suyo (0,2,0) y al pasar por encima se
   quedaba con la letra verde sobre el fondo verde. */
.menu__nav a:not(.menu__cta):hover{color:var(--acento);transform:translateX(10px);}
.menu__nav .menu__cta{
  margin-top:18px;
  font-size:clamp(1rem,1.5vw,1.15rem);
  font-family:"Hanken Grotesk",sans-serif;
  letter-spacing:.01em;
  padding:14px 28px;
  border-radius:100px;
  background:var(--acento);
  color:var(--tinta);
  transition:background .3s var(--ease);
}
/* Un solo hover. Había dos reglas y la segunda pasaba la letra a crema sobre
   el lima: 1,9:1, la etiqueta se borraba justo al apuntarla. La letra se queda
   en tinta, como en el resto de botones del sitio (.btn:hover). */
.menu__nav .menu__cta:hover{background:var(--acento-vivo);transform:translateY(-2px);}

.menu__pie{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:22px;
  border-top:1px solid var(--linea-oscura);
  color:rgba(243,239,227,.55);
  font-size:.86rem;
}
.menu__pie a{text-decoration:none;transition:color .3s var(--ease);}
.menu__pie a:hover{color:var(--crema-suave);}

/* ---- apertura ----
   El panel no aparece de golpe: se abre. Primero el fondo cubre la página en
   340 ms —lo que tarda la mano en soltar el botón— y encima sube cada pieza
   con el MISMO gesto de 20 px y la misma curva que el resto del sitio,
   escalonada de 55 en 55 ms. Al cerrar va al doble de rápido y sin escalonar:
   esperar a que se vaya algo que ya no quieres molesta.
   El `pointer-events` se apaga mientras no está abierto porque durante los
   milisegundos de la salida el panel sigue tapando la pantalla entera, y un
   clic perdido ahí es un clic que la persona cree que ha dado. */
.menu{opacity:0;pointer-events:none;}
.menu.abierto{opacity:1;pointer-events:auto;}

@media (prefers-reduced-motion: no-preference){
  .menu{transition:opacity .2s var(--cine);}
  .menu.abierto{transition:opacity .34s var(--cine);}

  /* La especificidad va con `.menu` delante a propósito: `.menu__nav a` ya
     declara su propia transición más abajo en el archivo y sin esto se comía
     la del desvanecido. */
  .menu .menu__foto,
  .menu .menu__nav > *,
  .menu .menu__pie{
    opacity:0;transform:translateY(20px);
    transition:opacity .18s var(--cine), transform .18s var(--cine);
  }
  .menu.abierto .menu__foto,
  .menu.abierto .menu__nav > *,
  .menu.abierto .menu__pie{
    opacity:1;transform:none;
    transition:opacity .6s var(--cine), transform .6s var(--cine);
  }
  .menu.abierto .menu__foto{transition-delay:.1s;}
  .menu.abierto .menu__nav > *:nth-child(1){transition-delay:.12s;}
  .menu.abierto .menu__nav > *:nth-child(2){transition-delay:.175s;}
  .menu.abierto .menu__nav > *:nth-child(3){transition-delay:.23s;}
  .menu.abierto .menu__nav > *:nth-child(4){transition-delay:.285s;}
  .menu.abierto .menu__nav > *:nth-child(5){transition-delay:.34s;}
  .menu.abierto .menu__nav > *:nth-child(6){transition-delay:.395s;}
  .menu.abierto .menu__nav > *:nth-child(7){transition-delay:.45s;}
  .menu.abierto .menu__pie{transition-delay:.5s;}
  /* El desplazamiento a la derecha del enlace apuntado se mantiene: cuando el
     menú está abierto el reposo es `transform:none` y el hover manda. */
  .menu.abierto .menu__nav a:not(.menu__cta):hover{transform:translateX(10px);}
  .menu.abierto .menu__nav .menu__cta:hover{transform:translateY(-2px);}
}

@media (max-width:820px){
  .menu__cuerpo{grid-template-columns:1fr;align-items:start;}
  .menu__foto{display:none;}
  .menu__nav{justify-content:center;height:100%;gap:4px;}
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  /* El hero llega a los bordes de la ventana: el redondeo lo dibuja el
     marco por encima, recortando el hueco. */
  padding:0 calc(var(--marco) + clamp(18px,3.4vw,40px)) calc(var(--marco) + clamp(20px,2.8vw,34px));
  overflow:hidden;
  background:var(--tinta-honda);
}
.hero__media{position:absolute;inset:0;}
/* Cuadro completo: los subtítulos del máster son parte del vídeo y se ven.
   El anclaje inferior garantiza que la franja de subtítulos siga dentro de
   encuadre también en viewports anchos y bajos, donde `cover` recorta alto. */
.hero__video{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
}

/* Tres capas: un velo oliva que ata el metraje a la marca, un charco de
   sombra centrado bajo el bloque de texto, y el degradado vertical que
   asienta la barra superior y el riel inferior. El charco evita tener que
   aplanar toda la imagen para ganar legibilidad. */
.hero__scrim{
  position:absolute;inset:0;
  /* Segunda vuelta: seguía leyéndose oscuro. La capa plana de abajo oscurecía
     TODO el vídeo por igual sin motivo —ni siquiera protegía texto— así que
     desaparece entera. Sólo quedan las dos capas que sí siguen el texto:
     el radial detrás del titular y el lineal que sostiene arriba (nav) y
     abajo (botón y riel). */
  background:
    radial-gradient(112% 68% at 50% 58%, rgba(18,20,7,.38) 0%, rgba(18,20,7,.12) 52%, rgba(18,20,7,0) 80%),
    linear-gradient(180deg, rgba(18,20,7,.34) 0%, rgba(18,20,7,.08) 26%, rgba(18,20,7,.10) 60%, rgba(18,20,7,.55) 100%);
}

/* El padding inferior abre una banda limpia entre la llamada a la acción
   y el riel: es donde caen los subtítulos quemados del vídeo, y así no
   chocan con ningún elemento de la interfaz. */
.hero__cuerpo{
  position:relative;z-index:3;
  text-align:center;
  margin:auto auto 0;
  max-width:min(980px,100%);
  padding-bottom:clamp(78px,13vh,170px);
}
.hero__titulo{
  font-family:"Familjen Grotesk",sans-serif;
  /* El hero es el único titular en CAJA BAJA. En mayúsculas a este cuerpo se
     iba a cuatro líneas en teléfono y se perdía la frase de vista; en caja
     baja respira, y es donde mejor se aprecia el carácter de la letra. */
  font-weight:600;
  text-transform:none;
  font-size:clamp(3.24rem,9.12vw,7.68rem);
  line-height:.96;
  letter-spacing:-0.03em;
  color:var(--crema-suave);
  margin:0;
  text-wrap:balance;
}
.hero__sub{
  margin:22px auto 0;
  max-width:50ch;
  font-size:clamp(1.12rem,1.60vw,1.25rem);
  color:rgba(243,239,227,.85);
}
.hero__cuerpo .btn{margin-top:30px;}

.hero__riel{
  position:relative;z-index:3;
  display:flex;justify-content:center;gap:clamp(20px,4vw,46px);
  flex-wrap:wrap;
  padding-top:20px;
  border-top:1px solid var(--linea-oscura);
  font-size:.83rem;
  color:rgba(243,239,227,.78);
}
.hero__riel span{display:inline-flex;align-items:center;gap:9px;}

/* ---------- PAUSA DEL MOVIMIENTO ----------
   Tres vídeos en bucle, un relevo de fotos cada 2 s, el sello que gira y el
   paso de Waki: movimiento de más de 5 s que no se detiene solo. Un único
   estado para toda la página —pausar en un sitio pausa todo— y un botón allí
   donde se ve lo que se mueve, como los controles de un reproductor. No
   grita: en el riel es un elemento más del riel, con su letra y su color; en
   las fotos, una cápsula de cristal del mismo material que el nav.
   El nombre no cambia al pulsar («Pausar movimiento»): lo que cambia es
   `aria-pressed` y el icono, que pasa de dos barras a un triángulo. */
.pausa{
  appearance:none;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;color:inherit;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.pausa__icono{width:15px;height:15px;flex:none;}
.pausa__icono path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.pausa__icono .pausa__play{display:none;fill:currentColor;stroke-width:1.2;}
.pausa[aria-pressed="true"] .pausa__barras{display:none;}
.pausa[aria-pressed="true"] .pausa__play{display:inline;}
.pausa__txt{font-size:inherit;}

/* En el riel: 44 px de alto sin que el riel crezca —el margen negativo se
   come lo que sobra por encima y por debajo del renglón—. */
.pausa--riel{min-height:44px;margin:-12px 0;padding:0 2px;}
.pausa--riel:hover{color:var(--crema-suave);}
/* En teléfono el riel se parte y el texto lo empujaba a una tercera línea:
   se queda el icono, al lado de «@wakamayatrips». El nombre sigue ahí para
   el lector de pantalla. */
@media (max-width:620px){
  .pausa--riel{min-width:44px;justify-content:center;}
}

/* Sobre foto: tinta al 55 % y no al 40 % del nav, porque el icono tiene que
   dar 3:1 también sobre una foto blanca (con blanco detrás el fondo compuesto
   es #7A7B7A y crema da 4,1:1). 36 px a la vista y 44 pulsables. */
.pausa--foto{
  position:absolute;z-index:3;
  width:36px;height:36px;justify-content:center;
  border-radius:100px;
  color:var(--crema-suave);
  background:rgba(14,16,15,.55);
  border:1px solid rgba(251,248,240,.22);
  backdrop-filter:blur(12px) saturate(1.5);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);
}
.pausa--foto::before{content:"";position:absolute;inset:-5px;}
.pausa--foto:hover{background:rgba(14,16,15,.78);}
.pausa--foto .pausa__icono{width:14px;height:14px;}
.somos__foto .pausa--foto{right:clamp(12px,1.4vw,18px);bottom:clamp(12px,1.4vw,18px);}
.porque__foto .pausa--foto{right:10px;top:10px;}

/* El texto de los botones sobre foto no se ve, pero da el nombre. Y el del
   riel, igual en teléfono. */
.pausa--foto .pausa__txt{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
@media (max-width:620px){
  .pausa--riel .pausa__txt{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
}

/* Lo que no es vídeo ni relevo se para desde aquí. */
.sin-movimiento .sello,
.sin-movimiento .waki img{animation-play-state:paused;}

/* Con movimiento reducido no se mueve nada: el botón sobra. */
@media (prefers-reduced-motion: reduce){
  .pausa{display:none;}
}

/* artefactos analógicos */

.permiso{
  position:absolute;z-index:3;
  top:calc(var(--marco) + clamp(80px,12vh,124px));left:calc(var(--marco) + clamp(14px,3vw,40px));
  width:216px;
  padding:12px 14px 10px;
  border:1px solid rgba(243,239,227,.34);
  border-radius:3px;
  background:rgba(14,16,15,.24);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  color:rgba(243,239,227,.78);
 
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.permiso__cab{
  display:flex;justify-content:space-between;
  padding-bottom:8px;margin-bottom:9px;
  border-bottom:1px dashed rgba(243,239,227,.3);
}
.permiso__cuerpo{display:flex;gap:16px;}
.permiso__cuerpo div{display:flex;flex-direction:column;gap:3px;}
.permiso__cuerpo small{font-size:.52rem;opacity:.62;white-space:nowrap;}
.permiso__cuerpo b{
  font-size:.68rem;font-weight:500;letter-spacing:.05em;
  color:rgba(243,239,227,.94);white-space:nowrap;
}
.permiso__pie{
  margin-top:10px;padding-top:8px;
  border-top:1px dashed rgba(243,239,227,.3);
  font-size:.55rem;letter-spacing:.02em;opacity:.7;text-transform:none;
  line-height:1.35;
}

.sello{
  position:absolute;z-index:3;
  right:calc(var(--marco) + clamp(14px,3vw,42px));
  top:calc(var(--marco) + clamp(84px,14vh,142px));
  width:clamp(96px,10vw,132px);
  /* Al 42% daba 3,71:1 sobre el vídeo. Es decorativo y va aria-hidden,
     pero se lee en pantalla, así que sube hasta pasar AA. La sombra es por
     dónde cae: encima del cielo, que es la zona más clara del plano, y sin
     ella el crema desaparecía. */
  color:rgba(243,239,227,.62);
  filter:drop-shadow(0 1px 3px rgba(14,16,15,.55));
  font-family:"Hanken Grotesk",sans-serif;
  animation:girar 60s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg);}}

@media (max-width:900px){
  .permiso{display:none;}
  .sello{top:auto;bottom:clamp(96px,16vh,150px);right:20px;width:78px;}
}

/* El máster actual lleva un rótulo inglés quemado en su borde inferior.
   En móvil ampliamos el encuadre desde arriba para que no compita con la
   llamada a la acción ni con el riel; el vídeo conserva su fotografía. */
@media (max-width:767px){
  .hero__video{transform:scale(1.18);transform-origin:center top;}
}

/* =========================================================
   INTRO
   ========================================================= */

/* =========================================================
   QUIÉNES SOMOS
   Comparte el verde del marco del hero: no hay corte de color,
   la banda del encuadre continúa y se convierte en la sección.
   ========================================================= */

.somos{
  padding:clamp(70px,8vw,132px) 0;
  background:var(--marco-color);
  color:var(--crema-suave);
}
/* Sección más ancha que el resto de la página y con un canal grande entre
   las dos columnas: el aire horizontal es lo que la hace respirar.
   Las columnas se estiran a la misma altura para que el cuño pueda caer
   al fondo del texto y cerrar la composición en diagonal. */
.somos .contenedor{max-width:1400px;}
.somos__grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(40px,14vw,210px);
  align-items:stretch;
}
/* Una columna hasta 1000: justo por encima de 900 las dos columnas salían a
   39ch, peor que la única columna de debajo. El corte va donde las dos caben
   sin estrangular el texto. */
@media (max-width:1000px){
  .somos__grid{grid-template-columns:1fr;gap:38px;}
}
/* En portátil el canalón de 14vw se come 143 px de los 942 disponibles y deja
   la columna de texto en 36 caracteres por línea: MENOS que a 768, donde va a
   una columna y llega a 62. Que la medida empeore al crecer la pantalla es la
   señal de que manda el hueco y no el texto. Aquí el hueco se acota y las dos
   columnas se reparten por igual: 45ch a 1024 y 52ch a 1180. */
@media (min-width:1001px) and (max-width:1200px){
  .somos__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(36px,5vw,64px);
  }
}

.somos__texto{
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
  padding:clamp(4px,1.4vw,20px) 0;
}
/* Centrar sólo el H2 lo dejaba flotando sobre una columna alineada a la
   izquierda, que es peor que no centrarlo. Se centra la columna entera —y
   con ella la caja del titular, que si no encoge al texto y no se mueve—,
   salvo el párrafo largo: su BLOQUE va centrado, pero sus líneas siguen
   alineadas a la izquierda. Cuatro líneas con el canto izquierdo dentado se
   leen peor, y ese es el único sitio del bloque donde hay prosa de verdad. */
.somos__texto{align-items:center;text-align:center;}
.somos__texto > p:not([class]){text-align:left;margin-left:auto;margin-right:auto;}
.somos .titular{
  font-size:clamp(3.12rem,7.44vw,6.00rem);
  color:var(--crema-suave);
  line-height:.96;
}
/* Selector con la especificidad suficiente: `.somos__texto p` (0,1,1)
   le ganaba a `.somos__lead` (0,1,0) y anulaba su tamaño. */
.somos__texto .somos__lead{
  font-family:"Familjen Grotesk",sans-serif;
  font-size:clamp(1.41rem,2.62vw,1.98rem);
  line-height:1.36;
  letter-spacing:-0.012em;
  max-width:30ch;
  color:var(--crema-suave);
}
.somos__texto p{
  max-width:50ch;
  color:rgba(243,239,227,.9);
  font-size:clamp(1.21rem,1.40vw,1.32rem);
  line-height:1.62;
}
/* La frase de cierre va con el peso del texto principal: es el remate. */
.somos__cierre{color:var(--crema-suave) !important;font-weight:500;}
.somos__texto .btn{margin-top:6px;}

/* Firma del fundador: la sección se lee como una carta firmada. */
.firma{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  margin-top:24px;padding-top:22px;
  border-top:1px solid rgba(243,239,227,.22);
  width:min(100%,340px);
}
.firma__nombre{
  font-family:"Sacramento",cursive;
  font-size:clamp(2.1rem,3.4vw,2.9rem);
  line-height:1.05;
  color:var(--crema-suave);
}
.firma__ig{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;
  font-size:.86rem;text-decoration:none;
  color:rgba(243,239,227,.72);
  transition:color .3s var(--ease);
}
.firma__ig:hover{color:var(--crema-suave);}

/* Cuño de pasaporte: artefacto analógico, no relleno decorativo.
   `margin-top:auto` lo empuja al fondo de la columna, que es lo que abre
   el hueco entre la firma y él y compone la diagonal. */
.cuno{
  width:clamp(170px,16vw,224px);
  height:auto;
  color:var(--crema-suave);
  opacity:.15;
 
  margin-top:auto;
  padding-top:34px;
}
@media (max-width:900px){
  .cuno{margin-top:24px;padding-top:0;}
}

/* Foto grande con relevo cada 2 s entre las tomas con gente. */
.somos__foto{
  margin:0;
  /* `start` evita que la fila la estire: con aspect-ratio, estirarla en
     alto le recalcula el ancho y se sale de su columna. Así el ancho lo
     manda la rejilla y la foto define el alto de la fila. */
  align-self:start;
  aspect-ratio:4/5;
  border-radius:var(--radio-hero);
  overflow:hidden;
  position:relative;
  background:var(--tinta);
}
.somos__foto img,
.somos__foto video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity .9s var(--ease);
}
.somos__foto .activa{opacity:1;}

@media (prefers-reduced-motion: reduce){
  /* Sin relevo: se queda la primera toma y el clip no llega a cargarse. */
  .somos__foto img,
  .somos__foto video{transition:none;}
}

/* =========================================================
   SECCIONES GENÉRICAS
   ========================================================= */

.seccion__cab{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,1.8vw,22px);
  text-align:center;
  margin-bottom:clamp(34px,5vw,60px);
}
.seccion__cab p{color:var(--texto-tenue);max-width:52ch;margin:0;}

/* =========================================================
   3 · ¿POR QUÉ VENEZUELA?
   Responde la pregunta enseñando, no argumentando. Cinco paisajes que no
   se parecen en nada, visibles A LA VEZ: es la simultaneidad la que provoca
   el «¿todo esto es el mismo país?», no una secuencia.
   Los tres datos van como TEXTO SOBRE LA TINTA, sin contenedor. La versión
   anterior era una rejilla de seis tarjetas y ahí estaba el problema: con
   tarjeta, un argumento se lee a producto.
   ========================================================= */
/* Tinta HONDA y no tinta: «Somos de allá» va justo antes y también es
   oscuro. Un peldaño más abajo, más la composición completamente distinta
   —allí un relato, aquí un mosaico de fotos—, marcan el corte sin tener que
   meter un claro entre medias que rompería el golpe. */
.porque{
  background:var(--tinta-honda);
  color:var(--crema-suave);
  padding:clamp(64px,8vw,116px) 0 clamp(70px,8.5vw,126px);
}
.porque .titular{color:var(--crema-suave);}
/* Mismo ancho que «Somos de allá»: el collage gana aire horizontal y se
   lee más apaisado sin tocar ninguna pieza. */
.porque .contenedor{max-width:1400px;}
/* Sólo el titular: la bajada se quitó porque repetía lo que el propio
   collage enseña. */
.porque__cab{margin-bottom:clamp(30px,4vw,56px);}

/* TRES BANDAS, no una retícula libre. Cada foto va en un hueco de SU
   orientación: antes había dos verticales metidas en huecos apaisados y
   perdían el 39 % y el 43 % del alto — eso es lo que hacía que el collage
   se leyera a recortes sueltos y no a composición.
   El módulo: una VERTICAL (3:4) mide lo mismo que una HORIZONTAL (3:2) más
   el texto que la acompaña. De ahí sale todo lo demás. */
.porque__lienzo{
  --hueco:clamp(11px,1.2vw,18px);
  display:flex;flex-direction:column;
  gap:var(--hueco);
}
/* TRES COLUMNAS IGUALES en todas las bandas. Es lo que ordena el collage:
   con la misma división en cada banda, los cantos verticales se alinean de
   arriba abajo de la sección. Antes cada banda inventaba la suya —tres
   iguales una, 7fr/5fr la otra— y ahí estaba el desorden. */
.pz-banda{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--hueco);
  align-items:stretch;
}
/* Dentro de una columna hay dos opciones y sólo dos: una VERTICAL entera, o
   un TEXTO con su HORIZONTAL debajo. Las dos miden lo mismo, así que todos
   los cantos de abajo cuadran sin cuentas. */
.pz-col{display:flex;flex-direction:column;gap:var(--hueco);min-width:0;}
.pz-col > .porque__foto{flex:none;}
.pz-col > .porque__dato{flex:1;min-height:0;}
/* TODOS los textos se centran en su celda. Pegados al canto superior dejaban
   el aire entero debajo y el bloque se leía descolgado; centrado, el aire se
   reparte y el texto ocupa su cuadro. */
.porque__dato{align-items:center;}
/* El cierre es el único texto que NO tiene foto debajo con la que alinear
   su canto: vive solo entre dos verticales. Su párrafo mide 257 de los 331
   de la celda, así que pegado a la izquierda quedaba descentrado respecto
   a su hueco. Se centra el BLOQUE; las líneas siguen alineadas a la
   izquierda, que es como se lee. */
.pz-solos{justify-content:center;}

/* El vídeo a fila propia y a todo el ancho: es la única pieza en movimiento
   y en 16:9 entero se lee como plano, no como celda de una retícula. */
.pz-ancho{width:100%;}

.pz-vert {aspect-ratio:3/4;}
.pz-horiz{aspect-ratio:3/2;}
.pz-video{aspect-ratio:16/9;}
/* Todas las horizontales comparten proporción para que sus cantos
   superiores alineen entre columnas, no sólo los de abajo. Al caimán, que es
   4:3 nativo, le cuesta un 11 % de alto: es un sujeto centrado y lo aguanta;
   la alineación vale más que ese 11 %. */

.porque__foto{
  position:relative;margin:0;
  border-radius:clamp(9px,1vw,14px);
  overflow:hidden;
}
.porque__foto img,
.porque__foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* El vídeo del Roraima es 9:16 en un hueco 3:4: pierde un cuarto del alto.
   Se sube el encuadre, que abajo hay botas y arriba cielo. */
.pz-roraima video{object-position:50% 62%;}

/* Con sombra de texto no bastaba: sobre el turquesa de Los Roques la
   etiqueta se perdía. Velo a lo ancho del pie, no píldora. */
.porque__foto figcaption{
  position:absolute;z-index:2;
  left:0;right:0;bottom:0;
  padding:clamp(26px,3vw,44px) clamp(11px,1.1vw,17px) clamp(9px,.9vw,14px);
  background:linear-gradient(180deg,rgba(14,16,15,0),rgba(14,16,15,.74));
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(251,248,240,.95);
}

/* Las razones van a escala de titular y llenan su celda: son el argumento de
   la sección, no pies de foto.
   OJO con la medida: `max-width` en `ch` escala con el cuerpo, así que subir
   el tamaño NO añade líneas —sólo alto de línea—. Para llenar una celda alta
   hay que ESTRECHAR la medida. */
.porque__dato{display:flex;padding:0 clamp(2px,.6vw,10px);}
.porque__dato p{
  margin:0;max-width:24ch;
  font-family:"Familjen Grotesk",sans-serif;
  font-size:clamp(1.39rem,2.34vw,2.28rem);
  line-height:1.3;letter-spacing:-0.018em;
  color:rgba(243,239,227,.72);
  text-wrap:pretty;
}
.porque__dato strong{color:var(--crema-suave);font-weight:500;}
/* Cada texto lleva la medida que llena SU celda, y la celda depende de la
   proporción de la foto que tiene debajo: el vídeo 16:9 es más bajo que una
   foto 3:2, así que a su texto le toca una columna más estrecha. */
.pz-aves p   {max-width:24ch;}
.pz-pueblos p{max-width:22ch;}
.pz-solos p  {max-width:20ch;}

@media (max-width:860px){
  /* UNA columna. Se probó a plegar a dos y siempre quedaba un hueco: las dos
     bandas no tienen la misma forma de hijos —una lleva dos columnas y una
     vertical, la otra dos verticales y un texto—, así que cualquier regla
     genérica dejaba una celda vacía en alguna.
     La vertical se limita por ALTO y el ancho lo deriva la proporción. OJO:
     con `max-height` y márgenes automáticos, sin ancho explícito la caja
     colapsaba a 0×0 — hay que fijar el alto, no el máximo. */
  .pz-banda{grid-template-columns:1fr;}
  /* En teléfono la vertical va a ANCHO COMPLETO como el resto —si no, queda
     más estrecha y desalinea el canto izquierdo de la columna—. El tope por
     alto sólo entra en tablet, donde a ancho completo mediría 875 px. */
  .pz-vert{
    height:min(58vh, 134vw);
    width:auto;max-width:100%;
    margin-left:auto;margin-right:auto;
  }
  /* RITMO: apretado dentro de un grupo —texto con SU foto— y generoso entre
     grupos. Con el mismo hueco en todas partes, las nueve piezas se leían
     como una lista suelta en vez de como cuatro ideas. */
  .porque__lienzo{gap:clamp(30px,7vw,44px);}
  .pz-banda{gap:clamp(30px,7vw,44px);}
  .pz-col{flex-direction:column;gap:clamp(9px,2.2vw,13px);}
  .pz-col > .porque__foto{flex:none;}
  .pz-col > .porque__dato{flex:none;}
  /* En estrecho el texto tenía 19,5 px al lado de fotos de 460: se leía a pie
     de foto y no a argumento. */
  .porque__dato{padding:0;}
  .porque__dato p{max-width:34ch;font-size:clamp(1.53rem,5.24vw,1.82rem);}
}
@media (max-width:560px){
  /* En teléfono no hace falta tope: a ancho completo la vertical mide 461 px
     y cabe. Y con `height` fijo más `max-width` la proporción se rompía un
     6 % —346×490 en vez de 346×461—, así que aquí manda el ancho. */
  .pz-vert{height:auto;width:100%;}
}
@media (min-width:561px) and (max-width:860px){
  /* TABLET. En una sola columna la vertical no cabe a ancho completo (a 800 px
     mediría 981 de alto), y limitándola por alto quedaba centrada a 392 frente
     a las horizontales de 736: el canto izquierdo volvía a bailar. A dos
     columnas cada pieza conserva su proporción Y su canto.
     `display:contents` disuelve la columna intermedia para poder colocar el
     texto y su foto en celdas distintas de la MISMA retícula. */
  .pz-banda{grid-template-columns:1fr 1fr;gap:var(--hueco);}
  .porque__lienzo{gap:clamp(20px,3.4vw,30px);}
  .pz-col{display:contents;}
  .pz-vert{height:auto;width:100%;max-width:none;margin:0;}

  /* Banda 1 · la vertical ocupa la columna derecha de las dos primeras filas.
     La fila del texto es `1fr` para que ABSORBA ella sola el alto que pide la
     vertical; con las dos en `auto` el sobrante se repartía a medias y la
     horizontal perdía un 18 % de recorte. */
  .pz-banda:first-of-type{grid-template-rows:1fr auto auto;}
  .pz-aves   {grid-column:1;grid-row:1;}
  .pz-fauna  {grid-column:1;grid-row:2;}
  .pz-caribe {grid-column:2;grid-row:1 / span 2;}
  .pz-pueblos{grid-column:1;grid-row:3;}
  .pz-warao  {grid-column:2;grid-row:3;}

  /* Banda 2 · las dos verticales riman lado a lado y el texto cierra debajo. */
  .pz-salto  {grid-column:1;grid-row:1;}
  .pz-roraima{grid-column:2;grid-row:1;}
  .pz-solos  {grid-column:1 / -1;grid-row:2;}

  .porque__dato p{max-width:28ch;font-size:clamp(1.37rem,2.96vw,1.71rem);}
}

/* =========================================================
   4 · ¿QUÉ TE APETECE VIVIR? — el carril pegado
   El argumento es la altitud: la lista baja de los 4.978 m del Pico
   Bolívar al nivel del mar. Aquí el orden SÍ informa, y por eso va
   numerada implícitamente en un <ol>.
   El carril mide varias pantallas y la escena se queda pegada dentro:
   así se recorre la escalera sin que la sección se mueva.
   ========================================================= */

.paisajes{
  position:relative;
  /* Blanco puro. Es la sección más luminosa de la página, y además separa
     de «Dónde te llevamos», que va en arena: a #FBFAF7 el corte entre las
     dos secciones no se veía. */
  background:#FFFFFF;
  color:var(--texto);
  padding:0 0 clamp(50px,7vw,90px);
}
/* Dejó de ser un carril. El scroll mandaba qué paisaje estaba activo Y a la
   vez se podía pulsar cada nombre: dos gestos compitiendo por lo mismo, y la
   gente no sabía si estaba eligiendo o simplemente bajando. Ahora manda sólo
   el cursor. La sección mide una pantalla en vez de cuatro y media. */
.paisajes__carril{height:auto;}
.paisajes__escena{
  position:static;
  height:auto;
  min-height:min(100vh,860px);
  display:flex;
  align-items:center;
  overflow:hidden;
  /* Deja pasar la píldora del nav por arriba sin que pise al titular, y le
     da aire a las fotos que cuelgan con top negativo: pegadas al borde se
     leían como si tocaran la sección anterior. */
  padding:clamp(96px,12vh,132px) 0 clamp(30px,5vh,58px);
}
/* Como la escena es flex, el contenedor sería un flex item y se encogería
   a su contenido: las fotos, que van a sus bordes, acabarían encima de los
   nombres. Con el 100% recupera el ancho de la rejilla. */
.paisajes__escena > .contenedor{width:100%;}
/* ---------- Waki ---------- */
/* Camina por el canto superior de la banda, como sobre un cable.
   La posición horizontal la manda el scroll (ver main.js); el balanceo
   vertical es la cadencia del paso. Separar las dos cosas evita que una
   transformación pise a la otra. */

.waki{
  position:absolute;
  top:0;left:0;
  width:clamp(64px,7vw,104px);
  transform:translate(var(--waki-x,0px),-100%);
  z-index:4;
  pointer-events:none;
  line-height:0;
}
.waki img{width:100%;height:auto;display:block;transform-origin:60% 100%;}

@media (prefers-reduced-motion: no-preference){
  .waki img{animation:waki-paso .66s ease-in-out infinite;}
}
@keyframes waki-paso{
  0%,100%{transform:translateY(0) rotate(-1.8deg);}
  50%    {transform:translateY(-6px) rotate(1.8deg);}
}

@media (max-width:620px){
  .waki{width:58px;}
}


/* Las fotos flanquean la lista sin empujarla: van absolutas y la columna
   central manda el ancho. Con la lista centrada, mover una foto no
   descentra los nombres. */
.paisajes__cuerpo{
  position:relative;
  display:flex;
  justify-content:center;
}

.paisajes__lista{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  z-index:2;
  width:min(100%, 880px);
}
.paisajes__fila{
  position:relative;
  text-align:center;
}

.paisajes__nombre{
  appearance:none;background:none;border:none;padding:7px 0;
  min-height:44px;
  font-family:"Familjen Grotesk",sans-serif;
  font-weight:400;
  /* Antes eran palabras sueltas y cabían a 3,6rem. Ahora son frases de
     hasta 33 caracteres: a ese tamaño se salían de la columna y se metían
     debajo de las fotos. El texto dice más, así que puede pesar menos. */
  /* Ahora la frase está sola en la columna —el sitio se fue al pie— así
     que puede ocupar todo el centro. 32 caracteres a 2,8rem miden unos
     720 px, que es lo que queda libre entre las dos fotos. */
  font-size:clamp(1.60rem,3.65vw,3.31rem);
  line-height:1.1;
  letter-spacing:-0.022em;
  /* .62 y no .55: por debajo de 890 px de ancho la frase baja de 24 px,
     deja de contar como texto grande y el umbral de contraste sube de
     3:1 a 4,5:1. Al 55% se quedaba en 3,76 en esa franja. */
  color:rgba(24,26,25,.62);
  cursor:pointer;
  transition:color .5s var(--ease);
  white-space:nowrap;
}
.paisajes__fila.activa .paisajes__nombre{color:var(--texto);}
.paisajes__nombre:hover{color:rgba(24,26,25,.80);}
.paisajes__fila.activa .paisajes__nombre:hover{color:var(--texto);}

/* Pie: la frase del paisaje activo. Altura reservada para que el bloque no
   salte cada vez que cambia el texto. Los textos van en absoluto, así que la
   reserva tiene que cubrir al MÁS ALTO: el sitio en su renglón más tres
   líneas de frase. A 5,2em se reservaban dos y el texto se salía 18-28 px
   por debajo de su caja en todos los anchos de escritorio. */
.paisajes__pie{
  position:relative;
  margin:clamp(22px,3vw,40px) auto 0;
  max-width:52ch;
  min-height:6.8em;
  text-align:center;
  color:var(--texto-tenue);
  font-size:clamp(0.92rem,1.06vw,1.03rem);
  line-height:1.6;
}
/* Los cinco textos viven a la vez en el DOM. Con sólo opacidad 0 seguían en
   el árbol de accesibilidad y el lector leía las cinco descripciones seguidas.
   `visibility` los saca, y cambia al TERMINAR el mismo fundido de .45 s: el
   movimiento no varía. */
.paisajes__texto{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease), visibility 0s linear .45s;
}
/* El sitio encabeza el pie: ancla la frase en el mapa sin robarle sitio a
   la tipografía, y de paso es el único verde de la sección. */
.paisajes__sitio{
  display:block;
  margin-bottom:6px;
  /* .75rem y no .68: a 16,5px de raíz, .68 daba 10,9px y el texto
     funcional por debajo de 11px falla en pantallas densas. */
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acento-calado);
}
.paisajes__texto.activa{opacity:1;visibility:visible;transition:opacity .45s var(--ease), visibility 0s;}

/* Las dos fotos: una arriba a la izquierda, otra abajo a la derecha. */
/* Copias tiradas sobre la mesa, no rectángulos alineados: cada una con su
   inclinación y su sombra. Es lo que separa esto de una retícula. */
/* LAS FOTOS
   Copiado de la mecánica de Here&Away: cada experiencia tiene SU PROPIO par
   de fotos, con posición, tamaño y giro distintos, y todas viven a la vez en
   el DOM apagadas. No son dos marcos fijos donde se cambia la imagen: al
   bajar por la lista las fotos saltan por la composición, y eso es lo que
   hace que la sección parezca viva.
   `left/right: calc(50% - 50vw + …)` cancela el centrado de la rejilla y las
   lleva hasta el borde de la ventana, que es donde estaba el aire sin usar.
   Los desplazamientos verticales no son decorativos: la cuarta frase es la
   más larga, así que su par es el más pequeño y el que más se aparta. */
.paisajes__fotos{position:absolute;inset:0;pointer-events:none;}

.paisajes__foto{
  position:absolute;
  z-index:1;
  margin:0;
  /* Rectas y sin sombra. El ladeado con sombra era idea mía y es lo que
     hacía que la sección se leyera recargada al lado de la referencia: la
     personalidad la ponen las fotos, no el marco. El desorden lo dan ahora
     las proporciones alternas y las posiciones. */
  border-radius:2px;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:opacity .72s var(--cine), visibility 0s linear .72s;
}
.paisajes__foto.activa{
  opacity:1;visibility:visible;
  transition:opacity .72s var(--cine), visibility 0s;
}

/* MÁSCARA QUE SE ABRE. Medido en vivo sobre la referencia mientras cambia:
     0 ms   opacidad 0,216   recorte 3,92 %
    42 ms   opacidad 0,423   recorte 2,89 %
  1066 ms   opacidad 0,481   recorte 2,59 %
   El recorte es exactamente 5% × (1 − opacidad): máscara y opacidad van
   ENCADENADAS, misma duración y misma curva. La versión anterior las tenía
   desincronizadas (0,62 / 0,92 / 1,25 s) y con un zoom encima, y por eso se
   sentía a zoom lento en vez de a revelado. Nada de escala: la referencia
   no la usa y es lo que ensuciaba el efecto. */
.paisajes__foto img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  clip-path:inset(5% 5% 5% 5%);
  transition:clip-path .72s var(--cine);
}
.paisajes__foto.activa img{clip-path:inset(0 0 0 0);}

/* Marcador propio mientras no hay archivo: el general está pensado para
   secciones en tinta y sobre papel se lee como un ladrillo negro. */
.paisajes__foto{
  background:
    radial-gradient(120% 100% at 30% 20%, #E7E3D6 0%, transparent 60%),
    linear-gradient(158deg, #DFDBCD 0%, #CCC8B9 100%);
}
.paisajes__foto.sin-foto::after{color:rgba(24,26,25,.75);}

/* --- posición, tamaño y proporción, un par por experiencia ---
   OJO con los porcentajes: .paisajes__fotos es inset:0 de .paisajes__cuerpo,
   así que top/bottom se resuelven contra la ALTURA DE LA LISTA, no contra la
   escena. Si cambia el tamaño de .paisajes__nombre, la lista cambia de alto y
   las diez fotos se acercan o se alejan del texto en bloque; hay que volver a
   medir. Sólo f1b, f2a, f3b y f5b comparten franja horizontal con alguna
   frase (las filas 1 y 3, que son las más anchas): las otras seis están a
   salvo a cualquier altura.
   Alternan horizontal y vertical, y el lado alto/bajo se invierte de una
   experiencia a otra: ése es el desorden. Los verticales son más estrechos
   y los horizontales más anchos para que pesen parecido. La cuarta frase es
   la más larga, así que su par es el más pequeño y el que más se aparta. */

/* 1 · Caribe — vertical arriba a la izquierda, horizontal abajo a la derecha */
.f1a{left:calc(50% - 50vw + clamp(8px,1.4vw,22px));  top:-52%;    width:clamp(170px,21.5vw,330px); aspect-ratio:3/4;}
.f1b{right:calc(50% - 50vw + clamp(10px,1.8vw,28px));bottom:-70%; width:clamp(214px,29vw,452px); aspect-ratio:3/2;}

/* 2 · Comunidades — se invierte: horizontal abajo-izquierda, vertical arriba-derecha */
.f2a{left:calc(50% - 50vw + clamp(6px,1.1vw,18px));  bottom:-79%; width:clamp(210px,28.5vw,436px); aspect-ratio:4/3;}
.f2b{right:calc(50% - 50vw + clamp(14px,2.4vw,40px));top:-44%;    width:clamp(154px,19.5vw,298px);aspect-ratio:4/5;}

/* 3 · Amazonas — vertical alto a la izquierda, horizontal a media altura */
.f3a{left:calc(50% - 50vw + clamp(12px,2.2vw,36px)); top:-54%;    width:clamp(162px,20.5vw,312px); aspect-ratio:3/4;}
.f3b{right:calc(50% - 50vw + clamp(6px,1vw,16px));   bottom:-73%; width:clamp(222px,30vw,468px); aspect-ratio:3/2;}

/* 4 · Roraima — la frase más larga: par pequeño y muy apartado */
.f4a{left:calc(50% - 50vw + clamp(4px,.8vw,12px));   top:-58%;    width:clamp(180px,23vw,352px); aspect-ratio:4/3;}
.f4b{right:calc(50% - 50vw + clamp(4px,.8vw,12px));  bottom:-58%; width:clamp(138px,17vw,248px);aspect-ratio:3/4;}

/* 5 · Cascada — vertical abajo a la izquierda, horizontal arriba a la derecha */
.f5a{left:calc(50% - 50vw + clamp(10px,1.8vw,30px)); bottom:-78%; width:clamp(150px,18.5vw,272px);aspect-ratio:3/4;}
.f5b{right:calc(50% - 50vw + clamp(8px,1.4vw,24px)); top:-72%;    width:clamp(218px,29.5vw,460px); aspect-ratio:3/2;}

/* EL CENTRO LIBRE ENTRE LAS FOTOS, VUELTO A MEDIR.
   Las frases crecieron hasta 36 caracteres —«Caminar sobre la montaña más
   antigua del planeta»— y a 3,65vw medían 1.080 px en una columna de 880:
   entre 1100 y 1600 la última frase se metía encima de la foto de abajo a
   la derecha y la cuarta rozaba la de arriba a la izquierda. Bajar sólo el
   cuerpo no lo arregla: la lista encoge de alto y, como las fotos cuelgan en
   porcentajes de ese alto, se acercan a las frases (medido: más solapes, no
   menos). Se reparte entre las dos piezas —el cuerpo un 15 % y las fotos un
   25 %— y el par de Roraima, que es el que acompaña a la frase más larga, un
   poco más. Medido de 1081 a 2560: cero solapes con 16 px de holgura. Por
   encima de 1800 el cuerpo ya está en su tope y nada cambia. */
@media (min-width:1081px){
  .paisajes__nombre{font-size:clamp(1.60rem,3.1vw,3.31rem);}
  .f1a,.f3a,.f5a,.f2b{width:clamp(150px,16vw,300px);}
  .f1b,.f3b,.f5b,.f2a{width:clamp(200px,21vw,420px);}
  .f4a{width:clamp(150px,15vw,290px);}
  .f4b{width:clamp(120px,12vw,220px);}
}

@media (min-width:761px) and (max-height:780px){
  .paisajes__escena{padding:clamp(58px,8vh,84px) 0 clamp(16px,3vh,30px);}
      .paisajes__nombre{font-size:clamp(1.25rem,2.28vw,1.88rem);}
  /* 6,8em y no 4,6: el sitio en versalitas va en su propio renglón encima de
     tres líneas de frase, y a 4,6em el texto se salía 28 px por debajo. */
  .paisajes__pie{min-height:6.8em;margin-top:clamp(14px,2vh,24px);font-size:.92rem;}
  .f1a,.f3a,.f5a,.f2b,.f4b{width:clamp(110px,13vw,180px);}
  .f1b,.f3b,.f5b,.f2a{width:clamp(150px,19vw,262px);}
  .f4a{width:clamp(126px,15vw,206px);}
}

@media (max-width:1080px){
  .f1a,.f3a,.f5a,.f2b,.f4b{width:clamp(118px,15.5vw,208px);}
  .f1b,.f3b,.f5b,.f2a{width:clamp(160px,21.5vw,296px);}
  .f4a{width:clamp(134px,17vw,232px);}
  .paisajes__lista{width:min(100%,620px);}
}
/* En estrecho no hay sitio a los lados. Se probó a dejarlas detrás muy
   tenues y quedaban como manchas, con sus etiquetas encima de los nombres.
   Mejor una sola foto, entera y debajo: se ve algo de verdad. */
@media (max-width:760px){
  .paisajes__escena{position:relative;height:auto;min-height:0;padding:var(--paso) 0;}
  .paisajes__carril{height:auto;}
  .paisajes__cuerpo{flex-direction:column;align-items:center;}
  .paisajes__lista{order:1;}
  /* Sólo la segunda de cada par, entera y debajo: a este ancho las dos a los
     lados quedaban como manchas con sus etiquetas encima de los nombres. */
  .paisajes__fotos{position:static;order:2;}
  .f1a,.f2a,.f3a,.f4a,.f5a{display:none;}
  .f1b,.f2b,.f3b,.f4b,.f5b{
    position:relative;
    left:auto;right:auto;top:auto;bottom:auto;
    width:min(84vw,360px);
    margin:clamp(20px,5vw,32px) auto 0;
  }
  .f1b:not(.activa),.f2b:not(.activa),.f3b:not(.activa),
  .f4b:not(.activa),.f5b:not(.activa){position:absolute;}
  .paisajes__nombre{
    font-size:clamp(1.37rem,6.38vw,1.96rem);
    white-space:normal;
  }
}

@media (prefers-reduced-motion: reduce){
  .paisajes__nombre,.paisajes__texto,
  .paisajes__foto,.paisajes__foto img{transition:none;}
  .paisajes__foto img{transform:none;clip-path:none;}
}

/* =========================================================
   5 · ¿A DÓNDE NOS VAMOS?
   Catálogo en abanico. Ocho cartas verticales IGUALES, una al frente y el
   resto apiladas detrás en dos alas. Sustituye a ocho piezas editoriales a
   pantalla completa que hacían la sección larguísima.
   El mecanismo va a mano: la referencia venía en React con GSAP, y aquí no
   hay build ni dependencias. Las posiciones las calcula el JS y las escribe
   como custom properties; el movimiento lo hace una transición de CSS.
   ========================================================= */
.destinos{
  background:var(--tinta);
  color:var(--crema-suave);
  padding:clamp(52px,6.5vw,94px) 0 0;
}
.destinos .titular{color:var(--crema-suave);}
.destinos .seccion__cab{margin-bottom:clamp(30px,4vw,54px);}
.destinos .seccion__cab p{color:rgba(243,239,227,.74);}

.abanico{
  --ala:1;              /* cuánto se abren las alas; lo ajusta el JS */
  --alto:1;             /* idem para el descuelgue vertical */
  padding-bottom:clamp(14px,1.8vw,26px);
}
/* A sangre: las cartas de las puntas tienen que poder salirse por los
   bordes. Encerradas en el contenedor había que encogerlas tanto que el
   abanico dejaba de leerse como una baraja. */
.abanico__mesa{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:clamp(340px,40vw,520px);
  display:flex;align-items:center;justify-content:center;
  /* El desplazamiento vertical sigue siendo del navegador; el horizontal llega
     al guion. Sin esto, en el primer movimiento del dedo el navegador se
     quedaba el gesto (pointercancel) y deslizar no giraba nunca la baraja:
     medido con toque real, antes y después de los cambios de accesibilidad. */
  touch-action:pan-y;
  /* Red de seguridad: `clip` y no `hidden` porque `hidden` crearía un
     contenedor de scroll y se llevaría por delante el desbordamiento
     vertical que el abanico necesita. */
  overflow-x:clip;
}

/* La foto ocupa la carta entera y el texto va ENCIMA, sobre un velo. El
   nombre dentro de la carta libera el alto que antes se llevaba la ficha de
   debajo, y ese alto se lo quedan las cartas. */
.carta{
  position:absolute;
  /* La manda el ALTO de la ventana, no el ancho: con el ancho, en pantallas
     apaisadas la carta se salía por abajo y se comía el mando. */
  height:clamp(340px,74vh,800px);
  aspect-ratio:1/1.62;
  border-radius:clamp(16px,1.9vw,30px);
  overflow:hidden;
  transform-origin:50% 50%;
  transform:
    translate(calc(var(--x,0) * var(--ala) * 1px), calc(var(--y,0) * var(--alto) * 1px))
    rotate(calc(var(--r,0) * 1deg))
    scale(var(--s,1));
  opacity:var(--o,1);
  z-index:var(--z,1);
  transition:transform .58s var(--cine), opacity .4s var(--ease), filter .45s var(--ease);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.32);
  will-change:transform;
  cursor:pointer;
}
.carta__foto{position:absolute;inset:0;margin:0;border-radius:inherit;}
.carta__foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* Velo sólo en el pie, degradado: el texto tiene que leerse sin que la foto
   pierda la parte alta. No es un panel sólido —eso sí se comía la imagen—. */
.carta__pie{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:clamp(56px,7vw,110px) clamp(16px,1.7vw,26px) clamp(16px,1.7vw,24px);
  background:linear-gradient(180deg,rgba(14,16,15,0),rgba(14,16,15,.72) 52%,rgba(14,16,15,.93));
  pointer-events:none;
}
.carta__nombre{
  font-family:"Familjen Grotesk",sans-serif;
  text-transform:uppercase;
  font-size:clamp(1.56rem,2.34vw,2.40rem);
  font-weight:500;line-height:1.02;letter-spacing:-0.026em;margin:0;
  color:var(--crema-suave);
}
/* Sólo la carta del frente enseña el detalle: en las de atrás el nombre basta
   y el resto sería ruido girado. */
.carta__linea,.carta__meta,.carta__cta{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
.carta.frente .carta__linea,
.carta.frente .carta__meta,
.carta.frente .carta__cta{opacity:1;transform:none;}
.carta__linea{
  margin:clamp(8px,.9vw,13px) 0 0;
  color:rgba(243,239,227,.86);
  font-size:clamp(0.96rem,1.12vw,1.12rem);line-height:1.4;
}
.carta__meta{
  margin:clamp(7px,.8vw,11px) 0 0;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(243,239,227,.66);
}
/* La única cosa pulsable que navega. El resto de la carta la trae al frente. */
.carta__cta{
  pointer-events:none;
  display:inline-flex;align-items:center;gap:8px;
  margin-top:clamp(11px,1.2vw,16px);
  padding:11px 16px;min-height:44px;
  border-radius:100px;
  background:var(--acento);color:var(--tinta);
  text-decoration:none;
  font-family:"Familjen Grotesk",sans-serif;
  font-size:clamp(1rem,1.12vw,1.12rem);font-weight:600;letter-spacing:-0.01em;
  transition:background .25s var(--ease);
}
.carta.frente .carta__cta{pointer-events:auto;}
.carta__cta:hover{background:var(--acento-vivo);}
.carta__cta svg{width:14px;height:14px;flex:none;transition:transform .3s var(--ease);}
.carta__cta:hover svg,.carta__cta:focus-visible svg{transform:translate(3px,-3px);}

/* Las de atrás se apagan un punto: es lo que hace que la del frente sea el
   sujeto sin tener que agrandarla más y romper el «todas iguales». */
/* EL BOTÓN QUE TRAE LA CARTA AL FRENTE.
   La carta era un `role="button"` con un titular y un enlace dentro: un control
   dentro de otro, que el lector aplanaba. Ahora la carta es un artículo normal
   y un botón transparente la cubre entera —el mismo sitio que se pulsaba antes,
   el mismo cursor, nada que se vea— sólo mientras está detrás. En la del frente
   desaparece y queda libre «Ver el viaje». */
.carta__traer{
  position:absolute;inset:0;z-index:3;
  margin:0;padding:0;border:0;border-radius:inherit;
  background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.carta.frente .carta__traer{display:none;}
.carta__traer-txt{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* El anillo va HACIA DENTRO: la carta recorta lo que sobresale (overflow
   hidden por el radio), y uno por fuera quedaba cortado.
   DOS BANDAS CONTIGUAS y no una línea sobre un halo: una de tinta casi opaca
   pegada al canto (0-4 px) y una crema justo dentro (4-7 px). La carta es una
   foto que cambia de claro a oscuro a lo largo de su borde; sobre cielo la
   banda oscura es la que se ve, sobre selva la crema. Con una línea crema
   sobre un halo al 55 % no se veía ninguna de las dos: medido con el guion
   del auditor, 2.034 píxeles de 4.489 a 1440 y 494 de 2.763 a 390. */
.abanico .carta__traer:focus-visible{
  outline:3px solid var(--crema-suave);outline-offset:-7px;
  box-shadow:inset 0 0 0 4px rgba(14,16,15,.92);
}
/* Y mientras tiene el foco sube por encima de la pila: la carta vecina del
   frente queda medio tapada por ella, y con ella el anillo. Es un estado de
   foco —como el `filter:none` de abajo—; en reposo el abanico no cambia. */
.carta:not(.frente):focus-within{z-index:20;}

.carta:not(.frente){filter:brightness(.62) saturate(.88);}
.carta:not(.frente):hover{filter:brightness(.82) saturate(.96);}
.carta.frente{cursor:default;}
.carta.frente:hover{
  transform:
    translate(calc(var(--x,0) * var(--ala) * 1px), calc((var(--y,0) * var(--alto) - 10) * 1px))
    rotate(calc(var(--r,0) * 1deg))
    scale(var(--s,1));
}
/* Arrastrando no hay transición: la carta tiene que seguir al dedo. */
.abanico.arrastrando .carta{transition:none;}

/* ---------- mando ---------- */
.abanico__mando{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(14px,1.8vw,26px);
}
.abanico__flecha{
  width:46px;height:46px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:100px;
  border:1.5px solid rgba(243,239,227,.22);
  background:transparent;color:rgba(243,239,227,.72);
  cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.abanico__flecha svg{width:19px;height:19px;}
.abanico__flecha:hover{border-color:var(--acento);color:var(--crema-suave);}
.abanico__puntos{display:flex;align-items:center;gap:2px;}
/* La zona pulsable llega a 44 px de alto aunque el punto visible mida 7: el
   resto del sitio mantiene ese mínimo y no hay razón para bajarlo aquí. */
.abanico__punto{
  width:38px;height:44px;padding:0;flex:none;
  border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.abanico__punto::after{
  content:"";width:7px;height:7px;border-radius:100px;
  background:rgba(243,239,227,.26);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.abanico__punto[aria-current="true"]::after{background:var(--acento-vivo);transform:scale(1.4);}

/* ---------- el remate rojo ---------- */
.remate-rojo{
  background:var(--rojo-hondo);
  padding:clamp(38px,4.6vw,68px) 0;
  margin-top:clamp(34px,4.4vw,64px);
}
.remate-rojo__cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3.4vw,56px);align-items:end;
}
.remate-rojo__titulo{
  font-family:"Familjen Grotesk",sans-serif;
  text-transform:uppercase;
  font-size:clamp(1.92rem,3.84vw,3.36rem);
  font-weight:400;line-height:1.02;letter-spacing:-0.028em;margin:0;
  color:var(--crema-suave);text-wrap:balance;
}
.remate-rojo__linea{
  margin:clamp(12px,1.4vw,18px) 0 0;max-width:52ch;
  color:rgba(251,248,240,.92);
  font-size:clamp(1.12rem,1.29vw,1.25rem);line-height:1.5;
}
/* Sobre el rojo el lima se pelea: la llamada va en crema. */
.remate-rojo__cta{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:clamp(15px,1.8vw,24px);
  padding:12px 0;min-height:44px;
  color:var(--crema-suave);text-decoration:none;
  font-family:"Familjen Grotesk",sans-serif;
  font-size:clamp(1.08rem,1.22vw,1.2rem);font-weight:500;
}
.remate-rojo__cta svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease);}
.remate-rojo__cta:hover svg,.remate-rojo__cta:focus-visible svg{transform:translate(3px,-3px);}

.viaje__waki{position:relative;width:clamp(104px,10.5vw,158px);line-height:0;}
.viaje__waki img{
  width:100%;height:auto;display:block;
  transform:rotate(var(--waki-giro,0deg));
  transform-origin:58% 88%;
  transition:transform .55s var(--ease);
}
.viaje__pupila{
  position:absolute;
  left:60.65%;top:35.58%;
  width:3.5%;aspect-ratio:1;
  border-radius:100px;background:#15170A;
  transform:translate(-50%,-50%) translate(var(--pup-x,0px),var(--pup-y,0px));
  transition:transform .16s ease-out;pointer-events:none;
}
/* La única intervención de Waki en toda la sección. Una palabra. */
.viaje__waki-dice{
  margin:clamp(8px,1vw,14px) 0 0;
  font-family:"Familjen Grotesk",sans-serif;
  font-size:clamp(1.20rem,1.71vw,1.65rem);
  line-height:1.1;text-align:center;color:var(--crema-suave);
}

/* A una columna sólo por debajo de 701 (y ahí el paso de pantalla pequeña lo
   centra todo). El corte estaba en 900 y en el iPad vertical dejaba el texto a
   la izquierda, Waki solo debajo y media banda roja vacía a la derecha. Medido
   de 701 a 900: el texto conserva 513-694 px y Waki sus 104, sin desborde. */
@media (max-width:700px){
  .remate-rojo__cuerpo{grid-template-columns:1fr;justify-items:start;gap:clamp(18px,4vw,30px);}
}
/* Con ocho puntos a 38 px, dos flechas de 46 y los huecos, la fila del mando
   medía 438 px y no cabía en un móvil. Se aprieta el punto —no la flecha—
   manteniendo 24×44 de zona pulsable, que es el mínimo con separación. */
@media (max-width:640px){
  .carta{height:clamp(300px,50vh,470px);}
  .abanico__mando{gap:8px;}
  .abanico__punto{width:26px;}
  .abanico__puntos{gap:0;}
}

/* Sin animación: el abanico deja de tener sentido —depende del movimiento
   para leerse— así que pasa a ser una fila que se desliza a mano. */
@media (prefers-reduced-motion: reduce){
  .carta{transition:none;}
  .abanico__mesa{
    height:auto !important;min-height:0;display:flex;gap:14px;
    overflow-x:auto;padding-bottom:12px;
    scroll-snap-type:x mandatory;
    justify-content:flex-start;perspective:none;
  }
  /* En la fila no hay «carta al frente», así que tampoco hay que apagar
     ninguna: sin esto siete de las ocho salían atenuadas. */
  .carta{position:relative;transform:none;opacity:1;filter:none;flex:none;scroll-snap-align:center;}
  .abanico__mando{display:none;}
  /* Y por lo mismo, todas enseñan su detalle y su enlace: fuera del abanico
     la línea, la ficha y «Ver el viaje» se quedaban a opacidad 0 en diez de
     once cartas, sin nada visible que pulsar. */
  .carta .carta__linea,.carta .carta__meta,.carta .carta__cta{opacity:1;transform:none;pointer-events:auto;}
  .carta__traer{display:none;}
}

/* =========================================================
   TESTIMONIOS
   ========================================================= */

/* En tinta y no en crema honda: venía detrás de «Cómo viajas», que ya es
   crema, y eran dos claros seguidos justo antes del arena de las preguntas.
   Así la cola alterna crema · tinta · arena · tinta. */
.testimonios{
  padding:var(--paso) 0;
  background:var(--tinta);
  color:var(--crema-suave);
}
.testimonios__titulo{
  text-align:center;
  margin-bottom:clamp(40px,6vw,72px);
  color:var(--crema-suave);
}
.testimonios .citas blockquote{border-top-color:rgba(243,239,227,.22);}
.testimonios .citas p{color:rgba(243,239,227,.9);}
.testimonios .citas cite{color:rgba(243,239,227,.6);}
/* Fila desplazable, no rejilla: con cuatro y creciendo, una rejilla de tres
   obligaba a elegir cuáles caben. Se ve que sigue porque la última se corta. */
/* Cuatro cajas fijas, sin carril de scroll: con sólo cuatro testimonios no
   hay nada que descubrir deslizando, y el scroll horizontal escondía la
   mitad sin avisar. Ahora se ven las cuatro de golpe. */
.citas{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(18px,2.4vw,38px);
}
@media (max-width:900px){.citas{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:620px){.citas{grid-template-columns:1fr;}}

.cita{
  margin:0;
  display:flex;flex-direction:column;
}
.cita__estrellas{display:flex;gap:5px;margin-bottom:clamp(12px,1.4vw,18px);}
.cita__estrellas svg{
  width:clamp(14px,1.15vw,17px);height:auto;
  fill:var(--acento-vivo);
}
/* La foto va en 16:10, como la referencia: apaisada y sin marco. */
.cita__foto{
  position:relative;
  aspect-ratio:16/10;
  border-radius:clamp(8px,.9vw,13px);
  overflow:hidden;
  margin:0 0 clamp(14px,1.6vw,22px);
}
.cita__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cita__texto{margin:0;}
.cita__texto p{
  margin:0;
  font-family:"Familjen Grotesk",sans-serif;
  font-weight:400;
  font-size:clamp(1.12rem,1.29vw,1.28rem);
  line-height:1.38;letter-spacing:-0.012em;
  color:rgba(243,239,227,.92);
}
.cita__quien{
  margin-top:clamp(12px,1.4vw,18px);
  font-size:.86rem;
  color:rgba(243,239,227,.62);
}
.cita__destino{color:rgba(243,239,227,.62);}


/* =========================================================
   FAQ
   Titular centrado y rejilla de dos columnas de tarjetas: más ligera
   y más fácil de barrer que la lista de reglas anterior.
   ========================================================= */

.faq{
  padding:var(--paso) 0;
  background:#FFFFFF;
  color:var(--texto);
}
.faq .titular{color:var(--texto);margin-bottom:clamp(20px,2.4vw,30px);}

/* LA PROMESA. Alineada a la izquierda como todos los titulares de sección;
   el puente de abajo va centrado, y ese cambio de eje es lo que marca que
   la sección tiene dos tiempos. */
.resuelto{
  max-width:none;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
/* Titular y promesa van de una tirada: los 36 caracteres del titular ocupan
   903 px a cuerpo completo y la caja da 1.152, así que el salto sobraba. Se
   quita la medida de la promesa —26ch la partía en dos a propósito— y ambos
   conservan su escala; por debajo de unos 520 px ya no caben y parten solos,
   que es lo que tiene que pasar en un teléfono. */
.resuelto__promesa{
  font-family:"Familjen Grotesk",sans-serif;
  font-size:clamp(1.41rem,2.51vw,2.19rem);
  line-height:1.26;letter-spacing:-0.018em;
  max-width:none;margin:0;
  text-wrap:pretty;
}
/* Una tirada, no seis tarjetas: son cinco hechos, no cinco secciones. La
   raya los separa sin encerrarlos. */
.resuelto__lista{
  list-style:none;margin:clamp(26px,3.2vw,44px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.4vw,20px);
  font-size:clamp(1.03rem,1.18vw,1.14rem);
  color:var(--texto-tenue);
}
.resuelto__lista li{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);}
.resuelto__lista li + li::before{
  content:"";width:1px;height:1.1em;background:rgba(24,26,25,.22);flex:none;
}

/* EL PUENTE. Mucho aire encima —cierra un bloque y abre otro— y bastante
   menos debajo, que es donde empieza lo suyo. Sin entradilla ni llamada, el
   hueco de abajo se aprieta: ahora es un rótulo pegado a sus cajas, no un
   bloque con vida propia. */
.faq__cab{
  text-align:center;
  max-width:46ch;
  margin:clamp(58px,7.4vw,104px) auto clamp(20px,2.6vw,34px);
  scroll-margin-top:clamp(84px,11vh,104px);
}
.faq__puente{
  margin:0;
  font-family:"Familjen Grotesk",sans-serif;
  font-weight:500;
  font-size:clamp(1.74rem,3.00vw,2.64rem);
  line-height:1.14;letter-spacing:-0.024em;
  text-wrap:balance;
}

.acordeon{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
  align-items:start;
}
@media (max-width:800px){.acordeon{grid-template-columns:1fr;}}

.acordeon details{
  /* Dentro de una sección blanca la caja cerrada va en crema, como las piezas
     de arriba: blanca sobre blanca sólo la sostenía un filo al 10 %. Al
     abrirse pasa a blanco y se levanta —el cambio de superficie ES el estado. */
  background:var(--crema);
  border:1px solid rgba(24,26,25,.07);
  border-radius:clamp(14px,1.4vw,20px);
  overflow:hidden;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.acordeon details:hover{border-color:rgba(24,26,25,.22);}
.acordeon details[open]{
  background:var(--tarjeta);
  border-color:var(--acento-linea);
  box-shadow:0 18px 38px -24px rgba(24,26,25,.55);
}

.acordeon summary{
  list-style:none;cursor:pointer;
  position:relative;
  padding:clamp(20px,2vw,26px) clamp(52px,4.6vw,64px) clamp(20px,2vw,26px) clamp(18px,1.8vw,26px);
  font-family:"Familjen Grotesk",sans-serif;
  font-weight:400;
  font-size:clamp(1.14rem,1.51vw,1.32rem);
  line-height:1.3;
  letter-spacing:-0.012em;
  transition:color .3s var(--ease);
}
.acordeon summary::-webkit-details-marker{display:none;}
.acordeon summary:hover,
.acordeon details[open] summary{color:var(--acento-calado);}

/* Signo «más» que gira hasta convertirse en aspa al abrir. */
.acordeon summary::before,
.acordeon summary::after{
  content:"";position:absolute;
  right:clamp(18px,1.9vw,26px);
  top:50%;
  width:15px;height:1.6px;
  background:currentColor;
  transition:transform .45s var(--ease);
}
.acordeon summary::before{transform:translateY(-50%);}
.acordeon summary::after{transform:translateY(-50%) rotate(90deg);}
.acordeon details[open] summary::before{transform:translateY(-50%) rotate(45deg);}
.acordeon details[open] summary::after{transform:translateY(-50%) rotate(-45deg);}

.acordeon__cuerpo{
  padding:0 clamp(24px,2.6vw,34px) clamp(22px,2.2vw,28px) clamp(18px,1.8vw,26px);
}
.acordeon__cuerpo p{
  color:var(--arena-tenue);
  font-size:.98rem;
  line-height:1.62;
}

/* =========================================================
   CONTACTO
   ========================================================= */

.contacto{
  padding:var(--paso) 0;
  /* Dejó de ser tinta porque en oscuro y a sangre se leía como pie de página:
     el formulario parecía el cierre administrativo del sitio y no la
     invitación. Ahora es una TARJETA sobre fondo claro. El suelo va en
     crema-hondo y no en crema porque encima está el FAQ en arena (#F6F3EB):
     con crema (#F3EFE3) las dos bandas se tocaban sin escalón. */
  background:#FFFFFF;
  color:var(--texto);
}
.contacto__tarjeta{
  position:relative;                 /* Waki se ancla a la TARJETA, no a la banda */
  /* Verde hondo sobre la sección blanca. El verde de marca es lima y no sirve
     de superficie; éste es su pariente oscuro —misma familia, otra función—,
     y así el lima del botón sigue siendo el acento y no compite con nada.
     No hay tarjeta dentro de tarjeta: ESTA es la tarjeta, y los campos son
     huecos recortados en ella. */
  background:var(--verde-hondo);
  border:none;
  border-radius:clamp(18px,2.2vw,34px);
  padding:clamp(28px,4vw,62px) clamp(22px,4vw,58px);
  box-shadow:0 34px 70px -26px rgba(24,26,25,.34), 0 3px 10px rgba(24,26,25,.06);
  color:var(--crema-suave);
}
.contacto__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(34px,5vw,74px);
  align-items:start;
}
@media (max-width:900px){.contacto__grid{grid-template-columns:1fr;}}
/* El sticky se mide contra la tarjeta, y con padding propio arriba ya no hace
   falta el desplazamiento del pill: basta el canto superior del contenido. */
.contacto__cab{position:sticky;top:118px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:18px;}
@media (max-width:900px){.contacto__cab{position:static;}}
.contacto .titular{color:var(--crema-suave);}
.contacto__cab p{color:rgba(251,248,240,.76);max-width:40ch;}
.contacto__firma{
  font-size:.85rem !important;
  color:rgba(251,248,240,.6) !important;
  padding-top:16px;border-top:1px solid rgba(251,248,240,.16);
}
.contacto__seleccion{
  margin:2px 0 0;padding:11px 13px;
  border-top:1px solid rgba(251,248,240,.2);border-bottom:1px solid rgba(251,248,240,.2);
  color:var(--crema-suave) !important;font-size:.9rem !important;
}

.formulario{display:flex;flex-direction:column;gap:22px;}
/* El cebo se saca del flujo sin usar `display:none`: algunos robots ignoran
   los campos ocultos así, y el objetivo es justo que lo rellenen. */
.cebo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.campo{display:flex;flex-direction:column;gap:8px;border:none;margin:0;padding:0;min-width:0;}
.campo__fila{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
/* Las parejas sólo se apilan por debajo de 360: a 390 cada columna mide 165
   y las etiquetas caben. Apiladas costaban 181 px por pareja en vez de 79;
   dos parejas eran 200 px de más en una pantalla que ya iba justa. */
@media (max-width:359px){.campo__fila{grid-template-columns:1fr;}}

.campo > label,.campo > legend{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(251,248,240,.72);padding:0;
}
/* Sin opacidad propia: al 70 % sobre la del rótulo daba 4,24:1. Heredando
   sólo el color del rótulo da ~7:1; la diferencia la marcan la caja baja y el
   interletrado normal, no un gris. */
.opc{text-transform:none;letter-spacing:0;}

/* Error por campo, en texto. El globo del navegador se desvanece a los pocos
   segundos y dejaba sólo el anillo coral: el color solo no identifica el
   error. Rosa claro sobre el verde hondo: 7,9:1. */
.campo__error{margin:0;font-size:.9rem;line-height:1.4;color:#F8B4A8;}

/* Las parejas de campos alinean etiqueta, campo y error por FILAS compartidas
   (subgrid): si el email lleva error debajo, su pareja no se descoloca, y si
   una etiqueta ocupa dos renglones las dos cajas siguen a la misma altura. */
.campo__fila > .campo{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:8px;align-content:start;}
.campo__fila > .campo > label{align-self:end;}

/* Cada campo es una pastilla de crema recortada en el verde. La raya inferior
   de antes no se veía sobre un fondo oscuro con trama; el hueco relleno sí:
   dice DÓNDE se escribe sin necesidad de un filo. */
.campo input,.campo select,.campo textarea{
  width:100%;
  background:var(--crema-suave);
  border:none;
  border-radius:100px;
  padding:15px 20px;
  font-family:inherit;font-size:1rem;
  color:var(--texto);
  -webkit-appearance:none;appearance:none;
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.campo input::placeholder,.campo textarea::placeholder{color:#6E716B;}
/* Sin filo que engordar, el foco lo marca un anillo por fuera: no mueve ni un
   píxel de la caja y se ve sobre el verde. */
/* 3 px de lima (de 3 a 6 px por fuera), no 2: en una cápsula redondeada el
   anillo de 2 px quedaba justo en el límite del área mínima de indicador de
   foco (medido: 736 píxeles ≥3:1 frente a 784 de referencia en el email a
   390). Mismo grosor que el anillo de la cápsula del nav. */
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--verde-hondo), 0 0 0 6px var(--acento-vivo);
}
/* El desplegable pierde su flecha al quitarle la apariencia nativa: se
   redibuja como parte del sistema, no como resto del navegador. */
.campo select{
  padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23181A19' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 20px center;
  background-size:12px 8px;
  cursor:pointer;
}
.campo select option{background:var(--crema-suave);color:var(--texto);}
/* El área de texto no puede ser una pastilla: con varias líneas, el radio de
   100 px se comería las esquinas del texto. */
.campo textarea{resize:vertical;min-height:112px;border-radius:clamp(16px,1.6vw,24px);}

.fichas{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.ficha{position:relative;}
.ficha input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.ficha span{
  display:block;padding:11px 17px;border-radius:100px;
  border:1px solid rgba(251,248,240,.28);
  font-size:.97rem;cursor:pointer;color:rgba(251,248,240,.9);
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.ficha:hover span{border-color:rgba(251,248,240,.6);}
.ficha input:checked + span{background:var(--acento);border-color:var(--acento);color:var(--tinta);}
.ficha input:focus-visible + span{outline:2px solid var(--rojo);outline-offset:2px;}
/* La excepción crema de la tarjeta no llegaba aquí: el :focus-visible es el
   input invisible y el anillo va en su hermano. Rojo sobre el verde daba 3,01. */
.contacto__tarjeta .ficha input:focus-visible + span{outline-color:var(--crema-suave);}

.formulario__aviso{
  padding:16px 19px;border-radius:clamp(14px,1.4vw,20px);
  background:rgba(251,248,240,.1);
  border:1px solid rgba(251,248,240,.24);
  font-size:.93rem;
}
/* El aviso dice CUÁL de las tres cosas ha pasado, no sólo que ha pasado algo.
   El color acompaña al texto, nunca lo sustituye. */
.formulario__aviso[data-estado="ok"]{border-color:var(--acento);background:rgba(121,168,46,.16);}
.formulario__aviso[data-estado="error"]{border-color:#F08A78;background:rgba(230,59,34,.18);}

/* El globo nativo se desvanece en unos segundos y el campo volvía a parecer
   correcto. La marca se queda hasta que se arregla. */
.formulario.intentado .campo input:invalid,
.formulario.intentado .campo select:invalid,
.formulario.intentado .campo textarea:invalid{
  box-shadow:0 0 0 2px #F08A78;
}
.formulario.intentado .campo input:invalid:focus,
.formulario.intentado .campo select:invalid:focus,
.formulario.intentado .campo textarea:invalid:focus{
  box-shadow:0 0 0 3px var(--verde-hondo), 0 0 0 6px #F08A78;
}
.btn[disabled]{opacity:.6;cursor:progress;}
/* Mientras se envía, el botón NO se deshabilita: deshabilitar el elemento
   enfocado lo echa del foco y quien va con teclado acababa en <body>. Se marca
   con aria-disabled y el guion ignora un segundo envío. */
.btn[aria-disabled="true"]{opacity:.6;cursor:progress;}
.btn[aria-disabled="true"]:hover{background:var(--acento);transform:none;}

/* Vacío no ocupa: ni relleno, ni filo, y se come el hueco de la columna. */
.formulario__aviso:empty{padding:0;border:0;margin-top:-22px;}
.formulario__aviso:focus{outline:none;}
.formulario__aviso:focus-visible{outline:2px solid var(--crema-suave);outline-offset:3px;}

/* =========================================================
   PIE
   ========================================================= */

.pie{
  position:relative;
  overflow:hidden;
  background:var(--tinta-honda);color:var(--crema-suave);
  /* El hueco de arriba es exactamente el alto de la banda de foto: así el
     texto NUNCA se le monta encima y no hay que pelear el contraste contra
     una imagen que cambia de luz con cada ancho de pantalla. */
  --banda:clamp(270px,34vw,500px);
  padding:calc(var(--banda) + clamp(30px,4vw,60px)) 0 30px;
}
.pie__fondo{
  position:absolute;top:0;left:0;right:0;height:var(--banda);
  z-index:0;pointer-events:none;
}
/* La banda alta enseña la mitad del alto de la foto, y desde el 58 % la
   ventana va del 27 % al 78 % de la imagen: cerros enteros, las dos carpas
   completas y el guía. Al 45 % las carpas salían cortadas por abajo. */
.pie__fondo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block;
}
/* El velo no toca la mitad de arriba —el naranja del horizonte es lo que hace
   que la foto valga— y cae entero en el tercio final, hasta empatar con el
   negro del pie. Sin ese empate se ve el canto de la imagen. */
.pie__fondo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(14,16,15,0) 0%,
    rgba(14,16,15,.10) 46%,
    rgba(14,16,15,.66) 76%,
    var(--tinta-honda) 100%);
}
.pie > .contenedor{position:relative;z-index:1;}
.pie__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(26px,4vw,60px);
  padding-bottom:44px;
}
@media (max-width:780px){.pie__grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.pie__grid{grid-template-columns:1fr;}}
.pie__marca{display:flex;align-items:center;gap:14px;}
.pie__waki{width:30px;height:auto;flex:none;}
.pie__logo{height:26px;width:auto;}
.pie__logo-txt{
  display:none;
  font-family:"Familjen Grotesk",sans-serif;
  font-weight:600;font-size:1.3rem;text-transform:uppercase;letter-spacing:-0.01em;
}
.pie.sin-logo .pie__logo{display:none;}
.pie.sin-logo .pie__logo-txt{display:block;}
.pie__lema{margin-top:14px;color:rgba(243,239,227,.6);font-size:.92rem;max-width:30ch;}
.pie b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(243,239,227,.5);font-weight:500;margin-bottom:14px;}
/* Sin gap y con padding: el área tocable de cada enlace llega a 44 px sin
   que el bloque crezca ni cambie el aire entre líneas. */
.pie nav,.pie__grid > div:last-child{display:flex;flex-direction:column;align-items:flex-start;}
.pie a{color:rgba(243,239,227,.82);text-decoration:none;font-size:.94rem;
  display:inline-flex;align-items:center;min-height:44px;
  transition:color .3s var(--ease);}
.pie a:hover{color:var(--acento);}
.pie__legal{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  padding-top:22px;border-top:1px solid var(--linea-oscura);
  font-size:.82rem;color:rgba(243,239,227,.5);
}
.pie__legal a{display:inline-flex;align-items:center;min-height:44px;}

/* =========================================================
   MOVIMIENTO · ENTRADA Y APARICIONES

   Medido sobre sambatrips.com, que es la referencia que pidió el cliente.
   Lo que hace que aquello se sienta de cine no es tener más efectos: es el
   REPARTO EN EL TIEMPO. Cada pieza se mueve poco y deprisa —400 ms, 20 px—
   pero entre una y otra pasan 200 ms largos, y la secuencia entera dura dos
   segundos y pico. Lo contrario de lo que uno hace por instinto, que es
   mover todo a la vez y despacio: eso parece una web lenta, no una película.

   El orden es el del ojo: primero la imagen, luego la barra, luego el
   titular palabra por palabra, y sólo después el texto que hay que leer.

   Tres curvas, cada una con su trabajo:
     --cine       la entrada. Arranca casi recta y frena al final. Es suave
                  sin ser blanda; la exponencial de --ease resulta brusca
                  a 400 ms.
     --simetrica  el titular. Entra y sale igual de despacio, que es lo que
                  hace que el desenfoque se lea como un enfoque de cámara.
     --poso       las apariciones al bajar. Ajustada a un muelle sin rebote
                  (rigidez 50, amortiguación 16): el 90 % del camino en
                  medio segundo y el resto posándose durante otro medio.
                  Ese rastro es el «retraso» que se ve bien y no se explica.
   ========================================================= */

:root{
  --cine:cubic-bezier(.12,.23,.5,1);
  --simetrica:cubic-bezier(.44,0,.56,1);
  --poso:cubic-bezier(.2,.25,.1,1);
}

@media (prefers-reduced-motion: no-preference){

  /* ---- al cargar ---- */

  /* 0 ms · la imagen se posa desde un 10 % más grande. Es lo primero que se
     ve moverse y lo que dura más: un segundo entero. */
  .hero__media,
  .portada__media{animation:posarse 1s var(--cine) both;}

  /* 200 ms · la píldora baja 40 px. */
  .nav{animation:bajar .4s var(--cine) both;animation-delay:.2s;}

  /* 600 ms · el titular, palabra a palabra, saliendo de un desenfoque.
     Sin JavaScript no hay palabras sueltas y entra entero: el mismo gesto,
     una sola vez, en lugar de una página que se queda en blanco. */
  .hero__titulo,
  .portada__titulo{animation:enfocar .6s var(--simetrica) both;animation-delay:.6s;}
  .hero__titulo.partido,
  .portada__titulo.partido{animation:none;}
  .partido .palabra{
    display:inline-block;
    animation:enfocar .6s var(--simetrica) both;   /* el retardo lo pone el guion */
  }

  /* 1100 ms en adelante · ahora sí, lo que hay que leer. */
  .hero__sub,
  .portada__linea{animation:subir .4s var(--cine) both;animation-delay:1.1s;}
  .hero__cuerpo .btn,
  .portada__meta{animation:subir .4s var(--cine) both;animation-delay:1.2s;}
  .miga{animation:asomar .4s var(--cine) both;animation-delay:1.35s;}

  /* 1800 ms · lo menudo del borde inferior, que es adorno y va el último. */
  .hero__riel span{animation:asomar .4s var(--cine) both;}
  .hero__riel span:nth-child(1){animation-delay:1.8s;}
  .hero__riel span:nth-child(2){animation-delay:1.9s;}
  /* El botón de pausa entra con el riel, en el hueco siguiente del mismo
     escalonado de 100 ms. Es una pieza nueva: los dos retardos de arriba no
     cambian. */
  .hero__riel .pausa{animation:asomar .4s var(--cine) both;animation-delay:2s;}

  /* ---- al bajar ----
     La clase la pone el JavaScript, nunca el HTML: si el guion no llega a
     ejecutarse, la página se ve entera en vez de quedarse en blanco
     esperando a un observador que no va a venir. */
  .asoma{opacity:.001;transform:translateY(20px);}
  .asoma.dentro{
    opacity:1;transform:none;
    transition:opacity 1.15s var(--poso), transform 1.15s var(--poso);
  }
}

/* Se sale del 0,001 y no del 0 a propósito, como en la referencia: con
   opacidad cero el navegador puede tirar la capa y recomponerla al empezar,
   y eso se ve como un parpadeo en el primer fotograma. */
@keyframes bajar{
  from{opacity:.001;transform:translateX(-50%) translateY(-40px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}
@keyframes posarse{
  from{opacity:.001;transform:scale(1.1);}
  to{opacity:1;transform:scale(1);}
}
@keyframes subir{
  from{opacity:.001;transform:translateY(21px);}
  to{opacity:1;transform:none;}
}
@keyframes asomar{
  from{opacity:.001;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}
@keyframes enfocar{
  from{opacity:.001;filter:blur(6px);}
  to{opacity:1;filter:blur(0);}
}

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

/* =========================================================
   PASO DE PANTALLA PEQUEÑA
   Va al final y junto, no repartido por secciones, porque es un paso
   TRANSVERSAL: un suelo de cuerpo tipográfico común a ocho componentes
   distintos. Separado, nadie ve que es una sola decisión; y al ir último
   no hay sorpresas de especificidad. Medido a 390, 430, 768 y 1024.
   ========================================================= */

/* 1 · «¿Qué te apetece vivir?» no viaja a pantalla estrecha.
   A 768 ocupa 4,2 pantallas para enseñar dos fotos de 76 y 163 px con el
   70 % del lienzo vacío: el carril pegado necesita ancho para que las fotos
   flanqueen la lista, y por debajo de 900 no lo hay. De 901 arriba —donde
   las fotos pasan de 160 px— se queda como está. */
@media (max-width:900px){
  #apetece{display:none;}
}

/* 2 · SUELO TIPOGRÁFICO EN TELÉFONO
   Las micro-etiquetas se fijaron en rem absolutos y no escalaban: a 390 px
   quedaban entre 10,9 y 13,9. En una pantalla que se sostiene con una mano
   y a medio metro, eso no se lee. */
@media (max-width:620px){
  .carta__meta{font-size:.79rem;letter-spacing:.1em;}      /* 10,9 -> 12,6 */
  .carta__linea{font-size:.95rem;}                          /* 13,8 -> 15,2 */
  .porque__foto figcaption{font-size:.78rem;}               /* 11,2 -> 12,5 */
  .campo > label,.campo > legend{font-size:.8rem;}          /* 11,8 -> 12,8 */
  .pie b{font-size:.8rem;}                                  /* 11,8 -> 12,8 */
  .ficha span{font-size:.97rem;}
  .cita__destino{font-size:.93rem;}                         /* 13,8 -> 14,9 */
  .contacto__firma{font-size:.9rem !important;}             /* 13,6 -> 14,4 */
  .pie__lema{font-size:.98rem;}
  /* Llamadas: la etiqueta de un botón que se pulsa con el pulgar no puede
     medir menos que el texto que lo rodea. */
  /* El botón y la llamada de carta ya no se tocan aquí: la base subió a
     1,04rem y estas reglas —puestas cuando la base era .92— los habrían
     encogido en teléfono, al revés de para lo que estaban. */
  .firma__ig{font-size:.92rem;}
}

/* 7 · EL FORMULARIO, MÁS CORTO EN TELÉFONO.
   Medía 1.770 px —dos pantallas largas— y 411 de ellos eran las nueve fichas
   de destino, que a 346 px de ancho caían de una en una: siete filas para
   nueve palabras. Encogidas entran dos y tres por fila. El resto del recorte
   sale de apretar lo que sobraba: el hueco entre campos, el alto mínimo del
   área de texto y el margen interno de la tarjeta. Ni un campo menos. */
@media (max-width:620px){
  .contacto__tarjeta{padding:clamp(22px,5vw,30px) clamp(16px,4vw,22px);}
  .formulario{gap:16px;}
  .campo__fila{gap:16px;}
  /* Lo que empaqueta más fichas por fila es el margen HORIZONTAL y el
     cuerpo, no el vertical. El vertical se queda en 10 px para que la
     ficha siga midiendo 44 de alto: por debajo deja de ser pulsable con
     el pulgar y ahorraba veinte píxeles en toda la pantalla. */
  .ficha span{padding:11px 13px;font-size:.93rem;}
  .fichas{gap:6px;}
  .campo input,.campo select,.campo textarea{padding:13px 17px;}
  .campo select{padding-right:42px;background-position:right 17px center;}
  .campo textarea{min-height:84px;}
  .contacto__cab{gap:14px;}
  /* La alineación de las parejas la lleva ahora el subgrid de .campo__fila
     (etiqueta, campo y error en filas compartidas). Aquí sólo cambia el
     hueco que se come el aviso vacío, que en teléfono es de 16. */
  .formulario__aviso:empty{margin-top:-16px;}
  /* «En grupo, con fecha fija» no entra en media columna de 149 px: se
     cortaba a «En grupo, co». La pareja del desplegable se apila; las otras
     dos, que llevan valores cortos, siguen a la par. */
  .campo__fila--ancha{grid-template-columns:1fr;}
}

/* 6 · El mando del abanico se parte en dos filas en pantallas muy estrechas.
   Con nueve destinos la fila mide 2 flechas de 46 + 9 puntos de 26 + huecos
   = 342 px, y a 320 el contenedor sólo da 276: se salía 11 px por cada lado
   —el único desborde horizontal real de toda la página—. Apretar más el
   punto lo dejaría por debajo de un objetivo pulsable, así que los puntos
   se van a su propio renglón en vez de encogerse. */
@media (max-width:400px){
  .abanico__mando{flex-wrap:wrap;gap:10px 22px;}
  .abanico__puntos{order:-1;flex-basis:100%;justify-content:center;}
}

/* 3 · TEXTO CENTRADO EN TELÉFONO.
   En escritorio el párrafo largo de «Somos» va con las líneas a la izquierda
   —cuatro líneas con el canto dentado se leen peor— pero eso valía para una
   columna de 500 px. En 346, con el titular y todo lo demás centrado, la
   excepción cantaba. Aquí manda la simetría. */
@media (max-width:700px){
  .somos__texto > p:not([class]){text-align:center;}
  /* La banda roja era el otro bloque alineado a la izquierda en medio de una
     página centrada. */
  .remate-rojo__cuerpo{justify-items:center;text-align:center;}
  .remate-rojo__linea{margin-left:auto;margin-right:auto;}
  /* La firma era lo último que quedaba alineado a la izquierda dentro de una
     columna centrada. */
  .firma{align-self:center;align-items:center;}
}

/* 4 · La tirada de «todo resuelto».
   Sigue en fila y con barras como en escritorio, sólo que más pequeña. El
   truco es que la barra va DETRÁS de cada elemento y no delante: al plegarse
   la línea, una barra al final del renglón se lee como continuación, mientras
   que delante quedaban bastones huérfanos a la izquierda. */
@media (max-width:620px){
  .resuelto__lista{gap:7px 9px;font-size:.82rem;}
  .resuelto__lista li{gap:9px;}
  .resuelto__lista li + li::before{display:none;}
  .resuelto__lista li:not(:last-child)::after{
    content:"";width:1px;height:1em;background:rgba(24,26,25,.22);flex:none;
  }
}

/* 4 · El cuño de pasaporte, más presente en teléfono.
   Al 15 % daba 3,32:1 y a 170 px de ancho no se leía como artefacto sino
   como un fallo de pintado. Se sube la opacidad y el tamaño: sigue siendo
   un fondo, pero ahora se ve que es a propósito. */
@media (min-width:701px) and (max-width:900px){
  /* En tableta el cuño se queda en su ancho mínimo y al 15 % no se distingue
     de un artefacto de compresión: se sube. */
  .cuno{opacity:.3;width:clamp(178px,26vw,230px);}
}
@media (max-width:700px){
  /* En teléfono directamente sobra: es un artefacto de composición y en una
     columna estrecha sólo añade una pieza más que bajar. */
  .cuno{display:none;}
}

/* 5 · TABLETA: la medida del texto usa el ancho que hay.
   Al plegarse a una columna, 50ch sobre 707 px dejaban 240 px muertos a la
   derecha. 64ch sigue dentro del rango de lectura y llena la caja. */
@media (min-width:701px) and (max-width:1100px){
  .somos__texto p{max-width:64ch;}
  .somos__texto .somos__lead{max-width:38ch;}
}

/* 8 · LA MEDIDA DE LÍNEA CUANDO UNA REJILLA SE PLIEGA A UNA COLUMNA.
   Es una sola causa con tres síntomas: el FAQ (una columna por debajo de
   800), las curiosidades (por debajo de 820) y los pilares (por debajo de
   760) pasan a ocupar el contenedor entero, y en el iPad vertical eso daba
   89-93 caracteres por línea en las respuestas y 87-91 en las curiosidades.
   En escritorio, a dos o tres columnas, no pasan de 68. Se pone el tope
   donde está el problema —en el párrafo— y no se toca la rejilla.
   OJO con el `ch`: mide el ancho del «0», y en Hanken el cero es más estrecho
   que la letra media de la prosa. Un tope de 68ch medido con texto real daba
   80-83 caracteres; 60ch da 70-73, que es lo que se buscaba. */
.acordeon__cuerpo p,
.pilar p{max-width:60ch;}
@media (max-width:820px){
  .curiosas ul{max-width:60ch;margin-left:auto;margin-right:auto;}
}

/* 9 · HUÉRFANOS DE REJILLA EN TABLETA.
   El pie baja a dos columnas con tres bloques y el de contacto se quedaba
   solo abajo a la izquierda, con media fila vacía al lado. La marca sube a
   ocupar la fila entera y los dos grupos de enlaces van a la par debajo. */
@media (min-width:521px) and (max-width:780px){
  .pie__grid > :first-child{grid-column:1 / -1;}
}
/* El blog tiene tres artículos y entre 641 y 980 va a dos columnas: el
   tercero se quedaba a media anchura con un hueco al lado. Si el último
   queda solo, ocupa la fila y se tumba —foto a la izquierda, texto a la
   derecha—, que es como una ficha ancha se lee sin quedar enorme. */
@media (min-width:641px) and (max-width:980px){
  .post:last-child:nth-child(odd){grid-column:1 / -1;}
  .post:last-child:nth-child(odd) .post__enlace{flex-direction:row;}
  /* La foto en absoluto: el alto de la ficha lo manda el texto. Con la
     imagen en flujo mandaba su alto natural y la ficha medía 400 px con el
     texto flotando arriba. */
  .post:last-child:nth-child(odd) .post__foto{
    flex:0 0 46%;aspect-ratio:auto;min-height:240px;position:relative;
  }
  .post:last-child:nth-child(odd) .post__foto img{position:absolute;inset:0;}
}

/* 10 · EL TITULAR DEL HERO EN TELÉFONO.
   El <br> reparte la frase en dos versos a partir de 430, que es donde
   cabe. Por debajo, «La Venezuela que» ya no entra en una línea y el salto
   forzado dejaba «que» solo en su renglón (y «enseña» en otro): cuatro
   líneas, dos de una palabra. Sin el salto, `balance` hace tres líneas
   parejas: «La Venezuela / que nadie / os enseña». El cuerpo no se toca.
   OJO: el <br> ocupa el sitio del espacio, y ocultarlo a secas juntaba las
   palabras («quenadie»). El guion mete un espacio delante de cada salto y
   marca el titular con `.con-hueco`; sólo entonces se oculta. Sin guion se
   queda el salto, que se lee bien aunque deje la palabra sola. */
@media (max-width:429px){
  .hero__titulo.con-hueco br{display:none;}
}

/* 11 · EL TITULAR DE PORTADA A 320.
   El suelo de 3,48rem es el de todos los teléfonos y no se toca. Sólo en
   pantallas por debajo de 361 la palabra más larga no cabe en la caja:
   «VENEZUELA,» medía 291 px en 276 (blog) y «MARGARITA» 280 (Margarita),
   pegadas al canto derecho. Aquí el cuerpo sigue al ancho —52 px a 320—
   y la palabra vuelve a tener su margen. Los artículos llevan su propia
   escala más pequeña y ya cabían.
   El `.portada` delante no es adorno: este bloque va ANTES de la regla base
   del titular en el archivo y, a la misma especificidad, perdía. El de los
   artículos (0,2,0, más abajo) sigue ganando, que es lo que se quiere. */
@media (max-width:360px){
  .portada .portada__titulo{font-size:min(3.48rem,16.4vw);}
}

/* 12 · LA FICHA DE VIAJE A UNA COLUMNA.
   Por debajo de 900 la ficha baja debajo del relato. El relato seguía con
   su medida de 62ch pegada a la izquierda y la ficha ocupaba el contenedor
   entero: dos bloques seguidos con cantos izquierdos y anchos distintos, y
   el resto del panel centrado. Los dos van ahora al mismo eje. */
@media (max-width:900px){
  .viaje__relato{margin-left:auto;margin-right:auto;}
  /* 62ch como el relato, y al mismo cuerpo: los dos cantos caen en la misma
     vertical. */
  .ficha-viaje{width:100%;max-width:62ch;margin-left:auto;margin-right:auto;}
}

/* SUELO TIPOGRÁFICO GENERAL: ninguna etiqueta baja de 12 px en ninguna
   pantalla. Las mayúsculas espaciadas aguantan tamaños pequeños, pero por
   debajo de 12 dejan de leerse de un vistazo y empiezan a leerse letra a
   letra, que es justo lo contrario de lo que hace una etiqueta. */

/* =========================================================
   PÁGINAS INTERIORES
   Portada a sangre, lámina blanca montada encima y una columna de
   lectura. Comparten hoja con la home a propósito: el navegador ya la
   tiene en caché cuando se llega desde allí, que es por donde se llega.
   ========================================================= */

/* LA PORTADA ES UN CARTEL, no la cabecera de un documento. Ocupa casi la
   pantalla entera, el titular va abajo a la izquierda y a cuerpo de cartel, y
   la miga se retira a una esquina. El cuerpo de la página, en cambio, sigue
   siendo un documento con sus titulares centrados: son dos registros
   distintos a propósito, y eso es lo que hace que la foto pegue.
   Las páginas no son idénticas: comparten ESTE sistema y se diferencian en el
   cuerpo, que es donde cambia el trabajo. */
.portada{
  position:relative;
  min-height:clamp(520px,88vh,940px);
  display:flex;align-items:flex-end;
  padding:clamp(120px,15vh,180px) 0 clamp(44px,6vw,84px);
  background:var(--tinta-honda);
  color:var(--crema-suave);
  overflow:hidden;
}
.portada__media{position:absolute;inset:0;z-index:0;}
/* Portada sin archivo todavía: tinta y el marcador centrado. Un icono de
   imagen rota en lo primero que se ve es peor que un hueco declarado, y el
   titular en blanco sigue leyéndose igual encima. */
.portada__media.sin-foto{
  background:
    repeating-linear-gradient(135deg, rgba(251,248,240,.035) 0 14px, rgba(251,248,240,.012) 14px 28px),
    var(--tinta);
}
/* El marcador va a la esquina de abajo, no al centro: en el centro cruzaba
   el titular, que es lo único que tiene que leerse aquí. */
.portada__media.sin-foto::before{
  content:attr(data-cap);
  content:attr(data-cap) / "";   /* se ve, no se lee (ver .viaje__foto.sin-foto) */
  position:absolute;right:clamp(22px,4vw,44px);bottom:clamp(16px,2vw,26px);
  font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(251,248,240,.4);
}
@media (max-width:620px){
  .portada__media.sin-foto::before{left:clamp(22px,4vw,44px);right:auto;bottom:10px;}
}
.portada__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;}
/* Tres paradas y casi nada en el medio: el velo tiene que sostener el blanco
   del titular abajo sin apagar la foto arriba, que es lo único que se ve al
   entrar. Un degradado plano dejaba la imagen sucia de gris. */
/* CONTRASTE SIN APAGAR LA FOTO. Con este velo el titular caía a 1,6:1 sobre la
   nieve de Mérida y a 1,7 sobre el cielo de Canaima (hace falta 3). Subir el
   velo entero a .50 —la propuesta directa— lo arreglaba todo pero oscurecía un
   57 % la mitad de arriba: la portada dejaba de ser una foto. Se reparte en
   dos piezas: el tramo medio del degradado sube un punto (.34 → .40 a la
   altura del texto; .10 → .12 al 26 %) y el trabajo de verdad lo hace un velo
   LOCAL detrás del bloque de texto (.portada__cuerpo::before), una elipse que
   se funde a cero antes de llegar arriba. Medido en las 10 portadas con foto
   a 1440, 1024, 768 y 390: titular ≥3:1 y entradilla/ficha ≥4,5:1 en todas,
   con la mitad superior de la foto un 9 % más oscura de media. */
.portada__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(14,16,15,.42) 0%,
    rgba(14,16,15,.12) 26%,
    rgba(14,16,15,.40) 60%,
    rgba(14,16,15,.88) 100%);
}
.portada__cuerpo{
  position:relative;z-index:1;
  width:100%;max-width:1240px;margin:0 auto;
  padding:0 clamp(22px,4vw,44px);
  text-align:left;
}
.portada__cuerpo::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-14%;right:-14%;top:-40%;bottom:-30%;
  background:radial-gradient(ellipse 80% 78% at 36% 60%,
    rgba(14,16,15,.66) 0%, rgba(14,16,15,.50) 50%, rgba(14,16,15,0) 76%);
}
/* Cuerpo de cartel: casi el doble que antes y con el interletrado cerrado,
   que es lo que hace que un titular grande no se lea como un titular normal
   ampliado. */
.portada__titulo{
  color:var(--crema-suave);
  font-size:clamp(3.48rem,10.08vw,8.88rem);
  line-height:.94;
  letter-spacing:-0.035em;
  margin:0;
  text-align:left;
  max-width:17ch;
  text-shadow:0 2px 24px rgba(10,11,10,.34);
}
.portada__linea{
  margin:clamp(16px,2vw,26px) 0 0;max-width:34ch;
  color:rgba(251,248,240,.92);
  font-family:"Familjen Grotesk",sans-serif;
  font-size:clamp(1.28rem,2.17vw,1.85rem);
  line-height:1.32;letter-spacing:-0.012em;
  text-shadow:0 1px 14px rgba(10,11,10,.4);
}

/* La miga se va a la esquina de arriba. En el eje del titular le robaba
   protagonismo justo a lo que tiene que mandar, y como orientación funciona
   igual —o mejor— fuera del camino. */
.miga{
  position:absolute;
  top:clamp(86px,11vh,118px);
  left:0;right:0;
  display:flex;align-items:center;flex-wrap:wrap;gap:2px 9px;
  width:100%;max-width:1240px;margin:0 auto;
  padding:0 clamp(22px,4vw,44px);
  font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(251,248,240,.66);
  z-index:2;
}
/* LA MIGA VA EN UNA CÁPSULA DE CRISTAL, como el nav.
   Sobre la foto no hay velo que sirva: la miga va arriba, donde la portada
   tiene que seguir clara, y crema al 66 % daba entre 1,4 y 2,9:1 en 14 de 16
   portadas (Mérida, nieve: 1,4). Una cápsula de tinta al 62 % garantiza el
   contraste sea cual sea la foto —con blanco puro detrás el fondo compuesto
   es #6A6A69 y crema da 5,1:1— y es el mismo material que la cápsula del nav.
   UNA cápsula para toda la ruta y no una píldora por tramo: con píldoras
   sueltas los separadores «·» quedaban fuera, sobre la foto, y las esquinas
   redondeadas de cada píldora dejaban ver la foto dentro de la caja del
   enlace. La cápsula encoge a su contenido y se desplaza hacia fuera lo que
   mide su relleno, así que las letras siguen en la vertical del titular. */
.miga{
  left:max(calc(clamp(22px,4vw,44px) - 14px), calc((100% - 1240px) / 2 + clamp(22px,4vw,44px) - 14px));
  right:auto;
  width:auto;max-width:calc(100% - 2 * clamp(22px,4vw,44px) + 28px);
  margin:0;padding:3px 14px;
  border-radius:18px;
  color:var(--crema-suave);
  background:rgba(14,16,15,.62);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
}
.miga a,.miga span{display:inline-flex;align-items:center;min-height:26px;}
.miga a{color:inherit;text-decoration:none;}
.miga a:hover{text-decoration:underline;text-underline-offset:3px;}
/* Área pulsable de 44 px sin que la fila crezca: el pseudo-elemento la estira
   9 px por encima y por debajo del renglón de 26. */
.miga a::before{content:"";position:absolute;inset:-9px -4px;}
.miga a{position:relative;}

.portada__meta{
  display:flex;flex-wrap:wrap;justify-content:flex-start;
  gap:9px clamp(10px,1.4vw,18px);
  margin:clamp(18px,2.2vw,28px) 0 0;
  list-style:none;padding:0;
}
.portada__meta li{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);
  font-size:.82rem;text-transform:uppercase;letter-spacing:.13em;
  color:rgba(251,248,240,.9);
}
.portada__meta li + li::before{
  content:"";width:1px;height:1em;background:rgba(251,248,240,.4);flex:none;
}

/* En los artículos el titular es una frase, no un nombre: necesita medida
   más ancha y no aguanta el mismo cuerpo. */
.portada--articulo .portada__titulo{
  font-size:clamp(2.52rem,6.48vw,5.52rem);
  line-height:1.02;
  max-width:26ch;
}

/* La lámina monta sobre la foto: ese solape es lo que convierte dos bloques
   apilados en una sola pieza. */
.panel{
  position:relative;z-index:2;
  background:#FFFFFF;color:var(--texto);
  border-radius:clamp(22px,3vw,44px) clamp(22px,3vw,44px) 0 0;
  margin-top:calc(-1 * clamp(26px,3.4vw,52px));
  padding:clamp(60px,7.5vw,112px) 0 clamp(66px,8.5vw,128px);
}

/* ---------- columna de lectura ---------- */

/* EL RITMO DEL PANEL vive aquí y en un solo sitio. Antes cada pieza traía su
   propio `margin-top` y las combinaciones que nadie había previsto —una foto
   seguida de un texto, una pareja seguida de otro texto— quedaban a CERO:
   los bloques se tocaban. Una cadencia común no puede dejar huecos sin
   cubrir, y además se cambia de una vez para las diez páginas. */
.panel > .contenedor > * + *{margin-top:clamp(58px,7.5vw,116px);}
/* Y dos escalones más largos para lo que cierra la página: la llamada y los
   enlaces a otros destinos no son un bloque más del relato, son el final. */
.panel > .contenedor > .cta-destino{margin-top:clamp(74px,9.5vw,150px);}
.panel > .contenedor > .otros{margin-top:clamp(84px,11vw,170px);}

.lectura{
  max-width:68ch;
  margin:0 auto;
}
/* Centrado como TODOS los titulares del sitio. A la izquierda era el único
   que no seguía el eje y la página se leía prestada de otro sitio. */
.lectura__titulo{
  text-align:center;
  font-size:clamp(2.16rem,4.08vw,3.48rem);
  margin-bottom:clamp(22px,2.8vw,38px);
}
/* El cuerpo va casi negro, no gris. El gris tenue es para pies de foto y
   letra menuda; en un relato de varios párrafos deja la página lavada y hace
   que el texto parezca secundario cuando es lo único que hay. */
.lectura p{
  margin:0 0 1.05em;
  font-size:clamp(1.19rem,1.40vw,1.34rem);
  line-height:1.7;
  color:#2E312C;
  text-wrap:pretty;
}
.lectura p:last-child{margin-bottom:0;}
/* La entrada y el cierre van con el peso del texto principal: una abre y el
   otro remata, y las dos son afirmaciones, no relleno. */
.lectura__entrada{
  font-family:"Familjen Grotesk",sans-serif;
  font-size:clamp(1.48rem,2.39vw,2.05rem) !important;
  line-height:1.32 !important;
  letter-spacing:-0.016em;
  color:var(--texto) !important;
  margin-bottom:1.15em !important;
  text-wrap:balance;
}
/* El bloque que abre la página lleva la frase a escala de titular: es la
   idea de la que cuelga todo lo demás, no una entradilla cualquiera. */
.lectura--abre .lectura__entrada{
  font-size:clamp(1.71rem,3.08vw,2.62rem) !important;
  line-height:1.24 !important;
}
.lectura__cierre{color:var(--texto) !important;font-weight:500;}

/* ---------- fotos del relato ---------- */

.lectura__foto{
  margin:0 auto;
  max-width:68ch;
}
.lectura__foto img{
  width:100%;height:auto;display:block;
  border-radius:clamp(14px,1.6vw,24px);
  aspect-ratio:3/2;object-fit:cover;
}
/* A sangre de contenedor: rompe la columna de lectura y da respiro. */
.lectura__foto--ancha{max-width:none;}
.lectura__foto--ancha img{aspect-ratio:16/7;}
.lectura__foto figcaption{
  margin-top:11px;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--texto-tenue);
}
.dupla{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.6vw,22px);
}
/* Sin anular los márgenes laterales automáticos, el marcador —que se dibuja
   con un `::before` al 100 % del ancho— entra en bucle: el hijo mide lo que
   el padre y el padre lo que el hijo, y la caja sale a cero. Con foto no se
   nota porque la imagen aporta su propio ancho. */
.dupla .lectura__foto{margin:0;max-width:none;}
.dupla .lectura__foto img{aspect-ratio:4/5;}
@media (max-width:700px){
  .dupla{grid-template-columns:1fr;}
  .dupla .lectura__foto + .lectura__foto{margin-top:clamp(12px,3vw,18px);}
}

/* ---------- los tres pilares ---------- */

.pilares{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
  margin-top:clamp(28px,3.4vw,44px);
}
/* El pie de la foto ancha se alinea con la columna de lectura y no con el
   canto del contenedor: si no, cada bloque arranca en una vertical distinta
   y la página pierde el eje. */
.lectura__foto--ancha figcaption{max-width:68ch;margin-left:auto;margin-right:auto;}
@media (max-width:760px){.pilares{grid-template-columns:1fr;}}
.pilar{
  background:var(--crema);
  border:1px solid rgba(24,26,25,.07);
  border-radius:clamp(14px,1.5vw,22px);
  padding:clamp(18px,2vw,26px);
}
.pilar h3{
  margin:0 0 8px;
  font-family:"Familjen Grotesk",sans-serif;
  font-weight:500;font-size:1.06rem;letter-spacing:-0.012em;
  color:var(--texto);
}
.pilar p{margin:0;font-size:.95rem !important;line-height:1.55 !important;}

/* ---------- la ficha de quien firma ---------- */

.ficha-persona{
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:center;
  max-width:68ch;margin:0 auto;
  padding-top:clamp(26px,3.4vw,40px);
  border-top:1px solid var(--linea-clara);
}
@media (max-width:620px){
  .ficha-persona{grid-template-columns:1fr;justify-items:center;text-align:center;}
}
/* Ancho declarado, no heredado de la imagen. A una columna la rejilla centra
   la figura y la encoge a su contenido, y el contenido era la imagen al 100 %
   de esa figura: un círculo vicioso que se resolvía con el tamaño del archivo.
   Antes de que llegara la foto la caja medía 1 px y al cargar saltaba a 200:
   un desplazamiento de 200 px en «Quiénes somos» en el móvil. */
.ficha-persona__foto{margin:0;width:min(100%,200px);}
.ficha-persona__foto img{
  width:100%;height:auto;display:block;
  aspect-ratio:1/1;object-fit:cover;border-radius:100px;
  max-width:200px;
}
.ficha-persona .firma__nombre{color:var(--texto);}
.ficha-persona__papel{
  margin:2px 0 12px !important;
  font-size:.78rem !important;text-transform:uppercase;letter-spacing:.14em;
  color:var(--texto-tenue) !important;
}
.ficha-persona p{font-size:1rem !important;}
.ficha-persona .firma__ig{
  color:var(--texto-tenue);margin-top:12px;
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
}
.ficha-persona .firma__ig:hover{color:var(--acento-calado);}

/* En página interior el remate rojo cierra el contenido, así que no necesita
   el margen que lo separaba de la sección de arriba en la home. */
.panel + .remate-rojo{margin-top:0;}

/* ---------- páginas de destino ---------- */


/* Marcador de foto pendiente para el relato. A diferencia del de la home, éste
   NO espera a que falle una descarga: se pone a mano donde todavía no hay
   archivo, así no hay petición fallida ni error de consola. */
.lectura__foto.sin-foto{position:relative;}
.lectura__foto.sin-foto::before{
  content:"";display:block;width:100%;
  aspect-ratio:3/2;
  background:
    repeating-linear-gradient(135deg,
      rgba(24,26,25,.045) 0 12px, rgba(24,26,25,.02) 12px 24px),
    var(--crema-hondo);
  border-radius:clamp(14px,1.6vw,24px);
}
.lectura__foto--ancha.sin-foto::before{aspect-ratio:16/7;}
.dupla .lectura__foto.sin-foto::before{aspect-ratio:4/5;}
.lectura__foto.sin-foto::after{
  content:attr(data-cap);
  content:attr(data-cap) / "";   /* se ve, no se lee (ver .viaje__foto.sin-foto) */
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 24px;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--texto-tenue);
  pointer-events:none;
}

/* Los datos duros en una tabla de verdad: son pares dato/valor y se leen —y
   se indexan— mejor así que como una fila de tarjetas. */
.datos{
  max-width:68ch;margin:0 auto;
  border-top:1px solid var(--linea-clara);
}
.datos__fila{
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(12px,2vw,28px);
  padding:clamp(13px,1.6vw,18px) 0;
  border-bottom:1px solid var(--linea-clara);
}
@media (max-width:560px){.datos__fila{grid-template-columns:1fr;gap:4px;}}
.datos__clave{
  font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--texto-tenue);
}
.datos__valor{margin:0;font-size:1rem;line-height:1.55;color:var(--texto);}

/* Enlaces cruzados entre destinos: orientan al visitante y le dan al buscador
   la malla interna, que es la mitad de posicionar un sitio de varias páginas. */
.otros{max-width:none;}
.otros__titulo{
  font-family:"Familjen Grotesk",sans-serif;font-weight:500;
  font-size:clamp(1.44rem,2.28vw,1.80rem);letter-spacing:-0.018em;
  margin:0 0 clamp(18px,2.2vw,28px);text-align:center;
}
.otros__rejilla{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.3vw,18px);
}
@media (max-width:900px){.otros__rejilla{grid-template-columns:repeat(2,minmax(0,1fr));}}
.otro{
  display:block;text-decoration:none;color:inherit;
  border-radius:clamp(12px,1.4vw,18px);
  overflow:hidden;
  background:var(--crema);
  border:1px solid rgba(24,26,25,.07);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.otro:hover{border-color:rgba(24,26,25,.24);transform:translateY(-3px);}
.otro__foto{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--crema-hondo);}
.otro__foto img{width:100%;height:100%;object-fit:cover;display:block;}
.otro__nombre{
  display:block;padding:12px 14px 14px;
  font-family:"Familjen Grotesk",sans-serif;font-weight:500;
  font-size:1rem;letter-spacing:-0.012em;
}

/* La llamada propia del destino, al final del relato. */
.cta-destino{
  max-width:68ch;margin:0 auto;
  text-align:center;
  background:var(--crema);
  border-radius:clamp(16px,2vw,28px);
  padding:clamp(28px,4vw,48px) clamp(20px,3vw,40px);
}
.cta-destino h2{
  font-family:"Familjen Grotesk",sans-serif;font-weight:500;
  font-size:clamp(1.56rem,2.64vw,2.16rem);letter-spacing:-0.02em;
  margin:0 0 10px;
}
.cta-destino p{margin:0 0 clamp(18px,2.2vw,26px);color:var(--texto-tenue);}

/* ---------- blog ---------- */

/* TODAS las páginas que no son la home abren igual: misma foto a sangre,
   misma altura, mismo cuerpo de titular. Antes el blog abría a 460 px y el
   artículo a 486 con el titular 10 px más pequeño, y al navegar de una a otra
   se notaba el salto. Lo único que cambia es la medida del titular en los
   artículos, porque sus títulos son frases y no nombres. */


.posts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.posts{grid-template-columns:1fr;}}

.post{display:flex;}
.post__enlace{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;width:100%;
  background:var(--crema);
  border:1px solid rgba(24,26,25,.07);
  border-radius:clamp(14px,1.6vw,22px);
  overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post__enlace:hover{
  border-color:rgba(24,26,25,.2);
  transform:translateY(-4px);
  box-shadow:0 20px 40px -28px rgba(24,26,25,.5);
}
.post__foto{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--crema-hondo);}
.post__foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--cine);}
.post__enlace:hover .post__foto img{transform:scale(1.04);}
/* La columna crece y el enlace se queda abajo: con tres fichas de titular
   desigual, si «Leer» sigue al texto cada una lo pone a una altura. */
.post__cuerpo{display:flex;flex-direction:column;flex:1;padding:clamp(16px,2vw,24px);}
.post__meta{
  margin:0 0 8px;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--texto-tenue);
}
.post__titulo{
  margin:0 0 10px;
  font-family:"Familjen Grotesk",sans-serif;font-weight:500;
  font-size:clamp(1.32rem,1.80vw,1.56rem);line-height:1.22;letter-spacing:-0.018em;
  text-wrap:balance;
}
.post__linea{
  margin:0 0 clamp(14px,1.8vw,20px);
  font-size:.94rem;line-height:1.55;color:var(--texto-tenue);
}
.post__leer{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:7px;
  font-size:1.02rem;font-weight:500;color:var(--acento-calado);
}
.post__leer svg{width:12px;height:12px;transition:transform .3s var(--ease);}
.post__enlace:hover .post__leer svg{transform:translate(3px,-3px);}

/* En un artículo los subtítulos no se centran: rompen la lectura seguida.
   El titular de sección sí, pero un h2 cada tres párrafos es una bisagra
   dentro del texto, no una portada. */
.lectura--articulo .lectura__titulo{
  text-align:left;
  font-size:clamp(1.62rem,2.64vw,2.22rem);
  margin:clamp(34px,4vw,52px) 0 clamp(14px,1.6vw,20px);
}
.lectura--articulo .lectura__titulo:first-of-type{margin-top:clamp(26px,3vw,38px);}

.otros__rejilla--dos{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:640px){.otros__rejilla--dos{grid-template-columns:1fr;}}

/* ---------- ficha de viaje a dos columnas ----------
   El relato a la izquierda y los datos duros en una tarjeta pegada a la
   derecha. Antes los datos iban en una tabla a todo lo ancho, debajo del
   texto: quien quería saber cuántos días son tenía que buscarlos. Aquí están
   siempre a la vista mientras se lee, que es cuando surge la pregunta. */

.viaje{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(28px,4vw,76px);
  align-items:start;
}
@media (max-width:900px){
  .viaje{grid-template-columns:1fr;}
}
/* El relato deja de estar centrado: en dos columnas el eje lo marca la
   columna, no la página. */
.viaje__relato{max-width:62ch;}
.viaje__relato .lectura__titulo{text-align:left;}
.viaje__relato > * + *{margin-top:0;}
.viaje__relato h2{
  margin:clamp(38px,4.4vw,62px) 0 clamp(14px,1.6vw,20px);
  font-size:clamp(1.68rem,2.76vw,2.34rem);
}
.viaje__relato h2:first-child{margin-top:0;}
.viaje__relato p{
  margin:0 0 1.05em;
  font-size:clamp(1.19rem,1.40vw,1.34rem);
  line-height:1.7;color:#2E312C;text-wrap:pretty;
}
.viaje__relato p:last-child{margin-bottom:0;}

/* Lista de actividades: son los atractivos del sitio, cada uno con su nombre
   y su explicación. Una lista con viñetas los aplanaría a todos por igual. */
.hitos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.7vw,22px);}
.hitos li{
  padding-left:clamp(16px,1.8vw,24px);
  border-left:2px solid var(--acento-linea);
}
.hitos b{
  display:block;
  font-family:"Familjen Grotesk",sans-serif;font-weight:500;
  font-size:1.06rem;letter-spacing:-0.012em;color:var(--texto);
  margin-bottom:4px;
}
.hitos span{font-size:1rem;line-height:1.6;color:#2E312C;}

.ficha-viaje{
  position:sticky;top:clamp(90px,12vh,120px);
  background:var(--crema);
  border:1px solid rgba(24,26,25,.08);
  border-radius:clamp(16px,1.9vw,26px);
  padding:clamp(22px,2.6vw,34px);
}
@media (max-width:900px){.ficha-viaje{position:static;}}
.ficha-viaje h2{
  margin:0 0 clamp(14px,1.8vw,22px);
  font-family:"Familjen Grotesk",sans-serif;font-weight:500;
  font-size:clamp(1.38rem,1.92vw,1.68rem);letter-spacing:-0.018em;
  text-align:left;color:var(--texto);
}
.ficha-viaje dl{margin:0;}
.ficha-viaje div{
  display:grid;gap:2px;
  padding:clamp(11px,1.3vw,15px) 0;
  border-top:1px solid rgba(24,26,25,.1);
}
.ficha-viaje div:first-child{border-top:0;padding-top:0;}
.ficha-viaje dt{
  font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--texto-tenue);
}
.ficha-viaje dd{margin:0;font-size:1rem;line-height:1.5;color:var(--texto);}
.ficha-viaje .btn{margin-top:clamp(18px,2.2vw,26px);width:100%;justify-content:center;}

/* Las curiosidades van a todo lo ancho y sobre tinta: cortan el blanco del
   relato y señalan que esto es otra cosa —lo que sabe quien ha estado—. */
.curiosas{
  background:var(--tinta);color:var(--crema-suave);
  border-radius:clamp(18px,2.2vw,30px);
  padding:clamp(28px,3.6vw,54px) clamp(22px,3vw,46px);
}
.curiosas h2{
  margin:0 0 clamp(20px,2.4vw,32px);
  font-family:"Familjen Grotesk",sans-serif;font-weight:500;
  font-size:clamp(1.56rem,2.40vw,2.04rem);letter-spacing:-0.02em;
  color:var(--crema-suave);text-align:center;
}
.curiosas ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);
}
@media (max-width:820px){.curiosas ul{grid-template-columns:1fr;gap:clamp(18px,3vw,26px);}}
.curiosas li{font-size:1rem;line-height:1.6;color:rgba(251,248,240,.86);}
.curiosas li b{display:block;color:var(--acento-vivo);font-weight:500;margin-bottom:5px;}
/* El cierre lleva al artículo de seguridad, que es la objeción de fondo de
   quien llega a cualquier destino. Va centrado bajo la rejilla y en el tono
   de las fichas, para que se lea como remate y no como un cuarto dato. */
.curiosas__cierre{
  margin:clamp(22px,2.8vw,36px) auto 0;max-width:60ch;
  text-align:center;font-size:1rem;line-height:1.6;color:rgba(251,248,240,.86);
}
.curiosas__cierre a{color:var(--crema-suave);text-underline-offset:3px;}
.curiosas__cierre a:hover{color:var(--acento-vivo);}