/* Liquid glass: composición y resortes basados en el pill de ZavDigital. */
.pillbar {
  transform: translateX(-50%) translateY(var(--jt, 0px))
    scaleX(var(--jx, 1)) scaleY(var(--jy, 1))
    scaleX(var(--hx, 1)) scaleY(var(--hy, 1)) skewX(var(--sk, 0deg));
  transform-origin: 50% 0;
  box-shadow: 0 14px 34px -18px rgba(12, 49, 65, .30);
}
.glass-bg {
  background: rgba(244, 250, 253, .42);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .60),
    inset 0 -1px 1px rgba(255, 255, 255, .25);
  overflow: hidden;
  transition: background .35s, box-shadow .3s;
}
@supports (backdrop-filter: blur(14px)) {
  .glass-bg {
    background: rgba(244, 250, 253, .32);
    backdrop-filter: blur(14px) saturate(170%) brightness(1.10);
    -webkit-backdrop-filter: blur(14px) saturate(170%) brightness(1.10);
  }
}
.glass-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at var(--shine-x, 30%) var(--shine-y, 0%),
    rgba(255, 255, 255, .32), rgba(255, 255, 255, .05) 55%, transparent 80%);
  pointer-events: none;
}
.pillbar::before {
  border: 0;
  padding: 1.4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85),
    rgba(255, 255, 255, .28) 20%, transparent 43%, transparent 60%,
    rgba(255, 255, 255, .30) 80%, rgba(255, 255, 255, .72));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.pillbar.scrolled .glass-bg { background: rgba(244, 250, 253, .36); }
.pillbar.scrolled { box-shadow: 0 18px 44px -16px rgba(12, 49, 65, .35); }
.pillbar .nav-links a { color: #07384d; }
.hero-wash {
  /* Deja que el cristal del header filtre la imagen de la oficina. */
  -webkit-mask-image: linear-gradient(transparent, transparent 105px, #000 195px);
  mask-image: linear-gradient(transparent, transparent 105px, #000 195px);
}
.pillbar.on-dark .glass-bg {
  background: rgba(5, 37, 51, .42);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25),
    inset 0 -1px 1px rgba(255, 255, 255, .12);
}
.pillbar.on-dark .glass-bg::after { opacity: .35; }
.pillbar.on-dark .nav-cta { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .38); }
.pillbar.on-dark .nav-links a { color: #fff; }
.pillbar.on-dark .nav-links a::after { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .pillbar:hover { box-shadow: 0 18px 42px -18px rgba(12, 49, 65, .42); }
  .pillbar:hover .glass-bg { box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, .75), inset 0 -1px 1px rgba(255, 255, 255, .28); }
  @supports (backdrop-filter: blur(14px)) {
    .pillbar:hover .glass-bg { backdrop-filter: blur(16px) saturate(190%) brightness(1.10); -webkit-backdrop-filter: blur(16px) saturate(190%) brightness(1.10); }
    .pillbar.windy .glass-bg { backdrop-filter: blur(14px) saturate(170%) brightness(1.10); -webkit-backdrop-filter: blur(14px) saturate(170%) brightness(1.10); }
  }
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .pillbar { transform: translateX(-50%); }
  .glass-bg, .pillbar:hover .glass-bg { backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); }
}
@media (prefers-reduced-transparency: reduce) {
  .pillbar .glass-bg, .pillbar.scrolled .glass-bg { background: #f2f7f9; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pillbar.on-dark .glass-bg { background: #07384d; }
}

/* Secciones visibles junto al monograma en todos los tamaños. */
.pillbar .nav-links {
  position: static;
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 3vw, 34px);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pillbar .nav-links a {
  font-size: 15px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
  white-space: nowrap;
}
.nav-label-short { display: none; }
@media (max-width: 660px) {
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
}
@media (max-width: 600px) {
  .pillbar { gap: 16px; }
  .pillbar .nav-links { justify-content: space-evenly; gap: 10px; }
  .pillbar .nav-links a { font-size: 14px; }
}
@media (max-width: 360px) {
  .brand-symbol { width: 40px; height: 40px; }
  .pillbar { gap: 10px; }
}