/* XV años · Noche Encantada — azul noche, lila y oro */
:root{
  --night:#0b0926;--navy:#17134a;--lav:#b9a6ff;--lav2:#8f7ae6;
  --gold:#e7c77b;--gold-l:#fff3c4;--gold-d:#a67a2e;--ink:#f3ecdf;--mut:#b6b0d6;
  --foil:linear-gradient(100deg,#a67a2e 0%,#e7c77b 22%,#fff6d2 38%,#e7c77b 52%,#a67a2e 70%,#f1d690 86%,#a67a2e 100%);
  --ph-bg:linear-gradient(160deg,#241f68,#120f3b);--ph-ink:rgba(231,199,123,.7);
  --music-bg:linear-gradient(135deg,#e7c77b,#a67a2e);--music-ink:#1b1450;
}
body{background:radial-gradient(120% 80% at 50% 0%,#221c6b 0%,var(--night) 60%) fixed,var(--night);color:var(--ink);font:400 18px/1.6 "Cormorant Garamond",Georgia,serif}
main{position:relative;z-index:2}
.sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.moon{position:fixed;top:-50px;right:-70px;width:180px;height:180px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,#fffbe8,#f2e4b5 45%,#cdb57a 70%,transparent 72%);box-shadow:0 0 80px 20px rgba(255,236,170,.18);opacity:.55}

/* ---------- Intro: telón ---------- */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;background:#12051a}
.curtain{position:absolute;top:0;bottom:0;width:51%;z-index:1;
  background:repeating-linear-gradient(90deg,#4a0f2c 0,#7c1a47 4%,#9b2458 7%,#6b163e 10%,#3b0a22 13%);
  box-shadow:inset 0 -80px 120px rgba(0,0,0,.55);transition:transform 1.9s cubic-bezier(.7,0,.2,1)}
.c-l{left:0;transform-origin:0 0;border-right:2px solid #e7c77b55}
.c-r{right:0;transform-origin:100% 0;border-left:2px solid #e7c77b55}
.curtain::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 75%,rgba(0,0,0,.4))}
.valance{position:absolute;top:0;left:0;right:0;height:70px;z-index:3;background:
  radial-gradient(circle at 50% 0,#9b2458 60%,transparent 62%) 0 0/80px 70px repeat-x;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.valance::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--foil)}
.gate.open .c-l{transform:translateX(-96%) skewX(-4deg)}
.gate.open .c-r{transform:translateX(96%) skewX(4deg)}
.gate.open .gate-in{opacity:0;transform:scale(1.25);filter:blur(6px)}
.gate.open{background:transparent;transition:background .5s}
.gate-in{position:relative;z-index:2;text-align:center;padding:24px;transition:opacity .8s,transform 1s,filter .8s}
.crown{width:110px;margin:0 auto 14px;filter:drop-shadow(0 0 18px rgba(231,199,123,.7));animation:crownf 3.2s ease-in-out infinite}
.crown.sm{width:70px}
@keyframes crownf{50%{transform:translateY(-8px) rotate(-2deg)}}
.gate-k{font:500 .8rem "Cinzel",serif;letter-spacing:.35em;text-transform:uppercase;color:var(--gold-l)}
.gate-name{font:400 clamp(4.2rem,20vw,7rem)/1 "Pinyon Script",cursive;background:var(--foil);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 5s linear infinite;padding:.1em .2em}
.gate-sub{font:600 1rem "Cinzel",serif;letter-spacing:.4em;color:var(--ink);margin-bottom:6px}
.gate-guest{color:var(--mut);margin-bottom:10px}
.gate-guest b{color:var(--gold-l);font-weight:500}
.gate-btn{margin-top:22px;border:1px solid var(--gold);background:rgba(0,0,0,.25);color:var(--gold-l);padding:14px 30px;border-radius:99px;font:600 .85rem "Cinzel",serif;letter-spacing:.2em;text-transform:uppercase;position:relative;overflow:hidden;animation:pulse 2.4s infinite}
.gate-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,243,196,.5),transparent 70%);transform:translateX(-100%);animation:sweep 2.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(231,199,123,.45)}70%{box-shadow:0 0 0 18px rgba(231,199,123,0)}100%{box-shadow:0 0 0 0 rgba(231,199,123,0)}}
@keyframes sweep{60%,100%{transform:translateX(100%)}}
@keyframes foil{to{background-position:-250% 0}}

/* ---------- Portada ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px 60px;position:relative}
.hero-k{font:600 .85rem "Cinzel",serif;letter-spacing:.5em;text-transform:uppercase;color:var(--lav)}
.hero-name{font:400 clamp(3.6rem,17vw,7.5rem)/1.05 "Pinyon Script",cursive;background:var(--foil);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 6s linear infinite;padding:.08em .25em;filter:drop-shadow(0 4px 24px rgba(231,199,123,.25))}
.hero-last{font:400 .95rem "Cinzel",serif;letter-spacing:.45em;text-transform:uppercase;color:var(--ink);margin-top:-4px}
.frame{position:relative;width:min(78vw,330px);aspect-ratio:1;margin:34px auto 26px;border-radius:50%}
.hero-pic{position:absolute;inset:9%;border-radius:50%;box-shadow:0 0 0 3px #0b0926,0 0 0 5px var(--gold),0 20px 60px rgba(0,0,0,.5)}
.frame .glint{position:absolute;inset:9%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at var(--mx,30%) var(--my,25%),rgba(255,255,255,.28),transparent 45%)}
.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring circle{fill:none;stroke:var(--gold);transform-origin:50% 50%}
.ring .r1{stroke-width:1;stroke-dasharray:2 7;animation:spin 40s linear infinite}
.ring .r2{stroke-width:1.6;stroke-dasharray:120 40 8 40;animation:spin 18s linear infinite reverse;stroke:var(--gold-l)}
.ring .r3{stroke-width:.8;stroke:var(--lav);stroke-dasharray:1 3;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-date{font:600 .9rem "Cinzel",serif;letter-spacing:.28em;color:var(--gold-l);text-transform:uppercase}
.guest-card{margin-top:22px;border:1px solid rgba(231,199,123,.45);border-radius:16px;padding:12px 26px;background:rgba(11,9,38,.55);backdrop-filter:blur(6px);display:grid}
.guest-card small{font-family:"Cinzel",serif;letter-spacing:.2em;font-size:.68rem;color:var(--mut);text-transform:uppercase}
.guest-card b{font:400 2rem "Pinyon Script",cursive;color:var(--gold-l)}
.guest-card span{font-size:.9rem;color:var(--lav)}
.scroll-cue{position:absolute;bottom:22px;left:50%;width:26px;height:42px;margin-left:-13px;border:1.5px solid var(--gold);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.8s infinite}
@keyframes cue{80%,100%{transform:translateY(16px);opacity:0}}

/* ---------- Secciones ---------- */
.sec{max-width:760px;margin:0 auto;padding:80px 22px;text-align:center;position:relative}
.title{font:400 clamp(2.4rem,9vw,3.6rem)/1.15 "Pinyon Script",cursive;color:var(--gold-l);text-shadow:0 0 30px rgba(231,199,123,.35)}
.orn{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);margin:12px 0 30px}
.orn span{height:1px;width:80px;background:linear-gradient(90deg,transparent,var(--gold))}
.orn span:last-child{transform:scaleX(-1)}
.lead{font:500 1.35rem "Cormorant Garamond",serif;font-style:italic;color:var(--ink)}
.lead.small{font-size:1.1rem;color:var(--mut);margin-bottom:24px}
.note{color:var(--mut);font-size:1rem;margin-top:14px;font-style:italic}
.quote{font:italic 400 clamp(1.4rem,5.2vw,1.9rem)/1.5 "Cormorant Garamond",serif;max-width:560px;margin:0 auto;color:var(--ink)}
.quote .w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(10px);transition:opacity .7s,filter .7s,transform .7s;transition-delay:calc(var(--w) * 55ms)}
.quote.in .w{opacity:1;filter:none;transform:none}
.quote.rv{opacity:1;transform:none}
.sig{display:block;margin-top:14px;font:400 2rem "Pinyon Script",cursive;color:var(--gold)}

.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{position:relative;padding:28px 20px;border-radius:18px;background:rgba(23,19,74,.55);backdrop-filter:blur(4px);overflow:hidden;isolation:isolate}
.card::before{content:"";position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 70%,var(--gold) 80%,var(--gold-l) 85%,transparent 92%);animation:spin 6s linear infinite}
.card::after{content:"";position:absolute;inset:1.5px;border-radius:16.5px;background:linear-gradient(160deg,#1c175a,#100d35);z-index:-1}
.card small{font:600 .72rem "Cinzel",serif;letter-spacing:.3em;text-transform:uppercase;color:var(--lav)}
.card p{font-size:1.3rem;margin-top:6px}

/* Calendario */
.cal{max-width:340px;margin:0 auto 30px;padding:20px 18px;border-radius:20px;background:rgba(23,19,74,.6);border:1px solid rgba(231,199,123,.35)}
.cal h3{font:600 1rem "Cinzel",serif;letter-spacing:.3em;color:var(--gold-l);margin:0 0 12px;text-transform:uppercase}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:.95rem}
.cal-g b{font:600 .7rem "Cinzel",serif;color:var(--lav);padding-bottom:6px}
.cal-g span{padding:6px 0;position:relative;color:var(--mut)}
.cal-g span.on{color:#1b1450;font-weight:700;z-index:0}
.cal-g span.on::before{content:"";position:absolute;inset:0 3px;z-index:-1;border-radius:50%;background:var(--foil);background-size:250%;animation:foil 4s linear infinite,beat 1.6s ease-in-out infinite}
.cal-g span.on svg{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;overflow:visible}
.cal-g span.on circle{fill:none;stroke:var(--gold-l);stroke-width:1.5;stroke-dasharray:160;stroke-dashoffset:160}
.cal.in span.on circle{animation:draw 1.6s .6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes beat{50%{transform:scale(1.12)}}

/* Cuenta regresiva flip */
.flip{display:flex;justify-content:center;gap:10px;margin:0 0 30px}
.flip>div{display:grid;gap:8px}
.flip b{position:relative;display:block;width:64px;height:74px;perspective:300px;font:600 2.1rem/74px "Cinzel",serif;color:var(--gold-l)}
.flip b i{position:absolute;inset:0;border-radius:10px;background:linear-gradient(180deg,#2a2378 50%,#1b1657 50%);box-shadow:0 10px 24px rgba(0,0,0,.4),inset 0 0 0 1px rgba(231,199,123,.3);font-style:normal;backface-visibility:hidden}
.flip b i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.5)}
.flip b i.nw{animation:flipin .6s cubic-bezier(.3,1.4,.6,1) both;transform-origin:50% 50%}
@keyframes flipin{from{transform:rotateX(-100deg);filter:brightness(1.8)}}
.flip span{font:600 .65rem "Cinzel",serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:99px;padding:13px 28px;text-decoration:none;
  font:600 .8rem "Cinzel",serif;letter-spacing:.18em;text-transform:uppercase;color:#1b1450;background:var(--foil);background-size:250%;animation:foil 6s linear infinite;box-shadow:0 10px 30px rgba(231,199,123,.25);transition:transform .2s}
.btn:active{transform:scale(.96)}
.btn.sm{padding:10px 20px;font-size:.7rem;margin-top:10px}
.btn.wide{width:100%}
.link{background:none;border:0;color:var(--lav);text-decoration:underline;margin-top:14px;font-size:1rem}

/* Itinerario */
.tl{list-style:none;padding:0;margin:0 auto;max-width:560px;position:relative;display:grid;gap:34px}
.tl-line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(231,199,123,.18)}
.tl-line i{position:absolute;inset:0;transform-origin:0 0;transform:scaleY(var(--fill,0));background:linear-gradient(var(--gold-l),var(--gold),var(--lav));box-shadow:0 0 12px var(--gold)}
.tl li:not(.tl-line){position:relative;width:calc(50% - 30px);padding:16px 18px;border-radius:14px;background:rgba(23,19,74,.65);border:1px solid rgba(231,199,123,.25);text-align:left}
.tl li:nth-child(odd):not(.tl-line){margin-left:auto}
.tl li:nth-child(even){text-align:right}
.tl .dot{position:absolute;top:22px;width:16px;height:16px;border-radius:50%;background:var(--night);border:2px solid var(--gold);transition:background .4s,box-shadow .4s}
.tl li:nth-child(odd) .dot{left:-39px}
.tl li:nth-child(even) .dot{right:-39px}
.tl li.lit .dot{background:var(--gold-l);box-shadow:0 0 0 6px rgba(231,199,123,.2),0 0 20px var(--gold)}
.tl time{font:600 .8rem "Cinzel",serif;letter-spacing:.15em;color:var(--gold)}
.tl h3{font:500 1.3rem "Cormorant Garamond",serif;margin:2px 0}
.tl p{color:var(--mut);font-size:1rem;line-height:1.35}
@media (max-width:560px){
  .tl-line{left:10px}
  .tl li:not(.tl-line){width:auto;margin-left:36px!important;text-align:left!important}
  .tl li .dot{left:-34px!important;right:auto!important}
}

/* Lugares */
.places{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.place{border-radius:20px;overflow:hidden;background:rgba(23,19,74,.7);border:1px solid rgba(231,199,123,.28);text-align:left}
.place .pic{aspect-ratio:16/10}
.place .pic img{transition:transform 6s ease-out}
.place.in .pic img{transform:scale(1.12)}
.place>div{padding:16px 18px 20px}
.place small{font:600 .68rem "Cinzel",serif;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.place h3{font:500 1.35rem "Cormorant Garamond",serif;line-height:1.2;margin:4px 0}
.place p{color:var(--mut);font-size:1rem}

/* Vestimenta */
.swatches{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.swatches span{width:52px;height:52px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--night),0 0 0 3px rgba(231,199,123,.6);position:relative;animation:bob 3s ease-in-out infinite;animation-delay:calc(var(--i,0) * .2s)}
.swatches span:nth-child(2){--i:1}.swatches span:nth-child(3){--i:2}.swatches span:nth-child(4){--i:3}.swatches span:nth-child(5){--i:4}
.swatches .reserved::after{content:"";position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;background:#ff8fb0;transform:rotate(45deg)}
.swatches em{position:absolute;top:60px;left:50%;transform:translateX(-50%);font:600 .55rem "Cinzel",serif;letter-spacing:.1em;color:var(--lav);font-style:normal;white-space:nowrap}
@keyframes bob{50%{transform:translateY(-6px)}}
.swatches+.note{margin-top:30px}

/* Polaroids */
.polas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;max-width:560px;margin:0 auto}
.pola{margin:0;padding:10px 10px 0;background:#fdfaf2;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.45);transform:rotate(var(--r));cursor:zoom-in;transition:transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.pola.rv.in{transform:rotate(var(--r))}
.pola:hover{transform:rotate(0) scale(1.05)!important;z-index:2;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.pola .pic{aspect-ratio:4/5;--ph-bg:linear-gradient(160deg,#d8d0f4,#a698db);--ph-ink:#4b3f8f}
.pola figcaption{font:400 1.2rem/1.2 "Pinyon Script",cursive;color:#2a2360;text-align:center;padding:10px 2px 12px;min-height:2.6em;display:grid;place-items:center}
.pola.rv[data-rv="drop"]{transform:translateY(-120px) rotate(calc(var(--r) * 4)) scale(.8)}
.pola.rv.in[data-rv="drop"]{transform:rotate(var(--r));transition-timing-function:cubic-bezier(.3,1.6,.5,1)}

/* Regalos (tarjetas que giran) */
.gifts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gift{position:relative;height:140px;border:0;background:none;padding:0;perspective:900px}
.gift span{position:absolute;inset:0;display:grid;place-content:center;gap:4px;padding:16px;border-radius:18px;backface-visibility:hidden;transition:transform .8s cubic-bezier(.4,1.4,.5,1)}
.g-f{background:linear-gradient(150deg,#2b2380,#161248);border:1px solid rgba(231,199,123,.4)}
.g-f b{font:400 1.9rem "Pinyon Script",cursive;color:var(--gold-l);font-weight:400}
.g-f small{font:600 .62rem "Cinzel",serif;letter-spacing:.25em;color:var(--lav);text-transform:uppercase}
.g-b{background:var(--foil);background-size:250%;color:#1b1450;font-size:1.15rem;transform:rotateY(180deg)}
.gift.on .g-f{transform:rotateY(-180deg)}
.gift.on .g-b{transform:rotateY(0)}

/* RSVP */
.panel{max-width:460px;margin:0 auto;padding:26px 22px;border-radius:22px;background:rgba(18,15,59,.8);border:1px solid rgba(231,199,123,.35);backdrop-filter:blur(8px);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.rsvp-form label{color:var(--mut);font-size:1rem}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{background:rgba(255,255,255,.06);border:1px solid rgba(231,199,123,.3);color:var(--ink)}
.rsvp-form select option{color:#111}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.rsvp-choice label{border:1px solid rgba(231,199,123,.35);color:var(--ink);font-size:1.05rem}
.rsvp-choice input:checked+label{background:var(--foil);background-size:250%;color:#1b1450;font-weight:600}
.rsvp-choice input:focus-visible+label{outline:2px solid var(--lav)}
.rsvp-ok h3{font:400 2.2rem/1.2 "Pinyon Script",cursive;color:var(--gold-l);margin:10px 0}
.rsvp-ok p{color:var(--mut);margin-bottom:18px}
.rsvp-ok .crown{margin:0 auto}

.foot{text-align:center;padding:70px 20px 110px;position:relative;z-index:2}
.foot-name{font:400 3.4rem "Pinyon Script",cursive;background:var(--foil);background-size:250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 6s linear infinite}
.hashtag{font:600 .9rem "Cinzel",serif;letter-spacing:.2em;color:var(--lav)}
.foot-date{color:var(--mut);letter-spacing:.3em}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(5,4,20,.9);display:grid;place-items:center;padding:20px;animation:fade .3s}
.lb[hidden]{display:none}
.lb button{position:absolute;top:14px;right:16px;border:0;background:none;color:#fff;font-size:2.4rem}
.lb-in{width:min(90vw,480px)}
.lb-in .pola{transform:none;cursor:default;animation:pop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:scale(.6) rotate(-8deg);opacity:0}}
@keyframes fade{from{opacity:0}}