/*
 * Disenium Animated Hamburger Menu
 * Autor: Disenium
 *
 * La geometría y la secuencia visual reproducen la interacción de referencia:
 * https://codepen.io/karlovidek/pen/aNYWKE/
 */

.disenium-hamburger-menu {
	--disenium-ahm-close-color: #6295ca;
	position: relative;
	display: inline-block;
	width: 42px;
	height: 42px;
	font-family: "Noto Sans", sans-serif;
	line-height: 1;
}

.disenium-hamburger__trigger,
.disisenium-hamburger__close,
.disenium-hamburger__close {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.disenium-hamburger__trigger {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	z-index: 333;
	overflow: visible;
}

.disenium-hamburger__trigger:focus,
.disenium-hamburger__close:focus {
	outline: none;
}

.disenium-hamburger__trigger:focus-visible,
.disenium-hamburger__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.disenium-hamburger__trigger-bar {
	display: block;
	width: 100%;
	height: 4px;
	margin-bottom: 6px;
	background-color: #fff;
	transform: rotate(-45deg);
	position: relative;
	transform-origin: center center;
	will-change: transform;
}

.disenium-hamburger__trigger-bar::before,
.disenium-hamburger__close-bar::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	width: 0;
	height: 100%;
	transition: all .3s cubic-bezier(.55,0,.1,1);
}

.disenium-hamburger__trigger:hover .disenium-hamburger__trigger-bar::before,
.disenium-hamburger__close:hover .disenium-hamburger__close-bar::before {
	width: 100%;
}

.disenium-hamburger__trigger-bar.top {
	width: 50%;
}

.disenium-hamburger__trigger-bar.middle::before {
	left: auto;
	right: 0;
}

.disenium-hamburger__trigger-bar.bottom {
	width: 50%;
	margin-left: 50%;
}

.disenium-hamburger__overlay {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	z-index: 99999;
}

.disenium-hamburger__overlay.is-visible {
	visibility: visible;
	pointer-events: auto;
}

.disenium-hamburger__inner,
.disenium-hamburger__menu-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.disenium-hamburger__inner {
	z-index: 20;
	overflow: hidden;
}

/*
 * El Pen original fue construido sobre un lienzo 320 × 568.
 *
 * En vez de deformar esa geometría según el aspect-ratio del dispositivo,
 * creamos un stage que mantiene SIEMPRE 320:568 y lo escalamos como "cover".
 * De esta forma los porcentajes y movimientos originales vuelven a coincidir
 * exactamente también en móviles altos y tablets.
 */
.disenium-hamburger__bg-stage {
	--disenium-ahm-reference-ratio: 0.5633802816901408; /* 320 / 568 */

	position: absolute;
	left: 50%;
	top: 50%;

	width: max(
		100vw,
		calc(100vh * var(--disenium-ahm-reference-ratio))
	);
	width: max(
		100vw,
		calc(100dvh * var(--disenium-ahm-reference-ratio))
	);

	height: max(
		100vh,
		calc(100vw / var(--disenium-ahm-reference-ratio))
	);
	height: max(
		100dvh,
		calc(100vw / var(--disenium-ahm-reference-ratio))
	);

	transform: translate3d(-50%, -50%, 0);
	transform-origin: center center;
	pointer-events: none;
	z-index: 1;
	overflow: visible;
}

.disenium-hamburger__menu-container {
	display: flex;
	align-items: center;
	z-index: 2;
}

.disenium-hamburger__menu {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 20%;
	list-style: none;
	visibility: hidden;
}

.disenium-hamburger__menu,
.disenium-hamburger__menu ul {
	list-style: none;
}

.disenium-hamburger__menu ul {
	margin: 0;
	padding: 4px 0 0 1.25em;
}

.disenium-hamburger__menu li {
	display: block;
	margin: 0;
	padding: 0;
	text-align: left;
}

.disenium-hamburger__menu > li {
	padding: 15px 0;
}

.disenium-hamburger__menu ul li {
	padding: 5px 0;
}

.disenium-hamburger__menu a {
	display: inline-block;
	position: relative;
	padding: 10px 0;
	color: #222;
	font-family: "Noto Sans", sans-serif;
	text-decoration: none;
	line-height: 1.35;
}

.disenium-hamburger__menu a:hover,
.disenium-hamburger__menu a:focus {
	color: #222;
	text-decoration: none;
}

.disenium-hamburger__menu a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 18px;
	height: 4px;
	opacity: 0;
	background-color: #222;
	transform: translateX(100px);
	transition: all .3s cubic-bezier(.55,0,.1,1);
}

.disenium-hamburger__menu a:hover::before,
.disenium-hamburger__menu a:focus-visible::before {
	opacity: 1;
	transform: translateX(0);
}

.disenium-hamburger__menu-bg {
	position: absolute;
	display: block;

	/*
	 * Valores geométricos originales del CodePen.
	 * El +2px evita una raya de antialiasing/subpíxel entre planos rotados
	 * sin alterar visualmente el grosor de las franjas.
	 */
	width: calc(200% + 2px);
	left: -53%;
	top: -25%;
	height: calc(40% + 2px);

	background-color: #fff;
	transform-origin: center center;
	will-change: transform, background-color;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.disenium-hamburger__menu-bg.middle {
	top: 29%;
	left: -53%;
	transform: rotate(-45deg) scaleY(0);
}

.disenium-hamburger__menu-bg.top {
	left: -34%;
	top: 0;
	transform: rotate(-45deg) translateY(-152%);
}

.disenium-hamburger__menu-bg.bottom {
	top: 105%;
	left: -20%;
	transform: rotate(-45deg) translateY(25%);
}

.disenium-hamburger__close {
	position: absolute;
	top: 42px;
	right: 20px;
	display: block;
	width: 42px;
	height: 42px;
	z-index: 5;
}

.disenium-hamburger__close-bar {
	display: block;
	width: 100%;
	height: 4px;
	background-color: #222;
	position: relative;
	will-change: transform;
}

.disenium-hamburger__close-bar.left {
	transform: translateX(100px) translateY(-100px) rotate(-45deg);
}

.disenium-hamburger__close-bar.right {
	top: -3px;
	transform: translateX(-100px) translateY(-100px) rotate(45deg);
}

.disenium-hamburger__close-bar::before {
	background-color: rgba(255,255,255,.2);
}

.disenium-hamburger__empty {
	position: relative;
	z-index: 4;
	margin: auto;
	padding: 24px;
	color: #222;
	text-align: center;
	background: #fff;
}

html.disenium-ahm-open,
html.disenium-ahm-open body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

@media (min-width: 1025px) {
	body:not(.elementor-editor-active) .disenium-hamburger-menu.is-mobile-tablet-only {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.disenium-hamburger__trigger-bar::before,
	.disenium-hamburger__close-bar::before,
	.disenium-hamburger__menu a::before {
		transition-duration: .01ms !important;
	}
}


/* ==========================================================
   RESET FUERTE DE BOTONES
   Evita que Elementor / el tema añadan fondo, borde, sombra,
   border-radius o colores en hover/focus/active.
   ========================================================== */
.disenium-hamburger-menu .disenium-hamburger__trigger,
.disenium-hamburger-menu .disenium-hamburger__trigger:hover,
.disenium-hamburger-menu .disenium-hamburger__trigger:focus,
.disenium-hamburger-menu .disenium-hamburger__trigger:focus-visible,
.disenium-hamburger-menu .disenium-hamburger__trigger:active,
.disenium-hamburger-menu .disenium-hamburger__close,
.disenium-hamburger-menu .disenium-hamburger__close:hover,
.disenium-hamburger-menu .disenium-hamburger__close:focus,
.disenium-hamburger-menu .disenium-hamburger__close:focus-visible,
.disenium-hamburger-menu .disenium-hamburger__close:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
	transform-origin: center center;
}

.disenium-hamburger-menu .disenium-hamburger__trigger::before,
.disenium-hamburger-menu .disenium-hamburger__trigger::after,
.disenium-hamburger-menu .disenium-hamburger__close::before,
.disenium-hamburger-menu .disenium-hamburger__close::after {
	content: none !important;
	display: none !important;
}

.disenium-hamburger-menu .disenium-hamburger__trigger:focus-visible,
.disenium-hamburger-menu .disenium-hamburger__close:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 4px !important;
}

/* El overlay se controla también por JS para que al cerrar desaparezca al 100%. */
.disenium-hamburger__overlay {
	display: none;
	background-color: transparent;
}

.disenium-hamburger__overlay.is-visible {
	display: block;
}


@supports not (width: max(100vw, 50vh)) {
	.disenium-hamburger__bg-stage {
		width: 200vw;
		height: 200vh;
	}
}