/* ============================================================
   TIPOGRAFÍAS PROPIAS — servidas desde el sitio, no desde Google
   ------------------------------------------------------------
   Antes venían de fonts.googleapis.com. Eso costaba dos conexiones
   nuevas (DNS + TLS a googleapis y a gstatic) ANTES de poder pintar
   una letra, porque la hoja de Google es bloqueante. En móvil con
   datos eso son entre 200 y 400 ms de página en blanco.

   Ahora los .woff2 viven en assets/fonts/ y salen por la misma
   conexión que el HTML. De paso desaparece el tercero: nadie fuera
   del hosting sabe quién entra a la página.

   Se bajaron los MISMOS archivos que servía Google (17 sep 2026), sin
   tocarlos, con los mismos unicode-range: el navegador sigue pidiendo
   latin-ext sólo si aparece un carácter de ese rango. Con texto en
   español se queda en los seis de `latin` (~190 KB) y nunca pide el resto.

   ⚠️ Pesos: SOLO los que la página usa de verdad (medido en el
   navegador con getComputedStyle sobre todo el DOM). Añadir un peso
   al CSS sin añadir aquí su @font-face no da error: el navegador lo
   falsifica engordando los trazos y se ve sucio. Pasaba con el
   <b> de Expediciones Pirry, que pedía Inter 700 y no existía.
   ============================================================ */
@font-face{ font-family:'Josefin Sans'; font-style:normal; font-weight:300; font-display:swap;
  src:url(../assets/fonts/josefin-sans-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Josefin Sans'; font-style:normal; font-weight:300; font-display:swap;
  src:url(../assets/fonts/josefin-sans-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Josefin Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../assets/fonts/josefin-sans-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Josefin Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../assets/fonts/josefin-sans-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Josefin Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../assets/fonts/josefin-sans-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Josefin Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../assets/fonts/josefin-sans-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../assets/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../assets/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../assets/fonts/oswald-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../assets/fonts/oswald-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ============================================================================
   SANTORINI GROUP — sistema visual
   Todos los azules salen del archivo "Logo Santorini.jpeg", muestreados pixel
   a pixel (no a ojo). El wordmark es un degradado continuo #048FE0 → #27207D.
   NO heredar nada del crema vintage de Sports Travel: son hermanas, no gemelas.
   ========================================================================= */

/* Las fuentes ya NO se piden aquí con @import: un @import obliga al navegador a
   bajar y parsear ESTA hoja antes de pedirlas, una detrás de otra. Ahora van en un
   <link> del <head> de index.html, que arranca en paralelo con la hoja. */

:root{
  /* --- Cal: el blanco encalado. Es el fondo, y domina. ------------------- */
  --cal:        #FFFFFF;   /* fondo base */
  --cal-2:      #F0F8FE;   /* banda alterna — la sombra sobre la cal, del logo */
  --cal-3:      #E3EEFB;   /* superficie hundida */

  /* --- Tinta: el final del degradado del wordmark ------------------------ */
  --tinta:      #27207D;   /* texto principal · 13.22:1 sobre cal */
  --tinta-2:    #5A5596;   /* texto secundario · 6.62:1 */
  --tinta-3:    #6F6AA0;   /* captions · 4.95:1 sobre cal, 4.61:1 sobre cal-2 —
                              era #8D89B4 y daba 3.07:1 en el pie: no pasaba AA */

  /* --- El degradado del logo, discretizado ------------------------------- */
  --egeo-300:   #7EC4F0;
  --egeo-400:   #048FE0;   /* 3.49:1 — decorativo o texto grande, NO cuerpo */
  --egeo-500:   #0474C8;
  --egeo-600:   #154EA5;   /* 7.88:1 — seguro para texto */
  --egeo-700:   #202F8A;

  /* --- Cúpula: el azul saturado de las ventanas y la cúpula. Es el CTA. -- */
  --cupula:     #2D43B8;   /* 8.06:1 en los dos sentidos */
  --cupula-alt: #223594;   /* hover */

  /* --- Cielo y sombra: decorativos, JAMÁS texto -------------------------- */
  --cielo:      #8EC3F7;   /* las banderas del logo — DECORATIVO, nunca texto (1.86:1) */
  --cielo-txt:  #CFE6FC;   /* la versión para texto sobre foto: 4.69:1 con el velo de tarjeta */
  --sombra:     #C6D9FD;   /* el azul de la sombra en los muros */

  /* --- Líneas ------------------------------------------------------------ */
  --linea:      rgba(39, 32, 125, .12);
  --linea-2:    rgba(39, 32, 125, .26);

  /* Velos sobre foto — tokenizados: calculados midiendo las fotos reales */
  --velo-tarjeta: linear-gradient(180deg,rgba(23,18,70,0) 34%,rgba(23,18,70,.60) 64%,rgba(23,18,70,.90) 100%);
  --velo-galeria: linear-gradient(180deg,rgba(23,18,70,0) 0%,rgba(23,18,70,.42) 46%,rgba(23,18,70,.88) 80%,rgba(23,18,70,.94) 100%);
  /* Velos del abanico (17 sep 2026). Juan: «tienen un sombreado azul muy fuerte,
     bájalo al menos en la parte sin textos». Medido en el navegador: el rótulo
     vertical más largo («Nido del Tigre») ocupa el 34,5% inferior de la lámina
     cerrada, y el pie de la abierta el 41,4%. Así que de ahí hacia abajo el velo
     se queda EXACTAMENTE como estaba —es lo que sostiene el contraste del texto
     blanco sobre fotos claras— y sólo se aclara por encima, donde no hay nada
     escrito. No subir el arranque: cada punto que se adelante se come foto. */
  --velo-lamina:         linear-gradient(180deg,rgba(23,18,70,0) 46%,rgba(23,18,70,.18) 57%,rgba(23,18,70,.60) 65%,rgba(23,18,70,.92) 100%);
  --velo-lamina-abierta: linear-gradient(180deg,rgba(23,18,70,0) 38%,rgba(23,18,70,.16) 50%,rgba(23,18,70,.49) 59%,rgba(23,18,70,.60) 64%,rgba(23,18,70,.90) 100%);

  /* Canal lateral de la página: coincide exacto con el borde de .envoltura */
  --pad: max(var(--e4), calc((100% - var(--ancho)) / 2));

  /* El degradado del wordmark, como elemento del sistema */
  --degradado: linear-gradient(90deg,#048FE0,#0183D1,#0474C8,#0F62B0,#154EA5,#193E96,#202F8A,#27207D);

  /* --- Tipografía -------------------------------------------------------- */
  --display: 'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;
  --cuerpo:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* La pesada: letras gruesas y condensadas, para titulares calados con foto.
     Entró con el hero elegido por Juan (17 sep 2026). Sólo para display muy
     grande — nunca en cuerpo ni en rótulos. */
  --pesada:  'Oswald', 'Josefin Sans', sans-serif;

  /* --- Espacio: escala amplia (el aire es parte de la marca) ------------- */
  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 40px;
  --e5: 64px; --e6: 96px; --e7: 128px;

  --ancho: 1320px;
  --radio: 3px;              /* casi recto: la cal no tiene esquinas blandas */
  --arco: 50% 50% 4px 4px / 34% 34% 4px 4px;   /* el arco de la cúpula */

  --sombra-carta: 0 1px 2px rgba(39,32,125,.05), 0 12px 32px -12px rgba(39,32,125,.18);
  --sombra-alta:  0 2px 4px rgba(39,32,125,.06), 0 28px 60px -20px rgba(39,32,125,.30);

  --t-rapido: 180ms cubic-bezier(.2,.7,.3,1);
  --t-medio:  320ms cubic-bezier(.2,.7,.3,1);
  --t-lento:  720ms cubic-bezier(.16,.84,.26,1);
}

/* ============================ base ====================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* los saltos a #preferidos, #programas… aterrizan bajo la cabecera fija
     ya encogida (125 / 65 en teléfono) */
  scroll-padding-top:calc(var(--alto-cabecera,125px) + 8px); }
body{
  margin:0; background:var(--cal); color:var(--tinta);
  font-family:var(--cuerpo); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--cupula); color:#fff; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--cupula); outline-offset:3px; border-radius:2px;
}

.envoltura{ width:min(100% - var(--e4)*2, var(--ancho)); margin-inline:auto; }
.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================ tipografía =============================== */
/* Josefin Sans es geométrica de los años 20 — las mismas formas del wordmark
   (la O circular, la g de un piso, el asta fina). Por eso los titulares y el
   logo se leen como una sola voz. Inter desaparece y deja hablar a la foto. */

/* Peso 600, no 300 (Juan, 17 sep: «la letra me gusta pero falta grosor y
   tamaño»). El @import de arriba trae 300/400/600/700: 500 NO está cargado, así
   que pedirlo sintetizaría un falso intermedio. 600 y no 700 porque 700 es el
   peso de los rótulos, botones y microtítulos; si el titular también fuera 700
   la jerarquía se aplana y la página pierde el contraste de pesos. */
.display{
  font-family:var(--display); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.06;
}
.t-1   { font-size:clamp(2.35rem, 5.2vw, 4.25rem); }
.t-2   { font-size:clamp(1.7rem, 3vw, 2.5rem); }

.rotulo{                    /* el eyebrow sobre cada sección */
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:.8rem; color:var(--egeo-700);
}
.entradilla{
  font-size:clamp(1rem,1.25vw,1.15rem); color:var(--tinta-2);
  max-width:56ch; line-height:1.65;
}

/* La regla del degradado: firma del sistema, sale del wordmark */
.regla{ height:2px; width:84px; background:var(--degradado); border-radius:2px; }

.cabeza-seccion{ display:flex; flex-direction:column; gap:var(--e2); margin-bottom:var(--e5); }
.cabeza-seccion .regla{ order:-1; }

/* ============================ botones ================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 var(--e3);
  font-family:var(--display); font-weight:700; font-size:.94rem;
  letter-spacing:.12em; text-transform:uppercase;
  border-radius:var(--radio); transition:background var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido), transform var(--t-rapido), box-shadow var(--t-rapido); cursor:pointer;
}
.btn--cta{ background:var(--cupula); color:#fff; }
.btn--cta:hover{ background:var(--cupula-alt); transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(45,67,184,.6); }
.btn--linea{ border:1px solid var(--linea-2); color:var(--tinta); }
.btn--linea:hover{ border-color:var(--cupula); color:var(--cupula); background:var(--cal-2); }
.btn--claro{ background:rgba(255,255,255,.96); color:var(--tinta); }
.btn--claro:hover{ background:#fff; transform:translateY(-2px); }
.btn svg{ width:17px; height:17px; flex:none; }

/* ============================ cabecera =================================
   Logo centrado y grande, menú debajo (probado el 2026-09-16 a petición de Juan:
   «el logo un poco más grande que se vea más, centrado y con el menú debajo»).

   ⚠️ El encabezado es PEGAJOSO: un bloque de 170px fijo en lo alto se comería
   un quinto de la pantalla en cada scroll. Por eso se encoge al bajar —el
   atributo data-fija ya estaba cableado en el JS— y pasa de 170 a 112px.
   El logo hace lo mismo: 76 → 46px. Si quitas el encogido, devuelve el
   encabezado a una sola fila o tapará medio hero. */

/* ⚠️ FIJA, no pegajosa, y el body reserva su alto con padding-top. Motivo: al
   encogerse (177→125) una cabecera pegajosa quita 52px de alto al documento; el
   navegador reajusta el scroll (anclaje) para compensar, el scroll vuelve a
   quedar por debajo del umbral, la cabecera se expande… y tiembla (Juan,
   17 sep: «cuando scrolleo se enloquece y empieza a temblar»). Fija encima de
   un espaciador constante, encogerse no mueve nada. El JS además lleva
   histéresis: encoge pasados 80px y sólo se expande por debajo de 20. */
body{ padding-top:177px; }
/* ============================================================
   BARRA DE AVANCE DE LECTURA
   ------------------------------------------------------------
   La pidió Juan (17 sep 2026): «tal cual como la de Sports pero con los
   colores de Santorini, un azul que se vaya degradando». El mecanismo es el
   mismo que allá; lo que cambia es el color y el porqué del color.

   EL DEGRADADO NO SE INVENTA. Es el del propio wordmark, que ya estaba
   discretizado en :root (--egeo-300 → --tinta): el logo va de un azul cielo a
   la tinta marina, y la barra recorre exactamente ese camino de izquierda a
   derecha. Al final del scroll, el extremo de la barra es el mismo azul con el
   que termina el logo.

   🔴 SE DESTAPA, NO SE ESTIRA. El relleno lleva el degradado COMPLETO y lo que
   se mueve es el recorte. Si en vez de destapar se escalara con scaleX, al 10%
   se vería el degradado entero comprimido en una miniatura y el color dejaría
   de decir nada; así, el azul que ves en la cabeza de la barra te dice por
   dónde vas: cielo al empezar, marino al terminar.

   ⚠️ `clip-path:inset()` y NO `width`. El ancho es una propiedad de maqueta y
   dispararía un reflow en cada fotograma del scroll. El recorte lo compone la
   GPU.

   DOS CAPAS, y cada una está donde está por un motivo:
   · La PISTA es `.cabecera::before`. Nunca cambia, así que puede ser un
     pseudo-elemento. Va dentro de la cabecera, en sus 24px de padding
     superior, donde no toca el logo (el logo empieza justo en 24px).
   · El RELLENO es `.avance`, un <div> vacío y `fixed`. Ver el porqué en el
     comentario del HTML.
   ⚠️ Las dos comparten alto (--avance-h) y van de lado a lado. Si tocas una,
   toca la otra o el relleno deja de encajar sobre la pista.
   ============================================================ */
:root{
  --avance-h: 5px;
  /* El degradado del wordmark tal cual: arranca en --egeo-400 (#048FE0) y
     termina en --tinta (#27207D), que son los dos extremos reales del logo.
     ⚠️ NO empezar en --egeo-300 (#7EC4F0) aunque sea el más claro de la rampa:
     ése es una extrapolación, no está en el logo, y sobre cal da 1,86:1 — el
     primer tramo de la barra se perdería justo cuando el visitante empieza a
     bajar y quiere ver que algo se mueve. --egeo-400 da 3,49:1 y se lee desde
     el primer píxel. */
  --avance-degradado: linear-gradient(90deg,
    var(--egeo-400)  0%,
    var(--egeo-500) 30%,
    var(--egeo-600) 58%,
    var(--egeo-700) 82%,
    var(--tinta)   100%);
}
.cabecera::before{
  content:''; position:absolute; top:0; left:0; right:0; height:var(--avance-h);
  /* La pista no es el degradado apagado —sobre cal el extremo claro se
     disolvería y parecería que la barra está rota por la izquierda—, es un
     riel liso del azul de la sombra de los muros del logo.
     ⚠️ Va a opacidad PLENA. Con .5 quedaba en #E2ECFE, 1,17:1 contra la cal:
     desaparecía y la barra parecía flotar en el vacío en vez de recorrer un
     carril. A opacidad plena da 1,35:1 — sigue siendo un susurro, que es lo que
     tiene que ser, pero se ve que hay por dónde avanzar. */
  background:var(--sombra);
}
.avance{
  position:fixed; top:0; left:0; right:0; height:var(--avance-h);
  /* por encima de la cabecera (60) y del botón flotante (70), por debajo del
     popup del programa (960), que sí debe taparla */
  z-index:80; pointer-events:none;
  background:var(--avance-degradado);
  clip-path:inset(0 100% 0 0);   /* arranca tapada del todo */
}
/* En el teléfono 5px pesan más de lo que parecen: el ancho baja a un tercio y
   la barra empieza a leerse como una franja de la marca en vez de como una
   costura fina. */
@media (max-width:700px){ :root{ --avance-h: 3px; } }

.cabecera{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-rapido), background var(--t-rapido);
}
/* Al bajar el fondo se vuelve sólido: con dos filas, el cristal translúcido
   dejaba ver un fantasma del contenido que pasa por debajo y ensuciaba. */
.cabecera[data-fija="si"]{ border-bottom-color:var(--linea); background:var(--cal); }

.cabecera__cuerpo{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:var(--e2); padding-block:var(--e3) 18px;
  transition:gap var(--t-medio), padding var(--t-medio);
}
.cabecera[data-fija="si"] .cabecera__cuerpo{ gap:10px; padding-block:14px 12px; }

.cabecera__logo{ display:block; }
.cabecera__logo img{ height:76px; width:auto; transition:height var(--t-medio); }
.cabecera[data-fija="si"] .cabecera__logo img{ height:46px; }

.cabecera__nav{ display:flex; gap:var(--e3); align-items:center; justify-content:center; }
.cabecera__nav a:not(.btn){
  font-family:var(--display); font-weight:700; font-size:.88rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-2);
  padding:8px 2px; position:relative; transition:color var(--t-rapido);
}
.cabecera__nav a:not(.btn)::after{
  content:''; position:absolute; left:0; right:100%; bottom:2px; height:1.5px;
  background:var(--degradado); transition:right var(--t-medio);
}
.cabecera__nav a:not(.btn):hover{ color:var(--tinta); }
.cabecera__nav a:not(.btn):hover::after{ right:0; }
/* El botón se achica un punto: en dos filas ya no necesita tanto peso */
.cabecera__nav .btn{ min-height:42px; font-size:.86rem; padding:0 var(--e2); }

/* La franja justo antes de la hamburguesa (861–940px) es donde el menú va más
   apretado: con «DESTINOS PROGRAMADOS» —el rótulo más largo, 20 caracteres con
   tracking .12em— la fila se partía en dos y la cabecera crecía de 42 a 61px.
   Se cierran el hueco y el tracking SÓLO aquí; por encima no cambia nada.
   Medido: a 861px la fila pasa de 795px de ancho a caber de sobra. */
@media (min-width:861px) and (max-width:940px){
  .cabecera__nav{ gap:var(--e2); }
  .cabecera__nav a:not(.btn){ font-size:.8rem; letter-spacing:.06em; }
  .cabecera__nav .btn{ font-size:.78rem; letter-spacing:.08em; padding:0 14px; }
}

/* Con el logo centrado, el botón de menú no puede empujar: va absoluto */
.cabecera__menu{ display:none; position:absolute; right:0; top:var(--e3);
  width:44px; height:44px; align-items:center; justify-content:center;
  transition:top var(--t-medio); }
.cabecera[data-fija="si"] .cabecera__menu{ top:14px; }

/* ============================ hero ===================================== */
/* ===================== HERO · el calado ==============================
   Séptima versión y la ELEGIDA (17 sep 2026): Juan la escogió entre cinco del
   laboratorio. Fondo cal; el titular en letras muy gruesas (Oswald 700) con la
   foto viviendo DENTRO de las letras. Las fotos cambian cada 5 s con fundido:
   cada línea lleva dos capas de texto idénticas superpuestas, la activa
   enseña la foto actual y la otra recibe la siguiente y se funde encima.
   Con esta versión entra al sistema la fuente pesada, --pesada. */

:root{ --alto-cabecera:125px; }

.calado{ background:var(--cal); display:grid; place-items:center;
  min-height:calc(100svh - 177px); padding-block:var(--e4) var(--e5);
  /* La PRIMERA foto del mazo entra por aquí y no escrita en el HTML, para poder
     darle una versión más pequeña al teléfono. Las otras ocho las pone el JS.
     ⚠️ La ruta se resuelve desde ESTA hoja (shared/), no desde el documento:
     por eso lleva ../ delante. Escribirla como la escribe el HTML da 404. */
  --hero-0:url(../assets/unsplash/hero-via-lactea.webp); }
/* Mazo del hero en versión teléfono: 1400px en vez de 2600. A 700px de ancho y
   pantalla 2x hacen falta 1400 exactos, así que el corte va justo ahí y ningún
   teléfono lo ve borroso. Son 2,5 MB de mazo contra 0,9: el visitante de móvil
   con datos deja de pagar píxeles que su pantalla no puede enseñar. */
@media (max-width:700px){
  .calado{ --hero-0:url(../assets/unsplash/hero-via-lactea-m.webp); }
}
.calado__entra{ animation:entra 700ms cubic-bezier(.16,.84,.26,1) both; }
.calado__pie.calado__entra{ animation-delay:400ms; }
@keyframes entra{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.calado__titulo{ margin:var(--e2) 0 0; font-family:var(--pesada); font-weight:700; text-transform:uppercase;
  font-size:clamp(4.6rem,16.2vw,16rem); line-height:.86; letter-spacing:-.005em;
  display:flex; flex-direction:column; }
/* la línea mide lo que mide su texto; la segunda capa se le superpone exacta.
   ⚠️ background-image va INLINE en cada capa (lo pone el HTML y el JS), no en
   una variable: un url() en una custom property se resuelve desde esta hoja
   (shared/) y no desde el documento — daba 404. */
.calado__linea{ position:relative; display:block; width:max-content; max-width:100%; }
/* La caja lleva aire abajo y a la derecha: la cola de la Q y el pie de las
   letras bajan por debajo de la línea (line-height .86) y la foto sólo se
   pinta DENTRO de la caja — sin esto la cola de la Q salía transparente. El
   margen negativo devuelve el sitio para que el interlineado no cambie. */
.calado__capa{ display:block; font-style:normal; padding:0 .08em .2em 0; margin-bottom:-.2em;
  background-size:cover; background-position:50% var(--y,50%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity 1400ms cubic-bezier(.16,.84,.26,1);
  animation:deriva-calado 40s ease-in-out infinite alternate; }
.calado__capa + .calado__capa{ position:absolute; inset:0; }
.calado__capa[data-activa="no"]{ opacity:0; }
@keyframes deriva-calado{ from{ background-size:130% } to{ background-size:100% } }
/* entrada: las letras suben desde abajo, una línea tras otra */
.calado__linea{ animation:sube-calado 900ms cubic-bezier(.16,.84,.26,1) both; }
.calado__linea:nth-child(2){ animation-delay:120ms; }
@keyframes sube-calado{ from{ opacity:0; transform:translateY(.25em) } to{ opacity:1; transform:none } }

.calado__pie{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e3);
  margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid var(--linea); }
.calado__pie p{ margin:0; color:var(--tinta-2); font-size:1.05rem; }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:var(--e2); }
.calado__credito{ font:700 .68rem/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-3);
  transition:opacity 600ms; }
.calado__credito[data-cambia]{ opacity:0; }

/* Utilidad: la palabra subrayada con el degradado del wordmark. */

/* ============================ clientes =================================
   Banda de logos calcada de Sports Travel (home.css → .clientes) con la tinta
   de Santorini. Marquesina en CSS puro; cuatro juegos iguales ⇒ bucle a -25%.
   Cada logo se equilibra por PESO ÓPTICO con --s (alto) y --w (ancho). */
.clientes{ --cl-h:clamp(30px,3.7vw,48px); --cl-w:clamp(104px,12.7vw,163px); --cl-gap:clamp(32px,4.8vw,70px);
  padding-block:var(--e5) var(--e6); border-bottom:1px solid var(--linea); }
.clientes__cab{ display:flex; flex-direction:column; gap:var(--e2); margin-bottom:var(--e4); }
.clientes__cab h2{ margin:0; }
.clientes__banda{ display:flex; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); }
.clientes__pista{ display:flex; align-items:center; flex-shrink:0; will-change:transform;
  animation:cl-scroll 46s linear infinite; }
@keyframes cl-scroll{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-25%,0,0) } }
.cl-logo{ flex:0 0 auto; height:calc(var(--cl-h) * 1.6); display:grid; place-items:center;
  padding:0 calc(var(--cl-gap) / 2); }
.cl-logo img{ display:block; width:auto; height:auto;
  max-height:calc(var(--cl-h) * var(--s,1)); max-width:calc(var(--cl-w) * var(--w,1));
  opacity:.82; transition:opacity var(--t-medio); }
/* Futbolete es una «F» sin wordmark: lleva el nombre debajo (herencia de STC) */
.cl-logo--tag{ align-content:center; row-gap:5px; }
.cl-logo--tag img{ max-height:min(calc(var(--cl-h) * var(--s,1)), calc(var(--cl-h) * 1.6 - 22.5px)); }
.cl-tag{ font-family:var(--display); font-weight:700; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; line-height:1; white-space:nowrap; color:var(--tinta-2); opacity:.82; }
.clientes__cifra{ margin:var(--e4) 0 0; text-align:center; font-family:var(--display); font-weight:700;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); text-wrap:balance; }
.clientes__cifra b{ font-weight:300; font-size:1.5rem; letter-spacing:.02em; color:var(--tinta);
  font-variant-numeric:tabular-nums; margin-right:6px; }
@media (hover:hover) and (pointer:fine){
  .clientes__banda:hover .clientes__pista{ animation-play-state:paused; }
  .cl-logo:hover img, .cl-logo--tag:hover .cl-tag{ opacity:1; }
}

/* ============================ secciones ================================ */
.seccion{ padding-block:var(--e7); }

/* ============================ DESTINOS · abanico =========================
   Tercera versión (2026-09-16, noche). La rejilla no convencía y el atlas
   tampoco: las dos eran, al final, fotos en cajas. Esto es otra cosa: los 15
   destinos a la vez como una hilera de LÁMINAS verticales estrechas —se ven
   todas las fotos de golpe— y la que se toca o sobrevuela se ABRE y ocupa un
   tercio del ancho con su pie. En móvil es un acordeón vertical.
   Sin filtros: Juan los quitó (16 sep, noche) porque con pocas láminas cada
   una se abría demasiado y las fotos se veían mal. Siempre las 15 a la vez. */

.abanico{ display:flex; gap:6px; height:clamp(460px,64vh,640px); }
.pliegue{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; isolation:isolate;
  border-radius:var(--radio); background:var(--cal-3); cursor:pointer; text-align:left;
  padding:0; border:0; color:#fff; font:inherit;
  /* flex-grow es propiedad de layout, y aquí SE ANIMA A PROPÓSITO: la apertura
     de la lámina es la interacción, no un adorno. Curva de salida larga. */
  transition:flex-grow 620ms cubic-bezier(.16,.84,.26,1);
}
.pliegue[data-abierta="si"]{ flex-grow:9; cursor:default; }
.pliegue__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-lento); }
.pliegue:hover .pliegue__foto{ transform:scale(1.04); }
/* Kioto: la aguja de la pagoda está muy arriba en el original (13% de la altura)
   y el recorte vertical de la lámina abierta se la comía por poco. Subir el
   encuadre la salva y sólo sacrifica hojarasca del pie. */
.pliegue__foto[src*="kioto"]{ object-position:50% 34%; }
/* velo: en lámina cerrada sólo protege el rótulo vertical de abajo; en abierta,
   el pie completo. Mismo token de tarjeta, medido sobre estas fotos. */
.pliegue::after{ content:''; position:absolute; inset:0; z-index:1;
  background:var(--velo-lamina); transition:background var(--t-medio); }
.pliegue[data-abierta="si"]::after{ background:var(--velo-lamina-abierta); }

/* el botón de abrir cubre toda la lámina; no se dibuja, sólo recibe clic y foco */
.pliegue__abrir{ position:absolute; inset:0; z-index:2; background:none; border:0; cursor:pointer; padding:0; }
.pliegue__abrir:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }
.pliegue[data-abierta="si"] .pliegue__abrir{ cursor:default; }

/* rótulo vertical de la lámina cerrada */
.pliegue__vertical{
  position:absolute; left:50%; bottom:var(--e3); z-index:2; transform:translateX(-50%);
  writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg);
  font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.18em;
  text-transform:uppercase; white-space:nowrap; opacity:1;
  transition:opacity var(--t-rapido); }
.pliegue[data-abierta="si"] .pliegue__vertical{ opacity:0; }

/* pie de la lámina abierta */
/* ⚠️ visibility, no sólo opacity. Con opacity:0 el pie sigue en el orden del
   tabulador: había 14 enlaces «Escríbenos» invisibles que recibían el foco antes
   de llegar a nada útil. visibility:hidden los saca del recorrido, y se cambia
   con retardo 0 al abrir y al final de la transición al cerrar, para que la
   animación de entrada se siga viendo igual. */
.pliegue__pie{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:var(--e4);
  opacity:0; transform:translateY(12px); pointer-events:none; visibility:hidden;
  transition:opacity 420ms cubic-bezier(.16,.84,.26,1) 180ms,
             transform 420ms cubic-bezier(.16,.84,.26,1) 180ms,
             visibility 0s linear 600ms; }
.pliegue[data-abierta="si"] .pliegue__pie{ opacity:1; transform:none; pointer-events:auto;
  visibility:visible;
  transition:opacity 420ms cubic-bezier(.16,.84,.26,1) 180ms,
             transform 420ms cubic-bezier(.16,.84,.26,1) 180ms,
             visibility 0s; }
.pliegue__pais{ display:block; font-family:var(--display); font-weight:700; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cielo-txt); margin-bottom:8px; }
.pliegue__nombre{ margin:0; font-family:var(--display); font-weight:300; letter-spacing:.1em;
  text-transform:uppercase; font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1.06; white-space:nowrap; }
.pliegue__nota{ margin:12px 0 0; font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.92); max-width:38ch; }
.pliegue__cta{ display:inline-flex; align-items:center; gap:8px; margin-top:var(--e2);
  font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; border-bottom:1.5px solid rgba(255,255,255,.7);
  padding-bottom:3px; }
.pliegue__cta:hover{ border-color:#fff; }

/* cierre del abanico: sustituye a la tarjeta «¿No ves tu destino?» */
.atlas__abierto{ position:relative; z-index:1; margin-top:var(--e5); padding:var(--e5) 0 0;
  border-top:1px solid var(--linea); display:grid; grid-template-columns:1fr auto;
  gap:var(--e4); align-items:center; }
.atlas__abierto h3{ margin:0 0 8px; font-family:var(--display); font-weight:300; letter-spacing:.1em;
  text-transform:uppercase; font-size:clamp(1.3rem,2.2vw,1.8rem); }
.atlas__abierto p{ margin:0; color:var(--tinta-2); max-width:52ch; }

/* ============================ LUNAS DE MIEL · la cartelera ===============
   Cuarta versión (2026-09-17). Elegida por Juan en un laboratorio de cuatro
   opciones (índice · mosaico · pasarela · cartelera).
   La idea: la home es blanca de arriba abajo, así que aquí se va a AZUL y las
   seis fotos se paran como columnas de alturas distintas alineadas por abajo
   —perfil de cartelera—. Corta la página en dos y se recuerda.
   Texto DEBAJO de cada foto, nunca encima: las fotos van sin velo.
   Las alturas se dan con aspect-ratio por posición: seis valores distintos,
   ninguno seguido de otro parecido, para que el perfil no haga escalera.
   Sin precios: cada columna escribe por WhatsApp con el destino ya puesto. */
.lunas{ background:var(--tinta); color:#fff; padding-block:var(--e7); overflow:hidden; }
.lunas__cabeza{ display:grid; grid-template-columns:1fr auto; gap:var(--e4); align-items:end;
  margin-bottom:var(--e5); }
.lunas__cabeza .regla{ background:var(--cielo); }
.lunas__cabeza .entradilla{ margin:var(--e2) 0 0; color:var(--cielo-txt); }
.lunas__fila{ display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.4vw,22px); align-items:end; }
.luna{ display:block; color:inherit; transition:transform var(--t-medio); }
.luna:hover{ transform:translateY(-6px); }
.luna__marco{ position:relative; overflow:hidden; border-radius:var(--radio);
  background:#1b1560; }
.luna__marco img{ width:100%; height:100%; object-fit:cover; display:block;
  /* apagadas en reposo, a todo color al tocarlas: sobre el azul, seis fotos
     a plena saturación a la vez se pelean entre ellas */
  filter:saturate(.92) brightness(.9);
  transition:transform var(--t-lento), filter var(--t-lento); }
.luna:hover .luna__marco img{ transform:scale(1.05); filter:none; }
/* Las seis alturas. Van en una variable porque al pasar a 3 y a 2 columnas
   las columnas se ensanchan y, con el mismo ratio, se volverían torres de
   1000px: --k las achata sin perder el perfil escalonado. */
.luna:nth-child(1){ --r:2.5; }
.luna:nth-child(2){ --r:1.9; }
.luna:nth-child(3){ --r:2.9; }
.luna:nth-child(4){ --r:1.6; }
.luna:nth-child(5){ --r:2.6; }
.luna:nth-child(6){ --r:2.1; }
.luna__marco{ aspect-ratio:1 / calc(var(--r) * var(--k, 1)); }
/* Punto focal por foto. OJO: en una columna tan estrecha el recorte de
   `cover` siempre es HORIZONTAL —la foto entra completa de alto y se le
   quitan los lados—, así que aquí sólo manda la X; la Y no hace nada. */
.luna:nth-child(4) img{ object-position:35% 50%; }  /* París: saca la torre de detrás del edificio */
.luna:nth-child(5) img{ object-position:35% 50%; }  /* Bora Bora: entra el Otemanu entero */
.luna__nombre{ margin:14px 0 0; font-family:var(--pesada); font-weight:700;
  text-transform:uppercase; line-height:.95; font-size:clamp(.95rem,1.5vw,1.5rem);
  color:#fff; }
.luna__pais{ display:block; margin-top:5px; font-family:var(--cuerpo); font-weight:400;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cielo); }            /* 7.1:1 sobre la tinta — aquí sí es texto */
/* A 6 columnas por debajo de 1000px cada foto queda en 136px: una rendija.
   Ahí bajamos a 3, y a 2 en teléfono. (Medido en el barrido 1920→320.) */
@media (max-width:1000px){
  .lunas__fila{ grid-template-columns:repeat(3,1fr); row-gap:var(--e4); --k:.62; }
}
@media (max-width:860px){
  .lunas__cabeza{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .lunas__fila{ grid-template-columns:repeat(2,1fr); --k:.72; }
}

/* ============================ EXPEDICIONES · ficha de lanzamiento ========
   Tercera versión (2026-09-16, noche). La idea viene de fuera del turismo: un
   lookbook de moda (índice + foto grande, la foto se queda fija mientras
   lees) y la ficha técnica de una prenda (etiqueta · valor, filos finos). Una
   expedición con temporada y cupos limitados es un lanzamiento, y se
   presenta como tal. Los datos salen del programa real (PDF de STC); el PDF
   NO se enlaza porque trae precio y marca de Sports Travel.                 */
.drop{ padding-block:var(--e7); }
.ficha-drop{ display:grid; grid-template-columns:minmax(300px,5fr) 7fr; gap:var(--e6);
  align-items:start; margin-top:var(--e5); }
/* la foto se queda fija mientras la ficha baja: es el gesto de lookbook */
.ficha-drop__foto{ position:sticky; top:calc(var(--alto-cabecera,125px) + var(--e3));
  aspect-ratio:829/1150; overflow:hidden; border-radius:var(--radio); background:var(--cal-3);
  box-shadow:var(--sombra-alta); }
.ficha-drop__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.ficha-drop__sello{ position:absolute; left:var(--e3); top:var(--e3); z-index:2;
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--cal); color:var(--tinta); border-radius:var(--radio);
  font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; }
.ficha-drop__sello::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--cupula);
  box-shadow:0 0 0 4px rgba(45,67,184,.16); }

/* Segunda ficha en espejo: la foto pasa a la izquierda. Se invierten las
   columnas de la rejilla, no el orden del HTML: así el lector de pantalla y el
   tabulador siguen recibiendo nombre → datos → itinerario → botón, que es el
   orden en que se lee la ficha. En móvil, donde todo se apila, la regla no
   aplica y la foto vuelve a ir arriba en las dos. */
.ficha-drop--espejo{ grid-template-columns:7fr minmax(300px,5fr); }
.ficha-drop--espejo .ficha-drop__foto{ grid-column:2; grid-row:1; }
.ficha-drop--espejo .ficha-drop__cuerpo{ grid-column:1; grid-row:1; }

/* Dos fichas seguidas necesitan aire entre ellas y una línea que las separe:
   sin eso el itinerario de la primera y el nombre de la segunda se pegan. */
.ficha-drop + .ficha-drop{ margin-top:var(--e7); padding-top:var(--e6); border-top:1px solid var(--linea); }

/* Aviso legal del programa (el avistamiento no se garantiza). Va con --tinta-2,
   que da 7,4:1 sobre la cal: es información que limita lo que se vende, no
   letra pequeña decorativa. */
.ficha-drop__aviso{ margin:var(--e4) 0 0; padding-left:var(--e3);
  border-left:2px solid var(--cielo); color:var(--tinta-2);
  font-size:.86rem; line-height:1.6; max-width:60ch; }

.ficha-drop__cab{ display:flex; flex-direction:column; gap:2px; }
.ficha-drop__nombre{ margin:0; font-family:var(--display); font-weight:300; letter-spacing:.1em;
  text-transform:uppercase; font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.02; }
/* el año ENCIMA del nombre, como en un cartel: así nunca se parte de línea.
   Va en --egeo-500 (5,34:1): la primera versión lo puso en --sombra, que es
   decorativo y daba 1,42:1 — el año es información, no adorno. */
.ficha-drop__anio{ order:-1; font-family:var(--display); font-weight:300; font-size:clamp(3rem,7vw,6rem);
  line-height:.95; color:var(--egeo-500); letter-spacing:.02em; }
.ficha-drop__linea{ margin:var(--e2) 0 0; color:var(--tinta-2); max-width:58ch; }

/* la ficha técnica: etiqueta · valor con filos, como una etiqueta de prenda */
.specs{ margin:var(--e4) 0 0; display:grid; grid-template-columns:150px 1fr; }
.specs > div{ display:contents; }
.specs dt, .specs dd{ margin:0; padding:14px 0; border-top:1px solid var(--linea); }
.specs dt{ font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-3); }
.specs dd{ color:var(--tinta); font-size:.98rem; }
.specs dd small{ display:block; color:var(--tinta-2); font-size:.86rem; margin-top:2px; }
.specs > div:last-child dt, .specs > div:last-child dd{ border-bottom:1px solid var(--linea); }

/* itinerario: aquí la numeración SÍ es una secuencia real */
.itin{ margin:var(--e5) 0 0; }
.itin h4{ margin:0 0 var(--e2); font-family:var(--display); font-weight:700; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--egeo-700); }
.itin ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--e4); }
.itin li{ display:grid; grid-template-columns:44px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--linea); }
.itin__n{ font-family:var(--display); font-weight:300; font-size:1.5rem; line-height:1.1; color:var(--egeo-400); }
.itin b{ display:block; font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; }
.itin span{ display:block; color:var(--tinta-2); font-size:.88rem; line-height:1.45; margin-top:2px; }

.incluye{ margin:var(--e4) 0 0; display:grid; grid-template-columns:1fr 1fr; gap:var(--e4); }
.incluye h4{ margin:0 0 10px; font-family:var(--display); font-weight:700; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); }
.incluye ul{ margin:0; padding:0; list-style:none; color:var(--tinta-2); font-size:.9rem; line-height:1.5; }
.incluye li{ padding:6px 0 6px 18px; position:relative; }
.incluye li::before{ content:''; position:absolute; left:0; top:14px; width:8px; height:1.5px; background:var(--egeo-500); }
.incluye--no li::before{ background:var(--tinta-3); }

.ficha-drop__acciones{ display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center; margin-top:var(--e4);
  padding-top:var(--e4); border-top:1px solid var(--linea); }
.ficha-drop__acciones small{ color:var(--tinta-3); font-size:.84rem; }

/* pie de sección: la próxima */
.drop__proxima{ margin-top:var(--e6); padding-top:var(--e4); border-top:1px solid var(--linea);
  display:grid; grid-template-columns:1fr auto; gap:var(--e4); align-items:center; }
.drop__proxima h3{ margin:0 0 6px; font-family:var(--display); font-weight:300; letter-spacing:.1em;
  text-transform:uppercase; font-size:clamp(1.2rem,2vw,1.6rem); }
.drop__proxima p{ margin:0; color:var(--tinta-2); max-width:56ch; }

/* ======================= VIAJA POR COLOMBIA · el descenso ===============
   Sustituye al álbum (17 sep 2026). La foto se queda PEGADA mientras la
   columna de paradas baja y va cambiando: el gesto de la ficha de Islandia
   —que a Juan le gusta— pero con la foto viva en vez de fija. Al lado, la
   tira vertical de miniaturas, idea sacada de los portafolios de fotógrafo
   de la Comunidad de Figma (Max Mavion, Livia Blake).
   Sobre AZUL TINTA, como lunas de miel y el cierre (Juan, 17 sep).
   En teléfono la escena se pega ARRIBA, bajo la cabecera, y la lista pasa
   por debajo: el mismo gesto, girado 90°.
   🔴 El estado activo lo lleva un manejador de SCROLL estrangulado por reloj,
   NI rAF NI IntersectionObserver: los dos se paran con la pestaña oculta.
   🔴 Las fotos se sirven a 2200px. Parece exagerado para una caja de 590px,
   pero el recorte alto sólo usa ~40% del ancho del original: a 1400 la foto
   se AMPLIABA un 37% en pantalla retina y se veía borrosa. Medido.        */
.pais{ background:var(--tinta); color:#fff; padding-block:var(--e6);
  /* ---- las tres medidas de las que depende todo lo demás -------------
     Una foto pegajosa deja de estarlo cuando su contenedor se acaba. Con
     la columna de paradas apenas más alta que la foto, el recorrido pegado
     era de 601px cuando hacían falta ~830: la foto se despegaba y las
     últimas paradas (Amazonas la peor, 228px arriba) se quedaban sin ella.
     Medido, no a ojo.
     La cuenta: para que la foto siga pegada cuando se enciende la ÚLTIMA
     parada, la columna tiene que rematar por debajo de la foto. Ese sobrante
     es --remate, y sale solo de las otras tres medidas: así funciona en
     cualquier pantalla sin números mágicos. */
  --tope-foto:   calc(var(--alto-cabecera,125px) + var(--e3));
  --alto-foto:   min(680px, calc(100svh - var(--tope-foto) - 26px));
  --linea-activa: 52svh;          /* debe coincidir con el 0.52 del JS */
  /* Sobrante ARRIBA y ABAJO de la columna de texto. La suma de los dos es
     una constante (≈ --alto-foto − 138px): es lo que la columna tiene que
     medir de más para que la foto esté pegada tanto en la primera parada
     como en la última. Subir --linea-activa pasa espacio de abajo a arriba
     y viceversa — por eso arreglar un extremo rompía el otro (Juan, 17 sep).
     El de arriba no va vacío: ahí vive la cabecera de la sección. */
  --entrada:     max(0px, calc(var(--linea-activa) - var(--tope-foto)));
  --remate:      max(0px, calc(var(--alto-foto) + var(--tope-foto)
                               - var(--linea-activa) - 110px)); }
  /* el 110 es el alto de la última parada, con margen. Medido: con 138 la
     foto se despegaba 22px a 1280×700. Si se cambia el cuerpo de las paradas,
     hay que volver a medir el `top` de la foto en la ÚLTIMA parada. */
.pais .regla{ background:var(--cielo); }
.pais .entradilla{ color:var(--cielo-txt); }
.pais__ruta{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(28px,4.5vw,68px); align-items:start; }

/* --- la escena pegajosa + la tira ------------------------------------- */
/* las dos columnas van en la MISMA fila: sin grid-row:1 el reparto
   automático manda la lista a una segunda fila y la izquierda sale vacía */
.pais__lienzo{ grid-column:2; grid-row:1; min-width:0; position:sticky;
  top:var(--tope-foto);
  display:flex; gap:12px; }
.pais__escena{ flex:1; min-width:0; position:relative; overflow:hidden;
  /* Grande a propósito: Juan la quiere llenando el cuadro (17 sep). Que sea
     alta NO alarga la sección —está pegada—: el largo lo manda la columna
     de paradas. El tope deja siempre aire bajo la cabecera. */
  height:var(--alto-foto);
  border-radius:var(--radio); background:#1b1560; }
/* Sólo fundido. Antes la foto activa hacía un zoom lento de 9 s (1.04 → 1)
   y, estando pegada, se leía como que la foto se movía sola mientras uno
   scrolleaba: «está patinando» (Juan, 17 sep). Una foto pegada tiene que
   estar QUIETA; lo único que cambia es cuál se ve. */
.pais__escena img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 600ms cubic-bezier(.16,.84,.26,1); }
.pais__escena img[data-on]{ opacity:1; }

.pais__rail{ display:flex; flex-direction:column; justify-content:center;
  gap:8px; flex:none; }
.pais__rail button{ display:block; padding:0; border-radius:2px;
  width:clamp(32px,3.2vw,42px); aspect-ratio:3/4; overflow:hidden;
  opacity:.5; filter:saturate(.8);
  transition:opacity var(--t-medio), filter var(--t-medio), transform var(--t-medio); }
.pais__rail button img{ width:100%; height:100%; object-fit:cover; }
.pais__rail button:hover{ opacity:.85; }
.pais__rail button[aria-current="true"]{ opacity:1; filter:none;
  transform:translateX(-5px) scale(1.06); }

/* --- la columna que baja ---------------------------------------------- */
/* la cabecera de la sección va DENTRO de la columna, no encima de todo:
   así el espacio que la foto necesita para llegar a su sitio lo ocupa el
   título en vez de quedar en blanco */
.pais__columna{ grid-column:1; grid-row:1; min-width:0; }
.pais__columna .cabeza-seccion{ min-height:var(--entrada);
  margin-bottom:var(--e4); }
.pais__paradas{ list-style:none; margin:0; padding:0 0 var(--remate); }
.parada{ --aire:clamp(10px,1.9vh,20px);
  position:relative; padding:var(--aire) 0 var(--aire) var(--e3);
  border-top:1px solid rgba(255,255,255,.16); }
.parada:first-child{ border-top:0; padding-top:0; }
/* La parada activa se REALZA; las otras NO se apagan.
   Atenuarlas (lo primero que probé, opacity .38) dejaba el texto por debajo
   de 4,5:1 y con cualquier opacidad legible el efecto desaparecía. Así que
   el foco se marca sumando: filo, color y número. */
.parada::before{ content:''; position:absolute; left:0; top:var(--aire);
  width:2px; height:0; border-radius:2px;
  background:linear-gradient(180deg,var(--cielo),var(--egeo-400));
  transition:height var(--t-lento); }
.parada:first-child::before{ top:0; }
.parada[data-on]::before{ height:calc(100% - var(--aire) * 2); }
.parada:first-child[data-on]::before{ height:calc(100% - var(--aire)); }
.parada__cab{ display:flex; align-items:baseline; gap:var(--e2); }
.parada__n{ font-family:var(--pesada); font-weight:700; font-size:1.4rem;
  line-height:1; color:rgba(142,195,247,.45); transition:color var(--t-medio); }
.parada[data-on] .parada__n{ color:var(--cielo); }
.parada__lat{ font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.18em; color:rgba(255,255,255,.62); }   /* 6,0:1 sobre la tinta */
.parada__lat::before{ content:''; display:inline-block; width:24px; height:1px;
  background:rgba(255,255,255,.3); vertical-align:middle; margin-right:10px; }
/* la región va DENTRO del nombre, no debajo: una fila menos por parada */
.parada__nombre{ margin:8px 0 0; font-family:var(--display); font-weight:300;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.05;
  font-size:clamp(1.2rem,2.1vw,1.65rem); color:rgba(255,255,255,.66);
  transition:color var(--t-medio);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; }
.parada[data-on] .parada__nombre{ color:#fff; }
.parada__region{ font-family:var(--cuerpo); font-weight:400; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cielo); }
.parada__linea{ margin:8px 0 0; color:var(--cielo-txt); max-width:58ch;
  font-size:.92rem; line-height:1.5; }
.parada__cta{ display:inline-flex; align-items:center; gap:8px;
  margin-top:10px; font-family:var(--display); font-weight:700;
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cielo); border-bottom:1px solid transparent;
  transition:border-color var(--t-rapido), color var(--t-rapido); }
.parada__cta::after{ content:'→'; transition:transform var(--t-rapido); }
.parada__cta:hover{ color:#fff; border-bottom-color:#fff; }
.parada__cta:hover::after{ transform:translateX(4px); }

/* --- girado 90°: la escena se pega arriba y la lista pasa por debajo --- */
@media (max-width:980px){
  .pais__ruta{ grid-template-columns:1fr; gap:var(--e3); }
  /* apilada, la lista va DESPUÉS en el DOM y se pintaba encima de la foto
     pegada: hace falta z-index (sticky sólo crea contexto si lo lleva) y un
     fondo que tape lo que pasa por debajo. El aire va DENTRO (padding), no
     en el top: con un hueco entre cabecera y escena el texto se colaba. */
  .pais__lienzo{ grid-column:1; grid-row:1; flex-direction:column; gap:10px;
    top:var(--alto-cabecera,65px); z-index:3;
    background:var(--tinta); padding:8px 0 12px; }
  /* en columna, flex:1 pone flex-basis:0 sobre el eje VERTICAL y la escena
     se aplasta a 0 de alto: aquí manda la altura, no el flex.
     El ancho se topa en 560px: a 980 la envoltura mide 885 y la foto salía
     como una franja de 3:1 que recortaba brutalmente cualquier vertical, y
     además pedía un original de 1770px de ancho sólo para ese caso. */
  .pais__escena{ flex:none; align-self:center;
    width:min(100%,560px); height:min(44vh,360px); }
  .pais__rail{ width:min(100%,560px); align-self:center; }
  /* en fila, las ocho se reparten el ancho: con anchos fijos no caben a 320
     y empujaban la escena 15px fuera de la página (medido en el barrido) */
  .pais__rail{ flex-direction:row; justify-content:flex-start; gap:8px; }
  .pais__rail button{ flex:1 1 0; width:auto; max-width:46px; }
  .pais__rail button[aria-current="true"]{ transform:translateY(-3px) scale(1.06); }
  .pais__columna{ grid-column:1; grid-row:2; }
  .pais__columna .cabeza-seccion{ min-height:0; margin-bottom:var(--e3); }
  .pais__paradas{ padding-bottom:0; }
  .parada{ --aire:14px; }
}
@media (prefers-reduced-motion:reduce){
  .pais__escena img{ animation:none; transition:opacity 1ms; transform:none; }
  .parada::before{ transition:none; }
}

/* ======================= EXPEDICIONES PIRRY =============================
   Pedida por Juan (17 sep 2026) sobre BLANCO: sus dos vecinas —Colombia
   arriba y el cierre abajo— son azules, así que esta sección es el respiro
   de la página, no otro golpe.

   🔴 Es un ANTECEDENTE, no una oferta: el programa con Pirry se cerró, pero
   NO se anuncia —los verbos van en pasado y se acaba ahí—. Sin botón: la
   sección termina en las fotos. Su trabajo es dar credibilidad.

   El titular dice la alianza EN UNA FRASE. La primera versión era un lockup
   «SANTORINI × PIRRY» con la fina de la casa contra `--pesada`, y Juan lo
   tumbó con razón: el peso de Oswald se comía a Santorini aunque fuera más
   pequeño de cuerpo. La solución no es empatar tamaños a ojo sino no
   enfrentarlos: los dos nombres van AL MISMO tamaño y peso en una línea de
   crédito, como los títulos de una película.                             */
.pirry{ background:var(--cal); }
/* Dos columnas: el texto a la izquierda y los dos vídeos en el hueco que
   quedaba a su derecha (Juan, 17 sep). La columna de vídeo se topa en 380px a
   propósito: el más pequeño mide 480px de ancho reales, así que estirarlo más
   sólo serviría para verlo peor. «No muy grandes», dijo, y además es lo que
   aguanta el material. */
/* Las dos columnas sólo a partir de 981px. Por debajo, la izquierda se queda
   en ~290px y «VIAJAMOS CON PIRRY ALREDEDOR DEL MUNDO» —el titular más largo
   de la página— se parte en SEIS líneas. Medido: 6 líneas a 861px, 5 a 900,
   4 a partir de 980. Apilado se lee bien en toda esa franja. */
.pirry__cuerpo{ display:grid; gap:var(--e5); }
@media (min-width:981px){
  .pirry__cuerpo{ grid-template-columns:minmax(0,1fr) minmax(0,380px);
    gap:var(--e6); align-items:start; }
}
.pirry__cabeza{ max-width:62ch; }

.pirry__videos{ display:flex; flex-direction:column; gap:var(--e3); }
.pirry__video{ margin:0; }
.pirry__video video{ display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; background:var(--tinta); border-radius:var(--radio); }
.pirry__video figcaption{ margin-top:8px; font-family:var(--display); font-weight:700;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--egeo-600); }
/* Sin rótulo encima: «Expediciones Pirry» ya vive en el texto y en el enlace del pie y en
   el ancla, y cualquier etiqueta de tiempo («antes», «lo que hicimos») es
   justo lo que Juan pidió no decir. El titular se equilibra solo. */
.pirry__cabeza h2{ margin:0; }
.pirry__titular{ text-wrap:balance; }

/* la línea de crédito: dos nombres del mismo tamaño separados por un filete */
.pirry__credito{ display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(8px,1.2vw,16px); margin:var(--e3) 0 0;
  font-family:var(--display); font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--egeo-600); }
.pirry__credito i{ display:block; width:clamp(18px,3vw,44px); height:1px;
  background:var(--linea-2); flex:none; }
/* Inter sólo se carga en 400 y 600. Este <b> pedía 700 y el navegador lo
   falsificaba engordando los trazos: se veía sucio al lado del resto. */
.pirry__texto b{ font-weight:600; }
.pirry__texto{ margin:var(--e3) 0 0; color:var(--tinta-2); max-width:62ch;
  font-size:1.02rem; }

/* --- huecos a la espera de foto -------------------------------------- */
[data-vacio]{ display:grid; place-items:center;
  border:1px dashed var(--linea-2); background:var(--cal-2); }
[data-vacio]::after{ content:attr(data-vacio); font-family:var(--display);
  font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3); text-align:center; padding:0 var(--e2); }
[data-vacio]:has(img)::after{ content:none; }   /* si olvidan quitar el atributo */

/* --- fotos de relleno: imposible olvidarlas -------------------------- */
[data-provisional]::after{ content:'Provisional'; position:absolute; z-index:2;
  left:0; top:0; padding:5px 10px; background:var(--tinta); color:#fff;
  font-family:var(--display); font-weight:700; font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase; border-radius:0 0 var(--radio) 0; }

@media (max-width:980px){
  /* apilado: el texto y, debajo, los dos vídeos uno al lado del otro */
  .pirry__videos{ flex-direction:row; flex-wrap:wrap; }
  .pirry__video{ flex:1 1 260px; min-width:0; }
}

/* ---- cierre · el formulario --------------------------------------------
   Juan lo pidió como formulario manteniendo el azul (17 sep 2026).
   Dos columnas: el argumento a la izquierda, el formulario a la derecha —
   centrado, un formulario parece un trámite; a un lado, parece la
   continuación de la frase. Campos con SUBRAYADO, no con cajas: la marca
   está hecha de líneas finas y el azul ya es una caja de por sí.          */
.cierre{ position:relative; padding-block:var(--e7);
  background:var(--tinta); color:#fff; overflow:hidden; }
.cierre__arco{ position:absolute; top:-90px; left:50%; transform:translateX(-50%);
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(142,195,247,.22), transparent 62%); }
.cierre__cuerpo{ position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px);
  align-items:start; }
.cierre h2{ margin:var(--e3) 0; }
.cierre p{ color:rgba(255,255,255,.82); max-width:42ch; margin:0; }
.cierre .rotulo{ color:var(--cielo); }

.formulario{ display:grid; grid-template-columns:1fr 1fr;
  gap:var(--e4) var(--e3); padding-top:6px; }
.campo{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{ font-family:var(--display); font-weight:700; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cielo);
  transition:color var(--t-rapido); }
.campo:focus-within label{ color:#fff; }
.campo input, .campo select{
  -webkit-appearance:none; appearance:none; width:100%; max-width:100%;
  background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.38);
  border-radius:0;                       /* Safari redondea los input por su cuenta */
  color:#fff; font:inherit; font-size:1.02rem; line-height:1.4;
  padding:9px 0 15px;                    /* 48px de alto: objetivo táctil */
  transition:border-color var(--t-rapido); }
.campo input::placeholder{ color:rgba(255,255,255,.66); }   /* 4.9:1 sobre la tinta */
.campo input:hover, .campo select:hover{ border-bottom-color:rgba(255,255,255,.62); }
.campo input:focus, .campo select:focus{ border-bottom-color:var(--cielo); }
.campo input:focus-visible, .campo select:focus-visible{
  outline:2px solid var(--cielo); outline-offset:5px; }
/* el número sin las flechitas: estorban y cada navegador las pinta distinto */
.campo input[type=number]::-webkit-outer-spin-button,
.campo input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.campo input[type=number]{ -moz-appearance:textfield; }
/* el desplegable: la lista la pinta el sistema, así que sólo se viste el cierre */
.campo--sel{ position:relative; }
.campo--sel::after{ content:''; position:absolute; right:2px; bottom:20px;
  width:9px; height:9px; border-right:1.5px solid var(--cielo);
  border-bottom:1.5px solid var(--cielo); transform:rotate(45deg);
  pointer-events:none; }
.campo select{ cursor:pointer; padding-right:26px; }
.campo select option{ color:var(--tinta); background:#fff; }   /* Windows los hereda */
.campo__error{ font-size:.82rem; color:#FFD9D9; }

.formulario__pie{ flex-direction:row; align-items:center; flex-wrap:wrap;
  gap:var(--e2) var(--e3); margin-top:var(--e2); }
.formulario__nota{ margin:0; font-size:.82rem; color:rgba(255,255,255,.72);
  max-width:30ch; }
.campo--invalido input{ border-bottom-color:#FFD9D9; }

@media (max-width:980px){
  .cierre__cuerpo{ grid-template-columns:1fr; gap:var(--e5); }
  .cierre p{ max-width:56ch; }
  /* al apilarse, un campo de texto de 885px de ancho es absurdo */
  .formulario{ max-width:680px; }
}
@media (max-width:560px){
  .formulario{ grid-template-columns:1fr; gap:var(--e3); }
  .formulario__pie{ margin-top:var(--e2); }
}

/* ---- pie ---- */
.pie{ background:var(--cal-2); padding-block:var(--e5) var(--e4); font-size:.9rem; }
.pie__fila{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--e4);
  padding-bottom:var(--e4); border-bottom:1px solid var(--linea); }
.pie img{ height:44px; width:auto; margin-bottom:var(--e2); }
.pie h2{ font-family:var(--display); font-weight:700; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); margin:0 0 var(--e2); }
.pie ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pie a:hover{ color:var(--cupula); }
.pie__legal{ display:flex; flex-wrap:wrap; gap:var(--e2); justify-content:space-between;
  padding-top:var(--e3); color:var(--tinta-3); font-size:.8rem; }
.pie__hermana{ color:var(--tinta-2); }
.pie__hermana a{ border-bottom:1px solid var(--linea-2); }
.pie__hermana a:hover{ color:var(--cupula); border-color:var(--cupula); }

/* ---- aparición al hacer scroll ---- */
.aparece{ opacity:0; transform:translateY(22px);
  transition:opacity 620ms cubic-bezier(.16,.84,.26,1), transform 620ms cubic-bezier(.16,.84,.26,1); }
.aparece[data-visible="si"]{ opacity:1; transform:none; }

/* ---- botón flotante de WhatsApp ---- */
.flotante{ position:fixed; right:22px; bottom:22px; z-index:70;
  width:58px; height:58px; border-radius:50%; background:var(--cupula);
  display:grid; place-items:center; color:#fff;
  box-shadow:0 10px 30px -8px rgba(45,67,184,.7);
  transition:transform var(--t-rapido), background var(--t-rapido); }
.flotante:hover{ transform:scale(1.07); background:var(--cupula-alt); }
/* Cuando el flotante tapa otro botón se retira a un lado en vez de taparlo.
   No desaparece —sigue siendo el acceso rápido a WhatsApp— sólo se encoge y
   se corre al borde. Lo marca el JS con data-estorba. */
.flotante[data-estorba="si"]{ transform:translateX(38%) scale(.72); opacity:.45; }
.flotante[data-estorba="si"]:hover,
.flotante[data-estorba="si"]:focus-visible{ transform:none; opacity:1; }
/* Con movimiento reducido NO se anula el desplazamiento: apartarse de encima de
   un botón no es una animación decorativa, es la función. Lo que se quita es la
   transición — el botón salta a su sitio en vez de deslizarse. */
@media (prefers-reduced-motion: reduce){
  .flotante{ transition:none; }
  .flotante[data-estorba="si"]{ transform:translateX(38%) scale(.72); opacity:.45; }
  .flotante[data-estorba="si"]:hover,
  .flotante[data-estorba="si"]:focus-visible{ transform:none; opacity:1; }
}
.flotante svg{ width:28px; height:28px; }

/* ============================ responsive =============================== */
@media (max-width:1080px){
  .pie__fila{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  :root{ --e6:72px; --e7:84px; }
  .envoltura{ width:calc(100% - var(--e3)*2); }
  .cabecera__cuerpo{ padding-block:var(--e3); }
  .cabecera[data-fija="si"] .cabecera__cuerpo{ padding-block:12px; }
  .cabecera__logo img{ height:62px; }
  .cabecera[data-fija="si"] .cabecera__logo img{ height:44px; }
  .cabecera__nav{ display:none; }
  .cabecera__menu{ display:flex; top:50%; transform:translateY(-50%); }
  .cabecera[data-fija="si"] .cabecera__menu{ top:50%; }
  .cabecera__nav[data-abierto="si"]{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#fff; border-bottom:1px solid var(--linea);
    padding:var(--e2) var(--e3) var(--e3); margin:0; }
  .cabecera__nav[data-abierto="si"] a:not(.btn){ width:100%; padding:14px 0; border-bottom:1px solid var(--linea); }
  .cabecera__nav[data-abierto="si"] .btn{ width:100%; margin-top:var(--e2); }
  :root{ --alto-cabecera:65px; }
  body{ padding-top:99px; }
  .calado{ min-height:calc(100svh - 99px); padding-block:var(--e3) var(--e4); }
  .calado__titulo{ font-size:clamp(3.4rem,17vw,7rem); }
  .calado__pie .hero__acciones{ width:100%; }
  .calado__pie .hero__acciones .btn{ flex:1 1 150px; }
  .clientes{ padding-block:var(--e4) var(--e5); }
  .clientes__pista{ animation-duration:34s; }
  .pie__fila{ grid-template-columns:1fr; }
}
/* ============================================================
   EL CALADO EN EL TELÉFONO — letras grandes de verdad
   ------------------------------------------------------------
   Juan (17 sep, ya publicado): «el texto del hero en el celular es muy
   pequeño, las letras son pequeñas y no se ve bien».

   Tenía razón, pero la causa no era el tamaño: era que «QUIERAS IR» iba
   OBLIGADO a caber en un renglón. Con `width:max-content` la línea no se parte
   nunca, así que la palabra más larga le ponía techo a toda la tipografía —
   el titular ya usaba el 93% del ancho y no había de dónde sacar más.

   Dejándola partirse, el techo lo pone «QUIERAS» en vez de «QUIERAS IR» y la
   letra crece un 34% (64px → 86px en un teléfono de 375). Queda en tres
   renglones: A DONDE / QUIERAS / IR.

   🔴 23vw es el MÁXIMO, medido renglón a renglón de 320 a 700px. A 23,5vw se
   parte «A DONDE» en las pantallas de 320 y queda una «A» sola, que es feo.
   El tope de 7rem hace que a partir de 640px vuelva solo a dos renglones y
   empalme sin salto con el tamaño de escritorio en el corte de 700px.
   ⚠️ Si se cambia el titular del hero, hay que volver a medir esto: el número
   depende de la palabra más larga.
   ============================================================ */
@media (max-width:700px){
  .calado__linea{ width:100%; }
  .calado__titulo{ font-size:clamp(3rem,23vw,7rem); }
}

@media (max-width:430px){
  /* Con el logo centrado y el botón de menú fijo a la derecha, el hueco entre
     ambos se cierra al estrecharse: a 320px medía 0px y se tocaban. A 50px de
     alto (148 de ancho) quedan 18px de aire incluso en el caso más estrecho —
     y sigue siendo más grande que los 40px que tenía antes del cambio. */
  .cabecera__logo img{ height:50px; }
  .cabecera[data-fija="si"] .cabecera__logo img{ height:40px; }
}

@media (max-width:520px){
  /* El tracking .14em de la Josefin es carísimo en ancho: "EXPEDICIONES" medía
     288px contra 257 de caja y desbordaba el documento 7px a 320. Se afloja el
     tamaño y se cierra el tracking SÓLO aquí — arriba la composición no cambia. */
  .display{ letter-spacing:.08em; }
  /* El suelo del clamp sigue en 1,55rem: a 320px «LUNAS DE MIEL» mide 231 de 257
     y esos 26px de holgura son todo lo que hay. El crecimiento se lo lleva el
     término en vw, que es el que manda de 360px para arriba — ahí sí sube. */
  .t-1{ font-size:clamp(1.55rem, 7.9vw, 2.45rem); }   /* el techo lo fija el titular de Pirry justo en 520px */
  .t-2{ font-size:clamp(1.3rem, 6.2vw, 1.9rem); }

  .calado__credito{ display:none; }
  .hero__acciones .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .aparece{ opacity:1; transform:none; }
  /* sin movimiento: el calado aparece entero y la foto no rota ni deriva */
  .calado__capa, .calado__linea, .calado__entra{ animation:none; }
  /* la banda de clientes se queda quieta y se puede recorrer con el dedo */
  .clientes__pista{ animation:none; }
  .clientes__banda{ overflow-x:auto; scrollbar-width:none; }
  .clientes__banda::-webkit-scrollbar{ display:none; }
}


/* Logo en PNG con transparencia real (recortado del JPEG original por inundación
   desde los bordes: en el wordmark se calan las contraformas de la O y la g, en la
   ilustración se conservan los muros encalados). Ya no hace falta mix-blend-mode.
   ⚠️ El wordmark es azul marino: NO ponerlo sobre fondo oscuro, desaparece. */
.marca-img{ height:auto; }

/* ============================ responsive · secciones nuevas ============ */
@media (max-width:1080px){
}
@media (max-width:860px){
  .atlas__abierto{ grid-template-columns:1fr; }
  /* móvil: el abanico se vuelve acordeón vertical. Se anima height, y también
     a propósito: es la misma interacción girada 90 grados. */
  .abanico{ flex-direction:column; height:auto; gap:6px; }
  .pliegue{ flex:none; height:54px; transition:height 520ms cubic-bezier(.16,.84,.26,1); }
  .pliegue[data-abierta="si"]{ height:min(66vh,400px); }
  .pliegue__vertical{ writing-mode:horizontal-tb; transform:none; left:var(--e3); bottom:auto;
    top:50%; translate:0 -50%; }
  .pliegue__pie{ padding:var(--e3); }
  .pliegue__nombre{ white-space:normal; }
  /* Punta Cana es la única lámina con foto VERTICAL (2666x4000, 17 sep 2026).
     En escritorio la caja es alta y el recorte es horizontal, así que el centro
     vale; en el acordeón la caja se vuelve apaisada (797x400) y el recorte pasa
     a ser VERTICAL: centrada se come la piscina y sólo deja troncos. Se baja. */
  .pliegue__foto[src*="puntacana"]{ object-position:50% 70%; }
  .lunas__cabeza{ grid-template-columns:1fr; align-items:start; }
  .ficha-drop{ grid-template-columns:1fr; gap:var(--e4); }
  /* Apilado no hay espejo que valga: las asignaciones de columna de la ficha
     invertida crearían una segunda columna implícita y la foto se saldría. */
  .ficha-drop--espejo{ grid-template-columns:1fr; }
  .ficha-drop--espejo .ficha-drop__foto{ grid-column:1; grid-row:1; }
  .ficha-drop--espejo .ficha-drop__cuerpo{ grid-column:1; grid-row:2; }
  .ficha-drop + .ficha-drop{ margin-top:var(--e6); padding-top:var(--e5); }
  .ficha-drop__foto{ position:static; aspect-ratio:16/9; }
  .itin ol{ grid-template-columns:1fr; }
  .incluye{ grid-template-columns:1fr; gap:var(--e3); }
  .drop__proxima{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .specs{ grid-template-columns:1fr; }
  .specs dt{ padding-bottom:2px; border-top:1px solid var(--linea); }
  .specs dd{ padding-top:0; border-top:0; }
}