/* Estilos base y por plantilla de la invitación pública.
   Las variables (--bg, --ink, --accent…) las pone templates.js según la paleta elegida. */
:root{ --bg:#f7f3ea; --ink:#2f3a2f; --accent:#7a9a6b; --accent-2:#c9a35a; --soft:#e8eedf; --card:#ffffffcc; --c1:#7a9a6b; --c2:#c9a35a; --c3:#e8eedf; --c4:#a8bf9b;
  --f-head:"Playball",cursive; --f-script:"Playball",cursive; --f-body:"Cormorant Garamond",Georgia,serif; --name-size:4.2rem; --fs:19px; --btn-ink:#fff; --frame:#fff; }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--bg);color:var(--ink);font-size:var(--fs);line-height:1.55;overflow-x:hidden;-webkit-text-size-adjust:100%}
.script{font-family:var(--f-script);font-weight:400}
.hidden{display:none!important}
svg{display:block}

#fx{position:fixed;inset:0;z-index:0;pointer-events:none}
main,footer{position:relative;z-index:1}

/* ---------- carga ---------- */
#estado{min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem;position:relative;z-index:2}
#estado p{opacity:.7}

/* ---------- sobre (3 variantes) ---------- */
#sobre{position:fixed;inset:0;z-index:50;background:var(--soft);display:grid;place-items:center;transition:opacity .9s ease,visibility .9s}
#sobre.out{opacity:0;visibility:hidden}
.sobre-wrap{text-align:center;padding:1.5rem;max-width:420px}
.sobre-wrap .para{font-size:1rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:.4rem}
.sobre-wrap h1{font-family:var(--f-script);font-weight:400;font-size:2.6rem;line-height:1.1;margin-bottom:1.6rem;overflow-wrap:anywhere}
#envelope{margin:0 auto 1.8rem;cursor:pointer;position:relative;transition:transform .3s}
#envelope:active{transform:scale(.97)}
/* sobre con sello */
.sobre-sello{width:260px;height:170px;background:#fff;border-radius:6px;box-shadow:0 14px 40px #0002}
.sobre-sello::before{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(160deg,transparent 49%,#0000000d 50%) left/50% 100% no-repeat,linear-gradient(200deg,transparent 49%,#0000000d 50%) right/50% 100% no-repeat}
.sobre-sello .flap{position:absolute;left:0;right:0;top:0;height:60%;background:linear-gradient(#fff,#f1ede3);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 3px #0002);transform-origin:top;transition:transform .7s}
.sobre-sello.open .flap{transform:rotateX(180deg)}
.sobre-sello .seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--accent-2),color-mix(in srgb,var(--accent-2) 55%,#000));box-shadow:0 4px 10px #0004;display:grid;place-items:center;color:#fff;font-family:var(--f-script);font-size:1.7rem;z-index:2;transition:opacity .4s}
.sobre-sello.open .seal{opacity:0}
/* regalo */
.sobre-regalo{width:210px;height:200px}
.sobre-regalo .g-box{position:absolute;left:14px;right:14px;bottom:0;height:120px;background:var(--accent);border-radius:8px;box-shadow:0 12px 0 #0002}
.sobre-regalo .g-box::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:30px;transform:translateX(-50%);background:var(--c3)}
.sobre-regalo .g-lid{position:absolute;left:4px;right:4px;bottom:112px;height:44px;background:var(--accent);border-radius:8px;transition:transform .6s cubic-bezier(.3,1.6,.5,1),opacity .5s .2s;filter:brightness(1.1)}
.sobre-regalo .g-lid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:30px;transform:translateX(-50%);background:var(--c3)}
.sobre-regalo .g-lid::after{content:"";position:absolute;left:50%;top:-26px;width:56px;height:30px;transform:translateX(-50%);border:8px solid var(--c3);border-radius:50% 50% 8px 8px / 100% 100% 8px 8px;border-bottom:0}
.sobre-regalo.open .g-lid{transform:translateY(-70px) rotate(-16deg);opacity:0}
.sobre-regalo .g-spark{position:absolute;left:50%;top:50px;width:10px;height:10px;opacity:0;background:var(--accent-2);border-radius:50%;box-shadow:-40px 10px 0 var(--c3),40px 0 0 var(--c1),-20px -30px 0 var(--accent-2),26px -26px 0 var(--c3);transition:opacity .4s .2s,transform .6s .2s}
.sobre-regalo.open .g-spark{opacity:1;transform:translateY(-30px) scale(1.4)}
/* entrada / ticket */
.sobre-ticket{width:290px;height:150px;border-radius:12px;display:flex;background:var(--accent);color:var(--btn-ink);transition:transform .7s,opacity .7s;-webkit-mask:radial-gradient(circle 12px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 12px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.sobre-ticket .tk-l{flex:1;padding:1.1rem 1rem;display:flex;flex-direction:column;justify-content:center;text-align:left;border-right:2px dashed color-mix(in srgb,var(--btn-ink) 55%,transparent)}
.sobre-ticket small{letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;opacity:.85}
.sobre-ticket b{font-family:var(--f-head);font-size:1.7rem;line-height:1.1;margin-top:.3rem;overflow-wrap:anywhere}
.sobre-ticket .tk-r{width:74px;display:grid;place-items:center;font-family:var(--f-head);font-size:1.3rem;letter-spacing:.14em;writing-mode:vertical-rl;transform:rotate(180deg)}
.sobre-ticket.open{transform:translateY(-14px) rotate(-4deg);opacity:.0}
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1.8rem;border-radius:999px;background:var(--accent);color:var(--btn-ink);text-decoration:none;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.07)}.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--accent)}

/* ---------- contenido ---------- */
section{position:relative;padding:3rem 1.4rem;max-width:560px;margin:0 auto;text-align:center}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
.eyebrow{letter-spacing:.26em;text-transform:uppercase;font-size:.9rem;opacity:.8}
h2.sec{font-family:var(--f-head);font-weight:400;font-size:2.4rem;line-height:1.15;color:var(--accent);margin:.2rem 0 1rem}
.sep{width:min(200px,60%);height:auto;margin:1rem auto}
.hero{padding-top:3.4rem}
.hero:has(.rama){padding-top:8.4rem}
.nombre{font-family:var(--f-script);font-weight:400;font-size:min(var(--name-size),15.5vw);line-height:1.05;margin:.5rem 0 .2rem;overflow-wrap:break-word}
.titulo{font-family:var(--f-head);font-size:1.9rem;color:var(--accent);line-height:1.2}
.nombre.nom2{display:flex;flex-direction:column;align-items:center}
.nombre.nom2 i{font-style:normal;font-size:.5em;opacity:.7}

.foto{position:relative;margin:1.8rem auto;width:min(78%,300px)}
.foto img{width:100%;display:block;object-fit:cover;aspect-ratio:var(--ar,3/4)}
.f-arch{border-radius:999px 999px 18px 18px;overflow:hidden;box-shadow:0 18px 44px #0003;border:6px solid var(--frame);background:var(--soft)}
.f-circle{border-radius:50%;overflow:hidden;box-shadow:0 14px 36px #0003;border:6px solid var(--frame);--ar:1}
.f-oval{padding:9px;border:2px solid var(--accent-2);border-radius:50%;background:var(--bg);box-shadow:0 14px 36px #0002}
.f-oval img{border-radius:50%}
.f-frame{--ar:4/5;padding:10px;border:1px solid var(--accent);outline:1px solid var(--accent);outline-offset:7px;background:var(--soft)}
.f-polaroid{--ar:1;background:#fff;padding:12px 12px 56px;transform:rotate(-3deg);box-shadow:0 14px 30px #0004}
.f-polaroid::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:28px;margin-left:-48px;background:#e4cf9ccc;transform:rotate(3deg);box-shadow:0 1px 3px #0002}
.f-polaroid::after{content:attr(data-cap);position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--f-script);font-size:1.9rem;color:#4a3626}
.f-sticker{--ar:1;border-radius:50%;overflow:hidden;border:7px solid var(--accent);box-shadow:9px 9px 0 var(--accent-2)}
.f-porthole{--ar:1;padding:11px;border-radius:50%;background:conic-gradient(#e9ecff,#7c88d6,#e9ecff,#7c88d6,#e9ecff);box-shadow:0 0 0 5px var(--soft),0 0 40px #7a8cff88}
.f-porthole img{border-radius:50%;border:5px solid var(--bg)}
.f-slant{--ar:4/5;border:3px solid var(--accent);transform:rotate(2deg);box-shadow:0 0 22px var(--accent),inset 0 0 18px color-mix(in srgb,var(--accent) 40%,transparent);background:var(--soft)}
.f-slant::before{content:"";position:absolute;inset:0;transform:translate(11px,11px);border:3px solid var(--accent-2);box-shadow:0 0 18px var(--accent-2);z-index:-1}
.f-full{--ar:4/5;width:100%;margin:2rem 0}
.f-full img{filter:grayscale(.9) contrast(1.05)}

/* fecha */
.fecha{margin:.6rem auto;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:1.2rem;grid-template-areas:"dia dow" "dia mes" "dia anio";text-align:left}
.fecha .dia{grid-area:dia;font-family:var(--f-script);font-size:5.6rem;line-height:1;color:var(--accent-2)}
.fecha .d-dow{grid-area:dow;text-transform:uppercase;letter-spacing:.12em;font-size:1.1rem;align-self:end}
.fecha .d-mes{grid-area:mes;text-transform:uppercase;letter-spacing:.12em;font-size:1.1rem}
.fecha .d-anio{grid-area:anio;text-transform:uppercase;letter-spacing:.12em;font-size:1.1rem;align-self:start}
[data-date="line"] .fecha{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.2rem 1rem;text-align:center}
[data-date="line"] .fecha .d-dow,[data-date="line"] .fecha .d-mes,[data-date="line"] .fecha .d-anio,[data-date="badge"] .fecha *{align-self:auto}
[data-date="line"] .fecha .d-dow{flex-basis:100%;order:-1;margin-bottom:.2rem;text-align:center}
[data-date="line"] .fecha .dia{font-size:3rem}
[data-date="line"] .fecha .d-mes,[data-date="line"] .fecha .d-anio{font-size:1.25rem}
[data-date="line"] .fecha .d-mes::before,[data-date="line"] .fecha .d-anio::before{content:"/";margin-right:1rem;opacity:.5}
[data-date="badge"] .fecha{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
[data-date="badge"] .fecha .dia{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--accent);color:var(--btn-ink);font-size:3.6rem;box-shadow:6px 6px 0 var(--accent-2);margin-bottom:.8rem}
[data-date="badge"] .fecha .d-dow{order:-1;font-size:1rem;margin-bottom:.6rem}
.hora{margin-top:.4rem}
.cuenta{display:flex;justify-content:center;gap:.55rem;margin-top:1.4rem;font-variant-numeric:tabular-nums}
.cuenta div{background:var(--card);border-radius:14px;padding:.7rem .6rem;min-width:58px;box-shadow:0 4px 14px #0001}
.cuenta b{display:block;font-size:1.7rem;font-weight:600;line-height:1.1}
.cuenta span{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

.edad-num{font-family:var(--f-script);line-height:1}
.edad{margin:.4rem 0;line-height:1}
.edad-lbl{display:block;text-transform:uppercase;letter-spacing:.3em;font-size:.8rem;margin-top:.5rem;opacity:.85;font-family:var(--f-body)}
.edad-wrap + .edad-lbl{margin-top:.2rem}
[data-age="burbuja"] .edad-lbl{margin-top:.9rem;font-family:var(--f-head);font-size:1rem;letter-spacing:.14em;font-weight:600}
[data-age="neon"] .edad-lbl{font-family:var(--f-head);font-size:1.6rem;letter-spacing:.4em;color:var(--accent-2);text-shadow:0 0 12px var(--accent-2)}
[data-age="grande"] .edad-num{font-family:var(--f-head);font-size:6rem;font-weight:500;background:linear-gradient(180deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-age="script"] .edad-num,[data-age="none"] .edad-num{font-size:5.4rem;color:var(--accent-2)}
[data-age="burbuja"] .edad-num{display:inline-grid;place-items:center;min-width:112px;height:112px;padding:0 .5rem;border-radius:50%;background:var(--accent);color:var(--btn-ink);font-size:4.4rem;box-shadow:7px 7px 0 var(--accent-2);transform:rotate(-6deg)}
[data-age="neon"] .edad-num{font-size:9rem;color:transparent;-webkit-text-stroke:2px var(--accent);text-shadow:0 0 18px var(--accent),0 0 42px var(--accent);line-height:.95}
.edad-wrap{position:relative;width:200px;margin:1.2rem auto .4rem}
.edad-wrap .laurel{width:200px}
.edad-wrap .edad-num{position:absolute;left:0;right:0;top:50%;transform:translateY(-52%);font-family:var(--f-head);font-size:4.6rem;font-weight:700;color:var(--accent)}

.mensaje{font-style:italic;font-size:1.3rem}
.padres{margin-top:1.4rem;font-size:1.1rem}
.padres b{display:block;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;opacity:.7;font-weight:400;margin-bottom:.15rem}

.programa{list-style:none;margin-top:1rem;text-align:left;position:relative}
.programa::before{content:"";position:absolute;left:6.3rem;top:.4rem;bottom:.4rem;width:1px;background:var(--accent);opacity:.5}
.programa li{display:flex;gap:1.4rem;padding:.7rem 0;align-items:baseline}
.programa time{flex:0 0 5.2rem;text-align:right;font-weight:600;color:var(--accent);white-space:nowrap}
.programa span{position:relative;padding-left:1.2rem}
.programa span::before{content:"";position:absolute;left:-.28rem;top:.62rem;width:9px;height:9px;border-radius:50%;background:var(--accent-2)}
.nombre-lugar{font-size:1.5rem;font-weight:600}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.2rem}

.galeria{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;box-shadow:0 8px 22px #0002}
.galeria img:nth-child(3n+1){border-radius:999px 999px 14px 14px;aspect-ratio:3/4}

form{margin-top:1.2rem;text-align:left;background:var(--card);padding:1.4rem;border-radius:18px;box-shadow:0 10px 30px #0001}
label{display:block;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin:.8rem 0 .3rem}
input[type=text],textarea{width:100%;font:inherit;font-size:1.05rem;padding:.7rem .9rem;border:1px solid #0003;border-radius:10px;background:#fff;color:#222}
input:focus,textarea:focus{outline:2px solid var(--accent);border-color:transparent}
textarea{min-height:90px;resize:vertical}
.acomp{display:flex;gap:.5rem;margin-bottom:.5rem}
.acomp button{border:0;background:#0000001a;border-radius:10px;width:44px;cursor:pointer;font-size:1.3rem;color:#222}
.link-btn{background:none;border:0;color:var(--accent);font:inherit;font-size:1rem;cursor:pointer;text-decoration:underline;padding:.2rem 0}
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
.gracias{padding:1.6rem;text-align:center}
.gracias .script{font-size:2.4rem;color:var(--accent)}
.error{color:#ff6b5e;font-size:1rem;margin-top:.6rem}
.cierre .nombre-cierre{font-family:var(--f-script);font-size:2.2rem;color:var(--accent)}
footer{padding:2rem 1rem 4.5rem;text-align:center;font-size:.9rem;opacity:.55}

/* ---------- decoración ---------- */
.rama{position:absolute;width:104px;opacity:.9;pointer-events:none;top:0}
.rama.tl{left:0}.rama.tr{right:0;transform:scaleX(-1)}
.top-center{position:absolute;top:.4rem;left:50%;transform:translateX(-50%);width:min(330px,92%);pointer-events:none}
.top-center svg{width:100%;height:auto}
.hero:has(.top-center){padding-top:8.8rem}
.corona-w{width:130px;top:1.2rem}.paloma-w{width:150px;top:1.6rem}.caliz-w{width:78px;top:1.6rem}.copas-w{width:150px;top:1.4rem}
.cohete-w{position:absolute;left:.6rem;top:.6rem;width:58px;transform:rotate(-24deg)}
#petalos{position:fixed;inset:0;pointer-events:none;z-index:10;overflow:hidden}
.pt{position:absolute;pointer-events:none;--cc:var(--accent)}
.k-petalo{top:-30px;width:14px;height:18px;border-radius:70% 0 70% 0;background:var(--cc);animation:caer linear infinite}
.k-confeti{top:-20px;width:8px;height:14px;border-radius:2px;background:var(--cc);animation:caer linear infinite}
.k-nieve{top:-14px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:caer linear infinite}
.k-globo{opacity:.55;bottom:-80px;width:26px;height:32px;border-radius:50% 50% 48% 48%;background:var(--cc);animation:subir linear infinite}
.k-globo::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:34px;background:#0006}
.k-burbuja{bottom:-40px;border-radius:50%;border:1.5px solid var(--cc);background:radial-gradient(circle at 32% 30%,color-mix(in srgb,var(--cc) 45%,transparent) 0 18%,transparent 40%);opacity:.8;animation:subir linear infinite}
.k-luz{bottom:-30px;border-radius:50%;background:radial-gradient(circle,var(--cc),#0000 70%);animation:subir linear infinite}
.k-estrella{width:16px;height:16px;background:var(--cc);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:titilar ease-in-out infinite}
.k-chispa{width:16px;height:16px;background:var(--cc);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:titilar ease-in-out infinite}
.k-corazon{top:-24px;width:18px;height:16px;background:var(--cc);clip-path:path("M9 16 C-6 6 2 -3 9 3 C16 -3 24 6 9 16Z");animation:caer linear infinite}
@keyframes caer{to{transform:translateY(110vh) rotate(540deg) translateX(40px)}}
@keyframes subir{from{transform:translateY(0) translateX(0)}50%{transform:translateY(-60vh) translateX(18px)}to{transform:translateY(-118vh) translateX(-10px)}}
@keyframes titilar{0%,100%{opacity:.15;transform:scale(.5)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
#musica{position:fixed;right:14px;bottom:14px;z-index:40;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:var(--btn-ink);font-size:1.2rem;cursor:pointer;box-shadow:0 6px 16px #0004}
@media (prefers-reduced-motion:reduce){.pt{display:none}.reveal{transition:none;opacity:1;transform:none}}

/* ================= GALA DORADA ================= */
[data-tpl="gala"] .nombre{font-family:var(--f-head);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:min(2.6rem,10vw)}
[data-tpl="gala"] .titulo{font-family:var(--f-script);font-style:italic;font-weight:400;font-size:1.7rem;color:var(--accent-2)}
[data-tpl="gala"] .eyebrow,[data-tpl="gala"] label{font-family:var(--f-body)}
[data-tpl="gala"] h2.sec{font-size:1.5rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
[data-tpl="gala"] .fecha .dia{font-family:var(--f-head);font-weight:500;font-size:4.6rem}
[data-tpl="gala"] .rama{width:96px;opacity:.85}
[data-tpl="gala"] .mensaje{font-family:var(--f-script);font-weight:400}
[data-tpl="gala"] .programa time{font-family:var(--f-head);letter-spacing:.06em}
[data-tpl="gala"] .cuenta div,[data-tpl="gala"] form{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:none}
[data-tpl="gala"] .btn{letter-spacing:.2em;font-size:.85rem;border-radius:2px;font-weight:600}
[data-tpl="gala"] .btn.ghost{color:var(--accent-2)}
[data-tpl="gala"] .galeria img{border-radius:0;border:1px solid var(--accent);padding:5px;background:var(--soft)}
[data-tpl="gala"] .galeria img:nth-child(3n+1){border-radius:0;aspect-ratio:1}
[data-tpl="gala"] .sobre-ticket{background:linear-gradient(135deg,var(--accent-2),var(--accent) 60%,#8a6a1a)}
[data-tpl="gala"] .sobre-ticket b{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:1.3rem}
[data-tpl="gala"] .sobre-wrap h1{display:none}
[data-tpl="gala"] .sobre-wrap .para{color:var(--accent-2);opacity:1}
[data-tpl="gala"] .padres b{color:var(--accent-2);opacity:1}

/* ================= ATARDECER ================= */
[data-fx="sunset"] #fx{background:radial-gradient(ellipse at 50% 0%,#ffd36b55,transparent 55%),linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--c3) 22%,var(--bg)) 55%,color-mix(in srgb,var(--c1) 30%,var(--bg)) 100%)}
[data-tpl="atardecer"] .nombre{font-family:var(--f-head);font-style:italic;font-weight:600;font-size:min(3.5rem,13vw);line-height:1}
[data-tpl="atardecer"] .titulo{font-family:var(--f-body);font-style:normal;font-weight:500;font-size:1.15rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2)}
[data-tpl="atardecer"] .eyebrow{color:var(--accent-2);opacity:1}
[data-tpl="atardecer"] h2.sec{font-style:italic;font-weight:600;color:var(--accent-2);font-size:2rem}
[data-tpl="atardecer"] .edad-num{font-family:var(--f-head);font-style:italic}
[data-tpl="atardecer"] .fecha .dia{font-family:var(--f-head);font-weight:700;color:var(--accent-2)}
[data-tpl="atardecer"] .cuenta div,[data-tpl="atardecer"] form{backdrop-filter:blur(6px);border:1px solid #ffffff2a;box-shadow:none}
[data-tpl="atardecer"] .f-circle{border-color:var(--accent-2);box-shadow:0 0 0 8px #ffffff1c,0 18px 40px #0005}
[data-tpl="atardecer"] .galeria img{border-radius:20px}
[data-tpl="atardecer"] .btn{background:linear-gradient(90deg,var(--accent),var(--c3));color:#fff;font-weight:700}
[data-tpl="atardecer"] .copas-w{top:1rem}
[data-tpl="atardecer"] .sobre-sello .seal{font-family:var(--f-head)}
[data-tpl="atardecer"] #sobre{background:linear-gradient(180deg,#3c1763,#ff8a5b66)}

/* ================= JARDÍN ================= */
[data-tpl="jardin"] .eyebrow{font-size:.95rem}

/* ================= ORO CLÁSICO ================= */
[data-tpl="oro"] .nombre{font-family:var(--f-head);font-weight:700;font-size:min(2.9rem,11vw);line-height:1.1}
[data-tpl="oro"] .titulo{font-family:var(--f-head);font-style:italic;font-weight:400;font-size:1.6rem;color:var(--accent-2)}
[data-tpl="oro"] .eyebrow{font-style:italic;text-transform:none;letter-spacing:.02em;font-size:1.2rem;opacity:.9}
[data-tpl="oro"] h2.sec{font-size:2rem;font-weight:600;color:var(--accent)}
[data-tpl="oro"] .mensaje{font-size:1.25rem;line-height:1.7}
[data-tpl="oro"] .fecha .dia{font-family:var(--f-head);font-weight:700;color:var(--accent)}
[data-tpl="oro"] .programa time{font-size:1.1rem}
[data-tpl="oro"] .btn{font-size:1rem;letter-spacing:.06em;text-transform:none;padding:1rem 2rem;font-weight:600}
[data-tpl="oro"] label{text-transform:none;letter-spacing:0;font-size:1.05rem;opacity:1;font-weight:600}
[data-tpl="oro"] input[type=text],[data-tpl="oro"] textarea{font-size:1.25rem;padding:.9rem 1rem}
[data-tpl="oro"] .cuenta div{border:1px solid var(--accent-2)}
[data-tpl="oro"] form{border:1px solid var(--accent-2);box-shadow:none}
[data-tpl="oro"] .galeria img{border-radius:4px;border:4px solid #fff;outline:1px solid var(--accent-2)}
[data-tpl="oro"] .galeria img:nth-child(3n+1){border-radius:4px;aspect-ratio:1}
[data-tpl="oro"] .sobre-wrap h1{font-family:var(--f-head);font-size:2.2rem}

/* ================= ÁLBUM DE RECUERDOS ================= */
[data-tpl="recuerdos"] #fx{background:radial-gradient(#0000 55%,#0000000d),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .14 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}
[data-tpl="recuerdos"] .nombre{font-family:var(--f-head);font-weight:700;color:var(--accent);transform:rotate(-2deg);font-size:min(4.6rem,17vw)}
[data-tpl="recuerdos"] .titulo{font-family:var(--f-head);font-weight:600;font-size:2.4rem;color:var(--ink);transform:rotate(-1deg)}
[data-tpl="recuerdos"] .eyebrow{font-family:var(--f-head);text-transform:none;letter-spacing:0;font-size:1.5rem;opacity:.9}
[data-tpl="recuerdos"] h2.sec{font-weight:700;font-size:2.6rem;transform:rotate(-1.5deg)}
[data-tpl="recuerdos"] .edad-num{font-weight:700;color:var(--accent)}
[data-tpl="recuerdos"] .fecha .dia{font-family:var(--f-head);font-weight:700;color:var(--accent)}
[data-tpl="recuerdos"] .mensaje{font-style:normal;font-size:1.15rem}
[data-tpl="recuerdos"] .cuenta div,[data-tpl="recuerdos"] form{border-radius:4px;background:#fbf4e4;box-shadow:2px 3px 10px #0003;border:0}
[data-tpl="recuerdos"] form{transform:rotate(-.6deg)}
[data-tpl="recuerdos"] .btn{border-radius:4px;font-family:var(--f-head);text-transform:none;font-size:1.4rem;letter-spacing:0;font-weight:700;box-shadow:3px 3px 0 var(--accent-2)}
[data-tpl="recuerdos"] .galeria{gap:1.2rem 1rem;padding:.5rem}
[data-tpl="recuerdos"] .galeria img{border-radius:2px;background:#fff;padding:7px 7px 24px;aspect-ratio:1;box-shadow:2px 4px 12px #0004}
[data-tpl="recuerdos"] .galeria img:nth-child(odd){transform:rotate(-3deg)}
[data-tpl="recuerdos"] .galeria img:nth-child(even){transform:rotate(2.5deg)}
[data-tpl="recuerdos"] .galeria img:nth-child(3n+1){border-radius:2px}
[data-tpl="recuerdos"] .programa::before{display:none}
[data-tpl="recuerdos"] .programa li{border-bottom:2px dashed color-mix(in srgb,var(--ink) 25%,transparent)}
[data-tpl="recuerdos"] .programa span::before{display:none}
[data-tpl="recuerdos"] .programa time{font-family:var(--f-head);font-size:1.5rem}
[data-tpl="recuerdos"] #sobre{background:#d9c3a0}
[data-tpl="recuerdos"] .sobre-sello{background:#f4ead6}
[data-tpl="recuerdos"] .sobre-wrap h1{font-family:var(--f-head);font-weight:700;font-size:3rem;color:var(--accent)}

/* ================= FIESTA DE GLOBOS ================= */
[data-tpl="globos"] .nombre{font-family:var(--f-head);font-weight:700;color:var(--accent);text-shadow:4px 4px 0 var(--accent-2);font-size:min(3.8rem,14vw)}
[data-tpl="globos"] .titulo{font-family:var(--f-head);font-weight:600;color:var(--ink);font-size:1.7rem}
[data-tpl="globos"] .eyebrow{font-family:var(--f-head);text-transform:none;letter-spacing:0;font-size:1.3rem;font-weight:500}
[data-tpl="globos"] h2.sec{font-weight:700;font-size:2.1rem;color:var(--ink);display:inline-block;background:var(--c3);padding:.1rem 1.2rem;border-radius:999px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
[data-tpl="globos"] .cuenta div,[data-tpl="globos"] form,[data-tpl="globos"] .gracias{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff}
[data-tpl="globos"] .cuenta div:nth-child(1){background:var(--c1);color:#fff}
[data-tpl="globos"] .cuenta div:nth-child(2){background:var(--c3)}
[data-tpl="globos"] .cuenta div:nth-child(3){background:var(--c2);color:#fff}
[data-tpl="globos"] .btn,[data-tpl="chunky"] .btn{font-family:var(--f-head);font-size:1.15rem;text-transform:none;letter-spacing:.02em;font-weight:600;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
[data-tpl="globos"] .btn.ghost{background:#fff}
[data-tpl="globos"] .galeria img{border:4px solid var(--ink);box-shadow:4px 4px 0 var(--accent-2);border-radius:18px}
[data-tpl="globos"] .galeria img:nth-child(3n+1){border-radius:18px;aspect-ratio:1}
[data-tpl="globos"] .rama{width:84px}
[data-tpl="globos"] .programa::before{background:var(--ink);width:3px;opacity:.15}
[data-tpl="globos"] .programa span::before{background:var(--accent);border:2px solid var(--ink);width:12px;height:12px;left:-.4rem;top:.55rem}
[data-tpl="globos"] .mensaje{font-style:normal;font-size:1.2rem;font-weight:500}
[data-tpl="globos"] .fecha .dia{font-family:var(--f-head);font-weight:700}
[data-tpl="globos"] #sobre{background:radial-gradient(circle at 20% 20%,var(--c3) 0 60px,transparent 61px),radial-gradient(circle at 85% 75%,var(--c1) 0 90px,transparent 91px),var(--soft)}
[data-tpl="globos"] .sobre-wrap h1{font-weight:700;color:var(--accent);text-shadow:3px 3px 0 var(--accent-2)}
.chunky .btn{border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}

/* ================= AVENTURA ESPACIAL ================= */
[data-fx="espacio"] #fx{background:radial-gradient(1.5px 1.5px at 20px 30px,#fff,#0000),radial-gradient(1px 1px at 120px 80px,#fffc,#0000),radial-gradient(2px 2px at 200px 160px,#ffe9a6,#0000),radial-gradient(1px 1px at 60px 150px,#fff9,#0000),radial-gradient(circle at 80% 8%,#7a8cff44,#0000 40%),radial-gradient(circle at 10% 90%,#ff5d7333,#0000 40%),var(--bg);background-size:230px 200px,230px 200px,230px 200px,230px 200px,auto,auto,auto}
[data-tpl="espacio"] .nombre{font-family:var(--f-head);font-weight:700;color:var(--accent);text-shadow:0 0 22px color-mix(in srgb,var(--accent) 55%,transparent);font-size:min(3.8rem,14vw)}
[data-tpl="espacio"] .titulo{font-family:var(--f-head);font-weight:600;color:var(--ink);font-size:1.7rem}
[data-tpl="espacio"] .eyebrow{color:var(--accent-2);opacity:1;font-family:var(--f-head);letter-spacing:.18em;font-weight:500}
[data-tpl="espacio"] h2.sec{font-weight:700;font-size:1.9rem;color:var(--accent)}
[data-tpl="espacio"] .cuenta div,[data-tpl="espacio"] form,[data-tpl="espacio"] .gracias{background:var(--card);border:2px solid color-mix(in srgb,var(--accent-2) 70%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent-2) 30%,transparent)}
[data-tpl="espacio"] .btn{font-family:var(--f-head);text-transform:none;letter-spacing:.03em;font-size:1.1rem;font-weight:600;color:#1a1100;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%,transparent)}
[data-tpl="espacio"] .btn.ghost{color:var(--ink);box-shadow:none}
[data-tpl="espacio"] .galeria img{border-radius:50%;border:4px solid var(--accent-2);box-shadow:0 0 18px #7a8cff77}
[data-tpl="espacio"] .galeria img:nth-child(3n+1){border-radius:50%;aspect-ratio:1}
[data-tpl="espacio"] .mensaje{font-style:normal;font-size:1.15rem}
[data-tpl="espacio"] .fecha .dia{font-family:var(--f-head);font-weight:700}
[data-tpl="espacio"] .rama{width:130px;opacity:1}
[data-tpl="espacio"] input[type=text],[data-tpl="espacio"] textarea{background:#0d1030;color:#fff;border-color:#7a8cff88}
[data-tpl="espacio"] #sobre{background:var(--bg)}
[data-tpl="espacio"] .sobre-wrap h1{color:var(--accent);font-family:var(--f-head);font-weight:700}
[data-tpl="espacio"] .programa::before{background:var(--accent-2)}

/* ================= ARCOÍRIS Y NUBES ================= */
[data-tpl="arcoiris"] #fx{background:radial-gradient(circle at 10% 10%,#ffffffcc 0 40px,#0000 41px),radial-gradient(circle at 92% 38%,#ffffffcc 0 34px,#0000 35px),radial-gradient(circle at 6% 74%,#ffffffcc 0 50px,#0000 51px),var(--bg)}
[data-tpl="arcoiris"] .nombre{font-family:var(--f-head);font-weight:700;font-size:min(3.9rem,14vw);background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em}
[data-tpl="arcoiris"] .titulo{font-family:var(--f-head);font-weight:600;color:var(--ink);font-size:1.6rem}
[data-tpl="arcoiris"] .eyebrow{font-family:var(--f-head);text-transform:none;letter-spacing:0;font-size:1.25rem;font-weight:500}
[data-tpl="arcoiris"] h2.sec{font-weight:700;font-size:2rem;color:var(--ink)}
[data-tpl="arcoiris"] .cuenta div,[data-tpl="arcoiris"] form{border-radius:22px;box-shadow:0 8px 0 var(--soft)}
[data-tpl="arcoiris"] .btn{font-family:var(--f-head);text-transform:none;letter-spacing:.02em;font-size:1.1rem;font-weight:600;box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 55%,#000)}
[data-tpl="arcoiris"] .btn.ghost{box-shadow:none;background:#fff}
[data-tpl="arcoiris"] .galeria img{border-radius:26px;border:5px solid #fff}
[data-tpl="arcoiris"] .galeria img:nth-child(3n+1){border-radius:26px;aspect-ratio:1}
[data-tpl="arcoiris"] .f-circle{border:8px solid #fff;box-shadow:0 0 0 6px var(--c1),0 0 0 12px var(--c2),0 0 0 18px var(--c3),0 14px 30px #0002}
[data-tpl="arcoiris"] .mensaje{font-style:normal;font-size:1.2rem;font-weight:500}
[data-tpl="arcoiris"] .fecha .dia{font-family:var(--f-head);font-weight:700}
[data-tpl="arcoiris"] .arcoiris{filter:drop-shadow(0 4px 0 #0000000d)}
[data-tpl="arcoiris"] .hero:has(.top-center){padding-top:10.5rem}
[data-tpl="arcoiris"] #sobre{background:linear-gradient(180deg,var(--soft),var(--bg))}
[data-tpl="arcoiris"] .sobre-wrap h1{font-family:var(--f-head);font-weight:700;color:var(--accent)}

/* ================= NEÓN PARTY ================= */
[data-fx="neon"] #fx{background:radial-gradient(circle at 15% 8%,color-mix(in srgb,var(--accent) 30%,transparent),#0000 45%),radial-gradient(circle at 90% 30%,color-mix(in srgb,var(--accent-2) 25%,transparent),#0000 40%),var(--bg)}
[data-fx="neon"] #fx::after{content:"";position:absolute;left:-30%;right:-30%;bottom:0;height:44%;background:linear-gradient(var(--accent-2) 1px,transparent 1px) 0 0/100% 38px,linear-gradient(90deg,var(--accent-2) 1px,transparent 1px) 0 0/46px 100%;opacity:.28;transform:perspective(340px) rotateX(62deg);transform-origin:bottom;-webkit-mask:linear-gradient(transparent,#000 60%);mask:linear-gradient(transparent,#000 60%)}
[data-tpl="neon"] .nombre{font-family:var(--f-head);font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 0 6px #fff,0 0 22px var(--accent),0 0 48px var(--accent);font-size:min(5.6rem,21vw);line-height:.92}
[data-tpl="neon"] .titulo{font-family:var(--f-head);font-weight:400;letter-spacing:.1em;font-size:2rem;color:var(--accent-2);text-shadow:0 0 14px var(--accent-2)}
[data-tpl="neon"] .eyebrow{color:var(--accent-2);opacity:1;font-family:var(--f-body);font-weight:500;letter-spacing:.34em}
[data-tpl="neon"] h2.sec{font-family:var(--f-head);font-size:2.4rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 0 12px var(--accent)}
[data-tpl="neon"] .fecha .dia{font-family:var(--f-head);font-size:3.6rem;color:#fff;text-shadow:0 0 14px var(--accent-2)}
[data-tpl="neon"] .fecha .d-mes,[data-tpl="neon"] .fecha .d-anio{font-family:var(--f-head);font-size:1.7rem}
[data-tpl="neon"] .cuenta div,[data-tpl="neon"] form{background:#ffffff0d;border:1.5px solid var(--accent-2);box-shadow:0 0 16px color-mix(in srgb,var(--accent-2) 45%,transparent),inset 0 0 14px color-mix(in srgb,var(--accent-2) 12%,transparent);border-radius:8px}
[data-tpl="neon"] .btn{font-family:var(--f-head);font-size:1.25rem;letter-spacing:.12em;font-weight:400;border-radius:4px;color:#fff;background:transparent;border:2px solid var(--accent);box-shadow:0 0 14px var(--accent),inset 0 0 14px color-mix(in srgb,var(--accent) 45%,transparent);text-shadow:0 0 8px var(--accent)}
[data-tpl="neon"] .btn.ghost{border-color:var(--accent-2);box-shadow:0 0 14px var(--accent-2),inset 0 0 14px color-mix(in srgb,var(--accent-2) 35%,transparent);text-shadow:0 0 8px var(--accent-2)}
[data-tpl="neon"] .galeria img{border-radius:6px;border:2px solid var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent)}
[data-tpl="neon"] .galeria img:nth-child(3n+1){border-radius:6px;aspect-ratio:1;border-color:var(--accent-2);box-shadow:0 0 18px color-mix(in srgb,var(--accent-2) 70%,transparent)}
[data-tpl="neon"] .mensaje{font-style:normal;font-size:1.05rem}
[data-tpl="neon"] .rama{width:90px;filter:drop-shadow(0 0 6px var(--accent));margin:10px}
[data-tpl="neon"] .sep{filter:drop-shadow(0 0 5px var(--accent))}
[data-tpl="neon"] .programa::before{background:var(--accent);box-shadow:0 0 8px var(--accent);opacity:.9}
[data-tpl="neon"] .programa time{font-family:var(--f-head);font-size:1.4rem;font-weight:400;color:var(--accent-2)}
[data-tpl="neon"] .programa span::before{background:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}
[data-tpl="neon"] input[type=text],[data-tpl="neon"] textarea{background:#0b0720;color:#fff;border:1px solid var(--accent-2)}
[data-tpl="neon"] .sobre-ticket{background:transparent;color:#fff;border:0;box-shadow:none;outline:2px solid var(--accent);filter:drop-shadow(0 0 10px var(--accent))}
[data-tpl="neon"] #sobre{background:var(--bg)}
[data-tpl="neon"] .sobre-wrap h1{display:none}
[data-tpl="neon"] .sobre-wrap .para{color:var(--accent-2);opacity:1}

/* ================= QUINCEAÑERA ================= */
[data-fx="flores"] #fx{background:radial-gradient(circle at 12% 6%,color-mix(in srgb,var(--accent) 22%,transparent) 0 70px,#0000 72px),radial-gradient(circle at 96% 40%,color-mix(in srgb,var(--accent-2) 20%,transparent) 0 54px,#0000 56px),radial-gradient(circle at 4% 78%,color-mix(in srgb,var(--accent) 16%,transparent) 0 80px,#0000 82px),var(--bg)}
[data-tpl="quince"] .nombre{font-family:var(--f-head);font-size:min(4.6rem,17vw);color:var(--accent);line-height:1}
[data-tpl="quince"] .titulo{font-family:var(--f-head);font-size:3rem;color:var(--accent-2)}
[data-tpl="quince"] .eyebrow{font-size:1.05rem}
[data-tpl="quince"] h2.sec{font-size:2.8rem}
[data-tpl="quince"] .fecha .dia{font-family:var(--f-head);font-size:6rem;color:var(--accent-2)}
[data-tpl="quince"] .f-arch{border:3px solid var(--accent-2);padding:6px;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(135deg,var(--accent-2),var(--accent),var(--accent-2)) border-box;box-shadow:0 20px 50px color-mix(in srgb,var(--accent) 35%,transparent)}
[data-tpl="quince"] .f-arch img{border-radius:999px 999px 12px 12px}
[data-tpl="quince"] .btn{background:linear-gradient(135deg,var(--accent-2),var(--accent));letter-spacing:.14em;font-size:.9rem}
[data-tpl="quince"] .cuenta div{border:1px solid var(--accent-2)}
[data-tpl="quince"] .galeria img{border:3px solid var(--accent-2)}

/* ================= CIELO DE ÁNGELES ================= */
[data-fx="cielo"] #fx{background:radial-gradient(circle at 12% 30%,#fff 0 36px,#0000 38px),radial-gradient(circle at 86% 58%,#ffffffcc 0 44px,#0000 46px),radial-gradient(circle at 8% 88%,#fffc 0 54px,#0000 56px),linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,var(--bg)),var(--bg) 45%,color-mix(in srgb,var(--accent) 12%,var(--bg)))}
[data-tpl="cielo"] .nombre{font-family:var(--f-head);color:var(--accent);font-size:min(4.6rem,17vw)}
[data-tpl="cielo"] .titulo{font-family:var(--f-head);font-size:2.4rem;color:var(--accent-2)}
[data-tpl="cielo"] .eyebrow{font-family:var(--f-body);font-weight:500;letter-spacing:.14em;font-size:.82rem}
[data-tpl="cielo"] h2.sec{font-size:2.6rem}
[data-tpl="cielo"] .fecha .dia{font-family:var(--f-head);font-size:5.6rem}
[data-tpl="cielo"] .mensaje{font-style:normal;font-weight:500;font-size:1.1rem}
[data-tpl="cielo"] .f-circle{box-shadow:0 0 0 10px #ffffffaa,0 0 40px color-mix(in srgb,var(--accent) 35%,transparent)}
[data-tpl="cielo"] .btn{font-weight:600;letter-spacing:.1em}
[data-tpl="cielo"] .galeria img,[data-tpl="cielo"] .galeria img:nth-child(3n+1){border-radius:50%;aspect-ratio:1;border:5px solid #fff}
[data-tpl="cielo"] #sobre{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,var(--bg)),var(--bg))}
[data-tpl="cielo"] .cielo-w{width:min(340px,95%)}

/* ================= PALOMA DE PAZ ================= */
[data-fx="luz"] #fx{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent-2) 22%,transparent),#0000 55%),var(--bg)}
[data-tpl="paloma"] .nombre{font-family:var(--f-script);font-size:min(4.6rem,17vw);color:var(--accent)}
[data-tpl="paloma"] .titulo{font-family:var(--f-head);font-style:italic;font-weight:400;font-size:1.8rem;color:var(--ink)}
[data-tpl="paloma"] .eyebrow{font-style:italic;text-transform:none;letter-spacing:.02em;font-size:1.1rem}
[data-tpl="paloma"] h2.sec{font-family:var(--f-head);font-style:italic;font-weight:500;font-size:2rem}
[data-tpl="paloma"] .fecha .dia{font-family:var(--f-head);font-weight:500;color:var(--accent)}
[data-tpl="paloma"] .mensaje{font-size:1.15rem}
[data-tpl="paloma"] .cuenta div,[data-tpl="paloma"] form{border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:none}
[data-tpl="paloma"] .galeria img{border-radius:50%;aspect-ratio:1;border:1px solid var(--accent);padding:5px;background:#fff}
[data-tpl="paloma"] .galeria img:nth-child(3n+1){border-radius:50%;aspect-ratio:1}
[data-tpl="paloma"] .btn{border-radius:2px;letter-spacing:.14em;font-size:.88rem}

/* ================= LUZ DE COMUNIÓN ================= */
[data-fx="rayos"] #fx{background:repeating-conic-gradient(from -90deg at 50% -6%,color-mix(in srgb,var(--accent-2) 18%,transparent) 0 5deg,#0000 5deg 12deg),radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent-2) 25%,transparent),#0000 60%),var(--bg);-webkit-mask:linear-gradient(#000 20%,#000);}
[data-tpl="comunion"] .nombre{font-family:var(--f-script);font-size:min(4.6rem,17vw);color:var(--accent)}
[data-tpl="comunion"] .titulo{font-family:var(--f-head);font-weight:500;font-size:1.25rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
[data-tpl="comunion"] .eyebrow{font-style:italic;text-transform:none;letter-spacing:.02em;font-size:1.1rem}
[data-tpl="comunion"] h2.sec{font-family:var(--f-head);font-size:1.5rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
[data-tpl="comunion"] .fecha .dia{font-family:var(--f-head);font-weight:500;color:var(--accent)}
[data-tpl="comunion"] .f-oval{border:2px solid var(--accent-2);background:#fff}
[data-tpl="comunion"] .cuenta div,[data-tpl="comunion"] form{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:none}
[data-tpl="comunion"] .galeria img,[data-tpl="comunion"] .galeria img:nth-child(3n+1){border-radius:50%;aspect-ratio:1;border:1px solid var(--accent-2);padding:5px;background:#fff}
[data-tpl="comunion"] .btn{border-radius:2px;letter-spacing:.16em;font-size:.85rem;font-weight:600}
[data-tpl="comunion"] .rama{width:58px;top:4.4rem;opacity:.9}
[data-tpl="comunion"] .hero .eyebrow{padding:0 2.6rem}

/* ================= BODA · EUCALIPTO ================= */
[data-tpl="boda"] .nombre{font-family:var(--f-script);font-size:min(4.8rem,18vw);color:var(--ink);line-height:1.02}
[data-tpl="boda"] .titulo{font-family:var(--f-body);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--accent)}
[data-tpl="boda"] .eyebrow{letter-spacing:.34em}
[data-tpl="boda"] h2.sec{font-size:2.8rem}
[data-tpl="boda"] .fecha .dia{font-family:var(--f-body);font-weight:300;font-size:5.4rem;color:var(--accent-2)}
[data-tpl="boda"] .mensaje{font-size:1.3rem}
[data-tpl="boda"] .btn{border-radius:2px;letter-spacing:.2em;font-size:.82rem}
[data-tpl="boda"] .cuenta div{border-radius:2px;border:1px solid var(--accent)}
[data-tpl="boda"] form{border-radius:2px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:none}
[data-tpl="boda"] .galeria img,[data-tpl="boda"] .galeria img:nth-child(3n+1){border-radius:2px}
.mono{display:inline-flex;align-items:center;justify-content:center;gap:.2rem;width:104px;height:104px;margin:0 auto .8rem;border-radius:50%;border:1px solid var(--accent-2);outline:1px solid var(--accent-2);outline-offset:5px;font-family:var(--f-script);font-size:2.4rem;color:var(--accent)}
.mono i{font-style:normal;font-size:1.4rem;color:var(--accent-2)}

/* ================= BODA · EDITORIAL ================= */
[data-tpl="boda-moderna"] .nombre{font-family:var(--f-head);font-style:italic;font-weight:400;text-transform:none;font-size:min(4.4rem,16.5vw);line-height:1}
[data-tpl="boda-moderna"] .nombre.nom2 i{font-size:.4em;font-style:normal;margin:.1em 0;letter-spacing:.3em}
[data-tpl="boda-moderna"] .titulo{font-family:var(--f-body);font-weight:500;font-size:.85rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);margin-top:.6rem}
[data-tpl="boda-moderna"] .eyebrow{font-weight:500;letter-spacing:.4em;font-size:.72rem}
[data-tpl="boda-moderna"] h2.sec{font-family:var(--f-body);font-size:.85rem;letter-spacing:.4em;text-transform:uppercase;font-weight:600;color:var(--ink);border-top:1px solid var(--ink);padding-top:1rem;margin-bottom:1.4rem}
[data-tpl="boda-moderna"] .fecha .dia{font-family:var(--f-head);font-weight:400;font-size:3.2rem;color:var(--ink)}
[data-tpl="boda-moderna"] .fecha .d-mes,[data-tpl="boda-moderna"] .fecha .d-anio{font-family:var(--f-head);font-size:1.5rem;text-transform:none;letter-spacing:0;font-style:italic}
[data-tpl="boda-moderna"] .fecha .d-dow{font-size:.72rem;letter-spacing:.34em}
[data-tpl="boda-moderna"] .cuenta div,[data-tpl="boda-moderna"] form{border-radius:0;border:1px solid var(--ink);background:transparent;box-shadow:none}
[data-tpl="boda-moderna"] .btn{border-radius:0;font-size:.74rem;letter-spacing:.3em;font-weight:600;padding:1rem 1.8rem}
[data-tpl="boda-moderna"] .btn.ghost{border-color:var(--ink)}
[data-tpl="boda-moderna"] .galeria{gap:6px}
[data-tpl="boda-moderna"] .galeria img,[data-tpl="boda-moderna"] .galeria img:nth-child(3n+1){border-radius:0;box-shadow:none;aspect-ratio:3/4;filter:grayscale(.9)}
[data-tpl="boda-moderna"] .programa::before{display:none}
[data-tpl="boda-moderna"] .programa li{border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
[data-tpl="boda-moderna"] .programa span::before{display:none}
[data-tpl="boda-moderna"] .programa span{padding-left:0}
[data-tpl="boda-moderna"] .programa time{color:var(--ink)}
[data-tpl="boda-moderna"] .mensaje{font-family:var(--f-head);font-size:1.25rem}
[data-tpl="boda-moderna"] .sobre-ticket{background:var(--ink);color:var(--bg);border-radius:0}
[data-tpl="boda-moderna"] .sobre-ticket b{font-style:italic;font-weight:400}
[data-tpl="boda-moderna"] #sobre{background:var(--bg)}
[data-tpl="boda-moderna"] .sobre-wrap h1{display:none}
[data-tpl="boda-moderna"] input[type=text],[data-tpl="boda-moderna"] textarea{border-radius:0;border-color:var(--ink);background:transparent;color:var(--ink)}

/* ================= BABY SHOWER ================= */
[data-tpl="babyshower"] .nombre{font-family:var(--f-script);font-size:min(4.6rem,17vw);color:var(--accent)}
[data-tpl="babyshower"] .titulo{font-family:var(--f-head);font-weight:600;font-size:2rem;color:var(--ink)}
[data-tpl="babyshower"] .eyebrow{font-family:var(--f-head);text-transform:none;letter-spacing:.02em;font-size:1.2rem;font-weight:500}
[data-tpl="babyshower"] h2.sec{font-family:var(--f-head);font-weight:600;font-size:2rem;color:var(--ink)}
[data-tpl="babyshower"] .fecha .dia{background:var(--c2)!important;color:var(--ink)!important;box-shadow:6px 6px 0 var(--c1)!important}
[data-tpl="babyshower"] .cuenta div,[data-tpl="babyshower"] form{border-radius:22px;border:2px dashed var(--accent);box-shadow:none;background:#fff}
[data-tpl="babyshower"] .btn{font-family:var(--f-head);text-transform:none;letter-spacing:.02em;font-size:1.1rem;font-weight:600;color:var(--ink);box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 60%,#000)}
[data-tpl="babyshower"] .galeria img{border-radius:24px;border:5px solid #fff}
[data-tpl="babyshower"] .galeria img:nth-child(3n+1){border-radius:24px;aspect-ratio:1}
[data-tpl="babyshower"] .mensaje{font-style:normal;font-size:1.15rem;font-weight:500}
[data-tpl="babyshower"] .osito-w{width:92px;margin:.2rem auto .4rem}
[data-tpl="babyshower"] .bunting{filter:drop-shadow(0 3px 0 #0000000d)}
[data-tpl="babyshower"] .hero:has(.top-center){padding-top:5.6rem}
[data-tpl="babyshower"] .bunting-w{top:0;width:100%;max-width:560px}
[data-tpl="babyshower"] #sobre{background:var(--soft)}
[data-tpl="babyshower"] .sobre-wrap h1{color:var(--accent)}


/* ================= ESCENAS ANIMADAS (motor común) ================= */
.hero{position:relative}
.escena{position:absolute;left:50%;top:0;width:min(100vw,560px);height:var(--escena-h,300px);transform:translateX(-50%);pointer-events:none;overflow:visible;z-index:0}
.escena>svg,.escena>.esc-svg{width:100%;height:100%;display:block;overflow:visible}
.hero:has(.escena){padding-top:calc(var(--escena-h,300px) + .6rem)}
.hero>*:not(.escena){position:relative;z-index:1}
.m-fall{top:-40px;animation:caer linear infinite}
.m-rise{bottom:-60px;animation:subir linear infinite}
.m-twinkle{animation:titilar ease-in-out infinite}
.pt svg{display:block;width:28px;height:auto}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mece{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes parpadea{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes aparece{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes saluda{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}75%{transform:rotate(14deg)}}
.escena .px{transform:translateY(calc(var(--sy,0) * var(--d,0) * -1px))}
@media (prefers-reduced-motion:reduce){.escena *{animation:none!important}}


/* ================= SOBRE SIEMPRE EN MOVIMIENTO (llama a tocarlo) ================= */
#envelope:not(:has(.open)){animation:sobre-idle 3.4s ease-in-out infinite}
@keyframes sobre-idle{0%,100%{transform:translateY(0) rotate(0)}18%{transform:translateY(-10px) rotate(0)}30%{transform:translateY(-3px) rotate(-3deg)}38%{transform:translateY(-6px) rotate(3deg)}46%{transform:translateY(-4px) rotate(-2deg)}56%{transform:translateY(0) rotate(0)}}
#envelope .seal{animation:sello-pulsa 1.7s ease-in-out infinite}
@keyframes sello-pulsa{0%,100%{transform:translate(-50%,-30%) scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}50%{transform:translate(-50%,-30%) scale(1.1);box-shadow:0 0 0 14px #0000}}
#envelope .sobre-sello:not(.open) .flap{animation:flap-late 3.4s ease-in-out infinite;transform-origin:top}
@keyframes flap-late{0%,100%{transform:rotateX(0)}20%,34%{transform:rotateX(26deg)}}
#envelope .sobre-regalo:not(.open) .g-lid{animation:tapa-salta 2.6s ease-in-out infinite}
@keyframes tapa-salta{0%,100%{transform:translateY(0) rotate(0)}15%{transform:translateY(-14px) rotate(-5deg)}30%{transform:translateY(0)}45%{transform:translateY(-8px) rotate(4deg)}60%{transform:translateY(0)}}
#envelope .sobre-ticket:not(.open){animation:tk-mece 2.8s ease-in-out infinite}
@keyframes tk-mece{0%,100%{transform:rotate(0)}20%{transform:rotate(-3deg) scale(1.03)}40%{transform:rotate(3deg) scale(1.03)}60%{transform:rotate(0)}}
#abrir{animation:abrir-pulsa 1.9s ease-in-out infinite}
@keyframes abrir-pulsa{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}50%{transform:scale(1.05);box-shadow:0 0 0 12px #0000}}
@media (prefers-reduced-motion:reduce){#envelope,#envelope *,#abrir{animation:none!important}}

.aviso-datos{font-size:.74rem;line-height:1.4;opacity:.7;margin:1rem auto 0;max-width:34em}.aviso-datos a{color:inherit;text-underline-offset:2px}

/* sello "hecha con Invitaciones": discreto, toma los colores de cada diseño */
.hecho{display:flex;align-items:center;gap:.65rem;width:max-content;max-width:calc(100% - 2rem);margin:.5rem auto calc(2.2rem + env(safe-area-inset-bottom));padding:.6rem 1.1rem .6rem .8rem;border-radius:999px;text-decoration:none;color:var(--ink);background:var(--card,#fff9);border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);font-family:var(--f-body,system-ui);font-size:.85rem;line-height:1.2;box-shadow:0 6px 18px -10px #0006;transition:transform .2s;position:relative;z-index:2}
.hecho:hover{transform:translateY(-2px)}
.hecho .h-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--accent);color:var(--btn-ink,#fff);font-size:1rem}
.hecho .h-tx{display:flex;flex-direction:column}.hecho b{font-weight:800}
.hecho small{font-size:.74rem;opacity:.75;margin-top:.1rem}