/* ═══════════════════════════════════════════════════════════════════
   ASSINATURA PRO — especifico deste site
   Carrega depois de base.css. So o que nao existe no sistema.
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO: enquadramento desta foto ────────────────────────────────
   Foto do atelie: cavalete a esquerda (~12-38%), Lari no centro-direita
   (~48-72%), janela com luz ambar na borda direita. O texto ocupa a
   metade esquerda, entao puxamos o recorte para a direita: o cavalete
   sai quase todo do quadro e a Lari sobe pra coluna livre.
   O brilho tambem desce — a foto ja nasce clara demais pro veu. */
.hero__media img{
  object-position:72% 44%;
  filter:saturate(.9) contrast(1.06) brightness(1.12);
}
/* o veu padrao vai ate 78% e engolia a Lari e a janela — nesta foto ele
   fecha em 58%, logo depois da coluna de texto. A foto ja e escura: nao
   precisa de mais veu do que isso pro texto ficar legivel. */
.hero__scrim{
  background:
    linear-gradient(94deg,
      rgba(4,4,4,.93) 0%, rgba(4,4,4,.88) 24%, rgba(4,4,4,.6) 40%,
      rgba(4,4,4,.18) 52%, rgba(4,4,4,0) 62%),
    linear-gradient(180deg,
      rgba(4,4,4,.72) 0%, rgba(4,4,4,.06) 20%, rgba(4,4,4,.06) 54%,
      rgba(4,4,4,.8) 88%, var(--ink) 100%);
}
@media (max-width:980px){
  /* sem coluna livre pro texto: recentra na Lari, e ai o veu vertical do
     base.css volta a valer — por isso o brilho cai bem mais aqui */
  .hero__media img{ object-position:66% 34%; filter:saturate(.86) contrast(1.05) brightness(.92) }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.88) 0%, rgba(4,4,4,.6) 26%, rgba(4,4,4,.7) 58%,
      rgba(4,4,4,.93) 88%, var(--ink) 100%);
  }
}

/* seção com respiro menor — usada no bloco do video, que vem colado no hero */
.section--tight{ padding-block:clamp(56px,7vw,96px) }

/* ── GRADE DE CURSOS INCLUSOS ──────────────────────────────────────
   9 capas quadradas. 3 colunas fecham a grade exatamente (3x3). */
.courses{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,26px);
}
.course{
  position:relative; border:1px solid var(--line-soft); border-radius:3px;
  background:linear-gradient(170deg, rgba(201,168,76,.05), rgba(255,255,255,0) 58%);
  overflow:hidden;
  transition:border-color .5s var(--ease), transform .6s var(--ease);
}
.course:hover{ border-color:var(--line); transform:translateY(-6px) }
/* as 9 capas sao coloridas e de origens diferentes; dessaturar unifica a
   grade com o preto/ouro do resto e o hover devolve a cor cheia */
.course 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);
}
.course:hover img{ transform:scale(1.04); filter:saturate(1) contrast(1.02) brightness(1) }
.course figcaption{
  padding:clamp(18px,1.8vw,24px);
  border-top:1px solid var(--line-soft);
}
.course h3{
  font-family:var(--display); font-weight:400; font-size:clamp(19px,1.9vw,25px);
  line-height:1.15; color:var(--paper);
}
.course figcaption span{
  display:block; margin-top:8px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.courses__note{
  margin-top:30px; text-align:center;
  font-size:12px; letter-spacing:.04em; color:var(--muted);
}

/* ── PRINTS DA PLATAFORMA ──────────────────────────────────────── */
.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) }

/* ── DEPOIMENTOS COM AVATAR ────────────────────────────────────────
   As fotos dos alunos sao pequenas (a menor tem 103px). Em avatar de
   48px elas ainda tem densidade suficiente; acima disso pixelizam. */
.testi figcaption{
  display:grid; grid-template-columns:48px 1fr; grid-template-rows:auto auto;
  column-gap:14px; align-items:center;
}
.testi figcaption img{
  grid-row:1 / span 2; width:48px; height:48px; border-radius:50%;
  /* os recortes originais tem muito ar acima da cabeca: "top" traz o rosto
     pro circulo em vez de centralizar o fundo */
  object-fit:cover; object-position:50% 22%;
  border:1px solid var(--line);
  filter:saturate(.9) contrast(1.03);
}
.testi figcaption span{ margin-top:2px }

/* depoimento longo do aluno PRO: ocupa a largura toda, abaixo da trinca */
.testi--wide{
  margin-top:clamp(16px,1.6vw,24px);
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(24px,3vw,48px); align-items:center;
}
.testi--wide p{ margin-bottom:0 }
.testi--wide figcaption{
  margin-top:0; padding-top:0; border-top:0;
  border-left:1px solid var(--line-soft); padding-left:clamp(20px,2.4vw,32px);
  min-width:200px;
}
.testi--wide p b{ color:var(--gold-lt); font-weight:600; font-style:normal }

/* ── VÍDEOS VERTICAIS DE DEPOIMENTO ────────────────────────────── */
.videos{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,24px); max-width:940px; margin-inline:auto;
}
.videos .video{ max-width:100% }

/* ── FORMAS DE PAGAMENTO ───────────────────────────────────────── */
.pay{ margin-top:26px }
.pay img{
  max-width:340px; 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) }

/* ═══ RESPONSIVO ═══════════════════════════════════════════════ */
@media (max-width:980px){
  .courses{ grid-template-columns:repeat(2,1fr) }
  /* 9 itens em 2 colunas deixariam meia linha vazia — o ultimo fecha a grade */
  .courses .course:last-child{ grid-column:span 2 }
  .courses .course:last-child img{ aspect-ratio:16/9 }
  .platform{ grid-template-columns:1fr }
  .videos{ grid-template-columns:1fr; max-width:380px }
  .testi--wide{ grid-template-columns:1fr }
  .testi--wide figcaption{
    border-left:0; padding-left:0;
    border-top:1px solid var(--line-soft); padding-top:18px; margin-top:6px;
  }
}
@media (max-width:620px){
  .courses{ grid-template-columns:1fr }
  .courses .course:last-child{ grid-column:span 1 }
  .courses .course:last-child img{ aspect-ratio:1 }
}

/* ── HERO CLARO (docx de revisao, 04/08/2026: "tá muito dark") ────────
   A foto anterior era low-key e o cliente reprovou. Esta e um atelie
   claro, com as obras dela encostadas na parede e luz de janela.
   O problema que ela cria: o texto do hero e BRANCO e a metade esquerda
   da foto e parede clara — ilegivel. Por isso o veu aqui e mais forte e
   fecha mais tarde (72%) do que o padrao: a coluna do texto fica escura
   o suficiente para ler, e a metade direita, onde ela esta, segue clara
   e convidativa. E o resultado deixa de ser "dark" sem quebrar o branding.
   Brilho abaixo de 1 porque a foto ja nasce clara demais para o veu. */
/* Foto regerada (04/08/2026): o cliente apontou que na anterior um olho
   saia mais aberto que o outro e o close ampliava o defeito. Esta veio em
   plano medio, com os dois olhos simetricos e abertos por igual, camisa
   branca (a que ele aprovou) e o atelie claro que ele pediu.
   Plano mais aberto = o rosto tem menos peso na composicao, o que tambem
   reduz o risco do Soul (treinado em fotos antigas). */
.hero__media{ inset:-7% 0 -7% 0 }
/* A foto e clara e bem dessaturada de origem: um toque de saturacao e
   contraste devolve vida sem quebrar o preto/ouro. */
.hero__media img{
  object-position:52% 38%;
  filter:saturate(1.06) contrast(1.07) brightness(.97);
}
/* Foto escolhida pelo cliente (opcao 3): tela em branco GRANDE ocupando o
   terco esquerdo (0-33%), parede clara ao centro, ela de bracos cruzados
   entre 50% e 90%, janela na borda direita.
   O terco esquerdo e a area mais clara de toda a foto e e exatamente onde
   fica o texto branco — por isso o veu comeca praticamente opaco. Ele fecha
   em 52%, no limite de onde ela comeca: o texto le com folga e ela fica na
   luz, sem sombra em cima do rosto. */
.hero__scrim{
  background:
    linear-gradient(94deg,
      rgba(4,4,4,.97) 0%, rgba(4,4,4,.95) 26%, rgba(4,4,4,.8) 38%,
      rgba(4,4,4,.4) 45%, rgba(4,4,4,.1) 49%, rgba(4,4,4,0) 52%),
    linear-gradient(180deg,
      rgba(4,4,4,.78) 0%, rgba(4,4,4,.14) 22%, rgba(4,4,4,.1) 54%,
      rgba(4,4,4,.86) 88%, var(--ink) 100%);
}
@media (max-width:980px){
  /* sem coluna livre o texto cruza a parede clara: veu vertical denso */
  .hero__media img{ object-position:70% 38%; filter:saturate(.9) contrast(1.03) brightness(.62) }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.9) 0%, rgba(4,4,4,.72) 26%, rgba(4,4,4,.78) 58%,
      rgba(4,4,4,.94) 88%, var(--ink) 100%);
  }
}

/* nota do asterisco, logo abaixo do subtitulo do hero */
.hero__nota{
  margin-top:10px; font-size:12px; color:var(--muted);
  max-width:56ch; letter-spacing:.01em;
}

/* ── FRASE DE CUSTO-BENEFICIO ────────────────────────────────────────
   Pedido do cliente: "uma linha com uma frase grande". Fecha a secao de
   conteudos e faz a ponte para a bio. */
.section--credo{
  padding-block:clamp(44px,5.4vw,76px);
  background:
    radial-gradient(760px 320px at 50% 50%, rgba(201,168,76,.09), transparent 68%),
    var(--ink);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.credo{
  /* max-width em ch nao vale mais: as quebras estao no HTML. Aqui so o
     limite de seguranca para telas muito largas. */
  max-width:34ch; margin-inline:auto; text-align:center;
  font-family:var(--display); font-weight:300;
  font-size:clamp(28px,3.6vw,52px); line-height:1.16; letter-spacing:-.01em;
  color:var(--paper); text-wrap:balance;
}
.credo em{ font-style:italic; color:var(--gold-lt) }

/* ── FOTO DO HERO EM 4:3, E POR QUE ISSO IMPORTA ─────────────────────
   O cliente reprovou o "close muito grande nela". Medindo no browser, o
   CSS nao estava ampliando nada (escala 0.95x) — a culpa era da
   PROPORCAO. O hero renderiza em ~1.35 (o conteudo define a altura) e a
   foto vinha em 16:9 (1.78): o `object-fit:cover` cortava 24% da largura,
   jogando fora justamente o ambiente das laterais e deixando so ela no
   quadro. Dava a leitura de close mesmo sendo um plano medio.
   Esta foto foi gerada em 4:3 (1.33) — praticamente a proporcao do hero.
   O cover corta quase nada, a cena inteira entra (tela em branco, parede,
   cavalete, janela) e ela ocupa o tamanho que deveria, de bracos cruzados.
   O inset negativo e so folga para o parallax nao mostrar borda. */
.hero__media{ inset:-4% 0 -4% 0 }
.hero__media img{ object-position:50% 34% }
@media (max-width:980px){
  /* Em 375px o hero fica com proporcao ~0.25: o cover corta 80% da largura
     e sobra uma faixa vertical. Apontar essa faixa para o rosto dela deixa
     a cara dela fantasma no meio do paragrafo — feio e sem funcao.
     Nesta foto ela vai de 50% a 90% da largura, ou seja a borda direita
     AINDA e ela. A unica faixa realmente limpa e a esquerda (0-20%): a
     tela em branco grande encostada na parede. Vira textura de linho cru
     atras do texto — tematica e legivel — e o rosto segue sendo o assunto
     no desktop, onde ha coluna livre para ele. */
  .hero__media{ inset:-5% 0 -5% 0 }
  .hero__media img{ object-position:9% 46%; filter:saturate(.9) contrast(1.04) brightness(.5) }
}