/* css/components/reveal.css · COMPONENTE · aparición al hacer scroll · todas las páginas
   Clases (Elementor → Avanzado → Clases CSS): mt-fx + mt-fx-1…4 (paneles de la home) o mt-fx-a…e (sección «Propuesta de valor»); cada una fija cuándo y cómo aparece el elemento.
   Funciona con la variable --mt-in (0 a 1) que calcula js/home.js según lo que haya subido el bloque. Sin JS, vale 1 y todo se ve. Hoy solo la usa la home.
*/

/* Aparición del contenido de cada panel al entrar (arco, antetítulo, título, párrafo, escalonados), con los tiempos medidos en el demo de Balancia. --mt-in (0 a 1) lo pone js/home.js según lo que
   haya subido el panel (0 al asomar por abajo, 1 al llegar arriba); el último elemento termina un poco antes, así que en reposo todo está a la vista. Sin JS, --mt-in vale 1 (todo visible). */
.mt-home-panel .mt-fx,
.mt-home-values .mt-fx {
	--a: clamp(0, calc((var(--mt-in, 1) - var(--s)) / var(--d)), 1);
	opacity: var(--a);
	filter: blur(calc((1 - var(--a)) * var(--b)));
	transform: translateY(calc((1 - var(--a)) * var(--y))) scale(calc(1 - (1 - var(--a)) * var(--k)));
}

.mt-fx-1 { --s: .15; --d: .30; --b: 15px; --y: 0px; --k: .12; } /* arco */

.mt-fx-2 { --s: .35; --d: .40; --b: 0px;  --y: 0px; --k: 0; } /* antetítulo */

.mt-fx-3 { --s: .50; --d: .35; --b: 15px; --y: 0px; --k: .15; } /* título: aparece desenfocado y crece */

.mt-fx-4 { --s: .66; --d: .26; --b: 0px;  --y: 0px; --k: 0; } /* párrafo */

/* sección 3 (Propuesta de valor): antetítulo, título, foto, listas, botón */
.mt-fx-a { --s: .20; --d: .30; --b: 0px;  --y: 0px; --k: 0; }

.mt-fx-b { --s: .32; --d: .38; --b: 15px; --y: 0px; --k: .12; }

.mt-fx-c { --s: .12; --d: .36; --b: 15px; --y: 0px; --k: .14; }

.mt-fx-d { --s: .55; --d: .30; --b: 6px;  --y: 0px; --k: 0; }

.mt-fx-e { --s: .70; --d: .25; --b: 0px;  --y: 0px; --k: 0; }


/* Aparición de las páginas interiores (Tu proceso, Mi enfoque, Sobre mí): todo lleva «Fundido hacia arriba» (fadeInUp) de Elementor, el mismo efecto que tiene Contacto (fundido + subida, escalonado con el retardo de cada elemento).
   El fadeInUp de Elementor sube el 100 % de la altura del elemento: en un título es poco, pero en una foto de 800 px o una tarjeta enorme sería un viaje larguísimo. Aquí la subida es de 48 px fijos en estas tres páginas; Contacto conserva la de Elementor. */
@keyframes mt-fade-up { from { opacity: 0; transform: translate3d(0, 48px, 0); } to { opacity: 1; transform: none; } }
.mt-page-proceso .fadeInUp, .mt-page-enfoque .fadeInUp, .mt-page-sobre-mi .fadeInUp, .elementor-location-footer .fadeInUp { animation-name: mt-fade-up; } /* el pie también lleva fadeInUp (plantilla compartida) */