@media screen and (max-width: 480px), screen and (width: 480px)
    {
	    body {background-image: url(/background.png); font-family: "Azeret Mono"; font-size: 18px;}

		img.width {width: 100%; height: 230px;}

		div.center {text-align: center;} /* Centra la imagen */

		img.cabecera {width: 100%;}

		img.ancho {width: 100%;}

		nav {display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; margin-left: auto; margin-right: auto; width: 100%;}

		section {width: 100%;}

		article {background-color: #cccccc; border-radius: 16px; padding: 3px; margin-top: 30px; border: 2px solid blue; height: fit-content;}

		aside {background-color: #cccccc; border-radius: 16px; padding: 3px; margin-top: 20px; border: 2px solid blue; height: fit-content;}

		h1 {text-align: center; text-decoration: underline;}
		
		.centrado {text-align: center; text-decoration: underline;} /* Para los elementos h2 del aside */

		.back {background-color: #002CE5; color: white;}

		.subrayado {text-decoration: underline; display: block;}

		.line {text-decoration: underline; display: block;}

		.salto {display: block;}

		div.line2 {margin-top: 8px;} /* Exclusivo para pantalla mediana y chica. Espacea los div en pantallas chicas. */

		.esconder1 {display: none;} /* Esconde las flechas animadas en pantallas chicas */

		.esconderBotones1 {display: none;} /* Esconde los botones grandes en pantallas chicas */

	    .flechas {width: 120px; height: 60px; margin-top: 30px;} /* Posiciona más abajo las flechas en esta pantalla */
	}

	@media only screen and (min-width: 481px) and (max-width: 1024px)
	{
	    body {background-image: url(/background.png); font-family: "Azeret Mono"; font-size: 18px;}

		img.width {width: 100%; height: 340px;}

		div.center {text-align: center;} /* Centra la imagen */

		nav {display: flex; justify-content: space-evenly; margin-top: 20px; margin-left: auto; margin-right: auto; width: 100%; text-align: center;}

		section {width: 100%;}

		article {background-color: #cccccc; border-radius: 16px; padding: 5px; padding-bottom: 15px; margin-top: 30px; border: 2px solid blue; height: fit-content;}

		aside {background-color: #cccccc; border-radius: 16px; padding: 5px; padding-bottom: 10px; margin-top: 25px; border: 2px solid blue; height: fit-content;}

		h1 {text-align: center; text-decoration: underline;}
		
		.centrado {text-align: center; text-decoration: underline;} /* Para los elementos h2 del aside */

		.back {background-color: #002CE5; color: white;}

		.subrayado {text-decoration: underline; display: block;}

		.line {text-decoration: underline; display: block;}

		.salto {display: block;}

		div.line2 {margin-top: 2px;} /* Exclusivo para pantalla mediana y chica */

		.move1 {margin-left: 100px; margin-top: 50px; width: 106px; height: 60px;} /* Posiciona la flecha1 y redimensiona */

		.move2 {margin-right: 100px; margin-top: 50px; width: 106px; height: 60px;} /* Posiciona la flecha2 y redimensiona */

		.esconder2 {display: none;}  /* Esconde las flechas no animadas en esta pantalla */

		.esconderBotones1 {display: none;} /* Esconde los botones grandes en pantallas chicas */
	}

	@media only screen and (min-width: 1025px)
	{
	    body {background-image: url(/background.png); font-family: "Azeret Mono"; font-size: 18px;}

		img.width {width: 100%; height: 720px; margin: 0;} /* Antes y en las otras páginas la altura del header era de 547px */

		div.center {text-align: center;}  /* Centra la imagen */

		nav {display: flex; justify-content: space-evenly; margin-top: 25px; margin-left:auto; margin-right: auto; width: 60%;}

		/*div.line {width: 200px; height: 25px; border: 2px solid black; color: white; background-color: blue; border-radius: 10px;
			      text-align: center; padding-top: 2px; font-weight: bold; transition: background-color 2s ease;}*/

        /*div.line:hover {background-color: dodgerblue;}*/

		section {width: 100%;}

		article {background-color: #dddddd; border-radius: 16px; padding: 6px; padding-bottom: 15px; margin-top: 30px; border: 2px solid blue; height: fit-content;}

		aside {background-color: #dddddd; border-radius: 16px; padding: 3px; padding-bottom: 15px; margin-top: 30px; border: 2px solid blue; height: fit-content;}

		h1 {text-align: center; text-decoration: underline;}
		
		.centrado {text-align: center; text-decoration: underline;} /* Para los elementos h2 del aside */

		.back {background-color: #002CE5; color: white;}

		.subrayado {text-decoration: underline; display: block;}

		.line {text-decoration: underline; display: block;}

		.salto {display: block;}

		.move1 {margin-left: 100px; margin-top: 50px;} /* Posiciona la flecha1 */

		.move2 {margin-right: 100px; margin-top: 50px;} /* Posiciona la flecha2 */

		.esconder2 {display: none;} /* Esconde las flechas no animadas en esta pantalla */

		.esconderBotones2 {display: none;} /* Esconde los botones chicos en pantallas grandes */
	}