/* ==========================================================================
   PROPUESTA — "Convertimos procesos manuales en sistemas inteligentes."
   Three pillars (Automatizar · Conectar · Aplicar IA), each with a diagram
   that animates on hover (.card.glyph-host, css/components/cards.css).
   ========================================================================== */

.value__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.value__list .card {
  padding: var(--space-4) var(--space-4) var(--space-6);
}

.value__list .card__num,
.value__list .card__title,
.value__list .card__text {
  margin-inline: var(--space-2);
}

/* Mobile: the three pillars sit side by side and scroll horizontally (the
   next card peeks in), instead of stacking three tall diagram cards. */
@media (max-width: 767px) {
  .value__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--space-3);
    margin-inline: calc(var(--grid-side-margin) * -1);
    padding-inline: var(--grid-side-margin);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--grid-side-margin);
    scrollbar-width: none;
  }

  .value__list::-webkit-scrollbar {
    display: none;
  }

  .value__list > li {
    scroll-snap-align: start;
  }
}