/**
 * Home 2026 — ESU
 *
 * Todo se acota a .esu-home-2026 para que nada de aquí afecte al resto del
 * sitio. Colores y tipografías vienen del kit global de Elementor (ID 16418).
 */

/* Nada dentro de la página puede provocar scroll horizontal. */
.esu-home-2026 .esu-home-2026__main {
	overflow-x: clip;
}
.esu-home-2026 .esu-home-2026__main :where(img, video, iframe, svg) {
	max-width: 100%;
	height: auto;
}

/*
 * Medidas de lectura. En vez de anchos rígidos en px —que desbordan en
 * móvil— se expresan como máximos que ceden al viewport.
 */
.esu-home-2026 .elementor-widget.esu-medida-ancha,
.esu-home-2026 .elementor-widget.esu-medida-normal,
.esu-home-2026 .elementor-widget.esu-medida-tarjeta {
	width: 100%;
	margin-inline: auto;
}
/*
 * Estos selectores son deliberadamente largos.
 *
 * Elementor trae en frontend.min.css la regla
 *   .e-con.e-con > .e-con-inner > .elementor-widget { max-width: 100%; }
 * con cuatro clases de especificidad — más que un `.esu-home-2026
 * .elementor-widget.esu-medida-x` y más incluso que la regla que el propio
 * Elementor genera para el widget desde su control de ancho. Con menos peso
 * que eso, los párrafos se estiran a todo el ancho del bloque y el texto se
 * lee más pequeño repartido en 1400px que en los 714 del origen.
 *
 * Se replica su estructura y se le añade la clase propia, de modo que gane sin
 * recurrir a !important.
 */
.esu-home-2026 .e-con.e-con > .e-con-inner > .elementor-widget.esu-medida-ancha,
.esu-home-2026 .e-con.e-con > .elementor-widget.esu-medida-ancha   { max-width: 901px; }

.esu-home-2026 .e-con.e-con > .e-con-inner > .elementor-widget.esu-medida-normal,
.esu-home-2026 .e-con.e-con > .elementor-widget.esu-medida-normal  { max-width: 714px; }

.esu-home-2026 .e-con.e-con > .e-con-inner > .elementor-widget.esu-medida-tarjeta,
.esu-home-2026 .e-con.e-con > .elementor-widget.esu-medida-tarjeta { max-width: 100%; }

/*
 * En pantallas estrechas los anchos fijos ceden. Va aquí y no en el control
 * responsive de Elementor porque este emite la variante móvil fuera de su
 * media query, y acababa pisando el ancho de escritorio en todos los tamaños.
 */
@media (max-width: 767px) {
	.esu-home-2026 .elementor-widget.esu-medida-ancha,
	.esu-home-2026 .elementor-widget.esu-medida-normal,
	.esu-home-2026 .elementor-widget.esu-medida-tarjeta {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Los títulos largos no deben partirse mal en pantallas estrechas. */
.esu-home-2026 .esu-home-2026__main :where(h1, h2, h3, h4) {
	text-wrap: balance;
	overflow-wrap: break-word;
}

/*
 * Herobanner.
 *
 * Los PNG del banner son RGBA de 1600x1067 con un borde transparente muy ancho:
 * el núcleo opaco va de y=400 a y=820, así que el 37 % superior deja ver el
 * fondo de la página y se lee como un hueco vacío bajo el header.
 *
 * El origen lo resuelve con un margen negativo, pero allí el header es
 * transparente y flota sobre la imagen. Aquí el header (plantilla 450) es
 * opaco y mide 151 px, así que un tirón equivalente taparía el titular, que
 * empieza justo al 37 %.
 *
 * Se recorta la banda transparente con la propia imagen: relación de aspecto
 * fija y object-fit, anclado abajo. No depende de la altura del header ni de
 * márgenes negativos, y se comporta igual en los tres breakpoints.
 */
.esu-home-2026 .esu-banner .swiper-slide-image {
	display: block;
	width: 100%;
	/*
	 * Ancho nativo del PNG. Por encima de esto la imagen se amplía y pixela.
	 * El origen hace lo mismo: a 1920 y 2560 de viewport su contenedor crece
	 * pero la imagen se queda en 1600 y se centra, dejando ver el fondo de la
	 * página a los lados.
	 */
	max-width: 1600px;
	margin-inline: auto;
	aspect-ratio: 1600 / 780;
	object-fit: cover;
	object-position: center bottom;
}

@media (max-width: 767px) {
	/* En móvil se prioriza el sujeto de la foto sobre el encuadre ancho. */
	.esu-home-2026 .esu-banner .swiper-slide-image {
		aspect-ratio: 1600 / 1000;
	}
}


/*
 * Subtítulo decorado — «[ Nosotros ]», «[ Actualidad ]».
 *
 * En el origen es el estilo `px-sub-title-5` de Bravis: texto naranja con una
 * línea en degradado y un rombo a cada lado. Sin Bravis no existe, así que se
 * replica con pseudoelementos y el mismo SVG del origen incrustado como data
 * data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='132'%20height='20'%20viewBox='0%200%20132%2020'%20fill='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='118.188'%20y1='10'%20x2='0.1875'%20y2='10'%20gradientUnits='userSpaceOnUse'%3E%3Cstop%20stop-color='%23F4F4FE'/%3E%3Cstop%20offset='1'%20stop-color='%23F4F4FE'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M0.1875%209.5H118.188V10.5H0.1875V9.5Z'%20fill='url(%23g)'/%3E%3Cpath%20d='M121.844%204.34315L116.188%2010L121.844%2015.6569L127.501%2010L121.844%204.34315Z'%20fill='%23F4F4FE'/%3E%3C/svg%3E: sin peticiones extra y sin depender del framework.
 *
 * Ojo con el data data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='132'%20height='20'%20viewBox='0%200%20132%2020'%20fill='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='118.188'%20y1='10'%20x2='0.1875'%20y2='10'%20gradientUnits='userSpaceOnUse'%3E%3Cstop%20stop-color='%23F4F4FE'/%3E%3Cstop%20offset='1'%20stop-color='%23F4F4FE'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M0.1875%209.5H118.188V10.5H0.1875V9.5Z'%20fill='url(%23g)'/%3E%3Cpath%20d='M121.844%204.34315L116.188%2010L121.844%2015.6569L127.501%2010L121.844%204.34315Z'%20fill='%23F4F4FE'/%3E%3C/svg%3E: dentro de CSS, un '#' sin codificar corta la URL (lo
 * lee como identificador de fragmento). Va como %23, y el SVG usa comillas
 * simples para no cerrar la cadena.
 */
.esu-home-2026 .esu-sub .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: #F59E00;
	letter-spacing: .04em;
}

.esu-home-2026 .esu-sub .elementor-heading-title::before,
.esu-home-2026 .esu-sub .elementor-heading-title::after {
	content: "";
	flex: 0 0 auto;
	width: 132px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='132'%20height='20'%20viewBox='0%200%20132%2020'%20fill='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='118.188'%20y1='10'%20x2='0.1875'%20y2='10'%20gradientUnits='userSpaceOnUse'%3E%3Cstop%20stop-color='%23F4F4FE'/%3E%3Cstop%20offset='1'%20stop-color='%23F4F4FE'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M0.1875%209.5H118.188V10.5H0.1875V9.5Z'%20fill='url(%23g)'/%3E%3Cpath%20d='M121.844%204.34315L116.188%2010L121.844%2015.6569L127.501%2010L121.844%204.34315Z'%20fill='%23F4F4FE'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* El lado derecho es el espejo del izquierdo. */
.esu-home-2026 .esu-sub .elementor-heading-title::after {
	transform: scaleX(-1);
}

/* En pantallas estrechas las líneas se acortan antes que desbordar. */
@media (max-width: 767px) {
	.esu-home-2026 .esu-sub .elementor-heading-title::before,
	.esu-home-2026 .esu-sub .elementor-heading-title::after {
		width: 56px;
	}
}

/*
 * Tarjeta central del bloque 3.
 *
 * En el origen es un `pxl_orbits` de Bravis: arcos dibujados por código con
 * iconos girando, más un `plus.svg` grande y recortado por el borde inferior.
 * Aquí se conserva el plus con el mismo encuadre; los arcos se abordan en la
 * pasada de animaciones.
 */
.esu-home-2026 .esu-plus {
	margin-top: auto;
	margin-bottom: -60px;
	opacity: .35;
}

/*
 * Tarjetas de enlace (bloque 6).
 *
 * El origen las saca del CPT `service` de Bravis, que no existe en el destino.
 * Aquí son contenido estático; estas reglas solo ajustan el icono y el enlace
 * «visitar» para que se lean como en el origen.
 */
.esu-home-2026 .esu-ficha-icono {
	margin-bottom: 6px;
}
.esu-home-2026 .esu-ficha-icono img,
.esu-home-2026 .esu-ficha-icono svg {
	width: 34px;
	height: auto;
}

.esu-home-2026 .esu-ficha-cta .elementor-button {
	padding-inline: 0;
	background: none;
	font-size: 14px;
	letter-spacing: .02em;
}
.esu-home-2026 .esu-ficha-cta .elementor-button-icon {
	color: #5B57E7;   /* mismo violeta que la flecha del origen */
}

/*
 * Fichas de enlace — cuadro de icono y botón «visitar».
 *
 * Valores tomados de los estilos computados del origen, no estimados:
 *   caja externa 80x80, radio 20, borde 1px blanco, padding 7
 *   caja interna 64x64, radio 15, fondo #46BEDE, icono 35x35 blanco
 *   botón: fondo #111527, radio 27.5, borde rgba(86,86,86,.5),
 *          círculo verde #47AE57 de 45px superpuesto a la izquierda
 *
 * Las dos cajas se construyen sobre los dos niveles que ya aporta el propio
 * widget: `.elementor-element` como caja externa y `.elementor-widget-container`
 * como la celeste. No hace falta un contenedor extra — y de hecho no serviría,
 * porque `_css_classes` no llega al markup de los contenedores.
 */
.esu-home-2026 .esu-ficha-icono {
	width: 80px;
	height: 80px;
	padding: 7px;
	border: 1px solid #FFFFFF;
	border-radius: 20px;
	flex: 0 0 auto;
}
.esu-home-2026 .esu-ficha-icono > .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #46BEDE;
	border-radius: 15px;
}
.esu-home-2026 .esu-ficha-icono img,
.esu-home-2026 .esu-ficha-icono svg {
	width: 35px;
	height: 35px;
}
/* La primera ficha usa un icono de Font Awesome, no un SVG. */
.esu-home-2026 .esu-ficha-icono .elementor-icon,
.esu-home-2026 .esu-ficha-icono i {
	font-size: 35px;
	line-height: 1;
	color: #FFFFFF;
}

.esu-home-2026 .esu-ficha-cta .elementor-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 55px;
	padding: 0 29px 0 63px;
	background: #111527;
	border: 1px solid rgba(86, 86, 86, .5);
	border-radius: 27.5px;
	color: #FFFFFF;
	text-transform: capitalize;
}
.esu-home-2026 .esu-ficha-cta .elementor-button-icon {
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	background: #47AE57;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 15px;
}

/*
 * Separadores verticales de «Cifras que Hablan».
 *
 * En el origen son 1x75px. El widget `divider` de Elementor es horizontal, así
 * que se le gira el filo: sin borde superior y con borde izquierdo.
 */
.esu-home-2026 .esu-cifra-sep {
	width: 1px;
	flex: 0 0 auto;
	align-self: center;
}
.esu-home-2026 .esu-cifra-sep .elementor-divider {
	padding: 0;
}
.esu-home-2026 .esu-cifra-sep .elementor-divider-separator {
	border-top: 0;
	border-left: 1px solid rgba(86, 86, 86, .5);
	width: 0;
	height: 75px;
}
@media (max-width: 767px) {
	/* Apilados en móvil, los separadores verticales no aportan nada. */
	.esu-home-2026 .esu-cifra-sep { display: none; }
}

/*
 * Resplandor violeta de «Nuestros Clientes».
 *
 * En el origen es un contenedor de 942x222 con fondo #5B57E7 y blur(200px),
 * dentro de una sección con overflow:hidden. Aquí es un div propio dentro de
 * un widget `html`, porque las clases no llegan al markup de los contenedores.
 */
.esu-home-2026 .esu-brillo {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	/* Ancho fijo: un porcentaje aquí se resuelve contra el contenedor del
	   widget, que no tiene ancho propio, y el resplandor sale a 0. */
	width: 942px;
	max-width: 90vw;
	height: 222px;
	background: #5B57E7;
	filter: blur(200px);
	pointer-events: none;
	z-index: 0;
}
/* El contenido va por encima del resplandor. */
.esu-home-2026 .esu-brillo ~ * {
	position: relative;
	z-index: 1;
}

/*
 * Carruseles de clientes.
 *
 * Medido en el origen: logos de 188x110 con max-height 110, slides de 238 —es
 * decir 6 visibles a 1430 de ancho, no 5.
 */
.esu-home-2026 .esu-clientes .swiper-slide-image {
	/* Cada logo conserva su proporción; solo se limita la altura, como en el
	   origen (188x110, 110x110, 86x110, 151x110...). Sin `aspect-ratio` ni
	   `object-fit: cover`, que los recortarían. */
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 110px;
	aspect-ratio: auto;
	object-fit: contain;
	margin-inline: auto;
}
.esu-home-2026 .esu-clientes .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * «Noticias de Actualidad».
 *
 * Se conserva el widget nativo `posts` —el bloque es dinámico y debe seguir
 * tirando de las entradas reales— y el aspecto del origen se reconstruye sobre
 * su markup. Valores medidos en esu-new:
 *   fecha: píldora, borde 1px blanco, radio 10, Manrope 15, #D9D9D9
 *   imagen: radio 22px 22px 0 22px (la muesca inferior derecha)
 *   botón: 55x55 verde #47AE57, radio 20, anclado abajo a la derecha
 *   título: Manrope 20/600, interlineado 30
 *   extracto: DM Sans 17, #EBEAED, interlineado 28
 *
 * Elementor anida fecha, título, extracto y «leer más» dentro de
 * `.elementor-post__text`, así que el orden visual del origen —fecha, imagen,
 * título, extracto— no se puede lograr solo con `order`. `display: contents`
 * disuelve ese envoltorio y sus hijos pasan a ser elementos flex de la tarjeta.
 */
.esu-home-2026 .esu-noticias .elementor-post {
	display: flex;
	flex-direction: column;
	padding-inline: 0;
	/* Elementor recorta la tarjeta, y el filo vertical va fuera de ella. */
	overflow: visible;
}
.esu-home-2026 .esu-noticias .elementor-post__text {
	display: contents;
}

.esu-home-2026 .esu-noticias .elementor-post__meta-data {
	order: 1;
	align-self: flex-start;
	margin: 0 0 28px;
	padding: 10px 17px;
	border: 1px solid #FFFFFF;
	border-radius: 10px;
	background: #111527;
	font-family: Manrope, sans-serif;
	font-size: 15px;
	line-height: 25px;
	color: #D9D9D9;
	text-transform: capitalize;
}

/* Imagen con la muesca inferior derecha donde se aloja el botón. */
.esu-home-2026 .esu-noticias .elementor-post__thumbnail__link {
	order: 2;
	position: relative;
	display: block;
	margin-bottom: 22px;
	border-radius: 22px 22px 0 22px;
	overflow: visible;
}
.esu-home-2026 .esu-noticias .elementor-post__thumbnail {
	border-radius: 22px 22px 0 22px;
	overflow: hidden;
}
/*
 * La proporción 359x231 la fija el control `classic_item_ratio` del widget.
 * Aquí solo el encaje: Elementor coloca la imagen en absoluto y, cuando la
 * foto es más alta que la caja, le pone `elementor-fit-height`, que la deja en
 * `width: auto` y descuadra la tarjeta. Con `cover` —en vez del `fill` del
 * origen— las tres llenan el marco sin deformarse; el origen sí deforma, pero
 * ahí las motos y el plano del C5i se notan estirados.
 *
 * No tocar `top`/`left`/`inset`: Elementor centra con `left: calc(50% + 1px)`
 * más `translate(-50%, -50%)`. Poner `inset: 0` deja el desplazamiento en pie y
 * la imagen se va a la esquina, con solo un cuarto visible.
 */
.esu-home-2026 .esu-noticias .elementor-post__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * La muesca de la esquina inferior derecha.
 *
 * No es un botón puesto encima de la imagen: es un recorte. El origen tapa esa
 * esquina con un bloque de 65x65 del color del fondo, con la esquina interior
 * redondeada 25px, y encima le sienta el botón verde de 55x55. Los dos filetes
 * de 14px rematan los puntos donde la muesca se encuentra con el borde de la
 * imagen: son elementos transparentes cuya `box-shadow` desplazada dibuja la
 * curva cóncava. Medido sobre `.pxl-post--button` y sus pseudoelementos.
 *
 * El color debe ser el del fondo de la sección, o la muesca se ve como un
 * cuadrado pegado en vez de como un recorte. Aquí es #111527; el origen lleva
 * #131313 porque el suyo es otro.
 *
 * Todo va en pseudoelementos porque el «leer más» nativo de Elementor es
 * hermano de la imagen, no hijo, y no se puede anclar dentro sin reparentar.
 * La imagen ya es un enlace, así que el área sigue siendo clicable.
 */
.esu-home-2026 .esu-noticias .elementor-post__read-more {
	display: none;
}

/* El bloque del recorte. */
.esu-home-2026 .esu-noticias .elementor-post__thumbnail__link::after {
	content: "";
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 65px;
	height: 65px;
	background: #111527;
	border-radius: 25px 0 0 0;
	z-index: 2;
}

/* El botón, encajado en la esquina del recorte: relleno solo arriba e izquierda. */
.esu-home-2026 .esu-noticias .elementor-post__thumbnail__link::before {
	content: "";
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 55px;
	height: 55px;
	background: #47AE57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M0.75 12.4167L12.4167 0.75M12.4167 0.75H0.75M12.4167 0.75V12.4167' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	border-radius: 20px;
	z-index: 3;
}

/*
 * Los dos filetes. Van sobre la miniatura y no sobre el enlace a propósito: su
 * `overflow: hidden` recorta la sombra justo en el borde de la imagen, que es
 * donde debe acabar.
 */
.esu-home-2026 .esu-noticias .elementor-post__thumbnail::before,
.esu-home-2026 .esu-noticias .elementor-post__thumbnail::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 14px;
	height: 14px;
	border-radius: 0 0 14px 0;
	box-shadow: 4px 4px 0 3px #111527;
}
/* Arriba de la muesca, contra el borde derecho. */
.esu-home-2026 .esu-noticias .elementor-post__thumbnail::before {
	right: 0;
	bottom: 64px;
}
/* A la izquierda de la muesca, contra el borde inferior. */
.esu-home-2026 .esu-noticias .elementor-post__thumbnail::after {
	right: 64px;
	bottom: 0;
}

.esu-home-2026 .esu-noticias .elementor-post__title {
	order: 3;
	margin: 0 0 10px;
}
.esu-home-2026 .esu-noticias .elementor-post__excerpt {
	order: 4;
}
/*
 * Tres líneas y puntos suspensivos, como el origen.
 *
 * `classic_excerpt_length` no sirve: WordPress solo aplica `excerpt_length` a
 * los extractos que genera él, y estas entradas traen el suyo escrito a mano.
 * El recorte por líneas además iguala el alto de las tres tarjetas.
 */
/*
 * Sin `text-transform: capitalize`. El origen sí lo aplica —«Con La Operación
 * Técnica Del Nuevo Modelo»—, pero en español solo van en mayúscula la primera
 * palabra y los nombres propios. Se aparta del origen a propósito.
 */
.esu-home-2026 .esu-noticias .elementor-post__excerpt p {
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/*
 * Rejilla del bloque.
 *
 * El origen da 359px a cada tarjeta y 100 de hueco: 1277 en total, por encima
 * de los 1140 del contenedor por defecto —de ahí el `content_width: full` de
 * la sección—. El selector repite la forma del de Elementor
 * (`.e-con.e-con > … > .elementor-widget`) porque si no gana su `max-width:
 * 100%`; ver la nota de las clases `esu-medida-*` más arriba.
 */
.esu-home-2026 .e-con.e-con > .e-con-inner > .elementor-widget.esu-noticias,
.esu-home-2026 .e-con.e-con > .elementor-widget.esu-noticias {
	width: 100%;
	max-width: 1277px;
	margin-inline: auto;
}
.esu-home-2026 .esu-noticias .elementor-posts {
	gap: 0 100px;
}

/*
 * Filos verticales entre tarjetas. Van como pseudoelemento en mitad del hueco
 * en lugar de `border-right` sobre la tarjeta: con relleno lateral las tres
 * columnas salían de anchos distintos, porque la primera no llevaba el
 * izquierdo.
 */
.esu-home-2026 .esu-noticias .elementor-post {
	position: relative;
}
.esu-home-2026 .esu-noticias .elementor-post:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -50px;
	border-right: 1px solid rgba(86, 86, 86, .5);
}
@media (max-width: 767px) {
	.esu-home-2026 .esu-noticias .elementor-post:not(:last-child)::after { content: none; }
	.esu-home-2026 .esu-noticias .elementor-posts { gap: 48px 0; }
}

/*
 * Cierre.
 *
 * La imagen va a su tamaño natural (600x200) y nunca se amplía; en pantallas
 * estrechas cede al ancho disponible.
 */
.esu-home-2026 .esu-cierre-img img {
	width: auto;
	max-width: min(600px, 100%);
	height: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
 * MOVIMIENTO
 *
 * Réplica de los efectos que en el origen aporta Bravis con GSAP.
 *
 * MEJORA PROGRESIVA. El contenido nace visible. Los estados iniciales —los
 * `opacity: 0`— cuelgan todos de `.esu-motion-ready`, una clase que el JS pone
 * en el `body` SOLO tras inicializar el observador sin errores, y que se retira
 * si algo revienta. Así, si el archivo no llega, si el navegador no trae
 * `IntersectionObserver` o si el módulo lanza una excepción, la portada se lee
 * entera sin animaciones en vez de quedarse en blanco.
 *
 * No añadir estos `opacity: 0` fuera de `.esu-motion-ready`.
 * ══════════════════════════════════════════════════════════════════════════ */

/* --- Titular por palabras (origen: split-words-scale) --- */
.esu-home-2026 .esu-palabra {
	display: inline-block;
	will-change: transform, opacity;
	transition: transform .75s cubic-bezier(.16, 1, .3, 1),
	            opacity .55s ease-out;
}
/*
 * Escala inicial alterna: las palabras pares crecen desde cero y las impares
 * encogen desde el doble, igual que el origen.
 */
.esu-home-2026.esu-motion-ready .esu-anim-palabras:not(.esu-visible) .esu-palabra {
	opacity: 0;
	transform: scale(0);
}
.esu-home-2026.esu-motion-ready .esu-anim-palabras:not(.esu-visible) .esu-palabra:nth-child(odd) {
	transform: scale(2);
}
.esu-home-2026 .esu-anim-palabras.esu-visible .esu-palabra {
	opacity: 1;
	transform: scale(1);
}
/* Escalonado corto, como el `stagger` del origen. */
.esu-home-2026 .esu-palabra:nth-child(1)  { transition-delay: .00s; }
.esu-home-2026 .esu-palabra:nth-child(2)  { transition-delay: .03s; }
.esu-home-2026 .esu-palabra:nth-child(3)  { transition-delay: .06s; }
.esu-home-2026 .esu-palabra:nth-child(4)  { transition-delay: .09s; }
.esu-home-2026 .esu-palabra:nth-child(5)  { transition-delay: .12s; }
.esu-home-2026 .esu-palabra:nth-child(n+6) { transition-delay: .15s; }

/* --- Verso cian (origen: pxlkeywordrotatingin, 0.8s) --- */
.esu-home-2026 .esu-typewriter {
	display: inline-block;
	transform-origin: center bottom;
	perspective: 600px;
	transition: transform .8s cubic-bezier(.86, 0, .07, 1),
	            opacity .8s cubic-bezier(.86, 0, .07, 1);
}
.esu-home-2026.esu-motion-ready .esu-typewriter:not(.esu-visible) {
	opacity: 0;
	transform: translateY(65%) rotateX(-95deg);
}
.esu-home-2026 .esu-typewriter.esu-visible {
	opacity: 1;
	transform: translateY(0) rotateX(0);
}

/* --- Párrafo con zoom (origen: wow PXLZoom2, retardo 150ms) --- */
.esu-home-2026 .esu-anim-zoom {
	transition: transform .9s cubic-bezier(.16, 1, .3, 1) .15s,
	            opacity .7s ease-out .15s;
}
.esu-home-2026.esu-motion-ready .esu-anim-zoom:not(.esu-visible) {
	opacity: 0;
	transform: scale(.88);
}
.esu-home-2026 .esu-anim-zoom.esu-visible {
	opacity: 1;
	transform: scale(1);
}

/* --- Órbitas de la tarjeta central (origen: pxl_orbits) --- */
/*
 * Medido en el origen: dos anillos de 520 y 669px con borde
 * `1px solid rgba(91,87,231,.3)`, e insignias circulares de ~85px con fondo
 * #272638 y un icono de 20x20 dentro. El original las mueve con GSAP; aquí
 * gira el anillo y la insignia contra-gira para que el icono no se voltee.
 */
/*
 * El widget que envuelve las órbitas no debe crear contexto de posicionamiento.
 *
 * Elementor le pone `position: relative`, y como su contenido va en absoluto el
 * widget mide 0 de alto: un `bottom` sobre las órbitas se resolvía contra esa
 * caja vacía y el centro de los anillos acababa en y=303 de la tarjeta en vez
 * de cerca del borde inferior, con las insignias montadas sobre el título.
 * En estático, las órbitas se miden contra la tarjeta, que sí es `relative`.
 */
.esu-home-2026 .esu-orbitas-widget,
.esu-home-2026 .esu-orbitas-widget > .elementor-widget-container {
	position: static;
}

.esu-home-2026 .esu-orbitas {
	position: absolute;
	left: 50%;
	/*
	 * Centro de los anillos a 38px del borde inferior de la tarjeta: en el
	 * origen está en y=684 de una tarjeta de 722. El círculo entra por la mitad
	 * del cuadro y se corta abajo, así que los iconos solo aparecen en la franja
	 * baja y se esconden por el borde.
	 */
	bottom: 38px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 0;
}
.esu-home-2026 .esu-anillo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--w);
	height: var(--w);
	margin: calc(var(--w) / -2);
	border: 1px solid rgba(91, 87, 231, .3);
	border-radius: 50%;
	animation: esu-girar var(--d) linear infinite;
}
.esu-home-2026 .esu-anillo--2 {
	animation-direction: reverse;
}
.esu-home-2026 .esu-orbe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	/* Se coloca sobre la circunferencia: giro hasta su ángulo y salto al radio. */
	transform: rotate(var(--a)) translateY(calc(var(--w) / -2));
}
.esu-home-2026 .esu-orbe > span {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 68px es lo que mide la insignia mayor del origen. */
	width: 68px;
	height: 68px;
	margin: -34px;
	background: #272638;
	border-radius: 50%;
	animation: esu-girar var(--d) linear infinite reverse;
}
.esu-home-2026 .esu-anillo--2 .esu-orbe > span {
	animation-direction: normal;
}
.esu-home-2026 .esu-orbe img {
	width: 20px;
	height: 20px;
}
/*
 * Órbitas en pantallas estrechas.
 *
 * Los anillos miden 520 y 669 px fijos, pero la tarjeta pasa de 715 de alto en
 * escritorio a 520 en móvil, donde además el texto ocupa más líneas. Con el
 * centro a 38px del borde inferior, el arco exterior subía hasta y=148 y las
 * insignias cruzaban por encima del párrafo.
 *
 * Se escala el conjunto desde su centro, que es el punto de anclaje: así los
 * arcos siguen entrando por la mitad baja y cortándose abajo, como en el
 * origen, sin invadir el texto.
 */
@media (max-width: 1024px) {
	.esu-home-2026 .esu-orbitas { transform: translateX(-50%) scale(.62); }
}
@media (max-width: 767px) {
	.esu-home-2026 .esu-orbitas { transform: translateX(-50%) scale(.5); }
}

@keyframes esu-girar {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* --- Partículas --- */
.esu-home-2026 .esu-particulas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

/*
 * Sin movimiento: el JS marca la raíz y todos los estados iniciales se anulan.
 * Nada queda invisible esperando un observador que no va a dispararse.
 */
/*
 * Movimiento reducido.
 *
 * El JS sale antes de marcar `.esu-motion-ready`, así que los estados iniciales
 * no llegan a aplicarse y el contenido se ve sin necesidad de anular nada. Los
 * `!important` quedan como red por si la preferencia cambia con la clase ya
 * puesta. Los anillos y las partículas sí hay que pararlos aquí: son CSS puro y
 * giran aunque el JS no haya intervenido.
 */
@media (prefers-reduced-motion: reduce) {
	.esu-home-2026 .esu-palabra,
	.esu-home-2026 .esu-typewriter,
	.esu-home-2026 .esu-anim-zoom {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.esu-home-2026 .esu-anillo,
	.esu-home-2026 .esu-orbe > span { animation: none; }
	.esu-home-2026 .esu-particulas { display: none; }
}

/*
 * Alto fijo de las tarjetas del bloque 3.
 *
 * En el origen la tarjeta mide 722 y su imagen decorativa —380x481, la misma
 * que aquí— desborda por abajo y la recorta el `overflow: hidden` del propio
 * marco. Con `min-height` la tarjeta crece hasta caber la imagen entera y el
 * bloque acaba 260px más alto de la cuenta.
 *
 * Solo en escritorio: por debajo de 1025 el texto ocupa más líneas y un alto
 * fijo lo cortaría. Ahí manda el `min-height` que declara el propio widget.
 */
@media (min-width: 1025px) {
	.esu-home-2026 .esu-tarjeta-h4 { height: 715px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Barra flotante de redes sociales.
 *
 * Solo en escritorio: en pantallas estrechas taparía contenido y compite con
 * el widget de accesibilidad, que se ancla al otro borde.
 * ══════════════════════════════════════════════════════════════════════════ */
.esu-redes { display: none; }

@media (min-width: 1025px) {
	.esu-redes {
		position: fixed;
		top: 50%;
		right: 16px;
		z-index: 60;
		display: flex;
		flex-direction: column;
		gap: 10px;
		transform: translateY(-50%);
	}
	.esu-redes a {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 1px solid #FFFFFF;
		border-radius: 999px;
		background: none;
		color: #FFFFFF;
		box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
		transition: background .25s ease, color .25s ease;
	}
	.esu-redes a:hover,
	.esu-redes a:focus-visible {
		background: #FFFFFF;
		color: #111527;
	}
}

@media (prefers-reduced-motion: reduce) {
	.esu-redes a { transition: none; }
}