/* A página de vendas do PébaFoot. Estádio à noite: verde de gramado nos
   botões, dourado só na oferta de fundador, as linhas de cal do campo como
   único enfeite. */

@font-face {
  font-family: 'Inter';
  src: url('fontes/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --noite: #08160f;
  --noite-2: #0e2118;
  --gramado: #1fb85a;
  --gramado-escuro: #178a44;
  --refletor: #f3f7f1;
  --apoio: #98ae9f;
  --cal: rgba(232, 239, 233, .16);
  --ouro: #e6b53c;
  --largura: 1120px;
  --lado: max(20px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Quem navega com Tab no celular não fica com o foco atrás do botão fixo. */
@media (max-width: 899px) { html { scroll-padding-bottom: 96px; } }
body {
  margin: 0;
  background: var(--noite);
  color: var(--refletor);
  font: 400 1.0625rem/1.55 Inter, 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 850; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.08; }
h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; }
p { margin: 0; }

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

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  background: var(--gramado); color: #04130a;
  font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 10px 30px -10px rgba(31, 184, 90, .7), inset 0 -3px 0 rgba(0, 0, 0, .18);
  transition: transform .12s ease, background-color .12s ease;
}
.botao:hover { background: #29c865; }
.botao:active { transform: translateY(1px); }
.botao.secundario { background: transparent; color: var(--refletor); box-shadow: inset 0 0 0 2px var(--cal); }
.botao.secundario:hover { box-shadow: inset 0 0 0 2px var(--refletor); background: transparent; }

/* ---------- faixa do fundador ---------- */
.faixa-fundador {
  display: block; padding: 10px var(--lado);
  background: var(--ouro); color: #2a1d00;
  font-size: .9375rem; line-height: 1.35; text-align: center; text-decoration: none;
}
.faixa-fundador b { font-weight: 850; }
.faixa-fundador:hover span { text-decoration: underline; }

/* ---------- abertura ---------- */
#abertura {
  position: relative; overflow: hidden;
  display: grid; gap: 40px;
  padding: 28px var(--lado) 56px;
  /* O estádio escurecido, com a luz dos refletores vindo de cima. */
  background:
    radial-gradient(60% 45% at 85% -5%, rgba(243, 247, 241, .22), transparent 70%),
    linear-gradient(180deg, rgba(8, 22, 15, .72) 0%, rgba(8, 22, 15, .9) 55%, var(--noite) 100%),
    url('img/estadio.webp') center top / cover no-repeat;
}
/* O círculo central do campo, em cal, atrás de tudo. */
#abertura::before {
  content: ''; position: absolute; z-index: 0;
  width: 560px; height: 560px; right: -200px; top: 160px;
  border: 2px solid var(--cal); border-radius: 50%;
  pointer-events: none;
}
#abertura::after {
  content: ''; position: absolute; z-index: 0;
  left: 0; right: 0; top: 440px; border-top: 2px solid var(--cal);
  pointer-events: none;
}
#abertura > * { position: relative; z-index: 1; }

.marca { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 28px; }
.marca img { border-radius: 8px; }
.marca strong { font-weight: 850; font-size: 1.125rem; letter-spacing: -.02em; }
.marca span { flex-basis: 100%; color: var(--apoio); font-size: .875rem; }

h1 {
  font-size: clamp(2.125rem, 9.4vw, 4.5rem);
  line-height: 1.02; font-weight: 900; letter-spacing: -.035em;
  max-width: 13ch;
}
.apoio { margin: 18px 0 26px; max-width: 34ch; color: #cfdcd2; font-size: 1.125rem; }
.miudo { margin-top: 12px; color: var(--apoio); font-size: .9375rem; }

.abertura-visual { position: relative; justify-self: center; width: 100%; max-width: 620px; }

/* O placar da liga entre amigos, por cima do celular: o minuto corre e sai o
   gol aos 37'. É o único movimento da página. */
.placar-vivo {
  position: absolute; left: -6%; bottom: 3%;
  display: grid; grid-template-columns: auto auto auto auto; align-items: center; gap: 2px 10px;
  padding: 12px 16px;
  background: rgba(8, 22, 15, .94); border: 1px solid rgba(243, 247, 241, .14);
  border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
  font-size: .9375rem; white-space: nowrap;
}
.placar-vivo .vivo {
  grid-column: 1 / -1; color: #ff5a4f; font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.placar-vivo .vivo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pisca 1.2s infinite; }
.placar-vivo .lado { font-weight: 700; }
.placar-vivo .gols { font-weight: 900; font-size: 1.375rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.placar-vivo .gols b { display: inline-block; }
.placar-vivo .min { color: var(--gramado); font-weight: 800; font-variant-numeric: tabular-nums; }
.placar-vivo.gol .gols b:first-child { color: var(--gramado); animation: gol .6s ease; }
@keyframes pisca { 50% { opacity: .25; } }
@keyframes gol { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* ---------- a tela do jogo: no computador e, na frente, no celular ---------- */
/* A janela ocupa a largura; o celular fica sobreposto no canto de baixo, e o
   padding-bottom (em % da largura) reserva a parte dele que passa da janela. */
.dupla { position: relative; padding-bottom: 22%; }
.janela {
  margin: 0; padding-top: 22px; position: relative;
  background: #020805; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(243, 247, 241, .14), 0 40px 80px -30px rgba(0, 0, 0, .9);
}
/* Os três botões da barra da janela. */
.janela::before {
  content: ''; position: absolute; top: 8px; left: 10px; width: 7px; height: 7px; border-radius: 50%;
  background: #ff5f57; box-shadow: 12px 0 0 #febc2e, 24px 0 0 #28c840;
}
.janela img { width: 100%; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top left; }
.celular {
  margin: 0; padding: 5px;
  position: absolute; right: -2%; bottom: 0; width: 29%;
  background: #020805; border-radius: 22px; transform: rotate(3deg);
  box-shadow: 0 0 0 1.5px rgba(243, 247, 241, .2), 0 30px 60px -20px rgba(0, 0, 0, .95);
}
.celular img { border-radius: 17px; width: 100%; aspect-ratio: 585 / 1266; object-fit: cover; object-position: top; }

/* ---------- seções ---------- */
/* A seção ocupa a largura toda (o fundo de estádio vai de ponta a ponta) e o
   conteúdo fica na coluna de --largura, pelo padding dos lados. */
main > section:not(#abertura) {
  padding: 72px max(var(--lado), calc((100% - var(--largura)) / 2));
}

/* ---------- estádio de fundo, em seções intercaladas ---------- */
/* A mesma foto (Unsplash, img/CREDITOS.txt) em recortes diferentes. Escurecida
   para o texto seguir legível, e com as bordas sumindo na cor da página para
   não ficar uma faixa com corte seco. */
#como, #planos, #final {
  background:
    linear-gradient(180deg, var(--noite) 0%, rgba(8, 22, 15, .78) 22%, rgba(8, 22, 15, .78) 78%, var(--noite) 100%),
    var(--foto) center / cover no-repeat;
}
#como { --foto: url('img/estadio-teto.webp'); }
#planos { --foto: url('img/estadio-arquibancada.webp'); }
#final { --foto: url('img/estadio-gramado.webp'); }
/* main > section:not(#abertura) pesa mais que #final: o respiro extra da
   chamada final precisa da mesma força. */
main > section#final { padding-block: 120px 140px; }
main > section > h2 { margin-bottom: 36px; max-width: 20ch; }

/* como funciona */
.como-grade { display: grid; gap: 40px; }
.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: grid; gap: 26px; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; }
.passos li::before {
  content: counter(passo); grid-row: span 2;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--gramado); color: var(--gramado);
  font-weight: 900; font-size: 1.25rem;
}
.passos p { color: var(--apoio); margin-top: 4px; }

.chat {
  align-self: start;
  background: var(--noite-2); border: 1px solid rgba(243, 247, 241, .08); border-radius: 22px;
  padding: 18px; display: grid; gap: 10px; max-width: 420px;
}
.chat-topo { font-weight: 800; display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(243, 247, 241, .08); }
.chat-topo span { color: var(--apoio); font-weight: 500; font-size: .875rem; }
.msg { justify-self: start; max-width: 85%; background: #183226; padding: 8px 14px 10px; border-radius: 4px 16px 16px 16px; }
.msg b { display: block; font-size: .8125rem; color: var(--ouro); font-weight: 700; }
.msg:nth-of-type(3) b { color: #7fb8ff; }
.msg.minha { justify-self: end; background: #12703a; border-radius: 16px 4px 16px 16px; }
.msg.minha b { color: #d9ffe6; }

/* o que você faz no jogo */
.recurso { display: grid; gap: 28px; align-items: center; margin-bottom: 64px; }
.recurso:last-child { margin-bottom: 0; }
.recurso p { color: var(--apoio); margin-top: 10px; max-width: 38ch; font-size: 1.125rem; }
.recurso h3 { font-size: clamp(1.5rem, 4.4vw, 2rem); }

/* planos */
.planos { display: grid; gap: 20px; }
.plano {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px 24px; border-radius: 22px;
  background: var(--noite-2); border: 1px solid rgba(243, 247, 241, .08);
}
.plano .preco { font-size: 2.75rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.plano .preco small { display: block; margin-top: 8px; font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--apoio); }
.plano ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.plano li { padding-left: 28px; position: relative; }
.plano li::before {
  content: ''; position: absolute; left: 2px; top: .45em;
  width: 12px; height: 7px; border: solid var(--gramado); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}
.plano .botao { align-self: stretch; }
.fundador .plano.vitalicio { border: 2px solid var(--ouro); box-shadow: 0 30px 70px -40px rgba(230, 181, 60, .55); }
.fundador .plano.vitalicio h3 { color: var(--ouro); }
.plano .bonus { color: var(--ouro); font-weight: 700; }
.plano .bonus::before { border-color: var(--ouro); }
.plano .prazo { color: var(--apoio); font-size: .9375rem; }

/* perguntas */
#perguntas > * { max-width: 800px; margin-inline: auto; }
details { border-bottom: 1px solid rgba(243, 247, 241, .1); }
summary {
  cursor: pointer; list-style: none;
  padding: 20px 36px 20px 0; position: relative;
  font-weight: 700; font-size: 1.125rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--gramado); transition: transform .15s ease;
}
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { padding: 0 0 20px; color: var(--apoio); max-width: 60ch; }

/* chamada final */
#final { text-align: center; }
#final h2 { margin: 0 auto 28px; max-width: 18ch; }

footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  max-width: var(--largura); margin: 0 auto;
  padding: 28px var(--lado) calc(110px + env(safe-area-inset-bottom));
  color: var(--apoio); font-size: .875rem;
  border-top: 1px solid rgba(243, 247, 241, .08);
}

/* ---------- botão fixo no celular ---------- */
.cta-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 12px var(--lado) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(8, 22, 15, .96) 30%);
  transform: translateY(110%); visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.cta-fixo.mostrar { transform: none; visibility: visible; transition: transform .25s ease; }
.cta-fixo .botao { width: 100%; }

[hidden] { display: none !important; }
/* A oferta pela classe do <html>, que o script do <head> tira depois do
   prazo: sem JavaScript, ou antes de o pagina.js rodar, nada vencido aparece. */
html:not(.fundador) [data-oferta="fundador"], html.fundador [data-oferta="cheio"] { display: none !important; }

/* ---------- celular estreito ---------- */
/* Num 360×640 com a barra do navegador sobram uns 560 px: o botão principal
   ainda tem de caber sem rolar. */
@media (max-width: 480px) {
  .faixa-fundador { padding: 8px 14px; font-size: .8125rem; }
  #abertura { padding-top: 20px; }
  .marca { margin-bottom: 18px; }
  .marca span { font-size: .8125rem; }
  .apoio { margin: 14px 0 20px; font-size: 1.0625rem; }
}

/* ---------- telas maiores ---------- */
@media (min-width: 900px) {
  #abertura {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; column-gap: 56px;
    padding: 40px max(var(--lado), calc((100vw - var(--largura)) / 2)) 96px;
    min-height: 88vh;
  }
  #abertura::before { width: 760px; height: 760px; right: -180px; top: 50%; transform: translateY(-50%); }
  #abertura::after { display: none; }
  .abertura-visual { justify-self: end; }
  .placar-vivo { left: -6%; bottom: 6%; font-size: 1.0625rem; padding: 14px 20px; }
  .apoio { font-size: 1.25rem; }

  .como-grade { grid-template-columns: 1fr 1fr; align-items: center; }
  .chat { justify-self: end; width: 100%; }

  .recurso { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; }
  #jogo .recurso:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  #jogo .recurso:nth-of-type(even) .dupla { order: 2; }

  .planos { grid-template-columns: 1fr 1.15fr; align-items: stretch; }
  .plano { padding: 36px; }

  /* No computador o botão fixo sobra: a tela é grande e o topo está perto. */
  .cta-fixo { display: none; }
  footer { padding-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}