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

   O produto e um servico: o que se vende e uma hora de acesso a Lari.
   Por isso a pagina tem menos "vitrine" e mais estrutura de entrega
   (o que recebe / como acontece / quem ja fez) — e a prova social e o
   bloco mais longo da pagina: 12 depoimentos.
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO: enquadramento desta foto ────────────────────────────────
   Foto gerada no Higgsfield com o Soul da Lari (16:9, 1920x1080) — o
   original do Hotmart era stock/IA e nao era ela. O cliente pediu o
   registro de CONSULTORA, nao de artista no atelie: blazer escuro, mesa
   de trabalho com caderno e tablet, telas encostadas na parede, mao
   aberta explicando. Prompt e as 4 variantes em
   _core/img/hero-gerados-consultoria/.

   A figura esta em 62%-88% da largura e a metade esquerda e parede
   escura vazia — o recorte so precisa nao empurrar ninguem pra fora.
   Como a foto e mais larga (1.78) que o hero (~1.6), o corte e lateral:
   50% ja deixa a Lari inteira na coluna livre da direita. */
/* Sangria menor (-5% em vez de -11%) = menos zoom. Com o padrao do
   sistema o rosto dela ocupava quase metade da tela; assim ela mantem o
   destaque que esta pagina pede, mas volta a caber na cena (blazer,
   telas ao fundo, mesa). */
.hero__media{ inset:-5% 0 -5% 0 }

/* Foto regerada: o cliente apontou que na anterior o olhar dela saia
   desalinhado ("meio com estrabismo") e o cabelo curto demais. Esta veio
   com os dois olhos na camera, catchlight nos dois, e o cabelo longo e
   solto como na foto atual dela.
   58% no eixo X da a ela mais presenca no desktop — nesta pagina isso e
   desejado: o que se vende e o acesso a Lari, ela E o produto. */
.hero__media img{
  object-position:58% 40%;
  /* a cena nasceu low-key: menos veu de filtro e mais brilho que o
     padrao do sistema, senao a mesa e as telas do fundo desaparecem */
  filter:saturate(.94) contrast(1.04) brightness(1.1);
}
/* Com a esquerda da foto ja escura, o veu do sistema (.94 de preto em 0%)
   achatava tudo em breu. Aqui ele abre um pouco para as telas do fundo
   aparecerem — sem perder contraste no texto. */
.hero__scrim{
  background:
    linear-gradient(94deg,
      rgba(4,4,4,.9) 0%, rgba(4,4,4,.84) 26%, rgba(4,4,4,.58) 46%,
      rgba(4,4,4,.2) 64%, rgba(4,4,4,0) 80%),
    linear-gradient(180deg,
      rgba(4,4,4,.8) 0%, rgba(4,4,4,.12) 22%, rgba(4,4,4,.1) 52%,
      rgba(4,4,4,.86) 88%, var(--ink) 100%);
}
@media (max-width:980px){
  /* sem coluna livre o corte lateral e enorme (a foto e 3.5x mais larga que
     o quadro). Em 84% o rosto dela caia atras da segunda linha do <h1> e os
     olhos apareciam espiando entre as letras; 68% empurra a figura pro canto
     direito, onde o texto nao chega. O filtro repete o do base.css porque o
     site.css carrega depois e venceria a versao mobile dele. */
  .hero__media img{
    object-position:68% 40%;
    filter:saturate(.86) contrast(1.02) brightness(.8);
  }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.9) 0%, rgba(4,4,4,.66) 26%, rgba(4,4,4,.74) 58%,
      rgba(4,4,4,.94) 88%, var(--ink) 100%);
  }
}

/* seção com respiro menor — blocos curtos que vem colados no anterior */
.section--tight{ padding-block:clamp(56px,7vw,104px) }

/* ── O QUE VOCÊ RECEBE ─────────────────────────────────────────────
   Quatro entregaveis em 2x2: com 4 itens a grade fecha exata, e o card
   maior (2 colunas em vez de 4) deixa o texto de cada entrega respirar. */
.deliver__intro{
  max-width:64ch; margin:0 auto clamp(34px,4vw,52px);
  text-align:center; color:var(--paper-dim);
  font-size:clamp(15.5px,1.35vw,18.5px);
}
.deliver .card h3{ font-size:clamp(24px,2.3vw,31px) }
/* O numeral do Cormorant e old-style: "01" saia desenhado como "O I" — o
   zero baixinho de caixa alta e o um sem base, ilegivel como numero.
   Lining-nums + display no tamanho certo resolvem (mesmo remendo do
   acrilica-express, que corrigiu o .cards-3; aqui a grade e .cards-2). */
.deliver .card__num{
  font-family:var(--display); font-size:clamp(30px,3vw,40px); font-weight:400;
  line-height:1; letter-spacing:.02em; color:var(--gold-lt);
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
  display:block; margin-bottom:10px;
}

/* ── ASSUNTOS: os dois mundos da consultoria ───────────────────────
   A lista de assuntos vinha como parenteses dentro de um paragrafo
   gigante. Em chips ela e escaneavel e mostra a amplitude do servico.

   O cliente (03/08/2026) pediu que ficasse OBVIO que a consultoria trata
   de arte E de carreira/networking. Os assuntos sao exatamente os do
   original — nenhum novo — mas agora em duas colunas rotuladas, com um
   filete vertical entre elas. A coluna da arte usa a divisoria neutra
   (a obra) e a da carreira usa o ouro (o mercado): o mesmo par de acentos
   do sistema, sem cor nova. */
.topics{
  margin-top:clamp(40px,5vw,70px); padding-top:clamp(32px,3.6vw,48px);
  border-top:1px solid var(--line-soft); text-align:center;
}
.topics__title{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(20px,2.1vw,28px); color:var(--paper);
  margin-bottom:clamp(30px,3.4vw,46px);
}
/* .86 / 1.14 e nao 1fr/1fr: a carreira tem 11 assuntos contra 6 da arte;
   dando mais largura pra ela os chips cabem em menos linhas e as duas
   colunas terminam quase na mesma altura, sem buraco embaixo da arte. */
.topics__split{
  display:grid; grid-template-columns:.86fr 1.14fr;
  gap:clamp(30px,4vw,64px); max-width:1040px; margin-inline:auto;
  text-align:left; align-items:start;
}
.topics__col{ padding-top:22px; border-top:1px solid var(--line-soft) }
.topics__col--carreira{ position:relative; border-top-color:var(--gold-dk) }
/* filete vertical separando os dois mundos, sem virar caixa */
.topics__col--carreira::before{
  content:''; position:absolute; top:0; bottom:14px;
  left:calc(clamp(30px,4vw,64px) / -2); width:1px;
  background:linear-gradient(180deg, rgba(201,168,76,.3), rgba(201,168,76,0) 88%);
}
.topics__label{
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.topics__label span{
  font-family:var(--display); font-weight:400; font-size:17px; line-height:1;
  letter-spacing:.02em; text-transform:none; color:var(--gold-lt);
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
.topics__kicker{
  font-family:var(--display); font-weight:300;
  font-size:clamp(23px,2.4vw,32px); line-height:1.14;
  color:var(--paper); margin:10px 0 22px;
}
.topics__kicker em{ font-style:italic; color:var(--gold-lt) }
.topics__list{
  list-style:none; display:flex; flex-wrap:wrap; gap:9px;
}
/* os dois blocos tem o MESMO peso: o da arte em prata (a obra), o da
   carreira em ouro (o mercado). Nenhum deles pode parecer desligado. */
.topics__list li{
  font-size:12.5px; letter-spacing:.03em; color:var(--paper-dim);
  padding:9px 15px; border:1px solid rgba(244,241,234,.15); border-radius:2px;
  background:rgba(244,241,234,.035);
}
.topics__col--carreira .topics__list li{
  border-color:var(--line); background:rgba(201,168,76,.05);
}

/* ── PASSO A PASSO ─────────────────────────────────────────────────
   3 etapas em linha, ligadas por um filete dourado no topo do numero:
   sugere sequencia sem precisar de seta. */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px) }
.step{ position:relative; padding-top:34px; border-top:1px solid var(--line) }
.step__num{
  position:absolute; top:-19px; left:0;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:19px; line-height:1; color:var(--gold-lt);
  background:var(--ink-2); border:1px solid var(--gold-dk);
}
.step h3{
  font-family:var(--display); font-weight:400; font-size:clamp(21px,2.1vw,28px);
  line-height:1.15; margin-bottom:12px;
}
.step p{ color:var(--paper-dim); font-size:14.5px }

/* ── O QUE MUDA (icones) ───────────────────────────────────────────
   Os 4 icones do original eram lilases (fora da paleta). Foram
   recolorizados em ouro pelo canal alfa e servidos em 160px para
   exibir em 52px — nada esticado. */
.shifts{ align-items:stretch }
.shift{
  display:grid; grid-template-columns:52px 1fr; gap:clamp(18px,2vw,26px);
  align-items:start;
  padding:clamp(24px,2.4vw,32px);
  border:1px solid var(--line-soft); border-radius:3px;
  background:linear-gradient(170deg, rgba(201,168,76,.045), rgba(255,255,255,0) 60%);
  transition:border-color .5s var(--ease), transform .6s var(--ease);
}
.shift:hover{ border-color:var(--line); transform:translateY(-4px) }
.shift img{ width:52px; height:52px; object-fit:contain; opacity:.92 }
.shift p{ color:var(--paper-dim); font-size:15px }

.mid-cta{ margin-top:clamp(44px,5vw,70px); text-align:center }

/* ── FOTO DA BIO EM COR ────────────────────────────────────────────
   O .prof__img do base.css entra em grayscale(1) e so colore no hover.
   O cliente reclamou disso especificamente (03/08/2026): "e uma foto
   colorida e voce colocou uma foto em preto e branco". E a mesma foto do
   original (whatsapp_image_2023-01-20 -> lari-retrato-atelier.webp,
   853x1280) e la ela aparece em cor. Como a cena e naturalmente
   dessaturada — roupa preta, parede branca de galeria — um saturate leve
   garante que ela LEIA como cor, e nao como um P&B mal resolvido.
   Mesma especificidade do base.css; ganha porque site.css carrega depois. */
.prof__img img{ filter:saturate(1.16) contrast(1.02) brightness(1.04) }
.prof__img:hover img{ filter:saturate(1.24) contrast(1.03) brightness(1.07) }

/* ── DEPOIMENTO EM DESTAQUE ────────────────────────────────────────
   Das 12 fotos de depoimento do original, 11 tem menos de 300px (varias
   com moldura branca ou anel do Instagram embutido) — nao dao foto nem
   em avatar. Esta e a unica em resolucao real (1080x1330), e por isso
   e a unica que aparece: um destaque, nao um card de grade. */
.testi--feature{
  display:grid; grid-template-columns:minmax(0,300px) 1fr;
  gap:clamp(26px,3.4vw,52px); align-items:center;
  padding:clamp(26px,2.6vw,40px);
  margin-bottom:clamp(20px,2.2vw,32px);
  border-color:var(--line);
  background:linear-gradient(150deg, rgba(201,168,76,.06), rgba(5,5,5,.4));
}
.testi--feature img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 16%;
  border-radius:3px; filter:saturate(.88) contrast(1.04);
}
.testi--feature__body{ display:flex; flex-direction:column }
.testi--feature p{ font-size:clamp(19px,1.95vw,26px); margin-bottom:0 }
.testi--feature p b{ color:var(--gold-lt); font-weight:400; font-style:italic }
.testi--feature figcaption{
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12.5px; font-weight:500; letter-spacing:.06em; color:var(--gold-lt);
}
.testi--feature figcaption span{
  display:block; margin-top:5px; font-weight:300; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ── MURAL DE 11 DEPOIMENTOS ───────────────────────────────────────
   Grade de cards viraria parede com celulas orfas: os depoimentos vao
   de uma linha (Marcio) a oito (Marilei). Em colunas de texto o bloco
   se fecha sozinho, sem buraco e sem card gigante ao lado de card
   minusculo. */
.testis--mural{
  display:block; columns:3; column-gap:clamp(16px,1.6vw,24px);
}
.testis--mural .testi{
  display:block; break-inside:avoid;
  margin-bottom:clamp(16px,1.6vw,24px);
}
.testis--mural .testi p{
  font-size:clamp(16.5px,1.45vw,19px); line-height:1.45; margin-bottom:0;
}
.testis--mural .testi p b{ color:var(--gold-lt); font-weight:400 }

/* ── AVATAR / MONOGRAMA EM CADA DEPOIMENTO ─────────────────────────
   Na primeira rodada 11 das 12 fotos foram descartadas por serem
   minusculas (a da Karla tem 97x91). O cliente decidiu o contrario e
   assumiu o custo: "quero o maximo de fotos possivel, mesmo que
   pequenas". Em 42px a menor delas se sustenta — acima disso pixeliza,
   por isso o avatar e menor aqui do que nos outros sites (46px).

   Cada foto foi recortada na origem para tirar o anel do Instagram e a
   moldura branca/preta que vinham embutidos: sem isso o border-radius
   deixaria um aro colorido de rede social em volta do rosto, fora da
   paleta. O casamento nome<->arquivo saiu da ordem do HTML original,
   onde cada imagem antecede a citacao da pessoa.

   O nome fica no meio do seletor de proposito: `.testi figcaption span`
   no base.css e mais especifico que `.testi__mono` e venceria — o
   monograma sairia como legenda de 11px em caixa alta dentro de um
   circulo vazio. Escopo no --mural para nao tocar no destaque. */
.testis--mural .testi figcaption{
  margin-top:20px; padding-top:16px;
  display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto;
  column-gap:13px; align-items:center; break-inside:avoid;
}
.testis--mural .testi__face,
.testis--mural figcaption .testi__mono{
  grid-row:1 / span 2; width:42px; height:42px; border-radius:50%;
}
/* o recorte no rosto esta assado no arquivo (as origens sao quadradas, entao
   object-position aqui nao teria efeito nenhum) */
.testis--mural .testi__face{
  object-fit:cover; object-position:50% 50%;
  border:1px solid var(--line); filter:saturate(.94) contrast(1.03);
}
.testis--mural figcaption .testi__mono{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:400; font-size:21px; line-height:1;
  letter-spacing:0; text-transform:none; color:var(--gold-lt);
  border:1px solid var(--line); background:rgba(201,168,76,.07);
  margin-top:0;
}
.testis--mural figcaption > span:not(.testi__mono){ margin-top:2px }

/* ── OS DOIS 100% ──────────────────────────────────────────────────
   No original vinham com um louro dourado escrito "WINNER" por cima.
   Aqui o numero e o proprio ornamento. */
.hundreds{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,52px);
  max-width:960px; margin-inline:auto;
}
.hundred{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2vw,28px);
  align-items:center; padding-block:8px;
}
.hundred + .hundred{ border-left:1px solid var(--line-soft); padding-left:clamp(24px,3vw,48px) }
.hundred b{
  font-family:var(--display); font-weight:400; line-height:1;
  font-size:clamp(52px,6vw,80px); color:var(--gold-lt); letter-spacing:-.02em;
}
.hundred p{ font-size:14.5px; color:var(--paper-dim) }
.hundred em{ font-style:normal; color:var(--paper); font-weight:400 }

/* ── OFERTA: microcopy ─────────────────────────────────────────── */
.secure{
  margin-top:20px; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.offer__note{
  margin-top:28px; padding-top:22px; border-top:1px solid var(--line-soft);
  font-size:12.5px; line-height:1.65; color:var(--muted);
}
.offer__note a{ color:var(--gold-lt); border-bottom:1px solid var(--line) }
.offer__note a:hover{ border-bottom-color:var(--gold) }
.acc__body a{ color:var(--gold-lt); border-bottom:1px solid var(--line) }
.acc__body a:hover{ border-bottom-color:var(--gold) }

/* a resposta do "para quem e" tem 19 itens — 3 colunas evitam a lista
   virar um poste dentro do acordeao */
#faq .acc__body ul{ columns:3 }
#faq .acc__body p + ul{ margin-top:18px }

/* ═══ RESPONSIVO ═══════════════════════════════════════════════ */
@media (max-width:1100px){
  .testis--mural{ columns:2 }
}
@media (max-width:980px){
  .steps{ grid-template-columns:1fr; gap:clamp(30px,5vw,44px) }
  .shift{ grid-template-columns:44px 1fr }
  .shift img{ width:44px; height:44px }
  .testi--feature{ grid-template-columns:1fr }
  .testi--feature img{ max-width:280px; aspect-ratio:1 }
  /* os dois mundos empilham: o filete vertical vira o filete de topo que
     cada coluna ja tem */
  .topics__split{ grid-template-columns:1fr; gap:clamp(28px,4vw,40px) }
  .topics__col--carreira::before{ display:none }
  .hundreds{ grid-template-columns:1fr; gap:28px }
  .hundred + .hundred{
    border-left:0; padding-left:0;
    border-top:1px solid var(--line-soft); padding-top:28px;
  }
  #faq .acc__body ul{ columns:2 }
}
@media (max-width:620px){
  .testis--mural{ columns:1 }
  .topics__list{ gap:8px }
  .topics__list li{ font-size:12px; padding:8px 13px }
  .hundred{ grid-template-columns:1fr; gap:8px; text-align:center }
  #faq .acc__body ul{ columns:1 }
  /* "750,00" no display cheio estoura a caixa no mobile */
  .price__val{ font-size:clamp(48px,15vw,62px) }
}

/* ── FAIXA DE STATS COM ROTULOS LONGOS ──────────────────────────────
   O cliente reescreveu os quatro rotulos (docx, 04/08/2026) e eles ficaram
   bem mais compridos: "minutos com a Lari + briefing e material de apoio",
   "satisfacao e recomendacao de quem ja passou pela consultoria". No
   padrao do sistema (11px, tracking .15em, uppercase) isso vira 4 linhas
   apertadas e a faixa desequilibra. Aqui o rotulo ganha largura, o
   tracking cede e as quatro celulas alinham pelo topo do numero. */
.hero__stats .stat{ padding:24px 12px 28px; display:flex; flex-direction:column }
.hero__stats .stat span{
  max-width:24ch; margin-inline:auto; margin-top:10px;
  letter-spacing:.1em; line-height:1.5; font-size:10.5px;
}
/* "100%" e "+2.500" sao mais largos que "60" e "12+": o clamp do sistema
   estourava a celula em telas medias */
.hero__stats .stat b{ font-size:clamp(26px,3.1vw,42px) }
@media (max-width:620px){
  .hero__stats .stat span{ max-width:28ch; font-size:11px }
}