/* ═══════════════════════════════════════════════════════════════════════
   ESTILO DAS PÁGINAS DE FORMAÇÃO — compartilhado pelas cinco.
   Mexeu no desenho, mexeu aqui; não se repete em cinco arquivos.

   Sistema herdado da lp-html/academy.html (a página de formações presenciais,
   que o James aprovou): fundo #070605, lâminas .claro off-white, ouro como
   única cor. Layout "N", escolhido por ele em 10/08.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ouro: #AC9751;
  --ouro-claro: #DCC383;
  --preto: #101820;
  --off: #F8F7F2;
  --fundo: #070605;
  --painel: #0E0C0A;
  --linha: rgba(172, 151, 81, .22);
  --fraco: rgba(248, 247, 242, .70);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* height:auto + aspect-ratio em cada foto. Com height:100% a imagem estoura o
   cartão quando ele é item de grid esticado — já quebrou uma versão. */
img { display: block; width: 100%; height: auto; object-fit: cover; }
a { text-decoration: none; color: inherit; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background: var(--fundo);
  color: var(--off);
}

.faixa { width: min(1180px, calc(100% - clamp(20px, 6vw, 96px) * 2)); margin-inline: auto; }

.topo { padding: clamp(18px, 2.4vw, 28px) 0; display: flex; justify-content: space-between; gap: 16px; }
.topo a, .topo span { font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: rgba(248, 247, 242, .45); }
.topo a:hover { color: var(--ouro-claro); }

.abre { text-align: center; padding-bottom: clamp(34px, 4.4vw, 72px); }
.rot { font-size: 9.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--ouro);
  margin: clamp(22px, 3vw, 44px) 0 clamp(18px, 2.4vw, 32px); }

/* CAPA a 600px: o arquivo tem 900px de largura, então isso dá 1,5x de
   densidade — nítido em qualquer tela. Ampliação de verdade só começaria
   abaixo de 900px exibidos. */
.capa { width: min(600px, 84vw); margin-inline: auto; aspect-ratio: 900/1243;
  overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, .65); }
.capa img { aspect-ratio: 900/1243; }

h1 { margin-top: clamp(22px, 2.8vw, 38px); font-size: clamp(26px, 3.4vw, 52px);
  font-weight: 200; line-height: 1.04; text-transform: uppercase; }
h1 b { display: block; font-weight: 500; }
.lead { margin: clamp(18px, 2.2vw, 30px) auto 0; max-width: 36ch;
  font-size: clamp(15px, 1.4vw, 21px); font-weight: 300; line-height: 1.5; }

/* auto-flow em vez de repeat(4): cada formação tem um número diferente de
   dados oficiais (a Vogue não tem duração nem módulos no material). Com
   quatro colunas fixas sobrava uma célula vazia na barra. */
.dados { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
  background: var(--linha); margin-top: clamp(26px, 3.2vw, 44px); text-align: left; }
.dados div { background: var(--painel); padding: clamp(14px, 1.7vw, 22px); }
.dados dt { font-size: 8.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ouro); }
.dados dd { margin-top: 6px; font-size: clamp(13px, 1.1vw, 17px); font-weight: 300; }

.bloco { padding: clamp(38px, 5vw, 84px) 0; }
.frase { margin: 0 auto clamp(30px, 4vw, 58px); max-width: 24ch; text-align: center;
  font-size: clamp(26px, 3.8vw, 56px); font-weight: 200; line-height: 1.12; }

/* ⚠️ A caixa de texto vem SEMPRE antes da foto — no desktop à esquerda, no
   mobile em cima dela. Antes os lados alternavam e no mobile o texto caía
   embaixo, então não dava para saber a qual foto cada texto pertencia.
   Pedido do James em 10/08. Não voltar a alternar. */
.dupla { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(18px, 2.4vw, 40px); align-items: stretch; }
.dupla + .dupla { margin-top: clamp(18px, 2.4vw, 40px); }
/* módulo sem foto (não temos imagem de lábios): a ficha toma a linha inteira */
.dupla--so-texto { grid-template-columns: 1fr; }
.dupla--so-texto .ficha p { max-width: 62ch; }
.dupla figure { overflow: hidden; }
.dupla figure img { aspect-ratio: 4/3; }

.ficha { background: var(--off); color: var(--preto); padding: clamp(22px, 2.8vw, 44px);
  display: flex; flex-direction: column; justify-content: center; }
.ficha b { font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: #8A7A3E; }
.ficha h2 { margin-top: 10px; font-size: clamp(20px, 2.2vw, 32px); font-weight: 200;
  text-transform: uppercase; line-height: 1.1; }
.ficha p { margin-top: 14px; color: rgba(16, 24, 32, .7); font-size: 15px; font-weight: 300; line-height: 1.75; }

/* tira de fotos — usada na Vogue, que não tem módulos no material oficial */
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 20px); }
.tira img { aspect-ratio: 3/4; }
.tira figcaption { margin-top: 10px; font-size: 9px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ouro); }

.fichaLarga { background: var(--off); color: var(--preto); padding: clamp(26px, 3.4vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px);
  margin-top: clamp(18px, 2.4vw, 40px); }
.rotulo { font-size: 9.5px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(248, 247, 242, .4); padding-bottom: 12px; border-bottom: 1px solid var(--linha);
  margin-bottom: clamp(18px, 2.2vw, 30px); }
.fichaLarga .rotulo { color: rgba(16, 24, 32, .4); border-bottom-color: rgba(16, 24, 32, .16); }
.lista { list-style: none; }
.lista li { padding: 12px 0; border-bottom: 1px solid rgba(16, 24, 32, .12);
  font-size: 14.5px; font-weight: 300; }
/* Lista longa (as 12 técnicas da Beauty) em duas colunas: em coluna única ela
   ficava alta demais e sobrava um vazio enorme ao lado do "para quem é". */
.lista--dupla { columns: 2; column-gap: clamp(20px, 3vw, 44px); }
.lista--dupla li { break-inside: avoid; }
.corpo { font-size: 15px; font-weight: 300; line-height: 1.78; color: rgba(16, 24, 32, .7); }

/* antes e depois: arquivos separados e etiquetados. Antes era uma composição
   só por modelo e não dava para saber qual metade era qual. */
/* auto-fit porque nem todo curso tem 3 pares: com 3 colunas fixas a Nano,
   que tem 2, ficava com uma célula vazia. */
.resultados { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.resultados .par > div + div { margin-top: 7px; }
.resultados img { aspect-ratio: 16/10; }
.resultados small { display: block; margin-top: 7px; font-size: 8.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ouro); }

.fim { text-align: center; padding: clamp(40px, 5vw, 88px) 0 clamp(50px, 6vw, 100px); }
.fim a { display: inline-block; font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ouro-claro); border-bottom: 1px solid rgba(220, 195, 131, .45); padding-bottom: 7px; }
.fim a:hover { color: var(--off); border-bottom-color: var(--off); }

@media (max-width: 820px) {
  .dados { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .dupla { grid-template-columns: 1fr; }
  .fichaLarga { grid-template-columns: 1fr; }
  .resultados { grid-template-columns: 1fr; }
  .tira { grid-template-columns: 1fr; }
}