/* ============================================================ FORJA LENDÁR[IA] · clas.css (vive em css/) CSS por-página dos 9 Pergaminhos de Clã. Namespace gdc- · só atua dentro de .gdc. Linkado direto no , após forja.css. Reusa o hero, as abas e a tríade já definidos em components.css; aqui moram só os blocos novos do template de Clã. Token-only. ============================================================ */ /* ════════════════════════════════════════════════════════════════ HERO DO CLÃ (redesign) · cla-hero Conceito: o espaço interno do Clã. No Arcano, a caverna que se recolhe (Sombra/Ermitão) e a biblioteca que se abre (Luz/Sábio). Escudo central monumental + eixo de tensão Sombra↔Luz. A cor da Natureza (--nat) tinge a aura. Token-only. ════════════════════════════════════════════════════════════════ */ .cla-hero { position: relative; min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 132px 24px 84px; overflow: hidden; } /* aura da Natureza · respiração lenta atrás do escudo */ .cla-hero .cla-hero-aura { position: absolute; top: 38%; left: 50%; width: min(86vw, 880px); aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, var(--nat, var(--bronze)) 0%, transparent 60%); opacity: 0.16; filter: blur(60px); animation: claAura 9s ease-in-out infinite; } @keyframes claAura { 0%,100%{ opacity:.13; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:.2; transform:translate(-50%,-50%) scale(1.06);} } /* glifo gigante fantasma ao fundo (sigilo da natureza) */ .cla-hero .cla-hero-glyph { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04; background: radial-gradient(circle at 50% 42%, var(--bege), transparent 26%); } .cla-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 920px; } .cla-hero-kicker { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--bronze); margin-bottom: 30px; } /* escudo central · âncora monumental */ .cla-hero-crest { position: relative; width: clamp(180px, 24vw, 252px); aspect-ratio: 1; margin-bottom: 18px; display: grid; place-items: center; } .cla-hero-crest img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 54px rgba(0,0,0,0.66)); } .cla-hero-crest .cla-crest-halo { position: absolute; width: 116%; aspect-ratio: 1; border-radius: 50%; z-index: 1; background: radial-gradient(circle, var(--amarelo-12), transparent 64%); animation: claAura 7s ease-in-out infinite; } .cla-hero-name { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; font-size: clamp(52px, 9vw, 104px); color: var(--bege); margin: 4px 0 18px; overflow-wrap: anywhere; } .cla-hero-name .a { color: var(--amarelo); text-shadow: 0 0 48px var(--amarelo-35); } .cla-hero-epiteto { font-family: var(--voz-sagrada); font-style: italic; font-size: clamp(15px, 2vw, 20px); letter-spacing: 0.04em; color: var(--bronze-claro); max-width: 640px; } /* eixo de tensão · Sombra (caverna) ↔ Luz (biblioteca) */ .cla-hero-axis { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 3vw, 36px); width: 100%; max-width: 760px; margin: 42px 0 0; } .cla-hero-axis .ax-pole { display: flex; flex-direction: column; gap: 6px; } .cla-hero-axis .ax-pole.sombra { text-align: right; } .cla-hero-axis .ax-pole.luz { text-align: left; } .cla-hero-axis .ax-k { font-family: var(--voz-sagrada); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; } .cla-hero-axis .ax-pole.sombra .ax-k { color: var(--cinzas); } .cla-hero-axis .ax-pole.luz .ax-k { color: var(--bronze); } .cla-hero-axis .ax-v { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(22px, 3.2vw, 34px); line-height: 1; } .cla-hero-axis .ax-pole.sombra .ax-v { color: var(--vermelho-sinal); text-shadow: 0 0 32px rgba(230,57,70,0.28); } .cla-hero-axis .ax-pole.luz .ax-v { color: var(--amarelo); text-shadow: 0 0 32px var(--amarelo-30); } .cla-hero-axis .ax-mid { display: flex; align-items: center; gap: 6px; } .cla-hero-axis .ax-line { width: clamp(22px, 4vw, 52px); height: 1px; background: linear-gradient(90deg, rgba(230,57,70,0.5), var(--amarelo-50)); } .cla-hero-axis .ax-dot { width: 7px; height: 7px; transform: rotate(45deg); background: var(--bronze); box-shadow: 0 0 12px var(--amarelo-40); } .cla-hero-fala { margin-top: 40px; font-family: var(--voz-operacional); font-style: italic; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.5; color: var(--fg2); max-width: 600px; padding-top: 26px; border-top: 1px solid var(--linha-bronze); } .cla-hero-scroll { position: relative; z-index: 2; margin-top: 54px; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); display: flex; flex-direction: column; align-items: center; gap: 9px; } .cla-hero-scroll svg { stroke: var(--bronze-claro); } @media (max-width: 640px) { .cla-hero { min-height: auto; padding: 110px 20px 64px; } .cla-hero-axis { grid-template-columns: 1fr; gap: 18px; } .cla-hero-axis .ax-pole.sombra, .cla-hero-axis .ax-pole.luz { text-align: center; } .cla-hero-axis .ax-mid { transform: rotate(90deg); justify-self: center; } } /* ── régua de cor da NATUREZA · cada página declara nat-* no body ─ --nat = cor cheia · --nat-12 / --nat-22 = véus translúcidos. Elemento NÃO entra aqui (é monocromático: forma + amarelo/bronze). */ .nat-instintiva { --nat: var(--nat-instintiva); --nat-veil: var(--nat-instintiva-12); --nat-edge: var(--nat-instintiva-22); } .nat-emocional { --nat: var(--nat-emocional); --nat-veil: var(--nat-emocional-12); --nat-edge: var(--nat-emocional-22); } .nat-intelectual, .nat-mental { --nat: var(--nat-intelectual); --nat-veil: var(--nat-intelectual-12); --nat-edge: var(--nat-intelectual-22); } /* banda de Natureza no topo do hero · atmosfera, não bloco chapado */ .gdc .gdc-hero { position: relative; } .gdc .gdc-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 62%; background: linear-gradient(180deg, var(--nat-veil), transparent 88%); pointer-events: none; z-index: 0; } .gdc .gdc-hero .gdc-classif { color: var(--bege); } .gdc .gdc-hero .gdc-classif::before { background: var(--nat, var(--amarelo)); width: 40px; } .gdc .gdc-hero .gdc-num { color: var(--nat); filter: brightness(1.5); } /* ── hero · ajuste de proporção (override do gdc-hero genérico) ─ */ .gdc.gdc .gdc-hero { min-height: auto; padding: 120px var(--codex-pad) 70px; } .gdc.gdc .gdc-hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; max-width: var(--codex-max); margin-inline: auto; } .gdc .gdc-hero-text { min-width: 0; } .gdc .gdc-hero h1, .gdc .gdc-epiteto, .gdc .gdc-fala, .gdc .gdc-classif { overflow-wrap: anywhere; } .gdc .gdc-fala { max-width: 100%; } @media (max-width: 1024px) { .gdc.gdc .gdc-hero-inner { grid-template-columns: 1fr; gap: 44px; } } /* ── hero · escudo neutro (estados Luz/Sombra vivem nas guias) ─ frame = caixa quadrada que CONTÉM o escudo centralizado · tag no topo, cap no rodapé (absolutos, não empurram), escudo centralizado e contido. */ .gdc .gdc-art { flex-direction: column; gap: 0; } .gdc .gdc-art .gdc-frame { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; border: 1px solid var(--linha-bronze); background: radial-gradient(120% 120% at 50% 38%, var(--preto-3), var(--preto) 72%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .gdc .gdc-art .gdc-frame::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--linha-fraca); pointer-events: none; } .gdc .gdc-frame .gdc-tag { position: absolute; top: 16px; left: 0; right: 0; z-index: 3; text-align: center; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); } .gdc .gdc-frame .gdc-halo { position: absolute; width: 74%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } .gdc-shield { position: relative; display: block; width: 66%; height: 66%; object-fit: contain; z-index: 2; filter: drop-shadow(0 14px 46px rgba(0,0,0,0.6)); } .gdc .gdc-frame .gdc-cap { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 3; text-align: center; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); } /* ── III/IV · seção de estado (escudo Luz/Sombra ao lado do corpo) ─ */ .gdc-estado { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 54px; align-items: center; } .gdc-estado .gdc-estado-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; } .gdc-estado .gdc-estado-art img { position: relative; z-index: 2; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 16px 50px rgba(0,0,0,0.6)); } .gdc-estado .gdc-estado-halo { position: absolute; top: 46%; left: 50%; width: 78%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); z-index: 1; } .gdc-estado .gdc-estado-art.luz .gdc-estado-halo { background: radial-gradient(circle, var(--amarelo-12), transparent 66%); } .gdc-estado .gdc-estado-art.sombra .gdc-estado-halo { background: radial-gradient(circle, var(--brasa-14), transparent 64%); } .gdc-estado .gdc-estado-cap { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; } .gdc-estado .gdc-estado-art.luz .gdc-estado-cap { color: var(--bronze); } .gdc-estado .gdc-estado-art.sombra .gdc-estado-cap { color: var(--cinzas); } .gdc-estado .gdc-estado-body .sec-head { margin-bottom: 22px; } @media (max-width: 1024px) { .gdc-estado { grid-template-columns: 1fr; gap: 30px; } .gdc-estado.sombra { display: grid; } .gdc-estado .gdc-estado-art { order: -1; } } .gdc-scroll-hint { margin-top: 54px; text-align: center; font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); display: flex; flex-direction: column; align-items: center; gap: 10px; } .gdc-scroll-hint svg { stroke: var(--bronze-claro); } /* ── prosa · realces de Luz e Sombra ─────────────────────────── */ .gdc .prosa .nome { color: var(--bege); font-style: normal; } .gdc .prosa .s { color: var(--vermelho-sinal); font-style: normal; } .gdc-pull { font-family: var(--voz-operacional); font-style: italic; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.4; color: var(--bege); text-wrap: pretty; margin-top: 26px; } .gdc-pull .am { color: var(--amarelo); font-style: normal; } .gdc .a { color: var(--amarelo); } .gdc .s { color: var(--vermelho-sinal); } /* ── I · como não se confundir ───────────────────────────────── */ .gdc-confusao { display: grid; gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .gdc-confusao .cf-row { background: var(--preto-2); padding: 20px 26px; display: grid; grid-template-columns: 160px 1fr; gap: 6px 24px; align-items: baseline; } .gdc-confusao .cf-cla { font-family: var(--voz-sagrada); font-size: 18px; letter-spacing: 0.02em; color: var(--bege); } .gdc-confusao .cf-q { font-family: var(--voz-operacional); font-style: italic; font-size: 16px; color: var(--bronze-claro); } .gdc-confusao .cf-sinal { grid-column: 2; font-size: 15px; color: var(--fg2); line-height: 1.55; } .gdc-confusao-note { margin-top: 26px; font-size: 17px; color: var(--fg2); line-height: 1.6; max-width: 700px; } /* ── II · impureza + espelho falso ───────────────────────────── */ .gdc-impureza { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .gdc-impureza .imp-card { background: var(--preto-2); padding: 30px 30px; } .gdc-impureza .imp-k { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze); margin-bottom: 12px; } .gdc-impureza .imp-t { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(20px, 2.4vw, 26px); color: var(--bege); margin-bottom: 16px; } .gdc-impureza .imp-card.falso .imp-t { color: var(--vermelho-sinal); } .gdc-impureza p { font-size: 16.5px; line-height: 1.62; color: var(--fg2); } /* ── III · estados de fogo ───────────────────────────────────── */ .gdc-fogos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .gdc-fogos .fg-card { background: var(--preto-2); padding: 28px 26px; } .gdc-fogos .fg-k { font-family: var(--voz-sagrada); font-size: 16px; letter-spacing: 0.04em; margin-bottom: 14px; color: var(--cinzas); } .gdc-fogos .fg-card.apagado .fg-k { color: var(--cinzas); } .gdc-fogos .fg-card.instavel .fg-k { color: var(--bronze-claro); } .gdc-fogos .fg-card.aceso .fg-k { color: var(--amarelo); } .gdc-fogos .fg-card.aceso { background: linear-gradient(165deg, var(--amarelo-05), var(--preto-2)); } .gdc-fogos p { font-size: 16px; line-height: 1.6; color: var(--fg2); } /* ── IV · graus da queda + transmutação ──────────────────────── */ .gdc-graus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .gdc-graus .gr-step { background: var(--preto-2); padding: 26px 24px; } .gdc-graus .gr-n { font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.08em; color: var(--vermelho-sinal); margin-bottom: 12px; } .gdc-graus p { font-size: 16px; line-height: 1.6; color: var(--fg2); } .gdc-transmuta { margin-top: 26px; border: 1px solid var(--linha-bronze); background: var(--preto-2); padding: 28px 30px; } .gdc-transmuta .tr-k { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 14px; } .gdc-transmuta p { font-size: 17px; line-height: 1.66; color: var(--bege); } /* ── V · os três Elementos ───────────────────────────────────── */ .gdc-elementos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .gdc-elementos .el-card { border: 1px solid var(--linha-bronze); background: var(--preto-2); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; } .gdc-elementos .el-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linha-fraca); } .gdc-elementos .el-nome { font-family: var(--voz-monumental); text-transform: uppercase; font-size: 24px; letter-spacing: -0.01em; color: var(--bege); } .gdc-elementos .el-inst { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); } .gdc-elementos .el-sub { font-family: var(--voz-sagrada); font-size: 16px; letter-spacing: 0.02em; color: var(--amarelo); } .gdc-elementos p { font-size: 15.5px; line-height: 1.6; color: var(--fg2); } .gdc-elementos .el-frase { margin-top: auto; font-family: var(--voz-operacional); font-style: italic; font-size: 16px; color: var(--bronze-claro); line-height: 1.45; padding-top: 14px; border-top: 1px solid var(--linha-fraca); } /* ── hero · polos Luz/Sombra ─────────────────────────────────── */ .gdc-hero-poles { display: flex; gap: 14px; margin-top: 24px; } .gdc-hero-poles .hp { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--linha-fraca); padding: 10px 18px; min-width: 120px; } .gdc-hero-poles .hp-k { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); } .gdc-hero-poles .hp.luz .hp-v { font-family: var(--voz-sagrada); font-size: 17px; color: var(--amarelo); } .gdc-hero-poles .hp.sombra .hp-v { font-family: var(--voz-sagrada); font-size: 17px; color: var(--vermelho-sinal); } .gdc-hero-poles .hp.luz { border-left: 1px solid var(--amarelo-40); } .gdc-hero-poles .hp.sombra { border-left: 1px solid rgba(230,57,70,0.4); } @media (max-width: 1024px) { .gdc-hero-poles { justify-content: center; } } /* ── II · polaridades do Clã ─────────────────────────────────── */ .gdc-polar { display: grid; gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .gdc-polar .pol-row { background: var(--preto-2); display: grid; grid-template-columns: 150px 1fr 1fr; gap: 18px; padding: 16px 24px; align-items: baseline; } .gdc-polar .pol-eixo { font-family: var(--voz-sagrada); font-size: 14px; letter-spacing: 0.04em; color: var(--bege); } .gdc-polar .pol-imp { font-size: 14.5px; color: var(--vermelho-sinal); } .gdc-polar .pol-imp::before { content: "Impureza · "; color: var(--cinzas); font-style: italic; } .gdc-polar .pol-ouro { font-size: 14.5px; color: var(--bronze-claro); } .gdc-polar .pol-ouro::before { content: "Ouro · "; color: var(--cinzas); font-style: italic; } /* ── IV · sob estresse / em crescimento ──────────────────────── */ .gdc-mov { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .gdc-mov .mov-card { background: var(--preto-2); padding: 26px 26px; } .gdc-mov .mov-k { font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.04em; margin-bottom: 12px; } .gdc-mov .estresse .mov-k { color: var(--vermelho-sinal); } .gdc-mov .cresce .mov-k { color: var(--amarelo); } .gdc-mov p { font-size: 15.5px; line-height: 1.6; color: var(--fg2); } /* ── V · ícone e ficha do Elemento ───────────────────────────── */ .gdc-elementos .el-ico { color: var(--bronze-claro); display: inline-flex; } .gdc-elementos .el-ico svg { width: 26px; height: 26px; } .gdc-elementos .el-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gdc-elementos .el-head .el-inst { margin-left: auto; } .gdc-elementos .el-fic { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; padding: 14px 0; border-top: 1px solid var(--linha-fraca); border-bottom: 1px solid var(--linha-fraca); } .gdc-elementos .el-fic > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; } .gdc-elementos .el-fic dt { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); } .gdc-elementos .el-fic dd { margin: 0; font-size: 14px; color: var(--fg2); } .gdc-el-note { margin-top: 26px; font-family: var(--voz-operacional); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--bronze-claro); max-width: 760px; } /* ── VI · oito inclinações ───────────────────────────────────── */ .gdc-incl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .gdc-incl .in { background: var(--preto-2); padding: 18px 24px; display: grid; grid-template-columns: 200px 1fr; gap: 4px 18px; align-items: baseline; } .gdc-incl .in-n { font-family: var(--voz-sagrada); font-size: 16px; letter-spacing: 0.02em; color: var(--bege); } .gdc-incl .in-o { font-size: 14.5px; color: var(--amarelo); } .gdc-incl .in-q { grid-column: 2; font-size: 13.5px; color: var(--cinzas); font-style: italic; } /* ── VI · profissões ─────────────────────────────────────────── */ .gdc-prof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .gdc-prof .pf { background: var(--preto-2); padding: 24px 26px; } .gdc-prof .pf-k { font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.03em; color: var(--amarelo); margin-bottom: 10px; } .gdc-prof p { font-size: 15px; line-height: 1.6; color: var(--fg2); } .gdc-prof-note { margin-top: 26px; font-size: 17px; line-height: 1.6; color: var(--bege); max-width: 720px; } .gdc-prof-note .am { color: var(--amarelo); } /* ── VI · entre os clãs (com escudo do outro clã) ────────────── */ .gdc-entre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .gdc-entre .en-card { border: 1px solid var(--linha-bronze); background: var(--preto-2); padding: 24px 24px; } .gdc-entre .en-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linha-fraca); } .gdc-entre .en-head img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5)); } .gdc-entre .en-cla { font-family: var(--voz-monumental); text-transform: uppercase; font-size: 21px; letter-spacing: -0.01em; color: var(--bege); } .gdc-entre p { font-size: 15px; line-height: 1.62; color: var(--fg2); } .gdc-entre .en-q { color: var(--bronze-claro); font-style: italic; } /* ── VII · protocolos + frases ───────────────────────────────── */ .gdc-proto { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .gdc-proto .pr-card { border: 1px solid var(--linha-bronze); background: var(--preto-2); padding: 26px 28px; } .gdc-proto .pr-k { font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 16px; } .gdc-proto ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; } .gdc-proto li { font-size: 15px; line-height: 1.5; color: var(--fg2); } .gdc-proto li::marker { color: var(--bronze); font-family: var(--voz-sagrada); } .gdc-frases { margin-top: 22px; border-left: 1px solid var(--amarelo-40); background: linear-gradient(90deg, var(--amarelo-05), transparent 80%); padding: 22px 28px; } .gdc-frases .fr-k { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); margin-bottom: 14px; } .gdc-frases ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .gdc-frases li { font-family: var(--voz-operacional); font-style: italic; font-size: 18px; color: var(--bege); line-height: 1.4; } /* ── VII · Lendários do Clã ──────────────────────────────────── */ .gdc-lendarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .gdc-lendarios .ld { background: var(--preto-2); padding: 22px 22px; display: flex; flex-direction: column; gap: 8px; } .gdc-lendarios .ld-n { font-family: var(--voz-sagrada); font-size: 16px; letter-spacing: 0.02em; color: var(--bege); } .gdc-lendarios .ld-d { font-size: 13.5px; line-height: 1.5; color: var(--bronze-claro); font-style: italic; } .gdc-lendarios-note { margin-top: 22px; font-size: 14px; color: var(--cinzas); font-style: italic; max-width: 680px; } /* ── VI · vida prática ───────────────────────────────────────── */ .gdc-vida { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .gdc-vida .vd-block { background: var(--preto-2); padding: 26px 24px; } .gdc-vida .vd-k { font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.06em; color: var(--bege); margin-bottom: 12px; } .gdc-vida p { font-size: 15.5px; line-height: 1.6; color: var(--fg2); } /* ── VI · era digital e IA ───────────────────────────────────── */ .gdc-ia { border: 1px solid var(--linha-bronze); background: var(--preto-2); padding: 38px 38px; } .gdc-criterio { margin: 8px 0; font-family: var(--voz-operacional); font-style: italic; font-size: 19px; line-height: 1.5; } .gdc-criterio .am { color: var(--amarelo); font-style: normal; } /* ── VI · síntese · pull-quote de fecho ──────────────────────── */ .gdc-sintese { text-align: center; max-width: 900px; margin: 0 auto; } .gdc-sintese .sn-mark { font-family: var(--voz-sagrada); font-size: 56px; color: var(--bronze); line-height: 0.4; margin-bottom: 26px; } .gdc-sintese .sn-line { font-family: var(--voz-operacional); font-style: italic; font-size: clamp(22px, 3vw, 33px); line-height: 1.4; color: var(--bege); text-wrap: pretty; } .gdc-sintese .sn-line .am { color: var(--amarelo); font-style: normal; } .gdc-sintese .sn-fecho { margin-top: 22px; font-size: 17px; line-height: 1.65; color: var(--fg2); max-width: 680px; margin-inline: auto; } /* ── responsivo ──────────────────────────────────────────────── */ @media (max-width: 920px) { .gdc-impureza, .gdc-fogos, .gdc-graus, .gdc-elementos, .gdc-incl, .gdc-vida, .gdc-mov, .gdc-prof, .gdc-entre, .gdc-proto, .gdc-lendarios { grid-template-columns: 1fr; } .gdc-confusao .cf-row { grid-template-columns: 1fr; } .gdc-confusao .cf-sinal, .gdc-incl .in-q { grid-column: 1; } .gdc-polar .pol-row { grid-template-columns: 1fr; gap: 6px; } } @media (max-width: 620px) { .gdc-lendarios { grid-template-columns: 1fr 1fr; } .gdc-hero-poles { flex-direction: column; align-items: stretch; } .gdc-hero-poles .hp { min-height: 44px; } } /* ── glows decorativos não podem exceder a viewport ───────────── */ .gdc .gdc-glow, .gdc .gdc-forja-glow { max-width: 100vw; } /* ── contenção dura no mobile · nada ultrapassa a viewport ────── */ @media (max-width: 560px) { .gdc .gdc-art .gdc-frame { max-width: min(100%, 340px); } .gdc-states-toggle { width: 100%; max-width: 340px; } .gdc-states-toggle button { flex: 1; padding-inline: 8px; } .gdc .gdc-classif { letter-spacing: 0.18em; flex-wrap: wrap; } .gdc .gdc-classif::before { display: none; } .gdc .gdc-epiteto { overflow-wrap: anywhere; } .gdc.gdc .gdc-hero h1 { font-size: clamp(40px, 13vw, 60px); } .cla-hero-name { font-size: clamp(38px, 12vw, 60px); } .gdc.gdc .gdc-hero { padding-block: 104px 54px; } .gdc .gdc-frame .gdc-tag, .gdc .gdc-frame .gdc-cap { letter-spacing: 0.16em; } } @media (hover: none) { .arc-fig:hover .fig-plate img, .arc-vilao:hover .vil-plate img, .arc-besta:hover .bz-plate img, .esc-clan:hover img, .gdc-tipo:hover, .gdc-caminho:hover { transform: none; } } /* comprimento de linha legível nas intros das páginas de Clã (escopo .gdc para não afetar outras superfícies): sem max-width, .sec-intro chegava a ~118ch. */ .gdc .sec-intro { max-width: 810px; } /* utilitários de espaçamento de bloco (substituem os style= inline; valor via token). */ .gdc .mt-bloco { margin-top: var(--bloco-mt); } .gdc .mt-bloco-sm { margin-top: var(--bloco-mt-sm); } .gdc .mb-bloco { margin-bottom: var(--bloco-mb); } .gdc .label-centro { justify-content: center; margin-bottom: 26px; } /* frase de confissão em 1ª pessoa (mentira nuclear): voz operacional, tom de sombra. */ .gdc .gs-frase { font-family: var(--voz-operacional); font-size: 17px; line-height: 1.7; color: var(--vermelho-sinal); font-style: italic; margin: 0; }