/* Core Kids — visual infantil */
:root{--tutor:#ad96ff;--roxo:#7c6cff;--rosa:#ff5d8f;--amarelo:#ffd65c;--verde:#59c96a;--azul:#4fb8f0;--texto:#2b2140;--suave:#6b6585;--branco:#fff;--raio:26px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--texto);background:linear-gradient(180deg,#bfe6ff 0%,#e4dcff 55%,#ffe3f0 100%);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
h1,h2,h3,.logo-txt,.btn,.idade,.tutor b,.tutor-nome{font-family:'Baloo 2','Nunito',sans-serif}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}

/* céu animado */
.ceu{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.nuvem{position:absolute;background:#fff;border-radius:100px;opacity:.85;width:160px;height:48px;animation:nuvem 60s linear infinite}
.nuvem::before,.nuvem::after{content:'';position:absolute;background:#fff;border-radius:50%}
.nuvem::before{width:70px;height:70px;top:-34px;left:24px}.nuvem::after{width:54px;height:54px;top:-22px;left:80px}
.n1{top:12%;left:-200px}.n2{top:38%;left:-200px;transform:scale(.7);animation-duration:80s;animation-delay:-30s}.n3{top:70%;left:-200px;transform:scale(1.2);animation-duration:95s;animation-delay:-60s}
@keyframes nuvem{to{left:110%}}
.estrela{position:absolute;color:#fff;font-size:22px;animation:pisca 3s ease-in-out infinite}
.s1{top:8%;right:12%}.s2{top:26%;left:8%;animation-delay:1s}.s3{bottom:20%;right:6%;animation-delay:2s}
@keyframes pisca{50%{opacity:.2;transform:scale(.6)}}

/* topo */
.topo{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;gap:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px}
.logo-icone{font-size:34px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.08))}
.logo-txt{font-size:30px;font-weight:800;background:linear-gradient(90deg,var(--roxo),var(--rosa),#ffa53c);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
.topo-acoes{display:flex;gap:8px;align-items:center}
.placar{background:#fff;border-radius:99px;padding:6px 14px;font-weight:800;box-shadow:0 4px 0 rgba(124,108,255,.18)}
.btn-icone{border:0;background:#fff;width:44px;height:44px;border-radius:50%;font-size:20px;box-shadow:0 4px 0 rgba(124,108,255,.18);transition:transform .15s}
.btn-icone:hover{transform:translateY(-2px) rotate(-6deg)}

main{position:relative;z-index:1;flex:1;display:flex;justify-content:center;padding:8px 14px 20px}
.tela{width:100%;max-width:1100px;display:flex;justify-content:center;animation:surge .4s ease}
@keyframes surge{from{opacity:0;transform:translateY(16px)}}

.cartao{background:#fff;border-radius:var(--raio);padding:28px;box-shadow:0 10px 0 rgba(124,108,255,.15),0 20px 40px rgba(60,40,120,.12);width:100%;max-width:640px;text-align:center}
.cartao.grande{max-width:820px}
.cartao h1{font-size:clamp(28px,5vw,40px);margin:6px 0}
.cartao h2{font-size:30px;margin:6px 0 10px}
.sub{font-size:20px;color:var(--suave);margin:4px 0 18px}
.nota{color:var(--suave);font-size:15px;margin-top:18px}
.link{background:none;border:0;color:var(--roxo);text-decoration:underline;font-weight:700;margin-top:14px}

.mascotes-fila{display:flex;justify-content:center;gap:6px;margin-bottom:4px}
.mascotes-fila .mini{width:84px;animation:pula 2.4s ease-in-out infinite}
.mascotes-fila .mini:nth-child(2){animation-delay:.3s}.mascotes-fila .mini:nth-child(3){animation-delay:.6s}.mascotes-fila .mini:nth-child(4){animation-delay:.9s}
@keyframes pula{50%{transform:translateY(-10px)}}

.idades{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:560px;margin:0 auto}
.idade{border:0;border-radius:22px;font-size:34px;font-weight:800;padding:14px 0;color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.15);transition:transform .15s}
.idade:nth-child(6n+1){background:#ff8fb8}.idade:nth-child(6n+2){background:#ffb049}.idade:nth-child(6n+3){background:#ffcf3f}
.idade:nth-child(6n+4){background:#6fcf73}.idade:nth-child(6n+5){background:#4fc3f7}.idade:nth-child(6n){background:#a48bff}
.idade.teen{font-size:24px;opacity:.85}
.idade:hover{transform:translateY(-4px) scale(1.05)}
.idade:active{transform:translateY(2px)}

.btn{border:0;border-radius:99px;background:linear-gradient(180deg,#8f80ff,var(--roxo));color:#fff;font-weight:800;font-size:19px;padding:12px 26px;box-shadow:0 5px 0 #5a4bd6;transition:transform .12s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #5a4bd6}
.btn.grande{font-size:24px;padding:14px 34px;margin-top:18px}
.btn.sec{background:#eef0ff;color:var(--roxo);box-shadow:0 5px 0 #d4d6f5}
.btn.perigo{background:#ffe5ec;color:#d63a6b;box-shadow:0 5px 0 #f3c1d1}
.linha-botoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.linha-botoes.coluna{flex-direction:column;align-items:stretch}

/* consentimento */
.cartao.adulto{text-align:left;max-width:760px}
.faixa-adulto{background:#fff4cc;border:2px dashed #f0b83a;border-radius:16px;padding:10px 14px;font-weight:800;text-align:center;margin-bottom:10px}
.termo{background:#f7f6ff;border-radius:16px;padding:6px 18px;max-height:260px;overflow:auto;font-size:15px;line-height:1.55;margin-bottom:14px}
.termo li{margin:4px 0}
form label{display:block;font-weight:700;margin:10px 0;font-size:15px}
form input,form select,.grande-label input{display:block;width:100%;margin-top:6px;padding:12px 14px;font-size:17px;border:2px solid #e0dcff;border-radius:14px;font-family:inherit;background:#fff}
form input:focus,form select:focus,.grande-label input:focus{outline:none;border-color:var(--roxo);box-shadow:0 0 0 4px rgba(124,108,255,.15)}
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:600}
label.check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--roxo)}
.desafio{display:flex;align-items:center;gap:12px;background:#eef8ff;border-radius:14px;padding:10px 14px;margin-top:10px;font-weight:700}
.desafio input{width:90px;margin:0;text-align:center}
.erro{background:#ffe5ec;color:#c22a5c;border-radius:12px;padding:10px 14px;font-weight:700}

/* perfil e tutores */
.grande-label{display:block;font-size:22px;font-weight:800;margin:10px auto 6px;max-width:440px}
.grande-label small{display:block;font-size:14px;color:var(--suave);font-weight:600}
.grande-label input{font-size:26px;text-align:center;font-weight:800}
.tutores{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:12px 0}
.tutor{background:#fff;border:4px solid #f1efff;border-radius:22px;padding:10px 8px 14px;display:flex;flex-direction:column;align-items:center;transition:transform .15s,border-color .15s}
.tutor:hover{transform:translateY(-4px)}
.tutor.ativo{border-color:var(--cor);background:color-mix(in srgb,var(--cor) 14%,#fff);transform:scale(1.04)}
.tutor-img{width:110px}
.tutor b{font-size:22px}
.tutor small{color:var(--suave);font-size:13px;line-height:1.3}
.mascote-medio{width:150px;margin:0 auto}

/* chat */
.chat-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;width:100%;height:calc(100vh - 150px);min-height:520px}
.palco{background:linear-gradient(180deg,color-mix(in srgb,var(--tutor) 30%,#fff),#fff);border-radius:var(--raio);padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 0 rgba(124,108,255,.15)}
.mascote{width:100%;max-width:240px}
.tutor-nome{font-size:34px;font-weight:800;margin-top:4px}
.tutor-gosta{color:var(--suave);font-weight:700}
.aviso-adulto{margin-top:16px;background:#fff7d6;border-radius:14px;padding:8px 12px;font-size:14px;font-weight:700}
.chat{background:#fff;border-radius:var(--raio);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 0 rgba(124,108,255,.15)}
.mensagens{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:radial-gradient(circle at 20px 20px,#f4f2ff 2px,transparent 3px) 0 0/34px 34px}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:85%}
.msg.entra{animation:pop .35s cubic-bezier(.2,1.4,.5,1)}
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(10px)}}
.msg.do-tutor .avatar{width:46px;flex:none}
.balao{padding:12px 16px;border-radius:22px;font-size:18px;line-height:1.45;font-weight:600}
.msg.do-tutor .balao{background:color-mix(in srgb,var(--tutor) 22%,#fff);border-bottom-left-radius:6px}
.msg.eu{align-self:flex-end}
.msg.eu .balao{background:linear-gradient(180deg,#8f80ff,var(--roxo));color:#fff;border-bottom-right-radius:6px}
.digitando .balao{display:flex;gap:5px;padding:16px 18px}
.digitando .balao span{width:10px;height:10px;border-radius:50%;background:var(--roxo);opacity:.5;animation:pontinho 1s infinite}
.digitando .balao span:nth-child(2){animation-delay:.15s}.digitando .balao span:nth-child(3){animation-delay:.3s}
@keyframes pontinho{50%{transform:translateY(-6px);opacity:1}}
.rapidos{display:flex;gap:8px;flex-wrap:wrap;padding:8px 14px 0}
.rapidos button{border:0;background:#fff4cc;border-radius:99px;padding:8px 14px;font-weight:800;font-size:15px;box-shadow:0 3px 0 #f0d27a;transition:transform .12s}
.rapidos button:nth-child(3n+2){background:#e3f6ff;box-shadow:0 3px 0 #a9dcf5}.rapidos button:nth-child(3n){background:#ffe3ee;box-shadow:0 3px 0 #f5b5cc}
.rapidos button:hover{transform:translateY(-2px)}
.caixa{display:flex;gap:8px;padding:12px 14px 14px}
.caixa input{flex:1;font-size:19px;padding:14px 18px;border:3px solid #e8e4ff;border-radius:99px;font-family:inherit;font-weight:600;min-width:0}
.caixa input:focus{outline:none;border-color:var(--roxo)}
.btn-enviar,.btn-mic{border:0;width:56px;height:56px;border-radius:50%;font-size:22px;flex:none}
.btn-enviar{background:var(--roxo);color:#fff;box-shadow:0 4px 0 #5a4bd6}
.btn-mic{background:#ffe3ee;box-shadow:0 4px 0 #f5b5cc}
.btn-mic.ouvindo{animation:ouvindo 1s infinite;background:var(--rosa)}
@keyframes ouvindo{50%{transform:scale(1.12)}}

/* personagem: animações */
.personagem{width:100%;height:auto;overflow:visible;display:block}
.personagem .corpo-todo{transform-origin:100px 220px;animation:respira 3s ease-in-out infinite}
@keyframes respira{50%{transform:scaleY(.97) scaleX(1.02)}}
.personagem .olhos{transform-origin:100px 88px;animation:piscar 4.5s infinite}
@keyframes piscar{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.personagem .boca-aberta,.personagem .boca-o,.personagem .coracoes{opacity:0}
.personagem .coracoes{transform-origin:160px 50px}
.personagem .orelha-e{transform-origin:72px 70px;animation:orelha 3s ease-in-out infinite}
.personagem .orelha-d{transform-origin:128px 70px;animation:orelha 3s ease-in-out infinite reverse}
@keyframes orelha{50%{transform:rotate(-6deg)}}
.personagem .asa{animation:asa 1.4s ease-in-out infinite;transform-origin:100px 160px}
@keyframes asa{50%{transform:scaleX(1.08)}}
.mascote.falando .boca-sorriso{opacity:0}
.mascote.falando .boca-aberta{opacity:1;animation:fala .22s ease-in-out infinite alternate;transform-origin:100px 118px}
@keyframes fala{to{transform:scaleY(.35)}}
.mascote.em-festa .corpo-todo{animation:festa .5s ease-in-out 4}
@keyframes festa{50%{transform:translateY(-18px) rotate(-4deg)}}
.mascote.em-festa .braco-e,.mascote.em-festa .braco-d{animation:aceno .3s ease-in-out 6 alternate}
@keyframes aceno{to{transform:rotate(-40deg) translate(-6px,-14px)}}
.mascote.em-pensando .cabeca{transform-origin:100px 150px;animation:pensa 2s ease-in-out infinite}
@keyframes pensa{50%{transform:rotate(7deg)}}
.mascote.em-pensando .pupilas{transform:translate(4px,-5px)}
.mascote.em-surpreso:not(.falando) .boca-sorriso{opacity:0}
.mascote.em-surpreso:not(.falando) .boca-o{opacity:1}
.mascote.em-surpreso .corpo-todo{animation:susto .4s ease 2}
@keyframes susto{50%{transform:scale(1.06)}}
.mascote.em-carinho .coracoes{opacity:1;animation:coracao 1.6s ease-in-out infinite}
@keyframes coracao{0%{transform:translateY(10px) scale(.6);opacity:0}50%{opacity:1}100%{transform:translateY(-30px) scale(1.1);opacity:0}}

.confete{position:fixed;top:-20px;width:10px;height:16px;border-radius:3px;z-index:50;animation:cai 2s ease-in forwards;pointer-events:none}
@keyframes cai{to{top:105vh;transform:rotate(720deg)}}
.estrela-voa{position:fixed;left:50%;top:50%;font-size:46px;font-weight:800;font-family:'Baloo 2',sans-serif;z-index:60;color:#f0a400;text-shadow:0 3px 0 #fff;animation:voa 1.5s ease forwards;pointer-events:none}
@keyframes voa{0%{transform:translate(-50%,-50%) scale(.3)}30%{transform:translate(-50%,-50%) scale(1.3)}100%{transform:translate(30vw,-48vh) scale(.4);opacity:0}}

/* modais */
.modal{position:fixed;inset:0;background:rgba(43,33,64,.45);z-index:40;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-caixa{background:#fff;border-radius:var(--raio);padding:24px;max-width:720px;width:100%;max-height:90vh;overflow:auto;text-align:center;animation:pop .3s}

/* rodapé + selo Byte Core Guard */
.rodape{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;padding:10px;font-size:13px;color:var(--suave)}
.bc-guard-selo{display:inline-flex;align-items:center;gap:8px;background:#0f2550;color:#fff;text-decoration:none;border-radius:12px;padding:5px 12px 5px 8px;font-size:12px;line-height:1.1}
.bc-guard-selo small{display:block;opacity:.75;font-size:10px}
.bc-guard-escudo{font-size:20px}

@media (max-width:820px){
  .chat-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:calc(100vh - 130px)}
  .palco{flex-direction:row;padding:10px 14px;gap:12px;text-align:left;justify-content:flex-start}
  .mascote{width:96px;flex:none}
  .tutor-nome{font-size:24px;margin:0}
  .aviso-adulto{display:none}
  .grade2{grid-template-columns:1fr}
  .idades{grid-template-columns:repeat(4,1fr)}
  .cartao{padding:20px}
  .logo-txt{font-size:24px}
  .balao{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}