/* ==========================================================================
   Master Lease · rediseño 2026 · lo que Elementor no alcanza
   --------------------------------------------------------------------------
   Colores y tipografías viven en el Kit (ID 6). Aquí solo hay pseudoelementos,
   hovers compuestos, animaciones propias y ajustes que ningún control expone.
   Cada bloque dice por qué no cabe en un ajuste. Se edita, no se acumula.

   ÍNDICE DE CLASES (se ponen en el widget o contenedor desde Elementor)
   Generales
     .ml26-sec                 sección de primer nivel (solo marca, sin estilo)
     .ml26-eyebrow             etiqueta superior con filete rojo delante
     .ml26-btn                 botón del diseño: relleno que se desliza + flecha
       --primary --ink --light --outline-light --ghost   variantes de color
       --lg --sm                                         tamaños (icono)
       --bounce                                          rebote constante (CTA de contacto)
     .ml26-media               imagen que llena su columna, con zoom en hover
     .btn-header               botón de la cabecera: relleno blanco en hover
   Cabecera (plantilla 30)
     .ml26-header              barra oscura fija
     .ml26-logo                logo con zoom y halo rojo en hover
     .ml26-nav                 megamenú: subrayado rojo, caret que gira
     .ml26-dd                  panel desplegable
     .ml26-dd-item             opción del desplegable (+ .ml26-dd-<id página>)
   Páginas interiores
     .ml26-pagehero --sticky --static   banner de página (velo, fijo o fondo fijo)
     .ml26-pagehero-copy                caja del texto del banner (se desvanece al bajar)
     .ml26-media--ratio .ml26-ar-<a>-<b> imagen con proporción fija
   Portada y bloques comunes
     .ml26-hero .ml26-glass .ml26-opt   slider, tarjeta del perfilamiento, opciones
     .ml26-trust .ml26-trust-item       tira de confianza
     .ml26-tcar                         carrusel de tarjetas de color
     .ml26-card .ml26-card--dark        tarjetas con icono
     .ml26-checks                       lista con check en círculo rojo
     .ml26-steps .ml26-step             pasos con línea y número
     .ml26-ptab                         comparador renting/leasing/compra
     .ml26-sector                       tarjeta de sector
     .ml26-testi                        testimonial
     .ml26-faq                          acordeón de preguntas
     .ml26-contact-list                 lista corta con iconos rojos
     .ml26-cta                          cintillo CTA
   Pie (plantilla 47)
     .ml26-footer .ml26-flist .ml26-fcontact .ml26-fgm
   ========================================================================== */

/* Tokens que el Kit no sabe guardar: radios, sombras y curvas. Se declaran en
   la clase del Kit (cuelga del body) para poder derivar de sus colores. */
.elementor-kit-6 {
	--ml-radius: 18px;
	--ml-radius-lg: 28px;
	--ml-ease: cubic-bezier(.22, .61, .36, 1);
	--ml-ease-out: cubic-bezier(.16, 1, .3, 1);
	--ml-shadow-sm: 0 2px 8px rgba(38, 34, 31, .05);
	--ml-shadow-md: 0 6px 18px -8px rgba(38, 34, 31, .14);
}

/* Titulares a dos colores del diseño: la palabra en <em> va en rojo, sin
   cursiva. Elementor no tiene control para un fragmento del titular. */
.elementor-kit-6 :is(h1, h2, h3) em {
	font-style: normal;
	color: var(--e-global-color-primary);
}
.elementor-kit-6 .ml26-on-dark :is(h1, h2, h3) em {
	color: var(--e-global-color-mlrojo2);
}

/* El envoltorio de los iconos hereda el interlineado del cuerpo y le suma
   8 px al icono en caja; no hay ajuste de interlineado en el widget Icono. */
.ml26-sec .elementor-widget-icon .elementor-icon-wrapper {
	line-height: 0;
}

/* .ml26-eyebrow — filete de 26 px delante del texto (pseudoelemento). */
.ml26-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.ml26-eyebrow .elementor-heading-title::before {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/* ---------- Botones ----------
   El relleno que entra desde la izquierda es un pseudoelemento; Elementor solo
   cambia el color de fondo de golpe. Por eso el color de hover del widget es
   el mismo que el de reposo y el cambio lo pinta ::before. La flecha empuja
   con un @keyframes propio y el botón sube 2 px. vertical-align: top quita el
   hueco de descendente que deja el botón inline-flex dentro de su widget. */
.ml26-btn .elementor-button {
	position: relative;
	vertical-align: top;
	overflow: hidden;
	isolation: isolate;
	transition: transform .35s var(--ml-ease-out), box-shadow .35s var(--ml-ease-out), color .3s var(--ml-ease), border-color .3s var(--ml-ease);
}
/* La hoja base del tema subraya todo <a> (reset de Hello): los botones y la
   lista «También te puede interesar» de los artículos no llevan subrayado. */
.ml26-btn .elementor-button,
.ml26-related a {
	text-decoration: none;
}
.ml26-btn .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ml-btn-fill, var(--e-global-color-accent));
	transform: translateX(-101%);
	transition: transform .45s var(--ml-ease-out);
}
.ml26-btn .elementor-button:hover::before,
.ml26-btn .elementor-button:focus-visible::before {
	transform: translateX(0);
}
.ml26-btn .elementor-button:hover {
	transform: translateY(-2px);
}
.ml26-btn .elementor-button:active {
	transform: translateY(0);
}
.ml26-btn .elementor-button:focus-visible {
	outline: 3px solid var(--e-global-color-accent);
	outline-offset: 3px;
}
.ml26-btn .elementor-button-icon svg {
	width: 17px;
	height: 17px;
}
.ml26-btn .elementor-button:hover .elementor-button-icon {
	animation: ml26-arrow-nudge .7s var(--ml-ease-out);
}
@keyframes ml26-arrow-nudge {
	0% { transform: translateX(0); }
	45% { transform: translateX(7px); }
	100% { transform: translateX(3px); }
}
.ml26-btn--primary { --ml-btn-fill: var(--e-global-color-accent); }
.ml26-btn--ink { --ml-btn-fill: var(--e-global-color-primary); }
.ml26-btn--light { --ml-btn-fill: var(--e-global-color-accent); }
.ml26-btn--outline-light { --ml-btn-fill: var(--e-global-color-mlblanc); }
/* Botón de la cabecera: sobre la barra oscura el relleno tinta no se notaba;
   el diseño lo pasa a blanco (el texto a tinta va en el ajuste de hover). */
.btn-header.ml26-btn--primary { --ml-btn-fill: var(--e-global-color-mlblanc); }
/* Botón claro sobre fondo negro/tinta (cintillo final y llamado a la acción
   del blog): el relleno tinta no se veía; pasa a rojo. */
:is(.ml26-cta, .ml26-cta-card) .ml26-btn--light { --ml-btn-fill: var(--e-global-color-primary); }

/* --ghost: enlace con subrayado rojo que crece desde la izquierda. */
.ml26-btn--ghost .elementor-button {
	overflow: visible;
}
.ml26-btn--ghost .elementor-button::before {
	display: none;
}
.ml26-btn--ghost .elementor-button::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 100%;
	height: 1.5px;
	background: var(--e-global-color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--ml-ease-out);
}
.ml26-btn--ghost .elementor-button:hover {
	transform: none;
}
.ml26-btn--ghost .elementor-button:hover::after {
	transform: scaleX(1);
}

/* --bounce: rebote constante para llamar la atención; se pausa en hover. */
.ml26-btn--bounce .elementor-button {
	animation: ml26-btn-bounce 2.2s var(--ml-ease-out) infinite;
}
.ml26-btn--bounce .elementor-button:hover {
	animation-play-state: paused;
}
@keyframes ml26-btn-bounce {
	0%, 62%, 100% { transform: translateY(0); }
	70% { transform: translateY(-7px); }
	80% { transform: translateY(0); }
	88% { transform: translateY(-3px); }
	94% { transform: translateY(0); }
}

/* Entrada de bloques. El fadeInUp de Elementor parte del 100 % del alto del
   propio bloque (cientos de píxeles en bloques altos) y se ve lento y a
   tirones. Se sustituye por el gesto del diseño: 26 px, 0,8 s, salida suave.
   Solo transform y opacity: se anima en la GPU. El tipo de animación y el
   retraso se siguen eligiendo en Elementor. */
.elementor-kit-6 .animated.fadeInUp {
	animation-name: ml26-fade-up;
	animation-duration: .8s;
	animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
@keyframes ml26-fade-up {
	from { opacity: 0; transform: translate3d(0, 26px, 0); }
	to { opacity: 1; transform: none; }
}

/* Elementor no respeta prefers-reduced-motion por su cuenta. No hay ajuste
   para esto; por eso vive aquí, y cubre también las animaciones propias. */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
	}
	.animated,
	[class*="ml26-"] *,
	[class*="ml26-"] {
		animation-name: none !important;
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   Cabecera (plantilla 30)
   ========================================================================== */

/* .ml26-logo — zoom con halo rojo en hover: filter drop-shadow no existe en
   los controles del widget de logo. */
.ml26-logo img {
	transform-origin: left center;
	transition: transform .45s var(--ml-ease-out), filter .45s var(--ml-ease);
}
.ml26-logo:hover img {
	transform: scale(1.07);
	filter: drop-shadow(0 8px 18px rgba(227, 9, 24, .35));
}

/* .ml26-nav — subrayado rojo que crece bajo el ítem (pseudoelemento) y caret
   que gira al abrir. El megamenú solo expone colores y fondo por estado.
   Va en ::before porque Elementor usa el ::after del ítem para sus separadores
   y con más especificidad (content: none). */
.ml26-nav .e-n-menu-title {
	position: relative;
}
.ml26-nav .e-n-menu-title::before {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--e-global-color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--ml-ease-out);
	pointer-events: none;
}
.ml26-nav .e-n-menu-item:hover > .e-n-menu-title::before,
.ml26-nav .e-n-menu-title.e-current::before {
	transform: scaleX(1);
}

/* Sección actual del menú: el ítem superior («Renting», «Beneficios») queda
   en blanco y subrayado cuando la página actual está en su desplegable.
   Elementor solo marca la página actual en los enlaces directos. */
:is(body.page-id-353, body.page-id-359, body.page-id-354, body.page-id-356, body.page-id-364) .ml26-nav .e-n-menu-item:has(.ml26-dd-353) > .e-n-menu-title::before,
:is(body.page-id-355, body.page-id-358, body.page-id-360) .ml26-nav .e-n-menu-item:has(.ml26-dd-355) > .e-n-menu-title::before,
body.page-id-357 .ml26-nav .e-n-menu-item:has(> .e-n-menu-title a[href*="/sectores/"]) > .e-n-menu-title::before,
body.page-id-361 .ml26-nav .e-n-menu-item:has(> .e-n-menu-title a[href*="/nosotros/"]) > .e-n-menu-title::before,
:is(body.page-id-363, body.single-post) .ml26-nav .e-n-menu-item:has(> .e-n-menu-title a[href*="/blog/"]) > .e-n-menu-title::before {
	transform: scaleX(1);
}
:is(body.page-id-353, body.page-id-359, body.page-id-354, body.page-id-356, body.page-id-364) .ml26-nav .e-n-menu-item:has(.ml26-dd-353) > .e-n-menu-title .e-n-menu-title-text,
:is(body.page-id-355, body.page-id-358, body.page-id-360) .ml26-nav .e-n-menu-item:has(.ml26-dd-355) > .e-n-menu-title .e-n-menu-title-text,
body.page-id-357 .ml26-nav .e-n-menu-item:has(> .e-n-menu-title a[href*="/sectores/"]) > .e-n-menu-title .e-n-menu-title-text,
body.page-id-361 .ml26-nav .e-n-menu-item:has(> .e-n-menu-title a[href*="/nosotros/"]) > .e-n-menu-title .e-n-menu-title-text,
:is(body.page-id-363, body.single-post) .ml26-nav .e-n-menu-item:has(> .e-n-menu-title a[href*="/blog/"]) > .e-n-menu-title .e-n-menu-title-text {
	color: var(--e-global-color-mlblanc);
}
.ml26-nav .e-n-menu-dropdown-icon {
	transition: transform .35s var(--ml-ease-out);
}
.ml26-nav .e-n-menu-item:hover .e-n-menu-dropdown-icon {
	transform: rotate(180deg);
}

/* .ml26-dd-item — en hover la opción se corre 2 px, gana 4 px de sangría y el
   titular pasa a rojo: tres propiedades de dos elementos a la vez. */
.ml26-dd .ml26-dd-item {
	transition: background .28s var(--ml-ease), transform .28s var(--ml-ease-out), padding .28s var(--ml-ease-out);
}
.ml26-dd .ml26-dd-item:hover {
	transform: translateX(2px);
	padding-left: 18px;
}
.ml26-dd .ml26-dd-item .elementor-heading-title {
	transition: color .28s var(--ml-ease);
}
.ml26-dd .ml26-dd-item:hover .elementor-heading-title {
	color: var(--e-global-color-primary);
}

/* Página actual dentro del desplegable: fondo rosa y textos rojos (sin la
   barra roja a la izquierda: se quitó en la ronda 17). Elementor no marca la página actual en el contenido del
   megamenú, así que se cruza la clase del body con la de la opción. */
body.page-id-353 .ml26-dd-353, body.page-id-359 .ml26-dd-359, body.page-id-354 .ml26-dd-354,
body.page-id-356 .ml26-dd-356, body.page-id-364 .ml26-dd-364, body.page-id-355 .ml26-dd-355,
body.page-id-358 .ml26-dd-358, body.page-id-360 .ml26-dd-360 {
	position: relative;
	background: var(--e-global-color-mlrosa1);
}
:is(body.page-id-353 .ml26-dd-353, body.page-id-359 .ml26-dd-359, body.page-id-354 .ml26-dd-354,
body.page-id-356 .ml26-dd-356, body.page-id-364 .ml26-dd-364, body.page-id-355 .ml26-dd-355,
body.page-id-358 .ml26-dd-358, body.page-id-360 .ml26-dd-360) :is(.elementor-heading-title, p) {
	color: var(--e-global-color-primary);
}

/* ==========================================================================
   Pie (plantilla 47)
   ========================================================================== */

/* .ml26-flist — el enlace crece y se corre en hover. La lista de iconos solo
   expone el color en hover, no transformaciones por ítem. */
.ml26-flist .elementor-icon-list-item > a {
	display: inline-flex;
	transform-origin: left center;
	transition: transform .38s var(--ml-ease-out);
}
.ml26-flist .elementor-icon-list-text {
	transition: color .32s var(--ml-ease);
}
.ml26-flist .elementor-icon-list-item > a:hover {
	transform: scale(1.055) translateX(3px);
}

/* .ml26-fcontact — cada icono va en un cuadro de 34 px que se pone rojo en
   hover. La lista de iconos no tiene fondo ni radio para el icono. (Elementor
   la pone en flex alineada al inicio: se centra con justify-content.) */
.elementor-widget.ml26-fcontact .elementor-icon-list-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	margin-right: 13px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .07);
	transition: background .35s var(--ml-ease);
}
/* El espacio icono-texto de Elementor es relleno del propio icono y
   descentra el glifo en su cuadro: el ajuste va a 0 y el espacio es margen
   fuera de la caja (en la regla de cada lista). El SVG trae además un margen
   propio que se anula. */
.elementor-widget.ml26-fcontact .elementor-icon-list-icon svg,
.elementor-widget.ml26-modal-list .elementor-icon-list-icon svg {
	margin: 0;
}
/* Con el espacio a 0, Elementor deja 5 px de relleno por defecto al texto:
   se anula en las listas con icono en caja (el espacio real es el margen). */
.elementor-widget:is(.ml26-fcontact, .ml26-modal-list, .ml26-benef-list) .elementor-icon-list-text {
	padding-left: 0;
}
.ml26-fcontact .elementor-icon-list-icon svg {
	transition: fill .35s var(--ml-ease);
}
.ml26-fcontact .elementor-icon-list-item {
	align-items: flex-start;
}
.ml26-fcontact .elementor-icon-list-text {
	padding-top: 6px;
}
/* El teléfono va como <a> dentro del texto del ítem: Elementor pone display:
   flex a todo enlace del ítem (partía «Tel.» y el número en dos líneas) y el
   color de enlace del Kit lo pintaría rojo. Hereda el color del ítem, que ya
   cambia a blanco en hover desde los ajustes. */
.ml26-fcontact .elementor-icon-list-text a {
	display: inline;
	color: inherit;
}
.ml26-fcontact .elementor-icon-list-item:hover .elementor-icon-list-icon {
	background: var(--e-global-color-primary);
}
/* Mismo crecimiento en hover que .ml26-flist (pedido del cliente, ronda 16):
   crece el ítem entero, cuadro del icono y texto. */
.ml26-fcontact .elementor-icon-list-item {
	transform-origin: left center;
	transition: transform .38s var(--ml-ease-out);
}
.ml26-fcontact .elementor-icon-list-item:hover {
	transform: scale(1.055) translateX(3px);
}
/* Pie en móvil (ronda 21): logo y Contacto a todo el ancho; «Renting» y
   «Empresa» lado a lado (rejilla de 2 columnas en ajustes). El «ocupar las
   dos columnas» de un hijo de rejilla no es ajuste del contenedor. */
@media (max-width: 767px) {
	.ml26-footer .e-grid > .e-con:first-child,
	.ml26-footer .e-grid > .e-con:last-child {
		grid-column: 1 / -1;
	}
	/* «Empresa» pegada al borde derecho, con su texto a la izquierda
	   (ronda 25): la columna mide lo que su contenido y se va al final. */
	.ml26-footer .e-grid > .e-con:nth-child(3) {
		--width: max-content;
		width: max-content;
		justify-self: end;
	}
}

/* ==========================================================================
   Páginas interiores
   ========================================================================== */

/* Velo del banner en dos degradados (oscuro a la izquierda, sombra arriba).
   El fondo del contenedor solo admite un degradado de dos paradas y su
   ::before es la capa de superposición de Elementor (trampa B3).
   Aclarado a pedido del cliente (2026-09-22) y acortado (2026-09-23): el
   oscuro (69 %) se queda detrás del texto y se desvanece en escalones suaves
   hasta desaparecer al 76 % del ancho, para que
   la mitad de la foto sin texto se vea limpia: se ve más la foto; la lectura
   la sostienen el tramo oscuro detrás del texto y una sombra suave en las
   letras. En móvil el texto ocupa todo el ancho: velo parejo. */
.ml26-pagehero {
	position: relative;
}
.ml26-pagehero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(100deg, rgba(20, 18, 16, .69) 0%, rgba(20, 18, 16, .6) 30%, rgba(20, 18, 16, .44) 44%, rgba(20, 18, 16, .26) 54%, rgba(20, 18, 16, .1) 64%, rgba(20, 18, 16, .03) 70%, rgba(20, 18, 16, 0) 76%),
		linear-gradient(180deg, rgba(20, 18, 16, .42) 0%, rgba(0, 0, 0, 0) 28%);
}
.ml26-pagehero :is(h1, p),
.ml26-hero-slides .swiper-slide-contents {
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
@media (max-width: 767px) {
	.ml26-pagehero::after {
		background: linear-gradient(180deg, rgba(20, 18, 16, .5) 0%, rgba(20, 18, 16, .58) 100%);
	}
}
.ml26-pagehero > .e-con-inner {
	position: relative;
	z-index: 2;
}

/* --sticky: el banner se queda fijo y el contenido de la página lo tapa al
   bajar. position: sticky no es un ajuste de Elementor (su «pegajoso» es por
   JavaScript y otra cosa). Las secciones siguientes suben por encima y las
   que no tienen fondo propio se pintan en blanco. */
.ml26-pagehero--sticky {
	position: sticky;
	top: 0;
	z-index: 0;
}
.ml26-pagehero--sticky ~ .ml26-sec {
	position: relative;
	z-index: 2;
	background-color: var(--e-global-color-mlblanc);
}
.ml26-pagehero-copy {
	will-change: opacity, transform;
}

/* Imagen con proporción fija (.media-frame--wide del diseño): el widget de
   imagen no tiene proporción. */
.ml26-media--ratio,
.ml26-media--ratio .elementor-widget-container {
	height: auto;
}
.ml26-media--ratio img {
	height: auto;
	object-fit: cover;
}
.ml26-ar-16-11 img { aspect-ratio: 16 / 11; }
.ml26-ar-4-3 img { aspect-ratio: 4 / 3; }
.ml26-ar-1-1 img { aspect-ratio: 1 / 1; }
/* imagen destacada de la entrada: la proporción que tenía a 920×520 */
.ml26-ar-23-13 img { aspect-ratio: 23 / 13; }

/* .ml26-benef-list — check en círculo de 22 px (blanco o rojo según el
   cuadro) que crece al pasar por el ítem. La lista de iconos no tiene fondo
   para el icono; el espacio icono-texto va como margen (ver pie). */
.elementor-widget.ml26-benef-list .elementor-icon-list-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	margin-right: 13px;
	border-radius: 50%;
	background: var(--e-global-color-mlblanc);
	transition: transform .4s var(--ml-ease-out);
}
.elementor-widget.ml26-benef-list--light .elementor-icon-list-icon {
	background: var(--e-global-color-primary);
}
/* El check es de trazo y la lista solo le da fill: el trazo toma su color
   aquí, uno por variante (rojo, tinta, blanco), como el diseño. */
.elementor-widget.ml26-benef-list .elementor-icon-list-icon svg {
	margin: 0;
	color: var(--e-global-color-primary);
}
.elementor-widget.ml26-benef-list--dark .elementor-icon-list-icon svg {
	color: var(--e-global-color-accent);
}
.elementor-widget.ml26-benef-list--light .elementor-icon-list-icon svg {
	color: var(--e-global-color-mlblanc);
}
.ml26-benef-list .elementor-icon-list-item:hover .elementor-icon-list-icon {
	transform: scale(1.1);
}

/* ==========================================================================
   Portada y bloques comunes
   ========================================================================== */

/* ---------- Hero (widget Diapositivas) ---------- */

/* Velo en dos degradados (oscuro a la izquierda, sombra arriba). La capa de
   color del widget solo admite un color plano. Aclarado a pedido del cliente
   (ver .ml26-pagehero). */
.ml26-hero-slides .swiper-slide-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(20, 18, 16, .69) 0%, rgba(20, 18, 16, .6) 30%, rgba(20, 18, 16, .44) 44%, rgba(20, 18, 16, .26) 54%, rgba(20, 18, 16, .1) 64%, rgba(20, 18, 16, .03) 70%, rgba(20, 18, 16, 0) 76%),
		linear-gradient(180deg, rgba(20, 18, 16, .42) 0%, rgba(0, 0, 0, 0) 26%);
}
@media (max-width: 767px) {
	.ml26-hero-slides .swiper-slide-bg::after {
		background: linear-gradient(180deg, rgba(20, 18, 16, .52) 0%, rgba(20, 18, 16, .4) 55%, rgba(20, 18, 16, .3) 100%);
	}
}

/* Botón de la diapositiva: el widget no tiene icono ni relleno propio.
   Toma el relleno deslizante de .ml26-btn y aquí se añade la flecha. */
/* (.elementor-element + .swiper suben la especificidad por encima de la de
   Elementor para los botones y flechas del slider.) */
.elementor-element.ml26-hero-slides .swiper .elementor-slide-button {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 18px 34px;
	line-height: 1.72;
}
.elementor-element.ml26-hero-slides .swiper .elementor-slide-button::after {
	content: "";
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor-element.ml26-hero-slides .swiper .elementor-slide-button:hover::after {
	animation: ml26-arrow-nudge .7s var(--ml-ease-out);
}

/* Flechas del slider: en el diseño van debajo del botón, alineadas con el
   texto, en círculos con borde. El widget solo las pone a los lados. */
.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button {
	top: auto;
	bottom: 137px;
	transform: none;
	width: 50px;
	height: 50px;
	display: grid;
	place-items: center;
	border: 1.5px solid rgba(255, 255, 255, .34);
	border-radius: 50%;
	transition: color .3s var(--ml-ease), border-color .3s var(--ml-ease);
}
.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button-prev {
	left: max(32px, calc((100% - 1240px) / 2));
}
.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button-next {
	left: calc(max(32px, calc((100% - 1240px) / 2)) + 62px);
	right: auto;
}
.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button:hover {
	color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
}
.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button:hover svg {
	fill: var(--e-global-color-primary);
}

/* ---------- Tarjeta del perfilamiento (.ml26-glass) ---------- */

/* Pulso rojo alrededor de la tarjeta. Va en un pseudoelemento transparente
   con un anillo sin desenfoque: animar la sombra grande de la tarjeta (70 px
   de desenfoque) obligaba a repintarla en cada fotograma sobre la foto en
   movimiento. La sombra fija de la tarjeta está en sus ajustes. */
.ml26-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	animation: ml26-glass-pulse 3.4s ease-in-out infinite;
}
@keyframes ml26-glass-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(227, 9, 24, .34); }
	55% { box-shadow: 0 0 0 12px rgba(227, 9, 24, 0); }
}

/* En tablet y móvil la tarjeta del perfilamiento va debajo del slider, fuera
   de la foto (ronda 17; deshace la tarjeta sobre la foto de la ronda 5): el
   anclaje de escritorio (posición absoluta) se anula en sus ajustes. Las
   flechas bajan al pie de la diapositiva, alineadas con el texto. La posición
   del contenedor no es un ajuste responsivo en Elementor. */
@media (max-width: 1024px) {
	.ml26-hero.e-con > .e-con.ml26-glass {
		--position: relative;
	}
	/* Fondo claro debajo de la foto (ronda 18): con el oscuro, la tarjeta y
	   la tira de confianza se fundían. El color de fondo del contenedor no es
	   responsivo en Elementor y su regla lleva 4 clases: !important. */
	.ml26-hero.e-con {
		background-color: var(--e-global-color-635ac40) !important;
	}
	.ml26-hero.e-con > .e-con.ml26-glass {
		border-color: var(--e-global-color-ba97f2c);
		box-shadow: 0 18px 40px -24px rgba(38, 34, 31, .35);
	}
	.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button {
		bottom: 40px;
	}
	.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button-prev {
		left: 28px;
	}
	.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button-next {
		left: 90px;
	}
}
@media (max-width: 767px) {
	.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button {
		bottom: 32px;
	}
	.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button-prev {
		left: 20px;
	}
	.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button-next {
		left: 82px;
	}
}

/* .ml26-opt — opción con círculo de selección a la izquierda (pseudoelemento).
   Sin la flecha al pasar el cursor (pedido del cliente, ronda 15). */
.ml26-opt .elementor-button-content-wrapper {
	width: 100%;
	align-items: center;
}
.ml26-opt .elementor-button-text {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	flex: 1;
}
.ml26-opt .elementor-button-text::before {
	content: "";
	flex: none;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	border: 1.5px solid var(--e-global-color-ba97f2c);
	box-sizing: border-box;
	transition: border-color .3s var(--ml-ease);
}
.ml26-opt .elementor-button:hover .elementor-button-text::before {
	border-color: var(--e-global-color-primary);
}
.ml26-opt .elementor-button-icon {
	display: none;
}
.ml26-opt .elementor-button {
	transition: background .3s var(--ml-ease), border-color .3s var(--ml-ease), transform .3s var(--ml-ease-out);
}

/* ---------- Tira de confianza ---------- */

/* Filete vertical entre ítems, recortado arriba y abajo, y el icono que
   crece al pasar por todo el ítem (no solo por el icono). */
.ml26-trust-item {
	position: relative;
}
.ml26-trust-item + .ml26-trust-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 26px;
	bottom: 26px;
	width: 1px;
	background: rgba(255, 255, 255, .14);
}
.ml26-trust-item .elementor-icon {
	transition: transform .4s var(--ml-ease-out);
}
.ml26-trust-item:hover .elementor-icon {
	transform: scale(1.12);
}
/* Tablet: rejilla 2×2, sin filete al empezar la segunda fila. Móvil: una
   columna con filete horizontal entre todos los ítems. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ml26-trust-item:nth-child(3)::before {
		display: none;
	}
}
@media (max-width: 767px) {
	.ml26-trust-item + .ml26-trust-item::before {
		inset: 0 0 auto;
		width: auto;
		height: 1px;
	}
}

/* ---------- Carrusel de tarjetas de color (.ml26-tcar) ---------- */

/* Posición, color, borde y radio de las flechas van en los ajustes del
   carrusel. Aquí solo el estado apagado en los extremos, que no tiene
   control. (.elementor-element sube la especificidad sobre la regla de
   Elementor, que lleva tres clases.) */
.elementor-element.ml26-tcar .elementor-swiper-button {
	transition: color .3s var(--ml-ease), border-color .3s var(--ml-ease), opacity .3s var(--ml-ease);
}
.elementor-element.ml26-tcar .elementor-swiper-button.swiper-button-disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/* ---------- Lista de checks (.ml26-checks) ----------
   En móvil la lista va dentro de una tarjeta blanca (borde, radio, relleno y
   filetes están en los ajustes); el fondo va aquí porque el color de fondo
   del contenedor no es un ajuste responsivo. */
@media (max-width: 767px) {
	.ml26-checks {
		background-color: var(--e-global-color-mlblanc);
	}
}

/* ---------- Tarjetas con icono ---------- */

/* Titulares alineados entre tarjetas de una misma fila (pilares y tarjetas
   con icono): cada tarjeta ocupa tres filas de la rejilla y las comparte con
   sus vecinas (subgrid), así el número o icono, el titular y el texto
   arrancan a la misma altura aunque un titular tenga 1 línea y otro 3.
   Elementor no tiene subgrid. Solo escritorio y tablet (en móvil va una
   tarjeta por fila). */
@media (min-width: 768px) {
	.e-grid > :is(.ml26-pillar, .ml26-card):has(> :nth-child(3):last-child) {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		row-gap: 0;
		align-content: start;
	}
}

/* En la tarjeta oscura el cuadro del icono pasa a rojo y el glifo a blanco al
   pasar por toda la tarjeta (diseño: .card--dark:hover .card-ico): hover del
   padre que cambia al hijo. Elementor pinta el relleno en el propio <svg>,
   por eso la regla del glifo apunta al svg. */
.ml26-card--dark .elementor-icon,
.ml26-card--dark .elementor-icon svg {
	transition: background-color .35s var(--ml-ease), fill .35s var(--ml-ease), color .35s var(--ml-ease);
}
.ml26-card--dark:hover .elementor-icon {
	background-color: var(--e-global-color-primary) !important; /* le gana al color del widget, que Elementor emite con 5 clases */
}
.ml26-card--dark:hover .elementor-icon svg {
	fill: var(--e-global-color-mlblanc) !important; /* ídem: el relleno del widget lleva 5 clases */
	color: var(--e-global-color-mlblanc);
}

/* ---------- Degradados oscuros (ganancias y testimoniales) ----------
   Cuatro paradas y dos halos radiales: el fondo de Elementor solo admite un
   degradado de dos paradas. El color plano del Kit queda debajo como reserva. */
.ml26-gana,
.ml26-testi-sec {
	position: relative;
	background-image: linear-gradient(128deg, #2E2926 0%, #1C1917 40%, #280C0D 70%, #5A0A12 100%);
}
.ml26-gana::after,
.ml26-testi-sec::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.ml26-gana::after {
	background:
		radial-gradient(760px 340px at 88% 8%, rgba(227, 9, 24, .3), transparent 62%),
		radial-gradient(620px 300px at 6% 96%, rgba(255, 255, 255, .05), transparent 60%);
}
.ml26-testi-sec::after {
	background:
		radial-gradient(760px 340px at 12% 6%, rgba(227, 9, 24, .3), transparent 62%),
		radial-gradient(620px 300px at 94% 94%, rgba(255, 255, 255, .05), transparent 60%);
}
.ml26-gana > .e-con-inner,
.ml26-testi-sec > .e-con-inner {
	position: relative;
	z-index: 2;
}

/* ---------- Imagen que llena su columna (.ml26-media) ----------
   El widget de imagen no sabe estirarse al alto de la columna vecina ni
   hacer zoom en hover. */
.ml26-media,
.ml26-media .elementor-widget-container {
	height: 100%;
}
.ml26-media {
	overflow: hidden;
	border-radius: var(--ml-radius-lg);
}
.ml26-media img {
	width: 100%;
	transition: transform 1.2s var(--ml-ease-out);
}
.ml26-media:hover img {
	transform: scale(1.045);
}
/* --veil: velo suave de abajo (imagen de contacto). */
.ml26-media--veil {
	position: relative;
}
.ml26-media--veil::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 23, 21, .05) 0%, rgba(26, 23, 21, .22) 100%);
	pointer-events: none;
}

/* ---------- Pasos (.ml26-steps) ----------
   Línea gris que une los números por detrás, y el número que crece al pasar
   por todo el paso. */
.ml26-steps {
	position: relative;
}
/* La línea arranca en el centro del primer número y termina en el centro del
   último (los círculos la tapan): medio ancho de columna a cada lado. Con 4
   columnas y 26 px de hueco: (100% − 3·26) / 8; con 3: (100% − 2·26) / 6. */
.ml26-steps::before {
	content: "";
	position: absolute;
	top: 29px;
	left: calc((100% - 78px) / 8);
	right: calc((100% - 78px) / 8);
	width: auto; /* Elementor da width: 100% al ::before de sus contenedores (capa de superposición): con él se ignoraba right y la línea se salía del último número */
	height: 2px;
	background: var(--e-global-color-ba97f2c);
}
.ml26-step-num {
	transition: transform .45s var(--ml-ease-out);
}
.ml26-step:hover .ml26-step-num {
	transform: scale(1.18);
}
.ml26-steps:has(> .ml26-step:nth-child(3):last-child)::before {
	left: calc((100% - 52px) / 6);
	right: calc((100% - 52px) / 6);
}
@media (max-width: 1024px) {
	.ml26-steps::before {
		display: none;
	}
}

/* ---------- Comparador (.ml26-ptab) ----------
   En móvil se ve «Criterio» y UNA opción a la vez (ronda 18): la franja mide
   lo mismo que el contenido; «Criterio» ocupa el 38 % y queda fija, y cada
   opción mide exactamente el resto (columnas en cqw, ajuste de rejilla móvil
   de Elementor, que necesita la franja como contenedor de consulta). El
   desplazamiento encaja columna a columna, así que ninguna asoma por detrás
   ni por el lado. La rejilla no tiene desbordamiento ni encaje como ajuste. */
@media (max-width: 767px) {
	.e-con.ml26-ptab-wrap {
		container-type: inline-size;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: calc(38% + 14px);
		scrollbar-width: none;
	}
	.e-con.ml26-ptab-wrap::-webkit-scrollbar {
		display: none;
	}
	/* La rejilla mide lo que suman sus columnas (no el 100 % de la franja):
	   si no, la columna fija llegaba al final de la rejilla en la tercera
	   opción y se corría con ella (ronda 20). */
	.e-con.ml26-ptab {
		--width: max-content;
		width: max-content;
		max-width: none;
	}
	/* Puntos de encaje: las cabeceras de las tres opciones (fila 1). */
	.ml26-ptab > .e-con:nth-child(-n+4):not(:first-child) {
		scroll-snap-align: start;
	}
	/* «Criterio» fija; la sombra sólida tapa el hueco de 14 px entre columnas
	   para que la opción que pasa por debajo no se vea. --ml-ptab-bg es el
	   fondo de la sección (lo deja ml26.js; blanco si no hay JS). */
	.ml26-ptab > .e-con:nth-child(4n+1) {
		position: sticky;
		left: 0;
		z-index: 2;
		box-shadow: 14px 0 0 0 var(--ml-ptab-bg, var(--e-global-color-mlblanc));
	}
	/* Las esquinas redondeadas de «Criterio» dejaban ver la opción de debajo:
	   un cuadro blanco sin radio las rellena y encima se repinta el fondo de
	   la celda con su radio (::after hereda color y radio de la celda). */
	.ml26-ptab > .e-con:nth-child(4n+1)::before,
	.ml26-ptab > .e-con:nth-child(4n+1)::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
	}
	.ml26-ptab > .e-con:nth-child(4n+1)::before {
		background: var(--ml-ptab-bg, var(--e-global-color-mlblanc));
		border-radius: 0;
	}
	.ml26-ptab > .e-con:nth-child(4n+1)::after {
		background-color: inherit;
		border-radius: inherit;
	}
}
/* Flechas del comparador (las pone ml26.js debajo de la tabla, solo móvil). */
.ml26-ptab-nav {
	display: none;
}
@media (max-width: 767px) {
	.ml26-ptab-nav {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 16px;
	}
	.ml26-ptab-nav button {
		width: 42px;
		height: 42px;
		display: grid;
		place-items: center;
		padding: 0;
		border: 1.5px solid var(--e-global-color-ba97f2c);
		border-radius: 50%;
		background: var(--e-global-color-mlblanc);
		color: var(--e-global-color-accent);
		box-shadow: none;
		transition: border-color .3s var(--ml-ease), color .3s var(--ml-ease), opacity .3s var(--ml-ease);
	}
	/* Hover solo con ratón: en el táctil el estado se quedaba pegado. */
	.ml26-ptab-nav button:focus-visible {
		border-color: var(--e-global-color-primary);
		background: var(--e-global-color-mlblanc);
		color: var(--e-global-color-primary);
	}
	.ml26-ptab-nav button:focus:not(:focus-visible) {
		border-color: var(--e-global-color-ba97f2c);
		background: var(--e-global-color-mlblanc);
		color: var(--e-global-color-accent);
	}
	.ml26-ptab-nav button:disabled {
		opacity: .35;
		pointer-events: none;
	}
	.ml26-ptab-nav svg {
		width: 18px;
		height: 18px;
	}
}

/* ---------- Sectores (.ml26-sector) ----------
   Hover de toda la tarjeta: la foto crece y el titular pasa a rojo. */
.ml26-sector .ml26-sector-img {
	overflow: hidden;
}
.ml26-sector .ml26-sector-img img {
	transition: transform 1s var(--ml-ease-out);
}
.ml26-sector:hover .ml26-sector-img img {
	transform: scale(1.07);
}
.ml26-sector .elementor-heading-title {
	transition: color .3s var(--ml-ease);
}
.ml26-sector:hover .elementor-heading-title {
	color: var(--e-global-color-primary);
}

/* .ml26-blog-card — títulos del listado siempre de 3 líneas: se cortan con
   puntos suspensivos y reservan el alto, así los botones quedan alineados.
   El widget de título no tiene límite de líneas. */
.ml26-blog-card .elementor-heading-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: calc(3 * 1.25em);
}
/* La foto se ancla arriba para que no se corte el logo de la esquina
   superior izquierda. El ajuste «Posición del objeto» del widget solo se
   aplica con una altura fija, y aquí la da la proporción 4:3 (hoja). */
.ml26-blog-card .ml-blog-img img {
	object-position: 50% 0;
}

/* ---------- Preguntas frecuentes (.ml26-faq) ----------
   El borde, el radio y la sombra van en el ítem entero (título + respuesta);
   el acordeón anidado solo los ofrece para el título. El icono va en un
   círculo que se pone rojo y gira al abrir. */
.ml26-faq .e-n-accordion-item {
	border: 1px solid var(--e-global-color-ba97f2c);
	border-radius: 16px;
	background: var(--e-global-color-mlblanc);
	overflow: hidden;
	transition: border-color .4s var(--ml-ease), box-shadow .4s var(--ml-ease), background .4s var(--ml-ease);
}
.ml26-faq .e-n-accordion-item:hover {
	border-color: var(--e-global-color-primary); /* ronda 17: hover más notorio */
	box-shadow: var(--ml-shadow-sm);
}
.ml26-faq .e-n-accordion-item[open] {
	border-color: transparent;
	box-shadow: var(--ml-shadow-md);
	background: var(--e-global-color-635ac40);
}
.ml26-faq .e-n-accordion-item-title-icon {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--e-global-color-635ac40);
	transition: background .35s var(--ml-ease), transform .45s var(--ml-ease-out);
}
.ml26-faq .e-n-accordion-item-title-icon > span {
	display: grid;
	place-items: center;
}
.ml26-faq .e-n-accordion-item:hover .e-n-accordion-item-title-icon {
	background: var(--e-global-color-mlrosa1);
}
.ml26-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
	background: var(--e-global-color-primary);
	transform: rotate(180deg);
}
/* El chevron es de trazo y el acordeón solo le pone fill: el trazo toma el
   color de las mismas variables que emite el ajuste de color del icono. */
.ml26-faq .e-n-accordion-item-title-icon svg {
	color: var(--n-accordion-icon-normal-color);
}
.ml26-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon svg {
	color: var(--e-global-color-primary);
}
/* El acordeón pinta el color de hover en el título, pero el texto trae su
   propio color normal y no lo hereda: se le pasa aquí (ronda 17). */
.ml26-faq .e-n-accordion-item:not([open]):hover .e-n-accordion-item-title-text {
	color: var(--n-accordion-title-hover-color);
}
.ml26-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
	color: var(--n-accordion-icon-active-color);
}

/* Listas dentro de una respuesta (texto del editor): check rojo en círculo
   (.faq-list del diseño). El HTML del editor no se alcanza con ajustes. */
.ml26-faq .e-n-accordion-item ul {
	list-style: none;
	margin: 14px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ml26-faq .e-n-accordion-item li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 11px;
	align-items: start;
	line-height: 1.5;
}
.ml26-faq .e-n-accordion-item li::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background: var(--e-global-color-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.9a10.1 10.1 0 100 20.2 10.1 10.1 0 000-20.2zm5.06 7.22l-6.3 6.5a1.1 1.1 0 01-1.58 0l-2.94-3.03a1.1 1.1 0 111.58-1.53l2.15 2.22 5.51-5.69a1.1 1.1 0 111.58 1.53z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.9a10.1 10.1 0 100 20.2 10.1 10.1 0 000-20.2zm5.06 7.22l-6.3 6.5a1.1 1.1 0 01-1.58 0l-2.94-3.03a1.1 1.1 0 111.58-1.53l2.15 2.22 5.51-5.69a1.1 1.1 0 111.58 1.53z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ml26-faq .e-n-accordion-item strong {
	font-weight: 600;
	color: var(--e-global-color-accent);
}

/* Página de preguntas: el titular queda fijo y centrado en pantalla mientras
   avanzan las preguntas (position: sticky no es un ajuste de Elementor). */
@media (min-width: 1025px) {
	.ml26-faq-aside-head {
		position: sticky;
		top: 78px;
		height: calc(100vh - 78px);
	}
}

/* ---------- Lista corta de contacto: iconos rojos ya van en ajustes ---------- */

/* ==========================================================================
   Popup de cotización (plantilla 255)
   ========================================================================== */

/* Dos halos rojos sobre el degradado del panel. El fondo del contenedor
   solo admite un degradado, y su ::before es la capa de superposición de
   Elementor (trampa B3): se usa ::after. */
.ml26-modal-aside {
	position: relative;
	overflow: hidden;
}
.ml26-modal-aside::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(420px 260px at 10% 0%, rgba(227, 9, 24, .32), transparent 62%),
		radial-gradient(380px 260px at 100% 100%, rgba(227, 9, 24, .18), transparent 60%);
}
.ml26-modal-aside > * {
	position: relative;
	z-index: 2;
}

/* .ml26-modal-list — check blanco en círculo rojo: la lista de iconos no
   tiene fondo para el icono. */
.elementor-widget.ml26-modal-list .elementor-icon-list-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin-right: 11px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--e-global-color-primary);
}

/* El check es de trazo y la lista solo le da fill. */
.ml26-modal-list .elementor-icon-list-icon svg {
	color: var(--e-global-color-mlblanc);
}

/* Flechas de «Continuar» y «Atrás»: los botones de paso del formulario no
   tienen control de icono (solo el de enviar). Máscara del mismo SVG. */
#form-cotizacion .e-form__buttons__wrapper__button-next,
#form-cotizacion .e-form__buttons__wrapper__button-previous {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
#form-cotizacion .e-form__buttons__wrapper__button-next::after,
#form-cotizacion .e-form__buttons__wrapper__button-previous::before {
	content: "";
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#form-cotizacion .e-form__buttons__wrapper__button-previous::before {
	transform: scaleX(-1);
}
#form-cotizacion .e-form__buttons__wrapper__button-next:hover::after {
	animation: ml26-arrow-nudge .7s var(--ml-ease-out);
}

/* Botonera de pasos como .fnav del diseño: «Atrás» a la izquierda y el botón
   de avanzar (o enviar) a la derecha; en el paso 1, solo, a la derecha. */
#form-cotizacion .e-form__buttons {
	justify-content: space-between;
}
#form-cotizacion .e-form__buttons > :last-child {
	margin-left: auto;
}

/* El indicador de pasos deja sitio al botón de cerrar (sin control). */
.ml26-modal #form-cotizacion .e-form__indicators {
	padding-right: 46px;
	margin-bottom: 22px;
}

/* Botón de cerrar: círculo de 38 px que gira en hover. El popup solo da
   colores y posición al botón. */
.ml26-modal .dialog-close-button {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background .3s var(--ml-ease), color .3s var(--ml-ease), transform .4s var(--ml-ease-out);
}
.ml26-modal .dialog-close-button:hover {
	transform: rotate(90deg);
}

/* El velo entra con un fundido (Elementor lo muestra de golpe). Sin
   desenfoque a propósito: detrás el slider se mueve sin parar y un
   backdrop-filter obligaba a recalcular el desenfoque de toda la pantalla en
   cada fotograma, lo que trababa la entrada del popup. */
.elementor-popup-modal.ml26-modal {
	animation: ml26-fade .35s var(--ml-ease);
}
@keyframes ml26-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Cambio de paso del formulario: el paso nuevo entra subiendo 12 px, como en
   el diseño. Elementor solo alterna display entre pasos. */
#form-cotizacion .e-form__step:not(.elementor-hidden) {
	animation: ml26-step-in .45s var(--ml-ease-out);
}
@keyframes ml26-step-in {
	from { opacity: 0; transform: translate3d(0, 12px, 0); }
	to { opacity: 1; transform: none; }
}

/* «Regresar» encima del banner negro final: en las páginas que lo traen
   (.ml26-back-page, lo inserta REGRESAR_ARRIBA al guardar) se oculta la
   franja del pie; en las demás sigue saliendo la del pie. */
body:has(.ml26-back-page) .ml26-back-foot {
	display: none;
}

/* ==========================================================================
   Ronda 27 (2026-09-28)
   ========================================================================== */

/* .ml26-rail — redes flotantes al borde derecho. El widget va fijo por
   ajuste (derecha 0, arriba 50 %), en una columna, con fondo gris del footer
   y esquinas izquierdas redondeadas (ajustes). Aquí: centrado vertical,
   bloque sin divisiones, sombra, y el crecimiento solo del icono en hover
   (el color rojo del hover es ajuste). En móvil, cuadros más chicos. */
.elementor-element.ml26-rail {
	transform: translateY(-50%);
	box-shadow: -4px 0 18px rgba(38, 34, 31, .18);
}
.ml26-rail .elementor-social-icon {
	width: 46px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	border-radius: 0;
	background: transparent;
}
.ml26-rail .elementor-social-icon i,
.ml26-rail .elementor-social-icon svg {
	transition: transform .3s var(--ml-ease-out), color .25s var(--ml-ease), fill .25s var(--ml-ease);
}
.ml26-rail .elementor-social-icon:hover i,
.ml26-rail .elementor-social-icon:hover svg,
.ml26-rail .elementor-social-icon:focus-visible svg {
	transform: scale(1.25);
}
/* con el menú móvil abierto el bloque se asomaba bajo el panel: se oculta
   (visibility, porque la animación de entrada fija la opacidad) */
body:has(.e-n-menu-toggle[aria-expanded="true"]) .elementor-element.ml26-rail {
	visibility: hidden;
}
@media (max-width: 767px) {
	.ml26-rail .elementor-social-icon {
		width: 38px;
		height: 36px;
	}
}

/* .ml26-fgm--head — caja de Grupo Gustavo Molina en la cabecera: no se
   encoge ni parte el texto; en escritorio angosto (hasta 1200) queda solo el
   logo para que quepa el menú. */
.ml26-fgm--head .elementor-widget-text-editor p {
	white-space: nowrap;
}
@media (min-width: 1025px) and (max-width: 1200px) {
	.ml26-fgm--head .elementor-widget-text-editor {
		display: none;
	}
}

/* .ml26-video — videos del blog: esquinas y sombra, velo oscuro en hover y
   botón de reproducir en círculo rojo que crece. El widget de video no trae
   velo en hover ni fondo para el icono. */
.ml26-video .elementor-wrapper {
	overflow: hidden;
}
/* ronda 32: la tarjeta (ajustes, como la del blog) ya lleva radio y borde;
   la portada crece en hover como la foto de la tarjeta del blog */
.ml26-video .elementor-custom-embed-image-overlay {
	background-size: cover;
	transition: transform 1s var(--ml-ease-out);
}
.ml26-video-card:hover .elementor-custom-embed-image-overlay {
	transform: scale(1.07);
}
.ml26-video .elementor-custom-embed-image-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(20, 18, 16, .5);
	opacity: 0;
	transition: opacity .4s var(--ml-ease);
}
.ml26-video:hover .elementor-custom-embed-image-overlay::before {
	opacity: 1;
}
.ml26-video .elementor-custom-embed-play {
	z-index: 2;
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--e-global-color-primary);
	box-shadow: 0 10px 30px -8px rgba(227, 9, 24, .6);
	transition: transform .45s var(--ml-ease-out), background-color .3s var(--ml-ease);
}
.ml26-video .elementor-custom-embed-play i,
.ml26-video .elementor-custom-embed-play svg {
	opacity: 1;
	text-shadow: none;
	filter: none;
	/* el triángulo pesa a la izquierda: se corre 2 px para verse centrado */
	margin-left: 2px;
}
.ml26-video:hover .elementor-custom-embed-play {
	transform: translate(-50%, -50%) scale(1.15);
	background: #fff;
}
/* en hover el círculo pasa a blanco y el triángulo a rojo (como las redes);
   el color del icono del widget lleva 4 clases: se sube la especificidad */
.ml26-video .elementor-custom-embed-play svg {
	transition: fill .3s var(--ml-ease);
}
.elementor .elementor-element.ml26-video:hover .elementor-custom-embed-play svg {
	fill: var(--e-global-color-primary);
}
.ml26-video-card .elementor-heading-title {
	transition: color .3s var(--ml-ease);
}
.ml26-video-card:hover .elementor-heading-title {
	color: var(--e-global-color-primary);
}

/* Holgura para la columna de redes (como la referencia, que ensancha el
   margen del contenedor): en escritorio angosto (1025–1365 px) el margen
   lateral de 32 px dejaba el contenido debajo de los iconos (44 px). Aquí
   pasa a 56 px en las secciones, el pie, el texto del slider, la tarjeta del
   formulario y las flechas. Desde 1366 px el margen ya supera los 56 px.
   Los rellenos de Elementor son variables con 3 clases: !important. */
@media (min-width: 1025px) and (max-width: 1365px) {
	.e-con.ml26-sec,
	.e-con.ml26-footer {
		--padding-left: 56px !important;
		--padding-right: 56px !important;
	}
	.elementor-element.ml26-hero-slides .swiper-slide-inner {
		padding-left: max(56px, calc((100% - 1240px) / 2)) !important;
		padding-right: max(56px, calc((100% - 1240px) / 2)) !important;
	}
	.ml26-hero.e-con > .e-con.ml26-glass {
		right: 56px !important;
	}
	.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button-prev {
		left: 56px;
	}
	.elementor-element.ml26-hero-slides .swiper .elementor-swiper-button-next {
		left: 118px;
	}
}