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

/* ── HERO: foto full-bleed + veu (o padrao .hero__media/.hero__scrim) ──
   Foto v2, gerada no Higgsfield com o Soul da Lari. A v1 foi reprovada pelo
   cliente ("nao e ela, o nariz esta estranho, o olhar esta vazio"): a Lari
   estava de tres-quartos afastada, e nessa pose o Soul perde a semelhanca e
   o olho morre. A correcao e a mesma que funcionou no acrilica-express —
   rosto FRONTAL, corpo girado ~30 graus, contato visual, sorriso e luz de
   preenchimento quente no rosto (nao so contraluz).
   A moldura nasceu 16:9 com a Lari perto do centro; o arquivo instalado tem
   256px de borda estendida a esquerda (2304x1152 = 2:1) para (a) sobrar
   folga de recorte horizontal, que um 16:9 num hero de 1.8 nao tem, e
   (b) empurrar o rosto para fora da coluna de texto. A emenda da extensao
   fica sob a faixa de 95% de preto do veu, invisivel. */
.hero__media img{
  object-position:32% 44%;
  filter:saturate(1.02) contrast(1.05) brightness(1.09);
}
/* o veu padrao fecha em 78%, o que apagaria a tela abstrata inteira. Aqui ele
   morre em 56% — logo depois da coluna de texto — e o gradiente vertical
   segura o topo (nav) e a base (emenda com a secao seguinte). */
.hero__scrim{
  background:
    linear-gradient(94deg,
      rgba(4,4,4,.96) 0%, rgba(4,4,4,.92) 24%, rgba(4,4,4,.62) 34%,
      rgba(4,4,4,.2) 43%, rgba(4,4,4,0) 52%),
    linear-gradient(180deg,
      rgba(4,4,4,.78) 0%, rgba(4,4,4,.1) 20%, rgba(4,4,4,.14) 52%,
      rgba(4,4,4,.84) 88%, var(--ink) 100%);
}
/* Teto de 58px (o sistema vai a 72px) e coluna de texto mais estreita: em 72px
   a frase "seus próprios quadros" quebrava DENTRO da mascara da linha, e a
   cascata de entrada perdia o sentido — cada `.line` tem que ser uma linha. */
.hero__title{ font-size:clamp(34px,4vw,58px) }
/* a coluna direita fica vazia de proposito: e por ela que a foto respira */
.hero__grid{ grid-template-columns:minmax(0,.62fr) 1fr }

/* ── O SELO DO E-BOOK (capa + dados) ────────────────────────────────
   Estava embaixo do botao, na coluna de texto, e o cliente reprovou ali
   ("nao ta legal ali, da pra colocar no canto direito inferior, para ele
   complementar a imagem"). Agora e um selo ancorado no canto inferior
   direito do hero, sobre a foto — ver o bloco @media (min-width:981px)
   mais abaixo. Ate 980px nao cabe: volta pro fluxo, depois do botao.
   O default aqui e o estado MOBILE, de proposito: fica na ordem natural
   da cascata e nao precisa desfazer o absolute em media query. */
/* position+z-index sao obrigatorios mesmo no estado em fluxo: `.hero__media`
   e posicionado com z-index:0, e no algoritmo de pintura um elemento
   posicionado com z-index:0 vem DEPOIS dos blocos em fluxo nao posicionados.
   Sem isto o veu cobria o balao de texto — e so a mini-capa aparecia, porque
   o `rotate` dela cria contexto de empilhamento proprio e a salvava. */
.hero__seal{ position:relative; z-index:2; margin-top:26px }
.hero__proof{
  display:flex; align-items:center; gap:18px;
}
/* duas linhas: nome do produto em ouro, dados em cinza. Em uma linha unica
   a frase inteira nao caberia dentro do selo no desktop. */
.hero__coupon b{ font-size:14px }
.hero__coupon span{ line-height:1.5 }
/* a rotacao vive no span, nao na <img>: o GSAP escreve `transform` no
   elemento que tem .reveal e apagaria o rotate se fosse na propria imagem */
.hero__mini{ display:block; flex:0 0 auto }
.hero__mini img{
  display:block; width:clamp(88px,9.4vw,120px); border-radius:4px;
  transform:rotate(-3deg);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.9), 0 0 0 1px var(--line);
  transition:transform .6s var(--ease);
}
.hero__mini:hover img{ transform:rotate(-1deg) translateY(-4px) }
/* min-width:0 para o balao de prova poder encolher ao lado da capa em vez de
   empurrar a linha inteira para baixo */
.hero__proof .hero__coupon{ margin-top:0; flex:1 1 auto; min-width:0 }

/* ── SELO ANCORADO NO CANTO INFERIOR DIREITO (>= 981px) ─────────────
   `.hero__seal` e `.wrap`: herda a mesma medida e a mesma sarjeta da
   `.hero__grid`, entao o selo encosta exatamente na coluna do site em
   qualquer largura, sem numero magico de `right`. O `margin-left:auto`
   joga o bloco pro fim dessa medida. */
@media (min-width:981px){
  .hero__seal{
    position:absolute; z-index:3; left:0; right:0;
    bottom:clamp(28px,3.4vw,50px);
    pointer-events:none;           /* nao rouba o clique da area vazia */
  }
  .hero__proof{
    margin:0 0 0 auto; width:max-content; max-width:min(392px,38vw);
    pointer-events:auto;
    gap:15px; padding:14px 18px 14px 15px; border-radius:4px;
    /* vidro escuro + filete dourado: a foto embaixo dele e a parte clara e
       colorida da tela, entao o selo precisa do proprio fundo pra ler */
    border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(8,7,5,.6), rgba(8,7,5,.76));
    backdrop-filter:blur(16px) saturate(1.08);
    -webkit-backdrop-filter:blur(16px) saturate(1.08);
    box-shadow:0 34px 74px -34px rgba(0,0,0,.96),
               inset 0 1px 0 rgba(244,241,234,.055);
  }
  /* dentro do selo o balao perde a moldura tracejada: duas bordas
     concentricas a 3px uma da outra ficam sujas */
  .hero__seal .hero__coupon{
    display:block; margin:0; padding:0; border:0; background:none;
    flex:1 1 auto; min-width:0;
  }
  .hero__seal .hero__coupon b{ display:block; font-size:13.5px }
  .hero__seal .hero__coupon span{ display:block; margin-top:5px; font-size:11.8px }
  .hero__seal .hero__mini img{
    width:clamp(70px,6.2vw,84px); transform:rotate(-2.5deg);
    box-shadow:0 16px 34px -16px rgba(0,0,0,.95), 0 0 0 1px var(--line);
  }
  .hero__seal .hero__mini:hover img{ transform:rotate(-1deg) translateY(-3px) }
}

/* ── BLOCO 2: a foto dos materiais como FAIXA DE FUNDO ──────────────
   O cliente aprovou a imagem ("os materiais estao incriveis") e reprovou o
   FORMATO: era um quadrado (aspect-ratio:1) na coluna da direita. Pedido:
   "queria ela meio que estendida, tambem usando overlay pra nao atrapalhar
   na descricao, igual voce fez na Hero". Entao a secao virou uma faixa
   widescreen: foto sangrando de ponta a ponta + veu + texto por cima.
   A legenda "O MATERIAL DA PINTURA ABSTRATA" saiu: em cima da foto ela
   competia com o H2, e o texto ao lado ja diz o que a imagem mostra. */
#ebook .h2{ font-size:clamp(30px,3.7vw,48px) }

/* seção com respiro menor — usada logo apos o hero */
.section--tight{ padding-block:clamp(48px,6vw,84px) }

.ebook__stage{
  position:relative; overflow:hidden;
  min-height:clamp(360px,33vw,464px);
  display:flex; align-items:center;
  background:var(--ink-3);
}
/* mesma folga do .hero__media: a imagem nasce maior que a moldura em cima e
   embaixo, e e essa sobra que o parallax consome sem descobrir a borda */
.ebook__bg{ position:absolute; inset:-8% 0; z-index:0 }
.ebook__bg img{
  width:100%; height:100%; object-fit:cover;
  /* a fonte e retrato 4/3 (1536x1152): a faixa widescreen mostra ~550 linhas
     dela, e 40% e o recorte que pega os tres grupos de uma vez — os tubos de
     tinta em cima, o pincel largo e a espatula no meio, a paleta a direita.
     Em 64% a paleta enchia a faixa sozinha e virava macro, nao "materiais". */
  object-position:54% 40%;
  filter:saturate(.98) contrast(1.06) brightness(1.02);
}
/* o veu: horizontal para a coluna de texto a esquerda respirar preta, e
   vertical para emendar com o preto da secao em cima e embaixo */
.ebook__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(96deg,
      rgba(4,4,4,.96) 0%, rgba(4,4,4,.93) 28%, rgba(4,4,4,.68) 44%,
      rgba(4,4,4,.24) 60%, rgba(4,4,4,0) 76%),
    linear-gradient(180deg,
      rgba(4,4,4,.72) 0%, rgba(4,4,4,.14) 24%, rgba(4,4,4,.16) 70%,
      rgba(4,4,4,.7) 100%);
}
.ebook__copy{
  position:relative; z-index:2;
  padding-block:clamp(44px,5vw,62px);
}
/* 44ch: a medida que mantem o texto dentro da faixa escura do veu */
.ebook__copy > *{ max-width:44ch }

/* ── FAIXA DE DESTAQUES (4 icones) ─────────────────────────────────
   O `.cards-2` no HTML e so o gancho do stagger do motion.js — a grade
   verdadeira sao as 4 colunas abaixo, que sobrescrevem o base.css. */
.badges{
  margin-top:clamp(48px,6vw,84px); padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px);
  text-align:center;
}
.badge{ display:flex; flex-direction:column; align-items:center; gap:16px }
.badge__ico{
  width:64px; height:64px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-dk);
  background:radial-gradient(circle at 50% 40%, rgba(201,168,76,.14), transparent 68%);
  transition:border-color .5s var(--ease), transform .6s var(--ease);
}
.badge:hover .badge__ico{ border-color:var(--gold); transform:translateY(-4px) }
.badge__ico img{
  width:30px; height:30px; object-fit:contain;
  filter:invert(1) brightness(1.5) sepia(.4) saturate(2) hue-rotate(-10deg);
}
.badge span:last-child{
  font-size:12.5px; letter-spacing:.03em; color:var(--paper-dim); max-width:19ch; line-height:1.4;
}

/* ── OFERTA: diagramacao ───────────────────────────────────────────
   Problema que o cliente viu ("espremida", "espacos pretos"): a lista de
   3 itens rodava em 2 colunas, entao o terceiro ficava orfao e abria um
   buraco preto a direita; e o ritmo vertical era todo igual. Agora: lista
   em coluna unica centrada no bloco, e respiro crescente entre lista →
   preco → botao → selos. */
#oferta .offer__box{ max-width:720px; padding-block:clamp(38px,4.6vw,58px) }
#oferta .offer__list{
  grid-template-columns:1fr; gap:15px;
  max-width:50ch; margin:clamp(28px,3.2vw,38px) auto 0;
}
#oferta .price{ margin-top:clamp(30px,3.6vw,42px); padding:clamp(26px,3vw,32px) 0 0 }
#oferta .btn--lg{ margin-top:clamp(26px,3vw,34px) }

/* ── PREÇO: centavos menores, encostados no valor inteiro ────────────
   Sem `align-self:flex-start`: jogado pro topo da caixa, o ",00" virava
   sobrescrito solto acima do "19". Na baseline ele lê como parte do valor. */
.price__cents{
  font-family:var(--display); font-weight:400; color:var(--paper-dim);
  font-size:clamp(22px,2.8vw,34px); line-height:1; margin-left:-4px;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}

/* selos de confianca: a <figure> nasce com margem do navegador e ficava
   fora do eixo central da caixa */
.pay{ margin:clamp(28px,3.2vw,36px) 0 0; display:flex; justify-content:center }
.pay img{ display:block; width:min(462px,100%) }

/* ── FRASE-CREDO (era um .subhead solto entre dois vazios enormes) ───
   Vira um momento da pagina: filete dourado acima e abaixo, losango de
   marca e a frase em display italico. O respiro vertical caiu de ~150px
   de secao + 80px de margem para o padding do proprio bloco. */
.credo{
  padding-block:clamp(40px,5vw,72px);
  background:
    radial-gradient(680px 300px at 50% 50%, rgba(201,168,76,.09), transparent 68%),
    var(--ink);
}
.credo__box{
  max-width:820px; margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:clamp(20px,2.4vw,28px);
}
.credo__mark{
  width:100%; max-width:320px; height:1px; position:relative;
  background:linear-gradient(90deg, transparent, var(--gold-dk) 50%, transparent);
}
.credo__mark::after{
  content:''; position:absolute; left:50%; top:50%; width:6px; height:6px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold); box-shadow:0 0 18px rgba(201,168,76,.5);
}
.credo__box blockquote{
  font-family:var(--display); font-weight:300; font-size:clamp(24px,2.9vw,40px);
  line-height:1.28; letter-spacing:-.01em; color:var(--paper); max-width:30ch;
}
.credo__box blockquote em{ font-style:italic; color:var(--gold-lt) }

/* ── BIO DA LARI: texto dentro do quadrante da foto ─────────────────
   O `.grid-2` centraliza as colunas verticalmente, e a coluna de texto e
   muito mais alta que a foto 4/5 — resultado: dois vazios enormes, acima e
   abaixo da imagem. Correcao: as colunas alinham pelo topo e a citacao
   desce para a coluna da foto, que assim fecha na mesma altura do texto. */
#lari .grid-2{ align-items:start }
#lari .prof__side{ display:flex; flex-direction:column }
#lari .prof__img{ aspect-ratio:4/5 }
/* o base.css ancora a foto no topo (height:114%), o que abre uma fresta em
   cima quando o parallax empurra a imagem para baixo. Centrando a sobra em
   -7% ela cobre a moldura nos dois extremos do movimento. */
#lari .prof__img img{ position:absolute; top:-7%; left:0; height:114% }
#lari .prof__side .quote{
  margin-top:clamp(24px,2.6vw,34px); padding-block:0; padding-right:0;
  font-size:clamp(18px,1.75vw,23px);
}
/* o botao encosta na base da coluna, alinhado com o fim da citacao ao lado */
#lari .col > .btn--ghost{ margin-top:clamp(28px,3vw,38px) }

/* ── SELO DE GARANTIA (CSS/SVG, sem imagem) ─────────────────────────
   Substitui o PNG "BEST QUALITY" — clipart de banco de imagem, em ingles.
   Anel duplo + texto curvo na tipografia da marca; o "7" continua sendo o
   glifo old-style do Cormorant, centralizado opticamente pelo motion.js
   (por isso o bloco mantem a classe .guarantee__seal). */
.seal{
  position:relative; width:clamp(196px,23vw,236px); height:auto; aspect-ratio:1;
  margin:0 auto; border:0;
  background:
    radial-gradient(circle at 50% 38%, rgba(201,168,76,.16), transparent 64%),
    radial-gradient(circle at 50% 52%, rgba(5,5,5,.92), rgba(5,5,5,0) 74%);
  box-shadow:none;
}
.seal__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.seal__ring{ fill:none }
.seal__ring--out{ stroke:var(--gold-dk); stroke-width:1 }
.seal__ring--mid{ stroke:rgba(201,168,76,.5); stroke-width:1 }
.seal__ring--hair{ stroke:rgba(201,168,76,.18); stroke-width:.7 }
.seal__arc{
  font-family:var(--body); font-size:10px; font-weight:600; letter-spacing:2.3px;
  fill:var(--gold); text-anchor:middle;
}
.seal__arc--bot{ font-size:8.6px; letter-spacing:1.9px; fill:var(--gold-dk) }
.seal__dot{ fill:var(--gold) }
.seal .seal__in{ font-size:clamp(50px,6.2vw,66px) }
.seal .seal__in i{ font-size:11px; letter-spacing:.24em; margin-top:9px }

/* a caixa da garantia: selo centralizado, texto centralizado embaixo, CTA.
   Sem o filete/flex do .guarantee padrao, que aqui deixava o texto
   desalinhado do eixo do selo. */
.offer__box--sm{ max-width:660px }
.guarantee--solo{
  margin-top:clamp(26px,3vw,34px); padding-top:0; border-top:0;
  display:block; text-align:center;
}
.guarantee--solo p{ max-width:52ch; margin-inline:auto; font-size:15px }
#garantia .offer__box .btn{ margin-top:clamp(28px,3.2vw,36px) }

/* ── CARDS "O CAMINHO": so numero + titulo, sem corpo de texto ──────── */
.card h3 em{ font-style:italic; color:var(--gold-lt) }
#caminho .card{ text-align:left }

/* ═══ RESPONSIVO ═══════════════════════════════════════════════════ */
@media (max-width:980px){
  /* sem coluna livre para a foto: o recorte volta a centrar na Lari e o veu
     vertical do base.css assume — por isso o brilho cai bem mais aqui */
  /* o reset de 1 coluna do base.css mora numa media query, e media query nao
     soma especificidade: como o site.css carrega depois, a regra de 2 colunas
     acima vencia tambem no mobile e a coluna de texto ficava com 170px.
     Precisa repetir o reset aqui. */
  /* padding-bottom:0 porque a sarjeta de baixo do hero migra pro selo */
  .hero__grid{ grid-template-columns:1fr; padding-bottom:0 }
  /* 47% centra o recorte no rosto dela dentro do arquivo 2:1 (o 50% cairia
     na tela pintada, nao nela) */
  .hero__media img{ object-position:47% 34%; filter:saturate(.92) contrast(1.04) brightness(.84) }
  /* o veu fecha mais no meio do quadro porque em coluna unica o paragrafo
     cai justamente em cima do rosto dela, que e a parte iluminada da foto */
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.9) 0%, rgba(4,4,4,.62) 24%, rgba(4,4,4,.72) 46%,
      rgba(4,4,4,.72) 62%, rgba(4,4,4,.94) 88%, var(--ink) 100%);
  }
  /* o selo do e-book volta pro fluxo, depois do botao */
  .hero__seal{ margin-top:30px; padding-bottom:clamp(40px,5vw,66px) }

  .badges{ grid-template-columns:repeat(2,1fr) }

  /* FAIXA DOS MATERIAIS: em coluna estreita o veu horizontal nao serve mais
     (o texto ocupa a largura toda), entao ele vira vertical e a foto escurece
     bem mais — e a mesma troca que o hero faz aqui. */
  .ebook__stage{ min-height:clamp(400px,52vw,520px) }
  .ebook__bg img{ object-position:56% 60%; filter:saturate(.94) contrast(1.05) brightness(.7) }
  .ebook__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.9) 0%, rgba(4,4,4,.74) 26%, rgba(4,4,4,.72) 58%,
      rgba(4,4,4,.9) 100%);
  }
  /* volta a medida do sistema: em `none` o lead atravessava a faixa e as
     ultimas palavras caiam em cima da paleta clara */
  .ebook__copy > *{ max-width:56ch }

  /* em coluna unica a citacao vinha ANTES do nome da Lari (ela mora na coluna
     da foto). `display:contents` solta a figura e a citacao como itens da
     propria grade, e o `order` manda a citacao para depois da bio.
     Continua GRADE de proposito: como item de um flex em coluna, a figura
     perde a altura (o `aspect-ratio` nao resolve, porque a imagem dentro dela
     e absoluta e a largura so fica definida depois do stretch) e a foto
     simplesmente desaparece. */
  #lari .grid-2{ grid-template-columns:1fr }
  #lari .prof__side{ display:contents }
  #lari .prof__img{ order:1; aspect-ratio:3/4; max-height:70vh }
  #lari .col:not(.prof__side){ order:2 }
  #lari .prof__side .quote{ order:3; margin-top:0 }
}
@media (max-width:620px){
  .badges{ grid-template-columns:1fr; gap:22px }
  .badge{ flex-direction:row; text-align:left; gap:14px }
  .badge span:last-child{ max-width:none }
  /* o base.css joga o .hero__coupon para width:100% no mobile: a capa sobe
     para a linha de cima, centralizada com o resto da coluna */
  .hero__proof{ flex-wrap:wrap; justify-content:center; gap:16px }
  .hero__mini img{ width:104px }
  /* na coluna de 500px a foto de fundo precisa escurecer ainda mais pro
     lead de 4 linhas sobreviver em cima dela */
  .ebook__bg img{ filter:saturate(.92) contrast(1.05) brightness(.66) }
  .ebook__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.92) 0%, rgba(4,4,4,.8) 26%, rgba(4,4,4,.78) 58%,
      rgba(4,4,4,.9) 100%);
  }
  .credo__box blockquote{ max-width:100% }
  .seal{ width:min(200px,64vw) }
}