/* ============================================================
   FOOTER — franja de características
   ============================================================ */

.footer {
  background: linear-gradient(120deg, var(--azul-profundo), var(--azul-marino));
  color: #fff;
  padding: 36px 36px;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1400px; margin: 0 auto;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.feat { display: flex; gap: 16px; align-items: flex-start; }
.feat__icono {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
}
.feat__icono svg { width: 24px; height: 24px; color: #fff; }
.feat--azul   .feat__icono { background: var(--azul-medio); }
.feat--verde  .feat__icono { background: var(--verde-agua); }
.feat--amar   .feat__icono { background: var(--acento-amar); }
.feat--cyan   .feat__icono { background: var(--azul-claro); }

.feat__title {
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
.feat__txt {
  font-size: 13px; color: rgba(255,255,255,.78);
  margin-top: 6px; line-height: 1.5;
}