/* ── Hero background ──────────────────────────────────────── */
/* Cambia esta URL por la imagen real o usa /static/landing/assets/hero.jpg */
.hero-bg {
  background-image: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1920&q=80');
}

/* ── Scroll animations ────────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Navbar scrolled ──────────────────────────────────────── */
#navbar.scrolled {
  background-color: rgba(10, 10, 10, 0.97);
  box-shadow: 0 1px 0 rgba(250, 204, 21, 0.15);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* ── Service cards ────────────────────────────────────────── */
.service-card {
  background-color: #1A1A1A;
  border: 1px solid #2a2a2a;
  border-radius: 0.5rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  border-color: #FACC15;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(250, 204, 21, 0.12);
}

.service-card--red:hover {
  border-color: #EF4444;
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.12);
}

.service-icon {
  width: 3rem;
  height: 3rem;
  background-color: rgba(250, 204, 21, 0.1);
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  color: #FACC15;
  transition: background-color 0.3s ease;
}

.service-card:hover .service-icon {
  background-color: rgba(250, 204, 21, 0.2);
}

.service-icon--red {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.service-card--red:hover .service-icon--red {
  background-color: rgba(239, 68, 68, 0.2);
}

.service-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #FACC15;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.service-card:hover .service-line {
  transform: scaleX(1);
}

.service-line--red {
  background-color: #EF4444;
}

/* ── Smooth scroll global ─────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Custom scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #FACC15; border-radius: 3px; }