/* Copa Manager — estilo do SITE institucional (EF Site Institucional v1.1, fase B).

   Carregado so na home, depois do estilo.css: cor, raio e sombra saem TODOS dos
   tokens de la (RN-ST-13) — nenhum hexadecimal novo e escrito aqui, e por isso
   a home nasce funcionando nos temas claro e escuro sem nenhuma regra propria
   de tema. O painel e a pagina publica nao carregam este arquivo. */

/* ---------- estrutura ---------- */
/* O site institucional nao tem a coluna de destinos do painel. O estilo.css
   reserva o lugar dela — 216px a esquerda a partir de 900px, e 124px embaixo no
   celular — e compensa com margem negativa no topo; sem a barra, isso virava
   uma faixa branca vazia na lateral da home (e um vao no rodape). Aqui o espaco
   volta a zero. Vem depois do estilo.css, entao estas linhas e que valem. */
body { padding-left: 0; padding-bottom: 0; }
.topo { margin-left: 0; }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 8px; top: 8px; z-index: 99; background: var(--superficie);
  padding: 10px 14px; border-radius: var(--r-sm); }

.secao { max-width: 1060px; margin: 0 auto; padding: 64px 20px; }
.secao h2 { font-size: 1.9rem; margin: 0 0 .4em; }
.olho { text-transform: uppercase; letter-spacing: .09em; font-size: .76rem;
  font-weight: 700; color: var(--verde-txt); margin: 0 0 .6em; }
.sub { color: var(--texto-fraco); font-size: 1.05rem; max-width: 62ch; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; }
.topo .atalhos { display: flex; gap: 16px; font-size: .9rem; }
.topo .atalhos a { color: var(--sobre-verde); text-decoration: none; }
.topo .atalhos a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 780px) { .topo .atalhos { display: none; } }

/* Botoes que ficam SOBRE a faixa verde (topo e heroi). O verde de fundo da
   marca e escuro nos dois temas — igual a barra do topo do app —, entao aqui o
   branco e fixo de proposito: trocar por var(--superficie) faria o botao ficar
   escuro sobre escuro no tema escuro, que foi exatamente o defeito pego na
   verificacao da fase B. E o mesmo #fff que o estilo.css ja usa em .topo. */
.botao.claro { background: #fff; color: var(--cm-verde); }
.botao.linha { background: transparent; border: 1px solid currentColor; color: #fff; }
.botao.grande { padding: 15px 26px; font-size: 1.05rem; }

/* ---------- heroi ---------- */
.heroi { background: linear-gradient(180deg, var(--cm-verde) 0%, var(--cm-verde-900) 100%); color: #fff; }
.heroi .secao { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px;
  align-items: center; padding-top: 56px; padding-bottom: 56px; }
.heroi h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.02em; margin: 0 0 18px; }
.heroi p { color: var(--sobre-verde); font-size: 1.12rem; max-width: 52ch; }
.heroi .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.heroi .selo { font-size: .86rem; margin-top: 18px; }
@media (max-width: 860px) { .heroi .secao { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- moldura de aparelho (CSS puro, RN-ST-19) ----------
   A moldura e desenhada aqui; dentro dela vai a fotografia do app de verdade,
   capturada por scripts/capturar-telas.mjs em 430x932 (RN-ST-17/19). */
.aparelho { margin: 0; background: var(--cm-verde-900); border-radius: 34px; padding: 10px;
  box-shadow: var(--sombra-alta); width: min(300px, 80vw); justify-self: center; }
.aparelho .tela { display: block; width: 100%; height: auto; border-radius: 26px;
  background: var(--superficie-2); }
.aparelho figcaption { color: var(--sobre-verde); font-size: .8rem; text-align: center;
  padding: 8px 6px 2px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; justify-items: center; }
.duo .aparelho { width: 100%; max-width: 236px; padding: 8px; border-radius: 28px; }
.duo .tela { border-radius: 22px; }
.duo figcaption { font-size: .74rem; }

/* Moldura sozinha no meio de uma secao (a artilharia, na grade de recursos). */
.aparelho.solto { margin: 36px auto 0; }
.aparelho.solto figcaption { max-width: 34ch; margin: 0 auto; }

/* ---------- faixa dos esportes ---------- */
.faixa-esportes { background: var(--superficie); border-block: 1px solid var(--borda); }
.faixa-esportes .secao { padding: 36px 20px; }
.esportes { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; }
.esporte { margin: 0; text-align: center; width: 96px; }
.esporte img { width: 64px; height: 64px; object-fit: contain; }
.esporte figcaption { font-size: .82rem; color: var(--texto-fraco); margin-top: 6px; }

/* ---------- como funciona ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 32px; padding: 0; list-style: none; }
.passo { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sombra); }
.passo .n { display: inline-flex; width: 32px; height: 32px; border-radius: 99px;
  background: var(--verde-suave); color: var(--verde-txt); font-weight: 800;
  align-items: center; justify-content: center; margin-bottom: 12px; }
.passo h3 { font-size: 1.08rem; margin: 0 0 .3em; }
.passo p { color: var(--texto-fraco); font-size: .95rem; margin: 0; }
@media (max-width: 760px) { .passos { grid-template-columns: 1fr; } }

/* ---------- blocos de publico ---------- */
.publico { border-top: 1px solid var(--borda); }
.publico .secao { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.publico.invertido .texto { order: 2; }
.publico ul { padding-left: 1.1em; margin: 0 0 1.4em; color: var(--texto-fraco); }
.publico li { margin-bottom: .5em; }
.publico li strong { color: var(--texto); }
@media (max-width: 860px) {
  .publico .secao { grid-template-columns: 1fr; gap: 32px; }
  .publico.invertido .texto { order: 0; }
}

/* ---------- recursos ---------- */
.grade-recursos { list-style: none; margin: 32px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.recurso { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-md); padding: 20px; }
.recurso-ic { font-size: 1.5rem; }
.recurso h3 { font-size: 1rem; margin: 8px 0 4px; }
.recurso p { font-size: .9rem; color: var(--texto-fraco); margin: 0; }

/* ---------- planos ---------- */
/* align-items: start (nao o stretch padrao do grid) — desde que Premium e
   Premium+ perderam o bloco de preco, esticar os tres cartoes na mesma altura
   deixava um vazio enorme entre a lista e o botao dos dois. Cada cartao agora
   tem a altura do proprio conteudo. */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; align-items: start; }
.plano { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: 26px; display: flex; flex-direction: column; box-shadow: var(--sombra); }
.plano.destaque { border-color: var(--verde-linha); box-shadow: var(--sombra-alta); }
.plano .fita { align-self: flex-start; background: var(--verde-suave); color: var(--verde-txt);
  border: 1px solid var(--verde-linha); border-radius: 99px; font-size: .72rem;
  font-weight: 700; padding: 3px 10px; margin-bottom: 10px; }
.plano h3 { font-size: 1.25rem; margin: 0 0 2px; }
.plano .preco { font-size: 1.9rem; font-weight: 800; margin: 10px 0 2px; }
.plano .preco .por { font-size: 1rem; font-weight: 500; }
.plano .ciclo { font-size: .84rem; color: var(--texto-fraco); margin-bottom: 16px; }
.plano ul { list-style: none; padding: 0; margin: 0 0 22px; font-size: .92rem; }
.plano li { padding: 6px 0 6px 22px; position: relative; color: var(--texto-fraco); }
.plano li::before { content: '✓'; position: absolute; left: 0; color: var(--verde-txt); font-weight: 700; }
.plano li strong { color: var(--texto); font-weight: 600; }
.plano .botao { margin-top: auto; text-align: center; }
@media (max-width: 860px) { .planos { grid-template-columns: 1fr; } }

/* ---------- prova social (reservada na v1.0, RN-ST-30) ---------- */
.reservado { border: 2px dashed var(--borda); border-radius: var(--r-lg);
  padding: 32px; text-align: center; color: var(--texto-fraco); }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; }
.faq-item { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-md); margin-bottom: 10px; }
.faq-item summary { cursor: pointer; padding: 16px 20px; font-weight: 600; }
.faq-item p { padding: 0 20px 16px; margin: 0; color: var(--texto-fraco); }

/* ---------- CTA final e rodape ---------- */
.cta-final { background: var(--verde-suave); border-top: 1px solid var(--verde-linha); text-align: center; }
.cta-final h2 { font-size: 2rem; }
.cta-final .sub { margin: 0 auto 26px; }
.rodape { background: var(--superficie); border-top: 1px solid var(--borda); }
.rodape .secao { padding: 34px 20px; display: flex; gap: 18px; flex-wrap: wrap;
  align-items: center; font-size: .88rem; color: var(--texto-fraco); }
.rodape a { color: var(--texto-fraco); }
.rodape .dir { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }