.html-producto {
  --relay-ink: #121417;
  --relay-muted: #66717c;
  --relay-line: #dce2e7;
  --relay-accent: #c8ff3d;
  --relay-dark: #121417;
  --relay-white: #f5f7f3;
}
.html-producto .e-relay {
  color: var(--relay-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.55;
}
.html-producto .e-relay h2 {
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  margin: .45em 0;
}
.html-producto .e-relay h3 {
  margin: .4em 0;
  font-size: 1.1rem;
}
.html-producto .e-relay p {
  color: var(--relay-muted);
  max-width: 68ch;
}
.html-producto .e-relay-hero,
.html-producto .e-relay-section,
.html-producto .e-relay-dark,
.html-producto .e-relay-final {
  padding: clamp(2rem, 6vw, 6rem);
}
.html-producto .e-relay-hero {
  background: var(--relay-dark);
  color: var(--relay-white);
  border-radius: 1.2rem;
}
.html-producto .e-relay-hero h2,
.html-producto .e-relay-dark h2,
.html-producto .e-relay-final h2 {
  color: var(--relay-white);
}
.html-producto .e-relay-kicker,
.html-producto .e-relay-number {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.html-producto .e-relay-kicker {
  color: var(--relay-accent);
}
.html-producto .e-relay-lead {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: #cbd2d5 !important;
  max-width: 52ch;
}
.html-producto .e-relay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 2rem;
}
.html-producto .e-relay-tags span {
  border: 1px solid #45505a;
  border-radius: 99px;
  padding: .45rem .75rem;
  font-size: .8rem;
}
.html-producto .e-relay-section {
  border-bottom: 1px solid var(--relay-line);
}
.html-producto .e-relay-number {
  color: var(--relay-muted);
}
.html-producto .e-relay-highlight,
.html-producto .e-relay-quote {
  padding: clamp(2rem, 6vw, 5rem);
  background: var(--relay-accent);
  font-size: clamp(1.7rem, 4vw, 3.5rem);
  line-height: 1.08;
}
.html-producto .e-relay-highlight p,
.html-producto .e-relay-quote h2 {
  color: var(--relay-dark);
  max-width: 20ch;
}
.html-producto .e-relay-flow,
.html-producto .e-relay-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--relay-line);
  margin-top: 2rem;
}
.html-producto .e-relay-flow article,
.html-producto .e-relay-grid article {
  background: #fff;
  padding: 1.25rem;
  min-height: 9rem;
}
.html-producto .e-relay-flow b {
  color: var(--relay-muted);
  font-size: .75rem;
}
.html-producto .e-relay-core {
  background: #eaffb7 !important;
}
.html-producto .e-relay-dark {
  background: var(--relay-dark);
  color: var(--relay-white);
}
.html-producto .e-relay-dark .e-relay-number {
  color: var(--relay-accent);
}
.html-producto .e-relay-dark p {
  color: #bdc5c8;
}
.html-producto .e-relay-grid {
  grid-template-columns: repeat(3, 1fr);
  background: #374047;
}
.html-producto .e-relay-grid article {
  background: #1d2327;
}
.html-producto .e-relay-grid h3 {
  color: var(--relay-white);
}
.html-producto .e-relay-final {
  background: linear-gradient(135deg, #c8ff3d, #eaffb7);
  border-radius: 1.2rem;
  margin-top: 1rem;
}
.html-producto .e-relay-final span {
  font-weight: 800;
  letter-spacing: .15em;
  font-size: .75rem;
}
.html-producto .e-relay-final h2 {
  color: var(--relay-dark);
  max-width: 12ch;
}
.html-producto .e-relay-final p {
  color: var(--relay-dark);
}
@media (max-width:760px) {
.html-producto .e-relay-flow,
.html-producto .e-relay-grid {
  grid-template-columns: 1fr;
}
.html-producto .e-relay-hero,
.html-producto .e-relay-section,
.html-producto .e-relay-dark,
.html-producto .e-relay-final {
  padding: 2rem 1.25rem;
}
}