/* ==============================================================
   HUEMURA — Responsive Fixes (Mobile 375px / Tablet 768px)
   ==============================================================
   Problemas detectados y corregidos:
   1. HOME: .qodef-grid-inner con margin:-15px desborda el viewport
   2. HOME: Slider de productos (swiper slides) desborda
   3. ABOUT US: Widget Elementor e4edd51 con width fija de 1373px
   4. TRABAJA CON NOSOTROS: Tiles de Leaflet map desbordando
   5. Prevención global de scroll horizontal
   ============================================================== */


/* ==============================================================
   FIX GLOBAL: Prevenir overflow horizontal en mobile/tablet
   El body ya tiene overflow-x:hidden auto, pero algunos hijos 
   con negative margins generan desborde interno. Lo contenemos
   a nivel de #qodef-page-outer (wrapper principal del contenido).
   ============================================================== */
@media (max-width: 1024px) {

	/* Contenedor principal: recortar todo lo que desborde */
	#qodef-page-outer,
	#qodef-page-content,
	.qodef-content-grid {
		overflow-x: hidden !important;
	}

	/* FIX 1: HOME — .qodef-grid-inner tiene margin: 0 -15px (patrón grid)
	   que empuja el contenido 15px fuera del viewport a cada lado.
	   Neutralizamos el margin negativo en mobile/tablet y usamos padding. */
	.qodef-grid-inner {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.qodef-page-content-section.qodef-col--12 {
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* FIX 2: HOME — Slider de productos (swiper)
	   El .swiper-wrapper de Gizmos/WooCommerce puede contener slides 
	   más anchos que el viewport. Aseguramos overflow:hidden en padres. */
	.qodef-woo-shortcode,
	.qodef-woo-shortcode .qodef-grid-inner,
	.elementor-widget-gizmos_core_product_list .qodef-grid-inner {
		overflow: hidden !important;
		max-width: 100% !important;
	}

	/* FIX 3: ABOUT US — Widget Elementor con width-initial (e4edd51)
	   Elementor asigna max-width y width fijos al widget. 
	   NO tocamos Elementor: solo forzamos max-width:100% en el contenedor
	   que tiene la clase elementor-widget__width-initial. */
	.elementor-widget__width-initial,
	.elementor-widget__width-initial > .elementor-widget-container {
		max-width: 100% !important;
		width: 100% !important;
	}

	/* FIX 4: TRABAJA CON NOSOTROS — Mapa Leaflet tiles overflow
	   Los tiles del mapa se renderizan fuera del contenedor. 
	   El contenedor .leaflet-container ya tiene overflow:hidden por defecto
	   pero su wrapper padre (Elementor) no lo restringe. */
	.leaflet-container,
	[class*="leaflet"] {
		max-width: 100% !important;
	}
	.leaflet-proxy {
		display: none !important;
	}

	/* FIX 5: Elementor containers — asegurar que ningún contenedor 
	   exceda el viewport en mobile */
	.elementor-column-wrap,
	.elementor-widget-wrap,
	.elementor-container {
		max-width: 100% !important;
	}
}


/* ==============================================================
   MOBILE SPECIFIC (≤ 480px)
   ============================================================== */
@media (max-width: 480px) {

	/* Home: banners "Marca Comercial" / "Marca Exclusiva" — full width */
	.elementor-widget-image img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Formulario de Trabaja con Nosotros — asegurar ancho completo */
	.huemura-trabaja-form-card,
	.huemura-trabaja-postform {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Reclamos form: padding más compacto en mobile */
	.huemura-rf-section {
		padding: 20px 16px;
	}
}


/* ==============================================================
   TABLET SPECIFIC (481px – 1024px)
   ============================================================== */
@media (min-width: 481px) and (max-width: 1024px) {

	/* About Us: el widget de texto con width-initial se ve bien
	   pero asegurar que no desborde el container de 768px */
	.elementor-element-e4edd51 {
		max-width: 100% !important;
		width: auto !important;
	}
	.elementor-element-e4edd51 .elementor-widget-container {
		max-width: 100% !important;
		width: auto !important;
	}
}