/* ============================================================
   Escola de Pacientes DF — design system
   Estilo: minimalista Apple/Notion — Inter, branco, cinza-claro,
   azul de ação, caixas arredondadas, animações sutis
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f8f9fa;
  --surface: #ffffff;
  --ink: #202124;
  --muted: #5f6368;
  --line: #dadce0;
  --accent: #1a73e8;
  --accent-dark: #185abc;
  --ink-band: #1a73e8;
  --radius: 24px;
  --radius-sm: 12px;
  /* a sombra carrega o realce especular do vidro (inset no topo),
     assim todo componente que já usava --shadow vira vidro de uma vez */
  --shadow: 0 1px 2px rgba(60, 64, 67, .07), 0 6px 18px rgba(60, 64, 67, .07), inset 0 1px 0 var(--glass-rim);
  --shadow-hover: 0 6px 18px rgba(60, 64, 67, .1), 0 26px 60px rgba(60, 64, 67, .18), inset 0 1px 0 var(--glass-rim);
  --font-sans: "Google Sans", "Google Sans Text", Roboto, Arial, sans-serif;
  --font-text: "Google Sans Text", "Google Sans", Roboto, Arial, sans-serif;
  --font-serif: var(--font-sans);
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* pastéis Google */
  --g-azul: #1a73e8;     --g-azul-bg: #e8f0fe;    --g-azul-dark: #185abc;
  --g-verde: #188038;    --g-verde-bg: #e6f4ea;   --g-verde-dark: #0d652d;
  --g-amarelo: #f9ab00;  --g-amarelo-bg: #fef7e0; --g-amarelo-dark: #b06000;
  --g-vermelho: #d93025; --g-vermelho-bg: #fce8e6; --g-vermelho-dark: #b31412;
  --dropdown-bg: rgba(255, 255, 255, .96);

  /* ---- Liquid Glass ----
     vidro = camada translúcida + realce especular na borda de cima + sombra difusa.
     --glass-blur só é aplicado onde há poucos elementos na tela (desfoque custa caro). */
  --glass-tint: rgba(255, 255, 255, .46);
  --glass-tint-strong: rgba(255, 255, 255, .66);
  --glass-blur: 28px;
  --glass-sat: 200%;
  --glass-rim: rgba(255, 255, 255, .98);
  --glass-edge: rgba(32, 33, 36, .11);
  --glass-edge-hover: rgba(32, 33, 36, .2);
  --glass-shadow: 0 2px 10px rgba(60, 64, 67, .06), 0 12px 34px rgba(60, 64, 67, .07);
  --glass-shadow-hover: 0 4px 14px rgba(60, 64, 67, .09), 0 20px 48px rgba(60, 64, 67, .13);
  --glass-sheen: linear-gradient(150deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .28) 24%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, 0) 68%);
  --soft-glass: rgba(248, 249, 250, .58);
}

/* ---------- Modo escuro ---------- */

:root[data-theme="dark"] {
  --bg: #131314; --bg-soft: #1e1f20; --surface: #1e1f20;
  --ink: #e3e3e3; --muted: #9aa0a6; --line: #3c4043;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3), inset 0 1px 0 var(--glass-rim);
  --shadow-hover: 0 6px 18px rgba(0, 0, 0, .46), 0 26px 60px rgba(0, 0, 0, .58), inset 0 1px 0 var(--glass-rim);
  --g-azul-bg: #1f2a3a; --g-verde-bg: #1f2e22; --g-amarelo-bg: #332b16; --g-vermelho-bg: #3a1f1e;
  --dropdown-bg: rgba(30, 31, 32, .96);
  --glass-tint: rgba(46, 47, 51, .44);
  --glass-tint-strong: rgba(38, 39, 43, .68);
  --glass-rim: rgba(255, 255, 255, .22);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-edge-hover: rgba(255, 255, 255, .26);
  --glass-shadow: 0 2px 10px rgba(0, 0, 0, .34), 0 12px 34px rgba(0, 0, 0, .4);
  --glass-shadow-hover: 0 4px 14px rgba(0, 0, 0, .44), 0 20px 48px rgba(0, 0, 0, .54);
  --glass-sheen: linear-gradient(150deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .06) 24%, rgba(255, 255, 255, .01) 48%, rgba(255, 255, 255, 0) 68%);
  --soft-glass: rgba(30, 31, 32, .55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131314; --bg-soft: #1e1f20; --surface: #1e1f20;
    --ink: #e3e3e3; --muted: #9aa0a6; --line: #3c4043;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3), inset 0 1px 0 var(--glass-rim);
    --shadow-hover: 0 6px 18px rgba(0, 0, 0, .46), 0 26px 60px rgba(0, 0, 0, .58), inset 0 1px 0 var(--glass-rim);
    --g-azul-bg: #1f2a3a; --g-verde-bg: #1f2e22; --g-amarelo-bg: #332b16; --g-vermelho-bg: #3a1f1e;
    --dropdown-bg: rgba(30, 31, 32, .96);
    --glass-tint: rgba(46, 47, 51, .44);
    --glass-tint-strong: rgba(38, 39, 43, .68);
    --glass-rim: rgba(255, 255, 255, .22);
    --glass-edge: rgba(255, 255, 255, .14);
    --glass-edge-hover: rgba(255, 255, 255, .26);
    --glass-shadow: 0 2px 10px rgba(0, 0, 0, .34), 0 12px 34px rgba(0, 0, 0, .4);
    --glass-shadow-hover: 0 4px 14px rgba(0, 0, 0, .44), 0 20px 48px rgba(0, 0, 0, .54);
    --glass-sheen: linear-gradient(150deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .06) 24%, rgba(255, 255, 255, .01) 48%, rgba(255, 255, 255, 0) 68%);
    --soft-glass: rgba(30, 31, 32, .55);
  }
}
/* números sobre pastel usam cor de destaque -dark; no escuro isso perde contraste — força --ink */
:root[data-theme="dark"] .stats .stat b { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stats .stat b { color: var(--ink); }
}

/* ============================================================
   Liquid Glass
   Vidro = camada translúcida + realce especular na borda superior
   + sombra difusa. O desfoque (backdrop-filter) é caro: só entra
   onde há poucos elementos por tela. Listas longas (acervo, temas,
   cards de link) recebem só a translucidez e o brilho.
   ============================================================ */

/* Luz ambiente. Sem nada por trás, vidro não parece vidro:
   três halos fixos de alpha baixíssimo dão o que refratar. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 48% at 6% 0%, rgba(26, 115, 232, .2), transparent 64%),
    radial-gradient(52% 42% at 96% 4%, rgba(24, 128, 56, .15), transparent 64%),
    radial-gradient(58% 46% at 78% 96%, rgba(249, 171, 0, .14), transparent 66%),
    radial-gradient(46% 40% at 30% 70%, rgba(217, 48, 37, .09), transparent 66%);
}
:root[data-theme="dark"] body::before { opacity: .5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { opacity: .5; }
}

/* Brilho especular: fina faixa de luz que escorre do canto superior
   esquerdo. É o que separa "vidro" de "caixa transparente". */
.glass,
header.site,
.dropdown,
.search-results,
.page-hero,
.stat,
.card,
.portal,
.award,
.quote,
.embed,
.seal,
.link-card,
.media-card,
.book-card,
.paper-card,
.childlist a,
.topic-grid a,
.archive-band,
.shot { position: relative; isolation: isolate; }

.glass::before,
header.site::before,
.dropdown::before,
.search-results::before,
.page-hero::before,
.stat::before,
.card::before,
.portal::before,
.award::before,
.quote::before,
.embed::before,
.seal::before,
.link-card::before,
.media-card::before,
.book-card::before,
.paper-card::before,
.childlist a::before,
.topic-grid a::before,
.archive-band::before,
.shot::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--glass-sheen);
  pointer-events: none;
}

/* Contorno interno claro em cima, escuro embaixo — a "espessura" do vidro. */
.glass,
.stat,
.card,
.portal,
.award,
.quote,
.embed,
.seal,
.link-card,
.media-card,
.book-card,
.paper-card,
.childlist a,
.topic-grid a,
.shot {
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow);
}
.glass:hover,
.stat:hover,
.card:hover,
.portal:hover,
.award:hover,
.quote:hover,
.embed:hover,
.link-card:hover,
.media-card:hover,
.book-card:hover,
.paper-card:hover,
.topic-grid a:hover {
  border-color: var(--glass-edge-hover);
  box-shadow: var(--shadow-hover);
}

/* Utilitário para superfícies com desfoque real. */
.glass {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ---- Degradação elegante ----
   Navegador sem backdrop-filter, quem pediu menos transparência no
   sistema e quem pediu mais contraste recebem superfícies opacas.
   Basta apagar a translucidez dos tokens: o resto do CSS se ajusta. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  :root {
    --glass-tint: var(--surface); --glass-tint-strong: var(--surface);
    --soft-glass: var(--bg-soft); --dropdown-bg: var(--surface);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-tint: var(--surface); --glass-tint-strong: var(--surface);
    --soft-glass: var(--bg-soft); --dropdown-bg: var(--surface);
    --glass-sheen: none;
  }
  body::before { display: none; }
}
@media (prefers-contrast: more) {
  :root {
    --glass-tint: var(--surface); --glass-tint-strong: var(--surface);
    --soft-glass: var(--bg-soft); --dropdown-bg: var(--surface);
    --glass-sheen: none; --glass-edge: var(--line); --glass-edge-hover: var(--ink);
  }
  body::before { display: none; }
}

/* A luz ambiente respira devagar. 34s é lento o bastante para não competir
   com a leitura — percebe-se ao permanecer na página, não ao chegar nela. */
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: aurora-respira 34s var(--ease) infinite alternate; }
}
@keyframes aurora-respira {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 2%, 0) scale(1.12); }
}

/* Realce de luz que passeia pelo cartão conforme o ponteiro se move.
   Sem JS: a posição vem de --mx/--my, com um centro padrão se ninguém mexer. */
.card::after,
.portal::after,
.stat::after,
.award::after,
.media-card::after,
.book-card::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(38% 60% at var(--mx, 50%) var(--my, 0%),
              rgba(255, 255, 255, .5), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover::after,
.portal:hover::after,
.stat:hover::after,
.award:hover::after,
.media-card:hover::after,
.book-card:hover::after { opacity: 1; }
:root[data-theme="dark"] .card::after,
:root[data-theme="dark"] .portal::after,
:root[data-theme="dark"] .stat::after { background: radial-gradient(38% 60% at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .1), transparent 70%); }

/* Barra de progresso de leitura, nas páginas de conteúdo */
.leitura {
  position: fixed; top: 0; left: 0; z-index: 100;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--g-verde) 60%, var(--g-amarelo));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce) { .leitura { transition: none; } }

/* ---------- Foco visível (navegação por teclado) ---------- */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* pular direto para o conteúdo — primeiro Tab da página */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 200; padding: .7rem 1.3rem;
  background: var(--accent); color: #fff; font-weight: 500; font-size: .9rem;
  border-radius: 0 0 12px 12px; text-decoration: none !important;
  transition: transform .18s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Ícones Material Symbols ---------- */

.msym {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1;
  display: inline-block;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.lc-ico .msym { font-size: 22px; color: var(--accent); }
.portal .icon .msym { font-size: 30px; }
.pillar .icon .msym { font-size: 26px; color: var(--accent); }
.audience-btns .msym { font-size: 18px; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .btn, nav.main, .brand-name { font-family: var(--font-sans); }

img { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cabeçalho e navegação ---------- */

header.site {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid transparent;
  box-shadow: inset 0 1px 0 var(--glass-rim);
  position: sticky; top: 0; z-index: 50;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* ao rolar, o vidro adensa e o conteúdo passa nitidamente embaçado atrás */
header.site.rolado {
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(230%);
  backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(230%);
  border-bottom-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 8px 30px rgba(60, 64, 67, .1);
}
:root[data-theme="dark"] header.site.rolado { box-shadow: inset 0 1px 0 var(--glass-rim), 0 8px 30px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) { header.site { transition: none; } }
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px;
}

/* flex:none + nowrap: sem isso, na faixa em que o menu fica apertado, o
   cabeçalho espremia a marca e "Escola de Pacientes" quebrava em três linhas */
.brand { display: flex; align-items: center; gap: .7rem; flex: none; text-decoration: none !important; }
.brand-name strong, .brand-name span { white-space: nowrap; }
.brand-mark { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; flex: none; }
.brand-name { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.brand-name span { font-size: .7rem; color: var(--muted); letter-spacing: .09em; text-transform: uppercase; }

nav.main { display: flex; align-items: center; }
nav.main > ul { list-style: none; display: flex; }
nav.main > ul > li { position: relative; }
nav.main > ul > li > a {
  display: flex; align-items: center; gap: .3rem;
  white-space: nowrap;              /* sem isto o menu quebra em duas linhas */
  padding: 1.35rem .7rem;
  font-size: .88rem; font-weight: 500; letter-spacing: -.005em;
  color: var(--ink); text-decoration: none !important;
  transition: color .15s var(--ease);
}
nav.main > ul > li > a:hover,
nav.main > ul > li:focus-within > a,
nav.main > ul > li > a[aria-current="page"] { color: var(--accent); }
nav.main .caret { font-size: .55rem; color: var(--muted); transform: translateY(1px); }

.dropdown {
  position: absolute; top: calc(100% - 6px); left: 0;
  min-width: 270px; max-height: 70vh; overflow: auto;
  background: var(--dropdown-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  box-shadow: var(--glass-shadow-hover), inset 0 1px 0 var(--glass-rim);
  padding: .55rem;
  display: none;
  z-index: 60;
}
li:hover > .dropdown, li:focus-within > .dropdown { display: block; }
.dropdown a {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem;
  font-size: .89rem; color: var(--ink); text-decoration: none !important;
  border-radius: 8px;
  transition: background .12s var(--ease);
}
.dropdown a .msym { font-size: 19px; color: var(--muted); }
.dropdown a:hover .msym { color: var(--accent); }
.dropdown a:hover { background: var(--bg-soft); }
.dropdown .group-label {
  padding: .7rem .8rem .25rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.dropdown.wide { min-width: 310px; }

/* ---------- Busca ---------- */

.searchbox { position: relative; margin-left: .4rem; }
.searchbox input {
  width: 150px; padding: .5rem .85rem .5rem 2.1rem;
  font: inherit; font-size: .86rem; color: var(--ink);
  background: var(--soft-glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .75rem center;
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
  backdrop-filter: blur(10px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge); border-radius: 11px;
  box-shadow: inset 0 1px 0 var(--glass-rim);
  transition: width .25s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
.searchbox input:focus { outline: none; width: 260px; background-color: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 115, 232, .22); }
.search-results {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-height: 380px; overflow: auto;
  background: var(--dropdown-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  border-radius: 16px; box-shadow: var(--glass-shadow-hover), inset 0 1px 0 var(--glass-rim);
  padding: .4rem;
  display: none; z-index: 80;
}
.search-results.open { display: block; }
.search-results a {
  display: block; padding: .55rem .8rem;
  font-size: .88rem; color: var(--ink); text-decoration: none !important;
  border-radius: 8px;
}
.search-results a:hover, .search-results a.sel { background: var(--bg-soft); }
.search-results a small { display: block; color: var(--accent); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.search-results .none { padding: .8rem 1rem; font-size: .88rem; color: var(--muted); }

@media (max-width: 880px) {
  .searchbox { margin: 0 1.5rem 1rem; }
  .searchbox input, .searchbox input:focus { width: 100%; }
  .search-results { left: 0; right: 0; width: auto; }
}

/* Faixa intermediária (notebook com janela menor, tablet deitado): o menu
   inteiro cabe, mas apertado. Antes ele sumia aos 980px e, entre 980 e
   1100px, aparecia colidindo com a logo. Aqui ele encolhe em vez de sumir. */
@media (min-width: 881px) and (max-width: 1180px) {
  nav.main > ul > li > a { padding-left: .42rem; padding-right: .42rem; font-size: .84rem; }
  .searchbox { margin-left: .2rem; }
  .searchbox input { width: 40px; padding-left: 1.95rem; padding-right: .35rem; }
  .searchbox input:focus { width: 200px; }
}

/* menu móvel */
#nav-toggle { display: none; }
label.nav-toggle {
  display: none; cursor: pointer; padding: .6rem;
  border: 1px solid var(--glass-edge); border-radius: 11px;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
  backdrop-filter: blur(10px) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-rim);
}
label.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

@media (max-width: 880px) {
  label.nav-toggle { display: block; }
  nav.main {
    /* ATENÇÃO ao mexer aqui: o cabeçalho tem backdrop-filter (o vidro), e
       isso o torna a referência de posicionamento dos elementos fixos que
       estão dentro dele. Com "inset: 64px 0 0 0", o "bottom: 0" media a
       barra de 64px em vez da tela, e o menu abria com 64px de altura —
       aparecia só o "Início". Por isso a altura é declarada explicitamente. */
    position: fixed; top: 64px; left: 0; right: 0;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);       /* desconta a barra do navegador no celular */
    /* painel opaco: como o cabeçalho é a raiz do desfoque, um vidro aqui não
       teria o que desfocar e o texto ficaria por cima do conteúdo da página */
    background: var(--surface);
    display: none; overflow: auto; padding: 1rem 0 3rem;
  }
  /* flex + order: no HTML o botão vem depois da lista, e no celular isso o
     jogava para o fim do painel, quase 1800px abaixo. Aqui ele sobe. */
  #nav-toggle:checked ~ nav.main { display: flex; flex-direction: column; }
  nav.main > .searchbox { order: 1; }
  nav.main > .btn-simula { order: 2; }
  nav.main > .btn-nucleo { order: 3; }
  nav.main > ul         { order: 4; }
  nav.main > .theme-toggle { order: 5; align-self: flex-start; margin: .5rem 1.5rem 0; }
  /* os dois botões viram um par: espaço normal acima do primeiro,
     espaço curto entre eles, para lerem como um bloco só */
  nav.main > .btn-simula + .btn-nucleo { margin-top: .5rem; }
  nav.main > ul { flex-direction: column; }
  nav.main > ul > li > a { padding: .9rem 1.5rem; }
  .dropdown {
    position: static; display: block; box-shadow: none; border: none;
    background: transparent;
    border-left: 2px solid var(--line); border-radius: 0;
    margin: 0 0 .5rem 1.6rem;
    max-height: none; padding: 0;
  }
}

/* ---------- Blocos genéricos ---------- */

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; }

.section { padding: 5.5rem 0; }
.section-alt { background: var(--soft-glass); }

.kicker {
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .7rem;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
h2.section-title { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.18; letter-spacing: -.021em; margin-bottom: .7rem; }
p.section-lead { color: var(--muted); font-size: 1.12rem; max-width: 62ch; margin-bottom: 2.6rem; }

.btn {
  display: inline-block; padding: .9rem 1.9rem; border-radius: 32px;
  font-weight: 500; font-size: 1rem;
  text-decoration: none !important;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 4px 14px rgba(26, 115, 232, .35); }
.btn-ghost { background: var(--glass-tint-strong); -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat)); backdrop-filter: blur(10px) saturate(var(--glass-sat)); color: var(--accent); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.btn-ghost:hover { background: var(--g-azul-bg); border-color: var(--g-azul-bg); }
.section-alt .btn-ghost { background: var(--glass-tint-strong); box-shadow: var(--shadow); }
.section-alt .btn-ghost:hover { background: var(--glass-tint-strong); box-shadow: var(--shadow-hover); }

/* Botão do SimulaPacientes, no cabeçalho, logo antes do Núcleo EP.
   Mesma forma dos dois, de propósito: são os dois destinos que o visitante
   pode querer abrir de qualquer página, sem caçar no menu. O vermelho separa
   um do outro — este é o produto aberto a estudantes, o teal é o sistema
   interno do grupo. Aparece só no menu do celular — ver a regra de 881px
   logo abaixo, que explica por quê. */
.btn-simula {
  --sim: #b31412;
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  margin-left: .5rem; padding: .42rem .8rem;
  border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: -.005em;
  font-family: var(--font-sans);
  color: var(--sim); text-decoration: none !important;
  background: color-mix(in srgb, var(--sim) 10%, var(--glass-tint-strong));
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
  backdrop-filter: blur(10px) saturate(var(--glass-sat));
  border: 1px solid color-mix(in srgb, var(--sim) 28%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-rim);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-simula .msym { font-size: 17px; flex: none; }
.btn-simula:hover {
  background: color-mix(in srgb, var(--sim) 18%, var(--glass-tint-strong));
  border-color: color-mix(in srgb, var(--sim) 50%, transparent);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 6px 18px color-mix(in srgb, var(--sim) 25%, transparent);
}
/* no escuro o vermelho puro perde legibilidade sobre o grafite */
:root[data-theme="dark"] .btn-simula { --sim: #f28b82; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-simula { --sim: #f28b82; }
}
/* No desktop entra como símbolo só, e a busca cede largura para caber:
   a barra tem 1200px fixos e trabalhava com folga zero (marca 199 + menu 607
   + Núcleo EP 111 + tema 38 + busca 150).
   Exceção entre 881 e 1180px: ali a busca JÁ está reduzida à lupa e os itens
   do menu já estão comprimidos pela regra acima — não sobra o que ceder, e o
   botão empurrava a busca para fora da tela. Nessa faixa ele sai; no celular
   volta por extenso. */
@media (min-width: 881px) {
  .btn-simula { padding: .42rem .5rem; margin-left: .25rem; }
  .btn-simula-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 881px) and (max-width: 1180px) {
  .btn-simula { display: none; }
}
@media (min-width: 1181px) {
  .searchbox input { width: 110px; }
}
@media (max-width: 880px) {
  .btn-simula { margin: 1rem 1.5rem 0; padding: .7rem 1.2rem; font-size: .95rem; }
  .btn-simula .msym { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .btn-simula:hover { transform: none; } }

/* Botão de acesso ao sistema do grupo, no cabeçalho.
   Verde da marca do Núcleo EP, para se distinguir dos itens de navegação:
   isto leva para fora do site, não para outra página dele. */
.btn-nucleo {
  --ep: #0d9488;
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  margin-left: .5rem; padding: .42rem .8rem;
  border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: -.005em;
  font-family: var(--font-sans);
  color: var(--ep); text-decoration: none !important;
  background: color-mix(in srgb, var(--ep) 10%, var(--glass-tint-strong));
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
  backdrop-filter: blur(10px) saturate(var(--glass-sat));
  border: 1px solid color-mix(in srgb, var(--ep) 28%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-rim);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-nucleo svg { width: 15px; height: 15px; flex: none; }
.btn-nucleo:hover {
  background: color-mix(in srgb, var(--ep) 18%, var(--glass-tint-strong));
  border-color: color-mix(in srgb, var(--ep) 50%, transparent);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 6px 18px color-mix(in srgb, var(--ep) 25%, transparent);
}
:root[data-theme="dark"] .btn-nucleo { --ep: #2dd4bf; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-nucleo { --ep: #2dd4bf; }
}
/* na faixa intermediária fica só o símbolo, para o menu continuar cabendo */
@media (min-width: 881px) and (max-width: 1240px) {
  .btn-nucleo { padding: .42rem .5rem; margin-left: .25rem; }
  .btn-nucleo-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 880px) {
  .btn-nucleo { margin: 1rem 1.5rem .25rem; padding: .7rem 1.2rem; font-size: .95rem; }
  .btn-nucleo svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .btn-nucleo:hover { transform: none; } }

.theme-toggle {
  background: none; border: none; cursor: pointer; padding: .5rem;
  border-radius: 10px; color: var(--ink); display: grid; place-items: center;
}
.theme-toggle:hover { background: var(--bg-soft); }
.theme-toggle .msym { font-size: 22px; }

.card {
  background: var(--soft-glass);
  border-radius: var(--radius);
  padding: 2rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.section-alt .card { background: var(--glass-tint-strong); box-shadow: var(--shadow); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* cards de destaque coloridos (estilo página do Chrome) */
.grid-3 .pillar:nth-child(3n+1) { background: var(--g-azul-bg); }
.grid-3 .pillar:nth-child(3n+2) { background: var(--g-verde-bg); }
.grid-3 .pillar:nth-child(3n+3) { background: var(--g-amarelo-bg); }
.grid-4 .pillar:nth-child(4n+1) { background: var(--g-azul-bg); }
.grid-4 .pillar:nth-child(4n+2) { background: var(--g-verde-bg); }
.grid-4 .pillar:nth-child(4n+3) { background: var(--g-amarelo-bg); }
.grid-4 .pillar:nth-child(4n+4) { background: var(--g-vermelho-bg); }
.pillar .icon { background: var(--surface); box-shadow: none; }

/* ---------- Landing: hero ---------- */

.hero {
  /* transparente de propósito: fundo opaco aqui tapava a luz ambiente */
  background: transparent;
  padding: 5.5rem 0 0;
}
.hero-text { max-width: 64ch; margin: 0 auto; text-align: center; }
.hero-text .lead { margin-left: auto; margin-right: auto; }
.hero-text .audience-btns { justify-content: center; }
.hero-banner {
  position: relative;
  width: 100%;
  margin-top: 3.5rem;
  height: clamp(420px, 68vh, 760px);
  overflow: hidden;
}
.hero-banner img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
}
.hero-banner figcaption {
  position: absolute; right: 12px; bottom: 12px;
  padding: .35rem .8rem; font-size: .7rem;
  color: #f5f5f7; background: rgba(29, 29, 31, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 999px;
  max-width: 90%;
}
/* ---------- Carrossel de fotos do topo ---------- */

.hero-carousel {
  position: relative;
  width: 100%;
  margin-top: 3.5rem;
  height: clamp(420px, 68vh, 760px);
  overflow: hidden;
  background: var(--bg-soft);
  touch-action: pan-y;
}
.hc-viewport { position: absolute; inset: 0; }
.hc-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .85s var(--ease), visibility 0s linear .85s;
}
.hc-slide.is-active { opacity: 1; visibility: visible; transition: opacity .85s var(--ease); }
.hc-slide img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
}
.hc-slide figcaption {
  position: absolute; left: 12px; bottom: 12px;
  max-width: min(55%, 560px);
  padding: .35rem .8rem; font-size: .7rem; line-height: 1.4;
  color: #f5f5f7;
  background: rgba(24, 24, 26, .5);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  border-radius: 999px;
}

/* controles em vidro */
.hc-nav, .hc-play {
  position: absolute; z-index: 3;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  color: #fff;
  background: rgba(24, 24, 26, .34);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 20px rgba(0, 0, 0, .18);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.hc-nav:hover, .hc-play:hover { background: rgba(24, 24, 26, .55); border-color: rgba(255, 255, 255, .38); }
.hc-nav { width: 46px; height: 46px; top: 50%; margin-top: -23px; }
.hc-nav .msym { font-size: 26px; }
.hc-prev { left: 1.1rem; }
.hc-next { right: 1.1rem; }
.hc-play { width: 38px; height: 38px; top: 1.1rem; right: 1.1rem; }
.hc-play .msym { font-size: 19px; }

/* bolinhas à direita e legenda à esquerda: assim não se encostam em
   nenhuma largura de tela, por mais longo que fique o crédito da foto */
.hc-dots {
  position: absolute; z-index: 3;
  right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: .1rem;
  padding: .15rem .5rem; border-radius: 999px;
  background: rgba(24, 24, 26, .34);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
}
/* botão de 24px para o dedo alcançar; a bolinha visível é menor */
.hc-dot {
  position: relative; width: 24px; height: 26px;
  border: 0; background: none; padding: 0; cursor: pointer;
}
.hc-dot::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 999px; background: rgba(255, 255, 255, .5);
  transition: width .25s var(--ease), margin-left .25s var(--ease), background .25s var(--ease);
}
.hc-dot.is-on::before { width: 18px; margin-left: -9px; background: #fff; }

/* leitor de tela apenas */
.hc-live {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 700px) {
  .hc-nav { display: none; }                    /* no celular, arrasta com o dedo */
  .hc-slide figcaption { left: 12px; right: 12px; max-width: none; bottom: 48px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-slide { transition: none; }
  .hc-slide.is-active { transition: none; }
  .hc-dot::before { transition: none; }
}

.hero .stats { margin: 3.5rem auto 0; }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.16; letter-spacing: -.049em;
  max-width: 20ch; margin-inline: auto;
}
.accentword { color: var(--accent); }
/* palavra de destaque em degradê — com a cor sólida acima como reserva
   para navegador antigo, impressão e modo de alto contraste */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  @media not (prefers-contrast: more) {
    .accentword {
      background: linear-gradient(96deg, var(--accent) 0%, #7c4dff 48%, var(--g-verde) 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
  }
}
/* brilho difuso atrás do título, para o hero não nascer chapado */
/* isolate: sem isso o brilho de z-index -1 escaparia para trás do fundo da seção */
.hero-text { position: relative; isolation: isolate; }
.hero-text::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: -8%; width: min(760px, 92%); aspect-ratio: 1.6;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  filter: blur(30px); pointer-events: none;
}
.hero .lead {
  font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--muted);
  max-width: 58ch; margin: 1.4rem 0 2.2rem; line-height: 1.55;
}
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

.stats {
  /* 170px cabia cinco colunas em ~980px (o que o celular usa no "modo
     desktop") e a coluna ficava estreita demais para "atendimentos
     realizados": a palavra estourava a borda do cartão. Com 200px passam a
     ser quatro por linha nessa largura, e continuam cinco no computador. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding-bottom: 5.5rem;
}
.stat {
  background: var(--soft-glass); border-radius: var(--radius);
  padding: 1.7rem 1.5rem; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* rotação de pastéis Google nos números */
.stats .stat:nth-child(5n+1) { background: var(--g-azul-bg); }
.stats .stat:nth-child(5n+2) { background: var(--g-verde-bg); }
.stats .stat:nth-child(5n+3) { background: var(--g-amarelo-bg); }
.stats .stat:nth-child(5n+4) { background: var(--g-vermelho-bg); }
.stats .stat:nth-child(5n+5) { background: var(--soft-glass); }
.stats .stat:nth-child(5n+1) b { color: var(--g-azul-dark); }
.stats .stat:nth-child(5n+2) b { color: var(--g-verde-dark); }
.stats .stat:nth-child(5n+3) b { color: var(--g-amarelo-dark); }
.stats .stat:nth-child(5n+4) b { color: var(--g-vermelho-dark); }
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.stat b {
  display: block;
  font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: .84rem; color: var(--muted); display: block; margin-top: .35rem; }
.stats .stat { padding: 2rem 1.5rem; }
.stat:hover { transform: translateY(-6px); }

/* ============================================================
   Gráfico — prêmios e reconhecimentos por ano
   Colunas finas, topo arredondado, base reta. Uma série só, então
   não leva legenda: o título já diz o que está plotado.
   ============================================================ */

.grafico {
  margin: 0;
  padding: 1.6rem 1.5rem 1.2rem;
  border-radius: var(--radius);
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow);
  position: relative; isolation: isolate;
}
.grafico::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--glass-sheen); pointer-events: none;
}
.g-titulo { font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); font-family: var(--font-sans); }
.g-sub { font-size: .84rem; color: var(--muted); margin-top: .25rem; }

.g-plot {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: end; gap: 2px;                 /* o vão de 2px separa as colunas */
  height: 190px; margin: 1.5rem 0 0;
  padding-bottom: 1.7rem;                     /* espaço do rótulo do ano */
  position: relative;
}
/* linhas de grade finas e recessivas */
.g-plot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 1.7rem;
  background: repeating-linear-gradient(to top, var(--glass-edge) 0 1px, transparent 1px 33.33%);
  pointer-events: none;
}
.g-col {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  border-radius: 8px 8px 0 0;
}
.g-col:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.g-bar {
  width: 100%; max-width: 24px;               /* nunca preenche a faixa inteira */
  height: var(--h);
  background: var(--accent);
  border-radius: 4px 4px 0 0;                 /* topo arredondado, base reta */
  transition: height .9s var(--ease), background .2s var(--ease);
}
.g-col:hover .g-bar { background: var(--accent-dark); }
.g-col[data-v="0"] .g-bar { background: var(--glass-edge); }
.g-val {
  font-size: .78rem; font-weight: 700; color: var(--ink);
  margin-bottom: .3rem; font-variant-numeric: tabular-nums;
}
.g-col[data-v="0"] .g-val { color: transparent; }
.g-ano {
  position: absolute; bottom: -1.45rem; left: 50%; transform: translateX(-50%);
  font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
/* dica que aparece ao passar o ponteiro ou chegar pelo teclado */
.g-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 230px;
  padding: .5rem .7rem; border-radius: 12px;
  font-size: .74rem; line-height: 1.4; text-align: left; color: var(--ink);
  background: var(--dropdown-bg);
  -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat));
  backdrop-filter: blur(16px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow-hover);
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.g-col:hover .g-tip, .g-col:focus-visible .g-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.g-col:nth-child(-n+2) .g-tip { left: 0; transform: translateX(0) translateY(4px); }
.g-col:nth-child(-n+2):hover .g-tip, .g-col:nth-child(-n+2):focus-visible .g-tip { transform: translateX(0) translateY(0); }
.g-col:nth-last-child(-n+2) .g-tip { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.g-col:nth-last-child(-n+2):hover .g-tip, .g-col:nth-last-child(-n+2):focus-visible .g-tip { transform: translateX(0) translateY(0); }

/* alternativa em texto — o gráfico nunca é a única via para o dado */
.g-tabela { margin-top: 1.2rem; font-size: .86rem; }
.g-tabela summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.g-tabela table { width: 100%; border-collapse: collapse; margin-top: .8rem; }
.g-tabela th, .g-tabela td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--glass-edge); }
.g-tabela th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.g-tabela td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; width: 4.5rem; }

:root[data-theme="dark"] .g-bar { background: #4a90e2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g-bar { background: #4a90e2; }
}
@media (prefers-reduced-motion: reduce) {
  .g-bar { transition: none; }
  .g-tip { transition: none; }
}
@media (max-width: 700px) {
  .g-plot { height: 150px; }
  .g-ano { font-size: .6rem; }
  .grafico { padding: 1.2rem 1rem 1rem; }
  /* A dica tem 220px e a coluna, aqui, tem ~28px: centrada, ela ultrapassava
     a borda da tela (mesmo invisível, ocupa espaço e empurra a rolagem).
     Em tela de toque também não há como "passar o mouse" — e a lista
     completa em texto está logo abaixo do gráfico. */
  .g-tip { display: none; }
}
.g-tip { max-width: min(230px, 68vw); }

/* ---------- Landing: pilares e cards ---------- */

/* Rede de segurança contra corte de texto em qualquer grade de cartões.
   Item de grid nasce com min-width auto e, quando a trilha tem largura
   mínima fixa (minmax), a palavra longa vaza a borda em vez de quebrar.
   Isso aparecia no "modo desktop" do celular, onde a viewport fica em
   ~980px e as colunas ficam bem mais estreitas do que no computador. */
.stats > *, .grid > *, .awards > *, .portal-grid > *, .media-grid > *,
.pub-grid > *, .topic-grid > *, .link-grid > *, .rc-grade > * { min-width: 0; }
.stat span, .stat b, .pillar h3, .pillar p, .portal h3, .portal p,
.award span, .award small, .media-card .title, .paper-card h3,
.book-info h3, .topic-grid a, .rc-txt b, .rc-txt small, .rc-etapa b, .rc-etapa small,
.lc-body b, .lc-body small { overflow-wrap: break-word; }

.grid { display: grid; gap: 1.3rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.pillar .icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow);
  display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 1.1rem;
}
.section-alt .pillar .icon, .card:hover .icon { background: var(--bg-soft); }
.pillar h3 { font-size: 1.12rem; margin-bottom: .45rem; letter-spacing: -.015em; }
.pillar p { font-size: .93rem; color: var(--muted); line-height: 1.55; }

.card h3 a { color: var(--ink); text-decoration: none !important; }
.card h3 a:hover { color: var(--accent); }
.card .count { font-size: .74rem; color: var(--accent); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }

.quote {
  padding: 2rem;
  background: var(--soft-glass); border-radius: var(--radius);
  font-size: 1.15rem; line-height: 1.6; font-weight: 500;
  letter-spacing: -.01em; color: var(--ink);
}
.section-alt .quote { background: var(--glass-tint-strong); box-shadow: var(--shadow); }

.media-item { display: flex; gap: 1rem; align-items: baseline; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.media-item .outlet { flex: none; font-weight: 600; font-size: .74rem; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; width: 8.5rem; }
.media-item a { font-size: .98rem; }

/* ---------- Páginas internas ---------- */

.page-hero {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 78%),
    var(--soft-glass);
  padding: 3.6rem 0 3rem;
  border-bottom: 1px solid var(--glass-edge);
}
/* filete de cor no topo, na cor da seção */
.page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent) 70%, transparent);
}
.page-hero h1 { letter-spacing: -.03em; }
.breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: .9rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { margin: 0 .45rem; color: var(--line); }
.page-hero h1 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); line-height: 1.12; }

article.content { padding: 3rem 0 5rem; }
article.content > .wrap-narrow > * + *,
article.content > .wrap > * + * { margin-top: 1.05rem; }

/* ---------- Sumário lateral "Nesta página" ---------- */
article.content .wrap-narrow,
article.content .wrap { position: relative; }
.toc {
  display: none;
  position: fixed; top: 96px;
  width: 220px; max-height: calc(100vh - 130px); overflow: auto;
}
.toc-title {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .7rem .9rem;
}
.toc ul { list-style: none; padding: 0 !important; margin: 0 !important;
  border-left: 2px solid var(--line); }
.toc li { margin: 0 !important; }
.toc a {
  display: block; padding: .32rem .9rem; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: .82rem; line-height: 1.35; color: var(--muted);
  text-decoration: none !important;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.toc .toc-sub a { padding-left: 1.7rem; font-size: .78rem; }
/* aparece só quando há gutter suficiente à direita do conteúdo (860px centrado) */
@media (min-width: 1340px) {
  .toc { display: block; left: calc(50vw + 445px); }
}
/* páginas de largura total (1200px centrados) precisam de mais folga */
.toc.toc-wide { display: none; }
@media (min-width: 1700px) {
  .toc.toc-wide { display: block; left: calc(50vw + 620px); }
}
article.content h2 { font-size: 1.45rem; margin-top: 2.4rem; letter-spacing: -.02em; }
article.content h3 {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--muted); margin-top: 2.4rem;
}
/* dentro de um cartão, h3 é título de cartão — não o rótulo em caixa alta acima */
article.content .card h3,
article.content .pillar h3 {
  font-size: 1.12rem; letter-spacing: -.015em; text-transform: none;
  font-weight: 700; color: var(--ink); margin-top: 0;
}
/* URL longa colada no texto empurrava a página para o lado no celular */
article.content p, article.content li, article.content h2, article.content h3 { overflow-wrap: break-word; }
article.content ul { padding-left: 1.4rem; }
article.content li { margin: .4rem 0; }
article.content li::marker { color: var(--line); }

.embed {
  background: var(--glass-tint-strong); border: 1px solid var(--glass-edge);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; margin: 1.8rem 0;
  transition: box-shadow .25s var(--ease);
}
.embed:hover { box-shadow: var(--shadow-hover); }
.embed iframe { display: block; width: 100%; border: 0; }
.embed-doc iframe { height: 520px; }
.embed-video iframe { aspect-ratio: 16 / 9; height: auto; }
.embed-folder iframe { height: 340px; }
.embed-caption {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: .65rem 1.1rem; font-size: .84rem; color: var(--muted);
  border-top: 1px solid var(--glass-edge); background: var(--soft-glass);
}
.embed-caption a { white-space: nowrap; font-weight: 600; }

/* cards de link nas páginas de conteúdo */
.link-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .8rem; margin: 1.2rem 0;
}
article.content .wrap-narrow .link-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.link-card {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem;
  background: var(--soft-glass); border-radius: 16px;
  text-decoration: none !important; color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); background: var(--glass-tint-strong); }
.link-card .lc-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: var(--surface); display: grid; place-items: center; font-size: 1.1rem;
  box-shadow: var(--shadow);
}
.link-card:hover .lc-ico { background: var(--g-azul-bg); }
.link-card .lc-body { flex: 1; min-width: 0; }
.link-card .lc-body b { display: block; font-size: .9rem; font-weight: 500; line-height: 1.35; font-family: var(--font-sans); }
.link-card .lc-body small { display: block; font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.link-card .lc-arrow { flex: none; color: var(--accent); font-weight: 500; transition: transform .3s var(--ease); }
.link-card:hover .lc-arrow { transform: translateX(4px); }

/* lista de páginas-filhas / índice */
.childlist { list-style: none; padding: 0 !important; }
.childlist li { margin: 0 !important; }
.childlist a {
  display: block; padding: .85rem 1.15rem; margin: .5rem 0;
  background: var(--soft-glass); border-radius: 12px;
  text-decoration: none !important; color: var(--ink); font-size: .95rem;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.childlist a:hover { background: var(--glass-tint-strong); transform: translateX(3px); }

/* filtro de busca (banco de citações) */
.filterbox { margin: 1.5rem 0; }
.filterbox input {
  width: 100%; padding: .85rem 1.15rem;
  font: inherit; color: var(--ink);
  background: var(--soft-glass); border: 1px solid var(--glass-edge); border-radius: 12px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.filterbox input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(26, 115, 232, .22); }
.filter-count { font-size: .84rem; color: var(--muted); margin-top: .45rem; }

/* índice de temas clínicos */
.topic-group { margin-top: 2.6rem; }
.topic-group h2 { font-size: 1.25rem; margin-bottom: 1rem; letter-spacing: -.015em; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; }
.topic-grid a {
  display: block; padding: .8rem 1.05rem;
  background: var(--soft-glass); border-radius: 12px;
  text-decoration: none !important; color: var(--ink); font-size: .93rem;
  transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.topic-grid a:hover { background: var(--glass-tint-strong); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.topic-grid a small { color: var(--muted); font-size: .76rem; }

/* ---------- Vitrine institucional ---------- */

/* selos */
.seals { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.seal {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .95rem; border-radius: 999px;
  background: var(--soft-glass);
  font-size: .8rem; font-weight: 500; color: var(--ink);
}
.section-alt .seal { background: var(--glass-tint-strong); box-shadow: var(--shadow); }
.seal .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* faixa de prêmios */
.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.award {
  background: var(--glass-tint-strong); border-radius: var(--radius);
  padding: 1.4rem 1.4rem; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.award:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.award b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--accent); }
.award span { font-size: .92rem; color: var(--ink); font-weight: 600; display: block; margin-top: .3rem; letter-spacing: -.01em; }
.award small { font-size: .78rem; color: var(--muted); }

/* cards de mídia com thumbnail */
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.media-card {
  background: var(--soft-glass); border-radius: var(--radius);
  overflow: hidden; text-decoration: none !important; display: block;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.section-alt .media-card { background: var(--glass-tint-strong); box-shadow: var(--shadow); }
.media-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.media-card .thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-soft); }
.media-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.media-card:hover .thumb img { transform: scale(1.04); }
.media-card .thumb.placeholder { display: grid; place-items: center; font-size: 2rem; color: var(--muted); }
.media-card .meta { padding: .9rem 1.1rem 1.1rem; }
.media-card .outlet { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.media-card .title { font-size: .92rem; color: var(--ink); line-height: 1.45; margin-top: .3rem; font-weight: 500; letter-spacing: -.008em; }

/* capa tipográfica de livro/artigo */
.pub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.book-card {
  display: flex; gap: 1.1rem;
  background: var(--soft-glass); border-radius: var(--radius); padding: 1.3rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); background: var(--glass-tint-strong); }
.book-cover {
  flex: none; width: 86px; height: 122px; border-radius: 6px 10px 10px 6px;
  background: linear-gradient(135deg, #1d1d1f, #48484d);
  border-left: 5px solid #000;
  color: #f5f5f7; padding: .55rem .5rem;
  font-size: .56rem; line-height: 1.35; font-weight: 600;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, .22);
}
.book-cover.gold { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); border-left-color: #0d5aa3; }
.book-cover .t { font-weight: 600; }
.book-cover .y { font-size: .55rem; opacity: .8; }
.book-info h3 { font-size: .95rem; line-height: 1.4; letter-spacing: -.012em; }
.book-info p { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.book-info a { font-size: .84rem; font-weight: 600; }

/* cartão de artigo/congresso */
.paper-card {
  background: var(--soft-glass);
  border-radius: 14px; padding: 1.1rem 1.25rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.paper-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); background: var(--glass-tint-strong); }
.paper-card .y { font-size: .7rem; font-weight: 600; color: var(--accent); letter-spacing: .06em; }
.paper-card h3 { font-size: .92rem; line-height: 1.42; margin: .25rem 0; letter-spacing: -.012em; }
.paper-card h3 a { text-decoration: none !important; color: var(--ink); }
.paper-card h3 a:hover { color: var(--accent); }
.paper-card p { font-size: .78rem; color: var(--muted); }

/* portais por público */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.3rem; }
.portal {
  background: var(--glass-tint-strong); border-radius: var(--radius);
  padding: 1.8rem; text-align: left; box-shadow: var(--shadow);
  text-decoration: none !important; display: block;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.portal:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.portal .icon { font-size: 1.9rem; }
.portal h3 { font-size: 1.08rem; margin: .7rem 0 .35rem; color: var(--ink); letter-spacing: -.015em; }
.portal p { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.portal .go { display: inline-block; margin-top: .9rem; font-size: .86rem; font-weight: 600; color: var(--accent); transition: transform .18s var(--ease); }
.portal:hover .go { transform: translateX(4px); }

/* ---------- Cores por público (paleta Google) ----------
   nomes n-* mantidos por compatibilidade com as classes:
   verde=paciente · azul=estudante · roxo→AMARELO=pesquisador · laranja→VERMELHO=profissional */
:root {
  --n-verde: var(--g-verde);      --n-verde-bg: var(--g-verde-bg);      --n-verde-dark: var(--g-verde-dark);
  --n-azul: var(--g-azul);        --n-azul-bg: var(--g-azul-bg);        --n-azul-dark: var(--g-azul-dark);
  --n-roxo: var(--g-amarelo);     --n-roxo-bg: var(--g-amarelo-bg);     --n-roxo-dark: var(--g-amarelo-dark);
  --n-laranja: var(--g-vermelho); --n-laranja-bg: var(--g-vermelho-bg); --n-laranja-dark: var(--g-vermelho-dark);
}

/* botões de público no hero */
.audience-btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.7rem; }
.audience-btns a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.15rem; border-radius: 999px;
  background: var(--glass-tint-strong); border: 1px solid var(--glass-edge);
  font-size: .88rem; font-weight: 500; color: var(--ink); text-decoration: none !important;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.audience-btns a:hover { transform: translateY(-1px); }
.audience-btns a.aud-verde:hover   { background: var(--n-verde-bg);   border-color: var(--n-verde);   color: var(--n-verde-dark); }
.audience-btns a.aud-azul:hover    { background: var(--n-azul-bg);    border-color: var(--n-azul);    color: var(--n-azul-dark); }
.audience-btns a.aud-roxo:hover    { background: var(--n-roxo-bg);    border-color: var(--n-roxo);    color: var(--n-roxo-dark); }
.audience-btns a.aud-laranja:hover { background: var(--n-laranja-bg); border-color: var(--n-laranja); color: var(--n-laranja-dark); }

/* Chamada do SimulaPacientes, logo abaixo dos botões de público.
   Roxo de propósito: os quatro botões acima já reservam o verde, o azul, o
   âmbar e o vermelho, e o teal é do Núcleo EP no cabeçalho. O roxo é o que
   sobra na paleta para dizer "isto não é mais um público, é o produto".
   Sólido enquanto os de cima são de vidro — é assim que ele salta sem
   precisar ser maior do que a seção comporta. */
.hero-cta { display: flex; justify-content: center; margin-top: 1.15rem; }
.cta-simula {
  --sp: #9334e6;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  padding: .92rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 1.04rem; letter-spacing: -.01em;
  color: #fff; text-decoration: none !important;
  background: var(--sp);
  border: 1px solid color-mix(in srgb, var(--sp) 72%, #000);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--sp) 30%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cta-simula-l { display: inline-flex; align-items: center; gap: .5rem; }
.cta-simula b { font-weight: 700; }
.cta-simula .msym { font-size: 22px; }
.cta-simula-sub { font-weight: 400; opacity: .9; }
.cta-simula:hover {
  background: color-mix(in srgb, var(--sp) 87%, #000);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--sp) 42%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.cta-simula:active { transform: scale(.98); }
.cta-simula:focus-visible { outline: 3px solid var(--sp); outline-offset: 3px; }
/* no escuro o roxo puro some no fundo grafite; sobe um tom, mantendo
   o texto branco com contraste de sobra */
:root[data-theme="dark"] .cta-simula { --sp: #9b47e9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-simula { --sp: #9b47e9; }
}
/* no celular vira alvo de toque de largura cheia, com o nome em cima
   e a explicação embaixo — em uma linha só ficaria apertado */
@media (max-width: 560px) {
  .hero-cta { margin-top: 1rem; }
  .cta-simula {
    width: 100%; max-width: 400px;
    flex-direction: column; gap: .15rem;
    padding: .95rem 1.3rem;
  }
  .cta-simula .msym { font-size: 24px; }
  .cta-simula-sub { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) { .cta-simula:hover { transform: none; } }

/* cards-portal na landing acompanham as cores */
.portal.aud-verde:hover   { box-shadow: 0 8px 30px rgba(68, 131, 97, .22); }
.portal.aud-azul:hover    { box-shadow: 0 8px 30px rgba(51, 126, 169, .22); }
.portal.aud-roxo:hover    { box-shadow: 0 8px 30px rgba(144, 101, 176, .22); }
.portal.aud-laranja:hover { box-shadow: 0 8px 30px rgba(217, 115, 13, .22); }
.portal.aud-verde .go   { color: var(--n-verde); }
.portal.aud-azul .go    { color: var(--n-azul); }
.portal.aud-roxo .go    { color: var(--n-roxo); }
.portal.aud-laranja .go { color: var(--n-laranja); }

/* temas de página por público: sobrescrevem a cor de ação */
body.theme-teal    { --accent: #12818f;          --accent-dark: #0e6771;              --tint: #e0f6f8; }
body.theme-verde   { --accent: var(--n-verde);   --accent-dark: var(--n-verde-dark);   --tint: var(--n-verde-bg); }
body.theme-azul    { --accent: var(--n-azul);    --accent-dark: var(--n-azul-dark);    --tint: var(--n-azul-bg); }
body.theme-roxo    { --accent: var(--n-roxo-dark); --accent-dark: #8a4b00;              --tint: var(--n-roxo-bg); }
body.theme-laranja { --accent: var(--n-laranja); --accent-dark: var(--n-laranja-dark); --tint: var(--n-laranja-bg); }
body[class*="theme-"] .page-hero {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 78%),
    var(--tint);
}

/* ---------- Cores de ação no modo escuro ----------
   Medido: sobre o fundo escuro, as cores claras ficam entre 3,7 e 4,1 de
   contraste — abaixo do mínimo de 4,5 para texto. Isso valia para o site
   inteiro, não só para os temas: o azul padrão dava 4,12. Os valores abaixo
   foram medidos um a um, contra o fundo (#131314) e contra o cartão
   (#1e1f20), e todos passam nos dois.
   O theme-teal ainda tinha um agravante: o --tint era um verde-água claro
   fixo, sem versão escura, então a faixa do título ficava clara no modo
   escuro e o título sumia nela (1,14 de contraste). */
:root[data-theme="dark"] { --accent: #8ab4f8; --accent-dark: #aecbfa; }
:root[data-theme="dark"] body.theme-teal    { --accent: #35b3c2; --accent-dark: #5bc7d4; --tint: #102a2e; }
:root[data-theme="dark"] body.theme-verde   { --accent: #5bb974; --accent-dark: #81c995; }
:root[data-theme="dark"] body.theme-azul    { --accent: #8ab4f8; --accent-dark: #aecbfa; }
:root[data-theme="dark"] body.theme-roxo    { --accent: #fdd663; --accent-dark: #fde293; }
:root[data-theme="dark"] body.theme-laranja { --accent: #f28b82; --accent-dark: #f6aea9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #8ab4f8; --accent-dark: #aecbfa; }
  :root:not([data-theme="light"]) body.theme-teal    { --accent: #35b3c2; --accent-dark: #5bc7d4; --tint: #102a2e; }
  :root:not([data-theme="light"]) body.theme-verde   { --accent: #5bb974; --accent-dark: #81c995; }
  :root:not([data-theme="light"]) body.theme-azul    { --accent: #8ab4f8; --accent-dark: #aecbfa; }
  :root:not([data-theme="light"]) body.theme-roxo    { --accent: #fdd663; --accent-dark: #fde293; }
  :root:not([data-theme="light"]) body.theme-laranja { --accent: #f28b82; --accent-dark: #f6aea9; }
}
/* botão principal: com a cor de ação clara, o texto branco deixa de servir */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .rc-festa { color: #10233b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary,
  :root:not([data-theme="light"]) .rc-festa { color: #10233b; }
}
body[class*="theme-"] .childlist a:hover { background: var(--tint); }
body[class*="theme-"] .topic-grid a:hover { background: var(--tint); box-shadow: none; }

/* mockup da Receita Simples */
.rx-mock {
  background: #fff; border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .12);
  overflow: hidden; max-width: 320px;
  transition: transform .3s var(--ease);
}
.rx-mock:hover { transform: translateY(-4px) rotate(-.5deg); }
.rx-mock .rx-head { background: var(--ink); color: #fff; padding: .65rem .95rem; font-size: .76rem; font-weight: 600; letter-spacing: .03em; }
.rx-mock .rx-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .95rem; border-bottom: 1px solid var(--line); }
.rx-mock .rx-when { font-size: 1.15rem; width: 2rem; text-align: center; }
.rx-mock .rx-med { flex: 1; }
.rx-mock .rx-med b { display: block; font-size: .8rem; color: var(--ink); }
.rx-mock .rx-med span { font-size: .7rem; color: var(--muted); }
.rx-mock .rx-pills { display: flex; gap: .25rem; }
.rx-mock .rx-pill { width: 13px; height: 13px; border-radius: 50%; background: #e2e2e7; }
.rx-mock .rx-pill.on { background: var(--accent); }
.rx-mock .rx-foot { padding: .55rem .95rem; font-size: .66rem; color: var(--muted); }

/* linha do tempo da trajetória */
.timeline { list-style: none; position: relative; padding-left: 1.7rem !important; }
.timeline::before { content: ''; position: absolute; left: .45rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--line); }
.timeline li { position: relative; margin: 1rem 0 !important; font-size: .93rem; color: var(--muted); }
.timeline li::before {
  content: ''; position: absolute; left: -1.7rem; top: .34rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}
.timeline b { color: var(--ink); font-weight: 700; letter-spacing: -.01em; margin-right: .4rem; }

/* faixa acervo */
.archive-band {
  background: var(--ink-band); border-radius: var(--radius);
  color: #d2e3fc; padding: 3.2rem 3.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.archive-band h2 { color: #fff; font-size: 1.7rem; letter-spacing: -.02em; }
.archive-band p { color: #d2e3fc; font-size: .96rem; margin-top: .4rem; max-width: 52ch; }
.archive-band .btn-ghost { background: #fff; color: var(--accent); border: none; }
.archive-band .btn-ghost:hover { background: var(--g-azul-bg); box-shadow: none; }

/* retrato */
.portrait {
  float: right; width: min(240px, 40%);
  margin: 0 0 1.2rem 1.6rem;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-hover);
  background: #fff;
}
.portrait img { display: block; width: 100%; }
.portrait figcaption { padding: .55rem .85rem; font-size: .76rem; color: var(--muted); }
@media (max-width: 560px) { .portrait { float: none; width: 100%; margin: 0 0 1.4rem; } }

/* ============================================================
   Recepção da página de boas-vindas
   ============================================================ */

.recepcao {
  position: relative; isolation: isolate;
  margin: 0 0 3rem;
  padding: 2.6rem 2rem 2.2rem;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(100% 80% at 92% 8%, color-mix(in srgb, var(--g-amarelo) 15%, transparent), transparent 60%),
    var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-hover);
}
.recepcao::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--glass-sheen); pointer-events: none;
}
/* No escuro o halo amarelo sobre o vidro escuro lê como barro. Aqui os dois
   halos saem da própria cor do tema, que já é clara no escuro. */
:root[data-theme="dark"] .recepcao,
:root[data-theme="dark"] body.theme-teal .recepcao {
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    radial-gradient(100% 80% at 92% 8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    var(--glass-tint-strong);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .recepcao {
    background:
      radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
      radial-gradient(100% 80% at 92% 8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
      var(--glass-tint-strong);
  }
}

.rc-topo { text-align: center; max-width: 62ch; margin: 0 auto 2.4rem; }
.rc-kicker {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .6rem;
}
.recepcao h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: -.03em;
  margin: 0 0 .9rem; padding-left: 0;
}
.recepcao h2::before { display: none; }        /* sem a barra dos h2 de conteúdo */
.rc-lead { color: var(--muted); font-size: 1.02rem; line-height: 1.6; }

.rc-festa {
  margin-top: 1.5rem; padding: .7rem 1.5rem;
  border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 600; font-family: var(--font-sans);
  color: #fff; background: var(--accent);
  border: 1px solid transparent;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.rc-festa:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent); }
.rc-festa:active { transform: scale(.97); }

.rc-grade { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 860px) { .rc-grade { grid-template-columns: 1fr 1fr; } }

.rc-bloco {
  background: var(--soft-glass);
  border: 1px solid var(--glass-edge);
  border-radius: 20px; padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
}
.recepcao .rc-bloco h3 {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--ink); text-transform: none; margin: 0 0 .3rem; padding-left: 0;
}
.recepcao .rc-bloco h3::before { display: none; }
.rc-nota { font-size: .84rem; color: var(--muted); margin-bottom: 1.1rem; }

/* ---- primeiros passos ---- */
.rc-passos { list-style: none; padding: 0 !important; margin: 0; }
.rc-passos li { margin: 0 0 .5rem !important; }
.rc-passo {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--glass-edge);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.rc-passo:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.rc-passo input { position: absolute; opacity: 0; width: 0; height: 0; }
.rc-check {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  display: grid; place-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.rc-check::after {
  content: ''; width: 10px; height: 6px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) scale(.4); opacity: 0;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
  margin-top: -3px;
}
.rc-passo input:checked ~ .rc-check { background: var(--accent); border-color: var(--accent); }
.rc-passo input:checked ~ .rc-check::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.rc-passo input:focus-visible ~ .rc-check { outline: 3px solid var(--accent); outline-offset: 2px; }
.rc-ico {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.rc-ico .msym { font-size: 18px; color: var(--accent); }
.rc-txt { min-width: 0; }
.rc-txt b { display: block; font-size: .92rem; font-family: var(--font-sans); letter-spacing: -.01em; }
.rc-txt small { display: block; font-size: .76rem; color: var(--muted); line-height: 1.35; }
.rc-passo input:checked ~ .rc-txt b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.rc-progresso {
  margin-top: 1rem; font-size: .86rem; font-weight: 600; color: var(--accent);
  font-family: var(--font-sans);
}

/* ---- trilha ---- */
.rc-trilha { list-style: none; padding: 0 !important; margin: 0; position: relative; }
.rc-trilha::before {
  content: ''; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 12%, transparent));
}
.rc-etapa {
  position: relative; margin: 0 0 1.1rem !important; padding-left: 2.9rem;
}
.rc-etapa-ico {
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.rc-etapa-ico .msym { font-size: 17px; color: var(--muted); }
.rc-etapa b { display: block; font-size: .95rem; font-family: var(--font-sans); letter-spacing: -.01em; }
.rc-etapa small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.rc-etapa.rc-agora .rc-etapa-ico {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
}
.rc-etapa.rc-agora .rc-etapa-ico .msym { color: #fff; }
.rc-etapa.rc-agora b { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .rc-passo, .rc-check, .rc-check::after, .rc-festa { transition: none; }
  .rc-passo:hover, .rc-festa:hover { transform: none; }
}
@media (max-width: 560px) {
  .recepcao { padding: 2rem 1.1rem 1.6rem; border-radius: 22px; }
  .rc-bloco { padding: 1.2rem 1rem; }
}

/* ---------- Confetes 🎉 ---------- */

.confetti-box {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute; top: -20px;
  will-change: transform, opacity;
  animation: confetti-fall var(--dur, 3.5s) var(--delay, 0s) cubic-bezier(.25, .4, .45, 1) forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-5vh) translateX(0) rotate(0turn); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(105vh) translateX(var(--sway, 0px)) rotate(var(--spin, 2turn)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .confetti-box { display: none; } }

/* ---------- Animações de entrada ---------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Página do Núcleo EP
   ============================================================ */

/* verde da marca do sistema — vive só nesta página e na logo */
body.theme-nucleo { --accent: #0d9488; --accent-dark: #0b7c72; --tint: #e2f5f2; --ink-band: #0d9488; }
:root[data-theme="dark"] body.theme-nucleo { --accent: #2dd4bf; --accent-dark: #5eead4; --tint: #10312f; --ink-band: #0f766e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.theme-nucleo { --accent: #2dd4bf; --accent-dark: #5eead4; --tint: #10312f; --ink-band: #0f766e; }
}

.ep-hero { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: center; }
@media (min-width: 940px) { .ep-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; } }
.ep-hero .lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; margin-top: .9rem; }
.ep-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.ep-note { font-size: .84rem; color: var(--muted); margin-top: 1rem; }

/* marca do sistema */
.ep-logo { display: inline-flex; align-items: center; gap: .6rem; }
.ep-logo svg { width: 34px; height: 34px; flex: none; }
.ep-logo b { font-size: 1.05rem; letter-spacing: -.02em; color: var(--ink); }

/* ---------- Simulação da interface (ilustração, sem dados reais) ---------- */

.ep-app {
  --m-bg: #ffffff; --m-side: #f7f7f5; --m-ink: #211f1d; --m-muted: #6b6a65;
  --m-line: rgba(33, 31, 29, .1); --m-brand: #0d9488; --m-track: rgba(33, 31, 29, .1);
  display: grid; grid-template-columns: 148px minmax(0, 1fr);
  background: var(--m-bg); color: var(--m-ink);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-hover);
  font-size: .62rem; line-height: 1.35;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ep-app:hover { transform: translateY(-4px); }
:root[data-theme="dark"] .ep-app { --m-bg: #191919; --m-side: #202020; --m-ink: #f1f1ef; --m-muted: #9b9a95; --m-line: rgba(255, 255, 255, .1); --m-track: rgba(255, 255, 255, .14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ep-app { --m-bg: #191919; --m-side: #202020; --m-ink: #f1f1ef; --m-muted: #9b9a95; --m-line: rgba(255, 255, 255, .1); --m-track: rgba(255, 255, 255, .14); }
}

.ep-side { background: var(--m-side); border-right: 1px solid var(--m-line); padding: .7rem .55rem; }
.ep-side .ep-logo { gap: .4rem; margin: .1rem 0 .9rem .25rem; }
.ep-side .ep-logo svg { width: 19px; height: 19px; }
.ep-side .ep-logo b { font-size: .72rem; color: var(--m-ink); display: block; }
.ep-side .ep-logo small { font-size: .53rem; color: var(--m-muted); display: block; }
.ep-cap { font-size: .5rem; letter-spacing: .11em; text-transform: uppercase; color: var(--m-muted); margin: .75rem 0 .3rem .35rem; }
.ep-item { display: flex; align-items: center; gap: .4rem; padding: .32rem .4rem; border-radius: 6px; color: var(--m-ink); }
.ep-item .msym { font-size: 12px; color: var(--m-muted); }
.ep-item.on { background: rgba(72, 124, 165, .15); font-weight: 600; }
.ep-item.on .msym { color: #487ca5; }

.ep-main { padding: .7rem .85rem 1rem; min-width: 0; }
.ep-top { display: flex; align-items: center; gap: .5rem; padding-bottom: .7rem; border-bottom: 1px solid var(--m-line); }
.ep-search { flex: 1; display: flex; align-items: center; gap: .35rem; padding: .3rem .5rem; border: 1px solid var(--m-line); border-radius: 7px; color: var(--m-muted); }
.ep-search .msym { font-size: 12px; }
.ep-kbd { margin-left: auto; font-size: .5rem; padding: .1rem .3rem; border: 1px solid var(--m-line); border-radius: 4px; }
.ep-avatar { width: 17px; height: 17px; border-radius: 50%; background: var(--m-brand); color: #fff; display: grid; place-items: center; font-size: .48rem; font-weight: 700; flex: none; }

.ep-h { display: flex; align-items: center; gap: .35rem; margin: .8rem 0 .15rem; font-size: .92rem; font-weight: 700; letter-spacing: -.02em; }
.ep-h .msym { font-size: 15px; color: #487ca5; }
.ep-sub { color: var(--m-muted); margin-bottom: .7rem; }

.ep-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin-bottom: .7rem; }
.ep-kpi { border: 1px solid var(--m-line); border-radius: 8px; padding: .4rem .45rem; min-width: 0; }
.ep-kpi span { display: block; color: var(--m-muted); font-size: .5rem; line-height: 1.25; }
.ep-kpi b { display: block; font-size: 1rem; margin-top: .15rem; color: var(--m-muted); }
.ep-kpi.hot b { color: #c4554d; }
.ep-kpi.warm b { color: #cc782f; }

.ep-secl { font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--m-muted); margin: .55rem 0 .3rem; }
.ep-row { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--m-line); border-radius: 8px; padding: .4rem .5rem; margin-bottom: .3rem; }
.ep-row .msym { font-size: 12px; color: var(--m-muted); flex: none; }
.ep-row .t { flex: 1; min-width: 0; }
.ep-row .t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-row .t span { color: var(--m-muted); font-size: .53rem; }
.ep-tag { flex: none; padding: .1rem .35rem; border-radius: 999px; font-size: .5rem; font-weight: 700; letter-spacing: .03em; }
.ep-tag.late { background: rgba(196, 85, 77, .16); color: #b4453d; }
.ep-tag.soon { background: rgba(204, 120, 47, .16); color: #a95f21; }
.ep-tag.far { color: var(--m-muted); }
.ep-bar { height: 3px; border-radius: 2px; background: var(--m-track); overflow: hidden; margin-top: .35rem; }
.ep-bar i { display: block; height: 100%; background: var(--m-ink); }

.ep-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.ep-pc { border: 1px solid var(--m-line); border-radius: 8px; padding: .45rem .5rem; min-width: 0; }
.ep-pc.alert { border-left: 2px solid #c4554d; }
.ep-pc .n { color: var(--m-muted); font-size: .5rem; letter-spacing: .09em; text-transform: uppercase; }
.ep-pc .s { font-weight: 600; display: block; margin-top: .1rem; }

@media (max-width: 620px) {
  .ep-app { grid-template-columns: 1fr; }
  .ep-side { display: none; }
  .ep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ep-app:hover { transform: none; } }

/* ---------- Capturas de tela reais (entram quando os arquivos existirem) ---------- */

.shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.shot { border-radius: var(--radius); overflow: hidden; background: var(--glass-tint-strong); margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: .6rem 1rem; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--glass-edge); }

/* ============================================================
   Páginas de conteúdo — mais relevo, mesma legibilidade
   ============================================================ */

/* h2 com marcador em degradê à esquerda */
article.content h2 {
  position: relative; padding-left: .9rem;
}
article.content h2::before {
  content: ''; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}
article.content .card h2::before, article.content .grafico h2::before { display: none; }

/* o conversor transforma linha em CAIXA ALTA em h3, então a maioria dos
   subtítulos do acervo é h3 — ele ganha um traço curto, não uma barra */
article.content h3 { position: relative; padding-left: 1.5rem; }
article.content h3::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 14px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
}
article.content .card h3, article.content .pillar h3 { padding-left: 0; }
article.content .card h3::before, article.content .pillar h3::before { display: none; }

/* marcadores da lista na cor de ação, em vez de cinza morto */
article.content li::marker { color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* cartões de link e listas com mais profundidade e resposta ao toque */
.link-card, .childlist a, .topic-grid a {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background .28s var(--ease), border-color .28s var(--ease);
}
.link-card:hover { transform: translateY(-4px) scale(1.012); }
.childlist a:hover { transform: translateX(5px); box-shadow: var(--shadow-hover); }
.topic-grid a:hover { transform: translateY(-3px) scale(1.015); }
.link-card:hover .lc-ico {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  transform: scale(1.06) rotate(-3deg);
}
.link-card .lc-ico { transition: background .28s var(--ease), transform .28s var(--ease); }

/* embeds com moldura de vidro mais marcada */
.embed { border-radius: var(--radius); }
.embed:hover { transform: translateY(-2px); }
.embed { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }

/* aviso destacado — o "> texto" do conteúdo */
article.content .nota {
  position: relative; isolation: isolate;
  margin: 1.6rem 0;
  padding: 1rem 1.2rem 1rem 3rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--soft-glass));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: var(--shadow);
  font-size: .95rem; color: var(--ink);
}
article.content .nota::before {
  content: 'i';
  position: absolute; left: 1rem; top: 1.05rem;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-family: var(--font-sans); font-size: .75rem; font-weight: 700; font-style: italic;
}

/* citação com aspa decorativa */
.quote { position: relative; padding-left: 3.2rem; }
.quote::after {
  content: '\201C'; position: absolute; left: 1rem; top: .1em;
  font-size: 3.4rem; line-height: 1; font-family: var(--font-sans);
  color: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* entrada suave também nas subpáginas */
.reveal { transform: translateY(28px); }
.reveal.in { transform: none; }

/* ---------- Rodapé ---------- */

footer.site {
  background: var(--soft-glass); color: var(--muted);
  padding: 3.5rem 0 2rem; margin-top: 4rem;
  font-size: .88rem;
  border-top: 1px solid var(--line);
}
footer.site .cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem;
}
@media (max-width: 800px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { footer.site .cols { grid-template-columns: 1fr; } }
footer.site h4 {
  color: var(--ink); font-weight: 600; letter-spacing: -.01em;
  font-size: .92rem; margin-bottom: .9rem;
}
footer.site p { line-height: 1.6; }
footer.site ul { list-style: none; }
footer.site li { margin: .45rem 0; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
footer.site .fineprint {
  border-top: 1px solid var(--line);
  margin-top: 2.6rem; padding-top: 1.4rem;
  font-size: .78rem; color: var(--muted);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ============================================================
   Página do SimulaPacientes
   ============================================================ */

/* Índigo da linha de pacientes digitais — vive só nesta página e na faixa de
   novidades da home. Os valores do modo escuro seguem a mesma exigência do
   resto do arquivo: medidos contra o fundo (#131314) e contra o cartão
   (#1e1f20), os dois acima de 4,5 de contraste. O --tint tem versão escura
   própria porque ele pinta a faixa do título — sem ela, a faixa ficaria clara
   no modo escuro e o título sumiria dentro dela (foi o que aconteceu com o
   theme-teal). */
body.theme-simula { --accent: #5145cd; --accent-dark: #423ab0; --tint: #ecebfb; --ink-band: #5145cd; }
:root[data-theme="dark"] body.theme-simula { --accent: #a5a0f5; --accent-dark: #c3bffa; --tint: #1a1836; --ink-band: #3f3a9e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.theme-simula { --accent: #a5a0f5; --accent-dark: #c3bffa; --tint: #1a1836; --ink-band: #3f3a9e; }
}

.sp-hero { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: center; }
@media (min-width: 940px) { .sp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; } }
.sp-hero .lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; margin-top: .9rem; }
.sp-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.sp-note { font-size: .84rem; color: var(--muted); margin-top: 1rem; }

/* ---------- O código da turma ----------
   É a única coisa que o estudante precisa TER antes de começar, e estava em
   letra miúda embaixo dos botões — lido só depois de esbarrar na trava.
   Vira bloco, com o traço grosso que o Hub usa nos seus próprios símbolos. */
.sp-chave {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-top: 1.8rem; padding: 1.2rem 1.3rem;
  border-radius: 18px;
  background: var(--surface);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 34%, transparent);
}
.sp-chave-ico {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fdd663; border: 2px solid var(--ink);
}
.sp-chave-ico .msym { font-size: 22px; color: #202124; }
:root[data-theme="dark"] .sp-chave-ico { border-color: #202124; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp-chave-ico { border-color: #202124; } }
.sp-chave-t { font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; color: var(--ink); }
.sp-chave-p { font-size: .92rem; color: var(--muted); line-height: 1.5; margin-top: .25rem; }
.sp-chave-nao { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.sp-chave-nao span {
  padding: .2rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--soft-glass));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  font-size: .78rem; font-weight: 600; color: var(--ink);
}
@media (max-width: 560px) { .sp-chave { padding: 1.1rem; gap: .8rem; } }

/* o traço do símbolo é currentColor, e aqui ele recebe a cor de ação da
   página — assim o símbolo clareia junto com o resto no modo escuro, em vez
   de ficar num índigo fixo que some contra a faixa escura do título */
.sp-logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--accent); }
.sp-logo svg { width: 34px; height: 34px; flex: none; }
/* o traço sob o nome é a assinatura visual do Hub, que sublinha em cor a
   parte que importa do título. Vem por background para não brigar com o
   sublinhado de link nem ser cortado pelas descidas das letras. */
.sp-logo > span {
  color: var(--ink);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 5px;
  background-position: 0 100%;
  padding-bottom: 3px;
}

/* ---------- Ilustração da consulta ----------
   Desenhada a partir da tela real do produto: barra em cima, painel de
   controle à esquerda, conversa à direita. A figura tem paleta própria
   (--m-*) porque é a captura de OUTRO sistema dentro desta página — ela não
   deve acompanhar o índigo desta aba, senão deixa de parecer o que é. */

.sp-app {
  --m-bg: #ffffff; --m-page: #f6f6f4; --m-head: #ffffff;
  --m-ink: #1f1e2b; --m-muted: #6b6980; --m-line: rgba(31, 30, 43, .12);
  --m-brand: #1a73e8;
  --m-pac: #f1f1ef; --m-est: #1a73e8; --m-est-ink: #ffffff;
  display: flex; flex-direction: column;
  background: var(--m-page); color: var(--m-ink);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-hover);
  font-size: .68rem; line-height: 1.45;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sp-app:hover { transform: translateY(-4px); }
:root[data-theme="dark"] .sp-app { --m-bg: #191922; --m-page: #131318; --m-head: #191922; --m-ink: #f0eff5; --m-muted: #9c9ab0; --m-line: rgba(255, 255, 255, .12); --m-brand: #8ab4f8; --m-pac: #262533; --m-est: #2b64c4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-app { --m-bg: #191922; --m-page: #131318; --m-head: #191922; --m-ink: #f0eff5; --m-muted: #9c9ab0; --m-line: rgba(255, 255, 255, .12); --m-brand: #8ab4f8; --m-pac: #262533; --m-est: #2b64c4; }
}

/* barra do produto */
/* .sp-appbar, e não .sp-bar: este arquivo já usa .sp-bar para as barrinhas
   de percentual do feedback, de 5px de altura. Como aquela regra vem depois,
   ela vencia — e a barra do produto era achatada a 5px, com o nome saindo
   cortado pelo overflow do cartão. */
.sp-appbar { display: flex; align-items: center; gap: .8rem; padding: .5rem .7rem; background: var(--m-head); border-bottom: 1px solid var(--m-line); }
.sp-brand { display: flex; align-items: center; gap: .4rem; color: var(--m-brand); }
.sp-brand svg { width: 17px; height: 17px; flex: none; }
.sp-brand b { display: block; font-size: .72rem; font-weight: 700; letter-spacing: -.015em; color: var(--m-ink); }
.sp-brand small { display: block; font-size: .45rem; letter-spacing: .1em; text-transform: uppercase; color: var(--m-muted); }
.sp-tabs { display: flex; gap: .8rem; }
.sp-tabs span { font-size: .62rem; color: var(--m-muted); }
.sp-tabs span.on { color: var(--m-ink); font-weight: 600; }

/* as duas colunas */
.sp-body { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: .5rem; padding: .5rem; }
.sp-side, .sp-chat { background: var(--m-bg); border: 1px solid var(--m-line); border-radius: 10px; min-width: 0; }

/* painel de controle */
.sp-side { padding: .6rem .6rem .65rem; }
.sp-area { font-size: .46rem; letter-spacing: .1em; text-transform: uppercase; color: var(--m-muted); }
.sp-pac { font-size: .84rem; font-weight: 700; letter-spacing: -.015em; margin: .1rem 0 .3rem; }
.sp-side-p { font-size: .54rem; color: var(--m-muted); line-height: 1.42; padding-bottom: .55rem; border-bottom: 1px solid var(--m-line); }
.sp-lab { font-size: .55rem; font-weight: 600; margin: .6rem 0 .3rem; }
.sp-ias { display: flex; flex-wrap: wrap; gap: .25rem; }
.sp-iab { display: inline-flex; align-items: center; gap: .25rem; padding: .24rem .4rem; border: 1px solid var(--m-line); border-radius: 7px; font-size: .55rem; }
.sp-iab i { width: 11px; height: 11px; border-radius: 3px; flex: none; display: grid; place-items: center; background: var(--m-brand); color: #fff; font-style: normal; font-size: .4rem; font-weight: 700; }
.sp-iab.on { border-color: var(--m-brand); box-shadow: inset 0 0 0 1px var(--m-brand); font-weight: 600; }
.sp-code { display: block; padding: .32rem .45rem; border: 1px solid var(--m-line); border-radius: 7px; font-size: .58rem; letter-spacing: .05em; }
.sp-btn { display: block; margin-top: .5rem; padding: .34rem; border-radius: 7px; background: var(--m-brand); color: #fff; text-align: center; font-size: .55rem; font-weight: 600; }
.sp-btn.ghost { background: var(--m-bg); color: var(--m-ink); border: 1px solid var(--m-line); font-weight: 500; }
.sp-side-p.sem-linha { border-bottom: 0; padding-bottom: 0; margin-top: .4rem; }

/* conversa */
.sp-chat { display: flex; flex-direction: column; }
.sp-chat-top { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border-bottom: 1px solid var(--m-line); }
/* o rosto vem com anel dourado, como no produto */
.sp-face { width: 26px; height: 26px; border-radius: 50%; flex: none; background: #fff; border: 1.5px solid #e8b931; padding: 1px; }
.sp-chat-top .t { min-width: 0; }
.sp-chat-top .t b { display: block; font-size: .68rem; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-chat-top .t span { display: block; color: var(--m-muted); font-size: .52rem; }
.sp-badge { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .45rem; border-radius: 999px; background: var(--m-pac); color: var(--m-muted); font-size: .52rem; font-weight: 600; }
.sp-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--m-brand); flex: none; }

.sp-talk { flex: 1; display: flex; flex-direction: column; gap: .35rem; padding: .7rem .6rem; }
.sp-msg { max-width: 86%; padding: .38rem .55rem; border-radius: 11px; margin: 0; }
.sp-msg.pac { background: var(--m-pac); border-bottom-left-radius: 4px; align-self: flex-start; }
.sp-msg.est { background: var(--m-est); color: var(--m-est-ink); border-bottom-right-radius: 4px; align-self: flex-end; }
.sp-msg.dig { display: inline-flex; gap: .2rem; padding: .5rem .55rem; }
.sp-msg.dig i { width: 5px; height: 5px; border-radius: 50%; background: var(--m-muted); animation: sp-blink 1.3s var(--ease) infinite; }
.sp-msg.dig i:nth-child(2) { animation-delay: .18s; }
.sp-msg.dig i:nth-child(3) { animation-delay: .36s; }
@keyframes sp-blink { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }

.sp-app-foot { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem 0; }
.sp-input { flex: 1; min-width: 0; padding: .34rem .55rem; border: 1px solid var(--m-line); border-radius: 8px; color: var(--m-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-send { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--m-brand); color: #fff; display: grid; place-items: center; font-size: .62rem; font-weight: 700; }
.sp-priv { padding: .4rem .6rem .55rem; margin: 0; text-align: center; color: var(--m-muted); font-size: .48rem; line-height: 1.35; }

/* no celular a figura fica estreita demais para duas colunas: fica a
   conversa, que é o que a ilustração precisa mostrar */
@media (max-width: 700px) {
  .sp-body { grid-template-columns: 1fr; }
  .sp-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-app:hover { transform: none; }
  .sp-msg.dig i { animation: none; opacity: .5; }
}

/* ---------- Passos numerados (SimulaPacientes e Radar) ----------
   Símbolo redondo de traço grosso sobre cor chapada, número no canto. Nasceu
   na página do SimulaPacientes, copiando a linguagem visual do próprio Hub
   para que quem saísse daqui reconhecesse o produto do outro lado. Como a
   página do Radar precisava do mesmo desenho, o componente perdeu o prefixo
   de uma página só em vez de ser duplicado. */

.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-bottom: 1rem; }
.passo {
  position: relative; padding: 1.5rem 1.4rem 1.4rem;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.passo:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.passo-sim {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  border: 2.5px solid var(--ink);
  margin-bottom: 1rem;
}
.passo-sim .msym { font-size: 26px; color: var(--ink); }
.passo-sim.azul    { background: #a8c7fa; }
.passo-sim.verde   { background: #81c995; }
.passo-sim.amarelo { background: #fdd663; }
/* o traço e o símbolo são sempre escuros: as três cores de fundo são claras
   nos dois temas, então inverter no escuro apagaria o desenho */
:root[data-theme="dark"] .passo-sim { border-color: #202124; }
:root[data-theme="dark"] .passo-sim .msym { color: #202124; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .passo-sim { border-color: #202124; }
  :root:not([data-theme="light"]) .passo-sim .msym { color: #202124; }
}

.passo-num {
  position: absolute; top: 1.1rem; right: 1.2rem;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-soft); color: var(--muted);
  font-size: .78rem; font-weight: 700;
}
article.content .passo h3 {
  padding-left: 0; margin-top: 0; margin-bottom: .4rem;
  font-size: 1.1rem; letter-spacing: -.015em;
  text-transform: none; color: var(--ink);
}
article.content .passo h3::before { display: none; }
.passo p { font-size: .94rem; color: var(--muted); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .passo:hover { transform: none; } }

/* ---------- A fila de rostos ----------
   São os personagens do próprio Hub. Aqui eles dizem, sem texto, que cada
   caso é uma pessoa — e não um enunciado de prova. */

.sp-rostos { margin: 2.2rem 0 1rem; text-align: center; }
.sp-rostos-t { color: var(--muted); font-size: 1rem; margin-bottom: 1.1rem; }
.sp-rostos-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.sp-rostos-fila img {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink);
  padding: 3px;
  transition: transform .3s var(--ease);
}
.sp-rostos-fila img:nth-child(even) { background: #fdf1cf; }
.sp-rostos-fila img:nth-child(3n) { background: #dcefe2; }
.sp-rostos-fila img:hover { transform: translateY(-4px) rotate(-3deg); }
/* os desenhos são de traço preto sobre fundo transparente: no modo escuro
   precisam continuar sobre claro, senão o rosto desaparece */
:root[data-theme="dark"] .sp-rostos-fila img { border-color: #f0eff5; background: #e8e7ee; }
:root[data-theme="dark"] .sp-rostos-fila img:nth-child(even) { background: #f3e6c4; }
:root[data-theme="dark"] .sp-rostos-fila img:nth-child(3n) { background: #d5e7db; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-rostos-fila img { border-color: #f0eff5; background: #e8e7ee; }
  :root:not([data-theme="light"]) .sp-rostos-fila img:nth-child(even) { background: #f3e6c4; }
  :root:not([data-theme="light"]) .sp-rostos-fila img:nth-child(3n) { background: #d5e7db; }
}
@media (prefers-reduced-motion: reduce) { .sp-rostos-fila img:hover { transform: none; } }
@media (max-width: 520px) { .sp-rostos-fila img { width: 58px; height: 58px; } }
/* ---------- Ilustração do feedback ---------- */

.sp-fb-wrap { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 940px) { .sp-fb-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.6rem; } }
article.content .sp-fb-wrap h3:first-child { margin-top: 0; }

.sp-fb {
  --m-bg: #ffffff; --m-ink: #1f1e2b; --m-muted: #6b6980; --m-line: rgba(31, 30, 43, .1);
  --m-track: rgba(31, 30, 43, .1); --m-brand: #5145cd;
  --m-ok: #147a35; --m-mid: #a05c00; --m-no: #c5271d;
  background: var(--m-bg); color: var(--m-ink);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow-hover);
  font-size: .72rem; line-height: 1.45;
  position: sticky; top: 5.5rem;
}
:root[data-theme="dark"] .sp-fb { --m-bg: #191922; --m-ink: #f0eff5; --m-muted: #9c9ab0; --m-line: rgba(255, 255, 255, .11); --m-track: rgba(255, 255, 255, .13); --m-brand: #a5a0f5; --m-ok: #81c995; --m-mid: #fdd663; --m-no: #f28b82; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-fb { --m-bg: #191922; --m-ink: #f0eff5; --m-muted: #9c9ab0; --m-line: rgba(255, 255, 255, .11); --m-track: rgba(255, 255, 255, .13); --m-brand: #a5a0f5; --m-ok: #81c995; --m-mid: #fdd663; --m-no: #f28b82; }
}
@media (max-width: 939px) { .sp-fb { position: static; } }

.sp-fb-top { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; border-bottom: 1px solid var(--m-line); }
.sp-fb-top .t { min-width: 0; }
.sp-fb-top .t b { display: block; font-size: .82rem; font-weight: 700; letter-spacing: -.01em; }
.sp-fb-top .t span { display: block; color: var(--m-muted); font-size: .62rem; }
.sp-score { margin-left: auto; flex: none; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--m-brand); }
.sp-score small { font-size: .8rem; font-weight: 600; }

.sp-fb-list { padding: .7rem .9rem; display: grid; gap: .45rem; }
.sp-item { display: flex; align-items: flex-start; gap: .45rem; margin: 0; }
.sp-item .msym { font-size: 15px; flex: none; line-height: 1.25; }
.sp-item.ok .msym { color: var(--m-ok); }
.sp-item.mid .msym { color: var(--m-mid); }
.sp-item.no .msym { color: var(--m-no); }
.sp-item.no { color: var(--m-muted); }

.sp-fb-dims { padding: .7rem .9rem .2rem; border-top: 1px solid var(--m-line); display: grid; gap: .5rem; }
.sp-dim { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr) 2.2rem; align-items: center; gap: .5rem; margin: 0; }
.sp-dim > span:first-child { color: var(--m-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-dim b { text-align: right; font-weight: 700; }
.sp-dim.off b, .sp-dim.off > span:first-child { color: var(--m-muted); }
.sp-bar { height: 5px; border-radius: 3px; background: var(--m-track); overflow: hidden; }
.sp-bar i { display: block; height: 100%; background: var(--m-brand); border-radius: 3px; }
.sp-fb-leg { padding: .5rem .9rem .85rem; color: var(--m-muted); font-size: .62rem; margin: 0; }

/* ---------- As sete competências ---------- */

.sp-comps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 1.4rem; }
.sp-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--soft-glass));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  font-size: .86rem; font-weight: 600; color: var(--ink);
}
.sp-chip .msym { font-size: 16px; color: var(--accent); }

/* ============================================================
   Faixa de novidades da página inicial
   ============================================================ */

/* A faixa carrega a cor do produto anunciado, e não o azul do site: ela é uma
   amostra da página para onde leva. Por isso a cor de ação é redefinida DENTRO
   dela — assim o selo, a borda e os dois botões falam a mesma língua, sem que
   nenhuma regra de botão precise ser reescrita aqui. Ao trocar a novidade,
   troque estes dois valores. */
.novidades {
  --accent: #5145cd; --accent-dark: #423ab0;
  display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center;
  padding: 2rem 2.1rem;
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    var(--glass-tint-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .novidades { --accent: #a5a0f5; --accent-dark: #c3bffa; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .novidades { --accent: #a5a0f5; --accent-dark: #c3bffa; }
}
@media (min-width: 860px) { .novidades { grid-template-columns: minmax(0, 1fr) auto; gap: 2.4rem; padding: 2.2rem 2.6rem; } }
.nv-selo {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.nv-selo .msym { font-size: 15px; }
.novidades h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; margin: .8rem 0 .5rem; }
.novidades h2 a { color: inherit; text-decoration: none; }
.novidades h2 a:hover { text-decoration: underline; }
.novidades p { color: var(--muted); max-width: 64ch; line-height: 1.6; }
.nv-acoes { display: flex; gap: .7rem; flex-wrap: wrap; }
@media (min-width: 860px) { .nv-acoes { flex-direction: column; } }
/* no escuro a cor de ação clareia, então o texto branco do selo deixa de
   servir — a mesma troca que o .btn-primary já faz no resto do site */
:root[data-theme="dark"] .nv-selo { color: #17162a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nv-selo { color: #17162a; } }

/* ============================================================
   Perfil — página do Dr. Estêvão
   ============================================================ */

.perfil-hero { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .perfil-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .48fr); gap: 3rem; } }
.perfil-hero .lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; margin-top: .9rem; max-width: 60ch; }
.perfil-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .6rem; margin-top: 1.8rem; }

.perfil-retrato {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-hover);
  border: 1px solid var(--glass-edge);
}
.perfil-retrato img { display: block; width: 100%; height: auto; }
.perfil-retrato figcaption { padding: .7rem 1rem; font-size: .82rem; color: var(--muted); text-align: center; }

/* a lista de cursos e congressos é longa; na linha do tempo ela ganha um
   compasso mais curto para não virar um paredão de 21 blocos altos */
article.content .timeline.lista-densa li { margin-bottom: .55rem; font-size: .93rem; }

.perfil-data { margin-top: 2.4rem; font-size: .84rem; color: var(--muted); }

/* ============================================================
   Equipe
   ============================================================ */

/* a foto é panorâmica e já vem recortada; limitar a largura impede que ela
   ocupe a tela inteira e empurre o conteúdo da página para fora da primeira
   dobra */
.eq-foto {
  max-width: 900px; margin: 0 auto 2.6rem; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-hover);
  border: 1px solid var(--glass-edge);
}
.eq-foto img { display: block; width: 100%; height: auto; }
.eq-foto figcaption { padding: .7rem 1.1rem; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--glass-edge); }

/* ---------- Fluxo de quem responde pelo quê ----------
   Quatro caixas lado a lado não diziam quem responde a quem: o leitor via
   nomes e cargos, e tinha de deduzir a relação. Aqui os níveis descem em
   degraus ligados por uma linha, e cada linha carrega o verbo que liga um ao
   seguinte. A ligação é desenhada em CSS, e não em imagem, para acompanhar o
   tema e o tamanho da tela.

   O nome dessa figura não é organograma de cargos — é a resposta a "quem fala
   com quem aqui?", que é a pergunta de quem chega. */

.org { margin: 0 auto 2.4rem; max-width: 760px; }
.org-nivel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.org-nivel.dois { grid-template-columns: minmax(0, 1fr); position: relative; }
@media (min-width: 680px) { .org-nivel.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 1.5rem; } }

.org-card {
  position: relative;
  padding: 1.2rem 1.35rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow);
  display: block; text-decoration: none !important; color: inherit;
}
/* os dois primeiros degraus são os que respondem pelo conjunto, e por isso
   ganham peso: traço na cor de ação à esquerda e fundo levemente tingido */
.org-card.direcao, .org-card.coordenacao {
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.org-card.base {
  background: var(--soft-glass);
  border-style: dashed;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.org-card.base:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
@media (prefers-reduced-motion: reduce) { .org-card.base:hover { transform: none; } }

.org-papel {
  display: inline-block; padding: .18rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-dark);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
:root[data-theme="dark"] .org-papel { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .org-papel { color: var(--accent); } }
.org-nome { font-size: 1.16rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-top: .65rem; }
.org-onde { font-size: .85rem; color: var(--accent); font-weight: 600; margin-top: .1rem; }
.org-faz { font-size: .93rem; color: var(--muted); line-height: 1.55; margin-top: .5rem; }

/* o degrau entre dois níveis: linha vertical com o verbo no meio */
.org-liga {
  position: relative; height: 3.1rem;
  display: grid; place-items: center;
}
.org-liga::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}
.org-liga span {
  position: relative;
  padding: .2rem .7rem; border-radius: 999px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: .78rem; font-weight: 600; color: var(--muted);
  white-space: nowrap;
}

/* a bifurcação para os dois supervisores: um traço horizontal ligando os
   centros das duas colunas, e um toco vertical descendo até cada cartão */
@media (min-width: 680px) {
  .org-nivel.dois::before {
    content: ''; position: absolute; top: 0; left: 25%; right: 25%;
    height: 2px; background: color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .org-nivel.dois .org-card::before {
    content: ''; position: absolute; top: -1.5rem; left: 50%;
    width: 2px; height: 1.5rem; margin-left: -1px;
    background: color-mix(in srgb, var(--accent) 45%, transparent);
  }
}
/* no celular tudo vira uma coluna só: a bifurcação sairia torta, e a própria
   ordem de leitura já diz que os dois estão no mesmo degrau */
@media (max-width: 679px) {
  .org-nivel.dois { gap: .8rem; }
  .org-liga { height: 2.4rem; }
}

/* grade de nomes — 700 nomes em lista de itens dariam 700 linhas; em fichas
   lado a lado a mesma informação cabe na tela e continua legível */
.eq-nomes { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.6rem; }
.eq-chip {
  padding: .34rem .75rem; border-radius: 999px;
  background: var(--soft-glass);
  border: 1px solid var(--glass-edge);
  font-size: .87rem; color: var(--ink); line-height: 1.35;
}

.eq-acervo { margin-top: 1.4rem; }
article.content h3.eq-turma {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding-left: 0; margin-top: 2rem; margin-bottom: .7rem;
  font-size: .95rem; letter-spacing: .06em; color: var(--ink);
}
article.content h3.eq-turma::before { display: none; }
h3.eq-turma span {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: .82rem; color: var(--muted);
}
.eq-anon { font-size: .85rem; color: var(--muted); margin: -.9rem 0 1.6rem; font-style: italic; }

/* ============================================================
   Radar de Congressos
   ============================================================ */

/* Azul-ciano do painel: distingue a página do índigo do SimulaPacientes e do
   azul padrão do site. Medido contra o fundo (#131314) e contra o cartão
   (#1e1f20) no modo escuro, e contra o branco no claro — os três acima de
   4,5. O --tint tem versão escura própria porque pinta a faixa do título. */
body.theme-radar { --accent: #0b6e99; --accent-dark: #08567a; --tint: #e3f2fa; --ink-band: #0b6e99; }
:root[data-theme="dark"] body.theme-radar { --accent: #4fc3f7; --accent-dark: #81d4fa; --tint: #0d2733; --ink-band: #084f6e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.theme-radar { --accent: #4fc3f7; --accent-dark: #81d4fa; --tint: #0d2733; --ink-band: #084f6e; }
}

.rd-hero { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: center; }
@media (min-width: 940px) { .rd-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 3rem; } }
.rd-hero .lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; margin-top: .9rem; }
.rd-acoes { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.rd-nota { font-size: .86rem; color: var(--muted); margin-top: 1.1rem; }

/* o painel destaca parte do próprio título numa caixa; a página repete o
   gesto para que quem clica reconheça o produto do outro lado */
.rd-titulo { letter-spacing: -.03em; }
.rd-titulo span {
  display: inline-block;
  padding: 0 .35em; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ---------- Ilustração do painel ---------- */

.rd-app {
  --m-bg: #ffffff; --m-page: #f7f6f4; --m-ink: #16181d; --m-muted: #63697a;
  --m-line: rgba(22, 24, 29, .12);
  --m-ok: #1f7a4d; --m-ok-bg: #e2f4ea;
  --m-meio: #9a6200; --m-meio-bg: #fbf0d8;
  --m-nao: #b3352c; --m-nao-bg: #fbe6e4;
  background: var(--m-page); color: var(--m-ink);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow-hover);
  font-size: .7rem; line-height: 1.45;
  transition: transform .35s var(--ease);
}
.rd-app:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .rd-app:hover { transform: none; } }
:root[data-theme="dark"] .rd-app { --m-bg: #1b1d22; --m-page: #141519; --m-ink: #eef0f4; --m-muted: #9aa1b2; --m-line: rgba(255,255,255,.12); --m-ok: #7fd1a5; --m-ok-bg: #163024; --m-meio: #f0c26a; --m-meio-bg: #33290f; --m-nao: #f0938c; --m-nao-bg: #33191a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rd-app { --m-bg: #1b1d22; --m-page: #141519; --m-ink: #eef0f4; --m-muted: #9aa1b2; --m-line: rgba(255,255,255,.12); --m-ok: #7fd1a5; --m-ok-bg: #163024; --m-meio: #f0c26a; --m-meio-bg: #33290f; --m-nao: #f0938c; --m-nao-bg: #33191a; }
}

.rd-app-top { display: flex; align-items: baseline; gap: .6rem; padding: .65rem .8rem; background: var(--m-bg); border-bottom: 1px solid var(--m-line); }
.rd-marca { font-size: .78rem; font-weight: 700; letter-spacing: -.015em; }
.rd-exec { margin-left: auto; color: var(--m-muted); font-size: .6rem; }

.rd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; padding: .7rem .8rem; }
.rd-kpi { background: var(--m-bg); border: 1px solid var(--m-line); border-radius: 9px; padding: .5rem .55rem; min-width: 0; }
.rd-kpi b { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.rd-kpi span { display: block; color: var(--m-muted); font-size: .53rem; line-height: 1.25; margin-top: .15rem; }

.rd-linhas { padding: 0 .8rem .8rem; display: grid; gap: .4rem; }
.rd-linha { display: flex; align-items: center; gap: .5rem; background: var(--m-bg); border: 1px solid var(--m-line); border-radius: 9px; padding: .5rem .6rem; }
.rd-linha .t { min-width: 0; flex: 1; }
.rd-linha .t b { display: block; font-size: .67rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-linha .t span { display: block; color: var(--m-muted); font-size: .55rem; }

/* ---------- As etiquetas de veredito ----------
   Cor E palavra: quem não distingue verde de vermelho lê a etiqueta. É a
   mesma exigência que o Núcleo EP já cumpre nos prazos. */
.rd-sel {
  flex: none; display: inline-block;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.rd-app .rd-sel { font-size: .55rem; }
.rd-sel.ok    { background: var(--m-ok-bg, #e2f4ea);   color: var(--m-ok, #1f7a4d); }
.rd-sel.meio  { background: var(--m-meio-bg, #fbf0d8); color: var(--m-meio, #9a6200); }
.rd-sel.nao   { background: var(--m-nao-bg, #fbe6e4);  color: var(--m-nao, #b3352c); }
.rd-sel.espera { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-dark); }
.rd-sel.fora  { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--muted); }
:root[data-theme="dark"] .rd-sel.espera { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-sel.espera { color: var(--accent); } }

.rd-vereditos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.rd-ver {
  padding: 1.1rem 1.2rem;
  border-radius: 16px; background: var(--glass-tint);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
}
.rd-ver p { font-size: .92rem; color: var(--muted); line-height: 1.55; margin-top: .6rem; }