/* =============================================
   CTA BUTTON SYSTEM v4.0
   Variantes: cta-btn (normal) | cta-fill (fill)
   Cores: c-emerald | c-sunset | c-violet
          c-blue   | c-gold   | c-rose
============================================= */


/* --- SHARED --- */
.cta-btn, .cta-fill {
  text-decoration: none;
  font-family: inherit;
}
.cta-btn .cta-content,
.cta-fill .cta-content {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 10px;
}
.cta-btn .cta-text, .cta-btn .cta-icon,
.cta-fill .cta-text, .cta-fill .cta-icon {
  transition: all 0.5s ease;
}
.cta-btn:hover .cta-text, .cta-fill:hover .cta-text { transform: translateX(4px); }
.cta-btn:hover .cta-icon, .cta-fill:hover .cta-icon { transform: translateX(4px); }
.cta-btn .cta-icon, .cta-fill .cta-icon { display: flex; align-items: center; }
.cta-btn .cta-icon svg, .cta-fill .cta-icon svg { width: 22px; height: 22px; }


/* --- NORMAL VARIANT --- */
.cta-btn {
  position: relative; display: inline-block; padding: 1px;
  font-weight: 600; font-size: 0.95rem; line-height: 1.5;
  color: #fff; cursor: pointer; border-radius: 14px;
  border: none; background: #151518;
  transition: all 0.3s ease;
}
.cta-btn:hover { transform: scale(1.06); }
.cta-btn:active { transform: scale(0.95); }

.cta-btn .cta-glow {
  position: absolute; inset: 0; border-radius: 14px;
  padding: 2px; opacity: 0; transition: opacity 0.5s ease;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
               linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.cta-btn:hover .cta-glow { opacity: 1; }

.cta-btn .cta-inner {
  position: relative; z-index: 10; display: block;
  padding: 13px 26px; border-radius: 14px;
  background: #0a0a0e;
}


/* --- FILL VARIANT --- */
.cta-fill {
  position: relative; display: inline-block;
  font-weight: 600; font-size: 0.95rem; line-height: 1.5;
  color: #fff; cursor: pointer; border-radius: 14px;
  border: none; padding: 0; background: transparent;
  transition: transform 0.3s ease, box-shadow 0.4s ease;
}
.cta-fill:hover { transform: scale(1.06); }
.cta-fill:active { transform: scale(0.95); }

.cta-fill .cta-glow {
  position: absolute; inset: 0;
  border-radius: 14px; z-index: 0;
}

.cta-fill .cta-inner {
  position: relative; z-index: 1; display: block;
  padding: 13px 26px; margin: 2px;
  border-radius: 12px; background: #0a0a0e;
  overflow: hidden; transition: background 0.5s ease;
}

.cta-fill .cta-sweep {
  position: absolute; inset: 0;
  border-radius: 12px; z-index: 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-fill:hover .cta-sweep { transform: scaleX(1); }
.cta-fill:hover .cta-inner { background: transparent; }


/* --- COLORS: NORMAL --- */
.cta-btn.c-emerald .cta-glow { background: linear-gradient(to right, #10b981, #06b6d4, #0284c7); }
.cta-btn.c-emerald { box-shadow: 0 6px 24px rgba(16,185,129,0.1); }
.cta-btn.c-emerald:hover { box-shadow: 0 8px 36px rgba(16,185,129,0.28); }
.cta-btn.c-emerald:hover .cta-text, .cta-btn.c-emerald:hover .cta-icon { color: #6ee7b7; }

.cta-btn.c-sunset .cta-glow { background: linear-gradient(to right, #f97316, #ef4444, #ec4899); }
.cta-btn.c-sunset { box-shadow: 0 6px 24px rgba(249,115,22,0.1); }
.cta-btn.c-sunset:hover { box-shadow: 0 8px 36px rgba(249,115,22,0.28); }
.cta-btn.c-sunset:hover .cta-text, .cta-btn.c-sunset:hover .cta-icon { color: #fdba74; }

.cta-btn.c-violet .cta-glow { background: linear-gradient(to right, #8b5cf6, #a855f7, #d946ef); }
.cta-btn.c-violet { box-shadow: 0 6px 24px rgba(139,92,246,0.1); }
.cta-btn.c-violet:hover { box-shadow: 0 8px 36px rgba(139,92,246,0.28); }
.cta-btn.c-violet:hover .cta-text, .cta-btn.c-violet:hover .cta-icon { color: #c4b5fd; }

.cta-btn.c-blue .cta-glow { background: linear-gradient(to right, #3b82f6, #6366f1, #8b5cf6); }
.cta-btn.c-blue { box-shadow: 0 6px 24px rgba(59,130,246,0.1); }
.cta-btn.c-blue:hover { box-shadow: 0 8px 36px rgba(59,130,246,0.28); }
.cta-btn.c-blue:hover .cta-text, .cta-btn.c-blue:hover .cta-icon { color: #93c5fd; }

.cta-btn.c-gold .cta-glow { background: linear-gradient(to right, #eab308, #f59e0b, #d97706); }
.cta-btn.c-gold { box-shadow: 0 6px 24px rgba(234,179,8,0.1); }
.cta-btn.c-gold:hover { box-shadow: 0 8px 36px rgba(234,179,8,0.28); }
.cta-btn.c-gold:hover .cta-text, .cta-btn.c-gold:hover .cta-icon { color: #fde68a; }

.cta-btn.c-rose .cta-glow { background: linear-gradient(to right, #fb7185, #f472b6, #e879f9); }
.cta-btn.c-rose { box-shadow: 0 6px 24px rgba(251,113,133,0.1); }
.cta-btn.c-rose:hover { box-shadow: 0 8px 36px rgba(251,113,133,0.28); }
.cta-btn.c-rose:hover .cta-text, .cta-btn.c-rose:hover .cta-icon { color: #fda4af; }


/* --- COLORS: FILL --- */
.cta-fill.c-emerald .cta-glow { background: linear-gradient(to right, #10b981, #06b6d4, #0284c7); }
.cta-fill.c-emerald .cta-sweep { background: linear-gradient(135deg, #059669, #0891b2, #0369a1); }
.cta-fill.c-emerald { box-shadow: 0 6px 28px rgba(16,185,129,0.15); }
.cta-fill.c-emerald:hover { box-shadow: 0 8px 48px rgba(16,185,129,0.35); }
.cta-fill.c-emerald .cta-text, .cta-fill.c-emerald .cta-icon { color: #6ee7b7; }
.cta-fill.c-emerald:hover .cta-text, .cta-fill.c-emerald:hover .cta-icon { color: #fff; }

.cta-fill.c-sunset .cta-glow { background: linear-gradient(to right, #f97316, #ef4444, #ec4899); }
.cta-fill.c-sunset .cta-sweep { background: linear-gradient(135deg, #ea580c, #dc2626, #db2777); }
.cta-fill.c-sunset { box-shadow: 0 6px 28px rgba(249,115,22,0.15); }
.cta-fill.c-sunset:hover { box-shadow: 0 8px 48px rgba(249,115,22,0.35); }
.cta-fill.c-sunset .cta-text, .cta-fill.c-sunset .cta-icon { color: #fdba74; }
.cta-fill.c-sunset:hover .cta-text, .cta-fill.c-sunset:hover .cta-icon { color: #fff; }

.cta-fill.c-violet .cta-glow { background: linear-gradient(to right, #8b5cf6, #a855f7, #d946ef); }
.cta-fill.c-violet .cta-sweep { background: linear-gradient(135deg, #7c3aed, #9333ea, #c026d3); }
.cta-fill.c-violet { box-shadow: 0 6px 28px rgba(139,92,246,0.15); }
.cta-fill.c-violet:hover { box-shadow: 0 8px 48px rgba(139,92,246,0.35); }
.cta-fill.c-violet .cta-text, .cta-fill.c-violet .cta-icon { color: #c4b5fd; }
.cta-fill.c-violet:hover .cta-text, .cta-fill.c-violet:hover .cta-icon { color: #fff; }

.cta-fill.c-blue .cta-glow { background: linear-gradient(to right, #3b82f6, #6366f1, #8b5cf6); }
.cta-fill.c-blue .cta-sweep { background: linear-gradient(135deg, #2563eb, #4f46e5, #7c3aed); }
.cta-fill.c-blue { box-shadow: 0 6px 28px rgba(59,130,246,0.15); }
.cta-fill.c-blue:hover { box-shadow: 0 8px 48px rgba(59,130,246,0.35); }
.cta-fill.c-blue .cta-text, .cta-fill.c-blue .cta-icon { color: #93c5fd; }
.cta-fill.c-blue:hover .cta-text, .cta-fill.c-blue:hover .cta-icon { color: #fff; }

.cta-fill.c-gold .cta-glow { background: linear-gradient(to right, #eab308, #f59e0b, #d97706); }
.cta-fill.c-gold .cta-sweep { background: linear-gradient(135deg, #ca8a04, #d97706, #b45309); }
.cta-fill.c-gold { box-shadow: 0 6px 28px rgba(234,179,8,0.15); }
.cta-fill.c-gold:hover { box-shadow: 0 8px 48px rgba(234,179,8,0.35); }
.cta-fill.c-gold .cta-text, .cta-fill.c-gold .cta-icon { color: #fde68a; }
.cta-fill.c-gold:hover .cta-text, .cta-fill.c-gold:hover .cta-icon { color: #fff; }

.cta-fill.c-rose .cta-glow { background: linear-gradient(to right, #fb7185, #f472b6, #e879f9); }
.cta-fill.c-rose .cta-sweep { background: linear-gradient(135deg, #e11d48, #db2777, #c026d3); }
.cta-fill.c-rose { box-shadow: 0 6px 28px rgba(251,113,133,0.15); }
.cta-fill.c-rose:hover { box-shadow: 0 8px 48px rgba(251,113,133,0.35); }
.cta-fill.c-rose .cta-text, .cta-fill.c-rose .cta-icon { color: #fda4af; }
.cta-fill.c-rose:hover .cta-text, .cta-fill.c-rose:hover .cta-icon { color: #fff; }