/* Datanex Widgets — Proceso (dnx-proceso) */
.hf-metodo{display:grid;grid-template-columns:repeat(var(--hf-pasos-cols,5),minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.hf-paso{display:flex;flex-direction:column;gap:12px;padding:28px 24px 30px;background:#fff;border:1px solid var(--hf-linea);border-radius:var(--hf-radio-img);transition:border-color .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1)}
.hf-fondo-marfil .hf-paso{border-color:#fff}
.hf-paso__num{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:52px;height:52px;border-radius:14px;background:var(--hf-azul);color:var(--hf-arena);font-size:18px;font-weight:800;line-height:1;letter-spacing:.02em;transition:background-color .45s cubic-bezier(.22,.61,.36,1)}
.hf-paso h3{margin:0;font-size:20px;line-height:1.25;font-weight:700;color:var(--hf-azul)}
.hf-paso p{margin:0;font-size:15px;line-height:1.6;color:var(--hf-texto-2)}

/* Hover: borde arena suave y sombra leve; con "Tinte suave" la insignia pasa al azul vecino */
@media (hover:hover){
  .hf-paso:hover{border-color:var(--hf-arena);box-shadow:0 12px 32px rgba(14,39,70,.07)}
  .hf-anim-tinte .hf-paso:hover .hf-paso__num{background:var(--hf-azul-2)}
}

@media (max-width:1199px){
  .hf-metodo{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:959px){
  .hf-metodo{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .hf-metodo{grid-template-columns:1fr;gap:12px}
  .hf-paso{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:20px}
  .hf-paso__num{grid-row:span 2}
}
@media (prefers-reduced-motion:reduce){.hf-paso,.hf-paso__num{transition:none}}