/* ============================================================
   PARE DE SABOTAR SUA RIQUEZA — Landing Page
   Sistema Editorial RAIZ · CSS puro, sem frameworks
   ------------------------------------------------------------
   Sumário
   1. Tokens (paleta, tipografia, espaçamento)
   2. Base e reset
   3. Componentes (botão, selo, títulos, listas, revela)
   4. Cabeçalho
   5. Hero
   6. Seções de conteúdo
   7. Frases de impacto
   8. Trechos, ideias, benefícios, para quem
   9. FAQ
   10. CTA final e rodapé
   11. Responsividade
   12. Acessibilidade e movimento reduzido
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS — paleta e tipografia do sistema RAIZ
   ------------------------------------------------------------ */
:root {
  /* Paleta RAIZ */
  --osso:         #F3F0E8;
  --osso-escuro:  #E7E2D4;
  --tinta:        #211D17;
  --terra:        #2B2620;
  --terra-relevo: #363028;
  --bronze:       #8A6B3F;
  --bronze-10:    rgba(138, 107, 63, 0.10);
  --oxblood:      #6E2E28;
  --grafite:      #6B655B;
  --bronze-texto: #6F5533;   /* bronze aprofundado p/ texto pequeno — ≥4.5:1 (WCAG AA)
                                sobre Osso (6.1:1) e Osso Escuro (5.4:1) */
  --cta:          #3F6B56;   /* cor exclusiva dos botões de compra          */
  --cta-escuro:   #335847;   /* hover/active dos botões de compra           */
  --osso-suave:   #CFC8B8;   /* texto secundário sobre Terra */

  /* Tipografia RAIZ */
  --f-display: "Fraunces", Georgia, serif;
  --f-texto:   "Source Serif 4", Charter, Georgia, serif;
  --f-sans:    "IBM Plex Sans", "Helvetica Neue", sans-serif;

  /* Escala de espaçamento */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6.5rem;

  /* Layout */
  --largura: 72rem;
  --largura-estreita: 44rem;
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--osso);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.125rem;
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

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

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.svg-defs { position: absolute; }

[id] { scroll-margin-top: 4.5rem; }   /* âncoras livres do cabeçalho fixo */

.container {
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.container--estreito { max-width: var(--largura-estreita); }

/* ------------------------------------------------------------
   3. COMPONENTES
   ------------------------------------------------------------ */

/* Selo — rótulo de seção (versalete IBM Plex, tracking alto) */
.selo {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-texto);
  margin: 0 0 var(--sp-2);
}

/* Título de seção — Fraunces */
.titulo {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
  max-width: 24em;
  text-wrap: balance;
}

/* Prosa corrida */
.prosa { max-width: 38em; }
.prosa p { margin-bottom: 0.9em; }

/* Botões — retos, tipográficos, sem sombra */
.botao {
  display: inline-block;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.9em 2em;
  border: 1px solid var(--cta);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.botao:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }
.botao:active { background: var(--cta-escuro); border-color: var(--cta-escuro); color: var(--osso); }
.botao--cheio {
  background: var(--cta);
  color: var(--osso);
}
.botao--cheio:hover { background: var(--cta-escuro); border-color: var(--cta-escuro); }
.botao--contorno {
  background: transparent;
  color: var(--cta);
}
.botao--contorno:hover { background: var(--cta); color: var(--osso); }
.botao--claro {
  background: var(--cta);
  color: var(--osso);
  border-color: var(--cta);
}
.botao--claro:hover { background: var(--cta-escuro); border-color: var(--cta-escuro); }
/* Sobre fundo Terra (CTA final), o foco precisa de cor clara para ser visível */
.cta-final .botao:focus-visible { outline-color: var(--osso); }

/* Lista com marcador Linha-Raiz (traço duplo divergente) */
.lista-raiz {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista-raiz li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.7em;
  font-size: 1.0625rem;
}
.lista-raiz li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.85em;
  height: 0.5em;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--bronze) 44%, var(--bronze) 56%, transparent 56%) left/60% 100% no-repeat,
    linear-gradient(to top right,    transparent 44%, var(--bronze) 44%, var(--bronze) 56%, transparent 56%) right/60% 100% no-repeat;
}
.lista-raiz strong { font-weight: 600; }
.lista-raiz--folga li { margin-bottom: 1em; }

/* Revelação no scroll — discreta, apenas fade + leve subida */
.revela {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.revela.visivel {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   4. CABEÇALHO
   ------------------------------------------------------------ */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--osso);                                        /* fallback */
  background: color-mix(in srgb, var(--osso) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--osso-escuro);
}
.topo-inner {
  max-width: var(--largura);
  margin-inline: auto;
  padding: 0.9rem clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--tinta);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.marca-raiz {
  width: 1.5rem;
  height: 1rem;
  color: var(--bronze);
  flex-shrink: 0;
}
.topo .botao { padding: 0.55em 1.3em; font-size: 0.8125rem; }

/* ------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------ */
.hero { padding: var(--sp-6) 0 var(--sp-5); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-titulo {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.hero-titulo em {
  font-style: italic;
  font-weight: 600;
}
.hero-sub {
  font-size: 1.125rem;
  color: var(--grafite);
  max-width: 30em;
  margin-bottom: var(--sp-4);
}
.hero-acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.hero-nota {
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  color: var(--grafite);
}
.hero-mockup { margin: 0; }
.hero-mockup img { border-radius: 4px; }

/* ------------------------------------------------------------
   6. SEÇÕES
   ------------------------------------------------------------ */
.secao { padding: var(--sp-6) 0; }
.secao--tom { background: var(--osso-escuro); }

/* Ciclo emocional — os 8 estágios, em sequência tipográfica */
.ciclo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin: var(--sp-3) 0 var(--sp-4);
  font-family: var(--f-sans);
  font-size: 0.875rem;
  color: var(--tinta);
}
.ciclo span {
  padding: 0.35em 0;
}
.ciclo span:not(:last-child)::after {
  content: "→";
  color: var(--bronze);
  margin: 0 0.75em;
}
.ciclo span:last-child { color: var(--oxblood); font-weight: 600; }

/* ------------------------------------------------------------
   7. FRASES DE IMPACTO — eco das páginas do livro
   ------------------------------------------------------------ */
.impacto {
  background: var(--terra);
  color: var(--osso);
  padding: var(--sp-6) clamp(1.25rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.impacto-frase {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.625rem, 4vw, 2.5rem);
  line-height: 1.3;
  max-width: 17em;
  margin: 0;
  text-wrap: balance;
}
.impacto-raiz {
  width: 2.2rem;
  height: 1.5rem;
  color: var(--bronze);
  margin-top: var(--sp-3);
}

/* ------------------------------------------------------------
   8. CONTEÚDO — partes, ideias, trechos, benefícios, para quem
   ------------------------------------------------------------ */

/* O que você aprenderá */
.partes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
}
.parte-nome {
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.1875rem;
  margin: 0 0 var(--sp-2);
}

/* Bandas de imagem (mockups distribuídos) */
.banda-imagem {
  padding: var(--sp-5) clamp(1.25rem, 5vw, 3rem);
  display: flex;
  justify-content: center;
}
.banda-imagem img {
  max-width: min(34rem, 100%);
  border-radius: 4px;
}
/* Variante "palco": painel editorial que ocupa praticamente toda a
   largura útil do container, em tom Osso Escuro. A faixa é mais baixa
   (padding vertical reduzido) e a imagem é dimensionada pela altura
   do palco — sempre inteira, sem cortes e sem distorção: height fixa
   + width auto preservam a proporção nativa do arquivo. */
.banda-imagem--palco {
  background: none;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}
.banda-imagem--palco img {
  background: var(--osso-escuro);
  width: min(var(--largura), 100%);      /* painel = largura útil total  */
  height: clamp(26rem, 62vh, 36rem);     /* faixa baixa, sem vazio extra */
  object-fit: contain;                   /* imagem inteira, centrada     */
  object-position: center;
  border-radius: 6px;
  padding: var(--sp-3) 0;
}

/* Principais ideias */
.ideias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-4);
  margin-top: var(--sp-4);
}
.ideia {
  border-top: 1px solid var(--bronze);
  padding-top: var(--sp-2);
}
.ideia h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.3;
  margin: 0 0 0.5em;
}
.ideia p {
  font-size: 0.9875rem;
  color: var(--grafite);
  margin: 0;
}

/* CTA intermediário — um único botão centrado, sem ornamento */
.cta-meio {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
}

/* Trechos do livro */
.trecho {
  margin: var(--sp-4) 0 0;
  padding-left: clamp(1rem, 4vw, 2rem);
  border-left: 3px solid var(--bronze);
}
.trecho blockquote { margin: 0; }
.trecho blockquote p {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.1875rem, 2.2vw, 1.375rem);
  line-height: 1.5;
  margin: 0;
}
.trecho figcaption {
  font-family: var(--f-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-top: var(--sp-2);
}
.trecho figcaption::before { content: "— "; color: var(--bronze); }

/* Depoimentos de leitores */
.depoimentos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.depoimento {
  margin: 0;
  border-top: 1px solid var(--bronze);
  padding-top: var(--sp-2);
}
.depoimento blockquote { margin: 0; }
.depoimento blockquote p {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.45;
  margin: 0 0 var(--sp-2);
}
.depoimento figcaption {
  font-family: var(--f-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* Benefícios */
.beneficios-grid {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.beneficios-mockup { margin: 0; }
.beneficios-mockup img { border-radius: 4px; }

/* Para quem é */
.paraquem {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
}
.pq-titulo {
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.1875rem;
  margin: 0 0 var(--sp-2);
}
.pq-coluna--nao .pq-titulo { color: var(--oxblood); }
.pq-coluna--nao .lista-raiz li::before {
  background:
    linear-gradient(to bottom right, transparent 44%, var(--oxblood) 44%, var(--oxblood) 56%, transparent 56%) left/60% 100% no-repeat,
    linear-gradient(to top right,    transparent 44%, var(--oxblood) 44%, var(--oxblood) 56%, transparent 56%) right/60% 100% no-repeat;
}

/* ------------------------------------------------------------
   9. FAQ — details/summary nativo, sem JavaScript obrigatório
   ------------------------------------------------------------ */
.faq { margin-top: var(--sp-4); }
.faq-item {
  border-top: 1px solid var(--osso-escuro);
}
.faq-item:last-child { border-bottom: 1px solid var(--osso-escuro); }
.faq-item summary {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.125rem;
  padding: 1.1rem 2.5rem 1.1rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--bronze);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p {
  padding: 0 0 1.25rem;
  max-width: 38em;
  color: var(--grafite);
  font-size: 1.0625rem;
}

/* ------------------------------------------------------------
   10. CTA FINAL E RODAPÉ
   ------------------------------------------------------------ */
.cta-final {
  background: var(--terra);
  color: var(--osso);
  padding: var(--sp-6) 0;
  text-align: center;
}
.cta-final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-raiz {
  width: 2.6rem;
  height: 1.7rem;
  color: var(--bronze);
  margin-bottom: var(--sp-3);
}
.cta-titulo {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}
.cta-titulo em { font-style: italic; font-weight: 600; }
.cta-sub {
  color: var(--osso-suave);
  font-size: 1.125rem;
  margin-bottom: var(--sp-4);
}
.cta-nota {
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  color: var(--osso-suave);
  margin-top: var(--sp-2);
}

.rodape {
  background: var(--terra);
  color: var(--osso-suave);
  border-top: 1px solid var(--terra-relevo);
  padding: var(--sp-4) 0;
}
.rodape-inner { text-align: center; }
.rodape-marca {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  color: var(--osso);
  margin-bottom: 0.5rem;
}
.rodape-nota {
  font-family: var(--f-sans);
  font-size: 0.75rem;
  line-height: 1.7;
  margin: 0;
}

/* ------------------------------------------------------------
   11. RESPONSIVIDADE
   ------------------------------------------------------------ */
@media (max-width: 60rem) {
  .hero { padding-top: var(--sp-5); }
  .hero-grid,
  .beneficios-grid {
    grid-template-columns: 1fr;
  }
  .ideias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .depoimentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .depoimentos .depoimento:last-child { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  .secao, .hero, .impacto, .cta-final { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  .banda-imagem--palco img {
    width: 100%;
    height: auto;                        /* proporção nativa no mobile */
    padding: var(--sp-2) 0;
  }
  .partes,
  .ideias,
  .paraquem,
  .depoimentos { grid-template-columns: 1fr; }
  .marca span { font-size: 0.875rem; }
  .ciclo { font-size: 0.8125rem; }
  .ciclo span:not(:last-child)::after { margin: 0 0.5em; }
}

/* ------------------------------------------------------------
   12. ACESSIBILIDADE E MOVIMENTO REDUZIDO
   ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .faq-item summary::after { transition: none; }
}