body {
  font-family: 'Inter', sans-serif;
  background-color: #090d16;
  color: #f1f5f9;
  overflow-x: hidden;
}

body.light {
  background-color: #f4f8fb;
  color: #172033;
}

body.light .glass-card { background: rgba(255, 255, 255, .78); border-color: rgba(0, 104, 138, .18); }
body.light .glass-card:hover { border-color: rgba(0, 156, 196, .55); box-shadow: 0 16px 35px rgba(0, 103, 145, .13); }
body.light .glass-nav { background: rgba(255, 255, 255, .88); border-bottom-color: rgba(0, 104, 138, .14); }
body.light .bg-grid-pattern { background-image: linear-gradient(to right, rgba(0, 112, 152, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 112, 152, .07) 1px, transparent 1px); }
body.light .brand-mark-tile { background: linear-gradient(145deg, rgba(0, 175, 215, .12), rgba(255, 255, 255, .88)); border-color: rgba(0, 137, 181, .22); }
body.light .text-white { color: #122033 !important; }
body.light .text-slate-200 { color: #26354a !important; }
body.light .text-slate-300 { color: #334155 !important; }
body.light .text-slate-400 { color: #526278 !important; }
body.light .text-slate-500 { color: #64748b !important; }
body.light .text-brand-cyan { color: #00738f !important; }
body.light .text-brand-neon { color: #006e98 !important; }
body.light .text-gradient-cyan { background-image: linear-gradient(135deg, #00738f 0%, #005a7c 100%); }
body.light .border-slate-800, body.light .border-slate-700 { border-color: #d7e1ea !important; }
body.light .bg-brand-bg, body.light .bg-brand-surface\/30 { background-color: #eef5f8 !important; }
body.light .bg-slate-900 { background-color: #fff !important; }
body.light input, body.light select, body.light textarea { color: #172033 !important; }
body.light #contactModal { background-color: rgba(228, 238, 245, .82); }
body.light .text-gradient { background-image: linear-gradient(135deg, #005a7c 0%, #008cbb 50%, #00aebe 100%); }
body.light ::-webkit-scrollbar-track { background: #edf4f7; }

.glass-card {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(18, 155, 187, 0.2);
}

.glass-card:hover {
  border-color: rgba(0, 242, 254, 0.5);
  box-shadow: 0 0 30px rgba(18, 155, 187, 0.3);
}

.glass-nav {
  background: rgba(9, 13, 22, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(18, 155, 187, 0.15);
}

.text-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #38bdf8 50%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-cyan {
  background: linear-gradient(135deg, #00f2fe 0%, #129bbb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-grid-pattern {
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, rgba(18, 155, 187, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 155, 187, 0.05) 1px, transparent 1px);
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #090d16;
}

::-webkit-scrollbar-thumb {
  background: #004c68;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #129bbb;
}

.brand-logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 11px rgba(0, 170, 215, .22));
}

.brand-logo-header {
  width: min(244px, 48vw);
  max-height: 58px;
}

.brand-logo-footer {
  width: 248px;
  max-width: 100%;
}

.brand-logo-hero {
  width: min(300px, 77vw);
  margin: auto;
  filter: drop-shadow(0 0 28px rgba(0, 176, 230, .24));
}

.brand-display {
  position: relative;
  isolation: isolate;
}

.brand-display::before {
  content: "";
  position: absolute;
  inset: 12% 18%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(18, 155, 187, .19);
  filter: blur(48px);
}

.brand-display img {
  transition: transform .35s ease;
}

.brand-display:hover img {
  transform: translateY(-3px);
}

.brand-mark-tile {
  background: linear-gradient(145deg, rgba(18, 155, 187, .13), rgba(15, 23, 42, .4));
  border: 1px solid rgba(18, 155, 187, .32);
}

section[id], div[id="logistica"], div[id="capacitacion"] {
  scroll-margin-top: 100px;
}

@media (max-width: 640px) {
  .brand-logo-header { width: 176px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-display img { transition: none; }
}