/* ═══ RESPONSIVO DA PÁGINA DE SOLUÇÃO — estudo pág. 3 (1440/834/390). O desktop (>1000) é o
   controle aprovado e fica INTOCADO: tudo aqui vive em media query. Carregado só pela página
   de oferta que já recebeu a propagação, DEPOIS do estilo dela — overrides por ordem, sem
   !important. Cabeçalho e rodapé são do chrome: nada deles aqui. Nada removido: o que sai da
   tela sai por ocultação. ═══ */

/* ── 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)}
/* MEDIDA DO H1 (estudo): tablet 560px a 44px — nenhum título passa da medida */
.of-hero-in h1{max-width:560px}
/* régua: H1 60→44 · H2 44→32 · lead de seção 20→18 · H4/corpo/lead do hero NÃO descem */
.of-hero-in 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}
/* o título de seção usa a largura útil do corte (o span de texto continua governando o lead) */
.sec-head{max-width:none}
/* HERO · 1: recorte 73%·50% (grupo olha para a esquerda; a 3ª pessoa corta na borda de
   propósito) · véu de BASE, nunca lateral · bloco único 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. */
.of-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%)}
.of-hero>.hero-body{justify-content:flex-end;padding-block:var(--space-48)}
/* 2 · Quando vira prioridade: 3 colunas (3+2) → 2 colunas */
.prio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 3 · O que fazemos: 3 colunas (3+1) → 2×2 */
.muda-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 4 · Entregáveis: o card horizontal sobrevive inteiro em 2 colunas (≈381px cada) */
.ent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 5 · Como conduzimos: a lista de 7 passos já desce o texto para baixo do título (regra ≤1000
   do CSS da página) — nada a substituir aqui */
/* 6 · Por que Maxxi: 4 → 2×2, linha de partida das provas mantida pelo subgrid */
.pq-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-40) var(--space-24)}
/* 7 · Prova: o número do case volta ao degrau 40 (o clamp entrega 32 abaixo de 1100) */
.case-grid-of .case-num{font-size:40px}
/* 8 · Ofertas relacionadas: 3 colunas (3+1) → 2×2; o rótulo do botão é HUG com reticências
   (decisão de copy A segue pendente — o desenho mostra o rótulo inteiro, truncado) */
.stub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.stub{min-width:0}
.stub .btn{display:block;align-self:flex-start;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;line-height:38px;padding-block:0}
/* 9 · CTA final: piso de tela é SÓ do celular */
#contato.cta3{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 (seção, hero e CTA) */
.of-hero-in h1{font-size:40px;line-height:1.1}
.sec-head h2,.cta-in h2{font-size:32px;line-height:1.2}
.sec-sub,.of-hero-in p,.cta-in p{font-size:18px}
.sec-head{max-width:none}
/* HERO · 1 — TRANSIÇÃO DA ABERTURA (prancha do estudo, medidas conferidas no Inspect):
   rolagem NORMAL do documento sobre imagem CONGELADA. Abertura = kicker + H1 a 48 da base;
   apoio e CTAs entram na 1ª rolagem, no MESMO bloco. Geometria fechada: a altura do hero é
   uma tela + a cauda (do fim do H1 ao fim do bloco) − 24, com o bloco ancorado a 24 da base
   do hero — assim o H1 fecha a 48 do fim da 1ª tela na abertura e o bloco inteiro fica a 24
   da base no fim do percurso. A cauda é medida no render por oferta-fold.js (--fold-tail);
   sem JS ou com movimento reduzido o valor padrão devolve exatamente 1 tela com tudo visível
   (estado do quadro 3). Desfoque e escurecimento por filter NA CAMADA DA IMAGEM e por parada
   do véu — nunca backdrop-filter em área grande, nunca background-attachment:fixed. */
/* 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. */
.of-hero{min-height:calc(100svh + var(--fold-tail, 0px));background:var(--color-theme-background)}
.of-hero .hero-bg{top:0;height:100svh}
/* recorte 67%·50% — MEDIDO no Inspect pelo Well; 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 (de baixo para cima): parada densa 34%→62% e fim da transparência 66%→100% */
.of-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%))}
.of-hero>.hero-body{justify-content:flex-end;padding-block:0 var(--space-48)}
/* vãos do bloco: kicker → H1 → lead → CTAs 16 · entre os dois botões 12 */
.of-hero-in{gap:var(--space-16)}
.of-hero-row{flex-direction:column;align-items:stretch;gap:var(--space-12);margin-top:0}
/* 2 · Quando vira prioridade: coluna única (densidade segue como decisão editorial B) */
.prio-grid{grid-template-columns:minmax(0,1fr)}
/* 3 · O que fazemos: coluna única */
.muda-grid{grid-template-columns:minmax(0,1fr)}
/* 4 · Entregáveis: coluna única, intervalo 12 — o card horizontal (ícone + título) sobrevive */
.ent-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-12)}
/* 6 · Por que Maxxi: coluna única; o subgrid vira fluxo natural quando empilha */
.pq-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-40) var(--space-24)}
/* 7 · Prova: número do case no degrau 40; rodapé EMPILHADO — botão full-width, divisória some
   (regra do estado empilhado) e os selos seguem como prova INLINE, nunca cards */
.case-grid-of .case-num{font-size:40px}
.case-foot{flex-direction:column;align-items:stretch;gap:var(--space-24)}
.case-foot .btn{width:100%;flex:none}
.case-foot-div{display:none}
.provas-inline{flex-wrap:wrap;gap:var(--space-32)}
/* 8 · Ofertas relacionadas: coluna única; botão full-width com rótulo em reticências */
.stub-grid{grid-template-columns:minmax(0,1fr)}
.stub{min-width:0}
.stub .btn{display:block;width:100%;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;line-height:38px;padding-block:0}
/* 9 · 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 do quadro 3 */
@media (max-width:768px) and (prefers-reduced-motion:reduce){
.of-hero .hero-bg img{filter:blur(8px)}
.of-hero{--veil-mid:62%;--veil-end:100%}
}