:root {
	--ctsys-nav-alto: 58px;
	--ctsys-azul: var(--ct-cyan, #111111);
	--ctsys-azul-osc: var(--ct-cyan-osc, #262626);
}

.ctsys-nav-movil {
	display: none;
}

@media (max-width: 767.98px) {

	.ctsys-nav-movil {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 950;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		align-items: stretch;
		min-height: var(--ctsys-nav-alto);
		background: #fff;
		border-top: 1px solid #e5e5e5;

		box-shadow: 0 -4px 18px rgb(0 0 0 / 5%);

		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.ctsys-nav-movil__enlace {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 8px 4px;
		color: #555;
		font-size: 0.66rem;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	.ctsys-nav-movil__enlace:hover,
	.ctsys-nav-movil__enlace:focus-visible {
		color: #111;
		background: #f3f3f3;
	}

	.ctsys-nav-movil__enlace:focus-visible {
		outline: 2px solid #111;
		outline-offset: -3px;
	}

	.ctsys-nav-movil__enlace:active {
		transform: scale(0.96);
	}

	.ctsys-nav-movil__enlace.is-activo {
		color: #111;
		background: #f3f3f3;
	}


	.ctsys-nav-movil__enlace.is-activo::before {
		content: "";
		position: absolute;
		top: 0;
		width: 30px;
		height: 3px;
		border-radius: 0 0 3px 3px;
		background: #111;
	}

	.ctsys-nav-movil.is-sobre-footer {
		background: #fff;
		border-top-color: #e5e7eb;
		box-shadow: 0 -2px 10px rgb(15 23 42 / 6%);
	}

	.ctsys-nav-movil.is-sobre-footer .ctsys-nav-movil__enlace {
		color: #555;
		background: transparent;
	}

	.ctsys-nav-movil.is-sobre-footer .ctsys-nav-movil__enlace:hover,
	.ctsys-nav-movil.is-sobre-footer .ctsys-nav-movil__enlace:focus-visible,
	.ctsys-nav-movil.is-sobre-footer .ctsys-nav-movil__enlace.is-activo {
		color: var(--ctsys-azul);
		background: transparent;
	}

	.ctsys-nav-movil.is-sobre-footer .ctsys-nav-movil__enlace:focus-visible {
		outline-color: var(--ctsys-azul);
	}

	.ctsys-nav-movil.is-sobre-footer .ctsys-nav-movil__enlace.is-activo::before {
		background: var(--ctsys-azul);
	}

	.ctsys-nav-movil__enlace {
		position: relative;
	}

	.ctsys-nav-movil__enlace--activacion,
	.ctsys-nav-movil__enlace--activacion:hover,
	.ctsys-nav-movil__enlace--activacion:focus-visible,
	.ctsys-nav-movil__enlace--activacion.is-activo,
	.ctsys-nav-movil.is-sobre-footer .ctsys-nav-movil__enlace--activacion,
	.ctsys-nav-movil.is-sobre-footer .ctsys-nav-movil__enlace--activacion:is(:hover, :focus-visible, .is-activo) {
		color: var(--ct-confirmacion-texto);
		background: transparent;
	}

	.ctsys-nav-movil__enlace--activacion:focus-visible,
	.ctsys-nav-movil.is-sobre-footer .ctsys-nav-movil__enlace--activacion:focus-visible {
		outline-color: var(--ct-focus-color);
	}

	.ctsys-nav-movil__enlace--activacion.is-activo::before,
	.ctsys-nav-movil.is-sobre-footer .ctsys-nav-movil__enlace--activacion.is-activo::before {
		background: var(--ct-confirmacion-verde);
	}

	.ctsys-nav-movil__icono {
		width: 21px;
		height: 21px;
	}


	body {
		padding-bottom: calc(var(--ctsys-nav-alto) + env(safe-area-inset-bottom, 0px));
	}


	.ctsys-whatsapp-flotante {
		bottom: calc(var(--ctsys-nav-alto) + env(safe-area-inset-bottom, 0px) + 14px) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ctsys-nav-movil__enlace {
		transition: none;
	}

	.ctsys-nav-movil__enlace:active {
		transform: none;
	}
}