/* =========================================================================
   DIFERENCIALES.CSS — Bloque de ventajas + franja de valores sobre azul
   ========================================================================= */

.diferenciales { background: var(--navy); color: #fff; }
.diferenciales .section-title,
.diferenciales .section-title em { color: #fff; }
.diferenciales .section-desc { color: var(--text-on-navy-soft); }
.diferenciales .eyebrow, .diferenciales .eyebrow::before { color: var(--blue-soft); }

.values-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.value {
  padding: 1.9rem 1.6rem; border-radius: var(--radius);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.value:hover { background: rgba(46,109,164,.22); border-color: var(--blue-soft); transform: translateY(-5px); }
.value__icon { width: 48px; height: 48px; color: var(--blue-soft); margin-bottom: 1rem; }
.value__icon svg { width: 100%; height: 100%; }
.value h3 { color: #fff; font-size: 1.16rem; margin-bottom: .5rem; }
.value p { color: var(--text-on-navy-soft); font-size: .96rem; }