/* ==========================================================================
   Cronos · widget público de reserva

   La web de reserva del piloto del caso Dreamland, calcada: la barra con sus
   pestañas, la portada de cada destino, el buscador, las puertas, el viaje en
   cuatro pasos con el resumen al lado y la tarjeta de embarque; y las páginas
   de destinos, mis viajes y el pasaporte.

   Lo que no viene de allí son los colores escritos a mano: salen de los tokens
   del sistema de diseño (4.6) y del tema de cada destino, que entra por
   variables. Y donde el piloto escribe con un color que no llega a 4,5:1, aquí
   se escribe con su tinta: el widget es el canal de venta y ahí AA es ley (4.11).
   ========================================================================== */

/* --------------------------------------------------------------------------
   La letra de cada destino (4.29)

   Cada local elige la del nombre de su portada de un catálogo cerrado
   (`LETRAS_DE_LOCAL` en el contrato): las del piloto de reserva, servidas
   desde casa con su licencia al lado (web/fonts/OFL-*.txt), y solo los juegos
   latinos. Un navegador baja una cara cuando algo la pinta, así que las que no
   usa la página no cuestan nada. Cormorant Garamond ya la declara
   /shared/cronos.css, y Juana también: es la de Begin, y la única que no es
   libre (su licencia es de Dreamland, no un OFL al lado).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Marcellus';
  src: url('/fonts/Marcellus-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: 'Marcellus';
  src: url('/fonts/Marcellus-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: 'Poiret One';
  src: url('/fonts/PoiretOne-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: 'Poiret One';
  src: url('/fonts/PoiretOne-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: 'Shippori Mincho';
  src: url('/fonts/ShipporiMincho-500-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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: 'Shippori Mincho';
  src: url('/fonts/ShipporiMincho-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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: 'Shippori Mincho';
  src: url('/fonts/ShipporiMincho-700-latin-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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: 'Shippori Mincho';
  src: url('/fonts/ShipporiMincho-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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: 'Cinzel Decorative';
  src: url('/fonts/CinzelDecorative-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: 'Cinzel Decorative';
  src: url('/fonts/CinzelDecorative-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: 'Cinzel Decorative';
  src: url('/fonts/CinzelDecorative-700-latin-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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: 'Cinzel Decorative';
  src: url('/fonts/CinzelDecorative-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Italic-500-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  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: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Italic-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  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: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Variable-latin-ext.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  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: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Variable-latin.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  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';
  src: url('/fonts/JosefinSans-Variable-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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';
  src: url('/fonts/JosefinSans-Variable-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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: 'Italiana';
  src: url('/fonts/Italiana-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

/* --------------------------------------------------------------------------
   Los colores, con nombre

   Los del piloto de reserva, por el tema `tema-piloto` de /shared/cronos.css:
   papel, tinta, gris, línea, marino y oro. Aquí solo se les pone nombre.

   Y los del destino, que entran por variables: el widget los fija con el tema
   del local que se está reservando (--c-marca*, --c-mundo-*), y sin destino
   quedan los de la casa: el oro y el marino del piloto. La distinción entre
   acento y tinta no es estética: el acento es relleno y la tinta es texto, y
   solo la segunda tiene que llegar a 4,5:1 (4.6). El piloto escribe con el
   acento en una docena de sitios; aquí, con su tinta.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --papel:        rgb(var(--c-cream-200));    /* el fondo de la página */
  --tarjeta:      rgb(var(--c-surface-raised));
  --tinta:        rgb(var(--c-charcoal));
  --tinta-suave:  rgb(var(--c-charcoal-muted));
  /* El gris claro del piloto no llega a AA en sus rótulos de 10 px: se escriben
     con el gris tenue de la casa, que sí. */
  --tinta-tenue:  rgb(var(--c-charcoal-faint));
  --linea:        rgb(var(--c-cream-400));
  --linea-clara:  rgb(var(--c-cream-300));
  --marino:       rgb(var(--c-side-bg));
  --oro:          rgb(var(--c-magia));
  --oro-claro:    rgb(var(--c-side-accent));
  --oro-tinta:    rgb(var(--c-magia-ink));

  /* El destino. Sin tema, el oro y el papel de la casa. */
  --laca:         rgb(var(--c-marca, var(--c-magia)));
  --laca-fuerte:  rgb(var(--c-marca-ink, var(--c-magia-ink)));   /* legible como texto */
  --laca-tenue:   rgb(var(--c-marca-soft, var(--c-cream-200)));
  /* Lo que se escribe encima del acento. Con el oro de la casa, el blanco se
     queda en 3,2:1: va la tinta. Un tema de local o de marca se comprobó con
     blanco encima antes de guardarse (sección 6), y entonces va blanco. */
  --sobre-laca:   rgb(var(--c-charcoal));

  /* La portada y la tarjeta: el fondo oscuro del destino y lo que se lee
     encima. El servidor comprueba antes de guardarlos que se lean (4.29). */
  --noche:        rgb(var(--c-mundo-noche, var(--c-side-bg)));
  --luz:          rgb(var(--c-mundo-luz, var(--c-side-accent)));
  --sobre-noche:  rgb(var(--c-side-hi));

  --tipo-display: var(--font-display);
  --tipo-texto:   var(--font-sans);

  --sombra:       0 30px 70px -40px rgb(var(--c-side-bg) / .45);
  --sombra-baja:  0 20px 40px -34px rgb(var(--c-side-bg) / .45);
  --movimiento:   cubic-bezier(.16, 1, .3, 1);
}

.con-destino { --sobre-laca: #fff; }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* La hoja común da a los encabezados la letra, el color y el tamaño del panel,
   y a los párrafos su margen. Aquí cada uno lleva los suyos, como en el piloto:
   un titular sobre la noche de la portada no puede salir en tinta. */
h1, h2, h3, h4 {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-wrap: wrap;
}
p { margin: 0; }

/* `hidden` tiene que ganar siempre: varias clases de aquí fijan display. */
[hidden] { display: none !important; }

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

body {
  font-family: var(--tipo-texto);
  background: var(--papel);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */

.saltar-a-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tinta);
  color: var(--papel);
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  font-weight: 700;
}
.saltar-a-contenido:focus { left: 0; }

.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;
}

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Lo que recibe el foco por programa —un paso, una página, un diálogo— no es un
   control: no lleva anillo. Los controles, sí. */
main:focus, [tabindex="-1"]:focus { outline: none; }

/* --------------------------------------------------------------------------
   La barra
   -------------------------------------------------------------------------- */

.barra {
  background: rgb(var(--c-cream-200) / .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 40;
}
.barra__fila { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
.barra__marca {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.barra__pestanas { display: flex; gap: 6px; height: 100%; }
.barra__pestana {
  position: relative;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tinta-suave);
  height: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: color .2s;
}
.barra__pestana:hover, .barra__pestana[aria-current="page"] { color: var(--tinta); }
.barra__pestana[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  background: var(--laca);
  transition: background .6s;
}
.barra__cuenta {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--laca);
  color: var(--sobre-laca);
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.barra__socio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--tinta-suave);
  text-align: right;
  min-height: 44px;
}
.barra__socio-texto b { display: block; color: var(--tinta); font-size: 12.5px; }
.barra__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--oro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  color: var(--oro-tinta);
  font-size: 16px;
  position: relative;
  flex: 0 0 36px;
}
.barra__avatar i {
  position: absolute;
  right: -4px; top: -4px;
  min-width: 17px; height: 17px;
  border-radius: 9px;
  background: var(--tinta);
  color: #fff;
  font-style: normal;
  font-family: var(--tipo-texto);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.pagina { animation: entrar .6s var(--movimiento); }
@keyframes entrar { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   La portada
   -------------------------------------------------------------------------- */

.portada {
  position: relative;
  height: min(80vh, 740px);
  min-height: 560px;
  overflow: hidden;
  background: var(--noche);
  transition: background 1s;
}
.portada__fotos img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s ease, transform 9s ease;
}
.portada__fotos img.portada__foto--visible { opacity: 1; transform: scale(1); }
.portada__sombra {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--noche) 0%, color-mix(in srgb, var(--noche) 70%, transparent) 38%, color-mix(in srgb, var(--noche) 15%, transparent) 70%, transparent),
    linear-gradient(0deg, color-mix(in srgb, var(--noche) 80%, transparent), transparent 45%);
  opacity: .92;
}
/* Lo que se lee encima de una foto lleva su propia nube (4.11).

   La foto la sube el encargado de cada local y puede ser cualquiera: un mantel
   blanco, una lámpara encendida. La sombra del piloto oscurece por la izquierda,
   y en un móvil el texto ocupa todo el ancho y cruza lo que haya. Así que detrás
   de cada texto que va sobre una foto hay una nube del color de su noche,
   difuminada para que la foto se siga viendo alrededor, y con la foto más clara
   posible —una blanca— lo que se lee sigue en AA. Medido en píxeles y no
   supuesto: con la sombra sola, a 390 px el texto se quedaba en 1,01:1. */
.portada__texto::before,
.puerta__texto::before,
.puerta__codigo::before,
.resumen__cabecera::before {
  content: '';
  position: absolute;
  inset: calc(var(--nube-borde) * -2);
  z-index: -1;
  background: var(--nube-color);
  opacity: .85;
  filter: blur(var(--nube-borde));
  pointer-events: none;
}
.portada__texto { --nube-borde: 28px; --nube-color: var(--noche); }
/* En escritorio la sombra del piloto ya cubre buena parte del texto, y la nube
   puede ser más ligera: medido igual, con la foto blanca. */
@media (min-width: 1101px) { .portada__texto::before { opacity: .5; } }
.puerta__texto, .puerta__codigo { --nube-borde: 16px; --nube-color: rgb(var(--c-puerta-noche, var(--c-side-bg))); }
.resumen__cabecera { --nube-borde: 14px; --nube-color: var(--noche); }

/* El patrón va debajo del texto: a la opacidad con la que el servidor mide el
   contraste del lema y el antetítulo (OPACIDAD_DEL_PATRON), ni un punto más. */
.portada__patron {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 48%;
  color: var(--sobre-noche);
  opacity: .1;
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent);
  mask-image: linear-gradient(90deg, #000 20%, transparent);
}
.portada__patron svg, .puerta__patron svg, .pase__patron svg, .billete__patron svg, .flujo__patron svg {
  display: block;
  width: 100%; height: 100%;
}
/* La rejilla de la portada: el texto a la izquierda, alineado con el resto de
   la página, y la ilustración en su propia columna, que nunca cruza una letra
   (4.29). */
.portada__interior {
  position: relative;
  z-index: 3;
  height: 100%;
  display: grid;
  grid-template-columns: max(32px, calc((100% - 1200px) / 2 + 32px)) minmax(0, 620px) minmax(0, 1fr);
}
/* Centrado en su fila y no estirado: su caja es la del texto, que es donde va
   su nube (abajo). Los 80 px de debajo son el sitio del buscador. */
.portada__texto {
  grid-column: 2;
  align-self: center;
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  color: #fff;
  position: relative;
  isolation: isolate;
}
.portada__antetitulo {
  font-size: 11.5px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--luz);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.portada__antetitulo i { width: 34px; height: 1px; background: var(--luz); flex: 0 0 34px; }
.portada__nombre {
  font-family: var(--tipo-display);
  font-weight: 500;
  font-size: clamp(54px, 7.2vw, 100px);
  line-height: .95;
  letter-spacing: -.5px;
}
.portada__nombre em { font-style: italic; color: var(--luz); }
.portada__lema {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.3vw, 30px);
  margin: 16px 0 12px;
  color: var(--sobre-noche);
}
.portada__descripcion { font-size: 15.5px; line-height: 1.65; color: var(--sobre-noche); max-width: 480px; }
.portada__texto > * { animation: aparecer .9s var(--movimiento) both; }
.portada__texto > :nth-child(2) { animation-delay: .08s; }
.portada__texto > :nth-child(3) { animation-delay: .16s; }
.portada__texto > :nth-child(4) { animation-delay: .24s; }
@keyframes aparecer { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.portada__dibujo {
  grid-column: 3;
  align-self: end;
  justify-self: end;
  width: min(44vw, 600px);
  margin: 0 3vw 90px 0;
  opacity: .92;
  pointer-events: none;
}
.portada__dibujo svg { width: 100%; height: auto; display: block; overflow: visible; }
.portada__dibujo svg * {
  fill: none;
  stroke: var(--sobre-noche);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trazar 3s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }

.portada__sello {
  position: absolute;
  right: 34%;
  top: 70px;
  z-index: 3;
  width: 120px; height: 120px;
  opacity: 0;
  transform: rotate(-8deg) scale(.9);
  transition: opacity 1s .6s, transform 1s .6s;
}
.portada__sello.portada__sello--visible { opacity: .9; transform: rotate(-8deg); }
.portada__sello svg { width: 100%; height: 100%; color: rgb(255 255 255 / .82); }

/* --------------------------------------------------------------------------
   Los sellos (los dibuja mundos.js)
   -------------------------------------------------------------------------- */

.sello { color: rgb(var(--c-sello, var(--c-marca, var(--c-magia)))); overflow: visible; }
.sello text { fill: currentColor; font-weight: 700; }
.sello__fino { font-family: var(--tipo-texto); }
.sello__nombre { font-family: 'Cormorant Garamond', Georgia, serif; }
.sello--hanko { color: rgb(var(--c-hanko)); }

/* --------------------------------------------------------------------------
   El buscador
   -------------------------------------------------------------------------- */

.buscador { position: relative; z-index: 6; margin-top: -62px; }
.buscador__caja {
  background: var(--tarjeta);
  border-radius: 18px;
  box-shadow: var(--sombra);
  border: 1px solid var(--linea-clara);
  padding: 10px;
  display: grid;
  grid-template-columns: var(--columnas-del-buscador, .9fr 1.25fr 1fr .95fr 1fr .8fr auto);
  align-items: stretch;
}
.campo-busqueda {
  padding: 12px 16px;
  border-right: 1px solid var(--linea-clara);
  position: relative;
  border-radius: 12px;
  transition: background .2s;
  text-align: left;
  display: block;
  min-width: 0;
  min-height: 62px;
}
.campo-busqueda:hover { background: color-mix(in srgb, var(--laca) 7%, #fff); }
.campo-busqueda:focus-within { box-shadow: inset 0 0 0 2px var(--tinta); }
.campo-busqueda--ultimo { border-right: 0; }
.campo-busqueda--desplegable { padding: 0; }
.campo-busqueda__boton {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px 16px;
  text-align: left;
  border-radius: 12px;
}
.campo-busqueda__boton:focus-visible { outline-offset: -2px; }
.campo-busqueda__rotulo {
  display: block;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  font-weight: 800;
}
.campo-busqueda__valor {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.campo-busqueda__valor small { font-weight: 500; color: var(--tinta-suave); font-size: 12.5px; }
.campo-busqueda__selector {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%; height: 100%;
}
.buscador__ir {
  margin-left: 6px;
  background: var(--noche);
  color: #fff;
  border-radius: 12px;
  padding: 0 24px;
  min-height: 52px;
  font-weight: 800;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .6s, transform .2s;
  white-space: nowrap;
}
.buscador__ir:hover { transform: translateY(-1px); }
.buscador__ir[aria-disabled="true"] { opacity: .3; cursor: not-allowed; transform: none; }
.buscador__aviso { min-height: 0; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--tinta-suave); }
.buscador__aviso:empty { display: none; }

.desplegable {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 16px;
  z-index: 20;
  min-width: 280px;
  cursor: default;
  animation: aparecer .3s;
}
.desplegable--motivo { min-width: 320px; }
.desplegable__fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.desplegable__fila + .desplegable__fila { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea-clara); }
.desplegable__fila b { font-size: 14px; }
.desplegable__fila small { display: block; color: var(--tinta-suave); font-size: 12px; font-weight: 500; }
.desplegable__grupo { border: 0; }
.desplegable__titulo { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.desplegable__nota { font-size: 12px; color: var(--tinta-suave); margin-top: 10px; line-height: 1.45; }
.contador { display: flex; align-items: center; gap: 8px; }
.contador button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  font-size: 17px;
  font-weight: 700;
}
.contador button:hover { border-color: var(--laca); }
.contador button[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.contador output { min-width: 22px; text-align: center; font-weight: 800; }
.interruptor {
  width: 44px; height: 26px;
  border-radius: 13px;
  background: var(--linea);
  position: relative;
  flex: 0 0 44px;
  transition: background .2s;
}
.interruptor::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
  box-shadow: 0 1px 3px rgb(0 0 0 / .2);
}
.interruptor[aria-checked="true"] { background: var(--tinta); }
.interruptor[aria-checked="true"]::after { left: 21px; }

/* Las opciones que se eligen de entre varias: radios con la piel de los
   botones del piloto. Se recorren con las flechas y el grupo es una sola parada
   del tabulador (4.11). */
.opcion { position: relative; display: flex; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--linea);
  font-weight: 700;
  font-size: 13px;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: all .2s;
}
.opcion svg { width: 18px; height: 18px; flex: 0 0 18px; }
.opcion svg * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.opcion input:checked + span { border-color: var(--tinta); color: var(--tinta); background: var(--papel); }
.opcion input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.motivos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.interruptores { display: flex; gap: 6px; }
.interruptores .opcion { flex: 1; }
.interruptores .opcion span { justify-content: center; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Las secciones y las puertas
   -------------------------------------------------------------------------- */

.seccion { padding: 74px 0; }
.cabecera-seccion { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.cabecera-seccion__antetitulo {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--laca-fuerte);
  font-weight: 800;
  margin-bottom: 8px;
}
.cabecera-seccion__titulo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1;
  letter-spacing: -.5px;
}
.cabecera-seccion__titulo em { font-style: italic; color: var(--laca-fuerte); }
.cabecera-seccion__texto { font-size: 14px; color: var(--tinta-suave); max-width: 380px; text-align: right; line-height: 1.55; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.filtros button {
  padding: 8px 16px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-suave);
  background: #fff;
}
.filtros button[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }

.puertas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.puerta {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: rgb(var(--c-puerta-noche, var(--c-side-bg)));
  aspect-ratio: 3 / 4;
  text-align: left;
  color: #fff;
  box-shadow: var(--sombra-baja);
  transition: transform .45s var(--movimiento);
  display: block;
  width: 100%;
}
.puerta:hover { transform: translateY(-6px); }
.puerta[aria-pressed="true"] { outline: 2px solid var(--oro); outline-offset: 3px; }
.puerta__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--movimiento);
}
.puerta:hover .puerta__foto { transform: scale(1.06); }
.puerta__sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgb(var(--c-puerta-noche, var(--c-side-bg))) 0%,
    rgb(var(--c-puerta-noche, var(--c-side-bg)) / .35) 48%,
    transparent 75%);
}
.puerta__patron {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  color: #fff;
  opacity: .1;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent);
  mask-image: linear-gradient(0deg, #000, transparent);
}
.puerta__codigo {
  position: absolute;
  top: 16px; left: 18px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.puerta__codigo i { width: 18px; height: 1px; background: rgb(255 255 255 / .6); }
.puerta__dibujo {
  position: absolute;
  left: 16px; right: 16px; bottom: 112px;
  z-index: 2;
  opacity: .42;
  transition: opacity .4s;
}
.puerta:hover .puerta__dibujo { opacity: .85; }
.puerta__dibujo svg { width: 100%; height: auto; display: block; }
.puerta__dibujo svg * { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.puerta__texto { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; }
.puerta__ciudad {
  display: block;
  font-size: 10.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgb(var(--c-puerta-luz, var(--c-side-accent)));
  font-weight: 800;
}
.puerta__nombre { display: block; font-family: var(--tipo-display); font-weight: 500; font-size: 31px; line-height: 1.02; margin: 6px 0 5px; }
.puerta__lema { display: block; font-style: italic; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; color: var(--sobre-noche); }

/* La portada de las marcas (4.46): la misma portada y las mismas puertas, una
   por marca y como enlace, porque lleva a otra dirección. Más baja que la de un
   destino: aquí no hay buscador que se monte encima. */
.portada--marcas { height: min(62vh, 560px); min-height: 420px; }
.portada--marcas .portada__texto { margin-bottom: 0; }
.puertas--marcas { grid-template-columns: repeat(3, 1fr); }
/* Con dos o una, a lo ancho y apaisadas: dos puertas de pie en tres columnas
   dejaban un hueco a la derecha, y a lo ancho y de pie no caben en la pantalla. */
.puertas--marcas[data-cuantas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.puertas--marcas[data-cuantas="1"] { grid-template-columns: minmax(0, 560px); }
.puertas--marcas[data-cuantas="1"] .puerta,
.puertas--marcas[data-cuantas="2"] .puerta { aspect-ratio: 4 / 3; }
a.puerta { text-decoration: none; }

/* --------------------------------------------------------------------------
   El viaje
   -------------------------------------------------------------------------- */

.flujo {
  position: relative;
  background: var(--laca-tenue);
  border-top: 1px solid var(--linea);
  padding: 74px 0;
  transition: background .8s;
}
/* Con el acento pleno y a la mitad de la mitad: el piloto lo pinta con el
   acento al 18 % y a media opacidad. */
.flujo__patron {
  position: absolute;
  inset: 0;
  color: var(--laca);
  opacity: .09;
  pointer-events: none;
}
.flujo__interior { position: relative; }

.viaje { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.ornamento { display: block; width: 120px; height: 14px; margin: 0 0 14px; }
.ornamento svg { display: block; width: 100%; height: 100%; }
.ornamento svg * { fill: none; stroke: var(--laca); stroke-width: 1.2; stroke-linecap: round; }
.viaje__antetitulo {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--laca-fuerte);
  font-weight: 800;
  margin-bottom: 8px;
}
.viaje__titulo { font-family: var(--tipo-display); font-weight: 500; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.02; }
.viaje__porque { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 21px; color: var(--tinta-suave); margin-top: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; }
.chip {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--linea);
  color: var(--tinta-suave);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.chip--acento { background: var(--laca); border-color: var(--laca); color: var(--sobre-laca); }

.celebra {
  background: #fff;
  border: 1px solid var(--linea-clara);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 28px;
  box-shadow: var(--sombra-baja);
}
/* La leyenda a un lado y su explicación al otro, como la cabecera del piloto:
   una leyenda tiene que ser el primer hijo del grupo, y por eso flota. */
.celebra__titulo { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600; float: left; margin-right: 12px; }
.celebra__texto { font-size: 13px; color: var(--tinta-suave); float: right; margin-top: 9px; }
.celebra__opciones { display: flex; gap: 8px; flex-wrap: wrap; clear: both; padding-top: 12px; }
/* Los motivos y el botón de los niños, en la misma fila que se parte: el de los
   niños al final y a la derecha, como en el piloto. */
.celebra__motivos { display: contents; }
.celebra__motivos .opcion span,
.celebra__ninos {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: var(--papel);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--tinta-suave);
  transition: all .2s;
}
.celebra__motivos .opcion span:hover, .celebra__ninos:hover { border-color: var(--laca); color: var(--tinta); }
.celebra__motivos .opcion input:checked + span { background: var(--laca); border-color: var(--laca); color: var(--sobre-laca); }
.celebra__ninos { margin-left: auto; }
.celebra__ninos svg { width: 18px; height: 18px; }
.celebra__ninos svg * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.celebra__ninos[aria-pressed="true"] { background: var(--noche); border-color: var(--noche); color: #fff; }

.progreso { display: flex; align-items: center; margin-bottom: 30px; font-size: 12.5px; font-weight: 700; color: var(--tinta-tenue); list-style: none; }
.progreso__paso { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.progreso__paso + .progreso__paso::before { content: ''; flex: 1 1 24px; min-width: 24px; height: 1px; background: var(--linea); margin: 0 14px 0 4px; }
.progreso__paso + .progreso__paso { flex: 1; }
.progreso__numero {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: #fff;
  flex: 0 0 26px;
}
.progreso__paso[aria-current="step"] { color: var(--tinta); }
.progreso__paso[aria-current="step"] .progreso__numero { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.progreso__paso--hecho .progreso__numero { background: var(--laca); color: var(--sobre-laca); border-color: var(--laca); }

.columnas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.paso { animation: entrar .6s var(--movimiento); }

/* La tira de días */
.dias { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 10px; }
.dias::-webkit-scrollbar { height: 4px; }
.dias::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 4px; }
.dia { position: relative; flex: 0 0 80px; display: flex; }
.dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dia span.dia__caja {
  flex: 1;
  border: 1px solid var(--linea);
  background: #fff;
  border-radius: 12px;
  padding: 9px 6px;
  text-align: center;
  cursor: pointer;
}
.dia__semana { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--tinta-tenue); font-weight: 700; }
.dia__numero { display: block; font-weight: 800; font-size: 15px; margin-top: 2px; }
.dia__libres { display: block; font-size: 10.5px; color: var(--laca-fuerte); font-weight: 700; margin-top: 2px; }
.dia input:checked + .dia__caja { border-color: var(--noche); background: var(--noche); color: #fff; }
.dia input:checked + .dia__caja .dia__semana { color: var(--sobre-noche); }
.dia input:checked + .dia__caja .dia__libres { color: var(--luz); }
.dia input:focus-visible + .dia__caja { outline: 2px solid var(--tinta); outline-offset: 2px; }
.dia--sin .dia__caja { opacity: .55; }

.estado { font-size: 13.5px; color: var(--tinta-suave); margin: 4px 0 12px; font-weight: 600; }
.estado:empty { display: none; }
/* Con horas libres, la cuenta solo la oye quien usa un lector de pantalla: el
   piloto no la escribe, y la lista ya la enseña. */
.estado:has(> .visualmente-oculto:only-child) { margin: 0; }

/* Los vuelos: cada hora del servicio, con su trayecto y si queda sitio. */
.vuelos { display: flex; flex-direction: column; gap: 10px; }
.vuelos__pasadas { font-size: 13px; color: var(--tinta-suave); margin: 0 0 2px; }
/* Un día especial —un festivo con otro horario— se dice encima de sus horas (4.47). */
.vuelos__especial { font-size: 14px; font-weight: 600; color: var(--laca-fuerte); margin: 0 0 4px; }
.vuelo {
  background: #fff;
  border: 1px solid var(--linea-clara);
  border-radius: 16px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 26px;
  align-items: center;
  transition: border-color .2s, box-shadow .2s;
  text-align: left;
  width: 100%;
  position: relative;
}
.vuelo:hover { border-color: var(--laca); box-shadow: 0 14px 30px -24px rgb(var(--c-side-bg) / .5); }
.vuelo[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta) inset; }
.vuelo--sugerido { border-color: color-mix(in srgb, var(--laca) 55%, #fff); }
.vuelo--no { opacity: .55; cursor: default; }
.vuelo--no:hover { border-color: var(--linea-clara); box-shadow: none; }
/* Una hora completa por falta de sitio se pulsa: abre el «avísame» (4.42). Y por
   eso se lee entera: atenuada al 55 %, como las que no se pueden pedir, su
   «Completo» se quedaba en 2,16:1, y una hora inactiva puede leerse mal pero una
   que se pulsa no (4.11). Lo que dice que está llena es su etiqueta. */
.vuelo--no.vuelo--avisable { opacity: 1; cursor: pointer; }
/* Su «Avísame» se ve en todos los anchos: es lo que dice que se puede pulsar, y
   en un móvil el «Elegir» de las libres se esconde. */
.vuelo__avisame { font-size: 13px; font-weight: 800; color: var(--laca-fuerte); white-space: nowrap; }

/* «Avísame si se libera» (4.42): la tarjeta que se abre debajo de las horas. */
.avisame { background: #fff; border: 1px solid var(--linea-clara); border-radius: 18px; padding: 20px 22px; margin-top: 14px; }
.avisame__titulo { font-family: var(--tipo-display); font-weight: 500; font-size: 26px; line-height: 1.1; }
.avisame__texto { font-size: 14px; color: var(--tinta-suave); margin: 6px 0 16px; line-height: 1.5; }
.avisame__margen { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.avisame__opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.avisame__opciones .opcion { flex: 1 1 180px; }
.avisame__botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.avisame__pedir { margin-top: 12px; }
.vuelo__sugerencia {
  position: absolute;
  top: -9px; left: 20px;
  background: var(--laca);
  color: var(--sobre-laca);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.vuelo__hora { font-size: 24px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.vuelo__hora small { display: block; font-size: 10.5px; letter-spacing: 1.5px; color: var(--tinta-tenue); font-weight: 700; text-transform: uppercase; }
.vuelo__hora--fin { text-align: right; }
.vuelo__trayecto { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vuelo__trayecto i { flex: 1; height: 1px; background: var(--linea); }
.vuelo__codigo { font-size: 12.5px; color: var(--tinta-tenue); font-weight: 700; letter-spacing: 1px; }
.vuelo__duracion { font-size: 12px; color: var(--tinta-suave); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vuelo__lado { display: flex; gap: 14px; align-items: center; justify-content: flex-end; }
.vuelo__elegir { font-size: 13px; font-weight: 800; color: var(--laca-fuerte); min-width: 70px; text-align: right; }
.etiqueta {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.etiqueta--pocas { background: rgb(var(--c-pocas-fondo)); color: rgb(var(--c-pocas)); }
.etiqueta--bien { background: rgb(var(--c-bien-fondo)); color: rgb(var(--c-sage-ink)); }
.etiqueta--no { background: rgb(var(--c-gris-fondo)); color: rgb(var(--c-charcoal-faint)); }
/* «Última plaza»: la etiqueta de «últimas plazas» del piloto, solo cuando queda
   una unidad que admita al grupo (4.29). */
.hueco__marca {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgb(var(--c-pocas-fondo));
  color: rgb(var(--c-pocas));
}
.vacio {
  padding: 26px;
  border: 1px dashed var(--linea);
  border-radius: 16px;
  color: var(--tinta-suave);
  font-size: 14px;
  text-align: center;
  background: #fff;
}

/* Las cabinas */
.cabinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.cabina {
  background: #fff;
  border: 1px solid var(--linea-clara);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  transition: transform .35s var(--movimiento), box-shadow .35s, border-color .2s;
  position: relative;
  display: block;
  width: 100%;
}
.cabina:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgb(var(--c-side-bg) / .5); }
.cabina[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta) inset; }
.cabina--recomendada { border-color: var(--laca); }
/* Una zona sin sitio a esa hora se pulsa —dice a qué horas sí— y por eso se lee
   (4.11): se apaga la foto, no el texto. Con la tarjeta entera al 60 %, lo que
   explica a qué horas sí se quedaba en 2,52:1, y con el horario de cada zona
   (4.48) esa tarjeta sale cada noche. */
.cabina--no { cursor: default; border-style: dashed; }
.cabina--no:hover { transform: none; box-shadow: none; }
.cabina--no .zona__foto { opacity: .4; filter: grayscale(1); }
.cabina__imagen { height: 175px; position: relative; background: var(--laca-tenue); overflow: hidden; display: block; }
.zona__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cabina__marca {
  position: absolute;
  left: 12px; top: 12px;
  background: rgb(255 255 255 / .94);
  color: var(--tinta);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 10px;
}
.cabina__marca--elegida { left: auto; right: 12px; background: var(--tinta); color: #fff; }
.cabina__marca--recomendada { top: auto; bottom: 12px; background: var(--laca); color: var(--sobre-laca); }
/* «Elegida» solo en la que lo está, como en el piloto. */
.cabina__marca--elegida { display: none; }
.cabina[aria-pressed="true"] .cabina__marca--elegida { display: block; }
.cabina__cuerpo { display: block; padding: 16px 18px 18px; }
.cabina__nombre { display: block; font-family: var(--tipo-display); font-weight: 500; font-size: 23px; line-height: 1.05; }
.cabina__texto { display: block; font-size: 13px; color: var(--tinta-suave); margin-top: 6px; line-height: 1.45; }
.cabina__porque { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 16px; color: var(--laca-fuerte); margin-top: 8px; }
.cabina__estado { display: block; font-size: 12.5px; color: var(--tinta-suave); margin-top: 8px; font-weight: 600; }
.fino { font-size: 12px; color: var(--tinta-tenue); margin-top: 14px; line-height: 1.5; }

/* Los datos */
.cuenta-atras {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--noche);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 14px;
  width: fit-content;
  font-size: 13px;
}
.cuenta-atras__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--luz); animation: latido 1.6s ease-in-out infinite; }
.cuenta-atras strong { font-variant-numeric: tabular-nums; }
.cuenta-atras--apurada .cuenta-atras__punto { background: #fff; }
@keyframes latido { 50% { opacity: .35; } }

.aviso-garantia {
  background: #fff;
  border: 1px solid var(--linea-clara);
  border-left: 3px solid var(--laca);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--tinta-suave);
  margin-bottom: 14px;
}

.ficha-datos { background: #fff; border: 1px solid var(--linea-clara); border-radius: 18px; padding: 26px; }
.ficha-datos__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ficha-datos__titulo { font-family: var(--tipo-display); font-weight: 500; font-size: 28px; line-height: 1.05; }
.ficha-datos__texto { font-size: 14px; color: var(--tinta-suave); margin: 6px 0 14px; line-height: 1.5; }
.ficha-datos__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.campo { border: 0; }
.campo--entera { grid-column: 1 / -1; }
.campo + .campo { margin-top: 0; }
.ficha-datos > .campo { margin-top: 16px; }
.campo__etiqueta {
  display: block;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  font-weight: 700;
  margin-bottom: 6px;
}
.campo__etiqueta .opcional { letter-spacing: 1px; font-weight: 600; }
.requerido { color: var(--laca-fuerte); }
.campo__control {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 15px;
  outline: none;
  background: var(--papel);
}
.campo__control:focus { border-color: var(--tinta); background: #fff; }
.campo__control[aria-invalid="true"] { border-color: rgb(var(--c-status-error-ink)); }
.campo__control--area { resize: vertical; min-height: 64px; }
.campo__control--tarjeta { padding: 15px 14px; background: #fff; }
.campo__ayuda { font-size: 12px; color: var(--tinta-suave); margin-top: 6px; line-height: 1.45; }
.campo__error { font-size: 12.5px; color: rgb(var(--c-status-error-ink)); margin-top: 6px; font-weight: 700; }
.campo__error--vivo:empty { display: none; }

.palabra {
  margin-top: 18px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  cursor: pointer;
  background: linear-gradient(135deg, rgb(var(--c-cream-50)), color-mix(in srgb, var(--laca) 10%, rgb(var(--c-cream-50))));
}
.palabra input { width: 20px; height: 20px; accent-color: var(--tinta); margin-top: 2px; }
.palabra__titulo { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; display: block; line-height: 1.1; }
.palabra__texto { font-size: 13.5px; color: var(--tinta-suave); line-height: 1.5; display: block; margin-top: 4px; }

.equipo {
  margin-top: 16px;
  background: var(--papel);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--tinta-suave);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.5;
}
.equipo strong { color: var(--tinta); }
.equipo__icono { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px; }
.equipo__icono svg { width: 100%; height: 100%; }
.equipo__icono svg * { fill: none; stroke: var(--laca); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.alergenos { margin-top: 18px; }
.alergenos__lista { display: flex; flex-wrap: wrap; gap: 6px; }
.alergeno { position: relative; display: flex; }
.alergeno input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.alergeno span {
  padding: 8px 12px;
  min-height: 36px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta-suave);
  cursor: pointer;
}
.alergeno input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.alergeno input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }

.consentimiento { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea-clara); }
.consentimiento__fila { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 13.5px; cursor: pointer; align-items: start; }
.consentimiento__fila input { width: 20px; height: 20px; accent-color: var(--tinta); margin-top: 1px; }
.consentimiento__nota { font-size: 12px; color: var(--tinta-suave); margin-top: 8px; line-height: 1.5; }

.ventajas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; list-style: none; }
.ventaja { border-top: 1px solid var(--linea); padding-top: 14px; }
.ventaja__icono { display: block; width: 30px; height: 30px; margin-bottom: 6px; }
.ventaja__icono svg { width: 100%; height: 100%; }
.ventaja__icono svg * { fill: none; stroke: var(--laca); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ventaja b { font-size: 13.5px; display: block; }
.ventaja span:not(.ventaja__icono) { font-size: 12.5px; color: var(--tinta-suave); line-height: 1.45; }

.resumen-garantia { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13.5px; margin-bottom: 14px; }
.resumen-garantia dt { color: var(--tinta-tenue); }
.resumen-garantia dd { font-weight: 700; text-align: right; }
.mandato { background: var(--papel); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.mandato__titulo { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--tinta-tenue); font-weight: 800; margin-bottom: 6px; }
.mandato__texto { font-size: 13.5px; line-height: 1.55; }

.hecho { background: #fff; border: 1px solid var(--linea-clara); border-radius: 18px; padding: 26px; }
.hecho__antetitulo { font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--laca-fuerte); font-weight: 800; }
.hecho__titulo { font-family: var(--tipo-display); font-weight: 500; font-size: 31px; line-height: 1.05; margin: 6px 0 8px; }
.hecho__texto { font-size: 14px; color: var(--tinta-suave); line-height: 1.55; }
.hecho__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* El resumen */
.resumen {
  position: sticky;
  top: 92px;
  background: #fff;
  border: 1px solid var(--linea-clara);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.resumen__foto {
  height: 128px;
  background-color: var(--noche);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.resumen__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--noche) 88%, transparent), transparent);
}
.resumen__cabecera { position: absolute; left: 18px; bottom: 14px; right: 18px; z-index: 2; color: #fff; }
.resumen__antetitulo { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--luz); font-weight: 700; }
.resumen__local { font-family: var(--tipo-display); font-weight: 500; font-size: 28px; line-height: 1.02; }
.resumen__ruta { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 6px; }
.resumen__ruta b { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.resumen__ruta small { display: block; font-size: 11px; color: var(--tinta-tenue); }
.resumen__ruta i { flex: 1; margin: 0 12px; border-top: 1px dashed var(--linea); }
.resumen__llegada { text-align: right; }
.resumen__lista { padding: 6px 18px 12px; display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; font-size: 13.5px; }
.resumen__lista dt { color: var(--tinta-tenue); }
.resumen__lista dd { text-align: right; font-weight: 700; }
.resumen__precio { border-top: 1px solid var(--linea-clara); padding: 14px 18px; display: flex; justify-content: space-between; align-items: baseline; }
.resumen__precio > span { font-size: 12.5px; color: var(--tinta-suave); }
.resumen__precio div { text-align: right; }
.resumen__precio b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; }
.resumen__precio small { display: block; font-size: 11.5px; color: rgb(var(--c-sage-ink)); font-weight: 700; }
.resumen__ir {
  margin: 0 18px 12px;
  display: block;
  width: calc(100% - 36px);
  background: var(--noche);
  color: #fff;
  border-radius: 12px;
  padding: 15px;
  min-height: 48px;
  font-weight: 800;
  font-size: 14.5px;
  transition: background .6s, opacity .2s;
}
.resumen__ir[aria-disabled="true"] { opacity: .3; cursor: not-allowed; }
.resumen__volver { display: block; margin: 0 auto 16px; font-size: 12.5px; color: var(--tinta-suave); text-decoration: underline; min-height: 44px; padding: 0 14px; }

/* --------------------------------------------------------------------------
   La tarjeta de embarque
   -------------------------------------------------------------------------- */

.velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--noche) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  padding: 44px 20px;
}
.embarque { width: min(920px, 100%); animation: subir .9s var(--movimiento); }
@keyframes subir { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
.embarque__cerrar {
  position: fixed;
  top: 16px; right: 20px;
  z-index: 61;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgb(255 255 255 / .14);
  color: #fff;
  font-size: 18px;
}
.embarque__cabecera { color: #fff; text-align: center; margin-bottom: 22px; }
.embarque__antetitulo { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--luz); font-weight: 700; }
.embarque__titulo { font-family: var(--tipo-display); font-weight: 500; font-size: 40px; line-height: 1.08; margin-top: 6px; }

.pase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  background: rgb(var(--c-cream-50));
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 60px 120px -40px rgb(0 0 0 / .8);
  position: relative;
  color: var(--tinta);
}
.pase__principal { position: relative; overflow: hidden; }
.pase__agua { position: absolute; right: -10px; bottom: -6px; width: 58%; opacity: .12; pointer-events: none; }
.pase__agua svg { width: 100%; height: auto; display: block; }
.pase__agua svg * { fill: none; stroke: var(--tinta); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pase__barra {
  background: var(--noche);
  color: #fff;
  padding: 16px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.pase__patron { position: absolute; inset: 0; color: #fff; opacity: .1; }
.pase__barra > :not(.pase__patron) { position: relative; z-index: 1; }
.pase__marca { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; letter-spacing: 6px; font-size: 18px; text-transform: uppercase; }
.pase__tipo { font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--luz); font-weight: 700; text-align: right; }
.pase__ruta { display: flex; align-items: center; padding: 26px 26px 10px; gap: 18px; }
.pase__rotulo { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--tinta-tenue); font-weight: 700; }
.pase__codigo { display: block; font-size: 48px; font-weight: 800; letter-spacing: 1px; line-height: 1; }
.pase__ciudad { display: block; font-size: 12.5px; color: var(--tinta-suave); margin-top: 4px; }
.pase__llegada { text-align: right; }
.pase__trayecto { flex: 1; display: flex; align-items: center; gap: 10px; }
.pase__trayecto::before, .pase__trayecto::after { content: ''; flex: 1; border-top: 1px dashed var(--tinta-tenue); }
.pase__trayecto svg { width: 22px; height: 22px; transform: rotate(90deg); }
.pase__trayecto svg path { fill: var(--laca); stroke: none; }
.pase__datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 18px; padding: 14px 26px 18px; position: relative; }
.pase__datos dt { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tinta-tenue); font-weight: 700; }
.pase__datos dd { font-size: 15px; font-weight: 800; margin-top: 3px; overflow-wrap: anywhere; }
.pase__mensaje {
  margin: 0 150px 24px 26px;
  font-size: 13px;
  color: var(--tinta-suave);
  line-height: 1.55;
  border-left: 2px solid var(--laca);
  padding-left: 12px;
  position: relative;
}
.pase__mensaje strong { color: var(--tinta); }
.pase__sello {
  position: absolute;
  right: 18px; bottom: 10px;
  width: 120px; height: 120px;
  transform: rotate(-12deg) scale(2.2);
  opacity: 0;
  transition: transform .55s cubic-bezier(.3, 1.6, .5, 1), opacity .3s;
  pointer-events: none;
}
.pase__sello svg { width: 100%; height: 100%; }
.pase__sello.pase__sello--visible { transform: rotate(-12deg) scale(1); opacity: .92; }
.pase__talon {
  border-left: 1.5px dashed rgb(var(--c-cream-600));
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: color-mix(in srgb, var(--laca) 8%, rgb(var(--c-cream-100)));
  position: relative;
}
.pase__talon::before, .pase__talon::after {
  content: '';
  position: absolute;
  left: -12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--noche) 90%, #000);
}
.pase__talon::before { top: -11px; }
.pase__talon::after { bottom: -11px; }
.pase__dato { display: block; font-size: 14px; font-weight: 800; margin-top: 2px; }
.pase__barras { display: flex; gap: 2px; height: 52px; margin-top: auto; }
.pase__barras i { background: var(--tinta); }

.acciones-pase { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.accion-pase {
  background: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  color: #fff;
  text-decoration: none;
  display: block;
  transition: background .2s;
}
.accion-pase:hover { background: rgb(255 255 255 / .13); }
.accion-pase__icono { display: block; width: 26px; height: 26px; }
.accion-pase__icono svg { width: 100%; height: 100%; }
.accion-pase__icono svg * { fill: none; stroke: var(--luz); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.accion-pase b { display: block; font-size: 14px; margin-top: 8px; }
.accion-pase span:not(.accion-pase__icono) { font-size: 12.5px; color: var(--sobre-noche); }

.despues {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
  background: rgb(var(--c-cream-50));
  color: var(--tinta);
  border-radius: 20px;
  padding: 24px 26px;
}
.despues__antetitulo { font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--laca-fuerte); font-weight: 800; }
.despues__titulo { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 30px; line-height: 1.05; margin: 6px 0; }
.despues__texto { font-size: 13.5px; color: var(--tinta-suave); line-height: 1.55; max-width: 540px; }

/* --------------------------------------------------------------------------
   Las cabeceras de página
   -------------------------------------------------------------------------- */

.cabecera-pagina { padding: 70px 0 40px; border-bottom: 1px solid var(--linea); position: relative; overflow: hidden; }
.cabecera-pagina--corta { padding: 56px 0 30px; }
.cabecera-pagina__antetitulo {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--oro-tinta);
  font-weight: 800;
  margin-bottom: 10px;
}
.cabecera-pagina__titulo { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(46px, 6vw, 78px); line-height: .95; }
.cabecera-pagina__titulo em { font-style: italic; color: var(--oro-tinta); }
.cabecera-pagina__texto { font-size: 15px; color: var(--tinta-suave); max-width: 560px; margin-top: 14px; line-height: 1.6; }
.cabecera-pagina__dibujo { position: absolute; right: -40px; bottom: -30px; width: 560px; opacity: .1; pointer-events: none; }
.cabecera-pagina__dibujo svg { width: 100%; height: auto; display: block; }
.cabecera-pagina__dibujo svg * { fill: none; stroke: var(--tinta); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.tira-dibujos { display: grid; grid-template-columns: repeat(var(--cuantos, 8), 1fr); gap: 18px; margin-top: 34px; }
.tira-dibujos:empty { display: none; }
.tira-dibujos button { opacity: .55; transition: opacity .3s; color: rgb(var(--c-tira, var(--c-magia-ink))); min-height: 44px; }
.tira-dibujos button:hover, .tira-dibujos button:focus-visible { opacity: 1; }
.tira-dibujos svg { width: 100%; height: auto; display: block; }
.tira-dibujos svg * { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tira-dibujos small { display: block; text-align: center; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; margin-top: 4px; }

.pagina__cuerpo { padding-bottom: 70px; }

/* La guía de destinos */
.guia { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding: 64px 0; border-bottom: 1px solid var(--linea); }
.guia:nth-child(even) { grid-template-columns: .9fr 1.1fr; }
.guia:nth-child(even) .guia__fotos { order: 2; }
.guia__fotos { position: relative; height: 460px; }
.guia__foto { position: absolute; inset: 0 18% 12% 0; border-radius: 14px; background-color: var(--laca-tenue); background-size: cover; background-position: center; box-shadow: var(--sombra); }
.guia__foto--segunda { inset: auto 0 0 auto; width: 44%; height: 52%; border-radius: 12px; border: 6px solid var(--papel); }
.guia__dibujo { position: absolute; left: -10px; bottom: -20px; width: 62%; opacity: .5; color: rgb(var(--c-guia, var(--c-magia))); pointer-events: none; }
.guia__dibujo svg { width: 100%; height: auto; display: block; }
.guia__dibujo svg * { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.guia__ruta {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 800;
  color: rgb(var(--c-guia-tinta, var(--c-magia-ink)));
  display: flex;
  gap: 10px;
  align-items: center;
}
.guia__ruta i { width: 26px; height: 1px; background: currentColor; }
.guia__nombre { font-family: var(--tipo-display); font-weight: 500; font-size: clamp(44px, 5vw, 70px); line-height: 1; margin: 12px 0 8px; }
.guia__lema { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 26px; color: rgb(var(--c-guia-tinta, var(--c-magia-ink))); }
.guia__descripcion { font-size: 15px; color: var(--tinta-suave); line-height: 1.7; margin: 14px 0 18px; max-width: 470px; }
.guia__zonas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; list-style: none; }
.guia__zonas li { font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; }
.guia__horario { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; margin-bottom: 22px; }
.guia__horario dt { color: var(--tinta-tenue); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 10.5px; padding-top: 2px; }

/* Los botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: transform .2s;
}
.boton:hover { transform: translateY(-2px); }
.boton[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.boton--principal { background: var(--tinta); color: #fff; }
.boton--secundario { background: transparent; color: var(--tinta); border: 1px solid var(--tinta); }
.boton--texto { color: var(--tinta-suave); text-decoration: underline; font-weight: 700; padding: 0 10px; }

/* Mis viajes */
.pagina__saludo { font-size: 15px; color: var(--tinta-suave); margin-top: 30px; line-height: 1.6; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 34px 0 30px; }
.cifra { background: #fff; border: 1px solid var(--linea-clara); border-radius: 16px; padding: 20px 22px; }
.cifra__valor { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 44px; font-weight: 600; line-height: 1; white-space: nowrap; }
.cifra__texto { font-size: 13px; color: var(--tinta-suave); margin-top: 6px; }
.cifra--destacada { background: var(--marino); color: #fff; border-color: var(--marino); }
.cifra--destacada .cifra__valor { color: var(--oro-claro); }
.cifra--destacada .cifra__texto { color: rgb(var(--c-side-text)); }
.rotulo-lista { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--tinta-tenue); font-weight: 800; margin: 30px 0 14px; }

.billete {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  background: #fff;
  border: 1px solid var(--linea-clara);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--sombra-baja);
}
.billete__foto { background-color: rgb(var(--c-billete-noche, var(--c-side-bg))); background-size: cover; background-position: center; min-height: 200px; position: relative; }
.billete__patron { position: absolute; inset: 0; color: #fff; opacity: .1; }
.billete__cuerpo { padding: 22px 26px; }
.billete__ruta { font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 800; color: rgb(var(--c-billete-tinta, var(--c-magia-ink))); }
.billete__nombre { font-family: var(--tipo-display); font-weight: 500; font-size: 32px; line-height: 1.02; margin: 6px 0 4px; }
.billete__motivo { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px; color: var(--tinta-suave); }
.billete__datos { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 13px; }
.billete__datos dt { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tinta-tenue); font-weight: 700; }
.billete__datos dd { font-size: 14.5px; font-weight: 700; }
.billete__lado {
  padding: 22px 24px;
  border-left: 1px dashed var(--linea);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-width: 230px;
  background: color-mix(in srgb, rgb(var(--c-billete, var(--c-magia))) 5%, #fff);
}
.billete__acciones { display: flex; flex-direction: column; gap: 8px; }
.cuenta-dias { display: flex; gap: 10px; margin-bottom: 6px; }
.cuenta-dias:empty { display: none; }
.cuenta-dias div { text-align: center; }
.cuenta-dias b { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; font-weight: 600; line-height: 1; }
.cuenta-dias small { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tinta-tenue); font-weight: 700; }
.estado-viaje {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  align-self: flex-start;
  background: rgb(var(--c-gris-fondo));
  color: rgb(var(--c-charcoal-faint));
}
.estado-viaje:empty { display: none; }
.estado-viaje--pendiente { background: rgb(var(--c-pocas-fondo)); color: rgb(var(--c-pocas)); }
.estado-viaje--hecho { background: rgb(var(--c-bien-fondo)); color: rgb(var(--c-sage-ink)); }
.estado-viaje--cumplido { background: var(--marino); color: var(--oro-claro); }
.billete__sello { width: 86px; margin-top: 6px; }
.billete__sello svg { width: 100%; height: auto; display: block; }
.boton-viaje {
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid var(--linea);
  background: #fff;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boton-viaje:hover { filter: brightness(.97); }
.boton-viaje--principal {
  background: rgb(var(--c-billete, var(--c-charcoal)));
  border-color: rgb(var(--c-billete, var(--c-charcoal)));
  color: #fff;
}
.sello-hecho {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(var(--c-sage));
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
.nada { background: #fff; border: 1px dashed var(--linea); border-radius: 18px; padding: 34px; text-align: center; color: var(--tinta-suave); margin-top: 34px; }
.nada__titulo { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; color: var(--tinta); font-weight: 500; margin-bottom: 6px; }
.nada__texto { font-size: 14px; line-height: 1.6; max-width: 520px; margin: 0 auto; }
.nada__hecho { font-size: 14.5px; color: var(--tinta); font-weight: 700; margin-top: 16px; }
.nada .sello-hecho { margin: 0 auto 14px; }
.nada .boton { margin-top: 16px; }
.pedir { display: flex; gap: 10px; align-items: flex-start; justify-content: center; flex-wrap: wrap; margin: 20px auto 0; max-width: 560px; text-align: left; }
.pedir .campo { flex: 1 1 280px; }
.pedir .boton { margin-top: 22px; }

/* La cola desde el móvil (4.44): cuántos grupos tiene delante, en grande, y
 * la puerta ofrecida debajo de las horas cuando hoy está completo. */
.turno__cifra { font-family: var(--tipo-display); font-size: 72px; line-height: 1; color: var(--tinta); font-variant-numeric: lining-nums; margin: 0 0 10px; }
.turno__cifra:empty { display: none; }
.cola-oferta { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--linea); border-radius: 18px; background: #fff; text-align: left; }
.cola-oferta__texto { margin: 0 0 4px; font-size: 14px; line-height: 1.55; color: var(--tinta-suave); }
.cola-oferta .boton { margin-top: 12px; }

/* El enlace del aviso */
.enlace { padding-top: 34px; }
.retraso, .cambio { background: #fff; border: 1px solid var(--linea-clara); border-radius: 18px; padding: 20px 22px; margin-bottom: 14px; }
.retraso { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.retraso__texto { font-size: 14px; color: var(--tinta-suave); line-height: 1.55; }
.cambio__titulo { font-family: var(--tipo-display); font-weight: 500; font-size: 28px; line-height: 1.05; }
.cambio__texto { font-size: 13.5px; color: var(--tinta-suave); margin: 6px 0 14px; line-height: 1.5; }
.cambio__horas { border: 0; margin-top: 14px; }
.horas-cambio { display: flex; flex-wrap: wrap; gap: 6px; }
.horas-cambio .opcion span { min-width: 76px; justify-content: center; font-variant-numeric: tabular-nums; }
.cambio__acciones, .enlace__despues { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.aviso-cambio { margin: 0 0 14px; }

/* El pasaporte */
.libro {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  background: rgb(var(--c-libro));
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 50px 90px -50px rgb(var(--c-side-bg) / .7);
  margin-top: 36px;
}
.hoja { background: rgb(var(--c-hoja)); border-radius: 12px; padding: 30px; position: relative; overflow: hidden; min-height: 470px; }
.hoja::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .35;
  /* El guilloché del piloto: un aro en el centro de cada baldosa y uno en cada
     esquina, que se entrelazan con los de al lado. */
  background-image:
    radial-gradient(circle at 30px 30px, transparent 27.6px, rgb(var(--c-guilloche)) 27.8px, transparent 28.4px),
    radial-gradient(circle at 0 0, transparent 27.6px, rgb(var(--c-guilloche)) 27.8px, transparent 28.4px),
    radial-gradient(circle at 60px 0, transparent 27.6px, rgb(var(--c-guilloche)) 27.8px, transparent 28.4px),
    radial-gradient(circle at 0 60px, transparent 27.6px, rgb(var(--c-guilloche)) 27.8px, transparent 28.4px),
    radial-gradient(circle at 60px 60px, transparent 27.6px, rgb(var(--c-guilloche)) 27.8px, transparent 28.4px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hoja > * { position: relative; }
.hoja--izquierda { border-radius: 12px 4px 4px 12px; box-shadow: inset -18px 0 30px -24px rgb(0 0 0 / .35); }
.hoja--derecha { border-radius: 4px 12px 12px 4px; box-shadow: inset 18px 0 30px -24px rgb(0 0 0 / .35); }
.hoja__rotulo { font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--oro-tinta); font-weight: 800; }
.hoja--derecha .hoja__rotulo { margin-bottom: 18px; }
.hoja__nombre { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 40px; line-height: 1; margin: 10px 0 4px; }
.hoja__desde { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; color: var(--tinta-suave); }
.nivel { margin-top: 26px; }
.nivel__fila { display: flex; justify-content: space-between; font-size: 12px; color: var(--tinta-suave); gap: 10px; }
.nivel__fila b { font-size: 15px; color: var(--tinta); }
.nivel__barra { height: 6px; border-radius: 3px; background: rgb(var(--c-cream-400)); overflow: hidden; margin: 10px 0 6px; }
.nivel__barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--oro), var(--oro-claro)); border-radius: 3px; transition: width 1.2s var(--movimiento); }
.rangos { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; list-style: none; }
.rango { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: var(--tinta-suave); }
.rango i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linea); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 800; }
.rango b { font-weight: 700; }
.rango--logrado { color: var(--tinta); }
.rango--logrado i { background: var(--oro); border-color: var(--oro); color: var(--tinta); }
.palabra-cumplida { margin-top: 22px; border-top: 1px solid var(--linea); padding-top: 16px; display: flex; align-items: center; gap: 14px; }
.palabra-cumplida__cifra { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 40px; font-weight: 600; line-height: 1; color: var(--oro-tinta); white-space: nowrap; }
.palabra-cumplida__texto { font-size: 13px; color: var(--tinta-suave); line-height: 1.45; }
.palabra-cumplida__texto b { color: var(--tinta); }
.sellos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; list-style: none; }
.sello-hueco { aspect-ratio: 1; border: 1px dashed rgb(var(--c-cream-600)); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
.sello-hueco > button, .sello-hueco > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: background .2s; }
.sello-hueco > button:hover { background: rgb(var(--c-magia) / .06); }
.sello-hueco svg { width: 88%; height: 88%; }
.sello-hueco--logrado svg { animation: estampar .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.sello-hueco--pendiente svg { opacity: .35; }
.sello-hueco__vacio { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; color: var(--tinta-suave); text-align: center; line-height: 1.1; padding: 0 10px; }
.sello-hueco__vacio small { display: block; font-family: var(--tipo-texto); font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; margin-top: 4px; }
.sello-hueco__rotulo {
  position: absolute;
  bottom: -2px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--tinta-suave);
  background: rgb(var(--c-hoja));
  padding: 0 4px;
  white-space: nowrap;
}
@keyframes estampar { from { transform: scale(1.8) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------------------------
   Liberar, el aviso suelto y el cerrado
   -------------------------------------------------------------------------- */

.velo--claro { background: rgb(10 10 10 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; z-index: 70; }
.liberar { background: #fff; color: var(--tinta); border-radius: 20px; max-width: 420px; width: 100%; padding: 24px 24px 20px; box-shadow: 0 30px 70px rgb(0 0 0 / .3); }
.liberar__antetitulo { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--tinta-suave); }
.liberar__titulo { font-size: 22px; line-height: 1.2; margin: 6px 0; font-weight: 700; }
.liberar__texto { font-size: 14px; color: var(--tinta-suave); margin: 0 0 14px; }
.liberar__motivos { border: 0; }
.liberar__opciones { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.liberar__opciones .opcion span { border-color: var(--linea); background: rgb(var(--c-cream-50)); border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 500; color: var(--tinta); }
.liberar__opciones .opcion input:checked + span { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.liberar__cargo { font-size: 13.5px; color: rgb(var(--c-status-error-ink)); margin-bottom: 14px; line-height: 1.5; font-weight: 600; }
.liberar__acciones { display: flex; gap: 8px; }
.liberar__acciones button { flex: 1; border-radius: 12px; padding: 12px; min-height: 48px; font-weight: 700; font-size: 14px; border: 1px solid var(--tinta); background: #fff; color: var(--tinta); }
.liberar__acciones .liberar__si { background: var(--tinta); color: #fff; }

.alerta { border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; font-size: 14px; line-height: 1.5; }
.alerta p { margin: 0 0 10px; }
.alerta p:last-child { margin-bottom: 0; }
.alerta--error {
  background: rgb(var(--c-status-error) / .1);
  border: 1px solid rgb(var(--c-status-error) / .4);
  /* La tinta, no el relleno (4.6): con el relleno daba 4,03:1 sobre su propio
     tinte, y es donde el comensal lee por qué no se ha hecho su reserva. */
  color: rgb(var(--c-status-error-ink));
}
.alerta--error .boton--secundario { border-color: rgb(var(--c-status-error-ink)); color: rgb(var(--c-status-error-ink)); }

.cargando {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 3px solid var(--linea);
  border-top-color: var(--laca);
  border-radius: 50%;
  animation: giro .8s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

.brindis {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--tinta);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0;
  transition: all .35s;
  z-index: 80;
  pointer-events: none;
  max-width: 90vw;
}
.brindis.brindis--visible { opacity: 1; transform: translateX(-50%); }

.cerrado { padding: 120px 0; }
.cerrado__titulo { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1; }
.cerrado__texto { font-size: 16px; color: var(--tinta-suave); max-width: 560px; margin-top: 16px; line-height: 1.6; }

.pie { padding: 40px 0 60px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--tinta-tenue); text-align: center; }

/* --------------------------------------------------------------------------
   Anchos
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .buscador__caja { grid-template-columns: 1fr 1fr; gap: 4px; }
  .campo-busqueda { border-right: 0; border-bottom: 1px solid var(--linea-clara); }
  .buscador__ir { grid-column: 1 / -1; margin: 6px 0 0; justify-content: center; padding: 15px; }
  .puertas { grid-template-columns: repeat(2, 1fr); }
  .puertas--marcas { grid-template-columns: repeat(3, 1fr); }
  .columnas { grid-template-columns: minmax(0, 1fr); }
  .resumen { position: relative; top: 0; }
  .barra__pestana { padding: 0 9px; font-size: 12.5px; }
  .barra__socio-texto { display: none; }
  /* Sin columna propia para la ilustración, no se pinta: debajo del texto lo
     cruzaría, y eso es justo lo que no se hace (4.29). */
  .portada__dibujo, .portada__sello { display: none; }
  .portada__interior { grid-template-columns: 32px minmax(0, 1fr) 32px; }
  .pase { grid-template-columns: minmax(0, 1fr); }
  .pase__talon { border-left: 0; border-top: 1.5px dashed rgb(var(--c-cream-600)); }
  .pase__talon::before, .pase__talon::after { display: none; }
  .pase__datos { grid-template-columns: 1fr 1fr; }
  .acciones-pase { grid-template-columns: 1fr 1fr; }
  .vuelo { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
  .vuelo__elegir { display: none; }
  .guia, .guia:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .guia:nth-child(even) .guia__fotos { order: 0; }
  .guia__fotos { height: 360px; }
  .billete { grid-template-columns: minmax(0, 1fr); }
  .billete__foto { min-height: 170px; }
  .billete__lado { border-left: 0; border-top: 1px dashed var(--linea); }
  .libro { grid-template-columns: minmax(0, 1fr); }
  .hoja--izquierda, .hoja--derecha { border-radius: 12px; }
  .cifras { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .contenedor { padding: 0 16px; }
  .barra__fila { height: auto; flex-wrap: wrap; padding-top: 10px; }
  .barra__pestanas { order: 3; width: 100%; overflow-x: auto; height: 44px; }
  .portada__interior { grid-template-columns: 16px minmax(0, 1fr) 16px; }
  .buscador { margin-top: -40px; }
  .puertas { gap: 10px; }
  .puerta__nombre { font-size: 23px; }
  .puerta__dibujo { display: none; }
  .puerta__lema { font-size: 14px; }
  /* Una marca por fila, y apaisada: tres puertas de pie no caben de un vistazo. */
  .puertas--marcas, .puertas--marcas[data-cuantas] { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .puertas--marcas .puerta { aspect-ratio: 4 / 3; }
  .portada--marcas { min-height: 360px; }
  .ficha-datos__dos, .ventajas { grid-template-columns: minmax(0, 1fr); }
  .cabecera-seccion { flex-direction: column; align-items: flex-start; }
  .cabecera-seccion__texto { text-align: left; }
  .pase__codigo { font-size: 34px; }
  .pase__mensaje { margin-right: 26px; margin-bottom: 140px; }
  .progreso__nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .progreso__paso[aria-current="step"] .progreso__nombre { position: static; width: auto; height: auto; clip: auto; }
  .progreso__paso + .progreso__paso::before { margin: 0 6px; }
  .vuelo { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .vuelo__trayecto { display: none; }
  .sellos { grid-template-columns: repeat(3, 1fr); }
  .acciones-pase { grid-template-columns: minmax(0, 1fr); }
  .tira-dibujos { grid-template-columns: repeat(4, 1fr); }
  .ficha-datos { padding: 20px; }
  .celebra__texto { float: left; clear: left; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .portada__dibujo svg * { stroke-dashoffset: 0 !important; }
}

/* --------------------------------------------------------------------------
   Las letras de los destinos, al final y a propósito: tienen que ganar a la
   letra de titulares que cada componente pone más arriba. Sus caras están al
   principio de la hoja.
   -------------------------------------------------------------------------- */

.letra--cormorant { font-family: 'Cormorant Garamond', Georgia, serif; }
.letra--marcellus { font-family: 'Marcellus', Georgia, serif; }
.letra--poiret    { font-family: 'Poiret One', 'Manrope', system-ui, sans-serif; }
.letra--shippori  { font-family: 'Shippori Mincho', Georgia, serif; }
.letra--cinzel    { font-family: 'Cinzel Decorative', Georgia, serif; }
.letra--playfair  { font-family: 'Playfair Display', Georgia, serif; }
.letra--josefin   { font-family: 'Josefin Sans', 'Manrope', system-ui, sans-serif; }
.letra--italiana  { font-family: 'Italiana', Georgia, serif; }
.letra--juana     { font-family: 'Juana', Georgia, serif; }