*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
   
}

/* estilo del header */
.logo{
 
    height: 5rem;
width: 12rem;
    
}
.barraNav{
    height: 5rem;
    position: fixed !important;
    width: 100%;
    background-color: transparent !important;
    
}

.imgBanner{
    width: 100%;
    height: auto;
    box-shadow: 4px 5px 35px;
    
}
.jumbotron{
  margin-bottom: 0 !important;
    padding: 0 !important;
    padding-bottom: 1rem !important;
    background-color: #E8E9E9 !important;
}
.overlay{
    text-align: center;
    margin-top: 2rem;
    padding-bottom: 3rem;
}
.solid-navbar {
  height: 5rem; 
  position: fixed !important;
    width: 100%;
    background-color: #C8C7C5; 
    z-index: 1000; 
  }
 .catBarra{
  gap: 1rem;
 }
             /* estilo del main */

  /* estilo del sobre nosotros */
  main{
    background-color: #E8E9E9;
  }
  .sobreNosotros{
    padding-top: 2rem;
    padding: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
  }
  .divImgNosotros{
    display: flex;
   justify-content: center;
    align-items: center;
  }
  .imgNosotros{
    width:90%;
    height: 70%;
    border-radius:  10px;
    box-shadow: 4px 5px 20px;
  }
  .divNosotros{
    padding-top: 0;
    margin: 1rem;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
  }
  .divTituloNosotros{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
 .listaNos{
    margin:1rem;
 }
 /* estilo tratamientos */
 .tratamientos{
  display: flex;
  justify-content: center;
  align-items: center;
 
 }
 .divTratamientos{
    display: flex;
    flex-direction: column;
    gap: 4rem;
    justify-content: space-around;
    align-items: center;
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 3rem;
 }
 .card {
    transition:  0.3s ease-in-out !important; 
    box-shadow: 0.2px 0.2px 5px black;
}

.card:hover {
    transform: scale(1.05) !important; 
}
/* contacto */
.divContacto{
  margin-bottom: 3rem !important;
  padding-top: 2rem;
}
.divContactoMapa{
  margin-top: 4rem;
  margin-bottom: 6rem;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
}
.logoContacto{
  width: 30%;
height: 30%;
}
.divReferencias{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}
.divContenedorReferencias{

  display: flex;
  justify-content: center;
  align-items: center;
  
}
.divMapa{
  display: flex;
  align-items: start;
  justify-content: end;
  margin-right: 5rem;
}
.mapa{
  width: 80%;
  height: 100%;
  box-shadow: 1px 1px 10px rgb(39, 37, 37);
}
.divTituloContacto{
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-bottom: 2rem;
  gap: 0.5rem;
}
/* seccion trabaja con nosotros */
.divAplicar{
  margin-left: 2rem;
  margin-right: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-bottom: 2rem;
}
.imgAplicar{
  width:85%;
  height: auto;
}
.aplicarTexto{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.divImgAplicar{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* boton flotante  */
#botonFlotante {
  position: fixed;
  bottom: 2rem; 
  width: 4rem; 
  height:4rem; 
  overflow: hidden; 
  z-index: 1000;

}
.imgFija{
  width: 90%;
  height: auto; 
  display: block; 
}
/* estilos del footer */
footer{
  background-color: #C8C7C5;
  padding-top: 3rem;
}
.divFooterLogos{
  overflow: hidden;
  background-color: #C8C7C5 !important;
}
.logoFooter{
  width: 4rem;
  height: 4rem;
}
.contenedorEnlaces{
  display: flex;
  flex-direction: column;

  align-items: center;
}
.textoFooter{
  text-decoration: none;
  color: #3c4851;
}
/* estilos globales */
a {
  text-decoration: none; 
  outline: none; 
}
a:active {
  color: inherit; 
  text-decoration: none; 
}
.titulos {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  color:#3c4851;
  font-family: 'Quicksand', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  padding-bottom: 5px;
  text-align: center;
 
}
.parrafos{
  font-size: 20px !important; 
  line-height: 1.6; 
  font-family: Arial, Helvetica, sans-serif; 
  text-align: start;
  margin: 0 auto;
  padding: 10px;
  color: #333; 
  
}
footer{
  background-color: #C8C7C5 !important;
}
/* estilos para movil y tablet */
@media screen and (max-width: 990px) {
  /* header */
  .barraNav{
    position: relative !important;;
    top: 0;
  margin-top: 0;
    height: 5rem;
    width: 100%;
    background-color: #C8C7C5 !important;
    
}
.logo{
  margin-top: 0;
  height: 4rem;
width: 10rem;
}
.tituloBanner{
  display: none;
}
.overlay{
  padding-bottom: 0;
}
.catBarra{
  text-align: end;
  
}

 /* nosotros */
 .sobreNosotros{
 display: flex;
 flex-direction: column;
 gap: 2rem;
 
 }
 
.ulBeneficios{
  display: flex;
  flex-direction: column;
  align-items: center;
}
 /* tratamientos */
 .divTratamientos{
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 3rem;
 }
 .divNosotros{
  align-items: center;
 }
 .card{
  width: 18rem;
 }
 /* contacto */

.divContactoMapa{
  display: flex;
  flex-direction: column;
  
  gap: 3rem;
}
.divContenedorReferencias{
  margin-left: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.logoContacto{
  width: 30%;
}
.divMapa{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
}
.mapa{
  width: 90%;
  height: 15rem;
  margin-bottom: 2rem;
}
/* aplicar */
.divAplicar{
  display: flex;
  flex-direction: column;
}
.imgAplicar{
  width: 100%;
}
.aplicarTexto{
  gap: 1rem;
}
/* footer */

.contenedorEnlaces{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}
.enlacesFooter{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.container{
  gap: 1rem;
}
.logoFooter{
  width: 3rem;
  height: 3rem;
}
.parrafos{
  text-align: center;
}
.contenedorCreador{
margin-top: 2rem;
}
}

/*para celular */
@media screen and (max-width: 600px) {
  .linkBarra{
    padding: 0.2rem 0.2rem !important;
  }
}