/* ==========================================================================
   Section 07 — ¿Por qué elegirnos como su aliado estratégico?
   A full-bleed band: photograph across the whole viewport, a navy veil over it,
   and the reasons laid out in columns on top. No side photo and no hairlines
   between columns — the band itself is the frame now.
   ========================================================================== */

.why {
  position: relative;
  /* Slightly taller than a normal section: the band has to read as a break in
     the page, not as one more block of text. */
  padding-block: clamp(4.5rem, 2rem + 8vw, 8.5rem);
  overflow: hidden;
  /* Shows through before the photo decodes, and behind it if it ever 404s. */
  background-color: var(--c-navy);
  color: var(--c-on-dark);
}

.why__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The veil. Measured against this photo's brightest 1% (#FBFCFD): at 85%
   opacity the picture still reads as a picture, while white text clears 7:1 and
   the lightened sky tone clears 4.9:1 — both above the 4.5:1 AA floor. Below
   ~70% the body copy stops passing, so this is not a knob to turn down freely.
   The gradient runs the same direction as the old flat panel, dark to light. */
.why::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgb(22 39 62 / 0.94) 0%,
    rgb(22 39 62 / 0.89) 40%,
    rgb(27 64 95 / 0.85) 100%
  );
}

.why__inner {
  position: relative;
  /* Above the photo and the veil, both of which are absolutely positioned. */
  z-index: var(--z-content);
}

.why__title {
  /* rem, not ch: this wrapper's font-size is not the heading's. */
  max-width: 34rem;
  margin-bottom: clamp(var(--sp-7), 4vw, var(--sp-10));
  color: var(--c-on-dark);
}

/* --- Columns -------------------------------------------------------------- */

.why__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--sp-6), 3vw, var(--sp-9));
}

.why__item-title {
  margin-bottom: var(--sp-3);
  color: var(--c-sky-text);
  /* A step above the global h3 scale. The band went from three columns to four,
     so each one is a third narrower than it was on the old flat panel; at the
     previous size the headings stopped holding their own against a photograph
     with this much detail behind them. */
  font-size: clamp(1.25rem, 1.6vw, 1.95rem);
  /* Bold, not semibold: weight buys presence over a photograph without
     costing any contrast, which colour cannot do here. */
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

.why__item-text {
  /* 95%, not the 78% the flat navy panel used: a muted white reads as washed
     out over a photograph even when it technically passes contrast. */
  color: rgb(255 255 255 / 0.95);
  font-size: clamp(1.05rem, 1.32vw, 1.55rem);
  line-height: 1.6;
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 1199px) {
  .why__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  }

  .why__title {
    max-width: 100%;
  }
}

@media (max-width: 599px) {
  .why__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
  }

  /* A 3.3:1 photo cropped into a tall block loses its subject; pulling the
     crop up keeps the faces in frame instead of the ceiling. */
  .why__bg {
    object-position: center 35%;
  }
}