/* ============================================================
   components.css — Botones, navbar, footer, pills, social
   Calandria Mora © 2025
   ============================================================ */

/* ── Botones ─────────────────────────────────────────────── */

.btn-primary-cm {
  background: var(--cm-grad);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: .85rem 2rem;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: opacity .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 24px rgba(123, 92, 240, .35);
}
.btn-primary-cm:hover {
  opacity: .9;
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 8px 32px rgba(123, 92, 240, .5);
}

.btn-outline-cm {
  background: transparent;
  color: var(--cm-text);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-md);
  padding: .85rem 2rem;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: border-color .2s, background .2s, transform .2s;
}
.btn-outline-cm:hover {
  border-color: var(--cm-violet);
  background: rgba(123, 92, 240, .08);
  color: var(--cm-text);
  transform: translateY(-2px);
}

/* ── Navbar ──────────────────────────────────────────────── */

.cm-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 1rem 0;
  transition: background .3s, backdrop-filter .3s, box-shadow .3s;
}
.cm-nav.scrolled {
  background: rgba(13, 15, 26, .85);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--cm-border);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.logo-mark {
  width: 38px;
  height: 38px;
  background: var(--cm-grad);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
  box-shadow: 0 0 18px rgba(123, 92, 240, .5);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: -.01em;
}
.brand-name span {
  color: var(--cm-teal);
  font-style: italic;
}

.nav-link {
  color: var(--cm-muted) !important;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  transition: color .2s;
  padding: .4rem .9rem !important;
}
.nav-link:hover { color: var(--cm-text) !important; }

.btn-nav {
  background: var(--cm-grad);
  color: #fff !important;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 600;
  padding: .45rem 1.2rem !important;
  transition: opacity .2s, box-shadow .2s;
}
.btn-nav:hover {
  opacity: .88;
  box-shadow: 0 0 20px rgba(123, 92, 240, .45);
}

.navbar-toggler { border: 1px solid var(--cm-border); }
.navbar-toggler-icon { filter: invert(1); }

/* ── Tech pills ──────────────────────────────────────────── */

.logos-bar {
  padding: 3rem 0;
  border-top: 1px solid var(--cm-border);
  border-bottom: 1px solid var(--cm-border);
  background: rgba(255, 255, 255, .015);
}
.logos-bar p {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cm-muted);
  margin-bottom: 1.5rem;
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--cm-card);
  border: 1px solid var(--cm-border);
  border-radius: 100px;
  padding: .4rem 1rem;
  font-size: .8rem;
  color: var(--cm-muted);
  margin: .3rem;
  transition: border-color .2s, color .2s;
}
.tech-pill:hover {
  border-color: var(--cm-violet);
  color: var(--cm-text);
}
.tech-pill i {
  color: var(--cm-teal);
  font-size: .9rem;
}

/* ── Social icons ────────────────────────────────────────── */

.social-icon {
  width: 36px;
  height: 36px;
  background: var(--cm-card);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-sm);
  display: inline-grid;
  place-items: center;
  color: var(--cm-muted);
  text-decoration: none;
  font-size: 1rem;
  transition: border-color .2s, color .2s;
  margin-right: .4rem;
}
.social-icon:hover {
  border-color: var(--cm-violet);
  color: var(--cm-violet);
}

/* ── Footer ──────────────────────────────────────────────── */

footer {
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--cm-border);
  background: var(--cm-navy);
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
}
.footer-brand span {
  color: var(--cm-teal);
  font-style: italic;
}

.footer-desc {
  font-size: .85rem;
  color: var(--cm-muted);
  margin-top: .5rem;
  max-width: 280px;
}

.footer-heading {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cm-text);
  margin-bottom: 1rem;
}

.footer-link {
  display: block;
  font-size: .85rem;
  color: var(--cm-muted);
  text-decoration: none;
  margin-bottom: .5rem;
  transition: color .2s;
}
.footer-link:hover { color: var(--cm-teal); }

.footer-copy {
  font-size: .8rem;
  color: var(--cm-muted);
  padding-top: 2rem;
  border-top: 1px solid var(--cm-border);
  margin-top: 2rem;
}