/* Protocolo Dia 1, sales page. Mobile first (designed at 390 px), no JavaScript.
   Look: all-black page, Bebas Neue headlines, dark cards with thin borders, glowing buttons.
   The accent is the book's yellow (with an amber gradient). */

@font-face { font-family: "Bebas Neue"; font-weight: 400; font-display: swap; src: url("fonts/bebasneue-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("fonts/barlow-700.woff2") format("woff2"); }

:root {
  --fundo: #000000;
  --card: #0A0A12;
  --card-2: #121221;
  --borda: #1F1F2E;
  --texto: #F2F2F2;
  --apagado: #8C8C8C;      /* on black and on cards: 6:1 */
  --preto: #0E0E0E;        /* text on yellow */
  --amarelo: #E5C04B;
  --ambar: #E59A2E;
  --grad: linear-gradient(90deg, #F0CF63, #E59A2E);
  --glow: rgba(229, 192, 75, 0.35);
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --gutter: 20px;
  /* sticky buy button: distance from the hero button's bottom edge to the end of the hero */
  --hero-tail: 190px;
  --lead: max(0px, calc(100vh - var(--hero-tail)));
  /* list markers, drawn as masks so they take the text colour they're given */
  --m-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --m-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@supports (height: 100svh) {
  :root { --lead: max(0px, calc(100svh - var(--hero-tail))); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 56px;
}

body {
  margin: 0;
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
}
body.modo-preview { padding-top: 30px; }

img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 {
  font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1; margin: 0; text-wrap: balance;
}
h2 { font-size: clamp(2.3rem, 10vw, 3.1rem); text-align: center; margin-bottom: 0.5em; }
h2::after { /* the thin gradient line under each section title */
  content: ""; display: block; width: 80px; height: 2px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--amarelo), transparent);
}
h3 { font-size: 1.6rem; }
ul, ol { margin: 0; padding: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.estreito { max-width: 720px; }
.medio { max-width: 880px; }
.centro { text-align: center; }
.nw { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icone-grande { display: block; width: 56px; height: 56px; margin: 0 auto 22px; color: var(--amarelo); stroke-width: 1.6; }

.grad { color: var(--amarelo); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .grad {
    background: var(--grad); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}

.eyebrow {
  margin: 0 0 16px; color: var(--amarelo);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
}
.sub-t { color: var(--apagado); text-align: center; max-width: 34em; margin: 0 auto 32px; }
.micro { font-size: 0.82rem; margin: 14px 0 0; color: var(--apagado); }

.card {
  background: var(--card); border: 1px solid var(--borda); border-radius: 8px; padding: 24px;
}

/* focus: yellow on black, white around the yellow buttons */
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .skip:focus-visible { outline-color: #FFFFFF; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 60;
  background: var(--amarelo); color: var(--preto); font-weight: 700; padding: 10px 14px; border-radius: 6px;
}
.skip:focus { left: 12px; }
.modo-preview .skip:focus { top: 40px; }

/* ---------- preview banner (preview builds only) ---------- */
.preview-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; margin: 0;
  background: #D9D9D9; color: var(--preto);
  font-size: 0.8rem; font-weight: 700; line-height: 30px; text-align: center;
  padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- launch price bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 0 8px; flex-wrap: wrap;
  min-height: 38px; padding: 6px 12px;
  background: var(--amarelo); color: var(--preto);
  font-size: 0.88rem; line-height: 1.3; text-align: center;
}
.topbar .icone { width: 16px; height: 16px; }
.topbar strong { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.topbar span { font-weight: 700; }
.topbar-depois { display: none; }
.modo-preview .topbar { top: 30px; }

/* ---------- buttons ---------- */
.btn {
  display: block; width: 100%;
  background: var(--amarelo); color: var(--preto);
  font-weight: 700; font-size: 1.02rem; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.25; text-align: center; text-decoration: none;
  padding: 19px 24px; border-radius: 6px; min-height: 58px;
  box-shadow: 0 0 20px var(--glow);
}
.btn:hover { background: #F0CF63; }

/* ---------- chevrons between sections ---------- */
.seta { display: flex; justify-content: center; padding: 24px 0 0; color: var(--apagado); }
.seta .icone { width: 30px; height: 30px; }

@media (prefers-reduced-motion: no-preference) {
  .btn { animation: brilho 2s ease-in-out infinite; }
  .seta .icone { animation: desce 2s ease-in-out infinite; }
  .card { transition: border-color 0.3s; }
}
@keyframes brilho { 50% { box-shadow: 0 0 40px rgba(229, 192, 75, 0.6); } }
@keyframes desce { 50% { transform: translateY(8px); } }

/* ---------- sections ---------- */
.secao { padding: 72px 0; }

/* ---------- hero ---------- */
.hero {
  text-align: center; padding: 40px 0 0; overflow: hidden;
  background: linear-gradient(to bottom, rgba(229, 192, 75, 0.07), rgba(229, 192, 75, 0) 70%);
}
.hero-logo .logo { display: block; width: 56px; height: 56px; margin: 0 auto 24px; }
.hero h1 { font-size: clamp(3.2rem, 14.5vw, 6.4rem); line-height: 0.95; margin-bottom: 22px; }
.hero h1 .grad { display: block; width: fit-content; margin: 0 auto; }
.hero .sub { font-size: 1.12rem; color: var(--apagado); max-width: 30em; margin: 0 auto 28px; }

.stats { list-style: none; display: flex; justify-content: center; gap: 12px; margin: 0 0 30px; }
.stats li { flex: 0 1 72px; display: flex; flex-direction: column; align-items: center; }
.stats strong {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 64px;
  background: var(--card-2); border: 1px solid var(--borda); border-radius: 6px;
  font-family: var(--display); font-weight: 400; font-size: 2.1rem; letter-spacing: 0.04em; line-height: 1;
}
.stats span { margin-top: 6px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apagado); }

/* ---------- "você se reconhece aqui?" ---------- */
.card-grande { padding: 36px 22px; }
.xis { list-style: none; display: grid; gap: 16px; }
.xis li { position: relative; padding-left: 32px; font-size: 1.05rem; line-height: 1.5; }
.xis li::before, .lista-check li::before {
  content: ""; position: absolute; left: 0; top: 0.12em; width: 20px; height: 20px;
  background: var(--amarelo);
  -webkit-mask: var(--m-x) center / contain no-repeat; mask: var(--m-x) center / contain no-repeat;
}
.fecho {
  margin: 36px 0 0; text-align: center;
  font-family: var(--display); font-size: clamp(1.6rem, 7vw, 2.1rem); letter-spacing: 0.04em;
  line-height: 1.1; text-transform: uppercase; text-wrap: balance;
}
.destaque { color: var(--amarelo); }

/* ---------- why it hurts ---------- */
.porque p { font-size: 1.1rem; color: var(--apagado); }
.porque .tese {
  margin: 30px 0 0; font-family: var(--display); font-size: clamp(1.8rem, 7.5vw, 2.5rem);
  letter-spacing: 0.04em; line-height: 1.05; text-transform: uppercase; text-wrap: balance;
}
.ciencia { display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; padding: 22px; text-align: left; }
.porque .ciencia p { margin: 0; font-size: 0.97rem; }
.ciencia strong { display: block; margin-bottom: 4px; color: var(--texto); font-size: 1.05rem; font-weight: 700; }

/* ---------- who it's for ---------- */
.cards-3 { list-style: none; display: grid; gap: 18px; margin-bottom: 18px; }
.card-icone { text-align: center; padding: 28px 22px; }
.card-icone .icone { display: block; width: 40px; height: 40px; margin: 0 auto 16px; color: var(--amarelo); stroke-width: 1.8; }
.card-icone h3 { margin-bottom: 8px; }
.card-icone p { margin: 0; color: var(--apagado); font-size: 0.97rem; }
.cards-3 .card:hover, .fase:hover, .ferramenta:hover { border-color: rgba(229, 192, 75, 0.5); }
.nao-card { background: transparent; border-style: dashed; }
.nao-card h3 { font-size: 1.5rem; margin-bottom: 18px; color: var(--apagado); }
.xis-apagado li { color: var(--apagado); font-size: 0.98rem; }
.xis-apagado li::before { background: var(--apagado); }

/* ---------- what's inside ---------- */
.fases-barra { display: flex; gap: 3px; height: 40px; margin: 0 0 18px; border-radius: 6px; overflow: hidden; }
.fase-seg {
  display: flex; align-items: center; justify-content: center; min-width: 0; flex-basis: 0;
  font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.06em; white-space: nowrap;
}
.fase-seg.fase-1 { background: var(--amarelo); color: var(--preto); }
.fase-seg.fase-2 { background: var(--ambar); color: var(--preto); }
.fase-seg.fase-3 { background: #2A2A3A; color: var(--texto); }
.fases { display: grid; gap: 16px; }
.fase { display: flex; gap: 16px; align-items: flex-start; padding: 20px; }
.fase-icone {
  flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 6px; background: rgba(229, 192, 75, 0.1); color: var(--amarelo);
  font-family: var(--display); font-size: 1.6rem; letter-spacing: 0.04em;
}
.fase .rotulo { margin: 0 0 4px; color: var(--amarelo); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.fase h3 { font-size: 1.9rem; margin-bottom: 6px; }
.fase p { color: var(--apagado); font-size: 0.97rem; margin-bottom: 12px; }
.caps { padding-left: 1.7em; }
.caps li { padding: 3px 0 3px 4px; }
.caps li::marker { color: var(--amarelo); font-weight: 700; }
.molde { margin: 28px auto 0; max-width: 34em; text-align: center; color: var(--apagado); font-size: 0.97rem; }
.sub-h { font-size: 2rem; text-align: center; margin: 60px 0 22px; }

.ferramentas { list-style: none; display: grid; gap: 14px; }
.ferramenta { display: flex; gap: 16px; align-items: flex-start; padding: 20px; }
.icone-caixa {
  flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 6px; background: rgba(229, 192, 75, 0.1); color: var(--amarelo);
}
.ferramenta p { margin: 0; color: var(--apagado); font-size: 0.97rem; }
.ferramenta strong { display: block; margin-bottom: 2px; color: var(--texto); font-size: 1.05rem; font-weight: 700; }

.previews {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px;
  scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.preview { flex: 0 0 80%; margin: 0; scroll-snap-align: center; }
.preview-link { display: block; border-radius: 6px; }
.preview img {
  display: block; width: 100%; border-radius: 6px; border: 1px solid var(--borda);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(229, 192, 75, 0.06);
}
.preview figcaption { font-size: 0.86rem; color: var(--apagado); margin-top: 12px; }
.preview .pagina { white-space: nowrap; }

/* ---------- who's behind it ---------- */
.cena { border-left: 3px solid var(--amarelo); padding: 28px 22px; }
.cena p { font-size: 1.08rem; color: #E0E0E0; }
.cena .assinatura { margin: 22px 0 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amarelo); }

/* ---------- offer ---------- */
.oferta-card {
  position: relative; overflow: hidden; max-width: 540px; margin: 0 auto; text-align: center;
  border: 2px solid rgba(229, 192, 75, 0.5); border-radius: 12px; padding: 40px 22px 28px;
}
.oferta-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--amarelo), var(--ambar), var(--amarelo));
}
.oferta-card h2 { font-size: clamp(2.8rem, 12vw, 3.8rem); margin-bottom: 0.25em; }
.oferta-card h2::after { display: none; }
.oferta-sub { color: var(--apagado); margin: 0 0 26px; }
.livro { position: relative; width: 150px; margin: 0 auto 32px; transform: rotate(-3deg); }
.livro img {
  display: block; width: 100%; height: auto;
  border-radius: 2px 5px 5px 2px;
  /* stacked offset shadows: the page edges on the right and bottom */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    2px 2px 0 #EEEBE4, 3px 3px 0 #C9C4B9,
    5px 5px 0 #EEEBE4, 6px 6px 0 #C9C4B9,
    8px 8px 0 #EEEBE4,
    0 22px 50px rgba(229, 192, 75, 0.18);
}
.livro::after { /* light catching the spine */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  border-radius: 2px 0 0 2px; pointer-events: none;
}
.lista-check { list-style: none; display: grid; gap: 12px; margin: 0 0 30px; text-align: left; }
.lista-check li { position: relative; padding-left: 30px; color: #D6D6D6; font-size: 0.98rem; }
.lista-check li::before { -webkit-mask-image: var(--m-check); mask-image: var(--m-check); }
.lista-check strong { color: var(--texto); }
.preco { display: flex; flex-direction: column; align-items: center; margin: 0; }
.preco-rotulo { color: var(--amarelo); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.preco strong { font-family: var(--display); font-weight: 400; font-size: 4.2rem; line-height: 1.05; letter-spacing: 0.02em; }
.preco-depois { margin: 0 0 24px; color: var(--apagado); font-size: 0.95rem; }
.preco + .btn { margin-top: 20px; }
.kit { max-width: 540px; margin: 18px auto 0; text-align: center; color: var(--apagado); font-size: 0.92rem; }

/* ---------- guarantee ---------- */
.garantia p { color: var(--apagado); font-size: 1.08rem; max-width: 32em; margin: 0 auto; }

/* ---------- FAQ ---------- */
.faq { padding-top: 24px; }
details { background: var(--card); border: 1px solid var(--borda); border-radius: 8px; padding: 0 20px; margin-bottom: 12px; }
details[open] { border-color: rgba(229, 192, 75, 0.35); }
summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 18px 36px 18px 0; font-weight: 600; font-size: 1.04rem;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.6rem; font-weight: 400; color: var(--amarelo); }
details[open] summary::after { content: "–"; }
details p { margin: 0 0 20px; color: var(--apagado); }

/* ---------- final call and sticky button ---------- */
.after-hero { background: var(--fundo); }
.final { padding-bottom: 30px; }
.final h2 { font-size: clamp(3rem, 13vw, 4.6rem); }
.final h2::after { display: none; }
.final h2 .grad { display: block; width: fit-content; margin: 0 auto; }
.final .sub { color: var(--apagado); font-size: 1.1rem; margin: 0; }
.btn-fixo { width: auto; margin: 0 var(--gutter); }
.final-micro { margin: 0; padding: 16px var(--gutter) 64px; text-align: center; }

@media (max-width: 899.98px) {
  /* The final button is also the sticky one. Its containing block (main) starts --lead
     below the end of the hero, so it only shows up once the hero button has scrolled away,
     then docks into place at the end. Pure CSS, works with JavaScript off. */
  .after-hero { padding-top: var(--lead); }
  .after-hero > :first-child { margin-top: calc(-1 * var(--lead)); }
  .btn-fixo {
    position: sticky; z-index: 20;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- checkout missing (preview builds only) ---------- */
.checkout-missing { display: none; background: var(--card); border-top: 4px solid var(--amarelo); padding: 48px 0; }
.checkout-missing:target { display: block; }

/* ---------- footer ---------- */
.rodape {
  text-align: center; color: var(--apagado); font-size: 0.88rem;
  padding: 40px 0 calc(48px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--borda);
}
.rodape p { margin: 0 0 12px; }
.rodape .logo { display: block; width: 36px; height: 36px; margin: 0 auto 16px; opacity: 0.6; }
.rodape a { color: var(--texto); }
.rodape .cvv { max-width: 34em; margin: 0 auto; }
.cvv a { font-weight: 700; }

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  .topbar-depois { display: inline; }
  .card-grande { padding: 48px; }
  .cena { padding: 36px 40px; }
  .oferta-card { padding: 48px 44px 36px; }
}

@media (min-width: 900px) {
  :root { --gutter: 40px; }
  body { font-size: 18px; }
  .secao { padding: 96px 0; }
  .faq { padding-top: 32px; }
  .hero {
    min-height: 90vh; display: flex; flex-direction: column; justify-content: center;
    padding: 64px 0 24px;
  }
  .hero-logo .logo { width: 64px; height: 64px; }
  .btn { display: inline-block; width: auto; padding: 19px 44px; }
  .hero .btn { min-width: 400px; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .ferramentas { grid-template-columns: repeat(2, 1fr); }
  .previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; overflow: visible; margin: 0; padding: 0; }
  .livro { width: 180px; }
  .oferta-card .btn { display: block; width: 100%; }
  .final { padding-bottom: 36px; }
  .btn-fixo { display: block; max-width: 440px; margin: 0 auto; }
}