/*
 * Site de vendas do CYS Soccer (/app).
 *
 * Direcao: a PRANCHETA TATICA. O elemento memoravel e o campo com as 11
 * camisas; o resto da pagina fica quieto. Cores so da marca (tokens.css do
 * app): gramado #0B4D2E, cal #F2F4F1, tinta do escudo #0A1F14 e o ouro
 * #E8B93B reservado a "conquista" — aqui, so o botao de pedir apresentacao.
 * Uma familia so (Archivo variavel): a largura faz o papel de segunda fonte —
 * estreita e pesada como numero de camisa nos titulos, normal no texto.
 */

@font-face {
  font-family: 'Archivo';
  src: url('/app/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --gramado: #0B4D2E;
  --gramado-faixa: #0E5634;
  --gramado-fundo: #08251A;
  --cal: #F2F4F1;
  --cal-linha: #EEF3EA;
  --branco: #FFFFFF;
  --tinta: #0A1F14;
  --tinta-2: #3A4F43;
  --fio: #CBD6CE;
  --acao: #16693F;
  --ouro: #E8B93B;
  --ouro-escuro: #D4A52C;
  --erro: #B42318;

  --estreita: 68%;
  --condensada: 78%;

  --gutter: clamp(16px, 4vw, 48px);
  --largura: 1240px;
  --raio: 10px;
  /* Recuo das secoes de fundo cheio: o texto cai na MESMA coluna das secoes
     de caixa central (largura maxima + gutter). */
  --recuo: max(var(--gutter), calc((100% - var(--largura)) / 2 + var(--gutter)));
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
/* `form { display: grid }` e cia. venciam o [hidden] do navegador: o formulario
   continuava na tela depois do envio. O atributo tem de ganhar sempre. */
[hidden] { display: none !important; }
a { color: var(--acao); text-underline-offset: 3px; }
a:hover { color: var(--gramado); }

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.05; }
p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 10px 16px; background: var(--tinta); color: var(--branco);
  border-radius: 6px; text-decoration: none;
}
.pular:focus { top: 12px; }

/* ---------------------------------------------------------------- Botoes */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: 1rem; font-stretch: 90%;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.botao-ouro { background: var(--ouro); color: var(--tinta); }
.botao-ouro:hover { background: var(--ouro-escuro); color: var(--tinta); }
.botao-linha { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.botao-linha:hover { background: var(--tinta); color: var(--cal); }
.botao-pequeno { min-height: 40px; padding: 8px 16px; font-size: .9375rem; }
.botao-largo { width: 100%; }
.botao[disabled] { opacity: .6; cursor: progress; }

/* ----------------------------------------------------------------- Topo */
.topo {
  max-width: var(--largura); margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--tinta); text-decoration: none;
  font-weight: 800; font-stretch: var(--condensada); font-size: 1.375rem; letter-spacing: -.01em;
}
.topo-links { display: flex; align-items: center; gap: 22px; }
.topo-links a:not(.botao) { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.topo-links a:not(.botao):hover { text-decoration: underline; }
@media (max-width: 760px) {
  .topo-links a[href="#fluxo"], .topo-links a[href="#perguntas"] { display: none; }
  .topo-links { gap: 14px; }
}
@media (max-width: 400px) {
  .marca span { display: none; }
}

/* ============================================================ Abertura */
.abertura {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(8px, 2.6vh, 40px) var(--gutter) clamp(56px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.abertura h1 {
  /* largura E altura: em notebook baixo (768px) a jogada tem de caber sem rolar */
  font-size: clamp(2.375rem, min(4.6vw, 7.4vh), 4.375rem);
  font-stretch: var(--estreita);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.012em;
  max-width: 18ch;
}
.abertura-sub {
  margin-top: clamp(12px, 2.2vh, 20px);
  max-width: 34em;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--tinta-2);
}
.abertura-acoes { margin-top: clamp(16px, 3vh, 28px); display: flex; flex-wrap: wrap; gap: 12px; }

/* A jogada: o cartao que responde a camisa escolhida. */
.jogada {
  margin-top: clamp(18px, 3.4vh, 40px);
  padding-top: clamp(14px, 2.4vh, 24px);
  border-top: 2px solid var(--tinta);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  max-width: 40em;
}
.jogada-numero {
  font-size: clamp(4rem, min(9vw, 13vh), 7.5rem);
  font-weight: 900;
  font-stretch: var(--estreita);
  line-height: .78;
  min-width: 1.1ch;
  color: transparent;
  -webkit-text-stroke: 2px var(--gramado);
  font-variant-numeric: tabular-nums;
}
.jogada-posicao { font-size: .9375rem; color: var(--tinta-2); }
.jogada-titulo {
  margin-top: 6px;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-stretch: var(--condensada);
}
.jogada-texto { margin-top: 10px; }
.jogada-fatos { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.jogada-fatos li { position: relative; padding-left: 20px; font-weight: 600; font-size: .9375rem; }
.jogada-fatos li::before {
  content: ''; position: absolute; left: 2px; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--acao);
}
.jogada.trocou .jogada-corpo, .jogada.trocou .jogada-numero { animation: entra .28s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ Prancheta */
.prancheta {
  margin: 0;
  position: relative;
  padding: 26px 16px 16px;
  background: #1B1F1C;
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 24px 48px -24px rgba(10,31,20,.55);
}
.prancheta-clipe {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 30px;
  background: linear-gradient(#C9CFCB, #9AA39D);
  border-radius: 8px 8px 12px 12px;
  box-shadow: 0 2px 0 #6E7771, 0 6px 10px rgba(0,0,0,.25);
}
.prancheta-clipe::after {
  content: ''; position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  width: 30%; height: 8px; border-radius: 6px; background: #6E7771;
}
.campo {
  position: relative;
  aspect-ratio: 68 / 105;
  border-radius: 10px;
  overflow: hidden;
  /* Faixas de corte do gramado: 10 faixas no comprimento do campo. */
  background: repeating-linear-gradient(
    to bottom,
    var(--gramado) 0 10%,
    var(--gramado-faixa) 10% 20%
  );
}
.campo-linhas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--cal-linha); stroke-width: 3; stroke-linecap: round;
  opacity: .9;
}
.campo-linhas .ponto { fill: var(--cal-linha); stroke: none; }
.prancheta-rodape {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: #C9D3CC; font-size: .875rem;
}

/* O unico momento de movimento que ninguem pediu: a cal desenhando o campo
   e as camisas descendo na prancheta. Uma vez, no carregamento. */
.anima .campo-linhas > :not(.ponto) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cal 1.1s cubic-bezier(.6,.1,.3,1) forwards;
}
.anima .campo-linhas .ponto { opacity: 0; animation: surge .3s ease-out .9s forwards; }
@keyframes cal { to { stroke-dashoffset: 0; } }
@keyframes surge { to { opacity: 1; } }

.pecas { position: absolute; inset: 0; }
.peca {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--cal-linha);
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.peca-ima {
  display: grid; place-items: center;
  width: clamp(38px, 4.2vw, 50px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--branco);
  color: var(--tinta);
  font-weight: 900; font-stretch: var(--estreita);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px rgba(10,31,20,.28), 0 3px 0 #9AA39D, 0 6px 10px rgba(0,0,0,.35);
  transition: transform .18s ease, background-color .18s ease;
}
.peca-nome {
  font-size: clamp(.6875rem, .95vw, .8125rem);
  font-weight: 700; font-stretch: var(--condensada);
  line-height: 1.1;
  white-space: nowrap;
  padding: 1px 6px 2px;
  border-radius: 4px;
  background: rgba(8, 37, 26, .82);
}
.peca:hover .peca-ima { transform: translateY(-2px); }
.peca[aria-pressed="true"] .peca-ima {
  background: var(--ouro);
  box-shadow: 0 0 0 3px var(--tinta), 0 3px 0 #9C7A1D, 0 8px 14px rgba(0,0,0,.4);
  transform: scale(1.12);
}
.peca:focus-visible { outline: none; }
.peca:focus-visible .peca-ima { outline: 3px solid var(--ouro); outline-offset: 4px; }

.anima .peca { opacity: 0; animation: desce .35s cubic-bezier(.2,.8,.3,1.2) forwards; animation-delay: calc(1s + var(--i) * 45ms); }
@keyframes desce {
  from { opacity: 0; transform: translate(-50%, -80%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .anima .campo-linhas > *, .anima .peca, .jogada.trocou .jogada-corpo, .jogada.trocou .jogada-numero {
    animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important;
  }
  .peca-ima { transition: none; }
}

@media (max-width: 900px) {
  .abertura { grid-template-columns: minmax(0, 1fr); }
  .abertura-texto { display: contents; }
  .abertura h1 { order: 1; max-width: none; font-size: clamp(2.75rem, 11vw, 4.5rem); }
  .abertura-sub { order: 2; margin-top: 0; }
  .abertura-acoes { order: 3; margin-top: 0; }
  .abertura-acoes .botao { flex: 1 1 auto; }
  .prancheta { order: 4; width: min(100%, 460px); margin: 24px auto 0; }
  .jogada { order: 5; margin-top: 8px; }
}

.operacoes h2, .fluxo h2, .categorias h2, .celular h2, .apresentacao h2, .perguntas h2, .planos h2, .cartoes h2, .vitrine h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-stretch: var(--estreita); font-weight: 900; line-height: .98;
}

/* ============================================================ Operacoes */
.operacoes { padding: clamp(56px, 8vw, 104px) var(--recuo); background: var(--cal); }
.operacoes-cabeca { max-width: 40em; margin-bottom: 32px; }
.operacoes-cabeca p { margin-top: 14px; color: var(--tinta-2); }
.operacoes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.operacao { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--branco); border: 1px solid var(--fio); border-radius: var(--raio); }
.operacao h3 { margin: 0; }
.operacao p { margin: 0; color: var(--tinta-2); }
.operacao .operacao-regra { font-size: .9375rem; font-weight: 600; color: var(--tinta); margin-top: auto; }
.operacao-icone { width: 44px; height: 44px; color: var(--acao); }
.operacao-destaque { background: var(--gramado); border-color: var(--gramado); color: var(--cal); }
.operacao-destaque p, .operacao-destaque .operacao-regra { color: var(--cal-linha); }
.operacao-destaque .operacao-icone { color: var(--ouro); }
@media (max-width: 900px) { .operacoes-lista { grid-template-columns: 1fr; } }

/* ================================================================= Fluxo */
.fluxo { padding: clamp(56px, 8vw, 104px) var(--recuo); background: var(--gramado-fundo); color: var(--cal); }
.fluxo-cabeca { max-width: 44em; }
.fluxo-cabeca p { margin-top: 14px; color: #C9D8CE; }
.fluxo-cabeca strong { color: var(--cal); }
.fluxo-lista {
  list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 16px;
  counter-reset: passo;
}
.fluxo-lista li {
  position: relative; counter-increment: passo;
  font-size: 1.25rem; font-weight: 700; font-stretch: var(--condensada);
  transition: opacity .4s ease;
}
.fluxo-lista li::before {
  content: counter(passo, decimal-leading-zero);
  display: block; margin-bottom: 4px;
  font-size: 2rem; font-weight: 900; font-stretch: var(--estreita); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cal-linha); transition: color .4s ease;
}
.fluxo-lista li:not(:nth-child(5n))::after {
  content: ''; position: absolute; top: 1rem; left: 3.2rem; right: -10px;
  border-top: 2px dashed var(--cal-linha); opacity: .45;
}
.fluxo-lista.animar li:not(.aceso) { opacity: .4; }
.fluxo-lista.animar li:not(.aceso)::before { color: rgba(238,243,234,.35); }
.fluxo-lista li.aceso::before { color: var(--ouro); }
@media (max-width: 700px) {
  .fluxo-lista { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .fluxo-lista li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: 12px; }
  .fluxo-lista li::before { margin-bottom: 0; }
  .fluxo-lista li:not(:nth-child(5n))::after { display: none; }
  .fluxo-lista li:not(:last-child)::after {
    display: block; content: ''; position: absolute; top: 2.2rem; left: 1rem; right: auto; height: 22px;
    border-top: 0; border-left: 2px dashed var(--cal-linha); opacity: .45;
  }
}
@media (prefers-reduced-motion: reduce) { .fluxo-lista li, .fluxo-lista li::before { transition: none; } }

/* ============================================================ Categorias */
.categorias { max-width: var(--largura); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gutter); }
.categorias-lista {
  list-style: none; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.categorias-lista li { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--branco); border: 1px solid var(--fio); border-radius: var(--raio); }
.categorias-lista h3 { margin: 0; }
.categorias-lista p { margin: 0; color: var(--tinta-2); font-size: .9688rem; }
.categoria-icone { width: 36px; height: 36px; color: var(--acao); }

/* ================================================= O sistema por dentro */
/* Telas reais do sistema (tema escuro), num palco escuro de borda a borda,
   como o dos planos. Abas trocam a tela; sem JS, as quatro aparecem em fila. */
.vitrine {
  color: var(--cal);
  padding: clamp(64px, 9vw, 120px) var(--recuo);
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(127,224,164,.10), transparent 70%),
    var(--gramado-fundo);
}
.vitrine-cabeca { max-width: 40rem; }
.vitrine-cabeca h2 { line-height: 1.1; letter-spacing: -.01em; }
.vitrine-cabeca p:not(.sobretitulo) { margin-top: 12px; color: #C9D8CE; line-height: 1.6; }
.vitrine-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.vitrine-abas [role="tab"] {
  min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid rgba(238,243,234,.22);
  background: transparent; color: #C9D8CE;
  font: inherit; font-weight: 700; cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out, transform .2s ease-out;
}
.vitrine-abas [role="tab"]:hover { border-color: rgba(238,243,234,.55); color: var(--cal); transform: translateY(-1px); }
.vitrine-abas [role="tab"][aria-selected="true"] { background: var(--ouro); border-color: var(--ouro); color: var(--tinta); }
.vitrine-abas [role="tab"]:focus-visible,
.vitrine-tela:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.vitrine-palco { margin-top: 32px; display: grid; gap: 48px; }
.vitrine-tela { margin: 0; border-radius: 18px; }
.vitrine-tela[hidden] { display: none; }
.vitrine-tela.entrou { animation: vitrine-entra .3s ease-out both; }
@keyframes vitrine-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vitrine-tela img { display: block; width: 100%; height: auto; }
.vitrine-tela figcaption {
  margin: 24px auto 0; max-width: 46rem;
  text-align: center; color: #C9D8CE; line-height: 1.6;
}

/* Moldura de navegador: barra discreta e sombra em camadas (luz ambiente). */
.moldura-navegador {
  overflow: hidden; border-radius: 16px;
  background: #0B120E;
  border: 1px solid rgba(238,243,234,.14);
  box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 48px 96px -40px rgba(0,0,0,.75), 0 0 0 6px rgba(238,243,234,.03);
}
.moldura-barra {
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 14px;
  background: #0F1D16; border-bottom: 1px solid rgba(238,243,234,.08);
}
.moldura-pontos { display: flex; gap: 6px; flex: 0 0 auto; }
.moldura-pontos i { width: 10px; height: 10px; border-radius: 50%; background: rgba(238,243,234,.22); }
.moldura-url {
  margin-inline: auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 14px; border-radius: 999px;
  background: #0B120E; color: #9FB3A6; font-size: .75rem;
}

@media (max-width: 640px) {
  .vitrine-abas [role="tab"] { padding: 0 14px; font-size: .9375rem; }
  .moldura-barra { height: 30px; }
  .moldura-pontos i { width: 8px; height: 8px; }
  .moldura-navegador { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vitrine-tela.entrou { animation: none; }
  .vitrine-abas [role="tab"], .vitrine-abas [role="tab"]:hover { transition: none; transform: none; }
}

/* =============================================================== Celular */
.celular {
  max-width: var(--largura); margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 9vw, 112px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.celular-texto > p { margin-top: 14px; color: var(--tinta-2); max-width: 32em; }
.celular-fatos { margin: 28px 0 0; display: grid; gap: 0; }
.celular-fatos div { padding: 16px 0; border-top: 1px solid var(--fio); display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; }
.celular-fatos dt { font-weight: 800; font-stretch: var(--condensada); font-size: 1.125rem; }
.celular-fatos dd { margin: 0; color: var(--tinta-2); }

.telefone {
  justify-self: center;
  width: min(100%, 320px);
  padding: 14px;
  border-radius: 40px;
  background: var(--tinta);
  box-shadow: 0 30px 60px -30px rgba(10,31,20,.6);
}
/* O print REAL da chamada dentro de um aparelho desenhado em CSS: corpo com
   aro metalico sutil, botoes laterais, visor com cantos de celular, ilha da
   camera e barra de status. A tela e o app de verdade (1170x2532). */
.telefone-real {
  position: relative;
  width: min(100%, 300px);
  padding: 11px;
  border-radius: 52px;
  background: linear-gradient(150deg, #3A4640 0%, #121A16 22%, #0B120E 60%, #26302B 100%);
  box-shadow:
    inset 0 0 0 1px rgba(238,243,234,.16),
    inset 0 0 0 6px #070C09,
    0 2px 4px rgba(0,0,0,.3),
    0 40px 80px -30px rgba(0,0,0,.75),
    0 20px 40px -24px rgba(8,37,26,.6);
}
/* Botoes: liga/desliga a direita, volume a esquerda. */
.telefone-real::before, .telefone-real::after {
  content: ''; position: absolute; width: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #2C3631, #4A5650);
}
.telefone-real::before { right: -3px; top: 150px; height: 74px; }
.telefone-real::after { left: -3px; top: 118px; height: 112px; }
.telefone-visor {
  position: relative; overflow: hidden;
  border-radius: 42px;
  background: #101613;
}
.telefone-status {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; padding: 4px 22px 0 28px;
  color: #F2F4F1; background: #101613;
  font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.telefone-ilha {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  width: 86px; height: 25px; border-radius: 999px; background: #000;
}
.telefone-icones { display: inline-flex; align-items: center; gap: 5px; }
.telefone-icones svg { fill: currentColor; display: block; }
.telefone-real img { display: block; width: 100%; height: auto; }
/* A secao do celular nasceu colada na anterior (sem respiro no topo), porque
   continuava o fundo claro das categorias. Depois do palco escuro da vitrine,
   ela ganha o mesmo respiro que ja tem embaixo. */
.vitrine + .celular { padding-top: clamp(64px, 9vw, 112px); }
/* Area segura de baixo, com o traco de "home": e ela que o canto arredondado
   do visor corta, e nao as pontas do menu inferior do app. */
.telefone-home { position: relative; display: block; height: 26px; background: #151B18; }
.telefone-home::after {
  content: ''; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 38%; height: 5px; border-radius: 999px; background: rgba(242,244,241,.85);
}

@media (max-width: 860px) {
  .celular { grid-template-columns: minmax(0, 1fr); }
  .celular-fatos div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .telefone-tela { min-height: 0; }
}

/* ========================================================== Apresentacao */
.apresentacao {
  background: var(--branco);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
  padding: clamp(64px, 9vw, 112px) var(--recuo);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px);
}
.apresentacao-texto > p { margin-top: 14px; color: var(--tinta-2); }
.passos { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 0; }
.passos li {
  counter-increment: passo;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--fio);
}
.passos li::before {
  content: counter(passo);
  font-weight: 900; font-stretch: var(--estreita); font-size: 1.625rem; line-height: 1;
  color: var(--acao);
}

.formulario-caixa { width: 100%; }
form { display: grid; gap: 18px; }
.campo-form { display: grid; gap: 6px; min-width: 0; }
.linha-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.linha-dupla .campo-uf { max-width: 140px; }
.linha-dupla:has(.campo-uf) { grid-template-columns: minmax(0, 1fr) 120px; }
label, legend { font-weight: 700; font-size: .9375rem; }
.opcional { font-weight: 400; color: var(--tinta-2); }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid #AAB8AE;
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta);
  font: inherit; font-size: 1rem;
}
textarea { resize: vertical; min-height: 96px; }
input::placeholder, textarea::placeholder { color: #6B7D71; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--acao); outline-offset: 1px; border-color: var(--acao); }
[aria-invalid="true"] { border-color: var(--erro); }
.erro { color: var(--erro); font-size: .875rem; font-weight: 600; }
.erro-geral { padding: 12px 14px; border-radius: var(--raio); background: #FDECEA; }

fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: 8px; }
.faixas-opcoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.faixas-opcoes label { position: relative; font-weight: 600; }
.faixas-opcoes input { position: absolute; opacity: 0; inset: 0; min-height: 0; cursor: pointer; }
.faixas-opcoes span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 8px;
  border: 1.5px solid #AAB8AE; border-radius: var(--raio);
  font-size: .9375rem; cursor: pointer;
}
.faixas-opcoes input:checked + span { background: var(--gramado); border-color: var(--gramado); color: var(--branco); }
.faixas-opcoes input:focus-visible + span { outline: 3px solid var(--acao); outline-offset: 2px; }
.faixas[aria-invalid="true"] .faixas-opcoes span { border-color: var(--erro); }
@media (max-width: 520px) {
  .faixas-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha-dupla, .linha-dupla:has(.campo-uf) { grid-template-columns: minmax(0, 1fr); }
  .linha-dupla .campo-uf { max-width: none; }
}

.caixa { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-weight: 400; }
.caixa input { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; accent-color: var(--gramado); }

.campo-armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.recebido {
  padding: 32px; border-radius: 16px;
  background: var(--gramado); color: var(--cal);
}
.recebido:focus { outline: none; }
.recebido h3 { font-size: 2rem; font-stretch: var(--estreita); font-weight: 900; }
.recebido p { margin-top: 12px; }
.recebido-nota { color: #C9D8CE; }
.recebido a { color: var(--ouro); }

@media (max-width: 900px) {
  .apresentacao { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================= Perguntas */
.perguntas {
  max-width: 880px; margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) var(--gutter);
}
.perguntas-lista { margin-top: 32px; border-top: 2px solid var(--tinta); }
details { border-bottom: 1px solid var(--fio); }
summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0;
  font-weight: 800; font-stretch: var(--condensada); font-size: 1.25rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ''; flex: none; width: 14px; height: 14px;
  border-right: 2.5px solid var(--tinta); border-bottom: 2.5px solid var(--tinta);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease;
}
details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
details p { padding: 0 0 22px; color: var(--tinta-2); max-width: 44em; }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }

/* ================================================================ Rodape */
.rodape {
  /* Fundo mais claro (gramado) e fio no topo: nao se funde com a chamada final. */
  background: var(--gramado); color: #E1EBE3; border-top: 1px solid rgba(238,243,234,.35);
  padding: 48px var(--recuo) calc(40px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;
}
.rodape-marca { display: flex; align-items: center; gap: 14px; }
.rodape-marca strong { color: var(--cal); font-stretch: var(--condensada); font-size: 1.25rem; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 20px; }
.rodape-links a { color: var(--cal); font-weight: 600; }
.rodape-links a:hover { color: var(--ouro); }
.rodape-aviso {
  grid-column: 1 / -1; max-width: 62rem;
  font-size: .8125rem; line-height: 1.6; color: #C9D8CE;
}
.rodape-copia { grid-column: 1 / -1; font-size: .875rem; border-top: 1px solid rgba(238,243,234,.15); padding-top: 20px; }
.rodape :focus-visible { outline-color: var(--ouro); }
@media (max-width: 640px) { .rodape { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
 * MOVIMENTO (segunda leva). Cada animacao diz uma coisa do futebol:
 * o passe entre camisas, a placa de LED do estadio, o placar que acende,
 * a chamada feita sozinha, o gol no envio.
 * `prefers-reduced-motion` desliga tudo no bloco do fim do arquivo.
 * ===================================================================== */

/* ---- Titulo: as palavras sobem uma a uma, uma vez, no carregamento. */
.palavra { display: inline-block; }
.entrando .palavra {
  opacity: 0;
  transform: translateY(.45em);
  animation: sobe .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--p) * 55ms);
}
@keyframes sobe { to { opacity: 1; transform: none; } }

/* ---- Prancheta que inclina com o mouse (objeto fisico na mesa). */
.prancheta {
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
}

/* ---- O passe: seta de giz + bola. */
.campo-giz { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#seta-giz {
  fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round;
  stroke-dasharray: 9 9; opacity: 0;
  transition: opacity .5s ease;
}
#seta-giz.visivel { opacity: .85; }
.bola {
  position: absolute; left: 50%; top: 50%;
  width: clamp(16px, 1.9vw, 22px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.45));
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 2;
}
.bola.em-campo { opacity: 1; }
.bola svg { width: 100%; height: 100%; display: block; }

.pausa {
  min-height: 36px; padding: 6px 14px;
  border: 1.5px solid rgba(238,243,234,.45); border-radius: 999px;
  background: transparent; color: var(--cal);
  font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.pausa:hover { border-color: var(--cal); }
.pausa:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }

/* ---- Placa de LED do estadio. */
.placa-led {
  position: relative;
  overflow: hidden;
  background: #0B120E;
  border-block: 3px solid #1B1F1C;
  padding: 16px 0;
}
.placa-led::after {
  /* a grade de pontos que faz o texto parecer LED */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at center, transparent 0 1.1px, rgba(11,18,14,.55) 1.3px);
  background-size: 4px 4px;
}
.placa-led-trilho {
  display: flex; width: max-content;
  animation: led 38s linear infinite;
}
.placa-led:hover .placa-led-trilho { animation-play-state: paused; }
.placa-led-trilho span {
  display: inline-flex; align-items: center; gap: 28px;
  padding-right: 28px;
  font-weight: 900; font-stretch: var(--estreita);
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1;
  color: var(--ouro);
  text-shadow: 0 0 12px rgba(232,185,59,.45);
  white-space: nowrap;
}
.placa-led-trilho span:nth-child(even) { color: #7FE0A4; text-shadow: 0 0 12px rgba(127,224,164,.4); }
.placa-led-trilho span::after {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: currentColor; opacity: .7;
}
@keyframes led { to { transform: translateX(-50%); } }

/* ---- Foto do treino, tela cheia, com profundidade na rolagem. */
.foto {
  position: relative;
  min-height: clamp(420px, 78vh, 760px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: var(--cal);
  isolation: isolate;
}
.foto-quadro { position: absolute; inset: -12% 0; z-index: -2; }
.foto-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  transform: translate3d(0, var(--desloca, 0px), 0) scale(1.04);
  will-change: transform;
}
/* Escuro de proposito: as fotos desta secao tem ceu claro no alto e, medido no
   pior caso (foto branca atras do canto do titulo), o gradiente antigo dava
   3,2:1 no titulo. O verificador (tools/e2e/site-fotos-e2e.mjs) le estes
   valores do CSS computado e exige 4,5:1 no titulo e no texto. */
.foto::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(8,37,26,.95) 0%, rgba(8,37,26,.72) 40%, rgba(8,37,26,0) 76%),
    linear-gradient(to right, rgba(8,37,26,.84) 0%, rgba(8,37,26,.58) 40%, rgba(8,37,26,0) 70%);
}
.foto-texto { padding: 0 var(--recuo) clamp(40px, 7vw, 88px); }
.foto h2 {
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  font-stretch: var(--estreita); font-weight: 900; line-height: .95;
  max-width: 14ch;
}
.foto-texto p { margin-top: 16px; max-width: 34em; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: #DCE7E0; }

/* ---- Celular sobre o gramado dos cones. */
.celular-palco {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(28px, 4vw, 56px) 16px;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
}
.palco-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.celular-palco::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(8,37,26,.25), rgba(8,37,26,.7));
}

/* ---- Gol: a bola entra e a rede estufa. */
.gol { display: block; width: min(100%, 240px); margin: 0 0 12px -8px; }
.gol-bola { transform: translate(104px, 58px); }
.gol-rede { transform-box: fill-box; transform-origin: 50% 0; }
.comemora .gol-bola { animation: chute .75s cubic-bezier(.3,.6,.3,1) both; }
.comemora .gol-rede { animation: estufa .5s ease-out .6s both; }
@keyframes chute {
  0% { transform: translate(-20px, 84px) rotate(0deg); }
  60% { transform: translate(92px, 40px) rotate(420deg); }
  100% { transform: translate(104px, 58px) rotate(520deg); }
}
@keyframes estufa {
  0% { transform: scale(1, 1); }
  40% { transform: scale(1.04, 1.1); }
  100% { transform: scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .entrando .palavra { animation: none; opacity: 1; transform: none; }
  .prancheta { transform: none; }
  .placa-led-trilho { animation: none; }
  .foto-img { transform: scale(1.04); }
  .comemora .gol-bola, .comemora .gol-rede { animation: none; }
  .bola { transition: none; }
}

/* =====================================================================
 * PLANOS E TESTE GRATIS (terceira leva). O teste de 7 dias aparece no
 * selo da abertura, na barra do celular e no formulario; os planos sao
 * medidos em quadras, e o medidor acende o cartao que cabe. A quebra de
 * objecao vira "cartao vermelho" — o arbitro expulsa a taxa escondida.
 * ===================================================================== */

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sobretitulo {
  margin-bottom: 12px;
  font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ouro);
}
.sobretitulo-escuro { color: var(--acao); }

/* ---- Selo do teste na abertura: placa pequena com o ponto aceso, na mesma
   linha dos botoes. Em cima do titulo ele empurrava a jogada 49px para
   fora de 1280x720. */
.selo-teste {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: center;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: #0B120E; color: var(--ouro);
  font-size: .875rem; font-weight: 800; font-stretch: var(--condensada); letter-spacing: .02em;
}
.selo-teste-ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: #7FE0A4; box-shadow: 0 0 0 0 rgba(127,224,164,.6);
  animation: pulsa 2s ease-out infinite;
}
@keyframes pulsa {
  0% { box-shadow: 0 0 0 0 rgba(127,224,164,.6); }
  70% { box-shadow: 0 0 0 8px rgba(127,224,164,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,224,164,0); }
}

@media (max-width: 900px) {
  .abertura-acoes .selo-teste { flex: 0 0 auto; }
}
@media (max-width: 420px) {
  .topo-links a[href="#planos"] { display: none; }
}

/* ================================================================ Planos */
.planos {
  position: relative;
  color: var(--cal);
  padding: clamp(64px, 9vw, 120px) var(--recuo);
  background:
    radial-gradient(ellipse 60% 40% at 12% -8%, rgba(238,243,234,.10), transparent 70%),
    radial-gradient(ellipse 60% 40% at 88% -8%, rgba(238,243,234,.10), transparent 70%),
    var(--gramado-fundo);
}
.planos-cabeca {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px); align-items: end;
}
.planos h2 { max-width: 15ch; }
.planos-sub { margin-top: 14px; max-width: 32em; color: #C9D8CE; }

/* ---- O medidor: quantas quadras -> qual plano. */
.medidor {
  padding: 22px;
  border-radius: 18px;
  background: #0B120E;
  border: 1px solid rgba(238,243,234,.12);
}
.medidor-pergunta { display: block; color: var(--cal); font-size: 1rem; }
.medidor-leitura { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.medidor-numero {
  min-width: 1.2ch;
  font-size: clamp(3.25rem, 5.6vw, 4.5rem); font-weight: 900; font-stretch: var(--estreita);
  line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--ouro); text-shadow: 0 0 16px rgba(232,185,59,.45);
}
.medidor-unidade { font-size: 1.125rem; font-weight: 700; color: #C9D8CE; }
.medidor-controle {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  margin-top: 6px;
}
.medidor-passo {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgba(238,243,234,.4); background: transparent;
  color: var(--cal); font: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.medidor-passo:hover { border-color: var(--cal); }
.medidor-passo:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }

/* A trilha e uma linha de cal que o ouro vai preenchendo; o polegar e a bola,
   e ela rola conforme anda (--giro vem do JS). */
.medidor input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent;
  cursor: pointer;
  --cheio: 14.3%;
}
.medidor input[type="range"]:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; border-radius: 8px; }
.medidor input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 8px;
  background: linear-gradient(to right, var(--ouro) 0 var(--cheio), rgba(238,243,234,.18) var(--cheio) 100%);
}
.medidor input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: rgba(238,243,234,.18); }
.medidor input[type="range"]::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--ouro); }
.medidor input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; margin-top: -12px;
  border: 0; border-radius: 50%;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff' stroke='%230A1F14' stroke-width='1.4'/%3E%3Cpolygon points='12,7.2 15.6,9.8 14.2,14 9.8,14 8.4,9.8' fill='%230A1F14'/%3E%3Cpath d='M12 7.2V2.4M15.6 9.8l4.4-1.5M14.2 14l2.7 3.9M9.8 14l-2.7 3.9M8.4 9.8L4 8.3' stroke='%230A1F14' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
  transform: rotate(var(--giro, 0deg));
  transition: transform .25s ease-out;
}
.medidor input[type="range"]::-moz-range-thumb {
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff' stroke='%230A1F14' stroke-width='1.4'/%3E%3Cpolygon points='12,7.2 15.6,9.8 14.2,14 9.8,14 8.4,9.8' fill='%230A1F14'/%3E%3Cpath d='M12 7.2V2.4M15.6 9.8l4.4-1.5M14.2 14l2.7 3.9M9.8 14l-2.7 3.9M8.4 9.8L4 8.3' stroke='%230A1F14' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
  transform: rotate(var(--giro, 0deg));
}

.medidor-zonas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin-top: 10px;
}
.medidor-zonas span {
  padding: 5px 4px; border-radius: 999px;
  border: 1px solid rgba(238,243,234,.2);
  text-align: center; font-size: .75rem; font-weight: 700; font-stretch: var(--condensada);
  color: #9FB3A6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.medidor-zonas span.ativa { background: var(--ouro); border-color: var(--ouro); color: var(--tinta); }
.medidor-resumo { margin-top: 14px; color: #C9D8CE; font-size: .9375rem; }
.medidor-resumo strong { color: var(--cal); }

/* ---- Os cartoes de preco. */
.planos-lista {
  margin-top: clamp(40px, 6vw, 64px);
  padding-block: 16px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; align-items: stretch;
}
.plano {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 22px 22px;
  border-radius: 18px;
  background: #0F1D16;
  border: 1px solid rgba(238,243,234,.12);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.plano-nome { font-size: 1.5rem; font-stretch: var(--condensada); font-weight: 800; }
.plano-capacidade { color: #C9D8CE; }
.plano-capacidade strong { color: var(--cal); font-size: 1.125rem; }

/* O preco no painel de LED do estadio. */
.plano-led {
  position: relative; overflow: hidden;
  display: flex; align-items: baseline; flex-wrap: wrap;
  min-height: 84px; padding: 14px;
  border-radius: 10px;
  background: #0B120E;
  color: var(--ouro);
  text-shadow: 0 0 14px rgba(232,185,59,.4);
}
.plano-led::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at center, transparent 0 .8px, rgba(11,18,14,.28) 1px);
  background-size: 3px 3px;
}
.plano-led .moeda { align-self: flex-start; margin: 6px 4px 0 0; font-size: 1rem; font-weight: 800; }
.plano-led .inteiro {
  font-size: clamp(2.75rem, 3.8vw, 3.5rem); font-weight: 900; font-stretch: var(--estreita);
  line-height: .9; font-variant-numeric: tabular-nums;
}
.plano-led .centavos { font-size: 1.375rem; font-weight: 900; font-stretch: var(--estreita); }
.plano-led .periodo { margin-left: 6px; font-size: .9375rem; font-weight: 600; color: #C9D8CE; text-shadow: none; }
.plano-preco-consulta .plano-led { align-items: center; }
.plano-preco-consulta .plano-led .inteiro { font-size: clamp(1.75rem, 2.5vw, 2.125rem); }

.plano-para { color: #C9D8CE; font-size: .9688rem; flex: 1 1 auto; }
.plano .botao { margin-top: 4px; }
.botao-clara { border-color: rgba(238,243,234,.55); color: var(--cal); background: transparent; }
.botao-clara:hover { background: var(--cal); border-color: var(--cal); color: var(--tinta); }
.planos :focus-visible { outline-color: var(--ouro); }

.plano-indicado {
  background: #12271C;
  border: 2px solid var(--ouro);
  transform: translateY(-12px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 6px rgba(232,185,59,.08);
}
.plano-selo, .plano-casou {
  position: absolute;
  padding: 4px 12px; border-radius: 999px;
  font-size: .75rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.plano-selo { top: -13px; left: 20px; background: var(--ouro); color: var(--tinta); }
/* Embaixo, no meio: em cima ele trombava com o selo do plano indicado. */
.plano-casou {
  bottom: -13px; left: 50%;
  background: #7FE0A4; color: var(--tinta);
  opacity: 0; transform: translate(-50%, -6px);
  transition: opacity .25s ease, transform .25s ease;
}

/* O cartao que cabe no numero de quadras escolhido. */
.plano.casou {
  border-color: #7FE0A4;
  box-shadow: 0 0 0 3px rgba(127,224,164,.22), 0 0 48px -10px rgba(127,224,164,.4);
}
.plano-indicado.casou { border-color: var(--ouro); }
.plano.casou .plano-casou { opacity: 1; transform: translate(-50%, 0); }
.planos-lista.escolheu .plano:not(.casou) { opacity: .72; }
.plano.acendeu .plano-led > span { animation: acende .55s steps(5) both; }
@keyframes acende {
  0% { opacity: .15; } 30% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; }
}

.planos-todos { margin-top: 36px; text-align: center; color: #C9D8CE; }
.planos-todos strong { color: var(--ouro); }

@media (max-width: 1080px) {
  .planos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .plano-indicado { transform: none; }
}
@media (max-width: 860px) {
  .planos-cabeca { grid-template-columns: minmax(0, 1fr); }
}
/* No celular, os cartoes viram uma fileira que desliza; o medidor leva a
   fileira ate o cartao que cabe (so a fileira rola, nunca a pagina). */
@media (max-width: 760px) {
  .planos-lista {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: min(82%, 320px);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 20px var(--gutter) 24px;
    scrollbar-width: thin;
  }
  .plano { scroll-snap-align: start; }
  .planos-todos { text-align: left; }
}

/* ---- Chave Escolinha | Arena e itens dos planos (quarta leva). A chave
   fica sobre o fundo escuro dos planos, entao ela e um trilho claro com a
   aba ativa em verde. Os dois paineis existem no HTML; o JS esconde um. */
/* Alvo dos links #planos-*: colado no topo da secao, fora do recuo, para o
   salto nativo do navegador cair no topo dela e nao 115px abaixo. */
.ancora { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; }
.planos-painel[hidden] { display: none; }
.chave {
  display: inline-flex; margin-top: 20px; padding: 4px;
  border-radius: 999px; background: var(--cal-linha); border: 1px solid var(--fio);
}
.chave [role="tab"] {
  min-height: 44px; min-width: 120px; padding: 0 20px;
  border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-weight: 700; color: var(--tinta-2); cursor: pointer;
}
.chave [role="tab"][aria-selected="true"] { background: var(--gramado); color: var(--cal); }
.chave [role="tab"]:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }
/* ---- "Todos os planos incluem" (2026-10-02). Decisao do dono: nenhuma
   ferramenta e bloqueada por plano; o preco muda so pelo tamanho da operacao.
   Um bloco unico abaixo dos cartoes, na mesma superficie deles (um degrau
   acima do fundo da secao), com os grupos em grade que se reorganiza sozinha. */
.incluso {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(24px, 4vw, 48px);
  border-radius: 24px;
  background: #0F1D16;
  border: 1px solid rgba(238,243,234,.10);
  box-shadow: 0 1px 0 rgba(238,243,234,.04) inset, 0 32px 64px -40px rgba(0,0,0,.6);
}
.incluso-cabeca { max-width: 44rem; }
.incluso-cabeca h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; font-stretch: var(--condensada);
  line-height: 1.15; letter-spacing: -.01em;
}
.incluso-cabeca p { margin-top: 8px; color: #C9D8CE; line-height: 1.6; }
.incluso-grade {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 32px 24px;
}
.incluso-grupo h4 {
  font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ouro);
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(238,243,234,.10);
}
.incluso-itens {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px; font-size: .9375rem; line-height: 1.45; color: #C9D8CE;
}
.incluso-itens li { padding-left: 22px; position: relative; }
.incluso-itens li::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px;
  border-left: 2px solid #7FE0A4; border-bottom: 2px solid #7FE0A4; transform: rotate(-45deg);
}
.incluso .planos-todos {
  margin-top: 32px; padding-top: 24px; text-align: left;
  border-top: 1px solid rgba(238,243,234,.10);
}

/* ================================================== Escolinha + Arena */
.completo {
  padding: clamp(64px, 9vw, 112px) var(--recuo);
  background: var(--gramado); color: var(--cal);
  display: grid; justify-items: center; gap: 32px; text-align: center;
}
.completo-cabeca { max-width: 40em; }
.completo h2 { max-width: 20ch; margin-inline: auto; }
.completo-cabeca p { margin-top: 14px; }
.completo-cabeca .completo-frase { font-weight: 700; }
.completo-soma {
  width: 100%; max-width: var(--largura);
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px; align-items: center;
  text-align: left;
}
.completo-coluna {
  padding: 24px; border-radius: 18px; height: 100%;
  background: rgba(8,37,26,.55); border: 1px solid rgba(238,243,234,.16);
}
.completo-coluna .operacao-icone { color: var(--ouro); }
.completo-coluna h3 { margin: 10px 0 12px; font-size: 1.375rem; font-stretch: var(--condensada); font-weight: 800; }
.completo-coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.completo-mais { font-family: 'Archivo', sans-serif; font-size: 3rem; font-weight: 900; line-height: 1; color: var(--ouro); }
.completo-preco { font-size: .9375rem; opacity: .85; }
@media (max-width: 800px) {
  .completo-soma { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .completo-mais { text-align: center; }
}


/* ======================================================= Cartao vermelho */
.cartoes {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) var(--gutter);
}
.cartoes-cabeca { max-width: 40em; }
.cartoes-cabeca > p:last-child { margin-top: 14px; color: var(--tinta-2); }
.cartoes-lista {
  list-style: none; padding: 0; margin: clamp(36px, 5vw, 56px) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  perspective: 1400px;
}
.cartao { transform: rotate(var(--inclina, 0deg)); transition: transform .3s ease; }
.cartao:nth-child(1) { --inclina: -2.5deg; }
.cartao:nth-child(2) { --inclina: 1.5deg; }
.cartao:nth-child(3) { --inclina: -1deg; }
.cartao:nth-child(4) { --inclina: 2.5deg; }
.cartao:hover { transform: rotate(0deg) translateY(-6px); }
.cartao-giro {
  position: relative; height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--c, 0) * 140ms);
}
.cartoes-lista.aguardando .cartao-giro { transform: rotateY(180deg); }
.cartao-frente, .cartao-verso {
  border-radius: 14px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cartao-frente {
  position: relative; overflow: hidden;
  height: 100%; min-height: 280px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px;
  background: linear-gradient(160deg, #D7263D 0%, #B0172B 100%);
  color: #FFFFFF;
  box-shadow: 0 22px 34px -20px rgba(90,10,20,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.cartao-frente::before {
  /* o brilho do plastico do cartao */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0 28%, transparent 28.5%);
}
.cartao-verso {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  background:
    url('/assets/images/logo-mark.svg') center / 38% no-repeat,
    repeating-linear-gradient(45deg, #13241B 0 10px, #0F1D16 10px 20px);
  box-shadow: 0 22px 34px -20px rgba(10,31,20,.7);
}
.cartao-taxa { font-size: 1.375rem; font-stretch: var(--condensada); font-weight: 800; line-height: 1.12; }
.cartao-sem {
  display: block; margin-bottom: 6px;
  font-size: .8125rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
}
/* O risco em cima da taxa, escuro para a palavra continuar legivel por baixo
   (risco branco em letra branca apagava o texto). Acompanha a quebra de linha. */
.cartao-nome {
  background: linear-gradient(rgba(10,31,20,.82), rgba(10,31,20,.82)) 0 60% / 100% 3px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .5s ease;
  transition-delay: calc(.6s + var(--c, 0) * 140ms);
}
.cartoes-lista.aguardando .cartao-nome { background-size: 0% 3px; }
.cartao-zero {
  margin-top: auto;
  font-size: clamp(2.5rem, 3.6vw, 3.25rem); font-weight: 900; font-stretch: var(--estreita); line-height: 1;
}
.cartao-texto { font-size: .9688rem; line-height: 1.45; color: rgba(255,255,255,.94); }

@media (max-width: 980px) {
  .cartoes-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .cartoes-lista { grid-template-columns: minmax(0, 1fr); }
  .cartao-frente { min-height: 0; }
  .cartao-zero { margin-top: 4px; }
}

/* ========================================== Formulario do teste gratis */
.faixas-opcoes span { flex-direction: column; gap: 2px; line-height: 1.2; }
.faixas-opcoes span small { font-size: .75rem; font-weight: 500; opacity: .8; }
.plano-escolhido {
  margin-top: 24px; padding: 14px 16px;
  border-radius: var(--raio);
  background: #E3EFE6; border: 1px solid #9CC5AC;
  font-weight: 600;
}
.form-nota { margin-top: -8px; text-align: center; font-size: .875rem; color: var(--tinta-2); }

/* ==================================================== Barra do celular */
.barra-teste { display: none; }
@media (max-width: 760px) {
  .barra-teste {
    position: fixed; z-index: 20;
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 18px;
    border-radius: 999px;
    background: #0B120E; color: var(--cal);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    transform: translateY(calc(100% + 24px));
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .barra-teste.visivel { transform: none; }
  .barra-teste p { line-height: 1.2; }
  .barra-teste strong { display: block; color: var(--ouro); font-stretch: var(--condensada); font-size: 1.0625rem; }
  .barra-teste span { font-size: .8125rem; color: #C9D8CE; }
  .barra-teste :focus-visible { outline-color: var(--ouro); }
}

@media (prefers-reduced-motion: reduce) {
  .selo-teste-ponto { animation: none; }
  .medidor input[type="range"]::-webkit-slider-thumb { transition: none; }
  .plano, .plano-casou, .medidor-zonas span, .cartao, .cartao-giro, .cartao-nome, .barra-teste { transition: none; }
  .plano.acendeu .plano-led > span { animation: none; }
  .cartoes-lista.aguardando .cartao-giro { transform: none; }
  .cartoes-lista.aguardando .cartao-nome { background-size: 100% 3px; }
}

/* =====================================================================
 * GALERIA "Esporte e em toda quadra" (quinta leva). Uma foto Pexels por tipo
 * de quadra (society, areia, coberta): prova que o sistema serve a qualquer
 * arena. O selo nomeia o LUGAR; nada sobre as pessoas, porque a licenca
 * Pexels proibe sugerir que quem aparece endossa o produto.
 * ===================================================================== */
.galeria {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) var(--gutter);
}
.galeria-cabeca { max-width: 40em; }
.galeria h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-stretch: var(--estreita); font-weight: 900; line-height: .98;
}
.galeria-cabeca p { margin-top: 14px; color: var(--tinta-2); }
.galeria-lista {
  list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.galeria-lista li { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: var(--gramado-fundo); }
.galeria-lista img {
  /* 4/3 como as fotos originais: cortar em retrato tirava as meninas das
     pontas da foto do time. */
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.galeria-lista li:hover img { transform: scale(1.03); }
/* Fundo OPACO de proposito: por cima de foto, o contraste de um selo
   translucido dependeria do que esta atras (areia clara, ceu). */
.galeria-selo {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--gramado-fundo); color: var(--cal);
  font-size: .875rem; font-weight: 700; letter-spacing: .02em;
}
@media (max-width: 700px) {
  .galeria-lista { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .galeria-lista img { transition: none; }
  .galeria-lista li:hover img { transform: none; }
}

/* No celular so ~1/3 da largura da foto cabe na tela. A jogada da foto da
   arena esta no meio-direita (o camisa 19 indo na bola alta); centralizada, o
   camisa 19 ficava na borda. O arquivo ja vem sem a faixa direita, onde uma
   tenda tinha logo de patrocinador. */
@media (max-width: 700px) {
  .foto-img { object-position: 66% 45%; }
}

/* ===================================== Tipo de operacao e chamada final */
/* O display do autor vence [hidden]: sem esta regra o grupo apareceria. */
.faixas-grupo[hidden] { display: none; }
.operacao-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.operacao-opcoes label { position: relative; font-weight: 600; }
.operacao-opcoes input { position: absolute; opacity: 0; inset: 0; min-height: 0; cursor: pointer; }
.operacao-opcoes span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 8px; line-height: 1.2;
  border: 1.5px solid #AAB8AE; border-radius: var(--raio);
  font-size: .9375rem; cursor: pointer;
}
.operacao-opcoes input:checked + span { background: var(--gramado); border-color: var(--gramado); color: var(--branco); }
.operacao-opcoes input:focus-visible + span { outline: 3px solid var(--acao); outline-offset: 2px; }
.operacao-campo[aria-invalid="true"] .operacao-opcoes span,
.faixas-grupo[aria-invalid="true"] .faixas-opcoes span { border-color: var(--erro); }
@media (max-width: 480px) {
  .operacao-opcoes { grid-template-columns: minmax(0, 1fr); }
}

.chamada-final {
  padding: clamp(64px, 9vw, 112px) var(--recuo);
  background: var(--gramado-fundo); color: var(--cal);
  display: grid; justify-items: center; gap: 16px; text-align: center;
}
.chamada-final h2 { max-width: 22ch; font-size: clamp(1.75rem, 4vw, 2.75rem); font-stretch: var(--estreita); font-weight: 900; line-height: 1.05; }
.chamada-final p { max-width: 36em; color: #C9D8CE; }
.chamada-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.chamada-final .botao-linha { border-color: var(--cal); color: var(--cal); }
.chamada-final .botao-linha:hover { background: var(--cal); color: var(--gramado-fundo); }

/* ============================================================ Movimento */
/* Pedido do dono (2026-10-02): a pagina parecia parada. Cinco efeitos, todos
   desligados com "reduzir movimento" e nenhum escondendo conteudo sem JS:
   revelacao ao rolar, cards que reagem ao mouse, brilho no botao dourado,
   profundidade nas telas do sistema e barra de progresso de leitura. */

/* 1. Revelacao ao rolar. O JS marca .revela SO em quem esta abaixo da dobra
   e acende com .visto quando entra na tela. Usa a propriedade translate (e
   nao transform) para somar ao deslocamento que o elemento ja tenha — o plano
   indicado, por exemplo, segue 12px acima dos outros. */
.revela {
  opacity: 0; translate: 0 22px;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--atraso, 0ms);
}
.revela.visto { opacity: 1; translate: 0 0; }

/* 2. Cards que reagem ao mouse (so ponteiro fino: no toque nao ha hover). */
@media (hover: hover) and (pointer: fine) {
  .categorias-lista li, .plano:not(.plano-indicado), .incluso-grupo, .operacoes-lista > li {
    transition: translate .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out;
  }
  .categorias-lista li:hover { translate: 0 -4px; box-shadow: 0 18px 40px -24px rgba(10,31,20,.35); border-color: #9CC5AC; }
  .plano:not(.plano-indicado):hover { translate: 0 -6px; border-color: rgba(238,243,234,.32); box-shadow: 0 28px 56px -32px rgba(0,0,0,.7); }
  .operacoes-lista > li:hover { translate: 0 -4px; }
}

/* 3. Brilho que atravessa o botao dourado no hover. */
.botao-ouro { position: relative; overflow: hidden; isolation: isolate; }
.botao-ouro::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  translate: -120% 0;
}
.botao-ouro:hover::after { translate: 120% 0; transition: translate .7s ease-out; }

/* 4. Profundidade: a moldura do navegador inclina seguindo o mouse (o JS
   escreve --gira-x/--gira-y) e o celular flutua devagar. */
.vitrine-palco { perspective: 1600px; }
.moldura-navegador {
  transform: rotateX(var(--gira-x, 0deg)) rotateY(var(--gira-y, 0deg));
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease-out;
  will-change: transform;
}
.telefone-real { animation: flutua 6s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* 5. Barra de progresso de leitura, fina e dourada, no topo da janela. */
.progresso-leitura {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ouro), #F4D27A);
  transform-origin: 0 50%; transform: scaleX(var(--progresso, 0));
  pointer-events: none;
}

/* Instagram no rodape. */
.rodape-social { display: inline-flex; align-items: center; gap: 8px; }
.rodape-social svg { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; translate: none; transition: none; }
  .telefone-real { animation: none; }
  .moldura-navegador { transform: none; transition: none; }
  .botao-ouro::after { display: none; }
  .progresso-leitura { display: none; }
}