/* ═══ CONTRATO RESPONSIVO — camada de CONFORMIDADE (CONTRATO-RESPONSIVO.md · verificador
   notas/qa-contrato.html). Carregada por ÚLTIMO em todas as páginas do site, PT e EN: cada regra
   aqui existe porque o verificador mediu uma divergência entre o contrato e o construído, e o
   contrato ganha do construído. Só media query e seletores do contrato; nada removido — o que sai
   de vista sai por ocultação. Escala: 4·8·12·16·24·32·40·48·64·96 (140 = 96+40+4 é valor do
   contrato, não da escala — registrado). ═══ */

/* ── 0 · GERAIS ─────────────────────────────────────────────────────────── */
/* CAIXA DA IMAGEM DO HERO = caixa do hero (prancha de Heroes: 1440×900 · 834×1194 · 390×844).
   site.css sangrava 90px em cima e embaixo para o parallax — a caixa ficava 180px mais alta e,
   com object-fit:cover, a foto escalava a mais e o enquadramento fechava em toda largura. A
   sangria sai; o parallax (que já não arma no celular) passa a deslocar dentro do recorte do
   próprio hero. Vale nas três larguras, desktop incluído. */
.hero-sec .hero-bg,.hero .hero-bg,.hero .hero-media{top:0;height:100%}
/* no celular o hero é 1 tela + cauda, mas a IMAGEM é UMA tela (390×844): a caixa fica em 100svh */
@media (max-width:768px){.hero-sec .hero-bg,.hero .hero-bg,.hero .hero-media{top:0;height:100svh}}
/* Contato em 834: o formulário vira SEÇÃO abaixo do hero (faixa própria), mas o markup ainda o
   deixa dentro do .ct-hero — o hero cresce até 2328px e a imagem esticava junto. A imagem (e o
   véu, que é ::after dela) fica em UMA tela, como a prancha (834×1194); abaixo, o fundo do tema
   e a faixa do formulário. */
@media (max-width:1000px) and (min-width:769px){.ct-hero .hero-bg{top:0;height:100svh}}
/* CTA final: nenhuma altura mínima em 1440/834 (piso de UMA tela é só do celular) */
.cta,.cta.cta3,#contato.cta{min-height:0}
@media (max-width:768px){.cta,.cta.cta3,#contato.cta{min-height:100svh}}
/* o bleed das faixas (50% − 50vw) inclui a barra de rolagem em qualquer largura: sem o clip, o
   desktop ganha 8px de rolagem horizontal (medido no Contato) */
html,body{overflow-x:clip}
/* H2 do CTA final: entrelinha 1.2 nas três; 32px em 834 e 390 */
.cta-in h2{line-height:1.2}
@media (max-width:1000px){.cta-in h2{font-size:32px;line-height:1.2}}
/* H2 de seção: entrelinha 1.15 nas três (o 1.2 do celular saiu) */
@media (max-width:768px){.sec .sec-head h2:not(.d-h2),.sec-head h2.type-h1{line-height:1.15}}
/* Lead de seção: 20px em 834 (18 é só do celular) */
@media (max-width:1000px) and (min-width:769px){.sec .sec-sub{font-size:20px;line-height:1.4}}
/* Botão médio (Limpar filtros, Conhecer a oferta): 40 · 40 · 48 full-width */
@media (max-width:768px){.btn.btn-md{height:var(--size-xl);line-height:1.5;width:100%}}
/* Véu de baixo (834/390): parada densa 34%, fim da transparência 72% — inclusive no estado
   inicial da transição do celular (os motores levam 72→100 na rolagem) */
@media (max-width:768px){
.of-hero .hero-bg::after,.ind-hero .hero-bg::after,.ch-hero .hero-bg::after,.sb-hero .hero-bg::after,.hub-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,72%))}
.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,34%), transparent var(--veil-end,72%))}
.ct-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,72%))}
.hero-veil{background:linear-gradient(0deg, var(--color-blue-900) 0%, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) 34%, transparent 72%)}
}
@media (max-width:1000px) and (min-width:769px){.hero-veil{background:linear-gradient(0deg, var(--color-blue-900) 0%, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) 34%, transparent 72%)}}
/* Véu lateral do desktop: 80% até 26%, transparente a 72% (90% só em Hub de Soluções e Solução) */
@media (min-width:1001px){
.ind-hero .hero-bg::after,.ch-hero .hero-bg::after,.sb-hero .hero-bg::after{background:linear-gradient(90deg, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) 26%, transparent 72%)}
/* Contato (prancha revisada): véu de BAIXO também no desktop — 0deg, denso até 34%, transparente a
   partir de 72%; a foto volta a aparecer no terço superior. Formulário à ESQUERDA, copy à direita
   (ordem do markup), as duas colunas alinhadas pela BASE do formulário. */
.ct-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%)}
.ct-hero-grid{align-items:end!important}
.ct-copy{justify-content:flex-end}
@media (min-width:1001px){
.ct-hero>.hero-body{padding-block:var(--space-24) var(--space-64)}
.ct-form-col{gap:var(--space-12)}
.ct-form{padding:var(--space-24)!important;gap:var(--space-12)}
.fld textarea{height:80px;min-height:80px}
}
}

/* ── 1 · HOME ────────────────────────────────────────────────────────────── */
@media (min-width:1001px){h1.d-hero{font-size:92px;line-height:1.02;max-width:800px}}
@media (max-width:1000px) and (min-width:769px){h1.d-hero{font-size:64px;line-height:1.04;max-width:720px}}
@media (max-width:768px){.sec-head h2.d-h2{line-height:1.1}}
/* H3 do card de indústria (Home): 32/1.2 · 32/1.2 · 24/1.2 */
.inds-sec:not(.sec) .ind-card h3{font-size:32px;line-height:1.2}
@media (max-width:768px){.inds-sec:not(.sec) .ind-card h3{font-size:24px;line-height:1.2}}
/* cards de case (trilho): 300 · 280 · 304 */
.kpi-row .kpi{box-sizing:border-box}
@media (min-width:1001px){.kpi-row .kpi{flex:0 0 300px}}
@media (max-width:1000px) and (min-width:769px){.kpi-row .kpi{flex:0 0 280px}}
@media (max-width:768px){.kpi-row .kpi{flex:0 0 304px}}
/* card de indústria na faixa do tablet: 313px (Home e Hub) */
@media (max-width:1000px) and (min-width:769px){.inds .ind-card{flex:0 0 313px}}

/* ── 2 · HUB DE SOLUÇÕES ─────────────────────────────────────────────────── */
/* 834: bloco (copy + provas) ancorado a 48 da base — o recuo de 96 saiu */
@media (max-width:1000px) and (min-width:769px){.hub-hero>.hero-body{padding-block:var(--space-48)}}
.case-grid .case-num{font-size:40px;line-height:1.05}
@media (max-width:1000px) and (min-width:769px){.hub-hero .hero-bg img{object-position:59% 50%}.case-grid .case-card{flex:0 0 339px;width:339px;box-sizing:border-box}}

/* ── 3 · SOLUÇÃO ─────────────────────────────────────────────────────────── */
.case-grid-of .case-num,.case-wide .case-num{font-size:40px;line-height:1.05}

/* ── 4 · CASE ────────────────────────────────────────────────────────────── */
@media (min-width:1001px){.cs-h1{max-width:800px}#desafio.sec{padding-top:var(--space-section-v)}}
@media (max-width:1000px) and (min-width:769px){#desafio.sec{padding-top:var(--space-96)}}
@media (max-width:768px){#desafio.sec{padding-top:var(--space-64)}}

/* ── 5 · INDÚSTRIA ───────────────────────────────────────────────────────── */
.ind-copy h1{font-weight:800;line-height:1.05}
.atua-grid .pilar-h h3{line-height:1.2}
.ind-hero-row .prova small{font-weight:600}
.strip .case-num{font-size:40px;line-height:1.05}
.dec-of{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip{display:flex;gap:var(--mx-gutter);overflow-x:auto;scrollbar-width:none}
.strip .case-card{flex:0 0 320px;width:320px;box-sizing:border-box;min-width:0}
@media (max-width:1000px) and (min-width:769px){#agro.ind-hero .hero-bg img{object-position:74% 50%}}
/* Home 834: pilares empilhados com as ofertas em 2 colunas (gap 24) */
@media (max-width:1000px) and (min-width:769px){.sol .pilar-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24)}}

/* ── 6 · HUB DE CASES ────────────────────────────────────────────────────── */
.ch-in h1{font-weight:800;line-height:1.05}
@media (min-width:1001px){#todos.sec{padding-top:var(--space-section-v)}}
@media (max-width:1000px) and (min-width:769px){#todos.sec{padding-top:var(--space-96)}}

/* ── 7 · SOBRE ───────────────────────────────────────────────────────────── */
.sb-hero-in h1{font-weight:800;line-height:1.05}
.lid-front h3,.lid-row .ind-card h3{line-height:1.25}
#lideranca .carrossel-nav{display:none}
.valores .como-step{align-items:baseline}

/* ── 8 · CONTATO ─────────────────────────────────────────────────────────── */
.ct-copy h1{font-weight:800;line-height:1.05}
.ct-copy .ct-desvio{font-size:14px;line-height:1.5}
.fld input,.fld select{height:var(--size-xl)}
.fld input,.fld select,.fld textarea{scroll-margin-top:var(--space-96)}
/* FAIXA DE LOGOS: nenhuma altura por CSS. A régua h = peso·√(K/aspecto) vive em _shared/logos.js
   (componente <mx-logos>) — uma regra de "40px" aqui achatou a proporção e virou o Richemont um
   trem (incidente registrado em notas/REGRA-LOGOS.md). O vão da faixa é o do componente (64). */
@media (min-width:1001px){.ct-copy h1{max-width:592px}.ct-hero .hero-bg img{object-position:62% 30%}}
/* 834: a copy fecha a 48 da faixa do formulário (a faixa é a "seção própria após o hero") */
@media (max-width:1000px) and (min-width:769px){.ct-form-col{margin-inline:calc(-1*var(--mx-gutter-safe))}.ct-hero-grid{gap:var(--space-48)}}

/* ── 9 · PRIVACIDADE ─────────────────────────────────────────────────────── */
.pv-hero h1{font-weight:800;line-height:1.05}
@media (min-width:1001px){.pv-corpo .wrap{max-width:760px}}
@media (max-width:1000px){.pv-hero{padding-top:calc(var(--space-96) + var(--space-40) + var(--space-4))}}