/*
Theme Name: Pido.ar
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Pido.ar team
Author URI: https://pido.ar
Description: Myh Egresados
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.1.1.1730850609
Updated: 2024-11-05 23:50:09

*/


/* ==========================================================================
   Ajustes de visualizacion en movil - M&H Egresados
   Solo aplican a <=767px: el diseno de escritorio queda intacto.
   ========================================================================== */

@media (max-width: 767px) {

	/* La barra del header traia 20px de padding lateral y 30px de margen
	   superior; como el negro vive en la columna interna, quedaban tres franjas
	   blancas alrededor. En movil la barra va de borde a borde. */
	.elementor-404 .elementor-element.elementor-element-22bf2a980 {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-top: 0 !important;
	}
	/* La columna del menu tenia 20px de margen izquierdo que descentraba el
	   boton al ocupar todo el ancho. */
	.elementor-404 .elementor-element.elementor-element-58d08098 > .elementor-element-populated {
		margin-left: 0 !important;
		--e-column-margin-left: 0 !important;
	}

	/* Mismo caso en el bloque del probador virtual. */
	.elementor-812 .elementor-element.elementor-element-08c8300 .elementor-widget-heading > .elementor-widget-container {
		display: block;
	}
	.elementor-812 .elementor-element.elementor-element-08c8300 .elementor-heading-title {
		display: block;
	}

	/* Objetivos tactiles: los enlaces del menu, del pie y de las tarjetas de
	   producto median 17-26px de alto. La guia de accesibilidad pide 44px. */
	.elementor-widget-heading .elementor-heading-title a,
	.hfe-nav-menu a,
	.wpr-nav-menu a,
	.wpr-mobile-nav-menu .wpr-mobile-menu-item,
	.wpr-mobile-nav-menu .wpr-sub-menu a,
	.elementor-widget-icon-list .elementor-icon-list-item > a,
	footer .elementor-widget-text-editor a,
	.elementor-button {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center;
	}

	/* El boton "Conocenos" quedaba en 26px de alto. */
	.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button {
		padding: 12px 22px;
		min-height: 44px;
	}

	/* Los enlaces que viven dentro de un titulo (tarjetas de producto en la
	   portada, columnas del pie) pierden el subrayado. */
	.elementor-widget-heading .elementor-heading-title a {
		text-decoration: none;
	}

	/* Solo en la grilla de productos el enlace ocupa toda la tarjeta. */
	.elementor-812 .elementor-widget-heading .elementor-heading-title a {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 767px) {

}

@media (max-width: 767px) {

	/* El hero recorta mucho una imagen panoramica de 1920px: en telefonos
	   alcanza la copia de 1024px y se ahorran ~125 KB de descarga. */
	.elementor-812 .elementor-element.elementor-element-16e743c {
		background-image: url("/wp-content/uploads/2025/03/camperas_detras-1024x267.jpg") !important;
	}
}


/* ==========================================================================
   REDISENO DE PORTADA — M&H Egresados
   Paleta original del sitio, sin cambios:
     amarillo #DBBF00 · celeste #6EC1E4 · naranja #DB6A00 · verde #61CE70
   ========================================================================== */

:root {
	--mh-amarillo: #DBBF00;
	--mh-celeste:  #6EC1E4;
	--mh-naranja:  #DB6A00;
	--mh-verde:    #61CE70;
	--mh-tinta:    #14161A;
	--mh-sombra:   0 10px 30px rgba(20, 22, 26, .10);
	--mh-sombra-alta: 0 18px 44px rgba(20, 22, 26, .18);
}

/* --------------------------------------------------------------------------
   1. HERO
   El video de YouTube mostraba su propia barra de controles ("Más vídeos" y
   el logo) sobre el borde inferior. Se agranda el iframe para que esa franja
   quede fuera del recorte, y se le pone un velo oscuro para que el logo y el
   titular se lean sobre cualquier fotograma.
   -------------------------------------------------------------------------- */

.elementor-812 .elementor-element.elementor-element-16e743c .elementor-background-video-container,
.elementor-812 .elementor-element.elementor-element-16e743c .elementor-background-video-embed,
.elementor-812 .elementor-element.elementor-element-16e743c iframe {
	pointer-events: none;
}

.elementor-812 .elementor-element.elementor-element-16e743c .elementor-background-video-container {
	transform: scale(1.28);
	transform-origin: center center;
}

.elementor-812 .elementor-element.elementor-element-16e743c::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(10,12,15,.55) 0%, rgba(10,12,15,.20) 38%, rgba(10,12,15,.78) 100%);
}

/* El contenido del hero por encima del velo. */
.elementor-812 .elementor-element.elementor-element-16e743c > .e-con-inner,
.elementor-812 .elementor-element.elementor-element-16e743c > .elementor-element {
	position: relative;
	z-index: 2;
}

/* Titular: se cambia la banda blanca por texto claro sobre el velo. */
.elementor-812 .elementor-element.elementor-element-f68a1a7 > .elementor-widget-container {
	background-color: transparent !important;
	margin: 0 !important;
}
.elementor-812 .elementor-element.elementor-element-f68a1a7 .elementor-heading-title {
	color: #fff !important;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
	letter-spacing: .2px;
	max-width: 20ch;
	margin-inline: auto;
}

/* Filete con los cuatro colores de la marca cerrando el hero. */
.elementor-812 .elementor-element.elementor-element-16e743c::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	z-index: 3;
	background: linear-gradient(90deg,
		var(--mh-amarillo) 0 25%,
		var(--mh-celeste)  25% 50%,
		var(--mh-naranja)  50% 75%,
		var(--mh-verde)    75% 100%);
}

/* --------------------------------------------------------------------------
   2. BENEFICIOS
   Eran cuatro rectangulos de color a sangre, pegados entre si: parecian
   cuatro botones gigantes. Pasan a ser tarjetas sobre fondo claro, con el
   color de cada una reducido al icono y a un filete superior.
   -------------------------------------------------------------------------- */

.elementor-812 .elementor-element.elementor-element-1622378 {
	background-color: #F7F8FA !important;
	background-image: none !important;
	min-height: 0 !important;
	align-items: stretch;
	padding: 34px 16px !important;
	gap: 14px;
}
@media (min-width: 768px) {
	.elementor-812 .elementor-element.elementor-element-1622378 {
		padding: 64px 40px !important;
		gap: 26px;
		--e-con-grid-template-columns: repeat(4, 1fr);
	}
}

/* Las tarjetas: fondo blanco, el color queda como acento. */
.elementor-812 .elementor-element.elementor-element-1622378 > .e-con,
.elementor-812 .elementor-element.elementor-element-1622378 > .elementor-element {
	background-color: #fff !important;
	background-image: none !important;
	border-radius: 18px;
	box-shadow: var(--mh-sombra);
	padding: 24px 12px 20px !important;
	min-height: 0 !important;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
	justify-content: flex-start !important;
}

.elementor-812 .elementor-element.elementor-element-1622378 > .e-con::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--mh-color, var(--mh-celeste));
}

.elementor-812 .elementor-element.elementor-element-1622378 > .e-con:hover {
	transform: translateY(-6px);
	box-shadow: var(--mh-sombra-alta);
}

/* Un color por tarjeta. */
.elementor-812 .elementor-element.elementor-element-a5bf7cf { --mh-color: var(--mh-amarillo); }
.elementor-812 .elementor-element.elementor-element-6f20c13 { --mh-color: var(--mh-celeste);  }
.elementor-812 .elementor-element.elementor-element-8cfb0a4 { --mh-color: var(--mh-naranja);  }
.elementor-812 .elementor-element.elementor-element-cdcad53 { --mh-color: var(--mh-verde);    }

/* El icono va dentro de un disco del color de la tarjeta. Se fija la altura
   del area del icono para que los cuatro titulos queden a la misma linea:
   "Envios a todo el pais" usaba un gif mas alto y bajaba respecto del resto. */
.elementor-812 .elementor-element.elementor-element-1622378 > .e-con > .e-con,
.elementor-812 .elementor-element.elementor-element-1622378 > .e-con > .elementor-element:not(.elementor-widget-heading) {
	width: 66px !important;
	height: 66px !important;
	min-height: 66px !important;
	flex: 0 0 auto !important;
	margin: 0 auto 20px !important;
	padding: 0 !important;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mh-color) 16%, #fff);
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.elementor-812 .elementor-element.elementor-element-1622378 .elementor-widget-icon svg,
.elementor-812 .elementor-element.elementor-element-1622378 .elementor-widget-icon img,
.elementor-812 .elementor-element.elementor-element-1622378 .elementor-widget-image img {
	width: 42px !important;
	height: 42px !important;
	object-fit: contain;
	margin: 0 !important;
}

.elementor-812 .elementor-element.elementor-element-1622378 .elementor-widget-heading {
	width: 100%;
}
.elementor-812 .elementor-element.elementor-element-1622378 .elementor-heading-title {
	color: var(--mh-tinta) !important;
	font-size: 18px !important;
	line-height: 1.35 !important;
	text-align: center;
	margin: 0 !important;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   3. PRODUCTOS
   Las tarjetas eran un cuadrado con borde de color y el nombre subrayado,
   con aspecto de enlace suelto. Ahora la tarjeta entera es el area clicable
   y al pasar el cursor se pinta del color de la categoria.
   -------------------------------------------------------------------------- */

.elementor-812 .elementor-element.elementor-element-7f5ac5d {
	padding: 4px 16px 34px !important;
	gap: 14px;
}
@media (min-width: 768px) {
	.elementor-812 .elementor-element.elementor-element-7f5ac5d {
		padding: 8px 40px 64px !important;
		gap: 26px;
		--e-con-grid-template-columns: repeat(3, 1fr);
	}
}

.elementor-812 .elementor-element.elementor-element-7f5ac5d > .e-con {
	border-radius: 18px;
	border-width: 2px !important;
	padding: 20px 10px !important;
	background-color: #fff !important;
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
	overflow: hidden;
	justify-content: center !important;
}

.elementor-812 .elementor-element.elementor-element-7f5ac5d > .e-con:hover {
	transform: translateY(-6px);
	box-shadow: var(--mh-sombra-alta);
	background-color: color-mix(in srgb, var(--mh-color) 10%, #fff) !important;
}

.elementor-812 .elementor-element.elementor-element-dc3d57b { --mh-color: var(--mh-amarillo); }
.elementor-812 .elementor-element.elementor-element-4f592ae { --mh-color: var(--mh-celeste);  }
.elementor-812 .elementor-element.elementor-element-3f0aecf { --mh-color: var(--mh-naranja);  }
.elementor-812 .elementor-element.elementor-element-4046fbd { --mh-color: var(--mh-naranja);  }
.elementor-812 .elementor-element.elementor-element-6bbebe3 { --mh-color: var(--mh-verde);    }
.elementor-812 .elementor-element.elementor-element-247fa70 { --mh-color: var(--mh-amarillo); }

.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-widget-icon svg {
	width: 54px !important;
	height: 54px !important;
	transition: transform .25s ease;
}
.elementor-812 .elementor-element.elementor-element-7f5ac5d > .e-con:hover .elementor-widget-icon svg {
	transform: scale(1.07);
}

/* El nombre de la categoria: sin subrayado y con area clicable completa. */
.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-heading-title a {
	text-decoration: none !important;
	font-weight: 600;
	letter-spacing: .3px;
	display: block;
	padding: 6px 0;
}
.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-heading-title {
	margin-top: 14px !important;
	font-size: 21px !important;
}

/* Titulo de seccion */
.elementor-812 .elementor-element.elementor-element-52f3ad3 .elementor-heading-title {
	letter-spacing: 1px;
}
.elementor-812 .elementor-element.elementor-element-52f3ad3 {
	margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Correcciones de contraste y detalle
   -------------------------------------------------------------------------- */

/* Los nombres de categoria heredaban el color del borde. Amarillo sobre blanco
   da una relacion de contraste de 1.9:1, muy por debajo del minimo de 4.5:1.
   El color se mantiene en el icono y el borde; el texto pasa a tinta. */
.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-heading-title,
.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-heading-title a {
	color: var(--mh-tinta) !important;
}
.elementor-812 .elementor-element.elementor-element-7f5ac5d > .e-con:hover .elementor-heading-title a {
	color: color-mix(in srgb, var(--mh-color) 70%, #000) !important;
}

/* El gif del camion tiene aire propio y quedaba mas chico que los tres SVG. */
.elementor-812 .elementor-element.elementor-element-1622378 .elementor-widget-image img {
	width: 56px !important;
	height: 56px !important;
}

/* --------------------------------------------------------------------------
   4. PROBADOR VIRTUAL
   Los titulos iban en bandas blancas de distinto ancho, apiladas sin eje
   comun. Se unifican sobre un velo, alineados a la izquierda.
   -------------------------------------------------------------------------- */

.elementor-812 .elementor-element.elementor-element-4037bb3 {
	position: relative;
	min-height: 420px;
	align-items: center !important;
}
.elementor-812 .elementor-element.elementor-element-4037bb3::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Elementor reserva este pseudo-elemento para su capa de superposicion y
	   le deja opacity .5; hay que fijarla o el velo se aclara a la mitad. */
	opacity: 1 !important;
	background: linear-gradient(90deg, rgba(10,12,15,.82) 0%, rgba(10,12,15,.55) 55%, rgba(10,12,15,.25) 100%);
	z-index: 0;
}
.elementor-812 .elementor-element.elementor-element-4037bb3 > .e-con,
.elementor-812 .elementor-element.elementor-element-4037bb3 > .elementor-element {
	position: relative;
	z-index: 1;
}

.elementor-812 .elementor-element.elementor-element-4e61b8b > .elementor-widget-container,
.elementor-812 .elementor-element.elementor-element-0e85897 > .elementor-widget-container {
	background-color: transparent !important;
	margin: 0 !important;
}
.elementor-812 .elementor-element.elementor-element-4e61b8b .elementor-heading-title,
.elementor-812 .elementor-element.elementor-element-0e85897 .elementor-heading-title {
	color: #fff !important;
	text-align: left;
	text-shadow: 0 2px 16px rgba(0,0,0,.5);
	margin: 0 0 10px !important;
}
.elementor-812 .elementor-element.elementor-element-4e61b8b .elementor-heading-title {
	color: var(--mh-verde) !important;
	letter-spacing: .5px;
}

/* El rotulo "Probador Virtual" pasa a boton, que es lo que en realidad es. */
.elementor-812 .elementor-element.elementor-element-57512b4 > .elementor-widget-container {
	background-color: var(--mh-amarillo) !important;
	display: inline-block;
	border-radius: 999px;
	padding: 14px 34px !important;
	margin: 0 !important;
	box-shadow: var(--mh-sombra);
	transition: transform .2s ease, box-shadow .2s ease;
}
.elementor-812 .elementor-element.elementor-element-57512b4 > .elementor-widget-container:hover {
	transform: translateY(-3px);
	box-shadow: var(--mh-sombra-alta);
}
.elementor-812 .elementor-element.elementor-element-57512b4 .elementor-heading-title {
	color: var(--mh-tinta) !important;
	margin: 0 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Animaciones de entrada
   Elementor deja los elementos animados en visibility:hidden hasta que su
   observador los alcanza. Si el observador no llega a dispararse (carga lenta,
   salto por anclas, un navegador que restaura el scroll a media pagina), el
   contenido queda invisible de forma permanente. Ya pasaba con el bloque de
   "M&H Creaciones" y con el rotulo del probador. Se acota el riesgo: la
   animacion se mantiene, pero nunca puede terminar en contenido oculto.
   -------------------------------------------------------------------------- */

.elementor-invisible {
	visibility: visible !important;
	animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
	[class*="elementor-animation-"],
	.animated {
		animation: none !important;
		transition: none !important;
	}
}

/* Entre 768px y 1024px el probador se apila, igual que en telefono. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-812 .elementor-element.elementor-element-4037bb3 {
		flex-direction: column !important;
		padding: 40px 32px !important;
		gap: 14px;
	}
	.elementor-812 .elementor-element.elementor-element-08c8300,
	.elementor-812 .elementor-element.elementor-element-7fb5c87,
	.elementor-812 .elementor-element.elementor-element-dd1ed3f {
		width: 100% !important;
		margin: 0 !important;
	}
	.elementor-812 .elementor-element.elementor-element-e1ac051 img {
		width: 20% !important;
	}
}

/* El rotulo nunca debe ser mas ancho que su columna. */
.elementor-812 .elementor-element.elementor-element-57512b4 > .elementor-widget-container {
	max-width: 100%;
	box-sizing: border-box;
}


/* ==========================================================================
   PAGINA DE CONTACTO (1268)
   Misma paleta y mismo lenguaje visual que la portada rediseñada.
   ========================================================================== */

/* --- Banner ------------------------------------------------------------- */

.elementor-1268 .elementor-element.elementor-element-5c51af6 {
	position: relative;
	justify-content: center !important;
}
.elementor-1268 .elementor-element.elementor-element-5c51af6::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 1 !important;
	background: linear-gradient(180deg, rgba(10,12,15,.62) 0%, rgba(10,12,15,.42) 50%, rgba(10,12,15,.72) 100%);
	z-index: 0;
}
.elementor-1268 .elementor-element.elementor-element-5c51af6 > .e-con-inner,
.elementor-1268 .elementor-element.elementor-element-5c51af6 > .elementor-element {
	position: relative;
	z-index: 1;
}
.elementor-1268 .elementor-element.elementor-element-44d478f .elementor-heading-title {
	color: #fff !important;
	text-shadow: 0 2px 18px rgba(0,0,0,.55);
	max-width: 24ch;
	margin-inline: auto;
}
/* Filete de marca, igual que en el hero de la portada. */
.elementor-1268 .elementor-element.elementor-element-5c51af6::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 6px;
	z-index: 2;
	background: linear-gradient(90deg,
		var(--mh-amarillo) 0 25%, var(--mh-celeste) 25% 50%,
		var(--mh-naranja) 50% 75%, var(--mh-verde) 75% 100%);
}

/* --- Zona principal ----------------------------------------------------- */

.elementor-1268 .elementor-element.elementor-element-17968be {
	padding: 64px 24px !important;
	align-items: stretch !important;
}

/* Columna de texto */
.elementor-1268 .elementor-element.elementor-element-00eb8f3 {
	padding: 0 34px 0 0 !important;
	justify-content: flex-start !important;
}
.elementor-1268 .elementor-element.elementor-element-784afb1 .elementor-heading-title {
	line-height: 1.2;
}
.elementor-1268 .elementor-element.elementor-element-784afb1 {
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 6px;
}
.elementor-1268 .elementor-element.elementor-element-784afb1::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 64px; height: 4px;
	border-radius: 2px;
	background: var(--mh-amarillo);
}
.elementor-1268 .elementor-element.elementor-element-d509f97 .elementor-heading-title {
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--mh-tinta) !important;
	font-weight: 700 !important;
}

/* Datos de contacto: lista con icono, cada dato es un enlace. */
.mh-contacto {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mh-contacto li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}
.mh-contacto .mh-ct-ico {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	padding: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mh-celeste) 18%, #fff);
	color: #0F6E93;
	box-sizing: border-box;
}
.mh-contacto li:nth-child(2) .mh-ct-ico {
	background: color-mix(in srgb, var(--mh-verde) 22%, #fff);
	color: #1B7F2C;
}
.mh-contacto li:nth-child(3) .mh-ct-ico {
	background: color-mix(in srgb, var(--mh-naranja) 18%, #fff);
	color: #A64F00;
}
.mh-contacto a {
	color: var(--mh-tinta);
	text-decoration: none;
	font-weight: 500;
	line-height: 1.35;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, color .2s ease;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.mh-contacto a:hover,
.mh-contacto a:focus-visible {
	color: #0F6E93;
	border-bottom-color: currentColor;
}

/* --- Formulario --------------------------------------------------------- */

.elementor-1268 .elementor-element.elementor-element-293e844 {
	border-radius: 20px;
	box-shadow: var(--mh-sombra);
	padding: 36px 34px !important;
	border: 1px solid #E7E9EE !important;
	justify-content: flex-start !important;
}

.elementor-1268 .forminator-label {
	font-weight: 600 !important;
	color: var(--mh-tinta) !important;
	margin-bottom: 6px !important;
}
.elementor-1268 .forminator-input,
.elementor-1268 .forminator-textarea {
	border: 1px solid #D6DAE1 !important;
	border-radius: 12px !important;
	padding: 13px 15px !important;
	font-size: 16px !important;   /* menos de 16px hace que iOS acerque la pagina */
	background: #FBFCFD !important;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
	box-sizing: border-box;
	width: 100%;
}
.elementor-1268 .forminator-input {
	min-height: 50px !important;
}
.elementor-1268 .forminator-textarea {
	min-height: 140px !important;
	resize: vertical;
}
.elementor-1268 .forminator-input:focus,
.elementor-1268 .forminator-textarea:focus {
	border-color: var(--mh-celeste) !important;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgba(110, 193, 228, .28) !important;
	outline: none !important;
}
.elementor-1268 .forminator-row {
	margin-bottom: 16px !important;
}

/* "Enviar mensaje" era texto plano y no se leia como un boton. */
.elementor-1268 .forminator-button-submit {
	background: var(--mh-amarillo) !important;
	color: var(--mh-tinta) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 15px 40px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: .3px;
	min-height: 52px;
	width: 100%;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--mh-sombra);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.elementor-1268 .forminator-button-submit:hover,
.elementor-1268 .forminator-button-submit:focus-visible {
	background: #F2D400 !important;
	transform: translateY(-2px);
	box-shadow: var(--mh-sombra-alta);
}

/* El formulario lleva hCaptcha. En local no se dibuja (no hay clave ni salida
   a internet) y por eso queda un hueco antes del boton; en produccion ese
   espacio lo ocupa el propio captcha, asi que no se oculta nada. */
.elementor-1268 .forminator-row-last {
	margin-top: 8px !important;
	margin-bottom: 0 !important;
}
.elementor-1268 .forminator-field-captcha {
	margin-bottom: 4px;
}

/* --- Los cuatro carteles: mismo tratamiento que en la portada ----------- */

.elementor-1268 .elementor-element.elementor-element-2587c10 {
	background-color: #F7F8FA !important;
	padding: 56px 24px !important;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 {
	gap: 22px;
	align-items: stretch !important;
	max-width: 1180px;
	margin-inline: auto;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con {
	background-color: #fff !important;
	border-radius: 18px;
	box-shadow: var(--mh-sombra);
	padding: 30px 18px 26px !important;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--mh-color, var(--mh-celeste));
	opacity: 1 !important;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con:hover {
	transform: translateY(-6px);
	box-shadow: var(--mh-sombra-alta);
}
.elementor-1268 .elementor-element.elementor-element-a21fe3a { --mh-color: var(--mh-amarillo); }
.elementor-1268 .elementor-element.elementor-element-1cbe0ad { --mh-color: var(--mh-celeste);  }
.elementor-1268 .elementor-element.elementor-element-ba8248b { --mh-color: var(--mh-naranja);  }
.elementor-1268 .elementor-element.elementor-element-85bd249 { --mh-color: var(--mh-verde);    }

.elementor-1268 .elementor-element.elementor-element-7a9c5e4,
.elementor-1268 .elementor-element.elementor-element-541a5ca,
.elementor-1268 .elementor-element.elementor-element-f09b243,
.elementor-1268 .elementor-element.elementor-element-82159ff {
	width: 76px !important;
	height: 76px !important;
	min-height: 76px !important;
	flex: 0 0 auto !important;
	margin: 0 auto 16px !important;
	padding: 0 !important;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mh-color) 16%, #fff);
	display: flex !important;
	align-items: center;
	justify-content: center;
}
/* En la cuarta tarjeta la imagen y el titulo cuelgan del mismo contenedor,
   a diferencia de las otras tres. Ese contenedor no lleva forma de disco. */
.elementor-1268 .elementor-element.elementor-element-fa6c681 {
	width: 100% !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	background: none !important;
	border-radius: 0;
	padding: 0 !important;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 .elementor-widget-icon svg,
.elementor-1268 .elementor-element.elementor-element-fa77730 .elementor-widget-image img {
	width: 40px !important;
	height: 40px !important;
	object-fit: contain;
	margin: 0 !important;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 .elementor-heading-title {
	color: var(--mh-tinta) !important;
	font-size: 17px !important;
	line-height: 1.35 !important;
	text-align: center;
	margin: 0 !important;
}

/* Las tarjetas traian border-style:solid con color negro y sin ancho definido,
   asi que el navegador dibujaba el ancho por defecto: un marco negro de 3px. */
.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con {
	border: 0 !important;
}

/* Las cuatro tarjetas llevaban un ancho fijo del 25% que, sumado a las
   separaciones, dejaba la fila corta y descentrada. Reparten el ancho. */
@media (min-width: 768px) {
	.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con {
		flex: 1 1 0 !important;
		width: auto !important;
	}
}

@media (max-width: 767px) {

	/* El banner sube 64px para meterse bajo el header, pensado para escritorio.
	   En telefono eso recortaba la primera linea del titulo. */
	.elementor-1268 .elementor-element.elementor-element-5c51af6 {
		margin-top: 0 !important;
		min-height: 260px !important;
		padding: 34px 20px !important;
	}
	.elementor-1268 .elementor-element.elementor-element-44d478f .elementor-heading-title {
		font-size: 22px !important;
		line-height: 1.3 !important;
	}

	/* Al apilarse, el formulario quedaba pegado a los datos de contacto. */
	.elementor-1268 .elementor-element.elementor-element-17968be {
		padding: 34px 16px !important;
		gap: 26px;
	}
	.elementor-1268 .elementor-element.elementor-element-00eb8f3 {
		padding: 0 !important;
	}
	.elementor-1268 .elementor-element.elementor-element-293e844 {
		padding: 26px 18px !important;
	}
	.elementor-1268 .elementor-element.elementor-element-2587c10 {
		padding: 34px 16px !important;
	}
	.elementor-1268 .elementor-element.elementor-element-fa77730 {
		gap: 14px;
	}
	.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con {
		padding: 22px 12px 20px !important;
	}
}

/* Las cuatro tarjetas de contacto, de a dos en telefono. */
@media (max-width: 767px) {
	/* Dos columnas con grid. Con flex y anchos en porcentaje el calculo se
	   resolvia contra un ancho menor al esperado y las tarjetas salian de
	   72px, con el texto partido letra por letra. */
	.elementor-1268 .elementor-element.elementor-element-fa77730 {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
		width: 100% !important;
		max-width: 100% !important;
		/* La fila traia 100px de relleno a cada lado, pensados para escritorio.
		   En un telefono de 390px eso dejaba 158px utiles y las tarjetas
		   quedaban de 72px, con el texto partido en silabas. */
		padding: 0 !important;
		--padding-left: 0px;
		--padding-right: 0px;
	}
	.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con {
		width: auto !important;
		flex: initial !important;
		min-width: 0;
	}
	/* Solo los tres contenedores de icono llevan disco; en la cuarta tarjeta
	   el disco va sobre la imagen, porque comparte contenedor con el titulo. */
	.elementor-1268 .elementor-element.elementor-element-7a9c5e4,
	.elementor-1268 .elementor-element.elementor-element-541a5ca,
	.elementor-1268 .elementor-element.elementor-element-f09b243,
	.elementor-1268 .elementor-element.elementor-element-82159ff {
		width: 62px !important;
		height: 62px !important;
		min-height: 62px !important;
	}
	.elementor-1268 .elementor-element.elementor-element-fa77730 .elementor-heading-title {
		font-size: 15px !important;
	}
}

/* El texto de las tarjetas nunca se recorta. */
/* Se permite partir una palabra solo si de verdad no entra; el guionado
   automatico cortaba "Promociones" al medio teniendo lugar de sobra. */
.elementor-1268 .elementor-element.elementor-element-fa77730 .elementor-heading-title,
.elementor-812 .elementor-element.elementor-element-1622378 .elementor-heading-title {
	overflow-wrap: break-word;
	hyphens: manual;
	text-wrap: balance;
}


/* ==========================================================================
   PAGINA DE PRODUCTOS (398)
   ========================================================================== */

/* --- Tarjetas de categoria ---------------------------------------------- */

.elementor-398 .elementor-element.elementor-element-4ad3b2d {
	gap: 24px;
	padding: 8px 24px 48px !important;
	align-items: stretch !important;
}

.elementor-398 .elementor-element.elementor-element-d2bc92a,
.elementor-398 .elementor-element.elementor-element-66b9db3,
.elementor-398 .elementor-element.elementor-element-1ffde64,
.elementor-398 .elementor-element.elementor-element-f8fcd42,
.elementor-398 .elementor-element.elementor-element-bf46575,
.elementor-398 .elementor-element.elementor-element-f05004b {
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid #E7E9EE !important;
	border-radius: 18px;
	box-shadow: var(--mh-sombra);
	padding: 30px 24px 26px !important;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.elementor-398 .elementor-element.elementor-element-d2bc92a::before,
.elementor-398 .elementor-element.elementor-element-66b9db3::before,
.elementor-398 .elementor-element.elementor-element-1ffde64::before,
.elementor-398 .elementor-element.elementor-element-f8fcd42::before,
.elementor-398 .elementor-element.elementor-element-bf46575::before,
.elementor-398 .elementor-element.elementor-element-f05004b::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--mh-color, var(--mh-celeste));
	opacity: 1 !important;
}
.elementor-398 .elementor-element.elementor-element-d2bc92a:hover,
.elementor-398 .elementor-element.elementor-element-66b9db3:hover,
.elementor-398 .elementor-element.elementor-element-1ffde64:hover,
.elementor-398 .elementor-element.elementor-element-f8fcd42:hover,
.elementor-398 .elementor-element.elementor-element-bf46575:hover,
.elementor-398 .elementor-element.elementor-element-f05004b:hover {
	transform: translateY(-6px);
	box-shadow: var(--mh-sombra-alta);
}

.elementor-398 .elementor-element.elementor-element-d2bc92a { --mh-color: var(--mh-amarillo); }
.elementor-398 .elementor-element.elementor-element-66b9db3 { --mh-color: var(--mh-celeste);  }
.elementor-398 .elementor-element.elementor-element-1ffde64 { --mh-color: var(--mh-naranja);  }
.elementor-398 .elementor-element.elementor-element-f8fcd42 { --mh-color: var(--mh-naranja);  }
.elementor-398 .elementor-element.elementor-element-bf46575 { --mh-color: var(--mh-verde);    }
.elementor-398 .elementor-element.elementor-element-f05004b { --mh-color: var(--mh-amarillo); }

/* Icono en disco del color de la categoria */
.elementor-398 .elementor-element.elementor-element-4ad3b2d .elementor-widget-icon {
	width: 84px;
	height: 84px;
	margin: 4px auto 14px !important;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mh-color) 16%, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
}
.elementor-398 .elementor-element.elementor-element-4ad3b2d .elementor-widget-icon .elementor-icon-wrapper,
.elementor-398 .elementor-element.elementor-element-4ad3b2d .elementor-widget-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}
.elementor-398 .elementor-element.elementor-element-4ad3b2d .elementor-widget-icon svg {
	width: 46px !important;
	height: 46px !important;
}

.elementor-398 .elementor-element.elementor-element-4ad3b2d .elementor-widget-heading .elementor-heading-title {
	color: var(--mh-tinta) !important;
	font-size: 24px !important;
	margin-bottom: 4px !important;
}

/* La lista de caracteristicas usaba palomitas escritas a mano y quedaba
   centrada, con los renglones largos partidos de cualquier manera. */
.elementor-398 .elementor-element.elementor-element-4ad3b2d .elementor-widget-text-editor {
	text-align: left;
	font-size: 15px;
	line-height: 1.55;
	color: #3C4149;
	flex-grow: 1;
}
.elementor-398 .elementor-element.elementor-element-4ad3b2d .elementor-widget-text-editor p {
	position: relative;
	padding-left: 26px;
	margin: 0 0 9px;
}
.elementor-398 .elementor-element.elementor-element-4ad3b2d .elementor-widget-text-editor p::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .42em;
	width: 13px;
	height: 8px;
	border-left: 2.4px solid var(--mh-color);
	border-bottom: 2.4px solid var(--mh-color);
	transform: rotate(-45deg);
}

/* El boton lleva a WhatsApp: se le da cuerpo de boton. */
.elementor-398 .elementor-element.elementor-element-4ad3b2d .elementor-button {
	background-color: var(--mh-color) !important;
	color: var(--mh-tinta) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 14px 34px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--mh-sombra);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
	margin-top: 18px;
}
.elementor-398 .elementor-element.elementor-element-4ad3b2d .elementor-button:hover {
	transform: translateY(-2px);
	filter: brightness(1.07);
	box-shadow: var(--mh-sombra-alta);
}

/* --- Tipos de tela ------------------------------------------------------ */

.elementor-398 .elementor-element.elementor-element-ee7a229,
.elementor-398 .elementor-element.elementor-element-e0a0ed1 {
	background-color: #F7F8FA !important;
}
.elementor-398 .elementor-element.elementor-element-ee7a229 .elementor-heading-title {
	color: var(--mh-tinta) !important;
	letter-spacing: 1.5px;
}
.elementor-398 .elementor-element.elementor-element-e0a0ed1 {
	gap: 22px;
	padding: 8px 24px 48px !important;
}
.elementor-398 .elementor-element.elementor-element-86a008f,
.elementor-398 .elementor-element.elementor-element-64a1005,
.elementor-398 .elementor-element.elementor-element-1cb68bc {
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	min-height: 190px;
	justify-content: flex-end !important;
	box-shadow: var(--mh-sombra);
	transition: transform .25s ease, box-shadow .25s ease;
}
.elementor-398 .elementor-element.elementor-element-86a008f:hover,
.elementor-398 .elementor-element.elementor-element-64a1005:hover,
.elementor-398 .elementor-element.elementor-element-1cb68bc:hover {
	transform: translateY(-5px);
	box-shadow: var(--mh-sombra-alta);
}
/* El nombre de la tela iba en gris oscuro directamente sobre la foto. */
.elementor-398 .elementor-element.elementor-element-86a008f::after,
.elementor-398 .elementor-element.elementor-element-64a1005::after,
.elementor-398 .elementor-element.elementor-element-1cb68bc::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,12,15,0) 45%, rgba(10,12,15,.78) 100%);
	pointer-events: none;
}
.elementor-398 .elementor-element.elementor-element-e0a0ed1 .elementor-widget-heading {
	position: relative;
	z-index: 1;
	padding: 0 0 18px;
}
.elementor-398 .elementor-element.elementor-element-e0a0ed1 .elementor-heading-title {
	color: #fff !important;
	letter-spacing: 2px;
	text-shadow: 0 2px 14px rgba(0,0,0,.6);
}

/* El borde de color de 3px lo dibujaba el navegador: los contenedores traen
   border-style:solid y color, pero sin ancho declarado. */
.elementor-398 .elementor-element.elementor-element-d2bc92a,
.elementor-398 .elementor-element.elementor-element-66b9db3,
.elementor-398 .elementor-element.elementor-element-1ffde64,
.elementor-398 .elementor-element.elementor-element-f8fcd42,
.elementor-398 .elementor-element.elementor-element-bf46575,
.elementor-398 .elementor-element.elementor-element-f05004b {
	border-width: 1px !important;
	border-color: #E7E9EE !important;
}

/* Los enlaces de los botones arrastraban el subrayado. */
.elementor-398 .elementor-button,
.elementor-398 .elementor-button-text {
	text-decoration: none !important;
}

/* --- Paleta de colores --------------------------------------------------
   El nombre iba escrito encima del propio color: "Blanco" en blanco sobre
   blanco, "Amarillo" sobre amarillo y "Hueso" sobre crema eran ilegibles.
   Ahora cada muestra es una ficha con el color arriba y el nombre debajo.
   ------------------------------------------------------------------------ */

.elementor-398 .elementor-element.elementor-element-6af875f5,
.elementor-398 .elementor-element.elementor-element-77e331cc,
.elementor-398 .elementor-element.elementor-element-44bb6ba5,
.elementor-398 .elementor-element.elementor-element-308d8139 {
	gap: 16px;
	max-width: 1120px;
	margin-inline: auto !important;
	padding: 0 24px 16px !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
}

.elementor-398 .elementor-element.elementor-element-6af875f5 .e-con,
.elementor-398 .elementor-element.elementor-element-77e331cc .e-con,
.elementor-398 .elementor-element.elementor-element-44bb6ba5 .e-con,
.elementor-398 .elementor-element.elementor-element-308d8139 .e-con {
	min-height: 96px !important;
	border-radius: 14px;
	border: 1px solid #E2E5EA !important;
	overflow: hidden;
	position: relative;
	justify-content: flex-end !important;
	padding: 0 !important;
	box-shadow: 0 4px 14px rgba(20,22,26,.08);
	transition: transform .2s ease, box-shadow .2s ease;
}
.elementor-398 .elementor-element.elementor-element-6af875f5 .e-con:hover,
.elementor-398 .elementor-element.elementor-element-77e331cc .e-con:hover,
.elementor-398 .elementor-element.elementor-element-44bb6ba5 .e-con:hover,
.elementor-398 .elementor-element.elementor-element-308d8139 .e-con:hover {
	transform: translateY(-4px);
	box-shadow: var(--mh-sombra);
}

/* Franja blanca al pie con el nombre del color. */
.elementor-398 .elementor-element.elementor-element-6af875f5 .elementor-widget-heading,
.elementor-398 .elementor-element.elementor-element-77e331cc .elementor-widget-heading,
.elementor-398 .elementor-element.elementor-element-44bb6ba5 .elementor-widget-heading,
.elementor-398 .elementor-element.elementor-element-308d8139 .elementor-widget-heading {
	width: 100%;
	background: #fff;
	border-top: 1px solid #E2E5EA;
	margin: 0 !important;
	padding: 7px 6px;
}
.elementor-398 .elementor-element.elementor-element-6af875f5 .elementor-heading-title,
.elementor-398 .elementor-element.elementor-element-77e331cc .elementor-heading-title,
.elementor-398 .elementor-element.elementor-element-44bb6ba5 .elementor-heading-title,
.elementor-398 .elementor-element.elementor-element-308d8139 .elementor-heading-title {
	color: var(--mh-tinta) !important;
	font-size: 12.5px !important;
	line-height: 1.25 !important;
	text-align: center;
	margin: 0 !important;
	font-weight: 500;
}

.elementor-398 .elementor-element.elementor-element-f855de9 .elementor-heading-title {
	letter-spacing: 1.5px;
}

@media (max-width: 767px) {
	.elementor-398 .elementor-element.elementor-element-6af875f5 .e-con,
	.elementor-398 .elementor-element.elementor-element-77e331cc .e-con,
	.elementor-398 .elementor-element.elementor-element-44bb6ba5 .e-con,
	.elementor-398 .elementor-element.elementor-element-308d8139 .e-con {
		width: calc(33.333% - 8px) !important;
		min-height: 78px !important;
	}
	.elementor-398 .elementor-element.elementor-element-6af875f5,
	.elementor-398 .elementor-element.elementor-element-77e331cc,
	.elementor-398 .elementor-element.elementor-element-44bb6ba5,
	.elementor-398 .elementor-element.elementor-element-308d8139 {
		gap: 10px;
		padding: 0 16px 10px !important;
	}
	.elementor-398 .elementor-element.elementor-element-4ad3b2d {
		padding: 8px 16px 34px !important;
		gap: 16px;
	}
	.elementor-398 .elementor-element.elementor-element-e0a0ed1 {
		padding: 8px 16px 34px !important;
		gap: 14px;
	}
}

/* La franja con el nombre queda al pie de la muestra. Elementor envuelve los
   hijos en un .e-con-inner propio, asi que alinear el contenedor no alcanza:
   el margen automatico empuja el elemento al final de la columna. */
.elementor-398 .elementor-element.elementor-element-6af875f5 .e-con > .e-con-inner,
.elementor-398 .elementor-element.elementor-element-77e331cc .e-con > .e-con-inner,
.elementor-398 .elementor-element.elementor-element-44bb6ba5 .e-con > .e-con-inner,
.elementor-398 .elementor-element.elementor-element-308d8139 .e-con > .e-con-inner,
.elementor-398 .elementor-element.elementor-element-86a008f > .e-con-inner,
.elementor-398 .elementor-element.elementor-element-64a1005 > .e-con-inner,
.elementor-398 .elementor-element.elementor-element-1cb68bc > .e-con-inner {
	height: 100%;
	justify-content: flex-end !important;
	padding: 0 !important;
}
.elementor-398 .elementor-element.elementor-element-6af875f5 .elementor-widget-heading,
.elementor-398 .elementor-element.elementor-element-77e331cc .elementor-widget-heading,
.elementor-398 .elementor-element.elementor-element-44bb6ba5 .elementor-widget-heading,
.elementor-398 .elementor-element.elementor-element-308d8139 .elementor-widget-heading,
.elementor-398 .elementor-element.elementor-element-86a008f .elementor-widget-heading,
.elementor-398 .elementor-element.elementor-element-64a1005 .elementor-widget-heading,
.elementor-398 .elementor-element.elementor-element-1cb68bc .elementor-widget-heading {
	margin-top: auto !important;
}

@media (max-width: 767px) {
	/* El banner de cuatro fotos se apilaba en cuatro bloques altisimos y habia
	   que recorrer casi tres pantallas antes de llegar a los productos. */
	.elementor-398 .elementor-element.elementor-element-bf793e0 {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		padding: 0 !important;
	}
	.elementor-398 .elementor-element.elementor-element-bf793e0 > .e-con {
		width: auto !important;
		min-height: 0 !important;
	}
	.elementor-398 .elementor-element.elementor-element-bf793e0 .elementor-widget-spacer .elementor-spacer-inner {
		height: 132px !important;
	}
}


/* ==========================================================================
   PAGINA NOSOTROS (514)
   Cuatro franjas alternadas: en cada una, un titulo sobre foto y un texto
   sobre un panel de color. Los titulos iban en bandas blancas de ancho
   irregular y las alineaciones cambiaban de una franja a otra.
   ========================================================================== */

.elementor-514 .elementor-element.elementor-element-4276d8c,
.elementor-514 .elementor-element.elementor-element-3f4acdc,
.elementor-514 .elementor-element.elementor-element-2bed1a8,
.elementor-514 .elementor-element.elementor-element-58d4510 {
	align-items: stretch !important;
	min-height: 300px;
	position: relative;
}

/* Velo bajo cada titulo. Va en la columna del titulo y no en la franja
   entera: las franjas alternan el lado, y un velo con direccion fija dejaba
   el cuarto titulo en blanco sobre un fondo claro. */
.elementor-514 .elementor-element.elementor-element-eec6299,
.elementor-514 .elementor-element.elementor-element-9bc359f,
.elementor-514 .elementor-element.elementor-element-ca75231,
.elementor-514 .elementor-element.elementor-element-6417626 {
	background-color: rgba(10, 12, 15, .5) !important;
	background-image: linear-gradient(180deg, rgba(10,12,15,.30) 0%, rgba(10,12,15,.55) 100%) !important;
}
.elementor-514 .elementor-element.elementor-element-4276d8c > .e-con,
.elementor-514 .elementor-element.elementor-element-3f4acdc > .e-con,
.elementor-514 .elementor-element.elementor-element-2bed1a8 > .e-con,
.elementor-514 .elementor-element.elementor-element-58d4510 > .e-con {
	position: relative;
	z-index: 1;
}

/* Los titulos: fuera la banda blanca, texto claro y un filete de color. */
.elementor-514 .elementor-element.elementor-element-b39567f > .elementor-widget-container,
.elementor-514 .elementor-element.elementor-element-be6988c > .elementor-widget-container,
.elementor-514 .elementor-element.elementor-element-ae8d0e9 > .elementor-widget-container,
.elementor-514 .elementor-element.elementor-element-1fc3b16 > .elementor-widget-container {
	background-color: transparent !important;
	margin: 0 !important;
}
.elementor-514 .elementor-element.elementor-element-b39567f .elementor-heading-title,
.elementor-514 .elementor-element.elementor-element-be6988c .elementor-heading-title,
.elementor-514 .elementor-element.elementor-element-ae8d0e9 .elementor-heading-title,
.elementor-514 .elementor-element.elementor-element-1fc3b16 .elementor-heading-title {
	color: #fff !important;
	text-shadow: 0 2px 18px rgba(0,0,0,.6);
	line-height: 1.18 !important;
	max-width: 16ch;
}

/* Cada franja arranca con un filete del color que le corresponde. */
.elementor-514 .elementor-element.elementor-element-eec6299,
.elementor-514 .elementor-element.elementor-element-9bc359f,
.elementor-514 .elementor-element.elementor-element-ca75231,
.elementor-514 .elementor-element.elementor-element-6417626 {
	justify-content: center !important;
	padding: 46px 44px !important;
}
.elementor-514 .elementor-element.elementor-element-eec6299 .elementor-heading-title { border-left: 5px solid var(--mh-celeste);  padding-left: 18px; }
.elementor-514 .elementor-element.elementor-element-9bc359f .elementor-heading-title { border-left: 5px solid var(--mh-amarillo); padding-left: 18px; }
.elementor-514 .elementor-element.elementor-element-ca75231 .elementor-heading-title { border-left: 5px solid var(--mh-verde);    padding-left: 18px; }
.elementor-514 .elementor-element.elementor-element-6417626 .elementor-heading-title { border-left: 5px solid var(--mh-naranja);  padding-left: 18px; }

/* Los paneles de texto: mismo aire y misma alineacion en las cuatro franjas. */
.elementor-514 .elementor-element.elementor-element-801076d,
.elementor-514 .elementor-element.elementor-element-269d2c6,
.elementor-514 .elementor-element.elementor-element-a5dc198,
.elementor-514 .elementor-element.elementor-element-9b77753 {
	justify-content: center !important;
	padding: 46px 44px !important;
}
.elementor-514 .elementor-element.elementor-element-a076e2c,
.elementor-514 .elementor-element.elementor-element-403b18b,
.elementor-514 .elementor-element.elementor-element-bf7ab76,
.elementor-514 .elementor-element.elementor-element-ce04c81 {
	text-align: left !important;
}
.elementor-514 .elementor-element.elementor-element-a076e2c,
.elementor-514 .elementor-element.elementor-element-403b18b,
.elementor-514 .elementor-element.elementor-element-bf7ab76,
.elementor-514 .elementor-element.elementor-element-ce04c81,
.elementor-514 .elementor-element.elementor-element-a076e2c p,
.elementor-514 .elementor-element.elementor-element-403b18b p,
.elementor-514 .elementor-element.elementor-element-bf7ab76 p,
.elementor-514 .elementor-element.elementor-element-ce04c81 p {
	font-size: 18px !important;
	line-height: 1.6 !important;
	color: var(--mh-tinta) !important;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.elementor-514 .elementor-element.elementor-element-eec6299,
	.elementor-514 .elementor-element.elementor-element-9bc359f,
	.elementor-514 .elementor-element.elementor-element-ca75231,
	.elementor-514 .elementor-element.elementor-element-6417626,
	.elementor-514 .elementor-element.elementor-element-801076d,
	.elementor-514 .elementor-element.elementor-element-269d2c6,
	.elementor-514 .elementor-element.elementor-element-a5dc198,
	.elementor-514 .elementor-element.elementor-element-9b77753 {
		padding: 30px 20px !important;
	}
	.elementor-514 .elementor-element.elementor-element-4276d8c,
	.elementor-514 .elementor-element.elementor-element-3f4acdc,
	.elementor-514 .elementor-element.elementor-element-2bed1a8,
	.elementor-514 .elementor-element.elementor-element-58d4510 {
		min-height: 0;
	}
	.elementor-514 .elementor-heading-title {
		max-width: none !important;
	}
}

/* Dos de los cuatro titulos venian alineados a la derecha: con el filete de
   color a la izquierda, el texto quedaba separado de su propia marca. */
.elementor-514 .elementor-element.elementor-element-b39567f,
.elementor-514 .elementor-element.elementor-element-be6988c,
.elementor-514 .elementor-element.elementor-element-ae8d0e9,
.elementor-514 .elementor-element.elementor-element-1fc3b16,
.elementor-514 .elementor-element.elementor-element-b39567f .elementor-heading-title,
.elementor-514 .elementor-element.elementor-element-be6988c .elementor-heading-title,
.elementor-514 .elementor-element.elementor-element-ae8d0e9 .elementor-heading-title,
.elementor-514 .elementor-element.elementor-element-1fc3b16 .elementor-heading-title {
	text-align: left !important;
}


/* ==========================================================================
   GUIA PARA TOMAR MEDIDAS (1393)
   Tres pasos: los numeros iban sueltos sobre planos de color saturado y las
   cuatro fichas del paso 3 flotaban sobre naranja pleno.
   ========================================================================== */

.elementor-1393 .elementor-element.elementor-element-4a2548b {
	padding: 30px 40px !important;
}
.elementor-1393 .elementor-element.elementor-element-7ef26fa .elementor-heading-title {
	color: var(--mh-tinta) !important;
	position: relative;
	padding-bottom: 14px;
}
.elementor-1393 .elementor-element.elementor-element-7ef26fa .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 72px; height: 4px;
	border-radius: 2px;
	background: var(--mh-amarillo);
}

/* Pasos 1 y 2 */
.elementor-1393 .elementor-element.elementor-element-1012476 {
	gap: 24px;
	padding: 8px 40px 30px !important;
	align-items: stretch !important;
}
.elementor-1393 .elementor-element.elementor-element-cae6d49,
.elementor-1393 .elementor-element.elementor-element-4f883a7 {
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid #E7E9EE !important;
	border-radius: 18px;
	box-shadow: var(--mh-sombra);
	padding: 30px 28px !important;
	position: relative;
	overflow: hidden;
}
.elementor-1393 .elementor-element.elementor-element-cae6d49::before,
.elementor-1393 .elementor-element.elementor-element-4f883a7::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	opacity: 1 !important;
	background: var(--mh-color, var(--mh-celeste));
}
.elementor-1393 .elementor-element.elementor-element-cae6d49 { --mh-color: var(--mh-celeste); }
.elementor-1393 .elementor-element.elementor-element-4f883a7 { --mh-color: var(--mh-verde);   }

/* El numero del paso, dentro de un disco */
.elementor-1393 .elementor-element.elementor-element-794c484 .elementor-heading-title,
.elementor-1393 .elementor-element.elementor-element-8bd87d2 .elementor-heading-title,
.elementor-1393 .elementor-element.elementor-element-4ddcc30 .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--mh-color, var(--mh-celeste));
	color: var(--mh-tinta) !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	line-height: 1 !important;
	margin: 0 auto 10px;
}
.elementor-1393 .elementor-element.elementor-element-4ddcc30 { --mh-color: var(--mh-naranja); }

.elementor-1393 .elementor-element.elementor-element-ae1ce83 .elementor-heading-title,
.elementor-1393 .elementor-element.elementor-element-91a614a .elementor-heading-title,
.elementor-1393 .elementor-element.elementor-element-3497af8 .elementor-heading-title {
	color: var(--mh-tinta) !important;
	font-size: 21px !important;
	margin-bottom: 8px !important;
}

/* Paso 3 */
.elementor-1393 .elementor-element.elementor-element-ba99316,
.elementor-1393 .elementor-element.elementor-element-8c87965,
.elementor-1393 .elementor-element.elementor-element-e917cda {
	background-color: #F7F8FA !important;
	background-image: none !important;
}
.elementor-1393 .elementor-element.elementor-element-ba99316 {
	padding-top: 40px !important;
}
.elementor-1393 .elementor-element.elementor-element-8c87965 {
	gap: 20px;
	padding: 8px 40px 20px !important;
	align-items: stretch !important;
}
.elementor-1393 .elementor-element.elementor-element-4b9ca6a,
.elementor-1393 .elementor-element.elementor-element-e825f46,
.elementor-1393 .elementor-element.elementor-element-a8811fa,
.elementor-1393 .elementor-element.elementor-element-b0e4413 {
	border: 1px solid #E7E9EE !important;
	border-radius: 18px;
	box-shadow: var(--mh-sombra);
	padding: 26px 22px !important;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.elementor-1393 .elementor-element.elementor-element-4b9ca6a:hover,
.elementor-1393 .elementor-element.elementor-element-e825f46:hover,
.elementor-1393 .elementor-element.elementor-element-a8811fa:hover,
.elementor-1393 .elementor-element.elementor-element-b0e4413:hover {
	transform: translateY(-5px);
	box-shadow: var(--mh-sombra-alta);
}
.elementor-1393 .elementor-element.elementor-element-4b9ca6a::before,
.elementor-1393 .elementor-element.elementor-element-e825f46::before,
.elementor-1393 .elementor-element.elementor-element-a8811fa::before,
.elementor-1393 .elementor-element.elementor-element-b0e4413::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	opacity: 1 !important;
	background: var(--mh-color);
}
.elementor-1393 .elementor-element.elementor-element-4b9ca6a { --mh-color: var(--mh-amarillo); }
.elementor-1393 .elementor-element.elementor-element-e825f46 { --mh-color: var(--mh-celeste);  }
.elementor-1393 .elementor-element.elementor-element-a8811fa { --mh-color: var(--mh-naranja);  }
.elementor-1393 .elementor-element.elementor-element-b0e4413 { --mh-color: var(--mh-verde);    }

.elementor-1393 .elementor-element.elementor-element-8c87965 .elementor-widget-heading .elementor-heading-title {
	color: var(--mh-tinta) !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	text-align: left;
	margin-bottom: 10px !important;
}

/* Las listas: las palomitas ahora se dibujan, ya no se escriben. */
.elementor-1393 .elementor-widget-text-editor {
	font-size: 15px;
	line-height: 1.6;
	color: #3C4149;
}
.elementor-1393 .elementor-widget-text-editor p {
	position: relative;
	padding-left: 26px;
	margin: 0 0 10px;
}
.elementor-1393 .elementor-widget-text-editor p::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .42em;
	width: 13px;
	height: 8px;
	border-left: 2.4px solid var(--mh-color, var(--mh-celeste));
	border-bottom: 2.4px solid var(--mh-color, var(--mh-celeste));
	transform: rotate(-45deg);
}

@media (max-width: 767px) {
	.elementor-1393 .elementor-element.elementor-element-4a2548b { padding: 22px 18px !important; }
	.elementor-1393 .elementor-element.elementor-element-1012476,
	.elementor-1393 .elementor-element.elementor-element-8c87965 {
		padding: 8px 16px 20px !important;
		gap: 14px;
	}
	.elementor-1393 .elementor-element.elementor-element-cae6d49,
	.elementor-1393 .elementor-element.elementor-element-4f883a7 { padding: 24px 20px !important; }
}


/* ==========================================================================
   PROBADOR VIRTUAL (525)
   ========================================================================== */

/* Banner: mismo tratamiento que el resto del sitio. */
.elementor-525 .elementor-element.elementor-element-18f0999 {
	position: relative;
}
.elementor-525 .elementor-element.elementor-element-ad00611 {
	position: relative;
	z-index: 1;
	padding: 40px 40px !important;
}
.elementor-525 .elementor-element.elementor-element-18f0999::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 1 !important;
	background: linear-gradient(180deg, rgba(10,12,15,.60) 0%, rgba(10,12,15,.40) 50%, rgba(10,12,15,.70) 100%);
	z-index: 0;
}
.elementor-525 .elementor-element.elementor-element-7a0494b > .elementor-widget-container {
	background-color: transparent !important;
}
.elementor-525 .elementor-element.elementor-element-7a0494b .elementor-heading-title {
	color: #fff !important;
	text-shadow: 0 2px 18px rgba(0,0,0,.55);
	max-width: 46ch;
	margin-inline: auto;
}
/* El enlace a la guia, como boton. */
.elementor-525 .elementor-element.elementor-element-44b1f29 > .elementor-widget-container {
	background-color: var(--mh-amarillo) !important;
	display: inline-block;
	border-radius: 999px;
	padding: 13px 30px !important;
	box-shadow: var(--mh-sombra);
	transition: transform .2s ease, box-shadow .2s ease;
}
.elementor-525 .elementor-element.elementor-element-44b1f29 > .elementor-widget-container:hover {
	transform: translateY(-2px);
	box-shadow: var(--mh-sombra-alta);
}
.elementor-525 .elementor-element.elementor-element-44b1f29 .elementor-heading-title,
.elementor-525 .elementor-element.elementor-element-44b1f29 a {
	color: var(--mh-tinta) !important;
	text-decoration: none !important;
	margin: 0 !important;
}
/* El rotulo no puede pasarse del ancho de la pagina: en una sola linea media
   556px y a 768px de pantalla empujaba el documento 330px hacia afuera. */
.elementor-525 .elementor-element.elementor-element-44b1f29 > .elementor-widget-container {
	max-width: 100%;
}
.elementor-525 .elementor-element.elementor-element-f1e7b06 {
	max-width: 100%;
	overflow: hidden;
}

/* El bloque del calculador venia sobre un plano naranja que se comia el
   contraste de todo el formulario. */
.elementor-525 .elementor-element.elementor-element-dfab49a {
	background-color: #fff !important;
	background-image: none !important;
	padding: 10px 0 64px !important;
}
.elementor-525 .elementor-element.elementor-element-6d6a72d {
	padding: 40px 40px 6px !important;
}

@media (max-width: 767px) {
	.elementor-525 .elementor-element.elementor-element-ad00611 { padding: 26px 18px !important; }
	.elementor-525 .elementor-element.elementor-element-6d6a72d { padding: 26px 18px 0 !important; }
	.elementor-525 .elementor-element.elementor-element-dfab49a { padding: 6px 0 40px !important; }
}

/* Cierre de la guia: enlace al calculador, para no dejar al lector sin el
   paso siguiente despues de tomarse las medidas. */
.mh-guia-cta {
	text-align: center;
	padding: 10px 20px 34px;
}
.mh-guia-cta p {
	margin: 0 0 16px;
	color: var(--mh-tinta);
	font-size: 17px;
	font-weight: 500;
}
.mh-guia-cta a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 36px;
	border-radius: 999px;
	background: var(--mh-amarillo);
	color: var(--mh-tinta);
	font-weight: 700;
	font-size: 16.5px;
	text-decoration: none;
	min-height: 52px;
	box-shadow: var(--mh-sombra);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.mh-guia-cta a:hover,
.mh-guia-cta a:focus-visible {
	transform: translateY(-3px);
	background: #F2D400;
	box-shadow: var(--mh-sombra-alta);
	color: var(--mh-tinta);
}
.mh-guia-cta svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Las cuatro fichas del paso 3 quedaban en 214px con textos largos: se
   repartia mal el ancho disponible. */
@media (min-width: 768px) {
	.elementor-1393 .elementor-element.elementor-element-8c87965 {
		max-width: 1180px;
		margin-inline: auto !important;
	}
	.elementor-1393 .elementor-element.elementor-element-4b9ca6a,
	.elementor-1393 .elementor-element.elementor-element-e825f46,
	.elementor-1393 .elementor-element.elementor-element-a8811fa,
	.elementor-1393 .elementor-element.elementor-element-b0e4413 {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
	}
	.elementor-1393 .elementor-element.elementor-element-1012476 {
		max-width: 1180px;
		margin-inline: auto !important;
	}
	.elementor-1393 .elementor-element.elementor-element-937d565,
	.elementor-1393 .elementor-element.elementor-element-51a0d3b {
		flex: 1 1 0 !important;
		width: auto !important;
	}
}

/* La imagen "Probador virtual" del encabezado de la guia mide 377px y no
   entraba en el ancho util de un telefono, empujando la pagina 5px. */
@media (max-width: 767px) {
	.elementor-525 .elementor-element.elementor-element-0f901d6 img {
		max-width: 100% !important;
		height: auto;
	}
}

/* El rotulo "PROBADOR VIRTUAL" se apoyaba sobre el gif de la cinta metrica
   mediante margenes negativos. Quitado el gif, el rotulo pasa a encabezar la
   seccion por si mismo. */
.elementor-525 .elementor-element.elementor-element-de10578 .elementor-heading-title,
.elementor-1393 .elementor-element.elementor-element-659f5cb .elementor-heading-title {
	color: var(--mh-tinta) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mh-amarillo) 22%, #fff);
	margin-bottom: 10px !important;
}

/* El separador de 78px acompañaba al gif que ya no esta y dejaba un hueco. */
.elementor-525 .elementor-element.elementor-element-418ef4a .elementor-spacer-inner {
	height: 8px !important;
}

/* El rotulo "Probador Virtual" de la portada es ahora un enlace a /probador/.
   El area clicable tiene que ser toda la pastilla, no solo las letras. */
.elementor-812 .elementor-element.elementor-element-57512b4 > .elementor-widget-container {
	padding: 0 !important;
	overflow: hidden;
}
.elementor-812 .elementor-element.elementor-element-57512b4 .elementor-heading-title a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 34px;
	color: var(--mh-tinta) !important;
	text-decoration: none !important;
	min-height: 52px;
}
.elementor-812 .elementor-element.elementor-element-57512b4 .elementor-heading-title a::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2.6px solid currentColor;
	border-bottom: 2.6px solid currentColor;
	transform: rotate(-45deg);
	flex: 0 0 auto;
	transition: transform .2s ease;
}
.elementor-812 .elementor-element.elementor-element-57512b4 > .elementor-widget-container:hover .elementor-heading-title a::after {
	transform: rotate(-45deg) translate(3px, 3px);
}
.elementor-812 .elementor-element.elementor-element-57512b4 .elementor-heading-title {
	padding: 0 !important;
}


/* ==========================================================================
   PORTADA — segunda pasada
   ========================================================================== */

/* --- Franja del probador -------------------------------------------------
   Ahora que el rotulo enlaza al probador, la franja entera se lee como una
   invitacion: velo parejo, mas altura y el boton con mas presencia.
   ------------------------------------------------------------------------ */

.elementor-812 .elementor-element.elementor-element-4037bb3 {
	min-height: 460px !important;
}
.elementor-812 .elementor-element.elementor-element-4037bb3::before {
	background: linear-gradient(90deg, rgba(10,12,15,.86) 0%, rgba(10,12,15,.70) 45%, rgba(10,12,15,.52) 100%) !important;
}
/* Filete de marca cerrando la franja, como en el hero. */
.elementor-812 .elementor-element.elementor-element-4037bb3::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 5px;
	z-index: 2;
	background: linear-gradient(90deg,
		var(--mh-amarillo) 0 25%, var(--mh-celeste) 25% 50%,
		var(--mh-naranja) 50% 75%, var(--mh-verde) 75% 100%);
}
.elementor-812 .elementor-element.elementor-element-4e61b8b .elementor-heading-title {
	letter-spacing: .6px;
}
.elementor-812 .elementor-element.elementor-element-0e85897 .elementor-heading-title {
	text-wrap: balance;
}
/* La pastilla amarilla, mas grande y con sombra propia. */
.elementor-812 .elementor-element.elementor-element-57512b4 > .elementor-widget-container {
	box-shadow: 0 14px 36px rgba(0,0,0,.42);
}
.elementor-812 .elementor-element.elementor-element-57512b4 .elementor-heading-title a {
	font-size: 20px;
	font-weight: 700;
	padding: 17px 38px;
	min-height: 58px;
}

/* --- Ritmo vertical ------------------------------------------------------
   Entre la ultima tarjeta de producto y la franja del probador quedaba un
   hueco blanco de mas de 120px.
   ------------------------------------------------------------------------ */
@media (min-width: 768px) {
	.elementor-812 .elementor-element.elementor-element-d7f47d6 .elementor-spacer-inner {
		height: 12px !important;
	}
	.elementor-812 .elementor-element.elementor-element-25ae7ed .elementor-spacer-inner {
		height: 20px !important;
	}
	.elementor-812 .elementor-element.elementor-element-66e1046 .elementor-spacer-inner {
		height: 0 !important;
	}
}

@media (max-width: 767px) {
	.elementor-812 .elementor-element.elementor-element-4037bb3 {
		min-height: 0 !important;
	}
	.elementor-812 .elementor-element.elementor-element-57512b4 .elementor-heading-title a {
		font-size: 18px;
		padding: 15px 30px;
	}
}


/* ==========================================================================
   PORTADA — BLOQUE "M&H CREACIONES"
   Antes: una caja blanca opaca partida al medio de la foto y, al lado, un
   panel celeste translucido que dejaba ver la imagen de forma sucia. Las dos
   mitades no se leian como una sola pieza y el boton negro no pertenecia a
   la paleta.
   Ahora: la foto ocupa la franja completa bajo un velo oscuro, y encima flota
   un unico panel de vidrio con el titulo, el texto y la llamada a la accion.
   ========================================================================== */

.elementor-812 .elementor-element.elementor-element-0c854b2 {
	position: relative;
	/* "stretch" y no "center": con center cada mitad tomaba su propia altura y
	   el panel quedaba partido en dos escalones. */
	align-items: stretch !important;
	justify-content: center !important;
	min-height: 520px !important;
	padding: 72px clamp(20px, 5vw, 72px) !important;
	overflow: hidden;
	background-attachment: scroll;
	background-position: center 30% !important;
}

/* Velo: oscurece la foto de forma pareja para que el panel se despegue. */
.elementor-812 .elementor-element.elementor-element-0c854b2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 1 !important;
	background:
		radial-gradient(120% 90% at 15% 20%, rgba(10,12,15,.34) 0%, rgba(10,12,15,.72) 70%),
		linear-gradient(180deg, rgba(10,12,15,.55) 0%, rgba(10,12,15,.72) 100%);
}

/* Dos manchas de color desenfocadas, con los colores de la marca, para que la
   franja no sea solo una foto oscura. */
.elementor-812 .elementor-element.elementor-element-0c854b2::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: -20%;
	pointer-events: none;
	background:
		radial-gradient(34% 42% at 12% 24%, rgba(219,191,0,.30) 0%, rgba(219,191,0,0) 70%),
		radial-gradient(32% 40% at 88% 78%, rgba(110,193,228,.30) 0%, rgba(110,193,228,0) 70%);
	filter: blur(28px);
}

/* Las dos columnas dejan de ser bloques sueltos y arman un solo panel. */
.elementor-812 .elementor-element.elementor-element-2247bb9,
.elementor-812 .elementor-element.elementor-element-4f590fa {
	position: relative;
	z-index: 1;
	background-color: rgba(255, 255, 255, .07) !important;
	background-image: none !important;
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
	justify-content: center !important;
}

/* --- Escritorio: panel partido en dos mitades continuas ------------------ */
@media (min-width: 861px) {
	.elementor-812 .elementor-element.elementor-element-0c854b2 {
		gap: 0 !important;
		flex-wrap: nowrap !important;
	}
	.elementor-812 .elementor-element.elementor-element-2247bb9 {
		width: 48% !important;
		max-width: 620px;
		margin: 0 !important;
		padding: 52px 46px !important;
		border-radius: 26px 0 0 26px;
		border-right: 0;
	}
	.elementor-812 .elementor-element.elementor-element-4f590fa {
		width: 44% !important;
		max-width: 560px;
		margin: 0 !important;
		padding: 52px 46px !important;
		border-radius: 0 26px 26px 0;
		border-left: 0;
		background-color: rgba(255, 255, 255, .12) !important;
	}
	/* Linea divisoria fina entre las dos mitades. */
	.elementor-812 .elementor-element.elementor-element-4f590fa::before {
		content: "";
		position: absolute;
		left: 0;
		top: 12%;
		bottom: 12%;
		width: 1px;
		background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.30), rgba(255,255,255,0));
	}
}

/* --- Titulo -------------------------------------------------------------- */
/* Eran tres titulos, cada uno con su propio fondo blanco ajustado al ancho
   del texto, escalonados sobre la foto. */
.elementor-812 .elementor-element.elementor-element-2247bb9 .elementor-widget-heading > .elementor-widget-container,
.elementor-812 .elementor-element.elementor-element-2247bb9 .elementor-heading-title,
.elementor-812 .elementor-element.elementor-element-2247bb9 .elementor-heading-title span {
	background-color: transparent !important;
	background-image: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.elementor-812 .elementor-element.elementor-element-2247bb9 .elementor-heading-title,
.elementor-812 .elementor-element.elementor-element-2247bb9 .elementor-heading-title span {
	color: #fff !important;
	line-height: 1.16 !important;
	letter-spacing: -.4px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}

/* Filete con los cuatro colores de la marca encabezando el titulo. */
.elementor-812 .elementor-element.elementor-element-09019e4::before {
	content: "";
	display: block;
	width: 84px;
	height: 5px;
	border-radius: 3px;
	margin-bottom: 22px;
	background: linear-gradient(90deg,
		var(--mh-amarillo) 0 25%, var(--mh-celeste) 25% 50%,
		var(--mh-naranja) 50% 75%, var(--mh-verde) 75% 100%);
}

/* --- Texto y llamada a la accion ---------------------------------------- */
.elementor-812 .elementor-element.elementor-element-60515e8,
.elementor-812 .elementor-element.elementor-element-60515e8 p,
.elementor-812 .elementor-element.elementor-element-60515e8 span {
	color: rgba(255, 255, 255, .92) !important;
	font-size: 17px !important;
	line-height: 1.65 !important;
	text-align: left !important;
}
.elementor-812 .elementor-element.elementor-element-60515e8 p {
	margin: 0 0 14px !important;
}
.elementor-812 .elementor-element.elementor-element-60515e8 p:last-child {
	margin-bottom: 4px !important;
	font-weight: 600;
	color: #fff !important;
}

/* El boton era negro, ajeno a la paleta. */
.elementor-812 .elementor-element.elementor-element-447c50d {
	text-align: left;
	margin-top: 22px;
}
.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button {
	background-color: var(--mh-amarillo) !important;
	color: var(--mh-tinta) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 15px 34px !important;
	min-height: 52px;
	border-radius: 999px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .34);
}
.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button:hover {
	background-color: #F2D400 !important;
	transform: translateY(-3px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .44);
}

/* --- Tablet y telefono: el panel se apila ------------------------------- */
@media (max-width: 860px) {
	.elementor-812 .elementor-element.elementor-element-0c854b2 {
		flex-direction: column !important;
		min-height: 0 !important;
		padding: 46px 18px !important;
		gap: 0 !important;
	}
	.elementor-812 .elementor-element.elementor-element-2247bb9 {
		width: 100% !important;
		max-width: 560px;
		margin: 0 !important;
		padding: 32px 26px 22px !important;
		border-radius: 22px 22px 0 0;
		border-bottom: 0;
	}
	.elementor-812 .elementor-element.elementor-element-4f590fa {
		width: 100% !important;
		max-width: 560px;
		margin: 0 !important;
		padding: 22px 26px 32px !important;
		border-radius: 0 0 22px 22px;
		border-top: 0;
		background-color: rgba(255, 255, 255, .12) !important;
	}
	.elementor-812 .elementor-element.elementor-element-09019e4::before {
		width: 64px;
		margin-bottom: 16px;
	}
	.elementor-812 .elementor-element.elementor-element-60515e8,
	.elementor-812 .elementor-element.elementor-element-60515e8 p {
		font-size: 15.5px !important;
		line-height: 1.6 !important;
	}
	.elementor-812 .elementor-element.elementor-element-447c50d {
		text-align: center;
		margin-top: 16px;
	}
}

/* Si el navegador no soporta el desenfoque, el panel se apoya en un fondo
   solido para no perder contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.elementor-812 .elementor-element.elementor-element-2247bb9,
	.elementor-812 .elementor-element.elementor-element-4f590fa {
		background-color: rgba(14, 17, 22, .82) !important;
	}
}

/* El texto y el boton venian centrados por ajustes del widget; en un panel
   con el titulo alineado a la izquierda tienen que seguir el mismo eje. */
.elementor-812 .elementor-element.elementor-element-4f590fa .elementor-widget-text-editor,
.elementor-812 .elementor-element.elementor-element-4f590fa .elementor-widget-text-editor p,
.elementor-812 .elementor-element.elementor-element-60515e8 > .elementor-widget-container {
	text-align: left !important;
}
.elementor-812 .elementor-element.elementor-element-447c50d,
.elementor-812 .elementor-element.elementor-element-447c50d > .elementor-widget-container,
.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button-wrapper {
	text-align: left !important;
}

/* Filete de marca del titulo, con mas presencia. */
.elementor-812 .elementor-element.elementor-element-09019e4::before {
	width: 108px !important;
	height: 6px !important;
}

/* Las dos mitades reparten la altura del panel y centran su contenido. */
.elementor-812 .elementor-element.elementor-element-2247bb9 > .e-con-inner,
.elementor-812 .elementor-element.elementor-element-4f590fa > .e-con-inner {
	height: 100%;
	justify-content: center !important;
	padding: 0 !important;
}

@media (max-width: 860px) {
	.elementor-812 .elementor-element.elementor-element-447c50d,
	.elementor-812 .elementor-element.elementor-element-447c50d > .elementor-widget-container,
	.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button-wrapper {
		text-align: center !important;
	}
}

/* El velo dejaba la foto casi negra: se aclara para que se vean los egresados,
   manteniendo el contraste que el panel necesita. */
.elementor-812 .elementor-element.elementor-element-0c854b2::before {
	background:
		radial-gradient(130% 100% at 20% 25%, rgba(10,12,15,.20) 0%, rgba(10,12,15,.52) 72%),
		linear-gradient(180deg, rgba(10,12,15,.38) 0%, rgba(10,12,15,.52) 100%) !important;
}

/* Elementor alinea el boton desde su envoltorio propio. */
.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button-wrapper {
	text-align: left !important;
	display: flex;
	justify-content: flex-start;
}
@media (max-width: 860px) {
	.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button-wrapper {
		justify-content: center;
	}
}

/* El contenedor centraba a sus hijos como cajas, asi que el widget del boton
   media 173px y quedaba centrado: no era cuestion de text-align. */
@media (min-width: 861px) {
	.elementor-812 .elementor-element.elementor-element-4f590fa,
	.elementor-812 .elementor-element.elementor-element-4f590fa > .e-con-inner {
		align-items: flex-start !important;
	}
	.elementor-812 .elementor-element.elementor-element-60515e8,
	.elementor-812 .elementor-element.elementor-element-447c50d {
		width: 100%;
	}
}


/* ==========================================================================
   MENU / CABECERA
   Barra negra plana con el logo y los enlaces sueltos. Pasa a una barra de
   vidrio oscuro, fija al desplazar, con el mismo lenguaje que el resto.
   ========================================================================== */

.ehf-header,
header.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Negro pleno en toda la barra. Antes el color iba en las columnas internas y
   era translucido: por debajo asomaba el blanco de la pagina, que lo aclaraba,
   y ademas ese bloque media 87px contra los 88 de la barra, con lo que quedaba
   una linea sin cubrir. Ahora el color va en la seccion, de borde a borde. */
.elementor-404 .elementor-element.elementor-element-22bf2a980 {
	background-color: #0B0D10 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.elementor-404 .elementor-element.elementor-element-49abec34 > .elementor-widget-wrap,
.elementor-404 .elementor-element.elementor-element-58d08098 > .elementor-widget-wrap,
.elementor-404 .elementor-element.elementor-element-641cc399 > .elementor-widget-wrap,
.elementor-404 .elementor-element.elementor-element-49abec34 > .elementor-element-populated,
.elementor-404 .elementor-element.elementor-element-58d08098 > .elementor-element-populated,
.elementor-404 .elementor-element.elementor-element-641cc399 > .elementor-element-populated {
	background-color: transparent !important;
}

/* Enlaces del menu: mas aire y un subrayado que crece desde el centro. */
.elementor-404 .wpr-nav-menu .wpr-menu-item {
	position: relative;
	padding: 10px 2px !important;
	letter-spacing: 1px !important;
	transition: color .2s ease;
}
.elementor-404 .wpr-nav-menu .wpr-menu-item::before {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--mh-amarillo);
	transition: left .25s ease, right .25s ease;
}
.elementor-404 .wpr-nav-menu .wpr-menu-item:hover::before,
.elementor-404 .wpr-nav-menu .wpr-active-menu-item::before {
	left: 0;
	right: 0;
}
.elementor-404 .wpr-nav-menu .wpr-menu-item:hover {
	color: #fff !important;
}

/* El boton de la cabecera: era un contorno fino y apenas se veia. */
.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button {
	background-color: var(--mh-amarillo) !important;
	border-color: var(--mh-amarillo) !important;
	border-radius: 999px !important;
	padding: 12px 26px !important;
	min-height: 46px;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button .wpr-button-text {
	color: var(--mh-tinta) !important;
	font-weight: 700 !important;
}
.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button:hover {
	transform: translateY(-2px);
	filter: brightness(1.07);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
}
.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button:hover .wpr-button-text {
	color: var(--mh-tinta) !important;
}

/* Menu desplegable en telefono: vidrio oscuro en lugar del gris plano. */
.elementor-404 .wpr-mobile-nav-menu li {
	background-color: transparent !important;
}
.elementor-404 .wpr-mobile-nav-menu {
	background-color: rgba(10, 12, 15, .95) !important;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-top: 1px solid rgba(255, 255, 255, .10);
}
.elementor-404 .wpr-mobile-nav-menu .wpr-mobile-menu-item {
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	letter-spacing: .6px;
}
.elementor-404 .wpr-mobile-toggle-line {
	border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease;
}

/* El boton traia un ancho maximo de 200px que partia el texto en dos lineas y
   con el nuevo relleno se salia de la barra. */
.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button-wrap {
	max-width: none !important;
	display: flex;
	justify-content: flex-end;
}
.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button-text {
	white-space: nowrap;
	font-size: 14px !important;
}
/* La columna del boton comparte el fondo de la barra hasta el borde. */
.elementor-404 .elementor-element.elementor-element-641cc399 > .elementor-element-populated {
	padding-right: 0;
}
.elementor-404 .elementor-element.elementor-element-22bf2a980 > .elementor-container {
	align-items: center;
}
@media (max-width: 767px) {
	.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button-wrap {
		justify-content: center;
	}
	.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button {
		padding: 11px 22px !important;
		min-height: 44px;
	}
}

/* Dentro de un contenedor flex el boton se estiraba a todo el ancho libre. */
.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button {
	flex: 0 0 auto;
	width: auto;
	align-self: center;
}
.elementor-404 .elementor-element.elementor-element-7081fdf9 .wpr-button-content {
	width: auto;
}


/* ==========================================================================
   PORTADA — HERO
   El titular flotaba suelto sobre el video. Pasa a un panel de vidrio, con
   el mismo lenguaje del bloque de "M&H Creaciones".
   ========================================================================== */

.elementor-812 .elementor-element.elementor-element-16e743c {
	justify-content: center !important;
}

/* Manchas de color de la marca, desenfocadas sobre el video. */
.elementor-812 .elementor-element.elementor-element-16e743c > .e-con-inner::before {
	content: "";
	position: absolute;
	inset: -15%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(30% 36% at 16% 26%, rgba(219,191,0,.26) 0%, rgba(219,191,0,0) 70%),
		radial-gradient(28% 34% at 84% 74%, rgba(110,193,228,.26) 0%, rgba(110,193,228,0) 70%);
	filter: blur(30px);
}

/* Panel de vidrio con el titular y la llamada a la accion. */
.elementor-812 .elementor-element.elementor-element-89a75d6 {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 26px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .40);
	padding: 34px 44px 38px !important;
	max-width: 620px;
	margin-inline: auto !important;
	align-items: center !important;
}
.elementor-812 .elementor-element.elementor-element-f68a1a7 .elementor-heading-title {
	font-size: clamp(26px, 3.2vw, 38px) !important;
	line-height: 1.18 !important;
	letter-spacing: -.3px;
	max-width: 18ch;
}
/* El logo, con algo de sombra para despegarlo del video. */
.elementor-812 .elementor-element.elementor-element-4630885 img {
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5));
}

@media (max-width: 767px) {
	.elementor-812 .elementor-element.elementor-element-89a75d6 {
		padding: 24px 20px 26px !important;
		border-radius: 20px;
		max-width: none;
		margin: 0 4px !important;
	}
	.elementor-812 .elementor-element.elementor-element-f68a1a7 .elementor-heading-title {
		font-size: 22px !important;
	}
}


@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.elementor-812 .elementor-element.elementor-element-89a75d6,
	.elementor-812 .elementor-element.elementor-element-4037bb3 > .e-con-inner {
		background-color: rgba(14, 17, 22, .82) !important;
	}
}

/* Con la barra fija, el margen negativo del hero dejaba el logo por debajo de
   la cabecera. Se compensa con relleno superior. */
@media (min-width: 768px) {
	.elementor-812 .elementor-element.elementor-element-16e743c {
		padding-top: 96px !important;
		padding-bottom: 40px !important;
	}
}
@media (max-width: 767px) {
	.elementor-812 .elementor-element.elementor-element-16e743c {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}



/* ==========================================================================
   PORTADA — BLOQUES CLAROS
   Los beneficios y los productos van sobre fondo claro, asi que no llevan
   vidrio; se alinean con el resto por radio, sombra y comportamiento.
   ========================================================================== */

.elementor-812 .elementor-element.elementor-element-1622378 > .e-con,
.elementor-812 .elementor-element.elementor-element-7f5ac5d > .e-con {
	border-radius: 22px !important;
	box-shadow:
		0 1px 2px rgba(20, 22, 26, .05),
		0 10px 28px rgba(20, 22, 26, .09) !important;
	transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, background-color .28s ease;
}
.elementor-812 .elementor-element.elementor-element-1622378 > .e-con:hover,
.elementor-812 .elementor-element.elementor-element-7f5ac5d > .e-con:hover {
	transform: translateY(-7px);
	box-shadow:
		0 2px 4px rgba(20, 22, 26, .06),
		0 24px 54px rgba(20, 22, 26, .17) !important;
}

/* El titulo de seccion, con el mismo filete de marca que las franjas. */
.elementor-812 .elementor-element.elementor-element-520d51d {
	padding-top: 26px;
}
.elementor-812 .elementor-element.elementor-element-52f3ad3 .elementor-heading-title {
	position: relative;
	display: inline-block;
	padding-bottom: 16px;
}
.elementor-812 .elementor-element.elementor-element-52f3ad3 .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 108px;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg,
		var(--mh-amarillo) 0 25%, var(--mh-celeste) 25% 50%,
		var(--mh-naranja) 50% 75%, var(--mh-verde) 75% 100%);
}

/* La franja de beneficios se apoya sobre el hero sin corte brusco. */
.elementor-812 .elementor-element.elementor-element-1622378 {
	background: linear-gradient(180deg, #F2F4F7 0%, #F7F8FA 100%) !important;
}

/* Los iconos de producto acompañan la elevacion de la tarjeta. */
.elementor-812 .elementor-element.elementor-element-7f5ac5d > .e-con:hover .elementor-widget-icon svg {
	transform: scale(1.1) translateY(-2px);
}


/* ==========================================================================
   Reglas recuperadas: se perdieron al retirar el bloque anterior del
   probador, que las tenia intercaladas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6. RITMO VERTICAL
   Tres espaciadores de 70px se sumaban al relleno propio de cada seccion y
   dejaban huecos muy grandes entre bloques.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.elementor-812 .elementor-widget-spacer .elementor-spacer-inner {
		height: 34px !important;
	}
	.elementor-812 .elementor-element.elementor-element-520d51d {
		padding-top: 18px;
	}
}

/* El boton "Conocenos" arrastraba el subrayado del enlace. */
.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button,
.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button-text {
	text-decoration: none !important;
}
/* El boton "Conocenos" arrastraba el subrayado del enlace. */
.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button,
.elementor-812 .elementor-element.elementor-element-447c50d .elementor-button-text {
	text-decoration: none !important;
}
/* --------------------------------------------------------------------------
   7. LLAMADO A LA ACCION DEL HERO
   -------------------------------------------------------------------------- */

.elementor-812 .mh-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 26px auto 0;
	padding: 16px 38px;
	border-radius: 999px;
	background: var(--mh-amarillo);
	color: var(--mh-tinta);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .3px;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.elementor-812 .mh-hero-cta:hover,
.elementor-812 .mh-hero-cta:focus-visible {
	transform: translateY(-3px);
	background: #F2D400;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
	color: var(--mh-tinta);
}
.elementor-812 .mh-hero-cta svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	.elementor-812 .mh-hero-cta {
		margin-top: 18px;
		padding: 14px 28px;
		font-size: 16px;
	}
}

/* El widget del CTA hereda la alineacion del contenedor del hero, que empuja
   su contenido al borde; se centra bajo el titular. */
.elementor-812 .elementor-element.elementor-element-mhcta01 {
	text-align: center;
	width: 100%;
}

/* Medidas mas holgadas a partir de tablet. */
@media (min-width: 768px) {
	.elementor-812 .elementor-element.elementor-element-1622378 > .e-con,
	.elementor-812 .elementor-element.elementor-element-1622378 > .elementor-element {
		padding: 38px 22px 30px !important;
	}
	.elementor-812 .elementor-element.elementor-element-1622378 > .e-con > .e-con,
	.elementor-812 .elementor-element.elementor-element-1622378 > .e-con > .elementor-element:not(.elementor-widget-heading) {
		width: 84px !important;
		height: 84px !important;
		min-height: 84px !important;
	}
	.elementor-812 .elementor-element.elementor-element-7f5ac5d > .e-con {
		padding: 34px 18px !important;
	}
	.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-widget-icon svg {
		width: 76px !important;
		height: 76px !important;
	}
	.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-heading-title {
		font-size: 21px !important;
	}
}

/* En telefono el texto de las tarjetas se ajusta al ancho disponible. */
@media (max-width: 767px) {
	.elementor-812 .elementor-element.elementor-element-1622378 .elementor-heading-title {
		font-size: 15px !important;
	}
	.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-heading-title {
		font-size: 17px !important;
		margin-top: 8px !important;
	}
}

/* Entre 768px y 1024px el probador se apila, igual que en telefono. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-812 .elementor-element.elementor-element-4037bb3 {
		flex-direction: column !important;
		padding: 40px 32px !important;
		gap: 14px;
	}
	.elementor-812 .elementor-element.elementor-element-08c8300,
	.elementor-812 .elementor-element.elementor-element-7fb5c87,
	.elementor-812 .elementor-element.elementor-element-dd1ed3f {
		width: 100% !important;
		margin: 0 !important;
	}
	.elementor-812 .elementor-element.elementor-element-e1ac051 img {
		width: 20% !important;
	}
}

/* El rotulo nunca debe ser mas ancho que su columna. */
.elementor-812 .elementor-element.elementor-element-57512b4 > .elementor-widget-container {
	max-width: 100%;
	box-sizing: border-box;
}

/* El widget del CTA hereda la alineacion del contenedor del hero, que empuja
   su contenido al borde; se centra bajo el titular. */
.elementor-812 .elementor-element.elementor-element-mhcta01 {
	text-align: center;
	width: 100%;
}

/* Medidas mas holgadas a partir de tablet. */
@media (min-width: 768px) {
	.elementor-812 .elementor-element.elementor-element-1622378 > .e-con,
	.elementor-812 .elementor-element.elementor-element-1622378 > .elementor-element {
		padding: 38px 22px 30px !important;
	}
	.elementor-812 .elementor-element.elementor-element-1622378 > .e-con > .e-con,
	.elementor-812 .elementor-element.elementor-element-1622378 > .e-con > .elementor-element:not(.elementor-widget-heading) {
		width: 84px !important;
		height: 84px !important;
		min-height: 84px !important;
	}
	.elementor-812 .elementor-element.elementor-element-7f5ac5d > .e-con {
		padding: 34px 18px !important;
	}
	.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-widget-icon svg {
		width: 76px !important;
		height: 76px !important;
	}
	.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-heading-title {
		font-size: 21px !important;
	}
}

/* En telefono el texto de las tarjetas se ajusta al ancho disponible. */
@media (max-width: 767px) {
	.elementor-812 .elementor-element.elementor-element-1622378 .elementor-heading-title {
		font-size: 15px !important;
	}
	.elementor-812 .elementor-element.elementor-element-7f5ac5d .elementor-heading-title {
		font-size: 17px !important;
		margin-top: 8px !important;
	}
}

/* Entre 768px y 1024px el probador se apila, igual que en telefono. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-812 .elementor-element.elementor-element-4037bb3 {
		flex-direction: column !important;
		padding: 40px 32px !important;
		gap: 14px;
	}
	.elementor-812 .elementor-element.elementor-element-08c8300,
	.elementor-812 .elementor-element.elementor-element-7fb5c87,
	.elementor-812 .elementor-element.elementor-element-dd1ed3f {
		width: 100% !important;
		margin: 0 !important;
	}
	.elementor-812 .elementor-element.elementor-element-e1ac051 img {
		width: 20% !important;
	}
}

/* El rotulo nunca debe ser mas ancho que su columna. */
.elementor-812 .elementor-element.elementor-element-57512b4 > .elementor-widget-container {
	max-width: 100%;
	box-sizing: border-box;
}


/* ==========================================================================
   PAGINA DE CONTACTO (1268)
   Misma paleta y mismo lenguaje visual que la portada rediseñada.
   ========================================================================== */

/* --- Banner ------------------------------------------------------------- */

.elementor-1268 .elementor-element.elementor-element-5c51af6 {
	position: relative;
	justify-content: center !important;
}
.elementor-1268 .elementor-element.elementor-element-5c51af6::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 1 !important;
	background: linear-gradient(180deg, rgba(10,12,15,.62) 0%, rgba(10,12,15,.42) 50%, rgba(10,12,15,.72) 100%);
	z-index: 0;
}
.elementor-1268 .elementor-element.elementor-element-5c51af6 > .e-con-inner,
.elementor-1268 .elementor-element.elementor-element-5c51af6 > .elementor-element {
	position: relative;
	z-index: 1;
}
.elementor-1268 .elementor-element.elementor-element-44d478f .elementor-heading-title {
	color: #fff !important;
	text-shadow: 0 2px 18px rgba(0,0,0,.55);
	max-width: 24ch;
	margin-inline: auto;
}
/* Filete de marca, igual que en el hero de la portada. */
.elementor-1268 .elementor-element.elementor-element-5c51af6::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 6px;
	z-index: 2;
	background: linear-gradient(90deg,
		var(--mh-amarillo) 0 25%, var(--mh-celeste) 25% 50%,
		var(--mh-naranja) 50% 75%, var(--mh-verde) 75% 100%);
}

/* --- Zona principal ----------------------------------------------------- */

.elementor-1268 .elementor-element.elementor-element-17968be {
	padding: 64px 24px !important;
	align-items: stretch !important;
}

/* Columna de texto */
.elementor-1268 .elementor-element.elementor-element-00eb8f3 {
	padding: 0 34px 0 0 !important;
	justify-content: flex-start !important;
}
.elementor-1268 .elementor-element.elementor-element-784afb1 .elementor-heading-title {
	line-height: 1.2;
}
.elementor-1268 .elementor-element.elementor-element-784afb1 {
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 6px;
}
.elementor-1268 .elementor-element.elementor-element-784afb1::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 64px; height: 4px;
	border-radius: 2px;
	background: var(--mh-amarillo);
}
.elementor-1268 .elementor-element.elementor-element-d509f97 .elementor-heading-title {
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--mh-tinta) !important;
	font-weight: 700 !important;
}

/* Datos de contacto: lista con icono, cada dato es un enlace. */
.mh-contacto {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mh-contacto li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}
.mh-contacto .mh-ct-ico {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	padding: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mh-celeste) 18%, #fff);
	color: #0F6E93;
	box-sizing: border-box;
}
.mh-contacto li:nth-child(2) .mh-ct-ico {
	background: color-mix(in srgb, var(--mh-verde) 22%, #fff);
	color: #1B7F2C;
}
.mh-contacto li:nth-child(3) .mh-ct-ico {
	background: color-mix(in srgb, var(--mh-naranja) 18%, #fff);
	color: #A64F00;
}
.mh-contacto a {
	color: var(--mh-tinta);
	text-decoration: none;
	font-weight: 500;
	line-height: 1.35;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, color .2s ease;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.mh-contacto a:hover,
.mh-contacto a:focus-visible {
	color: #0F6E93;
	border-bottom-color: currentColor;
}

/* --- Formulario --------------------------------------------------------- */

.elementor-1268 .elementor-element.elementor-element-293e844 {
	border-radius: 20px;
	box-shadow: var(--mh-sombra);
	padding: 36px 34px !important;
	border: 1px solid #E7E9EE !important;
	justify-content: flex-start !important;
}

.elementor-1268 .forminator-label {
	font-weight: 600 !important;
	color: var(--mh-tinta) !important;
	margin-bottom: 6px !important;
}
.elementor-1268 .forminator-input,
.elementor-1268 .forminator-textarea {
	border: 1px solid #D6DAE1 !important;
	border-radius: 12px !important;
	padding: 13px 15px !important;
	font-size: 16px !important;   /* menos de 16px hace que iOS acerque la pagina */
	background: #FBFCFD !important;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
	box-sizing: border-box;
	width: 100%;
}
.elementor-1268 .forminator-input {
	min-height: 50px !important;
}
.elementor-1268 .forminator-textarea {
	min-height: 140px !important;
	resize: vertical;
}
.elementor-1268 .forminator-input:focus,
.elementor-1268 .forminator-textarea:focus {
	border-color: var(--mh-celeste) !important;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgba(110, 193, 228, .28) !important;
	outline: none !important;
}
.elementor-1268 .forminator-row {
	margin-bottom: 16px !important;
}

/* "Enviar mensaje" era texto plano y no se leia como un boton. */
.elementor-1268 .forminator-button-submit {
	background: var(--mh-amarillo) !important;
	color: var(--mh-tinta) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 15px 40px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: .3px;
	min-height: 52px;
	width: 100%;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--mh-sombra);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.elementor-1268 .forminator-button-submit:hover,
.elementor-1268 .forminator-button-submit:focus-visible {
	background: #F2D400 !important;
	transform: translateY(-2px);
	box-shadow: var(--mh-sombra-alta);
}

/* El formulario lleva hCaptcha. En local no se dibuja (no hay clave ni salida
   a internet) y por eso queda un hueco antes del boton; en produccion ese
   espacio lo ocupa el propio captcha, asi que no se oculta nada. */
.elementor-1268 .forminator-row-last {
	margin-top: 8px !important;
	margin-bottom: 0 !important;
}
.elementor-1268 .forminator-field-captcha {
	margin-bottom: 4px;
}

/* --- Los cuatro carteles: mismo tratamiento que en la portada ----------- */

.elementor-1268 .elementor-element.elementor-element-2587c10 {
	background-color: #F7F8FA !important;
	padding: 56px 24px !important;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 {
	gap: 22px;
	align-items: stretch !important;
	max-width: 1180px;
	margin-inline: auto;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con {
	background-color: #fff !important;
	border-radius: 18px;
	box-shadow: var(--mh-sombra);
	padding: 30px 18px 26px !important;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--mh-color, var(--mh-celeste));
	opacity: 1 !important;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con:hover {
	transform: translateY(-6px);
	box-shadow: var(--mh-sombra-alta);
}
.elementor-1268 .elementor-element.elementor-element-a21fe3a { --mh-color: var(--mh-amarillo); }
.elementor-1268 .elementor-element.elementor-element-1cbe0ad { --mh-color: var(--mh-celeste);  }
.elementor-1268 .elementor-element.elementor-element-ba8248b { --mh-color: var(--mh-naranja);  }
.elementor-1268 .elementor-element.elementor-element-85bd249 { --mh-color: var(--mh-verde);    }

.elementor-1268 .elementor-element.elementor-element-7a9c5e4,
.elementor-1268 .elementor-element.elementor-element-541a5ca,
.elementor-1268 .elementor-element.elementor-element-f09b243,
.elementor-1268 .elementor-element.elementor-element-82159ff {
	width: 76px !important;
	height: 76px !important;
	min-height: 76px !important;
	flex: 0 0 auto !important;
	margin: 0 auto 16px !important;
	padding: 0 !important;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mh-color) 16%, #fff);
	display: flex !important;
	align-items: center;
	justify-content: center;
}
/* En la cuarta tarjeta la imagen y el titulo cuelgan del mismo contenedor,
   a diferencia de las otras tres. Ese contenedor no lleva forma de disco. */
.elementor-1268 .elementor-element.elementor-element-fa6c681 {
	width: 100% !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	background: none !important;
	border-radius: 0;
	padding: 0 !important;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 .elementor-widget-icon svg,
.elementor-1268 .elementor-element.elementor-element-fa77730 .elementor-widget-image img {
	width: 40px !important;
	height: 40px !important;
	object-fit: contain;
	margin: 0 !important;
}
.elementor-1268 .elementor-element.elementor-element-fa77730 .elementor-heading-title {
	color: var(--mh-tinta) !important;
	font-size: 17px !important;
	line-height: 1.35 !important;
	text-align: center;
	margin: 0 !important;
}

/* Las tarjetas traian border-style:solid con color negro y sin ancho definido,
   asi que el navegador dibujaba el ancho por defecto: un marco negro de 3px. */
.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con {
	border: 0 !important;
}

/* Las cuatro tarjetas llevaban un ancho fijo del 25% que, sumado a las
   separaciones, dejaba la fila corta y descentrada. Reparten el ancho. */
@media (min-width: 768px) {
	.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con {
		flex: 1 1 0 !important;
		width: auto !important;
	}
}

@media (max-width: 767px) {

	/* El banner sube 64px para meterse bajo el header, pensado para escritorio.
	   En telefono eso recortaba la primera linea del titulo. */
	.elementor-1268 .elementor-element.elementor-element-5c51af6 {
		margin-top: 0 !important;
		min-height: 260px !important;
		padding: 34px 20px !important;
	}
	.elementor-1268 .elementor-element.elementor-element-44d478f .elementor-heading-title {
		font-size: 22px !important;
		line-height: 1.3 !important;
	}

	/* Al apilarse, el formulario quedaba pegado a los datos de contacto. */
	.elementor-1268 .elementor-element.elementor-element-17968be {
		padding: 34px 16px !important;
		gap: 26px;
	}
	.elementor-1268 .elementor-element.elementor-element-00eb8f3 {
		padding: 0 !important;
	}
	.elementor-1268 .elementor-element.elementor-element-293e844 {
		padding: 26px 18px !important;
	}
	.elementor-1268 .elementor-element.elementor-element-2587c10 {
		padding: 34px 16px !important;
	}
	.elementor-1268 .elementor-element.elementor-element-fa77730 {
		gap: 14px;
	}
	.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con {
		padding: 22px 12px 20px !important;
	}
}

/* Las cuatro tarjetas de contacto, de a dos en telefono. */
@media (max-width: 767px) {
	/* Dos columnas con grid. Con flex y anchos en porcentaje el calculo se
	   resolvia contra un ancho menor al esperado y las tarjetas salian de
	   72px, con el texto partido letra por letra. */
	.elementor-1268 .elementor-element.elementor-element-fa77730 {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
		width: 100% !important;
		max-width: 100% !important;
		/* La fila traia 100px de relleno a cada lado, pensados para escritorio.
		   En un telefono de 390px eso dejaba 158px utiles y las tarjetas
		   quedaban de 72px, con el texto partido en silabas. */
		padding: 0 !important;
		--padding-left: 0px;
		--padding-right: 0px;
	}
	.elementor-1268 .elementor-element.elementor-element-fa77730 > .e-con {
		width: auto !important;
		flex: initial !important;
		min-width: 0;
	}
	/* Solo los tres contenedores de icono llevan disco; en la cuarta tarjeta
	   el disco va sobre la imagen, porque comparte contenedor con el titulo. */
	.elementor-1268 .elementor-element.elementor-element-7a9c5e4,
	.elementor-1268 .elementor-element.elementor-element-541a5ca,
	.elementor-1268 .elementor-element.elementor-element-f09b243,
	.elementor-1268 .elementor-element.elementor-element-82159ff {
		width: 62px !important;
		height: 62px !important;
		min-height: 62px !important;
	}
	.elementor-1268 .elementor-element.elementor-element-fa77730 .elementor-heading-title {
		font-size: 15px !important;
	}
}

/* El texto de las tarjetas nunca se recorta. */
/* Se permite partir una palabra solo si de verdad no entra; el guionado
   automatico cortaba "Promociones" al medio teniendo lugar de sobra. */
.elementor-1268 .elementor-element.elementor-element-fa77730 .elementor-heading-title,
.elementor-812 .elementor-element.elementor-element-1622378 .elementor-heading-title {
	overflow-wrap: break-word;
	hyphens: manual;
	text-wrap: balance;
}



/* ==========================================================================
   PORTADA — FRANJA DEL PROBADOR (rediseño)
   El intento anterior repartia el vidrio entre las tres columnas y se veian
   las costuras: bordes internos que no calzaban y alturas distintas.
   Elementor envuelve las tres en un .e-con-inner propio, asi que el panel se
   dibuja ahi: una sola pieza, sin uniones.
   ========================================================================== */

.elementor-812 .elementor-element.elementor-element-4037bb3 {
	position: relative;
	min-height: 440px !important;
	align-items: center !important;
	padding: 64px clamp(18px, 4vw, 56px) !important;
}

/* Panel unico. */
.elementor-812 .elementor-element.elementor-element-4037bb3 > .e-con-inner {
	position: relative;
	z-index: 1;
	background: rgba(255, 255, 255, .09);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .17);
	border-radius: 26px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .40);
	padding: 44px clamp(24px, 3.5vw, 52px) !important;
	align-items: center !important;
	gap: 0 !important;
}

/* Las columnas ya no llevan fondo propio: viven dentro del panel. */
.elementor-812 .elementor-element.elementor-element-08c8300,
.elementor-812 .elementor-element.elementor-element-7fb5c87,
.elementor-812 .elementor-element.elementor-element-dd1ed3f {
	background: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative;
	z-index: 1;
}

@media (min-width: 861px) {
	.elementor-812 .elementor-element.elementor-element-08c8300 { width: 54% !important; }
	.elementor-812 .elementor-element.elementor-element-7fb5c87 { width: 12% !important; }
	.elementor-812 .elementor-element.elementor-element-dd1ed3f { width: 34% !important; align-items: flex-end !important; }

	.elementor-812 .elementor-element.elementor-element-08c8300 > .e-con-inner,
	.elementor-812 .elementor-element.elementor-element-7fb5c87 > .e-con-inner,
	.elementor-812 .elementor-element.elementor-element-dd1ed3f > .e-con-inner {
		padding: 0 !important;
		justify-content: center !important;
	}
	.elementor-812 .elementor-element.elementor-element-4e61b8b .elementor-heading-title { font-size: 23px !important; }
	.elementor-812 .elementor-element.elementor-element-0e85897 .elementor-heading-title {
		font-size: 34px !important;
		line-height: 1.18 !important;
	}
	/* Las flechas apuntan del mensaje al boton. */
	.elementor-812 .elementor-element.elementor-element-e1ac051 img {
		width: 68% !important;
		margin: 0 auto !important;
	}
	.elementor-812 .elementor-element.elementor-element-e1ac051 { text-align: center; }
}

/* Titulos del bloque: sin las bandas blancas heredadas. */
.elementor-812 .elementor-element.elementor-element-4e61b8b > .elementor-widget-container,
.elementor-812 .elementor-element.elementor-element-0e85897 > .elementor-widget-container {
	background-color: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
}
.elementor-812 .elementor-element.elementor-element-4e61b8b .elementor-heading-title {
	color: var(--mh-verde) !important;
	letter-spacing: .4px;
	margin: 0 0 8px !important;
	text-align: left;
}
.elementor-812 .elementor-element.elementor-element-0e85897 .elementor-heading-title {
	color: #fff !important;
	text-align: left;
	margin: 0 !important;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

@media (max-width: 860px) {
	.elementor-812 .elementor-element.elementor-element-4037bb3 {
		min-height: 0 !important;
		padding: 40px 16px !important;
	}
	.elementor-812 .elementor-element.elementor-element-4037bb3 > .e-con-inner {
		padding: 28px 22px 30px !important;
		border-radius: 20px;
		flex-direction: column !important;
	}
	.elementor-812 .elementor-element.elementor-element-08c8300,
	.elementor-812 .elementor-element.elementor-element-7fb5c87,
	.elementor-812 .elementor-element.elementor-element-dd1ed3f {
		width: 100% !important;
	}
	.elementor-812 .elementor-element.elementor-element-4e61b8b .elementor-heading-title,
	.elementor-812 .elementor-element.elementor-element-0e85897 .elementor-heading-title {
		text-align: center;
	}
	.elementor-812 .elementor-element.elementor-element-e1ac051 img {
		width: 26% !important;
		margin: 6px auto 2px !important;
	}
	.elementor-812 .elementor-element.elementor-element-e1ac051 { text-align: center; }
}


/* ==========================================================================
   CABECERA — pegada al borde superior
   La barra traia 30px de margen y dejaba una franja por encima.
   ========================================================================== */

.elementor-404 .elementor-element.elementor-element-22bf2a980 {
	margin-top: 0 !important;
}

/* El hero ya no se mete bajo la barra, asi que solo necesita aire normal. */
@media (min-width: 768px) {
	.elementor-812 .elementor-element.elementor-element-16e743c {
		padding-top: 34px !important;
		padding-bottom: 34px !important;
	}
}

/* Panel del hero mas compacto, para que el logo, el titular y el boton entren
   juntos en la primera pantalla de un portatil (1366x640). */
@media (min-width: 768px) {
	.elementor-812 .elementor-element.elementor-element-89a75d6 {
		padding: 24px 38px 26px !important;
		max-width: 560px;
	}
	.elementor-812 .elementor-element.elementor-element-f68a1a7 .elementor-heading-title {
		font-size: clamp(21px, 2.2vw, 27px) !important;
		line-height: 1.24 !important;
	}
	.elementor-812 .mh-hero-cta {
		margin-top: 18px;
		padding: 13px 30px;
		font-size: 15.5px;
	}
	/* Espacio entre el logo y el panel. */
	.elementor-812 .elementor-element.elementor-element-7d2a3ad {
		margin-bottom: 6px;
	}
}

/* El titular del bloque del probador entraba en una sola linea muy larga. */
@media (min-width: 861px) {
	.elementor-812 .elementor-element.elementor-element-0e85897 .elementor-heading-title {
		max-width: 15ch;
	}
}

/* La cabecera vale para todo el sitio, no solo para la portada: el filete de
   marca al pie de la barra la cierra en cualquier pagina. */
.ehf-header .elementor-404 .elementor-element.elementor-element-22bf2a980::after,
header .elementor-404 .elementor-element.elementor-element-22bf2a980::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: linear-gradient(90deg,
		var(--mh-amarillo) 0 25%, var(--mh-celeste) 25% 50%,
		var(--mh-naranja) 50% 75%, var(--mh-verde) 75% 100%);
	opacity: .85;
}
.elementor-404 .elementor-element.elementor-element-22bf2a980 {
	position: relative;
}

/* Nota: se probo pintar el fondo del body de negro para acompañar la barra,
   pero eso ennegrecia los margenes laterales de Contacto, Productos y la Guia,
   donde el contenido no cubre todo el ancho. La barra ya lleva su propio color
   en la seccion, asi que el body queda como estaba.
   ------------------------------------------------------------------------ */

/* Encabezado principal de Productos: la pagina no tenia H1 y arrancaba
   directamente con las tarjetas de categoria. */
.elementor-398 .elementor-element.elementor-element-mhh1prod {
	padding: 26px 24px 6px;
}
.elementor-398 .elementor-element.elementor-element-mhh1prod .elementor-heading-title {
	position: relative;
	display: inline-block;
	padding-bottom: 16px;
}
.elementor-398 .elementor-element.elementor-element-mhh1prod .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 108px;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg,
		var(--mh-amarillo) 0 25%, var(--mh-celeste) 25% 50%,
		var(--mh-naranja) 50% 75%, var(--mh-verde) 75% 100%);
}
@media (max-width: 767px) {
	.elementor-398 .elementor-element.elementor-element-mhh1prod { padding: 20px 16px 4px; }
}

/* Redes del pie: tres circulos que se iluminan con el color de cada marca. */
footer .elementor-social-icons-wrapper .elementor-social-icon {
	background-color: rgba(255, 255, 255, .10) !important;
	transition: background-color .22s ease, transform .22s ease;
}
footer .elementor-social-icons-wrapper .elementor-social-icon svg {
	fill: #fff;
}
footer .elementor-social-icons-wrapper .elementor-social-icon:hover {
	transform: translateY(-3px);
}
footer .elementor-social-icons-wrapper .elementor-social-icon-instagram:hover {
	background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF) !important;
}
footer .elementor-social-icons-wrapper .elementor-social-icon-tiktok:hover {
	background-color: #000 !important;
	box-shadow: 0 0 0 2px #25F4EE inset;
}
footer .elementor-social-icons-wrapper .elementor-social-icon-facebook:hover {
	background-color: #1877F2 !important;
}
/* Area tactil suficiente en telefono. */
@media (max-width: 767px) {
	footer .elementor-social-icons-wrapper .elementor-social-icon {
		width: 44px;
		height: 44px;
	}
}