/* Efectos exclusivos de la Home. Todo el color sale del Kit (variables
   --e-global-color-*); nada de hexadecimales a mano. */

/* ---------- 1. Tarjetas pilares (Formación / Consultoría / Automatizaciones) ---------- */

/* El nombre de clase va repetido a propósito en toda esta sección. Elementor
   reclama el mismo ::before en cualquiera de sus contenedores
   (`.e-con:before { content: var(--background-overlay) }`) y también su
   overflow (`.e-con { overflow: var(--overflow) }`); su hoja se encola después
   de esta y con un solo nombre de clase el empate de especificidad lo gana él,
   dejando el pseudo-elemento sin generar. Repetir la clase sube a dos y el
   resultado deja de depender del orden de carga. */
.iaexp-pillar-card.iaexp-pillar-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 1.25rem;
	transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms ease;
}

.iaexp-pillar-card.iaexp-pillar-card::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Elementor dimensiona su capa con width/height calculados a partir de los
	   bordes; con `auto` mandan los cuatro `inset: 0` y la foto cubre la ficha. */
	width: auto;
	height: auto;
	border-radius: inherit;
	z-index: 0;
	background-size: cover;
	background-position: center;
	opacity: 1;
	transition: transform 600ms ease;
	transform: scale(1.06);
}

.iaexp-pillar-card--formacion.iaexp-pillar-card::before {
	background-image: var(--iaexp-pillar-img-formacion);
}
.iaexp-pillar-card--consultoria.iaexp-pillar-card::before {
	background-image: var(--iaexp-pillar-img-consultoria);
}
.iaexp-pillar-card--automatizaciones.iaexp-pillar-card::before {
	background-image: var(--iaexp-pillar-img-automatizaciones);
}

/* Velo de arriba a abajo. Con la foto detrás, el texto blanco caía sobre zonas
   claras —la pared de Formación, el fondo de Agentes— y no se leía. Arranca al
   52 % para que el título, que es texto grande, pase de 3:1, y sube al 62 % a la
   altura del párrafo, que como texto normal necesita 4,5:1. Los porcentajes están
   calculados contra el peor caso: la parte blanca de la foto. */
.iaexp-pillar-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		185deg,
		color-mix(in srgb, var(--e-global-color-secondary) 52%, transparent) 0%,
		color-mix(in srgb, var(--e-global-color-secondary) 62%, transparent) 45%,
		color-mix(in srgb, var(--e-global-color-secondary) 92%, transparent) 100%
	);
}

.iaexp-pillar-card > * {
	position: relative;
	z-index: 1;
}

.iaexp-pillar-card h3,
.iaexp-pillar-card p {
	color: var(--e-global-color-4c06697, #fff) !important;
}

.iaexp-pillar-card:hover,
.iaexp-pillar-card:focus-within {
	transform: translateY(-0.5rem);
	box-shadow: 0 28px 60px -24px color-mix(in srgb, var(--e-global-color-primary) 45%, transparent);
}

.iaexp-pillar-card:hover::before {
	transform: scale(1.12);
}

/* El texto más largo (Automatizaciones y Agentes) es el que se cortaba: se
   controla con clamp en vez de heredar el tamaño fijo del kit. */
.iaexp-pillar-card h3 {
	font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
	line-height: 1.15;
	overflow-wrap: break-word;
	hyphens: auto;
}

@media (prefers-reduced-motion: reduce) {
	.iaexp-pillar-card.iaexp-pillar-card,
	.iaexp-pillar-card.iaexp-pillar-card::before {
		transition: none;
	}
}

/* ---------- 2. "¿Cómo puedo formarme en IA?" — carrusel 3D auto-desplazante ---------- */

.iaexp-modality-row {
	position: relative;
	perspective: 1600px;
	overflow: visible;
}

/* Clase doblada por el radio: Elementor declara `--border-radius: 10px` en cada
   slide y lo aplica con `.e-con { border-radius: var(--border-radius) }`, una
   sola clase igual que esta y con la hoja cargada después — el empate lo ganaba
   él y las fichas salían casi rectas pese al radio de aquí. Doblar sube a
   (0,2,0) y el radio deja de depender del orden de carga. Mismo motivo para el
   `overflow`, que Elementor también resuelve por variable. */
.iaexp-modality-slide.iaexp-modality-slide {
	position: relative;
	overflow: hidden;
	border-radius: 1.75rem;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 700ms ease, filter 700ms ease;
	transform-style: preserve-3d;
	will-change: transform;
}

/* Las dos capas de fondo copian el radio de la ficha: así la curva se mantiene
   aunque el recorte por `overflow` lo pise algún día la hoja de Elementor. */
.iaexp-modality-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-size: cover;
	background-position: center;
	opacity: 0.22;
}

.iaexp-modality-slide--presencial::before {
	background-image: var(--iaexp-modality-img-presencial);
}
.iaexp-modality-slide--online::before {
	background-image: var(--iaexp-modality-img-online);
}
.iaexp-modality-slide--aula::before {
	background-image: var(--iaexp-modality-img-aula);
}

.iaexp-modality-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: color-mix(in srgb, var(--e-global-color-4c06697, #fff) 88%, transparent);
}

.iaexp-modality-slide > * {
	position: relative;
	z-index: 1;
}

/* El número de orden (1, 2, 3), relleno con el azul de la marca en degradado.
   El tema hijo lo dibuja en contorno —`.number-stroke { color: transparent;
   -webkit-text-stroke: 4px var(--e-global-color-60913e9) }`— y Elementor le pinta
   el texto en blanco, así que sobre la ficha, también casi blanca, quedaba en un
   perfil fino. Un trazo no admite degradado: el degradado va en el relleno y se
   recorta al glifo con `background-clip: text`, y el contorno se retira.

   El `color` va con !important y no por especificidad: Elementor escribe el suyo
   en `.elementor-11 .elementor-element.elementor-element-XXXX
   .elementor-heading-title`, que son cuatro clases (0,4,0) — más de las que
   puede reunir un selector estable aquí, porque el id del elemento cambia si la
   ficha se rehace en el editor. El `background-image` no lo declara nadie más y
   va sin marca.

   Las paradas salen del Kit: el mismo azul de antes, aclarado con blanco arriba
   y virado a secondary abajo — no hay color nuevo. `inline-block` le da al
   degradado una caja propia del ancho del número en lugar de la línea completa. */
.iaexp-modality-slide .number-stroke .elementor-heading-title {
	display: inline-block;
	-webkit-text-stroke-width: 0 !important;
	color: var(--e-global-color-60913e9) !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.iaexp-modality-slide .number-stroke .elementor-heading-title {
		background-image: linear-gradient(
			160deg,
			color-mix(in srgb, var(--e-global-color-60913e9) 70%, var(--e-global-color-4c06697, #fff)) 0%,
			var(--e-global-color-60913e9) 45%,
			color-mix(in srgb, var(--e-global-color-primary) 76%, var(--e-global-color-secondary)) 100%
		);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent !important;
	}
}

/* Posición 3D: la del medio al frente, las de los lados giradas y detrás. */
.iaexp-modality-row[data-iaexp-activo="0"] .iaexp-modality-slide:nth-child(1),
.iaexp-modality-row[data-iaexp-activo="1"] .iaexp-modality-slide:nth-child(2),
.iaexp-modality-row[data-iaexp-activo="2"] .iaexp-modality-slide:nth-child(3) {
	transform: translateZ(0) scale(1.04);
	filter: none;
	box-shadow: 0 30px 55px -20px color-mix(in srgb, var(--e-global-color-primary) 40%, transparent);
	z-index: 3;
}

.iaexp-modality-slide {
	transform: translateZ(-60px) rotateY(-6deg) scale(0.96);
	filter: saturate(0.85) brightness(0.97);
	z-index: 1;
}

.iaexp-modality-slide:hover {
	transform: translateY(-0.35rem) translateZ(-20px) scale(0.99);
}

.iaexp-modality-row[data-iaexp-activo="0"] .iaexp-modality-slide:nth-child(1):hover,
.iaexp-modality-row[data-iaexp-activo="1"] .iaexp-modality-slide:nth-child(2):hover,
.iaexp-modality-row[data-iaexp-activo="2"] .iaexp-modality-slide:nth-child(3):hover {
	transform: translateY(-0.5rem) translateZ(0) scale(1.06);
}

@media (max-width: 767px) {
	.iaexp-modality-slide {
		transform: none !important;
		filter: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iaexp-modality-slide {
		transition: none;
	}
}

/* ---------- 3. "Aprende todo sobre IA" — luz que sigue el cursor + partículas ---------- */

.iaexp-cursor-glow {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
}

.iaexp-cursor-glow__luz {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 300ms ease;
	background: radial-gradient(
		320px circle at var(--iaexp-x, 50%) var(--iaexp-y, 50%),
		color-mix(in srgb, var(--iaexp-glow-color, var(--e-global-color-primary)) 60%, transparent) 0%,
		transparent 70%
	);
	mix-blend-mode: screen;
	z-index: 2;
}

.iaexp-cursor-glow:hover .iaexp-cursor-glow__luz {
	opacity: 1;
}

.iaexp-cursor-glow__particulas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.iaexp-cursor-glow__particulas span {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--iaexp-glow-color, var(--e-global-color-primary)) 75%, transparent);
	animation: iaexp-flotar linear infinite;
}

.iaexp-cursor-glow__red {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.iaexp-cursor-glow__red line {
	stroke: color-mix(in srgb, var(--iaexp-glow-color, var(--e-global-color-primary)) 55%, transparent);
	stroke-width: 1;
	opacity: 0;
	animation: iaexp-red-pulso 3s ease-in-out infinite;
}

@keyframes iaexp-flotar {
	from {
		transform: translateY(0) translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 0.8;
	}
	90% {
		opacity: 0.5;
	}
	to {
		transform: translateY(-40px) translateX(var(--iaexp-drift, 12px));
		opacity: 0;
	}
}

@keyframes iaexp-red-pulso {
	0%, 100% { opacity: 0; }
	50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
	.iaexp-cursor-glow__particulas,
	.iaexp-cursor-glow__luz,
	.iaexp-cursor-glow__red {
		display: none;
	}
}

/* El vídeo sustituye a la imagen de la mano: mismas medidas que tenía el
   widget de imagen (100% x 500px, cover, radio 10px) para que el contenedor
   no cambie de alto y las capas de luz/red sigan encajando encima. */
.iaexp-video-mano-wrap .elementor-widget-container {
	line-height: 0;
}

.iaexp-video-mano {
	display: block;
	width: 100%;
	height: 500px;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 767px) {
	.iaexp-video-mano {
		height: 320px;
	}
}

/* ---------- 4. Carruseles con flechas claras (se activa el "show_arrows"
   nativo de Elementor; aquí solo se agrandan y se hacen evidentes) ---------- */

.iaexp-clear-arrows {
	--iaexp-flecha-tam: 3rem;
}

.iaexp-clear-arrows .elementor-swiper-button,
.iaexp-clear-arrows .swiper-button-prev,
.iaexp-clear-arrows .swiper-button-next,
.iaexp-clear-arrows .e-carousel-nav-prev,
.iaexp-clear-arrows .e-carousel-nav-next {
	width: var(--iaexp-flecha-tam) !important;
	height: var(--iaexp-flecha-tam) !important;
	display: grid !important;
	place-items: center;
	border-radius: 50%;
	background: var(--e-global-color-primary) !important;
	color: var(--e-global-color-4c06697, #fff) !important;
	border: none;
	box-shadow: 0 10px 25px -12px rgba(20, 17, 37, 0.28);
	opacity: 1 !important;
	transition: background-color 200ms ease, transform 200ms ease;
}

.iaexp-clear-arrows .elementor-swiper-button:hover,
.iaexp-clear-arrows .swiper-button-prev:hover,
.iaexp-clear-arrows .swiper-button-next:hover,
.iaexp-clear-arrows .e-carousel-nav-prev:hover,
.iaexp-clear-arrows .e-carousel-nav-next:hover {
	background: var(--e-global-color-secondary) !important;
	transform: scale(1.08);
}

.iaexp-clear-arrows .elementor-swiper-button:focus-visible,
.iaexp-clear-arrows .swiper-button-prev:focus-visible,
.iaexp-clear-arrows .swiper-button-next:focus-visible {
	outline: 3px solid var(--e-global-color-primary);
	outline-offset: 3px;
}

.iaexp-clear-arrows .elementor-swiper-button svg,
.iaexp-clear-arrows .elementor-swiper-button i {
	font-size: 1.1rem !important;
}

.iaexp-clear-arrows .elementor-swiper-button-prev,
.iaexp-clear-arrows .swiper-button-prev,
.iaexp-clear-arrows .e-carousel-nav-prev {
	left: -0.5rem !important;
}

.iaexp-clear-arrows .elementor-swiper-button-next,
.iaexp-clear-arrows .swiper-button-next,
.iaexp-clear-arrows .e-carousel-nav-next {
	right: -0.5rem !important;
}

/* ---------- 5. Clientes — pestañas deslizantes por categoría ---------- */

/* Colores calcados de la propuesta de referencia (pr_mexico): la pastilla es
   gris claro neutro y el thumb casi negro, a proposito distintos del Kit -
   es una replica exacta pedida, no un color de marca nuevo. */
.iaexp-clients-tabs {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	background: #ededf5;
	border-radius: 999px;
	padding: 4px;
	overflow-x: auto;
	margin: 0 auto 1.5rem;
	width: fit-content;
	max-width: 100%;
	scrollbar-width: none;
}

.iaexp-clients-tabs::-webkit-scrollbar {
	display: none;
}

.iaexp-clients-thumb {
	position: absolute;
	top: 4px;
	left: 0;
	height: calc(100% - 8px);
	width: 80px;
	background: #0d0d1a;
	border-radius: 999px;
	transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), width 280ms cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: 0;
}

/* Clase doblada: el tema hijo trae un reset "[type=button],button{border:1px
   solid #c36;color:#c36}" con la misma especificidad (0,1,0) que una sola
   clase, y su hoja carga despues de esta — el empate lo gana el tema. Doblar
   sube a (0,2,0) y gana sin depender del orden de carga. */
.iaexp-clients-tab.iaexp-clients-tab {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	border: none;
	background: transparent;
	color: #888;
	white-space: nowrap;
	font-family: var(--e-global-typography-accent-font-family, inherit);
	transition: color 200ms ease;
}

.iaexp-clients-tab.iaexp-clients-tab:hover,
.iaexp-clients-tab.iaexp-clients-tab:focus,
.iaexp-clients-tab.iaexp-clients-tab:focus-visible,
.iaexp-clients-tab.iaexp-clients-tab:active {
	background: transparent;
	border: none;
	outline: none;
	box-shadow: none;
}

.iaexp-clients-tab.iaexp-activo {
	color: #fff !important;
}

.iaexp-clients-tab.iaexp-clients-tab:not(.iaexp-activo):hover {
	color: #0d0d1a;
}

/* Fondo de cristal sobre la aurora oscura: el contenedor d9459bb lleva
   iaexp-aurora, así que la tarjeta pasa de "gris casi blanco sobre blanco" a
   translúcida sobre el fondo oscuro. Sigue sirviendo de respaldo estático:
   sin JavaScript, el grid se ve entero y quieto, con flex-wrap. */
.iaexp-clients-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.5rem 2.5rem;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	min-height: 80px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(8px);
	transition: opacity 150ms ease;
	overflow: hidden;
}

.iaexp-clients-grid img {
	height: 42px !important;
	width: auto !important;
	max-width: 160px !important;
	max-height: 42px !important;
	object-fit: contain;
	transition: transform 300ms ease;
	flex-shrink: 0;
}

.iaexp-clients-grid img:hover {
	transform: scale(1.08);
}

/* ---- Cinta en movimiento del sector activo ---- */

/* Con JavaScript, home.js sustituye el flex-wrap por una o dos pistas que se
   desplazan. Hasta que el script marca la raíz con data-cinta, se ve el
   respaldo estático de arriba: dos filas duplicadas darían la sensación de
   logos repetidos sin sentido si no hay animación. */
.iaexp-clients[data-cinta] .iaexp-clients-grid {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	padding: clamp(1rem, 2.5vw, 2rem) 0;
}

.iaexp-clients-cinta {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	animation: iaexp-clients-desplazar 32s linear infinite;
}

.iaexp-clients-cinta img {
	height: 42px;
	width: auto;
	max-width: 160px;
	max-height: 42px;
	object-fit: contain;
}

/* Cuando los logos del sector no llenan la franja, la cinta se queda quieta y
   centrada: desplazarla obligaría a repetir las mismas marcas para no dejar
   hueco, y esa repetición es justo lo que se lee como error. La copia que
   sostiene el bucle también se retira, porque solo servía para eso. */
.iaexp-clients-grid[data-quieta] {
	justify-content: center;
}

.iaexp-clients-grid[data-quieta] .iaexp-clients-cinta {
	animation: none;
	gap: 2.5rem;
}

.iaexp-clients-grid[data-quieta] .iaexp-clients-cinta > [aria-hidden="true"] {
	display: none !important;
}

/* Dos filas solo con logos de sobra: las marcas se reparten entre las dos
   pistas (una a cada una, alternando), así que ninguna aparece dos veces. La
   segunda gira al revés para que no se lean como una sola fila. */
.iaexp-clients-grid[data-filas="2"] {
	flex-direction: column;
	gap: 1rem;
}

.iaexp-clients-grid[data-filas="2"] .iaexp-clients-cinta:nth-of-type(2) {
	animation-direction: reverse;
}

.iaexp-clients-grid:hover .iaexp-clients-cinta,
.iaexp-clients-grid:focus-within .iaexp-clients-cinta {
	animation-play-state: paused;
}

@keyframes iaexp-clients-desplazar {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.iaexp-clients-cinta {
		animation: none;
	}
	.iaexp-clients[data-cinta] .iaexp-clients-grid {
		flex-wrap: wrap;
	}
}

/* ---------- 6. "¿Qué formatos de formación...?" — tarjetas interactivas ---------- */

.iaexp-format-card {
	position: relative;
	cursor: pointer;
	transition: transform 320ms ease, box-shadow 320ms ease;
}

.iaexp-format-card:hover,
.iaexp-format-card.iaexp-activo {
	transform: translateY(-0.4rem);
	box-shadow: 0 26px 48px -22px color-mix(in srgb, var(--e-global-color-primary) 38%, transparent);
}

.iaexp-format-card__detalle {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 320ms ease, opacity 280ms ease;
}

.iaexp-format-card:hover .iaexp-format-card__detalle,
.iaexp-format-card.iaexp-activo .iaexp-format-card__detalle {
	max-height: 4rem;
	opacity: 1;
	margin-top: 0.6rem;
}

/* ---------- 7. Ad hoc — ola azul con vida propia + tarjetas con hover ---------- */

/* Se anima con "translate/rotate/scale" en vez de "transform": son propiedades
   independientes que se SUMAN al transform que Elementor ya aplica (el
   translateX(-50%) de su propio efecto de posición), en lugar de reemplazarlo
   por completo — así no se estrecha ni pierde el ancho original. */
.iaexp-adhoc-wave {
	animation: iaexp-ola-flotar 4s ease-in-out infinite;
	transform-origin: center;
}

@keyframes iaexp-ola-flotar {
	0%, 100% {
		translate: 0 0;
		rotate: 0deg;
		scale: 1;
	}
	50% {
		translate: 0 -14px;
		rotate: 1.5deg;
		scale: 1.02;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iaexp-adhoc-wave {
		animation: none;
	}
}

.iaexp-hover-lift {
	transition: transform 280ms ease, border-color 280ms ease, background-color 280ms ease;
}

.iaexp-hover-lift:hover {
	transform: translateY(-0.4rem) scale(1.015);
	border-color: var(--e-global-color-primary) !important;
}

/* ---------- 8. Posicionamiento en los LLMs — rebote de gominola ---------- */

@keyframes iaexp-gominola {
	0% { transform: scale(1); }
	30% { transform: scale(1.18, 0.85); }
	50% { transform: scale(0.92, 1.1); }
	70% { transform: scale(1.06, 0.96); }
	100% { transform: scale(1); }
}

.iaexp-gummy {
	display: inline-block;
	transition: transform 120ms ease;
}

.iaexp-gummy:hover {
	animation: iaexp-gominola 650ms cubic-bezier(0.36, 0, 0.66, 1.5);
}

@media (prefers-reduced-motion: reduce) {
	.iaexp-gummy:hover {
		animation: none;
	}
}

/* ---------- 9. FAQ — hover ---------- */

.iaexp-faq .e-n-accordion-item,
.iaexp-faq .e-n-accordion-item-title {
	transition: background-color 220ms ease, transform 220ms ease;
}

.iaexp-faq .e-n-accordion-item:hover {
	background: color-mix(in srgb, var(--e-global-color-secondary) 5%, transparent);
	transform: translateX(0.35rem);
}

/* ---------- 10. Hero — mockup de móvil con giro 3D continuo ---------- */

/* El "perspective" va en el elemento padre (el widget) y la rotación en su
   contenedor interno, no en el <img>: así no pisa el motion effect de escala
   que Elementor ya aplica sobre el <img> al hacer scroll. */
.iaexp-hero-phone-3d {
	perspective: 1400px;
}

.iaexp-hero-phone-3d .elementor-widget-container {
	animation: iaexp-phone-spin 5s linear infinite;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

@keyframes iaexp-phone-spin {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.iaexp-hero-phone-3d .elementor-widget-container {
		animation: none;
	}
}

/* ---------- 11. Hero — antetítulo "IA EXPERIENCE" ---------- */

/* Con la cápsula de navegación transparente sobre el vídeo, el logo ya dice la
   marca justo encima: el antetítulo azul duplicaba el mensaje y chocaba con él.
   Se oculta por CSS en vez de borrar el widget para no tocar _elementor_data. */
.elementor-11 .elementor-element-ac989f9 {
	display: none;
}

/* ---------- 12. Carrusel de cursos — tarjetas de alto idéntico ---------- */

/* En el mismo carrusel conviven dos anatomías: las tarjetas de plantilla
   (shortcode → div.elementor-XXXX → a.e-con-full) y la de "Optimiza Claude",
   que es HTML plano dentro del propio slide. Swiper iguala el alto de los
   .swiper-slide, pero ese alto no baja por herencia: hay que repetirlo en
   cada nivel intermedio hasta llegar a la tarjeta. */
.iaexp-clear-arrows .elementor-testimonial,
.iaexp-clear-arrows .elementor-testimonial__content,
.iaexp-clear-arrows .elementor-testimonial__text,
.iaexp-clear-arrows .elementor-testimonial__text > *,
.iaexp-clear-arrows .elementor-testimonial__text .e-con-full {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* La imagen mide siempre igual, y no por casualidad: el tema hijo pone
   `.card-formacion { display: flex !important }`, así que sin proporción
   declarada su alto salía del reparto de espacio del flex y cambiaba con la
   longitud del texto de cada tarjeta. 6:5 es la proporción a la que ya se
   veían las fichas de plantilla, así que el alto no cambia respecto a lo que
   había; `cover` recorta lo que sobra en vez de estirar la foto. */
.iaexp-clear-arrows .elementor-testimonial__text img {
	width: 100%;
	height: auto;
	aspect-ratio: 6 / 5;
	object-fit: cover;
}

/* El bloque de texto es el único que crece: el alto sobrante se reparte ahí
   y la imagen se queda quieta. */
.iaexp-clear-arrows .elementor-testimonial__text > * > *:last-child,
.iaexp-clear-arrows .elementor-testimonial__text .e-con-boxed {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* ---------- 13. Hero — separar el bloque de texto de la navbar ---------- */

/* La cápsula de navegación flota sobre el hero (position fixed, top 26px) y
   ocupa unos 96px desde el borde superior, mientras que el hero solo reserva
   60px de padding: el título quedaba pisando la navbar. El desplazamiento va
   como padding-top de la columna de texto y no como padding del hero porque
   ese padding lo comparten los dos hijos de la fila, y el contenedor del móvil
   3D centra su contenido: tocarlo lo movería también.

   En móvil la cabecera es el menú hamburguesa y la fila pasa a columna, así
   que el problema no existe y el desplazamiento se anula.

   El selector va sin ">": .hero-container es un contenedor "boxed", así que
   Elementor intercala un .e-con-inner y la columna de texto es nieta, no hija
   directa. */
.hero-container .content-title {
	padding-top: 64px !important;
}

@media (max-width: 767px) {
	.hero-container .content-title {
		padding-top: 0 !important;
	}
}

/* ---------- 14. Hero — franja de métricas verificables ----------
   Las cifras salían al tamaño de titular del Kit (tres números de más de 100px
   sobre el vídeo, con las etiquetas partidas en dos líneas gigantes) y competían
   con el propio título del hero. Aquí pasan a franja de apoyo: la cifra manda
   dentro del grupo, pero el grupo entero pesa menos que el titular.

   Va con !important y no por especificidad porque Elementor escribe estos
   tamaños en `.elementor-11 .elementor-element.elementor-element-XXXX
   .elementor-counter-number` — cuatro clases con el id del widget dentro, que
   cambia en cuanto la métrica se rehace en el editor. */

.iaexp-metricas {
	margin-top: 12px;
	align-items: stretch;
}

.iaexp-metricas .elementor-counter-number-wrapper {
	display: flex;
	align-items: baseline;
	/* El número no debe bailar de ancho mientras cuenta: hero es texto sobre
	   vídeo, un salto de layout ahí es lo primero que se nota. */
	font-variant-numeric: tabular-nums;
	font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	color: var(--e-global-color-4c06697, #fff) !important;
}

/* El sufijo es una aclaración («º según las IAs»), no parte de la cifra: al
   mismo tamaño que el número se leía como si el dato fuese la frase entera. */
.iaexp-metricas .elementor-counter-number-suffix,
.iaexp-metricas .elementor-counter-number-prefix {
	font-size: 0.42em !important;
	font-weight: 800 !important;
	letter-spacing: 0.01em;
	flex: 0 1 auto;
	min-width: 0;
}

.iaexp-metricas .elementor-counter-title {
	margin-top: 0.35rem;
	font-family: var(--e-global-typography-accent-font-family, inherit);
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--e-global-color-4c06697, #fff) !important;
	opacity: 0.82;
}

/* Un filo vertical entre métricas: las agrupa como una franja de datos en vez
   de tres bloques sueltos, y no añade ningún color nuevo. */
.iaexp-metricas > .elementor-widget + .elementor-widget {
	padding-left: clamp(1rem, 2vw, 1.75rem);
	border-left: 1px solid color-mix(in srgb, var(--e-global-color-4c06697, #fff) 28%, transparent);
}

@media (max-width: 767px) {
	.iaexp-metricas {
		flex-wrap: wrap;
	}

	/* En columna el filo pasa a horizontal: un borde izquierdo en una pila de
	   tres deja tres rayas verticales sin nada que separar. */
	.iaexp-metricas > .elementor-widget + .elementor-widget {
		padding-left: 0;
		padding-top: 0.75rem;
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--e-global-color-4c06697, #fff) 28%, transparent);
	}
}

/* ---------- 14b. Títulos de sección ----------
   El encabezado de "Qué hacemos" vivía dentro del mismo contenedor en fila que
   las tres tarjetas de pilar, así que era un hermano flex más y quedaba como una
   cuarta columna estrecha a la izquierda, partido en dos líneas. Ahora tiene su
   propio contenedor —como el resto de las secciones de la Home— y aquí solo se
   corrige el tamaño: traía el estilo de antetítulo del Kit (17px) en lugar de la
   escala de titulares.

   Ancho completo con `width` y no con `flex-basis`: el contenedor propio es una
   columna, y ahí un basis del 100 % se leería como altura. */
.iaexp-titulo-seccion {
	width: 100%;
	margin-bottom: clamp(0.5rem, 1.5vw, 1.25rem);
}

.iaexp-titulo-seccion .elementor-heading-title {
	font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.6rem) !important;
	line-height: 1.1 !important;
}

/* ---------- 15. Movimiento reducido para las animaciones nativas de
   Elementor (entrada al hacer scroll y seguimiento del ratón) ---------- */

/* Elementor oculta el elemento con .elementor-invisible hasta que el scroll
   dispara la animación, sin comprobar la preferencia del sistema: sin esto,
   con movimiento reducido el contenido se queda invisible para siempre en
   vez de aparecer ya colocado. */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
	}
}