/* ============================================================================
 * BELLA TOUR · estilo
 * ----------------------------------------------------------------------------
 * Negro profundo, marfil de la piel de los asientos y oro champaña de las
 * franjas del Irizar. El azul es el del LED del escalón y se usa poco: sólo
 * donde algo "se enciende".
 *
 * La geometría sale del video de referencia: el panel negro recortado dentro
 * de un marco claro y los cantos biselados. Por eso casi todo lleva clip-path.
 *
 * FLUIDEZ: nada se anima con top/left ni con filter mientras se hace scroll.
 * Los vehículos llevan la sombra en un <span> propio, no en drop-shadow: con
 * las ruedas girando dentro, un filtro obligaría a repintar la foto entera en
 * cada cuadro.
 * ========================================================================== */

:root {
  --negro: #07070a;
  --negro-2: #0e0e13;
  --negro-3: #16161d;
  --marfil: #eee9df;
  --marfil-2: #ddd5c6;
  --tinta: #121116;
  --texto: #ece8e1;
  --tenue: rgba(236, 232, 225, .64);
  --muy-tenue: rgba(236, 232, 225, .36);
  --linea: rgba(236, 232, 225, .12);
  --oro: #c8a46a;
  --oro-claro: #ead2a0;
  --oro-oscuro: #8e7142;
  --led: #8a96ff;
  --led-brillo: rgba(138, 150, 255, .7);
  --verde: #7fd1a8;
  --rojo: #e0685f;

  --display: 'Michroma', 'Eurostile', 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --curva: cubic-bezier(.22, 1, .36, 1);
  --curva-entra: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* El scroll de lado: html corta lo que se sale y body usa clip (no hidden),
   que no rompe los position: sticky de la escena de Bienvenidos. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.cargando { overflow: hidden; }
main, section, footer { max-width: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
svg { display: block; }
em { font-style: italic; }
::selection { background: var(--oro); color: var(--negro); }
:focus-visible { outline: 1px solid var(--oro-claro); outline-offset: 3px; }

.contenedor { width: min(var(--ancho), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ---------------------------------------------------------------- Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .18em;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--texto);
  line-height: 1;
}
.logo__tour { position: relative; font-size: .56em; letter-spacing: .08em; padding: .9em .35em; }
.logo__tour svg {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 3.3em;
  height: 3.3em;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.logo--oscuro { color: var(--tinta); }
.logo--chico { font-size: 15px; }
[data-anillo] circle { fill: currentColor; }
.logo [data-anillo] { color: var(--oro); }
.logo--oscuro [data-anillo] { color: var(--oro-oscuro); }

/* ------------------------------------------------------------ Botones */
.btn {
  --chaflan: 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 50px;
  padding: 0 28px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(var(--chaflan) 0, 100% 0, 100% calc(100% - var(--chaflan)), calc(100% - var(--chaflan)) 100%, 0 100%, 0 var(--chaflan));
  transition: background .4s var(--curva), color .4s var(--curva), transform .5s var(--curva);
  isolation: isolate;
}
.btn span { position: relative; z-index: 1; }
.btn--marfil { background: var(--marfil); color: var(--tinta); }
.btn--marfil:hover { background: #fff; }
.btn--oro {
  background: linear-gradient(120deg, var(--oro-oscuro), var(--oro) 35%, var(--oro-claro) 55%, var(--oro) 75%);
  background-size: 250% 100%;
  color: var(--tinta);
}
/* El brillo corre solo al pasar el ratón: animar el fondo de 7 botones sin
   parar redibujaba cada cuadro y trababa los celulares. */
.btn--oro:hover { animation: brillo-oro 2.4s linear infinite; }
@keyframes brillo-oro { to { background-position: -250% 0; } }
.btn--linea { background: rgba(236, 232, 225, .45); color: var(--texto); }
.btn--linea::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--negro);
  clip-path: inherit;
  z-index: 0;
  transition: background .4s var(--curva);
}
.btn--linea:hover::before { background: var(--negro-3); }
.btn[disabled], .btn[aria-busy='true'] { opacity: .5; pointer-events: none; }

.antetitulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oro);
}
.antetitulo__raya { width: 38px; height: 1px; background: currentColor; }
.antetitulo--centro { justify-content: center; }

/* ------------------------------------------------------- Pantalla de carga */
.carga { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none; }
.carga__telon {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: var(--negro);
  transition: transform 1.1s var(--curva-entra);
}
.carga__telon--izq { left: 0; }
.carga__telon--der { right: 0; }
.carga__centro {
  position: relative;
  display: grid;
  place-items: center;
  width: 240px;
  height: 240px;
  transition: opacity .5s, transform .9s var(--curva);
}
.carga__anillo { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--led); }
.carga__anillo circle { opacity: .12; transition: opacity .25s; }
.carga__anillo circle.encendido { opacity: 1; }
.carga__marca {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--display);
  font-size: 26px;
  color: #fff;
  text-shadow: 0 0 18px var(--led-brillo);
}
.carga__marca small { font-size: 12px; letter-spacing: .1em; }
.carga__bienvenidos { position: absolute; bottom: -46px; margin: 0; font-family: var(--serif); font-size: 14px; letter-spacing: .6em; color: var(--tenue); }
.carga.abierta .carga__telon--izq { transform: translateX(-101%); }
.carga.abierta .carga__telon--der { transform: translateX(101%); }
.carga.abierta .carga__centro { opacity: 0; transform: scale(1.3); }
.carga.fuera { display: none; }

/* ------------------------------------------------------ Geometría de fondo */
.geo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.geo__rejilla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: .22;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 75%);
}
.geo__trazos { position: absolute; inset: 0; width: 100%; height: 100%; }
.geo__trazos * { fill: none; stroke: rgba(200, 164, 106, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Quietos a propósito: girar algo dentro de la capa fija de fondo obligaba a
   redibujar la pantalla entera en cada cuadro. */
.geo__aro { stroke-dasharray: 3 9; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- Barra fija */
.barra {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(1180px, 100% - 24px);
  padding: 8px 8px 8px 24px;
  background: rgba(10, 10, 14, .92);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transform: translate(-50%, -140%);
  transition: transform .7s var(--curva);
}
.barra--visible { transform: translate(-50%, 0); }
.barra__nav { display: flex; gap: 26px; margin-left: auto; }
.barra__nav a { position: relative; font-size: 13px; letter-spacing: .06em; color: var(--tenue); transition: color .3s; }
.barra__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--curva);
}
.barra__nav a:hover { color: var(--texto); }
.barra__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.barra__cta { min-height: 42px; }
.barra__menu { display: none; width: 44px; height: 44px; position: relative; }
.barra__menu span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--texto); transition: transform .45s var(--curva); }
.barra__menu span:first-child { top: 17px; }
.barra__menu span:last-child { top: 26px; left: 17px; }
.barra__menu[aria-expanded='true'] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.barra__menu[aria-expanded='true'] span:last-child { transform: translateY(-4.5px) rotate(-45deg); left: 11px; }

/* ====================================================================
   VEHÍCULO (portada, showroom y boleto)
   Recorte + rines encima. app.js mueve .vehiculo con translate3d y gira
   cada .vehiculo__rueda lo que corresponde a lo avanzado.
   ==================================================================== */
.vehiculo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% * var(--ancho, 1));
  margin-left: calc((1 - var(--ancho, 1)) * 50%);
  will-change: transform;
  pointer-events: none;
}
.vehiculo__cuerpo { position: relative; }
.vehiculo__foto { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.vehiculo__rueda {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--d) * 100%);
  height: auto;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.vehiculo__sombra {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: -3%;
  height: 12%;
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, .85), rgba(0, 0, 0, .4) 45%, transparent 72%);
}

/* ====================================================================
   PORTADA
   ==================================================================== */
.portada { padding: 12px; min-height: 100svh; display: flex; }
.portada__marco {
  --n: 74px;   /* alto de la pestaña del logo */
  --k: 26px;   /* chaflán */
  --t: 44px;   /* ancho de la lengüeta derecha */
  --w: 400px;  /* ancho del hueco de la tarjeta */
  --c: 176px;  /* alto del hueco de la tarjeta */
  position: relative;
  flex: 1;
  min-height: max(660px, calc(100svh - 24px));
  background: var(--marfil);
  border-radius: 22px;
  overflow: hidden;
}
.portada__cabeza {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--n);
  padding: 0 34px;
}
.portada__reloj { font-family: var(--display); font-size: 11px; letter-spacing: .14em; color: rgba(18, 17, 22, .45); }

.portada__panel {
  position: absolute;
  inset: 10px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 55% 66%, rgba(200, 164, 106, .16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(138, 150, 255, .10), transparent 70%),
    linear-gradient(180deg, #0b0b0f, #050507);
  clip-path: polygon(
    0 calc(var(--n) + var(--k)),
    var(--k) var(--n),
    calc(40% - var(--n)) var(--n),
    40% 0,
    calc(100% - var(--k)) 0,
    100% var(--k),
    100% 26%,
    calc(100% - var(--t)) calc(26% + var(--t)),
    calc(100% - var(--t)) calc(60% - var(--t)),
    100% 60%,
    100% calc(100% - var(--c) - var(--k)),
    calc(100% - var(--k)) calc(100% - var(--c)),
    calc(100% - var(--w) + var(--k)) calc(100% - var(--c)),
    calc(100% - var(--w)) calc(100% - var(--c) + var(--k)),
    calc(100% - var(--w)) calc(100% - var(--k)),
    calc(100% - var(--w) - var(--k)) 100%,
    var(--k) 100%,
    0 calc(100% - var(--k))
  );
}
.portada__foco {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 60%) var(--my, 55%), rgba(234, 210, 160, .10), transparent 40%);
}
.portada__lineas span {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 164, 106, .35), transparent);
  width: 60%;
  left: -60%;
  animation: barrido 7s var(--curva) infinite;
}
.portada__lineas span:nth-child(1) { top: 38%; }
.portada__lineas span:nth-child(2) { top: 71%; animation-delay: 2.3s; animation-duration: 9s; }
.portada__lineas span:nth-child(3) { top: 84%; animation-delay: 4.6s; }
@keyframes barrido { to { transform: translateX(290%); } }

.portada__nav {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--tenue);
}
.portada__nav > a:not(.btn):hover { color: var(--texto); }
.portada__nav .btn { min-height: 42px; }

.portada__texto {
  position: absolute;
  z-index: 3;
  top: calc(var(--n) + clamp(20px, 5vh, 60px));
  left: clamp(28px, 5.5%, 90px);
  max-width: min(800px, 52%);
}
.portada__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.1vw, 66px);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.portada__titulo .linea { display: block; overflow: hidden; padding-bottom: .04em; white-space: nowrap; }
.portada__titulo .linea > span { display: inline-block; transform: translateY(110%); transition: transform 1.2s var(--curva); }
.portada__titulo em { font-family: var(--serif); font-size: 1.3em; text-transform: none; color: var(--oro-claro); letter-spacing: 0; }
.portada__lema { max-width: 400px; margin: 14px 0 0; color: var(--tenue); font-size: 15px; }

.portada__datos {
  position: absolute;
  z-index: 3;
  top: calc(var(--n) + 30px);
  right: calc(var(--t) + 5%);
  margin: 0;
  display: grid;
  gap: 20px;
}
.portada__datos div { display: grid; }
.portada__datos dt { font-family: var(--display); font-size: clamp(24px, 2.5vw, 40px); line-height: 1; color: #fff; transition: opacity .4s; }
.portada__datos dd { margin: 6px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muy-tenue); }

.portada__escena { position: absolute; inset: 0; z-index: 2; touch-action: pan-y; }
.portada__fantasma {
  position: absolute;
  left: 50%;
  top: 60%;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(80px, 15vw, 260px);
  line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, rgba(236, 232, 225, .17), rgba(236, 232, 225, .02) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(236, 232, 225, .08);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s, transform .9s var(--curva);
}
.portada__fantasma.cambia { opacity: 0; transform: translate(-44%, -50%); }
/* La unidad se estaciona a la derecha, arriba del hueco de la tarjeta: la
   izquierda es del título y de los tres botones. */
.pista {
  position: absolute;
  right: calc(var(--t) + 3%);
  bottom: calc(var(--c) - 10px);
  width: min(46%, 70vh);
  aspect-ratio: 2 / 1;
}
.portada__piso {
  position: absolute;
  left: 40%;
  right: 4%;
  bottom: calc(var(--c) - 22px);
  height: 40px;
  background: radial-gradient(ellipse at 50% 50%, rgba(234, 210, 160, .2), transparent 70%);
}
.portada__piso::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234, 210, 160, .55), transparent);
}

/* El mando: flechas, nombre y "Cotizar viaje" */
.mando {
  position: absolute;
  z-index: 4;
  left: clamp(28px, 5.5%, 90px);
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mando__flecha {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--texto);
  background: rgba(236, 232, 225, .06);
  box-shadow: inset 0 0 0 1px var(--linea);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .3s, color .3s;
}
.mando__flecha:hover { background: var(--marfil); color: var(--tinta); }
.mando__flecha svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mando__modelo { display: grid; gap: 2px; min-width: 190px; padding: 0 8px; }
.mando__cuenta { font-family: var(--display); font-size: 10px; letter-spacing: .16em; color: var(--muy-tenue); }
.mando__cuenta b { font-weight: 400; color: var(--oro); }
.mando__modelo strong { font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.mando__barra { position: relative; height: 1px; margin-top: 6px; background: var(--linea); overflow: hidden; }
.mando__barra i { position: absolute; inset: 0; background: var(--oro); transform: scaleX(0); transform-origin: left; }
.mando__barra i.corre { animation: llenar var(--dur, 7s) linear forwards; }
@keyframes llenar { to { transform: scaleX(1); } }
.mando__cotizar { margin-left: 8px; }

.portada__lengueta {
  position: absolute;
  right: 10px;
  top: calc(10px + (100% - 20px) * .26 + var(--t));
  height: calc((100% - 20px) * .34 - var(--t) * 2);
  width: var(--t);
  display: grid;
  place-items: center;
  z-index: 3;
}
.portada__lengueta span { writing-mode: vertical-rl; font-family: var(--display); font-size: 9px; letter-spacing: .3em; color: rgba(18, 17, 22, .55); white-space: nowrap; }

.portada__tarjeta {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 18px;
  width: calc(var(--w) - 16px);
  height: calc(var(--c) - 16px);
  padding: 8px 8px 8px 22px;
  color: var(--tinta);
}
.portada__tarjeta img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform .8s var(--curva);
}
.portada__tarjeta:hover img { transform: scale(1.05); }
.portada__tarjeta-texto { display: grid; gap: 6px; }
.portada__tarjeta-ante { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(18, 17, 22, .5); }
.portada__tarjeta strong { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; }
.portada__caras { display: flex; }
.portada__caras i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: -7px;
  border: 2px solid var(--marfil);
  border-radius: 50%;
  background: var(--tinta);
  color: var(--oro-claro);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
}
.portada__caras i:nth-child(2) { background: var(--oro-oscuro); color: #fff; }
.portada__caras i:nth-child(3) { background: #3b3a44; }
.portada__caras i:last-child { background: var(--oro); color: var(--tinta); }
.portada__tarjeta-flecha {
  align-self: start;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(18, 17, 22, .2);
  transition: background .3s, color .3s;
}
.portada__tarjeta-flecha svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.portada__tarjeta:hover .portada__tarjeta-flecha { background: var(--tinta); color: var(--marfil); }

/* Entrada de la portada, una vez que se abre el telón */
.portada__texto .antetitulo, .portada__lema, .accesos, .portada__garantias, .portada__datos, .mando, .portada__nav, .portada__tarjeta, .portada__cabeza {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--curva), transform 1s var(--curva);
}
.listo-portada .portada__texto .antetitulo,
.listo-portada .portada__lema,
.listo-portada .accesos,
.listo-portada .portada__garantias,
.listo-portada .portada__datos,
.listo-portada .mando,
.listo-portada .portada__nav,
.listo-portada .portada__tarjeta,
.listo-portada .portada__cabeza { opacity: 1; transform: none; }
.listo-portada .portada__titulo .linea > span { transform: none; }
.listo-portada .portada__titulo .linea:nth-child(2) > span { transition-delay: .12s; }
.listo-portada .portada__lema { transition-delay: .35s; }
.listo-portada .accesos { transition-delay: .45s; }
.listo-portada .portada__garantias { transition-delay: .55s; }
.listo-portada .portada__datos { transition-delay: .6s; }
.listo-portada .mando { transition-delay: .5s; }
.listo-portada .portada__tarjeta { transition-delay: .8s; }

/* ----------------------------------------------------------------- Cinta */
.cinta { overflow: hidden; padding: 26px 0; border-block: 1px solid var(--linea); margin-top: 12px; }
.cinta__pista { display: flex; width: max-content; animation: cinta 40s linear infinite; }
.cinta__pista span {
  display: flex;
  align-items: center;
  gap: 38px;
  padding-right: 38px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tenue);
  white-space: nowrap;
}
.cinta__pista span::after { content: ''; width: 7px; height: 7px; background: var(--oro); transform: rotate(45deg); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ====================================================================
   BIENVENIDOS · la foto "elemento"
   La foto va quieta y a pantalla completa. app.js solo mueve los bloques
   [data-paralaje] del texto (un transform cada uno): no hay escena fija ni
   cajas que cambien de tamaño, que era lo que trababa.
   ==================================================================== */
.bienvenidos {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--negro-2);
}
.bienvenidos__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
}
/* La foto se ve entera a lo ancho: el logo queda a la izquierda, a media
   altura, y el letrero BIENVENIDOS a la derecha. Por eso el velo oscurece
   solo abajo y a la derecha, que es donde va el texto. */
.bienvenidos__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(7, 7, 10, .92), rgba(7, 7, 10, .55) 45%, transparent 75%),
    linear-gradient(0deg, rgba(7, 7, 10, .6), transparent 32%);
}
.bienvenidos__texto {
  position: absolute;
  right: max(var(--gutter), calc((100vw - var(--ancho)) / 2));
  bottom: 9vh;
  width: min(40vw, 480px);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
.bienvenidos__texto [data-paralaje] { will-change: transform; }
.bienvenidos__texto h2, .titulo h2, .contacto h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 50px);
  line-height: 1.12;
  text-transform: uppercase;
}
.bienvenidos__texto h2 em, .titulo h2 em, .contacto h2 em, .modelo__nombre em, .salidas__vacio h3 em {
  font-family: var(--serif);
  font-size: 1.22em;
  text-transform: none;
  color: var(--oro-claro);
}
.bienvenidos__texto p:last-child { color: var(--tenue); margin: 18px 0 0; }

/* ----------------------------------------------------------------- Cifras */
.cifras { padding: clamp(60px, 9vw, 120px) 0; }
.cifras__lista {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(var(--ancho), 100% - var(--gutter) * 2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.cifras__lista li { position: relative; padding: 10px 26px 10px 30px; border-left: 1px solid var(--linea); }
.cifras__lista li::before { content: ''; position: absolute; left: -4px; top: 0; width: 7px; height: 7px; background: var(--oro); transform: rotate(45deg); }
.cifras__valor {
  display: block;
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 66px);
  line-height: 1;
  background: linear-gradient(180deg, #fff, var(--oro-claro) 70%, var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cifras__texto { display: block; margin-top: 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }

/* -------------------------------------------------------------- Secciones */
.seccion { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.titulo { max-width: 720px; margin-bottom: clamp(40px, 6vw, 70px); }
.titulo__pie { color: var(--tenue); margin: 18px 0 0; }

[data-revelar] { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--curva), transform 1.1s var(--curva); }
[data-revelar].visto { opacity: 1; transform: none; }

/* ====================================================================
   FLOTA · un showroom por modelo
   ==================================================================== */
.flota { padding-bottom: 40px; }
.modelo { position: relative; padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 8vw, 110px); overflow: clip; }
.modelo + .modelo { border-top: 1px solid var(--linea); }
.modelo__caja {
  width: min(var(--ancho), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}
.modelo--inverso .modelo__escenario { order: 2; }
.modelo__escenario { position: relative; aspect-ratio: 1.55; }
.modelo__num {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--oro);
}
.modelo__fondo {
  position: absolute;
  left: 50%;
  top: 34%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: clamp(60px, 10vw, 150px);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgba(236, 232, 225, .14), transparent 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(200, 164, 106, .16);
  pointer-events: none;
}
.modelo__luz {
  position: absolute;
  left: 18%;
  right: 18%;
  top: -10%;
  bottom: 18%;
  background: conic-gradient(from 180deg at 50% 0%, transparent 150deg, rgba(234, 210, 160, .10) 170deg, rgba(234, 210, 160, .16) 180deg, rgba(234, 210, 160, .10) 190deg, transparent 210deg);
  pointer-events: none;
}
.modelo__plato { position: absolute; left: 0; right: 0; bottom: 6%; width: 100%; }
.modelo__plato ellipse { fill: none; stroke: rgba(200, 164, 106, .28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.modelo__plato ellipse:nth-child(2) { stroke-dasharray: 2 7; }
.modelo__plato ellipse:nth-child(3) { fill: rgba(200, 164, 106, .07); }
@keyframes girar-trazo { to { stroke-dashoffset: -400; } }
.modelo__pista { position: absolute; left: 6%; right: 6%; bottom: 17%; aspect-ratio: 2 / 1; }

.modelo__etiqueta { margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.modelo__nombre { margin: 8px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; text-transform: uppercase; }
.modelo__modelo { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--tenue); }
.modelo__texto { color: var(--tenue); margin: 16px 0 0; }
.modelo__datos { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0 0; border-block: 1px solid var(--linea); }
.modelo__datos div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 14px 0; }
.modelo__datos div + div { padding-left: 16px; border-left: 1px solid var(--linea); }
.modelo__datos svg { grid-row: span 2; width: 22px; height: 22px; fill: none; stroke: var(--oro); stroke-width: 1.3; }
.modelo__datos dt { font-family: var(--display); font-size: 17px; line-height: 1.2; }
.modelo__datos dd { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muy-tenue); }
.modelo__rasgos { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.modelo__rasgos li {
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--tenue);
  background: rgba(236, 232, 225, .05);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.modelo__botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

/* El álbum de cada modelo: acordeón. La activa se abre; las demás son tiras
   verticales con su número. */
.acordeon {
  width: min(var(--ancho), 100% - var(--gutter) * 2);
  margin: clamp(30px, 5vw, 60px) auto 0;
  display: flex;
  gap: 10px;
  height: clamp(300px, 36vw, 470px);
}
.acordeon__item {
  --ch: 26px;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: var(--negro-2);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  transition: flex-grow .9s var(--curva);
  cursor: pointer;
  text-align: left;
}
.acordeon__item.activo { flex-grow: 5.5; cursor: zoom-in; }
.acordeon__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.4s var(--curva), opacity .6s;
  opacity: .55;
}
.acordeon__item.activo img { transform: scale(1); opacity: 1; }
/* Sin leyenda: solo un velo arriba para que se lea el número. */
.acordeon__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 7, 10, .55), transparent 30%);
}
.acordeon__n {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 11px;
  color: var(--oro-claro);
  transition: left .6s var(--curva), transform .6s var(--curva);
}
.acordeon__item.activo .acordeon__n { left: 22px; transform: none; }
.acordeon--uno { height: clamp(300px, 34vw, 460px); }

/* ====================================================================
   ÁLBUM · rectángulos con aire
   Dos fotos por renglón, de tamaños distintos y a distinta altura. Cada
   una lleva detrás un marco dorado desplazado, sin leyenda. La clase
   a1…a6 (puesta por app.js) decide columna, proporción y desfase.
   ==================================================================== */
.album__rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.4vw, 32px);
  row-gap: clamp(60px, 8vw, 120px);
  align-items: start;
}
.pieza { position: relative; margin: 0; }
.pieza__mueve { position: relative; will-change: transform; }
.pieza__marco {
  position: relative;
  aspect-ratio: var(--prop, 4 / 3);
  overflow: hidden;
  background: var(--negro-2);
}
/* El marco dorado va detrás y corrido: da profundidad sin tapar la foto. */
.pieza__mueve::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 18px;
  right: -18px;
  bottom: -18px;
  border: 1px solid rgba(200, 164, 106, .38);
  pointer-events: none;
  transition: transform .9s var(--curva);
}
.pieza:nth-child(even) .pieza__mueve::before { left: -18px; right: 18px; }
.pieza:hover .pieza__mueve::before { transform: translate(-6px, -6px); }
.pieza:nth-child(even):hover .pieza__mueve::before { transform: translate(6px, -6px); }
.pieza__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.6s var(--curva), filter .8s;
  filter: saturate(.92);
}
.pieza:hover .pieza__marco img { transform: scale(1.1); filter: saturate(1.05); }
.pieza__boton { position: absolute; inset: 0; z-index: 2; cursor: zoom-in; }
.pieza[data-revelar] { transform: translateY(60px); }
.pieza[data-revelar].visto { transform: none; }

.a1 { grid-column: 1 / 8;  --prop: 4 / 3; }
.a2 { grid-column: 9 / 13; --prop: 3 / 4; margin-top: 22%; }
.a3 { grid-column: 2 / 6;  --prop: 3 / 4; }
.a4 { grid-column: 7 / 13; --prop: 16 / 11; margin-top: 16%; }
.a5 { grid-column: 1 / 7;  --prop: 16 / 11; margin-top: 4%; }
.a6 { grid-column: 8 / 12; --prop: 4 / 5; margin-top: 20%; }
.album__mas { display: flex; justify-content: center; margin-top: clamp(50px, 7vw, 90px); }

/* ------------------------------------------------------------------ Pasos */
.pasos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pasos__lista li { position: relative; padding-top: 110px; }
.pasos__lista li::after {
  content: '';
  position: absolute;
  top: 44px;
  left: 96px;
  right: -10px;
  height: 1px;
  background: linear-gradient(90deg, var(--oro), transparent);
  opacity: .5;
}
.pasos__lista li:last-child::after { display: none; }
.paso__hex { position: absolute; top: 0; left: 0; width: 88px; height: 88px; }
.paso__hex polygon { fill: none; stroke: var(--oro); stroke-width: 1; vector-effect: non-scaling-stroke; }
.paso__hex text { fill: var(--texto); font-family: var(--display); font-size: 20px; }
.pasos__lista h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.pasos__lista p { margin: 10px 0 0; color: var(--tenue); font-size: 15px; }

/* ---------------------------------------------------------------- Reservar */

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; margin-bottom: 8px; }
.campo { display: grid; gap: 8px; align-content: start; }
.campo--ancho { grid-column: 1 / -1; }
.campo > span, .campo__titulo { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muy-tenue); }
.campo__titulo { margin: 26px 0 12px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  font: inherit;
  font-size: 16px;
  color: var(--texto);
  background: rgba(236, 232, 225, .04);
  border: 0;
  box-shadow: inset 0 -1px 0 var(--linea), inset 0 0 0 1px rgba(236, 232, 225, .06);
  border-radius: 0;
  transition: box-shadow .3s, background .3s;
  appearance: none;
}
.campo select {
  background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%), linear-gradient(135deg, var(--oro) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.campo select option { background: var(--negro-2); color: var(--texto); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; background: rgba(236, 232, 225, .07); box-shadow: inset 0 -1px 0 var(--oro), inset 0 0 0 1px rgba(200, 164, 106, .3); }
.campo textarea { resize: vertical; min-height: 70px; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(236, 232, 225, .28); }
.campo.error input { box-shadow: inset 0 -1px 0 var(--rojo); }

.segmento { display: grid; grid-template-columns: 1fr 1fr; min-height: 50px; box-shadow: inset 0 0 0 1px var(--linea); }
.segmento button { font-size: 13.5px; color: var(--tenue); transition: background .3s, color .3s; }
.segmento button.activo { background: var(--marfil); color: var(--tinta); }

.contador { display: grid; grid-template-columns: 50px 1fr 50px; min-height: 50px; box-shadow: inset 0 0 0 1px var(--linea); max-width: 240px; }
.contador button { font-size: 20px; color: var(--oro-claro); transition: background .3s; }
.contador button:hover { background: rgba(236, 232, 225, .06); }
.contador output { display: grid; place-items: center; font-family: var(--display); font-size: 17px; }

/* Los lugares: buscador con sugerencias y su mapa (Leaflet, en assets/vendor) */

/* La cita del pago en efectivo */

/* El calendario: es el primer paso, así que va grande y claro */

.visor svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dia {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.15;
  font-family: var(--display);
  font-size: 15px;
  color: var(--texto);
  background: rgba(236, 232, 225, .035);
  transition: background .25s, color .25s, transform .3s var(--curva);
}
.dia::after {
  content: '';
  position: absolute;
  bottom: 18%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--verde);
  opacity: .9;
}
.dia--pocas::after { background: var(--oro); }
.dia:hover:not(:disabled) { background: rgba(200, 164, 106, .18); }
.dia:disabled { color: rgba(236, 232, 225, .18); background: none; cursor: default; }
.dia:disabled::after { display: none; }
.dia--lleno:disabled { color: rgba(224, 104, 95, .55); text-decoration: line-through; }
.dia--lleno:disabled::after { display: block; background: var(--rojo); opacity: .6; }
.dia.hoy { box-shadow: inset 0 -2px 0 var(--led); }
.dia.activo {
  background: var(--oro);
  color: var(--tinta);
  transform: scale(1.06);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.dia.activo::after { background: var(--tinta); }

.aviso { margin: 16px 0 0; padding: 12px 16px; font-size: 14px; color: #f3c9c4; background: rgba(224, 104, 95, .1); box-shadow: inset 2px 0 0 var(--rojo); }
.aviso--info { color: var(--tenue); background: rgba(138, 150, 255, .08); box-shadow: inset 2px 0 0 var(--led); margin: 0 0 18px; }

.aviso b { color: var(--texto); font-weight: 600; }
.enlace { color: var(--oro-claro); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }

/* El boleto */

@keyframes pulso { 40% { color: var(--oro-oscuro); } }

/* ---------------------------------------------------------------- Contacto */
.contacto { position: relative; padding: clamp(110px, 16vw, 200px) 0; overflow: hidden; text-align: center; }
.contacto__fondo { position: absolute; inset: 0; z-index: -1; }
.contacto__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.contacto__fondo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(7, 7, 10, .5), var(--negro) 75%); }
.contacto__caja { position: relative; display: grid; justify-items: center; }
.contacto__anillo { position: absolute; top: 50%; left: 50%; width: min(620px, 92vw); height: min(620px, 92vw); transform: translate(-50%, -50%); color: var(--oro); opacity: .5; animation: girar-centro 90s linear infinite; }
@keyframes girar-centro { to { transform: translate(-50%, -50%) rotate(360deg); } }
.contacto__anillo circle { opacity: .5; }
.contacto__botones { display: flex; gap: 10px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.contacto__botones b { font-weight: 400; color: var(--oro-claro); }

/* -------------------------------------------------------------------- Pie */
.pie { padding: 40px 0 50px; border-top: 1px solid var(--linea); }
.pie__caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; color: var(--muy-tenue); font-size: 13px; }
.pie__caja p { margin: 0; }
.pie__legal { flex-basis: 100%; font-size: 12px; }
.pie__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ Visor */
.visor { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(5, 5, 7, .95); animation: aparece .4s var(--curva); }
.visor[hidden] { display: none; }
@keyframes aparece { from { opacity: 0; } }
.visor__figura { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: min(1100px, 92vw); }
.visor__figura img { max-height: 80vh; width: auto; animation: foto-entra .6s var(--curva); }
@keyframes foto-entra { from { opacity: 0; transform: translateX(-50%) scale(.96); } }
.visor__figura img { animation-name: foto-visor; }
@keyframes foto-visor { from { opacity: 0; transform: scale(.96); } }
.visor__figura figcaption:empty { display: none; }
.visor__figura figcaption { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--tenue); text-align: center; }
.visor__cerrar, .visor__flecha {
  position: absolute;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--linea);
  background: rgba(7, 7, 10, .6);
}
.visor__cerrar { top: 16px; right: 16px; }
.visor__flecha--izq { left: 16px; top: 50%; transform: translateY(-50%); }
.visor__flecha--der { right: 16px; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------ Confirmación */

/* ---------------------------------------------------------------- Flotante */
.flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--tinta);
  background: var(--oro);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  transform: scale(0);
  transition: transform .6s var(--curva), background .3s;
}
.flotante svg { width: 26px; fill: currentColor; }
.flotante:hover { background: var(--oro-claro); }
.flotante--visible { transform: scale(1); }

/* ====================================================================
   PORTADA · las tres puertas
   ==================================================================== */
.accesos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.accesos .btn { min-height: 48px; padding: 0 22px; }
.portada__garantias { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; font-size: 12.5px; color: var(--muy-tenue); }
.portada__garantias li { display: flex; align-items: center; gap: 8px; }
.portada__garantias li::before { content: ''; width: 9px; height: 5px; border-left: 1.5px solid var(--oro); border-bottom: 1.5px solid var(--oro); transform: translateY(-2px) rotate(-45deg); }

/* ====================================================================
   CONOCE NUESTROS VIAJES
   Una foto grande con dos encimadas, cada una con su marco recortado.
   ==================================================================== */

/* ====================================================================
   NUESTROS VIAJES · salidas en grupo
   ==================================================================== */
.salidas__lista { display: grid; gap: clamp(26px, 4vw, 44px); }
.salida {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(135deg, rgba(236, 232, 225, .045), rgba(236, 232, 225, .01));
  box-shadow: inset 0 0 0 1px var(--linea);
  clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}
.salida__fotos { position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; aspect-ratio: 5 / 4; }
.salida__foto { position: relative; overflow: hidden; background: var(--negro-2); cursor: zoom-in; }
.salida__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); }
.salida__foto:hover img { transform: scale(1.07); }
.salida__foto--1 { grid-row: span 2; clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); }
.salida__foto--3 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.salida__fotos:has(.salida__foto--2):not(:has(.salida__foto--3)) .salida__foto--2 { grid-row: span 2; }
.salida__fotos:not(:has(.salida__foto--2)) .salida__foto--1 { grid-column: span 2; }
.salida__fecha {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 70px;
  padding: 10px 0 8px;
  background: var(--marfil);
  color: var(--tinta);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  pointer-events: none;
}
.salida__fecha b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; }
.salida__fecha small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.salida__sello {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 14px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--oro-claro);
  pointer-events: none;
  animation: latido 2.4s ease-in-out infinite;
}
.salida__sello--fin { background: var(--negro-3); color: var(--tenue); animation: none; }
@keyframes latido { 50% { box-shadow: 0 0 0 6px rgba(234, 210, 160, .18); } }
.salida__cuando { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.salida__pulso { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none; }
.salida__pulso::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--verde); animation: onda 2s ease-out infinite; }
@keyframes onda { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.salida--agotada .salida__pulso { background: var(--muy-tenue); }
.salida--agotada .salida__pulso::after { display: none; }
.salida__titulo { margin: 12px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; text-transform: uppercase; }
.salida__destino { margin: 8px 0 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--tenue); }
.salida__texto { margin: 14px 0 0; color: var(--tenue); font-size: 15px; }
.salida__incluye { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.salida__incluye li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--tenue);
  background: rgba(236, 232, 225, .05);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.salida__incluye li::before { content: ''; width: 8px; height: 4px; border-left: 1.5px solid var(--oro); border-bottom: 1.5px solid var(--oro); transform: translateY(-1px) rotate(-45deg); }
.salida__lugares { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linea); }
.salida__lugares p { margin: 10px 0 0; font-size: 14px; color: var(--tenue); }
.salida__lugares b { color: var(--oro-claro); font-weight: 600; }
/* Un cuadrito por asiento: los vendidos se apagan, los libres brillan. */
.asientos { display: flex; flex-wrap: wrap; gap: 5px; }
.asientos i {
  width: 13px;
  height: 15px;
  border-radius: 4px 4px 2px 2px;
  box-shadow: inset 0 0 0 1.5px var(--oro-claro);
  background: rgba(234, 210, 160, .16);
}
.asientos i.ocupado { box-shadow: none; background: rgba(236, 232, 225, .12); }
.salida[data-revelar] .asientos i { transition: opacity .5s calc(var(--i) * 18ms), transform .5s calc(var(--i) * 18ms) var(--curva); }
.salida[data-revelar]:not(.visto) .asientos i { opacity: 0; transform: translateY(6px); }
.salida__compra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.salida__precio { display: grid; margin-right: auto; }
.salida__precio small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muy-tenue); }
.salida__precio strong { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; color: #fff; }
.contador--chico { grid-template-columns: 44px 44px 44px; min-height: 48px; }

/* Elegir asientos: el plano de la unidad en una ventana. El nombre del viaje
   arriba y el botón de apartar abajo se quedan quietos; solo se desliza el
   plano. Los estilos del plano son los mismos del panel (admin.css). */
.plano { display: grid; gap: 8px; width: min(300px, 100%); margin: 0 auto; padding: 14px 14px 16px; border-radius: 28px 28px 12px 12px; background: rgba(236, 232, 225, .04); box-shadow: inset 0 0 0 1px var(--linea); }
.plano__frente { display: flex; justify-content: space-between; margin-bottom: 4px; padding: 0 4px 10px; border-bottom: 1px dashed var(--linea); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muy-tenue); }
.plano__fila { display: grid; grid-template-columns: 1fr 1fr .7fr 1fr 1fr; gap: 8px; }
.plano__fila--fondo { grid-template-columns: repeat(4, 1fr); margin-top: 4px; }
.asiento { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 9px 9px 5px 5px; font-family: var(--display); font-size: 12px; color: var(--oro-claro); background: rgba(234, 210, 160, .12); box-shadow: inset 0 0 0 1.5px var(--oro-claro); transition: background .2s, color .2s, transform .2s; }
button.asiento:not(.asiento--elegido):not(.asiento--ocupado):hover { background: rgba(234, 210, 160, .26); }
button.asiento:not(:disabled):active { transform: scale(.93); }
.asiento--hueco { visibility: hidden; }
.plano-leyenda { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 0; margin: 16px 0 0; font-size: 12.5px; color: var(--tenue); }
.plano-leyenda li { display: flex; align-items: center; gap: 8px; }
.plano-leyenda .asiento { width: 18px; border-radius: 5px 5px 3px 3px; }
.asiento.asiento--elegido { background: var(--oro-claro); color: var(--tinta); }
.asiento.asiento--ocupado { box-shadow: none; background: rgba(236, 232, 225, .1); color: var(--muy-tenue); text-decoration: line-through; cursor: not-allowed; transform: none; }
.ficha.elegir { overflow: hidden; }
.elegir__caja { position: relative; display: flex; flex-direction: column; width: min(440px, 100%); max-height: calc(100svh - 32px); background: linear-gradient(180deg, #121218, #0a0a0e); box-shadow: inset 0 0 0 1px var(--linea); animation: ficha-entra .5s var(--curva); }
.elegir__cabeza { flex: none; padding: 22px 70px 16px 22px; border-bottom: 1px solid var(--linea); }
.elegir__cabeza .antetitulo { margin: 0; }
.elegir__cabeza h3 { margin: 10px 0 0; font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.2; text-transform: uppercase; }
.elegir__cabeza p:last-child { margin: 6px 0 0; font-size: 13.5px; color: var(--tenue); }
.elegir__cuerpo { flex: 1; min-height: 0; padding: 20px 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.elegir__pie { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: #0a0a0e; }
.elegir__resumen { display: grid; min-width: 0; margin-right: auto; }
.elegir__resumen small { font-size: 13px; color: var(--tenue); }
.elegir__resumen strong { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.2; color: #fff; }
.elegir__pie .btn { flex: none; padding-inline: 20px; }
.elegir__pie .btn[aria-disabled='true'] { opacity: .45; pointer-events: none; }
@media (max-width: 560px) {
  .ficha.elegir { padding: 0; place-items: stretch; }
  .elegir__caja { width: 100%; height: 100%; max-height: 100svh; }
}

.salidas__vacio {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  padding: clamp(24px, 4vw, 50px);
  box-shadow: inset 0 0 0 1px var(--linea);
  background: radial-gradient(ellipse at 20% 50%, rgba(200, 164, 106, .10), transparent 60%);
}
.salidas__abanico { position: relative; height: clamp(260px, 30vw, 360px); }
.salidas__abanico img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 6px solid var(--marfil);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  transform: translate(-50%, -50%) rotate(var(--r)) translateX(var(--x));
  transition: transform .9s var(--curva);
}
.salidas__abanico img:nth-child(1) { --r: -9deg; --x: -58%; }
.salidas__abanico img:nth-child(2) { --r: 7deg; --x: 58%; }
.salidas__abanico img:nth-child(3) { --r: 0deg; --x: 0%; z-index: 1; }
.salidas__vacio:hover .salidas__abanico img:nth-child(1) { --r: -13deg; --x: -70%; }
.salidas__vacio:hover .salidas__abanico img:nth-child(2) { --r: 11deg; --x: 70%; }
.salidas__vacio h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; text-transform: uppercase; }
.salidas__vacio p { color: var(--tenue); margin: 16px 0 0; }
.salidas__vacio-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Ofertas por WhatsApp: el texto a un lado y los dos campos al otro. */
.ofertas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(26px, 4vw, 44px);
  padding: clamp(22px, 3.4vw, 44px);
  scroll-margin-top: 110px;
  box-shadow: inset 0 0 0 1px var(--linea);
  background: radial-gradient(ellipse at 85% 50%, rgba(200, 164, 106, .10), transparent 60%);
}
.ofertas h3 { margin: 14px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.15; text-transform: uppercase; }
.ofertas h3 em { font-family: var(--serif); font-size: 1.22em; text-transform: none; color: var(--oro-claro); }
.ofertas__texto > p:last-child { margin: 14px 0 0; color: var(--tenue); }
.ofertas__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ofertas__campos .btn, .ofertas__nota { grid-column: 1 / -1; }
.ofertas__nota { margin: 0; font-size: 13px; color: var(--muy-tenue); }
.ofertas__nota.error { color: #f3b3ad; }
.ofertas__nota a { color: var(--oro-claro); }
.ofertas__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ofertas__listo strong { display: block; font-family: var(--display); font-weight: 400; font-size: 17px; text-transform: uppercase; color: var(--oro-claro); }
.ofertas__listo p { margin: 10px 0 0; color: var(--tenue); }
.ofertas__listo b { color: var(--texto); }
@media (max-width: 820px) {
  .ofertas { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ofertas__campos { grid-template-columns: 1fr; }
}

/* ====================================================================
   IDEAS DE VIAJE
   Tarjetas altas; la primera va al doble. Al pasar el ratón la foto
   cambia a la segunda y aparece "Ver viaje".
   ==================================================================== */
.ideas__filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: -20px 0 clamp(26px, 4vw, 40px); }
.ideas__filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  font-size: 13.5px;
  color: var(--tenue);
  box-shadow: inset 0 0 0 1px var(--linea);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .3s, color .3s;
}
.ideas__filtro small { font-size: 11px; color: var(--muy-tenue); }
.ideas__filtro:hover { color: var(--texto); background: rgba(236, 232, 225, .05); }
.ideas__filtro.activo { background: var(--marfil); color: var(--tinta); box-shadow: none; }
.ideas__filtro.activo small { color: rgba(18, 17, 22, .55); }

.ideas__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(320px, 32vw, 440px); gap: clamp(12px, 1.6vw, 20px); grid-auto-flow: dense; }
.idea {
  --ch: 24px;
  position: relative;
  display: block;
  overflow: hidden;
  text-align: left;
  background: var(--negro-2);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
.idea--grande { grid-column: span 2; grid-row: span 2; --ch: 34px; }
@keyframes idea-entra { from { opacity: 0; transform: translateY(24px); } }
.idea__fotos, .idea__foto { position: absolute; inset: 0; }
/* Sin escalar en reposo: agrandar la foto la vuelve borrosa. */
.idea__foto { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--curva), opacity .8s var(--curva); }
.idea__foto--2 { opacity: 0; }
.idea__foto--2:not([src]) { display: none; }
.idea:hover .idea__foto { transform: scale(1.04); }
.idea:hover .idea__foto--2 { opacity: 1; }
.idea::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 7, 10, .92) 0%, rgba(7, 7, 10, .45) 32%, transparent 58%), linear-gradient(180deg, rgba(7, 7, 10, .35), transparent 22%);
  pointer-events: none;
}
.idea__sello, .idea__tiempo {
  position: absolute;
  z-index: 1;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.idea__sello { left: 30px; font-family: var(--display); font-size: 9.5px; letter-spacing: .18em; color: var(--tinta); background: var(--oro-claro); }
.idea--grande .idea__sello { left: 40px; }
.idea__tiempo { right: 14px; color: #fff; background: rgba(7, 7, 10, .72); }
.idea__tiempo svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.idea__cuerpo { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; display: grid; }
.idea--grande .idea__cuerpo { left: 36px; right: 36px; bottom: 32px; }
.idea__region { font-family: var(--display); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-claro); }
.idea__nombre { margin-top: 6px; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.15; text-transform: uppercase; color: #fff; }
.idea--grande .idea__nombre { font-size: clamp(30px, 3.6vw, 52px); }
.idea__gancho { margin-top: 6px; font-family: var(--serif); font-size: 18px; line-height: 1.25; color: rgba(255, 255, 255, .82); }
.idea--grande .idea__gancho { font-size: clamp(20px, 2vw, 28px); max-width: 560px; }
.idea__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 13px; color: rgba(255, 255, 255, .75); }
.idea__ver { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #fff; white-space: nowrap; transition: gap .5s var(--curva); }
.idea__ver svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.idea:hover .idea__ver { gap: 12px; color: var(--oro-claro); }

/* ---- La ficha */
.ficha { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(5, 5, 7, .9); animation: aparece .4s var(--curva); overflow-y: auto; }
.ficha[hidden] { display: none; }
.ficha__caja {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: min(1180px, 100%);
  max-height: calc(100svh - 32px);
  overflow: auto;
  background: linear-gradient(180deg, #121218, #0a0a0e);
  clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
  animation: ficha-entra .7s var(--curva);
  overscroll-behavior: contain;
}
@keyframes ficha-entra { from { opacity: 0; transform: translateY(30px) scale(.98); } }
.ficha__cerrar { position: absolute; z-index: 3; top: 14px; right: 14px; width: 46px; height: 46px; display: grid; place-items: center; background: rgba(7, 7, 10, .7); box-shadow: inset 0 0 0 1px var(--linea); }
.ficha__cerrar svg, .visor__cerrar svg, .visor__flecha svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ficha__galeria { position: sticky; top: 0; display: grid; grid-template-rows: 1fr auto; gap: 8px; padding: 12px; min-height: min(640px, calc(100svh - 32px)); max-height: calc(100svh - 32px); }
.ficha__grande { position: relative; overflow: hidden; cursor: zoom-in; min-height: 0; }
.ficha__grande img { width: 100%; height: 100%; object-fit: cover; animation: foto-visor .7s var(--curva); }
.ficha__grande span { position: absolute; left: 16px; bottom: 14px; font-family: var(--serif); font-style: italic; font-size: 18px; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.ficha__miniaturas { display: flex; gap: 8px; }
.ficha__miniaturas button { flex: 1; height: 74px; overflow: hidden; opacity: .5; transition: opacity .3s; box-shadow: inset 0 0 0 1px transparent; }
.ficha__miniaturas button img { width: 100%; height: 100%; object-fit: cover; }
.ficha__miniaturas button.activo, .ficha__miniaturas button:hover { opacity: 1; }
.ficha__miniaturas button.activo { outline: 1px solid var(--oro); outline-offset: -1px; }
.ficha__info { padding: clamp(28px, 4vw, 50px) clamp(24px, 4vw, 48px) clamp(28px, 4vw, 44px); }
.ficha__info h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; text-transform: uppercase; }
.ficha__gancho { margin: 8px 0 0; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--oro-claro); }
.ficha__texto { margin: 16px 0 0; color: var(--tenue); }
.ficha__datos { display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0 0; border-block: 1px solid var(--linea); }
.ficha__datos div { padding: 12px 12px 12px 0; }
.ficha__datos div + div { padding-left: 14px; border-left: 1px solid var(--linea); }
.ficha__datos dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muy-tenue); }
.ficha__datos dd { margin: 4px 0 0; font-size: 14px; line-height: 1.35; }
.ficha__imperdibles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.ficha__imperdibles li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.4; }
.ficha__imperdibles li::before { content: ''; position: absolute; left: 2px; top: .35em; width: 9px; height: 5px; border-left: 1.5px solid var(--oro); border-bottom: 1.5px solid var(--oro); transform: rotate(-45deg); }
.ficha__tip { margin: 22px 0 0; padding: 14px 16px; font-size: 14px; color: var(--tenue); background: rgba(138, 150, 255, .07); box-shadow: inset 2px 0 0 var(--led); }
.ficha__tip b { display: block; margin-bottom: 2px; font-family: var(--display); font-weight: 400; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--led); }
.ficha__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---- viajes.html: la cabecera de la página aparte */
.viajes-cabeza { padding: clamp(120px, 14vw, 170px) 0 0; }
.viajes-cabeza__volver { display: inline-block; margin-bottom: 26px; font-size: 13px; color: var(--muy-tenue); }
.viajes-cabeza__volver:hover { color: var(--texto); }
.viajes-cabeza h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 5vw, 70px); line-height: 1.08; text-transform: uppercase; }
.viajes-cabeza h1 em { font-family: var(--serif); font-size: 1.22em; text-transform: none; color: var(--oro-claro); }
.viajes-cabeza__texto { max-width: 560px; margin: 18px 0 0; color: var(--tenue); }
.viajes-cabeza__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pagina-viajes .salidas { padding-top: clamp(60px, 8vw, 100px); }

/* Boleto: el precio por persona */

/* ====================================================================
   PANTALLAS MEDIANAS
   ==================================================================== */
@media (max-width: 1180px) {
  .portada__marco { --w: 360px; --c: 160px; }
  .portada__tarjeta { grid-template-columns: 110px 1fr auto; }
  .portada__tarjeta img { width: 110px; height: 110px; }
  .pista { width: min(48%, 80vh); }
  .mando__modelo { min-width: 150px; }
}

/* ====================================================================
   CELULAR Y TABLETA
   ==================================================================== */
@media (max-width: 900px) {
  .barra { gap: 12px; padding-left: 18px; clip-path: none; }
  .barra__nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 10px 24px 20px;
    background: rgba(10, 10, 14, .97);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, transform .45s var(--curva), visibility .35s;
  }
  .barra__nav a { padding: 14px 0; font-size: 15px; border-bottom: 1px solid var(--linea); }
  .barra__nav.abierto { opacity: 1; transform: none; visibility: visible; }
  .barra__menu { display: block; margin-left: auto; }
  .barra__cta { display: none; }

  .portada { padding: 8px; }
  .portada__marco { --n: 60px; --k: 20px; min-height: 0; border-radius: 16px; display: flex; flex-direction: column; padding: 0 8px 8px; }
  .portada__cabeza { position: relative; height: var(--n); padding: 0 12px; justify-content: space-between; width: 100%; }
  .portada__panel {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    padding: 30px 20px 24px;
    clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  }
  /* En celular los tres botones de la portada ya hacen de menú. */
  .portada__nav { display: none; }
  .portada__texto { position: static; order: 1; max-width: none; }
  .portada__titulo .linea { white-space: normal; }
  .portada__titulo { font-size: clamp(22px, 6.8vw, 44px); }
  .portada__escena { position: relative; inset: auto; order: 2; height: 60vw; max-height: 380px; margin: 10px -20px 0; }
  .pista { left: 6%; right: auto; width: 88%; bottom: 14%; }
  .portada__piso { left: 4%; right: 4%; bottom: 10%; }
  .portada__fantasma { font-size: 22vw; top: 44%; }
  .portada__datos { position: static; order: 3; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
  .mando { position: static; order: 4; margin-top: 22px; flex-wrap: wrap; }
  .mando__modelo { flex: 1; min-width: 0; }
  .mando__cotizar { margin: 6px 0 0; width: 100%; }
  .portada__lengueta { display: none; }
  .portada__tarjeta { position: relative; right: auto; bottom: auto; width: auto; height: auto; margin-top: 8px; padding: 14px 10px 6px; grid-template-columns: 90px 1fr auto; }
  .portada__tarjeta img { width: 90px; height: 90px; }
  .portada__tarjeta strong { font-size: 20px; }

  /* En celular la foto a lo alto se recorta de lado: se ancla a la izquierda,
     donde está el logo, y el texto va abajo, sobre el escalón. */
  .bienvenidos__foto { object-position: 6% 50%; }
  .bienvenidos__velo { background: linear-gradient(0deg, rgba(7, 7, 10, .95) 8%, rgba(7, 7, 10, .6) 34%, transparent 55%); }
  .bienvenidos__texto { left: var(--gutter); right: var(--gutter); bottom: 8vh; width: auto; }
  .bienvenidos__texto h2 { font-size: clamp(22px, 6.4vw, 30px); }
  .bienvenidos__texto p:last-child { font-size: 14px; margin-top: 10px; }

  .cifras__lista { grid-template-columns: 1fr 1fr; row-gap: 40px; }

  .modelo__caja { grid-template-columns: 1fr; }
  .modelo--inverso .modelo__escenario { order: 0; }
  .modelo__fondo { font-size: 17vw; }
  .modelo__datos { grid-template-columns: 1fr 1fr 1fr; }
  .modelo__datos div { grid-template-columns: 1fr; }
  .modelo__datos svg { grid-row: auto; margin-bottom: 6px; }
  .modelo__datos div + div { padding-left: 12px; }
  .modelo__datos dt { font-size: 14px; }
  .acordeon {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .acordeon::-webkit-scrollbar { display: none; }
  .acordeon__item, .acordeon__item.activo { flex: 0 0 74vw; height: 96vw; max-height: 460px; scroll-snap-align: center; cursor: zoom-in; }
  .acordeon__item img { transform: none; opacity: 1; }
  .acordeon__item .acordeon__n { left: 22px; transform: none; }

  .album__rejilla { grid-template-columns: repeat(6, 1fr); row-gap: 56px; column-gap: 0; }
  .pieza:nth-child(odd) { grid-column: 1 / 6; margin-top: 0; }
  .pieza:nth-child(even) { grid-column: 2 / 7; margin-top: 0; }
  .pieza__mueve::before { top: 12px; left: 12px; right: -12px; bottom: -12px; }
  .pieza:nth-child(even) .pieza__mueve::before { left: -12px; right: 12px; }

  .pasos__lista { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .pasos__lista li::after { display: none; }

  .accesos { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; }
  .accesos__cotizar { grid-column: span 2; }
  .accesos .btn { padding: 0 10px; }
  .portada__garantias { gap: 6px 14px; font-size: 12px; }

  .salida { grid-template-columns: 1fr; clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
  .salidas__vacio { grid-template-columns: 1fr; }
  .salidas__abanico { height: 64vw; max-height: 340px; }

  .ideas__filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .ideas__filtros::-webkit-scrollbar { display: none; }
  .ideas__filtro { flex: none; }
  .ideas__rejilla { grid-template-columns: 1fr 1fr; grid-auto-rows: min(74vw, 400px); gap: 10px; }
  .idea { --ch: 16px; }
  .idea--grande { grid-row: span 1; --ch: 22px; }
  .idea:not(.idea--grande) .idea__sello { display: none; }
  .idea:not(.idea--grande) .idea__gancho { display: none; }
  .idea__tiempo { top: 10px; right: 10px; padding: 5px 9px; font-size: 10px; }
  .idea__cuerpo { left: 14px; right: 14px; bottom: 14px; }
  .idea--grande .idea__cuerpo { left: 22px; right: 22px; bottom: 20px; }
  .idea--grande .idea__sello { left: 24px; }
  .idea__nombre { font-size: 15px; }
  .idea--grande .idea__nombre { font-size: clamp(24px, 7vw, 34px); }
  .idea__pie { margin-top: 8px; padding-top: 8px; font-size: 12px; }

  .ficha { padding: 0; place-items: start stretch; }
  .ficha__caja { grid-template-columns: 1fr; max-height: none; min-height: 100svh; overflow: visible; clip-path: none; }
  .ficha__galeria { position: relative; min-height: 0; height: 64svh; max-height: none; padding: 0 0 8px; }
  .ficha__miniaturas { padding: 0 8px; }
  .ficha__miniaturas button { height: 58px; }
  .ficha__datos { grid-template-columns: 1fr 1fr; }
  .ficha__datos div:last-child { grid-column: span 2; padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
  .ficha__imperdibles { grid-template-columns: 1fr; }
  .ficha__botones { position: sticky; bottom: 0; margin: 22px -24px -28px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, #0a0a0e 70%, rgba(10, 10, 14, 0)); }
  .ficha__botones .btn { flex: 1; padding: 0 12px; }
}

@media (max-width: 560px) {
  .campos { grid-template-columns: 1fr; }
  .pasos__lista { grid-template-columns: 1fr; }
  .dia { font-size: 13px; aspect-ratio: 1; }
  .portada__datos dt { font-size: 22px; }
  .mando__flecha { width: 44px; height: 44px; }
  .visor__flecha { top: auto; bottom: 16px; transform: none; }
  .accesos .btn { font-size: 10px; letter-spacing: .12em; }
  .salida__compra .salida__apartar { width: 100%; }
  .salida__fotos { aspect-ratio: 1 / .9; }
}

/* ====================================================================
   PIEZAS CHICAS que usan las secciones nuevas
   ==================================================================== */
.btn--chico { min-height: 42px; padding: 0 18px; font-size: 10px; --chaflan: 9px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto);
  background: rgba(7, 7, 10, .55);
  box-shadow: inset 0 0 0 1px rgba(236, 232, 225, .18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.chip--oro { color: var(--tinta); background: var(--oro-claro); box-shadow: none; }
.chip--vivo { color: #d8f5e6; box-shadow: inset 0 0 0 1px rgba(127, 209, 168, .45); }
.pulso { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex: none; }
.pulso::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--verde); animation: onda 2s ease-out infinite; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-claro); }
.enlace-flecha svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--curva); }
.enlace-flecha:hover svg { transform: translateX(5px); }

/* Flechas de los carruseles */
.flechas { display: flex; gap: 8px; }
.flechas__b { width: 50px; height: 50px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--linea); transition: background .3s, opacity .3s; }
.flechas__b:hover:not(:disabled) { background: rgba(236, 232, 225, .08); }
.flechas__b:disabled { opacity: .25; cursor: default; }
.flechas__b svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Carrusel: scroll nativo con imán. Las tarjetas empiezan alineadas con el
   contenedor y la pista se sale hasta la orilla de la pantalla. */
.carrusel {
  --borde: max(var(--gutter), calc((100vw - var(--ancho)) / 2));
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--borde);
  padding: 6px var(--borde) 18px;
  scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { flex: none; scroll-snap-align: start; }
.carrusel:focus-visible { outline-offset: -3px; }

/* ====================================================================
   NUESTROS VIAJES · el carrusel
   ==================================================================== */
.viajes-c { padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 6vw, 70px); }
.viajes-c__cabeza, .temporadas__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.viajes-c__cabeza .titulo__pie { max-width: 560px; }
.viajes-c__cabeza h2, .club__texto h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 50px);
  line-height: 1.12;
  text-transform: uppercase;
}
.viajes-c__cabeza h2 em, .club__texto h2 em, .tv__cabeza h2 em { font-family: var(--serif); font-size: 1.22em; text-transform: none; color: var(--oro-claro); }
.viajes-c__pie { margin-top: 18px; }

.vc {
  --ch: 18px;
  position: relative;
  width: min(320px, 78vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #121218, #0b0b0f);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  transition: transform .6s var(--curva);
}
.vc:hover { transform: translateY(-6px); }
.vc__foto { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--negro-3); }
.vc__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); }
.vc:hover .vc__foto img { transform: scale(1.05); }
.vc__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 11, 15, .85), transparent 45%); }
.vc__fecha {
  position: absolute; z-index: 1; left: 14px; top: 14px;
  display: grid; justify-items: center; min-width: 56px; padding: 8px 6px 7px;
  background: var(--marfil); color: var(--tinta);
}
.vc__fecha b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; }
.vc__fecha small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.vc__sello {
  position: absolute; z-index: 1; right: 12px; top: 14px;
  padding: 6px 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta); background: var(--oro-claro);
}
.vc__sello--pocos { background: #f0b45f; animation: latido 2.4s ease-in-out infinite; }
.vc__sello--fin { background: var(--marfil-2); }
.vc__temp, .vc__camino {
  position: absolute; z-index: 1; left: 14px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-claro);
}
.vc__camino svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.vc__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.vc__cuando { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 12.5px; color: #bfe9d4; }
.vc__titulo { margin: 0; font-family: var(--display); font-weight: 400; font-size: 16px; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; }
.vc__destino, .vc__region { margin: 6px 0 0; font-size: 13px; color: var(--tenue); }
.vc__region { order: -1; margin: 0 0 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.vc__gancho { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.25; color: var(--tenue); }
.vc__lugares { height: 4px; margin: 16px 0 8px; background: rgba(236, 232, 225, .1); }
.vc__lugares i { display: block; height: 100%; background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro)); }
.vc__quedan { margin: 0; font-size: 13px; color: var(--tenue); }
.vc__quedan b { color: var(--texto); font-weight: 600; }
.vc__pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; }
.vc__precio { display: grid; font-family: var(--display); font-size: 19px; color: var(--oro-claro); }
.vc__precio small { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muy-tenue); }
.vc__ver { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-claro); }
.vc__ver svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--curva); }
.vc:hover .vc__ver svg { transform: translateX(5px); }
.vc--agotado .vc__foto img { filter: grayscale(.7); }
.vc--agotado .vc__cuando { color: var(--muy-tenue); }
.vc--agotado .pulso { background: var(--muy-tenue); }
.vc--agotado .pulso::after { display: none; }

/* ====================================================================
   VIAJES DE TEMPORADA
   ==================================================================== */
.temporadas { padding-bottom: clamp(50px, 7vw, 90px); }
.temp-ahora {
  --b: 30px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  min-height: 560px;
  background: linear-gradient(140deg, #15141a, #0a0a0e 60%);
  clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));
  isolation: isolate;
}
.temp-ahora::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(200, 164, 106, .16), transparent 70%);
}
.temp-ahora__fotos { position: relative; overflow: hidden; background: var(--negro-3); min-height: 320px; }
.temp-ahora__fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 6s ease-out; }
.temp-ahora__fotos img.activa { opacity: 1; transform: none; }
.temp-ahora__fotos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(10, 10, 14, .9)), linear-gradient(0deg, rgba(10, 10, 14, .7), transparent 40%); pointer-events: none; }
.temp-ahora__lugar { position: absolute; z-index: 1; left: 22px; bottom: 18px; font-family: var(--serif); font-style: italic; font-size: 22px; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.temp-ahora__texto { padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; }
.temp-ahora__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.temp-ahora h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.15; text-transform: uppercase; }
.temp-ahora__lema { margin: 14px 0 0; color: var(--tenue); }
.temp-ahora__destinos { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 0; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--oro-claro); }
.temp-ahora__destinos span:not(:last-child)::after { content: '·'; margin-left: 16px; color: var(--muy-tenue); }
.temp-ahora__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.temp-ahora__nota { margin: 14px 0 0; font-size: 13px; color: var(--tenue); }
.temp-ahora__nota b { color: var(--verde); font-weight: 600; }

.eventos { list-style: none; display: grid; gap: 8px; margin: 22px 0 0; padding: 0; }
.evento {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'fecha titulo cuenta' 'fecha lugar cuenta';
  align-items: center;
  column-gap: 14px;
  padding: 12px 14px;
  background: rgba(236, 232, 225, .045);
  box-shadow: inset 2px 0 0 var(--oro);
}
.evento__fecha { grid-area: fecha; font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-claro); min-width: 92px; }
.evento strong { grid-area: titulo; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.evento small { grid-area: lugar; font-size: 12.5px; color: var(--muy-tenue); }
.evento__cuenta { grid-area: cuenta; font-size: 12px; color: #bfe9d4; text-align: right; }

.temporadas__cabeza { margin: clamp(46px, 6vw, 70px) 0 22px; align-items: center; }
.temporadas__cabeza h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }

.tc {
  --ch: 18px;
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  text-align: left;
  overflow: hidden;
  background: var(--negro-3);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  isolation: isolate;
}
.tc__foto { position: absolute; inset: 0; z-index: -1; }
.tc__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); }
.tc:hover .tc__foto img { transform: scale(1.06); }
.tc__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 7, 10, .95) 8%, rgba(7, 7, 10, .35) 55%, rgba(7, 7, 10, .2)); }
.tc__abajo { display: grid; gap: 6px; }
.tc__abajo small { font-family: var(--display); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-claro); }
.tc__abajo strong { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.25; text-transform: uppercase; }
.tc__destinos { font-size: 13px; color: var(--tenue); line-height: 1.45; }
.tc__ver { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-claro); }
.tc__ver svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--curva); }
.tc:hover .tc__ver svg { transform: translateX(5px); }

/* ---- La ventana de una temporada */
.temporada { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(5, 5, 7, .86); animation: aparece .4s var(--curva); }
.temporada[hidden] { display: none; }
.temporada__caja {
  position: relative;
  width: min(1060px, 100%);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #111117, #0a0a0e);
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
  animation: ficha-entra .6s var(--curva);
  scrollbar-width: thin;
}
.temporada__cerrar { position: sticky; top: 14px; float: right; z-index: 3; margin: 14px 14px -64px 0; width: 50px; height: 50px; display: grid; place-items: center; background: rgba(7, 7, 10, .7); box-shadow: inset 0 0 0 1px var(--linea); }
.temporada__cerrar svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tv__cabeza { position: relative; min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.tv__fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.tv__cabeza::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #111117 4%, rgba(17, 17, 23, .55) 50%, rgba(17, 17, 23, .15)); }
.tv__cabeza-texto { padding: clamp(24px, 4vw, 48px); max-width: 720px; }
.tv__cabeza h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.12; text-transform: uppercase; }
.tv__cabeza p:last-child { margin: 14px 0 0; color: var(--tenue); font-size: 16.5px; }
.tv__bloque { padding: 10px clamp(24px, 4vw, 48px) 30px; }
.tv__bloque h3 { margin: 0 0 16px; font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.eventos--grande { margin: 0; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tv__fechas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tv__fecha { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; padding: 12px 14px; background: rgba(236, 232, 225, .045); box-shadow: inset 0 0 0 1px var(--linea); }
.tv__fecha--fin { opacity: .55; }
.tv__dia { display: grid; justify-items: center; min-width: 54px; padding: 6px; background: var(--marfil); color: var(--tinta); }
.tv__dia b { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1; }
.tv__dia small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.tv__fecha-texto { display: grid; gap: 2px; min-width: 0; }
.tv__fecha-texto strong { font-weight: 600; }
.tv__fecha-texto small { font-size: 12.5px; color: var(--tenue); }
.tv__pocos { color: #f0b45f !important; font-weight: 600; }
.tv__fecha-precio { display: grid; text-align: right; font-family: var(--display); color: var(--oro-claro); }
.tv__fecha-precio small { font-family: var(--sans); font-size: 11px; color: var(--muy-tenue); }
.tv__sin-fechas { padding: 20px 22px; background: rgba(200, 164, 106, .07); box-shadow: inset 2px 0 0 var(--oro); }
.tv__sin-fechas p { margin: 0; color: var(--tenue); }
.tv__sin-fechas b { color: var(--texto); }
.tv__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tv__destinos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.td { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 10px; background: rgba(236, 232, 225, .035); box-shadow: inset 0 0 0 1px var(--linea); }
.td--top { box-shadow: inset 0 0 0 1px rgba(200, 164, 106, .45); }
.td__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--negro-3); cursor: zoom-in; }
.td__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.td__foto:hover img { transform: scale(1.06); }
.td__foto span { position: absolute; right: 6px; bottom: 6px; padding: 3px 7px; font-size: 10.5px; color: var(--texto); background: rgba(7, 7, 10, .7); }
.td__foto--sin { display: grid; place-items: center; cursor: default; background: radial-gradient(circle at 50% 40%, #232029, #0d0d11 70%); }
.td__foto--sin svg { position: absolute; width: 74%; height: auto; color: var(--oro); opacity: .5; }
.td__foto--sin b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 46px; color: var(--oro-claro); }
.td__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 4px 4px 0; min-width: 0; }
.td__texto .chip { margin-bottom: 4px; padding: 4px 9px; font-size: 10px; }
.td__texto small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.td__texto strong { overflow-wrap: anywhere; font-family: var(--display); font-weight: 400; font-size: 15px; line-height: 1.3; text-transform: uppercase; }
.td__texto p { margin: 4px 0 10px; font-size: 14px; color: var(--tenue); }
.td__texto .enlace-flecha { margin-top: auto; font-size: 11.5px; }
.tv__otras { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px clamp(24px, 4vw, 48px) 36px; border-top: 1px solid var(--linea); padding-top: 24px; }
.tv__otras .chip { cursor: pointer; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ====================================================================
   POR QUÉ CONFIAR
   ==================================================================== */
.confianza { padding-top: 0; }
.confianza__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); }
.confianza__lista li { padding: clamp(26px, 3vw, 40px); background: var(--negro); }
.confianza__lista svg { width: 38px; height: 38px; fill: none; stroke: var(--oro); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.confianza__lista h3 { margin: 20px 0 0; font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.confianza__lista p { margin: 10px 0 0; color: var(--tenue); font-size: 15px; }
.confianza__cotizar { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

/* ====================================================================
   NUESTRAS UNIDADES · fotos reales con el mismo filtro
   ==================================================================== */
.unidades { padding-top: 0; }
.unidad { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; margin-bottom: clamp(56px, 8vw, 110px); }
.unidad--invertida .unidad__fotos { order: 2; }
.unidad__fotos { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 5 / 4; }
.unidad__fotos img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; background: var(--negro-2); }
.unidad__fotos .unidad__grande { grid-row: 1 / 3; }
.unidad__tipo { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.unidad__info h3 { margin: 12px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3vw, 34px); letter-spacing: .03em; }
.unidad__modelo { margin: 8px 0 0; font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--oro-claro); }
.unidad__datos { display: flex; gap: 1px; margin: 26px 0 0; background: var(--linea); }
.unidad__datos div { flex: 1; padding: 16px 18px; background: var(--negro); }
.unidad__datos dt { font-family: var(--display); font-size: 26px; color: var(--texto); }
.unidad__datos dd { margin: 6px 0 0; font-size: 13px; color: var(--tenue); }
.unidad__rasgos { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.unidad__rasgos li { position: relative; padding-left: 22px; color: var(--tenue); font-size: 15px; }
.unidad__rasgos li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 1px; background: var(--oro); }
.unidades__flota { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.unidades__flota img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; aspect-ratio: 4 / 5; background: var(--negro-2); }
.unidades__flota img:first-child { grid-column: 1 / 3; aspect-ratio: 1280 / 485; }

/* ====================================================================
   DÓNDE NOS UBICAMOS
   ==================================================================== */
.ubicacion { padding-top: 0; }
.ubicacion__caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.ubicacion__texto > p:not(.antetitulo) { margin: 18px 0 0; color: var(--tenue); }
.ubicacion__texto > p.ubicacion__nota { margin-bottom: 28px; font-size: 15px; }
.ubicacion__mapa { aspect-ratio: 4 / 3; border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; background: var(--negro-2); }
.ubicacion__mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }
@media (max-width: 820px) {
  .unidad, .ubicacion__caja { grid-template-columns: minmax(0, 1fr); }
  .unidad--invertida .unidad__fotos { order: 0; }
  .unidad__fotos { aspect-ratio: 4 / 5; grid-template-columns: 1fr 1fr; grid-template-rows: 1.6fr 1fr; }
  .unidad__fotos .unidad__grande { grid-row: auto; grid-column: 1 / 3; }
}

/* ====================================================================
   CLUB BELLA TOUR
   ==================================================================== */
.club__caja { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.club__texto > p:not(.antetitulo):not(.club__nota) { margin: 18px 0 0; color: var(--tenue); max-width: 480px; }
.club__texto b { color: var(--oro-claro); font-weight: 600; }
.club__form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 28px; max-width: 520px; }
.club__nota { min-height: 1.6em; margin: 14px 0 0; font-size: 15px; color: var(--tenue); }
.club__nota.error { color: #f3c9c4; }
.club__nota a { color: var(--oro-claro); text-decoration: underline; text-underline-offset: 3px; }
.tarjeta-club {
  --b: 24px;
  position: relative;
  aspect-ratio: 1.6 / 1;
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  color: var(--tinta);
  background:
    radial-gradient(ellipse 80% 90% at 100% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(130deg, #b8945d, #ead2a0 42%, #c8a46a 70%, #8e7142);
  clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.tarjeta-club .logo { color: var(--tinta); }
.tarjeta-club .logo [data-anillo] { color: var(--oro-oscuro); }
.tarjeta-club__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tarjeta-club__tipo { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(18, 17, 22, .6); text-align: right; }
.tarjeta-club__nombre { margin: auto 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; }
.tarjeta-club__sellos { display: flex; gap: clamp(6px, 1vw, 12px); margin: 16px 0 12px; }
.sello {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(34px, 4.4vw, 50px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed rgba(18, 17, 22, .4);
  font-family: var(--display);
  font-size: 12px;
  color: rgba(18, 17, 22, .45);
}
.sello svg { width: 55%; fill: none; stroke: var(--oro-claro); stroke-width: 2.6; }
.sello--lleno { border: 0; background: var(--tinta); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.anima .sello--lleno { animation: sello-entra .6s var(--curva) both; animation-delay: calc(var(--i) * .14s); }
@keyframes sello-entra { from { transform: scale(1.8) rotate(-18deg); opacity: 0; } }
.sello--premio { margin-left: auto; width: auto; aspect-ratio: auto; padding: 0 12px; border-radius: 30px; border-style: solid; color: var(--tinta); font-size: 12.5px; }
.sello--listo { background: var(--tinta); color: var(--oro-claro); border-color: var(--tinta); }
.tarjeta-club__pie { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(18, 17, 22, .65); }

/* ====================================================================
   COTIZAR POR WHATSAPP
   ==================================================================== */
.wa-caja { display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(22px, 4vw, 50px); align-items: start; }
.wa-form {
  --b: 30px;
  position: relative;
  padding: clamp(24px, 4vw, 46px);
  isolation: isolate;
  background: linear-gradient(140deg, rgba(200, 164, 106, .55), rgba(236, 232, 225, .12) 40%, rgba(138, 150, 255, .3));
  clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));
}
.wa-form::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  background: linear-gradient(180deg, #111117, #0a0a0e);
  clip-path: inherit;
}
.wa-form > .campo { margin-bottom: 16px; }
.campo__titulo { margin: 22px 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip--opcion { cursor: pointer; padding: 10px 14px; font-size: 11px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(236, 232, 225, .04); transition: background .3s, box-shadow .3s; }
.chip--opcion small { font-size: 10px; color: var(--muy-tenue); letter-spacing: .06em; text-transform: none; }
.chip--opcion[aria-pressed='true'] { background: rgba(200, 164, 106, .16); box-shadow: inset 0 0 0 1px var(--oro); }
.wa-form__enviar { width: 100%; margin-top: 28px; min-height: 58px; font-size: 12px; }
.wa-form__enviar svg { position: relative; z-index: 1; width: 20px; fill: currentColor; }
.wa-form .aviso--info { margin: 16px 0 0; }
.wa-form__garantias { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; font-size: 12.5px; color: var(--muy-tenue); }
.wa-form__garantias li { display: flex; align-items: center; gap: 8px; }
.wa-form__garantias li::before { content: ''; width: 9px; height: 5px; border-left: 1.5px solid var(--verde); border-bottom: 1.5px solid var(--verde); transform: translateY(-2px) rotate(-45deg); }
.campo.error input { box-shadow: inset 0 -1px 0 var(--rojo), inset 0 0 0 1px rgba(224, 104, 95, .4); }

/* El teléfono con el mensaje armándose */
.telefono {
  position: sticky;
  top: 90px;
  padding: 10px;
  border-radius: 34px;
  background: #1a1a20;
  box-shadow: inset 0 0 0 1px rgba(236, 232, 225, .12), 0 30px 80px rgba(0, 0, 0, .55);
}
.telefono__barra { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 26px 26px 0 0; background: #1f2c33; }
.telefono__barra strong { display: block; font-size: 15px; }
.telefono__barra small { font-size: 12px; color: rgba(236, 232, 225, .6); }
.telefono__avatar { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--negro); font-family: var(--display); font-size: 11px; color: var(--oro-claro); }
.telefono__avatar svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--oro); }
.telefono__chat {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 330px; padding: 18px 14px 22px;
  border-radius: 0 0 26px 26px;
  background: #0d1418 radial-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 14px 14px;
}
.burbuja { max-width: 88%; margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.45; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja--ellos { align-self: flex-start; background: #1f2c33; border-top-left-radius: 2px; }
.burbuja--tu { align-self: flex-end; background: #005c4b; border-top-right-radius: 2px; }
.telefono__nota { margin: 12px 10px 4px; font-size: 12px; color: var(--muy-tenue); text-align: center; }

/* ====================================================================
   PREGUNTAS
   ==================================================================== */
.preguntas { padding-top: 0; }
.preguntas__caja { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.preguntas__lista { border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary i { position: relative; flex: none; width: 16px; height: 16px; }
.pregunta summary i::before, .pregunta summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--oro); transition: transform .4s var(--curva); }
.pregunta summary i::after { transform: rotate(90deg); }
.pregunta[open] summary i::after { transform: rotate(0); }
.pregunta p { margin: -6px 0 22px; color: var(--tenue); max-width: 620px; }

@media (max-width: 900px) {
  .accesos { grid-template-columns: 1fr; }
  .accesos__cotizar { grid-column: auto; }
  .viajes-c__cabeza .flechas, .temporadas__cabeza .flechas { display: none; }
  .temp-ahora { grid-template-columns: minmax(0, 1fr); min-height: 0; --b: 20px; }
  .temp-ahora .chip { white-space: normal; }
  .temp-ahora__fotos { aspect-ratio: 4 / 3.3; min-height: 0; }
  .temp-ahora__fotos::after { background: linear-gradient(0deg, rgba(10, 10, 14, .95), transparent 45%); }
  .temp-ahora__texto { padding: 6px 20px 26px; }
  .temp-ahora__botones .btn { flex: 1 1 100%; }
  .evento { grid-template-columns: 1fr auto; grid-template-areas: 'fecha cuenta' 'titulo titulo' 'lugar lugar'; row-gap: 3px; }
  .confianza__lista { grid-template-columns: 1fr 1fr; }
  .club__caja, .wa-caja, .preguntas__caja { grid-template-columns: 1fr; }
  .tarjeta-club { order: -1; max-width: 460px; width: 100%; justify-self: center; }
  .telefono { position: relative; top: 0; }
  .telefono__chat { min-height: 0; }
  .temporada { padding: 0; place-items: start stretch; }
  .temporada__caja { max-height: 100svh; height: 100svh; clip-path: none; }
  .tv__cabeza { min-height: 300px; }
  .tv__destinos { grid-template-columns: 1fr; }
  .tv__fecha { grid-template-columns: auto 1fr auto; }
  .tv__fecha .btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 560px) {
  .confianza__lista { grid-template-columns: 1fr; }
  .club__form { grid-template-columns: 1fr; }
  .td { grid-template-columns: 110px 1fr; }
  .tarjeta-club__sellos { gap: 5px; }
  .sello { width: 30px; font-size: 11px; }
  .sello--premio { width: auto; padding: 0 8px; font-size: 11px; }
  .temp-ahora__botones .btn { white-space: normal; text-align: center; }
}

/* Si la persona pidió menos movimiento: sin barridos, sin giros, sin cinta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================================
 * 18/10/2026 · viaje de temporada, asientos con pago, descuentos y la
 * solicitud de contrato
 * ========================================================================== */

/* ---- Asientos: apartado (sin pagar) y con descuento ---------------------- */
.asiento.asiento--apartado {
  color: var(--muy-tenue); cursor: not-allowed; box-shadow: inset 0 0 0 1.5px rgba(236, 232, 225, .22);
  background: repeating-linear-gradient(135deg, rgba(236, 232, 225, .1) 0 4px, transparent 4px 8px);
}
.asiento.asiento--rebaja { position: relative; color: #ffd28a; background: rgba(240, 180, 95, .16); box-shadow: inset 0 0 0 2px #f0b45f; }
.asiento.asiento--rebaja::after { content: "%"; position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; display: grid; place-items: center; font: 700 9px/1 var(--sans); color: var(--tinta); background: #f0b45f; border-radius: 50%; }
.asiento.asiento--rebaja.asiento--elegido { background: #fff; box-shadow: inset 0 0 0 2px var(--oro); }

/* ---- La ventana de apartar ------------------------------------------------ */
.lugar .elegir__caja { width: min(480px, 100%); }
.lugar__pasos { display: flex; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.lugar__pasos li { flex: 1; height: 3px; background: var(--linea); transition: background .4s; }
.lugar__pasos li.hecho { background: var(--oro); }
.lugar__texto { margin: 0 0 14px; font-size: 14.5px; color: var(--tenue); }
.lugar__texto b { color: var(--texto); font-weight: 600; }
.lugar__tenue { font-size: 13px; color: var(--muy-tenue); }
.lugar__contador { margin: 0 auto 16px; }
.lugar__rebaja { margin: 16px 0 0; padding: 12px 14px; font-size: 13.5px; color: var(--tenue); background: rgba(234, 210, 160, .08); box-shadow: inset 2px 0 0 var(--oro); }
.lugar__rebaja b { color: var(--oro-claro); }
.lugar__condiciones { padding: 14px 16px; background: rgba(236, 232, 225, .04); box-shadow: inset 0 0 0 1px var(--linea); font-size: 13.5px; color: var(--tenue); }
.lugar__condiciones p { margin: 0; }
.lugar__condiciones p + p { margin-top: 8px; }
.lugar__condiciones b { color: var(--oro-claro); font-weight: 600; }
.lugar__clausulas { margin: 14px 0 18px; font-size: 13px; color: var(--tenue); }
.lugar__clausulas summary { cursor: pointer; color: var(--oro-claro); }
.lugar__clausulas ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.lugar__form { display: grid; gap: 16px; }
.lugar__acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--tenue); cursor: pointer; }
.lugar__acepto input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--oro); flex: none; }
.lugar__boleto { position: relative; padding: 18px; margin-bottom: 16px; background: var(--marfil); color: var(--tinta); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.lugar__folio { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #6b655b; }
.lugar__folio b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .06em; color: var(--tinta); }
.lugar__estado { display: inline-block; margin: 8px 0 12px; padding: 4px 10px; font-size: 12px; font-weight: 600; background: #f0dcb4; }
.lugar__estado--ok { background: #cdebd9; color: #1d5a3b; }
.lugar__estado--mal { background: #f2cfcb; color: #7d2a23; }
.lugar__boleto dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; margin: 0; }
.lugar__boleto dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6b655b; }
.lugar__boleto dd { margin: 2px 0 0; font-family: var(--display); font-size: 15px; }
.lugar__pagar { display: grid; gap: 10px; margin: 6px 0 16px; }
.lugar__pagar .btn { white-space: normal; text-align: center; min-height: 54px; }
.lugar__banco { display: grid; gap: 2px; padding: 12px 14px; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--linea); }
.lugar__banco small { color: var(--muy-tenue); font-size: 11.5px; }
.lugar__banco span { font-family: var(--display); letter-spacing: .08em; color: var(--oro-claro); word-break: break-all; }
.lugar .elegir__pie { flex-wrap: wrap; }
.lugar .elegir__resumen small + strong + small { color: var(--oro-claro); }

/* ---- Viaje de temporada (el volante) ------------------------------------- */
.promo { padding: clamp(60px, 9vw, 120px) 0 clamp(20px, 4vw, 40px); }
.promo .contenedor { display: grid; gap: clamp(40px, 6vw, 70px); }
.promo__caja {
  position: relative; display: grid; grid-template-columns: 1.05fr 1fr;
  background: linear-gradient(160deg, #15151c, #09090c 60%);
  box-shadow: inset 0 0 0 1px rgba(200, 164, 106, .28);
  clip-path: polygon(34px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%, 0 34px);
}
.promo__fotos { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr; gap: 6px; min-height: 520px; padding: 6px; }
.promo__foto { position: relative; overflow: hidden; background: var(--negro-3); }
.promo__foto--1 { grid-column: 1 / -1; }
.promo__foto:only-of-type { grid-row: 1 / -1; }
.promo__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.promo__foto:hover img { transform: scale(1.04); }
.promo__sello { position: absolute; top: 22px; left: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; font-family: var(--display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta); background: var(--oro-claro); }
.promo__sello .pulso { background: #2c7a52; }
.promo__sello .pulso::after { border-color: #2c7a52; }
.promo__info { padding: clamp(26px, 4vw, 52px); display: flex; flex-direction: column; }
.promo__info .antetitulo { margin: 0; }
.promo__titulo { margin: 14px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.08; text-transform: uppercase; }
.promo__texto { margin: 14px 0 0; color: var(--tenue); font-size: 15px; }
.promo__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 26px 0 0; }
.promo__dato--fechas { grid-column: 1 / -1; }
.promo__dato dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.promo__dato dd { margin: 6px 0 0; font-size: 15px; }
.promo__dato--fechas dd { font-family: var(--display); font-size: clamp(17px, 1.8vw, 22px); }
.promo__dato ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.promo__dato li::before { content: '•'; color: var(--oro); margin-right: 8px; }
.promo__dato small { display: block; color: var(--muy-tenue); font-size: 13px; }
.promo__fechas { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.promo__fecha { display: grid; justify-items: center; min-width: 78px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--linea); transition: background .3s, box-shadow .3s; }
.promo__fecha b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; }
.promo__fecha small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.promo__fecha em { margin-top: 4px; font-style: normal; font-size: 11.5px; color: var(--verde); }
.promo__fecha.activa { background: rgba(234, 210, 160, .12); box-shadow: inset 0 0 0 1.5px var(--oro-claro); }
.promo__fecha.agotada em { color: var(--rojo); }
.promo__precio { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 30px; margin: 26px 0 0; }
.promo__precio small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muy-tenue); }
.promo__precio strong { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); line-height: 1; color: #fff; }
.promo__precio strong i { margin-left: 6px; font-style: normal; font-size: .38em; color: var(--tenue); }
.promo__aparta { padding: 10px 16px; background: rgba(234, 210, 160, .1); box-shadow: inset 2px 0 0 var(--oro); }
.promo__aparta strong { font-size: clamp(24px, 2.6vw, 32px); color: var(--oro-claro); }
.promo__lugares { margin: 22px 0 0; }
.promo__lugares p { margin: 8px 0 0; font-size: 13.5px; color: var(--tenue); }
.promo__lugares b { color: var(--texto); }
.promo__botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.promo__nota { margin: 14px 0 0; font-size: 12.5px; color: var(--muy-tenue); }
@media (max-width: 900px) {
  .promo__caja { grid-template-columns: 1fr; }
  .promo__fotos { min-height: 0; aspect-ratio: 4 / 3.4; }
}
@media (max-width: 480px) {
  .promo__datos { grid-template-columns: 1fr; }
  .promo__botones .btn { flex: 1 1 100%; }
}

/* Carrusel e ideas: "Próximamente" y la marca del viaje de temporada */
.vc__temp--promo { background: var(--oro-claro); color: var(--tinta); }
.vc__sello--pronto, .idea__sello--pronto { background: rgba(7, 7, 10, .78) !important; color: var(--oro-claro) !important; box-shadow: inset 0 0 0 1px var(--oro); animation: none !important; }
.vc--pronto .vc__foto img, .idea--pronto .idea__foto { filter: saturate(.55) brightness(.85); }
.salida__precio--ant { margin-right: 0; }
.salida__precio--ant strong { font-size: clamp(20px, 2vw, 26px); color: var(--oro-claro); }

/* ---- Lugares con descuento ----------------------------------------------- */
.descuentos { padding: 0 0 clamp(50px, 7vw, 90px); }
.descuentos[hidden] { display: none; }
.descuentos--viajes { padding: clamp(30px, 5vw, 50px) 0 0; }
.descuentos__cabeza { margin-bottom: 24px; }
.descuentos__cabeza h2, .descuentos__cabeza h3 { margin: 12px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.12; text-transform: uppercase; }
.descuentos__cabeza em { font-family: var(--serif); font-size: 1.2em; text-transform: none; color: var(--oro-claro); }
.descuentos__cabeza .titulo__pie { margin-top: 10px; }
.descuentos__lista { display: grid; gap: 14px; }
.desc { display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; align-items: center; padding: 12px; background: linear-gradient(90deg, rgba(234, 210, 160, .1), rgba(236, 232, 225, .02)); box-shadow: inset 0 0 0 1px rgba(200, 164, 106, .3); }
.desc img { width: 110px; height: 84px; object-fit: cover; }
.desc__info small { font-size: 12px; color: var(--muy-tenue); }
.desc__info strong { display: block; font-family: var(--display); font-weight: 400; font-size: 15px; text-transform: uppercase; }
.desc__info p { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font-size: 13.5px; color: var(--tenue); }
.desc__info s { color: var(--muy-tenue); }
.desc__info b { color: var(--oro-claro); }
@media (max-width: 560px) {
  .desc { grid-template-columns: 80px 1fr; }
  .desc img { width: 80px; height: 70px; }
  .desc .btn { grid-column: 1 / -1; }
}

/* ---- Cotizar: los tres pasos y la hoja de muestra ------------------------ */
.cotizar { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 5vw, 70px); align-items: center; }
.cotizar__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.cotizar__pasos li { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; }
.cotizar__pasos b { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--tinta); background: var(--oro-claro); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.cotizar__pasos strong { font-family: var(--display); font-weight: 400; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.cotizar__pasos span { color: var(--tenue); font-size: 14.5px; }
.cotizar__hoja { display: grid; justify-items: center; gap: 22px; }
.hoja-mini { width: min(320px, 100%); aspect-ratio: 8.5 / 8; padding: 22px; display: grid; align-content: start; gap: 9px; background: var(--marfil); color: var(--tinta); transform: rotate(-2.5deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 14px 14px 0 -2px rgba(200, 164, 106, .35); }
.hoja-mini__marca { margin: 0; font-family: var(--display); font-size: 20px; letter-spacing: .06em; color: #26314f; }
.hoja-mini__marca small { font-size: .55em; letter-spacing: .3em; }
.hoja-mini__titulo, .hoja-mini__sub { margin: 4px 0 2px; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8e7142; }
.hoja-mini span { height: 1px; background: #b9b1a2; }
.hoja-mini span.corta { width: 60%; }
.cotizar__hoja .btn { min-width: min(320px, 100%); min-height: 58px; font-size: 12px; }
@media (max-width: 820px) { .cotizar { grid-template-columns: 1fr; } }

/* ---- La ventana de la solicitud (cláusulas → hoja → listo) --------------- */
.ficha.contrato { overflow: hidden; }
.contrato__caja {
  position: relative; display: flex; flex-direction: column; width: min(780px, 100%); max-height: calc(100svh - 32px);
  background: linear-gradient(180deg, #121218, #0a0a0e); box-shadow: inset 0 0 0 1px var(--linea); animation: ficha-entra .5s var(--curva);
}
.contrato__paso { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.contrato__paso[hidden] { display: none; }
.contrato__cabeza { flex: none; padding: 26px 76px 18px 26px; border-bottom: 1px solid var(--linea); }
.contrato__cabeza .antetitulo { margin: 0; }
.contrato__cabeza h3 { margin: 10px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.2; text-transform: uppercase; }
.contrato__cabeza p { margin: 8px 0 0; font-size: 14px; color: var(--tenue); }
.contrato__clausulas { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 20px 26px 20px 56px; display: grid; gap: 10px; align-content: start; font-size: 14.5px; color: var(--tenue); counter-reset: cl; list-style: none; }
.contrato__clausulas li { position: relative; counter-increment: cl; }
.contrato__clausulas li::before { content: counter(cl) 'a.'; position: absolute; left: -34px; font-family: var(--display); font-size: 11px; line-height: 2; color: var(--oro); }
.contrato__pie { flex: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: #0a0a0e; }
.contrato__pie .btn svg { position: relative; z-index: 1; width: 18px; fill: currentColor; }
@media (max-width: 480px) { .contrato__pie .btn--oro { flex: 1; } }

/* La hoja: papel marfil con los renglones del contrato */
.hoja { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0; padding: clamp(22px, 4vw, 40px); background: var(--marfil); color: var(--tinta); }
.hoja__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-right: 50px; }
.hoja__marca { display: grid; gap: 4px; }
.hoja__marca .logo { color: #26314f; font-size: 22px; }
.hoja__marca small { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #26314f; }
.hoja__folio { display: grid; justify-items: end; padding: 8px 12px; background: #e3dccd; }
.hoja__folio small { font-size: 10px; font-weight: 700; letter-spacing: .2em; color: #6b655b; }
.hoja__folio b { font-size: 12px; color: #a3392e; font-weight: 600; }
.hoja__titulo { margin: 22px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(13px, 1.8vw, 17px); text-align: center; text-transform: uppercase; letter-spacing: .06em; color: #26314f; }
.hoja__empresa { margin: 6px 0 0; text-align: center; font-size: 12.5px; color: #5d584f; }
.hoja__empresa b { color: #26314f; }
.hoja__fecha { margin: 16px 0 0; text-align: right; font-size: 13.5px; font-weight: 600; color: #26314f; }
.hoja__bloque { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 16px; margin: 22px 0 0; padding: 18px 18px 20px; border: 0; background: rgba(38, 49, 79, .07); border-radius: 14px; min-width: 0; }
.hoja__bloque legend { float: left; width: 100%; grid-column: 1 / -1; margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 700; font-style: italic; letter-spacing: .1em; text-transform: uppercase; color: #26314f; }
.renglon { grid-column: span 3; display: grid; min-width: 0; }
.renglon--ancho { grid-column: 1 / -1; }
.renglon--chico { grid-column: span 2; }
.renglon--larga { grid-column: span 4; }
.renglon span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5d584f; padding-top: 8px; }
.renglon input, .renglon textarea {
  width: 100%; min-height: 38px; padding: 4px 2px; border: 0; border-bottom: 1.5px solid #9a927f; border-radius: 0;
  background: transparent; color: var(--tinta); font: 500 16px/1.4 var(--sans); outline: 0;
}
.renglon textarea { resize: vertical; min-height: 56px; }
.renglon input:focus, .renglon textarea:focus { border-bottom-color: var(--oro-oscuro); background: rgba(200, 164, 106, .12); }
.renglon input::placeholder, .renglon textarea::placeholder { color: #a39b8c; }
.renglon.error input, .renglon.error textarea { border-bottom-color: #c0392b; background: rgba(192, 57, 43, .07); }
.renglon input[type="date"], .renglon input[type="time"] { color-scheme: light; }
.hoja__nota { margin: 18px 0 0; font-size: 13px; color: #5d584f; }
.hoja .aviso { color: #7d2a23; background: rgba(192, 57, 43, .1); }
@media (max-width: 600px) {
  .hoja__bloque { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px; }
  .renglon, .renglon--larga { grid-column: 1 / -1; }
  .renglon--fecha { grid-column: span 2; }
  .renglon--chico { grid-column: span 1; }
  .hoja__cabeza { flex-direction: column; }
}
.contrato__listo { align-items: center; justify-content: center; gap: 14px; padding: 46px 26px; text-align: center; overflow-y: auto; }
.contrato__anillo { width: 92px; fill: var(--oro); }
.contrato__listo h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; text-transform: uppercase; }
.contrato__listo h3 b { color: var(--oro-claro); font-weight: 400; }
.contrato__listo p { max-width: 420px; margin: 0; color: var(--tenue); }

/* ==========================================================================
   VIAJES CON COLOR (18/10/2026)
   Cada salida en grupo trae su color (BT.tonoCss → --ta, --tb, --ts): fecha,
   lugares, precio y botón. Las que DESTACA el dueño van primero, con fondo
   del color, brillo y listón. Esquinas redondas en vez de chaflán: se ve
   más alegre y el brillo no se corta.
   ========================================================================== */
.tono { --ta: #ff3d9a; --tb: #a647ff; --ts: #fff; }
.salida.tono, .salida.tono .salida__foto--1, .salida.tono .salida__foto--3 { clip-path: none; }
.salida.tono {
  position: relative;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--ta) 22%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--tb) 14%, #0d0b16), #0b0a10);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ta) 45%, transparent);
}
.salida.tono .salida__foto { border-radius: 18px; }
.salida.tono .salida__fecha {
  clip-path: none; border-radius: 16px;
  color: var(--ts); background: linear-gradient(140deg, var(--ta), var(--tb));
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ta) 90%, transparent);
}
.salida.tono .salida__sello { border-radius: 999px; font-family: var(--sans); font-weight: 800; font-size: 11px; letter-spacing: .08em; background: #ffc531; color: #1d1200; }
.salida.tono .salida__sello--fin { background: #2a2733; color: var(--tenue); }
.salida.tono .salida__cuando { color: var(--ta); font-weight: 700; }
.salida.tono .salida__pulso { background: var(--ta); }
.salida.tono .salida__pulso::after { border-color: var(--ta); }
.salida.tono .salida__destino { color: color-mix(in srgb, var(--tb) 45%, #fff); }
.salida.tono .salida__incluye li { clip-path: none; border-radius: 999px; color: #fff; background: color-mix(in srgb, var(--ta) 18%, transparent); }
.salida.tono .salida__incluye li::before { border-color: var(--ta); }
.salida.tono .salida__lugares { border-top-color: color-mix(in srgb, var(--ta) 25%, transparent); }
.salida.tono .salida__lugares b { color: var(--ta); }
.tono .asientos i { border-radius: 5px 5px 3px 3px; box-shadow: inset 0 0 0 1.5px var(--ta); background: color-mix(in srgb, var(--ta) 22%, transparent); }
.tono .asientos i.ocupado { box-shadow: none; background: rgba(236, 232, 225, .12); }
.salida.tono .salida__precio strong { background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--ta) 55%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.salida.tono .salida__precio--ant strong { background: none; color: #ffc531; }
.tono .btn--oro {
  clip-path: none; border-radius: 999px; animation: none;
  font-family: var(--sans); font-weight: 800; font-size: 14px; letter-spacing: .04em;
  color: var(--ts); background: linear-gradient(110deg, var(--ta), var(--tb));
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--ta) 95%, transparent);
  touch-action: manipulation;
}
.tono .btn--oro:hover { animation: none; filter: brightness(1.08); }
.tono .btn--linea { clip-path: none; border-radius: 999px; background: color-mix(in srgb, var(--ta) 55%, transparent); }
.tono .btn--linea::before { border-radius: 999px; }
.liston {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  padding: 7px 14px; border-radius: 999px;
  font: 800 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ta); background: #fff;
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--ta) 90%, transparent);
  pointer-events: none;
}
/* Destacada: fondo del color a todo lo que da, brillo alrededor. Las letras
   van en --ts: blancas sobre rosa o morado, oscuras sobre sol o turquesa. */
.salida--destacada.tono {
  color: var(--ts);
  background:
    radial-gradient(90% 80% at 100% 0, color-mix(in srgb, var(--tb) 70%, transparent), transparent 70%),
    linear-gradient(150deg, var(--ta), color-mix(in srgb, var(--tb) 88%, #000));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 26px 70px -24px var(--ta);
}
.salida--destacada.tono .salida__titulo,
.salida--destacada.tono .salida__cuando,
.salida--destacada.tono .salida__lugares b,
.salida--destacada.tono .salida__precio strong,
.salida--destacada.tono .salida__precio--ant strong { color: var(--ts); background: none; }
.salida--destacada.tono .salida__destino,
.salida--destacada.tono .salida__texto,
.salida--destacada.tono .salida__lugares p,
.salida--destacada.tono .salida__precio small { color: color-mix(in srgb, var(--ts) 82%, transparent); }
.salida--destacada.tono .salida__pulso { background: var(--ts); }
.salida--destacada.tono .salida__pulso::after { border-color: var(--ts); }
.salida--destacada.tono .salida__fecha,
.salida--destacada.tono .liston { color: var(--ta); background: var(--ts); }
.salida--destacada.tono .salida__lugares { border-top-color: color-mix(in srgb, var(--ts) 25%, transparent); }
.salida--destacada.tono .salida__incluye li { color: var(--ts); background: color-mix(in srgb, var(--ts) 16%, transparent); }
.salida--destacada.tono .salida__incluye li::before { border-color: var(--ts); }
.salida--destacada.tono .asientos i { box-shadow: inset 0 0 0 1.5px var(--ts); background: color-mix(in srgb, var(--ts) 22%, transparent); }
.salida--destacada.tono .asientos i.ocupado { box-shadow: none; background: rgba(0, 0, 0, .25); }
.salida--destacada.tono .btn--oro { color: var(--ta); background: var(--ts); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); }

/* El carrusel de la portada */
.vc.tono {
  clip-path: none; border-radius: 22px; overflow: hidden;
  background: linear-gradient(170deg, color-mix(in srgb, var(--tb) 20%, #0f0c17), #0b0a10 70%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ta) 45%, transparent);
}
.vc.tono .vc__fecha { border-radius: 14px; color: var(--ts); background: linear-gradient(140deg, var(--ta), var(--tb)); }
.vc.tono .vc__sello { border-radius: 999px; font-weight: 800; letter-spacing: .06em; }
.vc.tono .vc__sello--pocos { background: #ffc531; color: #1d1200; }
.vc.tono .liston { top: auto; bottom: 12px; right: 12px; font-size: 11px; padding: 6px 11px; }
.vc.tono .vc__cuando { color: var(--ta); font-weight: 700; }
.vc.tono .pulso { background: var(--ta); }
.vc.tono .vc__lugares { height: 6px; border-radius: 99px; overflow: hidden; }
.vc.tono .vc__lugares i { border-radius: 99px; background: linear-gradient(90deg, var(--ta), var(--tb)); }
.vc.tono .vc__quedan b { color: var(--ta); }
.vc.tono .vc__precio { font-family: var(--sans); font-weight: 800; font-size: 22px; color: #fff; }
.vc--destacada.tono {
  color: var(--ts);
  background: linear-gradient(160deg, var(--ta), color-mix(in srgb, var(--tb) 88%, #000));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 22px 50px -22px var(--ta);
}
.vc--destacada.tono .vc__titulo, .vc--destacada.tono .vc__cuando, .vc--destacada.tono .vc__quedan b, .vc--destacada.tono .vc__precio { color: var(--ts); }
.vc--destacada.tono .vc__destino, .vc--destacada.tono .vc__quedan, .vc--destacada.tono .vc__precio small { color: color-mix(in srgb, var(--ts) 82%, transparent); }
.vc--destacada.tono .pulso { background: var(--ts); }
.vc--destacada.tono .vc__fecha, .vc--destacada.tono .liston { color: var(--ta); background: var(--ts); }
.vc--destacada.tono .vc__lugares { background: rgba(0, 0, 0, .22); }
.vc--destacada.tono .vc__lugares i { background: var(--ts); }
.vc--destacada.tono .btn--oro { color: var(--ta); background: var(--ts); }

/* ¿Cómo funciona? (viajes.html, arriba de las salidas) */
.como { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 clamp(26px, 4vw, 40px); padding: 0; list-style: none; counter-reset: como; }
.como li {
  --c: #ff3d9a;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px;
  font-size: 14px; line-height: 1.35; color: var(--tenue);
  background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, transparent);
}
.como li:nth-child(2) { --c: #14d3c0; }
.como li:nth-child(3) { --c: #ffc531; }
.como li::before {
  counter-increment: como; content: counter(como);
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  font: 800 16px/1 var(--sans); color: #12091f; background: var(--c);
}
.como b { display: block; color: #fff; font-size: 15px; }
@media (max-width: 720px) {
  .como { grid-template-columns: 1fr; gap: 8px; }
  .salida.tono { border-radius: 24px; }
}