/* =====================================================================
   COMPONENTS.CSS — peças reutilizáveis entre index.html, projetos.html
   e scripts.html. Se um componente só existe numa página específica,
   ele vai no CSS daquela página, não aqui.
   ===================================================================== */

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:14px;font-weight:500;
  padding:13px 24px;border-radius:var(--radius-sm);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  cursor:pointer;border:none;
}
.btn-primary{background:var(--primary);color:#fff;border:1px solid #1D4ED8;box-shadow:var(--shadow-md);}
.btn-primary:hover{background:var(--primary-glow);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--secondary);color:var(--secondary);transform:translateY(-2px);}

/* ---------- Header / navegação ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,14,23,0.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
nav{max-width:var(--maxw);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:16px;}
.logo img{width:26px;height:26px;}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{font-size:14px;color:var(--text-muted);transition:color .15s ease;}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-cta{
  font-family:var(--font-display);font-size:13px;background:var(--primary);color:#fff;
  padding:9px 16px;border-radius:var(--radius-sm);border:1px solid #1D4ED8;
}
.nav-cta:hover{background:var(--primary-glow);}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:20px;}

/* ---------- Terminal (mockup de janela) ---------- */
.terminal{
  max-width:680px;margin:0 auto;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 30px 80px -30px rgba(37,99,235,0.25);overflow:hidden;
}
.terminal-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--surface);border-bottom:1px solid var(--line);}
.dot{width:10px;height:10px;border-radius:50%;}
.dot.r{background:#FF5F57;}.dot.y{background:#FEBC2E;}.dot.g{background:#28C840;}
.terminal-title{font-family:var(--font-display);font-size:12px;color:var(--text-faint);margin-left:6px;}
.terminal-body{padding:24px 24px 28px;font-family:var(--font-display);font-size:14px;}
.terminal-body .line{margin-bottom:14px;}
.prompt{color:var(--secondary);}
.prompt::after{content:" ";}
.path{color:var(--tertiary);}
.out{color:var(--text-muted);margin-top:6px;}
.cursor{display:inline-block;width:8px;height:14px;background:var(--primary-glow);vertical-align:text-bottom;margin-left:2px;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){.cursor{animation:none;}}

/* ---------- Badge / chip genéricos ---------- */
.badge{
  font-family:var(--font-display);font-size:11px;color:var(--tertiary);
  background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);
  padding:4px 10px;border-radius:20px;display:inline-block;margin-bottom:14px;
}
.badge.soon{color:var(--text-muted);background:rgba(139,152,172,0.08);border-color:var(--line);}
.value-chip{
  font-family:var(--font-display);font-size:12.5px;color:var(--text-muted);
  border:1px solid var(--line);border-radius:20px;padding:7px 14px;display:inline-block;
}

/* ---------- Faixa de CTA (usada em Contato e no rodapé das páginas internas) ---------- */
.cta-strip{
  max-width:calc(var(--maxw) - 48px);margin:0 auto;
  background:linear-gradient(120deg, var(--primary) 0%, var(--primary-deep) 100%);
  border-radius:var(--radius-lg);padding:50px 46px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-strip h2{color:#fff;font-size:22px;margin-bottom:6px;}
.cta-strip p{color:#CBD5E1;font-size:14px;}
.cta-strip .btn-primary{background:#fff;color:var(--primary-deep);box-shadow:none;}
.cta-strip .btn-primary:hover{background:#EFF6FF;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line-soft);padding:48px 0 28px;margin-top:0;}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:28px;}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;}
.foot-links a{font-size:13.5px;color:var(--text-muted);}
.foot-links a:hover{color:var(--secondary);}
.foot-bottom{border-top:1px solid var(--line-soft);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--text-faint);font-family:var(--font-display);}

/* ---------- Responsivo comum ---------- */
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
}
@media (max-width:560px){
  .cta-strip{flex-direction:column;text-align:center;padding:36px 26px;}
}