/* ==========================================================================
   CRAZY WEEK FSC — Página de vendas
   Tema CLARO com seções de respiro escuras (.on-dark) e CTA verde.

   Como o tema funciona: todos os componentes leem tokens (--text, --surface…).
   A classe .on-dark REDEFINE esses tokens no escopo dela — nenhum componente
   precisa de variante. Para inverter uma seção, é só somar a classe no HTML.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — tema claro (padrão)
   -------------------------------------------------------------------------- */
:root {
  /* Superfícies — off white e cinza do Manual de Marca FSC v1/2025 */
  --bg:            #FFFAF5;   /* off white oficial */
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --surface-3:     #F6F2EA;
  --band:          #F4EFE6;   /* faixa alternada, cria o ritmo claro/claro */
  --line:          #E6E6DC;   /* cinza oficial */
  --line-soft:     #EFEBE2;

  /* Texto — preto oficial + neutros derivados */
  --text:          #191918;
  --text-muted:    #5C5C58;
  --text-dim:      #83837D;

  /* Marca */
  --orange:        #FF6315;   /* complementar oficial (contexto educacional) */
  --orange-ink:    #D14A05;   /* versão legível quando o laranja vira TEXTO  */
  --royal:         #1C1CC4;   /* azul institucional — reserva                */
  --brick:         #A82217;   /* vermelho tijolo das capas                   */

  /* CTA verde — escurecido de propósito: #22A45D dá 3.1:1 com texto branco,
     o que reprova em WCAG. Este gradiente fica acima de 4:1. */
  --cta:           #0E9153;
  --cta-hot:       #0A7C42;
  --cta-ink:       #0A7C42;   /* verde em texto/ícone sobre fundo claro      */

  --warn:          #B8860B;

  /* Tipografia — Work Sans é a padrão do manual */
  --font-display: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-h1:   clamp(2rem, 1.25rem + 3.2vw, 3.5rem);
  --fs-h2:   clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
  --fs-h3:   clamp(1.25rem, 1rem + 1.1vw, 1.7rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.4vw, 1.16rem);
  --fs-body: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.78rem;

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(25,25,24,.06);
  --shadow-md: 0 10px 28px -14px rgba(25,25,24,.28);
  --shadow-lg: 0 26px 60px -28px rgba(25,25,24,.35);
  --shadow-cta: 0 12px 26px -12px rgba(10,124,66,.55);

  --maxw: 1140px;
  --maxw-narrow: 760px;
}

/* --------------------------------------------------------------------------
   1b. SEÇÕES ESCURAS — só redefinem tokens
   -------------------------------------------------------------------------- */
.on-dark {
  --bg:         #191918;
  --surface:    #191918;
  --surface-2:  #212120;
  --surface-3:  #2A2A28;
  --band:       #212120;
  --line:       #35352F;
  --line-soft:  #2A2A28;

  --text:       #FFFAF5;
  --text-muted: #C2C2BB;
  --text-dim:   #8E8E88;

  --orange-ink: #FF8542;
  --cta-ink:    #4CC98A;
  --warn:       #FFC93C;

  --shadow-md: 0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 26px 60px -24px rgba(0,0,0,.7);

  background: var(--bg);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--cta-ink); text-underline-offset: .2em; }
s { color: var(--text-dim); }
mark { background: rgba(255,201,60,.28); color: inherit; padding: 0 .25em; border-radius: 3px; }

:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, var(--maxw-narrow)); }
.section { padding-block: var(--section-y); background: var(--bg); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA
   -------------------------------------------------------------------------- */
.h1, .hero__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }

.h2 + .lead, .h3 + .lead { margin-top: var(--sp-4); }
.lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 62ch; }
.center .lead, .lead.center { margin-inline: auto; }
.prose { max-width: 62ch; margin-inline: auto; color: var(--text-muted); font-size: var(--fs-lead); }
.prose p + p { margin-top: var(--sp-4); }
.prose strong { color: var(--text); }

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

.eyebrow { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }

.tag {
  display: inline-block; font-size: var(--fs-sm); font-weight: 600;
  padding: .4rem .9rem; border-radius: var(--r-pill);
  background: rgba(255,99,21,.1); color: var(--orange-ink);
  border: 1px solid rgba(255,99,21,.3);
}

.pill {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,99,21,.5); color: var(--orange-ink);
  background: rgba(255,99,21,.08);
}

.microcopy { font-size: var(--fs-sm); color: var(--text-dim); margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   5. BOTÕES — CTA verde
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .98rem;
  letter-spacing: .01em; text-align: center; text-decoration: none;
  padding: 1rem 1.7rem; border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--cta), var(--cta-hot));
  color: #fff; box-shadow: var(--shadow-cta);
}
.btn--primary:hover { box-shadow: 0 18px 36px -12px rgba(10,124,66,.65); }

.btn--outline { border-color: var(--cta); background: transparent; color: var(--cta-ink); }
.btn--outline:hover { background: var(--cta); border-color: var(--cta); color: #fff; box-shadow: var(--shadow-cta); }

.btn--ghost { border-color: var(--line); color: var(--text); background: var(--surface); }
.btn--ghost:hover { border-color: var(--cta); color: var(--cta-ink); }

.btn--lg { padding: 1.2rem 2.3rem; font-size: 1.06rem; }
.btn--block { display: flex; width: 100%; }

.hero__cta .btn--primary { animation: pulse 3.2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 12px 26px -12px rgba(10,124,66,.55); }
  50%      { box-shadow: 0 14px 40px -8px rgba(10,124,66,.8); }
}

/* --------------------------------------------------------------------------
   6. CHECKS
   -------------------------------------------------------------------------- */
.ticks { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); list-style: none; padding: 0; }
.center .ticks, .ticks.center { justify-content: center; }
.ticks li { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.ticks li::before {
  content: ""; width: 1.05rem; height: 1.05rem; flex: none; border-radius: 50%;
  background: var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.7rem no-repeat;
}
.ticks--sm li { font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   7. BLOCO 0 — BARRA DE URGÊNCIA + CONTADOR
   -------------------------------------------------------------------------- */
.urgency-bar {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(90deg, var(--brick), #E04A08 55%, var(--orange));
  color: #fff; display: flex; align-items: center;
  box-shadow: 0 2px 14px rgba(25,25,24,.22);
}
.urgency-bar__inner {
  width: min(100% - 1.5rem, var(--maxw)); margin-inline: auto;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .35rem .75rem; padding-block: .5rem;
}
.urgency-bar__label { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .06em; }
.urgency-bar__sep  { opacity: .5; }
.urgency-bar__text { font-size: var(--fs-sm); opacity: .95; }

.countdown { display: flex; gap: .4rem; }
.countdown__unit {
  display: flex; flex-direction: column; align-items: center;
  min-width: 2.9rem; padding: .2rem .35rem;
  background: rgba(0,0,0,.24); border-radius: var(--r-sm);
}
.countdown__num { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown__lbl { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }

/* --------------------------------------------------------------------------
   8. BLOCO 1 — HERO (claro)
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--bg); padding-block: clamp(2.5rem, 1rem + 6vw, 5rem) 0; }
.hero__glow {
  position: absolute; inset: -35% 0 auto 0; height: 75vh; pointer-events: none;
  background:
    radial-gradient(46% 52% at 50% 0%, rgba(255,99,21,.14), transparent 70%),
    radial-gradient(38% 44% at 84% 14%, rgba(14,145,83,.10), transparent 70%);
}
.hero__inner { position: relative; text-align: center; display: grid; justify-items: center; gap: var(--sp-5); }
.hero__title { max-width: 26ch; text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--orange-ink); }
.hero__sub { font-size: var(--fs-lead); color: var(--text-muted); max-width: 58ch; }
.hero__sub strong { color: var(--text); }
.hero__cta { margin-top: var(--sp-2); }
.hero__figure { margin-top: var(--sp-4); max-width: 780px; }
.hero__figure img { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }

/* --------------------------------------------------------------------------
   9. BLOCO 2 — PROVA SOCIAL
   -------------------------------------------------------------------------- */
.proof { border-block: 1px solid var(--line); background: var(--surface); padding-block: var(--sp-6); }
.proof__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); text-align: center; }
.proof__item { display: grid; gap: .15rem; }
/* tabular-nums: dígitos de mesma largura, para a contagem não tremer. */
.proof__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 1rem + 1.8vw, 2.2rem); color: var(--orange-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.proof__lbl { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   10. BLOCO 3 — MECÂNICA
   -------------------------------------------------------------------------- */
.section--mechanic { background: var(--bg); }

/* Card de prazo. Duas colunas: a copy carrega o argumento, o painel da direita
   isola o CTA para ele não competir com o texto. */
.deal {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-6); align-items: center;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,99,21,.13), rgba(255,99,21,.03) 55%, transparent), var(--surface);
  box-shadow: var(--shadow-md);
}
.deal__body { display: grid; gap: var(--sp-4); }
.deal__body .lead { margin: 0; }
.deal__note { font-size: var(--fs-lead); color: var(--text-muted); }
.deal__note strong { color: var(--orange-ink); }

.deal__action {
  display: grid; gap: var(--sp-3); justify-items: center;
  padding: var(--sp-5); border-radius: var(--r-md);
  background: rgba(255,255,255,.65); border: 1px solid var(--line-soft);
}
/* O texto vive num <span> só: como itens de flex soltos, ele quebrava com o
   separador "·" pendurado sozinho no mobile. */
.deal__reassure {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); color: var(--text-muted); text-align: center;
}
.deal__reassure svg { width: 1.05em; height: 1.05em; fill: var(--cta-ink); flex: none; }

/* --------------------------------------------------------------------------
   11. BLOCOS 4/5 — PRODUTOS
   -------------------------------------------------------------------------- */
.product { background: var(--bg); }
.product--alt { background: var(--band); border-block: 1px solid var(--line); }

/* O banner segue escuro de propósito: é a "capa" do livro na página e
   funciona como pausa visual num layout claro. */
.product__banner {
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-8);
  background-color: #191918; color: #FFFAF5;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-md);
}
.product__banner--fundacoes  { background-image: linear-gradient(100deg, rgba(25,25,24,.95), rgba(168,34,23,.45)), url("/assets/img/bg-fundacoes.webp"); }
.product__banner--contencoes { background-image: linear-gradient(100deg, rgba(25,25,24,.95), rgba(255,99,21,.35)), url("/assets/img/bg-contencoes.webp"); }
.product__banner .lead { color: #DAD6D0; }
.product__banner .lead strong { color: #FFFAF5; }
.product__banner .pill { color: #FFB585; border-color: rgba(255,133,66,.6); background: rgba(255,99,21,.14); }
.product__banner .ticks li { color: #DAD6D0; }

.product__banner-body { padding: clamp(1.75rem, 1rem + 3vw, 3.25rem); display: grid; gap: var(--sp-4); max-width: 62ch; }
.product__banner-body .pill { justify-self: start; }

/* Banner com mockup do produto: texto à esquerda, livro à direita.
   O .webp tem alpha, então a pilha "flutua" sobre o fundo escuro.
   overflow visible é o que deixa o livro furar o retângulo do card — o
   border-radius continua recortando o background, só o conteúdo vaza. */
.product__banner--media {
  display: grid; grid-template-columns: 1fr minmax(200px, 34%);
  align-items: center; overflow: visible;
}
.product__banner--media .product__banner-body { padding-right: var(--sp-4); }
.product__banner-media {
  align-self: end;                    /* base do livro apoiada na borda de baixo */
  padding: 0 clamp(1rem, .5rem + 1vw, 2rem) 0 0;
}
.product__banner-media img {
  display: block; width: 100%; height: auto;
  /* O arquivo está recortado no limite da arte, então esta margem negativa é
     exatamente o quanto o livro sobe para fora do card. */
  margin-top: clamp(-5.5rem, -4.5vw, -2.5rem);
  margin-bottom: -1.25rem;            /* encosta um pouco além da borda de baixo */
  filter: drop-shadow(0 26px 48px rgba(0,0,0,.55));
}

.product .h3 { margin-top: var(--sp-8); }
.product .h3.center + .lead { margin-bottom: var(--sp-6); }

/* VSL — player VTurb. O script chega depois, então a proporção fica reservada
   aqui para o bloco não saltar. Medido nos dois players: entregam 16/9 a
   partir de 768px e 9/16 abaixo disso. Se você trocar o formato no painel do
   VTurb, é esta linha (e a do bloco responsivo) que precisa acompanhar. */
.vturb {
  position: relative; aspect-ratio: 16 / 9;
  max-width: 900px; margin: var(--sp-5) auto 0;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-3);
  box-shadow: var(--shadow-lg);
}
.vturb vturb-smartplayer { display: block; width: 100%; margin: 0 auto; }

/* Módulos do livro */
.modules {
  list-style: none; padding: 0; margin-top: var(--sp-6);
  display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.module {
  position: relative; padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.module__n {
  position: absolute; top: var(--sp-5); inset-inline-start: 1.25rem;
  width: 1.7rem; height: 1.7rem; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: .85rem;
  background: linear-gradient(135deg, var(--orange), #E04A08); color: #fff;
}
.module__t { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; margin: 0 0 var(--sp-3) 2.4rem; line-height: 1.3; }
.module ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.module li { position: relative; padding-left: 1.1rem; font-size: var(--fs-sm); color: var(--text-muted); }
.module li::before { content: "▸"; position: absolute; left: 0; color: var(--orange-ink); font-size: .8em; top: .15em; }


/* --------------------------------------------------------------------------
   11b. DESTAQUES DO LIVRO — livro no eixo, cards escalonados em volta
   --------------------------------------------------------------------------
   Usado nos dois livros: Fundações em faixa escura (.on-dark) e Contenções em
   faixa clara (.highlights--band). O layout é o mesmo; muda só a superfície. */
/* Espaçamento assimétrico de propósito. Em cima, o título já vem depois do
   player e de uma troca de superfície — não precisa do ritmo cheio de seção,
   que empilhava ~136px de vazio. Embaixo, o --section-y fica: é o que separa
   os cards do CTA. O margin-top só afasta a faixa da borda arredondada do
   player. */
.highlights { margin-top: var(--sp-5); padding-block: var(--sp-7) var(--section-y); }
/* O .product .h3 traz margin-top de --sp-8 para separar blocos dentro da
   seção clara. Aqui quem separa é o padding da faixa — as duas coisas somadas
   davam 136px de vazio antes do título. */
.highlights .h3 { margin-top: 0; }

/* Superfície é modificador, o resto do bloco é só layout — por isso Fundações
   pode ser escuro e Contenções claro sem duplicar uma linha de grid. */
.highlights--band { background: var(--band); }
.highlights.on-dark {
  /* Brilho quente atrás do livro, o mesmo laranja da marca em opacidade baixa. */
  background-image: radial-gradient(60% 55% at 50% 45%, rgba(168,34,23,.28), transparent 70%);
}
/* No escuro --surface é igual a --bg e o card sumiria. No claro o padrão
   (branco sobre a faixa bege) já é o que o layout pede. */
.highlights.on-dark .module { background: var(--surface-2); }
.highlights .module__n { width: 2.1rem; height: 2.1rem; font-size: .95rem; }
.highlights .module__t { margin-inline-start: 2.9rem; min-height: 2.1rem; display: flex; align-items: center; }

.highlights__grid {
  margin-top: var(--sp-7);
  display: grid; align-items: start;
  grid-template-columns: 1fr minmax(220px, 380px) 1fr;
  gap: var(--sp-5) var(--sp-4);
}

/* display:contents faz os <li> virarem itens do grid externo sem perder a
   lista. O role="list" no <ol> é o que segura a semântica no Safari, que
   descarta a lista quando o container é display:contents. */
.modules--split { display: contents; }

.highlights__art { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
.highlights__art img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 30px 55px rgba(0,0,0,.6));
}

/* Cards 1 e 3 à esquerda, 2 e 4 à direita; a coluna da direita desce um pouco
   para o conjunto não virar duas fileiras retas. */
.highlights .module:nth-child(1) { grid-column: 1; grid-row: 1; }
.highlights .module:nth-child(2) { grid-column: 3; grid-row: 1; margin-top: var(--sp-7); }
.highlights .module:nth-child(3) { grid-column: 1; grid-row: 2; }
.highlights .module:nth-child(4) { grid-column: 3; grid-row: 2; margin-top: var(--sp-7); }

.product .center > .btn { margin-top: var(--sp-7); }

/* --------------------------------------------------------------------------
   12. BLOCO 6 — BASE FSC  (seção escura: é software, e cria respiro)
   -------------------------------------------------------------------------- */
.section--base { background: var(--bg); }
.section--base .tag { margin-bottom: var(--sp-5); }
.section--base .h2 { margin-bottom: var(--sp-5); }
.section--base .h3 { margin-top: var(--sp-8); }

.pillars { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pillar {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start;
}
.pillar__tag {
  justify-self: start; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cta-ink); padding: .25rem .65rem; border-radius: var(--r-pill);
  background: rgba(14,145,83,.14); border: 1px solid rgba(14,145,83,.35);
}
.pillar__t { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.pillar p { font-size: var(--fs-sm); color: var(--text-muted); }
.pillar img, .pillar__video { border-radius: var(--r-sm); border: 1px solid var(--line); margin-top: var(--sp-2); }
/* aspect-ratio reserva a altura antes de o vídeo carregar (preload="none"),
   então nada salta quando ele entra. */
.pillar__video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--surface-3); }

.callout {
  margin-top: var(--sp-8); padding: var(--sp-6);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: grid; gap: var(--sp-5); justify-items: center;
}
.callout p { font-size: var(--fs-lead); color: var(--text-muted); max-width: 52ch; }
.callout strong { color: var(--text); }

/* --------------------------------------------------------------------------
   13. BLOCO 7 — CARDS DE OFERTA
   -------------------------------------------------------------------------- */
.section--offers { background: var(--band); border-block: 1px solid var(--line); }

.offers { margin-top: var(--sp-7); display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; }

/* flex-column + margin-top:auto no preço = preço e botão sempre na mesma
   linha, mesmo com títulos de alturas diferentes. */
.offer {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.offer--featured {
  border-color: var(--cta);
  box-shadow: 0 0 0 2px rgba(14,145,83,.18), var(--shadow-lg);
}
.offer__ribbon {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  padding: .4rem 1rem; border-radius: var(--r-pill); color: #fff;
  background: linear-gradient(135deg, var(--cta), var(--cta-hot));
  box-shadow: var(--shadow-cta);
}
.offer__badge {
  align-self: center; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink);
  padding: .3rem .8rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,99,21,.4); background: rgba(255,99,21,.07);
}
.offer__media { background: var(--surface-3); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-soft); }
.offer__t { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; text-align: center; line-height: 1.3; }
.offer__t .plus { color: var(--orange-ink); }
.offer__bonus {
  text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--orange-ink);
  padding: .55rem .75rem; border-radius: var(--r-sm);
  background: rgba(255,99,21,.08); border: 1px solid rgba(255,99,21,.28);
}
.offer__list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.offer__list li { position: relative; padding-left: 1.4rem; font-size: var(--fs-sm); color: var(--text-muted); }
.offer__list li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: .95rem; height: .95rem; border-radius: 50%;
  background: rgba(14,145,83,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7C42' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.6rem no-repeat;
}
.offer__list strong { color: var(--text); }

.offer__price { display: grid; justify-items: center; gap: .1rem; margin-top: auto; padding-top: var(--sp-2); }
.offer__from { font-size: var(--fs-sm); color: var(--text-dim); }
.offer__by   { font-size: var(--fs-xs); color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; }
.offer__now  { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.3rem); line-height: 1.05; color: var(--text); }
.offer--featured .offer__now { color: var(--cta-ink); }
.offer__inst { font-size: var(--fs-sm); color: var(--text-muted); }
[data-todo] { outline: 1px dashed var(--warn); outline-offset: 3px; }

.seals {
  list-style: none; padding: 0; margin-top: var(--sp-7);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.seals li { display: flex; align-items: center; gap: .4rem; }

/* --------------------------------------------------------------------------
   14. BLOCO 8 — AUTORES
   -------------------------------------------------------------------------- */
.section--authors { background: var(--bg); }
.authors { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.authors__photo img { border-radius: var(--r-lg); border: 1px solid var(--line); width: 100%; object-fit: cover; box-shadow: var(--shadow-md); }
.authors__body { display: grid; gap: var(--sp-5); }
.author { display: grid; gap: var(--sp-2); }
.author__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.author p { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   15. BLOCO 9 — FAQ
   -------------------------------------------------------------------------- */
.section--faq { background: var(--band); border-top: 1px solid var(--line); }
.faq { margin-block: var(--sp-6) var(--sp-7); display: grid; gap: var(--sp-3); }
.faq__item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-sm);
}
.faq__item[open] { border-color: var(--cta); box-shadow: 0 0 0 1px rgba(14,145,83,.15), var(--shadow-sm); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--cta-ink); flex: none; transition: transform .2s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   16. RODAPÉ (escuro)
   -------------------------------------------------------------------------- */
.footer { padding-block: var(--sp-7) calc(var(--sp-7) + 5rem); }
/* Marca à esquerda, contatos à direita; a faixa legal fecha embaixo, cruzando
   as duas colunas. */
.footer__inner {
  display: grid; gap: var(--sp-7) var(--sp-6);
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
}
.footer__logo { width: 100%; max-width: 200px; height: auto; }
.footer__brandcol { display: grid; gap: var(--sp-5); align-content: start; }
.footer__legal, .footer__copy { font-size: var(--fs-xs); color: var(--text-dim); }
.footer__legal { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }

.footer__contact { display: grid; gap: var(--sp-5); align-content: start; }
.footer__tag {
  justify-self: start; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink);
  padding: .45rem .9rem; border-radius: var(--r-sm);
  background: rgba(255,99,21,.10); border: 1px solid rgba(255,99,21,.30);
}
.footer__teams { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.team { display: grid; gap: var(--sp-3); align-content: start; }
.team__t { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
/* Bolinha verde do print, decorativa. */
.team__t::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cta-ink); flex: none; }
.team__list { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
/* Os números de cada pessoa correm em duas colunas, como no layout de
   referência; o nome (dt) atravessa as duas. Sobrando um ímpar, ele fica
   sozinho na última linha. */
dl.team__list { display: grid; grid-template-columns: repeat(2, max-content); gap: .2rem var(--sp-5); }
dl.team__list dt { grid-column: 1 / -1; }
/* Nome da pessoa: rótulo do grupo de números que vem abaixo. */
.team__list dt {
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); margin-top: var(--sp-3);
}
.team__list dt:first-child { margin-top: 0; }
.team__list dd { margin: 0; }
.team__list a { color: var(--text-muted); text-decoration: none; }
.team__list a:hover, .team__list a:focus-visible { color: var(--text); text-decoration: underline; }



/* --------------------------------------------------------------------------
   16b. PÁGINA DE OBRIGADO (obrigado.html)
   -------------------------------------------------------------------------- */
.thanks { background: var(--bg); padding-block: var(--section-y); }
.thanks__seal {
  width: 4.5rem; height: 4.5rem; margin: 0 auto var(--sp-5);
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(14,145,83,.12); border: 1px solid rgba(14,145,83,.35);
}
.thanks__seal svg { width: 2.2rem; height: 2.2rem; fill: var(--cta-ink); }
.thanks .lead { margin: var(--sp-4) auto 0; }


.section--notice { padding-block: var(--section-y); }
.section--notice .tag { margin-bottom: var(--sp-4); }
.section--notice .lead { margin-inline: auto; }
.section--notice .vturb { margin-top: var(--sp-6); }

/* Marcação de onde entra a oferta, enquanto o CONFIG não estiver preenchido.
   Usa o mesmo contorno tracejado das outras pendências do projeto. */
/* O embed da Hotmart traz o próprio visual; aqui só reservamos o espaço. */
.upsell-embed { display: grid; gap: var(--sp-3); align-content: start; padding: 0; background: none; border: 0; }
.upsell-slot {
  padding: var(--sp-4);
  border-radius: var(--r-md); background: rgba(255,201,60,.08);
  font-size: var(--fs-sm); color: var(--text-muted); text-align: start;
}
.upsell-slot strong { display: block; color: var(--warn); margin-bottom: .35rem; }
.upsell-slot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  padding: .1rem .3rem; border-radius: 4px; background: rgba(255,255,255,.08); color: var(--text);
}

.section--upsell { background: var(--band); border-block: 1px solid var(--line); }
.section--upsell .lead { margin-inline: auto; }
.section--upsell .deal { margin-top: var(--sp-6); }
/* Tag de urgência: o mesmo laranja dos avisos de prazo do index. */
.tag--warn { color: var(--orange-ink); background: rgba(255,99,21,.10); border-color: rgba(255,99,21,.30); }

/* Rodapé enxuto: a página de obrigado não repete os contatos do index. */
.footer--slim .container { display: grid; gap: var(--sp-4); justify-items: center; }
.footer--slim .footer__logo { max-width: 170px; }
.footer--slim .footer__legal { text-align: center; }
.footer__notice { font-size: var(--fs-xs); color: var(--text-dim); max-width: 68ch; }
.footer__notice strong { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   17. STICKY CTA
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 24px -12px rgba(25,25,24,.35);
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .3s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__inner { width: min(100%, var(--maxw)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.sticky-cta__info { display: grid; line-height: 1.2; }
.sticky-cta__label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.sticky-cta__time { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.sticky-cta .btn { padding: .85rem 1.3rem; font-size: .9rem; flex: none; }

/* --------------------------------------------------------------------------
   18. MODAL DE PRÉ-CHECKOUT
   -------------------------------------------------------------------------- */
/* margin:auto é obrigatório: o reset `* { margin: 0 }` mata a centralização
   nativa que o navegador aplica ao <dialog>. */
.modal {
  margin: auto; border: 0; padding: 0; background: transparent;
  max-width: 480px; width: min(100% - 2rem, 480px);
  max-height: calc(100dvh - 2rem); color: var(--text);
}
.modal::backdrop { background: rgba(25,25,24,.6); backdrop-filter: blur(4px); }
.modal[open] { animation: modalIn .22s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.modal__box {
  position: relative; display: grid; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.modal__close { position: absolute; top: .5rem; right: .75rem; font-size: 1.7rem; line-height: 1; color: var(--text-dim); padding: .25rem .5rem; }
.modal__close:hover { color: var(--text); }
.modal__eyebrow { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--cta-ink); font-weight: 700; }
.modal__title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.modal__sub { font-size: var(--fs-sm); color: var(--text-muted); }
.modal__sub strong { color: var(--cta-ink); }
.modal__legal { font-size: var(--fs-xs); color: var(--text-dim); text-align: center; }

.field { display: grid; gap: .35rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field input {
  padding: .85rem .95rem; border-radius: var(--r-sm);
  background: #fff; border: 1px solid #D8D4CB; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #9C9890; }
.field input:focus { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(14,145,83,.15); outline: none; }
.field input[aria-invalid="true"] { border-color: #C0392B; }
.field__hint  { font-size: var(--fs-xs); color: var(--text-dim); }
.field__error { font-size: var(--fs-xs); color: #C0392B; }
.field__error:empty { display: none; }

.btn.is-loading { pointer-events: none; opacity: .75; }

/* --------------------------------------------------------------------------
   19. PÁGINA EXPIRADA
   -------------------------------------------------------------------------- */
.expired { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-7) 0; background: var(--bg); }
.expired .lead { margin-block: var(--sp-5) var(--sp-6); }

/* --------------------------------------------------------------------------
   20. RESPONSIVO
   -------------------------------------------------------------------------- */
/* Abaixo de 900px as três colunas espremem os cards: vira coluna única, com o
   livro em cima. O <figure> vem antes dos <li> no HTML justamente para isso. */
@media (max-width: 900px) {
  .highlights__grid { grid-template-columns: 1fr; }
  .highlights__art { grid-column: auto; grid-row: auto; max-width: 300px; margin-inline: auto; }
  .highlights .module:nth-child(n) { grid-column: auto; grid-row: auto; margin-top: 0; }
}

@media (max-width: 860px) {
  /* Sem largura para as duas colunas: o CTA desce para baixo da copy. */
  .deal { grid-template-columns: 1fr; gap: var(--sp-5); }
  /* Em coluna única a copy fica centralizada, alinhada com o CTA logo abaixo.
     O max-width do .lead precisa do margin-inline para centralizar de fato —
     sem ele o bloco continuaria colado à esquerda mesmo com o texto centrado. */
  .deal__body { text-align: center; }
  .deal__body .lead { margin-inline: auto; }
  /* A linha de garantia não cabe inteira no painel estreito e quebrava em
     lugar aleatório, com o "·" pendurado. Aqui a quebra é decidida: uma
     afirmação por linha, e o separador some porque a quebra já separa. */
  .deal__reassure { justify-content: center; text-align: center; }
  .deal__reassure .deal__sep { display: none; }
  .deal__reassure .deal__parte2 { display: block; }

  /* Sem espaço para duas colunas: o livro desce para baixo do texto. */
  .product__banner--media { grid-template-columns: 1fr; }
  .product__banner--media .product__banner-body { padding-right: clamp(1.75rem, 1rem + 3vw, 3.25rem); padding-bottom: 0; }
  /* Empilhado não dá para vazar pelo topo (tem texto ali): vaza pela base. */
  .product__banner-media { align-self: auto; padding: 0 clamp(1.75rem, 1rem + 3vw, 3.25rem) 0; justify-items: center; }
  .product__banner-media img { max-width: 300px; margin-top: 0; margin-bottom: -2rem; margin-inline: auto; }

  .authors { grid-template-columns: 1fr; }
  .authors__photo { max-width: 420px; margin-inline: auto; }
}

/* O VTurb vira vertical abaixo de 768px — fora do breakpoint de 640 do resto
   da página, porque quem manda aqui é o player, não o nosso layout. */
@media (max-width: 767px) {
  .vturb { aspect-ratio: 9 / 16; }
}

@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr; }
  /* Em coluna única a marca fica centralizada. A coluna dos contatos continua
     alinhada à esquerda: são listas de números, e centralizar lista faz o olho
     perder a coluna de leitura. */
  .footer__brandcol { justify-items: center; text-align: center; }
  .footer__logo { max-width: 140px; }
  /* A razão social tem 342px a 14px, contra 335 disponíveis, e quebrava
     deixando "LTDA" sozinho. Tamanho fluido para a linha caber inteira em
     qualquer largura de celular — sem nowrap, que causaria rolagem lateral
     se a fonte renderizar mais larga em outro aparelho. */
  .footer__legal { font-size: clamp(0.65rem, 3.45vw, 0.875rem); }
}

/* Headline do hero em 6 linhas no celular.
   O piso do --fs-h1 (2rem) trava em 32px e a manchete cai em 7-8 linhas. Como
   a quebra depende da razão entre o texto e a largura do container — e as duas
   escalam com a viewport —, um valor em vw mantém as 6 linhas de 320 a 480px.
   Medido: em cada largura o resultado cai dentro da faixa que dá 6 linhas.
   Os limites em rem existem para o texto ainda responder ao ajuste de fonte
   do sistema, que vw sozinho ignoraria. */
@media (max-width: 480px) {
  .hero__title { font-size: clamp(1.4rem, 7.3vw, 2.2rem); }
  /* Mesma lógica para o subtítulo, em 4 linhas. Ver a ressalva de leitura no
     README §6b: aqui o texto fica menor que os 16px confortáveis de corpo. */
  .hero__sub { font-size: clamp(0.8rem, calc(5px + 2.5vw), 1.1rem); }

  /* Os três selos do hero em uma linha só. Os itens somam 411px contra 335px
     disponíveis, então não bastou encolher a fonte: o ícone e os espaços têm
     tamanho fixo e não acompanham. Reduzi os três juntos.
     Abaixo de ~355px nem assim cabe, e o flex-wrap devolve a segunda linha —
     é o comportamento correto, melhor que texto ilegível. */
  .hero .ticks { column-gap: 8px; }
  .hero .ticks li { font-size: clamp(0.7rem, 3.2vw, 0.9rem); gap: .35rem; }
  .hero .ticks li::before { width: .85rem; height: .85rem; background-size: .58rem; }

  /* Parágrafo de abertura dos destaques em 3 linhas. Vale para os dois livros,
     mas só o de Fundações (107 caracteres) chega a 3 — o de Contenções tem 155
     e precisaria de 12px, pequeno demais. Ver ressalva no README §6b. */
  .highlights .lead { font-size: clamp(0.8rem, calc(4.5px + 2.66vw), 1.05rem); }
}

@media (max-width: 640px) {
  /* Barra em uma linha só: no mobile ela come altura de dobra. */
  .urgency-bar__text, .urgency-bar__sep { display: none; }
  .urgency-bar__inner { gap: .45rem; flex-wrap: nowrap; padding-block: .4rem; }
  .urgency-bar__label { font-size: .72rem; letter-spacing: .04em; }
  .countdown { gap: .25rem; }
  .countdown__unit { min-width: 2.15rem; padding: .15rem .25rem; }
  .countdown__num { font-size: .88rem; }
  .countdown__lbl { font-size: .5rem; letter-spacing: .06em; }

  .proof__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .proof__item { display: flex; align-items: baseline; justify-content: center; gap: .5rem; }

  .modules { grid-template-columns: 1fr; }

  .offer { padding: var(--sp-6) var(--sp-4) var(--sp-4); }

  .btn--lg { width: 100%; padding: 1.1rem 1.25rem; font-size: 1rem; }
  .sticky-cta .btn { width: auto; }
}

@media (min-width: 641px) {
  .sticky-cta { display: none; }
  .footer { padding-bottom: var(--sp-7); }
}