/*
 * Pisomap (11-nov-2026): botón de menú del móvil y panel que abre.
 *
 * El menú es el widget «Nav Menu» de ElementsKit en la cabecera Elementor #9152.
 * Antes: botón de 45×29 px con borde gris y rayas de 1 px al 50 %, cierre con una «X»
 * de texto, enlaces a 12 px y un panel que entraba animando `left` en 0,6 s.
 *
 * Solo pantallas ≤1024 px (donde ElementsKit enseña el botón); el ordenador no cambia.
 * ElementsKit abre y cierra poniendo la clase `active`: aquí solo se cambia el aspecto
 * y la animación, no la lógica. Los selectores llevan `html body` y clases repetidas
 * para ganar a los de Elementor (post-9152.css) sin usar !important.
 */

@media (max-width: 1024px) {

	/* ---------- Botón hamburguesa ---------- */

	html body .ekit-wid-con button.elementskit-menu-hamburger.elementskit-menu-hamburger.elementskit-menu-toggler {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		/* Zona táctil de 44 px, cuadro visible de 40 px. */
		border: 2px solid transparent;
		border-radius: 12px;
		background-color: #f1f4f9;
		background-clip: padding-box;
		color: #181a20;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
		transition: background-color 0.15s ease;
	}

	html body .ekit-wid-con button.elementskit-menu-hamburger.elementskit-menu-hamburger.elementskit-menu-toggler:active {
		background-color: #e2e8f1;
	}

	html body .ekit-wid-con button.elementskit-menu-hamburger.elementskit-menu-hamburger.elementskit-menu-toggler:focus {
		outline: none;
	}

	html body .ekit-wid-con button.elementskit-menu-hamburger.elementskit-menu-hamburger.elementskit-menu-toggler:focus-visible {
		outline: 2px solid #2575fc;
		outline-offset: 1px;
	}

	html body .ekit-wid-con button.elementskit-menu-hamburger.elementskit-menu-hamburger.elementskit-menu-toggler .elementskit-menu-hamburger-icon,
	html body .ekit-wid-con button.elementskit-menu-hamburger.elementskit-menu-hamburger.elementskit-menu-toggler:hover .elementskit-menu-hamburger-icon {
		display: block;
		width: 20px;
		height: 2px;
		margin: 0;
		border-radius: 2px;
		background-color: #181a20;
	}

	/* ---------- Panel lateral ---------- */

	/* Se mueve con transform (lo hace la tarjeta gráfica, sin recalcular la página)
	   y cerrado queda oculto de verdad: sus enlaces no se pueden tabular. */
	html body .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements {
		left: 0;
		width: 86vw;
		max-width: 340px;
		background: #fff;
		box-shadow: 0 0 40px rgba(16, 24, 40, 0.18);
		overscroll-behavior: contain;
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		transform: translate3d(-100%, 0, 0);
		visibility: hidden;
		transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.3s;
	}

	html body .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements.active {
		transform: none;
		visibility: visible;
		transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
	}

	/* Fondo oscuro: aparece con un fundido en lugar de entrar deslizando. */
	html body .ekit-wid-con .elementskit-menu-overlay.elementskit-menu-offcanvas-elements {
		left: 0;
		background-color: rgba(16, 24, 40, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}

	html body .ekit-wid-con .elementskit-menu-overlay.elementskit-menu-offcanvas-elements.active {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease, visibility 0s;
	}

	/* Con el menú abierto, la página de detrás no se desplaza. */
	html:has(.ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements.active),
	html:has(.ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements.active) body {
		overflow: hidden;
	}

	/* ---------- Cabecera del panel y botón de cerrar ---------- */

	html body .ekit-wid-con .elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel.elementskit-nav-identity-panel {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 12px 14px;
		border-bottom: 1px solid #eef0f4;
	}

	html body .ekit-wid-con button.elementskit-menu-close.elementskit-menu-close.elementskit-menu-toggler {
		position: relative;
		float: none;
		box-sizing: border-box;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: #f1f4f9;
		color: #181a20;
		font-size: 0; /* esconde la «X» de texto; el aspa la dibujan ::before y ::after */
		line-height: 0;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
		transition: background-color 0.15s ease;
	}

	html body .ekit-wid-con button.elementskit-menu-close.elementskit-menu-close.elementskit-menu-toggler:hover {
		color: #181a20;
	}

	html body .ekit-wid-con button.elementskit-menu-close.elementskit-menu-close.elementskit-menu-toggler:active {
		background-color: #e2e8f1;
	}

	html body .ekit-wid-con button.elementskit-menu-close.elementskit-menu-close.elementskit-menu-toggler:focus {
		outline: none;
	}

	html body .ekit-wid-con button.elementskit-menu-close.elementskit-menu-close.elementskit-menu-toggler:focus-visible {
		outline: 2px solid #2575fc;
		outline-offset: 1px;
	}

	html body .ekit-wid-con button.elementskit-menu-close.elementskit-menu-close.elementskit-menu-toggler::before,
	html body .ekit-wid-con button.elementskit-menu-close.elementskit-menu-close.elementskit-menu-toggler::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background-color: currentColor;
	}

	html body .ekit-wid-con button.elementskit-menu-close.elementskit-menu-close.elementskit-menu-toggler::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	html body .ekit-wid-con button.elementskit-menu-close.elementskit-menu-close.elementskit-menu-toggler::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* ---------- Enlaces del panel ---------- */

	html body .elementor-widget-ekit-nav-menu .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li {
		border-bottom: 1px solid #eef0f4;
	}

	html body .elementor-widget-ekit-nav-menu .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 12px 20px;
		color: #181a20;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.15s ease;
	}

	html body .elementor-widget-ekit-nav-menu .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a:active {
		background-color: #f5f7fb;
	}

	html body .elementor-widget-ekit-nav-menu .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li.current-menu-item > a,
	html body .elementor-widget-ekit-nav-menu .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li.current-menu-ancestor > a {
		color: #2575fc;
		font-weight: 600;
	}

	/* Flecha del submenú: sin la cápsula con borde y con zona táctil de 44 px. */
	html body .elementor-widget-ekit-nav-menu .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements .elementskit-dropdown-has > a .elementskit-submenu-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: -8px -10px -8px auto;
		padding: 0;
		border: 0;
		border-radius: 50%;
		font-size: 13px;
		color: #181a20;
		transition: transform 0.2s ease;
	}

	html body .elementor-widget-ekit-nav-menu .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements .elementskit-dropdown-has > a:has(+ .elementskit-dropdown-open) .elementskit-submenu-indicator {
		transform: rotate(180deg);
	}

	/* Subapartados (p. ej. «Servicios»). */
	html body .elementor-widget-ekit-nav-menu .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements .elementskit-navbar-nav .elementskit-submenu-panel {
		padding: 0 0 8px;
		background: transparent;
	}

	html body .elementor-widget-ekit-nav-menu .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements .elementskit-navbar-nav .elementskit-submenu-panel > li > a {
		min-height: 44px;
		padding: 10px 20px 10px 32px;
		color: #475467;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.35;
	}
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	html body .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements,
	html body .ekit-wid-con .elementskit-menu-container.elementskit-menu-offcanvas-elements.active,
	html body .ekit-wid-con .elementskit-menu-overlay.elementskit-menu-offcanvas-elements,
	html body .ekit-wid-con .elementskit-menu-overlay.elementskit-menu-offcanvas-elements.active {
		transition: none;
	}
}