/* =============================================================================
   SAYPRES - LO NUEVO
   ARCHIVO: public/css/lo-nuevo.css
   ============================================================================= */


/* =============================================================================
   PÁGINA
   ============================================================================= */

.pagina-lo-nuevo {
  background:
    #F7F9F9;
}


.lo-nuevo-principal {
  min-height:
    calc(100vh - 80px);

  background:
    #F7F9F9;
}


/* =============================================================================
   CABECERA
   ============================================================================= */

.lo-nuevo-cabecera {
  padding:
    18px 0
    17px;

  border-bottom:
    1px solid #E6ECEC;

  background:
    #FFFFFF;
}


.lo-nuevo-titulo {
  width:
    100%;

  max-width:
    none;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;
}


.lo-nuevo-etiqueta {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

  margin-bottom:
    5px;

  padding:
    0 11px;

  border-radius:
    999px;

  color:
    #28676E;

  background:
    rgba(
      40,
      103,
      110,
      0.08
    );

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1px;

  text-transform:
    uppercase;
}




.lo-nuevo-titulo p {
  margin:0;

  color:
    #748285;

  font-size:
    15px;

  font-weight:
    400;

  line-height:
    1.5;
}


/* =============================================================================
   BARRA SUPERIOR
   ============================================================================= */

.lo-nuevo-principal
.catalogo-barra {
  grid-template-columns:
    minmax(
      280px,
      620px
    )
    auto;

  justify-content:
    space-between;
}


/* =============================================================================
   CABECERA DE FILTROS
   ============================================================================= */

/*
 * En Lo nuevo usamos
 * .catalogo-filtros-cabecera
 * para no modificar el HTML del Catálogo.
 */

.catalogo-filtros-cabecera {
  padding:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  border-bottom:
    1px solid #E8ECEC;
}


.catalogo-filtros-cabecera h2 {
  margin:
    0;

  color:
    #263638;

  font-size:
    21px;

  font-weight:
    700;
}


/* =============================================================================
   CONTADOR DEL BOTÓN DE FILTROS
   ============================================================================= */

.catalogo-boton-filtros-contador {
  min-width:
    20px;

  height:
    20px;

  padding:
    0 6px;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px;

  color:
    #FFFFFF;

  background:
    #28676E;

  font-size:
    10px;

  font-weight:
    700;
}


.catalogo-boton-filtros-contador:not([hidden]) {
  display:
    inline-flex;
}


/* =============================================================================
   RESULTADOS
   ============================================================================= */

.lo-nuevo-principal
.catalogo-resultados {
  min-width:
    0;
}


.lo-nuevo-principal
.catalogo-resultados-superior {
  min-height:
    22px;
}


/* =============================================================================
   PRODUCTOS
   ============================================================================= */

/*
 * El grid, tarjetas y responsive
 * continúan heredándose de catalogo.css.
 *
 * Aquí solo garantizamos que el contenido
 * tenga el ancho correcto.
 */

.lo-nuevo-principal
.catalogo-productos-grid {
  width:
    100%;
}


/* =============================================================================
   ESTADO VACÍO
   ============================================================================= */

.lo-nuevo-principal
.catalogo-estado {
  border:
    1px solid #E1E7E7;

  border-radius:
    14px;

  background:
    #FFFFFF;
}


/* =============================================================================
   CARGA
   ============================================================================= */

.lo-nuevo-principal
.catalogo-carga {
  border-radius:
    14px;

  background:
    #FFFFFF;
}


/* =============================================================================
   TABLET / MÓVIL
   ============================================================================= */

@media (max-width: 900px) {

  .lo-nuevo-cabecera {
    padding:
      25px 0
      22px;
  }


  .lo-nuevo-titulo h1 {
    font-size:
      30px;
  }


  .lo-nuevo-titulo p {
    font-size:
      14px;
  }


  .lo-nuevo-principal
  .catalogo-barra {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      auto;

    gap:
      9px;
  }


  .catalogo-filtros-cabecera {
    flex-shrink:
      0;

    padding:
      17px 18px;
  }

}


/* =============================================================================
   CELULAR
   ============================================================================= */

@media (max-width: 600px) {

  .lo-nuevo-cabecera {
    padding:
      14px 0
    13px;
  }


  .lo-nuevo-etiqueta {
    min-height:
      25px;

    margin-bottom:
      8px;

    padding:
      0 9px;

    font-size:
      9px;
  }


  .lo-nuevo-titulo h1 {
    font-size:
      27px;
  }


  .lo-nuevo-titulo p {
    margin-top:
      6px;

    font-size:
      13px;

    line-height:
      1.4;
  }


  /*
   * En celular:
   * buscador arriba
   * botón filtros debajo.
   */

  .lo-nuevo-principal
  .catalogo-barra {
    grid-template-columns:
      1fr;

    gap:
      9px;

    margin-bottom:
      18px;
  }


  .lo-nuevo-principal
  .catalogo-buscador {
    grid-column:
      1;

    width:
      100%;
  }


  .lo-nuevo-principal
  .catalogo-boton-filtros {
    width:
      100%;
  }


  .catalogo-filtros-cabecera h2 {
    font-size:
      20px;
  }

}

/* =============================================================================
   BANNER - LO NUEVO
   ============================================================================= */

.banner-lo-nuevo {
  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

  background:
    #F4F6F6;
}


.banner-lo-nuevo[hidden] {
  display:
    none !important;
}