/* ============================================================
   FORJA LENDÁR[IA] · cultura-lendaria.css
   Componentes específicos da página "A Cultura Lendária".
   Construído sobre os tokens de tokens.css + forja.css.
   Canto reto, bordas hairline bronze, top-rule brasa→amarelo,
   superfícies preto-2/preto-3. Nunca clean/flat/SaaS.
   ============================================================ */

/* ---- MAPA DE LEITURA · índice dos capítulos ---- */
.cl-map { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--linha-bronze); }
.cl-map a {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 24px; min-height: 116px;
  border-right: 1px solid var(--linha-fraca);
  border-bottom: 1px solid var(--linha-fraca);
  text-decoration: none; transition: background 0.4s, transform 0.4s;
}
.cl-map a:hover { background: var(--preto-3); }
.cl-map .mn { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.26em; color: var(--bronze); }
.cl-map .mt { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: 21px; line-height: 0.98; color: var(--bege); }
.cl-map a:hover .mt { color: var(--amarelo); }
.cl-map .md { font-family: var(--voz-operacional); font-size: 14px; color: var(--fg3); line-height: 1.4; margin-top: auto; }

/* ---- MANIFESTO · linhas declarativas numeradas ---- */
.cl-decree { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 22px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--linha-bronze); }
.cl-decree:first-child { border-top: 0; }
.cl-decree .idx { font-family: var(--voz-sagrada); font-size: 22px; letter-spacing: 0.1em; color: var(--amarelo); }
.cl-decree .txt { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.98; font-size: clamp(22px, 3.2vw, 40px); color: var(--bege); }

/* ---- NORTE · painel-decreto + carta ---- */
.cl-norte { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; align-items: stretch; }
.cl-statement { background: linear-gradient(180deg, var(--preto-3), var(--preto-2)); border: 1px solid var(--linha-bronze); border-top: 2px solid var(--amarelo); padding: clamp(34px, 4vw, 56px); }
.cl-statement h3 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92; font-size: clamp(34px, 4.6vw, 62px); color: var(--bege); margin: 20px 0 0; }
.cl-statement h3 .am { color: var(--amarelo); }

/* ---- CARTA BASE (símbolos, pilares, valores, mantras, gente, decisão) ---- */
.cl-card { background: var(--preto-2); border: 1px solid var(--linha-fraca); border-top: 2px solid var(--brasa); padding: clamp(26px, 3vw, 38px); transition: background 0.4s, border-color 0.4s, transform 0.45s, box-shadow 0.45s; display: flex; flex-direction: column; }
.cl-card:hover { background: var(--preto-3); border-top-color: var(--amarelo); transform: translateY(-5px); box-shadow: 0 28px 70px rgba(0,0,0,0.6), 0 0 50px var(--amarelo-07); }
.cl-card .roman { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze); }
.cl-card h3 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.98; font-size: clamp(22px, 2.4vw, 30px); color: var(--bege); margin: 0; }
.cl-card h3.sagrada { font-family: var(--voz-sagrada); letter-spacing: 0.02em; text-transform: none; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08; }
.cl-card p { font-family: var(--voz-operacional); font-size: 16px; line-height: 1.62; color: var(--fg2); margin: 0; }

/* ---- SÍMBOLOS SAGRADOS ---- */
.cl-symbols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.cl-symbol { align-items: flex-start; gap: 0; }
.cl-symbol .glyph { display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; margin: 24px 0 28px; }
.cl-symbol .glyph svg { width: 100%; height: 100%; }
.cl-symbol h3 { margin-bottom: 16px; }
.cl-symbol.is-light { border-top-color: var(--amarelo); }

/* ---- COSMOLOGIA · dois ciclos espelhados ---- */
.cl-cosmos { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linha-bronze); }
.cl-cycle { padding: clamp(28px, 3.4vw, 48px); position: relative; }
.cl-cycle.is-shadow { background: linear-gradient(180deg, rgba(139,0,0,0.10), transparent 70%); }
.cl-cycle + .cl-cycle { border-left: 1px solid var(--linha-bronze); }
.cl-cycle .cycle-name { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.94; font-size: clamp(30px, 3.8vw, 50px); margin: 18px 0 28px; }
.cl-cycle .am { color: var(--amarelo); }
.cl-cycle .verm { color: var(--vermelho-sinal); }
.cl-loop { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.cl-node { border: 1px solid var(--linha-bronze); min-height: 78px; padding: 14px; display: flex; align-items: flex-end; font-family: var(--voz-sagrada); font-size: 17px; letter-spacing: 0.04em; color: var(--fg2); }
.cl-cycle:not(.is-shadow) .cl-node:nth-child(1),
.cl-cycle:not(.is-shadow) .cl-node:nth-child(4) { color: var(--amarelo); border-color: var(--amarelo-40); }
.cl-cycle.is-shadow .cl-node:nth-child(1),
.cl-cycle.is-shadow .cl-node:nth-child(4) { color: var(--vermelho-sinal); border-color: rgba(230,57,70,0.35); }

/* tabela espelhada Lendário × Medíocre */
.cl-mirror { margin-top: 24px; border: 1px solid var(--linha-bronze); }
.cl-mirror-row { display: grid; grid-template-columns: 1fr 1fr; }
.cl-mirror-row > div { padding: 15px 22px; border-top: 1px solid var(--linha-fraca); font-family: var(--voz-operacional); font-size: 16px; line-height: 1.4; color: var(--fg2); }
.cl-mirror-row > div:last-child { border-left: 1px solid var(--linha-bronze); color: var(--fg3); }
.cl-mirror-row.head > div { border-top: 0; font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; padding-block: 18px; }
.cl-mirror-row.head > div:first-child { color: var(--amarelo); }
.cl-mirror-row.head > div:last-child { color: var(--vermelho-sinal); }

/* ---- PILARES · 3 colunas ---- */
.cl-pillars { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.cl-pillars .cl-card { border-top-color: var(--amarelo); }
.cl-pillars .tag { color: var(--amarelo); margin-bottom: 22px; align-self: flex-start; }
.cl-pillars h3 { margin-bottom: 16px; min-height: 2.1em; }
.cl-pillars .counter { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linha-fraca); font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze); }

/* ---- VALORES · 9 cartas com ferramenta ---- */
.cl-values { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.cl-value { min-height: 256px; }
.cl-value .vnum { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.24em; color: var(--bronze); margin-bottom: 16px; }
.cl-value h3 { margin-bottom: 14px; }
.cl-value .tool { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linha-fraca); display: flex; align-items: center; gap: 10px; font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amarelo); }
.cl-value .tool::before { content: ""; width: 7px; height: 7px; background: var(--amarelo); transform: rotate(45deg); flex: none; }

/* ---- MANTRAS · 8 cartas com numeral romano ---- */
.cl-mantras { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--linha-bronze); }
.cl-mantra { padding: 28px 24px; border-right: 1px solid var(--linha-fraca); border-bottom: 1px solid var(--linha-fraca); display: flex; flex-direction: column; gap: 16px; min-height: 230px; transition: background 0.4s; }
.cl-mantra:hover { background: var(--preto-3); }
.cl-mantra .rm { font-family: var(--voz-monumental); font-size: 46px; line-height: 0.8; color: var(--amarelo); }
.cl-mantra h4 { font-family: var(--voz-sagrada); font-size: 19px; line-height: 1.12; letter-spacing: 0.02em; color: var(--bege); margin: 0; }
.cl-mantra p { font-family: var(--voz-operacional); font-size: 14.5px; line-height: 1.5; color: var(--fg3); margin: 0; }

/* ---- MANDAMENTOS · muralha 5×2 ---- */
.cl-wall { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.cl-tablet { background: var(--preto-2); border: 1px solid var(--linha-fraca); min-height: 184px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; transition: background 0.4s, border-color 0.4s, transform 0.4s; }
.cl-tablet:hover { background: var(--preto-3); border-color: var(--linha-bronze); transform: translateY(-4px); }
.cl-tablet .n { font-family: var(--voz-monumental); font-size: 40px; line-height: 0.8; color: var(--bronze); }
.cl-tablet:hover .n { color: var(--amarelo); }
.cl-tablet .t { font-family: var(--voz-sagrada); font-size: 16px; line-height: 1.16; letter-spacing: 0.02em; color: var(--bege); }

/* ---- GENTE · 3 cartas (retrato / glifo) ---- */
.cl-people { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.cl-person { padding: 0; overflow: hidden; }
.cl-person .media { position: relative; aspect-ratio: 4/3; border-bottom: 1px solid var(--linha-bronze); overflow: hidden; background: var(--preto-3); }
.cl-person .media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) sepia(0.28) saturate(1.05) contrast(1.05) brightness(0.78); }
.cl-person .media.glyph { display: flex; align-items: center; justify-content: center; }
.cl-person .media.glyph svg { width: 84px; height: 84px; }
.cl-person .media.is-shadow { background: linear-gradient(160deg, rgba(139,0,0,0.22), var(--preto)); }
.cl-person .body { padding: 28px; }
.cl-person .tag { margin-bottom: 16px; display: inline-block; }
.cl-person h3 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: 25px; line-height: 1; color: var(--bege); margin: 0 0 14px; }
.cl-person p { font-family: var(--voz-operacional); font-size: 16px; line-height: 1.6; color: var(--fg2); margin: 0; }

/* ---- EXECUÇÃO · lista numerada ---- */
.cl-exec { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 22px; align-items: start; }
.cl-ladder { border: 1px solid var(--linha-bronze); }
.cl-rung { display: grid; grid-template-columns: 62px minmax(0,1fr); border-top: 1px solid var(--linha-fraca); min-height: 62px; transition: background 0.4s; }
.cl-rung:first-child { border-top: 0; }
.cl-rung:hover { background: var(--preto-3); }
.cl-rung .n { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--linha-bronze); font-family: var(--voz-sagrada); font-size: 17px; color: var(--amarelo); }
.cl-rung .t { display: flex; align-items: center; padding: 14px 20px; font-family: var(--voz-operacional); font-size: 17px; line-height: 1.4; color: var(--fg1); }

/* ---- DECISÃO · 4 frameworks Q→A ---- */
.cl-frameworks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.cl-fw .q { font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.cl-fw .q::before { content: ""; width: 28px; height: 1px; background: var(--bronze); flex: none; }
.cl-fw h3 { margin-bottom: 14px; }
.cl-fw h3 .am { color: var(--amarelo); }

/* ---- RESPONSIVO ---- */
@media (max-width: 980px) {
  .cl-map { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cl-norte, .cl-cosmos, .cl-exec { grid-template-columns: 1fr; }
  .cl-cycle + .cl-cycle { border-left: 0; border-top: 1px solid var(--linha-bronze); }
  .cl-symbols, .cl-pillars, .cl-values, .cl-people, .cl-frameworks { grid-template-columns: 1fr; }
  .cl-mantras { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cl-wall { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .cl-map { grid-template-columns: 1fr; }
  .cl-mantras { grid-template-columns: 1fr; }
  .cl-wall { grid-template-columns: 1fr; }
  .cl-decree { grid-template-columns: 48px minmax(0,1fr); gap: 16px; }
  .cl-mirror-row, .cl-mirror-row.head { grid-template-columns: 1fr 1fr; }
}