/** * Compactação para celular dos guias (Guia de IA e Guia de Mídia). * * Arquivo compartilhado de propósito: as duas páginas usam exatamente as * mesmas classes .gia-*, e manter o ajuste colado no de cada uma * criaria duas cópias para divergir com o tempo — foi assim que o CSS do * banner de cookies acumulou um bug que só aparecia no celular. * * Medido em 390px de largura antes de mexer: o topo do Guia de IA ocupava * 713px, mais que uma tela inteira antes de qualquer ferramenta aparecer — * 100px de padding acima do título e um parágrafo de abertura de 198px. */ @media (max-width:640px){ /* Topo: encosta menos no cabeçalho fixo e respira menos embaixo. */ .gia-hero{padding-top:84px;padding-bottom:26px} .gia-hero h1{font-size:clamp(23px,6.6vw,28px);line-height:1.12;margin-bottom:12px} /* O parágrafo de abertura é longo (descreve o guia inteiro). Reduzir o corpo e apertar a entrelinha encurta bastante a altura dele sem cortar informação. O seletor precisa dos dois nomes de classe: a página declara `.gia-hero .gia-lead`, que tem especificidade maior que `.gia-lead` sozinho — com um nome só, esta regra era simplesmente ignorada. */ .gia-hero .gia-lead{font-size:14.5px;line-height:1.5;margin-bottom:20px} .gia-eyebrow{font-size:11px} /* Faixa de números (167 ferramentas, 11 categorias...) */ .gia-stats{gap:14px;margin-top:18px} .gia-stat .num{font-size:22px} .gia-stat .lbl{font-size:11px} .gia-search{margin-top:16px} .gia-search input{min-height:46px;font-size:15px} /* Os atalhos de categoria ficam numa faixa de rolagem horizontal. Dois rótulos são compridos o bastante para passar da largura da tela; um corpo menor deixa os dois caberem inteiros. */ .gia-pill{font-size:11.5px;padding:6px 12px} .gia-toggle button{font-size:12px;padding:7px 13px} }