@media screen and (max-width: 768px) {

	/* Irudiak eta layoutak */
	.landscape {
		display: none;
	}

	.portrait {
		display: inline-block;
	}

	.margin-updown {
		margin-top: 80px;
		margin-bottom: 80px;
	}

	.margin-lateral {
		margin-left: 2%;
		margin-right: 2%;
		width: 96%;
	}

	/* Nabigazio-barra */
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: var(--c2);
		position: relative;
	}

	.navbar ul.menu-vert {
		flex-direction: column;
		width: auto;
		max-width: 100%;
		background-color: var(--c2);
		border-top: 1px solid var(--c6);
		z-index: 999;
		font-size: clamp(20px, 3vw, 24px);
	}

	.navbar .menu-vert li {
		text-align: left;
		padding: 10px 20px;
	}

	.navbar .menu-vert li a {
		display: block;
		width: 100%;
	}

	.navbar .hamburger {
		display: flex;
		flex-direction: column;
		cursor: pointer;
		padding: 10px;
		gap: 5px;
	}

	.navbar .hamburger div {
		width: 25px;
		height: 3px;
		background-color: var(--c1);
	}

	.navbar .menu-right {
		display: flex;
		align-items: center;
		gap: 5px !important;
		margin-left: auto;
	}

	.navbar li.dropdown a {
	  display: inline;
	}

	.navbar li.dropdown a.disabled, .navbar ul.dropdown-content.disabled li a {
		opacity: 0.5;
		pointer-events: none;
	}

	/* Edukia */
	main.default img {
		max-width: 90%;
		height: auto;
	}

	main.default h1, main.default h2, main.default p {
		font-size: 2rem;
		margin: 10px 0;
	}

	main.default p {
		font-size: 1.2rem;
		margin: 10px 0;
	}

	main.default button, main.default div.button a {
		font-size: 1.2rem;
	}

	main.default div.button {
		width: 100%;
		padding: 15px;
	}

	main.default div.mini {
		width: min-content;
	}

	.centered-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
		padding: 0;
		max-width: 100%;
		text-align: center;
	}

	/* Popup-ak */

	.popup {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: var(--c2);
		border: 1px solid var(--c6);
		border-radius: 20px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
		z-index: 999;
		text-align: center;
		max-width: 90%;
		max-height: 90vh;
		width: 100%;
		height: auto;
		font-size: 1.5rem;
	}

	.popup-content img {
		max-width: 90%;
		height: auto;
	}

	.popup .popup-content h1, .popup .popup-content h2, .popup .popup-content p {
		font-size: 1.5rem;
		margin: 10px 0;
	}

	.popup .popup-content ul {
		padding: 10px;
	}

	.popup .popup-content .button {
		width: 100%;
		padding: 15px 0;
		font-size: 1rem;
	}

	.popup-osoa {
		max-width: 100%;
		max-height: 100%;
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	div.popup-osoa .popup-header {
		background-color: var(--c2);
		color: var(--c3);
		border-radius: 0px;
		padding: 5px;
	}

	#overlay {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 998;              /* popup-aren azpitik baina gainontzekoen gainean */
	}



}