:root{
  --brand: #1a5e86;       /* azul del logo aproximado */
  --neon: #10d5ff;        /* acento techno */
  --neon-2:#ff3cff;
  --bg-dark:#0a0a0f;
  --bg-darker:#0d0d15;
  --text:#e8e8f0;
}

html,body{ background: var(--bg-dark); color: var(--text); scroll-behavior:smooth; }
a{ text-decoration:none; } a:hover{ opacity:.9; }

/* Navbar */
.bg-dark-glass{ background: rgba(10,10,20,.75); backdrop-filter: blur(10px); }
.border-neon{ border: 1px solid rgba(16,213,255,.35)!important; }
.text-neon{ color: var(--neon)!important; }
.brand-logo{ height:36px; width:auto; filter: drop-shadow(0 0 8px rgba(16,213,255,.25)); }
.btn-neon{
  background: linear-gradient(90deg, var(--neon), var(--neon-2));
  color:#000; border: none;
  box-shadow: 0 0 18px rgba(16,213,255,.25), inset 0 0 10px rgba(255,255,255,.15);
}
.btn-neon:hover{ transform: translateY(-1px); color:#000; }
.navbar .nav-link{ color:#cfd3ff; } .navbar .nav-link.active{ color:var(--neon); }

/* Hero */
.hero{
  min-height: 88vh;
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(16,213,255,.25), transparent 60%),
    radial-gradient(800px 400px at 100% 0%, rgba(255,60,255,.12), transparent 60%),
    linear-gradient(180deg, #0b0b13 0%, #0a0a0f 60%);
}
.hero .overlay{
  position:absolute; inset:0;
  background-image: url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=1600&auto=format&fit=crop');
  background-size:cover; background-position:center; mix-blend-mode: overlay; opacity:.18;
}
.hero-logo{ height:54px; width:auto; object-fit:contain; }

/* Títulos / secciones */
.section-title{ font-weight:800; letter-spacing:.3px; margin-bottom:.5rem; color:#fff;
  text-shadow: 0 0 18px rgba(16,213,255,.15); }
.bg-darker{ background: var(--bg-darker); }
.glow{ text-shadow: 0 0 24px rgba(16,213,255,.45); }
.lead-hero{ font-size:1.1rem; max-width:38rem; color:#d7dbff; }

/* Cards servicios */
.service-card{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px; transition: transform .2s, box-shadow .2s; }
.service-card:hover{ transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0,0,0,.35); }
.icon-wrap{
  width:54px;height:54px;display:grid;place-items:center;border-radius:12px;margin-bottom:.75rem;
  background: radial-gradient(120% 120% at 0% 0%, var(--neon), transparent 70%); color:#000; font-size:1.4rem;
}

/* Bullets/mini-cards */
.feature{ display:flex; gap:.6rem; align-items:center; } .feature i{ color:var(--neon); }
.mini-card{ display:flex; gap:.8rem; align-items:flex-start; padding:.8rem; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; background:rgba(255,255,255,.02); }
.mini-card i{ color:var(--neon); font-size:1.2rem; margin-top:.2rem; }

/* Carousel */
.carousel-caption{ background:rgba(0,0,0,.35); border-radius:10px; }
.object-fit-cover{ object-fit:cover; }

/* CTA */
.bg-gradient-neon{
  background:
    radial-gradient(1200px 300px at 20% -10%, rgba(16,213,255,.25), transparent 60%),
    radial-gradient(800px 300px at 100% 0%, rgba(255,60,255,.18), transparent 60%),
    linear-gradient(180deg, #121223, #0e0e18);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Formularios */
.form-control, .form-select{ background:#0e0e16; color:#eaeaff; border:1px solid rgba(255,255,255,.1); }
.form-control:focus{ border-color: var(--neon); box-shadow:0 0 0 .2rem rgba(16,213,255,.1); }

/* Responsivo */
@media (max-width: 576px){
  .lead-hero{ font-size:1rem; }
}
#menu {
  background: linear-gradient(135deg, rgba(16,213,255,0.15), rgba(255,60,255,0.15)), #121224;
}

#menu .section-title {
  color: #fff;
  text-shadow: 0 0 12px rgba(16,213,255,0.4), 0 0 18px rgba(255,60,255,0.2);
}

#menu p {
  color: #dfe6ff;
}

/* Tarjetas más brillantes */
#menu .service-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(16,213,255,0.4);
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}

#menu .service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,60,255,0.8);
  box-shadow: 0 0 20px rgba(16,213,255,0.3), 0 0 30px rgba(255,60,255,0.2);
}

#menu .icon-wrap {
  background: radial-gradient(120% 120% at 0% 0%, var(--neon), transparent 70%);
  border: 2px solid rgba(255,255,255,0.3);
}

#menu .card-title {
  color: #10d5ff; /* azul neón */
  font-weight: 700;
  text-shadow: 0 0 8px rgba(16,213,255,0.3);