/* === ALC Abogados · componente "cp-cta" ===
   Reglas portadas verbatim de design/css/sections.css (líneas 540-545). NO reescribir. */

.cp-cta { background: var(--ink); color: var(--paper); padding: 96px 56px; text-align: center; }
.cp-cta-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.cp-cta-h { font-size: clamp(32px, 4vw, 52px); font-weight: 700; color: var(--paper); letter-spacing: -0.022em; }
.cp-cta-p { font-size: 17px; color: rgba(255,255,255,0.78); max-width: 56ch; line-height: 1.55; }
.cp-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; padding-top: 16px; }
@media (max-width: 700px) { .cp-cta { padding: 56px 20px; } }

/* Botones sobre el fondo OSCURO del CTA. Los .btn-primary/.btn-secondary del
   diseño son navy (para fondo claro) → sobre oscuro hay que invertirlos:
   primario = acento (verde) relleno; secundario = outline blanco. Así se ven
   y quedan bien demarcados. (.cp-cta .btn.btn-X gana por especificidad/orden.) */
.cp-cta .btn.btn-primary { background: var(--accent); color: var(--ink); border: 1px solid var(--accent); }
.cp-cta .btn.btn-primary:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent-soft); }
.cp-cta .btn.btn-secondary { background: transparent; color: var(--paper); border: 1.5px solid rgba(255,255,255,0.55); }
.cp-cta .btn.btn-secondary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }