/* /call-forwarding-answering-service/ · página de funcionalidad. Lo compartido (cabecera, lista con
   checks, pasos, llamada de ejemplo con su CTA, reglas, tarjetas que giran, tabla, precio, FAQ,
   banda) está en plantillas.css con prefijo «pag-»; aquí solo lo propio: el paso 1, que lleva las
   cuatro condiciones de desvío, y el párrafo de la escalera encima del CTA de mitad.
   Solo tokens de tokens.css. */

/* ---------- Paso 1 con sus cuatro condiciones ----------
   Desde 1024, el paso 1 ocupa toda la fila y los pasos 2 y 3 van debajo, a medias (con tres
   columnas el paso 1, mucho más largo, dejaría dos columnas cortas al lado). */
@media (min-width: 1024px) {
	.desvio-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-48); }
	.desvio-paso--condiciones { grid-column: 1 / -1; }
}
.desvio-condiciones {
	list-style: none; padding: 0; margin: var(--sp-16) 0;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-12);
}
.desvio-condicion {
	padding: var(--sp-16) var(--sp-24); border-radius: var(--radius-md);
	background: var(--arg-lime-tint); border-left: var(--sp-4) solid var(--arg-leaf);
	color: var(--arg-text);
}
.desvio-condicion strong { display: block; margin-bottom: var(--sp-4); font-weight: 600; }
@media (min-width: 768px) { .desvio-condiciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); } }
@media (min-width: 1280px) { .desvio-condiciones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Columna del CTA de mitad: la escena antes de la llamada a la acción ---------- */
.desvio-escalera { color: var(--arg-text-weak); }
.desvio-escalera + .pag-cta-mitad__texto { margin-top: var(--sp-24); }