/* 1. Usa box-sizing más predecible */
*,
*::before,
::after {
  box-sizing: border-box;
}

/* 2. Elimina márgenes y paddings innecesarios  */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd {
  margin: 0;
  padding: 0;
}

/* / 3. Mejora el rendering del texto / */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: system-ui, sans-serif;
}

/* / 4. Quita la decoración de enlaces / */
a {
  text-decoration: none;
  color: inherit;
}

/* / 5. Imágenes adaptables / */
img,
picture {
  max-width: 100%;
  display: block;
}

/* / 6. Formularios coherentes / */
input,
button,
textarea,
select {
  font: inherit;
}

/* / 7. Elimina listas decorativas / */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

li{
    list-style: none;
}

/* / 8. Mejora del scroll */ */
html:focus-within {
  scroll-behavior: smooth;
}

html{
  scroll-behavior: smooth;
}


/* BLOCK */

.nav-bar{
    position: fixed;
    width: 100%;
    display: flex;
    background-color: var(--fondo-nav);
}

.nav-list{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5rem;

}

.nav-list a{
    color: var(--fondo-claro);
    font-weight: bold;
}

/* ELEMENTS */

.nav-list li{
    display: inline-block;
}