/*
 * Componentes — as peças de cada faixa.
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa — www.dantetesta.com.br
 * Valoar — valoar.com.br
 */

/* ============================================================
   NAVEGAÇÃO — pílula flutuante sobre o hero escuro
   ============================================================ */

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--carvao);
}

/* CONSEQUENCIA DO CABECALHO FIXO. Sem isto, clicar num link de ancora
   (o "Ver os planos" da pagina de modalidade, por exemplo) rola o alvo
   ate o topo da janela -- que e justamente onde o cabecalho esta. O
   titulo da secao chega escondido atras dele.

   Vale para qualquer faixa com id, e nao so para as ancoras de hoje:
   quem adicionar a proxima nao precisa lembrar desta regra. */
.faixa[id] { scroll-margin-top: clamp(76px, 9vh, 96px); }

.topo-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 74px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--banda-ink);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1.42rem;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;
}

.marca img {
  height: 34px;
  max-height: 34px;
  width: auto;
  background: none;
}

@media (min-width: 900px) {
  .marca img { height: 40px; max-height: 40px; }
}

/* Selo da marca: um disco com furo, que é o desenho de uma anilha. */
.marca-selo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--marca);
  position: relative;
  flex: none;
}

.marca-selo::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--marca);
  opacity: .55;
}

.nav-lista {
  display: none;
  list-style: none;
  gap: var(--e-4);
  align-items: center;
}

.nav-lista a {
  color: var(--banda-ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--tempo) var(--curva), color var(--tempo) var(--curva);
}

.nav-lista a:hover,
.nav-lista a:focus-visible { border-bottom-color: var(--marca); }

.nav-lista .current-menu-item > a { border-bottom-color: var(--marca); }

.topo-acao { display: none; }

.nav-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 15px;
  background: transparent;
  color: var(--banda-ink);
  border: 1px solid var(--banda-borda);
  border-radius: var(--r-btn);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.nav-botao-barras {
  display: block;
  width: 17px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.nav-botao-barras::before,
.nav-botao-barras::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 2px;
  background: currentColor;
}

.nav-botao-barras::before { top: -5px; }
.nav-botao-barras::after { top: 5px; }

.nav-movel {
  display: none;
  padding-block: var(--e-3) var(--e-4);
  border-top: 1px solid var(--banda-linha);
}

.nav-movel[data-aberto="sim"] { display: block; }

.nav-movel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-movel a {
  display: block;
  padding: 13px 0;
  color: var(--banda-ink);
  text-decoration: none;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--banda-linha);
}

.nav-movel .btn { margin-top: var(--e-3); width: 100%; }

@media (min-width: 900px) {
  .nav-lista { display: flex; }
  .topo-acao { display: inline-flex; }
  .nav-botao { display: none; }
  .nav-movel { display: none !important; }
}

/* ============================================================
   HERO — a tese
   ============================================================ */

.hero {
  padding-block: clamp(96px, 15vw, 190px) clamp(72px, 11vw, 140px);
  min-height: min(76vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-conteudo { position: relative; }

/* A manchete trava em 13ch para forçar duas ou três linhas. Container
   estreito com fonte grande é o que produz a parede de seis linhas. */
.hero-titulo {
  font-size: var(--t-hero);
  font-weight: 900;
  max-width: 13ch;
  margin-bottom: var(--e-3);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.hero-titulo .acento { color: var(--marca); }

.hero-sub {
  color: var(--banda-ink);
  opacity: .84;
  font-size: clamp(1.04rem, 1.6vw, 1.2rem);
  max-width: 46ch;
  margin-bottom: var(--e-4);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

/* --- Marcadores do Clube no pé do hero ---
   Números reais do mês, não estatística inventada de landing page. Ficam
   no rodapé do hero porque são prova, e prova vem depois da promessa. */
.hero-marcadores {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--banda-ink) 18%, transparent);
}

.hero-marcador { display: flex; flex-direction: column; gap: 2px; }

.hero-marcador-num {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--marca);
}

.hero-marcador-rot {
  font-family: var(--f-num);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--banda-fraco);
}

/* ============================================================
   CABEÇALHO DE FAIXA
   ============================================================ */

.faixa-cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

.faixa-cabeca-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
}

/* ============================================================
   BENTO — modalidades
   grid-flow-dense fecha os buracos que sobram quando um item
   ocupa duas colunas e o próximo não cabe na fileira.
   ============================================================ */

.bento {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  gap: var(--e-2);
}

@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > :first-child { grid-column: span 2; }
}

@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento > :first-child { grid-column: span 2; grid-row: span 2; }
}

.cartao-modalidade {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 262px;
  padding: var(--e-3);
  border-radius: var(--r-cartao);
  overflow: hidden;
  background: var(--carvao);
  color: var(--banda-ink);
  text-decoration: none;
  isolation: isolate;
}

.cartao-modalidade:first-child { min-height: 320px; }

.cartao-modalidade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 700ms var(--curva);
}

.cartao-modalidade:hover img,
.cartao-modalidade:focus-visible img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .cartao-modalidade:hover img,
  .cartao-modalidade:focus-visible img { transform: none; }
}

/* Scrim obrigatório: texto sobre imagem sem véu reprova contraste na hora
   em que alguém sobe uma foto clara. WCAG 1.4.3. */
.cartao-modalidade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* A rampa protege a metade de baixo, onde o texto mora, e libera o topo.
     A versão anterior tinha .34 de preto lá em cima, o que num cartão de
     236px apagava a foto inteira: a Fisioterapia ficou um retângulo preto.
     Nos pontos onde há texto o véu passa de .80, e texto #F3F4F6 sobre isso
     fica acima de 8:1 mesmo se a foto por baixo for branca. */
  background: linear-gradient(to top,
    rgba(12, 13, 15, .95) 0%,
    rgba(12, 13, 15, .86) 36%,
    rgba(12, 13, 15, .48) 62%,
    rgba(12, 13, 15, .14) 100%);
}

/* Sem foto, a célula vira a textura da marca em vez de um retângulo cinza. */
.cartao-modalidade[data-sem-foto="sim"] {
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--marca) 13%, transparent), transparent 58%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--carvao) 88%, #FFFFFF) 0 12px, var(--carvao) 12px 24px);
}

.cartao-modalidade[data-sem-foto="sim"]::after { background: none; }

.modalidade-nome {
  font-family: var(--f-titulo);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.96;
  margin-bottom: 5px;
}

.modalidade-resumo {
  color: var(--banda-fraco);
  font-size: var(--t-apoio);
  max-width: 40ch;
}

.modalidade-horarios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--e-2);
  list-style: none;
}

.modalidade-horarios li {
  font-family: var(--f-num);
  font-size: 0.74rem;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--banda-borda);
  color: var(--banda-ink);
}

/* ============================================================
   CLUBE — o placar. Único lugar com a cor da marca em movimento.
   ============================================================ */

.clube-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 66px);
  align-items: start;
}

@media (min-width: 900px) {
  .clube-grade { grid-template-columns: 0.9fr 1.1fr; }
}

.clube-passos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-4);
  counter-reset: passo;
}

/* Aqui a numeração é legítima: é uma sequência real, e a ordem dos passos
   é informação que o leitor precisa. É o único lugar do tema que numera. */
.clube-passos li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--e-2);
  align-items: start;
  counter-increment: passo;
}

.clube-passos li::before {
  content: counter(passo);
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--marca-escuro);
  border: 1px solid color-mix(in srgb, var(--marca) 40%, transparent);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.clube-passo-texto { color: var(--banda-fraco); font-size: var(--t-apoio); }
.clube-passo-texto b { color: var(--banda-ink); font-weight: 600; display: block; }

.placar {
  border: 1px solid var(--banda-linha);
  border-radius: var(--r-cartao);
  overflow: hidden;
  background: color-mix(in srgb, var(--carvao) 92%, #000000);
}

.placar-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 15px 20px;
  border-bottom: 1px solid var(--banda-linha);
}

.placar-titulo {
  font-family: var(--f-titulo);
  font-size: 1.16rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--banda-ink);
}

.placar-mes {
  font-family: var(--f-num);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--banda-fraco);
}

/* Duas colunas, não três. A versão anterior reservava 40px para a posição
   e preenchia com um travessão — mas estas linhas são agregados do mês, não
   colocações. Coluna de posição vazia lê como campo que não carregou. */
.placar-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-3);
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--banda-linha);
}

.placar-linha:last-child { border-bottom: none; }

/* .placar-pos e [data-primeiro] foram removidos junto com a coluna de
   posição. Eram para um ranking nominal que este tema decidiu não publicar
   (ver o cabeçalho de partials/clube.php). Regra de CSS guardada "por via
   das dúvidas" é regra que ninguém ousa apagar depois. */

.placar-nome { color: var(--banda-ink); font-weight: 500; }

.placar-sequencia {
  display: block;
  font-family: var(--f-num);
  font-size: 0.72rem;
  color: var(--banda-fraco);
}

.placar-pontos {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--banda-ink);
  font-variant-numeric: tabular-nums;
}

.placar-pe {
  padding: 13px 20px;
  border-top: 1px solid var(--banda-linha);
  font-size: 0.8rem;
  color: var(--banda-fraco);
}

/* ============================================================
   PLANOS
   ============================================================ */

.planos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3);
  align-items: stretch;
}

@media (min-width: 720px) {
  .planos { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
}

.plano {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: clamp(24px, 3vw, 34px);
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  box-shadow: var(--sombra);
}

/* O plano em destaque inverte para carvão. É a única maneira de ele poder
   usar a cor da marca sem reprovar contraste, e a inversão já o destaca sozinha,
   sem precisar de fita "MAIS POPULAR" no canto. */
.plano[data-destaque="sim"] {
  background: var(--carvao);
  border-color: var(--carvao);
  color: var(--banda-ink);
  box-shadow: var(--sombra-alta);
}

.plano-nome {
  font-family: var(--f-titulo);
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
}

.plano-preco {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
}

.plano-moeda {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--fraco);
}

.plano[data-destaque="sim"] .plano-moeda { color: var(--banda-fraco); }

.plano-inteiro {
  font-size: clamp(2.9rem, 6vw, 4.1rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.plano[data-destaque="sim"] .plano-inteiro { color: var(--marca); }

.plano-centavos {
  font-size: 1.05rem;
  font-weight: 600;
  align-self: flex-start;
  margin-top: 4px;
}

.plano-periodo {
  font-family: var(--f-num);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fraco);
}

.plano[data-destaque="sim"] .plano-periodo { color: var(--banda-fraco); }

.plano-beneficios {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: var(--t-apoio);
}

.plano-beneficios li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.plano-beneficios li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--fraco);
}

.plano[data-destaque="sim"] .plano-beneficios li::before { background: var(--marca); }

.plano-clube {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-family: var(--f-num);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  border: 1px solid var(--linha-forte);
  color: var(--fraco);
}

.plano[data-destaque="sim"] .plano-clube {
  border-color: color-mix(in srgb, var(--marca) 45%, transparent);
  color: var(--marca-escuro);
}

.plano-rodape { margin-top: auto; padding-top: var(--e-2); }
.plano-rodape .btn { width: 100%; }

/* ============================================================
   EQUIPE
   ============================================================ */

.equipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e-3);
}

.pessoa { display: flex; flex-direction: column; gap: var(--e-2); }

.pessoa-foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-cartao);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--carvao) 82%, #FFFFFF), var(--carvao) 70%);
}

.pessoa-foto img { width: 100%; height: 100%; object-fit: cover; }

.pessoa-nome {
  font-family: var(--f-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pessoa-cargo { font-size: var(--t-apoio); color: var(--fraco); }

/* O CREF é a prova pública de que a pessoa é habilitada. Merece mono. */
.pessoa-registro {
  font-family: var(--f-num);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--fraco);
}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */

.depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--e-3);
}

.depoimento {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
}

/* A nota fica em carvão, não na cor da marca. O depoimento mora em cartão
   branco, e ali o vermelho da marca dá 4,21:1: reprova texto pequeno. A nota também não é só cor: o número
   vem escrito ("4 de 5"), então quem não distingue cor lê igual. */
.depoimento-nota {
  font-family: var(--f-num);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--carvao);
  letter-spacing: 0.08em;
}

.depoimento-texto {
  font-size: 1.02rem;
  line-height: 1.6;
}

.depoimento-texto p + p { margin-top: 0.7em; }

.depoimento-pe { margin-top: auto; padding-top: var(--e-2); }

.depoimento-autor { font-weight: 600; }

.depoimento-desde {
  font-family: var(--f-num);
  font-size: 0.74rem;
  color: var(--fraco);
}

/* ============================================================
   FAQ — <details> nativo. Acordeão em JS seria reinventar
   teclado, foco e estado que o navegador já entrega prontos.
   ============================================================ */

.faq { display: flex; flex-direction: column; gap: 0; max-width: 78ch; }

.faq-item { border-bottom: 1px solid var(--linha); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 21px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-corpo);
  font-weight: 600;
  font-size: 1.06rem;
  min-height: 48px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-sinal {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
}

.faq-sinal::before,
.faq-sinal::after {
  content: "";
  position: absolute;
  background: var(--fraco);
  transition: transform var(--tempo) var(--curva);
}

.faq-sinal::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.faq-sinal::after { top: 3px; left: 10px; width: 2px; height: 16px; }

.faq-item[open] .faq-sinal::after { transform: scaleY(0); }

.faq-resposta { padding-bottom: 22px; max-width: 66ch; color: var(--fraco); }
.faq-resposta p + p { margin-top: 0.8em; }

@media (prefers-reduced-motion: reduce) {
  .faq-sinal::before,
  .faq-sinal::after { transition: none; }
}

/* ============================================================
   MATRÍCULA — o fechamento
   ============================================================ */

.matricula-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(38px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 880px) {
  .matricula-grade { grid-template-columns: 1.15fr 0.85fr; }
}

.matricula-titulo {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 15ch;
}

.matricula-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.matricula-lista li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  color: var(--banda-fraco);
  font-size: var(--t-apoio);
}

.matricula-lista li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--marca);
}

/* ============================================================
   RODAPÉ
   ============================================================ */

.rodape {
  background: var(--carvao);
  color: var(--banda-ink);
  padding-block: var(--e-6) var(--e-5);
  border-top: 1px solid var(--banda-linha);
}

.rodape-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
}

@media (min-width: 760px) {
  .rodape-grade { grid-template-columns: 1.3fr 1fr 1fr; }
}

.rodape-bloco { display: flex; flex-direction: column; gap: var(--e-2); }

.rodape-titulo {
  font-family: var(--f-num);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--banda-fraco);
  margin-bottom: 4px;
}

.rodape a { color: var(--banda-ink); }

.rodape-linhas { list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: var(--t-apoio); }

.rodape-horario {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  max-width: 300px;
  font-size: var(--t-apoio);
  color: var(--banda-fraco);
}

.rodape-horario b { color: var(--banda-ink); font-weight: 500; }
.rodape-horario span { font-family: var(--f-num); font-variant-numeric: tabular-nums; }

.rodape-redes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.rodape-redes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--banda-borda);
  border-radius: var(--r-btn);
  text-decoration: none;
  font-size: 0.88rem;
  transition: border-color var(--tempo) var(--curva);
}

.rodape-redes a:hover,
.rodape-redes a:focus-visible { border-color: var(--marca); }

.rodape-fim {
  margin-top: var(--e-5);
  padding-top: var(--e-3);
  border-top: 1px solid var(--banda-linha);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--banda-fraco);
}

/* ============================================================
   AVISO DE CONFIGURAÇÃO PENDENTE
   Só aparece para quem pode editar. O visitante nunca vê.
   ============================================================ */

/* Borda embaixo, não na esquerda: a faixa nasce colada no cabeçalho escuro
   e se funde com ele. Um filete na lateral da viewport parecia defeito de
   render; embaixo, ele separa o aviso do hero, que é o trabalho dele. */
.aviso-config {
  background: var(--carvao);
  color: var(--banda-ink);
  border-bottom: 2px solid var(--marca);
  padding-block: var(--e-3);
  font-size: var(--t-apoio);
}

.aviso-config code {
  font-family: var(--f-num);
  font-size: 0.85em;
  color: var(--marca-escuro);
}