/* Axxis Retail: paginas publicas. Paleta Axxis Group, claro e escuro. */
:root {
  --bg: #F4EFE6; --sup: #FBF8F2; --sup2: #EFE8DB; --linha: #DDD3C2; --txt: #17161A; --txt2: #57524A; --txt3: #6F685D;
  --ouro: #A9822F; --ouro-s: #D4A437; --ok: #2F6B45; --ok-bg: #E2EFE5; --alerta: #8A5A00; --alerta-bg: #F7EBCF; --ruim: #9B2C2C; --ruim-bg: #F6E0DD;
  --serif: "Fraunces", Georgia, serif; --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0B0B0C; --sup: #141416; --sup2: #1F1F22; --linha: #2A2A2E; --txt: #F4EFE6; --txt2: #CDC7BD; --txt3: #9A948A;
    --ouro: #D4A437; --ok: #8FD1A4; --ok-bg: #16281D; --alerta: #E9C46A; --alerta-bg: #2A2213; --ruim: #F0A39B; --ruim-bg: #2E1716; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
.topo { max-width: 860px; margin: 0 auto; padding: 20px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.marca { font-family: var(--serif); letter-spacing: .3em; font-size: .95rem; }
.marca b { color: var(--ouro); font-weight: 600; }
.topo nav { display: flex; gap: 6px; }
.topo nav a { color: var(--txt2); text-decoration: none; font-weight: 600; padding: 6px 12px; border-radius: 8px; }
.topo nav a[aria-current] { color: var(--txt); background: var(--sup2); }
.pagina { max-width: 860px; margin: 0 auto; padding: 0 16px 60px; display: grid; gap: 22px; }
h1, h2 { margin: 0; }
.resumo { border-radius: 14px; padding: 22px; border: 1px solid var(--linha); background: var(--sup); }
.resumo h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 4vw, 1.9rem); }
.resumo p { margin: 6px 0 0; color: var(--txt2); }
.resumo.ok { border-left: 5px solid var(--ok); background: linear-gradient(90deg, var(--ok-bg), var(--sup) 60%); }
.resumo.falha { border-left: 5px solid var(--ruim); background: linear-gradient(90deg, var(--ruim-bg), var(--sup) 60%); }
.resumo.neutro { border-left: 5px solid var(--ouro-s); }
.servicos { display: grid; gap: 14px; }
.servico { background: var(--sup); border: 1px solid var(--linha); border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
.servico-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.servico-t h2 { font-size: 1rem; font-weight: 700; }
.selo { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.selo.ok { color: var(--ok); background: var(--ok-bg); } .selo.falha { color: var(--ruim); background: var(--ruim-bg); } .selo.vz { color: var(--txt3); background: var(--sup2); }
.barras { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 32px; }
.barras span { border-radius: 2px; background: var(--sup2); }
.barras .ok { background: var(--ok); opacity: .8; } .barras .parcial { background: var(--alerta); } .barras .falha { background: var(--ruim); }
.servico-pe { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--txt3); }
.quedas h2, .novidades h2 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.quedas ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.quedas li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--sup); border: 1px solid var(--linha); border-radius: 10px; font-size: .92rem; }
.quedas li span { color: var(--txt2); }
.vazio { color: var(--txt3); }
.novidades { display: grid; gap: 14px; }
.novidade { background: var(--sup); border: 1px solid var(--linha); border-radius: 12px; padding: 18px; }
.novidade-t { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--txt3); }
.novidade h2 { margin-top: 8px; }
.novidade p { color: var(--txt2); margin: 8px 0 0; }
.tipo { font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--sup2); color: var(--txt2); }
.tipo.novo { background: var(--ok-bg); color: var(--ok); } .tipo.correcao { background: var(--alerta-bg); color: var(--alerta); }
.rodape { max-width: 860px; margin: 0 auto; padding: 20px 16px 40px; color: var(--txt3); font-size: .85rem; border-top: 1px solid var(--linha); }
@media (max-width: 560px) { .barras { grid-template-columns: repeat(45, 1fr); } .barras span:nth-child(-n+45) { display: none; } }