/* Plantilla de matrimonio. Los colores principales vienen de config/boda.json (tema) y se inyectan como variables CSS. */
/* Layout: una baraja de tarjetas a pantalla completa. No hay scroll: cada deslizamiento hacia arriba
   lleva a la siguiente tarjeta con una transición 3D. Verde oliva de noche, crema de papel. */
:root{
  --oliva:#2c361f;       /* verde oliva (fondo) */
  --salvia:#85b37f;      /* verde salvia (degradado) */
  --crema:#ecdfbd;       /* crema (acento, texto) */
  --papel:#f5eedb;       /* papel (tarjeta de confirmación) */
  --oliva-oscuro:color-mix(in srgb,var(--oliva) 70%,#000);
  --oliva-prof:color-mix(in srgb,var(--oliva) 45%,#000);
  --night:var(--oliva);      /* fondo */
  --night-2:#3a4628;    /* superficies */
  --ink:var(--papel);        /* texto */
  --muted:#e3ddc0;      /* texto secundario */
  --gold:var(--crema);       /* acento crema */
  --sage:var(--salvia);       /* verde salvia */
  --rose:var(--salvia);       /* segundo astro, verde salvia */
  --line:color-mix(in srgb,var(--crema) 22%,transparent);
  --f-display:"Bodoni Moda","Didot","Times New Roman",serif;
  --f-script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --f-body:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(120% 80% at 85% 100%,color-mix(in srgb,var(--salvia) 55%,transparent),transparent 62%),var(--night);color:var(--ink)}
body{font-family:var(--f-body);font-weight:300;font-size:16px;line-height:1.5;overscroll-behavior:none}
.label{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--gold)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

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

/* ---------- Baraja ---------- */
#stage{position:fixed;inset:0;z-index:1;user-select:none;-webkit-user-select:none}
#stage,#stage *{touch-action:none}
#stage input{user-select:text;-webkit-user-select:text}
.deck{position:absolute;margin-inline:auto;max-width:560px;
  top:calc(14px + env(safe-area-inset-top,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));
  left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));
  perspective:1300px;perspective-origin:50% 42%}
.slide{position:absolute;inset:0;border-radius:30px;overflow:hidden;visibility:hidden;color:var(--ink);
  background:radial-gradient(70% 45% at 82% 88%,rgba(170,214,160,.32),transparent 70%),linear-gradient(160deg,var(--oliva) 0%,var(--salvia) 100%);
  border:1px solid var(--line);box-shadow:0 40px 70px -30px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06);
  will-change:transform,opacity}
.slide::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--oliva-prof);opacity:var(--sh,0);pointer-events:none}
.slide.paper{--ink:var(--oliva);--muted:#5d6743;--line:color-mix(in srgb,var(--oliva) 24%,transparent);--gold:#4b5a33;--night:var(--papel);
  background:radial-gradient(70% 45% at 100% 100%,color-mix(in srgb,var(--salvia) 38%,transparent),transparent 70%),linear-gradient(165deg,#f9f3e3,#e8ddbf);border-color:transparent}
.slide.paper .label,.slide.paper .sub{text-shadow:none}
.inner{position:absolute;inset:0;display:flex;flex-direction:column;padding:64px 30px 64px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;text-align:center}
.inner::-webkit-scrollbar{display:none}
.col{margin-block:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.p3{perspective:800px}
h2{font-size:clamp(32px,9vw,46px);line-height:1.05}
h2 em{font-family:var(--f-script);font-style:normal;color:var(--gold);font-size:1.15em}
.sub{color:var(--muted);max-width:32ch;font-size:15px}

/* entrada escalonada al llegar a cada tarjeta */
.on .col>*{animation:riseIn .85s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--n,0)*90ms)}
.col>*:nth-child(1){--n:0}.col>*:nth-child(2){--n:1}.col>*:nth-child(3){--n:2}.col>*:nth-child(4){--n:3}
.col>*:nth-child(5){--n:4}.col>*:nth-child(6){--n:5}.col>*:nth-child(7){--n:6}
@keyframes riseIn{from{opacity:0;transform:translateY(34px) rotateX(-28deg);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

.label,.hint,.sub,.swipe,.scratch-hint,.gate-kicker{text-shadow:0 1px 8px color-mix(in srgb,var(--oliva-prof) 45%,transparent)}
.hint{position:absolute;left:0;right:0;bottom:14px;display:grid;justify-items:center;gap:6px;pointer-events:none;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hint i{width:12px;height:12px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);animation:chev 1.6s ease-in-out infinite}
@keyframes chev{0%,100%{transform:translateY(6px) rotate(45deg);opacity:.2}50%{transform:translateY(-4px) rotate(45deg);opacity:1}}

/* ---------- Puerta ---------- */
#gate{position:fixed;inset:0;height:100%;z-index:50;display:grid;place-items:center;text-align:center;touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(160deg,var(--oliva) 0%,var(--salvia) 100%);
  padding:calc(24px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(120px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  border-radius:0 0 28px 28px;box-shadow:0 30px 80px rgba(0,0,0,.45);will-change:transform}
#gate.release{transition:transform .9s cubic-bezier(.7,0,.2,1)}
#gate.back{transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.swipe{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;justify-items:center;gap:8px;
  background:none;border:0;color:var(--ink);cursor:grab;padding:8px 16px;font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.swipe .chev{display:grid}
.swipe .chev i{width:14px;height:14px;border-left:1.5px solid var(--gold);border-top:1.5px solid var(--gold);transform:rotate(45deg);margin:-3px auto;animation:chev 1.6s ease-in-out infinite}
.swipe .chev i:nth-child(2){animation-delay:.15s;opacity:.7}.swipe .chev i:nth-child(3){animation-delay:.3s;opacity:.4}
.swipe .pill{width:44px;height:5px;border-radius:5px;background:var(--line)}
.orbit{--r:min(110px,27vw);position:relative;width:min(260px,64vw);aspect-ratio:1;margin:0 auto 28px}
.orbit .ring{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%}
.orbit .ring.r2{inset:18%;border-style:dashed;opacity:.6}
.star{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-script);font-size:34px;color:var(--night)}
.star.c{background:radial-gradient(circle at 35% 35%,#fffaf0,var(--gold) 60%);box-shadow:0 0 30px var(--gold),0 0 80px color-mix(in srgb,var(--crema) 50%,transparent);animation:orbitA 7s linear infinite}
.star.s{background:radial-gradient(circle at 35% 35%,#f5f8e8,var(--rose) 60%);box-shadow:0 0 30px var(--rose),0 0 80px rgba(183,193,140,.5);animation:orbitB 7s linear infinite}
@keyframes orbitA{from{transform:rotate(0) translateX(var(--r)) rotate(0)}to{transform:rotate(360deg) translateX(var(--r)) rotate(-360deg)}}
@keyframes orbitB{from{transform:rotate(180deg) translateX(var(--r)) rotate(-180deg)}to{transform:rotate(540deg) translateX(var(--r)) rotate(-540deg)}}
#gate.merge .star.c,#gate.merge .star.s{animation:none;transform:translateX(0) scale(1.2);transition:transform 1s cubic-bezier(.6,-0.3,.3,1.4)}
#gate.merge .orbit::after{content:"";position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(circle,rgba(255,250,240,.95),color-mix(in srgb,var(--crema) 25%,transparent) 35%,transparent 60%);animation:flash 1.1s .7s ease-out forwards;opacity:0}
@keyframes flash{0%{opacity:0;transform:scale(.2)}35%{opacity:1}100%{opacity:0;transform:scale(2.6)}}
.gate-kicker{color:var(--muted);font-size:15px;max-width:30ch;margin:0 auto}
@media (max-height:680px){
  .orbit{--r:min(78px,21vw);width:min(184px,50vw);margin-bottom:16px}
  .star{width:44px;height:44px;margin:-22px;font-size:26px}
}
@media (max-height:560px){.gate-kicker{display:none}}

/* ---------- 1. Portada: esfera armilar 3D ---------- */
.sphere-wrap{--sz:min(30vw,19vh);--sz:min(30vw,19svh)}
.sphere{position:relative;width:var(--sz);height:var(--sz);transform-style:preserve-3d;animation:spin 16s linear infinite}
.tilt{transform:rotateX(calc(var(--ty,0)*1deg)) rotateY(calc(var(--tx,0)*1deg));transition:transform .25s ease-out}
@keyframes spin{from{transform:rotateX(-16deg) rotateY(0)}to{transform:rotateX(-16deg) rotateY(360deg)}}
.sphere i{position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--crema) 60%,transparent);border-radius:50%}
.sphere i:nth-child(2){transform:rotateY(60deg)}.sphere i:nth-child(3){transform:rotateY(120deg)}
.sphere i:nth-child(4){inset:14%;border-style:dashed;opacity:.5;transform:rotateX(90deg)}
.sphere b{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px;border-radius:50%;display:grid;place-items:center;
  font:400 19px/1 var(--f-script);color:var(--oliva);backface-visibility:hidden;transform:rotateY(var(--a)) translateZ(calc(var(--sz)/2))}
.sphere b.c{--a:0deg;background:radial-gradient(circle at 35% 35%,#fffaf0,var(--gold) 65%);box-shadow:0 0 18px var(--gold)}
.sphere b.s{--a:180deg;background:radial-gradient(circle at 35% 35%,#f5f8e8,var(--rose) 65%);box-shadow:0 0 18px var(--rose)}
.names{font-size:clamp(46px,19vw,104px);font-size:clamp(46px,min(19vw,11svh),104px);line-height:.92;letter-spacing:-.02em;display:grid;justify-items:center}
.names .split{display:block;perspective:520px}
.names .amp{font-family:var(--f-script);color:var(--gold);font-size:.62em;line-height:1;margin:.02em 0 -.06em;display:inline-block;animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(-8deg) translateY(-4px)}}
.ch{display:inline-block}
.on .ch{animation:chIn 1.1s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i)*70ms + 250ms)}
@keyframes chIn{from{opacity:0;transform:rotateX(-110deg) translateY(.5em) translateZ(-80px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.hero-date{font-family:var(--f-display);font-style:italic;font-size:clamp(18px,4.8vw,24px)}
@media (max-height:620px){.hero-sub{display:none}}

/* ---------- 2. Cuenta regresiva ---------- */
.count{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:340px}
.cell{border:1px solid var(--line);border-radius:20px;padding:16px 6px 12px;text-align:center;background:color-mix(in srgb,var(--oliva-prof) 35%,transparent)}
.on .cell{animation:cellIn 1s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--k)*140ms + 250ms)}
.cell:nth-child(1){--k:0}.cell:nth-child(2){--k:1}.cell:nth-child(3){--k:2}.cell:nth-child(4){--k:3}
@keyframes cellIn{from{opacity:0;transform:rotateX(-85deg) translateZ(-140px)}to{opacity:1;transform:none}}
.num{font-family:var(--f-display);font-size:clamp(40px,14vw,60px);line-height:1;font-variant-numeric:tabular-nums;display:block;height:1em;overflow:hidden}
.num span{display:block}
.num.tick span{animation:flip .5s cubic-bezier(.6,0,.2,1)}
@keyframes flip{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.cell small{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-top:6px}

/* ---------- 3. Fecha para raspar ---------- */
.scratch{position:relative;height:min(46vh,380px);height:min(46svh,380px);aspect-ratio:5/6;max-width:100%;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 50px -24px rgba(0,0,0,.6)}
.scratch.done{animation:flipDone 1.1s cubic-bezier(.3,1.3,.5,1)}
@keyframes flipDone{from{transform:rotateY(0) scale(1)}50%{transform:rotateY(180deg) scale(1.06)}to{transform:rotateY(360deg) scale(1)}}
.scratch .under{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#6f9a68,#33442a)}
.under .u{display:grid;gap:2px;justify-items:center}
.under .u span{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.under .u b{font:400 clamp(84px,26vw,120px)/.95 var(--f-display)}
.under .u em{font:italic 400 22px/1.2 var(--f-display)}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;transition:opacity .8s}
.scratch-hint{color:var(--muted);font-size:13px}

/* ---------- 4. Mapa en plano inclinado ---------- */
.plane{width:100%;max-width:340px;--base:34deg;transform:rotateX(calc(var(--base) + var(--ty,0)*.6deg)) rotateY(calc(var(--tx,0)*.8deg));transform-origin:50% 70%}
.on .plane{animation:planeIn 1.2s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes planeIn{from{transform:rotateX(86deg) translateZ(-60px);opacity:0}to{transform:rotateX(34deg)}}
.plane svg{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line);box-shadow:0 30px 40px -20px rgba(0,0,0,.6)}
.road{stroke:color-mix(in srgb,var(--papel) 16%,transparent);stroke-width:7;fill:none;stroke-linecap:round}
.road.thin{stroke-width:3;stroke:color-mix(in srgb,var(--papel) 9%,transparent)}
.route{stroke:var(--gold);stroke-width:3;fill:none;stroke-dasharray:6 9;stroke-linecap:round;animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-30}}
.pulse{fill:var(--rose);opacity:.35;transform-origin:center;transform-box:fill-box;animation:pulse 2s ease-out infinite}
@keyframes pulse{from{transform:scale(.4);opacity:.6}to{transform:scale(2.6);opacity:0}}
.on .pinpt{animation:drop .9s .5s cubic-bezier(.3,1.7,.5,1) backwards}
@keyframes drop{from{transform:translateY(-70px);opacity:0}to{transform:none;opacity:1}}
.pinpt{transform-box:fill-box}
.maplink{display:block;border-radius:18px}
.plane text{font-family:var(--f-mono);font-size:17px;fill:var(--muted);letter-spacing:.08em}
.addr{font-family:var(--f-display);font-size:clamp(20px,5.4vw,26px);line-height:1.2}
.addr small{display:block;font-family:var(--f-body);font-size:14px;color:var(--muted);margin-top:4px}
.row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:10px 16px;text-decoration:none;color:var(--ink);background:transparent;cursor:pointer;font-size:14px;min-height:40px}
.chip:hover{border-color:var(--gold);background:color-mix(in srgb,var(--crema) 8%,transparent)}

/* ---------- Lluvia de sobres ---------- */
.envwrap{margin-top:calc(min(50vw,190px)*.5)}
.env3d{position:relative;width:min(50vw,190px);aspect-ratio:3/2;filter:drop-shadow(0 18px 18px rgba(0,0,0,.3));animation:envFloat 5s ease-in-out infinite}
@keyframes envFloat{50%{transform:translateY(-6px) rotateX(6deg) rotateY(-6deg)}}
.env3d>div{position:absolute}
.e-back{inset:0;background:#d6c79b;border-radius:8px}
.e-letter{left:9%;right:9%;top:8%;bottom:14%;background:#fffaf0;border-radius:4px;display:grid;align-content:center;justify-items:center;gap:7px;padding:0 14%;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.e-letter b{font:400 clamp(22px,7vw,30px)/1 var(--f-script);color:#3f5a35}
.e-letter i{display:block;width:100%;height:3px;border-radius:2px;background:color-mix(in srgb,var(--oliva) 25%,transparent)}
.e-front{inset:0;background:#f1e7cc;border-radius:8px;clip-path:polygon(0 30%,50% 66%,100% 30%,100% 100%,0 100%)}
.e-flap{left:0;right:0;top:0;height:66%;background:#e6dab8;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;z-index:3}
.e-flap::after{content:"";position:absolute;left:50%;bottom:7%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--salvia);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--oliva) 25%,transparent)}
.on .e-flap{animation:flapOpen 1.1s .35s cubic-bezier(.4,0,.2,1) both}
@keyframes flapOpen{0%{transform:rotateX(0);z-index:3}49%{z-index:3}50%{z-index:0}100%{transform:rotateX(180deg);z-index:0}}
.on .e-letter{animation:letterUp 1.4s 1s cubic-bezier(.2,.9,.3,1) both}
@keyframes letterUp{from{transform:translateY(0)}to{transform:translateY(-42%)}}
.rainlayer{position:absolute;inset:0;overflow:hidden;pointer-events:none;perspective:700px;z-index:2}
.envp{position:absolute;top:-30px;left:var(--x);width:var(--w);height:calc(var(--w)*.68);background:var(--bg,#f1e7cc);border-radius:2px;box-shadow:0 3px 8px rgba(0,0,0,.28);
  animation:envFall var(--t) var(--d) cubic-bezier(.3,.1,.5,1) both}
.envp::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--oliva) 14%,transparent);clip-path:polygon(0 0,100% 0,50% 62%)}
.envp::after{content:"";position:absolute;left:50%;top:44%;width:24%;aspect-ratio:1;margin-left:-12%;border-radius:50%;background:var(--salvia)}
@keyframes envFall{0%{opacity:0;transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(var(--r0))}8%{opacity:1}
  100%{opacity:1;transform:translate3d(var(--dx),var(--h),0) rotateX(720deg) rotateY(540deg) rotateZ(var(--r1))}}

/* ---------- Colores reservados ---------- */
.swatches{display:flex;gap:16px;justify-content:center}
.sw{width:min(30vw,112px);aspect-ratio:3/4;padding:0;border:0;background:none;cursor:pointer;perspective:700px;color:inherit}
.c3{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.25,.5,1)}
.sw{position:relative}
.sw.flip .c3{transform:rotateY(180deg)}
.on .sw .c3{animation:swIn 1s cubic-bezier(.2,.9,.3,1) backwards}
.on .sw:nth-child(2) .c3{animation-delay:.18s}
@keyframes swIn{from{opacity:0;transform:rotateY(-110deg) translateZ(-120px)}to{opacity:1;transform:none}}
.face{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;align-content:center;gap:8px;
  border:1px solid color-mix(in srgb,var(--papel) 50%,transparent);box-shadow:0 24px 34px -18px rgba(0,0,0,.6);padding:8px}
.face b{font:400 18px/1.15 var(--f-display);text-align:center}
.face.olive{background:linear-gradient(150deg,color-mix(in srgb,var(--oliva) 70%,var(--salvia)),var(--oliva));color:var(--papel)}
.face.cream{background:linear-gradient(150deg,#fbf6e8,#e8ddbf);color:var(--oliva)}
.face.back{transform:rotateY(180deg);background:linear-gradient(150deg,var(--oliva-oscuro),var(--oliva));color:var(--papel)}
.face.back i{width:34px;height:34px;border-radius:50%;border:2px solid var(--crema);position:relative}
.face.back i::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--crema);transform:rotate(45deg)}
.dress{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:340px}
.dress>div{border:1px solid var(--line);border-radius:18px;padding:14px 8px;background:color-mix(in srgb,var(--oliva-prof) 30%,transparent);display:grid;gap:4px}
.dress b{font:italic 400 clamp(22px,6.4vw,28px)/1.1 var(--f-display)}

/* ---------- 5. Confirmar (papel crema) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--gold);background:transparent;color:var(--ink);
  padding:13px 28px;border-radius:999px;cursor:pointer;letter-spacing:.08em;min-height:46px;transition:background .3s,color .3s,transform .2s}
.btn:hover{background:var(--gold);color:var(--night)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--gold);color:var(--night);font-weight:500}
.field{display:grid;gap:8px;width:100%;max-width:340px;text-align:left}
.field label,.field .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input[type=text]{background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 2px;font-family:var(--f-display);font-size:24px;outline:none;transition:border-color .3s;width:100%;color:var(--ink)}
.field input[type=text]:focus{border-color:var(--gold)}
.field input::placeholder{color:var(--muted);opacity:.7}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .3s}
.choice input:checked + label{border-color:var(--gold);background:rgba(75,90,51,.12)}
.choice input:focus-visible + label{outline:2px solid var(--gold);outline-offset:3px}
.stepper{display:flex;align-items:center;gap:18px}
.stepper button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:22px;cursor:pointer}
.stepper button:hover{border-color:var(--gold)}
.stepper output{font-family:var(--f-display);font-size:34px;min-width:1.5ch;text-align:center;font-variant-numeric:tabular-nums}
.msg{min-height:1.3em;color:var(--muted);font-size:14px}
#rsvpForm{display:grid;gap:14px;justify-items:center;width:100%}
.done-box{display:grid;gap:12px;justify-items:center}
.done-box h3{font-size:32px}
.list{width:100%;margin-top:10px;border-top:1px dashed var(--line);padding-top:12px;text-align:left}
.list ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px;font-size:15px}
.list li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid color-mix(in srgb,var(--oliva) 10%,transparent);padding-bottom:6px}
.list li span:last-child{font-family:var(--f-mono);color:var(--muted);font-size:13px;white-space:nowrap}

/* ---------- 6. Final: moneda 3D ---------- */
.coin{--s:min(30vw,18vh);--s:min(30vw,18svh);position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;animation:coin 7s ease-in-out infinite}
@keyframes coin{0%,15%{transform:rotateY(0)}50%,65%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.coin span{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;
  background:radial-gradient(circle at 35% 30%,#fffaf0,var(--gold) 55%,#b9a972);color:var(--oliva);box-shadow:0 0 40px color-mix(in srgb,var(--crema) 45%,transparent),inset 0 0 0 4px color-mix(in srgb,var(--oliva) 12%,transparent)}
.coin .f{font:400 calc(var(--s)*.42)/1 var(--f-script)}
.coin .b{transform:rotateY(180deg);font:400 calc(var(--s)*.2)/1.1 var(--f-display);text-align:center}
.thanks{font-size:clamp(34px,10vw,50px);line-height:1.05}
.sig{font-family:var(--f-script);font-size:clamp(40px,12vw,56px);color:var(--gold);line-height:1.1}


/* ---------- Siluetas de novios en las esquinas (tus imágenes, recoloreadas con máscara) ---------- */
.sil{position:absolute;z-index:0;width:clamp(58px,19vw,84px);height:clamp(70px,23vw,100px);pointer-events:none;color:var(--gold);opacity:.3;
  background:currentColor;-webkit-mask:var(--m) no-repeat left top/contain;mask:var(--m) no-repeat left top/contain;
  transform:scaleX(var(--f,1));animation:silFloat 9s ease-in-out infinite}
.sil.tl{top:10px;left:10px}.sil.tr{top:10px;right:10px;--f:-1;animation-delay:-2s}
.sil.bl,.sil.br{color:var(--oliva-oscuro);-webkit-mask-position:left bottom;mask-position:left bottom}
.sil.bl{bottom:10px;left:10px;animation-delay:-4s}.sil.br{bottom:10px;right:10px;--f:-1;animation-delay:-6s}
@keyframes silFloat{50%{transform:scaleX(var(--f,1)) translateY(-5px)}}

/* ---------- Puntos de navegación ---------- */
#dots{position:fixed;z-index:35;top:50%;transform:translateY(-50%);right:max(16px,env(safe-area-inset-right,0px));display:grid;
  background:color-mix(in srgb,var(--oliva-prof) 50%,transparent);border-radius:999px;padding:6px 0;opacity:0;pointer-events:none;transition:opacity .6s}
.live #dots{opacity:1;pointer-events:auto}
.dot{width:24px;height:26px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.dot::before{content:"";width:5px;height:5px;border-radius:5px;background:color-mix(in srgb,var(--papel) 45%,transparent);transition:all .35s}
.dot[aria-current=true]::before{height:16px;background:var(--crema)}

/* ---------- Reproductor ---------- */
.player{position:fixed;z-index:40;top:calc(24px + env(safe-area-inset-top,0px));right:calc(max(16px,env(safe-area-inset-right,0px)) + 10px);
  display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--oliva-prof) 62%,transparent);border:1px solid var(--line);border-radius:999px;padding:5px;opacity:0;pointer-events:none;transition:opacity .6s}
.live .player{opacity:1;pointer-events:auto}
.pbtn{width:40px;height:40px;border-radius:50%;border:0;background:var(--crema);color:var(--oliva);cursor:pointer;display:grid;place-items:center;flex:none}
.eq{display:flex;gap:2px;align-items:flex-end;height:16px}
.eq i{width:3px;background:var(--oliva);border-radius:2px;height:4px}
.playing .eq i{animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{50%{height:16px}}
.pfile{border:1px solid var(--line);background:transparent;border-radius:50%;width:34px;height:34px;cursor:pointer;display:grid;place-items:center;flex:none}
.pfile svg{width:15px;height:15px;stroke:var(--papel);fill:none;stroke-width:1.6}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.s1{--m:url("/img/siluetas/s1.png")}
.s2{--m:url("/img/siluetas/s2.png")}
.s3{--m:url("/img/siluetas/s3.png")}
.s4{--m:url("/img/siluetas/s4.png")}
.s5{--m:url("/img/siluetas/s5.png")}
.s6{--m:url("/img/siluetas/s6.png")}
.s7{--m:url("/img/siluetas/s7.png")}
.s8{--m:url("/img/siluetas/s8.png")}