/* ================================================================
   SEC-CTA — Call to Action
   Focofy Factory — Design Tokens Contract v3.6

   v2.3 → v3.0:
     - --weight-semibold/extrabold → --fw-semibold/extrabold
     - --leading-relaxed/tight     → --lh-relaxed/lh-tight
     - clamp() com fallbacks       → clamp(var(--font-size-3xl), 3vw, var(--font-size-4xl))
     - breakpoint 600px            → 767px (--bp-tablet)

   v3.0 → v3.1:
     - bg-dark: color: --color-text → --color-text-inverse
     - max-width: 600px no __desc  → var(--container-narrow) (720px)
   ================================================================ */

/* ── BASE ────────────────────────────────────────────────────── */

.ff-cta {
  /* 🎨 Fundo: gradiente usando tokens primário + secundário */
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 15%, transparent),
    color-mix(in srgb, var(--color-accent-2) 10%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);

  /* 🔘 Forma */
  border-radius: var(--radius-xl);

  /* 📏 Espaçamento (default = normal) */
  padding: var(--space-8) var(--space-6);

  /* 🌫️ Sombra usando token primário */
  box-shadow: 0 16px 48px color-mix(in srgb, var(--color-accent) 20%, transparent);

  /* 📐 Layout (default = center) */
  text-align: center;
}

/* ── MODIFICADORES: background ───────────────────────────────── */

.ff-cta--bg-none {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ff-cta--bg-light {
  background: var(--color-surface-2);
  border-color: var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}

.ff-cta--bg-dark {
  background: var(--color-surface-dark);
  border-color: var(--color-border-subtle);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg);
}

.ff-cta--bg-dark .ff-cta__subtitle {
  color: var(--color-accent-2);
}

.ff-cta--bg-dark .ff-cta__desc {
  color: var(--color-text-muted);
}

.ff-cta--bg-dark .ff-cta__meta {
  color: var(--color-text-muted);
}

.ff-cta--bg-dark .ff-cta__urgency,
.ff-cta--bg-dark .ff-cta__social {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.ff-cta--bg-gradient {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 18%, transparent),
    color-mix(in srgb, var(--color-accent-2) 14%, transparent)
  );
  border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.ff-cta--bg-accent {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--btn-primary-bg) 12%, transparent),
    color-mix(in srgb, var(--btn-secondary-bg) 8%, transparent)
  );
  border-color: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--btn-primary-bg) 20%, transparent);
}

/* ── MODIFICADORES: tamanho ──────────────────────────────────── */

.ff-cta--size-compact {
  padding: var(--space-4) var(--space-6);
}

.ff-cta--size-normal {
  padding: var(--space-8) var(--space-6);
}

.ff-cta--size-large {
  padding: var(--space-16) var(--space-12);
}

/* ── MODIFICADORES: alinhamento ──────────────────────────────── */

.ff-cta--align-center {
  text-align: center;
}

.ff-cta--align-center .ff-cta__desc {
  margin-left: auto;
  margin-right: auto;
}

.ff-cta--align-center .ff-cta__meta,
.ff-cta--align-center .ff-cta__ctas {
  justify-content: center;
}

.ff-cta--align-left {
  text-align: left;
}

.ff-cta--align-left .ff-cta__meta,
.ff-cta--align-left .ff-cta__ctas {
  justify-content: flex-start;
}

/* ── ELEMENTOS ───────────────────────────────────────────────── */

.ff-cta__subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: var(--lh-relaxed);

  /* 🎨 Cor do subtítulo = secundário (responde ao token) */
  color: var(--color-accent-2);

  margin-bottom: var(--space-2);
}

.ff-cta__title{
  font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-4xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
}

.ff-cta__desc {
  font-size: var(--font-size-lg);
  line-height: var(--lh-relaxed);
  opacity: 0.85;
  margin-bottom: var(--space-6);
  max-width: var(--container-narrow);  /* 720px — --container-narrow */
}

.ff-cta__meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-sm);

  /* 🎨 Cor do meta = muted (responde ao token) */
  color: var(--color-text-muted);
}

.ff-cta__urgency,
.ff-cta__social {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);

  /* 🎨 Borda + fundo = tokens surface/border */
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-2);

  backdrop-filter: blur(8px);
}

.ff-cta__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 767px) {             /* abaixo de --bp-tablet */
  .ff-cta--size-large {
    padding: var(--space-8) var(--space-6);
  }

  .ff-cta--size-normal {
    padding: var(--space-6) var(--space-4);
  }

  .ff-cta--size-compact {
    padding: var(--space-4) var(--space-2);
  }

  .ff-cta__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .ff-cta__meta {
    flex-direction: column;
    align-items: inherit;
  }
}