/* ============================================================
   /comecar — "Eu Sei o Que Fazer. Eu Só Não Começo."
   Tema dark navy do domínio (§3) · acento DOURADO (família e-book)
   Fraunces (display) + Inter (corpo) + JetBrains Mono (UI de tarefas)
   ============================================================ */

:root {
  --navy-bg: #060f1e;
  --navy-card: #0a1f3d;
  --navy-card-2: #0d2447;
  --gold: #d4a24e;
  --gold-soft: #e3bc74;
  --gold-deep: #8a6526;
  --blue: #1e90ff;
  --blue-soft: #4fb0ff;
  --text: #f4f1e8;
  --text-2: #c9cfdb;
  --text-3: #a8b2c5;
  --line: rgba(244, 241, 232, 0.12);
  --ok: #4ade80;
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--navy-bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* gradientes radiais sutis do domínio */
  background-image:
    radial-gradient(1100px 520px at 85% -8%, rgba(212, 162, 78, 0.07), transparent 60%),
    radial-gradient(900px 480px at -10% 30%, rgba(30, 144, 255, 0.05), transparent 55%);
  background-repeat: no-repeat;
}

.container { width: min(1060px, 100% - 40px); margin-inline: auto; }
.container.narrow { width: min(720px, 100% - 40px); }

.mono { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }

/* ---------- Esconde-revela: só sob .js-anim, com failsafe (padrão do domínio §7) ---------- */
html.js-anim:not(.anim-failsafe) .reveal,
html.js-anim:not(.anim-failsafe) .hero-titulo,
html.js-anim:not(.anim-failsafe) .hero-sub,
html.js-anim:not(.anim-failsafe) .hero-cta,
html.js-anim:not(.anim-failsafe) .hero .micro { visibility: hidden; }

/* ---------- Nav ---------- */
.nav {
  display: flex; align-items: center; gap: 18px;
  padding: 18px clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 15, 30, 0.82);
  backdrop-filter: blur(10px);
}
.brand { text-decoration: none; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
.brand em { color: var(--gold); font-style: italic; }
.nav-meta { color: var(--text-3); margin-left: auto; }
@media (max-width: 560px) { .nav-meta { display: none; } }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
  padding: 14px 26px; border-radius: 999px; text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active { transform: scale(0.98); }
.btn-gold {
  background: var(--gold); color: #241703;
  box-shadow: 0 12px 32px -14px rgba(212, 162, 78, 0.55);
}
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost { border: 1px solid var(--line); color: var(--text-2); }
.btn-ghost:hover { border-color: var(--gold-deep); color: var(--text); }
.btn-small { padding: 9px 18px; font-size: 0.86rem; margin-left: auto; }
.nav .btn-small { margin-left: 0; }
.nav-meta + .btn-small { margin-left: 0; }
.btn-big { width: 100%; padding: 17px 26px; font-size: 1.05rem; }

/* ---------- Hero ---------- */
.hero { padding: clamp(64px, 11vh, 120px) 0 clamp(48px, 8vh, 88px); }
.eyebrow { color: var(--gold); margin-bottom: 18px; }
.hero-titulo {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.6vw, 3.6rem);
  font-weight: 600; line-height: 1.12; letter-spacing: -0.01em;
  text-wrap: pretty;
}
.hl-gold { color: var(--gold); font-style: italic; }
.hl-blue { color: var(--blue-soft); font-style: italic; }
.hl-italic { font-style: italic; color: var(--text-2); }

/* Frase que carrega o argumento de uma seção: sobe de tamanho e ganha ar,
   sem virar h2 (não é título, é a virada dentro do texto corrido). */
/* `.prose.destaque-frase`: a regra do .prose (max-width 62ch) vem depois no
   arquivo e vencia por ordem, então a frase saía com a mesma medida do texto
   corrido e perdia o destaque. */
.prose.destaque-frase {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 2.6vw, 1.5rem);
  line-height: 1.34; color: var(--text);
  margin: 26px 0 18px; max-width: 34ch;
}
.destaque-frase .hl-italic { color: var(--gold-soft); }
.hero-sub {
  margin-top: 22px; font-size: clamp(1.02rem, 2.2vw, 1.14rem);
  color: var(--text-2); max-width: 58ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* No celular os dois botões empilham, e com largura automática ficam de
   tamanhos diferentes, o que lê como desalinhamento. Largura total, mesmo
   padrão do /consulta. */
@media (max-width: 560px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}
.hero .micro { margin-top: 18px; }
.micro { font-size: 0.74rem; color: var(--text-3); letter-spacing: 0.05em; }

/* ---------- Seções ---------- */
.section { padding: clamp(56px, 9vh, 96px) 0; }
.section-dark {
  background: linear-gradient(180deg, rgba(10, 31, 61, 0.55), rgba(10, 31, 61, 0.2));
  border-block: 1px solid var(--line);
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.6vw, 2.3rem);
  font-weight: 600; line-height: 1.2; margin-bottom: 20px; text-wrap: pretty;
}
.lede { font-size: clamp(1rem, 2vw, 1.1rem); color: var(--text-2); margin-bottom: 16px; max-width: 62ch; }
.prose { margin-bottom: 16px; color: var(--text-2); max-width: 62ch; }
.prose strong, .lede strong { color: var(--text); }

/* ---------- Assinatura: a lista de tarefas que se desmonta ---------- */
.tasklist {
  list-style: none; margin: 36px 0 32px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(6, 15, 30, 0.55);
  overflow: hidden;
}
.task { border-bottom: 1px solid var(--line); padding: 0 clamp(14px, 3vw, 26px); }
.task:last-child { border-bottom: 0; }
.task-main {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: center;
  padding: 17px 0 15px;
}
.task-check {
  width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--text-3); display: grid; place-items: center;
  transition: background 0.3s, border-color 0.3s;
}
.task-check svg { width: 13px; height: 13px; fill: none; stroke: #0a1f3d; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.task-name {
  font-family: var(--font-mono); font-size: 0.95rem; color: var(--text);
  justify-self: start; /* encolhe ao texto: o risco para onde a palavra para */
  /* o risco de "concluído" entra por background-size (animável) */
  background-image: linear-gradient(var(--text-3), var(--text-3));
  background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 1.5px;
}
.task-solves { color: var(--text-3); text-transform: none; letter-spacing: 0.02em; }
@media (max-width: 640px) {
  .task-main { grid-template-columns: 26px 1fr; }
  .task-solves { grid-column: 2; margin-top: -6px; padding-bottom: 4px; }
}

/* o sub-item que nunca inicia */
.task-hidden {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  padding: 0 0 16px; margin-left: clamp(10px, 2.5vw, 22px);
}
.task-circle {
  width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  border: 1.6px dashed var(--gold); justify-self: center;
}
.task-req { font-size: 0.92rem; color: var(--text-2); }
.task-req strong { color: var(--gold-soft); font-weight: 600; }

/* estado "concluído" (aplicado por JS; sem JS os dois níveis ficam visíveis).
   Aqui a lista tem DUAS semânticas, e elas não podem parecer a mesma coisa:
   o item desaconselhado é riscado (sai da mesa), e os recomendados recebem
   check dourado SEM risco (ficam de pé). Riscar todos diria o oposto do
   que a página afirma. */
html.js-anim .task.is-done .task-check { background: var(--ok); border-color: var(--ok); }
html.js-anim .task.is-done .task-check svg { opacity: 1; }
html.js-anim .task.is-done .task-name { background-size: 100% 1.5px; color: var(--text-3); }

/* Sem JS ou com reduced-motion o script sai antes de aplicar os estados,
   então o CSS entrega a MESMA leitura, parada: o desaconselhado riscado, os
   recomendados em dourado. Sem isso, a seção perde o argumento justamente
   para quem depende de não ter movimento. */
html:not(.js-anim) .task .task-check { background: var(--ok); border-color: var(--ok); }
html:not(.js-anim) .task .task-check svg { opacity: 1; }
html:not(.js-anim) .task .task-name { background-size: 100% 1.5px; color: var(--text-3); }
html:not(.js-anim) .task--rec .task-check { background: var(--gold); border-color: var(--gold); }
html:not(.js-anim) .task--rec .task-check svg { stroke: #241703; }
html:not(.js-anim) .task--rec .task-name { background-size: 0% 1.5px; color: var(--text); }

/* item recomendado: entra de pé */
.task--rec .task-solves { color: var(--gold-soft); }
html.js-anim .task--rec.is-done .task-check { background: var(--gold); border-color: var(--gold); }
html.js-anim .task--rec.is-done .task-check svg { stroke: #241703; }
html.js-anim .task--rec.is-done .task-name { background-size: 0% 1.5px; color: var(--text); }
.task--rec .task-circle { border-style: solid; border-color: var(--gold-soft); }
/* sob animação, o sub-item começa recolhido e o GSAP o revela */
html.js-anim:not(.anim-failsafe) .task-hidden { visibility: hidden; }

/* marca-texto dourado */
.realce {
  position: relative; display: inline; color: var(--text);
  background-image: linear-gradient(rgba(212, 162, 78, 0.32), rgba(212, 162, 78, 0.32));
  background-repeat: no-repeat; background-position: 0 78%; background-size: 0% 42%;
  padding: 0 0.05em;
}
html:not(.js-anim) .realce, html.anim-failsafe .realce { background-size: 100% 42%; }

/* ---------- Partes ---------- */
.partes { display: grid; gap: 18px; margin-top: 34px; }
.parte {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(10, 31, 61, 0.4); padding: 26px 24px;
}
.parte-n { color: var(--gold); }
.parte h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 8px 0 10px; }
.parte p { color: var(--text-2); font-size: 0.97rem; }

/* ---------- Nots (honestidade, padrão do domínio) ---------- */
.nots { margin-top: 36px; border-top: 1px solid var(--line); }
.not {
  display: grid; grid-template-columns: minmax(200px, 0.9fr) 1.6fr;
  gap: clamp(16px, 3vw, 40px); align-items: start;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.not h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
.not p { color: var(--text-2); font-size: 0.96rem; }
@media (max-width: 640px) { .not { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Os cinco padrões (seção de reconhecimento) ----------
   Numeração grande em dourado à esquerda, como uma lista de casos. O
   `.padrao-nota` é o que faz o trabalho: cada padrão termina com a razão
   pela qual a solução óbvia dele falha, e é ali que a pessoa entende por
   que já tentou e não deu. */
.padroes { list-style: none; margin: 40px 0 0; display: grid; gap: 4px; }
.padrao {
  display: grid; grid-template-columns: 54px 1fr; gap: 4px 18px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.padrao-n {
  grid-row: 1 / span 3; font-size: 1.5rem; color: var(--gold-deep);
  line-height: 1; padding-top: 2px;
}
.padrao h3 {
  font-family: var(--font-display); font-size: clamp(1.08rem, 2.3vw, 1.3rem);
  font-weight: 600; line-height: 1.28; margin-bottom: 8px;
}
.padrao p { color: var(--text-2); font-size: 0.97rem; max-width: 58ch; }
.padrao-nota {
  margin-top: 12px; padding: 13px 16px; border-radius: 12px;
  background: rgba(212, 162, 78, 0.06); border: 1px solid rgba(212, 162, 78, 0.18);
  font-size: 0.93rem;
}
.padrao-nota strong { color: var(--gold-soft); font-weight: 600; }

/* Os dois modificadores. Sem numeração e recuados por uma barra lateral:
   precisam ser lidos como camada sobre os cinco, não como continuação da
   contagem. Se parecerem itens 6 e 7, a pessoa escolhe entre eles e o padrão
   dela, que é exatamente o que a seção existe para evitar. */
.modifs { margin-top: 34px; }
.modifs-titulo {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 18px;
}
.modif {
  border-left: 2px solid var(--gold-deep);
  padding: 4px 0 4px 20px; margin-bottom: 22px;
}
.modif h3 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  line-height: 1.3; margin-bottom: 7px;
}
.modif p { color: var(--text-2); font-size: 0.95rem; max-width: 56ch; }
.modif-nota { margin-top: 9px; font-size: 0.9rem; }
.modif-nota strong { color: var(--gold-soft); font-weight: 600; }

/* O bloco das duas perguntas: é a única parte da página que o leitor pode
   executar hoje, então ganha tratamento de cartão e fica fora da lista. */
.perguntas {
  margin-top: 38px; padding: clamp(22px, 4vw, 30px);
  border: 1px solid rgba(212, 162, 78, 0.28); border-radius: var(--radius);
  background: rgba(10, 31, 61, 0.45);
}
.perguntas-titulo {
  font-family: var(--font-display); font-size: 1.14rem; font-weight: 600;
  margin-bottom: 18px;
}
.pergunta {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  font-size: 1.02rem; color: var(--text); margin-bottom: 12px;
}
.pergunta-n {
  color: var(--gold); font-size: 0.82rem; padding-top: 4px;
}
.perguntas-nota {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--text-2); font-size: 0.93rem;
}
@media (max-width: 560px) {
  .padrao { grid-template-columns: 38px 1fr; gap: 4px 12px; }
  .padrao-n { font-size: 1.2rem; }
}

/* ---------- Autor ---------- */
.autor-card {
  display: grid; grid-template-columns: 88px 1fr; gap: 24px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(10, 31, 61, 0.4); padding: clamp(22px, 4vw, 34px);
}
.autor-card img { border-radius: 50%; border: 2px solid var(--gold-deep); }
.autor-card h2 { font-size: 1.35rem; margin-bottom: 12px; }
.autor-card p { color: var(--text-2); font-size: 0.97rem; margin-bottom: 10px; }
@media (max-width: 560px) { .autor-card { grid-template-columns: 1fr; } .autor-card img { width: 72px; height: 72px; } }

/* ---------- Oferta ---------- */
.oferta-card {
  border: 1px solid rgba(212, 162, 78, 0.4); border-radius: 22px;
  background:
    radial-gradient(600px 300px at 80% -20%, rgba(212, 162, 78, 0.1), transparent 60%),
    rgba(10, 31, 61, 0.55);
  padding: clamp(28px, 5vw, 46px);
  box-shadow: 0 30px 80px -50px rgba(212, 162, 78, 0.35);
}
.oferta-titulo { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 10px 0 22px; }
.inclui { list-style: none; margin-bottom: 26px; }
.inclui li {
  padding: 10px 0 10px 32px; position: relative;
  color: var(--text-2); border-bottom: 1px dashed var(--line); font-size: 0.98rem;
}
.inclui li:last-child { border-bottom: 0; }
.inclui li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 14px; height: 14px; border-radius: 5px; background: var(--gold);
  clip-path: polygon(13% 52%, 5% 62%, 40% 92%, 95% 20%, 85% 11%, 39% 72%);
}
/* flex-wrap + nowrap no preço: sem os dois, o valor e a legenda competem pelo
   espaço em tela estreita, o flex encolhe o preço e ele racha entre o "R$" e
   o número, com a legenda encaixada no vão. Foi o que apareceu no iPhone. */
.preco-row {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.preco-ancora { color: var(--text-3); text-decoration: line-through; font-size: 1.1rem; }
.preco {
  font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 2.9rem);
  font-weight: 700; color: var(--gold);
  white-space: nowrap;
}
/* Empilhado no celular: lado a lado, a legenda de duas linhas ao lado de um
   número grande fica desalinhada da baseline e suja o bloco. */
@media (max-width: 560px) {
  .preco-row { flex-direction: column; align-items: flex-start; gap: 2px; }
}
.note {
  font-size: 0.88rem; color: var(--text-2);
  background: rgba(212, 162, 78, 0.07); border: 1px solid rgba(212, 162, 78, 0.25);
  border-radius: 10px; padding: 13px 16px; margin-top: 18px;
}
/* Caminho alternativo (marcar direto sem conversar antes): neutro, não
   dourado. O dourado desta página é do que qualifica a oferta; esta nota é
   uma rota de saída para quem já decidiu, e não pode competir com o CTA. */
.note.alt {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.1);
}
.note.alt a {
  color: var(--gold-soft); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.note.alt a:hover { color: var(--gold); }

/* ---------- FAQ ---------- */
.faqs { margin-top: 30px; }
.faqs details { border-bottom: 1px solid var(--line); }
.faqs summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 18px 40px 18px 0; font-weight: 600; font-size: 1.02rem;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  font-family: var(--font-mono); font-size: 1.2rem; color: var(--gold);
  transition: rotate 0.25s ease;
}
.faqs details[open] summary::after { rotate: 45deg; }
.faqs details p { padding: 0 0 20px; color: var(--text-2); max-width: 60ch; }
.faqs a { color: var(--gold-soft); }

/* ---------- Preço do programa ----------
   Valor seco, sem âncora riscada e sem selo de desconto: é honorário de
   serviço com escopo definido, não oferta. */
.preco-nota { color: var(--text-3); text-transform: none; letter-spacing: 0.05em; }

/* ---------- Card do guia (porta de entrada, secundário) ----------
   Deliberadamente mais discreto que o card do programa: borda neutra em vez
   de dourada e CTA fantasma. A hierarquia visual precisa dizer qual é a
   oferta principal antes de a pessoa ler o preço. */
.guia-card {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(20px, 4vw, 36px);
  align-items: center; margin-top: 28px;
  padding: clamp(24px, 4.5vw, 34px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(10, 31, 61, 0.32);
}
.guia-card h3 { font-family: var(--font-display); font-size: clamp(1.2rem, 2.8vw, 1.5rem); margin: 8px 0 10px; }
.guia-card p { color: var(--text-2); font-size: 0.96rem; }
.guia-limite {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 0.9rem; color: var(--text-3);
}
.guia-limite strong { color: var(--text-2); }
.guia-acao { display: grid; justify-items: center; gap: 10px; text-align: center; }
.guia-acao .preco { font-size: clamp(1.5rem, 3.6vw, 1.9rem); }
.guia-acao .btn { width: 100%; }
@media (max-width: 640px) {
  .guia-card { grid-template-columns: 1fr; }
  .guia-acao { justify-items: start; text-align: left; }
}

/* ---------- Ponte / footer ---------- */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue-soft); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(30, 144, 255, 0.4); padding-bottom: 3px;
}
.link-arrow span { transition: transform 0.25s ease; }
.link-arrow:hover span { transform: translateX(4px); }

.footer { border-top: 1px solid var(--line); padding: 44px 0 60px; }
.footer p { color: var(--text-2); margin-bottom: 8px; }
.footer .micro { max-width: 60ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.footer-links a { color: var(--text-3); font-size: 0.9rem; text-decoration: none; }
.footer-links a:hover { color: var(--gold-soft); }

/* ---------- O relógio da madrugada ---------- */
.relogio-cena {
  display: grid; place-items: center; gap: 10px;
  margin: clamp(30px, 6vh, 52px) 0;
  padding: clamp(24px, 5vw, 38px) 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(520px 220px at 50% 0%, rgba(30, 144, 255, 0.06), transparent 70%), rgba(6, 15, 30, 0.5);
}
.relogio-face {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(2.6rem, 11vw, 4.6rem); line-height: 1;
  color: var(--gold); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline;
}
.relogio-sep { opacity: 0.5; margin: 0 0.06em; }
.relogio-legenda { color: var(--text-3); text-transform: none; letter-spacing: 0.06em; }

/* ---------- O ciclo que se realimenta ---------- */
/* O palco é maior que o círculo de propósito: os rótulos moram FORA da linha.
   --r é o raio do círculo e --rot o raio dos rótulos; o JS lê o raio real do
   SVG para calcular o perímetro, então mexer aqui não desalinha a animação. */
.ciclo-palco {
  --rot: 158px;
  position: relative;
  width: min(390px, 92vw); aspect-ratio: 1;
  margin: clamp(34px, 7vh, 60px) auto;
}
.ciclo-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.ciclo-trilha { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ciclo-linha { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }

.ciclo-passos { list-style: none; position: absolute; inset: 0; margin: 0; }
.ciclo-passo {
  position: absolute; top: 50%; left: 50%; margin: 0;
  display: grid; justify-items: center; gap: 3px; width: 118px;
  text-align: center;
  /* posiciona no círculo pelo ângulo e desgira o texto */
  transform: translate(-50%, -50%) rotate(calc(var(--ang) * 1deg)) translateY(calc(var(--rot) * -1)) rotate(calc(var(--ang) * -1deg));
  transition: color 0.45s ease, opacity 0.45s ease;
  color: var(--text-3);
}
.ciclo-n { color: var(--text-3); font-size: 0.68rem; transition: color 0.45s ease; }
.ciclo-txt { font-size: 0.88rem; font-weight: 600; line-height: 1.25; }
.ciclo-passo.is-on { color: var(--text); }
.ciclo-passo.is-on .ciclo-n { color: var(--gold); }

.ciclo-centro {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1rem, 3.4vw, 1.3rem); color: var(--text-2);
  opacity: 0; transition: opacity 0.6s ease;
}
.ciclo-centro.is-on { opacity: 1; }

/* Fallback: sem JS, ou se o JS não assumir o controle (`.js-ok`), a figura
   aparece completa e legível. O failsafe de 4s NÃO força o estado final aqui —
   se forçasse, mataria a animação de quem chega depois de 4 segundos. */
html:not(.js-anim) .ciclo-passo,
.ciclo-palco:not(.js-ok) .ciclo-passo { color: var(--text); }
html:not(.js-anim) .ciclo-n,
.ciclo-palco:not(.js-ok) .ciclo-n { color: var(--gold); }
html:not(.js-anim) .ciclo-centro,
.ciclo-palco:not(.js-ok) .ciclo-centro { opacity: 1; }

@media (max-width: 520px) {
  .ciclo-palco { --rot: 126px; }
  .ciclo-passo { width: 98px; }
  .ciclo-txt { font-size: 0.78rem; }
}

/* ---------- Texto semântico separado do animado (padrão gsap.com) ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Cilindro no hero (desktop, só sob .js-anim) ---------- */
.hero-titulo { perspective: 600px; }
.hero-titulo .tambor { display: inline-block; transform-style: preserve-3d; }

/* ---------- Faixa de velocidade ---------- */
.faixa {
  overflow: hidden; white-space: nowrap; padding: 1.1rem 0;
  border-block: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.06em;
  color: var(--text-3); text-transform: lowercase;
}
.faixa-trilho { display: inline-flex; will-change: transform; }

/* ---------- Travessia horizontal (as 3 partes) ---------- */
/* Padrão: empilhado (mobile e sem JS). O pin/trilho só entra no desktop
   com .js-anim — o JS assume o layout via matchMedia. */
.secao-horizontal { overflow: hidden; margin-top: 34px; }
.trilho { display: block; }
.painel { padding: 0 20px 18px; }
.painel-inner {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(10, 31, 61, 0.4);
  padding: 26px 24px; max-width: 720px; margin-inline: auto;
}
.parte-n { color: var(--gold); }
.parte-de { color: var(--text-3); font-style: normal; }
.painel h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2rem); margin: 10px 0 12px; }
.painel p { color: var(--text-2); font-size: 0.98rem; max-width: 54ch; }
.painel-extra { margin-top: 14px; }
.sits { list-style: none; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.sit {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  color: var(--text-3); transition: color 0.4s, border-color 0.4s;
}
.sit.is-lit { color: var(--gold-soft); border-color: var(--gold-deep); }
html:not(.js-anim) .sit, html.anim-failsafe .sit { color: var(--gold-soft); border-color: var(--gold-deep); }

/* O layout de trilho só entra quando o PIN existe de fato (classe posta pelo
   JS na criação do ScrollTrigger). Se a criação falhar, ninguém fica com
   painéis de 100svh empilhados — cai no empilhado normal. */
@media (min-width: 800px) {
  html.has-horizontal .trilho { display: flex; width: max-content; }
  html.has-horizontal .painel {
    width: 100vw; height: 100svh; flex-shrink: 0;
    display: grid; place-items: center; padding: 0 8vw;
  }
  html.has-horizontal .painel-inner {
    max-width: 640px; padding: 40px 38px;
    background: rgba(10, 31, 61, 0.55);
    box-shadow: 0 30px 90px -60px rgba(0, 0, 0, 0.8);
  }
}

/* ---------- Motion hygiene ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .link-arrow span, .faqs summary::after, .sit { transition: none; }
}

/* Área de toque no celular: os links do rodapé tinham 24px de altura, contra
   os 44px que o dedo pede. O padding vertical não muda o visual além de
   espaçar o rodapé, e é onde o acesso desta página de fato acontece. */
@media (max-width: 640px) {
  .footer-links { gap: 6px 18px; }
  .footer-links a { padding-block: 14px; display: inline-block; line-height: 1.2; }
}