/* ===================================================
   UTOPIA ROOFTOP — dark cocktail universe · Prizren
   =================================================== */

/* ABC Arizona Flare (Dinamo) — display face for the whole site.
   ⚠ fonts/ currently holds the TRIAL file: evaluation/mockup use only.
   Before this goes live, buy a web licence at abcdinamo.com and drop the
   licensed file at the same path (or update the url) — no other changes
   needed. Marcellus stays in every stack as the loaded fallback. */
@font-face {
  font-family: 'ABC Arizona Flare';
  src: url('../fonts/ABCArizonaFlareVariable-Trial.woff2') format('woff2'),
       url('../fonts/ABCArizonaFlareVariable-Trial.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}

:root {
  --bg: #020a16; /* the universe-section night — one base sky for the whole site */
  --night-1: #0d2742;
  --night-2: #061a30;
  --ink: #efe8d8;
  --ink-dim: #9b93a5;
  /* brushed-platinum accents, matched to the silver logo */
  --gold: #aeb8c2;
  --gold-soft: #dce3ea;
  --cream: #f0ead8;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* liquid-glass: subtle iridescent edge (blue→violet→teal→platinum) */
  --iris: linear-gradient(120deg,
    rgba(174,184,194,0.55), rgba(120,160,220,0.38), rgba(150,120,210,0.32),
    rgba(120,200,195,0.38), rgba(174,184,194,0.55));
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* scroll-padding-top keeps in-page anchor jumps (#galeria, #masterclass, …)
   clear of the fixed 5.2rem header instead of landing under it. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; scroll-padding-top: calc(6rem + env(safe-area-inset-top, 0px)); }
/* stop any horizontal scroll on every device (clip with hidden fallback) */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

/* premium foundations */
::selection { background: rgba(174,184,194,0.28); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}
* { scrollbar-width: thin; scrollbar-color: #2a3a4d #031021; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #020a16; }
::-webkit-scrollbar-thumb { background: #1d2c3e; border-radius: 10px; border: 2px solid #020a16; }
::-webkit-scrollbar-thumb:hover { background: #2a3c52; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 2px; }

/* ---------- site-wide night sky (canvas + grain injected by js/nightsky.js) ---------- */
/* one continuous starfield behind every page; sections use transparent or
   translucent backgrounds so the sky reads through wherever they allow */
.nightsky {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}
/* film grain over the whole site — sits above the page (and modals) but
   below the preloader (z 999) so the loading screen stays clean */
.nightgrain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* explicit root background — iOS 26 Safari samples this to tint its
   status-bar / toolbar glass when no opaque fixed element is found */
html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: 1.6;
  font-size: 1.06rem;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
.experience__img img, .g-item img, .asesoria__strip img,
.scene__logo-img, .hero__video { backface-visibility: hidden; }
a { color: inherit; text-decoration: none; }

.br-d { display: none; }
@media (min-width: 700px) { .br-d { display: inline; } }

.ltr-i { display: inline-block; }

/* brand slogan shown under every logo */
.brand-tag {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif;
  font-size: clamp(0.72rem, 2vw, 0.92rem);
  letter-spacing: 0.42em; text-indent: 0.42em; text-transform: uppercase;
  color: #d7dce1;
}

/* ---------- UTOPIA logo treatment: brushed silver + orbit ring ----------
   The gradient is applied per-letter too: positioned/animated child spans
   (like the orbit wrapper) don't inherit a parent's background-clip:text. */
.ulogo,
.ulogo .wl,
.ulogo .u-orb {
  background: linear-gradient(180deg,
    #ffffff 0%, #eceef0 28%, #b9bfc5 46%, #f3f4f6 58%, #c4c9ce 74%, #84898e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.u-orb { position: relative; display: inline-block; }
.orbit-svg {
  position: absolute; left: 30%; top: 55%;
  width: 1.85em; height: 1.1em;
  transform: translate(-50%, -50%);
  overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(220,228,240,0.45));
}

/* real logo image (foto/logo-t.png) swapped in by JS when available */
.logo-img { display: inline-block; height: auto; }
.preloader__logo .logo-img { width: clamp(300px, 64vw, 620px); }
.hero__logo .logo-img {
  width: clamp(300px, 52vw, 900px);
  filter: drop-shadow(0 10px 40px rgba(0,0,0,0.65));
}
.footer__logo .logo-img { width: clamp(180px, 32vw, 310px); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader__logo {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 500;
  font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: 0.14em; color: var(--cream);
}
.preloader__bar { width: 180px; height: 1px; background: rgba(255,255,255,0.12); overflow: hidden; }
.preloader__bar span { display: block; height: 100%; width: 0; background: var(--gold-soft); animation: load 1.5s var(--ease) forwards; }
@keyframes load { to { width: 100%; } }

/* drinks clinking on the loader */
.preloader__drinks {
  position: relative; display: flex; gap: 1.4rem; align-items: flex-end;
  margin-top: -0.4rem;
}
.drink {
  width: 46px; height: 46px;
  stroke: #ccd2d8; fill: none;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.drink--l { transform-origin: 60% 95%; animation: clinkL 2.4s ease-in-out infinite; }
.drink--r { transform-origin: 40% 95%; animation: clinkR 2.4s ease-in-out infinite; }
.drink--m { animation: bobM 2.4s ease-in-out infinite; }
@keyframes clinkL {
  0%, 32%, 68%, 100% { transform: rotate(0deg) translateX(0); }
  46%, 54% { transform: rotate(14deg) translateX(8px); }
}
@keyframes clinkR {
  0%, 32%, 68%, 100% { transform: rotate(0deg) translateX(0); }
  46%, 54% { transform: rotate(-14deg) translateX(-8px); }
}
@keyframes bobM {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
/* sparkle at the moment the glasses meet */
.drink-spark {
  position: absolute; left: 50%; top: -10px;
  transform: translateX(-50%);
  color: #eef1f4; font-size: 1.05rem; opacity: 0;
  animation: sparkPop 2.4s ease-out infinite;
}
@keyframes sparkPop {
  0%, 40%  { opacity: 0; transform: translateX(-50%) scale(0.4) rotate(0deg); }
  50%      { opacity: 1; transform: translateX(-50%) scale(1.25) rotate(20deg); }
  64%, 100%{ opacity: 0; transform: translateX(-50%) scale(0.5) rotate(40deg); }
}
/* bubbles rising in the highball */
.drink .bub {
  fill: #ccd2d8; stroke: none; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: bubRise 1.9s ease-in infinite;
}
.drink .bub-2 { animation-delay: 0.55s; }
.drink .bub-3 { animation-delay: 1.1s; }
@keyframes bubRise {
  0%   { opacity: 0; transform: translateY(4px); }
  25%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-17px); }
}
/* tagline */
.preloader__tag {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif;
  font-size: clamp(0.82rem, 2.4vw, 1.05rem);
  letter-spacing: 0.42em; text-indent: 0.42em; text-transform: uppercase;
  color: #d7dce1;
  margin-top: -0.4rem;
  animation: tagGlow 2.4s ease-in-out infinite alternate;
}
@keyframes tagGlow {
  from { opacity: 0.6; text-shadow: 0 0 6px rgba(230,236,242,0); }
  to   { opacity: 1; text-shadow: 0 0 16px rgba(230,236,242,0.4); }
}

/* ---------- Burger ---------- */
.burger {
  position: relative; z-index: 1;
  width: 46px; height: 46px; border: none; cursor: pointer;
  background: rgba(10,8,16,0.35); backdrop-filter: blur(6px);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background 0.4s;
}
.burger:hover { background: rgba(10,8,16,0.6); }
.burger span {
  display: block; width: 20px; height: 1.5px; background: var(--cream);
  transition: transform 0.45s var(--ease), opacity 0.3s, width 0.45s var(--ease);
}
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; width: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Site header bar + wordmark ---------- */
.siteheader {
  position: fixed; top: 0; left: 0; right: 0; z-index: 220;
  height: 5.2rem; display: flex; align-items: center;
  padding: 0 1.6rem;
  /* iPhone notch / Dynamic Island: grow the bar into the safe area so the
     status bar sits on the header, not on a black gap (needs
     viewport-fit=cover on the <meta name="viewport">) */
  height: calc(5.2rem + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(1.6rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.6rem, env(safe-area-inset-right, 0px));
  /* iOS 26 Liquid Glass reads background-color + backdrop-filter straight off
     fixed elements at the top edge to tint the status-bar strip — keep this
     element fully transparent; the frost lives on the ::before child below */
  background: transparent;
  pointer-events: none; /* transparent bar must not block the hero; children re-enable */
}
.siteheader > * { pointer-events: auto; }
/* frosted-glass fill on a child layer so Safari's chrome-tinting never
   samples it; fades in once you scroll past the hero */
.siteheader::before {
  /* top:-4rem bleeds the band above the viewport: iOS 26 Safari paints the
     scrolled-past document region through its status-bar glass, so the
     overflow keeps that strip dark instead of showing raw page text */
  content: ""; position: absolute; top: -4rem; right: 0; bottom: 0; left: 0;
  z-index: -1;
  /* near-opaque so the bar reads as one solid band with iOS 26's
     status-bar glass above it (0.72 let content ghost through and
     made the seam obvious) */
  background: rgba(8,10,18,0.92);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(174,184,194,0.22); /* platinum hairline */
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.siteheader.is-scrolled::before { opacity: 1; }

/* the real Utopia wordmark, vertically centred on the same line as the burger */
.nav-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 500;
  font-size: 1.7rem; letter-spacing: 0.16em; line-height: 1; white-space: nowrap;
  opacity: 1; pointer-events: auto;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.6));
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.nav-logo .logo-img { width: clamp(180px, 40vw, 260px); }
@media (max-width: 520px) { .nav-logo { font-size: 1.35rem; } .nav-logo .logo-img { width: 178px; } }

/* ---------- Overlay menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 210;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.6rem, 5vh, 2.8rem);
  padding: clamp(5rem, 11vh, 7rem) 1.3rem clamp(2rem, 6vh, 3.2rem);
  padding-top: calc(clamp(5rem, 11vh, 7rem) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(2rem, 6vh, 3.2rem) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  visibility: hidden; pointer-events: none;
}
.menu.open { visibility: visible; pointer-events: auto; }
/* deep cosmic wash — darker + less flat than the old blue, with a gentle
   zoom-settle so the panel feels like it expands into place */
.menu__bg {
  /* fixed (not absolute) so it always covers the viewport — a tall, scrolling
     menu never reveals the page behind it */
  position: fixed; inset: 0;
  background: radial-gradient(125% 95% at 50% -8%, #14233f 0%, #070d1a 58%, #03060d 100%);
  opacity: 0; transform: scale(1.05);
  transition: opacity 0.6s var(--ease), transform 0.85s var(--ease);
}
.menu.open .menu__bg { opacity: 1; transform: scale(1); }
/* inset platinum hairline frame + soft top glow — the liquid-glass touch */
.menu__glow {
  position: fixed; inset: clamp(0.8rem, 2vw, 1.5rem);
  border: 1px solid rgba(174,184,194,0.14); border-radius: 16px;
  background: radial-gradient(62% 48% at 50% 14%, rgba(120,150,190,0.14), transparent 72%);
  opacity: 0; transition: opacity 0.8s 0.1s var(--ease); pointer-events: none;
}
.menu.open .menu__glow { opacity: 1; }

/* cinematic reveal — links left, a photo stage that fades in on hover */
.menu__inner {
  position: relative; margin-top: auto; /* centres the group, stays scrollable */
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.8rem, 6vw, 5rem); width: min(1080px, 100%);
}
.menu__nav {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1.1rem, 3.4vh, 2rem); /* breathing room between the groups */
}
/* each group stacks its eyebrow heading + indented sub-links */
.menu__group {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(0.2rem, 1vh, 0.5rem);
}
/* sub-links sit indented beneath their heading */
.menu__group .menu__link { margin-left: 1.5rem; }
.menu__link {
  position: relative; display: inline-block;
  font-family: 'Cinzel', serif; font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  line-height: 1.18; letter-spacing: 0.14em; color: var(--cream);
  padding: 0.16em 0.05em; opacity: 0.82;
  transition: opacity 0.4s var(--ease), letter-spacing 0.45s var(--ease), transform 0.45s var(--ease);
}
/* quiet platinum eyebrow that titles each group */
.menu__group-label {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; text-transform: uppercase;
  font-size: clamp(0.58rem, 1.4vw, 0.7rem); letter-spacing: 0.34em; text-indent: 0.34em;
  color: var(--gold-soft); padding-left: 0.05em;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.menu.open .menu__group-label {
  opacity: 0.55; transform: none;
  transition-delay: calc(0.14s + var(--i, 0) * 0.05s);
}

/* spotlight: the hovered link brightens while the others fall back */
.menu__nav:hover .menu__link { opacity: 0.36; }
.menu__nav:hover .menu__link:hover { opacity: 1; }
.menu__link:focus-visible { opacity: 1; outline: none; }
.menu__link:hover, .menu__link:focus-visible { letter-spacing: 0.2em; transform: translateX(10px); }
/* the label rises out of its own mask (staggered while the menu opens) */
.menu__line { display: inline-block; overflow: hidden; padding: 0.05em 0 0.2em; white-space: nowrap; }
.menu__line > span {
  display: inline-block; transform: translateY(120%); opacity: 0;
  /* brushed-platinum metallic fill, ready to shimmer */
  background: linear-gradient(100deg,
    #b9bfc5 0%, #ffffff 20%, #c4c9ce 40%, #f3f5f7 60%, #b9bfc5 80%, #ffffff 100%);
  background-size: 220% 100%; background-position: 18% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: transform 0.8s var(--ease), opacity 0.8s var(--ease),
              background-position 0.7s var(--ease), filter 0.45s var(--ease);
}
.menu.open .menu__link .menu__line > span { transform: translateY(0); opacity: 1; }
/* hover: light sweeps across the lettering + soft platinum glow */
.menu__link:hover .menu__line > span,
.menu__link:focus-visible .menu__line > span {
  background-position: 92% 50%;
  filter: drop-shadow(0 0 18px rgba(220,227,234,0.45));
}
/* staggered rise, ordered by each element's --i (labels + links share one scale) */
.menu.open .menu__link .menu__line > span { transition-delay: calc(0.14s + var(--i, 0) * 0.05s); }
/* platinum underline grows from the left on hover/focus */
.menu__link::after {
  content: ""; position: absolute; left: 0.05em; right: 0.05em; bottom: 0.04em;
  height: 1px; background: var(--gold-soft); opacity: 0.9;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.menu__link:hover::after, .menu__link:focus-visible::after { transform: scaleX(1); }
/* active section (set by scrollspy): steady underline + slow platinum shimmer */
.menu__link.is-active { opacity: 1; }
.menu__link.is-active::after { transform: scaleX(1); opacity: 0.55; }
.menu__link.is-active .menu__line > span { animation: menuShimmer 5s linear infinite; }
@keyframes menuShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* the photo stage beside the links — crossfades to the hovered link */
.menu__stage {
  position: relative; flex: none;
  width: clamp(250px, 30vw, 400px); aspect-ratio: 4 / 5;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(174,184,194,0.18);
  background: rgba(7,13,26,0.55);
  box-shadow: 0 44px 100px -34px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity: 0; transform: translateX(22px) scale(0.985);
  transition: opacity 0.7s 0.25s var(--ease), transform 0.7s 0.25s var(--ease);
}
.menu.open .menu__stage { opacity: 1; transform: none; }
.menu__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,6,13,0) 52%, rgba(3,6,13,0.55));
  box-shadow: inset 0 0 0 1px rgba(174,184,194,0.12);
}
.menu__media { position: absolute; inset: 0; }
.menu__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.09); filter: saturate(1.05) brightness(0.9);
  transition: opacity 0.7s var(--ease), transform 1.4s var(--ease);
}
.menu__media img.is-show { opacity: 1; transform: scale(1); }

/* logo crown at the top of the overlay — shown on phones only, where the
   cinematic photo stage is hidden; desktop keeps its two-column layout */
.menu__head { display: none; }

@media (max-width: 720px) {
  /* three zones down the screen: logo top · nav centre · footer bottom */
  .menu {
    justify-content: space-between;
    gap: clamp(0.5rem, 1.8vh, 1rem);
    padding-top: clamp(1.9rem, 5vh, 2.8rem);
    padding-bottom: clamp(1rem, 3vh, 1.6rem);
  }
  .menu__inner { gap: 0; width: 100%; margin: 0; }
  .menu__stage { display: none; }

  /* logo crown */
  .menu__head {
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
    opacity: 0; transform: translateY(-12px);
    transition: opacity 0.6s 0.12s var(--ease), transform 0.6s 0.12s var(--ease);
  }
  .menu.open .menu__head { opacity: 1; transform: none; }
  .menu__logo { width: clamp(118px, 33vw, 160px); }
  .menu__eyebrow {
    font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.62rem;
    letter-spacing: 0.4em; text-indent: 0.4em; text-transform: uppercase;
    color: var(--gold-soft); opacity: 0.82;
  }

  /* ---- mobile nav: centred editorial groups, platinum eyebrows, airy rows ---- */
  .menu__nav {
    width: min(440px, 100%);
    align-items: center; gap: clamp(0.85rem, 3vh, 1.5rem);
  }
  .menu__group { align-items: center; gap: clamp(0.35rem, 1.5vh, 0.72rem); width: 100%; }

  /* eyebrow centred, a soft platinum hairline flanking each side */
  .menu__group-label {
    display: flex; align-items: center; justify-content: center; gap: 0.9em;
    text-indent: 0; padding-left: 0; font-size: 0.63rem; letter-spacing: 0.34em;
  }
  .menu__group-label::before,
  .menu__group-label::after {
    content: ""; flex: none; height: 1px; width: clamp(28px, 11vw, 52px);
  }
  .menu__group-label::before { background: linear-gradient(90deg, transparent, rgba(220,227,234,0.5)); }
  .menu__group-label::after  { background: linear-gradient(90deg, rgba(220,227,234,0.5), transparent); }

  /* clean centred links — no numbers, no row borders, no chevrons */
  .menu__link {
    opacity: 1; width: auto; text-align: center;
    padding: clamp(0.3rem, 1.3vh, 0.6rem) 0.5rem;
    font-size: clamp(1.32rem, 5.6vw, 1.6rem); letter-spacing: 0.1em;
    border: 0;
  }
  .menu__group .menu__link { margin-left: 0; }

  /* underline now grows from the centre (desktop base supplies the rest) */
  .menu__link::after { transform-origin: center; bottom: 0.02em; }

  /* steady rows — no hover spotlight / letter-spacing shift on touch */
  .menu__nav:hover .menu__link,
  .menu__nav:hover .menu__link:hover { opacity: 1; }
  .menu__link:hover, .menu__link:focus-visible { letter-spacing: 0.1em; transform: none; }
  .menu__link:active .menu__line > span { filter: drop-shadow(0 0 16px rgba(220,227,234,0.5)); }

  /* footer meta wraps gracefully instead of overflowing */
  .menu__meta { flex-wrap: wrap; justify-content: center; gap: 0.6rem 1rem; }
  .menu__social a { padding: 0.35rem 0.3rem; }
}

.menu__foot {
  position: relative; margin-bottom: auto; /* pairs with nav's auto top to centre the group */
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s 0.4s var(--ease), transform 0.6s 0.4s var(--ease);
}
.menu.open .menu__foot { opacity: 1; transform: translateY(0); }
.menu__tag { margin: 0; }
.menu__addr {
  margin: 0; font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim);
}
.menu__addr a { color: inherit; transition: color 0.3s var(--ease); }
.menu__addr a:hover { color: var(--gold-soft); }
.menu__rule { width: 56px; height: 1px; background: rgba(174,184,194,0.28); margin: 0.25rem 0; }
.menu__meta {
  display: flex; align-items: center; gap: 1.3rem;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.menu__social { display: flex; gap: 1.15rem; }
.menu__social a {
  display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem;
  color: var(--ink-dim); transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.menu__social a:hover, .menu__social a:focus-visible { color: var(--cream); transform: translateY(-2px); }
.menu__social svg { display: block; width: 21px; height: 21px; }

/* phones: cancel the desktop auto-centring so the three zones (logo / nav /
   footer) space out evenly down the screen (see .menu justify-content above) */
@media (max-width: 720px) {
  .menu__foot { margin: 0; }
}
/* short phones: shave the crown + rows so the grouped menu fits without scrolling */
@media (max-width: 720px) and (max-height: 800px) {
  .menu__logo { width: 108px; }
  .menu__eyebrow { display: none; }
  .menu__nav { gap: clamp(0.7rem, 2.6vh, 1.3rem); }
  .menu__group { gap: 0.18rem; }
  .menu__group-label { font-size: 0.56rem; }
  .menu__link { font-size: 1.14rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
  .menu__addr { font-size: 0.62rem; }
}

/* ===================================================
   HERO — video
   =================================================== */
.hero {
  /* Video hero retired — the universe section is now the opening hero on every
     device, so the video block is hidden at all widths (it used to be hidden
     only ≤760px). Kept in the DOM but never rendered or downloaded. */
  display: none;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(0.55) saturate(0.9) contrast(1.05);
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 90% at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 30%, transparent 60%, rgba(10,8,16,1) 100%);
}
/* logo + sub + tag move as ONE centred group in the middle of the video —
   keeps them perfectly in line and lets the scroll animation drive a single
   element (no per-element drift / opacity tug-of-war). */
.hero__content {
  position: relative; z-index: 2;
  width: 100%; padding: 0 1.5rem; text-align: center;
  will-change: transform, opacity;
}
.hero__logo {
  margin: 0; text-align: center;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 500;
  font-size: clamp(3.6rem, 15vw, 12rem);
  letter-spacing: 0.12em; text-indent: 0;
  filter: drop-shadow(0 6px 40px rgba(0,0,0,0.7));
  line-height: 1;
  white-space: nowrap;
}
.hero__logo .mask { display: inline-block; overflow: hidden; padding: 0.08em 0.5em; }
/* With the big image swapped in, the em-based padding (relative to the huge
   hero font-size) and overflow:hidden would over-pad and clip the drop-shadow.
   The image carries its own margin from the crop, so neutralise both here. */
.hero__logo .mask:has(.logo-img) { padding: 0; overflow: visible; }
.hero__logo .mask__in { display: inline-block; will-change: opacity; }
.hero__sub {
  margin: clamp(1rem, 2.6vw, 1.9rem) 0 0;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 300;
  font-size: clamp(0.72rem, 1.6vw, 0.95rem);
  letter-spacing: 0.58em; text-indent: 0.58em; text-transform: uppercase;
  color: rgba(240,234,216,0.88); white-space: nowrap;
}
.hero__tag {
  margin: 1.4rem 0 0;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(230,236,242,0.3);
}
/* Book-a-table CTA — lives in the hero on desktop; the universo carries its own
   copy for mobile (the hero is display:none below 760px). */
.hero__cta { margin-top: 2.2rem; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 2.4rem; transform: translateX(-50%); z-index: 5;
  width: 26px; height: 44px; border: 1.5px solid rgba(240,234,216,0.6); border-radius: 16px;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px;
  background: var(--cream); border-radius: 3px; transform: translateX(-50%);
  animation: wheel 2s ease-in-out infinite;
}
@keyframes wheel { 0% { opacity: 1; top: 8px; } 70% { opacity: 0; top: 24px; } 100% { opacity: 0; top: 8px; } }

/* ===================================================
   UNIVERSE — welcome to Utopia
   =================================================== */
.universo {
  position: relative; overflow: hidden;
  /* Opening hero on every device now (the video hero is retired). Fill the
     viewport and vertically centre the content, like the mobile hero already
     did. svh keeps it steady as the mobile address bar shows/hides. */
  min-height: 100vh; min-height: 100svh;
  padding: 19vh 1.5rem 11rem;
  display: flex; flex-direction: column; justify-content: center;
  /* opens at night, not dusk — there's no golden-hour video above it anymore */
  background:
    radial-gradient(90% 60% at 50% 0%, #0a2138 0%, transparent 60%),
    linear-gradient(180deg, #020a16 0%, #081b2f 38%, #04111f 80%, #020813 100%);
}

/* (film grain moved to the site-wide .nightgrain veil — see foundations) */

/* deep space backdrop — already half-present on the opening screen, then the
   scroll scrub takes it the rest of the way to 1 as you descend into space */
.universo__deepspace {
  position: absolute; inset: 0; z-index: 0; opacity: 0.45;
  background:
    radial-gradient(80% 50% at 50% 30%, #04162b 0%, #020a16 60%, #01060f 100%);
  pointer-events: none;
}

/* canvas starfield */
.universo__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* nebula washes */
.nebula {
  position: absolute; pointer-events: none; z-index: 1;
  mix-blend-mode: screen; filter: blur(40px);
  will-change: transform, opacity;
}
.nebula--violet {
  width: 70vw; height: 50vh; top: 4%; left: -8%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(110,70,190,0.18), transparent 70%);
  animation: nebulaDrift 26s ease-in-out infinite alternate;
}
.nebula--rose {
  width: 55vw; height: 44vh; top: 20%; right: -10%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(190,80,140,0.10), transparent 70%);
  animation: nebulaDrift 32s ease-in-out infinite alternate-reverse;
}
@keyframes nebulaDrift {
  from { transform: translate(0, 0) scale(1); opacity: 0.8; }
  to   { transform: translate(5vw, 3vh) scale(1.12); opacity: 1; }
}

/* shooting stars */
.shooting i {
  position: absolute; width: 130px; height: 1.5px; opacity: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), transparent);
  transform: rotate(-32deg);
  animation: shoot 9s linear infinite;
}
.shooting i:nth-child(1) { top: 12%; left: 72%; animation-delay: 2s; }
.shooting i:nth-child(2) { top: 7%;  left: 30%; animation-delay: 6.5s; }
.shooting i:nth-child(3) { top: 26%; left: 88%; animation-delay: 11s; animation-duration: 12s; }
@keyframes shoot {
  0%  { transform: translate(0,0) rotate(-32deg); opacity: 0; }
  3%  { opacity: 1; }
  9%  { transform: translate(-340px, 212px) rotate(-32deg); opacity: 0; }
  100%{ opacity: 0; }
}

/* ---- WELCOME TO ribbon ---- */
.ribbon {
  position: absolute; z-index: 8; top: 5.5%; left: 50%;
  --rw: clamp(250px, 36vw, 410px);
  width: var(--rw); margin-left: calc(var(--rw) / -2);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
  animation: ribbonSwing 7s ease-in-out infinite alternate;
  transform-origin: 50% 0%;
  will-change: transform;
}
@keyframes ribbonSwing { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
.ribbon svg { display: block; width: 100%; height: auto; }
.ribbon__text {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 500;
  font-size: 19px; letter-spacing: 0.42em;
  fill: var(--gold-soft);
}

/* ---- white photographic clouds ---- */
.wcloud {
  position: absolute; pointer-events: none;
  mix-blend-mode: screen; will-change: transform;
}
.wcloud img {
  width: 100%; display: block;
  filter: grayscale(1) brightness(1.04) contrast(2.1);
  -webkit-mask-image: radial-gradient(52% 48% at 50% 50%, #000 30%, transparent 72%);
  mask-image: radial-gradient(52% 48% at 50% 50%, #000 30%, transparent 72%);
  animation: wcloudDrift var(--cdur, 60s) ease-in-out infinite alternate;
}
@keyframes wcloudDrift {
  from { translate: -3% 0; }
  to   { translate: 3% 0; }
}
.wcloud--2    { top: 25%; left: 15%; width: clamp(140px, 18vw, 280px); z-index: 4; opacity: 0.8;  --cdur: 56s; }
.wcloud--over { top: 30%; left: 50%; margin-left: clamp(-420px, -30vw, -240px); width: clamp(170px, 22vw, 330px); z-index: 11; opacity: 0.9; --cdur: 48s; }

/* drifting birds */
.universo__birds { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.bird {
  position: absolute; width: 7px; height: 3px; opacity: 0;
  border-radius: 60% 60% 0 0 / 100% 100% 0 0;
  border-top: 1.6px solid rgba(230,225,240,0.8);
  animation: flock var(--fdur, 16s) linear infinite;
  animation-delay: var(--fdel, 0s);
}
@keyframes flock {
  0%   { transform: translate(0, 0) scale(var(--fs, 1)); opacity: 0; }
  8%   { opacity: 0.9; }
  92%  { opacity: 0.7; }
  100% { transform: translate(var(--fx, 300px), var(--fy, -80px)) scale(var(--fs, 1)); opacity: 0; }
}

/* dust motes */
.motes { position: absolute; inset: 25% 8% 18% 8%; pointer-events: none; z-index: 7; }
.mote {
  position: absolute; border-radius: 50%;
  background: rgba(210,222,255,0.85);
  filter: blur(0.6px);
  animation:
    moteRise var(--mdur, 18s) linear infinite,
    moteSway var(--sdur, 6s) ease-in-out infinite alternate;
  animation-delay: var(--mdel, 0s), 0s;
  opacity: 0;
}
@keyframes moteRise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: var(--mo, 0.5); }
  85%  { opacity: var(--mo, 0.5); }
  100% { transform: translateY(-46vh); opacity: 0; }
}
@keyframes moteSway { from { margin-left: 0; } to { margin-left: var(--mx, 22px); } }

/* ===================================================
   THE SCENE — island + wordmark cluster
   =================================================== */
.universo__content { position: relative; z-index: 10; text-align: center; }
.scene {
  position: relative;
  width: min(640px, 92vw);
  margin: 0 auto;
  isolation: isolate; /* contain the orbiting-planet z-index interleave */
}
/* big soft glow behind the whole cluster */
.scene__glow {
  position: absolute; inset: -10% -16% 4%;
  background: radial-gradient(50% 46% at 50% 46%,
    rgba(235,238,255,0.20), rgba(220,225,255,0.08) 50%, transparent 72%);
  filter: blur(24px);
  animation: sceneGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes sceneGlow { from { opacity: 0.8; } to { opacity: 1.05; } }

.island-anim { position: relative; will-change: transform; z-index: 2; }
.island-svg {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 36px 48px rgba(0,0,0,0.55));
}

/* photoreal island (foto/island.webp) swapped in by JS when available */
.island-img {
  display: block; width: 100%; height: auto;
  filter:
    brightness(0.8) saturate(0.92) contrast(1.06)
    drop-shadow(0 36px 50px rgba(0,0,0,0.6))
    drop-shadow(0 0 32px rgba(176,194,255,0.14));
}
.island-anim.has-img .fireflies { inset: 12% 16% 44% 16%; }

/* real logo over the island */
.scene__wordmark {
  position: absolute; left: -10%; right: -10%; top: 50%; z-index: 4;
  text-align: center; pointer-events: none;
  will-change: transform;
}
.scene__logo-img {
  display: inline-block;
  width: min(106%, 780px); max-width: none;
  height: auto;
  filter:
    drop-shadow(0 0 28px rgba(255,255,255,0.28))
    drop-shadow(0 10px 38px rgba(0,0,0,0.6));
  will-change: transform;
}
/* one warm pulse of light through the logo as it lands (the mobile opening
   sequence adds .is-bloom); keyframes carry the resting drop-shadows so the
   glow settles back into exactly the static filter above */
@keyframes logoBloom {
  0%   { filter: drop-shadow(0 0 28px rgba(255,255,255,0.28)) drop-shadow(0 10px 38px rgba(0,0,0,0.6)) brightness(1); }
  40%  { filter: drop-shadow(0 0 48px rgba(255,241,205,0.62)) drop-shadow(0 10px 38px rgba(0,0,0,0.6)) brightness(1.45); }
  100% { filter: drop-shadow(0 0 28px rgba(255,255,255,0.28)) drop-shadow(0 10px 38px rgba(0,0,0,0.6)) brightness(1); }
}
.scene__logo-img.is-bloom { animation: logoBloom 1.5s ease-out both; }

/* afterglow once the script signature finishes writing (mobile intro) */
@keyframes sigGlow {
  0%   { text-shadow: 0 0 0 rgba(220,227,234,0); }
  40%  { text-shadow: 0 0 26px rgba(244,220,150,0.55), 0 0 60px rgba(220,227,234,0.30); }
  100% { text-shadow: 0 0 14px rgba(220,227,234,0.22); }
}
.scene__sub {
  margin-top: 0.7rem;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 300;
  font-size: clamp(0.66rem, 1.5vw, 0.9rem);
  letter-spacing: 0.5em; text-indent: 0.5em; text-transform: uppercase;
  color: rgba(240,234,216,0.9);
  text-shadow: 0 0 14px rgba(230,236,242,0.3), 0 4px 18px rgba(0,0,0,0.6);
}
.scene__tag {
  margin-top: 0.4rem;
  text-shadow: 0 0 14px rgba(230,236,242,0.35), 0 4px 18px rgba(0,0,0,0.6);
}

/* fog puff under the island */
.scene__fogpuff {
  position: absolute; left: 50%; bottom: -5%; transform: translateX(-50%);
  width: 76%; height: 24%; z-index: 1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(225,228,248,0.22), transparent 70%);
  filter: blur(16px);
  animation: fogPuff 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fogPuff { from { opacity: 0.6; transform: translateX(-50%) scale(0.94); } to { opacity: 1; transform: translateX(-50%) scale(1.08); } }

/* palm fronds sway */
.island-svg .sway {
  transform-box: fill-box; transform-origin: 50% 90%;
  animation: frondSway 5.4s ease-in-out infinite alternate;
}
.island-svg .sway--r { animation-duration: 6.3s; animation-delay: 1.2s; }
@keyframes frondSway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }

/* string lights gentle sway */
.island-svg .lights-sway {
  transform-box: fill-box; transform-origin: 50% 0%;
  animation: lightsSway 7s ease-in-out infinite alternate;
}
@keyframes lightsSway { from { transform: rotate(-0.5deg); } to { transform: rotate(0.5deg); } }

/* bulbs / windows */
.island-svg .bulb { fill: #ffd98a; animation: bulbGlow 3.2s ease-in-out infinite alternate; }
.island-svg .bulb:nth-child(odd) { animation-delay: 1.1s; }
.island-svg .bulb:nth-child(3n) { animation-delay: 2s; }
@keyframes bulbGlow { from { opacity: 0.45; } to { opacity: 1; } }
.island-svg .win { animation: winFlicker 6s ease-in-out infinite alternate; }
@keyframes winFlicker { from { opacity: var(--wo, 0.6); } to { opacity: calc(var(--wo, 0.6) * 0.55); } }

/* chimney smoke */
.island-svg .smoke {
  fill: #9aa2c8; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: smokeRise 4.6s ease-out infinite;
}
.island-svg .smoke--2 { animation-delay: 2.3s; }
@keyframes smokeRise {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  15%  { opacity: 0.32; }
  100% { transform: translateY(-32px) scale(1.7); opacity: 0; }
}

/* lagoon glint drifting across the water */
.island-svg .lagoon-glint {
  transform-box: fill-box; transform-origin: center;
  animation: lagoonGlint 3.6s ease-in-out infinite alternate;
}
@keyframes lagoonGlint {
  from { opacity: 0.25; transform: translateX(-4px) scaleX(0.8); }
  to   { opacity: 0.75; transform: translateX(7px) scaleX(1.15); }
}

/* waterfall shimmer */
.island-svg .fall-strip { animation: fallShimmer 1.4s ease-in-out infinite alternate; }
.island-svg .fall-strip--2 { animation-duration: 1.05s; }
@keyframes fallShimmer { from { opacity: 0.55; } to { opacity: 1; } }
.island-svg .fall-mist { animation: mistPuff 3.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes mistPuff { from { opacity: 0.16; transform: scale(0.85); } to { opacity: 0.36; transform: scale(1.2); } }

/* droplets below waterfall */
.droplets { position: absolute; left: 31%; top: 76%; width: 8%; height: 26%; pointer-events: none; }
.droplet {
  position: absolute; top: 0; width: 2px; height: 7px; border-radius: 2px;
  background: linear-gradient(rgba(214,236,255,0.9), rgba(190,220,250,0.2));
  animation: dropletFall var(--ddur, 1.6s) linear infinite;
  animation-delay: var(--ddel, 0s);
  opacity: 0;
}
@keyframes dropletFall {
  0%   { transform: translateY(0) scaleY(1); opacity: 0.9; }
  80%  { opacity: 0.4; }
  100% { transform: translateY(120px) scaleY(0.5); opacity: 0; }
}

/* fireflies */
.fireflies { position: absolute; inset: 4% 12% 52% 12%; pointer-events: none; }
.ff {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 6px 2px rgba(255,220,140,0.7);
  animation:
    ffFloat var(--fdur, 11s) ease-in-out infinite alternate,
    ffGlow var(--gdur, 2.6s) ease-in-out infinite alternate;
  animation-delay: var(--fdel, 0s), var(--gdel, 0s);
}
@keyframes ffFloat {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--fx, 30px), var(--fy, -22px)); }
}
@keyframes ffGlow { from { opacity: 0.1; } to { opacity: 0.95; } }

/* sub + welcome text */
.universo__sub {
  margin-top: 3rem;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 300;
  font-size: 0.78rem; letter-spacing: 0.5em; text-indent: 0.5em; text-transform: uppercase;
  color: var(--gold-soft);
}
.universo__text {
  margin-top: 1.8rem; max-width: 640px; margin-left: auto; margin-right: auto;
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  color: rgba(239,232,216,0.85);
  letter-spacing: 0.04em;
}
.universo__text em { font-style: italic; color: var(--gold-soft); }
.universo__text .tline { display: block; overflow: hidden; }
.universo__text .tline > span { display: inline-block; will-change: transform; }
.universo__text .tline--gap { margin-top: 1.1em; }
/* Book-a-table CTA. It used to live in the video hero on desktop; now the hero
   is retired, so the universe carries the button on every device. */
.universo__cta { display: block; margin-top: 2.6rem; }

/* low fog drifting over the city */
.fog {
  position: absolute; left: -10%; width: 120%; height: 14vh; bottom: 0; z-index: 8;
  pointer-events: none; filter: blur(18px);
  background: linear-gradient(90deg,
    transparent 0%, rgba(170,160,200,0.10) 18%, rgba(170,160,200,0.05) 38%,
    rgba(170,160,200,0.12) 60%, rgba(170,160,200,0.04) 82%, transparent 100%);
}
.fog--1 { animation: fogDrift 38s ease-in-out infinite alternate; }
.fog--2 { bottom: 5vh; opacity: 0.7; animation: fogDrift 52s ease-in-out infinite alternate-reverse; }
@keyframes fogDrift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* gentle vignette */
.universo__vignette {
  position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 58%, rgba(6,4,12,0.6) 100%);
}

/* ===================================================
   EXPERIENCE banner
   =================================================== */
.experience {
  display: grid; grid-template-columns: 1.1fr 1fr;
  min-height: 480px; background: transparent; /* the night sky shows through */
}
.experience__img { overflow: hidden; position: relative; }
.experience__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(3,16,33,0.12), rgba(2,12,26,0.72) 94%);
}
.experience__img img {
  width: 100%; height: 100%; object-fit: cover;
  /* the raised coupe sits below center in the tall shot — bias the crop down
     so the glass (not the empty painted wall) fills the banner */
  object-position: center 62%;
  filter: saturate(0.98) brightness(0.85);
  transform: scale(1.04);
  transition: transform 1.3s var(--ease), filter 1.3s var(--ease);
}
.experience__img:hover img { transform: scale(1.09); filter: saturate(1.04) brightness(0.92); }
.experience__panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 5rem 3rem;
  background: radial-gradient(110% 110% at 50% 0%, rgba(10,34,56,0.9) 0%, rgba(2,12,26,0.55) 70%);
}
.experience__eyebrow {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1.8rem;
}
.experience__script {
  font-family: 'Great Vibes', cursive; font-size: 2rem; color: var(--gold-soft); line-height: 1;
}
.experience__script--lg { font-size: 2.8rem; margin-top: 0.3rem; }
.experience__brand {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  letter-spacing: 0.3em; text-indent: 0.3em; color: var(--cream); margin-top: 0.4rem;
}
.experience__rule {
  position: relative; width: 132px; height: 1px; margin: 1.8rem 0; opacity: 0.9;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 26%, transparent 44%, transparent 56%, var(--gold-soft) 74%, transparent);
}
.experience__rule::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--gold-soft); font-size: 0.7rem; line-height: 1;
}
.experience__copy { font-size: 1.08rem; color: rgba(239,232,216,0.8); max-width: 34rem; }

/* ===================================================
   GALLERY
   =================================================== */
.galeria { background: transparent; padding: 6px; } /* stars twinkle in the gutters */
.galeria__grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(4, 1fr);
}
/* square cells match the 1:1 source photos, so nothing gets cropped; one 2×2
   feature adds a focal point. 1 feature + 8 singles = 12 cells → tessellates
   perfectly at 4, 3 and 2 columns (no gaps at any breakpoint). */
.g-item { position: relative; overflow: hidden; aspect-ratio: 1; }
.g-item--feature { grid-column: span 2; grid-row: span 2; }
.g-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.95) brightness(0.9);
  transition: transform 1s var(--ease), filter 0.6s;
}
.g-item:hover img { transform: scale(1.07); filter: saturate(1.05) brightness(1.02); }

/* subtle night grade — a faint cool wash so warm daylight shots keep the mood */
.g-item::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,32,64,0.16), rgba(4,12,28,0.2));
  mix-blend-mode: multiply;
}

/* hover veil + platinum caption; the whole tile opens the lightbox */
.g-item { cursor: pointer; }
.g-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 46%, rgba(2,8,18,0.82) 100%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.g-item::before {
  content: attr(data-cap); position: absolute; left: 1rem; right: 1rem; bottom: 0.95rem; z-index: 2;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.76rem; line-height: 1.3;
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  color: var(--gold-soft); pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.g-item:hover::after, .g-item:focus-visible::after { opacity: 1; }
.g-item:hover::before, .g-item:focus-visible::before { opacity: 1; transform: none; }

/* ---------- gallery lightbox — liquid-glass viewer (markup built by JS) ---------- */
.glb {
  position: fixed; inset: 0; z-index: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  padding-top: calc(clamp(1rem, 4vw, 3rem) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(1rem, 4vw, 3rem) + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.glb.open { opacity: 1; visibility: visible; }
.glb__veil {
  position: absolute; inset: 0;
  background: rgba(2,7,16,0.8);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}
.glb__frame {
  position: relative; max-width: min(1040px, 100%);
  transform: scale(0.96) translateY(10px);
  transition: transform 0.5s var(--ease);
}
.glb.open .glb__frame { transform: none; }
.glb__img {
  display: block; max-width: 100%; max-height: 74vh; max-height: 74svh;
  border-radius: 16px; border: 1px solid rgba(220,227,234,0.16);
  box-shadow: 0 50px 130px rgba(0,0,0,0.6);
  background: #06101d;
}
/* iridescent hairline hugging the photo */
.glb__frame::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1px;
  background: var(--iris); background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.55; pointer-events: none; animation: irisShift 12s ease-in-out infinite alternate;
}
.glb__bar {
  position: relative; display: flex; align-items: center; gap: 1.1rem;
  margin-top: 1.05rem; color: var(--gold-soft);
}
.glb__cap {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.8rem;
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
}
.glb__count { font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.74rem; letter-spacing: 0.14em; color: rgba(220,227,234,0.55); }
.glb__btn {
  position: absolute; z-index: 3; width: 46px; height: 46px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--gold-soft); border: 1px solid rgba(220,227,234,0.22); border-radius: 50%;
  background: rgba(8,18,32,0.55);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 14px 34px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.glb__btn:hover { border-color: rgba(220,227,234,0.5); background-color: rgba(14,28,48,0.75); color: #fff; }
.glb__btn svg { width: 20px; height: 20px; }
.glb__btn--close { top: clamp(0.9rem, 3vw, 1.6rem); right: clamp(0.9rem, 3vw, 1.6rem); }
.glb__btn--prev { left: clamp(0.6rem, 2.5vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.glb__btn--next { right: clamp(0.6rem, 2.5vw, 1.6rem); top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  /* keep the arrows off the photo on small screens */
  .glb { padding-bottom: 5.4rem; }
  .glb__btn--prev { top: auto; bottom: 1.1rem; transform: none; left: calc(50% - 60px); }
  .glb__btn--next { top: auto; bottom: 1.1rem; transform: none; right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .glb, .glb__frame { transition: none; }
  .glb__frame::after { animation: none; }
}

/* ===================================================
   PRIVATE HIRE — parallax band
   =================================================== */
.aprender {
  position: relative; min-height: 76vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background-image:
    linear-gradient(rgba(3,12,26,0.55), rgba(3,12,26,0.72)),
    url('../foto/utopia1.webp');
  background-size: cover; background-position: center; background-attachment: fixed;
  padding: 7rem 1.5rem;
}
.aprender__eyebrow {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.7rem; letter-spacing: 0.46em; text-indent: 0.46em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.2rem;
}
.aprender__content h2 {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4rem); color: var(--cream);
  text-shadow: 0 4px 40px rgba(0,0,0,0.7);
}
.aprender__content h2 em { font-style: italic; color: var(--gold-soft); }
.aprender__content p { max-width: 560px; margin: 1.4rem auto 2.4rem; font-size: 1.14rem; color: rgba(239,232,216,0.92); }
.btn-outline {
  display: inline-block; padding: 0.85rem 2.6rem;
  background: transparent;
  border: 1px solid var(--cream); color: var(--cream);
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase;
  transition: background 0.4s, color 0.4s;
}
.btn-outline:hover { background: var(--cream); color: #14110a; }

/* ===================================================
   MASTERCLASS
   =================================================== */
.masterclass {
  position: relative; text-align: center;
  padding: clamp(5.5rem, 11vw, 9rem) 1.5rem;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(28,58,92,0.4), transparent 60%),
    linear-gradient(180deg, rgba(5,26,48,0.55) 0%, rgba(4,22,42,0.4) 50%, rgba(3,16,33,0.2) 100%);
}
.masterclass__inner { max-width: 1060px; margin: 0 auto; }

/* editorial two-column layout: heading + CTA | course menu */
.mc-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  text-align: left;
}
.mc-intro { position: relative; }
.mc-intro .mc-emblem { margin: 0 0 1.4rem; }
.mc-intro .masterclass__pre { margin-bottom: 1rem; }
.mc-intro .masterclass__title { font-size: clamp(2.3rem, 5.2vw, 4rem); }
.mc-intro .masterclass__sub { justify-content: flex-start; }
.mc-intro .masterclass__tag { margin: 1.5rem 0 0; }
.mc-intro .masterclass__copy { margin: 1.3rem 0 0; max-width: 42ch; }
.mc-intro .btn-gold { margin-top: 2.1rem; }

/* framed liquid-glass card that anchors the content */
.mc-card {
  position: relative;
  padding: clamp(2.8rem, 6vw, 4.8rem) clamp(1.4rem, 5vw, 4rem);
  border: 1px solid rgba(220,227,234,0.10);
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(28,58,92,0.4), transparent 62%),
    linear-gradient(180deg, rgba(10,26,46,0.5), rgba(5,16,33,0.28));
  box-shadow:
    0 40px 90px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(15px) saturate(160%);
  backdrop-filter: blur(15px) saturate(160%);
  overflow: hidden;
}
/* soft light that follows the cursor across the panel */
.mc-card__spot {
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease);
  background: radial-gradient(420px 420px at var(--spot-x, 50%) var(--spot-y, 28%),
    rgba(150,180,230,0.16), transparent 60%);
}
.mc-card:hover .mc-card__spot { opacity: 1; }
/* keep real content above the blobs/spotlight (tree order handles the layering) */
.mc-card > *:not(.mc-card__spot):not(.mc-card__corner):not(.mc-blob) { position: relative; }

/* morphing liquid blobs drifting behind the glass */
.mc-blob {
  position: absolute; z-index: 0; width: 46%; aspect-ratio: 1;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(30px) saturate(150%);
  mix-blend-mode: screen; opacity: 0.55; pointer-events: none;
  will-change: transform, border-radius;
}
.mc-blob--1 {
  top: -10%; left: -8%;
  background: radial-gradient(circle at 30% 30%, rgba(120,165,230,0.65), transparent 70%);
  animation: blobMorph 17s ease-in-out infinite, blobDrift1 23s ease-in-out infinite alternate;
}
.mc-blob--2 {
  bottom: -12%; right: -10%;
  background: radial-gradient(circle at 60% 40%, rgba(150,120,215,0.55), transparent 70%);
  animation: blobMorph 21s ease-in-out infinite reverse, blobDrift2 27s ease-in-out infinite alternate;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33%      { border-radius: 60% 40% 38% 62% / 56% 38% 62% 44%; }
  66%      { border-radius: 38% 62% 56% 44% / 62% 56% 38% 44%; }
}
@keyframes blobDrift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(14%, 9%) scale(1.14); } }
@keyframes blobDrift2 { from { transform: translate(0, 0) scale(1.06); } to { transform: translate(-11%, -8%) scale(1); } }

/* faint sheen across the top edge */
.mc-card::before {
  content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(220,227,234,0.55), transparent);
}
/* iridescent edge — the Liquid Glass signature, kept subtle + on-brand */
.mc-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 4;
  background: var(--iris); background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.7;
  animation: irisShift 12s ease-in-out infinite alternate;
}
@keyframes irisShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* corner brackets */
.mc-card__corner {
  position: absolute; width: 16px; height: 16px;
  color: rgba(220,227,234,0.42); pointer-events: none;
}
.mc-card__corner--tl { top: 16px; left: 16px; border-top: 1px solid; border-left: 1px solid; }
.mc-card__corner--tr { top: 16px; right: 16px; border-top: 1px solid; border-right: 1px solid; }
.mc-card__corner--bl { bottom: 16px; left: 16px; border-bottom: 1px solid; border-left: 1px solid; }
.mc-card__corner--br { bottom: 16px; right: 16px; border-bottom: 1px solid; border-right: 1px solid; }
.masterclass__pre {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.95rem; letter-spacing: 0.4em;
  color: var(--ink-dim); margin-bottom: 1.6rem;
}
.masterclass__title {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 600;
  font-size: clamp(2rem, 7vw, 4.8rem); letter-spacing: 0.2em; text-indent: 0.2em;
  color: var(--gold-soft);
  text-shadow: 0 6px 40px rgba(0,0,0,0.6);
}
.masterclass__sub {
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  margin-top: 0.8rem;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: clamp(1.05rem, 3vw, 1.6rem);
  letter-spacing: 0.55em; text-indent: 0.55em; color: var(--cream);
}
.masterclass__sub .orn { color: var(--gold-soft); font-size: 0.8em; text-indent: 0; letter-spacing: 0; }
.masterclass__tag {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.85rem); color: var(--cream); margin: 2rem 0 1.4rem;
}
.masterclass__copy { font-size: 1.1rem; color: rgba(239,232,216,0.86); max-width: 44rem; margin: 0 auto; }

/* ---- course menu — editorial, hairline-separated rows ---- */
.mc-menu { list-style: none; display: flex; flex-direction: column; position: relative; }
/* slim platinum divider in the gutter between the heading and the courses
   (2-column layout only — echoes the hairlines between rows) */
@media (min-width: 981px) {
  .mc-menu::before {
    content: ''; position: absolute; top: 0; bottom: 0;
    left: clamp(-2.25rem, -2.5vw, -1rem); width: 1px;
    background: linear-gradient(180deg, transparent, rgba(220,227,234,0.20) 15%, rgba(220,227,234,0.20) 85%, transparent);
  }
}
.mc-row {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.6rem);
  padding: clamp(1.2rem, 2.6vw, 1.7rem) clamp(0.7rem, 1.8vw, 1.2rem);
  border-radius: 14px;
  transition: background 0.35s var(--ease), padding-left 0.4s var(--ease);
}
/* hairline divider between rows (iridescent, subtle) */
.mc-row + .mc-row::before {
  content: ''; position: absolute; top: 0;
  left: clamp(0.7rem, 1.8vw, 1.2rem); right: clamp(0.7rem, 1.8vw, 1.2rem); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,227,234,0.22), transparent);
}
/* platinum accent grows down the left edge on hover */
.mc-row::after {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 0; border-radius: 2px;
  background: var(--iris); background-size: 100% 220%;
  transition: height 0.4s var(--ease);
}
.mc-row:hover { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)); padding-left: clamp(1.3rem, 2.6vw, 1.9rem); }
.mc-row:hover::after { height: 60%; }

/* glassware artwork — liquid rises on row hover */
.mc-row__art { width: clamp(40px, 8vw, 52px); filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); }
.mc-glass { width: 100%; height: auto; display: block; color: var(--gold-soft); }
.mc-liquid {
  transform: translateY(46px); transform-box: view-box;
  transition: transform 1.05s var(--ease);
}
.mc-row:hover .mc-liquid { transform: translateY(0); }
.mc-bub { opacity: 0; transform-box: view-box; }
.mc-row:hover .mc-bub { animation: mcBub 1.8s ease-in infinite; }
.mc-row:hover .mc-bub.b2 { animation-delay: 0.5s; }
.mc-row:hover .mc-bub.b3 { animation-delay: 1s; }
@keyframes mcBub {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-22px); }
}
.mc-spark {
  transform-box: view-box; transform-origin: center;
  animation: mcSpark 2.6s ease-in-out infinite;
}
@keyframes mcSpark {
  0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(90deg); }
}
.mc-row__body h3 {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 400;
  font-size: clamp(1.04rem, 2.3vw, 1.26rem); letter-spacing: 0.04em; color: var(--cream);
  margin: 0 0 0.35rem;
}
.mc-row__body p {
  font-size: 0.97rem; line-height: 1.55; color: rgba(239,232,216,0.84); max-width: 44ch;
}

/* ---- animated shaker emblem ---- */
.mc-emblem {
  position: relative; width: 56px; height: 84px; margin: 0 auto 1.6rem;
  color: var(--gold-soft);
  filter: drop-shadow(0 0 14px rgba(220,227,234,0.28));
}
.mc-emblem__shaker {
  width: 100%; height: 100%; display: block;
  transform-origin: 50% 94%;
  animation: mcShake 4s ease-in-out infinite;
}
@keyframes mcShake {
  0%, 58%, 100% { transform: rotate(0deg); }
  62% { transform: rotate(-8deg); }
  66% { transform: rotate(8deg); }
  70% { transform: rotate(-6deg); }
  74% { transform: rotate(6deg); }
  78% { transform: rotate(-3deg); }
  82% { transform: rotate(0deg); }
}
/* droplets flicking off as it shakes */
.mc-emblem__drop {
  position: absolute; top: 8px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-soft); opacity: 0;
}
.mc-emblem__drop.d1 { left: 8px;  animation: mcDrop 4s ease-in infinite; }
.mc-emblem__drop.d2 { right: 8px; animation: mcDrop 4s ease-in infinite 0.18s; }
@keyframes mcDrop {
  0%, 60% { opacity: 0; transform: translate(0, 0) scale(1); }
  66% { opacity: 0.9; }
  82% { opacity: 0; transform: translate(var(--dx, -10px), -16px) scale(0.5); }
  100% { opacity: 0; }
}
.mc-emblem__drop.d2 { --dx: 10px; }

/* ---- metallic shimmer on the title (matches the logo) ---- */
.masterclass__title .mc-shine {
  background: linear-gradient(100deg,
    #aeb8c2 0%, #e8edf2 20%, #ffffff 30%, #dce3ea 42%,
    #aeb8c2 60%, #eef2f6 80%, #c4ccd4 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: mcShine 7s linear infinite;
}
@keyframes mcShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.btn-gold {
  display: inline-block; padding: 0.9rem 2.8rem;
  background: linear-gradient(135deg, #eef2f6, #b6c0c9);
  color: #14181c;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(220,227,234,0.28); }

/* ===================================================
   CELEBRATIONS
   =================================================== */
.asesoria { background: transparent; text-align: center; padding: clamp(4.5rem, 9vw, 7rem) 1.5rem 0; }
.asesoria__head {
  position: relative; overflow: hidden;
  max-width: 680px; margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4rem) clamp(1.6rem, 5vw, 3.4rem);
  border: 1px solid rgba(220,227,234,0.10);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(10,26,46,0.5), rgba(5,16,33,0.28));
  -webkit-backdrop-filter: blur(15px) saturate(160%);
  backdrop-filter: blur(15px) saturate(160%);
  box-shadow: 0 40px 90px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* keep content above the drifting blobs */
.asesoria__head > :not(.mc-blob) { position: relative; z-index: 1; }
/* iridescent edge — shared signature with the masterclass card */
.asesoria__head::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2;
  background: var(--iris); background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.7;
  animation: irisShift 12s ease-in-out infinite alternate;
}
.asesoria__eyebrow {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.7rem;
  letter-spacing: 0.46em; text-indent: 0.46em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 1rem;
}
.asesoria__head h2 {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.6rem); color: var(--cream);
}
.asesoria__head p { margin: 1.4rem auto 2.2rem; max-width: 42rem; font-size: 1.12rem; color: rgba(239,232,216,0.86); }
.asesoria__strip { margin-top: clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; }
.asesoria__strip::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #020a16 0%, transparent 30%, transparent 70%, #020a16 100%);
  z-index: 1; pointer-events: none;
}
.asesoria__strip img {
  width: 100%; height: clamp(300px, 50vw, 520px); object-fit: cover;
  filter: brightness(0.8) saturate(0.98);
}

/* ===================================================
   FOOTER
   =================================================== */
.footer {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(4.8rem, 9vw, 7rem) 1.5rem 2.2rem;
  border-top: 1px solid rgba(220,227,234,0.16);
  /* cosmic horizon: a teal + blue aurora glowing up from the foot of the page */
  background:
    radial-gradient(70% 52% at 50% 116%, rgba(47,169,164,0.20), transparent 60%),
    radial-gradient(120% 78% at 50% 130%, rgba(120,160,220,0.18), transparent 56%),
    linear-gradient(180deg, rgba(3,7,15,0.35) 0%, rgba(5,15,30,0.45) 52%, rgba(2,10,22,0.2) 100%);
}
/* a quiet, twinkling star field drifting across the footer */
.footer::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 10% 22%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 22% 40%, rgba(220,227,234,0.7), transparent),
    radial-gradient(1.2px 1.2px at 34% 14%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 47% 30%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.3px 1.3px at 61% 18%, rgba(220,227,234,0.78), transparent),
    radial-gradient(1px 1px at 73% 36%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 88% 24%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 16% 60%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 84% 60%, rgba(220,227,234,0.55), transparent),
    radial-gradient(1px 1px at 52% 52%, rgba(255,255,255,0.5), transparent);
  -webkit-mask-image: radial-gradient(120% 88% at 50% 6%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 88% at 50% 6%, #000 0%, transparent 70%);
  animation: footerTwinkle 6.5s ease-in-out infinite alternate;
}
@keyframes footerTwinkle { from { opacity: 0.5; } to { opacity: 0.95; } }
/* luminous horizon glow tracing the top edge */
.footer::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 100% at 50% 0%, rgba(120,160,220,0.16), transparent 72%);
}
.footer > * { position: relative; z-index: 1; }
.footer__logo .logo-img { filter: drop-shadow(0 8px 34px rgba(120,160,220,0.28)); }
.footer__logo {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: 0.14em; text-indent: 0.14em; color: var(--cream);
}
.footer__seeyou {
  margin-top: 0.7rem; font-size: 0.82rem;
  /* brushed-platinum shimmer, matching the logo + display titles */
  background: linear-gradient(100deg,
    #aeb8c2 0%, #e8edf2 22%, #ffffff 32%, #dce3ea 44%, #aeb8c2 62%, #eef2f6 82%, #c4ccd4 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: footerShine 7s linear infinite;
}
@keyframes footerShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.footer__tag {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem; letter-spacing: 0.5em; text-indent: 0.5em;
  text-transform: uppercase; color: var(--gold-soft); margin: 0.4rem 0 0;
}
/* ornamental divider — shared brand motif (hairline) */
.footer__orn {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  width: min(360px, 78%); margin: 1.8rem auto 2.4rem;
  color: var(--gold-soft); font-size: 0.7rem; line-height: 1;
  text-shadow: 0 0 16px rgba(220,227,234,0.5);
}
.footer__orn::before, .footer__orn::after { content: ""; height: 1px; flex: 1; }
.footer__orn::before { background: linear-gradient(90deg, transparent, rgba(220,227,234,0.45)); }
.footer__orn::after  { background: linear-gradient(90deg, rgba(220,227,234,0.45), transparent); }

/* short brand line + reservation call-to-action under the wordmark */
.footer__about {
  max-width: 38rem; margin: 1.15rem auto 0;
  font-size: 1.05rem; line-height: 1.7; color: rgba(239,232,216,0.72);
}
.footer__cta { margin-top: 1.9rem; }

/* labelled contact columns — Visit · Contact · Hours, with hairline dividers */
.footer__cols {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: center;
  gap: 0 clamp(2.5rem, 6vw, 5rem); max-width: 900px; margin: 0 auto;
}
.footer__col { position: relative; min-width: 178px; }
.footer__col + .footer__col::before {
  content: ""; position: absolute; top: 4px; bottom: 4px;
  left: calc(clamp(2.5rem, 6vw, 5rem) / -2); width: 1px;
  background: linear-gradient(180deg, transparent, rgba(220,227,234,0.2), transparent);
}
.footer__label {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem;
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 0.7rem;
}
.footer__col p { font-size: 1.02rem; color: var(--ink-dim); line-height: 1.7; }
.footer__col a { color: var(--ink-dim); transition: color 0.3s var(--ease); }
.footer__col a:hover { color: var(--gold-soft); }
.footer__social { display: flex; justify-content: center; gap: 0.9rem; margin: 2rem 0 2.6rem; }
.footer__social a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(239,232,216,0.28);
  background: rgba(255,255,255,0.03);
  display: grid; place-items: center; color: var(--ink-dim);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
              background 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.footer__social svg { height: 17px; width: auto; display: block; }
/* platinum-fill hover, matching the brand buttons */
.footer__social a:hover, .footer__social a:focus-visible {
  color: #06121f; border-color: transparent;
  background: linear-gradient(135deg, #eef2f6, #b6c0c9);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(220,227,234,0.25);
}
.footer__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  max-width: 1100px; margin: 0 auto;
  padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.06);
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(155,147,165,0.8);
}
.footer__base a:hover { color: var(--cream); }
/* On phones the three columns stack — presented as one liquid-glass contact
   card (same panel language as the rest of the site) instead of a long plain
   list, with the desktop's vertical seams turned into horizontal hairlines */
@media (max-width: 640px) {
  .footer__cols {
    grid-template-columns: 1fr; gap: 0;
    max-width: 24rem; padding: 0.5rem 1.5rem;
    border: 1px solid rgba(220,227,234,0.12); border-radius: 18px;
    background: linear-gradient(180deg, rgba(10,26,46,0.42), rgba(5,16,33,0.2));
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .footer__col { min-width: 0; padding: 1.4rem 0; }
  .footer__col + .footer__col::before {
    top: 0; bottom: auto; left: 14%; right: 14%; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220,227,234,0.22), transparent);
  }
  .footer__about { font-size: 1rem; max-width: 30rem; }
  .footer__social { margin: 2.2rem 0 2.6rem; }
  .footer__base { justify-content: center; text-align: center; }
}

/* Marcellus has a single weight — keep display type at 400 so the
   browser never synthesizes a fake bold */
.preloader__logo, .hero__logo,
.experience__brand, .masterclass__pre, .masterclass__title,
.masterclass__sub, .aprender__content h2, .asesoria__head h2,
.footer__logo { font-weight: 400; }

/* ===================================================
   CONTACT MODAL
   =================================================== */
button.btn-gold, button.btn-outline { border: none; cursor: pointer; }
button.btn-outline { border: 1px solid var(--cream); }

.modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  visibility: hidden; opacity: 0;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.modal.open { visibility: visible; opacity: 1; }
.modal__overlay {
  position: absolute; inset: 0;
  background: rgba(2,8,18,0.74);
  backdrop-filter: blur(6px);
}
.modal__dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px;
  max-height: calc(100svh - 2.4rem); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 80% at 50% 0%, #0c2742 0%, transparent 60%),
    linear-gradient(180deg, #08182b 0%, #051426 100%);
  border: 1px solid rgba(220,227,234,0.16);
  border-radius: 18px;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.5s var(--ease);
}
.modal.open .modal__dialog { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute; top: 0.9rem; right: 1.1rem;
  width: 38px; height: 38px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.05); border-radius: 50%;
  color: var(--ink); font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center;
  transition: background 0.3s, transform 0.3s var(--ease);
}
.modal__close:hover { background: rgba(255,255,255,0.14); transform: rotate(90deg); }

.modal__eyebrow {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem;
  letter-spacing: 0.4em; text-indent: 0.4em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 0.7rem;
}
.modal__title {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--cream); line-height: 1.05;
}
.modal__sub { color: var(--ink-dim); font-size: 1.02rem; margin-top: 0.6rem; }

.modal__form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem;
  margin-top: 1.8rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242,239,233,0.7);
}
.field label span { color: var(--ink-dim); letter-spacing: 0.06em; }
.field input, .field select, .field textarea {
  width: 100%; font-family: 'Cormorant Garamond', serif; font-size: 1.08rem;
  color: var(--cream);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(220,227,234,0.18);
  border-radius: 10px; padding: 0.7rem 0.9rem;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.field textarea { resize: vertical; min-height: 70px; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aeb8c2' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem;
}
.field option { background: #08182b; color: var(--cream); }
.field input::placeholder, .field textarea::placeholder { color: rgba(155,170,185,0.55); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-soft);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(174,184,194,0.12);
}
.field input:user-invalid, .field input.invalid {
  border-color: #d9756b; box-shadow: 0 0 0 3px rgba(217,117,107,0.14);
}
.modal__actions { align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.modal__submit { width: 100%; }
.modal__note { font-size: 0.92rem; color: var(--ink-dim); text-align: center; }
.modal__error {
  font-size: 0.92rem; text-align: center; color: #b23b3b;
  background: rgba(200,86,88,0.1); border: 1px solid rgba(200,86,88,0.34);
  border-radius: 10px; padding: 0.55rem 0.8rem; margin: 0.2rem 0 0; width: 100%;
}

.modal__done { text-align: center; padding: 1.5rem 0.5rem 0.5rem; }
.modal__check {
  width: 64px; height: 64px; margin: 0 auto 1.2rem;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 1.8rem; color: #0a1a12;
  background: linear-gradient(135deg, #eef2f6, #b6c0c9);
  box-shadow: 0 10px 30px rgba(220,227,234,0.25);
  animation: checkPop 0.6s var(--ease);
}
@keyframes checkPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.modal__done h3 { font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 400; font-size: 1.8rem; color: var(--cream); }
.modal__done p { color: var(--ink-dim); margin: 0.8rem 0 1.8rem; }

body.modal-open { overflow: hidden; }

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

/* ===================================================
   RESERVATIONS
   =================================================== */
.reserva {
  position: relative; isolation: isolate;
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(28,58,92,0.4), transparent 55%),
    radial-gradient(90% 80% at -5% 110%, rgba(70,46,108,0.32), transparent 60%),
    linear-gradient(180deg, #04111f 0%, #020a16 100%);
  overflow: hidden;
}
/* faint star dust + top hairline, in keeping with the cosmic universe */
.reserva__veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 78% 16%, rgba(207,226,255,0.6), transparent),
    radial-gradient(1.1px 1.1px at 64% 64%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.3px 1.3px at 33% 82%, rgba(255,233,196,0.5), transparent),
    radial-gradient(1px 1px at 90% 76%, rgba(255,255,255,0.45), transparent);
}
.reserva__veil::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,227,234,0.5), transparent);
}

/* ---- centered heading ---- */
.reserva__head { max-width: 760px; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); text-align: center; }
.reserva__eyebrow {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1rem;
}
.reserva__title {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.04; color: var(--cream);
}
.reserva__title em { font-style: italic; color: var(--gold-soft); }
.reserva .masterclass__sub { justify-content: center; margin: 1rem 0 0; }
.reserva__lead {
  font-size: 1.12rem; color: rgba(239,232,216,0.86);
  max-width: 40rem; margin: 1.6rem auto 0;
}

.reserva__inner {
  position: relative; z-index: 1;
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr;
  /* start, not stretch: each glass panel sizes to its own content. Stretch made
     both match the tallest column — so the fixed-aspect floor plan floated in a
     tall empty card, and the short "thank you" left a big empty card after
     submit. Top-aligned, the plan fills its card and the panels just sit side by
     side at their natural heights. */
  gap: clamp(2rem, 5vw, 3.6rem); align-items: start;
}

/* ===================================================
   FLOOR PLAN — interactive seating map
   =================================================== */
.reserva__map { position: relative; display: flex; }
.floorplan {
  margin: 0; position: relative; overflow: hidden;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  border: 1px solid rgba(220,227,234,0.14); border-radius: 20px;
  padding: clamp(0.5rem, 1.2vw, 1rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(20,44,72,0.55), transparent 60%),
    linear-gradient(180deg, rgba(9,24,42,0.66), rgba(4,14,28,0.55));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 40px 90px rgba(0,0,0,0.5);
}
/* faint sheen across the top edge */
.floorplan::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(220,227,234,0.6), transparent);
}
/* iridescent edge — the Liquid Glass signature, on-brand + subtle */
.floorplan::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2;
  background: var(--iris); background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.55;
  animation: irisShift 12s ease-in-out infinite alternate;
}
.floorplan__svg { display: block; width: 100%; height: auto; max-height: 88vh; position: relative; z-index: 1; }
.fp-glow {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: fpLagoonPulse 5.5s ease-in-out infinite alternate;
}

/* base linework */
.fp-floor { fill: url(#fpFloor); stroke: none; }
.fp-floor-texture {
  fill: url(#fpFloorGrain); opacity: 0.85; mix-blend-mode: screen; pointer-events: none;
}
.fp-wall {
  fill: none; stroke: #aeb8c2; stroke-width: 6;
  stroke-linejoin: round; stroke-linecap: round; opacity: 0.85;
}
.fp-wall--in { stroke-width: 3; opacity: 0.5; }
.fp-board { fill: rgba(16,26,42,0.92); stroke: rgba(186,200,220,0.75); stroke-width: 1.4; }
.fp-board-screen { fill: rgba(70,130,160,0.4); stroke: none; }
.fp-board-t {
  fill: rgba(222,236,246,0.9); font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 10px;
  letter-spacing: 0.12em; text-anchor: middle;
}

/* main entrance door — opening in the wall + swinging leaf */
.fp-door-gap { stroke: #07182b; stroke-width: 8; stroke-linecap: butt; }
.fp-door-leaf { fill: none; stroke: var(--gold-soft); stroke-width: 3; stroke-linecap: round; }
.fp-door-swing { fill: none; stroke: rgba(220,227,234,0.45); stroke-width: 1.4; stroke-dasharray: 4 5; }
.fp-door-t {
  fill: rgba(242,239,233,0.62); font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 10px;
  letter-spacing: 0.2em; text-anchor: middle; text-transform: uppercase;
}

.fp-furn { pointer-events: none; }
.fp-booth { fill: rgba(150,170,200,0.22); stroke: rgba(220,227,234,0.4); stroke-width: 1.2; }
.fp-table { fill: var(--seat-fill, rgba(166,184,206,0.95)); stroke: var(--seat-stroke, rgba(232,239,246,0.85)); stroke-width: 1.4; }
.fp-table--rect { fill: var(--seat-fill, rgba(166,184,206,0.95)); }
.fp-chair, .fp-stool { fill: var(--chair-fill, rgba(120,140,168,0.9)); stroke: var(--seat-stroke, rgba(225,233,242,0.6)); stroke-width: 1; }
/* depth + polish: soft contact shadow under a table, glossy tabletop highlight */
.fp-shadow { fill: rgba(0,0,0,0.55); pointer-events: none; }
.fp-table-sheen { fill: url(#fpSheen); pointer-events: none; }
.fp-bar { fill: rgba(214,150,90,0.42); stroke: var(--seat-stroke, rgba(232,170,110,0.85)); stroke-width: 1.4; }
.fp-backbar { fill: rgba(214,150,90,0.3); stroke: rgba(232,170,110,0.6); stroke-width: 1; }
.fp-plant { fill: #6fae5f; stroke: rgba(180,230,160,0.5); stroke-width: 1; }
.fp-planter-out { fill: url(#fpPlantOuter); stroke: rgba(150,200,130,0.45); stroke-width: 1.2; opacity: 0.85; }
.fp-planter { fill: url(#fpPlant); stroke: rgba(140,240,224,0.5); stroke-width: 1.4; opacity: 0.92; }
.fp-planter-ring { fill: none; stroke: #0a0f12; stroke-width: 3; opacity: 0.7; }
.fp-planter-in { fill: rgba(6,24,30,0.55); stroke: rgba(140,240,224,0.4); stroke-width: 1; }
.fp-plant-dot { fill: rgba(220,230,234,0.7); }

/* zone captions — non-interactive guides */
.fp-areas { pointer-events: none; }
.fp-area-t {
  fill: rgba(242,239,233,0.55); font-family: 'ABC Arizona Flare', 'Marcellus', serif;
  font-size: 13px; letter-spacing: 0.22em; text-anchor: middle; text-transform: uppercase;
}

/* selectable seats — tap a table to choose it */
.fp-seat { cursor: pointer; transition: filter 0.3s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fp-seat-hit { fill: transparent; pointer-events: all; }
.fp-seat-no {
  fill: #0d1b2e; font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 10.5px; font-weight: 600;
  text-anchor: middle; pointer-events: none; transition: fill 0.3s;
}
.fp-seat :where(.fp-table, .fp-chair, .fp-stool, .fp-bar, .fp-planter-out) {
  transition: fill 0.3s var(--ease), stroke 0.3s var(--ease);
}
.fp-seat:hover {
  --seat-fill: rgba(214,226,240,0.98); --seat-stroke: var(--gold-soft);
  --chair-fill: rgba(176,192,214,0.96);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
}
.fp-seat:hover .fp-seat-no { fill: #0a1830; }
.fp-seat:hover .fp-planter-out,
.fp-seat.is-sel .fp-planter-out { stroke: var(--gold-soft); stroke-width: 2.4; }
.fp-seat:focus-visible { outline: none; }
.fp-seat:focus-visible {
  --seat-fill: rgba(206,219,235,0.96); --seat-stroke: var(--gold-soft);
}
.fp-seat.is-sel {
  --seat-fill: #eef4fa; --seat-stroke: var(--gold-soft);
  --chair-fill: #cdd9e8;
  filter: drop-shadow(0 0 11px rgba(220,227,234,0.85));
}
.fp-seat.is-sel .fp-seat-no { fill: #06182c; font-weight: 700; }

/* reserved — already booked for the chosen night; not selectable */
.fp-seat.is-reserved {
  cursor: not-allowed;
  --seat-fill: rgba(198,90,92,0.92); --seat-stroke: rgba(232,120,122,0.95);
  --chair-fill: rgba(170,78,80,0.82);
  filter: none; opacity: 0.72;
}
.fp-seat.is-reserved .fp-seat-hit { pointer-events: none; }
.fp-seat.is-reserved .fp-seat-no { fill: rgba(255,224,224,0.92); }

/* polished floor-plan skin: keeps the same plan, upgrades material + motion */
.fp-wall {
  stroke: #b8c4d0;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.42));
}
.fp-board {
  fill: rgba(15,29,47,0.96);
  stroke: rgba(199,214,230,0.8);
  filter: drop-shadow(0 4px 7px rgba(0,0,0,0.35));
}
.fp-board-screen { fill: rgba(72,143,174,0.46); }
.fp-booth {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.28));
}
.fp-table {
  fill: var(--seat-fill, url(#fpTableTop));
  stroke: var(--seat-stroke, rgba(236,244,250,0.9));
  stroke-width: var(--seat-stroke-w, 1.25);
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.12));
}
.fp-table--rect { fill: var(--seat-fill, url(#fpTableTop)); }
.fp-chair, .fp-stool {
  fill: var(--chair-fill, url(#fpChairTop));
  stroke: var(--seat-stroke, rgba(228,237,246,0.66));
}
.fp-shadow {
  fill: rgba(0,0,0,0.48);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.fp-table-sheen {
  opacity: 0.82;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.fp-bar {
  fill: rgba(214,150,90,0.44);
  stroke: var(--seat-stroke, rgba(242,180,118,0.9));
  filter: drop-shadow(0 5px 9px rgba(0,0,0,0.32));
}
.fp-backbar { fill: rgba(214,150,90,0.32); stroke: rgba(232,170,110,0.64); }
.fp-plant {
  fill: #74b964;
  stroke: rgba(188,238,168,0.6);
  filter: drop-shadow(0 1px 4px rgba(126,220,110,0.35));
}
.fp-planter-out { stroke: rgba(170,226,138,0.52); opacity: 0.88; }
.fp-planter { stroke: rgba(140,240,224,0.56); opacity: 0.94; }
.fp-seat {
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}
.fp-seat-no {
  fill: #071629;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 0.4;
  transition: fill 0.3s, transform 0.28s var(--ease);
}
.fp-seat :where(.fp-table, .fp-table-sheen, .fp-chair, .fp-stool, .fp-bar, .fp-planter-out, .fp-seat-no) {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 0.28s var(--ease),
    stroke 0.28s var(--ease),
    stroke-width 0.28s var(--ease),
    transform 0.28s var(--ease),
    opacity 0.28s var(--ease);
}
.fp-seat:hover {
  --seat-fill: url(#fpTableHover);
  --seat-stroke: var(--gold-soft);
  --seat-stroke-w: 1.8;
  --chair-fill: url(#fpChairTop);
  filter: drop-shadow(0 5px 12px rgba(0,0,0,0.5)) drop-shadow(0 0 12px rgba(220,227,234,0.18));
}
.fp-seat:hover :where(.fp-table, .fp-table-sheen, .fp-seat-no) { transform: translateY(-1.8px); }
.fp-seat:hover :where(.fp-chair, .fp-stool) { transform: translateY(-1.2px); }
.fp-seat:hover .fp-shadow { opacity: 0.32; transform: scale(1.08); }
.fp-seat:hover .fp-table-sheen { opacity: 1; }
.fp-seat:hover .fp-seat-no { fill: #071629; }
.fp-seat:focus-visible {
  --seat-fill: url(#fpTableHover);
  --seat-stroke: var(--gold-soft);
  --seat-stroke-w: 1.8;
}
.fp-seat.is-sel {
  --seat-fill: url(#fpTableSelected);
  --seat-stroke: #f2f6fa;
  --seat-stroke-w: 2;
  --chair-fill: #dfe7f0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)) drop-shadow(0 0 13px rgba(220,227,234,0.8));
  animation: fpSeatPulse 1.9s ease-in-out infinite alternate;
}
.fp-seat.is-sel .fp-seat-no {
  fill: #06182c;
  stroke: rgba(255,255,255,0.32);
}
.fp-seat.is-reserved {
  --seat-fill: rgba(142,62,70,0.88);
  --seat-stroke: rgba(232,120,122,0.78);
  --chair-fill: rgba(118,65,74,0.86);
  filter: grayscale(0.22);
  opacity: 0.66;
  animation: none;
}
.fp-seat.is-reserved .fp-table-sheen { opacity: 0.32; }

@keyframes fpSeatPulse {
  from { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)) drop-shadow(0 0 9px rgba(220,227,234,0.55)); }
  to { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)) drop-shadow(0 0 18px rgba(220,227,234,0.9)); }
}
@keyframes fpLagoonPulse {
  from { opacity: 0.65; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .fp-glow,
  .fp-seat.is-sel {
    animation: none;
  }
  .fp-seat:hover :where(.fp-table, .fp-table-sheen, .fp-seat-no, .fp-chair, .fp-stool) {
    transform: none;
  }
}

/* plan legend */
.fp-legend { display: flex; gap: 1.5rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.fp-legend__i { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: rgba(239,232,216,0.78); }
.fp-key { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.fp-key--free { background: rgba(220,227,234,0.16); border: 1px solid rgba(220,227,234,0.55); }
.fp-key--res { background: rgba(200,86,88,0.4); border: 1px solid rgba(226,105,107,0.8); }
.fp-key--sel { background: var(--gold-soft); box-shadow: 0 0 7px rgba(220,227,234,0.7); }

.floorplan__cap {
  display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.9rem;
  text-align: center; font-size: 0.92rem; color: var(--ink-dim); line-height: 1.5;
}
.floorplan__hint {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-soft);
}
.floorplan__cap a { color: var(--gold-soft); border-bottom: 1px solid rgba(220,227,234,0.4); }
.floorplan__cap a:hover { border-bottom-color: var(--gold-soft); }

/* ---- "pick a date first" veil — availability is only real once a night is chosen ---- */
.floorplan__stage { position: relative; }
.floorplan__gate {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(3,10,20,0.55);
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  border-radius: 12px;
}
.floorplan__gate[hidden] { display: none; }
.floorplan__gate p {
  margin: 0 1rem; text-align: center;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 2; color: var(--cream);
  padding: 0.95rem 1.4rem; border: 1px solid rgba(220,227,234,0.35); border-radius: 12px;
  background: rgba(9,24,42,0.78); box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}

/* ---- the glass form card (extends .mc-card) ---- */
.reserva__card { padding: clamp(1.8rem, 4vw, 2.8rem); }
.reserva__form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem;
  color-scheme: dark; /* native date/time pickers + dropdowns render dark */
}
.reserva__form-title {
  grid-column: 1 / -1;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold-soft); opacity: 0.85;
  margin-bottom: 0.2rem;
}
/* style the native date calendar indicator for the dark panel */
.reserva__form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) brightness(1.1); cursor: pointer; opacity: 0.75;
}
.reserva__form input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; }

/* inline validation messages */
.field__err {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem; letter-spacing: 0.06em;
  color: #e89089; max-height: 0; opacity: 0; overflow: hidden;
  transition: opacity 0.3s var(--ease), max-height 0.3s var(--ease);
}
.field__err.show { opacity: 1; max-height: 2rem; margin-top: 0.1rem; }
.field select.invalid, .field textarea.invalid {
  border-color: #d9756b; box-shadow: 0 0 0 3px rgba(217,117,107,0.14);
}

/* ---- seating preference chips ---- */
.seat-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.seat { position: relative; display: block; }
.seat input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.seat__chip {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.85rem 0.4rem; text-align: center;
  border: 1px solid rgba(220,227,234,0.18); border-radius: 12px;
  background: rgba(255,255,255,0.04);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.seat__chip svg { width: 22px; height: 22px; color: var(--gold); transition: color 0.3s; }
.seat__chip span {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(242,239,233,0.78); transition: color 0.3s;
}
.seat:hover .seat__chip { border-color: rgba(220,227,234,0.4); background: rgba(255,255,255,0.07); }
.seat input:checked + .seat__chip {
  border-color: var(--gold-soft); background: rgba(174,184,194,0.16);
  box-shadow: 0 0 0 3px rgba(174,184,194,0.12); transform: translateY(-2px);
}
.seat input:checked + .seat__chip svg,
.seat input:checked + .seat__chip span { color: var(--cream); }
.seat input:focus-visible + .seat__chip { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.seat-pick { font-size: 0.96rem; color: var(--ink-dim); margin-top: 0.5rem; }
.seat-pick strong { color: var(--gold-soft); font-style: italic; font-weight: 600; }
.seat-pick--hint { font-size: 0.8rem; opacity: 0.7; margin-top: 0.15rem; }
.seat-opts.invalid .seat__chip { border-color: rgba(217,117,107,0.7); }

/* live per-area availability inside the chips ("9 free") */
.seat__count {
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-soft); opacity: 0.85;
}

/* ---- numbered step labels through the form ---- */
.reserva__step {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 0.55rem; margin-top: 0.4rem;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.72rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-soft); opacity: 0.9;
}
.reserva__step span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(220,227,234,0.45); background: rgba(174,184,194,0.12);
  font-size: 0.68rem; letter-spacing: 0; color: var(--cream);
}
.reserva__step::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(220,227,234,0.28), transparent);
}

/* ---- upcoming event nights as one-tap chips under the Events picker ---- */
.rv-evchips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; }
.rv-evchips[hidden] { display: none; }
.rv-evchip {
  border: 1px solid rgba(220,227,234,0.22); border-radius: 999px;
  background: rgba(255,255,255,0.05); color: rgba(242,239,233,0.85);
  padding: 0.32rem 0.8rem; font-size: 0.8rem; cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.rv-evchip span { color: var(--gold-soft); font-style: italic; margin-right: 0.4rem; }
.rv-evchip:hover { border-color: rgba(220,227,234,0.5); background: rgba(255,255,255,0.09); }
.rv-evchip.is-on { border-color: var(--gold-soft); background: rgba(174,184,194,0.18); color: var(--cream); }

/* ---- live one-line recap above the submit button ---- */
.rv-summary {
  width: 100%; text-align: center; font-size: 0.92rem; color: var(--gold-soft);
  border: 1px dashed rgba(220,227,234,0.3); border-radius: 10px; padding: 0.5rem 0.8rem;
}
.rv-summary[hidden] { display: none; }

.reserva__actions { align-items: center; gap: 0.7rem; margin-top: 0.6rem; }
.reserva__submit { width: 100%; }
.reserva__note { font-size: 0.92rem; color: var(--ink-dim); text-align: center; }
.reserva__err {
  font-size: 0.92rem; text-align: center; color: #ffc9c9;
  background: rgba(200,86,88,0.16); border: 1px solid rgba(226,105,107,0.5);
  border-radius: 10px; padding: 0.6rem 0.8rem; margin: 0.2rem 0 0;
}
/* date locked to a chosen event */
#rvDate.is-locked { opacity: 0.7; cursor: not-allowed; }
/* event-night notice under the Occasion picker */
.reserva__notice {
  display: block; margin-top: 0.5rem; font-size: 0.86rem; line-height: 1.45;
  color: var(--gold-soft, #dce3ea);
  background: rgba(174,184,194,0.08); border: 1px solid rgba(174,184,194,0.28);
  border-radius: 8px; padding: 0.5rem 0.7rem;
}
/* the class above sets display:block, which beat the [hidden] attribute and
   left an empty bordered box (a gap) under Occasion — restore hiding */
.reserva__notice[hidden] { display: none; }

/* ---- confirmation state ---- */
.reserva__done { text-align: center; padding: clamp(1.4rem, 4vw, 2.6rem) 0.4rem; }
.reserva__check {
  width: 66px; height: 66px; margin: 0 auto 1.3rem;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 1.9rem; color: #0a1a12;
  background: linear-gradient(135deg, #eef2f6, #b6c0c9);
  box-shadow: 0 10px 30px rgba(220,227,234,0.25);
  animation: checkPop 0.6s var(--ease);
}
.reserva__done h3 { font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.2rem); color: var(--cream); }
.reserva__done-msg { color: rgba(239,232,216,0.9); font-size: 1.12rem; margin: 0.9rem auto 0; max-width: 30rem; }
.reserva__recap {
  color: var(--ink-dim); font-style: italic; margin: 1rem auto 0; max-width: 30rem;
}
.reserva__seeyou { margin: 1.4rem 0 1.8rem; }
.reserva__done .btn-outline { display: inline-block; }
.reserva__done-cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.reserva__call { margin-top: 1.2rem; font-size: 0.95rem; color: var(--ink-dim); }
.reserva__call a { color: var(--gold-soft); border-bottom: 1px solid rgba(220,227,234,0.35); }
.reserva__call a:hover { border-bottom-color: var(--gold-soft); }

@media (max-width: 900px) {
  .reserva__inner { grid-template-columns: 1fr; gap: 2.4rem; }
  .reserva__map { max-width: 660px; margin: 0 auto; width: 100%; }
  .floorplan__svg { max-height: none; }
}
@media (max-width: 560px) {
  .reserva__form { grid-template-columns: 1fr; }
  .seat-opts { grid-template-columns: repeat(3, 1fr); }
  /* keep the 3 seating chips ("Outdoor" is the widest) on one line each */
  .seat__chip { padding: 0.7rem 0.25rem; }
  .seat__chip span { letter-spacing: 0.06em; font-size: 0.64rem; }

  /* The plan is detailed and gets tiny in a phone-width column, so pull it
     out toward the screen edges (cancel most of the section side padding)
     and slim the frame — this buys the SVG as much width as possible. */
  .reserva__map {
    max-width: none; width: auto;
    margin-inline: calc(-1 * (clamp(1.2rem, 5vw, 4rem) - 8px));
  }
  .floorplan {
    padding: 0.5rem 0.4rem 0.7rem;
    border-radius: 16px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 16px 38px rgba(0,0,0,0.45);
  }

  /* legibility at small scale: larger numbers + zone labels, brighter
     tabletops and a slightly crisper outer wall so the room still reads.
     (--seat-fill is set on .fp-seat so hover/selected/reserved still win.) */
  .fp-seat { --seat-fill: rgba(180,198,222,0.98); }
  .fp-seat-no { font-size: 15px; font-weight: 700; }
  .fp-area-t { font-size: 17px; letter-spacing: 0.18em; fill: rgba(242,239,233,0.6); }
  .fp-wall:not(.fp-wall--in) { stroke-width: 7; }

  /* compact, centered legend that won't sprawl across two ragged lines */
  .floorplan__cap { gap: 0.6rem; margin-top: 0.75rem; font-size: 0.84rem; }
  .floorplan__hint { font-size: 0.66rem; }
  .fp-legend { gap: 0.5rem 0.7rem; }
  .fp-legend__i {
    font-size: 0.76rem; gap: 0.4rem;
    padding: 0.28rem 0.6rem; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(220,227,234,0.12);
  }
}

/* ---------- Reveal base ---------- */
.reveal { opacity: 0; transform: translateY(40px); }

/* ===================================================
   RESPONSIVE
   =================================================== */

/* ---- large tablet / small laptop ---- */
@media (max-width: 1100px) {
  .experience { min-height: 440px; }
  .experience__panel { padding: 4rem 2.4rem; }
}

/* ---- tablet ---- */
@media (max-width: 980px) {
  .galeria__grid { grid-template-columns: repeat(3, 1fr); }
  .mc-layout { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 2.8rem); }
  .mc-intro { text-align: center; max-width: 560px; margin: 0 auto; }
  .mc-intro .mc-emblem { margin-left: auto; margin-right: auto; }
  .mc-intro .masterclass__sub { justify-content: center; }
  .mc-intro .masterclass__copy { margin-left: auto; margin-right: auto; }
  .mc-menu { max-width: 600px; margin: 0 auto; width: 100%; }
}

/* ---- mobile: hero hidden, universe is the opening screen ---- */
@media (max-width: 760px) {
  .hero { display: none; }
  .universo {
    min-height: 100svh;
    padding: 16vh 1.2rem 8rem;
    display: flex; flex-direction: column; justify-content: center;
    /* the page opens here at night, not dusk — deeper sky than the desktop
       version, which follows a golden-hour hero and can afford to be bluer */
    background:
      radial-gradient(90% 60% at 50% 0%, #0a2138 0%, transparent 60%),
      linear-gradient(180deg, #020a16 0%, #081b2f 38%, #04111f 80%, #020813 100%);
  }
  /* deep space is already half-present on the opening screen (the scroll
     scrub still takes it the rest of the way to 1) */
  .universo__deepspace { opacity: 0.45; }
  /* moonlit clouds — dimmer than the desktop dusk versions */
  .wcloud--2 { opacity: 0.6; }
  .wcloud--over { opacity: 0.65; }
  .universo__content { width: 100%; }

  /* The welcome is hand-broken into lines for the 640px desktop column; on a
     phone those wrap awkwardly. Let each stanza flow as its own short centered
     block instead — two verses + the "Welcome to Utopia!" signature — rather
     than merging everything into one dense paragraph. (Spans stay inline, so
     the GSAP reveal becomes a soft fade-in stagger here rather than the
     per-line mask rise.) */
  .universo__text {
    margin-top: 1.4rem; max-width: 30rem;
    font-size: clamp(1.04rem, 3.5vw, 1.16rem);
    line-height: 1.7; letter-spacing: 0.01em;
    text-wrap: pretty;
    text-wrap: balance; /* evens out the centered rag where supported */
  }
  .universo__text .tline,
  .universo__text .tline > span { display: inline; overflow: visible; }
  .universo__text .tline--gap { display: block; margin-top: 1.15em; }
  .universo__text .tline--gap:last-child { margin-top: 1.25em; position: relative; }

  /* "written by the night": the intro splits the welcome into word spans so
     each word can rise on its own (inline text can't take transforms) */
  .universo__text .uword { display: inline-block; }

  /* the script signature — Great Vibes, revealed by a travelling mask like
     ink being written; --wr is the writing edge (0% hidden → 115% written) */
  .universo__text .usig {
    display: inline-block;
    font-family: 'Great Vibes', cursive;
    font-style: normal;
    font-size: clamp(2.1rem, 9vw, 2.7rem);
    line-height: 1.25;
    padding: 0.05em 0.4em 0.12em; /* breathing room so the mask never clips flourishes */
    color: var(--gold-soft);
    --wr: 115%;
    -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--wr) - 14%), transparent var(--wr));
            mask-image: linear-gradient(100deg, #000 calc(var(--wr) - 14%), transparent var(--wr));
  }
  .usig.is-glow { animation: sigGlow 1.8s ease-out both; }
  /* the spark riding the pen line (kept outside the mask so it never vanishes) */
  .usig-spark {
    position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px;
    border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(circle, rgba(255,248,220,0.95), rgba(244,220,150,0.35) 60%, transparent 72%);
    box-shadow: 0 0 14px 5px rgba(244,220,150,0.35);
  }

  /* show the Book-a-table CTA here on mobile (hero is hidden) */
  .universo__cta { display: block; }

  /* tighten the celestial layout so nothing crowds the text */
  .ribbon { top: 6%; }
  .wcloud--over { margin-left: -38vw; }

  /* keep the wordmark + logo within the screen (no edge overflow) */
  .scene__wordmark { left: 0; right: 0; }
  .scene__logo-img { width: min(100%, 400px); }

  .experience { grid-template-columns: 1fr; }
  .experience__img { height: 300px; }
  .experience__panel { padding: 3.6rem 1.6rem; }

  .galeria__grid { grid-template-columns: repeat(2, 1fr); }

  .aprender {
    background-image:
      linear-gradient(rgba(3,12,26,0.55), rgba(3,12,26,0.72)),
      url('../foto/utopia1.webp');
    background-attachment: scroll; min-height: 64vh; padding: 5.5rem 1.4rem;
  }
  .footer__base { justify-content: center; text-align: center; flex-direction: column; gap: 0.5rem; }
}

/* ---- small phone ---- */
@media (max-width: 520px) {
  h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .universo__text { font-size: 1.04rem; }
  .universo__sub { margin-top: 2.2rem; }

  /* tighten the wide letter-spacing on the address line under each logo so it
     never spills past the screen edge on narrow phones */
  .scene__sub { letter-spacing: 0.3em; text-indent: 0.3em; }
  .hero__sub { letter-spacing: 0.38em; text-indent: 0.38em; }

  .experience__panel { padding: 3rem 1.3rem; }
  .experience__brand { letter-spacing: 0.22em; text-indent: 0.22em; }
  .experience__script--lg { font-size: 2.4rem; }

  .masterclass__sub { letter-spacing: 0.34em; text-indent: 0.34em; gap: 1rem; }

  /* full-width, comfortable tap targets */
  .btn-gold, .btn-outline { display: block; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; padding-top: 1rem; padding-bottom: 1rem; }

  .footer__social a { width: 46px; height: 46px; }
}

/* ---- very small phone ---- */
@media (max-width: 380px) {
  .universo { padding-left: 1rem; padding-right: 1rem; }
  .masterclass__title { letter-spacing: 0.12em; text-indent: 0.12em; }
}

/* ---- touch devices: drop hover-only motion that can feel sticky ---- */
@media (hover: none) {
  .g-item:hover img { transform: none; }
  /* no hover to pour the drinks — show the glasses full */
  .mc-liquid { transform: translateY(0); }
  /* background-attachment: fixed is broken/janky on iOS + iPadOS (incl. tablets
     wider than the 760px breakpoint) — fall back to a normal scrolling bg. */
  .aprender { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===================================================
   HOMEPAGE UPGRADES
   what's-on strip · day-night veil · cursor orb
   =================================================== */

/* ---------- What's on — upcoming nights ---------- */
.whatson {
  padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.2rem, 5vw, 4rem);
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(70,46,108,0.24), transparent 60%),
    linear-gradient(180deg, #031021 0%, #04111f 100%);
}
.whatson__inner { max-width: 1120px; margin: 0 auto; }
.whatson__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.whatson__eyebrow {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.7rem; letter-spacing: 0.46em; text-indent: 0.46em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 0.9rem;
}
.whatson__title {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: 0.06em; line-height: 1.1;
}
.whatson__title em { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--gold-soft); }
.whatson__all {
  flex: none; padding-bottom: 0.3rem;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-soft); border-bottom: 1px solid rgba(220,227,234,0.35);
  transition: color 0.3s, border-color 0.3s;
}
.whatson__all:hover { color: #fff; border-color: #fff; }
.whatson__rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); }
.ws-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid rgba(220,227,234,0.12); border-radius: 20px;
  background: linear-gradient(180deg, rgba(10,26,46,0.55), rgba(5,16,33,0.3));
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
  transition: border-color 0.5s var(--ease), transform 0.6s var(--ease);
}
.ws-card:hover { border-color: rgba(220,227,234,0.28); transform: translateY(-5px); }
.ws-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
.ws-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.95) brightness(0.88);
  transition: transform 1s var(--ease);
}
.ws-card:hover .ws-card__media img { transform: scale(1.05); }
.ws-card__media.ws-media--ph {
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(120,160,220,0.25), transparent 60%),
    linear-gradient(160deg, #0a1e36, #050f1e);
}
.ws-card__date {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; min-width: 52px;
  padding: 0.5rem 0.6rem 0.45rem; border-radius: 12px;
  background: rgba(4,14,28,0.72); border: 1px solid rgba(220,227,234,0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ws-card__day { font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 1.35rem; line-height: 1; color: #fff; }
.ws-card__mon {
  margin-top: 0.25rem; font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.56rem;
  letter-spacing: 0.26em; text-indent: 0.26em; color: var(--gold-soft);
}
.ws-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.4rem 1.5rem; }
.ws-card__dow {
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim);
}
.ws-card__title {
  margin-top: 0.45rem; font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 400;
  font-size: 1.35rem; letter-spacing: 0.04em;
}
.ws-card__desc {
  margin-top: 0.55rem; color: var(--ink-dim); font-size: 1rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-card__cta {
  margin-top: auto; align-self: flex-start; padding: 1.1rem 0 0.3rem;
  background: none; border: none; border-bottom: 1px solid rgba(220,227,234,0.35);
  cursor: pointer;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-soft);
  transition: color 0.3s, border-color 0.3s;
}
.ws-card__cta:hover { color: #fff; border-color: #fff; }

/* ---------- Day-to-night veil — tint driven by scroll (see script.js) ---------- */
.skyshift {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none; mix-blend-mode: soft-light;
}

/* ---------- Glow cursor orb (fine pointers only, built by script.js) ---------- */
.cursor-orb {
  position: fixed; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
  z-index: 620; pointer-events: none; opacity: 0;
  background: radial-gradient(circle,
    rgba(220,227,234,0.55) 0%, rgba(150,180,225,0.25) 45%, rgba(220,227,234,0) 70%);
  mix-blend-mode: screen;
}
/* magnetic buttons: GSAP owns transform, so hand the transition the rest */
.is-magnet { transition-property: box-shadow, background, color, border-color; will-change: transform; }

/* ---------- responsive / touch for the new pieces ---------- */
@media (max-width: 860px) {
  .whatson__rail { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .whatson__head { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
}
@media (hover: none) {
  .cursor-orb { display: none; }
}