/**
 * Menu desplegable de movil: legibilidad.
 *
 * Lo que se corregia (medido a 390 px): el panel del burger media 348 px de alto y por
 * debajo se veia el contenido de la pagina, asi que el menu parecia recortado y flotando
 * sobre el hero. Ademas los items pintaban el fondo amarillo del kit en mas casos de los
 * debidos, sin separacion entre ellos.
 *
 * Estas reglas cuelgan de clases de Elementor (`.elementor-nav-menu--dropdown`), no del
 * tema: son las mismas en Elementor Pro con cualquier tema, y desaparecerian de forma
 * visible —no en silencio— si algun dia se dejara de usar el widget de menu.
 */

@media ( max-width: 1024px ) {

	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		max-height: calc(100vh - var(--na-mm-top, 70px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	}

	.elementor-nav-menu--dropdown .elementor-item {
		padding-top: 14px;
		padding-bottom: 14px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	}

	/* El indicador del tema es una flecha decorativa: en movil se gira para que se lea
	   como «esto abre algo», que es justo lo que ahora hace. */
	.elementor-nav-menu--dropdown .sub-arrow {
		margin-left: auto;
		opacity: 0.6;
	}

	/* El popup del mega menu ocupa la pantalla entera en movil y se desplaza dentro de si
	   mismo: sin esto hereda la altura del diseno de escritorio y deja parte del contenido
	   fuera, sin forma de llegar a el. */
	/* A pantalla completa: si el popup solo cubre parte del alto, por debajo asoma la
	   pagina y el mega menu se lee como un recuadro suelto. */
	.vamtam-header-mega-menu .dialog-message {
		min-height: 100vh;
		max-height: 100vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
	}

	/* Los enlaces son `inline-block`, asi que el separador solo llegaba hasta donde
	   terminaba el texto. */
	.vamtam-header-mega-menu .elementor-nav-menu li {
		display: block;
		width: 100%;
	}

	/* Las especies del mega menu de «Productos» son las pestanas de un widget `tabs`, y
	   en movil Elementor esconde la fila de pestanas (`.elementor-tabs-wrapper` medido a
	   0 px de alto) para pasar a modo acordeon con los titulos moviles, que este diseno no
	   trae. Resultado: solo se veia «Perros» y no habia forma de llegar a Gatos, Reptiles,
	   Peces, Aves ni Exoticos. Se devuelve la fila, en carrusel horizontal PROPIO para que
	   la pagina no gane scroll lateral. */
	.vamtam-header-mega-menu .elementor-tabs-wrapper {
		display: flex;
		/* Es un flex-item dentro del widget: sin esto se encoge a su contenido minimo
		   (medido: 51 px de 320) y solo asoma la primera pildora, cortada. */
		/* `!important` a proposito: la regla del tema para este wrapper tiene mas
		   especificidad (se midio `flex: 1 0 100%` ganando con el ancho encogido a 51 px
		   de 320). Es el unico sitio del modulo donde hace falta. */
		width: 100% !important;
		flex: 1 1 100% !important;
		min-width: 0;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		/* Hueco para el aspa de cerrar, que flota sobre esta misma fila. */
		padding-right: 56px;
	}

	/* Las pildoras estan disenadas para una fila de escritorio: sueltas ocupan todo el
	   ancho y en un movil solo cabria la primera, cortada. Se compactan. */
	.vamtam-header-mega-menu .elementor-tab-title {
		flex: 0 0 auto;
		display: block;
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 8px 16px;
		border-radius: 999px;
		font-size: 0.9rem;
		line-height: 1.2;
		white-space: nowrap;
	}

	/* El titulo movil del acordeon repetia la especie justo debajo de la fila de
	   pestanas: con la fila visible sobra. */
	.vamtam-header-mega-menu .elementor-tab-mobile-title {
		display: none !important;
	}

	/* ---- Layout del contenido de cada especie ----
	   El diseno es de escritorio: cuatro columnas en fila, una de ellas solo con una foto
	   decorativa. Apiladas en un movil dan una columna de 250 px dentro de 320 (medido),
	   con la foto comiendose 180 px de pantalla antes del boton «Ver todo». */

	.vamtam-header-mega-menu .elementor-container,
	.vamtam-header-mega-menu .elementor-column {
		width: 100%;
		max-width: 100%;
	}

	/* La seccion trae `padding: 30px 40px 30px 30px` del diseno de escritorio y cada
	   columna un borde izquierdo que ahi separa columnas y aqui solo dibuja una raya
	   suelta a la izquierda de la lista. */
	.vamtam-header-mega-menu .elementor-section {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 12px !important;
	}

	/* El `elementor-widget-wrap` es flex con `align-items: flex-start`: los widgets de menu
	   se quedaban en el ancho de su texto (88 px de 326, medido) y el separador de cada
	   enlace terminaba a media pantalla. */
	.vamtam-header-mega-menu .elementor-widget-wrap {
		border-left: 0 !important;
		padding-left: 0 !important;
		flex-direction: column !important;
		align-items: stretch !important;
	}

	/* Elementor fija el ancho de cada widget con su propia clase de ancho (medido: 88 px de
	   326 en las columnas de marcas). En una pantalla estrecha todos ocupan la fila. */
	.vamtam-header-mega-menu .elementor-widget-nav-menu,
	.vamtam-header-mega-menu .elementor-widget-heading,
	.vamtam-header-mega-menu .elementor-widget-button {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* La foto del perro/gato es decoracion: en escritorio equilibra la fila, en un movil
	   solo empuja los enlaces fuera de la pantalla. */
	.vamtam-header-mega-menu .elementor-widget-image {
		display: none;
	}

	/* Encabezados de grupo («Alimento», «Premios», «Otros»): se leen como etiqueta, no
	   como otro enlace mas de la lista. */
	.vamtam-header-mega-menu .elementor-widget-heading {
		margin-top: 18px;
		margin-bottom: 2px;
	}

	.vamtam-header-mega-menu .elementor-widget-heading .elementor-heading-title {
		font-size: 0.75rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		opacity: 0.55;
	}

	/* Objetivo tactil: 44 px de alto por enlace, con separador para no leerlos como un
	   bloque de texto corrido. */
	.vamtam-header-mega-menu .elementor-nav-menu .elementor-item {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 6px 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	}

	.vamtam-header-mega-menu .elementor-widget-button {
		margin-top: 20px;
	}

	.vamtam-header-mega-menu .elementor-widget-button .elementor-button {
		display: flex !important;
		justify-content: center;
		align-items: center;
		width: 100% !important;
		min-height: 46px;
		border: 1px solid currentColor;
		border-radius: 999px;
	}

	/* La aspa de cerrar medía menos de lo que un dedo acierta. */
	.vamtam-header-mega-menu .dialog-close-button {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}