/* Fiesta de Fin de Año · SNTISSSTE XLIX — navidad en guinda, dorado y crema institucionales */
:root{
  --g:#7C142B;--g2:#5C0E1F;--g3:#2f0610;--oro:#C49A67;--oro-l:#EBCF9F;--oro-m:#B17F49;--oro-o:#7E4F24;--cr:#FBF7F1;--ink:#2b1a1e;--mut:#d9bfc4;
  --foil:linear-gradient(100deg,#9a6a35,#C49A67 24%,#F6E3BC 42%,#C49A67 58%,#B17F49 78%,#EBCF9F 92%,#9a6a35);
  --f-d:"Cormorant Garamond",Georgia,serif;--f-b:"Montserrat",system-ui,sans-serif;--f-s:"Great Vibes","Brush Script MT",cursive;
}
body{background:radial-gradient(120% 60% at 50% 0,#8d1a35 0,#5C0E1F 45%,#2f0610 100%);background-attachment:fixed;color:var(--cr);font:400 16px/1.65 var(--f-b)}
main{position:relative;z-index:2}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:300;background:var(--cr);color:var(--g);padding:10px 14px;border-radius:8px}
.fx{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
:focus-visible{outline:3px solid var(--oro-l);outline-offset:3px}
@keyframes foil{to{background-position:-250% 0}}

/* ---------- Entrada: esfera ---------- */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(70% 55% at 50% 40%,#7a1630,#3a0812 70%,#1d0309);transition:opacity .9s}
.gate-in{text-align:center;padding:20px;display:flex;flex-direction:column;align-items:center}
.gate-k{font:600 .72rem var(--f-b);letter-spacing:.32em;text-transform:uppercase;color:var(--oro-l)}
.bauble{position:relative;width:240px;height:290px;margin:6px 0 0;padding:0;border:0;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cord{position:absolute;left:50%;top:0;width:2px;height:78px;margin-left:-1px;background:linear-gradient(var(--oro-o),var(--oro))}
.swing{position:absolute;left:50%;top:70px;width:0;height:0;transform-origin:0 -70px;animation:sw 3.6s ease-in-out infinite alternate}
@keyframes sw{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.cap{position:absolute;left:-19px;top:0;width:38px;height:24px;border-radius:7px 7px 3px 3px;background:var(--foil);box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:2}
.cap::before{content:"";position:absolute;left:50%;top:-9px;width:12px;height:12px;margin-left:-6px;border:2px solid var(--oro);border-radius:50%;border-bottom-color:transparent}
.ball{position:absolute;left:-100px;top:20px;width:200px;height:200px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
.half{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 33% 27%,#d94a69 0,#a41d3c 24%,#7C142B 52%,#430915 100%)}
.half::after{content:"";position:absolute;left:0;right:0;top:44%;height:12%;background:linear-gradient(180deg,#9a6a35,#F2DAB0 45%,#B17F49)}
.half.l{clip-path:inset(0 50% 0 0)}.half.r{clip-path:inset(0 0 0 50%)}
.band{display:none}
.shine{position:absolute;left:20%;top:12%;width:26%;height:15%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.7),transparent);transform:rotate(-32deg);z-index:3}
.gate-t{font:600 clamp(1.9rem,8vw,2.6rem)/1.1 var(--f-d);color:var(--cr);margin-top:8px}
.gate-guest{color:var(--mut);margin-top:4px}.gate-guest b{color:var(--oro-l);font-weight:600}
.gate-hint{margin-top:14px;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--oro);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.gate.opening .cord,.gate.opening .cap,.gate.opening .gate-in>p,.gate.opening .shine{opacity:0;transition:opacity .35s}
.gate.opening .swing{animation:none;transform:none}
.gate.opening .half{transition:transform 1.15s cubic-bezier(.5,0,.85,.45),opacity 1s .2s}
.gate.opening .half.l{transform:translateX(-120vw) rotate(-50deg)}
.gate.opening .half.r{transform:translateX(120vw) rotate(50deg)}
.gate.opening .half{opacity:0}
.gate.opening{background:radial-gradient(70% 55% at 50% 40%,#7a1630,#3a0812 70%,#1d0309)}
.gate.done{opacity:0}
.gate.opening .ball,.gate.opening .bauble{overflow:visible}

/* ---------- Portada ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:74px 20px 56px;overflow:hidden;cursor:crosshair}
.garland{position:absolute;left:0;right:0;top:0;height:40px;pointer-events:none}
.garland::before,.garland::after{content:"";position:absolute;left:0;right:0;top:0;height:40px;background:radial-gradient(circle at 50% 70%,var(--oro-l) 0 4px,rgba(235,207,159,.25) 5px 9px,transparent 10px) 0 0/36px 40px repeat-x;animation:bulbs 2.2s ease-in-out infinite}
.garland::after{background:radial-gradient(circle at 50% 70%,#fff 0 3.5px,rgba(255,255,255,.2) 4.5px 8px,transparent 9px) 18px 0/36px 40px repeat-x;animation-delay:-1.1s}
@keyframes bulbs{50%{opacity:.25}}
.crest{width:min(460px,90vw);border-radius:16px;overflow:hidden;border:2px solid var(--oro);box-shadow:0 22px 60px rgba(0,0,0,.45);background:var(--cr);padding:16px 20px}
.crest img{width:100%;height:auto;display:block}
.tree{width:104px;height:auto;margin:20px 0 4px;overflow:visible}
.t-body{fill:#3a0812}.t-line{fill:none;stroke:var(--oro);stroke-width:2;stroke-linejoin:round}
.t-star{fill:var(--oro-l);filter:drop-shadow(0 0 7px rgba(235,207,159,.9));animation:starpulse 2.4s ease-in-out infinite;transform-origin:100px 24px}
@keyframes starpulse{50%{transform:scale(1.18)}}
.t-trunk{fill:var(--oro-o)}
.t-orn circle{fill:var(--oro-l);animation:tw 2.6s ease-in-out infinite}
.t-orn circle:nth-child(3n){fill:#e8607e}.t-orn circle:nth-child(3n+1){fill:#fff6e4}
.t-orn circle:nth-child(2n){animation-delay:-1.3s}.t-orn circle:nth-child(5n){animation-delay:-.7s}
@keyframes tw{50%{opacity:.3}}
.hero-k{font:600 .78rem var(--f-b);letter-spacing:.4em;text-transform:uppercase;color:var(--oro-l)}
.hero h1{display:flex;flex-direction:column;align-items:center;margin:4px 0 6px;font-weight:600}
.scr{font:400 clamp(3.6rem,17vw,5.6rem)/.9 var(--f-s);background:var(--foil);background-size:250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 7s linear infinite;padding:4px 10px 10px}
.big{font:700 clamp(1.5rem,7.4vw,2.4rem)/1.1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--cr)}
.yr{font:700 clamp(3rem,15vw,5rem)/1 var(--f-d);letter-spacing:.12em;background:var(--foil);background-size:250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 7s linear infinite;filter:drop-shadow(0 4px 24px rgba(196,154,103,.35))}
.hero-s{color:var(--mut);font-size:.95rem;margin-top:4px}
.hero-d{display:flex;align-items:center;gap:14px;margin-top:20px;font:600 .78rem var(--f-b);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.hero-d b{padding:8px 14px;border-top:1px solid var(--oro);border-bottom:1px solid var(--oro);color:var(--oro-l)}
.guest{margin-top:18px;color:var(--mut)}.guest b{color:var(--oro-l);font-weight:600}
.hero-cta{margin-top:24px;display:inline-flex;align-items:center;min-height:48px;padding:12px 26px;border-radius:99px;text-decoration:none;font:700 .8rem var(--f-b);letter-spacing:.16em;text-transform:uppercase;color:var(--g2);background:var(--foil);background-size:250%;animation:foil 6s linear infinite;box-shadow:0 12px 30px rgba(0,0,0,.3);touch-action:manipulation}
.tap{margin-top:26px;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);animation:blink 2.6s ease-in-out infinite}

/* ---------- Secciones ---------- */
.sec{max-width:780px;margin:0 auto;padding:74px 22px;text-align:center;position:relative}
.title{font:700 clamp(2.4rem,10vw,3.4rem)/1.05 var(--f-d);color:var(--oro-l)}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--oro);margin:10px 0 28px;font-size:.9rem}
.orn span{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--oro))}.orn span:last-child{transform:scaleX(-1)}
.lead{color:var(--mut);margin:0 auto 22px;max-width:560px}.lead b{color:var(--oro-l)}
.fine{color:var(--mut);font-size:.8rem;margin-top:16px;opacity:.85}
.quote{font:500 clamp(1.45rem,5.6vw,2rem)/1.45 var(--f-d);font-style:italic;color:var(--cr);max-width:600px;margin:0 auto}
.hosts{margin-top:18px;color:var(--oro);letter-spacing:.14em;font-weight:600;font-size:.74rem;text-transform:uppercase}

.cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:480px;margin:0 auto 26px}
.cd div{padding:16px 4px 12px;border:1px solid rgba(196,154,103,.55);border-radius:12px;background:rgba(255,255,255,.05)}
.cd b{display:block;font:700 clamp(1.9rem,9vw,2.7rem)/1 var(--f-d);color:var(--oro-l)}
.cd b.tick{animation:shine .8s}@keyframes shine{0%{text-shadow:0 0 22px #fff;color:#fff}}
.cd span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:0;padding:12px 26px;border-radius:99px;text-decoration:none;font:700 .76rem var(--f-b);letter-spacing:.18em;text-transform:uppercase;color:var(--g2);background:var(--foil);background-size:250%;animation:foil 6s linear infinite;box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .15s;touch-action:manipulation}
.btn:active{transform:scale(.96)}.btn.sm{min-height:40px;padding:8px 18px;font-size:.68rem;margin-top:10px}.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--oro-l);border:1px solid var(--oro);box-shadow:none;animation:none}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;text-align:left}
.steps li{display:flex;gap:16px;align-items:flex-start;padding:18px;border:1px solid rgba(196,154,103,.4);border-radius:14px;background:rgba(255,255,255,.05)}
.steps i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 1.3rem var(--f-d);font-style:normal;color:var(--g2);background:var(--foil)}
.steps h3{font:700 1.4rem var(--f-d);color:var(--cr)}.steps p{color:var(--mut);font-size:.92rem}

.prog{list-style:none;padding:0;margin:0 auto;max-width:540px;display:grid;gap:14px;text-align:left}
.prog li{padding:16px 20px;border:1px solid rgba(196,154,103,.35);border-radius:14px;background:rgba(255,255,255,.05);position:relative}
.prog li::before{content:"✦";position:absolute;right:16px;top:14px;color:var(--oro);font-size:.8rem}
.prog time{font:700 .74rem var(--f-b);letter-spacing:.22em;color:var(--oro)}
.prog h3{font:700 1.5rem var(--f-d);color:var(--cr);margin:2px 0}.prog p{color:var(--mut);font-size:.92rem}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.box{padding:22px;border:1px solid rgba(196,154,103,.4);border-radius:14px;background:rgba(255,255,255,.05);text-align:left}
.box small{font:700 .66rem var(--f-b);letter-spacing:.3em;color:var(--oro);text-transform:uppercase}
.box h3{font:700 1.8rem var(--f-d);color:var(--cr);margin:2px 0 4px}.box p{color:var(--mut);font-size:.92rem}
.dots{display:flex;gap:8px;margin-top:12px}.dots i{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--oro)}

/* Regalos */
.gifts{display:grid;grid-template-columns:repeat(3,92px);gap:18px 22px;justify-content:center}
.gift{position:relative;width:92px;height:96px;padding:0;border:0;background:none;touch-action:manipulation;transition:transform .2s}
.gift:hover{transform:translateY(-3px) rotate(-2deg)}
.gift .bx{position:absolute;left:10px;right:10px;bottom:0;height:56px;border-radius:5px;background:var(--c);box-shadow:0 8px 14px rgba(0,0,0,.35)}
.gift .bx::before,.gift .lid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:13px;margin-left:-6.5px;background:var(--r)}
.gift .lid{position:absolute;left:4px;right:4px;bottom:54px;height:22px;border-radius:5px;background:var(--c);transition:transform .45s cubic-bezier(.3,1.5,.5,1);transform-origin:0 100%;box-shadow:0 3px 6px rgba(0,0,0,.25)}
.gift .lid::after{content:"";position:absolute;left:50%;top:-9px;width:24px;height:14px;margin-left:-12px;border:3px solid var(--r);border-radius:50% 50% 0 0}
.gift:nth-child(3n+1){--c:#7C142B;--r:#EBCF9F}.gift:nth-child(3n+2){--c:#C49A67;--r:#7C142B}.gift:nth-child(3n){--c:#FBF7F1;--r:#7C142B}
.gift.open .lid{transform:rotate(-34deg) translateY(-10px)}
.gift.open .bx::after{content:"✦";position:absolute;left:0;right:0;top:-34px;text-align:center;font-size:30px;color:var(--oro-l);text-shadow:0 0 14px #EBCF9F;animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.2);opacity:0}}
.wish{min-height:3.4em;margin-top:22px;font:700 1.5rem var(--f-d);color:var(--oro-l)}
.wish b{display:inline-block;font-weight:700;animation:wishIn .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes wishIn{from{transform:translateY(14px) scale(.85);opacity:0;filter:blur(5px)}}

/* Registro */
.panel{max-width:460px;margin:0 auto;padding:24px 20px;border-radius:18px;background:var(--cr);color:var(--ink);border:2px solid var(--oro);box-shadow:0 24px 60px rgba(0,0,0,.4);text-align:left}
#rsvp{display:grid;gap:14px}
.rsvp-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rsvp-choice input{position:absolute;opacity:0;pointer-events:none}
.rsvp-choice label{display:block;text-align:center;padding:12px 8px;border-radius:12px;border:1px solid #cdbcbe;font-weight:600;font-size:.88rem;cursor:pointer;background:#fff;color:var(--ink);transition:background .2s,color .2s}
.rsvp-choice input:checked+label{background:var(--g);color:#fff;border-color:var(--g)}
.rsvp-choice input:focus-visible+label{outline:3px solid var(--oro-m);outline-offset:2px}
.fld{display:grid;gap:6px;font-weight:600;font-size:.84rem;color:var(--ink)}
.fld input{width:100%;min-height:48px;padding:10px 14px;border:1px solid #cdbcbe;border-radius:10px;background:#fff;font:400 16px var(--f-b);color:var(--ink)}
.fld input:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px rgba(124,20,43,.15)}
.fld input[aria-invalid="true"]{border-color:#b3261e}
.err{color:#b3261e;font-size:.78rem;min-height:1.05em;font-weight:400}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:#6b5a5e}
.check input{width:22px;height:22px;margin-top:1px;accent-color:var(--g);flex:none}.check a{color:var(--g)}
.hint{font-size:.74rem;color:#6b5a5e;background:#F6EDEF;border-radius:10px;padding:10px 12px;line-height:1.5}
.rsvp-note{color:#6b5a5e;font-size:.74rem;text-align:center;margin-top:12px}
.privacy{max-width:460px;margin:14px auto 0;padding:14px 16px;border-radius:12px;border:1px solid rgba(196,154,103,.5);text-align:left;font-size:.82rem;color:var(--mut)}.privacy b{color:var(--oro-l)}
.privacy[hidden],.result[hidden],#rsvp[hidden]{display:none}

/* Resultado y pase */
.result{text-align:center}
.result h3{font:700 1.9rem/1.1 var(--f-d);color:var(--g)}
.result p{color:#6b5a5e;font-size:.92rem;margin-top:8px}
.badge{display:inline-block;margin-bottom:10px;padding:5px 12px;border-radius:99px;font:700 .72rem var(--f-b);letter-spacing:.04em}
.badge.ok{background:#E4F3EA;color:#1f7a4d}.badge.warn{background:#FFF1CC;color:#9a6a00}.badge.info{background:#F6EDEF;color:var(--g)}
.pass{margin:16px auto 0;max-width:320px;border:2px solid var(--oro);border-radius:18px;overflow:hidden;background:#fff;text-align:center}
.pass-h{background:var(--g);color:#F3DDB6;padding:10px;font:700 .72rem var(--f-b);letter-spacing:.24em;text-transform:uppercase}
.pass-b{padding:16px 16px 14px}
.pass-qr{width:min(220px,64vw);margin:0 auto;border:1px solid #eadfe0;border-radius:10px;padding:6px;background:#fff}
.pass-qr svg{width:100%;height:auto}
.pass-n{font:700 1.45rem/1.15 var(--f-d);color:var(--g);margin-top:12px}
.pass-e{font-size:.82rem;color:#6b5a5e;margin-top:2px}
.pass-f{margin-top:10px;font-size:.7rem;color:#8a7a7e}
.result .fine-d{font-size:.74rem;color:#8a7a7e}
.acts{display:grid;gap:10px;margin-top:16px}
.acts .b2{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:10px;border:1px solid var(--g);background:var(--g);color:#fff;font:600 .88rem var(--f-b);text-decoration:none;touch-action:manipulation;cursor:pointer}
.acts .b2.g{background:transparent;color:var(--g)}
.lnk{background:none;border:0;color:var(--g);text-decoration:underline;margin-top:12px;font:600 .84rem var(--f-b);cursor:pointer;min-height:44px}

.foot{text-align:center;padding:40px 20px 90px;position:relative;z-index:2;color:var(--mut);letter-spacing:.12em;font-size:.78rem}
.foot-crest{width:70px;height:auto;margin:0 auto 12px;border-radius:8px;border:1px solid var(--oro)}
.foot-s{font:400 2.4rem/1.2 var(--f-s);color:var(--oro-l);letter-spacing:0;margin-top:6px}
.demo-tag{background:rgba(251,247,241,.18);z-index:120}

/* Botón de música */
.mus{position:fixed;right:14px;bottom:14px;z-index:110;width:44px;height:44px;border-radius:50%;border:2px solid var(--oro);background:rgba(92,14,31,.92);color:#EBCF9F;font:700 20px/1 var(--f-display,serif);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.mus.off{opacity:.75}
.mus.off::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:2px;background:#EBCF9F;transform:rotate(-40deg)}