/* ============================================================
   FORJA LENDÁR[IA] · forja.css
   O CSS-MÃE. Toda estrutura, atmosfera e componentes vivem aqui.
   Tokens de cor + tipo: colors_and_type.css (carregar ANTES deste).
   Regra: nenhuma página tem <style> próprio. Espaçamento sempre
   via tokens de colors_and_type.css · nunca hardcode por página.
   ============================================================ */

/* ───────────────── BASE / RESET ───────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  background: var(--preto); color: var(--bege);
  font-family: var(--voz-operacional); line-height: 1.7;
  overflow-x: hidden; position: relative; -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
a { color: inherit; text-decoration: none; }
svg { display: block; }

/* foco visível global · WCAG 2.4.7 · todo link/botão/card interativo */
*:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; border-radius: 1px; }
/* skip-link · "Ir para o conteúdo" */
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; background: var(--preto-2); color: var(--amarelo); border: 1px solid var(--amarelo); font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; transform: translateY(-180%); transition: transform 0.2s ease; }
.skip-link:focus { transform: translateY(0); }
@media print { .skip-link, .rail, .ember-field, .scroll-hint, .bd-scroll, .legend-open { display: none !important; } }

/* atmosfera permanente · película de grão + vinheta (Lei I) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,0.64) 100%);
}

/* iconografia monoline */
.ico { stroke: var(--bronze-claro); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ico-amarelo { stroke: var(--amarelo); }
.ico-vermelho { stroke: var(--vermelho-sinal); }

/* container de leitura · só padding HORIZONTAL (lógico), p/ não zerar o
   padding-block das seções por especificidade */
.codex { max-width: var(--codex-max); margin: 0 auto; padding-inline: var(--codex-pad); }

/* camadas acima da atmosfera */
.codex, .hero, .page-head, .shell, footer, .rail { position: relative; z-index: 2; }

/* ───────────────── BRASAS · PARALLAX ───────────────── */
.ember-field { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.ember { position: absolute; bottom: -20px; width: 3px; height: 3px; border-radius: 50%; background: var(--amarelo); opacity: 0; filter: blur(0.4px); box-shadow: 0 0 6px 1px rgba(246,195,36,0.7); animation: emberRise linear infinite; }
@keyframes emberRise {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  12% { opacity: 0.9; }
  70% { opacity: 0.7; }
  100% { transform: translateY(-104vh) translateX(var(--drift,20px)) scale(0.3); opacity: 0; }
}

/* ───────────────── TOP RAIL + NAV ───────────────── */
.rail {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 36px; backdrop-filter: blur(3px);
  background: linear-gradient(180deg, rgba(19,17,9,0.86), rgba(19,17,9,0));
}
.rail .mark { display: flex; align-items: center; gap: 14px; }
.rail .mark img { width: 28px; height: 28px; opacity: 0.92; }
.rail .mark .wordmark { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bege); }
.rail .vol { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); }
.rail-nav { display: flex; align-items: center; gap: 4px; }
.rail-nav a { font-family: var(--voz-sagrada); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); padding: 8px 14px; display: inline-flex; align-items: center; min-height: 44px; border: 1px solid transparent; transition: color 0.3s, border-color 0.3s; white-space: nowrap; }
.rail-nav a:hover { color: var(--bege); }
.rail-nav a.here { color: var(--amarelo); border-color: var(--amarelo-40); }
/* CTA de seção · abre a página completa de um componente */
.codex-cta-wrap { text-align: center; margin-top: 40px; }
.codex-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amarelo); border: 1px solid var(--amarelo-40); padding: 15px 28px; min-height: 44px; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.codex-cta:hover { background: var(--amarelo); color: var(--preto); border-color: var(--amarelo); }
.rail-drop { position: relative; display: inline-flex; }
.rail-drop > a { gap: 5px; }
.rail-drop > a::after { content: "⌄"; font-size: 9px; line-height: 1; opacity: 0.55; transform: translateY(-1px); }
.rail-sub { position: absolute; top: calc(100% - 2px); right: 0; min-width: 252px; display: flex; flex-direction: column; padding: 6px; background: rgba(19,17,9,0.97); border: 1px solid var(--bronze-42); backdrop-filter: blur(6px); box-shadow: 0 24px 60px rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.3s, transform 0.3s, visibility 0.3s; z-index: 210; }
.rail-drop:not(:hover):not(:focus-within) .rail-sub { display: none; }
.rail-drop:hover .rail-sub, .rail-drop:focus-within .rail-sub { display: flex; opacity: 1; visibility: visible; transform: none; }
.rail-sub a { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); padding: 11px 14px; min-height: 44px; display: flex; align-items: center; white-space: nowrap; border: 1px solid transparent; transition: color 0.3s, background 0.3s, border-color 0.3s; }
.rail-sub a:hover { color: var(--bege); background: var(--preto-2); }
.rail-sub a.here { color: var(--amarelo); border-color: var(--amarelo-40); }
@media (max-width: 680px){
  .rail { padding: 14px 14px; gap: 12px; overflow: hidden; }
  .rail .mark { flex: 0 0 auto; }
  .rail-nav { flex: 1 1 auto; min-width: 0; max-width: calc(100vw - 84px); gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-nav a { padding: 6px 6px; font-size: 8.4px; letter-spacing: 0.08em; }
  .rail .mark .wordmark { display: none; }
  .rail-sub { position: fixed; top: 58px; right: 14px; min-width: 0; width: max-content; max-width: calc(100vw - 28px); }
}

/* ───────────────── REVEAL · STAGGER · IGNIÇÃO ───────────────── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s cubic-bezier(0.2,0,0,1), transform 1s cubic-bezier(0.2,0,0,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.2,0,0,1), transform 0.8s cubic-bezier(0.2,0,0,1); transition-delay: calc(var(--i,0) * 75ms); }
.stagger.in > * { opacity: 1; transform: translateY(0); }
/* tarot sobe com leve inclinação de forja */
.tarot-grid.stagger > * { transform: translateY(40px) rotate(-2deg); }
.tarot-grid.stagger.in > * { transform: translateY(0) rotate(0); }
/* swatches acendem subindo da bigorna */
.palette-grid.stagger > * { transform: translateY(26px) scale(0.94); transform-origin: bottom; }
.palette-grid.stagger.in > * { transform: translateY(0) scale(1); }
/* ignição de glifo sagrado */
.ignite { transition: filter 1.1s ease, opacity 1s ease; }
.reveal:not(.in) .ignite, .stagger:not(.in) .ignite { filter: brightness(0.4) saturate(0.4); opacity: 0.5; }
.reveal.in .ignite, .stagger.in .ignite { filter: brightness(1) drop-shadow(0 0 8px var(--amarelo-45)); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > *, .divider, .divider-ornate .line { transition: none !important; opacity: 1 !important; transform: none !important; }
  .ember-field, .forge-glow, .j-node.atual .marker { display: revert; animation: none !important; }
}

/* ───────────────── DIVISORES ───────────────── */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--bronze-42), transparent); margin: var(--divider-my) 0; transform: scaleX(0.2); opacity: 0; transition: transform 1.2s cubic-bezier(0.2,0,0,1), opacity 1.2s; }
.divider.in { transform: scaleX(1); opacity: 1; }
.divider-ornate { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 4px 0; margin: var(--divider-my) 0; }
.divider-ornate .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--bronze-42)); transform: scaleX(0.3); opacity: 0; transition: transform 1.2s cubic-bezier(0.2,0,0,1), opacity 1.1s; }
.divider-ornate.in .line { transform: scaleX(1); opacity: 1; }
.divider-ornate .line.r { background: linear-gradient(90deg, var(--bronze-42), transparent); }

/* ───────────────── ANDAIME DE SEÇÃO (compartilhado) ───────────────── */
/* padding-block (lógico) · compõe com o padding-inline dos contêineres,
   não colide. Gap consistente entre seções = 2× --sec-pad-y em toda página. */
section { padding-block: var(--sec-pad-y); position: relative; }
.sec-head { margin-bottom: var(--sec-head-mb); max-width: 720px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-label { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
.sec-label::before { content: ""; width: 44px; height: 1px; background: currentColor; }
.sec-label.dark { color: var(--vermelho-sinal); }
.sec-head.center .sec-label { justify-content: center; }
/* helpers de voz (usados em markup de fichas) */
.voz-monumental { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; }
.voz-sagrada { font-family: var(--voz-sagrada); letter-spacing: 0.04em; }
.wrap { max-width: var(--codex-max); margin: 0 auto; padding-inline: var(--codex-pad); position: relative; z-index: 2; }
.prosa { font-size: 18px; color: var(--fg2); max-width: 720px; text-wrap: pretty; }
.prosa p { margin-bottom: 18px; }
.prosa .destaque { color: var(--bege); font-style: italic; }
.sec-num { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.26em; color: var(--bronze); margin-bottom: 14px; }
.sec-title { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(32px, 4.8vw, 60px); color: var(--bege); margin-bottom: 22px; line-height: 0.98; }
.sec-intro { font-size: 19px; color: var(--fg2); text-wrap: pretty; }
.state-note { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze); margin: 0 0 22px; }

/* ═══════════════════════════════════════════════════════════
   CÓDEX DA FORJA · hero + seções narrativas
   ═══════════════════════════════════════════════════════════ */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; padding: 140px 32px 100px; overflow: hidden; }
.forge-glow { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); width: 760px; height: 760px; z-index: 0; filter: blur(54px); will-change: transform, filter; background: radial-gradient(circle, rgba(246,195,36,0.16) 0%, var(--brasa-08) 38%, transparent 70%); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%,100%{opacity:0.55;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.1);} }
.hero-sigil { position: relative; z-index: 1; margin-bottom: 40px; animation: emberFloat 6s ease-in-out infinite; }
@keyframes emberFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.hero-sigil .seal-ring { animation: spin 60s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero h1 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; font-size: clamp(48px, 9.4vw, 124px); color: var(--bege); position: relative; z-index: 1; margin-bottom: 30px; }
.hero h1 .brasa { color: var(--amarelo); text-shadow: 0 0 44px var(--amarelo-35); }
.hero-sub { font-family: var(--voz-sagrada); font-size: clamp(11px,1.5vw,14px); letter-spacing: 0.42em; text-transform: uppercase; color: var(--bronze); position: relative; z-index: 1; margin-bottom: 52px; }
.hero-quote { max-width: 660px; font-size: clamp(18px,2.2vw,24px); font-style: italic; color: rgba(232,220,196,0.82); position: relative; z-index: 1; padding: 30px 0; line-height: 1.55; }
.hero-quote::before, .hero-quote::after { content: ""; display: block; width: 120px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--bronze), transparent); }
.hero-quote::before { margin-bottom: 30px; } .hero-quote::after { margin-top: 30px; }
.scroll-hint { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); z-index: 1; animation: pulse 2.5s infinite; display: flex; flex-direction: column; align-items: center; gap: 10px; }
@keyframes pulse { 0%,100%{opacity:0.32;} 50%{opacity:1;} }

/* As Quatro Leis */
.leis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--linha-fraca); }
@media (max-width: 920px) { .leis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .leis { grid-template-columns: 1fr; } }
.lei { background: var(--preto-2); padding: 46px 30px; border-top: 2px solid var(--brasa); transition: background 0.45s cubic-bezier(0.2,0,0,1), border-color 0.45s cubic-bezier(0.2,0,0,1), transform 0.45s cubic-bezier(0.2,0,0,1); position: relative; }
.lei::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow 0.45s; }
.lei:hover { border-top-color: var(--amarelo); background: var(--preto-3); transform: translateY(-5px); }
.lei:hover::after { box-shadow: inset 0 0 60px var(--amarelo-05); }
.lei .lei-ico { margin-bottom: 26px; height: 44px; }
.lei .n { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.3em; color: var(--bronze); margin-bottom: 14px; }
.lei h4 { font-family: var(--voz-sagrada); font-size: 21px; color: var(--bege); margin-bottom: 14px; line-height: 1.15; }
.lei p { font-size: 15px; color: var(--fg3); line-height: 1.6; }

/* A Equação Sagrada */
.equacao-wrap { border: 1px solid var(--linha-bronze); position: relative; padding: 72px 40px; background: linear-gradient(180deg, var(--preto-2), var(--preto)); overflow: hidden; }
.equacao-wrap::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 540px; height: 540px; background: radial-gradient(circle, var(--amarelo-07), transparent 68%); filter: blur(30px); }
.eq-corner { position: absolute; width: 22px; height: 22px; border: 1px solid var(--amarelo); opacity: 0.5; }
.eq-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.eq-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.eq-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.eq-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.equacao { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; position: relative; z-index: 1; }
.eq-item { text-align: center; }
.eq-item svg { margin: 0 auto; }
.eq-item .eq-label { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); margin-top: 18px; }
.eq-op { font-family: var(--voz-sagrada); font-size: 52px; color: var(--bronze); font-weight: 300; }

/* A Paleta Forjada */
.pal-band { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.pal-band::after { content: ""; flex: 1; height: 1px; background: var(--linha-fraca); }
.palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
@media (max-width: 820px) { .palette-grid { grid-template-columns: repeat(2, 1fr); } }
.palette-grid.six { grid-template-columns: repeat(6, 1fr); margin-top: 38px; }
@media (max-width: 820px) { .palette-grid.six { grid-template-columns: repeat(3, 1fr); } }
.swatch { aspect-ratio: 3/4; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; overflow: hidden; transition: transform 0.4s cubic-bezier(0.2,0,0,1); }
.palette-grid.six .swatch { aspect-ratio: 3/3.4; }
.swatch:hover { transform: translateY(-8px); z-index: 2; box-shadow: 0 22px 54px rgba(0,0,0,0.55); }
.swatch .nome { font-family: var(--voz-sagrada); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; }
.swatch .hex { font-size: 12px; opacity: 0.72; margin-top: 3px; font-variant-numeric: tabular-nums; }
.swatch .sig { font-size: 12px; font-style: italic; opacity: 0.6; margin-top: 8px; line-height: 1.35; }

/* As Três Vozes */
.vozes { display: grid; gap: 3px; }
.voz-card { background: var(--preto-2); padding: 52px; border: 1px solid var(--linha-fraca); display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; transition: border-color 0.45s, background 0.45s; }
@media (max-width: 760px) { .voz-card { grid-template-columns: 1fr; gap: 24px; padding: 36px 26px; } }
.voz-card:hover { border-color: var(--amarelo); background: var(--preto-3); }
.voz-meta .tag { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 12px; }
.voz-meta .uso { font-size: 13px; font-style: italic; color: var(--bronze); line-height: 1.5; }
.exemplo-mon { font-family: var(--voz-monumental); text-transform: uppercase; font-size: clamp(28px,4vw,46px); line-height: 0.95; color: var(--bege); }
.exemplo-sag { font-family: var(--voz-sagrada); font-size: clamp(20px,2.6vw,29px); color: var(--bege); letter-spacing: 0.03em; line-height: 1.3; }
.exemplo-op { font-family: var(--voz-operacional); font-size: 20px; color: rgba(232,220,196,0.86); line-height: 1.55; }

.next-marker { text-align: center; padding: 90px 32px 120px; }
.next-marker .meta { color: var(--bronze); }
.next-marker .knot { display: flex; justify-content: center; margin-bottom: 26px; }
.next-marker .knot img { width: 46px; opacity: 0.6; }

/* As Três Camadas (tarot) */
.tarot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 860px) { .tarot-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }
.tarot { aspect-ratio: 3/4.5; background: linear-gradient(170deg, var(--preto-2) 0%, var(--preto) 100%); border: 1px solid rgba(139,111,71,0.35); position: relative; padding: 30px 26px; display: flex; flex-direction: column; transition: border-color 0.5s cubic-bezier(0.2,0,0,1), transform 0.5s cubic-bezier(0.2,0,0,1), box-shadow 0.5s cubic-bezier(0.2,0,0,1); }
.tarot::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--linha-fraca); pointer-events: none; }
.tarot:hover { border-color: var(--amarelo); transform: translateY(-12px) rotate(-1.2deg); box-shadow: 0 28px 70px rgba(0,0,0,0.65), 0 0 50px var(--amarelo-07); }
.tarot .roman { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.22em; color: var(--bronze); text-align: center; margin-bottom: 18px; }
.tarot .tarot-ico { display: flex; justify-content: center; margin: 8px 0 22px; }
.tarot .camada-tag { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; text-align: center; padding: 5px 0; margin-bottom: 18px; }
.tarot h3 { font-family: var(--voz-sagrada); font-size: 23px; text-align: center; color: var(--bege); margin-bottom: 0; line-height: 1.1; }
.tarot .desc { font-size: 14px; color: var(--fg3); text-align: center; font-style: italic; margin-top: auto; line-height: 1.5; }
.tarot .spectrum { display: flex; gap: 3px; margin: 20px 0; }
.tarot .spectrum span { flex: 1; height: 5px; }

/* O Eixo do Espectro (vitral) */
.eixo-vitral { max-width: 420px; margin: 0 auto; background: var(--preto-2); border: 2px solid var(--bronze); position: relative; overflow: hidden; }
.eixo-luz, .eixo-sombra { padding: 44px 32px; text-align: center; position: relative; }
.eixo-luz { background: linear-gradient(180deg, rgba(246,195,36,0.13) 0%, rgba(139,111,71,0.04) 100%); }
.eixo-sombra { background: linear-gradient(180deg, rgba(31,58,46,0.06) 0%, var(--brasa-14) 100%); }
.eixo-divisor { height: 2px; background: linear-gradient(90deg, transparent, var(--amarelo), var(--vermelho-sinal), transparent); position: relative; }
.eixo-divisor .sword { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--preto-2); padding: 0 14px; }
.eixo-vitral .label { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 16px; }
.eixo-luz .label { color: var(--amarelo); } .eixo-sombra .label { color: var(--vermelho-sinal); }
.eixo-vitral .eixo-ico { display: flex; justify-content: center; margin-bottom: 16px; }
.eixo-vitral h4 { font-family: var(--voz-sagrada); font-size: 26px; color: var(--bege); margin-bottom: 10px; }
.eixo-sombra h4 { color: rgba(230,57,70,0.85); }
.eixo-vitral .ref { font-size: 13px; font-style: italic; color: var(--bronze); }
.eixo-graus { display: flex; padding: 20px 32px; gap: 8px; background: var(--preto); justify-content: center; align-items: center; }
.eixo-graus .g { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--voz-sagrada); font-size: 11px; border: 1px solid var(--linha-bronze); }
.eixo-cap { text-align: center; margin-top: 28px; font-style: italic; color: var(--bronze); font-size: 14px; max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* O Bestiário (Códex · grid de 6) */
.bestiario-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: var(--linha-fraca); }
@media (max-width: 860px) { .bestiario-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .bestiario-grid { grid-template-columns: repeat(2, 1fr); } }
.bestiario-grid .besta { background: var(--preto-2); padding: 30px 22px; text-align: center; border: 1px solid transparent; transition: background 0.4s, border-color 0.4s, transform 0.4s; position: relative; }
.bestiario-grid .besta:hover { background: var(--preto-3); border-color: rgba(230,57,70,0.4); transform: translateY(-4px); }
.bestiario-grid .besta .besta-ico { display: flex; justify-content: center; margin-bottom: 18px; height: 64px; align-items: center; }
.bestiario-grid .besta .num { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; color: var(--brasa); margin-bottom: 8px; }
.bestiario-grid .besta h5 { font-family: var(--voz-sagrada); font-size: 16px; color: var(--bege); margin-bottom: 6px; }
.bestiario-grid .besta .boss { font-size: 11px; font-style: italic; color: var(--bronze); }
.besta-cap { text-align: center; margin-top: 34px; font-style: italic; color: var(--bronze); font-size: 14px; }

/* As Sete Dimensões */
.dims { display: grid; gap: 1px; background: var(--linha-fraca); }
.dim { background: var(--preto); padding: 32px; display: grid; grid-template-columns: 56px 1fr; gap: 30px; align-items: center; transition: background 0.4s; }
.dim:hover { background: var(--preto-2); }
.dim .num { font-family: var(--voz-sagrada); font-size: 36px; color: var(--bronze); font-weight: 700; }
.dim h4 { font-family: var(--voz-sagrada); font-size: 20px; color: var(--bege); margin-bottom: 6px; }
.dim .escala { font-size: 14px; color: var(--amarelo); font-style: italic; margin-bottom: 8px; }
.dim p { font-size: 15px; color: var(--fg3); }

/* A Matriz Espelhada */
.matriz { display: grid; grid-template-columns: 1fr 3px 1fr; max-width: 800px; margin: 0 auto; border: 1px solid var(--linha-bronze); }
.matriz-fogo { background: linear-gradient(180deg, var(--amarelo), var(--vermelho-sinal), var(--brasa)); }
.mcell { padding: 32px 28px; border-bottom: 1px solid var(--linha-fraca); transition: background 0.4s; }
.mcell:last-child { border-bottom: none; }
.mcell .grau { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; }
.mcell h5 { font-family: var(--voz-sagrada); font-size: 18px; margin-bottom: 5px; }
.mcell p { font-size: 13px; opacity: 0.6; font-style: italic; }
.lado-vilao { text-align: right; } .lado-vilao:hover { background: var(--brasa-08); }
.lado-vilao .grau { color: var(--vermelho-sinal); } .lado-vilao h5 { color: rgba(230,57,70,0.85); }
.lado-lendario:hover { background: var(--amarelo-05); }
.lado-lendario .grau { color: var(--amarelo); } .lado-lendario h5 { color: var(--amarelo); }

/* Seis Eras (roadmap timeline) */
.roadmap { position: relative; padding-left: 48px; max-width: 780px; }
.roadmap::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--amarelo), var(--brasa), transparent); }
.fase { position: relative; padding: 22px 0 34px 28px; }
.fase::before { content: ""; position: absolute; left: -44px; top: 26px; width: 16px; height: 16px; background: var(--preto); border: 2px solid var(--amarelo); border-radius: 50%; box-shadow: 0 0 14px var(--amarelo-40); }
.fase .t { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 8px; }
.fase h4 { font-family: var(--voz-sagrada); font-size: 21px; color: var(--bege); margin-bottom: 10px; }
.fase p { font-size: 15px; color: var(--fg3); }

/* ═══════════════════════════════════════════════════════════
   COMPONENTES FORJADOS · page-head + componentes vivos
   ═══════════════════════════════════════════════════════════ */
.page-head { padding: 180px 32px 70px; text-align: center; position: relative; }
.page-head .forge-glow { position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); width: 620px; height: 480px; background: radial-gradient(circle, var(--amarelo-12), rgba(139,0,0,0.05) 40%, transparent 70%); filter: blur(50px); z-index: 0; animation: none; }
.page-head .kick { position: relative; z-index: 1; font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 22px; }
.page-head h1 { position: relative; z-index: 1; font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(40px, 7vw, 86px); line-height: 0.92; color: var(--bege); margin-bottom: 24px; }
.page-head p { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; font-size: 19px; color: var(--fg2); }
.comp-index { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 880px; margin: 30px auto 0; position: relative; z-index: 1; }
.comp-index a { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); border: 1px solid var(--linha-fraca); padding: 8px 16px; display: inline-flex; align-items: center; min-height: 44px; transition: color 0.35s, border-color 0.35s, background 0.35s; }
.comp-index a:hover { color: var(--amarelo); border-color: var(--amarelo-45); transform: translateY(-2px); }

/* Card de Lendário */
.lend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 940px){ .lend-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .lend-grid{ grid-template-columns: 1fr; max-width: 380px; margin: 0 auto;} }
.lend { position: relative; background: linear-gradient(168deg, var(--preto-2) 0%, var(--preto) 100%); border: 1px solid rgba(139,111,71,0.32); padding: 32px 28px 28px; cursor: pointer; transition: border-color 0.5s cubic-bezier(0.2,0,0,1), transform 0.5s cubic-bezier(0.2,0,0,1), box-shadow 0.5s cubic-bezier(0.2,0,0,1); overflow: hidden; }
.lend::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(139,111,71,0.16); pointer-events: none; transition: border-color 0.5s; }
.lend:hover { transform: translateY(-8px); border-color: var(--amarelo-55); box-shadow: 0 26px 64px rgba(0,0,0,0.6), 0 0 46px rgba(246,195,36,0.06); }
.lend:hover::before { border-color: var(--amarelo-30); }
.lend.sel { border-color: var(--amarelo); box-shadow: 0 0 0 1px var(--amarelo), 0 26px 64px rgba(0,0,0,0.6), 0 0 60px var(--amarelo-12); }
.lend.sel::before { border-color: var(--amarelo-50); }
.lend .sel-mark { position: absolute; top: 14px; right: 14px; opacity: 0; transition: opacity 0.4s; }
.lend.sel .sel-mark { opacity: 1; }
.lend .crest { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); opacity: 0.5; }
.lend .portrait-wrap { display: flex; justify-content: center; margin: 34px 0 22px; }
.lend .portrait { position: relative; width: 92px; height: 92px; }
.lend .halo { position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(from 220deg, transparent, var(--amarelo-55), rgba(139,111,71,0.2), transparent 75%); filter: blur(2px); animation: haloSpin 14s linear infinite; }
@keyframes haloSpin { to { transform: rotate(360deg);} }
.lend .halo-ring { position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--amarelo-50); }
.lend .avatar { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2A2418, #131109); display: flex; align-items: center; justify-content: center; font-family: var(--voz-sagrada); font-size: 34px; color: var(--amarelo); border: 1px solid rgba(139,111,71,0.5); }
.lend .nome { font-family: var(--voz-sagrada); font-size: 21px; text-align: center; color: var(--bege); margin-bottom: 6px; letter-spacing: 0.03em; }
.lend .patamar { text-align: center; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); margin-bottom: 4px; }
.lend .nivel { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; }
.lend .nivel .pips { display: flex; gap: 3px; }
.lend .nivel .pip { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--bronze); }
.lend .nivel .pip.on { background: var(--amarelo); border-color: var(--amarelo); box-shadow: 0 0 6px var(--amarelo-60); }
.lend .nivel .lvl { font-family: var(--voz-sagrada); font-size: 11px; color: var(--amarelo); letter-spacing: 0.12em; }
.lend .radar { display: flex; justify-content: center; margin-bottom: 8px; }
.lend .radar-legend { display: flex; justify-content: space-around; font-size: 10px; font-family: var(--voz-sagrada); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); margin: 6px 0 20px; }
.lend .radar-legend b { display: block; font-size: 13px; color: var(--bege); font-weight: 600; }
.lend .eixos { border-top: 1px solid rgba(139,111,71,0.2); padding-top: 18px; }
.lend .eixo-row { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 9px; }
.lend .eixo-row:last-child { margin-bottom: 0; }
.lend .eixo-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lend .eixo-row .nm { color: var(--fg2); flex: 1; }
.lend .eixo-row .gr { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.lend .eixo-row.luz .dot { background: var(--amarelo); box-shadow: 0 0 6px var(--amarelo-60);}
.lend .eixo-row.sombra .dot { background: var(--vermelho-sinal); }

/* Card de Bestiário (Componentes · ficha grande) */
.best-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 940px){ .best-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .best-grid{ grid-template-columns: 1fr; max-width: 380px; margin: 0 auto;} }
.bestc { position: relative; background: radial-gradient(ellipse at 50% 0%, #1a0c0c 0%, var(--preto) 62%); border: 1px solid var(--brasa-40); padding: 30px 26px; transition: border-color 0.5s cubic-bezier(0.2,0,0,1), transform 0.5s cubic-bezier(0.2,0,0,1), box-shadow 0.5s cubic-bezier(0.2,0,0,1); overflow: hidden; }
.bestc::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, var(--brasa-16)); }
.bestc:hover { transform: translateY(-6px); border-color: rgba(230,57,70,0.7); box-shadow: 0 26px 60px rgba(0,0,0,0.7), 0 0 44px rgba(139,0,0,0.2); }
.bestc .num { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.26em; color: var(--vermelho-sinal); text-align: center; position: relative; z-index: 1; }
.bestc .sigilo { display: flex; justify-content: center; align-items: center; height: 132px; margin: 14px 0; position: relative; z-index: 1; }
.bestc .sigilo::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(139,0,0,0.22), transparent 70%); filter: blur(8px); }
.bestc h3 { font-family: var(--voz-sagrada); font-size: 24px; text-align: center; color: var(--bege); margin-bottom: 12px; position: relative; z-index: 1; }
.bestc .classe { text-align: center; position: relative; z-index: 1; margin-bottom: 16px; }
.bestc .classe span { display: inline-block; font-family: var(--voz-sagrada); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vermelho-sinal); border: 1px solid rgba(230,57,70,0.4); padding: 5px 12px; }
.bestc .fala { text-align: center; font-style: italic; font-size: 14px; color: var(--fg3); line-height: 1.55; position: relative; z-index: 1; border-top: 1px solid rgba(139,0,0,0.3); padding-top: 16px; }

/* Sistema de Graus / Raridade */
.graus-bar { display: flex; height: 14px; border: 1px solid var(--linha-bronze); margin-bottom: 8px; }
.graus-bar span { flex: 1; }
.graus-ticks { display: flex; margin-bottom: 40px; }
.graus-ticks div { flex: 1; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); text-align: center; }
.graus-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 860px){ .graus-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .graus-grid { grid-template-columns: 1fr; } }
.grau-frame { position: relative; aspect-ratio: 3/4; border: 1px solid; background: var(--preto-2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 16px; text-align: center; transition: transform 0.45s cubic-bezier(0.2,0,0,1), box-shadow 0.45s; overflow: hidden; }
.grau-frame:hover { transform: translateY(-8px); }
.grau-frame .roman { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.2em; margin-bottom: 18px; }
.grau-frame .token { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.grau-frame .rname { font-family: var(--voz-sagrada); font-size: 15px; line-height: 1.2; margin-bottom: 6px; }
.grau-frame .rdesc { font-size: 11.5px; font-style: italic; color: var(--fg3); }
.g1 { border-color: rgba(139,0,0,0.55); } .g1 .roman,.g1 .rname { color: #b5443f; }
.g2 { border-color: rgba(74,69,62,0.8); } .g2 .roman,.g2 .rname { color: #8d877c; }
.g3 { border-color: rgba(139,111,71,0.7); } .g3 .roman,.g3 .rname { color: var(--bronze-claro); }
.g4 { border-color: var(--amarelo-60); } .g4 .roman,.g4 .rname { color: var(--amarelo); }
.g4:hover { box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 0 30px var(--amarelo-12); }
.g5 { border-color: var(--amarelo); background: linear-gradient(180deg, var(--amarelo-08), var(--preto-2)); box-shadow: 0 0 40px var(--amarelo-10); }
.g5::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--amarelo-40); pointer-events: none; }
.g5 .roman,.g5 .rname { color: var(--amarelo); }
.g5:hover { box-shadow: 0 22px 54px rgba(0,0,0,0.55), 0 0 56px rgba(246,195,36,0.22); }
.g5 .rname { text-shadow: 0 0 18px var(--amarelo-40); }
.patamar-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
@media (max-width: 620px){ .patamar-row { grid-template-columns: 1fr; } }
.pcard { border: 1px solid var(--linha-fraca); background: var(--preto-2); padding: 22px 24px; display: flex; align-items: center; gap: 16px; transition: background 0.4s, border-color 0.4s; }
.pcard:hover { border-color: var(--linha-bronze); transform: translateY(-3px); }
.pcard .pg { flex: none; }
.pcard .pt { font-family: var(--voz-sagrada); font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amarelo); }
.pcard .ps { font-size: 12px; color: var(--bronze); font-style: italic; }
.pcard .plv { font-size: 11.5px; color: var(--fg3); margin-top: 4px; }

/* Família de Ícones */
.icon-toggle { display: inline-flex; border: 1px solid var(--linha-bronze); margin-bottom: 36px; }
.icon-toggle button { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); background: none; border: none; padding: 10px 22px; min-height: 44px; cursor: pointer; transition: color 0.3s, background 0.3s; }
.icon-toggle button.on { background: var(--amarelo-12); color: var(--amarelo); }
.icon-family { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: var(--linha-fraca); }
@media (max-width: 860px){ .icon-family { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 520px){ .icon-family { grid-template-columns: repeat(3,1fr); } }
.icon-cell { background: var(--preto-2); padding: 26px 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: background 0.4s; }
.icon-cell:hover { background: var(--preto-3); }
.icon-cell svg { transition: filter 0.4s; }
.icon-cell .ico, .icon-cell .ico * { stroke: var(--bronze); transition: stroke 0.4s; }
.icon-cell:hover .ico, .icon-cell:hover .ico *,
.aceso .icon-cell .ico, .aceso .icon-cell .ico * { stroke: var(--amarelo); }
.icon-cell:hover svg, .aceso .icon-cell svg { filter: drop-shadow(0 0 7px var(--amarelo-50)); }
.icon-cell .iname { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.08em; color: var(--fg3); text-align: center; }
.icon-group-label { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); margin: 28px 0 12px; display: flex; align-items: center; gap: 12px; }
.icon-group-label::after { content: ""; flex: 1; height: 1px; background: var(--linha-fraca); }

/* Roadmap da Jornada (trilha de níveis forjada) */
.journey { position: relative; }
.j-meter { height: 3px; background: var(--preto-3); margin: 0 14px 34px; position: relative; overflow: hidden; border-radius: 2px; }
.j-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(var(--fill-ratio, 0)); transform-origin: left center; background: linear-gradient(90deg, var(--brasa), var(--amarelo)); box-shadow: 0 0 12px var(--amarelo-55); transition: transform 1.1s cubic-bezier(0.2,0,0,1); }
.j-track { display: flex; gap: 0; overflow-x: auto; padding: 8px 4px 6px; }
.j-node { flex: 1; min-width: 124px; text-align: center; position: relative; padding-top: 56px; }
.j-node::before, .j-node::after { content: ""; position: absolute; top: 24px; height: 2px; }
.j-node::before { left: 0; right: 50%; background: var(--bronze); opacity: 0.32; }
.j-node::after { left: 50%; right: 0; background: var(--bronze); opacity: 0.32; }
.j-node:first-child::before, .j-node:last-child::after { display: none; }
.j-node .marker { position: absolute; top: 6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 34px; height: 34px; background: var(--preto); border: 2px solid var(--bronze); display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform 0.4s, border-color 0.4s, background 0.4s, box-shadow 0.4s; }
.j-node .marker > * { transform: rotate(-45deg); }
.j-node .lv { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); margin-bottom: 5px; }
.j-node .nm { font-family: var(--voz-sagrada); font-size: 13px; color: var(--fg2); line-height: 1.25; padding: 0 8px; margin-bottom: 6px; }
.j-node .st { font-size: 10px; font-style: italic; color: var(--fg3); }
/* concluído */
.j-node.done::before, .j-node.done::after, .j-node.atual::before { background: var(--amarelo); opacity: 1; box-shadow: 0 0 8px var(--amarelo-40); }
.j-node.done .marker { border-color: var(--amarelo); background: rgba(246,195,36,0.14); }
.j-node.done .nm { color: var(--bege); }
.j-node.done .st { color: var(--bronze); }
/* atual */
.j-node.atual .marker { border-color: var(--amarelo); transform: translateX(-50%) rotate(45deg) scale(1.22); background: radial-gradient(circle, rgba(246,195,36,0.28), var(--preto) 70%); box-shadow: 0 0 0 4px var(--amarelo-12), 0 0 26px var(--amarelo-45); animation: pulseRing 2.2s ease-in-out infinite; }
.j-node.atual .lv, .j-node.atual .nm, .j-node.atual .st { color: var(--amarelo); }
/* bloqueado */
.j-node.locked { opacity: 0.5; }
.j-node.locked .nm { color: var(--fg3); }
.j-node.locked::before, .j-node.locked::after { opacity: 0.22; }
@keyframes pulseRing { 0%,100%{ box-shadow: 0 0 0 4px var(--amarelo-10), 0 0 22px var(--amarelo-35); } 50%{ box-shadow: 0 0 0 8px var(--amarelo-05), 0 0 30px var(--amarelo-50); } }
.j-legend { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 28px; }
.j-legend span { display: flex; align-items: center; gap: 9px; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); }
.j-legend .d { width: 13px; height: 13px; transform: rotate(45deg); border: 2px solid var(--bronze); }
.j-legend .d.done { border-color: var(--amarelo); background: rgba(246,195,36,0.18); }
.j-legend .d.atual { border-color: var(--amarelo); box-shadow: 0 0 0 3px var(--amarelo-12), 0 0 10px var(--amarelo-40); }

/* ═══════════════════════════════════════════════════════════
   DICIONÁRIO CANÔNICO · shell (TOC + main) + componentes de índice
   ═══════════════════════════════════════════════════════════ */
.shell { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 260px 1fr; gap: 0; padding: 0 32px; }
.toc { position: sticky; top: 0; align-self: start; height: 100vh; padding: 96px 28px 40px 0; overflow-y: auto; border-right: 1px solid var(--linha-fraca); }
.toc::-webkit-scrollbar { width: 4px; } .toc::-webkit-scrollbar-thumb { background: var(--linha-bronze); }
.toc .toc-kick { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 20px; }
.toc a { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 7px 0 7px 14px; font-size: 13.5px; color: var(--fg3); transition: color 0.3s, background 0.3s; border-left: 1px solid transparent; margin-left: -16px; }
.toc a .ix { font-family: var(--voz-sagrada); font-size: 10px; color: var(--bronze); width: 20px; flex: none; }
.toc a:hover { color: var(--bege); }
.toc a.active { color: var(--amarelo); background: var(--amarelo-12); }
.toc a.active .ix { color: var(--amarelo); }
.main { min-width: 0; padding-left: 56px; }
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; padding: 0 24px; }
  .toc { display: none; }
  .main { padding-left: 0; }
}

.d-hero { padding: 150px 0 80px; position: relative; }
.d-hero .forge-glow { position: absolute; top: 55%; left: 30%; width: 560px; height: 420px; transform: translate(-50%,-50%); background: radial-gradient(circle, var(--amarelo-12), rgba(139,0,0,0.05) 42%, transparent 70%); filter: blur(50px); z-index: 0; animation: none; }
.d-hero .kick { position: relative; z-index: 1; font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
.d-hero .kick::before { content: ""; width: 44px; height: 1px; background: var(--amarelo); }
.d-hero h1 { position: relative; z-index: 1; font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(40px, 6.4vw, 92px); line-height: 0.9; color: var(--bege); margin-bottom: 26px; }
.d-hero h1 .am { color: var(--amarelo); }
.d-hero .lede { position: relative; z-index: 1; max-width: 620px; font-size: 19px; color: var(--fg2); font-style: italic; }
.d-hero .stamp { position: relative; z-index: 1; margin-top: 30px; font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); }

/* seções de índice densas · escala menor que as narrativas */
.sec { padding-block: var(--sec-pad-y-dense); scroll-margin-top: 40px; }
.sec .sec-head { margin-bottom: 40px; }
.sec .sec-title { font-size: clamp(26px, 3.6vw, 44px); line-height: 1; margin-bottom: 14px; }
.sec .sec-intro { font-size: 16px; max-width: 680px; }

.card-row { background: var(--preto-2); border: 1px solid var(--linha-fraca); padding: 22px 24px; transition: background 0.4s, border-color 0.4s, transform 0.4s; }
.card-row:hover { background: var(--preto-3); border-color: var(--linha-bronze); transform: translateY(-3px); }
.tag { font-family: var(--voz-sagrada); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 10px; border: 1px solid currentColor; display: inline-block; }
.pill-luz { color: var(--amarelo); } .pill-sombra { color: var(--vermelho-sinal); }

/* A Dicotomia */
.dicotomia { display: grid; grid-template-columns: 1fr 2px 1fr; border: 1px solid var(--linha-bronze); }
@media (max-width: 620px){ .dicotomia { grid-template-columns: 1fr; } .dico-fire { height: 2px; } }
.dico-cell { padding: 40px 34px; position: relative; }
.dico-luz { background: linear-gradient(180deg, var(--amarelo-08), transparent); }
.dico-sombra { background: linear-gradient(180deg, rgba(139,0,0,0.12), transparent); }
.dico-fire { background: var(--linha-de-fogo); }
.dico-cell .glyph { margin-bottom: 22px; }
.dico-cell .nome { font-family: var(--voz-sagrada); font-size: 30px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.dico-luz .nome { color: var(--amarelo); } .dico-sombra .nome { color: rgba(230,57,70,0.9); }
.dico-cell .def { font-size: 15.5px; color: var(--fg2); margin-bottom: 14px; }
.dico-cell .src { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
.dico-foot { grid-column: 1 / -1; border-top: 1px solid var(--linha-fraca); padding: 22px 34px; font-style: italic; color: var(--fg2); font-size: 14px; text-align: center; }

/* Símbolos */
.simbolos { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
@media (max-width:720px){ .simbolos{ grid-template-columns:1fr; } }
.simb { background: var(--preto-2); padding: 36px 28px; text-align: center; border: 1px solid var(--linha-fraca); transition: background 0.45s, border-color 0.45s, transform 0.45s; }
.simb:hover { background: var(--preto-3); border-color: var(--amarelo-40); transform: translateY(-6px); }
.simb .glyph { display: flex; justify-content: center; height: 76px; align-items: center; margin-bottom: 18px; }
.simb h4 { font-family: var(--voz-sagrada); font-size: 19px; color: var(--bege); margin-bottom: 8px; }
.simb p { font-size: 13.5px; color: var(--fg3); font-style: italic; }
.equacao-line { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; padding: 26px; border: 1px solid var(--linha-bronze); background: linear-gradient(180deg, var(--preto-2), var(--preto)); }
.equacao-line .eq-op { font-family: var(--voz-sagrada); font-size: 34px; color: var(--bronze); }
.equacao-line .eq-cell { text-align: center; }
.equacao-line .eq-cell .lb { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-top: 8px; }

/* grids genéricos */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width:760px){ .grid-2,.grid-3 { grid-template-columns:1fr; } }

/* Pilares */
.pilar { display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; }
.pilar .letter { font-family: var(--voz-monumental); font-size: 52px; color: var(--amarelo); line-height: 0.8; text-shadow: 0 0 24px rgba(246,195,36,0.25); }
.pilar h4 { font-family: var(--voz-sagrada); font-size: 18px; color: var(--bege); margin-bottom: 8px; }
.pilar .d { font-size: 14px; color: var(--fg2); margin-bottom: 10px; }
.pilar .anti { font-size: 12px; color: rgba(230,57,70,0.75); font-style: italic; }
.pilar .anti b { font-family: var(--voz-sagrada); font-style: normal; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vermelho-sinal); margin-right: 6px; }
.ciclos { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 16px; }
@media (max-width:620px){ .ciclos{ grid-template-columns:1fr; } }
.ciclo { padding: 20px 22px; background: var(--preto-2); border: 1px solid var(--linha-fraca); }
.ciclo .t { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; }
.ciclo.v .t { color: var(--amarelo); } .ciclo.x .t { color: var(--vermelho-sinal); }
.ciclo .flow { font-size: 14px; color: var(--fg2); }
.ciclo .flow span { color: var(--bronze); }

/* Atributos */
.attr { padding: 22px 22px; }
.attr h4 { font-family: var(--voz-sagrada); font-size: 17px; color: var(--bege); margin-bottom: 8px; display:flex; align-items:center; gap:10px; }
.attr h4 .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amarelo); box-shadow: 0 0 6px var(--amarelo-60); flex:none; }
.attr p { font-size: 13.5px; color: var(--fg2); margin-bottom: 8px; }
.attr .conn { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }

/* Classes */
.classes { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--linha-fraca); }
@media (max-width:860px){ .classes{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .classes{ grid-template-columns:1fr; } }
.classe { background: var(--preto-2); padding: 26px 22px; transition: background 0.4s, transform 0.4s; position: relative; }
.classe:hover { background: var(--preto-3); transform: translateY(-3px); }
.classe .n { font-family: var(--voz-sagrada); font-size: 26px; color: rgba(139,111,71,0.6); margin-bottom: 12px; }
.classe h4 { font-family: var(--voz-sagrada); font-size: 16px; color: var(--bege); margin-bottom: 8px; line-height: 1.2; }
.classe p { font-size: 13px; color: var(--fg3); }

/* Companion */
.companion { display: grid; grid-template-columns: 120px 1fr; gap: 30px; align-items: center; border: 1px solid var(--amarelo-30); background: linear-gradient(135deg, var(--preto-2), var(--preto)); padding: 36px 34px; }
@media (max-width:620px){ .companion{ grid-template-columns:1fr; text-align:center; } .companion .glyph{ margin:0 auto; } }
.companion h4 { font-family: var(--voz-sagrada); font-size: 24px; color: var(--amarelo); margin-bottom: 10px; }
.companion p { font-size: 15px; color: var(--fg2); }

/* Bestiário chips (Dicionário · grid de 3) */
.bestiario { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: rgba(139,0,0,0.18); }
@media (max-width:780px){ .bestiario{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .bestiario{ grid-template-columns:1fr; } }
.bestiario .besta { background: radial-gradient(ellipse at 50% 0%, #1a0c0c, var(--preto) 70%); padding: 22px 20px; transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s; position: relative; border: 1px solid transparent; text-align: left; }
.bestiario .besta:hover { border-color: rgba(230,57,70,0.5); transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.5); }
.bestiario .besta .num { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; color: var(--vermelho-sinal); margin-bottom: 8px; }
.bestiario .besta h5 { font-family: var(--voz-sagrada); font-size: 16px; color: var(--bege); margin-bottom: 6px; }
.bestiario .besta .padrao { font-size: 12.5px; color: var(--fg3); font-style: italic; margin-bottom: 10px; }
.bestiario .besta .boss { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amarelo); border: 1px solid var(--amarelo-40); padding: 3px 8px; display: inline-block; }
.note-add { margin-top: 16px; font-size: 13px; font-style: italic; color: var(--bronze); }

/* Skills */
.skill { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.skill .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.skill h5 { font-family: var(--voz-sagrada); font-size: 16px; color: var(--bege); }
.skill .tipo { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.skill p { font-size: 13px; color: var(--fg3); }
.skill.mestra { border-color: var(--amarelo-40); } .skill.mestra h5 { color: var(--amarelo); }

/* Fases */
.fases { display: grid; gap: 2px; }
.fase-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 22px; align-items: center; background: var(--preto-2); padding: 22px 24px; border: 1px solid var(--linha-fraca); transition: background 0.4s, border-color 0.4s; }
.fase-row:hover { background: var(--preto-3); border-color: var(--amarelo); }
.fase-row .ph { font-family: var(--voz-sagrada); font-size: 30px; color: var(--bronze); }
.fase-row h4 { font-family: var(--voz-sagrada); font-size: 18px; color: var(--bege); }
.fase-row .boss { text-align: right; font-size: 12px; color: var(--vermelho-sinal); font-style: italic; }
.fase-row .boss b { display: block; font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); font-style: normal; margin-bottom: 3px; }

/* RPG ladder */
.ladder { position: relative; padding-left: 40px; }
.ladder::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--brasa), var(--bronze), var(--amarelo)); }
.rung { position: relative; padding: 14px 0 14px 24px; }
.rung::before { content: ""; position: absolute; left: -36px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--preto); border: 2px solid var(--bronze); }
.rung:last-child::before { border-color: var(--amarelo); box-shadow: 0 0 12px var(--amarelo-50); }
.rung .lv { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
.rung h5 { font-family: var(--voz-sagrada); font-size: 18px; color: var(--bege); margin-top: 4px; }

/* Patamares Circle */
.patamares { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width:820px){ .patamares{ grid-template-columns:1fr; } }
.patamar { border: 1px solid var(--linha-bronze); background: var(--preto-2); }
.patamar .ph-head { padding: 20px 22px; border-bottom: 1px solid var(--linha-fraca); display: flex; align-items: center; gap: 12px; }
.patamar .ph-head .glyph { flex: none; }
.patamar .ph-head .ph-t { font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amarelo); }
.patamar .ph-head .ph-s { font-size: 11px; color: var(--bronze); font-style: italic; }
.lvl-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 22px; border-bottom: 1px solid var(--linha-fraca); font-size: 14px; }
.lvl-row:last-child { border-bottom: none; }
.lvl-row .nm { color: var(--fg1); } .lvl-row .nm .ln { font-family: var(--voz-sagrada); font-size: 10px; color: var(--bronze); margin-right: 8px; }
.lvl-row .pts { font-family: var(--voz-sagrada); font-size: 13px; color: var(--amarelo); font-variant-numeric: tabular-nums; }

/* Linhas de lista (arquétipos / zonas / corruptores) */
.listrows { display: grid; gap: 2px; }
.lrow { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; background: var(--preto-2); padding: 18px 24px; border: 1px solid var(--linha-fraca); transition: background 0.4s, border-color 0.4s; }
.lrow:hover { background: var(--preto-3); border-color: var(--linha-bronze); }
.lrow .lead { font-family: var(--voz-sagrada); font-size: 16px; color: var(--bege); }
.lrow .mid { font-size: 13.5px; color: var(--fg2); }
.lrow .end { font-family: var(--voz-sagrada); font-size: 13px; color: var(--amarelo); text-align: right; }
.lrow .end.sombra { color: var(--vermelho-sinal); }
.lrow .pct { font-family: var(--voz-sagrada); font-size: 20px; color: var(--bronze); min-width: 56px; }
.zona { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.zona .apel { font-family: var(--voz-sagrada); font-style: italic; }

/* Conceitos */
.conceitos { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; background: var(--linha-fraca); }
@media (max-width:760px){ .conceitos{ grid-template-columns:1fr; } }
.conc { background: var(--preto-2); padding: 18px 22px; transition: background 0.35s; }
.conc:hover { background: var(--preto-3); }
.conc dt { font-family: var(--voz-sagrada); font-size: 15px; color: var(--bege); margin-bottom: 5px; }
.conc dt .home { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); margin-left: 8px; }
.conc dd { font-size: 13px; color: var(--fg3); }

/* Termos */
.termos { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--linha-fraca); }
@media (max-width:760px){ .termos{ grid-template-columns:1fr; } }
.termo { background: var(--preto-2); padding: 14px 20px; display: flex; gap: 14px; align-items: baseline; font-size: 13.5px; }
.termo .tn { font-family: var(--voz-sagrada); color: var(--bege); flex: none; min-width: 0; }
.termo .td { color: var(--fg3); }
.termo.canon .tn { color: var(--amarelo); }

/* Frases */
.frases { display: grid; gap: 14px; }
.frase { border: 1px solid var(--linha-fraca); background: var(--preto-2); padding: 18px 22px; transition: border-color 0.4s, background 0.4s; }
.frase:hover { border-color: var(--amarelo); background: var(--preto-3); }
.frase q { font-family: var(--voz-sagrada); font-size: clamp(17px,2vw,22px); color: var(--bege); font-style: italic; quotes: "\201C" "\201D"; line-height: 1.4; }
.frase .from { display: block; margin-top: 8px; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); }

/* Alertas / colisões */
.alert { border: 1px solid rgba(230,57,70,0.45); background: linear-gradient(180deg, rgba(139,0,0,0.1), transparent); padding: 22px 26px; margin-bottom: 16px; position: relative; }
.alert .ah { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.alert .ah .at { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vermelho-sinal); }
.alert ul { list-style: none; display: grid; gap: 7px; }
.alert li { font-size: 13.5px; color: var(--fg2); padding-left: 18px; position: relative; }
.alert li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--vermelho-sinal); transform: rotate(45deg); }
.col-table { display: grid; gap: 2px; background: var(--linha-fraca); margin-bottom: 24px; }
.col-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 18px; align-items: center; background: var(--preto-2); padding: 14px 22px; }
.col-row .ct { font-family: var(--voz-sagrada); font-size: 15px; color: var(--bege); }
.col-row .cw { font-size: 13px; color: var(--fg3); }
.sev { font-family: var(--voz-sagrada); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.sev .sd { width: 9px; height: 9px; border-radius: 50%; }
.sev.media { color: var(--amarelo); } .sev.media .sd { background: var(--amarelo); }
.sev.alta { color: var(--vermelho-sinal); } .sev.alta .sd { background: var(--vermelho-sinal); }
.sev.muito { color: #fff; } .sev.muito .sd { background: var(--brasa); box-shadow: 0 0 8px var(--vermelho-sinal); }
.ok-note { border-color: var(--amarelo-45); background: linear-gradient(180deg, var(--amarelo-08), transparent); }
.ok-note .at { color: var(--amarelo); }
.ok-note li::before { background: var(--amarelo); }
.lacunas { counter-reset: lac; display: grid; gap: 12px; margin-top: 18px; }
.lacuna { display: grid; grid-template-columns: 40px 1fr; gap: 16px; background: var(--preto-2); border: 1px solid var(--linha-fraca); padding: 18px 22px; }
.lacuna::before { counter-increment: lac; content: counter(lac); font-family: var(--voz-sagrada); font-size: 24px; color: var(--bronze); }
.lacuna p { font-size: 14px; color: var(--fg2); }

/* ───────────────── FOOTER (compartilhado) ───────────────── */
footer { text-align: center; padding: 112px 32px 86px; border-top: 1px solid rgba(139,111,71,0.3); }
footer .footer-sigil { display: flex; justify-content: center; margin-bottom: 32px; }
footer .footer-sigil img { width: 56px; opacity: 0.7; }
footer > img { width: 48px; opacity: 0.65; margin-bottom: 24px; }
footer .frase { font-family: var(--voz-sagrada); font-size: clamp(17px,2.4vw,24px); color: var(--bege); max-width: 640px; margin: 0 auto 28px; line-height: 1.55; }
footer .frase-f { font-family: var(--voz-sagrada); font-size: clamp(16px,2.2vw,22px); color: var(--bege); max-width: 600px; margin: 0 auto 22px; line-height: 1.5; }
footer .meta-line { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); }

/* ═══════════════════════════════════════════════════════════
   FICHA DE BESTIÁRIO · página-detalhe de uma impureza (namespace bd-)
   Template para qualquer dos 27 monstros. Sombra: vermelho/brasa.
   ═══════════════════════════════════════════════════════════ */
.bd-hero { min-height: 94vh; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 96px 0 60px; overflow: hidden; }
.bd-glow { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); width: 720px; height: 720px; background: radial-gradient(circle, rgba(139,0,0,0.30) 0%, var(--brasa-08) 38%, transparent 68%); filter: blur(42px); z-index: 0; will-change: transform, filter; animation: breathePit 6s ease-in-out infinite; }
@keyframes breathePit { 0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.07);} }
.bd-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items: center; }
@media(max-width:860px){ .bd-hero-inner{ grid-template-columns: 1fr; text-align: center; } }
.bd-num { font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.2em; color: var(--bronze); margin-bottom: 14px; }
.bd-classif { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--vermelho-sinal); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
@media(max-width:860px){ .bd-classif{ justify-content: center; } }
.bd-classif::before { content: ""; width: 34px; height: 1px; background: var(--vermelho-sinal); }
.bd-hero h1 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.88; font-size: clamp(48px, 8vw, 104px); color: var(--bege); margin-bottom: 24px; }
.bd-hero h1 .a { color: var(--vermelho-sinal); }
.bd-epiteto { font-family: var(--voz-sagrada); font-size: clamp(14px,2vw,19px); font-style: italic; color: var(--bronze-claro); letter-spacing: 0.06em; margin-bottom: 32px; }
.bd-fala-tipica { border-top: 2px solid var(--brasa); padding: 20px 0 0; font-size: clamp(18px,2.4vw,24px); font-style: italic; color: rgba(232,220,196,0.82); max-width: 470px; line-height: 1.45; }
@media(max-width:860px){ .bd-fala-tipica{ margin: 0 auto; } }
.bd-art { display: flex; justify-content: center; align-items: center; position: relative; }
.bd-frame { width: min(78vw, 430px); aspect-ratio: 3/4; border: 1px solid rgba(139,0,0,0.45); background: linear-gradient(170deg, rgba(26,22,14,0.92), rgba(18,15,8,0.96)); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bd-frame::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(139,0,0,0.28); pointer-events: none; }
.bd-frame .bd-tag { position: absolute; top: 18px; right: 20px; font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.2em; color: var(--vermelho-sinal); }
.bd-frame .bd-pit { position: absolute; bottom: -40%; left: 50%; transform: translateX(-50%); width: 130%; height: 80%; background: radial-gradient(ellipse at center, rgba(139,0,0,0.35), transparent 70%); filter: blur(20px); }
.bd-cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); z-index: 4; text-shadow: 0 2px 10px rgba(8,6,2,0.9); }

/* Placa ilustrada · arte canônica de bestiário dentro da bd-frame.
   A ilustração entra em fundo pergaminho; a vinheta a assenta na forja
   e o pit em brasa sobe do núcleo. */
.bd-frame.has-plate { background: #0c0a05; }
.bd-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; z-index: 0; }
/* vinheta + tom quente: puxa os cinzas neutros para bronze/preto-forja */
.bd-frame.has-plate::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 78% 64% at 50% 36%, transparent 42%, rgba(12,10,5,0.78) 100%),
    linear-gradient(to bottom, rgba(12,10,5,0.34) 0%, transparent 22%, transparent 58%, rgba(12,10,5,0.9) 100%),
    linear-gradient(160deg, rgba(60,40,18,0.20), rgba(139,0,0,0.10));
  mix-blend-mode: multiply;
}
.bd-frame.has-plate .bd-pit { z-index: 2; opacity: 0.9; }
.bd-frame.has-plate .bd-tag { z-index: 4; text-shadow: 0 2px 10px rgba(8,6,2,0.9); }
.bd-frame.has-plate:hover .bd-plate { transform: scale(1.03); }
.bd-plate { transition: transform 1.2s cubic-bezier(0.2,0,0,1); }
.bd-scroll { text-align: center; margin-top: 54px; position: relative; z-index: 2; font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); animation: pulse 2.5s infinite; }

/* Como reconhecer · sintomas */
.reconhecer { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 2px; background: var(--brasa-14); }
.sintoma { background: var(--preto-2); padding: 26px 28px; display: flex; gap: 16px; align-items: flex-start; transition: background 0.4s; }
.sintoma:hover { background: var(--preto-3); }
.sintoma .mark { flex-shrink: 0; margin-top: 3px; }
.sintoma p { font-size: 15px; color: var(--fg2); }

/* Espelho Falso · pirita (falso ouro) */
.espelho { background: linear-gradient(135deg, rgba(31,58,46,0.32), rgba(18,15,8,0.6)); border: 1px solid rgba(31,58,46,0.6); padding: 50px; position: relative; overflow: hidden; }
@media(max-width:600px){ .espelho{ padding: 34px 26px; } }
.espelho::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #2E5C47, transparent); }
.espelho .falso-label { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #5a9a7a; margin-bottom: 18px; }
.espelho h3 { font-family: var(--voz-sagrada); font-size: 24px; color: var(--bege); margin-bottom: 20px; }
.vendido { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.vendido span { font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.05em; color: #7ab59a; border: 1px solid rgba(46,92,71,0.5); padding: 6px 14px; }
.falas { display: grid; gap: 14px; }
.fala { font-style: italic; font-size: 16px; color: var(--fg2); padding-left: 20px; border-left: 1px solid rgba(46,92,71,0.5); }
.verdade { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--linha-fraca); font-size: 17px; color: var(--bege); font-style: italic; }
.verdade strong { color: var(--amarelo); font-style: normal; font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 8px; }

/* Transmutação · 5 graus do eixo */
.graus-track { display: grid; grid-template-columns: repeat(5,1fr); gap: 2px; margin-top: 30px; }
@media(max-width:860px){ .graus-track{ grid-template-columns: 1fr; } }
.grau-card { background: var(--preto-2); padding: 30px 22px; position: relative; border-top: 3px solid; transition: background 0.4s, border-color 0.4s, transform 0.4s; }
.grau-card:hover { background: var(--preto-3); transform: translateY(-6px); }
.grau-card .g-num { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 14px; }
.grau-card .g-ico { margin-bottom: 16px; height: 48px; display: flex; align-items: center; }
.grau-card h4 { font-family: var(--voz-sagrada); font-size: 18px; color: var(--bege); margin-bottom: 10px; }
.grau-card p { font-size: 14px; color: var(--fg3); }
.grau-card.bd-g0 { border-top-color: var(--vermelho-sinal); } .grau-card.bd-g0 .g-num { color: var(--vermelho-sinal); }
.grau-card.bd-g1 { border-top-color: #c9774e; } .grau-card.bd-g1 .g-num { color: var(--bronze); }
.grau-card.bd-g2 { border-top-color: var(--bronze); } .grau-card.bd-g2 .g-num { color: var(--bronze); }
.grau-card.bd-g3 { border-top-color: var(--bronze-claro); } .grau-card.bd-g3 .g-num { color: var(--bronze); }
.grau-card.bd-g4 { border-top-color: var(--amarelo); background: linear-gradient(180deg, rgba(246,195,36,0.06), var(--preto-2)); } .grau-card.bd-g4 .g-num { color: var(--amarelo); }
.grau-card.bd-g4 h4 { color: var(--amarelo); }

/* Como caçar */
.cacar { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media(max-width:860px){ .cacar{ grid-template-columns: 1fr; } }
.arma { background: var(--preto-2); border: 1px solid var(--linha-bronze); padding: 28px; margin-bottom: 2px; transition: background 0.4s, border-color 0.4s; }
.arma:hover { background: var(--preto-3); border-color: var(--amarelo); }
.arma .a-tag { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 10px; }
.arma h4 { font-family: var(--voz-sagrada); font-size: 18px; color: var(--bege); margin-bottom: 8px; }
.arma p { font-size: 15px; color: var(--fg2); }
.pergunta-decap { background: linear-gradient(135deg, var(--amarelo-10), rgba(18,15,8,0.4)); border: 1px solid var(--amarelo-40); padding: 40px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.pergunta-decap .pd-label { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 18px; }
.pergunta-decap .pd-q { font-family: var(--voz-sagrada); font-size: clamp(18px,2.6vw,26px); color: var(--bege); line-height: 1.4; font-style: italic; }

/* Conexões */
.conexoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 2px; }
.conx { background: var(--preto-2); padding: 24px; transition: background 0.4s; }
.conx:hover { background: var(--preto-3); }
.conx .cx-tag { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; }
.conx .cx-val { font-family: var(--voz-sagrada); font-size: 16px; color: var(--bege); }
.conx .cx-sub { font-size: 13px; color: var(--fg3); font-style: italic; margin-top: 4px; }

/* A queda */
.queda { background: linear-gradient(135deg, var(--brasa-16), rgba(18,15,8,0.5)); border: 1px solid var(--brasa-40); padding: 50px; text-align: center; }
@media(max-width:600px){ .queda{ padding: 34px 26px; } }
.queda .q-label { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--vermelho-sinal); margin-bottom: 18px; }
.queda p { font-size: 18px; color: rgba(232,220,196,0.8); max-width: 680px; margin: 0 auto; }
.queda .caixa { font-family: var(--voz-sagrada); color: var(--vermelho-sinal); font-style: normal; }

/* Stat bar · ficha rápida de identidade */
.statbar { margin-top: 46px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 2px; background: var(--linha-fraca); position: relative; z-index: 2; }
.stat { background: var(--preto-2); padding: 20px 22px; }
.stat .s-lbl { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); margin-bottom: 7px; }
.stat .s-val { font-family: var(--voz-sagrada); font-size: 15px; color: var(--bege); }
.stat .s-val.v { color: var(--vermelho-sinal); }
.stat .s-val.a { color: var(--amarelo); }

/* Quote block · pull-quote atmosférico */
.quote-block { text-align: center; padding-block: 30px; }
.quote-block .qb-mark { font-family: var(--voz-sagrada); font-size: 60px; color: var(--brasa); line-height: 0.5; margin-bottom: 20px; }
.quote-block .qb-txt { font-family: var(--voz-sagrada); font-size: clamp(20px,3vw,30px); color: var(--bege); max-width: 760px; margin: 0 auto; line-height: 1.4; font-style: italic; }
.quote-block .qb-aut { font-size: 14px; color: var(--bronze); margin-top: 20px; letter-spacing: 0.1em; }

/* Dossiê de Origem (eneagrama) */
.dossie { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 2px; background: var(--linha-fraca); }
.doss-card { background: var(--preto-2); padding: 28px 26px; transition: background 0.4s; }
.doss-card:hover { background: var(--preto-3); }
.doss-card .dc-ico { margin-bottom: 16px; height: 42px; display: flex; align-items: center; }
.doss-card .dc-lbl { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 8px; }
.doss-card .dc-val { font-family: var(--voz-sagrada); font-size: 19px; color: var(--bege); margin-bottom: 6px; }
.doss-card .dc-sub { font-size: 14px; color: var(--fg3); font-style: italic; }

/* Onde ataca · 3 camadas */
.camadas { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--linha-fraca); }
@media(max-width:760px){ .camadas{ grid-template-columns: 1fr; } }
.cam { background: var(--preto-2); padding: 30px 26px; transition: background 0.4s; }
.cam:hover { background: var(--preto-3); }
.cam .c-ico { margin-bottom: 16px; height: 44px; display: flex; align-items: center; }
.cam .c-tag { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); margin-bottom: 12px; }
.cam h4 { font-family: var(--voz-sagrada); font-size: 18px; color: var(--bege); margin-bottom: 8px; }
.cam p { font-size: 14px; color: var(--fg3); }

/* Diagnóstico interativo */
.diag { background: linear-gradient(135deg, var(--brasa-14), rgba(18,15,8,0.5)); border: 1px solid var(--brasa-40); padding: 46px; }
@media(max-width:600px){ .diag{ padding: 32px 24px; } }
.diag h3 { font-family: var(--voz-sagrada); font-size: 24px; color: var(--bege); margin-bottom: 10px; text-align: center; }
.diag .d-sub { text-align: center; font-style: italic; color: var(--bronze-claro); margin-bottom: 32px; font-size: 15px; }
.diag-q { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(139,111,71,0.15); cursor: pointer; transition: color 0.3s, opacity 0.3s; }
.diag-q:hover { padding-left: 8px; }
.diag-q .box { flex-shrink: 0; width: 22px; height: 22px; border: 1.5px solid var(--bronze); display: flex; align-items: center; justify-content: center; margin-top: 2px; transition: background 0.3s, border-color 0.3s; }
.diag-q.checked .box { background: var(--vermelho-sinal); border-color: var(--vermelho-sinal); }
.diag-q .box svg { opacity: 0; transition: opacity 0.3s; }
.diag-q.checked .box svg { opacity: 1; }
.diag-q p { font-size: 16px; color: rgba(232,220,196,0.8); }
.diag-result { margin-top: 30px; padding: 28px; background: rgba(18,15,8,0.6); border: 1px solid var(--amarelo-30); text-align: center; opacity: 0.5; transition: opacity 0.4s, background 0.4s, border-color 0.4s; }
.diag-result .dr-heads { font-family: var(--voz-monumental); font-size: 48px; color: var(--vermelho-sinal); line-height: 1; margin-bottom: 10px; }
.diag-result .dr-txt { font-family: var(--voz-sagrada); font-size: 16px; color: var(--bege); }
.diag-result .dr-sub { font-size: 14px; color: var(--fg3); font-style: italic; margin-top: 8px; }

/* A Ninhada · monstros aliados */
.ninhada { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 2px; }
.filhote { background: var(--preto-2); padding: 26px 18px; text-align: center; transition: background 0.4s, border-color 0.4s; border: 1px solid transparent; }
.filhote:hover { background: var(--preto-3); border-color: rgba(230,57,70,0.3); transform: translateY(-3px); }
.filhote .f-ico { width: 92px; aspect-ratio: 1; margin: 0 auto 16px; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 38%, #1d160c, #0b0905); border: 1px solid rgba(139,0,0,0.45); box-shadow: inset 0 0 26px rgba(0,0,0,0.72); }
.filhote .f-ico svg { width: 52px; height: 52px; }
.filhote .f-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 32%, transparent 52%, rgba(11,9,5,0.78)); mix-blend-mode: multiply; pointer-events: none; }
.filhote .f-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: saturate(0.9) contrast(1.04); transition: transform 1s cubic-bezier(0.2,0,0,1); }
.filhote:hover .f-ico { border-color: rgba(230,57,70,0.6); }
.filhote:hover .f-portrait { transform: scale(1.06); }
.filhote .f-num { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.18em; color: var(--brasa); margin-bottom: 6px; }
.filhote h5 { font-family: var(--voz-sagrada); font-size: 14px; color: var(--bege); margin-bottom: 5px; }
.filhote .f-rel { font-size: 12px; color: var(--fg3); font-style: italic; }

/* Drenagem de atributos · barras de vazamento (sombra)
   A impureza não causa dano direto; drena atributo até o tanque esvaziar. */
.dreno { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px,1fr)); gap: 2px; background: var(--brasa-14); }
.dreno-card { background: var(--preto-2); padding: 28px 28px 26px; transition: background 0.4s; }
.dreno-card:hover { background: var(--preto-3); }
.dreno-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 14px; }
.dreno-head .dk { font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-claro); }
.dreno-head .dv { font-family: var(--voz-monumental); font-size: 30px; line-height: 1; color: var(--vermelho-sinal); }
.dreno-head .dv::before { content: "−"; opacity: 0.6; margin-right: 1px; }
.dreno-bar { height: 7px; background: rgba(139,111,71,0.16); position: relative; overflow: hidden; margin-bottom: 16px; }
.dreno-bar > i { display: block; height: 100%; width: var(--fill, 60%); transform: scaleX(0); transform-origin: left center; background: repeating-linear-gradient(-45deg, var(--vermelho-sinal) 0 7px, var(--brasa) 7px 12px); transition: transform 1.1s cubic-bezier(0.2,0,0,1); }
.stagger.in .dreno-bar > i, .reveal.in .dreno-bar > i { transform: scaleX(1); }
.dreno-card p { font-size: 14px; color: var(--fg2); line-height: 1.6; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   A MATRIZ ESPELHADA · grade interativa 3×2 + régua do espectro
   (namespace mtz- · a .caixa é a célula clicável)
   ═══════════════════════════════════════════════════════════ */
.mtz-doutrina { max-width: 760px; margin: 0 auto; text-align: center; }
.mtz-doutrina .big { font-family: var(--voz-sagrada); font-size: clamp(19px,2.6vw,26px); color: var(--bege); font-style: italic; line-height: 1.45; }
.mtz-vars { display: flex; justify-content: center; gap: 48px; margin-top: 32px; flex-wrap: wrap; }
.mtz-var .vl { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 6px; }
.mtz-var .vs { font-size: 14px; color: var(--fg2); font-style: italic; }

.mtz-axis-x, .mtz-grid { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 8px; max-width: 880px; margin: 0 auto; }
.mtz-axis-x { margin-bottom: 8px; }
.mtz-axx { text-align: center; font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px; }
.mtz-axx.v { color: var(--vermelho-sinal); }
.mtz-axx.l { color: var(--amarelo); }
.mtz-axx.corner { color: var(--bronze); font-size: 9px; display: flex; align-items: center; justify-content: center; }
.mtz-grid { position: relative; }
.mtz-axy { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); padding: 10px 4px; gap: 4px; }
.mtz-axy .gn { font-size: 18px; color: var(--bronze-claro); }
.mtz-axy .gs { font-size: 9px; color: var(--fg3); font-style: italic; text-transform: none; letter-spacing: 0; }

.caixa { aspect-ratio: 1.6/1; padding: 22px 20px; cursor: pointer; position: relative; transition: transform 0.45s cubic-bezier(0.2,0,0,1), border-color 0.45s, box-shadow 0.45s; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid; }
.caixa:hover { transform: translateY(-5px) scale(1.015); z-index: 5; }
.caixa.v { background: linear-gradient(160deg, rgba(139,0,0,0.13), rgba(19,17,9,0.7)); border-color: var(--brasa-40); }
.caixa.v:hover, .caixa.v.active { border-color: var(--vermelho-sinal); box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 30px rgba(230,57,70,0.1); }
.caixa.l { background: linear-gradient(160deg, var(--amarelo-08), rgba(19,17,9,0.7)); border-color: rgba(139,111,71,0.4); }
.caixa.l:hover, .caixa.l.active { border-color: var(--amarelo); box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 30px var(--amarelo-10); }
.caixa.active { transform: translateY(-5px) scale(1.02); z-index: 6; }
.caixa .c-ico { margin-bottom: 10px; }
.caixa .cg { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; }
.caixa.v .cg { color: rgba(230,57,70,0.72); } .caixa.l .cg { color: rgba(246,195,36,0.72); }
.caixa h3 { font-family: var(--voz-sagrada); font-size: clamp(15px,1.8vw,19px); line-height: 1.1; margin-bottom: 8px; }
.caixa.v h3 { color: rgba(230,57,70,0.94); } .caixa.l h3 { color: var(--bege); }
.caixa .cl { font-size: 13px; font-style: italic; color: var(--fg2); }
.caixa .ct { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bronze); opacity: 0; transition: opacity 0.4s; margin-top: 8px; }
.caixa:hover .ct { opacity: 1; }
.mtz-fire { position: absolute; top: 0; bottom: 0; left: calc(120px + ((100% - 120px) / 2) + 4px); width: 3px; background: linear-gradient(180deg, var(--amarelo), var(--vermelho-sinal), var(--brasa)); transform: translateX(-50%); z-index: 1; opacity: 0.55; box-shadow: 0 0 16px var(--amarelo-50); }

/* popup compartilhado · matriz + régua puxam para cá */
.mtz-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; }
.mtz-modal.open { opacity: 1; visibility: visible; }
.mtz-modal-backdrop { position: absolute; inset: 0; background: rgba(8,6,2,0.8); backdrop-filter: blur(4px); }
.mtz-dialog { position: relative; z-index: 1; width: 100%; max-width: 820px; max-height: 88vh; overflow-y: auto; background: var(--preto-2); border: 1px solid var(--brasa-40); padding: 48px 44px 44px; box-shadow: 0 40px 110px rgba(0,0,0,0.72), 0 0 70px var(--amarelo-07); transform: translateY(20px) scale(0.985); transition: transform 0.45s cubic-bezier(0.2,0,0,1); }
.mtz-dialog::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(139,111,71,0.22); pointer-events: none; }
.mtz-modal.open .mtz-dialog { transform: none; }
.mtz-close { position: absolute; top: 14px; right: 16px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(139,111,71,0.4); color: var(--bronze-claro); cursor: pointer; transition: color 0.3s, border-color 0.3s; font-size: 16px; line-height: 1; z-index: 3; }
.mtz-close:hover { color: var(--amarelo); border-color: var(--amarelo); }
.mtz-body { position: relative; }
.mtz-body .d-top { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.mtz-body .d-badge { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 14px; border: 1px solid; }
.mtz-body .d-badge.v { color: var(--vermelho-sinal); border-color: rgba(230,57,70,0.5); }
.mtz-body .d-badge.l { color: var(--amarelo); border-color: var(--amarelo-50); }
.mtz-body h2 { font-family: var(--voz-sagrada); font-size: clamp(24px,3.5vw,34px); color: var(--bege); margin-bottom: 4px; }
.mtz-body .d-frase { border: 1px solid var(--linha-bronze); padding: 16px 18px; font-family: var(--voz-sagrada); font-size: clamp(17px,2.2vw,21px); font-style: italic; color: var(--bege); margin: 16px 0 24px; }
.mtz-body .d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 24px; }
.mtz-body .d-block .db-lbl { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 8px; }
.mtz-body .d-block.dark .db-lbl { color: var(--vermelho-sinal); }
.mtz-body .d-block p { font-size: 15px; color: var(--fg2); }
.mtz-body .d-risco { background: var(--brasa-14); border: 1px solid var(--brasa-40); padding: 18px 22px; }
.mtz-body .d-risco .dr-lbl { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vermelho-sinal); margin-bottom: 7px; }
.mtz-body .d-risco p { font-size: 14px; color: var(--fg2); font-style: italic; }
.mtz-body .d-circle { margin-top: 18px; font-size: 13px; color: var(--bronze-claro); font-style: italic; }

.mtz-regua-wrap { max-width: 1000px; margin: 0 auto; overflow-x: auto; padding: 10px 0; }
.mtz-regua-svg { width: 100%; min-width: 860px; height: auto; display: block; }
.mtz-regua-legend { text-align: center; margin: 30px auto 0; max-width: 640px; font-size: 14px; color: var(--fg2); font-style: italic; }
.mtz-seal { cursor: pointer; }
.mtz-seal .seal-hit { fill: transparent; }
.mtz-seal .seal-ring { opacity: 0; transition: opacity 0.3s; }
.mtz-seal:hover .seal-ring, .mtz-seal:focus-visible .seal-ring { opacity: 0.9; }
.mtz-seal:focus { outline: none; }

@media (max-width: 680px) {
  .mtz-axis-x, .mtz-grid { grid-template-columns: 60px 1fr 1fr; gap: 5px; }
  .mtz-axy { font-size: 9px; padding: 6px 2px; }
  .mtz-axy .gn { font-size: 14px; }
  .caixa { padding: 14px 12px; aspect-ratio: 1.2/1; }
  .mtz-fire { left: calc(60px + ((100% - 60px) / 2) + 2.5px); }
  .mtz-dialog { padding: 34px 22px; }
  .mtz-body .d-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* hero bipolar · sombra ↔ luz separadas pela divisa */
.mtz-hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mtz-hero-glow::before, .mtz-hero-glow::after { content: ""; position: absolute; top: 50%; width: 540px; height: 540px; transform: translateY(-50%); filter: blur(64px); border-radius: 50%; }
.mtz-hero-glow::before { left: -120px; background: radial-gradient(circle, rgba(139,0,0,0.24), transparent 64%); }
.mtz-hero-glow::after { right: -120px; background: radial-gradient(circle, var(--amarelo-12), transparent 64%); }
.mtz-hero-divisa { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); z-index: 0; background: linear-gradient(180deg, transparent, var(--amarelo), var(--vermelho-sinal), var(--brasa), transparent); opacity: 0.35; pointer-events: none; }

/* espelhamento · a gêmea acende ao passar o mouse */
.caixa.twin { border-style: dashed; }
.caixa.v.twin { border-color: rgba(230,57,70,0.55); box-shadow: 0 0 24px rgba(230,57,70,0.08); }
.caixa.l.twin { border-color: var(--amarelo-55); box-shadow: 0 0 24px var(--amarelo-08); }

/* o reflexo dentro do painel de detalhe */
.mtz-mirror { margin-top: 26px; border-top: 1px solid rgba(139,111,71,0.3); padding-top: 22px; }
.mtz-mirror .mm-lbl { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.mtz-mirror .mm-lbl::before { content: ""; width: 30px; height: 1px; background: currentColor; }
.mm-flip { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; align-items: center; width: 100%; text-align: left; background: transparent; border: 1px solid rgba(139,111,71,0.3); padding: 18px 22px; cursor: pointer; transition: border-color 0.4s, background 0.4s, transform 0.4s; font-family: inherit; }
.mm-flip:hover { border-color: var(--bronze-claro); background: var(--preto-3); transform: translateY(-2px); }
.mm-flip .mm-side { font-family: var(--voz-sagrada); font-size: clamp(17px,2vw,20px); }
.mm-flip.l .mm-side { color: var(--bege); }
.mm-flip.v .mm-side { color: rgba(230,57,70,0.92); }
.mm-flip .mm-frase { grid-column: 1; font-size: 14px; font-style: italic; color: var(--fg2); }
.mm-flip .mm-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amarelo); white-space: nowrap; }
.mtz-close-doutrina { max-width: 720px; margin: 0 auto; text-align: center; }
.mtz-close-doutrina .sec-label { justify-content: center; }
.mtz-close-doutrina .big { font-family: var(--voz-sagrada); font-size: clamp(20px,3vw,30px); color: var(--bege); font-style: italic; line-height: 1.4; margin-bottom: 20px; }

/* Mecânica RPG */
.mecanica { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--linha-fraca); }
@media(max-width:760px){ .mecanica{ grid-template-columns: 1fr; } }
.mec { background: var(--preto-2); padding: 26px; transition: background 0.4s; }
.mec:hover { background: var(--preto-3); }
.mec .m-lbl { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; }
.mec .m-val { font-family: var(--voz-sagrada); font-size: 17px; color: var(--bege); }
.mec .m-val .xp { color: var(--amarelo); }
.mec .m-sub { font-size: 13px; color: var(--fg3); font-style: italic; margin-top: 5px; }

/* A Queda em 3 graus */
.queda-track { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 26px; }
@media(max-width:760px){ .queda-track{ grid-template-columns: 1fr; } }
.qcard { background: linear-gradient(160deg, var(--brasa-16), rgba(18,15,8,0.5)); border: 1px solid rgba(139,0,0,0.35); padding: 30px 26px; transition: transform 0.4s, border-color 0.4s; }
.qcard:hover { transform: translateY(-4px); border-color: rgba(230,57,70,0.55); }
.qcard .q-grau { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vermelho-sinal); margin-bottom: 12px; }
.qcard h4 { font-family: var(--voz-sagrada); font-size: 19px; color: rgba(230,57,70,0.9); margin-bottom: 10px; }
.qcard p { font-size: 14px; color: var(--fg3); }

/* ═══════════════════════════════════════════════════════════
   A ÁRVORE DA FORJA · skill-tree radial dos 9 eixos (namespace arv/tree)
   ═══════════════════════════════════════════════════════════ */
body.arvore { background: radial-gradient(ellipse at center, #1a160d 0%, var(--preto) 75%); }
.arv-head { text-align: center; padding: 104px 24px 6px; position: relative; z-index: 2; }
.arv-head .label { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 12px; }
.arv-head h1 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(30px,5.5vw,56px); color: var(--bege); line-height: 0.95; margin-bottom: 14px; }
.arv-head h1 .b { color: var(--amarelo); text-shadow: 0 0 40px var(--amarelo-30); }
.arv-head p { max-width: 600px; margin: 0 auto; font-size: 16px; font-style: italic; color: var(--fg2); }

.controls { display: flex; gap: 2px; justify-content: center; margin: 26px auto 8px; position: relative; z-index: 5; max-width: 540px; flex-wrap: wrap; }
.ctrl { background: var(--preto-2); border: 1px solid var(--linha-bronze); color: var(--bronze-claro); font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 18px; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.ctrl:hover { border-color: var(--bronze); color: var(--bege); }
.ctrl.active { background: var(--amarelo); color: var(--preto); border-color: var(--amarelo); box-shadow: 0 0 22px rgba(246,195,36,0.25); }

.arv-stage { display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; padding: 10px; overflow: hidden; }
.tree-wrap { position: relative; width: 100%; max-width: 880px; display: flex; justify-content: center; }
.arv-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(139,0,0,0.32) 0%, var(--amarelo-07) 38%, transparent 66%); will-change: transform, opacity; animation: arvPulse 7s ease-in-out infinite; pointer-events: none; }
.arv-glow.outer { width: 760px; height: 760px; background: radial-gradient(circle, rgba(139,0,0,0.10) 0%, transparent 60%); animation-duration: 9s; }
@keyframes arvPulse { 0%,100%{ opacity: 0.5; transform: translate(-50%,-50%) scale(1); } 50%{ opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }
svg.tree { width: min(94vw,860px); height: auto; overflow: visible; }

.legend { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); width: 224px; z-index: 40; background: linear-gradient(180deg, rgba(27,24,16,0.85), rgba(19,17,9,0.72)); border: 1px solid var(--linha-bronze); padding: 24px 22px; backdrop-filter: blur(6px); transition: opacity 0.35s cubic-bezier(0.2,0,0,1), transform 0.35s cubic-bezier(0.2,0,0,1); }
.legend.collapsed { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(26px); }
.legend-min { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--linha-bronze); color: var(--bronze-claro); cursor: pointer; transition: color 0.3s, border-color 0.3s; }
.legend-min:hover { border-color: var(--amarelo); color: var(--amarelo); }
.legend-open { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 39; width: 46px; height: 46px; display: none; align-items: center; justify-content: center; background: var(--preto-2); border: 1px solid var(--linha-bronze); color: var(--amarelo); cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; }
.legend-open:hover { border-color: var(--amarelo); box-shadow: 0 0 18px rgba(246,195,36,0.22); }
.legend-open.show { display: flex; }
@media (max-width: 980px){
  .legend { position: static; transform: none; width: 100%; max-width: 420px; margin: 18px auto 0; }
  .legend.collapsed { opacity: 1; pointer-events: auto; transform: none; }
  .legend-min, .legend-open { display: none !important; }
  .arv-stage { flex-wrap: wrap; }
}
.legend::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--amarelo), transparent); opacity: 0.5; }
.legend h4 { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 16px; }
.legend .lg-item { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.legend .dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 1.4px solid; }
.legend .lg-txt strong { display: block; font-family: var(--voz-sagrada); font-size: 12px; color: var(--bege); letter-spacing: 0.03em; }
.legend .lg-txt span { font-size: 12px; font-style: italic; color: var(--fg3); }
.legend .sep { height: 1px; background: var(--linha-fraca); margin: 18px 0; }
.legend .read { font-size: 13px; color: var(--fg2); line-height: 1.5; font-style: italic; }

.ring { fill: none; stroke: rgba(139,111,71,0.1); stroke-width: 1; }
.ring-lbl { fill: var(--bronze); font-family: var(--voz-sagrada); font-size: 7.5px; letter-spacing: 0.1em; opacity: 0.45; text-transform: uppercase; }
.branch { stroke: rgba(139,111,71,0.32); fill: none; stroke-width: 1.3; transition: stroke 0.4s, opacity 0.4s; }
.twig { stroke: var(--linha-fraca); fill: none; stroke-width: 1; }
.cross { stroke: rgba(139,0,0,0.28); fill: none; stroke-width: 1; stroke-dasharray: 3 4; transition: stroke 0.4s, opacity 0.4s; }
.nodeG { cursor: pointer; transition: opacity 0.35s, transform 0.35s; }
.nodeC { fill: var(--preto-2); stroke: var(--bronze); stroke-width: 1.2; transition: fill 0.3s, stroke 0.3s; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
.nodeIco { stroke: var(--bronze-claro); stroke-width: 1.1; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s, opacity 0.3s; }
.nodeG[data-grau="0"] .nodeC { fill: #2a0d0d; stroke: var(--vermelho-sinal); }
.nodeG[data-grau="0"] .nodeIco { stroke: var(--vermelho-sinal); }
.nodeG[data-grau="1"] .nodeIco { stroke: #c9774e; }
.nodeG[data-grau="4"] .nodeC { fill: rgba(246,195,36,0.13); stroke: var(--amarelo); filter: drop-shadow(0 0 5px var(--amarelo-45)); }
.nodeG[data-grau="4"] .nodeIco { stroke: var(--amarelo); }
.nodeG:hover .nodeC { stroke: var(--amarelo); filter: drop-shadow(0 0 8px var(--amarelo-60)); }
.nodeG:hover .nodeIco { stroke: var(--amarelo); }
.axisG.lit-profile .nodeC { filter: drop-shadow(0 0 4px var(--amarelo-50)); }
.axisG:hover .branch { stroke: var(--amarelo); stroke-width: 2; filter: drop-shadow(0 0 5px var(--amarelo-40)); }
.axisG:hover .nodeC { stroke: var(--amarelo); }
.axisG:hover .nodeIco { stroke: var(--amarelo); }
.axisG:hover .cross { stroke: rgba(230,57,70,0.5); }
.axisG.dim { opacity: 0.16; }
.pole-label { font-family: var(--voz-sagrada); font-size: 10.5px; letter-spacing: 0.03em; transition: fill 0.3s, opacity 0.3s; paint-order: stroke; stroke: #131109; stroke-width: 3px; stroke-linejoin: round; }
.pole-luz { fill: var(--amarelo); }
.pole-sombra { fill: var(--vermelho-sinal); opacity: 0.85; }
.axisG:hover .pole-luz { fill: #fff; }
.center-ring { fill: #150c08; stroke: var(--amarelo-35); stroke-width: 1.4; filter: drop-shadow(0 0 12px rgba(139,0,0,0.5)); }
.center-sig { stroke: var(--vermelho-sinal); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.center-txt { fill: var(--bege); font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.12em; text-anchor: middle; text-transform: uppercase; }
.center-sub { fill: var(--bronze); font-family: var(--voz-operacional); font-size: 9px; font-style: italic; text-anchor: middle; }

/* tooltip de nó individual */
.node-tip { position: fixed; z-index: 300; pointer-events: none; background: rgba(19,17,9,0.96); border: 1px solid var(--linha-bronze); padding: 8px 12px; opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; max-width: 220px; }
.node-tip.show { opacity: 1; transform: translateY(0); }
.node-tip .nt-eixo { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); margin-bottom: 3px; }
.node-tip .nt-grau { font-family: var(--voz-sagrada); font-size: 13px; color: var(--bege); }
.node-tip .nt-grau .nt-n { color: var(--amarelo); }

.detail { max-width: 680px; margin: 16px auto 24px; padding: 0 24px; text-align: center; position: relative; z-index: 2; min-height: 120px; opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.5s; }
.detail.show { opacity: 1; transform: translateY(0); }
.detail .tag { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 14px; }
.detail .duo { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.detail .pole .pl { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 5px; }
.detail .pole.s .pl { color: var(--vermelho-sinal); }
.detail .pole.l .pl { color: var(--amarelo); }
.detail .pole h3 { font-family: var(--voz-sagrada); font-size: 21px; color: var(--bege); }
.detail .arrow { color: var(--bronze); font-size: 22px; }
.detail .graus { display: flex; gap: 0; justify-content: center; flex-wrap: wrap; border: 1px solid var(--linha-bronze); max-width: 600px; margin: 0 auto; }
.detail .grau-chip { flex: 1; min-width: 110px; font-size: 12px; color: var(--fg2); padding: 10px 8px; border-right: 1px solid var(--linha-fraca); position: relative; }
.detail .grau-chip:last-child { border-right: none; }
.detail .grau-chip .gnum { display: block; font-family: var(--voz-sagrada); font-size: 10px; color: var(--bronze); margin-bottom: 4px; }
.detail .grau-chip.g0 { color: rgba(230,57,70,0.8); }
.detail .grau-chip.g4 { color: var(--amarelo); }

.icongrid-wrap { max-width: 1000px; margin: 0 auto; padding: 20px 24px 40px; position: relative; z-index: 2; display: none; }
.icongrid-wrap.show { display: block; }
.icongrid-title { text-align: center; font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 24px; }
.axis-row { margin-bottom: 8px; display: grid; grid-template-columns: 130px repeat(5,1fr); gap: 2px; align-items: stretch; }
.axis-row .rowname { display: flex; align-items: center; font-family: var(--voz-sagrada); font-size: 12px; color: var(--bronze-claro); padding: 0 10px; background: rgba(27,24,16,0.5); }
.icell { background: var(--preto-2); padding: 14px 6px 10px; text-align: center; border: 1px solid transparent; transition: background 0.3s, border-color 0.3s, color 0.3s; }
.icell:hover { border-color: var(--amarelo-40); background: #221d13; }
.icell svg { margin: 0 auto 6px; }
.icell .cap { font-size: 10px; color: var(--fg3); line-height: 1.2; }
.icell.c0 .cap { color: rgba(230,57,70,0.7); }
.icell.c4 .cap { color: var(--amarelo); }
.gridhdr { display: grid; grid-template-columns: 130px repeat(5,1fr); gap: 2px; margin-bottom: 8px; }
.gridhdr .gh { text-align: center; font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); padding: 6px 2px; }
.gridhdr .gh.s { color: var(--vermelho-sinal); }
.gridhdr .gh.l { color: var(--amarelo); }

/* Índice de componentes do sistema (página Componentes) */
.sys-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media(max-width:760px){ .sys-grid{ grid-template-columns: 1fr; } }
.sysc { display: block; background: var(--preto-2); border: 1px solid var(--linha-fraca); padding: 22px 24px; transition: background 0.4s, border-color 0.4s, transform 0.4s; }
.sysc:hover { background: var(--preto-3); border-color: var(--amarelo-40); transform: translateY(-3px); }
.sysc .w { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 8px; display: block; }
.sysc .nm { font-family: var(--voz-sagrada); font-size: 17px; color: var(--bege); display: block; }
.sysc:hover .nm { color: var(--amarelo); }
.sysc .ds { font-size: 13px; color: var(--fg3); margin-top: 6px; display: block; line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════
   O FUNDADOR · Alan Nicolas · O Forjador-Mor
   Lado da luz: amarelo/bronze/bege. A fotografia entra como
   relíquia, tratada para o tom da Forja (preto + âmbar), nunca
   "colada". Mesma gramática dos componentes: canto reto, top-rule
   brasa→amarelo, moldura dupla, glow de forja, divisas hairline.
   ═══════════════════════════════════════════════════════════ */

/* tratamento-mãe da fotografia · puxa qualquer foto para o tom da Forja */
.fnd-treat { filter: grayscale(0.34) sepia(0.26) saturate(1.04) contrast(1.06) brightness(0.82); }

/* ---- HERO cinematográfico · vídeo tratado em tela cheia ---- */
.fnd-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; padding: 150px 0 84px; }
.fnd-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fnd-hero-media video, .fnd-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.fnd-hero-media video, .fnd-hero-media img { filter: grayscale(0.4) sepia(0.3) saturate(1.05) contrast(1.05) brightness(0.6); transform: scale(1.04); }
/* véu de forja: vinheta + base preta p/ leitura + lavagem âmbar/brasa */
.fnd-hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 62% 34%, transparent 30%, rgba(12,10,5,0.7) 100%),
    linear-gradient(to top, rgba(12,10,5,0.97) 4%, rgba(12,10,5,0.55) 36%, rgba(12,10,5,0.2) 64%, rgba(12,10,5,0.55) 100%),
    linear-gradient(150deg, var(--brasa-16), transparent 46%, var(--amarelo-08)); }
.fnd-hero-glow { position: absolute; z-index: 1; bottom: -10%; left: 52%; transform: translateX(-50%); width: 760px; height: 600px; pointer-events: none; filter: blur(60px); background: radial-gradient(circle, var(--amarelo-12) 0%, var(--brasa-08) 40%, transparent 70%); animation: breathe 7s ease-in-out infinite; }
.fnd-hero-inner { position: relative; z-index: 2; max-width: var(--codex-max); margin: 0 auto; padding-inline: var(--codex-pad); width: 100%; }
.fnd-kick { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--amarelo); display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.fnd-kick::before { content: ""; width: 42px; height: 1px; background: currentColor; }
.fnd-name { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.86; font-size: clamp(52px, 11vw, 150px); color: var(--bege); margin-bottom: 24px; }
.fnd-name .brasa { color: var(--amarelo); text-shadow: 0 0 48px var(--amarelo-35); }
.fnd-title { font-family: var(--voz-sagrada); font-size: clamp(15px, 2.2vw, 23px); letter-spacing: 0.08em; color: var(--bronze-claro); font-style: italic; margin-bottom: 30px; }
.fnd-relic { border-top: 2px solid var(--brasa); padding-top: 22px; max-width: 540px; font-size: clamp(18px, 2.3vw, 24px); font-style: italic; color: rgba(232,220,196,0.86); line-height: 1.46; }
.fnd-scroll { margin-top: 50px; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); animation: pulse 2.5s infinite; }

/* ---- moldura-relíquia (lado da luz) · espelha .bd-frame mas em âmbar ---- */
.fnd-frame { position: relative; aspect-ratio: 3/4; border: 1px solid var(--linha-bronze); background: #0c0a05; overflow: hidden; }
.fnd-frame::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--amarelo-12); pointer-events: none; z-index: 3; }
.fnd-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; z-index: 0; filter: grayscale(0.34) sepia(0.26) saturate(1.04) contrast(1.06) brightness(0.84); transition: transform 1.2s cubic-bezier(0.2,0,0,1); }
.fnd-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 80% 66% at 50% 36%, transparent 44%, rgba(12,10,5,0.74) 100%),
    linear-gradient(to bottom, rgba(12,10,5,0.30) 0%, transparent 24%, transparent 56%, rgba(12,10,5,0.9) 100%),
    linear-gradient(158deg, rgba(154,125,86,0.22), var(--amarelo-08)); }
.fnd-frame .bd-tag { position: absolute; top: 16px; right: 18px; z-index: 4; font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.2em; color: var(--amarelo); text-shadow: 0 2px 10px rgba(8,6,2,0.9); }
.fnd-frame .fnd-cap { position: absolute; bottom: 16px; left: 0; right: 0; z-index: 4; text-align: center; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-claro); }
.fnd-frame:hover .fnd-plate { transform: scale(1.035); }

/* ---- A ORIGEM · dueto foto + prosa ---- */
.fnd-duo { display: grid; grid-template-columns: 0.82fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .fnd-duo { grid-template-columns: 1fr; gap: 40px; } }
.fnd-duo.flip { grid-template-columns: 1fr 0.82fr; }
@media (max-width: 860px) { .fnd-duo.flip { grid-template-columns: 1fr; } .fnd-duo.flip .fnd-frame { order: -1; } }

/* ---- MANIFESTO · banda full-bleed com foto tratada de fundo ---- */
.fnd-band { position: relative; padding-block: 120px; overflow: hidden; border-block: 1px solid var(--linha-bronze); }
.fnd-band-media { position: absolute; inset: 0; z-index: 0; }
.fnd-band-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(0.4) sepia(0.3) saturate(1.04) contrast(1.06) brightness(0.5); }
.fnd-band-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 24%, rgba(12,10,5,0.82) 100%),
    linear-gradient(180deg, rgba(12,10,5,0.78), rgba(12,10,5,0.62)),
    linear-gradient(150deg, var(--brasa-16), transparent 60%); }
.fnd-band .wrap { position: relative; z-index: 2; text-align: center; }
.fnd-manifesto-q { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.0; font-size: clamp(30px, 5.2vw, 64px); color: var(--bege); max-width: 14ch; margin: 18px auto 30px; text-wrap: balance; }
.fnd-manifesto-q .brasa { color: var(--amarelo); }
.fnd-manifesto-body { max-width: 660px; margin: 0 auto; font-size: 19px; color: rgba(232,220,196,0.82); line-height: 1.7; text-wrap: pretty; }
.fnd-manifesto-body p { margin-bottom: 16px; }
.fnd-manifesto-body .destaque { color: var(--bege); font-style: italic; }

/* ---- AS ERAS · linha do tempo vertical (gramática dos marcadores-losango) ---- */
.eras-track { max-width: 760px; margin: 8px auto 0; position: relative; padding-left: 4px; }
.era { position: relative; padding: 0 0 44px 64px; }
.era:last-child { padding-bottom: 0; }
/* fio vertical bronze→amarelo */
.era::before { content: ""; position: absolute; left: 16px; top: 30px; bottom: -2px; width: 2px; background: var(--bronze); opacity: 0.34; }
.era:last-child::before { display: none; }
.era.lit::before { background: linear-gradient(180deg, var(--amarelo), var(--brasa)); opacity: 0.9; box-shadow: 0 0 10px var(--amarelo-30); }
/* marcador losango */
.era-mark { position: absolute; left: 0; top: 6px; width: 34px; height: 34px; transform: rotate(45deg); background: var(--preto-2); border: 2px solid var(--bronze); display: flex; align-items: center; justify-content: center; transition: background 0.45s cubic-bezier(0.2,0,0,1), border-color 0.45s cubic-bezier(0.2,0,0,1), box-shadow 0.45s cubic-bezier(0.2,0,0,1); }
.era-mark span { transform: rotate(-45deg); font-family: var(--voz-sagrada); font-size: 12px; color: var(--bronze-claro); }
.era.lit .era-mark { border-color: var(--amarelo); background: rgba(246,195,36,0.13); box-shadow: 0 0 16px var(--amarelo-30); }
.era.lit .era-mark span { color: var(--amarelo); }
.era:hover .era-mark { border-color: var(--amarelo); transform: rotate(45deg) scale(1.08); }
.era-grau { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze); margin-bottom: 8px; }
.era-name { font-family: var(--voz-sagrada); font-size: clamp(20px, 2.6vw, 28px); color: var(--bege); margin-bottom: 12px; line-height: 1.12; }
.era.lit .era-name { color: var(--amarelo); }
.era-body { font-size: 16px; color: var(--fg2); line-height: 1.66; max-width: 600px; text-wrap: pretty; }
.era-body .destaque { color: var(--bege); font-style: italic; }

/* ---- O LEGADO · números reais da cosmologia ---- */
.fnd-legado { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--linha-fraca); margin-top: 8px; }
@media (max-width: 680px) { .fnd-legado { grid-template-columns: repeat(2, 1fr); } }
.leg-cell { background: var(--preto-2); padding: 30px 24px; text-align: center; transition: background 0.4s; }
.leg-cell:hover { background: var(--preto-3); }
.leg-cell .ln { font-family: var(--voz-monumental); font-size: clamp(38px, 5vw, 56px); color: var(--amarelo); line-height: 1; }
.leg-cell .ll { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); margin-top: 12px; }

/* ---- galeria-relíquia · três placas tratadas ---- */
.fnd-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .fnd-galeria { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } }

/* ---- frase-relíquia de fecho ---- */
.fnd-fecho { text-align: center; padding-block: 30px; }
.fnd-fecho .mark { font-family: var(--voz-sagrada); font-size: 64px; color: var(--brasa); line-height: 0.5; margin-bottom: 26px; }
.fnd-fecho .txt { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(28px, 4.6vw, 58px); color: var(--bege); max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.fnd-fecho .txt .brasa { color: var(--amarelo); }
.fnd-fecho .who { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); margin-top: 30px; }

/* ---- os dez valores · em ordem (a ordem é a doutrina) ---- */
.fnd-valores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.fnd-valores .v { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.04em; color: var(--bronze-claro); border: 1px solid var(--linha-bronze); padding: 8px 14px; transition: color 0.35s, border-color 0.35s; }
.fnd-valores .v:hover { color: var(--bege); border-color: var(--amarelo-40); }
.fnd-valores .v .o { font-size: 10px; color: var(--bronze); font-variant-numeric: tabular-nums; }
.fnd-valores .v.first { color: var(--amarelo); border-color: var(--amarelo-40); }
.fnd-valores .v.first .o { color: var(--amarelo); }

/* ---- CTA-relíquia · "Entre no Movimento Lendário" ---- */
.fnd-cta-wrap { text-align: center; margin-top: 40px; }
.fnd-cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amarelo); border: 1px solid var(--amarelo-40); padding: 17px 34px; min-height: 44px; transition: background 0.4s, color 0.4s, border-color 0.4s; }
.fnd-cta:hover { background: var(--amarelo); color: var(--preto); border-color: var(--amarelo); }