/* ═════════════════════════════════════════════════════════════════
   RIVIO — Página de contato

   Ela é um CONVITE, não um formulário numa folha em branco.

   ── COMO ELA É FEITA ─────────────────────────────────────────────

   A fotografia SANGRA a seção inteira: a sala onde a conversa que a
   página propõe aconteceria. Ela precisa desse tamanho, e isso foi
   aprendido errando — a primeira tentativa deixou a foto do tamanho de
   uma moldura de 20px em volta do painel, e o olho leu aquilo como
   borda bege, não como lugar. Sem contraste de valor não há presença,
   e a página inteira num só tom claro ficou, nas palavras do
   Jefferson, fraca.

   O vidro também depende disso. `backdrop-filter` só tem graça quando
   há estrutura e cor atrás para refratar; sobre um borrão bege
   uniforme ele vira um cartão claro qualquer. Sobre a janela da sala,
   ele finalmente parece vidro.

   O par foto · véu · vidro fosco não nasceu aqui: é o mesmo que os
   gráficos das páginas de case usam, e o mesmo que o CTA da home usa.
   O que muda é a escala. E a malha de pontos é a da CTA de seta, aqui
   à escala da seção.

   ── DUAS REGRAS QUE VALEM PARA A PÁGINA INTEIRA ──────────────────

   1 · NADA TEM CONTORNO. O site separa superfície por PREENCHIMENTO —
   vidro sobre foto, campo branco sobre vidro —, nunca por traço de 1px
   em volta. A primeira versão desta página desenhou borda em campo,
   pílula e caixa, e ficou estranha exatamente por isso: era um
   vocabulário que não existe em lugar nenhum do site.

   2 · ELA RESPIRA. Um formulário de qualificação de oito campos é o
   momento em que o visitante decide se está falando com gente séria.
   Apertar o espaço aqui economiza pixel e custa autoridade.

   Os ícones são do Lucide com terminação RETA — `stroke-linecap:
   square`, `stroke-linejoin: miter` —, que é a terminação das setas e
   do chevron que o site já desenha.
   ═════════════════════════════════════════════════════════════════ */

.contato {
  /* Uma cor que o sistema não tem: ERRO. Não existe vermelho no Figma
     da Rivio, e inventar um token global a partir de uma página seria
     decidir pelo design system inteiro. Fica escopado aqui, com o
     mínimo de saturação para conviver com âmbar, roxo e azul — e sai
     no dia em que o arquivo definir o dele. */
  /* Duas cores que o sistema não tem: ERRO, e o erro sobre ESCURO. Não
     existe vermelho no Figma da Rivio, e inventar um token global a
     partir de uma página seria decidir pelo design system inteiro.
     Ficam escopadas aqui e saem no dia em que o arquivo definir as
     dele. A clara é a que vale dentro do painel; a escura sobrou para
     nada e é mantida só para quem herdar este CSS num fundo claro. */
  --erro: #c2493c;
  --erro-claro: #ff9a8d;

  /* O campo é uma CHAPA CLARA TRANSLÚCIDA sobre o vidro escuro — o
     mesmo par que as seções escuras do site usam (`--light-16` e
     companhia). Hover e foco não trazem traço: sobem o preenchimento,
     que é como uma superfície se destaca de outra sem desenhar
     contorno. */
  --campo-fundo: rgba(255, 255, 255, 0.08);
  --campo-fundo-alto: rgba(255, 255, 255, 0.13);

  /* A ALTURA DE TODO CONTROLE DA PÁGINA, num lugar só. Campo de texto,
     telefone, seletor, pílula e botão de enviar respondem a esta linha.

     Antes cada peça chegava na sua altura por conta própria — o campo
     por `padding` de 17, a pílula por `padding` de 15 — e o resultado
     eram 55 contra 46,8 lado a lado na mesma coluna. Altura de controle
     é medida de GRADE, não consequência de padding: quem decide é este
     token, e o padding de cada peça passa a ser só recuo horizontal. */
  --campo-alt: 56px;

  /* A PÁGINA É ESCURA, e o rodapé também — a emenda dura entre uma
     fotografia clara e um rodapé preto deixou de existir. */
  background: #181b1f;
}

/* ── A seção ─────────────────────────────────────────────────────
   A sala continua na página, mas ao FUNDO: desfocada e coberta por um
   preto de 0,8, ela deixou de ser o assunto e virou a temperatura da
   página. Quem carrega a fotografia agora é o cartão.

   O ganho não é só de composição. Com o formulário assentando no escuro
   chapado, cada campo volta a ser um campo em vez de um retângulo
   translúcido sobre uma imagem — e some o `backdrop-filter` dentro de
   `backdrop-filter`, que já obrigou o balão do seletor de país a ser
   quase opaco para não sumir. */
.ct-palco {
  position: relative;
  padding: 152px var(--gutter) 96px;
  overflow: clip;
  isolation: isolate;
  color: var(--light-01);
}

.ct-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: clip;
}

.ct-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/* O preto que apaga a sala. `backdrop-filter` em vez de `filter` na
   imagem: o desfoque aplicado à `img` sangraria as bordas para dentro e
   deixaria uma moldura clara nos cantos. */
.ct-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

/* A ALTURA DA SEÇÃO acompanha a tela, e o conteúdo fica no centro.

   Ela era só `padding` + conteúdo, e por isso ficava CONGELADA em 897px
   em qualquer tela: num monitor de 2160 isso é 42% da altura, e o
   rodapé começava a aparecer com mais de metade da tela ainda por vir.
   Com `100svh` ele volta para baixo da dobra em qualquer altura.

   Só no layout de DUAS COLUNAS: empilhado o conteúdo já passa da tela
   com folga, e centrar o que não cabe não faz nada. */
@media not all and (max-width: 1060px) {
  .ct-palco {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
  }
}

/* ── A grade ─────────────────────────────────────────────────────
   568 de cartão e o resto para o formulário, com 64 de calha — as
   medidas do desenho. O cartão não tem altura própria: `stretch` faz os
   dois terem a altura da LINHA, que é a do formulário, e é isso que
   mantém os dois pés na mesma régua sem número mágico. */
/* TETO de 1600 e centralizada.

   Sem teto, o cartão tem largura fixa e TODA a sobra da tela cai no
   formulário: medido a 3840, a coluna dele ia a 3144 e cada campo a
   1560. Um campo de texto de 1560 não é generoso, é uma linha em que o
   olho viaja do começo ao fim para ler seis caracteres.

   "Largura total" era a instrução para telas de trabalho, onde ela
   significa aproveitar a tela. Num 4K ela deixa de significar isso: a
   página não fica mais larga, fica esticada. O teto é onde a composição
   está pronta, e daí para cima o que cresce é a margem escura. */
.ct-grade {
  position: relative;
  width: min(100%, 1600px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 568px minmax(0, 1fr);
  grid-template-areas: 'cartao form';
  column-gap: 64px;
  align-items: stretch;
}

.ct-cartao { grid-area: cartao; }
.ct-form-col { grid-area: form; }

/* Os endereços ocupam a MESMA célula do cartão e assentam na base dela.
   No largo eles são o pé do cartão; no estreito viram uma faixa depois
   do formulário — e é por isso que são item da grade e não filho do
   cartão: pai não se troca por CSS, célula sim. */
.ct-enderecos {
  grid-area: cartao;
  align-self: end;
  z-index: 1;
  margin: 0 32px 32px;
}

/* ── O cartão ────────────────────────────────────────────────────
   Ele resolve de uma vez o que o vidro resolvia mal: o texto claro
   ganha uma superfície própria e controlada, em vez de depender do
   trecho de fotografia que calhar de estar atrás dele. */
.ct-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  border-radius: 12px;
  overflow: clip;
  isolation: isolate;
}

.ct-cartao__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

/* O pé do cartão é o único lugar da página onde texto assenta sobre
   fotografia, e o rosto é claro. O degradê pesa só onde o tipo mora. */
.ct-cartao::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(8, 7, 6, 0.88) 0%,
    rgba(8, 7, 6, 0.72) 26%,
    rgba(8, 7, 6, 0.32) 52%,
    rgba(8, 7, 6, 0.08) 76%
  );
}

/* A pilha do cartão, de baixo para cima: foto (-2), malha (-1), degradê
   do pé (0) e TEXTO (1). O degradê precisa passar por cima da malha —
   senão os pontos brilham no meio do título — e por baixo do texto.
   Como ele é posicionado e o texto não era, o texto ficava embaixo:
   estas duas regras o trazem de volta para cima. */
.ct-cartao > .ct-tag,
.ct-cartao__pe {
  position: relative;
  z-index: 1;
}

/* O cartão RESERVA a altura dos endereços, porque eles flutuam na mesma
   célula e não empurram nada. Duas linhas de 14px com entrelinha 1,5 e
   8 de vão, mais os 24 que separam do lede: 74. O `2` é a quantidade de
   endereços — se entrar um terceiro, este número sobe. É a única medida
   da página que depende do conteúdo, e está escrita para ser achada. */
.ct-cartao__pe {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: calc(2 * 1.5 * 14px + 8px + 24px);
}

/* ── O texto ─────────────────────────────────────────────────────── */
.ct-texto {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ct-tag {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ct-tag__pre {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--light-64);
}

.ct-tag__pre::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--light-48);
}

.ct-tag__nome { color: rgba(255, 255, 255, 0.88); }

/* O título desce de 56 para 36. Não é mudança de escala tipográfica: é
   a caixa. O texto saiu de uma coluna de 720 para dentro de um cartão
   de 568 com 32 de padding — 504 úteis. A 56 esta frase ocupa quatro
   linhas e come o cartão inteiro; a 36 ela fecha em duas e sobra
   fotografia, que é a razão de o cartão existir. */
.ct-titulo {
  font-weight: 300;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--light-01);
  text-wrap: pretty;
}

/* A REGRA QUE LIBERA AS LINHAS DO TÍTULO, e ela é POR SELETOR: o
   `componentes.css` só libera `.hero__headline` e o `case.css` só libera
   `.case-abre__titulo`. Sem esta, as linhas ficam paradas em
   `translateY(115%)` e o título simplesmente não aparece.

   Isso já aconteceu duas vezes nesta página: na primeira montagem, e de
   novo agora, quando reescrevi este bloco e a apaguei junto. O sintoma
   é mudo — nenhum erro no console, só um vão onde deveria haver título.

   É TEMPORIZADA e não disparada por scroll: o título está na primeira
   tela quando a página abre. */
.js.is-ready .ct-titulo .line__i {
  transform: none;
  transition: transform 1.05s var(--ease-out-expo) var(--d, 0ms);
}

.js.is-instant .ct-titulo .line__i { transition: none !important; }

.ct-lede {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.8;
  text-wrap: pretty;
}

/* ── Os endereços ────────────────────────────────────────────────
   COMPLEMENTARES, e tratados como tal: no pé do cartão, menores e mais
   apagados que a chamada. Não levam mais `margin-top` — quem os afasta
   agora é o `gap` de 24 do pé. */
/* Sem `margin: 0` aqui: a colocação na grade, lá em cima, já define a
   margem — e como esta regra vem DEPOIS no arquivo, um `margin: 0`
   zerado aqui venceria por ordem e colaria os endereços na borda do
   cartão. Foi o que aconteceu na primeira montagem. */
.ct-enderecos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.ct-enderecos li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-01);
}

.ct-enderecos svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--light-64);
}

/* ── A coluna do formulário ──────────────────────────────────────
   O `space-between` que põe o botão na base do cartão precisa estar no
   `<form>`, e não aqui: aqui os filhos são o título oculto e a caixa,
   e distribuir ESSES dois não move nada. A corrente de `flex: 1` abaixo
   é o que leva a altura da coluna até o formulário. */
.ct-form-col {
  display: flex;
  flex-direction: column;
  padding-block: 32px;
}

.ct-form-col .form__caixa {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.ct-form-col .form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
}

/* ── A malha ─────────────────────────────────────────────────────
   DENTRO do cartão, sobre a fotografia, e com a geometria MEDIDA do
   Figma: passo de 18,5 nos dois eixos e recuo de 7 das quatro bordas.
   (Antes era 26 sem recuo, herdado da versão anterior da página.)

   `mix-blend-mode: overlay`, e isto também é medição, não gosto: no
   render do Figma o acréscimo de cada ponto CRESCE com o brilho do
   fundo — +1 sobre um fundo de 6, +5,7 sobre 34, +18 sobre 133. Branco
   chapado faz o contrário, porque quanto mais claro o fundo, menos
   diferença o branco faz. Crescer com o fundo é assinatura do
   `overlay`: a malha desaparece na sombra do cartão e se acende na
   pele e na parede, que é exatamente o que se vê no desenho.

   Ela continua SEM eventos: está em `z-index: -1`, atrás do texto e do
   degradê, e nessa posição não receberia o ponteiro de forma confiável.
   Quem escuta o cursor é o cartão, que tem a mesma caixa — o `malha.js`
   converte as coordenadas contra ele. */
.ct-malha {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: overlay;
  /* TETO de 16%, e ele FECHA a conta do Figma.

     A medição do render dava, para o acréscimo de cada ponto: +1 sobre
     um fundo de 6, +5,7 sobre 34, +18 sobre 133. O `overlay` com fonte
     branca prevê `alfa × fundo` abaixo de 127,5 e `alfa × (255 − fundo)`
     acima. A 16% dava +1,0 · +5,4 · +19,5, batendo nos três pontos e
     confirmando a mistura. O Jefferson subiu para 20%, que é o mesmo
     desenho um quarto mais presente — a proporção entre sombra e luz,
     que é o que o `overlay` decide, não muda com isso.

     Vale para os dois caminhos, canvas e fundo de CSS. E é "até" de
     propósito: a onda sobe cada coluna de 0 até aqui, então 16 é o
     máximo que a malha alcança, não um valor constante.

     O teto fica aqui e não na cor dos pontos para separar as duas
     decisões: a mistura responde pelo CONTRASTE, a opacidade pela
     PRESENÇA, e cada uma mora num lugar só. */
  opacity: 0.2;
}

/* O fundo de CSS. É o que se vê sem JS, com movimento reduzido e em
   ponteiro grosso — e é ele que o `malha.js` esconde quando assume.
   O `background-position` desloca meio passo para trás porque o
   `radial-gradient` põe o ponto no CENTRO do ladrilho: sem isso o
   primeiro ponto cairia em 9,25 em vez dos 7 medidos. */
.ct-malha i {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.62) 1px, transparent 1.4px);
  background-size: 20px 20px;
  background-position: -2px -2px;
}

.js.is-ready .ct-malha i {
  opacity: 1;
  transition: opacity 1.4s var(--ease-out-soft) 320ms;
}

/* A partir do momento em que o canvas assume, o fundo sai. */
.ct-malha[data-malha='viva'] i { display: none; }

.ct-malha__tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.form__caixa { position: relative; }

.form__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 24px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  /* `fieldset` traz borda, margem e padding do agente do usuário. */
  padding: 0;
  border: 0;
}

.campo__rot {
  display: flex;
  align-items: baseline;
  gap: 4px;
  /* Caixa alta, como toda `--font-label` neste site. */
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--light-64);
  padding: 0;
}

/* `<legend>` NÃO é item de flex: o navegador o renderiza fora do fluxo
   normal do fieldset, e por isso o `gap` de 12 acima simplesmente não
   valia para os dois grupos de pílula — as pílulas nasciam COLADAS no
   rótulo, com zero de vão, enquanto todo campo de texto tinha 12.
   Medido: 0 contra 10. A margem devolve o mesmo respiro, à mão. */
legend.campo__rot { margin-bottom: 12px; }

.campo__rot b {
  font-weight: inherit;
  color: var(--blue);
}

/* ── O campo ─────────────────────────────────────────────────────
   O ÍCONE mora dentro, e o `padding-left` do controle abre o lugar
   dele. Ele é decorativo — quem nomeia o campo é o rótulo em cima —,
   então fica fora do alcance do ponteiro para o clique cair sempre no
   campo. */
.campo__caixa {
  position: relative;
  display: block;
}

.campo__ico {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--light-64);
  opacity: 0.9;
  pointer-events: none;
  transition: color 0.24s var(--ease-out-soft), opacity 0.24s var(--ease-out-soft);
}

.campo__ctrl {
  width: 100%;
  min-width: 0;
  height: var(--campo-alt);
  padding: 0 18px 0 50px;
  border: 0;
  border-radius: 12px;
  background: var(--campo-fundo);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  color: var(--light-01);
  transition: background-color 0.28s var(--ease-out-soft),
    box-shadow 0.28s var(--ease-out-soft);
}

.campo__ctrl::placeholder {
  color: var(--light-48);
  opacity: 1;
}

.campo__ctrl:hover { background: var(--campo-fundo-alto); }

/* A lista aberta é desenhada pelo SISTEMA, não por esta folha: sem
   isto, no Windows ela herda o texto claro do `<select>` e sai branco
   no branco. */
.campo__ctrl option {
  background: #fff;
  color: var(--dark-01);
}

/* Sem contorno também no foco: um HALO azul, que é a mesma ideia de
   preenchimento levada ao estado. `outline: none` sozinho seria tirar
   a acessibilidade; aqui ele é SUBSTITUÍDO por algo mais visível que o
   anel do sistema, e o ícone acende junto. */
.campo__ctrl:focus-visible {
  outline: none;
  background: var(--campo-fundo-alto);
  box-shadow: 0 0 0 4px rgba(102, 148, 255, 0.42);
}

.campo__caixa:focus-within .campo__ico {
  color: var(--blue);
  opacity: 1;
}

/* ── A lista ─────────────────────────────────────────────────────
   `appearance: none` tira o widget do sistema operacional e o chevron
   volta como imagem de fundo — o MESMO desenho da nav. O elemento
   continua sendo um `<select>` nativo, então o celular abre a roleta
   dele e o teclado continua funcionando. */
.campo--lista .campo__ctrl {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23a8b0c0' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 14px;
  cursor: pointer;
}

/* ── O país do telefone ──────────────────────────────────────────
   UM CAMPO SÓ. Bandeira, chevron, código e número numa superfície
   contínua — dois blocos separados liam como dois campos, e telefone é
   um dado só. Quem carrega o fundo agora é a CAIXA; o botão e o
   `<input>` ficam transparentes por dentro dela. */
.campo__caixa--tel {
  display: flex;
  align-items: center;
  padding-left: 14px;
  border-radius: 12px;
  background: var(--campo-fundo);
  transition: background-color 0.28s var(--ease-out-soft),
    box-shadow 0.28s var(--ease-out-soft);
}

.campo__caixa--tel:hover { background: var(--campo-fundo-alto); }

/* O anel de foco é da CAIXA, e vale para qualquer um dos dois filhos:
   sem isto, focar o número desenharia um anel só em volta dele, dentro
   de outro campo. */
.campo__caixa--tel:focus-within {
  background: var(--campo-fundo-alto);
  box-shadow: 0 0 0 4px rgba(102, 148, 255, 0.28);
}

/* O ícone SAI deste campo: o lugar dele é o canto esquerdo, e é
   exatamente ali que a bandeira fica. Ela ocupa a posição do ícone e
   faz o mesmo trabalho — dizer, de relance, o que é aquele campo. */
.campo__caixa--tel .campo__ico { display: none; }

/* `static`, e não `relative`: assim o balão se posiciona contra a
   CAIXA do campo inteiro, e não contra a bandeira. Preso à bandeira ele
   herdaria 22px de largura de referência — e no estreito, onde ele
   precisa ocupar o campo todo, não teria a que se ancorar. */
.tel-pais {
  position: static;
  flex: none;
}

/* Dentro do campo, o seletor não é uma caixa: é a bandeira mais o
   chevron. Sem fundo, sem raio, sem sombra. */
.tel-pais .lista {
  width: auto;
  gap: 6px;
  padding: 16px 0;
  background: none;
}

.tel-pais .lista:hover,
.tel-pais .lista:focus-visible {
  background: none;
  box-shadow: none;
}

.tel-pais .lista__valor { display: flex; }

/* 20 × 15 é a proporção 4:3 dos arquivos: nem estica nem corta. */
.bandeira {
  display: block;
  width: 20px;
  height: 16px;
  flex: none;
  border-radius: 2px;
  /* A bandeira é uma chapa de cor cheia; sem isto ela encosta no fundo
     translúcido e some nas de tom claro (Japão, Polônia). O traço é por
     DENTRO, então não conta como contorno em volta do campo — e como
     agora é `<img>`, ele vem de `outline` recuado e não de `box-shadow`
     interno, que imagem não recebe. */
  outline: 1px solid rgba(0, 0, 0, 0.16);
  outline-offset: -1px;
}

.tel-ddi {
  flex: none;
  padding-left: 10px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
  color: var(--light-64);
  pointer-events: none;
}

/* O número perde o fundo e o recuo: quem os tem agora é a caixa. */
.campo__caixa--tel .campo__ctrl {
  flex: 1;
  min-width: 0;
  padding-left: 8px;
  background: none;
  box-shadow: none;
}

.campo__caixa--tel .campo__ctrl:hover,
.campo__caixa--tel .campo__ctrl:focus-visible {
  background: none;
  box-shadow: none;
}

/* O balão do país abre com largura própria e alinhado à ESQUERDA:
   ancorado nas duas bordas do seletor ele herdaria a largura da
   bandeira. */
.tel-pais .lista__pop {
  left: 0;
  right: auto;
  min-width: 300px;
  top: calc(100% + 10px);
}

.campo.is-erro .campo__caixa--tel { background: rgba(255, 154, 141, 0.16); }

/* ── A LISTA PRÓPRIA ─────────────────────────────────────────────
   O `<select>` fechado é estilizável; a lista ABERTA é desenhada pelo
   sistema operacional e não aceita CSS. Num painel de vidro escuro, o
   menu branco do macOS entra em cena como corpo estranho — foi o que
   o Jefferson viu. Daí este componente.

   O botão imita o campo à risca: mesmo fundo, mesmo raio, mesma altura,
   mesmo recuo de 50 para o ícone. Ninguém deve conseguir dizer, olhando
   um formulário fechado, quais campos são lista e quais são texto. */
.lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: var(--campo-alt);
  padding: 0 18px 0 50px;
  border: 0;
  border-radius: 12px;
  background: var(--campo-fundo);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  color: var(--light-01);
  cursor: pointer;
  transition: background-color 0.28s var(--ease-out-soft),
    box-shadow 0.28s var(--ease-out-soft);
}

.lista:hover { background: var(--campo-fundo-alto); }

.lista:focus-visible {
  outline: none;
  background: var(--campo-fundo-alto);
  box-shadow: 0 0 0 4px rgba(102, 148, 255, 0.42);
}

.lista__valor.is-marcador { color: var(--light-48); }

.lista__chevron {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--light-48);
  transition: transform 0.32s var(--ease-out-expo);
}

.lista[aria-expanded='true'] .lista__chevron { transform: rotate(180deg); }

.lista[aria-expanded='true'] ~ .campo__ico,
.lista:focus-visible ~ .campo__ico { color: var(--blue); opacity: 1; }

/* ── O balão ─────────────────────────────────────────────────────
   Vidro escuro como o painel, um degrau mais fechado: ele precisa
   ganhar do que está por baixo, que é o próprio formulário. */
.lista__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 8px;
  border-radius: 14px;
  /* QUASE opaco, e é decisão e não descuido. Dois motivos: um balão de
     menu é sobreposição temporária, não superfície para se olhar
     através — o que estiver atrás dele é justamente o que não interessa
     agora; e `backdrop-filter` DENTRO de outro elemento com
     `backdrop-filter` (o painel) não borra de forma confiável, então a
     translucidez aqui deixava o rótulo do campo de baixo legível
     através da lista. Medido no celular: dava para ler "COMO NOS
     CONHECEU" por trás das opções. */
  background: rgba(28, 24, 21, 0.97);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 26px 64px rgba(6, 5, 4, 0.55);
  /* A barra do sistema é clara e volta a quebrar a cena; esta some no
     escuro. */
}

/* Quem rola é o ROLO, e não o balão: com a busca no topo, rolar o
   balão inteiro levaria o campo de busca junto para fora da vista. */
.lista__rolo {
  max-height: 254px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* A barra do sistema é clara e volta a quebrar a cena; esta some no
     escuro. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* ── A busca ─────────────────────────────────────────────────────
   Quarenta e sete países não se percorrem com a rodinha do mouse. O
   campo recebe o foco assim que o balão abre, então digitar é a
   primeira coisa que funciona — sem clicar em nada. */
.lista__busca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--light-48);
}

.lista__busca svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.lista__busca-ctrl {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.3;
  color: var(--light-01);
}

.lista__busca-ctrl:focus { outline: none; }
.lista__busca-ctrl::placeholder { color: var(--light-48); }

.lista__vazio {
  padding: 14px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 14px;
  color: var(--light-48);
}

.lista__vazio[hidden] { display: none; }

/* `[hidden]` PERDE para `display` de autor — a mesma armadilha da § 6
   das diretrizes que já pegou o recado e a confirmação desta página. */
.lista__pop[hidden] { display: none; }

.lista__op {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  color: var(--light-64);
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out-soft),
    color 0.18s var(--ease-out-soft);
}

/* UMA marca de destaque só, e ela segue o TECLADO tanto quanto o
   ponteiro: `is-ativa` é escrita pelo JS no `pointermove` e nas setas,
   então não há duas opções acesas ao mesmo tempo — que é o que
   acontece quando se usa `:hover` e uma classe em paralelo. */
.lista__op.is-ativa {
  background: rgba(255, 255, 255, 0.11);
  color: var(--light-01);
}

.lista__op[aria-selected='true'] { color: var(--light-01); }

/* O tique só aparece na escolhida. */
.lista__op > svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--blue);
  transition: opacity 0.18s var(--ease-out-soft);
}

.lista__op[aria-selected='true'] svg { opacity: 1; }

.lista__op[hidden] { display: none; }

/* A linha do país: bandeira, nome e código, nessa ordem de peso. O
   código fica apagado — ele confirma, não identifica. */
.lista__op span:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lista__op b {
  font-weight: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista__op i {
  font-style: normal;
  color: var(--light-48);
}

/* O tique da opção escolhida é o ÚLTIMO filho; a bandeira dentro dela
   não pode herdar as regras dele. */
.lista__op > svg { opacity: 0; }
.lista__op .bandeira { opacity: 1; }

.campo.is-erro .lista { background: rgba(255, 154, 141, 0.16); }

/* Sem JS não há lista própria, e o `<select>` nativo continua sendo o
   campo — feio na abertura, mas inteiro. */
.campo--lista .campo__ctrl:not([hidden]) {
  display: block;
}

/* Enquanto nada foi escolhido, o texto é de marcador — não de resposta. */
.campo__ctrl:has(option[value='']:checked) { color: var(--light-48); }

/* ── A pílula ────────────────────────────────────────────────────
   Duas respostas à vista valem mais que uma lista de duas: a pergunta
   inteira fica legível e responder é um clique. O `<input>` continua
   no documento, escondido da vista mas não do teclado nem do leitor de
   tela — por isso `opacity: 0` e posição absoluta, e nunca
   `display: none`.

   As duas perguntas de qualificação ocupam a LARGURA INTEIRA: em meia
   coluna as pílulas de faturamento não cabiam lado a lado, e são elas
   que decidem se a conversa acontece. Merecem a linha delas. */
/* Os dois grupos de escolha ficam na COLUNA DA ESQUERDA, e não
   atravessando as duas. Antes eram `1 / -1` e o par de valores esticava
   por 729 — larguras que não existem em nenhum outro lugar do
   formulário, e o bloco lia como se pertencesse a outra grade.

   Preso à coluna 1, ele passa a ter os mesmos 360 do nome, do e-mail e
   do tipo de empresa. E é a mesma medida do botão de enviar logo
   abaixo: da terceira linha para baixo, TUDO no formulário vive na
   coluna da esquerda, numa régua só.

   No estreito a grade é de uma coluna e isto não muda nada. */
.campo--escolha { grid-column: 1; }

/* NUNCA em duas linhas. "Abaixo de R$ 20M" e "Acima de R$ 20M" são um
   par de escolha: quebradas uma sob a outra elas deixam de ler como
   alternativa e viram lista. Sem `wrap`, e com as pílulas podendo
   encolher, o par se aperta em vez de se partir — o padding lateral é
   o que cede primeiro, e o texto não quebra porque tem `nowrap`. */
.pilulas {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}

/* TODO par PREENCHE a linha, em metades iguais que encostam nas duas
   bordas do contêiner.

   Eu tinha feito isso só para o par de valores, e argumentado que "Sim"
   e "Não" são palavras curtas demais para virarem barras. O argumento
   olhava a pílula sozinha; o Jefferson olhou a COLUNA. Nela tudo encosta
   nas duas bordas — os seis campos, os dois seletores, o botão —, e um
   par solto no meio disso não lê como escolha compacta: lê como linha
   que não terminou. Preencher é a regra da coluna, e a exceção é que
   estava errada.

   O modificador que separava os dois grupos foi embora junto: exceção
   que deixou de existir não vira classe sem uso. */
.pilula {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0;
}

.pilula span {
  width: 100%;
  justify-content: center;
}

.pilula input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pilula span {
  display: inline-flex;
  align-items: center;
  height: var(--campo-alt);
  white-space: nowrap;
  padding: 0 clamp(14px, 2.4vw, 24px);
  border: 0;
  border-radius: var(--r-redondo);
  background: var(--campo-fundo);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.2;
  color: var(--light-64);
  transition: box-shadow 0.28s var(--ease-out-soft),
    background-color 0.28s var(--ease-out-soft),
    color 0.28s var(--ease-out-soft);
}

.pilula:hover span { background: var(--campo-fundo-alto); }

/* Escolhida, ela troca de PREENCHIMENTO — não ganha traço. */
.pilula input:checked + span {
  background: rgba(102, 148, 255, 0.32);
  color: var(--light-01);
}

.pilula input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(102, 148, 255, 0.42);
}

/* ── O erro ──────────────────────────────────────────────────────
   A mensagem nasce sem altura: se ela ocupasse espaço vazio, validar
   um campo empurraria a página inteira para baixo. E o erro também é
   preenchimento — nenhum traço vermelho em volta. */
.campo__erro {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: var(--erro-claro);
}

.campo__erro:empty { display: none; }

.campo.is-erro .campo__ctrl,
.campo.is-erro .pilula span {
  background: rgba(255, 154, 141, 0.16);
}

.campo.is-erro .campo__ico { color: var(--erro-claro); opacity: 1; }

.campo.is-erro .campo__ctrl:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 154, 141, 0.34);
}

/* ── A isca ──────────────────────────────────────────────────────
   Fora da vista pelo CSS, e não com `type="hidden"`: robô de
   formulário ignora campo escondido no HTML e preenche o que parece um
   campo de verdade. Quem preencher, não passa. */
.form__isca {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── O pé ────────────────────────────────────────────────────────── */
/* O pé repete a GRADE do formulário: duas colunas iguais e a mesma
   calha de 24. Assim o botão herda a coluna do nome e do telefone, e a
   nota herda a do e-mail e da empresa — nenhum dos dois precisa saber
   sua própria largura, e as duas peças caem na régua que já existe.

   `align-items: center` porque a nota tem três linhas e o botão uma: o
   eixo comum é o meio, não o topo. */
.form__pe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 24px;
  margin-top: 36px;
}

/* ── O botão de enviar ───────────────────────────────────────────
   Um BOTÃO, com cara de botão: chapa cheia, canto do mesmo raio dos
   campos, e a seta do site dentro.

   A `.cta-seta` do resto do site não serve aqui, e o motivo é de
   função e não de gosto: ela é a CTA de uma seção — texto solto mais
   uma elipse —, e lê como link. No fim de um formulário de oito
   campos, o que fecha a ação precisa parecer clicável sem que ninguém
   precise decidir se é. Ela continua sendo a CTA secundária, na tela
   de confirmação.

   Branco sobre o vidro escuro: é o maior contraste disponível na
   página, que é o que o botão primário merece. */
/* A LARGURA É A DE UMA COLUNA do formulário, e é calculada a partir da
   própria grade: `.form__grade` tem duas colunas iguais e 24 de calha,
   então uma coluna é `(100% - 24) / 2`. Amarrar o botão à mesma régua
   dos campos que estão acima dele é o que faz a coluna ler como coluna;
   um valor fixo (o desenho traz 331) descolaria na primeira vez que a
   largura da página mudasse. */
.btn-envia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* A largura vem da CÉLULA da grade do pé, que é a mesma coluna dos
     campos acima. Era um `calc` que refazia a conta da grade à mão;
     agora ela não é refeita, é herdada. */
  width: 100%;
  height: var(--campo-alt);
  gap: 12px;
  padding: 0 28px;
  border: 0;
  border-radius: 12px;
  background: var(--light-01);
  box-shadow: 0 8px 24px rgba(6, 5, 4, 0.26);
  /* a luz nasce dentro e é cortada pela borda arredondada */
  position: relative;
  overflow: clip;
  isolation: isolate;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--cta-corpo);
  line-height: 1.2;
  letter-spacing: 0.021em;
  text-transform: uppercase;
  color: var(--dark-01);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out-soft),
    transform 0.4s var(--ease-out-expo),
    box-shadow 0.4s var(--ease-out-expo);
}

.btn-envia svg {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform 0.4s var(--ease-out-expo);
}

/* ── O HOVER ─────────────────────────────────────────────────────
   Ele era um `translateY(-1px)` e uma sombra maior — tímido para o
   botão que fecha a página. Passa a usar o vocabulário da `.cta-seta`
   da home, com as mesmas variáveis de tempo, em três camadas:

   A LUZ. Um halo do degradê da marca que nasce em 55% e abre até o
   tamanho cheio, atrás da seta. Na CTA ele acende sobre fundo escuro;
   aqui o botão é branco, então o mesmo degradê entra como um rubor
   quente que vira violeta e azul na direção da seta. É a única cor de
   marca que existe neste canto da página.

   A TROCA DE SETAS. Duas, e não uma que se desloca: a da frente voa
   para fora pela diagonal e a de trás entra pela diagonal oposta, com
   um atraso curto. O atraso existe SÓ na entrada — ao tirar o cursor as
   duas voltam juntas, senão a saída fica arrastada. Mesma regra da CTA.

   AS LETRAS. Cada uma vira azul no seu tempo, da esquerda para a
   direita, no mesmo passo de 26ms da home. Sem JS o rótulo não tem
   letras separadas e a transição acontece no bloco inteiro — o efeito
   degrada para uma cor só, que continua certo. */
/* O botão NÃO se desloca. Ele tinha um `translateY(-2px)` com sombra
   maior, e isso disputava com o preenchimento: o degradê varre e a
   caixa pula ao mesmo tempo, dois movimentos na mesma peça. Parada, ela
   deixa a varrida ser o acontecimento — que é o que o hover quer dizer.

   A sombra também não muda: ela existe para levantar o botão do escuro
   da página, e crescer no hover era o mesmo "levantar" dito de novo. */

/* ── o preenchimento ───────────────────────────────────────────
   O degradê da marca PREENCHE o botão, varrendo da esquerda para a
   direita — a mesma direção da onda da malha e da ordem de entrada da
   página. Ele chega na seta no fim do movimento, que é onde o gesto do
   botão aponta.

   É `clip-path` e não `scaleX`. Com escala o degradê seria esticado
   durante a varrida: as três cores nasceriam comprimidas num canto e se
   abririam junto com a caixa, o que lê como borracha. Com recorte o
   degradê já está inteiro no lugar desde o primeiro quadro e o que se
   move é só a janela que o revela — as cores ficam paradas e a frente
   passa por cima delas. */
.btn-envia__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #ffbe78 0%, #e992ff 52%, #6694ff 100%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.62s var(--ease-out-expo);
}

.btn-envia:not([disabled]):hover .btn-envia__fundo {
  clip-path: inset(0 0 0 0);
}

/* ── o rótulo ──────────────────────────────────────────────────
   A cor NÃO muda, e isso é medição: sobre as três paradas do degradê o
   texto escuro dá 10,6 · 8,2 · 5,96 de contraste, e o branco dá
   1,63 · 2,10 · 2,90 — reprova nas três. Quem preenche é o fundo; o
   rótulo continua onde estava.

   O que as letras fazem é SUBIR, uma a uma, no passo de 26ms da home.
   É o mesmo escalonamento de antes, sem a cor: a frente do degradê
   passa por baixo delas e elas cedem, como se fossem empurradas. */
.btn-envia__txt {
  position: relative;
  z-index: 1;
}

.btn-envia__txt span {
  display: inline-block;
  transition: transform 0.34s var(--ease-out-expo);
}

.btn-envia:not([disabled]):hover .btn-envia__txt span {
  transform: translateY(-2px);
  transition-delay: calc(var(--i, 0) * var(--cta-letra));
}

/* ── as duas setas ─────────────────────────────────────────────── */
/* 14 e não 12, e traço de 1,5 e não 0,9. A seta sumia quando o degradê
   chegava nela: no fim da varrida o fundo é o azul da marca, e um traço
   de 0,9 sobre ele deixa de existir mesmo com o contraste da COR
   passando — contraste é do par de cores, presença é da quantidade de
   tinta, e ela não tinha nenhuma. O rótulo ao lado tem 14px em peso
   500; a seta agora pesa o mesmo. */
.btn-envia__seta {
  position: relative;
  z-index: 1;
  flex: none;
  width: 14px;
  height: 14px;
  /* é o que corta a seta que voa para fora */
  overflow: clip;
}

.btn-envia__glifo {
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  transition: transform var(--cta-dur) var(--ease-out-expo),
    color var(--cta-dur) var(--ease-out-soft);
}

/* 12 e não os 16 da CTA: lá a elipse tem 31px, aqui a seta tem 14. O
   deslocamento é proporcional à caixa que o corta. */
.btn-envia__seta { --voa: 12px; }

.btn-envia:not([disabled]):hover .btn-envia__glifo--sai {
  transform: translate(var(--voa), calc(var(--voa) * -1));
}

.btn-envia__glifo--entra {
  transform: translate(calc(var(--voa) * -1), var(--voa));
}

.btn-envia:not([disabled]):hover .btn-envia__glifo--entra {
  transform: none;
  transition-delay: var(--cta-atraso);
}

/* O clique afunda a sombra por um instante: é o único lugar onde a
   profundidade responde, e ali ela responde ao dedo, não ao cursor. */
.btn-envia:active {
  box-shadow: 0 4px 14px rgba(6, 5, 4, 0.3);
}

.btn-envia:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(102, 148, 255, 0.55);
}

/* Enquanto o envio corre o botão está desabilitado, e o hover inteiro
   fica de fora: preencher de degradê um botão que não aceita clique
   promete uma ação que não vai acontecer. Por isso cada regra de hover
   acima pede `:not([disabled])`. */
.btn-envia[disabled] {
  cursor: progress;
  opacity: 0.62;
  transform: none;
}

/* O escudo não é enfeite: ele é o que faz a linha ser LIDA. Um
   parágrafo de 12px apagado no canto de um formulário é exatamente o
   que o olho pula — e é justamente ali que está o link da política de
   privacidade, que precisa ser encontrável. */
/* A nota fica AO LADO do botão, na coluna do e-mail. Ela não declara
   largura: ocupa a célula. */
.form__nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.45;
  color: var(--light-48);
}

.form__nota svg {
  width: 16px;
  height: 16px;
  flex: none;
  /* Alinhado à primeira linha, e não ao bloco: com duas linhas de
     texto, centrar deixaria o ícone flutuando no meio da frase. */
  margin-top: 1px;
  opacity: 0.9;
}

.form__nota a {
  color: var(--light-64);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  transition: color 0.24s var(--ease-out-soft),
    text-decoration-color 0.24s var(--ease-out-soft);
}

.form__nota a:hover {
  color: var(--light-01);
  text-decoration-color: rgba(255, 255, 255, 0.7);
}

/* `[hidden]` PERDE para `display` de autor — a armadilha da § 6 das
   diretrizes, e eu caí nela aqui: o recado e a confirmação declaram
   `display: flex`, então nasciam VISÍVEIS apesar do atributo. A
   confirmação aparecia junto do formulário, dizendo que a mensagem
   tinha sido recebida antes de alguém preencher qualquer coisa.
   Qualquer caixa desta página que se esconda por atributo precisa
   desta linha. */
.form__recado[hidden],
.form[hidden] {
  display: none;
}

.form__recado {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(255, 154, 141, 0.14);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.45;
  color: var(--erro-claro);
}


/* ═════════════════════════════════════════════════════════════════
   O MOTION DA ABERTURA
   ═════════════════════════════════════════════════════════════════
   Um convite se apresenta. A ordem é a da leitura, e cada peça entra
   depois da que a explica:

     etiqueta → linhas do título → lede → endereços
     ambiente (a foto respira para trás) → malha
     vidro → título do painel → campos, um a um → o pé

   A foto começa 8% maior e assenta em 1,9s: é o único movimento longo
   da página, e é ele que dá a sensação de porta se abrindo. Os campos
   entram DEPOIS do vidro porque um campo flutuando antes do painel que
   o contém lê como erro de carregamento.

   Tudo é `transition` sobre classe, e não `@keyframes` por elemento —
   o mesmo contrato do resto do site (`is-ready`, `data-rise`), o que
   deixa o `prefers-reduced-motion` desligar a página inteira de uma
   vez. */
.js .ct-foto img {
  transform: scale(1.08);
  transition: transform 2s var(--ease-out-expo);
}

.js.is-ready .ct-foto img { transform: scale(1); }

/* ── A ORDEM DE ENTRADA DA PÁGINA ────────────────────────────────
   Esquerda para a direita, de cima para baixo — que é a ordem em que se
   lê a página, e por isso a única que não obriga o olho a voltar.

   COLUNA DA ESQUERDA (o cartão)      COLUNA DA DIREITA (o formulário)
     60ms   a superfície do cartão      520ms  nome
    300ms   a etiqueta                  580ms  e-mail
    380ms   o título, linha a linha     640ms  telefone
    560ms   o lede                      700ms  empresa
    680ms   os endereços                760ms  tipo da empresa
                                        820ms  como nos conheceu
                                        880ms  atende planos
                                        940ms  faturamento
                                       1020ms  botão e nota

   As duas colunas se SOBREPÕEM no meio, de propósito. Estritamente
   sequencial — a esquerda inteira e só então a direita — o formulário
   começaria a existir depois de 800ms e a página pareceria travada. O
   que a ordem precisa preservar é a sequência de PRIMEIRA APARIÇÃO de
   cada peça, e essa continua sendo esquerda→direita, cima→baixo.

   Os campos seguem a ordem do DOM, e ela já é a de leitura: a grade é
   de duas colunas e os campos entram linha por linha.

   `is-ready` e não `is-seen`: a página inteira está acima da dobra
   quando abre, e pendurar isto num IntersectionObserver seria esperar
   por um evento que já aconteceu. */
.js .ct-form-col .campo,
.js .ct-form-col .form__pe {
  opacity: 0;
  transform: translateY(12px);
}

.js.is-ready .ct-form-col .campo,
.js.is-ready .ct-form-col .form__pe {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out-soft) var(--dd, 0ms),
    transform 0.72s var(--ease-out-expo) var(--dd, 0ms);
}

.js .ct-form-col .campo:nth-child(1) { --dd: 0.52s; }
.js .ct-form-col .campo:nth-child(2) { --dd: 0.58s; }
.js .ct-form-col .campo:nth-child(3) { --dd: 0.64s; }
.js .ct-form-col .campo:nth-child(4) { --dd: 0.7s; }
.js .ct-form-col .campo:nth-child(5) { --dd: 0.76s; }
.js .ct-form-col .campo:nth-child(6) { --dd: 0.82s; }
.js .ct-form-col .campo:nth-child(7) { --dd: 0.88s; }
.js .ct-form-col .campo:nth-child(8) { --dd: 0.94s; }
.js .ct-form-col .form__pe { --dd: 1.02s; }

/* Quem pediu menos movimento recebe a página inteira, parada e
   completa — nada de meia-entrada. */
@media (prefers-reduced-motion: reduce) {
  .js .ct-titulo .line__i { transform: none; transition: none; }

  .js .ct-foto img,
  .js .ct-form-col .campo,
  .js .ct-form-col .form__pe {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .ct-malha i { animation: none; }
  .ct-malha { transition: none; }
}

/* ── Estreito ────────────────────────────────────────────────────
   Uma coluna. Dois campos lado a lado em 320px de tela dariam 140px
   por campo, e "voce@hospital.com.br" não cabe em 140. */
@media (max-width: 1060px) {
  .ct-grade {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  /* Empilhado, o cartão deixa de ter a altura do formulário e passa a
     ser uma FAIXA fotográfica: sem isto ele nasceria da altura do texto
     e o retrato viraria uma tira de 200px. */
  .ct-cartao { min-height: 420px; }

  .ct-form-col { padding-block: 0; }
}

/* ── Estreito ────────────────────────────────────────────────────
   Aqui a grade já empilhou, e o que valia no largo deixa de valer: os
   vãos do desktop foram calculados para uma coluna de 440 ao lado de um
   painel de 680, e repetidos numa tela de 375 eles viram rolagem. Esta
   faixa COMPACTA — espaço e tipo — em vez de reproduzir o largo. */
@media (max-width: 900px) {
  /* SEM respiro no topo: a fotografia começa no pixel zero e corre por
     baixo da barra de navegação, que é fixa e translúcida. Um vão
     escuro acima da foto transformava o cartão numa figura colada na
     página em vez da abertura dela. */
  /* Nem em cima nem embaixo. A fotografia começa no pixel zero, e a
     faixa dos endereços TERMINA a seção — ela sangra a calha e é o
     último bloco antes do rodapé, então qualquer respiro aqui vira uma
     tira do fundo da página entre duas superfícies que deveriam se
     encostar. O respiro que a faixa precisa é o `padding` dela. */
  .ct-palco {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Empilhado, a grade tem uma coluna e TRÊS linhas: cartão, formulário
     e a faixa dos endereços. O `grid-area` do largo é desfeito aqui —
     senão eles continuariam grudados na base do cartão. */
  .ct-grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'cartao' 'form' 'enderecos';
    row-gap: 36px;
  }

  .ct-enderecos {
    grid-area: enderecos;
    align-self: auto;
    margin: 0;
    /* Faixa PRÓPRIA: sangra a calha e sobe meio tom do fundo da página,
       para o bloco se declarar como o rodapé do conteúdo em vez de
       ficar solto no escuro logo abaixo da nota de privacidade. */
    margin-inline: calc(var(--gutter) * -1);
    padding: 28px var(--gutter);
    background: rgba(255, 255, 255, 0.04);
  }

  /* Sem os endereços dentro dele, o cartão não reserva mais nada. */
  .ct-cartao__pe { padding-bottom: 0; }

  /* O cartão SANGRA a calha e o topo. Numa tela de 375 um cartão com 20
     de cada lado deixa o retrato com 335 de largura e some com a
     fotografia; de borda a borda ele volta a ser presença. O
     `border-radius` cai junto — canto arredondado encostado na borda da
     tela lê como defeito.

     Os 96 de topo não são respiro: são a altura que tira a etiqueta de
     baixo da barra fixa. */
  /* No estreito a ETIQUETA desce e encosta no título. Em cima ela caía
     no meio do rosto, que é o pior lugar possível: disputa o olhar com
     a pessoa e ainda assenta sobre pele clara. Colada ao título ela
     volta a ser o que é — o rótulo daquele bloco de texto.

     O `flex-end` é o que faz isso: a etiqueta e o pé do cartão são
     IRMÃOS na coluna, e trocar `space-between` por `flex-end` desce os
     dois juntos, sem mexer no DOM. O `gap` de 14 é o vão entre eles. */
  .ct-cartao {
    margin-inline: calc(var(--gutter) * -1);
    padding: 24px;
    border-radius: 0;
    /* A imagem precisa de ALTURA para o texto não assentar no queixo.
       Com 460 o bloco de texto começava na altura do rosto; a 560 o
       retrato inteiro cabe acima dele e o texto encontra o ombro e a
       mão, que é onde a foto já é escura. */
    min-height: 560px;
    justify-content: flex-end;
    gap: 14px;
  }

  /* O enquadramento sobe junto: com o cartão mais alto, a cabeça fica
     no terço de cima em vez de centralizada sobre o texto. 16 e não 18
     (2026-09-27, medido com o rosto do Vision): a 768 o 18 cortava o alto
     da cabeça; a 900, onde o cartão é mais baixo que a cabeça, o 16
     guarda testa e queixo e perde só a folga do cabelo. */
  .ct-cartao__foto { object-position: 50% 16%; }

  .form__grade {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* Um número só desce a altura de TUDO — campo, telefone, seletor,
     pílula e botão. 50 continua muito acima dos 44 de alvo de toque que
     a WCAG pede. O `font-size` NÃO desce daqui: a regra dos 16px logo
     abaixo existe para o iOS não dar zoom ao focar o campo. */
  .contato { --campo-alt: 50px; }

  /* Dedo é maior que ponteiro: a opção sobe para 48 de altura útil. */
  .lista__op { padding: 16px 14px; }
  .lista__rolo { max-height: 280px; }

  /* No estreito o balão do país ocupa o campo inteiro. Com os 300 de
     largura mínima do desktop ele saía 25px para fora do painel —
     medido a 375. */
  .tel-pais .lista__pop {
    right: 0;
    min-width: 0;
  }

  .campo__ctrl { font-size: 16px; } /* 16 evita o zoom automático do iOS */

  /* Empilhado, o pé volta a ser uma coluna: botão em cima, nota
     embaixo. Lado a lado numa tela de 375 cada um teria 155. */
  .form__pe {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    margin-top: 24px;
  }
}

/* ── Celular ─────────────────────────────────────────────────────
   A segunda apertada, e esta mexe na TIPOGRAFIA. Um título de 34 numa
   tela de 375 come três linhas e um terço da altura útil antes de a
   pessoa ler o que a página oferece. */
@media (max-width: 560px) {

  .ct-grade { row-gap: 28px; }

  .ct-cartao { padding: 20px; min-height: 520px; gap: 12px; }
  .ct-cartao__pe { gap: 18px; }

  /* As etiquetas no corpo 10 das do site no celular (`--tag-corpo`),
     desde 2026-09-28: eram 11, e a régua de pares (§ 3.13) não levou a
     12 para o rótulo "Case" não empatar com o título do card. */
  .ct-tag { font-size: var(--tag-corpo); }
  .ct-titulo { font-size: 26px; letter-spacing: -0.012em; }
  .ct-texto { gap: 10px; }
  .ct-lede { font-size: 14px; }

  .ct-enderecos { gap: 8px; }
  .ct-enderecos li { font-size: 12px; }

  .form__grade { gap: 16px; }

  .campo__rot { font-size: 10px; }
  .contato { --campo-alt: 48px; }

  .form__pe { margin-top: 20px; }
}

/* ═════════════════════════════════════════════════════════════════
   A PÁGINA DE OBRIGADO · Figma 1109:2109
   ═════════════════════════════════════════════════════════════════
   A composição vem da ABERTURA DA HOME, não desta página: altura de
   tela, conteúdo ancorado no rodapé, `space-between` entre um bloco
   grande à esquerda e um pequeno à direita. É o `.hero` do site, e é
   por isso que a página pertence ao conjunto sem inventar padrão.

   E NÃO tem vidro. Na /contato o vidro existe para deixar um formulário
   legível sobre a foto. Aqui não há formulário — o painel só cobriria a
   melhor parte da fotografia sem fazer trabalho nenhum. A sala é a
   página, e o único plano que sobe dela é o cartão do case, que precisa
   de superfície porque carrega texto pequeno sobre a madeira clara.
   ═════════════════════════════════════════════════════════════════ */

.ob {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* `svh` e não `vh`: no celular a barra do navegador entra e sai, e
     `100vh` mede a tela SEM a barra — a seção nasceria mais alta que o
     visível e empurraria conteúdo para fora na primeira pintura. É a
     mesma medida que o `.hero` da home usa. */
  min-height: 100svh;
  padding: 102px var(--gutter) 32px;
  overflow: clip;
  isolation: isolate;
  color: var(--light-01);
}

.ob__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: clip;
}

.ob__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* NO LARGO NÃO HÁ VÉU, e isso é medição, não gosto.

   O Figma não desenha véu, e eu quase acrescentei um "por segurança".
   Medi antes: no ponto onde cada texto assenta a 1440, o contraste
   contra a própria fotografia é de 18,1:1 no título, 17,3:1 no lede e
   8,2:1 no botão de voltar — o canto de baixo desta foto é a cadeira e
   a mesa na sombra, e é genuinamente escuro. Um véu ali só apagaria a
   sala sem comprar nada.

   NO ESTREITO É OUTRA FOTO. Com `cover` numa tela de 375, o recorte cai
   no CENTRO da imagem, que é a parede batida de sol: a etiqueta caía
   para 3,2:1, abaixo dos 4,5 que texto pequeno exige. Por isso o véu
   existe só a partir de 900, e é lá embaixo que ele está declarado. */

/* NO LARGO, um véu só no ALTO — depois que o menu perdeu o desfoque
   (2026-09-18). A parede batida de sol atrás da barra tinha a mesma cor
   do seletor de idioma ("a parte superior da imagem é da mesma cor do
   seletor"), e os rótulos do menu caíam a 1,1:1 sobre a janela. O
   degradê escurece a faixa da barra e some antes do meio da tela; o
   canto de baixo continua sem véu, pelo motivo medido acima. */
.ob__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10, 9, 8, 0.5) 0%,
    rgba(10, 9, 8, 0.34) 96px,
    rgba(10, 9, 8, 0) 300px
  );
}

/* A malha de pontos, na mesma escala da /contato. */
/* A malha entra por CIMA e se dissolve para baixo — o contrário da
   primeira versão, que a trazia do rodapé. É a leitura certa aqui: o
   terço de baixo já é o do tipo e o do cartão, e ali a malha disputava
   atenção com o texto; no alto ela tem parede e luz para pontuar, e
   entrega a página para a fotografia à medida que se desce. */
.ob__malha {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 68%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 68%);
}

.ob__malha i {
  position: absolute;
  inset: -20%;
  display: block;
  /* Passo de 13, metade dos 26 anteriores. Com a malha em cima do
     claro da parede, o ponto perde contraste — a densidade dobrada é o
     que mantém a textura perceptível sem engrossar o ponto, que
     viraria ruído. */
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 12px 12px;
}

/* ── O conteúdo ──────────────────────────────────────────────────
   Largura TOTAL, na calha de 32 que o menu e o rodapé usam. */
.ob__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* ── A etiqueta ──────────────────────────────────────────────────── */
.ob__tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 12px;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* O quadrado é o mesmo marcador que abre as seções do site. */
.ob__tag::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--light-48);
}

.ob__tag__pre { color: var(--light-64); }
.ob__tag__nome { color: rgba(255, 255, 255, 0.88); }

/* ── A linha de baixo ────────────────────────────────────────────
   `flex-end` alinha os dois blocos pela BASE, e não pelo topo: é o que
   faz o pé do cartão e o pé do botão de voltar assentarem na mesma
   linha, que é a única régua horizontal que esta página tem. */
.ob__linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
}

.ob__texto {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 604px;
}

/* 48 no Figma. O `clamp` mantém a razão em telas maiores e desce sozinho
   nas menores — 3,33vw é 48 ÷ 1440. O peso é LIGHT, meio degrau abaixo
   do título da /contato: aqui a página não pede nada, ela agradece. */
.ob__titulo {
  font-weight: 300;
  /* No estreito o título cabe numa linha só: a 30px "Recebemos o seu
     contato." mede 358 numa caixa de 335 e quebrava em "Recebemos o /
     seu contato." ("essa quebra está feia demais"). 7,2vw dá 27px a
     375 (320 de texto) e 23 a 320. Acima de ~415 o clamp de sempre. */
  font-size: min(clamp(30px, 3.33vw, 48px), 7.2vw);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.ob__lede {
  margin-top: -20px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.8;
  text-wrap: pretty;
}

/* O "Voltar ao início" (elipse + seta para a esquerda) subiu para o
   `componentes.css` como `.voltar` em 2026-09-17, quando a 404 virou a
   segunda página a usá-lo. */

/* ── O cartão do case ────────────────────────────────────────────
   É o único plano que sobe da fotografia, e sobe porque precisa: texto
   de 12 e 16 sobre a madeira clara da mesa não se lê. */
.ob__case {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  width: 432px;
  padding: 8px;
  border-radius: 20px;
  /* Vidro CLARO: branco a 12% com desfoque, a pedido do Jefferson em
     2026-09-18 (era preto a 24%). O desfoque continua fazendo o
     trabalho de legibilidade; o branco só dá a temperatura de vidro. */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out-soft);
}

.ob__case:hover { background: rgba(255, 255, 255, 0.18); }

.ob__case-foto {
  flex: none;
  /* Sempre quadrada, e com a ALTURA do cartão: quem mede o texto e
     escreve `--ob-foto` é o `js/obrigado.js` (o porquê está lá). Sem JS
     ficam os 108 do Figma. Pedido do Jefferson, 2026-09-18. */
  width: var(--ob-foto, 108px);
  height: var(--ob-foto, 108px);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  object-fit: cover;
}

.ob__case-txt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.ob__case-rot {
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--light-64);
}

.ob__case-tit {
  font-weight: 400;
  /* 14 e não 16: o cartão é um convite ao lado da mensagem, não a
     mensagem — "reduzir o texto da descrição pra deixar o card mais
     compacto" (2026-09-18). */
  font-size: 14px;
  line-height: 1.45;
  color: var(--light-01);
  text-wrap: pretty;
}

.voltar__elipse--card {
  align-self: flex-start;
  width: 24px;
  height: 24px;
  /* O vetor do Figma aponta para baixo e à direita, e é espelhado no
     eixo Y pelo próprio arquivo. Aqui o espelho é CSS. */
  transform: scaleY(-1);
}

.ob__case:hover .voltar__elipse--card {
  background: rgba(255, 255, 255, 0.36);
  transform: scaleY(-1) translate(2px, 2px);
}

.ob__case:focus-visible {
  outline: 2px solid var(--light-01);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── Estreito ────────────────────────────────────────────────────
   O cartão e o texto disputariam a mesma faixa numa tela de 375, então
   a linha deixa de ser linha: o texto em cima, o cartão embaixo, os
   dois em largura cheia. A seção CONTINUA com `min-height: 100svh` —
   não para forçar a composição de tela cheia, e sim porque é isso que
   garante que o rodapé não apareça quando alguém chega na página. */
@media (max-width: 900px) {
  .ob {
    padding-top: 96px;
    padding-bottom: 28px;
  }

  /* O véu que o largo não precisa. Sobe até 72% porque a ETIQUETA é o
     texto mais alto do bloco e o mais apagado — com o degradê parando
     em 56% ela pegava só 0,15 de alfa e ficava em 4,15:1. */
  .ob::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(10, 9, 8, 0.88) 0%,
      rgba(10, 9, 8, 0.78) 22%,
      rgba(10, 9, 8, 0.54) 46%,
      rgba(10, 9, 8, 0) 72%
    );
  }

  .ob__linha {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .ob__texto { gap: 22px; max-width: none; }
  .ob__lede { margin-top: -14px; }

  .ob__case { width: 100%; }
}

@media (max-width: 560px) {
  .ob { padding-bottom: 24px; }

  .ob__inner { gap: 8px; }
  .ob__tag { padding-block: 8px; font-size: var(--tag-corpo); }

  .ob__linha { gap: 26px; }
  .ob__texto { gap: 18px; }

  .ob__titulo { letter-spacing: -0.014em; }
  .ob__lede { margin-top: -10px; font-size: 14px; }

  .voltar__txt { font-size: 12px; letter-spacing: 0.06em; }

  .ob__case { gap: 12px; border-radius: 16px; }
  .ob__case-foto { border-radius: 10px; }
  .ob__case-rot { font-size: var(--tag-corpo); }
  .ob__case-tit { font-size: 12px; }
}