/* ===== Sagrados: fuentes propias ===== */
@font-face{font-family:"SG Pinyon";font-weight:400;font-display:swap;src:url("/fonts/sg-pinyon-script.woff2") format("woff2")}
@font-face{font-family:"SG Allura";font-weight:400;font-display:swap;src:url("/fonts/sg-allura.woff2") format("woff2")}
@font-face{font-family:"SG Italianno";font-weight:400;font-display:swap;src:url("/fonts/sg-italianno.woff2") format("woff2")}
@font-face{font-family:"SG Cookie";font-weight:400;font-display:swap;src:url("/fonts/sg-cookie.woff2") format("woff2")}
@font-face{font-family:"SG Tangerine";font-weight:700;font-display:swap;src:url("/fonts/sg-tangerine-700.woff2") format("woff2")}
@font-face{font-family:"SG Dancing";font-weight:400 700;font-display:swap;src:url("/fonts/sg-dancing-script.woff2") format("woff2")}

/* ===== helpers de animación compartidos (prefijo sg-) ===== */
.sgo{transform-box:fill-box;transform-origin:50% 50%}
.sg-tw{animation:sg-tw var(--t,3s) ease-in-out var(--dl,0s) infinite}
.sg-fl{animation:sg-fl var(--t,4s) ease-in-out var(--dl,0s) infinite}
.sg-sw{animation:sg-sw var(--t,5s) ease-in-out var(--dl,0s) infinite}
.sg-sp{animation:sg-sp var(--t,30s) linear var(--dl,0s) infinite}
.sg-pu{animation:sg-pu var(--t,3s) ease-in-out var(--dl,0s) infinite}
.sg-gl{animation:sg-gl var(--t,3s) ease-in-out var(--dl,0s) infinite}
.sg-dr{animation:sg-dr var(--t,8s) ease-in-out var(--dl,0s) infinite}
.sg-wg{animation:sg-wg var(--t,.9s) ease-in-out var(--dl,0s) infinite}
.sg-bl{animation:sg-bl var(--t,5s) ease-in-out var(--dl,0s) infinite}
.sg-dp{animation:sg-dp var(--t,3s) ease-in var(--dl,0s) infinite}
@keyframes sg-tw{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes sg-fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sg-sw{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes sg-sp{to{transform:rotate(360deg)}}
@keyframes sg-pu{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes sg-gl{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes sg-dr{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
@keyframes sg-wg{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.45)}}
@keyframes sg-bl{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes sg-dp{0%{transform:translateY(-6px);opacity:0}25%{opacity:1}100%{transform:translateY(26px);opacity:0}}
.sg-sobre{position:relative;margin:0 auto}
.sg-sobre svg{width:100%;height:100%;overflow:visible}
@media (prefers-reduced-motion:reduce){.sgo,.sg-sobre *,[data-tpl] .nombre,[data-tpl] .btn{animation:none!important}}
/* nombre largo: nunca rompe el diseño */
[data-tpl="princesa"] .nombre,[data-tpl="mariposas"] .nombre,[data-tpl="cuento"] .nombre,[data-tpl="cielo2"] .nombre,[data-tpl="paloma2"] .nombre,[data-tpl="lunaosito"] .nombre,[data-tpl="luz"] .nombre,[data-tpl="espigas"] .nombre,[data-tpl="angelito"] .nombre{max-width:100%;overflow-wrap:anywhere;hyphens:manual;padding:0 .1em}
[data-tpl="princesa"] .escena,[data-tpl="mariposas"] .escena,[data-tpl="cuento"] .escena,[data-tpl="cielo2"] .escena,[data-tpl="paloma2"] .escena,[data-tpl="lunaosito"] .escena,[data-tpl="luz"] .escena,[data-tpl="espigas"] .escena,[data-tpl="angelito"] .escena{-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
/* elementos con origen de transformación en coordenadas del viewBox */
.ma-bud,.ma-pl,.es-st,.pr-seal,.pr-sl,.pr-sr,.pr-ripple,.pr-sb-in,.pr-cl,.pr-sk,.es-grape,.es-rib,.lz-burst,.lz-veil,.lz-flut{transform-box:view-box}
[data-tpl="princesa"] .eyebrow,[data-tpl="mariposas"] .eyebrow,[data-tpl="cuento"] .eyebrow,[data-tpl="cielo2"] .eyebrow,[data-tpl="paloma2"] .eyebrow,[data-tpl="lunaosito"] .eyebrow,[data-tpl="luz"] .eyebrow,[data-tpl="espigas"] .eyebrow,[data-tpl="angelito"] .eyebrow{opacity:1}
[data-tpl] .nombre[data-len="l"]{font-size:min(3.5rem,12vw)!important;line-height:1.12!important}
[data-tpl] .nombre[data-len="xl"]{font-size:min(2.7rem,9.4vw)!important;line-height:1.14!important}
[data-tpl="angelito"] .nombre[data-len="l"]{font-size:min(4.6rem,15vw)!important}
[data-tpl="angelito"] .nombre[data-len="xl"]{font-size:min(3.4rem,11.6vw)!important}
/* ================= 1. PRINCESA ================= */
[data-fx="princesa"] #fx{background:radial-gradient(ellipse 80% 40% at 50% 0%,color-mix(in srgb,var(--c2) 30%,transparent),transparent 70%),radial-gradient(circle at 10% 70%,color-mix(in srgb,var(--c3) 30%,transparent),transparent 40%),radial-gradient(circle at 92% 40%,color-mix(in srgb,var(--c3) 26%,transparent),transparent 36%),var(--bg)}
.pr-shine{animation:pr-shine 3.6s ease-in-out 1s infinite}
@keyframes pr-shine{0%{transform:translateX(-60px) skewX(-20deg)}55%,100%{transform:translateX(140px) skewX(-20deg)}}
.hero.in .pr-cl-l{animation:pr-open-l 1.15s cubic-bezier(.25,.8,.25,1) both}
.hero.in .pr-cl-r{animation:pr-open-r 1.15s cubic-bezier(.25,.8,.25,1) both}
@keyframes pr-open-l{from{transform:translateX(96px)}to{transform:none}}
@keyframes pr-open-r{from{transform:translateX(-96px)}to{transform:none}}
.pr-sk{animation:pr-sk 6s ease-in-out infinite}.pr-sk2{animation-delay:-3s}
@keyframes pr-sk{0%,100%{transform:skewX(-1.2deg)}50%{transform:skewX(1.6deg)}}
/* sobre: telón de terciopelo */
.sobre-princesa{width:270px;height:210px;filter:drop-shadow(0 16px 24px #0004)}
.sobre-princesa .pr-sl,.sobre-princesa .pr-sr{transition:transform .95s cubic-bezier(.5,0,.2,1)}
.sobre-princesa .pr-sl{transform-origin:6px 0}.sobre-princesa .pr-sr{transform-origin:264px 0}
.sobre-princesa .pr-ripple{animation:pr-rip 3.4s ease-in-out infinite}.sobre-princesa .pr-ripple2{animation-delay:-1.7s}
@keyframes pr-rip{0%,100%{transform:skewX(0)}50%{transform:skewX(2.4deg)}}
.sobre-princesa .pr-seal{transition:transform .6s,opacity .5s;transform-origin:135px 116px}
.sobre-princesa .pr-sb-in{transition:transform .9s .1s;transform-origin:135px 112px}
.sobre-princesa.open .pr-sl{transform:translateX(-104%)}
.sobre-princesa.open .pr-sr{transform:translateX(104%)}
.sobre-princesa.open .pr-seal{transform:scale(1.7);opacity:0}
.sobre-princesa.open .pr-sb-in{transform:scale(1.18)}
[data-tpl="princesa"] #sobre{background:radial-gradient(ellipse at 50% 30%,var(--c3),var(--soft) 70%)}
[data-tpl="princesa"] .sobre-wrap h1{font-size:3.1rem;color:var(--accent)}
[data-tpl="princesa"] .sobre-wrap .para{color:var(--accent);opacity:.9}
/* hero */
[data-tpl="princesa"] .eyebrow{font-family:var(--f-head);font-size:.82rem;letter-spacing:.34em;color:var(--accent)}
[data-tpl="princesa"] .nombre{font-size:min(5rem,18vw);line-height:1.12;padding-bottom:.08em;background:linear-gradient(100deg,var(--accent) 30%,var(--accent-2) 45%,var(--c2) 50%,var(--accent-2) 55%,var(--accent) 70%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pr-name 6s ease-in-out infinite;filter:drop-shadow(0 2px 0 color-mix(in srgb,var(--bg) 80%,transparent))}
@keyframes pr-name{0%{background-position:100% 0}60%,100%{background-position:0 0}}
[data-tpl="princesa"] .titulo{font-family:var(--f-head);font-size:1.05rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-top:.2rem}
[data-tpl="princesa"] .titulo::before,[data-tpl="princesa"] .titulo::after{content:"\2726";color:var(--accent-2);margin:0 .6em;font-size:.8em}
[data-tpl="princesa"] .f-arch{border:0;padding:7px;background:linear-gradient(160deg,var(--c4),var(--c2),var(--accent-2),var(--c2));box-shadow:0 18px 44px color-mix(in srgb,var(--accent) 35%,transparent),0 0 0 2px color-mix(in srgb,var(--c2) 60%,transparent)}
[data-tpl="princesa"] .f-arch img{border-radius:999px 999px 12px 12px}
[data-tpl="princesa"] .fecha .dia{font-family:var(--f-script);font-size:6rem;background:linear-gradient(180deg,var(--c2),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-tpl="princesa"] .fecha .d-dow,[data-tpl="princesa"] .fecha .d-mes,[data-tpl="princesa"] .fecha .d-anio{font-family:var(--f-head);font-size:.95rem;letter-spacing:.2em}
[data-tpl="princesa"] .cuenta div{background:var(--card);border:1px solid var(--c2);border-radius:50% 50% 12px 12px / 38% 38% 12px 12px;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 18%,transparent)}
[data-tpl="princesa"] .mensaje{font-size:1.35rem}
[data-tpl="princesa"] .padres b{color:var(--accent);opacity:1;font-family:var(--f-head)}
[data-tpl="princesa"] h2.sec{font-family:var(--f-script);font-size:3rem;font-weight:400;color:var(--accent)}
[data-tpl="princesa"] .programa::before{background:linear-gradient(var(--c2),transparent);opacity:1;width:2px}
[data-tpl="princesa"] .programa time{font-family:var(--f-head);color:var(--accent);font-size:.95rem;letter-spacing:.06em}
[data-tpl="princesa"] .programa span::before{width:11px;height:11px;border-radius:2px;transform:rotate(45deg);background:var(--c2);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 30%,transparent);left:-.36rem}
[data-tpl="princesa"] .nombre-lugar{font-family:var(--f-head);font-size:1.25rem;letter-spacing:.06em;color:var(--accent)}
[data-tpl="princesa"] .btn{position:relative;overflow:hidden;border-radius:999px;font-family:var(--f-head);font-weight:600;letter-spacing:.16em;font-size:.82rem;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--c2)));box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent)}
[data-tpl="princesa"] .btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#ffffff77,transparent);animation:pr-btn 3.4s ease-in-out 1s infinite}
@keyframes pr-btn{0%{left:-60%}50%,100%{left:130%}}
[data-tpl="princesa"] .btn.ghost{background:transparent;border:1.5px solid var(--accent);color:var(--accent);box-shadow:none}
[data-tpl="princesa"] .btn.ghost::after{display:none}
[data-tpl="princesa"] .galeria img{border-radius:999px 999px 14px 14px;border:3px solid var(--c2)}
[data-tpl="princesa"] .nombre-cierre{font-family:var(--f-script);font-size:2.2rem;color:var(--accent)}
/* ================= 2. MARIPOSAS ================= */
[data-fx="mariposas"] #fx{background:radial-gradient(circle at 8% 6%,color-mix(in srgb,var(--c1) 34%,transparent) 0,transparent 38%),radial-gradient(circle at 96% 24%,color-mix(in srgb,var(--c2) 30%,transparent) 0,transparent 36%),radial-gradient(circle at 10% 82%,color-mix(in srgb,var(--c3) 32%,transparent) 0,transparent 40%),radial-gradient(circle at 92% 92%,color-mix(in srgb,var(--c4) 30%,transparent) 0,transparent 38%),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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .5 0 0 0 .09 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"),var(--bg)}
.ma-wr{animation:ma-wing var(--t,.9s) ease-in-out var(--dl,0s) infinite;transform-origin:0 50%}
@keyframes ma-wing{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.28)}}
.ma-fly{animation:ma-f0 9s ease-in-out infinite alternate}
.ma-f0{animation-name:ma-f0;animation-duration:7s}
.ma-f1{animation-name:ma-f1;animation-duration:11s}
.ma-f2{animation-name:ma-f2;animation-duration:13s}
.ma-f3{animation-name:ma-f3;animation-duration:9s}
.ma-f4{animation-name:ma-f4;animation-duration:12s}
@keyframes ma-f0{0%{transform:translate(0,0) rotate(-6deg)}30%{transform:translate(8px,-14px) rotate(5deg)}60%{transform:translate(-8px,-4px) rotate(-4deg)}100%{transform:translate(4px,-12px) rotate(6deg)}}
@keyframes ma-f1{0%{transform:translate(0,0) rotate(-20deg)}35%{transform:translate(60px,-40px) rotate(18deg)}65%{transform:translate(110px,20px) rotate(35deg)}100%{transform:translate(40px,70px) rotate(-10deg)}}
@keyframes ma-f2{0%{transform:translate(0,0) rotate(20deg)}40%{transform:translate(-70px,-50px) rotate(-25deg)}70%{transform:translate(-100px,30px) rotate(-40deg)}100%{transform:translate(-30px,60px) rotate(10deg)}}
@keyframes ma-f3{0%{transform:translate(0,0) rotate(10deg)}50%{transform:translate(80px,-60px) rotate(40deg)}100%{transform:translate(160px,-10px) rotate(-15deg)}}
@keyframes ma-f4{0%{transform:translate(0,0) rotate(-15deg)}50%{transform:translate(-90px,50px) rotate(-45deg)}100%{transform:translate(-30px,100px) rotate(15deg)}}
.hero.in .ma-fl{animation:ma-bloom 1.3s cubic-bezier(.3,1.4,.5,1) var(--bd,0s) both}
@keyframes ma-bloom{from{transform:scale(.05)}to{transform:scale(1)}}
/* sobre: capullo */
.sobre-mariposas{width:230px;height:240px}
.sobre-mariposas .ma-bud{animation:sg-pu 3s ease-in-out infinite}
.sobre-mariposas .ma-pl{transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
.sobre-mariposas .ma-perch{transition:transform .9s .1s ease-in,opacity .8s .1s}
.sobre-mariposas.open .ma-bud{animation:none}
.sobre-mariposas.open .ma-pl1{transform:rotate(-48deg)}
.sobre-mariposas.open .ma-pl2{transform:rotate(48deg)}
.sobre-mariposas.open .ma-pl3{transform:scale(.8) translateY(8px)}
.sobre-mariposas.open .ma-perch{transform:translateY(-120px) scale(1.3);opacity:0}
[data-tpl="mariposas"] #sobre{background:radial-gradient(circle at 20% 15%,color-mix(in srgb,var(--c1) 40%,transparent),transparent 45%),radial-gradient(circle at 85% 80%,color-mix(in srgb,var(--c2) 40%,transparent),transparent 45%),var(--soft)}
[data-tpl="mariposas"] .sobre-wrap h1{font-size:3.2rem;color:var(--accent);font-weight:700}
/* hero */
[data-tpl="mariposas"] .eyebrow{font-family:var(--f-head);font-style:italic;text-transform:none;letter-spacing:.06em;font-size:1.15rem;color:var(--accent)}
[data-tpl="mariposas"] .nombre{font-weight:700;font-size:min(5rem,17vw);line-height:1.1;background:linear-gradient(95deg,var(--accent),var(--c1) 45%,var(--c2) 75%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:ma-name 9s ease-in-out infinite alternate;padding-bottom:.1em}
@keyframes ma-name{to{background-position:100% 0}}
[data-tpl="mariposas"] .titulo{font-family:var(--f-head);font-style:italic;font-size:1.5rem;font-weight:500;color:var(--ink)}
.foto.f-mariposas{--ar:4/5;width:min(76%,290px);padding:9px;background:conic-gradient(from 0deg,var(--c1),var(--c3),var(--c4),var(--c2),var(--c1));border-radius:62% 38% 54% 46% / 48% 56% 44% 52%;animation:ma-morph 9s ease-in-out infinite;box-shadow:0 16px 40px color-mix(in srgb,var(--c1) 40%,transparent)}
.foto.f-mariposas img{border-radius:inherit;border:4px solid var(--bg)}
.foto.f-mariposas::after{content:"";position:absolute;inset:-12px;border-radius:inherit;border:2px dashed color-mix(in srgb,var(--c2) 70%,transparent);animation:sg-sp 40s linear infinite;pointer-events:none}
@keyframes ma-morph{0%,100%{border-radius:62% 38% 54% 46% / 48% 56% 44% 52%}50%{border-radius:42% 58% 40% 60% / 56% 42% 58% 44%}}
[data-tpl="mariposas"] .fecha .dia{font-family:var(--f-script);font-weight:700;font-size:5.4rem;color:var(--accent)}
[data-tpl="mariposas"] .fecha .d-dow,[data-tpl="mariposas"] .fecha .d-mes,[data-tpl="mariposas"] .fecha .d-anio{font-style:italic;text-transform:none;letter-spacing:.04em;font-size:1.25rem;font-family:var(--f-head)}
[data-tpl="mariposas"] .cuenta div{background:var(--card);border-radius:58% 42% 56% 44% / 50% 50% 50% 50%;min-width:70px;box-shadow:0 6px 16px color-mix(in srgb,var(--c1) 30%,transparent)}
[data-tpl="mariposas"] .mensaje{font-size:1.25rem}
[data-tpl="mariposas"] .padres b{font-family:var(--f-script);text-transform:none;font-size:1.5rem;letter-spacing:0;color:var(--accent);opacity:1;font-weight:700}
[data-tpl="mariposas"] h2.sec{font-family:var(--f-script);font-weight:700;font-size:2.8rem;color:var(--accent);position:relative;display:inline-block}
[data-tpl="mariposas"] h2.sec::after{content:"";display:block;height:8px;margin:.1rem auto 0;border-radius:50%;background:linear-gradient(90deg,transparent,var(--c1),var(--c2),transparent);opacity:.7}
[data-tpl="mariposas"] .programa::before{background:repeating-linear-gradient(var(--c4) 0 6px,transparent 6px 12px);width:2px;opacity:.8}
[data-tpl="mariposas"] .programa time{font-family:var(--f-head);font-style:italic;color:var(--accent)}
[data-tpl="mariposas"] .programa span::before{width:14px;height:14px;border-radius:0 80% 0 80%;background:linear-gradient(135deg,var(--c1),var(--c2));left:-.45rem;top:.5rem;transform:rotate(-8deg)}
[data-tpl="mariposas"] .nombre-lugar{font-family:var(--f-head);font-style:italic;color:var(--accent)}
[data-tpl="mariposas"] .btn{border-radius:26px 6px 26px 6px;text-transform:none;letter-spacing:.03em;font-family:var(--f-head);font-style:italic;font-size:1.15rem;font-weight:600;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--c1)));box-shadow:0 8px 18px color-mix(in srgb,var(--c1) 40%,transparent)}
[data-tpl="mariposas"] .btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--c1);box-shadow:none}
[data-tpl="mariposas"] .galeria img{border-radius:58% 42% 52% 48% / 46% 54% 46% 54%;border:3px solid var(--c1)}
[data-tpl="mariposas"] .galeria img:nth-child(even){border-radius:44% 56% 46% 54% / 54% 46% 54% 46%;border-color:var(--c2)}
[data-tpl="mariposas"] .nombre-cierre{font-family:var(--f-script);font-weight:700;font-size:2.2rem;color:var(--accent)}
/* ================= 3. CUENTO ================= */
[data-fx="cuento"] #fx{background:radial-gradient(1.5px 1.5px at 20px 30px,var(--ink),#0000),radial-gradient(1px 1px at 120px 80px,var(--c2),#0000),radial-gradient(1.5px 1.5px at 200px 160px,var(--ink),#0000),radial-gradient(1px 1px at 60px 150px,var(--c3),#0000),radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--c1) 40%,transparent),transparent 60%),linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--c1) 22%,var(--bg)));background-size:230px 200px,230px 200px,230px 200px,230px 200px,auto,auto}
.cu-car{animation:cu-fly 13s ease-in-out infinite}
@keyframes cu-fly{0%{transform:translate(-30px,230px) rotate(-8deg);opacity:0}8%{opacity:1}50%{transform:translate(190px,36px) rotate(-3deg)}92%{opacity:1}100%{transform:translate(450px,220px) rotate(10deg);opacity:0}}
.sobre-cuento{width:230px;height:230px}
.sobre-cuento .cu-face{transition:transform .9s cubic-bezier(.5,0,.3,1),opacity .7s .2s;transform-origin:110px 112px}
.sobre-cuento .cu-burst{transform-origin:110px 112px;transform:scale(.2);opacity:0;transition:transform .9s ease-out,opacity .9s}
.sobre-cuento.open .cu-face{transform:translate(110px,112px) scale(1.9) rotate(30deg);opacity:0}
.sobre-cuento.open .cu-burst{transform:scale(1.5);opacity:1}
[data-tpl="cuento"] #sobre{background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--c1) 45%,var(--bg)),var(--bg) 75%)}
[data-tpl="cuento"] .sobre-wrap h1{font-size:3.2rem;color:var(--accent);text-shadow:0 0 18px color-mix(in srgb,var(--c2) 60%,transparent)}
[data-tpl="cuento"] .eyebrow{font-family:var(--f-head);font-size:.78rem;letter-spacing:.24em;color:var(--accent);opacity:1}
[data-tpl="cuento"] .nombre{font-size:min(5.2rem,18vw);line-height:1.12;padding-bottom:.08em;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,#fff) 0%,color-mix(in srgb,var(--accent) 60%,var(--c2)) 55%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:cu-glow 3.6s ease-in-out infinite}
@keyframes cu-glow{0%,100%{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c2) 50%,transparent))}50%{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--c3) 90%,transparent))}}
[data-tpl="cuento"] .titulo{font-family:var(--f-head);font-size:1rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.foto.f-cuento{--ar:1;width:min(76%,280px);border-radius:50%;padding:8px;background:conic-gradient(var(--c2),var(--c3),var(--c1),var(--c4),var(--c2));box-shadow:0 0 34px color-mix(in srgb,var(--c2) 55%,transparent);animation:cu-ring 4s ease-in-out infinite}
.foto.f-cuento img{border-radius:50%;border:5px solid var(--bg)}
.foto.f-cuento::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px dotted var(--c2);animation:sg-sp 50s linear infinite;pointer-events:none}
@keyframes cu-ring{0%,100%{box-shadow:0 0 22px color-mix(in srgb,var(--c2) 45%,transparent)}50%{box-shadow:0 0 46px color-mix(in srgb,var(--c3) 75%,transparent)}}
[data-tpl="cuento"] .fecha .dia{font-family:var(--f-script);font-size:6rem;color:var(--c2);text-shadow:0 0 16px color-mix(in srgb,var(--c2) 50%,transparent)}
[data-tpl="cuento"] .fecha .d-dow,[data-tpl="cuento"] .fecha .d-mes,[data-tpl="cuento"] .fecha .d-anio{font-family:var(--f-head);font-size:.92rem;letter-spacing:.2em}
[data-tpl="cuento"] .cuenta div{border:1px solid var(--c2);border-radius:50%;width:74px;height:74px;min-width:0;display:grid;place-content:center;padding:0;background:var(--card)}
[data-tpl="cuento"] .cuenta b{font-family:var(--f-head);font-size:1.4rem}
[data-tpl="cuento"] .padres b{font-family:var(--f-head);color:var(--accent);opacity:1}
[data-tpl="cuento"] h2.sec{font-family:var(--f-script);font-size:3rem;color:var(--accent);text-shadow:0 0 14px color-mix(in srgb,var(--c2) 45%,transparent)}
[data-tpl="cuento"] .programa::before{background:linear-gradient(var(--c2),var(--c3),transparent);width:2px;opacity:.9}
[data-tpl="cuento"] .programa time{font-family:var(--f-head);color:var(--accent);font-size:.92rem}
[data-tpl="cuento"] .programa span::before{width:12px;height:12px;background:var(--c2);border-radius:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);left:-.4rem;top:.52rem;transform:scale(1.5)}
[data-tpl="cuento"] .nombre-lugar{font-family:var(--f-head);color:var(--accent);font-size:1.2rem}
[data-tpl="cuento"] .btn{font-family:var(--f-head);font-weight:700;letter-spacing:.16em;font-size:.8rem;border-radius:999px;color:#2a1b00;background:linear-gradient(135deg,var(--c2),var(--c3));box-shadow:0 0 20px color-mix(in srgb,var(--c2) 50%,transparent);animation:cu-glowb 3s ease-in-out infinite}
@keyframes cu-glowb{50%{box-shadow:0 0 34px color-mix(in srgb,var(--c3) 80%,transparent)}}
[data-tpl="cuento"] .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--c2);box-shadow:none;animation:none}
[data-tpl="cuento"] .galeria img{border-radius:50%;border:3px solid var(--c2);aspect-ratio:1;object-fit:cover}
[data-tpl="cuento"] .nombre-cierre{font-family:var(--f-script);font-size:2.2rem;color:var(--accent)}
/* ================= 4. CIELO2 ================= */
[data-fx="cielo2"] #fx{background:radial-gradient(circle at 10% 30%,color-mix(in srgb,var(--c3) 40%,transparent) 0 40px,#0000 42px),radial-gradient(circle at 90% 62%,color-mix(in srgb,var(--c3) 30%,transparent) 0 48px,#0000 50px),radial-gradient(ellipse 90% 40% at 50% 0%,color-mix(in srgb,var(--c2) 26%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--c1) 38%,var(--bg)),var(--bg) 50%,color-mix(in srgb,var(--c3) 30%,var(--bg)))}
.ci-arc{stroke-dasharray:1;stroke-dashoffset:0}
.hero.in .ci-arc{animation:ci-draw 1.3s ease-out var(--dl,0s) both}
@keyframes ci-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.sg-wg.ag-wl,.sg-wg.ag-wr{animation-name:sg-wg2}
@keyframes sg-wg2{0%,100%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(.7) rotate(-4deg)}}
.sobre-cielo2{width:240px;height:230px}
.sobre-cielo2 .ci-tr{animation:ci-trem 2.4s ease-in-out infinite;transform-origin:0 100%}.sobre-cielo2 .ci-tr2{animation-delay:-1.2s}
@keyframes ci-trem{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
.sobre-cielo2 .ci-bw{transition:transform .95s cubic-bezier(.3,1.2,.4,1)}
.sobre-cielo2 .ci-bwl{transform-origin:120px 190px}.sobre-cielo2 .ci-bwr{transform-origin:120px 190px}
.sobre-cielo2 .ci-halo{transition:transform .9s ease-in,opacity .9s;transform-origin:120px 46px}
.sobre-cielo2.open .ci-bwl{transform:rotate(-58deg)}
.sobre-cielo2.open .ci-bwr{transform:rotate(58deg)}
.sobre-cielo2.open .ci-halo{transform:translateY(-30px) scale(1.5);opacity:0}
.sobre-cielo2.open .ci-tr{animation:none}
[data-tpl="cielo2"] #sobre{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 45%,var(--bg)),var(--soft))}
[data-tpl="cielo2"] .sobre-wrap h1{font-size:3.2rem;color:var(--accent)}
[data-tpl="cielo2"] .eyebrow{font-weight:500;letter-spacing:.2em;font-size:.82rem;color:var(--accent)}
[data-tpl="cielo2"] .nombre{font-size:min(5rem,18vw);line-height:1.1;padding-bottom:.08em;color:var(--accent);background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--c1)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c2) 70%,transparent));animation:ci-name 4s ease-in-out infinite}
@keyframes ci-name{50%{filter:drop-shadow(0 0 20px color-mix(in srgb,var(--c2) 100%,transparent))}}
[data-tpl="cielo2"] .titulo{font-family:var(--f-head);font-weight:600;font-size:1.3rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.foto.f-cielo2{--ar:1;width:min(76%,280px);margin-top:3rem;border-radius:50%;padding:7px;background:linear-gradient(160deg,#fff,var(--c1),#fff);box-shadow:0 0 0 6px color-mix(in srgb,#fff 70%,transparent),0 16px 40px color-mix(in srgb,var(--c1) 55%,transparent)}
.foto.f-cielo2 img{border-radius:50%}
.foto.f-cielo2::before{content:"";position:absolute;left:50%;top:-26px;width:46%;height:20px;margin-left:-23%;border:5px solid var(--c2);border-radius:50%;box-shadow:0 0 14px var(--c2),inset 0 0 8px var(--c2);animation:sg-gl 2.2s ease-in-out infinite}
[data-tpl="cielo2"] .fecha .dia{font-family:var(--f-script);font-size:6rem;color:var(--accent)}
[data-tpl="cielo2"] .fecha .d-dow,[data-tpl="cielo2"] .fecha .d-mes,[data-tpl="cielo2"] .fecha .d-anio{font-weight:600;letter-spacing:.18em;font-size:.95rem}
[data-tpl="cielo2"] .cuenta div{background:#ffffffb8;border-radius:50%;width:76px;height:76px;min-width:0;padding:0;display:grid;place-content:center;color:var(--ink);box-shadow:0 6px 18px color-mix(in srgb,var(--c1) 45%,transparent)}
[data-tpl="cielo2"] .padres b{color:var(--accent);opacity:1;font-weight:700;letter-spacing:.2em}
[data-tpl="cielo2"] .mensaje{font-style:normal;font-size:1.12rem}
[data-tpl="cielo2"] h2.sec{font-family:var(--f-script);font-size:3rem;color:var(--accent)}
[data-tpl="cielo2"] .programa::before{background:repeating-linear-gradient(var(--c1) 0 5px,transparent 5px 10px);opacity:1;width:2px}
[data-tpl="cielo2"] .programa time{color:var(--accent);font-weight:700}
[data-tpl="cielo2"] .programa span::before{background:var(--c2);box-shadow:0 0 0 4px color-mix(in srgb,var(--c2) 35%,transparent),0 0 8px var(--c2)}
[data-tpl="cielo2"] .nombre-lugar{color:var(--accent)}
[data-tpl="cielo2"] .btn{border-radius:999px;font-weight:700;letter-spacing:.12em;font-size:.82rem;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent));box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 1px 0 #fff6}
[data-tpl="cielo2"] .btn.ghost{background:#ffffff80;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
[data-tpl="cielo2"] .galeria img{border-radius:50% 50% 18px 18px;border:3px solid #fff;box-shadow:0 8px 20px color-mix(in srgb,var(--c1) 50%,transparent)}
[data-tpl="cielo2"] .nombre-cierre{font-family:var(--f-script);font-size:2.2rem;color:var(--accent)}
/* ================= 5. PALOMA2 ================= */
[data-fx="paloma2"] #fx{background:radial-gradient(ellipse 70% 38% at 50% 0%,color-mix(in srgb,var(--c2) 30%,transparent),transparent 70%),radial-gradient(circle at 6% 60%,color-mix(in srgb,var(--c1) 22%,transparent),transparent 40%),radial-gradient(circle at 96% 80%,color-mix(in srgb,var(--c3) 22%,transparent),transparent 40%),var(--bg)}
.pa-wing{animation:pa-flap var(--t,1.1s) ease-in-out var(--dl,0s) infinite}
@keyframes pa-flap{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-22deg)}}
.pa-fly{animation:pa-fly 9s ease-in-out infinite alternate}
@keyframes pa-fly{0%{transform:translate(-16px,6px) rotate(-3deg)}100%{transform:translate(22px,-8px) rotate(3deg)}}
.pa-rip{animation:pa-rip 3s ease-out infinite;transform-box:fill-box;transform-origin:50% 50%}.pa-rip2{animation-delay:-1.5s}
@keyframes pa-rip{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.sobre-paloma2{width:240px;height:240px}
.sobre-paloma2 .pa-disc{transition:transform .9s cubic-bezier(.5,0,.3,1),opacity .8s .1s;transform-origin:120px 120px}
.sobre-paloma2 .pa-dv{transition:transform 1s cubic-bezier(.4,0,.6,1),opacity .9s .1s}
.sobre-paloma2.open .pa-disc{transform:translate(120px,120px) scale(1.9);opacity:0}
.sobre-paloma2.open .pa-dv{transform:translate(110px,-150px) scale(1.4);opacity:0}
[data-tpl="paloma2"] #sobre{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c2) 30%,var(--bg)),var(--soft) 75%)}
[data-tpl="paloma2"] .sobre-wrap h1{font-size:3.4rem;color:var(--accent)}
[data-tpl="paloma2"] .sobre-wrap .para{font-style:italic;letter-spacing:.14em}
[data-tpl="paloma2"] .eyebrow{font-style:italic;text-transform:none;letter-spacing:.08em;font-size:1.25rem;color:var(--accent)}
[data-tpl="paloma2"] .nombre{font-size:min(5.4rem,19vw);line-height:1.1;padding-bottom:.06em;background:linear-gradient(180deg,var(--accent-2),var(--accent) 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--c2) 40%,transparent))}
[data-tpl="paloma2"] .titulo{font-family:var(--f-head);font-weight:600;font-size:1.1rem;letter-spacing:.36em;text-transform:uppercase;color:var(--ink)}
.foto.f-paloma2{--ar:4/5;width:min(74%,280px);border-radius:999px 999px 8px 8px;padding:9px;background:conic-gradient(from 20deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));box-shadow:0 0 0 3px var(--accent-2),0 18px 40px color-mix(in srgb,var(--c1) 40%,transparent);animation:pa-glass 6s ease-in-out infinite}
.foto.f-paloma2 img{border-radius:999px 999px 2px 2px;border:3px solid var(--accent-2)}
@keyframes pa-glass{50%{filter:brightness(1.12) saturate(1.15)}}
[data-tpl="paloma2"] .fecha .dia{font-family:var(--f-script);font-size:6.2rem;color:var(--accent-2)}
[data-tpl="paloma2"] .fecha .d-dow,[data-tpl="paloma2"] .fecha .d-mes,[data-tpl="paloma2"] .fecha .d-anio{font-size:1.05rem;letter-spacing:.24em;font-weight:600}
[data-tpl="paloma2"] .cuenta div{background:transparent;border:1px solid var(--accent-2);border-radius:50% 50% 6px 6px;box-shadow:none}
[data-tpl="paloma2"] .mensaje{font-size:1.4rem}
[data-tpl="paloma2"] .padres b{font-family:var(--f-head);color:var(--accent);opacity:1;font-weight:600;letter-spacing:.3em}
[data-tpl="paloma2"] h2.sec{font-family:var(--f-script);font-size:3.2rem;color:var(--accent)}
[data-tpl="paloma2"] .programa::before{background:var(--accent-2);opacity:.6}
[data-tpl="paloma2"] .programa time{font-family:var(--f-head);font-size:1.15rem;color:var(--accent)}
[data-tpl="paloma2"] .programa span::before{width:10px;height:10px;border-radius:2px;transform:rotate(45deg);background:var(--c1);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 70%,transparent)}
[data-tpl="paloma2"] .nombre-lugar{font-family:var(--f-head);color:var(--accent)}
[data-tpl="paloma2"] .btn{border-radius:999px 999px 6px 6px;font-family:var(--f-head);font-weight:700;letter-spacing:.2em;font-size:.82rem;padding:.9rem 2rem;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--c1)));box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 30%,transparent)}
[data-tpl="paloma2"] .btn.ghost{background:transparent;border:1.5px solid var(--accent);color:var(--accent);box-shadow:none}
[data-tpl="paloma2"] .galeria img{border-radius:999px 999px 8px 8px;border:3px solid var(--accent-2);aspect-ratio:3/4;object-fit:cover}
[data-tpl="paloma2"] .nombre-cierre{font-family:var(--f-script);font-size:2.3rem;color:var(--accent)}
/* ================= 6. LUNAOSITO ================= */
[data-fx="lunaosito"] #fx{background:radial-gradient(1.5px 1.5px at 20px 30px,var(--c2),#0000),radial-gradient(1px 1px at 120px 80px,var(--ink),#0000),radial-gradient(1.5px 1.5px at 200px 160px,var(--c2),#0000),radial-gradient(1px 1px at 60px 150px,var(--c3),#0000),radial-gradient(ellipse 80% 40% at 50% 10%,color-mix(in srgb,var(--c2) 22%,transparent),transparent 70%),linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--c1) 18%,var(--bg)));background-size:230px 200px,230px 200px,230px 200px,230px 200px,auto,auto}
.lu-rock{animation:lu-rock 5s ease-in-out infinite;transform-origin:200px -24px}
@keyframes lu-rock{0%,100%{transform:rotate(-4.5deg)}50%{transform:rotate(4.5deg)}}
.lu-mob{animation:sg-sw 6s ease-in-out infinite}
.lu-breath{animation:lu-br 3.4s ease-in-out infinite}
@keyframes lu-br{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.07)}}
.lu-z{animation:lu-z 3.6s ease-in infinite;opacity:0;transform-box:fill-box}
@keyframes lu-z{0%{transform:translate(0,10px) scale(.6);opacity:0}25%{opacity:1}100%{transform:translate(14px,-26px) scale(1.2);opacity:0}}
.sobre-lunaosito{width:240px;height:250px}
.sobre-lunaosito .lu-sw{animation:lu-sw 3.2s ease-in-out infinite;transform-origin:120px -10px;transition:transform 1s cubic-bezier(.5,0,.8,.4),opacity .9s .1s}
@keyframes lu-sw{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
.sobre-lunaosito.open .lu-sw{animation:none;transform:translateY(-260px) rotate(24deg);opacity:0}
[data-tpl="lunaosito"] #sobre{background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c2) 24%,var(--bg)),var(--bg) 78%)}
[data-tpl="lunaosito"] .sobre-wrap h1{font-size:3.2rem;color:var(--accent)}
[data-tpl="lunaosito"] .eyebrow{font-weight:600;letter-spacing:.1em;text-transform:none;font-size:1.05rem;color:var(--accent)}
[data-tpl="lunaosito"] .nombre{font-size:min(5.2rem,18vw);line-height:1.12;padding-bottom:.06em;color:var(--accent);text-shadow:0 3px 0 color-mix(in srgb,var(--c1) 60%,transparent),0 0 22px color-mix(in srgb,var(--c2) 50%,transparent);animation:lu-bob 5s ease-in-out infinite}
@keyframes lu-bob{50%{transform:translateY(-4px)}}
[data-tpl="lunaosito"] .titulo{font-family:var(--f-head);font-size:1.2rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.foto.f-lunaosito{--ar:1;width:min(74%,270px);border-radius:50%;padding:8px;background:linear-gradient(160deg,var(--c2),var(--c3),var(--c1));box-shadow:0 0 34px color-mix(in srgb,var(--c2) 45%,transparent)}
.foto.f-lunaosito img{border-radius:50%;border:4px solid var(--bg)}
.foto.f-lunaosito::before{content:"";position:absolute;top:-22px;right:-18px;width:56px;height:56px;border-radius:50%;box-shadow:-14px 8px 0 0 var(--c2);transform:rotate(-14deg);animation:sg-sw 5s ease-in-out infinite;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c2) 70%,transparent))}
.foto.f-lunaosito::after{content:"";position:absolute;left:-14px;bottom:18px;width:16px;height:16px;background:var(--c2);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:sg-tw 2.4s ease-in-out infinite}
[data-tpl="lunaosito"][data-date="badge"] .fecha .dia{background:var(--c2);color:#2a2000;box-shadow:6px 6px 0 var(--c1);font-family:var(--f-script)}
[data-tpl="lunaosito"] .fecha .d-dow,[data-tpl="lunaosito"] .fecha .d-mes,[data-tpl="lunaosito"] .fecha .d-anio{font-weight:700;letter-spacing:.18em;font-size:.95rem}
[data-tpl="lunaosito"] .cuenta div{background:var(--card);border-radius:20px;border:2px solid var(--c2)}
[data-tpl="lunaosito"] .mensaje{font-style:normal;font-size:1.1rem}
[data-tpl="lunaosito"] .padres b{color:var(--accent);opacity:1;font-weight:700}
[data-tpl="lunaosito"] h2.sec{font-family:var(--f-script);font-size:2.8rem;color:var(--accent)}
[data-tpl="lunaosito"] .programa::before{background:repeating-linear-gradient(var(--c2) 0 4px,transparent 4px 10px);opacity:.9;width:3px}
[data-tpl="lunaosito"] .programa time{color:var(--accent);font-weight:700}
[data-tpl="lunaosito"] .programa span::before{width:14px;height:14px;background:var(--c2);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);border-radius:0;left:-.45rem;top:.5rem;transform:scale(1.4)}
[data-tpl="lunaosito"] .nombre-lugar{color:var(--accent)}
[data-tpl="lunaosito"] .btn{border-radius:999px;font-weight:700;letter-spacing:.1em;font-size:.85rem;background:var(--accent);color:var(--btn-ink);box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 55%,#000),0 12px 22px #0002}
[data-tpl="lunaosito"] .btn:active{transform:translateY(3px);box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000)}
[data-tpl="lunaosito"] .btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--accent);box-shadow:none}
[data-tpl="lunaosito"] .galeria img{border-radius:50%;border:3px solid var(--c2);aspect-ratio:1;object-fit:cover}
[data-tpl="lunaosito"] .nombre-cierre{font-family:var(--f-script);font-size:2.1rem;color:var(--accent)}
/* ================= 7. LUZ ================= */
[data-fx="luz"] #fx{background:radial-gradient(ellipse 70% 36% at 50% 0%,color-mix(in srgb,var(--c2) 38%,transparent),transparent 70%),radial-gradient(circle at 0% 70%,color-mix(in srgb,var(--c1) 18%,transparent),transparent 40%),radial-gradient(circle at 100% 50%,color-mix(in srgb,var(--c3) 18%,transparent),transparent 40%),var(--bg)}
.lz-dv{animation:pa-fly 8s ease-in-out infinite alternate}
.sobre-luz{width:240px;height:250px}
.sobre-luz .lz-flut{animation:lz-fl 3.2s ease-in-out infinite}
@keyframes lz-fl{0%,100%{transform:skewX(-1.6deg)}50%{transform:skewX(1.8deg) scaleY(1.01)}}
.sobre-luz .lz-veil{transition:transform 1s cubic-bezier(.4,0,.3,1),opacity .8s .2s}
.sobre-luz .lz-burst{transition:transform .9s ease-out;transform-origin:120px 100px;transform:scale(.7)}
.sobre-luz.open .lz-veil{transform:translateY(-190px) rotate(8deg);opacity:0}
.sobre-luz.open .lz-burst{transform:scale(1.5)}
.sobre-luz.open .lz-flut{animation:none}
[data-tpl="luz"] #sobre{background:radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--c2) 34%,var(--bg)),var(--soft) 78%)}
[data-tpl="luz"] .sobre-wrap h1{font-size:3.4rem;color:var(--accent)}
[data-tpl="luz"] .sobre-wrap .para{font-family:var(--f-head);font-size:.82rem;letter-spacing:.3em}
[data-tpl="luz"] .eyebrow{font-family:var(--f-head);font-size:.8rem;letter-spacing:.34em;color:var(--accent)}
[data-tpl="luz"] .nombre{font-size:min(5.6rem,19vw);line-height:1.1;padding-bottom:.06em;background:linear-gradient(100deg,var(--accent) 30%,var(--c2) 48%,#fff 52%,var(--c2) 56%,var(--accent) 70%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:pr-name 7s ease-in-out infinite}
[data-tpl="luz"] .titulo{font-family:var(--f-body);font-style:italic;font-size:1.4rem;color:var(--ink);max-width:90%;margin:0 auto}
.foto.f-luz{--ar:1;width:min(68%,260px);margin:3rem auto;border-radius:50%;padding:8px;background:linear-gradient(150deg,#fff,var(--c2),#fff);box-shadow:0 0 0 3px var(--accent-2),0 0 34px color-mix(in srgb,var(--c2) 65%,transparent)}
.foto.f-luz img{border-radius:50%}
.foto.f-luz::before{content:"";position:absolute;inset:-34px;border-radius:50%;z-index:-1;background:repeating-conic-gradient(var(--c2) 0 3deg,transparent 3deg 10deg);-webkit-mask:radial-gradient(circle,transparent 61%,#000 62%);mask:radial-gradient(circle,transparent 61%,#000 62%);animation:sg-sp 70s linear infinite;opacity:.8}
.foto.f-luz::after{content:"";position:absolute;left:50%;top:-52px;width:6px;height:26px;margin-left:-3px;background:var(--accent-2);box-shadow:-10px 7px 0 -1px var(--accent-2),10px 7px 0 -1px var(--accent-2);border-radius:3px;filter:drop-shadow(0 0 6px var(--c2))}
[data-tpl="luz"] .fecha .dia{font-family:var(--f-head);font-size:4.6rem;font-weight:500;color:var(--accent-2)}
[data-tpl="luz"] .fecha .d-dow,[data-tpl="luz"] .fecha .d-mes,[data-tpl="luz"] .fecha .d-anio{font-family:var(--f-head);font-size:.95rem;letter-spacing:.26em}
[data-tpl="luz"] .cuenta div{background:transparent;border:1px solid var(--accent-2);border-radius:999px 999px 6px 6px;box-shadow:none}
[data-tpl="luz"] .mensaje{font-size:1.4rem}
[data-tpl="luz"] .padres b{font-family:var(--f-head);color:var(--accent);opacity:1;letter-spacing:.3em;font-weight:500}
[data-tpl="luz"] h2.sec{font-family:var(--f-head);font-size:1.45rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--accent)}
[data-tpl="luz"] .programa::before{background:var(--accent-2);opacity:.6}
[data-tpl="luz"] .programa time{font-family:var(--f-head);font-size:.95rem;color:var(--accent)}
[data-tpl="luz"] .programa span::before{width:10px;height:10px;border-radius:50%;background:var(--c2);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 35%,transparent),0 0 10px var(--c2)}
[data-tpl="luz"] .nombre-lugar{font-family:var(--f-head);font-size:1.2rem;color:var(--accent)}
[data-tpl="luz"] .btn{border-radius:2px;font-family:var(--f-head);font-weight:600;letter-spacing:.22em;font-size:.78rem;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 65%,var(--c2)));box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 30%,transparent)}
[data-tpl="luz"] .btn.ghost{background:transparent;border:1px solid var(--accent-2);color:var(--ink);box-shadow:none}
[data-tpl="luz"] .galeria img{border-radius:999px 999px 6px 6px;border:2px solid var(--accent-2);aspect-ratio:3/4;object-fit:cover}
[data-tpl="luz"] .nombre-cierre{font-family:var(--f-script);font-size:2.4rem;color:var(--accent)}
/* ================= 8. ESPIGAS ================= */
[data-fx="espigas"] #fx{background:radial-gradient(ellipse 80% 40% at 50% 0%,color-mix(in srgb,var(--c2) 40%,transparent),transparent 70%),linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--c1) 22%,var(--bg)) 70%,color-mix(in srgb,var(--c3) 12%,var(--bg)))}
.es-bird{animation:es-bird 16s linear infinite;opacity:0}
.es-b2{animation-duration:20s}.es-b3{animation-duration:24s}
@keyframes es-bird{0%{transform:translate(-30px,20px);opacity:0}8%{opacity:.9}92%{opacity:.9}100%{transform:translate(430px,-30px);opacity:0}}
.sobre-espigas{width:240px;height:250px}
.sobre-espigas .es-st{transform:rotate(var(--a0));animation:es-wind 3.4s ease-in-out infinite;transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
.sobre-espigas .es-st:nth-child(even){animation-delay:-1.2s}
@keyframes es-wind{0%,100%{transform:rotate(calc(var(--a0) - 1.6deg))}50%{transform:rotate(calc(var(--a0) + 1.8deg))}}
.sobre-espigas .es-grape{transform:scale(.2);opacity:0;transform-origin:120px 90px;transition:transform .9s cubic-bezier(.3,1.5,.5,1) .15s,opacity .5s .15s}
.sobre-espigas .es-rib{transition:transform .7s,opacity .6s;transform-origin:120px 210px}
.sobre-espigas.open .es-st{animation:none;transform:rotate(var(--a))}
.sobre-espigas.open .es-grape{transform:scale(1);opacity:1}
.sobre-espigas.open .es-rib{transform:translateY(30px) scale(.4);opacity:0}
[data-tpl="espigas"] #sobre{background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c2) 34%,var(--bg)),var(--soft) 80%)}
[data-tpl="espigas"] .sobre-wrap h1{font-family:var(--f-script);font-weight:700;font-size:3.2rem;color:var(--accent)}
[data-tpl="espigas"] .eyebrow{font-style:italic;text-transform:none;letter-spacing:.04em;font-size:1.1rem;color:var(--accent)}
[data-tpl="espigas"] .nombre{font-weight:700;font-size:min(5.6rem,19vw);line-height:1.02;color:var(--accent);text-shadow:2px 3px 0 color-mix(in srgb,var(--c2) 80%,transparent),4px 6px 0 color-mix(in srgb,var(--c1) 40%,transparent);transform:rotate(-2deg);animation:es-name 6s ease-in-out infinite}
@keyframes es-name{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-.6deg)}}
[data-tpl="espigas"] .titulo{font-family:var(--f-head);font-style:italic;font-size:1.35rem;color:var(--ink);font-weight:500}
.foto.f-espigas{--ar:4/5;width:min(74%,280px);padding:10px 10px 10px;background:var(--card);border:1px solid color-mix(in srgb,var(--accent-2) 60%,transparent);border-radius:6px;transform-origin:50% 0;animation:es-hang 5s ease-in-out infinite;box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 28%,transparent)}
.foto.f-espigas img{border-radius:3px}
.foto.f-espigas::before{content:"";position:absolute;top:-34px;left:50%;width:70%;height:34px;margin-left:-35%;border:2px dashed var(--accent-2);border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;transform:scaleY(.9)}
.foto.f-espigas::after{content:"";position:absolute;right:-12px;bottom:-12px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--c3),color-mix(in srgb,var(--c3) 55%,#000));box-shadow:-20px 4px 0 -4px var(--c3),-8px 20px 0 -4px var(--c3)}
@keyframes es-hang{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
[data-tpl="espigas"] .fecha .dia{font-family:var(--f-script);font-weight:700;font-size:5.6rem;color:var(--accent-2)}
[data-tpl="espigas"] .fecha .d-dow,[data-tpl="espigas"] .fecha .d-mes,[data-tpl="espigas"] .fecha .d-anio{font-size:.95rem;letter-spacing:.2em;font-weight:600}
[data-tpl="espigas"] .cuenta div{background:var(--card);border-radius:8px;border:1.5px solid var(--c1);box-shadow:3px 3px 0 var(--c1)}
[data-tpl="espigas"] .mensaje{font-size:1.25rem}
[data-tpl="espigas"] .padres b{font-family:var(--f-script);font-size:1.5rem;text-transform:none;letter-spacing:0;color:var(--accent);opacity:1;font-weight:700}
[data-tpl="espigas"] h2.sec{font-family:var(--f-script);font-weight:700;font-size:3rem;color:var(--accent)}
[data-tpl="espigas"] .programa::before{background:none;border-left:2px dashed var(--accent-2);width:0;opacity:.8}
[data-tpl="espigas"] .programa time{font-family:var(--f-script);font-size:1.5rem;font-weight:700;color:var(--accent)}
[data-tpl="espigas"] .programa span::before{width:14px;height:14px;border-radius:50% 0 50% 0;background:var(--c1);left:-.45rem;top:.55rem;transform:rotate(-20deg)}
[data-tpl="espigas"] .nombre-lugar{font-family:var(--f-script);font-size:2rem;font-weight:700;color:var(--accent)}
[data-tpl="espigas"] .btn{border-radius:6px;font-family:var(--f-head);text-transform:none;font-style:italic;font-weight:700;letter-spacing:.02em;font-size:1.1rem;background:var(--accent);box-shadow:3px 4px 0 var(--c1)}
[data-tpl="espigas"] .btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
[data-tpl="espigas"] .galeria img{border-radius:6px;border:6px solid var(--card);box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 25%,transparent);transform:rotate(-2deg)}
[data-tpl="espigas"] .galeria img:nth-child(even){transform:rotate(2deg)}
[data-tpl="espigas"] .nombre-cierre{font-family:var(--f-script);font-weight:700;font-size:2.3rem;color:var(--accent)}
/* ================= 9. ANGELITO ================= */
[data-fx="angelito"] #fx{background:radial-gradient(circle at 5% 8%,color-mix(in srgb,var(--c1) 40%,transparent),transparent 36%),radial-gradient(circle at 98% 28%,color-mix(in srgb,var(--c3) 38%,transparent),transparent 34%),radial-gradient(circle at 4% 78%,color-mix(in srgb,var(--c4) 36%,transparent),transparent 38%),radial-gradient(circle at 96% 96%,color-mix(in srgb,var(--c2) 34%,transparent),transparent 36%),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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .6 0 0 0 .08 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"),var(--bg)}
.an-bl{animation:an-bl 9s ease-in-out infinite;opacity:.8}
.an-b2{animation-delay:-3s}.an-b3{animation-delay:-6s;animation-duration:11s}.an-b4{animation-delay:-2s;animation-duration:7s}
@keyframes an-bl{0%,100%{transform:scale(.88)}50%{transform:scale(1.14)}}
.hero.in .an-bl{animation:an-in 1.4s ease-out both,an-bl 9s ease-in-out 1.4s infinite}
@keyframes an-in{from{transform:scale(.1);opacity:0}to{transform:scale(.88);opacity:.8}}
.an-fe{animation:an-fe 7s ease-in-out infinite;opacity:0}
@keyframes an-fe{0%{transform:translate(0,-10px) rotate(0);opacity:0}15%{opacity:.9}100%{transform:translate(24px,130px) rotate(40deg);opacity:0}}
.sobre-angelito{width:240px;height:240px}
.sobre-angelito .an-bk-fl{animation:sg-fl 3.4s ease-in-out infinite}
.sobre-angelito .an-cover{transition:transform .9s cubic-bezier(.5,0,.3,1)}
.sobre-angelito .an-light{opacity:0;transition:opacity .6s .35s;transform-origin:122px 70px;transform-box:view-box}
.sobre-angelito.open .an-cover{transform:scaleX(-.95)}
.sobre-angelito.open .an-light{opacity:1}
.sobre-angelito .an-glow{animation:sg-pu 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
[data-tpl="angelito"] #sobre{background:radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--c1) 40%,transparent),transparent 45%),radial-gradient(circle at 85% 80%,color-mix(in srgb,var(--c3) 40%,transparent),transparent 45%),var(--soft)}
[data-tpl="angelito"] .sobre-wrap h1{font-family:var(--f-script);font-weight:700;font-size:4.2rem;line-height:.9;color:var(--accent)}
[data-tpl="angelito"] .eyebrow{font-family:var(--f-head);font-style:italic;text-transform:none;letter-spacing:.04em;font-size:1.15rem;color:var(--accent)}
[data-tpl="angelito"] .nombre{font-weight:700;font-size:min(6.6rem,22vw);line-height:.95;padding:.04em 0 .1em;background:linear-gradient(95deg,var(--accent),color-mix(in srgb,var(--accent) 62%,var(--c3)) 50%,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:220% 100%;animation:ma-name 8s ease-in-out infinite alternate;filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--c1) 40%,transparent))}
[data-tpl="angelito"] .titulo{font-family:var(--f-head);font-weight:600;font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.foto.f-angelito{--ar:1;width:min(76%,290px);border-radius:50%;padding:0;margin-top:2.4rem;isolation:isolate}
.foto.f-angelito img{border-radius:50%;border:6px solid #fff;box-shadow:0 8px 24px color-mix(in srgb,var(--c1) 45%,transparent)}
.foto.f-angelito::before{content:"";position:absolute;inset:-26px;z-index:-1;border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;background:conic-gradient(from 0deg,var(--c1),var(--c3),var(--c4),var(--c2),var(--c1));filter:blur(18px);opacity:.75;animation:an-spread 8s ease-in-out infinite}
.foto.f-angelito::after{content:"";position:absolute;left:50%;top:-30px;width:44%;height:18px;margin-left:-22%;border:4px solid var(--c2);border-radius:50%;box-shadow:0 0 14px var(--c2);animation:sg-gl 2.4s ease-in-out infinite}
@keyframes an-spread{0%,100%{transform:scale(.94) rotate(0)}50%{transform:scale(1.1) rotate(25deg)}}
[data-tpl="angelito"] .fecha .dia{font-family:var(--f-script);font-weight:700;font-size:6rem;line-height:.9;color:var(--accent)}
[data-tpl="angelito"] .fecha .d-dow,[data-tpl="angelito"] .fecha .d-mes,[data-tpl="angelito"] .fecha .d-anio{font-weight:600;letter-spacing:.18em;font-size:.95rem}
[data-tpl="angelito"] .cuenta div{background:#ffffffa8;border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;min-width:72px;box-shadow:0 6px 16px color-mix(in srgb,var(--c1) 45%,transparent);color:var(--ink)}
[data-tpl="angelito"] .mensaje{font-style:normal;font-size:1.12rem}
[data-tpl="angelito"] .padres b{font-family:var(--f-script);font-size:1.7rem;text-transform:none;letter-spacing:0;color:var(--accent);opacity:1;font-weight:700}
[data-tpl="angelito"] h2.sec{font-family:var(--f-script);font-weight:700;font-size:3.4rem;line-height:1;color:var(--accent)}
[data-tpl="angelito"] .programa::before{background:linear-gradient(var(--c1),var(--c3),var(--c4));width:3px;border-radius:3px;opacity:.8}
[data-tpl="angelito"] .programa time{font-weight:700;color:var(--accent)}
[data-tpl="angelito"] .programa span::before{width:14px;height:14px;background:var(--c3);box-shadow:3px 2px 0 var(--c1);border-radius:50% 46% 54% 50%}
[data-tpl="angelito"] .nombre-lugar{color:var(--accent)}
[data-tpl="angelito"] .btn{border-radius:46% 54% 50% 50% / 100% 100% 100% 100%;border-radius:999px;font-weight:700;letter-spacing:.1em;font-size:.82rem;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--c3)));box-shadow:0 8px 20px color-mix(in srgb,var(--c1) 55%,transparent)}
[data-tpl="angelito"] .btn.ghost{background:#ffffff80;color:var(--accent);border:2px solid var(--c1);box-shadow:none}
[data-tpl="angelito"] .galeria img{border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;border:4px solid #fff;box-shadow:0 8px 18px color-mix(in srgb,var(--c1) 45%,transparent)}
[data-tpl="angelito"] .galeria img:nth-child(even){border-radius:54% 46% 48% 52% / 46% 54% 46% 54%}
[data-tpl="angelito"] .nombre-cierre{font-family:var(--f-script);font-weight:700;font-size:2.8rem;color:var(--accent)}