*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.5; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }

#nav { position: sticky; top: 0; z-index: 10; display: flex; overflow-x: auto; scrollbar-width: none; }
#nav::-webkit-scrollbar { display: none; }
#nav a { flex: none; min-height: 48px; display: flex; align-items: center; text-decoration: none; white-space: nowrap; }

.seccion { scroll-margin-top: 72px; }
.cabeza { display: flex; align-items: baseline; gap: .6rem; }
.nombre { flex: 0 1 auto; min-width: 0; }
.puntos { flex: 1 1 1rem; }
.precio { flex: none; font-variant-numeric: tabular-nums; }
.foto { width: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }