/* ==========================================================================
   Sección 6 — Ventajas + resultados (PMST_ES, Figma 929:7502)
   Fondo cyan pleno, texto blanco. Header (pill + título 64 + H3 + p22) +
   "Resultados concretos" (40) + 5 tarjetas resultado (icono 60 + label).
   ========================================================================== */

.benefits {
  background: var(--color-info); /* #37b1d3 */
  color: #fff;
}
.benefits__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* pill sobre fondo de color */
.pill-tag--on-color {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.pill-tag--on-color::before { background: #fff; }

/* ---- Header ---- */
.benefits__header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.benefits__header-eyebrow { flex-shrink: 0; width: 302px; max-width: 100%; }
.benefits__header-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.benefits__title {
  font-size: clamp(2.5rem, 1.4rem + 3.5vw, 4rem); /* 64px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: #fff;
}
.benefits__subtitle {
  font-size: var(--fs-h3); /* 32px */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  color: #fff;
}
.benefits__text {
  font-size: var(--fs-p22); /* 22px */
  font-weight: var(--fw-regular);
  line-height: 1.3;
  color: #fff;
}

/* ---- "Resultados concretos" ---- */
.benefits__results-title {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); /* 40px */
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: #fff;
  max-width: 660px;
}

/* ---- Grid resultados ---- */
.benefits__results {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.result-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border-radius: 60px;
  background: rgba(234, 234, 234, 0.4);
  text-align: center;
}
.result-card__ic { width: 60px; height: 60px; flex-shrink: 0; }
.result-card__label {
  font-size: var(--fs-p22); /* 22px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: #fff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .benefits__inner { gap: 48px; }
  .benefits__header { flex-direction: column; }
  .benefits__header-eyebrow { width: auto; }
  .benefits__results { flex-wrap: wrap; }
  .result-card { flex: 1 1 40%; border-radius: 40px; }
}

@media (max-width: 720px) {
  .benefits__subtitle { font-size: 1.5rem; }
  .benefits__text { font-size: var(--fs-body); }
  .result-card { flex: 1 1 100%; border-radius: 32px; }
}