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

/* ── HERO: enquadramento desta foto ────────────────────────────────
   Foto gerada no Higgsfield com o Soul da Lari: ela de perfil a direita
   pintando um floral em acrilica, avental vestido, paleta e pincies no
   primeiro plano, e a parede escura vazia na esquerda.
   O H1 promete "pinte lindos quadros com tinta acrilica" — a imagem
   precisa mostrar exatamente isso, e nao so o avental.
   Enquadramento puxado pra direita: a esquerda escura fica sob o texto e
   a tela colorida ocupa a coluna livre. Saturacao ALTA de proposito: a
   cor da tinta e o argumento de venda desta pagina. */
/* O protagonista e a OBRA, nao a artista: plano aberto, o quadro floral
   ocupando dois tercos e a Lari pequena na direita, dando escala. Isso
   tambem resolve o problema de semelhanca do Soul — em plano aberto o
   rosto tem pouco peso na composicao.
   Enquadramento em 54%: mantem a tela inteira no quadro e preserva a
   faixa escura da esquerda, onde o texto vive. */
/* O cliente pediu para tirar a Lari do hero e deixar SO a pintura
   (04/08/2026). Imagem nova: a tela floral em impasto sobre linho, apoiada
   na parede do atelie, com luz rasante puxando a textura — e a metade
   esquerda em sombra, onde o texto vive. Gerada em 1376px e upscalada
   para 3856x2160, entao sobra resolucao em qualquer viewport.
   Sangria de 8%: sem figura pra enquadrar, o que importa e nao cortar a
   borda da tela nem o vazio da esquerda. */
/* MONTAGEM: a foto da Lari e o fundo; a obra do curso entra como peca
   apoiada em primeiro plano, no vazio entre o texto e ela. */
.hero__media{ inset:-8% 0 -8% 0 }
.hero__media > img{
  object-position:62% 46%;
  filter:saturate(1) contrast(1.04) brightness(1.04);
}
/* o veu padrao vai ate 78% e apagava a tela pintada — aqui fecha em 56% */
.hero__scrim{
  background:
    linear-gradient(94deg,
      rgba(4,4,4,.94) 0%, rgba(4,4,4,.9) 22%, rgba(4,4,4,.62) 38%,
      rgba(4,4,4,.2) 48%, rgba(4,4,4,0) 56%),
    linear-gradient(180deg,
      rgba(4,4,4,.7) 0%, rgba(4,4,4,.05) 20%, rgba(4,4,4,.05) 56%,
      rgba(4,4,4,.82) 88%, var(--ink) 100%);
}
@media (max-width:980px){
  .hero__media img{ object-position:66% 44%; filter:saturate(.96) contrast(1.04) brightness(.82) }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.9) 0%, rgba(4,4,4,.62) 26%, rgba(4,4,4,.72) 58%,
      rgba(4,4,4,.94) 88%, var(--ink) 100%);
  }
}

/* ── LEADS EMPILHADOS NO HEAD DA SECAO ─────────────────────────────
   dois paragrafos centrados seguidos: o segundo cola no primeiro */
.section__head .lead + .lead{ margin-top:16px }

/* ── PRINTS DE CONTEXTO (plataforma + paleta) ──────────────────────
   Duas imagens de proporcoes diferentes: o print da plataforma e
   1867x797 (7/3) e a paleta e 1060x595 (16/9). A linha usa 7/3 porque
   e a nativa do print — em 16/9 o recorte comia o logo da esquerda.
   A paleta perde um pouco de topo e base, e a tinta fica no centro. */
.shots{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.6vw,22px);
}
.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);
  background:var(--ink-3);
}
.shot img{
  width:100%; aspect-ratio:7/3; object-fit:cover; object-position:50% 50%;
  filter:saturate(.88) contrast(1.03);
}
.shot figcaption{
  padding:14px 18px; border-top:1px solid var(--line-soft);
  font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--paper-dim);
}

/* ── CITACAO CENTRAL (Picasso) ─────────────────────────────────────
   O .quote do sistema e alinhado a esquerda com filete lateral; aqui a
   citacao fecha a secao, entao vira faixa centrada entre dois filetes. */
.pull{
  margin:clamp(48px,6vw,84px) auto 0; max-width:760px; text-align:center;
  padding:clamp(30px,3.4vw,46px) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(22px,2.6vw,34px); line-height:1.32; color:var(--paper);
}
.pull cite{
  display:block; margin-top:20px; font-family:var(--body); font-style:normal;
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
}

/* ── LISTA DENTRO DO CARD ──────────────────────────────────────────
   base.css ja estiliza .card ul/li; aqui so o titulo do card, que nesta
   pagina e mais longo (frases inteiras do original), pede tamanho menor. */
.cards-3 .card h3{ font-size:clamp(24px,2.2vw,30px) }

/* ── CARDS COM FOTO ILUSTRATIVA ────────────────────────────────────
   Cada card ganha a imagem do que ele promete: a paleta com tinta no de
   materiais, a obra pronta no de estilo proprio, o avental no do metodo.
   O card sozinho era so texto — a imagem faz o argumento virar concreto.
   Sangra nas laterais e no topo (margem negativa) porque o .card tem
   padding proprio no base.css. */
.card__shot{
  margin:calc(-1 * clamp(28px,2.6vw,40px)) calc(-1 * clamp(28px,2.6vw,40px)) clamp(22px,2vw,28px);
  overflow:hidden; border-bottom:1px solid var(--line-soft);
}
.card__shot img{
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  filter:saturate(.9) contrast(1.04) brightness(.92);
  transition:transform 1.1s var(--ease), filter .8s var(--ease);
}
.card:hover .card__shot img{ transform:scale(1.04); filter:saturate(1.02) brightness(1) }
/* o avental e uma foto 2638x3514 (bem vertical): sem reposicionar, o
   recorte 16/10 pega so o piso. 32% traz o bordado "Art Academy". */
.card:nth-child(3) .card__shot img{ object-position:50% 32% }

/* ── NUMERO DO CARD ────────────────────────────────────────────────
   Era 13px, praticamente invisivel ao lado da foto e do titulo. Agora
   e um indice de verdade, em display serifada e ouro, com lining-nums
   (senao "01" sai com o zero baixo do old-style do Cormorant). */
.cards-3 .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;
}

/* ── FOTO DA BIO EM COR ────────────────────────────────────────────
   O .prof__img do base.css entra em grayscale(1) e colore no hover — bom
   para retrato de atelie, ruim aqui: nesta foto o fundo e uma OBRA da
   Lari, e a cor da obra e o argumento da pagina. Fica em cor sempre. */
.prof__img img{
  filter:saturate(1) contrast(1.02) brightness(1);
}
.prof__img:hover img{ filter:saturate(1.05) contrast(1.03) brightness(1.02) }

/* ── CARTAO DOS PRINTS ─────────────────────────────────────────────
   Os tres prints sao verticais e de proporcoes diferentes (0.72 / 0.75 /
   0.58). O cartao 4/5 (0.8) do base.css e mais largo que todos, entao
   sobrava faixa branca nas laterais de cada um. 0.7 fica entre eles: o
   mais vertical usa a largura inteira e os outros dois sobram pouco.
   Padding menor tambem ajuda o print a preencher o cartao. */
.prints .print{ aspect-ratio:.7; padding:10px }

/* ── AVATAR / MONOGRAMA NO DEPOIMENTO ──────────────────────────────
   Das 5 pessoas com depoimento em texto, so 2 tem foto no acervo
   (Luciana Domingues e Nilton S.). As outras 3 usavam a LOGO da marca
   como placeholder no site original — pior que nada. Aqui recebem a
   inicial em circulo, no mesmo peso visual do avatar: fecha a grade sem
   fingir uma foto que nao existe. */
.testi figcaption{
  display:grid; grid-template-columns:46px 1fr; grid-template-rows:auto auto;
  column-gap:14px; align-items:center;
}
.testi__face,
.testi figcaption .testi__mono{
  grid-row:1 / span 2; width:46px; height:46px; border-radius:50%;
}
.testi__face{
  /* os recortes tem ar sobrando acima da cabeca; 22% traz o rosto ao centro */
  object-fit:cover; object-position:50% 22%;
  border:1px solid var(--line); filter:saturate(.92) contrast(1.03);
}
/* Seletor com o figcaption no meio de proposito: `.testi figcaption span` no
   base.css e mais especifico que `.testi__mono` e vencia — o monograma saia
   como display:block, 11px, uppercase e cor de legenda, ou seja, uma letrinha
   perdida ao lado de um circulo vazio. */
.testi figcaption .testi__mono{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:400; font-size:23px; 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;
}
.testi figcaption > span{ margin-top:2px }

/* ── OBRA DA LARI ──────────────────────────────────────────────────
   Foto quase quadrada (1720x1697) de um quadro emoldurado. Em faixa
   panoramica o recorte destruia a moldura e virava um zoom estranho;
   aqui ela aparece inteira, centrada e no tamanho nativo (620 < 1720),
   como um quadro pendurado na parede da pagina. */
.artwork{
  margin:clamp(48px,6vw,84px) auto 0; max-width:620px;
  border-radius:3px; overflow:hidden;
  box-shadow:0 34px 90px -46px rgba(0,0,0,.9), inset 0 0 0 1px var(--line);
  position:relative;
}
.artwork img{
  width:100%; aspect-ratio:1; object-fit:cover; object-position:50% 50%;
  filter:saturate(.9) contrast(1.04);
}
/* legenda embaixo, nao sobreposta: a moldura da foto e madeira clara e
   qualquer texto claro por cima dela sumia, mesmo com veu */
.artwork figcaption{
  padding:14px 18px; border-top:1px solid var(--line-soft);
  font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--paper-dim);
}

/* ── OFERTA: microcopy de seguranca ────────────────────────────────*/
.offer__safe{
  margin-top:16px; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper-dim);
}

/* ── DEPOIMENTOS: segunda linha (2 de 5) ───────────────────────────
   Cinco depoimentos em grade de 3 deixariam uma celula orfa. A segunda
   linha vira grade de 2 — mas com a LARGURA de duas colunas da grade de
   3, centrada. Sem isso os dois cards de baixo ficavam mais gordos que
   os tres de cima e a coluna do texto desalinhava. */
.testis--row2{
  --g:clamp(16px,1.6vw,24px);
  margin:var(--g) auto 0;
  max-width:calc((200% - var(--g)) / 3);
}

/* ── PRINTS DE ALUNO ───────────────────────────────────────────────
   O print da Fabiana e 1080x1856 com metade de cima em branco puro: em
   `contain` o card virava uma coluna estreita de nada. Aqui ele preenche
   o card e o recorte fica em cima do comentario. */
.print--crop img{
  width:100%; height:100%; object-fit:cover; object-position:50% 66%;
}
.prints__names{
  margin-top:22px; text-align:center;
  font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--paper-dim);
}
.alunos__cta{ margin-top:clamp(48px,6vw,80px); text-align:center }

/* ── MODULOS DENTRO DO FAQ ─────────────────────────────────────────
   A resposta "quais sao os modulos" e uma lista de 9 modulos com aulas.
   Em duas colunas de blocos ela cabe sem virar parede de texto. */
.mods{ columns:2; column-gap:clamp(24px,3vw,44px) }
.mods__item{ break-inside:avoid; margin-bottom:26px }
.mods__tag{
  display:block; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:5px;
}
.mods__item h4{
  font-family:var(--display); font-weight:400; font-size:clamp(19px,1.8vw,23px);
  line-height:1.2; color:var(--paper); margin-bottom:10px;
}
/* columns:1 anula o `.acc__body ul{columns:2}` do sistema — dentro de um
   modulo de 3 aulas a subdivisao em duas colunas embaralhava a leitura */
.acc__body .mods__item ul{ list-style:none; columns:1 }
.acc__body .mods__item li{
  font-size:14px; color:var(--paper-dim); padding-left:18px; position:relative;
  margin-bottom:8px; line-height:1.5;
}
.acc__body .mods__item li::before{
  content:''; position:absolute; left:0; top:10px; width:8px; height:1px;
  background:var(--gold-dk);
}

/* ── PASSOS NUMERADOS (como acessar o produto) ─────────────────────
   O `.acc__body li::before` do sistema e um filete de 9x1px com fundo
   dourado; aqui o ::before carrega numero, entao a caixa e o fundo tem
   de ser zerados explicitamente ou o numero sai por baixo de um risco. */
.acc__body .steps{ list-style:none; counter-reset:s; margin-top:18px }
.acc__body .steps li{
  counter-increment:s; position:relative; padding-left:34px; margin-bottom:10px;
  font-size:14.5px; color:var(--paper-dim);
}
.acc__body .steps li::before{
  content:'0' counter(s); position:absolute; left:0; top:0;
  width:auto; height:auto; background:none;
  font-family:var(--display); font-size:15px; letter-spacing:.1em; color:var(--gold);
}

/* ═══ RESPONSIVO ═══════════════════════════════════════════════ */
@media (max-width:980px){
  .shots{ grid-template-columns:1fr }
  .mods{ columns:1 }
  /* em 1 coluna a grade de 2 volta a ocupar a largura toda */
  .testis--row2{ max-width:100% }
}
@media (max-width:620px){
  .pull{ font-size:21px }
}

/* ── POR DENTRO DO CURSO: de 2 para 5 prints ────────────────────────
   O cliente pediu mais imagens de dentro do curso alem da que ja estava
   (docx de revisao, 04/08/2026). Os prints novos sao frames de aula com
   o titulo do modulo visivel — prova concreta de conteudo.
   Grade 2x + o primeiro ocupando a linha inteira: 5 itens em 2 colunas
   deixariam uma celula orfa, e o print da area de membros e o mais largo
   (1867x797), entao ele e quem ganha a faixa cheia. */
.shots{ grid-template-columns:repeat(2,1fr) }
.shot--wide{ grid-column:1 / -1 }
.shot--wide img{ aspect-ratio:7/3 }
/* os frames de aula sao ~16/10: em 7/3 perderiam metade da altura */
.shots .shot:not(.shot--wide) img{ aspect-ratio:16/10 }
@media (max-width:620px){
  .shots{ grid-template-columns:1fr }
  .shot--wide img, .shots .shot:not(.shot--wide) img{ aspect-ratio:16/10 }
}