/* ============================================================
   A CATEDRAL · REFORJADA · estilos scoped sobre o DS da Forja
   Tudo lê dos tokens de tokens.css + forja.css.
   Princípio: procissão de câmaras: escala e luz variam por nave.
   ============================================================ */

/* ---- vozes utilitárias ---- */
.cat-mono { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; }
.cat-sac  { font-family: var(--voz-sagrada); letter-spacing: 0.04em; }
.a { color: var(--amarelo); }
.v { color: var(--vermelho-sinal); }

.cat-ico { stroke: var(--bronze-claro); stroke-width: 1.3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cat-ico-a { stroke: var(--amarelo); }
.cat-ico-v { stroke: var(--vermelho-sinal); }

/* contêiner de leitura largo (compõe com a grade da Forja) */
.cwrap { max-width: 1180px; margin: 0 auto; padding-inline: 32px; position: relative; z-index: 2; }
@media (max-width: 560px){ .cwrap { padding-inline: 22px; } }

/* ===========================================================
   PROFUNDÍMETRO · trilho de naves à esquerda
   =========================================================== */
.depth { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 0; align-items: center; }
@media (max-width: 1080px){ .depth { display: none; } }
.depth .dot { width: 9px; height: 9px; border: 1px solid var(--bronze); border-radius: 50%; background: none; padding: 0; cursor: pointer; transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s; }
.depth .dot.active { background: var(--amarelo); border-color: var(--amarelo); box-shadow: 0 0 12px var(--amarelo-60); transform: scale(1.25); }
.depth .dot.dark.active { background: var(--vermelho-sinal); border-color: var(--vermelho-sinal); box-shadow: 0 0 12px var(--brasa-40); }
.depth .dot:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; }
.depth .line { width: 1px; height: 22px; background: var(--linha-fraca); }

/* ===========================================================
   ANDAIME DE NAVE + NUMERAL FANTASMA
   O numeral romano gigante ancora cada nave, varia de posição
   (esq/dir/centro) p/ quebrar a monotonia e dar peso + hierarquia.
   =========================================================== */
.nave { position: relative; padding-block: clamp(96px, 12vw, 168px); }
.nave-inner { position: relative; z-index: 2; }

.ghost { position: absolute; z-index: 0; font-family: var(--voz-sagrada); font-weight: 800;
  font-size: clamp(180px, 34vw, 460px); line-height: 0.7; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1px var(--bronze-42); user-select: none;
  opacity: 0.5; }
.ghost.fill { color: var(--amarelo-05); -webkit-text-stroke: 1px var(--amarelo-30); opacity: 0.9; }
.ghost.dark { -webkit-text-stroke: 1px rgba(230,57,70,0.30); }
.ghost.gl  { top: -0.18em; left: -0.06em; }
.ghost.gr  { top: -0.18em; right: -0.06em; }
.ghost.gc  { top: -0.12em; left: 50%; transform: translateX(-50%); }
@media (max-width: 720px){ .ghost { font-size: 40vw; opacity: 0.35; } }

/* kicker de nave */
.kick { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--amarelo); display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.kick::before { content: ""; width: 40px; height: 1px; background: currentColor; }
.kick.dark { color: var(--vermelho-sinal); }
.kick.center { justify-content: center; }
.kick.center::after { content: ""; width: 40px; height: 1px; background: currentColor; }

.nv-title { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(40px, 6.2vw, 92px); line-height: 0.92; color: var(--bege); text-wrap: balance; }
.nv-lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--fg2); line-height: 1.7; text-wrap: pretty; max-width: 60ch; }
.nv-lead .destaque { color: var(--amarelo); font-style: italic; }
.nv-lead p + p { margin-top: 18px; }

/* divisor sutil entre naves */
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--linha-bronze), transparent); }

/* ===========================================================
   NÁRTEX (hero)
   =========================================================== */
.nartex { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; padding: 120px 0 96px; }
.forge-mouth { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
  width: min(92vw, 760px); height: min(92vw, 760px);
  background: radial-gradient(circle, var(--amarelo-12) 0%, var(--brasa-14) 36%, transparent 68%);
  filter: blur(48px); z-index: 0; will-change: translate, opacity; animation: furnace 5s ease-in-out infinite; }
@keyframes furnace { 0%,100%{ opacity: 0.55; } 50%{ opacity: 1; } }
.nartex .pre { position: relative; z-index: 2; font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.44em; text-transform: uppercase; color: var(--bronze); margin-bottom: 34px; }
.nartex h1 { position: relative; z-index: 2; font-size: clamp(72px, 17vw, 230px); color: var(--bege); margin-bottom: 30px; }
.nartex h1 .f { color: var(--amarelo); }
.nartex .sub { position: relative; z-index: 2; font-family: var(--voz-operacional); font-style: italic; font-size: clamp(18px, 2.4vw, 25px); color: var(--fg2); max-width: 30ch; margin: 0 auto 34px; text-wrap: balance; }
.nartex .index { position: relative; z-index: 2; display: flex; gap: 0; align-items: stretch; border: 1px solid var(--linha-bronze); }
.nartex .index a { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-claro); text-decoration: none; padding: 15px 22px; min-height: 44px; display: inline-flex; align-items: center; transition: background 0.3s, color 0.3s; }
.nartex .index a + a { border-left: 1px solid var(--linha-bronze); }
.nartex .index a:hover { background: var(--amarelo-08); color: var(--amarelo); }
.nartex .index a:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.descend { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); display: flex; flex-direction: column; align-items: center; gap: 10px; animation: catpulse 2.6s infinite; }
@keyframes catpulse { 0%,100%{ opacity: 0.32; } 50%{ opacity: 1; } }

/* ===========================================================
   I · MANIFESTO ASSIMÉTRICO
   =========================================================== */
.manifesto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
@media (max-width: 860px){ .manifesto { grid-template-columns: 1fr; gap: 32px; } }
.manifesto .quote { font-family: var(--voz-sagrada); font-style: italic; font-size: clamp(26px, 3.6vw, 50px); line-height: 1.24; color: var(--bege); text-wrap: pretty; }
.manifesto .quote .a { font-style: normal; }
.manifesto .quote::before { content: "“"; display: block; font-size: 1.4em; line-height: 0.4; color: var(--bronze); margin-bottom: 18px; }

/* ===========================================================
   II · O CICLO · banda editorial larga
   =========================================================== */
.ciclo-row { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(30px, 4vw, 64px); align-items: center; }
@media (max-width: 880px){ .ciclo-row { grid-template-columns: 1fr; } }
.ciclo-art { display: flex; justify-content: center; }
.ciclo-art svg { width: 100%; max-width: 680px; height: auto; overflow: visible; }

/* ===========================================================
   III · OS 5 MINÉRIOS · grade-espécime pesada
   =========================================================== */
.minerios { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: var(--linha-fraca); margin-top: 12px; }
@media (max-width: 900px){ .minerios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .minerios { grid-template-columns: 1fr; } }
.min { background: var(--preto-2); padding: 34px 22px 28px; position: relative; transition: background 0.4s, transform 0.4s; }
.min:hover { background: var(--preto-3); transform: translateY(-4px); }
.min .mn { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.2em; color: var(--bronze); margin-bottom: 20px; }
.min .m-ico { height: 56px; display: flex; align-items: center; margin-bottom: 18px; }
.min h4 { font-family: var(--voz-sagrada); font-size: 15px; color: var(--bege); line-height: 1.2; margin-bottom: 8px; }
.min p { font-size: 13px; color: var(--fg3); font-style: italic; line-height: 1.5; }

/* ===========================================================
   IV · AS 3 FORÇAS · painéis altos dramáticos
   =========================================================== */
.forcas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--linha-fraca); }
@media (max-width: 840px){ .forcas { grid-template-columns: 1fr; } }
.cf { position: relative; overflow: hidden; padding: 52px 34px 44px; text-align: center; background: linear-gradient(180deg, var(--preto-2), var(--preto)); border-top: 2px solid; transition: transform 0.5s; }
.cf::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 150px; height: 150px; border-radius: 50%; filter: blur(46px); opacity: 0.16; transition: opacity 0.5s; }
.cf:hover { transform: translateY(-8px); }
.cf:hover::before { opacity: 0.4; }
.cf.fogo { border-top-color: var(--amarelo); } .cf.fogo::before { background: var(--amarelo); }
.cf.bigorna { border-top-color: var(--aco); } .cf.bigorna::before { background: var(--aco); }
.cf.martelo { border-top-color: var(--vermelho-sinal); } .cf.martelo::before { background: var(--vermelho-sinal); }
.cf .cf-ico { height: 92px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; position: relative; z-index: 2; }
.cf .cf-elem { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 12px; }
.cf.fogo .cf-elem { color: var(--amarelo); } .cf.bigorna .cf-elem { color: #7c97b3; } .cf.martelo .cf-elem { color: var(--vermelho-sinal); }
.cf h3 { font-family: var(--voz-sagrada); font-size: 25px; color: var(--bege); margin-bottom: 14px; }
.cf p { font-size: 14.5px; color: var(--fg2); line-height: 1.6; }

/* ===========================================================
   V · EQUAÇÃO SAGRADA · peça central emoldurada
   =========================================================== */
.equacao-wrap { position: relative; border: 1px solid var(--linha-bronze); background: linear-gradient(180deg, var(--preto-2), var(--preto)); padding: clamp(48px, 7vw, 92px) 40px; overflow: hidden; }
.equacao-wrap::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 540px; height: 540px; background: radial-gradient(circle, var(--amarelo-07), transparent 70%); pointer-events: none; }
.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 { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 52px); flex-wrap: wrap; }
.eq-item { text-align: center; }
.eq-item .eq-sig { margin-bottom: 18px; display: flex; justify-content: center; }
.eq-item .eq-lbl { font-family: var(--voz-sagrada); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-claro); }
.eq-item .eq-sub { font-size: 13px; font-style: italic; color: var(--bronze); margin-top: 4px; }
.eq-op { font-family: var(--voz-sagrada); font-size: clamp(34px, 5vw, 56px); color: var(--bronze); font-weight: 300; }

/* ===========================================================
   AS IMPUREZAS · tríptico full-bleed das bestas
   =========================================================== */
.fullbleed { position: relative; width: 100%; padding-block: clamp(80px, 10vw, 130px); overflow: hidden; border-block: 1px solid var(--linha-bronze); background: radial-gradient(ellipse at 50% 0%, #1a0c0c 0%, var(--preto) 60%); }
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
@media (max-width: 820px){ .triptych { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.plate { position: relative; aspect-ratio: 3/4; border: 1px solid var(--brasa-40); background: #0c0a05; overflow: hidden; transition: transform 0.5s, border-color 0.5s, box-shadow 0.5s; }
.plate::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(139,0,0,0.28); pointer-events: none; z-index: 3; }
.plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at 50% 38%, transparent 40%, rgba(12,10,5,0.55) 100%), linear-gradient(180deg, transparent 55%, rgba(12,10,5,0.85)); }
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: 0;
  filter: grayscale(0.25) sepia(0.22) contrast(1.08) brightness(0.74); transition: transform 0.7s, filter 0.5s; }
.plate: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.18); }
.plate:hover img { transform: scale(1.05); filter: grayscale(0.1) sepia(0.16) contrast(1.1) brightness(0.84); }
.plate .p-cap { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 4; }
.plate .p-cap .pn { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--vermelho-sinal); }
.plate .p-cap h4 { font-family: var(--voz-sagrada); font-size: 17px; color: var(--bege); margin-top: 5px; line-height: 1.15; }
.plate .p-cap p { font-size: 12.5px; font-style: italic; color: var(--fg2); margin-top: 4px; }

/* ===========================================================
   AS TRÊS PORTAS · portais monumentais (porta de catedral)
   =========================================================== */
.act-head { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); }
.portas { display: flex; flex-direction: column; gap: 2px; }
.porta { position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(30px, 4vw, 56px); text-decoration: none; overflow: hidden;
  border: 1px solid var(--linha-bronze); background: linear-gradient(160deg, var(--preto-2), var(--preto));
  transition: border-color 0.5s, transform 0.5s, box-shadow 0.5s; }
.porta.flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.porta.flip .porta-arch { order: 2; }
@media (max-width: 820px){ .porta, .porta.flip { grid-template-columns: 1fr; } .porta.flip .porta-arch { order: -1; } .porta-arch { max-width: 360px; margin-inline: auto; } }
.porta::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(circle at 30% 100%, var(--amarelo-08), transparent 55%); }
.porta:hover { transform: translateY(-6px); border-color: var(--amarelo); box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 48px var(--amarelo-07); }
.porta:hover::after { opacity: 1; }
.porta:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; }
.porta.dark:hover { border-color: var(--vermelho-sinal); box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 48px var(--brasa-16); }
.porta.dark::after { background: radial-gradient(circle at 30% 100%, var(--brasa-16), transparent 55%); }

/* a moldura em arco: relíquia / vitral */
.porta-arch { position: relative; aspect-ratio: 4/5; background: #0c0a05; overflow: hidden;
  border: 1px solid var(--linha-bronze); border-radius: 48% 48% 6px 6px / 30% 30% 6px 6px; }
.porta-arch::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--amarelo-12); border-radius: inherit; pointer-events: none; z-index: 3; }
.porta.dark .porta-arch { border-color: var(--brasa-40); }
.porta.dark .porta-arch::before { border-color: rgba(230,57,70,0.22); }
.porta-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; z-index: 0;
  filter: grayscale(0.22) sepia(0.2) contrast(1.08) brightness(0.7); transition: transform 0.8s, filter 0.6s; }
.porta:hover .porta-arch img { transform: scale(1.05); filter: grayscale(0.06) sepia(0.14) contrast(1.1) brightness(0.82); }
.porta-arch .arch-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 34%, transparent 42%, rgba(12,10,5,0.5) 100%), linear-gradient(180deg, transparent 60%, rgba(12,10,5,0.8)); }
.porta-arch .arch-svg { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; }
.porta-arch .arch-svg svg { width: 86%; height: auto; overflow: visible; }

.porta-body { position: relative; z-index: 2; }
.porta-tag { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze); margin-bottom: 14px; }
.porta-body h3 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(30px, 3.6vw, 50px); color: var(--bege); line-height: 0.96; margin-bottom: 16px; }
.porta.dark .porta-body h3 .x, .porta-body h3 .x { color: var(--amarelo); }
.porta-body .pd { font-size: 16px; color: var(--fg2); line-height: 1.66; max-width: 52ch; margin-bottom: 22px; text-wrap: pretty; }
.porta-stats { display: flex; gap: 28px; margin-bottom: 26px; flex-wrap: wrap; }
.porta-stats .st { }
.porta-stats .st b { font-family: var(--voz-monumental); font-size: 30px; color: var(--amarelo); line-height: 1; display: block; }
.porta.dark .porta-stats .st b { color: var(--vermelho-sinal); }
.porta-stats .st span { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-top: 6px; display: block; }
.enter { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amarelo); display: inline-flex; align-items: center; gap: 10px; }
.porta.dark .enter { color: var(--vermelho-sinal); }
.enter svg { transition: transform 0.4s; }
.porta:hover .enter svg { transform: translateX(7px); }

/* ===========================================================
   IX · OS 3 PATAMARES · escada vertical
   =========================================================== */
.patamares { display: flex; flex-direction: column; gap: 2px; max-width: 860px; margin-top: 12px; }
.pat { display: grid; grid-template-columns: 96px 1fr auto; gap: clamp(20px, 3vw, 40px); align-items: center;
  background: var(--preto-2); border: 1px solid var(--linha-fraca); padding: 30px 34px; transition: background 0.4s, border-color 0.4s, transform 0.4s; }
.pat:hover { background: var(--preto-3); border-color: var(--linha-bronze); transform: translateX(6px); }
@media (max-width: 560px){ .pat { grid-template-columns: 60px 1fr; } .pat .p-ico { display: none; } }
.pat .p-rank { font-family: var(--voz-monumental); font-size: clamp(40px, 5vw, 64px); line-height: 0.8; }
.pat.p1 .p-rank { color: var(--bronze); } .pat.p2 .p-rank { color: var(--bronze-claro); } .pat.p3 .p-rank { color: var(--amarelo); }
.pat h4 { font-family: var(--voz-sagrada); font-size: clamp(20px, 2.4vw, 26px); color: var(--bege); margin-bottom: 6px; }
.pat p { font-size: 14.5px; color: var(--fg2); line-height: 1.6; max-width: 56ch; }
.pat .p-ico { display: flex; align-items: center; justify-content: center; }

/* ===========================================================
   X · A REGRA · banda-brasa de declaração
   =========================================================== */
.regra { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 0;
  border-block: 1px solid var(--brasa-40); background: linear-gradient(135deg, var(--brasa-16), rgba(19,17,9,0.7)); }
.regra::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--amarelo), var(--vermelho-sinal), transparent); }
.regra .r-inner { text-align: center; max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
.regra .r-q { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.06;
  font-size: clamp(30px, 5.4vw, 72px); color: var(--bege); margin-bottom: 26px; text-wrap: balance; }
.regra .r-q .a { color: var(--amarelo); }
.regra .r-sub { font-size: 18px; font-style: italic; color: var(--fg2); max-width: 56ch; margin: 0 auto; line-height: 1.6; }

/* ===========================================================
   X · O CHAMADO · duelo dos dois fogos (tipográfico, sem desenho)
   =========================================================== */
.duel { display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center; gap: clamp(24px, 6vw, 72px); max-width: 800px; margin: 52px auto 48px; }
@media (max-width: 600px){ .duel { grid-template-columns: 1fr; gap: 40px; } .duel-fire { display: none; } }
.duel-fire { align-self: stretch; min-height: 240px; background: var(--linha-de-fogo); box-shadow: 0 0 20px var(--amarelo-30); }
.duel-side { text-align: center; }
.duel-side.med { opacity: 0.7; }
.duel-flame { height: 132px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 24px; }
.duel-side.lend .duel-flame svg { filter: drop-shadow(0 0 16px var(--amarelo-45)); animation: duelflick 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.duel-name { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(28px, 3.8vw, 48px); line-height: 0.94; }
.duel-side.lend .duel-name { color: var(--amarelo); }
.duel-side.med .duel-name { color: var(--vermelho-sinal); }
.duel-sub { font-family: var(--voz-operacional); font-style: italic; font-size: 15px; color: var(--fg2); margin-top: 12px; }
@keyframes duelflick { 0%,100%{ transform: scaleY(1) scaleX(1); } 50%{ transform: scaleY(1.06) scaleX(0.98) translateY(-2px); } }
@media (prefers-reduced-motion: reduce){ .duel-side.lend .duel-flame svg { animation: none; } }
.chamado-q { font-family: var(--voz-sagrada); font-style: italic; font-size: clamp(22px, 3.4vw, 38px); color: var(--bege); line-height: 1.36; text-wrap: balance; max-width: 24ch; margin: 0 auto; }

/* ===========================================================
   XII · O SELO · fechamento monumental
   =========================================================== */
.selo { text-align: center; }
.selo .selo-sig { display: flex; justify-content: center; margin-bottom: 34px; }
.selo .frase-final { font-family: var(--voz-sagrada); font-style: italic; font-size: clamp(22px, 3.4vw, 40px); color: var(--bege); max-width: 22ch; margin: 0 auto 44px; line-height: 1.4; text-wrap: balance; }
.selo .frase-final .a { color: var(--amarelo); font-style: normal; }
.selo-portais { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.selo-portais a { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-claro); text-decoration: none; border: 1px solid var(--linha-bronze); padding: 14px 26px; min-height: 44px; display: inline-flex; align-items: center; transition: border-color 0.3s, color 0.3s, background 0.3s; }
.selo-portais a:hover { border-color: var(--amarelo); color: var(--amarelo); background: var(--amarelo-05); }
.selo-portais a:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; }

.cat-footer { text-align: center; padding: 72px 32px 64px; border-top: 1px solid var(--linha-fraca); }