/* ============================================================
   CHILLI · v5 · CINEMATOGRÁFICO
   ============================================================ */

@font-face { font-family: 'Syncopate'; src: url('/fonts/Syncopate-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Syncopate'; src: url('/fonts/Syncopate-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --bg: #1c2330;
  --bg-2: #232b3a;
  --bg-3: #2c3545;
  --bg-4: #1a1a1a;
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,0.72);
  --ink-3: rgba(255,255,255,0.5);
  --ink-4: rgba(255,255,255,0.28);
  --line: rgba(255,255,255,0.1);
  --line-2: rgba(255,255,255,0.18);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}
body.page-booking { overflow: auto; }
/* Páginas de scroll normal (contacto, legales): NO podemos usar overflow:auto
   en el body porque la regla global del body tiene `min-height: 100vh` y
   `height: 100%` heredado del flujo, lo que hace que el body crezca hasta el
   tamaño total de su contenido. Resultado: overflow: auto no activa scroll
   porque el contenedor cabe siempre exactamente el contenido.
   La solución correcta es usar `overflow: visible` y dejar que el scroll lo
   gestione el documento (html), que sí es del tamaño del viewport. */
body.page-contact,
body.page-legal {
  overflow: visible;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
}
body.page-legal { background: var(--bg-2, #1c2330); }
/* html.scrollable: añadida explícitamente en HTML de páginas con scroll de
   documento. iOS Safari antiguo no soporta :has(), así que evitamos eso. */
html.scrollable {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   INTRO OVERLAY — entrada cinematográfica con el pimiento
   ------------------------------------------------------------
   Estructura: un veil casi-negro encima de la web. Sobre él un
   "stage" centrado con el pimiento + dos ondas/anillos dorados
   que emiten dos latidos. Tras el segundo latido, el pimiento
   vuela hacia la posición del logo en el top-bar y el veil se
   desvanece, revelando el hero. Duración total ~2.2s.
   Se monta solo en la primera visita por sesión.
   Cualquier tap/click la cancela.
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;  /* Max z-index — garantiza estar por encima de TODO */
  pointer-events: auto;
  opacity: 1;
  /* Background propio del .intro (no solo del veil hijo) para garantizar
     que SIEMPRE se vea aunque el veil tenga problemas de stacking context
     con elementos del hero que tengan filter/transform/will-change. */
  background:
    radial-gradient(ellipse at center, rgba(28,35,48,0.97) 0%, rgba(10,15,25,0.99) 70%, #0a0f19 100%);
  /* Crear propio stacking context (defensivo) */
  isolation: isolate;
  transition: opacity 0.55s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.intro--leave {
  opacity: 0;
  pointer-events: none;
}
/* Veil ahora redundante: el background del .intro ya cubre.
   Lo mantenemos como capa adicional para la animación de desvanecimiento
   suave del propio fondo cerca del final. */
.intro__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(28,35,48,0.96) 0%, rgba(10,15,25,0.99) 70%, #0a0f19 100%);
  animation: introVeil 2.2s cubic-bezier(.5,0,.5,1) forwards;
  z-index: 1;
}
@keyframes introVeil {
  0%, 65% { opacity: 1; }
  100% { opacity: 0; }
}

/* Stage centrado: contiene el pimiento + ondas */
.intro__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Anillos / ondas doradas que se expanden con cada latido */
.intro__ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 216, 61, 0.7);
  opacity: 0;
  pointer-events: none;
}
.intro__ring--1 {
  animation: introRing 1.2s cubic-bezier(.22,1,.36,1) 0.35s forwards;
}
.intro__ring--2 {
  animation: introRing 1.2s cubic-bezier(.22,1,.36,1) 0.85s forwards;
}
@keyframes introRing {
  0% {
    transform: scale(0.6);
    opacity: 0;
    border-width: 3px;
  }
  20% {
    opacity: 0.8;
    border-width: 2.5px;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
    border-width: 0.5px;
  }
}

/* Pimiento — el protagonista */
.intro__pepper {
  position: relative;
  width: 110px;
  height: auto;
  filter:
    drop-shadow(0 0 24px rgba(255, 216, 61, 0.55))
    drop-shadow(0 0 48px rgba(255, 216, 61, 0.3));
  opacity: 0;
  transform: scale(0.4) translateY(20px);
  animation: introPepper 2.2s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes introPepper {
  /* Aparición desde abajo y pequeño */
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(20px);
  }
  18% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  /* Latido 1 */
  25% { transform: scale(1.06) translateY(0); }
  35% { transform: scale(1) translateY(0); }
  /* Latido 2 */
  45% { transform: scale(1.06) translateY(0); }
  55% { transform: scale(1) translateY(0); }
  /* Beat antes de volar */
  62% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  /* Vuelo hacia el centro horizontal del top-bar (en mobile el logo
     está centrado, mismo centro horizontal que el pimiento). El logo
     en mobile está en y≈34px desde top, y el pimiento en y≈viewportH/2.
     Diferencia = ~296px ≈ -45vh. El pimiento del logo es muy chiquito
     (~26px de alto), por eso scale final ~0.24. */
  100% {
    transform: translate(0, -45vh) scale(0.24);
    opacity: 0;
  }
}

/* Desktop: el logo del top-bar está MÁS arriba aún (top:0 con height 96px),
   centerY ≈ 48px. La distancia desde el centro del viewport (≈viewportH/2)
   también es mayor en absoluto pero el viewport suele ser más alto, así
   que en vh queda parecido. Sin embargo el pimiento empieza más grande
   (140px) y termina con scale similar. */
@media (min-width: 901px) {
  .intro__pepper {
    width: 140px;
  }
  @keyframes introPepper {
    0% { opacity: 0; transform: scale(0.4) translateY(20px); }
    18% { opacity: 1; transform: scale(1) translateY(0); }
    25% { transform: scale(1.06) translateY(0); }
    35% { transform: scale(1) translateY(0); }
    45% { transform: scale(1.06) translateY(0); }
    55% { transform: scale(1) translateY(0); }
    62% { transform: scale(1) translateY(0); opacity: 1; }
    100% {
      transform: translate(0, -47vh) scale(0.28);
      opacity: 0;
    }
  }
}

/* Mobile pequeño */
@media (max-width: 480px) {
  .intro__pepper { width: 90px; }
}

/* Reduced motion: sin intro */
@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
}

/* Mientras dura la intro, evitamos scroll y oscurecemos el contenido detrás */
body.intro-playing {
  overflow: hidden;
}
body.intro-playing .top-bar,
body.intro-playing .dock,
body.intro-playing .hero__content,
body.intro-playing .hero__sub {
  /* El contenido sigue su animación de fade-in normal pero arranca tarde:
     ralentizamos su delay para que aparezca DESPUÉS de que el pimiento
     llegue al top-bar. */
  animation-delay: calc(var(--d, 0) * 1ms + 1500ms) !important;
}

/* ============================================================
   PÁGINAS LEGALES — aviso legal, privacidad, cookies
   ============================================================ */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: max(110px, calc(var(--safe-top, 0px) + 90px)) 20px calc(140px + var(--safe-bot, 0px));
  color: rgba(255,255,255,0.85);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.65;
}
.legal__doc {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 32px 24px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.legal__head {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.legal__kicker {
  display: inline-block;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.8px;
  color: #ffd83d;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.legal__title {
  margin: 0 0 6px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 40px);
  letter-spacing: -0.02em;
  color: #fff;
}
.legal__updated {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.legal section {
  margin-bottom: 24px;
}
.legal h2 {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #ffd83d;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.legal p {
  margin: 0 0 10px;
}
.legal ul, .legal ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.legal li { margin-bottom: 6px; }
.legal a {
  color: #ffd83d;
  text-decoration: underline;
  text-decoration-color: rgba(255,216,61,0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.legal a:hover { text-decoration-color: #ffd83d; }
.legal__data {
  list-style: none;
  padding: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 18px;
}
.legal__data li {
  margin-bottom: 6px;
  font-size: 14px;
}
.legal__data li:last-child { margin-bottom: 0; }
.legal__data strong {
  color: rgba(255,255,255,0.95);
  font-weight: 600;
  display: inline-block;
  min-width: 130px;
}
.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}
.legal__table th,
.legal__table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.legal__table th {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  background: rgba(255,255,255,0.04);
}
@media (min-width: 720px) {
  .legal__doc { padding: 44px 36px; }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
img, svg, video { display: block; max-width: 100%; }
::selection { background: #fff; color: #000; }

/* ============================================================
   CINEMATIC INTRO — 2s de vídeo limpio, luego stagger reveal
   ============================================================ */

/* ============================================================
   FADE-IN STAGGER — para elementos del hero
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.7s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PAGE TRANSITION — fade to black entre navegaciones
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease-in-out);
}
.page-transition.is-active {
  opacity: 1;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  padding-top: max(8px, var(--safe-top, 0px));
  z-index: 50;
  padding-left: 18px;
  padding-right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-bar__spacer { width: 56px; }
.brand {
  display: flex; align-items: center;
  justify-content: center;
}
.brand img {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
}

.lang-btn {
  width: 56px;
  height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  font-family: 'Syncopate', sans-serif;
  font-size: 11px;
  font-weight: 700;
  transition: background 0.2s;
}
.lang-btn:hover { background: rgba(255,255,255,0.08); }
.lang-btn__flag { font-size: 18px; line-height: 1; }

/* ============================================================
   BG VIDEO con KEN BURNS + grain
   ============================================================ */
.bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
}
.bg-video__src {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenBurns 30s ease-in-out infinite;
  transform-origin: center center;
}
@keyframes kenBurns {
  0%, 100% { transform: scale(1.02) translate(0, 0); }
  50% { transform: scale(1.12) translate(-1.5%, -1%); }
}
.bg-video__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.55) 100%);
}
.bg-video__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
.bg-video__grain {
  position: absolute; inset: 0;
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
   STAGE (HOME) — mobile-first: título centrado + BOOK NOW
   ============================================================ */
.stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Contenido empujado al fondo, justo encima del dock.
     El padding-bottom deja sitio para el dock primary protruding (~120px).
     El padding-top mínimo: status bar + top bar. */
  justify-content: flex-end;
  padding: 80px 22px 140px;
  gap: 0;
  overflow: hidden;
}

.stage__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* antes 14px — chip de Mallorca aún más cerca del título */
  width: 100%;
}

.stage__title {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 12vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}
.stage__line {
  display: block;
  text-shadow: 0 6px 40px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
}
.stage__line--two {
  font-size: 0.86em;
  margin-top: 4px;
  letter-spacing: -0.015em;
}
.stage__line--script {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.32em;
  letter-spacing: 1px;
  text-transform: none;
  margin-top: 14px;
  color: rgba(255,255,255,0.85);
}

/* ============================================================
   TÍTULO CINE — MALLORCA sólido + JET SKI EXPERIENCE con vídeo
   Técnica: SVG <foreignObject> con <video> recortado por mask de texto
   Funciona en iOS Safari, Chrome, Firefox.
   ============================================================ */
.stage__title--cine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 0.95;
  margin: 0;
  text-align: center;
  width: 100%;
}

/* Línea 1: MALLORCA — sólido blanco, masivo */
.stage__title--cine .stage__line--solid {
  display: block;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 11.8vw, 74px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 6px 32px rgba(0, 0, 0, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Línea 2: JET SKI con el video del fondo recortado dentro de las letras */
.stage__title--cine .stage__line--video {
  display: block;
  width: 100%;
  max-width: 580px;
  margin: 6px auto 0;
  line-height: 0;
}
.title-video-svg {
  width: 100%;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  overflow: visible;
}
.title-video-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Misma saturación que el video de fondo */
  filter: saturate(115%) contrast(108%) brightness(1.1);
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* El texto en sí: usa background-clip:text con gradiente cyan/blanco que se
   desplaza horizontalmente, simulando corriente. Encima un pseudo-elemento
   con shimmer recorre el texto periódicamente. Fiable iOS Safari + Chrome. */
.water-text {
  position: relative;
  display: inline-block;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  /* Tamaño grande: igual peso que MALLORCA pero menor (aprox 60-65%) */
  font-size: clamp(28px, 8vw, 52px);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  /* Gradiente de agua: cyan brillante → blanco → cyan, alta saturación */
  background:
    linear-gradient(
      100deg,
      #5fb8e0 0%,
      #a8dcf2 15%,
      #ffffff 30%,
      #e6f7ff 42%,
      #ffffff 50%,
      #e6f7ff 58%,
      #ffffff 70%,
      #a8dcf2 85%,
      #5fb8e0 100%
    );
  background-size: 240% 100%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.7px rgba(255, 255, 255, 0.75);
  animation: waterFlow 7s linear infinite;
  filter:
    drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* Shimmer: banda de luz que recorre el texto periódicamente.
   Lo conseguimos con un segundo gradiente capa via ::after que se anima. */
.water-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.85) 48%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.85) 52%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 250% 100%;
  background-position: 150% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: waterShine 4.5s ease-in-out infinite;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

@keyframes waterFlow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes waterShine {
  0%   { background-position: 150% 50%; }
  60%  { background-position: -50% 50%; }
  100% { background-position: -50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .water-text,
  .water-text::after { animation: none; }
  .water-text { background-position: 50% 50%; }
}

/* Variantes de jerarquía dentro de stage__line--water */
.water-text--lg {
  display: block;
  font-size: clamp(28px, 8.5vw, 52px);
  letter-spacing: 0.02em;
}
.water-text--sm {
  display: block;
  font-size: clamp(14px, 4.2vw, 22px);
  letter-spacing: 0.32em;
  margin-top: 6px;
  opacity: 0.95;
}
.stage__line--water {
  display: block;
  margin-top: 8px;
}

/* Meta rating — solo estrellas + 4,9 + reseñas */
.stage__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.stage__rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  filter: drop-shadow(0 0 6px rgba(255, 216, 61, 0.5));
}
.stage__rating b {
  font-family: 'Syncopate', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.stage__rating i {
  font-style: normal;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Kicker arriba del título */
.stage__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}

/* Meta: 60 min · 159€ · 4,9★ debajo del título */
.stage__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: 'Syncopate', sans-serif;
  color: #fff;
}
.stage__meta > span:not(.stage__meta-sep) {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.stage__meta b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.stage__meta i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.stage__meta-sep {
  color: rgba(255,255,255,0.35);
  font-size: 12px;
}

/* ============================================================
   TÍTULO CINEMATOGRÁFICO — efecto agua en la línea 2
   Técnica: background-clip text con gradient animado que simula
   reflejos de agua moviéndose dentro de las letras + outline blanco
   ============================================================ */
.stage__title--cine {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  line-height: 0.92;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  width: 100%;
}

/* Línea 1: MALLORCA sólida en blanco — ancla visual de máxima legibilidad */
.stage__line--solid {
  display: block;
  font-size: clamp(28px, 9.5vw, 64px);
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow:
    0 4px 28px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.35);
}

/* Línea 2: JET SKI EXPERIENCE con efecto agua viva (outline + interior animado) */
.stage__line--water {
  display: block;
  width: 100%;
  font-size: clamp(15px, 5vw, 30px);
  letter-spacing: 0.035em;
  margin-top: 6px;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,0.5));
}

/* Contenedor del efecto agua */
.water-text {
  position: relative;
  display: inline-block;
}
.water-text__video {
  display: none;
}

/* Texto: outline blanco fuerte + interior con gradient que recorre como agua */
.water-text__label {
  position: relative;
  display: inline-block;
  -webkit-text-stroke: 1.2px #ffffff;
  /* Capa 1: banda blanca de cresta que cruza
     Capa 2: agua de tonos celestes para el resto */
  background-image:
    linear-gradient(110deg,
      rgba(255,255,255,0)   30%,
      rgba(255,255,255,0.7) 47%,
      rgba(255,255,255,1)   50%,
      rgba(255,255,255,0.7) 53%,
      rgba(255,255,255,0)   70%),
    linear-gradient(90deg,
      #6fb0d8 0%,
      #a3d2ec 25%,
      #e0f0fa 50%,
      #a3d2ec 75%,
      #6fb0d8 100%);
  background-size: 260% 100%, 200% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 50%, 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: water-flow 5s linear infinite;
  padding: 0 0.08em;
}
@keyframes water-flow {
  0%   { background-position: 0% 50%, 0% 50%; }
  100% { background-position: 260% 50%, 200% 50%; }
}

/* ============================================================
   RATING — solo 4,9 ★ 1.800 reseñas, compacto y premium
   ============================================================ */
.stage__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 14px;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  color: #fff;
}
.stage__rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.stage__rating-stars svg {
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(255,180,0,0.4));
}
.stage__rating-score {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.stage__rating-score b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.stage__rating-score i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
}

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  50% { opacity: 0.55; transform: scale(1.2); box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}

/* ============================================================
   CTA HERO — pill premium horizontal con flecha animada
   ============================================================ */
.cta-hero {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px 18px 28px;
  background: #fff;
  color: #000;
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.2px;
  text-decoration: none;
  position: relative;
  overflow: hidden; /* contiene shine y wave */
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s var(--ease-out),
    background-color 0.45s var(--ease-out),
    color 0.45s var(--ease-out);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 0 0 rgba(255, 216, 61, 0);
}
.cta-hero:not(.fade-in) {
  animation: ctaBreath 2.8s ease-in-out infinite;
}
.cta-hero.fade-in {
  animation:
    fadeUp 0.7s var(--ease-out) forwards,
    ctaBreath 2.8s ease-in-out infinite;
  animation-delay:
    calc(var(--d, 0) * 1ms),
    calc(var(--d, 0) * 1ms + 700ms);
}
@keyframes ctaBreath {
  0%, 100% {
    box-shadow:
      0 12px 40px rgba(0,0,0,0.45),
      0 4px 12px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.5),
      0 0 0 0 rgba(255, 216, 61, 0);
  }
  50% {
    box-shadow:
      0 14px 46px rgba(0,0,0,0.5),
      0 4px 12px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.5),
      0 0 32px 4px rgba(255, 216, 61, 0.28);
  }
}

/* Capa 1: shine sweep diagonal (existente) */
.cta-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.8s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.cta-hero:hover::before {
  transform: translateX(200%) skewX(-15deg);
}

/* Capa 2: ola líquida sutil al hover — onda navy más oscura que se desliza
   desde la izquierda creando sensación de "marea entrando" al hover.
   Mantiene la paleta de marca: solo tonos del navy chilli, sin verdes ni dorados
   en el fondo (el dorado vive solo en el halo exterior). */
.cta-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 100% at 0% 50%,
      rgba(28, 35, 48, 0.0) 0%,
      rgba(28, 35, 48, 0.5) 35%,
      rgba(28, 35, 48, 0.9) 70%,
      rgba(15, 22, 36, 1) 100%);
  opacity: 0;
  transform: translateX(-30%) scale(1.1);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.cta-hero:hover::after {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Hover: navy chilli puro + texto blanco. Identidad de marca al 100%.
   El dorado vive solo en el halo exterior y el ring, como acento sutil. */
.cta-hero:hover {
  transform: translateY(-4px) scale(1.03);
  animation-play-state: paused;
  background-color: #1c2330; /* navy chilli */
  color: #ffffff; /* texto blanco */
  box-shadow:
    0 28px 70px rgba(0,0,0,0.6),
    0 8px 22px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 50px 10px rgba(255, 216, 61, 0.5),
    0 0 0 2.5px rgba(255, 216, 61, 0.35);
}

/* Press: bounce con escala menor */
.cta-hero:active {
  transform: translateY(-1px) scale(0.97);
  transition: transform 0.1s ease-out;
}

/* Focus visible */
.cta-hero:focus-visible {
  outline: 2px solid rgba(255, 216, 61, 0.8);
  outline-offset: 4px;
}

.cta-hero__label {
  position: relative;
  z-index: 2; /* por encima de wave + shine */
  transition: letter-spacing 0.45s var(--ease-out);
}
/* Al hover, el texto respira ligeramente (más espaciado) — sensación premium */
.cta-hero:hover .cta-hero__label {
  letter-spacing: 2.6px;
}
.cta-hero__arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.cta-hero:hover .cta-hero__arrow {
  transform: translateX(6px) rotate(-3deg);
  background: #ffffff; /* círculo blanco */
  color: #1c2330; /* flecha navy chilli */
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}

/* En la página de reservar, hero secundario más sobrio */
.cta-hero--book {
  align-self: flex-start;
}

/* ============================================================
   CTA HERO --GLASS — variante cinematográfica para home
   Fondo translúcido con borde luminoso, halo amarillo de respiración
   ============================================================ */
.cta-hero--glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%);
  color: #fff;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 4px 18px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  padding: 17px 24px 17px 30px;
  isolation: isolate;
}
.cta-hero--glass::before {
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 48%,
    rgba(255,255,255,0.55) 52%,
    rgba(255,255,255,0) 100%);
  z-index: 1;
}
.cta-hero--glass:hover {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.55),
    0 6px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.cta-hero--glass .cta-hero__label {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.cta-hero--glass .cta-hero__arrow {
  background: #fff;
  color: #000;
  box-shadow:
    0 4px 14px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}
/* Halo amarillo de "respiración" detrás del botón */
.cta-hero__halo {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(60% 100% at 50% 50%, rgba(255, 216, 61, 0.35) 0%, rgba(255, 216, 61, 0) 70%);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  animation: ctaHaloBreath 3.6s ease-in-out infinite;
  filter: blur(12px);
}
@keyframes ctaHaloBreath {
  0%, 100% { opacity: 0.35; transform: scale(0.98); }
  50%      { opacity: 0.7;  transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-hero__halo { animation: none; }
}

/* ============================================================
   DOCK — mobile-first: solo iconos · desktop: + labels
   ============================================================ */
.dock {
  position: fixed;
  bottom: calc(18px + var(--safe-bot));
  left: 0;
  right: 0;
  /* z-index alto para que esté SIEMPRE encima — incluido sobre .menu (z:100).
     Así el dock es persistente y solo se ilumina el icono de la sección activa. */
  z-index: 110;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.dock__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 6px;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: auto;
}
.dock__item {
  width: 54px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: 50%;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  transition: color 0.3s var(--ease-out);
  position: relative;
  z-index: 2;
  text-decoration: none;
  flex-shrink: 0;
}
.dock__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  transition: transform 0.4s var(--ease-spring);
}
/* Hover SOLO en dispositivos que de verdad tienen hover (desktop con ratón).
   En mobile no aplica nada y evitamos el "stuck hover state" tras un tap. */
@media (hover: hover) {
  .dock__item:hover { color: #fff; }
  .dock__item:hover .dock__ico { transform: translateY(-2px); }
}

/* Estado ACTIVO: destacado claro cuando estás en esa sección.
   Pill de fondo translúcida + icono blanco + dot indicador dorado debajo. */
.dock__item.is-active {
  color: #fff;
}
.dock__item.is-active::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  z-index: -1;
  transition: background 0.25s, border-color 0.25s;
}
.dock__item.is-active .dock__ico {
  transform: translateY(-1px) scale(1.08);
}
/* Dot indicador dorado debajo del icono activo (línea de marca) */
.dock__item.is-active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2.5px;
  border-radius: 2px;
  background: #ffd83d;
  box-shadow: 0 0 8px rgba(255, 216, 61, 0.7);
}
.dock__label {
  display: none; /* móvil: ocultos */
}
.dock__indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 54px;
  bottom: 6px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.55s var(--ease-spring);
  pointer-events: none;
}

/* ============================================================
   DOCK --MOBILE-APP — patrón de app móvil con botón primario
   centrado y elevado (Instagram +, TikTok, Strava record).
   El dock se ensancha para dar respiración al botón central, que
   sobresale ~24px por encima del nivel del dock.
   ============================================================ */
.dock--mobile-app .dock__inner {
  /* Más respiración ahora que el primary es circular */
  gap: 2px;
  padding: 8px 10px;
  padding-top: 8px;
}

/* Items secundarios con buena área táctil */
.dock--mobile-app .dock__item {
  width: 50px;
  height: 50px;
}

/* PRIMARY BUTTON — el botón MÁS IMPORTANTE de la web.
   Forma píldora alargada que sobresale del dock como protagonista absoluto.
   Texto + flecha, halo dorado respirando, hover invertido a navy. */
/* PRIMARY BUTTON — circular, navy chilli, estilo app móvil premium.
   Inspirado en patrones de apps de booking (Orbix, Wavespace, DocNow):
   - Botón perfectamente circular, no píldora
   - Color del brand (navy chilli) con icono blanco
   - Sin texto debajo, solo icono prominente
   - Sombra dramática limpia, sin halos pulsantes cargantes
   - Anillo blanco fino que lo separa del dock con elegancia
   - Hover: lift sutil + escala + anillo dorado fino */
.dock__primary {
  /* Forma: círculo grande */
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* Elevación: sobresale por encima del dock */
  margin-top: -28px;
  margin-bottom: -2px;
  margin-left: 6px;
  margin-right: 6px;
  /* Layout interno: palabra centrada absoluta */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  cursor: pointer;
  /* Botón blanco protagonista — inversión cromática sobre dock oscuro */
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);
  color: #1c2330;
  /* Sombras: profundas + anillo navy que separa del dock */
  box-shadow:
    0 18px 34px -8px rgba(0, 0, 0, 0.65),
    0 6px 14px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(28, 35, 48, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 3;
  overflow: visible;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s var(--ease-out),
    background 0.45s var(--ease-out),
    color 0.45s var(--ease-out);
}

/* Palabra fuerte centrada — protagonista en estado normal.
   "BOOK NOW" en 2 líneas: BOOK arriba, NOW debajo, ambas centradas.
   Tipografía con stroke pesado, navy chilli sólido.
   Se desvanece al hover dejando paso al icono jet ski. */
.dock__primary-word {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  line-height: 1;
  text-transform: uppercase;
  color: #1c2330;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Stroke extra para peso visual */
  -webkit-text-stroke: 0.6px #1c2330;
  /* Word-spacing infinito fuerza BOOK / NOW en 2 líneas */
  word-spacing: 999px;
  text-align: center;
  /* Estado inicial: visible */
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.45s var(--ease-out),
    letter-spacing 0.45s var(--ease-out),
    color 0.45s var(--ease-out),
    -webkit-text-stroke-color 0.45s var(--ease-out);
}

/* Icono jet ski — oculto por defecto, aparece al hover.
   Crossfade limpio: el texto desvanece + escala abajo, el jet aparece + escala arriba.
   Es el "BOOK NOW se convierte en jet ski" cinematográfico. */
.dock__primary-jet {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6) rotate(-8deg);
  transition:
    opacity 0.4s var(--ease-out) 0.05s,
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
  pointer-events: none;
}
.dock__primary-jet img {
  width: 30px;
  height: auto;
  /* Pinta el logo (negro original) a blanco usando filter */
  filter: brightness(0) invert(1);
}

/* Hover del botón — SOLO en dispositivos con cursor real (desktop).
   En mobile el :hover se queda "pegado" al primer tap (sticky hover),
   lo que obligaba a hacer doble click para abrir el QB. */
@media (hover: hover) {
  .dock__primary:hover {
    transform: translateY(-3px) scale(1.04);
    background: linear-gradient(180deg, #232b3d 0%, #1c2330 100%);
    color: #ffffff;
    box-shadow:
      0 24px 44px -8px rgba(0, 0, 0, 0.75),
      0 8px 18px rgba(0, 0, 0, 0.5),
      0 0 0 3px rgba(255, 216, 61, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      inset 0 -2px 4px rgba(0, 0, 0, 0.3),
      0 0 36px rgba(255, 216, 61, 0.3);
  }
  /* En hover: la palabra desaparece (escala hacia abajo, fade out) */
  .dock__primary:hover .dock__primary-word {
    opacity: 0;
    transform: scale(0.6);
  }
  /* En hover: el jet ski aparece (escala hacia su tamaño normal con un pelín de rotación que se corrige) */
  .dock__primary:hover .dock__primary-jet {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Press: bounce — se mantiene en todos los dispositivos (gesto táctil real) */
.dock__primary:active {
  transform: translateY(-1px) scale(0.96);
  transition: transform 0.12s ease-out;
}

/* Focus visible */
.dock__primary:focus-visible {
  outline: 2px solid rgba(255, 216, 61, 0.85);
  outline-offset: 4px;
}

/* Desktop: círculo aún más grande, palabra proporcionalmente */
@media (min-width: 901px) {
  .dock__primary {
    width: 80px;
    height: 80px;
    margin-top: -32px;
  }
  .dock__primary-word {
    font-size: 14px;
    letter-spacing: 1.6px;
  }
  .dock--mobile-app .dock__item {
    width: 64px;
    height: 56px;
  }
  .dock--mobile-app .dock__inner {
    gap: 6px;
    padding: 10px 14px;
  }
}

/* dock dentro del menú */
.dock--in-menu {
  position: absolute;
  bottom: calc(18px + var(--safe-bot));
  margin: 0;
}

/* ============================================================
   MENÚ ENVOLVENTE
   ============================================================ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s var(--ease-out);
}

.menu__header {
  position: relative;
  z-index: 5;
  height: 60px;
  padding: 0 20px;
  padding-top: var(--safe-top);
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.menu__back {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s var(--ease-out);
}
.menu__back:hover {
  background: rgba(255,255,255,0.14);
  transform: translateX(-3px);
}
.menu__title {
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height: 1.15;
}
.menu__title-kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink-3);
}
.menu__title-main {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #fff;
  margin-top: 4px;
}
.menu__pager {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--ink-3);
}
.menu__pager-cur { color: #fff; }
.menu__pager-line {
  width: 18px;
  height: 1px;
  background: var(--ink-4);
}

.menu__scroller {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Antes 96px reservaban hueco para el dock fijo. Ahora el dock se oculta
     cuando el menú está abierto, así que solo respetamos safe-area-bottom
     y un pequeño margen para que el foot respire. */
  padding: 10px 14px calc(16px + var(--safe-bot, 0px));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.menu__stack {
  /* Grid de 4 filas que llenan TODA la altura disponible del scroller.
     Fila 1: About + Parte (half row) — necesita más altura que antes
       porque ahora tiene 2 tiles con contenido (título + sub + chip).
     Fila 2: Jetski Tours (full row) — la card más vendedora.
     Fila 3: Jetski Rental (full row).
     Fila 4: Shop + Contact (half row).
     Proporciones: 1.5fr (About+Parte) / 2.1fr (Tours) / 2.1fr (Rental) / 1.5fr (Shop+Contact)
     De este modo todas las tiles respiran y los subtítulos caben. */
  display: grid;
  grid-template-rows: 1.5fr 2.1fr 2.1fr 1.5fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
/* Forzar que los hijos del grid puedan encogerse por debajo del tamaño
   intrínseco de su contenido: sin esto, fr no respeta el viewport. */
.menu__stack > * { min-height: 0; }
/* press-to-focus */
.menu__stack:hover .mtile:not(:hover) {
  opacity: 0.55;
  transform: scale(0.985);
}
.menu__stack:has(.mtile:active) .mtile:not(:active) {
  opacity: 0.55;
  transform: scale(0.985);
}
.menu__stack .mtile:active {
  transform: scale(0.98);
}

/* Cards: ya no tienen height fijo — el grid las dimensiona */
.mtile {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0a0a;
  background-size: cover;
  background-position: center;
  isolation: isolate;
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(28px);
  min-height: 0; /* permite encogerse dentro del grid */
  transition:
    transform 0.45s var(--ease-out),
    opacity 0.45s var(--ease-out),
    border-color 0.3s,
    filter 0.3s;
}
/* Half-row sigue siendo flex 50/50 */
.mtile-row {
  display: flex;
  gap: 10px;
  min-height: 0;
}
.mtile--half {
  flex: 1 1 0;
  min-width: 0;
}
.menu.is-open .mtile {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 1) * 90ms + 100ms);
}
.menu.is-open .mtile[data-i="1"] { transition-delay: 100ms; }
.menu.is-open .mtile[data-i="2"] { transition-delay: 190ms; }
.menu.is-open .mtile[data-i="3"] { transition-delay: 280ms; }
.menu.is-open .mtile[data-i="4"] { transition-delay: 370ms; }
.menu.is-open .mtile[data-i="5"] { transition-delay: 460ms; }
.menu.is-open .mtile[data-i="6"] { transition-delay: 550ms; }

.mtile:hover {
  border-color: rgba(255,255,255,0.3);
}

/* ---- Hall of Fame: loop perfecto con doble vídeo en crossfade ----
   El fondo del tile es el propio poster (no negro), por si en algún
   instante asomara: lo que se ve es el Jeep, nunca un frame negro. */
.mtile--hof {
  background-image: url('/assets/img/hall-of-fame-poster.jpg');
  background-size: cover;
  background-position: center;
}
.mtile__hof-stack {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mtile__hof-vid {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* crossfade suave entre las dos capas */
  transition: opacity 0.5s linear, transform 0.8s var(--ease-out), filter 0.6s var(--ease-out);
}
.mtile__hof-vid.is-back { opacity: 0; }
.mtile--hof:hover .mtile__hof-vid {
  transform: scale(1.04);
  filter: brightness(1.1);
}

.mtile__media,
.mtile__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.mtile__media img,
.mtile__video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out), filter 0.6s var(--ease-out);
}
/* Anti-flash en loops cortos: el poster va de fondo del propio <video>.
   Si el navegador repinta un microframe al reiniciar el loop, lo que asoma
   es el poster (mismo encuadre) en vez del navy del contenedor. */
.mtile__video {
  background-image: var(--mtile-poster, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mtile:hover .mtile__media img,
.mtile:hover .mtile__video {
  transform: scale(1.04);
  filter: brightness(1.1);
}
.mtile__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.75) 85%,
    rgba(0,0,0,0.92) 100%);
  transition: background 0.4s;
}
.mtile:hover .mtile__veil {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.1) 40%,
    rgba(0,0,0,0.7) 85%,
    rgba(0,0,0,0.92) 100%);
}
.mtile__top {
  position: absolute;
  top: 14px; left: 16px; right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mtile__num {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.9);
  padding: 4px 10px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.mtile__kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.7);
  text-align: right;
}
.mtile__body {
  position: absolute;
  bottom: 14px; left: 18px; right: 18px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.4s var(--ease-out);
}
.mtile:hover .mtile__body {
  transform: translateY(-3px);
}
.mtile__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 5.6vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.mtile__sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 8px;
  margin-top: 4px;
}
.mtile__sub {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  /* Tamaño unificado para todas las tiles (TIM: antes 11px en full y
     9.5px en half causaba inconsistencia). Ahora todas a 9.5px con
     letter-spacing uniforme. */
  font-size: 9.5px;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.mtile__arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease-out), transform 0.4s var(--ease-spring);
  flex-shrink: 0;
}
.mtile:hover .mtile__arrow {
  background: #fff;
  color: #000;
  transform: translateX(4px);
}
.mtile__badge {
  position: absolute;
  top: 60px;
  right: 22px;
  z-index: 4;
  background: #fff;
  color: #000;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 5px 10px;
  border-radius: 6px;
}

/* Chip flotante (esquina superior derecha) — usado en Tours/Rental
   para informar de la condición clave del servicio */
.mtile__chip {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 4;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.mtile__chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mtile__chip--info::before {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}
.mtile__chip--warn::before {
  background: #ffd83d;
  box-shadow: 0 0 8px rgba(255, 216, 61, 0.6);
}

/* fila de 2 cards lado a lado */
.mtile-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  min-height: 0;
}
.mtile--half {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}
.mtile--half .mtile__title {
  font-size: 18px;
}
.mtile--half .mtile__arrow { width: 26px; height: 26px; }
.mtile--half .mtile__top { top: 10px; left: 12px; right: 12px; }
.mtile--half .mtile__body { bottom: 10px; left: 12px; right: 12px; gap: 2px; }
.mtile--half .mtile__sub-row { padding-top: 6px; margin-top: 2px; }

/* About (data-i=1): mismo layout que cualquier half-tile.
   TIM: antes tenía un layout horizontal especial con título 24px que
   descompensaba con el resto. Ahora unificado: título 18px, body abajo,
   número arriba a la izquierda, igual que Parte/Shop/Contact. */

/* Footer del menú — oculto en mobile para fit-viewport */
.menu__foot {
  display: none;
}
.menu__foot.is-visible-tablet {
  margin-top: 30px;
  padding: 24px 8px 8px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.menu__foot-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu__foot-col .kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--ink-3);
}
.menu__foot-col a,
.menu__foot-col span {
  font-size: 14px;
  color: var(--ink-2);
}
.menu__foot-col a:hover { color: #fff; }
.menu__foot-langs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  align-self: end;
  justify-self: end;
}
.lang-pill {
  padding: 7px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  font-family: 'Syncopate', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ink-2);
  transition: all 0.2s;
}
.lang-pill:hover { background: rgba(255,255,255,0.08); color: #fff; }
.lang-pill.is-active { background: #fff; color: #000; border-color: #fff; }

/* ============================================================
   DESKTOP — refinado, app envolvente igual pero a escala
   ============================================================ */
@media (min-width: 901px) {
  .splash__logo { height: 100px; }

  .top-bar {
    top: 0;
    height: 96px;
    padding: 0 56px;
  }
  .top-bar__spacer { width: 80px; }
  .brand img { height: 64px; }
  .lang-btn { width: 76px; height: 46px; font-size: 12px; }
  .lang-btn__flag { font-size: 22px; }

  .stage {
    padding: 130px 40px 200px;
    justify-content: center;
    gap: 36px;
  }
  .stage__top { gap: 28px; }
  .stage__title {
    font-size: clamp(72px, 9vw, 130px);
  }
  .stage__line--two { font-size: 0.8em; margin-top: 6px; }
  .stage__line--script { font-size: 0.24em; margin-top: 20px; letter-spacing: 2px; }
  /* Desktop sizes for cinematic title */
  .stage__line--solid { font-size: clamp(72px, 8.5vw, 130px); }
  .stage__line--water .water-text { font-size: clamp(50px, 6vw, 88px); }
  .stage__rating { padding: 10px 18px; gap: 12px; }
  .stage__rating-stars svg { width: 16px; height: 16px; }
  .stage__rating-score b { font-size: 17px; }
  .stage__rating-score i { font-size: 10px; }
  .stage__kicker { font-size: 11px; padding: 10px 18px; letter-spacing: 2px; }
  .stage__meta { gap: 16px; }
  .stage__meta b { font-size: 20px; }
  .stage__meta i { font-size: 10px; letter-spacing: 1.4px; }

  /* CTA hero desktop más grande */
  .cta-hero {
    padding: 22px 28px 22px 36px;
    font-size: 14px;
    gap: 18px;
    letter-spacing: 2.5px;
  }
  .cta-hero__arrow { width: 40px; height: 40px; }

  /* Dock desktop — pill expandida con labels + indicador líquido */
  .dock {
    bottom: 28px;
  }
  .dock__inner {
    padding: 6px;
    gap: 0;
  }
  .dock__item {
    width: auto;
    height: auto;
    flex-direction: row;
    gap: 10px;
    padding: 14px 22px;
    font-size: 11px;
    border-radius: 100px;
  }
  .dock__label {
    display: inline;
    font-size: 11px;
    letter-spacing: 0.8px;
  }
  .dock__ico svg { width: 18px; height: 18px; }
  .dock__indicator {
    top: 6px;
    left: 6px;
    bottom: 6px;
    width: 130px; /* default, JS lo ajusta al active */
    border-radius: 100px;
  }

  /* MENU desktop */
  .menu__header {
    height: 60px;
    padding: 0 36px;
    grid-template-columns: 44px 1fr auto;
  }
  .menu__back { width: 42px; height: 42px; }
  .menu__title-kicker { font-size: 10px; }
  .menu__title-main { font-size: 13px; }
  .menu__pager { font-size: 12px; gap: 8px; }
  .menu__pager-line { width: 20px; }

  .menu__scroller {
    padding: 12px 40px calc(95px + var(--safe-bot, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .menu__stack {
    width: 100%;
    max-width: 1100px;
    gap: 10px;
  }
  .mtile { border-radius: 20px; }
  .mtile__title { font-size: clamp(26px, 3.2vw, 40px); }
  .mtile__sub { font-size: 12px; }
  .mtile__body { bottom: 18px; left: 26px; right: 26px; }
  .mtile__top { top: 16px; left: 22px; right: 22px; }
  .mtile--half .mtile__title { font-size: clamp(22px, 2.4vw, 28px); }
  .mtile--half .mtile__sub { font-size: 11px; }
  .mtile--half .mtile__arrow { width: 32px; height: 32px; }
  .mtile[data-i="1"] .mtile__title { font-size: 26px; }
  .mtile[data-i="1"] .mtile__body { left: 84px; }

  .menu__foot {
    width: 100%;
    max-width: 980px;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 40px;
    padding-top: 30px;
    gap: 30px;
  }
  .menu__foot-langs {
    justify-self: end;
    align-self: center;
  }
}

@media (min-width: 1400px) {
  .menu__stack, .menu__foot { max-width: 1120px; }
  .mtile__title { font-size: 56px; }
  .mtile--half .mtile__title { font-size: 36px; }
}

/* Móvil pequeño */
@media (max-width: 380px) {
  .stage__title { font-size: clamp(34px, 11vw, 42px); }
  .cta-hero { font-size: 11px; padding: 14px 18px 14px 22px; gap: 10px; }
  .cta-hero__arrow { width: 28px; height: 28px; }
  .mtile__title { font-size: 24px; }
  .stage__meta { gap: 8px; }
  .stage__meta b { font-size: 14px; }
  .stage__meta i { font-size: 8px; }
}

/* ============================================================
   LANG MENU dropdown
   ============================================================ */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 100px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  font-family: 'Syncopate', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  transition: background 0.2s;
}
.lang-btn:hover { background: rgba(0,0,0,0.6); }

.lang-menu {
  position: fixed;
  top: 100px;
  right: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: rgba(15,15,15,0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7);
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  transition: all 0.25s var(--ease-out);
}
.lang-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.lang-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-2);
  background: transparent;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
  text-align: left;
}
.lang-menu__item span { font-size: 18px; }
.lang-menu__item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.lang-menu__item.is-active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 600;
}

@media (min-width: 901px) {
  .lang-menu {
    top: 110px;
    right: 40px;
  }
}

/* ============================================================
   PÁGINA RESERVAR REDISEÑADA
   ============================================================ */
.booking__topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: calc(60px + max(var(--safe-top), 44px));
  padding: max(var(--safe-top), 44px) 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 901px) {
  .booking__topbar {
    height: calc(72px + var(--safe-top));
    padding: var(--safe-top) 32px 0;
  }
}
.booking__back {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s var(--ease-out);
  flex-shrink: 0;
}
.booking__back:hover { background: rgba(255,255,255,0.14); transform: translateX(-2px); }
.booking__logo img {
  height: 30px;
  filter: brightness(0) invert(1);
}

/* ============================================================
   PÁGINA RESERVAR — SISTEMA DE MÁRGENES
   ============================================================ */
.page-booking { background: var(--bg); }
.booking { padding: 0; }

/* Variable global de container */
:root {
  --bk-pad-x: 22px;
  --bk-max-w: 1180px;
}
@media (min-width: 740px) {
  :root { --bk-pad-x: 40px; }
}
@media (min-width: 1100px) {
  :root { --bk-pad-x: 64px; }
}
@media (min-width: 1400px) {
  :root { --bk-pad-x: 80px; }
}

/* Container consistente para TODAS las secciones */
.bk-tours,
.bk-includes,
.bk-route,
.bk-faq {
  padding-top: 80px;
  padding-bottom: 0;
}
@media (min-width: 901px) {
  .bk-tours,
  .bk-includes,
  .bk-route,
  .bk-faq {
    padding-top: 120px;
  }
}

/* Section header (kicker + h2 + lead) */
.bk-section__head {
  padding: 0 22px 28px;
  max-width: 1180px;
  margin: 0 auto;
}
.bk-section__head--center { text-align: center; }
.bk-section__head--center .bk-section__lead {
  margin-left: auto;
  margin-right: auto;
}
.bk-section__head .kicker {
  display: inline-block;
  margin-bottom: 12px;
}
.bk-h2 {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 5.5vw, 44px);
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: #fff;
}
.bk-section__lead {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 560px;
  margin: 14px 0 0;
}
@media (min-width: 901px) {
  .bk-section__head { padding: 0 var(--bk-pad-x) 36px; }
  .bk-section__lead { font-size: 17px; }
}


.bk-live {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--bg);
}
.bk-live__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bk-live__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.5) 0%,
    rgba(0,0,0,0.05) 24%,
    rgba(0,0,0,0.35) 60%,
    rgba(0,0,0,0.92) 100%);
  z-index: 1;
}
.bk-live__top {
  position: absolute;
  top: calc(60px + max(var(--safe-top), 44px) + 12px);
  left: 18px; right: 18px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
@media (min-width: 901px) {
  .bk-live__top { top: calc(72px + var(--safe-top) + 18px); left: 56px; right: 56px; }
}

/* LIVE pill pulsante */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: rgba(220, 30, 30, 0.92);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.8px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(220, 30, 30, 0.5);
}
.live-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

/* Sound button */
.live-sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.live-sound:hover { background: rgba(0,0,0,0.75); transform: scale(1.03); }
.live-sound.is-on { background: rgba(255,255,255,0.95); color: #000; border-color: #fff; }
.live-sound.is-on .live-sound__off { display: none !important; }
.live-sound.is-on .live-sound__on { display: block !important; }
.live-sound__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px) {
  .live-sound__label { display: none; }
  .live-sound { padding: 8px 10px; }
}

/* Bottom content */
.bk-live__bottom {
  position: relative;
  z-index: 4;
  padding: 0 22px 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
@media (min-width: 901px) {
  .bk-live__bottom { padding: 0 var(--bk-pad-x) 80px; gap: 24px; max-width: 920px; }
}
.bk-live__kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}
.bk-live__title {
  margin: 0;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  line-height: 0.88;
  display: flex;
  flex-direction: column;
  text-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
.bk-live__title-1 {
  font-size: clamp(58px, 18vw, 124px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.bk-live__title-2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(40px, 13vw, 86px);
  letter-spacing: -0.01em;
  margin-top: 4px;
  text-transform: none;
  color: rgba(255,255,255,0.95);
}
.bk-live__lead {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  margin: 0;
  max-width: 480px;
}
@media (min-width: 901px) {
  .bk-live__lead { font-size: 17px; }
}
.bk-live__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Meta pills compactas */
.meta-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 9px 13px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  font-family: 'Syncopate', sans-serif;
}
.meta-pill b {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
}
.meta-pill span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
@media (min-width: 901px) {
  .meta-pill { padding: 11px 16px; }
  .meta-pill b { font-size: 18px; }
  .meta-pill span { font-size: 10px; }
}

/* CTA hero book — pill pequeñito con flecha hacia abajo */
.cta-hero--book {
  align-self: flex-start;
}

/* ============================================================
   TOUR CARDS REFACTORIZADAS
   ============================================================ */
/* removed - see line ~1066 */
.bk-tour-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 var(--bk-pad-x);
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 740px) {
  .bk-tour-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 var(--bk-pad-x); }
}

.tour-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: transform 0.35s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}
.tour-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.tour-card__media {
  position: relative;
  height: 240px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.tour-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%);
}
.tour-card__capacity {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  padding: 6px 12px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  color: #fff;
  text-transform: uppercase;
}
.tour-card__duration {
  position: absolute;
  bottom: 18px;
  left: 22px;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #fff;
  font-family: 'Syncopate', sans-serif;
  text-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.tour-card__duration-num {
  font-size: 84px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.tour-card__duration-unit {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.tour-card__body {
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tour-card--featured {
  background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
  color: #000;
  border-color: #fff;
}
.tour-card--featured .tour-card__kicker { color: rgba(0,0,0,0.6); }
.tour-card--featured .tour-card__route { color: rgba(0,0,0,0.6); }
.tour-card--featured .tour-card__list { color: rgba(0,0,0,0.78); }
.tour-card--featured .tour-card__list li::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.tour-card--featured .tour-card__price-note { color: rgba(0,0,0,0.55); }
.tour-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  background: var(--bg);
  color: #fff;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 7px 12px;
  border-radius: 999px;
}
.tour-card--featured .tour-card__badge { background: #000; color: #fff; border: 1px solid rgba(0,0,0,0.2); }

.tour-card__kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--ink-3);
  display: block;
  text-transform: uppercase;
}
.tour-card__head h3 {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 6px 0 6px;
  line-height: 1.05;
}
.tour-card__route {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
  font-style: italic;
  letter-spacing: 0.2px;
}
.tour-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid currentColor;
  border-bottom-color: var(--line);
}
.tour-card--featured .tour-card__price-row { border-bottom-color: rgba(0,0,0,0.1); }
.tour-card__price {
  display: flex; align-items: baseline; gap: 4px;
  font-family: 'Syncopate', sans-serif;
}
.tour-card__price b {
  font-size: 60px; font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.tour-card__price span {
  font-size: 22px;
  font-weight: 700;
  opacity: 0.7;
}
.tour-card__price-note {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.tour-card__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 10px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  color: var(--ink-2);
}
.tour-card__list li { display: flex; align-items: center; gap: 10px; }
.tour-card__list li::before {
  content: ''; width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  flex-shrink: 0;
}
.tour-card__cta {
  margin-top: auto;
  padding: 16px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.25s var(--ease-out);
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.tour-card__cta:hover { background: rgba(255,255,255,0.18); transform: scale(1.02); }
.tour-card__cta--accent {
  background: var(--bg);
  color: #fff;
  border-color: #000;
}
.tour-card__cta--accent:hover { background: #1a1a1a; }


/* ============================================================
   TODO INCLUIDO — Carrusel horizontal Instagram Stories
   ============================================================ */
.stories {
  position: relative;
  width: 100%;
}
.stories__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 var(--bk-pad-x) 22px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stories__track::-webkit-scrollbar { display: none; }

.story {
  position: relative;
  flex: 0 0 280px;
  aspect-ratio: 9/16;
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--bg-2);
  border: 1px solid var(--line);
  cursor: grab;
  transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}
.story:active { cursor: grabbing; }
.story:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 16px 50px rgba(0,0,0,0.4);
}
.story--featured {
  flex: 0 0 360px;
}

@media (min-width: 740px) {
  .story { flex: 0 0 320px; }
  .story--featured { flex: 0 0 420px; }
  .stories__track { gap: 18px; }
}
@media (min-width: 1100px) {
  .story { flex: 0 0 340px; }
  .story--featured { flex: 0 0 480px; }
  .stories__track { gap: 22px; }
}

.story__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s var(--ease-out);
}
.story:hover .story__media { transform: scale(1.06); }
.story__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.15) 0%,
    rgba(28,35,48,0.2) 35%,
    rgba(28,35,48,0.78) 75%,
    rgba(28,35,48,0.95) 100%);
}

/* Progress bar arriba estilo Instagram Stories */
.story__progress {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 2.5px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  overflow: hidden;
  z-index: 4;
}
.story__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 2px;
}
.story.is-active .story__progress-bar {
  animation: storyProgress 5s linear forwards;
}
@keyframes storyProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.story__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 24px 26px;
  z-index: 3;
  color: #fff;
}
.story__num {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,0.85);
  align-self: flex-start;
  padding: 5px 11px;
  background: rgba(28,35,48,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  margin-top: 18px;
}
.story__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.story__kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}
.story__title {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.story__title em {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.85em;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.92);
}
.story__body p {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.86);
  margin: 4px 0 0;
}
.story--featured .story__title { font-size: 26px; }
.story--featured .story__body p { font-size: 14px; max-width: 360px; }

.story__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.story__specs span {
  padding: 6px 11px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.story__specs b { font-size: 14px; }

/* Flechas navegación */
.stories__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(28,35,48,0.85);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
}
.stories:hover .stories__arrow {
  opacity: 1;
  pointer-events: auto;
}
.stories__arrow:hover {
  background: rgba(28,35,48,0.95);
  transform: translateY(-50%) scale(1.08);
}
.stories__arrow--prev { left: 12px; }
.stories__arrow--next { right: 12px; }
.stories__arrow:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 900px) {
  .stories__arrow { display: none; }
}

/* Dots indicator */
.stories__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0 var(--bk-pad-x);
}
.stories__dot {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  transition: background 0.2s, width 0.3s var(--ease-out);
  border: 0;
  padding: 0;
}
.stories__dot.is-active {
  background: #fff;
  width: 44px;
}


.bk-route__wrap {
  padding: 0 var(--bk-pad-x);
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 901px) {
  .bk-route__wrap { padding: 0 var(--bk-pad-x); }
}

.route-map-wrap {
  position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: #0a2030;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 60px rgba(0,0,0,0.5);
  /* La imagen recortada es 1100x887 (ratio ≈ 1.24:1) — más vertical que el original.
     Esto hace que la ruta vertical aparezca prominente en móvil sin tener que recortar. */
  aspect-ratio: 1100/887;
  max-height: 760px;
}

/* Imagen satelital base */
.route-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  filter: saturate(1.05) contrast(1.02);
}

/* SVG overlay (ruta + marcadores) */
.route-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
/* Modo interactivo: el SVG captura eventos */
.route-map-wrap.is-interactive .route-map-overlay {
  pointer-events: auto;
  cursor: grab;
}
.route-map-wrap.is-interactive .route-map-overlay:active { cursor: grabbing; }

/* Chip "SALIDA / PUERTO PORTALS" — arriba sobre la colina (no tapa el puerto real ni corta la ruta) */
.route-map__overlay-top {
  position: absolute;
  top: 12px;
  right: 22%;
  z-index: 500;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
/* Botón EXPLORAR — top-left (separado) */
.route-map__overlay-tl {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 500;
  pointer-events: none;
}
.route-map__overlay-tl > * { pointer-events: auto; }

.route-map__startchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 9px;
  background: rgba(28, 35, 48, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 11px;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.route-map__startchip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: livePulse 1.6s ease-in-out infinite;
}
.route-map__startchip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.route-map__startchip-kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.7);
}
.route-map__startchip-title {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  margin-top: 1px;
}
.route-map__startchip-sub {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 9px;
  color: rgba(255,255,255,0.6);
  margin-top: 1px;
}
@media (min-width: 740px) {
  .route-map__overlay-top { top: 16px; right: 22%; gap: 10px; }
  .route-map__overlay-tl { top: 16px; left: 16px; }
  .route-map__startchip { padding: 7px 13px 7px 11px; gap: 8px; }
  .route-map__startchip-kicker { font-size: 9px; letter-spacing: 1.6px; }
  .route-map__startchip-title { font-size: 12px; }
  .route-map__startchip-sub { font-size: 10px; }
}
/* En mobile el chip vuelve al borde porque el espacio es muy estrecho */
@media (max-width: 540px) {
  .route-map__overlay-top { right: 12px; }
}

/* Botón EXPLORAR RUTA */
.route-map__explore {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #1c2330;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.route-map__explore:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.32);
}
.route-map__explore:active { transform: translateY(0); }
.route-map__explore.is-active {
  background: #1c2330;
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
/* En mobile el texto se acorta para que no choque con el badge */
.route-map__explore-label-play-short,
.route-map__explore-label-drag-short { display: inline; }
.route-map__explore-label-play,
.route-map__explore-label-drag { display: none; }
@media (min-width: 740px) {
  .route-map__explore {
    padding: 9px 16px;
    font-size: 10px;
    letter-spacing: 1.4px;
    gap: 9px;
  }
  .route-map__explore-label-play,
  .route-map__explore-label-drag { display: inline; }
  .route-map__explore-label-play-short,
  .route-map__explore-label-drag-short { display: none; }
}

/* ============================================
   ROUTE TIMELINE — 5 stops como ruta visual
   Tarjetas claras, conectores entre paradas
   ============================================ */
.route-timeline {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* En desktop: horizontal */
@media (min-width: 900px) {
  .route-timeline {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    margin-top: 36px;
  }
}

.route-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 0 22px 0;
}

@media (min-width: 900px) {
  .route-step {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 8px;
    min-width: 0;
  }
}

/* Connector line (between steps) */
.route-step__connector {
  position: absolute;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.15));
  pointer-events: none;
}

/* Mobile: vertical connector line */
.route-step__connector {
  top: 38px;
  left: 18px;
  width: 2px;
  height: calc(100% - 18px);
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0.55) 0 4px,
    transparent 4px 9px
  );
}

@media (min-width: 900px) {
  .route-step__connector {
    top: 19px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.55) 0 6px,
      transparent 6px 12px
    );
  }
}

/* Bullet (numbered circle) */
.route-step__bullet {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #1c2330;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  border: 2px solid rgba(28,35,48,0.18);
}

.route-step--start .route-step__bullet {
  background: #1c2330;
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.route-step--start .route-step__bullet::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  animation: livePulse 2s ease-in-out infinite;
}

.route-step__bullet--end {
  background: #fff;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(28,35,48,0.25);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.route-step__bullet--end::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4);
  animation: livePulse 2s ease-in-out infinite;
}
.route-step__swim-icon { width: 22px; height: 22px; }

/* Card */
.route-step__card {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255,255,255,0.96);
  color: #1c2330;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.route-step__card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}

@media (min-width: 900px) {
  .route-step__card {
    margin-top: 14px;
    width: 100%;
    padding: 14px 12px;
  }
}

.route-step__card--end {
  background: linear-gradient(135deg, #fff 0%, #f3f6fb 100%);
  border-color: rgba(28,35,48,0.12);
}

.route-step__kicker {
  display: block;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(28,35,48,0.55);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.route-step__title {
  margin: 0;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #1c2330;
  line-height: 1.2;
}
@media (min-width: 900px) {
  .route-step__title { font-size: 12px; }
}

.route-step__desc {
  margin: 4px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(28,35,48,0.62);
  line-height: 1.35;
}


/* Stops (legacy, oculto pero conservado por si i18n los referencia) */
.bk-route__stops { display: none; }
.route-stop { display: none; }


/* removed */
.faq {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  margin: 0 var(--bk-pad-x);
  max-width: 1180px;
}
@media (min-width: 1240px) { .faq { margin: 0 auto; } }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }
.faq__item summary {
  list-style: none;
  padding: 20px 22px;
  cursor: pointer;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  color: #fff;
}
.faq__item summary > span:first-child { flex: 1; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: rgba(255,255,255,0.03); }
.faq__arrow {
  font-family: 'Syncopate', sans-serif;
  font-size: 22px; color: #fff; font-weight: 400;
  transition: transform 0.3s var(--ease-out);
  width: 24px; text-align: center;
  line-height: 1;
}
.faq__item[open] .faq__arrow { transform: rotate(45deg); }
.faq__item p {
  padding: 0 22px 22px;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink-2);
}


/* ============================================================
   MODAL BOOKING — Pop-up con widget Turitop
   ============================================================ */
.bk-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.bk-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.bk-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.bk-modal__panel {
  position: relative;
  z-index: 2;
  background: #1c2330;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 0.35s var(--ease-spring), opacity 0.3s;
}
.bk-modal.is-open .bk-modal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.bk-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.bk-modal__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.bk-modal__title .kicker {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.5);
}
.bk-modal__title h3 {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0;
  color: #fff;
}
.bk-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.bk-modal__close:hover {
  background: rgba(255,255,255,0.14);
  transform: rotate(90deg);
}
.bk-modal__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 24px 24px;
  position: relative;
}
.bk-modal__widget {
  min-height: 420px;
  position: relative;
}
/* Los 2 widgets viven simultáneamente. El que no está activo se oculta sin display:none
   para que Turitop pueda inicializar los iframes correctamente. */
.bk-modal__widget:not(.is-active) {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.bk-modal__widget.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.bk-modal__widget .load-turitop {
  min-height: 420px;
  background: transparent;
}
.bk-modal__widget.is-active .load-turitop:empty::before {
  content: '⏳ Cargando calendario de reservas...';
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

@media (min-width: 901px) {
  .bk-modal { padding: 32px; }
  .bk-modal__panel { max-width: 620px; }
  .bk-modal__header { padding: 26px 32px; }
  .bk-modal__title h3 { font-size: 19px; }
  .bk-modal__body { padding: 24px 32px 32px; }
}

@media (max-width: 480px) {
  .bk-modal { padding: 0; align-items: flex-end; }
  .bk-modal__panel {
    max-width: none;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    transform: translateY(20px);
  }
  .bk-modal.is-open .bk-modal__panel { transform: translateY(0); }
}



/* FOOTER */
.bk-foot {
  border-top: 1px solid var(--line);
  margin: 64px var(--bk-pad-x) 0;
  padding: 50px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1180px;
}
@media (min-width: 901px) {
  .bk-foot {
    margin: 80px var(--bk-pad-x) 0;
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 40px;
  }
}
.bk-foot__brand p {
  margin-top: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 300px;
}
.bk-foot__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bk-foot__cols > div { display: flex; flex-direction: column; gap: 7px; }
.bk-foot__cols strong {
  font-family: 'Syncopate', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--ink-3);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.bk-foot__cols a, .bk-foot__cols span {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--ink-2);
}
.bk-foot__cols a:hover { color: #fff; }
.bk-foot small {
  grid-column: 1 / -1;
  color: var(--ink-4);
  font-size: 11px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* STICKY CTA */
.sticky-cta {
  position: fixed;
  bottom: calc(90px + var(--safe-bot));
  left: 18px; right: 18px;
  z-index: 35;
  display: none;
  align-items: center; justify-content: space-between;
  padding: 8px 8px 8px 20px;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  pointer-events: none;
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta__price {
  display: flex; flex-direction: column;
  font-family: 'Syncopate', sans-serif;
}
.sticky-cta__price b { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.sticky-cta__price span { font-size: 8px; color: var(--ink-3); letter-spacing: 1.2px; text-transform: uppercase; margin-top: 2px; }
.sticky-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #fff;
  color: #000;
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
}
@media (max-width: 900px) {
  .sticky-cta { display: flex; }
}

/* DOCK--page (en página reservar) */
.dock--page {
  /* Same defaults as .dock - mobile only */
}
@media (min-width: 901px) {
  .dock--page { display: none; }
}

/* ============================================================
   PÁGINA CONTACTO — v50: cinematográfica, coherente con index
   Estructura:
     - Hero con vídeo de fondo + título "HABLEMOS"
     - Step 1 (selector de 4 motivos) y Step 2 (formulario)
       son vistas alternantes con crossfade, no apiladas.
     - Vías rápidas en grid 2x2 mobile / 4x1 desktop
     - Footer mínimo con horario + legal
   ============================================================ */
.page-contact {
  background: var(--bg-2, #1c2330);
  color: #fff;
  min-height: 100vh;
  position: relative;
}
/* Fondo decorativo sutil: gradient radial + textura para que no se sienta
   plano cuando bajamos del hero hacia el form. */
.page-contact::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at top, rgba(28,35,48,0) 0%, rgba(10,15,25,0.6) 100%),
    linear-gradient(180deg, transparent 0%, rgba(10,15,25,0.45) 100%);
}
.contact {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: calc(140px + var(--safe-bot, 0px));
}

/* ============================================================
   HERO — vídeo aéreo + título grande + lead
   ============================================================ */
.ct-hero {
  position: relative;
  min-height: 360px;
  padding: max(110px, calc(var(--safe-top, 0px) + 90px)) 20px 36px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.ct-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ct-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(118%) contrast(108%) brightness(0.85);
  /* Ken Burns sutil */
  animation: ctHeroKenBurns 22s linear infinite alternate;
}
@keyframes ctHeroKenBurns {
  from { transform: scale(1.06); }
  to { transform: scale(1.16); }
}
.ct-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28,35,48,0.35) 0%, rgba(28,35,48,0.4) 50%, var(--bg-2, #1c2330) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
}
.ct-hero__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ct-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  color: #ffd83d;
  text-transform: uppercase;
  padding: 7px 14px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,216,61,0.3);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ct-hero__kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd83d;
  box-shadow: 0 0 12px rgba(255,216,61,0.8);
  flex-shrink: 0;
}
.ct-hero__title {
  margin: 0;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.ct-hero__line {
  display: block;
  font-size: clamp(48px, 12vw, 96px);
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.ct-hero__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  max-width: 520px;
}

/* ============================================================
   FLOW: selector + form (vistas alternantes)
   ============================================================ */
.ct-flow {
  position: relative;
  padding: 0 16px;
  margin-top: -20px; /* el hero termina con gradient al bg, solapamos un poco */
}

/* Cuando el form está abierto, colapsamos el hero a una altura mínima
   para que el usuario vea directamente el formulario sin scroll inútil. */
body.ct-form-open .ct-hero {
  min-height: 0;
  padding-top: max(72px, calc(var(--safe-top, 0px) + 60px));
  padding-bottom: 18px;
}
body.ct-form-open .ct-hero__line {
  font-size: clamp(28px, 7vw, 44px);
  transition: font-size 0.4s var(--ease-out);
}
body.ct-form-open .ct-hero__lead {
  display: none;
}
body.ct-form-open .ct-hero,
body.ct-form-open .ct-hero__line {
  transition: padding 0.4s var(--ease-out), min-height 0.4s var(--ease-out), font-size 0.4s var(--ease-out);
}

/* ============================================================
   STEP 1 — SELECTOR DE MOTIVO
   ============================================================ */
.ct-reasons {
  padding: 24px 0 16px;
  opacity: 1;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.ct-reasons.is-hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.ct-reasons__head {
  margin-bottom: 18px;
}
.ct-reasons__head .kicker {
  display: inline-block;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.8px;
  color: #ffd83d;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ct-reasons__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 5vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #fff;
}
.ct-reasons__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .ct-reasons__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* CARDS de motivo: misma lógica visual que qb-card pero con su propio top
   (número + chip) y body (título + sub + arrow). */
.ct-card {
  position: relative;
  display: block;
  width: 100%;
  height: 175px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  overflow: hidden;
  background: #0a0a0a;
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.35s var(--ease-spring, cubic-bezier(.34,1.4,.64,1)), border-color 0.3s, box-shadow 0.3s;
}
@media (hover: hover) {
  .ct-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,216,61,0.45);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
  }
}
.ct-card:active { transform: scale(0.985); }
.ct-card:focus-visible {
  outline: 2px solid #ffd83d;
  outline-offset: 3px;
}
.ct-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ct-card__media img,
.ct-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) {
  .ct-card:hover .ct-card__media img,
  .ct-card:hover .ct-card__media video {
    transform: scale(1.1);
  }
}
.ct-card__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.78) 100%);
}
.ct-card__top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ct-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 26px;
  padding: 0 9px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ct-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
.ct-card__chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ct-card__chip--info::before { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.7); }
.ct-card__chip--warn::before { background: #ffd83d; box-shadow: 0 0 8px rgba(255,216,61,0.7); }
.ct-card__body {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ct-card__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.ct-card__sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: 2px;
}
.ct-card__sub {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.3s, background 0.3s;
}
@media (hover: hover) {
  .ct-card:hover .ct-card__arrow {
    background: #ffd83d;
    color: #1c2330;
    transform: translateX(3px);
  }
}

/* ============================================================
   STEP 2 — FORMULARIO CONTEXTUAL (oculto por defecto)
   ============================================================ */
.ct-form {
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  pointer-events: none;
  position: absolute;
  inset: 0;
  transition: opacity 0.5s 0.1s var(--ease-out), transform 0.5s 0.1s var(--ease-out), visibility 0s linear 0.5s;
}
.ct-form.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
  transition: opacity 0.5s 0.15s var(--ease-out), transform 0.5s 0.15s var(--ease-out), visibility 0s linear;
}

.ct-form__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 20px 0 18px;
}
.ct-form__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: #fff;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, transform 0.2s;
}
.ct-form__back:hover {
  background: rgba(255,255,255,0.12);
  transform: translateX(-2px);
}
.ct-form__heading .kicker {
  display: inline-block;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.8px;
  color: #ffd83d;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ct-form__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 5vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #fff;
}

/* CONTENEDOR DEL FORM: card glass como contenedor general */
.ct-form__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 18px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ct-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ct-field label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ct-req {
  font-style: normal;
  color: #ffd83d;
  font-size: 12px;
  line-height: 1;
}
.ct-field input,
.ct-field select,
.ct-field textarea {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.ct-field textarea {
  resize: vertical;
  min-height: 110px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5;
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
  outline: none;
  border-color: #ffd83d;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(255,216,61,0.15);
}
.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: rgba(255,255,255,0.32);
}
.ct-field select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffd83d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  padding-right: 36px;
}
.ct-field select option {
  background: #1c2330;
  color: #fff;
}
.ct-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(15deg);
  cursor: pointer;
}

/* FILE PICKER — CV */
.ct-file {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(255,216,61,0.06);
  border: 1.5px dashed rgba(255,216,61,0.35);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.ct-file:hover {
  background: rgba(255,216,61,0.1);
  border-color: rgba(255,216,61,0.55);
}
.ct-file__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,216,61,0.12);
  border: 1px solid rgba(255,216,61,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd83d;
  flex-shrink: 0;
}
.ct-file__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ct-file__txt strong {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
}
.ct-file__txt small {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.ct-file__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.ct-file__name.has-file {
  color: #ffd83d;
  font-weight: 600;
}

/* CHECKBOX privacy */
.ct-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  margin-top: 4px;
}
.ct-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.32);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  margin-top: 1px;
  transition: background 0.2s, border-color 0.2s;
}
.ct-checkbox input[type="checkbox"]:checked {
  background: #ffd83d;
  border-color: #ffd83d;
}
.ct-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border-right: 2.5px solid #1c2330;
  border-bottom: 2.5px solid #1c2330;
  transform: rotate(45deg);
}

/* SUBMIT BUTTON — cta-hero style propio */
.ct-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 26px;
  background: #ffd83d;
  border: none;
  border-radius: 999px;
  color: #1c2330;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 6px;
  align-self: stretch;
  box-shadow:
    0 14px 32px -8px rgba(255,216,61,0.5),
    inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.3s var(--ease-spring, cubic-bezier(.34,1.4,.64,1)), box-shadow 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.ct-submit:active { transform: scale(0.97); }
@media (hover: hover) {
  .ct-submit:hover {
    transform: translateY(-2px);
    box-shadow:
      0 20px 40px -8px rgba(255,216,61,0.65),
      inset 0 1px 0 rgba(255,255,255,0.5);
  }
}
.ct-submit__arrow {
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   VÍAS RÁPIDAS — grid 2x2 mobile, 4x1 desktop
   ============================================================ */
.ct-quick {
  padding: 36px 16px 20px;
}
.ct-quick__head {
  margin-bottom: 16px;
}
.ct-quick__head .kicker {
  display: inline-block;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.8px;
  color: #ffd83d;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ct-quick__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 4.8vw, 26px);
  letter-spacing: -0.015em;
  color: #fff;
}
.ct-quick__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ct-quick__item {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 12px 12px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
  -webkit-tap-highlight-color: transparent;
  min-width: 0; /* permite que el body con texto largo se trunque dentro */
}
.ct-quick__item:active { transform: scale(0.98); }
@media (hover: hover) {
  .ct-quick__item:hover {
    border-color: rgba(255,216,61,0.4);
    background: rgba(0,0,0,0.55);
    transform: translateY(-2px);
  }
}
.ct-quick__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.95);
  flex-shrink: 0;
}
.ct-quick__icon svg { width: 18px; height: 18px; }
/* WhatsApp con su acento verde (es su color de marca, aquí sí tiene sentido) */
.ct-quick__item--wa .ct-quick__icon {
  background: rgba(74,222,128,0.14);
  border-color: rgba(74,222,128,0.4);
  color: #4ade80;
}
.ct-quick__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ct-quick__label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.ct-quick__sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  color: rgba(255,255,255,0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-quick__arrow {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  transition: transform 0.25s, color 0.25s;
}
@media (hover: hover) {
  .ct-quick__item:hover .ct-quick__arrow {
    color: #ffd83d;
    transform: translateX(3px);
  }
}

/* ============================================================
   FOOTER — horario + links legales + datos fiscales
   ============================================================ */
.ct-foot {
  text-align: center;
  padding: 28px 20px 0;
  /* Espacio inferior para que la barra flotante .dock (BOOK NOW) no tape
     los enlaces legales ni el horario (Incidencia 5 de la revisión).
     La dock está fixed abajo (~70px alto + 18px + safe-bot). */
  padding-bottom: calc(110px + var(--safe-bot, 0px));
  margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.ct-foot__hours p {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.ct-foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.ct-foot__links a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 4px 2px;
  transition: color 0.2s;
}
.ct-foot__links a:hover { color: #ffd83d; }
.ct-foot__sep {
  color: rgba(255,255,255,0.25);
  font-size: 10px;
  line-height: 1;
}
.ct-foot__legal {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  max-width: 560px;
  line-height: 1.5;
}

/* ============================================================
   TABLET / DESKTOP REFINAMIENTOS
   ============================================================ */
@media (min-width: 720px) {
  .ct-hero {
    min-height: 420px;
    padding: 140px 32px 48px;
  }
  .ct-flow { padding: 0 24px; }
  .ct-reasons { padding: 36px 0 20px; }
  .ct-card {
    height: 200px;
  }
  .ct-form__body { padding: 28px 24px; }
  .ct-quick { padding: 48px 24px 24px; }
  .ct-quick__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}
@media (min-width: 1024px) {
  .ct-hero {
    min-height: 520px;
    padding: 160px 48px 64px;
  }
  .ct-hero__line {
    font-size: clamp(80px, 9vw, 130px);
  }
  .ct-flow { padding: 0 48px; max-width: 980px; margin-left: auto; margin-right: auto; }
  .ct-quick { padding: 56px 48px 32px; max-width: 980px; margin-left: auto; margin-right: auto; }
  .contact { max-width: none; }
}


/* ============================================================
   TÍTULO PRO — kicker fino + MALLORCA con sheen animado
   Estilo luxury naútico: una sola palabra dominando el hero,
   con un pase de luz horizontal cada ~5s que la atraviesa.
   ============================================================ */
/* ============================================================
   TÍTULO PRO — MALLORCA pequeño (location) + JETSKI EXPERIENCE protagonista
   Estilo luxury naútico: la oferta domina, el lugar contextualiza.
   ============================================================ */
.stage__loc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px 14px 6px 12px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.stage__loc__pin {
  color: #ffd83d;
  display: inline-flex;
  align-items: center;
  filter: drop-shadow(0 0 6px rgba(255,216,61,0.4));
}

/* ============================================================
   TÍTULO CINEMATOGRÁFICO ESTÁTICO
   Blanco sólido + peso reforzado + sombra navy profunda
   ============================================================ */
.stage__title-pro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px; /* JETSKI y EXPERIENCE casi pegados, como un solo bloque */
  margin: 0 0 12px; /* antes 22px */
  text-align: center;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  line-height: 0.92;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(14px);
  animation: tpReveal 1.2s var(--ease-out) forwards;
  animation-delay: calc((var(--d, 0) + 80) * 1ms);
}

/* JETSKI — protagonista con peso reforzado */
.stage__title-pro__l1 {
  display: inline-block;
  font-size: clamp(58px, 17vw, 160px);
  letter-spacing: -0.055em;
  white-space: nowrap;
  line-height: 1;
  color: #fff;
  font-weight: 700;
  -webkit-text-stroke: 1.2px #fff;
  text-shadow:
    0 2px 0 rgba(28, 35, 48, 0.95),
    0 4px 0 rgba(28, 35, 48, 0.85),
    0 8px 24px rgba(28, 35, 48, 0.9),
    0 14px 44px rgba(15, 22, 36, 0.85),
    0 20px 70px rgba(10, 16, 28, 0.75);
}

/* EXPERIENCE — integrado debajo de JETSKI, ocupa todo el ancho del título superior */
.stage__title-pro__l2 {
  display: inline-block;
  width: 100%;
  position: relative;
  margin-top: -4px; /* ligero solape para que se sienta parte del bloque */
}
.stage__title-pro__l2-txt {
  display: inline-block;
  /* Más pequeño y compacto */
  font-size: clamp(11px, 3.2vw, 22px);
  letter-spacing: clamp(0.25em, 1.4vw, 0.5em);
  padding-left: clamp(0.25em, 1.4vw, 0.5em);
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    0 1px 0 rgba(28, 35, 48, 0.9),
    0 4px 14px rgba(15, 22, 36, 0.7);
  white-space: nowrap;
  font-weight: 700;
  line-height: 1;
}

/* Línea dorada fina — sello premium */
.stage__title-pro__rule {
  display: block;
  width: clamp(48px, 10vw, 80px);
  height: 1.5px;
  margin-top: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 216, 61, 0.85) 30%,
    rgba(255, 216, 61, 1) 50%,
    rgba(255, 216, 61, 0.85) 70%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(255, 216, 61, 0.55);
}

/* Animación de entrada */
@keyframes tpReveal {
  0%   { opacity: 0; transform: translateY(24px) scale(0.94); filter: blur(12px); }
  60%  { opacity: 1; filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0) scale(1);       filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .stage__title-pro { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   QUICK BOOK — overlay cinematográfico
   ============================================================ */
.qb {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
}
.qb.is-open {
  pointer-events: auto;
  visibility: visible;
}
.qb__veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 24, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.qb.is-open .qb__veil { opacity: 1; }

/* Empujamos el hero hacia el fondo (parallax/zoom-out) cuando se abre */
.stage.qb-pushed {
  transform: scale(0.97);
  filter: blur(3px) brightness(0.6);
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.dock.qb-pushed,
.dock.qb-pushed * {
  pointer-events: none;
}
.dock.qb-pushed {
  /* !important: gana sobre la animación .fade-in del dock, que deja
     transform: translateY(0) tras completarse forwards. */
  transform: translateY(120%) !important;
  opacity: 0 !important;
  transition: transform 0.55s var(--ease-out), opacity 0.45s var(--ease-out);
}
/* Cuando el menú lateral está abierto: ocultamos el dock principal. El
   dock NO usa left:50%+translateX(-50%) (usa justify-content:center en
   contenedor con left:0;right:0), así que aquí basta con translateY +
   opacity. Decisión de TIM: con el menú desplegado el dock encima sobra
   y tapa la última tarjeta. */
body.menu-locked .dock {
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease-out);
}
body.menu-locked .dock * {
  pointer-events: none !important;
}
body.qb-locked { overflow: hidden; }

.qb__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Padding TOP compacto: header pegado arriba.
     Padding BOTTOM: reserva espacio para el dock contextual (~90px de
     alto incluyendo el botón circular protruyente) + safe-area + un pelín
     de respiro para la trust pill (~16px). En total ~100px en mobile
     normal, sin pasarse para que las cards aprovechen al máximo el alto. */
  padding: max(40px, calc(var(--safe-top, 0px) + 28px)) 16px max(108px, calc(var(--safe-bot, 0px) + 96px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.qb__head {
  /* Header limpio sin Tour Demo a la derecha (se movió al dock contextual
     del propio QB). Solo cerrar + textos.
     Añadida 3a columna 'chip' para el mini-chip del parte del día. */
  display: grid;
  grid-template-columns: 42px 1fr auto;
  grid-template-areas:
    "close kicker chip"
    "close title  chip";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  /* margin-bottom amplio: TIM pidió respiro entre header y cards. */
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.5s 0.15s var(--ease-out), transform 0.5s 0.15s var(--ease-out);
}
.qb.is-open .qb__head { opacity: 1; transform: translateY(0); }
.qb__head-slot {
  grid-area: chip;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.qb__close {
  grid-area: close;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.qb__close:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); }

.qb__head-text {
  display: contents;
}
.qb__kicker {
  grid-area: kicker;
  align-self: end;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 2px;
  color: #ffd83d;
  text-transform: uppercase;
}
.qb__title {
  grid-area: title;
  align-self: start;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}
.qb__demo-thumb { grid-area: thumb; }
/* Thumbnail vídeo demo — circular, autoplay loop, pulsando suave */
.qb__demo-thumb {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.qb__demo-thumb__ring {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 216, 61, 0.2);
  transition: transform 0.3s var(--ease-spring, cubic-bezier(.34,1.4,.64,1)), border-color 0.3s, box-shadow 0.3s;
  isolation: isolate;
}
.qb__demo-thumb:hover .qb__demo-thumb__ring {
  transform: scale(1.08);
  border-color: rgba(255, 216, 61, 0.95);
  box-shadow:
    0 0 0 1px rgba(255, 216, 61, 0.4),
    0 10px 28px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(255, 216, 61, 0.5);
}
.qb__demo-thumb__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.qb__demo-thumb__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
}
.qb__demo-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.qb__demo-thumb__play svg { margin-left: 1.5px; }
.qb__demo-thumb__pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  animation: qbThumbPulse 2.2s ease-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes qbThumbPulse {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}
.qb__demo-thumb__label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}
.qb__demo-thumb__cta {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.4px;
  color: #ffd83d;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
  transition: color 0.25s, letter-spacing 0.3s;
}
.qb__demo-thumb:hover .qb__demo-thumb__cta {
  letter-spacing: 1.7px;
  color: #ffe066;
}
@media (prefers-reduced-motion: reduce) {
  .qb__demo-thumb__pulse { animation: none; }
}

/* Cards de tour — stagger reveal cinematográfico.
   Wrapper .qb__cards crece para llenar el alto disponible del stage.
   Cada card es flex-grow:1 con clamp(min, ideal, max), así en pantallas
   altas las cards aprovechan el espacio que queda entre header y trust
   pill, y en pantallas pequeñas no se aplastan. */
.qb__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  /* Aire respecto a la trust pill que va debajo, sin estar pegado */
  margin-bottom: 12px;
}
.qb-card {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  color: #fff;
  /* Altura adaptativa: las cards crecen para repartir el espacio sobrante
     del stage QB. El mínimo asegura que no se aplasten en pantallas justas
     (iPhone SE), el máximo evita que en pantallas muy altas las cards se
     hagan desproporcionadas. */
  flex: 1 1 0;
  min-height: 175px;
  max-height: 280px;
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-spring, cubic-bezier(.34,1.4,.64,1)),
    border-color 0.3s;
  isolation: isolate;
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
  padding: 0;
}
.qb.is-open .qb-card[data-i="1"] { transition-delay: 0.28s; opacity: 1; transform: translateY(0) scale(1); }
.qb.is-open .qb-card[data-i="2"] { transition-delay: 0.42s; opacity: 1; transform: translateY(0) scale(1); }

/* Hover top cinematográfico:
   - Lift + scale del card
   - Parallax: el vídeo del background hace un zoom suave (1.08)
   - Halo dorado exterior expandido
   - Borde se ilumina */
.qb-card:hover {
  border-color: rgba(255, 216, 61, 0.65);
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 32px 70px -12px rgba(0, 0, 0, 0.75),
    0 14px 30px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(255, 216, 61, 0.22);
}
.qb-card:active {
  transform: translateY(-2px) scale(0.998);
  transition: transform 0.12s ease-out;
}
.qb-card:hover .qb-card__video,
.qb-card:hover .qb-card__media img {
  transform: scale(1.08);
}
/* Card FEATURED (Safary, el más popular) — destacada SIEMPRE,
   no solo en hover. Borde dorado constante + glow exterior sutil + ring interno. */
.qb-card--featured {
  border: 1.5px solid rgba(255, 216, 61, 0.7) !important;
  box-shadow:
    0 18px 44px -8px rgba(0, 0, 0, 0.55),
    0 8px 18px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(255, 216, 61, 0.18),
    inset 0 0 0 1px rgba(255, 216, 61, 0.15);
}
.qb-card--featured:hover {
  border-color: rgba(255, 216, 61, 1) !important;
  box-shadow:
    0 36px 80px -12px rgba(0, 0, 0, 0.78),
    0 16px 34px rgba(0, 0, 0, 0.55),
    0 0 100px rgba(255, 216, 61, 0.5),
    inset 0 0 0 1px rgba(255, 216, 61, 0.25);
}
.qb-card:focus-visible {
  outline: 2px solid rgba(255, 216, 61, 0.9);
  outline-offset: 4px;
}

.qb-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.qb-card__video,
.qb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(115%) contrast(105%);
  transition: transform 1.2s var(--ease-out);
}
.qb-card:hover .qb-card__video,
.qb-card:hover .qb-card__media img {
  transform: scale(1.05);
}
.qb-card__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.05) 20%,
      rgba(0,0,0,0.45) 50%,
      rgba(0,0,0,0.92) 100%);
}
.qb-card__top {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.qb-card__license {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 1.3px;
  padding: 5px 9px 5px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(74,222,128,0.45);
  color: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.qb-card__license::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.7);
}
.qb-card__num,
.qb-card__chip { display: none; }
/* Badge "MÁS POPULAR" — prominente, dorado con glow y pulse sutil
   para llamar la atención sin saturar. */
.qb-card__badge {
  position: absolute;
  top: 46px;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(180deg, #ffe066 0%, #ffd83d 100%);
  color: #1c2330;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.3px;
  padding: 5px 11px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow:
    0 8px 22px rgba(255, 216, 61, 0.55),
    0 0 24px rgba(255, 216, 61, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: badgePulse 2.6s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% {
    box-shadow:
      0 8px 22px rgba(255, 216, 61, 0.55),
      0 0 24px rgba(255, 216, 61, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
  50% {
    box-shadow:
      0 10px 26px rgba(255, 216, 61, 0.65),
      0 0 36px rgba(255, 216, 61, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
}
/* En hover de la card, el badge se "enciende" */
.qb-card--featured:hover .qb-card__badge {
  animation-play-state: paused;
  transform: scale(1.05);
  box-shadow:
    0 12px 32px rgba(255, 216, 61, 0.75),
    0 0 48px rgba(255, 216, 61, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}

.qb-card__body {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Duration ahora va en la fila superior derecha, no en el body */
.qb-card__duration {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 5px 11px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
}
.qb-card__duration b {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.qb-card__duration i {
  font-family: 'Syncopate', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.75);
}
.qb-card__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
/* Includes global — debajo del grid de cards, compartido por ambos tours */
/* Mini-pill garantía: todo incluido + sin licencia + confirmación instant */
.qb__guarantee {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s 0.5s var(--ease-out), transform 0.55s 0.5s var(--ease-out);
}
.qb.is-open .qb__guarantee { opacity: 1; transform: translateY(0); }
.qb__guarantee-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 11px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 216, 61, 0.32);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(255, 216, 61, 0.18);
}
.qb__guarantee-sparkle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffd83d;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255, 216, 61, 0.65));
  animation: qbSparkleGlow 3s ease-in-out infinite;
}
@keyframes qbSparkleGlow {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .qb__guarantee-sparkle { animation: none; }
}

/* ============================================================
   MINI-PILL GARANTÍA GLOBAL — debajo de las cards
   Consolidación de los 3 ticks de confianza en una sola línea
   compacta, evitando duplicar el chip "Todo incluido" dentro
   de cada card. Sigue el lenguaje visual de las otras pills
   del QB (glass dark + acento dorado sutil).
   ============================================================ */
.qb__trust {
  margin-top: 0;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s 0.55s var(--ease-out), transform 0.55s 0.55s var(--ease-out);
  flex-shrink: 0;
}
.qb.is-open .qb__trust { opacity: 1; transform: translateY(0); }
.qb__trust-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 216, 61, 0.32);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 999px;
  max-width: 100%;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(255, 216, 61, 0.14);
}
.qb__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.3px;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.qb__trust-item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #ffd83d;
  flex-shrink: 0;
}
.qb__trust-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 9px;
  line-height: 1;
  flex-shrink: 0;
}

/* Foot horizontal: precio (izquierda) + Ver ruta + RESERVAR (derecha).
   Ya no incluye el chip "Todo incluido" — pasó a la mini-pill global bajo las cards. */
.qb-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.qb-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.qb-card__price i {
  font-family: 'Syncopate', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
}
.qb-card__price b {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
}
/* Doble acción: ver ruta (izquierda, sutil) + reservar (derecha, protagonista) */
/* Price block: precio grande + chip "Todo incluido" debajo (jerarquía emocional) */
.qb-card__price-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Chip "Todo incluido" — pequeño y discreto, debajo del precio */
.qb-card__included {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  color: rgba(255, 216, 61, 0.95);
  background: rgba(28, 35, 48, 0.65);
  border: 1px solid rgba(255, 216, 61, 0.4);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.qb-card__included::before {
  content: '✓';
  font-weight: 700;
  font-size: 9px;
  color: #ffd83d;
  margin-right: 2px;
}

/* Actions wrapper en el foot: Ver ruta + flecha "go" */
.qb-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Botón "i" (información) — círculo pequeño discreto, va a la izquierda de Ver ruta.
   Abre overlay tipo Stories con la experiencia del tour. */
.qb-card__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    color 0.3s var(--ease-out),
    background 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.qb-card__info svg {
  flex-shrink: 0;
}
/* Shimmer dorado interno al hover, mismo lenguaje que Ver ruta */
.qb-card__info::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 0%, transparent 35%,
    rgba(255, 216, 61, 0.22) 50%,
    transparent 65%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}
.qb-card__info:hover::before {
  transform: translateX(100%);
}
.qb-card__info:hover {
  color: #ffd83d;
  background: rgba(28, 35, 48, 0.85);
  border-color: rgba(255, 216, 61, 0.7);
  transform: translateY(-2px) scale(1.08);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(255, 216, 61, 0.3);
}
.qb-card__info:active {
  transform: translateY(0) scale(0.95);
  transition: transform 0.1s ease-out;
}
.qb-card__info:focus-visible {
  outline: 2px solid rgba(255, 216, 61, 0.85);
  outline-offset: 3px;
}

/* Link "Ver ruta" — pill discreto sobre la card.
   Hover: el pill se ilumina con shimmer dorado interno, lift, glow exterior,
   borde dorado. Acción secundaria pero con identidad propia. */
.qb-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: 7px 9px;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    color 0.3s var(--ease-out),
    background 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s var(--ease-out);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* Shimmer dorado interno (línea de luz que cruza al hover) */
.qb-card__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 216, 61, 0.18) 50%,
    transparent 65%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}
.qb-card__link:hover::before {
  transform: translateX(100%);
}
.qb-card__link:hover {
  color: #ffd83d;
  background: rgba(28, 35, 48, 0.85);
  border-color: rgba(255, 216, 61, 0.7);
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(255, 216, 61, 0.25);
}
.qb-card__link:active {
  transform: translateY(0) scale(0.98);
  transition: transform 0.1s ease-out;
}
.qb-card__link:focus-visible {
  outline: 2px solid rgba(255, 216, 61, 0.85);
  outline-offset: 3px;
}

/* Botón "RESERVAR" — pill blanco compacto con SOLO texto.
   Decorativo (aria-hidden); la acción real está en el <button> de la card.
   Hover: pill se invierte a navy chilli con texto blanco. */
.qb-card__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f3f6 100%);
  color: #1c2330;
  flex-shrink: 0;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.95);
  transition:
    transform 0.4s var(--ease-spring),
    background 0.4s,
    box-shadow 0.4s,
    color 0.4s;
}
.qb-card__go-text {
  line-height: 1;
}
/* Featured: mismo aspecto que normal (blanco coherente, sin amarillos en estado base) */
.qb-card--featured .qb-card__go {
  background: linear-gradient(180deg, #ffffff 0%, #f0f3f6 100%);
  color: #1c2330;
}
/* Hover de la card: el pill se invierte a navy chilli + texto blanco */
.qb-card:hover .qb-card__go,
.qb-card--featured:hover .qb-card__go {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #232b3d 0%, #1c2330 100%);
  color: #ffffff;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 20px rgba(28, 35, 48, 0.4);
}

/* ============================================================
   MOBILE: entrada calmada del QB
   En desktop las animaciones cinematic (translateY + scale + stagger)
   funcionan bien con espacio holgado. En mobile, con todo apilado y
   pantalla pequeña, ese movimiento se percibe como "el texto baila"
   tras la apertura. Aquí neutralizamos los transforms y dejamos solo
   un fade-in suave conjunto. Las clases siguen activándose igual; el
   resultado visual es "aparece sin saltar".
   ============================================================ */
@media (max-width: 900px) {
  /* Head: sin translateY, solo fade */
  .qb__head {
    transform: none;
    transition: opacity 0.4s 0.05s var(--ease-out);
  }
  .qb.is-open .qb__head {
    transform: none;
  }

  /* Cards: sin translateY ni scale ni stagger, solo fade */
  .qb-card {
    transform: none;
    transition:
      opacity 0.45s var(--ease-out),
      border-color 0.3s;
  }
  .qb.is-open .qb-card[data-i="1"],
  .qb.is-open .qb-card[data-i="2"] {
    transition-delay: 0.1s;
    transform: none;
  }

  /* Trust pill: sin translateY */
  .qb__trust {
    transform: none;
    transition: opacity 0.4s 0.15s var(--ease-out);
  }
  .qb.is-open .qb__trust {
    transform: none;
  }
}

/* ============================================================
   QB DOCK CONTEXTUAL — sustituye al dock principal mientras el
   QB está abierto. Tres acciones rápidas:
   - Info Tour (izquierda)
   - Tour Demo (botón circular protruyente al centro)
   - WhatsApp (derecha)
   Decisión de TIM: el dock principal sobra dentro del QB; aquí
   acompañamos al usuario con acciones del propio contexto.
   ============================================================ */
.qb-dock {
  position: absolute;
  left: 50%;
  bottom: max(10px, var(--safe-bot, 0px));
  transform: translateX(-50%);
  z-index: 5;
  /* Solo visible cuando el QB está abierto. La aparición/desaparición
     se controla desde el padre .qb (ver más abajo). */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s 0.2s var(--ease-out), transform 0.5s 0.2s var(--ease-out);
  transform: translateX(-50%) translateY(20px);
}
.qb.is-open .qb-dock {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.qb-dock__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(28, 35, 48, 0.78);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow:
    0 18px 44px -10px rgba(0, 0, 0, 0.7),
    0 8px 18px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* Ancho mínimo para que el dock contextual tenga presencia incluso si
     los labels son cortos. */
  min-width: min(360px, calc(100vw - 32px));
}

/* Acciones laterales: icono + label vertical */
.qb-dock__side {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 64px;
  padding: 6px 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-spring, cubic-bezier(.34,1.4,.64,1)), color 0.2s;
}
.qb-dock__side:active { transform: scale(0.94); }
.qb-dock__side svg { flex-shrink: 0; }
.qb-dock__side-label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
@media (hover: hover) {
  .qb-dock__side:hover { color: #fff; transform: translateY(-2px); }
  .qb-dock__side:hover .qb-dock__side-label { color: #fff; }
}

/* WhatsApp: mismo blanco que el resto del dock (TIM: el verde llamaba
   demasiado la atención y rompía la jerarquía con el botón principal). */
.qb-dock__side--wa { color: rgba(255, 255, 255, 0.92); }
.qb-dock__side--wa .qb-dock__side-label { color: rgba(255, 255, 255, 0.75); }
@media (hover: hover) {
  .qb-dock__side--wa:hover { color: #fff; }
  .qb-dock__side--wa:hover .qb-dock__side-label { color: #fff; }
}

/* Botón principal central: redondo, blanco, protruyente — muestra el
   thumbnail del vídeo demo dentro, igual que el antiguo thumb del header
   pero a mayor tamaño y como CTA inequívoco. */
.qb-dock__primary {
  position: relative;
  width: 76px;
  height: 76px;
  /* Antes -22px: el botón protruía 22px hacia arriba del dock.
     Ahora -28px para subirlo un poco más (TIM: el label TOUR DEMO se
     pegaba al botón, mejor algo de aire entre ring y label). */
  margin-top: -28px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* gap entre el thumb y el label TOUR DEMO. Subido de 4 a 7 para que el
     label respire mejor sin estar pegado al ring. */
  gap: 7px;
  transition: transform 0.35s var(--ease-spring, cubic-bezier(.34,1.4,.64,1));
}
.qb-dock__primary:active { transform: scale(0.95); }
@media (hover: hover) {
  .qb-dock__primary:hover { transform: translateY(-3px) scale(1.03); }
}

.qb-dock__primary-ring {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  border: 2.5px solid #fff;
  box-shadow:
    0 12px 30px -6px rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(28, 35, 48, 0.7),
    0 0 24px rgba(255, 216, 61, 0.3);
  isolation: isolate;
}
.qb-dock__primary-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(120%) contrast(108%);
}
.qb-dock__primary-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.45) 100%);
}
.qb-dock__primary-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px; /* corrige óptica del triángulo */
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.qb-dock__primary-label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

/* Desktop: 2 cards lado a lado */
@media (min-width: 901px) {
  .qb__stage {
    padding: max(96px, calc(var(--safe-top, 0px) + 72px)) 48px max(110px, calc(var(--safe-bot, 0px) + 100px));
    max-width: 1240px;
    margin: 0 auto;
  }
  /* Desktop: vuelve a 1 fila — kicker y título apilados en el centro */
  .qb__head {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "close kicker thumb"
      "close title thumb";
    column-gap: 16px;
    margin-bottom: 28px;
  }
  .qb__demo-thumb { align-self: center; }
  .qb__cards {
    flex-direction: row;
    gap: 22px;
  }
  .qb-card {
    height: 380px;
    flex: 1 1 0;
  }
  .qb-card__title { font-size: 34px; }
  .qb-card__price b { font-size: 32px; }
  .qb-card__link { font-size: 10px; letter-spacing: 1.5px; }
  .qb-card__book { font-size: 11px; padding: 11px 8px 11px 18px; }
  .qb-card__book-arrow { width: 28px; height: 28px; }
  .qb-card__body { bottom: 28px; left: 28px; right: 28px; gap: 14px; }
  .qb__demo-thumb__ring { width: 64px; height: 64px; }
  .qb__demo-thumb__play { width: 26px; height: 26px; }
  .qb__demo-thumb__play svg { width: 13px; height: 13px; }
  .qb__demo-thumb__kicker { font-size: 8px; letter-spacing: 1.8px; }
  .qb__demo-thumb__sub { font-size: 10px; }
  .qb__guarantee { margin-top: 24px; }
  .qb__guarantee-pill { font-size: 10px; padding: 11px 20px 11px 14px; letter-spacing: 1.4px; }
}

/* ============================================================
   TOUR DETAIL — segundo nivel: mapa animado + galería + cta
   ============================================================ */
.td {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  visibility: hidden;
}
.td.is-open { pointer-events: auto; visibility: visible; }
.td__veil {
  position: absolute;
  inset: 0;
  background: rgba(8,14,24,0.65);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
}
.td.is-open .td__veil { opacity: 1; }

.td__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Padding TOP: margen claro al notch + barra del navegador.
     Padding BOTTOM: pequeño porque el .td-foot es sticky y ya ocupa
     espacio visual al final del scroll. */
  padding: max(88px, calc(var(--safe-top, 0px) + 72px)) 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* En iOS, con body en overflow:hidden, el touch en el contenedor scrolleable
     puede propagarse al body y dar sensación de "no se mueve". touch-action y
     overscroll-behavior aseguran que el gesto vertical se quede dentro del TD. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s 0.1s var(--ease-out), transform 0.55s 0.1s var(--ease-out);
}
.td.is-open .td__stage { opacity: 1; transform: translateY(0); }

/* HEADER del detail */
.td__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.td__back {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.td__back:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); }
.td__head-text {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.td__kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.8px;
  color: #ffd83d;
  text-transform: uppercase;
}
.td__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}
.td__price {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  white-space: nowrap;
}
.td__price i {
  font-family: 'Syncopate', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
}
.td__price b {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

/* BLOQUE MAPA */
.td-map {
  position: relative;
  width: 100%;
  height: clamp(320px, 56vh, 480px);
  flex-shrink: 0;
  overflow: hidden;
  margin: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.td-map__bg {
  position: absolute; inset: 0; z-index: 0;
}
.td-map__bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* Tiramos a la derecha en mobile: sacrificamos tierra del oeste para que
     la costa, mar y ruta completa entren en pantalla sin recortarse a la
     derecha (donde están los chips de salida, Palmanova, Isla Sa Porrasa
     y Cala del Mago). */
  object-position: right center;
  filter: saturate(105%) brightness(0.85) contrast(105%);
}
.td-map__bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.32) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.38) 100%);
}
.td-map__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}
/* Rutas del mapa: 2 grupos de paths (uno por tour).
   El JS añade .is-discovery o .is-safari a .td-map según el tour activo. */
.td-map__route {
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
  transition: opacity 0.4s var(--ease-out);
}
/* Por defecto (sin clase): mostrar ambas? No — mostrar la Safary completa
   como fallback seguro si el JS no se ejecuta. */
.td-map__route[data-route="discovery"] {
  opacity: 0;
  pointer-events: none;
}
.td-map.is-discovery .td-map__route[data-route="safari"] {
  opacity: 0;
  pointer-events: none;
}
.td-map.is-discovery .td-map__route[data-route="discovery"] {
  opacity: 1;
  pointer-events: auto;
}
.td-map.is-safari .td-map__route[data-route="safari"] {
  opacity: 1;
  pointer-events: auto;
}
.td-map.is-safari .td-map__route[data-route="discovery"] {
  opacity: 0;
  pointer-events: none;
}
.td-map__marker {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.td-map__marker.is-visible {
  opacity: 1;
}
.td-map__connector {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.td-map__connector.is-visible {
  opacity: 1;
}

/* Cala Vinyes pulse: visible solo cuando el mapa está en modo Discovery
   (Cala Vinyes es el destino final del tour de 30 min). El SVG <animate>
   sobreescribe opacity, por eso usamos display none/block para controlarlo. */
.td-map__pulse-vinyes {
  display: none;
}
.td-map.is-discovery .td-map__pulse-vinyes {
  display: block;
}

/* BLOQUE GALERÍA */
.td-gallery {
  padding: 28px 0 24px;
}
.td-gallery__head {
  padding: 0 18px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.td-gallery__kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.td-gallery__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #fff;
}
.td-gallery__scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 18px 14px;
  scrollbar-width: none;
}
.td-gallery__scroll::-webkit-scrollbar { display: none; }

/* ============================================================
   TIMELINE DE LA RUTA (estilo About) — paradas + fotos intercaladas
   ============================================================ */
.td-route {
  list-style: none;
  margin: 0;
  padding: 0 22px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
/* Línea vertical que conecta todas las paradas */
.td-route::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(255,216,61,0.4) 0%,
    rgba(255,216,61,0.15) 50%,
    rgba(255,216,61,0.5) 100%);
  z-index: 0;
}

/* Cada parada: número + cuerpo (kicker, título, descripción) */
.td-stop {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  text-align: left;
}
.td-stop__num {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(28,35,48,0.95);
  border: 1px solid rgba(255,216,61,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #ffd83d;
  position: relative;
  z-index: 1;
}
.td-stop__num--end {
  background: #ffd83d;
  border-color: #ffd83d;
  box-shadow: 0 0 0 4px rgba(255,216,61,0.18),
              0 8px 18px -4px rgba(255,216,61,0.5);
}
.td-stop__num--end svg { display: block; }
.td-stop__body {
  flex: 1;
  min-width: 0;
}
.td-stop__kicker {
  display: block;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 1.8px;
  color: rgba(255,216,61,0.75);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.td-stop__kicker--end { color: #ffd83d; }
.td-stop__title {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: #fff;
  margin: 0 0 5px;
  text-transform: uppercase;
  line-height: 1.15;
}
.td-stop__desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
  margin: 0;
}
.td-stop--end .td-stop__title { color: #ffd83d; }

/* Foto panorámica intercalada entre paradas */
.td-route__photo {
  list-style: none;
  position: relative;
  margin: 14px 0 14px 52px;
  aspect-ratio: 16 / 7;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0a0f19;
}
.td-route__photo img,
.td-route__photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.td-route__photo:hover img,
.td-route__photo:hover video { transform: scale(1.04); }
/* Cala del Mago: la acción del vídeo (jetski + acantilados) está en el
   tercio superior del frame vertical 720x1280. Sin esto, el cover de un
   contenedor 16/7 recortaba el centro y mostraba solo agua. */
.td-route__photo--mago video {
  object-position: center 32%;
}
/* Sombra interior sutil para integrar con el flujo */
.td-route__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10,15,25,0.15) 0%,
    transparent 25%,
    transparent 75%,
    rgba(10,15,25,0.25) 100%);
}



/* FOOTER: CTA RESERVAR — sticky bottom para acompañar toda la ruta */
.td-foot {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 10px 18px max(14px, calc(var(--safe-bot, 0px) + 10px));
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  /* Fondo translúcido degradado: lo de arriba se difumina con el contenido,
     abajo opaco para legibilidad del botón */
  background: linear-gradient(180deg,
    rgba(10,15,25,0) 0%,
    rgba(10,15,25,0.85) 35%,
    rgba(10,15,25,0.95) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.td-foot__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 9px 9px 18px;
  background: #ffffff;
  color: #1c2330;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  /* Auto-ancho compacto, no a todo el ancho — look app */
  width: auto;
  max-width: 100%;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5),
              0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.3s var(--ease-spring, cubic-bezier(.34,1.4,.64,1)),
              box-shadow 0.3s,
              background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.td-foot__cta:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.55),
              0 4px 12px rgba(0,0,0,0.35);
}
.td-foot__cta:active {
  transform: scale(0.97);
}
.td-foot__cta-label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: clamp(9.5px, 2.4vw, 11px);
  letter-spacing: 0.8px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  color: #1c2330;
}
.td-foot__cta-price {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 15px);
  white-space: nowrap;
  flex-shrink: 0;
  color: #1c2330;
  /* Separador sutil antes del precio */
  padding-left: 12px;
  border-left: 1px solid rgba(28,35,48,0.15);
}
.td-foot__cta-arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #1c2330;
  border: none;
  color: #ffffff;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring, cubic-bezier(.34,1.4,.64,1));
}
.td-foot__cta:hover .td-foot__cta-arrow {
  transform: translateX(3px);
}
.td-foot__cta-arrow svg { width: 13px; height: 13px; }
.td-foot__note {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
.td-foot__note svg { color: #4ade80; width: 12px; height: 12px; }

/* DESKTOP */
@media (min-width: 901px) {
  .td__stage {
    max-width: 1240px;
    margin: 0 auto;
    padding: max(96px, calc(var(--safe-top, 0px) + 72px)) 36px 0;
  }
  .td__head {
    padding: 0 0 22px;
  }
  .td-map {
    margin: 22px auto 0;
    border-radius: 22px;
    height: auto;
    aspect-ratio: 1100 / 887;
    max-height: 65vh;
    max-width: 640px;
    width: 100%;
  }
  .td-map__bg img {
    object-fit: cover;
    object-position: center;
  }
  .td-gallery { padding: 36px 0 28px; }
  .td-gallery__head { padding: 0; margin-bottom: 22px; }
  .td-gallery__scroll {
    padding: 4px 0 18px;
    gap: 16px;
  }
  .td-stop { width: 320px; max-width: none; aspect-ratio: 3 / 4; }
  .td-foot {
    padding: 18px 0 max(36px, calc(var(--safe-bot, 0px) + 36px));
    flex-direction: column;
    align-items: center;
  }
  .td-foot__cta {
    max-width: 560px;
    width: 100%;
    padding: 22px 28px;
  }
  .td-foot__cta-label { font-size: 14px; }
  .td-foot__cta-price { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .td__stage, .td-map__marker, .td-map__route { transition: none !important; animation: none !important; }
  .td-map__marker { opacity: 1; transform: scale(1); }
  .td-map__route { stroke-dashoffset: 0 !important; }
}

/* ============================================================
   RESERVE OVERLAY — tercer nivel · Turitop embebido
   ============================================================ */
.rv {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  /* IMPORTANTE: el contenedor NUNCA se oculta (ni opacity, visibility, display).
     Turitop necesita poder ver y dimensionar sus widgets desde el primer momento
     para que iframes y popups funcionen al activarse. Los hijos visuales
     (.rv__veil y .rv__stage) sí se animan con opacity. */
}
.rv.is-open {
  pointer-events: auto;
}
.rv__veil {
  position: absolute;
  inset: 0;
  background: rgba(8,14,24,0.72);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.rv.is-open .rv__veil { opacity: 1; pointer-events: auto; }

/* Stage: SIEMPRE dentro del viewport (no usamos transform translateY que saca del viewport).
   Solo usamos opacity para mostrarlo/ocultarlo. Esto es CRÍTICO: Turitop necesita
   poder calcular dimensiones reales dentro del viewport para inicializar widgets.
   Mismo patrón que .bk-modal__panel de reservar.html. */
.rv__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: max(72px, calc(var(--safe-top, 0px) + 56px)) 18px max(28px, calc(var(--safe-bot, 0px) + 28px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}
/* Forzar bloqueo de eventos en TODOS los descendientes cuando .rv está cerrado.
   Sin esto, el widget de Turitop (que se inyecta dinámicamente con pe:auto)
   captura clicks sobre el QB y bloquea la apertura del segundo tour. */
.rv:not(.is-open) .rv__stage,
.rv:not(.is-open) .rv__stage * {
  pointer-events: none !important;
}
.rv.is-open .rv__stage {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ============================================================
   RV HEAD — app móvil clean: back · [chip duración + título] · chip precio blanco
   ============================================================ */
.rv__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 18px;
  flex-wrap: nowrap;
}
.rv__back {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s, border-color 0.25s;
}
.rv__back:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  transform: translateX(-2px);
}
.rv__head-text {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}

/* Chip de duración — pill blanco translúcido sobre fondo navy.
   Va ARRIBA del título del tour, da contexto inmediato del producto. */
.rv__duration-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.rv__duration-chip svg {
  color: rgba(255, 255, 255, 0.85);
}

.rv__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 5.6vw, 28px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Price chip — CUADRO BLANCO compacto arriba a la derecha del header.
   Estilo apps móviles premium: la "tag" de precio destaca por contraste. */
.rv__price-chip {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 8px 14px 9px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 14px;
  white-space: nowrap;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,1);
}
.rv__price-chip i {
  font-family: 'Syncopate', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 7.5px;
  letter-spacing: 1.3px;
  color: rgba(28, 35, 48, 0.55);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 3px;
}
.rv__price-chip b {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0;
  color: #1c2330;
  line-height: 1;
}

/* TRUST BADGES — ahora 4 ticks (Sin licencia · Confirmación instantánea · Cancelación 24h · Pago seguro)
   Textos cortos para que quepan en grid 4 columnas en mobile. */
.rv__trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 2px;
  padding: 12px 6px;
  /* Reubicado: ahora va DEBAJO del widget de Turitop, como cierre de
     confianza tras ver el calendario. Antes tenía margin-bottom para
     separarlo del widget; ahora necesita margin-top y un margen inferior
     menor (es el último elemento del modal). */
  margin-top: 14px;
  margin-bottom: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.rv__trust-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 7px;
  letter-spacing: 0.7px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  padding: 0 2px;
}
.rv__trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #f0f3f6 100%);
  color: #1c2330;
  flex-shrink: 0;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

/* ========================================================================
   QUICKLINKS — Accesos rápidos a info del tour desde la pantalla de reserva.
   Para clientes que pulsaron RESERVAR sin haber visto antes los detalles
   (vídeo del tour, ficha completa, ruta y calas). Sin estos enlaces se
   podrían perder por falta de info en la pantalla del calendario.
   ======================================================================== */
.rv__quicklinks {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 2px 0 16px;
}
/* Eyebrow: hairline editorial que ancla la tira en el flujo de reserva.
   Texto corto + línea fina a la derecha → se lee como sección, no como
   3 botones sueltos pegados encima del calendario. */
.rv__quicklinks-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  padding-left: 2px;
}
.rv__quicklinks-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
}

/* Tira unificada: UN solo contenedor glass (mismo lenguaje que .rv__trust).
   Los 3 accesos son segmentos internos separados por hairlines → componente
   integrado, no botones flotantes. */
.rv__qlrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  overflow: hidden;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.rv__qlink {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 70px;
  padding: 13px 6px 12px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  /* Entrada escalonada al abrir la reserva */
  opacity: 0;
  transform: translateY(8px);
}
.rv__qlink:first-child { border-left: none; }

/* Acento dorado superior que crece desde el centro en hover/active */
.rv__qlink::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, rgba(255,216,61,0.2), #ffd83d, rgba(255,216,61,0.2));
  transform: translateX(-50%);
  transition: width 0.25s var(--ease-out);
}
.rv__qlink:hover,
.rv__qlink:focus-visible {
  background: rgba(255, 216, 61, 0.08);
  color: #ffd83d;
  outline: none;
}
.rv__qlink:hover::before,
.rv__qlink:focus-visible::before { width: 56%; }
.rv__qlink:active { transform: scale(0.96); }

.rv__qlink-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  flex-shrink: 0;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.rv__qlink:hover .rv__qlink-icon,
.rv__qlink:focus-visible .rv__qlink-icon {
  background: linear-gradient(180deg, #ffe066 0%, #ffd83d 100%);
  border-color: rgba(255, 216, 61, 0.6);
  color: #1c2330;
  box-shadow: 0 4px 12px rgba(255,216,61,0.28), inset 0 1px 0 rgba(255,255,255,0.6);
}

.rv__qlink-label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.6px;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  max-width: 100%;
}

/* Reveal escalonado de los 3 accesos cuando se abre el overlay de reserva */
.rv.is-open .rv__qlink {
  animation: rvQlinkIn 0.5s var(--ease-out) forwards;
}
.rv.is-open .rv__qlink:nth-child(1) { animation-delay: 0.14s; }
.rv.is-open .rv__qlink:nth-child(2) { animation-delay: 0.2s; }
.rv.is-open .rv__qlink:nth-child(3) { animation-delay: 0.26s; }
@keyframes rvQlinkIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rv__qlink { opacity: 1; transform: none; }
  .rv.is-open .rv__qlink { animation: none; }
}

/* ------------------------------------------------------------------
   Overlays lanzados DESDE la pantalla de reserva (quicklinks).
   El overlay de reserva (.rv) vive en z-index:100; el Tour Detail (.td)
   está en z:95 → sin esto el mapa se abriría DETRÁS de la reserva y
   parecería que el botón no hace nada. Al abrirse desde la reserva les
   subimos el z-index por encima de TODO para que se vean correctamente.
   ------------------------------------------------------------------ */
.td.is-from-rv,
.ti.is-from-rv,
.dv.is-from-rv { z-index: 260 !important; }

/* Widget container — marco premium con sombras cinematic.
   El gradiente sutil del fondo da profundidad sin ensuciar el calendario blanco. */
.rv__widget {
  flex: 0 0 auto;
  margin-top: 4px;
  /* Navy chilli ligeramente más claro que el modal exterior — crea sensación
     de "card premium contenedora" sin romper la coherencia visual.
     El gradient añade profundidad sutil top→bottom. */
  background: linear-gradient(180deg, #232b3d 0%, #1c2330 100%);
  border-radius: 22px;
  padding: 20px;
  min-height: 440px;
  position: relative;
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.6),
    0 12px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* Patrón idéntico a reservar.html (.bk-modal__widget):
   los 2 widgets se apilan con position absolute, opacity y visibility
   para que Turitop pueda inicializar ambos al cargar la página. */
.rv__widget-tour {
  min-height: 440px;
  position: relative;
}
.rv__widget-tour:not(.is-active) {
  position: absolute;
  inset: 20px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.rv__widget-tour.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.rv__widget-tour .load-turitop {
  min-height: 440px;
  background: transparent;
}
/* Loading state — spinner blanco con acento dorado sobre fondo navy */
.rv__widget-tour.is-active .load-turitop:empty::before {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  margin: 200px auto 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: #ffd83d;
  animation: rvSpin 0.9s linear infinite;
}
.rv__widget-tour.is-active .load-turitop:empty::after {
  content: 'Cargando calendario';
  display: block;
  margin: 14px auto 0;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}
.rv__loading {
  display: none; /* Lo gestiona ::empty::before/::after del widget activo */
}
@keyframes rvSpin {
  to { transform: rotate(360deg); }
}

/* DESKTOP */
@media (min-width: 901px) {
  .rv__stage {
    max-width: 980px;
    margin: 0 auto;
    padding: max(96px, calc(var(--safe-top, 0px) + 72px)) 36px max(36px, calc(var(--safe-bot, 0px) + 36px));
  }
  .rv__head { padding: 0 0 22px; }
  .rv__widget {
    margin-top: 24px;
    padding: 28px;
    min-height: 420px;
  }
}

/* ============================================================
   TOUR INFO OVERLAY — Stories full-screen con la experiencia
   ============================================================
   Estructura:
   - Overlay full-screen sobre el resto de UI (z-index 110, encima del DV)
   - Header: progress bars (6 segmentos) + close
   - Tap zones invisibles izquierda/derecha para navegar
   - Slides apilados con position absolute, transición opacity+scale
   - Cada slide: background full-bleed + gradient + contenido bottom-aligned
   - Slide 6 (final) tiene CTA RESERVAR que dispara apertura del RV
   ============================================================ */
.ti {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  visibility: hidden;
}
.ti.is-open {
  pointer-events: auto;
  visibility: visible;
}
.ti__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.ti.is-open .ti__veil { opacity: 1; }

.ti__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1c2330;
  overflow: hidden;
  transform: scale(1.05);
  opacity: 0;
  transition: transform 0.45s var(--ease-spring), opacity 0.35s var(--ease-out);
}
.ti.is-open .ti__stage {
  transform: scale(1);
  opacity: 1;
}

/* Mobile-first: ocupa toda la pantalla.
   Desktop: contenedor vertical centrado tipo móvil para mantener proporción Stories. */
@media (min-width: 901px) {
  .ti__stage {
    max-width: 440px;
    margin: 0 auto;
    height: min(90vh, 880px);
    inset: 50% 0 0;
    transform: translateY(-50%) scale(1.05);
    border-radius: 28px;
    box-shadow: 0 30px 100px rgba(0,0,0,0.75);
  }
  .ti.is-open .ti__stage {
    transform: translateY(-50%) scale(1);
  }
}

/* ---- Header: progress bars + close ---- */
.ti__topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 0;
  padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 12px));
}
.ti__progress {
  flex: 1;
  display: flex;
  gap: 4px;
}
.ti__progress-seg {
  flex: 1;
  height: 2.5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
}
.ti__progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
}
/* Segmento ya completado (anterior al activo) */
.ti__progress-seg.is-complete .ti__progress-fill {
  width: 100%;
}
/* Segmento activo: anima de 0 → 100% en `--ti-duration` (definido por JS) */
.ti__progress-seg.is-active .ti__progress-fill {
  width: 100%;
  transition: width var(--ti-duration, 6.5s) linear;
}
/* Pausa: detener la animación congelando el width actual */
.ti.is-paused .ti__progress-seg.is-active .ti__progress-fill {
  transition: none;
}
.ti__close {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.ti__close:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.05);
}

/* ---- Tap zones (invisibles): izquierda anterior, derecha siguiente ---- */
.ti__tap {
  position: absolute;
  top: 70px;
  bottom: 0;
  width: 35%;
  z-index: 3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ti__tap--left { left: 0; }
.ti__tap--right { right: 0; width: 65%; }

/* ---- Slides container ---- */
.ti__slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ti__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0s 0.4s;
}
.ti__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease-out), visibility 0s 0s;
}

/* Background fotografía con Ken Burns sutil cuando activo */
.ti__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ti__bg img,
.ti__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 8s linear;
}
.ti__slide.is-active .ti__bg img,
.ti__slide.is-active .ti__bg video {
  transform: scale(1.18);
}
.ti__bg-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 35, 48, 0.55) 0%,
    rgba(28, 35, 48, 0.25) 30%,
    rgba(28, 35, 48, 0.65) 60%,
    rgba(28, 35, 48, 0.95) 90%,
    #1c2330 100%);
}
.ti__bg-grad--strong {
  background: linear-gradient(180deg,
    rgba(28, 35, 48, 0.75) 0%,
    rgba(28, 35, 48, 0.55) 30%,
    rgba(28, 35, 48, 0.85) 60%,
    rgba(28, 35, 48, 0.98) 90%,
    #1c2330 100%);
}

/* ---- Slide content ---- */
.ti__content {
  position: relative;
  z-index: 2;
  padding: 0 24px max(34px, env(safe-area-inset-bottom)) 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: #fff;
}
.ti__num {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: rgba(255, 216, 61, 0.85);
  margin-bottom: -2px;
}

.ti__kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.ti__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 7vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #fff;
}

.ti__desc {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 36ch;
}

.ti__note {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  max-width: 36ch;
}

/* Animaciones de entrada del contenido: usamos opacity+translateY con transition
   reaplicada cada vez que la slide se vuelve active. Entrada cohesiva y suave:
   delays muy cortos y juntos para que el bloque aparezca como una unidad, sin
   el efecto escalonado/retrasado anterior. */
.ti__slide .ti__num,
.ti__slide .ti__kicker,
.ti__slide .ti__title,
.ti__slide .ti__desc,
.ti__slide .ti__note,
.ti__slide .ti__highlight,
.ti__slide .ti__specs,
.ti__slide .ti__list-item,
.ti__slide .ti__route,
.ti__slide .ti__moment,
.ti__slide .ti__cta-wrap {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.ti__slide.is-active .ti__num         { opacity: 1; transform: translateY(0); transition-delay: 0.04s; }
.ti__slide.is-active .ti__kicker      { opacity: 1; transform: translateY(0); transition-delay: 0.07s; }
.ti__slide.is-active .ti__title       { opacity: 1; transform: translateY(0); transition-delay: 0.10s; }
.ti__slide.is-active .ti__desc        { opacity: 1; transform: translateY(0); transition-delay: 0.13s; }
.ti__slide.is-active .ti__highlight,
.ti__slide.is-active .ti__specs,
.ti__slide.is-active .ti__route,
.ti__slide.is-active .ti__moment,
.ti__slide.is-active .ti__cta-wrap    { opacity: 1; transform: translateY(0); transition-delay: 0.16s; }
.ti__slide.is-active .ti__note        { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.ti__slide.is-active .ti__list-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.ti__slide.is-active .ti__list-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.ti__slide.is-active .ti__list-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.21s; }

/* ---- Slide 1: highlight pill (Importante: llega 30 min antes) ---- */
.ti__highlight {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 12px 14px;
  background: rgba(255, 216, 61, 0.14);
  border: 1px solid rgba(255, 216, 61, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ti__highlight-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #ffd83d;
  color: #1c2330;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ti__highlight-text {
  display: flex; flex-direction: column; gap: 1px;
}
.ti__highlight-label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 216, 61, 0.85);
}
.ti__highlight-value {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
  line-height: 1.25;
}

/* ---- Slide 2: specs grid (cv / plazas / edad) ---- */
.ti__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.ti__spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ti__spec-value {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}
.ti__spec-value i {
  font-style: normal;
  font-size: 11px;
  color: rgba(255, 216, 61, 0.95);
  margin-left: 1px;
}
.ti__spec-label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- Slide 3: lista con ticks ---- */
.ti__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ti__list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
}
.ti__list-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 216, 61, 0.18);
  color: #ffd83d;
  font-family: 'Syncopate', sans-serif;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- Slide 4: route stops horizontal ---- */
/* (El estilo del chip de ruta de la slide 4 está unificado más abajo,
   en la sección "ROUTE timeline (slide 4)", para evitar conflictos.) */

/* ---- Slide 5: moment pill ---- */
.ti__moment {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ti__moment-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe066 0%, #ffd83d 100%);
  color: #1c2330;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(255, 216, 61, 0.35);
}
.ti__moment-text {
  display: flex; flex-direction: column; gap: 2px;
}
.ti__moment-label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 216, 61, 0.85);
}
.ti__moment-value {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  line-height: 1.25;
}

/* ---- Slide 6 (final): CTA reserva ---- */
.ti__content--final {
  gap: 14px;
}
.ti__cta-wrap {
  width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ti__cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, #ffe066 0%, #ffd83d 100%);
  color: #1c2330;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 14px 32px rgba(255, 216, 61, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.ti__cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 40px rgba(255, 216, 61, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ti__cta:active {
  transform: translateY(0) scale(0.98);
}
.ti__cta-hint {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Reduced motion: quitar animaciones */
@media (prefers-reduced-motion: reduce) {
  .ti__stage, .ti__veil, .ti__slide, .ti__bg img, .ti__bg video,
  .ti__num, .ti__kicker, .ti__title, .ti__desc, .ti__note,
  .ti__highlight, .ti__specs, .ti__list-item, .ti__route,
  .ti__moment, .ti__cta-wrap, .ti__route-dot {
    animation: none !important;
    transition: opacity 0.2s linear, visibility 0s !important;
  }
}

.dv {
  position: fixed;
  inset: 0;
  z-index: 105;
  pointer-events: none;
  visibility: hidden;
}
.dv.is-open {
  pointer-events: auto;
  visibility: visible;
}
.dv__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.dv.is-open .dv__veil { opacity: 1; }

.dv__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: max(72px, calc(var(--safe-top, 0px) + 56px)) 16px max(28px, calc(var(--safe-bot, 0px) + 28px));
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  transition:
    opacity 0.55s 0.1s var(--ease-out),
    transform 0.6s 0.1s var(--ease-out);
}
.dv.is-open .dv__stage {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* LIVE pill (top-left) — replica de reservar.html */
/* Esquina superior izquierda: contenedor con LIVE pill + Sonido prominente */
.dv__topleft {
  position: absolute;
  top: max(22px, calc(var(--safe-top, 0px) + 18px));
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.dv__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  color: #fff;
}
.dv__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 8px rgba(255, 59, 48, 0.7);
  animation: dvLivePulse 1.5s ease-in-out infinite;
}
@keyframes dvLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Cerrar (top-right) */
.dv__close {
  position: absolute;
  top: max(22px, calc(var(--safe-top, 0px) + 18px));
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dv__close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.06);
}

/* Reproductor de vídeo */
.dv__player {
  position: relative;
  flex: 1;
  margin: 14px 0 14px;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  isolation: isolate;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Wrapper del video principal: en mobile ocupa todo, en desktop tiene aspect 9:16 */
.dv__main {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dv__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Video de fondo blureado: oculto en mobile, visible en desktop */
.dv__video-bg {
  display: none;
}
.dv__player-bg-veil {
  display: none;
}
.dv__player-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%);
  z-index: 3;
}

/* Pie: solo caption (el sonido se movió arriba a dv__topleft) */
.dv__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 4px 0;
}
.dv__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
}
.dv__caption-kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.8px;
  color: #ffd83d;
  text-transform: uppercase;
}
.dv__caption-txt {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2;
}

/* Sonido — pill posicionada DENTRO del video, arriba izquierda */
.dv__sound {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 216, 61, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  color: #fff;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(255, 216, 61, 0.25);
}
.dv__sound:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 216, 61, 0.85);
  transform: scale(1.03);
}
.dv__sound.is-on {
  background: #ffd83d;
  border-color: #ffd83d;
  color: #1a1a1a;
  box-shadow: 0 0 20px rgba(255, 216, 61, 0.55);
}
.dv__sound-icon {
  display: inline-flex;
  align-items: center;
}

/* Desktop: video centrado con fondo blureado para máxima inmersión */
@media (min-width: 901px) {
  .dv__stage {
    /* Stage a pantalla completa (sin max-width) para que el bg blureado cubra los lados */
    padding: max(90px, calc(var(--safe-top, 0px) + 72px)) 36px max(36px, calc(var(--safe-bot, 0px) + 36px));
    max-width: none;
  }
  .dv__topleft { top: 30px; left: 36px; gap: 10px; }
  .dv__close { top: 24px; right: 36px; width: 48px; height: 48px; }
  .dv__player {
    margin: 18px 0 18px;
    border-radius: 26px;
    /* El video principal mantiene aspect ratio 9:16 centrado */
  }
  /* En desktop, el wrapper del video principal toma aspect 9:16 centrado */
  .dv__main {
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 20px 60px rgba(0, 0, 0, 0.7),
      0 0 80px rgba(0, 0, 0, 0.4);
  }
  /* Video principal: rellena el wrapper completo */
  .dv__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
  }
  /* Video de fondo: extendido a todo el contenedor con blur fuerte */
  .dv__video-bg {
    display: block;
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    filter: blur(40px) saturate(140%) brightness(0.7);
    transform: scale(1.2);
    z-index: 0;
    opacity: 1;
    pointer-events: none;
  }
  /* Veil sutil sobre el bg para profundidad sin matar la imagen */
  .dv__player-bg-veil {
    display: block;
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at center,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.25) 60%,
        rgba(0,0,0,0.5) 100%);
    z-index: 1;
    pointer-events: none;
  }
  .dv__player-vignette {
    /* Ya no hace falta vignette interno: el bg-veil lo hace */
    display: none;
  }
  .dv__caption-txt { font-size: 18px; }
  .dv__caption-kicker { font-size: 10px; letter-spacing: 2px; }
  .dv__sound { font-size: 10px; padding: 8px 16px; }
}


/* ============================================================================
   TOUR INFO OVERLAY (TI) — Stories cinematográficas full-screen
   ----------------------------------------------------------------------------
   Patrón estilo Instagram/Snapchat: slides a pantalla completa, progress bars
   arriba, tap zones para nav (izq=prev, der=next), swipe horizontal, hold para
   pausar autoavance. Cada slide es UNA idea de la experiencia CHILLI.
   ============================================================================ */
.ti {
  position: fixed;
  inset: 0;
  z-index: 250;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.ti.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s var(--ease-out);
}
/* Cuando NO está abierto, forzar todos los descendientes a no interceptar clicks
   (algunos hijos tienen pointer-events: auto explícito para hover, los neutralizamos) */
.ti:not(.is-open),
.ti:not(.is-open) * {
  pointer-events: none !important;
}
.ti__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ti__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- TOP BAR (progress + close) ---------------------------------------- */
.ti__topbar {
  position: absolute;
  top: max(12px, var(--safe-top, 0px));
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}
.ti__progress {
  flex: 1;
  display: flex;
  gap: 4px;
}
.ti__progress-seg {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.ti__progress-fill {
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: translateX(-100%);
  border-radius: 999px;
}
/* Segmento del slide anterior: barra llena (sin animación) */
.ti__progress-seg.is-done .ti__progress-fill {
  transform: translateX(0);
}
/* Segmento del slide actual: animado linear con la duración del slide */
.ti__progress-seg.is-active .ti__progress-fill {
  animation: tiFill 6s linear forwards;
}
.ti.is-paused .ti__progress-seg.is-active .ti__progress-fill {
  animation-play-state: paused;
}
/* El último slide (CTA) no auto-avanza, se queda llena */
.ti__progress-seg.is-active.is-cta .ti__progress-fill {
  animation: none;
  transform: translateX(0);
}
@keyframes tiFill {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
.ti__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.2s;
}
.ti__close:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.06);
}

/* ---- TAP ZONES (izquierda anterior, derecha siguiente) ----------------- */
.ti__tap {
  position: absolute;
  top: 60px;
  bottom: 100px;
  width: 30%;
  z-index: 5;
  cursor: pointer;
}
.ti__tap--left  { left: 0; }
.ti__tap--right { right: 0; }

/* ---- SLIDES ------------------------------------------------------------- */
.ti__slides {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
}
.ti__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.06);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.7s var(--ease-out),
    visibility 0s linear 0.5s;
  pointer-events: none;
}
.ti__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition:
    opacity 0.5s var(--ease-out),
    transform 6s ease-out, /* zoom Ken Burns sutil mientras dura el slide */
    visibility 0s;
  pointer-events: auto;
}
/* Ken Burns: el slide activo se hace zoom lentamente para sensación cinemática */
.ti__slide.is-active.is-zooming {
  transform: scale(1.08);
}

/* ---- BG image + gradient overlay --------------------------------------- */
.ti__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ti__bg img,
.ti__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.8s ease-out;
}
.ti__slide.is-active .ti__bg img,
.ti__slide.is-active .ti__bg video {
  animation: tiKenBurns 7s ease-out forwards;
}
@keyframes tiKenBurns {
  from { transform: scale(1.04) translateY(0); }
  to   { transform: scale(1.12) translateY(-1.5%); }
}
.ti__bg-grad {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.15) 25%,
      rgba(0, 0, 0, 0.55) 65%,
      rgba(0, 0, 0, 0.92) 100%);
}
.ti__bg-grad--strong {
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.45) 30%,
      rgba(28, 35, 48, 0.8) 70%,
      rgba(28, 35, 48, 1) 100%);
}

/* ---- CONTENT (slide text body) ----------------------------------------- */
.ti__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 24px max(44px, calc(var(--safe-bot, 0px) + 32px));
  z-index: 6;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ti__slide.is-active .ti__content > * {
  animation: tiContentIn 0.7s var(--ease-out) backwards;
}
.ti__slide.is-active .ti__content > *:nth-child(1) { animation-delay: 0.1s; }
.ti__slide.is-active .ti__content > *:nth-child(2) { animation-delay: 0.2s; }
.ti__slide.is-active .ti__content > *:nth-child(3) { animation-delay: 0.3s; }
.ti__slide.is-active .ti__content > *:nth-child(4) { animation-delay: 0.4s; }
.ti__slide.is-active .ti__content > *:nth-child(5) { animation-delay: 0.5s; }
@keyframes tiContentIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ti__num {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2.4px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: -4px;
}
.ti__kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 2px;
  color: #ffd83d;
  text-transform: uppercase;
}
.ti__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 7vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.ti__desc {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  max-width: 540px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ---- HIGHLIGHT box (slide 1: importante) ------------------------------- */
.ti__highlight {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 216, 61, 0.12);
  border: 1px solid rgba(255, 216, 61, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  margin-top: 6px;
  pointer-events: auto;
}
.ti__highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe066 0%, #ffd83d 100%);
  color: #1c2330;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255, 216, 61, 0.4);
}
.ti__highlight-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ti__highlight-label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #ffd83d;
  text-transform: uppercase;
}
.ti__highlight-value {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #ffffff;
  line-height: 1.3;
}

/* ---- SPECS grid (slide 2: la moto) ------------------------------------- */
.ti__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
  pointer-events: auto;
}
.ti__spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ti__spec-value {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #ffffff;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.ti__spec-value i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #ffd83d;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.ti__spec-label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  text-align: center;
}
.ti__note {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

/* ---- LIST (slide 3: briefing) ------------------------------------------ */
.ti__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ti__list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}
.ti__list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe066 0%, #ffd83d 100%);
  color: #1c2330;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(255, 216, 61, 0.35);
}

/* ---- ROUTE timeline (slide 4): mini-timeline vertical limpia ----------- */
.ti__route {
  display: block;
  margin-top: 10px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* El dot suelto del HTML ya no se usa como elemento aparte: cada parada
   lleva su propio punto. Lo ocultamos para no romper el layout. */
.ti__route > .ti__route-dot {
  display: none;
}
.ti__route-stops {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
/* Línea vertical que conecta los puntos */
.ti__route-stops::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 1.5px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.28), rgba(255,216,61,0.5));
}
.ti__route-stop {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  position: relative;
  padding: 5px 0 5px 20px;
  line-height: 1.2;
}
/* Punto de cada parada, centrado sobre la línea */
.ti__route-stop::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(28, 35, 48, 0.6);
}
.ti__route-stop--end {
  color: #ffd83d;
  font-size: 11px;
  letter-spacing: 1.4px;
}
.ti__route-stop--end::before {
  background: #ffd83d;
  box-shadow: 0 0 10px rgba(255, 216, 61, 0.6), 0 0 0 3px rgba(28, 35, 48, 0.6);
}

/* ---- MOMENT box (slide 5) ---------------------------------------------- */
.ti__moment {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-top: 6px;
}
.ti__moment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 216, 61, 0.18);
  color: #ffd83d;
  flex-shrink: 0;
  border: 1px solid rgba(255, 216, 61, 0.4);
}
.ti__moment-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ti__moment-label {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #ffd83d;
  text-transform: uppercase;
}
.ti__moment-value {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #ffffff;
  line-height: 1.3;
}

/* ---- CTA final (slide 6) ----------------------------------------------- */
.ti__content--final {
  padding-bottom: max(64px, calc(var(--safe-bot, 0px) + 48px));
}
.ti__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
  pointer-events: auto;
}
.ti__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(180deg, #ffe066 0%, #ffd83d 100%);
  color: #1c2330;
  border: none;
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 14px 32px rgba(255, 216, 61, 0.45),
    0 0 30px rgba(255, 216, 61, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.ti__cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 38px rgba(255, 216, 61, 0.6),
    0 0 44px rgba(255, 216, 61, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ti__cta:active {
  transform: translateY(0) scale(0.98);
}
.ti__cta-hint {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  text-transform: uppercase;
}

/* ---- Botón info en QB card (al lado izquierdo de Ver ruta) ------------- */
.qb-card__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    color 0.3s var(--ease-out),
    background 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.qb-card__info:hover {
  color: #ffd83d;
  background: rgba(28, 35, 48, 0.85);
  border-color: rgba(255, 216, 61, 0.7);
  transform: translateY(-2px) scale(1.08);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.4),
    0 0 14px rgba(255, 216, 61, 0.3);
}
.qb-card__info:active {
  transform: translateY(0) scale(0.94);
}
.qb-card__info:focus-visible {
  outline: 2px solid rgba(255, 216, 61, 0.85);
  outline-offset: 3px;
}

/* ---- DESKTOP: ajustes (overlay con max-width central) ------------------ */
@media (min-width: 901px) {
  .ti__stage {
    max-width: 520px;
    height: min(90vh, 920px);
    margin: 5vh auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  }
  .ti__content {
    padding: 32px 30px 40px;
  }
}

/* ---- Body lock cuando TI está abierto --------------------------------- */
body.ti-locked {
  overflow: hidden;
}

/* ---- Reduce motion: animaciones desactivadas --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ti__slide, .ti__bg img, .ti__progress-fill, .ti__content > * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   PARTE DEL DÍA — meteorología + índice CHILLI
   ------------------------------------------------------------
   Estructura:
     - Tile en el menú (.mtile-parte) con chip dinámico arriba
     - Mini-chip en el qb__head (.qb-parte-chip)
     - Overlay completo (.parte) con hero card del día + strip 5 días
   ============================================================ */

/* ============================
   Chips de estado (compartido)
   ============================ */
.parte-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.parte-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
/* Estados — el color del dot y un borde sutil */
.parte-chip--chilli { color: #ffd83d; border-color: rgba(255, 216, 61, 0.45); }
.parte-chip--chilli .parte-chip__dot { box-shadow: 0 0 10px rgba(255, 216, 61, 0.7); animation: parteDot 2.2s ease-in-out infinite; }
.parte-chip--perfect { color: #4ade80; border-color: rgba(74, 222, 128, 0.45); }
.parte-chip--perfect .parte-chip__dot { box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); }
.parte-chip--light { color: #a3e635; border-color: rgba(163, 230, 53, 0.45); }
.parte-chip--light .parte-chip__dot { box-shadow: 0 0 7px rgba(163, 230, 53, 0.5); }
.parte-chip--caution { color: #fb923c; border-color: rgba(251, 146, 60, 0.45); }
.parte-chip--caution .parte-chip__dot { box-shadow: 0 0 7px rgba(251, 146, 60, 0.5); }
.parte-chip--alert { color: #ef4444; border-color: rgba(239, 68, 68, 0.5); }
.parte-chip--alert .parte-chip__dot { box-shadow: 0 0 9px rgba(239, 68, 68, 0.7); animation: parteDot 1.4s ease-in-out infinite; }

.parte-chip--lg {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 1.4px;
}
.parte-chip__txt { color: #fff; }

@keyframes parteDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.8; }
}

/* ============================
   Tile en el menú (.mtile-parte)
   ============================ */
.mtile-parte {
  position: relative;
  /* Fondo poster del jet aerial: si el vídeo tarda en cargar (móvil sin
     wifi, primera visita, autoplay restricciones iOS), se ve la imagen
     en lugar de margen negro. */
  background:
    url('/assets/img/parte/parte-poster.webp') center / cover no-repeat,
    #0a2a35;
}
.mtile-parte__chip-slot {
  /* Slot reservado por compatibilidad pero ya NO se inyecta chip (v61) */
  display: none;
}

/* ============================
   Mini-chip en QB head
   ============================ */
/* (El estilo de .qb__head-slot ya está definido en el bloque del QB.
   Aquí solo definimos el chip clicable.) */
.qb-parte-chip {
  /* Botón clicable con icono meteo + label + estado + chevron */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 8px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #fff;
  transition: transform 0.25s var(--ease-out), border-color 0.25s, background 0.25s, box-shadow 0.25s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  /* Microanimación: pulso muy sutil del borde dorado para insinuar
     que es interactivo. Solo en estados "buenos", no en alert. */
  animation: qbChipPulse 3.5s ease-in-out infinite;
}
@keyframes qbChipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 61, 0); }
  50% { box-shadow: 0 0 0 3px rgba(255, 216, 61, 0.12); }
}
.qb-parte-chip.parte-chip--alert { animation: none; }
.qb-parte-chip:active { transform: scale(0.95); }
@media (hover: hover) {
  .qb-parte-chip:hover {
    border-color: rgba(255, 216, 61, 0.6);
    background: rgba(0, 0, 0, 0.75);
    transform: translateY(-1px);
  }
  .qb-parte-chip:hover .qb-parte-chip__chev {
    transform: translateX(2px);
  }
}
.qb-parte-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: currentColor;
  flex-shrink: 0;
}
.qb-parte-chip__txt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1;
  min-width: 0;
}
.qb-parte-chip__label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 7.5px;
  letter-spacing: 1.4px;
}
.qb-parte-chip__state {
  color: currentColor;
  font-size: 9.5px;
  letter-spacing: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.qb-parte-chip__chev {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.25s var(--ease-out), opacity 0.25s;
  color: currentColor;
}
/* Apply state colors to chip */
.qb-parte-chip.parte-chip--chilli { color: #ffd83d; border-color: rgba(255, 216, 61, 0.45); }
.qb-parte-chip.parte-chip--perfect { color: #4ade80; border-color: rgba(74, 222, 128, 0.45); }
.qb-parte-chip.parte-chip--light { color: #a3e635; border-color: rgba(163, 230, 53, 0.4); }
.qb-parte-chip.parte-chip--caution { color: #fb923c; border-color: rgba(251, 146, 60, 0.5); }
.qb-parte-chip.parte-chip--alert { color: #ef4444; border-color: rgba(239, 68, 68, 0.55); }


/* ============================================================
   Overlay del parte — diseño card hero + strip 5 días
   ------------------------------------------------------------
   El vídeo aerial va DENTRO de la card del día actual (no de fondo
   completo). La card del día es generosa, con object-fit: cover para
   que no se vean márgenes negros. Strip 5 días debajo. Footer al pie.
   El stage del overlay tiene scroll si el contenido excede en mobile.
   ============================================================ */

.parte {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.parte.is-open {
  pointer-events: auto;
  opacity: 1;
}
.parte__veil {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 25, 0.95);
}
.parte__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0a0f19;
  transform: translateY(100%);
  transition: transform 0.55s var(--ease-out, cubic-bezier(.22,1,.36,1));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.parte.is-open .parte__stage {
  transform: translateY(0);
}
body.parte-open { overflow: hidden; }

/* HEAD */
.parte__head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 14px;
  padding: max(18px, calc(var(--safe-top, 0px) + 14px)) 16px 12px;
  background: linear-gradient(180deg, rgba(10,15,25,0.95) 0%, rgba(10,15,25,0.7) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.parte__close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, transform 0.2s;
}
.parte__close:hover { background: rgba(255, 255, 255, 0.14); }
.parte__close:active { transform: scale(0.92); }
.parte__heading { min-width: 0; }
.parte__heading .kicker {
  display: block;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  color: #ffd83d;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.parte__heading h2 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  letter-spacing: -0.015em;
}

/* BODY */
.parte__body {
  padding: 16px 16px max(80px, calc(var(--safe-bot, 0px) + 60px));
}

/* Loading + error */
.parte__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.parte__spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #ffd83d;
  border-radius: 50%;
  animation: parteSpinner 0.8s linear infinite;
}
@keyframes parteSpinner { to { transform: rotate(360deg); } }
.parte__error-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 24px;
  text-align: center;
  min-height: 40vh;
  justify-content: center;
}
.parte__error {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  max-width: 320px;
}
.parte__error-detail {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}
.parte__retry {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  background: rgba(255, 216, 61, 0.15);
  border: 1.5px solid rgba(255, 216, 61, 0.5);
  border-radius: 999px;
  color: #ffd83d;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, transform 0.2s;
}
.parte__retry:active { transform: scale(0.96); }

/* HERO CARD: día actual con vídeo de fondo */
.parte-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  /* Fondo de respaldo: si el vídeo tarda en cargar, se ve el poster
     (no negro). Imprescindible para evitar márgenes negros mientras
     el browser baja el .mp4. */
  background:
    url('/assets/img/parte/parte-hero-poster.webp') center / cover no-repeat,
    #0a2a35;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
  isolation: isolate;
  /* Vídeo nuevo 9:16 (720x1280) sobre card 3:4 → cover llena perfecto */
  aspect-ratio: 3 / 4;
  min-height: 420px;
  max-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.parte-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.parte-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(118%) contrast(106%);
  animation: parteHeroKB 22s ease-in-out infinite alternate;
}
@keyframes parteHeroKB {
  from { transform: scale(1.04); }
  to { transform: scale(1.16); }
}
.parte-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.2) 35%,
    rgba(0,0,0,0.65) 75%,
    rgba(0,0,0,0.92) 100%);
}
.parte-hero__content {
  position: relative;
  z-index: 2;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.parte-hero__date {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.parte-hero__chip-wrap { display: flex; }
.parte-hero .parte-chip--lg {
  background: rgba(0, 0, 0, 0.6);
  border-width: 1.5px;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 1.5px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.parte-hero__desc {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
/* Glow dorado animado en estado CHILLI */
.parte-hero[data-state="chilli"]::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 216, 61, 0.18) 0%, rgba(255, 216, 61, 0) 70%);
  pointer-events: none;
  z-index: 1;
  animation: parteHeroGlow 4s ease-in-out infinite alternate;
}
@keyframes parteHeroGlow {
  from { opacity: 0.55; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

/* Métricas en franja glass dentro del hero */
.parte-hero__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 4px 0;
  padding: 12px 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.parte-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  margin: 0;
}
.parte-metric dt {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}
.parte-metric dd {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.parte-metric dd small {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

/* CTA dorado */
.parte-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  background: #ffd83d;
  color: #1c2330;
  border-radius: 999px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 4px;
  align-self: stretch;
  box-shadow:
    0 14px 28px -10px rgba(255, 216, 61, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.3s var(--ease-spring, cubic-bezier(.34,1.4,.64,1));
  -webkit-tap-highlight-color: transparent;
}
.parte-cta:active { transform: scale(0.97); }
@media (hover: hover) {
  .parte-cta:hover { transform: translateY(-2px); }
}
.parte-hero[data-state="alert"] ~ .parte-cta,
.parte-hero[data-state="alert"] .parte-cta {
  background: #ef4444;
  color: #fff;
}

/* STRIP de 5 días */
.parte-strip {
  margin-bottom: 18px;
}
.parte-strip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 4px;
}
.parte-strip__head .kicker {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  color: #ffd83d;
  text-transform: uppercase;
}
.parte-strip__head h3 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.2px;
}
.parte-strip__scroll {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.parte-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease-out),
              transform 0.45s var(--ease-spring, cubic-bezier(.34,1.4,.64,1)),
              border-color 0.25s, background 0.25s;
  font: inherit;
  color: inherit;
  text-align: center;
}
.parte-day.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: hover) {
  .parte-day:hover {
    border-color: var(--accent, rgba(255,216,61,0.5));
    background: rgba(255, 255, 255, 0.08);
  }
}
.parte-day:active { transform: scale(0.96); }
.parte-day__name {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.75);
}
.parte-day__waves {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
}
.parte-day__temp {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.parte-day__state {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 7px;
  letter-spacing: 0.6px;
  color: var(--accent, rgba(255, 255, 255, 0.7));
  text-transform: uppercase;
  line-height: 1.15;
}

/* Footer mini */
.parte__foot {
  text-align: center;
  margin-top: 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.2px;
}
.parte__foot span + span::before {
  content: ' · ';
  margin: 0 4px;
}

/* Responsive: tablet/desktop */
@media (min-width: 720px) {
  .parte__body {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 32px max(80px, calc(var(--safe-bot, 0px) + 60px));
  }
  .parte-hero {
    aspect-ratio: 16 / 9;
    min-height: 380px;
    max-height: 560px;
  }
  .parte-hero__content { padding: 28px; }
  .parte-hero__desc { font-size: 16px; }
  .parte-metric dd { font-size: 22px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .parte-hero__video,
  .parte-hero[data-state="chilli"]::before,
  .parte-chip__dot {
    animation: none !important;
  }
}

/* ============================================================================
   EXPLORA — bottom sheet cinematográfico (dock "Tours")
   ============================================================================ */
.explore {
  position: fixed;
  inset: 0;
  z-index: 130; /* por encima del dock (110) */
  visibility: hidden;
  pointer-events: none;
}
.explore.is-open {
  visibility: visible;
  pointer-events: auto;
}
.explore__veil {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.45s var(--ease-out), backdrop-filter 0.45s var(--ease-out);
}
.explore.is-open .explore__veil {
  background: rgba(5, 8, 16, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.explore__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #1c2330 0%, #141a25 100%);
  border-radius: 28px 28px 0 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
  padding: 12px 16px max(28px, calc(var(--safe-bot, 0px) + 22px));
  transform: translateY(110%);
  transition: transform 0.5s var(--ease-spring, cubic-bezier(.34,1.2,.64,1));
  max-width: 560px;
  margin: 0 auto;
}
.explore.is-open .explore__sheet {
  transform: translateY(0);
}
.explore__handle {
  display: block;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  border: none;
  margin: 0 auto 16px;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s;
}
.explore__handle:hover { background: rgba(255,255,255,0.4); }
.explore__head {
  text-align: center;
  margin-bottom: 16px;
}
.explore__kicker {
  display: inline-block;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 2.5px;
  color: #ffd83d;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.explore__title {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 5vw, 24px);
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.explore__grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.explore__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Tarjetas */
.xtile {
  position: relative;
  display: block;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  text-align: left;
  background: #0a0f19;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s var(--ease-spring, cubic-bezier(.34,1.2,.64,1)),
              border-color 0.3s;
  /* Entrada escalonada */
  opacity: 0;
  transform: translateY(18px);
}
.explore.is-open .xtile {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-spring, cubic-bezier(.34,1.2,.64,1));
}
.explore.is-open .xtile--hero { transition-delay: 0.08s; }
.explore.is-open .explore__row .xtile:nth-child(1) { transition-delay: 0.16s; }
.explore.is-open .explore__row .xtile:nth-child(2) { transition-delay: 0.22s; }

.xtile:active { transform: scale(0.97); }
@media (hover: hover) {
  .xtile:hover {
    border-color: rgba(255,216,61,0.4);
    transform: translateY(-3px);
  }
  .xtile:hover .xtile__media { transform: scale(1.06); }
}
.xtile--hero { aspect-ratio: 16 / 8; }
.xtile--half { aspect-ratio: 3 / 3.2; }
.xtile__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
/* El vídeo del Info Tour (full-gas) es vertical: la acción/cabezas están en
   la franja media. Encuadramos a 45% para ver las personas completas. */
.xtile--hero .xtile__media {
  object-position: center 45%;
}
.xtile__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,15,25,0.1) 0%,
    rgba(10,15,25,0.35) 45%,
    rgba(10,15,25,0.9) 100%);
}
.xtile__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 2;
}
.xtile__chip {
  align-self: flex-start;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #1c2330;
  background: #ffd83d;
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.xtile__title {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 3.6vw, 18px);
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.1;
}
.xtile--half .xtile__title { font-size: clamp(13px, 3.4vw, 15px); }
.xtile__sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.72);
}
.xtile--half .xtile__sub { font-size: 10.5px; }
.xtile__arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  transition: background 0.25s, transform 0.25s;
}
.xtile--half .xtile__arrow { width: 28px; height: 28px; top: 12px; right: 12px; }
.xtile__arrow--gold {
  background: #ffd83d;
  border-color: #ffd83d;
  color: #1c2330;
}
@media (hover: hover) {
  .xtile:hover .xtile__arrow { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .explore__sheet, .xtile, .xtile__media { transition: none !important; }
  .xtile { opacity: 1 !important; transform: none !important; }
}