/* ==========================================================================
   Landing FootyPro — estilo da home de produto (/ · /en/ · /es/)

   Saiu de dentro do <style> de publico/home_produto.html para virar arquivo
   estático: entra no ManifestStaticFiles (hash + cache longo) e deixa de ser
   rebaixado a cada visita junto do HTML.

   ESCOPO: tudo pende de `.fp-home`, que vive no <body> do template. Hoje o
   vazamento é improvável — a landing é STANDALONE, não estende base.html —,
   mas os nomes aqui são genéricos (.wrap .btn .card .head .nav) e batem de
   frente com o design system do app. A âncora é o que protege o dia em que
   alguém extrair um pedaço disto para um parcial compartilhado.

   PALETA (31/07/2026): navy + laranja + dourado, do mockup
   docs/footypro-home-demo-animada-v3.html. Reverte a decisão de 17/07/2026,
   que tinha clareado a landing inteira e aposentado o dourado — o CLAUDE.md
   foi atualizado junto para não continuar a afirmar o contrário.

   A página alterna FAIXAS ESCURAS (nav · hero · prova social · CTA final ·
   rodapé) e claras (as seções de conteúdo). Quem escreve numa faixa escura
   usa os tokens `--on-dark*`; quem escreve em faixa clara usa --ink/--muted.
   ========================================================================== */

.fp-home {
  --navy: #0d1b32;
  --navy2: #0a1626;
  --navy3: #132444;
  --orange: #ff6b35;
  --orange-d: #e85826;
  --gold: #f4b429;
  /* Laranja de TEXTO sobre fundo CLARO. Existe separado porque o laranja da
     marca não passa em texto pequeno: medido, #e85826 dá 3,59:1 no branco e
     3,19:1 no --soft — os dois abaixo dos 4,5:1 do AA (o eyebrow tem 12px
     negrito, que NÃO conta como texto grande). Este escuro dá 5,18:1 e
     4,61:1, e a olho continua a ser a mesma cor. Sobre navy o laranja vivo
     passa folgado (6,07:1), então lá nada muda. */
  --orange-txt: #c2410c;

  --bg: #ffffff;
  --soft: #eef2f7;
  --soft2: #e6ecf3;
  --ink: #0f1a2b;
  --muted: #5a6b80;
  --dim: #8a99ac;
  --line: #e2e8f0;

  /* Texto e traços SOBRE as faixas navy. Ter token evita o rgba() solto
     repetido em vinte regras — e é o que torna a faixa escura auditável. */
  --on-dark: #ffffff;
  --on-dark-mut: #c3cddc;
  --on-dark-dim: #93a2b6;
  --on-dark-soft: #c7d0dd;
  --dark-line: rgba(255, 255, 255, 0.1);
  --dark-fill: rgba(255, 255, 255, 0.08);

  /* --accent é o apelido pelo qual o resto da folha fala do laranja. Manter
     o alias (em vez de trocar #16305a por #FF6B35 em cada regra) é o que faz
     o repaint caber num lugar só e o que deixa reverter sem arqueologia. */
  --accent: var(--orange);
  /* Todo call site de --accent-d é TEXTO em faixa clara (o eyebrow do hero e
     o do CTA final são sobrescritos para dourado), daí ele apontar para o
     laranja escuro e não para o vivo. */
  --accent-d: var(--orange-txt);
  --accent-soft: rgba(255, 107, 53, 0.1);

  --silver: #b9c3d1;
  --bronze: #cd8a4e;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 30px 60px -20px rgba(6, 14, 28, 0.55);
  --shadow-sm: 0 6px 20px -8px rgba(15, 26, 43, 0.18);

  --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fd: "Anton", "Arial Narrow", var(--ff);
}

/* ------------------------------------------------- rede do AOS (reveals)

   O aos.css declara `[data-aos^="fade"]{opacity:0}` e conta com o JS dele
   para devolver a visibilidade. Se o CSS carregar e o JS não — rede ruim,
   bloqueador, erro num arquivo anterior —, meia página fica INVISÍVEL para
   sempre. Esta regra inverte o default: só some quem o AOS já inicializou
   (é ele quem carimba `.aos-init` em cada alvo). Sem JS, nada some.

   Especificidade (0,2,0) contra os (0,1,0) do aos.css, então vence sem
   `!important` e independente da ordem dos <link>. */
.fp-home [data-aos]:not(.aos-init) { opacity: 1; transform: none }

/* Palavra do h1 do hero: o home-anim.js quebra o título em <span class=word>
   para escalonar a entrada, e `inline-block` é o que permite transformá-las
   (transform não age em elemento inline). */
.fp-home .hero h1 .word { display: inline-block }

/* Estado ANTES da entrada do hero. Quem põe e tira a marca `pre-anim` é o
   bloco síncrono no <head> do template (com a rede de 1,5s) e o home-anim.js;
   a explicação inteira do porquê está lá.

   O prefixo `hero-` no seletor NÃO é enfeite: `data-anim` é a âncora de JS de
   toda a página (os contadores da prova social e as três cenas do celular
   também a usam), e sem esse degrau qualquer alvo novo nasceria invisível à
   espera de uma timeline que só cobre a entrada. Esconder antes da pintura
   vale para os SEIS pedaços que ela anima e mais nada; abaixo da dobra quem
   manda é o AOS, que tem a própria rede. */
.pre-anim .fp-home [data-anim^="hero-"] { opacity: 0 }

/* --------------------------------------------------------------- reset */

.fp-home *,
.fp-home *::before,
.fp-home *::after { box-sizing: border-box; margin: 0; padding: 0 }
body.fp-home {
  font-family: var(--ff);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* O mockup usa overflow-x:hidden porque o hero tem um círculo decorativo
     estourando a direita. Sem isto o celular ganha barra horizontal. */
  overflow-x: hidden;
}
.fp-home a { color: inherit; text-decoration: none }
.fp-home img { max-width: 100% }

/* Foco de teclado visível em TUDO que é interativo. O tema do app já tem o
   seu; a landing não tinha nenhum, e o outline default some sobre navy. */
.fp-home a:focus-visible,
.fp-home button:focus-visible,
.fp-home input:focus-visible,
.fp-home select:focus-visible,
.fp-home textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------- primitivas */

.fp-home .wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px }
.fp-home .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent-d);
}
.fp-home h1,
.fp-home h2,
.fp-home h3 {
  font-family: var(--fd); font-weight: 400;
  letter-spacing: 0.5px; line-height: 1.02; text-transform: uppercase;
}

.fp-home .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--ff); font-weight: 800; font-size: 15px;
  padding: 14px 22px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform 0.15s, filter 0.15s, box-shadow 0.2s;
}
.fp-home .btn:active { transform: translateY(1px) }
.fp-home .btn-primary {
  background: var(--orange); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(255, 107, 53, 0.6);
}
.fp-home .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(255, 107, 53, 0.7);
}
/* O ghost só aparece no hero, que agora é navy — daí o contorno claro. Se um
   dia for usado em faixa clara, precisa de variante própria. */
.fp-home .btn-ghost {
  background: var(--dark-fill); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.fp-home .btn-ghost:hover { background: rgba(255, 255, 255, 0.15); transform: none }
.fp-home .btn-lg { padding: 16px 28px; font-size: 16px }

/* ----------------------------------------------------------------- nav */

.fp-home .nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 22, 38, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dark-line);
}
.fp-home .nav .wrap { display: flex; align-items: center; gap: 18px; height: 64px }
.fp-home .logo {
  display: flex; align-items: center; gap: 10px; color: var(--on-dark);
  font-family: var(--fd); font-size: 22px; letter-spacing: 0.5px;
}
.fp-home .logo .b { color: var(--orange) }
/* O escudo herda a cor do .logo via currentColor (o SVG tinha #16305a
   cravado, que sobre a nav navy desaparecia). */
.fp-home .logo .crest { width: 30px; height: 32px; flex: 0 0 auto }
.fp-home .nav .links { display: flex; gap: 22px; margin-left: 14px }
.fp-home .nav .links a {
  color: var(--on-dark-soft); font-weight: 600; font-size: 14px;
  transition: color 0.15s;
}
.fp-home .nav .links a:hover { color: #fff }
/* O `margin-left:auto` mora no `.lang` porque ele é o primeiro do grupo da
   direita (idioma · entrar · criar) desde que saiu de dentro do `.right`. */
.fp-home .nav .right { display: flex; align-items: center; gap: 14px }
.fp-home .nav .lang { margin-left: auto }
/* O fundo branco-translúcido VOLTA aqui: ele era o certo enquanto a nav era
   navy, virou invisível quando ela clareou (17/07) e volta a fazer sentido
   agora que ela é navy de novo. */
.fp-home .lang {
  display: flex; gap: 2px; background: var(--dark-fill);
  border: 1px solid var(--dark-line); border-radius: 999px; padding: 3px;
}
.fp-home .lang a {
  border: 0; background: none; color: var(--on-dark-soft);
  font-weight: 800; font-size: 11px; padding: 5px 9px; border-radius: 999px;
}
.fp-home .lang a.on { background: var(--orange); color: #fff }
.fp-home .nav .signin { color: var(--on-dark-soft); font-weight: 700; font-size: 14px }
.fp-home .nav .signin:hover { color: #fff }
.fp-home .nav .cta { padding: 10px 16px; font-size: 13.5px }
.fp-home .nav .cta .curto { display: none }

/* Os links de seção somem cedo (são âncoras que a própria página repete mais
   abaixo). O "Entrar" NÃO: é a única porta de login da landing, e escondê-lo
   no celular — onde entra quase todo mundo — tirava o acesso de quem já tem
   conta. Ele volta como pílula contornada: link de texto puro desaparecia ao
   lado do botão cheio. */
@media (max-width: 820px) {
  .fp-home .nav .links { display: none }
}
/* Abaixo de ~600px as três peças (logo · idioma · duas portas) não cabem numa
   linha de 316px de conteúdo — o botão vazava para fora da tela. O idioma
   desce para uma segunda linha e as duas portas ficam lado a lado em cima.
   `flex-wrap` na .wrap é a rede: se ainda assim não couber (telas de 320px),
   o bloco inteiro quebra em vez de transbordar. */
@media (max-width: 600px) {
  .fp-home .nav .wrap {
    flex-wrap: wrap; height: auto; min-height: 60px;
    gap: 8px 10px; padding: 9px 16px;
  }
  .fp-home .nav .right { gap: 8px; margin-left: auto }
  /* `order` maior que o padrão (0) manda o idioma para o FIM da .wrap; com
     `flex-basis:100%` ele passa a ocupar a segunda linha inteira. */
  .fp-home .nav .lang {
    order: 3; flex-basis: 100%; margin-left: 0; justify-content: flex-end;
    background: none; border: 0; padding: 0;
  }
  .fp-home .lang a { padding: 4px 10px; border: 1px solid var(--dark-line); background: var(--dark-fill) }
  .fp-home .lang a.on { border-color: var(--orange) }
  .fp-home .logo { font-size: 19px }
  .fp-home .nav .signin {
    border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
    padding: 9px 15px; font-size: 13.5px;
  }
  .fp-home .nav .cta { padding: 9px 14px; font-size: 13.5px }
  .fp-home .nav .cta .longo { display: none }
  .fp-home .nav .cta .curto { display: inline }
}
/* Telas de 320-360px (SE, Android de entrada): sem este degrau as duas portas
   caem para uma terceira linha e o cabeçalho fixo come 133px da dobra. */
@media (max-width: 380px) {
  .fp-home .logo { font-size: 17px }
  .fp-home .logo .crest { width: 26px; height: 28px }
  .fp-home .nav .signin { padding: 8px 12px; font-size: 13px }
  .fp-home .nav .cta { padding: 8px 12px; font-size: 13px }
}

/* ---------------------------------------------------------------- hero */

.fp-home .hero {
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(255, 107, 53, 0.2) 0, rgba(0, 0, 0, 0) 52%),
    radial-gradient(90% 70% at 10% 10%, rgba(244, 180, 41, 0.1) 0, rgba(0, 0, 0, 0) 55%),
    linear-gradient(160deg, var(--navy3) 0%, var(--navy2) 62%);
  color: var(--on-dark); position: relative; overflow: hidden;
}
.fp-home .hero::after {
  content: ""; position: absolute; right: -160px; top: -120px;
  width: 440px; height: 440px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.06);
}
.fp-home .hero .wrap {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px;
  align-items: center; padding: 70px 22px 84px; position: relative; z-index: 2;
}
.fp-home .hero .eyebrow { color: var(--gold) }
.fp-home .hero h1 { font-size: 58px; margin: 16px 0 18px; color: var(--on-dark) }
.fp-home .hero h1 .g { color: var(--orange) }
.fp-home .hero p.sub { font-size: 19px; color: var(--on-dark-mut); max-width: 520px }
.fp-home .hero .cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap }
.fp-home .hero .trust { margin-top: 24px; font-size: 14px; color: var(--on-dark-dim) }
.fp-home .hero .trust b { color: #e6edf6 }
.fp-home .hero-visual { display: flex; justify-content: center; position: relative; z-index: 2 }
@media (max-width: 900px) {
  .fp-home .hero .wrap { grid-template-columns: 1fr; text-align: center; padding: 48px 22px 60px }
  .fp-home .hero h1 { font-size: 40px }
  .fp-home .hero p.sub { margin: 0 auto }
  .fp-home .hero .cta { justify-content: center }
  .fp-home .hero-visual { margin-top: 14px }
}

/* -------------------------------------------------------------- celular
   A moldura sempre foi escura e a tela sempre foi clara — o aparelho é a
   única peça que a repaginação quase não toca. A Fase 3 troca o miolo por
   um componente animado; aqui só o que já existia. */

.fp-home .phone {
  width: 300px; background: #0c1830; border-radius: 38px; padding: 11px;
  box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
}
.fp-home .phone .screen {
  background: var(--soft); border-radius: 28px; overflow: hidden;
  height: 600px; position: relative;
  /* A tela é uma superfície CLARA, esteja o aparelho onde estiver. Sem esta
     linha, todo texto que não declara cor herda o branco da faixa em que o
     celular está — e o do hero está na navy: nome do jogador, cabeçalho de
     time e contagem saíam brancos sobre #eef2f7, ou seja, invisíveis. Corrigir
     aqui, e não regra a regra, é o que evita a mesma caça na próxima tela
     falsa que alguém desenhar dentro de uma seção escura. */
  color: var(--ink);
}
.fp-home .phone .scroll { height: 100%; overflow: hidden }
.fp-home .appbar {
  display: flex; align-items: center; gap: 9px; padding: 14px 14px 8px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.fp-home .appbar .cr {
  width: 30px; height: 32px; background: var(--navy); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--fd); font-size: 12px;
}
.fp-home .appbar .tt {
  font-family: var(--fd); font-size: 15px; letter-spacing: 0.4px;
  color: var(--ink); line-height: 1;
}
.fp-home .appbar .tt small {
  display: block; font-family: var(--ff); font-weight: 700; font-size: 9px;
  letter-spacing: 0.8px; color: var(--orange-txt); margin-top: 3px;
  text-transform: uppercase;
}
.fp-home .appbar .tog {
  margin-left: auto; width: 34px; height: 18px; border-radius: 999px;
  background: var(--navy); position: relative;
}
.fp-home .appbar .tog::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border-radius: 50%; background: var(--gold); top: 2px; right: 2px;
}
.fp-home .appbody { padding: 12px 13px; overflow: hidden }
.fp-home .kick {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--dim); margin: 2px 0 8px;
}
.fp-home .card2 {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px; box-shadow: var(--shadow-sm);
}
.fp-home .chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--navy);
  color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
}
.fp-home .bigdate { font-family: var(--fd); font-size: 30px; color: var(--ink); margin: 9px 0 1px }
.fp-home .subt { font-size: 11px; color: var(--muted) }
.fp-home .stats3 { display: flex; gap: 7px; margin-top: 11px }
.fp-home .stat {
  flex: 1; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 4px; text-align: center; background: var(--soft);
}
.fp-home .stat .n { font-family: var(--fd); font-size: 19px; color: var(--ink); line-height: 1 }
.fp-home .stat .n.g { color: var(--accent-d) }
.fp-home .stat .l {
  font-size: 8px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--dim); margin-top: 3px;
}
.fp-home .pill-btn {
  margin-top: 11px; background: var(--navy); color: #fff; text-align: center;
  font-weight: 800; font-size: 12.5px; padding: 11px; border-radius: 999px;
}
.fp-home .tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px }
.fp-home .tile2 {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 6px; text-align: center; box-shadow: var(--shadow-sm);
}
.fp-home .tile2 .ic {
  width: 26px; height: 26px; margin: 0 auto 6px; border-radius: 8px;
  background: var(--soft2); display: flex; align-items: center;
  justify-content: center; font-size: 14px;
}
.fp-home .tile2 .t { font-weight: 700; font-size: 11px }
.fp-home .tile2 .s { font-size: 8.5px; color: var(--dim); margin-top: 1px }
.fp-home .lead {
  display: flex; align-items: center; gap: 9px; padding: 8px 0;
  border-top: 1px solid var(--line);
}
.fp-home .lead:first-child { border-top: 0 }
.fp-home .lead .pos { font-family: var(--fd); width: 18px; text-align: center; color: var(--dim); font-size: 15px }
.fp-home .lead .pos.p1 { color: var(--gold) }
.fp-home .lead .pos.p2 { color: var(--silver) }
.fp-home .lead .pos.p3 { color: var(--bronze) }
.fp-home .lead .av {
  width: 26px; height: 26px; border-radius: 50%; background: var(--navy);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.fp-home .lead .who { flex: 1; min-width: 0 }
.fp-home .lead .who .n { font-weight: 700; font-size: 12px }
.fp-home .lead .who .m { font-size: 9.5px; color: var(--muted) }
.fp-home .lead .pt { font-family: var(--fd); font-size: 16px; color: var(--ink) }
.fp-home .lead .pt small { font-family: var(--ff); font-size: 8px; color: var(--dim); font-weight: 600 }

/* ------------------------------------ demo do celular do hero (3 cenas)

   TUDO aqui pende de `.phone.demo`, e o motivo é concreto: os três celulares
   da seção de benefícios usam os MESMOS nomes genéricos (.appbar, .chip,
   .pill-btn, .balance, .av) com desenho diferente. Sem o discriminador, a
   appbar absoluta e o botão colado no rodapé vazariam para lá e desmontariam
   as outras três telas.

   Onde um nome existe nos dois mundos, a regra daqui tem de RESTATAR o que
   difere — ela vence por especificidade, mas só nas propriedades que declara.
   Foi por isso que a linha de ranking daqui virou `.rlin` em vez de `.rrow`:
   lá é uma linha com borda em cima, aqui é um cartão com sombra, e herdar
   metade de cada um dava um híbrido que ninguém pediu. Precedente da casa:
   `.prow2`, renomeada pelo mesmo motivo antes desta entrega. */

.fp-home .phone.demo .screen { position: relative }
.fp-home .phone.demo .appbar {
  position: absolute; top: 0; left: 0; right: 0; height: 58px;
  padding: 0 14px; z-index: 6;
}
.fp-home .phone.demo .dots { margin-left: auto; display: flex; gap: 4px }
.fp-home .phone.demo .dt {
  width: 16px; height: 4px; border-radius: 3px;
  background: var(--soft2); transition: background 0.3s;
}
.fp-home .phone.demo .dt.on { background: var(--orange) }

/* O palco ocupa o vão entre a appbar (58px) e o botão do rodapé (56px). Uma
   cena por vez: `visibility` além de `opacity` é o que impede a cena
   escondida de continuar clicável e de ser lida por leitor de tela. */
.fp-home .phone.demo .stage { position: absolute; top: 58px; left: 0; right: 0; bottom: 56px; overflow: hidden }
.fp-home .phone.demo .scene {
  position: absolute; inset: 0; padding: 14px 14px 6px;
  opacity: 0; visibility: hidden; transition: opacity 0.45s ease;
}
.fp-home .phone.demo .scene.active { opacity: 1; visibility: visible }

.fp-home .phone.demo .av {
  border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; flex: 0 0 auto;
}

/* cena 1 — lista por prioridade */
.fp-home .phone.demo .plist {
  margin-top: 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 4px 12px; box-shadow: var(--shadow-sm);
}
.fp-home .phone.demo .prow {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--line);
}
.fp-home .phone.demo .prow:first-child { border-top: 0 }
.fp-home .phone.demo .prow .rk { font-family: var(--fd); font-size: 15px; color: var(--dim); width: 16px; text-align: center }
.fp-home .phone.demo .prow .av { width: 34px; height: 34px }
.fp-home .phone.demo .prow .nm { font-weight: 700; font-size: 13px }
.fp-home .phone.demo .prow .st { font-size: 10px; color: var(--dim); margin-top: 1px }
.fp-home .phone.demo .prow .fire { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--orange-txt) }
.fp-home .phone.demo .prow .ok {
  width: 19px; height: 19px; border-radius: 50%; background: #e7f6ec;
  color: #1f9d54; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; flex: 0 0 auto;
}

/* cena 2 — sorteio. O `.balance` existe também nos celulares dos benefícios,
   com `justify-content: space-between`; restatar aqui não é redundância. */
.fp-home .phone.demo .balance {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 12px 0 10px; font-size: 12px; color: var(--muted);
}
.fp-home .phone.demo .balance b { font-family: var(--fd); font-size: 17px; color: var(--ink) }
.fp-home .phone.demo .balance .delta {
  color: #1f9d54; font-weight: 800; background: #e7f6ec;
  padding: 3px 8px; border-radius: 7px; font-size: 11px;
}
.fp-home .phone.demo .teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.fp-home .phone.demo .tcol {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 10px; box-shadow: var(--shadow-sm);
}
.fp-home .phone.demo .tcol .th {
  display: flex; align-items: center; gap: 6px; font-weight: 800;
  font-size: 11px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.fp-home .phone.demo .tcol .th .d { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto }
/* As duas cores dos times viraram classe: no mockup eram `style=` inline, e
   inline não sobrevive a um CSP que um dia aperte o style-src. */
.fp-home .phone.demo .tcol .th .d.branco { background: #cfd8e3 }
.fp-home .phone.demo .tcol .th .d.azul { background: var(--orange) }
.fp-home .phone.demo .tcol .th .sc { margin-left: auto; font-family: var(--fd); font-size: 14px }
.fp-home .phone.demo .trow {
  display: flex; align-items: center; gap: 7px; font-size: 11px;
  padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink);
}
.fp-home .phone.demo .trow:first-of-type { border-top: 0 }
.fp-home .phone.demo .trow .av { width: 22px; height: 22px; font-size: 7px }
/* A coluna tem ~140px e o nome divide o espaço com avatar e badge de posição.
   Sem o encolhimento com reticências, um nome comprido quebra em duas linhas
   e a linha inteira fica mais alta que as vizinhas — e o problema piora em
   EN/ES, onde nada garante o mesmo comprimento. */
.fp-home .phone.demo .trow .jog {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.fp-home .phone.demo .trow .pos {
  margin-left: auto; font-size: 7.5px; font-weight: 900; color: var(--dim);
  background: var(--soft2); border-radius: 4px; padding: 2px 4px;
}

/* cena 3 — ranking */
.fp-home .phone.demo .rlin {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px;
  margin-top: 9px; box-shadow: var(--shadow-sm);
}
.fp-home .phone.demo .rlin.top { border-color: #f4d58a; background: linear-gradient(180deg, #fffdf6, #fff) }
.fp-home .phone.demo .rlin .rk { font-family: var(--fd); font-size: 17px; color: var(--dim); width: 16px; text-align: center }
.fp-home .phone.demo .rlin.top .rk { color: var(--gold) }
.fp-home .phone.demo .rlin .av { width: 38px; height: 38px }
.fp-home .phone.demo .rlin .info { flex: 1; min-width: 0 }
.fp-home .phone.demo .rlin .nm { font-weight: 800; font-size: 12.5px }
.fp-home .phone.demo .rlin .meta { font-size: 9px; color: var(--dim); margin-top: 1px }
.fp-home .phone.demo .rlin .pct { font-family: var(--fd); font-size: 18px; color: var(--orange-txt); flex: 0 0 auto }
.fp-home .phone.demo .rlin .pct small { font-family: var(--fd); font-size: 12px }
.fp-home .phone.demo .rbarwrap { height: 5px; background: var(--soft2); border-radius: 4px; margin-top: 8px; overflow: hidden }
.fp-home .phone.demo .rbar {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--orange), var(--gold));
}

/* O botão do rodapé é filho DIRETO da tela aqui (nos benefícios ele vive
   dentro de um .card2, no fluxo normal). */
.fp-home .phone.demo .screen > .pill-btn {
  position: absolute; left: 11px; right: 11px; bottom: 11px; margin-top: 0;
  z-index: 6; box-shadow: 0 8px 18px -8px rgba(13, 27, 50, 0.7);
}

/* ------------------------------ miolo dos celulares dos benefícios

   Estas regras estavam no <style> de 248 linhas e NÃO vieram na extração da
   Fase 1 — 23 seletores ficaram para trás, e com eles os três mockups da
   seção "recursos" perderam o desenho: o pódio virou uma pilha de texto, as
   duas colunas de time colapsaram numa lista só e os badges de posição
   viraram letras coladas no nome ("GKLuccas G.").

   Passou despercebido porque a Fase 1 foi conferida por captura de tela, e
   estes blocos têm `data-aos`: sem rolar a página antes do print, o recorte
   sai em BRANCO e parece só um enquadramento errado. Quem for fotografar
   qualquer coisa abaixo da dobra tem de rolar primeiro.

   Portadas como estavam, só com a âncora `.fp-home` — os tokens que elas
   usam (--accent-d, --silver, --bronze, --accent-soft) sobreviveram todos
   ao repaint. `.langsel` e `.btn-dark` também sumiram na extração e ficam
   fora de propósito: nenhum dos dois tem call site no template de hoje. */

.fp-home .podium {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end; gap: 8px; margin-top: 6px;
}
.fp-home .pod { display: flex; flex-direction: column; align-items: center }
.fp-home .pod .pav {
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; border: 3px solid var(--line);
}
.fp-home .pod.first .pav { width: 52px; height: 52px; border-color: var(--gold) }
.fp-home .pod.second .pav { border-color: var(--silver) }
.fp-home .pod.third .pav { border-color: var(--bronze) }
.fp-home .pod .pn { font-weight: 700; font-size: 10.5px; margin-top: 6px; text-align: center }
.fp-home .pod .pp { font-family: var(--fd); color: var(--accent-d); font-size: 15px }
.fp-home .pod .base {
  width: 100%; margin-top: 7px; border-radius: 9px 9px 0 0;
  background: var(--soft2); border: 1px solid var(--line); border-bottom: 0;
  font-family: var(--fd); color: var(--dim); text-align: center; padding-top: 5px;
}
.fp-home .pod.first .base { height: 52px }
.fp-home .pod.second .base { height: 38px }
.fp-home .pod.third .base { height: 28px }

.fp-home .streak {
  display: flex; align-items: center; gap: 9px; background: var(--accent-soft);
  border: 1px solid #f0e2ad; border-radius: 11px; padding: 9px 11px; margin-top: 12px;
}
.fp-home .streak .f { font-size: 16px }
.fp-home .streak .tx { font-size: 10.5px; color: var(--ink) }
.fp-home .streak .tx b { color: var(--accent-d) }
.fp-home .streak .tx span {
  display: block; font-size: 8.5px; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--muted);
}

.fp-home .rrow {
  display: flex; align-items: center; gap: 9px; padding: 8px 0;
  border-top: 1px solid var(--line);
}
.fp-home .rrow .pos { font-family: var(--fd); width: 16px; text-align: center; color: var(--dim); font-size: 13px }
.fp-home .rrow .pos.p1 { color: var(--gold) }
.fp-home .rrow .pos.p2 { color: var(--silver) }
.fp-home .rrow .pos.p3 { color: var(--bronze) }
.fp-home .rrow .who { flex: 1 }
.fp-home .rrow .who .n { font-weight: 700; font-size: 11.5px }
.fp-home .rrow .who .m { font-size: 9px; color: var(--muted) }
.fp-home .rrow .ap { font-family: var(--fd); font-size: 14px }

.fp-home .balance {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--muted); margin-bottom: 8px;
}
.fp-home .balance b { font-family: var(--fd); color: var(--ink); font-size: 15px }
.fp-home .balance .d { color: var(--accent-d); font-weight: 800; font-size: 10px }
.fp-home .bbar { height: 9px; border-radius: 6px; background: var(--soft2); overflow: hidden; display: flex }
.fp-home .bbar i { display: block; height: 100% }
.fp-home .bbar .a { background: var(--navy); width: 50.2% }
.fp-home .bbar .b { background: var(--silver); width: 49.8% }

.fp-home .split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.fp-home .teamcol { margin-top: 10px }
.fp-home .teamcol .h {
  display: flex; align-items: center; gap: 6px; font-weight: 800;
  font-size: 11px; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.fp-home .teamcol .h .dot { width: 8px; height: 8px; border-radius: 50% }
.fp-home .teamcol .h .meta { margin-left: auto; font-weight: 600; font-size: 9px; color: var(--dim) }
.fp-home .prow2 {
  display: flex; align-items: center; gap: 7px; padding: 5px 0;
  border-top: 1px solid var(--line); font-size: 10.5px;
}
.fp-home .prow2:first-of-type { border-top: 0 }
.fp-home .prow2 .tag {
  font-size: 7.5px; font-weight: 800; color: var(--dim); background: var(--soft2);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px;
}

/* ------------------------------------------------------- prova social */

.fp-home .proof {
  background: var(--navy2); color: var(--on-dark); padding: 30px 0;
  border-top: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line);
}
.fp-home .proof .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 34px; flex-wrap: wrap; text-align: center;
}
.fp-home .proof .p { display: flex; flex-direction: column }
.fp-home .proof .p .n { font-family: var(--fd); font-size: 38px; color: var(--gold); line-height: 1 }
.fp-home .proof .p .l { font-size: 12.5px; color: #aeb9c8; letter-spacing: 0.4px; margin-top: 6px }
.fp-home .proof .sep { width: 1px; height: 44px; background: rgba(255, 255, 255, 0.14) }
@media (max-width: 700px) {
  .fp-home .proof .sep { display: none }
  .fp-home .proof .wrap { gap: 22px }
}

/* ------------------------------------------------ seções de conteúdo */

.fp-home section.block { padding: 80px 0 }
.fp-home .soft { background: var(--soft) }
.fp-home .head { max-width: 680px; margin: 0 auto 46px; text-align: center }
.fp-home .head h2 { font-size: 40px; color: var(--ink); margin-top: 10px }
.fp-home .head p { color: var(--muted); font-size: 17px; margin-top: 14px }

/* problema → solução */
.fp-home .cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.fp-home .pcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.fp-home .pcard .ic {
  width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 14px;
}
.fp-home .pcard h3 { font-size: 19px; letter-spacing: 0.3px }
.fp-home .pcard p { color: var(--muted); font-size: 14.5px; margin-top: 8px }
.fp-home .pcard .fix { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--accent-d) }
@media (max-width: 820px) {
  .fp-home .cols3 { grid-template-columns: 1fr }
}

/* benefícios em zig-zag */
.fp-home .feat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 52px;
  align-items: center; padding: 56px 0; border-top: 1px solid var(--line);
}
.fp-home .feat.rev .txt { order: 2 }
.fp-home .feat .visual { display: flex; justify-content: center }
.fp-home .feat h3 { font-size: 30px; color: var(--ink) }
.fp-home .feat .txt .tag { margin-bottom: 10px }
.fp-home .feat p { color: var(--muted); font-size: 16px; margin-top: 12px }
.fp-home .feat ul { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 9px }
.fp-home .feat li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink) }
.fp-home .feat li::before { content: "✓"; color: var(--accent-d); font-weight: 900 }
@media (max-width: 860px) {
  .fp-home .feat { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 }
  .fp-home .feat.rev .txt { order: 0 }
  .fp-home .feat .visual { order: -1 }
}

/* como funciona — o número grande do mockup, no lugar do disco navy */
.fp-home .steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 980px; margin: 0 auto; counter-reset: s;
}
.fp-home .step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); position: relative;
}
.fp-home .step .no {
  counter-increment: s; font-family: var(--fd); font-size: 44px;
  color: var(--soft2); line-height: 0.8;
}
.fp-home .step .no::before { content: counter(s); color: var(--orange) }
.fp-home .step h3 { font-size: 18px; margin: 12px 0 8px }
.fp-home .step p { color: var(--muted); font-size: 14px; margin-top: 7px }
@media (max-width: 820px) {
  .fp-home .steps { grid-template-columns: 1fr }
}

/* depoimento */
.fp-home .quote { max-width: 760px; margin: 0 auto; text-align: center }
.fp-home .quote .q { font-family: var(--fd); font-size: 28px; line-height: 1.25; color: var(--ink) }
.fp-home .quote .by { margin-top: 18px; color: var(--muted); font-weight: 600 }

/* FAQ */
.fp-home .faq { max-width: 760px; margin: 0 auto }
.fp-home .qa { border-bottom: 1px solid var(--line) }
.fp-home .qa button {
  width: 100%; text-align: left; background: none; border: 0; padding: 20px 0;
  font-family: var(--ff); font-weight: 700; font-size: 16.5px; color: var(--ink);
  cursor: pointer; display: flex; justify-content: space-between; gap: 14px;
}
.fp-home .qa .a { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; color: var(--muted); font-size: 15px }
.fp-home .qa .a p { padding-bottom: 20px }
.fp-home .qa.open .a { max-height: 260px }
.fp-home .qa .pm { color: var(--accent-d); font-weight: 900; flex: 0 0 auto }

/* vitrine "explorar peladas" */
.fp-home .vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px }
.fp-home .vcard {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px; box-shadow: var(--shadow-sm); transition: transform 0.15s, box-shadow 0.2s;
}
.fp-home .vcard:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(15, 26, 43, 0.28) }
.fp-home .vcard .cr {
  width: 40px; height: 42px; background: var(--navy); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--fd); font-size: 14px; flex: 0 0 auto;
}
/* `display:block` conserta um bug ANTERIOR a esta repaginação: o markup é
   <span class=vn>nome</span><span class=vg>abrir página</span>, dois INLINE
   um ao lado do outro — o `margin-top` do .vg nunca teve efeito e o nome da
   pelada sempre correu emendado no "abrir página". Passava despercebido
   porque o .vg era navy e se confundia com o nome; em laranja salta à vista. */
.fp-home .vcard .vn { display: block; font-weight: 800; font-size: 15px }
.fp-home .vcard .vg { display: block; font-size: 12px; color: var(--accent-d); font-weight: 700; margin-top: 2px }
.fp-home .vempty { color: var(--muted); text-align: center }

/* --------------------------------------------- CTA final + formulário */

.fp-home .final {
  background: linear-gradient(160deg, var(--navy3), var(--navy2));
  color: var(--on-dark); text-align: center; padding: 84px 0;
}
.fp-home .final .eyebrow { color: var(--gold) }
.fp-home .final h2 { font-size: 44px; margin-top: 12px }
.fp-home .final p { color: var(--on-dark-mut); font-size: 18px; margin: 16px auto 30px; max-width: 560px }

/* O formulário fica DENTRO da faixa navy, como cartão branco: os rótulos e o
   texto de consentimento continuam sobre branco, então seguem escuros. */
.fp-home .leadform {
  max-width: 640px; margin: 34px auto 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); text-align: left;
}
.fp-home .leadform .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.fp-home .leadform .fld { margin-top: 14px }
.fp-home .leadform label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--dim); display: block; margin-bottom: 5px;
}
.fp-home .leadform input[type="text"],
.fp-home .leadform input[type="email"],
.fp-home .leadform input[type="tel"],
.fp-home .leadform select,
.fp-home .leadform textarea {
  width: 100%; background: var(--soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 13px; font-family: var(--ff);
  font-size: 15px; color: var(--ink); outline: none;
}
.fp-home .leadform input:focus,
.fp-home .leadform select:focus,
.fp-home .leadform textarea:focus { border-color: var(--orange) }
.fp-home .leadform textarea { min-height: 80px; resize: vertical }
.fp-home .leadform .chips { display: flex; flex-wrap: wrap; gap: 8px }
.fp-home .leadform .chip-c {
  display: inline-flex; align-items: center; gap: 6px; background: var(--soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.fp-home .leadform .chip-c input { accent-color: var(--orange-d) }
.fp-home .leadform .consent {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 16px;
  font-size: 13.5px; color: var(--muted);
}
.fp-home .leadform .consent input { margin-top: 3px; accent-color: var(--orange-d) }
.fp-home .leadform .consent a { color: var(--orange-txt); font-weight: 700; text-decoration: underline }
/* Os dois `accent-color` acima ficam no laranja vivo de propósito: são
   PREENCHIMENTO de controle, não texto — a régua ali é a de 3:1 de elemento
   não-textual, que #e85826 sobre branco cumpre (3,59:1). */
.fp-home .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.fp-home .leadform .msg { margin-top: 14px; font-size: 14px; font-weight: 700; display: none }
.fp-home .leadform .msg.ok { color: #1f8a4c; display: block }
.fp-home .leadform .msg.err { color: #c0392b; display: block }
.fp-home .iti { width: 100% }
@media (max-width: 640px) {
  .fp-home .leadform .grid2 { grid-template-columns: 1fr }
}

/* -------------------------------------------------------------- rodapé */

.fp-home .foot {
  background: var(--navy2); color: var(--on-dark-dim); padding: 40px 0;
  font-size: 13.5px; border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fp-home .foot .wrap {
  display: flex; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; align-items: center;
}
.fp-home .foot .logo { font-size: 18px; color: var(--on-dark) }
.fp-home .foot a { color: var(--on-dark-mut) }
.fp-home .foot a:hover { color: #fff }
.fp-home .foot .links { display: flex; gap: 18px; flex-wrap: wrap }
