/* Páginas de serviço da Formiga Digital. Tokens do manual-identidade-visual.md */
:root{
  --breu:#0B0B0C; --brasa:#FF6417; --mel:#FFB84D; --osso:#F4EBDD; --linha:rgba(255,255,255,.2); --linha-forte:rgba(255,255,255,.38);
  --f-display:"Poppins",system-ui,sans-serif; --f-ui:"Montserrat",system-ui,sans-serif;
  --fio:radial-gradient(circle at 3px 50%,var(--brasa) 0 3px,transparent 3.6px),linear-gradient(var(--brasa),var(--brasa)) 6px 50%/calc(100% - 6px) 1px no-repeat;
  --e-pesado:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--breu);color:var(--osso);font:400 17px/1.7 var(--f-display);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--mel);outline-offset:3px}

.topo{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(20px,4vw);
  background:rgba(11,11,12,.92);border-bottom:1px solid var(--linha)}
.marca img{display:block;height:34px;width:auto}
.voltar{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--osso);min-height:44px}
.voltar::before{content:"";width:22px;height:6px;background:var(--fio);transition:width .45s var(--e-pesado)}
.voltar:hover::before{width:40px}

main{padding:0 max(20px,4vw)}
article{max-width:780px;margin:0 auto}
.hero{padding:clamp(48px,9vw,96px) 0 28px;border-bottom:1px solid var(--linha)}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:18px;font:400 13px/1 var(--f-display);letter-spacing:.6px;text-transform:uppercase;opacity:.8}
.eyebrow::before{content:"";flex:none;width:28px;height:6px;background:var(--fio)}
h1{font:600 clamp(34px,6vw,58px)/1.06 var(--f-display);letter-spacing:-.02em;color:#fff;text-wrap:balance}
.sub{margin-top:16px;font:400 clamp(18px,2.2vw,22px)/1.45 var(--f-display);opacity:.9;max-width:34em}
.acoes{margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:4px;background:var(--brasa);color:var(--breu);
  font:700 13px/1.25 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;text-align:center;transition:filter .25s}
.btn:hover{filter:brightness(1.12)}

.texto{padding:36px 0 24px}
.texto p{margin:0 0 18px;max-width:68ch}
.texto .lead{font:400 clamp(18px,2vw,21px)/1.6 var(--f-display);color:#fff;margin-bottom:26px}
.texto h2{margin:48px 0 16px;padding-top:28px;border-top:1px solid var(--linha);font:600 clamp(24px,3vw,32px)/1.2 var(--f-display);letter-spacing:-.015em;color:#fff;text-wrap:balance}
.texto h3{margin:30px 0 8px;font:600 18px/1.35 var(--f-display);color:var(--mel)}
.texto h3.passo{display:flex;gap:14px;align-items:baseline;color:#fff}
.texto h3.passo span{font:500 12px/1 var(--f-ui);letter-spacing:.08em;color:var(--brasa)}
.texto ul{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:10px;max-width:68ch}
.texto li{position:relative;padding-left:22px}
.texto li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--brasa)}

.texto blockquote{margin:26px 0;padding-left:20px;border-left:1px solid var(--brasa);font:600 clamp(18px,2.2vw,22px)/1.45 var(--f-display);color:#fff;max-width:34em}
.texto blockquote::before{content:"\201C"}
.texto blockquote::after{content:"\201D"}
.final{margin:20px 0 80px;padding:34px 0 0;border-top:1px solid var(--linha-forte)}
.fecho{font:600 clamp(20px,2.6vw,26px)/1.35 var(--f-display);color:#fff;max-width:28em;text-wrap:balance}

.rodape{padding:36px max(20px,4vw) 56px;border-top:1px solid var(--linha)}
.rodape ul{max-width:780px;margin:0 auto 22px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px}
.rodape a{font:500 12px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--osso);opacity:.75;display:inline-block;padding:10px 0}
.rodape a:hover,.rodape a[aria-current]{opacity:1}
.rodape p{max-width:780px;margin:0 auto;font-size:14px;opacity:.6}

@media (max-width:560px){body{font-size:16px}.marca img{height:28px}.voltar{font-size:11px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.voltar::before{transition:none}}

/* texto enxuto: cada tópico vira uma linha que abre ao toque (o conteúdo continua no HTML, então o Google lê tudo) */
.texto details.sec{border-top:1px solid var(--linha)}
.texto details.sec:last-of-type{border-bottom:1px solid var(--linha)}
.texto summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:50px;padding:8px 0;cursor:pointer;list-style:none}
.texto summary::-webkit-details-marker{display:none}
.texto summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--brasa);border-bottom:2px solid var(--brasa);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--e-pesado)}
.texto details[open]>summary::after{transform:translateY(3px) rotate(-135deg)}
.texto summary:hover h2,.texto summary:hover h3,.texto summary:hover>span{color:var(--mel)}
.texto summary h2,.texto summary h3,.texto summary>span{margin:0;padding:0;border:0;font:600 clamp(17px,2vw,20px)/1.35 var(--f-display);letter-spacing:-.01em;color:#fff;transition:color .25s}
.texto summary>span{font-weight:400;color:var(--osso)}
.texto summary h3.passo{display:flex;gap:14px;align-items:baseline}
.texto .sec__c{padding:2px 0 14px}
.texto .sec__c>:first-child{margin-top:0}
.texto>h2,.texto>h3{margin:28px 0 8px;padding-top:0;border:0;font:600 12px/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mel)}
.texto .lead{margin-bottom:18px}
:focus-visible{outline-offset:3px}


/* aberta pelo "Saiba mais" de uma sala: página sem saída (sem voltar, sem link no logo, sem menu); quem quer voltar fecha a aba */
html.sem-saida .voltar,html.sem-saida .rodape nav{display:none}
html.sem-saida .marca{pointer-events:none;cursor:default}