/* ============================================================
   /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); }
.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; }
.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) */
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); }
/* 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; } }

/* ---------- 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%);
}
.preco-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.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); }
.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;
}

/* ---------- 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); }

/* ---------- 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); }

/* ---------- 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; }
}