/* =============================================================================
   SAYPRES - CATÁLOGO
   ============================================================================= */


/* =============================================================================
   BASE
   ============================================================================= */

.catalogo-principal {
  min-height: 70vh;

  background:
    #F7F9F9;
}


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


/* =============================================================================
   CABECERA DEL CATÁLOGO
   ============================================================================= */

.catalogo-cabecera {
  padding:
    20px 0
    0;

  background:
    #FFFFFF;
}


.catalogo-titulo {
  margin-bottom:
    24px;
}


.catalogo-titulo h1 {
  margin:
    0;

  color:
    #263537;

  font-size:
    clamp(
      30px,
      3vw,
      40px
    );

  line-height:
    1.08;

  font-weight:
    700;
}


.catalogo-titulo p {
  margin:
    7px 0
    0;

  color:
    #69787A;

  font-size:
    16px;

  line-height:
    1.4;
}


/* =============================================================================
   CATEGORÍAS
   ============================================================================= */

.catalogo-categorias {
  width: 100%;

  padding:
    0 0
    18px;

  display: flex;

  align-items: stretch;

  gap: 12px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  -webkit-overflow-scrolling:
    touch;

  scroll-snap-type:
    x proximity;
}


.catalogo-categorias::-webkit-scrollbar {
  display: none;
}


.catalogo-categoria {
  flex:
    1 0
    250px;

  max-width:
    420px;

  min-height:
    72px !important;

  padding:
    12px 17px !important;

  scroll-snap-align:
    start;

  font:
    inherit;

  text-align:
    left;
}


.catalogo-categoria.activa {
  color:
    #FFFFFF !important;

  background:
    #28676E !important;

  border-color:
    #28676E !important;

  box-shadow:
    0 8px 22px
    rgba(
      40,
      103,
      110,
      0.18
    );
}


.catalogo-categoria.activa:hover {
  transform:
    none;

  background:
    #28676E !important;
}


.catalogo-categoria.activa
.categoria-card-contenido strong {
  color:
    #FFFFFF !important;
}


.catalogo-categoria.activa
.categoria-card-contenido > span {
  color:
    rgba(
      255,
      255,
      255,
      0.75
    ) !important;
}


.catalogo-categoria.activa
.categoria-card-flecha {
  color:
    #FFFFFF;

  background:
    rgba(
      255,
      255,
      255,
      0.16
    );
}
/* =============================================================================
   CONTENIDO
   ============================================================================= */

.catalogo-contenido {
  padding:
    28px 0
    56px;

  border-top:
    1px solid
    #E8ECEC;
}


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

.catalogo-barra {
  margin-bottom:
    24px;

  display:
    grid;

  grid-template-columns:
    minmax(
      280px,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    14px;
}


/* =============================================================================
   BUSCADOR INTERNO
   ============================================================================= */

.catalogo-buscador {
  position:
    relative;

  width:
    100%;

  max-width:
    620px;

  min-height:
    46px;

  padding:
    0 46px
    0 16px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid
    #DCE3E3;

  border-radius:
    999px;

  background:
    #FFFFFF;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}


.catalogo-buscador:focus-within {
  border-color:
    rgba(
      40,
      103,
      110,
      0.55
    );

  box-shadow:
    0 0 0 3px
    rgba(
      40,
      103,
      110,
      0.08
    );
}


.catalogo-buscador >
.material-symbols-rounded {
  flex-shrink:
    0;

  color:
    #28676E;

  font-size:
    23px;
}


.catalogo-buscador input {
  width:
    100%;

  min-width:
    0;

  padding:
    0;

  border:
    0;

  outline:
    0;

  color:
    #2E3A3D;

  background:
    transparent;

  font-size:
    14px;
}


.catalogo-buscador input::placeholder {
  color:
    #909C9E;
}


.catalogo-buscar-limpiar {
  position:
    absolute;

  top:
    50%;

  right:
    8px;

  width:
    34px;

  height:
    34px;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  color:
    #69787A;

  background:
    transparent;

  cursor:
    pointer;

  transform:
    translateY(-50%);
}


.catalogo-buscar-limpiar:hover {
  color:
    #28676E;

  background:
    #EDF4F4;
}


.catalogo-buscar-limpiar
.material-symbols-rounded {
  font-size:
    20px;
}


/* =============================================================================
   ORDENAR
   ============================================================================= */

.catalogo-orden {
  min-height:
    46px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  white-space:
    nowrap;
}


.catalogo-orden > span {
  color:
    #69787A;

  font-size:
    13px;

  font-weight:
    500;
}


.catalogo-orden select {
  min-height:
    42px;

  padding:
    0 36px
    0 13px;

  border:
    1px solid
    #DCE3E3;

  border-radius:
    10px;

  outline:
    0;

  color:
    #334447;

  background:
    #FFFFFF;

  font-size:
    13px;

  font-weight:
    600;

  cursor:
    pointer;
}


.catalogo-orden select:focus {
  border-color:
    #28676E;
}


/* =============================================================================
   BOTÓN FILTROS MÓVIL
   ============================================================================= */

.catalogo-boton-filtros {
  display:
    none;
}


.catalogo-filtros-cantidad {
  min-width:
    20px;

  height:
    20px;

  padding:
    0 6px;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px;

  color:
    #FFFFFF;

  background:
    #28676E;

  font-size:
    10px;

  font-weight:
    700;
}


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


/* =============================================================================
   LAYOUT PRINCIPAL
   ============================================================================= */

.catalogo-layout {
  display:
    grid;

  grid-template-columns:
    250px
    minmax(
      0,
      1fr
    );

  align-items:
    start;

  gap:
    28px;
}


/* =============================================================================
   SIDEBAR FILTROS
   ============================================================================= */

.catalogo-filtros {
  position:
    sticky;

  top:
    98px;

  overflow:
    hidden;

  border:
    1px solid
    #E1E7E7;

  border-radius:
    14px;

  background:
    #FFFFFF;

  box-shadow:
    0 5px 18px
    rgba(
      30,
      65,
      69,
      0.04
    );
}


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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  border-bottom:
    1px solid
    #E8ECEC;
}


.catalogo-filtros-etiqueta {
  display:
    block;

  margin-bottom:
    3px;

  color:
    #849193;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1px;

  text-transform:
    uppercase;
}


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

  color:
    #263537;

  font-size:
    19px;

  font-weight:
    700;
}


.catalogo-filtros-cerrar {
  display:
    none;
}


/* =============================================================================
   CONTENIDO DINÁMICO DE FILTROS
   ============================================================================= */

.catalogo-filtros-contenido {
  padding:
    4px 18px;
}


/*
 * Cada bloque será creado desde JS.
 */

.catalogo-filtro {
  padding:
    15px 0;

  border-bottom:
    1px solid
    #EDF0F0;
}


.catalogo-filtro:last-child {
  border-bottom:
    0;
}


.catalogo-filtro-titulo {
  width:
    100%;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  color:
    #334447;

  background:
    transparent;

  font-size:
    13px;

  font-weight:
    700;

  text-align:
    left;

  cursor:
    pointer;
}


.catalogo-filtro-titulo
.material-symbols-rounded {
  color:
    #768688;

  font-size:
    19px;

  transition:
    transform 0.18s ease;
}


.catalogo-filtro.cerrado
.catalogo-filtro-titulo
.material-symbols-rounded {
  transform:
    rotate(-90deg);
}


.catalogo-filtro-opciones {
  margin-top:
    12px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.catalogo-filtro.cerrado
.catalogo-filtro-opciones {
  display:
    none;
}


/* =============================================================================
   CHECKBOX
   ============================================================================= */

.catalogo-check {
  min-height:
    26px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    #536468;

  font-size:
    13px;

  cursor:
    pointer;
}


.catalogo-check input {
  width:
    16px;

  height:
    16px;

  margin:
    0;

  accent-color:
    #28676E;

  cursor:
    pointer;
}


.catalogo-check span {
  min-width:
    0;
}


/* =============================================================================
   CHIPS DE FILTROS
   ============================================================================= */

.catalogo-chips {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.catalogo-chip {
  min-height:
    32px;

  padding:
    0 11px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    #DCE3E3;

  border-radius:
    9px;

  color:
    #536468;

  background:
    #FFFFFF;

  font-size:
    12px;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}


.catalogo-chip:hover {
  color:
    #28676E;

  border-color:
    rgba(
      40,
      103,
      110,
      0.45
    );
}


.catalogo-chip.activo {
  color:
    #FFFFFF;

  background:
    #28676E;

  border-color:
    #28676E;
}


/* =============================================================================
   PRECIO
   ============================================================================= */

.catalogo-precio {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    8px;
}


.catalogo-precio-campo {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.catalogo-precio-campo span {
  color:
    #7A888A;

  font-size:
    10px;

  font-weight:
    600;
}


.catalogo-precio-campo input {
  width:
    100%;

  min-width:
    0;

  height:
    38px;

  padding:
    0 9px;

  border:
    1px solid
    #DCE3E3;

  border-radius:
    8px;

  outline:
    0;

  color:
    #334447;

  background:
    #FFFFFF;

  font-size:
    12px;
}


.catalogo-precio-campo input:focus {
  border-color:
    #28676E;

  box-shadow:
    0 0 0 2px
    rgba(
      40,
      103,
      110,
      0.07
    );
}


/* =============================================================================
   FOOTER FILTROS
   ============================================================================= */

.catalogo-filtros-footer {
  padding:
    15px 18px
    17px;

  border-top:
    1px solid
    #E8ECEC;
}


.catalogo-restablecer {
  width:
    100%;

  min-height:
    38px;

  padding:
    0 10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  border:
    1px solid
    #DCE3E3;

  border-radius:
    9px;

  color:
    #536468;

  background:
    #FFFFFF;

  font-size:
    12px;

  font-weight:
    600;

  cursor:
    pointer;
}


.catalogo-restablecer:hover {
  color:
    #28676E;

  border-color:
    #28676E;
}


.catalogo-restablecer
.material-symbols-rounded {
  font-size:
    18px;
}


.catalogo-ver-resultados {
  display:
    none;
}


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

.catalogo-resultados {
  min-width:
    0;
}


.catalogo-resultados-superior {
  min-height:
    28px;

  margin-bottom:
    14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.catalogo-resultado-texto {
  margin:
    0;

  color:
    #69787A;

  font-size:
    13px;

  font-weight:
    500;
}


/* =============================================================================
   GRID
   ============================================================================= */

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


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

.catalogo-carga {
  min-height:
    320px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    13px;

  color:
    #69787A;

  font-size:
    14px;
}


.catalogo-carga[hidden] {
  display:
    none !important;
}


.catalogo-carga-spinner {
  width:
    34px;

  height:
    34px;

  border:
    3px solid
    #DCE9EA;

  border-top-color:
    #28676E;

  border-radius:
    50%;

  animation:
    catalogoGirar
    0.8s
    linear
    infinite;
}


@keyframes catalogoGirar {

  to {
    transform:
      rotate(360deg);
  }

}


/* =============================================================================
   ESTADOS
   ============================================================================= */

.catalogo-estado {
  min-height:
    340px;

  padding:
    36px 20px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  color:
    #69787A;

  text-align:
    center;
}


.catalogo-estado[hidden] {
  display:
    none !important;
}


.catalogo-estado >
.material-symbols-rounded {
  margin-bottom:
    12px;

  color:
    #28676E;

  font-size:
    48px;
}


.catalogo-estado strong {
  color:
    #263537;

  font-size:
    18px;
}


.catalogo-estado p {
  max-width:
    430px;

  margin:
    8px 0
    17px;

  font-size:
    13px;

  line-height:
    1.5;
}


.catalogo-estado button {
  min-height:
    40px;

  padding:
    0 16px;

  border:
    1px solid
    #28676E;

  border-radius:
    9px;

  color:
    #FFFFFF;

  background:
    #28676E;

  font-size:
    13px;

  font-weight:
    600;

  cursor:
    pointer;
}


.catalogo-estado button:hover {
  background:
    #20565C;

  border-color:
    #20565C;
}


/* =============================================================================
   PAGINACIÓN
   ============================================================================= */

.catalogo-paginacion {
  margin-top:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;
}


.catalogo-pagina {
  min-width:
    38px;

  height:
    38px;

  padding:
    0 10px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    #DCE3E3;

  border-radius:
    9px;

  color:
    #536468;

  background:
    #FFFFFF;

  font-size:
    13px;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}


.catalogo-pagina:hover:not(:disabled) {
  color:
    #28676E;

  border-color:
    #28676E;
}


.catalogo-pagina.activa {
  color:
    #FFFFFF;

  border-color:
    #28676E;

  background:
    #28676E;
}


.catalogo-pagina:disabled {
  color:
    #B2BCBD;

  background:
    #F5F7F7;

  cursor:
    default;
}


/* =============================================================================
   OVERLAY FILTROS
   ============================================================================= */

.catalogo-filtros-overlay {
  display:
    none;
}


/* =============================================================================
   TABLET
   ============================================================================= */

@media (max-width: 1100px) {

  .catalogo-layout {
    grid-template-columns:
      225px
      minmax(
        0,
        1fr
      );

    gap:
      20px;
  }


  .catalogo-filtros-contenido {
    padding:
      4px 15px;
  }


  .catalogo-filtros-footer {
    padding-left:
      15px;

    padding-right:
      15px;
  }

}


/* =============================================================================
   MÓVIL / TABLET PEQUEÑA
   ============================================================================= */

@media (max-width: 900px) {

  .catalogo-cabecera {
    padding-top:
      28px;
  }


  .catalogo-titulo {
    margin-bottom:
      19px;
  }


  .catalogo-titulo h1 {
    font-size:
      31px;
  }


  .catalogo-titulo p {
    font-size:
      15px;
  }


  .catalogo-contenido {
    padding-top:
      20px;
  }


  /* BARRA */

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

    gap:
      9px;
  }


  .catalogo-buscador {
    max-width:
      none;
  }


  /* FILTRO MÓVIL */

  .catalogo-boton-filtros {
    min-height:
      44px;

    padding:
      0 13px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    gap:
      6px;

    border:
      1px solid
      #DCE3E3;

    border-radius:
      10px;

    color:
      #334447;

    background:
      #FFFFFF;

    font-size:
      13px;

    font-weight:
      600;

    cursor:
      pointer;
  }


  .catalogo-boton-filtros
  .material-symbols-rounded {
    color:
      #28676E;

    font-size:
      20px;
  }


  .catalogo-orden > span {
    display:
      none;
  }


  .catalogo-orden select {
    min-height:
      44px;

    max-width:
      185px;
  }


  /* LAYOUT */

  .catalogo-layout {
    display:
      block;
  }


  /* DRAWER */

  .catalogo-filtros {
    position:
      fixed;

    top:
      0;

    left:
      0;

    z-index:
      3010;

    width:
      min(
        380px,
        92vw
      );

    height:
      100dvh;

    display:
      flex;

    flex-direction:
      column;

    border:
      0;

    border-radius:
      0 16px
      16px 0;

    box-shadow:
      18px 0 45px
      rgba(
        26,
        55,
        59,
        0.17
      );

    transform:
      translateX(-105%);

    transition:
      transform 0.26s ease;
  }


  .catalogo-filtros.abierto {
    transform:
      translateX(0);
  }


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

    padding:
      17px 18px;
  }


  .catalogo-filtros-cerrar {
    width:
      38px;

    height:
      38px;

    padding:
      0;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    border-radius:
      50%;

    color:
      #28676E;

    background:
      #EDF4F4;

    cursor:
      pointer;
  }


  .catalogo-filtros-cerrar
  .material-symbols-rounded {
    font-size:
      21px;
  }


  .catalogo-filtros-contenido {
    flex:
      1;

    min-height:
      0;

    overflow-y:
      auto;

    padding:
      4px 18px;
  }


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

    padding:
      13px 18px
      calc(
        15px +
        env(
          safe-area-inset-bottom
        )
      );

    background:
      #FFFFFF;

    box-shadow:
      0 -8px 24px
      rgba(
        31,
        64,
        68,
        0.05
      );
  }


  .catalogo-ver-resultados {
    width:
      100%;

    min-height:
      46px;

    margin-top:
      8px;

    padding:
      0 14px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    gap:
      4px;

    border-radius:
      9px;

    color:
      #FFFFFF;

    background:
      #28676E;

    font-size:
      13px;

    font-weight:
      600;

    cursor:
      pointer;
  }


  .catalogo-filtros-overlay {
    position:
      fixed;

    inset:
      0;

    z-index:
      3000;

    display:
      block;

    visibility:
      hidden;

    opacity:
      0;

    background:
      rgba(
        22,
        38,
        40,
        0.38
      );

    backdrop-filter:
      blur(2px);

    transition:
      opacity 0.22s ease,
      visibility 0.22s ease;
  }


  .catalogo-filtros-overlay.abierto {
    visibility:
      visible;

    opacity:
      1;
  }


  body.catalogo-filtros-abiertos {
    overflow:
      hidden;
  }

}


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

@media (max-width: 600px) {

.catalogo-cabecera {
  padding-top:
    14px;
}


  .catalogo-titulo {
    margin-bottom:
      16px;
  }


  .catalogo-titulo h1 {
    font-size:
      28px;
  }


  .catalogo-titulo p {
    margin-top:
      5px;

    font-size:
      14px;
  }


.catalogo-categorias {
  margin-right:
    -14px;

  padding-right:
    14px;

  padding-bottom:
    14px;

  gap:
    10px;
}


.catalogo-categoria {
  flex:
    0 0
    min(
      78vw,
      300px
    );

  max-width:
    300px;

  min-height:
    64px !important;

  padding:
    10px 14px !important;
}


  /* BARRA EN DOS NIVELES */

  .catalogo-barra {
    margin-bottom:
      18px;

    grid-template-columns:
      1fr
      1fr;

    gap:
      9px;
  }


  .catalogo-buscador {
    grid-column:
      1 / -1;

    min-height:
      44px;
  }


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


  .catalogo-orden {
    width:
      100%;
  }


  .catalogo-orden select {
    width:
      100%;

    max-width:
      none;

    min-width:
      0;
  }


  .catalogo-resultados-superior {
    margin-bottom:
      11px;
  }


  .catalogo-resultado-texto {
    font-size:
      12px;
  }


  .catalogo-productos-grid {
    gap:
      12px;
  }


  .catalogo-paginacion {
    margin-top:
      26px;

    gap:
      5px;
  }


  .catalogo-pagina {
    min-width:
      36px;

    height:
      36px;

    border-radius:
      8px;

    font-size:
      12px;
  }


  .catalogo-carga {
    min-height:
      250px;
  }


  .catalogo-estado {
    min-height:
      280px;

    padding:
      30px 15px;
  }


  .catalogo-estado >
  .material-symbols-rounded {
    font-size:
      43px;
  }


  .catalogo-estado strong {
    font-size:
      16px;
  }

}


/* =============================================================================
   CELULAR PEQUEÑO
   ============================================================================= */

@media (max-width: 380px) {

  .catalogo-categoria {
    padding:
      0 12px;
  }


  .catalogo-boton-filtros {
    padding:
      0 10px;
  }


  .catalogo-orden select {
    padding-left:
      9px;

    padding-right:
      25px;

    font-size:
      12px;
  }

}

/* =============================================================================
   CATÁLOGO - CATEGORÍAS EN CELULAR
   Igual comportamiento visual que Inicio
   ============================================================================= */

@media (max-width: 600px) {

  .catalogo-categorias {
    width: 100%;

    margin-right: 0 !important;

    padding-right: 0 !important;
    padding-bottom: 14px !important;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    overflow: visible !important;

    scroll-snap-type: none !important;
  }


  .catalogo-categoria {
    width: 100% !important;

    max-width: none !important;

    flex: 0 0 auto !important;

    min-height: 64px !important;

    padding:
      10px 14px !important;

    white-space: normal !important;

    scroll-snap-align: none !important;
  }

}

/* =============================================================================
   CATEGORÍAS - DISTRIBUCIÓN AUTOMÁTICA EN ESCRITORIO / TABLET
   ============================================================================= */

@media (min-width: 601px) {

  .catalogo-categorias {
    width: 100%;

    display: grid;

    grid-template-columns:
      repeat(
        auto-fit,
        minmax(280px, 1fr)
      );

    align-items: stretch;

    gap: 14px;

    overflow: visible;

    padding-bottom: 22px;
  }


  .catalogo-categoria {
    width: 100% !important;

    min-width: 0 !important;
    max-width: none !important;

    flex: none !important;

    white-space: normal;
  }

}