/* Portal AXVT — identidade base. Trocar as 3 primeiras variáveis muda a marca inteira. */
:root {
  --marca:      #0E5C63;   /* cor principal AXVT */
  --marca-esc:  #0A464C;
  --destaque:   #C8A24A;   /* dourado de apoio */

  --papel:  #FAFAF8;
  --cartao: #FFFFFF;
  --tinta:  #16191C;
  --suave:  #667079;
  --linha:  #E4E6E3;
  --marca-leve: #E7F1F1;
  --ok: #1F7A5C; --ok-leve: #E4F2EC;
  --alerta: #8A5A18; --alerta-leve: #F8F0E0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marca: #5FBFC8; --marca-esc: #3E9AA3; --destaque: #DDB765;
    --papel: #0E1113; --cartao: #171B1E; --tinta: #E8EBEA; --suave: #97A1A8; --linha: #262B2F;
    --marca-leve: #12292C; --ok: #5FC49E; --ok-leve: #102A22; --alerta: #D9A85F; --alerta-leve: #2B2113;
  }
}
:root[data-theme="dark"] {
  --marca: #5FBFC8; --marca-esc: #3E9AA3; --destaque: #DDB765;
  --papel: #0E1113; --cartao: #171B1E; --tinta: #E8EBEA; --suave: #97A1A8; --linha: #262B2F;
  --marca-leve: #12292C; --ok: #5FC49E; --ok-leve: #102A22; --alerta: #D9A85F; --alerta-leve: #2B2113;
}
* { box-sizing: border-box; }
html { background: var(--papel); }
body { margin: 0; background: var(--papel); color: var(--tinta); line-height: 1.6;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15.5px; }

/* topo */
.topo { border-bottom: 1px solid var(--linha); background: var(--cartao); position: sticky; top: 0; z-index: 30; }
.topo-in { max-width: 1080px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; gap: 18px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca .sigla { font-weight: 800; letter-spacing: .16em; font-size: 15px; color: var(--marca); }
.marca .sep { width: 1px; height: 20px; background: var(--linha); }
.marca .cliente { font-size: 14px; color: var(--suave); font-weight: 600; }
.nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { font-size: 14px; font-weight: 600; color: var(--suave); text-decoration: none;
  padding: 7px 13px; border-radius: 8px; }
.nav a:hover { background: var(--marca-leve); color: var(--marca); }
.nav a.ativo { background: var(--marca); color: #fff; }
@media (prefers-color-scheme: dark) { .nav a.ativo { color: #08252a; } }

.corpo { max-width: 1080px; margin: 0 auto; padding: 34px 22px 80px; }
.eyebrow { font-size: 11px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; color: var(--marca); }
h1 { font-size: 30px; font-weight: 650; letter-spacing: -.02em; margin: 8px 0 10px; text-wrap: balance; }
h2 { font-size: 12.5px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase;
  color: var(--marca); margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--linha); }
h3 { font-size: 17.5px; font-weight: 640; margin: 24px 0 6px; }
p { margin: 9px 0; } .lead { color: var(--suave); max-width: 68ch; }
a { color: var(--marca); }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 20px 22px; margin: 15px 0; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 16px 0; }
.painel { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 18px 20px;
  text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .15s; }
a.painel:hover { border-color: var(--marca); transform: translateY(-1px); }
.painel .rot { font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.painel .val { font-size: 27px; font-weight: 660; letter-spacing: -.02em; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.painel .obs { font-size: 13px; color: var(--suave); margin-top: 2px; }
.painel b { display: block; font-size: 16px; margin-bottom: 3px; }
.painel span { font-size: 13.5px; color: var(--suave); }
.selo { display: inline-block; font-size: 10.5px; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: var(--ok-leve); color: var(--ok); }
.selo.alerta { background: var(--alerta-leve); color: var(--alerta); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--suave);
  padding: 9px 10px; border-bottom: 1px solid var(--linha); font-weight: 750; }
td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.rodape { border-top: 1px solid var(--linha); margin-top: 60px; padding: 22px 0 40px;
  color: var(--suave); font-size: 13px; text-align: center; }
.rodape b { color: var(--marca); letter-spacing: .12em; }
.embed { width: 100%; border: 1px solid var(--linha); border-radius: 12px; background: var(--cartao);
  min-height: 78vh; }