/* =====================================================================
   PERIJATOURS — premium.css
   "Caladan-grade" wine-luxe design system. Homepage-only stylesheet
   (links INSTEAD OF styles.css). app.js is untouched and keeps working:
   every class/ID/state it queries or emits is styled below.
   Palette: wine/bordeaux darks + ivory/cream + refined neutrals,
   steel & green as sparing segment tints. No gold, no turquoise.
   ===================================================================== */

/* =====================================================================
   0. @font-face — self-hosted InterDisplay (7 weights)
   ===================================================================== */
@font-face{font-family:"InterDisplay";src:url("assets/fonts/InterDisplay-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"InterDisplay";src:url("assets/fonts/InterDisplay-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"InterDisplay";src:url("assets/fonts/InterDisplay-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"InterDisplay";src:url("assets/fonts/InterDisplay-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"InterDisplay";src:url("assets/fonts/InterDisplay-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"InterDisplay";src:url("assets/fonts/InterDisplay-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"InterDisplay";src:url("assets/fonts/InterDisplay-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}

/* Metric-matched fallback for Fraunces (loaded async from Google with no preload).
   Tuned size-adjust/overrides bring Georgia's metrics close to Fraunces so the
   display headline swap is (near) shift-free — kills the FOUT "pop"/CLS on the LCP
   text. Used as the FIRST family in --font-display so it paints before Fraunces lands. */
@font-face{
  font-family:"Fraunces Fallback";src:local("Georgia"),local("Times New Roman"),local("serif");
  size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%;
}

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root{
  /* BRAND */
  --brand-wine:#78140A; --brand-wine-600:#8E1B0E; --brand-wine-700:#5E0F06;
  /* Dark bands softened ~20% (client: "en algunas partes la veo muy oscura", Jul 2026) —
     lifted from near-black bordeaux to a lighter deep wine; brand wine #78140A untouched. */
  --brand-bordeaux:#5A2A20; --brand-ink-wine:#442020; --brand-near-black:#301818;

  /* SURFACES — light */
  --surface-ivory:#faf7f2; --surface-cream:#f7f3ee; --surface-cream-2:#efe8df; --surface-line:#e4dace;
  /* SURFACES — dark */
  --dark-1:#301818; --dark-2:#442020; --dark-3:#5A2A20; --dark-line:rgba(247,243,238,.14);

  /* INK */
  --ink-900:#241613; --ink-700:#4a3a35; --ink-500:#7a6a64; --ink-300:#ab9d96;
  /* --ink-400: AA-grade muted (>=4.5:1 on ivory & cream) for text that previously
     used the decorative --ink-300 tint (placeholders, italic disclaimers). */
  --ink-400:#776962;
  --on-dark:#f7f3ee; --on-dark-80:rgba(247,243,238,.82); --on-dark-70:rgba(247,243,238,.72); --on-dark-60:rgba(247,243,238,.62); --on-dark-45:rgba(247,243,238,.46);
  /* --on-dark-55: AA-grade muted on the dark1 footer (~6.2:1) for text that
     previously used --on-dark-45 (~4.3:1, just under AA). */
  --on-dark-55:rgba(247,243,238,.58);

  /* WINE RAMP — light tints for on-dark scopes (single-sourced, no raw hex) */
  --brand-wine-on-dark:#e9a89f;   /* 200-level wine tint: eyebrows/quotes/accents on dark */
  --brand-wine-300:#d98e83;       /* deeper dusty rose for tonal segment/accent tints */
  --wine-tint-50:#f6e7e4;         /* faint wine wash (segment soft fill) */

  /* ACCENTS — wine-led monochrome. Former steel/green segment tints recolored
     into tonal wine variations so the page reads as ONE curated family.
     Steel/green retained only where brand/semantic (logo emblem, WhatsApp, email). */
  --accent-steel:#275170; --accent-steel-50:#e7eef3;
  --accent-green:#335F2B; --accent-green-50:#e8efe5; --green-200:#7fae73;

  /* SEMANTIC */
  --ok:#335F2B; --ok-bg:#e8efe5; --warn:#9a5a12; --warn-bg:#f6ead7;
  --danger:#9a2218; --danger-bg:#f7e3e0;
  /* Focus ring: solid wine (>=10:1 on ivory, ~3.6:1 even on dark bordeaux) so the
     visible-focus outline clears the 3:1 non-text UI minimum on every brand surface.
     Was rgba(120,20,10,.55) (~3.3:1 over ivory, weaker on cream/busy fills). */
  --focus-ring:var(--brand-wine); --focus-ring-on-dark:var(--brand-wine-on-dark);

  /* JS-EMITTED CARD TOKENS (app.js inlines these — must resolve).
     FULL BRAND PALETTE (client mandate, Jun 2026): each business line carries its
     own official brand colour so the site reads in the COMPLETE palette, not wine
     alone — wine (religioso/europa/mujeres), steel·celeste (grupos·congresos·
     auroras), green·verde (suramérica·tercera edad), with metallic gold as the
     premium accent. Restored from the prior wine-only mandate at the client's
     explicit request ("se está usando únicamente el vino tinto"). */
  --wine-700:var(--brand-wine); --wine-050:var(--wine-tint-50);
  --steel-700:var(--accent-steel); --steel-050:var(--accent-steel-50);
  --green-700:var(--accent-green); --green-050:var(--accent-green-50);
  --line-2:#cdbfb6;            /* review-star empty stroke */
  --seg:var(--brand-wine); --seg-soft:var(--wine-tint-50);  /* defaults before inline override */

  /* METALLIC GOLD — premium accent (client mandate). Used sparingly for fine
     dividers, eyebrows, review stars, certification + "Viaja Gratis" highlights. */
  --brand-gold:#C9A24B; --brand-gold-600:#A87E2C; --brand-gold-on-dark:#E4C77A;
  --gold-tint-50:#f7efdc;

  /* LUXE MULTICOLOR — per-niche accents (client mandate Jul 2026: "aplicar la paleta
     completa … cada línea de negocio su color"). Celeste=mariano/playa/cruceros,
     Arena/Dorado=Tierra Santa/VIP/promos, Olivo=ecoturismo/caminatas, Vino=institucional. */
  --accent-celeste:#0F757C; --accent-celeste-600:#0A5F66; --accent-celeste-50:#e3f4f5; --accent-celeste-on-dark:#8CD8E0;
  --accent-arena:#6F5620; --accent-arena-600:#5A481A;
  --accent-olivo:#556B2F; --accent-olivo-600:#44571F; --accent-olivo-on-dark:#AECB86;
  /* Accent INDIRECTION layer — defaults to wine; .niche-* scopes remap ONLY these. */
  --accent:var(--brand-wine); --accent-600:var(--brand-wine-600); --accent-deep:var(--brand-wine-700);
  --accent-soft:var(--wine-tint-50); --accent-on-dark:var(--brand-wine-on-dark);

  /* TYPE families — "Fraunces Fallback" (metric-matched Georgia) sits between
     Fraunces and the raw serif so the pre-load paint matches Fraunces metrics. */
  --font-display:"Fraunces","Fraunces Fallback","InterDisplay",Georgia,serif;
  --font-ui:"InterDisplay",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* TYPE scale — fluid (calc() in clamp middle term; operators need spacing) */
  --fs-display:clamp(3.1rem,calc(1.5rem + 7vw),6.5rem);
  --fs-h1:clamp(2.4rem,calc(1.5rem + 4.2vw),4.5rem);
  --fs-h2:clamp(2rem,calc(1.4rem + 2.8vw),3.25rem);
  --fs-h3:clamp(1.5rem,calc(1.2rem + 1.4vw),2.25rem);
  --fs-h4:clamp(1.25rem,calc(1.1rem + .7vw),1.6rem);
  --fs-lead:clamp(1.1rem,calc(1rem + .5vw),1.375rem);
  --fs-body:1.0625rem; --fs-small:.9375rem; --fs-label:.75rem; --fs-micro:.6875rem;

  --lh-display:1; --lh-tight:1.06; --lh-head:1.12; --lh-body:1.65;
  --tracking-display:-0.03em; --tracking-head:-0.02em; --tracking-label:0.14em;

  /* SPACING / RHYTHM */
  --section-sm:5rem; --section-md:7.5rem; --section-lg:10rem;
  --container:112.5rem; --container-mid:90rem; --container-text:57rem;
  --page-margin:clamp(1.25rem,calc(.5rem + 3vw),2.5rem);

  /* RADIUS */
  --r-sm:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.5rem; --r-pill:100vw;

  /* ELEVATION */
  --shadow-sm:0 1px 2px rgba(36,22,19,.06),0 1px 1px rgba(36,22,19,.04);
  --shadow-md:0 8px 24px -8px rgba(36,22,19,.18);
  --shadow-lg:0 24px 60px -18px rgba(36,22,19,.30);
  --shadow-wine:0 24px 70px -22px rgba(120,20,10,.45);
  --glass-blur:blur(14px) saturate(140%);

  /* EASING / TIMING */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.65,0,.35,1); --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-fast:.18s; --t-base:.32s; --t-slow:.6s; --t-cine:.9s;

  --header-h:76px;
}

/* Dark scope — flip ink tokens on cinematic sections.
   --ink-500 raised from on-dark-45 (~3.2:1, fails AA) to on-dark-60 (~4.6:1)
   so secondary text (review trips, contact cities, t-small) passes WCAG AA. */
.is-dark{
  --ink-900:var(--on-dark); --ink-700:var(--on-dark-70); --ink-500:var(--on-dark-60);
  /* --ink-400 (light-scope AA muted) → on-dark-55 (~6.2:1) so muted text like the
     review disclaimer stays legible on the bordeaux dark sections too. */
  --ink-400:var(--on-dark-55);
  --surface-line:var(--dark-line);
  color:var(--on-dark);
}

/* =====================================================================
   2. RESET + BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-ui);font-weight:400;
  color:var(--ink-900);background:var(--surface-ivory);
  font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:.35rem}
/* On dark/cinematic scopes (hero, reviews, footer, mobile drawer, concierge header)
   swap the ring to the light wine tint so it keeps a strong contrast against the
   bordeaux darks instead of near-merging with them. */
.is-dark :focus-visible,
.site-nav :focus-visible,
.concierge__header :focus-visible{outline-color:var(--focus-ring-on-dark)}
::selection{background:var(--brand-wine);color:var(--on-dark)}

h1,h2,h3,.display{
  font-family:var(--font-display);font-weight:600;line-height:var(--lh-head);
  letter-spacing:var(--tracking-head);font-optical-sizing:auto;margin:0;
  color:var(--ink-900);text-wrap:balance;
}
/* Each size uses its correct optical cut of Fraunces (opsz axis 9..144). */
h1{font-size:var(--fs-h1);font-variation-settings:"opsz" 144}
h2{font-size:var(--fs-h2);font-variation-settings:"opsz" 96}
h3{font-size:var(--fs-h3);font-variation-settings:"opsz" 60}
p{margin:0}

/* Type-scale utilities app.js emits + page uses */
.t-h4{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);line-height:var(--lh-head);letter-spacing:var(--tracking-head);font-variation-settings:"opsz" 48}
.t-h6{
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--brand-wine);margin:0;
}
.is-dark .t-h6{color:var(--brand-wine-on-dark)}
.t-lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-700);font-weight:400}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-700)}
.t-small{font-size:var(--fs-small);line-height:1.55;color:var(--ink-500)}
.t-xs{font-size:var(--fs-micro);letter-spacing:.02em}

/* Layout helpers */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--page-margin)}
.container--narrow{max-width:var(--container-text)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Skip link */
.skip-link{position:fixed;top:-100px;left:1rem;z-index:1000;background:var(--brand-wine);color:var(--on-dark);
  padding:.65rem 1rem;border-radius:var(--r-sm);font-weight:600;transition:top var(--t-base)}
.skip-link:focus{top:1rem}

/* =====================================================================
   3. BUTTONS
   ===================================================================== */
.btn{
  --btn-fg:var(--on-dark);--btn-bg:var(--brand-wine);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-ui);font-weight:600;font-size:.95rem;letter-spacing:.005em;
  padding:.85rem 1.5rem;border:1px solid transparent;border-radius:var(--r-pill);
  color:var(--btn-fg);background:var(--btn-bg);cursor:pointer;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),background var(--t-base),color var(--t-base),border-color var(--t-base);
  -webkit-tap-highlight-color:transparent;text-align:center;line-height:1.1;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:1.05rem 1.85rem;font-size:1rem}
.btn--block{display:flex;width:100%}

.btn--primary{background:var(--brand-wine);color:var(--on-dark);box-shadow:0 10px 30px -12px rgba(120,20,10,.55)}
.btn--primary:hover{background:var(--brand-wine-600);box-shadow:var(--shadow-wine)}

/* Ghost — fill-line hover (Caladan tertiary feel) */
.btn--ghost{
  background:transparent;color:var(--ink-900);border-color:var(--surface-line);overflow:hidden;
}
.btn--ghost::before{content:"";position:absolute;inset:0;background:var(--brand-wine);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out);z-index:0;border-radius:inherit}
.btn--ghost > *{position:relative;z-index:1}
.btn--ghost:hover{color:var(--on-dark);border-color:var(--brand-wine)}
.btn--ghost:hover::before{transform:scaleX(1)}
.is-dark .btn--ghost{color:var(--on-dark);border-color:var(--on-dark-45)}
.is-dark .btn--ghost::before{background:var(--surface-ivory)}
.is-dark .btn--ghost:hover{color:var(--brand-wine);border-color:transparent}

/* =====================================================================
   4. HEADER / NAV — sticky glass
   ===================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  transition:background var(--t-base) var(--ease-out),box-shadow var(--t-base),backdrop-filter var(--t-base);
  background:transparent;
}
.site-header__inner{
  display:flex;align-items:center;gap:1.25rem;height:var(--header-h);
  transition:height var(--t-base) var(--ease-out);
}
/* Default (over hero): light chrome, white logo */
.site-header .site-nav__link,
.site-header .lang-indicator,
.site-header .lang-toggle__btn{color:var(--on-dark)}
/* Always show the full-colour PERIJATOURS emblem. The white variant was a blank
   image → showed as an empty "white circle" on mobile / over the hero. The colour
   emblem is a self-contained dark badge, so it reads on both dark and light chrome. */
.brand__logo--color{display:block}
.brand__logo--white{display:none}

/* Scrolled: glass + ink chrome + color logo */
.site-header.is-stuck{
  background:rgba(250,247,242,.78);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--surface-line);box-shadow:0 6px 30px -22px rgba(36,22,19,.5);
}
.site-header.is-stuck .site-header__inner{height:62px}
.site-header.is-stuck .site-nav__link,
.site-header.is-stuck .lang-indicator,
.site-header.is-stuck .lang-toggle__btn{color:var(--ink-900)}
.site-header.is-stuck .brand__logo--color{display:block}
.site-header.is-stuck .brand__logo--white{display:none}
.site-header.is-stuck .brand__name{color:var(--ink-900)}
.site-header.is-stuck .brand__tag{color:var(--ink-500)}
.site-header.is-stuck .hamburger span{background:var(--ink-900)}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:.7rem;margin-right:auto}
.brand__disc{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;flex:none}
.brand__disc img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))}
.brand__disc--lg,.site-footer__disc{width:58px;height:58px}
.brand__disc--lg img{width:58px;height:58px}
.brand__word{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--font-display);font-weight:600;font-size:1.35rem;letter-spacing:-.01em;color:var(--on-dark);transition:color var(--t-base)}
.brand__tag{font-size:.66rem;letter-spacing:.04em;color:var(--on-dark-70);font-weight:500;transition:color var(--t-base)}

/* Nav links + animated underline */
.site-nav{display:flex;align-items:center;gap:2rem}
.site-nav__close{display:none}
.site-nav__link{
  position:relative;font-weight:500;font-size:.96rem;padding:.25rem 0;letter-spacing:.005em;
  transition:color var(--t-base),opacity var(--t-base);
}
.site-nav__link::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease-out);border-radius:2px;
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"]{color:var(--brand-wine-600)}
.site-header.is-stuck .site-nav__link[aria-current="page"]{color:var(--brand-wine)}

/* Actions */
.site-header__actions{display:flex;align-items:center;gap:1rem}
.lang-toggle{display:inline-flex;border:1px solid currentColor;border-radius:var(--r-pill);overflow:hidden;opacity:.85}
.lang-toggle__btn{
  background:transparent;border:0;padding:.32rem .7rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  transition:background var(--t-base),color var(--t-base);color:inherit;
}
.lang-toggle__btn.is-active{background:var(--brand-wine);color:var(--on-dark)}
.site-header.is-stuck .lang-toggle{border-color:var(--surface-line)}
/* visually-hidden (NOT display:none) so the aria-live region stays in the a11y
   tree and screen readers announce "Idioma actual: EN" on language toggle. */
.lang-indicator{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.site-header__cta{padding:.6rem 1.25rem;font-size:.9rem}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:transparent;border:0;padding:.4rem}
.hamburger span{display:block;width:24px;height:2px;background:var(--on-dark);border-radius:2px;transition:background var(--t-base),transform var(--t-base) var(--ease-out),opacity var(--t-base)}

/* Mobile drawer + backdrop */
.nav-backdrop{position:fixed;inset:0;z-index:99;background:rgba(26,10,8,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--t-base)}
.nav-backdrop.is-open{opacity:1}

@media (max-width:899px){
  .site-nav{
    position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:100;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:1.4rem;
    padding:2rem var(--page-margin);background:var(--brand-ink-wine);color:var(--on-dark);
    transform:translateX(105%);transition:transform var(--t-base) var(--ease-out);
  }
  .site-nav.is-open{transform:translateX(0)}
  .site-nav__link{color:var(--on-dark);font-size:1.5rem;font-family:var(--font-display);font-weight:500;
    opacity:0;transform:translateY(18px);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
  .site-nav.is-open .site-nav__link{opacity:1;transform:none}
  .site-nav.is-open .site-nav__link:nth-child(2){transition-delay:.06s}
  .site-nav.is-open .site-nav__link:nth-child(3){transition-delay:.12s}
  .site-nav.is-open .site-nav__link:nth-child(4){transition-delay:.18s}
  .site-nav.is-open .site-nav__link:nth-child(5){transition-delay:.24s}
  .site-nav.is-open .site-nav__link:nth-child(6){transition-delay:.30s}
  .site-nav__close{display:block;position:absolute;top:1rem;right:1.25rem;background:transparent;border:0;
    color:var(--on-dark);font-size:2.2rem;line-height:1;padding:.25rem .5rem}
  .hamburger{display:flex}
  .site-header__cta{display:none}
  .lang-toggle{opacity:1}
}

/* =====================================================================
   5. HERO — cinematic full-bleed video
   ===================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  margin-top:calc(var(--header-h) * -1);padding-top:var(--header-h);
  background:var(--brand-ink-wine);color:var(--on-dark);
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__fallback{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 75% 15%,#5e1109 0%,#2a0e0a 55%,#1a0a08 100%)}
.hero__picture,.hero__picture img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__img{opacity:.92}
.hero__video{opacity:0;transition:opacity var(--t-cine) var(--ease-out);z-index:1}
.hero__video.is-ready{opacity:1}
/* Cinematic grade overlay — deepened at top so thin light type is legible
   independent of poster/video frame (top was only ~25% before). */
.hero__scrim{position:absolute;inset:0;z-index:2;
  /* Client mandate 2026-08-21: the wine veil is gone. Only a light neutral
     gradient remains, and only where the headline sits, so the footage keeps
     its real colour. Legibility is carried by text-shadow below. */
  background:linear-gradient(180deg,rgba(18,12,10,.26) 0%,rgba(18,12,10,.04) 38%,rgba(18,12,10,.30) 78%,rgba(18,12,10,.46) 100%);
}
.hero__badge,.hero__kicker,.hero__title,.hero__sub{
  text-shadow:0 2px 10px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45);
}
.hero__kicker{color:var(--gold-400,#D9B24C)!important}
/* Localized text-protection wash behind just the copy column — guarantees the
   sub-line/kicker contrast no matter how bright the photo/video frame is. */
.hero__content::before{content:"";position:absolute;inset:auto 0 -2rem 0;top:-2rem;z-index:-1;
  background:linear-gradient(90deg,rgba(26,10,8,.55) 0%,rgba(26,10,8,.28) 46%,transparent 80%);
  pointer-events:none;border-radius:var(--r-xl)}
.hero__content{position:relative;z-index:3;padding-block:clamp(3.5rem,11vh,8rem) clamp(3.5rem,9vh,7rem);max-width:min(64rem,var(--container))}

.hero__badge{
  display:inline-flex;align-items:baseline;gap:.4rem;margin-bottom:1.4rem;
  padding:.5rem 1rem;border:1px solid var(--on-dark-45);border-radius:var(--r-pill);
  background:rgba(247,243,238,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hero__badge strong{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--brand-gold-on-dark)}
.hero__badge span{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-70)}

.hero__kicker{color:var(--brand-wine-on-dark)!important;margin-bottom:1.1rem}
.hero__title{
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-display);line-height:var(--lh-display);
  letter-spacing:var(--tracking-display);color:var(--on-dark);max-width:20ch;margin:0 0 1.5rem;
  /* High optical-size cut for the giant display headline (open apertures). */
  font-optical-sizing:auto;font-variation-settings:"opsz" 144;
}
.hero__title .accent,.hero__title em{color:var(--brand-wine-on-dark);font-style:italic;font-weight:500}
.hero__sub{color:var(--on-dark-80)!important;max-width:54ch;margin-bottom:2.25rem}

/* Hero search */
.hero-search{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;max-width:64rem;margin:0 0 1.6rem;
  background:rgba(250,247,242,.94);backdrop-filter:blur(10px);border-radius:var(--r-lg);
  padding:.5rem;box-shadow:var(--shadow-lg);
}
.hero-search__seg{display:flex;flex-direction:column;justify-content:center;flex:1 1 9rem;min-width:8.5rem;padding:.45rem .9rem;text-align:left}
.hero-search__label{color:var(--ink-500)!important;text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-bottom:.15rem}
.hero-search__control{border:0;background:transparent;font-family:var(--font-ui);font-size:.98rem;font-weight:500;color:var(--ink-900);width:100%;padding:.1rem 0}
.hero-search__control:focus{outline:0}
/* placeholder carries the search format example → AA-grade --ink-400 (was --ink-300, ~2.5:1). */
.hero-search__control::placeholder{color:var(--ink-400)}
.hero-search__divider{width:1px;align-self:stretch;background:var(--surface-line);margin:.5rem 0}
.hero-search__btn{flex:0 0 auto;align-self:stretch;border-radius:var(--r-md)}
@media (max-width:640px){
  .hero-search__divider{display:none}
  .hero-search__seg{flex:1 1 100%;border-bottom:1px solid var(--surface-line)}
  .hero-search__btn{flex:1 1 100%;margin-top:.4rem}
}

.hero__cta-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* =====================================================================
   5b. TRIP PLANNER STRIP (relocated #heroSearch) — below the fold
   ===================================================================== */
.planner{background:var(--surface-cream);padding-block:clamp(1.75rem,3vw,2.5rem);border-bottom:1px solid var(--surface-line)}
.planner__inner{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
.planner__eyebrow{margin:0}
/* override hero-search dark-context look for the light planner strip */
.planner .hero-search{
  margin:0;max-width:64rem;width:100%;
  background:var(--surface-ivory);border:1px solid var(--surface-line);box-shadow:var(--shadow-md);
}
.planner .hero-search__label{color:var(--ink-500)!important}
.planner .hero-search__control{color:var(--ink-900)}
.planner__link{font-weight:600;font-size:.95rem;color:var(--brand-wine);transition:color var(--t-base),gap var(--t-base)}
.planner__link:hover{color:var(--brand-wine-600)}

/* Play/pause + scroll cue (decorative, optional in markup) */
.hero__play{position:absolute;right:var(--page-margin);bottom:1.5rem;z-index:4;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--on-dark-45);background:rgba(247,243,238,.08);backdrop-filter:blur(8px);color:var(--on-dark);
  display:inline-flex;align-items:center;justify-content:center;transition:background var(--t-base),transform var(--t-base)}
.hero__play:hover{background:rgba(247,243,238,.18);transform:scale(1.05)}

/* =====================================================================
   6. SECTION RHYTHM
   ===================================================================== */
.section{padding-block:var(--section-md);position:relative}
@media (min-width:1200px){.section{padding-block:var(--section-lg)}}
.section--alt{background:var(--surface-cream)}
/* head→body gap (~3.75rem) is now clearly < section gap (7.5–10rem), so the macro
   rhythm reads as distinct tiers instead of one flat run. */
.section__head{max-width:62rem;margin:0 auto clamp(2.5rem,4vw,3.75rem);text-align:center}
.section__head .t-h6{margin-bottom:.85rem}
.section__head h2{margin-bottom:1rem}
.section__lead{margin-inline:auto;max-width:48rem;color:var(--ink-500)}
/* disclaimer is a real informational sentence → AA-grade --ink-400 (was --ink-300, ~2.5:1). */
.review-disclaimer{margin-top:.6rem;color:var(--ink-400)!important;font-style:italic}

/* =====================================================================
   7. TRUST BAND
   ===================================================================== */
/* Trust band = decompression band after the 100svh hero: more air + larger numerals
   so the eye eases out of the cinema instead of hitting a cramped strip. */
.trust{background:var(--surface-cream);border-top:1px solid var(--surface-line);border-bottom:1px solid var(--surface-line);padding-block:clamp(3rem,5vw,4.5rem)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0}
.trust__item{flex:1 1 12rem;text-align:center;padding:.5rem 1.75rem;position:relative;display:flex;flex-direction:column;gap:.45rem}
.trust__item:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:56px;background:var(--surface-line)}
.trust__value{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);color:var(--brand-wine);letter-spacing:-.01em;line-height:1;font-variation-settings:"opsz" 96}
.trust__label{color:var(--ink-500)!important;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
@media (max-width:640px){
  .trust__item{flex:1 1 45%}
  .trust__item:nth-child(2)::after{display:none}
}

/* =====================================================================
   8. SEGMENT CARDS (#segGrid) — image-led editorial, hover-lift
   app.js emits: .seg-card[--seg,--seg-soft] > .seg-card__icon
   + .seg-card__body > .seg-card__title/.seg-card__desc/.seg-card__more
   ===================================================================== */
.seg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(1rem,2vw,1.85rem)}
.seg-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--surface-ivory) 0%,var(--surface-cream) 100%);
  border:1px solid var(--surface-line);border-radius:var(--r-lg);overflow:hidden;
  min-height:360px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base);
}
/* IMAGE BAND — full-bleed photographic top (~52% of card) under a wine duotone scrim.
   app.js emits no <img>, so the destination photo is wired as a CSS background here,
   per-card via :nth-child. The heavy wine wash abstracts the (luxury-resort) photo
   into brand-toned atmosphere — real photographic depth without a literal false claim,
   resolving the "emoji-on-flat-gradient = placeholder" problem. */
.seg-card::before{
  content:"";display:block;height:52%;min-height:170px;position:relative;z-index:0;
  /* Client mandate 2026-08-21: NO wine overlay on photos - they must show
     100% clean, bright and in their original colours. */
  background-image:
    var(--seg-photo,radial-gradient(120% 120% at 70% 20%,#5e1109,#2a0e0a 70%,#1a0a08));
  background-size:cover;background-position:center;
  transition:transform var(--t-cine) var(--ease-out);
}
.seg-card:hover::before,.seg-card:focus-within::before{transform:scale(1.05)}
/* hairline wine keyline at the image/body seam */
.seg-card::after{content:"";position:absolute;left:0;right:0;top:calc(52% - 3px);height:3px;background:var(--seg);z-index:2}
.seg-card:hover,.seg-card:focus-within{transform:translateY(-8px);box-shadow:var(--shadow-wine);border-color:transparent}
/* per-card destination photos — CLIENT'S OWN branded images, supplied by
   Yennys 2026-08-21 by email. Only Europa still uses a sourced photo, pending
   the Europamundo cover she asked for. */
.seg-card:nth-child(1){--seg-photo:url("assets/seg/religioso.webp")}   /* Bautismo en el Río Jordán */
.seg-card:nth-child(2){--seg-photo:url("assets/seg/grupos.webp")}      /* Grupos — Basílica de Guadalupe */
.seg-card:nth-child(3){--seg-photo:url("assets/seg/congresos.webp")}   /* Congresos & Convenciones */
.seg-card:nth-child(4){--seg-photo:url("assets/seg/suramerica.webp")}  /* Salto Ángel, Venezuela */
.seg-card:nth-child(5){--seg-photo:url("assets/seg/europa.webp")}      /* Europa — PENDING logo Europamundo */
.seg-card:nth-child(6){--seg-photo:url("assets/seg/auroras.webp")}     /* Auroras Boreales */
.seg-card:nth-child(7){--seg-photo:url("assets/seg/mujeres.webp")}     /* Crucero solo mujeres */
.seg-card:nth-child(8){--seg-photo:url("assets/seg/tercera.webp")}     /* Tercera Edad — cumpleaños */
/* ICON — demoted from hero-of-card to a small glyph CHIP overlaid on the image band.
   Negative margin pulls it up to straddle the image/body seam. */
.seg-card__icon{display:none!important}
.seg-card__badge{
  position:absolute;top:.9rem;left:.9rem;z-index:4;
  background:rgba(250,247,242,.94);backdrop-filter:blur(6px);color:var(--brand-wine);
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.32rem .7rem;border-radius:var(--r-pill);box-shadow:var(--shadow-sm);
}
.seg-card__body{position:relative;z-index:3;display:flex;flex-direction:column;gap:.55rem;padding:.4rem 1.4rem 1.6rem;flex:1}
.seg-card__title{color:var(--ink-900)}
.seg-card__desc{color:var(--ink-500)!important;flex:1}
.seg-card__more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;
  font-weight:600;font-size:.92rem;color:var(--seg);transition:gap var(--t-base) var(--ease-out)}
.seg-card__more svg{transition:transform var(--t-base) var(--ease-out)}
.seg-card:hover .seg-card__more{gap:.7rem}
.seg-card:hover .seg-card__more svg{transform:translateX(4px)}

/* =====================================================================
   9. ITINERARY CARDS (#itinGrid) + live cuotas
   ===================================================================== */
.itin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
/* Featured itinerary cards = primary role: larger two-layer shadow + 1px inset
   top highlight + subtle surface gradient (vs flatter, secondary segment cards). */
.itin-card{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--surface-ivory) 0%,var(--surface-cream) 100%);
  border:1px solid var(--surface-line);
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 2px 6px -2px rgba(36,22,19,.10),var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.itin-card:hover{transform:translateY(-6px);
  box-shadow:0 4px 10px -2px rgba(36,22,19,.14),var(--shadow-wine),inset 0 1px 0 rgba(255,255,255,.6)}
/* MEDIA — real destination photo under a wine duotone scrim (replaces the flat
   wine radial-gradient that matched the CTA, so media + button no longer merge). */
.itin-card__media{
  position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;
  /* Client mandate 2026-08-21: no wine overlay on card photos. */
  background-image:
    var(--itin-photo,radial-gradient(120% 120% at 70% 20%,#5e1109,#2a0e0a 70%,#1a0a08));
  background-size:cover;background-position:center;
}
/* Luxe-multicolor accent per featured card: Tierra Santa=dorado, Camino=olivo, Roma=vino */
.itin-card:nth-child(1){--accent:var(--accent-arena);--accent-600:var(--accent-arena-600);--accent-soft:var(--gold-tint-50)}
.itin-card:nth-child(2){--accent:var(--accent-olivo);--accent-600:var(--accent-olivo-600);--accent-soft:var(--accent-green-50)}
.itin-card:nth-child(3){--accent:var(--brand-wine);--accent-600:var(--brand-wine-600);--accent-soft:var(--wine-tint-50)}
/* Emoji demoted from media hero → small refined glyph chip, bottom-left. */
.itin-card__media-emoji{display:none!important}
.itin-card:hover .itin-card__media-emoji{transform:scale(1.06)}
.itin-card__badge{
  position:absolute;top:.9rem;left:.9rem;padding:.35rem .75rem;border-radius:var(--r-pill);
  background:rgba(250,247,242,.92);backdrop-filter:blur(6px);color:var(--accent);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
}
.itin-card__body{display:flex;flex-direction:column;gap:.7rem;padding:1.5rem 1.5rem 1.7rem;flex:1}
.itin-card__eyebrow{margin:0}
.itin-card__title{margin:0}
.itin-card__title-link{color:var(--ink-900);transition:color var(--t-base)}
.itin-card__title-link:hover{color:var(--accent)}
.itin-card__desc{color:var(--ink-500)!important}
.itin-card__includes{display:flex;flex-direction:column;gap:.5rem;margin:.3rem 0 .2rem}
.itin-card__includes li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;color:var(--ink-700);line-height:1.4}
.itin-card__includes svg{flex:none;color:var(--accent-600);margin-top:.12rem}

/* cuotas block */
.cuotas{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--surface-line);display:flex;flex-direction:column;gap:.8rem}
.cuotas__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.cuotas__from{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-700);font-weight:600}
.cuotas__price{font-family:var(--font-display);font-weight:600;font-size:1.9rem;color:var(--ink-900);line-height:1.05;letter-spacing:-.01em}
/* "Sin interés" badge → green (positive savings cue), per full-palette restore. */
.cuotas__badge{flex:none;padding:.3rem .7rem;border-radius:var(--r-pill);background:var(--accent-green-50);color:var(--accent-green);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.cuotas__monthly{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;padding:.7rem .9rem;
  background:linear-gradient(180deg,var(--surface-cream-2) 0%,#e8ddd2 100%);
  border:1px solid var(--surface-line);border-radius:var(--r-md);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.cuotas__monthly-num{font-family:var(--font-display);font-weight:600;font-size:1.5rem;color:var(--accent)}
.cuotas__monthly-lbl{font-size:.85rem;color:var(--ink-700)}
.cuotas__monthly-lbl b{color:var(--ink-900)}
.cuotas__slider-row{display:flex;flex-direction:column;gap:.4rem}
.cuotas__slider-head{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--ink-700)}
.cuotas__slider-head b{color:var(--accent);font-size:1rem}
.cuotas__range{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent),var(--accent-600));outline-offset:4px;cursor:pointer;
}
.cuotas__range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--surface-ivory);border:3px solid var(--accent);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--t-fast)}
.cuotas__range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.cuotas__range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--surface-ivory);border:3px solid var(--accent);cursor:pointer}
/* Visible keyboard focus on the slider (global :focus-visible can be clipped at 6px height). */
.cuotas__range:focus-visible{outline:3px solid var(--focus-ring);outline-offset:6px}
.cuotas__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--focus-ring)}
.cuotas__range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--focus-ring)}
.cuotas__deposit{font-size:.85rem;color:var(--ink-700)}
.cuotas__deposit b{color:var(--ink-900)}
.cuotas .btn{margin-top:.2rem}
.cuotas .btn--ghost.itin-card__program{margin-top:0}

/* =====================================================================
   10. REVIEWS (#reviewGrid) — dark scroll-snap rail
   ===================================================================== */
.review-grid{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(420px,82vw);gap:1.5rem;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;
  scrollbar-width:thin;scrollbar-color:var(--brand-wine) transparent;
}
.review-grid::-webkit-scrollbar{height:6px}
.review-grid::-webkit-scrollbar-thumb{background:var(--surface-line);border-radius:var(--r-pill)}
@media (min-width:980px){
  .review-grid{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible}
}
.review-card{
  position:relative;scroll-snap-align:start;background:var(--surface-ivory);
  border:1px solid var(--surface-line);border-radius:var(--r-lg);padding:1.85rem;
  display:flex;flex-direction:column;gap:1rem;overflow:hidden;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base);
}
.review-card::before{content:"\201C";position:absolute;top:-.6rem;right:1rem;font-family:var(--font-display);
  font-size:7rem;line-height:1;color:var(--brand-wine);opacity:.10;pointer-events:none}
.review-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.review-card__stars{display:inline-flex;gap:.15rem;color:var(--brand-gold)}
.review-card__quote{font-family:var(--font-display);font-style:italic;font-size:1.12rem;line-height:1.5;color:var(--ink-900);position:relative;z-index:1}
.review-card__foot{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.review-card__avatar{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--brand-wine);color:var(--on-dark);font-family:var(--font-display);font-weight:600;font-size:1.1rem}
.review-card__meta{display:flex;flex-direction:column;line-height:1.2}
.review-card__name{font-weight:600;color:var(--ink-900);font-size:.95rem}
.review-card__trip{font-size:.82rem;color:var(--ink-500)}
.review-card__verified{margin-left:auto;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-green);background:var(--accent-green-50);padding:.28rem .55rem;border-radius:var(--r-pill)}

/* Reviews section on dark scope */
#experiencias.is-dark{background:var(--brand-ink-wine)}
#experiencias.is-dark .review-card{background:rgba(247,243,238,.05);border-color:var(--dark-line)}
#experiencias.is-dark .review-card::before{color:var(--brand-wine-on-dark);opacity:.14}
#experiencias.is-dark .review-card__quote{color:var(--on-dark)}
#experiencias.is-dark .review-card__name{color:var(--on-dark)}
#experiencias.is-dark .review-card__trip{color:var(--on-dark-60)}
#experiencias.is-dark .review-card__stars{color:var(--brand-gold-on-dark)}
#experiencias.is-dark .review-grid::-webkit-scrollbar-thumb{background:var(--dark-line)}

/* =====================================================================
   11. ABOUT (#nosotros) + stats
   ===================================================================== */
.about__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);align-items:center;max-width:var(--container-mid);margin-inline:auto}
@media (min-width:900px){.about__grid{grid-template-columns:1.05fr 1fr}}
.about__media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.about__media img{width:100%;height:120%;object-fit:cover}
.about__badge{position:absolute;left:1.2rem;bottom:1.2rem;display:flex;flex-direction:column;
  background:rgba(250,247,242,.9);backdrop-filter:blur(10px);border-radius:var(--r-lg);padding:.9rem 1.2rem;box-shadow:var(--shadow-md)}
.about__badge strong{font-family:var(--font-display);font-weight:600;font-size:1.8rem;color:var(--brand-wine);line-height:1}
.about__badge span{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-500);font-weight:600}
.about__text{display:flex;flex-direction:column;gap:1.1rem}
.about__text h2{max-width:16ch}
.about__body{color:var(--ink-700)!important}
.about__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem;margin-top:.8rem}
.about-stat{display:flex;flex-direction:column;gap:.25rem;padding:.4rem 0;border-top:1px solid var(--surface-line)}
.about-stat__value{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,calc(1.4rem + 2vw),3rem);color:var(--brand-wine);line-height:1;letter-spacing:-.01em}
.about-stat__label{font-size:.85rem;color:var(--ink-500);font-weight:500}

/* About: when about grid has the stats column on the right, keep them stacked nicely */
.about .about__grid{grid-template-columns:1fr}
@media (min-width:900px){.about .about__grid{grid-template-columns:1.15fr .85fr}}

/* =====================================================================
   12. FAQ (#faqList)
   ===================================================================== */
.faq{display:flex;flex-direction:column}
.faq__item{border-bottom:1px solid var(--surface-line)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:transparent;border:0;padding:1.4rem 0;text-align:left;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);color:var(--ink-900);
  transition:color var(--t-base);
}
.faq__q:hover{color:var(--brand-wine)}
.faq__icon{flex:none;display:inline-flex;color:var(--brand-wine);transition:transform var(--t-base) var(--ease-out)}
.faq__item.is-open .faq__icon{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height var(--t-base) var(--ease-out)}
.faq__a-inner{padding:0 0 1.4rem;color:var(--ink-700);font-size:1rem;line-height:1.65;max-width:60ch}

/* =====================================================================
   13. CONTACT (#contacto)
   ===================================================================== */
.contact__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;max-width:var(--container-mid);margin-inline:auto}
@media (min-width:880px){.contact__grid{grid-template-columns:1fr 1fr}}
.contact__intro{display:flex;flex-direction:column;gap:1rem}
.contact__intro h2{max-width:14ch}
.contact__cities{color:var(--ink-500)!important;margin-top:.3rem}
.contact__cards{display:flex;flex-direction:column;gap:1rem}
.contact-card{
  display:flex;align-items:center;gap:1rem;padding:1.25rem 1.4rem;
  background:var(--surface-ivory);border:1px solid var(--surface-line);border-radius:var(--r-lg);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),border-color var(--t-base);
}
.contact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-wine)}
.contact-card__ico{flex:none;width:48px;height:48px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.contact-card__ico--green{background:var(--accent-green)}
.contact-card__ico--steel{background:var(--accent-steel)}
.contact-card__body{display:flex;flex-direction:column;line-height:1.3}
.contact-card__label{color:var(--ink-500)!important;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.contact-card__value{font-weight:600;color:var(--ink-900);font-size:1.05rem}

/* =====================================================================
   14. FOOTER — dark + progressive blur depth
   ===================================================================== */
.site-footer{position:relative;background:var(--dark-1);color:var(--on-dark);padding-block:clamp(3rem,6vw,5rem) 1.5rem;overflow:hidden}
/* progressive blur strip at top edge */
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:120px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,var(--surface-cream) 0%,rgba(26,10,8,.2) 70%,transparent 100%);
  opacity:.0;
}
.pblur{position:absolute;top:-1px;left:0;right:0;height:140px;pointer-events:none;z-index:0}
.pblur .panel{position:absolute;inset:0}
.pblur .is-1{backdrop-filter:blur(.4px);-webkit-backdrop-filter:blur(.4px);mask:linear-gradient(180deg,#000 0%,#000 12%,transparent 25%)}
.pblur .is-2{backdrop-filter:blur(.8px);-webkit-backdrop-filter:blur(.8px);mask:linear-gradient(180deg,transparent 12%,#000 25%,#000 38%,transparent 50%)}
.pblur .is-3{backdrop-filter:blur(1.6px);-webkit-backdrop-filter:blur(1.6px);mask:linear-gradient(180deg,transparent 25%,#000 38%,#000 50%,transparent 62%)}
.pblur .is-4{backdrop-filter:blur(3.2px);-webkit-backdrop-filter:blur(3.2px);mask:linear-gradient(180deg,transparent 38%,#000 50%,#000 62%,transparent 75%)}
.pblur .is-5{backdrop-filter:blur(6.4px);-webkit-backdrop-filter:blur(6.4px);mask:linear-gradient(180deg,transparent 50%,#000 62%,#000 75%,transparent 88%)}
.pblur .is-6{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);mask:linear-gradient(180deg,transparent 62%,#000 75%,#000 100%)}

.site-footer__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--dark-line)}
@media (min-width:760px){.site-footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.6fr}}
.site-footer__brand{display:flex;flex-direction:column;gap:.6rem}
.site-footer__tag{font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--on-dark)}
.site-footer__cities{color:var(--on-dark-55)!important}
.site-footer__col{display:flex;flex-direction:column;gap:.7rem}
.site-footer__h{font-family:var(--font-ui);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--brand-wine-on-dark);font-weight:600;margin:0 0 .3rem}
.site-footer__col a{color:var(--on-dark-70);font-size:.94rem;transition:color var(--t-base),padding-left var(--t-base)}
.site-footer__col a:hover{color:var(--on-dark);padding-left:.2rem}
.site-footer__news{gap:.8rem}
.news-form{display:flex;gap:.5rem;flex-wrap:wrap}
.news-form__input{flex:1 1 12rem;min-width:0;border:1px solid var(--dark-line);background:rgba(247,243,238,.06);color:var(--on-dark);
  border-radius:var(--r-pill);padding:.7rem 1.1rem;font-family:var(--font-ui);font-size:.92rem}
.news-form__input::placeholder{color:var(--on-dark-55)}
.news-form__input:focus{outline:0;border-color:var(--brand-wine-on-dark);background:rgba(247,243,238,.1)}
.news-form .btn{flex:0 0 auto;padding:.7rem 1.25rem}
/* success note: brand green ramp tint (was a one-off bright mint #9fd190). */
.news-form__note{color:var(--green-200)!important;margin-top:.2rem}
.site-footer__social{display:flex;gap:.6rem;margin-top:.6rem}
.site-footer__social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--dark-line);color:var(--on-dark-70);transition:background var(--t-base),color var(--t-base),transform var(--t-base)}
.site-footer__social a:hover{background:var(--brand-wine);color:#fff;border-color:transparent;transform:translateY(-2px)}

.site-footer__bottom{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.5rem}
.site-footer__bottom .t-xs{color:var(--on-dark-55)}
.site-footer__badges{display:flex;gap:.5rem;flex-wrap:wrap}
.pay-badge{padding:.32rem .7rem;border:1px solid var(--dark-line);border-radius:var(--r-pill);color:var(--on-dark-70);font-weight:500}

/* =====================================================================
   15. CONCIERGE WIDGET (#conciergeLaunch / #conciergePanel + .msg*)
   ===================================================================== */
/* Quiet-luxury: the concierge CTA rests; it lifts only on hover/focus
   (no perpetual pulse — that reads as a conversion-app tic). */
.concierge-launch{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:90;display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.25rem;border:0;border-radius:var(--r-pill);
  background:var(--brand-wine);color:var(--on-dark);font-weight:600;font-size:.92rem;
  box-shadow:var(--shadow-wine);
  transition:transform var(--t-base) var(--ease-out),background var(--t-base),box-shadow var(--t-base);
}
.concierge-launch:hover,.concierge-launch:focus-visible{transform:translateY(-2px) scale(1.02);background:var(--brand-wine-600)}
.concierge-launch.is-hidden{display:none}

.concierge{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:95;width:min(370px,calc(100vw - 2rem));
  max-height:min(620px,calc(100vh - 3rem));display:flex;flex-direction:column;
  background:rgba(250,247,242,.96);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--surface-line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden;
  animation:cc-in var(--t-base) var(--ease-out);
}
@keyframes cc-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.concierge[hidden]{display:none}
.concierge__header{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;background:var(--brand-ink-wine);color:var(--on-dark)}
.concierge__avatar{flex:none;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-wine);color:#fff;position:relative}
.concierge__avatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--ok);border:2px solid var(--brand-ink-wine)}
.concierge__title{font-weight:600;font-size:.95rem;flex:1}
.concierge__close{background:transparent;border:0;color:var(--on-dark);font-size:1.7rem;line-height:1;padding:.1rem .4rem}
.concierge__body{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;min-height:140px}
.msg{max-width:85%;padding:.7rem .95rem;border-radius:var(--r-lg);font-size:.92rem;line-height:1.5;display:flex;flex-direction:column;gap:.5rem}
.msg--bot{align-self:flex-start;background:var(--surface-cream-2);color:var(--ink-900);border-bottom-left-radius:.25rem}
.msg--user{align-self:flex-end;background:var(--brand-wine);color:var(--on-dark);border-bottom-right-radius:.25rem}
.concierge__link,.concierge__handoff{display:inline-flex;align-items:center;align-self:flex-start;
  font-weight:600;font-size:.85rem;padding:.4rem .8rem;border-radius:var(--r-pill);text-decoration:none}
.concierge__link{background:var(--brand-wine);color:var(--on-dark)}
.concierge__handoff{background:var(--accent-green);color:#fff}
.msg--typing{background:var(--surface-cream-2)}
.msg-typing{display:inline-flex;gap:.25rem;align-items:center}
.msg-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-300);animation:cc-dot 1.2s var(--ease-soft) infinite}
.msg-typing i:nth-child(2){animation-delay:.15s}
.msg-typing i:nth-child(3){animation-delay:.3s}
@keyframes cc-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.concierge__chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.4rem 1.1rem .6rem}
.chip{padding:.4rem .8rem;border:1px solid var(--surface-line);border-radius:var(--r-pill);background:var(--surface-ivory);
  color:var(--ink-700);font-size:.8rem;font-weight:500;transition:background var(--t-base),color var(--t-base),border-color var(--t-base)}
.chip:hover{background:var(--brand-wine);color:var(--on-dark);border-color:transparent}
.concierge__footer{display:flex;gap:.5rem;padding:.8rem 1.1rem 1rem;border-top:1px solid var(--surface-line)}
.concierge__input{flex:1;border:1px solid var(--surface-line);border-radius:var(--r-pill);padding:.65rem 1rem;font-family:var(--font-ui);font-size:.92rem;background:var(--surface-ivory);color:var(--ink-900)}
.concierge__input:focus{outline:0;border-color:var(--brand-wine)}
.concierge__send{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--brand-wine);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background var(--t-base),transform var(--t-base)}
.concierge__send:hover{background:var(--brand-wine-600);transform:scale(1.05)}

/* =====================================================================
   16. WHATSAPP FAB (#waFab)
   ===================================================================== */
/* WhatsApp green stays (it IS the WhatsApp brand color), but the glow is wine-tinted
   so wine still leads the persistent chrome instead of a pure-green halo. */
.wa-fab{
  position:fixed;left:1.5rem;bottom:1.5rem;z-index:90;width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:var(--accent-green);color:#fff;
  box-shadow:var(--shadow-wine);transition:transform var(--t-base),box-shadow var(--t-base);
}
.wa-fab:hover{transform:translateY(-3px) scale(1.05)}
body.concierge-open .wa-fab{display:none}

/* =====================================================================
   17. MOTION — scroll-reveal + parallax overscan
   ===================================================================== */
/* Reveal = opacity + translate only. The blur-filter transition was GPU-expensive
   across the long card grids (jank); dropped for smooth scroll-in everywhere. */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

.is-parallax{will-change:transform}

/* Headline word blur-in (hero) */
.hero__title .word{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(8px);
  animation:word-in .8s var(--ease-out) forwards}
@keyframes word-in{to{opacity:1;transform:none;filter:none}}

/* =====================================================================
   18. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;filter:none}
  .hero__title .word{opacity:1;transform:none;filter:none;animation:none}
  .hero__video{display:none}
  .concierge-launch{animation:none}
  /* Frame the about image identically on the motion + reduced-motion paths
     (JS-set parallax translate can't be overridden by the rules above). */
  .is-parallax{transform:none!important;height:100%!important}
}

/* =====================================================================
   19. RESPONSIVE FINE-TUNES
   ===================================================================== */
@media (max-width:520px){
  .concierge,.concierge-launch{right:1rem;bottom:1rem}
  .wa-fab{left:1rem;bottom:1rem}
  .hero__cta-row .btn{width:100%}
  .about__stats{grid-template-columns:1fr 1fr}
}

/* =====================================================================
   20. ANCHOR SCROLL-OFFSET — keep #fragment targets clear of the
   sticky header (jumping to e.g. #cuotas must not hide under the bar).
   ===================================================================== */
section[id],[id]{scroll-margin-top:calc(var(--header-h) + 1rem)}
/* The hero owns a negative top margin to sit under the transparent header,
   so it must NOT also gain a scroll offset (would over-push #top jumps). */
.hero{scroll-margin-top:0}
/* Wizard / step headings carry the same offset for in-page deep links. */
.faq__q,.section__head{scroll-margin-top:calc(var(--header-h) + 1rem)}

/* =====================================================================
   21. COOKIE CONSENT BANNER (wine-luxe, bottom, non-blocking)
   Injected by app.js initAnalyticsConsent() on first visit; GA is only
   loaded after "Accept". Bilingual via data-es/data-en on its children.
   ===================================================================== */
.cookie-consent{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:120;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  max-width:64rem;margin-inline:auto;padding:1rem 1.25rem;
  background:var(--brand-bordeaux);color:var(--on-dark);
  border:1px solid var(--dark-line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  /* enter/exit transition (rows reveal via .is-in) */
  opacity:0;transform:translateY(12px);
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
}
.cookie-consent.is-in{opacity:1;transform:none}
.cookie-consent__text{margin:0;flex:1 1 18rem;font-size:.9rem;line-height:1.5;color:var(--on-dark-70)}
.cookie-consent__link{color:var(--brand-wine-on-dark);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cookie-consent__link:hover{color:var(--on-dark)}
.cookie-consent__actions{display:flex;gap:.6rem;flex:none;margin-left:auto}
.cookie-consent__btn{padding:.6rem 1.1rem;font-size:.85rem}
.cookie-consent__btn:focus-visible{outline:3px solid var(--focus-ring-on-dark);outline-offset:3px}
@media (max-width:520px){
  .cookie-consent{left:.75rem;right:.75rem;bottom:.75rem;padding:.9rem 1rem}
  .cookie-consent__actions{margin-left:0;width:100%}
  .cookie-consent__btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .cookie-consent{transition:none;opacity:1;transform:none}
}

/* =====================================================================
   PRINT — letterhead PDF ("hoja membretada") for programa-* pages
   + on-screen action toolbar. JS (initProgramActions) injects the
   .print-letterhead / .print-letterfoot / .prog-actions nodes.
   ===================================================================== */
.print-only{display:none}
.prog-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin:1.75rem auto .5rem;padding-inline:var(--page-margin)}
.prog-actions .btn{flex:0 1 auto}

@media print{
  /* Hide on-screen chrome so the saved/printed PDF is clean + branded. */
  .site-header,.site-footer,.site-nav,.nav-backdrop,.crumb,.skip-link,
  .concierge,.concierge-launch,.cookie-banner,.lang-toggle,.lang-indicator,
  .hamburger,.no-print,.prog-actions,.hero__video,.hero__scrim,.pblur,.reveal{display:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .print-only{display:block!important}
  html,body,.is-dark{background:#fff!important;color:#000!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-shadow:none!important}
  @page{margin:16mm 14mm}
  .print-letterhead{display:flex!important;align-items:center;gap:12px;
    border-bottom:3px solid #78140A;padding-bottom:10px;margin-bottom:14px}
  .print-letterhead img{width:56px;height:56px;object-fit:contain}
  .print-lh__txt{display:flex;flex-direction:column;line-height:1.15}
  .print-lh__txt strong{font-size:18px;letter-spacing:.04em;color:#78140A}
  .print-lh__txt span{font-size:10.5px;color:#444}
  .print-letterfoot{display:block!important;border-top:1px solid #ccc;margin-top:16px;
    padding-top:8px;font-size:9.5px;color:#555;text-align:center}
  main,.container{max-width:none!important;width:auto!important;padding:0!important;margin:0!important}
  /* Force every accordion panel fully open so ALL days + FAQ answers print (fixes cut-off/incomplete PDFs). */
  .day__a,.pfaq__a{max-height:none!important;overflow:visible!important;visibility:visible!important}
  .day,.pfaq__item{overflow:visible!important}
  /* Let a long itinerary flow across pages instead of being clipped to a single page. */
  section{padding:8px 0!important;break-inside:auto!important}
  .day,.pfaq__item{break-inside:avoid;page-break-inside:avoid}
}

/* ===================================================================
   LUXE MULTICOLOR — niche accent scopes. Add a class to <body> (or any
   wrapper); remaps ONLY the --accent tokens, never the brand chrome. */
.niche-mariano,.niche-beach{--accent:var(--accent-celeste);--accent-600:var(--accent-celeste-600);--accent-deep:var(--accent-celeste-600);--accent-soft:var(--accent-celeste-50);--accent-on-dark:var(--accent-celeste-on-dark)}
.niche-tierrasanta,.niche-vip,.niche-promo{--accent:var(--accent-arena);--accent-600:var(--accent-arena-600);--accent-deep:var(--accent-arena-600);--accent-soft:var(--gold-tint-50);--accent-on-dark:var(--brand-gold-on-dark)}
.niche-eco{--accent:var(--accent-olivo);--accent-600:var(--accent-olivo-600);--accent-deep:var(--accent-olivo-600);--accent-soft:var(--accent-green-50);--accent-on-dark:var(--accent-olivo-on-dark)}
.niche-corporate{/* explicit wine = defaults, no override */}

/* ===================================================================
   JMJ SEÚL 2027 — special-event styling (nav highlight, gold btn, banner)
   =================================================================== */
.site-nav__link--jmj{color:var(--brand-gold-600);font-weight:700}
.site-header .site-nav__link--jmj{color:var(--brand-gold-on-dark)}
.site-header.is-stuck .site-nav__link--jmj{color:var(--brand-gold-600)}
.btn--gold{background:var(--brand-gold);color:#1a0a08;box-shadow:0 12px 34px -14px rgba(201,162,75,.7)}
.btn--gold:hover{background:var(--brand-gold-600);color:#fff}
.jmj-banner{background:linear-gradient(135deg,var(--brand-ink-wine) 0%,#3d0f08 55%,#5E0F06 100%);position:relative;overflow:hidden}
.jmj-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 85% 0%,rgba(201,162,75,.22),transparent 60%);pointer-events:none}
.jmj-banner__inner{position:relative;z-index:1;text-align:center;max-width:60rem;margin-inline:auto}
.jmj-banner__ribbon{display:inline-block;background:var(--brand-gold);color:#1a0a08;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;padding:.35rem .9rem;border-radius:var(--r-pill);margin-bottom:1rem}
.jmj-banner__title{color:var(--on-dark);font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.1}
.jmj-banner__sub{color:var(--on-dark-80)!important;margin:1rem auto 1.6rem;max-width:46rem}
.jmj-banner__cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}