/* PROPOSTA P2 (só depois que o Codex incluir fonts/ no HTML, na allowlist do build e na CSP): acrescentar ao INÍCIO de styles/visual.css.
   Fontes auto-hospedadas (download autorizado por Pedro em 27/09), variáveis, subconjunto latino; licença OFL em fonts/.
   Com elas, o site deixa de chamar o Google Fonts: a CSP pode retirar fonts.googleapis.com e fonts.gstatic.com. */
@font-face{font-family:Montserrat;src:url("../fonts/montserrat-normal-latin.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;src:url("../fonts/montserrat-italico-latin.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url("../fonts/inter-normal-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* =====================================================================
   styles/visual.css — camada visual do Claude (Fase 6B), único CSS liberado pelo handoff final do Codex (889d5f5).
   Gerado a partir de prototipos/fase6-portabilidade/proposta/css/{tokens,sistema,pagina}.css (repositório A).
   Carrega DEPOIS de styles/site.css: sobrescreve o legado sem quebrar menu, foco, fallback e conteúdo visível sem JS.
   Direção híbrida aprovada (G1). Nada de demonstração, dado fictício, esquema científico ou portfólio.
   ===================================================================== */

/* =====================================================================
   TOKENS — Pedro Almeida · design system (FINAL-DESIGN-PROPOSAL.md §5)
   PROPOSTA DE PORTABILIDADE (Fase 6B), NÃO LIBERADA: igual aos tokens da Fase 5 aprovada (G1), menos o que só
   o protótipo usa. Entra na integração só depois do manifesto final de handoff do Codex.
   Componentes usam só tokens de PAPEL. Primitivos existem para compor papéis.
   ===================================================================== */

/* Fontes: Montserrat e Inter vêm do Google Fonts que o index.html do Codex já carrega (a CSP permite).
   Fontes locais = proposta separada ao Codex (arquivos novos exigem inclusão no HTML e na allowlist do build). */

/* Fallback com métricas medidas no Chrome contra a fonte final (Arial como base).
   A troca Montserrat/Inter não desloca nada: o CLS de 0,163 da fase anterior veio disso + larguras em ch. */
@font-face{font-family:"Montserrat Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");font-weight:600 900;
  size-adjust:113.51%;ascent-override:85.28%;descent-override:22.11%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");font-weight:400 600;
  size-adjust:106.79%;ascent-override:90.74%;descent-override:22.57%;line-gap-override:0%}

:root{
  color-scheme:dark;

  /* ---------- primitivos da marca (identidade preservada) ---------- */
  --navy:#0B1B2B; --deep:#14283D; --deepest:#08151F;
  --gold:#F2B705; --gold-light:#FFD452; --cyan:#2EC4B6; --ice:#F7F9FB;

  /* ---------- superfícies ---------- */
  --surface-night:var(--navy); --surface-deep:var(--deep); --surface-deepest:var(--deepest);
  --surface-day:var(--ice); --surface-day-raised:#FFFFFF; --surface-day-sunken:#E6ECF1;

  /* ---------- texto (contraste sobre a superfície correspondente) ---------- */
  --text-on-dark:#F7F9FB;   --text-on-dark-2:#C3CFDA;  --text-on-dark-3:#A9B8C6;  --text-on-dark-4:#8A99A8;  /* 17 · 11 · 7,4 · 5,1–6,3 :1 */
  --text-on-light:#0B1B2B;  --text-on-light-2:#3C4E60; --text-on-light-3:#54677A;                            /* 17 · 8,1 · 5,5 :1 */

  /* ---------- marca e ação ---------- */
  --action:var(--gold); --action-hover:var(--gold-light); --on-action:#0B1B2B;   /* 9,58:1 — texto sobre dourado nunca é branco */
  --gold-text:#8A6803;                                                            /* dourado como TEXTO no claro: 4,9:1 (D4) */
  --accent:var(--cyan);                                                           /* ciência, informação, seção atual */

  /* ---------- linhas e campos ---------- */
  --line-on-dark:rgba(247,249,251,.14); --line-on-light:#D6DEE6;                  /* decorativas */
  --input-on-dark:#6E8AA6; --input-on-light:#7C8D9D;                              /* limite de campo ≥ 3:1 */

  /* ---------- véus, molduras e sombras (derivados da paleta) ---------- */
  --surface-bar:rgba(11,27,43,.92);                                               /* barra fixa sobre o conteúdo */
  --scrim-night:rgba(11,27,43,.94); --scrim-night-0:rgba(11,27,43,0);              /* degradê para texto sobre foto */
  --line-gold:rgba(242,183,5,.55);                                                 /* moldura e rede da abertura (decoração de marca) */
  --shadow-float:0 18px 40px -12px rgba(0,0,0,.55);
  --horizon:linear-gradient(180deg,var(--navy) 0%,#17344F 46%,#C9D6E1 84%,var(--ice) 100%);           /* noite → dia */
  --horizon-dusk:linear-gradient(180deg,var(--ice) 0%,#C9D6E1 16%,#17344F 54%,var(--navy) 100%);    /* dia → noite */
  --horizon-lab:linear-gradient(180deg,var(--ice) 0%,#9FB2C4 18%,#12273A 58%,var(--deepest) 100%); /* dia → laboratório */
  --horizon-deep:linear-gradient(180deg,var(--deepest) 0%,var(--navy) 100%);
  --lab-light:radial-gradient(60% 55% at 50% 0%,rgba(46,196,182,.18) 0%,rgba(46,196,182,0) 70%);    /* luz de bancada */
  --lab-grid:rgba(46,196,182,.07);                                                                     /* papel milimetrado */
  --line-on-dark-strong:rgba(247,249,251,.28);

  /* ---------- cores transitórias do movimento (só existem durante a entrada) ---------- */
  --text-entry:#566E88;        /* quadro zero do nome: 3,3:1 sobre navy (mínimo para texto grande) */
  --text-quote-start:#7D8C9B;  /* início da citação ligada à rolagem: 3,3:1 sobre gelo */

  /* ---------- foco ---------- */
  --focus-on-dark:var(--gold); --focus-on-light:var(--gold-text);                 /* 9,6:1 · 4,9:1 */

  /* ---------- estado (VITORDIS main, app/globals.css, 3e57166) — o dourado NUNCA comunica estado ---------- */
  --success-on-dark:#35B87A; --danger-on-dark:#FF766C; --info-on-dark:#2EC4B6; --warning-on-dark:#E9A72A;
  --success-on-light:#1F7A4D; --danger-on-light:#C2372F; --info-on-light:#1D7B73; --warning-on-light:#8A5A00;

  /* ---------- tipografia ---------- */
  --font-display:Montserrat,"Montserrat Fallback",system-ui,sans-serif;
  --font-text:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-name:clamp(3.2rem,min(9vw,16svh),9rem);        /* só o nome; o maior texto da página */
  --fs-chapter:clamp(2.6rem,8vw,6.5rem);               /* ≤ 72% do nome */
  --fs-quote:clamp(1.8rem,4.2vw,3.6rem);
  --fs-h2:clamp(1.9rem,4.2vw,3.4rem);
  --fs-h3:clamp(1.15rem,1.6vw,1.4rem);
  --fs-lead:clamp(1.05rem,1.3vw,1.2rem);
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-label:.72rem;
  --fs-reading:clamp(1.5rem,3vw,2.4rem);

  /* ---------- espaço (base 4) ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --section-y:clamp(72px,11vh,144px);

  /* ---------- grid ---------- */
  --container:75rem;                                   /* 1200 px */
  --pad:20px;                                          /* margem lateral */
  --gutter:16px;
  --cols:4;

  /* ---------- raios ---------- */
  --r-pill:100px; --r-lg:16px; --r-md:10px; --r-photo:4px;

  /* ---------- movimento ---------- */
  --dur-ui:180ms; --dur-ui-lg:250ms; --dur-reveal:700ms; --dur-scene:1300ms;
  --ease-ui:cubic-bezier(.2,.7,.3,1); --ease-scene:cubic-bezier(.65,0,.35,1);

  /* ---------- camadas e elementos fixos ---------- */
  --z-nav:100; --z-consent:150; --z-skip:200; --z-modal:300;
  --bar-h:60px;
  --aviso-reserva:170px;                               /* faixa do aviso de cookies aberto (medido na T1.1: 136 px no celular) */
}
@media (max-width:759.98px){ :root{ --fs-name:min(18vw,5.5rem); } }   /* capa do celular: o nome ocupa a largura */
@media (min-width:760px){ :root{ --pad:32px; --gutter:24px; --cols:8; --aviso-reserva:230px; } }   /* cartão: 152 px medidos */
@media (min-width:1024px){ :root{ --pad:clamp(32px,4.2vw,64px); --gutter:clamp(24px,2vw,32px); --cols:12; --bar-h:68px; } }

/* =====================================================================
   SISTEMA — base, superfícies, grid, tipografia, componentes, estados e movimento.
   PROPOSTA DE PORTABILIDADE (Fase 6B), NÃO LIBERADA. Vem de prototipos/fase5-experiencia/css/sistema.css (G1):
   - sem os componentes que só o protótipo usa (selo de evidência, demonstração);
   - com adaptadores para a marcação que continua do Codex: menu (lote 1), aviso de cookies, contato e rodapé.
   Nenhum valor de cor aqui: só tokens (tokens.css).
   ===================================================================== */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* elementos fixos reservam a sua faixa: o foco e as âncoras nunca param embaixo deles (WCAG 2.4.11) */
  scroll-padding-top:calc(var(--bar-h) + var(--sp-4));scroll-padding-bottom:var(--sp-4)}
/* aviso de cookies aberto: reserva por CSS, sem JS (no protótipo era ResizeObserver; se o Codex preferir medir, basta trocar) */
html:has(#cookies:not([hidden])){scroll-padding-bottom:calc(var(--aviso-reserva) + var(--sp-4))}
body{font:400 var(--fs-body)/1.6 var(--font-text);background:var(--surface-night);color:var(--text-on-dark);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
/* o site.css legado tira o sublinhado de todo link; aqui ele volta (link no texto precisa se distinguir) e sai só onde há outro sinal */
a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;text-wrap:balance}
p{text-wrap:pretty}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- superfícies: cada capítulo define o contexto de cor dos componentes ---------- */
/* .contact e .bio: seções claras do HTML legado; sem isto, sem o patch aplicado, o texto do contato ficava claro sobre claro (1,5:1, Lighthouse) */
.sup-noite,.sup-profunda,.sup-azul,.sup-dia,.contact,.bio{background:var(--c-bg);color:var(--c-text)}
.sup-noite,.sup-profunda,.sup-azul,body{
  --c-bg:var(--surface-night); --c-text:var(--text-on-dark); --c-text-2:var(--text-on-dark-2); --c-text-3:var(--text-on-dark-3);
  --c-line:var(--line-on-dark); --c-focus:var(--focus-on-dark); --c-label:var(--action); --c-num:var(--action); --c-link-line:var(--action)}
.sup-profunda{--c-bg:var(--surface-deepest)}
.sup-azul{--c-bg:var(--surface-deep)}
.sup-dia,.contact,.bio{color-scheme:light;
  --c-bg:var(--surface-day); --c-text:var(--text-on-light); --c-text-2:var(--text-on-light-2); --c-text-3:var(--text-on-light-3);
  --c-line:var(--line-on-light); --c-focus:var(--focus-on-light); --c-label:var(--gold-text); --c-num:var(--gold-text); --c-link-line:var(--gold-text)}
strong{font-weight:600;color:var(--c-text)}

/* ---------- foco ---------- */
/* mesma especificidade do foco legado (a:focus-visible…), declarado depois: vale a cor de foco de cada superfície (dourado no escuro, dourado-texto no claro) */
:focus-visible,:is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--c-focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--sp-2);top:-100px;z-index:var(--z-skip);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:var(--action);color:var(--on-action);font:700 .9rem var(--font-display);text-decoration:none}
.skip:focus{top:var(--sp-2)}

/* ---------- grid ---------- */
/* .wrap: contêiner do HTML legado que continua com o Codex (contato, rodapé) */
.conteiner,.wrap{width:100%;max-width:calc(var(--container) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.grade{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}

/* ---------- tipografia ---------- */
/* .eyebrow, .sec-title, .sec-lead: nomes do HTML legado (contato), com o mesmo estilo dos capítulos novos */
.t-rotulo,.eyebrow{display:block;font:700 var(--fs-label)/1.35 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--c-label)}
.t-h2,.sec-title{font:800 var(--fs-h2)/1.04 var(--font-display);letter-spacing:-.03em}
.t-lead,.sec-lead{font:500 var(--fs-lead)/1.55 var(--font-text);color:var(--c-text-2)}
.t-citacao{font:italic 500 var(--fs-quote)/1.12 var(--font-display);letter-spacing:-.02em}
.t-num{font-variant-numeric:tabular-nums}

/* ---------- botões ----------
   Rótulo longo QUEBRA LINHA (sem nowrap): em 320 px "Ver lista completa no Lattes ↗" estourava a página (teste do Codex, fontes de reserva).
   A borda transparente é obrigatória: em alto contraste (forced-colors) ela vira o contorno do botão.
   .btn-gold, .btn-ghost e .btn-sm: nomes do HTML legado (menu, aviso, formulário), mapeados para as variantes do sistema. */
.btn{--btn-bg:transparent;--btn-fg:var(--c-text);--btn-bd:var(--c-line);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 1.5em;
  border:2px solid transparent;border-radius:var(--r-pill);background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 0 0 1.5px var(--btn-bd);
  font:700 .92rem/1.2 var(--font-display);letter-spacing:.01em;text-decoration:none;text-align:center;
  transition:background-color var(--dur-ui) var(--ease-ui),box-shadow var(--dur-ui) var(--ease-ui),transform var(--dur-ui) var(--ease-ui)}
.btn--primario,.btn-gold{--btn-bg:var(--action);--btn-fg:var(--on-action);--btn-bd:transparent}
:is(.btn--primario,.btn-gold):hover{--btn-bg:var(--action-hover);transform:translateY(-1px)}
:is(.btn--secundario,.btn-ghost):hover{--btn-bd:var(--accent)}
.btn:active{transform:none}
.btn--sm,.btn-sm{min-height:44px;padding:0 1.15em;font-size:.84rem}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.grupo-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5)}
.link-acao{display:inline-flex;align-items:center;gap:.35em;min-height:44px;font:600 .92rem var(--font-display);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:var(--c-link-line)}
.link-acao:hover{text-decoration-thickness:3px}
@media (max-width:759.98px){ .grupo-acoes .btn{flex:1 1 100%} }

/* ---------- leituras (números de produção) ---------- */
/* colunas fixas + 2 linhas reservadas: a troca da fonte de fallback pela final não muda altura nem posição (CLS) */
.leituras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3) var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--c-line)}
.leituras > div{display:flex;flex-direction:column;gap:var(--sp-1)}
.leituras dt{order:1;font:800 var(--fs-reading)/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--c-num)}
.leituras dd{order:2;min-height:2.6em;font:600 var(--fs-label)/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-3)}
@media (min-width:1024px){ .leituras{gap:var(--sp-4) var(--sp-7)} .leituras dd{min-height:0;white-space:nowrap} }
@media (max-width:759.98px){
  .leituras dd{letter-spacing:.04em;font-size:.66rem}
}

/* ---------- chips e listas ---------- */
/* chips: rótulos de CONTEÚDO (tema, competência), nunca de estado */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chips li{padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--c-line);font:500 .84rem/1.35 var(--font-text);color:var(--c-text-2)}
.lista-marcada li{position:relative;padding:var(--sp-3) 0 var(--sp-3) var(--sp-5);border-top:1px solid var(--c-line);color:var(--c-text-2)}
.lista-marcada li::before{content:"";position:absolute;left:0;top:1.2em;width:8px;height:8px;border-radius:2px;border:2px solid var(--accent)}

/* ---------- capítulos ---------- */
.capitulo{padding-block:var(--section-y)}
.cap-cab{max-width:48rem}
.cap-cab .t-rotulo{margin-bottom:var(--sp-4)}
.cap-cab .t-lead{margin-top:var(--sp-5);max-width:42rem}
.t-capitulo{font:900 var(--fs-chapter)/.9 var(--font-display);letter-spacing:-.05em}
.t-h3{font:800 clamp(1.25rem,2vw,1.6rem)/1.15 var(--font-display);letter-spacing:-.015em}

/* =====================================================================
   ADAPTADORES — marcação e JS do Codex. O HTML não muda; só o visual.
   ===================================================================== */

/* ---------- menu (lote 1 do Codex) ----------
   Sem JS: links no fluxo, visíveis. Com .nav-ready (posta pelo JS do Codex), até 900 px viram painel recolhível.
   O corte de 900 px é o mesmo do matchMedia do JS: mudar um exige mudar o outro. */
#nav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);background:var(--surface-bar);border-bottom:1px solid transparent;color:var(--text-on-dark);
  transition:border-color var(--dur-ui) var(--ease-ui)}
#nav.scrolled{border-bottom-color:var(--line-on-dark)}
.navin{max-width:calc(var(--container) + 2 * var(--pad));min-height:var(--bar-h);margin-inline:auto;padding:0 var(--pad);justify-content:flex-start;display:flex;align-items:center;gap:var(--sp-4)}
.logo,.fnav a,.navlinks a,.skip{text-decoration:none}
.logo{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;margin-right:auto;text-decoration:none;font:800 .95rem/1.15 var(--font-display);letter-spacing:-.01em}
.logo .mark{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:var(--r-md);background:var(--action);color:var(--on-action);font:900 .85rem var(--font-display)}
.logo span{display:block;font:600 .66rem/1.3 var(--font-display);letter-spacing:.08em;color:var(--action)}
.navlinks{display:flex;align-items:center;gap:var(--sp-1)}
.navlinks a:not(.btn){display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-3);text-decoration:none;font:500 .88rem var(--font-text);color:var(--text-on-dark-2)}
.navlinks a:not(.btn):hover{color:var(--text-on-dark)}
.navlinks .btn{margin-left:var(--sp-2)}
.burger{display:none;min-width:44px;min-height:44px;border-radius:var(--r-pill);font-size:1.35rem;line-height:1}
/* 7 links + marca + CTA: entre 901 e 1199 px só cabem sem o subtítulo da marca e com links mais justos (medir de novo se o menu mudar) */
@media (min-width:901px) and (max-width:1199.98px){ .navlinks a:not(.btn){padding:0 var(--sp-2);font-size:.82rem} .logo span{display:none} }
@media (max-width:900px){
  /* sem o JS do menu: links no fluxo, em linhas compactas (alvos de 44 px), para não empurrar a abertura para fora da tela */
  #nav{position:static}
  .navin{flex-wrap:wrap;padding-block:var(--sp-2)}
  /* o site.css legado põe estes links em coluna, com largura total e fundo; aqui voltam a ser linhas compactas */
  .navlinks{flex-direction:row;flex-wrap:wrap;width:100%;gap:0 var(--sp-1);padding:0 0 var(--sp-3);background:none;border-bottom:0}
  .navlinks a:not(.btn){width:auto;padding:0 var(--sp-2);border-bottom:0;font-size:.86rem}
  .navlinks .btn{width:auto;margin:0 0 0 var(--sp-1)}
  html:not(.nav-ready) .abertura{padding-top:var(--sp-5)}   /* a barra não é fixa: não há faixa a reservar no topo */
  .nav-ready #nav{position:fixed}
  .nav-ready .navin{flex-wrap:nowrap;padding-block:0}
  .nav-ready .burger{display:inline-grid;place-items:center}
  .nav-ready .navlinks{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - var(--bar-h));overflow-y:auto;
    padding:var(--sp-2) var(--pad) var(--sp-6);background:var(--surface-night);border-bottom:1px solid var(--line-on-dark)}
  .nav-ready .navlinks.open{display:flex}
  /* menu aberto (com JS): lista em coluna, alvos largos */
  .nav-ready .navlinks{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0}
  .nav-ready .navlinks a:not(.btn){width:100%;min-height:48px;padding:0;border-top:1px solid var(--line-on-dark);font:700 1.05rem var(--font-display);color:var(--text-on-dark)}
  .nav-ready .navlinks .btn{width:100%;margin:var(--sp-4) 0 0}
}

/* ---------- aviso de cookies (T1.1 + Fase 5) ----------
   Celular: faixa compacta embaixo. A partir de 760 px: cartão no canto direito, fora da coluna do nome e do CTA. */
.cookies{max-width:none;margin:0;position:fixed;left:var(--sp-3);right:var(--sp-3);bottom:calc(var(--sp-3) + env(safe-area-inset-bottom,0px));z-index:var(--z-consent);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-lg);
  background:var(--surface-deepest);border:1px solid var(--line-on-dark);box-shadow:var(--shadow-float);color:var(--text-on-dark)}
/* sem isto o display:flex vence o atributo hidden e o aviso nunca some */
.cookies[hidden]{display:none}
.cookies p{flex:1 1 100%;font-size:.8rem;line-height:1.45;color:var(--text-on-dark-2)}
.cookies-acoes{display:flex;gap:var(--sp-2);flex:1 1 100%}
.cookies-acoes .btn{flex:1 1 0}
@media (min-width:760px){
  .cookies{left:auto;right:var(--sp-4);bottom:var(--sp-4);width:min(30rem,calc(100% - 2 * var(--sp-4)));padding:var(--sp-4);gap:var(--sp-3)}
  .cookies p{font-size:var(--fs-small);line-height:1.5}
}

/* ---------- contato (HTML do Codex; o lote 2 ainda vai mudar o formulário: revisar depois do handoff) ---------- */
.contact .cap-cab,.contact .sec-lead{max-width:48rem}
.contact .sec-title{margin-top:var(--sp-4)}
.contact .sec-lead{margin-top:var(--sp-5)}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-7);margin-top:var(--sp-7)}
@media (min-width:1024px){ .cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)} }
.field + .field{margin-top:var(--sp-4)}
.field label{display:block;margin-bottom:var(--sp-2);font:600 var(--fs-small) var(--font-text);color:var(--c-text-2)}
/* limite do campo com --input-on-light (≥ 3:1); a linha decorativa não serve para campo */
.field :is(input,select,textarea){width:100%;min-height:48px;padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--input-on-light);border-radius:var(--r-md);
  background:var(--surface-day-raised);color:var(--text-on-light);font:400 1rem var(--font-text)}
.field textarea{min-height:8rem;resize:vertical}
.field ::placeholder{color:var(--text-on-light-3);opacity:1}
.contact form .btn{margin-top:var(--sp-5)}
.clist li{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-4) 0;border-top:1px solid var(--c-line)}
.clist .ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:var(--r-md);background:var(--surface-night);color:var(--action)}
.clist b{display:block;font:700 .94rem var(--font-display);color:var(--c-text)}
.clist :is(a,span){font-size:.92rem;color:var(--c-text-2)}
.clist a{display:inline-block;min-height:24px;padding-block:2px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--c-link-line);overflow-wrap:anywhere}

/* ---------- rodapé (HTML do Codex: os links do rodapé são contrato do GA4, local "rodape") ---------- */
footer{background:var(--surface-deepest);color:var(--text-on-dark);border-top:1px solid var(--line-on-dark);
  padding-block:var(--sp-7) calc(var(--sp-7) + env(safe-area-inset-bottom,0px))}
body:has(#cookies:not([hidden])) footer{padding-bottom:calc(var(--sp-7) + var(--aviso-reserva) + env(safe-area-inset-bottom,0px))}
.fgrid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-5)}
.fnav{display:flex;flex-wrap:wrap;gap:0 var(--sp-2)}
.fnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-2);font-size:var(--fs-small);color:var(--text-on-dark-3);text-decoration:none}
.fnav a:hover{color:var(--text-on-dark)}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line-on-dark);
  font-size:var(--fs-small);color:var(--text-on-dark-3)}
.fbot > span:last-child{font:700 var(--fs-label)/1.35 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--action)}
.linkbtn{min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--action)}

/* ---------- alto contraste: o sistema apaga fundos e sombras; limite de componente precisa de borda ---------- */
@media (forced-colors:active){
  :is(.btn--secundario,.btn-ghost),.burger,.cookies,.nav-ready .navlinks{border:1px solid CanvasText}
  .chips li{border-color:CanvasText}
}

/* =====================================================================
   MOVIMENTO
   Só existe sob @media (prefers-reduced-motion: no-preference). A CSP do Codex proíbe script inline, então a antiga classe .anim
   (posta por script no <head>) saiu: sem JS a entrada também toca, e o conteúdo continua visível (nunca abaixo de .35).
   Regras: o LCP (nome, retrato) e o CTA nunca começam invisíveis; nada abaixo de opacidade .35;
   só opacity, transform, stroke-dashoffset (+ color em texto grande); um dono por elemento; tudo termina < 5 s.
   ===================================================================== */
@keyframes mv-surge{from{opacity:.35;transform:translateY(var(--mv-dist,12px))}to{opacity:1;transform:none}}
@keyframes mv-traco{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mv-no{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes mv-exposicao{from{opacity:.55}to{opacity:0}}
@keyframes mv-clareia{from{color:var(--text-entry);transform:translateY(.05em)}to{color:var(--text-on-dark);transform:none}}
@keyframes mv-acende{from{color:var(--text-quote-start)}to{color:var(--c-text)}}
@keyframes mv-horizonte{from{transform:scaleX(.08)}to{transform:none}}
@keyframes mv-sai{to{opacity:.4;transform:translateY(-12%)}}   /* sai de cena sem ficar abaixo de .35 */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* =====================================================================
   PÁGINA — capítulos. PROPOSTA DE PORTABILIDADE (Fase 6B), NÃO LIBERADA.
   Vem de prototipos/fase5-experiencia/css/pagina.css (G1), SEM o que não pode ir à saída pública:
   esquema de adsorção e isotermas (validação científica), portfólio e facetas (D6, D14, D15),
   demonstrações com dados fictícios e os cartões de contato do protótipo (o formulário real é do Codex, lote 2).
   Larguras da abertura em rem, nunca em ch (a troca de fonte mudaria a quebra de linha → CLS).
   ===================================================================== */

/* ---------- abertura ---------- */
/* ancorada no topo: se algo abaixo mudar de altura, o nome e o retrato não se movem (centralizar vertical causava CLS) */
.abertura{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;align-items:flex-start;
  padding-block:calc(var(--bar-h) + var(--sp-7)) var(--sp-7)}
.abertura__grade{align-items:start;row-gap:var(--sp-6)}
.abertura__texto{grid-column:1 / span 4;position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.abertura__papeis{margin-bottom:var(--sp-4)}
.abertura__nome{font:900 var(--fs-name)/.86 var(--font-display);letter-spacing:-.045em}
.abertura__linha{display:block}
.abertura__sobrenome{display:block;margin-top:var(--sp-4);font:600 clamp(.78rem,1vw,.95rem)/1.25 var(--font-display);letter-spacing:.3em;text-transform:uppercase;font-style:normal;color:var(--c-label)}
/* separador preso à palavra anterior (&nbsp;): a quebra de linha nunca começa com "·" */
.abertura__areas{margin-top:var(--sp-5);font:600 .95rem/1.5 var(--font-display);color:var(--c-text);word-spacing:.35em}
.abertura__areas span{color:var(--accent)}
.abertura__apresentacao{max-width:34rem;margin-top:var(--sp-4);font-size:clamp(1rem,1.15vw,1.08rem);color:var(--c-text-2)}
.abertura .grupo-acoes{margin-top:var(--sp-6)}
.abertura .leituras{align-self:stretch;max-width:36rem;margin-top:var(--sp-7)}

/* .photo continua no HTML (o site.js do Codex usa '.photo img' para o fallback): anula o max-width e a ordem legados */
.abertura__retrato{max-width:none;order:0;grid-column:5 / -1;position:relative;z-index:1;margin:0;justify-self:end;
  width:min(100%, calc((100svh - var(--bar-h) - 8rem) * .8))}
.abertura__foto{position:relative;aspect-ratio:4 / 5}
.abertura__foto::before{content:"";position:absolute;inset:18px -18px -18px 18px;z-index:-1;border:1px solid var(--line-gold);border-radius:var(--r-photo)}
.abertura__foto picture,.abertura__foto img{width:100%;height:100%}
.abertura__foto img{object-fit:cover;object-position:50% 20%;border-radius:var(--r-photo)}
.abertura__foto .ph{position:absolute;inset:0;display:grid;place-items:center;padding:var(--sp-5);text-align:center;border-radius:var(--r-photo);
  background:var(--surface-deep);color:var(--c-text-2);font-size:var(--fs-small)}
.abertura__foto .ph b{display:block;font:800 1.15rem var(--font-display);color:var(--action)}
.abertura__exposicao{position:absolute;inset:0;border-radius:var(--r-photo);background:var(--surface-night);opacity:0;pointer-events:none}
.abertura__selo{position:absolute;left:-18px;bottom:36px;z-index:2;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:var(--surface-deep);border:1px solid var(--line-on-dark);box-shadow:var(--shadow-float);font:700 .82rem/1.35 var(--font-display)}
.abertura__selo span{display:block;font-weight:600;color:var(--c-text-2)}
/* rede hexagonal: ORNAMENTO ABSTRATO, aprovado por Pedro em 28/09 só como gráfico decorativo (aria-hidden, sem legenda);
   não representa a estrutura da ferrita nem de nenhum material. SVG estático: aparece sem JavaScript.
   Fica ATRÁS do retrato: só aparece no vão entre as colunas e não cruza a frase escrita na parede da foto */
.abertura__rede{position:absolute;z-index:-1;left:-46%;top:-8%;width:92%;height:auto;overflow:visible;pointer-events:none}
.abertura__rede path{fill:none;stroke:var(--line-gold);stroke-width:1}
.abertura__rede circle{fill:var(--action);transform-box:fill-box;transform-origin:center}
/* escalonamento da entrada da rede: antes era style="--i:N" no HTML, proibido pela CSP (style-src-attr 'none') */
.abertura__rede path:nth-of-type(1){--i:0}.abertura__rede path:nth-of-type(2){--i:1}.abertura__rede path:nth-of-type(3){--i:2}.abertura__rede path:nth-of-type(4){--i:3}.abertura__rede path:nth-of-type(5){--i:4}.abertura__rede path:nth-of-type(6){--i:5}.abertura__rede path:nth-of-type(7){--i:6}.abertura__rede path:nth-of-type(8){--i:7}.abertura__rede path:nth-of-type(9){--i:8}
.abertura__rede circle:nth-of-type(1){--i:0}.abertura__rede circle:nth-of-type(2){--i:1}.abertura__rede circle:nth-of-type(3){--i:2}.abertura__rede circle:nth-of-type(4){--i:3}

/* abaixo de 1024 px, papéis e áreas podem quebrar em 1 ou 2 linhas conforme a fonte (fallback × final):
   reservar 2 linhas impede que a troca de fonte empurre os CTAs (CLS medido de 0,076 em 412 px no Lighthouse) */
@media (max-width:1023.98px){ .abertura__papeis{font-size:.66rem;letter-spacing:.15em;min-height:2.7em} .abertura__areas{min-height:3em} }
@media (max-width:759.98px){ .abertura__papeis{font-size:.64rem;letter-spacing:.1em} }
@media (min-width:1024px){
  .abertura__texto{grid-column:1 / span 7}
  .abertura__retrato{grid-column:8 / -1}
}

/* celular: capa da Fase 5 — retrato em faixa na largura toda, nome sobreposto à base (decisão de Pedro em 03/10; substitui o 4:5 inteiro no celular) */
@media (max-width:759.98px){
  .abertura{display:block;min-height:0;padding-block:var(--bar-h) var(--sp-7)}
  .abertura > .conteiner{padding-inline:0}
  .abertura__grade{display:flex;flex-direction:column;row-gap:0}
  .abertura__retrato{order:-1;width:100%;justify-self:auto}
  .abertura__foto{aspect-ratio:auto;height:36svh;min-height:240px;max-height:440px}
  .abertura__foto::before{display:none}
  .abertura__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--scrim-night) 4%,var(--scrim-night-0) 55%)}
  .abertura__foto img,.abertura__exposicao{border-radius:0}
  .abertura__foto img{object-position:50% 22%}
  .abertura__selo{left:auto;right:var(--pad);top:var(--sp-4);bottom:auto;box-shadow:none}
  .abertura__rede{z-index:1;left:auto;right:-34%;top:-12%;width:78%}   /* no celular não há vão: a rede fica sobre a estante */
  .abertura__texto{padding-inline:var(--pad);margin-top:calc(var(--fs-name) * -.95)}
  .abertura__nome{order:1}
  .abertura__papeis{order:2;margin:var(--sp-4) 0 0}
  .abertura__areas{order:3;margin-top:var(--sp-2);font-size:.88rem}
  .abertura .grupo-acoes{order:4;width:100%;margin-top:var(--sp-5)}
  .abertura__apresentacao{order:5;margin-top:var(--sp-5)}
  .abertura .leituras{order:6;margin-top:var(--sp-6);max-width:none}
}

/* ---------- primeira transição: da noite para o dia ---------- */
.horizonte{position:relative;height:clamp(140px,26vh,260px);background:var(--horizon)}
.horizonte__linha{position:absolute;left:var(--pad);right:var(--pad);top:46%;height:1px;
  background:linear-gradient(90deg,transparent,var(--action),transparent)}

/* ---------- Quem sou ---------- */
.quem-sou{padding-block:var(--sp-6) var(--section-y)}
.quem-sou__grade{row-gap:var(--sp-7)}
.quem-sou__cabeca,.quem-sou__corpo{grid-column:1 / -1}
.quem-sou__cabeca .t-rotulo{margin-bottom:var(--sp-4)}
.quem-sou__cabeca .t-lead{margin-top:var(--sp-5);max-width:36rem}
.quem-sou__corpo{max-width:42rem;color:var(--c-text-2)}
.quem-sou__corpo p + p{margin-top:var(--sp-4)}
.quem-sou__citacao{margin:var(--sp-7) 0;padding-left:var(--sp-5);border-left:2px solid var(--c-label);color:var(--c-text)}
.quem-sou__citacao .w{display:inline}
@media (min-width:1024px){
  .quem-sou__cabeca{grid-column:1 / span 5;align-self:start;position:sticky;top:calc(var(--bar-h) + var(--sp-7))}
  .quem-sou__corpo{grid-column:7 / -1}
}

@media (prefers-reduced-motion:no-preference){
/* ---------- movimento desta página (ver regras em sistema.css) ---------- */
.abertura__exposicao{animation:mv-exposicao var(--dur-scene) var(--ease-scene) both}
.abertura__linha{animation:mv-clareia 1s var(--ease-scene) both}
.abertura__linha + .abertura__linha{animation-delay:80ms}
.abertura__rede path{stroke-dasharray:1;animation:mv-traco 1.1s var(--ease-scene) both;animation-delay:calc(150ms + var(--i) * 60ms)}
.abertura__rede circle{animation:mv-no .5s var(--ease-ui) both;animation-delay:calc(1s + var(--i) * 100ms)}
:is(.abertura__papeis,.abertura__sobrenome,.abertura__areas,.abertura__apresentacao,.abertura .leituras,.abertura__selo){
  animation:mv-surge .8s .4s var(--ease-ui) both}
/* o CTA e o grupo de ações ficam FORA da entrada: visíveis e clicáveis desde o primeiro quadro */

@supports (animation-timeline:view()){
  /* ao sair da abertura, a rede sobe e esmaece; a linha do horizonte se abre; a citação acende palavra por palavra */
  .abertura__retrato{animation:mv-sai linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .horizonte__linha{animation:mv-horizonte linear both;animation-timeline:view();animation-range:entry 20% cover 60%}
  .quem-sou__citacao .w{animation:mv-acende linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
}

}

@media (forced-colors:active){
  .abertura__exposicao,.abertura__foto::after{display:none}
  .abertura__rede path{stroke:CanvasText} .abertura__rede circle{fill:CanvasText}
  .abertura__selo{border:1px solid CanvasText}
  .abertura__nome{line-height:1}   /* a placa de fundo do sistema cobria o rótulo acima com a entrelinha .86 */
}

/* =====================================================================
   FASE 5 — CAPÍTULOS
   A abertura, o horizonte e Quem sou (acima) não foram alterados.
   Ritmo de superfícies: noite → dia (Quem sou) → noite (Atuação) → dia (Educação, Aulas)
   → laboratório (Pesquisa, Publicações) → azul profundo (Tecnologia) → noite (Trajetória) → assinatura → dia (Contato)
   ===================================================================== */

/* grades de uma coluna com trilha declarada: sem isto, a coluna implícita cresce até o conteúdo que não quebra
   (o selo de demonstração, por exemplo) e a página estoura em 360 px — medido na primeira rodada da Fase 5 */
:is(.frentes,.disciplinas,.beneficios,.bancadas,.producao,.fichas,.aulas__painel){grid-template-columns:minmax(0,1fr)}
.bancada,.disciplina,.ficha{min-width:0}

/* ---------- faixas de transição entre dia e noite (mesmo componente do primeiro horizonte) ---------- */
.horizonte--anoitecer{background:var(--horizon-dusk)}
.horizonte--laboratorio{background:var(--horizon-lab)}
.horizonte--baixa{height:clamp(96px,16vh,180px)}

/* ---------- Atuação: índice das quatro frentes ---------- */
.frentes{margin-top:var(--sp-7);display:grid;border-top:1px solid var(--c-line)}
.frente{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-5);row-gap:var(--sp-2);padding:var(--sp-6) 0;border-bottom:1px solid var(--c-line)}
.frente__num{font:800 .9rem/1 var(--font-display);color:var(--c-num);font-variant-numeric:tabular-nums;padding-top:.55em}
.frente h3{font:900 clamp(1.7rem,3.4vw,2.8rem)/1 var(--font-display);letter-spacing:-.035em}
.frente p,.frente .link-acao{grid-column:2}
.frente p{max-width:40rem;color:var(--c-text-2)}
@media (min-width:1024px){ .frentes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-8)} }

/* ---------- Educação: só entra se o patch OPCIONAL for aprovado (rótulos provisórios, D13) ---------- */
.educacao{padding-block:var(--sp-7) var(--sp-8)}
.disciplinas{margin-top:var(--sp-7);display:grid;gap:var(--sp-4)}
.disciplina{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border-radius:var(--r-lg);background:var(--surface-day-raised);border:1px solid var(--line-on-light)}
.disciplina__icone{width:52px;height:52px;color:var(--text-on-light)}
.disciplina__icone path,.disciplina__icone circle,.disciplina__icone rect{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.disciplina__icone .destaque{stroke:var(--gold-text)}
.disciplina p{color:var(--c-text-2)}
.disciplina .lista-marcada{margin-top:var(--sp-2);font-size:var(--fs-small)}
.disciplina .lista-marcada small{display:block;color:var(--c-text-3);font-variant-numeric:tabular-nums}
@media (min-width:1024px){ .disciplinas{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)} }

/* ---------- Aulas: um painel noturno dentro do capítulo claro (a ação) ---------- */
.aulas{padding-block:0 var(--section-y)}
.aulas__painel{border-radius:var(--r-lg);padding:clamp(24px,5vw,64px);display:grid;gap:var(--sp-6)}
.aulas__painel .t-lead{max-width:44rem}
.beneficios{display:grid;gap:var(--sp-3)}
.beneficios li{padding:var(--sp-4) var(--sp-5);border:1px solid var(--c-line);border-radius:var(--r-md)}
.beneficios b{display:block;font:700 1rem var(--font-display);margin-bottom:var(--sp-1)}
.beneficios span{color:var(--c-text-2);font-size:var(--fs-small)}
@media (min-width:760px){ .beneficios{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- Laboratório (Pesquisa + Publicações): profundidade e luz controlada ---------- */
.laboratorio{position:relative;isolation:isolate;overflow:hidden}
.laboratorio__plano{position:absolute;z-index:-2;left:-20%;right:-20%;top:0;height:60vh;pointer-events:none;
  background-image:linear-gradient(var(--lab-grid) 1px,transparent 1px),linear-gradient(90deg,var(--lab-grid) 1px,transparent 1px);background-size:48px 48px;
  transform:perspective(900px) rotateX(58deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(180deg,black,transparent 85%);mask-image:linear-gradient(180deg,black,transparent 85%)}
.laboratorio__luz{position:absolute;z-index:-1;inset:0 0 auto;height:90vh;background:var(--lab-light);pointer-events:none}
.bancadas{margin-top:var(--sp-7);display:grid;gap:var(--sp-4)}
.bancada{padding:var(--sp-5);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--surface-night);box-shadow:var(--shadow-float)}
.bancada h3{margin-bottom:var(--sp-4)}
.producao{margin-top:var(--sp-8);display:grid;gap:var(--sp-6)}
.producao .leituras{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
.producao .leituras dd{white-space:normal;min-height:0;letter-spacing:.02em;text-transform:none;font:500 var(--fs-small)/1.45 var(--font-text)}
@media (min-width:760px){ .producao .leituras{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:760px){ .bancadas{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Pesquisa e Publicações dividem o laboratório: a segunda seção cola na primeira (antes, style="padding-top:0" no HTML) */
.laboratorio .capitulo + .capitulo{padding-top:0}

/* publicações: fichas de caderno de laboratório */
.fichas{margin-top:var(--sp-7);display:grid;gap:var(--sp-4)}
.ficha{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-5);row-gap:var(--sp-2);padding:var(--sp-5);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--surface-night)}
.ficha__ano{grid-row:span 5;font:800 clamp(1.4rem,2.6vw,2rem)/1 var(--font-display);color:var(--c-num);font-variant-numeric:tabular-nums}
.ficha h3{font:700 clamp(1.02rem,1.5vw,1.15rem)/1.4 var(--font-display)}
.ficha__autores{font-size:var(--fs-small);color:var(--c-text-3)}
.ficha__veiculo{font-size:var(--fs-small);color:var(--c-text-2);font-style:italic}
.ficha .link-acao{min-height:24px;font-size:.84rem}
.publicacoes__rodape{margin-top:var(--sp-6);display:grid;gap:var(--sp-4);align-items:center;padding-top:var(--sp-5);border-top:1px solid var(--c-line)}
.publicacoes__rodape p{color:var(--c-text-2);max-width:48rem}
.publicacoes__rodape b{display:block;color:var(--c-text);font:700 1rem var(--font-display);margin-bottom:var(--sp-1)}
@media (min-width:1024px){ .fichas{grid-template-columns:repeat(2,minmax(0,1fr))} .publicacoes__rodape{grid-template-columns:minmax(0,1fr) auto} }
@media (max-width:759.98px){ .ficha{grid-template-columns:1fr} .ficha__ano{grid-row:auto} }

/* ---------- Tecnologia: módulos (o portfólio fica no protótipo até D6, D14 e D15) ---------- */
.modulos{margin-top:var(--sp-7);display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--sp-3)}
.modulos li{padding:var(--sp-4);border-left:2px solid var(--accent);background:var(--surface-night);border-radius:0 var(--r-md) var(--r-md) 0}
.modulos b{display:block;font:700 .98rem var(--font-display);margin-bottom:var(--sp-1)}
.modulos span{font-size:var(--fs-small);color:var(--c-text-2)}
/* parágrafos de consulta com data-assunto (HTML do Codex, lote 2): texto de apoio abaixo dos módulos e das ações de Aulas */
.modulos + p{margin-top:var(--sp-6);color:var(--c-text-2)}
.aulas__painel > p{max-width:48rem;font-size:var(--fs-small);color:var(--c-text-2)}

/* ---------- Trajetória: linha do tempo ligada à rolagem (sem sequestrar a rolagem) ---------- */
.trajetoria__grade{row-gap:var(--sp-7)}
.trajetoria__cab,.linha{grid-column:1 / -1}
.linha{position:relative;padding-left:var(--sp-7);view-timeline-name:--linha}
.linha__trilho,.linha__progresso{position:absolute;left:11px;top:6px;bottom:6px;width:2px;border-radius:2px}
.linha__trilho{background:var(--line-on-dark-strong)}
.linha__progresso{background:var(--accent);transform-origin:50% 0}
.marco{position:relative;padding-bottom:var(--sp-7)}
.marco:last-child{padding-bottom:0}
.marco__ponto{position:absolute;left:calc(-1 * var(--sp-7) + 4px);top:4px;width:16px;height:16px;border-radius:50%;border:2px solid var(--accent);background:var(--surface-night)}
.marco__ponto::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.marco__periodo{font:700 var(--fs-label)/1.3 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--c-label);font-variant-numeric:tabular-nums}
.marco h3{margin:var(--sp-2) 0 var(--sp-2)}
.marco p:not(.marco__periodo){max-width:40rem;color:var(--c-text-2)}
@media (min-width:1024px){
  .trajetoria__cab{grid-column:1 / span 5;align-self:start;position:sticky;top:calc(var(--bar-h) + var(--sp-7))}
  .linha{grid-column:7 / -1}
}

/* ---------- Assinatura ---------- */
.assinatura{padding-block:var(--section-y);text-align:left}
.assinatura__frase{font:900 clamp(2.2rem,6.4vw,5.6rem)/1 var(--font-display);letter-spacing:-.04em;max-width:16ch}
.assinatura__frase em{font-style:normal;color:var(--action)}
.assinatura__autor{margin-top:var(--sp-5);font:600 var(--fs-label) var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--c-text-3)}

@media (prefers-reduced-motion:no-preference){
/* ---------- movimento dos capítulos (mesmas regras: só opacity/transform/stroke; nada abaixo de .35; tudo dentro de @supports) ---------- */
@keyframes mv-acende-luz{from{opacity:.35;transform:scaleY(.8)}to{opacity:1;transform:none}}
@keyframes mv-preenche{from{transform:scaleY(0)}to{transform:none}}
@keyframes mv-revela{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@supports (animation-timeline:view()){
  :is(.horizonte--anoitecer,.horizonte--laboratorio,.horizonte--baixa) .horizonte__linha{animation:mv-horizonte linear both;animation-timeline:view();animation-range:entry 20% cover 60%}
  /* educação: os ícones se desenham ao entrar (o conhecimento sendo construído) */
  .disciplina__icone{animation:mv-revela linear both;animation-timeline:view();animation-range:entry 10% cover 40%}   /* D16: 1 por ícone (antes, 1 por traço: 11) */
  /* laboratório: a luz da bancada acende ao entrar */
  .laboratorio__luz{transform-origin:50% 0;animation:mv-acende-luz linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  /* trajetória: a linha acompanha a leitura; cada marco se acende ao chegar ao centro da tela */
  .linha__progresso{animation:mv-preenche linear both;animation-timeline:--linha;animation-range:entry 50% exit 50%}   /* acompanha o meio da tela ao longo da lista */
  .assinatura__frase{animation:mv-acende linear both;animation-timeline:view();animation-range:entry 0% cover 45%}   /* D16: a frase inteira (antes, 1 por palavra) */
}

}

@media (forced-colors:active){
  .laboratorio__plano,.laboratorio__luz{display:none}
  .linha__progresso,.marco__ponto::after{background:CanvasText} .modulos li{border:1px solid CanvasText}
  .ficha,.bancada,.disciplina,.beneficios li{border:1px solid CanvasText}
}

/* Fase 6C, D1: enquadramento integral 4:5 a partir de 760 px (no celular vale a capa). */
@media (min-width:760px){
  .abertura__foto{aspect-ratio:4 / 5;height:auto;min-height:0;max-height:none}
  .abertura__foto img{display:block;object-fit:contain;object-position:center}
}

.abertura__foto picture{display:block}


/* boot.js indisponível: o menu fica no fluxo e, com o aviso aberto, empurra o CTA. Só nesse estado a capa fica mais baixa e o nome deixa de sobrepor a foto. */
@media (max-width:759.98px){
  html:not(.nav-ready):has(#cookies:not([hidden])) .abertura__foto{height:64px;min-height:0}
  html:not(.nav-ready):has(#cookies:not([hidden])) .abertura__texto{margin-top:var(--sp-3)}
  html:not(.nav-ready):has(#cookies:not([hidden])) .abertura__papeis{margin-top:var(--sp-2)}
  html:not(.nav-ready):has(#cookies:not([hidden])) .abertura .grupo-acoes{margin-top:var(--sp-3)}
}

/* Na capa de 320 px, reservar o rosto e manter o selo junto da borda direita. */
@media (max-width:359.98px){
  .abertura__selo{right:var(--sp-2);padding:var(--sp-2)}
}