/* base.css — reset + tipografia ABSOLUTA + chassi fixo Bauer (assinatura GO)
   Herda a gramática do chassi pneumo/cir-onco2, reskin por tokens rosa-vinho. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--ink-100);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  min-height: 100%;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* === Camada 1: dot-grid neon rosa (todas as páginas) === */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, var(--grid-dot) 1.3px, transparent 1.7px);
  background-size: var(--grid-gap) var(--grid-gap);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 25%, rgba(0,0,0,0.42) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 25%, rgba(0,0,0,0.42) 100%);
}

/* === Camada 2: luz móvel — orb superior BRANCO + orb inferior ROSA (todas as páginas) === */
.page-orb {
  position: fixed; left: 58%; top: -26vh;
  width: 80vh; height: 80vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.34) 0%, transparent 64%);
  opacity: 0.30; filter: blur(84px);
  pointer-events: none; z-index: 0; mix-blend-mode: screen;
  animation: orbBreath 16s ease-in-out infinite; will-change: transform, opacity;
}
.page-orb--rose {
  left: 0%; top: 40vh; width: 62vh; height: 62vh;
  background: radial-gradient(circle, rgba(255,92,138,0.42) 0%, transparent 66%);
  opacity: 0.24; animation-duration: 21s; animation-delay: -7s;
}
@keyframes orbBreath {
  0%   { transform: translate(0,0) scale(1);          opacity: 0.20; }
  20%  { transform: translate(-2vw, 10px) scale(1.03); opacity: 0.27; }
  40%  { transform: translate(-1vw, 22px) scale(1.07); opacity: 0.34; }
  60%  { transform: translate(2vw, 16px) scale(1.06);  opacity: 0.32; }
  80%  { transform: translate(1.4vw, 6px) scale(1.02); opacity: 0.25; }
  100% { transform: translate(0,0) scale(1);          opacity: 0.20; }
}
:root[data-theme="light"] .page-orb { mix-blend-mode: multiply; opacity: 0.22; background: radial-gradient(circle, rgba(255,190,214,0.55) 0%, transparent 64%); }
:root[data-theme="light"] .page-orb--rose { opacity: 0.20; }
@media (prefers-reduced-motion: reduce) { .page-orb { animation: none; } }

/* === Camada 3: rachaduras neon rosa (SVG inline, drop-shadow bloom, mascaradas) === */
.crack-field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  color: var(--crack);
  opacity: 0.5;
  filter: drop-shadow(0 0 2px var(--crack)) drop-shadow(0 0 9px var(--crack));
  -webkit-mask-image: radial-gradient(130% 105% at 50% 0%, #000 0%, rgba(0,0,0,.30) 55%, transparent 86%);
          mask-image: radial-gradient(130% 105% at 50% 0%, #000 0%, rgba(0,0,0,.30) 55%, transparent 86%);
}
.crack-field svg { width: 100%; height: 100%; }
.crack-field path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; opacity: 0.55; }
:root[data-theme="light"] .crack-field { opacity: 0.30; }

/* conteúdo sempre acima das 3 camadas de ambiente.
   ⚠️ 2026-07-28: o .site-header SAIU desta lista. Ele estava aqui e o
   `body > .site-header` (especificidade 0,1,1) VENCIA o `.site-header{position:sticky}`
   da l.133 (0,1,0) — o cabeçalho nunca grudou, em NENHUMA aula, e o auto-hide do
   app-aN.js vinha alternando data-hidden sobre um header que já tinha saído da tela
   (o gate G-27 estava morto). Ele não perde nada saindo daqui: já tem
   z-index:var(--z-sticky)=20 na própria regra, acima do z-index:1 daqui. */
body > main, body > .site-footer { position: relative; z-index: 1; }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
/* SVG-namespaced <style>/<script> NUNCA renderizam como texto: alguns motores não
   aplicam o display:none da UA a esses nós dentro de SVG inline, vazando o código-fonte
   JS/CSS como parágrafo visível (figura inchava de ~550px para ~2800px). display:none
   esconde o texto sem desligar a folha de estilo (segue aplicando) nem a execução do script. */
svg > style, svg > script, svg style, svg script { display: none !important; }
button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }

a { color: var(--rose-hi); text-decoration: none; border-bottom: 1px solid var(--rose-soft);
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
a:hover, a:focus-visible { color: var(--rose); border-bottom-color: var(--rose); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 4px; }

/* === Tipografia: títulos e tópicos LIVRES (alinhamento criativo) === */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans); font-weight: 700; color: var(--ink-100);
  letter-spacing: -0.01em; line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3) 0; text-wrap: balance;
}
h1 { font-size: var(--fs-display); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }

/* === REGRA ABSOLUTA §4.1: todo <p> de prosa justificado + text-indent + margem folgada === */
p {
  margin: 0 0 var(--sp-5) 0;
  max-width: var(--container-text);
  line-height: var(--lh-base);
}
.prose p { text-align: justify; text-indent: 1.7em; -webkit-hyphens: auto; hyphens: auto; }
.prose p:first-of-type { text-indent: 1.7em; }
/* parágrafos que NÃO recebem indent/justify: cards de 1 linha, legendas */
.no-indent, .caption, figcaption p, .card p.lead-1 { text-indent: 0; text-align: left; }
:lang(pt) { -webkit-hyphens: auto; hyphens: auto; }

ul, ol { padding-left: var(--sp-5); margin: 0 0 var(--sp-5) 0; }
li { margin-bottom: var(--sp-2); }
strong { color: var(--ink-100); font-weight: 700; }
em { font-style: italic; color: var(--ink-90); }
hr { border: 0; height: 1px; background: var(--border-soft); margin: var(--sp-6) 0; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-1); padding: 0.1em 0.35em; border-radius: 4px; }

/* === Container / coluna de leitura (margens MAIORES) === */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto;
  padding-left: var(--reading-pad); padding-right: var(--reading-pad); }
.reading { max-width: calc(var(--container-text) + 2 * var(--reading-pad)); margin: 0 auto;
  padding-left: var(--reading-pad); padding-right: var(--reading-pad); }
@media (max-width: 640px) {
  .container, .reading { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -10000px; top: var(--sp-3); z-index: var(--z-modal);
  background: var(--bg-2); color: var(--ink-100); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--rose); }
.skip-link:focus { left: var(--sp-4); }

/* === Header FLOATING (Apple-like, arredondado, descolado das bordas) === */
.site-header {
  position: sticky;
  top: calc(max(var(--sp-3), env(safe-area-inset-top)) + var(--sp-2));
  z-index: var(--z-sticky);
  width: min(var(--container-max), calc(100% - 2 * var(--sp-4)));
  margin: var(--sp-3) auto 0;
  background: var(--bg-glass-strong);
  backdrop-filter: saturate(150%) blur(22px);
  -webkit-backdrop-filter: saturate(150%) blur(22px);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-3) var(--sp-4);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--bg-1); }
}
.site-header[data-hidden="true"] { transform: translateY(calc(-100% - var(--sp-6))); box-shadow: none; }
@media (max-width: 640px) {
  .site-header { width: calc(100% - 2 * var(--sp-3)); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3); }
  /* Título de aula pode ser palavra-única longa ("Cardiotocografia"): sem isto o min-content
     empurra os 3 icon-btns para fora da viewport a 320px (G-5 reflow). O spacer (flex:1) some
     no mobile e o brand cresce no lugar — assim o título recebe TODA a folga (evita a quebra
     em 4 linhas quando o spacer engolia o espaço); a palavra ainda pode quebrar se preciso. */
  .site-header__spacer { display: none; }
  .site-header__brand { flex: 1 1 auto; min-width: 0; }
  .site-header__titles { min-width: 0; }
  .site-header__title { overflow-wrap: anywhere; }
}
/* Em telas de fone estreito o "1/12" (indicador de UI, redundante com o menu) e o subtítulo
   (contexto redundante com logo+título) saem para dar respiro ao título — nenhum conteúdo
   médico é perdido. */
@media (max-width: 560px) {
  .site-header__progress { display: none; }
  .site-header__subtitle { display: none; }
}
/* Nos menores aparelhos o ícone-casa dedicado sai (o logo/título JÁ é link p/ o hub e o menu
   tem "Voltar ao hub") — libera ~48px para o título de palavra-única caber em 1–2 linhas
   limpas em vez de quebrar em 3–4. Home segue plenamente acessível. */
@media (max-width: 400px) { #home-btn { display: none; } }
.site-header__row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; }
.site-header__brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink-100); border-bottom: 0; }
.site-header__brand:hover { color: var(--rose); }
.site-header__logo { width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0;
  background: linear-gradient(135deg, var(--wine), var(--bg-2));
  border: 1px solid var(--rose); display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 0.98rem; color: var(--ink-100);
  letter-spacing: 0.02em; box-shadow: inset 0 0 12px rgba(255,92,138,0.25); }
.site-header__titles { line-height: 1.18; }
.site-header__title { font-size: var(--fs-md); font-weight: 700; }
.site-header__subtitle { font-size: var(--fs-xs); color: var(--ink-70); }
.site-header__spacer { flex: 1; }
.site-header__progress { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-90);
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border-mid); border-radius: var(--r-pill);
  background: var(--wine-soft); white-space: nowrap; flex-shrink: 0; }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.icon-btn { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0;
  color: var(--ink-90); border: 1px solid var(--border-soft); background: var(--bg-1);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.icon-btn:hover, .icon-btn:focus-visible { color: var(--rose); border-color: var(--rose); background: var(--bg-2); transform: translateY(-1px); }
.icon-btn svg { width: 20px; height: 20px; }

/* === Menu overlay (painel à direita, dupla camada glass, NÃO fullscreen) === */
.menu-overlay { position: fixed; inset: 0; z-index: var(--z-menu); pointer-events: none; opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out); background: rgba(15,8,16,0.46);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.menu-overlay[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.menu-panel { position: absolute; top: 76px; right: var(--sp-4);
  width: min(360px, calc(100vw - 2 * var(--sp-4)));
  max-height: calc(100vh - 108px - env(safe-area-inset-bottom)); overflow-y: auto;
  background: var(--bg-glass-strong); backdrop-filter: saturate(150%) blur(24px); -webkit-backdrop-filter: saturate(150%) blur(24px);
  border: 1px solid var(--border-mid); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-4); transform: translateY(-6px) scale(0.98); opacity: 0;
  transition: transform var(--dur-mid) var(--ease-lux), opacity var(--dur-mid) var(--ease-out); }
.menu-overlay[aria-hidden="false"] .menu-panel { transform: translateY(0) scale(1); opacity: 1; }
.menu-panel__title { font-size: var(--fs-xs); color: var(--ink-70); text-transform: uppercase; letter-spacing: 0.08em; margin: var(--sp-2) var(--sp-2) var(--sp-3); }
.menu-panel__list { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.menu-panel__link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  border-radius: var(--r-sm); color: var(--ink-90); border-bottom: 0; transition: background var(--dur-fast), color var(--dur-fast); }
.menu-panel__link:hover, .menu-panel__link:focus-visible { background: var(--bg-2); color: var(--ink-100); border-bottom: 0; }
.menu-panel__link[aria-current="page"], .menu-panel__link.is-active { background: var(--wine-soft); color: var(--rose); border-left: 3px solid var(--rose); padding-left: calc(var(--sp-3) - 3px); }
.menu-panel__index { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-50); min-width: 28px; }

/* === Main === */
main { flex: 1; padding-bottom: var(--sp-9);
  padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }

/* === Footer === */
.site-footer { border-top: 1px solid var(--border-soft);
  padding: var(--sp-6) 0 calc(var(--sp-5) + env(safe-area-inset-bottom)); color: var(--ink-70); font-size: var(--fs-sm); }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.site-footer a { color: var(--ink-70); border-bottom: 0; }

/* === PWA install prompt === */
.pwa-install { position: fixed; bottom: var(--sp-4); left: var(--sp-4); right: var(--sp-4); max-width: 480px; margin: 0 auto;
  z-index: var(--z-install); background: var(--bg-2); border: 1px solid var(--rose); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-lg); display: none; align-items: center; gap: var(--sp-3); }
.pwa-install.show { display: flex; }
.pwa-install__text { flex: 1; font-size: var(--fs-sm); }
.pwa-install__text strong { color: var(--rose); }
.pwa-install button { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--border-mid); background: var(--bg-1); }
.pwa-install button.is-primary { background: var(--wine); color: var(--ink-100); border-color: var(--rose); }

@media print {
  .site-header, .menu-overlay, .pwa-install, .page-nav, .skip-link, .crack-field, .page-orb { display: none !important; }
  body { background: #fff; color: #000; }
  .page { display: block !important; page-break-inside: avoid; }
}