/* V5.9.2 — prominent WhatsApp navigation CTA, exact site accent red. */
.site-header{
  gap:clamp(12px,1.5vw,27px);
}
.site-header .desktop-nav{
  gap:clamp(14px,1.8vw,33px);
}
.site-header .nav-contact{
  flex-shrink:0;
}
.site-header .nav-whatsapp{
  --wa-red:var(--accent);
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:0 17px;
  flex-shrink:0;
  border:1px solid var(--wa-red);
  background:var(--wa-red);
  color:#18100f;
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 3px 12px rgba(217,84,73,.13);
  transition:transform .26s cubic-bezier(.2,.85,.2,1.15),background .25s ease,box-shadow .3s ease;
  animation:waGentlePop 3.6s ease-in-out infinite;
}
/* A slow breathing halo draws attention without flickering. */
.site-header .nav-whatsapp::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-1px;
  border:1.5px solid var(--wa-red);
  pointer-events:none;
  animation:waHalo 3.6s ease-out infinite;
}
.site-header .nav-whatsapp:hover,
.site-header .nav-whatsapp:focus-visible{
  transform:translateY(-3px) scale(1.035);
  background:#e76559;
  box-shadow:0 10px 23px rgba(217,84,73,.22);
  animation:none;
}
.site-header .nav-whatsapp:focus-visible{outline:2px solid #201b1a;outline-offset:3px}
.site-header .nav-whatsapp-icon{width:19px;height:19px;flex:none;display:block}
.site-header .nav-whatsapp-arrow{font-size:15px;font-weight:600;line-height:1;margin-left:1px}
@keyframes waGentlePop{
  0%,20%,100%{box-shadow:0 3px 12px rgba(217,84,73,.12);transform:scale(1)}
  32%{box-shadow:0 5px 18px rgba(217,84,73,.27);transform:scale(1.028)}
  48%{box-shadow:0 3px 12px rgba(217,84,73,.12);transform:scale(1)}
}
@keyframes waHalo{
  0%,20%{opacity:0;transform:scale(1)}
  31%{opacity:.6;transform:scale(1.015)}
  54%{opacity:0;transform:scale(1.13)}
  100%{opacity:0;transform:scale(1.13)}
}
.mobile-wa-menu-link{color:var(--accent)!important}
@media (max-width:1250px){
  .site-header .nav-subtitle{display:none}
  .site-header .desktop-nav{gap:clamp(12px,1.3vw,22px)}
  .site-header .nav-whatsapp{padding:0 13px;gap:7px}
  .site-header .nav-contact{padding:12px 13px}
}
@media (max-width:930px) and (min-width:721px){
  .site-header{gap:12px}
  .site-header .desktop-nav{gap:13px}
  .site-header .desktop-nav a{font-size:9px}
  .site-header .nav-whatsapp{font-size:9px;min-height:42px;padding:0 10px}
  .site-header .nav-whatsapp-arrow{display:none}
  .site-header .nav-contact{font-size:9px;padding:12px 10px}
  .site-header .nav-contact span{margin-left:5px}
}
@media (max-width:720px){
  .site-header{gap:11px}
  /* Keep WhatsApp visible when the links collapse into the hamburger. */
  .site-header .nav-whatsapp{
    display:inline-flex;
    margin-left:auto;
    min-height:38px;
    padding:0 12px;
    font-size:9px;
    gap:7px;
  }
  .site-header .nav-whatsapp-icon{width:17px;height:17px}
  .site-header .nav-whatsapp-arrow{display:none}
  .site-header .menu-toggle{margin-left:0;flex-shrink:0}
  .site-header .mobile-nav{display:flex}
}
@media (max-width:360px){
  .site-header .nav-whatsapp{padding:0 10px}
  .site-header .nav-whatsapp-label{font-size:8px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
  .site-header .nav-whatsapp,.site-header .nav-whatsapp::before{animation:none!important}
  .site-header .nav-whatsapp:hover{transform:none}
}
