/* Estilos compartidos: barra superior y tipografías */
:root {
  --papel: #ffffff;
  --tinta: #000000;
  --sans: "Inter", "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --grotesk: "Archivo", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --barra: 36px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); font-size: 11px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--barra);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 14px;
  background: var(--papel); color: var(--tinta);
  border-bottom: 1px solid #000;
  font-family: var(--sans); font-size: 11px;
  font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
}
.punto { width: 11px; height: 11px; border-radius: 50%; background: var(--tinta); }
.nombre { font-size: 13px; font-weight: 600; letter-spacing: .03em; }
.barra nav { justify-self: end; display: flex; gap: 26px; }
.barra nav a { position: relative; }
.barra nav a.actual::after,
.barra nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .35s ease;
}
.barra nav a.actual::after { transform: scaleX(1); }
.barra nav a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 760px) {
  .barra { grid-template-columns: auto 1fr; gap: 10px; }
  .punto { display: none; }
  .barra nav { gap: 12px; font-size: 9px; }
  /* todos los botones siempre visibles, en una sola línea */
  .barra .nombre { white-space: nowrap; font-size: 12px; }
  .barra nav a { white-space: nowrap; }
}

/* celulares angostos: barra más compacta para que quepan los 5 botones */
@media (max-width: 420px) {
  .barra { padding: 0 10px; gap: 8px; }
  .barra .nombre { font-size: 10.5px; letter-spacing: .01em; }
  .barra nav { gap: 8px; font-size: 8.5px; letter-spacing: 0; }
}
@media (max-width: 340px) {
  .barra { padding: 0 8px; gap: 6px; }
  .barra .nombre { font-size: 9.5px; }
  .barra nav { gap: 6px; font-size: 7.3px; }
}