/* ====== SECTION: Nuestros Servicios ====== */
.business-units {
  position: relative;
  isolation: isolate;              /* asegura que el overlay no afecte fuera */
  padding: 90px 20px;              /* separación vertical */
  color: #0f172a;                  /* slate-900 */
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(1200px 600px at 90% 100%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
    #0b1220;                       /* color base si no carga la imagen */
  overflow: hidden;
}

/* Imagen de fondo con overlay */
.business-units::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("media/bg-servicios.jpg"); /* ← coloca tu imagen */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* efecto parallax suave */
  transform: translateZ(0);      /* mejora rendimiento */
  filter: saturate(1.05);
}
.business-units::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(2,6,23,.80) 0%,
    rgba(2,6,23,.55) 35%,
    rgba(2,6,23,.80) 100%
  ); /* overlay para contraste y legibilidad */
}

/* Contenido centrado y ancho máximo */
.business-units .bu-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Título */
.business-units .bu-title {
  margin: 0 0 28px;
  font: 700 32px/1.15 "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .3px;
  color: #f8fafc; /* slate-50 */
  text-transform: uppercase;
  position: relative;
}
.business-units .bu-subtitle {
  margin: 0 0 42px;
  font: 400 16px/1.6 "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #cbd5e1; /* slate-300 */
}

/* Grid responsivo */
.business-units .grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1024px) {
  .business-units { padding: 70px 16px; }
  .business-units .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .business-units { padding: 54px 14px; }
  .business-units .bu-title { font-size: 26px; }
  .business-units .grid { grid-template-columns: 1fr; }
}

/* Card */
.business-units .card {
  position: relative;
  border-radius: 18px;
  overflow: clip; /* recorta media y label dentro del borde */
  background: rgba(15, 23, 42, 0.45);   /* glass */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  outline: 1px solid rgba(148, 163, 184, 0.12); /* sutil borde */
}
.business-units .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
  background: rgba(15, 23, 42, 0.55);
}

/* Enlace/área clickable */
.business-units .card .card-link {
  display: grid;
  grid-template-rows: 180px auto;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Media (imagen) */
.business-units .card .media {
  position: relative;
}
.business-units .card .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2,6,23,.55), rgba(2,6,23,0));
  opacity: .9;
  transition: opacity .35s ease;
}
.business-units .card:hover .media::after {
  opacity: .75;
}
.business-units .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .45s ease;
}
.business-units .card:hover img {
  transform: scale(1.06);
}

/* Label */
.business-units .label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}
.business-units .label h3 {
  margin: 0;
  font: 600 18px/1.25 "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #f1f5f9; /* slate-100 */
}
.business-units .label .arrow {
  font: 700 20px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e2e8f0;          /* slate-200 */
  transition: transform .35s ease, color .35s ease;
}
.business-units .card:hover .label .arrow {
  transform: translateX(4px);
  color: #ffffff;
}

/* Accesibilidad al foco */
.business-units .card .card-link:focus-visible {
  outline: 3px solid #93c5fd;      /* azul claro accesible */
  outline-offset: 3px;
  border-radius: 20px;
}

/* Respeta usuarios con “reduced motion” */
@media (prefers-reduced-motion: reduce) {
  .business-units .card,
  .business-units .card img,
  .business-units .media::after,
  .business-units .label .arrow { transition: none !important; }
}