/* ═══ RESPONSIVO DA PÁGINA DE INDÚSTRIA — estudo pág. 5 (1440/834/390). O desktop (>1000) é o
   controle aprovado e fica INTOCADO: tudo aqui vive em media query. Carregado só pela página
   de indústria que já recebeu a propagação, DEPOIS do estilo dela. Cabeçalho e rodapé são do
   chrome: nada deles aqui. Nada removido — blocos com is-oculto seguem ocultos. ═══ */

/* ── 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 44→32 · lead de seção 20→18 · H3 do pilar, exemplos e nº de case não descem */
.ind-copy h1{font-size:44px;line-height:1.05}
/* MEDIDA DO H1 (estudo): tablet 560px a 44px — nenhum título passa da medida */
.ind-copy h1{max-width:560px}
.sec-head h2,.cta-in h2{font-size:32px;line-height:1.15}
.sec-sub{font-size:18px}
.sec-head{max-width:none}
/* 1 · Hero: recorte 74%·50% (só X importa — a foto é 2,4:1 e em retrato a altura preenche) ·
   véu de baixo para cima · bloco ancorado a 48 da base. A linha de ação embrulha em duas
   linhas (CTAs / prova) e o divisor sai junto com a quebra. */
/* 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. */
.ind-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%)}
.ind-hero>.hero-body{justify-content:flex-end;padding-block:var(--space-48)}
.ind-hero-row{gap:var(--space-24) var(--space-16)}
.ind-hero-row .hero-divider{display:none}
.ind-hero-row>.prova{flex:0 0 100%}
/* 2 · Atuação end-to-end: faixa de rolagem em vez de três colunas espremidas — pilar 300px,
   vão 24, o 3º cortado pela borda (~162px visíveis). Os exemplos seguem em coluna dentro do
   pilar (é isso que impede a leitura de "seis cards"). */
.atua-grid{display:flex;grid-template-columns:none;gap:var(--mx-gutter);overflow-x:auto;margin-right:calc(50% - 50vw);padding-right:var(--mx-gutter-safe);padding-bottom:var(--space-8);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.atua-grid::-webkit-scrollbar{display:none}
.atua-grid .pilar{flex:0 0 300px;scroll-snap-align:start}
/* 3 · Prioridades do negócio: 2×2 mantido (≈381px) */
.dec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* chip de oferta: hug, largura máxima 100%, reticências, sem quebra (seta antes do rótulo) */
.dec-of{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 4 · Cases do setor: faixa rolável com card de 320px (border-box) — 2,3 cards por vista; a faixa
   sangra até a borda direita como no estudo */
.strip{display:flex;gap:var(--mx-gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*var(--mx-gutter-safe));padding-inline:var(--mx-gutter-safe)}
.strip::-webkit-scrollbar{display:none}
.strip .case-card{flex:0 0 320px;width:320px;box-sizing:border-box;min-width:0;scroll-snap-align:start}
/* 5 · CTA final: piso de tela é SÓ do celular */
#contato.cta{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 32 · lead 18 */
.ind-copy h1{font-size:40px;line-height:1.05}
.sec-head h2,.cta-in h2{font-size:32px;line-height:1.2}
.sec-sub,.ind-copy 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 só o H1, ancorado a 48 da base; lead, CTAs e prova entram na
   1ª rolagem dentro do MESMO bloco. Geometria: hero = 1 tela + cauda (do fim do H1 ao fim do
   bloco) − 24, com o bloco a 24 da base; a cauda é medida por hero-abertura.js
   (--fold-tail) e o padrão devolve 1 tela com tudo visível (estado do quadro 3). */
/* 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. */
.ind-hero{min-height:calc(100svh + var(--fold-tail, 0px));background:var(--color-theme-background)}
.ind-hero .hero-bg{top:0;height:100svh}
/* recorte 78%·50% — recorte fechado, 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% */
.ind-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%))}
.ind-hero>.hero-body{justify-content:flex-end;padding-block:0 var(--space-48)}
/* CTAs full-width empilhados (regra geral) e a prova como bloco próprio, sem divisor —
   o divisor só existe no estado lado a lado. Vãos: 12 entre os botões, 24 antes da prova. */
.ind-hero-row{flex-direction:column;align-items:stretch;gap:var(--space-12);margin-top:0}
.ind-hero-row .hero-divider{display:none}
.ind-hero-row>.prova{margin-top:var(--space-12)}
/* 2 · Atuação end-to-end: os três pilares em sequência, cada um com régua laranja de topo
   para o agrupamento sobreviver ao empilhamento; exemplos seguem em coluna */
.atua-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-40)}
.atua-grid .pilar{min-width:0;border-top:var(--border-width-base) solid var(--color-text-highlight);padding-top:var(--space-16)}
/* 3 · Prioridades do negócio: coluna única */
.dec-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-16)}
.dec-of{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 4 · Cases do setor: faixa rolável — 1 card de 320px e 22px do próximo espiando; as setas saem do
   cabeçalho e descem para UMA DE CADA LADO do CTA, na mesma linha; o CTA ocupa o espaço entre
   elas (exceção da regra de full-width). Setas só existem quando há mais itens do que cabe. */
.strip{display:flex;gap:var(--mx-gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*var(--mx-gutter-safe));padding-inline:var(--mx-gutter-safe);-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip .case-card{flex:0 0 320px;width:320px;box-sizing:border-box;min-width:0;scroll-snap-align:start}
.strip-head .strip-nav{display:none}
.strip-actions{display:flex;align-items:center;gap:var(--space-12)}
.strip-actions .cnav-m{display:flex}
.strip-actions .btn{flex:1;min-width:0;width:auto}
.strip-actions.sem-rolagem .cnav-m{display:none}
/* 5 · CTA final: piso de UMA TELA só no celular */
#contato.cta{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){
.ind-hero .hero-bg img{filter:blur(8px)}
.ind-hero{--veil-mid:62%;--veil-end:100%}
}