/* «Cómo funciona» en 3 pasos debajo del hero. 29/10/2026: tarjetas blancas planas con borde gris
   ícono arriba a la izquierda y número grande celeste arriba a la derecha.
   Escritorio: 3 en fila; celular: una debajo de la otra. La versión anterior (línea gris) está en ~/proyectos/webteveo.com/respaldo-como-funciona-linea.css */
.como-funciona{background:#fff;padding:clamp(48px,6vw,80px) 0}
.como-funciona__titulo{position:relative;font-family:var(--f-titulos);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;color:var(--cab-pri);font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);margin:0 0 clamp(28px,3vw,44px)}

.como-funciona__pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:860px){.como-funciona__pasos{grid-template-columns:repeat(3,1fr);gap:28px}}

.paso{position:relative;background:#fff;border:2px solid var(--cab-borde);border-radius:12px;padding:24px 22px 26px}
.paso__num{position:absolute;top:18px;right:22px;font-family:var(--f-titulos);font-weight:700;font-size:2.6rem;line-height:1;color:#D2D2D2}
.paso__ico{display:block;margin-bottom:16px}
.paso__ico img{display:block;width:84px;height:84px;object-fit:contain}
.paso__titulo{font-family:var(--f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.15;color:var(--cab-pri);font-size:var(--cab-fs-h3);margin:0 0 .45em}
.paso__texto{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--cab-texto-2);margin:0}

@media (max-width:859px){
  .paso{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:start;padding:20px 18px;padding-right:60px}
  .paso__ico{margin:0;width:64px;height:64px;align-self:center}
  .paso__ico img{width:64px;height:64px}
  .paso__num{top:16px;right:16px;font-size:2rem}
}