/* Kyara faz 9! — Stitch & Angel ------------------------------------------------ */
@font-face{font-family:"Fredoka";src:url(/fonts/fredoka-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin.woff2) format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --noite-900:#0B1240;--noite-700:#1B2A78;--noite-500:#3A2E8F;
  --stitch:#2F6FDB;--stitch-escuro:#1C3F9E;--stitch-claro:#9BD3F7;
  --angel:#F58FC0;--angel-escuro:#D1559A;--angel-claro:#FFD3E8;
  --hibisco:#FF5C7A;--folha:#2FB07F;--sol:#FFD45E;--sol-escuro:#C9951A;--mar:#38D0C8;
  --creme:#FFF7E8;--tinta:#1A1F4D;--tinta-2:#4A4F7D;--wa:#25D366;
  --r-card:28px;--gut:20px;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-pop:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--noite-900);color:var(--creme);
  font:400 1.0625rem/1.45 "Nunito",system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:linear-gradient(180deg,var(--noite-900) 0%,var(--noite-700) 45%,var(--noite-500) 100%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.8;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 120px 80px,#fff 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 170px 160px,#FFE7A8 50%,transparent 51%),
    radial-gradient(1px 1px at 60px 140px,#fff 50%,transparent 51%),
    radial-gradient(1.8px 1.8px at 250px 60px,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 300px 250px,#CFE8FF 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 90px 290px,#fff 50%,transparent 51%);
  background-size:200px 200px,200px 200px,200px 200px,200px 200px,340px 340px,340px 340px,340px 340px;
  animation:twinkleBg 5s ease-in-out infinite alternate}
@keyframes twinkleBg{from{opacity:.45}to{opacity:.9}}
[hidden]{display:none!important}
img,svg{max-width:100%}
a{color:inherit}
b,strong{font-weight:800}
h1,h2,h3{font-family:"Fredoka","Nunito",sans-serif;margin:0;line-height:1.1}
p{margin:0}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--sol);color:var(--tinta);padding:12px 18px;border-radius:12px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:12px}
.ico{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}

/* ---------------------------------------------------------------- botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 26px;
  border:0;border-radius:999px;font:800 1.1875rem/1.15 "Nunito",sans-serif;text-decoration:none;text-align:center;cursor:pointer;
  transition:transform .08s ease,box-shadow .08s ease,filter .15s;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:hover{filter:brightness(1.05)}
.btn-primary{background:var(--sol);color:var(--tinta);box-shadow:0 6px 0 var(--sol-escuro),0 12px 24px rgba(0,0,0,.28)}
.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--sol-escuro),0 4px 10px rgba(0,0,0,.25)}
.btn-angel{background:var(--angel);color:var(--tinta);box-shadow:0 6px 0 var(--angel-escuro),0 12px 24px rgba(0,0,0,.28)}
.btn-angel:active{transform:translateY(4px);box-shadow:0 2px 0 var(--angel-escuro)}
.btn-wa{background:var(--wa);color:#0B2B16;box-shadow:0 5px 0 #179A48}
.btn-wa:active{transform:translateY(3px);box-shadow:0 2px 0 #179A48}
.btn-blue{background:var(--stitch);color:#fff;box-shadow:0 5px 0 var(--stitch-escuro)}
.btn-blue:active{transform:translateY(3px);box-shadow:0 2px 0 var(--stitch-escuro)}
.btn-ghost{background:rgba(255,247,232,.08);color:var(--creme);border:2.5px solid rgba(255,247,232,.85)}
.btn-ghost-dark{background:transparent;color:var(--tinta);border:2.5px solid var(--tinta)}
.btn-small{min-height:50px;font-size:1rem;padding:10px 14px;margin-top:4px}
.info-btn{grid-column:1/-1;width:100%}
.btn:focus-visible{outline:3px solid var(--sol);outline-offset:4px;box-shadow:0 0 0 7px rgba(11,18,64,.55)}

/* ---------------------------------------------------------------- HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:22px var(--gut) 92px;overflow:hidden;isolation:isolate}
.sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.moon{position:absolute;top:22px;right:16px;width:52px;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,243,201,.55))}
.tw{position:absolute;color:var(--sol);height:auto;aspect-ratio:1;animation:tw 3.2s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.shoot{position:absolute;top:57%;left:78%;width:90px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff);transform:rotate(-24deg);animation:shoot 9s ease-in 3s infinite}
@keyframes shoot{0%{opacity:0;transform:rotate(-24deg) translateX(0)}2%{opacity:1}9%{opacity:0;transform:rotate(-24deg) translateX(-260px)}100%{opacity:0;transform:rotate(-24deg) translateX(-260px)}}
.rain{position:absolute;inset:0;overflow:hidden}
.drop{position:absolute;top:-40px;height:auto;aspect-ratio:1;opacity:.55;animation:fall var(--d,12s) linear infinite}
@keyframes fall{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(28px,980px,0) rotate(300deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.hero-in{position:relative;max-width:520px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.pre{font-weight:700;font-size:1rem;color:rgba(255,247,232,.9);max-width:15em;margin-top:6px}
.title{margin-top:4px;font-weight:700;color:var(--creme);letter-spacing:.5px;display:flex;flex-direction:column;align-items:center;
  text-shadow:0 4px 0 var(--stitch-escuro),0 10px 22px rgba(0,0,0,.35)}
.t-name{font-size:clamp(4.25rem,22vw,6.25rem);line-height:.95;
  background:linear-gradient(180deg,#FFFFFF 0%,#D8EEFF 60%,#9BD3F7 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 var(--stitch-escuro)) drop-shadow(0 8px 14px rgba(0,0,0,.35));text-shadow:none}
.t-line2{display:flex;align-items:center;gap:16px;margin-top:6px!important;font-size:clamp(2.4rem,11vw,3.2rem);margin-top:-2px}
.nine{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;font-size:1em;line-height:1;
  color:var(--tinta);text-shadow:none;background:radial-gradient(circle at 35% 30%,#FFF1B8 0%,var(--sol) 45%,#F2B73A 100%);
  box-shadow:inset 0 -6px 0 rgba(201,149,26,.6),0 0 0 4px var(--stitch-escuro),0 0 0 8px var(--creme),0 10px 26px rgba(255,212,94,.45);
  font-size:clamp(3.1rem,15vw,4.2rem);width:1.35em;height:1.35em;position:relative}
.nine::after{content:"";position:absolute;top:14%;left:22%;width:22%;height:14%;border-radius:50%;background:rgba(255,255,255,.75);transform:rotate(-30deg)}
.t-bang{color:var(--sol)}
.sub{margin-top:12px;font-size:1.125rem;font-weight:700}
.c-stitch{color:var(--stitch-claro)}.c-angel{color:var(--angel)}

.stage{position:relative;width:100%;max-width:420px;height:clamp(210px,62vw,280px);margin-top:4px}
.glow{position:absolute;left:50%;bottom:-6px;width:118%;height:70%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(155,211,247,.38),rgba(155,211,247,.12) 55%,transparent);pointer-events:none}
.ship-wrap{position:absolute;left:50%;top:0;width:32%;margin-left:-16%}
.ship{width:100%;height:auto;display:block;overflow:visible}
.ship .flame{opacity:0}
.ship .lt{animation:blinkLt 1.2s steps(2) infinite}.ship .lt2{animation-delay:.4s}.ship .lt3{animation-delay:.8s}
@keyframes blinkLt{50%{opacity:.35}}
.char-btn{position:absolute;bottom:0;width:48%;padding:0;margin:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:30px;color:inherit}
.char-btn:focus-visible{outline-offset:-2px}
.cb-stitch{left:4%;width:45%}
.cb-angel{right:5%;width:35%}
.bob{display:block;animation:bob 3s ease-in-out infinite}
.bob2{animation-duration:3.4s;animation-delay:-1.2s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bob{transform-origin:50% 100%}
.char-btn.twirl .bob{animation:boing .8s cubic-bezier(.3,0,.3,1)}
@keyframes boing{0%{transform:none}14%{transform:scale(1.16,.8)}36%{transform:translateY(-34px) scale(.9,1.12)}56%{transform:translateY(0) scale(1.12,.88)}72%{transform:scale(.96,1.05)}86%{transform:scale(1.02,.98)}100%{transform:none}}
/* toque: troca de pose (Stitch comemora, Angel dança) */
.char-btn.twirl .ch .pose:first-child{opacity:0;transform:scale(.8) translateY(6%)}
.char-btn.twirl .ch .pose:nth-child(2){opacity:1;transform:none;transition:opacity .22s ease .06s,transform .55s var(--ease-pop) .03s}
.hero .char-btn .bubble{top:-14%}.hero .char-btn .bubble.long{top:-30%}
.bubble{position:absolute;top:2%;left:50%;padding:8px 14px;border-radius:18px;background:var(--creme);color:var(--tinta);
  font:700 1.05rem/1 "Fredoka",sans-serif;white-space:nowrap;box-shadow:0 4px 0 rgba(0,0,0,.18);
  transform:translate(-50%,10px) scale(.4);opacity:0;pointer-events:none;transition:transform .25s var(--ease-pop),opacity .2s}
.bubble::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:var(--creme)}
.bubble.long{top:-14%;white-space:normal;width:180px;text-align:center;line-height:1.2;font-size:1rem}
.cb-angel .bubble.long{left:38%}.cb-stitch .bubble.long{left:58%}
.char-btn.talk .bubble,.bubble-on{transform:translate(-50%,-10px) scale(1);opacity:1}
.hearts{position:absolute;left:50%;bottom:34%;width:0;height:0}
.hf{position:absolute;left:-10px;bottom:0;width:20px;height:20px;color:var(--hibisco);opacity:0;animation:heartUp 5s ease-in infinite}
.hf1{animation-delay:1s;color:var(--angel);width:16px}.hf2{animation-delay:2s}.hf3{animation-delay:3s;color:var(--angel);width:24px}.hf4{animation-delay:4s;width:14px}
@keyframes heartUp{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}50%{transform:translate(10px,-70px) scale(1)}100%{opacity:0;transform:translate(-8px,-140px) scale(.8)}}
.heart-rain{position:fixed;top:-40px;width:26px;height:26px;color:var(--hibisco);z-index:60;pointer-events:none;animation:heartFall 1.8s ease-in forwards}
@keyframes heartFall{to{transform:translate3d(var(--dx,0),110vh,0) rotate(220deg)}}

.date-pill{margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;white-space:nowrap;
  background:rgba(255,247,232,.12);border:2px solid rgba(255,247,232,.35);font-weight:800;font-size:clamp(.8rem,4.1vw,1.02rem)}
@media (max-width:359px){.moon{width:38px;top:14px;right:8px}}
.btn-hero{margin-top:18px;width:min(100%,340px)}
.hint{margin-top:16px;display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-weight:700;font-size:.95rem;color:rgba(255,247,232,.85);text-decoration:none;min-height:48px}
.hint svg{width:22px;height:22px;animation:hintBounce 1.6s ease-in-out infinite}
@keyframes hintBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.shore{position:absolute;left:0;bottom:0;width:100%;height:90px;z-index:-1}
.palm{position:absolute;bottom:22px;width:130px;height:130px;color:#0E1A52;z-index:-1}
.palm-l{left:-34px}.palm-r{right:-34px;transform:scaleX(-1)}

/* intro (sequência de entrada) */
.intro{animation-fill-mode:both}
.i-pre{animation:fadeUp .6s var(--ease-out) 0s both}
.i-title{animation:fadeUp .6s var(--ease-out) .12s both}
.i-nine{animation:ninePop .6s var(--ease-pop) .55s both}
.i-sub{animation:fadeUp .55s var(--ease-out) .3s both}
.i-ship{animation:shipIn .75s cubic-bezier(.2,.8,.2,1) .1s both,shipBounce .4s var(--ease-pop) .85s}
.i-ship .flame{animation:flame .8s linear .1s both}
.i-stitch{animation:popIn .5s var(--ease-pop) .85s both}
.i-angel{animation:slideIn .6s var(--ease-out) 1.1s both}
.i-date{animation:fadeUp .5s var(--ease-out) .45s both}
.i-cta{animation:fadeUp .5s var(--ease-out) .6s both}
.i-hint{animation:fadeUp .5s var(--ease-out) 1.7s both}
.hearts{animation:fadeIn .4s 1.6s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes ninePop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.07) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes shipIn{0%{opacity:0;transform:translate(150px,-260px) rotate(-28deg) scale(.6)}15%{opacity:1}100%{opacity:1;transform:none}}
@keyframes shipBounce{0%{transform:translateY(0) scale(1.08,.9)}50%{transform:translateY(-10px) scale(.97,1.04)}100%{transform:none}}
@keyframes flame{0%,85%{opacity:1}100%{opacity:0}}
@keyframes popIn{0%{opacity:0;transform:translate(30%,-40%) scale(.3)}100%{opacity:1;transform:none}}
@keyframes slideIn{0%{opacity:0;transform:translateX(70%) translateY(-30px) rotate(10deg)}60%{opacity:1;transform:translateX(-4%) translateY(0) rotate(-3deg)}100%{opacity:1;transform:none}}
.hero.skip .intro,.hero.skip .i-ship .flame{animation:none!important}

/* ---------------------------------------------------------------- personagens (ilustrações em camadas de pose) */
.ch{position:relative;display:block;width:100%;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.ch-stitch{aspect-ratio:855/927}
.ch-angel{aspect-ratio:573/813;animation-duration:3.7s;animation-delay:-1.3s}
.ch .pose{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  opacity:0;transform:scale(.8) translateY(6%);transform-origin:50% 100%;transition:opacity .12s ease,transform .3s ease;
  pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.ch .pose:first-child,.ch.is-dance .p-hula,.ch.is-sleep .p-sleep,.ch.is-cheer .p-cheer{opacity:1;transform:none;transition:opacity .22s ease .06s,transform .55s var(--ease-pop) .03s}
.ch.is-dance .pose:not(.p-hula),.ch.is-sleep .pose:not(.p-sleep),.ch.is-cheer .pose:not(.p-cheer){opacity:0;transform:scale(.8) translateY(6%)}
@keyframes breathe{0%,100%{transform:rotate(0) scale(1)}35%{transform:rotate(-1deg) scale(.985,1.024)}70%{transform:rotate(.8deg) scale(1.014,.99)}}

/* estado: dança (hula), balança a partir dos pés */
.ch.is-dance{animation:hula .82s ease-in-out infinite alternate}
@keyframes hula{0%{transform:translateX(-3%) rotate(-6deg) scale(1.01,.99)}50%{transform:translateX(0) rotate(0) scale(.99,1.02)}100%{transform:translateX(3%) rotate(6deg) scale(1.01,.99)}}

/* estado: sono, respiração lenta + Zzz */
.ch.is-sleep{animation:sleepy 4.2s ease-in-out infinite}
@keyframes sleepy{0%,100%{transform:rotate(-1.5deg) scale(1)}50%{transform:rotate(-2.5deg) scale(1.03,.975)}}
.zzz{position:absolute;right:-4%;top:-2%;width:40%;height:34%;pointer-events:none;opacity:0;transition:opacity .3s;font-size:clamp(14px,1.1rem,22px)}
.ch.is-sleep .zzz{opacity:1}
.zzz i{position:absolute;left:0;bottom:0;font:700 1em/1 "Fredoka",sans-serif;font-style:normal;color:#FFF3C9;text-shadow:0 2px 0 rgba(28,63,158,.7);opacity:0;animation:zzz 2.6s ease-out infinite}
.zzz i:nth-child(2){left:28%;bottom:22%;font-size:1.25em;animation-delay:.85s}
.zzz i:nth-child(3){left:56%;bottom:44%;font-size:1.35em;animation-delay:1.7s}
@keyframes zzz{0%{opacity:0;transform:translate(-.3em,.5em) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translate(.7em,-1.6em) scale(1.15)}}

/* espiando (cabeça + mãos) e os dois abraçados */
.ch-peek,.ch-pair{display:block;transform-origin:50% 100%}
.ch-peek img,.ch-pair img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.ch-pair{animation:breathe 3.6s ease-in-out infinite}
@keyframes peekTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg) translateY(-3px)}60%{transform:rotate(3deg)}}

/* pulinhos (reação ao escolher) */
.jump3{animation:jump3 1.3s cubic-bezier(.3,0,.3,1)}
@keyframes jump3{0%,33%,66%,100%{transform:translateY(0)}16%,50%,83%{transform:translateY(-24px)}}

/* animações pausadas fora da tela / aba oculta */
.paused,.paused *,.paused *::before,.paused *::after,body.hidden-tab *{animation-play-state:paused!important}

/* ---------------------------------------------------------------- seções */
main{position:relative}
.sec{max-width:520px;margin:0 auto;padding:56px var(--gut) 8px;position:relative}
.h2{font-size:clamp(1.85rem,8vw,2.2rem);font-weight:700;text-align:center;color:var(--creme);text-shadow:0 3px 0 rgba(28,63,158,.9)}
.h2-dark{color:var(--tinta);text-shadow:none}
.h3{font-size:1.75rem;font-weight:700}
.lead{text-align:center;margin-top:10px;font-size:1.0625rem;color:rgba(255,247,232,.92)}
.lead-dark{color:var(--tinta-2)}
.ics{text-align:center;margin-top:18px}
.ics .btn{width:min(100%,340px)}
.ics-cap{margin-top:8px;font-size:.95rem;color:rgba(255,247,232,.8)}
.card{background:var(--creme);color:var(--tinta);border-radius:var(--r-card);padding:20px;
  box-shadow:0 7px 0 rgba(8,12,48,.45),0 18px 36px rgba(0,0,0,.28);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23FF5C7A' opacity='.06'%3E%3Ccircle cx='24' cy='20' r='7'/%3E%3Ccircle cx='34' cy='26' r='7'/%3E%3Ccircle cx='30' cy='37' r='7'/%3E%3Ccircle cx='18' cy='37' r='7'/%3E%3Ccircle cx='14' cy='26' r='7'/%3E%3C/g%3E%3Cg fill='%2338D0C8' opacity='.07'%3E%3Cpath d='M86 70l4 10 10 4-10 4-4 10-4-10-10-4 10-4z'/%3E%3C/g%3E%3C/svg%3E")}
.cards{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.info{display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:start;padding:18px 16px}
.info-ico{width:50px;height:50px;border-radius:18px;display:grid;place-items:center;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.info-ico svg{width:30px;height:30px}
.ic-sol{background:var(--sol);color:var(--tinta)}
.ic-noite{background:var(--noite-500);color:var(--sol)}
.ic-mar{background:var(--mar);color:var(--tinta)}
.ic-wa{background:var(--wa);color:#0B2B16}
.lbl{font-weight:800;font-size:.9rem;color:#6A4BA8;letter-spacing:.02em}
.val{font:600 clamp(1.12rem,5.15vw,1.375rem)/1.15 "Fredoka",sans-serif;margin-top:2px}
.val2{font-weight:800;font-size:1.125rem;margin-top:2px}
.muted{font-weight:600;color:var(--tinta-2)}
.peek-wrap{position:relative;margin-top:62px}
.peek-wrap .card{position:relative;z-index:1}
.peek{position:absolute;bottom:calc(100% - 8px);width:126px;z-index:0;transform:translateY(70%);transition:transform .6s var(--ease-pop) .25s}
.peek-stitch{right:14px}
.peek-angel{left:auto;right:20px;width:98px}
.peek-wrap.in .peek{transform:none}
.peek-wrap.in .ch-peek{animation:peekTilt 4.5s ease-in-out 1.2s infinite}
.peek-wrap.in .peek-angel .ch-peek{animation-delay:2.6s}

/* opções */
.opt-card{position:relative;margin-top:20px;border-radius:var(--r-card);padding:20px;overflow:hidden}
.oc-brincar{background:linear-gradient(160deg,#FFF4CC 0%,#FFE08A 100%);color:var(--tinta);box-shadow:0 7px 0 #B9862A,0 18px 36px rgba(0,0,0,.28)}
.oc-pijama{background:
    radial-gradient(1.6px 1.6px at 30px 40px,rgba(255,255,255,.5) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 90px 20px,rgba(255,255,255,.45) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 140px 70px,rgba(255,231,168,.5) 50%,transparent 51%),radial-gradient(1px 1px at 60px 100px,rgba(255,255,255,.4) 50%,transparent 51%),
    linear-gradient(160deg,#4A3AA8 0%,#2A2275 100%);
  background-size:160px 120px,160px 120px,160px 120px,160px 120px,auto;
  color:var(--creme);box-shadow:0 7px 0 #150F45,0 18px 36px rgba(0,0,0,.35);border:2px solid rgba(155,211,247,.35)}
.oc-art{position:absolute;top:8px;right:14px;width:106px;pointer-events:none}
.oc-pijama .oc-art{top:6px;right:22px;width:88px}
.selo{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-weight:800;font-size:.9rem}
.oc-brincar .selo{background:rgba(26,31,77,.1)}
.oc-pijama .selo{background:rgba(255,247,232,.14);color:var(--sol)}
.oc-head{min-height:98px;padding-right:116px}
.opt-card .h3{margin-top:10px}
.oc-txt{margin-top:6px;font-size:1.0625rem;position:relative}
.oc-hora{margin-top:12px;display:flex;align-items:center;gap:8px;font-weight:800}
.oc-pijama .oc-hora .ico{color:var(--sol)}
.btn-choose{margin-top:16px;width:100%}
.compare{margin-top:20px;padding:14px 12px}
.compare table{width:100%;border-collapse:collapse;font-size:.95rem}
.compare th,.compare td{padding:9px 6px;text-align:center;vertical-align:middle;border-bottom:1.5px dashed rgba(26,31,77,.15)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare tbody th{text-align:left;font-weight:800;width:34%}
.compare thead th{padding-top:2px}
.th-b,.th-p{display:inline-block;padding:5px 10px;border-radius:999px;font:700 .95rem/1.1 "Fredoka",sans-serif}
.th-b{background:var(--sol)}
.th-p{background:var(--noite-500);color:var(--creme)}
.yes,.no{display:inline-block;padding:2px 10px;border-radius:999px;font-weight:800}
.yes{background:#D3F5E6;color:#0D5A3A}
.no{background:#FFE0E6;color:#9A1D38}
.ohana{margin-top:22px;text-align:center;font-weight:700;color:var(--angel-claro)}
.ohana .ico{color:var(--hibisco)}

/* ---------------------------------------------------------------- formulário */
.sec-form{padding-top:92px;outline:none}
.form-peek{position:absolute;top:22px;left:0;right:0;height:80px;pointer-events:none}
.fp{position:absolute;top:0;width:118px}
.fp-stitch{left:calc(var(--gut) + 10px)}
.fp-angel{right:calc(var(--gut) + 16px);width:92px;top:-2px}
.fp .ch-peek{transition:transform .45s var(--ease-pop)}
.look .fp-stitch .ch-peek{transform:translateY(-5px) rotate(-6deg)}
.look .fp-angel .ch-peek{transform:translateY(-5px) rotate(6deg)}
.form-card{position:relative;z-index:1;padding:26px 18px 24px}
.field{margin-top:20px;border:0;padding:0;min-width:0}
.field>label,.field>legend{display:block;font-weight:800;font-size:1.0625rem;color:var(--tinta);padding:0;margin-bottom:8px}
.req{color:#C2324F}
.opt-lbl{font-weight:600;color:var(--tinta-2)}
.help{font-size:.95rem;color:var(--tinta-2);margin:-4px 0 8px}
input[type=text],input[type=tel],textarea{width:100%;min-height:56px;padding:14px 16px;border-radius:16px;border:3px solid #D8CDEA;background:#fff;
  color:var(--tinta);font:600 1.125rem/1.3 "Nunito",sans-serif;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:#8A8DAE;font-weight:500}
input:focus,textarea:focus{outline:none;border-color:var(--stitch);box-shadow:0 0 0 4px rgba(47,111,219,.25)}
input:focus-visible,textarea:focus-visible{outline:none}
[aria-invalid=true]{border-color:#D62D50!important;background:#FFF5F7}
.err{color:#B3173A;font-weight:800;font-size:.98rem;margin-top:6px;display:flex;gap:6px;align-items:flex-start}
.err:empty{display:none}
.err::before{content:"!";flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#D62D50;color:#fff;font-size:.8rem;margin-top:1px}
.counter{text-align:right;font-size:.88rem;color:var(--tinta-2);margin-top:4px}
.counter.over{color:#B3173A;font-weight:800}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.choice-grid{display:flex;flex-direction:column;gap:12px}
.opt{position:relative;display:grid;grid-template-columns:56px 1fr 34px;align-items:center;gap:12px;min-height:100px;padding:14px 14px 14px 16px;
  border-radius:22px;cursor:pointer;transition:transform .2s var(--ease-pop),box-shadow .2s,opacity .2s,filter .2s;-webkit-tap-highlight-color:transparent}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt-brincar{background:linear-gradient(160deg,#FFF1C2,#FFDC7A);color:var(--tinta);box-shadow:0 5px 0 #C9951A}
.opt-pijama{background:linear-gradient(160deg,#4A3AA8,#2A2275);color:var(--creme);box-shadow:0 5px 0 #150F45}
.opt-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center}
.opt-brincar .opt-ico{background:#fff;color:#F2A100}
.opt-pijama .opt-ico{background:rgba(255,247,232,.14);color:var(--sol)}
.opt-ico svg{width:34px;height:34px}
.opt-txt{display:flex;flex-direction:column;gap:3px}
.opt-txt strong{font:700 1.4rem/1.1 "Fredoka",sans-serif}
.opt-txt span{font-weight:700;font-size:.98rem;line-height:1.3}
.opt-pijama .opt-txt span{color:#E6E2FF}
.opt-check{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:3px solid currentColor;opacity:.45}
.opt-check svg{width:20px;height:20px;opacity:0;transform:scale(0);transition:transform .25s var(--ease-pop),opacity .15s}
.opt.sel{animation:selPop .35s var(--ease-pop);transform:scale(1.02);box-shadow:0 0 0 4px var(--stitch),0 0 0 8px rgba(47,111,219,.25),0 10px 22px rgba(47,111,219,.35)}
.opt.sel .opt-check{opacity:1;background:var(--stitch);border-color:var(--stitch);color:#fff}
.opt.sel .opt-check svg{opacity:1;transform:scale(1)}
@keyframes selPop{0%{transform:scale(.96)}60%{transform:scale(1.05)}100%{transform:scale(1.02)}}
.has-sel .opt:not(.sel){opacity:.62;filter:saturate(.6)}
.opt:focus-within{outline:3px solid var(--tinta);outline-offset:4px}
.opt:has(input:focus:not(:focus-visible)){outline:none}
.choice.invalid .opt{box-shadow:0 0 0 3px #D62D50}

.react{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px;padding:12px 14px 16px;border-radius:22px;background:#EFE8FA;text-align:center;transition:background .3s}
.react-chars{position:relative;flex:none;width:min(100%,260px);height:140px}
.rc{position:absolute;bottom:0;width:126px}
.rc-s{left:4px}.rc-a{right:10px;width:98px}
.react-txt{font-weight:700;font-size:1.05rem;line-height:1.35;max-width:22em}
.react-txt b{font:700 1.3rem/1.2 "Fredoka",sans-serif;display:block;margin-bottom:2px}
.react.bump{animation:reactBump .45s var(--ease-pop)}
@keyframes reactBump{0%{transform:scale(.94)}100%{transform:none}}
.rt{display:none}
.react[data-state=none] .rt-none,.react[data-state=brincar] .rt-brincar,.react[data-state=pijama] .rt-pijama{display:inline}
.react[data-state=brincar]{background:#FFF0BF}
.react[data-state=pijama]{background:#E2DCFF}

.form-err{margin-top:18px;padding:12px 14px;border-radius:14px;background:#FFE3E9;color:#8E0F2C;font-weight:800}
.form-err:empty{display:none}
.btn-submit{width:100%;margin-top:22px;min-height:60px;font-size:1.25rem}
.bs-load{display:none;align-items:center;gap:8px}
.btn-submit.loading .bs-txt{display:none}
.btn-submit.loading .bs-load{display:inline-flex}
.btn-submit[disabled]{cursor:progress;filter:saturate(.8)}
.spinner{width:22px;height:22px;color:var(--tinta);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* sucesso */
.success{text-align:center;padding:24px 20px 26px;position:relative;z-index:1;scroll-margin-top:18px;animation:sucIn .45s var(--ease-out)}
@keyframes sucIn{from{opacity:0}to{opacity:1}}
.sec-form.done{padding-top:40px}
.sec-form.done .form-peek{display:none}
.suc-btns .btn{font-size:1.06rem;padding:12px 16px}
.suc-stage{position:relative;height:170px;margin:8px auto 6px;max-width:330px}
.suc-ch{position:absolute;bottom:0;width:140px}
.suc-s{left:8px}.suc-a{right:14px;width:114px}
.suc-heart{position:absolute;left:50%;top:18px;width:56px;height:56px;margin-left:-28px;color:var(--hibisco);animation:beat 1.1s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.96)}}
.suc-stage .bubble{top:-6px}
.success .bubble{background:var(--stitch);color:#fff}
.success .bubble::after{border-top-color:var(--stitch)}
.hop .suc-ch{animation:hopHop .7s cubic-bezier(.3,0,.3,1) infinite alternate}
.hop .suc-a{animation-delay:.35s}
@keyframes hopHop{from{transform:translateY(0)}to{transform:translateY(-16px)}}
.suc-text{margin-top:10px;font:600 1.3rem/1.3 "Fredoka",sans-serif}
.suc-upd{margin-top:8px;font-weight:700;color:#0D5A3A;background:#D3F5E6;display:inline-block;padding:6px 12px;border-radius:12px}
.suc-resumo{list-style:none;margin:16px 0 0;padding:14px;border-radius:18px;background:#F1EAFB;text-align:left;display:flex;flex-direction:column;gap:10px}
.suc-resumo li{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:start;font-weight:700}
.suc-resumo svg{width:24px;height:24px;color:var(--noite-500)}
.suc-help{margin-top:14px;color:var(--tinta-2);font-weight:700}
.suc-btns{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.back{display:inline-block;margin-top:18px;font-weight:800;color:var(--tinta-2);padding:12px;min-height:48px}

/* ---------------------------------------------------------------- rodapé */
.foot{text-align:center;padding:40px var(--gut) calc(110px + env(safe-area-inset-bottom));color:rgba(255,247,232,.85);font-weight:700}
.foot-ch{width:180px;margin:0 auto 8px}

/* ---------------------------------------------------------------- botão flutuante */
.fab{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;width:min(82%,360px);min-height:56px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sol);color:var(--tinta);
  font:800 1.1875rem/1 "Nunito",sans-serif;text-decoration:none;box-shadow:0 6px 0 var(--sol-escuro),0 14px 30px rgba(0,0,0,.45);
  transform:translate(-50%,160%);opacity:0;transition:transform .35s var(--ease-out),opacity .3s;pointer-events:none}
.fab.show{transform:translate(-50%,0);opacity:1;pointer-events:auto;animation:fabPulse 2.4s ease-in-out .4s infinite}
@keyframes fabPulse{0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-50%,0) scale(1.04)}}

/* ---------------------------------------------------------------- revelar ao rolar */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}

/* ---------------------------------------------------------------- telas grandes */
@media (min-width:760px){
  .hero{padding-top:34px}
  .stage{max-width:520px;height:300px}
  .palm{width:220px;height:220px;bottom:30px}
  .palm-l{left:4%}.palm-r{right:4%}
  .moon{width:84px;right:10%;top:40px}
  .sec{padding-top:72px}
}

/* ---------------------------------------------------------------- menos movimento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .intro,.i-ship .flame,.rain,.shoot,.hearts,.bob,.hf,.moon,.tw,.hint svg,.fab.show,.lt,body::after{animation:none!important}
  .rain,.shoot,.hearts{display:none}
  .ch,.ch-pair,.ch-peek,.zzz i,.peek-wrap.in .ch-peek{animation:none!important}
  .ch .pose{transition:opacity .15s!important;transform:none!important}
  .ch.is-sleep .zzz i{opacity:1}
  .fp .ch-peek{transition:none;transform:none!important}
  .char-btn.twirl .bob,.react.bump,.opt.sel,.jump3,.hop .suc-ch,.suc-heart,.success{animation:none!important}
  .js .rv{transition:opacity .15s;transform:none}
  .peek{transition:none;transform:none}
  .bubble{transition:opacity .15s}
  .heart-rain{display:none}
}

/* Zzz legível sobre fundo claro (reação do formulário e sucesso) */
.react .zzz i,.success .zzz i{color:var(--noite-500);text-shadow:0 2px 0 rgba(255,255,255,.7)}
.oc-pijama .oc-txt{margin-top:12px}