/* Dynamo Suplementos — preto e vermelho, que e a identidade da loja
   (fachada, camiseta da equipe e feed). Condensada nos titulos pra pegar o
   tom de academia sem virar cartaz. */
:root {
  --preto: #0B0B0D;
  --carvao: #141418;
  --grafite: #1E1E24;
  --vermelho: #E01B24;
  --vermelho-claro: #FF3B44;
  --branco: #FFFFFF;
  --cinza: #A8A8B3;
  --linha: #2A2A32;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--preto);
  color: var(--branco);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.marca {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 26px; letter-spacing: 0.02em;
  display: inline-flex; flex-direction: column; line-height: 0.95;
}
.marca__sub {
  font-size: 11px; letter-spacing: 0.34em; color: var(--vermelho);
  font-weight: 600;
}

.topo { border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: rgba(11,11,13,0.92); backdrop-filter: blur(10px); z-index: 10; }
.topo__wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 6px; font-weight: 700; font-size: 15px;
  transition: transform 140ms ease, background 140ms ease;
  border: 2px solid transparent; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--vermelho-claro); outline-offset: 3px; }
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--zap { background: var(--vermelho); color: #fff; }
.btn--zap:hover { background: var(--vermelho-claro); }
.btn--linha { border-color: var(--linha); color: var(--branco); }
.btn--linha:hover { border-color: var(--vermelho); }

.hero { padding: 84px 0 64px; background: radial-gradient(900px 420px at 12% -10%, rgba(224,27,36,0.16), transparent 62%); }
.hero__olho { color: var(--vermelho); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; }
.hero__titulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(44px, 9vw, 92px); font-weight: 800; line-height: 0.94;
  letter-spacing: -0.01em; margin-bottom: 22px;
}
.hero__texto { font-size: 18px; color: var(--cinza); max-width: 560px; margin-bottom: 32px; }
.hero__acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 52px; }

.provas { display: flex; gap: 40px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid var(--linha); }
.prova { display: flex; flex-direction: column; }
.prova strong { font-family: 'Barlow Condensed', sans-serif; font-size: 34px; font-weight: 800; color: var(--vermelho); line-height: 1; }
.prova span { font-size: 13px; color: var(--cinza); margin-top: 4px; }

.faixa { padding: 64px 0; background: var(--carvao); }
.faixa__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.cartao { background: var(--grafite); border: 1px solid var(--linha); border-radius: 10px; padding: 26px; }
.cartao h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.cartao p { color: var(--cinza); font-size: 15px; }

.loja { padding: 76px 0; }
.loja__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px; }
.loja h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 38px; font-weight: 800; margin-bottom: 18px; }
.loja__end { font-size: 19px; margin-bottom: 8px; }
.loja__nota { color: var(--cinza); font-size: 15px; margin-bottom: 18px; }
.loja__hora { color: var(--cinza); margin-bottom: 24px; font-size: 15px; }
.loja__hora span { color: var(--branco); font-weight: 600; }
.loja__chamada { background: var(--carvao); border: 1px solid var(--linha); border-radius: 12px; padding: 32px; }
.loja__chamada p { color: var(--cinza); margin-bottom: 22px; }
.loja__zap { margin-top: 16px; font-size: 14px; color: var(--cinza); }

.rodape { border-top: 1px solid var(--linha); padding: 34px 0; }
.rodape .wrap { display: flex; flex-direction: column; gap: 10px; }
.rodape p { color: var(--cinza); font-size: 14px; }
.marca--rodape { font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}