/* Sistema global de layout responsivo.
   Classes utilitárias compartilhadas por todas as páginas do projeto.
   Regra: corrigir aqui, não na página. Ver CLAUDE.md § PADRÃO GLOBAL DE RESPONSIVIDADE. */

:root{
--container-pad:clamp(16px,4.4vw,64px); /* @kind spacing */
--tap-min:44px; /* @kind spacing */
--measure:66ch; /* @kind spacing */
--fab-inset-x:16px; /* @kind spacing */
--fab-inset-y:20px; /* @kind spacing */
}

/* Nenhum elemento pode exceder a viewport. Não usamos overflow-x:hidden. */
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
img,svg,video,canvas,iframe,table{max-width:100%}
img,video{height:auto}

/* Container único — todo conteúdo compartilha este eixo de alinhamento. */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--container-pad)}
.container-narrow{max-width:var(--container-narrow)}

/* Seção — respiro vertical consistente, já reduzido no mobile por --section-y. */
.section{padding-block:var(--section-y)}

/* Grids de card: desktop 3 → tablet 2 → mobile 1, sem mínimo que estoure 320px. */
.grid-3{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
@media (max-width:1024px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}

/* Split assimétrico (hero, FAQ, contato) — colapsa para uma coluna no tablet. */
.split{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
.split-wide{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
@media (max-width:940px){.split,.split-wide{grid-template-columns:minmax(0,1fr)}}

/* Texto: sempre dentro do container, com medida de leitura e quebra natural. */
.measure{max-width:var(--measure)}
h1,h2,h3,h4,p,li,summary{overflow-wrap:break-word;text-wrap:pretty}

/* CTAs: lado a lado no desktop, empilhados em largura cheia no mobile. */
.ctas{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
@media (max-width:560px){
.ctas{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
.ctas>*{width:100%}
}

/* Área de toque mínima em qualquer controle. */
button,.btn,a.btn,[role="button"]{min-height:var(--tap-min)}
@media (max-width:760px){
button,.btn,a.btn{min-height:48px}
}

/* Formulário: 2 colunas no desktop, 1 no mobile; campo nunca excede o container. */
.form-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr)}}
input,select,textarea,button{box-sizing:border-box;max-width:100%}
@media (max-width:560px){form button[type="submit"],form .btn{width:100%}}

/* Botão flutuante de WhatsApp — posição global consistente. */
.fab-whatsapp{position:fixed;right:var(--fab-inset-x);bottom:var(--fab-inset-y);z-index:50}

/* Footer: colunas no desktop, vertical no mobile. */
.footer-cols{display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}
@media (max-width:900px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}}
@media (max-width:560px){.footer-cols{grid-template-columns:minmax(0,1fr)}}