/* Fix responsive Inicio: hero desbordado en movil (auditoria 2026-08-26) */
@media (max-width: 600px) {
	.elementor-element-8fcc9e6 {
		max-width: 100%;
		overflow-x: hidden;
	}

	.elementor-element-8fcc9e6 .elementor-widget-heading,
	.elementor-element-8fcc9e6 .elementor-widget-text-editor {
		width: 100%;
		max-width: 100%;
	}

	.elementor-55 .elementor-element.elementor-element-00b28ee .elementor-heading-title,
	.elementor-55 .elementor-element.elementor-element-439ac83 .elementor-heading-title {
		font-size: 26px !important;
		line-height: 1.25 !important;
		white-space: normal !important;
		word-break: break-word !important;
	}

	.elementor-element-dc9916b p,
	.elementor-element-dbfb6bf p {
		font-size: 13px !important;
	}
}

@media (min-width: 601px) and (max-width: 767px) {
	.elementor-55 .elementor-element.elementor-element-00b28ee .elementor-heading-title,
	.elementor-55 .elementor-element.elementor-element-439ac83 .elementor-heading-title {
		font-size: 32px !important;
		white-space: normal !important;
		word-break: break-word !important;
	}
}

/* Fix hallazgo #1: fila de pills de confianza (elementor-element-94d3107) desborda
   en movil - es hermana del contenedor del hero, no hija, por eso las reglas de
   arriba no la alcanzan. Sin flex-wrap y con anchos fijos, las 5 pills (~650-700px
   combinadas) no caben en 375-428px. (auditoria 2026-08-26) */
@media (max-width: 767px) {
	.elementor-55 .elementor-element.elementor-element-94d3107 {
		flex-wrap: wrap !important;
		row-gap: 8px !important;
		padding-inline-start: 12px !important;
		padding-inline-end: 12px !important;
	}
}

@media (max-width: 480px) {
	.elementor-55 .elementor-element.elementor-element-bf7c34d,
	.elementor-55 .elementor-element.elementor-element-bcf78e7,
	.elementor-55 .elementor-element.elementor-element-ae85518,
	.elementor-55 .elementor-element.elementor-element-d2c3ba0,
	.elementor-55 .elementor-element.elementor-element-0ec1d56 {
		font-size: 11px !important;
		padding: 5px 10px !important;
		margin-right: 6px !important;
		margin-bottom: 6px !important;
	}
}

/* Refuerzo hallazgo #1: badge y parrafo del hero (dc9916b/dbfb6bf) truncados sin
   wrap en movil. El contenedor 8fcc9e6 es flex-direction:column con align-items:
   center, lo que dimensiona a los hijos por su contenido (no por el ancho del
   contenedor) salvo que se fuerce el stretch. !important para vencer cualquier
   regla de igual/mayor especificidad de Elementor. (auditoria 2026-08-26) */
@media (max-width: 767px) {
	.elementor-55 .elementor-element.elementor-element-8fcc9e6 {
		align-items: stretch !important;
	}
	.elementor-55 .elementor-element.elementor-element-dc9916b,
	.elementor-55 .elementor-element.elementor-element-dbfb6bf {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.elementor-element-dc9916b p,
	.elementor-element-dbfb6bf p {
		white-space: normal !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
	}
}

/* Fix hallazgo (2026-09-03): banner "Tienes un taller mecanico en Panama" y fila
   de Trust Badges (Talleres Verificados / Pago Seguro / Soporte 24-7 / Resenas
   Reales) desbordan en movil, generando scroll horizontal en toda la pagina.
   Causa raiz: ambos son contenedores flexbox atomicos de Elementor v4
   (elementor-element-64d264e clase e-511307e, y elementor-element-95e4b3d clase
   e-80a2be2) con flex-direction:row y sin flex-wrap; solo existe
   local-55-frontend-desktop.css generado (sin breakpoint movil), asi que la fila
   nunca se adapta a viewports angostos. */
@media (max-width: 767px) {
	/* Banner: texto arriba, boton "Registrar mi taller gratis" abajo a 100% */
	.elementor-55 .elementor-element.elementor-element-64d264e {
		flex-direction: column !important;
		align-items: stretch !important;
		width: calc(100% - 32px) !important;
		margin-inline-start: 16px !important;
		margin-inline-end: 16px !important;
		box-sizing: border-box !important;
		row-gap: 16px !important;
	}
	.elementor-55 .elementor-element.elementor-element-317018a {
		width: 100% !important;
		max-width: 100% !important;
	}
	.elementor-55 .elementor-element.elementor-element-317018a .elementor-button {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}

	/* Trust Badges: 4 tarjetas en fila -> grid 2x2. Se usa CSS Grid (no flex-wrap)
	   para que las 2 tarjetas de cada fila compartan siempre la misma altura,
	   sin importar que su texto de descripcion ocupe 1 o 2 lineas (ej.: "Revisamos
	   cada registro" vs "Transacciones protegidas" difieren en alto con flexbox +
	   align-items:center heredado del widget, haciendo que una tarjeta se vea mas
	   grande que su vecina). Grid con align-items:stretch (su valor por defecto)
	   iguala la altura de fila automaticamente. (hallazgo 2026-09-04) */
	.elementor-55 .elementor-element.elementor-element-95e4b3d {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		row-gap: 12px !important;
		column-gap: 12px !important;
		align-items: stretch !important;
	}
	.elementor-55 .elementor-element.elementor-element-a565596,
	.elementor-55 .elementor-element.elementor-element-d74e4ce,
	.elementor-55 .elementor-element.elementor-element-be12e98,
	.elementor-55 .elementor-element.elementor-element-6e98bcc {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		box-sizing: border-box !important;
	}
}

/* Fix hallazgo (2026-09-04): pastilla del badge superior del hero (bandera +
   "EL MARKETPLACE DE AUTOPARTES EN PANAMA", elementor-element-dc9916b) tiene
   padding:0 -- el texto solo esta separado del fondo/borde de la pastilla por
   el grosor del borde (3px), sin aire real entre letras y fondo. Confirmado
   con getComputedStyle en escritorio (1440px) y movil (390px): mismo padding
   0px en ambos, asi que NO es un problema exclusivo de movil (a diferencia de
   los demas hallazgos de este archivo) -- se corrige fuera de cualquier
   @media para que aplique en todos los anchos. */
.elementor-55 .elementor-element.elementor-element-dc9916b {
	padding: 8px 18px !important;
	box-sizing: border-box !important;
}