/* ---------- Barra superior ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topbar-h);
  background: var(--paper); border-bottom: var(--line) solid var(--ink);
}
.topbar__inner { height: 100%; display: flex; align-items: center; gap: var(--space-3); }
.topbar__logo { display: block; flex: none; }
.topbar__logo img { height: 2.4rem; width: auto; }
.topbar__nav { margin-left: auto; }
.topbar__nav ul { display: flex; gap: clamp(0.75rem, 1.6vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.topbar__nav a {
  font-family: var(--font-display); text-transform: uppercase; text-decoration: none;
  font-size: var(--step-0); letter-spacing: 0.04em; padding: 0.3rem 0.1rem; border-bottom: 0.2rem solid transparent;
}
.topbar__nav a:hover { border-bottom-color: var(--ink); }

.lang-toggle { display: inline-flex; border: 0.18rem solid var(--ink); flex: none; }
.lang-toggle button {
  background: var(--paper); color: var(--ink); border: 0; padding: 0.3rem 0.65rem;
  font-family: var(--font-display); letter-spacing: 0.05em; font-size: var(--step--1);
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang-toggle button + button { border-left: 0.18rem solid var(--ink); }

.topbar__menu {
  display: none; background: var(--paper); border: 0.18rem solid var(--ink);
  padding: 0.3rem 0.7rem; font-family: var(--font-display); text-transform: uppercase;
}

@media (max-width: 62rem) {
  .topbar__menu { display: inline-block; margin-left: auto; }
  .topbar__nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    background: var(--paper); border-bottom: var(--line) solid var(--ink); padding: var(--space-3) 1rem var(--space-4);
  }
  .topbar__nav[data-open="true"] { display: block; }
  .topbar__nav ul { flex-direction: column; gap: 0.25rem; }
  .topbar__nav a { font-size: var(--step-2); display: block; }
}

main { padding-top: var(--topbar-h); }

/* ---------- Pie ---------- */
.footer { padding-block: var(--space-5); }
.footer__grid { display: grid; gap: var(--space-4); }
.footer__logo img { height: 4rem; width: auto; }
.footer__slogan { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.35em; font-size: var(--step--1); }
.footer__emergency { border: var(--line) solid var(--paper); padding: var(--space-3); max-width: 28rem; }
.footer__emergency strong { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-1); display: block; }
@media (min-width: 52rem) { .footer__grid { grid-template-columns: 1fr auto; align-items: end; } }