/* Año Nuevo · Noche Dorada — negro, oro y art déco */
:root{
  --bg:#0a0a0c;--bg2:#141318;--gold:#d4af37;--gold-l:#f5dc8a;--gold-d:#9c7a1c;--champ:#f7e7ce;--ink:#f3eee4;--mut:#a79f8e;
  --foil:linear-gradient(100deg,#9c7a1c,#d4af37 25%,#fff1b8 40%,#d4af37 55%,#9c7a1c 75%,#e8c860 90%,#9c7a1c);
  --ph-bg:linear-gradient(135deg,#1c1a14,#2d2616);--ph-ink:rgba(212,175,55,.7);
  --music-bg:var(--foil);--music-ink:#111;
}
body{background:var(--bg);color:var(--ink);font:300 17px/1.65 "Josefin Sans",system-ui,sans-serif;
  background-image:radial-gradient(80% 50% at 50% 0,#1d1a12,transparent 70%),repeating-linear-gradient(45deg,rgba(212,175,55,.025) 0 2px,transparent 2px 22px),repeating-linear-gradient(-45deg,rgba(212,175,55,.025) 0 2px,transparent 2px 22px);background-attachment:fixed}
main{position:relative;z-index:2}
.fw{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
@keyframes foil{to{background-position:-250% 0}}

/* ---------- Intro ---------- */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 50%,#1b1810,#000);transition:opacity .9s}
.gate-in{text-align:center;padding:24px;transition:opacity .5s,transform .5s}
.gate-k{font:400 1rem "Poiret One";letter-spacing:.35em;text-transform:uppercase;color:var(--gold-l)}
.gate-t{color:var(--mut);margin-top:6px}
.gate-year{font:400 clamp(5rem,26vw,9rem)/1 "Limelight";background:var(--foil);background-size:250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 5s linear infinite;filter:drop-shadow(0 0 30px rgba(212,175,55,.35))}
.gate-guest{color:var(--mut);margin-top:6px}
.gate-guest b{color:var(--champ);font-weight:600}
.gate-btn{margin-top:26px;padding:15px 24px;border:1px solid var(--gold);background:transparent;color:var(--gold-l);font:600 .78rem "Josefin Sans";letter-spacing:.18em;white-space:nowrap;text-transform:uppercase;position:relative;overflow:hidden}
.gate-btn::before,.gate-btn::after{content:"";position:absolute;width:8px;height:8px;border:1px solid var(--gold);transform:rotate(45deg);top:50%;margin-top:-4px;background:var(--bg)}
.gate-btn::before{left:-4px}.gate-btn::after{right:-4px}
.gate-btn:hover{background:rgba(212,175,55,.1)}
.gate-num{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font:400 min(60vw,420px)/1 "Limelight";color:var(--gold-l);text-shadow:0 0 60px rgba(212,175,55,.6)}
.gate-num span{animation:num .8s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes num{0%{transform:scale(2.4);opacity:0;filter:blur(10px)}30%{opacity:1;filter:none;transform:scale(1)}100%{transform:scale(.6);opacity:0}}
.gate-num span.fin{font-size:.26em;text-align:center;line-height:1.1;animation:fin 1.2s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes fin{0%{transform:scale(.4);opacity:0}40%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:1}}
.gate.counting .gate-in{opacity:0;transform:scale(.9)}
.gate.done{opacity:0;background:transparent}

/* ---------- Portada ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 22px;overflow:hidden;cursor:crosshair}
.rays{position:absolute;left:50%;top:48%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;z-index:-1;
  background:repeating-conic-gradient(from 0deg,rgba(212,175,55,.13) 0 4deg,transparent 4deg 12deg);-webkit-mask:radial-gradient(circle,#000 5%,transparent 45%);mask:radial-gradient(circle,#000 5%,transparent 45%);animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.deco{position:absolute;width:64px;height:64px;fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.8}
.deco path{stroke-dasharray:420;stroke-dashoffset:420;animation:dline 2.4s .6s ease forwards}
@keyframes dline{to{stroke-dashoffset:0}}
.deco.tl{left:14px;top:50px}.deco.tr{right:14px;top:50px;transform:scaleX(-1)}.deco.bl{left:14px;bottom:14px;transform:scaleY(-1)}.deco.br{right:14px;bottom:14px;transform:scale(-1)}
.hero-k{font:400 1rem "Poiret One";letter-spacing:.45em;text-transform:uppercase;color:var(--gold-l)}
.year{font:400 clamp(5.4rem,30vw,12rem)/1 "Limelight";background:var(--foil);background-size:250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 6s linear infinite;filter:drop-shadow(0 6px 40px rgba(212,175,55,.35));margin:6px 0}
.year.small{font-size:4rem}
.hero-t{font:400 clamp(1.6rem,7vw,2.4rem) "Poiret One";letter-spacing:.2em;color:var(--champ)}
.hero-d{display:flex;align-items:center;gap:14px;margin-top:22px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:var(--mut)}
.hero-d b{padding:8px 14px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);color:var(--gold-l);font-weight:600}
.guest{margin-top:22px;color:var(--mut)}
.guest b{color:var(--champ);font-weight:600}
.tap{margin-top:34px;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}

/* ---------- Secciones ---------- */
.sec{max-width:760px;margin:0 auto;padding:80px 22px;text-align:center;position:relative}
.title{font:400 clamp(2.2rem,10vw,3.4rem)/1.1 "Limelight";color:var(--gold-l)}
.deco-line{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin:12px 0 30px;font-size:.8rem}
.deco-line span{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.deco-line span:last-child{transform:scaleX(-1)}
.lead{color:var(--mut);margin-bottom:22px}
.quote{font:400 clamp(1.4rem,5.4vw,1.9rem)/1.5 "Poiret One";color:var(--champ);max-width:560px;margin:0 auto}
.hosts{margin-top:18px;color:var(--gold);letter-spacing:.15em;font-weight:600;font-size:.9rem;text-transform:uppercase}

.cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:480px;margin:0 auto 28px}
.cd div{position:relative;padding:16px 4px 12px;border:1px solid rgba(212,175,55,.45);background:linear-gradient(180deg,#17150f,#0c0b09)}
.cd div::before,.cd div::after{content:"";position:absolute;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.cd div::before{top:-3.5px;left:50%;margin-left:-3px}
.cd div::after{bottom:-3.5px;left:50%;margin-left:-3px}
.cd b{display:block;font:400 clamp(1.8rem,9vw,2.6rem)/1 "Limelight";color:var(--gold-l)}
.cd b.tick{animation:shine .8s}
@keyframes shine{0%{text-shadow:0 0 24px #fff1b8;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;border:0;padding:14px 28px;text-decoration:none;font:600 .78rem "Josefin Sans";letter-spacing:.25em;text-transform:uppercase;color:#111;background:var(--foil);background-size:250%;animation:foil 6s linear infinite;box-shadow:0 10px 30px rgba(212,175,55,.2);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);transition:transform .15s}
.btn:active{transform:scale(.96)}
.btn.sm{padding:10px 20px;font-size:.68rem;margin-top:10px}
.btn.wide{width:100%}
.link{background:none;border:0;color:var(--gold-l);text-decoration:underline;margin-top:12px}

/* Reloj */
.clock-wrap{margin:0 auto 40px}
.clock{width:min(58vw,230px);margin:0 auto;filter:drop-shadow(0 0 30px rgba(212,175,55,.25))}
.c-out{fill:#0e0d0a;stroke:var(--gold);stroke-width:2}
.c-in{fill:none;stroke:rgba(212,175,55,.35);stroke-width:1}
.marks line{stroke:var(--gold-l);stroke-width:1.5}
.marks line.big{stroke-width:3.5}
.marks text{font:400 13px "Limelight";fill:var(--gold-l);text-anchor:middle;dominant-baseline:central}
.h-hour{stroke:var(--gold-l);stroke-width:5;stroke-linecap:round;transform-origin:100px 100px}
.h-min{stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;transform-origin:100px 100px}
.c-dot{fill:var(--gold)}
.clock.midnight{animation:ring .5s ease-in-out 4}
@keyframes ring{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.clock-t{margin-top:10px;font:400 1.1rem "Poiret One";color:var(--gold-l);letter-spacing:.1em;min-height:1.6em;text-shadow:0 0 10px #000,0 0 20px #000}
.prog{list-style:none;padding:0;margin:0 auto;max-width:520px;display:grid;gap:16px;position:relative;z-index:2}
.prog li{padding:18px 20px;background:rgba(14,13,10,.92);border:1px solid rgba(212,175,55,.3);position:relative}
.prog li::before{content:"◆";position:absolute;left:50%;top:-9px;margin-left:-6px;font-size:.7rem;color:var(--gold);background:var(--bg);padding:0 4px}
.prog time{font:600 .75rem "Josefin Sans";letter-spacing:.25em;color:var(--gold)}
.prog h3{font:400 1.5rem "Poiret One";color:var(--champ);margin:2px 0}
.prog p{color:var(--mut);font-size:.95rem}

/* Uvas */
.grapes{display:grid;grid-template-columns:repeat(4,56px);gap:14px;justify-content:center;margin:0 auto}
.grape{width:56px;height:56px;border-radius:50%;border:0;position:relative;background:radial-gradient(circle at 34% 30%,#e6d3ff 0 8%,#8d5cc2 30%,#4a2170 70%,#2a0f44);box-shadow:inset -4px -6px 10px rgba(0,0,0,.4),0 6px 14px rgba(0,0,0,.4);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.grape::after{content:"";position:absolute;left:50%;top:-6px;width:3px;height:10px;margin-left:-1.5px;background:#6b8a3a;border-radius:2px}
.grape:nth-child(3n){background:radial-gradient(circle at 34% 30%,#f4ffd6 0 8%,#a8c257 30%,#6a8a28 70%,#3f5614)}
.grape:hover{transform:scale(1.1) rotate(-6deg)}
.grape.eaten{transform:scale(0) rotate(90deg);pointer-events:none;transition:transform .45s cubic-bezier(.6,-0.4,.7,1)}
.grape span{position:absolute;inset:0;display:grid;place-items:center;font:600 .75rem "Josefin Sans";color:rgba(255,255,255,.8)}
.wish{min-height:3.2em;margin-top:22px;font:400 1.5rem "Poiret One";color:var(--gold-l)}
.wish b{display:inline-block;animation:wishIn .7s cubic-bezier(.3,1.5,.5,1);font-weight:400}
@keyframes wishIn{from{transform:translateY(16px) scale(.8);opacity:0;filter:blur(6px)}}

.venue{aspect-ratio:16/9;border:1px solid rgba(212,175,55,.4);margin:0 0 20px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.venue img{animation:kb 20s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12)}}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.box{padding:22px;border:1px solid rgba(212,175,55,.35);background:rgba(20,19,24,.85);text-align:left}
.box small{font-weight:600;font-size:.68rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.box h3{font:400 1.7rem "Poiret One";color:var(--champ);margin:4px 0}
.box p{color:var(--mut);font-size:.95rem}
.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(--gold)}

/* Brindis */
.toast{position:relative;height:190px;display:flex;justify-content:center;align-items:flex-end;gap:6px;margin-bottom:20px}
.glass{width:70px;height:175px;transform-origin:50% 90%;transition:transform .5s cubic-bezier(.5,1.6,.5,1)}
.g-bowl{fill:rgba(255,255,255,.06);stroke:rgba(247,231,206,.7);stroke-width:1.2}
.g-wine{fill:rgba(212,175,55,.75)}
.g-stem{fill:none;stroke:rgba(247,231,206,.7);stroke-width:1.6;stroke-linecap:round}
.g-bub circle{fill:#fff8d6;animation:bub 2.2s ease-in infinite}
.g-bub circle:nth-child(2){animation-delay:-.6s}.g-bub circle:nth-child(3){animation-delay:-1.2s}.g-bub circle:nth-child(4){animation-delay:-1.7s}
@keyframes bub{from{transform:translateY(0);opacity:1}to{transform:translateY(-34px);opacity:0}}
.gl{transform:rotate(-8deg)}.gr{transform:rotate(8deg)}
.toast.cheers .gl{transform:translateX(14px) rotate(16deg)}
.toast.cheers .gr{transform:translateX(-14px) rotate(-16deg)}
.clink{position:absolute;left:50%;top:14px;margin-left:-14px;font-size:28px;color:#fff1b8;opacity:0;text-shadow:0 0 20px var(--gold)}
.toast.cheers .clink{animation:clink .8s .25s ease-out}
@keyframes clink{0%{opacity:0;transform:scale(.2) rotate(0)}30%{opacity:1;transform:scale(1.6) rotate(45deg)}100%{opacity:0;transform:scale(2.4) rotate(90deg)}}

.panel{max-width:450px;margin:0 auto;padding:26px 22px;border:1px solid rgba(212,175,55,.45);background:linear-gradient(180deg,#16140f,#0c0b09);position:relative}
.panel::before{content:"";position:absolute;inset:6px;border:1px solid rgba(212,175,55,.18);pointer-events:none}
.rsvp-form label{color:var(--mut);font-size:.88rem;letter-spacing:.05em}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{border-radius:0;border:0;border-bottom:1px solid rgba(212,175,55,.5);background:rgba(255,255,255,.03);color:var(--ink)}
.rsvp-form select option{color:#111}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{outline:none;border-bottom-color:var(--gold-l);background:rgba(212,175,55,.07)}
.rsvp-choice label{border:1px solid rgba(212,175,55,.4);border-radius:0;font-size:.9rem}
.rsvp-choice input:checked+label{background:var(--foil);background-size:250%;color:#111;font-weight:600}
.rsvp-choice input:focus-visible+label{outline:2px solid var(--gold-l)}
.ok-y{font:400 3.6rem/1 "Limelight";background:var(--foil);background-size:250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 4s linear infinite}
.rsvp-ok h3{font:400 1.8rem "Poiret One";color:var(--champ);margin:8px 0}
.rsvp-ok p{color:var(--mut);margin-bottom:16px}
.foot{text-align:center;padding:50px 20px 110px;position:relative;z-index:2;color:var(--mut);letter-spacing:.2em}