/* ============================================================
   Inolvidia · intros.css — pantallas de apertura (§4)
   Personalizables SOLO con variables del tema:
   --intro-bg, --intro-ink, --seal, --accent, --accent-2, --accent-ink, --pattern y fuentes.
   Opcionales (con buenos valores por defecto, ver .inv-intro): --paper-base, --paper, --paper-2,
   --paper-3 y --paper-ink para las piezas «de papel» (sobre, placa, etiqueta, pase, nubes).
   Estados: .is-ready (entra) → .is-opening (tocó) → .is-flash (destello) → .is-open (se va).
   Escenas: .s1 .s2 .s3 … son los pasos de cada animación.
   ============================================================ */

.inv-intro {
  position: fixed; inset: 0; z-index: 70;
  isolation: isolate;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center;
  padding: calc(26px + env(safe-area-inset-top)) 18px calc(26px + env(safe-area-inset-bottom));
  background: var(--intro-bg); color: var(--intro-ink);
  overflow: hidden; cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
  transition: opacity .8s var(--ease), visibility 0s linear .8s;
  /* Piezas «de papel» (sobre y tarjeta, placa del telón, etiqueta y medallón del regalo, pase de
     abordar, nubes): siempre claras y con tinta propia (--paper-ink), aunque la intro sea oscura.
     Los temas pueden fijar --paper-base, --paper, --paper-2, --paper-3 y --paper-ink.
     Con intro clara (L ≥ .62) y tinta oscura (L ≤ .4) todo queda igual que siempre; con intro
     oscura el papel se aclara y la tinta se oscurece, conservando el matiz del tema. */
  --paper-base: var(--intro-bg);
  --paper-ink: var(--intro-ink);
  --paper: color-mix(in srgb, var(--paper-base) 42%, #fff);
  --paper-2: color-mix(in srgb, var(--paper-base) 70%, #fff);
  --paper-3: color-mix(in srgb, var(--paper-base), #000 7%);
}
@supports (color: oklch(from red l c h)) {
  .inv-intro {
    --paper-base: oklch(from var(--intro-bg)
      calc(l + (.93 - l) * clamp(0, (.62 - l) * 12, 1))
      calc(c - (c - min(c, .045)) * clamp(0, (.62 - l) * 12, 1)) h);
    --paper-ink: oklch(from var(--intro-ink) min(l, .4) c h);
  }
}
.inv-intro__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(120% 80% at 50% 40%, transparent 40%, color-mix(in srgb, var(--intro-ink) 16%, transparent) 100%),
    radial-gradient(60% 40% at 50% 38%, color-mix(in srgb, #fff 26%, transparent), transparent 70%),
    var(--pattern);
}
.inv-intro__eyebrow {
  align-self: start;
  font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s;
}
.inv-intro__scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; min-height: 0; }
.inv-intro__scene > * {
  opacity: 0; transform: translateY(24px) scale(.94);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.inv-intro__bottom {
  align-self: end; position: relative; z-index: 4;
  display: grid; justify-items: center; gap: 14px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s var(--ease) .45s, transform .8s var(--ease) .45s;
}
.inv-intro.is-ready .inv-intro__eyebrow { opacity: 1; transform: none; }
.inv-intro.is-ready .inv-intro__scene > * { opacity: 1; transform: none; }
.inv-intro.is-ready .inv-intro__bottom { opacity: 1; transform: none; }
.inv-intro.is-opening { cursor: default; }
.inv-intro.is-opening .inv-intro__eyebrow,
.inv-intro.is-opening .inv-intro__bottom { opacity: 0; transform: translateY(10px); transition-delay: 0s; transition-duration: .4s; }
.inv-intro.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

/* saludo del pase en la intro */
.inv-intro__guest {
  background: color-mix(in srgb, var(--intro-bg) 70%, #fff);
  color: var(--intro-ink);
  border-color: color-mix(in srgb, var(--intro-ink) 14%, transparent);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .3);
  flex-direction: row; gap: 10px; padding: 8px 18px;
}
.inv-intro__guest .inv-guest__name { font-family: var(--font-script); font-weight: 400; font-size: 1.6rem; }

/* botón con el caption */
.inv-intro__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 50px; padding: 0 22px 0 18px; border-radius: 99px;
  border: 0; background: var(--intro-ink); color: var(--intro-bg);
  font-family: var(--font-body); font-size: .88rem; font-weight: 600; letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--intro-ink) 70%, transparent);
  transition: transform .4s var(--spring);
}
.inv-intro__cta:focus-visible { outline: 2.5px solid var(--intro-ink); outline-offset: 4px; }
.inv-intro__cta:active { transform: scale(.95); }
.inv-intro__cta .inv-icon { width: 18px; height: 18px; animation: invCtaSpark 2.6s var(--ease-io) infinite; }
.inv-intro__cta-ring {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--intro-ink) 45%, transparent);
  animation: invCtaRing 2.4s var(--ease) infinite 1.4s;
}
@keyframes invCtaRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--intro-ink) 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 16px transparent; } }
/* el dedo «toca» (kit v2: el botón común ya no lleva destellos) */
@keyframes invCtaSpark { 0%, 70%, 86%, 100% { transform: none; } 78% { transform: translateY(1.5px) scale(.86); } }

/* destello final de la apertura (decorativo) */
.inv-intro__flash { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; }
.inv-intro__bloom {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 238, 205, .85) 35%, rgba(255, 216, 155, 0) 70%);
  opacity: 0;
}
.inv-intro__flash-spark {
  position: relative; width: 132px; height: 132px; opacity: 0; transform: scale(0) rotate(-70deg);
  filter: drop-shadow(0 0 18px rgba(255, 216, 155, .95)) drop-shadow(0 0 42px rgba(197, 139, 255, .6));
}
.inv-intro.is-flash .inv-intro__flash-spark { animation: invFlashSpark .75s var(--ease) forwards; }
.inv-intro.is-flash .inv-intro__bloom { animation: invFlashBloom .8s var(--ease-io) forwards; }
@keyframes invFlashSpark {
  0% { opacity: 0; transform: scale(0) rotate(-70deg); }
  45% { opacity: 1; transform: scale(1.18) rotate(0); }
  100% { opacity: 0; transform: scale(.4) rotate(30deg); }
}
@keyframes invFlashBloom {
  0% { opacity: 0; transform: scale(1); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(150); }
}

/* ============================================================
   ENVELOPE — sobre 3D con sello de cera
   ============================================================ */
.env {
  --w: min(84vw, 380px, 58vh);
  position: relative; width: var(--w); aspect-ratio: 1.42;
  perspective: 1400px;
  margin-top: 12%;
}
.inv-intro.is-ready .env { animation: invFloat 5s var(--ease-io) 1.2s infinite; }
.inv-intro.is-opening .env { animation: none; }
@keyframes invFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.env__shadow {
  position: absolute; left: 4%; right: 4%; bottom: -9%; height: 18%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .3), transparent); filter: blur(4px);
  transition: opacity .6s, transform .8s var(--ease);
}
.env__back {
  position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(165deg, var(--paper-3), color-mix(in srgb, var(--paper-3), #000 10%));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}
.env__card {
  position: absolute; left: 5%; right: 5%; top: 5%; bottom: 7%; z-index: 2;
  border-radius: 8px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 12px 30px -16px rgba(0, 0, 0, .35);
  transition: transform .8s var(--ease), border-radius .6s;
}
.env__card-in {
  position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--accent-2) 75%, transparent); border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 10px 10px; text-align: center;
  color: var(--paper-ink);
}
.env__card-spark { width: 14px; height: 14px; color: var(--accent-2); margin-bottom: 2px; }
.env__card-eyebrow { font-size: calc(var(--w) * .026); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.env__card-title { font-family: var(--font-script); font-size: calc(var(--w) * .1); line-height: 1.1; }
.env__card-date { font-size: calc(var(--w) * .028); letter-spacing: .3em; opacity: .7; }

.env__pocket { position: absolute; inset: 0; z-index: 3; pointer-events: none; filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, .1)); }
.env__pocket::before {
  content: ''; position: absolute; inset: 0; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper-2), #000 3%));
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
}
.env__side { position: absolute; inset: 0; }
.env__side.is-l { background: linear-gradient(95deg, color-mix(in srgb, var(--paper-2), #000 5%), var(--paper-2) 70%); clip-path: polygon(0 0, 49% 56%, 0 100%); }
.env__side.is-r { background: linear-gradient(265deg, color-mix(in srgb, var(--paper-2), #000 5%), var(--paper-2) 70%); clip-path: polygon(100% 0, 51% 56%, 100% 100%); }
.env__pocket::after {
  content: ''; position: absolute; inset: 0; border-radius: 0 0 12px 12px;
  background: linear-gradient(0deg, var(--paper-2), color-mix(in srgb, var(--paper-2), #fff 25%));
  clip-path: polygon(0 100%, 0 97%, 50% 46%, 100% 97%, 100% 100%);
}
.env__to {
  position: absolute; left: 0; right: 0; bottom: 9%; z-index: 1;
  display: flex; flex-direction: column; align-items: center; color: var(--paper-ink); text-align: center; padding: 0 16%;
}
.env__to-label { font-size: calc(var(--w) * .026); font-weight: 600; letter-spacing: .34em; text-transform: uppercase; opacity: .65; }
.env__to-name { font-family: var(--font-script); font-size: calc(var(--w) * .085); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.env__to.is-empty .env__to-name { font-size: calc(var(--w) * .07); opacity: .85; }

.env__flap {
  position: absolute; left: 0; right: 0; top: 0; height: 62%; z-index: 4;
  transform-origin: 50% 0; transform-style: preserve-3d;
  transition: transform .8s var(--ease-io);
}
.env__flap-out, .env__flap-in {
  position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 12px 12px 0 0;
}
.env__flap-out { background: linear-gradient(180deg, color-mix(in srgb, var(--paper-2), #fff 20%), color-mix(in srgb, var(--paper-2), #000 6%)); }
.env__flap-in {
  transform: rotateX(180deg);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent-2) 30%, transparent) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 55%, var(--paper)), color-mix(in srgb, var(--accent-2) 35%, var(--paper)));
}
.env__seal {
  position: absolute; left: 50%; top: 62%; z-index: 5; width: 24%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .3));
  transition: transform .4s var(--spring);
}
@media (hover: hover) { .inv-intro:not(.is-opening):hover .env__seal { transform: translate(-50%, -50%) scale(1.06) rotate(-4deg); } }
.env__half { position: absolute; inset: 0; transition: transform .75s var(--ease), opacity .6s var(--ease) .15s; }
.env__half.is-l { clip-path: polygon(-10% -10%, 53% -10%, 47% 20%, 57% 38%, 44% 57%, 55% 76%, 47% 110%, -10% 110%); }
.env__half.is-r { clip-path: polygon(53% -10%, 110% -10%, 110% 110%, 47% 110%, 55% 76%, 44% 57%, 57% 38%, 47% 20%); }
.env__seal-face {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 47% 53% 49% 51% / 53% 46% 54% 47%;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--seal), #fff 34%) 0%, var(--seal) 40%, color-mix(in srgb, var(--seal), #000 38%) 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .35), inset 0 -4px 7px rgba(0, 0, 0, .38);
  overflow: hidden;
}
.env__seal-face::before {
  content: ''; position: absolute; inset: -8%; z-index: -1; border-radius: 42% 58% 55% 45% / 50% 44% 56% 50%;
  background: color-mix(in srgb, var(--seal), #000 22%);
}
.env__seal-face::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 48%, transparent 60%) 0 0 / 250% 100% no-repeat;
  animation: invGlint 3.6s var(--ease-io) 1.5s infinite;
}
@keyframes invGlint { 0%, 55% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.env__seal-ring {
  position: absolute; inset: 15%; border-radius: 50%;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .28);
  border: 1px solid rgba(0, 0, 0, .12);
}
.env__seal-mono {
  position: relative; font-family: var(--font-script); font-size: calc(var(--w) * .072); line-height: 1; white-space: nowrap;
  color: color-mix(in srgb, var(--seal), #000 34%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35), 0 -1px 1px rgba(0, 0, 0, .4);
}

/* secuencia de apertura */
.env.s1 .env__half.is-l { transform: translate(-38%, 150%) rotate(-50deg); opacity: 0; }
.env.s1 .env__half.is-r { transform: translate(40%, 160%) rotate(46deg); opacity: 0; }
.env.s1 .env__seal { transform: translate(-50%, -50%) scale(1.08); }
.env.s2 .env__flap { transform: rotateX(180deg); }
.env.s2b .env__flap { z-index: 1; }
.env.s3 .env__card { transform: translateY(-64%); }
.env.s4 .env__card {
  z-index: 6; border-radius: 0;
  transform: translate(0, var(--card-dy, 0)) scale(var(--cover, 3));
  transition: transform .85s var(--ease-io), border-radius .4s;
}
.env.s4 .env__card-in { opacity: 0; transition: opacity .35s; }
.env__back, .env__pocket, .env__shadow { transition: translate .8s var(--ease-io), opacity .6s; }
.env.s4 .env__back, .env.s4 .env__pocket, .env.s4 .env__flap, .env.s4 .env__shadow { translate: 0 70vh; opacity: 0; }
.env.s4 .env__flap { transition: translate .8s var(--ease-io), opacity .6s; }

/* ---------- piezas comunes ---------- */
.inv-intro__eyebrow { position: relative; z-index: 4; }
/* escenas a pantalla completa: se posicionan contra .inv-intro */
.inv-intro--curtain .inv-intro__scene,
.inv-intro--confetti .inv-intro__scene { position: static; }
.inv-intro--curtain .inv-intro__scene > *,
.inv-intro--confetti .inv-intro__scene > * { transform: none; }
/* grano de papel muy sutil (SVG constante, sin datos) */
.inv-intro__bg::after {
  content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* código de barras compartido (boleto y pase de abordar) */
.bc { display: flex; align-items: stretch; height: 40px; }
.bc i { flex: none; width: calc(var(--w, 1) * 1.6px); margin-right: calc(var(--g, 1) * 1.8px); background: currentColor; border-radius: .5px; }

/* ============================================================
   CURTAIN — telón de terciopelo
   ============================================================ */
.inv-intro--curtain { background: #0b080d; }
.inv-intro--curtain .inv-intro__bg { display: none; }
.inv-intro--curtain .inv-intro__eyebrow { color: color-mix(in srgb, var(--accent-2) 55%, #fff); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); margin-top: -8px; z-index: 6; }
.inv-intro--curtain .inv-intro__cta {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2), #fff 28%), var(--accent-2) 55%, color-mix(in srgb, var(--accent-2), #000 16%));
  color: color-mix(in srgb, var(--seal) 30%, #120b0d);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2), #000 25%), 0 16px 34px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.inv-intro--curtain .inv-intro__cta:focus-visible { outline-color: var(--accent-2); }
.inv-intro--curtain .inv-intro__cta-ring { animation-name: invCtaRingGold; }
@keyframes invCtaRingGold { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 16px transparent; } }
.inv-intro--curtain .inv-intro__guest { background: rgba(0, 0, 0, .35); color: #fff; border-color: color-mix(in srgb, var(--accent-2) 50%, transparent); }

.cur {
  --velvet: var(--seal);
  --gold: var(--accent-2);
  --gold-hi: color-mix(in srgb, var(--accent-2), #fff 45%);
  --gold-lo: color-mix(in srgb, var(--accent-2), #000 35%);
  --vh: 15vh;
  position: absolute; inset: 0; overflow: hidden;
}
/* escenario detrás del telón */
.cur__stage {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 45% at 50% 38%, color-mix(in srgb, var(--velvet) 38%, #1a1016), transparent 75%),
    linear-gradient(180deg, #0c080e, color-mix(in srgb, var(--velvet) 22%, #0a070b) 70%, #050306);
}
.cur__light {
  position: absolute; left: 50%; top: -10%; width: 150vw; height: 125%; transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, rgba(255, 238, 205, .2) 172deg, rgba(255, 244, 222, .34) 180deg, rgba(255, 238, 205, .2) 188deg, transparent 198deg);
  filter: blur(6px); opacity: 0; transition: opacity 1.2s var(--ease) .5s;
}
.cur__floor {
  position: absolute; left: 50%; bottom: 8%; width: 80vw; max-width: 520px; height: 12vh; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 210, .38), transparent);
  opacity: 0; transition: opacity 1.2s var(--ease) .7s;
}
.cur__motes i {
  position: absolute; left: var(--x); top: var(--y); width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%;
  background: var(--gold-hi); box-shadow: 0 0 8px var(--gold);
  opacity: 0;
}
.cur.s2 .cur__light, .cur.s2 .cur__floor { opacity: 1; }
.cur.s2 .cur__motes i { animation: curMote 3.6s var(--ease-io) var(--d) infinite; }
@keyframes curMote { 0%, 100% { opacity: 0; transform: translateY(0) scale(.6); } 50% { opacity: .9; transform: translateY(-18px) scale(1); } }

/* paños de terciopelo */
.cur__panel {
  position: absolute; top: 0; bottom: -2%; width: 51%; z-index: 3;
  background:
    radial-gradient(120% 60% at 50% 110%, rgba(0, 0, 0, .45), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, .4), transparent 26%, transparent 72%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--velvet), #000 58%) 0,
      color-mix(in srgb, var(--velvet), #000 22%) 2.6%,
      color-mix(in srgb, var(--velvet), #fff 14%) 5.2%,
      color-mix(in srgb, var(--velvet), #000 6%) 7.6%,
      color-mix(in srgb, var(--velvet), #000 40%) 10.4%,
      color-mix(in srgb, var(--velvet), #000 58%) 12.5%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .35);
  will-change: transform;
}
.cur__panel.is-l { left: 0; transform-origin: 0 0; box-shadow: inset -14px 0 22px -8px rgba(0, 0, 0, .55), inset 0 0 60px rgba(0, 0, 0, .35); }
.cur__panel.is-r { right: 0; transform-origin: 100% 0; box-shadow: inset 14px 0 22px -8px rgba(0, 0, 0, .55), inset 0 0 60px rgba(0, 0, 0, .35); }
/* brillo aterciopelado que respira */
.cur__panel::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(40% 30% at 60% 40%, rgba(255, 255, 255, .09), transparent 70%);
  animation: curSheen 6s var(--ease-io) infinite alternate;
}
.cur__panel.is-r::after { animation-delay: -3s; }
@keyframes curSheen { from { transform: translate(-8%, -4%); } to { transform: translate(10%, 6%); } }
.inv-intro.is-ready .cur__panel.is-l { animation: curSwayL 7s var(--ease-io) infinite; }
.inv-intro.is-ready .cur__panel.is-r { animation: curSwayR 7s var(--ease-io) -1.5s infinite; }
@keyframes curSwayL { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(.6deg); } }
@keyframes curSwayR { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(-.6deg); } }
/* alzapaños dorados: aparecen cuando el telón se recoge */
.cur__tie {
  position: absolute; left: 0; right: 0; top: 58%; height: 16px; opacity: 0;
  background:
    repeating-linear-gradient(60deg, var(--gold-lo) 0 3px, var(--gold-hi) 3px 6px, var(--gold) 6px 9px),
    var(--gold);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .5);
  transition: opacity .4s var(--ease) 1.1s;
}
/* cenefa con festones, ribete y flecos */
.cur__valance { position: absolute; top: 0; left: -2%; right: -2%; height: var(--vh); z-index: 5; transition: transform 1.1s var(--ease-io); }
.cur__valance::before, .cur__trim, .cur__fringe {
  -webkit-mask: radial-gradient(62% 100% at 50% 0, #000 98.5%, transparent 100%) 0 0 / 25% 100% repeat-x;
  mask: radial-gradient(62% 100% at 50% 0, #000 98.5%, transparent 100%) 0 0 / 25% 100% repeat-x;
}
.cur__valance::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 45%, rgba(0, 0, 0, .25)),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--velvet), #000 50%) 0,
      color-mix(in srgb, var(--velvet), #000 12%) 3%,
      color-mix(in srgb, var(--velvet), #fff 10%) 6%,
      color-mix(in srgb, var(--velvet), #000 50%) 12.5%);
}
.cur__trim {
  position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 5px); z-index: 1;
  background: linear-gradient(180deg, var(--gold-lo), var(--gold-hi) 94%, var(--gold) 97%, var(--gold-lo));
}
.cur__fringe {
  position: absolute; top: 0; left: -2%; right: -2%; height: calc(var(--vh) + 22px); z-index: 4;
  background:
    linear-gradient(180deg, transparent calc(100% - 26px), rgba(0, 0, 0, .15)),
    repeating-linear-gradient(90deg, var(--gold-hi) 0 1.4px, var(--gold-lo) 1.4px 2.6px, transparent 2.6px 4px);
  -webkit-mask-size: 25% 100%; mask-size: 25% 100%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45));
  transition: transform 1.1s var(--ease-io);
}
/* placa central que cuelga de dos cordones */
.cur__plaque {
  position: absolute; left: 50%; top: 45%; z-index: 4; width: min(72vw, 300px);
  transform: translate(-50%, -50%);
  transition: transform .75s var(--ease-io), opacity .5s var(--ease) .1s;
}
.inv-intro.is-ready .cur__plaque { animation: curSwing 5.5s var(--ease-io) 1s infinite; transform-origin: 50% -40vh; }
@keyframes curSwing { 0%, 100% { rotate: 0deg; } 50% { rotate: .8deg; } }
.cur__cord { position: absolute; left: 18%; right: 18%; bottom: 100%; height: 60vh; border-inline: 1.5px solid var(--gold); opacity: .9; }
.cur__plaque-in {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 22px 20px 20px; text-align: center;
  color: color-mix(in srgb, var(--velvet) 55%, #1a1012);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .6), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--paper-base) 55%, #fff), color-mix(in srgb, var(--paper-base), #000 6%));
  border-radius: 10px;
  box-shadow:
    0 0 0 3px var(--gold), 0 0 0 5px var(--gold-lo), 0 0 0 9px color-mix(in srgb, var(--gold) 55%, transparent),
    0 24px 50px -10px rgba(0, 0, 0, .75);
}
.cur__plaque-in::before { content: ''; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); border-radius: 6px; pointer-events: none; }
.cur__spark { width: 18px; height: 18px; color: var(--gold); margin-bottom: 2px; animation: invTwinkle 3s var(--ease-io) infinite; }
.cur__mono { font-family: var(--font-script); font-size: clamp(2.6rem, 13vw, 3.4rem); line-height: 1.05; }
.cur__title { font-family: var(--font-display); font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.cur__guest { margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); font-family: var(--font-display); font-size: 1.1rem; font-style: italic; }
.cur__guest span { font-family: var(--font-body); font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }

/* apertura */
.cur.s1 .cur__plaque { transform: translate(-50%, -150%); opacity: 0; animation: none; }
.cur.s2 .cur__panel.is-l { animation: curOpenL 1.6s cubic-bezier(.6, .02, .2, 1) forwards; }
.cur.s2 .cur__panel.is-r { animation: curOpenR 1.6s cubic-bezier(.6, .02, .2, 1) forwards; }
.cur.s2 .cur__tie { opacity: 1; }
@keyframes curOpenL {
  0% { transform: none; }
  14% { transform: scaleX(1.025) skewX(-.8deg); }
  62% { transform: scaleX(.26) skewX(3.5deg); }
  82% { transform: scaleX(.2) skewX(-1.2deg); }
  100% { transform: scaleX(.23) skewX(0); }
}
@keyframes curOpenR {
  0% { transform: none; }
  14% { transform: scaleX(1.025) skewX(.8deg); }
  62% { transform: scaleX(.26) skewX(-3.5deg); }
  82% { transform: scaleX(.2) skewX(1.2deg); }
  100% { transform: scaleX(.23) skewX(0); }
}
.cur.s3 .cur__valance, .cur.s3 .cur__fringe { transform: translateY(-110%); }

/* ============================================================
   GIFTBOX — caja de regalo con moño
   ============================================================ */
.gift {
  --w: min(56vw, 250px, 30vh);
  --box: var(--seal);
  --rib: var(--accent-2);
  --rib-hi: color-mix(in srgb, var(--accent-2), #fff 40%);
  --rib-lo: color-mix(in srgb, var(--accent-2), #000 28%);
  position: relative; width: var(--w); height: calc(var(--w) * 1.3); margin-top: 6%;
}
.gift__rays {
  position: absolute; left: 50%; top: 52%; width: calc(var(--w) * 3.4); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent-2) 26%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%); mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  opacity: .4; animation: giftRays 40s linear infinite;
}
@keyframes giftRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.gift__float { position: absolute; inset: 0; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .16)); }
.inv-intro.is-ready .gift__float { animation: giftFloat 3.8s var(--ease-io) infinite; }
@keyframes giftFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
.gift__box {
  position: absolute; left: 7%; right: 7%; bottom: 0; height: 60%; border-radius: 5px 5px 12px 12px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 16%),
    linear-gradient(90deg, color-mix(in srgb, var(--box), #000 30%), var(--box) 24%, color-mix(in srgb, var(--box), #fff 16%) 52%, var(--box) 78%, color-mix(in srgb, var(--box), #000 34%));
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .18);
}
.gift__box::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .5; background-image: var(--pattern); background-size: 44px;
}
.gift__box::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: -6%; height: 60%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 220, .95), rgba(255, 216, 155, .5) 45%, transparent);
  opacity: 0; transform: scale(.4); transition: opacity .4s var(--ease), transform 1s var(--ease);
}
.gift__band {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 17%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--rib-lo), var(--rib) 30%, var(--rib-hi) 50%, var(--rib) 70%, var(--rib-lo));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.gift__lid {
  position: absolute; left: 0; right: 0; bottom: 58%; height: 17%; z-index: 3; border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%, rgba(0, 0, 0, .25)),
    linear-gradient(90deg, color-mix(in srgb, var(--box), #000 22%), color-mix(in srgb, var(--box), #fff 12%) 50%, color-mix(in srgb, var(--box), #000 26%));
  box-shadow: 0 8px 12px -6px rgba(0, 0, 0, .45);
  transform-origin: 30% 100%;
}
.gift__bow { position: absolute; left: 50%; bottom: 62%; width: 76%; height: 150%; transform: translateX(-50%); }
.gift__loop {
  position: absolute; bottom: 8%; width: 44%; height: 78%;
  border: calc(var(--w) * .05) solid var(--rib);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2), 0 4px 6px rgba(0, 0, 0, .18);
  border-top-color: var(--rib-hi); border-bottom-color: var(--rib-lo);
}
.gift__loop.is-l { right: 50%; border-radius: 70% 30% 30% 70% / 70% 60% 40% 30%; transform-origin: 100% 100%; transform: rotate(-14deg); }
.gift__loop.is-r { left: 50%; border-radius: 30% 70% 70% 30% / 60% 70% 30% 40%; transform-origin: 0 100%; transform: rotate(14deg); }
.gift__knot {
  position: absolute; left: 50%; bottom: 0; z-index: 1; width: 24%; aspect-ratio: 1.15; transform: translateX(-50%); border-radius: 40%;
  background: radial-gradient(circle at 40% 35%, var(--rib-hi), var(--rib) 55%, var(--rib-lo));
  box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
}
.gift__mono {
  position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -46%);
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-script); font-size: calc(var(--w) * .11); line-height: 1; white-space: nowrap;
  color: color-mix(in srgb, var(--box), #000 30%);
  background: radial-gradient(circle at 40% 30%, #fff, color-mix(in srgb, var(--paper-base) 60%, #fff));
  box-shadow: 0 0 0 3px var(--rib), 0 0 0 5px var(--rib-lo), 0 8px 14px rgba(0, 0, 0, .3);
}
.gift__tail {
  position: absolute; top: 2%; width: 13%; height: 44%; z-index: 1;
  background: linear-gradient(90deg, var(--rib-lo), var(--rib) 40%, var(--rib-hi) 60%, var(--rib-lo));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  opacity: 0;
}
.gift__tag {
  position: absolute; right: -16%; top: 38%; z-index: 4; width: 44%; padding: 14px 6px 8px 10px;
  display: grid; justify-items: center; text-align: center; color: var(--paper-ink);
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--paper-base) 55%, #fff));
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 50%);
  transform-origin: 0 50%; transform: rotate(10deg);
}
.inv-intro.is-ready .gift__tag { animation: giftTag 3.8s var(--ease-io) infinite; }
@keyframes giftTag { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(4deg); } }
.gift__tag-hole { position: absolute; left: 10%; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--intro-bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.gift__tag-label { font-size: .55rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; opacity: .6; padding-left: 8px; }
.gift__tag-name { font-family: var(--font-script); font-size: calc(var(--w) * .09); line-height: 1.05; padding-left: 8px; overflow-wrap: normal; }
.gift__shadow {
  position: absolute; left: 12%; right: 12%; bottom: -8%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .32), transparent);
}
.inv-intro.is-ready .gift__shadow { animation: giftShadow 3.8s var(--ease-io) infinite; }
@keyframes giftShadow { 50% { transform: scaleX(.86); opacity: .7; } }

/* apertura */
.gift.s1 .gift__float { animation: giftShake .62s linear both; }
@keyframes giftShake {
  0%, 100% { transform: none; }
  10% { transform: translate(-3px, 1px) rotate(-4deg); } 20% { transform: translate(4px, -1px) rotate(4deg); }
  30% { transform: translate(-5px, 0) rotate(-5deg) scale(1.02); } 40% { transform: translate(5px, -2px) rotate(5deg) scale(1.03); }
  50% { transform: translate(-4px, 0) rotate(-4deg) scale(1.04); } 60% { transform: translate(4px, -2px) rotate(3deg) scale(1.05); }
  70% { transform: translate(-3px, 0) rotate(-2deg) scale(1.06, 1.02); } 85% { transform: translateY(4px) scale(1.1, .92); }
}
.gift.s2 .gift__float { animation: giftPop .5s var(--spring) both; }
@keyframes giftPop { from { transform: translateY(4px) scale(1.1, .92); } to { transform: none; } }
.gift.s2 .gift__lid { animation: giftLid 1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes giftLid {
  0% { transform: none; }
  30% { transform: translate(8%, -120%) rotate(-14deg); }
  100% { transform: translate(90%, -520%) rotate(-62deg) scale(.7); opacity: 0; }
}
.gift.s2 .gift__box::after { opacity: 1; transform: scale(1.4); }
.gift.s2 .gift__tag { animation: none; transition: transform .8s var(--spring); transform: rotate(30deg) translateY(10px); }
.gift.s2 .gift__rays { opacity: 1; transition: opacity .4s; }
.gift.s3 .gift__float { transition: transform .5s var(--ease-io), opacity .4s; transform: translateY(12%) scale(.9); opacity: 0; }
.gift.s3 .gift__rays { opacity: 0; transition: opacity .4s; }

/* ============================================================
   TICKET — boleto de concierto con talón que se rasga
   ============================================================ */
.tkt {
  --w: min(80vw, 330px);
  --tk: var(--intro-ink);
  --tk-ink: var(--intro-bg);
  --notch: 14px;
  position: relative; width: var(--w); color: var(--tk-ink);
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .35));
  transform: rotate(-3deg);
  transition: transform .7s var(--ease-io), opacity .5s;
}
.inv-intro.is-ready .tkt { animation: tktFloat 5s var(--ease-io) 1.2s infinite; }
@keyframes tktFloat { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: 1deg; } }
.tkt__main {
  position: relative; overflow: hidden; padding: 0 24px 22px; border-radius: 20px 20px 0 0;
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--seal) 30%, transparent), transparent 70%),
    var(--tk);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
}
/* reflejo que barre el boleto */
.tkt__main::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 48%, transparent 60%) 0 0 / 260% 100% no-repeat;
  animation: invGlint 5s var(--ease-io) 1.4s infinite;
}
.tkt__main::after {
  content: ''; position: absolute; left: calc(var(--notch) + 6px); right: calc(var(--notch) + 6px); bottom: 0; height: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tk-ink) 45%, transparent) 0 6px, transparent 6px 11px);
}
.tkt__holo {
  position: relative; height: 34px; margin: 0 -24px 18px; overflow: hidden; display: flex; align-items: center;
  background: linear-gradient(115deg, #FFD89B, #FF8A7A, #C58BFF, #8FD8FF, #B8F5C9, #FFD89B) 0 0 / 300% 100%;
  animation: tktHolo 7s linear infinite;
  color: rgba(20, 14, 30, .7);
}
.tkt__holo::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 5px); mix-blend-mode: overlay; }
@keyframes tktHolo { to { background-position: 300% 0; } }
.tkt__holo span { white-space: nowrap; font-size: .6rem; font-weight: 800; letter-spacing: .34em; padding-left: 12px; animation: tktMarquee 16s linear infinite; }
@keyframes tktMarquee { to { transform: translateX(-50%); } }
.tkt__kicker { display: flex; justify-content: space-between; align-items: center; font-size: .66rem; font-weight: 800; letter-spacing: .3em; opacity: .85; }
.tkt__kicker span:last-child { padding: 4px 10px 4px 12px; border-radius: 99px; border: 1.5px solid var(--accent-2); color: var(--accent-2); letter-spacing: .3em; }
.tkt__title {
  margin: 14px 0 16px; font-family: var(--font-display); font-weight: 600; font-size: calc(var(--w) * .115); line-height: .98; letter-spacing: -.01em;
  text-transform: uppercase; overflow-wrap: normal;
}
.tkt__row { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px; padding: 12px 0; border-block: 1px solid color-mix(in srgb, var(--tk-ink) 18%, transparent); }
.tkt__row span { display: grid; gap: 2px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.1; min-width: 0; }
.tkt__row span:last-child { text-align: right; }
.tkt__row small, .tkt__guest small { font-family: var(--font-body); font-size: .54rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; opacity: .6; }
.tkt__guest { display: grid; gap: 0; margin-top: 14px; }
.tkt__guest strong { font-family: var(--font-script); font-weight: 400; font-size: calc(var(--w) * .1); line-height: 1.15; overflow-wrap: normal; }
.tkt__side {
  position: absolute; right: 8px; bottom: 30px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .5rem; font-weight: 800; letter-spacing: .5em; opacity: .35;
}
.tkt__stub {
  position: relative; padding: 18px 24px 20px; border-radius: 0 0 20px 20px; cursor: grab; touch-action: none;
  background: color-mix(in srgb, var(--tk), var(--tk-ink) 6%);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
  transform-origin: 100% 0;
  transition: transform .45s var(--spring);
}
.tkt__stub:active { cursor: grabbing; }
.tkt__stub-in { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.tkt__stub .bc { grid-row: span 2; height: 46px; color: var(--tk-ink); opacity: .9; }
.tkt__code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-align: right; }
.tkt__tear { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.tkt__tear .inv-icon { width: 14px; height: 14px; animation: invCue 1.6s var(--ease-io) infinite; }

/* apertura */
.tkt.s1 { animation: none; }
.tkt.s1 .tkt__stub { animation: tktTear 1s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes tktTear {
  0% { transform: none; }
  22% { transform: rotate(5deg) translateY(4px); }
  34% { transform: rotate(3deg) translate(2px, 6px); }
  100% { transform: translate(40px, 80vh) rotate(38deg); opacity: .6; }
}
.tkt.s1 .tkt__main { animation: tktJolt .4s var(--ease) .18s; }
@keyframes tktJolt { 40% { transform: translateY(-5px) rotate(-1deg); } }
.tkt.s2 { transform: rotate(0) scale(1.12) translateY(8%); opacity: 0; transition: transform .7s var(--ease-io), opacity .55s var(--ease) .1s; }

/* ============================================================
   BOARDING — pase de abordar con tablero de letras
   ============================================================ */
.brd {
  --w: min(88vw, 360px);
  --ink-b: #F6EBCF;
  position: relative; width: var(--w); display: grid; gap: 16px; margin-top: 2%;
}
.brd__board {
  position: relative; padding: 10px 12px 11px; border-radius: 14px; color: var(--ink-b);
  background: linear-gradient(180deg, #1d1a24, #121017);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 34px -18px rgba(0, 0, 0, .7);
  transition: transform .8s var(--ease-io), opacity .6s;
}
.brd__board-head, .brd__board-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .6rem; font-weight: 700; letter-spacing: .22em;
  color: color-mix(in srgb, var(--accent-2) 60%, #fff);
}
.brd__board-head span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.brd__board-head .inv-icon { width: 13px; height: 13px; }
.brd__status { color: #86E3AE; animation: brdBlink 1.6s steps(2, jump-none) infinite; }
@keyframes brdBlink { 50% { opacity: .35; } }
.brd__flaps { display: flex; justify-content: center; gap: 3px; margin: 9px 0; perspective: 300px; }
.flap {
  position: relative; flex: 0 1 26px; min-width: 0; height: 38px; display: grid; place-items: center; overflow: hidden;
  border-radius: 4px; background: linear-gradient(180deg, #2c2935 0 49.5%, #221f2a 50.5% 100%);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .05);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 1.12rem; font-weight: 700; color: var(--ink-b);
}
.flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .75); box-shadow: 0 1px 0 rgba(255, 255, 255, .05); }
.flap b { display: block; font-weight: 700; }
.flap.is-flip b { animation: flapFlip 70ms linear; }
@keyframes flapFlip { from { transform: rotateX(-75deg) translateY(-15%); opacity: .5; } to { transform: none; opacity: 1; } }

/* La sombra va en el envoltorio (filter) porque el pase lleva máscara: las muescas son huecos reales
   que dejan ver el fondo de la intro, sea liso, degradado o con patrón. */
.brd__passwrap { position: relative; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .24)) drop-shadow(0 2px 3px rgba(0, 0, 0, .08)); }
.brd__pass {
  --nr: 10px; --ny: calc(100% - 75px);
  position: relative; overflow: hidden; border-radius: 18px; color: var(--paper-ink);
  background:
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%),
    linear-gradient(170deg, #fff, var(--paper));
  -webkit-mask: radial-gradient(circle var(--nr) at 0 var(--ny), #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--nr) at 100% var(--ny), #0000 96%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--nr) at 0 var(--ny), #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--nr) at 100% var(--ny), #0000 96%, #000) right / 51% 100% no-repeat;
  transition: transform .9s cubic-bezier(.6, 0, .4, 1), opacity .7s .2s;
}
.brd__head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 16px;
  background: color-mix(in srgb, var(--seal), #000 22%); color: #fff;
  font-size: .6rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
}
.brd__brand { display: inline-flex; align-items: center; gap: 7px; }
.brd__spark { width: 13px; height: 13px; color: var(--accent-2); }
.brd__class { opacity: .8; }
.brd__route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 16px 18px 6px; }
.brd__route > div { display: grid; min-width: 0; }
.brd__route .is-to { text-align: right; }
.brd__route small, .brd__cell small { font-size: .54rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; opacity: .55; }
.brd__route strong { font-family: var(--font-display); font-size: calc(var(--w) * .13); font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--seal); }
.brd__route span { font-size: .72rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brd__plane { display: flex; align-items: center; gap: 6px; color: var(--accent-2); }
.brd__plane i { width: 16px; height: 0; border-top: 1.5px dashed currentColor; }
.brd__plane .inv-icon { transform: rotate(45deg); }
.brd__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; padding: 10px 18px 16px; }
.brd__cell { display: grid; gap: 1px; min-width: 0; }
.brd__cell strong { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brd__cell.is-wide { grid-column: 1 / -1; }
.brd__cell.is-wide strong { font-family: var(--font-script); font-weight: 400; font-size: calc(var(--w) * .088); line-height: 1.2; }
.brd__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 74px; padding: 0 18px;
  border-top: 2px dashed color-mix(in srgb, var(--paper-ink) 18%, transparent);
  color: var(--paper-ink);
}
.brd__foot .bc { height: 36px; opacity: .85; }
.brd__foot > span:last-child { font-family: var(--font-display); font-style: italic; font-size: .95rem; text-align: right; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brd__stamp {
  position: absolute; right: 16px; top: 40%; display: grid; justify-items: center; padding: 6px 12px 5px;
  border: 3px double var(--seal); border-radius: 8px; color: var(--seal);
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 30% 40%, #000 50%, rgba(0, 0, 0, .72) 100%); mask: radial-gradient(circle at 30% 40%, #000 50%, rgba(0, 0, 0, .72) 100%);
  opacity: 0; transform: rotate(-16deg) scale(2.3);
}
.brd__stamp small { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .56rem; letter-spacing: .18em; margin-top: 3px; }
.brd__jet { position: absolute; left: -24%; top: 62%; z-index: 5; color: var(--seal); opacity: 0; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .25)); }
.brd__jet .inv-icon { width: 46px; height: 46px; transform: rotate(20deg); }
.brd__jet::before {
  content: ''; position: absolute; right: 60%; top: 58%; width: 60vw; height: 2px; border-radius: 2px; transform-origin: 100% 50%; transform: rotate(-3deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--seal) 35%, transparent));
}

/* apertura */
.brd.s1 .brd__stamp { animation: brdStamp .45s cubic-bezier(.5, 0, .6, 1.4) forwards; }
@keyframes brdStamp { 0% { opacity: 0; transform: rotate(-16deg) scale(2.3); } 70% { opacity: .95; transform: rotate(-12deg) scale(.94); } 100% { opacity: .9; transform: rotate(-12deg) scale(1); } }
.brd.s1 .brd__pass { animation: brdThump .35s var(--ease) .2s; }
@keyframes brdThump { 40% { transform: scale(.98) translateY(2px); } }
.brd.s2 .brd__pass { transform: translateX(125%) rotate(9deg); opacity: 0; }
.brd.s2 .brd__board { transform: translateY(-40px); opacity: 0; }
.brd.s2 .brd__jet { animation: brdJet 1.25s cubic-bezier(.4, 0, .75, .9) forwards; }
@keyframes brdJet {
  0% { opacity: 0; transform: translate(0, 40px) rotate(8deg) scale(.7); }
  12% { opacity: 1; }
  100% { opacity: 1; transform: translate(150vw, -46vh) rotate(-14deg) scale(1.6); }
}

/* ============================================================
   POLAROID — foto instantánea que se revela
   ============================================================ */
.pol { --w: min(74vw, 320px, 46vh); position: relative; margin-top: 4%; }
.pol__card {
  position: relative; width: var(--w); padding: calc(var(--w) * .055) calc(var(--w) * .055) 0;
  background: linear-gradient(170deg, #fffdf8, #f3efe6);
  border-radius: 3px;
  box-shadow: 0 34px 50px -22px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .04);
  transform: rotate(-4deg);
  transition: transform .9s var(--ease-io), opacity .6s;
}
.inv-intro.is-ready .pol__card { animation: polIdle 4.5s var(--ease-io) 1s infinite; }
@keyframes polIdle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-2.5deg) translateY(-6px); } }
.pol__tape {
  position: absolute; top: -15px; left: 50%; z-index: 2; width: 40%; height: 32px; transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .1)), color-mix(in srgb, var(--accent-2) 42%, rgba(255, 250, 235, .7));
  clip-path: polygon(3% 0, 97% 4%, 100% 20%, 97% 38%, 100% 58%, 97% 78%, 100% 100%, 3% 96%, 0 80%, 3% 60%, 0 40%, 3% 20%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.pol__photo { position: relative; aspect-ratio: 1; overflow: hidden; background: #15110e; }
.pol__photo img {
  width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none;
  filter: brightness(.18) contrast(.55) sepia(.8) saturate(.4) blur(3px);
  transform: scale(1.04);
  transition: filter 2.4s cubic-bezier(.3, 0, .2, 1) .15s, transform 2.4s var(--ease);
}
.pol__photo.is-art {
  background:
    radial-gradient(60% 50% at 50% 100%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent),
    linear-gradient(180deg, color-mix(in srgb, var(--intro-bg), #fff 40%), color-mix(in srgb, var(--accent-2) 45%, var(--intro-bg)));
}
.pol__sun { position: absolute; left: 50%; top: 30%; width: 30%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, #fff6df, var(--accent-2)); box-shadow: 0 0 40px color-mix(in srgb, var(--accent-2) 80%, transparent); }
.pol__hill { position: absolute; bottom: -20%; border-radius: 50% 50% 0 0; }
.pol__hill.is-1 { left: -20%; width: 90%; height: 55%; background: color-mix(in srgb, var(--seal) 75%, var(--intro-bg)); }
.pol__hill.is-2 { right: -25%; width: 95%; height: 45%; background: color-mix(in srgb, var(--seal), #000 18%); }
.pol__art-mono { position: absolute; left: 0; right: 0; top: 7%; text-align: center; font-family: var(--font-script); font-size: calc(var(--w) * .13); color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); white-space: nowrap; }
.pol__photo.is-art > span:not(.pol__dev):not(.pol__gloss) { filter: brightness(.2) sepia(.8) blur(2px); transition: filter 2.4s cubic-bezier(.3, 0, .2, 1) .15s; }
.pol__dev {
  position: absolute; inset: 0;
  background: radial-gradient(75% 75% at 50% 50%, rgba(70, 52, 34, .55), rgba(18, 14, 11, .96));
  opacity: .96; transition: opacity 2.4s cubic-bezier(.3, 0, .2, 1) .15s;
}
.inv-intro.is-ready .pol__dev { animation: polBreath 3s var(--ease-io) infinite; }
@keyframes polBreath { 50% { opacity: .86; } }
.pol__gloss { position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .3), transparent 38%, transparent 70%, rgba(255, 255, 255, .08)); pointer-events: none; }
.pol__caption {
  padding: calc(var(--w) * .04) 6px 0; text-align: center; color: #2f2824;
  font-family: var(--font-script); font-size: calc(var(--w) * .1); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pol__date { padding: 2px 0 calc(var(--w) * .06); text-align: center; font-size: .66rem; font-weight: 600; letter-spacing: .3em; color: #857a70; }
.pol:not(:has(.pol__date)) .pol__caption { padding-bottom: calc(var(--w) * .08); }
.pol.is-shake .pol__card { animation: polNudge .4s var(--ease); }
@keyframes polNudge { 30% { transform: rotate(-9deg) translateX(-6px); } 70% { transform: rotate(2deg) translateX(5px); } }

/* apertura */
.pol.s1 .pol__card { animation: polShake 1.1s var(--ease-io); }
@keyframes polShake {
  0% { transform: rotate(-4deg); }
  12% { transform: rotate(-12deg) translate(-14px, 4px); } 26% { transform: rotate(6deg) translate(14px, -4px); }
  40% { transform: rotate(-10deg) translate(-12px, 2px); } 54% { transform: rotate(5deg) translate(10px, -2px); }
  68% { transform: rotate(-6deg) translate(-6px, 0); } 84% { transform: rotate(-2deg); } 100% { transform: rotate(-4deg); }
}
.pol.s1 .pol__photo img { filter: none; transform: scale(1); }
.pol.s1 .pol__photo.is-art > span:not(.pol__dev):not(.pol__gloss) { filter: none; }
.pol.s1 .pol__dev { opacity: 0; animation: none; }
.pol.s2 .pol__card { transform: rotate(0) scale(1.14); opacity: 0; transition: transform .75s var(--ease-io), opacity .5s var(--ease) .2s; }

/* ============================================================
   VINYL — funda y disco que gira
   ============================================================ */
.vin { --w: min(74vw, 330px, 42vh); position: relative; margin-top: 4%; }
.vin__deck { position: relative; width: var(--w); height: var(--w); }
.vin__sleeve {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 6px;
  display: grid; align-content: center; justify-items: center; text-align: center; padding: 10%;
  color: color-mix(in srgb, var(--intro-bg) 30%, #fff);
  background:
    radial-gradient(90% 70% at 20% 10%, color-mix(in srgb, var(--accent-2) 38%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--seal), #fff 6%), color-mix(in srgb, var(--seal), #000 38%));
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.vin__sleeve::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 45%, transparent 58%) 0 0 / 260% 100% no-repeat;
  animation: invGlint 5.5s var(--ease-io) 1.2s infinite;
}
.vin__sleeve-art {
  position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: .5;
  background: repeating-radial-gradient(circle, transparent 0 9px, color-mix(in srgb, var(--accent-2) 40%, transparent) 9px 10px);
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 32%, transparent 100%); mask: radial-gradient(closest-side, transparent 30%, #000 32%, transparent 100%);
}
.vin__sleeve-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; mix-blend-mode: luminosity; filter: contrast(1.1); -webkit-user-drag: none; }
.vin__sleeve.has-photo .vin__sleeve-art { display: none; }
.vin__sleeve-ring { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent-2) 70%, transparent); }
.vin__sleeve-mono { position: relative; font-family: var(--font-script); font-size: calc(var(--w) * .2); line-height: 1; color: color-mix(in srgb, var(--accent-2), #fff 35%); text-shadow: 0 4px 18px rgba(0, 0, 0, .35); white-space: nowrap; }
.vin__sleeve-title { position: relative; margin-top: 8px; font-family: var(--font-display); font-size: calc(var(--w) * .052); letter-spacing: .24em; text-transform: uppercase; max-width: 100%; overflow-wrap: normal; }
.vin__sleeve-foot {
  position: absolute; left: 7%; right: 7%; bottom: 6%; display: flex; justify-content: space-between;
  font-size: .56rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; opacity: .8;
}
.vin__record {
  position: absolute; left: 3%; top: 3%; width: 94%; aspect-ratio: 1; z-index: 1; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33%, rgba(0, 0, 0, .9) 33.4% 35%, transparent 35.4%),
    repeating-radial-gradient(circle, #121113 0 1.2px, #1d1c20 1.2px 2.6px, #141316 2.6px 3.4px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .65), inset 0 0 0 3px #0b0a0c;
}
.vin__grooves { position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .03); }
.vin__shine {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 25deg, transparent 0 6%, rgba(255, 255, 255, .16) 12%, transparent 20% 50%, rgba(255, 255, 255, .12) 62%, transparent 70%);
}
.vin__label {
  position: absolute; left: 33%; top: 33%; width: 34%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 2px;
  background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--accent-2), #fff 30%), var(--accent-2) 60%, color-mix(in srgb, var(--accent-2), #000 20%));
  color: color-mix(in srgb, var(--seal) 50%, #1a1015);
}
.vin__label-mono { font-family: var(--font-script); font-size: calc(var(--w) * .062); line-height: 1; white-space: nowrap; }
.vin__label-side { font-size: .42rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.vin__hole { position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--intro-bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.vin__arm {
  position: absolute; left: 97%; top: 2%; z-index: 3; width: 0; height: 0;
  transform: rotate(-8deg); transform-origin: 0 0; opacity: 0;
  transition: transform 1s var(--ease-io), opacity .5s var(--ease);
}
.vin__arm-base {
  position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f2f2f2, #9a9aa2 60%, #5a5a62); box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
.vin__arm-rod {
  position: absolute; left: -2.5px; top: 0; width: 5px; height: calc(var(--w) * .58); border-radius: 3px;
  background: linear-gradient(90deg, #7c7c84, #f4f4f6 45%, #8c8c94); box-shadow: 2px 3px 6px rgba(0, 0, 0, .3);
}
.vin__arm-head {
  position: absolute; left: -9px; top: calc(var(--w) * .56); width: 18px; height: 30px; border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg, #2b2a30, #111); transform: rotate(-18deg); box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
}
.vin__notes { position: absolute; inset: 0; pointer-events: none; color: var(--accent-2); }
.vin__notes .inv-icon { position: absolute; opacity: 0; }
.vin__notes .inv-icon:nth-child(1) { left: 6%; top: 30%; }
.vin__notes .inv-icon:nth-child(2) { right: 4%; top: 12%; }
.vin__notes .inv-icon:nth-child(3) { left: 20%; top: 4%; }
.inv-intro.is-ready .vin__deck { animation: invFloat 5s var(--ease-io) 1.2s infinite; }

/* apertura */
.vin.s1 .vin__deck { animation: none; }
.vin.s1 .vin__sleeve { animation: vinSleeve .9s cubic-bezier(.55, 0, .25, 1) forwards; }
@keyframes vinSleeve {
  0% { transform: none; }
  45% { transform: translateX(-34%) rotate(-3deg); }
  100% { transform: translate(-46%, 64%) rotate(-11deg) scale(.5); opacity: .85; }
}
.vin.s1 .vin__record { animation: vinOut .9s cubic-bezier(.55, 0, .25, 1) forwards; }
@keyframes vinOut {
  0% { transform: none; z-index: 1; }
  45% { transform: translateX(34%) rotate(70deg); z-index: 1; }
  46% { z-index: 4; }
  100% { transform: translateY(-4%) rotate(160deg); z-index: 4; }
}
.vin.s1 .vin__arm { opacity: 1; }
.vin.s2 .vin__arm { transform: rotate(24deg); z-index: 5; }
.vin.s2 .vin__label { animation: vinSpin 1.8s linear .6s infinite; }
@keyframes vinSpin { to { transform: rotate(360deg); } }
.vin.s2 .vin__notes .inv-icon { animation: vinNote 1.8s var(--ease) infinite; }
.vin.s2 .vin__notes .inv-icon:nth-child(2) { animation-delay: .5s; }
.vin.s2 .vin__notes .inv-icon:nth-child(3) { animation-delay: 1s; }
@keyframes vinNote { 0% { opacity: 0; transform: translateY(10px) rotate(-10deg) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px) rotate(14deg) scale(1.1); } }
.vin.s3 .vin__deck { transform: scale(1.2); opacity: 0; transition: transform .6s var(--ease-io), opacity .5s; }

/* ============================================================
   CONFETTI — nubes y globos
   ============================================================ */
.inv-intro--confetti .inv-intro__bg {
  background-image:
    radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, #fff 50%, transparent), transparent 70%),
    radial-gradient(90% 60% at 50% 110%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%),
    var(--pattern);
}
.cnf { position: absolute; inset: 0; overflow: hidden; --cloud: color-mix(in srgb, var(--paper-base) 22%, #fff); }
.cnf__cloud {
  position: absolute; width: var(--cw); height: calc(var(--cw) * .3); border-radius: 999px; background: var(--cloud);
  filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--paper-ink) 10%, transparent));
  transition: transform 1.1s cubic-bezier(.6, 0, .3, 1), opacity .8s;
}
.cnf__cloud::before, .cnf__cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cnf__cloud::before { width: 46%; aspect-ratio: 1; left: 14%; bottom: 28%; }
.cnf__cloud::after { width: 34%; aspect-ratio: 1; left: 50%; bottom: 36%; }
.cnf__cloud.c1 { --cw: min(78vw, 420px); left: -18%; bottom: 7%; }
.cnf__cloud.c2 { --cw: min(70vw, 380px); right: -22%; bottom: 17%; }
.cnf__cloud.c3 { --cw: min(46vw, 240px); left: -8%; top: 11%; opacity: .85; }
.inv-intro.is-ready .cnf__cloud.c1 { animation: cnfDrift 9s var(--ease-io) infinite; }
.inv-intro.is-ready .cnf__cloud.c2 { animation: cnfDrift 11s var(--ease-io) -4s infinite reverse; }
.inv-intro.is-ready .cnf__cloud.c3 { animation: cnfDrift 13s var(--ease-io) -2s infinite; }
@keyframes cnfDrift { 50% { translate: 18px -4px; } }
.cnf__balloons { position: absolute; inset: 0; }
.cnf__balloon {
  position: absolute; width: min(17vw, 84px); aspect-ratio: .84;
  border-radius: 50% 50% 47% 53% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .7) 0 5%, rgba(255, 255, 255, .2) 14%, transparent 30%), radial-gradient(circle at 60% 70%, transparent 50%, rgba(0, 0, 0, .14)), var(--b);
  box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .1);
  transform-origin: 50% 120%;
}
.cnf__balloon::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 8px; transform: translateX(-50%);
  background: var(--b); clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: brightness(.85);
}
.cnf__string {
  position: absolute; left: 50%; top: calc(100% + 3px); width: 20px; height: 90px; margin-left: -10px;
  border-left: 1.3px solid color-mix(in srgb, var(--intro-ink) 35%, transparent);
  border-radius: 50% 0 0 50% / 30% 0 0 70%;
}
.cnf__balloon.b1 { --b: var(--accent); left: 7%; top: 12%; }
.cnf__balloon.b2 { --b: var(--accent-2); right: 8%; top: 8%; width: min(20vw, 96px); }
.cnf__balloon.b3 { --b: var(--seal); left: 12%; top: 64%; width: min(15vw, 72px); }
.cnf__balloon.b4 { --b: color-mix(in srgb, var(--accent-2) 55%, #fff); right: 13%; top: 60%; }
.cnf__balloon.b5 { --b: color-mix(in srgb, var(--seal) 55%, #fff); left: 40%; top: 11%; width: min(13vw, 62px); }
.inv-intro.is-ready .cnf__balloon { animation: cnfBob 4.2s var(--ease-io) infinite; }
.inv-intro.is-ready .cnf__balloon.b2 { animation-delay: -1.2s; animation-duration: 5s; }
.inv-intro.is-ready .cnf__balloon.b3 { animation-delay: -2.4s; }
.inv-intro.is-ready .cnf__balloon.b4 { animation-delay: -.6s; animation-duration: 4.8s; }
.inv-intro.is-ready .cnf__balloon.b5 { animation-delay: -3s; animation-duration: 3.8s; }
@keyframes cnfBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
.cnf__center {
  position: absolute; left: 50%; top: 45%; width: min(84vw, 380px); transform: translate(-50%, -50%);
  display: grid; place-items: center;
  transition: transform .9s var(--ease-io), opacity .6s var(--ease) .15s;
}
.cnf__puff {
  position: absolute; left: 50%; top: 52%; width: 110%; aspect-ratio: 1.25; transform: translate(-50%, -50%);
  --c: radial-gradient(closest-side, var(--cloud) 98%, transparent);
  background: var(--c), var(--c), var(--c), var(--c), var(--c), var(--c);
  background-size: 36% 45%, 46% 57.5%, 34% 42.5%, 30% 37.5%, 30% 37.5%, 84% 50%;
  background-position: 18.75% 24.5%, 53.7% 3%, 84.8% 29%, 0 62.8%, 100% 62.8%, 50% 78%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--paper-ink) 14%, transparent));
}
.cnf__center-in { position: relative; display: grid; justify-items: center; gap: 4px; padding: 20px 28px; text-align: center; color: var(--paper-ink); }
.cnf__spark { width: 30px; height: 30px; animation: invTwinkle 3s var(--ease-io) infinite; filter: drop-shadow(0 0 8px rgba(255, 190, 150, .6)); }
.cnf__eyebrow { font-size: .66rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.cnf__title { font-family: var(--font-script); font-size: clamp(2.4rem, 12vw, 3.4rem); line-height: 1.05; overflow-wrap: normal; max-width: 16ch; }
.cnf__date {
  margin-top: 6px; padding: 5px 14px; border-radius: 99px; font-size: .72rem; font-weight: 700; letter-spacing: .24em;
  background: var(--paper-ink); color: var(--paper);
}

/* Revelación a hora exacta (§14.5): antes de la hora, globos neutros y un «?»; al llegar, el color (--reveal) */
.cnf.is-neutral .cnf__balloon.b1 { --b: #d9d6d2; }
.cnf.is-neutral .cnf__balloon.b2 { --b: #efece8; }
.cnf.is-neutral .cnf__balloon.b3 { --b: #c4bfb9; }
.cnf.is-neutral .cnf__balloon.b4 { --b: #e6e2dd; }
.cnf.is-neutral .cnf__balloon.b5 { --b: #cfcac4; }
.cnf.has-reveal .cnf__balloon.b1, .cnf.has-reveal .cnf__balloon.b3 { --b: var(--reveal, var(--accent)); }
.cnf.has-reveal .cnf__balloon.b2 { --b: color-mix(in srgb, var(--reveal, var(--accent)) 55%, #fff); }
.cnf.has-reveal .cnf__balloon.b4 { --b: color-mix(in srgb, var(--reveal, var(--accent)) 30%, #fff); }
.cnf.has-reveal .cnf__balloon.b5 { --b: color-mix(in srgb, var(--reveal, var(--accent)) 75%, #fff); }
.cnf__q {
  font-family: var(--font-display); font-size: clamp(4.4rem, 26vw, 6.6rem); font-weight: 600; line-height: .95;
  color: var(--paper-ink); opacity: .85;
}
.cnf.is-neutral .cnf__q { animation: cnfPulse 2.4s var(--ease-io) infinite; }
@keyframes cnfPulse { 50% { transform: scale(1.06); opacity: 1; } }
.cnf__q.is-text {
  font-family: var(--font-script); font-size: clamp(2.4rem, 12vw, 3.4rem); line-height: 1.05; opacity: 1;
  color: var(--reveal, var(--accent)); max-width: 14ch; overflow-wrap: normal;
  animation: cnfRevealPop .9s var(--spring) both;
}
@keyframes cnfRevealPop { 0% { transform: scale(.3) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: none; } }
.cnf__title.is-small { font-size: clamp(1.5rem, 7vw, 2rem); margin-top: 2px; }
.cnf__when { margin-top: 8px; font-size: .84rem; font-weight: 600; color: var(--paper-ink); opacity: .85; max-width: 24ch; }
.cnf__timer {
  margin-top: 4px; padding: 5px 14px; border-radius: 99px; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  font-variant-numeric: tabular-nums; background: var(--paper-ink); color: var(--paper);
}
.cnf.has-reveal .cnf__reveal-pill, .cnf.is-revealed .cnf__timer { background: var(--reveal, var(--accent)); color: #fff; }
.cnf.is-revealed .cnf__center { animation: cnfBump .8s var(--spring); }
@keyframes cnfBump { 40% { transform: translate(-50%, -50%) scale(1.08); } }

/* apertura */
.inv-intro .cnf.s1 .cnf__balloon { animation: cnfPop .34s var(--ease) forwards; }
.inv-intro .cnf.s1 .cnf__balloon.b2 { animation: cnfPop .34s var(--ease) .06s forwards; }
.inv-intro .cnf.s1 .cnf__balloon.b3 { animation: cnfPop .34s var(--ease) .12s forwards; }
.inv-intro .cnf.s1 .cnf__balloon.b4 { animation: cnfPop .34s var(--ease) .08s forwards; }
.inv-intro .cnf.s1 .cnf__balloon.b5 { animation: cnfPop .34s var(--ease) .03s forwards; }
@keyframes cnfPop { 0% { transform: scale(1); } 45% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }
.cnf.s1 .cnf__center { transform: translate(-50%, -50%) scale(1.06); }
.cnf.s2 .cnf__cloud.c1 { transform: translateX(-110%); opacity: 0; }
.cnf.s2 .cnf__cloud.c2 { transform: translateX(110%); opacity: 0; }
.cnf.s2 .cnf__cloud.c3 { transform: translateY(-160%); opacity: 0; }
.cnf.s2 .cnf__center { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }

/* ============================================================
   SIMPLE — modo accesible (§14.3): sin animación, texto grande y botón grande
   ============================================================ */
.inv-intro--simple { cursor: default; }
.inv-intro--simple .inv-intro__scene > *, .inv-intro--simple .inv-intro__eyebrow, .inv-intro--simple .inv-intro__bottom {
  opacity: 1; transform: none; transition: none;
}
.inv-intro--simple .inv-intro__eyebrow { font-size: .9rem; letter-spacing: .2em; }
.smp {
  width: min(92vw, 460px); display: grid; justify-items: center; gap: 10px; padding: 30px 24px 28px; text-align: center;
  border-radius: 22px; background: var(--paper); color: var(--paper-ink);
  border: 1.5px solid color-mix(in srgb, var(--paper-ink) 20%, transparent);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .35);
}
.smp__spark { width: 34px; height: 34px; }
.smp__eyebrow { font-size: .85rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.smp__title { font-family: var(--font-display); font-size: clamp(2.1rem, 9.5vw, 3rem); font-weight: 600; line-height: 1.1; overflow-wrap: normal; max-width: 14ch; }
.smp__date { font-size: 1.1rem; font-weight: 600; line-height: 1.4; }
.smp__place { display: inline-flex; align-items: center; gap: 6px; font-size: 1.05rem; line-height: 1.4; }
.smp__guest {
  margin-top: 6px; padding: 12px 16px; border-radius: 14px; font-size: 1.05rem; line-height: 1.4;
  background: color-mix(in srgb, var(--paper-ink) 9%, transparent);
}
.inv-intro--simple .inv-intro__cta { min-height: 64px; padding: 0 32px; font-size: 1.15rem; border-radius: 18px; }
.inv-intro--simple .inv-intro__cta .inv-icon { animation: none; width: 22px; height: 22px; }
.inv-intro--simple .inv-intro__cta-ring { display: none; }
.inv-intro--simple .inv-intro__flash { display: none; }
html[data-access='1'] .inv-intro { transition: opacity .3s ease, visibility 0s linear .3s; }
html[data-access='1'] .inv-intro__cta:focus-visible { outline-width: 4px; }

/* ============================================================
   ESCRITORIO Y MOVIMIENTO REDUCIDO
   ============================================================ */
@media (min-width: 700px) {
  .inv-intro { padding-top: 34px; padding-bottom: 34px; }
  .env { --w: min(60vw, 460px, 56vh); }
  .gift { --w: min(34vw, 270px, 32vh); }
  .tkt { --w: min(60vw, 360px); }
  .brd { --w: min(60vw, 400px); }
  .pol { --w: min(50vw, 340px, 50vh); }
  .vin { --w: min(50vw, 360px, 46vh); }
  .cur { --vh: 13vh; }
  /* confeti: en pantallas anchas nubes y globos se reparten en una franja central (hasta 880 px)
     alrededor de la tarjeta, en vez de irse a los bordes o fuera de la pantalla */
  .cnf { left: max(0px, calc(50% - 440px)); right: max(0px, calc(50% - 440px)); overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .inv-intro { transition: opacity .45s ease, visibility 0s linear .45s; }
  .inv-intro__scene > *, .inv-intro__eyebrow, .inv-intro__bottom { transition: opacity .45s ease !important; transform: none !important; }
  .inv-intro__flash { display: none; }
  .cur__motes, .gift__rays { display: none; }
}