/* --- Body --- */
body {
  font-family: "Segoe UI", Roboto, sans-serif; /* Fuentes principales y de respaldo */
  margin: 0;                                  /* Quita el margen por defecto del navegador */
  background-color: #f4f4f9;                  /* Color de fondo claro */
  color: #333;                                /* Color de texto principal */
  line-height: 1.6;                           /* Altura de línea para mejor lectura */

  display: flex;             /* Flexbox para layout vertical */
  flex-direction: column;    /* Apila header, main y footer en columna */
  min-height: 100vh;         /* Ocupa al menos toda la altura de la ventana */
}

/* --- Header --- */
header {
  background: #2b2d42;      /* Color de fondo oscuro */
  color: #fff;               /* Texto blanco */
  text-align: center;        /* Centrar texto */
  padding: 2rem 1rem;        /* Espaciado interno vertical y horizontal */
}

header h1 {
  margin-bottom: 0.3rem;     /* Separación debajo del título principal */
}

/* --- Secciones --- */
section {
  background: #fff;           /* Fondo blanco para cada sección */
  margin: 1rem auto;          /* Separación vertical y centrado horizontal */
  padding: 1.5rem;            /* Espaciado interno */
  max-width: 800px;           /* Máximo ancho de sección */
  border-radius: 10px;        /* Bordes redondeados */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Sombra suave */
}

h2 {
  color: #2b2d42;             /* Color de títulos de sección */
  border-bottom: 2px solid #8d99ae; /* Línea inferior decorativa */
  padding-bottom: 0.3rem;     /* Separación entre texto y línea */
}

/* --- Footer --- */
footer {
  text-align: center;         /* Centrar texto del footer */
  padding: 1rem;              /* Espaciado interno */
  background: #2b2d42;        /* Fondo oscuro */
  color: white;               /* Texto blanco */
  margin-top: auto;           /* Empuja el footer al fondo del flex container */
}

footer a {
  color: #edf2f4;             /* Color enlaces en footer */
  text-decoration: none;       /* Sin subrayado */
}

footer a:hover {
  text-decoration: underline;  /* Subrayado al pasar el mouse */
}

/* --- Navegación --- */
.navbar {
  margin-top: 1rem;            /* Separación superior */
  display: flex;               /* Flexbox horizontal */
  justify-content: center;     /* Centrar los links */
  gap: 0.5rem;                 /* Espacio entre links y los separadores */
}

.navbar a {
  color: white;                /* Color de los links */
  text-decoration: none;       /* Sin subrayado */
  font-weight: 600;            /* Negrita ligera */
  position: center;          /* Para colocar el separador */
}

.navbar {
  color: #edf2f4;             /* Color enlaces en footer */
  text-decoration: none;       /* Sin subrayado */
}
.navbar a {
  color: #edf2f4;             /* Color enlaces en footer */
  text-decoration: none;       /* Sin subrayado */
}

.navbar a:hover {
  text-decoration: underline;  /* Subrayado al pasar el mouse */
}

/* --- NAV RESPONSIVE --- */
.navbar {
  margin-top: 1rem;
  background-color: #2b2d42;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  border-radius: 8px;
  flex-wrap: wrap; /* <<< Clave para móviles */
}

.navbar a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
  white-space: nowrap; /* evita que se rompan palabras feo */
}

.navbar a:hover {
  color: #edf2f4;
}


/* --- Ajustes para pantallas pequeñas --- */
@media (max-width: 600px) {
  .navbar {
    gap: 0.7rem;
    padding: 0.8rem;
  }

  .navbar a {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    background: #2b2d42;        /* botones individuales */
    border-radius: 6px;
  }
}