/**
 * Simó Lorenzo Kit — Menú móvil.
 *
 * Botón hamburguesa + panel a pantalla completa. Colores, tamaños y espacios
 * llegan como variables desde el panel de Elementor; aquí, valores de reserva.
 */

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

.slk-mm {
	display: inline-flex;
}

.slk-mm__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--slk-mm-toggle-size, 44px);
	height: var(--slk-mm-toggle-size, 44px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--slk-mm-toggle-bg, #fbe6db);
	color: var(--slk-mm-toggle-color, #111b2e);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Abierto: colores propios (pestaña "Abierto (X)" del panel). */
.slk-mm__toggle[aria-expanded="true"] {
	background: var(--slk-mm-toggle-bg-open, #111b2e);
	color: var(--slk-mm-toggle-color-open, #fff);
}

/* Dos rayas (como el diseño) dibujadas con un elemento y su ::before. */
.slk-mm__bars,
.slk-mm__bars::before {
	display: block;
	width: calc(var(--slk-mm-toggle-size, 44px) * 0.42);
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.slk-mm__bars {
	position: relative;
	transform: translateY(-3px);
	transition: transform 0.25s ease;
}

.slk-mm__bars::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	transition: transform 0.25s ease, top 0.25s ease;
}

/* Las dos rayas se cruzan en una X. */
.slk-mm__toggle[aria-expanded="true"] .slk-mm__bars {
	transform: translateY(0) rotate(45deg);
}

.slk-mm__toggle[aria-expanded="true"] .slk-mm__bars::before {
	top: 0;
	transform: rotate(-90deg);
}

.slk-mm__toggle:focus-visible,
.slk-mm__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Envoltura portátil ---------- */

/* No ocupa caja propia: así los ajustes de "Avanzado" del widget no le afectan. */
.slk-mm__portal {
	display: contents;
}

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

.slk-mm__panel {
	position: fixed;
	inset: 0;
	/* Con "Usar el header de la web", el JS sube el header justo por encima (100000). */
	z-index: 99990;
	display: flex;
	overflow: hidden auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	/* Relleno del panel + zona segura (muesca y barra inferior de los móviles). */
	padding:
		/* --slk-mm-offset: alto del header de la web (lo mide el JS); 0 con barra propia. */
		calc(env(safe-area-inset-top, 0px) + var(--slk-mm-offset, 0px) + var(--slk-mm-pad-t, 20px))
		var(--slk-mm-pad-r, 20px)
		calc(env(safe-area-inset-bottom, 0px) + var(--slk-mm-pad-b, 24px))
		var(--slk-mm-pad-l, 20px);
	background: var(--slk-mm-panel-bg, #fbe6db);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--slk-mm-speed, 300ms) ease,
		transform var(--slk-mm-speed, 300ms) ease,
		visibility 0s linear var(--slk-mm-speed, 300ms);
}

.slk-mm__panel[hidden] {
	display: none;
}

.slk-mm__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity var(--slk-mm-speed, 300ms) ease,
		transform var(--slk-mm-speed, 300ms) ease,
		visibility 0s;
}

.slk-mm--slide-right {
	transform: translateX(24px);
}

.slk-mm--slide-down {
	transform: translateY(-24px);
}

/* ---------- Contenido ---------- */

.slk-mm__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
}

.slk-mm__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 10px 10px 20px;
	border-radius: var(--slk-mm-bar-radius, 40px);
	background: var(--slk-mm-bar-bg, #fff);
	box-shadow: 0 10px 30px rgba(17, 27, 46, 0.08);
}

.slk-mm__logo {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.slk-mm__logo-img {
	display: block;
	width: auto;
	height: var(--slk-mm-logo-h, 28px);
	max-width: 100%;
}

.slk-mm__logo-text {
	font-weight: 800;
}

.slk-mm__close {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--slk-mm-close-bg, #111b2e);
	color: var(--slk-mm-close-color, #fff);
	box-shadow: none;
	cursor: pointer;
}

/* X dibujada con dos barras. */
.slk-mm__close span,
.slk-mm__close span::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	margin: -1px 0 0 -9px;
	border-radius: 2px;
	background: currentColor;
	transform: rotate(45deg);
}

.slk-mm__close span::before {
	content: "";
	margin: 0;
	top: 0;
	left: 0;
	transform: rotate(90deg);
}

/* Enlaces grandes con separadores, centrados verticalmente en el espacio libre. */
.slk-mm__nav {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	padding: 32px 0;
}

.slk-mm__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.slk-mm__item {
	margin: 0;
	padding: 0;
}

.slk-mm__item::before,
.slk-mm__item::marker {
	content: none;
}

.slk-mm__item + .slk-mm__item {
	border-top: var(--slk-mm-sep-width, 2px) solid var(--slk-mm-sep-color, rgba(17, 27, 46, 0.15));
}

.slk-mm__link {
	display: block;
	padding: var(--slk-mm-link-pad, 14px) 0;
	color: var(--slk-mm-link-color, #111b2e);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	text-decoration: none;
}

.slk-mm__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.slk-mm__highlight {
	color: var(--slk-mm-highlight, #ee5670);
}

/* ---------- Pie ---------- */

.slk-mm__footer {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.slk-mm__cta {
	display: block;
	padding: 16px 24px;
	border-radius: var(--slk-mm-cta-radius, 40px);
	background: var(--slk-mm-cta-bg, #ee5670);
	color: var(--slk-mm-cta-color, #fff);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: filter 0.2s ease;
}

.slk-mm__cta:hover,
.slk-mm__cta:focus-visible {
	color: var(--slk-mm-cta-color, #fff);
	filter: brightness(0.95);
}

.slk-mm__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* Redes: estructura y estilos en social-links.css; aquí solo se conectan los controles del menú. */
.slk-mm__social {
	--slk-social-gap: var(--slk-mm-social-gap, 16px);
	--slk-social-size: var(--slk-mm-social-size, 20px);
	--slk-social-color: var(--slk-mm-social-color, #111b2e);
	--slk-social-color-hover: var(--slk-mm-social-color-hover, var(--slk-mm-social-color, #111b2e));
}

/* Solo texto: subrayado al pasar el ratón, como antes. */
.slk-mm__social.slk-social--text .slk-social__link:hover,
.slk-mm__social.slk-social--text .slk-social__link:focus-visible {
	text-decoration: underline;
}

/* Con el header de la web encima, el header ya da el margen superior: sin la zona segura doble. */
.slk-mm__panel[data-site-header="yes"] {
	padding-top: calc(var(--slk-mm-offset, 0px) + var(--slk-mm-pad-t, 20px));
}

@media (prefers-reduced-motion: reduce) {
	.slk-mm__panel,
	.slk-mm__panel.is-open,
	.slk-mm__toggle,
	.slk-mm__bars,
	.slk-mm__bars::before {
		transition: none;
	}
}