/* ===================================================================
   NAV-FIX — layout logo-izquierda / nav-derecha en escritorio
   El nav original estaba pensado para 3 columnas (izq/logo/der) y con
   solo 2 grupos quedaba amontonado. Solo aplica en escritorio: en
   mobile el CSS real oculta .nav-desktop (display:none) y muestra el
   drawer .nav-links — no hay que pisar eso con !important.
   Compartido entre index.html y las páginas de /proyectos/.
   =================================================================== */
@media (min-width:761px){
  .nav-desktop{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:100%; }
  .nav-side--right{
    display:flex !important; flex-wrap:wrap; row-gap:12px; align-items:center;
    justify-content:flex-end; gap:26px; margin-left:auto;
  }
  .nav-desktop .nav-side--right a:not(.btn){ position:relative; }
  .nav-desktop .nav-side--right a:not(.btn)::after{
    content:""; position:absolute; left:0; right:100%; bottom:-4px;
    height:2px; background:currentColor; transition:right .3s ease;
  }
  .nav-desktop .nav-side--right a:not(.btn):hover::after{ right:0; }
  .nav-ctas{ display:flex; align-items:center; gap:26px; }
}
.header-tools{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  background:none; border:1.5px solid currentColor; border-radius:999px;
  padding:6px 13px; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  cursor:pointer; color:inherit; font-family:inherit; line-height:1;
  display:inline-flex; align-items:center; gap:4px; transition:transform .2s ease, background .2s ease;
}
.icon-btn:hover{ transform:translateY(-2px); }

/* ================= REDES flotante (izquierda) ================= */
.social-float{
  position:fixed; left:16px; top:50%; transform:translateY(-50%); z-index:900;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.social-float a{
  writing-mode:vertical-rl; text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; font-weight:700; text-decoration:none; color:inherit;
}
.social-float-line{ width:1px; height:64px; background:currentColor; opacity:.4; }
@media (max-width:960px){ .social-float{ display:none; } }

/* ================= WHATSAPP flotante (derecha) ================= */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:999; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(37,211,102,.35); animation:waPulse 2.6s ease-in-out infinite; transition:transform .25s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:28px; height:28px; }
@keyframes waPulse{
  0%,100%{ box-shadow:0 12px 28px rgba(37,211,102,.35); }
  50%{ box-shadow:0 12px 28px rgba(37,211,102,.65), 0 0 0 10px rgba(37,211,102,.12); }
}

/* ================= VOLVER ARRIBA flotante (izquierda) ================= */
.back-to-top{
  position:fixed; left:22px; bottom:22px; z-index:999; width:50px; height:50px; border-radius:50%;
  background:var(--ink); color:var(--cream); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(43,29,21,.3);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .25s ease;
}
.back-to-top.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.back-to-top:hover{ background:var(--cherry); }
.back-to-top svg{ width:20px; height:20px; }
@media (max-width:640px){ .back-to-top{ left:14px; bottom:14px; width:44px; height:44px; } }