/* ===========================================================
   LA RATA BLUESERA — base de diseño compartida
   Paleta extraída del logo: negro cálido · dorado/ocre del bote ·
   crema gastado del lettering. Acento frío "río nocturno" derivado.
   =========================================================== */

:root{
  /* Negros cálidos (madera quemada / noche del sur) */
  --ink:        #0b0b09;
  --ink-2:      #13110d;
  --ink-3:      #1c1812;
  --ink-line:   #2a251c;

  /* Dorado / ocre del bote */
  --gold:       #c8962b;
  --gold-2:     #e2b552;
  --gold-deep:  #9a721d;
  --gold-ghost: rgba(200,150,43,0.14);

  /* Crema gastada del lettering / papel viejo */
  --cream:      #e9e0cd;
  --cream-2:    #cfc6b2;
  --cream-dim:  #948c7c;
  --paper:      #ddd0b4;
  --paper-2:    #cabf9f;

  /* Acento frío: río Calle-Calle de noche */
  --river:      #455860;
  --river-2:    #6f878f;

  --maxw: 1240px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:"Bitter", Georgia, serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.mono{ font-family:"Space Mono", ui-monospace, monospace; }
.type{ font-family:"Special Elite", "Space Mono", monospace; }

/* ---------- Grano de papel / suciedad analógica ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Estrellas (réplica del cielo del logo) ---------- */
.stars{
  position:absolute; inset:0; pointer-events:none; opacity:.7;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, var(--cream) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 42%, var(--cream-2) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 47% 12%, var(--cream) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 33%, var(--cream-2) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 81% 20%, var(--cream) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 47%, var(--cream-2) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 38% 62%, var(--cream-2) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 70%, var(--cream) 50%, transparent 51%);
  background-repeat:no-repeat;
}

/* ---------- Lluvia diagonal sureña ---------- */
@keyframes rata-rain{ to{ background-position: -160px 600px, -300px 900px; } }
.rain{
  position:absolute; inset:0; pointer-events:none; opacity:.10;
  background-image:
    repeating-linear-gradient(102deg, transparent 0 22px, rgba(233,224,205,.55) 22px 23px),
    repeating-linear-gradient(102deg, transparent 0 40px, rgba(233,224,205,.30) 40px 41px);
  animation:rata-rain 1.1s linear infinite;
}

/* ---------- Halo dorado ---------- */
.glow-gold{
  background:radial-gradient(60% 60% at 50% 40%, var(--gold-ghost), transparent 70%);
}

/* ---------- Estrella de 4 puntas (motivo del logo) ---------- */
.spark{
  width:1em; height:1em; display:inline-block; background:currentColor;
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}

/* ---------- Reglas / divisores tipo cartel ---------- */
.rule-dot{
  height:0; border:0; border-top:1px dotted var(--ink-line);
}

::selection{ background:var(--gold); color:var(--ink); }

/* Scrollbar */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:var(--ink-2); }
*::-webkit-scrollbar-thumb{ background:var(--gold-deep); border:2px solid var(--ink-2); }