/* ===== tokens.css ===== */
/* Tokens de design — extraídos do site NO AR em 2026-07-18, direto das
   variáveis globais do Elementor (wp-content/uploads/elementor/css/post-*.css).
   Não são invenção: são as cores/fontes que o site já usa hoje. */

:root {
  /* Cores globais do Elementor (nomes originais entre parênteses) */
  --cor-primaria: #00425b;   /* e-global-color-primary  — navy da marca */
  --cor-acento: #fbca04;     /* e-global-color-accent   — amarelo da marca */
  --cor-secundaria: #f9ed9a; /* e-global-color-secondary— amarelo claro */
  --cor-texto: #2f2f2f;      /* e-global-color-text */
  --cor-clara: #f6f6f6;      /* e-global-color-a63c4a8 */
  --cor-branco: #ffffff;

  /* Derivadas (só para estados de interface; não existiam no Elementor) */
  --cor-primaria-escura: #002f42;
  --cor-primaria-clara: #0a5a78;
  --cor-borda: #d9dee1;
  --cor-texto-suave: #5b6b73;

  /* Tipografia */
  --fonte-texto: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Roboto Slab', Georgia, serif;

  --peso-texto: 400;
  --peso-acento: 500;
  --peso-primario: 600;

  /* Escala tipográfica fluida */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);

  /* Espaçamento */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-12: 3rem;
  --esp-16: 4rem;

  --largura-container: 1140px;
  --raio: 8px;
  --raio-sm: 4px;
  --sombra: 0 1px 3px rgb(0 0 0 / 8%), 0 8px 24px rgb(0 66 91 / 8%);

  /* Breakpoints (referência; media queries usam os valores literais) */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
}


/* ===== base.css ===== */
/* Reset enxuto + base tipográfica + header/rodapé + utilitários.
   Substitui ~30 folhas de estilo do WordPress/Elementor/FontAwesome. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-weight: var(--peso-texto);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-branco);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  line-height: 1.2;
  margin: 0 0 var(--esp-4);
  color: var(--cor-primaria);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

p { margin: 0 0 var(--esp-4); }

a { color: var(--cor-primaria-clara); }
a:hover { color: var(--cor-primaria); }

:focus-visible {
  outline: 3px solid var(--cor-acento);
  outline-offset: 2px;
}

/* ---------- utilitários ---------- */

.container {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

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

.pular-para-conteudo {
  position: absolute; left: -9999px;
  background: var(--cor-primaria); color: var(--cor-branco);
  padding: var(--esp-3) var(--esp-4); z-index: 200;
}
.pular-para-conteudo:focus { left: var(--esp-4); top: var(--esp-4); }

.secao { padding-block: var(--esp-16); }
.secao-clara { background: var(--cor-clara); }
.secao-estreita { max-width: 72ch; }
.secao-titulo { text-align: center; margin-bottom: var(--esp-8); }

/* ---------- ícones SVG inline (substituem a webfont Font Awesome) ---------- */

.icone {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: -0.125em;
}

/* Hover "grow" do Elementor (e-animation-grow): usado nos botões de contato. */
.cresce { transition: transform 0.3s; }
.cresce:hover { transform: scale(1.1); }

/* ---------- animações de entrada (fadeIn/fadeInUp/fadeInRight) ----------
   Réplica das entrance animations do Elementor: elemento nasce invisível e
   anima quando entra na viewport (site.js adiciona .efeito-visivel).
   - Só escondem com JS ligado (html.tem-js): sem JS, tudo visível.
   - Com prefers-reduced-motion, nada é escondido nem animado. */

@media (prefers-reduced-motion: no-preference) {
  html.tem-js .efeito { opacity: 0; }
  html.tem-js .efeito-visivel { animation-duration: 1.25s; animation-fill-mode: both; }
  html.tem-js .efeito-visivel.efeito-fade-in { animation-name: efeitoFadeIn; }
  html.tem-js .efeito-visivel.efeito-fade-in-up { animation-name: efeitoFadeInUp; }
  html.tem-js .efeito-visivel.efeito-fade-in-right { animation-name: efeitoFadeInRight; }
}

@keyframes efeitoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes efeitoFadeInUp {
  from { opacity: 0; transform: translate3d(0, 60px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes efeitoFadeInRight {
  from { opacity: 0; transform: translate3d(80px, 0, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- cabeçalho ----------
   Fiel ao template "topo" do WP (post-22.css): barra branca sticky com sombra
   0 0 10px 50%, logo ~17,5% do container, menu à direita com hover AMARELO
   (troca de cor, sem sublinhado). */

.cabecalho {
  position: sticky; top: 0; z-index: 100;
  background: var(--cor-branco);
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
}

/* Medidas conferidas por computed style no site no ar (2026-07-19):
   header 94px de altura, logo 196×74, menu 16px/600 com padding 15px. */
.cabecalho-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4);
  min-height: 94px;
}

.marca img { width: 196px; height: auto; }

.nav-principal ul {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
}

.nav-link {
  font-weight: var(--peso-primario);
  font-size: 1rem;
  color: var(--cor-texto);
  text-decoration: none;
  padding: 15px;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav-link:hover,
.nav-link:focus,
.nav-link.is-active { color: var(--cor-acento); }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.menu-toggle-barra,
.menu-toggle-barra::before,
.menu-toggle-barra::after {
  position: absolute; left: 10px; width: 24px; height: 2px;
  background: var(--cor-primaria); transition: transform 0.2s, opacity 0.2s;
}
.menu-toggle-barra { top: 21px; }
.menu-toggle-barra::before { content: ''; top: -7px; }
.menu-toggle-barra::after  { content: ''; top: 7px; }

.menu-toggle[aria-expanded='true'] .menu-toggle-barra { background: transparent; }
.menu-toggle[aria-expanded='true'] .menu-toggle-barra::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle-barra::after  { transform: translateY(-7px) rotate(-45deg); }

/* Mesmo breakpoint do app (768) — ver spec app-mobile-responsivo */
@media (max-width: 768px) {
  .menu-toggle { display: block; }

  .marca img { width: 120px; }

  .nav-principal {
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--cor-branco);
    box-shadow: 0 6px 10px 0 rgb(0 0 0 / 30%);
    display: none;
  }
  .nav-principal.aberto { display: block; }

  .nav-principal ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 var(--esp-4) var(--esp-2);
  }
  /* Dropdown do WP: itens com 15px, separador #c4c4c4, hover amarelo. */
  .nav-link {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid #c4c4c4;
    font-size: var(--fs-base);
  }
  .nav-principal li:last-child .nav-link { border-bottom: 0; }
}

/* ---------- rodapé ----------
   Fiel ao template "rodape" do WP (post-24.css): navy, 3 colunas, títulos e
   texto BRANCOS, padding 60/50. Sem links nas colunas — como no site no ar. */

.rodape {
  background: var(--cor-primaria);
  color: var(--cor-branco);
  padding-top: 60px;
}

.rodape a { color: var(--cor-acento); }
.rodape a:hover { color: var(--cor-secundaria); }

.rodape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--esp-8);
  padding-bottom: 50px;
}

.rodape-titulo {
  font-family: var(--fonte-texto);
  font-size: 24px;
  font-weight: var(--peso-primario);
  color: var(--cor-branco);
  margin-bottom: var(--esp-3);
}

.rodape-bloco p { margin: 0; font-size: var(--fs-base); }
.rodape address { font-style: normal; font-size: var(--fs-base); }

.rodape-base {
  border-top: 1px solid rgb(255 255 255 / 15%);
  padding-block: var(--esp-4);
  font-size: var(--fs-xs);
  opacity: 0.8;
}
.rodape-base p { margin: 0; }

/* ---------- botões flutuantes (todas as páginas) ----------
   Réplica dos ícones fixos do template rodape do WP: círculos amarelos à
   direita (10px), WhatsApp/Instagram/topo, hover amarelo-claro com glifo
   navy (post-24.css). */

.flutuante {
  position: fixed;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--cor-acento);
  color: var(--cor-branco);
  transition: background-color 0.2s, color 0.2s;
}
.flutuante .icone { height: 30px; width: 30px; }
.flutuante:hover { background: var(--cor-secundaria); color: var(--cor-primaria); }

.flutuante-zap   { bottom: 80px; }
.flutuante-insta { bottom: 140px; }
.flutuante-topo  { bottom: 10px; }


/* ===== components.css ===== */
/* Componentes das páginas internas: cabeçalho de página, embed do ranking,
   cartões de status das quadras, lista de eventos e o acordeão do regulamento. */

/* ---------- cabeçalho de página ---------- */

.pagina-topo {
  background: var(--cor-primaria);
  color: var(--cor-branco);
  padding-block: var(--esp-12);
}
.pagina-topo h1 { color: var(--cor-branco); margin-bottom: var(--esp-2); }
.pagina-topo p { margin: 0; opacity: 0.9; max-width: 60ch; }

/* Observação + botão Atualizar dentro da tarja azul (/quadras/, Erik 2026-07-20).
   No celular o botão desce e ocupa a linha inteira — alvo de toque cheio, que é
   como esta página é usada de verdade: na chuva, antes de sair de casa. */
.topo-aviso {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  flex-wrap: wrap;
  margin-top: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.topo-aviso-texto {
  flex: 1 1 260px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.92;
  max-width: 70ch;
}
.botao-atualizar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--raio);
  background: var(--cor-acento);
  color: var(--cor-primaria);
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.botao-atualizar:hover { filter: brightness(1.07); }
.botao-atualizar:active { transform: translateY(1px); }
.botao-atualizar:focus-visible { outline: 3px solid var(--cor-branco); outline-offset: 2px; }

@media (max-width: 600px) {
  .topo-aviso { gap: var(--esp-3); }
  .botao-atualizar { flex: 1 1 100%; }
}

/* ---------- embed (tabela de ranking do LetzPlay) ---------- */

.embed-quadro {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cor-branco);
  box-shadow: var(--sombra);
}
.embed-quadro iframe {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 0;
}
.embed-nota {
  font-size: var(--fs-xs);
  color: var(--cor-texto-suave);
  margin-top: var(--esp-3);
}

/* ---------- status das quadras ---------- */

.quadras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--esp-4);
  margin-bottom: var(--esp-8);
}

.quadra-card {
  border: 1px solid var(--cor-borda);
  border-left: 6px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-4) var(--esp-6);
  background: var(--cor-branco);
  box-shadow: var(--sombra);
}
.quadra-card h2 {
  font-family: var(--fonte-texto);
  font-size: var(--fs-lg);
  font-weight: var(--peso-primario);
  margin-bottom: var(--esp-2);
}
.quadra-status {
  font-weight: var(--peso-primario);
  font-size: var(--fs-base);
  margin-bottom: var(--esp-1);
}
.quadra-detalhe { font-size: var(--fs-sm); color: var(--cor-texto-suave); margin: 0; }

.quadra-card[data-status='boa']       { border-left-color: #12a150; }
.quadra-card[data-status='molhada']   { border-left-color: #1863dc; }
.quadra-card[data-status='manutencao']{ border-left-color: #d4383d; }
.quadra-card[data-status='sem-info']  { border-left-color: var(--cor-borda); }

.quadra-card[data-status='boa']        .quadra-status { color: #0d7a3d; }
.quadra-card[data-status='molhada']    .quadra-status { color: #1250a8; }
.quadra-card[data-status='manutencao'] .quadra-status { color: #b02328; }
.quadra-card[data-status='sem-info']   .quadra-status { color: var(--cor-texto-suave); }

.atualizado-em {
  font-size: var(--fs-xs);
  color: var(--cor-texto-suave);
  margin-top: var(--esp-6);
}

/* ---------- aviso do status das quadras ---------- */

.aviso {
  border-radius: var(--raio);
  padding: var(--esp-6);
  margin-bottom: var(--esp-8);
  border-left: 5px solid var(--cor-borda);
  background: var(--cor-clara);
}
.aviso > :last-child { margin-bottom: 0; }
.aviso-ok { border-left-color: #12a150; }
.aviso-atencao { border-left-color: var(--cor-acento); }

.aviso-lista { margin: 0 0 var(--esp-4); padding-left: var(--esp-6); }
.aviso-lista li { margin-bottom: var(--esp-2); }

.aviso-obs {
  font-size: var(--fs-sm);
  color: var(--cor-texto-suave);
  border-top: 1px solid var(--cor-borda);
  padding-top: var(--esp-3);
  margin-top: var(--esp-4);
}

/* ---------- eventos ---------- */

.eventos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); }

.evento-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--esp-4);
  align-items: start;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-4);
  background: var(--cor-branco);
}

.evento-data {
  text-align: center;
  background: var(--cor-clara);
  border-radius: var(--raio-sm);
  padding: var(--esp-2);
  line-height: 1.15;
}
.evento-dia { display: block; font-size: var(--fs-2xl); font-weight: var(--peso-primario); color: var(--cor-primaria); }
.evento-mes { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-texto-suave); }

.evento-nome {
  font-family: var(--fonte-texto);
  font-size: var(--fs-lg);
  font-weight: var(--peso-primario);
  margin-bottom: var(--esp-1);
}
.evento-meta { font-size: var(--fs-sm); color: var(--cor-texto-suave); margin: 0; }

.evento-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--peso-acento);
  background: var(--cor-secundaria);
  color: #6b5600;
  border-radius: 999px;
  padding: 2px var(--esp-3);
  margin-top: var(--esp-2);
}

@media (max-width: 480px) {
  .evento-item { grid-template-columns: 64px 1fr; }
  .evento-dia { font-size: var(--fs-xl); }
}

/* ---------- foto do ESTADO da quadra (abaixo dos cards de status) ---------- */

/* A proporção é fixada aqui, não no <img>: as fotos de "molhada" e
   "manutenção" ainda vão chegar e podem vir em qualquer tamanho — assim o
   card não pula de altura no celular quando a imagem carrega. */
.quadra-foto {
  margin-top: var(--esp-3);
  border-radius: var(--raio-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.quadra-foto img { width: 100%; height: 100%; display: block; object-fit: cover; }

@media (max-width: 480px) {
  /* No celular os cards ficam em coluna única e a foto ocuparia meia tela —
     mais baixa para o aluno não precisar rolar entre uma quadra e outra. */
  .quadra-foto { aspect-ratio: 16 / 9; }
}

/* ---------- estado vazio ---------- */

.vazio {
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-8);
  text-align: center;
  color: var(--cor-texto-suave);
}

/* ---------- busca no FAQ do regulamento (/ranking/) ---------- */

/* O form nasce com [hidden] no HTML e só o JS revela — sem JS a seção fica
   como sempre foi. Sem isto o display:flex venceria o hidden. */
.faq-busca[hidden] { display: none; }

.faq-busca { margin-bottom: var(--esp-6); }

.faq-busca-caixa {
  position: relative;
  display: flex;
  align-items: center;
}

.faq-busca-lupa {
  position: absolute;
  left: var(--esp-4);
  height: 1em;
  width: 1em;
  color: var(--cor-texto-suave);
  pointer-events: none;
}

.faq-busca-campo {
  width: 100%;
  /* 16px cheios: abaixo disso o Safari do iPhone dá zoom sozinho ao focar. */
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--cor-texto);
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  /* espaço à esquerda para a lupa não encostar no texto */
  padding: var(--esp-3) var(--esp-4) var(--esp-3) var(--esp-12);
  -webkit-appearance: none;
  appearance: none;
}
.faq-busca-campo::placeholder { color: var(--cor-texto-suave); }
.faq-busca-campo:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 1px;
  border-color: var(--cor-primaria);
}

.faq-busca-contagem {
  margin: var(--esp-2) 0 0;
  min-height: 1.2em; /* reserva a linha: o texto do aria-live não empurra a lista */
  font-size: var(--fs-sm);
  color: var(--cor-texto-suave);
}

.faq-vazio {
  margin-top: var(--esp-6);
  color: var(--cor-texto-suave);
}
.faq-vazio[hidden] { display: none; }

/* ---------- link do regulamento completo ---------- */

.faq-regulamento { margin-top: var(--esp-6); }

.faq-regulamento-link {
  display: inline-block;
  font-weight: var(--peso-primario);
  color: var(--cor-primaria);
  border: 1px solid var(--cor-primaria);
  border-radius: var(--raio);
  padding: var(--esp-3) var(--esp-6);
  text-decoration: none;
}
.faq-regulamento-link:hover,
.faq-regulamento-link:focus-visible {
  background: var(--cor-primaria);
  color: var(--cor-branco);
}

.faq-regulamento-aviso {
  font-size: var(--fs-sm);
  color: var(--cor-texto-suave);
}

/* ---------- acordeão (regulamento do ranking) ---------- */

.acordeao { border-top: 1px solid var(--cor-borda); }

/* Perguntas filtradas pela busca — [hidden] sozinho perde para o display
   padrão do <details> em alguns navegadores. */
.acordeao details[hidden] { display: none; }

.acordeao details { border-bottom: 1px solid var(--cor-borda); }

.acordeao summary {
  cursor: pointer;
  list-style: none;
  padding: var(--esp-4) var(--esp-8) var(--esp-4) 0;
  font-weight: var(--peso-primario);
  color: var(--cor-primaria);
  position: relative;
}
.acordeao summary::-webkit-details-marker { display: none; }

.acordeao summary::after {
  content: '+';
  position: absolute; right: var(--esp-2); top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-xl);
  color: var(--cor-acento);
  line-height: 1;
}
.acordeao details[open] summary::after { content: '−'; }

.acordeao-corpo { padding-bottom: var(--esp-4); }
.acordeao-corpo > :last-child { margin-bottom: 0; }

/* ---------- cartões de categoria do ranking ---------- */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--esp-4);
}

.card-link {
  display: block;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-6);
  background: var(--cor-branco);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card-link:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.card-link h3 { margin-bottom: var(--esp-1); }
.card-link p { margin: 0; font-size: var(--fs-sm); color: var(--cor-texto-suave); }

/* ---------- calendário mensal (/eventos/) ---------- */

.cal-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); flex-wrap: wrap; margin-bottom: var(--esp-6);
}

.cal-abas { display: flex; gap: var(--esp-2); }

.cal-aba {
  cursor: pointer; font-family: inherit; font-size: var(--fs-sm);
  font-weight: var(--peso-primario);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--cor-borda); background: transparent;
  color: var(--cor-primaria); border-radius: 999px;
}
.cal-aba.is-ativa { background: var(--cor-primaria); color: var(--cor-branco); border-color: var(--cor-primaria); }

.cal-seletor select {
  font-family: inherit; font-size: var(--fs-sm);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
  background: var(--cor-branco); color: inherit;
}

.cal-mes-titulo { font-size: var(--fs-xl); text-transform: capitalize; margin-bottom: var(--esp-4); }

/* A grade rola sozinha no celular — o body nunca rola na horizontal. */
.cal-grade {
  display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr));
  gap: 1px; background: var(--cor-borda);
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  overflow: hidden; min-width: 680px;
}

#vistaCalendario { overflow-x: auto; }

.cal-cab {
  background: var(--cor-clara); padding: var(--esp-2);
  font-size: var(--fs-xs); font-weight: var(--peso-primario);
  text-transform: uppercase; letter-spacing: .05em; text-align: center;
  color: var(--cor-texto-suave);
}

.cal-cel { background: var(--cor-branco); min-height: 92px; padding: var(--esp-2); }
.cal-vazia { background: var(--cor-clara); }
.cal-cel.tem-evento { background: #fffdf3; }
.cal-num { display: block; font-size: var(--fs-xs); color: var(--cor-texto-suave); margin-bottom: var(--esp-1); }

/* Chips quebram linha para o nome do evento ficar legível (pedido do Erik
   2026-07-19 — antes truncava com reticências). */
.cal-chip {
  display: block; font-size: var(--fs-xs); line-height: 1.3;
  background: var(--cor-primaria); color: var(--cor-branco);
  border-radius: var(--raio-sm); padding: 2px 5px; margin-bottom: 2px;
  overflow-wrap: break-word;
}
/* Cores por CATEGORIA (regra do Erik 2026-07-20), deduzidas em
   src/eventos-cores.mjs a partir de organizador/nome/tipo — mesmo módulo que o
   CRM usa. Se mudar um HEX aqui, mude lá também (o CRM lê a lista de lá). */
.cal-chip[data-cor='peu'] { background: #1d4ed8; }
.cal-chip[data-cor='delucca'] { background: #fbca04; color: var(--cor-primaria); }
.cal-chip[data-cor='mulheres'] { background: #d6336c; }
.cal-chip[data-cor='feriado'] { background: #0d7a3d; }
.cal-chip[data-cor='beach'] { background: #e06c00; }
.cal-chip[data-cor='fechada'] { background: #b02328; }

/* Legenda das cores — sem ela o visitante vê chip azul e amarelo sem saber
   o que significam. Quebra linha no celular. */
.cal-legenda {
  list-style: none; margin: var(--esp-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4);
  font-size: var(--fs-xs); color: var(--cor-texto-suave);
}
.cal-legenda li { display: flex; align-items: center; gap: 6px; }
.cal-legenda-cor {
  width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto;
  background: var(--cor-primaria);
}
.cal-legenda-cor[data-cor='peu'] { background: #1d4ed8; }
.cal-legenda-cor[data-cor='delucca'] { background: #fbca04; }
.cal-legenda-cor[data-cor='mulheres'] { background: #d6336c; }
.cal-legenda-cor[data-cor='feriado'] { background: #0d7a3d; }
.cal-legenda-cor[data-cor='beach'] { background: #e06c00; }
.cal-legenda-cor[data-cor='fechada'] { background: #b02328; }

/* A mesma cor marca o item na visão "Próximos eventos". */
.evento-item[data-cor='peu'] { border-left: 4px solid #1d4ed8; }
.evento-item[data-cor='delucca'] { border-left: 4px solid #fbca04; }
.evento-item[data-cor='mulheres'] { border-left: 4px solid #d6336c; }
.evento-item[data-cor='feriado'] { border-left: 4px solid #0d7a3d; }
.evento-item[data-cor='beach'] { border-left: 4px solid #e06c00; }
.evento-item[data-cor='fechada'] { border-left: 4px solid #b02328; }


/* ===== home.css ===== */
/* Componentes exclusivos da home — cópia fiel do site WordPress/Elementor.
   Medidas e cores vêm do post-10.css do site no ar (capturado 2026-07-18):
   não são invenção, são o que a página já renderiza hoje. */

/* Âncoras (#topo, #sobre, #time, #t) compensando o header fixo — sem isso
   o clique no menu esconde o título embaixo da barra. */
.ancora {
  display: block;
  position: relative;
  top: -90px;
  visibility: hidden;
}

/* ---------- hero: slideshow de fundo com Ken Burns ----------
   Elementor: background_slideshow, 6 fotos, 5000ms por slide, transição fade
   500ms, ken burns zoom in, seção altura total (100vh), full-width. */

.hero-show {
  position: relative;
  /* "Espiar" a próxima seção (Erik 2026-07-20): o hero ocupava a tela inteira
     e o visitante não percebia que havia conteúdo abaixo. Agora ele para antes
     do fim da tela para a TARJA NAVY (.faixa-contato) aparecer inteira já no
     primeiro viewport, com uma sobra da seção "missão" embaixo.

     A conta (desktop): o header sticky come 94px, o hero sobe -35px e a faixa
     sobe outros -53px. Com o hero em (100svh - --hero-espia) a faixa termina
     ~ (--hero-espia - 55px) acima do fim da tela — daí 150px sobrarem ~95px de
     espiada. Mexer só na variável; o resto da conta se ajusta sozinho. */
  --hero-espia: 150px;
  height: calc(100vh - var(--hero-espia));
  /* No celular, 100vh inclui a barra de endereço e empurra a faixa de contato
     para fora da primeira tela; svh usa só a área realmente visível. */
  height: calc(100svh - var(--hero-espia));
  /* Piso para telas baixas (notebook 13" em paisagem, celular deitado): abaixo
     disso a foto viraria uma tarja e perderia o assunto. */
  min-height: 360px;
  overflow: hidden;
  /* No WP a seção sobe 35px por baixo do header (margin-top:-35px). */
  margin-top: -35px;
  margin-bottom: -35px;
  background: var(--cor-primaria);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Com o hero mais baixo o corte passou a ser vertical: em `center center` as
     fotos de grupo (hero-3/5/6) perdiam a fileira de cabeças de cima. 40%
     desloca a janela um pouco para o alto e mantém os rostos enquadrados. */
  background-position: center 40%;
  opacity: 0;
  transition: opacity 0.5s;
}
.hero-slide.is-ativo { opacity: 1; }

/* Ken Burns: o Elementor anima transform por 20s enquanto o slide fica 5s na
   tela — o zoom chega a ~7% antes da troca, bem sutil. */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-zoom {
    transform: scale(1.3);
    transition: opacity 0.5s, transform 20s linear;
  }
}

/* ---------- faixa de contato (navy, sobreposta ao fim do hero) ---------- */

.faixa-contato {
  position: relative;
  z-index: 4;
  background: var(--cor-primaria);
  /* Medido no site no ar: a faixa termina 4px ABAIXO do fim do hero — com
     -80px aqui sobrava uma fresta de foto entre a faixa e a seção seguinte
     (bug apontado pelo Erik em 2026-07-19). -53px fecha a conta:
     hero mb -35 + mt -53 = topo da faixa 88px acima do fim do hero, e com
     ~84px de altura ela cobre o resto. */
  margin-top: -53px;
  padding-block: 9px;
}

.faixa-contato-inner {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.faixa-contato-botoes { width: 36.4%; }
.faixa-contato-texto  { width: 63.6%; text-align: end; }

.faixa-botoes-grupo { display: flex; align-items: center; gap: var(--esp-3); }

.botao-contato {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-clara);
  color: var(--cor-primaria);
  border-radius: 3px;
  padding: 5px 30px;
  text-decoration: none;
  /* Área de toque: 34 do ícone + 5+5 de padding = 44px de altura, o mínimo
     recomendado no celular. O min-height deixa isso explícito para o dia em
     que alguém mexer no padding. */
  min-height: 44px;
  box-sizing: border-box;
}
/* Caixa fixa 34×34: garante botões todos do MESMO tamanho, independente da
   proporção de cada glifo (pedido do Erik 2026-07-19; vale para os TRÊS —
   WhatsApp, Instagram e YouTube). */
.botao-contato .icone { height: 34px; width: 34px; }
.botao-contato:hover { color: var(--cor-primaria); }

/* O social-icons do WP (fileira redonda repetindo WhatsApp/Instagram no
   celular) foi REMOVIDO a pedido do Erik (2026-07-19): duplicava os botões. */

.faixa-contato-texto h2 {
  font-family: var(--fonte-texto);
  font-size: 25px;
  font-weight: 600;
  color: var(--cor-clara);
  margin: 0 0 var(--esp-1);
}
.faixa-contato-texto p {
  font-size: 15px;
  color: var(--cor-clara);
  margin: 0;
}

/* ---------- missão ---------- */

.missao {
  /* Mesma cor com alpha do Elementor: #00425B12 (~7% navy). */
  background: #00425b12;
  padding-block: 30px;
  text-align: center;
}
.missao-titulo {
  font-family: 'Poppins', var(--fonte-texto);
  font-size: 45px;
  font-weight: 700;
  color: var(--cor-primaria);
  line-height: 1.2;
  margin: 0 0 var(--esp-4);
}
.missao-destaque { color: var(--cor-acento); }
.missao-icone {
  display: inline-block;
  width: 46px;   /* 4% do container de 1140px, como no WP */
  height: auto;
}

/* ---------- Quem Somos: texto + vídeo + carrossel ---------- */

.quem { margin-bottom: 70px; }

.quem-inner {
  display: flex;
  gap: var(--esp-6);
  align-items: center;
  margin-top: 20px;
  margin-bottom: 40px;
  padding-top: var(--esp-8);
}
.quem-texto { width: 50%; }
.quem-midia { width: 50%; }

.quem-texto h2 {
  font-family: var(--fonte-texto);
  font-size: 48px;
  font-weight: 600;
  color: var(--cor-primaria);
  margin-bottom: var(--esp-4);
}
.quem-texto p {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.7em;
  color: var(--cor-primaria);
  margin: 0;
}

.quem-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* ---------- carrossel (Swiper do Elementor recriado) ----------
   3 slides no desktop, 2 no tablet, 1 no celular; setas dentro (amarelo
   claro, 39px), bolinhas fora (ativa amarela, inativas navy); autoplay 5s
   com pausa no hover; loop infinito; transição 500ms. */

.carrossel { position: relative; }

.carrossel-viewport { overflow: hidden; }

.carrossel-trilha {
  display: flex;
  transition: transform 0.5s;
}

.carrossel-slide {
  flex: 0 0 calc(100% / 3);
  min-width: 0;
  /* No site no ar as fotos se encostam — sem vão entre slides. */
}
.carrossel-slide img { width: 100%; height: auto; display: block; }

.carrossel-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--cor-secundaria);
  line-height: 0;
}
.carrossel-seta .icone { height: 39px; width: auto; }
.carrossel-seta-prev { left: 10px; }
.carrossel-seta-next { right: 10px; }
.carrossel-seta:hover { color: var(--cor-acento); }

.carrossel-bolinhas {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--esp-3);
}
.carrossel-bolinha {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--cor-primaria);
  opacity: 0.9;
}
.carrossel-bolinha.is-ativa { background: var(--cor-acento); opacity: 1; }

/* ---------- "Desenvolva seu potencial!" (navy + menina ao fundo) ---------- */

.desenvolva {
  position: relative;
  background-color: var(--cor-primaria);
  background-image: url('/assets/img/Menina-Fundo-De-Lucca-768x768.png');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 20px 0 50px;
}

.desenvolva-inner {
  display: flex;
  gap: var(--esp-4);
  min-height: 500px;
}
.desenvolva-figura { width: 40.2%; }
.desenvolva-conteudo { width: 59.8%; padding: 20px 0 40px; }

.desenvolva-titulo {
  font-family: var(--fonte-texto);
  font-size: 40px;
  font-weight: 600;
  color: var(--cor-branco);
  text-align: center;
  padding: 25px;
  margin: 0;
}

.infobox {
  display: flex;
  gap: var(--esp-4);
  margin-bottom: 20px;
}
.infobox-icone {
  align-self: baseline;
  color: var(--cor-branco);
  line-height: 0;
  transition: color 0.3s;
}
.infobox-icone .icone { height: 25px; width: 25px; }
.infobox:hover .infobox-icone { color: var(--cor-acento); }

.infobox-titulo {
  font-family: var(--fonte-texto);
  font-size: 20px;
  font-weight: 700;
  color: var(--cor-branco);
  margin: 0 0 var(--esp-2);
}
.infobox-corpo p { color: var(--cor-branco); margin: 0; }

/* Infobox clicável (Locação de Quadras → reserva no LetzPlay). */
.infobox-link { text-decoration: none; color: inherit; }
.infobox-link:hover .infobox-titulo { color: var(--cor-secundaria); }
.infobox-cta {
  display: inline-block;
  margin-top: var(--esp-2);
  font-weight: var(--peso-primario);
  color: var(--cor-secundaria);
}
.infobox-link:hover .infobox-cta { text-decoration: underline; }

/* ---------- contadores (cartões brancos sobre o navy) ---------- */

.contadores {
  position: relative;
  z-index: 2;
  /* margin-top:-80px no WP: os cartões invadem a seção navy acima. */
  margin-top: -80px;
}

.contadores-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-inline: 45px;
}

.contador-cartao {
  flex: 1 1 0;
  min-width: 150px;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
  margin: 29px 14px;
  padding: var(--esp-6) var(--esp-2);
  text-align: center;
}

.contador-numero {
  font-family: var(--fonte-texto);
  font-size: 60px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--cor-primaria);
}
.contador-titulo {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  color: var(--cor-primaria);
  margin-top: var(--esp-1);
}

/* ---------- equipe ---------- */

.equipe-titulo {
  font-family: var(--fonte-texto);
  font-size: 47px;
  font-weight: 600;
  color: var(--cor-primaria);
  text-align: center;
  margin: 50px 0 var(--esp-8);
}

.equipe-fila {
  display: grid;
  gap: var(--esp-6);
  margin-block: 20px;
  align-items: start;
}
.equipe-fila-5 { grid-template-columns: repeat(5, 1fr); }
.equipe-fila-3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; }

.pessoa { text-align: center; }
.pessoa img { width: 100%; height: auto; }

/* Retrato pendente ("foto": null no home.json): o card sai só com nome e cargo.
   O Erik tirou o placeholder da inicial em 2026-07-20 — ele destacava a falta.
   Um empurrão pra baixo alinha o nome com o dos vizinhos que têm foto. */
.pessoa-sem-retrato { padding-top: var(--esp-6); }
.pessoa-foto-media img { width: 75%; margin-inline: auto; }

.pessoa-nome {
  font-family: var(--fonte-texto);
  font-size: 25px;
  font-weight: 600;
  color: var(--cor-primaria);
  margin: var(--esp-3) 0 0;
}
.pessoa-cargo {
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 600;
  color: var(--cor-acento);
  margin: var(--esp-1) 0 0;
}
/* Nas fileiras de professores o cargo é maior (20px no WP). */
.equipe-fila-3 .pessoa-cargo { font-size: 20px; }

/* ---------- "Pronto para treinar?" ---------- */

.pronto { margin-block: 20px; }

.pronto-cartao {
  display: flex;
  align-items: center;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: 5px;
  margin: 20px;
  transition: box-shadow 0.2s, border 0.2s;
}
.pronto-cartao:hover { box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%); }

.pronto-texto {
  width: 76.5%;
  padding: 12px 10px 0 30px;
}
.pronto-texto h2 {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 29px;
  color: var(--cor-primaria);
  margin: 0;
}
.pronto-texto p {
  font-size: 16px;
  font-weight: 500;
  color: var(--cor-primaria);
  margin: var(--esp-2) 0 var(--esp-4);
}

.pronto-icone { width: 23.5%; text-align: center; }
.pronto-icone a {
  display: inline-block;
  color: var(--cor-primaria);
  line-height: 0;
}
.pronto-icone .icone { height: 50px; width: auto; }

/* ---------- depoimentos ---------- */

.depo {
  background: var(--cor-clara);
  padding-block: 100px;
}

.depo-titulo {
  font-family: var(--fonte-texto);
  font-size: 65px;
  font-weight: 600;
  color: #000;
  text-align: center;
  margin: -12px 0 0;
}

/* Erik (2026-07-19) preferiu colunas mais largas que o WP: sem o recuo de
   15% à direita de cada coluna, margens laterais menores e entrelinha 1.75
   (o WP usa 2em).
   Erik (2026-07-20): virou CARROSSEL (mesmo componente do "Quem Somos") para
   caber mais avaliações do Google. 4 por vista no desktop — a mesma largura de
   coluna da grade antiga, então nada mudou de aparência com o site no ar. */
.depo-carrossel {
  margin-top: 35px;
  /* Espaço para as setas ficarem FORA do texto: sobrepostas, elas cairiam em
     cima da primeira e da última coluna. */
  padding-inline: 44px;
}
.depo-carrossel .carrossel-slide {
  flex: 0 0 calc(100% / 4);
  padding-right: var(--esp-6); /* o "gap" da grade antiga */
}
.depo-carrossel .carrossel-seta-prev { left: 0; }
.depo-carrossel .carrossel-seta-next { right: 0; }
/* Os cartões alinham pelo TOPO: com textos de tamanhos diferentes, esticar
   deixaria a assinatura de cada um numa altura. */
.depo-carrossel .carrossel-trilha { align-items: flex-start; }
.depo-carrossel .carrossel-bolinhas { margin-top: var(--esp-5); }

.depoimento {
  margin: 0;
}
.depoimento-aspas { color: #bfbfbf; line-height: 0; margin-bottom: var(--esp-4); }
.depoimento-aspas .icone { height: 38px; width: auto; }

.depoimento blockquote { margin: 0 0 var(--esp-4); }
.depoimento blockquote p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: #000;
  margin: 0;
}
.depoimento-autor {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #000;
}
.depoimento-papel {
  display: block;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6em;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #bfbfbf;
}

/* ---------- responsivo (breakpoints do Elementor: 1024 / 767) ---------- */

@media (max-width: 1024px) {
  .missao { margin-block: 50px; padding: 0 20px; }
  .missao-titulo { font-size: 35px; }

  .desenvolva-figura { width: 28%; }
  .desenvolva-conteudo { width: 72%; }

  .carrossel-slide { flex-basis: calc(100% / 2); }

  .depo { padding-inline: 25px; }
  .depo-titulo { font-size: 45px; }
  .depo-carrossel .carrossel-slide { flex-basis: calc(100% / 2); padding-right: var(--esp-6); }

  /* Fileiras da equipe viram flex CENTRADO: quando a conta não fecha
     (5 pessoas em 3 colunas, ou 2 no celular), quem sobra fica no meio da
     fileira em vez de deixar um buraco na grade (queixa do Erik 2026-07-19). */
  .equipe-fila { display: flex; flex-wrap: wrap; justify-content: center; }
  .equipe-fila .pessoa { flex: 0 0 calc((100% - 2 * var(--esp-6)) / 3); }
}

@media (max-width: 767px) {
  /* No celular a tarja navy empilha (botões em cima, texto embaixo) e fica
     bem mais alta que no desktop — precisa de mais folga para caber inteira
     na primeira tela, senão o "espiar" some. */
  .hero-show { --hero-espia: 250px; }

  .faixa-contato-inner { flex-direction: column; align-items: stretch; }
  .faixa-contato-botoes,
  .faixa-contato-texto { width: 100%; }
  .faixa-contato-texto { text-align: start; }
  /* Os 3 botões dividem a linha em partes iguais em vez de quebrarem: com o
     padding de 30px do desktop o terceiro (YouTube) caía sozinho na segunda
     linha em telas de 360px. Continuam do mesmo tamanho e com 44px de toque. */
  .faixa-botoes-grupo { flex-wrap: wrap; }
  .faixa-botoes-grupo .botao-contato { flex: 1 1 0; padding-inline: 10px; max-width: 130px; }

  .missao { padding: 25px 5px; }
  .missao-titulo { font-size: 30px; }
  .missao-icone { width: 15%; }

  .quem { margin-bottom: 0; }
  .quem-inner { flex-direction: column; margin-top: 50px; }
  .quem-texto, .quem-midia { width: 100%; }
  .quem-texto h2 { font-size: 30px; }
  .quem-texto p { font-size: 18px; }

  .carrossel { padding: 9px; }
  .carrossel-slide { flex-basis: 100%; }

  .desenvolva {
    background-position: top center;
    background-size: cover;
    /* O padding de baixo reserva o espaço que os contadores invadem
       (margin-top -60px): sem ele os cartões cobriam o fim do texto da
       "Locação de Quadras" (queixa do Erik 2026-07-19). */
    padding: 22px 22px 100px;
  }
  .desenvolva-inner { flex-direction: column; min-height: 0; }
  .desenvolva-figura { display: none; }
  .desenvolva-conteudo { width: 100%; padding: 0; }
  .desenvolva-titulo { font-size: 30px; padding: 15px; }

  .contadores { margin-top: -60px; }
  .contadores-grid { padding-inline: 0; }
  .contador-cartao { flex-basis: 100%; margin: 10px 20px; }
  .contador-numero { font-size: 46px; }

  .equipe-titulo { font-size: 35px; }
  /* 2 por fileira; o ímpar centraliza (herda o flex do breakpoint 1024). */
  .equipe-fila .pessoa { flex-basis: calc((100% - var(--esp-6)) / 2); }
  .pessoa-nome { font-size: 20px; }
  .equipe-fila-3 .pessoa-cargo { font-size: 16px; }

  .pronto-cartao { flex-direction: column; margin: 10px 0; }
  .pronto-texto { width: 100%; padding: 15px 20px 0; }
  .pronto-icone { width: 100%; padding-bottom: 15px; }

  .depo { padding: 50px 20px; }
  .depo-titulo { font-size: 40px; text-align: start; }
  /* Celular: 1 depoimento por vez. As setas encolhem e o recuo lateral cai
     para 32px — a seção já tem 20px de padding e o texto não pode ficar
     espremido numa coluna estreita. */
  .depo-carrossel { margin-top: 15px; padding-inline: 32px; }
  .depo-carrossel .carrossel-slide { flex-basis: 100%; padding-right: 0; }
  .depo-carrossel .carrossel-seta .icone { height: 30px; }
  .depoimento { padding-right: 0; }
}

/* ---------- blog (novidades e posts — inalterado) ---------- */

.posts-lista { display: grid; gap: var(--esp-6); list-style: none; margin: 0; padding: 0; }

.post-card {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-6);
  background: var(--cor-branco);
}
.post-card h2 { font-size: var(--fs-xl); margin-bottom: var(--esp-2); }
.post-card h2 a { text-decoration: none; color: var(--cor-primaria); }
.post-card h2 a:hover { color: var(--cor-primaria-clara); }
.post-data { font-size: var(--fs-xs); color: var(--cor-texto-suave); margin-bottom: var(--esp-3); }
.post-resumo { margin: 0; }

.post-conteudo { max-width: 72ch; }
.post-conteudo img { border-radius: var(--raio); margin-block: var(--esp-6); }
.post-conteudo figcaption { font-size: var(--fs-xs); color: var(--cor-texto-suave); text-align: center; }


/* ===== areas.css ===== */
/* Áreas logadas + porta de entrada (r5.2 — 2026-07-19).
   O que o Erik queria "estilo TradingView" era SÓ o ícone de usuário no
   header com o menu (Entrar / Central de Ajuda / Novidades) e o modal de
   Entrar. As páginas das áreas usam o visual normal do site. */

/* ---------- ícone de usuário no header ---------- */

.user-menu { position: relative; flex-shrink: 0; }

.user-menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--cor-primaria);
  transition: background-color 0.15s;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary .icone { width: 20px; height: 20px; }
.user-menu summary:hover,
.user-menu[open] summary { background: var(--cor-clara); }

.user-menu-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: 0 12px 32px rgb(15 26 46 / 18%);
  padding: 6px;
  z-index: 60;
}

.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--cor-texto);
  background: none;
  border: 0;
  border-radius: var(--raio-sm);
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
}
.user-menu-item:hover { background: var(--cor-clara); color: var(--cor-primaria); }
.user-menu-entrar { font-weight: var(--peso-primario); color: var(--cor-primaria); }
.user-menu-divisor { height: 1px; background: var(--cor-borda); margin: 6px 4px; }

/* ---------- página /entrar/ (r5.4 — substitui o modal) ----------
   Duas colunas: a arte da mulher sacando (Downloads do Erik) à esquerda,
   opções à direita. No celular a imagem vira uma faixa em cima. */

.entrar {
  display: flex;
  align-items: stretch;
  /* Ocupa a tela toda abaixo do header (94px) — sensação de página própria. */
  min-height: calc(100svh - 94px);
}

.entrar-lado {
  flex: 0 0 42%;
  overflow: hidden;
  background: var(--cor-primaria);
}
.entrar-lado img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entrar-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--esp-3);
  max-width: 460px;
  margin-inline: auto;
  padding: var(--esp-8) var(--esp-6);
}
.entrar-corpo h1 { margin: 0; }

.login-sub { margin: 0 0 var(--esp-2); color: var(--cor-texto-suave); }

.login-opcao {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-4);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.login-opcao:hover {
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra);
  transform: translateY(-1px);
}
.login-opcao-icone { font-size: 26px; }
.login-opcao-texto strong { display: block; color: var(--cor-primaria); }
.login-opcao-texto small { color: var(--cor-texto-suave); }

.login-nota {
  margin: var(--esp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--cor-texto-suave);
}
.login-nota a { color: var(--cor-primaria); }

/* ---------- páginas das áreas (cartão "Em Construção" / professor) ---------- */

.area-construcao {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-branco);
  box-shadow: var(--sombra);
  padding: var(--esp-12) var(--esp-8);
}
.area-construcao-icone { font-size: 56px; margin-bottom: var(--esp-4); }
.area-construcao h2 { margin-bottom: var(--esp-4); }
.area-construcao p {
  color: var(--cor-texto-suave);
  max-width: 44ch;
  margin-inline: auto;
}

.area-botao {
  display: inline-block;
  margin-top: var(--esp-4);
  background: var(--cor-primaria);
  color: var(--cor-branco);
  font-weight: var(--peso-primario);
  text-decoration: none;
  border-radius: var(--raio-sm);
  padding: var(--esp-3) var(--esp-8);
  transition: background-color 0.15s, transform 0.15s;
}
.area-botao:hover {
  background: var(--cor-primaria-clara, var(--cor-primaria));
  color: var(--cor-branco);
  transform: translateY(-1px);
}

/* ---------- responsivo ---------- */

/* No mobile o header tem logo + hambúrguer + ícone de usuário: o margin-left
   auto cola hambúrguer e ícone juntos à direita (senão o space-between do
   .cabecalho-inner espalharia os três). Mesmo breakpoint 768 do base.css. */
@media (max-width: 768px) {
  .menu-toggle { margin-left: auto; }
}

@media (max-width: 767px) {
  /* Imagem vira faixa no topo; opções embaixo, com a página inteira rolando. */
  .entrar { flex-direction: column; min-height: 0; }
  .entrar-lado { flex: none; max-height: 40svh; }
  .entrar-lado img { max-height: 40svh; }
  .entrar-corpo { max-width: none; padding: var(--esp-6) var(--esp-4) var(--esp-8); }
  .area-construcao { padding: var(--esp-8) var(--esp-4); }
}


/* ===== consent.css ===== */
/* Banner de consentimento (LGPD). Discreto, ancorado embaixo, sem cobrir
   o conteúdo inteiro — o site atual usava caixa no canto inferior esquerdo. */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 300;
  padding: var(--esp-4);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent[hidden] { display: none; }

.consent-caixa {
  pointer-events: auto;
  width: 100%;
  max-width: 720px;
  background: var(--cor-branco);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: 0 10px 40px rgb(0 0 0 / 22%);
  padding: var(--esp-6);
}

.consent-texto { font-size: var(--fs-sm); margin-bottom: var(--esp-4); }

.consent-link {
  color: var(--cor-primaria-clara);
  text-decoration: underline;
  white-space: nowrap;
}

.consent-acoes {
  display: flex;
  gap: var(--esp-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.consent-btn {
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--peso-primario);
  padding: var(--esp-2) var(--esp-6);
  border-radius: var(--raio-sm);
  border: 1px solid var(--cor-primaria);
  background: transparent;
  color: var(--cor-primaria);
}
.consent-btn:hover { background: var(--cor-clara); }

.consent-btn-ok {
  background: var(--cor-primaria);
  color: var(--cor-branco);
}
.consent-btn-ok:hover { background: var(--cor-primaria-escura); }

.consent-detalhe {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}
.consent-detalhe[hidden] { display: none; }

.consent-item {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-2) 0;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.consent-item-fixo { cursor: default; opacity: 0.75; }
.consent-item input { margin-top: 4px; flex: none; }
.consent-item small { display: block; color: var(--cor-texto-suave); font-size: var(--fs-xs); }

@media (max-width: 480px) {
  .consent { padding: 0; }
  .consent-caixa { border-radius: var(--raio) var(--raio) 0 0; padding: var(--esp-4); }
  .consent-acoes { justify-content: stretch; }
  .consent-btn { flex: 1; }
}