/*
 * Páginas internas, singles, busca e funil.
 *
 * Separado do componentes.css porque aquele arquivo cobre a home, que é o
 * caminho crítico. Isto aqui é o resto do site.
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa — www.dantetesta.com.br
 * Valoar — valoar.com.br
 */

/* ============================================================
   CABEÇALHO DE PÁGINA INTERNA
   ============================================================ */

.pagina-titulo {
  font-family: var(--f-titulo);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .92;
  text-wrap: balance;
  max-width: 18ch;
}

.migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-bottom: var(--e-3);
  font-family: var(--f-num);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--banda-fraco);
}

.migalhas a { color: var(--banda-fraco); text-decoration: none; }
.migalhas a:hover { color: var(--banda-ink); text-decoration: underline; }

/* ============================================================
   PROSA — conteúdo vindo do editor

   O editor produz HTML que o tema não escreveu. Estilizar por elemento
   é a única forma de dar conta do que ainda não existe.
   ============================================================ */

.prosa { max-width: var(--medida); }
.prosa > * + * { margin-top: 1.1em; }

.prosa h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 1.8em; }
.prosa h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 1.6em; }
.prosa p { line-height: 1.7; }

.prosa a { color: var(--marca-texto); text-decoration: underline; }
.prosa a:hover { text-decoration-thickness: 2px; }

.prosa ul,
.prosa ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: .5em; }
.prosa li { line-height: 1.6; }

.prosa blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--marca);
  color: var(--fraco);
}

.prosa img { border-radius: var(--r-cartao); margin-block: 1.4em; }

.prosa code {
  font-family: var(--f-num);
  font-size: .88em;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 2px 6px;
}

.prosa table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.prosa th,
.prosa td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--linha); }

.paginas-internas {
  margin-top: var(--e-4);
  display: flex;
  gap: var(--e-2);
  font-family: var(--f-num);
  font-size: .88rem;
}

/* ============================================================
   DUAS COLUNAS
   ============================================================ */

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

@media (min-width: 900px) {
  .colunas-conteudo { grid-template-columns: minmax(0, 1.6fr) minmax(240px, .8fr); }
}

.lateral { display: flex; flex-direction: column; }

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

.lista-lateral li { border-bottom: 1px solid var(--linha); }
.lista-lateral li:last-child { border-bottom: none; }

.lista-lateral a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 12px 0;
  min-height: 44px;
  text-decoration: none;
}

.lista-lateral a:hover .lista-lateral-nome { text-decoration: underline; }
.lista-lateral-nome { font-weight: 600; font-size: .96rem; }
.lista-lateral-num { color: var(--fraco); font-size: .88rem; }

/* ============================================================
   CARTÃO DO PROFESSOR
   ============================================================ */

.cartao-professor {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--e-2);
  align-items: center;
  margin-top: var(--e-2);
  padding: var(--e-2);
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  text-decoration: none;
  transition: border-color var(--tempo) var(--curva);
}

.cartao-professor:hover,
.cartao-professor:focus-visible { border-color: var(--carvao); }

.cartao-professor-foto {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--linha);
}

.cartao-professor-foto img { width: 100%; height: 100%; object-fit: cover; }
.cartao-professor-nome { display: block; font-weight: 600; }
.cartao-professor-cargo { display: block; font-size: .86rem; color: var(--fraco); }

/* ============================================================
   CAPA COM FOTO — single de modalidade
   ============================================================ */

.capa { position: relative; overflow: hidden; isolation: isolate; }

.capa-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Véu na horizontal, porque aqui o texto fica à esquerda e não embaixo. */
.capa[data-com-foto="sim"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
    rgba(12, 13, 15, .96) 0%,
    rgba(12, 13, 15, .90) 44%,
    rgba(12, 13, 15, .58) 100%);
}

.capa-conteudo { position: relative; }

/* ============================================================
   TOPOS DE SINGLE
   ============================================================ */

.plano-topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  align-items: flex-end;
  justify-content: space-between;
}

.plano-preco-grande .plano-inteiro { font-size: clamp(3.4rem, 8vw, 5.4rem); }

.pessoa-topo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  align-items: center;
}

@media (min-width: 700px) {
  .pessoa-topo { grid-template-columns: 200px 1fr; gap: var(--e-5); }
}

.pessoa-topo-foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-cartao);
  overflow: hidden;
  background: color-mix(in srgb, var(--carvao) 82%, #FFFFFF);
  max-width: 200px;
}

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

/* ============================================================
   GRADE REGULAR — páginas de listagem

   Sem bento aqui. Na home o bento dá hierarquia, uma modalidade puxa o
   olho. Numa página cujo trabalho é comparar, tamanho diferente
   atrapalha a comparação.
   ============================================================ */

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

.grade-regular .cartao-modalidade:first-child { min-height: 262px; }

/* ============================================================
   EQUIPE CLICÁVEL
   ============================================================ */

.pessoa-link { display: flex; flex-direction: column; gap: var(--e-2); text-decoration: none; }
.pessoa-link:hover .pessoa-nome { text-decoration: underline; }
.pessoa-dados { display: flex; flex-direction: column; gap: 2px; }
.pessoa-nome { display: block; }
.pessoa-cargo { display: block; }

/* ============================================================
   BUSCA
   ============================================================ */

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

.busca-rotulo {
  font-family: var(--f-num);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--banda-fraco);
}

.faixa-fundo .busca-rotulo,
.faixa-clara .busca-rotulo { color: var(--fraco); }

.busca-linha { display: flex; gap: var(--e-2); flex-wrap: wrap; }

.busca-campo {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 12px 15px;
  border-radius: var(--r-campo);
  border: 1px solid var(--banda-borda);
  background: transparent;
  color: var(--banda-ink);
  font-size: 1rem;
}

.faixa-fundo .busca-campo,
.faixa-clara .busca-campo {
  border-color: var(--linha-forte);
  background: var(--cartao);
  color: var(--carvao);
}

.busca-botao { flex: 0 0 auto; }

.faixa-escura .busca-botao {
  background: var(--marca-texto);
  color: var(--cartao);
}

/* ============================================================
   RESULTADOS
   ============================================================ */

.resultados { list-style: none; display: flex; flex-direction: column; }
.resultado { border-bottom: 1px solid var(--linha); }
.resultado:last-child { border-bottom: none; }

.resultado-link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px 0;
  text-decoration: none;
}

.resultado-tipo {
  font-family: var(--f-num);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fraco);
}

.resultado-titulo {
  font-family: var(--f-titulo);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.resultado-link:hover .resultado-titulo { text-decoration: underline; }
.resultado-resumo { color: var(--fraco); font-size: .95rem; max-width: 62ch; }

/* ============================================================
   ATALHOS DO 404
   ============================================================ */

.atalhos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); }

.atalhos a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-btn);
  background: var(--cartao);
  text-decoration: none;
  font-weight: 500;
  transition: border-color var(--tempo) var(--curva);
}

.atalhos a:hover,
.atalhos a:focus-visible { border-color: var(--carvao); }

/* ============================================================
   PAGINAÇÃO
   ============================================================ */

.nav-links { display: flex; flex-wrap: wrap; gap: 6px; }

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-btn);
  background: var(--cartao);
  text-decoration: none;
  font-family: var(--f-num);
  font-size: .92rem;
}

.page-numbers.current {
  background: var(--carvao);
  color: var(--fundo);
  border-color: var(--carvao);
}

/* ============================================================
   FORMULÁRIO

   Rótulo visível sempre, ajuda embaixo do campo, erro perto de onde
   aconteceu. Placeholder no lugar de rótulo some quando a pessoa digita,
   e some de vez para quem usa leitor de tela em alguns navegadores.
   ============================================================ */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: 46rem;
}

.campo,
.campo-grupo { display: flex; flex-direction: column; gap: 7px; }

.campo-grupo { border: none; padding: 0; margin: 0; }

.campo-rotulo {
  font-weight: 600;
  font-size: .96rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
}

.campo-opcional {
  font-family: var(--f-num);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fraco);
  font-weight: 400;
}

.campo-entrada {
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-campo);
  background: var(--cartao);
  color: var(--carvao);
  font-size: 1rem;
  width: 100%;
}

.campo-entrada:focus-visible { border-color: var(--carvao); }

.campo-ajuda { font-size: .87rem; color: var(--fraco); }

/* Isca anti-robô: fora da tela, fora da tabulação, fora do leitor de tela.
   display:none faria parte dos robôs pularem o campo, e aí ela não serve. */
.isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.opcoes-plano {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e-2);
  margin-top: 4px;
}

.opcao-plano {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: var(--e-3);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-cartao);
  background: var(--cartao);
  cursor: pointer;
  transition: border-color var(--tempo) var(--curva);
}

.opcao-plano:hover { border-color: var(--fraco); }

/* A borda marcada é reforço, não a única pista: o próprio radio continua
   visível, e é ele que informa o estado a quem não enxerga a borda. */
.opcao-plano:has(input:checked) {
  border-color: var(--carvao);
  box-shadow: inset 0 0 0 1px var(--carvao);
}

.opcao-plano input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--marca-texto);
}

.opcao-plano-corpo { display: flex; flex-direction: column; gap: 3px; }

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

.opcao-plano-preco { font-size: .9rem; color: var(--fraco); }

.opcao-plano-clube {
  font-family: var(--f-num);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--marca-texto);
  margin-top: 3px;
}

.formulario-rodape {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  align-items: flex-start;
}

.aviso-erro {
  border-left: 4px solid var(--erro);
  background: var(--cartao);
  border-radius: 0 var(--r-cartao) var(--r-cartao) 0;
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4);
  max-width: 46rem;
}

.aviso-erro p + p { margin-top: 6px; color: var(--fraco); font-size: .94rem; }

/* ============================================================
   APLICAÇÃO — páginas que pertencem ao plugin

   Entrada do Clube, agenda do aluno, coleta de depoimento. O tema não
   estiliza nada aqui além de dar largura: o CSS delas vem da Anilha, e
   sobrescrever criaria briga de especificidade a cada versão do plugin.
   ============================================================ */

.aplicacao { width: 100%; max-width: none; }

/* ============================================================
   CAPA DE PAGINA — o padrao unico

   Antes cada template escrevia o proprio cabecalho, e o resultado foi o
   previsivel: a do Clube ganhou foto e manchete animada, as outras
   ficaram com uma faixa escura chapada. Padrao diferente por pagina nao
   parece variedade, parece descuido.
   ============================================================ */

.capa-pagina {
  min-height: min(46vh, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(72px, 10vw, 120px);
}

.capa-alta { min-height: min(58vh, 540px); }

.capa-pagina .pagina-titulo {
  margin-top: var(--e-2);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.capa-sub {
  margin-top: var(--e-3);
  max-width: 52ch;
  color: var(--banda-ink);
  opacity: .86;
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

.capa-pagina .acoes { margin-top: var(--e-4); }