html {
	/* el font-size debe estar en 'html', porque es de donde donde toma referencia el 'rem' */
	@media (1280px < width) {
		font-size: 18px;
		h1 {font-size: 1.80rem;}
		h2 {font-size: 1.50rem;}
	}
	@media (width <= 1280px) {
		font-size: 16px;
		h1 {font-size: 1.50rem;}
		h2 {font-size: 1.40rem;}
	}
	/* @media (width <= 768px) {font-size: 14px;} */
	h3 {font-size: 1.30rem;}
}
header {
	@media (width > 1100px) {--gapHeader: 30px;}
	@media (width <= 1100px) {--gapHeader: 20px;}
	@media (width <= 1024px) {--gapHeader: 30px;}
	@media (width <= 450px) {--gapHeader: 20px;}
	@media (width <= 400px) {--gapHeader: 0px;}
	@media (width > 1024px) {
		#busquedaRapida {--posicionBuscador: 200px;}
		.mobile {display: none;}
	}
	@media (width <= 1024px) {
		/* Oden */
		#mmBr {order: 1;}
		#familia {order: 2;}
		#usuario {order: 3;}
		#mmBr {
			display: flex; flex-direction: row; align-items: center; gap: var(--gapHeader);
			#busquedaRapida {--posicionBuscador: 120px;}
		}
		#secciones {display: none;}
	}
	@media (400px < width) {
		.brMobile {display: none;}
		#busquedaRapida #formatoBr {right: -7px; top: -3px; translate: 100%;}
	}
	@media (width <= 400px) {
		justify-content: space-around !important;
		#mmBr #busquedaRapida {
			--posicionBuscador: 70px;
			#iconoBr {display: none;}
			#formatoBr {left: 3px; top: -14px;}
		}

	}
}
footer {
	@media (width <= 768px) {.ocultar768 {display: none;}}
	@media (width <= 480px) {--gapFooter: 10px !important;}
}
body {
	/* Acostados */
	@media (orientation: landscape) {
		--alturaViewPort: 100vh;
	}
	/* Parado */
	@media (orientation: portrait) {
		--alturaViewPort: 100svh;
	}
}