/* ============================================================
   MALIBU PARTY BOAT — SITIO PÚBLICO v2
   Cambios frente a v1: espacio fluido en toda la composición,
   y una capa de atmósfera cálida (atardecer + cáusticas de agua)
   que aporta el clima caribeño sin tocar los colores de la interfaz.
   ============================================================ */

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }

section { position: relative; }

/* Aire de sección, fluido: apretado en móvil, amplio en escritorio */
.band        { padding: var(--band) 0; }
.band--tight { padding: var(--band-sm) 0; }

/* ── Horizonte ──
   Línea de separación entre secciones. No es un borde: es la
   línea donde el mar toca el cielo al atardecer. */
.band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,138,61,0.26) 20%,
    rgba(45,224,194,0.38) 50%,
    rgba(255,138,61,0.26) 80%,
    transparent);
}
.band::after {
  content: ''; position: absolute; top: -70px; left: 12%; right: 12%; height: 70px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,138,61,0.10), transparent 72%);
  pointer-events: none;
}

/* ============================================================
   ATMÓSFERA
   ============================================================ */

/* Dos soles suaves que van a la deriva muy lentamente.
   Se anima transform (barato para la GPU), no los degradados. */
.ambient { position: fixed; inset: -25%; pointer-events: none; z-index: 0; overflow: hidden; }
.ambient::before, .ambient::after {
  content: ''; position: absolute; inset: 0;
  will-change: transform;
}
.ambient::before {
  background:
    radial-gradient(760px 520px at 16% 6%,  rgba(255,107,107,0.16), transparent 62%),
    radial-gradient(680px 600px at 84% 14%, rgba(255,138,61,0.13), transparent 62%);
  animation: drift-a 34s var(--ease-out) infinite alternate;
}
.ambient::after {
  background:
    radial-gradient(900px 700px at 70% 78%, rgba(45,224,194,0.13), transparent 64%),
    radial-gradient(620px 520px at 24% 88%, rgba(255,194,77,0.08), transparent 62%);
  animation: drift-b 46s var(--ease-out) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(3.5%, 2.5%, 0) scale(1.09); } }
@keyframes drift-b { to { transform: translate3d(-3%, -2%, 0) scale(1.07); } }

/* Cáusticas: la luz que se dibuja sobre el agua. Muy tenue —
   se siente antes de que se vea. */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.grain::before {
  content: ''; position: absolute; inset: -10%;
  opacity: 0.16; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007 0.021' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.88 0 0 0 0 0.76 0 0 0 -2.3 1.28'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23c)'/%3E%3C/svg%3E");
  animation: caustics 26s linear infinite alternate;
}
@keyframes caustics { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }

/* Grano de película, encima de todo */
.grain::after {
  content: ''; position: absolute; inset: 0; opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 2; }

/* ============================================================
   RITMO TIPOGRÁFICO
   ============================================================ */
.kicker {
  font-family: var(--data); font-size: var(--t-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lagoon);
  display: flex; align-items: center; gap: var(--s3);
}
.kicker::before {
  content: ''; width: 26px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--lagoon), transparent);
}

.h-display {
  font-family: var(--display); font-weight: 800;
  line-height: 0.94; letter-spacing: -0.028em; text-transform: uppercase;
  text-wrap: balance;
}
.h-section {
  font-family: var(--display); font-weight: 700; font-size: var(--t-2xl);
  line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance;
  max-width: 20ch;
}
.kicker + .h-section { margin-top: var(--s4); }
.lede { color: var(--haze); font-size: var(--t-lg); max-width: 56ch; line-height: 1.62; }

/* Encabezado de sección → contenido */
.h-section + .exp-grid,
.h-section + .faq-list,
.h-section + .reviews { margin-top: var(--stack); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s4) var(--gut);
  background: rgba(4,16,27,0.42);
  backdrop-filter: blur(20px) saturate(1.35);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.nav[data-stuck="true"] {
  background: rgba(4,16,27,0.93);
  border-bottom-color: var(--line);
  padding-top: var(--s3); padding-bottom: var(--s3);
}
.nav-brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--sand); }
.nav-mark {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  background: linear-gradient(140deg, var(--flare), var(--sunset) 55%, var(--lagoon));
}
.nav-word { font-family: var(--display); font-weight: 800; font-size: 15.5px; letter-spacing: 0.01em; line-height: 1; }
.nav-word span { display: block; font-family: var(--data); font-weight: 400; font-size: var(--t-2xs); letter-spacing: 0.14em; color: var(--faint); margin-top: 4px; }

.nav-links { display: flex; gap: var(--s6); list-style: none; margin-left: auto; }
.nav-links .nav-cta { display: none; }
.nav-links a {
  color: var(--haze); text-decoration: none; font-size: var(--t-sm); font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
  position: relative; transition: color var(--dur) var(--ease);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--flare), var(--sunset));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--sand); }
.nav-links a:hover::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); }

.nav-tools { display: flex; align-items: center; gap: var(--s3); }

.lang { display: flex; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.lang button {
  border: 0; background: none; cursor: pointer; color: var(--faint);
  font-family: var(--data); font-size: var(--t-2xs); letter-spacing: 0.1em;
  min-height: 44px; min-width: 46px; padding: 0 14px; border-radius: var(--r-pill);
  transition: all var(--dur) var(--ease);
}
.lang button[aria-pressed="true"] { background: rgba(245,239,227,0.14); color: var(--sand); font-weight: 700; }

.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: none; border-radius: var(--r-sm); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.burger i { display: block; width: 17px; height: 1.5px; background: var(--sand); transition: transform var(--dur) var(--ease), opacity var(--dur); }
/* nth-of-type, no nth-child: el primer hijo del botón es el
   <span class="sr"> para lectores de pantalla, así que nth-child(1)
   apuntaba a él y la X salía como una sola raya. */
.burger[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-of-type(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-of-type(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s6); border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.005em;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Relleno profundo: es el único tono donde el blanco pasa 4.5:1 */
.btn-flare { background: var(--flare-deep); color: #fff; box-shadow: var(--glow-flare); }
.btn-flare:hover:not(:disabled) {
  background: var(--flare-dk); transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,61,113,0.5), 0 16px 44px rgba(255,61,113,0.4);
}
.btn-ghost { border-color: var(--line-hi); color: var(--sand); background: rgba(245,239,227,0.04); }
.btn-ghost:hover:not(:disabled) { background: rgba(245,239,227,0.09); border-color: var(--sand); }
.btn-lagoon { background: var(--lagoon); color: #03130F; font-weight: 700; }
.btn-lagoon:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--glow-lagoon); }
.btn-sm { min-height: 44px; padding: 0 var(--s5); font-size: var(--t-xs); }
.btn-block { width: 100%; }

/* ============================================================
   PORTADA
   ============================================================ */
.hero {
  padding: calc(104px + var(--band-sm)) 0 clamp(72px, 9vh, 132px);
  min-height: min(86svh, 780px); display: flex; align-items: flex-end;
}
.hero-media {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(168deg, #0A2138, #04101B 62%);
}
/* La foto se ve de verdad. Antes iba al 36% bajo un velo denso:
   pagabas el peso de la imagen sin que aportara nada. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
/* Velo frío a la izquierda para que el titular se lea, y una
   franja cálida abajo: el sol que acaba de bajar. */
/* La foto manda. El velo ya no es una cortina de lado a lado —
   eso apagaba la imagen entera para proteger una columna de texto.
   Ahora la foto va casi limpia y el texto lleva SU PROPIO velo,
   una mancha suave que lo sigue y no toca el resto del encuadre. */
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,16,27,0.66) 0%, rgba(4,16,27,0.12) 16%, transparent 30%),
    linear-gradient(0deg,   var(--ink) 0%, rgba(4,16,27,0.80) 14%, rgba(4,16,27,0.30) 32%, transparent 52%),
    linear-gradient(96deg,
      rgba(4,16,27,0.93) 0%,
      rgba(4,16,27,0.90) 33%,
      rgba(4,16,27,0.62) 47%,
      rgba(4,16,27,0.18) 66%,
      transparent 80%);
}
@media (max-width: 1040px) {
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(4,16,27,0.86) 0%, rgba(4,16,27,0.74) 26%,
      rgba(4,16,27,0.86) 58%, var(--ink) 94%);
  }
}

/* Panel esmerilado en vez de un velo difuso.
   Medido: con el degradado radial, detrás del titular quedaban
   píxeles de #EE9167 — contraste 2.06, ilegible. Un velo suave no
   es fiable porque depende de qué foto suban. El panel garantiza
   el fondo pase lo que pase, y deja el resto del encuadre limpio. */
.hero-copy {
  position: relative; min-width: 0; max-width: 560px;
  /* Sin panel: el texto se apoya en el degradado y en su propia
     sombra. Menos cortina, mas barco. */
  text-shadow: 0 2px 20px rgba(4,16,27,0.6), 0 1px 3px rgba(4,16,27,0.5);
}

@media (max-width: 1040px) {
  /* Apilado, el titular queda sobre el centro de la foto */
  .hero-media img { opacity: 0.85; }
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(4,16,27,0.62) 0%, rgba(4,16,27,0.30) 26%,
      rgba(4,16,27,0.72) 58%, var(--ink) 92%);
  }
  .hero-title { overflow-wrap: anywhere; }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  gap: clamp(36px, 4.5vw, 72px);
}

.hero-title { font-size: var(--t-3xl); margin: var(--s4) 0 var(--s5); }
.hero-title .l { display: block; }
.hero-title .l-3 {
  font-family: var(--data); font-weight: 700;
  font-size: 0.36em; letter-spacing: 0.02em;
  background: linear-gradient(96deg, var(--lagoon), var(--mango));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--lagoon);
  margin-top: var(--s4);
}
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.hero-proof {
  display: flex; gap: clamp(20px, 2.6vw, 40px); flex-wrap: wrap;
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.proof-n {
  font-family: var(--data); font-weight: 700; font-size: 25px;
  display: block; line-height: 1.15;
}
.proof-l { font-size: var(--t-xs); color: var(--haze); letter-spacing: 0.04em; }

/* ── EL TABLERO ──
   La pieza firma del sitio. Aquí es donde se compra. */
.board {
  background: linear-gradient(180deg, rgba(11,36,52,0.94), rgba(6,22,34,0.96));
  border: 1px solid var(--line-hi); border-radius: var(--r-lg);
  box-shadow: var(--lift), var(--glow-warm);
  overflow: hidden; position: relative;
}
/* Filo cálido superior: el reflejo del atardecer sobre el metal */
.board::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--sunset), var(--mango) 50%, var(--lagoon), transparent);
  opacity: 0.75;
}
.board-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.24);
}
.board-title { font-family: var(--data); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--haze); }
.board-live { display: flex; align-items: center; gap: var(--s2); font-family: var(--data); font-size: var(--t-2xs); letter-spacing: 0.12em; color: var(--lagoon); }
.board-live[data-none="true"] { color: var(--faint); }
.board-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: pulse 2.6s var(--ease) infinite;
}
.board-live[data-none="true"]::before { animation: none; opacity: 0.5; }
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,224,194,0.5); } 50% { opacity: 0.5; box-shadow: 0 0 0 7px rgba(45,224,194,0); } }

.board-days {
  display: flex; gap: var(--s2); padding: var(--s4) var(--s5);
  overflow-x: auto; border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.board-days::-webkit-scrollbar { display: none; }
.day-chip {
  flex: none; min-width: 66px; min-height: 58px; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: none; cursor: pointer; text-align: center;
  transition: all var(--dur) var(--ease);
}
.day-chip b { display: block; font-family: var(--data); font-size: 18px; font-weight: 700; line-height: 1.25; }
.day-chip span { display: block; font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.day-chip:hover { border-color: var(--line-hi); background: rgba(245,239,227,0.05); }
.day-chip[aria-pressed="true"] { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.day-chip[aria-pressed="true"] span { color: rgba(4,16,27,0.62); }

/* Se desplaza cuando hay muchas salidas. La barra es visible y hay
   un degradado sobre el pie: contenido cortado a media altura sin
   ninguna señal parece un error de maquetación, no un scroll. */
.board-rows {
  max-height: 404px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(245,239,227,0.22) transparent;
}
.board-rows::-webkit-scrollbar { width: 6px; }
.board-rows::-webkit-scrollbar-track { background: transparent; }
.board-rows::-webkit-scrollbar-thumb {
  background: rgba(245,239,227,0.2); border-radius: 3px;
}
.board-rows::-webkit-scrollbar-thumb:hover { background: rgba(245,239,227,0.34); }
/* ── Bloque por experiencia ── */
.dep-group {
  padding: var(--s4) var(--s5) var(--s5);
  border-bottom: 1px solid var(--line);
  transform-origin: top center;
}
.dep-group:last-child { border-bottom: 0; }
.dep-group[data-full="true"] { opacity: 0.55; }

.dep-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s3);
}
.dep-group + .dep-group { padding-top: var(--s4); }
.dep-id h3 {
  font-family: var(--display); font-weight: 700; font-size: var(--t-md);
  letter-spacing: -0.01em; line-height: 1.2;
}
.dep-meta {
  font-family: var(--data); font-size: var(--t-2xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-top: 3px;
}
.dep-price {
  font-family: var(--data); font-size: 21px; font-weight: 700;
  line-height: 1.1; text-align: right; white-space: nowrap; flex: none;
}
.dep-price i {
  display: block; font-style: normal; font-weight: 400;
  font-size: var(--t-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); margin-top: 2px;
}

/* ── Horas como pastillas ── */
.time-pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* Ancho fijo, no estirado. Con flex:1 las tres horas del Malibu
   llenaban la fila y la única del Hip Hop quedaba huérfana con un
   vacío al lado. Fijas, todas se leen igual en todos los bloques. */
.time-pill {
  flex: 0 0 auto; min-width: 96px; min-height: 46px; padding: 0 var(--s3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line-hi); border-radius: var(--r-sm);
  background: rgba(0,0,0,0.26); color: var(--sand); cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.time-pill b {
  font-family: var(--data); font-size: var(--t-md); font-weight: 700;
  letter-spacing: 0.02em; line-height: 1.1;
}
.time-pill span {
  font-family: var(--data); font-size: var(--t-2xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-top: 2px;
}
.time-pill:hover:not(:disabled) {
  background: var(--flare-deep); border-color: var(--flare-deep);
  color: #fff; transform: translateY(-2px);
}
.time-pill:disabled {
  cursor: not-allowed; background: none; border-style: dashed;
  border-color: var(--line); color: var(--faint);
}
.time-pill:disabled b { text-decoration: line-through; opacity: 0.7; }

/* ── Charter: sin hora fija, acción propia ── */
.dep-group--charter { background: rgba(255,138,61,0.05); }
.dep-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; min-height: 46px; border-radius: var(--r-pill);
  transition: all 160ms var(--ease);
}
.dep-cta svg { width: 16px; height: 16px; }
.dep-cta:hover {
  border-style: solid; border-color: var(--sunset);
  background: rgba(255,138,61,0.14);
}

.board-empty { padding: var(--s8) var(--s6); text-align: center; color: var(--haze); font-size: var(--t-sm); }
.board-foot {
  padding: var(--s3) var(--s5); border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--faint); text-align: center;
  position: relative;
}
.board-foot::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 34px;
  background: linear-gradient(180deg, transparent, rgba(6,22,34,0.96));
  pointer-events: none;
}

.flip { animation: flip 440ms var(--ease) both; }
@keyframes flip {
  from { transform: rotateX(-88deg); opacity: 0; }
  to   { transform: rotateX(0); opacity: 1; }
}

/* ============================================================
   EXPERIENCIAS — tarjetas tipo boleto
   ============================================================ */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--gap); }

.pass {
  display: flex; flex-direction: column;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pass:hover { transform: translateY(-5px); border-color: var(--line-hi); box-shadow: var(--lift); }
.pass[data-featured="true"] { border-color: rgba(255,61,113,0.42); }

/* Misma proporcion pase lo que pase con la foto que se suba.
   16:10 muestra mas barco que el 2:1 anterior. */
.pass-photo {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(140deg, #14304A, #071A28);
}
.pass-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
.pass-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,36,52,0.88), rgba(11,36,52,0.18) 34%, transparent 58%);
}
.pass-flag {
  position: absolute; top: var(--s4); left: var(--s4); z-index: 2;
  font-family: var(--data); font-size: var(--t-2xs); letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--flare-deep); color: #fff; padding: 6px var(--s3); border-radius: var(--r-pill);
}
.pass-code {
  position: absolute; bottom: var(--s4); right: var(--s4); z-index: 2;
  font-family: var(--data); font-size: 11px; letter-spacing: 0.14em;
  background: rgba(4,16,27,0.7); border: 1px solid var(--line-hi);
  padding: 5px var(--s3); border-radius: var(--r-sm);
}

.pass-body { padding: var(--pad-card); display: flex; flex-direction: column; flex: 1; }
.pass-name { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 1.7vw, 23px); letter-spacing: -0.015em; line-height: 1.15; }
.pass-tag { color: var(--lagoon); font-size: var(--t-xs); font-family: var(--data); letter-spacing: 0.03em; margin-top: var(--s2); }
.pass-blurb {
  color: var(--haze); font-size: var(--t-sm); margin-top: var(--s2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.pass-facts { display: flex; gap: var(--s5); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line-hi); }
.fact b { display: block; font-family: var(--data); font-size: var(--t-md); font-weight: 700; }
.fact span { font-size: var(--t-2xs); letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); }

.pass-list {
  list-style: none; margin: var(--s3) 0 var(--s2);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
  gap: 6px var(--s3);
}
.pass-list li { display: flex; gap: var(--s2); font-size: var(--t-sm); color: var(--haze); line-height: 1.4; }
.pass-list svg { flex: none; width: 15px; height: 15px; margin-top: 4px; color: var(--lagoon); }

.pass-stub {
  margin-top: auto; padding: var(--s3) var(--pad-card);
  background: rgba(0,0,0,0.24);
  border-top: 1px dashed var(--line-hi);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  position: relative;
}
/* Las muescas del boleto salían 9px fuera de la tarjeta y a 320px
   empujaban el documento 1px. Se quedan dentro del borde. */
.pass-stub::before, .pass-stub::after {
  content: ''; position: absolute; top: -10px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--ink);
}
.pass-stub::before { left: -9px; }
.pass-stub::after  { right: -9px; }
.pass { overflow: hidden; }
.pass-price { line-height: 1.15; }
.pass-price b { font-family: var(--data); font-size: 25px; font-weight: 700; }
.pass-price i { font-style: normal; font-size: var(--t-xs); color: var(--faint); display: block; }

/* ============================================================
   GALERÍA
   ============================================================ */
.rails { position: relative; margin-top: var(--stack); }
.rails::before, .rails::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(60px, 12vw, 160px); z-index: 3; pointer-events: none;
}
.rails::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.rails::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.rail { overflow: hidden; }
.rail + .rail { margin-top: var(--s3); }
.rail-track { display: flex; gap: var(--s3); width: max-content; animation: slide 62s linear infinite; }
.rail-track.rev { animation-direction: reverse; }
.rails:hover .rail-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.shot {
  flex: none; width: clamp(200px, 21vw, 300px); aspect-ratio: 4/3; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--line); cursor: zoom-in;
  background: linear-gradient(140deg, #14304A, #071A28); padding: 0;
  transition: border-color var(--dur) var(--ease);
}
.shot:hover { border-color: var(--line-hi); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.shot:hover img { transform: scale(1.07); }

/* ============================================================
   PREGUNTAS
   ============================================================ */
.faq-list { display: grid; gap: var(--s2); max-width: 880px; }
.qa { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surf); overflow: hidden; transition: border-color var(--dur) var(--ease); }
.qa[data-open="true"] { border-color: var(--line-hi); }
.qa-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: var(--s4) var(--pad-card); background: none; border: 0; cursor: pointer;
  text-align: left; font-weight: 600; font-size: var(--t-sm); color: var(--sand); line-height: 1.4;
}
.qa-q:hover { background: rgba(245,239,227,0.04); }
.qa-sign { flex: none; width: 22px; height: 22px; position: relative; }
.qa-sign::before, .qa-sign::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: var(--flare);
  transition: transform var(--dur) var(--ease);
}
.qa-sign::after { transform: rotate(90deg); }
.qa[data-open="true"] .qa-sign::after { transform: rotate(0); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease); }
.qa[data-open="true"] .qa-a { grid-template-rows: 1fr; }
.qa-a > div { overflow: hidden; }
.qa-a p { padding: 0 var(--pad-card) var(--s4); color: var(--haze); font-size: var(--t-sm); max-width: 68ch; line-height: 1.6; }

/* ============================================================
   RESEÑAS
   ============================================================ */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--gap); }
.review {
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--pad-card);
  display: flex; flex-direction: column;
}
.stars { color: var(--mango); letter-spacing: 3px; font-size: var(--t-sm); }
.review p { margin: var(--s3) 0 var(--s4); font-size: var(--t-sm); color: var(--sand); line-height: 1.55; }
.who { display: flex; align-items: center; gap: var(--s3); padding-top: var(--s3); margin-top: auto; border-top: 1px solid var(--line); }
.who-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--display); font-weight: 700;
  background: linear-gradient(140deg, var(--flare-deep), var(--sunset)); color: #fff;
}
.who b { display: block; font-size: var(--t-sm); }
.who span { font-size: var(--t-xs); color: var(--faint); }

/* ============================================================
   CIERRE
   ============================================================ */
.closer { text-align: center; padding: var(--band) 0; position: relative; }
.closer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, rgba(255,138,61,0.13), transparent 68%);
}
.closer .shell { position: relative; }
.closer .h-display { font-size: var(--t-mega); }
.closer .mono-line {
  font-family: var(--data); color: var(--lagoon); letter-spacing: 0.13em;
  font-size: var(--t-xs); text-transform: uppercase;
}

/* ============================================================
   PIE
   ============================================================ */
.foot { border-top: 1px solid var(--line); padding: var(--band-sm) 0 var(--s5); background: var(--abyss); }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: clamp(20px, 2.4vw, 40px); }
.foot h4 { font-family: var(--data); font-size: var(--t-2xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s4); }
.foot ul { list-style: none; display: grid; }
.foot a {
  color: var(--haze); text-decoration: none; font-size: var(--t-sm);
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--dur);
}
.foot a:hover { color: var(--sand); }
.foot-blurb { color: var(--haze); font-size: var(--t-sm); max-width: 34ch; margin-top: var(--s4); line-height: 1.6; }
.socials { display: flex; gap: var(--s2); }
.social {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--haze);
  transition: all var(--dur) var(--ease);
}
.social:hover { border-color: var(--flare); color: var(--flare); }
.social svg { width: 17px; height: 17px; }
.foot-base {
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--faint);
}

/* ============================================================
   WHATSAPP
   ============================================================ */
.wa {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 55;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: #25D366; color: #04120E;
  box-shadow: 0 12px 34px rgba(37,211,102,0.34);
  transition: transform var(--dur) var(--ease);
}
.wa:hover { transform: scale(1.07); }
.wa svg { width: 28px; height: 28px; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 90; display: none;
  place-items: center; padding: var(--s6); background: rgba(4,16,27,0.95);
  backdrop-filter: blur(10px);
}
.lightbox[data-open="true"] { display: grid; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; border-radius: var(--r-md); }
.lightbox-x {
  position: absolute; top: var(--s5); right: var(--s5);
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-hi);
  background: none; color: var(--sand); cursor: pointer; font-size: 20px;
}

/* ============================================================
   HOJA DE RESERVA
   ============================================================ */
.sheet {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(4,16,27,0.88); backdrop-filter: blur(12px);
}
.sheet[data-open="true"] { display: grid; place-items: center; padding: var(--s5); }
.sheet-panel {
  width: min(720px, 100%); max-height: 95svh; display: flex; flex-direction: column;
  background: var(--abyss); border: 1px solid var(--line-hi);
  border-radius: var(--r-lg); box-shadow: var(--lift); overflow: hidden;
}
.sheet-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
}
.sheet-head b { font-family: var(--display); font-size: 18px; font-weight: 700; }
.sheet-head small { font-family: var(--data); font-size: 11px; color: var(--faint); display: block; letter-spacing: 0.08em; margin-top: 3px; }
.sheet-x {
  margin-left: auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--haze); cursor: pointer; font-size: 18px;
}
.sheet-x:hover { color: var(--sand); border-color: var(--line-hi); }

.steps { display: flex; gap: var(--s1); padding: var(--s4) var(--s6); border-bottom: 1px solid var(--line); }
.step-dot { flex: 1; height: 3px; border-radius: 2px; background: rgba(245,239,227,0.12); transition: background var(--dur); }
.step-dot[data-on="true"] { background: linear-gradient(90deg, var(--flare), var(--sunset)); }

.sheet-body { padding: var(--s5); overflow-y: auto; flex: 1; }
.sheet-foot {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.22);
}
.sheet-total { margin-right: auto; line-height: 1.15; }
.sheet-total b { font-family: var(--data); font-size: 24px; font-weight: 700; display: block; }
.sheet-total span { font-size: var(--t-2xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); }

.field { margin-bottom: var(--s4); }
/* .addon y .pay-opt son <label> y hermanos de la etiqueta del campo,
   así que heredaban esta regla: salían en mayúsculas, en bloque y
   con el tamaño de una etiqueta. Se excluyen por clase. */
.field > label:not(.addon):not(.pay-opt) { display: block; font-size: var(--t-xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--haze); margin-bottom: var(--s2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: var(--s2) var(--s4);
  background: rgba(0,0,0,0.3); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--sand);
  transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 74px; resize: vertical; padding-top: var(--s3); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--lagoon); }
.field .hint { font-size: var(--t-xs); color: var(--faint); margin-top: var(--s2); line-height: 1.5; }
.field .err { font-size: var(--t-xs); color: var(--flare); margin-top: var(--s2); display: none; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select { border-color: var(--flare); }
.field[data-invalid="true"] .err { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

.counter { display: flex; align-items: center; gap: var(--s4); }
.counter button {
  width: 48px; height: 48px; flex: none; border-radius: var(--r-sm);
  border: 1px solid var(--line-hi); background: rgba(245,239,227,0.04);
  color: var(--sand); font-size: 19px; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.counter button:hover:not(:disabled) { background: rgba(245,239,227,0.1); }
.counter button:disabled { opacity: 0.3; cursor: not-allowed; }
.counter output { font-family: var(--data); font-size: 21px; font-weight: 700; min-width: 36px; text-align: center; }

.addon {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; margin-bottom: var(--s2); min-height: 46px;
  transition: border-color var(--dur), background var(--dur);
}
.addon:hover { background: rgba(245,239,227,0.04); border-color: var(--line-hi); }
.addon input { width: 20px; height: 20px; flex: none; accent-color: var(--flare-deep); }
.addon b { display: block; font-size: var(--t-sm); font-weight: 600; }
.addon span { font-size: var(--t-xs); color: var(--faint); line-height: 1.5; }
.addon .price { margin-left: auto; font-family: var(--data); font-size: var(--t-sm); white-space: nowrap; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: var(--s2); }
.slot {
  padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(0,0,0,0.22); cursor: pointer; text-align: left; min-height: 46px;
  transition: all var(--dur) var(--ease);
}
.slot:hover:not(:disabled) { border-color: var(--line-hi); }
.slot[aria-pressed="true"] { border-color: var(--flare); background: rgba(255,61,113,0.13); }
.slot:disabled { opacity: 0.34; cursor: not-allowed; }
.slot b { display: block; font-family: var(--data); font-size: 18px; font-weight: 700; }
.slot span { font-size: var(--t-2xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }

.summary { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s4); background: rgba(0,0,0,0.2); }
.summary-row { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--t-sm); padding: var(--s2) 0; }
.summary-row span:last-child { font-family: var(--data); }
.summary-row.total { border-top: 1px solid var(--line-hi); margin-top: var(--s3); padding-top: var(--s4); font-weight: 700; }
.summary-row.discount span:last-child { color: var(--lagoon); }

.notice {
  display: flex; gap: var(--s3); padding: var(--s3) var(--s4);
  border-radius: var(--r-sm); font-size: var(--t-xs); margin-bottom: var(--s4); line-height: 1.5;
}
.notice-info { background: rgba(45,224,194,0.09); border: 1px solid rgba(45,224,194,0.28); color: var(--lagoon); }
.notice-warn { background: rgba(255,61,113,0.09); border: 1px solid rgba(255,61,113,0.3); color: var(--flare); }

.done { text-align: center; padding: var(--s6) 0; }
.done-mark {
  width: 72px; height: 72px; margin: 0 auto var(--s5); border-radius: 50%;
  display: grid; place-items: center; background: rgba(45,224,194,0.13);
  border: 1px solid var(--lagoon); color: var(--lagoon);
}
.done-code {
  font-family: var(--data); font-size: 28px; font-weight: 700; letter-spacing: 0.06em;
  margin: var(--s5) 0 var(--s3);
}

/* Aparición al hacer scroll */
.rise { opacity: 0; transform: translateY(24px); transition: opacity 680ms var(--ease), transform 680ms var(--ease); }
.rise[data-in="true"] { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: calc(88px + var(--band-sm)); }
  /* minmax(0,·): sin esto el min-content de los enlaces ensancha
     la columna y el pie se sale a 320px. */
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  /* Medido: con el boton de "Salidas" el nav-tools llegaba a 424px
     en un viewport de 390 y el menu quedaba fuera de pantalla.
     El tablero esta justo debajo, el boton no hace falta aqui. */
  .nav-tools > .btn { display: none; }
  .nav { gap: var(--s3); }
  /* position: absolute, no fixed. El .nav lleva backdrop-filter, y
     un filtro convierte al elemento en bloque contenedor de sus
     descendientes fixed: el panel se dimensionaba contra los 76px
     de la barra y el fondo solo cubría esa franja. */
  .nav-links[data-open="true"] {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: var(--s4) var(--gut) var(--s7);
    max-height: calc(100svh - 84px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-links[data-open="true"] > li { display: block; }
  .nav-links[data-open="true"] .nav-cta {
    display: flex; width: 100%; margin-top: var(--s5);
  }
  .nav-links[data-open="true"] a {
    display: flex; align-items: center; width: 100%;
    min-height: 52px; border-bottom: 1px solid var(--line); font-size: var(--t-md);
  }
  .nav-links[data-open="true"] .nav-cta { border-bottom: 0; }
  .hero-title { font-size: clamp(40px, 12.5vw, 64px); }
  .h-section { max-width: 100%; }
  /* Medido: el hero llegaba a 1854px de alto en un movil de 844.
     El tablero se limita y desplaza dentro de si mismo. */
  .board-rows { max-height: 52svh; }
  .board-head, .dep-group, .board-empty, .board-foot { padding-left: var(--s5); padding-right: var(--s5); }
  .time-pill { min-width: 84px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .sheet[data-open="true"] { padding: 0; align-items: end; }
  .sheet-panel { max-height: 94svh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .sheet-body, .sheet-head, .sheet-foot, .steps { padding-left: var(--s5); padding-right: var(--s5); }
  .wa { right: var(--s4); bottom: var(--s4); }
  .band::after { display: none; }
}


/* ============================================================
   RESERVA v2 — pasos con nombre, desglose siempre a mano
   ============================================================ */

/* ── Progreso: antes eran tres puntos anónimos ── */
.steps {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line);
}
.step { display: flex; align-items: center; gap: var(--s2); flex: none; }
.step i {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-style: normal;
  font-family: var(--data); font-size: var(--t-2xs); font-weight: 700;
  border: 1px solid var(--line-hi); color: var(--faint);
  transition: all var(--dur) var(--ease);
}
.step span {
  font-size: var(--t-xs); color: var(--faint); white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.step[data-state="now"] i  { background: var(--flare-deep); border-color: var(--flare-deep); color: #fff; }
.step[data-state="now"] span { color: var(--sand); font-weight: 600; }
.step[data-state="done"] i { background: var(--lagoon); border-color: var(--lagoon); color: #03130F; }
.step[data-state="done"] span { color: var(--haze); }
.step-bar { flex: 1; height: 1px; background: var(--line-hi); min-width: 8px; }
.step-bar[data-done="true"] { background: var(--lagoon); }

/* ── Cabecera con la salida elegida ── */
.picked {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4); margin-bottom: var(--s4);
  background: rgba(45,224,194,0.07); border: 1px solid rgba(45,224,194,0.24);
  border-radius: var(--r-sm);
}
.picked-when { font-family: var(--data); font-weight: 700; font-size: var(--t-sm); line-height: 1.25; }
.picked-what { font-size: var(--t-xs); color: var(--haze); margin-top: 3px; }
.picked-edit {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--lagoon); font-size: var(--t-xs); font-weight: 600;
  min-height: 44px; padding: 0 var(--s2); flex: none; text-decoration: underline; text-underline-offset: 3px;
}

/* ── Total desplegable en el pie ── */
.sheet-foot { position: relative; }
.sheet-total {
  margin-right: auto; line-height: 1.15; text-align: left;
  background: none; border: 0; cursor: pointer; padding: var(--s1) 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.sheet-total span { display: flex; align-items: center; gap: 5px; }
.sheet-total span::after {
  content: ''; width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 4px solid currentColor;
  transition: transform var(--dur) var(--ease);
}
.sheet-total[aria-expanded="true"] span::after { transform: rotate(180deg); }

.sum-pop {
  position: absolute; left: var(--s5); right: var(--s5); bottom: calc(100% + 8px);
  background: var(--surf-hi); border: 1px solid var(--line-hi);
  border-radius: var(--r-sm); padding: var(--s4) var(--s5);
  box-shadow: var(--lift); z-index: 5;
}
.sum-pop[hidden] { display: none; }

/* ── Campos: obligatorio y validación ── */
.req { color: var(--flare); margin-left: 2px; }
.opt { color: var(--faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field[data-ok="true"] input { border-color: rgba(45,224,194,0.45); }

/* ── Aviso de últimos cupos ── */
.seats-left {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--data); font-size: var(--t-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mango);
}
.seats-left::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* ── Confianza, en el paso de pago ── */
.trust {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  padding-top: var(--s4); margin-top: var(--s4); border-top: 1px solid var(--line);
}
.trust li { list-style: none; display: flex; align-items: flex-start; gap: var(--s2); flex: 1 1 200px; }
.trust svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--lagoon); }
.trust b { display: block; font-size: var(--t-xs); font-weight: 600; }
.trust span { font-size: var(--t-2xs); color: var(--faint); line-height: 1.5; }

@media (max-width: 780px) {
  .steps { padding-left: var(--s5); padding-right: var(--s5); gap: var(--s1); }
  .step span { display: none; }
  .step[data-state="now"] span { display: inline; }
  .sum-pop { left: var(--s5); right: var(--s5); }
}

/* ============================================================
   SELECTOR DE FECHA
   ============================================================ */
.datepick { position: relative; }

.dp-bar {
  display: grid; grid-template-columns: 44px 1fr 44px;
  align-items: stretch; gap: var(--s2);
}
.dp-arrow {
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(245,239,227,0.03); color: var(--haze);
  cursor: pointer; min-height: 46px;
  transition: all var(--dur) var(--ease);
}
.dp-arrow svg { width: 18px; height: 18px; }
.dp-arrow:hover:not(:disabled) { background: rgba(245,239,227,0.09); color: var(--sand); border-color: var(--line-hi); }
.dp-arrow:disabled { opacity: 0.28; cursor: not-allowed; }

.dp-current {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 46px; padding: 0 var(--s4);
  border: 1px solid var(--line-hi); border-radius: var(--r-sm);
  background: rgba(0,0,0,0.26); color: var(--sand); cursor: pointer;
  text-align: left; transition: all var(--dur) var(--ease);
}
.dp-current:hover { background: rgba(0,0,0,0.4); border-color: var(--lagoon); }
.dp-current b { font-size: var(--t-md); font-weight: 700; line-height: 1.2; }
.dp-current span { font-size: var(--t-xs); color: var(--faint); }
.dp-cal { width: 17px; height: 17px; margin-left: auto; color: var(--lagoon); flex: none; }

/* ── El mes ── */
/* En flujo, no flotante.
   Como overlay absoluto quedaba recortado por el contenedor con
   scroll de la hoja: a 600px de alto solo 15 de los 31 días eran
   alcanzables. Empujando el contenido, el propio scroll de la hoja
   llega hasta el final del mes en cualquier pantalla.
   El ancho es fijo: heredado, las celdas cuadradas crecían a 87px. */
.cal {
  width: 320px; max-width: 100%;
  margin-top: var(--s2);
  background: var(--surf-hi); border: 1px solid var(--line-hi);
  border-radius: var(--r-md); box-shadow: var(--lift);
  padding: var(--s3);
  animation: cal-in 200ms var(--ease) both;
}
@keyframes cal-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.cal[hidden] { display: none; }

.cal-nav { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.cal-nav button {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: none; color: var(--haze); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.cal-nav button svg { width: 16px; height: 16px; }
.cal-nav button:hover:not(:disabled) { background: rgba(245,239,227,0.08); color: var(--sand); }
.cal-nav button:disabled { opacity: 0.25; cursor: not-allowed; }
.cal-title {
  flex: 1; text-align: center; font-family: var(--display);
  font-weight: 700; font-size: var(--t-md); text-transform: capitalize;
}

.cal-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-wk span {
  text-align: center; font-family: var(--data); font-size: var(--t-2xs);
  color: var(--faint); padding: 4px 0;
}

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-pad { height: 44px; }
.cal-day {
  /* Alto fijo, nunca cuadrado sobre el ancho. 44px es el mínimo
     táctil; el ancho puede ser menor porque el dedo falla más en
     vertical al recorrer una rejilla de días. */
  height: 44px;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: rgba(245,239,227,0.05); color: var(--sand);
  font-family: var(--data); font-size: var(--t-sm); cursor: pointer;
  transition: all 140ms var(--ease);
}
.cal-day:hover:not(:disabled) { background: rgba(255,61,113,0.18); border-color: var(--flare); }
.cal-day:disabled { background: none; color: var(--faint); opacity: 0.4; cursor: not-allowed; }
.cal-day[aria-current="date"] {
  background: var(--flare-deep); border-color: var(--flare-deep);
  color: #fff; font-weight: 700;
}
.cal-note {
  font-size: var(--t-2xs); color: var(--faint);
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--line); text-align: center; line-height: 1.4;
}

/* En el tablero el selector va dentro de su propia franja */
.board-pick { padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
@media (max-width: 780px) {
  .board-pick { padding-left: var(--s5); padding-right: var(--s5); }
  .cal-day { min-height: 40px; }
}

.pass-more {
  font-family: var(--data); font-size: var(--t-2xs);
  letter-spacing: 0.06em; color: var(--faint);
  padding-left: 22px; grid-column: 1 / -1;
}


/* ============================================================
   MENÚ DE LOS TRES BOTES
   El menú decía "Experiencias" y no explicaba nada. Los tres
   productos son el negocio entero: van nombrados, con precio y
   con los días que navegan, antes de que nadie haga scroll.
   ============================================================ */
.nav-links .has-menu { position: relative; }

.nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; background: none; border: 0; cursor: pointer;
  color: var(--haze); font-size: var(--t-sm); font-weight: 500;
  position: relative; transition: color var(--dur) var(--ease);
}
.nav-trigger svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.nav-trigger:hover { color: var(--sand); }
.nav-trigger[aria-expanded="true"] { color: var(--sand); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-trigger::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px;
  background: linear-gradient(90deg, var(--flare), var(--sunset));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-trigger:hover::after, .nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }

.mega {
  /* Anclado al borde izquierdo del disparador. Centrado sobre él
     (left:50% + translateX) el panel de 780px se salía de la
     pantalla por la izquierda, porque el menú vive cerca del logo. */
  position: absolute; top: calc(100% + 14px); left: 0;
  width: min(760px, calc(100vw - 2 * var(--gut)));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
  padding: var(--s3);
  background: rgba(7,26,40,0.97); backdrop-filter: blur(20px);
  border: 1px solid var(--line-hi); border-radius: var(--r-md);
  box-shadow: var(--lift);
}
.mega[hidden] { display: none; }
.mega::before {
  content: ''; position: absolute; top: 0; left: var(--s5); right: var(--s5); height: 2px;
  background: linear-gradient(90deg, var(--flare), var(--mango) 50%, var(--lagoon));
  border-radius: 2px;
}

.mega-item {
  display: block; text-align: left; padding: var(--s4);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; cursor: pointer; color: inherit;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mega-item:hover { background: rgba(245,239,227,0.05); border-color: var(--line-hi); }

.mega-top { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); }
.mega-code {
  font-family: var(--data); font-size: var(--t-2xs); letter-spacing: 0.12em;
  color: var(--ink); background: var(--lagoon); padding: 2px 7px; border-radius: 4px;
}
.mega-price { margin-left: auto; font-family: var(--data); font-size: var(--t-sm); font-weight: 700; }
.mega-name {
  font-family: var(--display); font-weight: 700; font-size: var(--t-md);
  line-height: 1.2; letter-spacing: -0.01em;
}
.mega-line {
  font-size: var(--t-xs); color: var(--haze); margin-top: var(--s2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mega-when {
  display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s3);
  font-family: var(--data); font-size: var(--t-2xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--lagoon);
}
.mega-when::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mega-item:hover .mega-when { color: var(--flare); }

/* En móvil el menú vive desplegado dentro del panel del burger */
@media (max-width: 780px) {
  .nav-links .has-menu { display: block; }
  .nav-trigger { display: none; }
  .mega {
    position: static; transform: none; width: 100%;
    display: grid; grid-template-columns: 1fr; gap: var(--s2);
    background: none; border: 0; box-shadow: none; padding: 0;
    margin-bottom: var(--s3);
  }
  .mega[hidden] { display: grid; }
  .mega::before { display: none; }
  .mega-item { border-color: var(--line); background: rgba(0,0,0,0.24); padding: var(--s3) var(--s4); }
  .mega-line { display: none; }
}

/* ── Bloque de un bote que no navega este día ── */
.dep-group[data-away="true"] .dep-head { opacity: 0.72; }
.dep-when {
  display: inline-flex; align-items: center;
  font-family: var(--data); font-size: var(--t-2xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
  padding: 0 var(--s3); min-height: 46px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
}
.dep-jump {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 46px; padding: 0 var(--s4);
  border: 1px solid var(--line-hi); border-radius: var(--r-sm);
  background: rgba(45,224,194,0.07); color: var(--lagoon);
  font-size: var(--t-xs); cursor: pointer;
  transition: all 160ms var(--ease);
}
.dep-jump b { font-family: var(--data); font-weight: 700; }
.dep-jump svg { width: 15px; height: 15px; }
.dep-jump:hover { background: rgba(45,224,194,0.16); border-color: var(--lagoon); }

.dep-group[data-focus="true"] {
  background: rgba(255,61,113,0.09);
  box-shadow: inset 3px 0 0 var(--flare);
}

/* ── Paso 1 de la reserva: mes y horas en paralelo ── */
.pick-grid {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--s5); align-items: start; margin-bottom: var(--s5);
}
.datepick[data-always="true"] .cal {
  margin-top: 0; box-shadow: none;
  background: rgba(0,0,0,0.22); animation: none;
}
.pick-grid .slot-grid { grid-template-columns: repeat(auto-fill, minmax(min(108px, 100%), 1fr)); }

@media (max-width: 700px) {
  .pick-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .datepick[data-always="true"] .cal { width: 100%; }
  .datepick[data-always="true"] .cal-day { height: 44px; }
}

/* ============================================================
   CONVERSIÓN
   Palancas honestas: quitar la objeción del dinero antes de que
   aparezca, poner la prueba social donde se decide, y no hacerle
   buscar el botón a nadie. Nada de urgencia inventada.
   ============================================================ */

/* Reversión de riesgo, pegada al botón que la necesita */
.risk {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s3); font-size: var(--t-xs); color: var(--haze);
}
.risk::before {
  content: ''; width: 15px; height: 15px; flex: none;
  background: currentColor; color: var(--lagoon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 1.6l7 2.8v5.2c0 4.3-3 8.2-7 9.2-4-1-7-4.9-7-9.2V4.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 1.6l7 2.8v5.2c0 4.3-3 8.2-7 9.2-4-1-7-4.9-7-9.2V4.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Valoración en el pie del tablero: la prueba social se lee donde
   se toma la decisión, no 2.000px más abajo */
.board-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; text-align: left;
}
.board-rating { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.board-rating b { font-family: var(--data); color: var(--mango); font-size: var(--t-sm); }

/* Equivalente por persona en los privados: ancla honesta que hace
   comparable "$850 el bote" con "$65 por cabeza" */
.dep-each {
  display: block; font-family: var(--data); font-size: var(--t-2xs);
  letter-spacing: 0.04em; color: var(--lagoon); margin-top: 3px;
  text-transform: none;
}

/* ── Barra fija de reserva (móvil) ── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  display: none; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--gut);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: rgba(4,16,27,0.97); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-hi);
  transform: translateY(105%); transition: transform 320ms var(--ease);
}
.dock-price b { display: block; font-size: 20px; font-weight: 700; line-height: 1.1; }
.dock-price span { font-size: var(--t-2xs); color: var(--faint); }

.dock-wa {
  display: none; width: 46px; height: 46px; flex: none;
  place-items: center; margin-left: auto;
  border-radius: 50%; background: #25D366; color: #04120E;
}
.dock-wa svg { width: 24px; height: 24px; }
.dock .btn { margin-left: var(--s2); }

@media (max-width: 780px) {
  .dock { display: flex; }
  .dock[data-on="true"] { transform: none; }
  .dock-wa { display: grid; }
  /* Hueco al final para que la barra fija no tape el pie.
     Va en el body: el .foot ya tenía su propio padding y el
     último bloque seguía quedando debajo de la barra. */
  body { padding-bottom: 108px; }   /* la barra mide 100px con el área segura */
  .foot { padding-bottom: var(--s6); }
  /* WhatsApp vive dentro de la barra. Flotando encima tapaba el
     botón "Reservar" de las tarjetas. */
  .wa { display: none; }
}

/* ============================================================
   MÓVIL — QUE SE SIENTA UNA APP, NO UNA WEB ENCOGIDA
   Lo que separa a las dos: la hoja sube desde abajo con asa,
   la cabecera se queda fija, todo responde al toque, y nada
   depende del hover (que en un dedo no existe).
   ============================================================ */

/* Sin el flash gris de iOS/Android al tocar */
* { -webkit-tap-highlight-color: transparent; }

/* Respuesta táctil: sin esto los botones se sienten muertos */
@media (hover: none) {
  .btn:active:not(:disabled),
  .time-pill:active:not(:disabled),
  .slot:active:not(:disabled),
  .cal-day:active:not(:disabled),
  .dep-cta:active, .dep-jump:active,
  .pay-opt:active, .addon:active,
  .mega-item:active, .day-chip:active,
  .counter button:active:not(:disabled) { transform: scale(0.965); }

  .btn, .time-pill, .slot, .cal-day, .dep-cta, .dep-jump,
  .pay-opt, .addon, .mega-item, .counter button {
    transition: transform 110ms var(--ease), background var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  /* En táctil el hover se queda "pegado" tras pulsar */
  .time-pill:hover:not(:disabled) { background: rgba(0,0,0,0.26); border-color: var(--line-hi); color: var(--sand); }
  .board-row:hover, .pass:hover { transform: none; }
}

@media (max-width: 780px) {

  /* ── La hoja: pantalla completa, sube desde abajo, con asa ── */
  .sheet { align-items: flex-end; }
  .sheet[data-open="true"] { animation: fade-in 220ms var(--ease) both; }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

  .sheet-panel {
    height: 96dvh; max-height: 96dvh; width: 100%;
    border-radius: 26px 26px 0 0;
    border-bottom: 0;
    animation: sheet-up 320ms var(--ease) both;
  }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

  /* Asa de arrastre: la señal universal de "esto se cierra tirando" */
  .sheet-head { min-height: 168px; padding-top: var(--s7); }
  .sheet-head::before {
    content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 4px; border-radius: 2px; z-index: 2;
    background: rgba(245,239,227,0.5);
  }
  .sheet-x { top: 26px; }

  /* Cabecera y pasos fijos mientras el contenido se desplaza */
  .sheet-head, .steps {
    position: sticky; z-index: 3; background: var(--abyss);
  }
  .sheet-head { top: 0; }
  .steps { top: 0; }

  .sheet-body { -webkit-overflow-scrolling: touch; padding-bottom: var(--s6); }
  .sheet-foot {
    padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
    background: var(--abyss);
  }
  .sheet-foot .btn { flex: 1; }
  .sheet-total { flex: 0 0 auto; }

  /* ── Objetivos más grandes, como en una app nativa ── */
  .time-pill { min-height: 54px; min-width: 92px; }
  .time-pill b { font-size: var(--t-lg); }
  .slot { min-height: 54px; }
  .cal-day { height: 46px; font-size: var(--t-md); }
  .field input, .field select { min-height: 52px; }
  .counter button { width: 54px; height: 54px; font-size: 22px; }
  .counter output { font-size: 24px; min-width: 44px; }
  .addon { min-height: 56px; }
  .pay-opt { min-height: 74px; }
  .btn { min-height: 52px; }
  .btn-sm { min-height: 46px; }

  /* ── El tablero como tarjeta de app ── */
  .board { border-radius: 22px; }
  .dep-group { padding: var(--s4) var(--s5) var(--s5); }

  /* ── Esquinas más generosas: lo que distingue una app ── */
  .pass, .qa, .review, .cal { border-radius: 20px; }

  /* ── El menú desplegable, con inercia ── */
  .nav-links[data-open="true"] { -webkit-overflow-scrolling: touch; }

  /* ── Barra de reserva con área segura ── */
  .dock { border-radius: 20px 20px 0 0; }
}

/* Pantallas muy estrechas */
@media (max-width: 400px) {
  .foot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .time-pill { min-width: 84px; }
  .dock { gap: var(--s3); padding-left: var(--s4); padding-right: var(--s4); }
  .dock-price b { font-size: 18px; }
}

.sheet-panel:focus { outline: none; }

/* ── Métodos de pago ── */
.pay-opt {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4); margin-bottom: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(0,0,0,0.24); cursor: pointer; min-height: 68px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pay-opt[data-sel="true"] { border-color: var(--lagoon); background: rgba(45,224,194,0.07); }
.pay-opt input { width: 20px; height: 20px; flex: none; accent-color: var(--lagoon); }
.pay-icon {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: rgba(245,239,227,0.07); color: var(--sand);
}
.pay-icon svg { width: 22px; height: 22px; }
.pay-opt[data-sel="true"] .pay-icon { background: rgba(45,224,194,0.14); color: var(--lagoon); }
.pay-txt b { display: block; font-size: var(--t-sm); font-weight: 600; }
.pay-txt span { font-size: var(--t-xs); color: var(--faint); line-height: 1.45; }

/* ============================================================
   LA HOJA CON FOTO
   Poner la foto detrás de TODO el formulario obliga a un velo tan
   denso que la foto deja de verse: no vende nada. Va como banda
   superior, visible de verdad, con el título sobre el degradado
   — que es como lo resuelven las apps de tours.
   ============================================================ */
/* La banda de foto cede altura en pantallas bajas: a 800px de alto
   se comía 152px de los 736 que tiene el panel. */
/* El alto reserva sitio para la insignia: con 13vh se quedaba en
   104px en una pantalla de 800 y la valoración pisaba el título. */
/* Columna en flujo normal. Con la insignia en position:absolute y
   el contenido alineado abajo, en pantallas cortas se pisaban:
   dependía de restar alturas a mano y siempre fallaba en alguna. */
.sheet-head {
  position: relative; min-height: clamp(124px, 15vh, 152px);
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--s3);
  padding: var(--s5) 72px var(--s5) var(--s5); overflow: hidden;
  background-image: var(--sheet-photo, none);
  background-size: cover; background-position: center 40%;
  border-bottom: 0;
}
.sheet-head::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    rgba(7,26,40,0.28) 0%,
    rgba(7,26,40,0.62) 46%,
    rgba(7,26,40,0.95) 88%,
    var(--abyss) 100%);
}
.sheet-head > * { position: relative; z-index: 1; }
.sheet-title b { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.15; display: block; }
.sheet-title small { font-family: var(--data); font-size: 11px; color: var(--haze); display: block; letter-spacing: 0.08em; margin-top: 4px; }

/* Valoración sobre la foto: el primer dato que mira quien compra */
.sheet-badge {
  align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px var(--s3); border-radius: var(--r-pill);
  background: rgba(4,16,27,0.72); border: 1px solid var(--line-hi);
  font-size: var(--t-2xs); color: var(--sand); white-space: nowrap;
}
.sheet-badge b { color: var(--mango); }

.sheet-x {
  position: absolute; top: var(--s5); right: var(--s5); margin: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-hi); background: rgba(4,16,27,0.72);
  color: var(--sand); cursor: pointer; font-size: 18px;
}
.sheet-x:hover { background: rgba(4,16,27,0.92); }

/* ── Reseña dentro del formulario ── */
.quote {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(0,0,0,0.3);
}
.quote-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--display);
  font-weight: 700; font-size: var(--t-sm);
  background: linear-gradient(140deg, var(--flare-deep), var(--sunset)); color: #fff;
}
.quote blockquote { min-width: 0; }
.quote-stars { color: var(--mango); font-size: var(--t-xs); letter-spacing: 2px; }
.quote p {
  font-size: var(--t-sm); color: var(--sand); line-height: 1.5;
  margin: 4px 0 var(--s2);
}
.quote figcaption { font-size: var(--t-2xs); color: var(--faint); }

@media (max-width: 780px) {
  .sheet-panel::before { height: 38%; background-position: center 30%; }
  .quote { padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
}

/* Ventajas en el pie del tablero — el lenguaje que ya reconoce
   quien ha reservado un tour antes en cualquier plataforma */
.perks { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; }
.perks li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-2xs); color: var(--haze); white-space: nowrap;
}
.perks li::before {
  content: ''; width: 12px; height: 12px; flex: none; color: var(--lagoon);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8 14.2L4.2 10.4l1.4-1.4L8 11.4l6.4-6.4 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8 14.2L4.2 10.4l1.4-1.4L8 11.4l6.4-6.4 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 480px) { .perks { gap: var(--s2) var(--s3); } }

.pass-flag[data-kind="plain"] {
  background: rgba(4,16,27,0.82); border: 1px solid var(--line-hi); color: var(--sand);
}
.pass-flag[data-kind="top"] { background: var(--mango); color: #2A1A00; font-weight: 700; }

/* ── Recogida: tres caminos, uno visible a la vez ── */
.pick-tabs {
  display: flex; gap: 3px; padding: 3px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--line);
  border-radius: var(--r-sm); margin-bottom: var(--s3);
}
.pick-tab {
  flex: 1; min-height: 44px; padding: 0 var(--s2); white-space: nowrap;
  border: 0; border-radius: 7px; background: none; cursor: pointer;
  color: var(--haze); font-size: var(--t-xs); font-weight: 500; line-height: 1.25;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pick-tab:hover { color: var(--sand); }
.pick-tab[aria-pressed="true"] { background: var(--surf-hi); color: var(--sand); font-weight: 600; }

.pick-body { display: grid; gap: var(--s3); }
.pick-select, .pick-input {
  width: 100%; min-height: 48px; padding: var(--s2) var(--s4);
  background: rgba(0,0,0,0.3); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--sand);
}
.pick-select:focus, .pick-input:focus { border-color: var(--lagoon); outline: none; }
.pick-info {
  font-size: var(--t-xs); color: var(--haze); line-height: 1.5;
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  background: rgba(45,224,194,0.08); border: 1px solid rgba(45,224,194,0.22);
}
.pick-info b { color: var(--lagoon); }

@media (max-width: 480px) {
  /* En columna ocupaban 140px. En fila con etiquetas cortas, 50. */
  .pick-tab { font-size: var(--t-2xs); padding: 0 4px; }
}

/* ── Campos opcionales plegados ── */
.extra-fields { border-top: 1px solid var(--line); padding-top: var(--s3); }
.extra-fields summary {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 44px; cursor: pointer; list-style: none;
  font-size: var(--t-sm); color: var(--lagoon); font-weight: 500;
}
.extra-fields summary::-webkit-details-marker { display: none; }
.extra-fields summary::before {
  content: '+'; width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid currentColor; font-size: 14px; line-height: 1;
}
.extra-fields[open] summary::before { content: '−'; }
.extra-fields summary b { color: var(--sand); font-weight: 700; }

/* Garantías en línea dentro de la hoja */
.perks--sheet {
  padding-top: var(--s4); margin-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* Dos columnas dentro de la hoja cuando hay ancho.
   Los pasos 2 y 3 usaban media hoja y forzaban scroll. */
.two-col {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5); align-items: start;
}
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; gap: 0; } }

/* El resumen de la salida, dentro de la cabecera */
.sheet-title small {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.sheet-title .picked-edit { min-height: 32px; padding: 0; }


/* ============================================================
   TABLERO DE SALIDAS FUERA DEL HERO
   Antes ocupaba media foto. Ahora sube desde abajo y la muerde:
   se ve que hay contenido debajo y el barco queda entero.
   ============================================================ */
.board-wrap {
  position: relative; z-index: 3;
  margin-top: clamp(-96px, -7vh, -56px);
  margin-bottom: var(--band-sm);
}
.board-wrap .board { width: 100%; }
.board-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  max-height: none; overflow: visible;
}
.dep-group { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.dep-group:last-child { border-right: 0; }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 52px);
  border-top: 1px solid rgba(245,239,227,0.22);
  padding-top: var(--s5); margin-top: var(--s6);
  max-width: 620px;
}
.hero-actions { margin-top: var(--s6); }

/* Sobre foto, el gris tenue se queda en 4.2:1. Medido. */
.hero-copy .lede { color: rgba(245,239,227,0.94); }
.hero-copy .risk { color: rgba(245,239,227,0.88); }

@media (max-width: 1040px) {
  .hero { min-height: min(78svh, 640px); }
  .board-wrap { margin-top: clamp(-64px, -5vh, -40px); }
  .dep-group { border-right: 0; }
}
@media (max-width: 640px) {
  .hero { min-height: auto; padding-bottom: var(--band-sm); }
  .board-wrap { margin-top: 0; }
  .hero-proof { gap: var(--s5); }
}


/* ============================================================
   PASO DE PAGO — EL BOTON PRIMERO
   El resumen y la resena estaban arriba y PayPal quedaba abajo:
   en movil habia que desplazarse para encontrar como pagar. En el
   ultimo paso, un segundo de duda cuesta la reserva.
   ============================================================ */
.two-col--pago .col-pago    { order: 1; }
.two-col--pago .col-resumen { order: 2; }

@media (min-width: 701px) {
  /* En escritorio el pago va a la derecha, donde cae la vista al
     terminar de leer el resumen. */
  .two-col--pago .col-pago    { order: 2; }
  .two-col--pago .col-resumen { order: 1; }
}

/* El bloque de pago manda: se separa del resto */
.col-pago .field > label:not(.addon):not(.pay-opt) {
  font-size: var(--t-xs); color: var(--sand); font-weight: 600;
}
#paypalBox { margin-top: var(--s4); min-height: 4px; }
#paypalBox:empty { margin-top: 0; }


/* ============================================================
   TABLERO QUE SE EXPLICA SOLO
   Decia "SALIDAS" y mostraba horas sueltas: quien entra por
   primera vez no sabe que esos 09:00 son botones. Ahora hay
   verbo, orden, y los cuatro bloques comparten patron.
   ============================================================ */
.board-head > div { display: flex; flex-direction: column; gap: 3px; }
.board-title { font-family: var(--display); font-size: var(--t-md); font-weight: 700;
               letter-spacing: -0.01em; text-transform: none; color: var(--sand); }
.board-steps { font-size: var(--t-2xs); color: var(--faint); }
.board-step-label {
  padding: var(--s4) var(--s5) 0;
  font-family: var(--data); font-size: var(--t-2xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--lagoon);
}
.dep-hint { font-size: var(--t-2xs); color: var(--haze); margin-bottom: var(--s3); }
.time-pill span { display: block; font-size: var(--t-2xs); color: var(--faint); margin-top: 2px; }
.time-pill .pill-left { color: var(--mango); font-weight: 600; }
.time-pill:hover:not(:disabled) span { color: var(--sand); }
.time-pill:hover:not(:disabled) .pill-left { color: var(--mango); }

/* Los cuatro bloques con el MISMO patron de accion */
.dep-jump, .dep-cta {
  width: 100%; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 0 var(--s4); border-radius: var(--r-pill);
  border: 1px solid var(--lagoon); background: rgba(45,224,194,0.10);
  color: var(--lagoon); font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; transition: background var(--dur) var(--ease);
}
.dep-jump:hover, .dep-cta:hover { background: rgba(45,224,194,0.20); }
.dep-jump svg, .dep-cta svg { width: 16px; height: 16px; flex: none; }
.dep-group[data-away="true"] { opacity: 1; }
.dep-group[data-away="true"] .dep-head { opacity: 0.82; }

/* Miniatura del bote, proporcion fija para que todas se vean igual */
.dep-head { display: flex; align-items: flex-start; gap: var(--s3); }
.dep-thumb {
  width: 52px; height: 40px; flex: none; border-radius: var(--r-sm);
  object-fit: cover; object-position: center 55%;
  border: 1px solid var(--line); display: block;
}
.dep-id { flex: 1; min-width: 0; }
.dep-price { flex: none; white-space: nowrap; }
.dep-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .dep-thumb { width: 46px; height: 36px; } }


/* ============================================================
   FICHA DEL BOTE
   Antes de pagar, la gente quiere ver el barco desde varios
   angulos y saber que pasa hora por hora.
   ============================================================ */
.detail-panel { max-width: 860px; }
.detail-head { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s5); border-bottom: 1px solid var(--line); background: var(--abyss); }
.detail-head b { font-family: var(--display); font-size: 22px; font-weight: 700; display: block; line-height: 1.2; }
.detail-head small { color: var(--haze); font-size: var(--t-sm); display: block; margin-top: 4px; }
.detail-head .sheet-x { position: static; margin-left: auto; flex: none; }
.dt-gal { margin-bottom: var(--s5); }
.dt-gal-main { position: relative; aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; background: var(--surf-hi); }
.dt-gal-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-hi); background: rgba(4,16,27,0.72); color: var(--sand); font-size: 24px; line-height: 1; cursor: pointer; }
.dt-nav:hover { background: rgba(4,16,27,0.92); }
.dt-prev { left: var(--s3); } .dt-next { right: var(--s3); }
.dt-count { position: absolute; bottom: var(--s3); right: var(--s3); padding: 4px var(--s3); border-radius: var(--r-pill); background: rgba(4,16,27,0.72); font-size: var(--t-2xs); color: var(--sand); }
.dt-thumbs { display: flex; gap: var(--s2); margin-top: var(--s2); overflow-x: auto; padding-bottom: 4px; }
.dt-thumb { flex: 0 0 auto; width: 88px; aspect-ratio: 16/10; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; cursor: pointer; background: none; opacity: .55; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.dt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-thumb[aria-pressed="true"] { opacity: 1; border-color: var(--lagoon); }
.dt-thumb:hover { opacity: 1; }
.dt-lede { font-size: var(--t-md); line-height: 1.6; color: var(--sand); margin-bottom: var(--s5); }
.dt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px,100%),1fr)); gap: var(--s3); padding: var(--s4) 0; margin-bottom: var(--s5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dt-facts b { display: block; font-family: var(--data); font-size: 20px; font-weight: 700; }
.dt-facts span { font-size: var(--t-2xs); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.dt-block { margin-bottom: var(--s6); }
.dt-block h4 { font-family: var(--display); font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--s4); }
.dt-p { color: var(--haze); line-height: 1.65; font-size: var(--t-sm); }
.dt-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%),1fr)); gap: var(--s5); }
.dt-time { list-style: none; padding-left: 0; }
.dt-time li { display: flex; gap: var(--s4); padding-bottom: var(--s5); position: relative; }
.dt-time li::before { content: ''; position: absolute; left: 58px; top: 22px; bottom: 0; width: 1px; background: var(--line); }
.dt-time li:last-child { padding-bottom: 0; }
.dt-time li:last-child::before { display: none; }
.dt-when { flex: 0 0 52px; font-size: var(--t-xs); color: var(--lagoon); padding-top: 2px; text-align: right; }
.dt-time b { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: 3px; }
.dt-time span { display: block; font-size: var(--t-xs); color: var(--haze); line-height: 1.55; }
.dt-time > li > div { position: relative; padding-left: var(--s4); }
.dt-time > li > div::before { content: ''; position: absolute; left: -6px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--lagoon); box-shadow: 0 0 0 3px var(--abyss); }
.dt-list { list-style: none; display: grid; gap: var(--s2); }
.dt-list li { display: flex; gap: var(--s2); font-size: var(--t-sm); line-height: 1.5; }
.dt-list li::before { flex: none; font-family: var(--data); }
.dt-yes li::before { content: '\2713'; color: var(--lagoon); }
.dt-no li::before { content: '\2715'; color: var(--faint); }
.dt-no li { color: var(--haze); }
.dep-info { background: none; border: 0; padding: 0; cursor: pointer; color: var(--lagoon); font-size: var(--t-2xs); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-bottom: var(--s2); display: block; }
.dep-info:hover { color: var(--sand); }
.pass-stub { flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 780px) { .detail-head b { font-size: 19px; } .dt-when { flex-basis: 46px; } .dt-time li::before { left: 52px; } }


/* Senal o pago completo. La senal baja la friccion de reservar
   y reduce la comision, porque se cobra sobre menos dinero. */
#depositBox { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.dep-opt { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: all var(--dur) var(--ease); }
.dep-opt[data-on="true"] { border-color: var(--lagoon); background: rgba(45,224,194,0.07); }
.dep-opt:hover { border-color: var(--line-hi); }
.dep-opt input { margin-top: 3px; accent-color: var(--lagoon); flex: none; }
.dep-opt b { display: block; font-size: var(--t-sm); font-weight: 600; }
.dep-opt small { display: block; font-size: var(--t-xs); color: var(--haze); margin-top: 2px; }


/* Reservar por WhatsApp con los datos ya escritos: obligar a
   repetirlos es donde se pierde la conversacion. */
.btn-wa { display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; min-height: 46px; margin-top: var(--s3);
  border: 1px solid rgba(37,211,102,0.45); border-radius: var(--r-pill);
  background: rgba(37,211,102,0.10); color: #25D366;
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
  transition: background var(--dur) var(--ease); }
.btn-wa:hover { background: rgba(37,211,102,0.20); }


/* ── Fotos dentro del formulario ──
   Ver el barco mientras eliges la hora sostiene la decision.
   Sin esto el paso 1 es una rejilla de numeros. */
.bk-shot { aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden;
  background: var(--surf-hi); margin-bottom: var(--s4); }
.bk-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-gal { display: flex; gap: var(--s2); margin-bottom: var(--s2); overflow-x: auto; padding-bottom: 2px; }
.bk-gal-i { flex: 0 0 auto; width: 72px; aspect-ratio: 16/10; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  background: none; cursor: pointer; opacity: .5; transition: all var(--dur) var(--ease); }
.bk-gal-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-gal-i[data-on] { opacity: 1; border-color: var(--lagoon); }
.bk-gal-i:hover { opacity: 1; }
@media (max-width: 640px) { .bk-shot { aspect-ratio: 3/2; } .bk-gal-i { width: 60px; } }


/* ── Telefono con pais ──
   Un turista no tiene por que saberse su prefijo. Ancho fijo para
   el selector: con 'auto' el nombre del pais lo estiraba hasta
   dejar el numero en 34px. */
.campo-fila { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s2); }
.campo-fila input { min-width: 0; width: 100%; }
.tel-cc { width: 132px; max-width: 132px; text-overflow: ellipsis;
  padding: 0 var(--s2); border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surf);
  color: var(--sand); font-size: var(--t-sm); font-family: var(--data); }
.tel-cc:focus { border-color: var(--lagoon); outline: none; }

/* ── Buscador de hoteles ── */
.hotel-busca { position: relative; }
.hotel-sug { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--abyss); border: 1px solid var(--line-hi); border-radius: var(--r-md);
  overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  max-height: 260px; overflow-y: auto; }
.hotel-op { display: block; width: 100%; text-align: left; padding: var(--s3) var(--s4);
  background: none; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; color: var(--sand); }
.hotel-op:last-child { border-bottom: 0; }
.hotel-op:hover { background: var(--surf-hi); }
.hotel-op b { display: block; font-size: var(--t-sm); font-weight: 600; }
.hotel-op span { display: block; font-size: var(--t-2xs); color: var(--faint); margin-top: 2px; }
.hotel-nuevo { padding: var(--s4); font-size: var(--t-xs); color: var(--haze); line-height: 1.55; }