/* ==========================================================================
   Investidor Black  ·  folha de estilo unica
   Ordem: tokens, reset, acessibilidade, base, layout, componentes, secoes,
          rodape, movimento, responsivo.
   Nenhum valor cru de cor, espaco, raio, tipo ou transicao fora do :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cor, terreno escuro */
  --cor-fundo:        #0A0A0A;
  --cor-elevado:      #141414;
  --cor-campo:        #262626;
  --cor-linha:        #262626;
  --cor-ouro:         #D4AF37;
  --cor-ouro-fraca:   #8A711F;
  --cor-tinta:        #FFFFFF;
  --cor-tinta-suave:  #A3A3A3;
  --cor-erro:         #EF4444;

  /* Cor, terreno claro. Entrou em 2026-09-02, para as secoes de fundo claro.
     Os pares abaixo foram medidos sobre --cor-claro, e nenhum fica abaixo
     de 4.5:1.
       #171412 sobre #F5F1E8 = 15.6:1
       #57534E sobre #F5F1E8 =  6.8:1
       #6E5A18 sobre #F5F1E8 =  5.9:1
     O #D4AF37 nao aparece sobre claro: renderia 1.9:1. Sobre terreno claro
     o ouro e sempre o --cor-ouro-escuro. */
  --cor-claro:              #F5F1E8;
  --cor-claro-alta:         #FFFFFF;
  --cor-linha-clara:        #DED6C6;
  --cor-tinta-escura:       #171412;
  --cor-tinta-escura-suave: #57534E;
  --cor-ouro-escuro:        #6E5A18;

  /* Ambar da capsula de acao, tirado da referencia do cliente em
     2026-09-02. A tinta #0A0A0A sobre ele rende 11,6:1. */
  --cor-acao:         #F9AE3F;

  /* Familia dourada do degrade. Depois que o botao virou ambar chapado, ela
     serve so ao fio curto que fecha os cabecalhos centralizados. */
  --cor-acao-escura:  #A67F4A;
  --cor-acao-media:   #D9B87C;
  --cor-acao-clara:   #E8CC9F;
  --degrade-acao: linear-gradient(100deg,
                    var(--cor-acao-escura) 0%,
                    var(--cor-acao-media) 52%,
                    var(--cor-acao-clara) 100%);

  /* Tipografia */
  --fonte-titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --fonte-corpo:  "Public Sans", "Segoe UI", system-ui, sans-serif;
  --fonte-dado:   "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --fs-h1:      clamp(2.56rem, 5.4vw + 0.7rem, 4.25rem);   /* 40.96 -> 68 */
  --fs-h2:      clamp(1.60rem, 3.3vw + 0.45rem, 2.656rem); /* 25.6  -> 42.5 */
  --fs-h3:      clamp(1.00rem, 2.0vw + 0.28rem, 1.66rem);  /* 16    -> 26.56 */
  --fs-corpo:   clamp(1rem, 0.35vw + 0.92rem, 1.125rem);   /* 16    -> 18 */
  --fs-apoio:   clamp(1rem, 0.25vw + 0.94rem, 1.0625rem);  /* 16    -> 17 */
  --fs-rotulo:  0.8125rem;                                 /* 13, rotulo mono */
  --fs-dado-g:  clamp(2.25rem, 4vw + 0.9rem, 3.5rem);
  --fs-dado-gg: clamp(2.75rem, 5.2vw + 1rem, 4.5rem);

  --altura-titulo: 1.06;
  --altura-corpo:  1.62;
  --tracking-titulo: -0.022em;
  --tracking-rotulo: 0.16em;
  --medida: 66ch;

  /* Espaco, base 4 */
  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  20px;
  --e-6:  24px;
  --e-8:  32px;
  --e-10: 40px;
  --e-12: 48px;
  --e-14: 56px;
  --e-16: 64px;
  --e-20: 80px;
  --e-24: 96px;
  --e-30: 120px;

  --ritmo-secao: clamp(80px, 9vw, 120px);
  --largura-max: 1200px;
  --largura-estreita: 820px;
  --altura-faixa: 54px;
  --respiro-lateral: clamp(20px, 4.5vw, 48px);

  /* Raio, nunca acima de 12px em bloco grande.
     O raio de pilula vale so para o botao de acao e para o disco do icone. */
  --raio-p: 4px;
  --raio-m: 8px;
  --raio-g: 12px;
  /* Raio do painel do contador. Ele e um bloco pequeno e flutuante, nao um
     bloco grande de conteudo: a 12px o canto lia mais reto que o das caixas
     do relogio, que sao baixas. Os 16px igualam o desenho dos dois. */
  --raio-contador: 16px;
  --raio-pilula: 999px;

  /* Luz. Halo do botao e brilho radial de fundo. Sem deslocamento vertical:
     a luz sai por igual dos quatro lados da capsula, como na referencia. */
  --halo-acao: 0 0 38px -4px rgba(249, 174, 63, 0.55);
  --halo-acao-forte: 0 0 52px 0 rgba(249, 174, 63, 0.75);

  /* Transicao */
  --t-rapida: 120ms;
  --t-media:  180ms;
  --t-lenta:  250ms;
  /* A faixa acima e a de microinteracao: hover, foco, toque, abrir e fechar.
     Entrada de bloco tem faixa propria na regra da casa, de 300 a 600ms, e e
     o que os dois tokens abaixo cobrem. Fora das duas faixas ficam so o
     painel do contador, que e mudanca de contexto, e os dois trilhos que
     correm sozinhos. */
  --t-entrada-curta: 300ms;
  --t-entrada:       360ms;
  --t-entrada-longa: 440ms;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  /* Curva de entrada: parte rapido e encosta devagar, para o bloco assentar
     em vez de parar seco. Entrada desacelera no fim, saida acelera no comeco,
     e a saida e sempre mais curta que a entrada correspondente. */
  --ease-entrada: cubic-bezier(0.05, 0.7, 0.1, 1);

  /* Fio */
  --fio: 1px solid var(--cor-linha);
  --fio-claro: 1px solid var(--cor-linha-clara);
  --fio-ouro: 1px solid var(--cor-ouro-fraca);
  /* Fio das caixas do relogio. Um quarto da espessura do fio normal: abaixo
     de 1px o navegador nao desenha meia linha, ele desenha uma linha de um
     pixel com opacidade proporcional, entao o efeito e de um fio mais tenue.
     Quanto menor a densidade da tela, menor a diferenca. */
  --fio-ouro-fino: 0.25px solid var(--cor-ouro-fraca);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body,
h1, h2, h3, h4, p, figure, figcaption, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   3. Acessibilidade
   -------------------------------------------------------------------------- */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cor-ouro);
  outline-offset: 3px;
  border-radius: var(--raio-p);
}

/* Sobre terreno claro o anel troca para o ouro escuro, unico tom da familia
   com 3:1 contra o creme. */
.secao--clara :where(a, button, input, summary, [tabindex]):focus-visible {
  outline-color: var(--cor-ouro-escuro);
}

/* Sobre a capsula ambar o anel troca para a tinta escura: contra o
   #F9AE3F o branco renderia 1.6:1 e sumiria. */
.btn--primario:focus-visible {
  outline-color: var(--cor-fundo);
  outline-offset: 2px;
}

.pular-para-conteudo {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--cor-ouro);
  color: var(--cor-fundo);
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--raio-m);
  transition: transform var(--t-media) var(--ease);
}
.pular-para-conteudo:focus { transform: translateY(0); }

.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */
body {
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo);
  line-height: var(--altura-corpo);
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

p { max-width: var(--medida); }

strong { font-weight: 600; }

.ouro { color: var(--cor-ouro); }
.suave { color: var(--cor-tinta-suave); }

/* Quebra de linha combinada com o cliente, valida so onde a linha cabe.
   Abaixo de 900px ela some e o texto volta a quebrar sozinho. */
.quebra-larga { display: none; }

/* A quebra do paragrafo da hero tem ponto de corte proprio, mais alto. Ali o
   texto vive numa coluna de 58% da pagina, e nao na largura toda: a linha
   mais longa mede 573px, e a coluna so chega la a partir de 1120px. Abaixo
   disso a quebra some e o paragrafo se arranja sozinho. */
.quebra-hero { display: none; }

/* Quebra do bloco de duas colunas. Ali o texto vive em metade da pagina menos
   o vao, entao a linha mais longa (417px) so cabe a partir de 1024px. */
.quebra-coluna { display: none; }

/* O oposto: quebra que vale so no retrato estreito, onde o rotulo do botao
   nao cabe em uma linha. A partir de 640px o botao encolhe para o proprio
   conteudo e a quebra some. */
.quebra-estreita { display: inline; }

.dado {
  font-family: var(--fonte-dado);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

a { color: var(--cor-ouro); }

/* Rotulo mono. Nao e badge nem pilula: sem fundo, sem borda, sem raio. */
.rotulo {
  display: block;
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-ouro);
  margin-bottom: var(--e-4);
}

/* Marcador de pendencia. Fica visivel de proposito ate o dado real chegar. */
.pendente {
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  letter-spacing: 0.04em;
  color: var(--cor-ouro);
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.envoltorio {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--respiro-lateral);
}

.secao {
  padding-block: var(--ritmo-secao);
  border-top: var(--fio);
}

/* Terreno de cor. Sem fio, para nao elevar pelos dois recursos ao mesmo tempo. */
.secao--elevada {
  background: var(--cor-elevado);
  border-top: 0;
}

/* Dentro de uma secao elevada, o cartao sobe mais um degrau de terreno.
   Sem isso o cartao teria a mesma cor do fundo e sumiria. O campo de
   formulario desce para o fundo de leitura pelo mesmo motivo. */
.secao--elevada .captura,
.secao--elevada .preco,
.secao--elevada .foto {
  background: var(--cor-campo);
}
.secao--elevada .campo__entrada {
  background: var(--cor-fundo);
}

/* Terreno claro. Mesmo principio: cor, nunca cor mais fio. */
.secao--clara {
  position: relative;
  isolation: isolate;
  background: var(--cor-claro);
  color: var(--cor-tinta-escura);
  border-top: 0;
  overflow: hidden;
}
.secao--clara .rotulo { color: var(--cor-ouro-escuro); }
.secao--clara .suave,
.secao--clara .cabecalho-secao p { color: var(--cor-tinta-escura-suave); }
.secao--clara .ouro { color: var(--cor-ouro-escuro); }
.secao--clara a { color: var(--cor-ouro-escuro); }

/* Malha fina de fundo, o unico ornamento das secoes claras. Duas familias de
   linha de 1px em cima do creme, com opacidade baixa, e um clareamento
   radial no meio para o campo nao ficar chapado. */
.secao--grade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(23, 20, 18, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 20, 18, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
}
.secao--grade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 0%,
                rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%);
}

.cabecalho-secao {
  max-width: var(--largura-estreita);
  margin-bottom: var(--e-16);
}
.cabecalho-secao p {
  margin-top: var(--e-5);
  color: var(--cor-tinta-suave);
  font-size: var(--fs-apoio);
}

/* Bloco curto de destaque pode ser centralizado. Vale para o cabecalho de
   depoimentos e de duvidas, nao para texto corrido. */
.cabecalho-secao--centro {
  margin-inline: auto;
  text-align: center;
}
.cabecalho-secao--centro p { margin-inline: auto; }
.cabecalho-secao--centro .rotulo { margin-inline: auto; width: max-content; }

/* Fio dourado curto que fecha o cabecalho centralizado. */
.cabecalho-secao--centro::after {
  content: "";
  display: block;
  width: var(--e-16);
  height: 2px;
  margin: var(--e-8) auto 0;
  background: var(--degrade-acao);
}

/* --------------------------------------------------------------------------
   6. Botoes
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: var(--e-5) var(--e-6);
  border: 0;
  border-radius: var(--raio-m);
  cursor: pointer;
  transition:
    background-color var(--t-media) var(--ease),
    color var(--t-media) var(--ease),
    transform var(--t-rapida) var(--ease),
    border-color var(--t-media) var(--ease);
}

/* Botao de acao em capsula: preenchimento dourado chapado, rotulo escuro
   centralizado, seta depois do rotulo, verniz claro na faixa de cima, um
   brilho que atravessa a capsula de tempos em tempos e halo de luz por tras.
   O halo e uma sombra difusa sem deslocamento: e luz, nao elevacao de card.
   O disco creme a esquerda saiu em 2026-09-02, junto com o degrade. */
.btn--primario {
  justify-content: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-5) var(--e-8);
  min-height: var(--e-14);
  border-radius: var(--raio-pilula);
  background: var(--cor-acao);
  color: var(--cor-fundo);
  /* Rotulo em corpo de texto, nao em mono: e o desenho da referencia, com
     letra mais cheia e espacejamento curto. */
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  /* Sem negrito, a pedido do cliente em 2026-09-02. O peso 500 e o medio da
     Public Sans: segura a leitura da tinta escura sobre o dourado sem o
     bloco cheio do 700. */
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: var(--halo-acao);
  transition:
    box-shadow var(--t-media) var(--ease),
    filter var(--t-media) var(--ease),
    transform var(--t-rapida) var(--ease);
}

.btn--primario:hover {
  box-shadow: var(--halo-acao-forte);
  filter: brightness(1.06);
}
.btn--primario:active { transform: translateY(1px); }

/* Seta depois do rotulo. Decorativa, marcada com aria-hidden no HTML.
   Desliza um passo para a direita no hover do botao. */
.btn__seta {
  flex: 0 0 auto;
  width: var(--e-5);
  height: var(--e-5);
  transition: transform var(--t-lenta) var(--ease);
}
.btn__seta path { stroke: currentColor; }
.btn--primario:hover .btn__seta { transform: translateX(3px); }

.btn__rotulo { flex: 0 1 auto; text-align: center; }

.btn--fantasma {
  background: transparent;
  color: var(--cor-ouro);
  border: var(--fio-ouro);
}
.btn--fantasma:hover {
  border-color: var(--cor-ouro);
  color: var(--cor-tinta);
}
.btn--fantasma:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   7. Marca
   -------------------------------------------------------------------------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  color: var(--cor-tinta);
}
.marca__sinal { flex: 0 0 auto; }
.marca__base  { fill: var(--cor-ouro); }
.marca__barra { fill: var(--cor-fundo); }
.marca__nome {
  font-family: var(--fonte-titulo);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.marca__nome b { font-weight: 700; color: var(--cor-ouro); }

/* Assinatura no alto da hero, no lugar onde ficava o cabecalho fixo. */
.marca--hero {
  gap: var(--e-4);
  margin-bottom: var(--e-12);
}
.marca--hero .marca__sinal { width: var(--e-10); height: var(--e-10); }
.marca--hero .marca__nome {
  font-size: clamp(1.0625rem, 1.4vw + 0.75rem, 1.375rem);
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   7.1. Cabecalho das paginas de apoio
   A landing perdeu o cabecalho em 2026-09-02: e pagina de venda, a marca
   agora abre a propria hero. O bloco abaixo continua servindo a 404.html e
   a privacidade.html, que precisam de um caminho de volta no topo.
   -------------------------------------------------------------------------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cor-fundo);
  border-bottom: var(--fio);
}
.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--e-16);
}
.topo__link {
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-tinta-suave);
  text-decoration: none;
  transition: color var(--t-media) var(--ease);
}
.topo__link:hover { color: var(--cor-ouro); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* No retrato o texto encosta no topo: e o que o mantem acima da cabeca do
     retrato, ja que a hero e mais alta que a tela. Deitado ele volta a
     centralizar na coluna da esquerda. */
  justify-content: flex-start;
  padding-top: var(--e-10);
  overflow: hidden;
  /* No retrato a hero e mais alta que a tela, e isso e proposital. A arte de
     1080x1920 traz a cabeca do Onurb a 56% da propria altura, entao a altura
     da hero e o que decide onde a cabeca cai. Com a hero na altura da tela ela
     caia em 425px e o paragrafo de apoio passava por cima do rosto.
     O piso subiu de 1180 para 1300px em 2026-09-02, quando o apoio virou dois
     paragrafos e ganhou tres linhas: a cabeca desce para 728px e o texto
     inteiro volta a caber acima dela em qualquer tela de 360px para cima.
     O botao continua acima da dobra; o que passa da tela e so foto.
     O max() segura o celular deitado, onde a tela e mais baixa. */
  min-height: max(calc(100vh - var(--altura-faixa)), 1300px);
  min-height: max(calc(100svh - var(--altura-faixa)), 1300px);
}

/* Fundo fotografico. Duas imagens, uma por formato, trocadas pelo <picture>
   no HTML: a 1080x1920 no retrato e a 1600x725 a partir de 768px.
   Sem cortina e sem camada de luz por cima, a pedido do cliente em
   2026-09-02: a foto aparece limpa. O texto fica sobre a metade esquerda,
   que e a parte escura das duas artes. */
.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}
.hero__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

/* Cortina de contraste. Uma camada de 25% de preto na borda esquerda, que
   cai para transparente antes do meio: fecha o contraste do texto sem
   escurecer a foto inteira. Vale so a partir de 900px, onde o texto ocupa
   uma coluna fixa a esquerda.
   [PENDENTE] a cortina do retrato. A faixa lateral nao serve ao 9:16, que e
   uma coluna so. O cliente vai definir depois; hoje o retrato roda sem
   cortina e sem sombra, apoiado no fato de a hero ser alta o bastante para
   o texto cair todo sobre a parte escura da arte, acima da cabeca. */
.hero__cortina {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.hero__grade {
  display: grid;
  gap: var(--e-16);
  padding-bottom: var(--e-16);
}

/* O texto da hero cai sobre a foto. A sombra atras da letra saiu em
   2026-09-02, a pedido do cliente. O que sustenta a leitura agora e a tinta:
   o cinza de apoio ja tinha saido e entrado branco, porque sobre a parte
   iluminada da parede o #A3A3A3 rendia 3.2:1 e o branco rende 8:1. No
   desktop soma-se a cortina de 25% da faixa esquerda. */
.hero h1 { margin-bottom: var(--e-6); }

/* O apoio da hero sao dois paragrafos. Entre eles vai um respiro curto; o
   respiro largo fica so depois do segundo, antes do botao. */
.hero__apoio {
  font-size: var(--fs-apoio);
  color: var(--cor-tinta);
  margin-bottom: var(--e-4);
}
.hero__apoio + .hero__apoio { margin-bottom: var(--e-10); }

/* --------------------------------------------------------------------------
   10. Fotos
   -------------------------------------------------------------------------- */
/* Imagem real dentro de caixa de proporcao fixa. Terreno de cor enquanto o
   arquivo carrega, sem fio: um recurso de elevacao por vez. */
.foto {
  overflow: hidden;
  border-radius: var(--raio-g);
  background: var(--cor-elevado);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }


/* --------------------------------------------------------------------------
   11. Formulario de captura
   -------------------------------------------------------------------------- */
.captura {
  background: var(--cor-elevado);
  border-radius: var(--raio-g);
  padding: var(--e-6);
}
.captura__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking-titulo);
  margin-bottom: var(--e-2);
}
.captura__apoio {
  font-size: var(--fs-apoio);
  color: var(--cor-tinta-suave);
  margin-bottom: var(--e-8);
}

.campo { display: block; margin-bottom: var(--e-5); }
.campo__rotulo {
  display: block;
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-tinta-suave);
  margin-bottom: var(--e-2);
}
.campo__entrada {
  width: 100%;
  background: var(--cor-campo);
  border: 0;
  border-radius: var(--raio-m);
  padding: var(--e-4);
  color: var(--cor-tinta);
  font-size: var(--fs-corpo);
  transition: box-shadow var(--t-media) var(--ease);
}
.campo__entrada::placeholder { color: var(--cor-tinta-suave); }
.campo__entrada:hover { box-shadow: inset 0 0 0 1px var(--cor-ouro-fraca); }
.campo__entrada:focus-visible { outline-offset: 1px; }

.aceite {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
  font-size: var(--fs-apoio);
  color: var(--cor-tinta-suave);
  cursor: pointer;
}
/* 24px e nao 20px porque e o minimo de alvo de toque do WCAG 2.2 AA, criterio
   2.5.8. A label inteira ja alterna a caixa, entao o alvo pratico e maior,
   mas a caixa em si precisa passar sozinha. */
.aceite input {
  flex: 0 0 auto;
  width: var(--e-6);
  height: var(--e-6);
  margin: 0;
  accent-color: var(--cor-ouro);
  cursor: pointer;
}
.aceite span { max-width: var(--medida); }

.captura__estado {
  margin-top: var(--e-4);
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  line-height: 1.6;
  color: var(--cor-ouro);
}
.captura__estado:empty { margin-top: 0; }

/* --------------------------------------------------------------------------
   12. Faixa de assuntos
   -------------------------------------------------------------------------- */
/* Altura travada no token --altura-faixa: a hero desconta esse mesmo valor
   da altura da tela, entao a faixa fecha a primeira dobra sem sobrar nem
   faltar pixel. */
.faixa {
  display: flex;
  align-items: center;
  height: var(--altura-faixa);
  border-block: var(--fio);
  overflow: hidden;
}
.faixa__trilho {
  display: flex;
  width: max-content;
  animation: correr 46s linear infinite;
  /* Promove o trilho a camada propria: sem isso o desenho dele volta para a
     thread principal a cada quadro e disputa espaco com a rolagem. */
  will-change: transform;
}
.faixa__item {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  padding-inline: var(--e-6);
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-tinta-suave);
  white-space: nowrap;
}
.faixa__item::after {
  content: "";
  width: var(--e-1);
  height: var(--e-1);
  background: var(--cor-ouro);
}
.faixa:hover .faixa__trilho { animation-play-state: paused; }

@keyframes correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Trilho fora da tela nao anda. Os dois correm em laco infinito, e a pagina e
   longa: sem esta regra o carrossel de depoimentos fica girando enquanto o
   visitante ainda le a hero, gastando quadro por nada. Quem liga e desliga o
   atributo e o observador em script.js. A pausa por hover continua nas regras
   de cada trilho, e as duas convivem porque nenhuma das duas usa style
   inline. */
[data-trilho][data-fora="sim"] {
  animation-play-state: paused;
  will-change: auto;
}

/* --------------------------------------------------------------------------
   13. Listas
   -------------------------------------------------------------------------- */
.lista-fio { display: grid; border-top: var(--fio); }

.lista-fio__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4) var(--e-6);
  align-items: baseline;
  padding-block: var(--e-6);
  border-bottom: var(--fio);
}
.lista-fio__indice {
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  font-weight: 500;
  color: var(--cor-ouro);
  letter-spacing: 0.04em;
}
.lista-fio__texto { max-width: var(--medida); }
.lista-fio__texto h3 { margin-bottom: var(--e-2); }
.lista-fio__texto p { color: var(--cor-tinta-suave); font-size: var(--fs-apoio); }

.lista-marcada { display: grid; gap: var(--e-4); }
.lista-marcada li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4);
  align-items: start;
  font-size: var(--fs-apoio);
  color: var(--cor-tinta-suave);
}
/* Fio curto no lugar de icone de biblioteca, alinhado com a primeira linha */
.lista-marcada li::before {
  content: "";
  width: var(--e-4);
  height: 1px;
  margin-top: 0.8em;
  background: var(--cor-ouro);
}

/* Variante com visto, usada no cartao de preco. O visto e desenhado com duas
   arestas de uma caixa girada: nao entra icone de biblioteca nenhum. */
.lista-marcada--visto li::before {
  width: var(--e-2);
  height: var(--e-3);
  margin: 0.28em var(--e-1) 0 var(--e-1);
  background: none;
  border: solid var(--cor-ouro);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* Par de colunas: texto de abertura de um lado, conteudo do outro */
.par { display: grid; gap: var(--e-10); align-items: start; }
.par__espacado { margin-top: var(--e-5); }
.par__botao { margin-top: var(--e-8); max-width: none; }

/* Lista de declaracoes. Virou grade de cartoes com icone em 2026-09-02, sobre
   a secao "Seu cenario atual" da referencia que o cliente indicou. O icone e a
   sombra entraram por pedido expresso dele; sao os dois pontos em que esta
   secao abre excecao a "PROIBIDO NO DESENHO" do CLAUDE.md global.
   O fio de 1px que a referencia poe em volta do cartao NAO entrou: com terreno
   branco ja resolvendo a elevacao, somar fio quebraria a regra de elevacao do
   projeto, que continua valendo. */
.declaracoes {
  display: grid;
  gap: var(--e-5);
  max-width: 920px;
  margin-inline: auto;
}
.declaracoes__item {
  display: flex;
  /* Com o texto em uma linha so, ele e o icone se alinham pelo meio. */
  align-items: center;
  gap: var(--e-5);
  padding: var(--e-6);
  border-radius: var(--raio-g);
  background: var(--cor-claro-alta);
  box-shadow: 0 10px 30px -18px rgba(23, 23, 23, 0.25);
  transition:
    transform var(--t-lenta) var(--ease),
    box-shadow var(--t-lenta) var(--ease);
}
.declaracoes__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px -20px rgba(23, 23, 23, 0.32);
}

/* Disco do icone. Terreno de ouro rebaixado, tracado no ouro escuro, que e o
   unico tom da familia com contraste suficiente sobre claro. */
.declaracoes__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--raio-g);
  background: rgba(212, 175, 55, 0.16);
  color: var(--cor-ouro-escuro);
}
.declaracoes__icone svg { width: 24px; height: 24px; }

/* 1rem fixo, que e o mesmo corpo da referencia e tambem o piso da agencia:
   corpo de texto nunca abaixo de 16px. Nesse tamanho a frase mais longa,
   "Quer aprender sobre o mercado financeiro", mede 314px numa caixa de 330px
   e cabe em uma linha. De 1012px de tela para baixo a grade encolhe e ela
   volta a quebrar em duas, porque nao da para diminuir mais a letra. */
.declaracoes__item p {
  max-width: none;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cor-tinta-escura);
}

/* --------------------------------------------------------------------------
   14. Numeros de autoridade
   -------------------------------------------------------------------------- */
/* Bloco curto de destaque: numero e rotulo centralizados na mesma coluna,
   entao o rotulo fica centrado sob o numero que ele explica. */
.numeros {
  display: grid;
  gap: var(--e-10);
  border-top: var(--fio);
  padding-top: var(--e-10);
  text-align: center;
}
.numeros__valor {
  display: block;
  font-family: var(--fonte-dado);
  font-size: var(--fs-dado-g);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cor-ouro);
  font-variant-numeric: tabular-nums;
}
.numeros__rotulo {
  display: block;
  margin: var(--e-3) auto 0;
  font-size: var(--fs-apoio);
  color: var(--cor-tinta-suave);
  max-width: 24ch;
}

/* --------------------------------------------------------------------------
   15. Autoridade
   -------------------------------------------------------------------------- */
/* Secao com a arte de fundo. Sem camada de cor por cima e sem sombra atras da
   letra, a pedido do cliente: quem sustenta a leitura e a propria arte, que
   tem parede escura exatamente onde o texto cai. A cor de fundo fica embaixo
   como reserva, para o caso de a imagem nao carregar. */
.secao--retrato {
  position: relative;
  isolation: isolate;
  background-color: var(--cor-fundo);
  /* Em CSS o caminho relativo conta a partir da folha, e nao do documento.
     A folha esta em assets/css/ e a arte em assets/img/: por isso sobe um
     nivel e desce para img/. */
  background-image: url("../img/investidor-black-desktop02.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* No retrato o corte encosta na direita, que e a parte so de parede: no
     9:16 a figura do Onurb ficaria gigante e bem atras do texto. */
  background-position: 100% 50%;
}

/* Sem camada de cor por cima da foto, quem tem de subir e a tinta. O cinza de
   apoio rendia 4.34:1 sobre a arte, abaixo do AA de 4.5:1; em branco rende
   16.7:1. Mesma correcao que ja tinha sido feita no apoio da hero, e pelo
   mesmo motivo. Os numeros medidos com o fundo em 60%:
     branco  #FFFFFF  16.69:1
     ouro    #D4AF37   8.09:1
   Os dois passam AA com folga. */
.secao--retrato .autoridade__corpo p { color: var(--cor-tinta); }

.autoridade__grade { display: grid; gap: var(--e-12); margin-bottom: var(--e-16); }
.autoridade__corpo { margin-top: var(--e-6); }
.autoridade__corpo p { color: var(--cor-tinta-suave); font-size: var(--fs-apoio); }
.autoridade__corpo p + p { margin-top: var(--e-4); }
/* --------------------------------------------------------------------------
   16. Cartoes de entrega
   -------------------------------------------------------------------------- */
/* Cartao largo e deitado: disco com o numero a esquerda, rotulo, titulo e
   texto a direita. Nao e fileira de tres cartoes iguais: cada um ocupa a
   linha inteira e a pilha e vertical. Fio, sem terreno. */
.entregas { display: grid; gap: var(--e-4); margin-top: var(--e-12); }

.entrega {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-5);
  align-items: start;
  padding: var(--e-6);
  border: var(--fio);
  border-radius: var(--raio-g);
  transition:
    border-color var(--t-media) var(--ease),
    transform var(--t-media) var(--ease);
}
.entrega:hover {
  border-color: var(--cor-ouro-fraca);
  transform: translate3d(0, -2px, 0);
}
.entrega__disco {
  display: grid;
  place-items: center;
  width: var(--e-12);
  height: var(--e-12);
  border-radius: var(--raio-m);
  background: var(--cor-elevado);
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cor-ouro);
}
.entrega__rotulo {
  display: block;
  font-family: var(--fonte-dado);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-ouro);
  margin-bottom: var(--e-2);
}
.entrega h3 { margin-bottom: var(--e-3); }
.entrega p { font-size: var(--fs-apoio); color: var(--cor-tinta-suave); }

/* --------------------------------------------------------------------------
   17. Depoimentos em carrossel
   -------------------------------------------------------------------------- */
.depoimentos__nota {
  margin-top: var(--e-5);
  font-size: var(--fs-rotulo);
  font-style: italic;
  color: var(--cor-tinta-escura-suave);
}

/* Trilho continuo. A lista aparece duas vezes no HTML, a segunda copia com
   aria-hidden, e o trilho anda exatamente meia largura: no fim do ciclo a
   copia esta no lugar do original e o corte nao aparece.
   O passeio para quando o ponteiro entra na area e quando qualquer coisa
   dentro dela recebe foco de teclado. */
.carrossel {
  margin-top: var(--e-16);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carrossel__trilho {
  display: flex;
  width: max-content;
  gap: var(--e-5);
  padding-block: var(--e-2);
  animation: correr 64s linear infinite;
  /* A mascara do .carrossel obriga o navegador a redesenhar a area a cada
     quadro do trilho. Promovido, o trilho anda na GPU e a mascara e aplicada
     uma vez so. */
  will-change: transform;
}
.carrossel:hover .carrossel__trilho,
.carrossel:focus-within .carrossel__trilho { animation-play-state: paused; }

.depoimento {
  display: flex;
  flex-direction: column;
  width: min(340px, 78vw);
  padding: var(--e-6);
  border-radius: var(--raio-g);
  background: var(--cor-claro-alta);
  color: var(--cor-tinta-escura);
}
.depoimento__aspas {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 700;
  line-height: 0.8;
  color: var(--cor-ouro-escuro);
  margin-bottom: var(--e-4);
}
.depoimento__texto {
  flex: 1 1 auto;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cor-tinta-escura-suave);
  max-width: none;
}
.depoimento__autor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4);
  align-items: center;
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: var(--fio-claro);
}
.depoimento__inicial {
  display: grid;
  place-items: center;
  width: var(--e-10);
  height: var(--e-10);
  border-radius: var(--raio-pilula);
  background: var(--cor-tinta-escura);
  color: var(--cor-claro);
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  font-weight: 700;
}
.depoimento__nome {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--cor-tinta-escura);
}
.depoimento__papel {
  display: block;
  font-family: var(--fonte-dado);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-tinta-escura-suave);
  margin-top: var(--e-1);
}

/* --------------------------------------------------------------------------
   18. Bonus
   -------------------------------------------------------------------------- */
.bonus { display: grid; gap: var(--e-6); }
.bonus__bloco {
  border: var(--fio);
  border-radius: var(--raio-g);
  padding: var(--e-6);
  transition: border-color var(--t-media) var(--ease);
}
.bonus__bloco:hover { border-color: var(--cor-ouro-fraca); }
.bonus__ordem {
  display: block;
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-ouro);
}
.bonus__bloco h3 { margin: var(--e-3) 0 var(--e-5); }
.bonus__bloco > p { color: var(--cor-tinta-suave); font-size: var(--fs-apoio); }
.bonus__bloco > p + p { margin-top: var(--e-4); }
.bonus__bloco .lista-marcada { margin-top: var(--e-6); }
.bonus__nota {
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: var(--fio);
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  line-height: 1.6;
  color: var(--cor-ouro);
}

/* --------------------------------------------------------------------------
   19. Oferta
   -------------------------------------------------------------------------- */
.oferta__grade { display: grid; gap: var(--e-12); align-items: start; }

/* Cartao de preco. Terreno de cor, sem fio. O conteudo do bloco de valor e
   centralizado por ser bloco curto de destaque; a lista acima segue a
   esquerda, porque e leitura. */
.preco {
  background: var(--cor-elevado);
  border-radius: var(--raio-g);
  padding: var(--e-6);
}
.preco__itens { margin-bottom: var(--e-8); }
.preco__valorbloco {
  text-align: center;
  padding-top: var(--e-8);
  border-top: var(--fio);
}
.preco__de {
  max-width: none;
  font-family: var(--fonte-dado);
  font-size: var(--fs-apoio);
  color: var(--cor-tinta-suave);
}
.preco__de s { text-decoration-thickness: 1px; }
/* O valor e a unica linha da pagina em corpo de dado grande. A cifra entra
   como span menor e colado ao numero: em mono, um espaco nesse corpo abriria
   um vao do tamanho de um digito. */
.preco__valor {
  display: block;
  font-family: var(--fonte-dado);
  font-size: var(--fs-dado-gg);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--cor-tinta);
  margin-block: var(--e-2) 0;
}
.preco__cifra {
  font-size: 0.46em;
  letter-spacing: 0;
  vertical-align: 0.42em;
  margin-right: 0.06em;
  color: var(--cor-tinta-suave);
}
.preco__avista {
  max-width: none;
  margin-top: var(--e-2);
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-ouro);
}
.preco__nota {
  max-width: none;
  margin-top: var(--e-4);
  font-size: var(--fs-apoio);
  color: var(--cor-tinta-suave);
}
.preco__periodo {
  max-width: none;
  margin-top: var(--e-6);
  padding-top: var(--e-6);
  border-top: var(--fio);
  font-size: var(--fs-rotulo);
  line-height: 1.6;
  color: var(--cor-tinta-suave);
}
.preco .btn { margin-top: var(--e-8); }

/* Tres passos do acesso, na coluna de abertura da oferta. Fio no topo, sem
   terreno: e leitura, nao cartao. */
.passos {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-10);
  padding-top: var(--e-8);
  border-top: var(--fio);
}
.passos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-5);
  align-items: baseline;
}
.passos__ordem {
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cor-ouro);
}
.passos__titulo {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-apoio);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--cor-tinta);
  margin-bottom: var(--e-1);
}
.passos__texto {
  font-size: var(--fs-rotulo);
  line-height: 1.6;
  color: var(--cor-tinta-suave);
}

.garantia {
  margin-top: var(--e-8);
  padding-top: var(--e-8);
  border-top: var(--fio);
}

.garantia__prazo {
  display: block;
  font-family: var(--fonte-dado);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-ouro);
  margin-bottom: var(--e-4);
}
.garantia p { font-size: var(--fs-apoio); color: var(--cor-tinta-suave); }

/* --------------------------------------------------------------------------
   20. FAQ
   -------------------------------------------------------------------------- */
/* A secao inteira fica centralizada na pagina. A pergunta e a resposta
   seguem alinhadas a esquerda, porque sao leitura. */
.faq {
  border-top: var(--fio);
  max-width: var(--largura-estreita);
  margin-inline: auto;
}
.faq__item { border-bottom: var(--fio); }

.faq__pergunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-6);
  width: 100%;
  background: none;
  border: 0;
  padding: var(--e-6) 0;
  text-align: left;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracking-titulo);
  color: var(--cor-tinta);
  cursor: pointer;
  transition: color var(--t-media) var(--ease);
}
.faq__pergunta:hover { color: var(--cor-ouro); }

.faq__sinal {
  flex: 0 0 auto;
  position: relative;
  width: var(--e-4);
  height: var(--e-4);
  margin-top: var(--e-2);
}
.faq__sinal::before,
.faq__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--cor-ouro);
  transition: transform var(--t-lenta) var(--ease);
}
.faq__sinal::after { transform: rotate(90deg); }
.faq__pergunta[aria-expanded="true"] .faq__sinal::after { transform: rotate(0deg); }

.faq__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-lenta) var(--ease);
}
.faq__resposta[data-aberta="sim"] { grid-template-rows: 1fr; }
.faq__resposta > div { overflow: hidden; }
.faq__resposta p {
  padding-bottom: var(--e-6);
  color: var(--cor-tinta-suave);
  font-size: var(--fs-apoio);
}

.suporte {
  margin-top: var(--e-12);
  display: grid;
  gap: var(--e-5);
  justify-items: center;
  text-align: center;
}
.suporte__horario {
  font-size: var(--fs-apoio);
  color: var(--cor-tinta-suave);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   21. Fechamento
   -------------------------------------------------------------------------- */
.fechamento__grade { display: grid; gap: var(--e-12); align-items: center; }

/* --------------------------------------------------------------------------
   22. Contador de vagas
   -------------------------------------------------------------------------- */
/* Reescrito em 2026-09-02 sobre a referencia que o cliente indicou. Geometria,
   tamanhos, animacoes e comportamento sao os do original; a familia de letra
   e a tinta dourada saem dos tokens do projeto, porque a referencia usa Sora
   e um #FFAF40 que nao existem aqui. O --cor-acao e o mesmo ambar por outro
   nome, com um ponto de diferenca em cada canal.
   Duas camadas: a de fora desliza pela direita, a de dentro e o cartao. E o
   que permite ao halo viver num ::before de z-index negativo e ficar atras do
   fundo do cartao, e nao por cima dele. */
.contador {
  position: fixed;
  z-index: 60;
  right: var(--e-3);
  /* Sobe a altura da faixa de assuntos mais um respiro. Sem isso o cartao
     encosta na faixa quando a pagina esta no topo, que e justamente quando ele
     aparece. A referencia usa 24px porque a pagina dela nao tem faixa. */
  bottom: calc(var(--altura-faixa) + var(--e-3));
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.7s;
}
.contador[hidden] { display: none; }
.contador[data-entrou="nao"] { transform: translateX(150%); opacity: 0; }

.contador__cartao {
  position: relative;
  width: 132px;
  padding: 13px 11px 11px;
  border-radius: 16px;
  border: 1px solid rgba(249, 174, 63, 0.32);
  background: linear-gradient(165deg, #1F1F1F, #121212);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.75);
  color: var(--cor-tinta);
}

/* Halo dourado atras do cartao, respirando. Sai 2px para fora em todos os
   lados e passa por um desfoque: e luz vazando da borda, nao sombra de
   elevacao. */
.contador__cartao::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  pointer-events: none;
  border-radius: 18px;
  background: radial-gradient(62% 60% at 50% 0%,
                rgba(249, 174, 63, 0.4), transparent 70%);
  filter: blur(11px);
  opacity: 0.4;
  animation: contador-halo 3.6s ease-in-out infinite;
  /* O desfoque e caro de rasterizar. Declarando a opacidade como o que muda,
     o navegador guarda o borrao pronto uma vez e so troca a transparencia da
     camada, em vez de refazer o borrao a cada quadro atras de um elemento
     fixo. */
  will-change: opacity;
}
@keyframes contador-halo {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.65; }
}

.contador__rotulo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-items: flex-start;
  max-width: none;
  margin-bottom: 10px;
  font-family: var(--fonte-titulo);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--cor-acao);
}
/* Ponto que pulsa por anel, e nao por opacidade.

   O anel era um box-shadow que ia de 0 a 8px de espalhamento em laco
   infinito. Sombra e propriedade de pintura: cada quadro do laco repintava o
   painel inteiro, e o painel e position: fixed, entao essa repintura caia
   junto com a rolagem e era a maior fonte do engasgo.

   O desenho na tela e o mesmo. O que mudou e como ele e feito: o ponto solido
   continua no ::before, e o anel virou um segundo disco no ::after, do mesmo
   tamanho, que cresce por transform e some por opacity. Nenhuma das duas
   propriedades toca no layout nem na pintura.

   A escala de 3.3 sai da conta do anel antigo: o disco tem 7px e a sombra
   chegava a 8px para cada lado, ou seja 23px de diametro no fim. */
.contador__rotulo::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 3px;
  border-radius: var(--raio-pilula);
  background: var(--cor-acao);
}
.contador__rotulo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 7px;
  height: 7px;
  border-radius: var(--raio-pilula);
  background: var(--cor-acao);
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation: contador-pulso 1.9s ease-out infinite;
}
@keyframes contador-pulso {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(3.3); opacity: 0; }
  100% { transform: scale(3.3); opacity: 0; }
}

.contador__frase {
  max-width: none;
  margin: 0 0 12px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--cor-tinta-suave);
}
.contador__frase b { color: var(--cor-tinta); font-weight: 700; }

.contador__caixas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contador__caixa {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
  border-radius: 12px;
  border: 1px solid rgba(249, 174, 63, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.contador__numero {
  font-family: var(--fonte-titulo);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cor-tinta);
}
.contador__unidade {
  font-family: var(--fonte-titulo);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cor-acao);
}

.contador__fechar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, 0.06);
  color: var(--cor-tinta-suave);
  cursor: pointer;
  transition:
    background-color var(--t-media) var(--ease),
    color var(--t-media) var(--ease);
}
.contador__fechar:hover {
  background: rgba(249, 174, 63, 0.18);
  color: var(--cor-acao);
}
.contador__fechar svg { width: 11px; height: 11px; }
.contador__fechar path { stroke: currentColor; }

/* --------------------------------------------------------------------------
   23. Rodape
   -------------------------------------------------------------------------- */
.rodape {
  border-top: var(--fio);
  padding-block: var(--e-16) var(--e-10);
  font-size: var(--fs-apoio);
  color: var(--cor-tinta-suave);
}
.rodape__topo { display: grid; gap: var(--e-10); margin-bottom: var(--e-14); }
.rodape__descricao { margin-top: var(--e-5); }

.rodape__titulo {
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-tinta);
  margin-bottom: var(--e-5);
}
.rodape__lista { display: grid; gap: var(--e-3); }
.rodape__lista a {
  color: var(--cor-tinta-suave);
  text-decoration: none;
  transition: color var(--t-media) var(--ease);
}
.rodape__lista a:hover { color: var(--cor-ouro); }

.rodape__aviso {
  padding-top: var(--e-8);
  border-top: var(--fio);
  font-size: var(--fs-rotulo);
  line-height: 1.7;
}
.rodape__aviso p { max-width: none; }
.rodape__aviso p + p { margin-top: var(--e-3); }

.rodape__base {
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: var(--fio);
  display: grid;
  gap: var(--e-4);
  justify-items: center;
  text-align: center;
  font-size: var(--fs-rotulo);
}
.rodape__base p { max-width: none; }
.rodape__credito a {
  color: var(--cor-ouro);
  text-decoration: none;
  transition: color var(--t-media) var(--ease);
}
.rodape__credito a:hover { color: var(--cor-tinta); text-decoration: underline; }

/* --------------------------------------------------------------------------
   24. Pagina de erro
   -------------------------------------------------------------------------- */
.erro {
  min-height: 70vh;
  display: grid;
  align-content: center;
  padding-block: var(--ritmo-secao);
}
.erro__codigo {
  font-family: var(--fonte-dado);
  font-size: var(--fs-dado-g);
  font-weight: 700;
  color: var(--cor-ouro);
  letter-spacing: -0.04em;
  margin-bottom: var(--e-5);
}
.erro p { margin-block: var(--e-5) var(--e-10); color: var(--cor-tinta-suave); }
.erro .btn { width: auto; justify-self: start; }

/* --------------------------------------------------------------------------
   25. Pagina de texto corrido
   -------------------------------------------------------------------------- */
.texto { max-width: var(--largura-estreita); padding-block: var(--ritmo-secao); }
.texto h2 { margin-top: var(--e-14); margin-bottom: var(--e-5); }
.texto h2:first-of-type { margin-top: var(--e-12); }
.texto p, .texto li { color: var(--cor-tinta-suave); font-size: var(--fs-apoio); }
.texto p + p { margin-top: var(--e-4); }
.texto .lista-marcada { margin-top: var(--e-5); }
.texto__data {
  margin-top: var(--e-5);
  font-family: var(--fonte-dado);
  font-size: var(--fs-rotulo);
  color: var(--cor-tinta-suave);
}

/* --------------------------------------------------------------------------
   26. Movimento de entrada
   -------------------------------------------------------------------------- */
.surge {
  /* Distancia e tempo saem por variavel para cada bloco poder ter os seus sem
     reescrever a transicao inteira. */
  --surge-distancia: var(--e-5);
  --surge-tempo: var(--t-entrada);

  opacity: 0;
  /* translateY em duas dimensoes, e nao translate3d. O translate3d prende uma
     camada de composicao no elemento desde o carregamento, e a pagina tem 28
     blocos com .surge: eram 28 camadas seguradas na GPU antes de qualquer
     coisa entrar na tela. A transicao e composta do mesmo jeito. */
  transform: translateY(var(--surge-distancia));
  transition:
    opacity var(--surge-tempo) var(--ease-entrada),
    transform var(--surge-tempo) var(--ease-entrada);
}
.surge.visivel { opacity: 1; transform: translateY(0); }

/* Fim da entrada. O transform sai de cena porque um transform parado continua
   pedindo camada propria, e camada parada e memoria de GPU presa pelo resto
   da visita. Quem marca e o script, no transitionend. */
.surge.assentado {
  transform: none;
  transition: none;
  will-change: auto;
}

/* Coreografia da pilha de entregas. O atraso escalona a entrada, e distancia
   e tempo encurtam conforme a lista desce: o primeiro cartao vem de mais
   longe e assenta mais devagar, o ultimo chega curto e rapido. A pilha fecha
   em vez de desfilar. Nenhum par de vizinhos repete duracao e distancia ao
   mesmo tempo, e o escalonamento inteiro cabe em 300ms. */
.entregas .surge:nth-child(1) { --surge-distancia: var(--e-6); --surge-tempo: var(--t-entrada-longa); }
.entregas .surge:nth-child(2) { --surge-distancia: var(--e-5); --surge-tempo: var(--t-entrada-longa); transition-delay: 60ms; }
.entregas .surge:nth-child(3) { --surge-distancia: var(--e-6); --surge-tempo: var(--t-entrada);       transition-delay: 120ms; }
.entregas .surge:nth-child(4) { --surge-distancia: var(--e-5); --surge-tempo: var(--t-entrada);       transition-delay: 180ms; }
.entregas .surge:nth-child(5) { --surge-distancia: var(--e-4); --surge-tempo: var(--t-entrada);       transition-delay: 240ms; }
.entregas .surge:nth-child(6) { --surge-distancia: var(--e-4); --surge-tempo: var(--t-entrada-curta); transition-delay: 300ms; }

/* --------------------------------------------------------------------------
   27. Responsivo, mobile-first
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-12) var(--e-8); }
  .marca__nome { font-size: 1.0625rem; }
  /* So a variante fantasma respira pelos dois lados. A capsula primaria tem
     recuo assimetrico por causa do disco do icone. */
  .btn--fantasma { padding-inline: var(--e-8); }
  .btn--primario { padding-right: var(--e-8); }
  /* A partir daqui o rotulo do botao cabe em uma linha. */
  .quebra-estreita { display: none; }
  .captura, .preco, .bonus__bloco, .entrega { padding: var(--e-8); }
  .btn--primario { width: auto; }
  .captura .btn--primario,
  .preco .btn--primario { width: 100%; }
}

/* A partir daqui entra a arte de 1600x725, deitada, e a hero volta a ser a
   altura da tela menos a faixa. O piso de 1040px vale so no retrato. */
@media (min-width: 768px) {
  .hero {
    justify-content: center;
    min-height: calc(100vh - var(--altura-faixa));
    min-height: calc(100svh - var(--altura-faixa));
  }
}

@media (min-width: 900px) {
  .quebra-larga { display: inline; }
  .hero { padding-top: var(--e-16); }
  /* Uma coluna so. O texto ocupa pouco mais da metade esquerda, que e a
     parte escura da arte de 1600x725; a metade direita fica livre para a
     foto aparecer. */
  .hero__grade {
    grid-template-columns: minmax(0, 58%);
    padding-bottom: var(--e-20);
  }
  /* Bloco de texto da hero puxado para a borda esquerda, a pedido do cliente
     em 2026-09-02. O quanto ele anda e a folga que sobra entre a tela e o
     envoltorio de 1200px, limitada a 96px, que e 15% da coluna de texto na
     tela de 1440. Onde nao ha folga, de 1200px para baixo, o clamp devolve
     zero e o bloco fica onde estava: o recuo lateral da pagina e o piso.
     Anda por transform, e nao por margem: a margem automatica do envoltorio
     e o que centraliza o bloco, e mexer nela desmontaria a centralizacao. */
  .hero__grade {
    transform: translateX(calc(-1 * clamp(0px, (100vw - var(--largura-max)) / 2, 96px)));
  }
  .hero__fundo img { object-position: 68% 50%; }
  .hero__cortina {
    display: block;
    background: linear-gradient(90deg,
                  rgba(10, 10, 10, 0.25) 0%,
                  rgba(10, 10, 10, 0.25) 42%,
                  rgba(10, 10, 10, 0) 72%);
  }

  .par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-16); }
  .lista-fio { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-16); }
  .lista-fio__item:nth-last-child(-n + 2) { border-bottom: 0; }
  .declaracoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); }
  .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bonus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entregas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); }
  /* A coluna 1 continua reservada, agora vazia: e o vao por onde o Onurb da
     arte de fundo aparece. O texto segue na coluna 2, onde sempre esteve. */
  .autoridade__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--e-16); }
  .autoridade__texto { grid-column: 2; }
  /* 60% e nao 50%: e o ponto em que a parte escura da parede fica embaixo do
     texto sem cortar o Onurb. Medido, ver o comentario de .secao--retrato. */
  .secao--retrato { background-position: 60% 50%; }
  .oferta__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-16); }
  .fechamento__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-16); }


  .rodape__topo {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-16);
  }
  .rodape__base {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    text-align: left;
    align-items: center;
  }
  .rodape__credito { justify-self: end; }
}

/* Acima de 680px o cartao do contador volta ao tamanho cheio da referencia.
   Escrito como min-width para nao quebrar a ordem mobile-first do arquivo. */
@media (min-width: 681px) {
  .contador { right: 24px; bottom: calc(var(--altura-faixa) + var(--e-6)); }
  /* 144px e nao os 160px da referencia: e a largura em que a caixa do relogio
     termina exatamente onde termina a linha mais longa da frase, que e
     "Faltam 23 horas para", de 113px. Medido, com 1px de sobra. */
  .contador__cartao { width: 144px; padding: 16px 14px 14px; border-radius: 20px; }
  .contador__cartao::before { border-radius: 22px; }
  .contador__frase { font-size: 11.5px; margin-bottom: 14px; }
  .contador__caixa { padding: 8px 13px; }
  .contador__numero { font-size: 26px; }
}

/* Ponto de corte do bloco de duas colunas, ver .quebra-coluna. */
@media (min-width: 1024px) {
  .quebra-coluna { display: inline; }
}

/* Ponto de corte exclusivo dos paragrafos da hero, ver .quebra-hero. */
@media (min-width: 1120px) {
  .quebra-hero { display: inline; }
}

/* Janela baixa. A hero e alta por causa do H1 de varias linhas, e em tela
   curta ela empurrava a faixa de assuntos para fora do campo de visao. O
   respiro de cima e de baixo encolhe em dois degraus para devolver essa
   altura a faixa. As contas, com o conteudo da hero em 700px:
     respiro cheio, 144px  -> a faixa cabe a partir de 898px de janela
     primeiro degrau,  72  -> a partir de 826px
     segundo degrau,   40  -> a partir de 794px
   Dai os cortes em 900 e 830, com folga sobre cada limite. Abaixo de 794px
   nao ha o que apertar: so o H1 ja ocupa cerca de 300px. */
@media (min-width: 768px) and (max-height: 900px) {
  .hero { padding-top: var(--e-8); }
  .hero__grade { padding-bottom: var(--e-10); }
}
@media (min-width: 768px) and (max-height: 830px) {
  .hero { padding-top: var(--e-5); }
  .hero__grade { padding-bottom: var(--e-5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faixa__trilho,
  .carrossel__trilho,
  .contador__cartao::before { animation: none; }
  /* O anel do ponto e so pulso: sem movimento ele nao tem o que comunicar,
     entao sai da tela em vez de ficar parado por cima do ponto. */
  .contador__rotulo::after { display: none; }
  .contador { transition: none; }
  .surge { opacity: 1; transform: none; }
  .contador[data-entrou="nao"] { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}