:root{
    --color-web: #2d2d2d;  
    --color-web-clarito: #86c6c7;
    --color-web-blanco: #ECECEC;
    --color-web-oscuro: #2d2d2d;

}
body {
   width: 100%;
   overflow-x: hidden;
   
}
html{
	scroll-behavior: smooth; /*hacer sroll con animacion*/
}
*{
    padding: 0;
    margin: 0;
    font-family:'Roboto'  ,'Oswald', serif ; 
}

.bold{
    font-weight: bold;
}

.gris{
    color: rgb(83, 83, 83);
}

.gris3{
    color: rgb(124, 124, 124);
}

.gris4{
    color: rgb(180, 180, 180);
}

.gris2{
    color: rgb(83, 83, 83);
    
}

.gris5{
    color: rgb(129, 129, 129);
    
}


.gris-oscuro{
    color: rgb(70, 70, 70);
}

.color-qualired{
    color: var(--color-web-oscuro);
}

.container{
    width: 90%;
}
.contenedor {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}


.bg-oscuro{
    background-color: (--color-web-blanco);
}
.h7 {
    font-size: 82%;
}
#banner-para-movil {
    display: none;
}


/* ------------------------------------------------HEADER------------------------------------------------ */

.header{
    color: var(--color-web-blanco);  
    width: 100%; 
    position: sticky;
    top: 0;
    z-index:99999;
}

.header a:hover{
    text-decoration: none;  
}

.header .fila-1{
    display: grid;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-web);
    grid-template-columns: 0.8fr 1.2fr;
    grid-template-rows: minmax(60px, auto);
    grid-template-areas: "iconos   informacion";
    padding: 0 4%;
}


.header .fila-1 .linea{
    height: 20px;
    width: 1px;
    background-color: var(--color-web-blanco);
    border: var(--color-web-blanco);
    display: inline-block;
}

.header .fila-1 .iconos{
    grid-area: iconos;
    display:inline-flex;
    align-items: center;
    width: 50%;
}

.iconos .itema{
    display: inline-block;
    margin: 0 15px;
    color: var(--color-web-blanco); 
}
.itema:hover
{
    color: #fff;
}



.header .fila-1  .informacion{
    text-align: right;
    grid-area: informacion;
}

.header .nave-main{
    display: grid;
    align-items: center;
    background-color: #fff;
    grid-template-columns: 0.3fr 0.3fr 1.4fr;
    grid-template-rows: minmax(80px, auto);
    grid-template-areas: "hidemenu logo elmenu";
    padding-right: 8%;
    box-shadow: 8px 7px 13px 0px #555;

}
.nave-main2{
    display: grid;
    align-items: center;
    background-color: #fff;
    grid-template-columns: 0.6fr 1.4fr;
    grid-template-rows: minmax(80px, auto);
    grid-template-areas: "logo elmenu";
    box-shadow: 8px 7px 13px 0px #555;

}
.centrar {
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;

}
.azulado {
    color: rgb(0, 188, 206);
}
.header .nave-main .logo{
    grid-area: logo;
    margin: 5px 0;
}
.logo2 {
    display: flex;
    justify-content: center;
}
.header .informacion i{
    margin: 0 10px 0 15px;
}
.correo {
    display: inline;
    margin-left: 10px;

}
.telefono {
    display: inline;
    margin-left: 10px;
}
.header .menu-btn {
    grid-area: hidemenu;
    cursor: pointer;
    margin: 0 30%;
    font-size: 1.5rem;
    display: none;
  }
.header .nav-menu{
    display: inline-flex;
    text-align: center;
    justify-content: flex-end;
    grid-area: elmenu;
    margin: 0;
    text-decoration: none;
    list-style: none;
    width: 100%;
}
.header .nav-menu a{
    color: gray;
    text-decoration: none;
}
.header .nav-menu .menuitem{
    margin: 0 10px;
}

.item-margin-right-none{
    margin: 0 10px;
    margin-right: 0;
}

/* ------------------------------------------------FOOTER------------------------------------------------ */
.footer{
    display: grid;
    padding: 10px 20px;
    background-color: var(--color-web) ;
    color:var(--color-web-blanco);

    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, minmax(45px, auto));

    grid-template-areas: "links   links"
                         "diseño  derechos";
    overflow: hidden;
    margin-top: 20px;
}

.footer a{
    color:var(--color-web-blanco);
    text-decoration: none;
}
.footer a:hover{
    text-decoration: underline;
    color: #fff;
}
.footer p{
    margin: 0;
}

.footer .links{
    grid-area: links;
    display: grid;
    justify-items: center;
    align-items: center;
    justify-self: center;
    grid-template-columns: repeat(5, minmax(100px, 200px));
    border-bottom: 1px solid var(--color-web-blanco);

}

.footer .diseño{
    grid-area: diseño;
    text-align: start;
    align-self: flex-end;
   
    
}
.footer .derechos{
    grid-area: derechos;
    text-align: end;
    align-self: flex-end;
    
}
/* ------------------------------------------------ BANNER ------------------------------------------------ */

.banner{
    min-height: 300px;
    background-position: center;
    background-size:cover ;
    color: var(--color-web-blanco);
    background-color: rgb(80, 80,80);
    background-blend-mode: soft-light;
    position: relative;
}

.banner .contenido{
    position: relative;
    top:70px;
    padding-left: 10%;
    color: var(--color-web-blanco);
}

.banner .contenido .ruta{
    font-size: 22px;
    font-weight: lighter;
    font-family: "Roboto" !important;
}
.banner .linea{
    max-width: 20%;
    height: 1px;
    border: 1px solid var(--color-web-blanco);
}

.banner-novedades{
    background-image: url(../images/banners/bannertopblog.jpg);
}
.banner-servicios{
    background-image: url(../images/banners/bannerservicios.jpg);
}
.banner-empresa{
    background-image: url(../images/banners/banner-empresa.jpg);
}
.banner-contacto{
    background-position: center;
    background-image: url(../images/banners/bannercontacto.jpg);
}
.banner-branding{
    background-position: inherit;
    background-image: url(../images/banners/empresarios.jpg);
}



/* ------------------------------------------------CARROUSEL ------------------------------------------------ */
.carusel{
    min-height: 600px;
    background-position: center;
    background-size:cover ;
    background-blend-mode: soft-light;
    background-color: rgb(80, 80,80);
    /*background-color: rgb(56, 112, 122);*/
}

.carusel-imagen-1{
    background-image: url(../images/banners/slide1.jpg);
}
.carusel-imagen-2{
    background-image: url(../images/banners/bannercontacto.jpg);
}
.carusel-imagen-3{
    background-image: url(../images/banners/bannerservicios.jpg);
}

.carusel .titulo{
    font-weight: bold;
}
.tamanio-1{
    font-size: 60px;
    margin-bottom: 0;
}
.tamanio-2{
    font-size: 40px;
    margin-bottom: 0;
}
.carusel .texto{
    margin: 10px 21%;
}

.carusel .descripcion{
    font-size: 25px;
    font-weight:lighter;
}

/* ------------------------------------------------ INDEX ------------------------------------------------ */




.grilla-index-nosotros{
    display: grid;
    gap: 20px; 
    margin: 20px auto;
    width: 90%;
    align-content: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(100px, auto));

    grid-template-areas: "informacion informacion"
                         "dibujo mensaje"
                         "pilares pilares";
}

.grilla-index-nosotros .informacion{
    grid-area: informacion;
    text-align: center;
}

.grilla-index-nosotros .dibujo{
    grid-area: dibujo;
    
}


.grilla-index-nosotros .mensaje{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-area: mensaje;
    height: auto;
    width: 100%;
    background-color: #fff;
    box-shadow: 8px 7px 13px 0px #555;
    border-radius: 3px;
    padding: 20px 30px;
}

.imagen-container{
    height: 300px;
    width: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
    border-radius: 3px;
    background-position: center;
    background-size:cover ;
    color: var(--colorx-web-blanco);
}
.imagen-index{
    background-image: url(../images/banners/empresarios.jpg);
}
.imagen-empresa{
    background-image: url(../images/banners/bannerservicios.jpg);
}
.imagen-empresa-1{
    background-image: url(../images/empresa/foto1.jpg);
}
.imagen-empresa-2{
    background-image: url(../images/empresa/foto2.jpg);
}
.imagen-empresa-3{
    background-image: url(../images/empresa/foto3.jpg);
}

.imagen-container .sub-container{
    height: 90%;
    width: 95%;
    border: 2px solid var(--color-web-blanco);
    border-radius: 3px;
}


.grilla-index-nosotros .pilares{
    grid-area: pilares;
    margin: 30px 0;
    display:grid;
    gap: 20px;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, minmax(200px,auto));
}

.pilares .item{
    display:grid;
    grid-template-columns: 0.3fr 1fr;
    color: gray;
}

.pilares .item p{
    font-family: "Roboto" !important;
}

/* .pilares .item .titulosub {
    
} */

.pilares .item img{
    width: 80%;
}


.grilla-index-servicios{
    display: grid;
    gap: 20px;
    padding: 20px 0;
    padding: 60px 0;
    padding-bottom: 150px;
    background-color: var(--color-web-blanco);
   
    grid-template-rows: repeat(2, minmax(100px, auto));

    grid-template-areas: "informacion"
                         "datos";                       
}

.grilla-index-servicios .informacion{
    grid-area: informacion;
    text-align: center;
}

.grilla-index-servicios .datos{
    grid-area: datos;
    text-align: center;
}

.infoskills {
    height: 130px; 
    width: 100%;
    background-position: center;
    background-size: cover;
    background-image: url(../images/banners/bgskills.jpg);  
    display: grid;
    padding: 0 10%;
    text-align: center;
    align-items: center;
    
    grid-template-columns:repeat(4, minmax(75px,1fr));
    grid-template-rows: auto;
 }

 .infoskills p {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
 }

 .infoskills .bignum {
    font-size: 2.5rem;
    color: white;
    font-weight:bold;
 }

 
 .grilla-index-blog {
    display: grid;
    gap: 20px;
    padding: 20px 0;
    margin-top: 50px;
   
    grid-template-rows: repeat(2, minmax(100px, auto));

    grid-template-areas: "informacion"
                         "datos";             
 }

 .grilla-index-blog .informacion{
    grid-area: informacion;
    text-align: center;
}

.grilla-index-blog .datos{
    grid-area: datos;
    display: grid;
    gap: 20px;
    padding: 20px 0;
    grid-template-columns: repeat(3, 1fr);
}

.grilla-info{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 30px;

}

.grilla-info .carta p {
    font-family: "Roboto" !important;
}

.grilla-info h2 {
    font-family: "Roboto" !important;
}

.carta{
    width: 100%;
    padding: 5px 10px;
    text-align: center;
    line-height: 25px;
    border-radius: 3px;
} 
.carta .titulo{
    display: inline-block;
    border-bottom: 3px solid black;
    margin-bottom: 10px;
    margin-top: 10px;
}


.carta-white{
    color: var(--color-web-blanco);
    background-color: #777777;
}
.carta-white .titulo{
    border-bottom: 2px solid var(--color-web-blanco);
    
}

.carta-dark{
    color: var(--color-web-blanco);
    background-color: #777777;
}
.carta-dark .titulo{
    border-bottom: 3px solid var(--color-web-blanco);
}
.carta-dark a {
    color: var(--color-web-blanco);
}

.carta-dark a:hover {
    color: var(--color-web-blanco);
    text-decoration: none;
}
.margensuperior {
    margin-top: 10px;

}
.margeninferior {
    margin-bottom: 10px;
}

/* ------------------------------------------------CONTACTO ------------------------------------------------ */
.grilla-contacto{
    margin: 30px 0;
    display: grid;
    gap: 20px;
    min-height: 500px;
    grid-template-columns: 1.2fr 2fr;
    grid-template-rows: minmax(200px, auto);
    grid-template-areas: "columna-1  columna-2" ;
}
.grilla-contacto2{
    margin: 30px 0;
    display: grid;
    gap: 20px;
    min-height: 500px;
    grid-template-columns: 50% 50%;
    grid-template-areas:"columna-2 columna-1"
                        "imagen-1 imagen-2"
                        "imagen-3 imagen-4";
}
.imagen-curso img{
    width: 90%;
    margin: 5%;
}
.imagen-1 {grid-area: imagen-1;}
.imagen-2 {grid-area: imagen-2;}
.imagen-3 {grid-area: imagen-3;}
.imagen-4 {grid-area: imagen-4;}

.columna-1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-area: columna-1;
    padding: 20px 10%;
    color: var(--color-web);
}
.columna-3 {
    width: 100%;
}
.columna-1 .linea{
    width: 25%;
    border: 1px solid var(--color-web);
}

.columna-1 .item{
    display: grid;
    text-align: center;
    margin: 10px 0;
    grid-template-columns: 50px 1fr;
    grid-template-rows: repeat(2, minmax(40px, auto));

    grid-template-areas: "icono icono"
                         "importante importante";
}

.columna-1 .item .icono{
    grid-area: icono ;
    display: flex;
    font-size: 30px;
    text-align: right;
    padding-right: 2%;
}
.columna-1 .item .icono i{
    color: var(--color-web);
    padding: 0 10px;
}

.columna-1 .item .importante{
    grid-area: importante ;
    text-align: left;
}

.columna-2{
    grid-area: columna-2;
}

.columna-2 .form-contenedor{
    width: 90%;
    margin: 40px auto;

    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, minmax(20px, 50px));
    grid-template-areas:    "f1 f5"
                            "f2 f5"
                            "f3 f5"
                            "f4 f5";
}
.columna-3 .form-contenedor{
    width: 90%;
    margin: 40px auto;

    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, minmax(20px, 50px));
    grid-template-areas:    "f1 f1"
                            "f2 f2"
                            "f3 f3"
                            "f4 f4";
}
#f1 {
    grid-area: f1;
}
#f2 {
    grid-area: f2;
}
#f3 {
    grid-area: f3;
}
#f4 {
    grid-area: f4;
}
#f5 {
    grid-area: f5;
}


.form-contenedor .inputLau{
    border: 1px solid var(--color-web);
    padding: 10px;
    color: gray;
    border-radius: 3px;
    height: 100%;
    width: 100%;
}

.form-contenedor .inputLau .centrado{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* .form-contenedor .mensaje{
    grid-column: 2/3;
    grid-row: 1/5;

} */

/* ------------------------------------------------NOVEDADES ------------------------------------------------ */

.grilla-novedades{
    display: grid;
    gap: 20px;
    margin: 100px 0;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(40px, auto));
    grid-template-areas: "1      2"
                         "3      4"
                         "abajo abajo";
}

.item-mini p{
    margin-bottom: 0;
}
    


.item-caja{
    display: grid;
    min-height: 300px;
    width: 85%;
    grid-template-rows: 1fr minmax(80px, auto);
}

.item-detail-1{
    justify-self: center;
}

.item-detail-2{
    width: 90%;
    max-height: 100px;
}

.item .image-container{
    width: 100%;
    overflow: hidden;
    margin: 20px 0;
    border-radius: 3px;
}
.item .image-container img{
    width: 100%;
}

.item i{
    color: var(--color-web-oscuro);
}
.item .parrafo{
    color: gray;
    font-size: 15px;
}

.item .texto-container{
    background-color:#65b8b9;
    padding: 20px 15px ;
    margin-bottom: 10px;
}
.item ol{
    list-style-position:inside;
}

.item .compartir{
    display: flex;
	justify-content: flex-end;
	align-items: center;

    font-size: 27px;
    color: var(--color-web-clarito);
    margin-bottom: 15px;
}

.item .compartir i{
    margin: 0 5px;
    color: var(--color-web-clarito);
}


.grilla-novedades .paginacion{
    margin-top: 40px;
    grid-area: abajo;
    font-size: 20px;
    font-weight: bold;

    display: grid;
    gap: 5px;
    justify-items: center;
    align-items: center;

    grid-template-columns: repeat(5, 70px);
}

.paginacion .activo{
    background-color:var(--color-web);
    border-radius: 999px;
    color: var(--color-web-blanco);
    width: 50px;
    height: 50px;
    display: flex;
	justify-content: center;
	align-items: center;
}
.paginacion a:hover{
    text-decoration: none;
}


/* ------------------------------------------------ NOVEDADES - DETAIL ------------------------------------------------ */

.grilla-detail{
    margin: 40px 0;
    display: grid;
    gap: 20px;
    min-height: 500px;
    grid-template-columns: 2fr 0.8fr;

    grid-template-areas: "columna-1 columna-2";
}

.grilla-detail .columna-1{
    grid-area: columna-1;
    /*si lo pongo muere el grid*/
}

.grilla-detail .columna-2{
    grid-area: columna-2;
    border-left: 2px solid var(--color-web);
    padding: 20px 30px;
    
}

.grilla-detail .columna-2 .titulo{
    
    font-size: 27px;
    color: var(--color-web-clarito);
    margin-bottom: 0px;
}

.etiqueta{
    background-color: var(--color-web-clarito);
    color: white;
    display: inline-block;
    padding: 0 8px;
    margin: 3px 1.5px;
    border-radius: 30px;
}

.margen-superior{
    margin-top: 20px;
}

/* ------------------------------------------------SERVICIOS ------------------------------------------------ */

.grilla-servicios{
    display: grid;
    gap: 40px;

    margin-top: 80px;
    justify-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, minmax(50px, auto));

}

.grilla-servicios .item{
    display: grid;
    justify-items: center;
    text-align: center;
    width: 90%;
    border: 0px;
    padding: 50px 20px 0px 20px;
    align-items: baseline;
    border-radius: 3px;
   
    grid-template-rows: minmax(40px,auto) minmax(80px, auto);
    margin-bottom: 60px;
    position: relative;
}
.margin-peque{
    margin-bottom: 37px;
}

.grilla-servicios .item .parrafo{
    color: gray;
    align-items: baseline;
    font-size: 18px;
    line-height: 30px;
}

.circulo{
    width: 85px;
    height: 85px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid gray;
    position:absolute;
    top: -60px;

    display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.circulo img{
    width: 65%;
}


.circulito{
    width: 15px;
    height: 15px;
    background-color: #279a9c7a;
    border-radius: 50%;
    display: inline-block;
}
.circulos .circulito{
    margin: 0 5px;
}

/* ------------------------------------------------ EMPRESA ------------------------------------------------ */

.grilla-empresa {
    margin: 50px 0;
    overflow: hidden;
    display: grid;
    gap: 20px;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: minmax(250px, auto);
     grid-template-areas: "imagen texto";
}

.grilla-empresa .imagen{
    grid-area: imagen;
}
.grilla-empresa .texto{
    align-self: center;
    grid-area: texto;
    padding-right:5% ;
    color: gray;
    font-size: 1.2rem;
}

.renglon{
    margin-top: 180px;
    height: 170px;
    width: 100%;
    background-color: #777777;
    position: relative;
    display: grid;
    justify-items: center;
    

}

.renglon .ren-contenido{
    position: absolute;
    top: -120px;
    width: 90%;
    background-color: #fff;
    height: auto;
    box-shadow: 3px 2px 15px 2px #555;
    padding: 20px 10px;
    border-radius: 3px;

}

.renglon .ren-contenido .grilla-renglon{

    display: grid;
    justify-items: center;
    text-align: center;
    color: var(--color-web);
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(150px, auto);

    grid-template-areas:"profesionales licenciados lideres" ;
}

.grilla-renglon i{
    font-size: 60px;
    margin-bottom: 10px;
}

.grilla-renglon p{
    margin: 0px 15px 0px 15px;
    text-align: center;
}


.grilla-renglon .profesionales{
    grid-area: profesionales;
}
.grilla-renglon .licenciados{
    grid-area: licenciados;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}
.grilla-renglon .lideres{
    grid-area: lideres;
}
.container2 {
    width: 100%;
    padding: 0 5%;
}
.centrado{
    display: flex;
    justify-content: center;
}
.grilla-empresa-2{
    margin: 50px auto;
    display: grid;
    width: 100%;
    gap: 20px;
    justify-items: center;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3,minmax(250px, auto));
}

.grilla-empresa-2 .imagen-container{
    width: 100%;
    height: 100%;
}

.grilla-empresa-2 .imagen-container .sub-container{
    height: 90%;
    width: 92%;
    border: 2px solid var(--color-web-blanco);
}



.grilla-empresa-2 .texto .titulo{
    font-size: 30px;
    margin-bottom: 0;
    font-weight: bold;
}

.grilla-empresa-2 .texto .subtitulo{
    font-size: 30px;
    font-weight: bold;
}

.grilla-empresa-3{
    display: grid;
    gap: 20px;
    margin-top: 50px;
   
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(100px, auto));

    grid-template-areas: "info"
                         "datos";             
}

.grilla-empresa-3 .informacion{
    grid-area: info;
    text-align: center;
    
}
.grilla-empresa-3 .datos{
    grid-area: datos;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(200px, auto);

}

.grilla-empresa-3 .datos .persona{
    margin-top: 50px;
    justify-self: center;
    width: 100%;
}

.grilla-empresa-3 .persona .foto-container{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    margin: 0 auto;
    box-shadow: 8px 7px 13px 0px #555;
    border: 1px solid gray;
   
}

.foto-claudio{
    background-image: url(../images/personas/claudio-perfil.png)
}
.foto-monica{
    background-image: url(../images/personas/monica-perfil.png);
}

.grilla-empresa-3 .persona .mensaje{
    margin: 5% ;
   text-align: center;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 8px 7px 13px 0px #555;
    padding: 20px 0;
    
}
.persona .mensaje .titulo{
    color: var(--color-web-oscuro);
    margin-bottom: 0;
}
.persona .mensaje .subtitulo{
    color: gray;
}

.persona .mensaje .descripcion{
    margin-bottom: 0;
    padding: 0 5%;
}


.whatsapp {
    position: fixed; 
    right:5px; /*Margen derecho*/
    bottom:60px; /*Margen abajo*/
    z-index:999;
   }
   .whatsapp img {
    width:45px; /*Alto del icono*/
    height:45px; /*Ancho del icono*/
   }
   .whatsapp:hover{
   opacity: 0.7 !important;
   filter: alpha(opacity=70) !important;
   }

    @media (max-width: 992px) {
    .header .fila-1 {
    grid-template-columns: 0.5fr 1.5fr;
    }
   } 
   @media (max-width: 768px) {
    .columna-1 h3 {
        font-size: 1.4rem;
    }
    .columna-1 .item i,h4 {
        font-size: 1.4rem;
    }
    .infoskills .bignum {
        font-size: 2rem;
        color: white;
        font-weight:bold;
     }
    .header .fila-1 {
        padding: 0 2%;
        }
    .grilla-index-nosotros{
        display: grid;
        gap: 20px; 
        margin: 20px auto;
        width: 100%;
        align-content: center;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, minmax(100px, auto));
        grid-template-areas: "informacion informacion"
                                "dibujo dibujo"
                                "mensaje mensaje"
                                "pilares pilares";
    }
    .grilla-index-nosotros .pilares {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(200px,auto));  
    }
    .grilla-servicios {
        display: grid;
        gap: 20px;
        margin-top: 80px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, minmax(50px, auto));
    }
    .grilla-empresa .texto{
        font-size: 1rem;
    }
    .header .fila-1 .informacion {
        font-size: 0.8rem;
    }
    .iconos .itema {
        margin: 0 10px;

    }
    .menuitem {
        font-size: 0.8rem;
    }
   }
   @media (max-width: 576px) {
    .centrar {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    
    }
    #carouselExampleIndicators {
        display: none;
    }
    #banner-para-movil {
        display: flex;
        align-items: flex-end;
        height: 350px;
        text-align: center;
        color: #fff;
        padding-bottom: 5%;
        margin-bottom: 30px;

    }
    .carusel-imagen-3{
        background-image: url(../images/banners/movil565px.jpg);
        background-position: center;
        background-size: cover;
        background-blend-mode: soft-light;
        background-color: rgb(80, 80,80);
    }
    .grilla-contacto {
        margin: 30px 0;
        display: grid;
        gap: 10px;
        min-height: 400px;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(200px, auto) minmax(200px, auto);
        grid-template-areas:
            "columna-1"
            "columna-2";
    }
    .grilla-contacto2 {
        margin: 30px 0;
        gap: 10px;
        min-height: 400px;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(200px, auto) minmax(200px, auto);
        grid-template-areas:
            "columna-3"
            "imagen-1"
            "imagen-2"
            "imagen-3"
            "imagen-4"
            "columna-1";
    }
    .grilla-empresa .texto{
        font-size: 0.9rem;
    }
    .header .fila-1 .informacion {
        display: inherit;
        font-size: 0.7rem;
    }
    .infoskills .bignum {
        font-size: 1.5rem;
        color: white;
        font-weight:bold;
     }
     .infoskills .subnum {
        font-size: 0.8rem;
        color: white;
        font-weight:bold;
     }
    .header .nave-main {
        padding: 0 2%;
    }
    .grilla-info {
        display: grid;
        gap: 40px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        margin-bottom: 30px;
        padding: 0 20px;
    }
    .grilla-index-blog {
        padding: 0 20px;
    }
    .grilla-index-blog .datos {
        text-align: center;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3,1fr);
    }
    
    .item .parrafo {
        font-size: 1rem;
    }
    
    .header .nave-main .logo {
        width: auto;
        margin-left: 80px;
    }
    
    
    .header .menu-btn {
        display: inline;
       color: #000;
      }
    .menu-btn:hover {
        opacity: 0.5;
      }
    
      .nave-main ul.nav-menu {
        display: block;
        position: absolute;
        top: 140px;
        left: 0;
        background: #000;
        width: 50%;
        height: 270%;
        border-right: #ccc 1px solid;
        opacity: 0.9;
        padding: 10px;
        transform: translateX(-900px);
        transition: transform 0.5s ease-in-out;
      }
       .nave-main2{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, minmax(80px, auto));
        grid-template-areas: "logo"
                            "elmenu";
    }
      .nave-main ul.nav-menu li {
        padding: 20px 0;
        border-bottom: #ccc solid 1px;
      }
      .nave-main ul.nav-menu li:last-child {
        border-bottom: 0;
      }
    
      .nave-main ul.nav-menu.show {
        transform: translateX(-20px);
      }
    
      .nave-main ul.nav-menu-right {
        margin-right: 50px;
      }
      .footer .links {
          display: none;
          grid-area: unset;
      }
      .grilla-novedades{
        display: grid;
        gap: 20px;
        margin: 40px 0;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, minmax(40px, auto));
    
        grid-template-areas: "1"
                             "2"
                             "3"
                             "4"
                             "abajo";
    }
    .renglon .ren-contenido{
        top: -140px;
        width: 95%;
        padding: 10px 5px;
    }
    .renglon .ren-contenido .grilla-renglon p{
        font-size: 0.8rem;
    }
    .footer {
        
        grid-template-areas:
        "derechos derechos"
        "diseño diseño";
    }
    .footer .derechos {
        padding-right: 100px;
        text-align: left;
    }
   }
   @media (max-width: 360px) {
    .columna-2 .form-contenedor{
        margin: 40px auto;
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, minmax(20px, 50px));
        grid-template-areas:    "f1"
                                "f2"
                                "f3"
                                "f4"
                                "f5"
                                "f5"
                                "f5"
                                "f5";
    }
   
       
    .infoskills .bignum {
        font-size: 1.2rem;
        color: white;
        font-weight:bold;
     }
     .infoskills .subnum {
        font-size: 0.6rem;
        color: white;
        font-weight:bold;
     }
     .nave-main ul.nav-menu {
        top: 80px;
        height: 450%;
     }
     .header .fila-1{
        display: none;
    }
    .grilla-servicios {
        display: grid;
        gap: 20px;
        margin-top: 80px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, minmax(50px, auto));
    }
    .banner .contenido h1{
        font-size: 2rem;
    }
   
    .grilla-novedades .paginacion{
    font-size: 1rem;
    grid-template-columns: repeat(5, 40px);
    }
    .grilla-empresa {
        margin: 10px 0;
        overflow: hidden;
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(250px, auto) minmax(250px, auto);
        grid-template-areas: "imagen"
                            "texto";
    }
    .grilla-empresa .texto {
        padding-right: 0;
    }
    .renglon .ren-contenido {
    position: relative;
    top: -180px;
    }

    .renglon .ren-contenido .grilla-renglon {
        grid-template-columns: 1fr;
        grid-template-rows: 120px 120px 100px;
        grid-template-areas: "profesionales"
                            "licenciados"
                             "lideres";  
    }
    .grilla-renglon .licenciados {
        border-left: none;
        border-right: none;
        border-top: 1px solid gray;
        border-bottom: 1px solid gray;
        padding-top: 5px;
    }
    .grilla-renglon .lideres {
        margin-top: 10px;
    }
    .grilla-renglon h5 {
        font-size: 1rem;
        font-weight: 800;
    }
     .grilla-renglon i{
        float: left;
    }
    .grilla-empresa-2 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6,minmax(250px, auto));
    grid-template-areas:    "a1"
                            "a2"
                            "a3"
                            "a4"
                            "a5"
                            "a6";
    }
   #a1 {
       grid-area: a1;
   }
   #a2 {
        grid-area: a2;
   }
   #a3 {
       grid-area: a3;
   }
   #a4 {
        grid-area: 4;
   }
   #a5 {
       grid-area: a5;
   }
   #a6 {
       grid-area: a6;
   }
   .grilla-empresa-3 .datos {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat (2, minmax(200px, auto));
   }
   .grilla-detail {
    margin: 20px 0;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "columna-1" 
                        "columna-2";
}
.grilla-detail .columna-2 {
    grid-area: columna-2;
    border-left: none;
    padding: 10px 10px;
}
 }