/* ==========================================================================
   LP Vista Lago — Residencial Vista Lago / Assumpção Incorporadora
   Layout de referência: 1920x3274 px.
   Escala: unidades cqw sobre .pagina (container). 1 px de layout = 0.0520833cqw.
   ========================================================================== */

@font-face {
  font-family: "RF Dewi Extended";
  src: url("../fontes/rfdewi-extended-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "RF Dewi";
  src: url("../fontes/rfdewi-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "RF Dewi";
  src: url("../fontes/rfdewi-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "RF Dewi";
  src: url("../fontes/rfdewi-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --verde: #272F23;
  --creme: #F3E7D4;
  --ouro:  #C2A67F;
  --fonte-titulo: "RF Dewi Extended", "RF Dewi", system-ui, sans-serif;
  --fonte-texto:  "RF Dewi", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--verde);
  color: var(--creme);
  font-family: var(--fonte-texto);
  font-weight: 400;
}

img { display: block; max-width: 100%; height: auto; }

/* Qualquer `display` de autor vence o [hidden] da folha do browser, então o
   atributo precisa ser reafirmado aqui — sem isto, esconder o formulário
   depois do envio (form.hidden = true) não teria efeito nenhum. */
[hidden] { display: none !important; }

/* Container de escala. Tudo dentro usa cqw, que é 1% desta largura. */
.pagina {
  max-width: 1920px;
  margin-inline: auto;
  container-type: inline-size;
  /* Rede de segurança contra scroll horizontal. Isto torna .pagina um contêiner
     de rolagem, o que inviabiliza position:sticky aqui dentro — de propósito:
     o layout é uma coluna estática única, sem nenhum elemento sticky. */
  overflow-x: hidden;
}

/* Grão do fundo verde.
   O layout original tem ruído de LUMINÂNCIA no fundo (desvio ~3.1 por canal,
   correlação 1.000 entre canais) e o conteúdo por cima fica LIMPO — medido no
   PDF: o interior da pill creme tem desvio 1.52 contra 3.13 do fundo.
   Daí o ::before com z-index -1 (atrás do conteúdo, à frente do fundo) e o
   feColorMatrix saturate=0 (feTurbulence puro produz ruído colorido).

   color-interpolation-filters='sRGB' é OBRIGATÓRIO. O padrão do SVG é linearRGB,
   onde o cinza médio 0.5 vira ~0.735 em sRGB: o ruído nasce enviesado para o claro
   e, sob 'overlay' num fundo escuro, DESLOCA A COR DA MARCA. Medido na página
   renderizada: sem sRGB a média sobe de [39 47 35] para [40.7 48.9 36.5] e a
   correlação entre canais cai para 0.815. Com sRGB a média fica cravada em
   [39 47 35] em qualquer opacidade, com correlação 0.99.
   O feFuncA força o alfa opaco — sem ele o ruído do canal alfa reintroduz o viés.

   opacity 0.43 calibrada por medição: 0.40 dá desvio médio 2.89 e 0.45 dá 3.27;
   o alvo do layout é 3.13. (O canal G fica ~1.2x o R porque 'overlay' é
   multiplicativo por canal e o verde tem G mais alto — diferença de 0.4 níveis
   em 255, imperceptível. Casar a média é o melhor que este blend mode permite.) */
.grao {
  position: relative;
  background: var(--verde);
  isolation: isolate;   /* prende o z-index:-1 dentro deste bloco */
}
.grao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .43;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Acessibilidade: label visível só para leitor de tela. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Hero
   A fachada ocupa o topo (0→1072, onde começa o verde) e as ondas douradas
   (1920x391) atravessam a emenda.

   O topo das ondas é y=904, NÃO 1072-391=681. Elas não terminam na emenda:
   começam 168px acima dela e seguem até 1295, entrando 223px DENTRO do verde —
   é a curva dourada que aparece abaixo da foto no layout.
   Medido por força bruta: compondo fachada + ondas em cada deslocamento e
   comparando com o layout até y=1400, o mínimo é nítido em 904 (diff média 2.68,
   nível de ruído de JPEG) contra 19.32 em 681.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* As ondas transbordam a caixa do .hero e caem sobre o .corpo, que tem fundo
     próprio. Sem este z-index o .corpo, por vir depois no documento, as cobre. */
  z-index: 2;
  /* altura até o início do verde: 1072/1920 = 55.833% da largura */
  padding-bottom: 55.833cqw;
}

/* A foto: do topo até o fim das ondas, que cobrem a emenda com o verde. */
.hero__foto {
  position: absolute;
  inset: 0 0 auto 0;
  height: 55.833cqw;
  width: 100%;
}

.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* <picture> é inline por padrão; precisa ser bloco para posicionar. */
.hero__ondas {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  /* 904/1920 = 47.083% */
  top: 47.083cqw;
  z-index: 1;
}

.hero__ondas img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Corpo verde
   -------------------------------------------------------------------------- */
.corpo {
  /* verde(1072) → tag(1397) = 325px = 16.927cqw */
  padding: 16.927cqw 0 3.906cqw; /* fim: legal(3199) → base(3274) = 75px */
  text-align: center;
}

/* --------------------------------------------------------------------------
   PISOS DE LEGIBILIDADE (max(px, cqw))

   O layout inteiro é proporcional a .pagina, então tudo encolhe junto com a
   janela. Isso reproduz o desenho de 1920 com fidelidade, mas texto não tem
   fidelidade abaixo de um certo tamanho: .texto, por exemplo, vale 18px em 1920
   e apenas 12px em 1280 — e o breakpoint mobile (768px) não socorre essa faixa.
   Medido em 1280 (fator 0.6667): legal 9.3px, campo__erro 9.3px, aceite 10.7px,
   aviso 10.7px, botão 12px, texto 12px, input 13.3px, subtítulo do texto 13.3px.

   max(piso, cqw) resolve sem breakpoint: acima da largura de cruzamento vence o
   cqw (então 1920 fica EXATAMENTE como foi medido — todo piso é menor ou igual
   ao valor em 1920, por construção), abaixo vence o piso.

   Onde o piso do texto entra, a CAIXA em volta também precisa de piso — senão o
   texto maior estoura um botão/campo que continuou encolhendo. Daí os pisos de
   height/gap/width no formulário. Nada disso muda em 1920.
   -------------------------------------------------------------------------- */

.tag {
  /* piso: acompanha o piso do título, e casa com os 152px do bloco mobile */
  width: max(152px, 15.781cqw);   /* 303px em 1920 */
  height: auto;
  margin: 0 auto;
}

.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: max(20px, 1.5625cqw);   /* 30px em 1920; piso abaixo de 1280 */
  line-height: 1.7667;       /* 53px */
  letter-spacing: 0.315em;   /* medido na Task 2 */
  color: var(--creme);
  /* tag(1449) → titulo(1527) = 76px, menos o meio-leading da primeira linha.
     O meio-leading medido (line-height 53 sobre content-area 36, mais a folga
     entre o topo do ascendente e o topo da maiúscula) dá 14.44px, então
     76 - 14.44 = 61.55px = 3.206cqw. */
  margin: 3.206cqw 0 0;
  /* letter-spacing aplica também depois do último caractere, o que desloca cada
     linha centralizada meio espaço para a esquerda. Compensa-se com padding-left
     de mesmo valor: assim o deslocamento vale para TODAS as linhas.
     (text-indent não serve: só afeta a primeira linha, e aí as duas linhas do
     título ficam 4.7px desalinhadas entre si — medido.) */
  padding-left: 0.315em;
}

.subtitulo {
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: max(16px, 1.25cqw);   /* 24px em 1920 */
  line-height: 1.5;          /* 36px */
  color: var(--creme);
  /* 44px de tinta a tinta; descontando o meio-leading da última linha do título
     e o da primeira linha daqui, sobram 22px de caixa a caixa. */
  margin: max(12px, 1.146cqw) 0 0;   /* 22px em 1920 */
}

/* --------------------------------------------------------------------------
   Infos, logo e legal
   -------------------------------------------------------------------------- */
.infos {
  /* A faixa do formulário termina em 2309 e o topo da CAIXA de infos fica em
     2494 (cy 2593 - 198/2), não em 2500: 2500 é onde a TINTA começa, porque a
     medição do PDF cortou ~5px fracos de cada borda pelo limiar de brilho.
     2494 - 2309 = 185px = 9.635cqw.
     Task 9 confirma isto quando a faixa do formulário existir. */
  margin-top: 9.635cqw;
}
.infos img {
  width: 44.271cqw;  /* 850px */
  height: auto;
  margin: 0 auto;
}

.logo {
  /* Distância centro a centro, que é o que medir-layout.js compara (para imagem
     a caixa do DOM É a tinta, mas as BORDAS da tinta medidas no PDF vêm cortadas
     pelo limiar de brilho; só o centro é confiável — ver cabeçalho do script).
     infos(cy 2593) → logo(cy 3031) = 438px.
     margin = 438 - 198/2 - 81/2 = 298.5px = 15.547cqw.
     (O plano dizia 294px, derivado de infos(2698)→logo(2992); esses 2698/2500 do
     comentário estão 6px abaixo do que o script mede para infos. 294 deixava o
     logo 4.5px alto.) */
  margin-top: 15.547cqw;
}
.logo img {
  width: max(180px, 18.698cqw);  /* 359px em 1920 */
  height: auto;
  margin: 0 auto;
}

.legal {
  /* A tinta do logo termina em 3071.5 (cy 3031 ± 81/2) e a do legal começa em
     3130.9 (cy 3165 ± 68.12/2, o vão de 3 linhas medido no navegador): 59.4px de
     tinta a tinta. Mas margin é caixa a caixa, e a caixa do <p> começa 8.7px
     acima da tinta (5.24 de meio-leading + 3.70 entre o topo do ascendente e o
     topo da maiúscula — medido com fontBoundingBoxAscent 14 contra
     actualBoundingBoxAscent 10.297).
     59.4 - 8.7 = 50.7px = 2.641cqw. Com os 59px do plano o vão dava 67.7px. */
  margin: 2.641cqw auto 0;
  max-width: max(420px, 42.865cqw);   /* 823px em 1920 */
  font-family: var(--fonte-texto);
  font-weight: 300;
  font-size: max(11px, .729cqw);      /* 14px em 1920; 9.3px em 1280 sem piso */
  line-height: 1.964;     /* 27.5px */
  color: var(--creme);
  opacity: .85;
}

.legal__link {
  color: var(--creme);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.legal__link:hover { color: var(--ouro); }

/* --------------------------------------------------------------------------
   Formulário
   A faixa reservada no layout é y 1798–2309 (511px). O formulário tem altura
   menor que isso; centralizá-lo na faixa preserva os dois espaçamentos vizinhos.

   Largura 816px (+15% sobre os 710px originais, a pedido). Deixa de estar
   alinhado ao título (711px) e passa a ficar entre ele e o bloco 2Q/3Q (850px),
   que é a outra largura de referência da página — continua bem dentro do
   vocabulário do layout e longe dos 1252px do placeholder do PDF.
   -------------------------------------------------------------------------- */
.faixa-form {
  /* subtítulo(1705) → faixa(1798) = 93px, mas de TINTA a tinta; margin é caixa a
     caixa. A caixa do subtítulo termina 8.5px abaixo da tinta da última linha
     (meio-leading + folga do descendente): medido, caixa em 1713.5 contra tinta
     em 1705. Com os 93px do plano a faixa nascia em 1806.5 e empurrava infos,
     logo e legal 8px para baixo — todos com o mesmo erro, assinatura de faixa
     deslocada. 93 - 8.5 = 84.5px = 4.401cqw, e aí a faixa fica em 1798–2309,
     que é a premissa do margin-top de .infos. */
  margin-top: 4.401cqw;
  min-height: 26.615cqw;   /* 511px */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form {
  /* piso de 420px (a mesma largura máxima do bloco mobile) para que o formulário
     com texto no piso não fique espremido numa coluna de 284px em ~770px. */
  width: min(100%, max(483px, 42.526cqw));   /* 816px em 1920 (710 + 15%) */
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(16px, 1.25cqw) max(12px, 1.042cqw);   /* 24px x 20px em 1920 */
  text-align: left;
}

.campo { margin: 0; }
.campo--largo { grid-column: 1 / -1; }

.campo__input {
  width: 100%;
  /* o piso de altura acompanha o piso de font-size: sem ele, em ~800px o campo
     teria 30px de caixa para 16px de texto. 44px é também o alvo de toque. */
  height: max(44px, 3.75cqw);        /* 72px em 1920 */
  padding: 0 max(14px, 1.25cqw);     /* 24px em 1920 */
  background: var(--creme);
  color: var(--verde);
  border: 1px solid var(--creme);
  border-radius: max(6px, .417cqw);  /* 8px em 1920 */
  font-family: var(--fonte-texto);
  font-weight: 400;
  /* 20px em 1920. O piso de 16px vale duplamente: legibilidade abaixo de 1536px
     e, no iOS, é o mínimo que impede o Safari de dar zoom ao focar o campo. */
  font-size: max(16px, 1.042cqw);
  transition: border-color .2s ease;
}

.campo__input::placeholder { color: var(--verde); opacity: .55; }

.campo__input[aria-invalid="true"] { border-color: #B3402F; }

/* min-height reserva o espaço da mensagem: o campo não pode empurrar o resto
   do formulário quando o erro aparece. Por isso NÃO há regra :empty que esconda
   o parágrafo vazio — ela desfaria exatamente essa reserva.
   A reserva é 1.4em, não 1em: a caixa de linha renderizada mede font-size x
   line-height (14 x 1.4 = 19.6px). Com 1em reservava-se só 14px e o formulário
   ainda pulava 5.6px por mensagem. */
.campo__erro {
  margin: max(6px, .417cqw) 0 0;
  min-height: 1.4em;
  font-size: max(13px, .729cqw);   /* 14px em 1920 */
  line-height: 1.4;
  color: #E9A79B;
}

/* Aceite LGPD */
.aceite__label {
  display: flex;
  align-items: flex-start;
  gap: max(10px, .625cqw);          /* 12px em 1920 */
  cursor: pointer;
  font-size: max(14px, .833cqw);    /* 16px em 1920 */
  line-height: 1.5;
  color: var(--creme);
}
.aceite__check {
  flex: 0 0 auto;
  /* .938cqw dá 18px só em 1920; o piso mantém os 18px em qualquer largura.
     A área de toque real é o <label> inteiro, que envolve o input. */
  width: max(18px, .938cqw); height: max(18px, .938cqw);
  margin-top: max(2px, .21cqw);
  accent-color: var(--ouro);
  cursor: pointer;
}
.aceite__label a { color: var(--creme); text-decoration: underline; text-underline-offset: .2em; }
.aceite__label a:hover { color: var(--ouro); }

/* Botão. Ouro para diferenciar dos campos, que também são creme (spec §6). */
.botao {
  width: 100%;
  /* 48px, e não 44px como nos campos: com o piso de 14px o rótulo pode quebrar
     em duas linhas nas larguras intermediárias, e 48px comporta as duas. */
  height: max(48px, 3.75cqw);        /* 72px em 1920 */
  border: 0;
  border-radius: max(6px, .417cqw);
  background: var(--ouro);
  color: var(--verde);
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: max(14px, .938cqw);     /* 18px em 1920 */
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Compensa o letter-spacing que sobra depois do último caractere. padding-left
     (e não text-indent) pelo mesmo motivo do .titulo: text-indent só vale para a
     primeira linha, e o rótulo pode quebrar em duas em telas estreitas. */
  padding-left: .18em;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.botao:hover { background: #D2B892; }
.botao[disabled] { opacity: .6; cursor: progress; }

/* Mesmo raciocínio do .campo__erro: espaço reservado, sem :empty, e a reserva
   igual à caixa de linha (line-height explícito para não depender do 'normal'
   da fonte). */
.form__aviso {
  margin: max(10px, .625cqw) 0 0;
  min-height: 1.4em;
  line-height: 1.4;
  text-align: center;
  font-size: max(14px, .833cqw);   /* 16px em 1920 */
  color: #E9A79B;
}

/* Sucesso */
.form-sucesso { text-align: center; }
.form-sucesso__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: max(20px, 1.5625cqw);   /* 30px em 1920 */
  letter-spacing: .2em;
  padding-left: .2em;      /* idem .botao/.titulo: vale para todas as linhas */
  color: var(--creme);
}
.form-sucesso__texto {
  margin: max(12px, 1.042cqw) 0 0;
  font-size: max(16px, 1.25cqw);     /* 24px em 1920 */
  color: var(--creme);
  opacity: .85;
}

/* --------------------------------------------------------------------------
   Páginas internas (obrigado.html, politica-privacidade.html)

   Estas páginas NÃO usam .corpo — o markup delas é `grao pagina-simples` e
   `grao texto`. Motivo: o que elas queriam de .corpo era o verde com grão, e
   isso já mora em .grao, que é utilitário independente e não sabe nada da home.
   O que .corpo tem de próprio é `padding: 16.927cqw 0 3.906cqw` (os 325px da
   emenda da foto do hero com o verde, medidos para a home) e `text-align:
   center`. Herdar aquele padding de topo empurraria o conteúdo para baixo sem
   motivo e, somado ao `min-height: 100vh` + `padding-block: 8cqw` daqui,
   produziria scroll vertical inútil em obrigado.html.

   Escolhi não usar .corpo em vez de sobrescrever o padding dentro de
   .pagina-simples/.texto, e em vez de quebrar .corpo em duas classes, porque é
   a única das três opções que não encosta em nenhuma regra das tasks 4–10: a
   home continua medindo exatamente igual, sem precisar de reverificação de
   risco. Sobrescrever o padding também funcionaria, mas deixaria as duas
   páginas dependendo de um valor que só existe por causa do hero.

   Como .corpo não vem junto, o `text-align: center` que .pagina-simples usava
   por herança está declarado aqui explicitamente.
   -------------------------------------------------------------------------- */
.pagina-simples {
  /* box-sizing: border-box (reset global) mantém o padding DENTRO dos 100vh,
     então a página fecha exatamente na altura da janela: sem scroll. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.125cqw;
  padding-block: 8cqw;
  text-align: center;
}
.pagina-simples .logo { margin-top: 0; }
.pagina-simples__voltar { margin: 0; font-size: max(15px, .938cqw); }

/* Página de texto corrido */
.texto {
  /* A coluna de leitura tem 45cqw (864px em 1920) e é centralizada por PADDING,
     não por max-width + margin-inline: assim o <main> continua ocupando a
     largura toda e o ::before de .grao cobre a página inteira. Com max-width o
     grão viraria uma faixa texturizada de 864px no meio de um fundo liso.
     (100 - 45) / 2 = 27.5cqw de cada lado. */
  /* O padding-block vai em em (6.4 x 18 = 115.2px = 6cqw em 1920) para
     acompanhar o piso de font-size abaixo — mesma razão dos margins internos. */
  padding: 6.4em 27.5cqw;
  /* .corpo não está mais aqui, mas a declaração fica: é o alinhamento que a
     página quer, independente do que houver acima dela. */
  text-align: left;
  /* 18px em 1920. Sem o piso caía para 12px em 1280 — abaixo do confortável
     para texto corrido, e o breakpoint de 768px não cobre essa faixa. */
  font-size: max(16px, .938cqw);
  line-height: 1.75;
}
/* Os espaçamentos internos desta página são em em, não em cqw: assim continuam
   proporcionais ao texto DEPOIS que o piso de font-size entra. Em 1920 dão
   exatamente os mesmos px que os cqw davam (1.333 x 18 = 24 = 1.25cqw etc.). */
.texto p { margin: 0 0 1.333em; opacity: .9; }
.texto__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: max(20px, 1.5625cqw);   /* 30px em 1920 */
  letter-spacing: .2em;
  padding-left: .2em;      /* idem .titulo: compensa o espaço após o último caractere */
  margin: 0 0 1.6em;       /* 48px em 1920 = 2.5cqw */
  text-align: center;
}
.texto__subtitulo {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: max(18px, 1.042cqw);    /* 20px em 1920 */
  margin: 1.92em 0 .6em;             /* 38.4px / 12px em 1920 = 2cqw / .625cqw */
  color: var(--ouro);
}
/* `p.` é necessário: `.texto p` (0,1,1) vence `.texto__voltar` (0,1,0) e o
   `margin: 0 0 1.333em` de lá zeraria este margin-top. */
.texto p.texto__voltar { margin: 2.667em 0 0; text-align: center; }  /* 48px em 1920 */
.texto .logo { margin-top: 3.2em; }                                  /* 57.6px em 1920 */

/* --------------------------------------------------------------------------
   Mobile

   Os pisos max(px, cqw) acima seguram a legibilidade até aqui, mas abaixo de
   768px a proporção do desenho de 1920 deixa de servir: quase tudo estaria no
   piso e as distâncias entre os blocos (que continuam em cqw) ficariam
   pequenas demais para o texto que sobrou. Deste ponto para baixo o layout
   passa a ser absoluto.

   O <picture> de .infos e o de .hero__foto trocam de arquivo neste mesmo
   768px (infos-mobile.png, fachada-mobile.jpg).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Hero — a foto fica mais alta em proporção (62cqw contra 55.833cqw) porque
     numa tela estreita a fachada precisa de mais presença vertical.

     As ondas continuam ABSOLUTAS, com a mesma relação medida na Task 9: elas
     não terminam na emenda, cruzam-na. Em 1920: topo 904, foto até 1072, ondas
     até 1295 — 168px sobre a foto (8.75% da largura) e 223px dentro do verde
     (11.615%). Como a arte é sempre 100% da largura, a altura dela é sempre
     391/1920 = 20.365cqw, então basta repetir as mesmas frações:
       topo = 62 - 8.75 = 53.25cqw
       base = 53.25 + 20.365 = 73.615cqw  →  11.615cqw dentro do verde.
     (Um `position: static` com margin-top negativo daria o mesmo empilhamento,
     mas encostaria a base das ondas no fim do .hero: a curva dourada morreria
     na emenda em vez de mergulhar no verde com grão do .corpo.) */
  .hero { padding-bottom: 62cqw; }
  .hero__foto { height: 62cqw; }
  .hero__ondas { top: 53.25cqw; }

  /* O padding de topo precisa passar por baixo das ondas (11.615cqw) antes de
     abrir o respiro real até a tag — senão a curva encosta na tag. */
  .corpo { padding: calc(11.615cqw + 28px) 24px 40px; }

  .tag { width: 152px; }

  .titulo {
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: .22em;
    padding-left: .22em;
    margin-top: 28px;
  }

  .subtitulo { font-size: 16px; line-height: 1.5; margin-top: 20px; }

  .faixa-form { margin-top: 36px; min-height: 0; }

  .form {
    width: 100%;
    max-width: 483px;   /* 420 + 15%, acompanhando o desktop */
    grid-template-columns: 1fr;   /* e-mail e telefone empilham */
    gap: 16px;
  }

  .campo__input { height: 54px; padding: 0 16px; font-size: 16px; border-radius: 8px; }
  .campo__erro { font-size: 13px; margin-top: 6px; }

  .aceite__label { font-size: 14px; gap: 10px; }
  .aceite__check { width: 18px; height: 18px; margin-top: 2px; }

  .botao { height: 56px; font-size: 14px; border-radius: 8px; }
  .form__aviso { font-size: 14px; margin-top: 12px; }

  .form-sucesso__titulo { font-size: 20px; }
  .form-sucesso__texto { font-size: 16px; margin-top: 12px; }

  .infos { margin-top: 48px; }
  .infos img { width: 100%; max-width: 340px; }

  .logo { margin-top: 56px; }
  .logo img { width: 180px; }

  .legal { max-width: 100%; font-size: 11px; line-height: 1.9; margin-top: 28px; }

  /* padding-inline PRECISA ser sobrescrito: os 27.5cqw do desktop existem para
     segurar a coluna de leitura de 864px sem tirar o grão da largura toda, mas
     são proporcionais — em 375px deixariam 168px de texto, uma fita. */
  .texto { padding: 48px 24px 56px; font-size: 16px; }
  .texto__titulo { font-size: 20px; }
  .texto__subtitulo { font-size: 16px; }
  .texto__voltar, .pagina-simples__voltar { font-size: 15px; }
  .pagina-simples { gap: 32px; padding-block: 64px; }
}

/* --------------------------------------------------------------------------
   Parallax do hero
   A foto e as ondas descem a velocidades diferentes conforme a página rola, e
   a diferença entre elas é o que cria a profundidade: a foto desce mais, então
   as ondas parecem SUBIR em relação a ela.

   Por que descer, e não subir:
   a foto tem só 24px de folga vertical (imagem de 1096 numa caixa de 1072), de
   modo que qualquer translação para cima acabaria a folga imediatamente e
   qualquer zoom mudaria o enquadramento em repouso — que é justamente o que foi
   medido contra o PDF. Descendo, a faixa vazia que se abre no TOPO da caixa
   cresce a `amplitude × S/100vh`; como essa fração é sempre menor que S, a faixa
   fica permanentemente acima do viewport e nunca aparece. Zoom zero,
   enquadramento em repouso idêntico, e translação sem limite útil.

   `scroll(root block)` é obrigatório em vez de `scroll()`: .pagina tem
   overflow-x hidden, o que a torna um contêiner de rolagem, e um `scroll()`
   simples se ancoraria nela — que não rola — deixando a animação parada em 0.

   Só roda onde há suporte a animações guiadas por scroll (não é Baseline: o
   Firefox estável ainda não tem). Sem suporte, ou com prefers-reduced-motion,
   a página fica exatamente como estava. Sem JavaScript e sem trabalho na main
   thread: a animação corre no compositor.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    /* A foto precisa ser recortada enquanto desce. */
    .hero__foto { overflow: hidden; }

    .hero__foto img,
    .hero__ondas {
      animation: parallax linear both;
      animation-timeline: scroll(root block);
      /* Faixa relativa ao viewport, então funciona em qualquer altura de tela. */
      animation-range: 0 100vh;
    }

    .hero__foto img { --parallax: 200px; }
    .hero__ondas    { --parallax: 70px; }

    @keyframes parallax {
      to { transform: translate3d(0, var(--parallax), 0); }
    }
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* O hero tem 62cqw no mobile (242px em 390): amplitude proporcionalmente menor,
     senão a foto desce mais do que a própria altura visível dela. */
  .hero__foto img { --parallax: 90px; }
  .hero__ondas    { --parallax: 32px; }
}