/* ============================================================
   BRANDING.CSS — Raíz Digital
   Traduce los tokens de branding.json a variables CSS.

   IMPORTANTE: no hay build step en este proyecto (por decisión
   de arquitectura: cero dependencias). Esto significa que estas
   variables y las de branding.json deben mantenerse sincronizadas
   A MANO. Si cambias un color en branding.json, cámbialo aquí
   también.

   VERIFICAR AL INTEGRAR: los nombres de variable aquí (--mk-*)
   están pensados para coincidir con las que ya usa motion-kit/
   motion.css. Antes de dar esto por definitivo, confirma en tu
   copia real de motion.css que estos nombres son exactamente los
   que el kit espera — si difieren, ajusta aquí, nunca en motion.css.
   ============================================================ */

:root {
  /* Colores — validados contra el logotipo real (portada pagina FB 1.png) */
  --mk-fondo: #0a0a1a;       /* Abismo Profundo */
  --mk-primario: #00E5FF;    /* Cian Sistema */
  --mk-secundario: #00FF9E;  /* Verde Raíz */
  --mk-azul: #0078FF;        /* uso: circuitos decorativos de fondo, no protagonista */
  --mk-dorado: #D4AF37;      /* Dorado Premium — reservado para el "núcleo IA" (Mía, calificación) */
  --mk-texto: #FFFFFF;
  --mk-superficie: #1a1a2e;
  --mk-borde: #333355;

  /* Tipografía — PENDIENTE de confirmación oficial.
     Placeholder temporal con fuentes de sistema para no bloquear
     el desarrollo del layout mientras se define. NO usar como
     definitivo en revisiones de marca. */
  --mk-fuente-titulares: -apple-system, "Segoe UI", Roboto, sans-serif;
  --mk-fuente-cuerpo: -apple-system, "Segoe UI", Roboto, sans-serif;
  --mk-fuente-tecnica: "Courier New", monospace;

  /* Espaciado — escala base de 8px */
  --mk-espacio-1: 8px;
  --mk-espacio-2: 16px;
  --mk-espacio-3: 24px;
  --mk-espacio-4: 32px;
  --mk-espacio-5: 48px;
  --mk-espacio-6: 64px;
  --mk-espacio-7: 96px;
  --mk-espacio-8: 128px;

  /* Breakpoints como referencia (las media queries no pueden leer
     variables CSS directamente, se dejan aquí documentadas para
     que layout.css y secciones.css las usen de forma consistente) */
  --mk-breakpoint-tablet: 768px;
  --mk-breakpoint-desktop: 1200px;
}

/* Estilos base mínimos — el resto de la maquetación vive en layout.css */
body {
  background-color: var(--mk-fondo);
  color: var(--mk-texto);
  font-family: var(--mk-fuente-cuerpo);
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--mk-fuente-titulares);
}

/* Respeta la preferencia de movimiento reducido del sistema operativo.
   Si motion.css ya trae su propia regla equivalente, esta puede
   quedar como refuerzo; si no la trae, esta es la que lo garantiza. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}