/* =====================================================================
   Core Solution by Fortech · Base: colores, textura y tipografía
   Para cambiar la paleta solo se tocan las variables de :root.
   ===================================================================== */
:root {
  --fondo: #07090d;
  --fondo-2: #0e1219;
  --panel: rgba(18, 23, 32, 0.86);
  --borde: rgba(160, 180, 210, 0.16);
  --texto: #eef2f8;
  --texto-suave: #9aa6b8;

  --rojo: #d4202c;          /* Escudo Fortech */
  --rojo-brillo: #ff3b47;
  --plata: #c9d1dc;
  --azul: #2f8cff;          /* Acento de telecomunicaciones */
  --verde: #2fd47a;
  --ambar: #ffb020;
  --peligro: #ff4d5e;

  --radio: 14px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-marca: "Rajdhani", "Inter", system-ui, sans-serif;
  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 32px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--texto); font-family: var(--fuente); line-height: 1.5;
  background-color: var(--fondo);
  /* Textura: trazos de circuito muy tenues y un resplandor rojo del escudo */
  background-image:
    radial-gradient(900px 500px at 90% -10%, rgba(212, 32, 44, 0.16), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(47, 140, 255, 0.10), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
  background-attachment: fixed;
  overflow-x: hidden;
}
h1, h2, h3 { line-height: 1.2; margin: 0; }
h2 { font-family: var(--fuente-marca); font-weight: 700; letter-spacing: .03em; font-size: clamp(1.2rem, 2.6vw, 1.6rem); }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--azul); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }