/* 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}}