/* Chuvisco: landing. Tokens e movimento vêm de marca/tokens.json e do board
   (marca/index.html). Se a marca mudar, mude aqui junto. */

@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fontes/bricolage-grotesque.woff2") format("woff2");font-weight:500 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fontes/figtree.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fontes/jetbrains-mono.woff2") format("woff2");font-weight:500 800;font-display:swap}

/* ───────── tokens ───────── */
:root{
  color-scheme:light dark;
  --goiaba-100:#FFE3E7;--goiaba-500:#FF5D73;
  --manga-100:#FFF1C9;--manga-500:#FFC738;
  --hortela-100:#D3F5EA;--hortela-500:#0FA98A;
  --jabu-300:#BFA9B5;--jabu-900:#2B1722;
  --display:"Bricolage Grotesque",ui-rounded,system-ui,sans-serif;
  --texto-f:"Figtree",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r-pp:6px;--r-p:10px;--r-m:16px;--r-g:24px;
  --mola:cubic-bezier(.34,1.56,.64,1);--suave:cubic-bezier(.45,0,.55,1);--sai:cubic-bezier(.16,1,.3,1);

  --fundo:#FFF8EC;--sup:#FBEEDB;--sup-alta:#FFFFFF;--borda:#F1DFC6;--texto:#2B1722;--suave-t:#6B5060;
  --prim:#FF5D73;--prim-t:#B81F45;--sec:#FFC738;--sec-t:#7A4E00;--ace:#0FA98A;--ace-t:#086B58;--ok:#177A4C;--erro:#C4261A;
  --traco:#2B1722;--sombra-dura:#2B1722;--palco:#FFC738;
}
@media (prefers-color-scheme:dark){
  :root{
    --fundo:#1E121A;--sup:#2E1D29;--sup-alta:#3D2734;--borda:#3D2734;--texto:#FFF3E2;--suave-t:#BFA9B5;
    --prim-t:#FF7D8E;--sec-t:#FFC738;--ace:#4FD6B4;--ace-t:#4FD6B4;--ok:#63DDA0;--erro:#FF9A8A;
    --traco:#FFF3E2;--sombra-dura:#000;--palco:#3D2734;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 17px/1.55 var(--texto-f);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
h1,h2,h3{font-family:var(--display);font-stretch:85%;font-weight:800;letter-spacing:-.025em;line-height:.98;margin:0}
p{margin:0 0 1em}
code,kbd,.mono{font-family:var(--mono);font-size:.82em}
a{color:var(--prim-t);text-underline-offset:.18em}
::selection{background:var(--sec);color:#2B1722}
:focus-visible{outline:3px solid var(--ace);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.caixa{max-width:1180px;margin:0 auto;padding:0 32px}
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pular{position:absolute;left:12px;top:-60px;z-index:50;background:var(--sec);color:#2B1722;font-weight:700;padding:10px 16px;border-radius:99px;border:2px solid #2B1722;text-decoration:none}
.pular:focus{top:10px}

/* ───────── botões ───────── */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 17px/1 var(--texto-f);padding:16px 24px;border-radius:99px;border:2px solid var(--traco);background:var(--prim);color:#2B1722;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--sombra-dura);transition:transform .15s var(--mola),box-shadow .15s}
.botao:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--sombra-dura)}
.botao:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--sombra-dura)}
.botao.fantasma{background:transparent;color:var(--texto);box-shadow:none}
.botao.fantasma:hover{background:var(--sup);transform:none}
.botao.p{font-size:14px;padding:10px 16px;box-shadow:3px 3px 0 var(--sombra-dura)}
.botao[disabled]{opacity:.65;cursor:progress}

/* ───────── topo ───────── */
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:12px 32px;background:color-mix(in srgb,var(--fundo) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:2px solid var(--traco)}
.logo{display:flex;align-items:center;gap:8px;font:800 24px/1 var(--display);font-stretch:80%;letter-spacing:-.03em;text-decoration:none;color:var(--texto)}
.logo svg{width:32px;height:32px}
.topo nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.topo>.logo+.botao{margin-left:auto}
.topo nav a{font:600 14px/1 var(--texto-f);color:var(--suave-t);text-decoration:none;padding:9px 11px;border-radius:99px}
.topo nav a:hover{background:var(--sup);color:var(--texto)}

/* ───────── hero ───────── */
.hero{position:relative;padding:52px 0 36px}
.hero .caixa{display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:center}
.hero .caixa>*{min-width:0}
.etiqueta{display:inline-flex;align-items:center;gap:8px;font:700 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border:2px solid var(--traco);border-radius:99px;background:var(--sup-alta)}
.etiqueta i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ace);animation:pulso 1.6s var(--suave) infinite}
@keyframes pulso{50%{transform:scale(1.6);opacity:.4}}
.hero h1{font-size:clamp(58px,9.4vw,136px);font-stretch:75%;letter-spacing:-.03em;line-height:.9;margin:24px 0 22px -3px}
.hero h1 span{display:inline-block;animation:letra .9s var(--mola) both}
.hero h1 span:nth-child(2){animation-delay:.08s}.hero h1 span:nth-child(3){animation-delay:.16s}.hero h1 span:nth-child(4){animation-delay:.24s}
.hero h1 .o{display:inline-block;font-weight:800;background:var(--prim);color:#2B1722;border:3px solid var(--traco);border-radius:.16em;padding:.04em .14em .1em;margin-left:.06em;transform:rotate(-2.5deg);box-shadow:5px 5px 0 var(--sombra-dura)}
@keyframes letra{from{transform:translateY(60%) rotate(6deg);opacity:0}}
.hero .sub{font:500 clamp(19px,1.9vw,23px)/1.35 var(--texto-f);max-width:25em;letter-spacing:-.01em}
.marca-texto{background:linear-gradient(transparent 62%,var(--sec) 62%);font-weight:700}
@media (prefers-color-scheme:dark){.marca-texto{background:none;color:var(--sec)}}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 16px}
.hero .nota{font-size:15px;color:var(--suave-t);max-width:32em;margin:0}

.palco{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin-left:auto}
.sol{position:absolute;inset:8%;border-radius:50%;background:var(--palco);border:2px solid var(--traco)}
.sol::after{content:"";position:absolute;inset:-9%;border-radius:50%;border:2px dashed var(--traco);opacity:.28;animation:gira 40s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.palco>[role=img]{position:absolute;inset:0}
.palco .m{position:absolute;inset:11% 9% 7% 9%}
.balao{position:absolute;left:-4%;top:2%;max-width:270px;background:var(--sup-alta);border:2px solid var(--traco);border-radius:22px 22px 22px 6px;padding:13px 17px;font:600 17px/1.3 var(--texto-f);box-shadow:5px 5px 0 var(--sombra-dura);z-index:3;transform-origin:0 100%;animation:balao .45s var(--mola) both}
.balao small{display:block;font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--suave-t);margin-bottom:6px}
@keyframes balao{from{transform:scale(.6) rotate(-6deg);opacity:0}}
.barra-mac{position:absolute;right:-1%;bottom:3%;z-index:3;display:flex;align-items:center;gap:12px;height:34px;padding:0 14px;border-radius:11px;border:2px solid var(--traco);background:var(--sup-alta);color:var(--texto);font:600 13px/1 system-ui,-apple-system,sans-serif;box-shadow:4px 4px 0 var(--sombra-dura)}
.barra-mac svg{width:18px;height:18px;flex:none;display:block}
.barra-mac .nosso{position:relative;display:block}
.barra-mac .nosso::after{content:"";position:absolute;inset:-5px -7px;border-radius:6px;background:currentColor;opacity:.13}
.barra-mac .viz{opacity:.55}
.pausa{position:absolute;left:0;bottom:3%;z-index:3}

/* ───────── faixa ───────── */
.faixa{border-block:2px solid var(--traco);background:var(--prim);color:#2B1722;overflow:hidden;padding:13px 0;transform:rotate(-1.2deg) scale(1.02);margin:30px 0 10px}
.faixa div{display:flex;gap:36px;width:max-content;animation:corre 36s linear infinite;font:800 26px/1 var(--display);font-stretch:80%;letter-spacing:-.02em;white-space:nowrap}
.faixa span{display:flex;align-items:center;gap:36px}
.faixa span::after{content:"";width:13px;height:15px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:#2B1722}
@keyframes corre{to{transform:translateX(-50%)}}

/* ───────── seções ───────── */
section{padding:92px 0 10px}
.cab{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:end;margin-bottom:38px}
.cab .num{font:800 15px/1 var(--mono);background:var(--traco);color:var(--fundo);padding:8px 11px;border-radius:99px;align-self:start;margin-top:10px}
.cab h2{font-size:clamp(44px,6.2vw,84px);font-stretch:78%}
.cab p{grid-column:2;max-width:40em;color:var(--suave-t);font-size:19px;margin:12px 0 0}
.grade{display:grid;gap:20px}
.grade>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.cartao{background:var(--sup-alta);border:2px solid var(--traco);border-radius:var(--r-g);padding:26px;box-shadow:6px 6px 0 var(--sombra-dura);position:relative}
.cartao.liso{box-shadow:none;background:var(--sup)}
.cartao h3{font-size:30px;margin-bottom:10px}
.cartao p:last-child{margin-bottom:0}
.rotulo{display:block;font:800 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--suave-t);margin:0 0 12px}
.manga{background:var(--manga-500);color:#2B1722}.goiaba{background:var(--goiaba-500);color:#2B1722}.hortela{background:var(--hortela-500);color:#2B1722}.noite{background:#2B1722;color:#FFF3E2}
.manga .rotulo,.goiaba .rotulo,.hortela .rotulo{color:#2B1722}.noite .rotulo{color:#BFA9B5}
.manga a,.goiaba a,.hortela a{color:#2B1722}
.manga :focus-visible,.goiaba :focus-visible,.hortela :focus-visible{outline-color:#2B1722}
ul.limpa{list-style:none;padding:0;margin:0}
ul.limpa li{padding:9px 0 9px 26px;position:relative;border-top:1.5px dashed color-mix(in srgb,currentColor 26%,transparent)}
ul.limpa li:first-child{border-top:0}
ul.limpa li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:12px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:var(--prim);border:1.5px solid currentColor}
ul.limpa.breve li::before{background:var(--sec)}
ul.limpa.nao li::before{border-radius:3px;background:transparent;transform:rotate(45deg)}
.selo{display:inline-block;font:700 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:99px;background:var(--sec);color:#2B1722;border:1.5px solid #2B1722;white-space:nowrap;vertical-align:.12em}
.miudo{font-size:14.5px;color:var(--suave-t)}
.grade+.miudo,.trajeto+.miudo{margin:22px 0 0;max-width:60em}
.grade+.grade{margin-top:20px}

/* como funciona */
.passo .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid #2B1722;background:var(--sec);color:#2B1722;font:800 22px/1 var(--display);margin-bottom:18px}
.passo:nth-child(2) .n{background:var(--hortela-500)}.passo:nth-child(3) .n{background:var(--prim)}
.passo h3{font-size:38px}
.teclas{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
kbd{display:inline-block;font:600 13px/1 var(--mono);border:2px solid var(--traco);border-radius:8px;padding:7px 9px;background:var(--sup);box-shadow:0 2px 0 var(--traco);white-space:nowrap}
.cena{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;align-items:stretch}
.cena>*{min-width:0}
.janela-palco{display:grid;place-items:center;padding:34px 20px;background:linear-gradient(140deg,#F2A30F,#FFC738 45%,#FF9DAB);border-radius:var(--r-g);border:2px solid var(--traco);margin:0}
.janela-palco figcaption{font:600 12px/1.4 var(--mono);color:#2B1722;margin-top:18px;text-align:center}
.janela{width:348px;max-width:100%;border-radius:20px;background:var(--fundo);color:var(--texto);border:1px solid color-mix(in srgb,var(--texto) 16%,transparent);box-shadow:0 30px 60px -18px rgba(43,23,34,.5),0 2px 6px rgba(43,23,34,.2);overflow:hidden;font-size:14px;line-height:20px}
.janela .cima{display:flex;gap:12px;align-items:center;padding:14px 16px 10px}
.janela .cima .m{width:60px;height:60px;flex:none}
.janela .cima b{font:800 22px/1 var(--display);font-stretch:85%;letter-spacing:-.02em;display:block}
.janela .cima small{font:600 12px/16px var(--texto-f);color:var(--ace-t);display:flex;align-items:center;gap:6px}
.janela .cima small i{width:7px;height:7px;border-radius:50%;background:var(--ace);animation:pulso 1.4s infinite}
.janela .conversa{padding:4px 16px 14px;display:flex;flex-direction:column;gap:9px}
.janela .voce{align-self:flex-end;background:var(--sup);border-radius:16px 16px 4px 16px;padding:8px 12px;max-width:86%;color:var(--suave-t);margin:0}
.janela .ele{font:500 17px/24px var(--texto-f);letter-spacing:-.01em;padding:2px 0;margin:0}
.pedido{border:1px solid var(--borda);background:var(--sup-alta);border-radius:16px;padding:11px 12px}
.pedido b{font:700 14px/18px var(--texto-f);display:block}
.pedido code{display:block;color:var(--suave-t);font-size:11.5px;margin:3px 0 10px}
.pedido .bts{display:flex;gap:8px}
.pedido .bts span{font:700 12.5px/1 var(--texto-f);padding:8px 12px;border-radius:99px;border:1.5px solid var(--traco)}
.pedido .bts span:first-child{background:var(--prim);color:#2B1722;border-color:#2B1722}

/* agentes */
.agentes{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px;padding:0;list-style:none}
.agentes li{font:800 clamp(24px,3vw,34px)/1 var(--display);font-stretch:80%;letter-spacing:-.02em;padding:14px 20px;border:2px solid #2B1722;border-radius:99px;background:#FFF8EC;color:#2B1722}

/* privacidade */
.fica h3,.vai h3{font-size:34px}
.trajeto{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}
.trajeto>*{min-width:0}

/* o chuvisco */
.estado{padding:16px 18px 20px;overflow:hidden}
.estado .m{width:100%;aspect-ratio:1;margin:-4px 0 4px}
.estado h3{font-size:26px}
.estado .quando{font:700 11px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ace-t);margin-bottom:8px;display:block}
.estado p{font-size:15px;line-height:1.45;color:var(--suave-t)}
.estado .na-barra{position:absolute;top:14px;left:14px;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:2px solid var(--traco);background:var(--sup);color:var(--texto)}
.estado .na-barra svg{width:18px;height:18px;display:block}
.tracos h3{font-size:28px}
.assim{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--traco);border-radius:var(--r-g);overflow:hidden;margin-top:20px}
.assim>div{padding:22px 24px}
.assim>div+div{border-left:2px solid var(--traco)}
.assim .sim{background:var(--hortela-100);color:#2B1722}.assim .nao{background:var(--goiaba-100);color:#2B1722}
.assim .rotulo{color:#2B1722}
.assim p{font:600 17px/1.35 var(--texto-f);margin:0 0 10px;padding-left:16px;border-left:3px solid currentColor}
.assim .nao p{text-decoration:line-through;text-decoration-thickness:1.5px}

/* memória e CLI */
pre{margin:0;background:#2B1722;color:#FFF3E2;border-radius:var(--r-m);padding:20px 22px;font:500 13px/1.75 var(--mono);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;border:2px solid var(--traco);tab-size:2}
pre .c{color:#BFA9B5}pre .k{color:#FF7D8E}pre .s{color:#4FD6B4}
.fatos{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.fatos li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:var(--r-p);background:var(--sup);border:1.5px solid var(--borda);font-weight:500}
.fatos li span{font:600 11px/1 var(--mono);color:var(--suave-t);white-space:nowrap}

/* perguntas */
.perguntas{display:grid;gap:12px;max-width:860px}
details{border:2px solid var(--traco);border-radius:var(--r-m);background:var(--sup-alta)}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font:800 22px/1.15 var(--display);font-stretch:88%;letter-spacing:-.015em;border-radius:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--traco);font:700 20px/1 var(--mono);transition:transform .25s var(--mola),background .2s}
details[open] summary::after{transform:rotate(45deg);background:var(--sec);color:#2B1722;border-color:#2B1722}
details .resp{padding:0 22px 20px;max-width:46em}
details .resp p:last-child{margin-bottom:0}

/* lista de espera */
.lista{margin-top:110px;border-top:2px solid var(--traco);background:var(--manga-500);color:#2B1722;padding:70px 0 76px}
.lista .caixa{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.lista .caixa>*{min-width:0}
.lista h2{font-size:clamp(44px,6vw,84px);font-stretch:78%}
.lista .chamada{display:flex;gap:18px;align-items:flex-end;margin-bottom:8px}
.lista .chamada .m{width:150px;flex:none;aspect-ratio:1;margin-bottom:-6px}
.lista .promessa{font:500 20px/1.4 var(--texto-f);max-width:24em;margin:18px 0 0}
.form{background:#FFF8EC;color:#2B1722;border:2px solid #2B1722;border-radius:var(--r-g);padding:28px;box-shadow:8px 8px 0 #2B1722}
.campo{display:block;margin-bottom:16px}
.campo span{display:block;font:700 14px/1 var(--texto-f);margin-bottom:8px}
.campo span em{font-style:normal;font-weight:500;color:#6B5060}
.campo input{width:100%;font:500 17px/1.2 var(--texto-f);padding:14px 16px;border-radius:var(--r-p);border:2px solid #2B1722;background:#fff;color:#2B1722}
.campo input::placeholder{color:#6B5060;opacity:1}
.campo input:focus-visible{outline:3px solid #0FA98A;outline-offset:2px}
.campo input[aria-invalid="true"]{border-color:#C4261A}
.pote{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .botao{width:100%;--sombra-dura:#2B1722;border-color:#2B1722}
.form .miudo{color:#6B5060;margin:14px 0 0}
.form .miudo a{color:#B81F45}
.resposta{display:none;margin:16px 0 0;padding:14px 16px;border-radius:var(--r-p);border:2px solid #2B1722;font:600 16px/1.4 var(--texto-f)}
.resposta:not(:empty){display:block;animation:balao .4s var(--mola) both;transform-origin:0 0}
.resposta[data-tipo="ok"]{background:#D3F5EA}
.resposta[data-tipo="erro"]{background:#FFE3E7}
.sucesso{text-align:center;padding:10px 0}
.sucesso .m{width:170px;aspect-ratio:1;margin:0 auto 6px}
.sucesso h3{font-size:38px;margin-bottom:10px}
.sucesso p{margin:0 auto;max-width:22em}
.sucesso:focus{outline:none}

/* rodapé */
footer{background:#2B1722;color:#FFF3E2;padding:38px 0 46px;font-size:14.5px}
footer .caixa{display:grid;grid-template-columns:auto 1fr;gap:16px 40px;align-items:start}
footer .logo{color:#FFF3E2}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end;align-items:center;min-height:32px}
footer a{color:#FF9DAB}
footer .legal{grid-column:1/-1;color:#BFA9B5;max-width:62em;margin:0}
footer .legal+.legal{margin-top:-6px}

/* páginas simples (privacidade, 404) */
.pagina{padding:64px 0 90px}
.pagina .caixa{max-width:820px}
.pagina h1{font-size:clamp(46px,7vw,84px);font-stretch:78%;margin:18px 0 20px}
.pagina h2{font-size:30px;font-stretch:88%;margin:38px 0 12px}
.pagina .abre{font-size:20px;line-height:1.45;max-width:34em}
.pagina table{width:100%;border-collapse:collapse;font-size:16px;margin:6px 0 0}
.pagina th{font:800 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;text-align:left;color:var(--suave-t);padding:10px 12px;border-bottom:2px solid var(--traco)}
.pagina td{padding:11px 12px;border-bottom:1.5px dashed var(--borda);vertical-align:top}
.pagina td:first-child{font-weight:700;white-space:nowrap}
.pagina .contato{font:700 16px/1.4 var(--mono);display:inline-block;padding:10px 14px;border:2px dashed var(--traco);border-radius:var(--r-p);background:var(--sup);word-break:break-all}
.perdido{min-height:calc(100vh - 62px);display:grid;place-items:center;text-align:center;padding:40px 0 70px}
.perdido .m{width:min(300px,62vw);aspect-ratio:1;margin:0 auto}
.perdido .cod{font:800 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--suave-t)}
.perdido h1{font-size:clamp(50px,9vw,104px);font-stretch:76%;margin:14px 0 16px}
.perdido p{font-size:19px;max-width:26em;margin:0 auto 26px;color:var(--suave-t)}

/* ───────── o personagem em movimento (igual ao board) ───────── */
.m{display:block}
.m svg{display:block;width:100%;height:100%;overflow:visible}
.m .m-vivo,.m .m-salto{transform-origin:256px 448px}
.m .m-sombra{transform-origin:256px 450px}
.m .m-topete{transform-origin:256px 200px}
.m .m-olho,.m .m-x,.m .m-boca{transform-box:fill-box;transform-origin:50% 50%}
.m .m-vivo{animation:m-respira 3.2s var(--suave) infinite}
.m .m-topete{animation:m-topete 3.2s var(--suave) infinite}
.m .m-olho{animation:m-pisca 4.6s infinite}
@keyframes m-respira{0%,100%{transform:scale(1,1)}50%{transform:scale(.985,1.03)}}
@keyframes m-topete{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes m-pisca{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.06)}}

[data-estado="dormindo"] .m-vivo{animation:m-ronca 4.8s var(--suave) infinite}
[data-estado="dormindo"] .m-topete{animation:m-topete-sono 4.8s var(--suave) infinite}
[data-estado="dormindo"] .m-olho{animation:none}
[data-estado="dormindo"] .m-boca{animation:m-bafo 4.8s var(--suave) infinite}
[data-estado="dormindo"] .m-x{animation:m-zzz 2.4s linear infinite both}
[data-estado="dormindo"] .m-x2{animation-delay:.8s}[data-estado="dormindo"] .m-x3{animation-delay:1.6s}
@keyframes m-ronca{0%,100%{transform:scale(1.04,.925)}50%{transform:scale(1.015,.975)}}
@keyframes m-topete-sono{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-4deg)}}
@keyframes m-bafo{0%,100%{transform:scale(.7)}50%{transform:scale(1.25)}}
@keyframes m-zzz{0%{opacity:0;transform:translate(-12px,16px) scale(.6)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(10px,-20px) scale(1.12)}}

[data-estado="ouvindo"] .m-salto{animation:m-acorda 3.6s infinite}
[data-estado="ouvindo"] .m-sombra{animation:m-sombra-acorda 3.6s infinite}
[data-estado="ouvindo"] .m-topete{animation:m-vibra .24s var(--suave) infinite alternate}
[data-estado="ouvindo"] .m-x{transform-box:view-box;transform-origin:256px 316px;animation:m-arco 1.2s var(--sai) infinite both}
[data-estado="ouvindo"] .m-x1{animation-delay:.2s}
@keyframes m-acorda{0%,30%,100%{transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.16,1,.3,1)}3%{transform:translateY(0) scale(1.08,.88)}11%{transform:translateY(-40px) scale(.95,1.08);animation-timing-function:cubic-bezier(.7,0,.84,0)}18%{transform:translateY(0) scale(1.06,.93)}23%{transform:translateY(-6px) scale(.99,1.02)}}
@keyframes m-sombra-acorda{0%,30%,100%{transform:scaleX(1);opacity:.13}11%{transform:scaleX(.72);opacity:.07}18%{transform:scaleX(1.05)}}
@keyframes m-vibra{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes m-arco{0%{opacity:0;transform:scale(1.1)}35%{opacity:1}100%{opacity:0;transform:scale(.95)}}

[data-estado="pensando"] .m-salto{animation:m-balanca 2.4s var(--suave) infinite alternate}
[data-estado="pensando"] .m-topete{animation:m-cachinho 1.8s var(--suave) infinite alternate}
[data-estado="pensando"] .m-pupila{animation:m-olha 4.2s var(--suave) infinite}
[data-estado="pensando"] .m-x{animation:m-ponto 1.2s var(--suave) infinite both}
[data-estado="pensando"] .m-x2{animation-delay:.15s}[data-estado="pensando"] .m-x3{animation-delay:.3s}
@keyframes m-balanca{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes m-cachinho{from{transform:rotate(-7deg)}to{transform:rotate(6deg)}}
@keyframes m-olha{0%,42%,100%{transform:translate(0,0)}50%,92%{transform:translate(-30px,2px)}}
@keyframes m-ponto{0%,60%,100%{transform:scale(.6);opacity:.35}25%{transform:scale(1.08);opacity:1}}

[data-estado="falando"] .m-salto{animation:m-quique .28s var(--suave) infinite alternate}
[data-estado="falando"] .m-boca{transform-origin:50% 0;animation:m-boca 1.12s var(--suave) infinite}
[data-estado="falando"] .m-topete{animation:m-cachinho .56s var(--suave) infinite alternate}
[data-estado="falando"] .m-x{transform-box:view-box;transform-origin:256px 330px;animation:m-onda .9s var(--sai) infinite both}
[data-estado="falando"] .m-x2{animation-delay:.15s}[data-estado="falando"] .m-x3{animation-delay:.3s}
@keyframes m-quique{from{transform:translateY(0)}to{transform:translateY(-7px)}}
@keyframes m-boca{0%,100%{transform:scale(.8,.35)}14%{transform:scale(1,1.05)}30%{transform:scale(.9,.55)}46%{transform:scale(1.04,.95)}62%{transform:scale(.84,.3)}80%{transform:scale(1,.85)}}
@keyframes m-onda{0%{opacity:0;transform:scale(.93)}35%{opacity:1}100%{opacity:0;transform:scale(1.07)}}

[data-estado="feliz"] .m-salto{animation:m-pulinho 1.9s infinite}
[data-estado="feliz"] .m-sombra{animation:m-sombra-pulinho 1.9s infinite}
[data-estado="feliz"] .m-olho{animation:none}
[data-estado="feliz"] .m-topete{animation:m-cachinho .48s var(--suave) infinite alternate}
[data-estado="feliz"] .m-x{animation:m-faisca 1.9s var(--mola) infinite both}
[data-estado="feliz"] .m-x2{animation-delay:.18s}[data-estado="feliz"] .m-x3{animation-delay:.34s}
@keyframes m-pulinho{0%,46%,100%{transform:translateY(0) scale(1,1)}5%{transform:translateY(0) scale(1.07,.9)}15%{transform:translateY(-46px) scale(.95,1.07)}25%{transform:translateY(0) scale(1.06,.93)}34%{transform:translateY(-20px) scale(.98,1.03)}41%{transform:translateY(0) scale(1.02,.98)}}
@keyframes m-sombra-pulinho{0%,46%,100%{transform:scaleX(1)}15%{transform:scaleX(.7)}25%{transform:scaleX(1.04)}34%{transform:scaleX(.86)}}
@keyframes m-faisca{0%,70%,100%{transform:scale(0) rotate(-30deg)}18%,48%{transform:scale(1) rotate(0)}32%{transform:scale(.8) rotate(12deg)}}

[data-estado="erro"] .m-salto{animation:m-tremida 3.4s infinite}
[data-estado="erro"] .m-topete{animation:m-vibra .9s var(--suave) infinite alternate}
[data-estado="erro"] .m-x1{animation:m-duvida 1.7s var(--suave) infinite alternate}
[data-estado="erro"] .m-x2{animation:m-suor 1.7s cubic-bezier(.7,0,.84,0) infinite}
@keyframes m-tremida{0%,26%,100%{transform:translateX(0) rotate(0)}3%{transform:translateX(-10px) rotate(0)}7%{transform:translateX(10px) rotate(0)}11%{transform:translateX(-7px) rotate(0)}15%{transform:translateX(7px) rotate(0)}19%{transform:translateX(-3px) rotate(0)}40%,88%{transform:translateX(0) rotate(-5deg)}}
@keyframes m-duvida{from{transform:translateY(5px) rotate(-6deg)}to{transform:translateY(-7px) rotate(7deg)}}
@keyframes m-suor{0%{opacity:0;transform:translateY(-8px)}25%{opacity:1}100%{opacity:0;transform:translateY(34px)}}

/* entrada das seções: só esconde quando o JS está de pé (classe no <html>) */
.js .surge{opacity:0;transform:translateY(26px);transition:opacity .7s var(--sai),transform .7s var(--sai)}
.js .surge.visto{opacity:1;transform:none}

/* pausa manual e "reduzir movimento": nada se mexe, nada some */
.pausado *,.pausado *::before,.pausado *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .surge{opacity:1;transform:none}
  .pausa{display:none}
}

@media (max-width:980px){
  .hero .caixa,.cena,.trajeto,.lista .caixa{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .passos{grid-template-columns:1fr}
  .palco{margin:0 auto}
  .topo nav{display:none}.topo nav+.botao{margin-left:auto}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .caixa{padding:0 18px}.topo{padding:10px 18px}
  section{padding-top:68px}
  .g2,.g3,.g4,.assim{grid-template-columns:1fr}
  .estados-grade{grid-template-columns:repeat(2,1fr)}
  .estado{padding:12px 13px 16px}.estado h3{font-size:22px}
  .assim>div+div{border-left:0;border-top:2px solid var(--traco)}
  .cab{grid-template-columns:1fr}.cab .num{justify-self:start;margin:0 0 6px}.cab p{grid-column:1;font-size:17.5px}
  .cartao{padding:22px}
  .balao{left:0;max-width:220px;font-size:15.5px}
  .barra-mac{right:0}
  .acoes .botao{width:100%}
  .lista{padding:54px 0 60px}.lista .chamada .m{width:104px}
  .form{padding:22px;box-shadow:6px 6px 0 #2B1722}
  summary{font-size:20px;padding:16px 18px}details .resp{padding:0 18px 18px}
  footer .caixa{grid-template-columns:1fr}footer nav{justify-content:flex-start}
  .pagina td:first-child{white-space:normal}
}