/* ============================================================
   THM — Final CTA Component (Cierre emocional en panel oscuro)
   ============================================================ */

.final-cta {
  background: var(--color-bg);
}

.final-cta__panel {
  position: relative;
  overflow: hidden;
  background: var(--color-text-primary);
  border-radius: var(--radius-2xl);
  padding: var(--space-16) var(--space-8);
  text-align: center;
}

/* Auras decorativas (mismo lenguaje que el hero) */
.final-cta__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(79, 70, 229, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(6, 182, 212, 0.25) 0%, transparent 60%);
  z-index: 0;
}

.final-cta__panel > * {
  position: relative;
  z-index: 1;
}

/* Sobre fondo oscuro: blanco 17.9:1 y slate-300 11.2:1 — AA holgado */
.final-cta__panel h2 {
  color: #ffffff;
  max-width: 720px;
  margin: 0 auto var(--space-4);
}

.final-cta__panel p {
  color: #cbd5e1;
  font-size: var(--text-lg);
  max-width: 560px;
  margin: 0 auto var(--space-8);
}

.final-cta__panel .btn-primary {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* Microcopy de fricción cero bajo el botón (AA sobre #0f172a: 5.7:1) */
.final-cta__panel p.final-cta__note {
  margin: var(--space-4) auto 0;
  font-size: var(--text-sm);
  color: #94a3b8;
}

@media (max-width: 640px) {
  .final-cta__panel {
    padding: var(--space-10) var(--space-5);
  }

  /* El CTA largo del brief debe poder saltar de línea en móvil */
  .final-cta__panel .btn {
    white-space: normal;
    width: 100%;
  }
}