:root {
  --brick-width: 120px;
  --brick-height: 120px;
  --offset: calc(var(--brick-width) / 2);
}

.productos-bg {
  background-color: white;
  background-size: var(--brick-width) var(--brick-height);
  background-position: 
    0 0,
    var(--offset) var(--brick-height),
    0 calc(var(--brick-height) * 2),
    var(--offset) calc(var(--brick-height) * 3),
    0 calc(var(--brick-height) * 4),
    var(--offset) calc(var(--brick-height) * 5),
    0 calc(var(--brick-height) * 6),
    var(--offset) calc(var(--brick-height) * 7),
    0 calc(var(--brick-height) * 8),
    var(--offset) calc(var(--brick-height) * 9);
  background-repeat: repeat-x, repeat-x;
  background-attachment: fixed;
}

.desengrasantes {
  background-image: 
    url('./../img/iconos/desengrasantes.png'),
    url('./../img/iconos/desengrasantes.png'),
    url('./../img/iconos/desengrasantes.png'),
    url('./../img/iconos/desengrasantes.png'),
    url('./../img/iconos/desengrasantes.png'),
    url('./../img/iconos/desengrasantes.png'),
    url('./../img/iconos/desengrasantes.png'),
    url('./../img/iconos/desengrasantes.png'),
    url('./../img/iconos/desengrasantes.png'),
    url('./../img/iconos/desengrasantes.png');
}
.desinfectantes {
  background-image: 
    url('./../img/iconos/desinfectantes.png'),
    url('./../img/iconos/desinfectantes.png'),
    url('./../img/iconos/desinfectantes.png'),
    url('./../img/iconos/desinfectantes.png'),
    url('./../img/iconos/desinfectantes.png'),
    url('./../img/iconos/desinfectantes.png'),
    url('./../img/iconos/desinfectantes.png'),
    url('./../img/iconos/desinfectantes.png'),
    url('./../img/iconos/desinfectantes.png'),
    url('./../img/iconos/desinfectantes.png');
}
.superficies {
  background-image: 
    url('./../img/iconos/superficies.png'),
    url('./../img/iconos/superficies.png'),
    url('./../img/iconos/superficies.png'),
    url('./../img/iconos/superficies.png'),
    url('./../img/iconos/superficies.png'),
    url('./../img/iconos/superficies.png'),
    url('./../img/iconos/superficies.png'),
    url('./../img/iconos/superficies.png'),
    url('./../img/iconos/superficies.png'),
    url('./../img/iconos/superficies.png');
}
.lavado-de-ropa {
  background-image: 
    url('./../img/iconos/lavado-de-ropa.png'),
    url('./../img/iconos/lavado-de-ropa.png'),
    url('./../img/iconos/lavado-de-ropa.png'),
    url('./../img/iconos/lavado-de-ropa.png'),
    url('./../img/iconos/lavado-de-ropa.png'),
    url('./../img/iconos/lavado-de-ropa.png'),
    url('./../img/iconos/lavado-de-ropa.png'),
    url('./../img/iconos/lavado-de-ropa.png'),
    url('./../img/iconos/lavado-de-ropa.png'),
    url('./../img/iconos/lavado-de-ropa.png');
}
.higiene-de-manos {
  background-image: 
    url('./../img/iconos/higiene-de-manos.png'),
    url('./../img/iconos/higiene-de-manos.png'),
    url('./../img/iconos/higiene-de-manos.png'),
    url('./../img/iconos/higiene-de-manos.png'),
    url('./../img/iconos/higiene-de-manos.png'),
    url('./../img/iconos/higiene-de-manos.png'),
    url('./../img/iconos/higiene-de-manos.png'),
    url('./../img/iconos/higiene-de-manos.png'),
    url('./../img/iconos/higiene-de-manos.png'),
    url('./../img/iconos/higiene-de-manos.png');
}
.limpieza-institucional {
  background-image: 
    url('./../img/iconos/limpieza-institucional.png'),
    url('./../img/iconos/limpieza-institucional.png'),
    url('./../img/iconos/limpieza-institucional.png'),
    url('./../img/iconos/limpieza-institucional.png'),
    url('./../img/iconos/limpieza-institucional.png'),
    url('./../img/iconos/limpieza-institucional.png'),
    url('./../img/iconos/limpieza-institucional.png'),
    url('./../img/iconos/limpieza-institucional.png'),
    url('./../img/iconos/limpieza-institucional.png'),
    url('./../img/iconos/limpieza-institucional.png');
}
.lavado-textil {
  background-image: 
    url('./../img/iconos/lavado-textil.png'),
    url('./../img/iconos/lavado-textil.png'),
    url('./../img/iconos/lavado-textil.png'),
    url('./../img/iconos/lavado-textil.png'),
    url('./../img/iconos/lavado-textil.png'),
    url('./../img/iconos/lavado-textil.png'),
    url('./../img/iconos/lavado-textil.png'),
    url('./../img/iconos/lavado-textil.png'),
    url('./../img/iconos/lavado-textil.png'),
    url('./../img/iconos/lavado-textil.png');
}
.lavado-de-vehiculo {
  background-image: 
    url('./../img/iconos/lavado-de-vehiculo.png'),
    url('./../img/iconos/lavado-de-vehiculo.png'),
    url('./../img/iconos/lavado-de-vehiculo.png'),
    url('./../img/iconos/lavado-de-vehiculo.png'),
    url('./../img/iconos/lavado-de-vehiculo.png'),
    url('./../img/iconos/lavado-de-vehiculo.png'),
    url('./../img/iconos/lavado-de-vehiculo.png'),
    url('./../img/iconos/lavado-de-vehiculo.png'),
    url('./../img/iconos/lavado-de-vehiculo.png'),
    url('./../img/iconos/lavado-de-vehiculo.png');
}
.mantenimiento-industrial {
  background-image: 
    url('./../img/iconos/mantenimiento-industrial.png'),
    url('./../img/iconos/mantenimiento-industrial.png'),
    url('./../img/iconos/mantenimiento-industrial.png'),
    url('./../img/iconos/mantenimiento-industrial.png'),
    url('./../img/iconos/mantenimiento-industrial.png'),
    url('./../img/iconos/mantenimiento-industrial.png'),
    url('./../img/iconos/mantenimiento-industrial.png'),
    url('./../img/iconos/mantenimiento-industrial.png'),
    url('./../img/iconos/mantenimiento-industrial.png'),
    url('./../img/iconos/mantenimiento-industrial.png');
}
.card-cont {
  flex-wrap: wrap;
  justify-content: center;
}

.card-cont a {
  flex: 0 0 240px;
  font-weight: 800;
  text-align: center;
  /* height: 240px; */
  border-radius: 48px 0 48px 0;
  border: solid 2px #28282833;
  background: white;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 100ms ease-out, border 100ms ease-in;
  font-size: clamp(1.0rem, 0.91vw, 1.2rem) !important;
}

.card-cont a:hover {
  box-shadow: inset 0 0 10px 2px var(--clr-skyblue);
  border: solid 2px var(--clr-skyblue);
}

.cards-cont > div:empty {
  height: 0;
  padding: 0;
  margin: 0;
}

.card .button {
  align-self: center;
}

.card-cont .img {
  width: 100%;
  max-height: 140px;
  border-radius: 48px 0 48px 0;
  border: 4px solid #ffffff33;
  overflow: hidden;
}

.card-cont .img img {
  max-height: 100%;
  width: auto;
  min-width: unset;
  max-width: unset;
}

.producto {
  padding: 6px;
  border-radius: 42px 0;
  background: 
    radial-gradient(circle at top, #4eb2b5, #00000000 55%),
    radial-gradient(circle at left, #afd044, #00000000 15%),
    radial-gradient(circle at right, #77698d, #00000000 15%),
    radial-gradient(circle at bottom, #ea7f08, #00000000 55%),
    linear-gradient(45deg, #f7da01, #f7da0100, #3cacd500, #3cacd5),
    linear-gradient(135deg, #62b995, #dd230f)
    ;
  overflow: hidden;
}

.producto > div {
  padding: 2rem;
  border-radius: 36px 0;
  background-color: white;
}

.fragancia {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.fragancia > li {
  width: 4rem;
  height: 5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.aromas-del-bosque { background-image: url('./../img/fragancias/aromas-del-bosque.svg'); }
.arpeage { background-image: url('./../img/fragancias/arpeage.svg'); }
.bambu { background-image: url('./../img/fragancias/bambu.svg'); }
.brisa-marina { background-image: url('./../img/fragancias/brisa-marina.svg'); }
.campos-de-algodon { background-image: url('./../img/fragancias/campos-de-algodon.svg'); }
.cherry { background-image: url('./../img/fragancias/cherry.svg'); }
.frescura-de-primavera { background-image: url('./../img/fragancias/frescura-de-primavera.svg'); }
.frutos-rojos { background-image: url('./../img/fragancias/frutos-rojos.svg'); }
.lavanda { background-image: url('./../img/fragancias/lavanda.svg'); }
.limon { background-image: url('./../img/fragancias/limon.svg'); }
.manzana { background-image: url('./../img/fragancias/manzana.svg'); }
.marina { background-image: url('./../img/fragancias/marina.svg'); }
.new { background-image: url('./../img/fragancias/new.svg'); }
.ticket { background-image: url('./../img/fragancias/ticket.svg'); }
.vivre { background-image: url('./../img/fragancias/vivre.svg'); }



.presentaciones > li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.presentaciones > li > span {
  display: inline-block;
  width: 4rem;
  height: 5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.presentaciones li::before {
  content: '';
  position: relative;
  height: 4rem;
  width: 3rem;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.botella-250ml::before { background-image: url('./../img/productos/presentaciones/botella-250ml.png'); }
.botella-750ml::before { background-image: url('./../img/productos/presentaciones/botella-250ml.png'); }
.botella-900ml::before { background-image: url('./../img/productos/presentaciones/botella-250ml.png'); }
.un-lt::before { background-image: url('./../img/productos/presentaciones/botella-250ml.png'); }
.cinco-lts::before { background-image: url('./../img/productos/presentaciones/bidon-5l.png'); }
.cuatro-unidades::before { background-image: url('./../img/productos/presentaciones/bidones-x4.png'); }
.a-granel::before { background-image: url('./../img/productos/presentaciones/a-granel.png'); }
.bidones-x4::before { background-image: url('./../img/productos/presentaciones/bidones-x4.png'); }
.cuba-1000lts::before { background-image: url('./../img/productos/presentaciones/cuba-1000l.png'); }
.tambor-plastico::before { background-image: url('./../img/productos/presentaciones/tambor-plastico-200l.png'); }

.card img {
  border-radius: 18px;
}


.mobile {
  display: none !important;
}

@media (max-width: 800px) {
  .desk {
    display: none !important;
  }
  .mobile {
    display: block !important;
    margin-bottom: 2rem;
  }
}