@charset "UTF-8";
@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 {
  background-color: #f4f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  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;
  align-items: flex-start;
}
@media (min-width: 320px) and (max-width: 900px) {
  .columna-central {
    width: 100%;
    flex-direction: column;
  }
}

/*--------------------------------------------------*/
/*---------------MANEJO DE CATEGORIAS---------------*/
/*--------------------------------------------------*/
.columna-categorias {
  width: 30%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 320px) and (max-width: 900px) {
  .columna-categorias {
    width: 100%;
    align-items: center;
  }
}

.div-tituloCategorias {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1vh 1vw;
}
@media (max-width: 768px) {
  .div-tituloCategorias {
    padding: 0.5rem 4rem;
  }
}

.titulo-categorias {
  font-family: "Work Sans", sans-serif;
  color: #000000;
  margin: 0;
}

#icono-menu {
  display: none;
  font-size: 1.4rem;
  cursor: pointer;
}
@media (min-width: 320px) and (max-width: 900px) {
  #icono-menu {
    display: block;
    margin-left: 1vw;
  }
}

#listaCategorias {
  font-family: "Work Sans", sans-serif;
  color: #000000;
  width: 85%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
#listaCategorias .nivelUno, #listaCategorias .nivelDos, #listaCategorias .nivelTres {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
#listaCategorias .item {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
#listaCategorias .item .categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 1em;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  width: 100%;
  box-sizing: border-box;
}
#listaCategorias .item .categoria:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
#listaCategorias .item .categoria a {
  color: #000000;
  text-decoration: none;
  font-weight: normal;
  flex-grow: 1;
  overflow-wrap: break-word;
}
#listaCategorias .item .categoria .flecha {
  transition: transform 0.2s ease-in-out;
  margin-left: 0.5rem;
  flex-shrink: 0;
}
#listaCategorias .item .categoria.abierta .flecha {
  transform: rotate(180deg);
}
#listaCategorias .nivelUno .item .categoria {
  font-size: 1rem;
  font-weight: 600;
}
#listaCategorias .nivelDos {
  padding-left: 1em;
  box-sizing: border-box;
}
#listaCategorias .nivelDos .item .categoria {
  font-size: 0.95rem;
  font-weight: 500;
}
#listaCategorias .nivelTres {
  padding-left: 1.5em;
  box-sizing: border-box;
}
#listaCategorias .nivelTres .item .categoria {
  font-size: 0.85rem;
  font-weight: normal;
}
#listaCategorias .nivelDos,
#listaCategorias .nivelTres {
  display: none;
  width: 100%;
  box-sizing: border-box;
}
#listaCategorias .nivelDos.visible,
#listaCategorias .nivelTres.visible {
  display: flex;
  flex-direction: column;
}

.cantidad-productos {
  color: gray;
  font-size: clamp(4px, 0.7vw, 0.63rem);
  margin-left: clamp(4px, 0.4vw, 0.36rem);
  padding-bottom: 2px;
}

/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*------------RECUADROS DE LOS PRODUCTOS------------*/
/*--------------------------------------------------*/
.columna-productos {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
@media (min-width: 320px) and (max-width: 900px) {
  .columna-productos {
    width: 100%;
    justify-content: space-evenly;
  }
}

/* CADA TARJETA DE PRODUCTO */
.recuadro-producto {
  width: 32%; /* ✅ 3 por fila en escritorio y tablet */
  margin-bottom: 1.5em;
  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%; /* ✅ 2 por fila en mobile */
    margin-bottom: 1em;
  }
}

/* ENLACE QUE ABARCA TODA LA TARJETA */
.recuadro-producto a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

/* IMAGEN DEL PRODUCTO */
.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 INFERIOR (TÍTULO, PRECIOS, ETC) */
.info-oferta {
  width: 100%;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/* CONTENEDOR INFERIOR CON TÍTULO Y PRECIOS */
.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;
  }
}

/* TÍTULO DEL PRODUCTO */
#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);
  }
}

/* BLOQUE DE PRECIOS */
.precios {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}

/* PRECIO TACHADO (SI HAY DESCUENTO) */
#precioOriginal {
  text-decoration: line-through;
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
  color: rgb(138, 138, 138);
  margin: 0;
}

/* NUEVO PRECIO PRINCIPAL */
#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);
  }
}

/* CARTEL DE DESCUENTO (10% OFF) */
#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;
  }
}

/* PRECIO SIN IMPUESTO (SI LO MOSTRÁS) */
#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 #mnsSinStock {
    font-size: clamp(1rem, 3vw, 1.4rem);
  }
}

/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*------SECCION ORDENAR Y PARA FUTUROS FILTROS-------*/
/*---------------------------------------------------*/
#barra-ordenar {
  width: 100%;
  margin: 3vh 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media (min-width: 320px) and (max-width: 900px) {
  #barra-ordenar {
    margin: 3vh 1em;
    flex-direction: column;
    align-items: stretch;
    gap: 1vh;
  }
}

.combo-ordenar {
  width: clamp(150px, 16vw, 14rem);
  padding: 0.5em 0.75em;
  font-family: "Work Sans", sans-serif;
  font-size: 0.95rem;
  color: #000000;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 0px #000000;
  border-radius: 6px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23333' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 1em;
}
@media (min-width: 320px) and (max-width: 900px) {
  .combo-ordenar {
    width: 100%;
  }
}

#btnOrdenar {
  height: 36px;
  min-width: 90px;
  padding: 0.5em 1.2em;
  font-family: "Work Sans", sans-serif;
  font-weight: bold;
  font-size: 0.95rem;
  color: #f4f4f6;
  background-color: #000000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 1vw;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
#btnOrdenar:hover {
  background-color: black;
}
#btnOrdenar:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@media (min-width: 320px) and (max-width: 900px) {
  #btnOrdenar {
    width: 100%;
    margin-left: 0;
  }
}

/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*-------------BOTONES DE NUMERO PAGINA--------------*/
/*---------------------------------------------------*/
.links-paginas {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin: 4vh 0;
}
@media (min-width: 320px) and (max-width: 900px) {
  .links-paginas {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
}

.linkPagina:link,
.linkPagina:visited,
.linkPagina:active {
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 1.2vw, 1rem);
  text-decoration: none;
  color: #000000;
  padding: 0.4em 0.75em;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}
.linkPagina:link:hover,
.linkPagina:visited:hover,
.linkPagina:active:hover {
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
@media (min-width: 320px) and (max-width: 900px) {
  .linkPagina:link,
  .linkPagina:visited,
  .linkPagina:active {
    font-size: clamp(12px, 3.5vw, 1.1rem);
    padding: 0.3em 0.8em;
  }
}

.linkPagina.activa {
  background-color: #000000;
  color: #f4f4f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.puntosPaginas {
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 1.2vw, 1rem);
  color: #000000;
  padding: 0.4em 0.6em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
@media (min-width: 320px) and (max-width: 900px) {
  .puntosPaginas {
    font-size: clamp(12px, 3.5vw, 1.1rem);
  }
}

/*
.links-paginas{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4vh 0;
}

.linkPagina:link,
.linkPagina:visited,
.linkPagina:active{
    font-family: $fuenteTextos;
    font-weight: 600;
    font-size: clamp(4px,1.4vw,1.26rem);
    margin-right: clamp(1px,1vw,0.9rem);
    text-decoration: none;
    color: $fuente1;

    @include respon(320px,900px){
        margin-right: clamp(1px,3vw,2.7rem);
        font-size: 4vw;
    }

}

.puntosPaginas{
    font-family: $fuenteTextos;
    font-weight: 600;
    font-size: clamp(4px,1.4vw,1.26rem);
    margin-right: clamp(1px,1vw,0.9rem);
    text-decoration: none;
    color: $fuente1;
}
*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*--------------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);
}

/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*--------------------------------------------------*/
/*
#listaCategorias{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: $fuenteTextos;
    width: 70%;
    background-color: $color3;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px $color4; 

    padding:1.5vh 0 1.5vh clamp(1px,1vw,0.9rem);
    margin: 3vh 0 3vh clamp(1px,4vw,3.6rem);

    @include respon(320px,900px){
        background-color: transparent;
        border-radius: 0px;
        box-shadow: none;
        margin-left: 0px;
        width: 90%;
        display: none;
    }
  }

  .titulo{
    width: 80%;
    margin-bottom: 1vh;
  }

  .flecha{
    width: 20%;
    cursor: pointer;
    text-align: center;
  }

  .nivelUno,.nivelDos,.nivelTres{
    flex-direction: column;
    justify-content: center;
    text-align: left;
    width: 100%;
  }

  .nivelUno{
    display: flex;
    margin-bottom: 1vh;
  }

  .nivelDos{

    display: none;

    .active{

        font-weight: 800;

      .nivelTres{
        display: flex;
        margin-left: clamp(1px,2vw,1.8rem);
      }
    }
  }

  .active{

    font-weight: 800;

    .nivelDos{
      display: flex;

      .titulo{
        padding-left: clamp(1px,1vw,0.9rem);
      }
    }
  }

  .nivelTres{
    display: none;
  }

  .item{

    padding-top:1vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    a{
      text-decoration: none;
      color: black;
    }

  }*//*# sourceMappingURL=secundario.css.map */