/* ═══ RESPONSIVO DO HUB DE CASES — estudo pág. 6 (1440/834/390). O desktop (>1000) é o
   controle aprovado e fica INTOCADO: tudo aqui vive em media query. Carregado só pelo hub de
   cases, DEPOIS de case.css e do estilo da página. Cabeçalho e rodapé são do chrome.
   NOTA DE DIVERGÊNCIA: a revisão r2 do estudo troca o painel de filtros por dois campos de
   multisseleção com popover — componente novo que mudaria TAMBÉM o desktop. O protótipo
   aprovado vence: os chips seguem como estão nas três larguras. Desta parte do estudo só
   entra o que é layout responsivo do painel construído (faixa sangrada e Limpar full-width
   no celular). ═══ */

/* ── TABLET (769–1000) · ritmo 96/48 · margens 24 · régua do corte 834 ── */
@media (max-width:1000px) and (min-width:769px){
:root{--mx-gutter-safe:var(--space-24);--space-section-v:var(--space-96)}
.sec,.cta{min-height:0;padding:var(--space-96) 0}
.sec-body{margin-top:var(--space-48);gap:var(--space-40)}
/* régua: H1 60→44 · H2 do CTA 44→32 · lead segue em 20 · card e chip não descem de escala */
.ch-in h1{font-size:44px;line-height:1.05}
/* MEDIDA DO H1 (estudo): tablet 560px a 44px — nenhum título passa da medida */
.ch-in h1{max-width:560px}
.cta-in h2{font-size:32px;line-height:1.2}
.sec-head{max-width:none}
/* 1 · Hero: recorte 74%·50% (medido no Inspect) · véu de baixo para cima, nunca lateral ·
   bloco ancorado a 48 da base */
/* RECORTE (object-position) NÃO entra na regra de família: cada página fica com o recorte que
   já tem. Os recortes definitivos vêm da prancha de Heroes na próxima rodada. */
.ch-hero .hero-bg::after{background:linear-gradient(0deg, var(--color-blue-900) 0%, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) 34%, transparent 72%)}
.ch-hero>.hero-body{justify-content:flex-end;padding-block:var(--space-48)}
/* 2 · Painel de filtros: segue card emoldurado; os eixos empilham (rótulo acima dos chips,
   regra ≤1000 já existente) e o Limpar filtros continua em fluxo, hug */
/* 3 · Grade: 3 → 2 colunas */
.cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 4 · CTA final: piso de tela é SÓ do celular */
#contato.cta3{min-height:0}
}

/* ── CELULAR (≤768) · ritmo 64/40 (base do site) · régua do corte 390 ── */
@media (max-width:768px){
/* régua: H1 40 · H2 do CTA 32 · lead 18 · campo em 16 (abaixo disso o iOS dá zoom ao focar) */
.ch-in h1{font-size:40px;line-height:1.05}
.cta-in h2{font-size:32px;line-height:1.2}
.ch-in p,.cta-in p{font-size:18px}
.sec-head{max-width:none}
/* 1 · HERO — TRANSIÇÃO DA ABERTURA (prancha do estudo): rolagem NORMAL sobre imagem
   CONGELADA. A abertura mostra kicker + H1 a 48 da base; o lead entra na 1ª rolagem, no
   MESMO bloco. Geometria: 1 tela + cauda − 24, bloco a 24 da base (hero-abertura.js mede a
   cauda em --fold-tail; o padrão devolve 1 tela com tudo visível). */
/* RESPIRO INFERIOR: o bloco fecha a 48 da base do hero (página mobile do estudo), o MESMO recuo
   da abertura — hero = 1 tela + cauda, percurso = cauda. Sem JS o padrão é 1 tela. */
.ch-hero{min-height:calc(100svh + var(--fold-tail, 0px));background:var(--color-theme-background)}
.ch-hero .hero-bg{top:0;height:100svh}
/* recorte 62%·50% — MEDIDO no Inspect; não recalcular */
/* RECORTE (object-position) NÃO entra na regra de família: cada página fica com o recorte que
   já tem. Os recortes definitivos vêm da prancha de Heroes na próxima rodada. */
/* véu 0deg: parada densa 34%→62%, fim da transparência 66%→100% */
.ch-hero .hero-bg::after{background:linear-gradient(0deg, var(--color-blue-900) 0%, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) var(--veil-mid,34%), transparent var(--veil-end,66%))}
.ch-hero>.hero-body{justify-content:flex-end;padding-block:0 var(--space-48)}
/* 2 · Painel de filtros: deixa de ser card — sangra de fora a fora, sem borda e sem raio,
   como faixa de seção; o recuo interno de 24 vira o respiro da margem. Eixos com vão 16 e
   Limpar filtros logo abaixo, full-width, na altura de CTA do celular. */
.filtros{margin-inline:calc(-1*var(--mx-gutter-safe));border:0;border-radius:0;padding:var(--space-24);gap:var(--space-16)!important;row-gap:var(--space-16)!important}
/* o botão traz height/radius em ESTILO INLINE no HTML (40px, decisão do desktop): só
   !important vence o inline sem tocar no markup aprovado */
#filtro-limpar{width:100%;height:var(--size-xl)!important;align-self:stretch;flex-basis:100%}
/* r2: os dois campos um abaixo do outro, vão 16 */
.fsel-row{flex-basis:100%;grid-template-columns:minmax(0,1fr);gap:var(--space-16)}
/* 3 · Grade: coluna única (herdada) */
/* 4 · CTA final: piso de UMA TELA só no celular */
#contato.cta3{min-height:100svh}
}
/* movimento reduzido: sem percurso — a abertura já entrega o estado final do quadro 3 */
@media (max-width:768px) and (prefers-reduced-motion:reduce){
.ch-hero .hero-bg img{filter:blur(8px)}
.ch-hero{--veil-mid:62%;--veil-end:100%}
}