/*
 * Estilo da página pública estática `/conheca` (apresentação + planos).
 *
 * Em arquivo próprio, e não num <style> dentro da página, para o navegador
 * guardar em cache e a página ficar legível.
 */
/*
 * Fonte servida DAQUI, não do Google Fonts (auditoria LGPD de 23/09/2026,
 * N13): a página é pública e cada visita mandava o IP do visitante para
 * fonts.googleapis.com / fonts.gstatic.com, nos EUA, sem que a política
 * dissesse isso. Os dois arquivos em `/fontes/` são os subconjuntos latin e
 * latin-ext da Geist variável (SIL OFL), que é a mesma fonte que o app usa
 * pelo `next/font` — que também a serve do próprio domínio.
 */
/*
 * Outfit (SIL OFL), a letra do nome da marca — também servida DAQUI, pelo
 * mesmo motivo da Geist. É o subconjunto latino que o `next/font` gera no
 * build do app (fonte variável: o mesmo arquivo serve o 400 e o 800).
 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fontes/outfit-latin.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: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fontes/geist-latin-ext.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: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fontes/geist-latin.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;
}
/*
 * Página pública de venda — estática, sem login, servida de `public/`.
 * Não segue o tema do usuário (é tela pública, como a home e o login), por
 * isso as cores são literais e espelham o padrão do dashboard: gray-950 de
 * fundo, gray-900 de superfície, blue-500 de destaque.
 */
:root {
  --fundo: #030712;
  --superficie: #111827;
  --superficie-alta: #1f2937;
  --borda: #1f2937;
  --borda-forte: #374151;
  --texto: #ffffff;
  --texto-2: #9ca3af;
  --texto-3: #6b7280;
  --destaque: #3b82f6;
  --destaque-claro: #60a5fa;
  --destaque-escuro: #2563eb;
  --ambar: #f59e0b;
  --verde: #22c55e;
  --raio: 14px;
  --largura: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
.container { max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

/* ── Botões ─────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 10px;
  font-weight: 600; font-size: 15px; transition: background .15s, border-color .15s, transform .15s;
  width: 100%;
}
@media (min-width: 640px) { .botao { width: auto; } }
.botao-primario { background: var(--destaque); color: #fff; }
.botao-primario:hover { background: var(--destaque-escuro); }
.botao-secundario { border: 1px solid var(--borda-forte); color: var(--texto); background: transparent; }
.botao-secundario:hover { border-color: var(--texto-3); }
.botao-grande { min-height: 52px; padding: 14px 28px; font-size: 17px; border-radius: 12px; }

/* ── Cabeçalho ───────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(3, 7, 18, .85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; }
.marca svg { flex: none; }
/* O nome como no logo (DEFINICOES-DOCS/MARCA/MARCA.md): "Chess" forte, "Club" leve e azul claro. */
.nome-marca { font-family: 'Outfit', 'Geist', ui-sans-serif, system-ui, sans-serif; font-size: 21px; line-height: 1; }
.nome-marca b { font-weight: 800; }
.nome-marca span { font-weight: 400; color: #5B8CFF; }
.nav { display: none; align-items: center; gap: 24px; font-size: 14px; color: var(--texto-2); }
.nav a:hover { color: var(--texto); }
.nav a { white-space: nowrap; }
/* Sete itens + o botão: o menu só aparece a partir de 860px (abaixo, o
   cabeçalho do celular) e aperta nas telas médias para não quebrar linha. */
@media (min-width: 860px) and (max-width: 1099px) { .nav { gap: 14px; font-size: 13px; } }
.nav .botao { min-height: 38px; padding: 6px 16px; font-size: 14px; }
@media (min-width: 860px) { .nav { display: flex; } }
.cabecalho > .botao { min-height: 38px; padding: 6px 14px; font-size: 14px; width: auto; }
@media (min-width: 860px) { .cabecalho > .botao { display: none; } }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero { padding-block: 56px 40px; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.15fr 1fr; padding-block: 88px 72px; } }
.hero h1 { font-size: clamp(36px, 7vw, 64px); font-weight: 800; margin-bottom: 20px; }
.hero h1 span { color: var(--destaque); }
.hero .sub { font-size: clamp(17px, 2.2vw, 20px); color: var(--texto-2); max-width: 560px; margin-bottom: 28px; }
.hero .acoes { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .hero .acoes { flex-direction: row; } }
.hero .nota { margin-top: 16px; font-size: 13px; color: var(--texto-3); }
.selo { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--borda-forte); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--texto-2); margin-bottom: 20px; }
.selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(34,197,94,.18); }

/* Tabuleiro decorativo — posição de uma partida real, com as peças e as
   cores PADRÃO do app (cburnett, em /pecas/cburnett). É enfeite: aria-hidden. */
.tabuleiro-wrap { display: flex; justify-content: center; }
.tabuleiro {
  width: min(100%, 420px); aspect-ratio: 1; display: grid;
  grid-template-columns: repeat(8, 1fr); border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(37, 99, 235, .25), 0 0 0 1px var(--borda-forte);
  transform: rotate(-2deg);
}
.tabuleiro div { background: #d6dee7; } /* CORES_TABULEIRO.claro */
.tabuleiro div.e { background: #4a6083; } /* CORES_TABULEIRO.escuro */
/* COR_DESTAQUE_LANCE por cima da casa, como no app. */
.tabuleiro div.ult { background-image: linear-gradient(rgba(155, 199, 0, .41), rgba(155, 199, 0, .41)); }
.tabuleiro img { width: 100%; height: 100%; padding: 6%; }

/* ── Seções ─────────────────────────────────────────────────────── */
section, .grupo[id] { scroll-margin-top: 72px; }
section { padding: 56px 0; }
@media (min-width: 768px) { section { padding: 80px 0; } }
.titulo-secao { text-align: center; margin-bottom: 40px; }
.titulo-secao h2 { font-size: clamp(28px, 4.5vw, 40px); font-weight: 800; margin-bottom: 12px; }
.titulo-secao p { color: var(--texto-2); font-size: 17px; max-width: 640px; margin: 0 auto; }
.rotulo { color: var(--destaque-claro); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; display: block; }

.grade { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade.tres { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.card .icone { width: 44px; height: 44px; border-radius: 10px; background: rgba(59,130,246,.12); color: var(--destaque-claro); display: grid; place-items: center; margin-bottom: 4px; }
.card .icone svg { width: 24px; height: 24px; }
.card h3 { font-size: 18px; font-weight: 700; }
.card p { color: var(--texto-2); font-size: 15px; }
.card .obs { font-size: 13px; color: var(--ambar); margin-top: 4px; }

.grupo { margin-bottom: 48px; }
.grupo:last-child { margin-bottom: 0; }
.grupo-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 20px; }
.grupo-cab h3 { font-size: 22px; font-weight: 700; }
.grupo-cab span { color: var(--texto-3); font-size: 15px; }

/* ── Por que não o WhatsApp ─────────────────────────────────────── */
.comparativo { display: grid; gap: 16px; }
@media (min-width: 768px) { .comparativo { grid-template-columns: 1fr 1fr; } }
.comparativo .card h3 { display: flex; align-items: center; gap: 10px; }
.comparativo ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.comparativo li { display: flex; gap: 10px; color: var(--texto-2); font-size: 15px; }
.comparativo li::before { content: ''; flex: 0 0 6px; height: 6px; border-radius: 50%; margin-top: 9px; background: var(--texto-3); }
.comparativo .aqui li::before { background: var(--destaque); }
.comparativo .aqui { border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.06); }

/* ── IA e estudos ───────────────────────────────────────────────── */
.destaque-ia { border: 1px solid rgba(59,130,246,.45); background: linear-gradient(160deg, rgba(59,130,246,.10), rgba(17,24,39,.6)); border-radius: 20px; padding: 28px 22px; display: grid; gap: 28px; }
@media (min-width: 900px) { .destaque-ia { grid-template-columns: 1.1fr 1fr; padding: 40px; } }
.destaque-ia h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin-bottom: 12px; }
.destaque-ia p { color: var(--texto-2); }
.lista-check { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.lista-check svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--destaque); margin-top: 3px; }
.semana { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.semana .linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-alta); }
.semana .linha b { font-weight: 600; }
.semana .linha span { color: var(--texto-2); font-size: 13px; }
.semana .barra { height: 6px; border-radius: 99px; background: var(--borda-forte); overflow: hidden; }
.semana .barra i { display: block; height: 100%; background: var(--destaque); }
.semana .legenda { color: var(--texto-3); font-size: 12px; }

/* ── Planos ─────────────────────────────────────────────────────── */
.planos { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .planos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .planos.cinco { grid-template-columns: repeat(5, 1fr); } }
.plano { position: relative; }
.plano.recomendado { border-color: var(--destaque); background: rgba(59,130,246,.06); }
.plano .tag { position: absolute; top: -11px; left: 18px; background: var(--destaque); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.plano h3 { font-size: 20px; }
.plano .preco { font-size: 30px; font-weight: 800; line-height: 1; }
.plano .preco small { font-size: 14px; font-weight: 400; color: var(--texto-2); }
.plano .descricao { font-size: 13px; color: var(--texto-2); min-height: 3.4em; }
.plano ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; font-size: 14px; color: #d1d5db; }
.plano li { display: flex; gap: 8px; align-items: flex-start; }
.plano li svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--destaque); margin-top: 4px; }
.plano li.ambar svg { color: var(--ambar); }
.plano li.ambar span { color: var(--texto-2); }
.plano li.ambar em { color: var(--ambar); font-style: normal; }
.plano .botao { margin-top: 12px; width: 100%; }
/* Promoção no ar (card #183): o cheio riscado em cima do preço com desconto,
   o selo "vitalício" e a faixa com o texto da promoção. Quem preenche é o
   script da /conheca, com os valores prontos de /api/v1/promocoes/vigentes. */
.plano .preco-cheio { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 400; color: var(--texto-3); text-decoration: line-through; }
.plano .desconto { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--verde); background: rgba(34,197,94,.12); padding: 2px 8px; border-radius: 999px; }
.faixa-promocao { display: flex; gap: 12px; align-items: flex-start; max-width: 720px; margin: 0 auto 32px; padding: 12px 16px; border: 1px solid rgba(59,130,246,.4); border-radius: var(--raio); background: rgba(37,99,235,.1); }
.grupo .faixa-promocao { margin: 0 0 20px; }
.faixa-promocao svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; color: var(--destaque-claro); }
.faixa-promocao strong { display: block; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.faixa-promocao small { display: block; margin-top: 2px; font-size: 12px; color: var(--texto-2); }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.plano.membro { max-width: 520px; }

.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14px; }
th, td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th { color: var(--texto-2); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: var(--superficie); }
tr:last-child td { border-bottom: none; }
td .sim { color: var(--verde); font-weight: 700; }
td .nao { color: var(--texto-3); }
td .obs { color: var(--ambar); font-size: 12px; }

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
details { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 0 18px; }
summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--texto-3); font-size: 22px; font-weight: 400; flex: 0 0 auto; }
details[open] summary::after { content: '–'; }
details p { color: var(--texto-2); padding-bottom: 16px; font-size: 15px; }

/* ── CTA final e rodapé ─────────────────────────────────────────── */
.cta-final { background: var(--destaque); color: #0b1220; text-align: center; }
.cta-final h2 { font-size: clamp(28px, 5vw, 40px); font-weight: 800; margin-bottom: 12px; }
.cta-final p { font-size: 17px; opacity: .85; margin-bottom: 24px; }
.cta-final .botao { background: #030712; color: #fff; }
.cta-final .botao:hover { background: #111827; }
footer { border-top: 1px solid var(--borda); padding: 32px 0; text-align: center; color: var(--texto-3); font-size: 14px; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 10px; }
footer nav a:hover { color: var(--texto-2); }

/* ── Índice, seções alternadas e Swiss-Manager ─────────────────── */
/* Índice das seções, logo abaixo do topo: rola de lado no celular. */
.indice { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin-top: 28px; }
.indice::-webkit-scrollbar { display: none; }
.indice a { flex: none; border: 1px solid var(--borda-forte); border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--texto-2); min-height: 40px; display: inline-flex; align-items: center; }
.indice a:hover { color: var(--texto); border-color: var(--texto-3); }
@media (min-width: 900px) { .indice { flex-wrap: wrap; overflow: visible; } }

.hero-simples { padding-block: 56px 24px; max-width: 820px; }
@media (min-width: 768px) { .hero-simples { padding-block: 88px 40px; } }
.hero-simples h1 { font-size: clamp(36px, 7vw, 60px); font-weight: 800; margin-bottom: 20px; }
.hero-simples h1 span { color: var(--destaque); }
.hero-simples .sub { font-size: clamp(17px, 2.2vw, 20px); color: var(--texto-2); margin-bottom: 28px; }
.hero-simples .acoes { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .hero-simples .acoes { flex-direction: row; } }

.secao-alternada { background: rgba(17, 24, 39, .45); border-block: 1px solid var(--borda); }

/* Swiss-Manager: o fluxo de ida e volta em três passos. */
.fluxo { display: grid; gap: 12px; grid-template-columns: 1fr; counter-reset: passo; margin-bottom: 32px; }
@media (min-width: 900px) { .fluxo { grid-template-columns: repeat(3, 1fr); } }
.passo { position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px 22px 22px 70px; }
.passo::before { counter-increment: passo; content: counter(passo); position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 50%; background: var(--destaque); color: #fff; font-weight: 800; display: grid; place-items: center; }
.passo h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.passo p { color: var(--texto-2); font-size: 15px; }
.passo .onde { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--destaque-claro); }
.passo.fora .onde { color: var(--ambar); }
.passo.fora::before { background: var(--superficie-alta); border: 1px solid var(--ambar); color: var(--ambar); }

.duas { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .duas { grid-template-columns: 1fr 1fr; } }
.card .lista-check { margin-top: 4px; }
.card .lista-check li { color: var(--texto-2); font-size: 15px; }
.card .lista-check b { color: var(--texto); font-weight: 600; }
.nota-rodape { margin-top: 20px; color: var(--texto-3); font-size: 14px; text-align: center; max-width: 760px; margin-inline: auto; }

/* ── Tutor de IA: plano da semana e exemplos de evolução ─────────── */
.ia-titulo { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.ia-nota { margin-top: 16px; font-size: 14px; color: var(--texto-3); }
.ia-acoes { margin-top: 18px; }
.semana-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.semana-cab span { color: var(--texto-3); font-size: 12px; }
.semana-placar { display: flex; gap: 16px; color: var(--texto-2); font-size: 13px; }
.semana-placar b { color: var(--texto); }
.semana .motivo { color: var(--texto-2); font-size: 12px; margin: -2px 2px 4px; }
.ia-evolucao-cab { text-align: center; margin: 48px 0 20px; }
.ia-evolucao-cab h3 { font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; margin-bottom: 8px; }
.ia-evolucao-cab p { color: var(--texto-2); }

/* Os três números do painel (Marcador no app). */
.tiles { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; display: flex; flex-direction: column; gap: 2px; }
.tile-valor { font-size: 32px; font-weight: 800; line-height: 1.1; }
.tile-rotulo { color: var(--texto-2); font-size: 14px; }
.tile-apoio { color: var(--texto-3); font-size: 12px; margin-top: 4px; }

/* Gráficos de exemplo: o mesmo desenho do GraficoDedicacao e do BarraTaxa do
   app. Cores = as do app a 80% sobre o cartão (#336dcd e #10996f), validadas
   no validador de paleta contra o fundo escuro. Tritan na faixa mínima: por
   isso legenda, total escrito em cada coluna e 2px entre os segmentos. */
.graficos { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 900px) { .graficos { grid-template-columns: 1fr 1fr; } }
.grafico-cab { margin-bottom: 8px; }
.grafico-titulo { font-weight: 700; font-size: 15px; }
.grafico-sub { color: var(--texto-3); font-size: 12px; }
.barras { display: flex; align-items: flex-end; gap: 10px; height: 180px; }
.coluna { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.coluna .total { font-size: 11px; font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.coluna .periodo { font-size: 11px; color: var(--texto-3); }
.trilho { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.pilha { width: 100%; display: flex; flex-direction: column; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.pilha i { display: block; min-height: 2px; }
.jogo { background: #336dcd; }
.estudo { background: #10996f; }
.legenda-grafico { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); font-size: 12px; color: var(--texto-2); }
.legenda-grafico span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-grafico i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.temas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tema-cab { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #e5e7eb; margin-bottom: 6px; }
.tema-cab span:last-child { color: var(--texto-3); font-size: 12px; white-space: nowrap; }
.tema-cab b { color: #e5e7eb; }
.barra-taxa { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.barra-taxa i { display: block; height: 100%; border-radius: 99px; }
.boa { background: #10996f; }
.media { background: #d18a0c; }
.fraca { background: #cf3a3a; }

/* ── E o Lichess? E o Chess.com? ─────────────────────────────────── */
.juntos { margin-top: 32px; }
.juntos > h3 { text-align: center; font-size: clamp(20px, 3vw, 24px); font-weight: 800; margin-bottom: 16px; }

/* ── Vídeos: barra fixa ao lado (tela larga) ou gaveta (o resto) ──── */
/* Uma lista só. Com 1600 px ou mais sobra margem ao lado do conteúdo
   (1120 px), e a lista fica fixa nela, sempre à vista. Abaixo disso some, e o
   botão flutuante a abre como gaveta pela direita. Movimento só em
   `transform`/`opacity`, na curva do kit suíço. */
.videos {
  position: fixed; z-index: 31; top: 0; right: 0; bottom: 0;
  width: min(380px, 100%);
  display: none; flex-direction: column; gap: 12px;
  padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--superficie); border-left: 1px solid var(--borda-forte);
  transform: translateX(100%); transition: transform .2s cubic-bezier(0.2, 0, 0, 1);
}
.videos.aberta { display: flex; }
/* Entra em .32 s e sai em .2 s: a transição vale pelo estado de DESTINO. */
.videos.entrou { transform: none; transition-duration: .32s; }
.videos-fundo {
  position: fixed; inset: 0; z-index: 30; background: rgba(3, 7, 18, .72);
  opacity: 0; transition: opacity .2s cubic-bezier(0.2, 0, 0, 1);
}
.videos-fundo.entrou { opacity: 1; transition-duration: .32s; }
.videos-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.videos-cab .rotulo { margin: 0; }
.videos-fechar, .player-fechar {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--borda-forte); border-radius: 10px; background: transparent; color: var(--texto); cursor: pointer;
}
.videos-sub { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); margin: 2px 0 -6px; }
.videos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.video {
  display: grid; grid-template-columns: 30% 1fr; align-items: center; gap: 10px;
  padding: 4px; border-radius: 10px; border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.video:hover { background: var(--superficie-alta); }
.video:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.video[aria-current="true"] { border-color: rgba(59, 130, 246, .6); background: rgba(59, 130, 246, .08); }
/* Texto antes da capa no HTML (o nome do link começa pelo título); a capa vem
   primeiro na tela. */
.video-capa { order: -1; position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0b1220; }
.video-capa img { width: 100%; height: 100%; object-fit: cover; }
.video-tempo {
  position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px;
  background: rgba(3, 7, 18, .85); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.4;
}
.video-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.video-texto small { font-size: 12px; color: var(--texto-3); }
.video-texto b { font-size: 14px; font-weight: 600; line-height: 1.3; }
/* O destaque é o vídeo 11, o de lançamento: os dez temas em 1 minuto. O play
   fica à direita, longe da marca, que está à esquerda do quadro (kit de logos:
   nada em cima nem colado nela). */
.video.destaque { grid-template-columns: 1fr; gap: 8px; padding: 8px; border-color: var(--borda-forte); }
/* 2:1 em vez de 16:9: o quadro do 11 é a marca no meio, e o corte só leva fundo liso. */
.video.destaque .video-capa { aspect-ratio: 2 / 1; }
.video.destaque .video-texto b { font-size: 16px; }
.video.destaque .video-texto small { font-size: 13px; color: var(--texto-2); }
.video-play {
  position: absolute; right: 12px; top: calc(50% - 18px); width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--destaque); color: #fff;
}
.video-play svg { width: 18px; height: 18px; margin-left: 2px; }

/* Botão flutuante: abre a gaveta. Abaixo do aviso de cookies (z 50). */
.videos-abrir {
  position: fixed; z-index: 20; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 6px;
  border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--superficie-alta); color: var(--texto);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.videos-abrir:hover { border-color: var(--texto-3); }
.videos-abrir-icone { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--destaque); color: #fff; }
.videos-abrir-icone svg { width: 18px; height: 18px; margin-left: 2px; }
/* O fim da página não fica debaixo do botão. */
footer { padding-bottom: 96px; }

@media (min-width: 1600px) {
  .videos {
    container-type: inline-size;
    --margem: calc((100vw - var(--largura)) / 2);
    --w: min(300px, calc(var(--margem) - 40px));
    display: flex; transform: none; transition: none;
    top: 76px; bottom: auto; right: calc((var(--margem) - var(--w)) / 2);
    width: var(--w); max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px);
    gap: 10px; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio);
    background: rgba(17, 24, 39, .92);
  }
  .videos-fechar, .videos-abrir, .videos-fundo { display: none; }
  footer { padding-bottom: 32px; }
}
/* Margem estreita (perto de 1600 px): a miniatura das linhas ficaria do tamanho
   de um selo. Só o texto; o destaque continua com o quadro. */
@container (max-width: 250px) {
  .videos-lista .video { grid-template-columns: 1fr; padding: 6px 8px; }
  .videos-lista .video-capa { display: none; }
}
/* Veio do link "#videos" com a lista já à vista: um contorno acende e apaga. */
.videos::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--destaque); opacity: 0;
}
.videos.realce::after { animation: videos-realce 1.6s cubic-bezier(0.2, 0, 0, 1); }
@keyframes videos-realce { 20%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* O player: <dialog> modal, que já traz Esc, foco preso e a volta do foco. */
.player {
  width: min(1100px, calc(100vw - 32px), calc((100vh - 230px) * 16 / 9));
  width: min(1100px, calc(100vw - 32px), calc((100dvh - 230px) * 16 / 9));
  min-width: min(560px, calc(100vw - 32px));
  max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  border: 1px solid var(--borda-forte); border-radius: 16px; background: var(--superficie); color: var(--texto);
}
.player[open] { animation: player-entra .24s cubic-bezier(0.2, 0, 0, 1); }
.player::backdrop { background: rgba(3, 7, 18, .85); }
@keyframes player-entra { from { opacity: 0; transform: translateY(8px) scale(.985); } }
/* Sair também anima, e mais rápido do que entrou. */
.player.fechando { opacity: 0; transform: translateY(4px) scale(.99); transition: opacity .15s, transform .15s; }
.player.fechando::backdrop { opacity: 0; transition: opacity .15s; }
.player-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; }
.player-rotulo { display: block; font-size: 12px; color: var(--texto-3); }
.player-cab h2 { font-size: 18px; font-weight: 700; }
.player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.player-rodape { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.player-rodape p { color: var(--texto-2); font-size: 15px; }
.player-rodape .player-credito { font-size: 12px; color: var(--texto-3); }
.player-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.player-acoes .botao { width: 100%; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.player-acoes .botao:disabled { opacity: .4; cursor: default; }
.player-acoes .botao-primario { grid-column: 1 / -1; border: 0; }
@media (min-width: 640px) {
  .player-acoes { display: flex; }
  .player-acoes .botao { width: auto; }
  .player-acoes .botao-primario { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .videos, .videos-fundo, .player.fechando, .player.fechando::backdrop { transition: none; }
  .player[open], .videos.realce::after { animation: none; }
}