/* Cristal sobre el negro Vesper: luz en el borde, contenido siempre nítido. */
:root {
  --glass-ground: color-mix(in srgb, var(--void) 48%, transparent);
  --glass-edge: color-mix(in srgb, var(--chalk) 34%, transparent);
  --glass-highlight: color-mix(in srgb, var(--chalk) 20%, transparent);
  --glass-shadow: 0 22px 60px color-mix(in srgb, var(--void) 40%, transparent);
}
.product-grid { position: relative; isolation: isolate; }
.product-grid::before {
  content: "";
  position: absolute;
  inset: 10% -2%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 18% 20%, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 45%), radial-gradient(ellipse at 85% 65%, color-mix(in srgb, var(--lavender) 16%, transparent), transparent 45%);
  filter: blur(35px);
}
.product-card,
.erp-showcase__card,
.liquid-panel {
  background:
    linear-gradient(145deg, var(--glass-highlight), transparent 32%, color-mix(in srgb, var(--lavender) 7%, transparent) 80%, color-mix(in srgb, var(--cyan) 9%, transparent)),
    var(--glass-ground);
  border: 1px solid var(--glass-edge);
  border-top-color: color-mix(in srgb, var(--chalk) 43%, transparent);
  border-bottom-color: color-mix(in srgb, var(--lavender) 18%, transparent);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--chalk) 15%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--cyan) 8%, transparent), var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(122deg, transparent 34%, color-mix(in srgb, var(--chalk) 5%, transparent) 35%, transparent 56%);
}
.product-card:hover {
  border-color: color-mix(in srgb, var(--cyan) 43%, var(--glass-edge));
  box-shadow: inset 0 1px 1px var(--glass-highlight), 0 24px 60px color-mix(in srgb, var(--void) 52%, transparent), 0 0 38px color-mix(in srgb, var(--cyan) 6%, transparent);
}
.product-copy,
.product-base { z-index: 2; }
.product-description { color: color-mix(in srgb, var(--chalk) 78%, var(--muted)); }
.more-button {
  background: color-mix(in srgb, var(--chalk) 9%, transparent);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.erp-showcase__card {
  padding: 12px 12px 0;
  border-radius: 27px;
}
.erp-showcase__card > picture > img,
.erp-showcase__card > picture,
.erp-showcase__card > img {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--chalk) 12%, transparent);
}
.erp-showcase__caption { padding: 20px 12px; }
.erp-showcase__tabs {
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-highlight), transparent), var(--glass-ground);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.erp-showcase__tabs [data-erp-tab][aria-selected="true"] {
  background: color-mix(in srgb, var(--mint) 80%, var(--chalk));
  box-shadow: inset 0 1px 0 var(--chalk), 0 2px 12px color-mix(in srgb, var(--mint) 14%, transparent);
}
.scene-service {
  background: linear-gradient(135deg, var(--glass-highlight), transparent 60%), color-mix(in srgb, var(--void) 55%, transparent);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--chalk) 20%, transparent), var(--glass-shadow);
}
.liquid-panel {
  border-radius: 28px;
  background: radial-gradient(ellipse at 5% 0, color-mix(in srgb, var(--chalk) 18%, transparent), transparent 50%), linear-gradient(150deg, var(--glass-highlight), transparent 35%, color-mix(in srgb, var(--lavender) 12%, transparent)), color-mix(in srgb, var(--void) 40%, transparent);
  box-shadow: inset 1px 1px 1px color-mix(in srgb, var(--chalk) 48%, transparent), inset -1px -1px 1px color-mix(in srgb, var(--cyan) 22%, transparent), inset 0 0 16px color-mix(in srgb, var(--chalk) 4%, transparent), var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}
@media (max-width: 760px) {
  .product-card,
  .erp-showcase__card,
  .liquid-panel {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .erp-showcase__card { padding: 7px 7px 0; border-radius: 18px; }
  .erp-showcase__caption { padding: 16px 6px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .product-card,
  .erp-showcase__card,
  .liquid-panel { background-color: color-mix(in srgb, var(--void) 94%, var(--lavender)); }
}
@media (prefers-reduced-transparency: reduce) {
  .product-card,
  .erp-showcase__card,
  .liquid-panel,
  .scene-service,
  .erp-showcase__tabs {
    background: linear-gradient(140deg, color-mix(in srgb, var(--chalk) 13%, var(--void)), color-mix(in srgb, var(--cyan) 4%, var(--void)) 35%, color-mix(in srgb, var(--lavender) 9%, var(--void)));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .liquid-panel {
    background: radial-gradient(ellipse at 5% 0, color-mix(in srgb, var(--chalk) 20%, var(--void)), transparent 55%), linear-gradient(140deg, color-mix(in srgb, var(--chalk) 11%, var(--void)), color-mix(in srgb, var(--cyan) 5%, var(--void)) 35%, color-mix(in srgb, var(--lavender) 12%, var(--void)));
  }
}