/* =========================================================================
   curso.css — componentes exclusivos da carta de vendas do curso realizou.
   Carrega DEPOIS de realizou.css. Só entra aqui o que o design system ainda
   não tinha; tudo que já existia (t-hero, lead, price, hud, steps, faq…)
   continua vindo de lá.
   ========================================================================= */

/* ------------------------------------------- headline de seção (serif) --- */
/* O site de referência do Design System ("Realizou - Website.html", que o
   próprio kit declara como fonte da verdade da marca) não tem UMA headline em
   sans pesado: h1, h2, h3, os numerais dos serviços e os números de preço são
   todos `rz-display` com font-weight 400 — Instrument Serif.
   O `.t-sec` do realizou.css (Barlow 800) é um desvio herdado; aqui as
   headlines de seção falam na voz da marca. */

.t-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.05rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--txt-strong);
  max-width: 20ch;
}

.t-head em { font-style: italic; color: var(--accent-soft); }
.is-centered .t-head { margin-inline: auto; }

/* ---------------------------------------------------------- as três coisas */
/* O momento Jobs: três cartões que a pessoa lê como três produtos separados,
   e logo abaixo a linha que os funde num só. */

.trio {
  margin-top: clamp(34px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}

.trio__it {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.8vw, 32px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.trio__it:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

/* o mesmo canto vivo do .hud__in, para o cartão pertencer à mesma família */
.trio__it::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  opacity: 0.45;
  border-radius: 0 var(--r-lg) 0 0;
}

.trio__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.trio__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--txt-strong);
}

.trio__d {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--txt-muted);
}

@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ sobre -- */
/* A composição é a do `StoryValued.jsx` do Design System: headline display
   grande em duas linhas (a segunda recuada, cruzando o retrato como capa de
   revista), o texto à esquerda, o recorte do Matheus à direita sobre um círculo
   ember sólido, e um filete fechando o bloco.
   Vive na LUZ DO DIA, logo depois do amanhecer — mesma posição que ocupa na
   página de referência. É essa seção que faz a claridade durar duas seções em
   vez de piscar em uma só. */

.about { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 26vw, 340px); column-gap: clamp(28px, 4.5vw, 64px); }

.about__h {
  grid-column: 1 / -1; position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.3rem, 5.6vw, 5rem); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--txt-strong); margin: 0;
}
.about__h em { font-style: italic; color: var(--accent-soft); }
.about__h-2 { display: block; margin-left: clamp(48px, 15vw, 260px); }
/* o efeito palavra-a-palavra do realizou.js declara `.words span { display:
   inline-block }`, que ganha em especificidade da linha acima e colapsaria a
   segunda linha da headline de volta para o lado da primeira */
.words .about__h-2 { display: block; }

.about__copy { grid-column: 1; align-self: center; padding: clamp(26px, 3.4vw, 52px) 0 clamp(26px, 4vw, 60px); }
.about__copy p { max-width: 48ch; font-size: var(--t-lead); line-height: 1.66; color: var(--txt); }
.about__copy p + p { margin-top: 18px; }
.about__copy strong { color: var(--txt-strong); font-weight: 600; }

.about__media { grid-column: 2; position: relative; z-index: 1; align-self: end; margin-top: clamp(-88px, -5.4vw, -32px); }
/* o círculo é ember-500 cravado, não `var(--accent)`: no tema claro o --accent
   cai para ember-600 por causa de contraste de TEXTO, e uma bola decorativa de
   40cm não precisa passar em AA — precisa ser a cor da marca */
.about__media::before {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 94%; aspect-ratio: 1; border-radius: 50%; background: var(--ember-500);
}
.about__media img {
  position: relative; z-index: 1; display: block; width: 100%;
  filter: drop-shadow(0 20px 38px rgba(26, 22, 17, 0.24));
}

/* assinatura — o filete + o nome em mono, como no bloco de crédito da referência */
.about__sign {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: clamp(20px, 2.6vw, 28px); border-top: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--txt-muted);
}
.about__sign b { color: var(--txt-strong); font-weight: 700; }
.about__sign::before { content: ''; width: 40px; height: 1px; background: var(--line-strong); flex: none; }

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__h-2 { margin-left: clamp(24px, 8vw, 72px); }
  .about__media { grid-column: 1; grid-row: 2; width: min(64%, 320px); margin: 8px auto 0; }
  .about__copy { grid-column: 1; grid-row: 3; padding: 24px 0 36px; }
  .about__sign { grid-row: 4; }
}

/* ------------------------------------------------------------- a revelação */
/* "Uma landing page. Um editor de vídeo. Uma máquina de conteúdo."
   → "Você já entendeu, né?" → "Não são três cursos. É um só." */

.reveal {
  margin-top: clamp(46px, 7vw, 84px);
  text-align: center;
}

.reveal__sum {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: clamp(10px, 1.8vw, 22px);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--txt-strong);
}

.reveal__sum i {
  font-style: normal;
  color: var(--accent);
  font-size: 0.8em;
}

.reveal__q {
  margin-top: clamp(24px, 3.4vw, 38px);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.reveal__punch {
  margin-top: clamp(12px, 1.8vw, 18px);
}

/* ---------------------------------------------------------------- a prova */
/* Uma prova para cada uma das três coisas do `.trio`. O cabeçalho de cada bloco
   repete o par número+título de lá — é o que faz o olho fechar o círculo sem
   precisar de uma linha de texto explicando a correspondência. */

.proofs {
  margin-top: clamp(34px, 5vw, 56px);
  display: grid;
  gap: clamp(40px, 6.5vw, 72px);
}

.proof__h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(16px, 2.2vw, 22px);
}

.proof__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.proof__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--txt-strong);
}

/* A imagem da edição chega em 16/9, que é a proporção nativa dela — o corte
   padrão do `.shot` (16/10) comeria as tiras de filme das laterais.
   O print do painel é 1920×953, mas a tabela acaba em ~34% da altura e o menu
   em ~40%: o resto é tela vazia. `1920/430` mantém a largura inteira (o menu
   mora na lateral, não dá para cortar de lado) e o `cover` ancorado no topo
   decepa só o vazio de baixo. */
.shot--wide img  { aspect-ratio: 16 / 9; }
.shot--panel img { aspect-ratio: 1920 / 430; }

@media (max-width: 720px) {
  /* numa tela estreita a faixa de 4,5:1 viraria um filete de 80px. O corte
     passa a ancorar no canto esquerdo, onde mora o menu com os mesmos números
     que a legenda cita — é o pedaço do print que ainda diz alguma coisa. */
  .shot--panel img { aspect-ratio: 4 / 3; object-position: top left; }
  .proof__h { flex-wrap: wrap; gap: 4px 12px; }
}

/* ------------------------------------------------- para quem é / não é */

.fit {
  margin-top: clamp(32px, 4.6vw, 52px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.fit__col {
  padding: clamp(22px, 2.8vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
}

.fit__col--no {
  background: transparent;
  border-style: dashed;
}

.fit__h {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fit__col--yes .fit__h { color: var(--ember-400); }
.fit__col--no  .fit__h { color: var(--sand-400); }

.fit ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 13px;
}

.fit li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.fit li::before {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.5;
}

.fit__col--yes li { color: var(--sand-300); }
.fit__col--yes li::before { content: '✓'; color: var(--ember-400); }

.fit__col--no li { color: var(--sand-400); }
.fit__col--no li::before { content: '✕'; color: var(--sand-500); }

@media (max-width: 760px) {
  .fit { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ selo do preço */

.tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(228, 87, 30, 0.4);
  border-radius: var(--r-md);
  background: rgba(228, 87, 30, 0.08);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ember-400);
}

/* O selo fecha o bloco da oferta, centrado logo abaixo do cartão. */
.price__seal {
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  text-align: center;
}

.price__guarantee {
  gap: 7px;
  white-space: nowrap;
}

.price__guarantee svg { flex: none; }

@media (max-width: 420px) {
  /* Abaixo disto o selo em linha única passaria da borda da tela. Deixa
     quebrar em duas linhas centradas — continua lendo como selo, e é melhor
     que estourar a largura ou encolher a fonte até virar ilegível. */
  .price__guarantee {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
}

/* --------------------------------------------------------- ajustes finos -- */

/* ---------------------------------------------------------------- preço -- */
/* O parcelamento é ember no display serif, colado no número grande. O
   `.price__anchor` do realizou.css não serve para o valor à vista: ele vem com
   risco no texto (era preço-âncora de oferta antiga).

   2026-07-25 — o "12x" passou de 0,46em para o MESMO corpo do preço. Miúdo, ele
   virava letra de contrato ao lado de um "R$ 39,90" gigante: quem batia o olho
   lia trinta e nove reais e só descobria as doze parcelas depois. No mesmo
   tamanho, a frase é uma coisa só e o preço é o que ele é de verdade. */

.price__value .x {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1em;
  line-height: inherit;
  letter-spacing: -0.04em;
  color: var(--ember-400);
  margin-right: 0.16em;
}

/* "12x R$ 39,90" inteiro no corpo grande é bem mais largo que um número de três
   dígitos — sem isto o clamp original estoura a largura do cartão no celular. */
.price-sec .price__value .v { font-size: clamp(2.6rem, 7.6vw, 4.2rem); }

/* O que você NÃO vai pagar — a metade negativa do comparativo, logo acima do
   cartão. O par ✕/✓ é o argumento: o olho lê os três preços que somem e
   encontra, três linhas abaixo, as três coisas que ficam. */
/* Empilhado numa coluna só, e ancorado no MESMO eixo dos ✓ do cartão: a caixa
   repete o `max-width` do `.price` e o padding lateral do `.price__body`
   (28px + 1px da borda), então o ✕ cai exatamente sobre o ✓ que vem abaixo.
   Centrar a lista pela própria largura deixava os dois eixos a 8px um do
   outro — perto o suficiente para parecer engano, não escolha. */
.nots {
  list-style: none;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 29px;
  display: grid;
  gap: 12px;
  justify-items: start;
  text-align: left;
}

.nots li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--sand-400);
}

.nots li::before {
  content: '✕';
  flex: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;   /* mesma da linha: se o texto quebrar, o ✕ fica na 1ª */
  color: var(--veto-400);
}

.price__cash {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--sand-400);
}

/* a lista de módulos dentro do cartão de preço: mais densa que .includes */
.price__mods {
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.price__mods li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.875rem;
  color: var(--sand-400);
}

.price__mods li b {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ember-400);
  flex: none;
}

/* -------------------------------------------------- respiro entre vizinhos */
/* O bônus e o preço são seções coladas: o padding de baixo de uma soma com o
   de cima da outra e dá quase uma tela inteira de nada — que é exatamente
   onde o link [R$ 597] do cabeçalho aterrissa. Aperta os dois lados. */
.price-sec      { padding-top:    clamp(2.5rem, 6vh, 4rem); }

/* o salto de âncora para logo acima do rótulo, não no vazio. O `anchors()` do
   realizou.js já desconta o cabeçalho fixo; isto é a rede para quando o JS não
   roda e quem manda é o salto nativo do navegador. */
#preco, #modulos, #sobre, #prova, #faq { scroll-margin-top: 80px; }

/* ------------------------------------------------------ checkout Hotmart -- */
/* O widget da Hotmart traz um CSS próprio (hotmart-fb.min.css) que estiliza
   .hotmart-fb — feito para o botão-imagem verde deles. Como os nossos CTAs são
   os botões do design system, anulamos qualquer pintura que venha de lá e
   deixamos só o comportamento (abrir o checkout em overlay). */
a.hotmart-fb,
a.hotmart__button-checkout {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: auto;
  line-height: normal !important;
}

a.push.hotmart-fb { display: inline-block; }
a.push--block.hotmart-fb { display: block; width: 100%; }

/* O CTA do cabeçalho e o do painel de menu são o botão VAZADO do DS. Não
   adianta pôr as classes do vazado direto no <a>: além de fundo e borda, o CSS
   da Hotmart crava `font-size:24px` e `display:block` em `.hotmart-fb`, e o
   botão sai gigante e esparramado. A saída é a mesma que o `.push` já usava —
   o <a> fica sendo só o gatilho (zerado pela regra acima) e quem veste é o
   <span> de dentro, que o CSS deles não enxerga. */
a.buy { display: inline-flex; }
a.buy--block { display: block; }
a.buy--block .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .trio__it { transition: none; }
  .trio__it:hover { transform: none; }
}

/* ------------------------------------------ trava de preço do calendário -- */
/* O quadro de datas É a justificativa do preço: enquanto esses seis módulos
   estão sendo gravados, o curso custa menos. Por isso a caixa vive AQUI, colada
   no calendário, e não na seção de preço — lá embaixo ela seria mais uma
   promessa de vendedor; aqui ela é a consequência do que a pessoa acabou de ler.
   Herda a gramática do `.seal` logo acima (borda, raio, fundo translúcido) e
   sobe um degrau: tinta ember no lugar do branco 4%, porque precisa parar o
   olho — é o primeiro CTA da página depois do herói. */
.gate {
  max-width: 780px;
  margin: clamp(20px, 2.8vw, 28px) auto 0;
  padding: clamp(22px, 3.2vw, 32px);
  border: 1px solid rgba(228, 87, 30, 0.32);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(228, 87, 30, 0.11) 0%, rgba(228, 87, 30, 0.035) 100%);
  display: grid;
  gap: clamp(20px, 2.6vw, 28px);
  align-items: center;
}
/* 860px e não o breakpoint padrão: abaixo disso o botão e o parágrafo brigam
   pela mesma linha e o texto quebra em três palavras por linha. */
@media (min-width: 860px) {
  .gate { grid-template-columns: 1fr auto; gap: clamp(28px, 3.2vw, 44px); }
}
.gate .eyebrow { margin-bottom: 10px; }
/* Statement em Instrument Serif: o DS reserva a serifada para herói, fechos e
   numerais — e isto é um fecho. */
.gate__stmt {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--txt-strong);
}
.gate__d {
  margin-top: 13px;
  color: var(--sand-300);
  font-size: 0.938rem;
  line-height: 1.62;
}
.gate__d b { color: #fff; font-weight: 600; }
.gate__cta { display: grid; gap: 11px; justify-items: center; }
@media (min-width: 860px) { .gate__cta { min-width: 268px; } }
.gate__fine {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand-400);
  text-align: center;
}

/* Nota sob o CTA do cartão de preço — repete a condição da trava no ponto de
   decisão, para ninguém chegar no checkout sem ter lido por que está barato. */
.price__note {
  margin-top: 14px;
  font-size: 0.813rem;
  line-height: 1.55;
  color: var(--sand-400);
  text-align: center;
}
.price__note b { color: var(--sand-300); font-weight: 600; }