/* ============================================================
   O GRANDE ALQUIMISTA — camada de território
   Carrega DEPOIS de tokens.css e components.css.

   ⚠️ Proposta, não decisão. Sub-sistema visual derivado do 4D:
   o D4 (Diamantes) é dourado no Método; aqui o dourado deixa de ser
   chegada e vira a casa. O violeta é rebaixado a citação do 4D —
   aparece só onde a linhagem é mencionada. Depende da validação
   de Fernando. — Estúdio Roncolato, outubro de 2026
   ============================================================ */

:root{
  /* ---- base: preto fosco quente (o 4D é preto azulado) ---- */
  --bg:        #0A0806;
  --bg2:       #110D09;
  --indigo:    #1A130A;   /* bloco denso — era índigo, agora é âmbar queimado */

  /* ---- dourado: a casa ---- */
  --gold:      #D9B45F;
  --gold-l:    #F0D894;
  --gold-d:    #8A6C28;
  --luz:       #F7EFDD;   /* a chegada dentro do dourado */

  /* ---- violeta: rebaixado a citação do 4D ---- */
  --violet:    #6D4AFF;
  --violet-l:  #9B7DFF;

  /* ---- superfícies: fosco, não vidro ---- */
  --glass:      rgba(217,180,95,.045);
  --glass2:     rgba(217,180,95,.08);
  --glass-soft: rgba(217,180,95,.03);
  --blur:       6px;

  --stroke:      rgba(217,180,95,.20);
  --stroke-soft: rgba(217,180,95,.11);
  --stroke-vio:  rgba(217,180,95,.30);
  --tint-vio:    rgba(217,180,95,.08);
  --stroke-gld:  rgba(217,180,95,.34);
  --tint-gld:    rgba(217,180,95,.09);

  --shadow-lift: 0 28px 70px rgba(0,0,0,.62);
  --grad-rule:   linear-gradient(90deg,var(--gold-d),transparent);
}

/* ---- ambiente: névoa quente, sem orbe violeta ---- */
.mesh{
  background:
    radial-gradient(58% 46% at 14% 8%,  rgba(217,180,95,.13), transparent 62%),
    radial-gradient(52% 40% at 88% 22%, rgba(138,108,40,.16), transparent 60%),
    radial-gradient(70% 52% at 52% 110%,rgba(26,19,10,.92),   transparent 64%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 55%, var(--bg) 100%);
  filter:blur(80px);
}
.orb.o1{background:rgba(217,180,95,.12)}
.orb.o3{background:rgba(138,108,40,.14)}

/* ---- tipografia e rótulos ---- */
.tag{color:var(--gold)}
.quote{color:var(--luz)}
.gld{color:var(--gold)}
.vio{color:var(--violet-l)}
.grad{background:linear-gradient(94deg,var(--gold-l) 0%,var(--gold) 48%,var(--gold-d) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- botões: dourado sólido é a ação ---- */
.btn-primary{background:var(--gold);color:#17120A;box-shadow:0 12px 34px rgba(217,180,95,.22)}
.btn-primary:hover{background:var(--gold-l);color:#17120A;box-shadow:0 18px 48px rgba(217,180,95,.32)}
.btn-ghost{background:transparent;color:var(--gold);border-color:var(--stroke)}
.btn-ghost:hover{background:var(--tint-gld);border-color:var(--gold-d);color:var(--gold-l)}

/* ---- cartões: fosco, fio de ouro, sem vidro ---- */
.glass{background:linear-gradient(165deg,rgba(217,180,95,.055),rgba(255,255,255,.012));
  border:1px solid var(--stroke-soft);backdrop-filter:none;-webkit-backdrop-filter:none}
.glass:hover{background:linear-gradient(165deg,rgba(217,180,95,.09),rgba(255,255,255,.02));
  border-color:var(--stroke)}
.ico-box{background:var(--tint-gld);border-color:var(--stroke-soft)}
.glass:hover .ico-box{background:rgba(217,180,95,.16);border-color:var(--stroke-gld)}
.ico{color:var(--gold)}
.card .k{color:var(--gold)}
.ico-muted{color:var(--muted)}
.pill{border-color:var(--stroke-soft);background:var(--glass-soft)}
.pill-gold{color:var(--gold);border-color:var(--stroke-gld);background:var(--tint-gld)}
.dmd{background:linear-gradient(135deg,var(--gold-l),var(--gold-d))}
.footer{background:var(--indigo)}

/* ---- links ---- */
a{color:var(--gold)}
a:hover{color:var(--gold-l)}
.footer small a{color:var(--muted)}
.footer small a:hover{color:var(--gold)}

/* ---- a citação do 4D: único lugar onde o violeta volta ---- */
.de4d{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 15px;border-radius:var(--r-pill);
  font-size:var(--fs-label);letter-spacing:var(--ls-small);text-transform:uppercase;
  color:var(--violet-l);border:1px solid rgba(155,125,255,.34);background:rgba(109,74,255,.11)
}
.de4d .dmd{background:linear-gradient(135deg,var(--violet-l),var(--violet))}

/* ============================================================
   ESCALA DE LEITURA
   Os tokens do 4D nasceram para projeção — h2 chega a 80px,
   correto a cinco metros, berrante a sessenta centímetros.
   Aqui a escala volta para leitura de tela.
   ============================================================ */
:root{
  --fs-display: clamp(40px, 5.4vw, 74px);   /* só o nome no hero */
  --fs-h2:      clamp(25px, 2.4vw, 37px);
  --fs-mega:    clamp(20px, 1.7vw, 27px);
  --fs-quote:   clamp(20px, 1.8vw, 28px);
  --fs-num:     clamp(30px, 2.6vw, 40px);
  --fs-idx:     clamp(26px, 2.2vw, 34px);
  --fs-h3:      clamp(18px, 1.25vw, 21px);
  --fs-lead:    clamp(16.5px, 1.08vw, 19px);
  --fs-body:    clamp(15px, .96vw, 16.5px);
  --fs-small:   clamp(13.5px, .86vw, 14.5px);
  --fs-label:   11px;
  --fs-micro:   10.5px;

  --ls-display: -.028em;
  --ls-title:   -.018em;
  --ls-tag:     .3em;

  --measure: 64ch;
  --maxw:    1180px;       /* 1460 é largo demais para texto corrido */
  --sp-3xl:  clamp(64px, 6.6vw, 108px);
}
h2,.h2{line-height:1.14}
.lead{line-height:1.62;max-width:54ch}
p{line-height:1.68;max-width:66ch}
.mega{line-height:1.34;font-weight:var(--fw-book)}

/* ============================================================
   GRADE EDITORIAL
   Rótulo e número na margem esquerda, conteúdo à direita.
   É o que dá estrutura no lugar de blocos centrados empilhados.
   ============================================================ */
.ed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--sp-sm) var(--sp-lg);align-items:start}
.ed-rot{grid-column:1/4;display:flex;flex-direction:column;gap:var(--sp-xs);
  position:sticky;top:64px}
.ed-num{font-size:var(--fs-idx);font-weight:var(--fw-thin);line-height:1;
  letter-spacing:var(--ls-title);color:var(--gold-d)}
.ed-rot .tag{margin:0}
.ed-rot .tag::before{display:none}
.ed-corpo{grid-column:4/13;min-width:0}
.ed-full{grid-column:1/13;min-width:0}
.ed-larga{grid-column:4/13;min-width:0}

/* fio de abertura de seção */
.section>.wrap>.ed{padding-top:var(--sp-md);border-top:1px solid var(--stroke-soft)}

/* nota de margem — substitui o bloco-manifesto gigante */
.nota-m{grid-column:1/4;padding-top:var(--sp-sm);border-top:1px solid var(--stroke-soft);
  font-size:var(--fs-small);color:var(--gold);line-height:1.5;font-style:italic}

@media (max-width:980px){
  .ed{grid-template-columns:1fr;gap:var(--sp-sm)}
  .ed-rot{grid-column:1/-1;position:static;flex-direction:row;align-items:baseline;gap:var(--sp-sm)}
  .ed-num{font-size:var(--fs-h3)}
  .ed-corpo,.ed-full,.ed-larga,.nota-m{grid-column:1/-1}
  .nota-m{margin-top:var(--sp-sm)}
}