/* ==========================================================================
   JORNADA DO HEAD — Design System
   Direção: autoridade editorial. Preto, branco, cinza, laranja de assinatura.
   Sem cards genéricos, sem glassmorphism, sem gradientes decorativos.
   ========================================================================== */

@font-face {
  font-family: "Archivo Variable";
  src: url("/assets/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Variable";
  src: url("/assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Variable";
  src: url("/assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #0b0b0c;
  --ink-soft: #1c1c1e;
  --paper: #f7f6f3;
  --paper-dim: #ece9e2;
  --gray-900: #232324;
  --gray-700: #4a4a4c;
  --gray-500: #7a7a7d;
  --gray-300: #c8c5bd;
  --gray-200: #dedad2;
  --line-on-dark: rgba(247, 246, 243, 0.18);
  --line-on-light: rgba(11, 11, 12, 0.14);

  --orange: #ff6b00;
  /* Usado só no hover de botões — mantém feedback de interação sem introduzir
     um segundo laranja "de marca". Todo laranja estático do site é --orange. */
  --orange-deep: #cc5500;
  --orange-tint: #ffe2c7;

  /* Terceira superfície da identidade: cinza quente/pedra, entre o off-white e o preto. */
  --stone: #e4dfd3;

  --font-display: "Archivo Variable", "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-signature: "Fraunces Variable", "Fraunces", Georgia, serif;

  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
/* Restrito a Home e Sobre — as duas páginas que já adotaram o design system completo. */
.home h1, .home h2, .home h3, .home h4,
.sobre h1, .sobre h2, .sobre h3, .sobre h4,
.recursos h1, .recursos h2, .recursos h3, .recursos h4,
.estudantes h1, .estudantes h2, .estudantes h3, .estudantes h4,
.programa h1, .programa h2, .programa h3, .programa h4 { text-wrap: balance; }

/* Seções que servem de alvo de âncora (ex.: hero → #o-que-e) não devem ficar
   escondidas atrás do masthead fixo ao rolar até elas. */
section[id] { scroll-margin-top: 5.5rem; }

a, button, .btn, .text-link { touch-action: manipulation; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--orange); color: var(--ink); padding: 0.75rem 1.25rem;
  font-weight: 600; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .rail-grid { grid-template-columns: 220px minmax(0, 1fr); }
}

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.eyebrow__index { color: var(--gray-700); font-weight: 500; }
.section--dark .eyebrow__index { color: var(--gray-300); }

/* ---------- Numeração editorial — gramática única para os capítulos da Home ----------
   Número grande de baixo contraste + rótulo pequeno laranja. A posição pode variar
   por seção; escala, tipografia e tratamento permanecem sempre os mesmos. */
.chapter-head {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.2vw, 1.35rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}
.chapter-head__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 5.5vw, 4rem);
  line-height: 0.72;
  color: var(--gray-300);
}
.section--stone .chapter-head__num { color: var(--gray-500); }
.section--dark .chapter-head__num { color: rgba(247, 246, 243, 0.22); }
.chapter-head__label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ---------- Textura — duas superfícies distintas e reutilizáveis ----------
   "Ink" (fundos escuros) e "paper" (fundos claros): granulação fina via SVG
   (ruído procedural, não bitmap), tratada como sensação de suporte editorial/
   impresso — não decoração. Mantida discreta para não prejudicar legibilidade. */
.texture { position: relative; }
.texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.09;
  pointer-events: none;
}
.texture--paper::before, .section--light.texture::before, .section--stone.texture::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: 0.035;
}

/* Terceira superfície — cinza quente/pedra. Usada exclusivamente pelo capítulo 04
   (Ecossistema) para quebrar o grande bloco preto contínuo antes do fechamento. */
.section--stone { background: var(--stone); color: var(--ink); }

/* Halftone — retícula muito discreta, usada em manchas pontuais (não full-bleed),
   como acento gráfico de caráter editorial/impresso. Três máscaras diferentes
   evitam repetir a mesma mancha circular do hero em outros pontos da página. */
.halftone { position: relative; }
.halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1.6px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(circle, black 35%, transparent 72%);
  mask-image: radial-gradient(circle, black 35%, transparent 72%);
  pointer-events: none;
}
.halftone--edge::after {
  -webkit-mask-image: linear-gradient(to left, black 0%, black 15%, transparent 80%);
  mask-image: linear-gradient(to left, black 0%, black 15%, transparent 80%);
}
.halftone--corner::after {
  -webkit-mask-image: radial-gradient(circle at top left, black 0%, transparent 62%);
  mask-image: radial-gradient(circle at top left, black 0%, transparent 62%);
}
/* Variante "ambiental": elipse deliberadamente descentralizada e sem núcleo
   opaco: transparente na borda esquerda da caixa (sobre/antes da cadeira),
   ganhando densidade progressivamente até opacidade plena perto da borda
   direita (depois da cadeira) — mesma técnica de --edge, direção invertida.
   Um gradiente linear nunca lê como círculo/spot de luz, então essa direção
   já resolve sozinha a preocupação de parecer uma "bola de pontinhos". */
.halftone--chair::after {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 18%, black 85%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 18%, black 85%);
}

/* Marcas de registro — cruzes finas nos cantos, vocabulário de produção editorial/impressa.
   Usadas com moderação, apenas nos capítulos de abertura e fechamento. Também opt-in. */
.register-marks { position: relative; }
.register-marks::after {
  content: "";
  position: absolute;
  inset: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px;
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
  color: currentColor;
  opacity: 0.35;
}

/* ---------- Axis mark — proprietary graphic device ----------
   Uma cunha que afina em "execução" e ganha peso em "liderança": a forma comunica
   acúmulo de responsabilidade. currentColor controla a cor conforme o fundo;
   o marcador laranja é fixo. Rótulos em HTML para permanecerem legíveis em qualquer largura. */
.axis-mark { width: 100%; color: var(--ink); }
.section--dark .axis-mark, .closing .axis-mark, .hero .axis-mark { color: var(--paper); }
.axis-mark__graphic { width: 100%; height: auto; overflow: visible; display: block; }
.axis-mark__wedge { fill: currentColor; opacity: 0.85; }
.axis-mark__tick { stroke: currentColor; stroke-width: 1.5; opacity: 0.5; }
.axis-mark__tick--end { opacity: 0.7; }
.axis-mark__tick--minor { stroke-width: 1; opacity: 0.28; }
.axis-mark__marker { fill: var(--orange); }
.axis-mark__marker-ring { fill: none; stroke: var(--orange); stroke-width: 1; opacity: 0.45; }
.axis-mark__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.55;
}
.axis-mark__labels-strong { font-weight: 800; color: var(--orange); opacity: 1; }

/* ---------- Sections ---------- */
.section {
  padding-block: clamp(2.25rem, 5vw, 4.25rem);
}
.section--dark { background: var(--ink); color: var(--paper); }
.section--light { background: var(--paper); color: var(--ink); }
.section--tight { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
/* Capítulos 01→02→03 pertencem a um único raciocínio: menos vazio entre eles,
   mais continuidade narrativa. ~30% a menos que o padding-block padrão. */
.section--compact { padding-block: clamp(1.5rem, 3.5vw, 3rem); }

.section__title {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  max-width: 18ch;
}
#mudanca .section__title em,
#tese .section__title em { font-style: normal; color: var(--orange); }
/* Separador fino sob o chapter-head — mesmo tratamento nas seções 01 e 02
   (mesmo layout/estrutura, ver bloco "O Novo Jogo" abaixo) e também em 03.
   Escopado por ID para não afetar a seção 05 (FAQ), que também usa
   .chapter-head. */
#mudanca .chapter-head,
#tese .chapter-head,
#para-quem .chapter-head,
#modelo .chapter-head {
  padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
  border-bottom: 1px solid var(--line-on-light);
}
.section__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--gray-700);
  max-width: 46ch;
  margin-top: 1.25rem;
}
.section--dark .section__lede { color: var(--gray-300); }
.section__lede--emphasis {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

/* Hidden-until-revealed state only applies once main.js confirms it can run the
   IntersectionObserver reveal; without JS (or before it boots) content stays visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.95em 1.6em;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
}
.btn::after { content: "\2192"; transition: transform 0.25s var(--ease); }
.btn:hover::after { transform: translateX(3px); }

.btn--primary { background: var(--orange); color: var(--ink); }
.btn--primary:hover { background: var(--orange-deep); color: var(--paper); }

.btn--outline-light { border-color: var(--line-on-dark); color: var(--paper); }
.btn--outline-light:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }

.btn--outline-dark { border-color: var(--line-on-light); color: var(--ink); }
.btn--outline-dark:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.btn--small { padding: 0.6em 1.2em; font-size: 0.82rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15em;
  transition: opacity 0.2s var(--ease);
}
.text-link:hover { opacity: 0.65; }

/* ---------- Masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--line-on-dark);
}
.masthead__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.masthead__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
}
.masthead__logo-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--orange);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.masthead__logo-name {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.masthead__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.masthead__byline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--line-on-dark);
  flex-shrink: 0;
}
.masthead__byline-label {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--gray-500);
  white-space: nowrap;
}
.masthead__byline-sig {
  display: block;
  height: 27px;
  width: auto;
  opacity: 0.9;
}
@media (max-width: 420px) {
  .masthead__byline-label { display: none; }
  .masthead__byline { padding-left: 0.6rem; gap: 0; }
  .masthead__byline-sig { height: 23px; }
}
.masthead__nav {
  display: none;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
}
.masthead__nav a:not(.btn) {
  position: relative;
  padding-block: 0.25rem;
}
.masthead__nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--orange);
  transition: right 0.25s var(--ease);
}
.masthead__nav a:not(.btn):hover::after { right: 0; }
.masthead__nav-highlight { color: var(--orange); }

.masthead__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
}
.masthead__toggle-bar {
  height: 2px;
  background: var(--paper);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Menu em linha só a partir de 1100px. Com "Contato" e "Estudantes" o menu passou a ter 6 links +
   o botão (~675px de largura): abaixo de ~1100px a marca (logo + assinatura, ~260px) e o menu já
   não cabem na mesma linha com folga (a assinatura chegava a encostar em "Programa"). Abaixo disso
   vale o menu hambúrguer, que é o mesmo de sempre — só o ponto de troca subiu de 900 para 1100px. */
@media (min-width: 1100px) {
  .masthead__nav {
    display: flex;
    position: static;
    background: none;
    flex-direction: row;
    padding: 0;
  }
  .masthead__toggle { display: none; }
}
@media (max-width: 1099px) {
  .masthead__nav {
    display: flex;
    position: fixed;
    inset: 65px 0 0 0;
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    /* Com 7 itens, telas baixas (celular na horizontal, iPhone SE) precisam rolar o menu. */
    overflow-y: auto;
    padding: 2rem var(--gutter);
    font-size: 1.5rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .masthead__nav.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .masthead__nav .btn { margin-top: 0.75rem; }
}

/* ==========================================================================
   HOME — Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(calc(4rem - 5px), calc(13vh - 5px), calc(8rem - 5px)) clamp(4rem, 11vh, 6.5rem);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  transform: translateY(-5px);
}
@media (min-width: 900px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(2rem, 5vw, 4rem);
  }
}
.hero__content { max-width: 40rem; }
.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin-bottom: 1.75rem;
}
.hero__headline {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  max-width: 14ch;
}
.hero__headline em {
  font-style: normal;
  color: var(--orange);
}
/* Único texto explicativo do hero agora (proposta de valor) — presença
   parecida com a do antigo lede: peso intermediário, boa legibilidade,
   largura contida o bastante para quebrar em ~3-4 linhas no desktop. */
.hero__subheading {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--paper);
  max-width: 40ch;
}
/* Mobile: alguns rem a mais para a direita (sem estourar a viewport, testado em
   375-414px) evitam que a última linha feche numa palavra solta curta demais. */
@media (max-width: 899px) {
  .hero__subheading { margin-right: -1.25rem; }
}
.hero__actions {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

/* Notebooks de altura curta a média (768-900px): garantir headline + texto +
   CTAs INTEIROS visíveis sem rolar, sem comprimir a escala do headline. Faixa
   ampliada de 820 para 900px porque nesse intervalo os CTAs já apareciam
   cortados pela dobra (browser chrome real consome parte do viewport). O
   headline continua dominante — só compactamos padding do hero e os respiros
   entre eyebrow/headline/subheading/CTAs. */
@media (max-height: 900px) and (min-width: 900px) {
  .hero { padding-block: clamp(0.5rem, 2vh, 1.25rem) clamp(2rem, 5vh, 3rem); }
  .hero__eyebrow { margin-bottom: clamp(0.85rem, 2.2vh, 1.3rem); }
  .hero__headline { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; }
  .hero__subheading { margin-top: clamp(0.6rem, 1.6vh, 1rem); font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.4; }
  .hero__actions { margin-top: clamp(1rem, 2.5vh, 1.5rem); }
}


/* Retícula ambiental SOBRE a cadeira: NÃO é o halftone independente que existia
   antes (ver .hero__scene-texture, preservado abaixo, não usado aqui). A foto
   tem fundo preto opaco (sem alpha) — se a retícula ficasse atrás dela (como
   numa versão anterior deste teste), a própria imagem a encobre por completo
   e o efeito some. Por isso ela é pintada DEPOIS de .hero__chair no HTML (ver
   index.njk: hero__inner → hero__chair → hero__chair-halftone) e nenhuma das
   duas tem z-index próprio — quem garante a ordem de pintura é a posição no
   DOM. .hero__inner mantém z-index:1, então o texto sempre fica acima de tudo.
   Filha direta de .hero (full-bleed) para poder avançar até a borda direita
   da viewport — é a ÚNICA peça desta composição com essa liberdade; a cadeira
   continua presa ao mesmo container do texto (ver .hero__chair abaixo).

   A máscara (fade esquerda→direita) vem da variante .halftone--chair, junto
   com a classe base .halftone (ver seção de componentes reutilizáveis) —
   aqui só ficam posição/tamanho/opacidade, específicos deste uso no hero. */
.hero__chair-halftone {
  display: none;
  pointer-events: none;
  color: var(--paper);
  opacity: 0.2;
  transform: translateY(-5px);
}
@media (min-width: 900px) {
  .hero__chair-halftone {
    display: block;
    position: absolute;
    top: -12%;
    bottom: -10%;
    right: 0;
    width: 64vw;
  }
}
@media (min-width: 1360px) {
  .hero__chair-halftone { width: calc((100vw - var(--container)) / 2 + 700px); }
}

/* Cadeira executiva — teste editorial do hero. Substitui visualmente a cena
   direita (régua + retícula, ver .hero__scene / .hero__scene-texture logo
   abaixo, que permanecem no CSS intactas e reutilizáveis, apenas não são
   chamadas no momento). A fotografia é a própria composição — o segundo
   protagonista do hero, não um elemento decorativo preso à borda.

   .hero__chair é o "quadro" de posicionamento: mesmo max-width/centralização
   de .hero__inner, então NUNCA se afasta do bloco de texto conforme a
   viewport cresce (ambos crescem/param juntos, vinculados ao mesmo container).
   A <img>, dentro desse quadro, é posicionada por porcentagem para que seu
   centro visual fique nos ~72-75% da largura útil do hero. Máscara radial
   (deslocada para a direita dentro da própria imagem) funde os limites ao
   --ink do hero e funde a transição para o texto de forma mais generosa que
   para a borda direita — preserva respiro para a leitura sem parecer um
   asset colado sobre o layout. */
.hero__chair {
  display: none;
  pointer-events: none;
}
.hero__chair img {
  display: block;
  position: absolute;
  top: 0;
  object-fit: cover;
}
/* Máscara única, reaproveitada em todas as faixas — desde que a caixa
   mascarada seja sempre quadrada (aspect-ratio:1/1: .hero__chair no mobile,
   .hero__chair img do 700px pra cima), uma elipse simétrica (raio igual em
   x/y, centro no meio) já alcança as quatro bordas com um fade suave, sem
   precisar de um valor por breakpoint. Corrige a costura que ficava visível
   no topo em alguns monitores: a máscara anterior tinha o raio vertical bem
   maior que o horizontal e o centro deslocado para cima, então o topo nunca
   chegava a esmaecer — ficava opaco até a borda. */
@media (max-width: 699px) {
  .hero__chair {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-top: clamp(2rem, 8vw, 3rem);
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .hero__chair img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 700px) {
  .hero__chair {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: var(--container);
    margin-inline: auto;
  }
  .hero__chair img {
    /* Altura = 100% do hero (gruda no header em cima, vai até o fim do hero
       embaixo) e aspect-ratio:1/1 (a foto é quadrada) deriva a largura a
       partir disso — garante a foto inteira sempre visível (luz no topo,
       pés embaixo, em qualquer altura de viewport), nunca cover cortando
       verticalmente. Faixa 700-899px: hero ainda é coluna única (sem grid
       protegendo o texto), então a cadeira fica ancorada à direita do
       quadro — o aumento de presença/aproximação do texto vale a partir de
       900px, onde o layout já reserva espaço próprio para o texto. */
    right: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    width: auto;
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}
@media (min-width: 900px) {
  .hero__chair img {
    right: auto;
    left: 72%;
    transform: translateX(-50%);
  }
}
@media (min-width: 1100px) {
  .hero__chair img {
    left: 73%;
  }
}

/* Cena direita: textura + régua como UMA composição, não dois elementos soltos.
   A retícula nasce da borda direita (mesma linguagem de "sangramento" já usada
   na seção 02) e a régua execução → liderança fica deliberadamente posicionada
   dentro dela — metáfora editorial da transição, não gráfico de dashboard. */
.hero__scene {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  height: clamp(180px, 44vw, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__scene .hero__axis {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  margin-top: 0;
  margin-inline: auto;
}
/* Textura como fundo, régua como figura: hierarquia headline → régua → textura. */
.hero__scene .axis-mark__labels { opacity: 0.85; }

/* Textura ancorada à VIEWPORT, não ao container de conteúdo (que tem max-width
   e fica centralizado). Filha direta de .hero (full-bleed) com right:0, para
   que nunca sobre uma faixa preta vazia entre ela e a borda da tela — em vez
   de esticar os pontos, a ÁREA que reproduz o padrão cresce em telas largas. */
.hero__scene-texture {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 62vw;
  color: var(--paper);
  opacity: 0.4;
  pointer-events: none;
}

@media (min-width: 900px) {
  .hero__scene {
    margin-top: 0;
    height: auto;
  }
  .hero__scene .hero__axis { max-width: 560px; }
  /* (100vw - container)/2 = largura da margem que sobra fora do container;
     somada a uma faixa fixa, a textura sempre cobre até a borda da viewport
     e ainda se expande quando essa margem cresce em monitores grandes. */
  .hero__scene-texture { width: calc((100vw - var(--container)) / 2 + 480px); }
}

/* ==========================================================================
   01 — A Mudança
   ========================================================================== */
/* O maior respiro da seção fica na transição para 02, não entre os
   sub-blocos internos (título/lead/colunas/conclusão) — só o padding-bottom
   muda aqui; o padding-top de #mudanca e tudo em #tese permanecem os de
   .section--compact, intocados. */
#mudanca { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
/* Lead da seção — ponte entre o heading e o desenvolvimento em duas colunas
   abaixo. Presença intermediária entre .section__title e o body text:
   largura em rem (não ch) porque precisa ficar bem larga para quebrar em
   só 2-3 linhas, não uma coluna estreita de leitura. */
.mudanca__lead {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 60rem;
}
/* Conclusão da argumentação da seção 01 (não uma subseção nova): sem linha
   divisória — só espaço, para que título → lead → colunas → conclusão sejam
   lidos como um único bloco narrativo. O respiro grande fica reservado para
   a transição 01 → 02 (ver #mudanca abaixo), não aqui dentro. */
.mudanca__pivot {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}
.mudanca__pivot-statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.9vw, 2.3rem);
  line-height: 1.2;
  color: var(--ink);
  max-width: 24ch;
}
.mudanca__pivot-statement em { font-style: normal; color: var(--orange); }
.mudanca__pivot-text {
  margin-top: 0.75rem;
  font-size: clamp(1.02rem, 1.3vw, 1.12rem);
  color: var(--gray-700);
  max-width: 52ch;
}
.mudanca__pivot-text em { font-style: normal; color: var(--orange); }

/* ==========================================================================
   02 — O Novo Jogo. Mesmo layout/estrutura da seção 01 (título → lead →
   pivot), reaproveitando as classes .mudanca__* — as duas seções pertencem
   ao mesmo raciocínio de abertura e devem ler como um único sistema
   tipográfico, não dois tratamentos diferentes. Único desvio: o bloco de
   destaque (pivot) alinhado à direita nas DUAS seções (pedido explícito) —
   título, lead e chapter-head continuam à esquerda nas duas.
   ========================================================================== */
.mudanca__pivot-statement,
.mudanca__pivot-text {
  margin-left: auto;
  text-align: right;
}

/* Fragmento de retícula sangrando pela borda direita — parcialmente fora do
   container, densidade decrescente em direção ao centro. Mesma linguagem do
   halftone do hero, forma diferente (faixa vertical, não mancha circular). */
.tese__halftone {
  position: absolute;
  top: -10%;
  right: -60px;
  width: 220px;
  height: 120%;
  color: var(--gray-300);
  pointer-events: none;
}
@media (max-width: 899px) { .tese__halftone { display: none; } }
/* Contém o sangramento do fragmento dentro da própria seção — nunca dependa do
   overflow-x:hidden do body para evitar overflow horizontal de página. */
#tese { overflow: hidden; }
/* ==========================================================================
   Recognition — "Para quem". Três colunas lado a lado numa única linha (em
   telas maiores) — cada uma com o mesmo marcador: o traço laranja acima do
   texto (não numeração — isso pertenceria ao sistema de capítulos 01→04).
   ========================================================================== */
.recognition__list {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: clamp(1.9rem, 4.2vw, 3rem);
}
@media (min-width: 700px) {
  .recognition__list { grid-template-columns: repeat(3, 1fr); }
}
.recognition__item-label {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  padding-top: 0.5em;
  border-top: 2px solid var(--orange);
}
.recognition__item-text {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--gray-700);
}
.recognition__closing {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  color: var(--ink);
}

/* ==========================================================================
   04 — O Modelo. Composição em duas colunas (~38/62, mesma proporção do
   .profile__grid): esquerda = argumento (chapter-head, título, lede, nota),
   direita = o Venn, grande o bastante para ser compreendido de imediato —
   não é mais uma ilustração pequena ao lado de uma lista de definições.
   Abaixo de 960px as colunas empilham (o Venn nunca fica menor que o
   conteúdo pede) e a explicação de cada círculo — que em desktop mora
   DENTRO do próprio círculo (.model__zone-copy) — reaparece como lista
   (.model__factors); o Venn mobile fica só com os rótulos curtos, tratamento
   deliberadamente distinto do desktop, não uma redução do mesmo layout.
   Fechamento: faixa própria, separada por linha fina, duas colunas
   (afirmação / explicação) — não reaproveita .mudanca__pivot, que empilha
   verticalmente; aqui o par precisa ler como uma conclusão editorial, não
   como bloco de scroll a mais.
   ========================================================================== */
.model__grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3rem);
  align-items: center;
}
@media (min-width: 960px) {
  .model__grid {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}
.model__intro { max-width: 30rem; }
.model__title { margin-top: 0.85rem; max-width: none; }
.model__note {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: 1em;
  border-top: 1px solid var(--line-on-light);
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink);
}

.model__venn {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}
.model__venn-graphic { width: 100%; height: auto; display: block; overflow: visible; }
.model__circle { mix-blend-mode: multiply; stroke-width: 1.5; }
.model__circle--prontidao,
.model__circle--evidencia {
  fill: var(--orange);
  fill-opacity: 0.13;
  stroke: var(--orange);
  stroke-opacity: 0.55;
}
.model__circle--oportunidade {
  fill: var(--gray-300);
  fill-opacity: 0.55;
  stroke: var(--gray-500);
  stroke-opacity: 0.6;
}
/* Destaque da interseção central — glow suave, sem multiply (para clarear, não escurecer),
   somado ao próprio peso do rótulo "Promoção" abaixo. */
.model__center-glow { fill: var(--orange); opacity: 0.15; }

.model__zone {
  position: absolute;
  width: 30%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.model__zone-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.72rem, 1.7vw, 0.92rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.model__zone--prontidao .model__zone-label,
.model__zone--evidencia .model__zone-label { color: var(--orange); }
.model__zone-copy {
  display: none;
  margin: 0.45em 0 0;
  font-size: clamp(0.72rem, 1.05vw, 0.83rem);
  line-height: 1.35;
  color: var(--gray-700);
}
@media (min-width: 960px) {
  .model__zone-copy { display: block; }
}
.model__zone--prontidao { left: 50%; top: 20%; width: 38%; }
.model__zone--evidencia { left: 23%; top: 73%; }
.model__zone--oportunidade { left: 77%; top: 73%; }

.model__label {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}
.model__label--promocao { left: 50%; top: 55.6%; }

.model__factors {
  margin-top: clamp(2.5rem, 5.5vw, 3.5rem);
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}
@media (min-width: 700px) {
  .model__factors { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .model__factors { display: none; }
}
.model__factor-label {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  padding-top: 0.5em;
  border-top: 2px solid var(--orange);
}
.model__factor--neutral .model__factor-label { border-top-color: var(--gray-500); }
.model__factor-text {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--gray-700);
}

.model__closing {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line-on-light);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 700px) {
  .model__closing {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }
}
.model__closing-statement {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.2;
  color: var(--ink);
}
.model__closing-statement em { font-style: normal; color: var(--orange); }
.model__closing-text {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--gray-700);
  max-width: 42ch;
}
@media (min-width: 700px) {
  .model__closing-text { padding-top: 0.3em; }
}

/* ==========================================================================
   Ecosystem — capítulo protagonista (dark). A Jornada do Head é o ecossistema;
   Avaliação/Newsletter/Programa têm pesos DIFERENTES, não três cards iguais.
   ========================================================================== */
.ecosystem__head { max-width: 46rem; }
.ecosystem__title {
  margin-top: 0.85rem;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  max-width: 18ch;
}
.ecosystem__lede {
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--gray-700);
  max-width: 50ch;
}

.ecosystem__grid {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.25rem);
}
@media (min-width: 960px) {
  .ecosystem__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* Avaliação = porta de entrada principal: única superfície de alto contraste
   do capítulo. Newsletter e Programa permanecem no bege — hierarquia intencional. */
.ecosystem__primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--line-on-dark);
  padding: clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
}
.ecosystem__primary-tag {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}
.ecosystem__primary-name { margin-top: 0.9rem; font-size: clamp(1.6rem, 3.4vw, 2.4rem); max-width: 16ch; color: var(--paper); }
.ecosystem__primary-desc { margin-top: 1rem; color: var(--gray-300); max-width: 40ch; }
.ecosystem__primary .btn { margin-top: clamp(1.75rem, 4vw, 2.5rem); align-self: flex-start; }

.ecosystem__secondary { display: grid; gap: clamp(1.75rem, 3.5vw, 2.25rem); }
.ecosystem__card { border-top: 1px solid var(--line-on-light); padding-top: clamp(1.5rem, 3vw, 2rem); }
/* .ecosystem__card--programa não dimensiona mais nada (era opacity:0.9, para o card "em
   construção" pesar menos que o de newsletter) — /programa/ já está publicada e recebendo
   cadastros, então o card passou a ter o mesmo peso visual do vizinho. A classe continua no
   HTML como gancho, caso um tratamento distinto volte a fazer sentido.
   .ecosystem__status (selo "Em construção", com o pontinho em .ecosystem__status span) saiu
   do CSS junto com o HTML: nada mais usa esse padrão no site. */
.ecosystem__card-tag {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-700);
}
.ecosystem__card-name { margin-top: 0.6rem; font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.ecosystem__card-desc { margin-top: 0.6rem; color: var(--gray-700); font-size: 0.95rem; max-width: 40ch; }
.ecosystem__card .text-link { margin-top: 1.1rem; }

/* "Conteúdo para avançar" — a Biblioteca como porta de entrada do ecossistema. Compacto de
   propósito: reaproveita o padrão já usado acima em .ecosystem__card (linha fina no topo +
   tag + título + descrição), não o card grande de capa preta da própria Biblioteca — isso
   manteria a Home pesada. O único elemento emprestado da Biblioteca é o CTA (btn--primary
   btn--small, mesmo tratamento dos 9 cards de /recursos). Nenhum material é listado aqui: os
   itens vêm de resources.js via homeFeatured (ver index.njk), então trocar um destaque nunca
   exige tocar neste CSS nem no template. */
.ecosystem__library {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line-on-light);
}
.ecosystem__library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.ecosystem__library-eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.ecosystem__library-title { margin-top: 0.6rem; font-size: clamp(1.5rem, 2.8vw, 2.1rem); max-width: 26ch; }
.ecosystem__library-more { flex: none; color: var(--ink); }

.ecosystem__library-grid {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 900px) {
  .ecosystem__library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ecosystem__library-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-top: 1px solid var(--line-on-light);
  padding-top: clamp(1.25rem, 2.5vw, 1.5rem);
}
.ecosystem__library-tag {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.ecosystem__library-name { margin-top: 0.5rem; font-size: 1.05rem; line-height: 1.25; }
.ecosystem__library-desc {
  margin-top: 0.55rem;
  color: var(--gray-700);
  font-size: 0.88rem;
  flex: 1;
}
.ecosystem__library-cta { margin-top: 0.9rem; align-self: flex-start; }

/* Thumbnails dos materiais visuais (homeVisual, ver macro libraryThumb) — segunda fileira do
   bloco, logo abaixo dos e-books. No desktop alinha nas MESMAS 3 colunas dos e-books; abaixo de
   900px vira uma faixa horizontal com snap (as 3 thumbs lado a lado, rolando até a borda da
   tela) em vez de empilhar três imagens altas — a Home é longa no mobile e este bloco existe
   para ser compacto. O padding vertical de 6px só existe porque overflow-x:auto também corta
   na vertical e o contorno de foco não pode ser cortado. */
.ecosystem__library-thumbs {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) calc(var(--gutter) * -1) 0;
  padding: 6px var(--gutter);
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ecosystem__library-thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .ecosystem__library-thumbs {
    margin-inline: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
    overflow: visible;
  }
}
.ecosystem__thumb {
  flex: 0 0 min(78vw, 22rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
  scroll-snap-align: start;
}
@media (min-width: 900px) {
  .ecosystem__thumb { flex: initial; }
}
/* Moldura de proporção única (5:4) para as 3 thumbs terminarem na mesma altura — as artes têm
   proporções levemente diferentes; object-fit:contain nunca corta a imagem (mesma regra dos
   cards de /recursos/), a sobra fica no fundo --paper, quase igual ao fundo das próprias artes. */
.ecosystem__thumb-frame {
  display: block;
  aspect-ratio: 5 / 4;
  background: var(--paper);
  border: 1px solid var(--line-on-light);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}
.ecosystem__thumb-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ecosystem__thumb:hover .ecosystem__thumb-frame { border-color: var(--ink); }
.ecosystem__thumb:focus-visible { outline-offset: 4px; }
.ecosystem__thumb-label { display: flex; flex-direction: column; gap: 0.7rem; }
.ecosystem__thumb-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}
/* CTA: botão laranja padrão do site (.btn .btn--primary .btn--small no markup — mesmo dos
   e-books da Home e dos cards de /recursos/). É um <span> dentro do <button> da thumb, então o
   :hover do .btn (que só vale para o próprio span) é espelhado aqui para a thumb inteira,
   inclusive no foco por teclado. */
.ecosystem__thumb-cta { align-self: flex-start; }
.ecosystem__thumb:hover .ecosystem__thumb-cta,
.ecosystem__thumb:focus-visible .ecosystem__thumb-cta { background: var(--orange-deep); color: var(--paper); }
.ecosystem__thumb:hover .ecosystem__thumb-cta::after,
.ecosystem__thumb:focus-visible .ecosystem__thumb-cta::after { transform: translateX(3px); }

/* Três vídeos com cabeçalho próprio (título + lede) — mesma gramática do
   cabeçalho de .ecosystem__library logo acima (eyebrow + título), para as
   duas sub-seções de conteúdo lerem como parte do mesmo sistema. Borda
   finíssima (mesmo token usado em .ecosystem__card) só para separar do fundo
   bege, sem virar card. */
.ecosystem__videos-head { margin-top: clamp(2rem, 4vw, 3rem); }
.ecosystem__videos-label { margin-bottom: 0; }
.ecosystem__videos-title { margin-top: 0.6rem; font-size: clamp(1.5rem, 2.8vw, 2.1rem); max-width: 26ch; }
.ecosystem__videos-lede { margin-top: 0.6rem; color: var(--gray-700); font-size: 0.95rem; max-width: 52ch; }
.ecosystem__videos {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
}
@media (min-width: 900px) {
  .ecosystem__videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ecosystem__video {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-on-light);
  overflow: hidden;
}
.ecosystem__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Retícula discreta perto do número do capítulo — fade a partir do canto,
   dialogando com a linguagem gráfica do hero (mesma família, máscara diferente:
   canto aqui, borda lá). Posicionada relativa à seção (position:relative via .texture). */
.ecosystem__halftone {
  position: absolute;
  top: 0;
  left: 0;
  width: 210px;
  height: 210px;
  color: var(--gray-500);
  pointer-events: none;
}

/* ==========================================================================
   05 — FAQ. Mesmo fundo bege do Ecossistema (continuação, não um novo
   capítulo cromático) — a linha fina no topo da seção é o único sinal de que
   começa um novo momento editorial. Título à esquerda / accordion à direita
   no desktop, mesma mecânica de grid de duas colunas já usada em outros
   pontos do site (proporções diferentes, técnica igual).
   ========================================================================== */
.faq { border-top: 1px solid var(--line-on-light); }
.faq__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 900px) {
  .faq__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(2.5rem, 6vw, 4.5rem); }
}
.faq__lead .section__title { margin-top: 0.85rem; }

.faq__list { border-top: 1px solid var(--line-on-light); }
.faq__item { border-bottom: 1px solid var(--line-on-light); }
.faq__question { font-size: inherit; font-weight: inherit; }
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding-block: clamp(1.1rem, 2.2vw, 1.4rem);
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq__trigger::after {
  content: "+";
  flex: none;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1;
  color: var(--orange);
}
.faq__trigger[aria-expanded="true"]::after { content: "\2212"; }
.faq__answer {
  overflow: hidden;
  max-height: 32rem;
  transition: max-height 0.3s var(--ease);
}
.faq__answer p {
  padding-bottom: clamp(1.1rem, 2.2vw, 1.4rem);
  max-width: 60ch;
  color: var(--gray-700);
}
/* Resposta fechada (max-height: 0) também fica visibility: hidden: sem isso o teclado ainda parava em
   links de dentro de respostas fechadas (ex.: em /programa/ e no FAQ da Home) e leitores de tela liam o
   texto escondido. O visibility só "vira" depois da animação de fechar (0.3s), para não cortar o efeito. */
.js .faq__answer {
  max-height: 0;
  visibility: hidden;
  transition: max-height 0.3s var(--ease), visibility 0s linear 0.3s;
}
.js .faq__item.is-open .faq__answer {
  max-height: 32rem;
  visibility: visible;
  transition: max-height 0.3s var(--ease), visibility 0s;
}

/* ==========================================================================
   Closing
   ========================================================================== */
.closing {
  background: var(--ink);
  color: var(--paper);
  text-align: left;
  padding-top: clamp(5.5rem, 12vw, 9rem);
  padding-bottom: clamp(4.25rem, 9vw, 7rem);
}
.closing__statement {
  font-size: clamp(2.4rem, 6.4vw, 4.8rem);
  max-width: 19ch;
  line-height: 1.08;
}
.closing__statement .dim { color: var(--gray-500); }
.closing__statement .highlight { color: var(--orange); }

/* Foto ao lado da frase de fechamento (Home) — mesmo padrão visual da
   .hero__chair: caixa quadrada (aspect-ratio:1/1), object-fit:cover e
   máscara radial simétrica que funde as bordas ao --ink de fundo, sem
   costura (mask-repeat:no-repeat). Só existe nesta seção porque só a Home
   tem o wrapper .closing__row — a versão da página Sobre usa apenas
   .closing__statement, sem esta caixa, e por isso não é afetada por estas
   regras. */
.closing__row .closing__statement {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  max-width: 19ch;
}
.closing__photo {
  display: none;
  pointer-events: none;
}
@media (max-width: 699px) {
  /* Sem display:flex aqui de propósito: .hero__chair (mesma técnica de
     aspect-ratio:1/1 no mobile) fica solta no fluxo normal de blocos, nunca
     dentro de um flex container, e nunca teve relato de esticar. Colocar a
     mesma caixa dentro de um flex column (como estava antes) é a única
     diferença entre as duas — alguns navegadores mobile resolvem mal
     aspect-ratio em item de flex column, então aqui também deixamos em
     fluxo de bloco normal (h2 e div já empilham verticalmente sozinhos). */
  .closing__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-top: clamp(2rem, 8vw, 3rem);
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .closing__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 700px) {
  /* Grid em vez de flex: a 2ª coluna tem largura fixa (o clamp abaixo), então
     alargar a LINHA inteira até a borda da viewport (width: 100% + sangria)
     empurra só essa coluna para a borda — a coluna de texto (1fr) fica
     inalterada, ancorada à esquerda como sempre. Testado com margin negativo
     num item flex antes disso, mas a distribuição de espaço do flexbox não
     garante que a borda direita da caixa encoste exatamente na viewport
     (sobrava um resto de ~15px em algumas larguras); grid com coluna de
     tamanho fixo é exato. */
  .closing__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(20rem, 34vw, 38rem);
    align-items: center;
    column-gap: clamp(2rem, 5vw, 4rem);
    /* Sangra em direção à borda direita da viewport, mas sem encostar nela —
       recuada como a foto do hero (que também não vai até o extremo, fica
       ancorada a ~72-73% do container). -18px é folga de segurança (100vw
       conta a barra de rolagem, que a largura real da página não tem);
       -96px adicionais recuam a foto para a esquerda. */
    width: calc(100% + var(--gutter) + max(0px, (100vw - var(--container)) / 2) - 18px - 96px);
  }
  .closing__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .closing__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
}
.closing__signature {
  margin-top: clamp(3rem, 6.5vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.closing__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--line-on-dark);
  padding: 0.6rem 0.9rem;
}
.closing__mark::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--orange); flex: none; }
.closing__wordmark { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; }
.closing__tagline { margin-top: 1rem; font-family: var(--font-signature); font-style: italic; font-size: clamp(1.4rem, 2.8vw, 2rem); }
.closing__conclusion { margin-top: 1.35rem; font-family: var(--font-body); font-size: 1rem; color: var(--gray-500); }
.closing__conclusion .highlight { color: var(--orange); }
.closing__axis { max-width: 320px; margin-top: clamp(3rem, 6vw, 4.5rem); }

/* ==========================================================================
   Page hero (Sobre) — abertura institucional. Sem CTA, sem subtítulo de
   preenchimento. A textura entra pela lateral direita, cortada pela viewport.
   ========================================================================== */
.page-hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(4.5rem, 14vh, 8rem) clamp(4.5rem, 11vh, 7rem);
  overflow: hidden;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
}
.page-hero__kicker {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin-bottom: 1.5rem;
}
.page-hero__title {
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  max-width: 15ch;
}
.page-hero__title em { font-style: normal; color: var(--orange); }
.page-hero__lede {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--gray-300);
  max-width: 46ch;
}
.page-hero__lede .highlight { color: var(--orange); }
.page-hero__halftone {
  position: absolute;
  top: -20%;
  bottom: -20%;
  right: -90px;
  width: min(42vw, 520px);
  color: var(--paper);
  opacity: 0.22;
  pointer-events: none;
}
@media (max-width: 699px) { .page-hero__halftone { width: 48vw; right: -50px; opacity: 0.18; } }

/* ==========================================================================
   Page hero — variante com fotografia (Recursos). Clone exato da técnica do
   hero da Home (.hero__chair/.hero__chair-halftone, ver seção "HOME — Hero"):
   .page-hero__inner vira uma grid de 2 colunas só para RESERVAR espaço à
   direita (o texto ocupa a 1ª coluna; a 2ª fica vazia de propósito) — quem
   de fato posiciona a foto é .page-hero__photo, irmã de .page-hero__inner e
   absolutamente posicionada em relação a .page-hero (position:relative),
   com max-width:var(--container) para nunca se afastar do texto conforme a
   viewport cresce. A <img> usa height:100% do hero + aspect-ratio:1/1 (a
   foto é quadrada) para derivar a largura — ou seja, é a ALTURA do hero
   (definida pelo texto) que dita o tamanho da foto, nunca o contrário, então
   a dobra nunca cresce só para caber a fotografia. Uma máscara radial funde
   as quatro bordas da própria foto ao --ink do hero (sem card/moldura), e o
   halftone (variante --chair, fade esquerda→direita) é pintado DEPOIS da
   foto no DOM para não ser encoberto pelo fundo preto opaco da imagem.
   Escopado em .page-hero--recursos para não afetar o hero do Sobre, que usa
   as mesmas classes base .page-hero/.page-hero__inner sem fotografia.
   ========================================================================== */
@media (min-width: 900px) {
  .page-hero--recursos .page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.page-hero__photo-halftone {
  display: none;
  pointer-events: none;
  color: var(--paper);
  opacity: 0.2;
}
@media (min-width: 900px) {
  .page-hero__photo-halftone {
    display: block;
    position: absolute;
    top: -12%;
    bottom: -10%;
    right: 0;
    width: 64vw;
  }
}
@media (min-width: 1360px) {
  .page-hero__photo-halftone { width: calc((100vw - var(--container)) / 2 + 700px); }
}

.page-hero__photo {
  display: none;
  pointer-events: none;
}
.page-hero__photo img {
  display: block;
  position: absolute;
  top: 0;
  object-fit: cover;
}
/* Máscara única (elipse simétrica) reaproveitada em todas as faixas — a
   caixa mascarada é sempre quadrada (aspect-ratio:1/1), então um raio igual
   em x/y com centro no meio já esmaece as quatro bordas por igual. */
@media (max-width: 699px) {
  .page-hero__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-top: clamp(2rem, 8vw, 3rem);
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .page-hero__photo img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (min-width: 700px) {
  .page-hero__photo {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: var(--container);
    margin-inline: auto;
  }
  .page-hero__photo img {
    /* Faixa 700-899px: hero ainda é coluna única (sem grid protegendo o
       texto), então a foto fica ancorada à direita do quadro. */
    right: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    width: auto;
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 68%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}
@media (min-width: 900px) {
  .page-hero__photo img {
    right: auto;
    left: 72%;
    transform: translateX(-50%);
  }
}
@media (min-width: 1100px) {
  .page-hero__photo img { left: 73%; }
}

.prose { max-width: 60ch; }
.prose p + p { margin-top: 1.1em; }
.prose p { font-size: clamp(1.02rem, 1.3vw, 1.12rem); color: var(--gray-700); }
.section--dark .prose p { color: var(--gray-300); }

/* ==========================================================================
   Sobre — 01 Origem. Composição editorial horizontal: número/label/headline
   à esquerda, argumento à direita, conclusão pousando na mesma coluna do
   argumento (não full-width) — a frase de fechamento reage ao texto acima
   dela, não apenas encerra a seção.
   ========================================================================== */
.origem__grid { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width: 860px) {
  .origem__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(2.5rem, 6vw, 4rem);
  }
  .origem__lead { grid-column: 1; grid-row: 1; }
  .origem__body { grid-column: 2; grid-row: 1; }
  .origem__closing { grid-column: 2; grid-row: 2; margin-top: clamp(0.5rem, 2vw, 1rem); }
}
.origem__closing {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--line-on-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.32;
  max-width: 40ch;
  color: var(--ink);
}

/* ==========================================================================
   Sobre — 02 Quem escreve. Perfil editorial, não "foto + texto em colunas":
   a fotografia ocupa ~38% da área útil e é deslocada para baixo em relação
   ao título, criando relação assimétrica entre imagem e conteúdo. Textura
   entra pela borda direita, atrás do conteúdo.
   ========================================================================== */
.bio__halftone {
  position: absolute;
  top: -10%;
  right: -60px;
  width: 240px;
  height: 120%;
  color: var(--gray-500);
  pointer-events: none;
}
@media (max-width: 899px) { .bio__halftone { display: none; } }
#quem-escreve { overflow: hidden; }

.photo-frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line-on-dark);
}
.section--light .photo-frame { border-color: var(--line-on-light); }
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-caption {
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-300);
}

/* grid-template-areas separa ORDEM DE LEITURA (mobile: título → foto → bio,
   pedido explicitamente) de POSIÇÃO VISUAL (desktop: foto à esquerda, título+
   bio à direita) — sem duplicar HTML nem usar order (que quebraria a ordem
   de leitura para leitores de tela). */
.profile__grid {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  grid-template-areas: "title" "photo" "body";
}
.profile__title { grid-area: title; }
.profile__photo { grid-area: photo; }
.profile__body { grid-area: body; }
@media (min-width: 860px) {
  .profile__grid {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    grid-template-areas: "photo title" "photo body";
    column-gap: clamp(2.25rem, 5vw, 3.5rem);
    row-gap: clamp(1.5rem, 3vw, 2rem);
    align-items: start;
  }
  .profile__photo { margin-top: clamp(2.5rem, 7vw, 4.5rem); max-width: 22rem; }
}
/* Hierarquia editorial dentro da bio: a conclusão central em destaque
   tipográfico (peso/escala, sem laranja, sem aspas, sem caixa), a consequência
   como leitura natural dela, e o fechamento como ponte para o resto da página. */
.bio-copy p.bio-copy__statement {
  margin-top: 1.3em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  line-height: 1.35;
  color: var(--paper);
  max-width: 24ch;
}
.bio-copy p.bio-copy__consequence {
  margin-top: 0.7em;
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  color: var(--gray-300);
  max-width: 40ch;
}
.bio-copy p.bio-copy__bridge {
  margin-top: 1.6em;
  padding-top: clamp(1.1rem, 2.5vw, 1.5rem);
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  color: var(--paper);
}

/* Assinatura manuscrita real — fechamento pessoal/autoral, escala editorial,
   nunca protagonista diante da foto ou do título da seção. */
.signature-block {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line-on-dark);
}
.signature-block__image {
  height: clamp(34px, 4.5vw, 48px);
  width: auto;
}
.signature-block__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--gray-300);
}

/* Redes sociais — sob a foto, ícones de traço fino (mesma linguagem das
   marcações do axis-mark), não coloridos com as cores originais das marcas. */
.profile__social {
  margin-top: 1.1rem;
  display: flex;
  gap: 0.75rem;
}
.profile__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--gray-300);
  transition: color 0.2s var(--ease);
}
.profile__social a:hover, .profile__social a:focus-visible { color: var(--paper); }
.profile__social svg { width: 20px; height: 20px; }

/* Faixa de credencial editorial — evidência da trajetória, não seção de
   "clientes". Sem cards/bordas: só label pequena, hairline e um grid discreto
   com peso óptico equilibrado via bounding box + object-fit (não largura igual
   para todos). Abaixo do protagonismo de foto/bio/assinatura, acima da 03. */
.brand-strip {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line-on-dark);
}
.brand-strip__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-300);
}
.brand-strip__grid {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 700px) {
  .brand-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .brand-strip__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(28px, 4vw, 38px);
}
.brand-mark img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.82;
}

/* Faixa de até 3 credenciais objetivas — metadado editorial, não card. */
.credentials {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 2rem;
}
.credentials li {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-300);
}

/* ==========================================================================
   Sobre — 03 A Convicção (superfície pedra). O statement é o segundo grande
   momento conceitual da página: serifa itálica em escala grande, marcador
   lateral laranja (não aspas, não card) e leve deslocamento à direita —
   tratamento próprio, deliberadamente distinto do fechamento sans-serif da Home.
   ========================================================================== */
.convict__statement {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 3px solid var(--orange);
  font-family: var(--font-signature);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.22;
  max-width: 30ch;
  color: var(--ink);
}
.convict__statement .highlight { color: var(--orange); font-style: normal; }
@media (min-width: 860px) {
  .convict__statement { margin-left: clamp(2rem, 10vw, 7rem); }
}

/* Mesmo tamanho/proporção da versão na Home (.closing__tagline). */
.sobre__tagline {
  margin-top: 1rem;
  font-family: var(--font-signature);
  font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
}

/* ==========================================================================
   Site footer
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
}
.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line-on-dark);
}
@media (min-width: 760px) {
  .site-footer__inner { grid-template-columns: 1.3fr 1fr 1fr; }
}
.site-footer__nav, .site-footer__social {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-footer__nav a:hover, .site-footer__social a:hover { color: var(--orange); }
/* Redes sociais como ícones (em vez de palavras): em linha, não em coluna como o menu. O ícone tem
   24px; a área de toque de 40px vem de um ::before invisível (inset negativo), sem empurrar o
   layout nem tirar o glifo do alinhamento com a coluna. */
.site-footer__social { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
.site-footer__social a {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  transition: color 0.2s var(--ease);
}
.site-footer__social a::before { content: ""; position: absolute; inset: -8px; }
.site-footer__social svg { width: 24px; height: 24px; }
.site-footer__legal {
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.5rem var(--gutter) 2rem;
  font-size: 0.8rem;
  color: var(--gray-500);
}

/* ==========================================================================
   Recursos — biblioteca editorial (spotlight + grade filtrável por categoria,
   ver .lib-spotlight/.lib-grid abaixo). Card feito para crescer: adicionar um
   material novo é só um item a mais em src/_data/resources.js, nenhuma regra
   abaixo muda. Sem cards genéricos/glassmorphism — mesma linguagem do resto
   do site (bordas retas, --ink sólido, sem sombra).
   ========================================================================== */
.resource-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-on-light);
}
/* Cards da grade (não o spotlight) esticam para a altura da linha do grid
   (comportamento padrão de grid item, align-items:stretch) — height:100%
   torna isso explícito para que o corpo em flex realmente preencha a altura
   disponível, e não apenas a altura do próprio conteúdo. Com .resource-card__desc
   em flex:1 (abaixo), o CTA fica sempre colado na base do card, mesmo quando
   a descrição do vizinho na mesma linha é mais longa. */
.lib-grid .resource-card { height: 100%; }
/* Sem coverImage no dado (piloto não tem arte pronta): painel --ink sólido com o título
   tipográfico faz as vezes de capa, na mesma linguagem visual do hero/bio (painel escuro +
   textura de pontos). Quando um material tiver capa de verdade, o <img> assume o lugar. */
.resource-card__cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
/* Grade completa: painel preto ~25% mais baixo que o padrão 4:3 (usado no
   spotlight, que continua com sua própria capa lado a lado). Em 9 cards
   repetidos, o 4:3 lia como "paredão" de blocos pretos; 16:9 preserva
   textura + label + título com menos peso vertical por card. */
.lib-grid .resource-card__cover { aspect-ratio: 16 / 9; }
/* Capa com imagem real (coverImage): a caixa 4:3/16:9 é feita para o painel tipográfico
   gerado (sem conteúdo fixo a preservar). Uma imagem de verdade — como um infográfico —
   não pode ser cortada, então aqui a caixa larga a proporção forçada e acompanha a altura
   natural da imagem; object-fit:contain garante que, mesmo que algum dia a caixa fique
   maior que a imagem, nada seja cortado. */
.resource-card__cover:has(img) { background: var(--paper); aspect-ratio: auto; }
/* Precisa do prefixo .lib-grid para ganhar de ".lib-grid .resource-card__cover" acima
   (mesma especificidade sem ele, e a ordem no arquivo não é garantia suficiente). Fora da
   grade (destaque, spotlight em mobile) a regra de cima já ganha sozinha da base 4:3. */
.lib-grid .resource-card__cover:has(img) { aspect-ratio: auto; }
.resource-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* height:auto (não 100%) porque o container acima virou aspect-ratio:auto — a imagem
   define a própria altura, o container só acompanha. object-fit:contain fica como reforço
   defensivo, caso algum ajuste futuro volte a dar altura fixa ao container. */
.resource-card__cover:has(img) img { height: auto; object-fit: contain; }
.resource-card__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(247, 246, 243, 0.16) 1px, transparent 1px);
  background-size: 12px 12px;
  pointer-events: none;
}
.resource-card__cover:has(img)::before { content: none; }
.resource-card__cover-type,
.resource-card__cover-title {
  position: relative;
  padding: clamp(1.1rem, 3vw, 1.5rem);
}
.resource-card__cover-type {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.resource-card__cover-title {
  margin-top: -0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.15;
}

.resource-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.resource-card__category {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.resource-card__title { font-size: clamp(1.15rem, 2vw, 1.35rem); }
.resource-card__desc {
  flex: 1;
  color: var(--gray-700);
  font-size: 0.95rem;
}
.resource-card__cta { margin-top: 0.5rem; align-self: flex-start; }

/* ---------- Variante "Comece por aqui" — capa e corpo lado a lado a partir de 700px;
   a capa deixa de ter aspect-ratio fixo e passa a acompanhar a altura do corpo (stretch
   do flex), então nenhuma média precisa ser calculada à mão. ---------- */
.resource-card--spotlight { border-color: var(--line-on-light); }
@media (min-width: 700px) {
  .resource-card--spotlight { flex-direction: row; }
  .resource-card--spotlight .resource-card__cover {
    width: 38%;
    flex: none;
    aspect-ratio: auto;
  }
  .resource-card--spotlight .resource-card__body { flex: 1; }
  .resource-card--spotlight .resource-card__desc { font-size: 1rem; }
}

/* ---------- Seções da biblioteca — spotlight fixo + uma seção editorial por categoria
   (ver src/_data/resourceCategories.js: agrupa resources.js por categorySlug, então esta
   seção nunca precisa ser tocada quando um material novo entra na biblioteca). ---------- */
.lib-spotlight { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
/* Bloco de destaque para recursos transversais (featuredResource) — mesmo padding vertical
   do começo de uma seção de categoria (lib-grid-section), já que ocupa o mesmo lugar na
   sequência da página. Cada item usa o layout lado-a-lado do spotlight (resource-card--
   spotlight); múltiplos itens empilham com respiro entre eles em vez de virar grid, para não
   competir peso visual com "Comece por aqui" logo acima. */
.lib-featured { padding-top: clamp(0.5rem, 2vw, 1rem); padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.lib-featured__grid { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }
.lib-grid-section { padding-top: clamp(0.5rem, 2vw, 1rem); }
.lib-section__label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-900);
  margin-bottom: 1.4rem;
}
.lib-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.lib-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (max-width: 900px) {
  .lib-spotlight__grid { grid-template-columns: 1fr; }
  .lib-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lib-grid { grid-template-columns: 1fr; }
}

/* ---------- Busca e filtros da biblioteca (/recursos/, ver js/resources-filter.js) ----------
   Bloco compacto entre o hero e a primeira seção: campo de busca (~40%) + select de formato
   na linha de cima, chips de categoria embaixo. Sem caixa/fundo/sombra ao redor — só bordas
   finas, mesma linguagem dos campos do modal (.resource-modal__field). Chip selecionado usa
   laranja (borda + tinta) mas NÃO o preenchimento sólido do .btn--primary, para não parecer
   mais um CTA. Sem JS o bloco nem aparece (a biblioteca segue completa, por seções). */
.lib-filters { display: none; }
.js .lib-filters {
  display: block;
  padding-top: clamp(1.5rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
/* A primeira seção de materiais já não fica logo abaixo do hero — o respiro de cima passa a ser
   o do bloco de filtros; aqui só o mesmo padding-top curto das demais seções da sequência. */
.lib-filters + .lib-spotlight { padding-top: clamp(0.5rem, 2vw, 1rem); }
/* Seções/cards que o filtro esconde: .resource-card e .text-link definem display próprio, que
   ganharia do display:none padrão do atributo hidden. */
.lib-filters [hidden],
.resource-card[hidden],
[data-lib-section][hidden] { display: none !important; }

.lib-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.lib-filters__search {
  position: relative;
  flex: 0 0 40%;
  min-width: 15rem;
}
.lib-filters__format { position: relative; flex: 0 0 auto; }
.lib-filters__input,
.lib-filters__select {
  display: block;
  width: 100%;
  height: 2.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background-color: var(--paper);
  border: 1px solid var(--line-on-light);
  border-radius: 3px;
  transition: border-color 0.2s var(--ease);
}
.lib-filters__input:hover,
.lib-filters__select:hover { border-color: rgba(11, 11, 12, 0.4); }
.lib-filters__input:focus-visible,
.lib-filters__select:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--ink);
}
.lib-filters__input {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 0.9em 0 2.6rem;
}
.lib-filters__input::placeholder { color: var(--gray-500); opacity: 1; }
/* "x" nativo de limpar do type=search (Chromium/Safari) vem azul — refeito em cinza, na paleta. */
.lib-filters__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-left: 0.4rem;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' fill='none' stroke='%237a7a7d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lib-filters__search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-500);
  pointer-events: none;
}
.lib-filters__select {
  -webkit-appearance: none;
  appearance: none;
  min-width: 13.5rem;
  padding: 0 2.6rem 0 0.9em;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a7a7d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 0.75rem;
}

/* Chips: sempre uma linha só — cabem inteiros a partir de ~1024px; abaixo disso (tablet,
   mobile) rolam na horizontal em vez de quebrar em várias linhas (evita chip órfão na 2ª
   linha). O padding vertical de 5px existe só porque overflow-x:auto também corta na vertical
   e o contorno de foco (2px + offset 2px) não pode ser cortado. A faixa sangra até a borda do
   container (margem negativa = gutter) para a rolagem ir até a borda da tela. */
.lib-filters__chips {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin: calc(0.85rem - 5px) calc(var(--gutter) * -1) 0;
  padding: 5px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lib-filters__chips::-webkit-scrollbar { display: none; }
.lib-chip {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 0.72em 0.95em;
  color: var(--gray-700);
  border: 1px solid var(--line-on-light);
  border-radius: 3px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.lib-chip:hover { color: var(--ink); border-color: var(--ink); }
.lib-chip:focus-visible { outline-offset: 2px; }
.lib-chip.is-active {
  color: var(--ink);
  font-weight: 700;
  background-color: var(--orange-tint);
  border-color: var(--orange);
}

.lib-filters__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  margin-top: 1.1rem;
}
.lib-filters__count {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
}
.lib-filters__clear { font-size: 0.85rem; color: var(--ink); }
/* Sem resultado: a própria linha de status vira a mensagem, com mais presença, e a página
   ganha respiro embaixo para o rodapé não subir de repente. */
.js .lib-filters.is-empty { padding-bottom: clamp(3rem, 10vw, 6rem); }
.lib-filters.is-empty .lib-filters__count {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 700px) {
  .lib-filters__search,
  .lib-filters__format { flex: 1 1 100%; min-width: 0; }
  .lib-filters__select { min-width: 0; }
}

/* ---------- Modal de captura — reutilizado por qualquer material via data-attributes ---------- */
body.no-scroll { overflow: hidden; }

.resource-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gutter do modal: 1.25rem (20px) de cada lado = 40px no total no desktop — é este padding,
     não um calc() na própria caixa, que já entrega o "calc(100% - 40px)" pedido, sem dobrar o
     respiro. Reduzido no mobile abaixo para bater com os 24px totais pedidos lá. */
  padding: 1.25rem;
}
@media (max-width: 600px) {
  .resource-modal { padding: 0.75rem; }
}
.resource-modal[hidden] { display: none; }
.resource-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 12, 0.72);
}
.resource-modal__dialog {
  position: relative;
  width: 100%;
  /* Largura do formulário (padrão) — o passo de sucesso é mais largo, ver a regra
     :has() abaixo, porque o texto do convite (título/parágrafo do "Próximo passo") precisa de
     mais espaço horizontal para não quebrar em várias linhas. */
  max-width: 600px;
  /* Só 90vh — sem teto fixo em px: era o max-height: min(90vh, 640px) anterior que forçava
     scroll interno mesmo em telas altas, cortando visualmente o CTA final mesmo havendo
     espaço de sobra. */
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-on-light);
  border-radius: 3px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
/* Passo de sucesso/pós-download precisa de mais largura que o formulário de captura (mesmo
   container, ver resource-modal.njk) — :has() detecta qual passo está visível e ajusta só
   nesse caso, sem duplicar a caixa do modal. post-download-modal__dialog (recursos ungated)
   só mostra esse mesmo conteúdo, então fica sempre na largura maior. */
.resource-modal__dialog:has([data-modal-step="success"]:not([hidden])),
.post-download-modal__dialog {
  max-width: 740px;
}
.resource-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-500);
  background: none;
  border: 0;
  cursor: pointer;
}
.resource-modal__close:hover { color: var(--ink); }

.resource-modal__eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}
.resource-modal__title {
  margin-top: 0.5rem;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}
.resource-modal__lede {
  margin-top: 0.75rem;
  color: var(--gray-700);
  font-size: 0.95rem;
}

.resource-modal__form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.resource-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-700);
}
.resource-modal__field input {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  padding: 0.75em 0.9em;
  border: 1px solid var(--line-on-light);
  border-radius: 3px;
  background: var(--paper);
}
.resource-modal__field input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}
.resource-modal__disclaimer {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gray-500);
}
.resource-modal__error {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange);
}
.resource-modal__submit { justify-content: center; }
.resource-modal__submit[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Componente de pós-download (post-download-invite.njk) — reaproveitado tal e
   qual dentro do modal leve de /recursos/ (post-download-modal.njk, mesma casca
   .resource-modal* acima) e dentro do estado de sucesso da landing da Tabela. Composição
   centralizada em duas seções (confirmação do download + "Próximo passo") separadas por um
   divisor — pensada para parecer uma tela de sucesso, não uma continuação do formulário dos
   e-books. ---------- */
.post-download { text-align: center; }
.post-download__confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.post-download__icon { flex: none; }
.post-download__eyebrow { justify-content: center; }
.post-download__confirm-title {
  margin-top: 0.15rem;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  /* Antes 24ch/32ch — travava a linha bem antes da caixa mais larga (740px) ter espaço de
     sobra, forçando quebras que não existiriam se o texto pudesse usar a largura disponível.
     Valores maiores, não removidos: ainda impede que uma frase curta estique de ponta a
     ponta numa caixa larga. */
  max-width: 34ch;
}
.post-download__confirm-text {
  color: var(--gray-700);
  font-size: 0.92rem;
  max-width: 50ch;
}
.post-download__confirm-text a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-download__confirm-text a:hover { color: var(--orange); }
.post-download__brand {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.post-download__divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--line-on-light);
  margin: 0;
}
.post-download__next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
}
.post-download__next-title {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  max-width: 36ch;
}
.post-download__next-text {
  color: var(--gray-700);
  font-size: 0.92rem;
  max-width: 52ch;
}
.post-download__cta { margin-top: 0.75rem; justify-content: center; }
.post-download__support { margin-top: 0.5rem; font-size: 0.82rem; color: var(--gray-500); }
.post-download__secondary { margin-top: 1.75rem; font-size: 0.88rem; }
.resource-modal__submit[disabled]::after { content: none; }

/* ==========================================================================
   Landing — Tabela Periódica (mídia paga). Página de conversão única: hero
   com oferta + estado de sucesso (troca de bloco, sem sair da página) e a
   imagem real do recurso como elemento visual, sem cortar nada. Reaproveita
   tokens/tipografia do resto do site, mas é layout próprio — não é um
   .page-hero (aquele é para a foto de pessoa com máscara/blend; aqui a
   imagem é um documento retangular, sem tratamento fotográfico).
   ========================================================================== */
.tp-hero {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.tp-hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 860px) {
  .tp-hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
    align-items: center;
  }
}
.tp-hero__title {
  margin-top: 0.85rem;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.12;
  max-width: 18ch;
}
.tp-hero__lede {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--gray-300);
  max-width: 42ch;
}
.tp-hero__cta { margin-top: 1.75rem; }
.tp-hero__note {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: var(--gray-500);
}
.tp-hero__visual {
  border: 1px solid var(--line-on-dark);
}
.tp-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 859px) {
  .tp-hero__visual { order: 2; }
}

/* Benefícios + CTA final — ainda estado PRÉ-download (dentro de [data-tp-offer], ver njk).
   Mesma superfície escura do hero (--ink) e mesmo .container, para ler como página contínua
   até o footer, não uma seção clara "quebrando" o padrão. */
.tp-benefits {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 7vw, 4.5rem);
}
.tp-benefits__grid {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1023px) {
  .tp-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .tp-benefits__grid { grid-template-columns: minmax(0, 1fr); }
}
.tp-benefit {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--ink-soft);
  border: 1px solid var(--line-on-dark);
}
.tp-benefit__icon { flex: none; }
.tp-benefit__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--paper);
}
.tp-benefit__text {
  font-size: 0.92rem;
  color: var(--gray-300);
}

.tp-final-cta {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  border-top: 1px solid var(--line-on-dark);
}
.tp-final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tp-final-cta__eyebrow { justify-content: center; }
.tp-final-cta__title {
  margin-top: 0.85rem;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.2;
  max-width: 22ch;
  color: var(--paper);
}
.tp-final-cta__cta { margin-top: 1.75rem; }
.tp-final-cta__note { margin-top: 0.85rem; font-size: 0.82rem; color: var(--gray-500); }

/* Estado de sucesso — SEÇÃO PRÓPRIA de nível superior (ver tabela-periodica/index.njk),
   irmã do estado de oferta, nunca aninhada dentro de .tp-hero/.tp-hero__inner: o toggle
   pré/pós-download acontece nos wrappers neutros [data-tp-offer]/[data-tp-success] (sem
   nenhuma regra de display própria, então o atributo `hidden` nativo já basta — nada aqui
   precisa de override de especificidade). Ocupa aproximadamente uma viewport e centraliza o
   conteúdo vertical e horizontalmente, layout próprio, não herda as colunas do hero.
   Reaproveita tokens/eyebrow/botões do design system; só a composição é exclusiva desta
   página de conversão — não é o mesmo componente do modal leve de /recursos/ (esse continua
   em post-download-invite.njk, intocado). */
.tp-success {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4.5rem);
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
  padding-inline: var(--gutter);
}
/* Textura discreta, só nas laterais — mesma técnica de pontilhado do resto do site
   (ver .halftone), mas com máscara e opacidade próprias: aqui é fundo de uma seção cheia de
   viewport, não um acento pontual, então .halftone--edge (pensada para áreas menores) ficava
   forte demais e lia como um "gradiente" cobrindo quase toda a largura. Esta máscara deixa o
   centro (atrás do conteúdo) limpo e concentra os pontos nas duas bordas. */
.tp-success::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1.6px);
  background-size: 9px 9px;
  color: var(--paper);
  opacity: 0.03;
  -webkit-mask-image: linear-gradient(to right, black 0%, transparent 20%, transparent 80%, black 100%);
  mask-image: linear-gradient(to right, black 0%, transparent 20%, transparent 80%, black 100%);
}
.tp-success__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
}
.tp-success__check { flex: none; }
.tp-success__notice {
  margin-top: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-300);
}
.tp-success__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
.tp-success__notice a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.tp-success__notice a:hover { color: var(--orange); }
.tp-success__eyebrow {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  justify-content: center;
}
.tp-success__title {
  margin-top: 0.85rem;
  font-size: clamp(2.1rem, 4.8vw, 3.1rem);
  line-height: 1.1;
  max-width: 20ch;
  color: var(--paper);
}
.tp-success__text {
  margin-top: 1rem;
  font-size: 1.05rem;
  color: var(--gray-300);
  max-width: 38ch;
}
.tp-success__cta {
  margin-top: 1.85rem;
  width: 100%;
  max-width: 26rem;
  justify-content: center;
}
.tp-success__support { margin-top: 0.6rem; font-size: 0.82rem; color: var(--gray-500); }
.tp-success__divider {
  width: 100%;
  max-width: 20rem;
  margin-top: clamp(2rem, 4.5vw, 2.75rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--gray-500);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.tp-success__divider::before, .tp-success__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-on-dark);
}
.tp-success__secondary {
  margin-top: clamp(2rem, 4.5vw, 2.75rem);
  width: 100%;
  max-width: 26rem;
  justify-content: center;
}
.tp-success__trust {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: clamp(2rem, 4.5vw, 2.75rem);
  border-top: 1px solid var(--line-on-dark);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}
.tp-success__trust li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-width: 11rem;
}
.tp-success__trust strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--paper);
}
.tp-success__trust span { font-size: 0.8rem; color: var(--gray-500); }
.tp-success__footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: clamp(1.5rem, 3.5vw, 2rem);
  border-top: 1px solid var(--line-on-dark);
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.tp-success__footer p { font-size: 0.75rem; color: var(--gray-500); }

/* ==========================================================================
   /estudantes/ — Jornada do Head para Estudantes (src/estudantes/index.njk)
   Toda a página é montada com o que o design system já tem: .hero (+ .hero__chair e halftone),
   .chapter-head, .section--light/--dark/--stone, .texture, .lib-grid + .resource-card,
   .text-link, .btn e o encerramento .closing. Só entra aqui o que é específico da página
   (prefixo .est-), sem tokens nem componentes novos.
   ========================================================================== */

/* Realces em laranja dentro dos títulos: <em> sem itálico, como no hero e na Home. */
.estudantes .section__title em,
.estudantes .hero__headline em { font-style: normal; color: var(--orange); }
.estudantes .section__title { max-width: 20ch; }

/* ---------- Hero: o parágrafo de apoio extra sobre a base da Home ----------
   As regras de hero abaixo (manchete, subtítulo, compactação em telas baixas, foto empilhada no
   tablet) valem também para /programa/, que tem o mesmo volume de texto: por isso o seletor
   :is(.estudantes, .programa). */
.hero__support {
  margin-top: clamp(1rem, 2.2vw, 1.4rem);
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.6;
  color: var(--gray-300);
  max-width: 50ch;
}
/* Nome da página dentro do parágrafo de apoio, no laranja da marca. */
.hero__support-name { color: var(--orange); }
/* Mais texto que o hero da Home: a manchete cede um pouco de escala para o bloco caber sem
   empurrar o CTA para fora da primeira dobra. */
:is(.estudantes, .programa) .hero__headline { font-size: clamp(2.5rem, 5.6vw, 4.6rem); max-width: 15ch; }
:is(.estudantes, .programa) .hero__subheading { font-size: clamp(1.1rem, 1.7vw, 1.35rem); max-width: 36ch; }
@media (min-width: 900px) and (max-height: 900px) {
  /* Um pouco mais de ar acima da eyebrow que na Home (lá o hero é bem mais curto): sem isto ela
     ficava colada no masthead em notebooks de 800-900px de altura. */
  :is(.estudantes, .programa) .hero { padding-top: clamp(1.25rem, 3.5vh, 2.25rem); }
  :is(.estudantes, .programa) .hero__headline { font-size: clamp(2.5rem, 4.8vw, 4rem); }
  :is(.estudantes, .programa) .hero__support { margin-top: 0.8rem; }
}
/* No mobile o texto do hero ocupa a largura toda (o recuo negativo da Home serve a uma frase
   curta; aqui há um parágrafo de apoio logo abaixo). */
@media (max-width: 899px) {
  :is(.estudantes, .programa) .hero__subheading { margin-right: 0; }
}
/* Tablet (700-899px): na Home a foto fica ancorada à direita, atrás de um texto curto. Aqui o texto
   é bem maior e passaria por cima do rosto, então nessa faixa a foto fica ABAIXO do texto, igual ao
   mobile (mesma máscara radial, só limitada em largura para não ficar gigante). */
@media (min-width: 700px) and (max-width: 899px) {
  :is(.estudantes, .programa) .hero__chair {
    position: static;
    width: min(100%, 34rem);
    max-width: none;
    aspect-ratio: 1 / 1;
    margin: clamp(2rem, 6vw, 3rem) auto 0;
    /* Raio um pouco menor que o da Home (62%): com a foto centralizada e mais estreita que a tela,
       o fundo da arte (preto puro) precisa chegar a zero nas 4 bordas para não deixar um retângulo
       mais escuro que o --ink do hero. */
    -webkit-mask-image: radial-gradient(ellipse 54% 54% at 50% 50%, black 66%, transparent 100%);
    mask-image: radial-gradient(ellipse 54% 54% at 50% 50%, black 66%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  :is(.estudantes, .programa) .hero__chair img {
    position: static;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- 01 · A faculdade ensina Marketing ---------- */
.est-faculdade__grid {
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 900px) {
  .est-faculdade__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: start;
  }
}
/* O que a faculdade ensina, em cinza (o conhecido) → "Tudo isso importa." em preto (o peso) →
   a virada em texto corrido. */
.est-keywords {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  line-height: 1.3;
  color: var(--gray-500);
  max-width: 22ch;
}
.est-lead__strong {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.est-lead__text {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--gray-700);
  max-width: 40ch;
}
/* As seis perguntas: linhas tipográficas com fio fino e um marcador quadrado laranja (mesmo
   quadradinho do .closing__mark) — não são cards nem uma sequência numerada. */
.est-questions { border-bottom: 1px solid var(--line-on-light); }
.est-question {
  position: relative;
  padding: clamp(0.95rem, 1.8vw, 1.2rem) 0 clamp(0.95rem, 1.8vw, 1.2rem) 1.75rem;
  border-top: 1px solid var(--line-on-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.65vw, 1.32rem);
  line-height: 1.35;
}
.est-question::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(0.95rem, 1.8vw, 1.2rem) + 0.5em);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--orange);
}
.est-pivot {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--ink);
}
.est-pivot p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 30ch;
}
.est-pivot em { font-style: normal; color: var(--orange); }

/* ---------- 02 · Prepare-se para o mercado (Formação → Primeira oportunidade) ----------
   A progressão é uma escada que ganha peso: cada degrau (--i de 0 a 5) tem o rótulo maior, o
   filete à esquerda mais grosso e um recuo maior — a mesma ideia da cunha da marca (afina na
   faculdade, engrossa no mercado). O último degrau é o único laranja. */
.est-steps { overflow: hidden; }
.est-steps__grid {
  margin-top: clamp(0.25rem, 1vw, 0.5rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 900px) {
  .est-steps__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .est-steps__intro { position: sticky; top: 7rem; }
}
/* O título desta seção é longo (uma frase inteira, ~70 caracteres) e vive numa coluna estreita: um
   degrau abaixo do tamanho padrão de .section__title evita uma pilha de 6 linhas no desktop. */
@media (min-width: 900px) {
  .est-steps .section__title { font-size: clamp(2rem, 3.5vw, 2.9rem); }
}
.est-steps__copy {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  color: var(--gray-300);
  max-width: 42ch;
}
.est-steps__copy .est-steps__pivot {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.35;
  color: var(--paper);
}
.est-steps__axis { max-width: 320px; margin-top: clamp(2rem, 4vw, 2.75rem); }

.est-steps__list { display: flex; flex-direction: column; }
.est-step {
  --i: 0;
  position: relative;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  padding-left: calc(1.25rem + var(--i) * clamp(0.35rem, 1.1vw, 0.9rem));
  border-top: 1px solid var(--line-on-dark);
}
.est-step:last-child { border-bottom: 1px solid var(--line-on-dark); }
.est-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: calc(2px + var(--i) * 2.6px);
  background: var(--gray-500);
}
.est-step__label {
  font-family: var(--font-display);
  font-weight: calc(500 + var(--i) * 60);
  font-size: calc(1.1rem + var(--i) * 0.3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--paper);
}
/* "Primeira oportunidade" é o rótulo mais longo e o de maior corpo: em telas estreitas (320-420px)
   a palavra "oportunidade" ficaria mais larga que a coluna, então a escala cresce menos por
   degrau; overflow-wrap é a rede de segurança para qualquer largura ainda menor. */
.est-step__label { overflow-wrap: break-word; }
@media (max-width: 420px) {
  .est-step__label { font-size: calc(1.05rem + var(--i) * 0.22rem); }
}
.est-step__text {
  margin-top: 0.45rem;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.5;
  color: var(--gray-300);
  max-width: 44ch;
}
.est-step:nth-child(-n+2) .est-step__label { color: var(--gray-300); }
.est-step:nth-child(-n+2) .est-step__text { color: var(--gray-500); }
.est-step:last-child::before { background: var(--orange); }
.est-step:last-child .est-step__label { color: var(--orange); }
.est-step:last-child .est-step__text { color: var(--paper); }

.est-steps__closing {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.est-steps__closing span { display: block; }
.est-steps__closing em { font-style: normal; color: var(--orange); }

/* ---------- 03 · Repertório: as quatro áreas ---------- */
.est-repertorio__lead {
  margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  max-width: 44rem;
}
.est-repertorio__lead p:first-child { font-weight: 700; }
.est-repertorio__lead p + p { margin-top: 0.35rem; color: var(--gray-700); }
/* Quatro áreas numa grade 2×2 de texto puro: fio grosso no topo, sem caixa nem fundo. O link de
   cada uma fica alinhado na base da linha (texto em flex:1). */
.est-areas {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.25rem) clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 700px) {
  .est-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.est-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
  border-top: 2px solid var(--ink);
}
.est-area__tag {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-700);
}
.est-area__name {
  margin-top: 0.75rem;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.12;
  max-width: 20ch;
}
.est-area__text {
  flex: 1;
  margin-top: 0.85rem;
  margin-bottom: 1.4rem;
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  line-height: 1.6;
  color: var(--gray-700);
  max-width: 44ch;
}

/* ---------- 04 · Trilha "Comece por aqui" ---------- */
/* Duas frases: a pergunta numa linha e a chamada em laranja logo abaixo (a segunda é longa e quebra
   em duas linhas balanceadas). */
#trilha .section__title { max-width: 30ch; }
#trilha .section__title em { display: block; }
.est-trail { margin-top: clamp(2rem, 4.5vw, 3rem); }
.est-trail__item { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
/* Cabeçalho do degrau: número laranja (aqui a ordem é real: é uma trilha) + rótulo + fio que
   prolonga o "caminho" até a borda do card. */
.est-trail__step {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.est-trail__num {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--orange);
}
.est-trail__step::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-on-light);
}
/* .lib-grid .resource-card já força height:100%; dentro de um item em coluna o card ocupa o
   que sobra (flex:1) para todos terminarem na mesma altura da linha. */
.est-trail .est-trail__item .resource-card { flex: 1; height: auto; }

/* ---------- 05 · Um atalho de repertório. Não de carreira. ---------- */
.est-atalho { position: relative; overflow: hidden; }
.est-atalho > .container { position: relative; z-index: 1; }
.est-atalho .section__title em { display: block; }
.est-atalho__halftone {
  display: none;
  pointer-events: none;
  color: var(--paper);
  opacity: 0.16;
}
@media (min-width: 900px) {
  .est-atalho__halftone {
    display: block;
    position: absolute;
    top: 34%;
    bottom: 0;
    right: 0;
    width: 44%;
  }
}
.est-atalho__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.25rem);
}
@media (min-width: 900px) {
  .est-atalho__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}
.est-atalho__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  color: var(--gray-300);
  max-width: 46ch;
}
.est-atalho__text .est-atalho__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.3;
  color: var(--paper);
}
/* O destaque: três linhas, cada uma na sua própria linha; a última, com o realce laranja. */
.est-highlight {
  margin-top: clamp(3rem, 7vw, 5rem);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.est-highlight span { display: block; }
.est-highlight span:nth-child(-n+2) { color: var(--gray-300); }
.est-highlight em { font-style: normal; color: var(--orange); }
/* Fecho em fonte de assinatura (a mesma do "Primeiro vem a postura." do encerramento): tom de
   voz pessoal depois do bloco de peso, em vez de um rodapé jurídico. */
.est-close {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-signature);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.25;
  max-width: 30ch;
}
.est-close span { display: block; }
.est-close .dim { color: var(--gray-500); }
.est-close em { color: var(--orange); }

/* ---------- 06 · Comece antes ---------- */
.est-antes__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.25rem);
}
@media (min-width: 900px) {
  .est-antes__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}
.est-antes__grid .section__title { font-size: clamp(2.6rem, 7vw, 5.4rem); }
.est-antes__text {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.25rem);
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  color: var(--gray-700);
  max-width: 40rem;
}
.est-antes__text .est-antes__lines {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
}
.est-antes__text .est-antes__ok {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--orange);
}
.est-antes__text .est-antes__pivot {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--ink);
}
.est-antes__cta { margin-top: clamp(0.5rem, 1.5vw, 1rem); }
.est-antes__micro { font-size: 0.88rem; line-height: 1.5; color: var(--gray-700); max-width: 44ch; }

/* ---------- Encerramento: só o texto de apoio; o resto é o .closing da Home ---------- */
/* A frase-tese é o destaque da página: um degrau acima da assinatura da Home. */
.estudantes .closing__tagline { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.25; }
.est-final__text {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--gray-300);
  max-width: 40ch;
}
/* Cada frase numa linha própria e balanceada (o balance não atravessa <br>: a segunda deixava
   "surgir." sozinha na última linha). */
.est-final__text span { display: block; text-wrap: balance; }
/* Parágrafo de apoio abaixo das duas frases: corpo de texto normal, um degrau menor. */
.est-final__support {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  line-height: 1.6;
  color: var(--gray-300);
  max-width: 46ch;
  text-wrap: pretty;
}

/* ==========================================================================
   /programa/ — apresentação do curso + captação de interessados (src/programa/index.njk)
   Montada com o que o design system já tem: .hero (mesma foto de cadeira, máscara e halftone da
   Home; o tratamento de hero longo é compartilhado com /estudantes/ mais acima), .chapter-head,
   .section--light/--dark/--stone, .texture, .btn, .text-link e o FAQ da Home. Só entra aqui o que é
   específico da página (prefixo .prog-), sem tokens nem componentes novos.
   ========================================================================== */

.programa .section__title { max-width: 22ch; }
/* .btn tem white-space: nowrap; nesta página os rótulos são longos e, em telas de 320-360px, precisam quebrar. */
.programa .btn { white-space: normal; text-align: left; }
.programa .section__title em { font-style: normal; color: var(--orange); }

/* Nota curta abaixo do CTA do hero (estado do programa, vem de _data/programa.js). */
.prog-hero__note {
  margin-top: clamp(1.1rem, 2.4vw, 1.5rem);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gray-500);
  max-width: 44ch;
}
@media (min-width: 900px) and (max-height: 900px) {
  .prog-hero__note { margin-top: 0.9rem; }
}

/* ---------- 01 · Para quem é ---------- */
.prog-profiles {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 700px) {
  .prog-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.prog-profile {
  padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
  border-top: 2px solid var(--ink);
}
.prog-profile__title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.12;
  max-width: 20ch;
}
.prog-profile__text {
  margin-top: 0.85rem;
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  line-height: 1.6;
  color: var(--gray-700);
  max-width: 44ch;
}
.prog-statement {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--ink);
}
.prog-statement__main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 30ch;
}
.prog-statement__main em { font-style: normal; color: var(--orange); }
.prog-statement__aside {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.55;
  color: var(--gray-700);
  max-width: 46ch;
}

/* ---------- 02 · O que a formação trabalha ---------- */
.prog-focus__grid {
  margin-top: clamp(0.25rem, 1vw, 0.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 900px) {
  .prog-focus__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}
.prog-focus__text {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  color: var(--gray-300);
  max-width: 42ch;
}
.prog-focus__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.35;
  color: var(--paper);
}
/* Seis "por quês" como linhas tipográficas com fio fino e o quadradinho laranja da marca — o mesmo
   vocabulário das perguntas de /estudantes/, aqui sobre fundo escuro. */
.prog-why {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--line-on-dark);
}
.prog-why__item {
  position: relative;
  padding: clamp(0.95rem, 1.8vw, 1.2rem) 0 clamp(0.95rem, 1.8vw, 1.2rem) 1.75rem;
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.65vw, 1.32rem);
  line-height: 1.35;
}
.prog-why__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(0.95rem, 1.8vw, 1.2rem) + 0.5em);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--orange);
}
.prog-focus__statement {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 36ch;
}
.prog-focus__statement em { font-style: normal; color: var(--orange); }
/* Assinatura da marca, na mesma fonte de assinatura das demais (closing__tagline em index.njk e
   sobre/index.njk) — plana, sem <em>/laranja: aqui é um fecho, não mais um destaque tipográfico. */
.prog-tagline {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-signature);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  max-width: 32ch;
}

/* ---------- 03 · Os sete módulos ----------
   Lista tipográfica numerada (a ordem é real: é a sequência da formação), sem cards. No desktop:
   número | título | descrição em três colunas; no celular, título e descrição empilhados ao lado
   do número. O último módulo leva o número em laranja. */
.prog-modules {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  border-bottom: 1px solid var(--line-on-light);
}
.prog-module {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 1.75rem);
  row-gap: 0.45rem;
  align-items: baseline;
  padding-block: clamp(1.25rem, 2.6vw, 1.9rem);
  border-top: 1px solid var(--line-on-light);
}
.prog-module__num {
  grid-row: 1 / span 2;
  align-self: start;
  min-width: 2.2ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gray-300);
}
.prog-module:last-child .prog-module__num { color: var(--orange); }
.prog-module__title {
  grid-column: 2;
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  line-height: 1.15;
}
.prog-module__text {
  grid-column: 2;
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  line-height: 1.55;
  color: var(--gray-700);
  max-width: 48ch;
}
@media (min-width: 900px) {
  .prog-module {
    grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
  .prog-module__num { grid-row: 1; align-self: baseline; }
  .prog-module__title { grid-column: 2; }
  .prog-module__text { grid-column: 3; grid-row: 1; }
}
.prog-modules__foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.prog-modules__note {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--gray-700);
  max-width: 52ch;
}

/* ---------- 04 · Avaliação de Prontidão ---------- */
.prog-aval__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 900px) {
  .prog-aval__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}
.prog-aval__text {
  margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--gray-700);
  max-width: 46ch;
}
.prog-aval__cta { margin-top: clamp(1.5rem, 3vw, 2rem); }
.prog-aval__aside {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--gray-700);
  max-width: 44ch;
}
.prog-aval__dims-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-700);
}
.prog-dims {
  margin-top: 0.9rem;
  display: grid;
  border-top: 2px solid var(--ink);
}
@media (min-width: 520px) {
  .prog-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
.prog-dims__item {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-bottom: 1px solid var(--line-on-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.3;
}
.prog-dims__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.85rem + 0.45em);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--orange);
}

/* ---------- 05 · Formulário de interesse ---------- */
.prog-interest__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 900px) {
  .prog-interest__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}
.prog-interest__text {
  margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--gray-300);
  max-width: 44ch;
}
/* Nota de letra miúda, não mais um segundo destaque — mesmo tratamento de .prog-aval__aside
   (seção 04, fundo claro), só que em --gray-300 em vez de --gray-700: a versão do texto secundário
   para fundo escuro, igual à já usada por .prog-interest__text/.prog-form__success-text nesta
   mesma seção. 44ch (não mais 38ch) porque agora é um parágrafo de 3 frases, não uma linha curta. */
.prog-interest__aside {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--gray-300);
  max-width: 44ch;
}
.prog-form {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--line-on-dark);
  background: rgba(247, 246, 243, 0.03);
}
.prog-form__form { display: flex; flex-direction: column; gap: 1.1rem; }
.prog-form__form[hidden],
.prog-form__success[hidden],
.prog-form__error[hidden],
.prog-form__status[hidden] { display: none; }
.prog-form__field { display: flex; flex-direction: column; gap: 0.45rem; }
.prog-form__field label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-300);
}
.prog-form__field input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 0.8em 0.95em;
  border: 2px solid transparent;
  border-radius: 3px;
  background: var(--paper);
}
.prog-form__field input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.prog-form__field input[aria-invalid="true"] { border-color: var(--orange); }
.prog-form__error,
.prog-form__status {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--orange);
}
.prog-form__disclaimer {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--gray-300);
}
.prog-form__submit { justify-content: center; width: 100%; text-align: center; }
/* Celular: painel e botão um pouco mais compactos para o rótulo caber em uma linha (375-414px);
   abaixo disso ele quebra em duas linhas em vez de estourar. */
@media (max-width: 420px) {
  .prog-form { padding: 1.1rem; }
  .prog-form__submit { font-size: 0.9rem; padding-inline: 1em; }
}
.prog-form__submit[disabled] { opacity: 0.6; cursor: progress; }
.prog-form__submit[disabled]::after { content: none; }
/* Armadilha para robôs: fora da tela, sem ocupar espaço nem entrar na ordem de tabulação. */
.prog-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.prog-form__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.prog-form__success:focus { outline: none; }
.prog-form__success-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; }
.prog-form__success-text { color: var(--gray-300); line-height: 1.6; max-width: 44ch; }
.prog-form__success-next { color: var(--gray-300); line-height: 1.6; max-width: 44ch; }
.prog-form__success-next .text-link { color: var(--paper); }