/* ═══════════════════════════════════════════════════════════════════════════
   /como-funciona/ — ritmo y soporte visual

   PROBLEMA: la página encadenaba SEIS secciones idénticas (píldora, titular,
   entradilla y rejilla de tarjetas) y una sola fotografía en todo el scroll.
   Sin cambio de ritmo el ojo no encuentra dónde agarrarse y la lectura se
   vuelve plana, por muy bueno que sea el contenido.

   SOLUCIÓN: cada uno de los cinco módulos abre con su cabecera a dos columnas
   —texto y fotografía— alternando el lado. El zigzag marca el corte entre
   módulos sin tocar una palabra del copy, y reutiliza las fotos que ya tiene
   cada página de producto, así que la web habla con las mismas imágenes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La banda de texto + fotografía es .fx-split y vive en components.css §16:
   la usan también las seis páginas de «¿Para quién?». */

/* ── 3. LOS CINCO PERFILES ────────────────────────────────────────────── */
/* Cinco columnas en 1.152 px dejaban 216 px por tarjeta y, con el doble
   borde, 174 px de texto: dos palabras por línea. Tres columnas dan 368 px,
   que es donde un párrafo de este largo se lee de corrido. */
.solucion-cards--five { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--fx-space-6); }
.solucion-cards--five > * { grid-column: span 2; }
.solucion-cards--five .solucion-card { padding: var(--fx-space-8); }
.solucion-cards--five .solucion-card-title,
.solucion-cards--five .card-title { font-size: var(--fx-text-xl); }
.solucion-cards--five .solucion-card-desc,
.solucion-cards--five .card-desc { font-size: var(--fx-text-md); line-height: var(--fx-leading-body); }

/* La última fila lleva dos tarjetas. Se centran arrancándolas en las columnas
   2 y 4 de una rejilla de seis: un margen no sirve, porque a un ítem de grid
   le resta ancho en vez de desplazarlo (así se quedaron en 120px de texto). */
.solucion-cards--five > :nth-child(4) { grid-column: 2 / span 2; }
.solucion-cards--five > :nth-child(5) { grid-column: 4 / span 2; }

/* ── 4. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 64rem) {
  .solucion-cards--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solucion-cards--five > *,
  .solucion-cards--five > :nth-child(4),
  .solucion-cards--five > :nth-child(5) { grid-column: auto; }
}


@media (max-width: 37.5rem) {
  .solucion-cards--five { grid-template-columns: 1fr; }
  .solucion-cards--five > * { grid-column: auto; }
}