/* © 2026 Koizumi Electronics — Uso no autorizado prohibido, todos los derechos reservados. */

:root {
  --white-soft: rgba(248, 253, 255, 0.94);
  --white-muted: rgba(226, 242, 246, 0.76);
  --glass: rgba(24, 72, 82, 0.34);
  --glass-strong: rgba(29, 83, 94, 0.46);
  --stroke: rgba(118, 203, 212, 0.34);
  --stroke-strong: rgba(118, 203, 212, 0.52);
  --shadow-card: 0 18px 36px rgba(4, 22, 28, 0.18);
  --shadow-cyan: 0 0 24px rgba(88, 185, 196, 0.07);
  --kz-bg-base: #0b5260;
  --kz-bg-mid: #128395;
  --kz-bg-soft: #1ba6b1;
  --kz-bg-glow: rgba(88, 219, 230, 0.12);
  --kz-surface-soft: rgba(15, 56, 66, 0.38);
  --kz-surface-medium: rgba(24, 78, 90, 0.48);
  --kz-surface-strong: rgba(15, 50, 60, 0.68);
  --kz-surface-compact: rgba(10, 42, 52, 0.62);
  --kz-line-soft: rgba(224, 247, 250, 0.15);
  --kz-line-medium: rgba(139, 223, 230, 0.28);
  --kz-line-strong: rgba(151, 235, 240, 0.46);
  --kz-geometry-line: rgba(128, 218, 224, 0.12);
  --kz-geometry-line-strong: rgba(128, 218, 224, 0.28);
  --kz-geometry-fill: rgba(32, 90, 100, 0.20);
  --kz-geometry-fill-strong: rgba(42, 105, 112, 0.28);
  --kz-geometry-shadow: 0 16px 34px rgba(5, 22, 28, 0.17), 0 0 18px rgba(88, 185, 196, 0.03);
  --kz-topbar-surface: linear-gradient(180deg, rgba(15, 70, 82, 0.86), rgba(10, 45, 56, 0.78));
  --kz-footer-surface: linear-gradient(180deg, rgba(15, 70, 82, 0.84), rgba(10, 45, 56, 0.88));
  --kz-accent-blue: #5ed8ea;
  --kz-accent-orange: #e1a04d;
  --kz-accent-green: #6ed5a3;
  --rotator-static-color: var(--kz-accent-blue);
  --rotator-dynamic-color: var(--kz-accent-orange);
  --text-edge-color: rgba(1, 7, 12, 0.84);
}

html {
  background: var(--kz-bg-base) !important;
}

body {
  color: var(--white-soft) !important;
  background:
    radial-gradient(circle at 50% 34%, var(--kz-bg-glow) 0 8%, transparent 29%),
    radial-gradient(circle at 12% 16%, rgba(215, 252, 255, 0.045) 0 7%, transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(86, 191, 206, 0.08) 0 10%, transparent 34%),
    linear-gradient(135deg, var(--kz-bg-base) 0%, var(--kz-bg-mid) 48%, var(--kz-bg-soft) 100%) !important;
}

body::before {
  opacity: 0.11 !important;
  background:
    linear-gradient(rgba(224, 247, 250, 0.044) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 247, 250, 0.032) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  mask-image: radial-gradient(circle at center, black 0 54%, transparent 82%) !important;
}

body::after {
  background:
    linear-gradient(180deg, rgba(2, 15, 20, 0.045), transparent 22%, transparent 76%, rgba(2, 15, 20, 0.095)),
    radial-gradient(circle at center, transparent 0 56%, rgba(5, 28, 34, 0.13) 84%, rgba(4, 22, 28, 0.21) 100%) !important;
}