/*
 * Página de uma modalidade.
 *
 * A versão anterior era capa mais duas colunas de texto: informava e não
 * vendia. As decisões aqui existem para o visitante decidir, não para
 * ele se informar:
 *
 * - A capa ocupa a tela inteira. É a única imagem que a pessoa vai ver
 *   dessa modalidade antes de escolher.
 * - A faixa de fatos vem logo abaixo, com os três números que respondem
 *   as primeiras perguntas: quando tem, quanto pontua, quanto tempo.
 * - O texto do dono vira bloco grande e centrado, não parágrafo perdido
 *   numa coluna estreita ao lado de uma barra lateral.
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa — www.dantetesta.com.br
 * Valoar — valoar.com.br
 */

/* ============================================================
   CAPA
   ============================================================ */

.capa-modalidade {
  min-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(88px, 12vw, 150px);
}

.modalidade-manchete {
  font-family: var(--f-titulo);
  font-size: clamp(3rem, 9vw, 6.4rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.005em;
  max-width: 12ch;
  margin: var(--e-2) 0 var(--e-3);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}

/* ============================================================
   FAIXA DE FATOS

   Os três números que respondem a primeira pergunta de quem cogita
   entrar. Ficam numa faixa própria, colada na capa, porque quem só
   olha a primeira tela precisa levar eles.
   ============================================================ */

.fatos {
  background: color-mix(in srgb, var(--carvao) 96%, #000000);
  border-bottom: 1px solid var(--banda-linha);
  padding-block: clamp(34px, 5vw, 58px);
  position: relative;
  overflow: hidden;
}

/* Brilho fraco atrás dos números, para a faixa não ser um retângulo
   chapado entre a foto e o texto. */
.fatos::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 140% at 50% 0%,
    color-mix(in srgb, var(--marca) 10%, transparent), transparent 72%);
}

.fatos-linha {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(30px, 7vw, 92px);
}

.fato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  /* Cada um entra um pouco depois do anterior. Em CSS, porque isto
     está na primeira tela e esconder pelo JS causaria o piscar. */
  animation: fato-entra 720ms var(--mov-curva, cubic-bezier(.22,.68,.3,1)) backwards;
}

.fato:nth-child(2) { animation-delay: 110ms; }
.fato:nth-child(3) { animation-delay: 220ms; }

@keyframes fato-entra {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
}

.fato-num {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--marca);
  display: inline-flex;
  align-items: baseline;
  /* tabular-nums trava a largura do dígito: sem isso o número dança
     enquanto o contador sobe de 0 até o valor final. */
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px color-mix(in srgb, var(--marca) 34%, transparent);
}

.fato-un {
  font-size: .34em;
  letter-spacing: .02em;
  margin-left: 3px;
  color: var(--banda-fraco);
  text-shadow: none;
}

.fato-rot {
  font-family: var(--f-num);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--banda-fraco);
  max-width: 18ch;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .fato { animation: none; }
}

/* ============================================================
   O QUE É + PRIMEIRO DIA

   ISTO AQUI ERA UMA FAIXA VAZIA. O texto que o dono escreve para uma
   modalidade tem três linhas; sozinhas, centradas, numa faixa de tela
   inteira, ficavam boiando num retângulo branco. Faixa vazia não
   informa nem vende, só empurra o resto da página para baixo.

   Duas colunas resolvem: o texto ganha companhia (a foto, que dá
   altura real ao bloco) e ganha continuação (os três passos do
   primeiro dia). Sem foto configurada, .editorial-solo devolve o
   layout de uma coluna — o bloco degrada, não quebra.
   ============================================================ */

.editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

@media (min-width: 900px) {
  .editorial { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
}

/* A foto entra depois do texto no HTML, para quem lê por leitor de tela
   receber o conteúdo antes da ilustração. */
.editorial-foto {
  margin: 0;
  border-radius: var(--r-cartao);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--linha);
}

.editorial-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No celular a foto vira faixa larga: 4:5 empurraria os passos duas
   telas para baixo. */
@media (max-width: 899px) {
  .editorial-foto { aspect-ratio: 16 / 10; }
}

.editorial-texto .rotulo { display: block; }

.editorial .prosa-grande {
  /* Menor que na versão de coluna única: numa coluna de ~560px o
     tamanho antigo dava seis palavras por linha. */
  font-size: clamp(1.08rem, 1.5vw, 1.34rem);
  margin-top: var(--e-3);
}

.editorial-divisa {
  border: 0;
  height: 1px;
  background: var(--linha);
  margin-block: clamp(30px, 4vw, 46px);
}

/* ------------------------------------------------------------------
   OS TRÊS PASSOS

   Numeração aqui não é enfeite: a ordem é informação. Ninguém bate a
   entrada antes de se matricular. Por isso <ol>, e por isso o fio
   vertical ligando um passo ao outro — ele desenha a sequência.
   ------------------------------------------------------------------ */

.passos {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-3);
}

.passo {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
}

/* O fio some no último passo: ali a sequência acabou. */
.passo:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 44px;
  bottom: calc(-1 * var(--e-3));
  width: 1px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--marca) 32%, transparent),
    color-mix(in srgb, var(--marca) 6%, transparent)
  );
}

.passo-n {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: .96rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--marca-texto);
  background: var(--fundo);
  border: 1px solid color-mix(in srgb, var(--marca) 34%, transparent);
}

.passo-corpo { padding-top: 5px; }

.passo-t {
  font-family: var(--f-num);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
  margin: 0 0 3px;
  color: var(--carvao);
}

.passo-p {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--fraco);
  margin: 0;
  max-width: 42ch;
}

/* Só o respiro. O flex/gap vem de .acoes, que já existe no base.css —
   redeclarar aqui criaria uma segunda verdade sobre o mesmo espaçamento. */
.editorial-acoes { margin-top: clamp(28px, 4vw, 40px); }

/* ------------------------------------------------------------------
   SEM FOTO

   O tema serve qualquer academia, e nem toda vai configurar a segunda
   foto. Sem ela, uma coluna centrada — que era o layout antigo, e que
   funciona quando é escolha em vez de sobra.
   ------------------------------------------------------------------ */

.editorial-solo {
  max-width: 66ch;
  margin-inline: auto;
}

/* Mantido para quem estender o tema: o bloco centrado de uma coluna. */
.sobre-modalidade {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.sobre-modalidade .rotulo { display: block; margin-bottom: var(--e-3); }

.prosa-grande {
  max-width: none;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.5;
}

.prosa-grande p { line-height: 1.5; }
.prosa-grande p + p { margin-top: .7em; }

/* ============================================================
   CHAMADA DO CLUBE
   ============================================================ */

.clube-chamada {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

@media (min-width: 880px) {
  .clube-chamada { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
}

/* Um selo redondo com o ganho do treino. É a anilha da marca, agora
   carregando informação em vez de enfeite. */
.clube-selo {
  width: min(260px, 70vw);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--marca) 34%, transparent);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 63%,
      color-mix(in srgb, var(--marca) 14%, transparent) 63% 64%, transparent 64%),
    radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 62%),
    color-mix(in srgb, var(--carvao) 92%, #000000);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .6);
}

.clube-selo-num {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--marca);
}

.clube-selo-rot {
  font-family: var(--f-num);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--banda-fraco);
}

/* ============================================================
   HORÁRIOS

   Cartões, não lista. Horário é a informação que a pessoa vai
   procurar com o olho, não ler em ordem.
   ============================================================ */

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

.horario {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  transition: border-color var(--mov-hover, 200ms) ease;
}

@media (hover: hover) and (pointer: fine) {
  .horario:hover { border-color: var(--linha-forte); }
}

.horario-marca {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--marca-texto);
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--marca) 34%, transparent);
}

.horario-texto {
  font-family: var(--f-num);
  font-size: .96rem;
  line-height: 1.4;
  color: var(--carvao);
}

.professor-linha { margin-top: var(--e-5); max-width: 30rem; }
.professor-linha .rotulo { display: block; margin-bottom: var(--e-2); }

/* ============================================================
   FECHO
   ============================================================ */

.fecho { text-align: left; }

.fecho-titulo {
  font-family: var(--f-titulo);
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .94;
  max-width: 16ch;
  color: var(--banda-ink);
}

@media (prefers-reduced-motion: reduce) {
  .horario { transition: none; }
}