/* ==========================================================================
   CTA FINAL (#contacto) — the one large accent-colour block of the page.
   Big question on the left, text + button on the right (opens the modal).
   ========================================================================== */

.cta {
  padding-block: var(--space-10);
}

.cta__label {
  grid-column: 1 / -1;
  margin-bottom: var(--space-6);
}

.cta__title {
  grid-column: 1 / span 9;
}

.cta__side {
  grid-column: 10 / span 3;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-bottom: var(--space-2);
}

.cta__text {
  color: var(--muted);
}

/* Secondary action: diagnosis ("Analizar mi proceso") */
.cta__alt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.45;
}

.cta__alt strong {
  color: var(--color1);
  font-weight: var(--fw-medium);
}

@media (max-width: 1023px) {
  .cta__title {
    grid-column: 1 / span 11;
  }

  .cta__side {
    grid-column: 1 / span 8;
    margin-top: var(--space-7);
  }
}

@media (max-width: 767px) {
  .cta {
    padding-block: var(--space-9);
  }

  .cta__label {
    margin-bottom: var(--space-5);
  }

  .cta__title,
  .cta__side {
    grid-column: 1 / -1;
  }

  .cta__side {
    margin-top: var(--space-6);
    gap: var(--space-5);
  }

  .cta__side .btn {
    width: 100%;
  }
}