/* works.jess — site. Tokens e regras vêm do brand book aprovado (27/out/2026). */
@font-face{font-family:Unbounded;src:url(../assets/fontes/Unbounded-VF.ttf) format("truetype");font-weight:200 900;font-display:swap}
@font-face{font-family:Manrope;src:url(../assets/fontes/Manrope-VF.ttf) format("truetype");font-weight:200 800;font-display:swap}

:root{
  --preto:#0F0F0F;--grafite:#222222;--grafite-claro:#1C1C1C;--linha:#2E2E2E;
  --branco:#EDEDED;--cinza:#A8A8A8;--cinza-escuro:#8A8A8A;
  --limao:#C6F432;--sobre-limao:#1A2400;
  --raio:12px;--margem:clamp(16px,5vw,64px);--max:1240px;
  --mola:cubic-bezier(.5,1.6,.4,1);--suave:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--preto);color:var(--branco);font:400 17px/1.6 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ol,ul{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
em{font-style:normal;color:var(--limao)}
:focus-visible{outline:2px solid var(--limao);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:16px;top:-60px;z-index:50;background:var(--limao);color:var(--sobre-limao);padding:10px 16px;border-radius:999px;font-weight:600}
.pular:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--margem));margin:0 auto;padding:0 var(--margem)}

/* Tipografia */
.titulo-grande,.titulo-secao,h3{font-family:Unbounded,sans-serif;font-weight:700;letter-spacing:-.025em}
.titulo-grande{font-size:clamp(36px,6.2vw,72px);line-height:.95}
.titulo-secao{font-size:clamp(28px,3.4vw,36px);line-height:1.08;margin:14px 0 16px}
.etiqueta{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza-escuro)}
.secao-apoio,.abertura-apoio{color:var(--cinza);max-width:560px}
.nota{font-size:14px;color:var(--cinza-escuro);margin-top:20px}

/* Chave (elemento de assinatura) */
.chave{display:inline-flex;align-items:center;flex:none;width:52px;height:30px;padding:4px;border-radius:999px;background:#333;transition:background .35s}
.chave i{width:22px;height:22px;border-radius:50%;background:#777;transition:transform .45s var(--mola),background .35s}
.ligada .chave,[aria-checked=true] .chave{background:var(--limao)}
.ligada .chave i,[aria-checked=true] .chave i{transform:translateX(22px);background:var(--preto)}

/* Botões em pílula: só um cheio por tela */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;transition:background .3s,color .3s,border-color .3s,transform .3s var(--suave)}
.btn:has(.chave){padding:0 9px 0 24px}
.btn-cheio{background:var(--limao);color:var(--sobre-limao)}
.btn-cheio .chave{background:var(--sobre-limao)}
.btn-cheio .chave i{background:var(--limao)}
.btn-cheio:hover .chave i,.btn-cheio:focus-visible .chave i{transform:translateX(22px)}
.btn-contorno{background:transparent;border:1.5px solid var(--linha);color:var(--branco)}
.btn-contorno:hover,.btn-contorno:focus-visible{border-color:var(--limao);color:var(--limao)}
.btn:active{transform:scale(.97)}

/* Topo */
.topo{position:sticky;top:0;z-index:20;transition:transform .45s var(--suave),background .3s,border-color .3s;border-bottom:1px solid transparent}
.topo.rolou{background:rgba(15,15,15,.88);backdrop-filter:blur(10px);border-color:var(--linha)}
.topo.escondido{transform:translateY(-100%)}
.topo-in{display:flex;align-items:center;gap:32px;height:76px}
.logo{display:block;width:150px;line-height:0}
.logo svg{width:100%;height:auto;overflow:visible}
.menu{display:flex;gap:28px;margin-left:auto;font-size:15px;color:var(--cinza)}
.menu a{position:relative;padding:6px 0;transition:color .25s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--limao);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--suave)}
.menu a:hover,.menu a.atual{color:var(--branco)}
.menu a:hover::after,.menu a.atual::after{transform:scaleX(1)}
.topo-cta{min-height:42px;font-size:14px;padding:0 18px}
.menu-botao{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
/* Logo: a chave liga ao carregar */
.logo .l-pilula{transition:fill .5s .35s}
.logo .l-bola{transition:transform .7s .3s var(--mola)}
.logo.desligado .l-pilula{fill:#333}
.logo.desligado .l-bola{fill:#777}

/* Abertura */
.abertura{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:end;padding-top:clamp(48px,9vh,110px);padding-bottom:clamp(64px,11vh,130px)}
.abertura .titulo-grande{margin:22px 0 28px;max-width:960px}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.palavra{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.palavra>span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--suave)}
.palavras-on .palavra>span{transform:none}

/* Mascote */
.mascote{display:block;width:100%;max-width:220px;margin-left:auto;transition:transform .5s var(--mola)}
.m-corpo{fill:var(--limao)}
.m-olho{fill:var(--limao);transition:transform .2s ease-out}
.m-olhos{transform-box:fill-box;transform-origin:center;animation:piscar 5s infinite}
@keyframes piscar{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}
.feliz{transform:translateY(-10px) rotate(-5deg)}
.feliz .m-olhos{animation:none;transform:scaleY(.45)}

/* Seções */
.secao{padding:clamp(72px,11vh,128px) 0;border-top:1px solid var(--linha)}
.secao-cabeca{margin-bottom:48px}
.secao-cabeca-linha{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.secao-cabeca-linha .secao-apoio{max-width:380px}

/* Configurador de frentes */
.config{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.config-lista{list-style:none;padding:0;display:grid;gap:10px}
.frente{width:100%;display:flex;align-items:center;gap:18px;text-align:left;background:var(--grafite-claro);border:1.5px solid transparent;border-radius:var(--raio);padding:18px 18px 18px 22px;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--suave)}
.frente:hover{border-color:var(--linha);transform:translateX(4px)}
.frente[aria-checked=true]{background:var(--grafite);border-color:#3a4a10}
.frente-num{font-family:Unbounded;font-weight:700;font-size:14px;color:var(--cinza-escuro);width:26px;transition:color .3s}
.frente[aria-checked=true] .frente-num{color:var(--limao)}
.frente-txt{flex:1;display:grid;gap:2px}
.frente-txt b{font-weight:600;font-size:16px}
.frente-txt small{font-size:14px;color:var(--cinza);line-height:1.45}
.config-painel{position:sticky;top:100px;background:var(--grafite);border-radius:var(--raio);padding:28px;display:grid;gap:18px}
.config-contagem{font-family:Unbounded;font-weight:700;font-size:22px}
.config-contagem [data-contagem]{display:inline-block;color:var(--limao);min-width:.7em;transition:transform .35s var(--mola)}
.config-contagem .pulo{transform:scale(1.35)}
.config-modulos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.modulo{aspect-ratio:1.6;display:grid;place-items:center;border-radius:var(--raio);background:var(--grafite-claro);border:1px solid var(--linha);font-family:Unbounded;font-weight:700;font-size:14px;color:#555;transition:background .4s,color .4s,border-color .4s,transform .45s var(--mola)}
.modulo.on{background:var(--preto);border-color:var(--limao);color:var(--limao);transform:translateY(-3px)}
.config-nota{font-size:15px;color:var(--cinza);min-height:3.2em}
.config-painel .btn{justify-self:start}
.config-painel .btn[aria-disabled=true]{opacity:.4;pointer-events:none}

/* Para quem */
.publicos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.publico{position:relative;display:flex;flex-direction:column;gap:10px;min-height:300px;padding:26px;border-radius:var(--raio);background:var(--grafite-claro);border:1.5px solid transparent;overflow:hidden;transition:border-color .35s,transform .45s var(--suave),background .35s}
.publico-icone{width:40px;height:40px;fill:none;stroke:var(--cinza);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px;transition:stroke .35s,transform .45s var(--mola)}
.publico h3{font-size:19px;line-height:1.15}
.publico p{font-size:15px;color:var(--cinza);line-height:1.5}
.publico-ver{font-size:13px;font-weight:600;color:var(--cinza-escuro);margin-top:auto;padding-top:10px;transition:color .3s}
.publico:hover,.publico:focus-visible{border-color:var(--linha);background:var(--grafite);transform:translateY(-6px)}
.publico:hover .publico-icone,.publico:focus-visible .publico-icone{stroke:var(--limao);transform:scale(1.08)}
.publico:hover .publico-ver,.publico:focus-visible .publico-ver{color:var(--limao)}

/* Como o projeto é definido */
.como{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.como-cena{position:relative;height:clamp(380px,48vw,560px)}
.pessoa{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);animation:respirar 4.5s ease-in-out infinite}
@keyframes respirar{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.pessoa .rosto{display:none}
.pessoa .rosto-normal,.sorrindo .pessoa .rosto-sorriso{display:inline}
.sorrindo .pessoa .rosto-normal{display:none}
.pessoa .cabeca{transform-box:fill-box;transform-origin:50% 95%;animation:cabeca 6s ease-in-out infinite}
@keyframes cabeca{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}60%{transform:rotate(2deg)}}
.passos{list-style:none;padding:0;display:grid;gap:10px;margin-top:8px}
.passo{display:flex;align-items:center;gap:18px;background:var(--grafite-claro);border-radius:var(--raio);padding:16px 16px 16px 22px;opacity:.4;transform:translateX(18px);transition:opacity .6s,transform .7s var(--suave),background .4s}
.passo.ligada{opacity:1;transform:none;background:var(--grafite)}
.passo-num{font-family:Unbounded;font-weight:700;font-size:14px;color:var(--cinza-escuro);width:26px}
.passo.ligada .passo-num{color:var(--limao)}
.passo-txt{flex:1;display:grid;gap:2px}
.passo-txt b{font-weight:600;font-size:16px}
.passo-txt small{font-size:14px;color:var(--cinza);line-height:1.45}

/* Projetos */
.projetos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.projetos-home{grid-template-columns:repeat(2,minmax(0,1fr))}
.projeto-largo{grid-column:span 2}
.projeto{display:flex;flex-direction:column;gap:14px}
.projeto-previa{position:relative;aspect-ratio:16/10;border-radius:var(--raio);background:var(--grafite-claro);border:1px solid var(--linha);overflow:hidden;transition:transform .5s var(--suave),border-color .35s}
.projeto-largo .projeto-previa{aspect-ratio:auto;flex:1;min-height:240px}
.previa-moldura{position:absolute;left:0;right:0;top:0;height:30px;display:flex;gap:6px;align-items:center;padding:0 14px;border-bottom:1px solid var(--linha);background:var(--grafite)}
.previa-moldura i{width:8px;height:8px;border-radius:50%;background:#3a3a3a}
.previa-video{position:absolute;left:0;right:0;top:30px;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:top;display:block;background:var(--grafite-claro)}
.projeto:hover .projeto-previa{transform:translateY(-6px);border-color:var(--limao)}
.projeto-info{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.projeto h3{font-size:17px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{font-size:12px;font-weight:600;color:var(--cinza);border:1px solid var(--linha);border-radius:999px;padding:3px 10px}
.projeto-nota{flex-basis:100%;font-size:12px;color:var(--cinza);margin-top:-4px}

/* Contato */
.contato-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.contato .btn{margin-top:30px}
.contato-escopo{margin-top:20px;font-size:15px;color:var(--branco);background:var(--grafite);border-radius:var(--raio);padding:14px 18px;max-width:560px}
.contato-escopo b{color:var(--limao);font-weight:600}
.contato-cena{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:24px;align-items:end}
.contato-pessoa{position:relative;height:clamp(340px,40vw,460px)}
.mascote-pequeno{max-width:140px;margin-bottom:40px}

/* Rodapé */
.rodape{border-top:1px solid var(--linha);padding:48px 0 56px}
.rodape-in{display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px}
.logo-rodape{width:130px}
.rodape nav{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:var(--cinza)}
.rodape nav a:hover{color:var(--branco)}
.credito{margin-left:auto;font-size:12px;color:var(--cinza-escuro)}

/* Submenu "Para quem" */
.submenu{position:relative}
.submenu-botao{background:none;border:0;padding:6px 0;cursor:pointer;color:var(--cinza);font-size:15px;transition:color .25s}
.submenu-botao span{display:inline-block;font-size:11px;margin-left:2px;transition:transform .3s}
.submenu-botao:hover,.submenu.atual .submenu-botao{color:var(--branco)}
.submenu-lista{position:absolute;top:calc(100% + 12px);left:-18px;min-width:260px;display:grid;padding:8px;background:var(--grafite);border:1px solid var(--linha);border-radius:var(--raio);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .35s var(--suave),visibility .25s}
.submenu-lista::before{content:"";position:absolute;inset:-14px 0 auto;height:14px}
.submenu-lista a{padding:10px 12px;border-radius:8px;color:var(--branco)}
.submenu-lista a::after{display:none}
.submenu-lista a:hover,.submenu-lista a.atual{background:var(--grafite-claro);color:var(--limao)}
.submenu:hover .submenu-lista,.submenu:focus-within .submenu-lista,.submenu-botao[aria-expanded=true]+.submenu-lista{opacity:1;visibility:visible;transform:none}
.submenu:hover .submenu-botao span,.submenu-botao[aria-expanded=true] span{transform:rotate(180deg)}

/* Páginas internas */
.pagina-abertura{padding-top:clamp(48px,9vh,100px);padding-bottom:clamp(56px,9vh,100px)}
.titulo-pagina{font-family:Unbounded,sans-serif;font-weight:700;letter-spacing:-.025em;font-size:clamp(26px,8.2vw,60px);line-height:.98;margin:20px 0 26px;max-width:960px}
.pagina-abertura-pessoa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.55fr);gap:40px;align-items:end;padding-bottom:0}
.pagina-abertura-pessoa>div:first-child{padding-bottom:clamp(56px,9vh,100px)}
.abertura-pessoa{position:relative;height:clamp(360px,42vw,540px)}
.link-seta{display:inline-flex;gap:8px;align-items:center;margin-top:18px;font-weight:600;font-size:15px;color:var(--limao)}
.link-seta span{transition:transform .3s var(--suave)}
.link-seta:hover span{transform:translateX(5px)}
.faixa-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.faixa-cta .titulo-secao{margin:0;max-width:640px}

/* Serviços */
.servicos{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.servicos-indice{position:sticky;top:100px;display:grid;gap:4px}
.servicos-indice a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:999px;font-size:14px;font-weight:600;color:var(--cinza);transition:color .3s,background .3s}
.servicos-indice .chave{transform:scale(.7);transform-origin:left center;margin-right:-14px}
.servicos-indice a.ligada{color:var(--branco);background:var(--grafite-claro)}
.servicos-lista{display:grid;gap:12px}
.servico{background:var(--grafite-claro);border-radius:var(--raio);padding:clamp(24px,3vw,36px);display:grid;gap:12px;scroll-margin-top:100px}
.servico-num{font-family:Unbounded;font-weight:700;font-size:14px;color:var(--limao)}
.servico h2{font-family:Unbounded;font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;line-height:1.15}
.servico p{color:var(--cinza);max-width:620px}
.entregas{list-style:none;padding:0;display:grid;margin-top:10px;border-top:1px solid var(--linha)}
.entrega{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:18px 0;border-bottom:1px solid var(--linha)}
.entrega:last-child{border-bottom:0;padding-bottom:0}
.entrega b{display:block;font-size:16px;font-weight:600;margin-bottom:4px}
.entrega p{font-size:15px;line-height:1.55;color:var(--cinza);max-width:560px}
.entrega-rotulo{color:var(--branco);font-weight:600}
.formato{flex:none;font-size:12px;font-weight:600;color:var(--branco);border:1px solid var(--linha);border-radius:999px;padding:4px 12px;white-space:nowrap}
.config-entregas{display:grid;gap:10px;border-top:1px solid var(--linha);padding-top:16px}
.config-entregas ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.config-entregas li{font-size:13px;font-weight:600;border:1px solid var(--linha);border-radius:999px;padding:4px 11px;animation:entrar .4s var(--suave) both}
@keyframes entrar{from{opacity:0;transform:translateY(6px)}}
.config-entregas .link-seta{margin-top:4px}

/* Páginas de público */
.situacoes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.situacao{position:relative;background:var(--grafite-claro);border-radius:var(--raio);padding:28px 28px 28px 64px;font-size:18px;font-weight:600;line-height:1.4}
.situacao-aspas{position:absolute;left:24px;top:18px;font-family:Unbounded;font-size:40px;line-height:1;color:var(--limao)}
.frentes-fixas-lista{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.frente-fixa a{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--raio);background:var(--grafite-claro);transition:background .3s}
.frente-fixa a:hover{background:var(--grafite)}
.frente-fixa span:not(.chave){flex:1;font-weight:600}
.frente-fixa small{font-size:12px;color:var(--cinza-escuro);text-transform:uppercase;letter-spacing:.08em}
.frente-fixa:not(.ligada) span:not(.chave){color:var(--cinza)}
.js [data-acender] .frente-fixa.ligada:not(.acesa) .chave{background:#333}
.js [data-acender] .frente-fixa.ligada:not(.acesa) .chave i{transform:none;background:#777}

/* Projetos: filtros */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtro{border:1.5px solid var(--linha);background:none;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--cinza);cursor:pointer;transition:all .3s}
.filtro:hover{color:var(--branco);border-color:var(--cinza-escuro)}
.filtro[aria-pressed=true]{background:var(--branco);border-color:var(--branco);color:var(--preto)}
.projeto h2{font-family:Unbounded;font-weight:700;font-size:17px;letter-spacing:-.02em}
.projeto.saindo{opacity:0;transform:scale(.96);transition:opacity .25s,transform .25s}
.projeto.oculto{display:none}

/* Contato: formulário */
.contato-pagina{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:start}
.form{display:grid;gap:22px}
.campo{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.campo label,.campo legend{font-size:14px;font-weight:600;color:var(--branco);padding:0}
.campo legend{margin-bottom:8px}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:16px;color:var(--branco);background:var(--grafite-claro);border:1.5px solid var(--linha);border-radius:var(--raio);padding:14px 16px;transition:border-color .25s}
.campo textarea{resize:vertical;min-height:140px}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cinza) 50%),linear-gradient(135deg,var(--cinza) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--limao)}
.campo.erro input,.campo.erro select,.campo.erro textarea{border-color:#E5484D}
.opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opcao{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--raio);background:var(--grafite-claro);font-size:14px;font-weight:600;cursor:pointer}
.opcao input{position:absolute;opacity:0;width:1px;height:1px}
.opcao .chave{transform:scale(.8);transform-origin:left center;margin-right:-10px}
.opcao input:checked+.chave{background:var(--limao)}
.opcao input:checked+.chave i{transform:translateX(22px);background:var(--preto)}
.opcao:has(input:focus-visible){outline:2px solid var(--limao);outline-offset:2px}
.form-fim{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form-aviso{font-size:13px;color:var(--cinza-escuro)}
.form-aviso.destaque{color:var(--limao)}
.contato-pagina .contato-cena{position:sticky;top:100px}

/* Mascote nas chamadas e aberturas internas */
.faixa-cta-acao{display:flex;align-items:center;gap:20px}
.mascote-cta{width:84px;max-width:84px;margin:0;flex:none}
.pagina-abertura-mascote{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:40px;align-items:end}

/* Voltar ao topo: anel limão mostra o quanto da página já foi lido */
.topo-voltar{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:25;width:52px;height:52px;border-radius:50%;border:0;padding:0;background:var(--grafite);color:var(--branco);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .4s var(--suave),visibility .3s,background .3s}
.topo-voltar.visivel{opacity:1;visibility:visible;transform:none}
.topo-voltar:hover{background:var(--grafite-claro)}
.topo-voltar svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.topo-voltar circle{fill:none;stroke-width:3}
.topo-voltar .anel-fundo{stroke:var(--linha)}
.topo-voltar .anel{stroke:var(--limao);stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:138.2}
.topo-voltar span{font-size:20px;line-height:1;transition:transform .3s var(--suave)}
.topo-voltar:hover span{transform:translateY(-3px)}

/* Entrada ao rolar */
.js [data-revela]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--suave),transform .9s var(--suave);transition-delay:var(--atraso,0s)}
.js [data-revela].visivel{opacity:1;transform:none}

/* Telas menores */
@media (max-width:1020px){
  .publicos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .publico{min-height:240px}
  .topo-cta{display:none}
}
@media (max-width:820px){
  .menu-botao{display:block}
  .menu{position:fixed;inset:76px 0 auto;flex-direction:column;gap:0;padding:8px var(--margem) 24px;background:var(--preto);border-bottom:1px solid var(--linha);font-size:20px;color:var(--branco);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .3s,transform .4s var(--suave),visibility .3s}
  .menu a{padding:14px 0;border-bottom:1px solid var(--linha)}
  .menu a::after{display:none}
  .menu.aberto{opacity:1;transform:none;visibility:visible}
  .menu{max-height:calc(100vh - 76px);overflow-y:auto}
  .submenu-botao{display:none}
  .submenu-lista{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;padding:0;min-width:0}
  .submenu-lista::before{display:none}
  .submenu-lista a{padding:12px 0 12px 16px;border-radius:0;border-bottom:1px solid var(--linha);font-size:17px}
  .submenu-lista a:hover,.submenu-lista a.atual{background:none}
  .menu-botao[aria-expanded=true] .chave{background:var(--limao)}
  .menu-botao[aria-expanded=true] .chave i{transform:translateX(22px);background:var(--preto)}
  .abertura{grid-template-columns:1fr;gap:32px}
  .abertura-mascote{order:-1}
  .mascote{max-width:110px;margin-left:0}
  .config,.como,.contato-in{grid-template-columns:1fr}
  .config-painel{position:static}
  .como-cena,.abertura-pessoa,.contato-pessoa{height:150px;width:210px;overflow:hidden;border-bottom:1px solid var(--linha);margin-left:auto}
  .como-cena .pessoa,.abertura-pessoa .pessoa,.contato-pessoa .pessoa{top:0;bottom:auto;height:360px}
  .como-cena{margin-bottom:-24px}
  .projetos{grid-template-columns:1fr}
  .projeto-largo{grid-column:auto}
  .projeto-largo .projeto-previa{aspect-ratio:16/10;flex:none;min-height:0}
  .contato-cena{grid-template-columns:auto auto;justify-content:start;gap:20px}
  .contato-pessoa{margin-left:0}
  .pagina-abertura-pessoa,.servicos,.contato-pagina{grid-template-columns:1fr}
  .pagina-abertura-pessoa>div:first-child{padding-bottom:0}
  .pagina-abertura-pessoa{padding-bottom:clamp(56px,9vh,100px)}
  .abertura-pessoa{order:-1;margin-bottom:-8px}
  .pagina-abertura-mascote{grid-template-columns:1fr;gap:24px}
  .pagina-abertura-mascote>div:last-child{order:-1}
  .servicos-indice{display:none}
  .situacoes,.frentes-fixas-lista{grid-template-columns:1fr}
  .contato-pagina .contato-cena{position:static}
  .mascote-pequeno{max-width:84px;margin-bottom:0}
  .contato-in .contato-cena{order:-1}
  .credito{margin-left:0}
}
@media (max-width:520px){
  .publicos{grid-template-columns:1fr}
  .publico{min-height:0}
  .acoes .btn{flex:1 1 auto;justify-content:center}
  .frente{padding:16px 14px 16px 16px;gap:12px}
  .opcoes{grid-template-columns:1fr}
  .situacao{font-size:16px;padding:22px 20px 22px 56px}
  .entrega{flex-direction:column;gap:10px}
  .faixa-cta-acao{width:100%}
  .faixa-cta .btn{flex:1;justify-content:center}
  .mascote-cta{width:64px;max-width:64px}
}

/* Menos movimento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-revela]{opacity:1;transform:none}
  .palavra>span{transform:none}
  .passo{opacity:1;transform:none}
}