/* ---------------------------------------------------------------------------
   Fontes hospedadas aqui de propósito: nada de CDN de terceiro, para o
   visitante não ter o IP entregue a outra empresa só por abrir a página.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/fontes/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/fontes/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fontes/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fontes/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   Paleta: mesma dos design tokens do produto (preto + off-white). A página é
   monocromática de propósito: a ÚNICA cor é o ponto verde do selo "no ar", que
   informa um estado. O resto de cor que aparece vem de dentro das capturas do
   app, onde a cor também significa alguma coisa (a carga acesa no músculo).
   --------------------------------------------------------------------------- */
:root {
  --papel:        #F4F2ED;
  --superficie:   #FAF8F4;
  --tinta:        #141413;
  --tinta-suave:  #55534E;
  --tinta-fraca:  #98948C;
  --linha:        #E9E6DF;
  --linha-forte:  #C8C4BC;
  --dado-ok:      #1E7F4F;
  --dado-atencao: #9A6B00;
  --dado-risco:   #B3261E;
  --acao:         #141413;
  --acao-tinta:   #FAF8F4;
  --acao-hover:   #2A2A27;

  --sans: 'Inter', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --margem: clamp(1.25rem, 5vw, 5rem);
  --largura: 68rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel:       #0C0C0B;
    --superficie:  #141413;
    --tinta:       #F4F2ED;
    --tinta-suave: #98948C;
    --tinta-fraca: #6E6B65;
    --linha:       #2A2A27;
    --linha-forte: #55534E;
    --dado-ok:      #4FBF87;
    --dado-atencao: #D6A339;
    --dado-risco:   #E8756C;
    --acao:        #F4F2ED;
    --acao-tinta:  #0C0C0B;
    --acao-hover:  #FFFFFF;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.65;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 2px;
}

.faixa { padding-inline: var(--margem); }
.limite { max-width: var(--largura); margin-inline: auto; }

/* Rótulo utilitário: mono, caixa alta, minúsculo. É a voz "de sistema" da
   página, e só ele usa mono. */
.rotulo {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--linha);
}
.marca { font-size: 1rem; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; }
.marca-sufixo { font-family: var(--mono); font-weight: 500; color: var(--tinta-fraca); letter-spacing: 0; }
.topo-contato {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  color: var(--tinta-suave); text-decoration: none;
  border-bottom: 1px solid var(--linha-forte); padding-bottom: 1px;
}
.topo-contato:hover { color: var(--tinta); border-color: currentColor; }

/* ---------- abertura ---------- */
.abertura { padding-block: clamp(3.5rem, 11vw, 7.5rem) clamp(2.5rem, 6vw, 4rem); }
.abertura-rotulo { display: block; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.titulo {
  margin: 0;
  font-size: clamp(2.5rem, 8.2vw, 5.75rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.042em;
  max-width: 15ch;
}
.titulo-eco { color: var(--tinta-suave); }
.abertura-texto {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* ---------- tira de dados ---------- */
.tira {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  border-block: 1px solid var(--linha);
}
.tira-item { background: var(--papel); padding: 1.25rem 0 1.5rem; padding-inline-end: 1rem; }
.tira-item:nth-child(n+2) { padding-inline-start: 1rem; }
.tira-valor { display: block; margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; }
.tira-valor a { text-decoration: none; border-bottom: 1px solid var(--linha-forte); }
.tira-valor a:hover { border-color: currentColor; }

/* ---------- produto ---------- */
.produto { padding-block: clamp(4rem, 10vw, 7rem); }
.produto-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
.produto-cabecalho { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }
.selo {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-suave);
  border: 1px solid var(--linha-forte); border-radius: 9999px;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
}
.selo::before {
  content: ''; width: 6px; height: 6px; border-radius: 9999px;
  background: var(--dado-ok);
}
.produto-nome {
  margin: 1.25rem 0 0;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.1;
}
.produto-tese {
  margin: 1rem 0 0;
  font-size: 1.125rem; line-height: 1.45; letter-spacing: -0.018em;
  max-width: 34ch; text-wrap: balance;
}
.produto-texto { margin: 1.25rem 0 0; max-width: 48ch; color: var(--tinta-suave); }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.botao {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 1.125rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.008em;
  text-decoration: none; border-radius: 0.625rem;
  border: 1px solid transparent;
  transition: background-color 120ms cubic-bezier(.2,0,0,1), border-color 120ms cubic-bezier(.2,0,0,1), color 120ms cubic-bezier(.2,0,0,1);
}
.botao-cheio { background: var(--acao); color: var(--acao-tinta); }
.botao-cheio:hover { background: var(--acao-hover); }
.botao-vazio { border-color: var(--linha-forte); color: var(--tinta); }
.botao-vazio:hover { border-color: var(--tinta); background: var(--superficie); }

/* ---------- a pergunta (contraponto tipografico do bloco do produto) ---------- */
.pergunta { border-top: 1px solid var(--tinta); padding-top: 1rem; }
.pergunta-texto {
  margin: 0.875rem 0 0;
  font-size: clamp(1.75rem, 4.4vw, 2.75rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.038em;
  text-wrap: balance;
}

/* ---------- as tres telas reais do app ---------- */
.telas { padding-block: clamp(3.5rem, 9vw, 6rem); border-top: 1px solid var(--linha); }
.telas-intro { margin: 0.875rem 0 0; text-wrap: pretty; color: var(--tinta-suave); max-width: 44ch; }
.telas-grade {
  list-style: none; margin: clamp(2.25rem, 5vw, 3.25rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
.tela { display: flex; flex-direction: column; }
/* Numeracao ganha lugar aqui porque a ordem e real: e a sequencia que o aluno
   percorre, do treino do dia ate o corpo quatro semanas depois. */
.tela-num {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  color: var(--tinta-fraca); letter-spacing: 0.09em;
  border-top: 1px solid var(--tinta); padding-top: 0.75rem;
}
.tela-titulo { margin: 0.5rem 0 0.5rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.022em; line-height: 1.25; }
.tela-texto { margin: 0 0 1.5rem; color: var(--tinta-suave); font-size: 0.875rem; }
.tela-img {
  display: block; width: 100%; height: auto; margin-top: auto;
  border: 1px solid var(--linha); border-radius: 1.25rem;
  background: #0C0C0B;
  box-shadow: 0 8px 28px rgba(12,12,11,0.12);
}
@media (prefers-color-scheme: dark) {
  .tela-img { box-shadow: none; }
}

/* ---------- princípios ---------- */
.principios { padding-block: clamp(3rem, 8vw, 5rem); border-top: 1px solid var(--linha); }
.principios-grade {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: 2.5rem;
}
.principio-titulo {
  margin: 0.875rem 0 0.625rem;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.022em; line-height: 1.25;
}
.principio-texto { margin: 0; color: var(--tinta-suave); }
.principio { border-top: 1px solid var(--tinta); padding-top: 0.875rem; }

/* ---------- contato ---------- */
.contato { padding-block: clamp(3.5rem, 9vw, 6rem); border-top: 1px solid var(--linha); }
.contato-titulo { margin: 0.875rem 0 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.032em; }
.contato-texto { margin: 0.75rem 0 0; max-width: 42ch; color: var(--tinta-suave); }
.contato-email {
  display: inline-block; margin-top: 1.75rem;
  font-size: clamp(1.25rem, 3.6vw, 2rem); font-weight: 500; letter-spacing: -0.03em;
  text-decoration: none;
  border-bottom: 2px solid var(--linha-forte); padding-bottom: 0.1em;
  transition: border-color 120ms cubic-bezier(.2,0,0,1);
}
.contato-email:hover { border-color: var(--tinta); }

/* ---------- rodapé ---------- */
.rodape {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.5rem 2.5rem;
  border-top: 1px solid var(--linha);
}
.rodape-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.creditos {
  flex: 1 1 100%; order: 3; margin: 0.5rem 0 0;
  font-size: 0.75rem; line-height: 1.5; color: var(--tinta-fraca); max-width: 60ch;
}
.creditos a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.creditos a:hover { color: var(--tinta); }
.rodape a { text-decoration: none; color: var(--tinta-fraca); }
.rodape a:hover { color: var(--tinta); }

/* ---------- telas estreitas ---------- */
@media (max-width: 56rem) {
  .produto-grade { grid-template-columns: minmax(0, 1fr); }
  .principios-grade { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .telas-grade { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .tela-img { max-width: 22rem; }
}
@media (max-width: 34rem) {
  .tira { grid-template-columns: minmax(0, 1fr); }
  .tira-item:nth-child(n+2) { padding-inline-start: 0; }
  .titulo { max-width: none; }
  .acoes .botao { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
}