/* ==========================================================================
   ESPELHO DE LUZ — sistema minimalista
   Preto, branco, um acento. Painéis de tela cheia. Sem ornamento.
   ========================================================================== */

:root{
  --bg:        #000000;
  --bg-soft:   #0a0a0a;
  --ink:       #ffffff;
  --muted:     #9a9a9a;
  --faint:     #6b6b6b;
  --line:      rgba(255,255,255,0.16);
  --line-2:    rgba(255,255,255,0.32);
  --accent:    #c9a227;
  --accent-ink:#000000;
  --danger:    #d9614f;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pad-x: clamp(20px, 5vw, 72px);
  --maxw: 1360px;
  --read: 62ch;

  --dur: 260ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.05; letter-spacing:-0.015em; }
p{ margin:0; }
::selection{ background:var(--ink); color:var(--bg); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  /* o deslize dos itens ao passar o mouse vira troca de cor apenas */
  .cena-link, .cena-link:hover{ transition:none; padding-left:0; }
  .cena-bar{ backdrop-filter:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------------- tipos --- */
.display{
  text-transform:uppercase;
  font-size:clamp(2.2rem, 1.1rem + 5.2vw, 5.4rem);
  letter-spacing:-0.02em; line-height:0.98;
}
.display-sm{
  text-transform:uppercase;
  font-size:clamp(1.45rem, 0.95rem + 2.2vw, 2.6rem);
  letter-spacing:-0.015em; line-height:1.05;
}
.display-xs{
  text-transform:uppercase;
  font-size:clamp(1.3rem, 0.9rem + 1.5vw, 2rem);
  letter-spacing:-0.01em; line-height:1.1;
}
.eyebrow{
  font-size:0.82rem; text-transform:uppercase; letter-spacing:0.24em;
  color:var(--muted); font-weight:500; margin:0 0 1.1em;
}
.eyebrow.accent{ color:var(--accent); }

/* linha de data — destaque entre o título e o texto de apoio */
.date-line{
  display:inline-flex; align-items:center; justify-content:center; gap:0.9em;
  margin-top:1.2rem;
  font-size:clamp(1rem, 0.88rem + 0.55vw, 1.4rem);
  font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink);
}
.date-line::before,.date-line::after{
  content:""; height:1px; width:clamp(18px, 4vw, 56px);
  background:var(--accent); flex:none;
}
@media (max-width:420px){
  .date-line{ gap:0.6em; letter-spacing:0.1em; }
  .date-line::before,.date-line::after{ width:14px; }
}
.lede{ font-size:clamp(1rem,0.94rem + 0.3vw,1.15rem); color:var(--muted); max-width:56ch; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

/* --------------------------------------------------------------- botões --- */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:54px; min-width:13.5em; padding:0 2.4em;
  border:1px solid rgba(201,162,39,.55); color:var(--ink);
  font-size:0.76rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  background:rgba(0,0,0,.22); backdrop-filter:blur(2px);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space:nowrap; cursor:pointer;
}
/* o dourado entra deslizando da esquerda em vez de piscar */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 420ms var(--ease);
}
.btn:hover, .btn:focus-visible{
  color:var(--accent-ink); border-color:var(--accent);
  box-shadow:0 0 26px -6px rgba(201,162,39,.5);
}
.btn:hover::before, .btn:focus-visible::before{ transform:scaleX(1); }
.btn:active{ transform:translateY(1px); }

.btn-solid{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-solid::before{ background:#e6bd35; }
.btn-solid:hover, .btn-solid:focus-visible{ color:var(--accent-ink); }
.btn-block{ width:100%; min-width:0; }
/* rótulos descritivos são longos: em tela estreita o botão quebra em duas
   linhas em vez de cortar o texto (.btn tem nowrap + overflow:hidden) */
@media (max-width:520px){
  .btn--wrap{
    white-space:normal; min-width:0; height:auto;
    padding-block:14px; line-height:1.45; text-align:center;
  }
}
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem; }
.center .actions{ justify-content:center; }

/* --------------------------------------------------------------- header --- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  padding:18px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.site-header.is-scrolled{ background:rgba(0,0,0,.82); backdrop-filter:blur(10px); }
.brand{
  font-size:0.82rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  white-space:nowrap;
}
.brand b{ font-weight:600; color:var(--accent); }
.main-nav{ display:flex; align-items:center; gap:32px; }
.main-nav ul{ display:flex; gap:32px; }
.main-nav a{
  font-size:0.7rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); transition:color var(--dur) var(--ease);
}
.main-nav a:hover,.main-nav a.is-active{ color:var(--ink); }
/* o CTA é botão, não link de menu: não pode herdar a cor cinza acima */
.main-nav .nav-cta,
.main-nav .nav-cta:hover,
.main-nav .nav-cta:focus-visible{
  color:var(--accent-ink);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.18em;
  min-width:0; min-height:44px; padding:0 1.6em;
}
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
}
.nav-toggle .bars{ position:relative; width:22px; height:11px; }
.nav-toggle .bars span{
  position:absolute; left:0; right:0; height:1px; background:var(--ink);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:5px; }
.nav-toggle .bars span:nth-child(3){ top:10px; }
.nav-open .nav-toggle .bars span:nth-child(1){ top:5px; transform:rotate(45deg); }
.nav-open .nav-toggle .bars span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle .bars span:nth-child(3){ top:5px; transform:rotate(-45deg); }

@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:fixed; inset:0; background:var(--bg);
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding:var(--pad-x); gap:0;
    transform:translateX(100%); transition:transform 420ms var(--ease); z-index:99;
  }
  .nav-open .main-nav{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; gap:20px; }
  .main-nav a{ font-size:1.4rem; letter-spacing:0.1em; color:var(--ink); }
  .main-nav .nav-cta{ margin-top:36px; font-size:0.85rem; }
}

/* --------------------------------------------------------------- painel --- */
.panel{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate;
}
.panel-media{ position:absolute; inset:0; z-index:-2; }
.panel-media img,.panel-media video{
  width:100%; height:100%; object-fit:cover;
}
.panel::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.14) 26%, rgba(0,0,0,.66) 62%, rgba(0,0,0,.95) 100%);
}
.panel--align::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 34%, transparent 62%);
}
.panel--right::after{
  background:linear-gradient(270deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 34%, transparent 62%);
}
.panel-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad-x) clamp(72px, 13vh, 150px);
  text-align:center;
  text-shadow:0 1px 26px rgba(0,0,0,.6);
}
.panel-inner .lede{ margin-inline:auto; }

/* alinhamento variável entre painéis — em vez de tudo centralizado,
   o bloco de texto troca de lado a cada tela, como na spacex.
   o bloco muda de lugar; o texto dentro dele continua alinhado à esquerda,
   que é o que se lê bem. */
.panel--align .panel-inner{
  display:flex; flex-direction:column;
  text-align:left;
}
.panel--align .panel-inner > *{ max-width:min(58ch, 100%); }
.panel--align .panel-inner h1,
.panel--align .panel-inner h2{ max-width:min(19ch, 100%); }
.panel--align .panel-inner .lede{ margin-inline:0; }
.panel--align .date-line{ margin-inline:0; align-self:flex-start; }
.panel--align .actions{ justify-content:flex-start; }

.panel--left .panel-inner{ align-items:flex-start; }
.panel--right .panel-inner{ align-items:flex-end; }

@media (max-width:760px){
  .panel--right .panel-inner{ align-items:flex-start; }
}
/* sobre fotografia o texto precisa de mais peso que no fundo preto.
   três tons distintos: dourado no eyebrow, branco no título, marfim no apoio */
.panel .eyebrow{ color:var(--accent); }
.panel .lede{ margin-top:1.5rem; }
/* nos painéis o título é enorme: o eyebrow acompanha a escala */
.panel .eyebrow{ font-size:clamp(0.86rem, 0.74rem + 0.4vw, 1.05rem); }
.panel--first .eyebrow{
  font-size:clamp(1.1rem, 0.9rem + 0.95vw, 1.6rem);
  letter-spacing:0.17em;
}
/* o dourado tem pouco contraste sobre trechos claros da foto:
   halo escuro em camadas mantém a leitura sem criar caixa visível */
.panel .eyebrow{
  text-shadow:
    0 0 4px rgba(0,0,0,.9),
    0 1px 12px rgba(0,0,0,.85),
    0 2px 34px rgba(0,0,0,.7);
}
.page-head .eyebrow{ font-size:clamp(0.86rem, 0.78rem + 0.3vw, 1rem); }
.panel .eyebrow.accent{ color:var(--accent); }
.panel .lede{ color:rgba(242,236,224,.80); }
.panel--short .panel-inner,
.panel--short .lede{ text-shadow:none; }
.panel--short .eyebrow{ color:var(--muted); }
.panel--short .lede{ color:var(--muted); }
.panel--first .panel-inner{ padding-bottom:clamp(56px, 9vh, 110px); }
.panel--short{ min-height:auto; padding-block:clamp(80px,14vh,160px); align-items:center; }
.panel--short::before{ background:none; }

/* ---------------------------------------------------------------- seção --- */
.section{ padding:clamp(52px,7.5vh,96px) var(--pad-x); }
.section--line{ border-top:1px solid var(--line); }
.section--tight{ padding-block:clamp(34px,4.5vh,58px); }
.wrap{ max-width:var(--maxw); margin-inline:auto; }
.wrap-read{ max-width:var(--read); margin-inline:auto; }
.section p + p{ margin-top:1.1em; }

/* --------------------------------------------------------------- listas --- */
/* Colunas fixas em vez de auto-fit: com 4 itens as linhas sempre fecham,
   sem deixar célula vazia mostrando o fundo da grade. */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.steps > div{ background:var(--bg); padding:clamp(24px,3vw,40px); }
.steps .n{ font-size:0.7rem; letter-spacing:0.22em; color:var(--accent); text-transform:uppercase; }
.steps h3{ margin:0.7em 0 0.55em; font-size:1.25rem; text-transform:uppercase; letter-spacing:0.02em; }
.steps p{ color:var(--muted); font-size:1.04rem; line-height:1.7; }
.steps .role{ font-size:0.7rem; letter-spacing:0.22em; color:var(--accent); text-transform:uppercase; }
.steps--2{ grid-template-columns:repeat(2,1fr); }
.steps--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1100px){ .steps{ grid-template-columns:repeat(2,1fr); } .steps--3{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .steps--3{ grid-template-columns:1fr; } }
@media (max-width:820px){ .steps--2{ grid-template-columns:1fr; } }
@media (max-width:620px){ .steps{ grid-template-columns:1fr; } }

/* As linhas divisórias vinham do fundo da grade aparecendo nos vãos. Com 5
   itens numa fileira de 4, as células vazias viravam um bloco cinza. Agora o
   traço fica na própria célula, e o que sobra simplesmente não aparece. */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border-block:1px solid var(--line);
}
.facts > div{
  padding:clamp(20px,3vw,34px); text-align:center;
  border-left:1px solid var(--line);
}
.facts > div:first-child{ border-left:0; }
.facts dt{ font-size:0.82rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); font-weight:500; }
.facts dd{ margin:0.5em 0 0; font-size:clamp(1.1rem,0.9rem + .7vw,1.5rem); font-weight:600; letter-spacing:-0.01em; }
@media (max-width:820px){
  .facts{ grid-template-columns:repeat(2,1fr); }
  .facts > div:nth-child(odd){ border-left:0; }
  .facts > div:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:460px){
  .facts{ grid-template-columns:1fr; }
  .facts > div{ border-left:0; }
  .facts > div + div{ border-top:1px solid var(--line); }
}

/* --------------------------------------------------------------- script --- */
/* Índice das cenas (em espetaculos.html) e páginas de leitura do roteiro.
   Coluna de leitura ~880px, tipografia maior que a do resto do site: aqui
   o texto é o produto, não o apoio. */
:root{
  --script-col: 880px;      /* medida da coluna de leitura */
  --script-pad: clamp(18px, 5vw, 40px);
  --header-h: 74px;         /* altura do cabeçalho fixo */
}

.scene-hint{
  margin-top:1rem; font-size:0.95rem; color:var(--muted);
}

/* ---- índice ---- */
.cenas{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.cena-item{ border-bottom:1px solid var(--line); }
.cena-link{
  display:grid; align-items:center; gap:8px 20px;
  grid-template-columns:56px minmax(0,1fr) auto;
  grid-template-areas:"num ttl acao" "num quem acao";
  padding:20px 0; color:var(--ink);
  transition:padding-left var(--dur) var(--ease);
}
.cena-link:hover{ padding-left:10px; }
.cena-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.cena-link .num{
  grid-area:num; font-size:0.78rem; letter-spacing:0.14em; color:var(--faint);
  transition:color var(--dur) var(--ease);
}
.cena-link .ttl{ grid-area:ttl; font-size:1.06rem; letter-spacing:0.01em; }
.cena-link .quem{ grid-area:quem; font-size:0.86rem; color:var(--faint); }
.cena-link .acao{
  grid-area:acao; white-space:nowrap;
  font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent);
}
.cena-link:hover .num{ color:var(--accent); }

@media (max-width:640px){
  .cena-link{
    grid-template-columns:44px minmax(0,1fr);
    grid-template-areas:"num ttl" "num quem" ". acao";
    gap:6px 14px; padding:18px 0;
  }
  .cena-link .acao{ margin-top:4px; }
}

/* ---- página de leitura ---- */
.body--leitura .wa{ display:none; }   /* o balão cobriria o texto e os controles */
/* o cabeçalho é fixo: o conteúdo precisa começar abaixo dele para a barra
   de cena grudar no lugar certo em vez de ficar por baixo */
.body--leitura{ padding-top:var(--header-h); }

/* barra discreta que mantém cena e título à vista durante a rolagem */
.cena-bar{
  position:sticky; top:var(--header-h); z-index:60;
  background:rgba(0,0,0,.88); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.cena-bar-in{
  max-width:var(--script-col); margin-inline:auto;
  padding:10px var(--script-pad);
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.cena-bar-txt{ display:flex; align-items:baseline; gap:12px; min-width:0; }
.cena-bar-num{
  flex:none; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent);
}
.cena-bar-ttl{
  font-size:0.92rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cena-bar-link{
  flex:none; font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid transparent;
}
.cena-bar-link:hover{ color:var(--ink); border-bottom-color:var(--accent); }
.cena-bar-link:focus-visible{ color:var(--ink); outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:700px){
  .cena-bar-in{ padding-block:8px; }
  .cena-bar-ttl{ display:none; }         /* no celular a barra fica mínima */
  .cena-bar-num{ font-size:0.68rem; }
}

.script-in{
  max-width:var(--script-col); margin-inline:auto;
  padding:clamp(36px,7vh,72px) var(--script-pad) clamp(56px,9vh,96px);
  padding-left:max(var(--script-pad), env(safe-area-inset-left));
  padding-right:max(var(--script-pad), env(safe-area-inset-right));
}

.cena-head{ padding-bottom:clamp(28px,4vh,40px); border-bottom:1px solid var(--line); }
.cena-num{
  font-size:0.76rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--accent); margin-bottom:0.9em;
}
.cena-num .de{ color:var(--faint); letter-spacing:0.18em; }
.cena-titulo{
  font-size:clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  line-height:1.12; letter-spacing:-0.015em;
}
.cena-elenco{
  margin-top:1.1em; font-size:0.95rem; line-height:1.6; color:var(--muted);
}
.cena-elenco .rot{
  display:block; margin-bottom:0.35em;
  font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--faint);
}
.cena-voltar{ margin-top:1.8rem; }

/* botão de contorno discreto, para ações secundárias */
.btn-ghost{
  min-width:0; min-height:48px; padding:0 1.6em;
  border-color:var(--line-2); background:transparent;
  color:var(--muted); letter-spacing:0.14em;
}
.btn-ghost:hover, .btn-ghost:focus-visible{ color:var(--accent-ink); }

/* ---- corpo do roteiro ---- */
.script-corpo{
  padding-top:clamp(30px,5vh,46px);
  font-size:clamp(1.0625rem, 1rem + 0.3vw, 1.15rem);   /* 17px → 18,4px */
  line-height:1.7;
}
.script-corpo .rubrica{
  color:#b3aa9c;                 /* mais claro que o --faint anterior */
  font-style:italic; line-height:1.65;
  margin:1.9em 0 1.5em;
}
.script-corpo .rubrica:first-child{ margin-top:0; }
.script-corpo .fala{ margin-top:1.9em; }
.script-corpo .fala:first-child{ margin-top:0; }
.script-corpo .who{
  margin-bottom:0.35em;
  font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.script-corpo .diz{ color:#c9c9c9; }
.script-corpo .fala--verso .diz{
  padding-left:1.1em; border-left:1px solid rgba(201,162,39,.38);
  color:var(--ink); font-style:italic; line-height:1.95;
}

/* ---- navegação entre cenas ---- */
.cena-nav{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; margin-top:clamp(44px,7vh,72px);
  padding-top:clamp(28px,4vh,40px); border-top:1px solid var(--line);
}
.cena-nav .btn{ min-width:0; padding:0 1.5em; font-size:0.72rem; }
.cena-nav-vazio{ flex:0 0 auto; }
@media (max-width:640px){
  .cena-nav{ flex-direction:column; align-items:stretch; }
  .cena-nav .btn{ width:100%; min-height:52px; }   /* alvo de toque confortável */
  .cena-nav-vazio{ display:none; }
  .cena-nav-indice{ order:3; }
}

/* retratos de quem conduz o curso
   moldura fixa 4:5 com recorte livre: --zoom, --x e --y permitem enquadrar
   fora do centro, coisa que object-fit sozinho não faz */
.person-photo{
  position:relative; overflow:hidden;
  width:100%; max-width:250px; aspect-ratio:4/5;
  margin-bottom:1.8em; background:#0d0d0d;
}
.person-photo img{
  position:absolute; max-width:none;
  width:var(--zoom, 100%);
  left:var(--x, 0); top:var(--y, 0);
}
.person-photo--empty{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:rgba(255,255,255,.14);
}
.person-photo--empty svg{ width:56px; height:auto; }

/* -------------------------------------------------------------- galeria --- */
.grid-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
/* todas as células na mesma proporção: com molduras de alturas diferentes na
   mesma linha sobrava preto embaixo das mais baixas, porque o aspect-ratio
   fixa a altura da moldura e anula o esticamento da grade */
.grid-photos figure{ margin:0; aspect-ratio:4/3; overflow:hidden; }
.grid-photos img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .grid-photos{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid-photos{ grid-template-columns:1fr; } }

/* ------------------------------------------------------- para quem é --- */
.audience{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3vw,44px) clamp(32px,5vw,72px);
  max-width:var(--maxw);
}
.audience li{ position:relative; padding-left:24px; }
.audience li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px 1px rgba(201,162,39,.45);
}
.audience h3{
  font-size:1.06rem; text-transform:uppercase; letter-spacing:0.04em;
  margin-bottom:0.45em;
}
.audience p{ color:var(--muted); font-size:1rem; line-height:1.7; max-width:46ch; }
@media (max-width:720px){ .audience{ grid-template-columns:1fr; } }



/* ------------------------------------------------------ o mito grego --- */
/* texto à esquerda, mármores da Grécia à direita, emergindo do preto */
.myth-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(220px,26vw,340px);
  gap:clamp(36px,5vw,84px);
  align-items:start;
}
.myth-text{ max-width:62ch; }
.myth-text p,
.myth-text p.lede{
  color:var(--muted);
  font-size:1.06rem; line-height:1.8;
}
.myth-text p + p{ margin-top:1.35em; }

/* grega (meandro) — desenhada, não fonte decorativa */
.meander{
  display:block; width:154px; height:18px; margin-bottom:1.5rem;
  color:var(--accent); opacity:.65;
}

/* capitular dourada só no primeiro parágrafo */
.myth-text .lede::first-letter{
  float:left; margin:0.06em 0.14em 0 0;
  font-size:3.3em; line-height:0.82; font-weight:600;
  color:var(--accent);
}

/* espiral quadrada: o meandro fechado sobre si — descida e retorno */
.spiral{
  display:block; width:clamp(120px,14vw,190px); height:auto;
  margin-top:clamp(38px,5vw,64px);
  color:var(--accent); opacity:.62;
}

.myth-art{ display:grid; gap:clamp(28px,4vw,52px); }
.marble{ margin:0; overflow:hidden; }
.marble img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.4) brightness(.82) contrast(1.06) sepia(.16);
  /* dissolve nas bordas: o mármore parece sair do escuro */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 76%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 76%,transparent 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.marble--head img{ aspect-ratio:4/5; object-position:52% 15%; }
.marble--column img{ aspect-ratio:1/2; object-position:41% 30%; }
/* a segunda peça acompanha a leitura em vez de ficar parada no topo */
.marble--column{ position:sticky; top:96px; }

@media (max-width:900px){
  .myth-grid{ grid-template-columns:1fr; }
  .myth-art{
    grid-template-columns:1fr 1fr; align-items:start;
    margin-top:clamp(28px,5vw,48px);
  }
  .marble--column{ position:static; }
}
@media (max-width:520px){
  .myth-art{ grid-template-columns:1fr; max-width:280px; margin-inline:auto; }
}

/* -------------------------------------------------------------- artigos --- */
.article{ max-width:var(--read); margin-inline:auto; }
/* um único corpo de texto no artigo inteiro: lede, parágrafos e citação
   na mesma medida, distinguidos por cor e por filete, não por tamanho */
.article p{ margin-bottom:1.5em; color:var(--muted); font-size:1.06rem; line-height:1.8; }
.article p.lede{ color:var(--ink); font-size:1.06rem; line-height:1.8; }
.article blockquote{
  margin:2.4em 0; padding-left:1.4em; border-left:1px solid var(--accent);
  font-size:1.06rem; line-height:1.8; color:var(--ink); font-style:italic;
}
.article blockquote p{ color:inherit; font-size:inherit; line-height:inherit; margin-bottom:.6em; }
.article blockquote cite{
  display:block; margin-top:1em; font-style:normal;
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--faint);
}
/* a largura total transformava retratos em colunas altíssimas: o limite passa
   a ser a altura, o que encolhe as verticais sem mexer nas horizontais */
.article figure{ margin:2.6em 0; }
.article figure img{
  display:block; width:auto; max-width:100%;
  max-height:min(56vh, 480px);
  margin-inline:auto;
}
.article figcaption{ margin-top:.7em; font-size:0.78rem; color:var(--faint); text-align:center; }
.article-source{
  margin-top:3em; padding-top:1.4em; border-top:1px solid var(--line);
  font-size:0.84rem; color:var(--faint);
}
.article-source a{ color:var(--accent); }
.article-nav{
  max-width:var(--read); margin:4em auto 0; padding-top:1.6em; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.article-nav .dir{ display:block; font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--faint); margin-bottom:.5em; }
.article-nav .ttl{ text-transform:uppercase; letter-spacing:0.04em; font-size:0.9rem; }
.article-nav .next{ text-align:right; }
@media (max-width:560px){ .article-nav{ grid-template-columns:1fr; } .article-nav .next{ text-align:left; } }

.text-list li{ border-top:1px solid var(--line); }
.text-list li:last-child{ border-bottom:1px solid var(--line); }
.text-list a{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  padding:28px 0; transition:opacity var(--dur) var(--ease);
}
.text-list a:hover{ opacity:.62; }
.text-list .k{ font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--faint); }
.text-list h3{ margin:.6em 0 .4em; font-size:clamp(1.1rem,.95rem + .6vw,1.5rem); text-transform:uppercase; letter-spacing:0.01em; }
.text-list p{ color:var(--muted); font-size:0.94rem; max-width:60ch; }
.text-list .arrow{ font-size:1.3rem; color:var(--faint); }

/* ------------------------------------------------------------- formul. --- */
.field{ margin-bottom:20px; }
.field label{
  display:block; margin-bottom:.6em;
  font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted);
}
.field .req{ color:var(--accent); }
.field input,.field textarea,.field select{
  width:100%; min-height:50px; padding:.85em 1em;
  background:transparent; border:1px solid var(--line-2); border-radius:0;
  transition:border-color var(--dur) var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--faint); }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--accent); }
.field select{ appearance:none; -webkit-appearance:none; }
.select-wrap{ position:relative; }
.select-wrap::after{
  content:""; position:absolute; right:1.1em; top:calc(50% - 4px);
  width:8px; height:8px; border-right:1px solid var(--muted); border-bottom:1px solid var(--muted);
  transform:rotate(45deg); pointer-events:none;
}
.field-err{ margin-top:.5em; font-size:0.8rem; color:var(--danger); display:none; }
.field.has-error input,.field.has-error textarea{ border-color:var(--danger); }
.field.has-error .field-err{ display:block; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .row2{ grid-template-columns:1fr; } }
.form-status{
  margin-top:16px; padding:1em 1.2em; border:1px solid var(--accent);
  color:var(--ink); font-size:0.88rem; display:none;
}
.form-status.is-visible{ display:block; }

.form-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:start; }
@media (max-width:900px){ .form-cols{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- rodapé --- */
.site-footer{
  border-top:1px solid var(--line);
  padding:clamp(48px,8vh,80px) var(--pad-x) 32px;
  font-size:0.84rem;
}
.footer-grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{
  font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--faint);
  margin:0 0 1.2em; font-weight:500;
}
.footer-grid li{ margin-bottom:.7em; color:var(--muted); }
.footer-grid a:hover{ color:var(--ink); }
.footer-bottom{
  max-width:var(--maxw); margin:clamp(40px,7vh,70px) auto 0; padding-top:24px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:0.76rem; color:var(--faint);
}

/* -------------------------------------------------------------- utilit. --- */
.reveal{ opacity:0; }
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--ink); color:var(--bg); padding:.8em 1.4em;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{ top:16px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.crumb{ font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); margin-bottom:1.6em; }
.crumb a:hover{ color:var(--ink); }
.page-head{ padding:calc(96px + clamp(48px,10vh,120px)) var(--pad-x) clamp(34px,6vh,62px); border-bottom:1px solid var(--line); }
/* a seção que vem logo depois do cabeçalho não precisa do respiro cheio:
   o vão somado dos dois passava de 160px */
.page-head + .section{ padding-top:clamp(34px,4.6vh,58px); }
.mt-2{ margin-top:1.2rem; } .mt-4{ margin-top:2.2rem; }
.mt-5{ margin-top:clamp(2.8rem,4vw,4rem); }


/* ==========================================================================
   Contagem regressiva
   ========================================================================== */
.countdown{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
  max-width:640px; margin:2.6rem auto 0;
}
.countdown > div{ background:var(--bg); padding:1.5rem .5rem 1.2rem; }
.countdown .num{
  display:block; line-height:1; font-weight:600; letter-spacing:-0.02em;
  font-size:clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.countdown .lbl{
  display:block; margin-top:.85em;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}
.countdown.is-over{ grid-template-columns:1fr; }
.countdown.is-over .num{ font-size:clamp(1.4rem,1rem+1.4vw,2rem); }
.cd-note{ margin-top:1.6rem; font-size:1.05rem; }

/* faixa da contagem regressiva: compacta, para não roubar a página */
.cd-section .eyebrow{ margin-bottom:0.75em; }
.cd-section .countdown{ margin-top:1.5rem; max-width:560px; }
.cd-section .countdown > div{ padding:1.05rem .5rem .85rem; }
.cd-section .countdown .num{ font-size:clamp(1.8rem, 1.1rem + 2.1vw, 2.9rem); }
.cd-section .countdown .lbl{ margin-top:.7em; }
.cd-section .cd-note{ margin-top:1.05rem; }
.cd-section .actions{ margin-top:1.4rem; }
@media (max-width:520px){
  .countdown > div{ padding:1.1rem .3rem .9rem; }
  .countdown .lbl{ letter-spacing:.14em; font-size:.56rem; }
}

/* ==========================================================================
   WhatsApp flutuante
   ========================================================================== */
.wa{
  position:fixed; z-index:120;
  right:clamp(12px,2.2vw,28px); bottom:clamp(12px,2.2vw,28px);
  right:max(clamp(12px,2.2vw,28px), env(safe-area-inset-right));
  bottom:max(clamp(12px,2.2vw,28px), env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.wa-bubble{
  position:relative; max-width:270px;
  background:#15161a; border:1px solid var(--line-2); border-radius:16px;
  padding:16px 42px 16px 18px;
  font-size:.92rem; line-height:1.45; color:var(--ink);
  box-shadow:0 20px 54px rgba(0,0,0,.65);
  opacity:0; transform:translateY(8px);
  transition:opacity 420ms var(--ease), transform 420ms var(--ease);
}
.wa-bubble.is-visible{ opacity:1; transform:none; }
.wa-bubble[hidden]{ display:none; }
.wa-bubble::after{
  content:""; position:absolute; right:24px; bottom:-7px;
  width:12px; height:12px; background:#15161a;
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  transform:rotate(45deg);
}
.wa-close{
  position:absolute; top:7px; right:7px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:1rem; line-height:1; border-radius:50%;
}
.wa-close:hover{ color:var(--ink); }
.wa-btn{
  width:58px; height:58px; border-radius:50%; flex:none;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 36px rgba(0,0,0,.55);
  transition:transform var(--dur) var(--ease);
}
.wa-btn:hover{ transform:scale(1.06); }
.wa-btn svg{ width:30px; height:30px; color:#fff; }
@media (max-width:560px){
  .wa-bubble{ max-width:210px; font-size:.85rem; padding:14px 36px 14px 15px; }
  .wa-btn{ width:52px; height:52px; }
  .wa-btn svg{ width:27px; height:27px; }
}


/* ==========================================================================
   Rastro de luz do cursor
   Só em telas com mouse; desligado com "movimento reduzido".
   ========================================================================== */
.trail{
  position:fixed; inset:0; z-index:90;
  pointer-events:none; overflow:hidden;
  mix-blend-mode:screen;
}
.trail i{
  position:absolute; top:0; left:0;
  display:block; border-radius:50%;
  background:radial-gradient(circle closest-side,
              rgba(240,215,150,.30), rgba(201,162,39,.12) 50%, transparent 72%);
  will-change:transform, opacity;
  transform:translate3d(-100px,-100px,0);
}


/* cabeçalho de página com fotografia ao fundo */
.page-head--photo{ position:relative; isolation:isolate; overflow:hidden; }
.page-head--photo .ph-media{ position:absolute; inset:0; z-index:-2; }
.page-head--photo .ph-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.page-head--photo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.86) 38%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.8) 100%);
}
@media (max-width:760px){
  .page-head--photo::before{
    background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.9) 100%);
  }
}


/* ==========================================================================
   Percurso do curso — anéis concêntricos que se desenham
   ========================================================================== */
.stages{
  display:grid; grid-template-columns:minmax(260px,380px) 1fr;
  gap:clamp(32px,5vw,80px); align-items:center;
}
.stages-viz{ position:relative; }
.stages-viz svg{ width:100%; height:auto; overflow:visible; }
/* três círculos que se cruzam: no preto, as sobreposições somam luz */
.stages-viz .v{
  mix-blend-mode:screen;
  opacity:0; transform:scale(.86);
  transform-box:fill-box; transform-origin:center;
  transition:opacity 760ms var(--ease), transform 760ms var(--ease), filter 320ms var(--ease);
}
.v1{ fill:rgba(212,170,44,.46);  stroke:#e0b62c; }
.v2{ fill:rgba(232,226,210,.34); stroke:#efe9dc; }
.v3{ fill:rgba(198,88,45,.46);   stroke:#d4663a; }
.stages-viz .v{ stroke-width:1.5; }
.stages.lit .v1{ opacity:1; transform:none; transition-delay:0ms; }
.stages.lit .v2{ opacity:1; transform:none; transition-delay:320ms; }
.stages.lit .v3{ opacity:1; transform:none; transition-delay:640ms; }

.stages-list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(22px,2.6vw,38px); }
.stages-list li{
  position:relative; padding-left:26px;
  opacity:0; transform:translateY(14px);
  transition:opacity 640ms var(--ease), transform 640ms var(--ease);
}
.stages-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:10px; height:10px; border-radius:50%;
}
.stages-list li:nth-child(1)::before{ background:#c9a227; }
.stages-list li:nth-child(2)::before{ background:#ddd6c6; }
.stages-list li:nth-child(3)::before{ background:#b4552f; }
.stages.lit .stages-list li:nth-child(1){ opacity:1; transform:none; transition-delay:180ms; }
.stages.lit .stages-list li:nth-child(2){ opacity:1; transform:none; transition-delay:600ms; }
.stages.lit .stages-list li:nth-child(3){ opacity:1; transform:none; transition-delay:1020ms; }
.stages-list .k{
  display:block; font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--faint); margin-bottom:0.55em;
}
.stages-list h3{ font-size:1.18rem; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:0.5em; }
.stages-list p{ color:var(--muted); font-size:0.98rem; max-width:52ch; }

/* passar o mouse num item destaca o círculo correspondente */
.stages:has(.stages-list li:nth-child(1):hover) .v2,
.stages:has(.stages-list li:nth-child(1):hover) .v3,
.stages:has(.stages-list li:nth-child(2):hover) .v1,
.stages:has(.stages-list li:nth-child(2):hover) .v3,
.stages:has(.stages-list li:nth-child(3):hover) .v1,
.stages:has(.stages-list li:nth-child(3):hover) .v2{ opacity:.3; }
.stages:has(.stages-list li:nth-child(1):hover) .v1,
.stages:has(.stages-list li:nth-child(2):hover) .v2,
.stages:has(.stages-list li:nth-child(3):hover) .v3{ filter:brightness(1.5); }

@media (prefers-reduced-motion: reduce){
  .stages-viz .v{ opacity:1 !important; transform:none !important; }
  .stages-list li{ opacity:1 !important; transform:none !important; }
}
@media (max-width:820px){
  .stages{ grid-template-columns:1fr; gap:clamp(28px,6vw,44px); }
  .stages-viz{ max-width:300px; margin-inline:auto; }
}

/* local dos encontros, logo abaixo da faixa de fatos */
.venue{
  margin-top:1.7rem; text-align:center;
  font-size:clamp(1.1rem, 1rem + 0.5vw, 1.42rem);
  line-height:1.55; color:var(--muted);
}
.venue strong{ color:var(--ink); font-weight:600; }
.venue a{ color:var(--accent); border-bottom:1px solid rgba(201,162,39,.35); }
.venue a:hover{ border-bottom-color:var(--accent); }
.venue .addr{ display:block; margin-top:.45em; font-size:0.96em; color:var(--muted); }


/* faixa de fotografia em largura total */
.band{
  position:relative; overflow:hidden;
  height:clamp(320px, 52vh, 560px);
  border-block:1px solid var(--line);
}
.band img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.6) 100%);
}
.band figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--pad-x); text-align:center;
  font-size:0.9rem; color:rgba(242,236,224,.85);
  text-shadow:0 1px 20px rgba(0,0,0,.8);
}
/* faixa que continua a seção acima, sem linha de corte */
.band--joined{ border-top:0; }

/* no celular o botão flutuante encostava no texto do rodapé: 46px e mais
   perto da borda liberam espaço sem descer abaixo do alvo de toque mínimo */
@media (max-width:520px){
  .wa-btn{ width:46px; height:46px; }
  .wa-btn svg{ width:24px; height:24px; }
  .wa-bubble{ max-width:min(230px, calc(100vw - 76px)); font-size:.86rem; padding:13px 36px 13px 15px; }
}

/* seção do grupo, na página Sobre */
.equipe-lede{ max-width:52ch; }
.equipe-nota{
  margin-top:1.6rem; font-size:0.92rem; color:var(--faint);
}
.equipe-nota a{ color:var(--muted); border-bottom:1px solid var(--line-2); }
.equipe-nota a:hover, .equipe-nota a:focus-visible{ color:var(--accent); border-bottom-color:var(--accent); }

/* ------------------------------------------------------------------ blog --- */
/* grade de cartões no formato do blog do Antigo Novo Método:
   imagem 8:5 no topo, título, resumo e "ler mais", tudo centralizado */
.posts{
  /* margem própria: o .mt-4 do HTML seria anulado por um margin:0 aqui */
  list-style:none; margin:clamp(2.6rem,4vw,3.6rem) 0 0; padding:0;
  display:grid; gap:clamp(18px,2vw,26px);
  grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
}
.post-card{ display:flex; }
.post-card > a{
  display:flex; flex-direction:column; width:100%;
  border:1px solid var(--line); background:var(--bg-soft);
  color:var(--ink); text-align:center;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.post-card > a:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.post-card > a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.post-img{ display:block; overflow:hidden; }
.post-img img{
  display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover;
  transition:transform 620ms var(--ease);
}
.post-card > a:hover .post-img img{ transform:scale(1.04); }

.post-body{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,22px) clamp(20px,2.2vw,28px);
}
.post-body h3{
  font-size:1.08rem; line-height:1.3; letter-spacing:0.01em;
  margin-bottom:0.75em;
}
.post-resumo{
  display:block; flex:1;
  color:var(--muted); font-size:0.92rem; line-height:1.65;
}
.post-more{
  display:block; margin-top:1.2em;
  font-size:0.86rem; color:var(--accent);
  border-bottom:1px solid transparent;
}
.post-card > a:hover .post-more{ border-bottom-color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  .post-card > a, .post-card > a:hover{ transform:none; }
  .post-img img, .post-card > a:hover .post-img img{ transform:none; }
}

/* assinatura do autor nos artigos */
.byline{
  margin-top:1.1rem; font-size:0.94rem; color:var(--muted);
}
.byline strong{ color:var(--ink); font-weight:600; }
.page-head .lede a{ color:var(--accent); border-bottom:1px solid transparent; }
.page-head .lede a:hover, .page-head .lede a:focus-visible{ border-bottom-color:var(--accent); }

/* abertura dos artigos do blog: a foto de destaque entra como fundo,
   no mesmo padrão das demais páginas, que já abriam com imagem */
.page-head--artigo{ min-height:clamp(340px, 52vh, 520px); display:flex; flex-direction:column; justify-content:flex-end; }
.page-head--artigo .ph-media img{ object-position:50% 38%; }
.page-head--artigo .crumb{ color:rgba(242,236,224,.68); }
.page-head--artigo .eyebrow{ color:var(--accent); }
.page-head--artigo h1,
.page-head--artigo .byline,
.page-head--artigo .lede,
.page-head--artigo .crumb,
.page-head--artigo .eyebrow{
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 22px rgba(0,0,0,.8);
}
.page-head--artigo .lede{ color:rgba(242,236,224,.9); max-width:56ch; }
.page-head--artigo .lede strong{ color:var(--ink); }
.page-head--artigo .byline{ color:rgba(242,236,224,.82); }
.page-head--artigo .byline strong{ color:var(--ink); }

/* o véu padrão soma dois degradês e apagava demais a foto de abertura do
   artigo: aqui ele escurece só o canto onde o texto se apoia */
.page-head--artigo::before{
  background:
    linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.52) 40%, rgba(0,0,0,.12) 74%, rgba(0,0,0,.24) 100%),
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.04) 44%, rgba(0,0,0,.52) 100%);
}
@media (max-width:760px){
  .page-head--artigo::before{
    background:linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.24) 42%, rgba(0,0,0,.72) 100%);
  }
}

/* ------------------------------------------------------------- submenu --- */
.main-nav .has-sub{ position:relative; }
.main-nav .subnav{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px);
  display:flex; flex-direction:column; gap:0; min-width:210px;
  margin:0; padding:8px 0; list-style:none;
  background:rgba(8,8,8,.97); border:1px solid var(--line);
  backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
  z-index:120;
}
/* faixa invisível ligando o item ao menu, para o ponteiro não "cair" no vão */
.main-nav .has-sub::after{
  content:""; position:absolute; top:100%; left:0; right:0; height:14px;
}
.main-nav .has-sub:hover .subnav,
.main-nav .has-sub:focus-within .subnav{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(4px);
}
.main-nav .subnav a{
  display:block; padding:9px 20px; white-space:nowrap;
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted);
}
.main-nav .subnav a:hover,
.main-nav .subnav a:focus-visible{ color:var(--ink); background:rgba(255,255,255,.05); }
.main-nav .subnav a.is-active{ color:var(--accent); }

/* no menu mobile o submenu fica sempre aberto, recuado sob o item pai */
@media (max-width:900px){
  .main-nav .subnav{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    min-width:0; background:none; border:0; backdrop-filter:none;
    padding:6px 0 2px; margin-left:18px;
    border-left:1px solid var(--line);
  }
  .main-nav .has-sub::after{ display:none; }
  .main-nav .subnav a{ padding:8px 0 8px 16px; }
}
@media (prefers-reduced-motion: reduce){
  .main-nav .subnav{ transition:opacity 1ms; }
}

/* a galeria abre logo abaixo do herói: sem título repetido, o respiro cheio
   deixava uma faixa preta grande entre a foto de capa e as imagens */
.galeria{ padding-top:clamp(20px,3vh,34px); }

/* páginas internas: a capa não precisa da tela inteira como numa entrada —
   ocupava um viewport e empurrava o conteúdo todo para baixo da dobra */
.panel--sub{ min-height:clamp(320px, 56vh, 540px); }
.panel--sub .panel-inner{ padding-bottom:clamp(34px, 5vh, 56px); }
.panel--sub + .section{ padding-top:clamp(30px, 4.4vh, 54px); }

/* supervisão: retrato ao lado do texto, no mesmo enquadramento dos demais */
.supervisao{
  display:grid; grid-template-columns:250px minmax(0,1fr);
  gap:clamp(28px,4vw,56px); align-items:start;
}
.supervisao .person-photo{ margin-bottom:0; }
.supervisao-txt{ max-width:var(--read); }
.supervisao-txt .eyebrow{ margin-top:0; }
@media (max-width:760px){
  .supervisao{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------- manifesto --- */
/* Uma cor só para o corpo do texto. O que varia não é a cor, é a luz:
   cada parágrafo acende quando a leitura chega nele e permanece aceso —
   que é exatamente o que o segundo parágrafo descreve. */
.manifesto{
  position:relative; isolation:isolate;
  /* o preto chapado deixava a seção morta; o dourado deixava o fundo
     amarronzado. Aqui é só um respiro neutro, sem dominante de cor */
  background:linear-gradient(180deg,
    #000 0%, #0a0a0b 22%, #0b0b0c 50%, #080809 78%, #000 100%);
}
.manifesto p{
  color:#cfcac2;
  font-size:1.08rem; line-height:1.85; margin-bottom:1.6em;
}

/* capitular dourada, como na página do mito */
.manifesto > .wrap-read > p:first-of-type::first-letter{
  float:left; margin:0.06em 0.14em 0 0;
  font-size:3.3em; line-height:0.82; font-weight:600;
  color:var(--accent);
}

/* fio de luz: mais claro no centro, some nas pontas — o brilho de uma
   superfície polida atravessada pela luz */
.fio-luz{
  height:1px; border:0; margin:0 0 clamp(30px,5vh,52px);
  background:linear-gradient(90deg,
    transparent 0%, rgba(201,162,39,.12) 18%, rgba(201,162,39,.75) 50%,
    rgba(201,162,39,.12) 82%, transparent 100%);
}

/* citação com retrato: o rosto entra à esquerda, o texto respira à direita */
.citacao{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(22px,3vw,34px); align-items:start;
  margin:2.8em 0;
}
.citacao .retrato{
  grid-row:1 / span 2; width:clamp(108px,11vw,132px); height:clamp(108px,11vw,132px); border-radius:50%;
  object-fit:cover; filter:grayscale(.18) brightness(1.02);
}
.citacao blockquote{ margin:0; grid-column:2; }
.citacao blockquote p{
  color:var(--ink); font-size:1.06rem; line-height:1.75;
  font-style:italic; margin:0;
}
.citacao figcaption{ grid-column:2; margin-top:.9em; }
.citacao .quem{
  display:block; font-size:0.7rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent);
}
.citacao .onde{
  display:block; margin-top:.4em; font-size:0.86rem; color:var(--faint);
}
/* sem retrato, o texto ocupa a largura toda */
.citacao:not(:has(.retrato)){ grid-template-columns:minmax(0,1fr); }
.citacao:not(:has(.retrato)) blockquote,
.citacao:not(:has(.retrato)) figcaption{ grid-column:1; }
@media (max-width:560px){
  .citacao{ grid-template-columns:minmax(0,1fr); }
  .citacao .retrato{ grid-row:auto; grid-column:1; }
  .citacao blockquote, .citacao figcaption{ grid-column:1; }
}


/* foto encaixada no texto, com a leitura correndo ao lado */
.foto-grupo{
  float:left; width:min(48%, 340px);
  margin:.5em 1.9em 1.4em 0;
}
.foto-grupo img{ display:block; width:100%; }
.foto-grupo figcaption{
  margin-top:.7em; font-size:0.82rem; line-height:1.5; color:var(--faint);
}
@media (max-width:640px){
  .foto-grupo{ float:none; width:100%; margin:2em 0; }
}