/* ==========================================================================
   Section 10 — Final CTA
   Full-bleed gradient band. A navy wedge with the measured curve sits above
   it so the band appears to be cut out of the footer's dark mass.
   ========================================================================== */

.cta {
  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--sp-9), 7vw, var(--sp-11));
  background: var(--grad-cta);
  color: var(--c-on-dark);
}

/* Navy shoulder carrying the top wave. */
.cta__shoulder {
  position: absolute;
  inset: auto 0 100% 0;
  height: clamp(48px, 6vw, 104px);
  pointer-events: none;
}

.cta__shoulder svg {
  width: 100%;
  height: 100%;
}

.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--sp-7), 5vw, var(--sp-10));
}

/* The PDF's longest line here, "Compártenos tu necesidad y", measures 749.7px
   at 55px type = 13.63em. `20ch` resolved to less than that (ch is the width of
   "0", far narrower than this sentence's average character) and broke the line.
   The column itself was never the constraint — it is 869px at 1920. */
.cta__title {
  max-width: 14em;
  /* `text-wrap: balance` from the global h2 rule evens the line lengths out and
     pushes the trailing "y" down even though 51px are free on that line. Greedy
     wrapping reproduces the PDF's break: "Compártenos tu necesidad y" first.
     Note `wrap`, not `normal` — `normal` is not a valid text-wrap value and the
     declaration is dropped silently, leaving balance in place. */
  text-wrap: wrap;
  color: var(--c-on-dark);
}

.cta__text {
  max-width: 46ch;
  margin-top: var(--sp-5);
  color: var(--c-on-dark-muted);
}

/* Both buttons share one width. Measured in the PDF: the filled pill runs
   x1189..1564 and the WhatsApp outline sits on exactly the same span, with the
   arrow circle outside it to the right (376px on a 1920 canvas = 19.6vw).
   `width: max-content` lets the column size itself to whichever label is
   widest and stretch the other to match, so the two can never disagree — a
   fixed width kept breaking as the fluid font outgrew it at some viewports. */
.cta__actions {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-4);
  width: max-content;
  min-width: clamp(300px, 19.6vw, 376px);
}

.cta__actions .btn {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

/* The arrow hangs outside the column so it never counts towards the width the
   two buttons agree on. */
.cta__primary {
  position: relative;
}

.cta__primary .btn-arrow {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--sp-3));
  transform: translateY(-50%);
}

.cta__primary .btn-arrow:hover {
  transform: translateY(-50%) translateX(4px);
}

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

@media (max-width: 899px) {
  .cta__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta__title {
    max-width: 17em;
  }
}

@media (max-width: 767px) {
  /* On a phone the desktop arrangement reads heavy: a 260px-minimum pill, a
     detached 56px arrow beside it and a narrower second button — three
     different widths stacked. The arrow only repeats the button's own action,
     so it goes, and both buttons share one modest width. */
  .cta__primary .btn-arrow {
    display: none;
  }

  .cta__actions {
    width: 100%;
    min-width: 0;
    max-width: 300px;
  }

  .cta__actions .btn {
    padding-inline: var(--sp-5);
  }
}