/**
 * mobile.css - Ajustes EXCLUSIVOS de móvil (y tablet donde hace falta).
 *
 * REGLA DE ORO DE ESTE ARCHIVO:
 *   Todo va dentro de @media (max-width: 767px) [móvil] o del rango de tablet.
 *   NADA aquí puede afectar a escritorio (>=1025px). El diseño de PC queda
 *   EXACTAMENTE igual: este archivo no contiene ninguna regla global.
 *
 * Contenido:
 *   1. Cabecera móvil limpia: logo a la izquierda + hamburguesa a la derecha.
 *   2. Menú hamburguesa nativo de Elementor (menú editable "Móvil") + submenú
 *      "Modelos" desplegable al tocar.
 *   3. Anti scroll horizontal y retoques responsive de secciones/fichas.
 *
 * El diseño de escritorio del header sigue usando el mega-menú custom
 * (.zontes-mega) y el nav "principal"; en móvil esos se ocultan vía Elementor
 * (hide_mobile) y se muestra .zontes-mnav (este menú móvil editable).
 */

/* =========================================================================
 * 1 + 2) CABECERA Y MENÚ MÓVIL  (solo <= 767px)
 * ========================================================================= */
@media (max-width: 767px) {

	/* --- La barra del header en una sola fila baja y cómoda --- */
	.zontes-header-overlay,
	.zontes-header-overlay > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		min-height: 64px !important;
		height: auto !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
		gap: 8px !important;
	}

	/* La zona izquierda (mega + "Solicita una prueba") queda vacía en móvil
	   porque sus hijos están ocultos: que no ocupe ni genere hueco. */
	.zontes-hd-left {
		display: none !important;
	}

	/* Logo: a la izquierda y con tamaño contenido. */
	.zontes-hd-logo {
		order: 0;
		flex: 0 0 auto !important;
		width: auto !important;
		margin: 0 !important;
		justify-content: flex-start !important;
	}
	.zontes-hd-logo .zontes-logo img,
	.zontes-hd-logo img {
		height: 38px !important;
		width: auto !important;
		max-width: 60vw !important;
	}

	/* Zona derecha: contiene la hamburguesa (menú móvil) + el teléfono. */
	.zontes-hd-right,
	.zontes-hd-right > .e-con-inner {
		order: 1;
		flex: 0 0 auto !important;
		width: auto !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 10px !important;
		margin: 0 !important;
	}

	/* --- Teléfono de contacto (sustituye al toggle día/noche en móvil) ---
	   El toggle se oculta vía Elementor (hide_mobile) y este enlace tel: se
	   muestra solo aquí (hide_desktop + hide_tablet). Ver
	   dev/patch_mobile_phone.php. */
	.zontes-hd-phone-w {
		width: auto !important;
	}
	.zontes-hd-phone {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 34px;
		padding: 0 10px;
		border: 1px solid rgba(255, 255, 255, .35);
		border-radius: 8px;
		color: #FFFFFF !important;
		text-decoration: none;
		white-space: nowrap;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
	}
	.zontes-hd-phone:hover,
	.zontes-hd-phone:focus,
	.zontes-hd-phone:focus-visible {
		border-color: #FFFFFF;
		color: #FFFFFF !important;
	}
	.zontes-hd-phone__ico {
		width: 16px;
		height: 16px;
		fill: currentColor;
		flex: 0 0 auto;
	}

	/* Pantallas muy estrechas (<=360px): solo el icono, para no comprimir el
	   logo ni la hamburguesa. El número sigue en el href tel:. */
	@media (max-width: 360px) {
		.zontes-hd-phone {
			padding: 0;
			width: 34px;
			justify-content: center;
		}
		.zontes-hd-phone__num {
			display: none;
		}
	}

	/* --- Botón hamburguesa (icono) --- */
	.zontes-mnav {
		width: auto !important;
	}
	.zontes-mnav .elementor-menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;              /* zona de toque cómoda (>=44px) */
		border: 1px solid rgba(255, 255, 255, .35);
		border-radius: 8px;
		color: #FFFFFF !important;
		background: transparent;
	}
	.zontes-mnav .elementor-menu-toggle svg,
	.zontes-mnav .elementor-menu-toggle i {
		fill: #FFFFFF !important;
		color: #FFFFFF !important;
		font-size: 26px;
		width: 26px;
		height: 26px;
	}

	/* Neutralizamos los ancestros posicionados entre la hamburguesa y el header
	   para que el panel absoluto se resuelva contra la CABECERA (sticky) y pueda
	   ocupar todo el ancho, en vez de anclarse a la zona derecha y salirse. */
	.zontes-hd-right,
	.zontes-hd-right > .e-con-inner,
	.zontes-mnav,
	.zontes-mnav .elementor-nav-menu__container,
	.zontes-mnav .elementor-widget-container {
		position: static !important;
	}

	/* --- Panel desplegable del menú móvil ---
	 * Elementor lo posiciona absoluto bajo el header. Al neutralizar los
	 * ancestros, top:100%/left:0/right:0 se refieren al header => ancho completo,
	 * fondo sólido oscuro, contraste alto, scroll si hay muchos ítems y z-index
	 * por encima de todo. */
	/* Cuando nuestro JS gobierna el toggle (.bz-mnav-js), la visibilidad del
	   PANEL depende SOLO de .is-open, no del JS de Elementor. Así se evita el
	   "se abre y se cierra solo". Sin JS, no añadimos bz-mnav-js y manda
	   Elementor (mejora progresiva).

	   OJO: apuntamos SOLO al panel de primer nivel, que lleva las DOS clases
	   .elementor-nav-menu--dropdown Y .elementor-nav-menu__container. El submenú
	   "Modelos" es un <ul class="sub-menu elementor-nav-menu--dropdown"> (sin
	   __container): así NO lo forzamos abierto y conserva su acordeón. */
	.zontes-mnav.bz-mnav-js .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		display: none !important;
	}
	/* Estado ABIERTO: además de mostrarlo, anulamos el colapso que Elementor
	   deja preparado (max-height:0 / transform / opacity para su animación),
	   que si no mantiene el panel "minimizado" aunque esté en display:block. */
	.zontes-mnav.bz-mnav-js.is-open .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		display: block !important;
		height: auto !important;
		max-height: calc(100vh - 64px) !important;
		overflow-y: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	/* POSICIÓN A PRUEBA DE iOS: `position: fixed` (relativo al viewport) en vez de
	   `absolute; top:100%`. El `absolute` dependía de la cabecera fija como
	   offsetParent y iOS Safari calculaba mal el `top:100%`, dejando el panel
	   fuera de pantalla. Como NINGÚN ancestro tiene transform, `fixed` es
	   idéntico en iOS y Android. El `top` exacto (borde inferior real de la
	   cabecera) lo fija el JS; 64px es solo un fallback. */
	.zontes-mnav .elementor-nav-menu--dropdown {
		position: fixed !important;
		top: 64px !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		margin-top: 0 !important;
		background-color: #0D0E10 !important;
		box-shadow: 0 24px 40px rgba(0, 0, 0, .5);
		border-top: 1px solid rgba(255, 255, 255, .08);
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 9999 !important;
	}
	.zontes-mnav .elementor-nav-menu--dropdown a.elementor-item {
		color: #FFFFFF !important;
		padding: 16px 22px !important;
		font-size: 16px !important;
		border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
		line-height: 1.3 !important;
	}
	.zontes-mnav .elementor-nav-menu--dropdown a.elementor-item:hover,
	.zontes-mnav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
		color: #6ea8ff !important;
		background: rgba(255, 255, 255, .04) !important;
	}
	/* Submenú "Modelos" -> categorías: en FLUJO normal (acordeón) para que
	   empuje el resto de ítems hacia abajo en vez de superponerse. */
	.zontes-mnav .elementor-nav-menu--dropdown .sub-menu {
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		transform: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		background: rgba(255, 255, 255, .03) !important;
	}
	/* Los ítems de submenú usan la clase .elementor-sub-item (no .elementor-item).
	   Contraste alto y sangrado para distinguirlos del nivel superior. */
	.zontes-mnav .elementor-nav-menu--dropdown a.elementor-sub-item {
		color: #FFFFFF !important;
		padding: 14px 22px 14px 40px !important;
		font-size: 15px !important;
		border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
		line-height: 1.3 !important;
	}
	.zontes-mnav .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
	.zontes-mnav .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
		color: #6ea8ff !important;
		background: rgba(255, 255, 255, .05) !important;
	}
	/* Flechita de expandir submenú: zona de toque cómoda (44px) y bien visible.
	   El item padre reserva sitio a la derecha para la flecha. */
	.zontes-mnav .elementor-item.has-submenu {
		position: relative;
		padding-right: 60px !important;
	}
	.zontes-mnav .sub-arrow {
		position: absolute !important;
		top: 0;
		right: 0;
		width: 56px !important;
		height: 100% !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		color: #FFFFFF !important;
		border-left: 1px solid rgba(255, 255, 255, .08);
	}
	.zontes-mnav .sub-arrow svg,
	.zontes-mnav .sub-arrow i {
		width: 16px !important;
		height: 16px !important;
		fill: #FFFFFF !important;
		color: #FFFFFF !important;
		transition: transform .2s ease;
	}
	/* Gira la flecha cuando el submenú está abierto. */
	.zontes-mnav .elementor-item.has-submenu[aria-expanded="true"] .sub-arrow svg {
		transform: rotate(180deg);
	}

	/* Blindaje: la cabecera nunca genera scroll horizontal. */
	.zontes-header-overlay {
		max-width: 100vw !important;
		overflow-x: clip;
	}
}

/* =========================================================================
 * 3) RESPONSIVE GENERAL MÓVIL — retoques de secciones/fichas (<= 767px)
 *    Todo scoped a clases .zontes-* concretas; nada global.
 * ========================================================================= */
@media (max-width: 767px) {

	/* Garantía extra anti scroll horizontal a nivel de página. Usamos `clip`
	   (no `hidden`) para NO crear un contenedor de scroll que rompa el header
	   sticky de Elementor Pro (decisión ya documentada del proyecto). */
	body {
		overflow-x: clip;
	}

	/* Las tarjetas del mega (grid oculto) no deben forzar ancho si asomaran. */
	.zontes-mega__panel {
		display: none !important;
	}

	/* Barra verde de datos de la ficha: 2x2 real y centrada. */
	.zontes-databar__item {
		flex: 1 1 42% !important;
	}

	/* Tabla de ficha técnica: que respire y no se salga. */
	.zontes-spectable__row,
	.zontes-spectable__row > .e-con-inner {
		gap: 10px !important;
	}
	.zontes-spectable__v .elementor-heading-title {
		font-size: 14px;
	}

	/* Hero de modelo: imagen y texto apilados con aire correcto. */
	.zontes-hero125__row,
	.zontes-hero125__row > .e-con-inner {
		flex-direction: column !important;
		text-align: center;
	}
	.zontes-hero125__img img {
		max-width: 80% !important;
		margin: 0 auto;
	}

	/* Botonera del hero de la ficha (Contactar / Llámanos / Ver ficha):
	   en columna y a todo el ancho para que nada se desborde ni se apriete. */
	.zontes-hero125__btns,
	.zontes-hero125__btns > .e-con-inner {
		flex-direction: column !important;
		flex-wrap: wrap;
		width: 100%;
		align-items: stretch !important;
	}
	.zontes-hero125__btns .elementor-widget-button,
	.zontes-hero125__btns .elementor-button {
		width: 100%;
	}
	.zontes-hero125__btns .elementor-button {
		display: block;
		text-align: center;
	}

	/* Titulares grandes de los bloques de contenido de la ficha (se maquetan
	   con tamaños de escritorio 34-48px): se acotan en móvil sin tocar cada
	   moto una a una. */
	.zontes-greenblock__head .elementor-heading-title {
		font-size: clamp(26px, 8vw, 38px) !important;
	}
	.zontes-mosaic-wrap > .elementor-widget-heading .elementor-heading-title,
	.zontes-product .elementor-widget-heading .elementor-heading-title {
		overflow-wrap: break-word;
	}

	/* Filtro de categorías del archivo de modelos: que envuelva centrado
	   en vez de desbordar en horizontal. */
	.zontes-modelos-filter,
	.zontes-modelos-filter > .e-con-inner {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 8px !important;
	}

	/* Tabla de ficha técnica: los valores largos parten línea, no desbordan. */
	.zontes-spectable__row .elementor-heading-title {
		overflow-wrap: anywhere;
	}

	/* Sección de contacto global (footer): el teléfono y el título respiran. */
	.zontes-contact {
		scroll-margin-top: 72px;
	}

	/* El botón flotante de WhatsApp no debe tapar el botón de enviar del
	   formulario: en las cajas de formulario dejamos margen inferior extra. */
	.zontes-contact__formbox {
		margin-bottom: 8px;
	}
}

/* =========================================================================
 * 4) REJILLAS DE MOTOS/CATEGORÍAS: 1 POR FILA EN MÓVIL (<= 767px)
 *    Los Loop Grid de Elementor (home "Nuestra gama" con tarjetas de
 *    categoría .zontes-card, y archivo de modelos con tarjetas .zontes-card-moto)
 *    muestran 2 columnas en móvil y las cajitas quedan apretadas. Forzamos
 *    1 sola columna. Se apunta al CONTENEDOR del loop que contiene nuestras
 *    tarjetas, para no afectar a ningún otro grid de la página.
 * ========================================================================= */
@media (max-width: 767px) {
	.elementor-loop-container:has(.zontes-card),
	.elementor-loop-container:has(.zontes-card-moto),
	.elementor-grid:has(.zontes-card),
	.elementor-grid:has(.zontes-card-moto) {
		grid-template-columns: 1fr !important;
	}
}

/* =========================================================================
 * TABLET (768px - 1024px) — solo si el header de escritorio se aprieta.
 * Se mantiene el layout de escritorio; solo evitamos solapes de textos.
 * ========================================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
	/* El menú móvil no aparece en tablet (hide_tablet). Nada que forzar aquí
	   por ahora: el header de escritorio cabe. Reservado para ajustes finos. */
	.zontes-header-overlay {
		max-width: 100vw;
	}
}