/* ==========================================================================
   Beneficios V7 — sección «Tu agenda, en un solo lugar»
   Encapsulada con clases benefits-*. Reutiliza tokens de tema y Poppins.
   ========================================================================== */
.benefits-section{
  width:min(1200px, 100%);
  max-width:100%;
  margin:0 auto;
  padding:0;
  scroll-margin-top:90px;
}
.benefits-section .benefits-head{
  display:grid;
  gap:var(--space-3);
  text-align:center;
  max-width:760px;
  margin:0 auto var(--space-8);
}
.benefits-eyebrow{
  margin:0;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
}
.benefits-title{
  margin:0;
  font-size:clamp(30px, 4.4vw, 46px);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-0.04em;
  color:var(--text);
  text-wrap:balance;
}
.benefits-title__word{
  position:relative;
  display:inline-block;
}
.benefits-title__spark{
  position:absolute;
  width:.62em;
  height:auto;
  left:-.73em;
  top:-.4em;
  pointer-events:none;
}
.benefits-title__gradient{
  display:inline-block;
  background:linear-gradient(106deg,#7530ef 8%,#435ceb 66%,#0c8297 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:#6740d6;
  -webkit-text-fill-color:transparent;
  padding-bottom:.08em;
}
.benefits-subtitle{
  margin:0;
  color:var(--text-muted);
  font-size:1.0625rem;
  line-height:1.6;
  max-width:60ch;
  margin-inline:auto;
  text-wrap:pretty;
}

/* Grilla: 4 + 3 centradas en escritorio amplio; 2 columnas; 1 en móvil.
   flex-wrap + justify-content:center conserva el ancho y centra el conjunto. */
.benefits-section .benefits-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}
.benefits-section .benefits-grid__item{
  flex:0 1 calc((100% - 60px) / 4);
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:20px 22px;
  background:var(--surface-solid);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow-sm);
  font-size:.9375rem;
  line-height:1.55;
  color:var(--text);
}
.benefits-card__icon{
  flex:none;
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--primary-soft);
  color:var(--primary);
}
.benefits-card__icon svg{
  width:20px;
  height:20px;
}
.benefits-card__text{
  min-width:0;
  overflow-wrap:anywhere;
}

@media (max-width:1199px){
  .benefits-section .benefits-grid__item{
    flex-basis:calc((100% - 20px) / 2);
  }
}
@media (max-width:639px){
  .benefits-section .benefits-head{
    max-width:560px;
    margin-bottom:var(--space-7);
  }
  .benefits-title{
    font-size:clamp(30px, 8vw, 34px);
  }
  .benefits-subtitle{
    font-size:1rem;
  }
  .benefits-section .benefits-grid{
    max-width:480px;
  }
  .benefits-section .benefits-grid__item{
    flex-basis:100%;
    padding:20px;
  }
}
@media (prefers-reduced-motion:reduce){
  .benefits-section *,
  .benefits-section *::before,
  .benefits-section *::after{
    transition:none !important;
  }
}
@media (forced-colors:active){
  .benefits-section .benefits-grid__item{
    background:Canvas;
    color:CanvasText;
    border:1px solid CanvasText;
  }
  .benefits-title__gradient{
    background:none;
    -webkit-text-fill-color:CanvasText;
    color:CanvasText;
  }
  .benefits-title__spark{
    display:none !important;
  }
  .benefits-card__icon{
    background:Canvas;
    color:CanvasText;
    border:1px solid CanvasText;
  }
}