/* ═══════════════════════════════════════════════════════════════════
   E-BOOK CORES — especifico deste site
   Carrega depois de base.css. So o que nao existe no sistema.

   Nota de paleta: o produto e sobre teoria das cores. A INTERFACE segue
   preta e dourada (nav, botao, filete, trilha, numero). A COR entra so
   como CONTEUDO — ela e o assunto do e-book: leque de matiz atras do
   livro, respingos, e as fichas de cor de cada etapa do passo a passo.
   Nunca como fundo de bloco nem em texto corrido. Ver DESIGN_SYSTEM.md §2.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Seis matizes tirados da propria roda de cores do produto, na ordem do
     circulo cromatico (vermelho → laranja → amarelo → verde → azul →
     violeta) para que o conic-gradient do leque saia continuo. */
  --c1:#D3352E;  /* vermelho cadmio  */
  --c2:#E08221;  /* laranja          */
  --c3:#E9C13A;  /* amarelo cadmio   */
  --c4:#2F8C68;  /* verde            */
  --c5:#2A5EAE;  /* azul ultramar    */
  --c6:#8A3A80;  /* violeta          */
}

/* ── REGRA DAS ORFAS ───────────────────────────────────────────────
   Pedido do cliente: "cuidado com palavras sozinhas em uma linha so, isso
   deixa feio, nao fica gostoso de ler". As quebras dos titulos principais
   estao fechadas na mao (ver o <h1> do hero e o <h2> da garantia), mas
   quebra na mao so vale pra largura em que foi testada. `text-wrap:balance`
   e a rede: o navegador distribui as linhas em larguras parecidas, entao a
   ultima linha nunca fica com uma palavra sozinha. Vale para blocos curtos,
   por isso a lista abaixo se limita a titulo, lead e microcopy — e inclui
   as linhas do <h1> como seguro caso alguma estoure numa largura nao
   testada. Onde nao ha suporte, o comportamento e o de hoje: nada quebra. */
.h2, .subhead, .lead, .hero__sub, .hero__title .line > span,
.card h3, .step h4, .step p, .offer__list li, .feat span,
.testi p, .quote, .final .h2{
  text-wrap:balance;
}

/* ── HERO ──────────────────────────────────────────────────────────
   Foto gerada no Higgsfield com o Soul da Lari: ela na METADE DIREITA
   misturando vermelho no branco sobre a paleta de madeira, com a roda de
   cores e a cartela de tons na mesa, e a metade esquerda inteiramente
   preta e vazia para o texto. Substituiu `teoria-das-cores-roda.webp`,
   que era asset do Hotmart em quality(1) — ampliado em tela cheia dava
   pra ver o serrilhado do pincel e da roda.

   A imagem ja nasce low-key: o veu horizontal pode ser mais leve que o do
   sistema (fecha em 54% em vez de 78%) e a roda de cores, que e argumento
   de venda desta pagina, nao e apagada. Saturacao quase cheia pelo mesmo
   motivo: aqui a cor da tinta E o produto. */
/* O sistema sangra a foto 11% acima E abaixo do hero. Aqui a sangria de
   baixo cai pra 4%: a roda de cores e a paleta com a tinta vermelha vivem
   no rodape do enquadramento e eram cortadas fora. Menos altura sobrando
   tambem significa menos folga pro parallax — dai o data-parallax="0.06"
   no HTML (com 0.12 o deslocamento passava dos 4% e abria uma faixa preta
   embaixo da foto ao rolar). */
.hero__media{ inset:-11% 0 -4% 0 }
/* `contrast(1.13)` nao e estetica, e conserto: o fundo da foto tem um degrau
   tonal vertical de ~10 niveis por volta de 48% da largura (herança do
   render), e num preto de RGB 14 esse degrau aparece como uma emenda. O
   contraste esmaga tudo abaixo de ~14 para preto puro, a metade esquerda
   fica chapada, e o degrau cai pra 6-7 niveis. O brilho compensa o que o
   contraste tirou do rosto e da tinta. */
.hero__media img{
  object-position:48% 50%;
  filter:saturate(1.02) contrast(1.13) brightness(1.12);
}
/* O veu segura ~.85 de opacidade ate 44% e so entao despenca: com isso o
   que resta do degrau some, e a roda de cores (que comeca em ~51%) pega
   apenas o rabo do gradiente — dimeriza os primeiros pixels dela, o que
   passa por luz de estudio, nao por defeito. */
.hero__scrim{
  background:
    linear-gradient(94deg,
      rgba(4,4,4,.95) 0%, rgba(4,4,4,.92) 34%, rgba(4,4,4,.85) 44%,
      rgba(4,4,4,.5) 50%, rgba(4,4,4,.14) 56%, rgba(4,4,4,0) 62%),
    linear-gradient(180deg,
      rgba(4,4,4,.66) 0%, rgba(4,4,4,.04) 20%, rgba(4,4,4,.04) 58%,
      rgba(4,4,4,.82) 88%, var(--ink) 100%);
}
/* Coluna de texto um pouco mais larga que o padrao (.78fr): com .88fr cada
   linha do <h1> ganha folga de sobra e nenhuma palavra e empurrada sozinha
   pra linha seguinte — era o defeito que o cliente reprovou ("cor." orfa).
   Cabe porque a Lari, nesta foto, so comeca em ~50% do quadro. */
@media (min-width:981px){
  .hero__grid{ grid-template-columns:minmax(0,.88fr) 1fr }
}
/* Sem coluna livre, o texto cai em cima da Lari — e nesta foto a luz bate
   justamente no rosto e no braco, que e onde o paragrafo passa. Dai dois
   tratamentos: no tablet o texto ainda ocupa pouca altura e a foto pode
   respirar; no celular ele cobre quase tudo e a foto tem de recuar. */
@media (max-width:980px){
  .hero__media img{ object-position:64% 50%; filter:saturate(.94) contrast(1.05) brightness(.92) }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.8) 0%, rgba(4,4,4,.36) 18%, rgba(4,4,4,.7) 52%,
      rgba(4,4,4,.94) 88%, var(--ink) 100%);
  }
}

.section--tight{ padding-block:clamp(56px,7vw,96px) }

/* ── FAIXA DE DESTAQUES (ilustrado / paginas / acesso / atualizado) ─
   Sao qualidades, nao contadores — por isso um componente proprio em
   vez de reaproveitar .hero__stats (que e para numeros animados). */
.feat-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:var(--line-soft);
}
.feat{
  background:var(--ink); padding:28px 14px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.feat svg{ width:26px; height:26px; color:var(--gold) }
.feat span{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim);
  max-width:16ch; line-height:1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   O E-BOOK ABERTO, SOLTANDO COR  (secao "surpreenda-se")
   Antes era a foto quadrada da capa sobre uma mesa: uma fotinho solta,
   sem peso, que deixava a coluna da direita mais baixa que a do texto e
   sobrava preto embaixo. Agora e uma peca montada: a foto e SO o livro
   aberto sobre preto, e tudo em volta e desenhado em CSS/SVG.

   Como as camadas se sobrepoem, de baixo pra cima:
     __fan     leque de matiz (conic-gradient recortado em anel, desfocado)
     __glow    brilho colorido que "vaza" do miolo do livro
     img       o livro, PNG/WebP com alpha — recortado do fundo
     __drops   respingos e arcos de tinta, por cima
     __ring    filete dourado: a assinatura da marca fecha a composicao

   Nota sobre o recorte (importante se alguem trocar a imagem): o render
   vem com fundo preto CHAPADO, e nenhum truque de CSS resolve isso. Tanto
   `mix-blend-mode:screen` quanto `lighten` desenham um quadrado no meio da
   secao — exatamente o defeito que o cliente reprovou no mockup de
   dispositivos — porque o blend acontece dentro de um grupo isolado (o
   `filter:blur` do `.reveal` ja cria esse grupo) e ali o backdrop nasce
   transparente, sobrando o proprio preto da foto, opaco.
   A solucao foi dar ALPHA de verdade ao arquivo: flood-fill a partir das
   bordas sobre tudo com luma < 48 (assim as cartelas escuras, que estao
   cercadas de papel branco, sobrevivem), depois manter so o maior
   componente conexo (mata as manchas de vinheta soltas no canto) e
   suavizar a franja. Fonte e script em _core/img/ebook-aberto-cores/.
   ═══════════════════════════════════════════════════════════════════ */
.bookart{
  position:relative; width:100%; max-width:470px; aspect-ratio:1;
  margin-inline:auto; display:grid; place-items:center;
}
.bookart > *{ grid-area:1/1 }

.bookart__fan{
  width:100%; height:100%; border-radius:50%;
  background:conic-gradient(from -96deg,
    var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6), var(--c1));
  -webkit-mask:radial-gradient(circle at 50% 50%,
    transparent 27%, #000 42%, #000 61%, transparent 79%);
          mask:radial-gradient(circle at 50% 50%,
    transparent 27%, #000 42%, #000 61%, transparent 79%);
  filter:blur(17px) saturate(1.06); opacity:.5;
}
.bookart__glow{
  width:76%; height:52%; border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(233,193,58,.5) 0%, rgba(211,53,46,.32) 38%,
    rgba(42,94,174,.22) 66%, transparent 100%);
  filter:blur(28px);
}
.bookart img{
  position:relative; width:92%; height:auto;
  filter:saturate(1.06) contrast(1.03) drop-shadow(0 22px 30px rgba(0,0,0,.6));
}
.bookart__drops{
  width:100%; height:100%; overflow:visible; pointer-events:none;
}
.bookart__drops circle{ opacity:.85 }
.bookart__drops circle.sm{ opacity:.55 }
.bookart__drops .arc{ fill:none; stroke-width:1.4; opacity:.45 }
.bookart__drops .d1{ fill:var(--c1); stroke:var(--c1) }
.bookart__drops .d2{ fill:var(--c2); stroke:var(--c2) }
.bookart__drops .d3{ fill:var(--c3); stroke:var(--c3) }
.bookart__drops .d4{ fill:var(--c4); stroke:var(--c4) }
.bookart__drops .d5{ fill:var(--c5); stroke:var(--c5) }
.bookart__drops .d6{ fill:var(--c6); stroke:var(--c6) }
.bookart__ring{
  width:86%; height:86%; border-radius:50%;
  border:1px solid var(--line); pointer-events:none;
}
.bookart figcaption{
  align-self:end; justify-self:center; position:relative; z-index:4;
  font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-align:center;
}

/* ── BIO: A FOTO ACOMPANHA A ALTURA DO TEXTO ───────────────────────
   O `.prof__img` do sistema e fixo em 4/5. Nesta pagina a coluna de texto e
   longa (bio + citacao grande + fecho + botao) e a foto terminava ~240px
   antes, deixando um bloco de preto vazio embaixo dela — um dos "espacos
   pretos sobrando" que o cliente apontou. Aqui a foto passa a esticar na
   altura da linha da grade. Efeito colateral bem-vindo: o recorte mais
   estreito corta a parede clara da esquerda, que era a maior mancha clara
   da pagina, e centra a Lari. */
@media (min-width:981px){
  #lari.grid-2, #lari .grid-2{ align-items:stretch }
  #lari .prof__img{ aspect-ratio:auto; height:100%; min-height:520px }
  #lari .prof__img img{ height:100%; object-position:62% 50% }
}

/* ── LISTA DE VANTAGENS: 3 ITENS, NAO 4 ────────────────────────────
   O `.offer__list` do sistema e uma grade de 2 colunas, pensada para um
   numero par de vantagens. Aqui sao 3 (as do original, nao inventamos uma
   quarta), e a celula que sobrava deixava um buraco no canto inferior
   direito da caixa de oferta. O terceiro item passa a ocupar a linha
   inteira: fecha a grade e vira o argumento de fechamento, que e o mais
   forte dos tres ("e requisito para pintar bem"). */
.offer__list li:last-child{ grid-column:1 / -1 }
@media (min-width:981px){
  /* o item que ocupa a linha toda ficaria com 600px de medida: recuado nas
     duas pontas ele mantem a mesma largura de leitura das duas colunas */
  .offer__list li:last-child{ padding-right:clamp(0px,14vw,220px) }
}

/* ── SELO DE CONFIANCA (texto, substitui o badge generico do Hotmart) ─
   O original tinha um icone minusculo "compra segura / satisfacao
   garantida / privacidade protegida" (462x38, generico, pixelizado).
   Preservamos o significado como texto real em vez de imagem. */
.trust{
  margin-top:20px; font-size:11.5px; letter-spacing:.05em; color:var(--muted);
  text-align:center;
}

/* ═══════════════════════════════════════════════════════════════════
   PASSO A PASSO COM TRILHA QUE SE DESENHA NO SCROLL
   Substituiu `preview-conteudo-dispositivos.webp` — mockup de notebook,
   tablet e celular sobre um RETANGULO BRANCO gigante no meio do fundo
   preto, o pior bloco da pagina.

   Geometria: a grade tem 4 colunas iguais e `gap:0` de proposito. Assim os
   centros das colunas caem exatamente em 12,5% / 37,5% / 62,5% / 87,5% da
   largura — que no viewBox de 1200 sao x=150/450/750/1050, os mesmos pontos
   onde a curva do <path> passa por y=32. O respiro entre etapas vem do
   padding interno de cada .step, nao do gap: com gap a conta quebraria e a
   bolinha do numero sairia de cima da linha.
   ═══════════════════════════════════════════════════════════════════ */
/* colada em #pontos-fortes de proposito: "o que voce vai dominar" e "e
   assim que voce vai aplicar" sao o mesmo movimento. Sem isso sobrava um
   vazio preto de ~150px entre as duas. */
#pontos-fortes{ padding-bottom:clamp(48px,6vw,86px) }
.pratica{ padding-top:clamp(48px,6vw,86px) }
.pratica .section__head{ margin-bottom:clamp(30px,3.6vw,52px) }

.steps-path{ position:relative }
.trail{ position:absolute; pointer-events:none; z-index:0; overflow:visible }
.trail__line{ stroke-width:1.4; stroke-linecap:round }
/* pontas em fade: a trilha entra e sai de cena em vez de bater na borda */
.trail--h{
  top:0; left:0; width:100%; height:64px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
}
.trail--v{ display:none }

.steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.step{ position:relative; text-align:center; padding:0 clamp(10px,1.6vw,24px) }

/* o box-shadow em anel abre um buraco na cor do fundo: a linha passa por
   tras da bolinha sem cruzar o numero */
.step__node{
  position:relative; z-index:2; display:grid; place-items:center;
  width:58px; height:58px; margin:3px auto 0; border-radius:50%;
  background:var(--ink); border:1px solid var(--line);
  box-shadow:0 0 0 7px var(--ink);
}
.step__node b{
  font-family:var(--display); font-weight:400; font-size:21px; line-height:1;
  letter-spacing:.02em; color:var(--gold-lt);
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}

/* ── FICHAS DE COR DE CADA ETAPA ───────────────────────────────────
   Cada etapa carrega, em CSS puro, o desenho do que ela ensina: a roda,
   a paleta organizada, a mistura virando tom de pele, o par harmonico.
   E aqui que a cor pode aparecer — e conteudo, nao interface. */
.step__chip{
  display:block; width:54px; height:54px;
  margin:clamp(22px,2.6vw,32px) auto clamp(15px,1.8vw,21px);
  border-radius:2px;
}
.chip--roda{
  border-radius:50%;
  background:conic-gradient(from -90deg,
    var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6), var(--c1));
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 33%, #000 34%);
          mask:radial-gradient(circle at 50% 50%, transparent 33%, #000 34%);
}
.chip--paleta{
  height:44px; margin-block:clamp(27px,3.1vw,37px) clamp(20px,2.3vw,26px);
  background:
    linear-gradient(90deg,
      var(--c1) 0 18%, transparent 18% 20%,
      var(--c3) 20% 38%, transparent 38% 40%,
      var(--c4) 40% 58%, transparent 58% 60%,
      var(--c5) 60% 78%, transparent 78% 80%,
      var(--c6) 80% 98%, transparent 98%);
}
/* blob irregular: vermelho puro atravessando o branco e parando no tom de
   pele — o "fabricar tom de pele" da etapa 03 */
.chip--mistura{
  border-radius:52% 48% 44% 56%/46% 54% 46% 54%;
  background:linear-gradient(118deg,
    var(--c1) 0%, #C9564B 24%, #D98C6E 48%, #E6B69A 70%, #F2DCCB 100%);
}
/* dois complementares que se tocam: o par harmonico da etapa 04 */
.chip--harmonia{
  background:
    radial-gradient(circle at 33% 50%, var(--c5) 0 25%, transparent 26%),
    radial-gradient(circle at 67% 50%, var(--c2) 0 25%, transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(233,193,58,.55) 0 12%, transparent 13%);
}

.step h4{
  font-family:var(--display); font-weight:400; font-size:clamp(20px,2vw,26px);
  line-height:1.18; color:var(--paper);
}
.step p{
  margin-top:11px; font-size:13.5px; line-height:1.62; color:var(--paper-dim);
}

.cta-center{ margin-top:clamp(44px,5.4vw,72px); text-align:center }

/* ═══ RESPONSIVO ═══════════════════════════════════════════════ */
@media (max-width:980px){
  .feat-row{ grid-template-columns:repeat(2,1fr) }
  .bookart{ max-width:400px }

  /* a trilha vira vertical numa calha a esquerda. Reta, e nao ondulada,
     porque as etapas tem alturas diferentes no mobile: numa curva a
     bolinha do numero sairia de cima da linha. O fade no fim faz a linha
     morrer depois do ultimo numero em vez de bater no rodape do bloco. */
  .trail--h{ display:none }
  .trail--v{
    display:block; top:0; left:0; width:64px; height:100%;
    -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent);
            mask-image:linear-gradient(180deg,#000 84%,transparent);
  }
  .steps{ grid-template-columns:1fr }
  .step{
    display:grid; grid-template-columns:64px 1fr;
    column-gap:clamp(16px,3vw,24px); text-align:left;
    padding:0 0 clamp(32px,5vw,44px);
  }
  .step:last-child{ padding-bottom:0 }
  .step__node{ grid-row:1 / span 3; align-self:start; margin:0 auto }
  .step__chip{ grid-column:2; width:48px; height:48px; margin:2px 0 14px }
  .chip--paleta{ height:40px; margin:6px 0 16px }
  .step h4{ grid-column:2 }
  .step p{ grid-column:2; font-size:14px }
}
@media (max-width:620px){
  .hero__media img{ filter:saturate(.9) contrast(1.06) brightness(.64) }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.9) 0%, rgba(4,4,4,.62) 18%, rgba(4,4,4,.8) 54%,
      rgba(4,4,4,.96) 88%, var(--ink) 100%);
  }
  .feat-row{ grid-template-columns:1fr }
  .bookart{ max-width:300px }
  /* a bolinha tem de caber DENTRO da calha, senao vaza pros lados da grade */
  .step{ grid-template-columns:52px 1fr }
  .trail--v{ width:52px }
  .step__node{ width:48px; height:48px; box-shadow:0 0 0 6px var(--ink) }
  .step__node b{ font-size:18px }
}