@media screen and (width <= 750px) {
	body {
		/* En móvil los páneles se colocan a la vertical. */
		flex-direction: column;
	}

	main {
		margin-top: 120px;
	}
	/* ----COMIENZAN ESTILOS DE PANEL DE NAVEGACIÓN---- */
	header {
		width: 100%;
	}

	#main-nav {
		width: 100%;
		height: 100%;
	}

	.logo-desktop {
		display: none;
	}

	/* Para que el logo y el botón del menú queden a cada lado. */
	#mobile-header {
		margin: 10px auto;
		width: 85%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.logo-mobile img {
		max-width: 200px;
		height: auto;
	}

	/* Usamos ::before para poder cambiar el ícono del botón del menú. */
	#menu-toggle-icon::before {
		color: var(--fg-color-1);
		font-size: 35px;
		content: "menu";
		cursor: pointer;
	}

	#nav-links {
		display: none;
	}

	/* De este modo verificamos que el botón del menú (que es un check) haya sido presionado. */
	header:has(#menu-toggle:checked) {
		height: 100%;
		background-color: var(--bg-color-3);
		background-image: url("/static/backgrounds/flower.svg");
		background-position: center;
		background-repeat: no-repeat;
	}

	header:has(#menu-toggle:checked) #nav-links {
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		animation-name: text-appear;
		animation-duration: 1s;
	}

	header:has(#menu-toggle:checked) #menu-toggle-icon::before {
		content: "close";
	}
	/* ----TERMINAN ESTILOS DE PANEL DE NAVEGACIÓN---- */
}

/* Animación del texto cuando se abre el menú. */
@keyframes text-appear {
	from {
		opacity: 0%;
		transform: translateX(-20px);
	}
	to {
		opacity: 100%;
		transform: translateX(0px);
	}
}