/* ============================================================
   TOURISM WEB — ESTILOS BASE + SECCIONES + SLIDERS
   Requiere tokens.css y buttons.css cargados antes.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* LA PÁGINA NUNCA BAILA: ni de lado (overflow-x clip) ni arriba/abajo
   (overscroll-behavior corta el rebote; scrollbar-gutter evita el salto
   de layout cuando aparece/desaparece la barra de scroll en escritorio). */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  overflow-x: clip;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--brand); color: #06333A; }

/* Textura sutil de arena: da calidez sin pesar (0 requests) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 12% -8%, var(--bg-mint), transparent 65%),
    radial-gradient(800px 460px at 92% 4%, var(--bg-sky), transparent 60%);
  opacity: .7;
}

/* ============================================================
   TIPOGRAFÍA EDITORIAL
   El hero Y TODOS los subtítulos (h2, h3) van en Didone.
   El cuerpo va en sans. Nunca al revés.
   ============================================================ */
h1, h2, h3, .editorial {
  font-family: var(--font-editorial);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-hero);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }

/* Cursiva editorial para resaltar una palabra del titular */
.italic { font-style: italic; font-weight: 400; }
.thin   { font-weight: 300; }

/* Kicker / eyebrow: sans, mayúsculas, muy espaciado */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1rem;
}
.eyebrow { color: var(--brand-deep); }
.eyebrow--gold { color: var(--gold); }

.lead { font-size: var(--fs-lead); color: var(--text-soft); max-width: 58ch; }

/* Línea fina decorativa bajo el subtítulo (look de revista) */
.rule { width: 64px; height: 1px; background: var(--gold); margin: 1.4rem 0 2rem; border: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-2); }
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .rule { margin-inline: auto; }

/* ============================================================
   HERO — slider de 3 videos
   IZQUIERDA: titular editorial.  DERECHA: cuadro de reserva.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 12vh, 9rem) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}

/* --- Capa de videos en crossfade --- */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  /* El poster va de fondo (lo pone hero-slider.js): durante el crossfade
     nunca se ve un hueco blanco aunque el video no tenga frames aún. */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .85s var(--ease);   /* ágil: 1.4s se sentía lento y con flash */
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide video,
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Zoom lento: da vida sin oscurecer nada */
  animation: heroZoom 18s ease-out both;
}
.hero__slide.is-active video { animation-play-state: running; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* REGLA DURA: nada de scrim negro encima de la foto.
   Solo un degradado en el borde inferior (máx 35%) para anclar el texto,
   y text-shadow en el contenido. La imagen se ve limpia. */
.hero__media::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 35%;
  background: var(--grad-fade);
  pointer-events: none;
}

/* --- Contenido: split 2 columnas --- */
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 380px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Texto del hero SIEMPRE blanco sobre el video, con sombra —
   así se lee sin ponerle una capa oscura encima a la foto. */
.hero__copy { color: #fff; text-shadow: 0 2px 26px rgba(10,40,45,.55); }
/* TITULAR DEL HERO
   Si lo pintas con degradado (background-clip:text), usa una editorial de
   CONTRASTE BAJO — Young Serif, Abril Fatface, Rozha One. Una Didone clásica
   (Bodoni/Playfair) tiene trazos finos como una rayita que DESAPARECEN sobre
   el video. Y ojo: background-clip:text anula el text-shadow heredado; la
   legibilidad se recupera con filter: drop-shadow(). */
.hero__copy h1 { margin-bottom: 1.1rem; color: #fff; }
.hero__copy h1.h1--gradient {
  font-family: 'Young Serif', var(--font-editorial), serif;
  /* Amarillo sol → azul cielo, llamativo sobre el video (pedido del cliente) */
  background: linear-gradient(100deg, #FFE47A 0%, #F5C84C 42%, #8FD8FF 78%, #4FB8EC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 14px rgba(10, 40, 45, .6));
  /* Young Serif tiene descendentes largas: con line-height apretado la "g"
     se montaba sobre la línea de abajo ("gigante" / "Caribe") */
  line-height: 1.12;
  letter-spacing: 0;
}
@supports not (-webkit-background-clip: text) {
  .hero__copy h1.h1--gradient { color: #FFE47A; -webkit-text-fill-color: #FFE47A; }
}
.hero__copy .eyebrow { color: #fff; opacity: .95; }
/* Lead sobre video: SOMBRA POR LETRA, nunca un panel/caja detrás del párrafo
   (el cuadro se ve pegote). Doble sombra dura + halo suave. */
.hero__copy .lead {
  color: #fff;
  font-weight: 500;
  text-shadow:
    0 1px 2px rgba(10, 40, 45, .9),
    0 2px 6px rgba(10, 40, 45, .75),
    0 4px 18px rgba(10, 40, 45, .55);
}
.hero__copy .rule { background: rgba(255,255,255,.75); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Indicadores del slider de videos */
.hero__dots {
  position: absolute; bottom: clamp(1.2rem, 3vh, 2.2rem); left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: .55rem;
}
.hero__dot {
  width: 34px; height: 3px; border: 0; padding: 0;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.34);
  cursor: pointer;
  transition: background var(--t) var(--ease);
}
.hero__dot.is-active { background: #fff; }

/* ============================================================
   CUADRO DE RESERVA (hero, columna derecha)
   Glass, compacto, calcula precio y manda a WhatsApp (pago cash).
   ============================================================ */
.booking {
  background: var(--booking-bg);          /* blanco arena translúcido */
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -18px rgba(18,48,55,.45);
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--booking-text);
}
.booking__title {
  font-family: var(--font-editorial);
  font-size: 1.42rem;
  letter-spacing: -.01em;
  margin: 0 0 .15rem;
}
.booking__sub { font-size: .82rem; color: var(--text-soft); margin: 0 0 1.15rem; }

.field { margin-bottom: .85rem; }
.field label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .35rem;
}

/* ANTI-ZOOM iOS: 16px exactos en TODO campo. Nunca menos. */
.booking input,
.booking select,
.booking textarea,
input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .7rem .85rem;
  font-family: var(--font-body);
  font-size: 16px;          /* ← NO BAJAR. Safari iOS hace zoom con <16px */
  color: var(--text);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.booking select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23123037' stroke-width='2'><path d='M1 1l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.2rem;
}
.booking option { background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(63,199,180,.22);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

/* Total calculado en vivo */
.booking__total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  margin: 1.1rem 0 .9rem;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
}
.booking__total span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.booking__total strong {
  font-family: var(--font-editorial);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--brand-deep);
  letter-spacing: -.02em;
}
.booking__note {
  display: flex; align-items: center; gap: .45rem;
  font-size: .74rem; color: var(--text-soft);
  margin-top: .75rem; text-align: center; justify-content: center;
}
.booking .btn { width: 100%; }

/* ============================================================
   HERO EN TABLET Y MÓVIL
   El cuadro de reserva pasa DEBAJO del titular, ancho completo.
   ============================================================ */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .booking { max-width: 460px; }
}
@media (max-width: 768px) {
  /* El hero móvil es VERTICAL: pantalla completa y videos en 9:16
     (hero-slider.js carga las versiones -m.mp4 verticales). */
  /* El copy arranca PEGADO a la barra del header (pedido del cliente) */
  .hero { min-height: 100svh; padding-block: 5.4rem 3.5rem; }
  .hero__inner { align-content: start; }
  .hero__media::after { height: 60%; }  /* más anclaje: en móvil el texto ocupa más */
  .hero__copy { text-align: left; }
  /* Dos CTAs minimalistas LADO A LADO: Reservar + WhatsApp */
  .hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-top: 1.6rem;
  }
  .hero__actions .btn { padding: 0 .9rem; font-size: .9rem; }
  .booking { max-width: none; padding: 1.15rem; }
  .booking__total strong { font-size: 1.8rem; }
  .hero__dots { bottom: .8rem; }
}

/* ============================================================
   SLIDER GENÉRICO (galería y reseñas)
   scroll-snap nativo + arrastre + flechas. Cero dependencias.
   ============================================================ */
.slider { position: relative; }
.slider__track {
  display: flex;
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: .4rem 1.2rem;
  padding-inline: var(--pad-x);
  margin-inline: calc(var(--pad-x) * -1);
  scrollbar-width: none;
  cursor: grab;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.slider__track > * { scroll-snap-align: center; flex: 0 0 auto; }

.slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
}
.slider__nav--prev { left: calc(var(--pad-x) * -.2); }
.slider__nav--next { right: calc(var(--pad-x) * -.2); }
.slider__nav[disabled] { opacity: .3; pointer-events: none; }
@media (max-width: 768px) { .slider__nav { display: none; } } /* en móvil se desliza con el dedo */

.slider__dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1rem; }
.slider__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: all var(--t) var(--ease);
}
.slider__dot.is-active { width: 24px; border-radius: var(--r-pill); background: var(--brand); }

/* ---------- Galería ---------- */
.gallery .slider__track > figure {
  width: clamp(230px, 34vw, 420px);
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.gallery figure img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.1rem .95rem;
  font-family: var(--font-editorial);
  font-size: 1.05rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(10,40,45,.7);
  /* Degradado SOLO en el borde inferior (30% de la foto). Nunca un scrim completo. */
  background: linear-gradient(180deg, transparent 0%, rgba(18,48,55,.55) 100%);
}

/* ---------- Reseñas ---------- */
.reviews .slider__track > article {
  width: clamp(280px, 33vw, 400px);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.review__stars { color: var(--gold); letter-spacing: .18em; font-size: 1rem; }
.review__text {
  font-family: var(--font-editorial);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.review__who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.review__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.review__name { font-weight: 600; font-size: .92rem; }
.review__meta { font-size: .78rem; color: var(--text-dim); }

/* ============================================================
   SERVICIOS / TOURS — la FOTO llena la tarjeta ENTERA (como en
   la galería) y el texto va encima, en blanco con text-shadow
   para contrastar con la imagen. Nunca un scrim completo:
   solo el degradado del borde inferior.
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.1rem, 2vw, 1.8rem);
}
.card {
  position: relative;
  aspect-ratio: 4/5;
  min-height: 440px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--glow-soft); }
.card__media { position: absolute; inset: 0; overflow: hidden; }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); }

/* Precio: chip glass sobre la foto — legible, sin oscurecerla */
.card__price {
  position: absolute; top: .85rem; right: .85rem;
  padding: .42rem .85rem;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-family: var(--font-editorial);
  font-size: 1.05rem;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.card__price small { font-family: var(--font-body); font-size: .68rem; font-weight: 500; opacity: .8; }

/* Texto ENCIMA de la foto, en blanco con sombra (contraste AA con la
   imagen). Degradado solo en el borde inferior, como en la galería. */
.card__body {
  position: relative; z-index: 1;
  padding: 4.5rem 1.35rem 1.35rem;
  display: flex; flex-direction: column; gap: .7rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(10,40,45,.7);
  background: linear-gradient(180deg, transparent 0%, rgba(18,48,55,.62) 55%);
}
.card__body h3 { color: #fff; margin-bottom: 0; }
.card__meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  font-size: .72rem; letter-spacing: .06em;
  padding: .28rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-soft);
}
.card .tag { border-color: rgba(255,255,255,.5); color: #fff; text-shadow: none; }
.card__desc { color: rgba(255,255,255,.94); font-size: .94rem; margin: 0; }
.card .btn { margin-top: .5rem; }

/* ============================================================
   MENÚ DE RESTAURANTE
   ============================================================ */
.menu-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.menu-nav button {
  padding: .55rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: .86rem;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.menu-nav button.is-active { border-color: var(--gold); color: var(--gold); }

.menu-group { margin-bottom: 3rem; }
.menu-group h3 {
  display: flex; align-items: baseline; gap: 1rem;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.menu-group h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.menu-item {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 1.1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--r); }
.menu-item--noimg { grid-template-columns: 1fr auto; }
.menu-item__name { font-family: var(--font-editorial); font-size: 1.15rem; margin: 0 0 .2rem; }
.menu-item__desc { font-size: .88rem; color: var(--text-dim); margin: 0; }
.menu-item__price { font-family: var(--font-editorial); font-size: 1.2rem; color: var(--gold); white-space: nowrap; }
.menu-item__diet { font-size: .7rem; color: var(--brand); letter-spacing: .08em; }

@media (max-width: 560px) {
  .menu-item { grid-template-columns: 64px 1fr; grid-template-areas: "img name" "img desc" "img price"; row-gap: .2rem; }
  .menu-item img { width: 64px; height: 64px; grid-area: img; }
  .menu-item__body { grid-area: name; }
  .menu-item__price { grid-area: price; justify-self: start; font-size: 1.05rem; }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad-x);
  transition: background var(--t) var(--ease), backdrop-filter var(--t) var(--ease), padding var(--t) var(--ease);
}
/* Sobre el hero (video): blanco. Al hacer scroll: superficie clara. */
.header { color: #fff; text-shadow: 0 1px 12px rgba(10,40,45,.45); }
.header.is-stuck {
  background: var(--surface-blur-bg);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
  padding-block: .65rem;
  color: var(--text);
  text-shadow: none;
}
.header__logo { font-family: var(--font-editorial); font-size: 1.3rem; letter-spacing: .02em; text-decoration: none; color: inherit; }
.nav { display: flex; align-items: center; gap: 1.7rem; }
.nav a { font-size: .88rem; text-decoration: none; color: inherit; opacity: .9; transition: color var(--t) var(--ease), opacity var(--t) var(--ease); }
.nav a:hover { opacity: 1; color: var(--brand); }
.header.is-stuck .nav a:hover { color: var(--brand-deep); }

/* Selector de idioma */
.lang { display: flex; gap: .2rem; border: 1px solid currentColor; border-radius: var(--r-pill); padding: .18rem; opacity: .85; }
.lang button {
  min-width: 38px; height: 30px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: inherit;
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  cursor: pointer; transition: all var(--t) var(--ease);
}
.lang button.is-active { background: #fff; color: var(--brand-deep); text-shadow: none; }

.nav-toggle { display: none; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-grid; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(80vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.4rem;
    padding: 2rem var(--pad-x);
    background: var(--bg);
    color: var(--text);
    text-shadow: none;
    box-shadow: -20px 0 60px -20px rgba(18,48,55,.35);
    transform: translateX(100%);
    transition: transform var(--t) var(--ease-out-expo);
  }
  .nav.is-open { transform: none; }
  .nav a { font-family: var(--font-editorial); font-size: 1.6rem; opacity: 1; }
}

/* ============================================================
   FAQ (acordeón) — clave para SEO de IA
   ============================================================ */
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.2rem 0;
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-editorial);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; color: var(--brand); transition: transform var(--t) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--text-soft); margin: .9rem 0 0; max-width: 74ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.5rem; }
.footer h4 { font-family: var(--font-body); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 1rem; }
.footer a { display: block; text-decoration: none; color: var(--text-soft); font-size: .92rem; padding: .22rem 0; }
.footer a:hover { color: var(--brand); }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); font-size: .82rem; color: var(--text-dim); }

/* ============================================================
   REVELADO AL SCROLL
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   UTILIDADES
   ============================================================ */
.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; }
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }

/* ============================================================
   TARJETAS CON FOTO A TODA LA TARJETA (.card--photo)
   La foto ocupa el 100% y el texto va encima en blanco.
   Convierte mucho mejor que la tarjeta con foto arriba + caja de texto.
   El degradado ancla SOLO la zona del texto (regla del scrim: nunca
   una capa oscura sobre toda la foto).
   ============================================================ */
.card--photo { min-height: 460px; justify-content: flex-end; }
.card--photo .card__media { position: absolute; inset: 0; }
.card--photo .card__media img {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.card--photo .card__body {
  position: relative; z-index: 2;
  color: #fff;
  text-shadow: 0 2px 12px rgba(10, 40, 45, .75);
  background: linear-gradient(180deg, transparent 0%, rgba(10, 40, 45, .34) 30%, rgba(10, 40, 45, .66) 100%);
  padding-top: 3.2rem;
}
.card--photo h3 { color: #fff; }
.card--photo .card__desc { color: rgba(255, 255, 255, .93); }
.card--photo .tag {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
  text-shadow: none;
}

/* Utilidades de visibilidad por dispositivo */
.only-mobile { display: none !important; }
@media (max-width: 768px) {
  .only-mobile { display: inline-flex !important; }
  .hide-mobile { display: none !important; }
}

/* ============================================================
   HEADER MÓVIL COMPACTO
   VA AL FINAL DEL ARCHIVO A PROPÓSITO: las reglas base de
   .header / .header__logo / .lang están definidas más arriba y en
   cascada ganaría la última. Si metes esto en el @media de arriba,
   el logo y el selector de idioma se rompen en el teléfono.
   ============================================================ */
@media (max-width: 768px) {
  header.header { padding-inline: .8rem; gap: .45rem; }
  header.header .header__logo { font-size: .88rem; gap: .3rem !important; }
  header.header .header__logo span { white-space: nowrap; }  /* el nombre NUNCA en dos líneas */
  header.header .header__logo img { height: 46px !important; }
  header.header .lang { padding: .1rem; gap: .08rem; flex: 0 0 auto; opacity: 1; }
  header.header .lang button { min-width: 28px; height: 24px; font-size: .6rem; padding: 0 .26rem; letter-spacing: 0; }
  header.header .nav-toggle { width: 38px; height: 38px; flex: 0 0 auto; }
}

/* ============================================================
   TEMA 3D CYAN — pedido del cliente (2026-07-26)
   Fondo azul cyan clarito en toda la web + interfaz 3D:
   tarjetas flotantes con glassmorphism, sombras profundas,
   bordes iluminados, glow neón y efecto "sale de la pantalla".
   Va AL FINAL del archivo para ganar la cascada.
   ============================================================ */
:root {
  --bg: #E2F5FB;
  --bg-2: #D2EEF8;
  --bg-mint: #D8F6EE;
  --bg-sky: #D4EFFB;
  --bg-sun: #FBF2D6;
  /* pila de sombras 3D: profunda + cercana + borde iluminado interior */
  --d-edge: inset 0 1px 0 rgba(255, 255, 255, .95);
  --d-shadow:
    0 26px 50px -14px rgba(6, 60, 92, .30),
    0 10px 22px -8px rgba(6, 60, 92, .18),
    var(--d-edge);
  --shadow-3d: var(--d-shadow);
  --shadow-3d-hover:
    0 38px 68px -16px rgba(6, 60, 92, .38),
    0 16px 30px -10px rgba(6, 60, 92, .22),
    var(--d-edge);
  --glow-aqua: 0 0 26px rgba(63, 199, 180, .38);
  --glow-aqua-strong: 0 0 38px rgba(63, 199, 180, .55);
}

body {
  background:
    radial-gradient(1200px 600px at 85% -100px, rgba(127, 201, 232, .35), transparent 70%),
    radial-gradient(900px 500px at 0% 30%, rgba(63, 199, 180, .16), transparent 70%),
    linear-gradient(180deg, #E9F9FD 0%, #D9F1FA 50%, #E2F5FB 100%);
}
.section--alt { background: linear-gradient(180deg, #D2EEF8 0%, #C9EAF6 100%); }

/* ---------- Franja superior (header): letras blancas con borde negro ---------- */
.header .nav a,
.header__logo span {
  color: #fff !important;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, .85), -1px 1px 0 rgba(0, 0, 0, .85),
    1px -1px 0 rgba(0, 0, 0, .85), -1px -1px 0 rgba(0, 0, 0, .85),
    0 3px 10px rgba(0, 0, 0, .45);
}

/* ---------- Franja de prueba social ---------- */
.proof-strip {
  background: linear-gradient(90deg, rgba(63,199,180,.55), rgba(127,201,232,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px -12px rgba(6,60,92,.35);
}
.proof-strip span {
  color: #fff;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, .8), -1px 1px 0 rgba(0, 0, 0, .8),
    1px -1px 0 rgba(0, 0, 0, .8), -1px -1px 0 rgba(0, 0, 0, .8),
    0 2px 8px rgba(0, 0, 0, .4);
}

/* ---------- Tarjetas 3D flotantes (tours, razones, galería, reseñas) ---------- */
.card,
.why-card,
.slider__track figure,
.slider__track article {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-3d), var(--glow-aqua);
  transition: transform .35s var(--ease-out-expo, ease), box-shadow .35s ease;
  will-change: transform;
}
.card:hover,
.why-card:hover,
.slider__track figure:hover,
.slider__track article:hover {
  transform: translateY(-8px) scale(1.012);
  box-shadow: var(--shadow-3d-hover), var(--glow-aqua-strong);
}
.slider__track article {
  background: linear-gradient(165deg, rgba(255,255,255,.94), rgba(232,249,253,.9));
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}

/* ---------- Cuadro de reserva: glass 3D que sale de la pantalla ---------- */
.booking {
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    0 34px 60px -16px rgba(6, 60, 92, .40),
    0 12px 26px -10px rgba(6, 60, 92, .22),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    var(--glow-aqua);
}

/* ---------- Botones 3D: profundidad + borde iluminado ---------- */
.btn {
  box-shadow:
    0 14px 28px -10px rgba(6, 60, 92, .35),
    0 4px 10px -4px rgba(6, 60, 92, .25),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.98); }

/* ---------- Flechas y dots con glow ---------- */
.icon-btn {
  box-shadow: 0 10px 22px -8px rgba(6, 60, 92, .35), inset 0 1px 0 rgba(255,255,255,.7);
}
.slider__dot.is-active, .hero__dot.is-active { box-shadow: var(--glow-aqua); }

/* En móvil las sombras se suavizan (rendimiento y limpieza visual) */
@media (max-width: 768px) {
  .card, .why-card, .slider__track figure, .slider__track article, .booking {
    box-shadow:
      0 16px 30px -12px rgba(6, 60, 92, .30),
      0 6px 14px -6px rgba(6, 60, 92, .18),
      inset 0 1px 0 rgba(255, 255, 255, .8);
  }
}

/* ============================================================
   RESERVA EN GLASS "HUMO" CASI TRANSPARENTE — pedido del cliente
   Vidrio esmerilado: fondo casi transparente, blur fuerte (el humo),
   borde luminoso y todo el texto en blanco con sombra para leerse
   sobre el video. Va al final para ganar la cascada.
   ============================================================ */
.booking {
  background: linear-gradient(170deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.10) 55%, rgba(190,235,245,.12) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,.55);
}
/* Sin soporte de blur, el "casi transparente" dejaría el texto ilegible:
   se cae a un vidrio oscuro translúcido que mantiene el texto blanco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .booking { background: rgba(10, 45, 60, .62); }
}
.booking__title,
.booking__sub,
.booking .field label,
.booking__total span,
.booking__note {
  color: #fff;
  text-shadow: 0 1px 2px rgba(10,40,45,.8), 0 2px 8px rgba(10,40,45,.5);
}
.booking__total strong {
  color: #fff;
  text-shadow: 0 1px 2px rgba(10,40,45,.7), 0 0 18px rgba(63,199,180,.8);
}
.booking__total { border-top: 1px solid rgba(255,255,255,.35); }

/* Campos: vidrio translúcido con texto blanco */
.booking input,
.booking select,
.booking textarea {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  text-shadow: 0 1px 2px rgba(10,40,45,.6);
}
.booking input::placeholder { color: rgba(255,255,255,.75); }
.booking input:focus,
.booking select:focus,
.booking textarea:focus {
  background: rgba(255, 255, 255, .30);
  border-color: rgba(255, 255, 255, .9);
}
/* Flecha del select y el icono del calendario, en blanco.
   OJO: el shorthand background de arriba resetea repeat/position —
   se redeclaran aquí o la flecha se repite como patrón. */
.booking select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='white' stroke-width='2'><path d='M1 1l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 14px 9px;
}
.booking input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .9; }
/* El desplegable nativo se mantiene legible */
.booking option { background: #0E3742; color: #fff; }

/* ============================================================
   LETRAS CON COLOR EN EL CUADRO DE RESERVA — pedido del cliente
   Título con el mismo gradiente amarillo→azul del hero; etiquetas
   en amarillo sol y subtextos en azul cielo. Al final: gana la cascada.
   ============================================================ */
.booking__title {
  background: linear-gradient(100deg, #FFE47A 0%, #F5C84C 48%, #8FD8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(10, 40, 45, .6));
}
@supports not (-webkit-background-clip: text) {
  .booking__title { color: #FFE47A; -webkit-text-fill-color: #FFE47A; }
}
.booking__sub { color: #CDEFFF; }
.booking .field label { color: #FFE47A; }
.booking__total span { color: #FFE47A; }
.booking__total strong {
  background: linear-gradient(100deg, #FFE47A 0%, #7FEFD9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(10, 40, 45, .55)) drop-shadow(0 0 14px rgba(63, 199, 180, .5));
}
@supports not (-webkit-background-clip: text) {
  .booking__total strong { color: #7FEFD9; -webkit-text-fill-color: #7FEFD9; }
}
.booking__note { color: #CDEFFF; }

/* ============================================================
   LETRAS DEL BOOKING CON LOS COLORES DEL LOGO — pedido del cliente
   Como el logo: crema hueso con contorno azul marino ("EXPERIENCIAS")
   y turquesa brillante ("ISLA"). Sin degradados. Gana la cascada.
   ============================================================ */
.booking__title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #F2EBD3;                       /* crema hueso del logo */
  -webkit-text-fill-color: #F2EBD3;
  filter: none;
  text-shadow:
    1px 1px 0 #16294F, -1px 1px 0 #16294F,
    1px -1px 0 #16294F, -1px -1px 0 #16294F,
    0 3px 10px rgba(10, 30, 60, .55);   /* contorno azul marino, como el logo */
}
.booking .field label,
.booking__total span {
  color: #58DFCB;                        /* turquesa "ISLA" */
  text-shadow:
    1px 1px 0 rgba(13, 30, 60, .9),
    0 2px 6px rgba(10, 30, 60, .45);
}
.booking__sub,
.booking__note {
  color: #F2EBD3;                        /* crema suave */
  text-shadow: 0 1px 2px rgba(13, 30, 60, .8), 0 2px 8px rgba(10, 30, 60, .45);
}
.booking__total strong {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #58E5CF;                        /* turquesa brillante con glow */
  -webkit-text-fill-color: #58E5CF;
  filter: none;
  text-shadow:
    1px 1px 0 #16294F, -1px 1px 0 #16294F,
    1px -1px 0 #16294F, -1px -1px 0 #16294F,
    0 0 16px rgba(88, 229, 207, .65);
}

/* ============================================================
   ARREGLOS MÓVIL (2026-07-27) — reportados por el cliente en iPhone
   1. Menú lateral ilegible  2. Cortes de color entre secciones
   3. Franja oscura sobrante bajo el hero
   Va al FINAL para ganar la cascada al bloque "TEMA 3D CYAN".
   ============================================================ */

/* ---------- 1. MENÚ LATERAL ----------
   El bloque 3D pinta TODA la nav de blanco con contorno negro para
   que se lea sobre el video. En el panel lateral el fondo es claro,
   así que ahí el mismo estilo dejaba las letras ilegibles. */
@media (max-width: 900px) {
  .header .nav {
    width: min(78vw, 300px);
    background: linear-gradient(160deg, #F4FCFE 0%, #E2F5FB 100%);
    border-left: 1px solid rgba(255, 255, 255, .9);
    box-shadow: -24px 0 70px -18px rgba(6, 60, 92, .45);
    padding-top: 5.5rem;                 /* los enlaces arrancan bajo el header */
    justify-content: flex-start;
    gap: 1.15rem;
    z-index: 1;                          /* por DEBAJO del logo y la hamburguesa */
  }
  /* CON LA PÁGINA SCROLLEADA el header lleva .is-stuck y con él un
     backdrop-filter. Un ancestro con backdrop-filter (igual que con filter
     o transform) se vuelve el marco de referencia de sus hijos
     position:fixed: el panel dejaba de medir la pantalla y se encogía a la
     altura del header. Mientras el menú está abierto lo soltamos. */
  .header.has-nav-open,
  .header.is-stuck.has-nav-open {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
  /* El botón de cerrar y el logo tienen que quedar encima del panel:
     si el panel los tapa, el menú abierto no se puede cerrar. */
  .header .header__logo,
  .header .lang,
  .header .nav-toggle { position: relative; z-index: 3; }
  /* Sin el fondo del header, el logo se lee sobre el velo oscuro */
  .header.has-nav-open .header__logo span {
    color: #fff !important;
    text-shadow:
      1px 1px 0 rgba(0, 0, 0, .85), -1px 1px 0 rgba(0, 0, 0, .85),
      1px -1px 0 rgba(0, 0, 0, .85), -1px -1px 0 rgba(0, 0, 0, .85);
  }
  /* Con el menú abierto la hamburguesa se ve sobre fondo claro */
  .header .nav.is-open ~ div .nav-toggle,
  .header .nav-toggle[aria-expanded="true"] {
    background: #fff;
    color: var(--brand-deep);
    box-shadow: 0 6px 18px -6px rgba(6, 60, 92, .45);
  }
  .header .nav a {
    /* MEDIDO 2026-08-05: var(--brand-deep) (#1E9E8E) sobre el panel claro da
       3.20:1 y AA pide 4.5:1 para este tamaño. #0B3B36 es el mismo aqua, más
       oscuro, y sube a 12:1. Solo aquí: el token global no se toca. */
    color: #0B3B36 !important;
    text-shadow: none !important;         /* fuera el contorno negro del tema 3D */
    font-size: 1.35rem;
    width: 100%;
    padding: .45rem 0;
    border-bottom: 1px solid rgba(6, 60, 92, .10);
  }
  .header .nav a:last-child { border-bottom: 0; }

  /* Velo sobre la página para que el panel se lea como una capa aparte */
  .header .nav::before {
    content: "";
    position: fixed; inset: 0;
    right: min(78vw, 300px);
    background: rgba(6, 40, 60, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t) var(--ease);
  }
  .header .nav.is-open::before { opacity: 1; }
}

/* ---------- 2 y 3. EMPALME HERO → PRUEBA SOCIAL → TOURS ----------
   El degradado del hero terminaba en seco y la franja de prueba
   social entraba con otro color: se veía una línea partiendo la
   pantalla en dos. Ahora las tres capas se funden. */
.proof-strip {
  background: linear-gradient(180deg, #CDEFEA 0%, #DCF3FA 100%);
  box-shadow: none;
  border-top: 0;
}
.proof-strip span {
  color: #0E3B4F;                        /* azul profundo: se lee sin contorno */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

@media (max-width: 768px) {
  /* El video mantiene la proporción de la PANTALLA, no la del hero:
     el hero crece con el formulario y antes el video se estiraba,
     dejando una banda muerta abajo. */
  /* overflow: el zoom del hero arranca en scale(1.08) y el vídeo asomaba
     por debajo del contenedor: se veía una banda azul oscura cruzando
     la pantalla a media altura. */
  .hero__media { height: 100svh; bottom: auto; overflow: hidden; }
  /* El degradado llega a su color final ANTES del borde y lo mantiene:
     si el último tono opaco cae justo en el píxel final, el salto se ve
     como una línea azul cruzando la pantalla. */
  .hero__media::after {
    height: 46%;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(6, 45, 70, .30) 38%,
      rgba(108, 178, 190, .78) 70%,
      #CDEFEA 90%,
      #CDEFEA 100%);
  }
  /* Por debajo del video, el hero sigue con el MISMO color en el que
     termina su degradado y con el que arranca la franja de prueba
     social: sin ese empate se veía una línea partiendo la pantalla. */
  .hero { background: #CDEFEA; }
  /* Los puntos van anclados al borde del VÍDEO (100svh), no al del hero:
     el hero es más alto y los dejaba flotando en la zona sin imagen. */
  .hero__dots { top: calc(100svh - 2.2rem); bottom: auto; }

  .proof-strip { padding: 1.1rem 0 1.4rem !important; }
  .proof-strip .wrap { gap: .75rem 1.4rem; }
  .proof-strip span { font-size: .95rem; }

  /* Los dos CTA con exactamente la misma caja: antes el de WhatsApp
     se veía montado por el padding heredado del botón de cristal. */
  .hero__actions .btn {
    height: 52px;
    margin: 0;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

/* ---------- EMPALME HERO → FRANJA, TAMBIÉN EN ESCRITORIO ----------
   El degradado del hero moría en el azul del vídeo y la franja de
   prueba social entraba en verde agua: se veía un escalón de color. */
@media (min-width: 769px) {
  .hero__media { overflow: hidden; }
  .hero__media::after {
    height: 38%;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(6, 45, 70, .34) 52%,
      rgba(140, 200, 206, .82) 84%,
      #CDEFEA 97%,
      #CDEFEA 100%);
  }
  .hero__dots { bottom: 1.6rem; }
}

/* ============================================================
   PAQUETES — ficha completa de cada tour (sección #paquetes)
   Foto a la izquierda, detalle a la derecha; en móvil se apila.
   Mismo lenguaje 3D que las tarjetas del home.
   ============================================================ */
.pack-list { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }

.pack {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  background: linear-gradient(165deg, rgba(255,255,255,.96), rgba(232,249,253,.92));
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 22px;
  box-shadow: var(--shadow-3d), var(--glow-aqua);
  overflow: hidden;
  scroll-margin-top: 90px;
}
.pack__media { position: relative; min-height: 100%; }
/* ENCUADRE DESDE ARRIBA: en estas fotos la gente y su captura están en la
   mitad superior; recortando desde el centro se quedaban sin cabeza. */
.pack__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

.pack__body { padding: clamp(1.2rem, 2.4vw, 1.9rem) clamp(1.2rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.4vw, 1.9rem) 0; }
.pack__name { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 .6rem; }

.pack__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-bottom: .9rem; }
.pack__meta-item {
  font-size: .86rem; font-weight: 600; color: var(--brand-deep);
  background: rgba(63,199,180,.14);
  border: 1px solid rgba(63,199,180,.28);
  border-radius: var(--r-pill);
  padding: .28rem .7rem;
}
.pack__desc { color: var(--text-soft); margin: 0 0 1.2rem; max-width: 68ch; }

.pack__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.6rem;
  margin-bottom: 1.3rem;
}
.pack__h4 {
  font-family: var(--font-body);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 .55rem;
}
.pack__h4 small { font-weight: 500; letter-spacing: .04em; text-transform: none; opacity: .75; }

/* Tarifas: etiqueta a la izquierda, precio a la derecha */
.pack-rates { list-style: none; margin: 0; padding: 0; }
.pack-rates li {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .42rem 0;
  border-bottom: 1px dashed rgba(6,60,92,.16);
}
.pack-rates li:last-child { border-bottom: 0; }
.pack-rate__label { font-size: .93rem; color: var(--text-soft); }
.pack-rate__price {
  font-family: var(--font-editorial);
  font-size: 1.18rem; font-weight: 600;
  color: var(--brand-deep);
  white-space: nowrap;
}

/* Incluye / no incluye con palomita y cruz */
.pack-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .34rem; }
.pack-check li { position: relative; padding-left: 1.5rem; font-size: .93rem; color: var(--text-soft); }
.pack-check li::before { position: absolute; left: 0; top: -.05em; font-weight: 700; }
.pack-check--yes li::before { content: "✓"; color: #17A67F; }
.pack-check--no  li::before { content: "✕"; color: #C2705B; }

.pack-foot {
  margin-top: 1.6rem; text-align: center;
  font-size: .9rem; color: var(--text-soft);
}

@media (max-width: 860px) {
  .pack { grid-template-columns: 1fr; }
  /* 230px muestran casi entera una foto apaisada; una vertical solo llegaba
     al 40% del alto, así que esa se lleva una caja más alta y entran la
     cara Y el pescado (~64%). */
  .pack__media { height: 230px; }
  .pack__media.is-portrait { height: 330px; }
  .pack__body { padding: 1.15rem 1.15rem 1.4rem; }
  .pack__cols { grid-template-columns: 1fr; gap: 1.1rem; }
  .pack .btn { width: 100%; }
}

/* ============================================================
   DESGLOSE DEL ANTICIPO (2026-07-29) — pedido del cliente
   El total sigue mandando visualmente; debajo, en pequeño, cuánto
   aparta hoy y cuánto paga el día del tour. Mismos colores del logo
   que el resto del cuadro: turquesa "ISLA" y crema hueso.
   Va al FINAL para ganar la cascada al bloque "TEMA 3D CYAN".
   ============================================================ */
.booking__split {
  display: grid; gap: .35rem;
  margin: -.35rem 0 .2rem;
  padding-bottom: .2rem;
}
.booking__split[hidden] { display: none; }   /* [hidden] pierde contra display:grid */

.booking__split-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
}
.booking__split-row span {
  font-size: .74rem; letter-spacing: .04em;
  color: #F2EBD3;                            /* crema hueso del logo */
  text-shadow: 0 1px 2px rgba(13, 30, 60, .8), 0 2px 8px rgba(10, 30, 60, .45);
}
.booking__split-row strong {
  font-size: .92rem; font-weight: 700; white-space: nowrap;
  color: #F2EBD3;
  text-shadow: 0 1px 2px rgba(13, 30, 60, .85);
}
/* La línea del anticipo es la que importa: turquesa brillante, como el total */
.booking__split-row--now span,
.booking__split-row--now strong {
  color: #58E5CF;                            /* turquesa "ISLA" */
  -webkit-text-fill-color: #58E5CF;
  text-shadow: 1px 1px 0 rgba(13, 30, 60, .9), 0 0 12px rgba(88, 229, 207, .5);
}
.booking__split-row--now strong { font-size: 1.05rem; }

/* En MÓVIL el vídeo mide 100svh y el cuadro de reserva cae DEBAJO, sobre el
   fondo claro (#CDEFEA): ahí el crema da 1.02:1 de contraste y el turquesa
   1.28:1 — medido sobre la captura real. El azul marino del logo da 11.8:1,
   así que el desglose se pinta con él y sin sombra oscura (que sobre fondo
   claro solo ensucia). En escritorio el cuadro sigue sobre el vídeo y
   conserva los colores crema/turquesa. */


/* ============================================================
   VARIAS FOTOS POR SERVICIO (2026-07-29)
   Cuando un tour trae más de una foto, se apilan y se van
   cruzando solas. Las fotos van superpuestas: la de arriba es
   la que se ve. Sin librerías y sin mover el layout.
   ============================================================ */
[data-photos] { position: relative; }
[data-photos] img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  /* se conserva el zoom del hover de las tarjetas */
  transition: opacity .55s ease, transform var(--t-slow) var(--ease);   /* fundido más corto: la foto cambia cada 2 s */
}
/* La primera se queda en el flujo para que el contenedor conserve su
   altura (en «Paquetes» la foto es una columna del grid: con todas las
   imágenes absolutas, la columna se quedaría sin alto). */
[data-photos] img:first-child { position: relative; }
[data-photos] img.is-on { opacity: 1; }

/* Puntitos: solo para que se note que hay más de una foto */
.photo-dots {
  position: absolute; left: 0; right: 0; bottom: .6rem;
  display: flex; justify-content: center; gap: .3rem;
  z-index: 2; pointer-events: none;
}
.photo-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.45);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: background .3s ease, width .3s ease;
}
.photo-dots i.is-on { background: #fff; width: 16px; border-radius: 3px; }

/* En la ficha de Paquetes los puntos van dentro de la columna de la foto */
.pack__media .photo-dots { bottom: .8rem; }

@media (prefers-reduced-motion: reduce) {
  [data-photos] img { transition: none; }
}

/* ============================================================
   TARJETAS DE LA SECCIÓN DE YATES (2026-07-30)
   Las fotos de los yates son MUY apaisadas (2.2:1) y la tarjeta
   normal es vertical 4:5: al recortar solo se veía agua y un
   trozo de casco. Aquí la foto va entera, arriba, y el texto
   debajo sobre fondo claro. Medido: se ve el barco completo.
   ============================================================ */
.yachts .cards, .excursions .cards { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.yachts .card--photo, .excursions .card--photo {
  aspect-ratio: auto;
  min-height: 0;
  justify-content: flex-start;
  background: rgba(255, 255, 255, .78);
}
.yachts .card--photo .card__media, .excursions .card--photo .card__media {
  position: relative; inset: auto;
  width: 100%; aspect-ratio: 20 / 9;   /* el recorte del flyer es ~2.2:1 */
}
.yachts .card--photo .card__media img, .excursions .card--photo .card__media img { position: absolute; inset: 0; }

/* Texto debajo de la foto: fondo claro, sin degradado ni sombras */
.yachts .card--photo .card__body, .excursions .card--photo .card__body {
  background: none;
  color: var(--text);
  text-shadow: none;
  padding: 1.05rem 1.15rem 1.3rem;
}
.yachts .card--photo h3, .excursions .card--photo h3 { color: var(--brand-deep); }
.yachts .card--photo .card__desc, .excursions .card--photo .card__desc { color: var(--text-soft); }
.yachts .card--photo .tag, .excursions .card--photo .tag {
  background: rgba(63, 199, 180, .14);
  color: var(--brand-deep);
  border-color: rgba(63, 199, 180, .3);
}
/* El precio va abajo a la IZQUIERDA: los flyers traen el nombre del yate
   rotulado arriba (OCEANI, AZUL, RED FIRE) y el chip lo tapaba. */
.yachts .card--photo .card__price, .excursions .card--photo .card__price {
  top: auto; right: auto;
  bottom: .7rem; left: .7rem;
}

@media (max-width: 560px) {
  .yachts .card--photo .card__media { aspect-ratio: 16 / 9; }   /* los yates son apaisados; las excursiones se quedan cuadradas */
}

/* Las dos imágenes de excursiones son cuadradas y ya traen su propio
   título: se enseñan ENTERAS, sin recortar. */
.excursions .card--photo .card__media { aspect-ratio: 1 / 1; }
.excursions .cards { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); max-width: 900px; margin-inline: auto; }

/* ============================================================
   CUADRO DE RESERVA EN MÓVIL (2026-07-31) — reportado por el cliente
   En escritorio el cuadro va sobre el vídeo y el "glass humo" casi
   transparente funciona. En móvil el vídeo mide 100svh y el cuadro
   cae DEBAJO, sobre el fondo claro: el vidrio transparente se comía
   los campos y los botones (medido antes: 1.02:1 de contraste).
   Aquí lleva fondo azul marino propio, el del logo, y el texto claro.
   ============================================================ */
@media (max-width: 768px) {
  .booking {
    background: linear-gradient(165deg,
        rgba(22, 41, 79, .93) 0%,
        rgba(16, 58, 88, .93) 55%,
        rgba(13, 70, 92, .94) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .38);
    box-shadow: 0 18px 40px -14px rgba(6, 30, 50, .55);
  }
  /* Campos: un punto más claros que el cuadro, para que se distingan */
  .booking .field input,
  .booking .field select {
    background-color: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .40);
    color: #FFFFFF;
  }
  .booking .field input::placeholder { color: rgba(255, 255, 255, .65); }
  /* Sobre el azul, el desglose vuelve a los colores del logo */
  .booking__split-row span,
  .booking__split-row strong { color: #F2EBD3; -webkit-text-fill-color: #F2EBD3; }
  .booking__split-row--now span,
  .booking__split-row--now strong { color: #58E5CF; -webkit-text-fill-color: #58E5CF; }
}

/* Los yates traen el nombre rotulado a los lados de la foto: en móvil
   el recorte 16:9 se los comía ("RED FI…", "OCEAN…"). Se deja la misma
   proporción que en escritorio para que la foto se vea entera. */
@media (max-width: 560px) {
  .yachts .card--photo .card__media { aspect-ratio: 20 / 9; }
}

/* ============================================================
   PUNTITOS DEL HERO — FUERA EN MÓVIL (2026-08-03)
   Iban anclados a top: calc(100svh - 2.2rem) para pegarse al
   borde del vídeo. Pero en una ventana corta (la webview de
   WhatsApp, que se come alto con su barra) esa línea cae DENTRO
   del cuadro de reserva: medido 402x700 -> los puntos en y=665
   y el <select> en y=655-703, encima del "Elige una experiencia".
   En el móvil no aportan nada (los vídeos pasan solos), así que
   se quitan y con ellos toda la dependencia de svh.
   ============================================================ */
@media (max-width: 900px) {
  .hero__dots { display: none !important; }
}

/* ============================================================
   ENLACE "PANEL" EN EL MENÚ (2026-08-05)
   Acceso del dueño a /admin. Va dentro de .nav, así que hay que
   ganarle al bloque "TEMA 3D CYAN" (que pinta .header .nav a de
   blanco con contorno negro) sin perder la legibilidad ni sobre
   el vídeo del hero ni dentro del panel lateral claro del móvil.
   ============================================================ */
.header .nav a.nav__panel {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .34rem .8rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: #fff !important;
  background: rgba(11, 42, 56, .42);
  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55) !important;
  opacity: 1;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.header .nav a.nav__panel svg { flex: none; opacity: .95; }

.header .nav a.nav__panel:hover,
.header .nav a.nav__panel:focus-visible {
  background: rgba(11, 42, 56, .62);
  border-color: #fff;
  color: #fff !important;
}

/* Con el header pegado arriba el fondo se aclara: cambia a tinta oscura */
.header.is-stuck .nav a.nav__panel {
  color: #0B3B36 !important;            /* 10.7:1 sobre el header claro */
  background: rgba(63, 199, 180, .16);
  border-color: rgba(6, 60, 92, .28);
  text-shadow: none !important;
}
.header.is-stuck .nav a.nav__panel:hover {
  background: rgba(63, 199, 180, .3);
  border-color: rgba(6, 60, 92, .5);
}

/* --- Dentro del panel lateral del móvil: fondo claro, sin borde inferior --- */
@media (max-width: 900px) {
  .header .nav a.nav__panel,
  .header.is-stuck .nav a.nav__panel {
    align-self: flex-start;
    margin-top: .5rem;
    min-height: 44px;                    /* área de toque cómoda */
    padding: .5rem 1.05rem;
    width: auto;
    font-size: 1rem;
    font-family: var(--font-body);
    color: #0B3B36 !important;           /* 11.3:1 dentro del panel lateral */
    background: rgba(63, 199, 180, .17);
    border: 1px solid rgba(6, 60, 92, .26);
    border-bottom: 1px solid rgba(6, 60, 92, .26);
    text-shadow: none !important;
  }
}

.header .nav a.nav__panel:focus-visible {
  outline: 3px solid rgba(63, 199, 180, .8);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .header .nav a.nav__panel { transition: none; }
}