/* Página de apresentação, servida em `/`. Sobe DEPOIS do
   nocturne.css e usa os tokens dele — a marca tem uma fonte só, e uma
   exportação nova do design system chega aqui sem passar por este arquivo.

   O que NÃO está aqui, de propósito: os estilos internos dos aparelhos da
   vitrine. Eles são cópia do que o `app.js` desenha, e o `app.js` escreve
   `style="…"` direto na marcação — copiar com classe inventada faria as duas
   metades divergirem em silêncio na primeira mudança da aplicação. O que fica
   neste arquivo é o layout da PÁGINA, que não existe no aplicativo. */

/* A família da MARCA, e só dela — mesma decisão do app.css. */
:root {
  --font-marca: "Space Grotesk", var(--font-heading);
  --telefone-largura: min(360px, calc(100vw - 32px));
  --telefone-altura: min(720px, calc(200vw - 64px));
}

body.tema-claro {
  --color-bg: #eeeef4;
  --color-surface: #ffffff;
  --color-text: #1b1c26;
  --color-divider: color-mix(in srgb, #1b1c26 14%, transparent);
  --color-neutral-100: #292b31;
  --color-neutral-500: #75798c;
  --color-neutral-600: #9397ab;
  --color-neutral-800: #e4e7f5;
  --color-neutral-900: #f3f5fe;
  --color-accent-100: #2b2741;
  --color-accent-300: #5d5294;
  --color-accent-400: #5d5294;
  --color-accent-700: #d2cefd;
  --color-accent-800: #e7e5fe;
  --color-accent-900: #f5f4ff;
  --color-success: #15803d;
  --shadow-sm: 0 1px 2px rgba(27,28,38,.10), 0 0 0 1px rgba(27,28,38,.07);
  --shadow-md: 0 4px 14px rgba(27,28,38,.12), 0 0 0 1px rgba(27,28,38,.08);
  --shadow-lg: 0 16px 40px rgba(27,28,38,.18), 0 0 0 1px rgba(27,28,38,.10);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* A LP é uma composição larga com aparelhos que sangram para fora da coluna.
     Sem isto, o que sangra vira barra de rolagem horizontal no celular. */
  overflow-x: hidden;
}
main { display: block; }

h1, h2, h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0;
}
p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-2); text-decoration: underline; }
svg { display: block; }

/* A coluna preserva uma área útil estável antes de empilhar os blocos. O
   respiro cresce até 140px sem comprimir texto e aparelho entre os breakpoints. */
.faixa { padding-inline: clamp(24px, calc((100vw - 1160px) / 2), 140px); }

.btn-grande { min-height: 48px; padding-inline: 22px; font-size: 15px; }

/* — cabeçalho — */
.topo { display: flex; align-items: center; gap: 40px; padding-block: 24px; }
.topo-marca { display: flex; align-items: center; gap: 12px; flex: none; }
.marca-icone { width: 36px; height: 36px; display: grid; place-items: center; color: var(--color-accent); }
.marca-nome { font-family: var(--font-marca); font-weight: 500; font-size: 22px; letter-spacing: -.01em; }
.marca-nome-acento { color: var(--color-accent); }
.topo-nav { display: flex; align-items: center; gap: 28px; flex: 1; }
.topo-nav a, .topo-nav-botao { color: color-mix(in srgb, var(--color-text) 68%, transparent); font-size: 14.5px; }
.topo-nav a:hover, .topo-nav-botao:hover { color: var(--color-accent); }
/* Botão porque abre diálogo, e não navega — mas no meio de âncoras ele não pode
   parecer outra coisa. O `font` não se herda em <button>; sem repetir a família
   aqui, ele sai no default do navegador ao lado dos vizinhos. */
.topo-nav-botao {
  padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit;
  cursor: pointer;
}
.topo-acoes { display: flex; align-items: center; gap: 10px; flex: none; }
.topo-botao { min-width: 120px; min-height: 48px; padding-inline: 22px; font-size: 15px; }
.tema-botao { width: 48px; min-height: 48px; padding-inline: 0; color: var(--color-text); }
/* Um ícone só, o do tema de DESTINO: sol no escuro, lua no claro. Os dois
   níveis de classe não são enfeite — `.btn svg { display: block }` do
   nocturne.css tem especificidade (0,1,1) e vencia `.tema-icone-lua`, então no
   escuro a lua ficava visível junto com o sol. */
.tema-botao .tema-icone-lua { display: none; }
body.tema-claro .tema-botao .tema-icone-sol { display: none; }
body.tema-claro .tema-botao .tema-icone-lua { display: block; }

/* — visão geral do produto — */
.visao-geral { padding-top: 84px; padding-bottom: 24px; }
.visao-cabecalho { max-width: 900px; margin-inline: auto; text-align: center; }
.visao-cabecalho h2 {
  margin-top: 18px; font-size: clamp(34px, 4vw, 58px); line-height: 1.04; letter-spacing: -0.028em;
  text-wrap: balance;
}
.visao-cabecalho h2 span { color: var(--color-accent); }
.visao-cabecalho > p {
  margin-top: 22px; font-size: 18px; line-height: 1.62; text-wrap: pretty;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.visao-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 52px; }
.visao-card {
  display: flex; flex-direction: column; gap: 12px; padding: 26px 22px 28px;
  border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.visao-card > svg { flex: none; color: var(--color-accent); }
.visao-card h2 { font-size: 18px; letter-spacing: -0.012em; }
.visao-card p {
  margin-top: 8px; font-size: 14.5px; line-height: 1.55; text-wrap: pretty;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

/* — nutrição — */
.nutricao {
  display: flex; align-items: center; gap: 96px; padding-top: 100px; padding-bottom: 100px;
  background: var(--color-surface);
}
.nutricao-texto h2 { margin-top: 16px; font-size: clamp(27px, 2.5vw, 36px); line-height: 1.12; letter-spacing: -0.022em; }
.nutricao-texto p {
  margin-top: 20px; font-size: 17px; line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.nutricao-texto p + p { margin-top: 18px; }
.app-icone { width: 26px; height: 26px; display: grid; place-items: center; color: var(--color-accent); flex: none; }
.app-marca-nome span { color: var(--color-accent); }
.nutricao-app { padding: 6px 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.nutricao-dia { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nutricao-dia span { color: var(--color-neutral-500); font-size: 24px; line-height: 1; }
.nutricao-dia strong { font-family: var(--font-heading); font-weight: 500; font-size: 15px; }
.nutricao-resumo {
  display: flex; gap: 10px; padding: 13px 12px; border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-sm); text-align: center;
}
.nutricao-resumo > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nutricao-resumo strong { font-family: var(--font-heading); font-weight: 500; font-size: 17px; font-variant-numeric: tabular-nums; }
.nutricao-resumo span { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.nutricao-resumo .nutricao-deficit, .nutricao-resumo .nutricao-deficit span { color: var(--color-accent); }
.nutricao-entrada {
  padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--color-divider);
  background: var(--color-surface); font-size: 13px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.nutricao-acoes { display: flex; gap: 8px; }
.nutricao-acoes .btn { min-height: 44px; }
.nutricao-acoes .btn-primary { flex: 1; }
.nutricao-painel {
  display: flex; flex-direction: column; gap: 11px; padding: 13px 12px;
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.nutricao-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nutricao-total strong { font-family: var(--font-heading); font-weight: 500; font-size: 15px; }
.nutricao-total strong:last-child { color: var(--color-accent); font-variant-numeric: tabular-nums; }
.nutricao-macros { display: flex; gap: 8px; }
.nutricao-macros > span {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 7px 8px;
  border-radius: var(--radius-sm); background: var(--color-neutral-900);
}
.nutricao-macros strong { font-family: var(--font-heading); font-weight: 500; font-size: 13.5px; }
.nutricao-macros small { font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.nutricao-refeicao { display: flex; flex-direction: column; gap: 9px; padding-top: 10px; border-top: 1px solid var(--color-divider); }
.nutricao-refeicao > div { display: flex; align-items: center; justify-content: space-between; }
.nutricao-refeicao > div small { color: var(--color-neutral-500); }
.nutricao-refeicao p { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.nutricao-refeicao p > strong { font-family: var(--font-heading); font-weight: 500; font-size: 14px; }
.nutricao-refeicao p > span { font-size: 11.5px; color: var(--color-neutral-500); }
.nutricao-refeicao em {
  display: inline-block; font-family: var(--font-body); font-size: 10px; font-style: normal; font-weight: 400;
  padding: 1px 6px; border: 1px solid var(--color-accent); border-radius: 6px; color: var(--color-accent);
}
.nutricao-pdf {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.nutricao-pdf > b {
  width: 34px; height: 34px; border-radius: 6px; flex: none; display: grid; place-items: center;
  background: var(--color-neutral-800); color: var(--color-accent); font-size: 9px; font-weight: 400; letter-spacing: .06em;
}
.nutricao-pdf > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nutricao-pdf strong { overflow: hidden; text-overflow: ellipsis; font-family: var(--font-heading); font-weight: 500; font-size: 13.5px; }
.nutricao-pdf small { font-size: 11.5px; color: var(--color-neutral-500); }
.nutricao-pdf i { color: var(--color-success); font-size: 16px; font-style: normal; }

/* — herói — */
.heroi { padding-top: 84px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.heroi h1 {
  font-size: clamp(34px, 4vw, 58px); line-height: 1.04; letter-spacing: -0.028em;
  max-width: 900px; text-wrap: balance;
}
.heroi-acento { color: var(--color-accent); }
.heroi-sub {
  margin-top: 24px; max-width: 620px; font-size: 18.5px; line-height: 1.6;
  text-wrap: pretty; color: color-mix(in srgb, var(--color-text) 66%, transparent);
}
.heroi-acoes { display: flex; gap: 12px; margin-top: 34px; }
.heroi-nota { margin-top: 16px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* — vitrine do herói —
   O aparelho atravessa a borda da faixa de prova: metade sobre o fundo da
   página, metade sobre o acento. A margem negativa é o que produz isso, e o
   `padding-top` da faixa logo abaixo é quem abre espaço para a outra metade —
   os dois valores andam juntos, mexer num sem o outro corta o aparelho. */
.vitrine { display: flex; justify-content: center; margin-top: 64px; margin-bottom: -210px; position: relative; z-index: 2; }

/* — faixa de prova — */
.prova { background: var(--color-accent-900); padding-top: 250px; padding-bottom: 72px; }
.prova-linha { display: flex; align-items: flex-start; gap: 80px; }
.prova-citacao {
  font-size: 27px; line-height: 1.35; letter-spacing: -0.015em;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-wrap: pretty;
}
.prova-autoria { margin-top: 14px; font-size: 14px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.prova-numeros { display: flex; gap: 56px; flex: none; padding-top: 6px; margin-left: auto; }
.prova-numero {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 42px; line-height: 1; letter-spacing: -0.02em; color: var(--color-accent);
}
.prova-legenda {
  margin-top: 8px; font-size: 13.5px; line-height: 1.45; max-width: 190px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

/* — blocos de recurso — */
.recurso { display: flex; align-items: center; gap: 96px; padding-block: 118px 100px; }
.recurso-invertido { flex-direction: row-reverse; }
.recurso-fundo { background: var(--color-surface); padding-block: 100px; }
.recurso-texto { flex: 1; min-width: 0; max-width: 480px; }
.rotulo-secao {
  font-family: var(--font-heading); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-accent);
}
.recurso h2 { margin-top: 16px; font-size: clamp(27px, 2.5vw, 36px); line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; }
.recurso p {
  margin-top: 20px; font-size: 17px; line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.recurso p + p { margin-top: 18px; }
.recurso-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

/* O halo atrás do aparelho. `color-mix` sobre o acento, e não um gradiente
   próprio: é o mesmo tratamento que a aba selecionada e a marca de check-in
   usam no aplicativo. */
.recurso-vitrine { flex: none; position: relative; display: grid; place-items: center; }
.recurso-vitrine::before {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
}
.recurso-vitrine .telefone { position: relative; }

/* — chamada final — */
.chamada { padding-block: 40px 80px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.chamada h2 { font-size: 34px; line-height: 1.14; letter-spacing: -0.022em; max-width: 640px; text-wrap: balance; }
.chamada p {
  margin-top: 18px; max-width: 560px; font-size: 17px; line-height: 1.6; text-wrap: pretty;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}
.chamada .btn { margin-top: 30px; }

/* — rodapé — */
.rodape {
  margin: 0 40px 40px; padding: 44px 56px 28px; border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.rodape-colunas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.rodape-coluna { display: flex; flex-direction: column; gap: 12px; }
.rodape-coluna h3 { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.rodape-coluna a, .rodape-coluna span {
  font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.rodape-coluna a:hover { color: var(--color-accent); }
.rodape-fim {
  display: flex; align-items: center; gap: 20px; margin-top: 36px;
  padding-top: 22px; border-top: 1px solid var(--color-divider);
}
.rodape-fim span { font-size: 13px; flex: 1; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rodape-fim a { font-size: 13px; }

/* — moldura de aparelho —
   Sem barra de status desenhada: no aparelho de verdade ela é do sistema, e um
   desenho aqui apareceria duplicado por cima. */
.telefone {
  width: var(--telefone-largura); height: var(--telefone-altura); flex: none; border-radius: 34px; padding: 11px;
  background: #0d0e17; box-shadow: 0 0 0 1px #3a3d4d, 0 30px 70px rgba(0,0,0,.55);
}
.telefone-tela { height: 100%; border-radius: 24px; overflow: hidden; background: var(--color-bg); font-size: 15px; }

/* Peças que o aparelho reaproveita da aplicação. Copiadas do app.css porque a
   LP não carrega aquela folha — o aplicativo tem 4000 linhas de estilo que não
   servem a uma página de apresentação. */
.app-topo { display: flex; align-items: center; gap: 9px; padding: 14px 16px 10px; }
.app-marca-nome { font-family: var(--font-marca); font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.app-abas { display: flex; gap: 2px; padding: 0 16px 10px; }
.app-aba {
  flex: 1; min-width: 0; min-height: 42px; padding-inline: 6px; white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px;
  border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.app-aba.ativa {
  color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.linha-ex { border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.linha-ex.conjugada { border-left: 3px solid var(--color-accent); }
.codigo { font-size: 11px; font-family: ui-monospace, Menlo, monospace; letter-spacing: .02em; }
.ponto { width: 3px; height: 3px; border-radius: 50%; background: var(--color-neutral-600); flex: none; }

/* ————————————————————————————— celular —————————————————————————————
   O corte é em 900px e não num tamanho de aparelho: é a largura em que a
   linha do recurso (texto de 480 + aparelho de 360 + 96 de intervalo) deixa
   de caber. Abaixo disso tudo empilha. */
@media (max-width: 900px) {
  .faixa { padding-inline: 16px; }

  .topo { gap: 8px; padding-block: 16px; }
  /* 44px mantém login e tema confortáveis para o toque. */
  /* A navegação sai no celular. Três links empurrariam o botão para fora, e a
     página inteira é curta o bastante para a rolagem fazer o papel deles. */
  .topo-nav { display: none; }
  .topo-marca { gap: 9px; flex: 1; min-width: 0; }
  .marca-icone { width: 28px; height: 28px; }
  .marca-icone svg { width: 28px; height: 28px; }
  .marca-nome { font-size: 16px; }
  .topo-acoes { gap: 8px; }
  .topo-botao { min-width: 98px; min-height: 44px; padding-inline: 14px; font-size: 14px; }
  .tema-botao { width: 44px; min-height: 44px; }

  .visao-geral { padding-top: 40px; padding-bottom: 16px; }
  .visao-cabecalho h2 { margin-top: 14px; line-height: 1.08; letter-spacing: -0.024em; }
  .visao-cabecalho > p { margin-top: 16px; font-size: 16px; line-height: 1.62; }
  .visao-grade { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
  .visao-card { flex-direction: row; gap: 14px; padding: 18px 16px 20px; }
  .visao-card h2 { font-size: 16.5px; }
  .visao-card p { margin-top: 6px; font-size: 14px; }

  .nutricao { flex-direction: column; align-items: stretch; gap: 30px; padding-block: 64px; }
  .nutricao-texto { order: -1; }
  .nutricao-texto h2 { margin-top: 12px; line-height: 1.14; letter-spacing: -0.02em; }
  .nutricao-texto p { margin-top: 16px; font-size: 16px; line-height: 1.62; }
  .nutricao-texto p + p { margin-top: 14px; }
  .nutricao-texto .recurso-chips { margin-top: 20px; }

  .heroi { padding-top: 40px; }
  .heroi h1 { line-height: 1.08; letter-spacing: -0.024em; }
  .heroi-sub { margin-top: 18px; font-size: 16px; }
  /* Empilhados e ocupando a largura: alvo de toque cheio, e nenhuma decisão
     sobre qual dos dois é o principal fica dependendo de 12px de intervalo. */
  .heroi-acoes { flex-direction: column; gap: 10px; margin-top: 26px; align-self: stretch; }
  .heroi-nota { margin-top: 14px; font-size: 12.5px; }

  .vitrine { margin-top: 44px; margin-bottom: -150px; padding-inline: 16px; }
  .prova { padding-top: 182px; padding-bottom: 44px; }
  .prova-linha { flex-direction: column; gap: 32px; }
  .prova-citacao { font-size: 21px; line-height: 1.38; }
  .prova-numeros { gap: 24px; padding-top: 24px; border-top: 1px solid var(--color-divider); align-self: stretch; margin-left: 0; }
  .prova-numeros > div { flex: 1; min-width: 0; }
  .prova-numero { font-size: 32px; }
  .prova-legenda { font-size: 12.5px; max-width: none; }

  /* `column` nos dois, inclusive no invertido: no empilhado o texto vem antes
     do aparelho sempre — inverter aqui deixaria um bloco começando pela
     imagem, sem dizer do que ela é. */
  .recurso, .recurso-invertido { flex-direction: column; gap: 30px; align-items: stretch; padding-block: 64px; }
  .recurso-fundo { padding-block: 64px; }
  .recurso-texto { max-width: none; }
  .recurso h2 { margin-top: 12px; letter-spacing: -0.02em; }
  .recurso p { margin-top: 16px; font-size: 16px; line-height: 1.62; }
  .recurso p + p { margin-top: 14px; }
  .recurso-chips { margin-top: 20px; }
  .recurso-vitrine::before { display: none; }

  .chamada { padding-block: 20px 64px; }
  .chamada h2 { font-size: 27px; }
  .chamada p { margin-top: 16px; font-size: 16px; }
  .chamada .btn { margin-top: 24px; align-self: stretch; }

  .rodape { margin: 0 16px 24px; padding: 28px 20px 20px; }
  .rodape-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .rodape-coluna { gap: 10px; }
  .rodape-coluna h3 { font-size: 13.5px; }
  .rodape-coluna a, .rodape-coluna span { font-size: 14px; }
  .rodape-fim { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 26px; padding-top: 18px; }
  .rodape-fim span { font-size: 12.5px; }

}

/* ————————————————————————————— motion —————————————————————————————
   A base de cada regra é o quadro final: sem JS e com menos movimento, a página é a mesma. */

/* Na carga, só CSS: a marca do topo enche e os cartões da visão geral sobem em cascata. */
.marca-icone svg { animation: lp-enche 900ms cubic-bezier(.65, 0, .35, 1) 150ms backwards; }
.visao-card { animation: lp-sobe 560ms cubic-bezier(.2, .8, .2, 1) 360ms backwards; }
.visao-card:nth-child(2) { animation-delay: 440ms; }
.visao-card:nth-child(3) { animation-delay: 520ms; }
.visao-card:nth-child(4) { animation-delay: 600ms; }
@keyframes lp-enche { from { clip-path: inset(0 100% 0 0); } }
@keyframes lp-sobe { from { opacity: 0; transform: translateY(14px); } }

/* Grupos que o landing.js marca abaixo da dobra; `--i` escalona os filhos. */
.revela > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 560ms cubic-bezier(.2, .8, .2, 1), transform 560ms cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.revela.visto > * { opacity: 1; transform: none; }
.palavra { display: inline-block; }
.heroi-acento { position: relative; display: inline-block; }
.heroi-acento::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: -4px; height: 3px; border-radius: 3px;
  background: currentColor; transform-origin: left center;
  transition: transform 640ms cubic-bezier(.65, 0, .35, 1) 600ms;
}
.revela:not(.visto) .heroi-acento::after { transform: scaleX(0); }

.btn-primary, .visao-card { transition: transform 160ms cubic-bezier(.2, .8, .2, 1), box-shadow 160ms, background-color 160ms; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: scale(.98); }
.visao-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.checkins-dias { display: flex; gap: 3px; margin-top: 4px; }
.checkins-dias i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral-800); }
.checkins-dias i.aceso { background: var(--color-accent); }

/* — vitrine: a ficha vira treino no relógio, em laço de 9 s — */
.vitrine { flex-direction: column; align-items: center; gap: 22px; }
.vitrine-passos {
  position: relative; display: flex; justify-content: space-between; width: min(460px, 100%); padding-bottom: 13px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.passo-3 { color: var(--color-text); }
.vitrine-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--color-divider); overflow: hidden; }
.vitrine-barra span { display: block; height: 100%; background: var(--color-accent); transform-origin: left center; }
.vitrine-palco { position: relative; }

.historia { padding: 4px 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.historia-arquivo {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.historia-tipo {
  width: 34px; height: 34px; border-radius: 6px; flex: none; display: grid; place-items: center;
  background: var(--color-neutral-800); color: var(--color-accent); font-size: 9px; letter-spacing: .06em;
}
.historia-ficha {
  position: relative; height: 104px; padding: 12px 14px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; border-radius: var(--radius-md); background: #e9e6dc;
}
.historia-ficha i { display: block; height: 6px; border-radius: 3px; background: #a39c8c; }
.historia-ficha i:first-child { height: 7px; background: #6b6558; }
.historia-varredura {
  position: absolute; left: 0; right: 0; top: 0; height: 14px; opacity: 0;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-accent) 55%, transparent));
  border-bottom: 2px solid var(--color-accent);
}
.historia-linha { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; font-size: 14px; }
.historia-l3 { align-items: center; }
.historia-num { width: 16px; flex: none; font-size: 11.5px; color: var(--color-neutral-500); }
.historia-nome { flex: 1; min-width: 0; }
.historia-series { color: color-mix(in srgb, var(--color-text) 66%, transparent); font-variant-numeric: tabular-nums; }
.historia-troca { display: grid; }
.historia-velho, .historia-novo { grid-area: 1 / 1; }
.historia-velho { opacity: 0; justify-self: start; text-decoration: line-through; color: var(--color-neutral-500); }
.historia-novo { display: flex; align-items: center; gap: 6px; }
.historia-enviar { display: grid; min-height: 48px; margin-top: 4px; font-size: 15px; }
.historia-enviar > span { grid-area: 1 / 1; place-self: center; }
.historia-enviar-a { opacity: 0; }

.relogio {
  position: absolute; right: -118px; bottom: 48px; width: 190px; height: 190px; border-radius: 50%;
  display: grid; place-items: center; background: #2a2c38;
  box-shadow: 0 0 0 1px #595d6c, 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 0 rgba(145, 132, 217, 0);
}
.relogio-tela {
  position: relative; width: 158px; height: 158px; border-radius: 50%;
  display: grid; place-items: center; background: #07070c; color: #e9e9ed;
}
.relogio-anel { position: absolute; inset: 0; width: 100%; height: 100%; }
.relogio-anel circle { fill: none; stroke: #292b31; stroke-width: 5; }
.relogio-anel .relogio-progresso { stroke: #9184d9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .25; }
.relogio-texto { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.relogio-texto strong { font-family: var(--font-heading); font-weight: 500; font-size: 15px; }
.relogio-rotulo { font-size: 10px; letter-spacing: .08em; color: #9397ab; }
.relogio-series { font-family: var(--font-heading); font-size: 21px; color: #b5abfc; font-variant-numeric: tabular-nums; }

/* O laço: cada peça tem os próprios quadros-chave no mesmo período de 9 s. */
.historia-arquivo, .historia-ficha, .historia-varredura, .historia-linha, .historia-velho, .historia-novo,
.historia-corrigido, .historia-enviar, .historia-enviar-a, .historia-enviar-b, .relogio, .relogio-texto,
.relogio-progresso, .vitrine-barra span, .passo {
  animation-duration: 9s; animation-iteration-count: infinite; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
.historia-arquivo { animation-name: lp-arquivo; }
.historia-ficha { animation-name: lp-ficha; }
.historia-varredura { animation-name: lp-varre; animation-timing-function: linear; }
.historia-l1 { animation-name: lp-l1; }
.historia-l2 { animation-name: lp-l2; }
.historia-l3 { animation-name: lp-l3; }
.historia-velho { animation-name: lp-velho; }
.historia-novo { animation-name: lp-novo; }
.historia-corrigido { animation-name: lp-corrigido; }
.historia-enviar { animation-name: lp-aperta; }
.historia-enviar-a { animation-name: lp-enviar-a; }
.historia-enviar-b { animation-name: lp-enviar-b; }
.relogio { animation-name: lp-pulso; animation-timing-function: ease-out; }
.relogio-texto { animation-name: lp-relogio; }
.relogio-progresso { animation-name: lp-anel; }
.vitrine-barra span { animation-name: lp-barra; animation-timing-function: linear; }
.passo-1 { animation-name: lp-passo-1; }
.passo-2 { animation-name: lp-passo-2; }
.passo-3 { animation-name: lp-passo-3; }
.vitrine.parado * { animation-play-state: paused; }

@keyframes lp-arquivo { 0%, 2% { opacity: 0; transform: translateY(8px); } 7%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lp-ficha { 0%, 6% { opacity: 0; transform: translateY(8px); } 11%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lp-varre { 0%, 12% { opacity: 0; transform: none; } 13% { opacity: 1; transform: none; } 26% { opacity: 1; transform: translateY(90px); } 28%, 100% { opacity: 0; transform: translateY(90px); } }
@keyframes lp-l1 { 0%, 27% { opacity: 0; transform: translateY(8px); } 31%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lp-l2 { 0%, 31% { opacity: 0; transform: translateY(8px); } 35%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lp-l3 { 0%, 35% { opacity: 0; transform: translateY(8px); } 39%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lp-velho { 0%, 43% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes lp-novo { 0%, 46% { opacity: 0; transform: translateY(4px); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes lp-corrigido { 0%, 50% { opacity: 0; transform: scale(.6); } 54%, 100% { opacity: 1; transform: none; } }
@keyframes lp-aperta { 0%, 58% { transform: none; } 60% { transform: scale(.95); } 64%, 100% { transform: none; } }
@keyframes lp-enviar-a { 0%, 60% { opacity: 1; } 63%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lp-enviar-b { 0%, 62% { opacity: 0; } 65%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lp-relogio { 0%, 69% { opacity: 0; transform: translateY(8px); } 75%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lp-anel { 0%, 70% { stroke-dashoffset: 1; } 84%, 92% { stroke-dashoffset: .25; } 97%, 100% { stroke-dashoffset: 1; } }
@keyframes lp-pulso {
  0%, 69% { box-shadow: 0 0 0 1px #595d6c, 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 0 rgba(145, 132, 217, 0); }
  70% { box-shadow: 0 0 0 1px #595d6c, 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 0 rgba(145, 132, 217, .6); }
  82%, 100% { box-shadow: 0 0 0 1px #595d6c, 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 22px rgba(145, 132, 217, 0); }
}
@keyframes lp-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lp-passo-1 { 0%, 28% { color: var(--color-text); } 31%, 100% { color: color-mix(in srgb, var(--color-text) 60%, transparent); } }
@keyframes lp-passo-2 {
  0%, 28% { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
  31%, 60% { color: var(--color-text); }
  63%, 100% { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
}
@keyframes lp-passo-3 { 0%, 60% { color: color-mix(in srgb, var(--color-text) 60%, transparent); } 63%, 100% { color: var(--color-text); } }

@media (max-width: 900px) {
  .vitrine { gap: 16px; }
  .relogio { right: -6px; bottom: 16px; width: 150px; height: 150px; }
  .relogio-tela { width: 124px; height: 124px; }
  .relogio-texto strong { font-size: 13px; }
  .relogio-series { font-size: 17px; }
}

/* Menos movimento: tudo parado no quadro final, inclusive hover. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}