/* ==========================================================================
   gym.css — Design System da Saúde.Corpo Colubandê
   --------------------------------------------------------------------------
   Identidade visual: academia de bairro com energia premium.
   - Base escura ("carvão") que remete ao ambiente de treino noturno
   - Verde-limão como cor de energia/ação (CTAs, destaques)
   - Tipografia: "Archivo" (títulos, condensada e forte) + "Inter" (textos)

   ÍNDICE
   1. Tokens de cor e tipografia
   2. Tipografia e títulos de seção
   3. Botões customizados (variantes sobre o Bootstrap)
   4. Navbar
   5. Hero
   6. Cards (aulas, diferenciais, avaliações)
   7. Gráfico de horários de pico
   8. Seções alternadas e utilitários
   9. Animações de entrada (reveal on scroll)
   10. Rodapé e botão flutuante de WhatsApp
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Paleta principal (formato oklch para cores vivas e consistentes) */
  --sc-carvao: oklch(0.13 0.015 150);      /* fundo principal */
  --sc-carvao-2: oklch(0.17 0.02 150);     /* fundo de cards/seções alternadas */
  --sc-carvao-3: oklch(0.21 0.025 150);    /* bordas sutis, hover de superfícies */
  --sc-verde: oklch(0.87 0.24 132);        /* verde-limão de energia */
  --sc-verde-escuro: oklch(0.72 0.19 135); /* verde para hover */
  --sc-texto: oklch(0.96 0.005 120);       /* texto principal */
  --sc-texto-suave: oklch(0.72 0.02 145);  /* texto secundário */
  --sc-amarelo: oklch(0.88 0.17 95);       /* estrelas de avaliação */

  /* Tipografia */
  --sc-fonte-titulo: "Archivo", "Arial Black", sans-serif;
  --sc-fonte-texto: "Inter", "Segoe UI", sans-serif;

  /* Sombras e raios */
  --sc-sombra-card: 0 18px 45px -18px rgb(0 0 0 / 0.65);
  --sc-raio: 1rem;

  /* Sobrescreve variáveis do Bootstrap para herdar o tema escuro */
  --bs-body-bg: var(--sc-carvao);
  --bs-body-color: var(--sc-texto);
  --bs-body-font-family: var(--sc-fonte-texto);
  --bs-border-color: oklch(1 0 0 / 10%);
}

body {
  font-family: var(--sc-fonte-texto);
  background-color: var(--sc-carvao);
  color: var(--sc-texto);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--sc-verde);
  color: oklch(0.15 0.03 150);
}

/* ---------- 2. TIPOGRAFIA / TÍTULOS DE SEÇÃO ---------- */
h1, h2, h3, h4, .sc-fonte-titulo {
  font-family: var(--sc-fonte-titulo);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Rótulo pequeno acima do título da seção (ex.: "NOSSAS AULAS") */
.sc-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sc-verde);
}

.sc-rotulo::before {
  content: "";
  width: 2rem;
  height: 3px;
  background: var(--sc-verde);
  border-radius: 2px;
}

/* Título grande de cada seção */
.sc-titulo-secao {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0.75rem 0 1rem;
}

.sc-texto-suave { color: var(--sc-texto-suave); }

/* ---------- 3. BOTÕES (variantes sobre o Bootstrap) ---------- */
/* Botão principal verde-limão — usado em todos os CTAs */
.btn-sc {
  --bs-btn-font-weight: 700;
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-padding-y: 0.8rem;
  --bs-btn-border-radius: 999px;
  background: var(--sc-verde);
  border-color: var(--sc-verde);
  color: oklch(0.15 0.03 150);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-sc:hover,
.btn-sc:focus-visible {
  background: var(--sc-verde-escuro);
  border-color: var(--sc-verde-escuro);
  color: oklch(0.12 0.02 150);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px oklch(0.87 0.24 132 / 0.45);
}

/* Botão contornado — ações secundárias */
.btn-sc-outline {
  --bs-btn-font-weight: 700;
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-padding-y: 0.8rem;
  --bs-btn-border-radius: 999px;
  background: transparent;
  border: 2px solid oklch(1 0 0 / 25%);
  color: var(--sc-texto);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-sc-outline:hover,
.btn-sc-outline:focus-visible {
  border-color: var(--sc-verde);
  color: var(--sc-verde);
  transform: translateY(-2px);
}

/* ---------- 4. NAVBAR ---------- */
.sc-navbar {
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
  padding-block: 1rem;
}

/* Estado aplicado pelo JS (main.ts) quando a página rola */
.sc-navbar.sc-navbar--rolada {
  background: oklch(0.13 0.015 150 / 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -15px rgb(0 0 0 / 0.8);
  padding-block: 0.5rem;
}

.sc-navbar .navbar-brand {
  font-family: var(--sc-fonte-titulo);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--sc-texto);
}

.sc-navbar .navbar-brand span { color: var(--sc-verde); }

.sc-navbar .nav-link {
  color: var(--sc-texto-suave);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-inline: 0.35rem;
  transition: color 0.2s ease;
}

.sc-navbar .nav-link:hover,
.sc-navbar .nav-link.active { color: var(--sc-verde); }

.sc-navbar .navbar-toggler {
  border-color: oklch(1 0 0 / 25%);
}
.sc-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px oklch(0.87 0.24 132 / 0.35); }

/* Menu aberto no mobile: painel escuro para garantir legibilidade sobre o hero */
@media (max-width: 991.98px) {
  .sc-navbar .navbar-collapse {
    background: oklch(0.13 0.015 150 / 0.97);
    backdrop-filter: blur(12px);
    border: 1px solid oklch(1 0 0 / 8%);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
    box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.8);
  }
}

/* ---------- 5. HERO ---------- */
.sc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}

/* Imagem de fundo com máscara de degradê para legibilidade */
.sc-hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.sc-hero__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  animation: sc-hero-zoom 18s ease-in-out infinite alternate;
}

.sc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, oklch(0.13 0.015 150 / 0.95) 25%, oklch(0.13 0.015 150 / 0.55) 60%, oklch(0.13 0.015 150 / 0.35)),
    linear-gradient(to top, var(--sc-carvao), transparent 30%);
}

@keyframes sc-hero-zoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.12); }
}

.sc-hero__titulo {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 0.98;
}

@media (min-width: 800px) {
    .sc-hero__titulo {
      margin-top:15%;
    }
}

.py-5 {
    padding-top: 0rem !important;
}

.sc-hero__titulo em {
  font-style: normal;
  color: var(--sc-verde);
}

/* Selo de avaliação do Google exibido sobre o hero */
.sc-selo-nota {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: oklch(1 0 0 / 8%);
  border: 1px solid oklch(1 0 0 / 15%);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.sc-selo-nota .sc-estrelas { color: var(--sc-amarelo); letter-spacing: 2px; }

/* ---------- 6. CARDS ---------- */
/* Card base escuro usado em diferenciais, aulas e avaliações */
.sc-card {
  background: var(--sc-carvao-2);
  border: 1px solid oklch(1 0 0 / 8%);
  border-radius: var(--sc-raio);
  padding: 1.75rem;
  height: 100%;
  box-shadow: var(--sc-sombra-card);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.sc-card:hover {
  transform: translateY(-6px);
  border-color: oklch(0.87 0.24 132 / 0.45);
}

.sc-card__icone {
  display: inline-grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.9rem;
  background: oklch(0.87 0.24 132 / 0.12);
  color: var(--sc-verde);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* Card de avaliação com estrelas */
.sc-card-avaliacao .sc-estrelas { color: var(--sc-amarelo); font-size: 1.05rem; letter-spacing: 3px; }
.sc-card-avaliacao blockquote { font-size: 1.02rem; line-height: 1.6; }
.sc-card-avaliacao figcaption { color: var(--sc-texto-suave); font-size: 0.88rem; }

/* Resumo da nota (4,4 grande + barras) */
.sc-nota-grande {
  font-family: var(--sc-fonte-titulo);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--sc-verde);
}

.sc-barra-nota {
  height: 8px;
  border-radius: 4px;
  background: oklch(1 0 0 / 10%);
  overflow: hidden;
}

.sc-barra-nota > span {
  display: block;
  height: 100%;
  background: var(--sc-amarelo);
  border-radius: 4px;
}

/* ---------- 7. GRÁFICO DE HORÁRIOS DE PICO ---------- */
.sc-grafico-pico {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 140px;
}

.sc-grafico-pico .sc-barra {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  height: 100%;
  text-align: center;
}

.sc-grafico-pico .sc-barra > span:first-child {
  display: block;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(to top, oklch(0.72 0.19 135), var(--sc-verde));
  /* Altura animada pelo JS (main.ts) ao entrar na tela */
  height: 0;
  transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-grafico-pico .sc-barra > small {
  color: var(--sc-texto-suave);
  font-size: 0.75rem;
}

/* ---------- 8. SEÇÕES E UTILITÁRIOS ---------- */
.sc-secao { padding-block: clamp(4rem, 9vw, 7rem); }
.sc-secao--alternada { background: var(--sc-carvao-2); }

/* Lista de horários de funcionamento */
.sc-lista-horarios li {
  display: flex;
  justify-content: space-between;
  padding-block: 0.6rem;
  border-bottom: 1px dashed oklch(1 0 0 / 12%);
}

.sc-lista-horarios li span:last-child { font-weight: 700; color: var(--sc-verde); }

/* Selo "Aberto agora" — ponto pulsante */
.sc-status-aberto { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.sc-status-aberto::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sc-verde);
  animation: sc-pulso 1.6s ease-in-out infinite;
}

@keyframes sc-pulso {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.87 0.24 132 / 0.5); }
  50%      { box-shadow: 0 0 0 7px oklch(0.87 0.24 132 / 0); }
}

/* ---------- 9. ANIMAÇÕES DE ENTRADA (reveal on scroll) ---------- */
/* Estado inicial: invisível e levemente deslocado. O JS adiciona .sc-visivel. */
.sc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-reveal.sc-visivel {
  opacity: 1;
  transform: none;
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  .sc-reveal { opacity: 1; transform: none; transition: none; }
  .sc-hero__fundo img { animation: none; }
}

/* ---------- 10. RODAPÉ E WHATSAPP ---------- */
.sc-rodape {
  background: oklch(0.1 0.012 150);
  border-top: 1px solid oklch(1 0 0 / 8%);
}

.sc-rodape a { color: var(--sc-texto-suave); text-decoration: none; transition: color 0.2s ease; }
.sc-rodape a:hover { color: var(--sc-verde); }

/* Botão flutuante do WhatsApp (canto inferior direito) */
.sc-whats-flutuante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: oklch(0.75 0.19 150);
  color: oklch(0.13 0.02 150);
  box-shadow: 0 14px 30px -8px oklch(0.75 0.19 150 / 0.55);
  transition: transform 0.2s ease;
}

.sc-whats-flutuante:hover { transform: scale(1.08); color: oklch(0.13 0.02 150); }
.sc-whats-flutuante svg { width: 1.8rem; height: 1.8rem; }

/* ---------- 11. UTILITÁRIOS DA VERSÃO HTML ----------
   Classes que substituem os estilos inline usados na versão anterior. */
.sc-badge-check {
  background: var(--sc-verde);
  color: oklch(0.15 0.03 150);
}
.sc-estrelas--amarelo { color: var(--sc-amarelo); }
.sc-nota-label { width: 1rem; }
.sc-endereco { font-style: normal; }
.sc-link-simples { color: inherit; text-decoration: none; }
.sc-link-simples:hover { color: var(--sc-verde); }
.sc-mapa { min-height: 320px; }
.sc-mapa iframe { border: 0; border-radius: 0.75rem; min-height: 300px; }
.sc-verde { color: var(--sc-verde); }