usa display:contents para o h1 e
os parágrafos virarem itens ordenáveis do flex (só no mobile). */
.hero--quote { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.hero--quote > div { display: contents; }
.hero--quote h1 { order: 1; }
.hero--quote > .hero-quote { order: 2; margin-bottom: 20px; }
.hero--quote p { order: 3; }
.hero--quote > img { order: 4; margin-top: 24px; }
/* Quem somos: no mobile o apoio sai de cima da imagem e volta pra baixo (navy) */
.quemsomos-hero .overlay-support {
position: static;
max-width: none;
margin-top: 16px;
color: var(--color-text);
}
/* Parágrafos que só aparecem no mobile (.pbr) e
só-desktop (.brd) */
.pbr { display: block; height: 0.85em; }
.brd { display: none; }
/* ---- Seções claras/escuras: menos padding lateral ---- */
.section-deep,
.section-soft { padding: 40px 24px; }
/* ---- Cards / perfis ---- */
.card-grid,
.card-grid.cols-4 {
grid-template-columns: 1fr;
}
.perfis-head { flex-direction: column; align-items: flex-start; }
/* ---- Big numbers ---- */
.stats-bar {
grid-template-columns: repeat(2, 1fr);
row-gap: 24px;
}
/* ---- Depoimentos (mobile): slide desliza em largura total; padding menor ---- */
.testimonial-slide { padding: 40px 20px; }
/* ---- Formulário ---- */
.contact-form-inner,
.contact-page .contact-form-inner {
grid-template-columns: 1fr;
padding: 32px 20px;
}
.contact-form { margin-inline: auto; padding: 24px 20px; } /* centraliza no mobile */
.instagram-grid {
grid-template-columns: repeat(2, 1fr);
}
/* ==== FOOTER (mobile) — reconstruído: não estava funcionando ====
Causa raiz: a faixa legal usava margin -48px, casada com o padding 48px do
card. Ao apertar o card no mobile isso estourava a largura. Agora o padding
do card e as margens negativas da faixa legal andam juntos (20/28px). */
.footer-card { padding: 28px 20px; border-radius: 20px; }
.footer-top {
grid-template-columns: 1fr 1fr;
gap: 28px 24px;
padding-bottom: 28px;
}
.footer-brand-row {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 24px 0;
}
.footer-brand-row .vml-info { flex-wrap: wrap; gap: 14px 18px; }
.footer-badges { flex-wrap: wrap; gap: 10px; }
.footer-badges img { height: 46px; }
.footer-legal-row {
margin: 0 -20px -28px; /* casa com o padding 20px/28px do card */
padding: 18px 20px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.footer-legal-links a { margin: 0 12px 0 0; }
/* ---- Banners rotativos + Obrigado: viram RETRATO 6:10 no mobile ----
A imagem em si é trocada por uma versão mobile via
(600×1000);
aqui só destravamos a proporção para 6:10. */
.banner-slide img,
.thanks-hero img { aspect-ratio: 6 / 10; }
/* ---- Quem somos (hero-overlay): a imagem 12:5 fica baixa demais no mobile e o
título longo estourava. A imagem vira FUNDO que cobre o bloco e o texto (em
fluxo) define a altura — sem overflow, sem 2ª imagem. */
.hero-overlay img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
}
.hero-overlay .overlay-text {
position: relative;
min-height: 340px;
/* Véu preto (não azul) só no mobile, para o título ficar legível sobre a foto. */
background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.6));
}
/* ---- FAQ: resposta alinhada com o NÚMERO (01., 02.…), não recuada ---- */
.faq-answer { padding-left: 28px; max-width: none; }
main { gap: 40px; padding-block: 40px; }
}
/* ==========================================================================
Responsivo — ajuste fino de celular (≤ 480px)
========================================================================== */
@media (max-width: 480px) {
/* Tipografia proporcional ao celular (evita títulos grandes demais) */
.t-hero { font-size: clamp(2rem, 8.5vw, 2.5rem); }
h1, .t-h1 { font-size: clamp(1.85rem, 7.5vw, 2.25rem); }
h2, .t-h2 { font-size: clamp(1.55rem, 6.4vw, 1.85rem); }
/* Todas as colunas do footer empilham */
.footer-top { grid-template-columns: 1fr; gap: 24px; }
/* Big numbers: mantém 2 colunas, número mais contido */
.stats-bar { padding: 28px 16px; }
.stats-bar .stat-number { font-size: var(--fs-h3); }
/* Seções e form um pouco mais justos */
.section-deep,
.section-soft { padding: 32px 20px; }
.contact-form { padding: 20px 16px; }
.testimonial-slide { padding: 32px 16px; }
/* Faixa de segurança (verde) com respiro lateral menor */
.alert-bar.mint { margin-inline: 16px; }
}