/* Premium card family.
   .card--benefit: "Un servicio más para tus clientes" (primary weight).
   .card--solve:   "Lo que resuelve por debajo" (one step lighter).
   Both are modifiers on the shared .card, so "Dos problemas" stays untouched.
   Surface, accent line, gradient border and hover are shared; size, glow
   strength and type scale are what set the two tiers apart. */

.card-grid--benefit {
  gap: 24px;
}

/* Each card spans 4 rows of the parent grid and adopts them through subgrid:
   icon / outcome / title / text line up across the three cards even when one
   outcome wraps to two lines and the others don't. */
@supports (grid-template-rows: subgrid) {
  .card-grid--benefit > li {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .card--benefit {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}

.card--benefit,
.card--solve {
  /* Per-card tint, kept inside the violet brand range */
  --tint: 109, 74, 255;           /* #6d4aff */
  position: relative;
  isolation: isolate;
  row-gap: 14px;
  padding: clamp(28px, 1.4rem + 0.8vw, 34px);
  border-radius: 20px;
  border-color: rgba(201, 204, 235, 0.12);
  /* More opaque than the shared .card (0.62): the photo behind is busy and
     muddied the grey text. Glow sits in the icon corner, away from the copy. */
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(var(--tint), 0.30) 0%, rgba(var(--tint), 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 40%),
    rgba(10, 12, 44, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 30px 60px -36px rgba(3, 4, 20, 0.9);
  transition:
    transform 0.25s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.card-grid--benefit > li:nth-child(2) .card--benefit { --tint: 120, 87, 255; }  /* #7857ff */
.card-grid--benefit > li:nth-child(3) .card--benefit { --tint: 139, 124, 255; } /* #8b7cff */

/* Top accent: a hairline that is brightest over the icon and fades out */
.card--benefit::before,
.card--solve::before {
  content: "";
  position: absolute;
  inset: 0 24px auto 24px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--tint), 0) 0%,
    rgba(201, 192, 255, 0.85) 25%,
    rgba(var(--tint), 0) 85%);
  pointer-events: none;
}

/* Gradient border drawn with a mask so it can fade in on hover
   (border-color alone can't hold a gradient) */
.card--benefit::after,
.card--solve::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg,
    rgba(201, 192, 255, 0.9) 0%,
    rgba(var(--tint), 0.55) 35%,
    rgba(var(--tint), 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card--benefit .card__icon,
.card--solve .card__icon {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #7857ff 0%, #6d4aff 55%, #5636e8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 6px rgba(20, 8, 90, 0.35),
    0 12px 28px -10px rgba(var(--tint), 0.75);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* The outcome is the card's "number": short, big, the one thing to remember */
.card--benefit .card__outcome {
  align-self: end;
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  /* White to pale violet: reads as one accent without competing with the icon */
  background: linear-gradient(180deg, #ffffff 30%, #dcd5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}

.card--benefit h3 {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 204, 235, 0.14);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--link-hover);
}

.card--benefit p:not(.card__outcome) {
  margin: 0;
  line-height: 1.6;
  color: var(--text-2);
}

/* Cancel the shared .card hover lift (touch taps would trigger it) */
.card--benefit:hover,
.card--solve:hover {
  transform: none;
}

/* Hover only where hover exists; motion only when allowed */
@media (hover: hover) and (pointer: fine) {
  .card--benefit:hover,
  .card--solve:hover {
    border-color: transparent;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 32px 64px -30px rgba(var(--tint), 0.7);
  }

  .card--benefit:hover::after,
  .card--solve:hover::after {
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .card--benefit:hover,
    .card--solve:hover {
      transform: translateY(-3px);
    }

    .card--benefit:hover .card__icon,
    .card--solve:hover .card__icon {
      transform: translateY(-2px) rotate(-6deg);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--benefit,
  .card--benefit .card__icon,
  .card--benefit::after,
  .card--solve,
  .card--solve .card__icon,
  .card--solve::after {
    transition: none;
  }

  .card--benefit:hover,
  .card--solve:hover {
    transform: none;
  }
}

@media (max-width: 900px) {
  .card-grid--benefit {
    gap: 16px;
  }

  /* Single column: no cross-card alignment needed, drop the subgrid */
  .card-grid--benefit > li,
  .card--benefit {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .card--benefit {
    gap: 12px;
  }

  /* align-self: end only makes sense inside the subgrid; in a flex column it
     would push the outcome to the right edge */
  .card--benefit .card__outcome {
    align-self: stretch;
  }

  .card--benefit .card__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
  }
}

/* ---------------------------------------------------------------------------
   "Lo que resuelve por debajo": 5 technical guarantees.
   Bento instead of a centered 3 + 2: the stock reservation (the guarantee
   that prevents the most expensive mistake) gets a wide tile and the other
   four sit beside and under it. Rows size to content and cards in a row
   stretch to the tallest one, so there is no dead space at the bottom.
   Desktop (6 cols):  [ 1 1 1 1 | 2 2 ]
                      [ 3 3 | 4 4 | 5 5 ]
   Tablet (2 cols):   [ 1 1 ] [ 2 | 3 ] [ 4 | 5 ]
   Phone:             one column                                            */

.card-grid--bento > li:nth-child(1) { grid-column: span 4; }
.card-grid--bento > li:nth-child(n + 2) { grid-column: span 2; }

.card--solve {
  gap: 10px;
  padding: clamp(24px, 1.2rem + 0.6vw, 30px);
  border-radius: 18px;
  /* Lighter tier: weaker glow and a slightly more see-through surface */
  background:
    radial-gradient(90% 80% at 0% 0%, rgba(var(--tint), 0.18) 0%, rgba(var(--tint), 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 40%),
    rgba(12, 15, 50, 0.78);
}

.card-grid--bento > li:nth-child(2n) .card--solve { --tint: 120, 87, 255; }
.card-grid--bento > li:nth-child(5) .card--solve { --tint: 139, 124, 255; }

.card--solve .card__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 8px;
  border-radius: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 5px rgba(20, 8, 90, 0.3),
    0 10px 22px -10px rgba(var(--tint), 0.65);
}

.card--solve h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.card--solve p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Wide tile: icon beside the copy, so the extra width reads as emphasis
   rather than a stretched-out short paragraph */
.card--solve-wide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 22px;
  align-content: start;
}

.card--solve-wide .card__icon {
  grid-row: span 2;
  width: 52px;
  height: 52px;
  margin: 0;
}

.card--solve-wide p {
  max-width: 56ch;
}

@media (max-width: 900px) {
  .card-grid--bento > li:nth-child(n) { grid-column: auto; }
  .card-grid--bento > li:nth-child(1) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  /* Stack the wide tile like the others on a phone */
  .card--solve-wide {
    display: flex;
    flex-direction: column;
  }

  .card--solve-wide .card__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
  }
}

/* Wide tile illustration: the same-unit race told in two rows, so the tile's
   extra area shows the guarantee instead of sitting empty. Decorative only
   (aria-hidden): the paragraph above already says it in words. */
.race {
  grid-column: 2;
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.race__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(201, 204, 235, 0.10);
  border-radius: 12px;
  background: rgba(5, 7, 32, 0.55);
  font-size: 0.875rem;
}

.race__who {
  font-weight: 600;
  color: var(--text);
}

.race__item {
  color: var(--text-3);
}

.race__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  white-space: nowrap;
}

.race__state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.race__state--ok { color: var(--green-soft); }
.race__state--warn { color: #FACC15; }

@media (max-width: 640px) {
  .race {
    margin-top: 6px;
  }

  .race__row {
    gap: 8px;
    padding: 9px 12px;
    font-size: 0.8125rem;
  }

  /* Phone width: "Última unidad" would squeeze the state label; it's implied */
  .race__item {
    display: none;
  }

  .race__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}