/* COLORES */
:root{
    --azul-a:#085995;
    --verde-a:#1c8274;
    --verde-b:#4ba85d;
    --verde-c:#87c278;
    --verde-d:#afd4a1;
    --verde-e:#e7f0d6;
    --bs-body-font-family: "Segoe UI", sans-serif;
}

.form-floating > .form-control::placeholder, .form-control::placeholder{
    color:black;
    opacity: .5;
}
body{
    overflow-x: hidden;
}
a{
    text-decoration: none;
}
.dropdown-item.active, .dropdown-item:active{
    background-color: transparent !important;
}

.gracias{
    background-color: black;
    width: 100%;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}
.gracias img{
    width: 30%;
    height: auto;
}
.gracias h4{
    color:white;
    font-size: 1.3rem;
    font-weight: 300;
}
.gracias h4 span{
    font-size: 1.8rem;
    font-weight: 700;
}
.gracias .btn-gracias{
    background-color: white;
    color: black;
    /*text-transform: uppercase;*/
    font-weight: 600;
    padding: .5rem 2rem;
    border: 1px solid white;
    transition: 0.5s;
}
.gracias .btn-gracias:hover{
    background-color: transparent;
    color:white;
}
.gracias p{
    margin-bottom: 0rem;
    color:white;
    font-size: 1.1rem;
}
/* LOADING */
.loading{
  width: 100%;
  height: 100vh;
  background:black !important;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top:0;
  left: 0;
  z-index: 100000;
  clip-path: circle(100% at 50% 50%);
  transition: clip-path 0.8s ease-in-out;
}
.loading img{
  width: 25%;
  height: auto;
}
.loading #logo-carga img{
  width: 100%;
  height: auto;
}
.loading2{
  clip-path: circle(0% at 50% 50%);
}

/* HEADER */
.navbar-collapse{
    flex-grow: 0;
}
.container-fluid{
    padding: 0rem;
}
.header{
    background-color: black;
    position: fixed;
    width: 100%;
    z-index: 100;
}
.header .navbar{
    background-color: transparent;
}
.header .navbar a,
.header .navbar-nav .nav-link.active,.header .navbar-nav .nav-link.show {
    color:white;
    cursor:pointer;
}
.header .navbar-expand-lg .navbar-nav .nav-link{
    padding: 1rem 0rem;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
}
.header .dropdown-menu-dark .dropdown-item{
    font-weight: 700;
    font-size: 1rem;
    /*text-transform: uppercase;*/
    padding: 1rem 2rem .75rem;
}
.header .dropdown-menu-dark{
    background-color: black;
}
.header .logo-principal{
    width: 100%;
    height: auto;
}
.header .navbar-brand{
    width: 180px;
    height: auto;
}

/* BANNERS */
.banners{
    padding-top: 4rem;
    position: relative;
}
.banners .carousel-inner{
    position: relative;
    overflow: hidden;
}
.banners .texto-banner{
  position: absolute;
  inset: 0;               /* equivale a top:0; right:0; bottom:0; left:0 */
  z-index: 2;
}
.banners .texto-banner .row{
    width: 100%;
    height: 100%;
}
.banners .texto-banner .row .text-cont{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 100%;
    height: 100%;
}
.banners .texto-banner .row .text-cont h2{
    color:white;
    font-weight: 700;
    font-size: 3rem;
}
.banners .texto-banner .row .text-cont p{
    color:white;
    font-size: 1.2rem;
    text-align: justify;
    font-weight: 600;
    margin:0rem;
}
.banners .btn-banner{
    background-color: white;
    color:black;
    /*text-transform: uppercase;*/
    font-weight: 600;
    padding: .5rem 2rem;
    border: 1px solid white;
    transition: 0.5s;
}
.banners .btn-banner:hover{
    background-color: transparent;
    color:white;
}
.banners img{
    width: 100%;
    height: auto;
}
.banner-contenedor {
  position: relative; /* Permite que el texto se posicione sobre la imagen */
  display: inline-block;
}

.banners .banner-contenedor img {
  width: 100%;
  height: auto;
  display: block;
}

.banners .cont-texto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centra exacto */
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%; /* opcional si quieres que el texto se adapte al ancho */
  padding: 1rem; /* evita que el texto toque los bordes */
}
.banners .cont-texto h2{
  font-size: 3rem;
  margin: 0;
  padding: 0;
  color:white;
  font-weight: 700;
  text-transform: uppercase;
}
.banners .cont-texto h2 span{
    font-weight: 300;
}
.banners .cont-texto img{
    width: 30%;
    height: auto;
    margin-bottom: 1.5rem;
}
.banners .cont-texto p{
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 0rem;
}


.video{
    margin-bottom: -.4rem;
}

/* LINEAS DE NEGOCIO */
.lineas-negocio{
    background-color: whitesmoke;
    padding: 5rem 0rem;
}
.lineas-negocio .titulo{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.lineas-negocio .titulo h3{
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0rem;
}
.lineas-negocio .titulo hr{
    border:1px solid black;
    width: 50%;
    opacity: 1;
}
.lineas-negocio .titulo p{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0rem;
}
.lineas-negocio .tarjetas-lineas{
    margin-top: 4rem;
}
.lineas-negocio .tarjetas-lineas .tarjeta-a{
    background-color: white;
    border-radius: 1rem;
    overflow: hidden;
}
.lineas-negocio .tarjetas-lineas .tarjeta-a .cont-texto{
    padding: 3.5rem;
}
.lineas-negocio .tarjetas-lineas .tarjeta-b{
    background-color: white;
    border-radius: 1rem;
    overflow: hidden;
}
.lineas-negocio .tarjetas-lineas .tarjeta-b .cont-texto{
    padding: 3.5rem;
}
.lineas-negocio .tarjetas-lineas .tarjeta-a h3{
    color:black;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0rem;
}
.lineas-negocio .tarjetas-lineas .tarjeta-a h3 span{
    font-weight: 300;
}
.lineas-negocio .tarjetas-lineas .tarjeta-a p{
    color:black;
    font-size: 1.2rem;
    text-align: justify;
    margin-bottom: 0rem;
}
.lineas-negocio .tarjetas-lineas .tarjeta-a .btn-tarjeta{
    background-color: black;
    color:white;
    padding: .5rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1.5rem;
    font-size: 1.1rem;
    transition: 0.5s;
}
.lineas-negocio .tarjetas-lineas .tarjeta-a .btn-tarjeta:hover,
.lineas-negocio .tarjetas-lineas .tarjeta-b .btn-tarjeta:hover{
    transform: scale(1.1);
    background-color: transparent;
    color:black;
    border: 1px solid black;
}
.lineas-negocio .tarjetas-lineas .tarjeta-b h3{
    color:black;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0rem;
}
.lineas-negocio .tarjetas-lineas .tarjeta-b h3 span{
    font-weight: 300;
}
.lineas-negocio .tarjetas-lineas .tarjeta-b p{
    color:black;
    font-size: 1.2rem;
    text-align: justify;
    margin-bottom: 0rem;
}
.lineas-negocio .tarjetas-lineas .tarjeta-b .btn-tarjeta{
    background-color: black;
    color:white;
    padding: .5rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1.5rem;
    font-size: 1.2rem;
    transition: 0.5s;
}
.lineas-negocio .img-01{
    background: url(../img/linea-01.webp);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.lineas-negocio .img-02{
    background: url(../img/linea-02.webp);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.lineas-negocio .img-03{
    background: url(../img/linea-03.webp);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.lineas-negocio .img-04{
    background: url(../img/linea-04.webp);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.lineas-negocio .img-05{
    background: url(../img/linea-05.webp);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.lineas-negocio .img-06{
    background: url(../img/linea-06.webp);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.biodigestores{
    transition: 0.5s;
}
.biodigestores:hover{
    background-color: transparent !important;
    border: 1px solid var(--azul-a) !important;
    color:var(--azul-a) !important;
}
.oil{
    transition: 0.5s;
}
.oil:hover{
    background-color: transparent !important;
    border: 1px solid var(--verde-a) !important;
    color:var(--verde-a) !important;
}
.contenedores{
    transition: 0.5s;
}
.contenedores:hover{
    background-color: transparent !important;
    border: 1px solid var(--verde-b) !important;
    color:var(--verde-b) !important;
}
.postes{
    transition: 0.5s;
}
.postes:hover{
    background-color: transparent !important;
    border: 1px solid var(--verde-c) !important;
    color:var(--verde-c) !important;
}
.aire{
    transition: 0.5s;
}
.aire:hover{
    background-color: transparent !important;
    border: 1px solid var(--verde-d) !important;
    color:var(--verde-d) !important;
}
.gestion{
    transition: 0.5s;
}
.gestion:hover{
    background-color: transparent !important;
    border: 1px solid var(--verde-e) !important;
    color:var(--verde-e) !important;
}

.lineas-negocio .tarjetas-lineas .tarjeta-a:hover .biodigestores{
    background-color: var(--azul-a);
    transform: scale(1.1);
}
.lineas-negocio .tarjetas-lineas .tarjeta-b:hover .oil{
    background-color: var(--verde-a);
    transform: scale(1.1);
}
.lineas-negocio .tarjetas-lineas .tarjeta-a:hover .contenedores{
    background-color: var(--verde-b);
    transform: scale(1.1);
}
.lineas-negocio .tarjetas-lineas .tarjeta-b:hover .postes{
    background-color: var(--verde-c);
    transform: scale(1.1);
}
.lineas-negocio .tarjetas-lineas .tarjeta-a:hover .aire{
    background-color: var(--verde-d);
    transform: scale(1.1);
}
.lineas-negocio .tarjetas-lineas .tarjeta-b:hover .gestion{
    background-color: var(--verde-e);
    transform: scale(1.1);
    color:black;
}


.lineas-negocio .tarjetas-lineas .tarjeta-a .titulo-tarjeta{
    display: flex;
    justify-content: start;
    align-items: center;
}
.lineas-negocio .tarjetas-lineas .tarjeta-a .titulo-tarjeta img{
    width: 45%;
    height: auto;
}
.lineas-negocio .tarjetas-lineas .tarjeta-b .titulo-tarjeta{
    display: flex;
    justify-content: start;
    align-items: center;
}
.lineas-negocio .tarjetas-lineas .tarjeta-b .titulo-tarjeta img{
    width: 45%;
    height: auto;
}


/* CLIENTES */
.clientes{
    padding: 5rem 0rem;
    background-color: white;
    overflow: hidden;
}
.clientes .titulo{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.clientes .titulo h3{
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0rem;
}
.clientes .titulo hr{
    border:1px solid black;
    width: 50%;
    opacity: 1;
}
.clientes .titulo p{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0rem;
}
.clientes .logo-marca{
    width: 100%;
    height: auto;
}
.clientes .cont-arrow .carousel-control-prev, .clientes .cont-arrow .carousel-control-next{
    position: relative;
}
.clientes .cont-arrow .carousel-control-prev i, .clientes .cont-arrow .carousel-control-next i{
    color:black;
    font-size: 2rem;
}
.clientes .cont-arrow{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.clientes .logos-clientes{
    margin-top:4rem;
}
.logos-clientes .row{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* BLOG */
.blog{
    padding: 5rem 0rem;
    background-color: whitesmoke;
    overflow: hidden;
}
.blog .titulo{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.blog .titulo h3{
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0rem;
}
.blog .titulo hr{
    border:1px solid black;
    width: 50%;
    opacity: 1;
}
.blog .titulo p{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0rem;
}
.blog .tarjetas-blog{
    margin-top: 4rem;
}
.blog .tarjetas-blog .tarjeta{
    background-color: white;
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.blog .tarjetas-blog .tarjeta img{
    width: 100%;
    height: auto;
}
.blog .tarjetas-blog .tarjeta .tarjeta-texto{
    padding: 2rem;
}
.blog .tarjetas-blog .tarjeta .tarjeta-texto h3{
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 0rem;
}
.blog .tarjetas-blog .tarjeta .tarjeta-texto .btn-nota{
    background-color: black;
    color: white;
    padding: .5rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1.5rem;
    font-size: 1.2rem;
}
.cuerpo-notas{
    padding: 5rem 0rem;
    background-color: white;
    overflow: hidden;
}
.cuerpo-notas .tarjeta-nota{
    background-color: whitesmoke;
    border-radius: 1rem;
    overflow: hidden;
}
.cuerpo-notas .tarjeta-nota img{
    width: 100%;
    height: auto;
}
.cuerpo-notas .tarjeta-nota .texto-nota{
    padding: 2rem;
}
.cuerpo-notas .tarjeta-nota .texto-nota h2{
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 0rem;
}
.cuerpo-notas .tarjeta-nota .texto-nota .btn-nota{
    background-color: black;
    color: white;
    padding: .5rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1.5rem;
    font-size: 1.2rem;
}
.cuerpo-notas .menu-notas{
    padding: 2rem;
    background-color: whitesmoke;
    overflow: hidden;
    border-radius: 1rem;
}
.cuerpo-notas .menu-notas .titulo h3{
    color:black;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5rem;
}
.cuerpo-notas .menu-notas .titulo hr{
    border:1px solid black;
    width: 30%;
    opacity: 1;
}
.cuerpo-notas .menu-notas .lista-notas{
    padding: 0rem;
    margin: 0rem;
}
.cuerpo-notas .menu-notas .lista-notas li{
    list-style: none;
    display: flex;
}
.cuerpo-notas .menu-notas .lista-notas li a{
    color:black;
    font-weight: 600;
}

/* CERTIFIACIONES */
.certificaciones{
    padding: 5rem 0rem;
    background-color: black;
    overflow: hidden;
}
.certificaciones .titulo{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.certificaciones .titulo h3{
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0rem;
    color:white;
}
.certificaciones .titulo hr{
    border:1px solid white;
    width: 50%;
    opacity: 1;
}
.certificaciones .titulo p{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0rem;
    color:white;
}
.certificaciones .logos-certificaciones{
    margin-top: 4rem;
}
.certificaciones .logos-certificaciones .row{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.certificaciones .logos-certificaciones img{
    width: 100%;
    height: auto;
}

/* FORMULARIO */
.formulario{
    padding: 5rem 0rem;
    background-color:whitesmoke;
    overflow: hidden;
}
.formulario .titulo{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.formulario .titulo h3{
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0rem;
}
.formulario .titulo hr{
    border:1px solid black;
    width: 50%;
    opacity: 1;
}
.formulario .titulo p{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0rem;
}
.formulario .form{
    margin-top: 4rem;
}
.formulario .form textarea{
    resize: none;
    padding: 1rem .75rem !important;
}
.formulario .form .btn-form{
    background-color: black;
    color: white;
    padding: .5rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1.5rem;
    font-size: 1rem;
}

.formulario-w{
    padding: 5rem 0rem;
    background-color:white;
    overflow: hidden;
}
.formulario-w .titulo{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.formulario-w .titulo h3{
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0rem;
}
.formulario-w .titulo hr{
    border:1px solid black;
    width: 50%;
    opacity: 1;
}
.formulario-w .titulo p{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0rem;
}
.formulario-w .form{
    margin-top: 4rem;
}
.formulario-w .form textarea{
    resize: none;
    padding: 1rem .75rem !important;
}
.formulario-w .form .btn-form{
    background-color: black;
    color: white;
    padding: .5rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1.5rem;
    font-size: 1rem;
}

.cuerpo-contacto{
    padding: 5rem 0rem;
    overflow: hidden;
    background-color: white;
    margin-top:-.4rem
}
.cuerpo-contacto .formas-contacto{
    overflow: hidden;
}
.cuerpo-contacto .formas-contacto .cont-forma{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    text-align: start;
    background-color: whitesmoke;
    border-radius: 1rem;
    padding: 2.5rem;
}
.cuerpo-contacto .formas-contacto .cont-forma h4{
    font-weight: 700;
    color:black;
    font-size: 1.2rem;
}
.cuerpo-contacto .formas-contacto .cont-forma p{
    font-weight: 500;
    color:black;
    font-size: 1.1rem;
    margin: 0rem;
    padding: 0rem;
}
.cuerpo-contacto .formas-contacto .cont-forma p a{
    color:black;
    transition: .5s;
}
.cuerpo-contacto .formas-contacto .cont-forma .numeros{
    display: flex;
}
.cuerpo-contacto .formas-contacto .cont-forma p a:hover{
    opacity: .5;
}
.cuerpo-contacto .formas-contacto .cont-forma p span{
    font-weight: 700;
}


/* FOOTER */
footer{
    background-color: black;
    overflow: hidden;
    padding: 5rem 0rem 0rem;
}
footer .logo{
    color:white;
}
footer .redes-footer{
    display: flex;
    padding: 0rem;
    margin:0rem
}
footer .redes-footer li{
    list-style: none;
}
footer .redes-footer i{
    color:white;
    font-size: 1.5rem;
}
footer .redes-footer a{
    color:white;
}
footer .medios-contacto{
    padding: 0rem;
    margin:0rem
}
footer .medios-contacto li{
    list-style: none;
    display: flex;
    justify-content: start;
    align-items: center;
    color:white;
}
footer .medios-contacto i{
    color:white;
    font-size: 1.5rem;
}
footer .medios-contacto a{
    color:white;
}
footer h4{
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 700;
    color:white;
}
footer .lista-link{
    padding:0rem;
    margin:0rem;
    list-style: none;
}
footer .lista-link i, footer .lista-link a{
    color:white;
}
footer .copy{
    padding: 3rem 0rem 2rem;
}
footer .copy h5{
    text-align: center;
    color:white;
    font-size: 1rem;
}
footer .logo{
    width: 50%;
    height: auto;
}
footer .logo .logo-principal{
    width: 100%;
    height: auto;
}

/* DESCRIPCIONES LINEAS */
.descripcion-linea{
    padding: 5rem 0rem;
    background-color: whitesmoke;
    margin-top:-.4rem;
}
.descripcion-linea .cont-descripcion{
    background-color: white;
    padding: 2.5rem;
    border-radius: 1rem;
    overflow: hidden;
}
.descripcion-linea .cont-descripcion h3{
    color:black;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 0rem;
    margin: 0rem;
}
.descripcion-linea-black{
    padding: 5rem 0rem;
    background-color: black;
}
.descripcion-linea-black .cont-descripcion{
    background-color: white;
    padding: 2.5rem;
    border-radius: 1rem;
    overflow: hidden;
}
.descripcion-linea-black .cont-descripcion h3{
    color:black;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 0rem;
    margin: 0rem;
}

/* PROYECTOS */
.proyectos{
    background-color: white;
    padding: 5rem 0rem;
    overflow: hidden;
}
.proyectos .titulo{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.proyectos .titulo h3{
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0rem;
}
.proyectos .titulo hr{
    border:1px solid black;
    width: 50%;
    opacity: 1;
}
.proyectos .titulo p{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0rem;
}
.proyectos .cont-proyectos{
    margin-top:4rem;
}
.proyectos .cont-proyectos .tarjeta-proyecto{
    background-color: whitesmoke;
    border-radius: 1rem;
    overflow: hidden;
    transition: 0.5s;
    border: 1px solid whitesmoke;
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .biodigestores{
    background-color: var(--azul-a) !important;
    transform: scale(1.1);
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .biodigestores:hover{
    background-color: transparent !important;
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .oil{
    background-color: var(--verde-a) !important;
    transform: scale(1.1);
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .oil:hover{
    background-color: transparent !important;
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .contenedores{
    background-color: var(--verde-b) !important;
    transform: scale(1.1);
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .contenedores:hover{
    background-color: transparent !important;
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .postes{
    background-color: var(--verde-c) !important;
    transform: scale(1.1);
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .postes:hover{
    background-color: transparent !important;
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .aire{
    background-color: var(--verde-d) !important;
    transform: scale(1.1);
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .aire:hover{
    background-color: transparent !important;
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .gestion{
    background-color: var(--verde-e) !important;
    transform: scale(1.1);
    color:black !important;
}
.proyectos .cont-proyectos .tarjeta-proyecto:hover .gestion:hover{
    background-color: transparent !important;
    color:var(--verde-e) !important;
}
.proyectos .cont-proyectos .tarjeta-proyecto .texto-proyecto{
    padding: 2rem;
    height: 295px;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    width: 100%;
}
.proyectos .cont-proyectos .tarjeta-proyecto img{
    width: 100%;
    height: auto;
}
.proyectos .cont-proyectos .tarjeta-proyecto .texto-proyecto h3{
    font-size: 1.5rem;
    font-weight: 700;
    color:black;
    text-transform: uppercase;
}
.proyectos .cont-proyectos .tarjeta-proyecto .texto-proyecto p{
    font-size: 1rem;
    font-weight: 500;
    color:black;
    text-align: justify;
    padding: 0rem;
    margin: 0rem;
}
.proyectos .cont-proyectos .tarjeta-proyecto .texto-proyecto .btn-proyecto{
    background-color: black;
    color: white;
    padding: .4rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1.5rem;
    font-size: 1rem;
    width: 100%;
}

/* INFORMACION ABOUT */
.info-about{
    padding: 5rem 0rem;
    background-color: whitesmoke;
    overflow: hidden;
}
.info-about .cont-bullet-a{
    background-color: white;
    border-top-left-radius: 10rem;
    border-bottom-left-radius: 10rem;
}
.info-about .cont-bullet-a .cont-texto{
    padding: 4rem 4rem 4rem 8rem;
    overflow: hidden;
}
.info-about .cont-bullet-a .cont-texto h4{
    font-weight: 300;
    font-size: 1.3rem;
    color:black;
    text-align: justify;
    margin:0rem;
    padding: 0rem;
    line-height: 1.5;
}
.info-about .cont-bullet-b{
    background-color: white;
    border-top-right-radius: 15rem;
    border-bottom-right-radius: 15rem;
}
.info-about .cont-bullet-b .cont-texto{
    padding: 4rem 8rem 4rem 4rem;
    overflow: hidden;
}
.info-about .cont-bullet-b .cont-texto h4{
    font-weight: 300;
    font-size: 1.3rem;
    color:black;
    text-align: justify;
    margin:0rem;
    padding: 0rem;
     line-height: 1.5;
}
.img-about-01{
    background: url(../img/about-01.webp);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.img-about-02{
    background: url(../img/about-02.webp);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* MISIÓN / VISIÓN */
.mision-vision{
    padding: 5rem 0rem;
    background-color: white;
    overflow: hidden;
}
.mision-vision .contenedor-acordeones .accordion-button:not(.collapsed){
    background-color: black;
    box-shadow: none;
    color:white;
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.2rem;
}
.mision-vision .contenedor-acordeones .accordion-button{
    background-color: black;
    box-shadow: none;
    color:white;
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.2rem;
}
.mision-vision .contenedor-acordeones .accordion-button::after{
    background-image: url(../img/close.png);
    transform: none;
}
.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed{
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-body{
    background-color: whitesmoke;
}
.accordion-body p{
    margin-bottom: 0rem;
    font-weight: 300;
}
.accordion-body ul{
    margin-bottom: 0rem;
}
.accordion-body ul li{
    font-weight: 300;
}

/* PROPUESTA */
.propuesta{
    background-color:whitesmoke;
    padding: 5rem 0rem;
    overflow: hidden;
}
.propuesta .titulo{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.propuesta .titulo h3{
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0rem;
    color:black;
}
.propuesta .titulo hr{
    border:1px solid black;
    width: 50%;
    opacity: 1;
}
.propuesta .titulo p{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0rem;
    color:black;
}
.propuesta .texto-propuesta{
    margin-top:4rem;
}
.propuesta .texto-propuesta p{
    color:black;
    margin:0rem;
    padding:0rem;
    text-align: justify;
}
.propuesta .texto-propuesta .btn-propuesta{
    background-color: white;
    color: black;
    padding: .4rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1.5rem;
    font-size: 1rem;
    width: 100%;
}
.propuesta .cont-arrow .carousel-control-prev, .propuesta .cont-arrow .carousel-control-next{
    position: relative;
}
.propuesta .cont-arrow .carousel-control-prev i, .propuesta .cont-arrow .carousel-control-next i{
    color:white;
    font-size: 2rem;
}
.propuesta .cont-arrow{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.propuesta .logos-clientes{
    margin-top:2rem;
}
.propuesta .logos-clientes .logo-marca{
    width: 100%;
    height: auto;
}

.banner-pc{
    display: block;
}
.banner-tablet{
    display: none;
}

/* BIONOMIOS */
.binomio-a{
    background-color: white;
    overflow: hidden;
}
.binomio-a .cont-text{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    text-align: start;
    padding: 5rem 0rem 5rem 5rem;
}
.binomio-a .cont-text h3{
    font-weight: 700;
    margin-bottom: 0rem;
}
.binomio-a .cont-text p{
    font-size: 1.1rem;
    font-weight: 300;
    margin-bottom: 0rem;
}
.binomio-b{
    background-color: whitesmoke;
    overflow: hidden;
}
.binomio-b .cont-text{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    text-align: start;
    padding: 5rem 5em 5rem 0rem;
}
.binomio-b .cont-text h3{
    font-weight: 700;
    margin-bottom: 0rem;
}
.binomio-b .cont-text p{
    font-size: 1.1rem;
    font-weight: 300;
    margin-bottom: 0rem;
}
.binomio-b .cont-text ul li,
.binomio-a .cont-text ul li{
    font-size: 1.1rem;
    font-weight: 300;
}
.binomio-b .cont-text ul,
.binomio-a .cont-text ul{
    margin-bottom: 0rem;
}
.bio-01{
    background-image: url(../img/bio-01.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.bio-02{
    background-image: url(../img/bio-02.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.bio-03{
    background-image: url(../img/bio-03.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.bio-04{
    background-image: url(../img/bio-04.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.bio-05{
    background-image: url(../img/bio-05.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.bio-06{
    background-image: url(../img/bio-06.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.bio-07{
    background-image: url(../img/bio-07.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.cont-01{
    background-image: url(../img/cont-01.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.cont-02{
    background-image: url(../img/cont-02.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.cont-03{
    background-image: url(../img/cont-03.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.cont-04{
    background-image: url(../img/cont-04.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.cont-05{
    background-image: url(../img/cont-05.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.cont-06{
    background-image: url(../img/cont-06.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.cont-07{
    background-image: url(../img/cont-07.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.poste-01{
    background-image: url(../img/poste-01.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.poste-02{
    background-image: url(../img/poste-02.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.poste-03{
    background-image: url(../img/poste-03.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.poste-04{
    background-image: url(../img/poste-04.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.poste-05{
    background-image: url(../img/poste-05.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.poste-06{
    background-image: url(../img/poste-06.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.aire-01{
    background-image: url(../img/aire-01.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.aire-02{
    background-image: url(../img/aire-02.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.aire-03{
    background-image: url(../img/aire-03.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.aire-04{
    background-image: url(../img/aire-04.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.aire-05{
    background-image: url(../img/aire-05.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.gestion-01{
    background-image: url(../img/gestion-01.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.gestion-02{
    background-image: url(../img/gestion-02.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.gestion-03{
    background-image: url(../img/gestion-03.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.gestion-04{
    background-image: url(../img/gestion-04.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.gestion-05{
    background-image: url(../img/gestion-05.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.gestion-06{
    background-image: url(../img/gestion-06.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

/* PANTALLAS DE COMPUTADORA PEQUEÑAS */
@media (max-width:1300px){
    .proyectos .cont-proyectos .tarjeta-proyecto .texto-proyecto{
        height: 350px;
    }
    footer h4{
        font-size: 1rem;
    }
    footer .lista-link i, footer .lista-link a, footer .medios-contacto li, footer .copy h5{
        font-size: .9rem;
    }
    .cuerpo-contacto .formas-contacto .cont-forma p{
        font-size: 1.1rem;
    }
}

.carousel-control-next, .carousel-control-prev{
    width: 100% !important;
}
.carrucel-pc{
    display: block;
}
.carrucel-tablet{
    display: none;
}
.carrucel-movil{
    display: none;
}
.banner-movil{
    display: none !important;
}

/* TABLET VERTICAL */
@media (max-width:835px){
    .banner-pc{
        display: none;
    }
    .navbar-nav{
        text-align: end;
    }
    .dropdown-menu{
        border:none;
        text-align: end;
    }
    .banner-tablet{
        display: block;
    }
    .banners .texto-banner .row .text-cont h2{
        font-size: 2.5rem;
    }
    .banners .btn-banner{
        width: 100%;
    }
    .lineas-negocio .titulo h3, .clientes .titulo h3,
    .propuesta .titulo h3, .blog .titulo h3, .certificaciones .titulo h3, .formulario .titulo h3, .formulario-w .titulo h3,
    .proyectos .titulo h3{
        font-size: 2.5rem;
    }
    .lineas-negocio .titulo p, .clientes .titulo p{
        font-size: .9rem;
    }
    .lineas-negocio .img-01, .lineas-negocio .img-02,
    .lineas-negocio .img-03, .lineas-negocio .img-04,
    .lineas-negocio .img-05, .lineas-negocio .img-06{
        width: 100%;
        height: 350px;
    }
    .carrucel-tablet{
        display: block;
    }
    .carrucel-pc{
        display: none;
    }
    .clientes .logos-clientes{
        margin-top: 2rem;
    }
    .descripcion-linea .cont-descripcion h3{
        font-size: 1.2rem;
    }
    .binomio-a .cont-text,
    .binomio-b .cont-text{
        padding: 4rem 0rem;
    }
    .bio-01, .bio-02,
    .bio-03, .bio-04,
    .bio-05, .bio-06,
    .bio-07, .cont-01,
    .cont-02, .cont-03,
    .cont-04, .cont-05,
    .cont-06, .cont-07,
    .poste-01, .poste-02,
    .poste-03, .poste-04,
    .poste-05, .poste-06,
    .aire-01, .aire-02,
    .aire-03, .aire-04,
    .aire-05, .gestion-01,
    .gestion-02, .gestion-03,
    .gestion-04, .gestion-05,
    .gestion-06{
        height: 450px;
    }
    .proyectos .cont-proyectos .tarjeta-proyecto .texto-proyecto h3{
        font-size: 1.3rem;
    }
    .loading img{
        width: 40%;
    }
    .cuerpo-notas .tarjeta-nota .texto-nota h2{
        font-size: 1.7rem;
    }
}

/* CELULARES */
@media (max-width:440px){
    .gracias img{
        width: 70%;
    }
    .gracias h4{
        font-size: 1.1rem;
    }
    .loading img{
        width: 60%;
    }
    .banners .texto-banner .row .text-cont p{
        display: none;
    }
    .banner-tablet{
        display: none;
    }
    .banner-pc{
        display: none !important;
    }
    .banner-movil{
        display: block !important;
    }
    .banners .texto-banner .row .text-cont h2{
        font-size: 2rem;
        text-align: center;
    }
    .lineas-negocio .titulo h3, .clientes .titulo h3,
    .propuesta .titulo h3, .blog .titulo h3, .certificaciones .titulo h3, .formulario .titulo h3, .formulario-w .titulo h3{
        font-size: 2rem;
    }
    .lineas-negocio .tarjetas-lineas .tarjeta-a .titulo-tarjeta img,
    .lineas-negocio .tarjetas-lineas .tarjeta-b .titulo-tarjeta img{
        width: 100%;
    }
    .lineas-negocio .tarjetas-lineas .tarjeta-a p,
    .lineas-negocio .tarjetas-lineas .tarjeta-b p{
        font-size: 1rem;
    }
    .lineas-negocio .tarjetas-lineas .tarjeta-a .btn-tarjeta,
    .lineas-negocio .tarjetas-lineas .tarjeta-b .btn-tarjeta{
        font-size: 1rem;
    }
    .carrucel-tablet{
        display: none;;
    }
    .carrucel-movil{
        display: block;
    }
    .carousel-control-next, .carousel-control-prev{
        margin-right: .9rem !important;
    }
    .blog .tarjetas-blog .tarjeta .tarjeta-texto h3{
        font-size: 1.5rem;
    }
    .blog .tarjetas-blog .tarjeta .tarjeta-texto .btn-nota{
        width: 100%;
        font-size: 1rem;
    }
    footer .logo{
        width: 70%;
    }
    .banners{
        padding-top: 4.5rem;
    }
    .banners .cont-texto img{
        width: 90%;
    }
    .descripcion-linea .cont-descripcion h3,
    .descripcion-linea-black .cont-descripcion h3{
        font-size: 1.1rem;
    }
    .descripcion-linea .cont-descripcion h3 b,
    .descripcion-linea-black .cont-descripcion h3 b{
        font-size: 1.3rem;
    }
    .binomio-a .cont-text p,
    .binomio-b .cont-text p,
    .binomio-b .cont-text ul li, .binomio-a .cont-text ul li{
        font-size: 1rem;
    }
    .banners .cont-texto p{
        font-size: 1.2rem;
    }
    .info-about .cont-bullet-a .cont-texto h4,
    .info-about .cont-bullet-b .cont-texto h4{
        font-size: 1rem;
    }
    .info-about .cont-bullet-a .cont-texto,
    .info-about .cont-bullet-b .cont-texto{
        padding:2.5rem;
    }
    .info-about .cont-bullet-a, .info-about .cont-bullet-b{
        border-radius: 2rem;
    }
    .cuerpo-contacto .formas-contacto .cont-forma .numeros{
        flex-direction: column;
    }
}
@media (max-width:360px){
    .banners .texto-banner .row .text-cont h2{
        font-size: 1.7rem;
    }
    .lineas-negocio .titulo h3, .clientes .titulo h3, .propuesta .titulo h3, .blog .titulo h3, .certificaciones .titulo h3, .formulario .titulo h3, .formulario-w .titulo h3, .proyectos .titulo h3{
        font-size: 1.8rem;
    }
    .lineas-negocio .tarjetas-lineas .tarjeta-a .cont-texto,
    .lineas-negocio .tarjetas-lineas .tarjeta-b .cont-texto{
        padding: 2rem;
    }
    .proyectos .cont-proyectos .tarjeta-proyecto .texto-proyecto h3{
        font-size: 1.2rem;
    }
    .banners .cont-texto h2{
        font-size: 2.2rem;
    }
    .cuerpo-notas .tarjeta-nota .texto-nota h2{
        font-size: 1.5rem;
    }
    .cuerpo-contacto .formas-contacto .cont-forma p{
        font-size: 0.9rem;
    }
    .cuerpo-contacto .formas-contacto .cont-forma h4{
        font-size: 1rem;
    }
}