/*
 * Enfoque Title Label Motion - estilos encapsulados.
 * Todo bajo .ei-title-label-motion; no se usan selectores globales de
 * etiqueta (h1, div, span, section, body, *) fuera de este scope. El
 * widget solo anima sus propios elementos internos, nunca bloques
 * externos.
 *
 * Contrato de variables CSS (el JS SOLO escribe --w-*, --ei-tlm-bounce-*
 * y --ei-tlm-auto-scale; todo lo demas ya lo resuelve Elementor de forma
 * nativa via 'selectors' en los controles):
 *   --ei-tlm-title-x / -y                   : offset del texto (nativo)
 *   --w-tx/-ty/-op/-dur/-delay/-ease        : estado animado de cada palabra/linea (JS)
 *   --ei-tlm-label-x/-y/-rot/-scale/-zindex : posicion/rotacion/escala de reposo de la etiqueta (nativo)
 *   --ei-tlm-anchor-tx/-ty                  : translate segun punto de anclaje (CSS estatico via [data-anchor])
 *   --ei-tlm-bounce-x/-y                    : offset de rebote, en px reales (JS)
 *   --ei-tlm-auto-scale                     : multiplicador de autoajuste si no cabe (JS)
 */

.ei-title-label-motion {
	position: relative;
	max-width: 100%;
}

.ei-title-label-motion__inner {
	position: relative;
	width: 100%;
	/* Clip encapsulado SOLO a este widget: la etiqueta (.__label) se
	 * posiciona con position:absolute respecto a ESTE contenedor (ver
	 * comentario en .ei-title-label-motion__label). Si un valor de
	 * posicion configurado (px/vw) excede el ancho real del contenedor
	 * en algun breakpoint, queda recortado aqui en vez de generar scroll
	 * horizontal en la pagina. No afecta a overflow:hidden en body/html
	 * ni en el tema: es local a este widget, que no usa position:sticky. */
	overflow: hidden;
}

/* ===== TEXTO PRINCIPAL ===== */
.ei-title-label-motion__title {
	position: relative;
	margin: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	white-space: pre-line;
	transform: translate( var( --ei-tlm-title-x, 0px ), var( --ei-tlm-title-y, 0px ) );
}

/* Texto accesible completo para lectores de pantalla, oculto visualmente.
 * Solo se renderiza cuando el texto se divide en palabras/lineas/fade
 * (aria-hidden en la version visual), para evitar duplicar el anuncio. */
.ei-title-label-motion__title-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.ei-title-label-motion__title-visual {
	display: inline;
}

/* Unidad animable (palabra, linea completa, o el texto entero en modo
 * "fade"): todas comparten la misma regla. Por defecto (sin JS, con
 * reduced-motion, o antes de inicializar) se ven completas y en su sitio. */
.ei-title-label-motion__word {
	display: inline-block;
	opacity: var( --w-op, 1 );
	transform: translate( var( --w-tx, 0px ), var( --w-ty, 0px ) );
	transition:
		opacity var( --w-dur, 0ms ) var( --w-ease, ease ) var( --w-delay, 0ms ),
		transform var( --w-dur, 0ms ) var( --w-ease, ease ) var( --w-delay, 0ms );
	will-change: transform, opacity;
}

/* Mientras el widget espera a que el JS tome el control, el texto que va
 * a animarse permanece oculto (nunca se ve "ya aparecido" antes de
 * animar). El JS quita esta clase en cuanto inicializa. */
.ei-title-label-motion--title-pending .ei-title-label-motion__word {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ei-title-label-motion__word {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.ei-title-label-motion--title-pending .ei-title-label-motion__word {
		opacity: 1 !important;
	}
}

/* ===== ETIQUETA ===== */
/* Posicionada SIEMPRE respecto a .ei-title-label-motion__inner (nunca al
 * body ni al viewport). Posicion/rotacion/escala de reposo via variables
 * nativas de Elementor; el rebote (--ei-tlm-bounce-*) y el autoajuste de
 * escala (--ei-tlm-auto-scale) los escribe el JS y se combinan en la
 * MISMA declaracion transform. */
.ei-title-label-motion__label {
	position: absolute;
	left: clamp( 0%, var( --ei-tlm-label-x, 50% ), 100% );
	top: clamp( 0%, var( --ei-tlm-label-y, 0% ), 100% );
	z-index: var( --ei-tlm-label-zindex, 2 );
	transform:
		translate3d( var( --ei-tlm-bounce-x, 0px ), var( --ei-tlm-bounce-y, 0px ), 0 )
		rotate( var( --ei-tlm-label-rot, 0deg ) )
		scale( calc( var( --ei-tlm-label-scale, 1 ) * var( --ei-tlm-auto-scale, 1 ) ) )
		translate( var( --ei-tlm-anchor-tx, -50% ), var( --ei-tlm-anchor-ty, -50% ) );
	will-change: transform;
	pointer-events: none;
	max-width: 90%;
}

/* Punto de anclaje: que parte de la propia etiqueta coincide con el punto
 * (left, top) configurado arriba. Resuelto en CSS puro (data-anchor),
 * sin JS, para que funcione igual en frontend y en el editor. */
.ei-title-label-motion__label[data-anchor="center"] {
	--ei-tlm-anchor-tx: -50%;
	--ei-tlm-anchor-ty: -50%;
}
.ei-title-label-motion__label[data-anchor="top-left"] {
	--ei-tlm-anchor-tx: 0%;
	--ei-tlm-anchor-ty: 0%;
}
.ei-title-label-motion__label[data-anchor="top-right"] {
	--ei-tlm-anchor-tx: -100%;
	--ei-tlm-anchor-ty: 0%;
}
.ei-title-label-motion__label[data-anchor="bottom-left"] {
	--ei-tlm-anchor-tx: 0%;
	--ei-tlm-anchor-ty: -100%;
}
.ei-title-label-motion__label[data-anchor="bottom-right"] {
	--ei-tlm-anchor-tx: -100%;
	--ei-tlm-anchor-ty: -100%;
}

@media (prefers-reduced-motion: reduce) {
	.ei-title-label-motion__label {
		transition: none !important;
	}
}

/* Responsive basico: evitar desbordes horizontales en pantallas pequenas */
@media (max-width: 767px) {
	.ei-title-label-motion,
	.ei-title-label-motion__inner,
	.ei-title-label-motion__title {
		max-width: 100%;
	}
}

/* ============================================================
 * CAUSA REAL DEL OVERFLOW HORIZONTAL DE SITIO (encontrada por datos en
 * produccion, no es una suposicion): Elementor permite fijar un 'Ancho
 * personalizado' (Avanzado > Diseno) por instancia de widget, guardado en
 * _element_custom_width. En 266 instancias reales de este widget en este
 * sitio ese ancho esta fijado a 1200px SIN ningun max-width que lo acote,
 * asi que Elementor genera '.elementor-element.elementor-element-{id}{
 * width:1200px;max-width:1200px}' de forma identica en todos los
 * breakpoints. En cuanto la columna disponible baja de 1200px el widget
 * ya no cabe y empuja el ancho de toda la pagina. Esto NO viene de
 * ningun CSS de este plugin ni de la estructura de Elementor: es una
 * configuracion de contenido (ancho fijo sin limite responsive) que
 * afecta a CUALQUIER widget al que se le active esa opcion. La
 * correccion se encapsula aqui, en la clase que Elementor anade
 * automaticamente a las instancias de ESTE widget concreto (nunca se
 * toca .elementor-widget ni .elementor-element en general): se conserva
 * el ancho de 1200px como techo visual en pantallas grandes, pero se le
 * anade el max-width que le faltaba para que nunca supere el ancho
 * disponible real. */
.elementor-widget-enfoque_title_label_motion {
	max-width: 100% !important;
}

/* ============================================================
 * MODO EDITOR DE ELEMENTOR: visibilidad y estabilidad garantizadas SIN
 * depender de JS/timers/observers (mismo patron ya probado en los
 * widgets Enfoque Scroll Video y Enfoque Hero Title Tags).
 * ------------------------------------------------------------
 * El texto se fuerza siempre a su estado final visible. El rebote de la
 * etiqueta se fuerza siempre a 0 en el editor, EXCEPTO si el usuario
 * activo "Simular movimiento en el editor" (entonces el root lleva la
 * clase --simulate-motion y esta regla no aplica). */
body.elementor-editor-active .ei-title-label-motion--title-pending .ei-title-label-motion__word {
	opacity: 1 !important;
}

body.elementor-editor-active .ei-title-label-motion:not(.ei-title-label-motion--simulate-motion) .ei-title-label-motion__label {
	--ei-tlm-bounce-x: 0px !important;
	--ei-tlm-bounce-y: 0px !important;
}