/* 1. Modificar el modelo de caja para que los paddings y borders no sumen al ancho total */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 2. Eliminar márgenes y paddings por defecto que los navegadores ponen a los elementos */
  * {
    margin: 0;
    padding: 0;
  }
  
  /* 3. Asegurar que el cuerpo ocupe todo el alto de la pantalla y mejorar la legibilidad */
  body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; /* Suavizado de fuentes en Mac/iOS */
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* 4. Evitar que las imágenes y elementos multimedia desborden su contenedor */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  /* 5. Heredar tipografías en elementos de formulario para que no usen la del sistema por defecto */
  input, button, textarea, select {
    font: inherit;
  }
  
  /* 6. Evitar que los textos largos o enlaces rompan el diseño en contenedores pequeños */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  /* 7. Eliminar los estilos por defecto de las listas (muy útil para menús de navegación) */
  ol, ul {
    list-style: none;
  }
  
  /* 8. Limpiar los enlaces para que no tengan subrayado feo por defecto */
  a {
    text-decoration: none;
    color: inherit;
  }
  
  /* 9. Evitar problemas visuales al ocultar elementos con el atributo 'hidden' en HTML5 */
  [hidden] {
    display: none !important;
  }