/* Estilos Personalizados Código Gráfico */
	#header_superior > *{ gap: 1em; }
		#header_superior > * > *{ width: auto !important; }
			#header_superior > * > * > *{ padding: 0; }
		#header_superior #header_superior_logo{ flex-shrink: 0; }
			#header_superior #header_superior_logo .navbar-brand{ display: inline-flex; }
				#header_superior #header_superior_logo .navbar-brand img{ width: 100%; }
				#header_superior #header_superior_logo .navbar-brand img.mobile-logo{ display: none; }
		#header_superior #header_superior_menu{ flex-grow: 1; }
			#header_superior #header_superior_menu i.ha-menu-icon{ width: auto; height: auto; }
				#header_superior #header_superior_menu i.ha-menu-icon:before{ font-size: 1.65em; }
				#header_superior #header_superior_menu .ha-menu-close i:before { font-size: 1.65em; font-weight: 600; }
		#header_superior #header_superior_buscador{ flex-shrink: 0; }
			#header_superior #header_superior_buscador .search-form-wrapper > a{ margin: 0; padding: 0; }	

#header_superior{ height: 6.5rem !important; padding: 1rem 3rem !important;*/ }
#banner_home{ height: calc(100dvh - 6.5rem) !important; }
	#banner_home > * > *{ height: 100% !important; }
		#banner_home > * > * > *{ height: 100% !important; }
			#banner_home > * > * > * > *{ height: 100% !important; }
				sr7-module{ max-height: calc(100dvh - 6.5rem) !important; }

.search-form-box .search-button i:before{ font-size: 1.65em; }
.search-form-wrapper.active-form .search-close{ font-size: 3.5em; }
.search-form-box .search-button i:hover{ color: var(--e-global-color-accent); }
.search-form-wrapper.active-form .search-close:hover{ color: var(--e-global-color-accent); }
.search-form-wrapper .search-form-icon i:hover{ color: var(--e-global-color-accent); }

@media all and (width <= 1024px) {
	#header_superior #header_superior_logo .navbar-brand img.default-logo{ display: none; }
	#header_superior #header_superior_logo .navbar-brand img.mobile-logo{ display: block; }
	.header_menu_principal #ha-megamenu-menu-header.active{ max-width: 100dvw; width: 100dvw; padding: 2em; }
	.header_menu_principal #ha-megamenu-menu-header.active .ha-nav-logo{ padding-left: 15px; }	
	#header_superior > *{ gap: 1.6em; }
	#header_superior #header_superior_menu i.ha-menu-icon:before,
	#header_superior #header_superior_menu .ha-menu-close i:before{ font-size: 2.5em; }
}

@media all and (min-width: 1025px) {
	.menu-lang-mobile-only{ display: none; }
}

@media all and (width <= 768px) {
	.header_menu_principal #ha-megamenu-menu-header.active{ padding: 1em; }
}



.form-wrapper{ width: 100dvw; z-index: 99999; }

.header_menu_principal .ha-menu-container{ height: 91px; }
.header_menu_principal .ha-dropdown.ha-submenu-panel{ top: 87px; }

@media all and (width <= 1024px) {
	.elementor-section-full_width{ width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
	#SR7_5_1-35::before{ background: rgba(247,243,235,.88) !important; }
	#SR7_5_1-35-1{
		transform: translateY(-128px) !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		gap: 14px !important;
	}
	#SR7_5_1-35-5{ position: static !important; }
	#SR7_5_1-35-21{ position: static !important; width: 75% !important; top: auto !important; }
}
@media all and (width <= 767px) {
	#SR7_5_1-35-1{ transform: translate(-45px, -96px) !important; align-items: center !important; gap: 10px !important; }
	#SR7_5_1-35-21{ width: 90% !important; font-size: 15px !important; line-height: 19px !important; text-align: center !important; }
	#SR7_5_1-35-5{ text-align: center !important; }
	#SR7_5_1-35::before{ background: rgba(247,243,235,.88) !important; }
}

#SR7_5_1-35-0{ display: none !important; }
@keyframes amrFadeGradient { from { opacity: 0; } to { opacity: 1; } }
#SR7_5_1-35::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(90deg, rgba(247,243,235,.92) 0%, rgba(247,243,235,.65) 25%, rgba(247,243,235,0) 40%);
	pointer-events: none;
	opacity: 0;
	animation: amrFadeGradient 1.1s ease-out 0.3s forwards;
}

@media all and (width <= 767px) {
	.elementor-element-0c524f2 > .elementor-container{ flex-direction: column !important; }
	.elementor-element-0c524f2 .elementor-column{ width: 100% !important; max-width: 100% !important; padding-bottom: 20px !important; }
	.elementor-element-b72265b .litho-primary-title{ font-size: 32px !important; line-height: 38px !important; }
}

@media all and (width <= 767px) {
    sr7-arrow{ display: none !important; }
}
@media all and (min-width: 1025px) {
	#SR7_5_1-35-5{ line-height: 90px !important; }
	#SR7_5_1-35-21{ top: 195px !important; }
}

/* Footer: alinear logo con el resto del footer en movil */
@media all and (width <= 767px) {
	.elementor-element-20417254 > .elementor-widget-wrap{ margin-left: 34px !important; }
}

/* Footer: apilar columnas en tablet (quedaban en L por anchos inconsistentes) */
@media all and (min-width: 768px) and (width <= 1024px) {
	.elementor-75546 .elementor-column{ width: 100% !important; }
}

/* Espaciado home movil: separar bloques de texto que quedaban pegados al contenido anterior */
@media all and (width <= 767px) {
	.elementor-element-91340de{ padding-top: 40px !important; }
}

/* Banner slides 2 y 3: mismo tratamiento responsive que slide 1 (capa Shape rota, centrado tablet/movil). Sin degradado (rompia SR7 en carga fria a 768px). */
#SR7_5_1-71-0, #SR7_5_1-73-0{ display: none !important; }

@media all and (min-width: 1025px) {
	#SR7_5_1-71-5, #SR7_5_1-73-5{ line-height: 90px !important; }
	#SR7_5_1-71-21, #SR7_5_1-73-21{ top: 195px !important; }
}

@media all and (width <= 1024px) {
	/* Slide 2: alineado a la derecha (como en escritorio) y titulo en blanco (SR7 no traia color propio en tablet) */
	#SR7_5_1-71-1{
		transform: translate(15px, -128px) !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: flex-end !important;
		gap: 14px !important;
	}
	#SR7_5_1-71-5{ position: static !important; text-align: right !important; color: rgb(255,255,255) !important; }
	#SR7_5_1-71-21{ position: static !important; width: 75% !important; top: auto !important; text-align: right !important; }

	/* Slide 3: igual que el slide 1 (sin desplazamiento horizontal) */
	#SR7_5_1-73-1{
		transform: translateY(-128px) !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: flex-start !important;
		gap: 14px !important;
	}
	#SR7_5_1-73-5{ position: static !important; text-align: left !important; }
	#SR7_5_1-73-21{ position: static !important; width: 75% !important; top: auto !important; text-align: left !important; }
}
@media all and (width <= 767px) {
	#SR7_5_1-71-1{ transform: translate(58px, -96px) !important; align-items: center !important; gap: 10px !important; }
	#SR7_5_1-73-1{ transform: translate(-45px, -96px) !important; align-items: center !important; gap: 10px !important; }
	#SR7_5_1-71-21, #SR7_5_1-73-21{ width: 90% !important; font-size: 15px !important; line-height: 19px !important; text-align: center !important; }
	#SR7_5_1-71-5, #SR7_5_1-73-5{ text-align: center !important; }
}

/* Puntos de navegacion del banner en blanco solo cuando el slide 2 esta activo (fondo oscuro) */
#SR7_5_1[data-current="71"] .sr7-bullet-inner{ background: rgb(255,255,255) !important; }

/* Carrusel de logos "Nuestros Clientes": columna con margen asimetrico descentraba el carrusel en movil; 23 puntos de paginacion eran demasiados, se muestran solo 5 */
@media all and (width <= 767px) {
	.elementor-element-7124fb7 > .elementor-widget-wrap{ margin: 0 !important; }
	.elementor-element-2fda0bf .swiper-pagination-bullet{ display: none !important; }
	.elementor-element-2fda0bf .swiper-pagination-bullet:nth-child(-n+5){ display: inline-block !important; }
}

/* Banner 3: fondo blanco con transparencia solo en tablet, igual que el banner 1 */
@media all and (min-width: 768px) and (width <= 1024px) {
	#SR7_5_1-73::before{
		content: "";
		position: absolute;
		inset: 0;
		z-index: 3;
		background: rgba(247,243,235,.88);
		pointer-events: none;
	}
}


/* Transicion de entrada del banner: la caja completa (no solo el degradado) se revela con un fundido, para evitar el salto brusco de negro a contenido completo al terminar de cargar Slider Revolution */
#SR7_5_1{ position: relative !important; }
@keyframes amrModuleFadeIn { from { opacity: 1; } to { opacity: 0; } }
#SR7_5_1::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 6;
	background: #141413;
	pointer-events: none;
	opacity: 1;
	animation: amrModuleFadeIn 0.6s ease-out forwards;
}


/* Blog - tarjetas de tamaño uniforme: recorta titulo y extracto a un numero fijo de lineas */
.elementor-widget-archive-posts .elementor-post__title{
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}
.elementor-widget-archive-posts .elementor-post__excerpt p{
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 4.5em;
}


/* Header: en tablet/movil el header tenia un ancho basado en 100vw que en escritorio con scrollbar reservado se desalinea unos px del borde izquierdo real. Se fuerza al ancho real del viewport. */
#header_superior{ width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }


/* Blog archivo: filtro oscuro semitransparente sobre las imagenes para que la categoria resalte */
.elementor-element-ae17680 .elementor-post__thumbnail{ position:relative; }
.elementor-element-ae17680 .elementor-post__thumbnail::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.35);
	pointer-events:none;
}

/* Blog archivo: categoria sin bordes redondeados y texto centrado exactamente en su recuadro */
.elementor-element-ae17680 .elementor-post__badge{
	border-radius:0 !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	text-align:center !important;
	z-index:2;
}

/* Blog archivo: hover de titulo y "leer mas" en el dorado de acento del sitio */
.elementor-element-ae17680 .elementor-post__title a:hover,
.elementor-element-ae17680 .elementor-post__read-more:hover{
	color:#E6AF5D !important;
}


/* Entrada individual: imagen principal a ancho completo, justo debajo del header */
body.single-post .blog-image{
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
body.single-post .blog-image img{ width:100%; height:520px; object-fit:cover; }
@media all and (width <= 767px) {
	body.single-post .blog-image img{ height:340px; }
}

/* Entrada individual: ocultar el autor (se deja fecha y categoria) */
body.single-post .litho-post-details-meta li:nth-child(3){ display:none !important; }

/* Entrada individual: prev/next alineados a los dos extremos, mismo ancho que el texto */
body.single-post .single-post-navigation{
	display:flex !important;
	justify-content:space-between !important;
	align-items:center !important;
	width:100% !important;
	max-width:none !important;
}



/* Entrada individual: related posts sin bordes redondeados, misma estetica que el archivo del blog */
body.single-post .blog-post{
	border-radius:0 !important;
	box-shadow:none !important;
	border:1px solid #211F1B !important;
}
body.single-post .blog-post-images img{ border-radius:0 !important; }

/* Entrada individual: hover en el dorado de acento del sitio */
body.single-post .single-post-title a:hover,
body.single-post .blog-post-content h3 a:hover,
body.single-post .blog-nav-link a:hover,
body.single-post .entry-content a:hover,
body.single-post .litho-post-details-meta a:hover{
	color:#E6AF5D !important;
}


/* Entrada individual: corregir alineacion y separacion de iconos sociales + prev/next */
body.single-post .single-post-navigation{ margin:0 !important; padding:15px 0 !important; }
body.single-post .tag-like-social-wrapper > .container{ align-items:stretch !important; }
body.single-post .tag-like-social-wrapper .row{ margin-top:0 !important; margin-bottom:0 !important; width:1170px !important; max-width:100% !important; }
@media all and (width <= 1024px) { body.single-post .tag-like-social-wrapper .row{ width:100% !important; } }
body.single-post .tag-like-social-wrapper .row > *{ margin-top:0 !important; }
body.single-post .elements-social{ margin:0 0 10px 0 !important; padding:0 !important; }
body.single-post .tag-like-social-wrapper{ padding-top:15px !important; }

/* Entrada individual: iconos de fecha/categoria en gris */
body.single-post .litho-post-details-meta i{ color:#918A7A !important; }

/* Entrada individual: related posts con la misma estetica que el archivo del blog (imagen con filtro oscuro + categoria) */
body.single-post .blog-post-images{ position:relative; }
body.single-post .blog-post-images::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.35);
	pointer-events:none;
}
body.single-post .related-post-badge{
	position:absolute;
	top:20px;
	left:20px;
	z-index:2;
	background:#E6AF5D;
	color:#fff;
	font-size:12px;
	text-transform:uppercase;
	padding:.6em 1.2em;
	border-radius:0;
}

/* Todos los hover en el dorado de acento del sitio */
body.single-post .litho-content-left-part a:hover,
body.single-post #secondary a:hover,
body.single-post .tag-like-social-wrapper a:hover,
body.single-post .litho-related-posts-wrap a:hover,
.elementor-element-ae17680 a:hover{
	color:#E6AF5D !important;
}

/* Entrada individual: texto "Siguiente" alineado a la derecha */
body.single-post .blog-nav-link-next{ text-align:right !important; }

/* Entrada individual: acercar "Entradas relacionadas" a las tarjetas */
body.single-post .litho-related-posts-wrap{ padding-top:60px !important; }

/* Entrada individual: tarjetas relacionadas con la misma proporcion de imagen que el archivo del blog */
body.single-post .blog-post-images{ aspect-ratio:100/66 !important; overflow:hidden; }
body.single-post .blog-post-images img{ width:100% !important; height:100% !important; object-fit:cover !important; }


/* Entrada individual: centrar las tarjetas de "Entradas relacionadas" cuando hay menos tarjetas que columnas (el grid masonry las deja pegadas a la izquierda) */
body.single-post .litho-related-posts-wrap ul.row{
	display:flex !important;
	flex-wrap:wrap !important;
	justify-content:center !important;
	position:relative !important;
	height:auto !important;
}
body.single-post .litho-related-posts-wrap ul.row > li.grid-item{
	position:relative !important;
	left:auto !important;
	top:auto !important;
}

/* Entrada individual: tipografia de las tarjetas relacionadas igual que las tarjetas del archivo del blog */
body.single-post .litho-related-posts-wrap .entry-title{
	font-size:20px !important;
	font-weight:600 !important;
	color:#211F1B !important;
	line-height:26px !important;
}
body.single-post .litho-related-posts-wrap .post-date{
	font-size:12px !important;
	color:#918A7A !important;
	text-transform:uppercase !important;
}
body.single-post .litho-related-posts-wrap .post-details{ padding:20px 30px !important; }
/* Buscador: el icono SVG nativo del bloque se duplicaba con el icono de fuente Feather que el tema añade por defecto a todos los botones de busqueda */
.widget_search .wp-block-search__button::before{ content:none !important; }

/* Entrada individual: mismo espacio arriba y abajo del bloque de entradas relacionadas */
body.single-post .litho-related-posts-wrap{ padding-bottom:60px !important; }

/* Entrada individual: quitar la animacion de zoom/oscurecido + flecha que trae el tema por defecto al pasar el cursor sobre las tarjetas relacionadas */
body.single-post .litho-related-posts-wrap .blog-post:hover .blog-post-images img{ opacity:1 !important; transform:none !important; }
body.single-post .litho-related-posts-wrap .hover-icon{ display:none !important; }

/* Tarjetas de noticias (blog y entradas relacionadas): animacion "shrink" al pasar el cursor, en vez del zoom de imagen */
body.single-post .litho-related-posts-wrap .blog-post,
.elementor-element-ae17680 .elementor-post__card{
	transition:transform 0.3s ease !important;
}
body.single-post .litho-related-posts-wrap .blog-post:hover,
.elementor-element-ae17680 article.elementor-post:hover .elementor-post__card{
	transform:scale(0.97) !important;
}

/* Buscador: el boton del icono (posicionado en absoluto) quedaba flotando fuera del campo de texto porque el contenedor no tenia position:relative */
.widget_search .wp-block-search__inside-wrapper{ position:relative !important; }
/* Sidebar (Buscar/Entradas recientes/Comentarios recientes/Archivos/Categorias), tanto en el archivo del blog como en la entrada individual: los titulos heredaban el H2 gigante del tema pensado para contenido, no para widgets */
.elementor-widget-sidebar .wp-block-heading, #secondary .wp-block-heading,
.elementor-widget-sidebar .wp-block-search__label, #secondary .wp-block-search__label{
	font-size:20px !important;
	line-height:1.3 !important;
	font-weight:700 !important;
	color:#211F1B !important;
	margin-bottom:15px !important;
}

/* Sidebar: todos los enlaces (entradas recientes, archivos, categorias) en negro de la paleta, sin subrayado, y en amarillo de la paleta al pasar el cursor */
.elementor-widget-sidebar .widget a, #secondary .widget a{
	color:#211F1B !important;
	text-decoration:none !important;
}
.elementor-widget-sidebar .widget a:hover, #secondary .widget a:hover{ color:#E6AF5D !important; }

/* Sidebar: icono del buscador en negro de la paleta, amarillo al pasar el cursor */
.elementor-widget-sidebar .wp-block-search__button, #secondary .wp-block-search__button{ color:#211F1B !important; }
.elementor-widget-sidebar .wp-block-search__button:hover, #secondary .wp-block-search__button:hover{ color:#E6AF5D !important; }
/* Blog archivo: mas separacion entre la columna de noticias y la del sidebar (el gap nativo de Elementor rompia el ancho de las columnas) */
@media all and (width >= 1025px) {
	.elementor-element-e4beff0{ padding-right:50px !important; }
}
/* Sidebar: quitar el fondo gris del boton del buscador, icono limpio igual que el buscador del header */
.elementor-widget-sidebar .wp-block-search__button, #secondary .wp-block-search__button{
	background:transparent !important;
	border-radius:0 !important;
}
/* Blog archivo: breadcrumb "Home" + nombre de la pagina en la misma linea y centrado (IDs regenerados tras recrear el widget) */
.elementor-element-d4dc947 .elementor-widget-wrap{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; justify-content:center !important; }
.elementor-element-62d6baf{ width:auto !important; flex:0 0 auto !important; }
.elementor-element-2c6be70{ width:auto !important; margin:0 !important; }
.elementor-element-2c6be70 .elementor-widget-container{ margin:0 !important; }
.elementor-element-2c6be70 p{ margin:0 !important; line-height:20px !important; }
/* Blog archivo: en movil/tablet el widget de tarjetas (elementor-element-ae17680) queda encogido por flexbox (flex-shrink) a un ancho fijo menor al disponible, dejando un hueco vacio a la derecha; el ancho real se fuerza por JS en funciones.js (ajustar_ancho_archivo_blog) porque los porcentajes CSS no resuelven bien aqui */
@media all and (width <= 767px) {
	.elementor-element-ae17680 .elementor-posts-container{ grid-template-columns:1fr !important; width:100% !important; }
}
@media all and (width >= 768px) and (width <= 1024px) {
	.elementor-element-ae17680 .elementor-posts-container{ grid-template-columns:1fr 1fr !important; width:100% !important; gap:30px 20px !important; }
}
/* Contacto: el formulario "Datos de contacto" (Contact Form 7) usaba el atributo nativo size=40 del input y una etiqueta <label> en inline-block, por lo que los campos se encogian a su ancho de contenido en vez de ocupar la columna */
.elementor-element-5390e14 .wpcf7-form label{ display:block !important; width:100% !important; }
.elementor-element-5390e14 .wpcf7-form-control-wrap{ display:block !important; width:100% !important; }
.elementor-element-5390e14 .wpcf7-form input[type="text"],
.elementor-element-5390e14 .wpcf7-form input[type="email"],
.elementor-element-5390e14 .wpcf7-form textarea{ width:100% !important; }
/* Blog archivo: el punto separador del breadcrumb se veia mas grande que el del resto del sitio */
.elementor-element-2c6be70 .bread-sep-icon{ font-size:6px !important; vertical-align:middle !important; margin-right:6px !important; }
/* Blog archivo: centrar la fila del breadcrumb (Home + Blog-News). No hay control nativo en Elementor para centrar columnas que no ocupan el 100% del ancho de la fila. */
.elementor-element-8a7a2ca .elementor-container{ justify-content:center !important; }
.elementor-element-8a7a2ca .elementor-container > .elementor-column{ width:auto !important; max-width:none !important; flex-grow:0 !important; flex-shrink:0 !important; flex-basis:auto !important; }
/* Blog archivo: la regla nativa de Elementor para recortar la imagen segun la proporcion de la tarjeta (elementor-has-item-ratio) no esta en el CSS cargado, así que la imagen se estira en vez de recortarse (object-fit:fill por defecto) */
.elementor-element-ae17680 .elementor-post__thumbnail img{ object-fit:cover !important; }
/* Fin Estilos Personalizados Código Gráfico */

/* Empresa: color del numero animado en la seccion de estadisticas. Elementor no genera CSS para el control 'number_color_color' de estos 3 counters (bug verificado: title_color y el color del sufijo si se generaron correctamente en post-87.css, pero no hay ninguna regla para .elementor-counter-number-wrapper especifica de estos widgets), por lo que el numero cae al color global oscuro por defecto. */
.elementor-element-96d40b1 .elementor-counter-number-wrapper,
.elementor-element-dc71656 .elementor-counter-number-wrapper,
.elementor-element-9bae182 .elementor-counter-number-wrapper{ color:#E6AF5D !important; }


/* Contacto: color hover del enlace 'Politicas de Privacidad' dentro del checkbox de aceptacion (texto HTML libre del campo 'acceptance' de Elementor Pro Forms; no existe control nativo de color para enlaces embebidos en ese campo). Usa el mismo dorado de acento del kit global (#E6AF5D) que ya se usa en el resto de la web para estados hover (breadcrumb, contadores). */
.elementor-element-d547334 .elementor-field-type-acceptance a:hover,
.elementor-element-24c085c .elementor-field-type-acceptance a:hover{ color:#E6AF5D !important; }


/* Empresa: seccion CTA final 'Listo para darle forma a tu proyecto'. Elementor no genera la regla de color para title_color ni litho_secondary_title_color_color de este widget litho-heading (mismo bug ya visto: ajuste guardado correctamente, verificado en el editor, mas de una republicacion y un vaciado completo de cache, pero la regla de color nunca aparece en el CSS generado). */
.elementor-element-9485a7c .litho-primary-title{ color:#FFFFFF !important; }
.elementor-element-9485a7c .litho-secondary-title{ color:#E6AF5D !important; }


/* Popup Bienvenida: la columna de la imagen (izquierda) no tiene widgets propios (solo imagen de fondo), asi que en tablet/movil, al apilarse las columnas, se queda sin alto porque Elementor no genero la regla min-height para esos breakpoints (ajuste guardado correctamente en el editor, verificado inspeccionando el CSS generado). Sin esto la imagen desaparece (alto 0) en tablet y movil. */
@media(max-width:1024px){
.elementor-element-92f8763{ min-height:260px !important; }
}
@media(max-width:767px){
.elementor-element-92f8763{ min-height:200px !important; }
}


/* Popup Bienvenida: color del titulo principal. Elementor no genero la regla de color para title_color de este widget litho-heading (mismo bug ya documentado: ajuste guardado correctamente y verificado en el editor, pero sin efecto tras republicar). Mismo negro de marca (#211F1B) usado en el resto de la web. */
.elementor-element-ea4d7d4 .litho-primary-title{ color:#211F1B !important; }


/* Contacto: columna con la foto (junto al formulario de contacto) no tiene widgets propios (es una imagen de fondo de la columna), asi que en tablet/movil, al apilarse las columnas, se queda sin alto porque Elementor no genero la regla min-height para esos breakpoints (mismo bug ya documentado en el popup; ajuste guardado correctamente en el editor). Sin esto la imagen desaparece (alto 0) en tablet y movil. */
@media(max-width:1024px){
.elementor-element-0dd7040{ min-height:360px !important; }
}
@media(max-width:767px){
.elementor-element-0dd7040{ min-height:260px !important; }
}


/* Home: tarjetas de 'Ultimas Noticias' (widget posts, skin cards). La imagen no recorta con object-fit:cover (queda en 'fill' con su alto natural, ignorando el contenedor de proporcion fija que si genera Elementor), asi que cada tarjeta salia con una altura distinta segun las proporciones de cada foto. */
.elementor-element-9b2cbb7 .elementor-post__thumbnail img{ object-fit:cover !important; width:100% !important; height:100% !important; }


/* Contacto: separacion entre la columna de la imagen y el formulario. El sistema nativo de 'espacio entre columnas' de Elementor genera el hueco como padding interno de cada columna, lo cual no crea separacion visible cuando una columna no tiene contenido propio (aqui es solo una imagen de fondo que cubre toda la caja, ignorando ese padding). Verificado con y sin la opcion nativa: el gap medido siempre da 0px, en escritorio y en tablet. */
/* Columnas imagen (0dd7040) y formulario (5390e14) de Contacto: ancho fijo via calc() sobre el ancho real del contenedor.
   Se evita depender de los controles nativos de ancho/margen de Elementor (bug recurrente: el valor se guarda en el editor pero no siempre se regenera en el CSS publicado) y de JS (que aplicaba el ancho con un frame de retraso).
   Los porcentajes + calc() se resuelven de forma nativa por el navegador en cada render, sin parpadeo y sin depender de la cache de Elementor. */
@media(min-width:1025px){
.elementor-element-51c7abe > .elementor-container{ flex-wrap:nowrap !important; }
.elementor-element-0dd7040{ width:calc(48% - 20px) !important; max-width:calc(48% - 20px) !important; flex-shrink:0 !important; margin-right:40px !important; }
.elementor-element-5390e14{ width:calc(52% - 20px) !important; max-width:calc(52% - 20px) !important; flex-shrink:0 !important; }
}
@media(min-width:768px) and (max-width:1024px){
.elementor-element-51c7abe > .elementor-container{ flex-wrap:nowrap !important; }
.elementor-element-0dd7040{ width:calc(38% - 16px) !important; max-width:calc(38% - 16px) !important; flex-shrink:0 !important; margin-right:32px !important; }
.elementor-element-5390e14{ width:calc(62% - 16px) !important; max-width:calc(62% - 16px) !important; flex-shrink:0 !important; }
}
@media(max-width:767px){
.elementor-element-0dd7040{ width:100% !important; max-width:100% !important; margin-right:0 !important; margin-bottom:28px !important; }
.elementor-element-5390e14{ width:100% !important; max-width:100% !important; }
}
/* Anula cualquier margen que el control nativo de Elementor (Avanzado > Margen) pudiera volver a aplicar sobre la columna de la imagen */
.elementor-element-0dd7040 > .elementor-element-populated{ margin:0 !important; }
.elementor-element-5390e14 > .elementor-element-populated{ margin:0 !important; }


/* Entrada individual: sombra en las tarjetas de 'Entradas relacionadas', igual que la usada en las tarjetas de la pagina de archivo de Blog. Es markup nativo del tema (litho-related-posts-wrap), no un widget de Elementor, por lo que no hay control nativo para esto. */
.litho-related-posts-wrap .blog-post{ box-shadow: rgba(0,0,0,0.15) 0px 0px 10px 0px !important; }


/* Empresa: tarjetas de 'Nuestro proceso' (widget image-box) - el contenedor de la imagen no ocupaba el ancho de la tarjeta, dejando una tira vertical estrecha */
.elementor-element-c61182a .elementor-image-box-img, .elementor-element-e59a9a2 .elementor-image-box-img, .elementor-element-8809792 .elementor-image-box-img, .elementor-element-ceba38f .elementor-image-box-img{ width:100% !important; }
.elementor-element-c61182a .elementor-image-box-img img, .elementor-element-e59a9a2 .elementor-image-box-img img, .elementor-element-8809792 .elementor-image-box-img img, .elementor-element-ceba38f .elementor-image-box-img img{ width:100% !important; object-fit:cover !important; }

/* Empresa: paneles de proceso (2 secciones x 2 columnas). Fondo fijo + overlay negro de la paleta, SIN degradado (el usuario pidio quitarlo). Texto blanco con sombra como respaldo de contraste. */
.elementor-element-9543471, .elementor-element-d83c17b, .elementor-element-4b312ec, .elementor-element-e0b58b4{ text-align:center !important; }
.elementor-element-9543471 .elementor-column-wrap, .elementor-element-d83c17b .elementor-column-wrap, .elementor-element-4b312ec .elementor-column-wrap, .elementor-element-e0b58b4 .elementor-column-wrap{ justify-content:center !important; }
.elementor-element-9543471 .elementor-widget-wrap, .elementor-element-d83c17b .elementor-widget-wrap, .elementor-element-4b312ec .elementor-widget-wrap, .elementor-element-e0b58b4 .elementor-widget-wrap{ align-items:center !important; }
.elementor-element-9543471 .elementor-widget-text-editor p, .elementor-element-d83c17b .elementor-widget-text-editor p, .elementor-element-4b312ec .elementor-widget-text-editor p, .elementor-element-e0b58b4 .elementor-widget-text-editor p{ max-width:520px; margin-left:auto !important; margin-right:auto !important; }
.elementor-element-9543471 .elementor-widget-text-editor, .elementor-element-d83c17b .elementor-widget-text-editor, .elementor-element-4b312ec .elementor-widget-text-editor, .elementor-element-e0b58b4 .elementor-widget-text-editor{ margin-top:22px !important; }
/* background-attachment:fixed no es fiable en moviles */
@media(max-width:767px){
.elementor-element-9543471, .elementor-element-d83c17b, .elementor-element-4b312ec, .elementor-element-e0b58b4{ background-attachment:scroll !important; }
}

/* Empresa: contador de estadisticas (30+/10/100%) - el wrapper del numero es flex sin justify-content, quedaba pegado a la izquierda en vez de centrado con el texto de abajo */
.elementor-element-70a6760 .elementor-counter-number-wrapper{ justify-content:center !important; }
.elementor-element-70a6760 .elementor-counter-number-prefix, .elementor-element-70a6760 .elementor-counter-number-suffix{ flex-grow:0 !important; }

/* Empresa: 4 secciones full-width independientes (Diseno/Corte/Acabado/Control), fondo fijo a nivel de SECCION (asi el full-bleed edge-to-edge funciona igual que en el resto del sitio - un fondo a nivel de columna no se estira fuera del ancho boxed del contenido). */
.elementor-element-ba87468, .elementor-element-e14c672, .elementor-element-ac51bec, .elementor-element-1956012{ text-align:center !important; }
.elementor-element-ba87468 .elementor-column-wrap, .elementor-element-e14c672 .elementor-column-wrap, .elementor-element-ac51bec .elementor-column-wrap, .elementor-element-1956012 .elementor-column-wrap{ justify-content:center !important; }
.elementor-element-ba87468 .elementor-widget-wrap, .elementor-element-e14c672 .elementor-widget-wrap, .elementor-element-ac51bec .elementor-widget-wrap, .elementor-element-1956012 .elementor-widget-wrap{ align-items:center !important; }
.elementor-element-ba87468 .elementor-widget-text-editor p, .elementor-element-e14c672 .elementor-widget-text-editor p, .elementor-element-ac51bec .elementor-widget-text-editor p, .elementor-element-1956012 .elementor-widget-text-editor p{ max-width:520px; margin-left:auto !important; margin-right:auto !important; }
.elementor-element-ba87468 .elementor-widget-text-editor, .elementor-element-e14c672 .elementor-widget-text-editor, .elementor-element-ac51bec .elementor-widget-text-editor, .elementor-element-1956012 .elementor-widget-text-editor{ margin-top:22px !important; }
/* background-attachment:fixed no es fiable en moviles */
@media(max-width:767px){
.elementor-element-ba87468, .elementor-element-e14c672, .elementor-element-ac51bec, .elementor-element-1956012{ background-attachment:scroll !important; }
}
/* Tablet: cuadricula 2x2 mediante float en vez de columnas, para conservar el fondo full-bleed a nivel de seccion en desktop/movil. Las secciones son hermanas normales en el flujo del documento; al flotarlas al 50% se acomodan solas en 2 filas de 2. */
@media(min-width:768px) and (max-width:1024px){
.elementor-element-ba87468, .elementor-element-e14c672, .elementor-element-ac51bec, .elementor-element-1956012{ float:left; width:50%; box-sizing:border-box; }
.elementor-element-8c2f371{ overflow:hidden; }
.elementor-element-b3310ce{ clear:both; }
}

/* Empresa: CTA "Listo para darle forma a tu idea" (seccion 31b1dc2) - en tablet y movil el texto debe ir primero y la imagen despues del texto (orden invertido respecto a desktop, donde la imagen esta a la izquierda) */
@media(max-width:1024px){
.elementor-element-31b1dc2 .elementor-element-9cfc803{ order:2; }
.elementor-element-31b1dc2 .elementor-element-bda8644{ order:1; }
}

/* Empresa: CTA "Listo para darle forma a tu idea" (seccion 31b1dc2) - en tablet/movil el texto quedaba pegado a los bordes (solo 15px del padding nativo de columna) y el boton sin separacion respecto al final de la seccion. Se pide 30px de margen a los lados y abajo, igual que se ve en el preview de tablet del editor de Elementor. */
@media(max-width:1024px){
.elementor-element-31b1dc2 .elementor-element-bda8644 > .elementor-widget-wrap{ padding:0 30px 30px !important; }
}
/* Empresa: la seccion 31b1dc2 tiene padding-bottom:70px nativo (pensado para el layout de escritorio con las columnas lado a lado). Al apilarse en tablet/movil con la imagen ahora al final (orden invertido), ese padding queda como una barra solida del color de fondo de la seccion debajo de la foto. Se quita solo el padding inferior en ese rango, el superior (70px, da aire al texto) se mantiene. */
@media(max-width:1024px){
.elementor-element-31b1dc2{ padding-bottom:0 !important; }
}

/* Empresa: en TABLET (768-1024px) las columnas de texto de "Listo para darle forma a tu idea" (bda8644) y "Las personas detras de cada pieza" (c02d3a8) se apilaban debajo/encima de su columna de imagen (que si pasa a 100%) pero se quedaban con el ancho de escritorio (50% y 42% respectivamente) en vez de pasar a 100% -- el texto quedaba comprimido en la mitad/menos del ancho real disponible, con overflow visible dando la falsa sensacion de que ocupaba todo el ancho. Se fuerza 100% explicito en ambas columnas de cada seccion para ese rango. */
@media(min-width:768px) and (max-width:1024px){
.elementor-element-bda8644, .elementor-element-9cfc803, .elementor-element-c02d3a8, .elementor-element-c61ec9e{ width:100% !important; flex-basis:100% !important; }
}

/* Footer: en TABLET (768-1024px) las columnas de texto (Menu 7fbc6457, Informacion c84248a, Contactanos 2df8d073) tienen un margin-top nativo de Elementor en PORCENTAJE (10%, 10%, 5% respectivamente) sobre .elementor-element-populated -- al ser porcentaje del ancho de la propia columna (mucho mas ancha en tablet que en movil), el hueco entre columnas queda desproporcionado (~69px) comparado con movil (~34px), aunque el valor "10%" sea el mismo numero en ambos breakpoints. Se fija a un valor en px consistente con el espaciado de movil. */
@media(min-width:768px) and (max-width:1024px){
.elementor-element-7fbc6457 > .elementor-element-populated, .elementor-element-c84248a > .elementor-element-populated, .elementor-element-2df8d073 > .elementor-element-populated{ margin-top:32px !important; }
}


/* Punto 8: galeria de producto, carrusel de miniaturas (Essential Addons + Swiper). En tablet
   (768-1024px) el widget calcula mal cuantas miniaturas completas caben en el contenedor y
   siempre deja una parcialmente recortada en un borde (bug del propio widget, no arreglable
   de forma fiable por JS porque el widget reposiciona el carrusel constantemente por su cuenta
   via autoplay). En vez de perseguir su logica interna, se disimula con un degradado en los
   bordes para que el recorte se vea como un efecto intencional en vez de un fallo visual.
   Solo en tablet, que es donde el usuario detecto el problema. */
@media(min-width:768px) and (max-width:1024px){
.product_image_slider__thumbs{
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 22px, black calc(100% - 22px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, black 22px, black calc(100% - 22px), transparent 100%);
}
}


/* Ficha de producto (plantilla FICHA DE PRODUCTO, todos los productos): las secciones internas "ancho completo" de Acabados y Sistemas de Fijacion usan margenes negativos calculados para estirarse al ancho del VIEWPORT, no de su columna. Funciona bien en desktop y movil, pero en tablet (columna al 50%) el calculo se desborda y se superpone con la galeria de imagenes de la izquierda. Se anula el estiramiento solo en el rango tablet. */
@media(min-width:768px) and (max-width:1024px){
.elementor-element-a444fe1, .elementor-element-13bc3fa{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  left:0 !important;
}
}


/* Menu desplegable de "Productos" (y cualquier otro item con submenu) en escritorio: a peticion
   del cliente, se anade un margen de gracia para que no se cierre al mover el cursor hacia el
   panel, controlado por JS (ver funciones.js, activar_menu_desplegable_persistente). Esta regla
   fuerza el panel visible con !important mientras el JS mantiene la clase activa, para que gane
   sin importar el mecanismo interno del widget. Solo en escritorio, el menu movil no se toca. */
@media (min-width:1025px){
.ha-dropdown-has.menu-forzado-abierto > .ha-dropdown{
	opacity:1 !important;
	visibility:visible !important;
	pointer-events:auto !important;
}
}


/* Color de seleccion de texto en todo el sitio: amarillo/dorado "Enfasis" de la paleta de
   marca (#E6AF5D), a peticion del cliente. Texto en el color "Principal" de la paleta para
   que se lea bien sobre el fondo dorado. */
::selection{
	background-color:#E6AF5D;
	color:#332F2C;
}
::-moz-selection{
	background-color:#E6AF5D;
	color:#332F2C;
}