/* ============================================================================
   BASE — tipografia, componentes recorrentes e as duas gramáticas visuais.
   Fonte de verdade: 02-arquitetura/02-design-system.md §4.3, §4.5, §4.6.
   ========================================================================== */

/* --- Fontes auto-hospedadas. Zero CDN (P4: offline-first). ---------------
   font-display: block, não swap — um FOUT numa projeção é feio e distrai
   mais do que um atraso de 100ms que ninguém percebe. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: block;
  src: url('../assets/fontes/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: block;
  src: url('../assets/fontes/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: block;
  src: url('../assets/fontes/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: block;
  src: url('../assets/fontes/inter-tight-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 800; font-display: block;
  src: url('../assets/fontes/inter-tight-800.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: block;
  src: url('../assets/fontes/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: block;
  src: url('../assets/fontes/jetbrains-mono-700.woff2') format('woff2');
}

/* ============================================================================
   ESCALA TIPOGRÁFICA
   Nada abaixo de peso 500 em tamanho < 44px: Inter 400 a 32px numa projeção
   de baixo contraste simplesmente desaparece. Peso 300 não existe no deck.
   ========================================================================== */
.t-dxl, .t-d1, .t-d2, .t-d3 { font-family: var(--font-display); margin: 0 }
.t-dxl { font-size: var(--fs-dxl); font-weight: 800; line-height: var(--lh-dxl); letter-spacing: var(--tr-dxl) }
.t-d1  { font-size: var(--fs-d1);  font-weight: 800; line-height: var(--lh-d1);  letter-spacing: var(--tr-d1) }
.t-d2  { font-size: var(--fs-d2);  font-weight: 800; line-height: var(--lh-d2);  letter-spacing: var(--tr-d2) }
.t-d3  { font-size: var(--fs-d3);  font-weight: 700; line-height: var(--lh-d3);  letter-spacing: var(--tr-d3) }

.t-h1   { font: 700 var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--tr-h1); margin: 0 }
.t-h2   { font: 600 var(--fs-h2)/var(--lh-h2) var(--font-body);    letter-spacing: var(--tr-h2); margin: 0 }
.t-lg   { font: 500 var(--fs-lg)/var(--lh-lg) var(--font-body); margin: 0 }
.t-body { font: 500 var(--fs-body)/var(--lh-body) var(--font-body); margin: 0 }

/* Todo espaçamento do palco vem de gap e dos tokens. A margem de 1em do agente
   de usuário é a única medida do deck que não passa por tokens.css — e ela é
   proporcional à fonte, então num .kpi__num de 64px abre 64px de buraco. Foi o
   que empurrou os cartões da S04 para fora do pé do palco e o que empilhou as
   seis etapas do bundle da S18 umas sobre as outras.
   :where() tem especificidade zero: toda regra que declare margem de propósito
   continua vencendo, inclusive as classes tipográficas logo acima. A fala do
   palestrante é prosa de leitura no celular e mantém a margem do navegador. */
.scene :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, figure) { margin: 0 }
.notes :where(p, ul, ol, blockquote) { margin: revert }

.t-label {
  font: 600 var(--fs-label)/1.2 var(--font-body);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--txt-low); margin: 0;
}
.t-mono {
  font: 700 var(--fs-mono)/1.1 var(--font-mono);
  font-variant-numeric: tabular-nums; margin: 0;
}
/* Referência bibliográfica. Deliberadamente sub-legível: serve para o colega
   fotografar o slide, não para ler do fundo da sala. Se um número é importante
   o suficiente para ser lido, ele não está aqui. */
.t-ref {
  font: 400 var(--fs-ref)/1.3 var(--font-mono);
  color: var(--txt-dim); margin: 0;
}
.t-ref--warn::before { content: '⚠ '; color: var(--warn) }

.u-high { color: var(--txt-high) } .u-mid  { color: var(--txt-mid) }
.u-low  { color: var(--txt-low) }  .u-dim  { color: var(--txt-dim) }
.u-pri  { color: var(--primary-soft) }
.u-acc  { color: var(--accent) }
.u-ai   { color: var(--ai-glow) }
.u-warn { color: var(--warn) }
.u-center { text-align: center }
.u-num  { font-variant-numeric: tabular-nums }

/* ============================================================================
   AS DUAS GRAMÁTICAS VISUAIS (§4.6)
   Um leigo em IA tem que saber de que lado uma peça é, sem ler o rótulo.
   Papel opaco de canto duro à esquerda; vidro emissivo de canto macio à direita.
   É essa distinção que faz o entrelaçamento do Ato IV ser legível.
   ========================================================================== */

/* --- Mundo médico: papel, formulário, carimbo ---------------------------- */
.float--med {
  background: var(--med-surface);
  border: 1px solid var(--med-border);
  border-radius: var(--r-sm);
  box-shadow: var(--elev-1);
  padding: var(--sp-4);
  color: var(--med-ink);
  background-image: repeating-linear-gradient(
    0deg, transparent 0 2.4375rem, var(--med-rule) 2.4375rem 2.5rem);
  filter: sepia(.12) saturate(.75);
}
.float--med .t-label { color: var(--med-stamp) }

/* --- Mundo IA: vidro emissivo, grade técnica ---------------------------- */
.float--ai {
  background: rgba(56, 189, 248, .06);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid var(--ai-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--glow-ai);
  padding: var(--sp-4);
  color: var(--txt-high);
  background-image:
    linear-gradient(var(--ai-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ai-grid) 1px, transparent 1px);
  background-size: 4rem 4rem;
}
.float--ai .t-label { color: var(--ai-glow) }

/* Carimbo do mundo médico — o "REV. 04" do POP */
.stamp {
  position: absolute; top: -.75rem; right: -.75rem;
  width: 5rem; height: 5rem; border-radius: var(--r-full);
  border: 3px solid var(--med-stamp); color: var(--med-stamp);
  display: grid; place-items: center; transform: rotate(-14deg);
  font: 700 1.125rem/1 var(--font-mono); text-align: center;
  opacity: .8;
}

/* Ponto de status do mundo IA */
.dot-live {
  width: .625rem; height: .625rem; border-radius: var(--r-full);
  background: var(--ai-core); box-shadow: 0 0 12px var(--ai-core);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; transform: scale(.8) } }

/* ============================================================================
   COMPONENTES RECORRENTES
   ========================================================================== */

/* Card de vidro genérico — usado fora dos dois mundos (bio, dados, citação) */
.card-glass {
  background: var(--bg-glass);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--elev-1);
}
.card-glass--pri { border-color: rgba(11, 77, 166, .55) }
.card-glass--ai  { border-color: var(--ai-edge) }
.card-glass--acc {
  border: 2px solid var(--accent);
  background: rgba(230, 57, 70, .10);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
}

/* Régua-divisor: o lockup do simpósio redesenhado */
.rule-brand {
  width: 10rem; height: 2px; border: 0; margin: var(--sp-3) 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.rule-thin { width: 100%; height: 1px; border: 0; background: var(--stroke) }

/* Eyebrow de ato, canto superior esquerdo */
.act-tag {
  position: absolute; top: var(--margin-v); left: var(--margin-h);
  font: 600 var(--fs-label)/1 var(--font-mono);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--txt-dim);
}

/* Número-choque: o dado que a plateia leva para casa.
   --accent é recurso escasso — no máximo UM por cena (regra de §5.2). */
.stat {
  font: 800 var(--fs-d1)/var(--lh-d1) var(--font-display);
  letter-spacing: var(--tr-d1); font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.stat--pri { color: var(--primary-soft) }
.stat--ai  { color: var(--ai-core) }
.stat__unit { font-size: .45em; font-weight: 700; letter-spacing: 0 }

/* Cápsula branca obrigatória para o lockup do simpósio.
   O logo tem wordmark navy que sumiria no fundo escuro — é o mesmo padrão
   que o site usa no rodapé. */
.brand-capsule {
  background: #fff; border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3);
  display: inline-flex; align-items: center;
}
.brand-capsule img { height: 4.5rem; display: block }

/* Chip nominativo de marca de terceiro. NUNCA o logotipo oficial: uso
   nominativo em tipografia do próprio deck, sem sugerir patrocínio ou endosso
   (ADR-0009 e §4.7). */
.brand-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ai-edge); border-radius: var(--r-lg);
  background: rgba(56,189,248,.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 600 var(--fs-label)/1 var(--font-display);
  letter-spacing: .06em; text-transform: uppercase; color: var(--txt-high);
  white-space: nowrap;
}
.brand-chip__glyph { width: 1.5rem; height: 1.5rem; flex: none; color: var(--ai-glow) }
.brand-chip__org {
  font-weight: 400; color: var(--txt-low); letter-spacing: .04em;
  font-family: var(--font-mono); font-size: .875em;
}

/* Selo de simulação — não removível por configuração (ADR-0011).
   Presente nos três modos da demo. Em LIVE vira "AO VIVO · PACIENTE FICTÍCIO",
   porque mesmo ao vivo o caso é inventado. */
.sim-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: var(--warn); color: #0A1E3D;
  padding: .375rem .875rem; border-radius: var(--r-full);
  font: 700 var(--fs-label)/1 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
}

/* Lista de conteúdo. Máximo 4 itens, máximo 8 palavras por item (§5.2). */
.list-clean { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3) }
.list-clean li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font: 500 var(--fs-body)/var(--lh-body) var(--font-body);
}
.list-clean .tick { flex: none; width: 2rem; height: 2rem; color: var(--accent) }

/* Rodapé de referência, ancorado na base da cena */
.scene__ref {
  position: absolute; left: var(--margin-h); right: var(--margin-h);
  bottom: calc(var(--margin-v) - 2.5rem);
}

/* Utilitários de layout */
.u-flex  { display: flex }
.u-stack { display: grid; gap: var(--sp-3) }
.u-between { display: flex; justify-content: space-between; align-items: center }
.u-full  { width: 100%; height: 100% }
.u-abs   { position: absolute }
.u-rel   { position: relative }

/* Acessibilidade: conteúdo só para leitor de tela / só para o mobile */
.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;
}