/* ── Páginas legales, con la paleta del sitio ──────────────────────────────
   Las cuatro (aviso legal, privacidad, cookies y términos) se escribieron en
   claro cuando el resto del sitio ya era oscuro: se abrían en blanco debajo de
   una cabecera negra y parecían rotas. Esta hoja va DESPUÉS del <style> de cada
   página, así que gana sin tener que reescribir cuatro bloques distintos.
   Los colores salen de variables: si algún día estas páginas llevan marca,
   cambian solas igual que el presupuesto. */
:root{
  --l-ink:#04000d; --l-panel:#0f0722; --l-panel2:#160730;
  --l-txt:#e7e3f5; --l-dim:#b9b2d0; --l-silver:#9ca3af;
  --l-acento:#a855f7; --l-acento-rgb:168,85,247;
  --l-oro:#fbbf24; --l-ok:#34d399; --l-info:#22d3ee;
}
html[data-marca="criaturados"]{
  --l-ink:#0c0603; --l-panel:#160b03; --l-panel2:#24150a;
  --l-acento:#2dd4bf; --l-acento-rgb:45,212,191; --l-oro:#f59e0b;
}
body{ background:var(--l-ink) !important; color:var(--l-txt) !important; }
.container{ max-width:900px; margin:-30px auto 60px; padding:0 20px; }
.content-box{
  background:var(--l-panel) !important;
  border:1px solid rgba(var(--l-acento-rgb),.18) !important;
  border-radius:16px !important; padding:44px !important;
  box-shadow:0 10px 40px rgba(0,0,0,.45) !important;
}
h1,h2,h3,h4{ color:var(--l-txt) !important; }
h2{
  color:var(--l-acento) !important; margin:40px 0 18px !important;
  padding-bottom:10px !important;
  border-bottom:1px solid rgba(var(--l-acento-rgb),.22) !important;
}
h3{ color:var(--l-oro) !important; }
p,li,td{ color:var(--l-dim) !important; }
strong,b{ color:var(--l-txt) !important; }
a{ color:var(--l-acento) !important; }
a:hover{ color:var(--l-oro) !important; }
.last-updated{
  background:rgba(var(--l-acento-rgb),.08) !important;
  border-left:4px solid var(--l-acento) !important;
  color:var(--l-dim) !important;
}
.highlight-box{
  background:rgba(251,191,36,.07) !important;
  border-left:4px solid var(--l-oro) !important; color:var(--l-dim) !important;
}
.info-box{
  background:rgba(34,211,238,.07) !important;
  border-left:4px solid var(--l-info) !important; color:var(--l-dim) !important;
}
table{ border-collapse:collapse; width:100%; }
th,td{ border:1px solid rgba(var(--l-acento-rgb),.18) !important; padding:12px !important; }
th{ background:var(--l-panel2) !important; color:var(--l-txt) !important; }
hr{ border-color:rgba(var(--l-acento-rgb),.18) !important; }
::selection{ background:rgba(var(--l-acento-rgb),.35); }
@media (max-width:768px){
  .content-box{ padding:26px 18px !important; }
  .container{ padding:0 14px; }
}

/* ── El menú ───────────────────────────────────────────────────────────────
   Las reglas del menú viven en el <style> de index.html, no en nav.js, así que
   en las páginas que no lo copian el logo sale a tamaño natural y crece con la
   pantalla hasta pisar el texto. Aquí se le pone el mismo tope que en el resto
   del sitio. */
.nav-logo img{ height:56px !important; width:auto !important; max-width:none !important; }
@media (min-width:900px){ .nav-logo img{ height:72px !important; } }
.nav-logo{ display:flex; align-items:center; flex:0 0 auto; }