@charset "utf-8";
.ani1 {animation: animacion1 linear 2s 0s infinite normal; position: relative;}

    @keyframes animacion1
    {
		0%   {left: 100px; top: 0px;}
	    100% {left: 0px; top: 0px;}
    }

    .ani2 {animation: animacion2 linear 2s 0s infinite normal; position: relative;}

    @keyframes animacion2
    {
		0%   {right: 100px; top: 0px;}
	    100% {right: 0px; top: 0px;}
    }

    @media screen and (max-width: 480px), screen and (width: 480px)
    {
	    body {background-image: url(images/background.png);}
			
		img.width {width: 100%; height: auto;}
		   
		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; margin-top: 20px; margin-left: auto; margin-right: auto; width: 100%;}
			
		/*div.line {width: 200px; height: 28px; 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 {display: grid; grid-template-rows: auto; row-gap: 3px; padding-bottom: 10px;}

		article {background-color: #cccccc; border-radius: 16px; padding: 3px; margin-top: 30px; font-size: 18px; border: 2px solid blue; height: fit-content;}
					   
		aside {background-color: #cccccc; border-radius: 16px; padding: 3px; margin-top: 20px; font-size: 18px; border: 2px solid blue; height: fit-content;}
			
		h1 {text-align: center; text-decoration: underline;}

        .back {background-color: #002CE5; color: white;}
					  
		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 */

	    .flechas {width: 120px; height: 60px; margin-top: 30px;} /* Posiciona más abajo las flechas en esta pantalla */
		
		.salto {display: block;}
	}
		
	@media only screen and (min-width: 481px) and (max-width: 1024px)
	{
	    body {background-image: url(images/background.png);}
			
		img.width {width: 100%; height: auto;}
		   
		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;}
			
		/*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: lighter;  transition: background-color 2s ease;}*/

        /*div.line:hover {background-color: dodgerblue;}*/
					  
		section {display: grid; grid-template-rows: auto; padding-bottom: 8px;}

		article {background-color: #cccccc; border-radius: 16px; padding: 5px; padding-bottom: 15px; margin-top: 30px; font-size: 18px; border: 2px solid blue; height: fit-content;}
								 
		aside {background-color: #cccccc; border-radius: 16px; padding: 5px; padding-bottom: 10px; margin-top: 25px; font-size: 18px; border: 2px solid blue; height: fit-content;}
			
		h1 {text-align: center; text-decoration: underline;}

        .back {background-color: #002CE5; color: white;}
					  
		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 */
		
		.salto {display: block;}
	}
		
	@media only screen and (min-width: 1025px)
	{
	    body {background-image: url(images/background.png);} 
		   
		img.width {width: 100%; height: 620px; margin: 0;}
		 
		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 {display: grid; grid-template-columns: 70% 30%; column-gap: 3px;}

		article {background-color: #cccccc; border-radius: 16px; padding: 6px; padding-bottom: 15px; margin-top: 30px; font-size: 18px; border: 2px solid blue; height: fit-content;}
			
		aside {background-color: #cccccc; border-radius: 16px; padding: 3px; padding-bottom: 15px; margin-top: 30px; font-size: 18px; border: 2px solid blue; height: fit-content;}
				   
		h1 {text-align: center; text-decoration: underline;}

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

		.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 */
		
		.salto {display: block;}
	}