/* =========================================================
   AZAZUU — Portal de sistemas
   Tokens copiados de frontend/src/design-system/tokens/ do Azazuu OS
   (colors.css + typography.css). Só os ~40 que esta página usa: uma
   página estática não justifica um pipeline de CSS. Se a marca mudar
   lá, atualize aqui — a fonte de verdade continua sendo o design system.
   Contrato visual: readme.md §3 (preto puro + chrome-cyan, cantos retos).

   ⚠️ A ESCALA INTEIRA E GOVERNADA POR UMA RESTRICAO: a maior parte da equipe
   usa tela 720p, e o portal precisa caber SEM ROLAGEM. Com a barra do Chrome e
   a do Windows, 1280x720 deixa ~560-600px de viewport util -- nao 720. Por isso
   os espacamentos sao curtos e os numeros usam clamp() com vw: nao e economia
   estetica, e orcamento de altura. Ao acrescentar qualquer coisa nesta pagina,
   meca a altura total antes de dar por pronto.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

@font-face {
  font-family: "Bigerside Expanded";
  src: url("/fonts/Bigerside-Expanded.woff") format("woff"),
       url("/fonts/Bigerside-Expanded.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --az-black:       #000000;
  --az-surface:     #0D0D0D;
  --az-surface-2:   #141414;
  --az-white:       #FFFFFF;
  --az-muted:       #A0A0A0;
  --az-faint:       #555555;

  --az-cyan:        #05F2F2;
  --az-teal:        #05DBF2;
  --az-aqua:        #05F2DB;

  --az-line-soft:   rgba(255, 255, 255, 0.06);
  --az-line:        rgba(5, 242, 242, 0.14);
  --az-line-hover:  rgba(5, 242, 242, 0.28);
  --az-cyan-08:     rgba(5, 242, 242, 0.08);
  --az-cyan-18:     rgba(5, 242, 242, 0.18);

  --az-gradient-line: linear-gradient(90deg, transparent, var(--az-cyan) 30%, var(--az-teal) 50%, var(--az-aqua) 70%, transparent);

  --font-display: "Bigerside Expanded", "Impact", "Arial Narrow", sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, sans-serif;

  --shadow-card:  0 24px 60px rgba(0, 0, 0, 0.6);
  --t:            0.16s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  /* Centraliza na vertical quando sobra espaco (tela grande deixava ate 360px
     de vao morto embaixo). `margin: auto` no filho em vez de
     `justify-content: center` de proposito: quando o conteudo passa da altura
     da tela -- o caso de 720p, que e o alvo -- o centering por justify-content
     CORTA o topo, e o topo aqui e o wordmark. Com margin auto ele simplesmente
     deixa de centralizar e rola normal. */
  display: flex;
  background: var(--az-black);
  color: var(--az-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Mesh wash da marca: três brilhos radiais frios sobre o preto puro.
   `fixed` + z-index negativo pra não entrar no fluxo nem capturar clique. */
.wash {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60ch 40ch at 12% -5%,  rgba(5, 242, 242, 0.10), transparent 70%),
    radial-gradient(50ch 36ch at 92% 4%,   rgba(5, 219, 242, 0.08), transparent 70%),
    radial-gradient(70ch 40ch at 50% 108%, rgba(5, 242, 219, 0.07), transparent 70%);
}

.shell {
  width: min(1280px, 100vw - 32px);
  margin: auto;
  padding: clamp(14px, 2.6vh, 40px) 0 clamp(14px, 2.6vh, 36px);
}

/* ---- Cabeçalho ---- */
.head { text-align: center; margin-bottom: clamp(10px, 1.8vh, 26px); }

.wordmark {
  width: min(124px, 34vw);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 28px rgba(5, 242, 242, 0.18));
}

/* ---- Hero: metricas alvo ---- */
.hero { margin-bottom: clamp(16px, 2.6vh, 40px); }

.hero__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin-bottom: 7px;
}

.hero__titulo {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2.3rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin: 0;
}

.hero__eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--az-cyan);
}

.hero__aviso {
  margin: 0 0 13px;
  font-size: 0.75rem;
  color: var(--az-muted);
  max-width: 96ch;
}

.hero__aviso strong { color: var(--az-white); font-weight: 600; }

.metricas {
  list-style: none;
  margin: 0 0 13px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.metrica {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 13px 17px 12px;
  background: var(--az-surface);
  border: 1px solid var(--az-line-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Mesma linha cromatica dos cards de sistema. No slide da diretoria cada card
   tinha uma cor diferente (cyan/verde/roxo/dourado); aqui todas usam o trio
   chrome-cyan porque o design system nao tem segunda matiz e aquelas cores
   nao carregavam significado nenhum -- eram decorativas. */
.metrica::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--az-gradient-line);
  opacity: 0.65;
}

.metrica__rotulo {
  margin: 0 0 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--az-cyan);
}

.metrica__numero {
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.metrica__valor {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.35rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
}

.metrica__unidade {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--az-muted);
}

.metrica__desc { margin: 0 0 3px; font-size: 0.8rem; line-height: 1.4; }

.metrica__nota {
  margin: 0 0 9px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--az-faint);
  flex: 1;
}

/* A procedencia da medicao: enquanto nenhuma esta ligada, este e o campo que
   evita o numero ser lido como resultado atual. */
.metrica__fonte {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--az-line-soft);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--az-faint);
}

/* ---- O combinado ---- */
.combinado {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 11px 18px;
  background: var(--az-cyan-08);
  border: 1px solid var(--az-line);
  border-radius: 8px;
}

.combinado__selo {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--az-cyan);
  padding-top: 2px;
  font-size: 0.66rem;
}

.combinado p { margin: 0; color: var(--az-muted); font-size: 0.82rem; line-height: 1.45; }
.combinado strong { color: var(--az-white); font-weight: 600; }

/* ---- Secao de sistemas ---- */
.secao__titulo {
  margin: 0 0 10px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--az-muted);
}

/* ---- Grade de cards ---- */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.card { display: flex; }

.card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 16px 18px 14px;
  background: var(--az-surface);
  border: 1px solid var(--az-line-soft);
  border-radius: 8px; /* teto da escada 2/4/6/8 — reservado a painéis grandes */
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

/* Linha cromática no topo — o detalhe de assinatura da marca. */
.card__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--az-gradient-line);
  opacity: 0.5;
  transition: opacity var(--t);
}

.card__inner:hover,
.card__inner:focus-visible {
  border-color: var(--az-line-hover);
  box-shadow: var(--shadow-card), 0 0 32px rgba(5, 242, 242, 0.10);
  transform: translateY(-1px);
}

.card__inner:hover::before,
.card__inner:focus-visible::before { opacity: 1; }

.card__inner:focus-visible {
  outline: none;
  border-color: var(--az-cyan);
  box-shadow: var(--shadow-card), 0 0 0 3px var(--az-cyan-18);
}

.card__inner:active { transform: translateY(0); }

/* A sigla nao tem mais bloco proprio: vive dentro do nome, so colorida. */
.card__sigla { color: var(--az-teal); }

.card__nome {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 3px;
}

.card__sub {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--az-cyan);
}

.card__desc {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--az-muted);
  flex: 1;
}

/* Pé do card: o host real. Diz pra onde o clique leva antes de clicar. */
.card__pe {
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid var(--az-line-soft);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--az-faint);
  transition: color var(--t);
}

.card__inner:hover .card__pe,
.card__inner:focus-visible .card__pe { color: var(--az-cyan); }

/* Card inativo: sem hover, sem lift, sem glow — não promete o que não entrega. */
.card--off .card__inner {
  opacity: 0.38;
  cursor: not-allowed;
  background: var(--az-surface-2);
}

.card--off .card__inner:hover {
  border-color: var(--az-line-soft);
  box-shadow: var(--shadow-card);
  transform: none;
}

.card--off .card__inner:hover::before { opacity: 0.5; }
.card--off .card__inner:hover .card__pe { color: var(--az-faint); }

/* ---- Rodapé ---- */
.foot {
  margin-top: clamp(12px, 1.8vh, 28px);
  padding-top: 12px;
  border-top: 1px solid var(--az-line-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--az-faint);
  font-size: 0.72rem;
}

.foot p { margin: 0; }
.foot .wing { width: 20px; height: auto; opacity: 0.5; flex: none; }

/* ---- Responsivo ---- */
/* ⚠️ 980px e nao 1080: uma tela 1280x720 com escala do Windows em 125% reporta
   1024px de largura CSS. No limite antigo ela caia pra 2 colunas -- duas
   fileiras de card, +160px de altura -- e era o que mais estourava a pagina
   naquele cenario. A 1024px os cards ficam com ~242px, apertados mas inteiros. */
@media (max-width: 980px) {
  .metricas { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; gap: 16px; }
  .combinado { flex-direction: column; gap: 10px; }
  .card__inner { padding: 26px 22px 20px; }
}

@media (max-width: 560px) {
  .metricas { grid-template-columns: 1fr; }
}

/* Quem pediu menos movimento não recebe o lift nem as transições. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .card__inner:hover, .card__inner:focus-visible { transform: none; }
}

/* ⚠️ Orcamento de altura: tela 720p deixa ~560px de viewport util. Este bloco
   e o ultimo aperto, e vale SO onde a altura e curta -- monitor grande continua
   com o respiro do desenho base. Se algo novo entrar na pagina, e aqui que a
   conta fecha (ou nao). */
@media (max-height: 700px) {
  .shell { padding-top: 12px; padding-bottom: 12px; }
  .head { margin-bottom: 8px; }
  .wordmark { width: min(108px, 30vw); }
  .hero { margin-bottom: 14px; }
  .hero__aviso { margin-bottom: 10px; }
  .metricas { gap: 10px; margin-bottom: 10px; }
  .metrica { padding: 11px 15px 10px; }
  .metrica__nota { margin-bottom: 7px; }
  .metrica__fonte { padding-top: 7px; }
  .combinado { padding: 9px 16px; }
  .secao__titulo { margin-bottom: 8px; }
  .grid { gap: 10px; }
  .card__inner { padding: 13px 16px 12px; }
  .card__desc { margin-bottom: 10px; }
  .card__pe { padding-top: 8px; }
  .foot { margin-top: 10px; padding-top: 10px; }
}

/* Degrau mais apertado: 1280x720 com barra de favoritos ligada deixa ~540px.
   Tudo continua na tela -- nenhum texto foi cortado pra caber, so o respiro. */
@media (max-height: 620px) {
  .shell { padding-top: 8px; padding-bottom: 8px; }
  .head { margin-bottom: 6px; }
  .wordmark { width: min(92px, 26vw); }
  .hero { margin-bottom: 10px; }
  .hero__aviso { margin-bottom: 8px; }
  .metricas { gap: 8px; margin-bottom: 8px; }
  .metrica { padding: 9px 14px 8px; }
  .metrica__nota { margin-bottom: 6px; }
  .metrica__fonte { padding-top: 6px; }
  .combinado { padding: 7px 14px; }
  .secao__titulo { margin-bottom: 6px; }
  .grid { gap: 8px; }
  .card__inner { padding: 11px 15px 10px; }
  .card__desc { margin-bottom: 8px; }
  .card__pe { padding-top: 6px; }
  .foot { margin-top: 8px; padding-top: 8px; }
}

/* Ultimo degrau que ainda e SO espacamento -- cobre 1366x768 com escala 125%
   (1092x500 CSS). Abaixo disto nao ha mais respiro pra tirar: encolher mais
   vira corte de conteudo, que e decisao de produto, nao de CSS. */
@media (max-height: 520px) {
  .shell { padding-top: 6px; padding-bottom: 6px; }
  .head { margin-bottom: 4px; }
  .wordmark { width: min(80px, 24vw); }
  .hero { margin-bottom: 8px; }
  .hero__titulo { font-size: clamp(1.25rem, 2vw, 1.7rem); }
  .hero__aviso { margin-bottom: 6px; }
  .metricas { gap: 7px; margin-bottom: 7px; }
  .metrica { padding: 8px 13px 7px; }
  .metrica__valor { font-size: clamp(1.4rem, 2.1vw, 1.9rem); }
  .metrica__nota { margin-bottom: 5px; }
  .metrica__fonte { padding-top: 5px; }
  .combinado { padding: 6px 14px; }
  .secao__titulo { margin-bottom: 5px; }
  .grid { gap: 7px; }
  .card__inner { padding: 10px 14px 9px; }
  .card__desc { margin-bottom: 7px; }
  .card__pe { padding-top: 5px; }
  .foot { margin-top: 6px; padding-top: 6px; }
}