/* ═══ RESPONSIVO DO SOBRE — estudo pág. 7 (1440/834/390). O desktop (>1000) é o controle
   aprovado e fica INTOCADO: tudo aqui vive em media query. Carregado só pelo Sobre, DEPOIS do
   estilo da página. Cabeçalho e rodapé são do chrome. Blocos com is-oculto seguem ocultos —
   nada removido, nada reexibido. ═══ */

/* ── 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 segue em 20 · H3, título do valor (500/24) e linha de
   entidade não descem */
.sb-hero-in h1{font-size:44px;line-height:1.05}
/* MEDIDA DO H1 (estudo): tablet 560px a 44px — nenhum título passa da medida */
.sb-hero-in h1{max-width:560px}
.sec-head h2{font-size:32px;line-height:1.15}
.sec-sub{font-size:18px}
.sec-head{max-width:none}
/* 1 · Hero de entidade: recorte 64%·50% (medido no Inspect) · véu de baixo para cima ·
   os quatro elementos (kicker, H1 com os accents, lead, linha de entidade) preservados ·
   bloco ancorado a 48 da base */
/* 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. */
.sb-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%)}
.sb-hero>.hero-body{justify-content:flex-end;padding-block:var(--space-48)}
/* 2 · Liderança: faixa rolável com card de 340px e setas visíveis — comportamento ≤1000 já
   construído; nada a mudar aqui */
/* 3 · Propósito · Visão · Missão: as 3 colunas SE MANTÊM (≈246px) justamente para a régua de
   topo dos textos continuar valendo */
.vmv .inds{grid-template-columns:repeat(3,minmax(0,1fr))}
.vmv .inds .ind-card{grid-column:auto}
/* 4 · Os cinco valores: lista vertical com ícone em coluna própria e alinhamento por linha de
   base — herdado, igual nas três larguras */
}

/* ── 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 */
.sb-hero-in h1{font-size:40px;line-height:1.05}
.sec-head h2{font-size:32px;line-height:1.15}
.sec-sub,.sb-hero-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 kicker + H1 a 48 da base; lead e linha de entidade entram na
   1ª rolagem, no MESMO bloco. Accents do H1 preservados. Geometria: 1 tela + cauda − 24,
   bloco a 24 da base (hero-abertura.js mede a cauda em --fold-tail). */
/* 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. */
.sb-hero{min-height:calc(100svh + var(--fold-tail, 0px));background:var(--color-theme-background)}
.sb-hero .hero-bg{top:0;height:100svh}
/* recorte 62%·50% — 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% */
.sb-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%))}
.sb-hero>.hero-body{justify-content:flex-end;padding-block:0 var(--space-48)}
/* 2 · Liderança — CAMINHO B (escolhido no estudo): os cinco líderes EMPILHADOS, sem
   carrossel, sem setas e sem gesto; card de largura cheia e 620px de altura para o texto não
   cobrir o rosto. O verso (biografia) segue no flip do próprio card. */
.lid-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);overflow:visible;margin-right:0;padding-right:0;padding-bottom:0}
.lid-row .lid-flip,.lid-row .ind-card{flex:none;width:auto;scroll-snap-align:none}
.lid-row .lid-flip .ind-card{width:100%}
.lid-row .ind-card{height:620px;min-height:0;aspect-ratio:auto}
#lideranca .carrossel-nav{display:none}
/* 3 · Propósito · Visão · Missão: empilha — e aí a régua perde função (três cards em
   sequência não compartilham linha nenhuma): altura fixa de 420px em vez da proporção 3/4 e
   bloco de texto de volta à altura natural. O height do parágrafo é posto em ESTILO INLINE
   pelo script da régua, então só !important o desliga sem tocar no script. */
.vmv .inds{grid-template-columns:minmax(0,1fr);gap:var(--space-24)}
.vmv .inds .ind-card{grid-column:auto;height:420px;min-height:0;aspect-ratio:auto}
.vmv .inds .ind-body p{height:auto!important}
/* 4 · Os cinco valores: lista vertical preservada, com ícone e a PRIMEIRA linha do título na
   mesma linha de base mesmo quando o título quebra em duas linhas */
}
/* movimento reduzido: sem percurso — a abertura já entrega o estado final do quadro 3 */
@media (max-width:768px) and (prefers-reduced-motion:reduce){
.sb-hero .hero-bg img{filter:blur(8px)}
.sb-hero{--veil-mid:62%;--veil-end:100%}
}