/*
 * Las secciones de la home aparecen al bajar (EPH_Aparecer). Los tiempos y la
 * curva son los de la portada de Compumar. La clase `ep-ap-js` la pone el
 * script: sin él, nada queda escondido.
 */
html.ep-ap-js body .rh .ep-ap {
	opacity: 0;
	transform: translateY(28px);
}
/* La transición va solo al aparecer: al esconderse al cargar, de golpe. */
html.ep-ap-js body .rh .ep-ap.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
html.ep-ap-js body .rh .ep-ap .ep-ap-item {
	opacity: 0;
	transform: translateY(18px);
}
html.ep-ap-js body .rh .ep-ap.is-in .ep-ap-item {
	opacity: 1;
	transform: none;
	transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--ep-ap-i, 0) * 70ms + 120ms);
}

/* El encabezado ya es translúcido: al bajar suma la sombra, como el de Compumar. */
.site-header {
	transition: box-shadow .35s;
}
.site-header.ep-ap-bajo {
	box-shadow: 0 8px 30px rgba(9, 22, 57, .08);
}
html[data-theme="dark"] .site-header.ep-ap-bajo {
	box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) {
	html.ep-ap-js body .rh .ep-ap,
	html.ep-ap-js body .rh .ep-ap .ep-ap-item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}