/* Reset básico */
* {
  margin: 0; /* Elimina márgenes predeterminados */
  padding: 0; /* Elimina rellenos predeterminados */
  box-sizing: border-box; /* Incluye el padding y el borde en el ancho y alto total del elemento */
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente moderna y legible */
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); /* Fondo degradado atractivo */
  color: #f5f5f5; /* Color de texto claro para contraste */
  line-height: 1.6; /* Mejora la legibilidad del texto */
}

header {
  text-align: center; /* Centra el contenido del encabezado */
  padding: 2rem 1rem;   /* Espaciado interno */
  background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    border-bottom: 1px solid #ffffff33; /* Línea sutil en la parte inferior */
}

h1 {
  font-size: 2rem; /* Tamaño de fuente grande para el título */
  margin-bottom: 1rem; /* Espacio debajo del título */
}

nav ul {
  list-style: none; /* Elimina los puntos de la lista */
  display: flex; /* Utiliza flexbox para alinear los elementos */
  justify-content: center; /* Centra los elementos horizontalmente */
  gap: 1rem; /* Espacio entre los enlaces */
  flex-wrap: wrap; /* Permite que los enlaces se ajusten en varias líneas si es necesario */
}

nav a {
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  color: #ffffff; /* Color de texto blanco para los enlaces */
  padding: 0.5rem 1rem; /* Espaciado interno para los enlaces */
  background: rgba(255, 255, 255, 0.1); /* Fondo semitransparente para los enlaces */
  border: 1px solid #ffffff33; /* Borde sutil alrededor de los enlaces */
  border-radius: 8px; /* Bordes redondeados para un aspecto moderno */
  transition: all 0.3s ease; /* Transición suave para efectos hover */
}

nav a:hover {
  background: #ffffff33; /* Cambia el fondo al pasar el ratón */
  color: #00ffcc; /* Cambia el color del texto al pasar el ratón */
}

main {
  padding: 2rem 1rem; /* Espaciado interno para el contenido principal */
  text-align: center; /* Centra el texto del contenido principal */
}

section#portadainicio p {
  max-width: 1000px; /* Ancho máximo para el párrafo */
  margin: 0 auto 2rem auto; /* Centra el párrafo y añade espacio debajo */
  font-size: 1.1rem; /* Tamaño de fuente ligeramente mayor para mejor legibilidad */
  line-height: 1.5; /* Mejora la legibilidad del texto */
}

section img {
  border-radius: 12px; /* Bordes redondeados para las imágenes */
  margin: 1rem; /* Espacio alrededor de las imágenes */
  box-shadow: 0 10px 20px rgba(0,0,0,0.4); /* Sombra para dar profundidad */
  transition: transform 0.3s; /* Transición suave para el efecto hover */
}

section img:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño de la imagen al pasar el ratón */
}

#frase {
  margin-top: 1.5rem; /* Espacio superior para la frase */
  font-style: italic; /* Estilo de fuente cursiva para la frase */
  font-size: 1.2rem; /* Tamaño de fuente mayor para destacar la frase */
}

footer {
  display: flex; /* Utiliza flexbox para alinear los elementos del pie de página */
  flex-direction: column;   /* Alinea los elementos en columna */
  justify-content: center; /* Centra los elementos verticalmente */
  background: rgba(0, 0, 0, 0.7); /* Fondo semitransparente para el pie de página */
  align-items: center; /* Centra los elementos horizontalmente */
  padding: 2rem 1rem; /* Espaciado interno para el pie de página */
}

footer p {
  margin-bottom: 1rem; /* Espacio debajo del párrafo en el pie de página */
}

footer ul {
  list-style: none; /* Elimina los puntos de la lista */
  display: flex; /* Utiliza flexbox para alinear los elementos */
  justify-content: center; /* Centra los elementos horizontalmente */
  gap: 2rem; /* Espacio entre los enlaces */
  flex-wrap: wrap; /* Permite que los enlaces se ajusten en varias líneas si es necesario */
}

footer a {
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  color: #ffffff; /* Color de texto blanco para los enlaces */
  padding: 0.1rem 1rem; /* Espaciado interno para los enlaces */
  background: rgba(255, 255, 255, 0.1); /* Fondo semitransparente para los enlaces */
  border-radius: 8px; /* Bordes redondeados para un aspecto moderno */
  transition: all 0.3s ease; /* Transición suave para efectos hover */
}

footer a:hover {
  background: #ffffff33; /* Cambia el fondo al pasar el ratón */ 
  color: #00ffcc; /* Cambia el color del texto al pasar el ratón */
}

@media (max-width: 768px) { 
  nav ul, footer ul { 
    flex-direction: column; /* Cambia la dirección de los enlaces a columna en pantallas pequeñas */
  }

  section#portadainicio p {
    padding: 0 1rem; /* Añade espaciado horizontal para el párrafo en pantallas pequeñas */
  }
}