/* ═══════════════════════════════════════════════════════════════════
   OS SEGREDOS DA PINTURA A ÓLEO — especifico deste site
   Carrega depois de base.css. So o que nao existe no sistema.
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO: enquadramento desta foto ────────────────────────────────
   A foto do hero e o retrato a oleo no cavalete: 1200x1955, VERTICAL.
   Em `cover` numa faixa larga (1440x1000) a largura e que manda — ou seja
   a imagem inteira aparece na horizontal e nao ha object-position-x pra
   negociar: o rosto cai fixo entre 35% e 70% da largura da foto. Se a
   foto fosse full-bleed, o texto da metade esquerda cairia exatamente
   sobre o rosto.
   Solucao: no desktop a midia deixa de ser full-bleed e vira PAINEL
   ANCORADO A DIREITA (62% da largura). O rosto vai pra 60–81% da
   viewport — a coluna livre — e a esquerda fica com o preto do `.hero`.
   Bonus: 1200px em 893px de painel e reducao, nao ampliacao. */
@media (min-width:981px){
  .hero__media{ left:38% }
  .hero__media img{
    object-position:50% 30%;
    filter:saturate(.94) contrast(1.05) brightness(1.06);
  }
  /* o veu vive dentro de `.hero__media`, entao ele agora cobre so o painel:
     0% = borda esquerda do painel (tem que casar com o preto do hero, sem
     emenda visivel), e tem que abrir ANTES de 35% pra nao sujar o rosto.
     O terco esquerdo da propria pintura e fundo escuro — a transicao cai
     sobre pixel ja escuro e some. */
  .hero__scrim{
    background:
      /* 90deg, nao inclinado, e com uma faixa CHAPADA de `--ink` nos
         primeiros 9%: a borda esquerda do painel corta justo na lateral
         clara da tela (o unico pixel branco da foto) e qualquer alpha
         abaixo de 1 ali virava um filete vertical visivel. */
      linear-gradient(90deg,
        #050505 0%, #050505 9%, rgba(5,5,5,.9) 16%, rgba(5,5,5,.52) 24%,
        rgba(5,5,5,.16) 32%, rgba(5,5,5,0) 41%),
      linear-gradient(180deg,
        rgba(4,4,4,.72) 0%, rgba(4,4,4,.08) 22%, rgba(4,4,4,.1) 50%,
        rgba(4,4,4,.6) 74%, rgba(5,5,5,.93) 88%, var(--ink) 100%);
  }
}
@media (max-width:980px){
  /* Volta a ser full-bleed — nao ha coluna livre. Sem espaco pra fugir do
     texto, o enquadramento escolhe QUAL parte do quadro fica atras dele:
     `y:92%` sobe a pintura, entao os olhos ficam na faixa limpa do alto e o
     titulo cai sobre o queixo e a blusa preta, que e a area mais escura da
     obra — contraste vem do proprio quadro, nao de mais veu.
     O `brightness(.72)` do sistema afundava esta foto (que ja nasce escura)
     ate virar chapado; .95 devolve a pintura e o veu abaixo segura o texto. */
  .hero__media img{
    object-position:50% 92%;
    filter:saturate(.9) contrast(1.04) brightness(.95);
  }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.62) 0%, rgba(4,4,4,.34) 14%, rgba(4,4,4,.72) 30%,
      rgba(4,4,4,.84) 56%, rgba(4,4,4,.9) 80%, var(--ink) 100%);
  }
}
@media (max-width:620px){
  /* aqui a altura passa a mandar no `cover` e sobra folga LATERAL:
     quem enquadra e o x, e o y vira inofensivo. Centraliza no rosto.
     Nesta largura o quadro inteiro cabe na altura: nao ha faixa limpa
     sobrando acima do texto, entao a pintura e atmosfera e o veu e denso.
     Um ponto extra de brilho e contraste evita que ela vire chapado preto. */
  .hero__media img{
    object-position:44% 74%;
    filter:saturate(.94) contrast(1.07) brightness(1.08);
  }
}

/* ── HERO: titulo ──────────────────────────────────────────────────
   A frase do original e longa (3 linhas de ~22 caracteres). No teto de
   72px do sistema cada linha quebrava em duas dentro da mascara e a
   cascata perdia o sentido. Teto menor = uma linha por mascara, e a
   coluna de texto ganha um pouco mais de largura pra acompanhar. */
.hero__grid{ grid-template-columns:minmax(0,.92fr) 1fr }
.hero__title{ font-size:clamp(33px,3.9vw,54px) }
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr }
}

/* stat sem numero: "Imediato"/"Atualizado" no lugar do numeral.
   O display em 46px estouraria a celula — cai pro tamanho de palavra. */
.stat--txt b{
  font-size:clamp(21px,2.1vw,27px); letter-spacing:-.01em;
  /* alinha a linha de base com os numerais dos stats vizinhos */
  padding-block:clamp(4px,.7vw,10px);
}

/* ── FIGURA DO PROCESSO (croqui a carvao + foto de referencia) ─────
   Esta e a imagem que ilustra o texto ao lado ("do croqui inicial... ate
   a finalizacao"): a foto de referencia impressa a esquerda e a tela com
   o croqui a carvao a direita — o processo, na ordem em que acontece.
   Original 1999x1924 (quase quadrado), reduzido pra 1200px de largura:
   na coluna de ~525px sobra resolucao de sobra e nunca estica.
   O quadro e 1/1 e nao 4/5 justamente porque a imagem e quadrada — em
   4/5 perderia um terco da largura e cortaria a foto de referencia,
   que e metade do argumento. */
.shot-tall{
  position:relative; overflow:hidden; border-radius:3px;
  aspect-ratio:1/1; background:var(--ink-3);
  box-shadow:0 34px 90px -46px rgba(0,0,0,.9);
}
.shot-tall img{
  width:100%; height:112%; object-fit:cover; object-position:52% 46%;
  filter:saturate(.9) contrast(1.05) brightness(.95);
}
.shot-tall::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line), inset 0 -120px 120px -80px rgba(201,168,76,.18);
}

/* ── VITRINE DENTRO DA CAIXA DE OFERTA ─────────────────────────────
   Capa 720x1040. Fica pequena de proposito: e selo do produto, nao
   heroi — e assim nao passa da resolucao nativa em nenhuma largura. */
.offer__vitrine{
  margin:34px auto 0; max-width:250px;
  border-radius:3px; overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95), inset 0 0 0 1px var(--line);
}
.offer__vitrine img{ width:100%; display:block; filter:saturate(.92) contrast(1.03) }
.offer__list{ margin-top:34px }

/* ── FORMAS DE PAGAMENTO ───────────────────────────────────────────
   O PNG e 462x38: cabe folgado em 300px, nunca esticado. */
.pay{ margin-top:26px }
.pay img{
  max-width:300px; margin-inline:auto; opacity:.65;
  filter:grayscale(1) brightness(1.7);
  transition:opacity .5s var(--ease), filter .5s var(--ease);
}
.pay:hover img{ opacity:.9; filter:grayscale(.3) brightness(1.4) }

/* ── BÔNUS ─────────────────────────────────────────────────────────
   3 capas: duas 1:1 (1400 e 1080) e o certificado 1414x2000. Grade
   quadrada = as duas primeiras entram sem recorte nenhum; o
   certificado recebe object-position propria pra nao cortar o titulo. */
.bonuses{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,26px);
}
.bonus{
  position:relative; overflow:hidden; border-radius:3px;
  border:1px solid var(--line-soft);
  background:linear-gradient(170deg, rgba(201,168,76,.05), rgba(255,255,255,0) 58%);
  transition:border-color .5s var(--ease), transform .6s var(--ease);
}
.bonus:hover{ border-color:var(--line); transform:translateY(-6px) }
/* capas de origens diferentes: dessaturar unifica a grade com o
   preto/ouro; o hover devolve a cor cheia */
.bonus img{
  width:100%; aspect-ratio:1; object-fit:cover;
  filter:saturate(.72) contrast(1.05) brightness(.9);
  transition:transform 1.1s var(--ease), filter .8s var(--ease);
}
.bonus:hover img{ transform:scale(1.04); filter:saturate(1) contrast(1.02) brightness(1) }
/* 1414x2000 recortado em quadrado: centralizado cortaria a primeira
   linha do titulo, entao ancoramos mais alto */
.bonus__img--cert{ object-position:50% 16% }
.bonus figcaption{
  padding:clamp(18px,1.8vw,26px);
  border-top:1px solid var(--line-soft);
}
.bonus__tag{
  display:block; margin-bottom:10px;
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
}
.bonus h3{
  font-family:var(--display); font-weight:400; font-size:clamp(19px,1.9vw,25px);
  line-height:1.18; color:var(--paper);
}

/* ── GALERIA DE AULAS ──────────────────────────────────────────────
   O terceiro quadro e um frame do player, com a barra de progresso e os
   botoes no rodape. A celula da galeria nao sobra altura pra recortar,
   entao a imagem cresce 18% e o excesso (a barra) sai por baixo. */
.gal--video img{ height:118%; object-position:50% 0% }

/* ── PRINTS DA PLATAFORMA ──────────────────────────────────────────
   1360x714 e 1863x804. Em 2 colunas de ~560px ficam bem abaixo da
   resolucao nativa — nitidez garantida. */
.platform{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,22px) }
.platform__shot{
  border-radius:3px; overflow:hidden;
  box-shadow:0 28px 70px -40px rgba(0,0,0,.9), inset 0 0 0 1px var(--line-soft);
}
.platform__shot img{ width:100%; display:block; filter:saturate(.9) contrast(1.02) }

/* ── PRINTS DOS DEPOIMENTOS ────────────────────────────────────────
   Sao 6 prints de tela, todos DEITADOS (razoes 1,65 a 2,02) menos o da
   Maria Jose, que e quase quadrado (540x503). O `.print` do sistema e um
   quadro 4/5 em pe — um print 1,9 dentro dele viraria uma tirinha no meio
   de um mar de branco, com o texto ilegivel.
   Duas decisoes:
   1) DUAS colunas, nao tres. Print e texto: em 3 colunas cada um sairia
      com ~317px e as 10 linhas do WhatsApp ficariam com 5px de altura.
      Em 2 colunas da 501px de conteudo — legivel, e ainda abaixo da
      resolucao nativa (o menor dos prints tem 540px).
   2) A ALTURA DA LINHA e calculada por PAR, nao pela grade toda: cada
      linha recebe a razao do print mais "deitado" dela, que e a altura em
      que o par desperdica menos area. 6 prints em 2 colunas = 3 linhas
      cheias, nenhuma celula orfa em nenhuma largura.
   O que sobra dentro do quadro e BRANCO sobre cartao BRANCO — invisivel.
   Nenhum retangulo preto. */
.prints--depo{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.5vw,22px); max-width:1080px; margin-inline:auto;
}
/* linha 1 — Maria Jose (1,07) + progresso (1,65). Excecao a regra do
   "menor desperdicio": o print da Maria e o unico quase quadrado, e numa
   linha baixa o texto dele encolhia demais. A linha e um pouco mais alta
   do que o par pediria — a Maria ganha altura e legibilidade, e a sobra
   do vizinho e branco no branco, que ninguem ve. */
.prints--depo .print:nth-child(1),
.prints--depo .print:nth-child(2){ aspect-ratio:27/20 }
/* linha 2 — diferencial (1,76) + sem toxidade (1,88) */
.prints--depo .print:nth-child(3),
.prints--depo .print:nth-child(4){ aspect-ratio:9/5 }
/* linha 3 — venda do quadro (1,89) + didatica (2,02) */
.prints--depo .print:nth-child(5),
.prints--depo .print:nth-child(6){ aspect-ratio:23/12 }

/* ── GARANTIA EM SECAO PROPRIA ─────────────────────────────────────
   No original a garantia fecha a pagina, fora da caixa de preco.
   Aqui ela ganha a mesma moldura da oferta pra nao ficar solta. */
.guarantee-box{
  padding:clamp(28px,3.4vw,46px) clamp(22px,3vw,48px);
  border:1px solid var(--line); border-radius:4px;
  background:linear-gradient(180deg, rgba(201,168,76,.05), rgba(5,5,5,.5));
}
.guarantee-box .guarantee{ margin-top:0; padding-top:0; border-top:0; gap:clamp(22px,3vw,38px) }
/* precisa vencer `.guarantee p{font-size:13.5px}` do base.css */
.guarantee .guarantee__title{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(24px,2.6vw,34px); line-height:1.15;
  color:var(--paper); margin-bottom:14px;
}

/* ═══ RESPONSIVO ═══════════════════════════════════════════════ */
@media (max-width:980px){
  .bonuses{ grid-template-columns:repeat(2,1fr) }
  /* 3 itens em 2 colunas deixariam meia linha vazia — o ultimo fecha */
  .bonuses .bonus:last-child{ grid-column:span 2 }
  .bonuses .bonus:last-child img{ aspect-ratio:16/9; object-position:50% 42% }
  .platform{ grid-template-columns:1fr }
  /* 3 aulas em 2 colunas deixariam uma celula orfa — a ultima fecha a linha */
  .gallery .gal:last-child{ grid-column:span 2 }
  /* a imagem do processo e quadrada: 3/4 cortaria a foto de referencia */
  .shot-tall{ aspect-ratio:1/1; max-height:none }
  .guarantee-box .guarantee{ flex-direction:row; text-align:left }

  /* ── prints em coluna unica ──────────────────────────────────────
     Duas colunas em 768px devolveriam ~311px por print — o texto do
     WhatsApp voltaria a ser ilegivel. Uma coluna por linha: cada quadro
     passa a ter a altura EXATA da sua imagem (sem `aspect-ratio` fixo),
     entao a sobra vai a zero e nao existe celula orfa. */
  .prints--depo{ grid-template-columns:1fr; max-width:720px }
  .prints--depo .print{ aspect-ratio:auto !important; height:auto }
  .prints--depo .print img{ width:100%; height:auto; max-height:none; margin-inline:auto }
  /* o print da Maria Jose so tem 540px de largura nativa — nao passa disso */
  .prints--depo .print:nth-child(1) img{ max-width:540px }
}
@media (max-width:620px){
  .bonuses{ grid-template-columns:1fr }
  .bonuses .bonus:last-child{ grid-column:span 1 }
  /* no celular a galeria vira coluna unica: 2 colunas de ~220px deixavam
     a aula pequena demais pra se enxergar o que a Lari esta fazendo */
  .gallery{ grid-template-columns:1fr; grid-auto-rows:56vw }
  .gallery .gal:last-child{ grid-column:span 1 }
  .bonuses .bonus:last-child img{ aspect-ratio:1; object-position:center }
  .guarantee-box .guarantee{ flex-direction:column; text-align:center }
  .guarantee-box{ padding-inline:20px }
  /* o `.prints{max-width:330px}` do sistema e para print em pe (4/5).
     Aqui o print e deitado e cheio de texto: usa a largura toda. */
  .prints--depo{ max-width:none }
  .print{ padding:10px }
}

/* ── GALERIA DE AULAS: 2 linhas de 3 ────────────────────────────────
   Os 6 frames enviados pelo cliente sao todos ~1040x700 (proporcao 3/2)
   e cheios de texto pequeno (nome do modulo, da aula, controles do
   player). O `grid-auto-rows` do sistema recortava metade; aqui cada
   celula respeita a proporcao nativa, e a legenda de cada frame vive
   dentro da propria imagem, entao nao repito nada por fora. */
.gallery--aulas{
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:auto;
}
.gallery--aulas .gal img{
  height:auto; aspect-ratio:3/2; object-fit:cover;
  filter:saturate(.94) contrast(1.02) brightness(1);
}
.gallery--aulas .gal:hover img{ filter:saturate(1) contrast(1.02) brightness(1.04) }
@media (max-width:980px){ .gallery--aulas{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .gallery--aulas{ grid-template-columns:1fr } }

/* ── ENFASE NO CUPOM DENTRO DA OFERTA ───────────────────────────────
   Substituiu a lista de 6 bullets que o cliente pediu para retirar. O
   cupom e o argumento novo da pagina (curso caro, precisa de regravada),
   entao ele ganha a posicao que a lista tinha. */
.offer__cupom{
  margin:clamp(26px,3vw,36px) 0 0;
  font-size:clamp(15px,1.4vw,18px); color:var(--paper-dim);
}
.offer__cupom b{ color:var(--gold-lt); font-weight:600 }
/* "De R$497 por R$397,60" acima do rotulo do parcelamento */
.price .price__from{ margin-bottom:14px; font-size:clamp(15px,1.4vw,18px) }
.price .price__from b{ color:var(--gold-lt); font-weight:600 }

/* a linha do cupom fecha o bloco de preco: e a rota mais barata, entao vem
   depois do a vista e nao compete com a parcela em destaque */
.price__cupom{
  display:block; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line-soft);
  font-size:14px; color:var(--paper-dim);
}
.price__cupom b{ color:var(--gold-lt); font-weight:600 }

/* ── DIAGRAMAÇÃO DOS MÓDULOS ─────────────────────────────────────────
   O `.acc__body ul{columns:2}` do base.css serve para lista longa e
   homogenea. Aqui os modulos tem de 1 a 10 aulas: num modulo de 2 aulas
   uma ia pra ponta esquerda e a outra pra ponta direita, com um vao de
   600px no meio — o cliente descreveu como "bagunçado, você não sabe pra
   onde olhar". Uma coluna resolve, da volume aos modulos grandes e ja
   nasce certo no celular.
   E o `.acc__tag` tinha min-width 90px, o que abria um buraco entre o
   numero e o titulo: agora a largura e a do proprio numero. */
#modulos .acc__body ul{ columns:1; column-gap:0 }
#modulos .acc__body li{ margin-bottom:9px }

#modulos .mod__head{ gap:14px; align-items:baseline; padding:22px 0 2px }
#modulos .acc__tag{
  min-width:0; flex:0 0 auto;
  font-size:12px; letter-spacing:.14em;
}
/* o corpo alinha com o titulo, nao com o numero: cria uma coluna de
   leitura unica em vez de dois pontos de partida diferentes */
#modulos .acc__body{ padding:0 0 24px; margin-left:calc(12px * 2.4 + 14px) }
#modulos .mod{ padding-bottom:0 }

@media (max-width:620px){
  /* no celular o numero sobe pra cima do titulo: a linha nao aguenta os dois */
  #modulos .mod__head{ flex-wrap:wrap; gap:4px }
  #modulos .acc__tag{ width:100% }
  #modulos .acc__body{ margin-left:0 }
}