/**
 * PCM Electronics — lenguaje gráfico v1
 * Requiere color.css. Los componentes conservan el pulso como gesto de marca.
 */

:root {
  --pcm-space-1: 0.25rem;
  --pcm-space-2: 0.5rem;
  --pcm-space-3: 0.75rem;
  --pcm-space-4: 1rem;
  --pcm-space-5: 1.5rem;
  --pcm-space-6: 2rem;
  --pcm-space-7: 3rem;
  --pcm-space-8: 4rem;

  --pcm-radius-control: 0.5rem;
  --pcm-radius-card: 1rem;
  --pcm-radius-feature: 1.5rem;
  --pcm-radius-pill: 999px;
  --pcm-stroke-icon: 1.75;
  --pcm-content-max: 80rem;
  --pcm-reading-max: 68ch;
}

.pcm-icon {
  display: inline-block;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--pcm-stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pcm-pulse-mark {
  display: inline-block;
  inline-size: var(--pcm-pulse-width, 7.5rem);
  aspect-ratio: 450 / 360;
  color: var(--pcm-color-royal);
  background: currentColor;
  -webkit-mask: url("../../graphics/pcm-pulse-mask.svg") center / contain no-repeat;
  mask: url("../../graphics/pcm-pulse-mask.svg") center / contain no-repeat;
}

.pcm-pulse-mark--gradient {
  background: linear-gradient(
    90deg,
    var(--pcm-logo-blue-start),
    var(--pcm-logo-blue-mid) 22%,
    var(--pcm-logo-lavender-blue) 43%,
    var(--pcm-logo-lavender-warm) 64%,
    var(--pcm-logo-orange-light) 82%,
    var(--pcm-logo-orange-end)
  );
}

.pcm-pulse-divider {
  display: block;
  inline-size: min(100%, 18rem);
  block-size: 0.75rem;
  color: var(--pcm-color-royal);
  background: currentColor;
  -webkit-mask: url("../../graphics/pcm-pulse-mask.svg") center / 4.25rem 3.4rem repeat-x;
  mask: url("../../graphics/pcm-pulse-mask.svg") center / 4.25rem 3.4rem repeat-x;
}

.pcm-pulse-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.pcm-pulse-field::after {
  position: absolute;
  z-index: -1;
  inset: auto -5% -28% auto;
  inline-size: min(54%, 28rem);
  aspect-ratio: 450 / 360;
  content: "";
  opacity: var(--pcm-pulse-field-opacity, 0.14);
  background: var(--pcm-gradient-energy);
  -webkit-mask: url("../../graphics/pcm-pulse-mask.svg") center / contain no-repeat;
  mask: url("../../graphics/pcm-pulse-mask.svg") center / contain no-repeat;
  pointer-events: none;
}

.pcm-price-lockup {
  display: grid;
  grid-template-columns: 0.35rem minmax(0, 1fr);
  gap: var(--pcm-space-3);
  align-items: stretch;
}

.pcm-price-lockup::before {
  border-radius: var(--pcm-radius-pill);
  background: var(--pcm-color-active-orange);
  content: "";
}

.pcm-spec-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.pcm-spec-list > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
  gap: var(--pcm-space-4);
  padding-block: var(--pcm-space-3);
  border-block-end: 1px solid var(--pcm-border-subtle);
}

.pcm-spec-list dt,
.pcm-spec-list dd {
  margin: 0;
}

@media (max-width: 32rem) {
  .pcm-spec-list > div {
    grid-template-columns: 1fr;
    gap: var(--pcm-space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcm-pulse-field::after {
    transform: none;
  }
}