/* ============================================================
   17-cta.css · Restyle del CTA final (#contacto) a cierre morado
   ejecutivo centrado. INVIERTE la sección de clara a oscura y mete
   un panel inset azul-profundo con la píldora de WhatsApp.
   Override puro (cero markup): los 3 <a> y sus href quedan intactos.
   Base en 07-footer.css / 01-base.css / 10-media.css — NO se tocan.
   Overrides de botón SCOPED a .cta-final (no afecta el resto del sitio).
   ============================================================ */

/* ── Sección: invertir a morado ejecutivo sólido ── */
.cta-final {
  background: var(--vp-azul-ejecutivo);
  border-top: none;
  position: relative;
  overflow: hidden;
}
.cta-final > .container { position: relative; z-index: 1; }

/* accent-motif (lavanda, ya en el markup) atenuado sobre el ejecutivo */
.cta-final .accent-motif { opacity: 0.06; }

/* ── Headline + acento: blanco, centrado ── */
.cta-final__headline {
  color: var(--vp-blanco);
  text-align: center;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-final__accent { color: var(--vp-blanco); }  /* override del azul-profundo; conserva el italic base */

/* ── Grid 2-col → una columna centrada ── */
.cta-final__grid {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin: 0 auto;
  gap: var(--space-lg);
  justify-items: center;
}

/* Lead claro centrado, sobre el panel */
.cta-final__copy { text-align: center; }
.cta-final__copy p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── Panel de cierre inset (azul-profundo, más oscuro) ── */
.cta-final__contact {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  align-items: stretch;
  text-align: center;
  background: var(--vp-azul-profundo);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

/* Botones full-width dentro del panel; permiten wrap (sin overflow a 360px) */
.cta-final__contact .btn { width: 100%; white-space: normal; }

/* WhatsApp (primary) → píldora blanca protagonista, texto morado */
.cta-final .btn--primary {
  background: var(--vp-blanco);
  color: var(--vp-azul-profundo);
}
.cta-final .btn--primary:hover {
  background: var(--vp-lavanda);
  color: var(--vp-azul-profundo);
}

/* Ghost (Enviar mensaje + mailto) → claro sobre el inset */
.cta-final .btn--ghost {
  background: transparent;
  color: var(--vp-blanco);
  border-color: rgba(255, 255, 255, 0.4);
}
.cta-final .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--vp-blanco);
  color: var(--vp-blanco);
}

/* Promesa de respuesta personal (sin plazo) */
.cta-final__response {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

/* Localización clara */
.cta-final__loc { color: rgba(255, 255, 255, 0.7); }

/* ── MÓVIL ── */
@media (max-width: 768px) {
  .cta-final__contact { padding: var(--space-md); }
}