* {
  box-sizing: border-box;
}
body {
  font-family: Verdana, sans-serif;
  margin: 0;
  background-color: #f2efe6;
}
body::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  background-color: #c9cac7;
}

body:hover::-webkit-scrollbar {
  display: initial;
}

body::-webkit-scrollbar-thumb {
  background-color: rgb(96, 99, 102);
  border-radius: 1rem;
  height: 1px;
}

/* Ocultar cosas responsivo */
/* .Ocultar{
  display: block;
} */

.ButtonNaranja{
  margin: 10px 0;
  background-color: #f2efe6;
  padding: 0.7rem;
  color: #000;
  border: none;
  border-radius: 0.2rem;
  cursor: pointer;
  font-weight: 500;
}

/* Este es el div escondible del inventario  ***********************************/
#myDIV{
  display: none;

  width: 100%;

}


/* Navbar **********************************************************************/
.main-header{
 
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0C0C0C;
  padding: 1% 2%;
}

.main-logo img{
 width: 150px;
}

.main-nav{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  margin-left: -100%;
  transition: all .2s linear;
  background-color: rgba(0,0,0,.7);
  z-index: 999;
}

.main-nav.show{
  margin-left: 0;
}

.nav-links{
  background-color: #0C0C0C;
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
}

.link-item{
  margin-top: 2rem;
  color: white;
  text-decoration: none;
  font-weight: 500;

  position: relative;
}

.link-item::after {
  position: absolute;
  content: "";
  background-color: #ffffff;
  color: #0158ca;
  bottom: -5px;
  left: 0;
  width: 0%;
  height: 2px;
  transition: 0.3s ease all;
}

.link-item:hover::after {
  width: 100%;
}

.button-menu{
  z-index: 999;
  width: 40px;
  height: 40px;
  border: none;
  display: flex;
  background: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color:white;
  position: static;
}

.button-menu span{
  width: 37px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: rgb(213, 213, 213);
  border-radius: 3px;
  transform-origin: 4px 0px;
  transition: all .2s linear;
}

.button-menu.close span {
  opacity: 1;
  transform: rotate(45deg) translate(0px, 0px);
  background: #ffffff;
}

.button-menu.close span:nth-child(2){
  transform: rotate(-45deg) translate(-8px, 5px);
}

.button-menu.close span:nth-child(3){
  display: none;
}
.hidenImgMenu{
 display: none;
}
.ButtonMenuH{
  width: 100%; border: none; background-color: #0C0C0C; color: white; font-weight: 500;
}
.Redes{
  width: 100px;
  display: flex;
  justify-content: center;
}


@media screen and (min-width:800px) {
  .button-menu{
    display: none;
  }

  .main-logo{
    flex-basis: 30%;
  }

  .main-nav{
    position: static;
    margin-left: 0;
    flex-basis: 70%;
    height: 100%;
  }

  .nav-links{
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    background: #0C0C0C;
  }

  .link-item{
    display: inline-block;
    margin-top: 0;
    margin-right: 2rem;
  }

 
}
.AcomodoLista{
display: flex;
width: 100%;
justify-content: flex-end;
}
a{
  text-decoration: none;
}
li{
  list-style: none;
}



/* Acerca de nosotros toram *******************************************************************************************************/
.AcercaDeToram{
  display: flex;
  justify-content: space-between;
  align-items: center;   
}
.AcercaImg{
  display: flex;
  justify-content: flex-end;
  width: 50%; padding: 1%
}
.AcercaImg img{
  width: 70%;
  border-radius: 0.5rem;

}
.AcercaText{
  width: 50%
}
/* beneficios */
#Beneficios{
  width: 100%; 
  background-image:   url(./img/Edificios.jpg);
  background-position: center;
  object-fit: cover;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150px;
}
/* Asesores *********************************************************************************************************************/
#Asesores{
  width: 100%; 
  background-image:   url(./img/Edificios.jpg);
  background-position: center;
  object-fit: cover;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150px;
}
/* Tarjetas inventario */

.CardInventario{
  display: flex;
  justify-content: space-between;
  align-items: center;   
}
.CardInventImg{
  display: flex;
  justify-content: flex-start;
  width: 50%; padding: 1%
}
.CardInventImg img{
  width: 70%;
  border-radius: 0.5rem;

}
.InventText{
  width: 50%
}


/* Asesorer ***********************************************************************************************************************/
.content a,i{
  color: #2cae3d;
  text-decoration: none;
}
.card .content p:hover { color: #046a24;}

/* toram tarjetas *****************************************************************************************************************/
.ContenedorTarjetas {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.card {
  position: relative;
  width: 200px;
  height: 250px;
  border-radius: 10px;
  box-shadow: 2px 3px 5px rgba(73, 69, 52, 0.4);
  margin: 10px;
}

.card .content {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  padding: 20px;
  background: #fff;
}

.card .content .img {
  /* height: 50%; */
  margin-bottom: 20px;
}

.card .content .img img {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.card .content span {
  position: absolute;
  width: 600px;
  height: 130px;
  /* background-image: url(img/hojas.jpg); */
  /* background-repeat: no-repeat;
  background-position: center;
  object-fit: cover;
  object-position: center; */
  background: linear-gradient(to right, #0c0c0c, #1a161f);
  transform: rotate(-35deg);
  top: -100px;
  left: -150px;
}

.card .content h4 {
  font-size: 18px;
  color: #1a1919;
  margin: 0;
  padding: 0;
}

.card .content h6 {
  font-size: 13px;
  color: #CE933E;
  margin: 0;
  padding: 0;
}

.card .content p {
  font-size: 13px;
  color: #1a161f;
  /* margin-top: 10px; */
}

.card .links {
  position: absolute;
  z-index: 90;
  width: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 2px 3px 5px rgba(73, 69, 52, 0.4);
  padding: 20px;
  align-items: center;
  right: 10px;
  top: 15px;
  transition: 0.5s;
  z-index: 999;
}

.card:hover .links {
  /* right: -50px; */
  border-radius: 0 10px 10px 0;
}

.card .links a {
  font-size: 20px;
  color: #646069;
}

.card .links a:nth-child(1):hover {
  color: #0158ca;
}

.card .links a:nth-child(2):hover {
  color: #e41cd3;
}

.card .links a:nth-child(3):hover {
  color: #2cae3d;
}

.card .links a:nth-child(4):hover {
  color: #fe0000;
}
/* contactanos *************************************************************************/
.iconosContactos{
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 1% 10%; background-color: white;
}
.MinidivContactos{
  text-align: center; width: 300px;
}

/* Carrucel *****************************************************************************/
/* .LogoBienvenido{
  width: 190px;
  height: 50px;
  object-fit: fill;
} */
.swiper-hero {
  width: 100%;
  max-width: 1600px;
}

.swiper-hero .swiper-slide {
  width: 250px;
}

.swiper-hero img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  
  .swiper-hero img {
    width: 100%;
    object-position: left;
    height: 454px;
    
  }

}



.swiper-hero .swiper-button-prev,
.swiper-hero .swiper-button-next {
  --swiper-navigation-size: 20px;
  background-color: white;
  height: 70px;
  width: 50px;
  margin-top: -35px;

  opacity: 0;
  transition: opacity 0.3s;
}

.swiper-hero .swiper-button-prev {
  border-radius: 0 65px 65px 0;
  left: -10px;
}
.swiper-hero .swiper-button-next {
  border-radius: 65px 0 0 65px;
  right: -10px;
}

.swiper-hero:hover .swiper-button-prev,
.swiper-hero:hover .swiper-button-next {
  opacity: 1;
}

.swiper-hero .swiper-pagination {
  --swiper-pagination-color: white;
  --swiper-pagination-bullet-size: 6px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.25;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 2px;
}

.swiper-hero .swiper-pagination-bullet {
  box-shadow: inset 0 0 0 1px #fff;
}

.swiper-hero .swiper-pagination-bullet-active {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* Responsivo ***************************************************************************/
@media only screen and (max-width: 800px) {
  /* Carrucel */
 

  .Bienvenidos{
    display: block;
  }
  /* Acerca de toram   */
  .AcomodoLista{
    display: block;
    width: 100%;
    justify-content: center;
    }
  .AcercaDeToram{
    display: block;
    justify-content: center;
    align-items: center;   
  }
  .AcercaImg{
    width: 100%
  }
  .AcercaImg img{
    width: 100%;
  }
  .AcercaText{
    width: 100%
  }
  /* Targetas de inventario  */
  .CardInventario{
    display: block;
    
  }
  .CardInventImg{
   
    width: 100%; 
  }
  .CardInventImg img{
    width: 100%;

  
  }
  .InventText{
    width: 100%
  }
  /* Asesores card */
  .card {

    width: 300px;

  }

  .hidenImgMenu{ display: block;
  margin: 10px;
  padding: 2%;
  }
  .link-item li{
    width: 100%;
    padding: 6%;
    border-bottom: 1px solid #1a161f;
  }
  /* Contactanos */
  .iconosContactos{
    width: 100%; display: block;
    text-align: center;
  }
  .MinidivContactos{
    text-align: center; width: 100%;
  }
  .Ocultar{
    display: none;
  }
  .Redes{
    width: 100%;
  }

}