/* Widget Encabezado animado — las palabras suben una a una al entrar en pantalla */

.encabezado-animado {
	--ea-duracion: 1.4s;
	--ea-escalonado: 0.1s;
	--ea-retraso: 0s;
	--ea-curva: cubic-bezier(0.19, 1, 0.22, 1);
}

/* El tema fuerza Poppins con !important en h1–h6: aquí manda la fuente elegida en el widget. */
.encabezado-animado .encabezado-animado__texto {
	margin: 0;
	padding: 0;
	font-family: var(--ea-fuente, inherit) !important;
	letter-spacing: normal;
}

.encabezado-animado .encabezado-animado__texto em,
.encabezado-animado .encabezado-animado__texto i {
	font-family: var(--ea-fuente-cursiva, var(--ea-fuente, inherit)) !important;
	font-style: italic;
}

.encabezado-animado--mayusculas .encabezado-animado__texto {
	text-transform: uppercase !important;
}

.encabezado-animado--mayusculas .encabezado-animado__texto em,
.encabezado-animado--mayusculas .encabezado-animado__texto i {
	text-transform: none !important;
}

.encabezado-animado__enlace,
.encabezado-animado__enlace:hover {
	color: inherit;
	text-decoration: none;
}

/* Cada palabra vive en una máscara; el margen negativo compensa el espacio extra para que
   no se corten los rasgos de la cursiva ni las letras con descendente (g, p, y). */
.encabezado-animado__mascara {
	display: inline-block;
	vertical-align: top;
	padding: 0 0.08em 0.12em;
	margin: 0 -0.08em -0.12em;
}

.encabezado-animado--mascara .encabezado-animado__mascara {
	overflow: hidden;
}

.encabezado-animado__palabra {
	display: inline-block;
	will-change: transform;
}

/* Estado inicial (solo con JS; sin JS el texto se ve normal). */
.encabezado-animado.ea-js .encabezado-animado__palabra {
	transition:
		transform var(--ea-duracion) var(--ea-curva),
		opacity calc(var(--ea-duracion) * 0.6) ease-out;
	transition-delay: calc(var(--ea-retraso) + var(--ea-i, 0) * var(--ea-escalonado));
}

.encabezado-animado--mascara.ea-js:not(.is-visible) .encabezado-animado__palabra {
	transform: translateY(115%);
	transition: none;
}

.encabezado-animado--fade.ea-js:not(.is-visible) .encabezado-animado__palabra {
	opacity: 0;
	transform: translateY(0.6em);
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.encabezado-animado.ea-js .encabezado-animado__palabra {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* Una palabra más larga que el ancho disponible (títulos muy grandes en celular) se parte
   en lugar de salirse de la pantalla. */
.encabezado-animado__mascara,
.encabezado-animado__palabra {
	max-width: 100%;
}

.encabezado-animado__palabra {
	overflow-wrap: anywhere;
}

.encabezado-animado.ea-midiendo .encabezado-animado__mascara,
.encabezado-animado.ea-midiendo .encabezado-animado__palabra {
	max-width: none;
	white-space: nowrap;
	transform: none !important;
	transition: none !important;
}