/* ============================================================
   TWL · CORRECCIONES MÓVIL (overflow / recorte)
   El sitio tiene body{overflow-x:hidden}, así que lo que se desborda
   NO genera scroll lateral: se RECORTA en silencio. Aquí se corrige el
   contenido que no cabe (no se oculta) en iPhone/Android/tablet.
   Causa raíz común: flex/grid items con min-width:auto que no encogen
   por debajo del ancho intrínseco del texto y empujan a sus hermanos
   (toggles, sidebars) fuera del contenedor.
   ============================================================ */

/* ---------- #1 (ALTA) FAQ de servicios: la pregunta no encoge y empuja
   el botón +/− fuera de pantalla. Sistémico en 7 plantillas. ---------- */
.wr-faq__q, .rp-faq__q, .mf-faq__q, .cc-faq__q,
.tb-faq__q, .twl-dc-faq__q, .twl-hub-faq__q,
.wl-b2b-faq__q, .wl-b2b-faq__header, .twl-b2b-faq__q {
	min-width: 0;
	overflow-wrap: anywhere;
	white-space: normal !important; /* el nowrap recortaba el TEXTO de la pregunta (no solo empujaba el toggle) */
}
/* Comparador Diamond Cut: cabeceros de columna (HERRAMIENTA, etc.) con nowrap se recortan */
.twl-dc-versus__category { white-space: normal; overflow-wrap: anywhere; }
/* el toggle no debe encogerse a 0 ni empujarse */
.wr-faq__toggle, .rp-faq__toggle, .mf-faq__toggle, .cc-faq__toggle,
.tb-faq__toggle, .twl-dc-faq__toggle, .twl-hub-faq__toggle {
	flex-shrink: 0;
}

/* ---------- #2 (ALTA) Sidebar de blog/landings de ciudad: la columna
   lateral se computa a ~640px y se sale +283px. ---------- */
.twl-sp__sidebar-section,
.twl-sp__sidebar-post-title,
.twl-sp__sidebar-inner > * {
	min-width: 0;
	overflow-wrap: anywhere;
}
@media (max-width: 960px) {
	.twl-sp__sidebar-inner { grid-template-columns: minmax(0, 1fr) !important; }
	.twl-sp__sidebar, .twl-sp__sidebar-inner, .twl-sp__sidebar-section { max-width: 100%; }
}

/* ---------- #3 (MEDIA) Timeline "proceso" (pintura/pulido): al colapsar
   a 1 col se añade padding-left:3rem sin box-sizing → se sale +40px. ---------- */
@media (max-width: 1024px) {
	.rp-proceso__step, .mf-proceso__step {
		box-sizing: border-box !important;
		max-width: 100%;
	}
	.rp-proceso__card, .mf-proceso__card,
	.rp-proceso__card--right, .mf-proceso__card--right,
	.rp-proceso__step > *, .mf-proceso__step > * {
		max-width: 100%;
		min-width: 0;
	}
	.rp-proceso__card video, .mf-proceso__card video,
	.rp-proceso__card img, .mf-proceso__card img { max-width: 100%; height: auto; }
	/* El reproductor trx_addons (.autoparts_resize, absolute con ancho fijo) calcula
	   mal el left del vídeo en móvil y lo desplaza a la derecha → lo contenemos al
	   media (que sí cabe en el viewport). */
	.rp-proceso__card-media, .mf-proceso__card-media,
	.rp-proceso__card-media .autoparts_resize, .mf-proceso__card-media .autoparts_resize {
		overflow: hidden;
		max-width: 100%;
	}
	/* CAUSA REAL: las cards alternadas llevan transform:translateX(60px) (offset de
	   diseño desktop) que en 1 columna las empuja fuera del viewport. Sin offset en móvil. */
	.rp-proceso__card--right, .rp-proceso__card--left,
	.mf-proceso__card--right, .mf-proceso__card--left { transform: none !important; }
}

/* ---------- #4 (MEDIA) Rueda decorativa SVG del hero recortada ---------- */
.twl-vh__bg { overflow: hidden; }

/* ---------- #4b (ALTA) Acordeón "Tipos de daños" de la home (.twl-dz):
   el título (h3) y la descripción (p) tienen white-space:nowrap (estética
   desktop en una línea). En móvil no rompen y se RECORTAN por el overflow:hidden
   del item. Que rompan líneas y encojan. ---------- */
@media (max-width: 768px) {
	.twl-dz__head,
	.twl-dz__h,
	.twl-dz__h h3,
	.twl-dz__h p,
	.twl-dz__num { white-space: normal !important; }
	.twl-dz__h { min-width: 0; overflow-wrap: anywhere; }
	.twl-dz__head { align-items: start; }
}

/* ---------- #4c (ALTA) Home mobile: "Tipos de danos" debe leerse como
   titulo -> llanta escaneada -> accordion. El layout base subia la imagen
   antes de todo el bloque de contenido. ---------- */
@media (max-width: 1024px) {
	.twl-dz__content { display: contents; }
	.twl-dz__eyebrow { order: -3; justify-self: center; text-align: center; }
	.twl-dz__title { order: -2; justify-self: center; text-align: center; max-width: 12ch; margin-left: auto !important; margin-right: auto !important; }
	.twl-dz__stage { order: -1; width: 100%; }
	.twl-dz__list { order: 0; width: 100%; }
}

/* ---------- #4d (MEDIA) Antes/despues mobile: las tres metricas
   OEM/CNC/Robot deben caber en una fila. ---------- */
@media (max-width: 1024px) {
	.twl-ba__stats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .45rem;
	}
	.twl-ba__stat {
		min-width: 0 !important;
		padding: .65rem .38rem !important;
		border-radius: 9px;
		text-align: center;
	}
	.twl-ba .twl-ba__stat b { font-size: clamp(.86rem, 5vw, 1.05rem); }
	.twl-ba .twl-ba__stat span {
		font-size: clamp(.48rem, 2.6vw, .58rem);
		letter-spacing: .055em;
		line-height: 1.2;
	}
}

/* ---------- #5 (BAJA) Calculadora B2B se sale +17px ---------- */
#wl-calc-split, #wl-calc-split > * {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

/* ---------- #6 (BAJA) Menú móvil: email de contacto cortado ---------- */
.twl-mobile-scroll a[href^="mailto:"],
.twl-mobile-scroll .twl-mobile-contact,
.twl-mobile-scroll .contact-info,
.twl-mobile-scroll [class*="email"] {
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* ---------- #7 (BAJA) Barra de confianza fija (≈150px) tapa el pie en
   móvil; el body solo reserva 72px. Reservamos espacio donde existe. ---------- */
@media (max-width: 768px) {
	body:has(.twl-trust-bar) { padding-bottom: 160px !important; }
}

/* ---------- Salvaguarda general: media nunca desborda en móvil ---------- */
@media (max-width: 768px) {
	.page_content_wrap img,
	.page_content_wrap video,
	.page_content_wrap iframe,
	.post_content img,
	.post_content video,
	.post_content iframe { max-width: 100%; height: auto; }
}

/* ---------- #8 Marquesina home: fondo negro + atomos animados en desktop
   y mobile. Se carga tarde para vencer custom.css/custom.min.css. ---------- */
.twl-marquee {
	background: #050505 !important;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.twl-marquee::before {
	background:
		radial-gradient(800px 180px at 50% 50%, rgba(255,106,0,.10), transparent 62%),
		linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.18) 18%, rgba(5,5,5,.18) 82%, rgba(5,5,5,.96) 100%) !important;
	z-index: 1;
}
.twl-marquee > .twl-particles-canvas {
	opacity: .38 !important;
	z-index: 0 !important;
}
.twl-marquee__track {
	position: relative;
	z-index: 2;
}