/* ═══ RESPONSIVO DO HUB DE SOLUÇÕES — estudo pág. 2 (1440/834/390). O desktop é o controle
   e fica INTOCADO: tudo vive em media query. Carregado só pelas duas páginas do Hub (PT/EN),
   DEPOIS do estilo da página. Cabeçalho e rodapé são do chrome — nada deles aqui. ═══ */

/* ── TABLET (769–1000) · ritmo 96/48 · margens 24 · régua do corte 834 ── */
@media (max-width:1000px) and (min-width:769px){
/* MEDIDA DO H1 (estudo): tablet 560px a 44px — nenhum título passa da medida */
.hub-copy h1{max-width:560px}
: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 20→18 · H3/H4/corpo/números NÃO descem (densidade cai por coluna) */
.hub-copy h1{font-size:44px;line-height:1.12}
.sec-head h2,.cta-in h2{font-size:32px;line-height:1.15}
.sec-sub{font-size:18px}
/* hero: recorte deslocado à esquerda do desktop (62%·50%) — inclui o diagrama e a cabeça do
   colega até a orelha (~76% do quadro) · véu vertical de base · conteúdo ancorado na base
   com o recuo inferior padrão da seção (96) */
.hub-hero .hero-bg img{object-position:62% 50%}
.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) 34%, transparent 72%)}
.hub-hero>.hero-body{justify-content:flex-end;padding-block:var(--space-48) var(--space-96)}
.hub-hero-in{gap:var(--space-32)}
.hub-copy{gap:var(--space-16)}
/* portfólio: ofertas seguem em 2 colunas no tablet — o corte para 1 coluna é só do celular */
.of-grid{grid-template-columns:repeat(2,1fr)}
/* indústrias: componente único (Home ≡ Hub) — faixa de rolagem com card inteiro,
   span 5 (313px em 834), gap 24, 3º card cortado ~136px; p do setor: só no desktop */
.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}
.ind-card{flex:0 0 calc((100vw - 13*var(--mx-gutter))*5/12 + 4*var(--mx-gutter));scroll-snap-align:start}
.ind-card p{display:none}
/* método E2E: MESMO carrossel (pista, clones, JS) — só o flex-basis muda: 3 etapas
   inteiras + a 4ª cortada pela borda (≈3,5 por vista); contador aparece */
.meth-viewport{margin-right:calc(50% - 50vw)}
.meth-track .mstep{flex-basis:calc((100% - 3*var(--mx-gutter))/3.5)}
.meth-count{display:inline}
/* cases: faixa de rolagem — card ≈82% do desktop (2,25 por vista, 3º cortado ~85px) */
.case-grid{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}
.case-grid::-webkit-scrollbar{display:none}
.case-grid .case-card{flex:0 0 calc((100% - 2*var(--mx-gutter))/2.25);box-sizing:border-box;scroll-snap-align:start}
/* CTA final: sem piso de altura no tablet */
#contato.cta3{min-height:0}
}

/* ── CELULAR (≤768) · ritmo 64/40 (base do site) · régua do corte 390 ── */
@media (max-width:768px){
.hub-copy h1{font-size:clamp(34px,10.3vw,40px);line-height:1.1}
.sec-head h2,.cta-in h2{font-size:32px;line-height:1.2}
.sec-sub,.hub-copy p{font-size:18px}
/* HERO — TRANSIÇÃO DA ABERTURA, a MESMA das outras famílias (hero-abertura.js): rolagem
   NORMAL sobre imagem CONGELADA; abertura com kicker + H1 ancorados a 48 da base; lead e CTAs
   entram na 1ª rolagem no MESMO bloco, subindo junto; imagem escurece (véu 34%→62% / 66%→100%)
   e desfoca 0→8px por filter na própria camada. Geometria: hero = 1 tela + cauda − 24, bloco a
   24 da base; a cauda (do fim do H1 ao fim do bloco) é medida no render em --fold-tail. */
.hub-hero{min-height:0;background:var(--color-theme-background)}
.hub-hero .hero-bg{top:0;height:100svh}
/* recorte 55%·50% — valor MEDIDO pelo Well no Inspect; não recalcular */
.hub-hero .hero-bg img{object-position:55% 50%}
.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,66%))}
/* a caixa da abertura é a da COPY (as provas vêm depois, no mesmo hero): fecha com o H1 a 48 da
   base na abertura — altura = 1 tela − 48 + cauda − topo do bloco (as duas medidas vêm do motor) */
.hub-hero>.hero-body{justify-content:flex-start;min-height:0;padding-block:0}
.hub-copy{display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box;padding-bottom:0;min-height:calc(100svh - var(--space-48) + var(--fold-tail,0px) - var(--fold-top,var(--mx-header-space)))}
.hub-hero-in{gap:var(--space-24)}
.hub-copy{gap:var(--space-16)}
.hub-cta{flex-wrap:wrap;margin-top:var(--space-8)}
/* stats+provas: FAIXA PRÓPRIA após o percurso (proposta C do estudo) — saem da tela de
   abertura; o fundo navy do tema sustenta a faixa (stats seguem ocultos por decisão editorial) */
.provas{grid-template-columns:1fr;gap:var(--space-16);margin-top:var(--space-24)}
.stats{grid-template-columns:1fr}
/* indústrias empilhadas em coluna única; p do setor segue a regra do componente (só desktop) */
.inds{grid-template-columns:1fr}
.ind-card{grid-column:auto}
.ind-card p{display:none}
/* desafios em coluna única compacta (decisão editorial A segue pendente) */
.d-grid{grid-template-columns:1fr;gap:var(--space-16)}
/* método: ~1,1 etapa por vista, a próxima espiando pela borda; contador visível */
.meth-viewport{margin-right:calc(50% - 50vw)}
.meth-track .mstep{flex-basis:calc(88% - var(--mx-gutter))}
.meth-count{display:inline}
/* cases empilhados (grade 1 coluna herdada) — largura de botão vem da regra geral do site */
/* 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 */
@media (max-width:768px) and (prefers-reduced-motion:reduce){
.hub-hero .hero-bg img{filter:blur(8px)}
.hub-hero{--veil-mid:62%;--veil-end:100%}
}