@charset "UTF-8";
/* FORGITO · Pedido 02 · Revelación Yenifer & Luis · v3
   Concepto: dos posibilidades, una sola respuesta. El círculo partido
   (mitad celeste, mitad rosa) es el sello del misterio y se repite como
   firma visual: sello del sobre, marcadores, favicon. */

@font-face{font-family:'Fraunces';src:url(assets/fonts/fraunces.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(assets/fonts/fraunces-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(assets/fonts/instrument-sans.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --paper:#f6f1e9;--paper-2:#efe7da;--card:#fffbf5;
  --ink:#2b2838;--ink-soft:#5d5866;--line:#ddd2c3;
  --blue:#d3e3ef;--blue-mid:#a9c7de;--blue-ink:#2c5272;
  --rose:#f5dbe1;--rose-mid:#e8b4c1;--rose-ink:#893c55;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  --gutter:max(22px,calc((100% - 1080px)/2));
  --radius:22px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:380;font-variation-settings:'SOFT' 100,'WONK' 0;line-height:1.02;letter-spacing:-.02em}
em{font-style:italic;font-variation-settings:'SOFT' 100,'WONK' 1}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:4px;border-radius:6px}
::selection{background:var(--rose)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:50;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:10px}
.skip:focus{top:12px}

/* Sello partido reutilizable */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--blue-mid) 50%,var(--rose-mid) 50%);flex:none}

.kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.tag{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:28px}
.tag-light{color:#cfc8d6}

/* Cabecera */
.monogram{font:400 24px/1 var(--serif);letter-spacing:.02em;color:var(--ink);text-transform:none}
.monogram i{font-size:.62em;margin:0 .14em;color:var(--rose-ink)}

/* Portada */
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding:56px var(--gutter) 80px;min-height:min(780px,calc(100svh - 68px))}
.hero h1{font-size:clamp(52px,7.4vw,104px);margin:18px 0 22px;font-weight:360}
.hero h1 em{color:var(--rose-ink)}
.hero h1 .q{color:var(--blue-ink)}
.intro{font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:30ch}

.stage{--moon:420px;--env-w:300px;--env-h:200px;position:relative;display:flex;flex-direction:column;align-items:center}
.moon{position:absolute;top:0;left:50%;width:var(--moon);aspect-ratio:1;transform:translateX(-50%);display:flex;border-radius:50%;overflow:hidden;z-index:0;opacity:.9}
.moon span{flex:1;background:var(--blue)}
.moon span+span{background:var(--rose)}
.letter-scene{position:relative;z-index:1;padding-top:calc((var(--moon) - var(--env-h))/2)}

/* Sobre: solo se animan transform y opacity (GPU). Sin filter ni box-shadow animados. */
.envelope{position:relative;display:block;width:var(--env-w);height:var(--env-h);padding:0;border:0;background:none;transform:rotate(-4deg);transition:transform .9s cubic-bezier(.22,1,.36,1);perspective:900px}
@media (hover:hover){.envelope:hover{transform:rotate(-2deg) translateY(-4px)}}
.envelope-back{position:absolute;inset:0;background:#e3d3bf;border-radius:6px;z-index:1;box-shadow:0 22px 34px -14px rgba(43,40,56,.32),0 4px 10px rgba(43,40,56,.08)}
.envelope-front{position:absolute;inset:0;z-index:4;border-radius:6px;background:#efe3d2;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.envelope-front::after{content:'';position:absolute;inset:0;background:#f4eadc;clip-path:polygon(0 100%,50% 46%,100% 100%)}
.envelope-flap{position:absolute;inset:0;z-index:5;background:#ead9c3;clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:50% 0;will-change:transform}
.letter{position:absolute;left:6%;top:5%;width:88%;height:90%;z-index:2;background:var(--card);border-radius:4px;box-shadow:0 10px 24px -8px rgba(43,40,56,.22),0 0 0 1px rgba(43,40,56,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;will-change:transform}
.letter small{font-size:10px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.letter b{font:400 32px/1 var(--serif);font-variation-settings:'SOFT' 100;color:var(--ink)}
.letter b i{color:var(--rose-ink);font-size:.8em}
.letter-rule{width:42px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--blue-mid) 50%,var(--rose-mid) 50%)}
.seal{position:absolute;z-index:6;left:50%;top:58%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:linear-gradient(90deg,var(--blue-mid) 50%,var(--rose-mid) 50%);box-shadow:0 0 0 4px rgba(255,251,245,.55),0 4px 10px rgba(43,40,56,.18);display:grid;place-items:center}
.seal span{font:500 30px/1 var(--serif);color:var(--ink);transform:translateY(-1px)}
.seal::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ink);opacity:0;animation:ping 2.6s ease-out 1.2s infinite}
@keyframes ping{0%{transform:scale(1);opacity:.35}80%,100%{transform:scale(1.6);opacity:0}}

/* Secuencia de apertura (≈1,3 s):
   0 ms sello · 60 ms solapa · 380 ms la carta sube detrás · 800 ms pasa al frente y se asienta */
.is-open .envelope{transform:rotate(0)}
.is-open .seal{animation:seal-out .32s cubic-bezier(.4,0,.2,1) forwards}
.is-open .seal::after{animation:none;opacity:0}
.is-open .envelope-flap{animation:flap-open .5s cubic-bezier(.45,0,.25,1) .06s forwards}
.is-open .letter{animation:letter-out 1s .38s forwards}
@keyframes seal-out{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(.4);opacity:0}}
@keyframes flap-open{0%{transform:rotateX(0);z-index:5}49.9%{z-index:5}50%{z-index:1}100%{transform:rotateX(180deg);z-index:1}}
@keyframes letter-out{
  0%{transform:translateY(0);z-index:2;animation-timing-function:cubic-bezier(.33,0,.2,1)}
  45%{transform:translateY(-86%);z-index:2;animation-timing-function:cubic-bezier(.45,0,.2,1)}
  45.1%{z-index:8}
  100%{transform:translateY(-32%) scale(1.1) rotate(-1.5deg);z-index:8}
}
.envelope-caption{position:relative;z-index:1;margin-top:calc((var(--moon) - var(--env-h))/2 + 22px);font:italic 400 21px/1.3 var(--serif);text-align:center}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 26px;border-radius:999px;border:0;background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;letter-spacing:.01em;margin-top:16px;transition:transform .2s,background .2s;position:relative;z-index:1}
.pill:hover{transform:translateY(-2px)}
.pill-light{background:var(--paper);color:var(--ink)}
.pill-light:hover{background:#fff}

/* Bloques */
.block{padding:96px var(--gutter)}
.block h2{font-size:clamp(46px,6.4vw,84px)}
.block h2 em{color:var(--rose-ink)}

.invitation{text-align:center;border-top:1px solid var(--line);margin:0 var(--gutter);padding-inline:0}
.invitation-main{max-width:760px;margin:0 auto}
.invitation h2{margin:14px 0 18px}
.invitation h2 em{color:var(--blue-ink)}
.full-names{font-size:15px;color:var(--ink-soft)}
.large-copy{font:400 clamp(24px,3vw,34px)/1.4 var(--serif);font-variation-settings:'SOFT' 100;margin:44px auto 22px;max-width:22em;text-wrap:balance}
.body-copy{font-size:17px;line-height:1.75;color:var(--ink-soft);max-width:34em;margin:0 auto;text-wrap:pretty}
.body-copy strong{color:var(--ink);font-weight:600}
.secret-note{display:inline-flex;align-items:center;gap:10px;margin-top:36px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--ink-soft);background:var(--card)}

.gathering{background:var(--paper-2)}
.gathering h2{margin-bottom:44px}
.ticket{position:relative;display:grid;grid-template-columns:1fr auto 1fr;background:var(--card);border-radius:var(--radius);box-shadow:0 1px 0 rgba(43,40,56,.05),0 20px 40px -24px rgba(43,40,56,.22)}
.ticket-half{padding:36px 40px 30px}
.ticket-cut{position:relative;width:0;border-left:2px dashed var(--line);margin:26px 0}
.ticket-cut::before,.ticket-cut::after{content:'';position:absolute;left:-15px;width:28px;height:28px;border-radius:50%;background:var(--paper-2)}
.ticket-cut::before{top:-40px}.ticket-cut::after{bottom:-40px}
.date-display{display:flex;align-items:center;gap:18px;margin:14px 0 6px}
.day{font:300 104px/.9 var(--serif);font-variation-settings:'SOFT' 100;letter-spacing:-.04em;color:var(--blue-ink)}
.date-meta{display:flex;flex-direction:column;gap:2px;font-size:17px}
.date-meta strong{font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.time{font:400 26px/1.3 var(--serif);margin-top:8px}
.time span{font:400 15px var(--sans);color:var(--ink-soft)}
.ticket-place h3{font-size:36px;margin:14px 0 10px;color:var(--rose-ink)}
.ticket-place address{font-style:normal;font-size:18px;line-height:1.55}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.link-button{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid rgba(43,40,56,.22);background:transparent;font-size:14px;font-weight:600;transition:background .2s,border-color .2s}
.link-button:hover{background:var(--paper);border-color:var(--ink)}
.link-button.strong{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.link-button.strong:hover{background:#403b52}
.alt-link{display:inline-block;margin-top:12px;font-size:14px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;min-height:24px}
.alt-link:hover{color:var(--ink)}
.feedback{font-size:14px;color:var(--ink-soft);min-height:22px;margin-top:10px}

.countdown-wrap{margin-top:56px;text-align:center}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:620px;margin:18px auto 0;font-variant-numeric:tabular-nums}
.countdown>div{background:var(--card);border-radius:18px;padding:18px 6px 14px;display:flex;flex-direction:column;align-items:center;gap:4px}
.countdown span{font:350 52px/1 var(--serif);font-variation-settings:'SOFT' 100}
.countdown small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* Corazonada */
.guess{text-align:center}
.guess-heading p{font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:30em;margin:22px auto 0;text-wrap:balance}

@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.fine{font-size:14px;color:var(--ink-soft);margin-top:18px}

/* Confirmación */
.rsvp{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);text-align:center}
.rsvp-moon{position:absolute;left:50%;top:-230px;width:420px;height:420px;transform:translateX(-50%);display:flex;border-radius:50%;overflow:hidden;opacity:.14}
.rsvp-moon span{flex:1;background:var(--blue-mid)}.rsvp-moon span+span{background:var(--rose-mid)}
.rsvp-inner{position:relative}
.rsvp h2 em{color:var(--rose-mid)}
.rsvp-copy{font-size:17px;line-height:1.7;color:#d9d3df;margin:22px 0 14px}
.rsvp .pill{font-size:16px;min-height:58px;padding:16px 30px}
.rsvp-note{font-size:14px;color:#b9b2c2;margin-top:14px}
.closing{margin-top:72px;padding-top:56px;border-top:1px solid rgba(246,241,233,.16)}
.closing p{font:400 clamp(28px,3.4vw,38px)/1.3 var(--serif);font-variation-settings:'SOFT' 100}
.closing p em{color:var(--blue-mid)}
.closing span{display:block;margin-top:18px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#cfc8d6}

footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px var(--gutter) calc(96px + env(safe-area-inset-bottom));font-size:13px;color:var(--ink-soft)}
.monogram.small{font-size:20px}
.forgito{font-weight:700;letter-spacing:.12em;font-size:11px;color:var(--ink)}

/* Música */
.music{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:30;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:rgba(255,251,245,.94);box-shadow:0 6px 20px rgba(43,40,56,.14);display:grid;place-items:center}
.music-bars{display:flex;align-items:flex-end;gap:3px;height:18px}
.music-bars i{width:3px;height:18px;border-radius:2px;background:var(--ink);transform-origin:50% 100%;transform:scaleY(.28);transition:transform .3s}
.music:not(.is-playing) .music-bars i:nth-child(2){transform:scaleY(.5)}
.music:not(.is-playing) .music-bars i:nth-child(3){transform:scaleY(.67)}
.music:not(.is-playing) .music-bars i:nth-child(4){transform:scaleY(.39)}
.music.is-playing .music-bars i{animation:eq 1s ease-in-out infinite}
.music.is-playing .music-bars i:nth-child(2){animation-delay:-.3s}
.music.is-playing .music-bars i:nth-child(3){animation-delay:-.6s}
.music.is-playing .music-bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}

/* Aparición suave */
.motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.motion .reveal.visible{opacity:1;transform:none}

/* Móvil */
@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center;gap:8px;padding-top:36px;padding-bottom:64px;min-height:0}
  .hero h1{font-size:clamp(46px,13.5vw,68px);margin:14px 0 16px}
  .intro{font-size:16px;margin:0 auto}
  .stage{--moon:min(320px,84vw);--env-w:min(268px,74vw);--env-h:calc(var(--env-w)*.66);margin-top:44px}
  .letter b{font-size:27px}
  .letter small{font-size:9px}
  .seal{width:52px;height:52px;margin:-26px 0 0 -26px}
  .seal span{font-size:26px}
  .envelope-caption{font-size:19px}
  .rsvp-moon{width:280px;height:280px;top:-180px}
  .block{padding:72px var(--gutter)}
  .invitation{padding-inline:0}
  .large-copy{margin-top:34px}
  .body-copy{font-size:16px}
  .secret-note{font-size:13px}
  .gathering h2{margin-bottom:32px}
  .ticket{grid-template-columns:1fr}
  .ticket-half{padding:28px 24px 22px}
  .ticket-cut{width:auto;height:0;border-left:0;border-top:2px dashed var(--line);margin:0 18px}
  .ticket-cut::before,.ticket-cut::after{top:-15px;bottom:auto}
  .ticket-cut::before{left:-32px}.ticket-cut::after{left:auto;right:-32px}
  .day{font-size:88px}
  .ticket-place h3{font-size:32px}
  .actions .link-button{flex:1 1 auto;justify-content:center}
  .countdown-wrap{margin-top:44px}
  .countdown{gap:8px}
  .countdown>div{border-radius:14px;padding:14px 2px 10px}
  .countdown span{font-size:38px}
  .countdown small{font-size:11px;letter-spacing:.08em}
  .guess-heading p{font-size:16px}
  .rsvp .pill{width:100%;max-width:360px}
  .closing{margin-top:56px;padding-top:44px}
}
@media (max-width:360px){
  .countdown span{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .seal::after{display:none}
  .motion .reveal{opacity:1;transform:none}
}

/* v3.2 · Rasca y descubre */
.scratch{position:relative;margin:8px -14px 0;padding:6px 14px 12px;border-radius:18px}
.scratch-foil{position:absolute;inset:0;width:100%;height:100%;border-radius:18px;touch-action:pan-y;cursor:grab;transition:opacity .7s ease}
.scratch-foil:active{cursor:grabbing}
.scratch.is-done .scratch-foil{opacity:0;pointer-events:none}
.scratch-skip{display:block;margin-top:6px;padding:8px 0;min-height:40px;border:0;background:none;font-size:14px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.scratch-skip:hover{color:var(--ink)}

/* v3.2 · Ráfaga de puntos (corazonada y fecha) */
.burst{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:3}
.burst i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;will-change:transform,opacity}

/* ===================== v4 · Detalles de celebración =====================
   Pocas piezas, cada una con un papel: banderines (fiesta), globos (la duda
   celeste/rosa), huellitas (alguien
   viene en camino) y el corazón partido de la corazonada. Todo se anima solo
   con transform/opacity. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.hero{position:relative}

/* Banderines */
.bunting{position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:70px;pointer-events:none;z-index:2}
.bunting svg.string{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bunting .string path{fill:none;stroke:var(--ink-soft);stroke-width:1.2;opacity:.55;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)}
.bunting.go .string path{stroke-dashoffset:0}
.flag{position:absolute;top:0;left:0;width:var(--fw);height:var(--fh);margin-left:calc(var(--fw)/-2);transform-origin:50% 0;transform:rotate(var(--rot));opacity:0;will-change:transform}
.flag::before{content:'';position:absolute;inset:0;background:var(--c);clip-path:polygon(0 0,100% 0,50% 100%)}
.flag::after{content:'';position:absolute;left:50%;top:22%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#fff;opacity:.7}
.bunting.go .flag{animation:flag-in .95s cubic-bezier(.2,.8,.3,1) calc(.25s + var(--i)*45ms) both,breeze 7s ease-in-out calc(1.6s + var(--i)*90ms) infinite}
@keyframes flag-in{0%{opacity:0;transform:translateY(-10px) rotate(calc(var(--rot) + 40deg)) scaleY(.4)}50%{opacity:1;transform:rotate(calc(var(--rot) - 14deg))}75%{transform:rotate(calc(var(--rot) + 6deg))}100%{opacity:1;transform:rotate(var(--rot))}}
@keyframes breeze{0%,72%,100%{opacity:1;transform:rotate(var(--rot))}80%{opacity:1;transform:rotate(calc(var(--rot) + 7deg))}88%{opacity:1;transform:rotate(calc(var(--rot) - 4deg))}94%{opacity:1;transform:rotate(calc(var(--rot) + 1.5deg))}}
.bunting-dark .string path{stroke:#cfc8d6;opacity:.35}
.hero{padding-top:84px}

/* Decoración alrededor del sobre */
.decor{--bw:64px;position:absolute;left:50%;top:0;width:var(--moon);height:var(--moon);transform:translateX(-50%);pointer-events:none;z-index:2}
.balloon{position:absolute;width:var(--bw,54px);aspect-ratio:1/2;opacity:0;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.balloon svg{display:block;width:100%;height:100%;transform-origin:50% 60%;animation:float 6.5s ease-in-out infinite}
.b-blue{left:-24px;top:-18px;color:var(--blue-mid)}
.b-rose{right:-20px;top:26px;color:var(--rose-mid);--bw:54px}
.b-rose svg{animation-duration:7.4s;animation-delay:-2s}
.hero-ready .balloon{animation:rise 1.6s cubic-bezier(.2,.8,.2,1) .35s both}
.hero-ready .b-rose{animation-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(90px) scale(.8)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.is-open .balloon{translate:0 -22px;transition:translate 1.6s cubic-bezier(.2,.8,.2,1)}

.twinkle{position:absolute;width:14px;height:14px;opacity:0}
.twinkle svg{display:block;width:100%;height:100%}
.t1{left:34%;top:-6%;color:var(--blue-ink)}
.t2{right:6%;bottom:22%;width:11px;height:11px;color:var(--rose-ink)}
.t3{left:4%;bottom:34%;width:13px;height:12px;color:var(--rose-mid)}
.hero-ready .twinkle{animation:twinkle 3.2s ease-in-out infinite}
.hero-ready .t2{animation-delay:1.1s}.hero-ready .t3{animation-delay:2.1s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%,55%{opacity:.9;transform:scale(1) rotate(20deg)}}


/* Huellitas */
.steps{position:relative;width:210px;height:222px;margin:34px auto 0}
.foot{position:absolute;left:0;top:0;width:26px;height:38px;opacity:0;--m:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--m),1) scale(.5)}
.foot:nth-of-type(odd){color:var(--blue-mid)}
.foot:nth-of-type(even){color:var(--rose-mid);--m:-1}
.foot:nth-of-type(1){--x:70px;--y:0px;--r:168deg;--n:0}
.foot:nth-of-type(2){--x:104px;--y:20px;--r:192deg;--n:1}
.foot:nth-of-type(3){--x:76px;--y:54px;--r:170deg;--n:2}
.foot:nth-of-type(4){--x:110px;--y:76px;--r:194deg;--n:3}
.foot:nth-of-type(5){--x:82px;--y:110px;--r:172deg;--n:4}
.foot:nth-of-type(6){--x:116px;--y:132px;--r:196deg;--n:5}
.steps.in .foot{animation:step .55s cubic-bezier(.3,1.5,.5,1) calc(var(--n)*.38s) forwards}
@keyframes step{0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--m),1) scale(.4)}100%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--m),1) scale(1)}}
.steps-label{position:absolute;left:-20px;right:-20px;bottom:0;font:italic 400 17px/1.3 var(--serif);color:var(--ink-soft);opacity:0;transition:opacity .8s 2.4s}
.steps.in .steps-label{opacity:1}

/* Osito con la corazonada */

/* Ráfaga con corazones y estrellas */
.burst i{width:15px;height:15px;left:-7.5px;top:-7.5px;border-radius:0;background:none!important}
.burst i svg{display:block;width:100%;height:100%}

@media (max-width:820px){
  .hero{padding-top:58px}
  .bunting{height:56px}
  .decor{--bw:50px}
  .b-blue{left:-12px;top:-26px}
  .b-rose{right:-12px;top:10px;--bw:42px}
  .steps{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .balloon,.twinkle,.flag,.foot,.steps-label{opacity:1!important}
  .twinkle{opacity:.8!important}
  .foot{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--m),1)}
  .bunting .string path{stroke-dashoffset:0}
}

/* Pausar animaciones decorativas fuera de pantalla */
.idle,.idle *{animation-play-state:paused!important}

/* ===================== v4.1 · Tu corazonada: corazón partido =====================
   El corazón celeste|rosa es la pieza central. Cada mitad es un botón (junto con
   su etiqueta). Al elegir, el color inunda todo el corazón; el "?" se queda. */
.guess-heading p{max-width:27em}
.picker{--hs:min(300px,74vw);position:relative;display:grid;grid-template-columns:1fr 1fr;width:calc(var(--hs) + 80px);max-width:100%;margin:40px auto 0}
.heart{position:absolute;left:50%;top:0;width:var(--hs);aspect-ratio:100/90;margin-left:calc(var(--hs)/-2);-webkit-mask:url(assets/heart.svg) center/100% 100% no-repeat;mask:url(assets/heart.svg) center/100% 100% no-repeat;pointer-events:none;transform-origin:50% 60%;animation:beat 2.8s ease-in-out infinite;z-index:1}
.heart-shadow{position:absolute;left:50%;top:calc(var(--hs)*.9 - 6px);width:calc(var(--hs)*.5);height:16px;margin-left:calc(var(--hs)*-.25);border-radius:50%;background:radial-gradient(closest-side,rgba(43,40,56,.18),transparent);pointer-events:none}
.heart-half{position:absolute;top:0;bottom:0;width:50%}
.half-boy{left:0;background:var(--blue-mid)}
.half-girl{right:0;background:var(--rose-mid)}
.heart-half::after{content:'';position:absolute;inset:0;background:#fff;opacity:0}
.picker:not(.has-choice) .half-boy::after{animation:invite 3.2s ease-in-out infinite}
.picker:not(.has-choice) .half-girl::after{animation:invite 3.2s ease-in-out 1.6s infinite}
@keyframes invite{0%,60%,100%{opacity:0}25%{opacity:.28}}
.heart-fill{position:absolute;inset:0;transform:scaleX(0);transition:transform .85s cubic-bezier(.65,0,.35,1);will-change:transform}
.fill-boy{background:var(--blue-mid);transform-origin:0 50%}
.fill-girl{background:var(--rose-mid);transform-origin:100% 50%}
.picker[data-state=boy] .fill-boy,.picker[data-state=girl] .fill-girl{transform:scaleX(1);z-index:1}
.heart-shine{position:absolute;left:15%;top:13%;width:20%;height:13%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));transform:rotate(-35deg);z-index:2}
.heart-q{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:10%;z-index:3;font:400 calc(var(--hs)*.4)/1 var(--serif);font-variation-settings:'SOFT' 100,'WONK' 1;color:#fff}
.heart.thump{animation:thump .6s cubic-bezier(.3,1.4,.5,1),beat 2.8s ease-in-out .6s infinite}
@keyframes beat{0%,100%{transform:scale(1)}8%{transform:scale(1.045)}16%{transform:scale(1)}24%{transform:scale(1.03)}32%{transform:scale(1)}}
@keyframes thump{0%{transform:scale(1)}35%{transform:scale(1.13)}65%{transform:scale(.97)}100%{transform:scale(1)}}

.pick{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hs)*.9 + 22px) 4px 6px;border:0;background:none;border-radius:20px;transition:opacity .35s}
.pick-boy{align-items:flex-start;text-align:left;color:var(--blue-ink)}
.pick-girl{align-items:flex-end;text-align:right;color:var(--rose-ink)}
.pick-pre{font-size:14px;font-weight:500;color:var(--ink-soft)}
.pick-label{position:relative;font:italic 400 clamp(40px,6vw,52px)/1.05 var(--serif);font-variation-settings:'SOFT' 100,'WONK' 1}
.pick-label::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:2px;background:currentColor;transform:scaleX(0);transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.pick-boy .pick-label::after{transform-origin:0 50%}.pick-girl .pick-label::after{transform-origin:100% 50%}
.pick[aria-pressed=true] .pick-label::after{transform:scaleX(1)}
.picker.has-choice .pick[aria-pressed=false]{opacity:.45}
.pick:focus-visible{outline-offset:2px}
@media (hover:hover){.pick:hover{opacity:1!important}.pick:hover .pick-label::after{transform:scaleX(.35)}.pick[aria-pressed=true]:hover .pick-label::after{transform:scaleX(1)}}

.gift{max-width:520px;margin:30px auto 0;min-height:132px;display:grid;place-items:center;padding:24px 26px;border-radius:var(--radius);border:1.5px dashed var(--line);text-align:center;transition:background .4s,border-color .4s}
.gift-empty{font:italic 400 20px/1.45 var(--serif);color:var(--ink-soft)}
.gift[data-state=boy]{background:var(--card);border:1.5px solid var(--blue-mid);--accent:var(--blue-ink)}
.gift[data-state=girl]{background:var(--card);border:1.5px solid var(--rose-mid);--accent:var(--rose-ink)}
.gift-body{display:flex;flex-direction:column;align-items:center;gap:6px}
.gift-body .kicker{color:var(--accent)}
.gift-item{font:400 clamp(34px,5vw,46px)/1.05 var(--serif);font-variation-settings:'SOFT' 100;color:var(--accent);margin:2px 0 4px}
.gift-body p:last-child{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:28em}
.gift.pop .gift-body{animation:pop .5s cubic-bezier(.2,.9,.3,1.25)}
@media (max-width:820px){
  .picker{margin-top:30px;width:min(calc(var(--hs) + 40px),100%)}
  .pick-pre{font-size:13px}
  .gift{margin-top:24px;padding:22px 18px}
  .gift-empty{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.heart{animation:none}}

/* v4.2 · Sin cabecera: los banderines cuelgan de borde a borde y reaccionan al scroll y al toque */
.bunting-top{left:0;right:0;height:130px;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.flag{rotate:calc(var(--sway,0deg) * var(--k,1))}
.hero{padding-top:120px}
@media (max-width:820px){.bunting-top{height:96px}.hero{padding-top:92px}}

/* v4.3 · Fecha visible en la portada + rasca «spoiler» */
.spoiler{margin:40px auto 0;max-width:340px}
.spoiler-ask{font:italic 400 19px/1.3 var(--serif);color:var(--ink-soft);margin-bottom:12px}
.spoiler .scratch{margin:0;padding:0;min-height:128px;display:grid;place-items:center;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.spoiler-answer{display:flex;flex-direction:column;gap:6px;padding:22px 20px}
.spoiler-answer b{font:italic 400 30px/1.1 var(--serif);font-variation-settings:'SOFT' 100,'WONK' 1;color:var(--rose-ink)}
.spoiler-answer span{font-size:15px;line-height:1.5;color:var(--ink-soft)}
.spoiler .scratch-skip{margin:6px auto 0}
@media (max-width:820px){.hero{padding-top:84px}.stage{margin-top:58px}}
/* Teléfonos bajos: todo el sobre y el botón dentro de la primera pantalla */
@media (max-width:820px) and (max-height:780px){
  .hero{padding-top:74px}
  .hero h1{font-size:clamp(42px,12vw,56px);margin:10px 0 12px}
  .intro{font-size:15px}
  .stage{--moon:min(268px,74vw);--env-w:min(226px,62vw);margin-top:50px}
  .letter b{font-size:23px}
  .envelope-caption{font-size:17px}
}
.bunting-top{overflow:hidden}.hero{overflow-x:clip}

/* v4.4 · Firma FORGITO enlazada (discreta, pero tocable) */
.made-by{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-height:44px;justify-content:center;padding:4px 0;text-align:right;color:var(--ink-soft)}
.made-line{font-size:13px}
.made-by .forgito{font-weight:700;letter-spacing:.12em;font-size:11px;color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:1px}
.made-arrow{display:inline-block;font-size:12px;color:var(--ink);transition:transform .2s}
.made-cta{font:italic 400 14px/1.2 var(--serif);color:var(--rose-ink)}
.made-by:hover .made-arrow{transform:translate(2px,-2px)}
.made-by:hover .made-cta{text-decoration:underline;text-underline-offset:3px}
.letter small.letter-q{font:italic 400 19px/1.2 var(--serif);font-variation-settings:'SOFT' 100,'WONK' 1;letter-spacing:0;text-transform:none;color:var(--rose-ink)}