/* ═══════════════════════════════════════════════════════════════════
   AKHENATON · SITE  ·  Sistema Monumento
   GERADO A PARTIR DE akhenaton.tokens.json — NÃO EDITE CORES AQUI.
   Mudou a marca? Muda o tokens.json e roda de novo o gerador.

   Registro: INVESTIMENTOS (a Noite). O site é a porta do capital.
   O painel de Calcário é a exceção: são os 7% de luz.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Primitivos ───────────────────────────────────────────── */
  --mnt-obsidiana-poco:#0E0C09;
  --mnt-obsidiana:#15130F;
  --mnt-obsidiana-clara:#211D16;
  --mnt-obsidiana-hover:#27231C;
  --mnt-trama:#181713;
  --mnt-tinta:#2A2620;
  --mnt-calcario:#F5F0E7;
  --mnt-calcario-hover:#EEE9E0;
  --mnt-pergaminho:#EFE7D6;
  --mnt-areia:#EAE1CF;
  --mnt-linha:#D9CFB9;
  --mnt-linha-forte:#C2B9A3;
  --mnt-linha-escura:#2C2820;
  --mnt-linha-escura-forte:#3B372F;
  --mnt-ouro-claro:#E4CB8C;
  --mnt-ouro-hover:#D4AA50;
  --mnt-ouro:#C49A3F;
  --mnt-ouro-pressed:#B18729;
  --mnt-ouro-profundo:#785A22;
  --mnt-ouro-profundo-hover:#694C11;
  --mnt-linho:#A89F8B;
  --mnt-nevoa:#67604F;

  /* Semânticas — ferramenta interna e sinal de estado. Nunca decoração. */
  --sem-erro:#FC8A7A;
  --sem-erro-claro:#952D23;
  --sem-ok:#6ABE8D;
  --sem-ok-claro:#006237;

  /* ── Forma. UM raio. ZERO sombra. ─────────────────────────── */
  --r:2px;

  /* ── Malha de 8 ───────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px;
  --s6:48px; --s7:64px; --s8:96px; --s9:128px;

  /* ── Tipografia ───────────────────────────────────────────── */
  --f-display:'Bricolage Grotesque',Archivo,system-ui,sans-serif;
  --f-corpo:'Hanken Grotesk',Inter,system-ui,sans-serif;
  --f-num:'IBM Plex Mono','Roboto Mono',ui-monospace,monospace;
  --medida:64ch;

  /* ── Movimento. Nada quica. ───────────────────────────────── */
  --curva:cubic-bezier(.2,.8,.2,1);
  --t-micro:120ms; --t-ui:240ms; --t-entrada:480ms;
}

/* ═══ REGISTRO · A NOITE (padrão do site) ═══════════════════════ */
:root,[data-registro="investimentos"]{
  --sup-base:var(--mnt-obsidiana);
  --sup-elevada:var(--mnt-obsidiana-clara);
  --sup-hover:var(--mnt-obsidiana-hover);
  --txt-forte:var(--mnt-calcario);
  --txt-secundario:var(--mnt-linho);      /* 7,06:1 — a Névoa reprovaria aqui (2,97:1) */
  --acento:var(--mnt-ouro);               /* 7,10:1 */
  --acento-hover:var(--mnt-ouro-hover);   /* clareia: o estado SOBE o contraste */
  --acento-txt:var(--mnt-obsidiana);
  --divisor:var(--mnt-linha-escura);
  --borda-controle:var(--mnt-linho);      /* 7,06:1 — passa WCAG 1.4.11 */
  --foco:var(--mnt-ouro);
}

/* ═══ REGISTRO · O DIA (painéis claros, calculadora, área do cliente) ═══ */
[data-registro="living"],.claro{
  --sup-base:var(--mnt-calcario);
  --sup-elevada:var(--mnt-calcario);      /* elevação é BORDA, não sombra */
  --sup-hover:var(--mnt-calcario-hover);
  --txt-forte:var(--mnt-obsidiana);
  --txt-secundario:var(--mnt-nevoa);      /* 5,50:1 */
  --acento:var(--mnt-ouro-profundo);      /* 5,63:1 — o ouro puro daria 2,30:1 e o botão sumiria */
  --acento-hover:var(--mnt-ouro-profundo-hover);
  --acento-txt:var(--mnt-calcario);
  --acento-fino:var(--mnt-ouro);          /* o ouro puro sobrevive como filete e selo */
  --divisor:var(--mnt-linha);
  --borda-controle:var(--mnt-nevoa);      /* 5,50:1 */
  --foco:var(--mnt-ouro-profundo);
}

/* ═══ BASE ═════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-corpo);
  background:var(--sup-base);
  color:var(--txt-forte);
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}

/* LEI 5 — todo número é mono, com tabular-nums. Sem exceção. */
.num,td.n,.metrica b,.dado .v,time,[data-num]{
  font-family:var(--f-num);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* LEI 2 — elevação é borda. Zero box-shadow no sistema inteiro. */
*{box-shadow:none}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-variation-settings:'opsz' 40,'wght' 800,'wdth' 100;   /* opsz, wght, wdth — NESTA ORDEM */
  line-height:1.05; letter-spacing:-.02em; color:var(--txt-forte);
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,6.4vw,4rem)}
h2{font-size:clamp(1.7rem,4.4vw,2.75rem)}
h3{font-size:clamp(1.15rem,2.4vw,1.5rem)}
p{max-width:var(--medida)}
a{color:var(--acento);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--foco);outline-offset:2px}

/* ═══ ESTRUTURA ════════════════════════════════════════════════ */
.env{width:min(1180px,100% - var(--s5));margin-inline:auto}
.secao{padding:var(--s8) 0;border-top:1px solid var(--divisor)}
.secao--clara{background:var(--sup-base);border-top:1px solid var(--divisor)}

.rotulo{
  font-family:var(--f-num); font-size:12px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--acento); margin-bottom:var(--s4); display:block;
}
.lede{font-size:1.15rem;color:var(--txt-secundario);max-width:60ch;margin-top:var(--s4)}

/* ═══ CABEÇALHO ════════════════════════════════════════════════
   O wordmark era um <a> sem estilo: saía SUBLINHADO no mobile, como
   um link qualquer. A marca não é um link — é a marca.              */
.topo{
  position:sticky; top:0; z-index:50;
  background:var(--mnt-obsidiana);
  border-bottom:1px solid var(--divisor);
}
.topo .env{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0}
.marca{display:flex;align-items:center;gap:var(--s3);text-decoration:none!important;color:inherit}
.marca:hover,.marca:focus{text-decoration:none!important}
.marca img{width:34px;height:34px}
.marca .nome{
  font-family:var(--f-display); font-variation-settings:'opsz' 24,'wght' 800,'wdth' 100;
  font-size:1.05rem; letter-spacing:.02em; color:var(--mnt-calcario); line-height:1;
}
.marca .divisao{
  display:block; font-family:var(--f-num); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; color:var(--acento); margin-top:3px;
}
.menu{display:flex;align-items:center;gap:var(--s5);list-style:none}
.menu a{
  font-family:var(--f-num); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-secundario); text-decoration:none;
  transition:color var(--t-micro) var(--curva);
}
.menu a:hover{color:var(--mnt-calcario)}   /* Lei 1: o estado SOBE o contraste */

/* ═══ BOTÕES ═══════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--f-num); font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px var(--s4); border-radius:var(--r);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background var(--t-micro) var(--curva),color var(--t-micro) var(--curva);
}
.btn--primario{background:var(--acento,#C49A3F);color:var(--acento-txt,#15130F);border-color:var(--acento,#C49A3F)}
.btn--primario:hover{background:var(--acento-hover,#D4AA50)}
.btn--fantasma{
  background:transparent; color:var(--txt-forte,#F5F0E7);
  border-color:var(--borda-controle,#A89F8B);
}
.btn--fantasma:hover{background:var(--sup-hover)}

/* ═══ CARTÃO — elevação é BORDA ════════════════════════════════ */
.cartao{
  background:var(--sup-elevada);
  border:1px solid var(--divisor);
  border-radius:var(--r);
  padding:var(--s5);
}
.cartao--acento{border-left:3px solid var(--acento)}

/* ═══ MÉTRICA ══════════════════════════════════════════════════ */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--divisor);border:1px solid var(--divisor);border-radius:var(--r);overflow:hidden}
.metrica{background:var(--sup-base);padding:var(--s5) var(--s4)}
.metrica b{
  display:block; font-size:2.3rem; font-weight:700; color:var(--acento);
  letter-spacing:-.02em; line-height:1;
}
.metrica span{
  display:block; margin-top:var(--s2);
  font-size:13px; color:var(--txt-secundario); line-height:1.45;
}
.metrica small{
  display:block; margin-top:var(--s2); font-family:var(--f-num);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--acento);
}

/* ═══ TABELA — a conta aberta ══════════════════════════════════ */
.conta{width:100%;border-collapse:collapse;font-size:15px}
.conta th{
  font-family:var(--f-num); font-size:10px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; text-align:left; color:var(--acento);
  padding:var(--s3); border-bottom:1px solid var(--divisor);
}
.conta td{padding:var(--s3);border-bottom:1px solid var(--divisor);vertical-align:top}
.conta td.n{text-align:right;white-space:nowrap;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.conta tr.total td{
  border-top:2px solid var(--acento); border-bottom:none;
  font-weight:700; color:var(--txt-forte);
}
.conta tr.neg td.n{color:var(--sem-erro)}

/* ═══ LIMITES — "o que a Akhenaton não é" ══════════════════════
   LEI 9 — a cor nunca é o único portador de significado.
   Sempre ícone + texto + cor.                                    */
.limite{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  padding:var(--s4) 0; border-bottom:1px solid var(--divisor);
}
.limite::before{
  content:"✗"; font-family:var(--f-num); font-weight:700;
  color:var(--sem-erro); line-height:1.4;
}
.limite b{display:block;color:var(--txt-forte)}
.limite span{color:var(--txt-secundario);font-size:15px}

/* ═══ AVISO — a ressalva que vem ANTES do número ═══════════════ */
.aviso{
  border:1px solid var(--divisor); border-left:3px solid var(--acento);
  border-radius:var(--r); padding:var(--s4); background:var(--sup-elevada);
}
.aviso .t{
  font-family:var(--f-num); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acento); display:block; margin-bottom:var(--s2);
}

/* ═══ CARREGAMENTO — LEI 3: não existe spinner. ════════════════
   O selo é um sol, e um sol não gira. Carregamento é barra e esqueleto. */
.barra{height:2px;background:var(--divisor);border-radius:var(--r);overflow:hidden}
.barra i{display:block;height:100%;background:var(--acento);transition:width var(--t-ui) var(--curva)}
.esqueleto{background:var(--sup-elevada);border-radius:var(--r);min-height:1em}

/* ═══ RODAPÉ ═══════════════════════════════════════════════════ */
.rodape{
  border-top:1px solid var(--divisor); padding:var(--s7) 0 var(--s6);
  font-family:var(--f-num); font-size:11px; letter-spacing:.08em;
  color:var(--txt-secundario); line-height:2;
}

/* ═══ MOBILE ═══════════════════════════════════════════════════ */
@media (max-width:860px){
  body{font-size:16px}
  .secao{padding:var(--s7) 0}
  .menu{display:none}
  .menu.aberto{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--mnt-obsidiana); border-bottom:1px solid var(--divisor);
    padding:var(--s3) var(--s4) var(--s4);
  }
  .menu.aberto li{border-bottom:1px solid var(--divisor)}
  .menu.aberto a{display:block;padding:var(--s3) 0}
  .metrica b{font-size:1.9rem}
  .conta{font-size:14px}
  .conta th,.conta td{padding:var(--s2) var(--s2)}
}

/* ═══ MOVIMENTO REDUZIDO ═══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ═══ IMPRESSÃO ════════════════════════════════════════════════ */
@media print{
  .topo,.nao-imprime{display:none!important}
  body{background:#fff;color:#000}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}

/* ── Aliases herdados. O JS do portal chama var(--gold), var(--green)…
   Não foram renomeados: o que importa é que agora APONTAM para o token,
   e não para um hex solto. Um alias que aponta para a verdade é um alias;
   um hex repetido é uma segunda paleta. ─────────────────────────────── */
:root{
  --obs:var(--mnt-obsidiana);
  --gold:var(--mnt-ouro);
  --gold-deep:var(--mnt-ouro-profundo);
  --dim:var(--mnt-nevoa);
  --green:var(--sem-ok);
  --red:var(--sem-erro);
  --blue:var(--sem-info);
  --sem-ok-claro:#6ABE8D;
  --sem-erro-claro:#FC8A7A;
}