:root {
  --bg: #0b1220;
  --card: #0f172a;
  --soft: #1e293b;
  --accent: #2563eb;
  --accent-2: #38bdf8;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --white: #ffffff;
  --gray: #cbd5e1;
}

/* Animaciones */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(56,189,248,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(56,189,248,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}

/* Imágenes con efecto */
.image-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 0.8s ease forwards;
  opacity: 0;
}

.image-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 18px rgba(56,189,248,0.5);
}

/* Íconos con pulso */
.icon-pulse {
  animation: pulse 2s infinite;
}

/* Secciones */
.section {
  background: linear-gradient(180deg, var(--card), var(--bg));
  border: 1px solid #0e1628;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 24px;
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

/* Botones */
.btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  font-weight: 500;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn.primary {
  background: var(--accent);
  color: var(--white);
}

.btn.primary:hover {
  background: var(--accent-2);
  transform: scale(1.05);
}

.btn.outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.btn.outline:hover {
  background: var(--accent);
  color: var(--white);
}

/* Tarjetas de contenido */
.card {
  background: var(--soft);
  border: 1px solid #12203a;
  border-radius: 14px;
  padding: 18px;
  transition: box-shadow 0.3s ease;
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

.card:hover {
  box-shadow: 0 0 12px rgba(56,189,248,0.3);
}

/* Encabezados */
h2, h3 {
  color: var(--text);
  margin-bottom: 12px;
}

p {
  color: var(--muted);
  line-height: 1.6;
}

.hero-bg {
  background: url("img/hero-bg.jpg") no-repeat center center fixed;
  background-size: cover;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  position: relative;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11,18,32,0.6); /* overlay oscuro */
}

.hero-content {
  position: relative;
  z-index: 1;
  animation: fadeInUp 1s ease forwards;
  opacity: 0;
}

.hero-content h2 {
  font-size: clamp(32px, 5vw, 56px);
  margin-bottom: 12px;
}

.hero-content p {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--gray);
}

.menu-toggle {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text);
  display: none;
}

.nav-links.open {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  padding: 10px;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    right: 20px;
    z-index: 100;
  }
}