/* -------------------------------
   RESET BÁSICO
-------------------------------- */
* { /* Selector universal: afecta a todos los elementos */
  margin: 0; /* Elimina márgenes por defecto */
  padding: 0; /* Elimina rellenos por defecto */
  box-sizing: border-box; /* Hace que width/height incluyan padding y borde */
}

html, body { /* Aplica estilos tanto al html como al body */
  height: 100%; /* Hace que ocupen toda la altura de la ventana */
  font-family: -apple-system, BlinkMacSystemFont, Arial; /* Fuente base del sitio */
  line-height: 1.4; /* Altura entre líneas del texto */
  color: #111; /* Color principal del texto */
  background: #fafafa; /* Color de fondo de la página */
  padding-top: 60px; /* Altura de la cabecera */
}

/* -------------------------------
   CABECERA FIJA CON DEGRADADO
-------------------------------- */
.header { /* Selector de la cabecera */
  position: fixed; /* Fija la cabecera arriba aunque se haga scroll */
  top: 0; /* Pegada arriba */
  left: 0; /* Pegada a la izquierda */
  right: 0; /* Pegada a la derecha */
  height: 60px;  /* Altura de la cabecera (debe ser igual que padding-top) */
  background: linear-gradient(90deg, #0e128a 0%, #8f12b5 100%); /* Degradado horizontal azul → morado */
  color: #fff; /* Color del texto dentro de la cabecera */
  z-index: 1000; /* Hace que quede por encima del resto de elementos */
  border-bottom: 1px solid rgba(255,255,255,0.04); /* Línea inferior sutil */
}

/* Contenedor de cabecera */
.header .container { /* Contenedor interno de la cabecera */
  max-width: 1200px; /* Ancho máximo del contenido */
  margin: 0 auto; /* Centra horizontalmente */
  width: 100%; /* Ocupa todo el ancho disponible */
  padding: 0 16px; /* Espacio interior a izquierda y derecha */
  display: flex; /* Activa Flexbox */
  align-items: center; /* Centra verticalmente los elementos */
  justify-content: space-between; /* título a la izquierda, menú a la derecha */
}

/* -------------------------------
   LOGO / TÍTULO
-------------------------------- */
.site-title { /* Estilo del título del sitio */
  font-size: 2.0rem; /* Tamaño de letra */
  font-weight: 300; /* Grosor de la letra */
  font-family: Arial; /* Fuente del título */
  letter-spacing: 0.6px; /* Espacio entre letras */
  color: #fff; /* Color del texto */
  text-decoration: none; /* Quita subrayado de enlace */
  line-height: 60px; /* igual que altura de la cabecera */
}

/* -------------------------------
   MENÚ ESCRITORIO
-------------------------------- */
.nav { /* Contenedor del menú principal */
  display: flex;       /* fila horizontal */
  flex-direction: row; /* fuerza fila */
  gap: 24px;           /* espacio entre enlaces */
}

.nav a { /* Estilo de cada enlace del menú */
  display: inline-block; /* mantiene en línea */
  font-weight: 300; /* Grosor fino del texto */
  font-size: 0.95rem; /* Tamaño del texto */
  font-family: Arial, sans-serif; /* Fuente del menú */
  letter-spacing: 0.4px; /* Espacio entre letras */
  padding: 8px 6px; /* Espacio interior clicable */
  color: #fff; /* Color del texto */
  text-decoration: none; /* Quita subrayado */
  transition: color 0.18s ease; /* Animación suave al cambiar color */
}

.nav a:hover, /* Cuando pasas el ratón */
.nav a:focus { /* Cuando se selecciona con teclado */
  color: #f2b900; /* Color dorado */
  outline: none; /* Quita borde azul de enfoque */
}

.nav a.active { /* Enlace de la página activa */
  color: #f2b900; /* mismo color que hover */
  font-weight: 500; /* opcional: un poco más destacado */
}

/* -------------------------------
   MENÚ HAMBURGUESA (MÓVIL)
-------------------------------- */
.menu-toggle { /* Botón hamburguesa */
  display: none; /* Oculto en escritorio */
  background: none; /* Sin fondo */
  border: none; /* Sin borde */
  color: #fff; /* Color del icono */
  font-size: 1.35rem; /* Tamaño del icono */
  cursor: pointer; /* Cursor de mano */
}

.mobile-nav { /* Contenedor del menú móvil */
  display: none; /* Oculto por defecto */
  position: absolute; /* Posicionado respecto a la cabecera */
  top: 72px; /* Distancia desde arriba */
  left: 0; /* Pegado a la izquierda */
  right: 0; /* Pegado a la derecha */
  background: #000; /* Fondo negro */
  border-bottom: 1px solid rgba(255,255,255,0.04); /* Línea inferior */
  z-index: 999; /* Capa superior */
}

.mobile-nav a { /* Enlaces del menú móvil */
  display: block; /* Cada enlace ocupa una fila */
  padding: 12px 16px; /* Espacio interior */
  border-top: 1px solid rgba(255,255,255,0.03); /* Línea separadora */
  color: #fff; /* Color del texto */
  text-decoration: none; /* Quita subrayado */
  text-align: right;           /* texto alineado a la derecha */
}

.mobile-nav a:hover { /* Hover en menú móvil */
  color: #f2b900; /* Color dorado */
}

/* -------------------------------
   CONTENIDO GENERAL
-------------------------------- */
main { /* Contenedor principal del contenido */
  max-width: 1000px; /* Ancho máximo */
  margin: 2rem auto; /* Margen superior/inferior y centrado */
  padding: 0 16px; /* Espacio lateral */
}

.page-title { /* Títulos de página */
  margin-bottom: 0.75rem; /* Separación inferior */
  font-size: 1.6rem; /* Tamaño del título */
}

/* -------------------------------
   RESPONSIVE
-------------------------------- */
@media (max-width: 880px) { /* Estilos solo para pantallas pequeñas */
  .nav { display: none; }        /* oculta menú escritorio */
  .menu-toggle { display: block; } /* muestra botón hamburguesa */
  .mobile-nav.open { display: block; } /* menú móvil visible cuando toggle activo */
}