/* ARTIGOS: leitura longa no sistema da marca (brand/marca.css), direção
   "revista" aprovada pelo Gui em 28/10/2026. Papel quente e tinta preta, ou
   papel queimado no modo escuro; cor em bloco cheio para as frases que
   importam; Bricolage no título, Figtree no texto, o raio do logo como marca.

   Este arquivo só desenha a leitura: coluna de 660 px, blocos largos que
   crescem para a direita a partir da mesma margem, capa com a foto girada
   sobre o bloco laranja, as peças de cada artigo e a vitrine. Cores e letras
   vêm da marca. */

:root {
  --wrap: 1240px;
  --col: 660px;
  --largo: 940px;
  /* Quanto o bloco largo passa da coluna de leitura. */
  --recuo: 140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 18px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
strong { font-weight: inherit; }
[hidden] { display: none !important; }

.wrap { width: var(--gz-largura); margin-inline: auto; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; z-index: 60; top: 12px; left: 12px; padding: 12px 18px;
  border-radius: 12px; background: var(--accent); color: var(--ink);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Quebras feitas à mão valem só na largura para a qual foram medidas. */
br.m { display: none; }

.kicker {
  font-size: 11px; font-weight: 500; line-height: 1.6;
  letter-spacing: .13em; text-transform: uppercase; color: var(--label);
}

/* Faixa das páginas de prévia, que ainda não foram publicadas. */
.previa-aviso { padding: 9px 20px; background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 500; text-align: center; }

/* ---------- Topo ---------- */
.topbar {
  display: flex; align-items: center; gap: 26px; min-height: 102px;
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 30px; line-height: 1; }
.byline { font-size: 17px; color: var(--body); white-space: nowrap; }
.byline strong { font-weight: 500; color: var(--text); }
.topbar nav { display: flex; gap: 24px; margin-left: auto; font-size: 14px; }
.topbar nav a, .byline { transition: color .18s; }
.topbar nav a:hover, .byline:hover, .byline:hover strong { color: var(--accent); }

/* Barra de leitura: só aparece quando o script liga. */
.progresso { position: fixed; z-index: 50; inset: 0 0 auto; height: 3px; pointer-events: none; }
.progresso span {
  display: block; height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}

/* ---------- Capa do artigo ---------- */
.capa {
  position: relative; display: grid; grid-template-columns: 52% 48%;
  min-height: 640px; margin-top: 36px; overflow: hidden;
  border-radius: 22px; background: #0a1311; box-shadow: 0 0 0 1px var(--line);
}
.capa-foto { position: relative; grid-column: 1 / -1; grid-row: 1; min-height: 640px; }
.capa-foto img {
  /* No computador a foto já vem fundida ao painel (capa-painel), com a sombra
     da direita livre para o título. Fundir por máscara riscava o degradê. */
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center;
}
.capa-texto {
  position: relative; grid-column: 2; grid-row: 1; align-self: center;
  padding: 56px 40px 56px 0;
}
.capa h1 {
  margin: 22px 0 34px;
  font-size: clamp(38px, 3.62vw, 52px); font-weight: 400; line-height: 1.07; letter-spacing: -.035em;
}
.capa h1 span { display: block; white-space: nowrap; }
.capa h1 .pergunta { color: var(--accent); }
.assinatura { display: flex; align-items: center; gap: 14px; }
.assinatura img { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.assinatura p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.assinatura strong { display: block; font-size: 16px; font-weight: 500; color: var(--text); }
.credito { font-size: 12px; line-height: 1.5; color: var(--muted); }
.capa .credito {
  position: absolute; z-index: 1; left: 18px; bottom: 14px; padding: 3px 10px; border-radius: 999px;
  background: rgb(8 14 14 / 58%); color: #e4f1f1;
}

/* ---------- Texto ---------- */
.texto { width: var(--gz-largura); margin-inline: auto; padding-top: 84px; }
.texto > * { max-width: var(--col); margin-inline: auto; }
.texto > .largo { max-width: var(--largo); }
.texto > .cheio { max-width: none; }
.texto > p {
  margin-bottom: 1.15em;
  font-size: 19px; line-height: 1.72; color: var(--body); text-wrap: pretty;
}
.texto > p a, .inspiracao a, .publicacao figcaption a {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.texto > p a:hover, .inspiracao a:hover, .publicacao figcaption a:hover { color: #fff; }
.texto > h2 {
  margin-top: 104px; margin-bottom: 26px;
  font-size: clamp(28px, 3vw, 36px); font-weight: 450; line-height: 1.14; letter-spacing: -.03em;
  text-wrap: balance;
}
.texto > h2:first-child { margin-top: 0; }
.texto > .respiro { margin-top: 72px; }
.texto > hr { width: 56px; height: 1px; margin-block: 88px 56px; border: 0; background: var(--line-2); }

/* As três frases que o autor destacou no texto. */
.texto > .tese {
  margin-block: 64px;
  font-size: clamp(28px, 3.5vw, 44px); line-height: 1.14; letter-spacing: -.03em;
  color: var(--text); text-wrap: balance;
}
.tese strong { font-weight: 400; }
.texto > .tese.maior {
  margin-block: 72px; color: var(--accent);
  font-size: clamp(34px, 5vw, 62px); line-height: 1.06; letter-spacing: -.035em;
}

/* A pergunta da cena: sai do escuro, acima da porta. */
.porta { position: relative; margin-block: 44px 52px; }
.porta img { width: 100%; border-radius: 22px; }
.porta blockquote {
  position: absolute; inset: 44px 40px auto;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.03em; color: var(--text);
}
.porta figcaption { margin-top: 12px; }

/* A abertura em primeira pessoa e as frases curtas que fecham um raciocínio. */
.texto > .abre {
  margin-bottom: 30px;
  font-size: clamp(27px, 3.3vw, 40px); line-height: 1.14; letter-spacing: -.03em; color: var(--text);
  text-wrap: balance;
}
.texto > .firme { color: var(--text); font-weight: 500; }

/* As três eras: cada uma entra por cima da anterior, sem apagar a de baixo. */
.eras { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: 40px 48px; }
.eras ol { display: contents; }
.eras li {
  display: flex; flex-direction: column; justify-content: center; min-height: 104px; padding: 18px 26px 20px;
  border: 1px solid var(--line-2); background: var(--surface);
}
.eras li:nth-child(1) { grid-area: 3 / 1 / 4 / 4; border-radius: 16px 0 16px 16px; }
.eras li:nth-child(2) { grid-area: 2 / 2 / 3 / 4; border-bottom: 0; border-radius: 16px 0 0 0; }
.eras li:nth-child(3) {
  grid-area: 1 / 3 / 2 / 4; border-color: var(--accent); border-radius: 16px 16px 0 0;
  background: var(--accent); color: var(--ink);
}
.eras li:nth-child(3) .kicker { color: #2a5560; }
.eras li:nth-child(3) p { color: #1f4650; }
.eras h3 { margin: 4px 0 2px; font-size: 25px; font-weight: 450; line-height: 1.16; letter-spacing: -.025em; }
.eras li p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.eras-nota {
  grid-area: 1 / 1 / 2 / 3; align-self: center; padding-right: 40px;
  font-size: 21px; line-height: 1.36; letter-spacing: -.012em; color: var(--text); text-wrap: balance;
}

/* A imagem da Era da Imaginação, com a sigla trocada escrita na parede:
   o nome de todo mundo riscado, o do autor por baixo. */
.imagina { position: relative; margin-block: 40px 48px; }
.imagina img { width: 100%; border-radius: 22px; }
/* A parede escurece à direita: um véu claro no alto segura o contraste da frase. */
.imagina::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 34%; border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgb(244 239 240 / 88%), rgb(244 239 240 / 0%));
}
.imagina .sigla { position: absolute; inset: 34px 36px auto; color: #14292e; }
.sigla-de { font-size: clamp(13px, 3.6vw, 20px); line-height: 1.35; color: #3b4f55; }
.sigla-de s { text-decoration-thickness: 2px; text-decoration-color: #14292e; }
.sigla-para {
  margin-top: 4px; white-space: nowrap;
  font-size: clamp(20px, 7vw, 57px); line-height: 1.04; letter-spacing: -.04em; color: #14292e;
}
.sigla-para b { font-weight: inherit; color: #0f6f7f; }
.imagina figcaption { margin-top: 12px; text-wrap: pretty; }

/* Três cargos, cada um na sua caixa. A linha passa por todas. */
.cargos {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-block: 48px 44px;
}
.cargos p {
  padding: 24px 26px 64px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface);
  font-size: clamp(22px, 2.5vw, 30px); font-weight: 450; line-height: 1.16; letter-spacing: -.025em;
}
.cargos p span { font-weight: 400; color: var(--muted); }
/* Alguém sai da primeira caixa e segue em linha reta até a terceira. */
.travessia { position: absolute; left: 30px; right: 30px; bottom: 30px; height: 2px; background: var(--accent); }
.alguem {
  position: absolute; left: 46px; bottom: 39px;
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .01em; color: var(--accent);
}
.travessia::before {
  content: ''; position: absolute; left: -6px; top: -5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgb(197 229 235 / 16%);
}
.travessia::after {
  content: ''; position: absolute; right: 1px; top: -5px; width: 12px; height: 12px;
  border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg);
}
/* Sem script a linha já está desenhada; com ele, fica só o ponto de partida
   até o leitor chegar à frase de quem atravessa as fronteiras. */
.anima .travessia { clip-path: inset(-20px calc(100% - 10px) -20px -20px); }
.anima .travessia.on { clip-path: inset(-20px -20px -20px -20px); transition: clip-path 1.4s var(--sai); }

/* A publicação e, ao lado, os cinco perfis na tradução livre do autor. */
.publicacao {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px 48px; align-items: start;
  margin-block: 56px;
}
.texto > .publicacao.compacta {
  grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 14px 38px; margin-block: 44px;
}
.compacta .print { grid-area: 1 / 1; border-radius: 12px; }
.compacta .traducao { grid-area: 1 / 2 / 3 / 3; padding-top: 0; }
.publicacao.compacta figcaption { grid-area: 2 / 1; }
.compacta .perfis { margin-top: 16px; }
.compacta .perfis li { padding-bottom: 16px; }
.compacta .perfis h3 { font-size: 21px; }
.compacta .perfis p { font-size: 15px; }
.print {
  display: block; overflow: hidden; border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px -18px #000c;
  cursor: zoom-in; transition: transform .35s var(--sai);
}
.print:hover { transform: translateY(-3px); }
.print img { width: 100%; }
.traducao { padding-top: 6px; }
.perfis { margin-top: 22px; }
.perfis li { position: relative; padding: 0 0 24px 34px; }
.perfis li:last-child { padding-bottom: 0; }
.perfis li::before {
  content: ''; position: absolute; top: 12px; bottom: -12px; left: 5px; width: 1px; background: var(--line-2);
}
.perfis li:last-child::before { display: none; }
.perfis li::after {
  content: ''; position: absolute; top: 9px; left: 0; width: 11px; height: 11px;
  border-radius: 50%; background: var(--accent);
}
.perfis .n { margin-right: 10px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); }
.perfis h3 { display: inline; font-size: 24px; font-weight: 450; line-height: 1.2; letter-spacing: -.025em; }
.perfis p { margin-top: 5px; font-size: 16px; line-height: 1.5; color: var(--body); }
.publicacao figcaption, .texto > .nota { font-size: 14px; line-height: 1.6; color: var(--muted); }
.publicacao figcaption { grid-column: 1 / -1; }

/* Cinco perguntas e um espaço para o nome que veio à cabeça. */
.texto > .nota { margin-bottom: 18px; }
.perguntas { margin-block: 0 44px; }
.perguntas li {
  display: grid; grid-template-columns: var(--recuo) minmax(0, 1fr) 232px; align-items: baseline;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.perguntas li:last-child { border-bottom: 1px solid var(--line); }
.perguntas .n {
  padding-right: 22px; text-align: right;
  font-size: 22px; line-height: 1.32; font-variant-numeric: tabular-nums; color: var(--muted);
}
.perguntas p {
  padding-right: 36px;
  font-size: 22px; line-height: 1.32; letter-spacing: -.015em; color: var(--text); text-wrap: pretty;
}
.perguntas input {
  width: 100%; padding: 6px 0 9px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
  background: transparent; font-size: 17px; color: var(--accent);
}
.perguntas input::placeholder { color: var(--muted); opacity: 1; }
.perguntas input:hover { border-bottom-color: var(--muted); }
.perguntas input:focus-visible { outline: 0; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }

/* O que a pessoa faz e o que volta para ela. */
.depara { margin-block: 52px; }
.depara-cabeca, .depara-linha { display: grid; grid-template-columns: minmax(0, 5fr) 72px minmax(0, 6fr); }
.depara-cabeca { padding-bottom: 14px; }
.depara-cabeca .kicker:last-child { grid-column: 3; }
.depara-linha { align-items: center; padding: 26px 0; border-top: 1px solid var(--line); }
.depara-linha:last-child { border-bottom: 1px solid var(--line); }
.depara-linha p { font-size: 21px; line-height: 1.36; letter-spacing: -.012em; color: var(--text); text-wrap: pretty; }
.depara-linha p + .seta + p { color: var(--muted); }
.seta { font-size: 22px; line-height: 1; color: var(--accent); text-align: center; }

.fala {
  margin-block: 44px 20px;
  font-size: clamp(24px, 2.8vw, 32px); line-height: 1.24; letter-spacing: -.022em; color: var(--muted);
  text-wrap: balance;
}
.texto > .calma {
  margin-bottom: 44px;
  font-size: clamp(72px, 10vw, 96px); line-height: 1; letter-spacing: -.04em; color: var(--accent);
}

/* O exercício: quatro passos, com o número na margem. */
.passos { counter-reset: passo; margin-block: 8px 44px; }
.passos > li {
  counter-increment: passo;
  display: grid; grid-template-columns: var(--recuo) minmax(0, var(--col));
  padding: 26px 0; border-top: 1px solid var(--line);
}
.passos > li:last-child { border-bottom: 1px solid var(--line); }
.passos > li::before {
  content: counter(passo, decimal-leading-zero);
  font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.passos h3 { font-size: 23px; font-weight: 450; line-height: 1.28; letter-spacing: -.02em; text-wrap: pretty; }
.quem { margin-top: 12px; }
.quem li { position: relative; padding-left: 22px; font-size: 18px; line-height: 1.65; color: var(--body); }
.quem li::before { content: ''; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.passos p { margin-top: 10px; font-size: 18px; line-height: 1.65; color: var(--body); text-wrap: pretty; }

/* Três jeitos de responder "o que você faz?". */
.respostas { margin-block: 40px 44px; }
.respostas li {
  padding: 20px 0; border-top: 1px solid var(--line);
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.22; letter-spacing: -.025em; color: var(--text);
  text-wrap: balance;
}
.respostas li:last-child { border-bottom: 1px solid var(--line); }

/* ---------- Peças do artigo da Era da Imaginação ---------- */
/* Capa com a foto em violeta: o painel fica no preto da própria foto. */
.capa.noite { background: #07080d; }

/* A definição do conceito, como verbete. */
.definicao {
  margin-block: 56px 64px; padding: 34px 38px 30px;
  border: 1px solid var(--accent); border-radius: 22px; background: var(--surface);
}
.definicao dfn {
  display: block; margin: 10px 0 16px; font-style: normal;
  font-size: clamp(32px, 4.4vw, 50px); font-weight: 450; line-height: 1.04; letter-spacing: -.035em; color: var(--accent);
}
.definicao dfn small { margin-left: 12px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted); font-style: italic; }
.definicao p { font-size: 20px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.definicao .autoria { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--muted); }

/* Foto que ocupa o bloco largo, com legenda embaixo. */
.foto { margin-block: 44px 52px; }
.foto img { width: 100%; border-radius: 22px; }
.foto figcaption { margin-top: 12px; text-wrap: pretty; }

/* Duas imagens lado a lado: a ficção e o produto. */
.duo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.duo figure { position: relative; overflow: hidden; border-radius: 18px; }
.duo img { width: 100%; height: 100%; object-fit: cover; }
.duo .ano {
  position: absolute; left: 14px; bottom: 12px; padding: 4px 12px; border-radius: 999px;
  background: rgb(8 12 14 / 72%); font-size: 14px; font-weight: 500; color: var(--text);
}
.duo + figcaption { margin-top: 12px; }
.depara-linha.agora p, .depara-linha.agora p + .seta + p { color: var(--accent); }
.depara-linha.agora .kicker { color: var(--accent); }

/* Imagem pequena com o texto ao lado. */
.lado { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; margin-block: 36px 40px; }
.lado img { width: 100%; border-radius: 16px; box-shadow: 0 0 0 1px var(--line-2); }
.lado figcaption { margin-top: 10px; }
.lado .lado-texto p { margin-bottom: 1em; font-size: 19px; line-height: 1.68; color: var(--body); text-wrap: pretty; }
.lado .lado-texto p:last-child { margin-bottom: 0; }
.lado a, .definicao a, .vocabulario a, .citar a, .ciclo a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Vídeo do YouTube em 16:9. */
.video { margin-block: 36px 48px; }
.video .tela { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000; box-shadow: 0 0 0 1px var(--line-2); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.video figcaption a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* O ciclo da imaginação: três movimentos e a volta para o começo. */
.ciclo { margin-block: 44px 52px; }
.ciclo ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: ciclo; }
.ciclo li {
  counter-increment: ciclo; position: relative; display: flex; flex-direction: column;
  padding: 24px 24px 22px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface);
}
.ciclo li::before {
  content: counter(ciclo, decimal-leading-zero);
  font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--muted);
}
.ciclo h3 { margin: 18px 0 10px; font-size: 23px; font-weight: 450; line-height: 1.18; letter-spacing: -.022em; }
.ciclo p { font-size: 16px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.ciclo .quem-faz {
  align-self: flex-start; margin-top: auto; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--text);
}
.ciclo p + .quem-faz { margin-top: 18px; }
.ciclo li.ampliado { border-color: var(--accent); }
.ciclo li.ampliado::before { color: var(--accent); }
.ciclo li.ampliado .quem-faz { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.ciclo .volta {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 22px;
  border: 1px dashed var(--line-2); border-radius: 999px; font-size: 16px; color: var(--muted);
}
.ciclo .volta strong { font-weight: 500; color: var(--accent); }
.ciclo .volta span[aria-hidden] { font-size: 22px; line-height: 1; color: var(--accent); }

/* O vocabulário do conceito, termo e sentido. */
.vocabulario { margin-block: 32px 44px; }
.vocabulario div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px 40px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.vocabulario div:last-child { border-bottom: 1px solid var(--line); }
.vocabulario dt { font-size: 23px; font-weight: 450; line-height: 1.22; letter-spacing: -.022em; color: var(--text); text-wrap: balance; }
.vocabulario dd { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); text-wrap: pretty; }

/* Depois do artigo: a palestra e o jeito de citar. */
.palestra-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
  margin-bottom: 36px; padding: 26px 28px; border: 1px solid var(--accent); border-radius: 22px;
  background: linear-gradient(135deg, #1b2a2e, #141a1f);
}
.palestra-cta p { flex: 1 1 280px; font-size: 19px; line-height: 1.45; letter-spacing: -.012em; color: var(--text); }
.citar { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--line-2); border-radius: 16px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.citar .kicker { display: block; margin-bottom: 6px; }
.citar cite { font-style: normal; color: var(--body); }

/* ---------- Fecho ---------- */
.fecho { padding-block: 40px 96px; }
.fecho p {
  max-width: var(--largo); margin-inline: auto;
  font-size: clamp(32px, 4.6vw, 58px); line-height: 1.07; letter-spacing: -.035em; text-wrap: balance;
}
.fecho em { font-style: normal; color: var(--accent); }

.depois { width: min(var(--col), calc(100% - 80px)); margin-inline: auto; }
.inspiracao { text-wrap: pretty; padding-top: 28px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.7; color: var(--muted); }
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; }
.compartilhar .kicker { margin-right: 8px; }
.compartilhar .button { min-height: 42px; padding: 9px 18px; font-size: 14px; }
.copiado { flex-basis: 100%; min-height: 1.6em; font-size: 14px; color: #c5e5d8; }
.autor {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start;
  margin-top: 44px; padding: 28px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--surface);
}
.autor img { width: 72px; height: 72px; border-radius: 50%; }
.autor h2 { font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.autor p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--body); }
.autor nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 15px; color: var(--accent); }
.autor nav a:hover { color: #fff; }

/* ---------- Continue explorando (igual aos tutoriais) ---------- */
.continue { padding-block: 112px 96px; }
.continue > h2 {
  margin-top: 20px;
  font-size: clamp(42px, 5.6vw, 66px); font-weight: 400; line-height: 1.06; letter-spacing: -.035em;
}
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 48px; }
.cta-grid article {
  display: flex; flex-direction: column; align-items: flex-start; padding: 36px;
  border: 1px solid var(--line); border-radius: 22px;
}
.cta-grid h3 { margin: 30px 0 22px; font-size: 43px; font-weight: 400; line-height: 1.15; letter-spacing: -.035em; }
.cta-grid p { max-width: 40ch; margin-bottom: 34px; font-size: 17px; line-height: 1.5; color: #bcc7cd; }
.cta-grid .button { margin-top: auto; }
.newsletter-cta > .kicker { display: flex; align-items: center; min-height: 32px; }
.newsletter-cta { background: linear-gradient(135deg, #233330, #182227); border-color: #42594d !important; }
.antihype-cta { background: var(--surface); border-top: 2px solid #f97316 !important; }
.anti-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.anti-top img { width: 32px; height: 32px; }
.anti-brand {
  display: flex; align-items: center; gap: 10px; margin-top: 28px;
  font: 900 29px/1 Arial, sans-serif; letter-spacing: -1px;
}
.anti-brand img { width: 46px; height: 46px; }
.anti-brand > span { white-space: nowrap; }
.anti-brand sup { margin-left: 3px; font-size: 10px; vertical-align: super; }
.anti-slash { color: #f97316; }
.cta-grid .antihype-cta h3 { margin: 24px 0 17px; font-size: 32px; }

.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding-block: 30px 40px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.footer .brand { font-size: 27px; color: var(--text); }
.footer a:hover { color: var(--accent); }

/* ---------- Ampliar o print ---------- */
.zoom {
  width: min(1182px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  border: 1px solid #35434d; border-radius: 22px; background: #000; color: var(--text);
  box-shadow: 0 20px 70px #0009;
}
.zoom::backdrop { background: rgb(5 9 12 / 86%); }
.zoom img { width: 100%; }
.zoom button {
  position: sticky; top: 14px; float: right; z-index: 1; width: 42px; height: 42px; margin: 14px 14px -56px 0;
  border: 1px solid #35434d; border-radius: 50%; background: var(--surface); font-size: 22px; line-height: 1;
}
.zoom button:hover { background: #23353d; color: var(--accent); }

/* ---------- Vitrine de artigos ---------- */
.intro { max-width: 960px; padding: 88px 0 56px; }
.intro h1 {
  margin: 24px 0 28px;
  font-size: clamp(46px, 6.5vw, 88px); font-weight: 400; line-height: 1.04; letter-spacing: -.035em;
}
.intro .lead { max-width: 620px; font-size: 21px; line-height: 1.6; color: #bcc7cd; }
.destaque {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden;
  border: 1px solid #39454f; border-radius: 24px; background: var(--surface); box-shadow: 0 16px 40px #0002;
}
.destaque-capa { display: block; overflow: hidden; border-right: 1px solid #39454f; }
.destaque-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sai); }
.destaque:hover .destaque-capa img { transform: scale(1.025); }
.destaque-corpo { display: flex; flex-direction: column; padding: 36px; }
.destaque-corpo .kicker { color: var(--accent); }
.destaque-corpo h2 {
  margin: 18px 0 18px;
  font-size: clamp(27px, 2.7vw, 36px); font-weight: 450; line-height: 1.14; letter-spacing: -.03em; text-wrap: balance;
}
.destaque-corpo h2 a:hover { color: var(--accent); }
.destaque-corpo > p:not(.kicker) { margin-bottom: 28px; font-size: 17px; line-height: 1.6; color: #d1dde3; text-wrap: pretty; }
.destaque-link {
  display: flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 20px;
  border-top: 1px solid #39454f; font-size: 17px; font-weight: 500; color: var(--accent);
}
.destaque-link:hover { color: #fff; }
.proximos { margin-top: 20px; font-size: 14px; color: var(--muted); }
.closing {
  display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center;
  margin-block: 64px 0; padding: clamp(28px, 4vw, 56px);
  border: 1px solid #36414a; border-radius: 22px; background: var(--surface);
}
.closing h2 { font-size: 40px; font-weight: 400; line-height: 1.15; letter-spacing: -.035em; }
.closing p { max-width: 40ch; margin-bottom: 18px; color: #d5e5eb; }
.vitrine .footer { margin-top: 64px; }

/* ---------- Telas menores ---------- */
@media (max-width: 1040px) {
  /* Sem margem para o recuo: os blocos largos voltam para a coluna. */
  .perguntas li { grid-template-columns: 34px minmax(0, 1fr) 220px; }
  .perguntas .n { padding-right: 0; text-align: left; }
  .publicacao { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .publicacao figcaption { order: 2; margin-top: -14px; }
  .traducao { order: 3; padding-top: 0; }
  .passos > li { grid-template-columns: 72px minmax(0, 1fr); }
  .texto > .tese, .texto > .perguntas, .texto > .passos, .texto > .respostas, .texto > .publicacao, .texto > .fala, .texto > .calma { max-width: var(--col); }
  .ciclo ol { grid-template-columns: 1fr; }
  .ciclo li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; }
  .ciclo li::before { grid-row: 1 / 4; }
  .ciclo h3 { margin-top: 0; }
  .ciclo .quem-faz { grid-column: 2; justify-self: start; }
  .texto > .publicacao.compacta { grid-template-columns: 200px minmax(0, 1fr); gap: 14px 30px; }
  .compacta figcaption { margin-top: 0; }
  br.d { display: none; }
}

@media (max-width: 1000px) {
  .topbar { gap: 18px; }
  .topbar nav { gap: 16px; font-size: 12px; }
  .capa { display: block; min-height: 0; background: var(--bg); box-shadow: none; border-radius: 0; overflow: visible; }
  .capa-foto { min-height: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; }
  .capa-foto picture { display: block; height: 100%; }
  .capa-foto img { position: static; object-position: 42% 20%; }
  .capa-texto { padding: 34px 0 0; }
  .capa h1 { font-size: clamp(27px, 8.4vw, 60px); margin: 16px 0 28px; }
  .capa .credito { left: 12px; bottom: 12px; }
  .cta-grid h3 { font-size: 35px; }
  .destaque { grid-template-columns: 1fr; }
  .destaque-capa { border-right: 0; border-bottom: 1px solid #39454f; }
}

@media (max-width: 700px) {
  .wrap, .texto, .depois { width: calc(100% - 40px); }
  br.m { display: inline; }
  .topbar { display: grid; grid-template-columns: 1fr auto; gap: 14px; min-height: 106px; padding-block: 16px; }
  .brand { font-size: 28px; }
  .byline { font-size: 15px; }
  .topbar nav { grid-column: 1 / -1; width: 100%; margin: 0; justify-content: space-between; }
  .capa { margin-top: 20px; }
  .capa-foto { aspect-ratio: 4 / 5; border-radius: 18px; }
  .capa-foto img { object-position: 43% 20%; }
  .texto { padding-top: 60px; }
  .texto > p { font-size: 18px; line-height: 1.7; }
  .texto > h2 { margin-top: 76px; margin-bottom: 22px; }
  .texto > .tese { margin-block: 48px; }
  .texto > .tese.maior { margin-block: 56px; }
  .porta blockquote { inset: 26px 22px auto; }
  .porta img { border-radius: 18px; }
  .eras { grid-template-columns: 1fr; margin-block: 32px 40px; }
  .eras li { min-height: 0; padding: 16px 20px 18px; }
  .eras li:nth-child(1) { grid-area: 4 / 1; border-radius: 0 0 16px 16px; }
  .eras li:nth-child(2) { grid-area: 3 / 1; border-radius: 0; }
  .eras li:nth-child(3) { grid-area: 2 / 1; border-radius: 16px 16px 0 0; }
  .eras-nota { grid-area: 1 / 1; padding: 0 0 20px; font-size: 20px; }
  .eras h3 { font-size: 23px; }
  .imagina .sigla { inset: 20px 20px auto; }
  .imagina img { border-radius: 18px; }
  .imagina::before { border-radius: 18px 18px 0 0; }
  .texto > .publicacao.compacta { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 22px; }
  .compacta .print, .compacta .traducao, .publicacao.compacta figcaption { grid-area: auto; }
  .compacta figcaption { order: 2; margin-top: -10px; }
  .compacta .traducao { order: 3; }
  .cargos { grid-template-columns: 1fr; gap: 12px; margin-inline: 0; }
  .cargos p { padding: 16px 20px 18px; font-size: 23px; }
  .travessia { left: auto; right: 56px; top: 28px; bottom: 24px; width: 2px; height: auto; }
  .alguem { left: auto; right: 72px; top: 22px; bottom: auto; }
  .travessia::before { left: -5px; top: -6px; }
  .travessia::after { right: -5px; top: auto; bottom: 1px; transform: rotate(135deg); }
  .anima .travessia { clip-path: inset(-20px -20px calc(100% - 10px) -20px); }
  .perguntas li { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; padding: 22px 0; }
  .perguntas .n { font-size: 21px; }
  .perguntas p { padding-right: 0; font-size: 21px; }
  .perguntas label { grid-column: 2; }
  .perguntas input { font-size: 17px; }
  .depara-cabeca { display: none; }
  .depara-linha { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .depara-linha p { font-size: 20px; }
  .seta { text-align: left; transform: rotate(90deg); transform-origin: 11px 11px; width: 22px; }
  .passos > li { grid-template-columns: 54px minmax(0, 1fr); }
  .passos > li::before { font-size: 30px; }
  .passos h3 { font-size: 21px; }
  .passos p, .quem li { font-size: 17px; }
  .texto > hr { margin-block: 64px 44px; }
  .fecho { padding-block: 24px 72px; }
  .autor { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 22px; border-radius: 18px; }
  .autor img { width: 56px; height: 56px; }
  .continue { padding-block: 76px 60px; }
  .cta-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 34px; }
  .cta-grid article { padding: 28px 24px; }
  .cta-grid h3 { font-size: 36px; }
  .cta-grid p { font-size: 16px; }
  .cta-grid .button { width: 100%; }
  .footer { flex-wrap: wrap; gap: 20px; font-size: 12px; }
  .footer > span { order: 3; flex-basis: 100%; }
  .intro { padding: 54px 0 40px; }
  .intro h1 { font-size: clamp(36px, 10.8vw, 60px); }
  .intro .lead { font-size: 18px; }
  .destaque-corpo { padding: 24px 20px; }
  .closing { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; border-radius: 18px; }
  .closing h2 { font-size: 32px; }
  .definicao { padding: 26px 22px 22px; border-radius: 18px; }
  .definicao dfn small { display: block; margin: 6px 0 0; }
  .definicao p { font-size: 18px; }
  .foto img { border-radius: 18px; }
  .duo { grid-template-columns: 1fr; }
  .lado { grid-template-columns: 1fr; gap: 20px; }
  .lado > div:first-child { max-width: 240px; }
  .lado .lado-texto p { font-size: 18px; line-height: 1.7; }
  .ciclo ol { grid-template-columns: 1fr; }
  .ciclo .volta { border-radius: 18px; }
  .vocabulario div { grid-template-columns: 1fr; padding: 20px 0; }
  .vocabulario dt { font-size: 21px; }
  .palestra-cta { padding: 22px 20px; border-radius: 18px; }
  .palestra-cta .button { width: 100%; }
}

/* Telas de 320 px: a letra grande cede para as palavras presas caberem. */
@media (max-width: 340px) {
  .texto > h2 { font-size: 24px; }
  .perguntas p { font-size: 19px; }
  .fecho p { font-size: 28px; }
  .continue > h2 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anima .travessia, .anima .travessia.on { clip-path: none; transition: none; }
  .print > a, .destaque-capa img { transition: none; }
}

@media print {
  .topbar nav, .progresso, .compartilhar, .continue, .skip, .nota, .perguntas label { display: none; }
  body { background: #fff; color: #000; }
  .texto > p, .passos p, .perfis p { color: #222; }
}

/* ========== Peças da vitrine ========== */

.seta .ic { width: 26px; height: 26px; }
.volta .ic { width: 22px; height: 22px; color: var(--accent); }


/* Segundo artigo na vitrine: cartão horizontal abaixo do destaque. */
.lista { display: grid; gap: 20px; margin-top: 20px; }
.item {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: center;
  padding: 18px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--surface);
}
.item-capa { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 14px; }
.item-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sai); }
.item:hover .item-capa img { transform: scale(1.04); }
.item h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 450; line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; }
.item h3 a:hover { color: var(--accent); }
.item .meta { margin-top: 10px; font-size: 13px; color: var(--muted); }
.item p:not(.meta) { margin-top: 12px; max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--body); }
@media (max-width: 760px) {
  .item { grid-template-columns: 1fr; gap: 18px; }
}

/* Destaque da vitrine: a foto acompanha a altura do texto, sem sobrar vão. */
.destaque { min-height: 460px; }
.destaque-capa { position: relative; }
.destaque-capa img { position: absolute; inset: 0; }
.destaque-corpo { justify-content: center; }
.destaque-link { margin-top: 28px; }
@media (max-width: 1000px) {
  .destaque { min-height: 0; }
  .destaque-capa { aspect-ratio: 4 / 3; }
}

.lista + .secao, .destaque + .secao { margin-top: 64px; }
.lista { margin-top: 0; }
/* O título do artigo em destaque desce para h3 (a seção é o h2) e mantém o desenho. */
.destaque-corpo h3 {
  margin: 18px 0; font-size: clamp(27px, 2.7vw, 36px); font-weight: 450; line-height: 1.14; letter-spacing: -.03em; text-wrap: balance;
}
.destaque-corpo h3 a:hover { color: var(--accent); }
.destaque-corpo time, .item time { font-variant-numeric: tabular-nums; }

/* ========== Pele "revista" ========== */

/* ---------- Topo ---------- */
.topbar { border-bottom-color: var(--line); }
.footer .brand span { width: 12px; height: 20px; }
.byline { color: var(--muted); }
.byline strong { font-weight: 600; color: var(--text); }
.topbar nav { align-items: center; }
.topbar nav a:hover, .byline:hover, .byline:hover strong { color: var(--accent-texto); }


.progresso span { background: var(--accent); }

.capa-texto > .kicker, .intro > .kicker, .definicao > .kicker, .continue > .kicker, .newsletter-cta > .kicker { display: none; }

/* ---------- Capa: título no papel, foto num quadro girado sobre um bloco laranja ---------- */
.capa, .capa.noite {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 56px;
  min-height: 0; padding-block: 40px 24px; overflow: visible;
  border-radius: 0; background: none; box-shadow: none;
}
.capa-foto { grid-column: 2; grid-row: 1; position: relative; min-height: 0; }
.capa-foto::before {
  content: ''; position: absolute; inset: 7% -5% -5% 9%; border-radius: 28px;
  background: var(--accent); transform: rotate(calc(4deg * var(--giro)));
}
.capa-foto picture { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 24px; transform: rotate(calc(-2deg * var(--giro))); box-shadow: 0 30px 60px -30px var(--sombra); }
.capa-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 18%; }
.capa .credito { position: relative; left: auto; bottom: auto; margin-top: 18px; padding: 0; background: none; color: var(--muted); }
.capa-texto { grid-column: 1; grid-row: 1; padding: 0; }
.capa h1 {
  margin: 0 0 40px;
  font-family: var(--display); font-weight: 800; font-stretch: 86%;
  font-size: clamp(46px, 6vw, 92px); line-height: .92; letter-spacing: -.038em; color: var(--text);
}
.capa h1 span { white-space: normal; }
.capa h1 .pergunta {
  display: inline; padding-inline: .04em; color: var(--sobre-acc);
  background: linear-gradient(transparent 52%, var(--accent) 52%, var(--accent) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.assinatura p { color: var(--muted); }
.assinatura strong { font-weight: 600; color: var(--text); }
.assinatura img { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Texto ----------
   Um eixo só: tudo começa na margem esquerda da coluna de leitura; o que é
   largo cresce para a direita, nunca para os dois lados. */
@media (min-width: 1041px) {
  .texto > .largo {
    margin-left: calc((100% - var(--col)) / 2); margin-right: auto;
    max-width: min(var(--largo), calc(100% - (100% - var(--col)) / 2));
  }
}
.texto > p { font-size: 20px; line-height: 1.7; color: var(--body); }
.texto > p a, .inspiracao a, .publicacao figcaption a, .lado a, .citar a, .video figcaption a, .vocabulario a, .definicao a, .ciclo a {
  color: var(--accent-texto); text-decoration-color: color-mix(in srgb, var(--accent-texto) 45%, transparent);
}
.texto > p a:hover, .inspiracao a:hover, .lado a:hover, .ciclo a:hover { color: var(--text); }
.texto > p:not(.tese) strong { font-weight: 650; color: var(--text); }
.texto > h2 { margin-top: 120px; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(32px, 4vw, 54px); line-height: .98; letter-spacing: -.034em; color: var(--text); }
.texto > .abre { font-family: var(--display); font-weight: 700; font-stretch: 90%; font-size: clamp(32px, 4.2vw, 54px); line-height: 1; letter-spacing: -.032em; color: var(--text); }
.texto > .firme { font-weight: 650; color: var(--text); }

/* Frases-âncora: peso de cartaz, quebra equilibrada pelo navegador. */
.tese strong { font-weight: inherit; }
.tese br.d { display: none; }
.texto > .tese {
  margin-block: 80px; text-wrap: balance;
  font-family: var(--display); font-weight: 800; font-stretch: 86%;
  font-size: clamp(36px, 4.8vw, 70px); line-height: .96; letter-spacing: -.036em; color: var(--text);
}
/* A maior vira uma faixa laranja inteira, levemente torta, com a frase no centro. */
.texto > .tese.maior {
  padding: clamp(32px, 4.6vw, 60px) clamp(24px, 4vw, 56px); border-radius: 30px; text-align: center;
  color: var(--sobre-acc); background: var(--accent); transform: rotate(calc(-1.2deg * var(--giro)));
  font-size: clamp(40px, 6vw, 88px); line-height: .92;
}
.texto > hr { width: 72px; height: 4px; border-radius: 2px; background: var(--accent); }

/* A definição em bloco escuro, o termo em laranja. */
.definicao { border: 1px solid var(--bloco); border-radius: 30px; background: var(--bloco); color: var(--sobre-bloco); }
[data-tema="escuro"] .definicao, [data-tema="escuro"] .fecho { border-color: var(--line-2); }
.definicao dfn { margin-top: 0; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(40px, 5.8vw, 80px); line-height: .94; color: var(--accent); }
.definicao dfn small { font-family: var(--sans); color: var(--sobre-bloco-2); }
.definicao p { color: var(--sobre-bloco); font-size: 21px; }
.definicao .autoria { border-top-color: color-mix(in srgb, var(--sobre-bloco) 22%, transparent); color: var(--sobre-bloco-2); }

/* Fotos como cópia impressa: borda de papel, giro leve, sombra curta. */
.foto img, .duo figure, .porta img, .imagina img, .lado img, .print {
  border: 10px solid var(--cartao); box-shadow: 0 22px 40px -22px var(--sombra);
}
.duo figure img { border: 0; }
.foto { transform: rotate(calc(-1.2deg * var(--giro))); }
.duo figure:nth-child(2) { transform: rotate(calc(2.4deg * var(--giro))) translateY(10px); }
.porta { transform: rotate(calc(1deg * var(--giro))); }
.imagina { transform: rotate(calc(-1deg * var(--giro))); }
.imagina::before { inset: 10px 10px auto; }
.imagina .sigla { inset: 44px 46px auto; }
.lado figure { transform: rotate(calc(-2.4deg * var(--giro))); }
.lado .lado-texto p { color: var(--body); }
.credito, .foto figcaption, .video figcaption, .publicacao figcaption { color: var(--muted); }
.duo .ano { background: var(--accent); color: var(--sobre-acc); font-weight: 700; }
.sigla-para b { color: #c2410c; }
.video .tela { box-shadow: 0 22px 40px -22px var(--sombra); }

.depara-cabeca .kicker { color: var(--muted); }
.depara-linha { border-top-color: var(--line); }
.depara-linha:last-child { border-bottom-color: var(--line); }
.depara-linha p { font-family: var(--display); font-weight: 650; font-stretch: 94%; letter-spacing: -.015em; color: var(--text); }
.depara-linha p + .seta + p { color: var(--muted); }
.depara-linha .kicker { font-family: var(--sans); color: var(--muted); }
.seta { color: var(--accent-texto); }
.depara-linha.agora { margin-top: 10px; padding: 28px 26px; border: 0; border-radius: 24px; background: var(--violeta); }
.depara-linha.agora p, .depara-linha.agora p + .seta + p, .depara-linha.agora .kicker, .depara-linha.agora .seta { color: #fff; }

.ciclo li { border-color: var(--line-2); background: var(--cartao); }
.ciclo li::before { font-family: var(--display); font-weight: 800; color: var(--violeta-texto); }
.ciclo h3, .passos h3, .vocabulario dt, .perfis h3, .eras h3, .item h3 { font-family: var(--display); font-weight: 700; font-stretch: 92%; letter-spacing: -.02em; color: var(--text); }
.ciclo li.ampliado { border-color: var(--accent); background: var(--accent); }
.ciclo li.ampliado::before, .ciclo li.ampliado p, .ciclo li.ampliado h3, .ciclo li.ampliado a { color: var(--sobre-acc); }
.ciclo li.ampliado .quem-faz { border-color: var(--sobre-acc); background: var(--sobre-acc); color: var(--accent); }
.ciclo .quem-faz { border-color: var(--line-2); color: var(--text); }
.ciclo .volta { border-color: var(--line-2); color: var(--muted); }
.ciclo .volta strong { color: var(--accent-texto); }
.ciclo p, .passos p, .vocabulario dd, .quem li { color: var(--body); }

.fala { font-family: var(--mao); font-weight: 500; color: var(--violeta-texto); transform: rotate(calc(-1.6deg * var(--giro))); }
.passos > li { border-top-color: var(--line); }
.passos > li:last-child { border-bottom-color: var(--line); }
.passos > li::before { font-family: var(--display); font-weight: 800; color: var(--violeta-texto); }
.calma { font-family: var(--display); font-weight: 800; color: var(--accent-texto); }
.cargos p { font-family: var(--display); font-weight: 650; border-color: var(--line-2); background: var(--cartao); }
.travessia, .travessia::before { background: var(--accent-texto); }
.travessia::before { box-shadow: 0 0 0 6px rgb(255 106 31 / 25%); }
.travessia::after { border-color: var(--accent-texto); }
.alguem { color: var(--accent-texto); }
.eras li { border-color: var(--line-2); background: var(--cartao); }
.eras li:nth-child(3) { border-color: var(--accent); background: var(--accent); color: var(--sobre-acc); }
.eras li:nth-child(3) .kicker, .eras li:nth-child(3) p { color: #4a1c05; }
.eras-nota { color: var(--text); }
.perfis li::after { background: var(--accent); }
.perguntas li { border-top-color: var(--line); }
.perguntas input { border-bottom-color: var(--line-2); color: var(--accent-texto); }
.respostas li { font-family: var(--display); font-weight: 650; border-top-color: var(--line); }

/* Vocabulário: termo e sentido começam na mesma linha de base. */
.vocabulario div { align-items: baseline; border-top-color: var(--line); }
.vocabulario div:last-child { border-bottom-color: var(--line); }

/* ---------- Fecho: bloco escuro, o raio grande como grafismo à direita ---------- */
.fecho {
  position: relative; overflow: hidden; margin-top: 48px;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 6vw, 80px); border: 1px solid var(--bloco); border-radius: 34px; background: var(--bloco);
}
.fecho::after {
  content: ''; position: absolute; right: clamp(28px, 7vw, 96px); top: 50%;
  width: clamp(84px, 12vw, 170px); aspect-ratio: 3 / 5; transform: translateY(-50%) rotate(10deg);
  background: var(--accent); clip-path: var(--raio);
}
.fecho p {
  max-width: none; margin: 0; padding-right: clamp(110px, 18vw, 260px);
  font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(38px, 5.6vw, 84px); line-height: .94; letter-spacing: -.036em; color: var(--sobre-bloco);
}
.fecho em { color: var(--accent); }
.depois { padding-top: 56px; }

/* ---------- No glossário: termos do artigo, para seguir lendo no site ---------- */
.glossario-links { padding-block: 96px 8px; }
.glossario-links .cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: 26px; }
.glossario-links h2 { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(30px, 3.6vw, 46px); line-height: 1; letter-spacing: -.034em; color: var(--text); }
.glossario-links .cabeca p { max-width: 46ch; font-size: 16px; color: var(--muted); }
.glossario-links .cabeca a { color: var(--accent-texto); font-weight: 600; }
.termos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.termos a {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 22px 22px 20px;
  border: 1px solid var(--line-2); border-radius: 20px; background: var(--cartao);
  transition: border-color .2s, transform .35s var(--sai), box-shadow .35s var(--sai);
}
.termos a:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 18px 34px -22px var(--sombra); }
.termos b { padding-right: 26px; overflow-wrap: anywhere; hyphens: auto; font-family: var(--display); font-weight: 750; font-stretch: 92%; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; color: var(--text); }
.termos span { font-size: 15px; line-height: 1.55; color: var(--body); }
.termos .ic { position: absolute; top: 20px; right: 20px; width: 18px; height: 18px; color: var(--accent-texto); }

.palestra-cta { border: 0; background: var(--violeta); }
.palestra-cta p { font-family: var(--display); font-weight: 700; font-size: 22px; color: #fff; }
.palestra-cta .button { border-color: var(--accent); background: var(--accent); color: var(--sobre-acc); }
.palestra-cta .button:hover { border-color: #fff; background: #fff; }
.inspiracao { border-top-color: var(--line); color: var(--muted); }
.citar, .autor { border-color: var(--line-2); background: var(--cartao); }
.citar cite, .autor p { color: var(--body); }
.autor h2 { font-family: var(--display); font-weight: 700; color: var(--text); }
.autor nav { color: var(--accent-texto); }
.copiado { color: #2f7a4f; }
[data-tema="escuro"] .copiado { color: #7fd1a2; }

.continue > h2, .cta-grid h3 { font-family: var(--display); font-weight: 800; font-stretch: 88%; letter-spacing: -.035em; color: var(--text); }
.cta-grid article { border-color: var(--line); }
.cta-grid p { color: var(--body); }
.newsletter-cta { background: var(--accent); border-color: var(--accent) !important; }
.newsletter-cta h3, .newsletter-cta p { color: var(--sobre-acc); }
.newsletter-cta .button { border-color: var(--sobre-acc); background: var(--sobre-acc); color: #fff; }
.antihype-cta { background: var(--bloco); color: var(--sobre-bloco); }
.antihype-cta h3, .antihype-cta .anti-brand { color: var(--sobre-bloco); }
.antihype-cta p { color: var(--sobre-bloco-2); }
.antihype-cta .kicker { color: var(--sobre-bloco-2); }

/* ---------- Vitrine ---------- */
.intro h1 { font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(48px, 7.6vw, 96px); line-height: .92; letter-spacing: -.038em; color: var(--text); }
.intro h1 em {
  font-style: normal; color: var(--sobre-acc);
  background: linear-gradient(transparent 54%, var(--accent) 54%, var(--accent) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.intro h1 em::after { content: ''; display: inline-block; width: .44em; height: .74em; margin-left: .08em; vertical-align: -.04em; background: var(--sobre-acc); clip-path: var(--raio); }
.intro .lead { color: var(--body); }
.destaque { border: 0; border-radius: 30px; background: var(--cartao); box-shadow: 0 30px 60px -36px var(--sombra); }
.destaque-capa { border-right: 0; }
.destaque-corpo { background: var(--cartao); }
.destaque-corpo .kicker, .item .meta { order: 2; margin-top: -6px; margin-bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--accent-texto); }
.item .meta { margin: 10px 0 0; }
.destaque-corpo h2, .destaque-corpo h3 { order: 1; margin-top: 0; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(30px, 3.4vw, 48px); line-height: .98; letter-spacing: -.034em; color: var(--text); }
.destaque-corpo h2 a:hover, .destaque-corpo h3 a:hover, .item h3 a:hover { color: var(--violeta-texto); }
.destaque-corpo > p:not(.kicker) { order: 3; color: var(--body); }
.destaque-link { order: 4; border-top-color: var(--line-2); color: var(--accent-texto); }
.destaque-link:hover { color: var(--text); }
.item { border: 0; background: var(--cartao); }
.closing { border: 0; background: var(--bloco); }
[data-tema="escuro"] .closing { border: 1px solid var(--line-2); }
.closing h2 { font-family: var(--display); font-weight: 800; font-stretch: 88%; color: var(--sobre-bloco); }
.closing p { color: var(--sobre-bloco-2); }
.closing .button { border-color: var(--accent); background: var(--accent); color: var(--sobre-acc); }
.closing .button:hover { border-color: var(--sobre-bloco); background: var(--sobre-bloco); }
.footer { border-top-color: var(--line); color: var(--muted); }
.footer a:hover { color: var(--accent-texto); }

@media (max-width: 1000px) {
  .capa, .capa.noite { display: flex; flex-direction: column-reverse; gap: 28px; padding-top: 24px; }
  .capa-foto { width: min(100%, 520px); margin-inline: auto 12px; }
  .capa-texto { padding: 0; }
  .capa h1 { font-size: clamp(40px, 11vw, 76px); }
  .termos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .texto > p { font-size: 18.5px; }
  .texto > h2 { margin-top: 88px; }
  .definicao p { font-size: 18.5px; }
  .texto > .tese.maior { transform: rotate(calc(-.8deg * var(--giro))); }
  .foto img, .porta img, .imagina img, .lado img, .duo figure { border-width: 6px; }
  .imagina .sigla { inset: 26px 26px auto; }
  .fecho::after { top: 28px; right: 24px; width: 54px; transform: rotate(10deg); }
  .fecho p { padding-right: 0; padding-top: 70px; }
  .termos { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .termos a { transition: none; }
}

/* No escuro o marca-texto cobre a letra inteira: meia faixa deixava o topo
   das letras escuras sumir no fundo. */
[data-tema="escuro"] .capa h1 .pergunta,
[data-tema="escuro"] .intro h1 em {
  background: linear-gradient(transparent 4%, var(--accent) 4%, var(--accent) 97%, transparent 97%);
}
/* O crédito da foto desce para fora do bloco laranja. */
.capa .credito { margin-top: 44px; }
@media (max-width: 1000px) { .capa .credito { margin-top: 30px; } }

/* A frase em cima da foto da porta: a foto é escura nos dois temas. */
.porta blockquote { color: #f4f1ea; }

/* ---------- Ajustes de 28/10/2026 (pedido do Gui) ---------- */

/* De/para (as três eras e o "o que a pessoa faz"): as linhas viram cartões do
   mesmo tamanho, com a mesma folga dos dois lados, então a linha violeta
   ("agora") alinha com as de cima. A seta fica no meio da coluna dela. */
.depara-cabeca, .depara-linha { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.25fr); column-gap: 8px; }
.depara-cabeca { padding: 0 26px 12px; }
.depara-linha { margin-top: 10px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--cartao); }
.depara-linha:last-child { border-bottom: 1px solid var(--line); }
.depara-linha p { font-size: 22px; line-height: 1.25; }
.depara-linha p + .seta + p { font-family: var(--sans); font-weight: 500; font-stretch: 100%; font-size: 18px; line-height: 1.45; letter-spacing: 0; color: var(--body); }
.depara-linha .kicker { display: inline-block; margin-bottom: 4px; font-size: 11px; }
.seta { display: grid; place-items: center; width: 40px; height: 40px; margin-inline: auto; border-radius: 50%; background: var(--surface); }
.seta .ic { width: 20px; height: 20px; }
.depara-linha.agora { border-color: transparent; }
.depara-linha.agora .seta { background: rgb(255 255 255 / 16%); }
.depara-linha.agora p + .seta + p { font-family: var(--display); font-weight: 700; font-stretch: 94%; font-size: 21px; color: #fff; }

/* A foto da Imaginação Ampliada igual à da home: a frase num painel claro,
   sem o véu que deixava cantos escuros na borda da foto. */
.imagina::before { display: none; }
.imagina .sigla { inset: 30px 30px auto; padding: 16px 20px 18px; border-radius: 16px; background: rgb(250 246 238 / 93%); box-shadow: 0 18px 30px -20px rgb(0 0 0 / 45%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sigla-de { font-size: clamp(13px, 1.6vw, 16px); font-weight: 600; color: #3d3730; }
.sigla-de s { text-decoration-color: #b23c08; color: #6b6259; }
.sigla-para { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(26px, 4.4vw, 44px); letter-spacing: -.035em; color: #16130f; }
.sigla-para b { font-weight: 800; color: var(--violeta-texto); }

/* Chamada da palestra: rótulo, título e uma linha de apoio; botão ao lado. */
.palestra-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; padding: clamp(26px, 4vw, 40px); border-radius: 28px; }
.palestra-cta .kicker { font-size: 12px; color: #fff; opacity: .75; }
.continue { padding-bottom: 0; }
.palestra-cta h2 { margin: 8px 0 8px; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(28px, 3.2vw, 38px); line-height: 1; letter-spacing: -.03em; color: #fff; }
.palestra-cta p:not(.kicker) { font-family: var(--sans); font-weight: 500; font-size: 17px; line-height: 1.5; letter-spacing: 0; color: rgb(255 255 255 / 85%); }

/* Continue explorando: o título de seção padrão (.secao) da marca. */
.continue > h2.secao { margin-bottom: 30px; }

@media (max-width: 700px) {
  .depara-linha { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .depara-cabeca { display: none; }
  .seta { margin: 2px 0; transform: rotate(90deg); }
  .imagina .sigla { inset: 16px 16px auto; padding: 12px 14px; }
  .palestra-cta { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Peças do artigo "O que é foresight" (29/10/2026) ---------- */
/* O radar da palestra: três anéis, do sinal forte (centro) ao fraco (borda).
   O desenho é SVG com os papéis da marca, então o tema escuro vale sozinho. */
.radar { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px 48px; align-items: center; margin-block: 52px 56px; }
.radar svg { width: 100%; height: auto; overflow: visible; }
.radar .anel { stroke: var(--accent); stroke-width: .4; }
.radar .anel.fraco { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke-dasharray: 1.4 1.2; }
.radar .anel.medio { fill: color-mix(in srgb, var(--accent) 24%, transparent); }
.radar .anel.forte { fill: var(--accent); }
.radar .eixo { stroke: var(--line-2); stroke-width: .3; }
.radar .ponto { fill: var(--text); }
.radar .anel.forte + .ponto, .radar .ponto.claro { fill: var(--sobre-acc); }
.radar ol { counter-reset: anel; }
.radar li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.radar li:last-child { border-bottom: 1px solid var(--line); }
.radar li::before { content: ''; grid-row: 1 / span 3; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--accent); }
.radar li:nth-child(1)::before { background: var(--accent); }
.radar li:nth-child(2)::before { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.radar li:nth-child(3)::before { border-style: dashed; }
.radar .kicker { font-size: 12px; }
.radar h3 { font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; color: var(--text); }
.radar li p { font-size: 17px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.radar li p strong { color: var(--text); font-weight: 650; }

/* A conversa entre agentes: três balões, um de cada lado. É exemplo, e a
   legenda diz isso. */
.agentes { margin-block: 40px 44px; padding: 26px clamp(18px, 3vw, 30px) 22px; border-radius: 26px; background: var(--surface); }
.agentes ol { display: grid; gap: 14px; }
.agentes li { max-width: 78%; padding: 12px 16px 14px; border-radius: 18px 18px 18px 4px; background: var(--cartao); box-shadow: 0 10px 24px -20px var(--sombra); }
.agentes li.vende { justify-self: end; border-radius: 18px 18px 4px 18px; background: var(--bloco); color: var(--sobre-bloco); }
.agentes li .kicker { display: block; margin-bottom: 4px; font-size: 11px; }
.agentes li.vende .kicker { color: var(--accent); }
.agentes li p { font-size: 18px; line-height: 1.45; }
.agentes figcaption { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* O que sabemos e o que não sabemos: a mesma régua para qualquer sinal. */
.sabemos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-block: 36px 44px; }
.sabemos > div { padding: 22px 24px 20px; border-radius: 22px; border: 1px solid var(--line-2); }
.sabemos > div:first-child { border-color: var(--accent); }
.sabemos h3 { margin-bottom: 10px; font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 21px; letter-spacing: -.02em; color: var(--text); }
.sabemos li { position: relative; padding: 8px 0 8px 26px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.45; color: var(--body); }
.sabemos li::before { position: absolute; left: 0; top: 8px; font-weight: 700; color: var(--accent-texto); }
.sabemos > div:first-child li::before { content: '✓'; }
.sabemos > div:last-child li::before { content: '?'; color: var(--muted); }

@media (max-width: 700px) {
  .radar { grid-template-columns: minmax(0, 1fr); }
  .radar svg { max-width: 240px; margin-inline: auto; }
  .agentes li { max-width: 92%; }
  .agentes li p { font-size: 17px; }
  .sabemos { grid-template-columns: minmax(0, 1fr); }
}

/* Entre 1001 e 1320 px a coluna encosta na margem e o quadro girado da capa
   (mais o laranja de trás) passava 6 px da borda: respiro à direita. */
@media (min-width: 1001px) and (max-width: 1320px) { .capa-foto { margin-right: 28px; } }

/* ---------- Capa v2 (29/10/2026, pedido do Gui: "header mais inteligente,
   mais power"): título que respira à esquerda, o índice "Neste artigo" com as
   perguntas que o texto responde (clicáveis) logo abaixo, e a foto girada à
   direita com a frase-âncora num adesivo. No celular: título, foto, índice. */
.capa, .capa.noite {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-areas: "texto foto" "indice foto"; column-gap: clamp(32px, 5vw, 80px); row-gap: 30px;
  align-items: start; padding-block: 44px 28px; min-height: 0;
}
.capa-texto { grid-area: texto; align-self: end; padding: 0; }
.capa-foto { grid-area: foto; align-self: center; justify-self: end; width: 100%; max-width: 500px; margin: 0; }
.capa-indice { grid-area: indice; }
.capa-texto > .kicker { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.capa-texto > .kicker::before { content: ''; flex: none; width: 11px; height: 19px; background: var(--accent); clip-path: var(--raio); }
.capa h1 { margin: 18px 0 26px; font-size: clamp(38px, 4.5vw, 72px); line-height: .94; text-wrap: balance; }
.capa h1 span { display: inline; white-space: normal; }
.capa-indice { padding: 20px 24px 10px; border-radius: 24px; background: var(--cartao); box-shadow: 0 0 0 1px var(--line), 0 22px 44px -30px var(--sombra); rotate: calc(-.6deg * var(--giro)); }
.capa-indice-rot { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.capa-indice ol { margin: 8px 0 0; padding: 0; list-style: none; }
.capa-indice a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.35; text-decoration: none; transition: color .2s, padding .3s var(--sai); }
.capa-indice li:first-child a { border-top: 0; }
.capa-indice a span { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--accent-texto); }
.capa-indice a:hover, .capa-indice a:focus-visible { color: var(--accent-texto); padding-left: 6px; }
.capa-frase {
  position: absolute; left: -34px; bottom: 28px; z-index: 2; max-width: min(78%, 340px);
  margin: 0; padding: 16px 20px 18px; border-radius: 18px; background: var(--bloco); color: var(--sobre-bloco);
  font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.12; letter-spacing: -.01em;
  rotate: calc(2.5deg * var(--giro)); box-shadow: 0 26px 44px -24px var(--sombra); text-wrap: balance;
}
.capa-frase::before { content: '“'; display: block; height: 22px; font-size: 44px; line-height: 1; color: var(--accent); }
.capa-foto .credito { position: relative; z-index: 1; margin-top: 46px; text-align: right; }
@media (max-width: 1000px) {
  .capa, .capa.noite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); column-gap: 28px; padding-top: 28px; }
  .capa-foto { width: 100%; margin: 0; min-height: 0; aspect-ratio: auto; overflow: visible; border-radius: 0; }
  .capa-foto picture { height: auto; aspect-ratio: 4 / 5; }
  .capa-foto img { position: absolute; }
  .capa h1 { font-size: clamp(34px, 5.4vw, 56px); }
  .capa-frase { left: -18px; font-size: 16px; }
}
@media (max-width: 700px) {
  .capa, .capa.noite { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "foto" "indice"; row-gap: 26px; padding-top: 18px; }
  .capa h1 { font-size: clamp(32px, 9.4vw, 46px); margin-bottom: 20px; }
  .capa-foto { justify-self: stretch; max-width: none; padding: 0 10px 0 6px; aspect-ratio: auto; }
  .capa-foto picture { aspect-ratio: 5 / 4; }
  .capa-frase { left: -4px; bottom: -18px; max-width: 82%; }
  .capa-indice { margin-top: 18px; rotate: 0deg; }
  .capa, .capa.noite { overflow-x: clip; }
  .capa-foto::before { inset: 7% 2px -4% 9%; }
}

/* Vídeo que o dono não deixa embutir: capa clicável que abre no YouTube. */
.video .tela-link { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000; box-shadow: 0 22px 40px -22px var(--sombra); color: #fff; text-decoration: none; }
.video .tela-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s, transform .6s var(--sai); }
.video .tela-link:hover img { opacity: .62; transform: scale(1.03); }
.video .tela-link b { position: absolute; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 16px; border-radius: 999px; background: var(--accent); color: var(--sobre-acc); font-size: 16px; font-weight: 700; box-shadow: 0 18px 30px -16px rgb(0 0 0 / 60%); white-space: nowrap; transform: none; }
.video .tela-link b svg { width: 22px; height: 22px; fill: currentColor; }

/* Foto horizontal na peça lado: ganha quase metade da largura (Gui, 29/10:
   "fotinho muito pequena"). */
.lado.larga { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 700px) { .lado.larga > div:first-child, .lado.larga > figure { max-width: none; } }

/* Duas réguas (Gui, 29/10/2026): a da página (capa, menu, vídeo grande) e a
   da leitura (texto e peças largas, que crescem só para a direita). O vídeo
   em capa clicável usa a régua da página: ocupa a largura toda, alinhado
   com a capa e o menu. */
@media (min-width: 1041px) {
  .texto > .video.grande { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
}

/* Outros artigos em grade (Gui, 29/10/2026): três por linha no desktop, dois
   no tablet, um no celular. Foto em cima, texto embaixo. Quem sobra sozinho
   na última linha vira cartão largo; dois que sobram dividem a linha. */
.lista { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.lista .item { grid-column: span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px; align-items: start; padding: 14px 14px 26px; }
.lista .item > div { padding: 0 10px; }
.lista .item-capa { aspect-ratio: 4 / 3; }
.lista .item h3 { font-size: clamp(21px, 1.7vw, 25px); }
.lista .item p:not(.meta) { font-size: 15.5px; }
.lista .item:last-child:nth-child(3n+1) { grid-column: 1 / -1; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: none; gap: 32px; align-items: center; padding: 18px; }
.lista .item:last-child:nth-child(3n+1) .item-capa { aspect-ratio: 3 / 2; }
.lista .item:last-child:nth-child(3n+1) h3 { font-size: clamp(22px, 2.2vw, 28px); }
.lista .item:nth-last-child(2):nth-child(3n+1),
.lista .item:last-child:nth-child(3n+2) { grid-column: span 3; }
@media (max-width: 1000px) {
  .lista .item,
  .lista .item:nth-last-child(2):nth-child(3n+1),
  .lista .item:last-child:nth-child(3n+1),
  .lista .item:last-child:nth-child(3n+2) { grid-column: span 3; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px; align-items: start; padding: 14px 14px 26px; }
  .lista .item:last-child:nth-child(3n+1) .item-capa { aspect-ratio: 4 / 3; }
  .lista .item:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: none; gap: 28px; align-items: center; padding: 18px; }
  .lista .item:last-child:nth-child(odd) .item-capa { aspect-ratio: 3 / 2; }
}
@media (max-width: 700px) {
  .lista { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lista .item, .lista .item:last-child:nth-child(odd), .lista .item:nth-last-child(2):nth-child(3n+1), .lista .item:last-child:nth-child(3n+2) { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; padding: 14px 14px 24px; }
  .lista .item:last-child:nth-child(odd) .item-capa { aspect-ratio: 4 / 3; }
}

/* Letras dentro da marca (Gui, 30/10/2026): frases de caixa, tabela e lista
   estavam em Bricolage 650, que não existe no resto do site. Bricolage só em
   título (750 a 800); texto de caixa vai na Figtree 600, como nas listas do
   glossário e dos minicursos. Inclui as peças de cada artigo (assets/artigo.css). */
article .depara-linha p:not(.seta + p), article .cargos p, article .respostas li, article .retrato-mapa b.vazio,
article .versus tbody td, article .briefing dd, article .trecho p {
  font-family: var(--sans); font-weight: 600; font-stretch: normal; letter-spacing: -.01em;
}