@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

main {
  display: flex;
  justify-content: center;
  background-color: #f4f4f6;
  width: 100%; /* Hace que el contenido dentro ocupe el 100% del ancho del body */
  box-sizing: border-box;
}

.columna-central {
  width: 85%;
  background-color: #f4f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 320px) and (max-width: 900px) {
  .columna-central {
    width: 100%;
  }
}

.carrousel {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.carrousel .grande {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  transition: all 0.8s ease;
}
@media (min-width: 320px) and (max-width: 900px) {
  .carrousel .grande {
    padding: 0;
  }
}

.carrousel .puntos {
  width: 100%;
  padding: 0.3vh 0 0 3vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.carrousel .punto {
  margin: 1em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: 5px 5px 10px #929292, -5px -5px 10px #ffffff;
}

.carrousel .activo {
  background-color: #000000;
}

@media (min-width: 1024px) {
  .carrousel .img {
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media (min-width: 320px) and (max-width: 900px) {
  .carrousel .img {
    /*
    height: 50vh;
    padding: 0.3em;
    object-fit: fill;
    */
    padding: 0.3em;
    max-height: 50vh;
    -o-object-fit: fill;
       object-fit: fill;
  }
}

.marcas img {
  height: auto;
  width: 20%;
  -o-object-fit: contain;
     object-fit: contain;
}

.grupoMarcas {
  align-items: center;
  padding: 0 clamp(1px, 5vw, 4.5rem);
}

@media (min-width: 1024px) {
  .carrousel .video {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media (min-width: 320px) and (max-width: 900px) {
  .carrousel .video {
    height: auto;
    width: 100%;
    -o-object-fit: fill;
       object-fit: fill;
  }
}

.ofertas, .marcas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-x: hidden;
  width: 100%;
  margin: 3vh 0;
}

.ofertas h2, .marcas h2 {
  font-family: "Work Sans", sans-serif;
  font-size: clamp(1px, 2vw, 1.8rem);
  font-weight: bold;
  color: #000000;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 3vh;
}
@media (min-width: 320px) and (max-width: 900px) {
  .ofertas h2, .marcas h2 {
    font-size: 4vw;
  }
}

.contenedor-marcas {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  transition: all 0.4s ease;
}

.contenedor-ofertas {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  transition: all 0.8s ease;
}

.grupoOfertas, .grupoMarcas {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  height: 350px;
}
@media (min-width: 320px) and (max-width: 900px) {
  .grupoOfertas, .grupoMarcas {
    height: auto;
    flex-wrap: wrap;
  }
}

/*--------------------------------------------------*/
/*------------RECUADROS DE LOS PRODUCTOS------------*/
/*--------------------------------------------------*/
.recuadro-producto {
  width: 23%;
  margin: 1%;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Work Sans", sans-serif;
  color: #000000;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.recuadro-producto:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}
@media (min-width: 320px) and (max-width: 900px) {
  .recuadro-producto {
    width: 48%;
    margin: 1% 1%;
  }
}

.recuadro-producto a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.imagen-producto {
  width: 100%;
  height: auto;
  max-height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 5px 5px 0 0;
  padding: 5px;
}
@media (min-width: 320px) and (max-width: 900px) {
  .imagen-producto {
    max-height: 160px;
  }
}

.info-oferta {
  width: 100%;
  padding: 0.8em 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
@media (min-width: 320px) and (max-width: 900px) {
  .info-oferta {
    padding: 0.7em;
    gap: 0.4em;
  }
}

#tituloProducto {
  color: #000000;
  font-weight: 500;
  text-align: center;
  font-size: clamp(0.75rem, 0.9vw, 1rem);
  margin: 0;
}
@media (min-width: 320px) and (max-width: 900px) {
  #tituloProducto {
    font-size: clamp(0.85rem, 3vw, 1.1rem);
  }
}

.precios {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}

#precioOriginal {
  text-decoration: line-through;
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
  color: rgb(138, 138, 138);
  margin: 0;
}

#nuevoPrecio {
  font-weight: 600;
  color: #000000;
  font-size: clamp(1rem, 1.3vw, 1.4rem);
  margin: 0;
}
@media (min-width: 320px) and (max-width: 900px) {
  #nuevoPrecio {
    font-size: clamp(1.2rem, 4.5vw, 1.8rem);
  }
}

#porcentajeDescuento {
  font-size: clamp(0.65rem, 0.9vw, 1rem);
  margin: 0;
  padding: 0.2em 0.4em;
  color: rgb(0, 140, 0);
  background-color: rgba(0, 190, 0, 0.15);
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
}
@media (min-width: 320px) and (max-width: 900px) {
  #porcentajeDescuento {
    font-size: clamp(0.8rem, 3vw, 1.2rem);
    padding: 0.3em 0.5em;
  }
}

#nuevoPrecioSinImpuesto {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  font-size: clamp(0.55rem, 0.6vw, 0.75rem);
  margin-top: 0.3em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 320px) and (max-width: 450px) {
  #nuevoPrecioSinImpuesto {
    white-space: normal;
    font-size: clamp(0.7rem, 2.2vw, 0.9rem);
    line-height: 1.1em;
  }
}
@media (min-width: 451px) and (max-width: 900px) {
  #nuevoPrecioSinImpuesto {
    white-space: nowrap;
    font-size: clamp(0.65rem, 1.9vw, 0.85rem);
  }
}

#mnsSinStock {
  color: red !important;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: 600;
  margin: 0.5em 0;
  text-align: center;
}
@media (min-width: 320px) and (max-width: 900px) {
  #mnsSinStock {
    font-size: clamp(1rem, 3vw, 1.4rem);
  }
}

/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*----------------SECTOR QUIENES SOMOS--------------*/
/*--------------------------------------------------*/
.quienes-somos {
  width: 100%;
  margin-bottom: 7vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.info-negocio {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 320px) and (max-width: 900px) {
  .info-negocio {
    height: 100%;
    justify-content: space-evenly;
  }
}

.info-negocio > #tituloQuinesSomos {
  font-family: "Work Sans", sans-serif;
  font-size: clamp(1px, 2vw, 1.8rem);
  font-weight: bold;
  margin-bottom: 3vh;
  margin-top: 7vh;
  color: #000000;
}
@media (min-width: 320px) and (max-width: 900px) {
  .info-negocio > #tituloQuinesSomos {
    margin-bottom: 1vh;
    margin-top: 2vh;
    font-size: 8vw;
  }
}

.info-negocio > #textoQuienesSomos {
  font-family: "Work Sans", sans-serif;
  font-size: clamp(1px, 1.4vw, 1.26rem);
  font-weight: 500;
  color: #000000;
  text-align: justify;
}
@media (min-width: 320px) and (max-width: 900px) {
  .info-negocio > #textoQuienesSomos {
    font-size: 4vw;
  }
}

/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
.paginasOfertas {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.paginasOfertas i {
  margin: 1em 1em;
  font-size: clamp(1px, 1.7vw, 1.53rem);
}

.paginasOfertas i:hover {
  cursor: pointer;
}

.pagina {
  margin: 1em 0.5em;
  width: 0.7em;
  height: 0.7em;
  transition: all 0.4s ease;
  border-radius: 50px;
  background-color: #e0e0e0;
  box-shadow: 5px 5px 10px #c9c9c9, -5px -5px 10px #ffffff, inset 0 0 0 transparent, inset 0 0 0 transparent;
}

.pagina-activo {
  background: #000000;
}

/*--------------------------------------------------*/
/*---------------NOTICIAS---------------------------*/
/*--------------------------------------------------*/
.novedades {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  padding: 5vh 0;
}
@media (min-width: 320px) and (max-width: 900px) {
  .novedades {
    flex-direction: column;
    align-items: center;
  }
}

.novedades h1 {
  width: 100%;
  text-align: center;
  margin: 3vh 0;
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  font-family: "Work Sans", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  color: #000000;
}

.noticia {
  width: 28%;
  margin-bottom: 2em;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px #000000;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.noticia:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}
@media (min-width: 320px) and (max-width: 900px) {
  .noticia {
    width: 90%;
  }
}
.noticia a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.noticia .sector-img {
  width: 100%;
  height: 220px;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.noticia .sector-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.5s ease;
}
.noticia .sector-img i {
  color: white;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
}
.noticia .sector-img:hover img {
  opacity: 0.6;
}

.noticia .infoNoticia {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.noticia .infoNoticia .titulo-noticia {
  font-family: "Work Sans", sans-serif;
  color: #000000;
  font-size: clamp(1rem, 1.3vw, 1.5rem);
  font-weight: 700;
  text-align: center;
}
.noticia .infoNoticia .resumen-noticia {
  font-size: clamp(0.8rem, 1vw, 1.1rem);
  color: #777;
  text-align: center;
  font-family: "Work Sans", sans-serif;
}
.noticia .infoNoticia .fecha {
  font-size: clamp(0.7rem, 0.9vw, 1rem);
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: "Work Sans", sans-serif;
}
.noticia .infoNoticia a {
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: bold;
  color: #000000;
  text-align: center;
  font-family: "Work Sans", sans-serif;
}

/*-----ESTO HACE QUE TODO EL BLOQUE REDIRECCIONE----*/
.noticia {
  position: relative;
}
.noticia a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.noticia .infoNoticia,
.noticia .sector-img {
  position: relative;
  z-index: 2;
}

/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*---------------------------------------------------*/
/*--------------BOTON WHATSSAPP----------------------*/
/*---------------------------------------------------*/
.btn-wsp {
  position: fixed;
  width: 60px;
  height: 60px;
  line-height: 63px;
  bottom: 25px;
  right: 25px;
  color: #FFF;
  text-align: center;
  font-size: 2.4vw;
  z-index: 100;
  border-radius: 50px;
  transition: all 300ms ease;
  transition: all 0.4s ease;
  border-radius: 50px;
  background-color: #25d366;
  box-shadow: 2px 2px 4px #c9c9c9, -2px -2px 4px #ffffff, inset 0 0 0 transparent, inset 0 0 0 transparent;
}
@media (min-width: 320px) and (max-width: 900px) {
  .btn-wsp {
    font-size: 6.4vw;
  }
}

.btn-wsp:active {
  transition: all 0.4s ease;
  border-radius: 50px;
  background-color: #25d366;
  box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 2px 2px 4px rgb(30.152016129, 171.947983871, 83.1217741935), inset -2px -2px 4px rgb(71.1407258065, 222.7592741935, 127.7798387097);
}

/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*//*# sourceMappingURL=index.css.map */