/* =========================================================================
   PulsarH.AI · sistema visual  ·  v2
   A lei está em docs/BRANDING-BOOK-PULSARH.md, cap. 10.

   Tipografia · Inter. Fraunces SÓ no grito, 1× por página.
   Superfície · NOITE (escuro) e PRATA (claro). Creme aposentado.
   Metais     · ouro = o que acende (1× por dobra) · prata = o que estrutura.
   Cor        · violeta é a marca e tem que APARECER: lavagem, fio, brilho.
   ========================================================================= */

:root {
  /* superfícies escuras */
  --noite:       #0B0C1F;
  --noite-2:     #12142B;
  --noite-3:     #1A1D3A;

  /* superfície clara — PRATA, nunca creme */
  --prata-alta:  #F5F6FA;
  --prata-clara: #E8E9F0;
  --prata:       #A8AAC2;
  --prata-funda: #7B7E9E;
  --prata-chapa: linear-gradient(180deg, #F6F7FB 0%, #EDEEF5 46%, #E2E4EE 100%);
  --metal-prata: linear-gradient(145deg, #FFFFFF 0%, #E8E9F0 26%, #A8AAC2 62%, #7B7E9E 100%);

  /* marca */
  --violeta-fundo: #3B1750;
  --violeta:       #5C4280;
  --violeta-claro: #7A5BA0;
  --violeta-neon:  #9B7FC7;

  /* ouro — evento */
  --ouro:        #C9A84A;
  --ouro-alto:   #F0DFA8;
  --ouro-fundo:  #8A6D1E;
  --metal-ouro:  linear-gradient(145deg, #F5E9C4 0%, #C9A84A 46%, #8A6D1E 100%);

  /* semânticas — nunca decoram */
  --mint: #3DDC97;  --coral: #FF6B47;  --erro: #E04D6C;

  /* texto sobre noite */
  --tinta:      #F5F6FA;
  --tinta-meia: rgba(245, 246, 250, .70);
  --tinta-leve: rgba(245, 246, 250, .44);
  --fio:        rgba(168, 170, 194, .18);
  --fio-alto:   rgba(168, 170, 194, .34);

  /* escala — poucos degraus, e só estes */
  /* A ESCALA DA CASA (23/08) — uma so, pras tres paginas. Antes cada pagina
     tinha o seu h1 (76 / 42 / 62 [MEDIDO a 1612px]) e o corpo corria de 14 a
     20px em seis degraus. Os tokens --rt-* do rentabiliza.css apontam pra
     estes. Oito degraus, e so estes: */
  --t-hero:  clamp(32px, 3.6vw, 50px);   /* h1, uma vez por pagina (= h2: a hierarquia e de contexto, nao de corpo) */
  --t-h2:    clamp(27px, 3.6vw, 50px);   /* titulo de secao               */
  --t-frase: clamp(18px, 1.8vw, 23px);   /* virada, fecho, lista forte    */
  --t-h3:    clamp(18px, 1.6vw, 22px);   /* titulo de card                */
  --t-lede:  clamp(16px, 1.35vw, 18px);  /* o paragrafo de abertura       */
  --t-corpo: 16px;                        /* todo paragrafo e item         */
  --t-min:   14px;                        /* nota, card denso, rodape      */
  --t-selo:  11px;                        /* etiqueta                      */
  /* h1 que DIVIDE a linha com o video (dobra de duas colunas: home e
     /rentabiliza) desce um degrau — o do h2. A 58px a promessa do
     Rentabiliza virava 7 linhas e o CTA batia no fim da tela [MEDIDO 23/08:
     725px num viewport de 715]. A capa de coluna inteira (LP) fica no --t-hero. */
  --t-hero-dobra: var(--t-hero); /* mesmo teto do h2 (50); piso de h1 (32) — a 27 o hero do celular sumia */
  /* (23/08, pedido dele: tudo ~10% menor que o primeiro corte, pra render
      liso no celular) */

  /* ESCALA DE ESPACO — uma so, usada em todo lugar. Antes as margens eram
     inline e ad-hoc: 13px, 14px, 16px, 34px, 38px, 40px, sem sistema. */
  --e1: 8px;
  --e2: 14px;
  --e3: 22px;
  --e4: clamp(28px, 3vw, 40px);
  --e5: clamp(40px, 4.6vw, 64px);
  --e6: clamp(56px, 6.4vw, 92px);

  /* `--ar` e o respiro de UM lado da secao. Duas secoes vizinhas somavam
     346px de vazio [MEDIDO 22/08, 1440x900] — foi o que o Rodrigo apontou.
     Agora somam ~192px, que ainda e generoso e para de parecer buraco. */
  --ar:      clamp(56px, 6.8vw, 98px);
  /* a medida da coluna de leitura: 50ch em toda cabeca de secao */
  --leitura: 50ch;
  --largura: 1240px;
  --gutter:  clamp(20px, 4.5vw, 48px);

  --curva:  cubic-bezier(.16, 1, .3, 1);
  --rapido: 200ms;  --base: 340ms;  --lento: 720ms;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: 86px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--noite);
  color: var(--tinta);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: var(--t-corpo);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(155, 127, 199, .35); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; border-radius: 2px; }

.wrap { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-estreito { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }

/* =========================================================================
   TIPOGRAFIA
   ========================================================================= */
.hero-titulo {
  font-size: var(--t-hero-dobra); font-weight: 200; line-height: .98;
  letter-spacing: -.045em; margin: 0; text-wrap: balance;
}
.hero-titulo strong { font-weight: 600; letter-spacing: -.05em; }

h2, .h2 {
  font-size: var(--t-h2); font-weight: 200; line-height: 1.02;
  letter-spacing: -.042em; margin: 0; text-wrap: balance;
}
h2 strong, .h2 strong { font-weight: 600; letter-spacing: -.048em; }

h3, .h3 {
  font-size: var(--t-h3); font-weight: 500; line-height: 1.16;
  letter-spacing: -.026em; margin: 0;
}

.lede {
  font-size: var(--t-lede); font-weight: 300; line-height: 1.58;
  color: var(--tinta-meia); max-width: 54ch; margin: 24px 0 0;
}
.lede strong { color: var(--tinta); font-weight: 500; }

/* a lede que afirma, em vez de explicar — mesma medida, mais peso */
.lede-firme { color: var(--tinta); font-weight: 400; }
/* nota de rodape de bloco */
.nota {
  margin: var(--e3) 0 0; max-width: 34ch;
  font-size: 15.5px; line-height: 1.6; color: var(--tinta-meia);
}
/* a acao que fecha um bloco de texto */
.acao-secundaria { margin-top: var(--e5); }

/* a linha que não é título nem corpo: o ritmo entre os dois */
.lede-forte {
  font-size: var(--t-frase);
  font-weight: 400; line-height: 1.32; letter-spacing: -.028em;
  color: var(--tinta); max-width: 34ch; margin: 20px 0 0;
}
.lede-forte b { font-weight: 400; }
/* o ponto e TEXTO de verdade — so a cor vem do CSS. Antes ele era content:"."
   e sumia do fonte, da copia e do leitor de tela. */
.lede-forte i { font-style: normal; color: var(--violeta-neon); font-weight: 600; }

.selo {
  font-size: var(--t-selo); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--violeta-neon);
  display: inline-flex; align-items: center; gap: 13px; margin: 0 0 18px;
}
.selo::before {
  content: ""; width: 30px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, currentColor);
  transform-origin: right center;
}
/* o traco do selo se desenha — o menor gesto da pagina, e o que abre cada
   secao. So esconde se o JavaScript estiver vivo. */
.js .selo.rv::before { transform: scaleX(0); }
.js .selo.rv.dentro::before { transform: scaleX(1); transition: transform .8s var(--curva) .12s; }
@media (prefers-reduced-motion: reduce) {
  .js .selo.rv::before, .js .selo.rv.dentro::before { transform: none; transition: none; }
}

/* O GRITO — a única serifa da casa */
/* =========================================================================
   O GRITO
   Ele estava sozinho no meio de uma secao vazia — sem sujeito, sem entrada,
   sem saida. A frase e congelada (Branding Book cap. 2) e nao muda; o que
   mudou foi dar em QUEM ela pousa. O selo abre, a lede corre direto pra
   dentro do grito e a frase se escreve da esquerda pra direita.
   ========================================================================= */
.grito-cena { text-align: center; }
.grito-cena .selo { justify-content: center; margin-bottom: clamp(20px, 2.6vw, 32px); }
.grito-cena .selo::before { display: none; }
.grito-lede {
  margin: 0 0 clamp(10px, 1.4vw, 18px);
  font-size: var(--t-frase); font-weight: 300;
  line-height: 1.3; letter-spacing: -.022em; color: var(--tinta-meia);
}
/* a frase se escreve: o ouro entra da esquerda pra direita, uma vez so */
.js .grito.rv { opacity: 1; transform: none; clip-path: inset(-8% 100% -8% -6%); }
.js .grito.rv.dentro {
  /* folga negativa: o italico da Fraunces tem swash que passa da caixa */
  clip-path: inset(-8% -6% -8% -6%);
  transition: clip-path 1.6s var(--curva) .12s;
}
@media (prefers-reduced-motion: reduce) {
  .js .grito.rv, .js .grito.rv.dentro { clip-path: none; transition: none; }
}

.grito {
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-style: italic; font-weight: 400;
  font-size: var(--t-hero); line-height: 1.1;
  letter-spacing: -.03em; margin: 0; text-wrap: balance;
  background: linear-gradient(96deg, var(--ouro-alto) 0%, var(--ouro) 42%, var(--ouro-fundo) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* =========================================================================
   SUPERFÍCIES
   ========================================================================= */
.secao { padding: var(--ar) 0; position: relative; }
/* A secao que e uma PAUSA — o grito. Ela respira mais que as outras de
   proposito: uma frase sozinha precisa de silencio em volta pra pesar. */
.secao-pausa { padding-block: clamp(86px, 10vw, 146px); }

/* lavagem de violeta — a marca aparecendo no escuro */
.aura::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 64% 52% at 82% 4%, rgba(92, 66, 128, .30), transparent 64%);
}
.aura > * { position: relative; z-index: 1; }

/* PRATA — a superfície clara da casa */
.prata {
  background: var(--prata-chapa);
  color: #0B0C1F;
  --tinta: #0B0C1F;
  --tinta-meia: #4C5064;
  --tinta-leve: #8A8DA3;
  --fio: rgba(11, 12, 31, .13);
  --fio-alto: rgba(11, 12, 31, .26);
  --violeta-neon: #5C4280;
}
.prata::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 22%, rgba(255,255,255,.9) 78%, transparent);
}

/* fio de prata — o divisor da casa */
.fio-prata {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--fio-alto) 18%, var(--fio-alto) 82%, transparent);
}

/* =========================================================================
   NAVEGAÇÃO
   ========================================================================= */
/* O menu NAO tem caixa no topo: ele flutua sobre a placa e a imagem sobe ate
   a borda da tela. So ganha fundo depois que a pagina rola — ai ele precisa
   se defender de superficie clara. A legibilidade no topo vem do veu do hero,
   que tem um esfumado escuro na borda de cima. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--base) var(--curva),
              border-color var(--base) var(--curva),
              backdrop-filter var(--base) var(--curva);
}
.nav.densa {
  background: rgba(11, 12, 31, .88);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom-color: var(--fio);
}
.nav-inner {
  max-width: var(--largura); margin: 0 auto;
  padding: 15px var(--gutter);
  display: flex; align-items: center; gap: 30px;
}
/* ---------- O CABECALHO DE PAGINA DE PROGRAMA ----------
   Padrao da casa, nao remendo de uma perna: vale pro Rentabiliza.ai, pro
   Command e pro in.Company. A pagina de um programa nao carrega o menu
   institucional — ele so oferece SAIDA de onde o leitor acabou de entrar,
   e boa parte de quem chega vem direto de anuncio, sem nunca ter visto a
   home. Fica o caminho de volta, e a acao da pagina.
   A seta anda pra tras no hover: o movimento diz o que o botao faz. */
.nav-voltar {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 9px 17px 9px 13px; border-radius: 999px;
  border: 1px solid var(--fio); background: rgba(255,255,255,.035);
  font-size: 15px; font-weight: 500; letter-spacing: -.012em;
  color: var(--tinta-meia);
  transition: color var(--base) var(--curva), border-color var(--base) var(--curva),
              background var(--base) var(--curva);
}
.nav-voltar svg { transition: transform var(--base) var(--curva); }
.nav-voltar:hover { color: var(--tinta); border-color: rgba(201,168,74,.34); background: rgba(201,168,74,.08); }
.nav-voltar:hover svg { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) { .nav-voltar:hover svg { transform: none; } }
/* sem menu no meio, a acao da pagina vai pra direita sozinha */
.nav--programa .nav-cta { margin-left: auto; }

.marca { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.marca img {
  width: 32px; height: 32px;
  filter: drop-shadow(0 3px 14px rgba(122, 91, 160, .55));
  transition: transform var(--lento) var(--curva);
}
.marca:hover img { transform: rotate(28deg); }
.marca span { font-size: 19.5px; font-weight: 500; letter-spacing: -.032em; color: #F5F6FA; }
.marca b {
  font-weight: 300;
  background: linear-gradient(92deg, var(--violeta-neon), var(--ouro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.menu { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.menu-item { position: relative; }
.menu-item > a, .menu-item > button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px; font: inherit; font-size: 14.5px;
  color: rgba(245, 246, 250, .74);
  background: none; border: 0; cursor: pointer; border-radius: 9px;
  transition: color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.menu-item > a:hover, .menu-item > button:hover,
.menu-item:focus-within > button { color: #F5F6FA; background: rgba(155, 127, 199, .14); }
.menu-item .seta { width: 9px; height: 9px; opacity: .5; transition: transform var(--base) var(--curva); }
.menu-item:hover .seta, .menu-item:focus-within .seta { transform: rotate(180deg); }

.gaveta {
  /* z-index alto: a gaveta nunca perde briga de empilhamento com a pagina */
  position: absolute; z-index: 40; top: calc(100% + 10px); left: 0; min-width: 366px;
  background: linear-gradient(168deg, var(--noite-3), var(--noite-2));
  border: 1px solid var(--fio-alto); border-radius: 16px; padding: 9px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985);
  transform-origin: top left;
  transition: opacity var(--base) var(--curva), transform var(--base) var(--curva), visibility var(--base);
  box-shadow: 0 30px 70px -22px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
}
.menu-item:hover .gaveta, .menu-item:focus-within .gaveta {
  opacity: 1; visibility: visible; transform: none;
}
.gaveta a {
  display: block; padding: 13px 15px; border-radius: 11px;
  transition: background var(--rapido) var(--curva);
}
.gaveta a:hover { background: rgba(155, 127, 199, .14); }
.g-nome { font-size: 15.5px; font-weight: 500; color: #F5F6FA; letter-spacing: -.018em; }
.g-linha { display: block; font-size: 13px; line-height: 1.45; color: rgba(245,246,250,.54); margin-top: 4px; }

.menu-btn {
  display: none; margin-left: auto; width: 44px; height: 44px;
  border-radius: 11px; border: 1px solid var(--fio-alto);
  background: none; cursor: pointer; color: #F5F6FA;
}

/* =========================================================================
   BOTÕES — ouro é evento, e o evento tem brilho que passa
   ========================================================================= */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; min-height: 50px;
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.012em;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--base) var(--curva), box-shadow var(--base) var(--curva),
              border-color var(--base) var(--curva), color var(--base) var(--curva);
}
.btn svg { width: 16px; height: 16px; transition: transform var(--base) var(--curva); }
.btn:hover svg { transform: translateX(4px); }
/* seta pra BAIXO (os botoes de avanco entre secoes): anda pra baixo, nao pro lado */
.btn-verde:hover svg { transform: translateY(3px); }

.btn-ouro {
  background: var(--metal-ouro); color: #0B0C1F; font-weight: 600;
  box-shadow: 0 8px 30px -10px rgba(201, 168, 74, .5);
}
.btn-ouro::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform var(--lento) var(--curva);
}
.btn-ouro:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(201,168,74,.62); }
.btn-ouro:hover::after { transform: translateX(130%); }

/* ---------- O CADASTRO ----------
   Primeiro formulario da casa (22/08). Mora aqui, nao na perna, porque o
   Command e o in.Company vao usar o mesmo. Campo escuro sobre secao escura:
   o fio e que desenha a caixa, e ele acende em ouro no foco — a cor da
   marca falando — nao em azul de navegador. */
.r-cadastro {
  margin: var(--e5) auto 0; max-width: 720px;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid rgba(244,185,62,.22); border-radius: 22px;
  background: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}
/* os tres grupos: quem e, o canal, a dor. O legend e o titulo de cada um */
.r-cadastro-grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.r-cadastro-grupo + .r-cadastro-grupo { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--fio); }
.r-cadastro-grupo legend {
  padding: 0; margin: 0 0 18px; font-size: 19px; font-weight: 500;
  letter-spacing: -.025em; color: var(--tinta);
}
.r-cadastro-grade { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .r-cadastro-grade { grid-template-columns: 1fr 1fr; }
  .r-campo--larga { grid-column: 1 / -1; }
}
.r-campo { display: grid; gap: 7px; }
.r-campo > span {
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-leve);
}
.r-campo > span em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; }
.r-campo input::placeholder { color: var(--tinta-leve); opacity: .7; }
.r-campo input, .r-campo select, .r-campo textarea {
  width: 100%; padding: 13px 15px; min-height: 48px;
  font: inherit; font-size: 16px; color: var(--tinta);
  background: rgba(11,12,31,.55); border: 1px solid var(--fio-alto); border-radius: 12px;
  transition: border-color var(--base) var(--curva), box-shadow var(--base) var(--curva);
}
.r-campo textarea { resize: vertical; min-height: 88px; }
.r-campo select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4.5 6 8.5l4-4' stroke='%23A8AAC2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 40px; }
.r-campo select option { background: var(--noite-2); color: var(--tinta); }
.r-campo input:focus, .r-campo select:focus, .r-campo textarea:focus {
  outline: none; border-color: rgba(244,185,62,.7);
  box-shadow: 0 0 0 3px rgba(244,185,62,.16);
}
.r-cadastro .hero-acoes { margin-top: var(--e4); }
.r-cadastro-erro {
  margin: 14px 0 0; padding: 11px 14px; border-radius: 10px;
  font-size: 14px; line-height: 1.5; color: #FFD1D9;
  background: rgba(224,77,108,.14); border: 1px solid rgba(224,77,108,.4);
}
.r-cadastro-nota {
  margin: var(--e3) 0 0; text-align: center;
  font-size: 13px; line-height: 1.55; color: var(--tinta-leve);
}

/* ---------- O BOTAO DE AVANCO ----------
   Verde da casa (--mint). Nao briga com o ouro: eles tem trabalhos
   diferentes e a diferenca de cor E a mensagem.
     ouro  = a marca falando  (a acao principal da propria pagina)
     verde = o proximo passo  (sair daqui e ir ver o detalhe na LP)
   Assim o leitor aprende, na primeira secao, o que a cor verde significa —
   e nas outras cinco ele ja sabe pra onde ela leva sem precisar ler.
   Texto quase preto sobre o mint: contraste alto, e o verde chapado so
   funciona com tinta escura em cima. */
.btn-verde {
  background: var(--mint); color: #08130D; font-weight: 600;
  box-shadow: 0 8px 30px -12px rgba(61, 220, 151, .45);
}
.btn-verde:hover {
  transform: translateY(-2px); color: #08130D;
  box-shadow: 0 14px 40px -12px rgba(61, 220, 151, .6);
}
.btn-verde:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* a linha onde o botao de avanco mora, no fim de cada secao.
   REGRA DO RODRIGO (24/08), que substitui o "centralizado sempre" de 22/08:
   o CTA segue o alinhamento do TEXTO que vem antes dele. Texto a esquerda,
   botao abaixo a esquerda (padrao). Texto centralizado, botao centralizado
   (`.r-passo--centro`). Auditado nas duas paginas do Rentabiliza: so o fecho
   da marca (nova-forma) tem texto centrado. */
.r-passo {
  /* CICATRIZ 22/08: varias secoes tem o .wrap como GRADE de duas colunas
     (imagem de um lado, texto do outro). Sem isto, o botao virava mais um
     item da grade e caia dentro da coluna da IMAGEM — foi o "CTA fora do
     glow" que o Rodrigo viu. Atravessa a grade inteira, em qualquer secao. */
  grid-column: 1 / -1;
  /* e encosta no conteudo: com --e5 ele boiava num vazio abaixo da area
     iluminada da secao, parecendo solto em vez de fechar o bloco */
  margin: var(--e4) 0 0;
  display: flex; justify-content: flex-start;
}
.r-passo--centro { justify-content: center; }
/* na dobra de duas colunas (espelho), o botao fica embaixo da coluna do TEXTO, nao da imagem */
@media (min-width: 1000px) { .r-canal .r-passo { grid-column: 2; } }

.btn-fio { border-color: var(--fio-alto); color: var(--tinta); }
.btn-fio:hover { border-color: var(--violeta-neon); color: #fff; transform: translateY(-2px); }
.prata .btn-fio:hover { color: #0B0C1F; }
.btn-pequeno { padding: 11px 21px; min-height: 42px; font-size: 14px; }

.link-seta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; color: var(--ouro);
  transition: gap var(--base) var(--curva);
}
.prata .link-seta { color: var(--ouro-fundo); }
.link-seta svg { transition: transform var(--base) var(--curva); }
.link-seta:hover { gap: 15px; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  /* A dobra respira ate 84vh e centraliza o conteudo. Sem isso ela media 633px
     num 1440x900 [MEDIDO 22/08] e sobravam 190px mortos antes da proxima secao. */
  position: relative; min-height: min(72vh, 700px); /* 23/08: 84vh sobrava vazio em cima e embaixo num 1463x733 */
  display: flex; align-items: center;
  padding: calc(clamp(46px, 5.6vh, 74px) + 58px) 0 clamp(46px, 6vh, 72px);
  overflow: hidden;
}
/* A placa do hero JA nasce na paleta (violeta na sombra, prata na luz) e JA
   traz o Pulse, o rastro e os paineis. Por isso o tratamento aqui e leve:
   o filtro pesado de antes existia pra domar foto de banco de imagem. */
.hero-fundo {
  /* `inset: -6% 0` e nao `-6%`: a sobra do parallax e VERTICAL. Sobra
     horizontal so aumentava o corte lateral — e o assunto desta placa esta
     colado na borda direita. Pelo mesmo motivo o transform perdeu o `scale`. */
  position: absolute; inset: -6% 0; z-index: 0;
  background: var(--noite-2) 100% center/cover no-repeat;
  background-image: url("../img/hero-varejo.jpg");
  filter: saturate(.92) contrast(1.03) brightness(.82);
  will-change: transform;
}
/* Quanto mais estreita a tela, mais o `cover` puxa o Pulse pro centro e ele
   bate na copy. Entao a cena escorrega pra direita e o veu aperta junto. */
@media (max-width: 1180px) {
  .hero-fundo { background-position: 100% center; }
  .hero-veu {
    background:
      linear-gradient(180deg, rgba(11,12,31,.85) 0%, rgba(11,12,31,.45) 8%, rgba(11,12,31,0) 18%),
      linear-gradient(96deg, rgba(11,12,31,.97) 0%, rgba(11,12,31,.94) 44%, rgba(11,12,31,.74) 66%, rgba(11,12,31,.34) 88%, rgba(11,12,31,.18) 100%),
      linear-gradient(0deg, rgba(11,12,31,.6) 0%, transparent 34%);
  }
}
@media (max-width: 760px) {
  .hero-fundo {
    background-image: url("../img/hero-varejo-mobile.jpg");
    background-position: 100% center;
  }
  .hero-veu {
    background:
      linear-gradient(180deg, rgba(11,12,31,.85) 0%, rgba(11,12,31,.45) 8%, rgba(11,12,31,0) 18%),
      linear-gradient(0deg, rgba(11,12,31,.9) 0%, rgba(11,12,31,.82) 46%, rgba(11,12,31,.66) 100%),
      radial-gradient(ellipse 70% 40% at 80% 6%, rgba(92,66,128,.34), transparent 64%);
  }
}
/* O veu segura a legibilidade da copy a ESQUERDA e solta a cena a direita. */
.hero-veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,12,31,.82) 0%, rgba(11,12,31,.4) 7%, rgba(11,12,31,0) 16%),
    linear-gradient(96deg, rgba(11,12,31,.96) 0%, rgba(11,12,31,.9) 30%, rgba(11,12,31,.58) 52%, rgba(11,12,31,.14) 74%, rgba(11,12,31,0) 100%),
    linear-gradient(0deg, rgba(11,12,31,.55) 0%, transparent 34%),
    radial-gradient(ellipse 40% 40% at 4% 96%, rgba(59,23,80,.3), transparent 60%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-titulo { max-width: 16ch; }
.hero .lede { margin-top: 16px; max-width: 56ch; font-size: var(--t-lede); line-height: 1.55; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }

.triade {
  display: flex; flex-wrap: wrap; gap: 16px 34px;
  margin-top: 38px; padding-top: 22px; max-width: 660px;
  border-top: 1px solid var(--fio);
}
.triade span {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: var(--t-selo); font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--tinta-meia);
}
.triade span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--violeta-neon);
  box-shadow: 0 0 12px rgba(155, 127, 199, .9);
}

/* =========================================================================
   CABEÇAS E GRADES
   ========================================================================= */
/* Uma medida de leitura, nao seis. Antes havia 44ch, 46ch, 48ch, 50ch, 52ch
   e 56ch espalhados em `style=` — cada secao com uma largura diferente faz a
   pagina parecer montada por pessoas diferentes. */
.cabeca { max-width: var(--leitura); }
.cabeca--larga { max-width: 58ch; }
.cabeca--curta { max-width: 42ch; }
/* o intervalo entre selo, titulo e lede, igual em toda secao */
.cabeca .selo { margin-bottom: var(--e3); }
.cabeca h2 + .lede, .cabeca .h2 + .lede { margin-top: var(--e3); }
/* paragrafos de lede seguidos respiram sempre igual */
.lede + .lede { margin-top: var(--e2); }
/* o bloco que vem depois da cabeca de secao */
.cabeca + * { margin-top: var(--e6); }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 66px; align-items: stretch; }
.grade-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 66px; align-items: stretch; }

/* card com numeral fantasma e brilho de violeta no hover */
.card {
  position: relative; overflow: hidden;
  padding: 40px 34px 34px;
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--fio); border-radius: 20px;
  background: linear-gradient(168deg, rgba(168,170,194,.07), rgba(168,170,194,.02));
  transition: border-color var(--base) var(--curva), transform var(--base) var(--curva);
}
.prata .card { background: rgba(255,255,255,.62); }
.card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(155,127,199,.24), transparent 66%);
  transition: opacity var(--base) var(--curva);
}
.card:hover { border-color: var(--fio-alto); transform: translateY(-5px); }
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }

.card .letra {
  position: absolute; top: 14px; right: 22px; z-index: 0;
  font-size: 92px; font-weight: 700; line-height: 1;
  letter-spacing: -.06em; color: var(--fio); opacity: .55;
  user-select: none; pointer-events: none;
}
.card .n {
  font-size: var(--t-selo); font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--violeta-neon);
}
.card h3 { margin: 16px 0 12px; }
.card p { margin: 0; font-size: var(--t-min); line-height: 1.6; color: var(--tinta-meia); }

/* a cadeia — três dependências que se sustentam em fila */
.cadeia { margin: 44px 0 0; max-width: 62ch; display: grid; gap: 0; }
.cadeia li {
  list-style: none; position: relative;
  padding: 18px 0 18px 26px;
  border-top: 1px solid var(--fio);
  font-size: var(--t-corpo); line-height: 1.5;
  letter-spacing: -.015em; color: var(--tinta-meia);
}
.cadeia li:last-child { border-bottom: 1px solid var(--fio); }
.cadeia li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 11px; height: 1px; background: var(--violeta-neon);
}
.cadeia li b { color: var(--tinta); font-weight: 500; }

/* o que NAO e — mesma familia da .cadeia, mas o marcador e um X em vez do
   traco: sao negacoes, e o X diz isso antes da frase ser lida. Sem os fios
   da cadeia, porque esta lista mora na coluna do titulo e nao pode competir. */
.nao-e {
  /* `padding: 0` nao e detalhe: sem ele o navegador aplica os 40px de recuo
     padrao do <ul> e a lista desalinha da headline. */
  list-style: none; padding: 0; display: grid; gap: 12px;
  margin: 20px 0 0; max-width: 40ch;
}
.nao-e li {
  position: relative; padding-left: 25px;
  font-size: var(--t-corpo); line-height: 1.45;
  letter-spacing: -.015em; color: var(--tinta-meia);
}
.nao-e li::before, .nao-e li::after {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 12px; height: 1.5px; border-radius: 1px;
  background: var(--coral);
}
.nao-e li::before { transform: rotate(45deg); }
.nao-e li::after  { transform: rotate(-45deg); }

/* o fecho — a frase que encerra a seção */
.fecho {
  margin: 56px 0 0; padding-top: 34px;
  border-top: 1px solid var(--fio);
  font-size: var(--t-frase); font-weight: 300;
  line-height: 1.3; letter-spacing: -.03em; color: var(--tinta);
  max-width: 26ch;
}
.fecho b { font-weight: 600; }

/* cards com mais de um parágrafo respiram entre eles */
.card p + p { margin-top: 14px; }
.card .aspas { color: var(--tinta); font-weight: 500; }

/* card de porta */
.porta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 38px 34px 34px;
  border: 1px solid var(--fio); border-radius: 20px;
  background: linear-gradient(168deg, rgba(168,170,194,.07), rgba(168,170,194,.02));
  transition: border-color var(--base) var(--curva), transform var(--base) var(--curva);
}
.porta::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(155,127,199,.26), transparent 66%);
  transition: opacity var(--base) var(--curva);
}
.porta:hover { border-color: var(--fio-alto); transform: translateY(-5px); }
.porta:hover::after { opacity: 1; }
.porta > * { position: relative; z-index: 1; }
.porta .segmento {
  font-size: var(--t-selo); font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--violeta-neon);
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--fio);
}
.porta .quem {
  font-size: var(--t-min); line-height: 1.5; color: var(--tinta-meia);
  font-weight: 400; margin: 0 0 18px;
}
.porta p + p { margin-top: 13px; }
.porta h3 { font-size: var(--t-frase); font-weight: 500; }
.porta .promessa {
  margin: 0; font-size: var(--t-corpo); line-height: 1.6; color: var(--tinta-meia);
}
.porta .promessa:last-of-type { flex: 1; }
.porta .link-seta { margin-top: 30px; }

/* =========================================================================
   CONFRONTO
   ========================================================================= */
/* =========================================================================
   POR QUE NAO FUNCIONOU ANTES
   A secao era uma tabela se passando por argumento. Tres consertos:
   1. o topo virou duas colunas — a tese a esquerda, as tres frases a direita.
      Antes tudo morava em 50% da largura e sobravam ~700px de vazio.
   2. "Mas resultado operacional exige integracao" saiu do meio e virou o
      `.fecho` — que e a funcao dela: fechar.
   3. o confronto ganhou rotulo de coluna, contraste no lado esquerdo e uma
      seta que nao some.
   ⚠️ O lado esquerdo NAO leva X nem risco. A copy diz que resolveu UMA PARTE,
   nao que errou — e o inegociavel do Branding Book e que o dono nunca e o
   vilao. Quem separou o que devia andar junto foi o mercado, e a lede diz
   isso. O peso vai pro lado direito, que e a falta, nao pra culpa.
   ========================================================================= */
/* o topo desta secao e so a tese: a lede virou a headline dos tres pedacos */
.confronto-tese h2 { max-width: 22ch; }

/* =========================================================================
   A PONTE — o fecho da secao
   Em cima: tres pedacos SEPARADOS, cada um com foto e legenda. Embaixo: uma
   peca so, atravessando a largura inteira. O layout diz "separado x junto"
   antes de qualquer frase ser lida — e essa e a tese da secao.

   ⚠️ Aqui NAO se mistura o Pulse com gente fotografada no mesmo quadro. A
   tentativa de 22/08 pos o avatar 3D no meio de quatro pessoas reais e caiu
   no vale da estranheza. As fotos ficam nas fotos; o Pulse fica sozinho, em
   fundo neutro, embaixo.
   ========================================================================= */
.ponte { margin-top: clamp(52px, 6.5vw, 88px); }

.pedacos {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(20px, 3vw, 40px);
}
@media (min-width: 820px) { .pedacos { grid-template-columns: repeat(3, 1fr); } }
.pedacos figure {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  position: relative; overflow: hidden;
  border-radius: 16px; aspect-ratio: 4 / 3;
  background: var(--noite-2); border: 1px solid var(--fio);
}
.pedacos img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.58) contrast(1.04) brightness(.96);
  transition: transform var(--lento) var(--curva);
}
.pedacos li:hover img { transform: scale(1.04); }
.pedacos figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(59,23,80,.2), rgba(92,66,128,.05) 56%, transparent);
}
.pedacos p {
  margin: 0; padding-left: 24px; position: relative;
  font-size: var(--t-corpo); line-height: 1.45;
  letter-spacing: -.015em; color: var(--tinta-meia);
}
.pedacos p::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 12px; height: 1px; background: var(--violeta-neon);
}
.pedacos b { color: var(--tinta); font-weight: 600; }

/* A headline que abre os tres pedacos e a frase que fecha. As duas
   centralizadas, emoldurando o trio — mesmo idioma do arremate da secao 02.
   A caixa noite com o Pulse dentro foi removida em 22/08: virou moldura
   demais em volta de uma frase que so precisava de tamanho. */
.ponte-titulo {
  margin: 0 auto clamp(30px, 3.6vw, 48px);
  max-width: 30ch; text-align: center;
  font-size: var(--t-frase); font-weight: 300;
  line-height: 1.24; letter-spacing: -.028em; color: var(--tinta);
  text-wrap: balance;
}
.ponte-virada {
  margin: clamp(42px, 5vw, 68px) auto 0;
  max-width: 20ch; text-align: center;
  font-size: var(--t-h2); font-weight: 250;
  line-height: 1.12; letter-spacing: -.038em; color: var(--tinta);
  text-wrap: balance;
}
.ponte-virada b {
  font-weight: 400;
  background: var(--metal-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* sem a foto, o pedaco vira so a legenda — o argumento nao depende da arte */
.pedacos figure.sem-arte { display: none; }

.confronto { margin-top: clamp(44px, 5.5vw, 76px); }
.confronto-cabecalho {
  display: grid; grid-template-columns: 1fr 44px 1.15fr;
  gap: 28px; padding-bottom: 14px;
  font-size: var(--t-selo); font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
}
.confronto-cabecalho span:first-child { color: var(--tinta-leve); }
.confronto-cabecalho span:last-child { color: var(--violeta-neon); }

.confronto-linha {
  display: grid; grid-template-columns: 1fr 44px 1.15fr;
  gap: 28px; align-items: center;
  padding: 24px 14px 24px 0; border-top: 1px solid var(--fio);
  transition: background var(--base) var(--curva), padding-left var(--base) var(--curva);
}
.confronto-linha:last-child { border-bottom: 1px solid var(--fio); }
.confronto-linha:hover {
  padding-left: 14px;
  background: linear-gradient(90deg, rgba(122,91,160,.10), rgba(122,91,160,0) 72%);
}
/* o lado esquerdo e a fala do visitante — nao pode estar quase invisivel */
.confronto-linha .deles {
  font-size: var(--t-corpo); line-height: 1.4;
  color: var(--tinta-meia);
}
/* A seta. Antes era um fio de 1px que sumia em 3 das 5 linhas: com
   `align-items: center` e alturas diferentes, ela caia em meio pixel e o
   navegador nao pintava. 2px resolve, e a ponta da direcao. */
.confronto-linha .meio {
  position: relative; width: 44px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--fio-alto), var(--violeta-neon));
}
.confronto-linha .meio::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-top: 2px solid var(--violeta-neon);
  border-right: 2px solid var(--violeta-neon);
  transform: translateX(1px) rotate(45deg);
}
.confronto-linha .nossa {
  font-size: var(--t-corpo); line-height: 1.42;
  font-weight: 500; color: var(--tinta); letter-spacing: -.02em;
}

/* =========================================================================
   NÚMEROS E DADOS
   ========================================================================= */
/* =========================================================================
   A ESTEIRA DE NUMEROS
   Sete numeros nao dividem em 4, 3 ou 2 colunas — a ultima fileira sempre
   fica torta. Correndo, a contagem de itens deixa de importar.
   ⚠️ A contagem crescente NAO se aplica aqui: numero contando enquanto
   desliza e ilegivel. Duas animacoes no mesmo elemento se anulam. A contagem
   fica nos quatro do cenario, que sao parados.
   ========================================================================= */
.esteira {
  --vel: 32s;
  position: relative; overflow: hidden;
  margin-top: clamp(44px, 5.4vw, 72px);
  padding: 6px 0 18px;
  /* as pontas dissolvem: a esteira atravessa a tela, nao comeca nem termina */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.esteira-trilho {
  display: flex; width: max-content;
  animation: correr var(--vel) linear infinite;
}
/* para quando alguem quer ler — mouse ou teclado */
.esteira:hover .esteira-trilho,
.esteira:focus-within .esteira-trilho { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }

.esteira-fila {
  display: flex; align-items: stretch;
  gap: clamp(14px, 1.6vw, 22px);
  list-style: none; margin: 0; padding: 0 clamp(7px, .8vw, 11px);
}
/* A CAIXA DE VIDRO
   Vidro nao e "fundo branco com borda". Sao quatro coisas juntas: o que passa
   por tras (backdrop), a aresta de luz no topo, o reflexo diagonal no canto
   superior e o brilho que ele derrama embaixo. Sem as quatro, e so um cartao. */
.esteira-fila li {
  position: relative; flex: none; isolation: isolate;
  width: clamp(212px, 21.5vw, 272px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 2.6vw, 32px) clamp(21px, 2.3vw, 28px);
  border-radius: 20px;
  background:
    linear-gradient(152deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.66) 38%,
                    rgba(236,238,247,.52) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 22px 44px -26px rgba(11,12,31,.5),
    0 0 46px -24px rgba(122,91,160,.6);
  transition: transform var(--base) var(--curva), box-shadow var(--base) var(--curva);
  will-change: transform;
}
/* o fio de prata da moldura — mesmo idioma do celular do hero */
.esteira-fila li::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 2;
  background: var(--metal-prata);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}
/* o reflexo — e ele que faz o olho ler VIDRO e nao papel */
.esteira-fila li::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  background: linear-gradient(133deg,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.34) 17%,
    rgba(255,255,255,0) 38%, rgba(255,255,255,0) 76%,
    rgba(155,127,199,.14) 100%);
}
/* a esteira para no hover, entao o cartao pode crescer sem fugir do cursor */
.esteira-fila li:hover {
  transform: translateY(-5px) scale(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 30px 54px -26px rgba(11,12,31,.55),
    0 0 64px -18px rgba(122,91,160,.85);
}
.esteira-fila li > * { position: relative; z-index: 3; }
.esteira-fila b {
  display: block;
  font-size: clamp(30px, 3.2vw, 42px); font-weight: 150;
  line-height: .96; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(142deg, #7A5BA0 0%, #3B1750 38%, #0B0C1F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.esteira-fila span {
  display: block; margin-top: 11px;
  font-size: clamp(13px, 1.25vw, 14.5px); line-height: 1.4;
  color: var(--tinta-meia);
}
/* Sem animacao, a esteira vira uma fila que se arrasta com o dedo. Nunca
   um bloco parado cortado pela metade. */
@media (prefers-reduced-motion: reduce) {
  .esteira { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .esteira-trilho { animation: none; }
  .esteira-fila[aria-hidden="true"] { display: none; }
}

.numero b {
  display: block; font-size: clamp(38px, 5.2vw, 74px); font-weight: 150;
  line-height: .94; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
  background: var(--metal-prata);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.prata .numero b {
  background: linear-gradient(148deg, #5C4280 0%, #0B0C1F 62%);
  -webkit-background-clip: text; background-clip: text;
}
.numero span {
  display: block; margin-top: 16px; font-size: var(--t-min);
  line-height: 1.45; color: var(--tinta-meia); max-width: 21ch;
}

/* =========================================================================
   OS DADOS DO CENARIO
   Estes quatro numeros SAO o argumento da secao — e estavam em 46px, num
   lavanda suave, parados. Numero que descreve pressao precisa subir na tela.
   Tres movimentos: tamanho, contagem crescente na entrada, e o fio que se
   desenha. A contagem e o unico efeito da pagina que representa o proprio
   conteudo: o numero chegando onde chegou.
   ========================================================================= */
.dados { margin-top: clamp(44px, 5.4vw, 72px); }
.dado {
  position: relative;
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 16px clamp(26px, 3.4vw, 58px);
  align-items: baseline;
  padding: clamp(24px, 2.8vw, 38px) 14px clamp(24px, 2.8vw, 38px) 0;
  transition: background var(--lento) var(--curva), padding-left var(--lento) var(--curva);
}
/* o fio se DESENHA da esquerda pra direita, em vez de aparecer pronto */
.dado::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--fio); transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--curva);
}
.dado.dentro::before { transform: scaleX(1); }
.dado:last-of-type::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--fio); transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--curva) .3s;
}
.dado:last-of-type.dentro::after { transform: scaleX(1); }
.dado:hover {
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(122,91,160,.11), rgba(122,91,160,0) 66%);
}
/* prata no numero: mesmo uso ja consagrado em `.numero b` — prata e material,
   e aqui ela e a materia do argumento */
.dado b {
  font-size: clamp(44px, 6.4vw, 92px); font-weight: 150;
  line-height: .92; letter-spacing: -.052em;
  font-variant-numeric: tabular-nums; min-width: 5ch;
  background: var(--metal-prata);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: filter var(--base) var(--curva);
}
.dado:hover b { filter: drop-shadow(0 0 22px rgba(155,127,199,.5)); }
.dado p {
  margin: 0; font-size: var(--t-corpo); line-height: 1.5;
  color: var(--tinta-meia); max-width: 54ch;
}
.dado cite {
  display: block; margin-top: 10px; font-style: normal;
  font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--violeta-neon); opacity: .8;
}
/* as quatro linhas entram escalonadas — a pressao se acumula */
.dado.rv:nth-of-type(1) { transition-delay: 0s; }
.dado.rv:nth-of-type(2) { transition-delay: .1s; }
.dado.rv:nth-of-type(3) { transition-delay: .2s; }
.dado.rv:nth-of-type(4) { transition-delay: .3s; }
.dado:nth-of-type(2)::before { transition-delay: .1s; }
.dado:nth-of-type(3)::before { transition-delay: .2s; }
.dado:nth-of-type(4)::before { transition-delay: .3s; }
/* O fecho da secao estava num `.wrap-estreito` com `margin: 0 auto`, o que
   centralizava um bloco de 880px DENTRO do wrap e criava um recuo de ~360px
   sem motivo. Alinhado a esquerda, como o resto da pagina. */
.cenario-fecho { margin-top: clamp(52px, 6vw, 80px); max-width: 58ch; }

@media (max-width: 680px) {
  .dado { grid-template-columns: 1fr; gap: 10px; }
  .dado b { font-size: clamp(40px, 13vw, 62px); }
}

/* =========================================================================
   A DOBRA EM CAMADAS
   Painéis de dado, rastro de luz e ícones da tríade.
   ⚠️ Os painéis mostram O QUE SE MEDE, com direção e SEM valor — a régua do
   Branding Book cap. 2: direção sim, quantidade nunca.
   ========================================================================= */

/* rastro dourado que atravessa a dobra */
.hero-rastro {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .85;
}
.hero-rastro path {
  fill: none; stroke: url(#brilhoOuro); stroke-width: 2.4; stroke-linecap: round;
  filter: drop-shadow(0 0 14px rgba(201,168,74,.55));
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  animation: risca 2.6s var(--curva) .5s forwards;
}
@keyframes risca { to { stroke-dashoffset: 0; } }

/* painéis de indicador — vidro sobre a cena */
.painel {
  position: absolute; right: var(--gutter); top: 50%; z-index: 3;
  transform: translateY(-50%);
  display: grid; gap: 12px; width: 268px;
}
.painel-card {
  padding: 15px 17px; border-radius: 14px;
  background: rgba(18, 20, 43, .58);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(168,170,194,.22);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0; transform: translateY(14px);
  animation: sobe var(--lento) var(--curva) forwards;
}
.painel-card:nth-child(1) { animation-delay: 1.1s; }
.painel-card:nth-child(2) { animation-delay: 1.35s; margin-left: 26px; }
.painel-card:nth-child(3) { animation-delay: 1.6s; }
.painel-card .rot {
  font-size: 10.5px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(245,246,250,.5);
}
.painel-card .val {
  display: flex; align-items: center; gap: 9px; margin-top: 7px;
  font-size: 16.5px; font-weight: 500; letter-spacing: -.02em; color: #F5F6FA;
}
.painel-card .seta { width: 17px; height: 17px; flex: none; color: var(--ouro); }
.painel-card.desce .seta { color: var(--violeta-neon); }
@media (max-width: 1180px) { .painel { display: none; } }

/* ícones da tríade */
.triade span svg { width: 19px; height: 19px; color: var(--violeta-neon); flex: none; }
.triade span::before { display: none; }
.triade span { gap: 9px; font-size: 12px; color: var(--tinta-meia); }

/* o acento de ouro dentro do título */
.hero-titulo .ouro {
  background: linear-gradient(96deg, var(--ouro-alto) 0%, var(--ouro) 55%, var(--ouro-fundo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 600; letter-spacing: -.05em;
}

/* =========================================================================
   IMAGEM E VÍDEO
   Regra: toda foto passa pelo MESMO tratamento — dessatura e recebe a
   lavagem de violeta. Assim qualquer imagem gerada entra no sistema sem
   ninguém precisar tratar arquivo por arquivo.
   ========================================================================= */
/* O video do hero entra POR CIMA da placa parada e com o MESMO tratamento —
   assim o momento em que ele comeca a tocar nao aparece pro visitante. */
.hero-video {
  position: absolute; inset: -6% 0; z-index: 0;
  width: 100%; height: 112%; object-fit: cover; object-position: 100% center;
  filter: saturate(.92) contrast(1.03) brightness(.82);
  will-change: transform;
}
@media (max-width: 1180px) { .hero-video { object-position: 78% center; } }
/* No celular o video nao toca: 2,4 MB no 4G pra um fundo decorativo e conta
   que o visitante paga sem ver. A placa parada faz o mesmo trabalho. */
@media (max-width: 760px) { .hero-video { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
/* =========================================================================
   A ROLETA DE CARTAS
   Tres paredes de texto lado a lado era o que pesava na secao. Uma por vez
   limpa — mas carrossel esconde conteudo, e com so tres cartas o risco e o
   visitante nem perceber que existem as outras duas. Por isso as vizinhas
   ficam VISIVEIS nas laterais, inclinadas e desfocadas: dao a pista sem
   disputar a leitura.
   As tres continuam no HTML — o buscador le as tres, sempre.
   ========================================================================= */
.baralho { margin-top: clamp(26px, 3.4vw, 44px); }
.baralho:focus-visible { outline: 2px solid var(--violeta-neon); outline-offset: 14px; border-radius: 24px; }
.baralho-palco {
  position: relative; display: grid;
  perspective: 1700px; perspective-origin: 50% 42%;
  padding: 10px 0 16px; overflow: hidden;
  touch-action: pan-y;
}
.baralho-carta {
  grid-area: 1 / 1; justify-self: center;
  width: min(100%, 470px);
  transition: transform .62s var(--curva), opacity .46s var(--curva), filter .46s var(--curva);
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}
/* a carta ativa nao levanta no hover: aqui quem manda na posicao e a roleta */
.baralho-carta:hover { transform: none; }
.baralho-carta.ativa { cursor: default; }

.baralho-leme {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 26px); margin-top: clamp(18px, 2.4vw, 28px);
}
.baralho-seta {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--fio-alto); background: transparent; color: var(--tinta-meia);
  transition: color var(--base) var(--curva), border-color var(--base) var(--curva),
              background var(--base) var(--curva), transform var(--base) var(--curva);
}
.baralho-seta svg { width: 19px; height: 19px; }
.baralho-seta:hover { color: var(--tinta); border-color: var(--violeta-neon); transform: scale(1.06); }
.baralho-seta:focus-visible { outline: 2px solid var(--violeta-neon); outline-offset: 3px; }

.baralho-pontos { display: flex; align-items: center; gap: 9px; }
.baralho-ponto {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; background: var(--fio-alto);
  transition: width var(--base) var(--curva), background var(--base) var(--curva);
}
.baralho-ponto.ativo { width: 26px; border-radius: 5px; background: var(--violeta-neon); }
.baralho-ponto:focus-visible { outline: 2px solid var(--violeta-neon); outline-offset: 3px; }

/* Sem JavaScript, ou com movimento reduzido: as tres viram lista simples.
   Nunca uma carta so — isso esconderia dois tercos da explicacao. */
.baralho:not(.viva) .baralho-palco {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  perspective: none; overflow: visible;
}
.baralho:not(.viva) .baralho-carta { grid-area: auto; width: auto; }
.baralho:not(.viva) .baralho-leme { display: none; }
@media (max-width: 860px) {
  .baralho:not(.viva) .baralho-palco { grid-template-columns: 1fr; }
}

/* =========================================================================
   SECAO 02 · o Pulse fala
   Os baloes sao TEXTO em HTML, nao pixel dentro da arte. A arte original
   trazia as tres frases desenhadas — numa coluna de 500px isso vira letra de
   8px: ilegivel no celular, invisivel pro buscador e impossivel de editar
   sem regerar. Mesma licao do numero em hero: pixel nao se corrige depois.
   ========================================================================= */
.muda-topo { display: grid; gap: clamp(30px, 4vw, 60px); }
@media (min-width: 1000px) {
  .muda-topo { grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); align-items: center; } /* 23/08: a headline alinha pelo centro do Pulse, nao pelo topo */
}
.muda-esq h2 { margin-top: 14px; }
/* A frase que costura os tres cards. Fica centralizada acima deles porque e
   o arremate da secao, nao um paragrafo da coluna da esquerda. */
.muda-arremate {
  margin: clamp(46px, 6vw, 74px) auto clamp(26px, 3.2vw, 38px);
  max-width: 34ch; text-align: center;
  font-size: var(--t-frase); line-height: 1.34;
  font-weight: 500; letter-spacing: -.012em; color: var(--tinta);
  text-wrap: balance;
}

.fala {
  display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
  gap: clamp(6px, 1.4vw, 18px); align-items: center;
  margin-top: clamp(22px, 3vw, 34px);
}
.fala-pulse {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 24px 30px rgba(11,12,31,.20));
}
.fala-baloes { list-style: none; display: flex; flex-direction: column; gap: clamp(11px, 1.5vw, 18px); }
.fala-baloes li {
  position: relative;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(11,12,31,.10);
  border-radius: 16px;
  padding: clamp(13px, 1.5vw, 17px) clamp(15px, 1.7vw, 21px);
  font-size: var(--t-corpo); line-height: 1.48;
  color: var(--tinta);
  box-shadow: 0 12px 26px -16px rgba(11,12,31,.42);
}
.fala-baloes b { font-weight: 650; }
/* o rabicho, apontando pro Pulse */
.fala-baloes li::before {
  content: ""; position: absolute; left: -8px; top: 22px;
  width: 15px; height: 15px; transform: rotate(45deg);
  background: rgba(255,255,255,.9);
  border-left: 1px solid rgba(11,12,31,.10);
  border-bottom: 1px solid rgba(11,12,31,.10);
  border-radius: 0 0 0 4px;
}
/* Em tela estreita o Pulse cede largura pros baloes: quem tem que ser lido
   e a frase, nao a figura. E a letra nao encolhe junto com a tela — ela ja
   caia pra 14,5px, que e tamanho de rodape, nao de argumento. */
@media (max-width: 900px) {
  .fala { grid-template-columns: minmax(78px, 25%) minmax(0, 1fr); gap: 10px; }
  .fala-baloes li { padding: 15px 18px; }
}
@media (max-width: 560px) {
  .fala { grid-template-columns: 1fr; gap: 16px; }
  .fala-pulse { width: 46%; margin: 0 auto; }
  .fala-baloes { gap: 13px; }
  .fala-baloes li { line-height: 1.45; padding: 17px 20px; border-radius: 18px; }
  .fala-baloes li::before { left: 50%; top: -8px; margin-left: -7px;
    border: 0; border-top: 1px solid rgba(11,12,31,.10); border-left: 1px solid rgba(11,12,31,.10); }
}

/* Duas colunas na dobra: a copy a esquerda, o celular a direita, e o Pulse
   entre os dois como presenca de fundo. Numa coluna so o CTA caia 23px abaixo
   da dobra num 1440x900 [MEDIDO 22/08] — e CTA que exige rolagem nao existe.
   A ordem do DOM continua boa no celular: titulo, VSL, entao acao. */
/* Uma coluna: selo, headline, celular, acao. A placa desta dobra tem o
   assunto inteiro a direita e a esquerda vazia — entao a copy nao disputa
   com nada e o celular pode vir logo abaixo do titulo. */
/* A dobra em DUAS colunas (23/08), a mesma do /rentabiliza: headline e
   celular dividem a linha, centrados um pelo outro. Abaixo de 1000px volta a
   empilhar: selo, titulo, acao, celular. */
.hero-dobra { display: grid; gap: clamp(36px, 4.4vw, 64px); align-items: center; }
.hero-texto { min-width: 0; }
.hero .mock { max-width: 460px; margin-top: clamp(18px, 2.4vh, 26px); }
@media (min-width: 1000px) {
  .hero-dobra { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
  .hero-mock { margin: 0; max-width: 400px; justify-self: center; }
}

/* o selo virou frase, e frase longa nao aguenta o entreletras de etiqueta */
/* O selo virou frase. Etiqueta curta aguenta entreletras de .2em; frase de 41
   caracteres nao — ela quebra em duas linhas e perde a cara de assinatura. */
.selo-frase { letter-spacing: .085em; max-width: none; white-space: nowrap; }
@media (max-width: 620px) { .selo-frase { white-space: normal; letter-spacing: .06em; } }

/* =========================================================================
   O CELULAR DEITADO · onde mora a VSL
   A prata aparece aqui como MOLDURA — que e uso legitimo pela lei da casa
   (prata e material: fio, borda, moldura; nunca botao).
   ========================================================================= */
.mock {
  position: relative; margin: clamp(26px, 3.4vh, 38px) 0 0;
  width: 100%; max-width: 600px;
}
.mock-corpo {
  position: relative;
  padding: 11px 15px;
  border-radius: 30px;
  background:
    linear-gradient(160deg, #2A2D48 0%, #16182F 40%, #0D0E22 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 2px 0 0 rgba(255,255,255,.14) inset,
    0 30px 70px -18px rgba(0,0,0,.9),
    0 0 90px -30px rgba(122,91,160,.55);
}
/* o fio de prata da moldura */
.mock-corpo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: var(--metal-prata);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55;
}
.mock-tela {
  position: relative; overflow: hidden;
  border-radius: 19px; aspect-ratio: 16 / 9;
  background: var(--noite);
  box-shadow: 0 0 0 1px rgba(0,0,0,.7) inset;
}
.mock-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--noite); }
/* alto-falante: no celular deitado ele fica na lateral curta */
.mock-alto {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 42px; border-radius: 3px;
  background: rgba(255,255,255,.16);
}
/* botoes fisicos: deitado, migram pra borda de cima */
.mock-botao {
  position: absolute; top: -2px; height: 3px; border-radius: 3px;
  background: var(--metal-prata); opacity: .5;
}
.mock-botao-a { left: 22%; width: 48px; }
.mock-botao-b { left: 36%; width: 26px; }

@media (max-width: 760px) {
  .mock { max-width: none; }
  .mock-corpo { padding: 8px 11px; border-radius: 24px; }
  .mock-tela { border-radius: 15px; }
  .mock-alto { height: 32px; }
}

/* foto dentro do card de porta */
.porta-foto {
  position: relative; overflow: hidden;
  margin: -38px -34px 26px; aspect-ratio: 16 / 10;
  background: var(--noite-2);
}
.porta-foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.62) contrast(1.04) brightness(.94);
  transform: scale(1.02);
  transition: transform var(--lento) var(--curva), filter var(--lento) var(--curva);
}
.porta:hover .porta-foto img { transform: scale(1.07); filter: saturate(.78) contrast(1.04) brightness(1.02); }
.porta-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(11,12,31,.28) 52%, rgba(11,12,31,.62) 100%),
    linear-gradient(122deg, rgba(59,23,80,.34), rgba(92,66,128,.1) 58%, transparent);
}
.prata .porta-foto::after {
  background:
    linear-gradient(180deg, transparent 0%, rgba(11,12,31,.2) 52%, rgba(11,12,31,.46) 100%),
    linear-gradient(122deg, rgba(59,23,80,.26), rgba(92,66,128,.08) 58%, transparent);
}

/* retrato largo — a origem */
.retrato {
  position: relative; overflow: hidden;
  margin-top: 70px; border-radius: 20px;
  aspect-ratio: 21 / 8; background: var(--noite-2);
  border: 1px solid var(--fio);
}
.retrato img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) contrast(1.04) brightness(.86); }
.retrato::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(96deg, rgba(11,12,31,.82) 0%, rgba(11,12,31,.34) 34%, rgba(11,12,31,.1) 58%, rgba(59,23,80,.34) 100%);
}
.retrato figcaption {
  position: absolute; left: clamp(20px,3vw,40px); bottom: clamp(18px,2.4vw,30px); right: 20px;
  font-size: var(--t-min); color: rgba(245,246,250,.82); max-width: 44ch; z-index: 1;
}

/* O Pulse de plano de fundo foi REMOVIDO em 22/08. Ele atravessava duas
   secoes como marca d'agua fantasma e competia com o grito em vez de
   sustenta-lo. Presenca de fundo so volta se for recorte proprio, contido
   numa secao so. */

.grito-cena { position: relative; }
.grito-cena > .grito { position: relative; z-index: 1; }

/* =========================================================================
   RODAPÉ
   ========================================================================= */
/* =========================================================================
   O RODAPE INSTITUCIONAL
   O anterior era duas colunas de link solto. Este tem quatro blocos, cada
   link se explica numa linha, e a marca assina a largura inteira no fim.
   ========================================================================= */
.rodape { padding: 0 0 clamp(30px, 3.4vw, 44px); }
.rodape .fio-prata { margin: 0; }
.rodape-grade {
  display: grid; gap: clamp(38px, 4.4vw, 64px);
  padding-top: clamp(62px, 7.4vw, 104px);
}
@media (min-width: 900px) {
  .rodape-grade { grid-template-columns: 1.35fr .95fr .95fr 1.05fr; gap: clamp(28px, 3.4vw, 56px); }
}
.rodape-marca .marca { margin-bottom: var(--e4); }
.rodape-lema {
  margin: 0; font-size: var(--t-lede); font-weight: 300;
  line-height: 1.34; letter-spacing: -.022em; color: var(--tinta);
}
.rodape-lugar {
  margin: var(--e3) 0 0; font-size: 13px;
  letter-spacing: .07em; color: var(--tinta-leve);
}

.rodape h4 {
  margin: 0 0 var(--e3); font-size: var(--t-selo); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--violeta-neon);
}
.rodape-col { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
/* cada link se explica numa linha — a mesma semantica do mega-menu */
.rodape-col a {
  display: block; font-size: 15.5px; font-weight: 500; color: var(--tinta);
  transition: color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.rodape-col a span {
  display: block; margin-top: 4px;
  font-size: 12.5px; font-weight: 400; color: var(--tinta-leve);
  transition: color var(--rapido) var(--curva);
}
.rodape-col a:hover { color: var(--violeta-neon); transform: translateX(3px); }
.rodape-col a:hover span { color: var(--tinta-meia); }

.rodape-email {
  font-size: var(--t-min) !important; font-weight: 400 !important;
  color: var(--tinta-meia) !important; word-break: break-word;
  border-bottom: 1px solid var(--fio-alto); padding-bottom: 3px;
}
.rodape-email:hover { color: var(--tinta) !important; border-bottom-color: var(--violeta-neon); }
.rodape-cta { color: var(--ouro) !important; font-weight: 500 !important; }

/* A ASSINATURA — a marca ocupando a largura inteira no fim. Prata, que e
   material; ouro seria evento, e a dobra ja gastou o dela. */
.rodape-assinatura {
  margin: clamp(56px, 6.4vw, 92px) 0 0; padding: 0;
  font-size: clamp(54px, 13.2vw, 196px); font-weight: 200;
  line-height: .82; letter-spacing: -.055em; text-align: center;
  background: var(--metal-prata);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .1; user-select: none; white-space: nowrap;
}

.rodape-base {
  margin-top: clamp(26px, 3vw, 40px); padding-top: var(--e3);
  border-top: 1px solid var(--fio);
  display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between;
  align-items: center; font-size: 13px; color: var(--tinta-leve);
}
.rodape-subir {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--tinta-leve); transition: color var(--rapido) var(--curva);
}
.rodape-subir:hover { color: var(--tinta); }
.rodape-subir svg { transition: transform var(--base) var(--curva); }
.rodape-subir:hover svg { transform: translateY(-3px); }

/* =========================================================================
   MOVIMENTO
   ========================================================================= */
.js .rv { opacity: 0; transform: translateY(26px); }
.rv.dentro {
  opacity: 1; transform: none;
  transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
}
/* entrada do hero: sobe sozinha no load, sem esperar scroll */
.sobe { opacity: 0; transform: translateY(30px); animation: sobe var(--lento) var(--curva) forwards; }
.sobe:nth-child(1) { animation-delay: .06s; }
.sobe:nth-child(2) { animation-delay: .16s; }
.sobe:nth-child(3) { animation-delay: .26s; }
.sobe:nth-child(4) { animation-delay: .36s; }
.sobe:nth-child(5) { animation-delay: .46s; }
@keyframes sobe { to { opacity: 1; transform: none; } }

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width: 1040px) {
  /* Tres cards em duas colunas SEMPRE deixam um orfao na terceira linha, e
     orfao le como layout quebrado. Entao: tres ou um, dois nunca. A coluna
     unica ganha teto de largura pra a foto 16:10 nao virar um paredao. */
  .grade-3 {
    grid-template-columns: 1fr;
    max-width: 620px; margin-left: auto; margin-right: auto;
  }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .rodape-topo { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 880px) {
  .menu, .nav-cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .confronto-linha, .confronto-cabecalho { grid-template-columns: 1fr; gap: 10px; }
  .confronto-linha .meio { display: none; }
  /* empilhado, o rotulo de coluna nao faz sentido: nao ha mais coluna */
  .confronto-cabecalho { display: none; }
  /* nada de linha riscada: a copy diz que resolveu UMA PARTE, nao que errou */
  .confronto-linha .nossa { padding-left: 15px; border-left: 2px solid var(--violeta-neon); }
}
@media (max-width: 660px) {
  .grade-3, .grade-2, .numeros { grid-template-columns: 1fr; gap: 16px; }
  .grade-3 { max-width: none; }
  .rodape-topo { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .card .letra { font-size: 84px; }
  .dado { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .sobe { opacity: 1 !important; transform: none !important; animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* arte que ainda nao chegou: some limpo, nao vira icone quebrado */
.sem-arte { display: none !important; }