/* ═══════════════════════════════════════════════════════════════
   Estilo próprio desta página.

   Os tokens da marca vêm de shared/css/tokens.css, que carrega antes
   deste arquivo. Nunca repita um hex aqui: use a variável. Se faltar
   um token, o lugar de criar é o tokens.css, para todas as páginas
   ganharem junto.
   ═══════════════════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  font-family: var(--cdv-corpo);
  font-size: clamp(16px, 1.05vw + 13px, 18px);
  line-height: 1.65;
  color: var(--cdv-cafe);
  background: var(--cdv-creme);
  /* a textura de pontinhos é parte da assinatura visual */
  background-image: radial-gradient(var(--cdv-borda) 1px, transparent 1px);
  background-size: 22px 22px;
}

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

h1, h2, h3 {
  font-family: var(--cdv-titulo);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 var(--cdv-esp-4);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }

em {
  font-family: var(--cdv-enfase);
  font-style: italic;
  color: var(--cdv-terracota);
}

p { margin: 0 0 var(--cdv-esp-4); max-width: var(--cdv-largura-texto); }

a { color: var(--cdv-terracota); }
a:hover { color: var(--cdv-terracota-esc); }

:focus-visible { outline: 3px solid var(--cdv-terracota); outline-offset: 3px; }
::selection { background: var(--cdv-terracota); color: var(--cdv-creme); }

/* ── Estrutura ───────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--cdv-largura);
  margin-inline: auto;
  padding-inline: var(--cdv-respiro);
}
.wrap-estreito { max-width: 620px; }

.sec { padding-block: clamp(48px, 8vw, 104px); }
.sec-papel { background: var(--cdv-creme); }
.sec-linho { background: var(--cdv-creme-linho); }
.sec-cafe  { background: var(--cdv-cafe); color: var(--cdv-creme); }
.sec-cafe h2 { color: var(--cdv-creme); }
.sec-cafe em { color: var(--cdv-salmao); }
.borda-y { border-block: 2px solid var(--cdv-borda); }

/* ── Hero ────────────────────────────────────────────────────── */

.hero {
  background: var(--cdv-cafe);
  color: var(--cdv-creme);
  padding-block: clamp(56px, 11vw, 132px);
}
.hero-conteudo {
  max-width: var(--cdv-largura);
  margin-inline: auto;
  padding-inline: var(--cdv-respiro);
}
.hero h1 { color: var(--cdv-creme); }
.hero em { color: var(--cdv-salmao); }
.hero-sub {
  font-size: 1.12em;
  color: color-mix(in srgb, var(--cdv-creme) 82%, transparent);
}
.logo { margin-bottom: var(--cdv-esp-6); }

/* ── Botão ───────────────────────────────────────────────────── */

.botao {
  display: inline-block;
  font-family: var(--cdv-titulo);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--cdv-creme);
  background: var(--cdv-terracota);
  border: 2px solid var(--cdv-vinho);
  border-radius: var(--cdv-raio);
  padding: 18px 32px;
  min-height: 56px;
  box-shadow: var(--cdv-sombra);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.botao:hover {
  color: var(--cdv-creme);
  background: var(--cdv-terracota-esc);
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--cdv-vinho);
}
.botao:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--cdv-vinho); }
.botao-bloco { display: block; width: 100%; text-align: center; }

/* ── Formulário ──────────────────────────────────────────────── */

.form { display: grid; gap: var(--cdv-esp-4); margin-top: var(--cdv-esp-5); }
.form label { display: grid; gap: var(--cdv-esp-2); }
.form label span { font-size: .92rem; font-weight: 600; }
.form input {
  font: inherit;
  color: var(--cdv-cafe);
  background: var(--cdv-creme);
  border: 2px solid var(--cdv-vinho);
  border-radius: var(--cdv-raio-sm);
  padding: 14px 16px;
  min-height: 52px;
  width: 100%;
}
.form input[aria-invalid="true"] { border-color: var(--cdv-erro); }

/* Honeypot: invisível para gente, preenchível por robô. */
.ref-interno {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-erro {
  margin: 0;
  color: var(--cdv-salmao);
  font-size: .92rem;
}

/* ── Rodapé ──────────────────────────────────────────────────── */

.rodape {
  background: var(--cdv-creme-linho);
  border-top: 2px solid var(--cdv-borda);
  padding-block: var(--cdv-esp-7);
  font-size: .92rem;
}
.rodape .logo { margin-bottom: var(--cdv-esp-4); }
.rodape p { margin-bottom: var(--cdv-esp-2); }

/* A entrada suave por rolagem saiu em 22/08/2026. A página tem um
   momento de movimento só, que é a pilha de fotos do hero, e cinco
   blocos aparecendo por conta própria competiam com ele. Menos um
   caminho que depende de observador para o conteúdo existir. */

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

/* ═══════════════════════════════════════════════════════════════
   Lista de espera. O que esta página acrescenta ao template.

   Uma decisão estética, e só uma: o formulário é uma ficha de
   empréstimo de biblioteca, com a sombra dura da marca. O resto da
   página fica quieto em volta dela, porque a página inteira existe
   para esse card ser preenchido.
   ═══════════════════════════════════════════════════════════════ */

/* ── A ficha ─────────────────────────────────────────────────── */

.ficha {
  background: var(--cdv-creme);
  color: var(--cdv-cafe);
  border: 2px solid var(--cdv-vinho);
  border-radius: var(--cdv-raio);
  box-shadow: var(--cdv-sombra-lg);
  padding: clamp(20px, 4vw, 32px);
}

.ficha-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cdv-esp-2);
  padding-bottom: var(--cdv-esp-3);
  border-bottom: 2px solid var(--cdv-borda);
}
.ficha-titulo {
  font-family: var(--cdv-titulo);
  font-size: 1.5rem;
  line-height: 1.1;
}
.ficha-selo {
  font-family: var(--cdv-corpo);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cdv-cafe-suave-forte);
}

/* O template pinta nota e erro para fundo escuro. Aqui o fundo é claro. */
.ficha .form { margin-top: var(--cdv-esp-4); }
.ficha .ficha .form-erro { color: var(--cdv-erro); font-weight: 600; }

/* ── Duas colunas de texto ───────────────────────────────────── */

.duas-colunas {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .duas-colunas { grid-template-columns: 1.2fr .8fr; }
}

.lista {
  list-style: none;
  margin: 0;
  padding: var(--cdv-esp-4) var(--cdv-esp-5);
  background: var(--cdv-creme-linho);
  border: 2px solid var(--cdv-vinho);
  border-radius: var(--cdv-raio);
  box-shadow: var(--cdv-sombra);
}
.lista li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--cdv-borda);
}
.lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista li:first-child { padding-top: 0; }
.lista li::before {
  position: absolute;
  left: 0;
  font-family: var(--cdv-corpo);
  font-weight: 700;
}
.lista-sim li::before { content: "+"; color: var(--cdv-terracota-esc); }

/* O fecho é o único bloco centrado da página. Ele não tem coluna
   vizinha nem continuação, e centrado ele lê como ponto final. */
.sec-cafe .wrap-estreito { text-align: center; }
.sec-cafe .wrap-estreito p { margin-inline: auto; }
.sec-cafe .botao { margin-top: var(--cdv-esp-3); }

.aviso-secundario {
  font-size: .9rem;
  color: var(--cdv-cafe-suave-forte);
  background: var(--cdv-creme-linho);
  border-radius: var(--cdv-raio-sm);
  padding: var(--cdv-esp-3) var(--cdv-esp-4);
  margin-top: var(--cdv-esp-5);
}

/* ── Acessibilidade e textura ────────────────────────────────── */

/* O terracota puro sobre creme dá 3,99:1, e texto normal precisa de
   4,5:1. Em título grande ele passa e continua sendo o acento da
   marca. Em link e em texto corrido, o degrau escuro assume. */
/* O :not(.botao) não é preciosismo. `.ficha a` tem especificidade maior
   que `.botao`, então sem ele o rótulo do botão herda a cor de link e
   fica terracota escuro sobre terracota: 2,1:1, ilegível. Aconteceu na
   página de obrigado, onde o botão é um link e não um <button>. */
main a:not(.botao), .rodape a:not(.botao), .ficha a:not(.botao) { color: var(--cdv-terracota-esc); }
main a:not(.botao):hover, .rodape a:not(.botao):hover, .ficha a:not(.botao):hover { color: var(--cdv-cafe); }

/* A textura de pontinhos do body fica escondida quando a seção pinta
   creme por cima. Aqui ela aparece, que é o papel da marca. */
.sec-papel { background: transparent; }

/* O creme sobre terracota dá 3,99:1, e o mínimo do WCAG AA para texto
   normal é 4,5:1. A saída preferida é aumentar o tamanho antes de trocar
   a cor, porque o terracota é a cor de ação da marca e não está em
   discussão: a 24px o rótulo vira texto grande, o mínimo cai para 3:1 e
   o botão passa sem perder o acento. */
.botao { font-size: 1.5rem; padding: 16px 32px; }

/* O topo da ficha estava com o texto encostando na linha de baixo. */
.ficha-topo { padding-bottom: var(--cdv-esp-4); }

/* ═══════════════════════════════════════════════════════════════
   A PILHA. O único momento de movimento da página.

   Três fotos da Val ao fundo do hero, em duotone café e creme assado
   no arquivo. Elas ficam empilhadas como fotografia revelada: a de
   cima sai andando para o lado, com uma inclinação mínima, e a de
   baixo cresce para o lugar dela.

   Três regras de execução, e a terceira foi a mais cara de aprender:

   1. Só transform e opacity animam. Nada de filter, nada de
      background-position, nada de width ou height.
   2. O véu por cima não é estética, é contraste: o texto creme do
      hero precisa de 4,5:1 e a foto é de alta chave.
   3. O véu tem um teto. Passando de 0,75 de café a foto vira mancha
      e não se reconhece mais ninguém nela. Os valores abaixo foram
      medidos nos pixels do render, com as três fotos e em duas
      larguras, e não escolhidos no olho.
   ═══════════════════════════════════════════════════════════════ */

.hero { position: relative; isolation: isolate; overflow: hidden; }

.hero-conteudo {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(32px, 6vw, 56px);
  align-items: center;
}

.hero-texto h1 { margin-bottom: var(--cdv-esp-4); }
.hero .logo { margin-bottom: var(--cdv-esp-5); }

/* O navegador quebra "Cadastre-se" no hífen quando a linha aperta,
   e a palavra fica partida no meio no celular. */
.junto { white-space: nowrap; }

.etiqueta {
  display: inline-block;
  font-family: var(--cdv-corpo);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--cdv-creme);
  background: var(--cdv-terracota-esc);
  border: 2px solid var(--cdv-vinho);
  border-radius: var(--cdv-raio-pil);
  padding: 6px 16px;
  margin-bottom: var(--cdv-esp-4);
  max-width: none;
}

/* ── A pilha ─────────────────────────────────────────────────── */

.pilha {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--cdv-cafe);
  --f1: url("assets/hero/val-01-p.webp");
  --f2: url("assets/hero/val-02-p.webp");
  --f3: url("assets/hero/val-03-p.webp");
}

.chapa {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: 50% 30%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(.94);
}
.chapa[data-foto="1"] { background-image: var(--f1); }
.chapa[data-foto="2"] { background-image: var(--f2); }
.chapa[data-foto="3"] { background-image: var(--f3); }

/* A que chega estava embaixo e cresce até o lugar. */
.chapa.esta {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 520ms cubic-bezier(.22, .61, .36, 1),
    transform 900ms cubic-bezier(.22, .61, .36, 1);
}

/* A que sai passa por cima, como foto sendo tirada de um monte.
   O atraso no fade é o que separa isto de uma dissolução: primeiro a
   foto sai andando, e só depois some. Sem ele as duas ficam meio
   transparentes ao mesmo tempo no meio do caminho, e o que se vê é
   borrão de dupla exposição em vez de gesto. */
.chapa.saindo {
  z-index: 3;
  opacity: 0;
  transform: translate3d(-16%, 0, 0) scale(1.06) rotate(-1.6deg);
  transition:
    opacity 380ms linear 440ms,
    transform 860ms cubic-bezier(.32, .72, .3, 1);
}

.chapa:not(.esta):not(.saindo) { transition: none; }

/* ── O véu ───────────────────────────────────────────────────── */

/* Camada parelha, que assenta a foto na paleta e é o piso de contraste
   de tudo que vier por cima. */
.veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(78, 38, 36, .58);
}

/* Camada de composição: fecha embaixo, onde o texto e a ficha vivem no
   celular, e abre em cima, onde a foto pode aparecer. */
.veu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(78, 38, 36, 0)   0%,
    rgba(78, 38, 36, .50) 12%,
    rgba(78, 38, 36, .52) 44%,
    rgba(78, 38, 36, .22) 52%,
    rgba(78, 38, 36, .42) 100%
  );
}

/* ── Do tablet para cima ─────────────────────────────────────── */

@media (min-width: 900px) {
  .hero { padding-block: clamp(96px, 9vw, 148px); }

  .hero-conteudo {
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 64px);
  }

  /* As duas colunas encostam nas beiradas e deixam o miolo livre. É lá
     que a Val fica, e é o que evita o título passar por cima do rosto
     dela. As fotos são de alta chave e centradas: a composição precisa
     abrir espaço para elas, porque recorte não resolve. */
  .hero-texto { max-width: 470px; }
  .ficha { max-width: 470px; justify-self: end; }

  .pilha {
    --f1: url("assets/hero/val-01-l.webp");
    --f2: url("assets/hero/val-02-l.webp");
    --f3: url("assets/hero/val-03-l.webp");
  }
  .chapa { background-position: 58% 24%; }

  /* Deitado, quem precisa de fundo firme é a coluna da esquerda. */
  .veu::before {
    background: linear-gradient(
      92deg,
      rgba(78, 38, 36, .66) 0%,
      rgba(78, 38, 36, .60) 40%,
      rgba(78, 38, 36, .18) 66%,
      rgba(78, 38, 36, .30) 100%
    );
  }
}

/* Quem pediu menos movimento recebe a primeira foto parada, que é o
   estado final legível, e não uma tela vazia. */
@media (prefers-reduced-motion: reduce) {
  .chapa { transition: none !important; }
  .chapa.esta { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Página de obrigado, que é uma página de passagem.

   Ela existe para durar doze segundos e levar a pessoa ao grupo de
   espera no WhatsApp. Por isso o número é grande e o botão é a
   única coisa clicável de peso.
   ═══════════════════════════════════════════════════════════════ */

.contagem {
  display: flex;
  align-items: center;
  gap: var(--cdv-esp-4);
  margin-top: var(--cdv-esp-4);
}

.contagem-num {
  font-family: var(--cdv-display);
  font-size: 3.4rem;
  line-height: .85;
  color: var(--cdv-terracota-esc);
  font-variant-numeric: tabular-nums;
  /* largura fixa: sem isso o card estremece quando o 10 vira 9 */
  min-width: 2ch;
  text-align: center;
}

.contagem-txt {
  margin: 0;
  font-size: .95rem;
  color: var(--cdv-cafe-suave-forte);
}

.barra {
  height: 6px;
  margin: var(--cdv-esp-4) 0 var(--cdv-esp-4);
  background: var(--cdv-creme-linho);
  border: 2px solid var(--cdv-vinho);
  border-radius: var(--cdv-raio-pil);
  overflow: hidden;
}
.barra span {
  display: block;
  height: 100%;
  background: var(--cdv-terracota-esc);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Sair da contagem é uma escolha secundária, e o botão precisa
   parecer secundário sem sumir. */
.ficar {
  display: block;
  width: 100%;
  margin-top: var(--cdv-esp-3);
  padding: 10px;
  font: inherit;
  font-size: .92rem;
  color: var(--cdv-cafe-suave-forte);
  background: none;
  border: 0;
  border-radius: var(--cdv-raio-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ficar:hover { color: var(--cdv-cafe); }

/* ── País e telefone na mesma linha ──────────────────────────── */

.campo { display: grid; gap: var(--cdv-esp-2); }
.campo label span { font-size: .92rem; font-weight: 600; }

.linha-tel {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}
/* As duas caixas se encostam e formam um controle só. Sem isso viram
   dois campos soltos que por acaso estão perto. */
.linha-tel select {
  font: inherit;
  font-size: .95rem;
  color: var(--cdv-cafe);
  background: var(--cdv-creme-linho);
  border: 2px solid var(--cdv-vinho);
  border-right-width: 1px;
  border-radius: var(--cdv-raio-sm) 0 0 var(--cdv-raio-sm);
  padding: 14px 8px 14px 14px;
  min-height: 52px;
  max-width: 10.5rem;
  cursor: pointer;
}
@media (max-width: 430px) {
  .linha-tel select { max-width: 8.6rem; font-size: .88rem; padding-inline: 10px 4px; }
}
.linha-tel input {
  border-left-width: 1px;
  border-radius: 0 var(--cdv-raio-sm) var(--cdv-raio-sm) 0;
  min-width: 0;
}
.linha-tel select:focus-visible,
.linha-tel input:focus-visible { position: relative; z-index: 1; }

/* ── A pergunta de qualificação ──────────────────────────────── */

.pergunta { margin: var(--cdv-esp-4) 0 var(--cdv-esp-4); }

.pergunta-titulo {
  margin: 0 0 var(--cdv-esp-3);
  font-size: .98rem;
  line-height: 1.45;
}
.pergunta-titulo em {
  font-family: var(--cdv-enfase);
  font-style: italic;
  color: var(--cdv-terracota-esc);
}

.opcoes { display: grid; gap: var(--cdv-esp-2); }

/* Cada alternativa é o próprio caminho para o grupo: um toque responde
   e leva. Por isso elas parecem botão de verdade, e não caixinha de
   marcar que ainda exigiria um "enviar". */
.opcoes button {
  font: inherit;
  font-size: .95rem;
  text-align: left;
  color: var(--cdv-cafe);
  background: var(--cdv-creme-linho);
  border: 2px solid var(--cdv-vinho);
  border-radius: var(--cdv-raio-sm);
  padding: 13px 16px;
  min-height: 48px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.opcoes button:hover {
  background: var(--cdv-borda);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--cdv-vinho);
}
.opcoes button:active { transform: none; box-shadow: none; }