/* Variables CSS para el fondo estático - Principio de Dependency Inversion */
:root {
  --bg-base-dark: #0a0a0a;
  --bg-secondary-dark: #0f0f1e;
  --gradient-purple: rgba(169, 96, 238, 0.2);
  --gradient-blue: rgba(22, 33, 62, 0.25);
  --gradient-red: rgba(255, 107, 107, 0.15);
  --gradient-teal: rgba(78, 205, 196, 0.18);
}

/* Clase para fondo estático - Single Responsibility Principle */
.static-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  /* Múltiples capas de gradientes radiales superpuestos */
  background-image: 
    radial-gradient(circle at 20% 30%, var(--gradient-purple) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--gradient-blue) 0%, transparent 45%),
    radial-gradient(circle at 60% 80%, var(--gradient-red) 0%, transparent 40%),
    radial-gradient(circle at 30% 70%, var(--gradient-teal) 0%, transparent 35%),
    radial-gradient(circle at 90% 90%, var(--gradient-purple) 0%, transparent 30%),
    linear-gradient(135deg, var(--bg-base-dark) 0%, var(--bg-secondary-dark) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Estilos generales del portfolio */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: transparent;
  color: black;
  position: relative;
}
/* Se le quita el scroll para los navegadores modernos */
body::-webkit-scrollbar{
    display: none;
}

/* margen para los titulos y color base */
h1, h2{
  margin-bottom: 10px;
  color: #ffffff;
}

h3{
  margin-bottom: 10px;
  color: #308cce;
}
/* color de los parrafos y separacion pequeña de los textos */
p {
  /* line-height: 1.6;da altura a los parrafos */
  color: #e0e0e0; /* Mejorado para contraste con fondo oscuro */
}

/* estilos base para las secciones, con responsive */
section {
  padding: 60px 20px;
  max-width: 1000px;
  margin: auto;
}

/* estilos para los textos resaltados */
.resaltado {
  color: #0a66c2;
  font-weight: bold;
}

/* estilos para el footer del portfolio */
.footer {
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}

.footer p {
  color: white;
}