/* CLTECH Studio — Temas de Botões
   Como usar:
   1) Coloque este arquivo em assets/button-themes.css
   2) No HTML, adicione depois do style.css:
      <link rel="stylesheet" href="/assets/button-themes.css">
   3) Use classes como:
      <button class="btn btn-cyber">Contratar</button>
      <button class="btn btn-whatsapp">WhatsApp</button>
*/

:root{
  --cltech-cyan:#38bdf8;
  --cltech-blue:#2563eb;
  --cltech-purple:#a855f7;
  --cltech-pink:#ec4899;
  --cltech-green:#22c55e;
  --cltech-gold:#fbbf24;
  --cltech-red:#ef4444;
  --cltech-dark:#020617;
  --cltech-card:#0f172a;
  --cltech-line:rgba(255,255,255,.14);
}

.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn:active{
  transform:translateY(0) scale(.98);
}

.btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  opacity:0;
  z-index:-1;
  transition:opacity .2s ease;
}

.btn:hover::after{
  opacity:1;
}

/* 1. Principal CLTECH */
.btn-cltech,
.btn.primary{
  border:0;
  color:#06111f;
  font-weight:900;
  background:linear-gradient(135deg,var(--cltech-cyan),var(--cltech-purple));
  box-shadow:0 12px 30px rgba(56,189,248,.22);
}

.btn-cltech::after,
.btn.primary::after{
  background:linear-gradient(135deg,rgba(56,189,248,.35),rgba(168,85,247,.35));
  filter:blur(14px);
}

/* 2. Cyber Neon */
.btn-cyber{
  color:#dff7ff;
  border:1px solid rgba(56,189,248,.55);
  background:
    linear-gradient(135deg,rgba(56,189,248,.16),rgba(37,99,235,.08)),
    rgba(2,6,23,.82);
  box-shadow:inset 0 0 18px rgba(56,189,248,.08),0 0 22px rgba(56,189,248,.12);
}

.btn-cyber:hover{
  box-shadow:inset 0 0 18px rgba(56,189,248,.18),0 0 28px rgba(56,189,248,.28);
}

/* 3. Roxo Premium */
.btn-purple{
  color:#fff;
  border:1px solid rgba(168,85,247,.5);
  background:linear-gradient(135deg,#4c1d95,#7e22ce,#a855f7);
  box-shadow:0 14px 30px rgba(168,85,247,.22);
}

/* 4. Vidro / Glass */
.btn-glass{
  color:#f8fafc;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 30px rgba(0,0,0,.22);
}

/* 5. WhatsApp */
.btn-whatsapp{
  color:#052e16;
  border:0;
  background:linear-gradient(135deg,#22c55e,#86efac);
  font-weight:900;
  box-shadow:0 14px 30px rgba(34,197,94,.22);
}

/* 6. Pix */
.btn-pix{
  color:#042f2e;
  border:0;
  background:linear-gradient(135deg,#2dd4bf,#5eead4,#67e8f9);
  font-weight:900;
  box-shadow:0 14px 30px rgba(45,212,191,.22);
}

/* 7. Banco de Dados */
.btn-database{
  color:#dbeafe;
  border:1px solid rgba(96,165,250,.46);
  background:
    radial-gradient(circle at top,rgba(96,165,250,.24),transparent 45%),
    linear-gradient(135deg,#0f172a,#1e3a8a);
  box-shadow:0 14px 30px rgba(37,99,235,.18);
}

/* 8. Admin */
.btn-admin{
  color:#fff7ed;
  border:1px solid rgba(251,146,60,.45);
  background:linear-gradient(135deg,#7c2d12,#c2410c,#f97316);
  box-shadow:0 14px 30px rgba(249,115,22,.2);
}

/* 9. Ouro / Destaque */
.btn-gold{
  color:#1c1000;
  border:0;
  background:linear-gradient(135deg,#f59e0b,#fbbf24,#fde68a);
  font-weight:900;
  box-shadow:0 14px 30px rgba(251,191,36,.22);
}

/* 10. Perigo */
.btn-danger-theme,
.btn.danger{
  color:#fff;
  border:1px solid rgba(248,113,113,.46);
  background:linear-gradient(135deg,#7f1d1d,#dc2626,#ef4444);
  box-shadow:0 14px 30px rgba(239,68,68,.18);
}

/* 11. Sucesso */
.btn-success{
  color:#ecfdf5;
  border:1px solid rgba(34,197,94,.45);
  background:linear-gradient(135deg,#064e3b,#16a34a,#22c55e);
  box-shadow:0 14px 30px rgba(34,197,94,.18);
}

/* 12. Outline fino */
.btn-outline{
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.24);
  background:transparent;
}

.btn-outline:hover{
  border-color:rgba(56,189,248,.8);
  color:#e0f2fe;
  box-shadow:0 0 22px rgba(56,189,248,.12);
}

/* 13. Ghost escuro */
.btn-ghost{
  color:#cbd5e1;
  border:1px solid transparent;
  background:rgba(255,255,255,.04);
}

.btn-ghost:hover{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
}

/* 14. Matrix */
.btn-matrix{
  color:#dcfce7;
  border:1px solid rgba(34,197,94,.42);
  background:
    linear-gradient(135deg,rgba(20,83,45,.9),rgba(2,44,34,.95)),
    repeating-linear-gradient(90deg,rgba(34,197,94,.15) 0 1px,transparent 1px 9px);
  box-shadow:0 0 24px rgba(34,197,94,.14);
}

/* 15. Pixel / Game */
.btn-pixel{
  color:#fff;
  border:2px solid rgba(255,255,255,.2);
  border-radius:8px!important;
  background:linear-gradient(135deg,#1d4ed8,#7c3aed);
  box-shadow:4px 4px 0 rgba(0,0,0,.55),0 12px 28px rgba(124,58,237,.2);
  image-rendering:pixelated;
}

.btn-pixel:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 rgba(0,0,0,.55),0 12px 28px rgba(124,58,237,.25);
}

/* 16. Botão com brilho passando */
.btn-shine::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:32%;
  height:220%;
  transform:rotate(25deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  opacity:.0;
}

.btn-shine:hover::before{
  animation:cltech-shine .75s ease forwards;
}

@keyframes cltech-shine{
  0%{left:-45%;opacity:0}
  20%{opacity:.7}
  100%{left:125%;opacity:0}
}

/* Tamanhos */
.btn-sm{padding:8px 11px!important;min-height:34px!important;font-size:13px}
.btn-lg{padding:14px 19px!important;min-height:50px!important;font-size:16px}
.btn-xl{padding:17px 24px!important;min-height:58px!important;font-size:18px;border-radius:18px!important}

/* Botões de largura total */
.btn-block{width:100%}

/* Grupo de botões */
.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Botão com ícone */
.btn-icon{
  width:44px;
  height:44px;
  padding:0!important;
  border-radius:14px!important;
}

.btn-icon-lg{
  width:54px;
  height:54px;
  padding:0!important;
  border-radius:18px!important;
}

/* Mobile */
@media(max-width:700px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
}