:root {
  --pink:#ff6ba8;--lila:#b38dff;--sky:#8ad7ff;--sun:#ffd772;--bg:#fff9ff;--ink:#332b4f;
  --radius:22px;--shadow:0 12px 30px rgba(67,34,104,.12);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Nunito",sans-serif;color:var(--ink);background:var(--bg)}
h1,h2,h3{font-family:"Baloo 2",cursive;line-height:1.1;margin:.2rem 0}.container{width:min(1100px,92vw);margin:auto}
.site-bg{position:fixed;inset:0;background:radial-gradient(circle at 10% 10%,#ffe7f4,transparent 42%),radial-gradient(circle at 90% 5%,#e7f7ff,transparent 36%),radial-gradient(circle at 50% 90%,#fff5d9,transparent 40%);z-index:-1}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:20;border-bottom:1px solid #f0e6ff}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;gap:.8rem}.logo{font-family:"Baloo 2";font-size:2rem;color:var(--pink);text-decoration:none}
.nav-links{list-style:none;display:flex;gap:1rem;padding:0;margin:0}.nav-links a{text-decoration:none;color:var(--ink);font-weight:700}.menu-toggle{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;border-radius:999px;padding:.78rem 1.1rem;font-weight:800;text-decoration:none;cursor:pointer;transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.btn-primary{background:linear-gradient(120deg,var(--pink),var(--lila));color:#fff}.btn-light{background:#fff;color:var(--ink);border:2px solid #f3defd}.small{padding:.55rem 1rem;font-size:.9rem}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;padding:3.2rem 0}.badge{background:#ffe6f2;display:inline-block;padding:.45rem .8rem;border-radius:999px;font-weight:800}
.hero h1{font-size:clamp(2rem,4vw,3.2rem)}.hero p{font-size:1.08rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}.mini-note{opacity:.8;font-size:.95rem}
.phone-mockup{position:relative;max-width:340px;justify-self:center}.pill{position:absolute;right:-12px;top:-12px;background:#fff;border:2px solid #f3dbff;padding:.35rem .7rem;border-radius:999px;font-size:.82rem;font-weight:700}
.phone-screen{background:linear-gradient(160deg,#ffd2ea,#d9f2ff);padding:1rem;border-radius:28px;border:8px solid #26223a;box-shadow:var(--shadow);text-align:center}.phone-screen h3{font-size:2rem}.phone-screen .age{font-size:1.35rem;color:#7b4fd4;font-weight:800}
.countbox{display:flex;justify-content:center;align-items:flex-end;gap:.35rem;font-weight:800;margin:.8rem 0}.countbox span{background:#fff;padding:.45rem .5rem;border-radius:10px}
.section{padding:3.2rem 0}.section h2{text-align:center;font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:1.4rem}.alt{background:#fff}.grid{display:grid;gap:1rem}.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.2rem}.card strong{display:block;margin-top:.7rem}
.steps{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr))}.steps article{background:#fff;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}.steps span{display:inline-grid;place-content:center;width:36px;height:36px;border-radius:50%;background:var(--lila);color:#fff;font-weight:800}
.templates{grid-template-columns:repeat(3,minmax(0,1fr))}.template-card{background:#fff;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}.template-card .preview{border-radius:16px;padding:2rem 1rem;text-align:center;font-size:2rem;margin-bottom:.7rem}
.template-card div:last-child{display:flex;gap:.6rem;flex-wrap:wrap}.t1 .preview{background:linear-gradient(120deg,#ffd3f0,#d8d7ff,#d1f4ff)}.t2 .preview{background:linear-gradient(120deg,#1a56f2,#ff4d5e,#ffd35e);color:#fff}.t3 .preview{background:linear-gradient(120deg,#ffd4eb,#ffe9b5)}.t4 .preview{background:linear-gradient(120deg,#b0e77e,#ffd07b)}.t5 .preview{background:linear-gradient(120deg,#66c670,#dfffe2)}.t6 .preview{background:linear-gradient(120deg,#ff8bc5,#ffe1f0)}
.price-card{background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:1.4rem;max-width:760px;margin:auto}.price{font-size:2.2rem;color:var(--pink);font-family:"Baloo 2"}.price-card ul{columns:2;padding-left:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}.chips span{background:#fff;border:1px solid #f0dfff;border-radius:999px;padding:.45rem .8rem;font-weight:700}
.faq-list{display:grid;gap:.8rem;max-width:860px;margin:auto}.faq-item{text-align:left;border:0;background:#fff;padding:1rem;border-radius:18px;box-shadow:var(--shadow);cursor:pointer}.faq-item span{font-weight:800;display:block}.faq-item p{display:none;margin:.6rem 0 0}.faq-item[aria-expanded="true"] p{display:block}
.cta{background:linear-gradient(120deg,#ffe9f4,#e9f7ff)}.cta p{text-align:center}.cta .hero-actions{justify-content:center}
.site-footer{background:#2f2748;color:#fff;text-align:center;padding:2rem 0}
.inv-body{min-height:100vh}.inv-wrap{width:min(740px,94vw);margin:1rem auto;padding:1rem}.inv-card{border-radius:32px;box-shadow:var(--shadow);padding:1.2rem;color:#fff;position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.35)}.inv-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.22),transparent 40%);pointer-events:none}
.inv-head{text-align:center}.inv-head h1{font-size:2.3rem}.inv-age{font-size:1.2rem;font-weight:800}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:1rem 0}.countdown div{background:rgba(17,10,33,.36);padding:.6rem;border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,.22)}.countdown b{display:block;font-size:1.3rem}
.inv-data,.gallery{background:rgba(17,10,33,.38);border-radius:18px;padding:1rem;margin-top:.8rem;border:1px solid rgba(255,255,255,.24)}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.ph{border-radius:14px;min-height:86px;display:grid;place-content:center;background:rgba(255,255,255,.18)}
.inv-actions{display:grid;gap:.6rem;margin-top:1rem}.inv-actions .btn{width:100%}.invi-link{display:block;text-align:center;margin-top:1rem;color:#fff;text-decoration:none;font-weight:700}
.theme-unicornio{background:linear-gradient(140deg,#f37cc2,#af94ff,#82d8ff)}.theme-superheroe{background:linear-gradient(140deg,#1c3cc4,#e53e57,#f5b52d)}.theme-princesa{background:linear-gradient(140deg,#fca8d2,#f4c96b,#f090c2)}.theme-dino{background:linear-gradient(140deg,#3fa95d,#8fd367,#e78c41)}.theme-futbol{background:linear-gradient(140deg,#0d8f45,#0f5225,#2d2d2d)}.theme-glam{background:linear-gradient(140deg,#ff4aa4,#ff78bf,#ffe1f4)}.theme-stranger{background:linear-gradient(145deg,#120816,#2b1240,#6a1f30)}
@media (max-width:900px){.cards-3,.templates,.steps{grid-template-columns:1fr 1fr}.hero{grid-template-columns:1fr}.phone-mockup{order:-1}}
@media (max-width:680px){.menu-toggle{display:block;border:0;background:#fff;border-radius:10px;padding:.4rem .6rem}.nav-links{display:none;position:absolute;top:70px;left:4vw;right:4vw;background:#fff;border-radius:16px;padding:1rem;box-shadow:var(--shadow);flex-direction:column}.nav-links.open{display:flex}.nav .btn{display:none}.cards-3,.templates,.steps{grid-template-columns:1fr}.price-card ul{columns:1}.countdown{grid-template-columns:repeat(2,1fr)}}
.hero-art{display:block;width:100%;max-width:340px;border-radius:20px;box-shadow:var(--shadow);margin:0 auto 1rem}
.template-card .preview img{width:100%;height:130px;object-fit:cover;border-radius:12px;display:block}
.gallery-grid .ph img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}

.floaters{position:fixed;inset:0;pointer-events:none;z-index:0}
.floaters span{position:absolute;font-size:1.5rem;opacity:.45;animation:float 8s ease-in-out infinite}
.floaters span:nth-child(1){left:4%;top:14%}.floaters span:nth-child(2){right:8%;top:18%;animation-delay:1s}
.floaters span:nth-child(3){left:10%;bottom:14%;animation-delay:2s}.floaters span:nth-child(4){right:7%;bottom:20%;animation-delay:3s}
.floaters span:nth-child(5){left:50%;top:8%;animation-delay:4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.hero{position:relative;z-index:1;align-items:center}
.hero-visual-stack{position:relative;display:grid;gap:1rem}
.hero-art{display:block;width:100%;max-width:420px;border-radius:20px;box-shadow:0 18px 45px rgba(47,20,85,.2);margin:0 auto}
.phone-mockup{max-width:360px;justify-self:center}
.phone-screen{box-shadow:0 20px 40px rgba(20,12,40,.28)}

.moodband{padding-top:1rem}
.moodband-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.moodband-grid img{width:100%;height:180px;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}

.card,.template-card,.price-card,.faq-item,.steps article{border:1px solid #f4e8ff}
.template-card{transition:transform .2s ease, box-shadow .2s ease}
.template-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(67,34,104,.18)}

@media (max-width:900px){
  .moodband-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .moodband-grid{grid-template-columns:1fr}
  .moodband-grid img{height:170px}
}

/* Fullscreen invites */
.invite-fullscreen{overflow:hidden}
.fullscreen-wrap{width:100vw;max-width:100vw;margin:0;padding:0}
.fullscreen-wrap .inv-card{min-height:100vh;border-radius:0;display:flex;flex-direction:column;justify-content:center;padding:1.2rem 1rem 1.6rem}
.fullscreen-wrap .hero-photo img{width:100%;max-width:720px;height:220px;object-fit:cover;border-radius:18px;display:block;margin:.4rem auto .8rem;box-shadow:var(--shadow)}
.start-overlay{position:fixed;inset:0;background:rgba(13,8,26,.92);display:grid;place-content:center;z-index:99}
.start-btn{font-size:1.05rem;padding:1rem 1.4rem}
.music-embed{margin:.8rem auto 0;width:min(760px,96vw)}
.music-embed iframe{width:100%;height:200px;border:0;border-radius:14px}
body.started .start-overlay{display:none}
body:not(.started) .inv-wrap{filter:blur(3px)}
body:not(.started) .music-embed{display:none!important}

/* Cinematic reveal */
body.starting .inv-wrap{animation:invFade .55s ease both}
@keyframes invFade{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:scale(1)}}
.reveal{opacity:0;transform:translateY(16px) scale(.99);transition:opacity .6s ease, transform .6s ease;transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:translateY(0) scale(1)}
.fullscreen-wrap .inv-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.16),transparent 34%),radial-gradient(circle at 80% 90%,rgba(255,255,255,.11),transparent 32%);pointer-events:none}
.start-btn{box-shadow:0 18px 44px rgba(255,107,168,.35)}

.inv-data p,.gallery h3,.countdown small,.countdown b{color:#fff}

.inv-head h1,.inv-head p,.inv-age{color:#fff}


/* Fit everything in one screen */
.fullscreen-wrap .inv-card{
  min-height:100dvh;
  max-height:100dvh;
  overflow:hidden;
  gap:.55rem;
  padding:.7rem .75rem .8rem;
}
.fullscreen-wrap .inv-head p{margin:.25rem 0;font-size:clamp(.82rem,1.5vh,1rem)}
.fullscreen-wrap .inv-head h1{font-size:clamp(1.45rem,3.7vh,2.3rem);margin:.1rem 0}
.fullscreen-wrap .inv-age{font-size:clamp(.95rem,2.3vh,1.25rem)}
.fullscreen-wrap .hero-photo img{height:clamp(120px,26vh,230px);margin:.2rem auto .3rem}
.fullscreen-wrap .countdown{margin:.35rem 0;gap:.35rem}
.fullscreen-wrap .countdown div{padding:.45rem}
.fullscreen-wrap .countdown b{font-size:clamp(.95rem,2.2vh,1.2rem)}
.fullscreen-wrap .inv-data{margin-top:.35rem;padding:.75rem}
.fullscreen-wrap .inv-data p{margin:.2rem 0;font-size:clamp(.8rem,1.7vh,.97rem)}
.fullscreen-wrap .invi-link{margin-top:.45rem;font-size:.9rem}
.fullscreen-wrap .music-embed{margin-top:.45rem}
.fullscreen-wrap .music-embed iframe{height:clamp(120px,19vh,190px)}
@media (max-height:740px){
  .fullscreen-wrap .hero-photo img{height:20vh}
  .fullscreen-wrap .inv-head p{font-size:.82rem}
  .fullscreen-wrap .inv-data p{font-size:.8rem}
}
@media (max-width:680px){
  .fullscreen-wrap .inv-card{padding:.65rem .65rem .7rem}
  .fullscreen-wrap .hero-photo img{height:22vh}
}


/* Fullscreen slider invite */
.invite-slider-wrap .inv-slider{position:relative;padding:0;display:block}
.inv-slider .slide{display:none;min-height:100dvh;padding:.9rem .8rem 1.2rem;align-items:center;justify-content:center;flex-direction:column;gap:.7rem}
.inv-slider .slide.active{display:flex}
.inv-slider .slide-next{margin-top:.2rem}
.slider-dots{position:absolute;left:0;right:0;bottom:.4rem;display:flex;justify-content:center;gap:.42rem;z-index:3;opacity:.45;transition:.25s opacity}
.slider-dots .dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.35);cursor:pointer}
.slider-dots .dot.active{background:#fff;transform:scale(1.18)}
@media (max-height:740px){.inv-slider .slide{padding:.65rem .6rem .95rem}}

.inv-slider:hover .slider-dots,.inv-slider:active .slider-dots{opacity:.85}


/* Stranger animated slides */
.stranger-scene{position:relative;width:min(760px,94vw);height:46vh;border-radius:18px;background:linear-gradient(160deg,#100616,#28113a,#5a1d2f);display:grid;place-content:center;text-align:center;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.stranger-scene h3{font-size:clamp(1.2rem,3.4vh,2rem);margin:.2rem 0;color:#ff5c7c;letter-spacing:.08em;text-transform:uppercase}
.stranger-scene p{margin:.2rem 0;color:#fff}
.mist{position:absolute;inset:auto -20% 0 -20%;height:40%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);filter:blur(9px);animation:mistMove 7s linear infinite}
.mist-2{animation-delay:2.5s;opacity:.7}
.bike-track{position:absolute;left:-12%;bottom:18%;font-size:2rem;animation:bikeRide 7s ease-in-out infinite}
@keyframes mistMove{0%{transform:translateX(-8%)}50%{transform:translateX(8%)}100%{transform:translateX(-8%)}}
@keyframes bikeRide{0%{transform:translateX(0)}45%{transform:translateX(58vw)}55%{transform:translateX(58vw)}100%{transform:translateX(0)}}


.stranger-scene{position:relative;width:min(760px,94vw);height:46vh;border-radius:18px;background:linear-gradient(160deg,#100616,#28113a,#5a1d2f);display:grid;place-content:center;text-align:center;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.st-img{position:absolute;object-fit:cover;border-radius:16px;filter:contrast(1.1) saturate(1.1)}
.st-a{left:4%;top:8%;width:44%;height:58%}
.st-b{right:4%;bottom:12%;width:48%;height:56%}
.demogorgon{position:absolute;font-size:2rem;filter:drop-shadow(0 0 10px rgba(255,0,40,.6));animation:demomove 3.8s ease-in-out infinite}
.demogorgon-left{left:8%;bottom:12%}
.demogorgon-right{right:8%;top:12%;animation-delay:1.4s}
@keyframes demomove{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.06)}}

.start-btn{width:64px;height:64px;padding:0;border-radius:50%;font-size:1.3rem}


/* Stranger Things vibe */
.stranger-scene{position:relative;width:min(760px,94vw);height:46vh;border-radius:18px;background:radial-gradient(circle at 50% 45%,rgba(130,0,34,.28),rgba(8,4,16,.96));display:grid;place-content:center;text-align:center;overflow:hidden;border:1px solid rgba(255,80,110,.35)}
.stranger-scene h3{font-size:clamp(1.2rem,3.4vh,2rem);margin:.2rem 0;color:#ff365f;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 14px rgba(255,40,70,.62)}
.stranger-scene p{margin:.2rem 0;color:#f2e8ee}
.st-img{position:absolute;object-fit:cover;border-radius:16px;filter:contrast(1.08) saturate(.9) brightness(.72)}
.st-a{left:4%;top:8%;width:44%;height:58%}
.st-b{right:4%;bottom:12%;width:48%;height:56%}
.portal-ring{position:absolute;left:50%;top:50%;width:170px;height:170px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(255,50,80,.58);box-shadow:0 0 32px rgba(255,30,80,.52), inset 0 0 24px rgba(255,20,70,.36);animation:pulsePortal 2.6s ease-in-out infinite}
.red-flare{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,50,80,.32),transparent 70%);mix-blend-mode:screen;animation:flicker 2.9s linear infinite}
.red-1{left:8%;top:6%}.red-2{right:8%;bottom:10%;animation-delay:1.1s}
.particle{position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(255,110,140,.75);filter:blur(.4px);animation:floatP 4.8s ease-in-out infinite}
.p1{left:30%;top:70%}.p2{left:58%;top:62%;animation-delay:1.2s}.p3{left:72%;top:54%;animation-delay:2.3s}
.vines{position:absolute;width:120px;height:100%;opacity:.36;background:repeating-linear-gradient(160deg,transparent 0 14px,rgba(25,7,16,.75) 14px 22px);filter:blur(.35px)}
.vines-l{left:0}.vines-r{right:0;transform:scaleX(-1)}
.mist{position:absolute;inset:auto -20% 0 -20%;height:42%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);filter:blur(9px);animation:mistMove 7s linear infinite}
.mist-2{animation-delay:2.4s;opacity:.68}
@keyframes pulsePortal{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09)}}
@keyframes flicker{0%,17%,23%,62%,100%{opacity:.9}18%,22%,63%,66%{opacity:.22}}
@keyframes floatP{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}


.stranger-lore{width:min(900px,95vw);background:rgba(10,5,18,.56);border:1px solid rgba(255,80,110,.32);border-radius:16px;padding:.75rem .7rem}
.stranger-lore h3{margin:.1rem 0 .5rem;text-align:center;color:#ff4c70;letter-spacing:.08em;text-transform:uppercase}
.lore-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.lore-grid article{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:.45rem}
.lore-grid strong{display:block;color:#fff;font-size:.88rem}
.lore-grid p{margin:.2rem 0 0;color:#eee;font-size:.76rem;line-height:1.2}
@media (max-width:700px){.lore-grid{grid-template-columns:1fr}.lore-grid p{font-size:.74rem}}


/* Stranger monsters layer (visual only) */
.monster-layer{position:absolute;inset:0;pointer-events:none}
.monster-layer .m{position:absolute;border-radius:18px;filter:drop-shadow(0 0 10px rgba(255,40,80,.45));animation:monsterPulse 4.4s ease-in-out infinite;opacity:.9;background-size:cover;background-position:center}
.monster-layer .demogorgon{left:6%;bottom:10%;width:26%;height:40%;background-image:url('/assets/img/stranger/stranger-1.jpg')}
.monster-layer .mindflayer{left:37%;top:8%;width:28%;height:36%;background-image:url('/assets/img/stranger/stranger-3.jpg');animation-delay:1s}
.monster-layer .demodog{right:8%;bottom:12%;width:24%;height:33%;background-image:url('/assets/img/stranger/stranger-2.jpg');animation-delay:1.8s}
.monster-layer .vecna{right:14%;top:12%;width:20%;height:30%;background-image:url('/assets/img/stranger/stranger-1.jpg');animation-delay:2.6s}
@keyframes monsterPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.04)}}