/* ===== Ajuste fino "clean": tipografia menor, mais respiro. Carregado por último. ===== */

/* ---------- computador ---------- */
section{padding:96px 0}
h2{font-size:clamp(28px,3.1vw,42px)!important;line-height:1.1}
.cap0 h1{font-size:clamp(32px,3.7vw,52px)!important}
.cap h2{font-size:clamp(28px,3.3vw,46px)!important}
.cap p,.cap0 .sub{font-size:16.5px!important}
.lead,section p{font-size:16.5px}
.hero h1{font-size:clamp(32px,3.5vw,48px)!important}
.hero .sub{font-size:17px!important}
.sit h3,.cat h3{font-size:18.5px}
.panel h3{font-size:27px}
.step b{font-size:18.5px}
summary{font-size:17.5px!important}
.date{font-size:clamp(70px,8.5vw,130px)!important}
.nums b{font-size:clamp(32px,3vw,46px)!important}
.btn{font-size:14.5px}

/* setores: dica + barra de progresso da troca automática */
.tabhint{font-size:14px;color:var(--lm);margin:6px 0 -14px}
.tab{position:relative;overflow:hidden}
.tab i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--g)}
.tab.on i{animation:tabp 5s linear forwards}
.tabs.manual .tab i{display:none}
@keyframes tabp{to{width:100%}}

/* botão do menu só aparece no celular */
.mcta{display:none!important}

/* ---------- celular ---------- */
@media(max-width:640px){
 section{padding:64px 0}
 h2{font-size:24px!important}
 .lead,section p,.cap p,.cap0 .sub{font-size:15px!important}
 .cap0 h1{font-size:27px!important}
 .cap h2{font-size:25px!important}
 .eyebrow{font-size:10px!important;padding:5px 9px!important}
 .btn{font-size:14px!important;padding:12px 16px!important}
 .sit h3,.cat h3{font-size:17px!important}
 .panel h3{font-size:21px!important}
 summary{font-size:16px!important}
 .date{font-size:58px!important}
 .nums b{font-size:28px!important}

 /* primeira dobra: sem a faixa de situações */
 .pick,.pills{display:none!important}

 /* ----- menu do celular ----- */
 .links{position:fixed!important;top:89px!important;left:0;right:0;bottom:0;height:auto!important;max-height:none!important;
  background:#0a110e!important;padding:8px 20px 24px!important;gap:0!important;flex-direction:column;overflow-y:auto;border-top:1px solid #8cd65033}
 .links.open{display:flex!important}
 .links>a,.dd>button{font:600 18px 'Space Grotesk'!important;color:#eef3ef!important;padding:15px 0!important;border-bottom:1px solid #ffffff12!important;display:flex!important;justify-content:space-between;align-items:center;width:100%}
 .links>a:not(.mcta)::after{content:"→";color:var(--g);font-family:Inter}
 .dd>button span{color:var(--g);transition:transform .25s}
 .dd.open>button span{transform:rotate(180deg)}
 .dd .menu{display:none!important}
 .dd.open .menu{display:block!important;padding:4px 0 8px!important}
 .dd .menu a{font-size:14.5px!important;color:#b8c6bd!important;padding:9px 0 9px 14px!important;border-left:2px solid #8cd65044;border-radius:0}
 .mcta{display:flex!important;margin-top:22px;justify-content:center;width:100%}
 .menu-open .wabar,.menu-open .wa,.menu-open .swipe{display:none!important}

 /* ----- páginas de situação: botão na primeira dobra ----- */
 .hero{padding:96px 0 36px!important}
 .hero .wrap{gap:4px!important}
 .hero .ilu{max-width:190px!important;margin:0 auto!important}
 .crumb,.hero .proof{display:none!important}
 .hero .eyebrow{margin-bottom:10px!important}
 .hero h1{font-size:24px!important;line-height:1.15}
 .hero .sub{font-size:14.5px!important;margin:10px 0 16px!important}
 .hero .ctas .btn.s{display:none}
 .hero .ctas .btn.p{width:100%}
}

@media(max-width:640px){
 .dd{width:100%}
 .links>a.mcta{font:600 15px Inter!important;justify-content:center!important;border:0!important;padding:15px 16px!important;color:#0b2410!important}
}

@media(max-width:640px){
 /* menu: posicionado em relação à barra (que é fixa), funciona rolado ou não */
 .links{position:absolute!important;top:100%!important;bottom:auto!important;height:calc(100svh - 89px)!important}
 /* home: primeira dobra do tamanho da tela visível do celular */
 .stick{height:100svh}
 .cap0{bottom:calc(11svh + env(safe-area-inset-bottom))!important}
 /* páginas de situação: primeira dobra ocupa exatamente a tela */
 .hero{min-height:100svh;display:flex;align-items:center;padding:96px 0 28px!important;box-sizing:border-box}
 .hero .wrap{width:100%}
}

/* ---------- rodapé: situações com setinha e contatos com ícones ---------- */
footer .cols{grid-template-columns:1.1fr 1fr 1.1fr}
footer .flist a{display:flex;align-items:baseline;gap:8px;padding:4px 0}
footer .flist a::before{content:"→";color:var(--g);font-size:12px;flex:none}
footer .fcontact{display:grid;gap:14px}
footer .fcontact a{display:flex;gap:12px;align-items:flex-start;padding:0;line-height:1.4}
footer .fcontact svg{width:20px;height:20px;flex:none;color:var(--g);margin-top:1px}
footer .fcontact small{display:block;font-size:12px;color:#7d8b83;margin-top:2px}
footer .fcontact a:hover span{color:var(--g)}

/* ---------- janela do catálogo centralizada ---------- */
dialog{margin:auto!important;max-height:calc(100svh - 40px);display:none;flex-direction:column;overflow:hidden}
dialog[open]{display:flex}
dialog .bd{flex:1;max-height:none!important;overflow:auto}
@media(max-width:640px){dialog{width:calc(100% - 24px)}dialog .hd{padding:22px 20px 14px}dialog .hd h3{font-size:22px}dialog .bd{padding:14px 20px 20px}dialog .ft{padding:0 20px 20px}dialog .ft .btn{width:100%}}

/* ---------- linha do tempo: vertical no celular, tudo legível ---------- */
@media(max-width:1060px){
 .tl-track{grid-template-columns:1fr!important;overflow:visible!important;gap:0!important;padding-left:30px}
 .tl-track::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
 .tl-fill{left:7px;top:0;width:2px;height:100%;transform:scaleY(var(--t,0));transform-origin:top}
 .tl-item{opacity:1!important;padding:0 0 22px 0}
 .tl-item::before{left:-30px;top:4px}
 .tl-item b{font-size:18px}
 .tl-item span{margin-top:2px}
}

@media(max-width:1060px){
 footer .cols{grid-template-columns:1fr!important;gap:32px}
 .tl-fill{transform:none!important}
 .tl-item::before{background:var(--gd)!important;border-color:var(--gd)!important}
}

@media(max-width:640px){
 .tl{display:none!important}
 .pericia .scale{max-width:120px!important;margin:8px auto 0}
 .pericia .big{font-size:44px!important}
 .pericia .reveal:last-child p{font-size:13.5px!important}
}

/* ---------- logo ALR vetorial ---------- */
.alr-logo{display:inline-flex;align-items:center;gap:10px;line-height:1}
.alr-mark{width:38px;height:38px;flex:none;filter:drop-shadow(0 0 10px #16b45c33)}
.alr-txt{display:flex;flex-direction:column;gap:3px}
.alr-txt b{font:700 27px/0.9 'Space Grotesk',sans-serif;letter-spacing:.02em;color:#fff}
.alr-txt small{font:600 8.6px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#a9d64b;white-space:nowrap}
.logo:hover .alr-mark{filter:drop-shadow(0 0 14px #16b45c77)}
.alr-logo.big .alr-mark{width:46px;height:46px}
.alr-logo.big .alr-txt b{font-size:33px}
.alr-logo.big .alr-txt small{font-size:10px}
footer .alr-logo{margin-bottom:16px}
@media(max-width:640px){.alr-mark{width:30px;height:30px}.alr-txt b{font-size:22px}.alr-txt small{font-size:7.2px;letter-spacing:.16em}}

/* ---------- crédito ROI ---------- */
footer .copy .roi{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
footer .copy .roi em{font-style:normal;font-size:12px;color:#7d8b83;border-left:1px solid #ffffff26;padding-left:10px}

/* perícias no celular: balança à esquerda, número e texto ao lado */
@media(max-width:640px){
 .pericia>div:last-child{display:grid!important;grid-template-columns:84px 1fr;grid-template-rows:auto auto;column-gap:18px;align-items:center;
  margin-top:28px;padding:18px;border:1px solid #8cd65033;border-radius:6px;background:#ffffff06}
 .pericia>div:last-child .scale{grid-row:1/3;max-width:84px!important;width:84px;margin:0!important}
 .pericia>div:last-child .big{text-align:left!important;font-size:40px!important;line-height:1;align-self:end}
 .pericia>div:last-child p{text-align:left!important;margin:4px 0 0!important;font-size:13.5px!important;align-self:start}
 .pericia>div:last-child p br{display:none}
}