/**
 * COMPONENTE — Advantages (sección clara: bento de garantías)
 * Intro: título de marca + párrafo destacado grande + CTA.
 * Bento en 3 columnas desde 860px:
 *   fila 1-2 → A (1 col, alto doble) | B y C (2 cols)
 *   fila 3   → D (2 cols) | E (1 col)
 * Se arma en dos filas-grid independientes para que el ensanche de A
 * (advantages-bento.js, vía --advantages-shift) no altere la fila inferior.
 */

.advantages {
  --advantages-card-unit: calc(var(--space-8) * 3 + var(--space-6));
  --advantages-gap: var(--space-2);

  background: var(--color-background);
  color: var(--color-text);
  padding-block: var(--section-space);
}

.advantages__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 48rem;
  margin-bottom: var(--space-7);
}

.advantages__title {
  font-size: var(--text-h2);
  color: var(--color-primary);
}

.advantages__lead {
  font-size: clamp(1.25rem, 1.2vw + 0.9rem, 2.25rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 36ch;
  color: var(--color-text);
}

.advantages__bento {
  display: flex;
  flex-direction: column;
  gap: var(--advantages-gap);
}

.advantages__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--advantages-gap);
}

.advantages__row .bento-card {
  height: var(--advantages-card-unit);
}

@media (min-width: 860px) {
  .advantages {
    --advantages-gap: var(--space-3);
  }

  .advantages__intro {
    gap: var(--space-5);
    margin-bottom: var(--space-8);
  }

  .advantages__row--top {
    --advantages-shift: 0px;

    grid-template-columns:
      calc((100% - 2 * var(--advantages-gap)) / 3 + var(--advantages-shift))
      minmax(0, 1fr);
    grid-template-rows: repeat(2, var(--advantages-card-unit));
  }

  .advantages__row--bottom {
    grid-template-columns: minmax(0, 1fr) calc((100% - 2 * var(--advantages-gap)) / 3);
  }

  .advantages__row--top .advantages__card--a {
    grid-row: 1 / 3;
    height: auto;
  }
}