/* Story-led Premium ("VIP") invitation. Two treatments of the same markup:
 *   html.vip-cinematic  fixed atmosphere (pre-softened story photos, veil, drifting light) behind glass content;
 *   html.vip-card       the same story on calm paper, with the song in an elegant card.
 * Layer order (back to front): .vip-stage (z 0) → .vip-page content (z 1) → .vip-bar (z 40) → .vip-opening (z 60).
 * Nothing is ever drawn in front of the YouTube player: its glow (.vip-player-halo) and aura sit BEHIND the frame, the
 * frame's ring is an outline outside its box, and vip-invitation.js tucks the fixed bar away while the player is under
 * it. Only this file styles the VIP layout; invitation.css (Essential/Plus/standard Premium) is untouched. */

@font-face { font-family: "VF Script"; src: url("vip-script.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "VF Serif"; src: url("vip-serif.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "VF Serif"; src: url("vip-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

/* ------------------------------------------------------------------ tokens ------------------------------------------------------------------ */
html.vip {
  --vip-script: "VF Script", "Great Vibes", "Savoye LET", "Snell Roundhand", "Apple Chancery", Gabriola, "Segoe Script", cursive;
  --vip-serif: "VF Serif", "Cormorant Garamond", "Cormorant", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --vip-sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 26px;
}

/* Cinematic: deep, low-light palettes where the atmosphere carries the colour. */
html.vip-cinematic {
  --bg: #170b12; --bg-rgb: 23 11 18; --bg-2: #2b1222;
  --ink: #fff4f6; --ink-soft: rgb(255 234 241 / .82); --ink-faint: rgb(255 234 241 / .66);
  --accent: #ecc796; --accent-2: #f4b0c4; --accent-3: #d9a36f; --accent-ink: #2a1220;
  --glow-rgb: 244 176 196; --spark-rgb: 255 226 190;
  --glass: rgb(38 14 28 / .52); --glass-strong: rgb(30 10 22 / .72); --glass-line: rgb(255 214 228 / .18);
  --field-bg: rgb(255 255 255 / .07); --field-line: rgb(255 214 228 / .3);
  --stage-opacity: .5; --focus: #ffd9a8;
}
html.vip-cinematic[data-theme="noche-azul"] {
  --bg: #070b1c; --bg-rgb: 7 11 28; --bg-2: #111a3c;
  --ink: #f4f6ff; --ink-soft: rgb(228 234 255 / .82); --ink-faint: rgb(228 234 255 / .66);
  --accent: #e2c893; --accent-2: #a9bcff; --accent-3: #c9a86a; --accent-ink: #0b1030;
  --glow-rgb: 150 172 255; --spark-rgb: 222 230 255;
  --glass: rgb(14 20 50 / .52); --glass-strong: rgb(10 14 38 / .74); --glass-line: rgb(200 214 255 / .18);
  --field-line: rgb(200 214 255 / .3);
}
html.vip-cinematic[data-theme="jardin-esmeralda"] {
  --bg: #06140e; --bg-rgb: 6 20 14; --bg-2: #0e2a1b;
  --ink: #f1fbf4; --ink-soft: rgb(224 246 232 / .82); --ink-faint: rgb(224 246 232 / .66);
  --accent: #e0ca84; --accent-2: #a3e0bd; --accent-3: #c3a95d; --accent-ink: #0b2016;
  --glow-rgb: 150 222 184; --spark-rgb: 240 232 190;
  --glass: rgb(10 34 22 / .52); --glass-strong: rgb(8 26 17 / .74); --glass-line: rgb(200 240 216 / .18);
  --field-line: rgb(200 240 216 / .3);
}

/* Card: calm paper, opaque cards, the same accents with text-safe contrast. */
html.vip-card {
  --bg: #fbf4f0; --bg-rgb: 251 244 240; --bg-2: #f3e3dc;
  --ink: #3a1d2a; --ink-soft: #6a4655; --ink-faint: #7a5664;
  --accent: #97583b; --accent-2: #c7879a; --accent-3: #c89a6e; --accent-ink: #fffaf7;
  --glow-rgb: 199 135 154; --spark-rgb: 200 150 110;
  --glass: #fffaf8; --glass-strong: #fffaf8; --glass-line: rgb(122 72 88 / .16);
  --field-bg: #fff; --field-line: rgb(122 72 88 / .32);
  --stage-opacity: 0; --focus: #97583b;
}
html.vip-card[data-theme="noche-azul"] {
  --bg: #0b1130; --bg-rgb: 11 17 48; --bg-2: #141d46;
  --ink: #f3f5ff; --ink-soft: #c9d1f2; --ink-faint: #aeb8e0;
  --accent: #e2c893; --accent-2: #a9bcff; --accent-3: #c9a86a; --accent-ink: #0b1030;
  --glow-rgb: 150 172 255; --spark-rgb: 222 230 255;
  --glass: #151e4a; --glass-strong: #151e4a; --glass-line: rgb(200 214 255 / .16);
  --field-bg: #0f1740; --field-line: rgb(200 214 255 / .32); --focus: #e2c893;
}
html.vip-card[data-theme="jardin-esmeralda"] {
  --bg: #f3f7f1; --bg-rgb: 243 247 241; --bg-2: #e3ede0;
  --ink: #1c3426; --ink-soft: #46604f; --ink-faint: #56705f;
  --accent: #715c28; --accent-2: #7fb896; --accent-3: #c3a95d; --accent-ink: #fbfdf9;
  --glow-rgb: 127 184 150; --spark-rgb: 195 169 93;
  --glass: #fcfdfb; --glass-strong: #fcfdfb; --glass-line: rgb(40 80 56 / .15);
  --field-line: rgb(40 80 56 / .32); --focus: #715c28;
}
html.vip-cinematic[data-theme="marfil-oro"] {
  --bg: #140f07; --bg-rgb: 20 15 7; --bg-2: #2a2010;
  --ink: #fdf8ee; --ink-soft: rgb(250 240 220 / .82); --ink-faint: rgb(250 240 220 / .66);
  --accent: #e8cf95; --accent-2: #f2e2b8; --accent-3: #c9a45c; --accent-ink: #2a2010;
  --glow-rgb: 242 214 160; --spark-rgb: 255 236 196;
  --glass: rgb(40 30 14 / .52); --glass-strong: rgb(30 22 10 / .74); --glass-line: rgb(255 236 200 / .18);
  --field-line: rgb(255 236 200 / .3);
}
html.vip-cinematic[data-theme="azul-cielo"] {
  --bg: #07121f; --bg-rgb: 7 18 31; --bg-2: #0f2440;
  --ink: #f2f8ff; --ink-soft: rgb(226 238 255 / .82); --ink-faint: rgb(226 238 255 / .66);
  --accent: #e2c893; --accent-2: #a9d0ff; --accent-3: #c9a86a; --accent-ink: #0b1a30;
  --glow-rgb: 150 196 255; --spark-rgb: 222 236 255;
  --glass: rgb(12 28 50 / .52); --glass-strong: rgb(8 20 38 / .74); --glass-line: rgb(200 224 255 / .18);
  --field-line: rgb(200 224 255 / .3);
}
html.vip-cinematic[data-theme="lavanda"] {
  --bg: #120b1c; --bg-rgb: 18 11 28; --bg-2: #241640;
  --ink: #f8f3ff; --ink-soft: rgb(238 228 255 / .82); --ink-faint: rgb(238 228 255 / .66);
  --accent: #e8cf95; --accent-2: #cdb2ff; --accent-3: #c9a45c; --accent-ink: #1e1230;
  --glow-rgb: 196 168 255; --spark-rgb: 240 228 255;
  --glass: rgb(34 20 54 / .52); --glass-strong: rgb(24 14 40 / .74); --glass-line: rgb(228 214 255 / .18);
  --field-line: rgb(228 214 255 / .3);
}
html.vip-cinematic[data-theme="borgona"] {
  --bg: #1a060d; --bg-rgb: 26 6 13; --bg-2: #330d1a;
  --ink: #fff3f0; --ink-soft: rgb(255 230 226 / .82); --ink-faint: rgb(255 230 226 / .66);
  --accent: #ecc796; --accent-2: #f0a3b3; --accent-3: #d9a36f; --accent-ink: #2a0e17;
  --glow-rgb: 240 150 170; --spark-rgb: 255 222 196;
  --glass: rgb(46 12 24 / .52); --glass-strong: rgb(34 8 18 / .74); --glass-line: rgb(255 210 220 / .18);
  --field-line: rgb(255 210 220 / .3);
}
html.vip-card[data-theme="marfil-oro"] {
  --bg: #faf6ec; --bg-rgb: 250 246 236; --bg-2: #f1e8d4;
  --ink: #2e261a; --ink-soft: #5e5140; --ink-faint: #6b5d49;
  --accent: #7a5a1e; --accent-2: #c9a45c; --accent-3: #b8964d; --accent-ink: #fffdf7;
  --glow-rgb: 201 164 92; --spark-rgb: 184 150 77;
  --glass: #fffdf7; --glass-strong: #fffdf7; --glass-line: rgb(94 70 30 / .15);
  --field-line: rgb(94 70 30 / .32); --focus: #7a5a1e;
}
html.vip-card[data-theme="azul-cielo"] {
  --bg: #f1f6fb; --bg-rgb: 241 246 251; --bg-2: #dfeaf5;
  --ink: #15304a; --ink-soft: #3d5670; --ink-faint: #4a6480;
  --accent: #285a8a; --accent-2: #8fb8e0; --accent-3: #c2a15a; --accent-ink: #fafcfe;
  --glow-rgb: 143 184 224; --spark-rgb: 194 161 90;
  --glass: #fafcfe; --glass-strong: #fafcfe; --glass-line: rgb(21 48 74 / .14);
  --field-line: rgb(21 48 74 / .3); --focus: #285a8a;
}
html.vip-card[data-theme="lavanda"] {
  --bg: #f6f2fa; --bg-rgb: 246 242 250; --bg-2: #e9e0f3;
  --ink: #2e2244; --ink-soft: #584a70; --ink-faint: #65577d;
  --accent: #5e3f8f; --accent-2: #b89ce0; --accent-3: #c2a15a; --accent-ink: #fdfbff;
  --glow-rgb: 184 156 224; --spark-rgb: 194 161 90;
  --glass: #fdfbff; --glass-strong: #fdfbff; --glass-line: rgb(46 34 68 / .14);
  --field-line: rgb(46 34 68 / .3); --focus: #5e3f8f;
}
html.vip-card[data-theme="borgona"] {
  --bg: #2a0e17; --bg-rgb: 42 14 23; --bg-2: #3a1520;
  --ink: #f8eee6; --ink-soft: #e3cfc9; --ink-faint: #cdb2ab;
  --accent: #e5be86; --accent-2: #e08ea0; --accent-3: #c9a35a; --accent-ink: #2a0e17;
  --glow-rgb: 224 142 160; --spark-rgb: 229 190 134;
  --glass: #3a1520; --glass-strong: #3a1520; --glass-line: rgb(255 210 220 / .16);
  --field-bg: #34121d; --field-line: rgb(255 210 220 / .32); --focus: #e5be86;
}

/* ------------------------------------------------------------------ base ------------------------------------------------------------------ */
.vip *, .vip *::before, .vip *::after { box-sizing: border-box; }
.vip [hidden] { display: none !important; }
html.vip { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); overflow-x: clip; scroll-behavior: smooth; }
html.vip[data-active-lang="en"] [data-lang="es"], html.vip[data-active-lang="es"] [data-lang="en"] { display: none !important; }
html.vip-locked, html.vip-locked body { overflow: hidden; }

.vip body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--vip-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
html.vip-card body { background: radial-gradient(120% 70% at 50% 0%, #fffdfb 0%, var(--bg) 55%, var(--bg-2) 100%) fixed; }
html.vip-card[data-theme="noche-azul"] body { background: radial-gradient(120% 70% at 50% 0%, #1a2456 0%, var(--bg) 60%, #070b22 100%) fixed; }
html.vip-card[data-theme="borgona"] body { background: radial-gradient(120% 70% at 50% 0%, #4a1a28 0%, var(--bg) 60%, #1e0910 100%) fixed; }
html.vip-card[data-theme="jardin-esmeralda"] body { background: radial-gradient(120% 70% at 50% 0%, #fdfefc 0%, var(--bg) 55%, var(--bg-2) 100%) fixed; }
.vip h1, .vip h2, .vip h3 { margin: 0; font-weight: 400; line-height: 1.15; }
.vip p, .vip figure, .vip blockquote, .vip dl, .vip dd, .vip ol, .vip ul { margin: 0; }
.vip ul, .vip ol { padding: 0; list-style: none; }
.vip a { color: inherit; }
.vip img { display: block; max-width: 100%; height: auto; }
.vip address { font-style: normal; }
.vip :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
.vip .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vip .skip-link {
  position: fixed; left: 1rem; top: -5rem; z-index: 90; padding: .75rem 1.1rem; border-radius: 999px; text-decoration: none;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; transition: top .2s var(--ease);
}
.vip .skip-link:focus { top: calc(1rem + env(safe-area-inset-top)); }
.vip-focus-top { object-position: 50% 18%; }
.vip-focus-bottom { object-position: 50% 82%; }

.vip-script { font-family: var(--vip-script); font-weight: 400; letter-spacing: 0; line-height: 1.05; }
.vip-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; font: 600 .74rem/1.3 var(--vip-sans); letter-spacing: .28em;
  text-transform: uppercase; color: var(--accent);
}
.vip-label { font: 600 .7rem/1.3 var(--vip-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); }
.vip-icon { flex: none; }

/* ------------------------------------------------------------------ buttons ------------------------------------------------------------------ */
.vip-btn, .vip .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: .85rem 1.6rem;
  border-radius: 999px; border: 1px solid transparent; font: 600 .8rem/1.2 var(--vip-sans); letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  -webkit-tap-highlight-color: transparent;
}
.vip-btn:active, .vip .button:active { transform: scale(.98); }
.vip-btn-primary, .vip .button-primary {
  color: var(--accent-ink); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
  box-shadow: 0 14px 34px -14px rgb(var(--glow-rgb) / .9), inset 0 1px 0 rgb(255 255 255 / .35);
}
html.vip-card .vip-btn-primary, html.vip-card .button-primary { background: var(--accent); box-shadow: 0 12px 26px -16px rgb(58 29 42 / .6); }
html.vip-card[data-theme="noche-azul"] .vip-btn-primary, html.vip-card[data-theme="noche-azul"] .button-primary, html.vip-card[data-theme="borgona"] .vip-btn-primary, html.vip-card[data-theme="borgona"] .button-primary { background: linear-gradient(135deg, var(--accent), var(--accent-3)); }
.vip-btn-quiet { color: var(--ink); background: transparent; border-color: var(--glass-line); }
.vip-btn-ghost { color: var(--ink); background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.vip-btn:hover, .vip .button:hover { transform: translateY(-1px); }

/* ------------------------------------------------------------------ layers 1–2: atmosphere ------------------------------------------------------------------ */
.vip-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
html.vip-card .vip-stage { display: none; }
.vip-stage-photos { position: absolute; inset: 0; }
.vip-stage-photo {
  position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; opacity: 0;
  transition: opacity 2.2s ease; animation: vip-drift 42s ease-in-out infinite alternate; will-change: transform, opacity;
}
.vip-stage-photo.is-active { opacity: var(--stage-opacity); }
/* A family's own photo has no pre-softened copy: the atmosphere softens it here (it is felt, never read). It is held
   still, so a phone draws the blur once instead of on every frame of the drift; the stories still cross-fade. */
.vip-stage-soft { filter: blur(18px) saturate(1.06); animation: none; will-change: opacity; }
.vip-stage-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 75% at 50% 38%, rgb(var(--bg-rgb) / 0) 0%, rgb(var(--bg-rgb) / .38) 58%, rgb(var(--bg-rgb) / .9) 100%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / .55) 0%, rgb(var(--bg-rgb) / .2) 32%, rgb(var(--bg-rgb) / .32) 70%, rgb(var(--bg-rgb) / .82) 100%);
}
.vip-stage-light {
  position: absolute; inset: -45%; opacity: .55; mix-blend-mode: screen;
  background: conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgb(var(--glow-rgb) / .16) 40deg, transparent 90deg, transparent 180deg, rgb(var(--spark-rgb) / .1) 230deg, transparent 290deg);
  animation: vip-turn 90s linear infinite;
}
.vip-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vip-particles i {
  position: absolute; bottom: -8vh; left: 50%; width: 6px; height: 6px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgb(var(--spark-rgb) / .95) 0%, rgb(var(--spark-rgb) / .35) 40%, rgb(var(--spark-rgb) / 0) 72%);
  animation: vip-rise 18s linear infinite; --dx: 18px;
}
.vip-particles i:nth-child(1) { left: 6%; width: 5px; height: 5px; animation-duration: 17s; animation-delay: -3s; --dx: 24px; }
.vip-particles i:nth-child(2) { left: 14%; width: 9px; height: 9px; animation-duration: 23s; animation-delay: -11s; --dx: -16px; }
.vip-particles i:nth-child(3) { left: 23%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: -6s; --dx: 12px; }
.vip-particles i:nth-child(4) { left: 31%; width: 12px; height: 12px; animation-duration: 27s; animation-delay: -18s; --dx: -30px; }
.vip-particles i:nth-child(5) { left: 40%; width: 6px; height: 6px; animation-duration: 19s; animation-delay: -1s; --dx: 20px; }
.vip-particles i:nth-child(6) { left: 49%; width: 3px; height: 3px; animation-duration: 14s; animation-delay: -9s; --dx: -10px; }
.vip-particles i:nth-child(7) { left: 57%; width: 10px; height: 10px; animation-duration: 25s; animation-delay: -14s; --dx: 26px; }
.vip-particles i:nth-child(8) { left: 65%; width: 5px; height: 5px; animation-duration: 18s; animation-delay: -4s; --dx: -22px; }
.vip-particles i:nth-child(9) { left: 73%; width: 8px; height: 8px; animation-duration: 22s; animation-delay: -16s; --dx: 14px; }
.vip-particles i:nth-child(10) { left: 81%; width: 4px; height: 4px; animation-duration: 16s; animation-delay: -7s; --dx: -18px; }
.vip-particles i:nth-child(11) { left: 88%; width: 11px; height: 11px; animation-duration: 26s; animation-delay: -21s; --dx: -34px; }
.vip-particles i:nth-child(12) { left: 94%; width: 5px; height: 5px; animation-duration: 20s; animation-delay: -12s; --dx: -12px; }
.vip-particles i:nth-child(13) { left: 36%; width: 7px; height: 7px; animation-duration: 24s; animation-delay: -20s; --dx: 32px; }
.vip-particles i:nth-child(14) { left: 69%; width: 3px; height: 3px; animation-duration: 13s; animation-delay: -2s; --dx: 8px; }

@keyframes vip-drift { from { transform: scale(1.04) translate3d(-1.5%, -1%, 0); } to { transform: scale(1.14) translate3d(1.5%, 1.5%, 0); } }
@keyframes vip-turn { to { transform: rotate(360deg); } }
@keyframes vip-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: .85; }
  85% { opacity: .5; }
  100% { transform: translate3d(var(--dx), -118vh, 0); opacity: 0; }
}
@keyframes vip-breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

/* ------------------------------------------------------------------ opening ------------------------------------------------------------------ */
.vip-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; }
.vip-opening {
  position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; justify-items: center; overflow: hidden;
  background: var(--bg); color: #fff8f6; isolation: isolate;
}
/* Without scripts, following either opening link (#abrir) closes the cover; with scripts, vip-invitation.js animates it. */
.vip-anchor:target ~ .vip-opening, html.vip-opened .vip-opening { display: none; }
.vip-opening-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.vip-opening-img { width: 100%; height: 100%; object-fit: cover; animation: vip-kenburns 16s var(--ease) both; }
.vip .vip-opening-atmos { display: none; }
/* Wide landscape screens: the sharp portrait stands in an arch over its own softened atmosphere, text beside it. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  html.vip-cinematic .vip-opening { align-items: center; justify-items: end; }
  html.vip-cinematic .vip-opening-atmos { display: block; position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; opacity: .55; animation: vip-drift 40s ease-in-out infinite alternate; }
  html.vip-cinematic .vip-opening-img {
    position: absolute; left: 7vw; top: calc((100vh - min(84vh, 860px)) / 2); width: auto; height: min(84vh, 860px); aspect-ratio: 2 / 3;
    border-radius: 999px 999px 30px 30px; box-shadow: 0 0 0 1px rgb(var(--glow-rgb) / .35), 0 50px 120px -30px rgb(var(--glow-rgb) / .75);
    animation: vip-rise-in 1.6s var(--ease) both;
  }
  html.vip-cinematic .vip-opening-veil { background: linear-gradient(90deg, rgb(var(--bg-rgb) / .15) 0%, rgb(var(--bg-rgb) / .35) 38%, rgb(var(--bg-rgb) / .82) 62%, rgb(var(--bg-rgb) / .92) 100%), radial-gradient(60% 60% at 25% 50%, rgb(var(--glow-rgb) / .22), transparent 70%); }
  html.vip-cinematic .vip-opening-inner { width: min(44vw, 560px); margin-right: 6vw; padding-bottom: 0; }
  html.vip-cinematic .vip-opening.is-leaving .vip-opening-img { animation: vip-cover-text-out 1s var(--ease) forwards; }
}
.vip [tabindex="-1"]:focus { outline: none; }
.vip-opening-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(12 5 9 / .25) 0%, rgb(12 5 9 / .1) 24%, rgb(var(--bg-rgb) / .66) 56%, rgb(var(--bg-rgb) / .95) 80%, var(--bg) 100%),
    radial-gradient(80% 50% at 50% 100%, rgb(var(--glow-rgb) / .3), transparent 70%);
}
.vip-opening .vip-particles { z-index: -1; }
.vip-opening-inner {
  width: 100%; max-width: 560px; text-align: center; display: grid; justify-items: center; gap: .7rem;
  padding: 0 20px calc(30px + env(safe-area-inset-bottom)); animation: vip-rise-in 1.4s .25s var(--ease) both;
}
.vip-opening .vip-crest { color: #f3d3a4; width: 92px; height: auto; opacity: .95; }
.vip-opening-eyebrow { color: #f6dcb4; font-size: .78rem; letter-spacing: .42em; }
.vip-opening-name { font-size: clamp(4rem, 19vw, 7.4rem); color: #fffaf6; text-shadow: 0 4px 36px rgb(0 0 0 / .45); padding: 0 .1em; }
.vip-opening-quote { font: italic 400 clamp(1.25rem, 5.4vw, 1.6rem)/1.35 var(--vip-serif); color: rgb(255 244 240 / .92); max-width: 22em; text-wrap: balance; }
.vip-opening-actions { display: grid; gap: .65rem; width: min(100%, 360px); margin-top: .9rem; }
.vip-opening-actions .vip-btn { width: 100%; }
.vip-opening .vip-btn-quiet { color: #fff4f0; border-color: rgb(255 240 236 / .4); background: rgb(0 0 0 / .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vip-opening-note { font-size: .78rem; color: rgb(255 240 236 / .74); }

/* Card treatment: a lighter cover with the portrait in an arch. */
html.vip-card .vip-opening { align-items: center; align-content: center; overflow-y: auto; background: radial-gradient(120% 80% at 50% 0%, #fffdfb, var(--bg) 60%, var(--bg-2)); color: var(--ink); }
html.vip-card[data-theme="noche-azul"] .vip-opening { background: radial-gradient(120% 80% at 50% 0%, #1a2456, var(--bg) 60%, #070b22); }
html.vip-card[data-theme="borgona"] .vip-opening { background: radial-gradient(120% 80% at 50% 0%, #4a1a28, var(--bg) 60%, #1e0910); }
html.vip-card .vip-opening-photo { position: relative; inset: auto; z-index: 0; width: min(62vw, 290px); aspect-ratio: 3 / 4; border-radius: 999px 999px 24px 24px; overflow: hidden; margin: calc(24px + env(safe-area-inset-top)) auto 0; box-shadow: 0 0 0 6px var(--glass), 0 0 0 7px var(--glass-line), 0 30px 60px -30px rgb(58 29 42 / .55); }
html.vip-card .vip-opening-veil, html.vip-card .vip-opening .vip-particles { display: none; }
html.vip-card .vip-opening-inner { padding-top: 1rem; }
html.vip-card .vip-opening .vip-crest { color: var(--accent); width: 72px; }
html.vip-card .vip-opening-eyebrow { color: var(--accent); }
html.vip-card .vip-opening-name { color: var(--ink); text-shadow: none; font-size: clamp(3.4rem, 15vw, 6rem); }
html.vip-card .vip-opening-quote { color: var(--ink-soft); }
html.vip-card .vip-opening .vip-btn-quiet { color: var(--ink); border-color: var(--field-line); background: transparent; }
html.vip-card .vip-opening-note { color: var(--ink-faint); }

/* The departure: the portrait drifts and fades while the light rises, then the invitation appears. */
.vip-opening.is-leaving { pointer-events: none; animation: vip-cover-out 1.25s var(--ease) forwards; }
.vip-opening.is-leaving .vip-opening-img { animation: vip-cover-photo-out 1.25s var(--ease) forwards; }
.vip-opening.is-leaving .vip-opening-inner { animation: vip-cover-text-out .7s var(--ease) forwards; }
.vip-opening.is-leaving .vip-particles i { animation-duration: 3.2s; }
html.vip-arriving .vip-page { animation: vip-page-in 1.4s .2s var(--ease) both; }

@keyframes vip-kenburns { from { transform: scale(1.14); } to { transform: scale(1.02); } }
@keyframes vip-rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes vip-cover-out { 0% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vip-cover-photo-out { to { transform: scale(1.12); opacity: 0; filter: blur(6px); } }
@keyframes vip-cover-text-out { to { opacity: 0; transform: translateY(-18px); } }
@keyframes vip-page-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ fixed bar: music chip + language ------------------------------------------------------------------ */
.vip-bar {
  position: fixed; z-index: 40; top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: flex-end;
  align-items: flex-start; gap: 8px; padding: 0 12px; pointer-events: none;
}
.vip-bar > * { pointer-events: auto; }
html.vip-locked .vip-bar { visibility: hidden; }
.vip-bar.is-tucked > * { transform: translateY(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
.vip-chip, .vip .lang-toggle { transition: transform .35s var(--ease), opacity .35s var(--ease); }
.vip-chip {
  position: relative; display: flex; align-items: center; gap: 4px; height: 46px; min-width: 0; max-width: min(340px, calc(100vw - 118px)); padding: 0 5px 0 12px;
  border-radius: 999px; color: var(--ink); background: rgb(var(--bg-rgb) / .68); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 10px 28px -14px rgb(0 0 0 / .6);
}
html.vip-card .vip-chip { background: rgb(var(--bg-rgb) / .92); }
.vip-chip-text { display: grid; min-width: 0; line-height: 1.15; margin: 0 4px 0 6px; }
.vip-chip-title { font: 600 .82rem/1.2 var(--vip-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vip-chip-status { font-size: .7rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vip-chip-status:empty { display: none; }
.vip-chip-btn {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0;
  color: var(--ink); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vip-chip-btn:hover { background: rgb(var(--glow-rgb) / .16); }
.vip-chip-toggle { background: rgb(var(--glow-rgb) / .22); }
.vip-chip[data-state="unavailable"] .vip-chip-btn:not([data-vip-hide]) { display: none; }
.vip-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; width: 14px; flex: none; }
.vip-eq i { display: block; width: 3px; height: 30%; border-radius: 2px; background: var(--accent); }
.vip-chip[data-state="playing"] .vip-eq i { animation: vip-eq .9s ease-in-out infinite; }
.vip-chip[data-state="playing"] .vip-eq i:nth-child(2) { animation-delay: -.3s; }
.vip-chip[data-state="playing"] .vip-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes vip-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.vip-volume {
  position: absolute; top: 54px; right: 0; display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-radius: 18px;
  background: rgb(var(--bg-rgb) / .92); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 14px 30px -16px rgb(0 0 0 / .6);
}
.vip-volume input[type="range"] { width: 150px; accent-color: var(--accent); }
.vip-mute { width: auto; padding: 0 12px; border-radius: 999px; font: 600 .72rem var(--vip-sans); letter-spacing: .06em; background: rgb(var(--glow-rgb) / .16); }
.vip .lang-toggle {
  height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--glass-line); color: var(--ink); cursor: pointer; flex: none;
  background: rgb(var(--bg-rgb) / .68); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 600 .78rem var(--vip-sans); letter-spacing: .08em;
}
html.vip-card .lang-toggle { background: rgb(var(--bg-rgb) / .92); }
.vip-preview-tag {
  position: fixed; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; pointer-events: none; margin: 0;
  padding: 4px 10px; border-radius: 999px; font: 700 .64rem/1.4 var(--vip-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: rgb(var(--bg-rgb) / .74); border: 1px dashed var(--glass-line);
}

/* ------------------------------------------------------------------ layer 3: content ------------------------------------------------------------------ */
.vip-page { position: relative; z-index: 1; }
.vip .banners { display: grid; gap: .35rem; max-width: 720px; margin: 0 auto; padding: calc(66px + env(safe-area-inset-top)) 16px 0; }
.vip .banner { font-size: .76rem; line-height: 1.45; text-align: center; padding: .45rem .9rem; border-radius: 14px; color: var(--ink-soft); background: var(--glass); border: 1px solid var(--glass-line); }
.vip .banner-sandbox { border-style: dashed; }
.vip-glass {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 30px 70px -40px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .06);
}
html.vip-card .vip-glass { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 24px 60px -40px rgb(58 29 42 / .45), 0 1px 0 rgb(255 255 255 / .6) inset; }
html.vip-card[data-theme="noche-azul"] .vip-glass, html.vip-card[data-theme="borgona"] .vip-glass { box-shadow: 0 24px 60px -36px rgb(0 0 0 / .8); }

.vip-scene { position: relative; display: grid; justify-items: center; align-content: center; gap: 26px; padding: 76px 16px; text-align: center; }
html.vip-cinematic .vip-scene { min-height: 88svh; }
.vip-scene-inner { display: grid; justify-items: center; gap: 26px; width: 100%; max-width: 720px; }
.vip-scene-copy { width: min(100%, 560px); padding: 26px 22px; display: grid; gap: .8rem; justify-items: center; }
.vip-line { font: 400 clamp(1.7rem, 7.4vw, 2.5rem)/1.22 var(--vip-serif); color: var(--ink); text-wrap: balance; }
html.vip-cinematic .vip-line { text-shadow: 0 2px 22px rgb(0 0 0 / .35); }
.vip-section-title { font: 400 clamp(2.2rem, 9vw, 3.2rem)/1.1 var(--vip-serif); color: var(--ink); }
.vip-section-title::after { content: ""; display: block; width: 64px; height: 1px; margin: 16px auto 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); }

/* Scroll reveal (only with scripts; without them everything is visible). */
html.js.vip .reveal-on-scroll > * { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
html.js.vip .reveal-on-scroll.is-visible > * { opacity: 1; transform: none; }
html.js.vip .reveal-on-scroll.is-visible > *:nth-child(2) { transition-delay: .18s; }
html.js.vip .reveal-on-scroll.is-visible > *:nth-child(3) { transition-delay: .32s; }
html.js.vip .reveal-on-scroll.is-visible > *:nth-child(4) { transition-delay: .46s; }

/* ---- layer 4: the song --------------------------------------------------------------------------------------------------------- */
.vip-song { position: relative; isolation: isolate; display: grid; place-items: center; padding: 40px 16px 60px; text-align: center; }
html.vip-cinematic .vip-song { min-height: 100svh; padding-top: 70px; }
.vip-song-aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 56%, #000 0%, rgb(0 0 0 / .6) 45%, transparent 78%);
  mask-image: radial-gradient(70% 55% at 50% 56%, #000 0%, rgb(0 0 0 / .6) 45%, transparent 78%); }
.vip-song-aura .vip-stage-photo { opacity: .6; animation-duration: 30s; }
html.vip-card .vip-song-aura { display: none; }
.vip-song-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 760px; }
.vip-song-eyebrow { font-size: .78rem; }
.vip-song-title { font: 500 clamp(2.3rem, 10.5vw, 3.8rem)/1.05 var(--vip-serif); color: var(--ink); text-wrap: balance; }
html.vip-cinematic .vip-song-title { text-shadow: 0 4px 30px rgb(var(--glow-rgb) / .45); }
.vip-song-artist { font: italic 400 clamp(1.2rem, 5vw, 1.5rem)/1.3 var(--vip-serif); color: var(--ink-soft); margin-top: -2px; }
.vip-song-note { color: var(--ink-soft); max-width: 30em; }
.vip-player-shell { position: relative; isolation: isolate; width: min(100%, 720px); margin-top: 20px; display: grid; gap: 12px; justify-items: center; }
/* The glow is BEHIND the frame (lower z-index in this stacking context): the surroundings fade into the player. */
.vip-player-halo {
  position: absolute; z-index: 0; left: -12%; right: -12%; top: -22%; height: calc(100% + 30%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--glow-rgb) / .62), rgb(var(--glow-rgb) / .22) 52%, rgb(var(--glow-rgb) / 0) 100%);
  filter: blur(26px); animation: vip-breathe 8s ease-in-out infinite;
}
.vip-player-frame {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; min-width: 200px; overflow: hidden; border-radius: 18px;
  background: radial-gradient(120% 120% at 50% 40%, rgb(var(--bg-rgb) / .35), rgb(var(--bg-rgb) / .8));
  outline: 1px solid rgb(var(--glow-rgb) / .38); outline-offset: 7px;
  box-shadow: 0 0 0 1px rgb(var(--glow-rgb) / .22), 0 34px 90px -34px rgb(var(--glow-rgb) / .85), 0 0 140px -30px rgb(var(--glow-rgb) / .6);
}
.vip-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vip-player-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 18px; }
.vip-player-crest .vip-crest { width: 70px; height: auto; color: var(--accent); opacity: .8; }
.vip-player-note { font-size: .82rem; color: var(--ink-faint); max-width: 26em; }
.vip-player-status { min-height: 1.4em; font-size: .9rem; color: var(--ink-soft); max-width: 32em; }
.vip-player-status[data-tone="error"] { color: var(--ink); }
.vip-scroll-cue { display: inline-grid; justify-items: center; gap: 8px; margin-top: 26px; text-decoration: none; font: 600 .72rem/1.3 var(--vip-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); }
.vip-scroll-cue i { width: 1px; height: 38px; background: linear-gradient(var(--accent), transparent); animation: vip-cue 2.4s ease-in-out infinite; }
@keyframes vip-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.vip-song-silent .vip-crest { width: 110px; color: var(--accent); }

/* Card treatment: the song lives in a calm, framed card. */
html.vip-card .vip-song { padding-top: 26px; }
html.vip-card .vip-song-inner { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 30px; padding: 30px 14px 22px; box-shadow: 0 30px 70px -44px rgb(58 29 42 / .55); }
html.vip-card .vip-player-halo { display: none; }
html.vip-card .vip-player-frame { border-radius: 14px; outline-color: rgb(var(--spark-rgb) / .55); outline-offset: 5px; box-shadow: 0 18px 40px -26px rgb(58 29 42 / .6); background: var(--bg-2); }
html.vip-card .vip-song-title { font-size: clamp(2rem, 9vw, 3rem); }

/* ---- story ------------------------------------------------------------------------------------------------------------------- */
.vip-memory { width: min(84vw, 420px); aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; }
.vip-memory-img, .vip-portrait-img, .vip-gallery-img { width: 100%; height: 100%; object-fit: cover; }
html.vip-cinematic .vip-memory { -webkit-mask-image: radial-gradient(78% 80% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(78% 80% at 50% 50%, #000 58%, transparent 100%); border-radius: 0; }
html.vip-card .vip-memory { border: 8px solid var(--glass); box-shadow: 0 0 0 1px var(--glass-line), 0 24px 50px -30px rgb(58 29 42 / .55); transform: rotate(-1.6deg); }
html.js.vip .vip-scene-childhood.is-visible .vip-memory-img { animation: vip-unblur 2.4s var(--ease) both; }
@keyframes vip-unblur { from { filter: blur(10px) saturate(.6); transform: scale(1.06); } to { filter: none; transform: none; } }

.vip-timeline { position: relative; width: min(66vw, 320px); aspect-ratio: 4 / 5; margin: 10px 0 18px; }
.vip-timeline-frame { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; border: 6px solid rgb(255 255 255 / .9); box-shadow: 0 24px 50px -24px rgb(0 0 0 / .6); }
html.vip-cinematic .vip-timeline-frame { border-color: rgb(255 246 240 / .14); }
.vip-timeline-frame[data-step="1"] { transform: rotate(-7deg) translate(-9%, 2%); }
.vip-timeline-frame[data-step="2"] { transform: rotate(5deg) translate(8%, -1%); }
.vip-timeline-frame[data-step="3"] { transform: rotate(-2deg) translate(-3%, -3%); }
.vip-timeline-frame[data-step="4"] { transform: rotate(1deg); }
html.js.vip .vip-scene-growing .vip-timeline-frame { opacity: 0; }
html.js.vip .vip-scene-growing.is-visible .vip-timeline-frame { animation: vip-step-in 1.4s var(--ease) forwards; }
html.js.vip .vip-scene-growing.is-visible .vip-timeline-frame[data-step="2"] { animation-delay: 1.3s; }
html.js.vip .vip-scene-growing.is-visible .vip-timeline-frame[data-step="3"] { animation-delay: 2.6s; }
html.js.vip .vip-scene-growing.is-visible .vip-timeline-frame[data-step="4"] { animation-delay: 3.9s; }
@keyframes vip-step-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }

.vip-portrait { position: relative; width: min(88vw, 480px); aspect-ratio: 3 / 4; border-radius: 999px 999px 30px 30px; overflow: hidden; }
html.vip-cinematic .vip-portrait { box-shadow: 0 0 0 1px rgb(var(--glow-rgb) / .3), 0 50px 120px -40px rgb(var(--glow-rgb) / .7); }
html.vip-card .vip-portrait { border: 8px solid var(--glass); box-shadow: 0 0 0 1px var(--glass-line), 0 30px 60px -34px rgb(58 29 42 / .6); }
.vip-portrait-light { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .38) 48%, transparent 62%); transform: translateX(-120%); }
html.js.vip .vip-scene-reveal .vip-portrait { clip-path: inset(100% 0 0 0 round 999px 999px 30px 30px); }
html.js.vip .vip-scene-reveal.is-visible .vip-portrait { animation: vip-curtain 2.2s var(--ease) forwards; }
html.js.vip .vip-scene-reveal.is-visible .vip-portrait-light { animation: vip-sweep 2.6s 1.6s var(--ease) forwards; }
@keyframes vip-curtain { to { clip-path: inset(0 0 0 0 round 999px 999px 30px 30px); } }
@keyframes vip-sweep { to { transform: translateX(120%); } }
.vip-reveal-copy { display: grid; gap: .5rem; justify-items: center; margin-top: -30px; position: relative; z-index: 1; padding: 0 12px; }
html.vip-card .vip-reveal-copy { margin-top: 6px; }
html.vip-cinematic .vip-portrait::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(var(--bg-rgb) / .85)); }
.vip-reveal-title { font: 400 clamp(1.5rem, 6.4vw, 2.1rem)/1.25 var(--vip-serif); color: var(--ink); }
html.vip-cinematic .vip-reveal-title { text-shadow: 0 2px 18px rgb(0 0 0 / .55); }
.vip-reveal-name { font-size: clamp(4.4rem, 22vw, 8rem); color: var(--ink); }
html.vip-cinematic .vip-reveal-name { background: linear-gradient(180deg, #fff 10%, var(--accent) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 26px rgb(var(--glow-rgb) / .45)); }
html.vip-card .vip-reveal-name { color: var(--accent); }
.vip-reveal-sub { font: italic 400 1.3rem/1.4 var(--vip-serif); color: var(--ink-soft); }
.vip-reveal-date { font: 600 .78rem/1.4 var(--vip-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }

.vip-family-card { width: min(100%, 620px); padding: 34px 22px; display: grid; gap: 22px; justify-items: center; }
.vip-family-message .message-text, .vip-family-message p { font: 400 clamp(1.3rem, 5.4vw, 1.7rem)/1.5 var(--vip-serif); color: var(--ink); text-wrap: balance; }
.vip-family-message .pair { display: grid; gap: 1rem; }
html.vip[data-active-lang="en"] .vip-family-message [data-pair-lang="es"], html.vip[data-active-lang="es"] .vip-family-message [data-pair-lang="en"] { font: italic 400 1.05rem/1.55 var(--vip-serif); color: var(--ink-soft); order: 2; border-top: 1px solid var(--glass-line); padding-top: 1rem; }
.vip-parents { display: grid; gap: 6px; }
.vip-parents-names { font: 500 clamp(1.4rem, 6vw, 1.8rem)/1.3 var(--vip-serif); color: var(--ink); }
.vip-honor { width: 100%; display: grid; gap: 14px; border-top: 1px solid var(--glass-line); padding-top: 20px; }
.vip-honor h3 { font: 600 .72rem/1.3 var(--vip-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.vip-honor-list { display: grid; gap: 12px; }
.vip-honor-list dt { font-size: .8rem; color: var(--ink-faint); }
.vip-honor-list dd { font: 500 1.2rem/1.35 var(--vip-serif); color: var(--ink); }

.vip-scene-details { gap: 20px; }
.vip-date { width: min(100%, 520px); padding: 30px 22px; display: grid; gap: 4px; justify-items: center; }
.vip-date-day { font: 400 clamp(5rem, 26vw, 7.5rem)/1 var(--vip-serif); color: var(--accent); }
.vip-date-month { font: 600 .9rem/1.3 var(--vip-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); }
.vip-date-long { color: var(--ink-soft); margin-top: 8px; }
.vip-date-time { color: var(--ink); font-size: 1.05rem; display: inline-flex; gap: 10px; align-items: baseline; margin-top: 4px; }
/* Add to calendar (a native disclosure inside the date card) */
.vip-calendar { margin-top: 14px; width: 100%; text-align: center; }
.vip-calendar > summary { list-style: none; cursor: pointer; }
.vip-calendar > summary::-webkit-details-marker { display: none; }
.vip-calendar .calendar-links { list-style: none; margin: 10px auto 0; padding: 6px 16px; max-width: 360px; display: grid; justify-items: center; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--glass-line); }
.vip-calendar .text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
/* The hosts' note (added by invitation.js above the story; never part of the stored page) */
.vip .host-update-wrap { position: relative; max-width: 720px; margin: 0 auto; padding: 14px 16px 0; }
.vip .host-update-wrap:first-child { padding-top: calc(66px + env(safe-area-inset-top)); }
.vip .host-update { max-width: 520px; margin: 0 auto; padding: 16px 20px; display: grid; gap: 6px; text-align: center; background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: 18px; }
.vip .host-update-title { font: 600 .7rem/1.3 var(--vip-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.vip .host-update-text { color: var(--ink); font: 400 1.08rem/1.5 var(--vip-serif); overflow-wrap: anywhere; }
.vip .live-stream { max-width: 520px; margin: 0 auto; padding: 16px 20px; display: grid; gap: 8px; justify-items: center; text-align: center; background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: 18px; }
.vip .live-stream-title { font: 600 .7rem/1.3 var(--vip-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.vip .live-stream-text { color: var(--ink); font: 400 1.05rem/1.5 var(--vip-serif); }
/* Questions (the page script shows this box) */
.vip-ask { display: grid; gap: 12px; text-align: left; }
.vip-ask h3 { text-align: center; }
.vip-ask .field { display: grid; gap: 6px; }
.vip-ask .field-label { font: 600 .74rem/1.3 var(--vip-sans); letter-spacing: .06em; color: var(--ink-soft); }
.vip-ask input, .vip-ask textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--field-line); background: var(--field-bg); color: var(--ink); font: 400 1rem/1.4 var(--vip-sans); }
.vip-ask textarea { min-height: 88px; resize: vertical; }
.vip .ask-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vip .ask-answers:empty { display: none; }
.vip .ask-answer { border-left: 2px solid var(--accent); padding: 4px 0 4px 12px; }
.vip .ask-answer-title { color: var(--ink); font-weight: 600; }
.vip .ask-answer-text { color: var(--ink-soft); overflow-wrap: anywhere; }
.vip .ask-none, .vip .ask-fine { color: var(--ink-soft); font-size: .92rem; }
.vip .ask-hosts > summary { cursor: pointer; font-weight: 600; color: var(--accent); min-height: 44px; display: flex; align-items: center; }
.vip .ask-hosts[open] { display: grid; gap: 12px; }
.vip-venues { width: min(100%, 880px); display: grid; gap: 16px; }
.vip-venue { padding: 28px 22px; display: grid; gap: 8px; justify-items: center; }
.vip-venue h3 { font: 500 clamp(1.5rem, 6vw, 1.9rem)/1.2 var(--vip-serif); color: var(--ink); }
.vip-venue-time { font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.vip-venue address { color: var(--ink-soft); max-width: 24em; }
.vip-map { margin-top: 8px; min-height: 46px; font-size: .74rem; }
.vip-program { width: min(100%, 880px); padding: 28px 22px; display: grid; gap: 14px; }
.vip-program h3, .vip-note h3 { font: 600 .74rem/1.3 var(--vip-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.vip-program-list { display: grid; gap: 10px; text-align: left; max-width: 460px; margin: 0 auto; width: 100%; }
.vip-program-list li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--glass-line); }
.vip-program-list time { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.vip-program-list span { color: var(--ink-soft); }
/* The day of the celebration (invitation.js): the moment under way and the next one. */
.vip .day-badge { display: inline-block; margin-right: 3px; padding: 1px 9px; border-radius: 999px; font: 600 .66rem/1.6 var(--vip-sans); letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; color: var(--accent); border: 1px solid var(--accent); }
.vip .day-badge span { color: inherit; }
.vip-program-list li.is-now time, .vip-program-list li.is-now > span { color: var(--ink); }
.vip-program-list li.is-now .day-badge { background: var(--accent); color: var(--accent-ink); }
.vip-map-more { margin-top: 6px; font-size: .82rem; color: var(--ink-soft); }
.vip-map-more a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vip-notes { width: min(100%, 880px); display: grid; gap: 16px; }
/* A guest group's own sections (filled for a household link of that group only). */
.vip-group { width: min(100%, 880px); display: grid; gap: 12px; justify-items: center; }
.vip-group > .vip-notes { width: 100%; }
.vip-note { padding: 24px 22px; display: grid; gap: 8px; }
.vip-note p { color: var(--ink-soft); }
/* Guest sections: places to stay, menu, questions & answers, registry links */
.vip-note .price-note { font: 600 .78rem/1.3 var(--vip-sans); letter-spacing: .06em; color: var(--accent); }
.vip-note .text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.vip .registry-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.stay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.stay-list li { display: grid; gap: 4px; justify-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--glass-line); }
.stay-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.vip-note .stay-name { font: 500 1.25rem/1.3 var(--vip-serif); color: var(--ink); }
.vip .faq-list { display: grid; gap: 8px; text-align: left; }
.vip .faq-item { border: 1px solid var(--glass-line); border-radius: 14px; background: var(--field-bg); }
.vip .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 10px 14px; font-weight: 600; color: var(--ink); }
.vip .faq-item summary::-webkit-details-marker { display: none; }
.vip .faq-item summary::after { content: "+"; content: "+" / ""; flex: none; font-size: 1.25rem; line-height: 1; color: var(--accent); transition: transform .2s var(--ease); }
.vip .faq-item[open] summary::after { transform: rotate(45deg); }
.vip .faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vip .faq-item p { padding: 0 14px 12px; }

.vip-gallery { width: min(100%, 920px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; grid-auto-flow: dense; }
.vip-gallery-item figure { position: relative; height: 100%; border-radius: 18px; overflow: hidden; background: var(--glass); }
.vip-gallery-item img { aspect-ratio: 4 / 5; transition: transform 1.2s var(--ease); }
.vip-gallery-item:first-child { grid-column: span 2; }
.vip-gallery-item:first-child img { aspect-ratio: 16 / 11; }
.vip-gallery-item:hover img { transform: scale(1.04); }
.vip-gallery-item figcaption { position: absolute; left: 10px; bottom: 10px; font-size: .7rem; padding: 3px 8px; border-radius: 999px; background: rgb(var(--bg-rgb) / .72); color: var(--ink); }
html.js.vip .vip-scene-gallery.reveal-on-scroll > .vip-gallery { opacity: 1; transform: none; }
html.js.vip .vip-scene-gallery .vip-gallery-item { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js.vip .vip-scene-gallery.is-visible .vip-gallery-item { opacity: 1; transform: none; }
html.js.vip .vip-scene-gallery.is-visible .vip-gallery-item:nth-child(2) { transition-delay: .12s; }
html.js.vip .vip-scene-gallery.is-visible .vip-gallery-item:nth-child(3) { transition-delay: .24s; }
html.js.vip .vip-scene-gallery.is-visible .vip-gallery-item:nth-child(4) { transition-delay: .36s; }
html.js.vip .vip-scene-gallery.is-visible .vip-gallery-item:nth-child(n+5) { transition-delay: .48s; }

.vip-countdown { width: min(100%, 560px); padding: 34px 18px; display: grid; gap: 16px; justify-items: center; }
.vip-countdown-title { font: italic 400 clamp(2.4rem, 11vw, 3.4rem)/1.1 var(--vip-serif); color: var(--ink); }
.vip-countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.vip-countdown-grid > div { display: grid; gap: 4px; min-width: 0; padding: 14px 2px; border-radius: 18px; background: rgb(var(--glow-rgb) / .12); border: 1px solid var(--glass-line); }
.vip-countdown-grid [data-vip-count] { font: 500 clamp(1.8rem, 8.6vw, 2.8rem)/1 var(--vip-serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.vip-countdown-grid small { font: 600 .6rem/1.2 var(--vip-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); overflow-wrap: anywhere; }
.vip-countdown-tail { color: var(--ink-soft); font: italic 400 1.2rem/1.4 var(--vip-serif); }
.vip-countdown-date { font-size: .82rem; letter-spacing: .08em; color: var(--ink-faint); }
.vip-countdown-past { font: 400 1.5rem/1.3 var(--vip-serif); color: var(--accent); }

/* ---- RSVP ------------------------------------------------------------------------------------------------------------------- */
.vip-rsvp { width: min(100%, 560px); padding: 32px 20px; display: grid; gap: 14px; text-align: left; }
.vip-rsvp .vip-section-title { text-align: center; }
.vip .rsvp-deadline, .vip .household-note, .vip .privacy, .vip .fine-note { text-align: center; color: var(--ink-soft); font-size: .92rem; }
.vip .household-note strong { color: var(--ink); }
.vip .household-seats { display: block; font-size: .85rem; color: var(--ink-faint); }
.vip .privacy, .vip .fine-note { font-size: .8rem; color: var(--ink-faint); }
.vip .rsvp-form { display: grid; gap: 16px; margin-top: 4px; }
.vip .field { display: grid; gap: 6px; }
.vip .field-label { font: 600 .78rem/1.3 var(--vip-sans); letter-spacing: .06em; color: var(--ink); }
.vip .rsvp-form input:not([type="radio"]):not([type="checkbox"]), .vip .rsvp-form select, .vip .rsvp-form textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--field-line); background-color: var(--field-bg);
  color: var(--ink); font: 400 1rem/1.4 var(--vip-sans); -webkit-appearance: none; appearance: none;
}
.vip .rsvp-form select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
html.vip-cinematic .rsvp-form select option, html.vip-card[data-theme="noche-azul"] .rsvp-form select option, html.vip-card[data-theme="borgona"] .rsvp-form select option { color: #1b1016; background: #fff; }
.vip .rsvp-form textarea { min-height: 96px; resize: vertical; }
.vip .rsvp-form [aria-invalid="true"] { border-color: #ff9aa8; box-shadow: 0 0 0 3px rgb(255 154 168 / .25); }
.vip .choice { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.vip .choice legend { margin-bottom: 6px; padding: 0; }
.vip .choice-option { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--field-line); background: var(--field-bg); cursor: pointer; }
.vip .choice-option input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.vip .choice-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.vip .rsvp-extra { display: grid; gap: 16px; }
.vip .check-grid { display: grid; gap: 8px; }
.vip .rsvp-form .button { width: 100%; }
.vip .rsvp-form .button:disabled { opacity: .6; cursor: progress; }
.vip .form-status { min-height: 1.4em; text-align: center; font-weight: 600; }
.vip .form-status[data-tone="success"] { color: var(--accent); }
.vip .form-status[data-tone="error"] { color: #ffb3bf; }
html.vip-card .form-status[data-tone="error"] { color: #a3243b; }
html.vip-card[data-theme="noche-azul"] .form-status[data-tone="error"], html.vip-card[data-theme="borgona"] .form-status[data-tone="error"] { color: #ffb3bf; }
.vip .rsvp-closed { text-align: center; color: var(--ink); padding: 12px; }

/* ---- finale ------------------------------------------------------------------------------------------------------------------- */
.vip-scene-finale { padding-bottom: 60px; }
.vip-finale-portrait { width: min(72vw, 380px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
html.vip-cinematic .vip-finale-portrait { box-shadow: 0 0 0 1px rgb(var(--glow-rgb) / .35), 0 0 0 12px rgb(var(--glow-rgb) / .06), 0 40px 120px -30px rgb(var(--glow-rgb) / .8); }
html.vip-card .vip-finale-portrait { border: 8px solid var(--glass); box-shadow: 0 0 0 1px var(--glass-line), 0 30px 60px -34px rgb(58 29 42 / .6); }
.vip-finale-copy { display: grid; gap: 10px; justify-items: center; }
.vip-finale-line { font: 400 clamp(1.5rem, 6.6vw, 2.2rem)/1.3 var(--vip-serif); color: var(--ink); }
.vip-finale-line[data-line="3"] { font-style: italic; color: var(--ink-soft); }
.vip-finale-name { font-size: clamp(3.6rem, 17vw, 6rem); color: var(--accent); margin-top: 6px; }
.vip-finale-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.vip-share-status { min-height: 1.3em; font-size: .85rem; color: var(--ink-soft); }

.vip .footer { position: relative; z-index: 1; display: grid; gap: .5rem; justify-items: center; text-align: center; padding: 30px 16px calc(40px + env(safe-area-inset-bottom)); color: var(--ink-faint); font-size: .8rem; }
.vip .footer .ornament { color: var(--accent); opacity: .7; width: 180px; height: auto; }
.vip .powered-brand { font-weight: 600; color: var(--ink-soft); }

/* ------------------------------------------------------------------ wider screens ------------------------------------------------------------------ */
@media (min-width: 760px) {
  .vip-scene { padding: 96px 32px; }
  .vip-venues[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vip-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vip-notes > .vip-note-wide, .vip-notes > :only-child { grid-column: 1 / -1; }
  .vip .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vip-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .vip-gallery-item:first-child { grid-row: span 2; grid-column: span 1; }
  .vip-gallery-item:first-child img { aspect-ratio: auto; height: 100%; }
  .vip-song { padding-left: 32px; padding-right: 32px; }
  html.vip-card .vip-song-inner { padding: 40px 36px 30px; }
  .vip-opening-inner { padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
  .vip-scene-childhood .vip-scene-inner, .vip-scene-growing .vip-scene-inner { grid-template-columns: 1fr 1fr; align-items: center; max-width: 960px; }
  .vip-scene-childhood .vip-scene-copy, .vip-scene-growing .vip-scene-copy { text-align: left; justify-items: start; }
  .vip-bar { padding: 0 20px; }
}

/* ------------------------------------------------------------------ motion, print ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .vip *, .vip *::before, .vip *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  html.vip { scroll-behavior: auto; }
  .vip-particles, .vip-stage-light { display: none; }
  .vip-stage-photo { transform: none; }
  html.js.vip .reveal-on-scroll > *, html.js.vip .vip-scene-growing .vip-timeline-frame, html.js.vip .vip-scene-gallery .vip-gallery-item { opacity: 1 !important; transform: none; }
  html.js.vip .vip-scene-reveal .vip-portrait { clip-path: none; }
}
@media print {
  .vip-stage, .vip-opening, .vip-bar, .vip-preview-tag, .vip-player-shell, .vip .skip-link, .vip .rsvp-form, .vip-scroll-cue { display: none !important; }
  html.vip, .vip body { background: #fff; color: #000; }
  .vip .reveal-on-scroll > * { opacity: 1 !important; transform: none !important; }
}
@media (forced-colors: active) {
  .vip-stage, .vip-player-halo, .vip-song-aura { display: none; }
  .vip-glass { border: 1px solid CanvasText; }
}