/* ==========================================================================
   Landing, reconstrucao do layout capturado.
   Todos os valores saem de brand-tokens.json / typography.json / grid-system.
   ========================================================================== */

:root {
  --ink: #000000; --ink-900: #090909; --paper: #ffffff;
  --g50: #f8f8f8; --g100: #f6f6f6; --g150: #f4f5f5;
  --g200: #eaeaea; --g300: #c2c7c7; --g500: #798282; --g550: #858585; --g700: #56575b;
  --violet: #9b93f9; --violet-blue: #6d7cff; --violet-tint: #f0efff;
  --success: #34c759; --success-2: #009b3a; --danger: #ff2929; --whats: #25d366;
  --vex: #25d366; --maky: #f6a5c0; --fin: #5b8def; --opy: #3ed6b5; --pipo: #e8b27d; --juri: #9b93f9;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-pill: 360px;
  --max: 1440px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --d-fast: .18s; --d-mid: .35s; --d-slow: .7s;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--estreito { max-width: 900px; }
.centro { text-align: center; }

/* Escala do kit: h1 78/70.2/-3.12 · h2 54/48.6/-2.16 · h3 24/26.4 */
h1 {
  font-family: Fustat, Inter, sans-serif; font-weight: 600;
  font-size: clamp(42px, 7.6vw, 78px); line-height: .9; letter-spacing: -.04em;
}
h2 {
  font-family: Fustat, Inter, sans-serif; font-weight: 600;
  font-size: clamp(32px, 5vw, 54px); line-height: .9; letter-spacing: -.04em;
}
h3 { font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.lead { margin-top: 20px; font-size: 15px; line-height: 1.55; color: var(--g500); max-width: 52ch; }
.lead--centro { margin-inline: auto; text-align: center; }
.h2--centro { text-align: center; }
.small { font-size: 13px; color: var(--g500); }

/* ---------- Botoes: pilula preta solida, como no original ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 22px; border: 1px solid transparent;
  border-radius: var(--r-pill); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: transform var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease);
}
.btn--dark { background: var(--ink); color: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.btn--dark:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(0,0,0,.45); }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--g200); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--lg { min-height: 52px; padding: 15px 28px; font-size: 15px; }
.btn:active { transform: scale(.985); }

/* ---------- Navbar sticky com dropdown ---------- */
.navbar {
  position: sticky; top: 0; z-index: 60; height: 72px;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--d-mid) var(--ease);
}
.navbar.is-stuck { border-bottom-color: var(--g200); }
.navbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.marca { display: inline-flex; align-items: center; gap: 9px; font-family: Fustat, Inter, sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.04em; }
.navbar__nav { display: none; align-items: center; gap: 34px; font-size: 14px; }
.navbar__nav > a, .drop__btn {
  color: var(--ink); background: none; border: 0; padding: 8px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: opacity var(--d-fast) var(--ease);
}
.navbar__nav > a:hover, .drop__btn:hover { opacity: .55; }
.navbar__fim { display: flex; align-items: center; gap: 14px; }
/* O seletor de idioma.
   Era um `<span>` com `display:none`, existia no HTML, escondido no CSS, e nao
   selecionava nada. */
.idioma { position: relative; }
.idioma__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--g200); background: var(--paper);
  font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.idioma__btn:hover { border-color: var(--g300); background: var(--g50); }
.idioma__btn svg { transition: transform var(--d-fast) var(--ease); }
.idioma.is-open .idioma__btn svg { transform: rotate(180deg); }

/* Bandeira em SVG, e nao emoji: `🇧🇷` e um par de "regional indicator" que
   o WINDOWS nao sabe compor, ele desenha duas letras ou nada. Nao ha fonte
   para instalar; desenhar resolve em todo sistema. */
.bandeira {
  flex: none;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* `display:none` quando o atributo `hidden` esta presente.
   SEM ESTA LINHA o menu nunca fecha, e o motivo e sutil: `hidden` funciona por
   uma regra do navegador (`[hidden] { display: none }`), e QUALQUER `display`
   declarado aqui vence essa regra por especificidade. O JS marcava escondido, o
   CSS continuava mostrando.
   O menu de agentes ja tinha `.drop__menu[hidden]`; este nasceu sem, e foi o
   defeito que o dono relatou quatro vezes. */
.idioma__menu[hidden] { display: none; }

.idioma__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
  min-width: 172px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--paper); border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .4);
}
.idioma__menu button {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border: 0; border-radius: var(--r-md);
  background: none; font-size: 14px; color: var(--g700);
  text-align: left; cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.idioma__menu button:hover { background: var(--g50); color: var(--ink); }
/* O idioma atual fica em negrito e escuro. Sem marcar qual esta ativo, o menu
   nao informa nada, so oferece. */
.idioma__menu button.is-atual { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .idioma__btn { padding: 6px 8px; }
}

.drop { position: relative; }
.drop__btn svg { transition: transform var(--d-fast) var(--ease); }
.drop.is-open .drop__btn svg { transform: rotate(180deg); }
/* A PONTE sobre o vao.
   O menu abre 10px abaixo do botao, e esse vao era o defeito: ao descer o
   mouse ele saia do `.drop`, o `mouseleave` disparava, e o menu fechava antes
   de a pessoa chegar nele. Um pseudo-elemento invisivel cobre a faixa e mantem
   o ponteiro "dentro" durante a travessia. */
.drop::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px;
}
.drop:not(.is-open)::after { display: none; }

.drop__menu {
  position: absolute; top: calc(100% + 10px); left: -18px;
  display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 4px; padding: 18px; width: max-content;
  background: var(--paper); border: 1px solid var(--g200);
  border-radius: var(--r-xl); box-shadow: 0 24px 60px -20px rgba(0,0,0,.22);
  animation: drop-in .22s var(--ease);
}
.drop__menu[hidden] { display: none; }
.drop__menu a {
  display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center; padding: 9px 12px; border-radius: var(--r-md);
  transition: background var(--d-fast) var(--ease);
}
.drop__menu a:hover { background: var(--g100); }
.drop__menu i { grid-row: span 2; }
.drop__menu b { font-size: 15px; font-weight: 600; align-self: end; }
.drop__menu span { font-size: 13px; color: var(--g500); align-self: start; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }

/* ---------- Avatares: arquivos NOSSOS, em `assets/agentes/` ---------- */
.av {
  display: block; width: 46px; height: 46px; border-radius: 50%;
  background-size: cover; background-position: center top; flex: none;
}
.av--g { width: 96px; height: 96px; border-radius: var(--r-lg); }
/* Os retratos do time. Arquivos NOSSOS, em `assets/agentes/`, gerados de PNG
   para WebP por `web/app/scripts/otimizar-agentes.mjs`, 1,6 MB vira 2 KB, e
   a landing inteira deixa de custar 9 MB de avatar numa conexao movel. */
.av--vex  { background-color: var(--vex);  background-image: url(../agentes/vex.webp); }
.av--maky { background-color: var(--maky); background-image: url(../agentes/maky.webp); }
.av--fin  { background-color: var(--fin);  background-image: url(../agentes/fin.webp); }
.av--opy  { background-color: var(--opy);  background-image: url(../agentes/opy.webp); }
.av--pipo { background-color: var(--pipo); background-image: url(../agentes/pipo.webp); }
.av--juri { background-color: var(--juri); background-image: url(../agentes/juri.webp); }

/* ---------- Figuras: imagem do kit com fundo tonal de reserva ---------- */
.shot {
  border-radius: var(--r-2xl); background: var(--g100);
  background-size: cover; background-position: center top;
  border: 1px solid var(--g200); aspect-ratio: 16 / 11;
}

/* ---------- Secoes ---------- */
.sec { padding-block: 88px; }
.sec--tint { background: var(--g50); }
.sec__head { display: grid; gap: 24px; }
/* As setas ficam ABAIXO do texto, alinhadas a esquerda: e para la que o olho
   volta depois de ler, e e de la que o trilho comeca. No canto direito elas
   pediam um movimento de olho que nao levava a lugar nenhum. */
/* As setas ficam ABAIXO do texto, alinhadas a esquerda: e para la que o olho
   volta depois de ler, e e de la que o trilho comeca. */
.setas { display: flex; gap: 10px; margin-top: 22px; }

/* No celular, arrastar e o gesto natural e a seta vira redundancia, mas ela
   fica, porque nem todo mundo descobre que da para arrastar. O que muda e o
   tamanho: 44 px e o minimo para o dedo acertar sem tentar duas vezes. */
@media (max-width: 767px) {
  .seta { width: 44px; height: 44px; }
}
.seta {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--g200);
  background: var(--paper); color: var(--ink); font-size: 18px; cursor: pointer;
  transition: all var(--d-fast) var(--ease);
}
.seta:hover:not(:disabled) { border-color: var(--ink); }

/* Ponta do trilho: a seta apaga em vez de sumir. Sumir mexeria no layout a
   cada rolagem, e o botao restante pularia de lugar debaixo do cursor. */
.seta:disabled { opacity: .3; cursor: default; }
.seta--on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seta--on:hover { opacity: .85; }

/* ---------- Hero ---------- */
.hero { padding-block: 56px 8px; }
.hero__in { display: grid; gap: 48px; align-items: center; }
/* A assinatura da Nevoa. Uma classe so, usada nos TRES lugares (hero, seção da
   plataforma e rodape): a mesma marca escrita de tres jeitos diferentes na
   mesma pagina le como descuido, e assinatura de fornecedor e justamente o
   detalhe onde inconsistencia chama atencao. */
.hero__powered {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
  font-size: 12px; color: var(--g500); text-decoration: none;
}
.hero__powered:hover { color: var(--g700); }
.hero__powered img { width: 14px; height: 14px; object-fit: contain; opacity: .85; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 7px 15px; border: 1px solid var(--g200); border-radius: var(--r-pill);
  font-size: 13px; color: var(--g700); background: var(--paper);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--whats); }
.hero__btns { margin-top: 30px; }
.na-midia { margin-top: 52px; font-size: 13px; font-weight: 500; }
.midia { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 16px; align-items: center; }
.midia span {
  font-family: Fustat, Inter, sans-serif; font-size: 22px; font-weight: 600;
  color: var(--g300); letter-spacing: -.03em;
}

/* ---------- Carrossel de agentes ---------- */
/* `scroll-behavior` no CSS e nao so no JS: o teclado (Tab ate um card fora da
   vista) rola sozinho, e sem isto o salto e seco. */
.trilho {
  display: flex; gap: 20px; margin-top: 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  /* `scroll-behavior` no CSS e nao so no JS: o teclado (Tab ate um card fora
     da vista) rola sozinho, e sem isto o salto e seco. */
  scroll-behavior: smooth;

  /* O COMECO do trilho alinha com o `.wrap`; o fim sangra ate a borda.
     Sem isto o trilho ia de borda a borda enquanto o titulo parava no
     container: numa tela de 2000 px o primeiro card ficava cortado a esquerda
     e o texto aparecia 280 px para dentro.

     `max()` cobre as duas situacoes: tela menor que o container usa o gutter;
     tela maior usa a sobra dividida por dois.

     `100%` e nao `100vw`: `100vw` INCLUI a barra de rolagem, o container nao.
     Num monitor de 3440 px isso deixava o primeiro card 7 px a direita do
     titulo, pouco para chamar atencao e o bastante para a coluna parecer
     torta. `100%` aqui e a largura da secao, que ja exclui a barra. */
  padding-left: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
  padding-right: var(--gutter);
  /* O snap tem que parar ONDE o card comeca, e nao onde a caixa comeca, senao o primeiro card encosta na borda ao rolar de volta. */
  scroll-padding-left: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
}
.trilho::-webkit-scrollbar { display: none; }
.agente {
  /* No celular o card ocupa quase a largura toda, com uma fresta da proxima
     aparecendo: e a fresta que ensina que da para arrastar. Card de 300 px
     fixo numa tela de 360 deixaria 60 px de sobra, pouco para parecer
     proposital, muito para parecer erro. */
  flex: none; width: min(300px, 82vw); scroll-snap-align: start;
  padding: 16px 16px 26px; border: 1px solid var(--g200); border-radius: var(--r-2xl);
  background: var(--paper); transition: all var(--d-fast) var(--ease);
}
.agente:hover { border-color: var(--g300); box-shadow: 0 20px 46px -28px rgba(0,0,0,.35); transform: translateY(-2px); }
/* O retrato do agente no card, o MESMO do painel, para o time ser
   reconhecivel nos dois lugares. Quadrado e nao circulo: o card ja e
   retangular, e o circulo cortaria a lateral da cabeca.

   `object-fit: cover` com foco no topo: o enquadramento original tem o rosto
   na parte de cima, e centralizar cortaria a testa. */
.agente__figura {
  display: block; width: 100%; aspect-ratio: 1;
  object-fit: cover; object-position: center 20%;
  border-radius: var(--r-lg);
  background: var(--g100);
}
.agente--vex  .agente__figura { background: color-mix(in srgb, var(--vex)  22%, #fff); }
.agente--maky .agente__figura { background: color-mix(in srgb, var(--maky) 22%, #fff); }
.agente--opy  .agente__figura { background: color-mix(in srgb, var(--opy)  22%, #fff); }
.agente--fin  .agente__figura { background: color-mix(in srgb, var(--fin)  22%, #fff); }
.agente--juri .agente__figura { background: color-mix(in srgb, var(--juri) 22%, #fff); }
.agente--pipo .agente__figura { background: color-mix(in srgb, var(--pipo) 22%, #fff); }

.agente__ape { margin-top: 18px; font-size: 13px; color: var(--g500); }
.agente h3 { margin-top: 2px; }
.agente__desc { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--g500); }
.agente__lbl { margin-top: 24px; font-size: 13px; color: var(--g500); }
.ferramentas { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ferramentas a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--g200); border-radius: var(--r-pill);
  font-size: 13.5px; background: var(--paper);
  transition: all var(--d-fast) var(--ease);
}
.ferramentas a:hover { border-color: var(--ink); transform: translateX(2px); }

/* ---------- Duas colunas ---------- */
.duas { display: grid; gap: 44px; align-items: center; }
.duas--dep { margin-top: 48px; }
.checks { display: grid; gap: 18px; margin-top: 30px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 14px; color: var(--g700); }
.checks li::before {
  content: "✓"; display: grid; place-items: center; width: 20px; height: 20px;
  border: 1px solid var(--g300); border-radius: 50%; font-size: 11px; color: var(--ink);
}
.cita { font-family: Fustat, Inter, sans-serif; font-size: clamp(22px, 3vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
blockquote footer { margin-top: 22px; display: grid; gap: 2px; }
blockquote b { font-size: 15px; }
blockquote span { font-size: 13px; color: var(--g500); }

/* ---------- Números ---------- */
.numeros { display: grid; gap: 16px; margin-top: 48px; }
.num { padding: 24px; border: 1px solid var(--g200); border-radius: var(--r-lg); background: var(--paper); }
.num__lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; }
.num__lbl--verde { color: var(--success-2); }
.num__lbl--roxo { color: var(--violet-blue); }
.num__lbl--azul { color: var(--fin); }
.num__val { margin-top: 10px; font-family: Fustat, Inter, sans-serif; font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.num__val small { font-size: 15px; font-weight: 400; color: var(--g500); letter-spacing: 0; }
.num__txt { margin-top: 28px; font-size: 12.5px; line-height: 1.5; color: var(--g500); }
.fontes { margin-top: 22px; font-size: 12.5px; color: var(--g500); }
.fontes a { text-decoration: underline; }

/* ---------- Passos ---------- */
.passos { display: grid; gap: 20px; margin-top: 48px; }
.passo { padding-top: 22px; border-top: 2px solid var(--ink); }
.passo span { font-family: Fustat, Inter, sans-serif; font-size: 13px; font-weight: 600; }
.passo h3 { margin-top: 10px; font-size: 20px; }
.passo p { margin-top: 8px; font-size: 14px; color: var(--g500); line-height: 1.5; }

/* ---------- Faixa infinita ---------- */
.faixa { margin-top: 44px; padding-block: 18px; border-block: 1px solid var(--g200); overflow: hidden; }
.faixa__trilho { display: flex; gap: 40px; width: max-content; animation: correr 26s linear infinite; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
.faixa__trilho span { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--g700); white-space: nowrap; }
.faixa__trilho span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--g300); }
@keyframes correr { to { transform: translateX(calc(-100% - 40px)); } }

/* ---------- Planos ---------- */
.planos { display: grid; gap: 18px; margin-top: 48px; }
.plano { position: relative; padding: 30px; border: 1px solid var(--g200); border-radius: var(--r-2xl); background: var(--paper); transition: all var(--d-fast) var(--ease); }
.plano:hover { border-color: var(--g300); transform: translateY(-2px); }
.plano--destaque { border-color: var(--ink); box-shadow: 0 24px 60px -30px rgba(0,0,0,.4); }
.plano__tag { position: absolute; top: -12px; left: 30px; padding: 5px 13px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: 11.5px; font-weight: 500; }
.plano__preco { margin-top: 16px; font-family: Fustat, Inter, sans-serif; font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.plano__preco small { font-size: 15px; font-weight: 400; color: var(--g500); letter-spacing: 0; }
.plano__sub { margin-top: 8px; font-size: 14px; color: var(--g500); }
.features { display: grid; gap: 11px; margin-block: 26px; }
.features li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14px; color: var(--g700); }
.features li::before { content: "✓"; color: var(--success-2); font-size: 12px; }
.plano .btn { width: 100%; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; margin-top: 40px; }
.faq details { border: 1px solid var(--g200); border-radius: var(--r-xl); padding: 2px 22px; transition: border-color var(--d-fast) var(--ease); }
.faq details[open] { border-color: var(--g300); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 16px; font-weight: 500; }
.faq summary i { font-style: normal; font-size: 22px; color: var(--g500); transition: transform var(--d-mid) var(--ease); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq p { padding-bottom: 20px; font-size: 14.5px; line-height: 1.6; color: var(--g500); max-width: 62ch; }

/* ---------- CTA e rodapé ---------- */
.cta { background: var(--g50); }
.cta .btn { margin-top: 30px; }
.rodape { padding-block: 56px; border-top: 1px solid var(--g200); }
.rodape__in { display: grid; gap: 32px; }
.rodape .small { margin-top: 14px; max-width: 42ch; }
.rodape__nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 48px; font-size: 14px; color: var(--g700); }
.rodape__nav a:hover { color: var(--ink); }

/* ---------- Botão flutuante do WhatsApp ---------- */
/* O rosto do Vex, e nao mais um icone generico: quem clica sabe que vai falar
   com ALGUEM, e o alguem tem cara. O simbolo do WhatsApp fica num selo, que e o
   que diz por onde a conversa acontece. */
.whats {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: block; width: 56px; height: 56px;
  border-radius: 50%;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45);
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.whats:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .5);
}
.whats__rosto {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover;
  /* O verde do WhatsApp entra como ANEL, nao como fundo: o fundo taparia o
     rosto, que e o motivo de a foto estar ali. */
  border: 2px solid var(--whats);
  background: var(--whats);
}
.whats__selo {
  position: absolute; right: -2px; bottom: -2px;
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--whats); color: #fff;
  border: 2px solid var(--paper);
}

/* ---------- Reveal no scroll ---------- */
/* Degradacao segura: sem JS (ou com JS quebrado) o conteudo aparece.
   Esconder por CSS e revelar por JS deixa a pagina em branco quando o script
   falha, e pagina em branco e o pior defeito possivel numa landing. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--d-slow) var(--ease) var(--d, 0ms),
              transform var(--d-slow) var(--ease) var(--d, 0ms);
}

/* ==========================================================================
   Tablet 768, breakpoints do grid-system do kit
   ========================================================================== */
@media (min-width: 768px) {
  :root { --gutter: 40px; }
  .sec { padding-block: 110px; }
  .sec__head { grid-template-columns: 1fr auto; align-items: end; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .planos { grid-template-columns: repeat(3, 1fr); }
  .duas { grid-template-columns: 1fr 1fr; }
  .rodape__in { grid-template-columns: 1.4fr 1fr; }
  .rodape__nav { grid-template-columns: repeat(3, max-content); justify-content: end; }
  .lang { display: inline; }
}

/* ==========================================================================
   Desktop 1025
   ========================================================================== */
@media (min-width: 1025px) {
  :root { --gutter: 64px; }
  .navbar__nav { display: flex; }
  .hero { padding-block: 80px 0; }
  .hero__in { grid-template-columns: 1.02fr .98fr; gap: 64px; }
  .sec { padding-block: 128px; }
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .duas { gap: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Secoes que faltavam, conferidas contra checkpoint-050 a 100.
   ========================================================================== */

/* Titulo com a segunda linha esmaecida (secao de seguranca). */
.h2--fade { color: var(--ink); }
.h2--fade br + * , .h2--fade { }
.h2--fade { background: linear-gradient(180deg, #000 38%, #9aa2a2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Depoimento: play sobre a foto + assinatura com logo do cliente ---- */
.play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--ink); font-size: 15px;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.35); cursor: pointer;
  transition: transform var(--d-fast) var(--ease);
}
.cita__pe { display: flex; align-items: center; gap: 28px; margin-top: 22px; }
.cita__pe b { display: block; font-size: 14px; }
.cita__pe span { font-size: 13px; color: var(--g500); }
.cliente-logo { font-family: Fustat, Inter, sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }

/* ---- Seguranca: cartao unico, 3 colunas com divisor ---- */
.seg {
  display: grid; gap: 0; margin-top: 44px;
  background: #f0f4f6; border-radius: var(--r-2xl); overflow: hidden;
}
.seg__item { padding: 26px 28px; }
.seg__t { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; }
.seg__p { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--g700); }

/* ---- Powered by: texto a esquerda, painel escuro com numeros ---- */
.pw__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .07em; color: var(--violet-blue);
  margin-bottom: 18px; text-decoration: none;
}
.pw__eyebrow:hover { opacity: .78; }
.pw__logo { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; opacity: .92; }
/* O painel era um gradiente roxo com tres numeros. Virou a FOTO do time, e o
   pedido foi explicito: proporcao original, sem cortar nada.

   Por isso a imagem entra como bloco normal (`width:100%; height:auto`) e os
   numeros flutuam por cima em `position:absolute`. A alternativa, imagem de
   fundo com `object-fit:cover` numa caixa de altura fixa, cortaria alguem da
   foto em alguma largura de tela, e nao existe largura em que isso seja
   aceitavel numa foto de gente. Aqui a altura do painel PASSA A SER a da
   imagem, e o texto se acomoda a ela. */
.pw {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  color: #fff;
  /* `isolation` prende o `z-index` dos filhos a este bloco: sem isso o veu
     poderia subir por cima da secao seguinte em algum navegador. */
  isolation: isolate;
}
.pw__foto {
  display: block;
  width: 100%;
  height: auto;
  /* Nada de `object-fit` aqui de proposito: sem altura imposta, nao ha o que
     ajustar, a imagem chega inteira, sempre. */
}

/* O veu. A foto e escura em cima e clara embaixo (a bancada), e numero branco
   sobre bancada clara some. O gradiente escurece so a faixa de baixo, onde os
   numeros ficam, e deixa os rostos intactos. */
.pw::after {
  content: "";
  position: absolute; inset: 0;
  /* O texto foi para o MEIO da imagem, entao o veu foi junto. Radial e nao
     linear: escurece o miolo, onde os numeros ficam, e solta as bordas, os
     rostos e a bancada continuam legiveis, que e o motivo de a foto estar ali. */
  background:
    radial-gradient(
      ellipse 62% 58% at 50% 50%,
      rgba(8, 12, 10, .82) 0%,
      rgba(8, 12, 10, .66) 45%,
      rgba(8, 12, 10, .22) 74%,
      rgba(8, 12, 10, 0) 100%
    );
  pointer-events: none;
}
/* Centralizado no meio da imagem, nao encostado embaixo. */
.pw__grade {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-content: center; align-items: center;
  gap: clamp(10px, 2.4vw, 26px);
  padding: clamp(16px, 3vw, 34px);
  text-align: center;
}
.pw__num {
  /* Cada coluna entra depois da anterior. O atraso vem do `--i` no HTML: sem
     ele os tres aparecem juntos, e o olho nao acompanha tres coisas ao mesmo
     tempo, ve um bloco. */
  transition: transform 420ms var(--ease);
}
.pw__num:hover { transform: translateY(-4px); }
.pw.is-in .pw__num {
  animation: pw-sobe 620ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 130ms);
}
@keyframes pw-sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.pw__num b {
  display: block; font-family: Fustat, Inter, sans-serif;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 600; letter-spacing: -.04em;
  /* Verde, a pedido. `--success` e nao `--success-2`: o escuro seria bonito
     no branco e sumiria sobre uma foto escura. */
  color: var(--success);
  /* `tabular-nums` trava a largura do digito: sem isso a contagem faz a coluna
     inteira tremer a cada quadro. */
  font-variant-numeric: tabular-nums;
  /* Duas sombras: a curta cria contorno e separa o glifo do pixel da foto;
     a longa e o halo que segura a leitura quando o fundo clareia. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 4px 22px rgba(0, 0, 0, .7);
}
.pw__num span {
  display: block; margin-top: 8px;
  font-size: clamp(9.5px, 1.1vw, 11.5px);
  font-weight: 700; letter-spacing: .06em; line-height: 1.45;
  color: var(--success);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

/* ---- Planos: preco grande, botao ANTES da lista, features com +/x ---- */
.lead--peq { font-size: 13.5px; }
.planos { align-items: start; }
.plano { background: var(--g50); border-color: transparent; }
.plano--destaque { background: var(--paper); border: 1.5px solid var(--ink); }
.plano h3 { font-family: Fustat, Inter, sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.plano__sub { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--g500); min-height: 54px; }
.plano__apartir { margin-top: 22px; font-size: 13px; color: var(--g700); }
.plano__preco { margin-top: 18px; font-family: Fustat, Inter, sans-serif; font-size: 46px; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.plano__preco small { font-size: 14px; font-weight: 400; color: var(--g500); letter-spacing: 0; }
.btn--full { width: 100%; margin-top: 22px; }
.features { display: grid; gap: 14px; margin-top: 28px; }
.features li {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start;
  font-size: 13.5px; line-height: 1.35;
}
.features li::before { content: "✓"; font-size: 12px; color: var(--ink); }
.features li.off { color: var(--g300); }
.features li.off::before { content: "✕"; color: var(--g300); }
.features i {
  font-style: normal; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 11px;
}

/* ---- FAQ: titulo a esquerda, lista a direita, linha divisoria ---- */
.duas--faq { align-items: start; }
.duas--faq h2 { position: sticky; top: 100px; }
.faq { display: grid; gap: 0; margin-top: 0; }
.faq details { border: 0; border-bottom: 1px solid var(--g200); border-radius: 0; padding: 0; }
.faq summary { min-height: 58px; }
.faq summary h3 { font-size: 15.5px; font-weight: 500; }
.faq summary i::after {
  content: ""; display: block; width: 9px; height: 9px;
  border-right: 1.6px solid var(--g500); border-bottom: 1.6px solid var(--g500);
  transform: rotate(45deg) translateY(-2px); transition: transform var(--d-mid) var(--ease);
}
.faq details[open] summary i::after { transform: rotate(-135deg) translateY(-2px); }
.faq p { padding-bottom: 22px; font-size: 13px; }

/* ---- CTA: banner cinza com os personagens em volta ---- */
/* A imagem e o fundo (absoluto); o texto flutua sobre ela. */
.cta-banner {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* A MESMA proporcao da imagem (1983x793 = 2.5:1).
     Sem isto, `object-fit: cover` cortava as laterais para caber num container
     mais quadrado, e o vazio central da composicao deixava de coincidir com o
     centro do banner, jogando o texto para cima dos personagens da direita. */
  aspect-ratio: 2.5;
  min-height: 340px;
  position: relative; display: grid; grid-template-columns: 1fr; gap: 20px;
  place-items: center; padding: 64px 24px; min-height: 320px;
  border-radius: var(--r-2xl); background: var(--g100); text-align: center;
}
/* O texto ocupa o VAZIO da imagem, sobreposto, nao ao lado dela. A
   composicao ja foi feita com esse buraco no meio; qualquer coluna de grade
   aqui brigaria com ele. */
.cta-banner__mid {
  position: relative; z-index: 2;
  display: grid; gap: 26px; place-items: center;
  padding-block: 40px;
}

/* A imagem e o FUNDO da mesma celula de grade. `object-fit: cover` com foco no
   centro mantem os personagens das pontas visiveis em tela larga e corta a
   sobra em tela estreita. */
.cta-banner__time {
  /* Posicionamento ABSOLUTO, e nao celula de grade.
     A grade herdada e o reset `img { max-width: 100% }` disputavam o tamanho
     desta imagem: ela parava em 824 px num banner de 1312, ficava no miolo com
     faixa branca dos lados, e o vazio da composicao deixava de coincidir com o
     centro, o texto caia 200 px a esquerda, em cima dos personagens.

     `inset: 0` nao negocia com nenhum dos dois. */
  position: absolute; inset: 0;
  width: 100%; max-width: none; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: inherit;
}
/* A imagem e o FUNDO (absoluto); o texto flutua sobre ela.
   Absoluto e nao celula de grade porque a grade herdada e o reset global
   `img { max-width: 100% }` disputavam o tamanho: a imagem parava em 824 px
   num banner de 1312, ficava no miolo com faixa branca dos lados, e o vazio da
   composicao deixava de coincidir com o centro, o texto caia 200 px a
   esquerda, em cima dos personagens. `inset: 0` nao negocia com nenhum dos
   dois. */
.cta-banner {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* A MESMA proporcao da imagem (1983x793 = 2.5:1): so assim o vazio central
     da composicao cai no centro do banner. */
  aspect-ratio: 2.5;
  min-height: 340px;
}
.cta-banner__time {
  position: absolute; inset: 0;
  width: 100%; max-width: none; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: inherit;
}
.cta-banner h2 { font-size: clamp(30px, 4.6vw, 50px); }
.btn--branco { background: var(--paper); color: var(--ink); box-shadow: 0 2px 10px -2px rgba(0,0,0,.18); }

/* ---- Rodape: cartao branco com o wordmark gigante e halo colorido ---- */
.rodape {
  padding-block: 0 0; border: 0;
  /* Sem o rosa do fim (`#f7e6ef`): ele puxava a pagina para um registro
     que nao e o do produto, e era a ultima coisa que a pessoa via. */
  background: linear-gradient(180deg, #fff 0%, #f4f6f9 100%);
}
.rodape__cartao {
  margin-block: 64px; padding: 34px 34px 0;
  background: var(--paper); border-radius: var(--r-2xl); overflow: hidden;
}
.rodape__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 190px)); gap: 24px; }
.rodape__cols nav { display: grid; gap: 12px; align-content: start; font-size: 13.5px; color: var(--g500); }
.rodape__cols b { color: var(--ink); font-weight: 600; }
.rodape__cols a:hover { color: var(--ink); }
/* Centralizado: a marca em corpo grande e a ultima coisa que a pessoa ve, e
   encostada a esquerda ela puxa a pagina inteira para um lado. */
.rodape__marca {
  margin-top: 56px; font-family: Fustat, Inter, sans-serif; font-weight: 600;
  font-size: clamp(56px, 15vw, 190px); line-height: .82; letter-spacing: -.055em;
  transform: translateY(.1em);
  text-align: center;
}
.rodape__powered {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; padding-bottom: 24px;
  font-size: 12px; color: var(--g500); text-decoration: none;
}
.rodape__powered:hover { color: var(--g700); }
.rodape__powered img { width: 14px; height: 14px; object-fit: contain; opacity: .85; }

@media (min-width: 768px) {
  .seg { grid-template-columns: repeat(3, 1fr); }
  .seg__item + .seg__item { border-left: 1px solid rgba(0,0,0,.08); }
  .duas--pw { grid-template-columns: .9fr 1.1fr; }
  .duas--faq { grid-template-columns: .8fr 1.2fr; gap: 56px; }
  .cta-banner { padding-inline: 44px; }
}

/* ==========================================================================
   O robo do hero
   ========================================================================== */

/* O robo do hero.
   
   Ele entra uma vez e para. NAO fica respirando: movimento continuo no elemento
   mais visivel da pagina puxa o olho a cada ciclo, disputa com o titulo, que e
   o que a pessoa veio ler, e, depois do terceiro ciclo, le como enfeite. O que
   sustenta preco alto e o que fica PARADO com confianca; o que se mexe sozinho
   pede atencao, e pedir atencao e o oposto de ter. */
.heroi {
  display: grid; place-items: center;
  min-height: 320px;
  animation: heroi-entra 900ms var(--ease) both;
  /* `perspective` no pai, e nao no filho: e o que da profundidade real a
     inclinacao do hover em vez de um escalonamento chapado. */
  perspective: 1200px;
}

.heroi img {
  /* `height: auto` com `width`/`height` no HTML: o navegador reserva o espaco
     na proporcao certa (4:5) antes de a imagem chegar, e o texto ao lado nao
     salta quando ela carrega. */
  width: 100%; height: auto; max-width: 460px;
  /* A foto tem fundo proprio e bordas retas, sem raio, ela destoa num layout
     onde tudo mais e arredondado. `object-fit` nao entra: a proporcao ja bate
     com a do arquivo (3:4) e qualquer ajuste aqui recortaria. */
  border-radius: var(--r-2xl);
  /* A sombra ancora a figura no fundo. Sem ela a foto parece colada. */
  box-shadow: 0 32px 60px -28px rgba(0, 0, 0, .28);
  /* Curva longa e desacelerada: 620ms de saida e o que separa "reagiu" de
     "animou". Transicao rapida em imagem grande parece nervosa. */
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    filter 620ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

/* O hover mora no PAI: a area de reacao inclui a folga em volta da figura, e
   nao so os pixels dela. Assim o movimento comeca quando o cursor se aproxima,
   nao quando ele acerta a imagem. */
.heroi:hover img {
  /* Tres graus e uma escala de 2%: o suficiente para a luz mudar e a figura
     parecer solida. Mais que isso vira brinquedo. */
  transform: rotateY(-4deg) rotateX(1.5deg) scale(1.02) translateY(-6px);
  box-shadow: 0 46px 80px -30px rgba(0, 0, 0, .36);
}

@keyframes heroi-entra {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .heroi { animation: none; }
  .heroi img, .heroi:hover img { transition: none; transform: none; }
}

/* Sem hover, celular e tablet, nao ha estado intermediario para mostrar, e
   `:hover` grudaria depois do toque. */
@media (hover: none) {
  .heroi:hover img { transform: none; box-shadow: 0 32px 60px -28px rgba(0,0,0,.28); }
}

/* No celular o robo vem DEPOIS do texto e menor: a primeira tela pertence ao
   titulo e ao botao, nao a ilustracao. */
@media (max-width: 767px) {
  .heroi { min-height: 0; margin-top: 8px; }
  .heroi img { max-width: 280px; }
}

/* ==========================================================================
   O botao do banner de CTA
   ========================================================================== */

/* Ele fica sobre a imagem, entao precisa de peso proprio: sombra que o
   descola do fundo e cresce no hover, em vez de so mudar de cor. Botao chapado
   sobre foto some. */
.cta-banner .btn--branco {
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35);
  transition:
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease),
    background-color 260ms var(--ease);
}
.cta-banner .btn--branco:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .42);
}
/* O clique afunda: sem isto o botao sobe no hover e nao volta ao ser
   pressionado, e o toque parece nao ter sido registrado. */
.cta-banner .btn--branco:active { transform: translateY(0); }

/* Em tela estreita a imagem e larga demais (2.5:1) e os personagens sairiam
   minusculos. Ela cresce alem da largura do banner e mostra o miolo, os
   das pontas saem, e esta certo: o texto e o que importa aqui. */
@media (max-width: 767px) {
  .cta-banner { min-height: 420px; }
  .cta-banner__time { width: 200%; max-width: none; }
  .cta-banner__mid { padding-block: 28px; }
}

/* O banner nao tem hover na imagem de proposito: quem interage aqui e o
   BOTAO, e dois alvos animados na mesma area disputam o clique. */

/* ==========================================================================
   Os numeros de mercado
   ========================================================================== */

/* O cartao reage ao cursor. Sem isso a secao inteira le como imagem estatica, quatro blocos de texto que o olho pula. */
.num {
  transition:
    transform var(--d-mid) var(--ease),
    box-shadow var(--d-mid) var(--ease),
    border-color var(--d-mid) var(--ease);
}
.num:hover {
  transform: translateY(-4px);
  border-color: var(--g300);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .3);
}

/* O valor cresce um pouco junto: o hover no cartao chama atencao para o
   NUMERO, que e o argumento, e nao para a moldura. */
.num__val {
  display: inline-block;
  transition: transform var(--d-mid) var(--ease);
  /* `tabular-nums` trava a largura de cada digito. Sem isso o numero "pula"
     de largura a cada quadro da contagem, e o cartao inteiro treme. */
  font-variant-numeric: tabular-nums;
}
.num:hover .num__val { transform: scale(1.04); }

/* Enquanto a contagem nao comecou, o valor fica invisivel mas OCUPA o espaco:
   `opacity` e nao `display`, senao o cartao encolhe e cresce, e o layout
   inteiro salta quando a secao entra. */
.js [data-ate]:not(.contou) { opacity: 0; }
[data-ate].contou { animation: num-chega .5s var(--ease) both; }

@keyframes num-chega {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .num, .num__val { transition: none; }
  .js [data-ate] { opacity: 1; }
  [data-ate].contou { animation: none; }
}

/* Em tela estreita.
   
   A tentativa anterior empilhava os tres numeros em UMA coluna e escurecia a
   foto quase por inteiro para segura-los. Deu nos dois defeitos que o dono
   apontou: a foto virou uma mancha preta, sumiram os rostos, que sao o motivo
   de ela estar ali, e o terceiro rotulo ("PRIORIDADE: SEU DADO") caiu fora da
   imagem, cortado no meio da palavra. Empilhado nao cabe: a foto tem 1,74:1 e
   sobram ~206 px de altura num aparelho de 390 px.
   
   As tres colunas do desktop CABEM, 119 px cada, desde que o corpo do texto
   desca junto. A composicao continua sendo a mesma em todo aparelho, e o veu
   volta a ser o discreto, que e o que deixa a foto legivel. */
@media (max-width: 620px) {
  .pw__grade { gap: 6px; padding: 10px 8px; }
  .pw__num b { font-size: 19px; }
  .pw__num span { margin-top: 3px; font-size: 9.5px; letter-spacing: .04em; line-height: 1.3; }
}

/* Aviso de idioma ainda sem traducao. Some sozinho. */
.idioma__aviso {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
  width: max-content; max-width: 260px;
  padding: 9px 12px; border-radius: var(--r-md);
  background: var(--ink); color: var(--paper);
  font-size: 12.5px; line-height: 1.45;
  animation: idioma-entra .28s var(--ease) both;
}
@keyframes idioma-entra {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   O retrato do fundador, e a foto da mentoria
   ========================================================================== */

/* Proporcao ORIGINAL, sem recorte: a foto e vertical (3:4) e forcar 16/11 nela
   cortaria cabeca ou pes. `height: auto` deixa a altura sair da largura. */
.retrato {
  margin: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 26px 54px -30px rgba(0, 0, 0, .34);
  align-self: center;
}
.retrato img {
  display: block;
  width: 100%;
  height: auto;
}

/* A citacao ganha um paragrafo de apoio: a frase de efeito sozinha nao explica
   o produto, e o texto corrido sozinho nao para o olho. */
.cita__apoio {
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--g700);
}

/* A mentoria: imagem a esquerda, centrada na propria coluna. */
.mentoria-foto {
  margin: 0;
  align-self: center;
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.mentoria-foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* Coluna do depoimento centrada verticalmente ao lado do retrato. */
.duas--dep { align-items: center; }

/* O botao da mentoria vinha colado na foto: a imagem termina numa borda
   arredondada e o botao encostava nela, sem respiro nenhum. O texto da direita
   acaba bem acima, entao o espaco precisa vir do bloco inteiro, nao da
   coluna. */
.centro--apos-figura { margin-top: 56px; }

@media (max-width: 899px) {
  /* No celular as duas colunas viram uma so, e a foto fica logo acima do
     botao: ali o respiro precisa ser maior ainda. */
  .centro--apos-figura { margin-top: 40px; }
}

/* ==========================================================================
   O mockup do painel no hero
   ========================================================================== */

/* A tela nao termina: ela desvanece.
   
   Um print com corte reto no meio da pagina le como "imagem colada aqui". Com
   a borda direita e a inferior dissolvendo no fundo, a mesma imagem le como
   "isto e uma tela de verdade, e ela continua para fora da pagina", e o olho
   para no que importa, a barra lateral com os seis agentes, em vez de correr
   para a moldura.
   
   A mascara e a INTERSECAO de dois gradientes: um horizontal, que apaga o
   conteudo a direita, e um vertical, que apaga o rodape. `intersect` faz o
   pixel sobreviver so onde os DOIS sao opacos; sem ele, o segundo gradiente
   substitui o primeiro e um dos lados nao desvanece. */
.heroi--painel img {
  max-width: 520px;
  /* Raio so nos cantos que continuam visiveis. Os da direita ficam dentro da
     area ja transparente, e um raio ali nao aparece. */
  border-radius: var(--r-2xl);
  /* A sombra sai daqui: `mask` recorta pelo `border-box`, e box-shadow e
     pintada FORA dele, ela seria apagada inteira. Quem faz o papel dela e o
     `drop-shadow` do pai (ver abaixo). */
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(to right, #000 26%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 26%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
}

/* A sombra mora no PAI, e nao na imagem, por causa da ordem de renderizacao:
   `filter` e aplicado ANTES de `mask` no mesmo elemento, entao um
   `drop-shadow` na propria imagem seria calculado sobre o retangulo inteiro e
   depois recortado pela mascara. No pai ele recebe a imagem JA mascarada, e a
   sombra segue o contorno que desvanece em vez de desenhar uma aresta reta
   onde nao ha mais imagem. */
.heroi--painel {
  filter:
    drop-shadow(0 26px 38px rgba(16, 24, 40, .16))
    drop-shadow(0 4px 10px rgba(16, 24, 40, .06));
}

/* Sem a inclinacao no hover: com a borda dissolvida nao ha aresta para a luz
   correr, e girar a figura so faz a mascara escorregar em relacao ao conteudo.
   O que sobra e uma aproximacao curta, que reage sem chamar atencao. */
.heroi--painel:hover img {
  transform: translateY(-6px) scale(1.012);
  box-shadow: none;
}

@media (max-width: 767px) {
  /* A versao anterior tirava a mascara da DIREITA no celular, com medo de ela
     comer a barra lateral. O resultado foi o defeito que o dono apontou: no
     aparelho a imagem terminava numa aresta reta, e o efeito de "a tela
     continua para fora da pagina", que e o motivo de tudo isto existir, so
     acontecia no desktop.
     
     Ela volta. O que muda e onde comeca: a caixa e menor, entao o inicio do
     desvanecimento fica um pouco mais a direita para a lateral continuar
     inteira e legivel. */
  .heroi--painel img {
    max-width: 330px;
    -webkit-mask-image:
      linear-gradient(to right, #000 34%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, #000 34%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;
  }
}

/* ==========================================================================
   Secao de seguranca: a animacao que faz a promessa parecer verdadeira
   ==========================================================================

   Texto de seguranca e o mais barato de escrever e o mais caro de acreditar.
   Qualquer um digita "criptografia de nivel bancario". O que muda a leitura e
   o gesto: o escudo sendo DESENHADO, o cadeado FECHANDO, o olho sendo RISCADO.
   A animacao aqui nao decora, ela encena o que a frase afirma.

   Tudo roda UMA vez, ao entrar na tela, e para. Movimento continuo numa secao
   de seguranca le como alerta piscando, que e o oposto de "esta sob controle".

   Regra de custo: so `transform`, `opacity` e `stroke-dashoffset` sao animados
   - as tres propriedades que o compositor resolve sem recalcular layout. Nada
   aqui anima largura, altura ou posicao. */

/* ---- O titulo, palavra por palavra ---- */

/* O gradiente mora em cada LINHA, e nao no `h2` inteiro, porque as palavras
   sao animadas com `transform`, e um descendente transformado dentro de um
   ancestral com `background-clip: text` pinta em ordem separada, com o
   recorte calculado na posicao errada. Como o gradiente e VERTICAL e todas as
   palavras de uma linha ocupam a mesma faixa de altura, dividir por linha da
   exatamente a mesma imagem que o gradiente unico dava. Os valores abaixo sao
   as cores que o gradiente original (#000 38% ate #9aa2a2 100%) tinha na
   altura de cada linha. */
/* O RECORTE MORA SO NA PALAVRA. Nunca nos dois.
   
   A versao anterior deixava `background-clip: text` na LINHA e tambem na
   palavra. Os dois recortes existem ao mesmo tempo, em geometrias diferentes:
   a linha recorta os glifos onde o layout os poe, a palavra recorta onde o
   `transform` os levou. Durante a animacao o texto aparecia DUAS vezes, uma
   pilha ilegivel a esquerda, encostada, e a frase certa no lugar dela.
   
   Por isso o gradiente vem por variavel: a linha so o DECLARA, sem pintar
   nada, e quem tem fundo (e recorte) e a palavra. Sem JavaScript nao ha
   palavra nenhuma, entao a linha continua sendo texto preto comum, nunca um
   titulo invisivel. */
.seg-h2__l { display: block; }
.seg-h2__l--1 { --grad: linear-gradient(180deg, #000 76%, #1e1f1f 100%); }
.seg-h2__l--2 { --grad: linear-gradient(180deg, #1e1f1f 0%, #9aa2a2 100%); }
.seg-h2 .pal {
  background-image: var(--grad);
  color: transparent;
}

/* Cada palavra herda o gradiente da propria linha. Como o gradiente e vertical
   e a palavra tem a mesma altura e o mesmo topo da linha, a imagem resultante
   e identica, a divisao e invisivel, e so existe para dar o que animar. */
.pal-h2 .pal {
  display: inline-block;
  /* O recorte fica aqui e SO aqui, ver o comentario do titulo da seguranca.
     Em titulo sem gradiente (`--grad` ausente) nao ha fundo para recortar e a
     regra nao faz nada. */
  -webkit-background-clip: text;
  background-clip: text;
  /* `will-change` so nas palavras, e nao no bloco: promover o container
     inteiro a camada custa memoria de GPU proporcional a area dele. */
  will-change: transform, opacity, filter;
}
.js .pal-h2 .pal {
  opacity: 0;
  transform: translateY(.42em) rotateX(-58deg);
  filter: blur(7px);
}
/* `perspective` no bloco: sem ela `rotateX` vira um achatamento chapado, e o
   efeito de a palavra virar para frente desaparece. */
.js .pal-h2 { perspective: 620px; }
.js .pal-h2.is-in .pal {
  opacity: 1;
  transform: none;
  filter: blur(0);
  /* 46 ms entre palavras: rapido o bastante para a frase ser lida como frase,
     nao como palavras soltas chegando uma a uma. */
  transition:
    opacity 620ms var(--ease) calc(var(--p) * 46ms),
    transform 780ms cubic-bezier(.16, 1, .3, 1) calc(var(--p) * 46ms),
    filter 620ms var(--ease) calc(var(--p) * 46ms);
}

/* ---- A aura atras dos cartoes ---- */

.seg-bloco { position: relative; isolation: isolate; }
/* Um halo frio que respira UMA vez quando o bloco entra. Ele fica atras dos
   cartoes e nao recebe evento de ponteiro. */
.seg-bloco::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    60% 60% at 50% 50%,
    rgba(0, 158, 92, .13) 0%,
    rgba(0, 158, 92, .05) 45%,
    transparent 72%
  );
  opacity: 0;
  filter: blur(28px);
  transform: scale(.86);
  pointer-events: none;
}
.seg-bloco:has(.is-in)::before {
  animation: seg-aura 2200ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes seg-aura {
  0%   { opacity: 0;   transform: scale(.86); }
  46%  { opacity: 1;   transform: scale(1.04); }
  100% { opacity: .55; transform: scale(1); }
}

/* ---- O bloco e a varredura ---- */

.seg { position: relative; }

/* Uma faixa de luz atravessa o bloco uma vez, da esquerda para a direita, logo
   depois de ele aparecer. E o gesto de conferido: passou, checou, acabou. */
.seg__varre {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255, 255, 255, .78) 50%,
    transparent 58%
  );
  transform: translateX(-105%);
  opacity: 0;
}
.seg.is-in .seg__varre { animation: seg-varre 1500ms cubic-bezier(.4, 0, .2, 1) 620ms both; }
@keyframes seg-varre {
  0%   { transform: translateX(-105%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(105%); opacity: 0; }
}

/* ---- Os tres cartoes, em cascata ---- */

.seg__item {
  position: relative;
  z-index: 1;
  transition:
    transform 460ms cubic-bezier(.16, 1, .3, 1),
    background-color 320ms var(--ease);
}
.js .seg__item {
  opacity: 0;
  transform: translateY(24px) scale(.965);
}
.js .seg.is-in .seg__item {
  opacity: 1;
  transform: none;
  /* 120 ms entre cartoes. A cascata da a leitura de um, dois, tres; os tres
     juntos leem como um bloco so, e o olho nao percorre. */
  transition:
    opacity 560ms var(--ease) calc(var(--i) * 120ms),
    transform 720ms cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 120ms);
}
.seg__item:hover { background-color: rgba(255, 255, 255, .55); }

/* ---- Os icones: o gesto que encena a frase ---- */

.seg__ico { flex: none; overflow: visible; }

/* `pathLength="1"` no SVG normaliza o comprimento de qualquer traco para 1, sem isso, cada icone precisaria de um `dasharray` medido a mao, e mudar o
   desenho quebraria a animacao em silencio. */
.js .seg__traco {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .seg.is-in .seg__traco {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms cubic-bezier(.65, 0, .35, 1)
    calc(var(--i) * 120ms + 340ms);
}
/* O segundo traco (o certo dentro do escudo, a barra sobre o olho) so entra
   depois que o primeiro terminou: o desenho tem ordem, e ela e o sentido. */
.js .seg.is-in .seg__traco--tardio {
  transition-duration: 520ms;
  transition-delay: calc(var(--i) * 120ms + 1080ms);
}

/* O cadeado FECHA: o arco desce para dentro do corpo. `transform-origin` no
   topo para ele girar como uma tampa, e nao escorregar. */
.js .seg__arco {
  transform: translateY(-3.4px) scaleY(1.34);
  transform-origin: 12px 4px;
  opacity: .35;
}
.js .seg.is-in .seg__arco {
  transform: none;
  opacity: 1;
  transition:
    transform 760ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 120ms + 480ms),
    opacity 380ms var(--ease) calc(var(--i) * 120ms + 480ms);
}

/* No hover o icone reage sozinho, sem mexer no texto ao lado. */
.seg__ico { transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1); }
.seg__item:hover .seg__ico { transform: scale(1.22) rotate(-8deg); }

/* Uma linha viva na divisoria do cartao sob o cursor. Ela cresce do meio para
   fora, o que le como este aqui, e nao como borda ligando. */
.seg__item::after {
  content: "";
  position: absolute;
  left: 28px; right: 28px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ok, #009e5c), transparent);
  transform: scaleX(0);
  transition: transform 480ms cubic-bezier(.16, 1, .3, 1);
}
.seg__item:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  /* A regra global ja desliga `animation` e `transition`. O que falta e o
     ESTADO INICIAL: sem transicao para tira-lo, ele congelaria a secao
     invisivel, palavra com opacidade 0, traco com o dash inteiro deslocado. */
  .js .pal-h2 .pal,
  .js .seg__item { opacity: 1; transform: none; filter: none; }
  .js .seg__traco { stroke-dashoffset: 0; }
  .js .seg__arco { transform: none; opacity: 1; }
  .seg__varre, .seg-bloco::before { display: none; }
}

/* ==========================================================================
   Celular: o banner final, e as folgas que faltavam
   ==========================================================================

   O `<source media="(max-width: 767px)">` do banner apontava para
   `time-cta-mobile.webp`, que NAO EXISTIA no repositorio. No desktop nada
   aparecia de errado, porque aquele `source` nunca era escolhido; no celular
   a imagem falhava em silencio e o banner ficava cinza liso. E o tipo de
   defeito que so aparece no aparelho de quem vai comprar.

   A versao vertical tem um vazio no meio da composicao, as duas fileiras de
   personagens ficam em cima e embaixo, e a faixa central e branca. E o mesmo
   desenho da horizontal, girado: o titulo e o botao moram nesse vazio. */
@media (max-width: 767px) {
  .cta-banner {
    /* A proporcao EXATA do arquivo vertical (1024x1536). Qualquer outra faz o
       `object-fit: cover` recortar, e o vazio central deixa de coincidir com o
       centro do banner, o texto cai em cima dos personagens. */
    aspect-ratio: 1024 / 1536;
    min-height: 0;
    padding: 24px 18px;
  }
  .cta-banner__time {
    /* Sem o `width: 200%` da versao horizontal: aqui a imagem JA e vertical e
       esticar so cortaria os personagens das pontas. */
    width: 100%;
  }
  .cta-banner__mid { padding-block: 0; gap: 18px; }
  /* O texto tem que caber na faixa branca do meio (27% da altura). Com a
     escala do desktop ele invadiria as duas fileiras de personagens. */
  .cta-banner h2 { font-size: clamp(24px, 7.2vw, 32px); line-height: 1.14; }
}

/* ==========================================================================
   Celular: alvos de toque, e o que ainda encostava na borda
   ========================================================================== */

/* Alvo de toque minimo de 44 px em tudo que se clica. Abaixo disso o dedo
   erra, e quem erra duas vezes fecha a pagina. Vale para os controles
   pequenos, o resto ja passa pelo proprio tamanho. */
@media (pointer: coarse) {
  .seta,
  .idioma__btn,
  .drop__btn { min-height: 44px; min-width: 44px; }
  .idioma__menu button { min-height: 44px; }
  .rodape__cols a { padding-block: 6px; }
  /* Sem hover no toque: o estado :hover GRUDA depois do tap e o cartao fica
     iluminado ate a pessoa tocar em outro lugar. */
  .seg__item:hover { background-color: transparent; }
  .seg__item:hover::after { transform: scaleX(0); }
  .seg__item:hover .seg__ico { transform: none; }
}

/* Nenhuma seccao pode empurrar a pagina para os lados. Uma unica linha larga
   demais faz o corpo inteiro rolar na horizontal, e o efeito no celular e a
   pagina "escorregando" a cada toque, o defeito de mobile mais comum e o
   mais dificil de achar depois, porque o culpado pode estar em qualquer
   secao. Aqui a regra e do container, entao vale para todas de uma vez. */
html, body { overflow-x: clip; }

@media (max-width: 767px) {
  /* O titulo da seguranca em duas linhas fixas estourava a largura: "Seguranca
     de nivel corporativo" nao cabe em 360 px. Deixar quebrar sozinho. */
  .seg-h2__l { display: block; text-wrap: balance; }
  .seg__item { padding: 22px 20px; }
  .seg__item::after { left: 20px; right: 20px; }
}

/* ==========================================================================
   Celular: os alvos que o dedo errava, medidos por `scripts/mobile-audit.mjs`
   ==========================================================================

   Todos os numeros abaixo vieram do auditor rodando em iPhone SE (375 px) e
   Pixel 7, nao de estimativa. A regra e 44x44 px de area tocavel, e o piso
   que a Apple e o Google publicam, e abaixo dele o erro de toque deixa de ser
   ocasional.

   O aumento acontece so em `(pointer: coarse)`: no desktop o mouse acerta um
   alvo de 28 px sem esforco, e engordar tudo la esticaria o layout inteiro
   por um problema que nao existe naquele aparelho. */
@media (pointer: coarse) {
  /* A marca da navbar tinha 28 px de altura. `padding-block` resolve sem
     mexer no tamanho da letra nem empurrar a barra. */
  .marca { padding-block: 8px; }

  /* Assinatura "powered by Nevoa AI": 17 px, o menor alvo da pagina. */
  .hero__powered { padding-block: 13px; }
  /* O `margin` compensa o `padding` novo, senao a folga abaixo dobra e o
     titulo do hero desce 13 px. */
  .hero__powered { margin-bottom: 0; }

  /* Pilulas de ferramenta nos cartoes de agente, itens do menu suspenso e
     links do rodape: todos entre 33 e 38 px. */
  .ferramentas a { padding-block: 12px; }
  .drop__menu a { padding-block: 14px; }
  .rodape__cols nav { gap: 4px; }
  .rodape__cols a { display: block; padding-block: 12px; }
}

/* O rotulo dos numeros do painel escuro caia para 9,5 px em tela estreita, `clamp()` com piso baixo demais. Em 1,1vw, so passa de 9,5 px acima de
   864 px de largura; ou seja, TODO celular via o piso. O piso vira 11 px, que
   e o menor corpo legivel para palavra em caixa alta. */
.pw__num span { font-size: clamp(11px, 1.4vw, 11.5px); }

/* ==========================================================================
   O defeito que estragava a landing inteira no celular
   ==========================================================================

   A `.navbar` tem `height: 72px` fixa. Em 390 px de largura a linha nao cabia
   - marca + seletor de idioma + botao, e o texto do botao QUEBRAVA em duas
   linhas. A pilula crescia para ~140 px de altura, estourava a barra de 72 px
   (que nao tem `overflow`) e passava a flutuar por cima do conteudo: o titulo
   da secao de seguranca, o das perguntas, o do plano. Em toda rolagem.

   Foi um unico `white-space` faltando destruindo quatro secoes. */
.btn { white-space: nowrap; }

@media (max-width: 767px) {
  /* A barra fica menor E o conteudo dela encolhe junto, para caber com folga
     em 390 px sem depender de sorte de fonte. */
  .navbar, .navbar__in { height: 60px; }
  .navbar__in { gap: 10px; }
  .marca { font-size: 16.5px; gap: 7px; }
  .marca svg { width: 22px; height: 22px; }
  /* So a bandeira: ela JA diz o idioma, e as duas letras ao lado custavam os
     px que faltavam para o botao caber sem quebrar. */
  .idioma__btn { padding: 8px 9px; gap: 5px; font-size: 0; }
  .idioma__btn svg:last-child { width: 10px; height: 10px; }
  .navbar__fim .btn { padding: 10px 16px; font-size: 13.5px; min-height: 40px; }
  /* A marca cresce dentro da barra de 60 px, e nao para fora dela: 23 px de
     altura mais 22 de folga dao 45, e ainda sobram 15 px de respiro. Zerar o
     `padding` aqui, como estava, devolvia o alvo de 23 px que o auditor
     acusou. */
  .marca { padding-block: 11px; }
}

/* O titulo das perguntas gruda no topo enquanto a lista rola, desenho de DUAS
   COLUNAS. Em coluna unica ele nao tem para onde grudar que nao seja em cima
   das proprias perguntas, e era exatamente isso que acontecia: o titulo
   atravessando os itens da FAQ durante a rolagem. */
.duas--faq h2 { position: static; }
@media (min-width: 768px) {
  .duas--faq h2 { position: sticky; top: 100px; }
}

/* ==========================================================================
   Os quatro numeros: a secao onde o argumento mora
   ==========================================================================

   Sao dados de terceiro citados com fonte. O que a animacao faz e o que um bom
   apresentador faria: mostrar UM de cada vez, deixar o numero chegar sozinho e
   so entao entregar a explicacao. Os quatro juntos leem como uma tabela, e
   ninguem se convence com tabela. */

.numeros { perspective: 1400px; }

.num {
  position: relative;
  overflow: hidden;
  transition:
    transform 520ms cubic-bezier(.16, 1, .3, 1),
    border-color 320ms var(--ease),
    box-shadow 520ms var(--ease);
}

/* O cartao chega tombado para tras e se endireita. `rotateX` com `perspective`
   no pai da a sensacao de um objeto virando para frente; sem a perspectiva
   viraria um achatamento chapado. */
.js .numeros .num {
  opacity: 0;
  transform: translateY(30px) rotateX(-14deg) scale(.94);
}
.js .numeros.is-in .num {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms var(--ease) calc(var(--i) * 130ms),
    transform 860ms cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 130ms);
}

/* Uma barra da cor do rotulo desenha no topo do cartao, da esquerda para a
   direita, depois que ele assenta. E o que amarra o rotulo colorido ao cartao
   - sem ela a cor e um detalhe solto no canto. */
.num::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: currentColor;
  color: var(--g300);
  transform: scaleX(0);
  transform-origin: left;
}
.js .numeros.is-in .num::before {
  transform: scaleX(1);
  transition: transform 760ms cubic-bezier(.16, 1, .3, 1)
    calc(var(--i) * 130ms + 420ms);
}
/* A barra herda a cor do proprio rotulo, e nao uma cor fixa: trocar o rotulo
   de cor no HTML leva a barra junto, sem ninguem lembrar de vir aqui. */
.num:has(.num__lbl--verde)::before { color: var(--success-2); }
.num:has(.num__lbl--roxo)::before  { color: var(--violet-blue); }
.num:has(.num__lbl--azul)::before  { color: var(--fin); }

/* O rotulo desliza da esquerda; o texto de apoio sobe por ultimo. A ordem
   importa: rotulo (do que estamos falando), numero (quanto), explicacao (por
   que). Animar tudo junto entrega a explicacao antes de a pessoa saber o que
   ela explica. */
.js .num__lbl { opacity: 0; transform: translateX(-10px); }
.js .numeros.is-in .num__lbl {
  opacity: 1;
  transform: none;
  transition:
    opacity 480ms var(--ease) calc(var(--i) * 130ms + 200ms),
    transform 640ms cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 130ms + 200ms);
}
.js .num__txt { opacity: 0; transform: translateY(8px); }
.js .numeros.is-in .num__txt {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms var(--ease) calc(var(--i) * 130ms + 640ms),
    transform 720ms cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 130ms + 640ms);
}

/* Um brilho atravessa o cartao uma vez, logo depois de ele assentar. */
.num::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 40%,
    rgba(255, 255, 255, .72) 50%,
    transparent 60%
  );
  transform: translateX(-110%);
  opacity: 0;
}
.js .numeros.is-in .num::after {
  animation: num-brilho 1100ms cubic-bezier(.4, 0, .2, 1)
    calc(var(--i) * 130ms + 520ms) both;
}
@keyframes num-brilho {
  0%   { transform: translateX(-110%); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* De novo: a regra global tira a transicao, mas nao o ESTADO INICIAL, sem
     isto a secao inteira congelaria invisivel. */
  .js .numeros .num,
  .js .num__lbl,
  .js .num__txt { opacity: 1; transform: none; }
  .js .numeros .num::before { transform: scaleX(1); }
  .num::after { display: none; }
}

/* O `<picture>` tambem e item de grade.
   
   A imagem dentro dele e `position: absolute`, entao o `<picture>` fica com
   zero de altura, mas continua OCUPANDO uma linha da grade. O resultado:
   `place-items: center` centralizava o conjunto "linha vazia + texto", e o
   texto descia. No celular isso jogava o titulo e o botao 84 px para baixo, em
   cima da fileira de personagens de baixo, justamente fora do vazio que a
   composicao reserva para eles.
   
   Tirar o `<picture>` do fluxo resolve nos dois tamanhos de tela: sobra uma
   linha so, e centralizar volta a significar o que parece significar. */
.cta-banner picture { position: absolute; inset: 0; }

/* Os ultimos alvos abaixo de 44 px, medidos depois da primeira rodada. Todos
   erravam por pouco (41 a 43 px), e "por pouco" nao existe aqui: 43 px erra
   quase tanto quanto 30. */
@media (pointer: coarse) {
  .marca { padding-block: 11px; }
  .hero__powered { padding-block: 15px; }
  .rodape__powered { padding-block: 14px; }
  .rodape__cols a { padding-block: 13px; }
  .navbar__fim .btn { min-height: 44px; }
}

/* Os titulos por palavra mantem a quebra de linha do desenho: cada `.pal-linha`
   e um bloco, como o `<br>` que ela substituiu. Sem isto a frase corre em uma
   linha so e o titulo perde o ritmo de duas. */
.pal-h2 .pal-linha { display: block; }

/* Ver o comentario em `clone.js`: `tabular-nums` trava a largura do digito e
   evita o tremor DURANTE a contagem. Terminada a contagem ele so atrapalha, a virgula tabular abre dois buracos em "3,7x". */
.num__val.parou { font-variant-numeric: normal; }