/* ══════════════════════════════════════════════
   Revelación de Género · Lorena y Hugo
   ══════════════════════════════════════════════ */

@font-face{font-family:'Kaushan Script';src:url(../assets/fonts/kaushan.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Caveat';src:url(../assets/fonts/caveat.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Nunito';src:url(../assets/fonts/nunito.woff2) format('woff2');font-weight:200 1000;font-display:swap}

:root{
  --cream:#FFF9F1;
  --ink:#1E2447;
  --ink-soft:#585F86;
  --pink:#F0709A;
  --pink-deep:#DC4F83;
  --pink-2:#F9B8CD;
  --pink-3:#FFE6EE;
  --blue:#3E9BDB;
  --blue-deep:#2B7DBB;
  --blue-2:#A9D5F5;
  --blue-3:#E3F1FC;
  --gold:#E8B04A;
  --font-script:'Kaushan Script','Brush Script MT',cursive;
  --font-hand:'Caveat','Segoe Print',cursive;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.8,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 26px 48px -26px rgba(86,66,140,.38);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px}
body{
  margin:0;min-height:100svh;font-family:var(--font-body);font-size:1rem;line-height:1.5;color:var(--ink);
  background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100svh}
svg{display:block}
h1,h2,h3,p,blockquote,figure,ul{margin:0;padding:0}
ul{list-style:none}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:10px}

.script{font-family:var(--font-script);font-weight:400;line-height:1.1;padding:.08em .14em .22em;margin-bottom:-.14em}
.hand{font-family:var(--font-hand);font-weight:600}

/* stickers: borde blanco + sombra suave */
.art{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 8px 9px rgba(80,60,120,.2))}
.sticker{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 14px 14px rgba(80,60,120,.22))}

/* ─────────── Fondo acuarela ─────────── */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:linear-gradient(180deg,#FFF0F5 0%,#FFF9F1 28%,#FFF9F1 62%,#EEF6FF 100%)}
.bg::after{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .62  0 0 0 0 .5  0 0 0 0 .4  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.bg__blob{position:absolute;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--c) 0%,rgba(255,255,255,0) 66%)}
.bg__blob--pink{--c:#FFBFD5;width:84vmax;height:84vmax;left:-36vmax;top:-32vmax;opacity:.8}
.bg__blob--blue{--c:#AFD8F6;width:80vmax;height:80vmax;right:-34vmax;top:2vmax;opacity:.8;animation-delay:-9s}
.bg__blob--gold{--c:#FFE3AE;width:64vmax;height:64vmax;left:0;bottom:-34vmax;opacity:.6;animation-delay:-15s}
@media (hover:hover) and (pointer:fine){.bg__blob{animation:drift 26s ease-in-out infinite alternate}}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}

.progress{position:fixed;top:0;left:0;right:0;height:5px;z-index:90;pointer-events:none}
.progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--pink),#9C9BEA,var(--blue));border-radius:0 6px 6px 0;box-shadow:0 2px 10px rgba(240,112,154,.5)}

#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:120;pointer-events:none}

/* ─────────── Botones ─────────── */
.btn{
  --c1:#F68AAF;--c2:#E2588C;--shade:#B93A6B;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:1em 1.7em;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  font:800 1rem/1 var(--font-body);color:#fff;letter-spacing:.01em;
  background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:0 6px 0 var(--shade),0 16px 26px -10px rgba(60,40,120,.4);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-2px);filter:saturate(1.08)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--shade),0 8px 14px -8px rgba(60,40,120,.4)}
.btn .ico{width:1.3em;height:1.3em;flex:none}
.btn--big{font-size:1.15rem;padding:1.1em 2em}
.btn--blue{--c1:#74BEF2;--c2:#3D95DC;--shade:#2A6FAA}
.btn--grad{background:linear-gradient(100deg,#F68AAF,#9A97EC 52%,#53A9E8);--shade:#6B5FB5}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--pink-2),0 6px 0 var(--pink-2),0 16px 26px -10px rgba(60,40,120,.25);--shade:var(--pink-2)}
.btn--ghost .ico{color:var(--pink)}
.btn--ghost:active{box-shadow:inset 0 0 0 2.5px var(--pink-2),0 2px 0 var(--pink-2)}
.btn__shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.btn__shine::after{content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:shine 3.8s ease-in-out infinite}
@keyframes shine{0%{left:-60%}50%,100%{left:140%}}

/* ─────────── Portada ─────────── */
.cover{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(180deg,#FFE4EE 0%,#FFF4EA 52%,#DFF0FD 100%);
  transition:opacity .9s ease .75s;
}
.cover.is-opening{opacity:0;pointer-events:none}
.cover.is-gone{display:none}
.cover__sky{position:absolute;inset:0;pointer-events:none}
.cover__sky .cloud{position:absolute;left:0;opacity:.95;filter:drop-shadow(0 10px 12px rgba(100,130,190,.18));animation:cloud-drift linear infinite}
.cloud--1{top:9%;width:150px;animation-duration:70s;animation-delay:-20s}
.cloud--2{top:58%;width:210px;animation-duration:95s;animation-delay:-60s;opacity:.8}
.cloud--3{top:80%;width:130px;animation-duration:62s;animation-delay:-8s;opacity:.9}
@keyframes cloud-drift{from{transform:translateX(-260px)}to{transform:translateX(calc(100vw + 60px))}}
.twinkle{position:absolute;width:22px;animation:twinkle 2.6s ease-in-out infinite}
.t1{left:12%;top:16%;color:var(--gold)}
.t2{left:80%;top:12%;color:#F58DB0;width:18px;animation-delay:.7s}
.t3{left:88%;top:44%;color:var(--gold);width:16px;animation-delay:1.2s}
.t4{left:7%;top:50%;color:#5DB0EA;width:20px;animation-delay:.4s}
.t5{left:70%;top:78%;color:var(--gold);animation-delay:1.8s}
.t6{left:22%;top:84%;color:#F58DB0;width:18px;animation-delay:1s}
.cover__note{position:absolute;opacity:.85;animation:float 6s ease-in-out infinite}
.n1{left:8%;top:30%;width:28px;color:#F58DB0}
.n2{right:9%;top:62%;width:40px;color:#5DB0EA;animation-delay:1.2s}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(25deg)}}

.cover__stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;width:min(100%,520px)}
.cover__stage>*{opacity:0;animation:fade-up .9s var(--ease) forwards}
.cover__stage>:nth-child(1){animation-delay:.1s}
.cover__stage>:nth-child(2){animation-delay:.45s}
.cover__stage>:nth-child(3){animation-delay:.6s}
.cover__stage>:nth-child(4){animation-delay:.7s}
.cover__stage>:nth-child(5){animation-delay:.85s}
.cover__stage>:nth-child(6){animation-delay:1.1s}
.cover__stage>:nth-child(7){animation-delay:1.3s}
@keyframes fade-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.cover__balloon{width:min(46vw,200px);margin-bottom:6px}
.cover__balloon .sticker{width:100%;transform-origin:50% 90%;animation:balloon 6.5s ease-in-out infinite}
@keyframes balloon{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-16px) rotate(2.5deg)}}
.cover__hello{font-size:clamp(3rem,15vw,4.6rem);color:var(--pink);margin-top:2px;padding-bottom:.12em}
.cover__to{font:800 clamp(1.5rem,6.4vw,2rem)/1.1 var(--font-body);color:var(--ink);margin-top:4px}
.cover__guest{margin-top:10px;padding:.3em 1.1em;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2.5px var(--blue-2);font:800 1.05rem var(--font-body);color:var(--blue-deep)}
.cover__lead{margin:10px 0 24px;font-size:1.12rem;font-weight:600;color:var(--ink-soft)}
.cover__hint{display:flex;gap:.5em;align-items:center;margin-top:18px;font-size:.92rem;font-weight:700;color:var(--ink-soft)}
.cover__hint svg{width:14px;height:20px;color:var(--pink)}
#open{animation:fade-up .9s var(--ease) 1.1s forwards,pulse 2.4s ease-in-out 2.2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.cover.is-opening .cover__balloon{animation:none;opacity:1;transform:translateY(-130vh) scale(1.12);transition:transform 1.5s cubic-bezier(.55,0,.25,1)}
.cover.is-opening .cover__stage>:not(.cover__balloon){animation:none;opacity:0;transform:translateY(16px);transition:opacity .45s,transform .45s}
.cover.is-opening #open{animation:none;opacity:0;transition:opacity .35s}

/* ─────────── Controles flotantes ─────────── */
.sound{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:#fff;box-shadow:inset 0 0 0 3px var(--pink-2),0 12px 22px -8px rgba(60,40,120,.35);
  animation:pop-in .6s var(--ease-back) both;-webkit-tap-highlight-color:transparent;
}
.sound:active{transform:scale(.92)}
.eq{display:flex;gap:3px;align-items:flex-end;height:22px}
.eq i{width:4px;border-radius:3px;background:linear-gradient(180deg,var(--pink),var(--blue));height:100%;transform-origin:50% 100%;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.4s}.eq i:nth-child(3){animation-delay:-.75s}.eq i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.sound[aria-pressed="false"] .eq i{animation-play-state:paused;transform:scaleY(.22)}
.sound[aria-pressed="false"]::after{content:"";position:absolute;width:30px;height:3px;border-radius:3px;background:var(--pink-deep);transform:rotate(-45deg);box-shadow:0 0 0 2px #fff}
@keyframes pop-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

.float-cta{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;
  display:inline-flex;align-items:center;gap:.55em;padding:.85em 1.25em;border-radius:999px;text-decoration:none;
  font:800 .95rem/1 var(--font-body);color:#fff;background:linear-gradient(100deg,#F68AAF,#9A97EC 55%,#53A9E8);
  box-shadow:0 5px 0 #6B5FB5,0 14px 24px -8px rgba(60,40,120,.45);
  transform:translateY(190%);transition:transform .55s var(--ease-back);
}
.float-cta.is-on{transform:none}
.float-cta .ico{width:1.2em;height:1.2em}

/* ─────────── Estructura ─────────── */
.scene{position:relative;display:flex;align-items:center;min-height:72svh;padding:clamp(64px,11vh,120px) 0;overflow-x:clip}
.wrap{position:relative;z-index:1;width:min(100% - 32px,1080px);margin-inline:auto}
.wrap--narrow{width:min(100% - 32px,640px)}

.section-title{text-align:center;font-size:clamp(2.6rem,10.5vw,4.3rem);color:var(--ink)}
.section-title::after{
  content:"";display:block;width:130px;height:12px;margin:.18em auto 0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 12'><path d='M3 7c10-8 18-8 28 0s18 8 28 0 18-8 28 0 18 8 28 0' fill='none' stroke='%23F0709A' stroke-width='3.4' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.section-sub{text-align:center;max-width:32ch;margin:.7em auto 0;font-size:1.1rem;font-weight:600;color:var(--ink-soft)}

/* flotantes con parallax */
.fl-layer{position:absolute;inset:0;pointer-events:none;z-index:0}
.par{position:absolute;left:var(--x);top:var(--y)}
@media (hover:hover) and (pointer:fine){.par{will-change:transform}}
.fl{display:block;rotate:var(--r,0deg);animation:float var(--dur,6s) ease-in-out var(--del,0s) infinite}
.fl--xs{width:22px}.fl--s{width:34px}.fl--m{width:48px}.fl--balloon{width:48px}
.fl--cloud{width:200px;opacity:.9;animation-name:float-x}
.fl--rainbow{width:128px;opacity:.95}
.twinkle-l{animation:twinkle 3s ease-in-out var(--del,0s) infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(4deg)}}
@keyframes float-x{0%,100%{transform:translateX(0)}50%{transform:translateX(28px)}}

/* ─────────── Revelar al deslizar ─────────── */
.reveal{
  opacity:0;translate:0 30px;scale:.97;
  transition:opacity .85s var(--ease),translate .85s var(--ease),scale .85s var(--ease);
  transition-delay:calc(var(--d,0) * 1ms);
}
.reveal[data-reveal="left"]{translate:-54px 0}
.reveal[data-reveal="right"]{translate:54px 0}
.reveal[data-reveal="pop"]{translate:0 0;scale:.55;transition-timing-function:var(--ease-back)}
.reveal[data-reveal="rise"]{translate:0 90px;scale:.9;transition-timing-function:var(--ease-back)}
.reveal.in{opacity:1;translate:0 0;scale:1}

.split-l{display:inline-block;opacity:0;transform:translateY(.55em) rotate(8deg) scale(.6);padding:.3em .16em .3em;margin:-.3em -.16em -.3em}
.is-open .split-l{animation:letter-in .75s var(--ease-back) forwards;animation-delay:calc(var(--base,0ms) + var(--i) * 60ms)}
/* terminada la entrada la letra deja de ser una capa animada */
.split-l.settled{animation:none;opacity:1;transform:none}
.l-p{color:var(--pink)}
.l-b{color:var(--blue)}
@keyframes letter-in{to{opacity:1;transform:none}}

.split-w{display:inline-block;opacity:0;translate:0 .7em;filter:blur(6px);transition:opacity .6s ease,translate .7s var(--ease),filter .6s ease;transition-delay:calc(var(--i) * 55ms)}
[data-split="words"].in .split-w{opacity:1;translate:0 0;filter:none}

/* ─────────── 1 · Hero ─────────── */
.hero{min-height:100svh;padding-top:max(68px,8vh);padding-bottom:84px;text-align:center}
.hero__inner{display:flex;flex-direction:column;align-items:center}
.ribbon{position:relative;z-index:0;font-size:clamp(1.7rem,7vw,2.3rem);padding:.1em 1.6em .02em;color:var(--ink)}
.ribbon::before{
  content:"";position:absolute;inset:8% 0 -4%;z-index:-1;background:var(--pink-2);opacity:.85;transform:rotate(-1.6deg);
  clip-path:polygon(0 24%,5% 8%,18% 16%,40% 4%,62% 14%,86% 2%,100% 18%,97% 78%,91% 96%,70% 86%,46% 98%,22% 88%,8% 98%,1% 76%);
}
.names{font-size:clamp(3rem,14.5vw,5.6rem);color:var(--ink);margin-top:.12em;white-space:nowrap}
.names .amp{font-style:normal;color:var(--pink);font-size:.78em;margin-inline:.08em}
.invite{display:flex;align-items:center;gap:.6em;margin-top:.5em;font:800 clamp(1.1rem,4.8vw,1.45rem)/1 var(--font-body);letter-spacing:.02em}
.invite svg{width:.85em;height:.85em;color:var(--pink)}
.invite svg:last-child{color:var(--blue)}
.title{display:flex;flex-direction:column;align-items:center;margin-top:.5em;line-height:.9}
.title__top{font-size:clamp(2.3rem,11vw,4.6rem);color:var(--ink)}
.title__big{font-size:clamp(5rem,27vw,10.5rem);margin-top:-.04em;text-shadow:0 5px 0 rgba(255,255,255,.95),0 12px 16px rgba(60,40,120,.14)}
.hero__lead{margin-top:.9em;max-width:26ch;font-size:clamp(1.12rem,4.7vw,1.4rem);font-weight:700;color:var(--ink-soft)}
.hero__lead em{display:block;font:600 1.3em/1.1 var(--font-hand);font-style:normal;color:var(--blue-deep)}
.hero__bears{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:6px;width:min(100%,560px);margin-top:30px}
.bear{width:100%;max-width:200px;transform-origin:50% 100%;animation:bob 5s ease-in-out infinite}
.hero__bears .bear:first-child{justify-self:end}
.hero__bears .bear:last-child{justify-self:start;animation-delay:-2.2s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1.4deg)}}
.hero__q{position:relative;width:72px;height:80px;margin-bottom:60px}
.beat{position:absolute;width:44px;animation:beat 1.8s ease-in-out infinite;filter:drop-shadow(0 5px 6px rgba(80,60,120,.22))}
.b1{left:0;top:14px;rotate:-14deg}
.b2{right:0;top:0;rotate:12deg;animation-delay:-.7s}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.22)}28%{transform:scale(1)}42%{transform:scale(1.14)}70%{transform:scale(1)}}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px;font:800 .92rem var(--font-body);color:var(--ink-soft);text-decoration:none;letter-spacing:.02em}
.scroll-cue i{width:26px;height:42px;border-radius:14px;border:2.5px solid var(--pink);position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;width:5px;height:9px;margin-left:-2.5px;border-radius:3px;background:var(--pink);animation:wheel 1.7s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

.eyes{transform-box:fill-box;transform-origin:center;animation:blink 5.4s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}

/* ─────────── 2 · Versículo ─────────── */
.verse{min-height:80svh}
.verse__card{
  position:relative;max-width:700px;margin:0 auto;padding:clamp(40px,7vw,64px) clamp(22px,6vw,64px) clamp(30px,5vw,48px);text-align:center;
  background:rgba(255,255,255,.88);border-radius:38px;
  box-shadow:inset 0 0 0 4px #fff,var(--shadow);
}
.verse__card::before{content:"";position:absolute;inset:12px;border-radius:28px;border:2.5px dashed var(--pink-2);pointer-events:none}
.verse__mark{position:absolute;left:22px;top:-4px;font-size:6.5rem;line-height:1;color:var(--pink-2);opacity:.9}
.verse__text{position:relative;font:600 clamp(1.75rem,7.4vw,2.6rem)/1.28 var(--font-hand);color:var(--ink)}
.verse__ref{display:flex;align-items:center;justify-content:center;gap:.9em;margin-top:1.1em;font:800 .92rem var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--pink-deep)}
.verse__ref i{width:40px;height:2.5px;border-radius:2px;background:currentColor;opacity:.55}
.verse__moon{position:absolute;width:92px;top:-44px;right:-8px;rotate:14deg;animation:float 7s ease-in-out infinite}
.verse__cloud{position:absolute;width:130px;left:-32px;bottom:-38px;opacity:.95;filter:drop-shadow(0 8px 10px rgba(100,130,190,.2));animation:float-x 11s ease-in-out infinite}
.verse__star{position:absolute;width:24px;animation:twinkle 2.8s ease-in-out infinite}
.verse__star.s1{right:44px;bottom:-12px;color:var(--gold)}
.verse__star.s2{left:44px;top:-14px;color:#5DB0EA;width:20px;animation-delay:1s}
.musicnote{display:flex;align-items:center;justify-content:center;gap:.5em;margin-top:44px;text-align:center;font-size:clamp(1.8rem,7.4vw,2.5rem);line-height:1.1;color:var(--blue-deep)}
.musicnote svg{flex:none;width:34px;color:var(--pink);animation:bob 2.4s ease-in-out infinite}

/* ─────────── 3 · Niña o niño ─────────── */
.bet__grid{display:grid;gap:92px;margin-top:104px}
.card{
  position:relative;isolation:isolate;padding:104px 22px 30px;text-align:center;
  border-radius:44px 40px 46px 38px/40px 46px 38px 44px;box-shadow:inset 0 0 0 4px #fff,var(--shadow);
}
.card::before{content:"";position:absolute;inset:12px;border-radius:inherit;border:2.5px dashed rgba(255,255,255,.9);pointer-events:none;z-index:-1}
.card--girl{background:radial-gradient(130% 90% at 18% 0%,#FFEAF1,#FBC4D7 72%)}
.card--boy{background:radial-gradient(130% 90% at 82% 0%,#EAF6FE,#B3D9F6 72%)}
.card__animal{position:absolute;z-index:2;top:-86px;left:50%;width:128px;margin-left:-64px;transform-origin:50% 100%;animation:bob 5.5s ease-in-out infinite}
.card--boy .card__animal{width:134px;margin-left:-67px;top:-74px;animation-delay:-2s}
.card__title{font-size:clamp(2.3rem,9vw,3.2rem);color:var(--pink-deep)}
.card--boy .card__title{color:var(--blue-deep)}
.card__text{margin:.25em auto 0;max-width:13em;font-size:clamp(1.6rem,6.4vw,2rem);line-height:1.15;color:var(--ink)}
.kw{display:block;font-size:1.75em;line-height:1.05;color:var(--pink-deep)}
.card--boy .kw{color:var(--blue-deep)}
.card__items{display:flex;justify-content:center;align-items:flex-end;gap:18px;margin-top:20px}
.item{width:96px;animation:bob 4.2s ease-in-out infinite}
.item--b{width:106px;animation-delay:-1.6s}
.bet__mid{display:grid;justify-items:center;gap:10px;text-align:center}
.bet__hearts{position:relative;width:96px;height:84px}
.bet__hearts .beat{width:58px}
.bet__mid .hand{max-width:7.5em;font-size:clamp(1.7rem,6.8vw,2rem);line-height:1;color:var(--ink)}

/* ─────────── 4 · Fecha y lugar ─────────── */
.ticket{display:grid;max-width:780px;margin:36px auto 0;overflow:hidden;border-radius:38px;background:#fff;box-shadow:inset 0 0 0 4px #fff,var(--shadow)}
.ticket__date{
  display:grid;justify-items:center;align-content:center;padding:26px 20px 20px;text-align:center;
  background:linear-gradient(135deg,#FFD3E2 0%,#E6E4FA 50%,#C6E4FA 100%);
}
.dow,.mon{font:800 .95rem var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.day{font-size:clamp(6rem,30vw,8.5rem);line-height:.95;color:var(--ink);text-shadow:0 5px 0 rgba(255,255,255,.85)}
.yr{margin-top:6px;padding:.15em .9em;border-radius:999px;background:#fff;font:800 .9rem var(--font-body);letter-spacing:.14em;color:var(--pink-deep)}
.ticket__info{padding:10px 24px 14px;border-top:3px dashed var(--pink-2)}
.info{display:flex;align-items:center;gap:16px;padding:14px 0}
.info+.info{border-top:2px dotted #E8E0F0}
.info__ic{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%}
.info__ic svg{width:28px;height:28px}
.info__ic--pink{background:var(--pink-3);color:var(--pink-deep)}
.info__ic--blue{background:var(--blue-3);color:var(--blue-deep)}
.info small{display:block;font:800 .72rem var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.info strong{display:block;font-size:clamp(1.45rem,6vw,1.8rem);line-height:1.15;font-weight:800}
.countdown{margin-top:38px;text-align:center}
.countdown__title{font-size:2.1rem;line-height:1;color:var(--pink-deep)}
.countdown__row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:460px;margin:10px auto 0}
.cd{padding:14px 4px 10px;border-radius:24px;background:#fff;box-shadow:inset 0 0 0 3px var(--pink-3),0 14px 22px -16px rgba(60,40,120,.45)}
.cd:nth-child(even){box-shadow:inset 0 0 0 3px var(--blue-3),0 14px 22px -16px rgba(60,40,120,.45)}
.cd b{display:block;font:400 clamp(2.1rem,10vw,3.3rem)/1 var(--font-script);color:var(--ink);font-variant-numeric:tabular-nums}
.cd:nth-child(odd) b{color:var(--pink-deep)}
.cd:nth-child(even) b{color:var(--blue-deep)}
.cd b.tick{animation:tick .45s var(--ease-back)}
@keyframes tick{0%{transform:translateY(-35%) scale(.8);opacity:.2}100%{transform:none;opacity:1}}
.cd small{display:block;margin-top:4px;font:800 .72rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:34px}

/* ─────────── 5 · Confirmar ─────────── */
.rsvp__chip{display:flex;align-items:center;gap:.55em;width:max-content;max-width:100%;margin:14px auto 0;padding:.5em 1.2em;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2.5px var(--blue-2);font:800 1rem var(--font-body);color:var(--blue-deep)}
.rsvp__chip svg{width:1.3em;height:1.3em}
.rsvp__card{position:relative;margin-top:84px;padding:60px 22px 26px;border-radius:38px;background:#fff;box-shadow:inset 0 0 0 4px #fff,var(--shadow)}
.rsvp__card::before{content:"";position:absolute;inset:12px;border-radius:28px;border:2.5px dashed var(--blue-2);pointer-events:none}
.rsvp__lamb{position:absolute;z-index:2;top:-86px;right:26px;width:118px;animation:bob 5s ease-in-out infinite}
.form{position:relative;display:grid;gap:18px}
.field label,.choices legend{display:block;margin-bottom:7px;font:800 .95rem var(--font-body);color:var(--ink)}
.field label em{font-style:normal;font-weight:600;color:var(--ink-soft)}
.field input,.field textarea{
  width:100%;padding:.9em 1.1em;border-radius:18px;border:2.5px solid #F6D6E1;background:#FFFCFD;
  font:600 1rem/1.4 var(--font-body);transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:92px}
.field input::placeholder,.field textarea::placeholder{color:#A9A3BC;font-weight:600}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 5px rgba(62,155,219,.2)}
.field.has-error input{border-color:#E0556F;box-shadow:0 0 0 4px rgba(224,85,111,.15)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0;padding:0;margin:0}
.choices legend{grid-column:1/-1;padding:0}
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice__box{display:grid;justify-items:center;align-content:center;gap:8px;min-height:112px;padding:14px 8px;border-radius:22px;border:2.5px solid #E6EAF4;background:#fff;text-align:center;transition:border-color .2s,background .2s,transform .25s var(--ease-back),box-shadow .2s}
.choice__box svg{width:40px;height:36px;transition:transform .35s var(--ease-back)}
.choice--yes svg{color:var(--pink)}
.choice--no svg{width:60px;height:30px}
.choice__box b{font-size:1rem;line-height:1.15}
.choice:hover .choice__box{transform:translateY(-2px)}
.choice input:checked+.choice__box{transform:translateY(-3px) scale(1.02)}
.choice--yes input:checked+.choice__box{border-color:var(--pink);background:var(--pink-3);box-shadow:0 10px 18px -10px rgba(240,112,154,.7)}
.choice--no input:checked+.choice__box{border-color:var(--blue);background:var(--blue-3);box-shadow:0 10px 18px -10px rgba(62,155,219,.7)}
.choice input:checked+.choice__box svg{transform:scale(1.2) rotate(-6deg)}
.choice input:focus-visible+.choice__box{outline:3px solid var(--blue);outline-offset:3px}
.choices.has-error .choice__box{border-color:#E0556F}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form__msg{min-height:1.4em;margin:-4px 0 -2px;font-weight:700;font-size:.95rem;color:#C93B58;text-align:center}
.form .btn{width:100%}
.form .btn[disabled]{opacity:.75;cursor:progress;transform:none}
.form .btn.is-loading .ico{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.done{position:relative;display:grid;justify-items:center;gap:10px;padding:14px 4px 6px;text-align:center;animation:fade-up .7s var(--ease) both}
.done__check{width:84px;color:var(--pink);stroke-dasharray:160;stroke-dashoffset:160;animation:draw 1s .15s ease forwards}
.done__check circle,.done__check path{stroke-dasharray:160;stroke-dashoffset:160;animation:draw .9s .1s ease forwards}
.done__check path{animation-delay:.55s}
.done.is-no .done__check{color:var(--blue)}
@keyframes draw{to{stroke-dashoffset:0}}
.done h3{font-size:2.6rem;color:var(--ink)}
.done p{max-width:26ch;font-size:1.08rem;font-weight:600;color:var(--ink-soft)}
.link{margin-top:6px;border:0;background:none;cursor:pointer;font:800 .95rem var(--font-body);color:var(--blue-deep);text-decoration:underline;text-underline-offset:4px}

/* ─────────── 6 · Despedida ─────────── */
.bye{min-height:80svh;padding-bottom:140px;text-align:center}
.steps{display:flex;justify-content:center;gap:12px;margin-bottom:10px}
.steps svg{fill:currentColor;width:32px;rotate:var(--rot,12deg);opacity:.18;animation:step 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .42s)}
.steps svg:nth-child(odd){--rot:-12deg;translate:0 12px}
.steps svg:nth-child(even){--rot:12deg}
@keyframes step{0%,100%{opacity:.14;transform:scale(.85)}18%,40%{opacity:1;transform:scale(1)}}
.bye__title{font-size:clamp(3.6rem,19vw,7.4rem);color:var(--pink);text-shadow:0 5px 0 rgba(255,255,255,.95),0 12px 16px rgba(60,40,120,.14);padding:.06em .14em .14em}
.bye__text{margin-top:.3em;font-size:1.2rem;font-weight:700;color:var(--ink-soft)}
.bye__bears{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin-top:26px}
.bye__bears .bear{width:min(42vw,214px)}
.bye__bears .bear+.bear{animation-delay:-2.4s}
.bye__sign{margin-top:26px;font-size:2rem;color:var(--ink-soft)}
.bye__sign strong{font-weight:700}
.bye__sign strong:first-of-type{color:var(--pink-deep)}
.bye__sign strong:last-of-type{color:var(--blue-deep)}

/* ─────────── Pantallas grandes ─────────── */
@media (min-width:760px){
  .hero__bears{margin-top:40px}
  .bear{max-width:230px}
  .hero__q{width:96px;height:100px;margin-bottom:80px}
  .beat{width:60px}
  .bet__grid{grid-template-columns:1fr 210px 1fr;align-items:center;gap:26px;margin-top:120px}
  .bet__mid .hand{font-size:2rem}
  .ticket{grid-template-columns:260px 1fr}
  .ticket__info{border-top:0;border-left:3px dashed var(--pink-2);padding:22px 36px;align-self:center}
  .rsvp__card{padding:64px 38px 34px}
  .bye__bears .bear{width:230px}
  .fl--balloon{width:62px}.fl--m{width:60px}.fl--s{width:44px}
  .fl--rainbow{width:180px}
  .verse__moon{width:116px;right:-30px}
}

/* ─────────── Menos movimiento ─────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal{translate:none;scale:none}
  .par{transform:none!important}
}

/* retardos de entrada del título */
.title__top{--base:100ms}
.title__big{--base:750ms}

/* escritorio: los ositos flanquean el título */
@media (min-width:1000px) and (min-height:640px){
  .hero__inner{display:grid;grid-template-columns:1fr minmax(0,720px) 1fr;justify-items:center;align-items:center;column-gap:16px}
  .hero__inner>*{grid-column:2}
  .hero__bears{display:contents}
  .hero__q{display:none}
  .hero__bears .bear{grid-row:1/span 6;align-self:center;max-width:250px}
  .hero__bears .bear:first-child{grid-column:1;justify-self:end}
  .hero__bears .bear:last-child{grid-column:3;justify-self:start}
}


/* ═════════ Más fondo: capas decorativas ═════════ */
.bg__blob--lav{--c:#D9C8FA;width:58vmax;height:58vmax;right:-18vmax;bottom:-28vmax;opacity:.65;animation-delay:-5s}
.bg__blob--mint{--c:#C3EDDA;width:50vmax;height:50vmax;left:-20vmax;top:38vmax;opacity:.6;animation-delay:-11s}
/* lunares rosa y celeste, más presentes en los bordes que en el centro */
.bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;
  background-image:radial-gradient(circle,rgba(240,112,154,.6) 2.4px,transparent 3px),radial-gradient(circle,rgba(62,155,219,.55) 2.4px,transparent 3px);
  background-size:56px 56px;background-position:0 0,28px 28px;
}

.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.ambient__stars{position:absolute;inset:0}
.tw{position:absolute;left:var(--x);top:var(--y);width:var(--s,14px);color:var(--c,#E8B04A);animation:twinkle-o var(--k,3s) ease-in-out var(--d,0s) infinite}
@keyframes twinkle-o{0%,100%{opacity:.2}50%{opacity:1}}
.tw--dot{height:var(--s,6px);border-radius:50%;background:var(--c);opacity:.4;animation:none}
.drift{position:absolute;left:0;top:var(--y);width:var(--w,200px);opacity:.72;animation:cloud-drift var(--dur,120s) linear var(--del,0s) infinite;will-change:transform}
.rise{position:absolute;left:var(--x);bottom:-150px;width:var(--s,50px);opacity:.78;animation:rise var(--dur,50s) linear var(--del,0s) infinite;will-change:transform}
.rise svg{display:block;width:100%}
/* subida + vaivén en una sola animación (una capa por globo) */
@keyframes rise{
  0%{transform:translate3d(0,0,0) rotate(-4deg)}
  25%{transform:translate3d(14px,calc(-25vh - 82px),0) rotate(4deg)}
  50%{transform:translate3d(-14px,calc(-50vh - 165px),0) rotate(-4deg)}
  75%{transform:translate3d(14px,calc(-75vh - 248px),0) rotate(4deg)}
  100%{transform:translate3d(0,calc(-100vh - 330px),0) rotate(-4deg)}
}

/* banderines */
.garland{position:absolute;top:0;left:0;right:0;height:0;z-index:2;pointer-events:none}
.garland svg{display:block;overflow:visible;filter:drop-shadow(0 4px 4px rgba(80,60,120,.16))}
.flag path{transform-box:fill-box;transform-origin:50% 0;animation:flag 3.4s ease-in-out var(--d,0s) infinite alternate}
@keyframes flag{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}

/* animalitos que se asoman por los costados */
.peek{position:absolute;top:var(--y);width:var(--w,120px);pointer-events:none}
.peek--l{left:0;translate:-54% 0;rotate:-6deg}
.peek--r{right:0;translate:54% 0;rotate:6deg}
.peek svg{display:block;width:100%;animation:peekaboo 7s ease-in-out infinite alternate}
.peek--r svg{--dir:-1;animation-delay:-3s}
@keyframes peekaboo{from{transform:translateX(0)}to{transform:translateX(calc(var(--dx,22%) * var(--dir,1)))}}

/* objetos nuevos */
.fl--duck{width:60px}.fl--bottle{width:32px}.fl--rattle{width:36px}.fl--pacifier{width:50px}
.fl--hab{width:74px}.fl--moon{width:92px}.fl--heart{width:26px}
.fl--rainbow-xl{width:min(120vw,840px);opacity:.36;translate:-50% 0;animation:none;filter:none}

/* pentagrama entre escenas */
.staff{position:relative;z-index:1;width:min(100% - 32px,900px);margin:-6px auto -6px}
.staff>svg:first-child{display:block;width:100%;height:auto}
.staff path{fill:none;stroke:var(--pink-2);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease)}
.staff path:nth-child(even){stroke:var(--blue-2)}
.staff.in path{stroke-dashoffset:0}
.staff path:nth-child(2){transition-delay:.12s}.staff path:nth-child(3){transition-delay:.24s}.staff path:nth-child(4){transition-delay:.36s}.staff path:nth-child(5){transition-delay:.48s}
.staff .n{position:absolute;width:24px;opacity:0;transition:opacity .8s ease 1.4s}
.staff.in .n{opacity:1;animation:bob 3s ease-in-out infinite}
.staff .n1{left:12%;top:-6px}.staff .n2{left:36%;top:2px;width:30px;animation-delay:-.6s}.staff .n3{left:60%;top:-8px;animation-delay:-1.2s}.staff .n4{left:84%;top:0;width:30px;animation-delay:-1.8s}

@media (min-width:760px){
  .fl--duck{width:84px}.fl--bottle{width:44px}.fl--rattle{width:48px}.fl--pacifier{width:68px}.fl--hab{width:104px}.fl--moon{width:124px}.fl--heart{width:34px}
  .peek{--w:170px}
}
@media (prefers-reduced-motion:reduce){
  .rise,.drift{display:none}
}

/* rendimiento: los stickers que se mueven llevan solo contorno + una sombra */
.fl.art,.peek .art{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 6px 6px rgba(80,60,120,.2))}


/* ═════════ Rendimiento ═════════ */
/* Solo se anima la decoración de las escenas que se están viendo (clase .live, la pone el JS). */
.scene:not(.live) :is(.fl,.peek svg,.twinkle-l,.beat,.bear,.item,.card__animal,.rsvp__lamb,.verse__moon,.verse__cloud,.verse__star,.musicnote svg,.steps svg,.staff .n,.flag path,.btn__shine::after){animation-play-state:paused}

/* Modo liviano: lo activa el JS si el equipo no sostiene los cuadros por segundo. */
.lite .ambient{display:none}
.lite .bg::after,.lite .bg::before{display:none}
.lite .bg__blob{animation:none}
.lite :is(.fl,.peek svg,.twinkle-l,.beat,.bear,.item,.card__animal,.rsvp__lamb,.verse__moon,.verse__cloud,.verse__star,.musicnote svg,.steps svg,.staff .n,.flag path,.btn__shine::after,.eq i,.scroll-cue i::after){animation:none}
.lite :is(.art,.sticker,.fl.art,.peek .art){filter:none}
.lite .rsvp__card,.lite .verse__card,.lite .ticket,.lite .card,.lite .cd{box-shadow:inset 0 0 0 4px #fff}