/* =========================================================================
   Animaciones de la portada. Decisión 69.

   Las secciones aparecen al bajar: suben 28 px y se aclaran. Las columnas
   entran una detrás de otra. Solo transform y opacity: no mueven nada de
   lugar ni corren el texto.

   Nada se esconde sin JavaScript: lo oculto depende de la clase fsb-anima,
   que pone un script en la cabeza solo si el navegador puede animar y la
   persona no pidió reducir el movimiento. Si el script de animaciones no
   llega en 2,5 segundos, la clase se saca y todo se ve.

   Lo oculto se escribe con :not(.fsb-visible): cuando el script marca un
   elemento como visible, la regla deja de aplicarse sola, sin pelear por
   especificidad. Los selectores son los de assets/js/animaciones.js.

   Las tarjetas no se mueven al pasar el mouse: no son botones.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

	.fsb-anima main > .alignfull > :not(.wp-block-columns),
	.fsb-anima main > .alignfull > .wp-block-columns > .wp-block-column,
	.fsb-anima main .fsl .maqueta {
		transition:
			opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--fsb-retardo, 0ms),
			transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--fsb-retardo, 0ms);
	}

	.fsb-anima main > .alignfull > :not(.wp-block-columns):not(.fsb-visible),
	.fsb-anima main > .alignfull > .wp-block-columns > .wp-block-column:not(.fsb-visible),
	.fsb-anima main .fsl .maqueta:not(.fsb-visible) {
		opacity: 0;
		transform: translateY(28px);
	}

	/* Los botones responden al pasar el mouse. */
	.wp-block-button__link,
	.fsl .btn {
		transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
	}
	.wp-block-button__link:hover,
	.fsl .btn:not(:disabled):hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 22px rgba(15, 26, 58, 0.18);
	}
}

@media print {
	.fsb-anima main * { opacity: 1 !important; transform: none !important; }
}