/* RESETEO GENERAL */
/* Esto lo puse para que todos los elementos arranquen sin márgenes 
o padding por defecto. Me ayudó a que todo quedara más uniforme y 
es una muy buena tecnicá que voy a empezar a usar siempre*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* CUERPO */
/* Fondo gris claro, letra legible y más espacio entre líneas para que sea cómodo de leer */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  line-height: 1.6;
}

/* CABECERA */
/* Fondo azul oscuro y texto blanco para que el título destaque */
header {
  background-color: #002b5c;
  color: white;
  padding: 20px;
  text-align: center;
}
header h1 {
  margin-bottom: 10px;
}
nav ul {
  list-style: none; /* Quito los puntitos de la lista */
  text-align: center;
  margin-top: 10px;
}
nav ul li {
  display: inline-block;
  margin: 0 10px;
}
nav ul li a {
  color: white;
  background-color: #0077cc;
  padding: 8px 16px;
  border-radius: 5px;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: #005999; /* Cambio de color al pasar el ratón */
}

/* SECCIÓN PRINCIPAL */
/* Fondo blanco para que el texto resalte sobre el gris */
section {
  background-color: white;
  max-width: 900px;
  margin: 30px auto;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Sombrita suave */
}
section h2, section h3 {
  color: #0077cc;
  margin-bottom: 15px;
  text-align: center;
}
section p, section ul, section ol {
  margin-bottom: 20px;
  padding: 0 10px;
}

/* LISTAS */
/* Las listas las dejo con sangría y espacio entre ítems para que no se vean amontonadas */
ul, ol {
  padding-left: 20px;
}
li {
  margin-bottom: 10px;
}

/* IMÁGENES */
/* Todas las imágenes se adaptan al tamaño de la pantalla sin salirse y se ven centradas */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Para que no se vean planas */
}

/* CÓDIGO */
/* Para cuando se escribe código, lo dejo con fondo gris claro y tipo de letra especial */
code {
  background-color: #eee;
  padding: 3px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* PIE DE PÁGINA */
footer {
  background-color: #002b5c;
  color: white;
  text-align: center;
  padding: 15px 0;
  margin-top: 40px;
  font-size: 0.9em;
}