

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

.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: linear-gradient(100deg, #164daf 0%, #0b327b 42%, var(--ct-tinta) 100%);
		border-top: 1px solid rgb(255 255 255 / 22%);

		box-shadow: 0 -8px 26px rgb(5 19 55 / 18%);

		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: rgb(255 255 255 / 72%);
		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: #fff;
		background: rgb(255 255 255 / 8%);
	}

	.ctsys-nav-movil__enlace:focus-visible {
		outline: 2px solid rgb(255 255 255 / 92%);
		outline-offset: -3px;
	}

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

	.ctsys-nav-movil__enlace.is-activo {
		color: #fff;
		background: rgb(255 255 255 / 11%);
	}


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

	.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: #64748b;
		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__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;
	}
}
