
<style type="text/css">

                

               @font-face {

                        font-family: 'Comfortaa-VariableFont_wght';

                        src: url('/fuente/Comfortaa/Comfortaa-VariableFont_wght.ttf');

                        font-style: normal;

                        font-weight: normal;

                    }

               

                * {

                    margin: 0;

                    padding: 0;

                     font-family: 'Comfortaa-VariableFont_wght';



             

                }

            #menu { background-color: white;

                    color: rgb(0,0,55); 

                    border-bottom: 1px solid rgb(0,0,55);

                    position:fixed;

                    width: 100vw;

                    height: 10vh;

                    display:grid;

                                         /* grid-template-columns: 20% 30% 10% 30% 10%;*/ 
                    grid-template-columns:50% 50%; 

                    align-items: center;

                    justify-items: center;                

                }



                #menu>a{

                        color: rgb(0,0,55);

                        text-decoration: none;

                        background-image: linear-gradient(rgb(0, 0, 55), rgb(0, 0, 55)),

                        linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)),

                        linear-gradient(rgb(255,255,255), rgb(255,255,255));

                        background-size: 20px 2px, 100% 2px, 0 2px;

                        background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;

                        background-repeat: no-repeat;

                        transition: background-size 2s linear, background-position 2s linear;

                }

            

                #menu>a:hover{

                        background-size: 20px 2px, 0 2px, 100% 2px;

                        background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;;

             }



            #info { 

                    width: 100vw;

		    padding-top: 15vh;

		    padding-bottom:5vh;

	            display:grid;

                    grid-template-columns: 13% 74% 13% ;

                }





                #info >#con{

                      background-color: white;

                      padding-top:5%;

                      padding-left:5%;

                      padding-right:5%;
			
		      padding-bottom:2%;

		      margin-bottom:2%;
			
		      border-radius: 25px;

                      box-shadow: 0px 0px 10px 2px gray;

                      display:grid;

                      justify-content:center;

                      grid-column-start: 2;

                      grid-column-end:3;

                 }

		#info>#con>#b1{
		width:100%;
		border-color:rgb(0,0,55);
		margin-bottom:10px;
		}

		#info>#con>#b1>#e{
	
		background-color: rgb(0,0,55); 
		color:white;
		padding-top: 8px;
		padding-left:5px;
		display:grid;
		grid-template-columns: 90% 10%;
		}

		#info>#con>#b1>#e>#signo{
		
		background-color: rgba(0,0,55,255);
		display:grid;
		justify-content:center;
		color: rgba(246,223,202,255);
		font-size:30px;
			
				}

		  #info>#con>#b1>#p{  
			  display: none;
			    padding:8px;
			        border-style: solid;
			  border-left-color: rgba(246,223,202,255);
			  border-right-color: rgba(246,223,202,255);
			  border-bottom-color: rgba(246,223,202,255);
		}

  		  #info>#con>#b1>#p>p{           
			
                         text-align:justify;
                         line-height:160%;

                }


		#info>#con>#b2{
		width:100%;
		border-color:rgb(0,0,55);
		margin-bottom:10px;
		}

		#info>#con>#b2>#e{
	
		background-color: rgb(0,0,55); 
		color:white;
		padding-top: 8px;
		padding-left:5px;
		display:grid;
		grid-template-columns: 90% 10%;
		}

		#info>#con>#b2>#e>#signo{
		
		background-color: rgba(0,0,55,255);
		display:grid;
		justify-content:center;
		color: rgba(246,223,202,255);
		font-size:30px;
			
				}

		  #info>#con>#b2>#p{  
			  display: none;
			    padding:8px;
			        border-style: solid;
			  border-left-color: rgba(246,223,202,255);
			  border-right-color: rgba(246,223,202,255);
			  border-bottom-color: rgba(246,223,202,255);
		}

  		  #info>#con>#b2>#p>p{           
			
                         text-align:justify;
                         line-height:160%;

                }


		#info>#con>#b3{
		width:100%;
		border-color:rgb(0,0,55);
		margin-bottom:10px;
		}

		#info>#con>#b3>#e{
	
		background-color: rgb(0,0,55); 
		color:white;
		padding-top: 8px;
		padding-left:5px;
		display:grid;
		grid-template-columns: 90% 10%;
		}

		#info>#con>#b3>#e>#signo{
		
		background-color: rgba(0,0,55,255);
		display:grid;
		justify-content:center;
		color: rgba(246,223,202,255);
		font-size:30px;
			
				}

		  #info>#con>#b3>#p{  
			  display: none;
			    padding:8px;
			        border-style: solid;
			  border-left-color: rgba(246,223,202,255);
			  border-right-color: rgba(246,223,202,255);
			  border-bottom-color: rgba(246,223,202,255);
		}

  		  #info>#con>#b3>#p>p{           
			
                         text-align:justify;
                         line-height:160%;

                }


	#info>#con>#b4{
		width:100%;
		border-color:rgb(0,0,55);
		margin-bottom:10px;
		}

		#info>#con>#b4>#e{
	
		background-color: rgb(0,0,55); 
		color:white;
		padding-top: 8px;
		padding-left:5px;
		display:grid;
		grid-template-columns: 90% 10%;
		}

		#info>#con>#b4>#e>#signo{
		
		background-color: rgba(0,0,55,255);
		display:grid;
		justify-content:center;
		color: rgba(246,223,202,255);
		font-size:30px;
			
				}

		  #info>#con>#b4>#p{  
			  display: none;
			    padding:8px;
			        border-style: solid;
			  border-left-color: rgba(246,223,202,255);
			  border-right-color: rgba(246,223,202,255);
			  border-bottom-color: rgba(246,223,202,255);
		}

  		  #info>#con>#b4>#p>p{           
			
                         text-align:justify;
                         line-height:160%;

                }



                              #info>#con>p{

                     
 				 

                         text-align:justify;

                         line-height:160%;



                }


  		 #info >#con >h1{

                        padding-top: 0.5em; /* 2 veces el tamaño de la fuente */
   			 padding-bottom: 0.5em;
                        text-align: center;
			color:rgb(16,6,90);
                }
                #info >#con >h2{

                        color:rgb(16,6,90);
			  margin-top: 0.5em; /* 2 veces el tamaño de la fuente */
   			 margin-bottom: 0.5em;
                        text-align: center;

                }



                #info >#con>h3{

                        color:rgb(16,6,90);

                        text-align: center;

                }



                #info >#con>h4{

                        color:rgb(16,6,90);

                }



                #info >#con>h5{

                        color:rgb(0, 2, 27);

                        text-align: center;

                }

        #info >#con >p{

                     
			  margin-top: 0.5em; /* 2 veces el tamaño de la fuente */
   			 margin-bottom: 0.5em;
                     

                }

                #info > #con li {
                        margin-bottom: 0.4em;
                    }

                    
		#info>#con>#img{

    	        

                        background-image:url(/Imagenes/programacion/p1.png);

                        background-size:60% 100%;	

                        background-repeat:no-repeat;

                        background-position: center center;

                        height:300px;

                        display: flex;

                        justify-content: center;

                        align-items: center;

                

                }

		#info>#con>#img2{

    	        

                        background-image:url(/Imagenes/mecanica/m5.jpg);

                        background-size:25% 100%;	

                        background-repeat:no-repeat;

                        background-position: center center;

                        height:200px;

                        display: flex;

                        justify-content: center;

                        align-items: center;

                

                }





                #info>#con>#ej1{

                         

                         border-style: solid;

                         border-color: rgb(16,6,90);

                         padding-top: 1%;

                         padding-left: 5%;



                }



                #info>#con>#ej2{

                         

                         border-style: solid;

                         border-color: rgb(16,6,90);

                         padding-top: 1%;

                         display: grid;

                         grid-template-rows:1fr 1fr ;

                }



                #info>#con>#ej2>p{

  

                        padding-left: 4%;                        

                }

                #info>#con>#ej2>a{

                        background-color: rgb(0, 0, 55);

                        color:white;  

                        padding-left: 4%;

                        padding-top: 1%;

			padding-bottom: 1%;                        

                }

                #info>#con>#ej3{

                         

                         border-style: solid;

                         border-color: rgb(16,6,90);

                         padding-top: 1%;

                         display: grid;

                         grid-template-rows:1fr 1fr ;

                }



                #info>#con>#ej3>p{

  

                        padding-left: 4%; 

			                       

                }

                #info>#con>#ej3>a{

                        background-color: rgb(0, 0, 55);

                        color:white;  

                        padding-left: 4%;

                        padding-top: 1%;

			padding-bottom: 1%;  

			                   

                }

                #info>#con>a{

                  

                        border-style: solid;

                        border-color: rgb(16,6,90);     

                        display: grid;

                        align-content: center;

                        justify-items: center;

                        margin-left: 25%;

                        margin-right: 25%;

			padding-top:2%;

			padding-bottom:2%;

                        color:rgb(16,6,90);

                }



		#info>#con>#dcr{

                  

                        text-decoration:none;



                }

 		#info>#con>#dcr:hover{

                  

                        border-style: solid;

                        border-color: rgb(16,6,90);     

                        display: grid;

                        align-content: center;

                        justify-items: center;

                        margin-left: 25%;

                        margin-right: 25%;

                        text-decoration:none;

            			padding-top:2%;

			            padding-bottom:2%;

                        background-color:rgb(16,6,90);

			            color:white;

                }



               

                #info>#con>#ctrl{

                        display:grid;

                        grid-template-columns: 1fr;

                        justify-items: center;



                }



                #info>#con>#ctrl>a{

                    background-color: rgb(16,6,90);

                    color:white;

                    padding-top: 2%;

		    padding-bottom: 1%;

                    padding-left: 2%;

                    padding-right: 2%;

                    text-decoration:none;

                }
                #info>#con>p>a{
                color:rgb(246,223,202);
                background-color:rgb(16,6,90);
                text-decoration:none;
                padding-left:2px;
                padding-right:2px;
                padding-bottom: 1px;
                padding-top:1px;
                border-radius:5px;
                
            }

   table,td{
                border: 3px solid rgb(16,6,90);
                text-align:left;
         
                              }
                              
                    th{
                 border: 1px solid rgb(16,6,90);
                text-align:left; 
                padding-left:2%;
                    }
