/* ============================================================
   Forja Fitness — site público
   Usa os mesmos tokens do sistema. Nada de hex solto aqui.
   Sem foto: enquanto não houver imagem real da academia, o site
   se sustenta em tipografia, cor e composição — nunca em banco
   de imagens fingindo ser a sala de musculação do cliente.
   ============================================================ */

.site {
  --site-fundo: var(--gray-950);
  --site-texto: var(--gray-100);
  --site-texto-2: var(--gray-400);
  --site-superficie: #141814;
  --site-borda: #262c26;
  background: var(--site-fundo);
  color: var(--site-texto);
}

.site :where(h1, h2, h3) { color: #fff; }

.envolve {
  inline-size: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.secao { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }
/* O cabeçalho é fixo: sem isto, o link de âncora esconde o título da seção. */
:where(.secao, [id]) { scroll-margin-block-start: 5.5rem; }
.secao__cab { max-inline-size: 42ch; margin-block-end: var(--e-xl); }
.secao__olho {
  display: inline-flex; align-items: center; gap: var(--e-2xs);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  font-weight: var(--peso-alto); color: var(--volt-300);
  margin-block-end: var(--e-xs);
}
.secao__olho::before {
  content: ""; inline-size: 1.5rem; block-size: 2px; background: var(--volt-400);
}
.secao__cab h2 { font-size: var(--t-3xl); letter-spacing: -.03em; }
.secao__cab p { color: var(--site-texto-2); margin-block-start: var(--e-sm); font-size: var(--t-lg); }

/* ---------- Cabeçalho ---------- */
.site-topo {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in oklab, var(--site-fundo) 82%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--site-borda);
}
.site-topo__interno {
  display: flex; align-items: center; gap: var(--e-md);
  min-block-size: 4rem;
}
.site-marca {
  display: flex; align-items: center; gap: var(--e-xs); white-space: nowrap;
  font-family: var(--fonte-titulo); font-weight: var(--peso-alto);
  font-size: var(--t-lg); letter-spacing: -.02em; color: #fff; text-decoration: none;
}
.site-marca__ponto {
  inline-size: .7rem; block-size: .7rem; border-radius: 50%;
  background: var(--volt-400); box-shadow: 0 0 0 5px color-mix(in oklab, var(--volt-400) 20%, transparent);
}
.site-nav { display: none; margin-inline-start: auto; gap: var(--e-lg); }
@media (min-width: 56rem) { .site-nav { display: flex; } }
.site-nav a {
  display: inline-flex; align-items: center;
  min-block-size: var(--toque-min);          /* alvo de toque, mesmo no menu do topo */
  color: var(--site-texto-2); text-decoration: none; font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  transition: color var(--mov-rapido) var(--curva);
}
.site-nav a:hover { color: #fff; }
.site-topo__acoes { margin-inline-start: auto; display: flex; gap: var(--e-xs); align-items: center; }
/* No celular o nome da academia não pode quebrar em duas linhas por causa dos botões. */
@media (max-width: 26rem) {
  .site-marca { font-size: var(--t-md); }
  .site-topo__acoes .btn-site { padding-inline: var(--e-sm); font-size: var(--t-xs); }
}
@media (min-width: 56rem) { .site-topo__acoes { margin-inline-start: var(--e-lg); } }

.btn-site {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2xs);
  min-block-size: var(--toque-min); padding-inline: var(--e-md);
  border-radius: var(--r-pill); border: 1px solid var(--site-borda);
  color: var(--site-texto); background: transparent;
  font-size: var(--t-sm); font-weight: var(--peso-forte); text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva),
              transform var(--mov-rapido) var(--curva), box-shadow var(--mov-base) var(--curva);
}
.btn-site:hover { background: var(--site-superficie); color: #fff; }
.btn-site:active { transform: translateY(1px); }
.btn-site--primario {
  background: var(--volt-400); border-color: var(--volt-400); color: var(--gray-950);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--volt-400) 45%, transparent);
}
.btn-site--primario:hover {
  background: var(--volt-300); color: var(--gray-950);
  box-shadow: 0 8px 30px -8px color-mix(in oklab, var(--volt-400) 60%, transparent);
}
.btn-site--grande { min-block-size: 3.25rem; padding-inline: var(--e-lg); font-size: var(--t-md); }
.btn-site svg { inline-size: 1.1rem; block-size: 1.1rem; }

/* ---------- Herói ---------- */
.heroi {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 1rem + 9vw, 7rem) clamp(3rem, 2rem + 5vw, 5.5rem);
}
.heroi::before,
.heroi::after { content: ""; position: absolute; pointer-events: none; }
.heroi::before {
  inset-block-start: -30%; inset-inline-end: -10%;
  inline-size: min(40rem, 90vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--volt-400) 16%, transparent), transparent 62%);
}
.heroi::after {
  inset-block-end: -40%; inset-inline-start: -20%;
  inline-size: min(34rem, 80vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, #2a6ff0 12%, transparent), transparent 65%);
}
.heroi__interno { position: relative; z-index: 1; display: grid; gap: var(--e-xl); }
@media (min-width: 60rem) { .heroi__interno { grid-template-columns: 1.15fr .85fr; align-items: center; } }

.heroi__selo {
  display: inline-flex; align-items: center; gap: var(--e-2xs);
  padding: .35rem var(--e-sm); border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--volt-400) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--volt-400) 30%, transparent);
  color: var(--volt-200); font-size: var(--t-xs); font-weight: var(--peso-forte);
}
.heroi h1 {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  line-height: .98; letter-spacing: -.04em;
  margin-block-start: var(--e-md);
}
.heroi h1 em { font-style: normal; color: var(--volt-400); }
.heroi__texto { color: var(--site-texto-2); font-size: var(--t-lg); max-inline-size: 46ch; margin-block-start: var(--e-md); }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--e-sm); margin-block-start: var(--e-lg); }
@media (max-width: 30rem) { .heroi__acoes .btn-site { inline-size: 100%; } }

.heroi__numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--e-md); margin-block-start: var(--e-xl);
  padding-block-start: var(--e-lg); border-block-start: 1px solid var(--site-borda);
}
.heroi__numeros strong {
  display: block; font-family: var(--fonte-titulo); font-size: var(--t-2xl);
  color: #fff; letter-spacing: -.02em;
}
.heroi__numeros span { font-size: var(--t-xs); color: var(--site-texto-2); }

/* Cartão de horário do dia, no lugar de foto */
.heroi__hoje {
  background: var(--site-superficie); border: 1px solid var(--site-borda);
  border-radius: var(--r-xl); padding: var(--e-lg);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8);
}
.heroi__hoje h2 { font-size: var(--t-md); }
.heroi__hoje ul { list-style: none; padding: 0; margin: var(--e-md) 0 0; display: grid; gap: var(--e-xs); }
.heroi__hoje li {
  display: flex; align-items: center; gap: var(--e-sm);
  padding-block: var(--e-xs); border-block-end: 1px solid var(--site-borda);
}
.heroi__hoje li:last-child { border-block-end: 0; }
.heroi__hoje time {
  font-family: var(--fonte-titulo); font-weight: var(--peso-alto);
  font-variant-numeric: tabular-nums; color: var(--volt-300); font-size: var(--t-sm);
}
.heroi__hoje strong { font-size: var(--t-sm); font-weight: var(--peso-forte); display: block; }
.heroi__hoje small { color: var(--site-texto-2); font-size: var(--t-xs); }

/* ---------- Cartões genéricos do site ---------- */
.cartoes {
  display: grid; gap: var(--e-md);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.cartao-site {
  position: relative; overflow: hidden;
  background: var(--site-superficie); border: 1px solid var(--site-borda);
  border-radius: var(--r-lg); padding: var(--e-lg);
  transition: border-color var(--mov-base) var(--curva), transform var(--mov-base) var(--curva);
}
.cartao-site:hover { border-color: color-mix(in oklab, var(--cor-mod, var(--volt-400)) 55%, transparent); transform: translateY(-3px); }
.cartao-site__marca {
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--cor-mod, var(--volt-400)) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--cor-mod, var(--volt-400)) 45%, transparent);
  display: grid; place-items: center; font-family: var(--fonte-titulo);
  font-weight: var(--peso-alto); color: var(--cor-mod, var(--volt-400));
}
.cartao-site h3 { font-size: var(--t-lg); margin-block-start: var(--e-md); }
.cartao-site p { color: var(--site-texto-2); font-size: var(--t-sm); margin-block-start: var(--e-2xs); }
.cartao-site__meta { margin-block-start: var(--e-md); font-size: var(--t-xs); color: var(--site-texto-2); }

/* ---------- Grade de aulas ---------- */
.grade-site {
  display: grid; gap: var(--e-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.grade-site__dia {
  background: var(--site-superficie); border: 1px solid var(--site-borda);
  border-radius: var(--r-md); padding: var(--e-sm);
}
.grade-site__dia > h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--site-texto-2); margin-block-end: var(--e-sm);
}
.grade-site__aula {
  display: grid; gap: 2px; padding-block: var(--e-xs);
  border-block-end: 1px solid var(--site-borda);
}
.grade-site__aula:last-child { border-block-end: 0; }
.grade-site__aula time { font-family: var(--fonte-titulo); font-size: var(--t-sm); color: #fff; font-variant-numeric: tabular-nums; }
.grade-site__aula span { font-size: var(--t-xs); color: var(--site-texto-2); }
.grade-site__aula i {
  font-style: normal; font-size: var(--t-xs); font-weight: var(--peso-forte);
  color: var(--cor-mod, var(--volt-300));
}

/* ---------- Planos ---------- */
.planos-site__titulo {
  font-size: var(--t-md); color: var(--site-texto-2);
  font-weight: var(--peso-forte); letter-spacing: .01em;
  margin-block: var(--e-lg) var(--e-md);
}
.planos-site__titulo:first-of-type { margin-block-start: 0; }

.planos-site {
  display: grid; gap: var(--e-md);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  align-items: start;
}
.plano-site {
  display: flex; flex-direction: column; gap: var(--e-sm);
  background: var(--site-superficie); border: 1px solid var(--site-borda);
  border-radius: var(--r-lg); padding: var(--e-lg);
  block-size: 100%;
}
.plano-site--destaque {
  border-color: var(--volt-400);
  background: linear-gradient(180deg, color-mix(in oklab, var(--volt-400) 10%, var(--site-superficie)), var(--site-superficie));
  box-shadow: 0 24px 60px -34px color-mix(in oklab, var(--volt-400) 70%, transparent);
}
.plano-site__fita {
  align-self: start; padding: .2rem var(--e-xs); border-radius: var(--r-pill);
  background: var(--volt-400); color: var(--gray-950);
  font-size: var(--t-xs); font-weight: var(--peso-alto);
}
.plano-site h3 { font-size: var(--t-lg); }
.plano-site__preco { display: flex; align-items: baseline; gap: var(--e-2xs); }
.plano-site__preco b {
  font-family: var(--fonte-titulo); font-size: var(--t-3xl);
  color: #fff; letter-spacing: -.03em; line-height: 1;
}
.plano-site__preco span { color: var(--site-texto-2); font-size: var(--t-sm); }
.plano-site__desc { color: var(--site-texto-2); font-size: var(--t-sm); }
.plano-site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2xs); }
.plano-site li {
  display: flex; gap: var(--e-xs); align-items: start;
  font-size: var(--t-sm); color: var(--site-texto-2);
}
.plano-site li::before { content: "✓"; color: var(--volt-400); font-weight: var(--peso-alto); }
.plano-site .btn-site { margin-block-start: auto; }

/* ---------- Estrutura ---------- */
.lista-itens { display: grid; gap: var(--e-md); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.item-icone { display: flex; gap: var(--e-sm); align-items: start; }
.item-icone svg { inline-size: 1.5rem; block-size: 1.5rem; color: var(--volt-400); flex: none; }
.item-icone h3 { font-size: var(--t-md); }
.item-icone p { color: var(--site-texto-2); font-size: var(--t-sm); margin-block-start: var(--e-3xs); }

/* ---------- Localização ---------- */
.local { display: grid; gap: var(--e-xl); }
@media (min-width: 56rem) { .local { grid-template-columns: 1fr 1fr; } }
.local dl { display: grid; gap: var(--e-md); margin: 0; }
.local dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--site-texto-2); }
.local dd { margin: 0; font-size: var(--t-md); color: #fff; }
.local dd a { color: var(--volt-300); }

/* ---------- Chamada final ---------- */
.chamada {
  background: linear-gradient(135deg, color-mix(in oklab, var(--volt-400) 14%, var(--site-fundo)), var(--site-fundo) 65%);
  border: 1px solid color-mix(in oklab, var(--volt-400) 28%, transparent);
  border-radius: var(--r-xl); padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  text-align: center;
}
.chamada h2 { font-size: var(--t-3xl); letter-spacing: -.03em; }
.chamada p { color: var(--site-texto-2); font-size: var(--t-lg); margin-block-start: var(--e-sm); max-inline-size: 46ch; margin-inline: auto; }
.chamada__acoes { display: flex; gap: var(--e-sm); justify-content: center; flex-wrap: wrap; margin-block-start: var(--e-lg); }

/* ---------- Rodapé ---------- */
.site-rodape { border-block-start: 1px solid var(--site-borda); padding-block: var(--e-xl); }
.site-rodape__interno { display: grid; gap: var(--e-lg); }
@media (min-width: 48rem) { .site-rodape__interno { grid-template-columns: 1.2fr 1fr 1fr; } }
.site-rodape h3 { font-size: var(--t-sm); margin-block-end: var(--e-sm); }
.site-rodape p, .site-rodape li, .site-rodape a { color: var(--site-texto-2); font-size: var(--t-sm); }
.site-rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2xs); }
.site-rodape a { text-decoration: none; }
.site-rodape a:hover { color: #fff; text-decoration: underline; }
.site-rodape__legal {
  margin-block-start: var(--e-lg); padding-block-start: var(--e-md);
  border-block-start: 1px solid var(--site-borda);
  display: flex; flex-wrap: wrap; gap: var(--e-sm); justify-content: space-between;
  font-size: var(--t-xs); color: var(--gray-500);
}

/* ---------- Aviso de demonstração ---------- */
.faixa-demo {
  background: color-mix(in oklab, var(--avi-400) 18%, var(--site-fundo));
  border-block-end: 1px solid color-mix(in oklab, var(--avi-400) 35%, transparent);
  color: #f3d38a; font-size: var(--t-xs); text-align: center;
  padding-block: var(--e-xs);
}
.faixa-demo strong { color: #fff; }

/* ---------- Entrada suave ao rolar ----------
   Anima só o deslocamento, nunca a opacidade. Se qualquer renderizador não
   calcular a linha do tempo de rolagem — captura de página inteira, geração de
   PDF, leitor de link — o conteúdo continua visível, apenas 1rem deslocado.
   Com opacidade, o mesmo caso devolvia a página em branco.                     */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .revela {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 20%;
    }
    @keyframes revelar {
      from { transform: translateY(1rem) scale(.995); }
      to   { transform: none; }
    }
  }
}

@media print {
  .revela { transform: none !important; animation: none !important; }
  .faixa-demo, .site-topo { position: static; }
}