.article-hero {
  background-image:
    linear-gradient(90deg, rgba(8, 15, 24, 0.94) 0%, rgba(8, 15, 24, 0.84) 46%, rgba(8, 15, 24, 0.28) 78%, rgba(8, 15, 24, 0.12) 100%),
    url('../../img/impermeabilizantes/hero-impermeabilizacion.jpg');
  background-position: center;
  background-size: cover;
}

.article-hero__overlay {
  background:
    radial-gradient(circle at 18% 18%, rgba(140, 198, 63, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
}

.waterproofing-figure {
  margin: clamp(2rem, 5vw, 3rem) 0;
  overflow: hidden;
  border: 1px solid rgba(18, 18, 18, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(8, 15, 24, 0.12);
}

.waterproofing-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.waterproofing-figure figcaption {
  padding: 0.75rem 1rem;
  color: #5b6570;
  font-size: 0.8rem;
  line-height: 1.45;
}

@media (max-width: 767px) {
  .article-hero {
    background-image:
      linear-gradient(90deg, rgba(8, 15, 24, 0.95), rgba(8, 15, 24, 0.72)),
      url('../../img/impermeabilizantes/hero-impermeabilizacion.jpg');
    background-position: 62% center;
  }

  .waterproofing-figure {
    border-radius: 12px;
  }
}