/* ============================================================
   assets/layout.css
   ------------------------------------------------------------
   Conteúdo movido do <style> inline do inc/pagina.php.
   Antes eram 4.258 bytes reenviados em TODA pageview, sem cache.
   Agora é um arquivo cacheado, baixado uma vez por visitante.

   ADITIVO: não altera nenhuma regra existente do style.css.
   Carregar SEMPRE depois do style.css.
   ============================================================ */

/* ------------------------------------------------------------
   0. CORREÇÃO COM ESCOPO DA TRAVA DE ROLAGEM
   ------------------------------------------------------------
   O style.css tem, em @media (max-width:1366px):
       body { overflow: hidden !important; }
   A regra existe para o painel 3D da home (#app-screen), mas não
   tem escopo e trava a rolagem de TODAS as páginas em notebooks.

   Em vez de apagar a regra (destrutivo), restringimos o efeito:
   só continua valendo onde o painel realmente existe.

   Substitui o hack de três !important que estava no pagina.php.
   ------------------------------------------------------------ */
@media (max-width: 1366px) {
  body:not(:has(#app-screen)) {
    overflow-y: auto !important;
    height: auto !important;
  }
}

/* Fallback para navegadores sem :has() — páginas de conteúdo
   podem receber a classe .pg-conteudo no <body>. */
@media (max-width: 1366px) {
  body.pg-conteudo {
    overflow-y: auto !important;
    height: auto !important;
  }
}

/* ------------------------------------------------------------
   1. CONTÊINER DE PÁGINA
   ------------------------------------------------------------ */
.pg { max-width: 1100px; margin: 0 auto; padding: 0 22px; }

/* ------------------------------------------------------------
   2. NAVEGAÇÃO FIXA
   ------------------------------------------------------------ */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px;
  background: rgba(5, 8, 16, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-nav .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.site-nav .brand img { width: 26px; height: 26px; border-radius: 6px; }
.site-nav .brand span { font-family: var(--f-display); color: #fff; font-size: .9rem; letter-spacing: 1px; }
.site-nav a.navlink {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--txt-dim); text-decoration: none;
}
.site-nav a.navlink:hover,
.site-nav a.navlink.on { color: var(--neon); }

@media (max-width: 680px) {
  .site-nav { gap: 12px; overflow-x: auto; }
  .site-nav .brand span { display: none; }
}

/* ------------------------------------------------------------
   3. CABEÇALHO DE PÁGINA
   ------------------------------------------------------------ */
.pg-head { padding: 40px 0 8px; }
.pg-head .crumb {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--txt-dim); margin-bottom: 12px;
}
.pg-head .crumb a { color: var(--neon); text-decoration: none; }
.pg-head h1 {
  font-family: var(--f-display); color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: 1px;
  margin: 0 0 10px; text-shadow: 0 0 22px rgba(0, 243, 255, .25);
}
.pg-head p.lead {
  font-family: var(--f-body); color: var(--txt-dim);
  font-size: 1.02rem; line-height: 1.6; margin: 0; max-width: 760px;
}

/* ------------------------------------------------------------
   4. GRADE DE CATEGORIAS
   ------------------------------------------------------------ */
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; padding: 24px 0 10px;
}
.cat-card {
  display: block; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; text-decoration: none; background: var(--bg-2, #0a1020);
  transition: .2s;
}
.cat-card:hover {
  border-color: var(--neon);
  box-shadow: 0 0 22px rgba(0, 243, 255, .12);
  transform: translateY(-2px);
}
.cat-card .cc-img {
  aspect-ratio: 16/10; background: #070d18;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cat-card .cc-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-card .cc-img span { color: rgba(0, 243, 255, .4); font-size: 1.8rem; }
.cat-card .cc-b { padding: 16px; }
.cat-card .cc-cls {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--neon); margin-bottom: 6px;
}
.cat-card h2 {
  font-family: var(--f-display); color: #fff;
  font-size: 1.02rem; letter-spacing: .5px; margin: 0 0 8px;
}
.cat-card p {
  font-family: var(--f-body); color: var(--txt-dim);
  font-size: .9rem; line-height: 1.5; margin: 0;
}

/* ------------------------------------------------------------
   5. DOSSIÊ (corpo + ficha lateral)
   ------------------------------------------------------------ */
.dossie { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; padding: 14px 0 30px; }
@media (max-width: 820px) { .dossie { grid-template-columns: 1fr; } }

.dossie .corpo { font-family: var(--f-body); color: #cfe0f2; font-size: 1.04rem; line-height: 1.75; }
.dossie .corpo h2 {
  font-family: var(--f-display); color: #fff;
  font-size: 1.1rem; letter-spacing: .5px; margin: 24px 0 8px;
}

.ficha {
  border: 1px solid var(--line); border-radius: 12px; padding: 6px 18px;
  background: linear-gradient(180deg, rgba(0, 243, 255, .04), transparent);
  align-self: start;
}
.ficha .row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(0, 243, 255, .08);
  font-family: var(--f-body);
}
.ficha .row:last-child { border-bottom: none; }
.ficha .k { color: var(--txt-dim); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; }
.ficha .v { color: #eaf2ff; font-weight: 600; }

.threat { display: flex; gap: 5px; align-items: center; }
.threat i {
  width: 20px; height: 7px; border-radius: 2px;
  background: rgba(255, 255, 255, .12); display: inline-block;
}
.threat i.on { background: var(--neon); box-shadow: 0 0 8px var(--neon); }

/* ------------------------------------------------------------
   6. GALERIA
   ------------------------------------------------------------ */
.galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; padding: 6px 0 30px;
}
.galeria figure {
  margin: 0; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: #070d18;
}
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.galeria figcaption {
  font-family: var(--f-mono); font-size: .6rem;
  color: var(--txt-dim); padding: 8px 10px;
}

/* ------------------------------------------------------------
   7. LINK DE RETORNO
   ------------------------------------------------------------ */
.voltar {
  display: inline-block; margin: 8px 0 36px;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--neon); text-decoration: none;
}