/* ════════════════════════════════════════════════════════════════════
   FORJA · ANÁLISE DE PÚBLICO  (dossiê interno · não-listado no menu)
   Componentes específicos da página, erguidos sobre os tokens-mãe.
   Carregar depois de colors_and_type.css + forja.css.
   ════════════════════════════════════════════════════════════════════ */

/* dossiê interno · sem menu superior (mantém só o rodapé compartilhado) */
.rail, .rail-mobile { display: none !important; }

/* ── hero / cabeçalho do dossiê ── */
.ap-head { padding: 168px 0 64px; position: relative; }
.ap-head .forge-glow {
  position: absolute; top: 56%; left: 28%; width: 600px; height: 460px;
  transform: translate(-50%,-50%); z-index: 0; filter: blur(56px);
  background: radial-gradient(circle, var(--amarelo-12), rgba(139,0,0,0.05) 46%, transparent 70%);
  animation: breathe 7s ease-in-out infinite;
}
.ap-head > * { position: relative; z-index: 1; }
.ap-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: 22px;
}
.ap-kick::before { content: ""; width: 44px; height: 1px; background: var(--amarelo); }
.ap-title {
  font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(46px, 9.2vw, 112px); line-height: 0.9; color: var(--bege); margin-bottom: 26px;
}
.ap-title .am { color: var(--amarelo); text-shadow: 0 0 44px var(--amarelo-35); }
.ap-stand { font-size: 21px; color: var(--fg2); max-width: 62ch; line-height: 1.62; }
.ap-stand b { color: var(--bege); font-weight: 500; }
.ap-runline {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bronze);
}
.ap-runline span { display: inline-flex; align-items: center; gap: 9px; }
.ap-runline span::before { content: "·"; color: var(--amarelo); }
.ap-runline span:first-child::before { display: none; }

/* ── faixa de estatística (statbar elevado) ── */
.ap-strip {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--linha-fraca); border: 1px solid var(--linha-bronze);
}
.ap-stat { background: var(--preto-2); padding: 28px 24px; position: relative; }
.ap-stat .v { font-family: var(--voz-monumental); font-size: 42px; line-height: 1; color: var(--amarelo); letter-spacing: -0.02em; }
.ap-stat .v small { font-size: 21px; color: var(--bronze-claro); }
.ap-stat .l {
  font-family: var(--voz-sagrada); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze); margin-top: 13px; line-height: 1.55;
}
.ap-stat.warn .v { color: var(--vermelho-sinal); }

/* ── carta de gráfico (moldura dupla canônica) ── */
.fcard { position: relative; background: var(--preto-2); border: 1px solid var(--linha-bronze); padding: 28px 30px; }
.fcard::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--linha-fraca); pointer-events: none; }
.fcard > * { position: relative; }
.fcard .ct { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); margin-bottom: 18px; }
.chartbox { position: relative; height: 264px; }
.chartbox.sm { height: 212px; }
.gloss { font-style: italic; font-size: 14.5px; color: var(--fg3); margin-top: 16px; line-height: 1.58; }
.gloss b { color: var(--bege); font-style: normal; font-weight: 500; }
.gloss .am { color: var(--amarelo); font-style: normal; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.wide-narrow { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; }

/* ── os quatro perfis · cartas tarô ── */
.seg-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.seg {
  position: relative; background: linear-gradient(160deg, var(--preto-2), var(--preto));
  border: 1px solid var(--linha-bronze); padding: 34px 30px 30px;
  transition: transform 0.45s cubic-bezier(0.2,0,0,1), border-color 0.3s ease-out, box-shadow 0.45s cubic-bezier(0.2,0,0,1);
}
.seg::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--linha-fraca); pointer-events: none; transition: border-color 0.3s ease-out; }
.seg:hover { transform: translateY(-12px) rotate(-1.2deg); border-color: var(--amarelo); background: linear-gradient(160deg, var(--preto-3), var(--preto-2)); box-shadow: 0 28px 70px rgba(0,0,0,0.7), 0 0 50px var(--amarelo-08); }
.seg:hover::before { border-color: var(--amarelo-40); }
.seg .ptag { font-family: var(--voz-sagrada); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); }
.seg .ico { display: flex; justify-content: center; margin: 18px 0 14px; }
.seg .ico svg { width: 50px; height: 50px; }
.seg .name { font-family: var(--voz-sagrada); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; text-align: center; color: var(--bege); margin-bottom: 6px; }
.seg .pct { font-family: var(--voz-monumental); font-size: 50px; text-align: center; color: var(--amarelo); line-height: 1; letter-spacing: -0.02em; }
.seg .pct small { font-size: 23px; color: var(--bronze-claro); }
.seg .sub { text-align: center; font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); margin: 8px 0 14px; }
.spectrum { display: flex; gap: 3px; margin: 14px 0; height: 5px; }
.spectrum span { flex: 1; }
.seg .desc { font-style: italic; font-size: 15px; color: var(--fg2); text-align: center; line-height: 1.55; }
.seg .needs { margin-top: 18px; border-top: 1px solid var(--linha-fraca); padding-top: 16px; }
.seg .needs .lbl { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; text-align: center; }
.seg .needs ul { list-style: none; margin: 0; padding: 0; }
.seg .needs li { font-family: var(--voz-operacional); font-size: 15.5px; color: var(--bege); padding: 5px 0; display: flex; align-items: baseline; gap: 9px; }
.seg .needs li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bronze); flex: none; transform: translateY(-2px); }

/* ── barras de dor / necessidade ── */
.need-list { display: flex; flex-direction: column; gap: 22px; }
.need-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 9px; }
.need-row .nm { font-family: var(--voz-sagrada); font-size: 16.5px; letter-spacing: 0.01em; color: var(--bege); }
.need-row .vl { font-family: var(--voz-monumental); font-size: 20px; color: var(--bege); flex: none; }
.need-row .vl.spark { color: var(--amarelo); }
.need-row .vl.shade { color: var(--vermelho-sinal); }
.bar { height: 8px; background: var(--preto-3); border: 1px solid var(--linha-fraca); position: relative; overflow: hidden; }
.bar .fl { position: absolute; inset: 0 auto 0 0; background: var(--bronze); width: 0; transition: width 1.1s cubic-bezier(0.2,0,0,1); }
.reveal.in .bar .fl, .stagger.in .bar .fl { width: var(--w, 0); }
.bar .fl.spark { background: linear-gradient(90deg, var(--brasa), var(--amarelo)); }
.bar .fl.shade { background: var(--vermelho-sinal); }
.need-row .gloss { margin-top: 7px; }
.need-row.flag .nm::after { content: "novo"; font-family: var(--voz-sagrada); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--preto); background: var(--amarelo); padding: 2px 7px; margin-left: 11px; vertical-align: middle; }

/* ── nota do códex (caixa de leitura emoldurada) ── */
.codex-note { position: relative; background: var(--preto-2); border: 1px solid var(--linha-bronze); padding: 30px 34px; }
.codex-note::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--linha-fraca); pointer-events: none; }
.codex-note p { position: relative; font-size: 18px; line-height: 1.7; color: var(--fg2); margin: 0; }
.codex-note p b { color: var(--bege); font-weight: 500; }
.codex-note .spark { color: var(--amarelo); font-style: normal; }
.codex-note .nlbl { position: relative; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); margin-bottom: 14px; }

/* ── vozes da Forja · citações verbatim ── */
.vozes { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.voz {
  position: relative; background: var(--preto-2); border: 1px solid var(--linha-fraca);
  border-left: 2px solid var(--bronze); padding: 24px 24px 22px;
  transition: border-color 0.4s, transform 0.4s, background 0.4s;
}
.voz:hover { transform: translateY(-4px); border-left-color: var(--amarelo); background: var(--preto-3); }
.voz q { display: block; quotes: none; font-family: var(--voz-operacional); font-style: italic; font-size: 16.5px; line-height: 1.55; color: var(--bege); }
.voz q::before { content: "“"; color: var(--bronze); font-size: 22px; margin-right: 2px; }
.voz q::after { content: "”"; color: var(--bronze); }
.voz .who { margin-top: 14px; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }

/* ── as duas portas ── */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.door { position: relative; background: var(--preto-2); border: 1px solid var(--linha-bronze); padding: 34px 32px; }
.door::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--linha-fraca); pointer-events: none; }
.door > * { position: relative; }
.door .gtag { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 14px; }
.door.a .gtag { color: var(--amarelo); } .door.b .gtag { color: var(--vermelho-sinal); }
.door h4 { font-family: var(--voz-sagrada); font-weight: 600; font-size: 23px; color: var(--bege); margin-bottom: 10px; line-height: 1.2; }
.door .who { font-family: var(--voz-monumental); font-size: 46px; color: var(--bege); line-height: 1; margin-bottom: 18px; }
.door .who small { font-size: 21px; color: var(--bronze-claro); }
.door p { font-size: 16.5px; color: var(--fg2); line-height: 1.62; }
.door .pitch { margin-top: 18px; border-top: 1px solid var(--linha-fraca); padding-top: 16px; font-style: italic; font-size: 16px; color: var(--bege); }

/* ── territórios (grade hairline) ── */
.areas { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-bronze); }
.area-cell { background: var(--preto-2); padding: 24px 22px; transition: background 0.3s ease-out; }
.area-cell:hover { background: var(--preto-3); }
.area-cell .n { font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.02em; color: var(--bege); margin-bottom: 6px; }
.area-cell .c { font-family: var(--voz-monumental); font-size: 30px; color: var(--bronze-claro); line-height: 1; }
.area-cell .c small { font-size: 16px; }
.area-cell.hot .c { color: var(--amarelo); }
.area-cell .tier { font-family: var(--voz-sagrada); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-top: 8px; }
.area-cell.hot .tier { color: var(--amarelo); }

/* ── fecho ── */
.ap-close { text-align: center; }
.ap-close .glyph { display: flex; justify-content: center; margin-bottom: 24px; }
.ap-close .glyph svg { width: 44px; height: 44px; }
.ap-close .verse { font-family: var(--voz-sagrada); font-size: clamp(20px,2.6vw,26px); letter-spacing: 0.03em; color: var(--bege); line-height: 1.5; max-width: 30ch; margin: 0 auto; }
.ap-close .verse .spark { color: var(--amarelo); }

/* ── nota de método ── */
.ap-method { font-family: var(--voz-operacional); font-style: italic; font-size: 14px; color: var(--fg3); line-height: 1.6; max-width: 78ch; border-top: 1px solid var(--linha-fraca); padding-top: 22px; }
.ap-method b { font-style: normal; color: var(--bronze-claro); font-weight: 500; }

@media (max-width: 880px) {
  .seg-grid, .doors, .grid-2, .wide-narrow, .grid-3, .vozes { grid-template-columns: 1fr; }
  .areas, .ap-strip { grid-template-columns: repeat(2,1fr); }
  .ap-head { padding-top: 132px; }
}