/*
@media screen and (max-width: 900px){
    
}*/

@media only screen and (max-width: 600px) {
  /* Estilos para pantallas menores a 600px */
  h2 {
      font-size: 1.5em; /* Tamaño más pequeño para títulos */
  }
  /* Otros estilos específicos para móviles */
}


body{ 
    background-image: url(imagenes/FARO.JPG); background-repeat: no-repeat; background-attachment: fixed;background-size: cover; 
}

#contenedor{
width: 100%; max-width: 500px;margin: auto;


}





#txt{  height: 30px; width: 140px;margin-top: 0px; margin-left: 1500px; margin: 10px; color:rgb(22, 21, 21); text-align: center; font-size: 22px;
     font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace; pad: 50px ;  background-color: rgb(223, 241, 61);
    
}





/*
#menu{display: flex; width: 500px;padding: 10px; justify-content: space-between;font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace; }



a{   color:rgb(14, 13, 13);font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace;

}
a:hover{ text-decoration:underline; color: rgb(240, 238, 236);}

#video-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 240px;
}

 

h1{ margin:auto;
    width: 500px;
    color: rgb(17, 4, 1);  text-align: center;font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace; margin-bottom: 10px;
box-sizing: border-box; }

#instruccion{ margin:auto;
    width: 500px;
    color: rgb(17, 4, 1);  text-align: center;font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace;box-sizing: border-box;
    }
  
    
    button{ 
        background-color: rgb(241, 199, 12); color: rgb(12, 12, 12);
       
        margin: 0px;
        border-radius: 8px; text-align: center;
    }
    #ir1{margin: auto;}
    #unidad{margin-left: 400px;}
    #volver{margin: auto;}
    #nombre{width: 200px; padding-left: 20px; color:black;
        margin:auto;  text-align: left;  margin-bottom: 20px;  font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace; box-sizing: border-box;}
    
    #paso1{width: 400px; padding-left: 20px; color:black;
        margin:auto;  text-align: left;  margin-bottom: 20px;  font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace; box-sizing: border-box;   }

        #paso1:hover{text-decoration: underline; color:aliceblue; text-transform: capitalize;margin:auto;

  }          
                                                 

    #paso2{width: 300px ;height: 50px; padding: 10px
        ;color: aliceblue;
        margin:auto;text-align: center; margin-bottom: 20px;font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;

    }
    */

/* Estilos CSS existentes */
#menu {
    display: flex;
    width: 1000px;
    padding: 20px;
    justify-content:space-between;
    font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace;
  }
  
  a {
    color: rgb(14, 13, 13);
    font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace;
  }
  
  a:hover {
    text-decoration: underline;
    color: rgb(240, 238, 236);
  }
  
  #video-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 240px;
  }
  
  h1 {
    margin: auto;
    width: 500px;
    color: rgb(17, 4, 1);
    text-align: center;
    font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  
  #instruccion {
    margin: auto;
    width: 500px;
    color: rgb(17, 4, 1);
    text-align: center;
    font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace;
    box-sizing: border-box;
  }
  /*
  button {
    background-color: rgb(226, 241, 12);
    color: rgb(12, 12, 12);
    margin: 150px;
    border-radius: 90px;
    text-align: center;
  }*/
  button {
    background-color: #eedf0c; /* amarillo  */
    color: rgb(12, 12, 12);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  button:hover {
    background-color: #45a049; /* Color más oscuro al pasar el mouse */
    transform: scale(1.05); /* Efecto de agrandamiento */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  }
  

 
  
  #paso1 {
    width: 400px;
    padding-left: 20px;
    color: black;
    margin: auto;
    text-align: left;
    margin-bottom: 20px;
    font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace;
    box-sizing: border-box;
  }
  
  
  
  
  #paso2 {
    width: 300px;
    height: 50px;
    padding: 10px;
    color: rgb(10, 11, 14);
    margin: auto;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Bitter', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace;
  }
  
 





  /* Nuevos estilos con animaciones */
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  #menu a,
  h1,
  #instruccion,
  #paso1,
  #paso2,#paso3,#paso4,#paso5,#paso6,#paso7,#paso8,#paso9,#paso10,#paso11,#paso12,#paso13,#paso14,#paso15,#paso16,#paso17,#paso18,#paso19,#paso20,#paso21,#paso22,#paso23,#paso24,#paso25,#paso26,#paso27,#paso28,#paso29,#paso30,#paso31,#paso32,#paso33,#paso34,#paso35,#paso36,#paso37,#si1,#no1 {
    animation: fade-in 1.5s ease-in-out;
  }
  



    #paso3{ width: 300px; margin-top: 0px;;
        margin:auto;;text-align: center; margin-bottom: 20px;font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;

    }

    #paso4{
        width: 300px; margin-top: 0px;  ;
        margin:auto;;text-align: center; margin-bottom: 20px;font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;

    }

    #paso5{
        width: 500px;  text-decoration: none; text-align: left;
        margin:auto; font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;

    }
        

    #paso6 {
        width: 300px; margin-top: 0px; 
        margin:auto;text-align:left; margin-bottom: 20px;font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;

    }
    
         

    #paso7 {
        width: 300px; margin-top: 50px;; 
        margin:auto;text-align:center; margin-bottom: 20px;font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;

    }
    #paso8 {
        width: 400px; margin-top: 200px;
        
        margin:auto;text-align:left; margin-bottom: 100px;font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;

    }
    #paso9 {
        width: 500px; 
         margin:auto;text-align:center;font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;

    }
    #instruccion1{ text-align: left;}

    #paso10 { text-decoration: none;
        width: 450px;  padding-right: 450px; 
        margin:auto;text-align: left; margin-bottom: 20px;color:rgb(16, 16, 17);  font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;

    }
    
    
             
    #paso11 {
        width: 400px; margin-top: 10px; padding-right: 450px;
        margin:auto;text-align: left; margin-bottom: 20px; color:rgb(2, 11, 19);
        font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;

    }
    
             

    #paso12{
        width: 600px; margin-top: 50px; color:black;
        margin:auto; text-align: left; margin-bottom: 20px;
         ; font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;
    }
    
             

     #paso13{
            width: 400px;
            margin:auto;text-align:center;font-family: 'Bitter', serif;
            font-family: 'Montserrat', sans-serif;
            font-family: 'Roboto', sans-serif;
            font-family: 'Roboto Mono', monospace;
        }


     #paso14{
                width: 400px; margin-top: 0px;
                margin:auto;text-align:left; margin-bottom: 20px; font-family: 'Bitter', serif;
                font-family: 'Montserrat', sans-serif;
                font-family: 'Roboto', sans-serif;
                font-family: 'Roboto Mono', monospace;
            }
    
    
     #paso15{
             width: 400px; margin-top: 0px;
             margin:auto; text-align:left; margin-bottom: 20px; font-family: 'Bitter', serif;
                    font-family: 'Montserrat', sans-serif;
                    font-family: 'Roboto', sans-serif;
                    font-family: 'Roboto Mono', monospace;}
           
        
    #paso16{
             width: 400px; margin-top: 0px;
             margin:auto; text-align: center; margin-bottom: 20px;font-family: 'Bitter', serif;
                        font-family: 'Montserrat', sans-serif;
                        font-family: 'Roboto', sans-serif;
                        font-family: 'Roboto Mono', monospace;} 

     #paso17{
              width: 500px; margin-top: 0px;
              margin:auto; text-align: left; margin-bottom: 20px;font-family: 'Bitter', serif;
                            font-family: 'Montserrat', sans-serif;
                            font-family: 'Roboto', sans-serif;
                            font-family: 'Roboto Mono', monospace;} 

          
    
     #paso18{
              width: 500px; margin-top: 0px; height: auto; color:rgb(10, 11, 14);
              margin:auto;text-align: left; margin-bottom: 20px; ;font-family: 'Bitter', serif;
                                font-family: 'Montserrat', sans-serif;
                                font-family: 'Roboto', sans-serif;
                                font-family: 'Roboto Mono', monospace;} 

     
                                         

    #paso19{ 
            width: 500px; margin-top: 0px;margin:auto; text-align: left; margin-bottom: 20px; color:rgb(8, 9, 10);
             ;font-family: 'Bitter', serif;
            font-family: 'Montserrat', sans-serif;
            font-family: 'Roboto', sans-serif;
            font-family: 'Roboto Mono', monospace;} 

  
                            
                      
    #paso20{ 
            width: 650px; margin-top: 0px; margin:auto;text-align: left; margin-bottom: 20px;font-family: 'Bitter', serif;color:rgb(12, 13, 14);
            font-family: 'Montserrat', sans-serif;
            font-family: 'Roboto', sans-serif;
            font-family: 'Roboto Mono', monospace;} 

  
                     
     #paso21{ 
             width: 500px; margin-top: 0px; margin:auto;text-align:center; margin-bottom: 20px; ;font-family: 'Bitter', serif;
             font-family: 'Montserrat', sans-serif;
             font-family: 'Roboto', sans-serif;
             font-family: 'Roboto Mono', monospace;} 
    
    #paso22{ 
             width: 300px; margin-top: 0px;margin:auto; text-align:center; margin-bottom: 20px; font-family: 'Bitter', serif;
             font-family: 'Montserrat', sans-serif;
             font-family: 'Roboto', sans-serif;
             font-family: 'Roboto Mono', monospace;} 
        
        
    #paso23{ 
             width: 500px; margin-top: 0px; margin:auto;text-align:left; margin-bottom: 20px; font-family: 'Bitter', serif;color:rgb(1, 8, 14);
             font-family: 'Montserrat', sans-serif;
             font-family: 'Roboto', sans-serif;
             font-family: 'Roboto Mono', monospace;} 
   
                           
     #paso24{ 
             width: 500px; margin-top: 0px; margin:auto;text-align:left; margin-bottom: 20px; ;font-family: 'Bitter', serif;
             font-family: 'Montserrat', sans-serif; color: rgb(13, 14, 15);
             font-family: 'Roboto', sans-serif;
             font-family: 'Roboto Mono', monospace;} 

        
                
     #paso25{ 
             width: 500px; margin-top: 0px; margin:auto;text-align:left; margin-bottom: 20px; font-family: 'Bitter', serif;color:rgb(1, 9, 15);
             font-family: 'Montserrat', sans-serif;
             font-family: 'Roboto', sans-serif;
             font-family: 'Roboto Mono', monospace; padding-right: 400px;}
             
   
                       
                    
         
    #paso26{ 
            width: 500px; margin-top: 0px;margin:auto; text-align:left; margin-bottom: 20px;font-family: 'Bitter', serif;color:rgb(1, 7, 12);
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace; padding-right: 400px;}
    
    
             
                       
            
     #paso27{ 
             width: 500px; margin-top: 0px; margin:auto;text-align:left; margin-bottom: 20px;font-family: 'Bitter', serif;
             font-family: 'Montserrat', sans-serif;
             font-family: 'Roboto', sans-serif;
             font-family: 'Roboto Mono', monospace; } 
                           
     #paso28{ 
              width: 500px; margin-top: 0px; margin:auto;text-align:center; margin-bottom: 20px; font-family: 'Bitter', serif;
              font-family: 'Montserrat', sans-serif;
              font-family: 'Roboto', sans-serif;
              font-family: 'Roboto Mono', monospace;} 
                                     
           
     #paso29{ 
                width: 500px; margin-top: 0px; margin:auto;text-align:left; margin-bottom: 20px; font-family: 'Bitter', serif;
                font-family: 'Montserrat', sans-serif;
                font-family: 'Roboto', sans-serif;
                font-family: 'Roboto Mono', monospace; }
                                       
     #paso30{ 
                width: 500px; margin-top: 0px;margin:auto; text-align:left; margin-bottom: 20px; ;font-family: 'Bitter', serif;
                font-family: 'Montserrat', sans-serif;
                font-family: 'Roboto', sans-serif;
                font-family: 'Roboto Mono', monospace;} 
                                           
     #paso31{ 
                width: 500px; margin-top: 0px; margin:auto; margin-bottom: 100px; ;text-align:left; margin-bottom: 20px ;
                font-family: 'Bitter', serif;
                font-family: 'Montserrat', sans-serif;
                font-family: 'Roboto', sans-serif;
                font-family: 'Roboto Mono', monospace; padding-bottom:50px ; padding-right: 400px;} 

            
                                               
                     
     #paso32{ 
                width: 500px; margin-top: 0px;margin:auto; text-align:center; margin-bottom: 20px; ;font-family: 'Bitter', serif;
                font-family: 'Montserrat', sans-serif;
                font-family: 'Roboto', sans-serif;
                font-family: 'Roboto Mono', monospace;} 
                                                   
     #paso33{ 
                width: 500px; margin-top: 0px;margin:auto; text-align:center; margin-bottom: 20px; ;font-family: 'Bitter', serif;
                font-family: 'Montserrat', sans-serif;
                font-family: 'Roboto', sans-serif;
                font-family: 'Roboto Mono', monospace;} 
                                                       
    #paso34{ 
                width: 500px; margin-top: 0px;margin:auto; text-align:center; margin-bottom: 20px; ;
                font-family: 'Bitter', serif;
                font-family: 'Montserrat', sans-serif;
                font-family: 'Roboto', sans-serif;
                font-family: 'Roboto Mono', monospace;} 
                                                                                                          
     #paso35{ 
                 width: 500px; margin-top: 0px; margin:auto;text-align:left; margin-bottom: 20px;font-family: 'Bitter', serif;
                 font-family: 'Montserrat', sans-serif;
                 font-family: 'Roboto', sans-serif;
                 font-family: 'Roboto Mono', monospace;
               ;
                } 
             
     #paso36{ 
                width: 500px; margin-top: 0px;margin:auto;text-align:left; margin-bottom: 20px; font-family: 'Bitter', serif;
                font-family: 'Montserrat', sans-serif;
                font-family: 'Roboto', sans-serif;
                font-family: 'Roboto Mono', monospace;
            } 
     #paso36:hover{text-decoration: underline; color:aliceblue; text-transform: capitalize;margin:auto;

            }          
                                                                                   
     #paso37{ 
                width: 500px; margin-top: 0px; margin:auto;text-align:left; margin-bottom: 20px; font-family: 'Bitter', serif;
                font-family: 'Montserrat', sans-serif;
                font-family: 'Roboto', sans-serif;
                font-family: 'Roboto Mono', monospace;} 
                                                                  




     #titulo1{ width: 400px; margin-top: 0px; padding: 0px;
        margin:auto;text-align: center; margin-bottom: 0px; font-family: 'Bitter', serif;
                            font-family: 'Montserrat', sans-serif;
                            font-family: 'Roboto', sans-serif;
                            font-family: 'Roboto Mono', monospace;

             }


    main{display: flex; box-sizing:border-box; margin: auto;}



    
        #si1 { margin:auto;}

        #si1:hover {
          text-decoration: underline;
          color: aliceblue;
          text-transform: capitalize;
          margin: auto;
        }
 
        #no1{margin-right: 400px ; }
       
        
        #si2 {  margin-left:  450px ;}

        #no2{ margin: auto;  }

        #si3 { margin:auto;}
  
        #si4{margin:auto}

     
        #si5{ margin: auto; }
         
        #si6{ margin: auto;}

        #si7{margin: auto; }

        #no4{ margin: auto; }
                    
    #credito{ margin:auto; font-family: 'Bitter', serif; 
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace;color: aliceblue;
        font-family: 'Montserrat', sans-serif; padding-left: 950px;
    
    }    

    #produccion{ background-color: greenyellow; color: black; font-family: 'Bitter', serif;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Mono', monospace; text-align:left;margin:auto;


    }