/* ============================================================
   EXCURSIÓN DE ÉFESO — Sistema de diseño «Archivo Egeo»
   Mármol y Luz. Tinta, bronce, pátina.
   ============================================================ */

/* ---------- 0. Tipografías, servidas desde el propio dominio ----------
   Antes venían de fonts.googleapis.com. Eso metía una hoja de estilos de un
   TERCERO en la ruta crítica: antes de pintar nada el navegador tenía que
   resolver un DNS, negociar TLS y esperar una vuelta completa a un servidor
   de Google, y después repetirlo con fonts.gstatic.com para los ficheros.
   Ahora los .woff2 viajan en el propio zip y las declaraciones están aquí
   dentro, así que la web **no hace ni una sola petición a terceros**.

   Dos detalles que importan:
   · Fraunces y Archivo son tipos VARIABLES: un único fichero cubre todo el
     rango de grosores. Google servía 22 bloques @font-face apuntando a 13
     ficheros; deduplicados quedan 10, y sin el subconjunto vietnamita, 396 KB.
   · Hace falta `latin-ext` además de `latin`: ahí viven ş, ı, ğ e İ, o sea
     Kuşadası, Şirince, Selçuk e İzmir. El acento español sí está en `latin`.
   Las rutas son relativas a esta hoja (`../fonts/`) para que también funcionen
   abriendo la web desde el disco, sin servidor.
   Y de paso: ya no se envía la IP de ningún visitante europeo a Google solo
   por cargar una tipografía. */
@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/fraunces-var-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: Fraunces;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/fraunces-var-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: Fraunces;
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/fraunces-italic-var-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: Fraunces;
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/fraunces-italic-var-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: Archivo;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/archivo-var-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: Archivo;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/archivo-var-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: DM Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-mono-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: DM Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-mono-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: DM Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dm-mono-500-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: DM Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dm-mono-500-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;
}

/* ---------- 1. Tokens ---------- */
:root {
  --tinta: #121a1f;
  --tinta-2: #1b262d;
  --tinta-3: #24323a;
  --marmol: #f5f2ec;
  --marmol-2: #eae4d9;
  --marmol-3: #ded6c8;
  --bronce: #c08a3e;
  --bronce-claro: #e3b36b;
  --bronce-hondo: #875e26;
  /* Bronce para titulares grandes sobre fondo claro. El bronce de marca
     (#C08A3E) da 2,71:1 sobre marmol: no llega ni al 3:1 que exige la WCAG
     2.1 AA para texto grande. Este da 3,65:1 sobre marmol y 3,22:1 sobre
     marmol-2, y a simple vista sigue siendo el mismo bronce. */
  --bronce-titular: #a37535;
  --patina: #2e6157;
  --patina-claro: #4d9184;
  --texto: #1e262b;
  --suave: #5c666d;
  --linea: rgba(18, 26, 31, 0.14);
  --linea-fuerte: rgba(18, 26, 31, 0.26);
  --linea-clara: rgba(245, 242, 236, 0.18);

  --fuente-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --fuente-texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fuente-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --step--2: clamp(0.72rem, 0.7rem + 0.12vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.11rem);
  --step-1: clamp(1.18rem, 1.09rem + 0.44vw, 1.42rem);
  --step-2: clamp(1.45rem, 1.27rem + 0.9vw, 2rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.75vw, 2.9rem);
  --step-4: clamp(2.25rem, 1.6rem + 3.2vw, 4.2rem);
  --step-5: clamp(2.7rem, 1.6rem + 5.4vw, 6.4rem);

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --header-h: 76px;
  --topbar-h: 38px;
  --ancho: 1240px;
  --prosa: 68ch;
  --radio: 2px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--marmol);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--step-0);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Todo el sistema de movimiento es mejora progresiva: los estados iniciales
   ocultos solo existen si hay JavaScript vivo para revelarlos. Sin JS —o si
   main.js falla— la web se ve entera, sin animaciones.

   RENDIMIENTO (corregido el 2026-08-19): antes esto era
   `.js body { opacity: 0 }` y el 1 se lo ponía main.js al terminar de
   analizar el HTML. Es decir: la página entera se quedaba invisible hasta
   que se descargaba y ejecutaba un script diferido. Eso empuja hacia atrás
   el LCP —la métrica de Core Web Vitals que Google usa para posicionar— sin
   ganar nada, porque la animación no necesita JavaScript para nada.
   Ahora la entrada la hace una animación CSS que arranca en el primer
   pintado. El JavaScript ya no está en la ruta crítica del renderizado.

   Se probó a sustituirlo por una animación CSS de entrada sobre <body>, y se
   descartó: cualquier fundido de la PÁGINA ENTERA tiene el mismo modo de
   fallo catastrófico —si el navegador no llega a ejecutarlo (pestaña en
   segundo plano, motor sin composición, animación pausada), no se ve nada—.
   Ningún fundido decorativo justifica arriesgar la página completa. La
   entrada escalonada la siguen haciendo .entra, .mascara y .rev, que sí
   tienen red de seguridad en main.js y solo afectan a un bloque cada uno.
   La salida sí se conserva: la dispara un clic, así que no puede quedarse
   colgada, y main.js la deshace en `pageshow` al volver con el botón atrás. */
.js body.saliendo { opacity: 0; transition: opacity 0.18s ease; }

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

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.2; }
h4 { font-size: var(--step-0); font-family: var(--fuente-texto); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* La firma tipográfica: una palabra en cursiva bronce por titular. */
.wonk { font-style: italic; color: var(--bronce-titular); font-weight: 400; }
.seccion-oscura .wonk, .hero .wonk, .cta-banda .wonk { color: var(--bronce-claro); }

a { color: inherit; }

.container { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
@media (min-width: 900px) { .container { width: min(100% - 5rem, var(--ancho)); } }

.seccion { padding: clamp(3.5rem, 7vw, 7.5rem) 0; position: relative; }
.seccion-ajustada { padding: clamp(2.5rem, 4.5vw, 4.5rem) 0; }
.seccion-marmol-2 { background: var(--marmol-2); }
.seccion-oscura { background: var(--tinta); color: var(--marmol); }
.seccion-oscura h2, .seccion-oscura h3 { color: var(--marmol); }
.seccion-oscura p { color: rgba(245, 242, 236, 0.76); }

/* ---------- 3. Etiquetas mono: la voz de archivo ---------- */
.etiqueta {
  display: inline-block;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronce-hondo);
  margin-bottom: 1.1rem;
}
.seccion-oscura .etiqueta, .hero .etiqueta, .cta-banda .etiqueta { color: var(--bronce-claro); }

/* Numeración de índice: 01 — TÍTULO, con filete */
.indice {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--suave);
  margin-bottom: 1.4rem;
}
.indice .num { color: var(--bronce-hondo); font-weight: 500; }
.indice::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linea);
  transform-origin: left;
  transition: transform 1.1s var(--curva) 0.15s;
}
.anima .indice::after { transform: scaleX(0); }
.is-in .indice::after, .indice.is-in::after { transform: scaleX(1); }
.seccion-oscura .indice { color: rgba(245, 242, 236, 0.6); }
.seccion-oscura .indice::after { background: var(--linea-clara); }

.cabecera-seccion { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.cabecera-seccion.centro { margin-inline: auto; text-align: center; }
.cabecera-seccion.centro .indice { justify-content: center; }
.cabecera-seccion.centro .indice::after { display: none; }
.cabecera-seccion p { color: var(--suave); font-size: var(--step-1); line-height: 1.55; }
.seccion-oscura .cabecera-seccion p { color: rgba(245, 242, 236, 0.72); }

/* ---------- 4. Botones ----------
   CONTRASTE (medido el 2026-08-19, WCAG 2.2 AA 1.4.3):
   el botón primario era blanco sobre bronce #C08A3E = **3,02:1**. La letra del
   botón mide 13–15 px, o sea texto normal: necesita 4,5:1 y no llegaba. En vez
   de tocar el bronce de marca —que es la firma visual de la web— se cambia el
   color de la LETRA a tinta: tinta sobre bronce da **5,82:1**. El botón sigue
   siendo exactamente del mismo color; solo deja de llevar letra blanca.
   El estado de hover era el otro fallo: al retirarse el relleno, la letra
   pasaba a bronce sobre mármol = **2,71:1**, ilegible. Ahora existe
   `--btn-hover`, que en fondo claro es bronce hondo (5,14:1) y en fondo oscuro
   bronce claro (9,16:1); el borde lo acompaña para cumplir 1.4.11. */
.btn {
  --btn-fondo: var(--bronce);
  --btn-texto: var(--tinta);
  --btn-hover: var(--bronce-hondo);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.85rem;
  font-family: var(--fuente-texto);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-texto);
  background: transparent;
  border: 1px solid var(--btn-fondo);
  border-radius: var(--radio);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.32s var(--curva), border-color 0.32s var(--curva), letter-spacing 0.32s var(--curva);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fondo);
  transform-origin: left;
  transition: transform 0.42s var(--curva);
}
.btn:hover, .btn:focus-visible { letter-spacing: 0.085em; }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(0); }
.btn:hover, .btn:focus-visible { color: var(--btn-hover); border-color: var(--btn-hover); }

.btn-bronce { --btn-fondo: var(--bronce); --btn-texto: var(--tinta); --btn-hover: var(--bronce-hondo); }
.btn-tinta { --btn-fondo: var(--tinta); --btn-texto: var(--marmol); --btn-hover: var(--tinta); }
.btn-claro { --btn-fondo: var(--marmol); --btn-texto: var(--tinta); --btn-hover: var(--tinta); }
/* Sobre fondo oscuro el bronce hondo se queda en 3,07:1 como texto: el hover
   usa bronce claro (9,16:1 sobre tinta). */
.seccion-oscura .btn-bronce, .hero .btn-bronce, .cta-banda .btn-bronce,
.acceso .btn-bronce, .tarjeta-reserva .btn-bronce, .site-footer .btn-bronce,
.barra-accion .btn-bronce { --btn-hover: var(--bronce-claro); }
.seccion-oscura .btn-claro, .cta-banda .btn-claro, .hero .btn-claro { --btn-hover: var(--marmol); }
.btn-fantasma {
  border-color: currentColor;
  color: inherit;
  opacity: 0.9;
}
.btn-fantasma::before { display: none; }
/* El botón fantasma no tiene relleno que retirar, así que NO debe heredar el
   color de hover del botón sólido: sobre el hero oscuro lo dejaría en bronce
   hondo, 3,07:1. Se queda con el color del contexto (mármol sobre tinta,
   13,75:1; tinta sobre mármol, lo mismo). */
.btn-fantasma:hover, .btn-fantasma:focus-visible {
  opacity: 1;
  background: rgba(245, 242, 236, 0.1);
  color: inherit;
  border-color: currentColor;
}
.seccion-oscura .btn-fantasma:hover { background: rgba(245, 242, 236, 0.12); }

.acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

/* Enlace con subrayado que se dibuja */
.enlace-linea {
  font-family: var(--fuente-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--bronce-hondo);
  position: relative;
  padding-bottom: 3px;
  white-space: nowrap;
}
.enlace-linea::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.32s var(--curva);
}
.enlace-linea:hover::after, .enlace-linea:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.seccion-oscura .enlace-linea { color: var(--bronce-claro); }

/* Enlaces internos automáticos dentro de la prosa */
/* El subrayado es lo único que distingue un enlace dentro de la prosa, así que
   es un objeto gráfico con significado: el bronce de marca daba 2,71:1 sobre
   mármol. Con bronce hondo son 5,14:1 y a la vista es el mismo trazo. */
.ilink {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--bronce-hondo), var(--bronce-hondo));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size 0.3s var(--curva), color 0.3s var(--curva);
}
.ilink:hover { color: var(--bronce-hondo); background-size: 100% 2px; }

:focus-visible { outline: 2px solid var(--bronce-hondo); outline-offset: 3px; }

/* ---------- 5. Cabecera ---------- */
.topbar {
  background: var(--tinta);
  color: rgba(245, 242, 236, 0.72);
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.05em;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
}
.topbar-inner { display: flex; align-items: center; gap: 0.85rem; }
.topbar a { color: rgba(245, 242, 236, 0.72); text-decoration: none; transition: color 0.25s; }
.topbar a:hover { color: var(--bronce-claro); }
.topbar-sep { color: var(--bronce); }
.topbar-licencia { white-space: nowrap; }

.barra-idiomas { display: flex; gap: 0.3rem; margin-left: auto; }
.btn-idioma {
  width: 30px; height: 20px;
  padding: 0; border: 1px solid rgba(245, 242, 236, 0.22);
  background: none; cursor: pointer; line-height: 0;
  border-radius: 1px;
  opacity: 0.55;
  transition: opacity 0.25s var(--curva), border-color 0.25s var(--curva), transform 0.25s var(--curva);
}
.btn-idioma svg { width: 100%; height: 100%; display: block; }
.btn-idioma:hover { opacity: 1; transform: translateY(-1px); }
.btn-idioma.activa { opacity: 1; border-color: var(--bronce); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--marmol);
  border-bottom: 1px solid var(--linea);
}
.site-header.encogida { box-shadow: 0 1px 24px rgba(18, 26, 31, 0.08); }
.site-header.encogida .topbar { height: 0; overflow: hidden; }
.topbar { transition: height 0.35s var(--curva); }

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.marca { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.marca img { height: 46px; width: auto; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  position: relative;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--texto);
  padding: 0.4rem 0;
  display: block;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--bronce);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.34s var(--curva);
}
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.site-nav a[aria-current] { color: var(--bronce-hondo); }

.header-cta { padding: 0.7rem 1.3rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 12px;
  width: 20px; height: 1.5px;
  background: var(--texto);
  transition: transform 0.34s var(--curva), opacity 0.2s;
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 21.5px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Línea de progreso de lectura */
.progreso {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--bronce);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 2;
}

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .site-nav {
    position: fixed;
    inset: calc(var(--header-h) + var(--topbar-h)) 0 auto 0;
    background: var(--marmol);
    border-bottom: 1px solid var(--linea);
    padding: 1rem 0 1.6rem;
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--curva), transform 0.3s var(--curva);
    max-height: calc(100dvh - var(--header-h) - var(--topbar-h));
    overflow-y: auto;
  }
  .site-header.encogida .site-nav { inset-block-start: var(--header-h); }
  .site-nav.abierta { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav ul { flex-direction: column; gap: 0; width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
  .site-nav li { border-bottom: 1px solid var(--linea); }
  .site-nav a { padding: 1rem 0; font-size: var(--step-1); font-family: var(--fuente-display); }
  .site-nav a::after { display: none; }
  .topbar-licencia { display: none; }
}
@media (max-width: 460px) {
  .topbar-inner > a[href^='mailto'] { display: none; }
  .topbar-sep { display: none; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  color: var(--marmol);
  overflow: hidden;
  isolation: isolate;
  background: var(--tinta);
}
/* Altura del hero. Antes era `calc(100svh - var(--header-h))`, pero la
   cabecera real mide 114 px (cabecera + barra superior) y el relleno de
   8rem/6,5rem sumaba por encima: en un teléfono de 390×844 el hero medía
   1.099 px, o sea 1,3 pantallas, y el botón principal caía en el píxel 836 —
   fuera del primer pantallazo. La regla de diseño pide ≤ 72 vh en escritorio
   y ≤ ~55 vh en el teléfono (ver la sección 33 para el móvil). */
.hero-inicio { min-height: min(72svh, calc(100svh - var(--header-h) - var(--topbar-h))); padding: 2.6rem 0 2.4rem; }
.hero-pagina { min-height: min(52svh, 460px); padding: 3.4rem 0 2.8rem; }

.hero-fondo {
  position: absolute;
  inset: -8% 0 0 0;
  z-index: -2;
  will-change: transform;
}
.hero-fondo img { width: 100%; height: 116%; object-fit: cover; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(18, 26, 31, 0.94) 0%, rgba(18, 26, 31, 0.72) 34%, rgba(18, 26, 31, 0.34) 68%, rgba(18, 26, 31, 0.18) 100%);
}
.hero-contenido { position: relative; max-width: 60ch; }
/* El titular del inicio ya trae sus saltos de línea en el marcado (una
   .mascara por línea), así que no necesita medida: constreñir el bloque
   entero aquí aplastaría también la entradilla y el raíl de confianza. */
.hero-inicio .hero-contenido { max-width: min(100%, 66rem); }
/* El titular cartel de la portada medía 99 px en un escritorio de 1366 px —
   5,6 veces el cuerpo de texto— y ocupaba tres líneas de 105 px. Entre eso y el
   relleno, el hero medía 814 px en una pantalla de 768: el botón principal se
   quedaba justo por debajo del pliegue. Ahora se topa en 3,9rem (62 px, 3,5×),
   que sigue siendo un titular de portada pero deja el botón y el raíl de
   confianza dentro del primer pantallazo. */
.hero h1 { font-size: clamp(2.2rem, 4.9vw, 3.9rem); margin-bottom: 1.3rem; }
.hero-pagina h1 { font-size: var(--step-4); max-width: 20ch; }
.hero .entradilla {
  font-size: var(--step-1);
  line-height: 1.58;
  color: rgba(245, 242, 236, 0.86);
  max-width: 54ch;
}
.hero-inicio .entradilla { max-width: 60ch; }

/* Máscara para el titular: cada línea sube desde su propia caja.
   Esto lo disparaba JavaScript (body.cargada). Significaba que el TITULAR Y
   LA ENTRADILLA DE LA PORTADA —lo más importante de la página— quedaban
   invisibles si main.js no llegaba a ejecutarse: un corte de red en un
   fichero de 8 KB, una extensión, un error de JS. Ahora la entrada la hace
   sola la animación CSS, con relleno `backwards` para el retardo. Sin
   JavaScript en medio hay un punto de fallo menos y el texto se pinta antes. */
.mascara { display: block; overflow: hidden; }
.anima .mascara > span {
  display: block;
  animation: subirMascara 0.95s var(--curva-expo) backwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.09s);
}
@keyframes subirMascara { from { transform: translateY(110%); } to { transform: translateY(0); } }

.anima .entra {
  animation: entrarHero 0.75s var(--curva) backwards;
  animation-delay: calc(0.7s + var(--i, 0) * 0.08s);
}
@keyframes entrarHero { from { opacity: 0; transform: translateY(18px); } }
@keyframes entrar { to { opacity: 1; transform: none; } }

.hero-datos {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: rgba(245, 242, 236, 0.6);
  text-align: right;
  line-height: 2.2;
  border-right: 1px solid var(--bronce);
  padding-right: 1.1rem;
}
.hero-datos b { display: block; color: var(--bronce-claro); font-weight: 500; }
@media (max-width: 1180px) { .hero-datos { display: none; } }

.hero-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.1rem;
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(245, 242, 236, 0.18);
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.68);
}
.hero-rail a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(227, 179, 107, 0.85); }
.hero-rail a:hover { color: var(--bronce-claro); }
.hero-rail .rombo { color: var(--bronce); }

.migas {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.6);
  margin-bottom: 1.2rem;
}
.migas a { color: inherit; text-decoration: none; }
.migas a:hover { color: var(--bronce-claro); }

.indicador-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, var(--bronce-claro));
}
.anima .indicador-scroll { animation: aparecerIndicador 0.6s ease 1.4s backwards, latido 2.4s ease-in-out 2s infinite; }
@keyframes aparecerIndicador { from { opacity: 0; } to { opacity: 1; } }
@keyframes latido {
  0%, 100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
  50% { transform: translateX(-50%) scaleY(0.55); opacity: 0.4; }
}

/* ---------- 7. Estratos (divisores) ---------- */
.estrato { position: relative; height: clamp(52px, 6vw, 96px); overflow: hidden; line-height: 0; }
.estrato svg { position: absolute; left: -2%; bottom: 0; width: 104%; height: 100%; display: block; }
.estrato .capa-1 { opacity: 0.4; }
.estrato .capa-2 { opacity: 0.7; }

/* ---------- 8. Cifras ---------- */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0;
  border-top: 1px solid var(--linea);
}
.cifra { padding: 2.4rem clamp(1rem, 2.5vw, 2.4rem) 0; border-right: 1px solid var(--linea); }
.cifra:last-child { border-right: 0; }
.cifra b {
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tinta);
}
.cifra .unidad {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronce-hondo);
  display: block;
  margin: 0.9rem 0 0.5rem;
}
.cifra p { color: var(--suave); font-size: var(--step--1); line-height: 1.6; }
@media (max-width: 700px) {
  .cifra { border-right: 0; border-bottom: 1px solid var(--linea); padding-bottom: 2rem; }
  .cifra:last-child { border-bottom: 0; }
}

/* ---------- 9. Placas (imágenes) ---------- */
.placa { margin: 0; position: relative; }
.placa-media {
  position: relative;
  overflow: hidden;
  background: var(--marmol-3);
}
.placa-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--bronce);
  transform: translate(10px, 10px);
  pointer-events: none;
  transition: transform 0.5s var(--curva);
  opacity: 0.75;
}
.placa:hover .placa-media::after { transform: translate(4px, 4px); }
.placa-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--curva); }
.placa:hover .placa-media img { transform: scale(1.045); }
.placa figcaption {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
  margin-top: 1.4rem;
  padding-left: 1rem;
  border-left: 1px solid var(--bronce);
}

/* Duotono → color al entrar en pantalla.
   Con la misma red de seguridad en CSS que el revelado por scroll: si main.js
   no carga, a los 4 segundos las fotos recuperan el color por su cuenta. Aquí
   el fallo no escondería contenido, solo dejaría toda la web desaturada, pero
   una web entera en gris apagado tampoco es lo que se quiere enseñar. */
.anima .duo img {
  filter: saturate(0.55) contrast(1.04);
  transition: filter 1.2s var(--curva);
  animation: redDuoImagen 0s linear 4s forwards;
}
@keyframes redDuoImagen { to { filter: none; } }
.anima .duo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tinta);
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 1.2s var(--curva);
  animation: redDuoVelo 0s linear 4s forwards;
}
@keyframes redDuoVelo { to { opacity: 0; } }
.duo.revelada img { animation: none; filter: none; }
.duo.revelada::before { animation: none; opacity: 0; }

/* ---------- 10. Filas editoriales (excursiones) ---------- */
.filas { display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 7rem); }
.fila {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  position: relative;
}
.fila-media { grid-column: 1 / span 7; position: relative; }
.fila-cuerpo { grid-column: 9 / span 4; }
.fila:nth-of-type(even) .fila-media { grid-column: 6 / span 7; grid-row: 1; }
.fila:nth-of-type(even) .fila-cuerpo { grid-column: 1 / span 4; grid-row: 1; }
.fila-media .placa-media { aspect-ratio: 16 / 10; }

.fila-num {
  position: absolute;
  top: -0.6em;
  left: -0.15em;
  z-index: 2;
  font-family: var(--fuente-mono);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--bronce);
  mix-blend-mode: normal;
}
.fila:nth-of-type(even) .fila-num { left: auto; right: -0.15em; }

.fila-cuerpo h3 { font-size: var(--step-2); margin-bottom: 0.7rem; }
.fila-cuerpo h3 a { text-decoration: none; }
.fila-cuerpo h3 a:hover { color: var(--bronce-hondo); }
.fila-cuerpo > p { color: var(--suave); }
.fila-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bronce-hondo);
  margin-bottom: 1rem;
}
.fila-puntos { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.fila-puntos li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--step--1);
  color: var(--suave);
  line-height: 1.5;
  margin-bottom: 0.35rem;
}
.fila-puntos li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  background: var(--bronce);
  transform: rotate(45deg);
}
@media (max-width: 900px) {
  .fila, .fila:nth-of-type(even) { grid-template-columns: 1fr; }
  .fila-media, .fila-cuerpo,
  .fila:nth-of-type(even) .fila-media, .fila:nth-of-type(even) .fila-cuerpo { grid-column: 1 / -1; grid-row: auto; }
  .fila-num, .fila:nth-of-type(even) .fila-num { left: 0; right: auto; top: -0.5em; }
  .fila-media .placa-media { aspect-ratio: 4 / 3; }
}

/* ---------- 11. Carrete horizontal ---------- */
.carrete-envoltura { position: relative; }
.carrete {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bronce) transparent;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.carrete.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.carrete::-webkit-scrollbar { height: 3px; }
.carrete::-webkit-scrollbar-track { background: var(--linea); }
.carrete::-webkit-scrollbar-thumb { background: var(--bronce); }
.carrete > * { flex: 0 0 clamp(250px, 26vw, 330px); scroll-snap-align: start; }
/* Las fotos del archivo son casi todas apaisadas: la caja se adapta a ellas
   en lugar de recortarlas a un retrato imposible. */
.carrete .placa-media { aspect-ratio: 4 / 3; }
.carrete h3 { font-size: var(--step-0); margin: 1.1rem 0 0.3rem; }
.carrete h3 a { text-decoration: none; }
.carrete h3 a:hover { color: var(--bronce-hondo); }
.carrete p { font-size: var(--step--1); color: var(--suave); line-height: 1.5; }
.carrete-pista {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--suave);
  margin-top: 0.6rem;
}

/* ---------- 12. Ficha de datos ---------- */
.ficha {
  border-top: 1px solid var(--linea-fuerte);
  font-family: var(--fuente-mono);
  font-size: var(--step--1);
}
.ficha .fila-dato {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linea);
}
.ficha dt {
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--suave);
}
/* Un correo largo no cabe en la columna estrecha de la barra lateral y
   desbordaba la página: se le permite partir. */
.ficha dd { margin: 0; color: var(--texto); min-width: 0; overflow-wrap: anywhere; }
.seccion-oscura .ficha { border-color: var(--linea-clara); }
.seccion-oscura .ficha .fila-dato { border-color: var(--linea-clara); }
.seccion-oscura .ficha dt { color: rgba(245, 242, 236, 0.55); }
.seccion-oscura .ficha dd { color: var(--marmol); }

.ficha-destacada {
  background: var(--marmol-2);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--bronce);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin: 2.5rem 0;
}
.ficha-destacada .ficha-titulo { font-family: var(--fuente-texto); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--bronce-hondo); margin-bottom: 1.2rem; }
.ficha-destacada .ficha { border-top: 0; }

/* ---------- 13. Argumentos (sección oscura) ---------- */
.argumentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.argumento { border-top: 1px solid var(--linea-clara); padding-top: 1.6rem; }
.argumento .num {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  color: var(--patina-claro);
  display: block;
  margin-bottom: 0.9rem;
}
.argumento h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }

/* ---------- 14. Editorial con barra lateral ---------- */
.editorial { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.prosa { max-width: var(--prosa); font-size: var(--step-0); }
.prosa > h2 { margin-top: 2.6rem; font-size: var(--step-2); }
.prosa > h2:first-child { margin-top: 0; }
.prosa > h3 { margin-top: 2rem; }
.prosa ul, .prosa ol { padding-left: 1.2rem; margin: 0 0 1.3em; }
.prosa li { margin-bottom: 0.5rem; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul li { position: relative; padding-left: 1.4rem; }
.prosa ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 6px; height: 6px;
  background: var(--bronce);
  transform: rotate(45deg);
}
.prosa blockquote {
  margin: 2.2rem 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--bronce);
  font-family: var(--fuente-display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--tinta);
}
.lateral { position: sticky; top: calc(var(--header-h) + 1.5rem); display: flex; flex-direction: column; gap: 1.6rem; }
.tarjeta-lateral {
  border: 1px solid var(--linea);
  background: var(--marmol-2);
  padding: 1.5rem;
}
.tarjeta-lateral h2 {
  font-family: var(--fuente-texto);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bronce-hondo);
  margin-bottom: 1rem;
}
.tarjeta-lateral ul { list-style: none; margin: 0; padding: 0; }
.tarjeta-lateral li { border-bottom: 1px solid var(--linea); }
.tarjeta-lateral li:last-child { border-bottom: 0; }
.tarjeta-lateral li a { display: block; padding: 0.65rem 0; text-decoration: none; font-size: var(--step--1); transition: color 0.25s, padding-left 0.25s var(--curva); }
.tarjeta-lateral li a:hover { color: var(--bronce-hondo); padding-left: 0.4rem; }
.tarjeta-lateral p { font-size: var(--step--1); color: var(--suave); }
.tarjeta-reserva { background: var(--tinta); border-color: var(--tinta); color: var(--marmol); }
.tarjeta-reserva h2 { color: var(--bronce-claro); }
.tarjeta-reserva p { color: rgba(245, 242, 236, 0.75); }
.tarjeta-reserva .btn { width: 100%; margin-top: 1rem; }
@media (max-width: 960px) {
  /* minmax(0, 1fr) y NO 1fr: la pista de una rejilla se estira hasta el
     min-content de su hijo más ancho, así que un solo elemento que no sepa
     encogerse (una imagen de 800 px, una línea sin espacios) ensancha la
     columna entera y saca la página de la pantalla. Con `overflow-x:hidden`
     en el body no se ve la barra de scroll: simplemente se pierde texto por
     el lado derecho. Medido: la columna de texto salía a 354 px dentro de una
     pantalla de 360 con márgenes de 20. */
  .editorial { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; min-width: 0; }
}
.prosa { min-width: 0; }

/* ---------- 15. Itinerario (línea de tiempo) ---------- */
.itinerario { list-style: none; margin: 0; padding: 0 0 0 2.2rem; position: relative; counter-reset: parada; }
.itinerario::before {
  content: '';
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--linea-fuerte);
}
.itinerario li { position: relative; padding-bottom: 2.2rem; counter-increment: parada; }
.itinerario li:last-child { padding-bottom: 0; }
.itinerario li::before {
  content: '';
  position: absolute;
  left: -2.2rem; top: 0.45em;
  width: 11px; height: 11px;
  background: var(--marmol);
  border: 1px solid var(--bronce);
  transform: rotate(45deg);
  transition: background 0.4s var(--curva);
}
.itinerario li.is-in::before { background: var(--bronce); }
.itinerario h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.itinerario .hora {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronce-hondo);
  display: block;
  margin-bottom: 0.3rem;
}
.itinerario p { color: var(--suave); font-size: var(--step--1); }

/* ---------- 16. Destacados ---------- */
.destacados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 2.5rem; }
.destacados li {
  position: relative;
  padding: 1rem 0 1rem 1.6rem;
  border-bottom: 1px solid var(--linea);
  font-size: var(--step--1);
  line-height: 1.55;
}
.destacados li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.55em;
  width: 6px; height: 6px;
  background: var(--bronce);
  transform: rotate(45deg);
}

/* ---------- 17. FAQ ---------- */
.faq { border-top: 1px solid var(--linea-fuerte); max-width: 80ch; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--fuente-display);
  font-size: var(--step-1);
  line-height: 1.3;
  transition: color 0.25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--fuente-mono);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--bronce-hondo);
  transition: transform 0.35s var(--curva);
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--bronce-hondo); }
.faq details p { padding: 0 2.5rem 1.4rem 0; color: var(--suave); margin: 0; max-width: 72ch; }
.faq details[open] p { animation: entrar 0.5s var(--curva) forwards; }

/* ---------- 18. ¿Sabía que…? ---------- */
.dyk {
  position: relative;
  background: var(--marmol-2);
  border-left: 3px solid var(--patina);
  padding: 1.4rem 1.5rem;
  margin: 2.4rem 0;
}
.dyk .sello {
  display: block;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--patina);
  margin-bottom: 0.6rem;
}
.dyk p { margin: 0; font-size: var(--step--1); line-height: 1.6; }

/* ---------- 19. Tripadvisor ---------- */
.ta-cifras { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; margin-bottom: 3rem; }
.ta-cifras div { text-align: center; }
.ta-cifras strong {
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1;
  color: var(--bronce);
}
.ta-cifras span {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--suave);
}
.seccion-oscura .ta-cifras span { color: rgba(245, 242, 236, 0.6); }

.citas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 2.5rem; }
.quote { margin: 0; border-top: 1px solid var(--linea-clara); padding-top: 1.6rem; }
.quote blockquote {
  margin: 0 0 1.2rem;
  font-family: var(--fuente-display);
  font-size: var(--step-1);
  line-height: 1.4;
}
.quote cite { font-style: normal; font-family: var(--fuente-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronce-claro); }
.quote cite span { display: block; color: rgba(245, 242, 236, 0.5); margin-top: 0.25rem; }

.tira-opinion { background: var(--marmol-2); padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--linea); }
.tarjeta-opinion {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  padding: 0 1rem;
}
.sello-verificado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--patina);
  border: 1px solid rgba(46, 97, 87, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.6rem;
}
.tarjeta-opinion h2 { font-size: var(--step-2); margin-bottom: 0.9rem; }
.tarjeta-opinion .texto { color: var(--suave); max-width: 62ch; margin-inline: auto; }
.tarjeta-opinion .firma { font-family: var(--fuente-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); margin-top: 1.4rem; }
.tarjeta-opinion .firma span { color: var(--suave); }
.opinion-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea);
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
}
.opinion-pie strong { color: var(--bronce-hondo); font-size: var(--step-0); }
.opinion-pie .rombo { color: var(--bronce); }
.opinion-pie a { color: var(--bronce-hondo); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- 20. Banda de conversión ---------- */
.cta-banda {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--marmol);
  text-align: center;
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--tinta);
}
.cta-banda .hero-fondo { inset: -10% 0 0 0; }
.cta-banda .hero-fondo img { width: 100%; height: 120%; object-fit: cover; }
.cta-banda::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(18, 26, 31, 0.78);
}
.cta-banda h2 { font-size: var(--step-3); max-width: 20ch; margin-inline: auto; }
.cta-banda p { max-width: 58ch; margin-inline: auto; color: rgba(245, 242, 236, 0.8); }
.cta-banda .acciones { justify-content: center; }
.linea-confianza {
  margin-top: 2.4rem;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.65);
}
.linea-confianza a { color: var(--bronce-claro); text-decoration: none; border-bottom: 1px solid rgba(227, 179, 107, 0.85); }

/* ---------- 21. Formularios ---------- */
.formulario { max-width: 720px; }
.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.6rem; }
.campo { display: flex; flex-direction: column; }
.campo.ancho { grid-column: 1 / -1; }
.campo label {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--suave);
  margin-bottom: 0.55rem;
}
.campo .req { color: var(--bronce-hondo); }
.campo input, .campo select, .campo textarea {
  font-family: var(--fuente-texto);
  font-size: var(--step-0);
  color: var(--texto);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linea-fuerte);
  padding: 0.7rem 0;
  border-radius: 0;
  transition: border-color 0.3s var(--curva);
  width: 100%;
}
.campo textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bronce) 50%), linear-gradient(135deg, var(--bronce) 50%, transparent 50%); background-position: calc(100% - 12px) 1.35em, calc(100% - 7px) 1.35em; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
/* El foco NO se quita. Antes esto hacía `outline: none` y confiaba en un
   borde de 1 px en bronce (2,71:1 sobre mármol): incumplía a la vez el
   1.4.11 (contraste de componentes, 3:1) y el 2.4.7 (foco visible). Ahora el
   borde inferior engorda, cambia a bronce hondo y se dibuja además el anillo
   general de la web. */
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--bronce-hondo);
  outline-offset: 2px;
  border-bottom-color: var(--bronce-hondo);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-bottom-width: 2px; border-bottom-color: var(--bronce-hondo); }
.campo .ayuda { font-size: var(--step--2); color: var(--suave); margin-top: 0.4rem; }
@media (max-width: 640px) { .campos { grid-template-columns: 1fr; } }

.form-nota { font-size: var(--step--1); color: var(--suave); margin-top: 1.6rem; }
.form-estado { margin-top: 1.4rem; font-size: var(--step--1); padding: 1rem 1.2rem; border-left: 3px solid var(--bronce); background: var(--marmol-2); display: none; }
.form-estado.visible { display: block; }
.form-estado.ok { border-color: var(--patina); }
.form-estado.error { border-color: #b4442f; }

.pasos { display: flex; gap: 1.5rem; margin-bottom: 2.5rem; font-family: var(--fuente-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
.pasos span { display: flex; align-items: center; gap: 0.5rem; }
.pasos b { color: var(--bronce-hondo); font-weight: 500; }

/* ---------- 22. Listados ---------- */
.lista-editorial { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-fuerte); }
.lista-editorial li { border-bottom: 1px solid var(--linea); }
.lista-editorial a {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.9rem 0;
  text-decoration: none;
  transition: padding-left 0.4s var(--curva);
}
.lista-editorial a:hover { padding-left: 0.8rem; }
.lista-editorial .num { font-family: var(--fuente-mono); font-size: var(--step--2); letter-spacing: 0.1em; color: var(--bronce-hondo); }
.lista-editorial h3 { font-size: var(--step-2); margin: 0 0 0.4rem; }
.lista-editorial p { color: var(--suave); font-size: var(--step--1); margin: 0; max-width: 62ch; }
.lista-editorial .flecha { font-family: var(--fuente-mono); color: var(--bronce); transition: transform 0.4s var(--curva); }
.lista-editorial a:hover .flecha { transform: translateX(6px); }
@media (max-width: 700px) {
  .lista-editorial a { grid-template-columns: 1fr; gap: 0.5rem; }
  .lista-editorial .flecha { display: none; }
}

.rejilla-lugares { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(1.8rem, 3vw, 2.8rem); }
.rejilla-lugares .placa-media { aspect-ratio: 3 / 2; }
.rejilla-lugares h3 { font-size: var(--step-1); margin: 1.2rem 0 0.35rem; }
.rejilla-lugares h3 a { text-decoration: none; }
.rejilla-lugares h3 a:hover { color: var(--bronce-hondo); }
.rejilla-lugares p { font-size: var(--step--1); color: var(--suave); line-height: 1.55; }

/* Galería */
.galeria { columns: 3 260px; column-gap: 1.4rem; }
.galeria .placa { break-inside: avoid; margin-bottom: 1.4rem; }
.galeria .placa-media::after { transform: translate(6px, 6px); }
.galeria figcaption { margin-top: 0.9rem; }

/* Entrada destacada del blog */
.destacada-blog { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-bottom: 4rem; }
.destacada-blog .placa-media { aspect-ratio: 3 / 2; }
.destacada-blog h3 { font-size: var(--step-3); margin-bottom: 0.8rem; }
.destacada-blog h3 a { text-decoration: none; }
.destacada-blog p { color: var(--suave); }
@media (max-width: 860px) { .destacada-blog { grid-template-columns: 1fr; } }

.meta-fecha { font-family: var(--fuente-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronce-hondo); margin-bottom: 0.8rem; display: block; }

/* ---------- 23. Pie ---------- */
.site-footer { background: var(--tinta); color: rgba(245, 242, 236, 0.72); padding-top: clamp(3.5rem, 6vw, 5.5rem); font-size: var(--step--1); }
.footer-rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3rem; }
.footer-marca { font-family: var(--fuente-display); font-size: var(--step-2); color: var(--marmol); margin-bottom: 1rem; line-height: 1.1; }
.footer-marca em { color: var(--bronce); font-style: italic; }
.site-footer h2, .site-footer h3 {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronce-claro);
  margin-bottom: 1.2rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }
.site-footer a { color: rgba(245, 242, 236, 0.72); text-decoration: none; transition: color 0.25s; }
.site-footer a:hover { color: var(--bronce-claro); }
.footer-contacto { margin-top: 1.2rem; font-family: var(--fuente-mono); font-size: var(--step--2); letter-spacing: 0.05em; line-height: 2; }

.footer-legal {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2.5rem 0;
  border-top: 1px solid var(--linea-clara);
  font-size: var(--step--2);
  line-height: 1.8;
  color: rgba(245, 242, 236, 0.55);
}
.footer-legal img { width: 92px; height: auto; opacity: 0.8; flex-shrink: 0; }
.footer-legal strong { color: rgba(245, 242, 236, 0.8); font-weight: 600; }
.footer-legal p { margin: 0 0 0.25rem; }

/* --- Familia 141 Journeys --- */
.nota-red { border-top: 1px solid var(--linea-clara); padding: clamp(2.5rem, 5vw, 4rem) 0 1rem; }
.red-intro { max-width: 74ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sello-red { font-family: var(--fuente-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronce-claro); margin-bottom: 0.9rem; }
/* `.site-footer h3` es más específico que una sola clase: hay que ganarle
   explícitamente o este titular sale en mono y en mayúsculas. */
.site-footer .red-titular {
  font-family: var(--fuente-display);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.022em;
  text-transform: none;
  color: var(--marmol);
  margin-bottom: 0.8rem;
}
.site-footer .red-titular em { font-style: italic; color: var(--bronce); }
.historia-red { max-width: 72ch; font-size: var(--step--1); line-height: 1.7; color: rgba(245, 242, 236, 0.66); margin-bottom: 1.1rem; }
.historia-red strong { color: rgba(245, 242, 236, 0.9); font-weight: 600; }
.red-cta { margin: 0; }
.red-cta .enlace-linea { color: var(--bronce-claro); }

.red-banda { margin-bottom: 2.2rem; }
.red-banda-titulo {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.6);
  padding-bottom: 0.7rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--linea-clara);
}
.webs-red {
  display: grid;
  /* auto-fill, no auto-fit: así la banda de dos webs mantiene el mismo ancho
     de columna que la de cuatro y las tres bandas quedan alineadas. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 2.8rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.webs-red li { display: flex; flex-direction: column; gap: 0.3rem; }
.webs-red a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  width: fit-content;
}
.web-nombre {
  font-family: var(--fuente-display);
  font-size: var(--step-0);
  line-height: 1.2;
  color: var(--marmol);
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--bronce), var(--bronce));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.35s var(--curva), color 0.3s var(--curva);
}
.webs-red a:hover .web-nombre,
.webs-red a:focus-visible .web-nombre { color: var(--bronce-claro); background-size: 100% 1px; }
/* Sin la opacidad: el bronce al 75 % sobre tinta daba 3,82:1 y esto es texto
   (el dominio de cada web hermana). A opacidad completa son 5,82:1. */
.web-dominio {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.05em;
  color: var(--bronce);
}
.web-extracto {
  font-size: var(--step--2);
  line-height: 1.55;
  color: rgba(245, 242, 236, 0.5);
  max-width: 42ch;
}

.footer-abajo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 0 2rem;
  border-top: 1px solid var(--linea-clara);
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.05em;
  /* 0,45 daba 4,13:1 sobre tinta; 0,6 da 6,35:1 (1.4.3). */
  color: rgba(245, 242, 236, 0.6);
}
.arriba { text-decoration: none; color: var(--bronce-claro); }
@media (max-width: 860px) {
  .footer-rejilla { grid-template-columns: 1fr 1fr; }
  .footer-legal { flex-direction: column; gap: 1.2rem; }
}
@media (max-width: 560px) { .footer-rejilla { grid-template-columns: 1fr; } }

/* ---------- 24. Revelado por scroll ----------
   Estos bloques empiezan invisibles y los descubre main.js según se baja.
   El problema: si main.js NO llega a cargarse —red que falla en un fichero de
   8 KB, una extensión que lo bloquea, un error de JavaScript— se quedaban
   invisibles para siempre, y son media web: las fichas de excursión, las
   cifras, los argumentos, las opiniones.
   La red de seguridad de 3 segundos que hay dentro de main.js no sirve para
   ese caso, porque vive en el fichero que no ha cargado. Así que hay una
   segunda red, esta en CSS puro: a los 4 segundos una animación de duración
   cero fuerza el estado visible. Si JavaScript llega antes —lo normal— pone
   `.is-in`, que cancela la animación y hace la entrada bonita con transición.
   Si no llega, a los 4 segundos se ve todo igualmente. */
.anima .rev {
  opacity: 0;
  transform: translateY(28px);
  animation: redDeSeguridad 0s linear 4s forwards;
}
@keyframes redDeSeguridad { to { opacity: 1; transform: none; } }
.rev.is-in {
  animation: none;
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--curva), transform 0.75s var(--curva);
  transition-delay: calc(var(--i, 0) * 0.08s);
}

/* ---------- 25. Utilidades ---------- */
.saltar-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bronce); color: #fff; padding: 0.8rem 1.4rem;
  font-family: var(--fuente-mono); font-size: var(--step--2);
}
.saltar-al-contenido:focus { left: 0; }
.centro { text-align: center; }

/* ---------- 26. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rev, .entra { opacity: 1 !important; transform: none !important; }
  .mascara > span { transform: none !important; }
  .duo img { filter: none !important; }
  .duo::before { opacity: 0 !important; }
  .hero-fondo { transform: none !important; }
  .indicador-scroll { display: none; }
}

/* ---------- 27. Google Translate: ocultar su interfaz ---------- */
#google_translate_element, .goog-te-banner-frame, .skiptranslate iframe, .goog-te-gadget { display: none !important; }
body { top: 0 !important; position: static !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: none !important; box-shadow: none !important; }

/* ---------- 28. Precio «desde» en la tarjeta de reserva ---------- */
.precio-desde {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linea-clara);
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.6);
}
.precio-desde strong {
  font-family: var(--fuente-display);
  font-size: var(--step-3);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
  color: var(--bronce-claro);
}

/* ---------- 29. Acceso prioritario / sin colas ---------- */
.acceso {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: var(--tinta);
  color: var(--marmol);
  border-left: 3px solid var(--patina-claro);
}
.acceso-sello {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--patina-claro);
  margin-bottom: 0.8rem;
}
.acceso h2 {
  font-size: var(--step-2);
  color: var(--marmol);
  margin-bottom: 1rem;
}
.acceso-entrada {
  font-size: var(--step-0);
  line-height: 1.65;
  color: rgba(245, 242, 236, 0.82);
  max-width: 62ch;
}
.acceso-entrada strong { color: var(--marmol); }
.acceso-entrada em { font-style: italic; color: var(--bronce-claro); }

.acceso-puntos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.6rem clamp(1.5rem, 3vw, 2.4rem);
  margin: 1.8rem 0 1.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea-clara);
}
.acceso-puntos h3 {
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronce-claro);
  margin-bottom: 0.6rem;
}
.acceso-puntos p {
  font-size: var(--step--1);
  line-height: 1.6;
  color: rgba(245, 242, 236, 0.66);
  margin: 0;
}
.acceso-puntos strong { color: rgba(245, 242, 236, 0.9); }

.acceso-nota {
  font-size: var(--step--2);
  line-height: 1.65;
  color: rgba(245, 242, 236, 0.5);
  padding-top: 1.2rem;
  border-top: 1px solid var(--linea-clara);
  margin: 0;
  max-width: 74ch;
}
.acceso-nota strong { color: rgba(245, 242, 236, 0.72); }

/* ---------- 30. Carteles «sin colas» / fast pass ----------
   Se estilan como CONTENIDO, no como publicidad. Es una decisión de
   investigación, no estética: la ceguera de banners (Benway 1998; NN/g 2007 y
   2018) hace que el ojo salte cualquier cosa que parezca un anuncio —caja
   chillona, borde extraño, formato 728×90—. Así que el cartel lleva el mismo
   marco de bronce desplazado y el mismo pie de foto en mono que las
   fotografías del resto de la web.
   La imagen NUNCA es un enlace (regla de Hasan). El enlace es el texto del
   pie, que además le da a Google palabras reales que leer: dentro de un JPEG
   no hay texto que indexar. */
.banner-cola { margin: 2.8rem 0; }
.banner-media { position: relative; background: var(--marmol-3); overflow: hidden; }
.banner-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--bronce);
  transform: translate(10px, 10px);
  pointer-events: none;
  opacity: 0.75;
  transition: transform 0.5s var(--curva);
}
.banner-cola:hover .banner-media::after { transform: translate(4px, 4px); }
.banner-media img { display: block; width: 100%; height: auto; }

.banner-cola figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.4rem;
  padding-left: 1rem;
  border-left: 1px solid var(--bronce);
}
.banner-pie {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--suave);
  max-width: 58ch;
}
.banner-cola figcaption .enlace-linea { font-size: var(--step--2); }

/* El apaisado no se estira más allá de su tamaño real: subirlo de 800 px lo
   deja borroso, y una imagen borrosa lee como «anuncio de tercero». */
.banner-ancho { max-width: 800px; }
.acceso .banner-ancho { margin: 2rem 0 2.4rem; }
.filas .banner-ancho { margin: 0; max-width: 900px; margin-inline: auto; }

/* Vertical de barra lateral. Va como REFUERZO: la investigación de eye-tracking
   dice que el rascacielos derecho es la posición más ignorada de una página,
   así que el argumento de verdad nunca vive solo aquí — vive en el bloque de
   texto de la propia excursión. */
.banner-lateral { margin: 0; }
.banner-lateral figcaption { margin-top: 1rem; }
.banner-lateral .banner-pie { font-size: var(--step--2); line-height: 1.45; }
.banner-lateral .banner-media::after { transform: translate(7px, 7px); }
.banner-cola:hover .banner-lateral .banner-media::after,
.banner-lateral:hover .banner-media::after { transform: translate(3px, 3px); }

/* En móvil el marco desplazado se sale de la pantalla: se recoge. */
@media (max-width: 700px) {
  .banner-media::after,
  .banner-lateral .banner-media::after { transform: translate(5px, 5px); }
  .banner-cola { margin: 2rem 0; }
}

/* ---------- 31. Franja de acceso prioritario (portada) ---------- */
.franja-acceso { background: var(--marmol-2); }
.franja-acceso-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.franja-acceso-rejilla > div { max-width: 60ch; }
.franja-acceso-rejilla p { color: var(--suave); }
.franja-acceso-precio {
  border-left: 2px solid var(--patina);
  padding-left: 1.1rem;
  color: var(--texto) !important;
}
.franja-acceso-precio strong { color: var(--patina); }
.franja-acceso .banner-ancho { margin: 0; }
@media (max-width: 900px) {
  .franja-acceso-rejilla { grid-template-columns: 1fr; }
}

/* ============================================================
   32. Correcciones de accesibilidad — WCAG 2.1 AA
   Revisión del 2026-08-19. Cada bloque dice qué criterio arregla,
   para que nadie lo «limpie» más adelante sin saber lo que quita.
   ============================================================ */

/* 2.4.3 Orden del foco · 2.1.1 Teclado.
   El menú móvil cerrado usaba solo `opacity: 0` + `pointer-events: none`.
   Eso lo hace invisible al ratón, pero NO lo saca del orden de tabulación:
   un usuario de teclado tabulaba a ciegas por seis enlaces que no veía.
   `visibility` sí los saca, y sigue siendo animable. */
@media (max-width: 980px) {
  .site-nav { visibility: hidden; }
  .site-nav.abierta { visibility: visible; }
}

/* Mismo problema en la barra superior al encogerse la cabecera: se le daba
   `height: 0` y los botones de idioma seguían siendo enfocables. Ahora se
   ocultan de verdad, pero vuelven en cuanto algo dentro recibe el foco, para
   que el conmutador de idioma siga siendo alcanzable con teclado. */
.site-header.encogida .topbar { visibility: hidden; }
.site-header.encogida:focus-within .topbar { height: var(--topbar-h); visibility: visible; }

/* 2.5.8 Tamaño del objetivo · 1.4.11 Contraste de componentes.
   Las banderas medían 30×20 px reales. Se mantiene el tamaño visual (el
   diseño lo pide) y se agranda solo la zona sensible hasta 44 px con un
   pseudoelemento, que es la recomendación de la propia técnica de la WCAG. */
.btn-idioma { position: relative; opacity: 0.75; }
.btn-idioma::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* 1.4.11 Contraste de componentes: sobre fondo tinta el bronce hondo se queda
   en 3,07:1, al filo. En contexto oscuro el anillo de foco pasa a bronce
   claro (9,16:1). */
.seccion-oscura :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.cta-banda :focus-visible,
.acceso :focus-visible,
.topbar :focus-visible,
.tarjeta-reserva :focus-visible {
  outline-color: var(--bronce-claro);
}

/* 1.4.3 Contraste mínimo. La nota del bloque de acceso prioritario estaba al
   50 % de opacidad y en el cuerpo más pequeño de la web. Ahora contiene la
   promesa de precio («no añadimos nada a la entrada»), que es información
   comercial seria: sube de tamaño y de contraste (8,64:1). */
.acceso-nota { color: rgba(245, 242, 236, 0.72); font-size: var(--step--1); }
.acceso-nota strong { color: var(--bronce-claro); }

/* El pie del cartel hereda `--suave` (gris medio), pensado para fondo mármol.
   Dentro del bloque oscuro daría 1,9:1. */
.acceso .banner-pie { color: rgba(245, 242, 236, 0.78); }
.acceso .banner-cola figcaption { border-left-color: var(--patina-claro); }

/* 1.4.10 Reajuste. En apaisado con muesca (iPhone y similares) el contenido
   se metía debajo del recorte. */
@supports (padding: max(0px)) {
  .container {
    padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
  }
}

/* 1.4.12 Espaciado del texto: el usuario debe poder forzar interlineado 1.5,
   espaciado entre letras 0.12em y entre palabras 0.16em sin perder contenido.
   Las cajas de altura fija son lo que lo rompe; aquí solo había una. */
.topbar { height: auto; min-height: var(--topbar-h); padding-block: 0.35rem; }
.site-header.encogida .topbar { min-height: 0; padding-block: 0; }

/* 1.3.1 Información y relaciones: el carrete es una región desplazable. Se le
   da tabindex desde JavaScript, pero sin JavaScript seguía sin poder
   recorrerse con teclado en algunos navegadores. El scroll táctil y de rueda
   ya funciona; esto solo asegura que la región sea alcanzable. */
.carrete:focus-visible { outline: 2px solid var(--bronce-hondo); outline-offset: 4px; }

/* Cuando la barra lateral se cae debajo del texto (≤960 px), el cartel
   vertical heredaba el ancho completo de la columna: en una tableta se
   estiraba a 713 px partiendo de un original de 450–500 px, o sea borroso, y
   ocupaba más de mil píxeles de alto. Se limita a su tamaño real y se centra.
   Los apaisados no necesitan tope: su original tiene 800 px y la columna
   nunca llega. */
@media (max-width: 960px) {
  .banner-lateral { max-width: 340px; margin-inline: auto; }
  .banner-lateral figcaption { max-width: 340px; margin-inline: auto; }
}

/* ============================================================
   33. RETROFIT «DISEÑO POR INVESTIGACIÓN» — 19 de agosto de 2026
   Cada bloque cita la sección de la regla maestra que lo obliga
   (feedback-design-by-research). No quitar nada de aquí sin leer
   design-review/2026-08-19/DESIGN-RETROFIT.md.
   ============================================================ */

/* ---- 33.1 · Primer pantallazo en el teléfono (§1, §2, §11) ----
   Medido antes del cambio en un 390×844: hero de 1.099 px, h1 a 300 px, botón
   principal a 836 px (fuera de pantalla) y raíl de confianza a 1.001 px.
   La regla: en el primer pantallazo tienen que verse la cabecera, el h1, una
   línea de prueba y la llamada a la acción. También baja el h1: 46,7 px sobre
   un cuerpo de 16,2 px es 2,9×, y la regla pide 1,8–2,2× en móvil para que el
   titular no se parta en cuatro líneas. */
@media (max-width: 760px) {
  .hero-inicio { min-height: 0; padding: 1.6rem 0 2.2rem; }
  .hero-pagina { min-height: 40svh; padding: 1.4rem 0 1.8rem; }
  .hero h1 { font-size: clamp(1.85rem, 7.8vw, 2.3rem); margin-bottom: 1rem; }
  .hero-pagina h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); max-width: none; }
  .hero .entradilla { font-size: var(--step-0); line-height: 1.55; }
  .hero-inicio .entradilla { max-width: 46ch; }
  .hero .acciones { margin-top: 1.4rem; gap: 0.7rem; }
  .hero-rail { margin-top: 1.4rem; padding-top: 1rem; gap: 0.5rem 0.9rem; line-height: 1.5; }
  .migas { margin-bottom: 0.8rem; }
  .indicador-scroll { display: none; }
}
/* Los dos botones del hero, a lo ancho: objetivo grande en la zona del pulgar
   y sin dos cajas estrechas que parten el texto en cuatro líneas. */
@media (max-width: 520px) {
  .hero .acciones .btn { flex: 1 1 100%; }
}

/* ---- 33.2 · Barra de acciones fija (§8, §11) ----
   Contentsquare (58 M de sesiones): +31 % de conversión con barra inferior
   fija en móvil. La zona cómoda del pulgar es el centro-abajo de la pantalla.
   AVISO: esta web NO tiene teléfono ni WhatsApp (decisión de Hasan, recogida
   en la memoria del proyecto), así que las tres acciones son las que existen
   de verdad: catálogo, solicitud de precio y correo. Si algún día hay número,
   se sustituye «Correo» por un enlace wa.me y ya está.
   Se muestra hasta 980 px, EXACTAMENTE el mismo punto en el que la cabecera
   esconde el menú y su botón: si no, entre 901 y 980 px no habría ni menú
   visible ni barra de acción. */
.barra-accion {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--tinta);
  border-top: 1px solid rgba(245, 242, 236, 0.2);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 18px rgba(18, 26, 31, 0.18);
}
.ba-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 56px;
  padding: 0.5rem 0.4rem;
  text-decoration: none;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(245, 242, 236, 0.82);
  border-right: 1px solid rgba(245, 242, 236, 0.14);
}
.ba-item:last-child { border-right: 0; }
.ba-pie { font-size: 0.86em; letter-spacing: 0.04em; text-transform: none; color: rgba(245, 242, 236, 0.66); }
.ba-principal {
  background: var(--bronce);
  color: var(--tinta);
  font-weight: 500;
  border-right-color: var(--bronce);
}
/* Sin transparencia: la tinta al 78 % sobre bronce daba 4,17:1 y esto es
   texto pequeño. Opaca son 5,82:1. */
.ba-principal .ba-pie { color: var(--tinta); }
.ba-item:hover, .ba-item:focus-visible { color: var(--bronce-claro); }
.ba-principal:hover, .ba-principal:focus-visible { background: var(--bronce-claro); color: var(--tinta); }
@media (max-width: 980px) {
  .barra-accion { display: grid; grid-template-columns: 1fr 1.3fr 1fr; }
  /* Sitio para la barra: si no, tapa el final del pie y el último enlace. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* El panel del menú tampoco puede meterse debajo de la barra. */
  .site-nav { max-height: calc(100dvh - var(--header-h) - var(--topbar-h) - 56px); }
}

/* ---- 33.3 · Objetivos táctiles de 48 px (§11, §13) ----
   Android/Google piden 48×48 y el pulpejo del dedo mide 10–14 mm. Los enlaces
   de lista de las tarjetas laterales y del pie medían 37 px de alto. */
.btn { min-height: 48px; }
.header-cta { min-height: 44px; }
.nav-toggle { width: 48px; height: 48px; }
.nav-toggle span { left: 14px; }
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 23.5px; }
.nav-toggle span:nth-child(3) { top: 29px; }
@media (pointer: coarse) {
  .tarjeta-lateral li a, .site-footer li a { min-height: 48px; display: flex; align-items: center; }
  .migas a, .hero-rail a, .opinion-pie a, .footer-contacto a { display: inline-block; padding-block: 0.35rem; }
}

/* ---- 33.4 · Barra de datos bajo el hero (§10, §11b) ----
   Baymard: hasta el 83 % de las webs de excursiones esconden precio, duración
   y punto de encuentro. Aquí, además, en el teléfono la columna lateral con la
   tarjeta de precio cae DEBAJO de todo el texto, así que el dato más caro de
   la página quedaba a dos pantallas de scroll. Esta barra lo sube al primer
   pantallazo y en texto plano, que es lo que citan las AI Overviews. */
.barra-hechos {
  background: var(--marmol-2);
  border-bottom: 1px solid var(--linea);
  padding: clamp(1.2rem, 2.5vw, 1.8rem) 0;
}
.barra-hechos-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
}
.hechos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1rem clamp(1.2rem, 3vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hechos li { border-left: 2px solid var(--bronce); padding-left: 0.85rem; min-width: 0; }
.hecho-et {
  display: block;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronce-hondo);
  margin-bottom: 0.2rem;
}
.hecho-v { display: block; font-size: var(--step--1); line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; }
.hechos-accion { display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch; }
.hechos-confianza {
  margin: 0;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--suave);
  max-width: 36ch;
}
@media (max-width: 860px) {
  .barra-hechos-inner { grid-template-columns: 1fr; }
  .hechos-confianza { max-width: none; }
}

/* ---- 33.5 · Punto de encuentro con mapa (§10) ----
   Baymard: entre el 57 y el 67 % de las webs de excursiones no enseñan el mapa
   del punto de encuentro en la propia página. Aquí el mapa es un SVG dibujado
   con las coordenadas REALES de cada punto: pesa un par de kilobytes, se ve
   sin JavaScript y —importante en esta web— no hace ninguna petición a un
   tercero, que es la promesa que se le hizo a Hasan al quitar Google Fonts y
   Analytics. El enlace de debajo abre el punto exacto en Google Maps para
   quien quiera navegar hasta allí. */
.punto-encuentro { margin: clamp(2.2rem, 4vw, 3rem) 0 0; }
.mapa-marco {
  background: var(--marmol-2);
  border: 1px solid var(--linea);
  padding: clamp(0.8rem, 2vw, 1.2rem);
}
.mapa-marco svg { display: block; width: 100%; height: auto; }
.mapa-ruta { fill: none; stroke: var(--bronce-hondo); stroke-width: 2.4; stroke-dasharray: 7 5; }
.mapa-punto { fill: var(--marmol); stroke: var(--bronce-hondo); stroke-width: 2.6; }
.mapa-destino { fill: var(--bronce-hondo); stroke: var(--marmol); stroke-width: 2; }
/* Tamaños en UNIDADES DEL LIENZO, no en píxeles de pantalla: el SVG mide 640
   de ancho y se estira al de su columna, así que en un teléfono (≈320 px) todo
   se ve a la mitad. Con las 11 unidades iniciales los nombres salían a 5,5 px
   reales. En móvil se dobla el cuerpo y se retira el renglón de detalle, que
   además está repetido en el pie de la figura. */
.mapa-nombre {
  font-family: var(--fuente-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  fill: var(--texto);
}
.mapa-detalle { font-size: 0.8em; fill: var(--suave); }
.es-destino { font-weight: 500; fill: var(--tinta); }
.mapa-escala { font-family: var(--fuente-mono); font-size: 13px; letter-spacing: 0.08em; fill: var(--suave); }
.mapa-regla { stroke: var(--suave); stroke-width: 1.6; }
@media (max-width: 860px) {
  .mapa-nombre { font-size: 25px; }
  .mapa-escala { font-size: 22px; }
  .mapa-detalle { display: none; }
}
.punto-encuentro figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.2rem;
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--bronce);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--suave);
}
.punto-encuentro figcaption strong { color: var(--texto); font-weight: 600; }

/* ---- 33.5b · Enlaces de pie que no caben en 320 px ----
   `.enlace-linea` lleva `white-space: nowrap` para que la flecha no se quede
   sola en la línea siguiente. En una pantalla de 320 px eso desborda: el pie
   del cartel «Ver las excursiones que lo incluyen →» mide 282 px dentro de una
   columna de 264, y como el body recorta el desbordamiento, el final del
   enlace simplemente no se veía. Por debajo de 620 px se le deja partir: una
   flecha en la segunda línea es mejor que media frase invisible. */
@media (max-width: 620px) {
  .enlace-linea { white-space: normal; }
}

/* ---- 33.6 · Dos columnas que se apilan (§11) ----
   «Incluido / No incluido» llevaba `grid-template-columns:1fr 1fr` en un
   atributo style, que gana a la consulta de medios de `.editorial`: en un
   teléfono se quedaba en dos columnas de 150 px con frases largas dentro. */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 700px) { .dos-columnas { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---- 33.7 · Formularios (§8, §11) ----
   HubSpot (40.000 páginas de destino): tres campos convierten mejor y hay una
   caída marcada a partir del cuarto. La solicitud de precio tenía OCHO campos
   visibles. Ahora se ven cuatro y el resto vive en un desplegable opcional: no
   se pierde ningún dato —mismo formulario y mismos nombres de campo para
   FormSubmit— pero la página ya no pide ocho respuestas antes de enviar. */
.mas-campos { border: 1px solid var(--linea); background: var(--marmol-2); margin: 1.6rem 0 0; }
.mas-campos > summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.8rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronce-hondo);
}
.mas-campos > summary::-webkit-details-marker { display: none; }
.mas-campos > summary::after { content: '+'; margin-left: auto; font-size: 1.2rem; line-height: 1; transition: transform 0.3s var(--curva); }
.mas-campos[open] > summary::after { transform: rotate(45deg); }
.mas-campos .campos { padding: 0 1.1rem 1.3rem; }
.form-confianza {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--suave);
}
.form-confianza li { padding-left: 1.2rem; position: relative; }
.form-confianza li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--patina); transform: rotate(45deg); }
.acciones-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2rem; }

/* ---- 33.8 · Micro-copia de confianza junto al botón (§8, §9) ----
   Baymard: las señales de confianza puestas AL LADO de la acción suben la
   finalización. Van dentro de la tarjeta de precio, no en el pie. */
.reserva-confianza {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(245, 242, 236, 0.78);
}
.reserva-confianza li { padding-left: 1.1rem; position: relative; }
.reserva-confianza li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; background: var(--patina-claro); transform: rotate(45deg); }
.reserva-confianza a { color: var(--bronce-claro); }

/* ---- 33.9 · Enlace a las opiniones de terceros (§9) ----
   Los viajeros desconfían de los testimonios elegidos por la propia web: lo
   que quieren es la ficha del tercero. Aquí solo existe Tripadvisor —no hay
   perfil de Google Business ni de Viator en el proyecto— y NUNCA se publica el
   número de opiniones, solo la nota y la antigüedad de la ficha. */
.enlace-opiniones {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  min-height: 44px;
  font-family: var(--fuente-mono);
  font-size: var(--step--2);
  line-height: 1.5;
  letter-spacing: 0.06em;
  /* Fondo claro por defecto (5,14:1); en tarjeta oscura, bronce claro (9,16:1). */
  color: var(--bronce-hondo);
}
.tarjeta-reserva .enlace-opiniones,
.seccion-oscura .enlace-opiniones,
.cta-banda .enlace-opiniones { color: var(--bronce-claro); }
.enlace-opiniones b { font-size: var(--step-0); font-weight: 500; }