/* ─────────────────────────────────────────────────────────
   M&Co — Beneficios · Dark Aurora
   Tercer formato, distinto a Entregables (acordeón) y a
   Método (stepper): franjas de categoría con acento de color
   y filas de beneficio, más un CTA de aurora a pantalla completa.
   ───────────────────────────────────────────────────────── */

/* ── Hero ── */
.beneficios-hero {
  position: relative;
  overflow: hidden;
  padding: 180px 0 90px;
  background: var(--bg);
}
.beneficios-hero .container { position: relative; z-index: 1; }
.beneficios-hero h1 { margin-top: 14px; max-width: 660px; }
.beneficios-hero > .container > p { margin-top: 18px; }

.beneficios-orb-1 {
  position: absolute;
  width: 640px; height: 500px;
  left: -200px; top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70,227,166,0.12), transparent 65%);
  filter: blur(90px);
  pointer-events: none;
}
.beneficios-orb-2 {
  position: absolute;
  width: 640px; height: 500px;
  right: -220px; bottom: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,210,198,0.12), transparent 65%);
  filter: blur(90px);
  pointer-events: none;
}

/* Cifras del hero: números en línea separados por una regla vertical,
   sin caja ni píldora — tercer tratamiento distinto */
.beneficios-figures {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.beneficios-figure { display: flex; flex-direction: column; }
.beneficios-figure strong {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.beneficios-figure span {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-3);
}
.beneficios-figure-divider {
  width: 1px;
  height: 34px;
  background: var(--border-mid);
}

/* ── Nav de categorías (salta a cada franja) ── */
.beneficios-jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.beneficios-jumpnav a {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.beneficios-jumpnav a:hover { color: var(--text); border-color: var(--border-heavy); background: var(--surface-2); }

/* ── Franjas de categoría ── */
.beneficio-categoria {
  scroll-margin-top: 90px;
  margin-bottom: 28px;
  padding: 40px 44px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
}
.beneficio-categoria__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
}
.beneficio-categoria__icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
.beneficio-categoria__head h3 { font-size: 20px; font-weight: 500; color: var(--text); }
.beneficio-categoria__head p { font-size: 13.5px; color: var(--text-3); margin-top: 3px; }

.beneficio-list { margin-top: 26px; }
.beneficio-row {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.beneficio-row:first-child { border-top: none; }
.beneficio-row__mark {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 8px;
}
.beneficio-row__title { font-size: 14.5px; font-weight: 500; color: var(--text); }
.beneficio-row__desc { font-size: 13.5px; line-height: 1.6; color: var(--text-3); margin-top: 3px; }

/* Color por categoría */
.beneficio-categoria--competitivas { border-color: rgba(242,164,92,0.20); background: linear-gradient(160deg, rgba(242,164,92,0.055), var(--surface) 55%); }
.beneficio-categoria--competitivas .beneficio-categoria__icon { background: rgba(242,164,92,0.14); color: var(--orange); }
.beneficio-categoria--competitivas .beneficio-row__mark { background: var(--orange); }

.beneficio-categoria--estructurales { border-color: rgba(56,210,198,0.20); background: linear-gradient(160deg, rgba(56,210,198,0.055), var(--surface) 55%); }
.beneficio-categoria--estructurales .beneficio-categoria__icon { background: rgba(56,210,198,0.14); color: var(--teal); }
.beneficio-categoria--estructurales .beneficio-row__mark { background: var(--teal); }

.beneficio-categoria--seguridad { border-color: rgba(70,227,166,0.20); background: linear-gradient(160deg, rgba(70,227,166,0.055), var(--surface) 55%); }
.beneficio-categoria--seguridad .beneficio-categoria__icon { background: rgba(70,227,166,0.14); color: var(--green-soft); }
.beneficio-categoria--seguridad .beneficio-row__mark { background: var(--green-soft); }

.beneficio-categoria--cumplimiento { border-color: var(--border-mid); background: linear-gradient(160deg, rgba(255,255,255,0.05), var(--surface) 55%); }
.beneficio-categoria--cumplimiento .beneficio-categoria__icon { background: var(--surface-2); color: var(--text-2); }
.beneficio-categoria--cumplimiento .beneficio-row__mark { background: var(--text-3); }

.beneficio-categoria--economicas { border-color: rgba(245,192,142,0.22); background: linear-gradient(160deg, rgba(245,192,142,0.06), var(--surface) 55%); }
.beneficio-categoria--economicas .beneficio-categoria__icon { background: rgba(245,192,142,0.16); color: var(--peach); }
.beneficio-categoria--economicas .beneficio-row__mark { background: var(--peach); }

.beneficio-categoria--confianza { border-color: rgba(70,227,166,0.20); background: linear-gradient(160deg, rgba(123,238,192,0.06), var(--surface) 55%); }
.beneficio-categoria--confianza .beneficio-categoria__icon { background: rgba(123,238,192,0.16); color: var(--green-soft); }
.beneficio-categoria--confianza .beneficio-row__mark { background: var(--green-soft); }

@media (max-width: 768px) {
  .beneficios-hero { padding: 140px 0 64px; }
  .beneficio-categoria { padding: 28px 22px; }
  .beneficio-categoria__head { align-items: flex-start; }
}