/* MetFam Tecnologías — electric blue, cyan and brushed silver. */
:root {
  color-scheme: dark;
  --color-purple-100: #e0f7ff;
  --color-purple-200: #bae6fd;
  --color-purple-300: #67e8f9;
  --color-purple-400: #38bdf8;
  --color-purple-500: #0ea5e9;
  --color-purple-600: #0369a1;
  --color-purple-800: #0c4a6e;
  --color-purple-950: #082f49;
  --color-violet-500: #0284c7;
  --color-night: #050c17;
}
body {
  color: #edf6ff;
  background: radial-gradient(ellipse at 90% 8%, #0b355647, transparent 48%), #050c17;
}
body::before { opacity: .16; }
body > .bg-purple-950 {
  color: #bae6fd;
  background: #082237;
  border-bottom: 1px solid #38bdf81f;
}
header.bg-night\/95 { background: #050c17f2; }
header, footer { border-color: #38bdf826; }
.division-name, .brand-large strong { color: #7dd3fc; }
.division-name small, .brand-large small { color: #a1b6cb; }
.technology-accent {
  color: #67e8f9;
  background: linear-gradient(110deg, #60a5fa, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Recolor the existing artwork at display time, retaining every logo detail. */
.site-hero img, .brand-large img {
  filter: hue-rotate(-90deg) saturate(.95);
  box-shadow: 0 0 0 1px #38bdf833, 0 18px 60px #0284c71f;
}
.eyebrow { color: #67e8f9; }
.muted, .service-grid p { color: #a6b7cc; }
.panel {
  background: linear-gradient(145deg, #0d1c2df2, #081422f5);
  border-color: #38bdf82e;
  box-shadow: inset 0 1px 0 #e0f2fe08;
}
.panel:has(input[type="checkbox"]:checked) {
  border-color: #38bdf8aa;
  box-shadow: 0 0 0 1px #38bdf826;
}
.button {
  background-image: linear-gradient(110deg, #0369a1, #0284c7);
  color: #fff;
  box-shadow: 0 4px 20px #0284c71f;
}
.button:hover { background-image: linear-gradient(110deg, #075985, #0369a1); }
.secondary { color: #d9f3ff; background: #0c213366; border-color: #38bdf84d; }
.secondary:hover { background: #0c354b; border-color: #67e8f9; }
.field { background: #050e1c; border-color: #38bdf84d; color: #edf6ff; }
input[type="checkbox"] { accent-color: #0ea5e9; }
a, button, input, textarea { outline-offset: 4px; }
:focus-visible { outline: 2px solid #67e8f9; }
nav a:not(.secondary):hover, .site-footer a:hover { color: #67e8f9; }
::selection { background: #075985; color: #f0f9ff; }