body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}
@media all and (orientation: landscape) {
    body {
        font-family: Arial, sans-serif;
        text-align: center;
        background: #f4f6f9;
        user-select: none;
    }
    h1 {
        margin-top: 30px;
        color: #333;
    }
    .body_background {
        background-image: url( './imagenes/Faerac-frente-CUT.png');
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    } 
    .body_background::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Aplica el desenfoque a todo el fondo */
        backdrop-filter: blur(1px); /* Ajusta el valor según necesites */
        z-index: 1; /* Asegura que esté sobre la imagen */
    }
    .contenido_frontal {
        position: relative; /* Para que el texto esté encima del pseudoelemento */
        z-index: 2; /* Asegura que el texto esté encima del desenfoque */
    }
    .cabecera_faerac {
        display: flex;
        border: 2px solid;
        border-radius: 6px;
        width: 98%;
        margin-left: 8px;
        margin-top: 10px;
        z-index: 10;
        position: relative;
        background: rgba(255, 255, 255, 0.5); /* Fondo semitransparente para ver el efecto */
    }
    .cabecera_div_logo {
        width: 24%;
    }
    .cabecera_logo {
        margin-bottom: 1px;
        margin-top: 22px;
        border-radius: 6px;
        width: 230px;
    }

	.body_background {
		background-image: url( './imagenes/faerac_background_landscape.png');
		background-repeat: no-repeat;
		background-size: cover;
	    width: 100%; ;
	    height: 100%;
	    top:0;
	    left:0;
	    /*position:fixed;*/
	    z-index: -1;
	}
    
    .logo_rectangular_portada{
    	height: 107px;
		float: left;
		margin-left: 1.3%;
		margin-top: 0.8%;
    }
    
	@media (max-width: 800px) {
		.body_background {
			background-image: url( './imagenes/faerac_background_landscape.png');
			background-repeat: no-repeat;
			background-size: cover;
		    width: 100%; ;
		    height: 100%;
		    top:0;
		    left:0;
		    z-index: -1;
		}

	    .logo_rectangular_portada{
	    	height: 107px;
			float: left;
			margin-left: 2.9%;
			margin-top: 0.8%;
	    }
	}
	
    .contenedor_menu_principal{
		margin-left: 8px;
		margin-top: 0.8%;
    }
}

@media all and (orientation: portrait) {
	.body_background {
		background-image: url( './imagenes/faerac_background_portrait.png');
		background-repeat: no-repeat;
		background-size: cover;/*auto 116%;*/
	    width: 100%; ;
	    height: 100%;
	    top:0;
	    left:0;
	    z-index: -1;
    }
    .logo_rectangular_portada{
    	height: 107px; 
    	float: left;
    	margin-left: 3%;
    	margin-top: 6%;
    }
    .cabecera_faerac {
        display: flex;
        border: 3px solid;
        border-radius: 6px;
        width: 98%;
        margin-left: 8px;
        margin-top: 10px;
        position: relative;
        background: rgba(255, 255, 255, 0.5); /* Fondo semitransparente para ver el efecto */
        z-index: 10;
    }
    .cabecera_div_logo {
        width: 30%;
    }
    .cabecera_logo {
        margin-bottom: 1px;
        margin-left: 18px;
        margin-top: 40px;
        border-radius: 6px;
        width: 230px;
    }

	@media (max-width: 400px) {
	    .logo_rectangular_portada{
	    	height: 107px;
			float: left;
			margin-bottom: 2%;
			margin-left: 5.5%;
			margin-top: 2%;
	    }
	}
    
    .contenedor_menu_principal{
		margin-left: 8px;
    	margin-top: 6%;
    }
}