/* ═══ RESPONSIVO DA HOME — piloto do estudo 1440/834/390. O desktop (>1000) é o controle
   aprovado e fica INTOCADO: tudo aqui vive em media query. Carregado só pelas duas Homes
   (PT e EN), DEPOIS do estilo da página — overrides por ordem, sem !important. ═══ */

/* ── 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)}
.sol,.pq3,#contato.cta3{min-height:0}
/* régua tipográfica: degraus fixos por corte (o clamp fluido resolvia 53,4 no hero) */
/* MEDIDA DO H1 (estudo Home, tablet): 52px na largura útil — o 64 anterior ultrapassava a régua */
.d-hero{font-size:52px;line-height:1.05}
.d-h2{font-size:44px;line-height:1.1}
.d-h2 br{display:none}
.pilar-h h3{font-size:32px}
.pilar-num{font-size:96px}
.case-num{font-size:40px}
/* hero: conteúdo ancorado na base · recorte retrato próprio (82%·28%) · véu sobe da base */
.hero{justify-content:flex-end}
.hero-in{min-height:0;align-content:end;padding-block:var(--mx-header-space) var(--space-64);row-gap:var(--space-24)}
.hero-img{object-position:82% 28%}
.hero-veil{background:linear-gradient(0deg, var(--color-blue-900) 0%, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) 30%, transparent 62%)}
.hero-veil2{background:none}
.hero-scroll{display:none}
/* soluções: pilares empilhados, ofertas do pilar em 2 colunas */
.pilares{grid-template-columns:1fr;gap:var(--space-48)}
.pilar-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-32) var(--mx-gutter)}
.jornada{grid-template-columns:1fr 1fr;row-gap:var(--space-24)}
.jornada .type-eyebrow{grid-column:1/-1}
.jornada .oferta{grid-column:auto}
/* logos: régua de área ×0,75 (zoom preserva o loop) · máscara 64 */
.logos{padding-block:var(--space-64) var(--space-80)}
.logos-in>.wrap{margin-bottom:var(--space-32)}
.logos-row{zoom:.75}
.logos-view{-webkit-mask-image:linear-gradient(90deg,transparent,var(--color-neutral-1000) var(--space-64),var(--color-neutral-1000) calc(100% - var(--space-64)),transparent);mask-image:linear-gradient(90deg,transparent,var(--color-neutral-1000) var(--space-64),var(--color-neutral-1000) calc(100% - var(--space-64)),transparent)}
/* indústrias: faixa de rolagem horizontal — card IDÊNTICO ao do desktop (texto sobre a
   imagem, mesmo gradiente, sem painel). Largura = span 5 fluido (313px em 834); o 3º card
   entra cortado pela borda direita (~136px) como sinal de rolagem. */
.inds{display:flex;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}
.inds::-webkit-scrollbar{display:none}
/* card idêntico ao desktop MENOS o descritivo: setor + título + link (texto de apoio só no desktop) */
.ind-card p{display:none}
.ind-card{flex:0 0 calc((100vw - 13*var(--mx-gutter))*5/12 + 4*var(--mx-gutter));scroll-snap-align:start}
#industrias.inds-sec{padding-block:var(--space-96) var(--space-48)}
.cases3{padding-block:var(--space-48) var(--space-96)}
.inds-head{margin-bottom:var(--space-48)}
/* cases: cards 280 · setinhas caem para a linha do CTA (sem espaço ao lado do título) */
.kpi{flex-basis:280px}
#cases .cases-top .carrossel-nav{display:none}
.kpi-view{gap:var(--space-64)}
.cases-actions{display:flex;align-items:center;gap:var(--space-8)}
.cases-actions .cnav-m{display:flex;order:2}
.cases-actions .btn{order:1;margin-right:auto}
/* por que: 2×2 com régua superior e linha de partida comum (subgrid) */
.pq-grid{grid-template-columns:1fr 1fr;row-gap:var(--space-48)}
.pq-item{grid-column:auto}
/* CTA final: sem piso de altura no tablet */
#contato.cta3{min-height:0}
}

/* ── CELULAR (≤768) · refina o MVP: hero cinematográfico + régua do corte 390 ── */
@media (max-width:768px){
.d-hero{font-size:clamp(40px,13.4vw,52px);line-height:1.05}
.d-h2{font-size:clamp(34px,10.3vw,40px)}
.pilar-h h3{font-size:24px}
/* HERO: abertura de 1 tela (100svh, unidade estável) + percurso extra. A imagem fica presa
   por translateY em fração do scroll (01-home.js) — NUNCA background-attachment:fixed
   (quebra no Safari iOS). Desfoque e escurecimento por filter/opacity NA PRÓPRIA CAMADA
   da imagem (raio contido a 10px) — nunca backdrop-filter em área grande. */
.hero{--hero-extra:calc(3*var(--space-96));min-height:0;height:calc(100svh + var(--hero-extra))}
.hero-media{top:0;height:100svh}
.hero-img{object-position:81% 50%;filter:blur(calc(var(--hp,0)*10px))}
.hero-veil{inset:auto;top:0;left:0;right:0;height:100svh;background:linear-gradient(0deg, var(--color-blue-900) 0%, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) 30%, transparent 64%)}
.hero-veil2{inset:auto;top:0;left:0;right:0;height:100svh;background:var(--color-blue-900);opacity:calc(var(--hp,0)*.8)}
.hero-in{row-gap:var(--space-16)}
.hero-copy{gap:var(--space-16)}
/* jornada em 1 coluna de verdade (os spans herdados criavam trilhas implícitas) */
.jornada .type-eyebrow{grid-column:1/-1}
.jornada .oferta{grid-column:auto}
.pq-item{grid-column:auto}
/* logos ×0,75 · máscara 48 */
.logos{padding-block:var(--space-48) var(--space-64)}
.logos-in>.wrap{margin-bottom:var(--space-24)}
.logos-row{zoom:.75}
.logos-view{-webkit-mask-image:linear-gradient(90deg,transparent,var(--color-neutral-1000) var(--space-48),var(--color-neutral-1000) calc(100% - var(--space-48)),transparent);mask-image:linear-gradient(90deg,transparent,var(--color-neutral-1000) var(--space-48),var(--color-neutral-1000) calc(100% - var(--space-48)),transparent)}
/* indústrias empilhadas: parágrafo do setor recolhido — benefício + link carregam a decisão */
.ind-card{grid-column:auto}
.ind-card p{display:none}
#industrias.inds-sec{padding-block:var(--space-64) var(--space-32)}
.cases3{padding-block:var(--space-32) var(--space-64)}
.inds-head{margin-bottom:var(--space-40)}
.sol-actions .btn{width:100%}
/* CTA final: piso de UMA TELA só no celular (unidade estável) */
#contato.cta3{min-height:100svh}
#contato .cta-in h2{font-size:32px;line-height:1.2}
}
/* movimento reduzido: sem parallax e sem transição — o hero abre direto no estado final,
   já escurecido e estático (o JS não arma o pin quando reduce está ativo) */
@media (max-width:768px) and (prefers-reduced-motion:reduce){
.hero{height:auto;min-height:100svh;--hp:1}
}