/**
 * Encabezado de sección tipo “¿Qué incluye el servicio?” — QA Consulting / DevOps.
 * Patrones y acentos solo con CSS (sin imágenes).
 */

.qa-carousel-section .service-heading,
.devops-carousel-section .service-heading {
  --service-navy: #0a1f4d;
  --service-navy-mid: #0f2d5c;
  --service-electric: #1a6cff;
  --service-electric-soft: rgba(26, 108, 255, 0.35);

  position: relative;
  overflow: hidden;
  margin-bottom: clamp(18px, 3vw, 32px);
  padding: clamp(1.35rem, 2.8vw, 2.15rem) 0 clamp(1.2rem, 2.4vw, 1.85rem);
  background: #fff;
}

/* Puntos laterales: rejilla enmascarada sobre degradado (navy → eléctrico → navy) */
.qa-carousel-section .service-heading-pattern,
.devops-carousel-section .service-heading-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background: linear-gradient(
    118deg,
    var(--service-navy) 0%,
    rgba(26, 108, 255, 0.55) 42%,
    var(--service-electric) 52%,
    rgba(10, 31, 77, 0.5) 78%,
    var(--service-navy-mid) 100%
  );
  -webkit-mask-image: radial-gradient(
      circle at center,
      #000 1.1px,
      transparent 1.18px
    ),
    linear-gradient(
      90deg,
      #000 0%,
      #000 min(18%, 5.5rem),
      transparent 32%,
      transparent 68%,
      #000 max(82%, calc(100% - 5.5rem)),
      #000 100%
    );
  -webkit-mask-size: 15px 15px, 100% 100%;
  -webkit-mask-position: 0 0, center;
  -webkit-mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(
      circle at center,
      #000 1.1px,
      transparent 1.18px
    ),
    linear-gradient(
      90deg,
      #000 0%,
      #000 min(18%, 5.5rem),
      transparent 32%,
      transparent 68%,
      #000 max(82%, calc(100% - 5.5rem)),
      #000 100%
    );
  mask-size: 15px 15px, 100% 100%;
  mask-position: 0 0, center;
  mask-repeat: repeat, no-repeat;
  mask-composite: intersect;
}

.qa-carousel-section .service-heading .container,
.devops-carousel-section .service-heading .container {
  position: relative;
  z-index: 1;
}

.qa-carousel-section .service-heading .row.qa-hero__content-row,
.qa-carousel-section .service-heading .row.devops-carousel-content-row,
.devops-carousel-section .service-heading .row.qa-hero__content-row,
.devops-carousel-section .service-heading .row.devops-carousel-content-row {
  justify-content: center;
}

.qa-carousel-section .service-heading [class*="col-"],
.devops-carousel-section .service-heading [class*="col-"] {
  flex: 0 0 100%;
  max-width: min(42rem, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Barra vertical + bloque del título */
.qa-carousel-section .service-heading-accent,
.devops-carousel-section .service-heading-accent {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.75rem, 1.8vw, 1.1rem);
  padding-left: 0;
}

.qa-carousel-section .service-heading-accent::before,
.devops-carousel-section .service-heading-accent::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  min-height: clamp(2.5rem, 5vw, 3.25rem);
  margin-top: 0.2em;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    var(--service-electric) 0%,
    var(--service-navy-mid) 55%,
    var(--service-navy) 100%
  );
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 4px 14px rgba(26, 108, 255, 0.22);
}

.qa-carousel-section .service-heading-title,
.devops-carousel-section .service-heading-title {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(1.52rem, 2.95vw, 2.35rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--service-navy);
  text-align: center;
  position: relative;
}

@media (max-width: 575px) {
  .qa-carousel-section .service-heading-pattern,
  .devops-carousel-section .service-heading-pattern {
    opacity: 0.62;
    -webkit-mask-image: radial-gradient(
        circle at center,
        #000 1.05px,
        transparent 1.12px
      ),
      linear-gradient(
        90deg,
        #000 0%,
        #000 12%,
        transparent 38%,
        transparent 62%,
        #000 88%,
        #000 100%
      );
    -webkit-mask-size: 14px 14px, 100% 100%;
    mask-image: radial-gradient(
        circle at center,
        #000 1.05px,
        transparent 1.12px
      ),
      linear-gradient(
        90deg,
        #000 0%,
        #000 12%,
        transparent 38%,
        transparent 62%,
        #000 88%,
        #000 100%
      );
    mask-size: 14px 14px, 100% 100%;
  }

  .qa-carousel-section .service-heading-accent::before,
  .devops-carousel-section .service-heading-accent::before {
    width: 3px;
    min-height: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qa-carousel-section .service-heading,
  .devops-carousel-section .service-heading,
  .qa-carousel-section .service-heading-accent::before,
  .devops-carousel-section .service-heading-accent::before {
    box-shadow: none;
  }
}