/* Página do atleta — visual B, "rua/kinético" (desenho §6: docs/superpowers/specs/2026-09-24-landing-atleta-formulario-perfil-design.md).
   Só tema escuro, de propósito: o visual é preto + amarelo ácido, e um tema claro seria outra marca.
   Mobile-first (o público vem do Instagram). Nada de terceiros: as fontes são woff2 nossos, em fontes/ (CSP default-src 'self').
   Contraste conferido (AA): ácido sobre preto ≈ 14:1; #A1A1AA sobre preto ≈ 7,6:1; preto sobre ácido ≈ 14:1.

   Contrato de marcação para o formulário (Task 5, lista.js):
   - opção grande (etapa 1):  <label class="fl-opcao"><input type="radio" …><span class="fl-opcao__titulo">Atleta</span>
                              <span class="fl-opcao__apoio">Quero treinar leitura de jogo</span></label>
   - chip:                    <div class="fl-chips"><label class="fl-chip"><input type="checkbox" …><span>Futsal</span></label>…</div>
   - campo:                   <div class="fl-campo"><label for>…</label><input|select …><p class="fl-campo__dica">…</p>
                              <p class="fl-erro" id>…</p></div>
   - grupo de chips/opções:   <fieldset class="fl-grupo"><legend>…</legend>…</fieldset>
   - etapa:                   <fieldset class="fl-etapa"><legend class="fl-etapa__titulo" tabindex="-1">…</legend>…</fieldset>
   - progresso:               <div class="fl-progresso" data-passo="1..5"><p class="fl-progresso__texto" aria-live="polite">1 de 5</p>
                              <div class="fl-progresso__barra"><span class="fl-progresso__preenchido"></span></div></div>
                              (a largura vem do data-passo: style="" inline é barrado pela CSP style-src 'self')
   - navegação:               <div class="fl-navegacao"><button class="fl-botao fl-botao--secundario">Voltar</button>…</div>
   - consentimento:           <div class="fl-check"><input type="checkbox" id><label for>…</label><p class="fl-erro">…</p></div>
   O input fica visualmente escondido dentro do rótulo, mas continua focável e lido pelo leitor de tela (nunca div clicável). */

/* ============ Fontes (OFL 1.1, fontes/LICENSE-OFL.txt) ============
   Só latin + latin-ext: o navegador baixa só o subconjunto que a página usa (unicode-range). swap = texto aparece na
   fonte do sistema enquanto a nossa chega (nada de texto invisível). */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fontes/barlow-condensed-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fontes/barlow-condensed-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fontes/barlow-condensed-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fontes/barlow-condensed-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fontes/barlow-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fontes/barlow-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fontes/barlow-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fontes/barlow-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fontes/barlow-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fontes/barlow-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Tokens (desenho §6) ============ */
:root {
  /* cores */
  --fl-preto: #09090B;
  --fl-grafite: #18181B;
  --fl-trilho: #27272A; /* fundo da barra de progresso e das etiquetas (só decoração, sem texto em cima) */
  --fl-borda: #3F3F46;
  --fl-borda-forte: #FAFAFA;
  --fl-texto: #FAFAFA;
  --fl-texto-2: #D4D4D8;
  --fl-texto-3: #A1A1AA;
  --fl-acido: #DFE104;
  --fl-acido-texto: #09090B;
  --fl-erro: #FF6B6B;
  --fl-ok: #4ADE80;

  /* tipografia: 'Arial Narrow'/system-ui seguram o layout enquanto a fonte chega (swap) */
  --fl-fonte-titulo: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --fl-fonte-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fl-t-heroi: clamp(3rem, 2.2rem + 4vw, 5.5rem); /* 48 → 88 px */
  --fl-t-h2: clamp(2rem, 1.6rem + 2vw, 3rem); /* 32 → 48 px */
  --fl-t-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fl-t-corpo: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18 px */
  --fl-t-legenda: 0.8125rem; /* 13 px */

  /* espaço: 4/8/12/16/24/32/48/64 */
  --fl-e1: 4px;
  --fl-e2: 8px;
  --fl-e3: 12px;
  --fl-e4: 16px;
  --fl-e5: 24px;
  --fl-e6: 32px;
  --fl-e7: 48px;
  --fl-e8: 64px;

  /* forma: reto é o estilo (raio 0); 999 só em selo */
  --fl-raio: 0;
  --fl-raio-selo: 999px;
  --fl-linha: 2px;
  --fl-sombra: 4px 4px 0 var(--fl-borda-forte);
  --fl-sombra-pressionado: 2px 2px 0 var(--fl-borda-forte);

  /* toque: alvo mínimo de 48 px */
  --fl-alvo: 48px;
  --fl-rapido: 150ms;
  --fl-caixa: 1120px;
  --fl-gutter: 16px;

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fl-preto);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--fl-preto);
  color: var(--fl-texto);
  font-family: var(--fl-fonte-texto);
  font-size: var(--fl-t-corpo);
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--fl-acido);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--fl-acido);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fl-t-heroi);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--fl-t-h2);
}

h3 {
  font-size: var(--fl-t-h3);
}

h4 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1em;
}

s {
  text-decoration-thickness: 2px;
}

code {
  font-size: 0.9em;
}

/* Escondido da tela, mas lido pelo leitor de tela. */
.fl-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Campo-armadilha para robôs (honeypot): fora da tela e fora da ordem do teclado. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pular {
  position: absolute;
  left: var(--fl-gutter);
  top: -100px;
  z-index: 10;
  padding: var(--fl-e3) var(--fl-e4);
  background: var(--fl-acido);
  color: var(--fl-acido-texto);
  font-weight: 600;
}

.pular:focus {
  top: var(--fl-e3);
}

.caixa,
.fl-caixa {
  width: 100%;
  max-width: var(--fl-caixa);
  margin: 0 auto;
  padding-inline: var(--fl-gutter);
}

.caixa--estreita,
.fl-caixa--estreita {
  max-width: 760px;
}

@media (min-width: 720px) {
  :root {
    --fl-gutter: 24px;
  }
}

/* ============ Topo (cabeçalho) ============ */
.topo {
  border-bottom: var(--fl-linha) solid var(--fl-borda);
}

.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fl-e4);
  min-height: 64px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-e2);
  min-height: var(--fl-alvo);
  color: var(--fl-texto);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: 1.375rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.marca img {
  width: 30px;
  height: 30px;
}

/* ============ Botões ============ */
.fl-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-e2);
  min-height: var(--fl-alvo);
  padding: var(--fl-e3) var(--fl-e5);
  border: var(--fl-linha) solid var(--fl-acido);
  border-radius: var(--fl-raio);
  background: var(--fl-acido);
  color: var(--fl-acido-texto);
  box-shadow: var(--fl-sombra);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--fl-rapido) ease-out,
    box-shadow var(--fl-rapido) ease-out,
    background-color var(--fl-rapido) ease-out;
}

.fl-botao:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--fl-borda-forte);
}

.fl-botao:active {
  transform: translate(2px, 2px);
  box-shadow: var(--fl-sombra-pressionado);
}

.fl-botao:disabled,
.fl-botao[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.fl-botao--secundario,
.botao {
  background: transparent;
  color: var(--fl-texto);
  border-color: var(--fl-borda-forte);
  box-shadow: none;
}

.fl-botao--secundario:hover,
.botao:hover {
  background: var(--fl-grafite);
  transform: none;
  box-shadow: none;
}

.fl-botao--secundario:active,
.botao:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.fl-botao--largo {
  width: 100%;
}

/* Botão dos documentos legais (Voltar para a página): contorno, pequeno, mas com o alvo de 48 px. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fl-alvo);
  padding: var(--fl-e2) var(--fl-e4);
  border: var(--fl-linha) solid var(--fl-borda-forte);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--fl-rapido) ease-out;
}

/* ============ Selo, faixa e marca-texto ============ */
.fl-selo {
  display: inline-block;
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--fl-raio-selo);
  background: var(--fl-borda-forte);
  color: var(--fl-preto);
  font-family: var(--fl-fonte-titulo);
  font-weight: 600;
  font-size: var(--fl-t-legenda);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fl-selo + h2 {
  margin-top: var(--fl-e3);
}

.fl-selo--acido {
  background: var(--fl-acido);
  color: var(--fl-acido-texto);
}

/* Faixa correndo (marquee): só decoração, aria-hidden no HTML. Dois blocos iguais em fila: andar -50% volta ao começo sem salto. */
.fl-faixa {
  overflow: hidden;
  margin: var(--fl-e2) calc(-1 * var(--fl-e3)) 0;
  padding: 6px 0;
  background: var(--fl-acido);
  color: var(--fl-acido-texto);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: rotate(-2deg);
}

.fl-faixa__trilho {
  display: flex;
  width: max-content;
  animation: fl-faixa 30s linear infinite;
}

.fl-faixa__trilho span {
  padding-right: 0.5em;
}

@keyframes fl-faixa {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Marca-texto BAIXO (aprovado): só a metade de baixo da palavra, sem invadir a linha de cima. A sombra dura escura
   mantém o contorno das letras brancas legível onde elas passam sobre o amarelo. */
.fl-marca {
  background: linear-gradient(transparent 58%, var(--fl-acido) 58% 92%, transparent 92%);
  color: inherit;
  padding: 0 0.06em;
  text-shadow: 0.045em 0.045em 0 var(--fl-preto);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============ Seções ============ */
.fl-secao {
  padding-block: var(--fl-e7);
}

@media (min-width: 900px) {
  .fl-secao {
    padding-block: var(--fl-e8);
  }
}

.fl-secao--alt {
  background: var(--fl-grafite);
  border-block: var(--fl-linha) solid var(--fl-borda);
}

.fl-intro {
  max-width: 62ch;
  color: var(--fl-texto-2);
  font-size: 1.0625em;
}

.fl-nota {
  color: var(--fl-texto-3);
  font-size: 0.9375rem;
}

.fl-aviso {
  margin: var(--fl-e4) 0;
  padding-left: var(--fl-e3);
  border-left: 3px solid var(--fl-acido);
  color: var(--fl-texto-2);
  font-size: 0.9375rem;
}

/* ============ Herói ============ */
.fl-heroi {
  overflow-x: clip; /* a faixa girada passa da borda: nada de rolagem lateral */
  padding-bottom: var(--fl-e7);
}

.fl-heroi__grade {
  display: grid;
  gap: var(--fl-e5);
  padding-top: var(--fl-e5);
}

.fl-heroi__texto > .fl-selo {
  margin-bottom: var(--fl-e4);
}

.fl-heroi h1 {
  margin: 0 0 var(--fl-e4);
}

.fl-heroi__sub {
  max-width: 34ch;
  color: var(--fl-texto-2);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.45;
}

.fl-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-e2) var(--fl-e4);
  margin: 0 0 var(--fl-e5);
  padding: 0;
  list-style: none;
  color: var(--fl-acido);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fl-heroi .fl-botao {
  width: 100%;
  font-size: 1.375rem;
}

.fl-heroi__nota {
  margin-top: var(--fl-e4);
  color: var(--fl-texto-3);
  font-size: 0.9375rem;
}

/* No celular a imagem real vem logo depois da faixa (mockup B aprovado); no desktop, ao lado do texto. */
.fl-heroi__grade > .fl-figura {
  order: -1;
}

@media (min-width: 900px) {
  .fl-heroi__grade {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--fl-e7);
    padding-top: var(--fl-e7);
  }

  .fl-heroi__grade > .fl-figura {
    order: 0;
  }

  .fl-heroi .fl-botao {
    width: auto;
    min-width: 280px;
  }
}

.fl-figura {
  margin: 0;
}

.fl-figura img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: var(--fl-linha) solid var(--fl-borda-forte);
  box-shadow: 6px 6px 0 var(--fl-acido);
}

.fl-figura figcaption {
  margin-top: var(--fl-e3);
  color: var(--fl-texto-3);
  font-size: var(--fl-t-legenda);
}

/* Arte de campanha: enquadramento do atleta preservado em telas estreitas. */
.fl-heroi__arte img {
  aspect-ratio: 4 / 5;
  object-position: 78% center;
}
.fl-campanha {
  margin-bottom: var(--fl-e7);
}
.fl-campanha img {
  aspect-ratio: 16 / 7;
  object-position: center 40%;
}
@media (max-width: 899px) {
  .fl-heroi__arte img { aspect-ratio: 16 / 10; object-position: right center; }
  .fl-campanha img { aspect-ratio: 4 / 3; object-position: 65% center; }
}

/* ============ Como funciona ============ */
.fl-passos {
  display: grid;
  gap: var(--fl-e6);
  margin: var(--fl-e6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

@media (min-width: 900px) {
  .fl-passos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fl-e5);
  }
}

.fl-passo {
  display: flex;
  flex-direction: column;
  gap: var(--fl-e3);
}

.fl-passo h3 {
  display: flex;
  align-items: center;
  gap: var(--fl-e3);
  margin: var(--fl-e3) 0 0;
}

/* O número vem do data-numero; o texto alternativo vazio ("/ ''") evita que o leitor de tela leia o número de novo
   (a lista <ol> já dá a ordem). Navegador sem essa sintaxe fica com a 1ª linha. */
.fl-passo h3::before {
  content: attr(data-numero);
  content: attr(data-numero) / '';
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--fl-acido);
  color: var(--fl-acido-texto);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: 1.375rem;
}

.fl-passo p {
  margin: 0;
  color: var(--fl-texto-2);
}

.fl-passo .fl-figura img {
  box-shadow: none;
  border-color: var(--fl-borda);
}

/* ============ O que você treina ============ */
.fl-grupos {
  display: grid;
  gap: var(--fl-e6);
  margin-top: var(--fl-e6);
}

@media (min-width: 900px) {
  .fl-grupos {
    grid-template-columns: 1fr 1.6fr;
    align-items: start;
  }
}

.fl-grupos h3 {
  display: flex;
  align-items: center;
  gap: var(--fl-e3);
}

.fl-conta {
  font-family: var(--fl-fonte-texto);
  font-weight: 600;
  font-size: var(--fl-t-legenda);
  letter-spacing: 0.04em;
  color: var(--fl-texto-3);
}

.fl-modelos {
  display: grid;
  gap: var(--fl-e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .fl-grupos > div:last-child .fl-modelos {
    grid-template-columns: 1fr 1fr;
  }
}

.fl-modelos li {
  padding: var(--fl-e3) var(--fl-e4);
  background: var(--fl-preto);
  border: var(--fl-linha) solid var(--fl-borda);
  color: var(--fl-texto-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.fl-modelos strong {
  display: block;
  margin-bottom: 2px;
  color: var(--fl-texto);
  font-family: var(--fl-fonte-titulo);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ============ Cartões (perfis, planos) ============ */
.fl-cartoes {
  display: grid;
  gap: var(--fl-e4);
  margin: var(--fl-e6) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .fl-cartoes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .fl-cartoes--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fl-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--fl-e3);
  padding: var(--fl-e5);
  background: var(--fl-grafite);
  border: var(--fl-linha) solid var(--fl-borda);
}

.fl-secao--alt .fl-cartao {
  background: var(--fl-preto);
}

.fl-cartao h3 {
  margin: 0;
}

.fl-cartao p {
  margin: 0;
  color: var(--fl-texto-2);
}

.fl-cartao .fl-botao {
  margin-top: auto;
  font-size: 1.125rem;
}

.fl-cartao__icone {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--fl-acido);
  color: var(--fl-acido-texto);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: 1.25rem;
}

/* ============ Quem criou e segurança ============ */
.fl-quem {
  max-width: 62ch;
}

.fl-quem p {
  color: var(--fl-texto-2);
}

.fl-selos-seguranca {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fl-e2);
  margin: var(--fl-e5) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .fl-selos-seguranca {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fl-selo-seguranca {
  display: flex;
  align-items: flex-start;
  gap: var(--fl-e2);
  padding: var(--fl-e3);
  border: var(--fl-linha) solid var(--fl-borda-forte);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.fl-selo-seguranca::before {
  content: '✓';
  flex: none;
  color: var(--fl-acido);
  font-weight: 800;
}

/* ============ Plano Fundador ============ */
.fl-planos {
  display: grid;
  gap: var(--fl-e4);
  margin: var(--fl-e6) 0 var(--fl-e5);
}

@media (min-width: 720px) {
  .fl-planos {
    grid-template-columns: 1fr 1fr;
  }
}

.fl-plano {
  border-color: var(--fl-borda-forte);
}

.fl-plano__para {
  color: var(--fl-texto-3);
  font-weight: 600;
}

.fl-plano__preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--fl-e2);
  margin: var(--fl-e2) 0 0;
}

.fl-plano__valor {
  color: var(--fl-acido);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: clamp(3rem, 2.6rem + 2vw, 4rem);
  line-height: 0.9;
}

.fl-cartao .fl-plano__mes {
  color: var(--fl-texto);
  font-weight: 600;
}

.fl-cartao .fl-plano__ancora {
  color: var(--fl-texto-3);
  font-size: 0.9375rem;
}

/* Aviso de quem volta do checkout do Mercado Pago (lista.js, ?fundador=retorno): no topo, antes do herói. */
.fl-retorno {
  margin: var(--fl-e4) 0 0;
  padding: var(--fl-e4);
  border: var(--fl-linha) solid var(--fl-acido);
  background: var(--fl-grafite);
  color: var(--fl-texto);
  font-weight: 600;
}

/* Garantia de 7 dias em destaque próprio, logo abaixo dos dois cartões de preço. */
.fl-garantia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fl-e3);
  margin: 0 0 var(--fl-e5);
  padding: var(--fl-e4);
  border: var(--fl-linha) solid var(--fl-acido);
  color: var(--fl-texto);
  font-weight: 600;
  font-size: 1.0625rem;
}

.fl-lista-check {
  display: grid;
  gap: var(--fl-e2);
  margin: 0 0 var(--fl-e5);
  padding: 0;
  list-style: none;
}

.fl-lista-check li {
  position: relative;
  padding-left: 1.6em;
  color: var(--fl-texto-2);
}

.fl-lista-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--fl-acido);
  font-weight: 800;
}

.fl-fundador__acao {
  display: grid;
  gap: var(--fl-e3);
  max-width: 420px;
}

.fl-parceira {
  margin-top: var(--fl-e7);
  padding: var(--fl-e5);
  border: var(--fl-linha) solid var(--fl-borda);
  border-left: 6px solid var(--fl-acido);
}

.fl-parceira p {
  color: var(--fl-texto-2);
}

/* ============ Formulário (esqueleto; as etapas são montadas pelo lista.js) ============ */
.fl-painel {
  margin-top: var(--fl-e5);
}

.fl-form {
  margin: 0;
}

.fl-indicacao {
  margin: 0 0 var(--fl-e4);
  padding: var(--fl-e3) var(--fl-e4);
  border: var(--fl-linha) solid var(--fl-acido);
  color: var(--fl-texto);
}

.fl-etapas {
  display: grid;
  gap: var(--fl-e5);
  padding: var(--fl-e5) var(--fl-e4);
  background: var(--fl-grafite);
  border: var(--fl-linha) solid var(--fl-borda-forte);
}

@media (min-width: 720px) {
  .fl-etapas {
    padding: var(--fl-e6);
  }
}

.fl-etapa,
.fl-grupo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fl-etapa {
  display: grid;
  gap: var(--fl-e5);
}

.fl-etapa__titulo {
  padding: 0;
  margin: 0 0 var(--fl-e2);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.fl-etapa__apoio {
  margin: 0;
  color: var(--fl-texto-3);
  font-size: 0.9375rem;
}

.fl-grupo legend {
  padding: 0;
  margin-bottom: var(--fl-e2);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* Barra de progresso + "X de 5" (o texto fica num aria-live polite, no lista.js). */
.fl-progresso {
  display: grid;
  gap: 6px;
}

.fl-progresso__texto {
  margin: 0;
  color: var(--fl-texto-3);
  font-size: var(--fl-t-legenda);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fl-progresso__barra {
  height: 6px;
  background: var(--fl-trilho);
  overflow: hidden;
}

.fl-progresso__preenchido {
  display: block;
  width: 0;
  height: 100%;
  background: var(--fl-acido);
  transition: width var(--fl-rapido) ease-out;
}

.fl-progresso[data-passo='1'] .fl-progresso__preenchido {
  width: 20%;
}
.fl-progresso[data-passo='2'] .fl-progresso__preenchido {
  width: 40%;
}
.fl-progresso[data-passo='3'] .fl-progresso__preenchido {
  width: 60%;
}
.fl-progresso[data-passo='4'] .fl-progresso__preenchido {
  width: 80%;
}
.fl-progresso[data-passo='5'] .fl-progresso__preenchido {
  width: 100%;
}

/* Opção grande (etapa 1): rádio de verdade, escondido dentro do rótulo; o quadrado da direita marca a escolha sem
   depender só da cor (WCAG 1.4.1). */
.fl-opcoes {
  display: grid;
  gap: var(--fl-e2);
}

.fl-opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--fl-alvo);
  padding: var(--fl-e3) calc(var(--fl-e4) + 32px) var(--fl-e3) var(--fl-e4);
  background: var(--fl-preto);
  border: var(--fl-linha) solid var(--fl-borda);
  cursor: pointer;
  transition: border-color var(--fl-rapido) ease-out;
}

.fl-opcao input,
.fl-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.fl-opcao::after {
  content: '';
  position: absolute;
  right: var(--fl-e4);
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: var(--fl-linha) solid var(--fl-borda);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.875rem;
  line-height: 1;
}

.fl-opcao__titulo {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
}

.fl-opcao__apoio {
  color: var(--fl-texto-3);
  font-size: 0.875rem;
  line-height: 1.35;
}

.fl-opcao:hover {
  border-color: var(--fl-texto-3);
}

.fl-opcao:has(input:checked) {
  border-color: var(--fl-acido);
  box-shadow: inset 0 0 0 1px var(--fl-acido);
}

.fl-opcao:has(input:checked)::after {
  content: '✓';
  content: '✓' / ''; /* o ✓ é só visual: o leitor de tela já diz "marcado" (sem isso o nome vira "✓ Futsal") */
  background: var(--fl-acido);
  border-color: var(--fl-acido);
  color: var(--fl-acido-texto);
}

.fl-opcao:has(input:focus-visible),
.fl-chip:has(input:focus-visible) {
  outline: 3px solid var(--fl-acido);
  outline-offset: 3px;
}

.fl-opcao:has(input:disabled),
.fl-chip:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.fl-opcao:has([aria-invalid='true']),
.fl-chip:has([aria-invalid='true']) {
  border-color: var(--fl-erro);
}

/* Chip: checkbox/rádio pequeno; marcado = fundo ácido + ✓ (a marca não depende só da cor). */
.fl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-e2);
}

.fl-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--fl-alvo);
  padding: var(--fl-e2) var(--fl-e4);
  background: var(--fl-preto);
  border: var(--fl-linha) solid var(--fl-borda);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color var(--fl-rapido) ease-out,
    background-color var(--fl-rapido) ease-out;
}

.fl-chip:hover {
  border-color: var(--fl-texto-3);
}

.fl-chip:has(input:checked) {
  background: var(--fl-acido);
  border-color: var(--fl-acido);
  color: var(--fl-acido-texto);
}

.fl-chip:has(input:checked)::before {
  content: '✓';
  content: '✓' / ''; /* o ✓ é só visual: o leitor de tela já diz "marcado" (sem isso o nome vira "✓ Futsal") */
  font-weight: 800;
}

.fl-chip__nota {
  font-weight: 400;
  font-size: var(--fl-t-legenda);
  opacity: 0.85;
}

/* Campo de texto, número e select: rótulo sempre visível, erro embaixo. 16 px mínimo evita o zoom do iPhone. */
.fl-campo {
  display: grid;
  gap: 6px;
}

.fl-campo label,
.fl-campo__rotulo {
  font-weight: 600;
  font-size: 0.9375rem;
}

.fl-campo input,
.fl-campo select,
.fl-campo textarea {
  width: 100%;
  min-height: var(--fl-alvo);
  padding: 10px 12px;
  background: var(--fl-preto);
  color: var(--fl-texto);
  border: var(--fl-linha) solid var(--fl-borda);
  border-radius: var(--fl-raio);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--fl-rapido) ease-out;
}

.fl-campo input::placeholder {
  color: var(--fl-texto-3);
}

.fl-campo input:hover,
.fl-campo select:hover {
  border-color: var(--fl-texto-3);
}

.fl-campo input:focus-visible,
.fl-campo select:focus-visible,
.fl-campo textarea:focus-visible {
  border-color: var(--fl-acido);
  outline: 3px solid var(--fl-acido);
  outline-offset: 3px;
}

.fl-campo input:disabled,
.fl-campo select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fl-campo [aria-invalid='true'] {
  border-color: var(--fl-erro);
}

/* Seta do select feita com gradientes (nada de imagem externa). */
.fl-campo select {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fl-texto) 50%),
    linear-gradient(135deg, var(--fl-texto) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.fl-campo__dica {
  margin: 0;
  color: var(--fl-texto-3);
  font-size: var(--fl-t-legenda);
}

.fl-campo__opcional {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--fl-trilho);
  color: var(--fl-texto-2);
  font-weight: 500;
  font-size: 0.75rem;
  vertical-align: middle;
}

.fl-linha-2 {
  display: grid;
  gap: var(--fl-e4);
}

@media (min-width: 560px) {
  .fl-linha-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Caixa de consentimento e de "meu responsável sabe": nunca pré-marcada (regra do desenho). */
.fl-check {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: var(--fl-e2) var(--fl-e3);
  padding: var(--fl-e3) 0;
}

.fl-check input {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--fl-acido);
  cursor: pointer;
}

.fl-check label {
  cursor: pointer;
  font-size: 0.9375rem;
}

.fl-check .fl-erro,
.fl-check .fl-campo__dica {
  grid-column: 2;
}

.fl-check [aria-invalid='true'] {
  outline: 2px solid var(--fl-erro);
  outline-offset: 2px;
}

/* Mensagens: erro diz o que houve + como resolver (texto é a pista, não só a cor). */
.fl-erro {
  margin: 0;
  color: var(--fl-erro);
  font-weight: 600;
  font-size: 0.875rem;
}

.fl-erro:empty,
.fl-status:empty {
  display: none;
}

.fl-erro--geral {
  padding: var(--fl-e3) var(--fl-e4);
  border: var(--fl-linha) solid var(--fl-erro);
}

.fl-status {
  margin: 0;
  color: var(--fl-texto-2);
  font-size: 0.9375rem;
}

.fl-ok {
  color: var(--fl-ok);
}

/* Voltar / Continuar / Pular: "Pular" tem o mesmo tamanho de "Continuar" (nada de esconder a saída). */
.fl-navegacao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-e3);
  margin-top: var(--fl-e2);
}

.fl-navegacao .fl-botao {
  flex: 1 1 140px;
}

/* Depois do envio: confirmação e (conforme o perfil) a oferta do Fundador. */
.fl-confirmacao,
.fl-oferta {
  display: grid;
  gap: var(--fl-e4);
  margin-top: var(--fl-e5);
  padding: var(--fl-e5) var(--fl-e4);
  background: var(--fl-grafite);
  border: var(--fl-linha) solid var(--fl-borda-forte);
}

.fl-confirmacao[hidden],
.fl-oferta[hidden] {
  display: none;
}

.fl-oferta h3,
.fl-confirmacao h3 {
  margin: 0;
}

.fl-oferta p,
.fl-confirmacao p {
  margin: 0;
  color: var(--fl-texto-2);
}

.fl-oferta__planos {
  display: grid;
  gap: var(--fl-e3);
}

@media (min-width: 560px) {
  .fl-oferta__planos {
    grid-template-columns: 1fr 1fr;
  }
}

/* Cada plano da oferta: nome, preço por mês, âncora riscada e o botão embaixo (o botão estica na coluna). */
.fl-oferta__plano {
  display: grid;
  gap: var(--fl-e2);
  align-content: start;
  padding: var(--fl-e4);
  border: var(--fl-linha) solid var(--fl-borda);
}

.fl-oferta__plano .fl-botao {
  margin-top: var(--fl-e2);
}

.fl-oferta .fl-oferta__nome {
  color: var(--fl-texto);
}

.fl-oferta .fl-plano__mes {
  color: var(--fl-texto);
  font-weight: 600;
}

.fl-oferta .fl-plano__ancora {
  color: var(--fl-texto-3);
  font-size: 0.9375rem;
}

/* "R$" e o número juntos: a 390 px o "297" descia sozinho para a linha de baixo no botão. */
.fl-sem-quebra {
  white-space: nowrap;
}

.fl-oferta__termos {
  font-size: 0.875rem;
}

/* Atletas da casa (etapa 2 do responsável): cada atleta num quadro, para "Atleta 1" e "Atleta 2" não se misturarem. */
.fl-atleta {
  display: grid;
  gap: var(--fl-e4);
  padding: var(--fl-e4);
  border: var(--fl-linha) solid var(--fl-borda);
}

.fl-atleta > legend {
  padding: 0 var(--fl-e2);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
}

/* "O que acontece agora" na confirmação: 3 linhas numeradas, sem o recuo largo padrão da lista. */
.fl-confirmacao ol {
  display: grid;
  gap: var(--fl-e2);
  margin: 0;
  padding-left: 1.4em;
  color: var(--fl-texto-2);
}

.fl-confirmacao h4 {
  margin: var(--fl-e2) 0 0;
}

/* Depois de escolher o plano, os botões e a lista somem (atributo hidden): as classes acima têm display próprio. */
.fl-oferta [hidden],
.fl-confirmacao [hidden] {
  display: none;
}

/* ============ FAQ (acordeão) ============ */
.fl-faq {
  margin-top: var(--fl-e5);
  border-top: var(--fl-linha) solid var(--fl-borda);
}

.fl-faq details {
  border-bottom: var(--fl-linha) solid var(--fl-borda);
}

.fl-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fl-e4);
  min-height: 56px;
  padding: var(--fl-e3) 0;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}

.fl-faq summary::-webkit-details-marker {
  display: none;
}

.fl-faq summary::after {
  content: '+';
  flex: none;
  width: 32px;
  color: var(--fl-acido);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  text-align: center;
}

.fl-faq details[open] summary::after {
  content: '–';
}

.fl-faq details > div {
  padding: 0 0 var(--fl-e4);
  color: var(--fl-texto-2);
}

.fl-faq details > div p:last-child {
  margin-bottom: 0;
}

/* ============ Rodapé ============ */
.rodape {
  padding: var(--fl-e7) 0 var(--fl-e8);
  border-top: var(--fl-linha) solid var(--fl-borda);
  color: var(--fl-texto-3);
  font-size: 0.9375rem;
}

.rodape a {
  color: var(--fl-texto-2);
}

.rodape__marca {
  color: var(--fl-texto);
  font-family: var(--fl-fonte-titulo);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.links-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--fl-e4);
  margin: var(--fl-e3) 0;
  padding: 0;
  list-style: none;
}

.links-linha a {
  display: inline-flex;
  align-items: center;
  min-height: var(--fl-alvo);
}

/* ============ Documentos legais (termos, privacidade, segurança) ============ */
.rascunho {
  background: var(--fl-acido);
  color: var(--fl-acido-texto);
  padding: var(--fl-e3) 0;
  font-weight: 700;
}

.rascunho p {
  margin: 0 auto;
}

.doc {
  padding: var(--fl-e6) 0 var(--fl-e8);
}

.doc h1 {
  font-size: clamp(2.25rem, 1.8rem + 2.5vw, 3.5rem);
}

.doc h2 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  margin-top: 1.6em;
  padding-top: 0.5em;
  border-top: var(--fl-linha) solid var(--fl-borda);
}

.doc h3 {
  margin-top: 1.4em;
  font-family: var(--fl-fonte-texto);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  text-transform: none;
}

.doc ul,
.doc ol {
  padding-left: 1.3em;
}

.doc li {
  margin-bottom: 0.45em;
}

.doc__meta {
  color: var(--fl-texto-3);
}

.doc__resumo {
  margin: var(--fl-e5) 0;
  padding: var(--fl-e4) var(--fl-e5);
  background: var(--fl-grafite);
  border-left: 6px solid var(--fl-acido);
}

.doc__resumo h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.doc__resumo ul {
  margin: 0;
}

.doc__indice {
  font-size: 0.98rem;
}

.doc table {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: var(--fl-e3) 0 var(--fl-e5);
  border-collapse: collapse;
  font-size: 0.95rem;
}

.doc th,
.doc td {
  min-width: 9rem;
  padding: 10px 12px;
  border: 1px solid var(--fl-borda);
  text-align: left;
  vertical-align: top;
}

.doc th {
  background: var(--fl-grafite);
}

.decidir {
  padding: 0 4px;
  background: var(--fl-acido);
  color: var(--fl-acido-texto);
  font-weight: 600;
}

.crianca {
  margin: var(--fl-e4) 0;
  padding: var(--fl-e4) var(--fl-e5);
  border: var(--fl-linha) dashed var(--fl-acido);
}

.crianca p:last-child {
  margin-bottom: 0;
}

/* ============ Movimento reduzido: a faixa para e as transições somem ============ */
@media (prefers-reduced-motion: reduce) {
  .fl-faixa__trilho {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Acesso recorrente separado da inscrição na lista. */
.topo__linha{justify-content:space-between;gap:16px}.topo__entrar{color:var(--fl-acido);font-weight:600;font-size:14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--fl-borda)}.topo__entrar:focus-visible{outline:2px solid var(--fl-acido);outline-offset:4px}@media(max-width:480px){.topo__entrar{font-size:12px;padding:8px}.topo .marca{font-size:20px}}

/* chutelabs — produto em primeiro plano, preto + cítrico. Formulário mantém seus contratos. */
:root { --fl-acido:#e3f000; --fl-preto:#080a09; --fl-grafite:#121613; --fl-borda:#323a32; --fl-caixa:1280px; --fl-sombra:none; --fl-sombra-pressionado:none; }
.topo { border-bottom:1px solid #ffffff18; }
.topo__linha { min-height:82px; }
.marca,.rodape__marca { text-transform:none; font-family:var(--fl-fonte-texto); font-weight:600; letter-spacing:-.07em; font-size:32px; }
.topo__entrar { border:0; color:var(--fl-texto); }
.fl-botao { min-height:56px; border-radius:4px; box-shadow:none; text-transform:none; letter-spacing:0; font-family:var(--fl-fonte-texto); font-size:17px; }
.fl-botao:hover { background:#f0ff28; box-shadow:none; transform:translateY(-2px); }
.fl-botao--secundario { border:1px solid #566151; }
.fl-botao--secundario:hover { background:#232b20; }
.cl-eyebrow { color:var(--fl-acido); font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; margin:0 0 20px; }
.fl-heroi { position:relative; padding-bottom:0; background:radial-gradient(ellipse at 80% 45%,#b6c6000e,transparent 60%); }
.fl-heroi__grade { padding-top:40px; padding-bottom:54px; gap:32px; }
.fl-heroi__texto { position:relative; z-index:1; }
.fl-heroi__texto>.fl-selo { background:transparent; padding:0; color:var(--fl-texto-3); text-transform:none; font:500 12px/1.5 var(--fl-fonte-texto); letter-spacing:0; margin-bottom:20px; }
.fl-heroi h1 { font-size:clamp(3.8rem,6.4vw,6.8rem); letter-spacing:-.025em; line-height:.91; max-width:9ch; margin-bottom:28px; }
.fl-marca { color:var(--fl-acido); background:none; text-shadow:none; padding:0; }
.fl-heroi__sub { font-size:clamp(18px,1.6vw,22px); max-width:34ch; color:#f0f2ee; margin-bottom:12px; }
.cl-hero-beneficio { color:var(--fl-texto-3); font-size:16px; max-width:36ch; margin:0 0 24px; }
.fl-numeros { font-family:var(--fl-fonte-texto); font-size:11px; font-weight:500; letter-spacing:.05em; gap:10px; margin-bottom:24px; }
.fl-numeros li { border:1px solid #424b35; padding:6px 10px; color:#d5dbc9; }
.fl-heroi__nota { max-width:38ch; font-size:12px; line-height:1.7; }
.fl-heroi__grade>.fl-figura { order:0; }
.fl-heroi__arte { position:relative; }
.fl-heroi__arte img { border:0; box-shadow:none; aspect-ratio:5/6; object-position:78% center; border-radius:6px; }
.fl-heroi__arte figcaption { font-size:10px; color:#a6ad9c; }
.fl-faixa { margin:0; padding:9px 0; transform:none; background:#e3f000; font-size:12px; letter-spacing:.15em; }
.fl-faixa__trilho { animation:none; }
.fl-secao { padding-block:64px; }
.fl-secao--alt { background:#111510; border-block:1px solid #ffffff0e; }
h2 { font-size:clamp(2.6rem,4.5vw,4.7rem); line-height:.98; letter-spacing:-.015em; }
h2 span { color:#a4af97; }
.cl-section-head { display:grid; gap:20px; margin-bottom:32px; }
.cl-section-head .fl-intro { margin:0; max-width:42ch; font-size:17px; }
.cl-produto { background:#10140f; }
.cl-tela { margin:0; border:1px solid #525d41; border-radius:8px; overflow:hidden; background:#080a09; box-shadow:0 24px 80px #0005; }
.cl-tela__barra { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 20px; color:#c1c9b9; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.cl-tela__barra span:first-child { color:var(--fl-acido); }
.cl-tela img { display:block; width:100%; height:auto; aspect-ratio:16/10; }
.cl-tela figcaption { padding:14px 20px; border-top:1px solid #ffffff18; font-size:13px; color:#aeb9a2; }
.fl-passos { gap:24px; margin-top:36px; }
.fl-passo { border-top:1px solid #66714b; padding-top:16px; }
.fl-passo h3 { font-family:var(--fl-fonte-texto); font-size:20px; line-height:1.3; text-transform:none; }
.fl-passo h3::before { width:30px; height:30px; border-radius:50%; font:600 13px var(--fl-fonte-texto); }
.fl-passo p { font-size:15px; color:#b0b9a9; }
.cl-detalhes { display:grid; gap:24px; margin-top:48px; }
.cl-detalhe { margin:0; border:1px solid #36402e; border-radius:6px; overflow:hidden; background:#11160f; }
.cl-detalhe img { display:block; width:100%; height:auto; aspect-ratio:16/10; }
.cl-detalhe figcaption { padding:16px; color:#dce3d4; font-size:15px; }
.cl-detalhe figcaption span { display:block; margin-bottom:6px; font-size:10px; color:var(--fl-acido); letter-spacing:.12em; }
.fl-grupos { gap:40px; margin-top:36px; }
.fl-grupos h3 { border-bottom:1px solid #414b35; padding-bottom:18px; }
.fl-modelos li { padding-block:14px; font-size:15px; color:#b6c0ae; }
.fl-modelos strong { color:#f2f5ed; font-size:17px; }
.cl-campeonato { background:var(--fl-acido); color:#0c1006; }
.cl-campeonato .cl-eyebrow { color:#3b461c; }
.cl-campeonato h2 span { color:#43510c; }
.cl-modo { display:grid; gap:32px; align-items:center; }
.cl-modo>div>p:not(.cl-eyebrow) { font-size:17px; max-width:40ch; }
.cl-modo__itens { padding-left:20px; margin-block:24px; font-size:14px; }
.cl-modo__itens li { margin-bottom:8px; }
.cl-campeonato .fl-botao { background:#0b1007; color:#e3f000; border-color:#0b1007; }
.cl-campeonato .fl-botao:focus-visible { outline-color:#0b1007; }
.fl-cartao { border:1px solid #3e4835; box-shadow:none; border-radius:6px; background:#12170f; }
.fl-cartao__icone { color:var(--fl-acido); }
.fl-cartao h3 { font-family:var(--fl-fonte-texto); font-size:21px; text-transform:none; line-height:1.1; }
.fl-cartao p { font-size:15px; }
.fl-cartao .fl-botao { font-size:14px; padding:12px; }
.fl-quem { display:grid; gap:32px; align-items:center; }
.fl-quem .fl-campanha { margin:0; }
.fl-quem .fl-campanha img { border:0; box-shadow:none; border-radius:6px; aspect-ratio:1; object-position:65% center; }
.fl-quem p:not(.cl-eyebrow) { color:#b7c0af; font-size:16px; }
.fl-planos { gap:20px; }
.fl-plano { padding:28px; border-top:3px solid var(--fl-acido); }
.fl-plano__preco { margin-top:24px; }
.fl-plano__valor { font-size:clamp(3.2rem,5vw,5rem); letter-spacing:-.04em; }
.fl-plano__mes { font-size:14px; }
.fl-plano__ancora { color:#a8b29b; }
.fl-garantia { border:1px solid #454f36; border-radius:5px; box-shadow:none; }
.fl-selo-seguranca { background:transparent; border:1px solid #465038; }
.fl-painel { border:1px solid #465038; box-shadow:none; border-radius:8px; }
.fl-faq details { border-bottom:1px solid #363f2f; }
.fl-faq summary { font-family:var(--fl-fonte-texto); font-size:17px; text-transform:none; }
.rodape { border-top:1px solid #343e2b; }
@media(min-width:900px) {
 .fl-heroi__grade { grid-template-columns:1fr 1.05fr; gap:60px; padding-top:56px; padding-bottom:72px; }
 .fl-heroi__arte { align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
 .cl-section-head { grid-template-columns:1.3fr 1fr; align-items:end; gap:60px; }
 .cl-detalhes { grid-template-columns:1fr 1fr; }
 .cl-modo { grid-template-columns:.85fr 1.15fr; gap:64px; }
 .fl-quem { grid-template-columns:1fr 1fr; gap:64px; }
 .fl-secao { padding-block:88px; }
}
@media(max-width:599px) {
 .topo__linha { min-height:66px; }
 .topo .marca { font-size:27px; }
 .topo__entrar { font-size:11px; padding:6px 0; }
 .fl-heroi__grade { padding-top:28px; gap:28px; }
 .fl-heroi h1 { font-size:clamp(3.5rem,14vw,5rem); max-width:none; }
 .fl-heroi__arte img { aspect-ratio:4/3; }
 .cl-eyebrow { margin-bottom:14px; }
 .cl-tela__barra { font-size:9px; padding:10px; }
 .cl-tela figcaption { font-size:12px; padding:10px; }
 .fl-cartoes--4 { grid-template-columns:1fr; }
 .fl-plano { padding:24px; }
}

/* Marca oficial: opção 7, fornecida pelo proprietário. */
.marca .cl-logo,.rodape__marca .cl-logo{display:block;width:200px;height:50px;object-fit:contain;mix-blend-mode:lighten}
.rodape__marca .cl-logo{width:240px;height:60px}
@media(max-width:480px){.marca .cl-logo{width:155px;height:39px}}