/* ═══════════════════════════════════════════════════════════════
   ATLANTIS — Excursiones en Barco · Blanes, Costa Brava
   Main Stylesheet  ·  Mobile-first refactor
═══════════════════════════════════════════════════════════════ */

/* ─── 1. LOCAL FONTS ────────────────────────────────────────── */
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'),
       url('../fonts/GeneralSans-Regular.woff')  format('woff');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2'),
       url('../fonts/GeneralSans-Semibold.woff')  format('woff');
  font-weight: 600;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel-SemiBold.woff2') format('woff2');
  font-weight: 600 700;
  font-style:  normal;
  font-display: swap;
}

/* Pinyon Script reserved for ONE use only: #sobre-atlantis "El Atlantis"
   section title (the boat-name signature reveal). Do NOT use as a brand mark
   in headers, footers, navigation, OG images, or anywhere else. */
@font-face {
  font-family: 'Pinyon Script';
  src: url('../fonts/PinyonScript-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ─── 2. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* ── New Palette ── */
  --sand:          #F5F0E8;
  --deep-teal:     #020A30;
  --teal-mid:      #061A55;
  --turquoise:     #4A90E8;
  --turquoise-dark: #1E5BA3; /* WCAG AA on sand/white for small text */
  --coral:         #F25C2C;
  --sand-gold:     #E8C98A;
  --white:         #FDFCFB;
  --text:          #1A2A30;
  --text-muted:    #4A6A9C;

  /* ── Legacy aliases (backward compat for old CSS/JS) ── */
  --azul-cielo:        #90E0EF;
  --gris-suave:        #EAE6DE;
  --gris-medio:        #9AACB3;
  --dorado-claro:      #F0C040;
  --dorado-oscuro:     #A07810;
  --madera:            #8B5E3C;
  --madera-clara:      #C4965A;

  /* ── Typography ── */
  --font-logo:    'Cinzel', 'Trajan Pro', serif;
  --font-script:  'Pinyon Script', serif;   /* RESERVED: only for #sobre-atlantis title */
  --font-display: 'Bebas Neue', sans-serif;
  --font-label:   'General Sans', sans-serif;
  --font-body:    'General Sans', sans-serif;

  /* ── Layout ── */
  --header-height: 60px;
  --max-width:     1280px;

  /* ── Spacing ── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-6: 1.5rem;   --sp-8: 2rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-24: 6rem;

  /* ── Radii ── */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 16px;
  --r-xl: 24px; --r-pill: 9999px;

  /* ── Shadows ── */
  --sh-sm:   0 1px 4px rgba(2,10,48,.1);
  --sh-md:   0 4px 16px rgba(2,10,48,.15);
  --sh-lg:   0 8px 32px rgba(2,10,48,.2);
  --sh-xl:   0 16px 64px rgba(2,10,48,.25);
  --sh-gold: 0 4px 28px rgba(232,201,138,.4);

  /* ── Transitions ── */
  --t-fast:   150ms ease;
  --t-base:   260ms ease;
  --t-slow:   420ms ease;
  --t-bounce: 420ms cubic-bezier(.165,.84,.44,1);

  /* ── Z-index ── */
  --z-drop: 100; --z-over: 800; --z-head: 900;
}

/* Desktop: restore larger header height */
@media (min-width: 768px) {
  :root { --header-height: 72px; }
}

/* ─── 3. RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--sand);
  line-height: 1.65;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

img, svg { display: block; max-width: 100%; }
a, button, input, select, textarea, [role="button"] { touch-action: manipulation; }
a        { color: inherit; text-decoration: none; }
ul, ol   { list-style: none; }
button   { cursor: pointer; border: none; background: none; font-family: inherit; }

::selection { background: var(--turquoise); color: #fff; }

:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 2px;
}

/* Focus ring override for gold buttons — turquoise on gold has
   2:1 contrast (fails WCAG 1.4.11). Deep-teal gives 12:1. */
.btn-primary:focus-visible,
.btn-booking-next:focus-visible,
.btn-booking-submit:focus-visible:not(:disabled),
.scroll-top-btn:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--sand-gold);
  color: var(--deep-teal);
  font-weight: 600;
  border-radius: var(--r-md);
  text-decoration: none;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ─── Widow prevention ───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }

/* ─── 4. KEYFRAME ANIMATIONS ────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dotBlink {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: .5; }
}

/* Slow Ken Burns — hero photo drifts from 1.05 → 1.10 over 28s.
   Subtle enough to feel cinematographic, not distracting. The
   reduced-motion override at the bottom of the file pins .hero-photo
   to transform: none. */
@keyframes heroKenBurns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}

/* Entrance helpers — ease-out-quart for refined deceleration. */
.anim { opacity: 0; animation: fadeInUp .85s cubic-bezier(.165,.84,.44,1) forwards; }
.d1 { animation-delay: .1s; }
.d2 { animation-delay: .28s; }
.d3 { animation-delay: .46s; }
.d4 { animation-delay: .64s; }
.d5 { animation-delay: .82s; }

/* Above-the-fold: fade only (no translateY) to prevent CLS */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero .anim { animation-name: fadeIn; }

/* ─── 5. HEADER ─────────────────────────────────────────────── */
.header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-height);
  z-index: var(--z-head);
  transition: box-shadow var(--t-base);
  padding-top: env(safe-area-inset-top, 0px);
}

/* Glass layer */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(2,10,48,.85) 0%,
    rgba(2,10,48,.7) 100%
  );
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background var(--t-base), border-color var(--t-base);
}

.header.scrolled::before {
  background: rgba(2,10,48,.97);
  border-bottom-color: rgba(212,160,23,.18);
}
.header.scrolled { box-shadow: 0 4px 36px rgba(2,10,48,.45); }

.nav-container {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  /* Mobile: narrower padding */
  padding: 0 var(--sp-6);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

@media (min-width: 768px) {
  .nav-container { padding: 0 var(--sp-8); }
}

/* Logo */
.header-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}
.header-logo:hover { opacity: .82; }

.header-logo-img {
  height: 38px;
  width: auto;
}

@media (min-width: 768px) {
  .header-logo-img {
    height: 46px;
  }
}

.logo-text { display: flex; flex-direction: column; line-height: 1; }

.logo-name {
  font-family: var(--font-logo);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--white);
}

.logo-sub {
  display: none;
}

@media (min-width: 768px) {
  .logo-sub {
    display: block;
    font-size: clamp(0.65rem, 1.5vw, 0.72rem);
    font-weight: 500;
    letter-spacing: .18em;
    color: var(--sand-gold);
    text-transform: uppercase;
    margin-top: 1px;
  }
}

/* Desktop nav — hidden on mobile, shown at 1024px+ */
.header-nav {
  display: none;
}

@media (min-width: 1024px) {
  .header-nav {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    gap: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-container { gap: var(--sp-2); }
  .header-nav a { padding: var(--sp-2) var(--sp-2); font-size: .75rem; }
}

.header-nav a {
  display: block;
  position: relative;
  padding: var(--sp-2) var(--sp-4);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.82);
  border-radius: var(--r-md);
  transition: color var(--t-fast), background var(--t-fast);
}

.header-nav a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: calc(100% - 2rem);
  height: 1px;
  background: var(--sand-gold);
  transition: transform var(--t-base);
}
.header-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.header-nav a:hover::after { transform: translateX(-50%) scaleX(1); }

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* ── Language selector — always visible, compact on mobile/tablet ── */
.lang-selector { position: relative; display: flex; }

/* Mobile: hide CTA button (lang selector stays visible next to hamburger) */
.btn-header-cta { display: none; }

@media (min-width: 1024px) {
  .btn-header-cta { display: flex; }
}

@media (max-width: 1023px) {
  .lang-btn { padding: 8px 11px; gap: 4px; }
  .lang-chevron { display: none; }
  .lang-dropdown { right: 0; min-width: 150px; }
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  min-height: 44px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,.88);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.lang-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }

.lang-current-flag { font-size: .9rem; line-height: 1; }

.lang-code { font-family: var(--font-logo); font-size: .72rem; }

.lang-chevron {
  opacity: .55;
  transition: transform var(--t-fast);
}
.lang-selector.open .lang-chevron { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  min-width: 158px;
  background: rgba(2,10,48,.97);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
  box-shadow: var(--sh-xl);
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  transform-origin: top right;
  pointer-events: none;
  /* visibility hides the dropdown from tab order + accessibility tree
     when closed. Delayed transition keeps the fade-out animation. */
  visibility: hidden;
  transition: opacity var(--t-bounce), transform var(--t-bounce), visibility 0s linear var(--t-bounce);
  z-index: var(--z-drop);
}
.lang-selector.open .lang-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
  visibility: visible;
  transition: opacity var(--t-bounce), transform var(--t-bounce), visibility 0s linear 0s;
}

.lang-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 8px 11px;
  border-radius: var(--r-md);
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  transition: color var(--t-fast), background-color var(--t-fast);
  text-align: left;
}
.lang-opt:hover           { background: rgba(255,255,255,.08); color: #fff; }
.lang-opt.active          { color: var(--dorado-claro); background: rgba(212,160,23,.1); }
.lang-flag                { font-size: 1rem; line-height: 1; }

/* ── Header CTA ── */
.btn-header-cta {
  align-items: center;
  padding: 9px 20px;
  background: linear-gradient(135deg, var(--sand-gold) 0%, var(--dorado-claro) 100%);
  color: var(--text);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-gold), 0 2px 8px rgba(0,0,0,.22);
  white-space: nowrap;
  transition: transform var(--t-bounce), box-shadow var(--t-bounce);
}
.btn-header-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 36px rgba(212,160,23,.5), 0 4px 16px rgba(0,0,0,.25);
}
.btn-header-cta:active { transform: translateY(0) scale(.99); }

/* ── Hamburger — shown mobile, hidden at 1024px+ ── */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px; height: 48px;
  margin-left: auto;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md);
}

@media (min-width: 1024px) {
  .hamburger { display: none; }
}

.ham-line {
  display: block;
  width: 20px; height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}
.hamburger.active .ham-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.active .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active .ham-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile menu ── */
.mobile-menu {
  position: fixed;
  inset: var(--header-height) 0 0;
  background: var(--deep-teal);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Mobile: compact padding */
  padding: 1.5rem 1.25rem 2rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-slow) cubic-bezier(.77,0,.175,1),
              visibility 0s var(--t-slow);
  z-index: var(--z-over);
  overflow-y: auto;
}

@media (min-width: 768px) {
  .mobile-menu { padding: var(--sp-12) var(--sp-8) var(--sp-16); }
}

.mobile-menu.open { transform: translateX(0); visibility: visible; transition: transform var(--t-slow) cubic-bezier(.77,0,.175,1); }

.mob-nav-list { display: flex; flex-direction: column; gap: var(--sp-1); }

.mob-nav-link {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color var(--t-fast), transform var(--t-base);
}
.mob-nav-link:hover { color: var(--sand-gold); transform: translateX(var(--sp-4)); }

.mob-footer { display: flex; flex-direction: column; gap: var(--sp-6); }

.mob-lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.mob-lang-btn {
  padding: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  font-size: .875rem;
  font-weight: 700;
  color: rgba(255,255,255,.72);
  letter-spacing: .05em;
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}
.mob-lang-btn:hover,
.mob-lang-btn.active {
  background: rgba(212,160,23,.15);
  border-color: rgba(212,160,23,.4);
  color: var(--dorado-claro);
}

.btn-mob-cta {
  display: block;
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--sand-gold) 0%, var(--dorado-claro) 100%);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--r-lg);
  letter-spacing: .04em;
}

/* ─── 6. HERO ─────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Mobile: 100dvh minimum */
@media (min-width: 768px) {
  .hero { align-items: flex-end; min-height: 100svh; min-height: 100dvh; }
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-bg picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: 50% 40%;
  transform: scale(1.04);
  animation: heroKenBurns 18s linear infinite alternate;
}

@media (min-width: 480px) {
  .hero-photo {
    object-position: 50% 35%;
    transform: scale(1.1);
  }
}

@media (min-width: 768px) {
  .hero-photo { object-position: 50% 30%; }
}

@media (min-width: 1280px) {
  .hero-photo {
    object-position: 50% 30%;
    transform: none;
  }
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: none;
}

@media (min-width: 768px) {
  .hero-video {
    display: block;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(2,10,48,.85) 0%,
    rgba(2,10,48,.5) 40%,
    rgba(2,10,48,.35) 100%
  );
}

/* Mobile base (was max-width:480px override) */
.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sp-4) max(var(--sp-4), env(safe-area-inset-right, 0px)) max(var(--sp-6), env(safe-area-inset-bottom, 0px)) max(var(--sp-4), env(safe-area-inset-left, 0px));
  gap: var(--sp-6);
}

@media (min-width: 480px) {
  .hero-container { padding: var(--sp-6) max(var(--sp-6), env(safe-area-inset-right, 0px)) max(var(--sp-8), env(safe-area-inset-bottom, 0px)) max(var(--sp-6), env(safe-area-inset-left, 0px)); gap: var(--sp-8); }
}

@media (min-width: 768px) {
  .hero-container { padding: 0 max(var(--sp-6), env(safe-area-inset-right, 0px)) var(--sp-12) max(var(--sp-6), env(safe-area-inset-left, 0px)); }
}

@media (min-width: 1024px) {
  .hero-container {
    padding: 0 var(--sp-8) var(--sp-16);
    grid-template-columns: 1fr;
    padding-top: var(--sp-8);
    text-align: left;
  }
}

.hero-content {
  max-width: 640px;
}

.hero-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-label);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: var(--sp-4);
}

.hero-label-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  /* Slow shimmer along the eyebrow line: a brighter highlight slides
     across every 5s, suggesting sunlight glinting off the horizon.
     Brand delight, distributed and almost subliminal. */
  background: linear-gradient(
    90deg,
    var(--turquoise) 0%,
    var(--turquoise) 40%,
    rgba(232,201,138,.85) 50%,
    var(--turquoise) 60%,
    var(--turquoise) 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  animation: heroLineShimmer 5s cubic-bezier(.165,.84,.44,1) infinite;
  flex-shrink: 0;
}

@keyframes heroLineShimmer {
  0%, 35%   { background-position: 100% 0; }
  65%, 100% { background-position: -100% 0; }
}

/* Mobile: smaller title */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 10vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}

@media (min-width: 768px) {
  .hero-title { font-size: clamp(48px, 6.5vw, 80px); }
}

.hero-title em {
  font-style: normal;
  color: var(--turquoise);
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255,255,255,.92);
  max-width: 480px;
  margin-bottom: var(--sp-4);
}

/* Hero trust badge (#6) */
.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: var(--sp-6);
}

/* Hero CTA guarantee (#14) */
.hero-cta-guarantee {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  text-align: center;
  margin-top: var(--sp-1);
}
@media (min-width: 480px) {
  .hero-cta-guarantee { text-align: left; }
}

/* Mobile: stacked ctas */
.hero-ctas {
  display: flex;
  gap: var(--sp-4);
  flex-direction: column;
  align-items: stretch;
  flex-wrap: wrap;
}

.hero-ctas .btn-primary {
  width: 100%;
  justify-content: center;
}

@media (min-width: 480px) {
  .hero-ctas { flex-direction: row; align-items: flex-start; }
  .hero-ctas .btn-primary { width: auto; justify-content: initial; }
}

@media (min-width: 1024px) {
  .hero-ctas { justify-content: flex-start; }
}

/* Mobile: stats stacked */
.hero-stats {
  flex-direction: column;
  gap: var(--sp-4);
}

.stat-div {
  width: 36px;
  height: 1px;
}

.float-badge { display: none; }

@media (min-width: 480px) {
  .hero-stats { flex-direction: row; gap: var(--sp-6); }
  .stat-div   { width: auto; height: auto; }
}

@media (min-width: 768px) {
  .hero-stats { gap: var(--sp-6); padding: var(--sp-3) var(--sp-6); }
  .stat-n     { font-size: 1.25rem; }
}

@media (min-width: 1024px) {
  .hero-badge,
  .hero-sub  { margin-left: auto; margin-right: auto; }
  .hero-stats { margin: 0 auto; }
  .float-badge { left: 0; bottom: -12px; }
}

/* ── Landscape iPhone support ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    height: 100svh;
    height: 100dvh;
  }
  .hero-title {
    font-size: clamp(32px, 8vw, 56px);
  }
  .hero-sub {
    display: none;
  }
  .hero-container {
    padding-bottom: var(--sp-4);
  }
}

/* Suppress removed hero elements just in case any remain in DOM */
.hero-gradient, .hero-glow, .hero-rays, .ray,
.hero-bubbles, .bubble, .nautical-grid,
.hero-wave, .hero-visual, .hero-stats,
.hero-badge, .float-badge, .compass,
.media-frame, .ph-icon, .ph-label, .ph-dim,
.hero-badge, .badge-dot { display: none; }

/* ─── 7. BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--sand-gold) 0%, var(--dorado-claro) 100%);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .025em;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-gold), 0 4px 18px rgba(0,0,0,.28);
  transition: all var(--t-bounce);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 44px rgba(212,160,23,.55), 0 6px 22px rgba(0,0,0,.28);
}
.btn-primary:active { transform: translateY(0) scale(.99); }

/* ─── 8. SECTION PLACEHOLDER ────────────────────────────────── */
.sections-placeholder {
  padding: var(--sp-16) var(--sp-8);
  text-align: center;
  background: var(--sand);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(2,62,138,.22);
  font-family: var(--font-body);
  font-weight: 600;
  border-top: 1px dashed rgba(2,62,138,.1);
}

/* ─── 9. STATS BAND ─────────────────────────────────────── */
/* ==========================================================================
   BOOKING SECTION
   ========================================================================== */

.booking-section {
  background: linear-gradient(to bottom, var(--white) 85%, var(--sand) 100%);
  /* Mobile: less padding */
  padding: 60px 0 80px;
  position: relative;
  overflow: clip;
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
  margin-top: -40px;
  padding-top: calc(var(--sp-24) + 40px);
}

/* Intentional 640px breakpoint: booking form benefits from earlier desktop layout */
@media (min-width: 640px) {
  .booking-section { padding: calc(var(--sp-24) + 40px) 0 100px; }
}

.booking-section::before {
  content: '';
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(74,144,232,.07) 0%, transparent 70%);
  pointer-events: none;
}

.booking-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ─────────────────────────────────── */
.booking-header {
  text-align: center;
  margin-bottom: 40px;
}

.booking-badge-row {
  margin-bottom: 12px;
}

.booking-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(74,144,232,.12);
  color: var(--turquoise);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
}

.booking-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  color: var(--deep-teal);
  margin: 0 0 12px;
  line-height: 1.15;
}
.booking-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

.booking-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Emotion banner ──────────────────────────── */
.booking-emotion-banner {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  max-height: 160px;
}
.booking-emotion-banner img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
@media (min-width: 640px) {
  .booking-emotion-banner { max-height: 200px; }
  .booking-emotion-banner img { height: 200px; }
}

/* ── Price anchor ────────────────────────────── */
.booking-price-anchor {
  text-align: center;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  padding: 10px 16px;
  background: rgba(74,144,232,.06);
  border-radius: var(--r-md);
  border: 1px solid rgba(74,144,232,.1);
}
.booking-price-anchor strong {
  color: var(--deep-teal);
  font-size: 1.1rem;
}

/* ── Guarantee badge ─────────────────────────── */
.booking-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin-top: 8px;
  background: rgba(74,144,232,.06);
  border: 1px solid rgba(74,144,232,.18);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--turquoise-dark);
}
.booking-guarantee svg {
  color: var(--turquoise-dark);
  flex-shrink: 0;
}

/* Micro-copy reassurance */
.b-micro-copy {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: var(--sp-2) 0 0;
  font-style: italic;
  opacity: 0.85;
}

/* ── Step 4 narrative line ───────────────────── */
/* Plain italic copy above the structured summary card. The previous
   gold-gradient wrapper read as the AI tip-box pattern; we let the
   summary card carry the visual weight and reserve gold for the
   actual price total inside it. */
.b-narrative {
  margin: 0 0 var(--sp-4);
  padding: 0 0 var(--sp-3);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
  border-bottom: 1px solid rgba(2,10,48,.08);
}

/* ── Progress ────────────────────────────────── */
.booking-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 16px;
}

/* Compact steps for 4-step layout */
.bp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 48px;
}

@media (min-width: 640px) {
  .bp-step { min-width: 64px; }
}

.bp-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(74,106,156,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-muted);
  background: var(--white);
  transition: border-color .3s, background .3s, color .3s;
}

/* Mobile: slightly larger label for readability */
.bp-label {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color .3s;
}

@media (min-width: 640px) {
  .bp-label { font-size: .65rem; }
}

/* Connector between steps */
.bp-connector {
  flex: 1;
  height: 2px;
  background: rgba(74,106,156,.25);
  margin: 0 2px;
  margin-bottom: 22px;
  transition: background .3s;
  max-width: 28px;
}

@media (min-width: 640px) {
  .bp-connector { max-width: 60px; }
}

@media (max-width: 389px) {
  .bp-step { min-width: 36px; }
  .bp-label { display: none; }
  .bp-circle { width: 36px; height: 36px; font-size: 0.85rem; }
  .bp-connector { max-width: 20px; margin: 0 2px; }
}

/* Active and completed step styles */
.bp-step.bp-active .bp-circle {
  border-color: var(--turquoise);
  background: var(--turquoise);
  color: var(--white);
}
.bp-step.bp-active .bp-label { color: var(--deep-teal); }

.bp-step.bp-done .bp-circle {
  border-color: var(--sand-gold);
  background: var(--sand-gold);
  color: var(--text);
}
.bp-step.bp-done .bp-label { color: var(--deep-teal); }

.bp-connector.bp-done { background: var(--turquoise); }

/* ── Card ─────────────────────────────────────── */
.booking-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--sh-md);
  overflow: clip;
}

/* ── Step ─────────────────────────────────────── */
/* Animation: ease-out-quart per design law (DESIGN.md: "Ease out with
   exponential curves. No bounce, no elastic"). El curve cubic-bezier
   (.165,.84,.44,1) decelera de forma natural al llegar al final del
   travel — graceful sin overshoot. Antes: .3s ease genérico (curve
   simétrica, más mecánica). */
.booking-step {
  animation: bstep-in 320ms cubic-bezier(.165, .84, .44, 1);
}

@keyframes bstep-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bstep-in-reverse {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.b-hidden { display: none !important; }

/* Mobile: compact inner padding */
.bstep-inner {
  padding: 16px 16px 8px;
}

@media (min-width: 640px) {
  .bstep-inner { padding: 20px 28px 8px; }
}

/* ── Form grid ────────────────────────────────── */
/* Mobile: single column */
.booking-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 16px;
}

@media (min-width: 640px) {
  .booking-grid-2 { grid-template-columns: 1fr 1fr; }
}

.b-field { display: flex; flex-direction: column; gap: 6px; }
.b-field--full { grid-column: 1 / -1; margin-top: 4px; }

.b-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--deep-teal);
  letter-spacing: .3px;
}

@media (min-width: 768px) {
  .b-label { font-size: 0.9rem; }
}

/* iOS zoom prevention: font-size >= 1rem */
.b-input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--deep-teal);
  background: var(--white);
  border: 1.5px solid rgba(74,106,156,.25);
  border-radius: var(--r-md);
  padding: 14px 16px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  box-sizing: border-box;
}

.b-input:hover:not(:focus):not(:disabled) {
  /* Subtle border darken on hover signals "this is interactive".
     Antes no había hover state — el visitante no recibía feedback
     visual al pasar el cursor. */
  border-color: rgba(74,106,156,.45);
}

.b-input:focus {
  border-color: var(--turquoise-dark);
  box-shadow: 0 0 0 3px rgba(74,144,232,.18);
  background: var(--white);
}

.b-input--date { cursor: pointer; }

/* Chevron data-URI SVG: fill antes hardcoded a %23666 (gris plano);
   ahora tinted a %234A6A9C = --text-muted (#4A6A9C) para integrar
   con la familia cromática brand (mismo color que placeholders y
   helpers). */
select.b-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A6A9C' d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* Phone prefix + number group */
/* Prefix input width: 110px → 92px → 96px. Iteración 1 (92px) tenía
   un edge case detectado en review: con "+1242" (5 chars máximo
   real), scrollWidth excedía clientWidth por 3px — texto no 100%
   visible sin scroll horizontal mínimo. 96px deja margen real para
   el caso edge. Mantiene el espíritu del distill (era 110px) pero
   sin el clipping. */
.b-phone-group {
  display: flex;
  gap: var(--sp-2);
}
.b-phone-group select,
.b-phone-group .b-input--prefix {
  width: 96px;
  flex-shrink: 0;
}
.b-phone-group input:not(.b-input--prefix) {
  flex: 1;
  min-width: 0;
}

.b-textarea {
  resize: vertical;
  min-height: 80px;
}

/* ── Disclosure pattern para campos opcionales ────────────────────
   Link inline tipográfico (no botón con chrome) que expande un
   campo extra. Patrón actual: comentarios del Step 2. Reduce
   densidad vertical de Step 2 mobile sin sacrificar la opción. */
.b-disclosure {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--turquoise-dark);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  margin-top: 2px;
  text-align: left;
  transition: color var(--t-fast);
}
.b-disclosure:hover { color: var(--deep-teal); }
.b-disclosure:focus-visible {
  outline: 2px solid var(--turquoise-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Collapsed state — display:none preserva el value del textarea
   (los inputs hidden todavía submiten su valor). Specificity .b-field
   .b-collapsed bate al display:flex del .b-field base. */
.b-field.b-collapsed { display: none; }

/* Pair of counters (Adultos + Niños) — always 2-col, even on the
   narrowest viewports, because counter widgets are compact and
   horizontally-paired natural. */
.b-counters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.b-input--counter {
  text-align: center;
  font-weight: 700;
  max-width: 48px;
  padding: 8px 4px;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.b-error {
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--coral);
  min-height: 1em;
}

.b-input--error {
  border-color: var(--coral);
  background: rgba(242,92,44,.05);
}

/* Bug fix: cuando un input errored recibía focus, la regla
   .b-input:focus sobreescribía el border coral con turquoise-dark
   — la señal de error visualmente desaparecía aunque el campo
   siguiera inválido. Ahora preservamos chrome coral en focus de
   errored inputs (focus ring también pasa a coral familia). */
.b-input--error:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(242,92,44,.15);
}

/* ── Counter buttons ──────────────────────────── */
.b-counter {
  display: flex;
  align-items: center;
}

/* Touch target: 44×44 minimum */
.counter-btn {
  width: 44px; height: 44px;
  background: var(--sand);
  border: 1.5px solid rgba(74,106,156,.25);
  color: var(--deep-teal);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.counter-btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.counter-btn:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* Distill: hover solid → tint. Tap + repetidamente para sumar adultos
   flasheaba el botón a turquoise-dark sólido en cada tap — fricción
   visual. Ahora hover = tint sutil + border darken + glyph dark
   (estado "ready"); :active queda solid para el feedback inmediato
   del tap. Alinea con action-ecosystem tinted del admin-polish. */
.counter-btn:hover {
  background: rgba(74,144,232,.10);
  border-color: var(--turquoise-dark);
  color: var(--turquoise-dark);
}

.counter-btn:active {
  background: rgba(74,144,232,.20);
  border-color: var(--turquoise-dark);
  color: var(--turquoise-dark);
}

.counter-btn:focus-visible {
  outline: 2px solid var(--turquoise-dark);
  outline-offset: 2px;
}

.counter-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Availability grid ────────────────────────── */
.avail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.avail-hint {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
  padding: 20px 0;
}

/* Touch target: min-height 44px. Chrome aligerado: border 2 → 1.5px,
   opacity .18 → .12, radius via token. Alinea con el sistema chromeless
   del calendar (cal-day) — bordering quieto + state-shifts via tint
   más que peso de chrome. */
.slot-card {
  background: var(--sand);
  border: 1.5px solid rgba(74,106,156,.12);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  min-height: 44px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.slot-card:hover:not(.slot-full):not(.slot-disabled) {
  border-color: var(--turquoise-dark);
  background: rgba(74,144,232,.06);
  transform: translateY(-1px);
}

.slot-card.slot-selected {
  border-color: var(--turquoise-dark);
  background: rgba(74,144,232,.10);
  box-shadow: 0 0 0 3px rgba(74,144,232,.12);
}

/* Keyboard focus ring for selectable slot cards. Same family as
   .cal-day and .cal-nav from booking-polish-1.0 — outline 2px
   turquoise-dark + offset 2px, brand-aligned focus indicator. */
.slot-card:focus-visible {
  outline: 2px solid var(--turquoise-dark);
  outline-offset: 2px;
}

.slot-card.slot-full {
  opacity: .55;
  cursor: not-allowed;
}

.slot-card.slot-disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* SVG glyphs replace native emojis (☀️🌤️🌅) that render inconsistently
   across platforms. currentColor lets the icon tint with state — defaults
   to --turquoise-dark, blends with the brand cool family. */
.slot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--turquoise-dark);
  line-height: 1;
}
.slot-icon svg { display: block; }
.slot-card.slot-full .slot-icon { color: var(--text-muted); opacity: .6; }
.slot-card.slot-disabled .slot-icon { color: var(--text-muted); opacity: .5; }
.slot-card.slot-selected .slot-icon { color: var(--turquoise-dark); }

.slot-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .85rem;
  color: var(--deep-teal);
  /* Defensive: long evento names without spaces (e.g. hyphenated)
     mustn't overflow a 120px slot-card. word-break: break-word allows
     graceful wrap dentro del card. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.slot-time {
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--text-muted);
}

.slot-avail {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--turquoise-dark);
  margin-top: 2px;
}

/* "Completo" / "No disponible" en slot cards: misma semántica que
   cal-day--full (demand-closed), debe usar el mismo tinte cool slate
   que neutralizamos en booking-polish-1.0. Coral queda reservado para
   urgencia genuina, no estado de listado.
   La card entera ya tiene opacity reducida, así que el label hereda
   visualmente el "muted" sin necesidad del rojo. */
.slot-full-lbl, .slot-disabled-lbl {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

.slot-scarce-lbl {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  color: var(--dorado-oscuro);
  margin-top: 2px;
}

.slot-card.slot-scarce {
  border-color: var(--sand-gold);
  background: rgba(232,201,138,.12);
}

.slot-card.slot-scarce:hover {
  border-color: var(--dorado-claro);
  background: rgba(232,201,138,.22);
}

.scarce-warning {
  color: var(--dorado-oscuro) !important;
  font-size: 1.1rem;
}

/* Exclusive event slot */
.slot-card.slot-exclusive {
  border-color: var(--sand-gold);
  background: rgba(232,201,138,.10);
}
.slot-card.slot-exclusive:hover {
  border-color: var(--dorado-oscuro);
  background: rgba(232,201,138,.20);
}
.evento-codigo-box {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(232,201,138,.10);
  border: 1px solid var(--sand-gold);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.evento-codigo-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.evento-codigo-input {
  padding: 8px 12px;
  border: 1px solid rgba(74,106,156,.25);
  border-radius: var(--r-sm);
  font-size: 1rem;
  max-width: 200px;
  font-family: var(--font-body);
}

/* Slot descriptions */
.slot-desc {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: var(--sp-1);
  letter-spacing: 0.2px;
}
.slot-popular-badge {
  display: inline-block;
  background: var(--sand-gold);
  color: var(--deep-teal);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.8px;
  margin-top: var(--sp-1);
}
.slot-event-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--sand-gold), var(--dorado-claro));
  color: var(--deep-teal);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.5px;
  margin-top: var(--sp-1);
}
.slot-event-price {
  display: block;
  font-weight: 700;
  color: var(--turquoise);
  font-size: 0.85rem;
  margin-top: var(--sp-1);
}
.cal-event-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sand-gold);
  margin: 2px auto 0;
}

/* Field group labels */
.b-fieldgroup {
  margin-bottom: var(--sp-4);
}
.b-fieldgroup-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(74, 144, 232, 0.15);
}

/* ── Price preview ────────────────────────────── */
/* Distill: drop gradient bg + border + radius (decorative chrome para
   info de 2 strings). Queda hairline arriba + amount typographic anchor
   a la derecha. Lee como "subtotal de checkout" bien hecho.
   El hairline 0.10 deep-teal alinea con la jerarquía editorial de las
   demás section-block del proyecto.
   flex-wrap permite que en viewports estrechos con detail string largo
   (e.g. event pricing en DE "2 × 65€ Boat Party + 1 × 35€ Kind") el
   amount drop a su propia línea sin overflow horizontal del card. */
.price-preview {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(2,10,48,.10);
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--deep-teal);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
}

.price-preview:empty { display: none; }

.price-preview-label {
  color: var(--text-muted);
  font-weight: 500;
}

.price-preview-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--deep-teal);
  letter-spacing: -0.01em;
}

/* ── Booking summary ──────────────────────────── */
.booking-summary {
  background: var(--deep-teal);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  color: var(--white);
}

.bs-title {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand-gold);
  margin: 0 0 12px;
}

/* Mobile: single column */
.bs-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  .bs-rows { grid-template-columns: 1fr 1fr; }
}

.bs-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bs-label {
  font-family: var(--font-body);
  font-size: .72rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .8px;
}

.bs-value {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--white);
}

.bs-total-row {
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bs-total-label {
  font-family: var(--font-body);
  font-size: .82rem;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .8px;
}

.bs-total-amount {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--sand-gold);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ── Payment title ────────────────────────────── */
.payment-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .82rem;
  color: var(--deep-teal);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 12px;
}

/* ── Payment grid ─────────────────────────────── */
/* Mobile: single column */
.payment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  .payment-grid { grid-template-columns: 1fr 1fr; }
}

/* Touch target: min-height 44px */
.pay-card {
  background: var(--sand);
  border: 2px solid rgba(74,106,156,.18);
  border-radius: 12px;
  padding: 14px 14px 12px;
  min-height: 44px;
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 0 10px;
  transition: border-color .2s, background .2s, transform .15s;
  position: relative;
  width: 100%;
}

.pay-card:hover {
  border-color: var(--turquoise-dark);
  background: rgba(74,144,232,.06);
  transform: translateY(-1px);
}

.pay-card.pay-selected {
  border-color: var(--turquoise-dark);
  background: rgba(74,144,232,.08);
  box-shadow: 0 0 0 3px rgba(74,144,232,.15);
}

.pay-icon {
  font-size: 1.4rem;
  grid-row: 1 / 3;
  padding-top: 2px;
}

.pay-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .82rem;
  color: var(--deep-teal);
  display: block;
}

.pay-desc {
  font-family: var(--font-body);
  font-size: .72rem;
  color: var(--text-muted);
  display: block;
}

.pay-check {
  grid-row: 1 / 3;
  color: var(--turquoise-dark);
  font-weight: 700;
  font-size: 1rem;
  opacity: 0;
  transition: opacity .2s;
  padding-top: 2px;
}

.pay-card.pay-selected .pay-check { opacity: 1; }

/* ── Privacy row ──────────────────────────────── */
.privacy-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0;
  cursor: pointer;
}

.privacy-check {
  width: 24px; height: 24px;
  min-width: 24px;
  margin-top: 1px;
  accent-color: var(--turquoise-dark);
  flex-shrink: 0;
  cursor: pointer;
  padding: 10px;
  box-sizing: content-box;
}

/* Legal copy crítica del consent (privacidad + T&C). Antes:
   0.8rem en text-muted #4A6A9C sobre white = ~5.5:1 (borderline AA).
   Iteración 1: 0.85rem + rgba(26,42,48,.75) — review live medió
   6.43:1 sobre el bg warm-off-white real del card (rgb 253,252,251),
   no los 7:1 AAA esperados.
   Iteración 2 (ahora): alpha .75 → .85. Da ~8:1 sobre el bg real
   del card. AAA garantizado. Sigue siendo secundario en jerarquía
   (no full --text). */
.privacy-text {
  font-family: var(--font-body);
  font-size: .85rem;
  color: rgba(26,42,48,.85);
  line-height: 1.55;
}

/* ── Navigation buttons ───────────────────────── */
/* Mobile: compact padding */
.booking-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  border-top: 1px solid rgba(2,10,48,0.06);
  margin-top: 16px;
  position: sticky;
  bottom: 0;
  background: var(--white);
  z-index: 10;
}

@media (min-width: 640px) {
  .booking-nav { padding: 20px 40px 28px; }
}

/* Nota "avísanos si no hay salidas tu día" a la izquierda del botón Siguiente
   en el paso 1. Misma firma de botón que .btn-booking-next pero en verde
   WhatsApp (relleno + texto blanco). Enlaza a WhatsApp. */
.booking-nav-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 56%;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #25D366 0%, #1EBE5B 100%);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.2;
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(37,211,102,.32), 0 2px 8px rgba(0,0,0,.12);
  transition: transform var(--t-bounce), box-shadow var(--t-bounce);
}

.booking-nav-note svg {
  flex: 0 0 auto;
  color: var(--white);
}

.booking-nav-note:hover,
.booking-nav-note:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 32px rgba(37,211,102,.45), 0 6px 18px rgba(0,0,0,.16);
}
.booking-nav-note:active {
  transform: translateY(0) scale(.99);
}

@media (max-width: 480px) {
  .booking-nav-note {
    font-size: 0.74rem;
    max-width: 58%;
    gap: 6px;
    padding: 9px 16px;
  }
}

.btn-booking-prev,
.btn-booking-next,
.btn-booking-submit {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  border-radius: 50px;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 28px;
}

/* Prev: ghost-style demoted, transparente con borde sutil */
.btn-booking-prev {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid rgba(74,106,156,.25);
}
.btn-booking-prev:hover,
.btn-booking-prev:active {
  background: rgba(74,106,156,.06);
  color: var(--text);
  border-color: rgba(74,106,156,.4);
  transform: translateY(-1px);
}

/* Next: dorado de vela — el componente firma del sistema */
.btn-booking-next {
  background: linear-gradient(135deg, var(--sand-gold) 0%, var(--dorado-claro) 100%);
  color: var(--text);
  font-weight: 700;
  letter-spacing: .025em;
  box-shadow: var(--sh-gold), 0 4px 18px rgba(0,0,0,.18);
  transition: transform var(--t-bounce), box-shadow var(--t-bounce);
}
.btn-booking-next:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 36px rgba(212,160,23,.5), 0 6px 20px rgba(0,0,0,.2);
}
.btn-booking-next:active {
  transform: translateY(0) scale(.99);
}

/* Submit: misma firma dorada en el momento de máxima conversión */
.btn-booking-submit {
  background: linear-gradient(135deg, var(--sand-gold) 0%, var(--dorado-claro) 100%);
  color: var(--text);
  font-weight: 700;
  letter-spacing: .025em;
  box-shadow: var(--sh-gold), 0 4px 18px rgba(0,0,0,.18);
  min-width: 160px;
  min-height: 44px;
  justify-content: center;
  transition: transform var(--t-bounce), box-shadow var(--t-bounce);
}

@media (min-width: 640px) {
  .btn-booking-submit { min-width: 200px; }
}

.btn-booking-submit:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 36px rgba(212,160,23,.5), 0 6px 20px rgba(0,0,0,.2);
}
.btn-booking-submit:active:not(:disabled) {
  transform: translateY(0) scale(.99);
}
/* Disabled state: distinct visual instead of opacity-fade.
   Replaces the .55 opacity which dropped contrast below 3:1. */
.btn-booking-submit:disabled {
  background: var(--sand);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn-booking-submit.btn-booking-whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 4px 14px rgba(37,211,102,.35);
  gap: 8px;
}
.btn-booking-submit.btn-booking-whatsapp:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(37,211,102,.45);
}

/* ── Submit spinner ───────────────────────────── */
.submit-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(26,42,48,.25);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
/* WhatsApp variant uses green bg → spinner blanco */
.btn-booking-submit.btn-booking-whatsapp .submit-spinner {
  border-color: rgba(255,255,255,.4);
  border-top-color: #fff;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Success screen ───────────────────────────── */
/* Mobile: compact */
.booking-success {
  padding: 32px 20px 32px;
  text-align: center;
}

@media (min-width: 640px) {
  .booking-success { padding: 48px 40px 40px; }
}

.success-icon-wrap {
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.success-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sand-gold) 0%, var(--dorado-claro) 100%);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-gold), 0 4px 20px rgba(0,0,0,.15);
  animation: success-pop .5s cubic-bezier(.165,.84,.44,1) both;
  position: relative;
  z-index: 1;
}
.success-icon svg { width: 36px; height: 36px; }

.success-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(232,201,138,.4);
  animation: success-ring 1.2s ease-out .4s both;
}

@keyframes success-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes success-ring {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.success-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 400;
  color: var(--deep-teal);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.success-sub {
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--text-muted);
  margin: 0 0 28px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ── Payment step testimonial ────────── */
.pay-testimonial {
  position: relative;
  background: linear-gradient(135deg, #f8f6f1 0%, #f0ede5 100%);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  margin: var(--sp-4) 0;
}
.pay-testimonial::before {
  content: "\201C";
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-3);
  font-family: Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sand-gold);
  opacity: .85;
}
.pay-testimonial-quote {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 var(--sp-2);
}
.pay-testimonial-author {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Payment single (Step 4: only one method enabled) ── */
/* Calmly states the payment processor without faking a chooser. */
.pay-single {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 14px;
  background: var(--sand);
  border: 1px solid rgba(74,106,156,.18);
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.pay-single-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: var(--r-sm);
}
.pay-single-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pay-single-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--deep-teal);
}
.pay-single-desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ── Payment method selector (Step 3) ────────── */
.pay-methods { display: grid; gap: 8px; margin-bottom: 12px; }
.pay-method-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 2px solid rgba(74,106,156,.18); border-radius: var(--r-md);
  background: var(--sand); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
  text-align: left; width: 100%; font-family: var(--font-body);
}
.pay-method-card:hover:not(.pay-method-card--disabled) {
  border-color: var(--turquoise-dark); background: rgba(74,144,232,.06);
}
.pay-method-card--selected {
  border-color: var(--turquoise); background: rgba(74,144,232,.07);
  box-shadow: 0 0 0 2px rgba(74,144,232,.18);
}
.pay-method-card--disabled {
  opacity: .5; cursor: not-allowed;
}
.pay-method-icon {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--white); border-radius: var(--r-sm); flex-shrink: 0;
  border: 1px solid rgba(74,106,156,.18);
}
.pay-method-info { flex: 1; min-width: 0; }
.pay-method-name { font-weight: 600; font-size: 0.95rem; color: var(--text); display: flex; align-items: center; gap: 8px; }
.pay-method-desc { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
.pay-badge-soon {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  background: var(--sand-gold); color: var(--deep-teal); padding: 2px 8px;
  border-radius: var(--r-pill); letter-spacing: 0.03em;
}
.pay-instructions {
  background: var(--sand); border: 1px solid rgba(74,106,156,.18); border-radius: var(--r-md);
  padding: 16px; margin-top: 12px; font-size: 0.9rem;
  animation: fadeIn .3s ease;
}
.pay-instructions dt { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.pay-instructions dd { margin: 0 0 10px; color: var(--text-muted); word-break: break-all; }
.pay-instructions dd:last-child { margin-bottom: 0; }
.pay-instructions p { margin: 0; color: var(--text-muted); }
.pay-summary { margin-bottom: 20px; }
.pay-error { color: var(--coral); font-size: 0.85rem; margin-bottom: 8px; }

/* ── Success summary — Boarding Pass ─────────── */
.success-summary {
  max-width: 400px;
  margin: 0 auto 24px;
}

.bp-card {
  background: var(--white);
  border: 1px solid rgba(74,106,156,.18);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
  box-shadow: var(--sh-md);
  animation: success-card-in .5s ease .3s both;
}

.bp-ref {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--deep-teal);
  background: var(--sand-gold);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin: 20px 22px 0;
}

.bp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 16px 22px 0;
}

.bp-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
}

.bp-cell-label {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.bp-cell-value {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--azul-noche, #020A30);
  line-height: 1.3;
}

/* Perforated divider before boarding section */
.bp-boarding {
  position: relative;
  margin: 8px 0 0;
  padding: 16px 22px;
  background: var(--sand);
  border-top: 2px dashed rgba(74,106,156,.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bp-boarding::before,
.bp-boarding::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sand, #F5F0E8);
}
.bp-boarding::before { left: -9px; }
.bp-boarding::after  { right: -9px; }

.bp-boarding-address {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--azul-noche, #020A30);
  line-height: 1.4;
}

.bp-boarding-hint {
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.bp-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid #e8edf5;
  background: var(--white);
}

.bp-total .bp-cell-label {
  font-size: .75rem;
}

.bp-total-value {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--turquoise, #4A90E8);
}

.bp-payment-id {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 22px;
  border-top: 1px solid #e8edf5;
  background: var(--white);
}

@media (max-width: 360px) {
  .bp-grid { grid-template-columns: 1fr; }
}

/* ── Success steps ───────────────────────────── */
.success-steps {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.success-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.success-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--turquoise-dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
}

/* ── Payment instructions ─────────────────────── */
.payment-instructions {
  background: var(--sand);
  border: 1px solid rgba(74,106,156,.18);
  border-radius: 12px;
  padding: 20px 24px;
  text-align: left;
  max-width: 420px;
  margin: 0 auto 24px;
}

.pi-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--deep-teal);
  margin: 0 0 14px;
}

.pi-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(74,106,156,.12);
  font-family: var(--font-body);
  font-size: .85rem;
}
.pi-row:last-child { border-bottom: none; }

.pi-key { color: var(--text-muted); }
.pi-val { font-weight: 700; color: var(--deep-teal); word-break: break-all; }

.pi-text {
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── QR ticket card ──────────────────────────── */
.success-qr:empty { display: none; }
.success-qr {
  max-width: 380px;
  margin: 0 auto var(--sp-8);
  background: linear-gradient(135deg, #020A30 0%, #061A55 100%);
  border-radius: var(--r-lg);
  padding: 24px;
  color: var(--white);
  box-shadow: 0 8px 32px rgba(2,10,48,.25);
  animation: success-card-in .5s ease .6s both;
}
@keyframes success-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.success-qr-top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.success-qr #success-qr-code {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.success-qr #success-qr-code img,
.success-qr #success-qr-code canvas {
  border-radius: 4px;
  width: 98px !important;
  height: 98px !important;
}
.success-qr-info {
  flex: 1;
  text-align: left;
  min-width: 0;
}
.success-qr-title {
  font-family: var(--font-logo);
  font-size: 1rem;
  color: var(--sand-gold);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
}
.success-qr-hint {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255,255,255,.65);
  margin: 0;
  line-height: 1.4;
}
.success-qr-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-qr-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px var(--sp-4);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  border: none;
  min-height: 48px;
  background: var(--sand-gold);
  color: var(--deep-teal);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(232,201,138,.35);
  letter-spacing: 0.01em;
}
.btn-qr-download:hover {
  background: #f0d49a;
  transform: translateY(-1px);
}
.btn-qr-download:active { transform: scale(0.97); }

.btn-qr-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px;
  transition: color var(--t-fast);
}
.btn-qr-share:hover { color: var(--white); }

/* Stack on very small screens */
@media (max-width: 360px) {
  .success-qr-top { flex-direction: column; text-align: center; }
  .success-qr-info { text-align: center; }
}

/* ── Success action buttons ───────────────────── */
.success-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .82rem;
  padding: 9px 18px;
  min-height: 44px;
  border-radius: 50px;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.btn-whatsapp svg { width: 15px; height: 15px; }
.btn-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
}

.btn-new-booking {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .82rem;
  color: #6b7d99;
  background: transparent;
  border: 1.5px solid #d0d8e4;
  border-radius: 50px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.btn-new-booking:hover {
  border-color: var(--turquoise);
  color: var(--turquoise);
}

/* ═══════════════════════════════════════════════════════════
   CONTENT SECTIONS — Shared utilities + Individual sections
   ═══════════════════════════════════════════════════════════ */

/* ── Shared section utilities ── */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-badge,
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--turquoise-dark);
  margin-bottom: var(--sp-3);
}

.section-badge::before,
.section-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--turquoise);
}

/* Variant: numbered eyebrow ("01 ·", "02 ·") — replaces the line glyph
   for editorial sections so a glance-scan can tell which section is which.
   Used on #bordo and #galeria. */
.section-badge--numbered::before {
  content: attr(data-num);
  width: auto;
  height: auto;
  background: transparent;
  color: var(--sand-gold);
  font-family: var(--font-logo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .12em;
}

/* Variant: dated eyebrow ("Verano 2025 ·") — anchors a section in time
   instead of using the line glyph. Used on #resenas. */
.section-badge--dated::before {
  content: attr(data-date) " · ";
  width: auto;
  height: auto;
  background: transparent;
  color: var(--turquoise-dark);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .18em;
  margin-right: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

/* "El Atlantis" — script signature for the brand-name reveal */
#sobre-atlantis .section-title {
  font-family: var(--font-script);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--teal-mid);
  line-height: 1.05;
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
}

/* ── Intersection Observer animation ── */
/* Below-the-fold reveals: opacity-only fade. The slide-up variant
   created a perceived blank area when fast-scrolling past the
   intersection threshold, so we keep transform untouched. ease-out-
   quart for the refined deceleration the brand register asks for. */
.anim-fade {
  opacity: 0;
  transition: opacity .55s cubic-bezier(.165,.84,.44,1);
}

.anim-fade.is-visible {
  opacity: 1;
}

/* ══ Section 1: QUÉ INCLUYE ══ */
/* ══ A bordo: photo-anchored editorial ══ */
.bordo-section {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--sand);
}

.bordo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin: var(--sp-12) 0 var(--sp-8);
}

@media (min-width: 768px) {
  .bordo-grid {
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--sp-4);
  }
  .bordo-fig--lead { grid-row: span 2; }
}

.bordo-fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(2,10,48,.12);
  transition: transform .35s cubic-bezier(.165,.84,.44,1),
              box-shadow .35s cubic-bezier(.165,.84,.44,1);
}

.bordo-fig:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(2,10,48,.18);
}

.bordo-fig picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bordo-fig img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.165,.84,.44,1);
}

.bordo-fig:hover img { transform: scale(1.03); }

.bordo-fig--lead { aspect-ratio: 4/5; }
.bordo-fig--vignette { aspect-ratio: 4/3; }

@media (min-width: 768px) {
  .bordo-fig--lead { aspect-ratio: auto; min-height: 480px; }
  .bordo-fig--vignette { aspect-ratio: auto; min-height: 232px; }
}

.bordo-fig figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background: linear-gradient(to top,
    rgba(2,10,48,.92) 0%,
    rgba(2,10,48,.65) 55%,
    rgba(2,10,48,0) 100%);
  color: #fff;
  pointer-events: none;
}

.bordo-fig figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .015em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 var(--sp-2);
  font-size: clamp(20px, 2.4vw, 28px);
  color: #fff;
}

.bordo-fig--lead figcaption strong {
  font-size: clamp(26px, 3.2vw, 38px);
}

.bordo-fig figcaption span {
  display: block;
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
  max-width: 48ch;
}

.bordo-fig--lead figcaption span {
  font-size: .95rem;
}

.bordo-tags {
  list-style: none;
  margin: var(--sp-12) auto var(--sp-8);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: center;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--text-muted);
  letter-spacing: .005em;
  max-width: 64rem;
}

/* Tags rely on flex `gap` for separation. Previous version painted
   gold dots before each tag; combined with the gold price-bar and
   gold CTA below, the section accumulated five gold incidents in
   one viewport — DESIGN.md "Regla del acento limitado" violation. */
.bordo-tags li {
  line-height: 1.4;
}

/* Mobile: stacked price bar */
.incl-price-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: var(--deep-teal);
  border-radius: 1rem;
  padding: 1.75rem 2rem;
  flex-direction: column;
  text-align: center;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .incl-price-bar {
    flex-direction: row;
    gap: 2rem;
    text-align: left;
  }
}

.ipb-badge {
  background: var(--sand-gold);
  color: var(--deep-teal);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .3rem .9rem;
  border-radius: var(--r-pill);
}

.ipb-prices {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ipb-price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
}

.ipb-amount {
  font-family: var(--font-logo);
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

.ipb-label {
  font-family: var(--font-body);
  font-size: .85rem;
  color: rgba(255,255,255,.65);
}

.ipb-sep {
  color: rgba(255,255,255,.35);
  font-size: 1.25rem;
}

/* ══ Section 2: SOBRE EL ATLANTIS ══ */
.sobre-section {
  /* Mobile: reduced padding */
  padding: 3.5rem 0;
  background: linear-gradient(to bottom, var(--sand) 0%, var(--white) 12%);
}

@media (min-width: 768px) {
  .sobre-section { padding: 5rem 0; }
}

/* Mobile: single column, visual on top */
.sobre-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .sobre-layout { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.sobre-visual { position: relative; order: -1; }

@media (min-width: 768px) {
  .sobre-visual { order: 0; }
}

.sobre-p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #4a5568;
  line-height: 1.75;
  margin: 0 0 1rem;
}

.sobre-stats {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  background: var(--deep-teal);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
}

.sobre-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
}

.ss-value {
  font-family: var(--font-logo);
  font-size: 2rem;
  font-weight: 600;
  color: var(--sand-gold);
  line-height: 1;
}

.ss-label {
  font-family: var(--font-body);
  font-size: max(.8rem, 12px);
  color: rgba(255,255,255,.65);
  margin-top: .25rem;
}

.ss-div {
  width: 1px;
  height: 2.5rem;
  background: rgba(255,255,255,.15);
}

.sobre-img-frame {
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--teal-mid);
  border: 3px solid var(--sand-gold);
}

.sobre-img-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sobre-img-inner picture {
  width: 100%;
  height: 100%;
  display: block;
}

.sobre-img-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.sobre-img-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.5);
  font-family: var(--font-body);
  font-size: .9rem;
  text-align: center;
}

.sobre-img-ph span { font-size: 3rem; }

/* ══ Section 4: GALERÍA ══ */
.galeria-section {
  /* Mobile: reduced padding */
  padding: 3.5rem 0;
  background: var(--sand);
}

@media (min-width: 768px) {
  .galeria-section { padding: 5rem 0; }
}

/* Mobile: 2-column equal grid, all items same size */
.galeria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 4px;
}

/* Mobile: no special spanning */
.galeria-item:nth-child(1),
.galeria-item:nth-child(4) {
  grid-column: span 1;
  grid-row: span 1;
}

/* Mobile: fixed height for consistency */
.galeria-item {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  height: 200px;
}

@media (min-width: 640px) {
  .galeria-item { height: 240px; }
}

@media (min-width: 768px) {
  .galeria-grid { grid-template-columns: repeat(3, 1fr); }
  .galeria-item { height: 260px; }
}

@media (min-width: 1024px) {
  .galeria-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 280px);
  }
  .galeria-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .galeria-item:nth-child(4) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .galeria-item { height: auto; }
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}

.galeria-item:hover img {
  transform: scale(1.04);
}

.galeria-item--video {
  position: relative;
}

.galeria-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--white);
  background: rgba(0,0,0,.3);
  transition: background var(--t-fast);
  pointer-events: none;
}

.galeria-item--video:hover .galeria-play-icon {
  background: rgba(0,0,0,.15);
}

.galeria-social { text-align: center; margin-top: var(--sp-8); }

.galeria-instagram-btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
  color: #fff;
  border-radius: 2rem;
  padding: .75rem 1.75rem;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .25s, transform .25s;
}

.galeria-instagram-btn svg { fill: #fff; flex-shrink: 0; }
.galeria-instagram-btn:hover { opacity: .9; transform: translateY(-2px); }
.gal-ig-handle { font-weight: 400; opacity: .85; }

/* Lightbox */
.gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox.lb-open { display: flex; }

.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,10,48,.96);
}

.lb-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  pointer-events: none;
}
.lb-close,
.lb-nav { pointer-events: auto; }

.lb-img-wrap {
  width: min(700px,90vw);
  aspect-ratio: 4/3;
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid rgba(212,160,23,.4);
}

.lb-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,var(--teal-mid),var(--turquoise));
  font-size: 5rem;
}

.lb-caption {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: .95rem;
  color: rgba(255,255,255,.7);
  text-align: center;
}

/* Touch target: 48×48 */
.lb-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.lb-close:hover { background: rgba(255,255,255,.2); }

.lb-nav {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.lb-prev, .lb-next {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.lb-prev:hover, .lb-next:hover,
.lb-prev:active, .lb-next:active { background: var(--turquoise); }

/* ══ Section 5: RESEÑAS ══ */
.resenas-section {
  /* Mobile: reduced padding */
  padding: 3.5rem 0;
  background: linear-gradient(to bottom, var(--sand) 0%, var(--white) 12%, var(--white) 88%, var(--sand) 100%);
  overflow: hidden;
}

@media (min-width: 768px) {
  .resenas-section { padding: 5rem 0; }
}

.resenas-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .5rem;
  flex-wrap: wrap;
}

.resenas-stars {
  color: var(--sand-gold);
  font-size: 1.25rem;
  letter-spacing: .05em;
}

.resenas-score {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--deep-teal);
  line-height: 1;
}

.resenas-count {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--text-muted);
}

.carousel-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  padding-bottom: 3.5rem;
}

.carousel-track {
  display: flex;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

/* Mobile: minimal padding */
.carousel-slide {
  min-width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .carousel-slide { padding: 0 3rem; }
}

.review-card {
  background: var(--sand);
  border: 1px solid rgba(3,4,94,.07);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 720px;
  margin: 0 auto;
}

/* ─── REVIEWS SCROLL ─────────────────────────────────────── */
.reviews-scroll {
  display: flex;
  gap: var(--sp-6);
  overflow-x: auto;
  padding-bottom: var(--sp-4);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--turquoise) transparent;
  max-width: 100%;
}

.reviews-scroll::-webkit-scrollbar {
  height: 3px;
}

.reviews-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.reviews-scroll::-webkit-scrollbar-thumb {
  background: var(--turquoise);
}

/* Overflow fix: constrain card width to viewport-safe value */
.reviews-scroll .review-card {
  flex: 0 0 min(88vw, 320px);
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--gris-suave);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.reviews-scroll .review-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.reviews-scroll .review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--deep-teal);
  color: var(--white);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reviews-scroll .review-name {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  display: block;
}

.review-origin {
  font-size: .78rem;
  color: var(--text-muted);
  font-family: var(--font-label);
}

.reviews-scroll .review-text {
  font-size: .925rem;
  line-height: 1.6;
  color: var(--text);
  font-style: italic;
  flex: 1;
}

.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-stars {
  color: var(--sand-gold);
  font-size: 1rem;
  letter-spacing: .04em;
}

.review-date {
  font-size: .75rem;
  color: var(--text-muted);
  font-family: var(--font-label);
}

/* Hide old carousel controls */
.carousel-btn,
.carousel-dots,
.carousel-dot { display: none; }

.review-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.review-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--turquoise);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}

.review-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.review-name {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--deep-teal);
}

.review-country {
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--text-muted);
}

.review-stars {
  color: var(--sand-gold);
  font-size: 1rem;
  letter-spacing: .05em;
}

.review-text {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 1rem;
  font-style: italic;
}

.review-date {
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--text-muted);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  background: var(--deep-teal);
  color: #fff;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .2s;
}

.carousel-btn:hover { background: var(--turquoise); }
.carousel-prev { left: 0; }
.carousel-next { right: 0; }

@media (min-width: 480px) {
  .carousel-prev { left: -.25rem; }
  .carousel-next { right: -.25rem; }
}

.carousel-dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding-top: 1.5rem;
}

.carousel-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: rgba(3,4,94,.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}

.carousel-dot--active {
  background: var(--turquoise);
  transform: scale(1.4);
}

.resenas-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.platform-badge {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 600;
}

.platform-div { color: rgba(74,106,156,.3); }

/* ══ Section 6: CÓMO LLEGAR ══ */
.llegar-section {
  /* Mobile: reduced padding */
  padding: 3.5rem 0;
  background: var(--sand);
  overflow: hidden;
}

@media (min-width: 768px) {
  .llegar-section { padding: 5rem 0; }
}

/* Mobile: single column */
.llegar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  min-width: 0;
}

.llegar-layout > * {
  min-width: 0;
}

@media (min-width: 768px) {
  .llegar-layout { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.llegar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.llegar-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.llegar-icon,
.fci-icon {
  width: 20px;
  height: 20px;
  color: var(--turquoise);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.llegar-icon svg,
.fci-icon svg {
  width: 100%;
  height: 100%;
}

.llegar-key {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}

.llegar-val {
  font-family: var(--font-body);
  font-size: .9rem;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

.llegar-map {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.llegar-map-ph {
  position: relative;
  background: linear-gradient(135deg,var(--teal-mid),var(--turquoise));
  border-radius: 1rem;
  overflow: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.llegar-map-ph iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 280px;
  border: 0;
  border-radius: 1rem 1rem 0 0;
}

.llegar-map-label {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: .02em;
  color: var(--white);
  margin: 0;
  padding: 1rem 1rem 0;
  font-weight: 400;
  text-align: center;
}

.llegar-map-sub {
  font-family: var(--font-body);
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  margin: 0;
  padding: .25rem 1rem 1rem;
  text-align: center;
}

.llegar-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--deep-teal);
  color: #fff;
  border-radius: .5rem;
  padding: .75rem 1.5rem;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}

.llegar-map-btn svg { fill: #fff; }
.llegar-map-btn:hover { background: var(--turquoise); }

/* ══ FOOTER ══ */
/* Footer-scoped neutral tokens — sand-tinted whites, all verified ≥ AA
   over --deep-teal (#020A30). Warmer than plain white/opacity. */
.site-footer {
  position: relative;
  --footer-text:       rgba(245,240,232,.92); /* primary, ~13:1 */
  --footer-text-muted: rgba(245,240,232,.74); /* links/body, ~9:1 */
  --footer-text-faint: rgba(245,240,232,.60); /* copyright/legal, ~6:1 */
  --footer-hairline:   rgba(245,240,232,.10);
  --footer-surface:    rgba(245,240,232,.06);
  background: linear-gradient(180deg, var(--teal-mid) 0%, var(--deep-teal) 55%);
  padding: clamp(2.5rem, 6vw, var(--sp-16)) 0 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
  border-top: 1px solid rgba(232,201,138,.22); /* gold waterline */
  overflow: hidden;
}

/* Subtle boat photo, tinted to the marine. Hidden on phones for perf. */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/images/barco-piratas-world-lloret-de-mar-vista-aerea-800w.webp');
  background-size: cover;
  background-position: center 60%;
  opacity: .06;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) {
  .site-footer::before { display: none; }
}

.site-footer .footer-container { position: relative; z-index: 1; }

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.site-footer a:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── Closing CTA band ── */
.footer-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-bottom: clamp(2rem, 5vw, var(--sp-12));
  margin-bottom: clamp(2rem, 5vw, var(--sp-12));
  border-bottom: 1px solid var(--footer-hairline);
}

.footer-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-label);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin: 0 0 var(--sp-3);
}
.footer-cta-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--sand-gold);
  flex-shrink: 0;
}

.footer-cta-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--footer-text);
  margin: 0;
}

.footer-cta-reassure {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--footer-text-muted);
  margin: var(--sp-2) 0 0;
}

.footer-cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer-cta-actions .btn-primary { justify-content: center; }
.footer-cta .btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.footer-cta-whats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--footer-hairline);
  background: var(--footer-surface);
  color: var(--footer-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
}
.footer-cta-whats svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.footer-cta-whats:hover { background: rgba(245,240,232,.12); border-color: rgba(245,240,232,.30); color: #fff; }

@media (min-width: 768px) {
  .footer-cta {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-8);
  }
  .footer-cta-actions { flex-direction: row; align-items: center; flex-shrink: 0; }
}

/* ── Columns ── */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, var(--sp-12));
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--footer-hairline);
}

@media (min-width: 480px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-col--brand,
  .footer-col--contact { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-col--contact { grid-column: auto; }
}

@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
  .footer-col--brand { grid-column: auto; }
}

/* Brand column */
.footer-logo-anchor {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-sm);
}
.footer-logo-img { height: 48px; width: auto; }
.footer-logo-name {
  font-family: var(--font-logo);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sand-gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--footer-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--sp-6);
  max-width: 34ch;
}

.footer-social { display: flex; gap: var(--sp-3); }
.footer-social-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--footer-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base), transform var(--t-base);
}
.footer-social-link:hover { background: var(--turquoise); transform: translateY(-2px); }
.footer-social-link svg { fill: var(--footer-text-muted); transition: fill var(--t-base); }
.footer-social-link:hover svg { fill: #fff; }

/* Column titles (DESIGN.md "Label") */
.footer-col-title {
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 600;
  color: var(--footer-text-faint);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}

/* Link lists with ≥44px tap rows */
.footer-nav-list,
.footer-contact-list,
.footer-legal-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav-list { display: flex; flex-direction: column; }

.footer-nav-link {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--footer-text-muted);
  text-decoration: none;
  transition: color var(--t-base);
  display: flex;
  align-items: center;
  min-height: 44px;
}
.footer-nav-link:hover { color: #fff; }
.footer-nav-link--cta { color: var(--sand-gold); font-weight: 700; }
.footer-nav-link--cta:hover { color: var(--dorado-claro); }

/* Contact column */
.footer-address { font-style: normal; }
.footer-postal-address {
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--footer-text-muted);
  margin: 0 0 var(--sp-4);
}
.footer-postal-address strong { color: var(--footer-text); font-weight: 600; }

.footer-contact-list { display: flex; flex-direction: column; }
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
}
.fci-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  color: var(--sand-gold);
}
.fci-icon svg { width: 18px; height: 18px; }

.footer-contact-link {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--footer-text-muted);
  text-decoration: none;
  transition: color var(--t-base);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-contact-link:hover { color: #fff; }
.footer-contact-text {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--footer-text-muted);
  line-height: 1.4;
}

/* ── Bottom bar: copyright · legal links · admin ── */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) 0 calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--sp-6);
}
.footer-legal-link {
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--footer-text-faint);
  text-decoration: none;
  transition: color var(--t-base);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-legal-link:hover { color: var(--footer-text); }

.footer-copyright {
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--footer-text-faint);
  margin: 0;
}

.footer-bottom-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.footer-admin-link {
  color: rgba(245,240,232,.42);
  transition: color var(--t-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.footer-admin-link:hover { color: var(--footer-text-muted); }

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding-bottom: var(--sp-8);
  }
  .footer-legal-links { justify-content: center; }
}

/* ── Cookie Consent Banner ────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
  left: 0;
  right: 0;
  background: #020A30;
  border-top: 1px solid rgba(212,160,23,.3);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  visibility: hidden;
}
.cookie-banner.visible {
  visibility: visible;
  transform: translateY(0);
}
.cookie-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 2rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-text {
  flex: 1;
  font-size: .88rem;
  color: rgba(255,255,255,.8);
  margin: 0;
  line-height: 1.5;
}
.cookie-link {
  color: #D4A017;
  text-decoration: underline;
}
.cookie-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.cookie-btn-accept {
  background: linear-gradient(135deg, #D4A017, #F0C040);
  color: #020A30;
  font-weight: 700;
  font-size: .875rem;
  padding: .6rem 1.5rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  min-height: 44px;
  transition: opacity .2s;
}
.cookie-btn-accept:hover { opacity: .88; }
.cookie-btn-info {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  text-decoration: underline;
}
@media (max-width: 640px) {
  .cookie-banner-inner { padding: 1rem; gap: 1rem; }
  .cookie-actions { width: 100%; }
  .cookie-btn-accept { flex: 1; text-align: center; }
}

/* ── Consent block ──────────────────────────────── */
/* Hairline divider entre los fieldgroups (Datos / Trip) y el consent.
   Antes: rgba(0,0,0,.08) (negro plano). Cambio a rgba(2,10,48,.10)
   = deep-teal 10%, alineado con el resto de hairlines del sistema
   (calendar wrapping, price-preview, section-block del admin). */
.consent-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(2,10,48,.10);
}
/* DESIGN.md: var(--turquoise) #4A90E8 falla AA para text small sobre
   white/sand; usar var(--turquoise-dark) #1E5BA3 que sí pasa (~7:1).
   Estos links a /politica-privacidad y /aviso-legal son inline en
   privacy-text (legal copy crítica) — necesitan contraste sólido.
   underline-offset 2px da respiración tipográfica al subrayado. */
.privacy-link {
  color: var(--turquoise-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--t-fast);
}
.privacy-link:hover { text-decoration-thickness: 2px; }
.privacy-link:focus-visible {
  outline: 2px solid var(--turquoise-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
.required-mark {
  color: var(--coral);
  margin-left: 2px;
}

/* ── Scroll to Top Button ─────────────────────────── */
.scroll-top-btn {
  position: fixed;
  bottom: max(calc(var(--sp-6) + 80px), calc(env(safe-area-inset-bottom, 0px) + 80px));
  right: var(--sp-6);
  z-index: var(--z-over);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--sand-gold);
  color: var(--deep-teal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base), background var(--t-fast);
}

.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  background: var(--dorado-claro);
  box-shadow: var(--sh-gold);
}

/* ── Calendar ─────────────────────────────────────────── */
/* `.cal-wrap` lives inside `.booking-card` (already white + radius +
   shadow). Previously it added its own white bg + border + radius —
   classic nested-card anti-pattern. Dropped the chrome; the b-label
   above ("Fecha de la excursión") + the calendar grid below carry
   enough structure to anchor the section without a second container. */
.cal-wrap {
  padding: 0;
  user-select: none;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.cal-nav {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  font-size: 1.4rem;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-nav:hover {
  /* Was --turquoise (#4A90E8); white chevron on that fails AA. The dark
     variant is the brand-sanctioned dark-chrome-on-white companion. */
  background: var(--turquoise-dark);
  color: var(--white);
}

.cal-nav:focus-visible {
  outline: 2px solid var(--turquoise-dark);
  outline-offset: 2px;
}

.cal-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cal-nav:disabled:hover {
  background: none;
  color: var(--text);
}

/* Month label is the visual anchor of the calendar. Previously
   General Sans 600 1rem read as generic SaaS month picker. Bebas
   Neue uppercase gives the widget a brand-anchor voice — at 1.4rem
   it sits well below the "tamaño grande" threshold of the display
   cinematográfico rule, so it doesn't compete with hero or
   .booking-title for that budget. flex: 1 + min-width: 0 lets it
   fill the row and wrap to a second line on narrow viewports rather
   than overflowing (matters for long DE / ES month names). */
.cal-month-label {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--deep-teal);
  line-height: 1;
  text-align: center;
}
@media (max-width: 480px) {
  .cal-month-label {
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
  }
}

.cal-legend {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.cal-legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.cal-dot--available { background: var(--turquoise-dark); }
.cal-dot--scarce    { background: var(--sand-gold); }
.cal-dot--full      { background: var(--text-muted); }
.cal-dot--closed    { background: rgba(74,106,156,.4); }

.cal-daynames {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  /* 44px floor across all viewports — Apple HIG / WCAG 2.5.5 minimum
     tap target. Previously 40px globally, only raised to 44 below 390px,
     so iPhone 12/13/14/15 (390px) shipped with sub-spec targets. */
  height: 44px;
  min-height: 44px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 500;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.cal-day--empty {
  cursor: default;
}

/* Calendar day states — text always uses --text (passes WCAG AA at
   4.5:1) so the date number stays legible. Background tint + legend
   dot carry the semantic (available / scarce / full). */
.cal-day--available {
  background: rgba(74,144,232,.10);
  color: var(--text);
}

.cal-day--available:hover {
  background: rgba(74,144,232,.20);
  border-color: var(--turquoise-dark);
}

/* Keyboard focus ring for clickable days (available + scarce). Day cells
   are role="button" tabindex="0"; without this they relied on the
   browser-default outline which gets eaten by some themes. */
.cal-day--available:focus-visible,
.cal-day--scarce:focus-visible {
  outline: 2px solid var(--turquoise-dark);
  outline-offset: 2px;
}

/* "Completo" = day sold out by demand. Cool slate tint, distinct from
   "blocked" (which uses the same hue at 0.08) by being roughly twice as
   present (0.18) and dimming the day number. Coral was previously used
   here but violated DESIGN.md "La Regla del Coral Cuasi-Prohibido":
   coral is reserved for genuine urgency, never decorative state. */
.cal-day--full {
  background: rgba(74,106,156,.18);
  color: rgba(26,42,48,.55);
  cursor: not-allowed;
}

.cal-day--blocked,
.cal-day--out-of-season {
  background: rgba(74,106,156,.08);
  color: rgba(26,42,48,.45);
  cursor: not-allowed;
}

.cal-day--past {
  color: rgba(26,42,48,.35);
  cursor: not-allowed;
}

.cal-day--selected {
  background: var(--turquoise-dark) !important;
  color: var(--white) !important;
  border-color: var(--turquoise-dark) !important;
}

.cal-day--scarce {
  background: rgba(232,201,138,.30);
  color: var(--text);
  cursor: pointer;
}

.cal-day--scarce:hover {
  background: rgba(232,201,138,.45);
  border-color: var(--sand-gold);
}

.cal-day--today {
  box-shadow: inset 0 0 0 2px var(--sand-gold);
}

/* Status panel for empty-month / fetch-error states. Lives next to
   .cal-grid; JS toggles [hidden] and rewrites contents. */
.cal-status {
  text-align: center;
  padding: var(--sp-8) var(--sp-3) var(--sp-3);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.cal-status p { margin: 0 0 var(--sp-2); }
.cal-retry {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--deep-teal);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  transition: background var(--t-fast);
}
.cal-retry:hover { background: var(--turquoise-dark); }
.cal-retry:focus-visible {
  outline: 2px solid var(--turquoise-dark);
  outline-offset: 2px;
}

/* Calendar skeleton loading — must match .cal-day height so the grid
   doesn't reflow when real cells replace skeletons. */
.cal-skeleton {
  background: linear-gradient(90deg, rgba(74,106,156,.06) 25%, rgba(74,106,156,.12) 50%, rgba(74,106,156,.06) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-md);
  height: 44px;
  min-width: 36px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.avail-summary {
  text-align: center;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}

.avail-summary strong {
  color: var(--turquoise-dark);
  font-size: 1.1rem;
}

@media (max-width: 480px) {
  .cal-day { font-size: 0.85rem; }
  /* cal-wrap padding already 0.5rem globally */
  .cal-legend { gap: var(--sp-2); }
}

@media (max-width: 389px) {
  .cal-grid { gap: 2px; }
  .cal-day { font-size: 0.82rem; }
}

/* P16 — Show carousel dots on mobile */
@media (max-width: 768px) {
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
  }
}

/* ─── FAQ SECTION ─────────────────────────────────────────── */
.faq-section {
  background: var(--sand);
  padding: var(--sp-16) 0;
}
.faq-section .section-header {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  max-width: 900px;
  margin: 0 auto;
}
.faq-cat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.faq-cat-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(2,10,48,.12);
}
.faq-cat-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.faq-item {
  background: var(--white);
  border-radius: var(--r-md);
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  transition: box-shadow var(--t-fast);
}
.faq-item[open] { box-shadow: var(--sh-md); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--turquoise);
  transition: transform var(--t-fast);
  flex-shrink: 0;
  margin-left: var(--sp-4);
}
.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 var(--sp-6) var(--sp-4);
  color: var(--text);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0;
}
/* Post-section CTAs (#9) */
.section-cta {
  text-align: center;
  padding: var(--sp-8) var(--sp-4) var(--sp-12);
}
.section-cta p {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.section-cta .btn-primary { display: inline-flex; }
.section-cta-guarantee {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: var(--sp-2);
}
/* Adapt CTA text color for dark sections */
.resenas-section .section-cta p,
.llegar-section .section-cta p { color: var(--text); }

@media (max-width: 479px) {
  .faq-question { padding: var(--sp-4) var(--sp-4); }
  .faq-question::after { margin-left: var(--sp-2); }
}

/* ── FAQ rework v2: magazine spread (text + photo) + long-tail + WA inline footer ── */
.faq-section .section-header { margin-bottom: var(--sp-10); }

.faq-spread {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1100px;
  margin: 0 auto var(--sp-10);
  align-items: start;
}
.faq-spread-text { padding-top: var(--sp-1); }

.qa { padding: var(--sp-6) 0; }
.qa:first-child { padding-top: 0; }
.qa + .qa { border-top: 1px solid rgba(2, 10, 48, 0.10); }

.qa-q {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 var(--sp-2);
}
.qa-a {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  opacity: 0.78;
  max-width: 56ch;
  margin: 0;
}

.faq-spread-photo {
  position: sticky;
  top: calc(var(--header-height, 72px) + var(--sp-6));
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4/5;
  background: var(--teal-mid);
}
.faq-spread-photo picture,
.faq-spread-photo img {
  width: 100%;
  height: 100%;
  display: block;
}
.faq-spread-photo img { object-fit: cover; }
.faq-spread-caption {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* Long-tail toggle (kept from v1, polished) */
.faq-long-tail {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.faq-long-tail-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  border: 1px solid rgba(2, 10, 48, 0.14);
  background: rgba(2, 10, 48, 0.04);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.faq-long-tail-toggle:hover {
  background: rgba(2, 10, 48, 0.08);
  border-color: rgba(2, 10, 48, 0.28);
}
.faq-long-tail-toggle::-webkit-details-marker { display: none; }
.faq-long-tail-icon {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--turquoise-dark);
  transition: transform var(--t-fast);
  display: inline-block;
}
.faq-long-tail[open] .faq-long-tail-icon { transform: rotate(45deg); }
.faq-long-tail > .faq-grid { margin-top: var(--sp-8); text-align: left; }

/* Inline WhatsApp footer */
.faq-wa-footer {
  text-align: center;
  margin: var(--sp-8) auto 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 700px;
}
.faq-wa-footer a {
  color: var(--turquoise-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  margin-left: var(--sp-1);
}
.faq-wa-footer a:hover {
  color: var(--text);
  border-color: var(--text);
}

@media (max-width: 768px) {
  .faq-spread {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .faq-spread-photo {
    position: relative;
    top: auto;
    aspect-ratio: 16/10;
    order: -1;
  }
}

/* ── Blog: editorial single-lead layout ────────────────────── */
.blog-section {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--sand);
}

.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  align-items: center;
}

@media (min-width: 768px) {
  .blog-layout {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-12);
  }
}

.blog-lead {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  text-decoration: none;
  color: inherit;
  group: row;
}

.blog-lead-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  box-shadow: 0 4px 16px rgba(2,10,48,.12);
  transition: box-shadow .35s cubic-bezier(.165,.84,.44,1),
              transform .35s cubic-bezier(.165,.84,.44,1);
}

.blog-lead:hover .blog-lead-img {
  box-shadow: 0 14px 40px rgba(2,10,48,.18);
  transform: translateY(-3px);
}

.blog-lead-img picture,
.blog-lead-img img {
  width: 100%;
  height: 100%;
  display: block;
}

.blog-lead-img img {
  object-fit: cover;
  transition: transform .8s cubic-bezier(.165,.84,.44,1);
}

.blog-lead:hover .blog-lead-img img { transform: scale(1.03); }

.blog-lead-cat {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--turquoise-dark);
  margin-bottom: var(--sp-3);
}

.blog-lead-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: .015em;
  line-height: 1.05;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--sp-3);
}

.blog-lead-excerpt {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
  max-width: 50ch;
}

.blog-lead-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--turquoise-dark);
  letter-spacing: .005em;
  transition: color var(--t-fast);
}

.blog-lead:hover .blog-lead-link { color: var(--deep-teal); }

.blog-also {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(2,10,48,.1);
}

.blog-also li {
  border-bottom: 1px solid rgba(2,10,48,.1);
}

.blog-also a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: color var(--t-fast);
}

.blog-also a:hover { color: var(--turquoise-dark); }

.blog-also a::after {
  content: '→';
  font-size: 1.1rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--t-fast), color var(--t-fast);
}

.blog-also a:hover::after { transform: translateX(4px); color: var(--turquoise-dark); }

.blog-also-all {
  font-weight: 600;
  color: var(--turquoise-dark) !important;
}

/* ── Final cinematic frame ─────────────────────── */
.final-section {
  position: relative;
  width: 100%;
  height: clamp(360px, 60vh, 560px);
  overflow: hidden;
  background: var(--deep-teal);
}

.final-bg,
.final-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.final-bg img {
  object-fit: cover;
  object-position: center 60%;
}

.final-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(2,10,48,.55) 0%,
    rgba(2,10,48,.4) 45%,
    rgba(2,10,48,.92) 100%);
}

.final-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(28px, 5vw, 56px);
  max-width: var(--max-width);
  margin: 0 auto;
}

.final-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: var(--sp-4);
  padding-left: 44px;
  position: relative;
}

.final-eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--turquoise);
  transform: translateY(-50%);
}

.final-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7.2vw, 96px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .015em;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  max-width: 18ch;
}

/* WhatsApp booking fallback */
.booking-wa-fallback {
  text-align: center;
  margin-top: var(--sp-4);
}
.booking-wa-fallback a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.booking-wa-fallback a:hover {
  color: #25D366;
}
.booking-wa-fallback svg {
  flex-shrink: 0;
}

/* ─── FLOATING CTA ─────────────────────────────────── */
.floating-cta {
  display: block;
  position: fixed;
  bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0px));
  left: var(--sp-4);
  right: var(--sp-4);
  z-index: var(--z-over);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
  pointer-events: none;
}
.floating-cta.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--sand-gold);
  color: var(--deep-teal);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  text-decoration: none;
  min-height: 48px;
  letter-spacing: 0.02em;
}
.floating-cta a:active {
  transform: scale(0.97);
}
@media (min-width: 1024px) {
  .floating-cta {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: auto;
    padding: 12px 28px;
    border-radius: var(--r-pill);
    box-shadow: var(--sh-lg);
  }
}

/* ─── 16. REDUCED MOTION ────────────────────────────────────
   Respect users with vestibular disorders: kill non-essential
   motion. Hover transforms collapse, hero parallax stops,
   success-icon stops popping. Essential transitions like
   focus rings still happen, just instantly.
─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Hero Ken Burns: hold the photo at 1:1, no creeping zoom. */
  .hero-photo { transform: none !important; }
}