/* Soft glass surfaces: enough transparency to catch the light, enough opacity to read. */
.feature-grid,
.area-grid,
.steps-list,
.brand-story {
  isolation: isolate;
}
.feature-grid,
.area-grid {
  position: relative;
}
.feature-grid::before,
.area-grid::before {
  content: "";
  position: absolute;
  inset: -40px -20px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 20%, #e4ddec70, transparent 32%),
    radial-gradient(ellipse at 79% 73%, #dce7ec80, transparent 34%),
    radial-gradient(ellipse at 53% 45%, #f4e7df68, transparent 38%);
  filter: blur(22px);
}
.feature {
  background: linear-gradient(145deg, #ffffffa8, #ffffff77 62%, #f8f7f8a8);
  border-color: #ffffffc9;
  box-shadow:
    inset 1px 1px 2px #ffffffed,
    inset -1px -1px 3px #c7bdc537,
    0 14px 38px #54475812;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.feature:after {
  inset: 5px;
  border-color: #ffffffa3;
  background: linear-gradient(130deg, #ffffff34, transparent 34%, transparent 74%, #ffffff2c);
}
.brand-story {
  background: linear-gradient(120deg, #ffffffa8, #ffffff78 58%, #ffffff99), url('images/pearl-waves.webp') center bottom / cover;
  border: 1px solid #ffffffc9;
  backdrop-filter: blur(15px) saturate(115%);
  -webkit-backdrop-filter: blur(15px) saturate(115%);
}
.steps-list {
  background: #ffffff91;
  border-color: #ffffffc9;
  box-shadow: inset 1px 1px 3px #fff, 0 12px 35px #5145570b;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.area {
  background: linear-gradient(145deg, #ffffffb0, #ffffff7c 58%, #faf9fba8);
  border-color: #ffffffce;
  box-shadow: inset 1px 1px 3px #fff, 0 9px 25px #534d5b0b;
  backdrop-filter: blur(15px) saturate(115%);
  -webkit-backdrop-filter: blur(15px) saturate(115%);
}
.page-index .hero-description {
  border-radius: 12px;
  background: #fff9;
  padding: 8px 10px;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.page-como-funciona .hero-description,
.page-diagnostico-gratis .hero-description {
  background: #ffffff8f;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.manifesto,
.results {
  background: linear-gradient(120deg, #ffffffa8, #ffffff85), url('images/pearl-waves.webp') center / cover;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.honest {
  background: linear-gradient(140deg, #ffffffb3, #f4f1f4a3, #ffffffb8);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .feature, .brand-story, .steps-list, .area,
  .page-index .hero-description,
  .page-como-funciona .hero-description,
  .page-diagnostico-gratis .hero-description,
  .manifesto, .results, .honest {
    background-color: #f8f7f8;
  }
}