/* Shares the navigation dock state; the Home header also has an icon-only link. */
.navigation-actions {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:12px;
}
.header .navigation-actions--hero { display:flex }
.nav-whatsapp {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:52px;
  height:52px;
  min-width:44px;
  min-height:44px;
  padding:2px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#4dff28;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1), background-color 180ms ease;
}
.nav-whatsapp-icon { display:block; width:100%; height:100%; overflow:visible }
.nav-whatsapp-icon path {
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:filter 180ms ease, stroke 180ms ease;
}
.nav-whatsapp-bubble {
  stroke:#4dff28;
  stroke-width:2.2;
  filter:drop-shadow(0 0 2px #4dff28b3) drop-shadow(0 0 5px #29f40066);
}
.nav-whatsapp-phone {
  stroke:#fff;
  stroke-width:2.3;
  filter:drop-shadow(0 0 2px #ffffff80);
  transform-origin:32px 32px;
}
@media(hover:hover) and (pointer:fine) {
  .nav-whatsapp:hover { transform:translateY(-2px) rotate(-7deg) scale(1.06) }
  .nav-whatsapp:hover .nav-whatsapp-bubble {
    stroke:#84ff65;
    filter:drop-shadow(0 0 3px #4dff28) drop-shadow(0 0 8px #29f400aa);
  }
  .nav-whatsapp:hover .nav-whatsapp-phone { animation:nav-whatsapp-ring 520ms ease-in-out }
}
.nav-whatsapp:focus-visible { outline:2px solid #a5ff91; outline-offset:5px; background:#1eff0a12 }
.nav-whatsapp:active { transform:scale(.94) }
@keyframes nav-whatsapp-ring {
  0%,100% { transform:rotate(0) }
  25% { transform:rotate(10deg) }
  55% { transform:rotate(-8deg) }
  80% { transform:rotate(4deg) }
}
@media(max-width:700px), (orientation:landscape) and (max-height:540px) and (max-width:1100px) {
  .navigation-actions { gap:9px }
  .nav-whatsapp { width:46px; height:46px }
  .header .navigation-actions--hero { display:flex; margin-left:auto; gap:8px }
  .header .navigation-actions .menu-toggle { margin:0 }
  .header:has(.navigation-actions--hero) { gap:clamp(8px,2.5vw,16px) }
}
@media(orientation:landscape) and (max-height:540px) and (max-width:1100px) {
  .navigation-actions { gap:8px }
  .nav-whatsapp { width:44px; height:44px }
}
@media(prefers-reduced-motion:reduce) {
  .nav-whatsapp,.nav-whatsapp-icon path { transition:none }
  .nav-whatsapp:hover,.nav-whatsapp:active { transform:none }
  .nav-whatsapp:hover .nav-whatsapp-phone { animation:none }
}