body {
    background: rgb(3, 38, 56); /*color de fondo de la web*/
    color: rgb(236, 190, 65); 
font-family: 'Montserrat', sans-serif;
}
hr {
    /*Color de la barra separadora*/
    width: 100%;
    height: 4px;
    background: orange;
    margin: 10px 1px;
    /*espacio a los lados de la barra separadora*/
}
/*barra de scroll para firefox para html-->*/

html {
     overflow-y: scroll;
     scrollbar-color: #567d98 #324582;
     scrollbar-width: 13px;
 }

 /*fin de barra de scroll para firefox*/
a {
    color: rgb(88, 114, 180);
}

a:visited {
    color: rgb(246, 239, 51);
}
.text-tit {
text-align: center; 
color: rgb(231, 162, 98);
font-size: 18px;

} 

.text2 {
    text-align: center;
    color: rgb(231, 162, 98);
    font-size: 12px;
    line-height: 1.6;
}


 .text1 {
     text-align: justify;
     color: rgb(238, 220, 141);
     font-size: 16px;
    line-height: 1.6;
 }
 .posicion1{
    margin-left: 30px;/*posicion de la imagen*/
    display: flex; 
    align-items: center;
        justify-content: center;
 }

.yerk1 img {  
    width: 95%;
    border-radius: 8px;
    object-fit: cover; 
    align-self: center;
} 
 .posicion4 {
    margin-left: -0px; /*posicion de la imagen*/
    width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
.yerk2 img {   
    border-radius: 8px;
    width: 100%;   /*tamaño de la imagen*/

}
.posicion5 {
    margin-left: -10px;/*posicion de la imagen*/
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yerk3 img {
    margin-left: 30px;
    width: 80%;
    border-radius: 8px;
}
.widget-2 {
    margin-left: -15px; /*posicion de la imagen*/
    width: 110%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yerk4 img {
    width: 80%;
    border-radius: 8px;
}

 /*INICIO DE LA GRID*/
 .contenedor {
     width: 100%;
     /* el ancho del contenedor*/
     max-width: 1080px;
     /* y este es el ancho máximo puede variar*/
     margin: 0px auto;
     /* margen arriba y abajo y "auto" para centrar la web*/
     display: grid;
     /* esto formatea el gri*/
     grid-gap: 0px 0px;
     /* margen entre las columnas y filas*/
     grid-template-columns: repeat(4, 1fr);
     /* 3 columnas de un mismo tamaño*/
     grid-template-rows: repeat(9, auto);
     grid-template-areas:
         "header header header header"
         "titulo titulo1 titulo1 titulo1" 
         "posicion1 posicion1 posicion1 posicion1"
         "posicion2 posicion2 posicion2 posicion2"
         "posicion3 posicion3 posicion3 posicion3" 
         "posicion4 posicion4 posicion4 posicion4"
         "posicion5 posicion5 posicion5 posicion5"
         "posicion6 posicion6 posicion6 posicion6"
         "footer footer footer footer";
 }

 .contenedor>div,
 .contenedor .header, 
 .contenedor .titulo,
 .contenedor .titulo1
 .contenedor .posicion1,
 .contenedor .posicion2,
 .contenedor .posicion3,
 .contenedor .posicion4,  
 .contenedor .posicion5,
 .contenedor .posicion6,
 .contenedor .footer {
     margin-top: 10px;
     border-radius: 4px;
     color: #fff;
     padding: 5px;
 }

 .contenedor .header {
     background: #2d1e05;
     grid-area: header;
     padding: 35px;
 }
.contenedor .titulo {
    grid-area: titulo;
    text-align: center;
    color: coral; }

.titulo img {
    width: 40%;
}


.contenedor .titulo1 {
        grid-area: titulo1;
        text-align: center;
        color: coral;
}

 .contenedor .posicion1 {
     grid-area: posicion1; 
    
 }

 .contenedor .posicion2 {
     grid-area: posicion2;
display: flex;
    /*comando principal para centrar*/
    flex-wrap: wrap;
    /* */
    justify-content: center;
    /*centra horizontalmente*/
    align-items: center;
    /*centra verticalmente*/
    gap: 10px;
    /*separa las imagenes*/

 }

.publili {    
    text-align: center;
}
 .contenedor .posicion3 {
     grid-area: posicion3;
 }

 .contenedor .posicion4 {
     grid-area: posicion4;
    display: flex;
        /*comando principal para centrar*/
        flex-wrap: wrap;
        /* */
        justify-content: center;
        /*centra horizontalmente*/
        align-items: center;
        /*centra verticalmente*/
        gap: 10px;
        /*separa las imagenes*/
 }

 .contenedor .posicion5 {
     grid-area: posicion5;
 }

 .contenedor .posicion6 {
     grid-area: posicion6;
    display: flex;
        /*comando principal para centrar*/
        flex-wrap: wrap;
        /* */
        justify-content: center;
        /*centra horizontalmente*/
        align-items: center;
        /*centra verticalmente*/
        gap: 10px;
        /*separa las imagenes*/
 }

 .contenedor .widget-1 {
     grid-area: widget-1;
     text-align: left;
 }

 .contenedor .widget-2 {
     grid-area: widget-2;
     text-align: center;
 } 
 .contenedor .footer {
     background: #040d1f;
     grid-area: footer;
     text-align: center;
     font-size: 13px;
 }

 /*TARJETAS EN LIBROS*/ 


 /*FIN DE LA GRID*/

@media screen and (max-width: 1000px) {
 
 
      .univ1 img {
          display: none;
      }

      .odo1 img {
          display: none;

      }   }
         
 @media screen and (max-width: 920px) {

     .contenedor {
         grid-template-areas:
        "header header header header"
            "titulo titulo1 titulo1 titulo1"
            "posicion1 posicion1 posicion1 posicion1"
            "posicion2 posicion2 posicion2 posicion2"
            "posicion3 posicion3 posicion3 posicion3"
            "posicion4 posicion4 posicion4 posicion4"
            "posicion5 posicion5 posicion5 posicion5"
            "posicion6 posicion6 posicion6 posicion6"
            "footer footer footer footer";
     }

     .navbar .logo a {
         color: rgb(210, 210, 35);
         margin-left: -270px;
         /*espacio del logo a la izquierda*/
     }

     .univ1 img {
         display: none;
     }

     .odo1 img {
         display: none;
     }
  .yerk1 img { 
        margin-left: 50px;
      width: 70%;
      border-radius: 8px;
      object-fit: cover;
      align-self: center;
  }
    
          .yerk2 img {
              margin-left: 50px;
              width: 90%;
              border-radius: 8px;
    
          }
    
          .yerk3 img {
              margin-left: 85px;
              width: 65%;
              border-radius: 8px;
          }
    
          .yerk4 img {
              width: 55%;
              border-radius: 8px;
          }

     .text1 {
         text-align: justify;
         color: rgb(78, 182, 176);
         font-size: 14px;
     }

     .logo img {
         width: 280px;
         margin-left: 460px;
     } 
 }    

 @media screen and (max-width: 760px) {

     .logo img {
         width: 280px;
         margin-left: 160px;
     }

         .text1 {
             text-align: justify;
             color: rgb(235, 160, 99);
             font-size: 12px;
         }
 }

 @media screen and (max-width: 620px) {

     .contenedor {
         grid-template-areas:
                "header header header header"
                    "titulo titulo titulo titulo"
                    "titulo1 titulo1 titulo1 titulo1"
                    "posicion1 posicion1 posicion1 posicion1"
                    "posicion2 posicion2 posicion2 posicion2"
                    "posicion3 posicion3 posicion3 posicion3"
                    "posicion4 posicion4 posicion4 posicion4"
                    "posicion5 posicion5 posicion5 posicion5"
                    "posicion6 posicion6 posicion6 posicion6"
                    "footer footer footer footer";
     }

     .navbar .logo a {
         color: rgb(210, 210, 35);
         margin-left: -270px;
         /*espacio del logo a la izquierda*/
     }
 
     .univ1 img {
         display: none;
     }

     .odo1 img {
         display: none;
     }

     .logo img {
         width: 280px;
         margin-left: 40px;
     }
       
        .yerk1 img {
            margin-left: 36px; }

         .yerk2 img {
             margin-left: 50px;
             width: 90%;
             border-radius: 8px;
    
         }
    
         .yerk3 img {
             margin-left: 85px;
             width: 65%;
             border-radius: 8px;
         }
    
         .yerk4 img {
             width: 55%;
             border-radius: 8px;
         }
     .text1 {
         text-align: justify;
         color: wheat;
         font-size: 14px;
     }
.titulo img {
    width: 20%;
}
}