/* ════════════════════════════════════════════════════════════════════
   CLÃ ARCANO · cla-arcano.css  ·  recheio só desta página
   Carrega DEPOIS de forja.css. Reaproveita o vocabulário das páginas de
   Herói (gdc-*, .wrap, .sec-head, .prosa, .statbar, .diag, .conexoes).
   Blocos exclusivos do Clã (namespace arc-):
   selo no hero · trio de destinos (neutro→Sábio→Ermitão) · estados de fogo
   · os três Elementos (arenas) · as oito Veias de Sub-Clã (escudos) · IA.
   ════════════════════════════════════════════════════════════════════ */

/* ───────── SUB-NAV STICKY · navegação de seções do Clã ───────── */
.arc-subnav { position: sticky; top: var(--rail-h, 64px); z-index: 190;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px;
  padding: 13px 24px; background: rgba(15,13,7,0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--linha-bronze); border-bottom: 1px solid var(--linha-bronze); }
.arc-subnav .sn-label { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); margin-right: 4px; }
.arc-subnav .sn-label b { color: var(--amarelo); font-weight: 400; }
.arc-subnav .sn-sep { color: var(--linha-bronze); }
.arc-subnav a { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bronze-claro); transition: color 0.3s; padding: 5px 2px; position: relative; white-space: nowrap; }
.arc-subnav a:hover { color: var(--amarelo); }
.arc-subnav a.here { color: var(--amarelo); }
.arc-subnav a.here::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--amarelo); }
/* a sub-nav cobre ~50px; o alvo de cada âncora desce pra não ficar sob o rail+nav */
#main > section[id], header[id] { scroll-margin-top: calc(var(--rail-h, 64px) + 62px); }
@media (max-width: 760px) {
  .arc-subnav { gap: 3px 13px; padding: 10px 14px; }
  .arc-subnav .sn-label, .arc-subnav .sn-sep { display: none; }
  .arc-subnav a { font-size: 10px; }
}

/* ───────── HERO · o selo do Arcano dentro da moldura-relíquia ───────── */
.arc-selo { display: flex; align-items: center; justify-content: center; padding: 0; }
.arc-selo .arc-num { position: absolute; z-index: 0; font-family: var(--voz-monumental);
  font-size: clamp(220px, 34vw, 360px); line-height: 0.7; letter-spacing: -0.05em; color: var(--bronze);
  opacity: 0.08; pointer-events: none; user-select: none; }
.arc-selo .arc-selo-halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--amarelo-12), transparent 66%); filter: blur(6px);
  animation: breathePit 7s ease-in-out infinite; }
.arc-selo img { position: relative; z-index: 2; width: 74%; object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 26px var(--amarelo-30)); }

/* ───────── TRIO DOS DESTINOS · o mesmo selo, três fogos ───────── */
.arc-trio { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 34px;
  align-items: center; justify-items: center; margin-top: 8px; }
@media(max-width:880px){ .arc-trio { grid-template-columns: 1fr; gap: 30px; } .arc-trio .arc-arw { display: none; } }
.arc-dest { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
  width: 100%; padding: 38px 26px; background: linear-gradient(180deg, var(--preto-2), var(--preto));
  border: 1px solid var(--linha-bronze); border-top: 3px solid var(--bronze); min-width: 0; }
.arc-dest.luz { border-top-color: var(--amarelo); }
.arc-dest.sombra { border-top-color: var(--vermelho-sinal); }
.arc-dest .art { position: relative; width: 168px; height: 168px; display: flex; align-items: center; justify-content: center; }
.arc-dest .art::before { content: ""; position: absolute; inset: -16%; border-radius: 50%;
  background: radial-gradient(circle, var(--amarelo-10), transparent 68%); }
.arc-dest.sombra .art::before { background: radial-gradient(circle, var(--brasa-16), transparent 68%); }
.arc-dest.neutro .art::before { opacity: 0.35; }
.arc-dest img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.5)); }
.arc-dest.sombra img { filter: drop-shadow(0 14px 30px rgba(0,0,0,.6)) grayscale(0.35) brightness(0.82); }
.arc-dest .st-lab { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--bronze); }
.arc-dest.luz .st-lab { color: var(--amarelo); }
.arc-dest.sombra .st-lab { color: var(--vermelho-sinal); }
.arc-dest .st-nome { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em;
  font-size: 38px; line-height: 0.95; color: var(--bege); }
.arc-dest.sombra .st-nome { color: rgba(232,220,196,0.72); }
.arc-dest .st-desc { font-family: var(--voz-operacional); font-size: 16px; line-height: 1.5; color: var(--fg2); max-width: 30ch; }
.arc-arw { font-family: var(--voz-monumental); font-size: 30px; color: var(--bronze); line-height: 1; opacity: 0.7; }

/* ───────── ESTADOS DE FOGO · apagado / instável / aceso ───────── */
.arc-fogo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--linha-fraca); border: 1px solid var(--linha-bronze); }
@media(max-width:820px){ .arc-fogo { grid-template-columns: 1fr; } }
.arc-fogo .ff { background: var(--preto-2); padding: 34px 32px; min-width: 0; border-top: 3px solid var(--cinzas); }
.arc-fogo .ff.inst { border-top-color: var(--bronze); }
.arc-fogo .ff.aceso { border-top-color: var(--amarelo); }
.arc-fogo .ff .ff-flame { display: flex; gap: 5px; margin-bottom: 18px; }
.arc-fogo .ff .ff-flame span { width: 9px; height: 9px; border: 1px solid var(--bronze); transform: rotate(45deg); opacity: 0.3; }
.arc-fogo .ff.inst .ff-flame span:nth-child(-n+2),
.arc-fogo .ff.aceso .ff-flame span { background: var(--amarelo); border-color: var(--amarelo); opacity: 1; box-shadow: 0 0 10px var(--amarelo-40); }
.arc-fogo .ff .ff-lab { font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 8px; }
.arc-fogo .ff.aceso .ff-lab { color: var(--amarelo); }
.arc-fogo .ff h4 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: 26px; line-height: 1; color: var(--bege); margin: 0 0 14px; }
.arc-fogo .ff p { font-size: 16px; line-height: 1.6; color: var(--fg2); margin: 0; }

/* ───────── OS TRÊS ELEMENTOS · as arenas da retenção ───────── */
.arc-elementos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--linha-fraca); border: 1px solid var(--linha-bronze); }
@media(max-width:900px){ .arc-elementos { grid-template-columns: 1fr; } }
.arc-elem { background: linear-gradient(180deg, var(--preto-2), var(--preto)); padding: 38px 34px;
  min-width: 0; border-top: 3px solid var(--bronze); display: flex; flex-direction: column; gap: 18px; }
.arc-elem .el-ico { width: 46px; height: 46px; }
.arc-elem .el-tag { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
.arc-elem h3 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: 34px; line-height: 0.95; color: var(--bege); margin: 0; }
.arc-elem .el-guard { font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.04em; color: var(--bronze-claro); margin-top: -8px; }
.arc-elem .el-row { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--linha-fraca); }
.arc-elem .el-row .erk { font-family: var(--voz-sagrada); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); }
.arc-elem .el-row .erv { font-size: 16px; line-height: 1.5; color: var(--fg1); }
.arc-elem .el-row.falso .erv { color: rgba(232,220,196,0.7); font-style: italic; }
.arc-elem .el-row.ouro .erv { color: var(--amarelo); font-family: var(--voz-sagrada); font-size: 17px; letter-spacing: 0.02em; }
.arc-elem .el-frase { margin-top: auto; padding-top: 18px; font-family: var(--voz-operacional); font-style: italic;
  font-size: 16.5px; line-height: 1.5; color: var(--fg2); border-top: 1px solid var(--linha-fraca); }

/* ───────── AS OITO VEIAS · escudo de cada Sub-Clã ───────── */
.arc-veias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--linha-fraca); border: 1px solid var(--linha-bronze); }
@media(max-width:1000px){ .arc-veias { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:560px){ .arc-veias { grid-template-columns: 1fr; } }
.arc-veia { background: var(--preto-2); padding: 28px 26px 30px; min-width: 0; display: flex; flex-direction: column; gap: 14px;
  transition: background .25s ease; }
.arc-veia:hover { background: var(--preto-3); }
.arc-veia .vshield { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.arc-veia h4 { font-family: var(--voz-sagrada); font-weight: 700; font-size: 21px; letter-spacing: 0.02em; color: var(--bege); margin: 0; min-height: 2.1em; display: flex; align-items: flex-end; }
.arc-veia .v-desc { font-size: 15.5px; line-height: 1.5; color: var(--fg2); margin: 0; min-height: 4.5em; }
.arc-veia .v-pair { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linha-fraca); }
.arc-veia .v-line { display: flex; gap: 9px; align-items: baseline; font-size: 14.5px; line-height: 1.4; }
.arc-veia .v-line .vk { flex: none; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; width: 52px; white-space: nowrap; }
.arc-veia .v-line.vl-ouro .vk { color: var(--amarelo); }
.arc-veia .v-line.vl-ouro .vv { color: var(--fg1); }
.arc-veia .v-line.vl-queda .vk { color: var(--vermelho-sinal); }
.arc-veia .v-line.vl-queda .vv { color: rgba(232,220,196,0.66); }

/* ───────── ENTRE OS CLÃS · ressonâncias e atritos ───────── */
.arc-relacoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--linha-fraca); border: 1px solid var(--linha-bronze); }
@media(max-width:1000px){ .arc-relacoes { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:560px){ .arc-relacoes { grid-template-columns: 1fr; } }
/* variante de 2 colunas (blocos com mais texto, ex. Camada Corporal): 2 no desktop,
   1 no mobile. Substitui o override inline que travava 2 col em qualquer largura. */
.arc-relacoes.duo { grid-template-columns: repeat(2, 1fr); }
@media(max-width:620px){ .arc-relacoes.duo { grid-template-columns: 1fr; } }
.arc-rel { background: var(--preto-2); padding: 26px 24px 28px; min-width: 0; display: flex; flex-direction: column; gap: 13px; transition: background .25s ease; }
.arc-rel:hover { background: var(--preto-3); }
.arc-rel .rel-top { display: flex; align-items: center; gap: 15px; }
.arc-rel .rshield { width: 58px; height: 58px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.arc-rel .rname { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: 20px; line-height: 0.98; color: var(--bege); hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: keep-all; }
.arc-rel .rel-pill { align-self: flex-start; white-space: nowrap; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 11px; border: 1px solid var(--bronze); color: var(--bronze-claro); }
.arc-rel.resson .rel-pill { color: var(--amarelo); border-color: var(--amarelo-40); }
.arc-rel.cresc .rel-pill { color: var(--bronze-claro); border-color: var(--bronze-42); }
.arc-rel.atrito .rel-pill { color: var(--vermelho-sinal); border-color: rgba(230,57,70,0.4); }
.arc-rel p { font-size: 15px; line-height: 1.5; color: var(--fg2); margin: 0; }
.arc-rel .rel-flag { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha-fraca); font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.1em; color: var(--bronze); }
.arc-rel .rel-flag b { color: var(--bege); font-weight: 600; }
.arc-rel-leg { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 22px; font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.08em; }
.arc-rel-leg span { color: var(--fg3); }
.arc-rel-leg .lr { color: var(--amarelo); } .arc-rel-leg .lc { color: var(--bronze-claro); } .arc-rel-leg .la { color: var(--vermelho-sinal); }

/* ───────── ARQUÉTIPOS DA TORRE · figuras culturais ───────── */
.arc-disc { font-family: var(--voz-operacional); font-style: italic; font-size: 16px; line-height: 1.6;
  color: var(--fg3); max-width: 70ch; margin: 0 0 12px; padding-left: 18px; border-left: 1px solid var(--linha-bronze); }
/* rótulo de família dentro da seção de Arquétipos */
.arc-figrow-lbl { display: flex; align-items: center; gap: 16px; margin: 40px 0 18px;
  font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); }
.arc-figrow-lbl::after { content: ""; flex: 1; height: 1px; background: var(--linha-bronze); }
.arc-figrow-lbl .n { color: var(--amarelo); }
.arc-figrow-lbl.caido .n { color: var(--vermelho-sinal); }
.arc-figrow-lbl.geek .n { color: var(--bronze-claro); }
.arc-figrow-lbl.ficcao .n { color: var(--bronze-claro); }
.arc-figrow-lbl.empresario .n { color: var(--amarelo); }
/* variante Caído · a sombra do Ermitão */
.arc-fig.caido .fig-plate { background: radial-gradient(circle at 50% 38%, var(--brasa-16), transparent 70%), var(--preto-3); }
.arc-fig.caido .fig-plate::after { box-shadow: inset 0 -42px 36px -18px var(--preto-2), inset 0 0 62px rgba(120,0,0,0.34); }
.arc-fig.caido .fig-nome { color: rgba(232,220,196,0.82); }
.arc-fig.caido .fig-campo { color: var(--vermelho-sinal); }
.arc-fig.caido .fig-line { color: var(--fg3); }
/* variante Geek · ficção */
.arc-fig.geek .fig-campo { color: var(--bronze-claro); }
.arc-fig.ficcao .fig-campo { color: var(--bronze-claro); }
.arc-fig.empresario .fig-plate { background: radial-gradient(circle at 50% 38%, var(--amarelo-12), transparent 70%), var(--preto-3); }
.arc-fig.empresario .fig-campo { color: var(--amarelo); }

.arc-famosos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--linha-fraca); border: 1px solid var(--linha-bronze); }
@media(max-width:1000px){ .arc-famosos { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:520px){ .arc-famosos { grid-template-columns: 1fr; } }
.arc-fig { background: linear-gradient(180deg, var(--preto-2), var(--preto)); padding: 30px 26px 28px; min-width: 0;
  display: flex; flex-direction: column; gap: 14px; transition: background .25s ease; }
.arc-fig:hover { background: var(--preto-3); }
.arc-fig .fig-plate { width: 100%; aspect-ratio: 768 / 682; border: 1px solid var(--linha-bronze);
  background: radial-gradient(circle at 50% 38%, var(--amarelo-08), transparent 70%), var(--preto-3);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.arc-fig .fig-plate::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--linha-fraca); z-index: 2; pointer-events: none; }
.arc-fig .fig-plate::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 -42px 36px -18px var(--preto-2), inset 0 0 56px rgba(0,0,0,0.48); }
.arc-fig .fig-plate img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block;
  filter: saturate(0.9) contrast(1.06); transform: scale(1.01); transition: transform .7s cubic-bezier(0.2,0,0,1), filter .7s cubic-bezier(0.2,0,0,1); }
.arc-fig:hover .fig-plate img { filter: saturate(1) contrast(1.09); transform: scale(1.045); }
.arc-fig .fig-nome { font-family: var(--voz-sagrada); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; color: var(--bege); line-height: 1.1; }
.arc-fig .fig-campo { font-family: var(--voz-sagrada); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amarelo); }
.arc-fig .fig-line { font-family: var(--voz-operacional); font-style: italic; font-size: 15.5px; line-height: 1.5; color: var(--fg2); margin: 0; padding-top: 12px; border-top: 1px solid var(--linha-fraca); }

/* ───────── VILÕES ARCANOS · ficção como espelho da queda ───────── */
.arc-viloes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--linha-fraca); border: 1px solid rgba(230,57,70,0.34); }
@media(max-width:1000px){ .arc-viloes { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:560px){ .arc-viloes { grid-template-columns: 1fr; } }
.arc-vilao { background: radial-gradient(circle at 50% 0%, var(--brasa-16), transparent 52%), linear-gradient(180deg, var(--preto-2), var(--preto));
  padding: 22px 22px 30px; min-width: 0; min-height: 310px; display: flex; flex-direction: column; gap: 12px; border-top: 3px solid rgba(230,57,70,0.55);
  transition: background .25s ease, border-color .25s ease; }
.arc-vilao:hover { background: radial-gradient(circle at 50% 0%, rgba(230,57,70,0.18), transparent 58%), var(--preto-3); border-top-color: var(--vermelho-sinal); }
.vil-plate { width: 100%; aspect-ratio: 2 / 3; position: relative; overflow: hidden; margin-bottom: 4px;
  border: 1px solid rgba(230,57,70,0.42);
  background: radial-gradient(circle at 50% 34%, var(--brasa-16), transparent 68%), var(--preto-3); }
.vil-plate::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(230,57,70,0.22); z-index: 2; pointer-events: none; }
.vil-plate::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 -54px 44px -18px var(--preto-2), inset 0 0 72px rgba(120,0,0,0.32); }
.vil-plate img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; display: block;
  filter: saturate(0.86) contrast(1.08) grayscale(0.08); transform: scale(1.01); transition: filter .35s ease, transform .45s ease; }
.arc-vilao:hover .vil-plate img { filter: saturate(0.98) contrast(1.12) grayscale(0.03); transform: scale(1.045); }
.vil-kind { font-family: var(--voz-sagrada); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vermelho-sinal); }
.vil-nome { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(24px,2.7vw,31px); line-height: 0.95; color: rgba(232,220,196,0.88); }
.vil-nome.tight { font-size: clamp(22px,2.35vw,28px); }
.vil-obra { font-family: var(--voz-sagrada); font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--bronze); }
.arc-vilao p { margin: auto 0 0; padding-top: 14px; border-top: 1px solid rgba(230,57,70,0.2);
  font-family: var(--voz-operacional); font-style: italic; font-size: 15.5px; line-height: 1.5; color: var(--fg3); }

/* ───────── A MATILHA DA TORRE · galeria de monstros que atacam o Arcano ───────── */
.arc-matilha-intro { font-family: var(--voz-operacional); font-size: 18px; line-height: 1.7; color: var(--fg2);
  max-width: 64ch; margin: var(--bloco-mt) 0 30px; }
.arc-bestas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--linha-fraca); border: 1px solid var(--linha-bronze); }
@media(max-width:1000px){ .arc-bestas { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:560px){ .arc-bestas { grid-template-columns: 1fr; } }
.arc-besta { background: var(--preto-2); min-width: 0; display: flex; flex-direction: column;
  text-decoration: none; transition: background .25s ease; }
.arc-besta:hover { background: var(--preto-3); }
.bz-plate { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(circle at 50% 60%, var(--brasa-16), transparent 70%), var(--preto-3);
  border-bottom: 1px solid var(--linha-bronze); display: flex; align-items: center; justify-content: center; }
.bz-plate img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.04); }
.arc-besta:hover .bz-plate img { filter: grayscale(0) contrast(1.06); }
.bz-plate .bz-sigil { width: 56%; height: 56%; }
.bz-plate .bz-tag { position: absolute; top: 0; left: 0; font-family: var(--voz-sagrada); font-size: 10px;
  letter-spacing: 0.14em; padding: 5px 10px; background: rgba(15,13,7,0.82); color: var(--vermelho-sinal);
  border-right: 1px solid rgba(230,57,70,0.35); border-bottom: 1px solid rgba(230,57,70,0.35); }
.bz-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.bz-kind { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vermelho-sinal); }
.bz-nome { font-family: var(--voz-sagrada); font-weight: 700; font-size: 20px; letter-spacing: 0.01em; color: var(--bege); line-height: 1.05; }
.bz-line { font-family: var(--voz-operacional); font-size: 15px; line-height: 1.5; color: var(--fg2); margin: 0; }
.bz-link { margin-top: auto; padding-top: 12px; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 7px; }
.bz-link span { transition: transform .25s; }
.arc-besta:hover .bz-link { color: var(--amarelo); }
.arc-besta:hover .bz-link span { transform: translateX(3px); }
.bz-ninho { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); margin-top: auto; padding-top: 12px; opacity: 0.7; }

/* ───────── IA · o critério (reaproveita gdc-terreno) ───────── */
.arc-criterio { margin-top: 38px; border: 1px solid var(--linha-bronze); border-left: 1px solid var(--amarelo);
  background: var(--preto-2); padding: 30px 36px; }
.arc-criterio .cl { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); margin-bottom: 12px; }
.arc-criterio p { font-family: var(--voz-sagrada); font-size: clamp(20px,2.6vw,28px); line-height: 1.3; color: var(--bege); margin: 0; }
.arc-criterio p b { color: var(--amarelo); font-weight: 600; }

/* ───────── VOCÊ É UM ARCANO? · auto-reconhecimento ───────── */
.arc-recon { border: 1px solid var(--amarelo-40); background:
  radial-gradient(120% 80% at 50% 0%, var(--amarelo-05), transparent 60%), var(--preto-2);
  padding: clamp(30px, 4vw, 52px); }
.arc-recon .recon-head { margin-bottom: 18px; }
.arc-recon .recon-lbl { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--amarelo); margin-bottom: 8px; }
.arc-recon .recon-title { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(28px, 4vw, 46px); line-height: 0.95; color: var(--bege); margin: 0; }
.arc-recon .recon-intro { font-family: var(--voz-operacional); font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6; color: var(--fg2); max-width: 68ch; margin: 0 0 30px; }
.arc-recon .recon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--linha-fraca); border: 1px solid var(--linha-fraca); }
@media(max-width:860px){ .arc-recon .recon-grid { grid-template-columns: 1fr; } }
.arc-recon .recon-sinal { background: var(--preto); padding: 24px 24px; display: flex; gap: 16px; align-items: flex-start; }
.arc-recon .recon-sinal .rs-n { flex: none; font-family: var(--voz-monumental); font-size: 22px;
  letter-spacing: -0.02em; color: var(--bronze); line-height: 1; }
.arc-recon .recon-sinal p { font-size: 15.5px; line-height: 1.55; color: var(--fg2); margin: 0; }
.arc-recon .recon-sinal p b { color: var(--bege); font-weight: 600; }
.arc-recon .recon-fecho { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--amarelo-40); }
.arc-recon .recon-fecho p { font-family: var(--voz-sagrada); font-size: clamp(18px, 2.3vw, 24px);
  line-height: 1.45; color: var(--bege); margin: 0; }
.arc-recon .recon-fecho b.a { color: var(--amarelo); }
.arc-recon .recon-fecho b.v { color: var(--vermelho-sinal); }
.arc-recon .recon-cta { display: block; margin-top: 14px; font-family: var(--voz-operacional);
  font-style: italic; font-size: 16px; letter-spacing: normal; color: var(--bronze-claro); }

/* ───────── FRASE-PONTE · costura narrativa entre seções ───────── */
.sec-bridge { font-family: var(--voz-operacional); font-style: italic; font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5; color: var(--bronze-claro); text-align: center; max-width: 60ch; margin: 40px auto 0;
  padding-top: 28px; border-top: 1px solid var(--linha-fraca); }

/* ───────── O CHAMADO · CTA-clímax (New Bliss · torne-se Lendário) ───────── */
.cla-cta { position: relative; padding: clamp(70px, 9vw, 130px) 0; overflow: hidden;
  background: linear-gradient(180deg, var(--preto), var(--preto-2) 50%, var(--preto)); text-align: center; }
.cla-cta .cta-aura { position: absolute; top: 50%; left: 50%; width: min(120vw, 1100px); aspect-ratio: 2/1;
  transform: translate(-50%,-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse, var(--amarelo-12), var(--brasa-16) 42%, transparent 72%);
  filter: blur(60px); animation: claAura 8s ease-in-out infinite; }
.cla-cta .wrap { position: relative; z-index: 2; }
.cla-cta .cta-kicker { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--amarelo); margin-bottom: 26px; }
.cla-cta .cta-title { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em;
  line-height: 0.95; font-size: clamp(38px, 6.4vw, 84px); color: var(--bege); margin: 0 0 28px; }
.cla-cta .cta-title .a { color: var(--amarelo); text-shadow: 0 0 56px var(--amarelo-40); }
.cla-cta .cta-lede { font-family: var(--voz-operacional); font-size: clamp(18px, 2.2vw, 23px); line-height: 1.6;
  color: var(--fg2); max-width: 720px; margin: 0 auto 44px; }
.cla-cta .cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.cla-cta .cta-btn { font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 18px 38px; min-height: 56px; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--amarelo-40); color: var(--amarelo); transition: background .25s, color .25s, border-color .25s; }
.cla-cta .cta-btn:hover { border-color: var(--amarelo); background: var(--amarelo-08); }
.cla-cta .cta-btn.solid { background: var(--amarelo); color: var(--preto); border-color: var(--amarelo);
  box-shadow: 0 0 44px var(--amarelo-30); }
.cla-cta .cta-btn.solid:hover { background: var(--bege); border-color: var(--bege); }
.cla-cta .cta-note { margin-top: 30px; font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.04em;
  color: var(--bronze); font-style: italic; }

/* slot de retrato pendente · enquanto o artista não entrega */
.fig-todo { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); opacity: 0.5; text-align: center; padding: 12px; }
.arc-fig .fig-plate:has(.fig-todo), .arc-vilao .vil-plate:has(.fig-todo) { background: var(--preto-3); }