/* =============================================================================
   SAYPRES - PORTAL WEB
   ESTILOS GENERALES
   ============================================================================= */

:root {
  --color-principal: #28676E;
  --color-principal-oscuro: #20565C;
  --color-principal-suave: #EDF4F4;

  --color-blanco: #FFFFFF;
  --color-texto: #2E3A3D;
  --color-texto-secundario: #69787A;

  --color-superficie: #F4F6F6;
  --color-borde: #E2E8E8;

  --color-oferta: #C94C4C;

  --ancho-maximo: 1320px;

  --radio: 14px;
}


/* =============================================================================
   RESET
   ============================================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    'Barlow',
    Arial,
    sans-serif;

  color: var(--color-texto);

  background: var(--color-blanco);
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: none;
}

img {
  display: block;
  max-width: 100%;
}


/* =============================================================================
   MATERIAL SYMBOLS
   ============================================================================= */

.material-symbols-rounded {
  font-variation-settings:
    'FILL' 0,
    'wght' 500,
    'GRAD' 0,
    'opsz' 24;
}


/* =============================================================================
   CONTENEDOR GENERAL
   ============================================================================= */

.contenedor {
  width: min(
    var(--ancho-maximo),
    calc(100% - 48px)
  );

  margin: 0 auto;
}


/* =============================================================================
   HEADER
   ============================================================================= */

.header-principal {
  position: sticky;
  top: 0;

  z-index: 1000;

  width: 100%;

  background: rgba(255, 255, 255, 0.98);

  border-bottom:
    1px solid var(--color-borde);
}


.header-contenido {
  width: min(
    var(--ancho-maximo),
    calc(100% - 48px)
  );

  min-height: 76px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  gap: 32px;
}


/* =============================================================================
   LOGO / MARCA
   ============================================================================= */

.header-marca {
  flex-shrink: 0;

  display: flex;

  align-items: center;

  gap: 11px;
}


.header-logo {
  width: 46px !important;
  height: 46px !important;

  min-width: 46px !important;
  min-height: 46px !important;

  max-width: 46px !important;
  max-height: 46px !important;

  object-fit: contain;

  flex-shrink: 0;
}


.header-nombre {
  color: var(--color-principal);

  font-size: 23px;

  font-weight: 700;

  letter-spacing: 0.7px;
}

.header-marca-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}


.header-nombre {
  line-height: 1.05;
}


.header-eslogan {
  margin-top: 4px;

  color: #69787A;

  font-size: 11px;
  font-weight: 400;

  letter-spacing: 0.2px;

  white-space: nowrap;
}
/* =============================================================================
   NAVEGACIÓN
   ============================================================================= */

.navegacion-principal {
  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 4px;
}


.navegacion-principal a {
  position: relative;

  padding:
    28px 13px
    26px;

  color: #445255;

  font-size: 15px;

  font-weight: 500;

  transition:
    color 0.16s ease;
}


.navegacion-principal a:hover {
  color: var(--color-principal);
}


.navegacion-principal a.activo {
  color: var(--color-principal);

  font-weight: 600;
}


.navegacion-principal a.activo::after {
  content: '';

  position: absolute;

  left: 13px;
  right: 13px;

  bottom: 17px;

  height: 2px;

  border-radius: 999px;

  background: var(--color-principal);
}


/* =============================================================================
   ACCIONES HEADER
   ============================================================================= */

.header-acciones {
  flex-shrink: 0;

  display: flex;

  align-items: center;

  gap: 7px;
}


.header-icono {
  width: 42px;
  height: 42px;

  padding: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: var(--color-principal);

  background: transparent;

  cursor: pointer;

  transition:
    background 0.16s ease,
    transform 0.16s ease;
}


.header-icono:hover {
  background: var(--color-principal-suave);
}


.header-icono:active {
  transform: scale(0.96);
}


.header-icono .material-symbols-rounded {
  font-size: 25px;
}


/* =============================================================================
   CARRITO
   ============================================================================= */

.header-carrito {
  height: 48px;

  margin-left: 3px;

  padding: 0 13px;

  display: flex;

  align-items: center;

  gap: 10px;

  border:
    1px solid var(--color-borde);

  border-radius: 12px;

  color: var(--color-texto);

  background: var(--color-blanco);

  cursor: pointer;

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


.header-carrito:hover {
  border-color:
    rgba(40, 103, 110, 0.35);

  background: #FAFCFC;
}


.carrito-icono {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-principal);
}


.carrito-icono .material-symbols-rounded {
  font-size: 27px;
}


.carrito-cantidad {
  position: absolute;

  top: -9px;
  right: -10px;

  min-width: 18px;
  height: 18px;

  padding: 0 5px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    2px solid var(--color-blanco);

  border-radius: 999px;

  color: var(--color-blanco);

  background: var(--color-principal);

  font-size: 10px;

  font-weight: 700;
}


.carrito-info {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  line-height: 1.05;
}


.carrito-texto {
  color: var(--color-texto-secundario);

  font-size: 11px;

  font-weight: 500;
}


.carrito-total {
  margin-top: 4px;

  color: var(--color-texto);

  font-size: 14px;

  font-weight: 700;
}


/* =============================================================================
   MENÚ MÓVIL
   ============================================================================= */

.header-menu-movil {
  width: 42px;
  height: 42px;

  padding: 0;

  display: none;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: var(--color-principal);

  background: transparent;

  cursor: pointer;
}


.header-menu-movil:hover {
  background: var(--color-principal-suave);
}


/* =============================================================================
   HERO TEMPORAL
   Luego aquí conectaremos el Banner real administrado desde SAYPRES.
   ============================================================================= */

.hero-inicio {
  min-height: 380px;

  display: flex;

  align-items: center;

  padding: 70px max(
    24px,
    calc((100% - var(--ancho-maximo)) / 2)
  );

  background:
    linear-gradient(
      120deg,
      var(--color-principal),
      var(--color-principal-oscuro)
    );

  color: var(--color-blanco);
}


.hero-contenido {
  max-width: 590px;
}


.hero-etiqueta {
  margin: 0 0 10px;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  opacity: 0.88;
}


.hero-inicio h1 {
  margin: 0;

  font-size: clamp(
    38px,
    5vw,
    64px
  );

  line-height: 1.02;

  font-weight: 700;
}


.hero-inicio p {
  margin:
    20px 0
    28px;

  font-size: 18px;

  opacity: 0.9;
}


/* =============================================================================
   BOTONES
   ============================================================================= */

.boton-principal {
  min-height: 46px;

  padding:
    0 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  color: var(--color-principal);

  background: var(--color-blanco);

  font-weight: 600;

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}


.boton-principal:hover {
  transform: translateY(-1px);

  box-shadow:
    0 8px 20px
    rgba(0, 0, 0, 0.12);
}


/* =============================================================================
   SECCIONES
   ============================================================================= */

.seccion-inicio {
  padding:
    62px 0;
}


.seccion-inicio:nth-of-type(even) {
  background: #FAFBFB;
}


.titulo-seccion {
  margin-bottom: 28px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 20px;
}


.titulo-seccion h2 {
  margin: 0;

  color: var(--color-texto);

  font-size: 30px;

  font-weight: 700;
}


.titulo-seccion > a {
  color: var(--color-principal);

  font-size: 14px;

  font-weight: 600;
}


.titulo-seccion > a:hover {
  text-decoration: underline;
}


.subtitulo-seccion {
  display: block;

  margin-bottom: 4px;

  color: var(--color-principal);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}


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

.categorias-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 16px;
}


.categoria-card {
  min-height: 82px;

  padding: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid var(--color-borde);

  border-radius: 14px;

  color: var(--color-texto);

  background: var(--color-blanco);

  font-size: 15px;

  font-weight: 600;

  text-align: center;

  cursor: pointer;

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


.categoria-card:hover {
  transform: translateY(-2px);

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

  box-shadow:
    0 10px 24px
    rgba(31, 64, 68, 0.08);

  color: var(--color-principal);
}


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

.productos-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 22px;
}


.producto-card {
  position: relative;

  overflow: hidden;

  border:
    1px solid var(--color-borde);

  border-radius: 15px;

  background: var(--color-blanco);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.producto-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 30px
    rgba(35, 70, 74, 0.10);
}


.producto-card img {
  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  background: var(--color-superficie);
}


.producto-card h3 {
  margin:
    15px 15px
    7px;

  color: var(--color-texto);

  font-size: 16px;

  line-height: 1.3;

  font-weight: 600;
}


.producto-card p {
  margin:
    0 15px
    15px;

  color: var(--color-principal);

  font-size: 17px;

  font-weight: 700;
}


/* =============================================================================
   ¿BUSCAS ALGO?
   ============================================================================= */

.buscas-algo {
  padding:
    70px 0;

  text-align: center;

  background: var(--color-superficie);
}


.buscas-algo h2 {
  margin:
    0 0
    10px;

  font-size: 30px;

  color: var(--color-texto);
}


.buscas-algo p {
  margin:
    0 0
    24px;

  color: var(--color-texto-secundario);

  font-size: 16px;
}


.buscas-algo .boton-principal {
  color: var(--color-blanco);

  background: var(--color-principal);
}

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

@media (max-width: 1050px) {

  .header-contenido {
    width:
      calc(100% - 32px);

    gap: 16px;
  }


  .navegacion-principal {
    gap: 0;
  }


  .navegacion-principal a {
    padding-left: 9px;
    padding-right: 9px;
  }


  .header-nombre {
    font-size: 20px;
  }


  .productos-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .categorias-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


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

@media (max-width: 900px) {

  .header-contenido {
    min-height: 68px;
  }


  .navegacion-principal {
    display: none;
  }


  .header-marca {
    flex: 1;
  }


  .header-logo {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    max-width: 42px !important;
    max-height: 42px !important;
  }


  .header-menu-movil {
    display: inline-flex;
  }


  .productos-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .categorias-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .hero-inicio {
    min-height: 330px;
  }

}


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

@media (max-width: 560px) {

  .contenedor {
    width:
      calc(100% - 28px);
  }


  .header-contenido {
    width:
      calc(100% - 24px);

    gap: 5px;
  }


  .header-nombre {
    font-size: 18px;
  }


  .header-acciones {
    gap: 1px;
  }


  .header-icono {
    width: 37px;
    height: 37px;
  }


  .header-icono .material-symbols-rounded {
    font-size: 23px;
  }


  .carrito-info {
    display: none;
  }


  .header-carrito {
    width: 39px;
    height: 39px;

    margin-left: 0;

    padding: 0;

    justify-content: center;

    border: none;

    border-radius: 50%;
  }


  .header-menu-movil {
    width: 37px;
    height: 37px;
  }


  .hero-inicio {
    min-height: 300px;

    padding:
      54px 20px;
  }


  .hero-inicio h1 {
    font-size: 39px;
  }


  .hero-inicio p {
    font-size: 16px;
  }


  .seccion-inicio {
    padding:
      44px 0;
  }


  .titulo-seccion {
    margin-bottom: 21px;
  }


  .titulo-seccion h2 {
    font-size: 25px;
  }


  .categorias-grid {
    gap: 10px;
  }


  .categoria-card {
    min-height: 70px;

    padding: 13px;

    font-size: 14px;
  }


  .productos-grid {
    gap: 12px;
  }


  .producto-card {
    border-radius: 12px;
  }


  .producto-card h3 {
    margin:
      11px 11px
      5px;

    font-size: 14px;
  }


  .producto-card p {
    margin:
      0 11px
      12px;

    font-size: 15px;
  }


  .buscas-algo {
    padding:
      52px 0;
  }


  .buscas-algo h2 {
    font-size: 25px;
  }

}

/* =============================================================================
   HEADER SAYPRES - VERSIÓN E-COMMERCE
   ============================================================================= */

.header-contenido {
  width: min(
    1480px,
    calc(100% - 48px)
  );

  min-height: 78px;

  margin: 0 auto;

  display: flex;
  align-items: center;

  gap: 28px;
}


/* MARCA */

.header-marca {
  flex-shrink: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}

.header-logo {
  width: 46px !important;
  height: 46px !important;

  min-width: 46px !important;
  min-height: 46px !important;

  max-width: 46px !important;
  max-height: 46px !important;

  object-fit: contain;
}

.header-nombre {
  color: var(--color-principal);

  font-size: 22px;
  font-weight: 700;

  letter-spacing: 0.5px;
}


/* NAVEGACIÓN */

.navegacion-principal {
  display: flex;
  align-items: center;

  gap: 4px;

  flex-shrink: 0;
}

.navegacion-principal a {
  position: relative;

  padding:
    29px 10px
    27px;

  color: #445255;

  font-size: 15px;
  font-weight: 500;
}

.navegacion-principal a:hover,
.navegacion-principal a.activo {
  color: var(--color-principal);
}

.navegacion-principal a.activo {
  font-weight: 600;
}

.navegacion-principal a.activo::after {
  content: '';

  position: absolute;

  left: 10px;
  right: 10px;
  bottom: 17px;

  height: 2px;

  border-radius: 999px;

  background: var(--color-principal);
}


/* BUSCADOR */

.header-buscador {
  min-width: 210px;
  max-width: 310px;

  height: 46px;

  flex: 1;

  margin-left: auto;

  padding:
    0 16px;

  display: flex;
  align-items: center;

  gap: 10px;

  border:
    1px solid #DCE3E3;

  border-radius: 999px;

  background: #F8F9F9;

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

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

  background: #FFFFFF;

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

.header-buscador .material-symbols-rounded {
  color: var(--color-principal);

  font-size: 24px;
}

.header-buscador input {
  width: 100%;

  padding: 0;

  border: 0;
  outline: 0;

  color: var(--color-texto);

  background: transparent;

  font-size: 14px;
}

.header-buscador input::placeholder {
  color: #929D9F;
}


/* ACCIONES */

.header-acciones {
  display: flex;
  align-items: center;

  gap: 14px;

  flex-shrink: 0;
}


/* FAVORITOS */

.header-favoritos {
  position: relative;

  width: 43px;
  height: 43px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--color-principal);

  background: transparent;

  cursor: pointer;
}

.header-favoritos .material-symbols-rounded {
  font-size: 29px;

  font-variation-settings:
    'FILL' 0,
    'wght' 450,
    'GRAD' 0,
    'opsz' 24;
}


/* CONTADORES */

.contador-header {
  position: absolute;

  top: -3px;
  right: -3px;

  min-width: 19px;
  height: 19px;

  padding: 0 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    2px solid #FFFFFF;

  border-radius: 999px;

  color: #FFFFFF;

  background: var(--color-principal);

  font-size: 10px;
  font-weight: 700;
}


/* CARRITO */

.header-carrito {
  height: 46px;

  padding: 0;

  display: flex;
  align-items: center;

  gap: 10px;

  border: 0;

  background: transparent;

  cursor: pointer;
}

.carrito-icono {
  position: relative;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--color-principal);
}

.carrito-icono .material-symbols-rounded {
  font-size: 31px;

  font-variation-settings:
    'FILL' 0,
    'wght' 450,
    'GRAD' 0,
    'opsz' 24;
}

.contador-carrito {
  top: -2px;
  right: -2px;
}

.carrito-total {
  color: var(--color-principal);

  font-size: 16px;
  font-weight: 700;

  white-space: nowrap;
}


/* MENÚ MÓVIL */

.header-menu-movil {
  display: none;
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1250px) {

  .header-contenido {
    gap: 16px;
  }

  .header-buscador {
    max-width: 240px;
  }

  .header-nombre {
    display: none;
  }

}


@media (max-width: 1050px) {

  .header-buscador {
    min-width: 170px;
  }

  .navegacion-principal a {
    padding-left: 7px;
    padding-right: 7px;

    font-size: 14px;
  }

}


@media (max-width: 900px) {

  .header-contenido {
    width:
      calc(100% - 28px);

    min-height: 68px;
  }

  .header-nombre {
    display: inline;
  }

  .navegacion-principal {
    display: none;
  }

  .header-buscador {
    display: none;
  }

  .header-marca {
    flex: 1;
  }

  .header-menu-movil {
    width: 40px;
    height: 40px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-principal);

    background: transparent;

    cursor: pointer;
  }

}


@media (max-width: 560px) {

  .header-nombre {
    font-size: 18px;
  }

  .header-logo {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    max-width: 40px !important;
    max-height: 40px !important;
  }

  .header-acciones {
    gap: 5px;
  }

  .carrito-total {
    display: none;
  }

  .header-favoritos {
    width: 38px;
    height: 38px;
  }

  .carrito-icono {
    width: 39px;
    height: 39px;
  }

}


/* =============================================================================
   MARCA DEL PRODUCTO
   ============================================================================= */

.producto-marca {
  display: block;

  margin:
    14px 15px
    2px;

  color: #7A888A;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.4px;

  text-transform: uppercase;
}


.producto-marca + h3 {
  margin-top: 4px;
}


@media (max-width: 560px) {

  .producto-marca {
    margin:
      10px 11px
      2px;

    font-size: 11px;
  }

}

/* =============================================================================
   BANNER SAYPRES
   ============================================================================= */

.banner-inicio {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #F4F6F6;
}


.banner-slides {
  position: relative;

  width: 100%;

  aspect-ratio: 1920 / 620;
}


.banner-slide {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.45s ease;
}


.banner-slide.activo {
  opacity: 1;

  pointer-events: auto;
}


.banner-slide img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;
}


/* INDICADORES */

.banner-indicadores {
  position: absolute;

  left: 50%;
  bottom: 14px;

  z-index: 4;

  display: flex;

  gap: 7px;

  transform:
    translateX(-50%);
}


.banner-indicador {
  width: 8px;
  height: 8px;

  padding: 0;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.65);

  cursor: pointer;

  transition:
    width 0.18s ease,
    background 0.18s ease;
}


.banner-indicador.activo {
  width: 22px;

  background: #FFFFFF;
}


/* =============================================================================
   BOTÓN FIJO BAJO EL BANNER
   ============================================================================= */

.banner-acciones {
  width: 100%;

  padding:
    16px 24px
    18px;

  display: flex;

  justify-content: center;

  background: #FFFFFF;
}


.boton-ver-catalogo {
  min-width: 145px;

  min-height: 42px;

  padding:
    0 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid #28676E;

  border-radius: 9px;

  color: #28676E;

  background: #FFFFFF;

  font-size: 14px;

  font-weight: 600;

  transition:
    color 0.16s ease,
    background 0.16s ease;
}


.boton-ver-catalogo:hover {
  color: #FFFFFF;

  background: #28676E;
}


/* =============================================================================
   BANNER MÓVIL
   ============================================================================= */

@media (max-width: 768px) {

  .banner-slides {
    aspect-ratio: 4 / 5;
  }


  .banner-acciones {
    padding:
      12px 18px
      15px;
  }


  .boton-ver-catalogo {
    min-width: 130px;

    min-height: 40px;
  }

}

/* =============================================================================
   ACCIONES BAJO EL BANNER
   ============================================================================= */

.banner-acciones {
  position: relative;

  z-index: 10;

  width: 100%;

  margin-top: -22px;

  padding:
    0 24px
    22px;

  display: flex;

  justify-content: center;

  gap: 12px;

  background: transparent;
}


.boton-banner-fijo {
  min-width: 150px;

  height: 45px;

  padding:
    0 18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border:
    1px solid rgba(40, 103, 110, 0.22);

  border-radius: 10px;

  color: #28676E;

  background: #FFFFFF;

  font-size: 14px;

  font-weight: 600;

  box-shadow:
    0 7px 22px
    rgba(38, 76, 81, 0.12);

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


.boton-banner-fijo:hover {
  transform:
    translateY(-2px);

  border-color:
    #28676E;

  box-shadow:
    0 10px 26px
    rgba(38, 76, 81, 0.17);
}


.boton-banner-fijo
.material-symbols-rounded {
  font-size: 20px;
}


@media (max-width: 560px) {

  .banner-acciones {
    margin-top: 0px;

    padding:
      0 14px
      18px;

    gap: 8px;
  }


  .boton-banner-fijo {
    flex: 1;

    min-width: 0;

    max-width: 170px;

    height: 42px;

    padding:
      0 12px;

    font-size: 13px;
  }

}

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

.categorias-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}


.categoria-card {
  min-height: 96px;

  padding:
    20px 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  border:
    1px solid #E1E7E7;

  border-radius: 14px;

  color: #2E3A3D;

  background: #FFFFFF;

  cursor: pointer;

  box-shadow:
    0 3px 12px
    rgba(35, 70, 74, 0.03);

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


.categoria-card:hover {
  transform:
    translateY(-3px);

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

  background:
    #FCFEFE;

  box-shadow:
    0 12px 28px
    rgba(35, 70, 74, 0.10);
}


.categoria-card-contenido {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 5px;
}


.categoria-card-contenido strong {
  color: #2E3A3D;

  font-size: 17px;

  font-weight: 600;
}


.categoria-card-contenido > span {
  color: #7A888A;

  font-size: 12px;

  font-weight: 500;
}


.categoria-card-flecha {
  flex-shrink: 0;

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #28676E;

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

  font-size: 20px;

  transition:
    transform 0.18s ease,
    background 0.18s ease;
}


.categoria-card:hover
.categoria-card-flecha {
  transform:
    translateX(3px);

  background:
    rgba(40, 103, 110, 0.14);
}


@media (max-width: 900px) {

  .categorias-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 560px) {

  .categorias-grid {
    grid-template-columns:
      1fr;

    gap: 10px;
  }


  .categoria-card {
    min-height: 78px;

    padding:
      15px 17px;
  }


  .categoria-card-contenido strong {
    font-size: 15px;
  }


  .categoria-card-flecha {
    width: 34px;
    height: 34px;
  }

}

/* =============================================================================
   SECCIÓN CATEGORÍAS PREMIUM
   ============================================================================= */

.seccion-categorias {
  position: relative;

  padding-bottom: 58px;

  background: #F7F9F9;
}


/* FRANJA CORPORATIVA */

.franja-categorias {
  width: 100%;

  min-height: 150px;

  padding:
    38px 0
    55px;

  background: #28676E;
}


.titulo-categorias {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.titulo-categorias > span {
  margin-bottom: 5px;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 1.6px;

  text-transform: uppercase;
}


.titulo-categorias h2 {
  margin: 0;

  color: #FFFFFF;

  font-size: 32px;

  font-weight: 700;

  line-height: 1.1;
}


/* TARJETAS SUPERPUESTAS */

.categorias-contenido {
  position: relative;

  margin-top: -34px;

  z-index: 2;
}


.categorias-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}


.categoria-card {
  min-height: 102px;

  padding:
    20px 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  border:
    1px solid
    rgba(40, 103, 110, 0.13);

  border-radius: 14px;

  color: #2E3A3D;

  background: #FFFFFF;

  box-shadow:
    0 10px 28px
    rgba(28, 66, 70, 0.09);

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


.categoria-card:hover {
  transform:
    translateY(-4px);

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

  box-shadow:
    0 15px 34px
    rgba(28, 66, 70, 0.14);
}


.categoria-card-contenido {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 5px;
}


.categoria-card-contenido strong {
  color: #263537;

  font-size: 17px;

  font-weight: 600;
}


.categoria-card-contenido > span {
  color: #788789;

  font-size: 12px;

  font-weight: 500;
}


.categoria-card-flecha {
  flex-shrink: 0;

  width: 40px;
  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #28676E;

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

  font-size: 21px;

  transition:
    transform 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}


.categoria-card:hover
.categoria-card-flecha {
  transform:
    translateX(3px);

  color: #FFFFFF;

  background: #28676E;
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 900px) {

  .categorias-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 560px) {

  .franja-categorias {
    min-height: 125px;

    padding:
      30px 0
      48px;
  }


  .titulo-categorias h2 {
    font-size: 27px;
  }


  .categorias-contenido {
    margin-top: -28px;
  }


  .categorias-grid {
    grid-template-columns: 1fr;

    gap: 11px;
  }


  .categoria-card {
    min-height: 82px;

    padding:
      15px 17px;
  }

}

/* =============================================================================
   AJUSTE FINAL CATEGORÍAS
   ============================================================================= */

.seccion-categorias {
  position: relative;

  padding-bottom: 48px;

  background: #F7F9F9;
}


/* FRANJA CORPORATIVA FINA */

.franja-categorias {
  width: 100%;

  min-height: 58px;

  padding: 0;

  background: #28676E;
}


/* TARJETAS SUPERPUESTAS */

.categorias-contenido {
  position: relative;

  z-index: 2;

  margin-top: -28px;
}


/* TÍTULO PRODUCTOS DESTACADOS */

.seccion-inicio .titulo-seccion h2 {
  line-height: 1.15;
}


@media (max-width: 560px) {

  .franja-categorias {
    min-height: 48px;
  }


  .categorias-contenido {
    margin-top: -23px;
  }


  .seccion-categorias {
    padding-bottom: 38px;
  }

}

/* =============================================================================
   AJUSTE DEFINITIVO - CATEGORÍAS Y DESTACADOS
   ============================================================================= */


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

.seccion-categorias {
  position: relative;

  padding-bottom: 46px;

  background: #F7F9F9;
}


.franja-categorias {
  width: 100%;

  height: 54px;

  background: #28676E;
}


.categorias-contenido {
  position: relative;

  z-index: 2;

  margin-top: -27px;
}


/* =========================
   DESTACADOS
   ========================= */

.seccion-destacados {
  padding-bottom: 58px;

  background: #FFFFFF;
}


.franja-destacados {
  width: 100%;

  padding:
    22px 0;

  background: #28676E;
}


.franja-destacados h2 {
  margin: 0;

  color: #FFFFFF;

  font-size: 29px;

  font-weight: 700;

  line-height: 1.15;
}


.destacados-contenido {
  padding-top: 34px;
}


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

@media (max-width: 560px) {

  .franja-categorias {
    height: 46px;
  }


  .categorias-contenido {
    margin-top: -23px;
  }


  .seccion-categorias {
    padding-bottom: 36px;
  }


  .franja-destacados {
    padding:
      18px 0;
  }


  .franja-destacados h2 {
    font-size: 23px;
  }


  .destacados-contenido {
    padding-top: 24px;
  }

}


/* =============================================================================
   SAYPRES - AJUSTE VISUAL FINAL INICIO
   ============================================================================= */


/* --------------------------------------------------------------------------
   FRANJA SOBRE CATEGORÍAS
   -------------------------------------------------------------------------- */

.seccion-categorias {
  padding-bottom: 32px;

  background: #F7F9F9;
}


.franja-categorias {
  width: 100%;

  height: 26px !important;
  min-height: 26px !important;

  padding: 0 !important;

  background: #28676E;
}


.categorias-contenido {
  position: relative;

  z-index: 2;

  margin-top: -13px !important;
}


/* --------------------------------------------------------------------------
   TARJETAS DE CATEGORÍAS MÁS COMPACTAS
   -------------------------------------------------------------------------- */

.categorias-grid {
  gap: 14px;
}


.categoria-card {
  min-height: 72px !important;

  padding:
    12px 17px !important;

  border-radius: 12px;

  box-shadow:
    0 7px 20px
    rgba(30, 68, 72, 0.07);
}


.categoria-card-contenido {
  gap: 2px;
}


.categoria-card-contenido strong {
  font-size: 15px !important;

  font-weight: 600;
}


.categoria-card-contenido > span {
  font-size: 11px !important;
}


.categoria-card-flecha {
  width: 32px !important;
  height: 32px !important;

  font-size: 18px !important;
}


/* --------------------------------------------------------------------------
   PRODUCTOS DESTACADOS
   -------------------------------------------------------------------------- */

.seccion-destacados {
  padding-bottom: 50px;

  background: #FFFFFF;
}


.franja-destacados {
  width: 100%;

  padding:
    17px 0 !important;

  background: #28676E;
}


.franja-destacados h2 {
  margin: 0;

  color: #FFFFFF;

  font-family:
    'Barlow',
    sans-serif;

  font-size: 27px !important;

  font-weight: 600;

  line-height: 1.1;

  letter-spacing: 0.3px;

  text-align: center;
}


.destacados-contenido {
  padding-top: 30px !important;
}


/* --------------------------------------------------------------------------
   MÓVIL
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {

  .franja-categorias {
    height: 22px !important;
    min-height: 22px !important;
  }


  .categorias-contenido {
    margin-top: -11px !important;
  }


  .categoria-card {
    min-height: 64px !important;

    padding:
      10px 14px !important;
  }


  .franja-destacados {
    padding:
      14px 0 !important;
  }


  .franja-destacados h2 {
    font-size: 22px !important;
  }

}

/* =============================================================================
   JERARQUÍA BOTONES BAJO EL BANNER
   ============================================================================= */

/* BOTÓN PRINCIPAL: VER CATÁLOGO */

.banner-acciones
.boton-banner-fijo:first-child {
  color: #FFFFFF;

  background: #28676E;

  border-color: #28676E;
}


.banner-acciones
.boton-banner-fijo:first-child:hover {
  color: #FFFFFF;

  background: #20565C;

  border-color: #20565C;
}


/* BOTÓN SECUNDARIO: VER LO NUEVO */

.banner-acciones
.boton-banner-fijo:last-child {
  color: #28676E;

  background: #FFFFFF;

  border-color: #28676E;
}


.banner-acciones
.boton-banner-fijo:last-child:hover {
  color: #FFFFFF;

  background: #28676E;

  border-color: #28676E;
}

/* =============================================================================
   SAYPRES - TARJETA DE PRODUCTO PREMIUM
   ============================================================================= */

.producto-card {
  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  border:
    1px solid #E3E8E8;

  border-radius: 14px;

  background: #FFFFFF;

  box-shadow:
    0 4px 16px
    rgba(30, 65, 69, 0.04);

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


.producto-card:hover {
  transform:
    translateY(-4px);

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

  box-shadow:
    0 14px 30px
    rgba(30, 65, 69, 0.10);
}


/* =============================================================================
   IMAGEN
   ============================================================================= */

.producto-imagen {
  position: relative;

  width: 100%;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: #FAFBFB;
}


.producto-imagen > img {
  width: 100%;
  height: 100%;

  aspect-ratio: auto;

  padding: 6px;

  object-fit: contain;

  object-position: center;

  background: #FFFFFF;
}


/* =============================================================================
   SIN IMAGEN
   ============================================================================= */

.producto-sin-imagen {
  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #A5B0B1;

  background: #F4F6F6;
}


.producto-sin-imagen
.material-symbols-rounded {
  font-size: 44px;
}


/* =============================================================================
   ETIQUETAS
   ============================================================================= */

.producto-etiquetas {
  position: absolute;

  top: 12px;
  left: 12px;

  z-index: 4;

  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


.producto-etiqueta {
  min-height: 25px;

  padding:
    0 9px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  color: #FFFFFF;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.8px;
}


/* NUEVO - AZUL ELEGANTE */

.producto-etiqueta-nuevo {
  background: #3D6F91;
}


/* OFERTA - PLOMO ELEGANTE */

.producto-etiqueta-oferta {
  background: #687477;
}


/* =============================================================================
   FAVORITO
   ============================================================================= */

.producto-favorito {
  -webkit-tap-highlight-color: transparent;
touch-action: manipulation;
  position: absolute;

  top: 11px;
  right: 11px;

  z-index: 5;

  width: 38px;
  height: 38px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(40, 103, 110, 0.12);

  border-radius: 50%;

  color: #28676E;

  background:
    rgba(255, 255, 255, 0.94);

  box-shadow:
    0 4px 14px
    rgba(30, 65, 69, 0.10);

  cursor: pointer;

  transition:
    transform 0.16s ease,
    color 0.16s ease,
    background 0.16s ease;
}


/* Efecto hover solo para dispositivos con mouse */
@media (hover: hover) and (pointer: fine) {
  .producto-favorito:hover {
    transform: scale(1.06);
    color: #FFFFFF;
    background: #28676E;
  }
}


.producto-favorito
.material-symbols-rounded {
  font-size: 22px;

  font-variation-settings:
    'FILL' 0,
    'wght' 450,
    'GRAD' 0,
    'opsz' 24;
}


/* =============================================================================
   INFORMACIÓN
   ============================================================================= */

.producto-info {
  flex: 1;

  padding:
    14px 15px
    15px;

  display: flex;

  flex-direction: column;
}


.producto-info
.producto-marca {
  margin:
    0 0
    4px;

  color: #7A888A;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.6px;

  text-transform: uppercase;
}


.producto-info h3 {
  margin: 0;

  color: #263537;

  font-size: 16px;

  line-height: 1.3;

  font-weight: 600;
}


/* =============================================================================
   PARTE INFERIOR
   ============================================================================= */

.producto-footer {
  margin-top: auto;

  padding-top: 14px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 12px;
}


.producto-precios {
  min-height: 42px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: flex-start;
}


/* PRECIO NORMAL */

.producto-precio-normal {
  color: #28676E;

  font-size: 18px;

  font-weight: 700;
}


/* PRECIO ANTERIOR */

.producto-precio-anterior {
  margin-bottom: 1px;

  color: #8A9698;

  font-size: 12px;

  font-weight: 500;

  text-decoration:
    line-through;

  text-decoration-thickness:
    1px;
}


/* PRECIO CON DESCUENTO */

.producto-precio-descuento {
  color: #C94C4C;

  font-size: 18px;

  font-weight: 700;
}


/* =============================================================================
   CARRITO DE CADA PRODUCTO
   ============================================================================= */

.producto-carrito {
  flex-shrink: 0;

  width: 42px;
  height: 42px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  color: #FFFFFF;

  background: #28676E;

  cursor: pointer;

  box-shadow:
    0 6px 15px
    rgba(40, 103, 110, 0.18);

  transition:
    transform 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}


.producto-carrito:hover {
  transform:
    translateY(-2px);

  background: #20565C;

  box-shadow:
    0 9px 19px
    rgba(40, 103, 110, 0.25);
}


.producto-carrito
.material-symbols-rounded {
  font-size: 21px;
}


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

@media (max-width: 560px) {

  .producto-etiquetas {
    top: 8px;
    left: 8px;

    gap: 4px;
  }


  .producto-etiqueta {
    min-height: 21px;

    padding:
      0 7px;

    font-size: 9px;
  }


.producto-favorito {
  top: 8px;
  right: 8px;

  width: 34px;
  height: 34px;
}


  .producto-favorito
  .material-symbols-rounded {
    font-size: 20px;
  }


  .producto-info {
    padding:
      11px 11px
      12px;
  }


  .producto-info h3 {
    font-size: 14px;
  }


  .producto-footer {
    padding-top: 10px;
  }


  .producto-precio-normal,
  .producto-precio-descuento {
    font-size: 16px;
  }


  .producto-carrito {
    width: 38px;
    height: 38px;

    border-radius: 9px;
  }

}

/* =============================================================================
   FAVORITO ACTIVO
   ============================================================================= */

.producto-favorito.activo {
  color: #28676E;

  background: #FFFFFF;

  border-color: #28676E;

  box-shadow:
    0 5px 16px
    rgba(40, 103, 110, 0.20);
}


.producto-favorito.activo
.material-symbols-rounded {
  color: #28676E;

  font-variation-settings:
    'FILL' 1,
    'wght' 600,
    'GRAD' 0,
    'opsz' 24;
}


/* =============================================================================
   CARRITO - PRODUCTO SELECCIONADO
   ============================================================================= */

.producto-carrito.agregado {
  color: #28676E;

  background: #FFFFFF;

  border:
    1px solid #28676E;

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


.producto-carrito.agregado:hover {
  color: #28676E;

  background: #EDF4F4;

  border-color: #28676E;

  transform:
    translateY(-2px);
}


.producto-carrito.agregado
.material-symbols-rounded {
  color: #28676E;

  font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 24;
}

/* =============================================================================
   SAYPRES - CARRITO LATERAL
   ============================================================================= */

body.carrito-abierto {
  overflow: hidden;
}


/* OVERLAY */

.carrito-overlay {
  position: fixed;

  inset: 0;

  z-index: 1990;

  visibility: hidden;

  opacity: 0;

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

  backdrop-filter:
    blur(2px);

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


.carrito-overlay.abierto {
  visibility: visible;

  opacity: 1;
}


/* PANEL */

.carrito-panel {
  position: fixed;

  top: 0;
  right: 0;

  z-index: 2000;

  width: min(
    440px,
    100%
  );

  height: 100dvh;

  display: flex;
  flex-direction: column;

  background: #FFFFFF;

  box-shadow:
    -15px 0 45px
    rgba(26, 55, 59, 0.16);

  transform:
    translateX(100%);

  transition:
    transform 0.28s ease;
}


.carrito-panel.abierto {
  transform:
    translateX(0);
}


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

.carrito-panel-header {
  flex-shrink: 0;

  min-height: 86px;

  padding:
    18px 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  border-bottom:
    1px solid #E3E8E8;
}


.carrito-panel-etiqueta {
  display: block;

  margin-bottom: 2px;

  color: #788789;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.carrito-panel-header h2 {
  margin: 0;

  color: #263537;

  font-size: 24px;

  font-weight: 700;
}


.carrito-panel-cerrar {
  width: 40px;
  height: 40px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #28676E;

  background:
    #EDF4F4;

  cursor: pointer;

  transition:
    background 0.16s ease,
    transform 0.16s ease;
}


.carrito-panel-cerrar:hover {
  background:
    #DFECEC;

  transform:
    scale(1.04);
}


/* =============================================================================
   CONTENIDO
   ============================================================================= */

.carrito-panel-contenido {
  flex: 1;

  min-height: 0;

  padding:
    8px 20px 20px;

  overflow-y: auto;
}


/* =============================================================================
   PRODUCTO
   ============================================================================= */

.carrito-item {
  padding:
    16px 0;

  display: grid;

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

  gap: 14px;

  border-bottom:
    1px solid #E8ECEC;
}


.carrito-item-imagen {
  width: 84px;
  height: 105px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid #E6EBEB;

  border-radius: 10px;

  background: #FFFFFF;
}


.carrito-item-imagen img {
  width: 100%;
  height: 100%;

  padding: 3px;

  object-fit: contain;

  object-position: center;
}


.carrito-item-imagen
.material-symbols-rounded {
  color: #A2ADAE;

  font-size: 34px;
}


.carrito-item-info {
  min-width: 0;

  display: flex;

  flex-direction: column;
}


.carrito-item-superior {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px;
}


.carrito-item-nombre {
  color: #263537;

  font-size: 14px;

  line-height: 1.3;

  font-weight: 600;
}


.carrito-item-eliminar {
  flex-shrink: 0;

  width: 30px;
  height: 30px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #8A9698;

  background: transparent;

  cursor: pointer;

  transition:
    color 0.16s ease,
    background 0.16s ease;
}


.carrito-item-eliminar:hover {
  color: #C94C4C;

  background:
    rgba(201, 76, 76, 0.08);
}


.carrito-item-eliminar
.material-symbols-rounded {
  font-size: 19px;
}


.carrito-item-precio {
  margin-top: 5px;

  color: #788789;

  font-size: 12px;
}


/* =============================================================================
   CANTIDAD Y SUBTOTAL
   ============================================================================= */

.carrito-item-inferior {
  margin-top: auto;

  padding-top: 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;
}


.carrito-cantidad-control {
  height: 34px;

  display: inline-flex;

  align-items: center;

  border:
    1px solid #DDE5E5;

  border-radius: 9px;

  overflow: hidden;

  background: #FFFFFF;
}


.carrito-cantidad-control button {
  width: 32px;
  height: 32px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #28676E;

  background: #FFFFFF;

  cursor: pointer;
}


.carrito-cantidad-control button:hover:not(:disabled) {
  background:
    #EDF4F4;
}


.carrito-cantidad-control button:disabled {
  color: #B9C1C2;

  cursor: not-allowed;
}


.carrito-cantidad-control
.material-symbols-rounded {
  font-size: 17px;
}


.carrito-cantidad-control > span {
  min-width: 30px;

  color: #263537;

  font-size: 13px;

  font-weight: 700;

  text-align: center;
}


.carrito-item-subtotal {
  color: #28676E;

  font-size: 15px;

  font-weight: 700;
}


/* =============================================================================
   CARRITO VACÍO
   ============================================================================= */

.carrito-vacio {
  min-height: 330px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 30px;

  color: #788789;

  text-align: center;
}


.carrito-vacio
.material-symbols-rounded {
  margin-bottom: 12px;

  color: #28676E;

  font-size: 48px;

  font-variation-settings:
    'FILL' 0,
    'wght' 350,
    'GRAD' 0,
    'opsz' 48;
}


.carrito-vacio strong {
  color: #263537;

  font-size: 17px;
}


.carrito-vacio p {
  margin:
    7px 0 0;

  font-size: 13px;
}


/* =============================================================================
   RESUMEN
   ============================================================================= */

.carrito-panel-resumen {
  flex-shrink: 0;

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

  border-top:
    1px solid #E3E8E8;

  background: #FFFFFF;

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


.carrito-resumen-linea {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  color: #69787A;

  font-size: 13px;
}


.carrito-resumen-linea
+ .carrito-resumen-linea {
  margin-top: 9px;
}


.carrito-resumen-total {
  padding-top: 10px;

  border-top:
    1px solid #EEF1F1;

  color: #263537;

  font-size: 16px;
}


.carrito-resumen-total strong {
  color: #28676E;

  font-size: 21px;
}


.carrito-boton-continuar {
  width: 100%;

  min-height: 48px;

  margin-top: 16px;

  border-radius: 10px;

  color: #FFFFFF;

  background: #28676E;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.16s ease,
    transform 0.16s ease;
}


.carrito-boton-continuar:hover {
  background: #20565C;

  transform:
    translateY(-1px);
}


.carrito-panel-resumen.vacio
.carrito-boton-continuar {
  opacity: 0.45;

  pointer-events: none;
}


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

@media (max-width: 560px) {

  .carrito-panel {
    width: 100%;
  }


  .carrito-panel-header {
    min-height: 72px;

    padding:
      14px 16px;
  }


  .carrito-panel-header h2 {
    font-size: 21px;
  }


  .carrito-panel-contenido {
    padding:
      6px 16px 18px;
  }


  .carrito-item {
    grid-template-columns:
      72px minmax(0, 1fr);

    gap: 11px;

    padding:
      13px 0;
  }


  .carrito-item-imagen {
    width: 72px;
    height: 90px;
  }


  .carrito-panel-resumen {
    padding:
      15px 16px
      calc(
        15px +
        env(safe-area-inset-bottom)
      );
  }

}

/* =============================================================================
   SAYPRES - PANEL FAVORITOS
   ============================================================================= */

body.favoritos-abierto {
  overflow: hidden;
}


/* PRECIO */

.favorito-panel-precio {
  display: block;

  margin-top: 7px;

  color: #28676E;

  font-size: 16px;

  font-weight: 700;
}


/* ACCIONES */

.favorito-panel-acciones {
  margin-top: auto;

  padding-top: 12px;

  display: flex;

  align-items: center;
}


/* AGREGAR AL CARRITO */

.favorito-agregar-carrito {
  min-height: 36px;

  padding:
    0 13px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  border:
    1px solid #28676E;

  border-radius: 9px;

  color: #FFFFFF;

  background: #28676E;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}


.favorito-agregar-carrito:hover:not(:disabled) {
  background: #20565C;

  transform:
    translateY(-1px);
}


.favorito-agregar-carrito
.material-symbols-rounded {
  font-size: 18px;
}


/* YA ESTÁ EN EL CARRITO */

.favorito-agregar-carrito.agregado {
  color: #28676E;

  background: #EDF4F4;

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


.favorito-agregar-carrito:disabled {
  cursor: default;

  opacity: 0.7;
}


/* CORAZÓN PARA ELIMINAR */

.favorito-panel-quitar {
  color: #28676E;
}


.favorito-panel-quitar
.material-symbols-rounded {
  font-variation-settings:
    'FILL' 1,
    'wght' 550,
    'GRAD' 0,
    'opsz' 24;
}


.favorito-panel-quitar:hover {
  color: #C94C4C;

  background:
    rgba(201, 76, 76, 0.08);
}


/* =============================================================================
   TARJETA → FICHA DE PRODUCTO
   ============================================================================= */

.producto-imagen,
.producto-info h3 {
  cursor:
    pointer;
}


.producto-info h3 {
  transition:
    color 0.16s ease;
}


.producto-info h3:hover {
  color:
    #28676E;
}

/* =============================================================================
   COMPRAR / COTIZAR - CARRITO
   ============================================================================= */

.carrito-solicitud {
  margin-top:
    18px;

  padding-top:
    16px;

  border-top:
    1px solid
    #E4EAEA;
}


.carrito-solicitud-titulo {
  display:
    block;

  margin-bottom:
    11px;

  color:
    #28676E;

  font-size:
    14px;

  font-weight:
    700;
}


.carrito-solicitud-botones {
  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    8px;
}


.carrito-solicitud-boton {
  width:
    100%;

  min-height:
    46px;

  padding:
    9px 13px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border:
    1px solid
    #D8E2E2;

  border-radius:
    10px;

  color:
    #3B4C4F;

  background:
    #FFFFFF;

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    500;

  cursor:
    pointer;

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


.carrito-solicitud-boton:hover:not(:disabled) {
  color:
    #28676E;

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

  background:
    #F8FAFA;
}


.carrito-solicitud-whatsapp {
  color:
    #28676E;

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


.carrito-solicitud-boton:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}


.carrito-solicitud-boton
.material-symbols-rounded {
  font-size:
    20px;
}


.carrito-whatsapp-icono {
  width:
    20px;

  height:
    20px;

  flex:
    0 0 auto;
}


/* =============================================================================
   TOAST GENERAL SAYPRES
   ============================================================================= */

.saypres-toast-global {
  position:
    fixed;

  left:
    50%;

  bottom:
    26px;

  z-index:
    9999;

  max-width:
    min(
      440px,
      calc(100% - 30px)
    );

  padding:
    12px 18px;

  border-radius:
    10px;

  color:
    #FFFFFF;

  background:
    #2E3A3D;

  box-shadow:
    0 10px 30px
    rgba(20, 35, 37, 0.20);

  font-size:
    13px;

  font-weight:
    500;

  text-align:
    center;

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translate(
      -50%,
      12px
    );

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}


.saypres-toast-global.visible {
  opacity:
    1;

  transform:
    translate(
      -50%,
      0
    );
}


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

@media (max-width: 600px) {

  .carrito-solicitud {
    margin-top:
      14px;

    padding-top:
      14px;
  }


  .carrito-solicitud-boton {
    min-height:
      48px;

    font-size:
      13px;
  }

}

/* =============================================================================
   SAYPRES - FOOTER PREMIUM DEFINITIVO
   ============================================================================= */


/* -----------------------------------------------------------------------------
   FRANJA CORPORATIVA SUPERIOR
   Se deja deliberadamente más gruesa para separar claramente el pie de página.
   ----------------------------------------------------------------------------- */

.separador-footer {
  width: 100%;
  height: auto;
  padding: 17px 0;

  background: #28676E;
}

.separador-footer h2 {
  margin: 0;

  color: #FFFFFF;

  font-family:
    'Barlow',
    sans-serif;

  font-size: 27px;
  font-weight: 600;

  line-height: 1.1;
  letter-spacing: 0.3px;

  text-align: center;
}


/* -----------------------------------------------------------------------------
   ESTRUCTURA GENERAL
   ----------------------------------------------------------------------------- */

.footer-principal {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-blanco);
}

.footer-contenido {
  display: block;
}


/* -----------------------------------------------------------------------------
   ZONA BLANCA: CONTACTO / MARCA / REDES
   ----------------------------------------------------------------------------- */

.footer-superior {
  min-height: 128px;

  padding:
    17px 0
    18px;

  display: grid;

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

  align-items: center;

  gap: 30px;
}

.footer-bloque {
  display: flex;
  flex-direction: column;

  gap: 9px;
}

.footer-contacto {
  align-items: flex-start;
}

.footer-redes {
  align-items: flex-end;
}

.footer-titulo {
  color: #607173;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.7px;

  text-transform: uppercase;
}


/* -----------------------------------------------------------------------------
   MARCA CENTRAL
   ----------------------------------------------------------------------------- */

.footer-marca {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 5px;

  text-align: center;
}

.footer-logo {
  width: 62px !important;
  height: 62px !important;

  min-width: 62px !important;
  min-height: 62px !important;

  max-width: 62px !important;
  max-height: 62px !important;

  object-fit: contain;
}

.footer-marca-texto {
  display: flex;
  flex-direction: column;

  align-items: center;

  line-height: 1.1;
}

.footer-marca-texto strong {
  color: var(--color-principal);

  font-size: 20px;
  font-weight: 700;

  letter-spacing: 0.9px;
}

.footer-marca-texto span {
  margin-top: 3px;

  color: #7A888A;

  font-size: 12px;
  font-weight: 400;
}


/* -----------------------------------------------------------------------------
   ICONOS
   ----------------------------------------------------------------------------- */

.footer-iconos {
  display: flex;

  align-items: center;

  gap: 10px;
}

.footer-icono {
  width: 48px;
  height: 48px;

  padding: 0;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(40, 103, 110, 0.18);

  border-radius: 50%;

  color: var(--color-principal);

  background: var(--color-blanco);

  cursor: pointer;

  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.footer-icono:hover {
  transform: translateY(-2px);

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

  background:
    var(--color-principal-suave);
}

.footer-icono img {
  width: 25px;
  height: 25px;

  object-fit: contain;
}

.footer-icono
.material-symbols-rounded {
  color: var(--color-principal);

  font-size: 28px;

  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}


/* LINKEDIN */

.footer-icono-linkedin {
  font-family:
    Arial,
    sans-serif;
}

.footer-linkedin-text {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  color: var(--color-principal);

  font-size: 23px;
  font-weight: 700;

  line-height: 1;

  transform:
    translateY(-1px);
}


/* -----------------------------------------------------------------------------
   ZONA CORPORATIVA INFERIOR
   ----------------------------------------------------------------------------- */

.footer-zona-corporativa {
  width: 100%;

  margin: 0;

  background: var(--color-principal);
}

.footer-zona-corporativa-contenido {
  padding:
    16px 0
    12px;
}


/* ENLACES */

.footer-legal {
  width: 100%;

  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: center;

  gap:
    8px 22px;

  text-align: center;
}

.footer-legal a {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  color:
    rgba(255, 255, 255, 0.92);

  font-size: 11.5px;
  font-weight: 500;

  line-height: 1.2;

  white-space: nowrap;

  transition:
    color 0.16s ease,
    opacity 0.16s ease;
}

.footer-legal a:hover {
  color: #FFFFFF;
}

.footer-legal a::after {
  content: '';

  position: absolute;

  left: 0;
  right: 100%;
  bottom: -4px;

  height: 1px;

  background:
    rgba(255, 255, 255, 0.92);

  transition:
    right 0.16s ease;
}

.footer-legal a:hover::after {
  right: 0;
}


/* ACCESO COMERCIAL */

.footer-acceso-comercial {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  color: #FFFFFF;
}

.footer-acceso-comercial
.material-symbols-rounded {
  color: #FFFFFF;

  font-size: 14px;

  font-variation-settings:
    'FILL' 0,
    'wght' 450,
    'GRAD' 0,
    'opsz' 20;
}


/* -----------------------------------------------------------------------------
   CIERRE
   ----------------------------------------------------------------------------- */

.footer-inferior {
  width: 100%;

  margin-top: 13px;
  padding-top: 10px;

  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: center;

  gap: 8px 16px;
  text-align: center;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.17);
}

.footer-copyright {
  color:
    rgba(255, 255, 255, 0.78);

  font-size: 10.5px;
  font-weight: 400;
}

.footer-biad {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  color:
    rgba(255, 255, 255, 0.78);

  font-size: 10.5px;

  transition:
    color 0.16s ease;
}

.footer-biad strong {
  color: #FFFFFF;

  font-weight: 700;
}

.footer-biad:hover,
.footer-biad:hover strong {
  color: #FFFFFF;
}

.footer-biad
.material-symbols-rounded {
  color: #FFFFFF;

  font-size: 12px;
}


/* =============================================================================
   FOOTER - TABLET
   ============================================================================= */

@media (max-width: 900px) {

  .footer-superior {
    min-height: 122px;

    gap: 18px;
  }

  .footer-icono {
    width: 44px;
    height: 44px;
  }

  .footer-icono img {
    width: 23px;
    height: 23px;
  }

  .footer-icono
  .material-symbols-rounded {
    font-size: 26px;
  }

  .footer-legal {
    gap:
      9px 16px;
  }

}


/* =============================================================================
   FOOTER - CELULAR
   ============================================================================= */

@media (max-width: 650px) {



  .footer-superior {
    min-height: 0;

    padding:
      20px 0
      19px;

    display: flex;
    flex-direction: column;

    gap: 18px;
  }

  .footer-marca {
    order: 1;
  }

  .footer-contacto {
    order: 2;

    align-items: center;
  }

  .footer-redes {
    order: 3;

    align-items: center;
  }

  .footer-titulo {
    text-align: center;
  }

  .footer-logo {
    width: 60px !important;
    height: 60px !important;

    min-width: 60px !important;
    min-height: 60px !important;

    max-width: 60px !important;
    max-height: 60px !important;
  }

  .footer-iconos {
    justify-content: center;

    gap: 9px;
  }

  .footer-icono {
    width: 46px;
    height: 46px;
  }

  .footer-zona-corporativa-contenido {
    padding:
      16px 0
      14px;
  }

  .footer-legal {
    gap:
      11px 15px;
  }

  .footer-legal a {
    font-size: 11px;

    white-space: normal;
  }

  .footer-inferior {
    margin-top: 14px;
    padding-top: 11px;

    flex-direction: column;

    justify-content: center;

    gap: 6px;

    text-align: center;
  }

  .footer-copyright,
  .footer-biad {
    font-size: 10px;
  }

}


/* =============================================================================
   FOOTER - CELULAR MUY PEQUEÑO
   ============================================================================= */

@media (max-width: 380px) {

  .footer-icono {
    width: 43px;
    height: 43px;
  }

  .footer-iconos {
    gap: 7px;
  }

  .footer-legal {
    gap:
      10px 12px;
  }

}


@media (max-width: 560px) {

  .separador-footer {
    padding: 14px 0;
  }

  .separador-footer h2 {
    font-size: 22px;
  }

}

/* =============================================================================
   SAYPRES - PRODUCTOS RELACIONADOS
   ============================================================================= */

.productos-relacionados-franja {
  width: 100%;

  min-height: 58px;

  padding:
    12px 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    #EDF4F4;

  border-top:
    1px solid #E2E8E8;

  border-bottom:
    1px solid #E2E8E8;
}


.productos-relacionados-franja h2 {
  margin: 0;

  color:
    #28676E;

  font-family:
    'Barlow',
    sans-serif;

  font-size:
    27px;

  font-weight:
    600;

  line-height:
    1.15;

  letter-spacing:
    0;

  text-align:
    center;
}


/* CONTENIDO */

.productos-relacionados-contenido {
  padding-top: 28px;
}


/* GRID */

.productos-relacionados-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 20px;
}


/* TARJETA */

.producto-relacionado-card {
  min-width: 0;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  border:
    1px solid
    #E2E8E8;

  border-radius: 14px;

  background: #FFFFFF;

  box-shadow:
    0 4px 16px
    rgba(
      30,
      65,
      69,
      0.04
    );

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


.producto-relacionado-card:hover {
  transform:
    translateY(-4px);

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

  box-shadow:
    0 14px 30px
    rgba(
      30,
      65,
      69,
      0.10
    );
}


/* IMAGEN */

.producto-relacionado-imagen {
  position: relative;

  width: 100%;

  aspect-ratio:
    4 / 5;

  overflow: hidden;

  background: #FAFBFB;
}


.producto-relacionado-imagen > img {
  width: 100%;
  height: 100%;

  padding: 6px;

  object-fit: contain;
  object-position: center;

  background: #FFFFFF;
}


/* SIN IMAGEN */

.producto-relacionado-sin-imagen {
  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #A5B0B1;

  background: #F4F6F6;
}


.producto-relacionado-sin-imagen
.material-symbols-rounded {
  font-size: 42px;
}


/* ETIQUETAS */

.producto-relacionado-etiquetas {
  position: absolute;

  top: 10px;
  left: 10px;

  z-index: 2;

  display: flex;

  gap: 5px;
}


.producto-relacionado-etiqueta {
  min-height: 23px;

  padding:
    0 8px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 6px;

  color: #FFFFFF;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.7px;
}


.producto-relacionado-etiqueta.nuevo {
  background: #3D6F91;
}


.producto-relacionado-etiqueta.oferta {
  background: #687477;
}


/* INFORMACIÓN */

.producto-relacionado-info {
  flex: 1;

  padding:
    13px 14px
    15px;

  display: flex;
  flex-direction: column;
}


.producto-relacionado-marca {
  margin-bottom: 4px;

  color: #7A888A;

  font-size: 10.5px;
  font-weight: 600;

  letter-spacing: 0.6px;

  text-transform: uppercase;
}


.producto-relacionado-info h3 {
  margin: 0;

  color: #263537;

  font-size: 15px;
  font-weight: 600;

  line-height: 1.3;
}


/* PRECIOS */

.producto-relacionado-precios {
  min-height: 44px;

  margin-top: 12px;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;
  align-items: flex-start;
}


.producto-relacionado-precio {
  color: #28676E;

  font-size: 17px;
  font-weight: 700;
}


.producto-relacionado-precio.oferta {
  color: #C94C4C;
}


.producto-relacionado-precio-anterior {
  margin-bottom: 1px;

  color: #8A9698;

  font-size: 11px;

  text-decoration:
    line-through;
}


/* VER PRODUCTO */

.producto-relacionado-ver {
  margin-top: 12px;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: #28676E;

  font-size: 12px;
  font-weight: 600;
}


.producto-relacionado-ver
.material-symbols-rounded {
  font-size: 17px;

  transition:
    transform 0.16s ease;
}


.producto-relacionado-card:hover
.producto-relacionado-ver
.material-symbols-rounded {
  transform:
    translateX(3px);
}


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

@media (max-width: 900px) {

  .productos-relacionados-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


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

@media (max-width: 650px) {

  .productos-relacionados {
    padding-bottom: 34px;
  }


.productos-relacionados-franja {
  min-height:
    48px;

  padding:
    9px 14px;
}


.productos-relacionados-franja h2 {
  font-size:
    20px;

  line-height:
    1.2;
}


  .productos-relacionados-contenido {
  padding-top: 20px;
}


.productos-relacionados-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.producto-relacionado-card {
  min-width: 0;

  width: 100%;
}

}

/* =============================================================================
   SAYPRES - SUPERFICIES Y JERARQUÍA VISUAL DEFINITIVA
   INICIO
   ============================================================================= */


/* --------------------------------------------------------------------------
   FONDO GENERAL DE LA ZONA COMERCIAL
   -------------------------------------------------------------------------- */

#contenido-principal {
  background:
    #F7F9F9;
}


/* --------------------------------------------------------------------------
   CATEGORÍAS
   Se conserva la pequeña franja corporativa que ya funciona como transición.
   -------------------------------------------------------------------------- */

.seccion-categorias {
  background:
    #F7F9F9 !important;
}


/* --------------------------------------------------------------------------
   PRODUCTOS DESTACADOS
   Fondo general gris claro para que las tarjetas blancas destaquen.
   -------------------------------------------------------------------------- */

.seccion-destacados {
  padding-bottom:
    54px !important;

  background:
    #F7F9F9 !important;
}


/* --------------------------------------------------------------------------
   TÍTULO DESTACADOS
   Reemplazamos la franja corporativa fuerte por una superficie suave.
   -------------------------------------------------------------------------- */

.franja-destacados {
  width:
    100%;

  min-height:
    58px;

  padding:
    12px 0 !important;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #EDF4F4 !important;

  border-top:
    1px solid #E2E8E8;

  border-bottom:
    1px solid #E2E8E8;
}


.franja-destacados .contenedor {
  width:
    100%;
}


.franja-destacados h2 {
  margin:
    0;

  color:
    #28676E !important;

  font-family:
    'Barlow',
    sans-serif;

  font-size:
    27px !important;

  font-weight:
    600;

  line-height:
    1.15;

  letter-spacing:
    0;

  text-align:
    center;
}


/* --------------------------------------------------------------------------
   ESPACIO ENTRE TÍTULO Y PRODUCTOS
   -------------------------------------------------------------------------- */

.destacados-contenido {
  padding-top:
    30px !important;
}


/* --------------------------------------------------------------------------
   TARJETAS
   Permanecen blancas sobre el fondo gris.
   -------------------------------------------------------------------------- */

.producto-card {
  background:
    #FFFFFF;
}


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

@media (max-width: 900px) {

  .franja-destacados {
    min-height:
      54px;

    padding:
      11px 0 !important;
  }


  .franja-destacados h2 {
    font-size:
      24px !important;
  }


  .destacados-contenido {
    padding-top:
      25px !important;
  }

}


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

@media (max-width: 560px) {

  .seccion-destacados {
    padding-bottom:
      38px !important;
  }


  .franja-destacados {
    min-height:
      48px;

    padding:
      9px 14px !important;
  }


  .franja-destacados h2 {
    font-size:
      20px !important;

    line-height:
      1.2;
  }


  .destacados-contenido {
    padding-top:
      20px !important;
  }

}

/* =============================================================================
   SAYPRES - FRANJA CONECTA CON NOSOTROS
   MISMA JERARQUÍA QUE DESTACADOS
   ============================================================================= */

/* =============================================================================
   SAYPRES - FRANJA SUPERIOR DEL FOOTER
   ============================================================================= */

.separador-footer {
  width: 100% !important;

  min-height: 54px;

  padding:
    10px 0 !important;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    #28676E !important;

  border:
    none !important;
}


.separador-footer .contenedor {
  width:
    100%;
}


.separador-footer h2 {
  margin:
    0;

  color:
    #FFFFFF !important;

  font-family:
    'Barlow',
    sans-serif;

  font-size:
    25px !important;

  font-weight:
    600;

  line-height:
    1.15;

  letter-spacing:
    0;

  text-align:
    center;
}


/* TABLET */

@media (max-width: 900px) {

  .separador-footer {
    min-height:
      50px;

    padding:
      9px 0 !important;
  }


  .separador-footer h2 {
    font-size:
      22px !important;
  }

}


/* MÓVIL */

@media (max-width: 560px) {

  .separador-footer {
    min-height:
      46px;

    padding:
      8px 14px !important;
  }


  .separador-footer h2 {
    font-size:
      19px !important;
  }

}

/* =============================================================================
   SAYPRES - QUITAR LÍNEAS DE FRANJAS
   ============================================================================= */

.franja-destacados,
.productos-relacionados-franja {
  border-top:
    none !important;

  border-bottom:
    none !important;
}

/* =============================================================================
   SAYPRES - NAVEGACIÓN LATERAL DEL BANNER
   ============================================================================= */

.banner-flecha {
  position:
    absolute;

  top:
    50%;

  z-index:
    7;

  width:
    48px;

  height:
    48px;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      40,
      103,
      110,
      0.16
    );

  border-radius:
    50%;

  color:
    #28676E;

  background:
    rgba(
      255,
      255,
      255,
      0.90
    );

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

  cursor:
    pointer;

  transform:
    translateY(-50%);

  backdrop-filter:
    blur(4px);

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


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


.banner-flecha-anterior {
  left:
    18px;
}


.banner-flecha-siguiente {
  right:
    18px;
}


.banner-flecha:hover {
  color:
    #FFFFFF;

  background:
    #28676E;

  box-shadow:
    0 7px 22px
    rgba(
      30,
      65,
      69,
      0.22
    );
}


.banner-flecha-anterior:hover {
  transform:
    translateY(-50%)
    translateX(-2px);
}


.banner-flecha-siguiente:hover {
  transform:
    translateY(-50%)
    translateX(2px);
}


.banner-flecha
.material-symbols-rounded {
  font-size:
    30px;

  font-variation-settings:
    'FILL' 0,
    'wght' 450,
    'GRAD' 0,
    'opsz' 24;
}


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

@media (max-width: 900px) {

  .banner-flecha {
    width:
      44px;

    height:
      44px;
  }


  .banner-flecha-anterior {
    left:
      12px;
  }


  .banner-flecha-siguiente {
    right:
      12px;
  }

}


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

@media (max-width: 560px) {

  .banner-flecha {
    width:
      38px;

    height:
      38px;

    background:
      rgba(
        255,
        255,
        255,
        0.86
      );
  }


  .banner-flecha-anterior {
    left:
      8px;
  }


  .banner-flecha-siguiente {
    right:
      8px;
  }


  .banner-flecha
  .material-symbols-rounded {
    font-size:
      25px;
  }

}

/* =============================================================================
   SAYPRES - BOTÓN DEL BUSCADOR GLOBAL
   ============================================================================= */

.header-buscador-submit {
  width:
    26px;

  height:
    32px;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border:
    0;

  outline:
    0;

  color:
    #28676E;

  background:
    transparent;

  cursor:
    pointer;
}


.header-buscador-submit
.material-symbols-rounded {
  color:
    #28676E;

  font-size:
    24px;
}


.header-buscador-submit:hover
.material-symbols-rounded {
  transform:
    scale(1.06);
}


.header-buscador-submit:focus-visible {
  outline:
    2px solid
    rgba(
      40,
      103,
      110,
      0.35
    );

  outline-offset:
    2px;

  border-radius:
    50%;
}


/* =============================================================================
   MENÚ MÓVIL GLOBAL SAYPRES
   ============================================================================= */

.saypres-menu-movil {
  display: none;
}


@media (max-width: 900px) {

  .saypres-menu-movil,
  .producto-menu-movil:not([hidden]) {
    width: 100%;

    padding:
      8px 18px
      18px;

    display: flex !important;

    flex-direction: column;

    border-top:
      1px solid #E2E8E8;

    background:
      #FFFFFF;
  }


  .saypres-menu-movil[hidden],
  .producto-menu-movil[hidden] {
    display: none !important;
  }


  .saypres-menu-movil a,
  .producto-menu-movil a {
    padding:
      12px 8px;

    border-bottom:
      1px solid #EEF2F2;

    color:
      #445255;

    font-size:
      14px;

    font-weight:
      500;

    text-decoration:
      none;
  }


  .saypres-menu-movil a:last-child,
  .producto-menu-movil a:last-child {
    border-bottom:
      0;
  }


  .saypres-menu-movil a:hover,
  .producto-menu-movil a:hover {
    color:
      #28676E;

    background:
      rgba(40, 103, 110, 0.05);
  }

}
/* =============================================================================
   SAYPRES - PORTADA PROGRAMADA / OPTIMIZACIÓN V1
   No descarga imágenes de banner y se presenta antes de recibir la API.
   ============================================================================= */

.saypres-portada-rapida {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 340px;
  background: linear-gradient(120deg, #28676E 0%, #20565C 100%);
}

.saypres-portada-rapida::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 88% 24%, rgba(255,255,255,.16), transparent 33%),
              radial-gradient(circle at 69% 91%, rgba(255,255,255,.08), transparent 42%);
  pointer-events: none;
}

.saypres-portada-rapida .saypres-portada-contenido {
  position: relative;
  z-index: 1;
}

.saypres-portada-rapida h1 {
  color: #FFFFFF;
}

.saypres-portada-rapida .hero-etiqueta {
  color: #FFFFFF;
}

.saypres-estado-carga {
  grid-column: 1 / -1;
  margin: 8px 0;
  color: #69787A;
  font-size: 14px;
}

@media (max-width: 560px) {
  .saypres-portada-rapida {
    min-height: 280px;
  }
}