/* ==========================================================================
   RESET CSS
   Quita los estilos por defecto que cada navegador aplica de forma distinta
   (márgenes, tamaños de letra, listas con puntos, etc.) para que la web
   se vea igual en todos los navegadores y partamos de una base limpia.
   ========================================================================== */

/* 1. Todo el mundo usa la misma "caja": el padding y el borde ya no suman
      al ancho/alto que definamos. Así los cálculos de tamaños son simples. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Quitamos el margen que el navegador pone por defecto a casi todo. */
* {
  margin: 0;
}

/* 3. Altura de línea cómoda por defecto (mejora la lectura de párrafos). */
html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}

/* 4. El body ocupa como mínimo toda la pantalla, para que el footer no
      quede "flotando" en páginas con poco contenido. */
body {
  min-height: 100vh;
}

/* 5. Imágenes y vídeos nunca se salen de su contenedor. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 6. Los formularios heredan la tipografía de la página en vez de usar
      la fuente "nativa" del sistema operativo. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* 7. Los enlaces no llevan color azul ni subrayado por defecto:
      cada componente decide cómo se ven sus enlaces. */
a {
  color: inherit;
  text-decoration: none;
}

/* 8. Las listas usadas para maquetar (menús, grids...) no llevan viñetas. */
ul,
ol {
  list-style: none;
}

/* 9. Los títulos y párrafos no rompen palabras largas de forma fea. */
h1,
h2,
h3,
h4,
p {
  overflow-wrap: break-word;
}

/* 10. Los botones no heredan el estilo "nativo" del navegador. */
button {
  background: none;
  border: none;
  cursor: pointer;
}