/* Estilo común de atmosferacanibal.com.
   Los colores salen de la paleta oficial (assets/visuales/identidad/paleta.md).
   Si la identidad cambia, se cambia aquí y en paleta.md, nunca color por color. */

@font-face {
  font-family: 'Atmosfera Canibal';
  src: url('/fuentes/AtmosferaCanibal-VF.ttf') format('truetype');
  font-display: swap;
}

:root {
  --negro-abismo: #050505;
  --rojo-arterial: #8B0000;
  --rojo-brillo: #D10000;
  --gris-crt: #2B2B36;
  --blanco-clinico: #EAEAEA;
  --gris-texto: #9a9aa6;
  /* Villa de las Ánimas: cielo crepuscular violeta y bruma yodada (dirección de Brandon, 2026-10-14) */
  --violeta-noche: #1b1030;
  --violeta-cielo: #5b3a8c;
  --violeta-borde: #b48ce0;
  --bruma: #d9cfe8;
}

* { box-sizing: border-box; }
/* "hidden" siempre gana, aunque un estilo diga display:inline-block */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--negro-abismo);
  color: var(--blanco-clinico);
  font: 17px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rojo-brillo); outline-offset: 4px; }
img { max-width: 100%; display: block; }

.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Etiquetas tipo OSD de cámara */
.osd {
  font: 12px/1.5 'Atmosfera Canibal', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.osd .rec { color: var(--rojo-brillo); }
.osd .rec::before { content: '● '; animation: parpadeo 1.6s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Texto con la tipografía propia; el eje CRPT (0–1000) es la "corrupción" de la letra */
.corrupta {
  font-family: 'Atmosfera Canibal', ui-monospace, monospace;
  font-variation-settings: 'CRPT' 0;
  transition: font-variation-settings .6s;
}
.corrupta:hover { font-variation-settings: 'CRPT' 650; }

/* Grano de cinta: ruido SVG muy tenue sobre toda la página */
.grano::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 50;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}