/* ═══ RESPONSIVO DA PÁGINA DE CASE — estudo pág. 4 (1440/834/390). O desktop (>1000) é o
   controle aprovado e fica INTOCADO: tudo aqui vive em media query. Carregado só pela página
   de case que já recebeu a propagação, DEPOIS de case.css e do estilo dela. Cabeçalho e
   rodapé são do chrome: nada deles aqui. Nada removido. ═══ */

/* ── 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 do case 56→40 (o clamp entregaria o piso 34 nesta largura) · H2 44→32 ·
   número do stat 36→32 · abertura do corpo segue em 20 (lead canônico, não escala) */
.cs-h1,.cs-hero .cs-in h1{font-size:40px}
/* MEDIDA DO H1 (estudo): tablet 520px a 40px */
.cs-h1,.cs-hero .cs-in h1{max-width:520px}
.sec-head h2,.cta-in h2{font-size:32px;line-height:1.15}
.sec-sub{font-size:18px}
.sec-head{max-width:none}
.cs-stat b{font-size:32px}
/* 1 · Hero: lógica própria do case preservada (stats ancorados na base, eyebrow + H1
   centrados no espaço que sobra) — só o recorte e o véu mudam.
   Recorte 73%·26% — MEDIDO no Inspect pelo Well; Y desce porque em retrato o topo da foto
   entraria acima das cabeças. Véu: o degradê lateral SAI e entra o de baixo para cima. */
/* 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. */
.cs-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%)}
/* quebra de linha do H1 pedida só no desktop: some daqui para baixo */
.cs-h1 .br-d{display:none}
/* 2 · Stat cards: seguem em 3 colunas (≈247px cada) — o corte para coluna única é do celular */
.cs-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 3 · Abertura do corpo: a medida de 8 colunas é o próprio container nesta largura;
   traço + recuo preservados. Recuo de entrada no ritmo do corte. */
.cs-abre .wrap{padding-top:var(--space-96)}
#desafio{padding-top:var(--space-96)}
/* 4 · Pilares: seguem em 2 colunas; ícone e caption na MESMA linha (herdado) */
.cs-mech{grid-template-columns:repeat(2,minmax(0,1fr))}
/* chips de oferta: hug, largura máxima 100%, reticências, sem quebra */
.cs-chip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-chip .ph{margin-right:var(--space-8);vertical-align:-0.12em}
/* 5 · Antes → depois: par lado a lado (o texto cabe em ≈381px) */
.cs-ad{grid-template-columns:1fr 1fr}
/* 6 · Impactos: 2 colunas */
.cs-impactos{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 7 · 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){
/* o modelo usa type-display no h1 do hero: entra na mesma régua */
.cs-hero .cs-in h1{font-size:34px;line-height:1.08}
/* régua: H1 34 (piso do clamp) · H2 32 · lead de bloco 18 · abertura do corpo segue em 20 */
.sec-head h2,.cta-in h2{font-size:32px;line-height:1.2}
.sec-sub,.cta-in p{font-size:18px}
.sec-head{max-width:none}
.cs-stat b{font-size:32px}
/* MEDIDA DO H1 no celular: a largura útil (estudo: max-width none) */
.cs-h1,.cs-hero .cs-in h1{max-width:none}
/* 1 · HERO — TRANSIÇÃO DA ABERTURA (prancha do estudo): rolagem NORMAL sobre imagem
   CONGELADA. A abertura mostra eyebrow + H1 ancorados a 48 da base; os stat cards e a nota
   de fonte entram na 1ª rolagem, no MESMO bloco. A centragem entre cabeçalho e faixa de
   stats é comportamento do DESKTOP — aqui as margens automáticas saem. Geometria fechada:
   hero = 1 tela + cauda (do fim do H1 ao fim do bloco) − 24, bloco a 24 da base do hero;
   a cauda é medida no render por case-fold.js (--fold-tail) e o padrão devolve 1 tela com
   tudo visível (estado do quadro 3). Desfoque por filter NA CAMADA DA IMAGEM. */
/* 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. */
.cs-hero{min-height:calc(100svh + var(--fold-tail, 0px));background:var(--color-theme-background)}
.cs-hero .hero-bg{top:0;height:100svh}
/* recorte 71%·30% — MEDIDO no Inspect pelo Well; 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 30%→58% e fim da transparência 62%→100%. O sombreado de base do
   case (.cs-hero-grad, 64%→38%) segue existindo por baixo, sustentando a faixa de cards. */
.cs-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,30%), transparent var(--veil-end,62%))}
.cs-hero>.hero-body{justify-content:flex-end;padding-block:0 var(--space-48)}
/* o modelo 06-case usa .cs-in no lugar de .cs-hero-in — a família cobre os dois */
.cs-hero .cs-hero-in,.cs-hero .cs-in{flex:none;padding-block:0}
.cs-hero .cs-hero-in .kicker,.cs-hero .cs-in .kicker{margin-top:0}
.cs-hero .cs-h1,.cs-hero .cs-in h1{margin-bottom:0}
/* quebras do H1: a de desktop já saiu; a de desktop+tablet sai aqui */
.cs-h1 .br-d,.cs-h1 .br-dt{display:none}
/* 2 · Stat cards: coluna única, cada um em linha cheia, número acima do texto (herdado),
   régua laranja de topo e contagem animada preservadas */
.cs-stats{grid-template-columns:minmax(0,1fr)}
/* 3 · Abertura do corpo: a medida passa a ser a largura útil; traço + recuo preservados */
.cs-abre .wrap{padding-top:var(--space-64)}
/* 4 · Pilares: coluna única (minmax(0,1fr) para o chip longo não esticar a coluna); chips com reticências */
.cs-mech{grid-template-columns:minmax(0,1fr)}
.cs-chip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-chip .ph{margin-right:var(--space-8);vertical-align:-0.12em}
/* 5 · Antes → depois: empilhado, mantendo o contraste de superfície (Antes básico, Depois claro) */
.cs-ad{gap:var(--space-16)}
/* 6 · Impactos: coluna única com régua de topo em cada um, para seguirem lidos como blocos distintos */
.cs-impactos{gap:var(--space-32);margin-top:var(--space-16)}
.cs-impactos>div{border-top:var(--border-width-base) solid var(--color-line-grid);padding-top:var(--space-16)}
/* 7 · 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){
.cs-hero .hero-bg img{filter:blur(8px)}
.cs-hero{--veil-mid:58%;--veil-end:100%}
}