/* Lacre · motor de invitaciones (estilos base; cada plantilla define sus colores en :root) */
@font-face{font-family:"Cor";font-weight:400;src:url(/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cor";font-weight:400;font-style:italic;src:url(/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cor";font-weight:500;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cor";font-weight:600;src:url(/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Script";font-weight:400;src:url(/fonts/great-vibes-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"FT";font-weight:400;src:url(/fonts/figtree-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"FT";font-weight:700;src:url(/fonts/figtree-latin-700-normal.woff2) format("woff2");font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:"Cor",serif;font-size:20px;line-height:1.5;-webkit-font-smoothing:antialiased}
body.cerrado{overflow:hidden;height:100svh}
img{display:block;max-width:100%}
a{color:inherit}
.script{font-family:"Script",cursive;font-weight:400;line-height:1}
.caps{font-family:"FT",sans-serif;text-transform:uppercase;letter-spacing:.32em;font-size:12px;font-weight:700}
.acc{color:var(--acc)}
.muted{color:var(--muted)}

/* barra de demo */
.demo{position:fixed;left:0;right:0;top:0;z-index:60;background:#FFD400;color:#0A0A08;font:700 12.5px/1.3 "FT",sans-serif;text-align:center;padding:7px 12px}
.demo a{font-weight:700}

/* ===== sobre con lacre =====
   0.0s se parte el sello · 0.35s se abre la tapa · 1.2s sale la tarjeta · 2.4s el sobre se va
   2.6s la tarjeta se acerca · 2.9s aparece la invitación */
:root{--papel:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.sobre{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--sobre-bg);transition:opacity .7s ease 2.9s,visibility 0s linear 3.6s;overflow:hidden}
.sobre .env{position:relative;width:min(82vw,380px);aspect-ratio:1.45;margin-top:30px;perspective:1300px}
.sobre .env::before{content:"";position:absolute;inset:0;z-index:0;border-radius:5px;background:var(--papel),var(--env2);box-shadow:0 22px 44px -12px rgba(0,0,0,.38),0 3px 8px rgba(0,0,0,.12)}
.sobre .carta{position:absolute;left:5%;right:5%;top:6%;bottom:5%;z-index:1;border-radius:3px;background:var(--papel),var(--carta,#FBF7EE);box-shadow:0 1px 6px rgba(0,0,0,.14);display:grid;place-items:center;text-align:center;color:var(--carta-ink,#2E2A24);padding:4% 8% 0;transition:transform 1.1s cubic-bezier(.3,.7,.2,1) 1.2s}
.sobre .carta .script{font-size:clamp(32px,9vw,44px);line-height:1}
/* frente: solapas laterales + solapa inferior con su pliegue */
.sobre .frente{position:absolute;inset:0;z-index:2;border-radius:5px;overflow:hidden;background:var(--papel),linear-gradient(180deg,rgba(0,0,0,.10),transparent 35%),var(--env);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.sobre .frente::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(0,0,0,.16);clip-path:polygon(0 100%,0 99%,50% 47%,100% 99%,100% 100%);filter:blur(.4px)}
.sobre .frente::before{content:"";position:absolute;inset:0;z-index:1;background:var(--papel),linear-gradient(0deg,rgba(0,0,0,.05),rgba(255,255,255,.10) 70%),var(--env);clip-path:polygon(0 100%,50% 49%,100% 100%)}
/* tapa con punta apenas redondeada; el forro se ve al abrir */
.sobre .tapa{position:absolute;left:0;right:0;top:0;height:58%;z-index:3;transform-origin:50% 0;transform-style:preserve-3d;filter:drop-shadow(0 2px 2.5px rgba(0,0,0,.22));transition:transform 1s cubic-bezier(.55,.05,.35,1) .35s,z-index 0s linear .85s}
.sobre .tapa::before,.sobre .tapa::after{content:"";position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sobre .tapa::before{clip-path:polygon(0 0,100% 0,53.5% 95%,51.5% 98.8%,50% 100%,48.5% 98.8%,46.5% 95%);border-radius:5px 5px 0 0;background:var(--papel),linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.04) 85%),var(--env)}
.sobre .tapa::after{clip-path:polygon(0 100%,100% 100%,53.5% 5%,51.5% 1.2%,50% 0,48.5% 1.2%,46.5% 5%);transform:rotateX(180deg);background:var(--forro,var(--env2))}
/* sello de cera */
.sobre .sello{position:absolute;left:50%;top:57%;width:21%;transform:translate(-50%,-50%);z-index:4;cursor:pointer;border:0;background:none;padding:0;color:var(--sobre-ink)}
.sobre .sello img{width:100%}
.sobre .sello .entero{filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)) drop-shadow(0 5px 8px rgba(0,0,0,.18))}
.sobre .sello::after{content:"";position:absolute;inset:9%;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,240,210,.55) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0;mix-blend-mode:soft-light;animation:destello 3.4s ease-in-out 1s infinite}
.sobre .sello .mitad{position:absolute;inset:0;transition:transform .8s cubic-bezier(.5,0,.9,.5),opacity .45s ease .32s}
.sobre .sello .m1{clip-path:polygon(0 0,53.5% 0,47.5% 40%,56.5% 62%,49.5% 100%,0 100%)}
.sobre .sello .m2{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%,55% 62%,46% 40%)}
.sobre .sello .entero{opacity:0}
.sobre .sello .sombra{position:absolute;inset:6%;border-radius:50%;box-shadow:0 3px 4px rgba(0,0,0,.28),0 8px 16px rgba(0,0,0,.16);transition:opacity .3s}
.sobre.abierto .sello .sombra{opacity:0}
@keyframes destello{0%,55%{background-position:130% 0}85%,100%{background-position:-30% 0}}
.sobre .para{position:absolute;left:0;right:0;top:calc(50% - min(82vw,380px)/2.9 - 92px);text-align:center;color:var(--sobre-ink);transition:opacity .5s}
.sobre .para .caps{font-size:10.5px;letter-spacing:.38em;opacity:.7}
.sobre .para .script{font-size:42px;margin-top:6px}
.sobre .pista{position:absolute;left:0;right:0;top:calc(50% + min(82vw,380px)/2.9 + 54px);text-align:center;color:var(--sobre-ink);font:italic 400 19px/1.3 "Cor",serif;letter-spacing:.02em;text-transform:none;opacity:.72;transition:opacity .5s}
.sobre.abierto{opacity:0;visibility:hidden}
.sobre.abierto .sello{pointer-events:none}
.sobre.abierto .sello::after{animation:none;opacity:0}
.sobre.abierto .sello .m1{transform:translate(-22px,150px) rotate(-36deg);opacity:0}
.sobre.abierto .sello .m2{transform:translate(22px,150px) rotate(32deg);opacity:0}
.sobre.abierto .tapa{transform:rotateX(180deg);z-index:0;filter:none}
.sobre.abierto .pista,.sobre.abierto .para{opacity:0}
/* invitación a pantalla completa: la tarjeta sale, el sobre baja y la tarjeta se acerca */
.sobre:not(.local).abierto .carta{animation:sale 3.4s cubic-bezier(.4,0,.2,1) forwards;transition:none}
.sobre:not(.local).abierto .env::before,.sobre:not(.local).abierto .frente{animation:baja .7s ease-in 2.35s forwards}
.sobre:not(.local).abierto .tapa::after{animation:apaga .5s ease-in 2.35s forwards}
@keyframes sale{0%,35%{transform:none}64%{transform:translateY(-70%)}76%{transform:translateY(-70%)}100%{transform:translateY(-20%) scale(1.45)}}
@keyframes baja{to{transform:translateY(40%);opacity:0}}
@keyframes apaga{to{opacity:0}}
.sobre.local.abierto .carta{transform:translateY(-60%)}

/* texto dorado tipo foil, con brillo que pasa */
.oro{background:linear-gradient(100deg,var(--oro1,#A8782A) 0%,var(--oro2,#F6E3A1) 22%,var(--oro1,#B8862F) 40%,var(--oro3,#E9C976) 60%,var(--oro2,#FFF1C2) 74%,var(--oro1,#A8782A) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 7s linear infinite}
@keyframes brillo{to{background-position:-220% 0}}
/* polvo dorado */
.polvo{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.polvo i{position:absolute;bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:var(--polvo,#E9C976);box-shadow:0 0 6px var(--polvo,#E9C976);opacity:0;animation:sube var(--d) linear var(--w) infinite}
@keyframes sube{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}90%{opacity:.6}100%{transform:translate(var(--x),-105vh);opacity:0}}
main,header,section,footer{position:relative;z-index:1}

/* ===== secciones ===== */
section{padding:84px 24px;text-align:center;position:relative}
.wrap{max-width:560px;margin:0 auto}
.titulo{font-size:15px;margin-bottom:10px;color:var(--acc)}
h2{font-family:"Cor",serif;font-weight:500;font-size:clamp(34px,8vw,46px);line-height:1.05;letter-spacing:.01em}
.orn{display:flex;align-items:center;gap:14px;justify-content:center;margin:20px auto;color:var(--acc);max-width:240px}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:currentColor;opacity:.6}
.orn i{width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 13px/1 "FT",sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:17px 26px;border-radius:999px;background:var(--acc);color:var(--btn-ink);text-decoration:none;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn.line{background:none;color:var(--ink);border:1px solid var(--line2)}

/* revelado al bajar */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* palabras que rotan */
.rot{display:inline-grid;vertical-align:bottom}
.rot span{grid-area:1/1;opacity:0;transform:translateY(60%);filter:blur(6px);transition:opacity .8s,transform .8s,filter .8s}
.rot span.on{opacity:1;transform:none;filter:none}
.rot span.off{opacity:0;transform:translateY(-60%);filter:blur(6px)}

/* cuenta regresiva */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}
.cd div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 4px 12px}
.cd b{display:block;font:500 clamp(34px,9vw,46px)/1 "Cor",serif;font-variant-numeric:tabular-nums}
.cd b.tick{animation:tick .5s ease}
.cd small{font:700 10px/1 "FT",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@keyframes tick{0%{transform:translateY(-30%);opacity:0}100%{transform:none;opacity:1}}

/* cronograma */
.crono{list-style:none;text-align:left;margin-top:26px;position:relative;padding-left:26px}
.crono::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--line2)}
.crono li{position:relative;padding:0 0 22px}
.crono li::before{content:"";position:absolute;left:-25px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 5px var(--bg)}
.crono b{font:700 13px/1 "FT",sans-serif;letter-spacing:.14em;color:var(--acc)}
.crono span{display:block;font-size:22px}

/* formulario */
form{display:grid;gap:12px;text-align:left;margin-top:24px}
label{font:700 11px/1 "FT",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
input,textarea,select{width:100%;font:400 16px/1.4 "FT",sans-serif;color:var(--ink);background:var(--field);border:1px solid var(--line2);border-radius:12px;padding:14px;margin-top:6px}
textarea{min-height:84px;resize:vertical}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:block;text-align:center;font:700 13px/1 "FT",sans-serif;padding:15px 8px;border-radius:12px;border:1px solid var(--line2);cursor:pointer;color:var(--ink)}
.opts input:checked+span{background:var(--acc);color:var(--btn-ink);border-color:var(--acc)}
.alias{font:700 18px/1.2 "FT",sans-serif;letter-spacing:.06em;margin:6px 0 14px;word-break:break-all}

/* aviso */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,160%);opacity:0;background:#111;color:#fff;font:400 14px/1.4 "FT",sans-serif;padding:13px 18px;border-radius:14px;z-index:70;max-width:min(92vw,420px);transition:transform .4s;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.toast.on{transform:translate(-50%,0);opacity:1}
.pie{padding:40px 24px 70px;text-align:center;font:400 13px/1.5 "FT",sans-serif;color:var(--muted)}
.pie img{width:46px;margin:0 auto 8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* mapa de Google dentro de la invitación (en plantillas oscuras se ve en modo noche) */
.mapa-embed{position:relative;margin:22px auto 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--card)}
.mapa-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:var(--mapa-filtro,none)}

/* ===== apertura en video (opcional: INV.video) ===== */
.intro{position:fixed;inset:0;z-index:55;background:#050505;cursor:pointer;transition:opacity 1.1s ease,visibility 0s linear 1.1s}
.intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.intro .v2{opacity:0}
.intro.play .v2{opacity:1}
.intro .txt{position:absolute;left:0;right:0;top:9%;text-align:center;color:#F4EEE2;text-shadow:0 2px 18px rgba(0,0,0,.7);transition:opacity .6s}
.intro .txt .caps{font-size:10.5px;letter-spacing:.38em;opacity:.8}
.intro .txt .script{font-size:46px;margin-top:6px}
.intro .tocar{position:absolute;left:0;right:0;bottom:10%;text-align:center;color:#F4EEE2;font:italic 400 20px/1.3 "Cor",serif;letter-spacing:.02em;text-shadow:0 2px 14px rgba(0,0,0,.8);animation:respira 2.6s ease-in-out infinite}
@keyframes respira{50%{opacity:.45}}
.intro.play .txt,.intro.play .tocar{opacity:0;animation:none}
.intro.fuera{opacity:0;visibility:hidden}

/* ajustes de revisión */
html{background:var(--bg)}
.crono{max-width:360px;margin:26px auto 0}
@media (max-width:400px){.btn{letter-spacing:.11em;padding:16px 20px;font-size:12px}.cd{gap:7px}.dato{font-size:20px!important}}

/* secciones agregadas desde el editor */
.hist{display:grid;gap:22px;margin-top:26px;text-align:left}
.hist>div{border-left:1px solid var(--line2);padding:0 0 0 20px;position:relative}
.hist>div::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--acc)}
.hist b{font:700 12px/1 "FT",sans-serif;letter-spacing:.16em;color:var(--acc)}
.hist h3{font:500 26px/1.15 "Cor",serif;margin:6px 0 4px}
.hist p{color:var(--muted);font-size:18px}
.gal{margin-top:26px}
.gal img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.gal-carrusel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.gal-carrusel figure{flex:0 0 78%;aspect-ratio:3/4;scroll-snap-align:center}
.gal-grilla{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gal-grilla figure{aspect-ratio:1}
.gal-mosaico{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:140px;gap:8px}
.gal-mosaico figure:nth-child(3n+1){grid-row:span 2}
.gal-polaroid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:8px}
.gal-polaroid figure{background:#fff;padding:8px 8px 30px;box-shadow:0 10px 24px rgba(0,0,0,.18);transform:rotate(var(--r));aspect-ratio:.82}
.gal-polaroid img{border-radius:2px}
.spot{margin-top:24px;border-radius:14px;overflow:hidden}
.spot iframe{width:100%;border:0;display:block}

/* terminaciones (revisión con Fiestly) */
html.ed{scrollbar-width:none}html.ed::-webkit-scrollbar{display:none}
.hero{padding-left:24px;padding-right:24px}
.hero .frase{text-align:center;max-width:460px;margin-left:auto;margin-right:auto}
.hero-cta{margin-top:22px}
.crono small{display:block;color:var(--muted);font-size:16px;margin-top:2px}
.gal-w{position:relative;margin-top:26px}
.gal-w .gal{margin-top:0}
.gal-carrusel{scrollbar-width:none;padding-bottom:0}
.gal-carrusel::-webkit-scrollbar{display:none}
.gal-carrusel figure{flex-basis:82%}
.gal-carrusel:has(figure:only-child) figure{flex-basis:100%}
.gal-f{position:absolute;top:calc(50% - 24px);width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#222;font-size:22px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.2);cursor:pointer}
.gal-f.a{left:6px}.gal-f.s{right:6px}
.gal-p{display:flex;justify-content:center;gap:6px;margin-top:14px}
.gal-p i{width:6px;height:6px;border-radius:9px;background:var(--line2);transition:width .3s,background .3s}
.gal-p i.on{width:20px;background:var(--acc)}
.reg{display:grid;gap:10px;margin-top:20px}
.regc{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:var(--ink);font-size:21px}
.regc small{font:700 11px/1 "FT",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);white-space:nowrap}
.cierre-inv{padding:90px 24px;text-align:center}
.cierre-inv .script{font-size:clamp(64px,18vw,96px);line-height:1.1;margin:8px 0}
.sobre .carta{align-items:start;padding-top:9%}

/* letra cursiva dorada: aire a los costados para que no se corten los rulos de la primera y última letra */
.script.oro{display:inline-block;padding:.08em .22em .14em;margin-left:-.22em;margin-right:-.22em}
.sobre .carta .caps{letter-spacing:.24em;margin-right:-.24em}

/* celular: nada se sale de costado (iPhone) */
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}
.opts label{position:relative;display:block}
.opts input{left:0;top:0;width:1px;height:1px}

.intro.directo .v2{opacity:1}
.intro.directo.play .txt{opacity:0;transition:opacity .6s 1.2s}

/* portada: entra completa en la primera pantalla (foto, nombre, fecha y botón), en celular y en compu */
header.hero{min-height:100svh;justify-content:center;padding:44px 20px 20px}
header.hero .arco{width:min(64vw,280px,33svh);margin-top:14px;padding:6px}
header.hero .nombre{font-size:clamp(56px,min(18vw,11.5svh),104px);margin-top:10px;line-height:1.1}
header.hero .frase{font-size:clamp(18px,2.6svh,23px);margin-top:2px}
header.hero .orn{margin:10px auto}
header.hero .hero-cta{margin-top:16px}
header.hero .bajar{margin-top:18px}
header.hero .mono{width:min(120px,14svh);height:min(120px,14svh);margin-bottom:14px}
header.hero .mono span{font-size:min(48px,5.6svh)}
@media (max-height:620px){header.hero .bajar{display:none}}

/* aviso de ejemplo: discreto */
.demo{background:rgba(10,10,8,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:rgba(255,255,255,.82);font:400 11px/1.3 "FT",sans-serif;letter-spacing:.02em;padding:5px 12px}
.demo a{color:#fff;font-weight:700;text-underline-offset:2px}

/* edición en la vista previa */
@font-face{font-family:"Playfair";font-weight:600;src:url(/fonts/playfair-display-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cinzel";font-weight:500;src:url(/fonts/cinzel-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Pinyon";src:url(/fonts/pinyon-script-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Allura";src:url(/fonts/allura-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Dancing";font-weight:500;src:url(/fonts/dancing-script-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:500;src:url(/fonts/montserrat-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Oswald";font-weight:500;src:url(/fonts/oswald-latin-500-normal.woff2) format("woff2");font-display:swap}
.oculto{display:none!important}
html.ed .ed-t{cursor:text;outline:2px dashed transparent;outline-offset:5px;border-radius:4px;transition:outline-color .2s,opacity .2s}
html.ed .ed-t:hover,html.ed .ed-t:focus{outline-color:rgba(201,148,52,.9)}
html.ed .ed-t:focus{outline-style:solid}
html.ed .ed-oculto{opacity:.28;cursor:default}
.ed-bar{position:absolute;z-index:90;display:none;gap:7px}
.ed-bar.on{display:flex}
.ed-bar button{min-width:46px;height:46px;padding:0 12px;border-radius:99px;border:3px solid #fff;background:#1F1C17;color:#F2D58F;font:800 17px/1 "FT",sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap}
.ed-bar button:hover{background:#B8862F;color:#fff}
.ed-bar button.largo{background:#4A4A4A;color:#fff}

/* música */
.mus-btn{position:fixed;right:16px;bottom:16px;z-index:58;width:50px;height:50px;border-radius:50%;border:0;background:var(--acc);color:var(--btn-ink);box-shadow:0 8px 24px rgba(0,0,0,.3);cursor:pointer;display:grid;place-items:center;font-size:20px}
.mus-btn .ondas{display:none;gap:3px;align-items:flex-end;height:18px}
.mus-btn .ondas i{width:3px;background:currentColor;border-radius:2px;animation:onda 1s ease-in-out infinite}
.mus-btn .ondas i:nth-child(2){animation-delay:-.3s}.mus-btn .ondas i:nth-child(3){animation-delay:-.6s}
.mus-btn.suena .ondas{display:flex}.mus-btn.suena .play{display:none}
@keyframes onda{0%,100%{height:5px}50%{height:18px}}
.puerta{position:fixed;inset:0;z-index:52;display:grid;place-items:center;text-align:center;padding:24px;background:var(--bg);transition:opacity .8s}
.puerta>div{max-width:420px}
.puerta .script{font-size:clamp(64px,18vw,100px);line-height:1.1;margin:6px 0 10px}
.puerta .muted{margin-bottom:26px}
.puerta .btn{display:flex;width:100%;max-width:300px;margin:10px auto 0}
.puerta.fuera{opacity:0;pointer-events:none}
.intro~.puerta,.puerta{z-index:60}
.vinilo{width:150px;height:150px;margin:24px auto 0;border-radius:50%;background:repeating-radial-gradient(circle,#161616 0 2px,#262626 2px 4px);box-shadow:0 14px 40px rgba(0,0,0,.35);display:grid;place-items:center;animation:gira-v 6s linear infinite}
.vinilo i{width:52px;height:52px;border-radius:50%;background:var(--acc);box-shadow:inset 0 0 0 20px var(--acc),inset 0 0 0 24px rgba(0,0,0,.2)}
.vinilo i::after{content:"";display:block;width:8px;height:8px;margin:22px auto;border-radius:50%;background:#111}
@keyframes gira-v{to{transform:rotate(360deg)}}
.mus-btn[hidden]{display:none}

/* ===== estilos opcionales (se prenden en window.INV y se cambian en el editor) =====
   letras: 'caligrafica' | 'serif' · estiloBtn: 'papel' · aparicion: 'suave' · estiloCd: 'frase' | 'cartela' | 'hojas' | 'anillos'
   raspa (raspadita) · musicaModo: 'vinilo' · pedidos (pedí tu tema con corazones). Sin estos datos, todo queda como antes. */
/* letras */
body.letra-caligrafica .script{font-family:"Pinyon",cursive}
body:is(.letra-caligrafica,.letra-serif) :is(.caps,.titulo){font-family:"Cor",serif;font-weight:500;letter-spacing:.3em;font-variant-numeric:lining-nums}
body:is(.letra-caligrafica,.letra-serif) :is(.cd small,.crono b,.bajar){font-family:"Cor",serif;font-weight:500}
body.letra-serif .hero .nombre{font-family:"Cor",serif;font-style:italic;font-weight:400}
body.letra-serif .hero .nombre .amp{font-family:"Pinyon",cursive;font-style:normal}
/* botones y campos de papel: filete fino y letra serif espaciada; el principal en color con filete interior */
body.bt-papel .btn{background:none;color:var(--ink);border:1px solid currentColor;border-radius:2px;font:500 13px/1.25 "Cor",serif;letter-spacing:.24em;padding:16px 24px;position:relative;box-shadow:none;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s ease}
body.bt-papel .btn::after{content:"";position:absolute;inset:3px;border:1px solid transparent;border-radius:1px;transition:border-color .22s ease;pointer-events:none}
body.bt-papel .btn:hover{transform:none;box-shadow:none}
body.bt-papel .btn:hover::after,body.bt-papel .btn:focus-visible::after{border-color:var(--line)}
body.bt-papel .btn:active{transform:scale(.97)}
body.bt-papel :is(.hero-cta,#rsvp [type=submit],.ped [type=submit]){background:var(--acc);color:var(--btn-ink);border-color:var(--acc);box-shadow:inset 0 0 0 3px var(--acc),inset 0 0 0 4px rgba(255,255,255,.35)}
body.bt-papel :is(.hero-cta,#rsvp [type=submit],.ped [type=submit])::after{display:none}
body.bt-papel .btn.sellado::before{content:"";position:absolute;right:-13px;top:-13px;width:32px;height:32px;border-radius:50%;transform:rotate(-8deg);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),transparent 45%),var(--acc);box-shadow:0 2px 4px rgba(0,0,0,.25),inset 0 0 0 4px rgba(255,255,255,.07),inset 0 0 0 5px rgba(0,0,0,.14);animation:estampa .38s cubic-bezier(.2,1.4,.4,1)}
@keyframes estampa{from{opacity:0;transform:scale(1.6) rotate(-18deg)}to{opacity:1;transform:scale(1) rotate(-8deg)}}
body.bt-papel :is(input,select,textarea){background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:12px 2px 8px;font:400 19px/1.35 "Cor",serif;font-variant-numeric:lining-nums}
body.bt-papel :is(input,select,textarea):focus{outline:0;border-bottom-color:var(--acc)}
body.bt-papel label{font:500 11px/1.3 "Cor",serif;letter-spacing:.26em}
body.bt-papel .opts{grid-template-columns:1fr;gap:2px}
body.bt-papel .opts span{border:0;background:none;text-align:left;font:italic 400 20px/1.2 "Cor",serif;letter-spacing:0;text-transform:none;padding:10px 0 10px 30px;position:relative;color:var(--ink)}
body.bt-papel .opts span::before{content:"";position:absolute;left:2px;top:50%;width:15px;height:15px;margin-top:-8px;border:1px solid var(--acc);border-radius:50%}
body.bt-papel .opts span::after{content:"";position:absolute;left:6px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--acc);transform:scale(0);transition:transform .22s cubic-bezier(.16,1,.3,1)}
body.bt-papel .opts input:checked+span{background:none;color:var(--ink)}
body.bt-papel .opts input:checked+span::after{transform:scale(1)}
/* aparición suave: fundido sin moverse, fotos que enfocan, nombres letra por letra y ornamentos que se dibujan */
body.ap-suave .rv{transform:none;transition:opacity 1.1s cubic-bezier(.16,1,.3,1),filter 1.6s cubic-bezier(.16,1,.3,1),transform 1.2s ease}
body.ap-suave :is(img.rv,.rv img:not(.tapa)){filter:blur(9px) saturate(.75)}
body.ap-suave :is(img.rv.in,.rv.in img){filter:none;transition:opacity 1.2s ease,filter 1.8s cubic-bezier(.16,1,.3,1),transform 1.2s ease}
body.ap-suave .hero .nombre .l{display:inline-block;opacity:0;filter:blur(3px);transform:translateY(.12em)}
body.ap-suave .hero .nombre.in .l{opacity:1;filter:none;transform:none;transition:opacity .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 55ms + .25s)}
body.ap-suave .orn::before,body.ap-suave .orn::after{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.5,0,.2,1) .25s}
body.ap-suave .orn::before{transform-origin:right}body.ap-suave .orn::after{transform-origin:left}
body.ap-suave .orn i{opacity:0;transition:opacity .8s ease .1s}
body.ap-suave :is(.orn.in,.in .orn)::before,body.ap-suave :is(.orn.in,.in .orn)::after{transform:scaleX(1)}
body.ap-suave :is(.orn.in,.in .orn) i{opacity:1}
/* cuenta regresiva: estilos nuevos (la de cajitas queda igual) */
.cd[class*=" cd-"]{display:block;margin-top:22px}
.cd[class*=" cd-"] div,.cd[class*=" cd-"] span{background:none;border:0;border-radius:0;padding:0}
.cd-frase .cdf-g{font-size:clamp(42px,12vw,58px);line-height:1.1;color:var(--acc)}
.cd.cd-frase b{display:inline;font:inherit;font-weight:400;font-variant-numeric:lining-nums tabular-nums;animation:none}
.cd-frase .cdf-c{font:italic 400 20px/1.4 "Cor",serif;color:var(--muted);margin-top:6px;min-height:1.4em}
.cd-frase .cdf-c b{color:var(--ink);font-style:normal}
.cd.cd-cartela{position:relative;display:flex;padding:22px 8px 18px;margin:26px 8px 0;border:1px solid var(--line);outline:1px solid var(--line);outline-offset:4px}
.cd-cartela::before,.cd-cartela::after{content:"";position:absolute;top:50%;width:9px;height:9px;background:var(--bg);border:1px solid var(--acc);transform:translateY(-50%) rotate(45deg)}
.cd-cartela::before{left:-10px}.cd-cartela::after{right:-10px}
.cd-cartela .cdu{flex:1;min-width:0}
.cd.cd-cartela .cdu+.cdu{border-left:1px solid var(--line2)}
.cd[class*=" cd-"] .cdu{display:block}
.cd[class*=" cd-"] small{display:block;margin-top:8px;font:500 9.5px/1 "Cor",serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.rod{display:inline-flex;font:400 clamp(32px,9vw,42px)/1 "Cor",serif;height:1em;overflow:hidden;font-variant-numeric:lining-nums tabular-nums}
.rod .col{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.rod .col span{height:1em;line-height:1}
.cd.cd-hojas{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.hojas{perspective:300px;display:inline-flex;gap:3px}
.cd .hojas .h{width:28px;height:42px;background:var(--card);border:1px solid var(--line2);border-radius:3px;display:grid;place-items:center;font:400 28px/1 "Cor",serif;font-variant-numeric:lining-nums;position:relative;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.cd .hojas .h::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.07)}
.hojas .h.gira{animation:cdgira .52s cubic-bezier(.4,0,.2,1)}
@keyframes cdgira{50%{transform:rotateX(-90deg)}}
.cd.cd-anillos{display:flex;justify-content:center;gap:10px}
.anillo{position:relative;width:68px;height:68px;display:block}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo circle{fill:none;stroke-width:1.2}
.anillo .fondo{stroke:var(--line2)}
.anillo .arco{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:201;transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.cd .anillo .an-t{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.anillo b{font:400 23px/1 "Cor",serif;font-variant-numeric:lining-nums tabular-nums}
.cd.cd-anillos .anillo small{margin-top:3px;font-size:8px}
/* raspadita */
.raspa{position:relative;width:min(62vw,230px);aspect-ratio:3/4;margin:22px auto 6px;border-radius:50%;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 0 0 1px var(--line),0 0 0 6px var(--bg),0 0 0 7px var(--line),0 16px 34px rgba(0,0,0,.16)}
.raspa img{width:100%;height:100%;object-fit:cover;display:block}
.raspa canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;cursor:grab;transition:opacity .9s ease}
.raspa.revelada canvas{opacity:0;pointer-events:none}
.raspa .destello{position:absolute;inset:0;pointer-events:none;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,246,225,.65) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:130% 0;opacity:0}
.raspa.revelada .destello{animation:raspabrillo 1.4s ease .5s}
@keyframes raspabrillo{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-30% 0}}
.raspa-pie{font-style:italic;margin-top:14px;transition:opacity .6s}
.raspa.revelada~.raspa-pie{opacity:0}
/* música con vinilo y lista */
.vin{display:grid;place-items:center;margin:22px 0 4px}
.vin-disco{width:min(54vw,200px);aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle,transparent 0 29%,rgba(255,255,255,.05) 29.5%,transparent 30%),repeating-radial-gradient(circle,#1d1714 0 1.2px,#2a221e 1.6px 2.6px),#201a17;box-shadow:0 18px 34px rgba(0,0,0,.28);animation:vingira 5.5s linear infinite;animation-play-state:paused}
.vin-disco::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 8%,rgba(255,255,255,.1) 12%,transparent 18% 50%,rgba(255,255,255,.07) 58%,transparent 64%);pointer-events:none}
.vin-etq{width:36%;aspect-ratio:1;border-radius:50%;background:var(--acc) center/cover no-repeat;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 0 0 2px rgba(0,0,0,.4);position:relative}
.vin-etq::after{content:"";position:absolute;left:50%;top:50%;width:10%;height:10%;margin:-5% 0 0 -5%;border-radius:50%;background:#201a17}
.vin-disco.suena{animation-play-state:running}
@keyframes vingira{to{transform:rotate(360deg)}}
.pl{list-style:none;text-align:left;margin:16px auto 0;max-width:460px}
.pl li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:baseline;padding:10px 2px;border-bottom:1px solid var(--line2)}
.pl li[hidden]{display:none}
.pl-n{font:italic 400 17px/1 "Cor",serif;color:var(--acc);text-align:center}
.pl-t{min-width:0}
.pl-t b{display:block;font:500 18px/1.2 "Cor",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-t small{display:block;font:italic 400 15px/1.2 "Cor",serif;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl em{font:400 15px/1 "Cor",serif;font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.otra-lista{display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;font:700 11px/1 "FT",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px}
.spot-chico{margin-top:18px}.spot-chico iframe,.spot-chico>div{width:100%;height:152px;border:0;border-radius:12px}
.spot-nota{font-size:15px;margin-top:8px}
/* pedí tu tema */
.ped{display:flex;gap:10px;align-items:flex-end;margin:20px auto 0;max-width:460px;text-align:left}
.ped input{flex:1;min-width:0;margin:0}
.ped .btn{padding:14px 18px;flex:0 0 auto}
.ped[hidden]{display:none}
.ped-top{margin-top:30px}
.ped-top[hidden]{display:none}
.rank{list-style:none;text-align:left;margin:10px auto 0;max-width:460px}
.rank li{display:grid;grid-template-columns:26px 44px 1fr auto;gap:12px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line2);background:var(--bg);position:relative}
.rank li.nuevo{animation:pednuevo 1.6s ease}
@keyframes pednuevo{0%,30%{box-shadow:inset 0 0 0 999px rgba(217,183,106,.2)}}
.rank .pos{font:italic 400 24px/1 "Cor",serif;color:var(--muted);text-align:center;font-variant-numeric:lining-nums}
.rank li:nth-child(-n+3) .pos{color:var(--acc)}
.rank .tapa{width:44px;height:44px;border-radius:4px;object-fit:cover;display:grid;place-items:center;background:var(--acc);color:var(--btn-ink);font:400 22px/1 "Script",cursive}
.rank .tt{min-width:0}
.rank .tt b{display:block;font:500 18px/1.15 "Cor",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .tt small{display:block;font:italic 400 15px/1.2 "Cor",serif;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cor{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:8px 4px 8px 8px;color:var(--muted);font:400 17px/1 "Cor",serif;font-variant-numeric:lining-nums tabular-nums;-webkit-tap-highlight-color:transparent}
.cor svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;transition:fill .2s ease,stroke .2s ease}
.cor.si{color:var(--acc)}.cor.si svg{fill:currentColor}
.cor.pop svg{animation:corpop .38s cubic-bezier(.2,1.6,.4,1)}
@keyframes corpop{40%{transform:scale(1.28)}}
.cor:disabled{cursor:default;opacity:.7}
.ped-cuenta{font-style:italic;margin-top:12px}
@media (prefers-reduced-motion:reduce){
  body.ap-suave :is(img.rv,.rv img,.hero .nombre .l){filter:none!important;transform:none!important}
  .vin-disco{animation:none}
}
/* saludo de la invitación personalizada (?para=…) */
.saludo{margin:0 auto 16px;text-align:center}
.saludo .caps{display:block;font-size:10.5px;opacity:.8}
.saludo .script{display:block;font-size:clamp(28px,8vw,40px);line-height:1.15;color:var(--acc);margin-top:4px}
/* tono de las plantillas con tonos: cada plantilla define --tinte (filtro) para su video e imágenes */
.intro video{filter:var(--tinte,none)}