/* ============================================================================
   PAMP FIT — landing. CSS em três camadas: tokens → componentes → seções.
   Os tokens são os de ../marca/tokens.css, copiados aqui para a página ser
   um arquivo só que abre sem build.
   ========================================================================== */

/* Archivo (OFL), servida daqui. Nada de Google Fonts: a chamada externa
   entregaria o IP de cada visitante a um terceiro. */
@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("fontes/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal;
  font-display: swap; src: url("fontes/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-style: normal;
  font-display: swap; src: url("fontes/archivo-800.woff2") format("woff2"); }
@font-face { font-family: "Archivo Expanded"; font-weight: 800; font-style: normal;
  font-display: swap; src: url("fontes/archivo-800-exp.woff2") format("woff2"); }

:root {
  --laranja: #FF5000;
  --laranja-claro: #FF6B24;
  --laranja-veu: rgba(255, 80, 0, 0.12);
  --fundo: #0C0C0E;
  --superficie: #141417;
  --elevado: #1C1C20;
  --linha: #2A2A30;
  --linha-forte: #43434C;
  --texto: #FFFFFF;
  --apoio: #A8A8AD;
  --fraco: #74747C;
  --sobre-laranja: #000000;

  --display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1180px;
  --gutter: 6vw;
  --cabecalho: 68px;
  --raio: 2px;
  --transicao: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--cabecalho); }
body {
  background: var(--fundo); color: var(--texto);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ── tipos ─────────────────────────────────────────────────────────────── */
.display {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 0.98;
  letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance;
}
.h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.05;
  letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance;
}
.h3 { font-weight: 800; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.01em; }
.olho {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--laranja);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.olho::before { content: ""; width: 26px; height: 2px; background: var(--laranja); }
.lead { font-size: 1.1875rem; line-height: 1.6; color: var(--apoio); max-width: 52ch; }
.laranja { color: var(--laranja); }

/* ── botões ────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1.05rem 2rem; border-radius: var(--raio);
  font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.04em;
  text-transform: uppercase; border: 2px solid transparent;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
/* Texto PRETO sobre o laranja — branco daria 3,28:1 e reprova em AA.
   É o erro que a peça atual da academia comete. */
.botao--acao { background: var(--laranja); color: var(--sobre-laranja); }
.botao--acao:hover { background: var(--laranja-claro); }
.botao--acao:active { transform: translateY(1px); }
.botao--linha { border-color: var(--linha-forte); color: var(--texto); }
.botao--linha:hover { border-color: var(--texto); background: rgba(255,255,255,.04); }
.botao svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ── cabeçalho ─────────────────────────────────────────────────────────── */
.cabecalho {
  position: fixed; inset: 0 0 auto; height: var(--cabecalho); z-index: 100;
  background: rgba(12,12,14,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.cabecalho .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cabecalho__logo img { height: 30px; }
.cabecalho__nav { display: flex; gap: 1.75rem; font-size: 0.875rem; font-weight: 600; }
.cabecalho__nav a { color: var(--apoio); transition: color var(--transicao); }
.cabecalho__nav a:hover { color: var(--texto); }
.cabecalho .botao { padding: 0.65rem 1.25rem; font-size: 0.8125rem; }

/* ── herói ─────────────────────────────────────────────────────────────── */
.heroi { position: relative; padding: calc(var(--cabecalho) + 5rem) 0 5rem; overflow: hidden; }
.heroi__fundo {
  position: absolute; inset: 0; z-index: 0;
  background: url("fotos/espaco-2.jpg") center/cover no-repeat;
  /* A foto é o argumento, mas texto sobre foto não se lê: a máscara escurece
     o lado do texto e deixa a imagem respirar do outro. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  opacity: .5;
}
.heroi__fundo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--fundo) 18%, rgba(12,12,14,.35) 65%, var(--fundo) 100%);
}
.heroi .container { position: relative; z-index: 1; }
.heroi__titulo { margin-top: 1.5rem; max-width: 16ch; }
.heroi__lead { margin-top: 1.5rem; }
.heroi__acoes { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.875rem; }
/* Os quatro fatos da capa, cada um NA SUA CAIXA.
   Antes eram quatro pares soltos separados por espaco, e a leitura corrida
   colava um no outro — "3 anos" ao lado de "R$ 18,90" virava "tres anos por
   dezoito reais", que nao e o que nenhum dos dois diz. A borda nao e enfeite:
   e ela que informa onde um fato termina e o outro comeca. */
.heroi__selos {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.heroi__selos > div {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .02);
}
.selo__num {
  font-family: var(--display); font-weight: 800; line-height: 1;
  /* clamp em vez de tamanho fixo: "R$ 18,90" e o mais largo dos quatro e
     quebrava em duas linhas na caixa estreita do celular. */
  font-size: clamp(1.35rem, 4.2vw, 1.75rem);
  white-space: nowrap;
}
.selo__rot { font-size: 0.8125rem; color: var(--fraco); margin-top: 0.45rem; }

/* ── seções ────────────────────────────────────────────────────────────── */
.secao { padding: 5.5rem 0; border-top: 1px solid var(--linha); }
.secao__cabeca { max-width: 60ch; }
.secao__cabeca .h2 { margin-top: 1.25rem; }
.secao__cabeca .lead { margin-top: 1.25rem; }

/* modalidades: a grade é a lista, sem marcador */
.modalidades { margin-top: 3rem; display: grid; gap: 1px; background: var(--linha);
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); border: 1px solid var(--linha); }
.modalidade { background: var(--fundo); padding: 1.5rem 1.5rem 1.65rem; transition: background var(--transicao); }
.modalidade:hover { background: var(--superficie); }
.modalidade__n { font-size: 0.75rem; font-weight: 600; color: var(--laranja); letter-spacing: .1em; }
.modalidade h3 { margin-top: 0.6rem; font-size: 1.0625rem; font-weight: 800; }
.modalidade p { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--apoio); line-height: 1.5; }

/* estrutura: cartões com foto */
.estrutura { margin-top: 3rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.cartao img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.cartao__corpo { padding: 1.5rem; }
.cartao__corpo p { margin-top: 0.5rem; color: var(--apoio); font-size: 0.9375rem; }

.itens { margin-top: 2.5rem; display: grid; gap: 0.75rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.item { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9375rem; color: var(--apoio); }
.item::before {
  content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: 0.5rem;
  background: var(--laranja);
}

/* Acessibilidade: destaque SEM cara de aviso.
   A versão anterior era caixa com borda laranja e fundo tingido, que é a forma
   que a web usa para erro e alerta — a informação boa chegava com tom de
   advertência. Agora o destaque vem de uma régua lateral e do espaço, não de
   uma moldura de alarme. */
.acesso { margin-top: 3.5rem; padding-left: 1.75rem; border-left: 3px solid var(--laranja); }
.acesso .h3 { color: var(--texto); }
.acesso p { margin-top: 0.6rem; color: var(--apoio); max-width: 52ch; }
.itens--acesso { margin-top: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* horários */
.horarios { margin-top: 2.5rem; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.horario { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 1.5rem; border-bottom: 1px solid var(--linha); }
.horario:last-child { border-bottom: 0; }
.horario--fechado { color: var(--fraco); }
.horario dt { font-weight: 600; }
.horario dd { font-weight: 800; letter-spacing: .01em; }
.horario--hoje { background: var(--superficie); }
.horario--hoje dd { color: var(--laranja); }

/* visita / mapa */
.visita { display: grid; gap: 2.5rem; grid-template-columns: 1fr 1fr; align-items: start; margin-top: 3rem; }
.endereco { font-size: 1.125rem; line-height: 1.7; }
.endereco strong { display: block; font-weight: 800; }
.contato { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.mapa { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; min-height: 320px; }
/* O mapa no tom da marca, por FILTRO e não por API.
   O embed público do Maps (output=embed) não aceita estilo e não usa chave;
   estilizar de verdade exigiria a Embed API paga. O filtro faz o mesmo efeito
   de graça, e a ordem importa: grayscale apaga as cores originais, invert
   escurece o papel do mapa, sepia+saturate+hue-rotate tingem no laranja.

   O valor anterior (invert .92 sem tingimento) deixava tudo cinza.

   Ressalva honesta: tingir custa um pouco de legibilidade, porque o mapa perde
   o código de cor dele (verde=parque, azul=água). Aqui isso é aceitável porque
   o mapa é contexto, não navegação: quem vai se deslocar usa o botão "Traçar
   rota", que abre o Maps de verdade, colorido e com trânsito. */
.mapa iframe {
  width: 100%; height: 100%; min-height: 320px; border: 0; display: block;
  filter: grayscale(1) invert(1) sepia(1) saturate(4) hue-rotate(-18deg)
          contrast(.95) brightness(.88);
  transition: filter var(--pf-transicao, 180ms ease);
}
/* No hover o mapa CLAREIA, mas continua no tom da marca.
   Antes aqui estava `filter: none`, com a intenção de devolver legibilidade a
   quem parasse para ler. Na prática o salto era brusco e lia como defeito: a
   página parecia desconfigurar embaixo do cursor. Agora o tingimento apenas
   afrouxa — o mapa fica mais legível sem sair da identidade. */
.mapa:hover iframe {
  filter: grayscale(1) invert(1) sepia(.6) saturate(2.2) hue-rotate(-18deg)
          contrast(.98) brightness(.96);
}

/* chamada final */
.chamada { padding: 6rem 0; text-align: center; border-top: 1px solid var(--linha); }
.chamada .lead { margin: 1.5rem auto 0; }
.chamada .botao { margin-top: 2.5rem; }
.chamada__nota { margin-top: 1.25rem; font-size: 0.875rem; color: var(--fraco); }

/* rodapé */
.rodape { padding: 3rem 0; border-top: 1px solid var(--linha); background: var(--superficie); }
.rodape .container { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: center; }
.rodape img { height: 34px; }
.rodape__info { font-size: 0.875rem; color: var(--fraco); line-height: 1.7; }
.rodape__assinatura { font-size: 0.8125rem; color: var(--fraco); }
.rodape__assinatura a { color: var(--apoio); border-bottom: 1px solid var(--linha-forte); }

/* botão flutuante de WhatsApp */
.zap {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--laranja); color: var(--sobre-laranja);
  display: grid; place-items: center;
  box-shadow: 0 6px 26px rgba(0,0,0,.55);
  transition: transform var(--transicao), background var(--transicao);
}
.zap:hover { background: var(--laranja-claro); transform: translateY(-2px); }
.zap svg { width: 30px; height: 30px; }

/* ── responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .visita { grid-template-columns: 1fr; }
  .cabecalho__nav { display: none; }
  .heroi { padding-top: calc(var(--cabecalho) + 3rem); }
  .heroi__fundo { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
                          mask-image: linear-gradient(180deg, transparent 0%, #000 55%); opacity: .32; }
  .heroi__selos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  /* O botao flutuante do WhatsApp fica no canto inferior direito e, no celular,
     caia exatamente sobre a caixa do PRECO — o numero mais importante da capa,
     tapado pelo botao. Como os quatro fatos sao independentes (nao sao uma
     sequencia), trocar a ordem visual e inofensivo: o preco sobe para a
     primeira caixa e sai de baixo do botao. */
  .heroi__selos > div:last-child { order: -1; }
  .secao { padding: 4rem 0; }
}
@media (max-width: 560px) {
  .heroi__acoes .botao { width: 100%; }
}