/* =========================================================
   Ebook 2 — Como ser eleito em 2026 usando a polarização
   Landing page. Tokens e escalas conforme design_handoff_ebook2_landing.
   Breakpoint único: 900px. Radius = 0 em tudo. Sem box-shadow.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* cores */
  --bg: #0a0a0a;
  --surface: #121110;
  --accent: #ff2b17;
  --accent-hover: #ffffff;
  --accent-link: #ff6a58;
  --text: #f2efec;
  --text-strong: #ece7e3;
  --text-muted: #cfc8c4;
  --text-muted-2: #c4bdb9;
  --text-dim: #8a8482;
  --text-dimmer: #6f6a68;
  --header-meta: #b9b2ae;
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-2: rgba(255, 255, 255, 0.12);
  --border-card: rgba(255, 255, 255, 0.10);
  --border-header: rgba(255, 255, 255, 0.08);

  /* tipografia */
  --font-display: 'Archivo Black', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* escalas fluidas (mobile 390px -> desktop 1440px) */
  --fs-h1: clamp(34px, 5.2vw, 74px);
  --fs-h2-b2: clamp(27px, 3.2vw, 46px);
  --fs-h2-b3: clamp(32px, 4.3vw, 62px);
  --fs-quote: clamp(18px, 2vw, 28px);
  --fs-lead: clamp(16px, 1.5vw, 21px);
  --fs-body: clamp(16px, 1.35vw, 19px);
  --fs-bullet: clamp(15px, 1.25vw, 18px);
  --fs-cta: clamp(16px, 1.4vw, 20px);
  --fs-mono: clamp(11px, 0.9vw, 13px);
  --fs-legal: clamp(10px, 0.85vw, 12px);
  --fs-metric: clamp(24px, 2.2vw, 32px);
  --fs-metric-label: clamp(10px, 0.85vw, 12px);
  --fs-wordmark: clamp(14px, 1.2vw, 17px);

  /* layout */
  --container: 1440px;
  --gutter: 22px;
  --radius: 0;
}

@media (min-width: 900px) {
  :root { --gutter: 80px; }
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-link); }

h1, h2, p, ul { margin: 0; }
h1, h2, p { text-wrap: pretty; }
ul { padding: 0; list-style: none; }

/* ---------- 3. Utilidades de layout ---------- */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

/* Faixa full-bleed: imagem nunca cortada + gradiente de fusão por cima */
.band { position: relative; }
.band .fade { position: absolute; inset: 0; pointer-events: none; }

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.accent { color: var(--accent); }

/* ---------- 4. Header ---------- */
.hdr {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--border-card);
}

.hdr-meta {
  color: var(--header-meta);
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.hdr-meta-long { display: none; }

@media (min-width: 900px) {
  .hdr { padding: 32px var(--gutter); border-bottom-color: var(--border-header); }
  .hdr-meta { letter-spacing: 0.18em; }
  .hdr-meta-long { display: inline; }
}

/* ---------- 5. Dobra 1 — Hero ---------- */
.hero { display: flex; flex-direction: column; }

.hero-img { filter: grayscale(0.15); }

.hero-fade {
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0.2) 0%,
    rgba(10, 10, 10, 0) 40%,
    rgba(10, 10, 10, 0.85) 100%);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px var(--gutter) 44px;
  max-width: 1180px;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  white-space: nowrap;
}

.kicker i { display: block; width: 26px; height: 3px; background: var(--accent); flex: none; }

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
}

@media (min-width: 900px) {
  .hero-img { filter: grayscale(0.15) contrast(1.05); }
  .hero-fade {
    background: linear-gradient(180deg,
      rgba(10, 10, 10, 0.35) 0%,
      rgba(10, 10, 10, 0) 30%,
      rgba(10, 10, 10, 0) 62%,
      #0a0a0a 100%);
  }
  /* o bloco de texto sobe sobre o fade da imagem */
  .hero-copy { gap: 34px; padding: 56px var(--gutter) 88px; margin-top: -60px; }
  .kicker { gap: 14px; }
  .kicker i { width: 44px; }
  .kicker .mono { letter-spacing: 0.20em; }
  h1 { line-height: 0.98; max-width: 15ch; }
  .lead { line-height: 1.5; }
}

/* ---------- 6. CTA ---------- */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  background: var(--accent);
  color: #0a0a0a;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-cta);
  line-height: 1.2;
  letter-spacing: 0.01em;
  padding: 20px 18px;
  min-height: 56px;
  min-width: 0;
  border-radius: var(--radius);
  transition: background-color 140ms ease;
}

.cta:hover { background: var(--accent-hover); color: #0a0a0a; }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cta .arrow { display: none; font-size: 22px; line-height: 1; }

.cta-row { display: flex; flex-direction: column; gap: 22px; }

.cta-note { color: var(--text-dim); letter-spacing: 0.10em; text-align: center; }

.cta-end { margin-top: 6px; }

@media (min-width: 900px) {
  .cta { align-self: flex-start; padding: 24px 40px; }
  .cta .arrow { display: inline; }
  .cta-row { flex-direction: row; align-items: center; gap: 26px; }
  .cta-note { text-align: left; }
}

/* ---------- 7. Dobra 2 — Prova + conteúdo ---------- */
.s2 {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 56px 0 0;
}

.s2-grid {
  display: grid;
  gap: 26px;
  align-items: start;
  padding-inline: var(--gutter);
}

.s2-left { display: flex; flex-direction: column; gap: 26px; }

h2 { font-family: var(--font-display); font-weight: 400; }

.h2-b2 { font-size: var(--fs-h2-b2); line-height: 1.08; letter-spacing: -0.015em; }

.body { font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted-2); }

@media (min-width: 900px) {
  .s2 { gap: 72px; padding: 110px 0 0; }
  .s2-grid { grid-template-columns: 1.05fr 1fr; gap: 80px; }
  .s2-left { gap: 30px; }
  .h2-b2 { line-height: 1.05; }
}

/* faixa de métricas */
.metrics {
  display: flex;
  border-top: 1px solid var(--hairline-2);
  border-bottom: 1px solid var(--hairline-2);
}

.metrics div { flex: 1; padding: 16px 0; }

.metrics b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-metric);
  color: var(--accent);
}

.metrics span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-metric-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.metrics .m-long { display: none; margin: 0; }

@media (min-width: 900px) {
  .metrics div { padding: 22px 0; }
  .metrics span { letter-spacing: 0.14em; }
  .metrics .m-long { display: inline; }
}

/* card "Dentro do material" */
.card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  padding: 24px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-label { color: var(--accent); letter-spacing: 0.18em; }

.list { display: flex; flex-direction: column; }

.list li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}

.list li:last-child { border-bottom: 1px solid var(--hairline); }

.list em {
  font-family: var(--font-mono);
  font-weight: 500;
  font-style: normal;
  font-size: var(--fs-mono);
  color: var(--text-dimmer);
  padding-top: 3px;
  flex: none;
}

.list span { font-size: var(--fs-bullet); line-height: 1.45; color: var(--text-strong); }

@media (min-width: 900px) {
  .card { padding: 44px 44px 48px; gap: 26px; }
  .card-label { letter-spacing: 0.20em; }
  .list li { gap: 18px; padding: 20px 0; }
  .list em { padding-top: 4px; }
}

/* faixa de quebra de objeção */
.quote-band { margin-top: 10px; }

.quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.3;
  letter-spacing: -0.01em;
  padding: 22px var(--gutter) 4px;
  max-width: 900px;
}

.quote-fade { display: none; }

@media (min-width: 900px) {
  .quote-band { margin-top: 0; }
  /* desktop: citação sobreposta nos 45% inferiores da imagem */
  .quote-fade {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 45%;
    background: linear-gradient(180deg,
      rgba(10, 10, 10, 0) 0%,
      rgba(10, 10, 10, 0.88) 55%,
      #0a0a0a 100%);
    pointer-events: none;
  }
  .quote {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0 var(--gutter) 46px;
    line-height: 1.25;
  }
}

/* ---------- 8. Dobra 3 — Fechamento ---------- */
.s3 { display: flex; flex-direction: column; padding-top: 46px; }

.s3-fade {
  background: linear-gradient(180deg,
    #0a0a0a 0%,
    rgba(10, 10, 10, 0) 35%,
    rgba(10, 10, 10, 0.6) 100%);
}

.s3-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px var(--gutter) 44px;
  max-width: 860px;
}

.h2-b3 { font-size: var(--fs-h2-b3); line-height: 1.02; letter-spacing: -0.02em; }

.s3-copy .lead { max-width: 46ch; }

@media (min-width: 900px) {
  .s3 { padding-top: 0; }
  .s3-fade {
    /* preto sólido a partir de 72% (não só em 100%): o texto abaixo
       sobe -70px sobre a imagem (ver .s3-copy), então a área onde ele
       pousa precisa já estar opaca — do contrário a foto ainda visível
       ali por trás quebra o contraste e "corta" a primeira linha do H2 */
    background: linear-gradient(180deg,
      #0a0a0a 0%,
      rgba(10, 10, 10, 0) 26%,
      rgba(10, 10, 10, 0) 58%,
      #0a0a0a 72%);
  }
  .s3-copy { gap: 30px; padding: 40px var(--gutter) 96px; margin-top: -70px; }
  .h2-b3 { line-height: 1; }
}

/* ---------- 9. Rodapé ---------- */
footer {
  border-top: 1px solid var(--border-card);
  padding: 26px var(--gutter) 40px;
}

.legal {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-legal);
  line-height: 1.75;
  color: var(--text-dimmer);
  max-width: 110ch;
}

@media (min-width: 900px) {
  footer { padding: 40px var(--gutter) 56px; }
  .legal { line-height: 1.7; }
}

/* ---------- 10. CTA sticky (mobile) ---------- */
/* Fora do design original. Só abaixo de 900px, escondido quando um CTA real
   está visível. Desktop permanece 100% fiel ao handoff. */
.cta-sticky { display: none; }

@media (max-width: 899px) {
  .cta-sticky {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    padding: 18px var(--gutter);
    min-height: 60px;
    border-top: 1px solid rgba(10, 10, 10, 0.35);
    transform: translateY(105%);
    transition: transform 200ms ease, background-color 140ms ease;
    will-change: transform;
  }
  .cta-sticky.is-visible { transform: translateY(0); }

  /* espaço pra barra não cobrir o fim do disclaimer */
  body.has-sticky-cta footer { padding-bottom: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .cta-sticky { transition: none; }
}

/* ---------- 11. Scroll reveal ---------- */
/* Estado padrão = totalmente visível. Só fica oculto/animado quando o
   sistema NÃO pede motion reduzido — assim funciona sem JS e respeita
   prefers-reduced-motion por padrão, sem checar isso via script. */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 560ms cubic-bezier(0.16, 0.8, 0.24, 1),
                transform 560ms cubic-bezier(0.16, 0.8, 0.24, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* stagger dos 5 itens do card "Dentro do material" */
.list li:nth-child(1) { --reveal-delay: 0ms; }
.list li:nth-child(2) { --reveal-delay: 70ms; }
.list li:nth-child(3) { --reveal-delay: 140ms; }
.list li:nth-child(4) { --reveal-delay: 210ms; }
.list li:nth-child(5) { --reveal-delay: 280ms; }