:root {
  /* ══════════════════════════════════════════
     PALETA NOVOHOSTMX — No modificar sin aprobación
     Azul = 60% (estructura, nav, marca)
     Verde = 10% (estados, badges)
     Naranja = 5% (solo CTAs)
     Neutros = 25% (fondos, texto, bordes)
     ══════════════════════════════════════════ */

  /* Azul — primario */
  --azul-900: #0a1628;
  --azul-800: #1a3a5c;
  --azul-600: #2563eb;
  --azul-400: #60a5fa;
  --azul-100: #dbeafe;

  /* Verde — secundario */
  --verde-900: #064e3b;
  --verde-600: #059669;
  --verde-400: #34d399;
  --verde-100: #d1fae5;

  /* Naranja — acento (SOLO botones de acción / CTAs) */
  --naranja-900: #9a3412;
  --naranja-600: #ea580c;
  --naranja-400: #fb923c;
  --naranja-100: #ffedd5;

  /* Neutros */
  --texto-primario: #1a1a2e;
  --texto-secundario: #4b5563;
  --texto-muted: #9ca3af;
  --borde: #e5e7eb;
  --borde-fuerte: #d1d5db;
  --fondo-tarjeta: #f3f4f6;
  --fondo-pagina: #f9fafb;
  --blanco: #ffffff;

  /* Estados semánticos — NO usar colores de marca para esto */
  --exito: #059669;
  --exito-fondo: #d1fae5;
  --error: #dc2626;
  --error-fondo: #fee2e2;
  --advertencia: #d97706;
  --advertencia-fondo: #fef3c7;
  --info: #2563eb;
  --info-fondo: #dbeafe;

  /* Tipografía */
  --font-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Espaciado */
  --espaciado-xs: 0.25rem;
  --espaciado-sm: 0.5rem;
  --espaciado-md: 1rem;
  --espaciado-lg: 1.5rem;
  --espaciado-xl: 2rem;
  --espaciado-2xl: 3rem;
  --espaciado-seccion: 4rem;

  /* Bordes */
  --radio-sm: 4px;
  --radio-md: 8px;
  --radio-lg: 12px;
  --radio-full: 9999px;

  /* Sombras (sutiles, no decorativas) */
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sombra-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --sombra-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --sombra-hero: 0 24px 60px rgba(0, 0, 0, 0.35);
  --sombra-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);

  /* Transiciones */
  --transicion: 150ms ease;
  --transicion-media: 250ms ease;
  --transicion-lenta: 400ms ease;

  /* Cromo de ventana (mocks) */
  --ventana-cerrar: #ff5f57;
  --ventana-min: #febc2e;
  --ventana-max: #28c840;
  --dispositivo-marco: #333333;
}

/* Reset mínimo */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-principal);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-primario);
  background-color: var(--fondo-pagina);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--azul-600);
  text-decoration: none;
  transition: color var(--transicion);
}

a:hover {
  color: var(--azul-400);
}

img {
  max-width: 100%;
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.texto-muted {
  color: var(--texto-secundario);
}