/* Shared public navigation; page content and private interfaces are separate. */
:is(.site-header, .preview-header) {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  background: rgba(13, 49, 55, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
}
:is(.site-header, .preview-header) .brand img { width: 225px; height: auto; }
:is(.main-nav, .preview-nav) {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
:is(.main-nav, .preview-nav) a { opacity: .92; }
:is(.main-nav, .preview-nav) a:hover { color: #9de5f0; }
:is(.main-nav, .preview-nav) a.active {
  color: #9de5f0;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}
.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, .28);
  padding-left: 16px;
  font-size: 12px;
}
.language-switcher a { padding: 4px 0; border: 0; opacity: .58; }
html[lang="es"] .language-switcher a[lang="es"],
html[lang="en"] .language-switcher a[lang="en"] { color: #fff; opacity: 1; }
.language-switcher span { opacity: .35; }
.language-switcher[hidden] { display: none; }
:is(.menu-button, .preview-menu-button) {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
}
:is(.menu-button, .preview-menu-button) span { display: block; height: 2px; margin: 5px 0; background: #fff; }
@media (max-width: 1060px) {
  :is(.menu-button, .preview-menu-button) { display: block; }
  :is(.main-nav, .preview-nav) {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 24px 22px;
    background: rgba(13, 49, 55, .98);
  }
  :is(.main-nav, .preview-nav).open { display: flex; }
  :is(.main-nav, .preview-nav) a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  :is(.main-nav, .preview-nav) .language-switcher { justify-content: center; margin: 10px 0 0; border: 0; padding: 4px 0 0; }
  :is(.main-nav, .preview-nav) .language-switcher a { border: 0; padding: 8px; }
}
@media (max-width: 640px) {
  :is(.site-header, .preview-header) .brand img { width: 190px; }
}