/* ═══ RESPONSIVO DO CONTATO — estudo pág. 8 (1440/834/390). O desktop (>1000) é o controle
   aprovado e fica INTOCADO — segue a tela única de duas colunas com o formulário dominante à
   direita. Tudo aqui vive em media query. Carregado só pelo Contato, DEPOIS do estilo da
   página. Cabeçalho e rodapé são do chrome. Nada removido. ═══ */

/* ── TABLET (769–1000) · 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,.ct-form-sec{min-height:0;padding:var(--space-96) 0}
/* régua: H1 60→44 · H2 do formulário segue em 24 · subtítulo 18 · campo 16 em toda largura
   (abaixo disso o iOS dá zoom ao focar) */
.ct-copy h1{font-size:44px;line-height:1.05}
/* MEDIDA DO H1 (estudo): tablet 560px a 44px — nenhum título passa da medida */
.ct-copy h1{max-width:560px}
/* 1 · Duas colunas → uma, com a COPY ANTES do formulário (contexto primeiro) */
.ct-hero-grid{display:flex;flex-direction:column;gap:var(--space-32);align-items:stretch!important}
.ct-copy{order:-1}
/* 1 · Hero mais baixo: só copy, canais e desvio. A foto ganha enquadramento próprio
   (70%·50%, medido) e a camada de imagem passa a cobrir UMA tela — a sangria do parallax
   continua nos dois lados para o deslocamento não descobrir borda. Véu de baixo para cima. */
.ct-hero{min-height:0}
.ct-hero .hero-bg{top:calc(-1*var(--parallax-max-bg));height:calc(100svh + 2*var(--parallax-max-bg))}
/* 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. */
.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>.hero-body{padding-block:var(--space-24) var(--space-48)}
/* a caixa da copy fecha EXATAMENTE numa tela: altura = 1 tela − topo do bloco (reserva do
   cabeçalho + linha do breadcrumb) − o vão de 32 até a faixa − o recuo inferior de 48 do
   corpo do hero. Assim a última linha da copy para a ~80 da base da 1ª tela e a faixa do
   formulário começa na dobra. */
.ct-copy{box-sizing:border-box;justify-content:flex-end;min-height:calc(100svh - var(--mx-header-space) - var(--space-32) - var(--space-32) - var(--space-48))}
/* 1b · O formulário deixa de viver dentro do hero e vira SEÇÃO logo abaixo dele: fundo
   neutro-25 de fora a fora, sem moldura — não é card, é seção; os campos assentam direto no
   fundo. O recuo interno do card (48, em estilo inline no HTML) sai e vira recuo da faixa. */
.ct-form-col{margin-inline:calc(50% - 50vw);padding:var(--space-64) var(--mx-gutter-safe);background:var(--color-neutral-25)}
.ct-form{padding:0!important;background:none;border:0;box-shadow:none;border-radius:0}
/* a faixa é SUPERFÍCIE CLARA dentro de um hero de tema secundário: sem a moldura do card, os papéis
   de texto do tema (brancos) vazavam para o fundo neutro-25 — o título saía branco sobre claro.
   Os papéis passam a ser os do modelo Claro do DS, como o card fazia. */
.ct-form-col{--color-text-title:var(--surface-model-light-text);--color-text-body:var(--surface-model-light-secondary);--surface-secondary:var(--surface-model-light-secondary);color:var(--surface-model-light-text)}
.ct-form-col h2{color:var(--surface-model-light-text)}

/* 2 · Os pares de campo viram uma coluna (é o que estica a caixa) · alvo de 48px por campo */
.ct-row{grid-template-columns:minmax(0,1fr)}
.fld input,.fld select{height:var(--size-xl)}
}

/* ── CELULAR (≤768) · margens 24 · régua do corte 390 ── */
@media (max-width:768px){
/* régua: H1 40 (o construído usava clamp 48→60) · subtítulo 18 · campo 16 */
.ct-copy h1{font-size:40px;line-height:1.05}
/* 1 · HERO — TRANSIÇÃO DA ABERTURA (prancha do estudo): rolagem NORMAL sobre imagem
   CONGELADA. A abertura mostra kicker + H1 a 48 da base; subtítulo, canais e a linha de
   desvio entram na 1ª rolagem, no MESMO bloco; o formulário começa imediatamente depois.
   Como o formulário é irmão da copy dentro do hero, a caixa de UMA TELA é a da própria copy:
   altura = 1 tela + cauda − distância do topo do hero ao bloco (as duas medidas vêm de
   hero-abertura.js). Sem JS ou com movimento reduzido a copy cabe na 1ª tela inteira. */
.ct-hero{min-height:0}
.ct-hero .hero-bg{top:0;height:100svh}
/* recorte 73%·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 40%→66% e fim da transparência 80%→100% (esta página tem o véu mais
   fechado das internas) */
.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,40%), transparent var(--veil-end,80%))}
.ct-hero>.hero-body{padding-block:var(--space-24) 0}
.ct-copy{box-sizing:border-box;justify-content:flex-end;padding-bottom:var(--space-48);min-height:calc(100svh + var(--fold-tail, 0px) - var(--fold-top, var(--mx-header-space)))}
/* 1b · Formulário como seção abaixo do hero: faixa neutro-25 de fora a fora, sem moldura,
   recuo interno 24 nas laterais e 48 no bloco */
.ct-form-col{margin-inline:calc(-1*var(--mx-gutter-safe));padding:var(--space-48) var(--mx-gutter-safe);background:var(--color-neutral-25)}
.ct-form{padding:0!important;background:none;border:0;box-shadow:none;border-radius:0}
/* a faixa é SUPERFÍCIE CLARA dentro de um hero de tema secundário: sem a moldura do card, os papéis
   de texto do tema (brancos) vazavam para o fundo neutro-25 — o título saía branco sobre claro.
   Os papéis passam a ser os do modelo Claro do DS, como o card fazia. */
.ct-form-col{--color-text-title:var(--surface-model-light-text);--color-text-body:var(--surface-model-light-secondary);--surface-secondary:var(--surface-model-light-secondary);color:var(--surface-model-light-text)}
.ct-form-col h2{color:var(--surface-model-light-text)}

/* 2 · Pares de campo em coluna única · alvo de 48px por campo */
.ct-row{grid-template-columns:minmax(0,1fr)}
.fld input,.fld select{height:var(--size-xl)}
/* 4 · Teclado aberto: o campo focado precisa parar acima do teclado — reserva de 96 na
   rolagem. Nada de posicionamento fixo no rodapé do formulário (o teclado cobriria). */
.fld input,.fld select,.fld textarea{scroll-margin-top:var(--space-96)}
}
/* movimento reduzido: sem percurso — a abertura já entrega o estado final do quadro 3 */
@media (max-width:768px) and (prefers-reduced-motion:reduce){
.ct-hero .hero-bg img{filter:blur(8px)}
.ct-hero{--veil-mid:66%;--veil-end:100%}
}