/* ====================== VARIABLES Y ESTILOS BASE MEJORADOS ====================== */
/* 
 * Este bloque define todas las variables CSS personalizadas que se usarán en el diseño.
 * Las variables permiten consistencia y facilitan cambios globales.
 */
:root {
  /* PALETA PRINCIPAL */
  --primary-color: #3498db; /* Color azul principal para botones y elementos importantes */
  --primary-hover: #2980b9; /* Versión más oscura para estados hover/interacción */
  --secondary-color: #3498db;      /* Azul secundario */
  --secondary-hover: #2980b9;      /* Azul secundario hover */
  --accent-color: #e74c3c;         /* Rojo acento */
  --accent-hover: #c0392b;         /* Rojo acento hover */
  
  /* FONDOS */
  --dark-color: #9fc1e2;           /* Azul claro fondo */
  --darker-color: #1a252f;         /* Azul oscuro cabeceras */
  --light-color: #ecf0f1;          /* Gris claro */
  --lighter-color: #f8f9fa;        /* Gris muy claro */
  
  /* TEXTOS */
  --text-dark: #2d3436;            /* Texto oscuro */
  --text-medium: #636e72;          /* Texto medio */
  --text-light: #f5f6fa;           /* Texto claro */
  
  /* COLOR FIJO PARA TÍTULOS DEL MAIN (no cambia en modo oscuro) */
  --main-title-color:#9fc1e2 ;     /* Azul para títulos del main */
  
  /* SOMBRAS */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  
  /* TRANSICIONES */
  --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --border-radius: 12px;
}

/* ====================== RESET Y ESTILOS BASE ====================== */
/*
 * Reset básico para eliminar estilos por defecto del navegador
 * y establecer una base consistente para todos los elementos
 */
* {
  margin: 0;                      /* Elimina márgenes por defecto */
  padding: 0;                     /* Elimina padding por defecto */
  box-sizing: border-box;         /* Modelo de caja que incluye padding y border en el ancho/alto */
}

/*
 * Estilos base para el elemento html
 * Configuración fundamental para el documento
 */
html {
  scroll-behavior: smooth;        /* Desplazamiento suave al hacer scroll */
  font-size: 16px;                /* Tamaño base de fuente para cálculos con rem */
}

/*
 * Estilos base para el cuerpo del documento
 * Define la tipografía, colores y estructura principal
 */
body {
  /* Stack de fuentes con fallbacks para máxima compatibilidad */
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: var(--lighter-color); /* Color de fondo claro */
  color: var(--text-dark);        /* Color de texto oscuro */
  line-height: 1.7;               /* Interlineado amplio para mejor legibilidad */
  overflow-x: hidden;             /* Oculta el scroll horizontal */
  min-height: 100vh;              /* Altura mínima de la ventana visible */
  display: flex;                  /* Modelo de caja flexible */
  flex-direction: column;         /* Dirección de columna para el layout */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para cambios de color */
}

/* ====================== MODO OSCURO ====================== */
/*
 * Estilos específicos para cuando se activa el modo oscuro
 * Estos estilos sobrescriben los colores principales
 */
body.dark-mode {
  background-color: #121212;      /* Fondo oscuro */
  color: #e0e0e0;                 /* Texto claro */
}

body.dark-mode header {
  background: linear-gradient(145deg, #121212, #1a1a1a); /* Gradiente oscuro para el encabezado */
}

body.dark-mode .footer {
  background: linear-gradient(145deg, #121212, #1a1a1a); /* Gradiente oscuro para el pie de página */
}

/* ====================== ENCABEZADO MEJORADO ====================== */
/*
 * Estilos para la sección de encabezado
 * Incluye el título principal y la navegación
 */
header {
  background: linear-gradient(145deg, var(--dark-color), var(--darker-color)); /* Gradiente azul */
  color: var(--text-light);       /* Texto claro */
  padding: 3rem 1rem;             /* Espaciado interno generoso */
  text-align: center;             /* Alineación de texto centrada */
  position: relative;             /* Posicionamiento relativo para elementos hijos */
  overflow: hidden;               /* Oculta contenido que sobresale */
  box-shadow: var(--shadow-md);   /* Sombra media */
  border-bottom: 3px solid var(--secondary-color); /* Borde inferior verde */
  display: flex;                  /* Modelo flexible */
  flex-direction: column;         /* Dirección de columna */
  align-items: center;            /* Centrado horizontal */
}

/* 
 * Pseudoelemento que crea una línea gradiente decorativa bajo el header
 * Esta línea usa un gradiente horizontal que va de azul (#3498db) a verde (#2ecc71)
 */
header::after {
  content: '';                    /* Contenido vacío necesario para pseudoelementos */
  position: absolute;             /* Posicionamiento absoluto respecto al header */
  bottom: 0;                      /* Alineado en la parte inferior del header */
  left: 0;                        /* Comienza desde el borde izquierdo */
  width: 100%;                    /* Ocupa todo el ancho del header */
  height: 3px;                    /* Grosor de la línea */
  background: linear-gradient(90deg, #3498db, #2ecc71); /* Gradiente horizontal azul a verde */
  background-size: 200% auto;      /* Tamaño del gradiente para permitir animación */
  z-index: 1;                     /* Se coloca por encima del fondo pero bajo el contenido */
 animation: gradientFlow 8s ease infinite alternate; /* Aplicamos la animación */  /* Degradado */
}

/* 
 * Animación para el efecto de flujo del gradiente
 * Crea un efecto dinámico que cambia la posición del gradiente
 */
@keyframes gradientFlow {
  0% {
    background-position: left;    /* Posición inicial del gradiente a la izquierda */
  }
  50% {
    background-position: center;  /* Posición intermedia del gradiente al centro */
    }
  100% {
    background-position: right;   /* Posición final del gradiente a la derecha */
  }
}

/*
 * Pseudoelemento para efecto visual en el encabezado
 * Crea un efecto de partículas animadas
 */
header::before {
  content: '';                    /* Contenido vacío */
  position: absolute;             /* Posicionamiento absoluto */
  top: -50%;                      /* Posición desde arriba */
  left: -50%;                     /* Posición desde la izquierda */
  width: 200%;                    /* Ancho ampliado */
  height: 200%;                   /* Alto ampliado */
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); /* Gradiente radial */
  animation: pulse 15s infinite linear; /* Animación continua */
}

/*
 * Animación de rotación para el efecto del encabezado
 * Gira el pseudoelemento para crear movimiento
 */
@keyframes pulse {
  0% { transform: rotate(0deg); }   /* Estado inicial */
  100% { transform: rotate(360deg); } /* Rotación completa */
}

/*
 * Estilos para el título principal
 * Diseño responsive con efecto de gradiente de texto
 */
header h1 {
  position: relative;             /* Para manejar z-index */
  z-index: 2;                     /* Asegura que esté sobre el efecto de partículas */
  margin: 0 auto 1rem;            /* Centrado con margen inferior */
  font-size: clamp(2.5rem, 5vw, 3.5rem); /* Tamaño responsive con mínimo y máximo */
  font-weight: 800;               /* Grosor extra-negrita */
  letter-spacing: -0.03em;        /* Letras ligeramente unidas */
  /* Efecto de texto con gradiente */
  background: linear-gradient(90deg, var(--text-light), #dfe6e9);
  -webkit-background-clip: text;  /* Compatibilidad con Safari */
  background-clip: text;          /* Recorta fondo al texto */
  color: transparent;             /* Hace visible el gradiente */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
  line-height: 1.2;               /* Interlineado ajustado */
  max-width: 1200px;              /* Ancho máximo para pantallas grandes */
}

/* ====================== NAVEGACIÓN PRINCIPAL MEJORADA ====================== */
/*
 * Estilos para el menú de navegación principal
 * Contiene los enlaces a las diferentes secciones del sitio
 */
.menu_principal ul {
  list-style: none;               /* Elimina viñetas de lista */
  padding: 0;                     /* Sin relleno interno */
  display: flex;                   /* Disposición en línea */
  justify-content: center;         /* Centrado horizontal */
  gap: 2rem;                      /* Espacio entre elementos */
  position: relative;             /* Contexto de apilamiento */
  z-index: 2;                     /* Nivel superior */
  max-width: 1200px;              /* Ancho máximo */
  margin: 0 auto;                 /* Centrado automático */
  flex-wrap: wrap;                /* Permite que los elementos se ajusten en pantallas pequeñas */
}

/*
 * Estilos para los elementos del menú de navegación
 * Diseño de enlaces interactivos
 */
.menu_principal ul li a {
  color: var(--text-light);       /* Texto claro */
  text-decoration: none;          /* Sin subrayado */
  font-weight: bold;              /* Negrita */
  transition: var(--transition);  /* Transición suave */
  padding: 0.5rem 1rem;           /* Espaciado interno */
  border-radius: var(--border-radius); /* Esquinas redondeadas */
  background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
  backdrop-filter: blur(5px);     /* Efecto de desenfoque */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
}

/*
 * Efecto hover para los enlaces de navegación
 * Cambios visuales al interactuar
 */
.menu_principal ul li a:hover {
  background-color: var(--secondary-color); /* Fondo verde */
  transform: translateY(-2px);    /* Efecto de levitación */
  box-shadow: var(--shadow-sm);   /* Sombra pequeña */
  color: white;                   /* Color de texto blanco */
}

/*
 * Pseudoelemento para efecto de subrayado animado
 * Se expande al hacer hover
 */
.menu_principal ul li a::after {
  content: '';                    /* Contenido vacío */
  position: absolute;             /* Posicionamiento absoluto */
  bottom: -3px;                   /* Posición desde abajo */
  left: 50%;                      /* Centrado horizontal */
  transform: translateX(-50%);    /* Centrado preciso */
  width: 0;                       /* Ancho inicial cero */
  height: 2px;                    /* Altura del subrayado */
  background: var(--secondary-color); /* Color verde */
  transition: var(--transition);  /* Transición suave */
}

.menu_principal ul li a:hover::after {
  width: 70%;                     /* Ancho al hacer hover */
}

/* Modo oscuro para los enlaces de navegación */
body.dark-mode .menu_principal ul li a {
  background-color: rgba(255, 255, 255, 0.05); /* Fondo más oscuro */
  color: rgba(255, 255, 255, 0.9); /* Color de texto */
}

body.dark-mode .menu_principal ul li a:hover {
  background-color: var(--secondary-hover); /* Fondo verde oscuro */
}

/* ====================== NAVEGACIÓN SECUNDARIA ====================== */
/*
 * Estilos para el menú de navegación secundario
 * Navegación entre secciones de la página actual
 */
/* ====================== NAVEGACIÓN SECUNDARIA ====================== */
/*
 * Estilos para el menú de navegación secundario
 * Navegación entre secciones de la página actual
 */
.menu_pagina {
  background-color: var(--light-color); /* Fondo gris claro */
  box-shadow: var(--shadow-sm);   /* Sombra ligera */
  padding: 1rem;                  /* Espaciado interno */
  margin: 1rem 2rem;              /* Margen externo */
  border-radius: var(--border-radius); /* Bordes redondeados */
}

.menu_pagina ul {
  list-style: none;               /* Sin viñetas */
  padding: 0;                     /* Sin relleno interno */
  display: flex;                  /* Disposición en línea */
  justify-content: space-around;  /* Distribución uniforme */
  gap: 1rem;                      /* Espacio entre elementos */
  flex-wrap: wrap;                /* Permite ajuste en pantallas pequeñas */
}

.menu_pagina ul li a {
  color: var(--primary-color);    /* Color azul (#3498db) */
  text-decoration: none;          /* Sin subrayado */
  font-weight: 500;               /* Peso de fuente medio */
  transition: var(--transition);  /* Transición suave */
  padding: 0.5rem 1rem;           /* Espaciado interno */
  border-radius: 50px;            /* Bordes muy redondeados */
}

.menu_pagina ul li a:hover {
  color: white;                   /* Texto blanco al hacer hover */
  background-color: var(--primary-hover); /* Azul más oscuro (#2980b9) */
}

/* Modo oscuro para navegación secundaria */
body.dark-mode .menu_pagina {
  background-color: #333;         /* Fondo gris oscuro */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Sombra oscura */
}

body.dark-mode .menu_pagina ul li a {
  color: var(--primary-color);    /* Mismo azul (#3498db) en modo oscuro */
}

body.dark-mode .menu_pagina ul li a:hover {
  color: white;                   /* Texto blanco al hacer hover */
  background-color: var(--primary-hover); /* Mismo azul oscuro (#2980b9) en modo oscuro */
}

/* ====================== CONTENIDO PRINCIPAL ====================== */
/*
 * Estilos para el contenido principal
 * Contenedor flexible que ocupa todo el espacio disponible
 */
main {
  flex: 1;                        /* Ocupa todo el espacio disponible */
  padding: 2rem 1rem;             /* Espaciado interno */
  max-width: 1200px;              /* Ancho máximo */
  margin: 0 auto;                 /* Centrado */
  width: 100%;                    /* Ancho completo */
}

/* ====================== SECCIÓN DE PERFIL ====================== */
/*
 * Estilos para la sección de perfil personal
 * Contiene un h1 de las iniciales y descripción breve
 * Versión optimizada con texto más grande pero ajustado al círculo
 */
.perfil {
  background-color: var(--light-color); /* Fondo gris claro */
  border-radius: var(--border-radius); /* Bordes redondeados */
  box-shadow: var(--shadow-md);   /* Sombra media */
  padding: 3rem 2rem;            /* Más espaciado vertical */
  text-align: center;             /* Centrado de contenido */
  margin: 2rem auto;             /* Margen superior e inferior, centrado horizontal */
  transition: var(--transition);  /* Transición suave */
  max-width: 800px;              /* Ancho máximo para mejor legibilidad */
  display: flex;                 /* Flexbox para mejor alineación */
  flex-direction: column;        /* Disposición en columna */
  align-items: center;          /* Centrado horizontal de elementos */
}

/*
 * Estilos para el texto principal del perfil (POP)
 * Texto más grande pero perfectamente contenido en el círculo
 */
.perfil-text {
  width: 180px;                  /* Tamaño ligeramente reducido para mejor proporción */
  height: 180px;                 /* Tamaño ligeramente reducido */
  border-radius: 50%;            /* Forma circular */
  border: 5px solid var(--primary-color); /* Borde azul */
  display: flex;                 /* Flexbox para centrado */
  justify-content: center;       /* Centrado horizontal */
  align-items: center;           /* Centrado vertical */
  margin-bottom: 2rem;           /* Margen inferior aumentado */
  box-shadow: var(--shadow-sm);  /* Sombra ligera */
  transition: var(--transition); /* Transición suave */
  font-size: 3.5rem;            /* Tamaño de fuente grande pero ajustado */
  font-weight: bold;            /* Texto en negrita */
  color: var(--primary-color);   /* Color del texto coincidente con el borde */
  background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil para mejor contraste */
  text-transform: uppercase;     /* Aseguramos mayúsculas */
  letter-spacing: 1px;          /* Pequeño espaciado entre letras */
}

/*
 * Efecto hover para el texto principal del perfil
 * Ligero zoom al interactuar (heredado de .perfil-imagen)
 */
.perfil-text:hover {
  transform: scale(1.05);        /* Ligero aumento de tamaño */
  box-shadow: var(--shadow-md);  /* Sombra más pronunciada */
}

/*
 * Estilos para el texto de perfil
 * Tipografía legible y espaciado adecuado
 * Texto descriptivo ligeramente más grande
 */
.perfil-texto {
  font-size: 1.25rem;           /* Tamaño de fuente aumentado pero equilibrado */
  color: var(--text-medium);     /* Color de texto gris */
  line-height: 1.8;              /* Interlineado amplio */
  max-width: 600px;              /* Ancho máximo para legibilidad */
  margin: 0 auto;                /* Centrado */
  padding: 0 1rem;               /* Pequeño padding lateral en móviles */
}

/* Modo oscuro para sección de perfil */
body.dark-mode .perfil {
  background-color: #333;        /* Fondo gris oscuro */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra oscura */
}

body.dark-mode .perfil-text {
  border-color: var(--secondary-color); /* Borde verde */
  color: var(--secondary-color); /* Texto verde en modo oscuro */
}

body.dark-mode .perfil-texto {
  color: #ccc;                   /* Texto gris claro */
}
/* ====================== SECCIONES DE CONTENIDO ====================== */
/*
 * Estilos base para todas las secciones de contenido
 * Diseño consistente para cada área temática
 */
.seccion {
  background-color: var(--light-color); /* Fondo gris claro */
  border-radius: var(--border-radius); /* Bordes redondeados */
  box-shadow: var(--shadow-md);   /* Sombra media */
  padding: 2rem;                  /* Espaciado interno */
  margin-bottom: 2rem;            /* Margen inferior */
  transition: var(--transition);  /* Transición suave */
}

/*
 * Estilos para los títulos de sección
 * Diseño con subrayado decorativo
 * Usamos la variable --main-title-color que no cambia en modo oscuro
 */
.seccion h2 {
  color: var(--main-title-color); /* Color azul fijo (no cambia en modo oscuro) */
  font-size: 2rem;                /* Tamaño grande */
  margin-bottom: 1.5rem;          /* Margen inferior */
  text-align: center;             /* Centrado */
  position: relative;             /* Para pseudo-elemento */
  padding-bottom: 0.5rem;         /* Espacio para subrayado */
  display: inline-block;          /* Ajuste al contenido */
}

/*
 * Subrayado decorativo para títulos de sección
 * Línea animada centrada
 */
.seccion h2::after {
  content: '';                    /* Requerido para pseudo-elementos */
  position: absolute;             /* Posicionamiento respecto al h2 */
  bottom: 0;                      /* Alineado abajo */
  left: 50%;                      /* Centrado horizontal */
  transform: translateX(-50%);    /* Centrado preciso */
  width: 60px;                    /* Ancho fijo */
  height: 3px;                    /* Altura del subrayado */
  background-color: var(--secondary-color); /* Color verde */
  transition: var(--transition);  /* Transición suave */
}

/*
 * Contenedor de imágenes responsive
 * Grid layout para galería de imágenes
 */
.imagenes-container {
  display: grid;                  /* Layout con CSS Grid */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Columnas que se ajustan automáticamente */
  gap: 1.5rem;                    /* Espacio entre imágenes */
  margin-bottom: 1.5rem;          /* Margen inferior */
}

/*
 * Estilos para imágenes dentro de secciones
 * Diseño consistente y efectos de hover
 */
.seccion-imagen {
  width: 100%;                    /* Ancho completo del contenedor */
  height: 180px;                  /* Altura fija */
  object-fit: cover;              /* Ajuste de imagen */
  border-radius: 8px;             /* Bordes ligeramente redondeados */
  box-shadow: var(--shadow-sm);   /* Sombra ligera */
  transition: var(--transition);  /* Animación de transformación */
}

/*
 * Efecto hover para imágenes
 * Zoom sutil y sombra más pronunciada
 */
.seccion-imagen:hover {
  transform: scale(1.05);         /* Ligero zoom */
  box-shadow: var(--shadow-md);   /* Sombra media */
}

/*
 * Texto dentro de secciones
 * Tipografía legible y jerarquía visual
 */
.seccion-texto {
  font-size: 1rem;                /* Tamaño estándar */
  color: var(--text-dark);        /* Color oscuro */
  line-height: 1.7;               /* Interlineado amplio */
  margin-bottom: 1rem;            /* Margen inferior */
}

/*
 * Texto enfatizado
 * Destaca información importante
 */
.seccion-texto strong {
  color: var(--secondary-color);  /* Color verde */
  font-weight: bold;              /* Negrita */
}

/* Modo oscuro para secciones de contenido */
body.dark-mode .seccion {
  background-color: #333;         /* Fondo gris oscuro */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra oscura */
}

/* NOTA: Eliminamos el cambio de color para h2 en modo oscuro para mantener el color azul */
body.dark-mode .seccion h2::after {
  background-color: #3498db;     /* Azul más oscuro */
}

body.dark-mode .seccion-texto {
  color: #ccc;                   /* Texto gris claro */
}

body.dark-mode .seccion-texto strong {
  color: #3498db;                /* Azul oscuro */
}

/* ====================== BARRA LATERAL (ASIDE) ====================== */
/*
 * Estilos para la barra lateral
 * Contiene información adicional o complementaria
 */
aside {
  background-color: var(--light-color); /* Fondo gris claro */
  border-radius: var(--border-radius); /* Bordes redondeados */
  box-shadow: var(--shadow-md);   /* Sombra media */
  padding: 1.5rem;                /* Espaciado interno */
  margin: 1rem 2rem;              /* Margen externo */
  text-align: center;             /* Centrado de contenido */
  transition: var(--transition);  /* Transición suave */
}

/*
 * Título de la barra lateral
 * Color de acento para destacar
 */
aside h3 {
  color: var(--accent-color);     /* Color rojo */
  font-size: 1.5rem;              /* Tamaño aumentado */
  margin-bottom: 1rem;            /* Margen inferior */
}

/*
 * Texto de la barra lateral
 * Tamaño ligeramente reducido
 */
aside p {
  color: var(--text-medium);      /* Texto gris */
  font-size: 0.9rem;              /* Tamaño ligeramente reducido */
}

/* Modo oscuro para barra lateral */
body.dark-mode aside {
  background-color: #333;         /* Fondo gris oscuro */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Sombra oscura */
}

body.dark-mode aside h3 {
  color: #e76f51;                /* Naranja rojizo */
}

body.dark-mode aside p {
  color: #ccc;                   /* Texto gris claro */
}

/* ====================== PIE DE PÁGINA PREMIUM ====================== */
/*
 * Estilos para el pie de página
 * Diseño en grid con múltiples columnas
 */
.footer {
  /* Degradado similar al header */
  background: linear-gradient(145deg, var(--dark-color), var(--darker-color));
  color: var(--text-light);       /* Texto claro */
  padding: 4rem 0 2rem;           /* Espaciado interno */
  position: relative;             /* Para pseudo-elemento */
  width: 100%;                    /* Ancho completo */
  box-sizing: border-box;         /* Modelo de caja consistente */
  margin-top: auto;               /* Empuja el footer al final */
  border-top: 3px solid var(--secondary-color); /* Borde superior verde */
}

/* 
 * Pseudoelemento que crea una línea gradiente decorativa encima del footer
 * Usa el mismo gradiente horizontal azul (#3498db) a verde (#2ecc71) que el header
 * pero colocada en la parte superior del footer en lugar de la inferior
 */
.footer::before {
  content: '';                    /* Contenido vacío necesario para pseudoelementos */
  position: absolute;             /* Posicionamiento absoluto respecto al footer */
  top: 0;                         /* Alineado en la parte superior del footer */
  left: 0;                        /* Comienza desde el borde izquierdo */
  width: 100%;                    /* Ocupa todo el ancho del footer */
  height: 3px;                    /* Grosor de la línea (igual que en el header) */
  background: linear-gradient(90deg, #3498db, #2ecc71); /* Mismo gradiente azul-verde */
  background-size: 200% auto;      /* Tamaño extendido para la animación */
  z-index: 1;                     /* Mismo nivel de apilamiento que en el header */
  animation: gradientFlow 8s ease infinite alternate; /* Aplicamos la animación */  /* Degradado */
}

/*
 * Grid para organización del footer
 * Diseño responsive con columnas flexibles
 */
.footer__grid {
  display: grid;                  /* Layout con CSS Grid */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas responsive */
  gap: 3rem;                      /* Espacio entre columnas */
  max-width: 1200px;              /* Ancho máximo */
  margin: 0 auto;                 /* Centrado */
  padding: 0 2rem;                /* Espaciado lateral */
}

/*
 * Estilos para cada columna del footer
 * Diseño consistente para todas las secciones
 */
.footer__col {
  padding: 0 1rem;                /* Espaciado interno */
}

/*
 * Títulos de columnas del footer
 * Con subrayado decorativo
 */
.footer__col h4 {
  font-size: 1.3rem;              /* Tamaño aumentado */
  margin-bottom: 1.5rem;          /* Margen inferior */
  position: relative;             /* Para pseudo-elemento */
  display: inline-block;          /* Ajuste al contenido */
}

/*
 * Subrayado decorativo para títulos de columnas
 * Línea corta con color primario
 */
.footer__col h4::after {
  content: '';                    /* Requerido para pseudo-elementos */
  position: absolute;             /* Posicionamiento respecto al h4 */
  bottom: -8px;                   /* Posicionamiento bajo el texto */
  left: 0;                        /* Alineado a la izquierda */
  width: 40px;                    /* Ancho fijo */
  height: 3px;                    /* Altura delgada */
  background: var(--primary-color); /* Color azul */
}

/*
 * Lista de enlaces del footer
 * Estilo limpio y espaciado adecuado
 */
.footer__links {
  list-style: none;               /* Sin viñetas */
}

/*
 * Elementos individuales de la lista del footer
 * Margen inferior para separación
 */
.footer__link {
  margin-bottom: 0.8rem;          /* Espacio entre elementos */
}

/*
 * Estilos para enlaces del footer
 * Diseño interactivo con transición
 */
.footer__link a {
  color: rgba(255, 255, 255, 0.8); /* Texto semi-transparente */
  text-decoration: none;          /* Sin subrayado */
  transition: var(--transition);  /* Transición suave */
  display: flex;                  /* Flexbox para alinear icono y texto */
  align-items: center;            /* Centrado vertical */
  gap: 0.8rem;                    /* Espacio entre icono y texto */
}

/*
 * Efecto hover para enlaces del footer
 * Desplazamiento horizontal y cambio de color
 */
.footer__link a:hover {
  color: var(--text-light);       /* Texto completamente blanco */
  transform: translateX(5px);     /* Desplazamiento horizontal */
}

/*
 * Iconos dentro de enlaces del footer
 * Tamaño y alineación consistente
 */
.footer__link i {
  width: 20px;                    /* Ancho fijo */
  text-align: center;             /* Centrado de icono */
}

/*
 * Contenedor de redes sociales
 * Diseño en línea con espacio uniforme
 */
.footer__social {
  display: flex;                  /* Disposición en línea */
  gap: 1rem;                      /* Espacio entre iconos */
  margin-top: 1.5rem;             /* Margen superior */
  flex-wrap: wrap;                /* Ajuste en pantallas pequeñas */
}

/*
 * Enlaces de redes sociales
 * Diseño circular con efectos de hover
 */
.footer__social-link {
  display: flex;                  /* Flexbox para centrado */
  align-items: center;            /* Centrado vertical */
  justify-content: center;        /* Centrado horizontal */
  width: 40px;                    /* Tamaño fijo */
  height: 40px;                   /* Tamaño fijo */
  border-radius: 50%;             /* Forma circular */
  background-color: rgba(255, 255, 255, 0.1); /* Fondo semi-transparente */
  color: var(--text-light);       /* Icono blanco */
  transition: var(--transition);  /* Transición suave */
  font-size: 1.2rem;              /* Tamaño de icono */
}

/*
 * Efecto hover para redes sociales
 * Cambio de color y efecto de levitación
 */
.footer__social-link:hover {
  background-color: var(--secondary-color); /* Fondo verde */
  transform: translateY(-3px);    /* Efecto de levitación */
}

/*
 * Estilo especial para icono de Infojobs
 * Texto en lugar de icono
 */
.icon-infojobs {
  font-style: normal;             /* Sin cursiva */
  font-weight: bold;              /* Negrita */
  font-size: 0.9rem;              /* Tamaño reducido */
}

/*
 * Sección inferior del footer
 * Información de copyright y derechos
 */
.footer__bottom {
  text-align: center;             /* Centrado */
  padding-top: 3rem;              /* Espaciado superior */
  margin-top: 3rem;               /* Margen superior */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
  color: rgba(255, 255, 255, 0.7); /* Texto semi-transparente */
  font-size: 0.9rem;              /* Tamaño reducido */
}

/* ====================== BOTÓN DE MODO OSCURO ====================== */
/*
 * Estilos para el botón de alternar modo oscuro/claro
 * Diseño circular flotante
 */
#dark-mode-toggle {
  position: absolute;                /* Posicionamiento Absolute */
  top: 1.5rem;                    /* Distancia desde arriba */
  right: 1.5rem;                  /* Distancia desde derecha */
  background-color: var(--primary-color); /* Fondo azul */
  color: white;                   /* Icono blanco */
  border: none;                   /* Sin borde */
  width: 40px;                    /* Tamaño fijo */
  height: 40px;                   /* Tamaño fijo */
  border-radius: 50%;             /* Forma circular */
  cursor: pointer;                /* Cursor tipo pointer */
  font-size: 1.2rem;              /* Tamaño de icono */
  display: flex;                  /* Flexbox para centrado */
  justify-content: center;        /* Centrado horizontal */
  align-items: center;            /* Centrado vertical */
  transition: var(--transition);  /* Transición suave */
  box-shadow: var(--shadow-md);   /* Sombra media */
  z-index: 100;                   /* Capa superior */
}

/*
 * Efecto hover para el botón de modo oscuro
 * Escalado y rotación sutil
 */
#dark-mode-toggle:hover {
  background-color: var(--primary-hover); /* Azul más oscuro */
  transform: scale(1.1) rotate(30deg); /* Escalado y rotación */
}

/* Modo oscuro para el botón */
body.dark-mode #dark-mode-toggle {
  background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
  color: var(--text-light);       /* Color de texto claro */
}

/* ====================== TRADUCTOR DE GOOGLE ====================== */
/*
 * Contenedor del widget de Google Translate
 * Posicionamiento flotante
 */
#google_translate_element {
  display: inline-block;          /* Display en línea */
  vertical-align: middle;         /* Alineación vertical */
  position: absolute;                /* Posicionamiento absolute */
  top: 1.5rem;                    /* Distancia desde arriba */
  right: 5rem;                    /* Distancia desde derecha */
  z-index: 100;                   /* Capa superior */
}

/*
 * Oculta texto del gadget de Google
 * Solo queremos mostrar nuestro diseño personalizado
 */
.goog-te-gadget {
  color: transparent !important;  /* Texto transparente */
  font-size: 0 !important;        /* Tamaño de fuente cero */
}

/*
 * Estiliza el contenedor del selector de idiomas
 * Diseño consistente con el tema
 */
.goog-te-gadget-simple {
  background-color: var(--secondary-color) !important; /* Fondo verde */
  border: none !important;        /* Sin borde */
  padding: 6px 10px !important;   /* Espaciado interno */
  border-radius: 50px !important; /* Bordes muy redondeados */
  height: auto !important;        /* Altura automática */
  display: flex !important;       /* Flexbox para alineación */
  align-items: center !important; /* Centrado vertical */
  transition: var(--transition) !important; /* Transición suave */
  color: white !important;        /* Texto blanco */
  cursor: pointer;                /* Cursor tipo pointer */
  box-shadow: var(--shadow-sm);   /* Sombra pequeña */
}

/*
 * Efecto hover para el selector de idiomas
 * Cambio de color y efecto de levitación
 */
.goog-te-gadget-simple:hover {
  background-color: var(--secondary-hover) !important; /* Verde más oscuro */
  transform: translateY(-2px);    /* Efecto de levitación */
  box-shadow: var(--shadow-md);   /* Sombra media */
}

/*
 * Oculta elementos no deseados del widget
 * Solo queremos mostrar nuestro diseño personalizado
 */
.goog-te-gadget-icon,
.goog-te-gadget-simple img,
.goog-te-gadget-simple span,
.goog-te-menu-value span:first-child {
  display: none !important;       /* Elimina elementos */
}

/*
 * Añade emoji personalizado como indicador de idioma
 * Reemplaza el diseño por defecto
 */
.goog-te-gadget-simple:after {
  content: "🌐" !important;        /* Emoji de globo */
  color: var(--text-light) !important; /* Color claro */
  font-family: 'Poppins', sans-serif !important; /* Fuente consistente */
  font-size: 0.9rem !important;    /* Tamaño adecuado */
  font-weight: 500 !important;     /* Peso medio */
}

/*
 * Estiliza el menú desplegable del traductor
 * Diseño consistente con sombra y bordes redondeados
 */
.goog-te-menu-frame {
  box-shadow: var(--shadow-md) !important; /* Sombra media */
  border-radius: var(--border-radius) !important; /* Bordes redondeados */
  margin-top: 10px !important;    /* Espacio superior */
  border: none !important;        /* Sin borde */
}

/*
 * Modo oscuro para el traductor
 * Ajustes de color para el tema oscuro
 */
body.dark-mode .goog-te-gadget-simple {
  background-color: rgba(255, 255, 255, 0.1) !important; /* Fondo semitransparente */
  border-color: rgba(255, 255, 255, 0.1) !important; /* Borde semitransparente */
}

body.dark-mode .goog-te-gadget-simple:after {
  color: var(--text-light) !important; /* Color de texto claro */
}

/* ====================== MEDIA QUERIES ====================== */
/*
 * Consultas de medios para diseño responsivo
 * Ajustes para diferentes tamaños de pantalla
 */

/* Tablets y móviles grandes (<= 992px) */
@media (max-width: 992px) {
  /* Menú de página en columna */
  .menu_pagina ul {
    flex-direction: column;       /* Apilamiento vertical */
    align-items: center;          /* Centrado */
    gap: 0.5rem;                  /* Espacio reducido */
  }
  
  .menu_pagina ul li a {
    padding: 0.5rem;              /* Espaciado reducido */
    border-radius: var(--border-radius); /* Bordes redondeados */
  }
  
  /* Ajustes para el grid de imágenes */
  .imagenes-container {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Columnas más estrechas */
  }
}

/* Tablets pequeñas (<= 768px) */
@media (max-width: 768px) {
  /* Encabezado más compacto */
  header {
    padding: 2rem 1rem;           /* Espaciado reducido */
  }

  header h1 {
    font-size: 2.2rem;            /* Tamaño reducido */
  }

  /* Menú principal más compacto */
  .menu_principal ul {
    gap: 1rem;                    /* Espacio reducido */
  }

  .menu_principal ul li a {
    padding: 0.3rem 0.7rem;       /* Espaciado reducido */
    font-size: 0.9rem;            /* Tamaño reducido */
  }

  /* Menú de página más compacto */
  .menu_pagina {
    margin: 1rem;                 /* Margen reducido */
    padding: 0.75rem;             /* Espaciado reducido */
  }

  /* Secciones más compactas */
  .seccion {
    padding: 1.5rem;              /* Espaciado reducido */
    margin: 1rem;                 /* Margen reducido */
  }

  /* Imágenes más pequeñas */
  .imagenes-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Columnas más estrechas */
    gap: 0.75rem;                 /* Espacio reducido */
  }

  .seccion-imagen {
    height: 150px;                /* Altura reducida */
  }

  /* Barra lateral más compacta */
  aside {
    padding: 1rem;                /* Espaciado reducido */
    margin: 1rem;                 /* Margen reducido */
  }

  /* Botones flotantes más pequeños */
  #dark-mode-toggle {
    top: 1rem;                    /* Posición ajustada */
    right: 1rem;                  /* Posición ajustada */
    width: 32px;                  /* Tamaño reducido */
    height: 32px;                 /* Tamaño reducido */
    font-size: 1rem;              /* Tamaño reducido */
  }

  #google_translate_element {
    top: 1rem;                    /* Posición ajustada */
    right: 4rem;                  /* Posición ajustada */
  }

  .goog-te-gadget-simple {
    padding: 5px 8px !important;   /* Espaciado reducido */
  }

  .goog-te-gadget-simple:after {
    font-size: 0.8rem !important;  /* Tamaño reducido */
  }
}

/* Móviles (<= 576px) */
@media (max-width: 576px) {
  /* Encabezado más compacto */
  header h1 {
    font-size: 2rem;              /* Tamaño más pequeño */
  }

  /* Menú principal en columna */
  .menu_principal ul {
    flex-direction: column;       /* Apilamiento vertical */
    align-items: center;          /* Centrado */
    gap: 0.75rem;                 /* Espacio entre elementos */
  }

  .menu_principal ul li a {
    padding: 0.5rem 1rem;         /* Espaciado aumentado */
    font-size: 1rem;              /* Tamaño estándar */
    width: 100%;                  /* Ancho completo */
    text-align: center;           /* Centrado de texto */
    border-radius: 5px;           /* Bordes redondeados */
  }

  /* Menú de página en columna */
  .menu_pagina ul {
    flex-direction: column;       /* Apilamiento vertical */
    align-items: center;          /* Centrado */
    gap: 0.3rem;                  /* Espacio reducido */
  }

  .menu_pagina ul li a {
    padding: 0.5rem;              /* Espaciado estándar */
    font-size: 0.9rem;            /* Tamaño reducido */
    width: 100%;                  /* Ancho completo */
    text-align: center;           /* Centrado de texto */
    border-radius: 5px;           /* Bordes redondeados */
  }

  /* Perfil más compacto */
  .perfil {
    padding: 1.5rem;              /* Espaciado reducido */
  }

  .perfil-imagen {
    width: 120px;                 /* Tamaño reducido */
    height: 120px;                /* Tamaño reducido */
    margin-bottom: 1rem;          /* Margen reducido */
  }

  /* Secciones más compactas */
  .seccion h2 {
    font-size: 1.75rem;           /* Tamaño reducido */
    margin-bottom: 1rem;          /* Margen reducido */
  }

  .seccion h2::after {
    width: 40px;                  /* Ancho reducido */
  }

  .seccion-texto {
    font-size: 0.9rem;            /* Tamaño reducido */
  }

  /* Barra lateral más compacta */
  aside h3 {
    font-size: 1.3rem;            /* Tamaño reducido */
    margin-bottom: 0.75rem;       /* Margen reducido */
  }

  aside p {
    font-size: 0.8rem;            /* Tamaño reducido */
  }

  /* Botones flotantes más pequeños */
  #dark-mode-toggle {
    top: 0.75rem;                 /* Posición ajustada */
    right: 0.75rem;               /* Posición ajustada */
    width: 28px;                  /* Tamaño reducido */
    height: 28px;                 /* Tamaño reducido */
    font-size: 0.9rem;            /* Tamaño reducido */
  }

  #google_translate_element {
    top: 0.75rem;                 /* Posición ajustada */
    right: 3.5rem;                /* Posición ajustada */
  }

  .goog-te-gadget-simple {
    padding: 4px 7px !important;   /* Espaciado reducido */
  }

  .goog-te-gadget-simple:after {
    font-size: 0.7rem !important;  /* Tamaño reducido */
  }

  /* Footer más compacto */
  .footer {
    padding: 1.5rem 0 0.75rem;    /* Espaciado reducido */
  }

  .footer p {
    font-size: 0.8rem;            /* Tamaño reducido */
  }

  .footer h6 {
    font-size: 0.7rem;            /* Tamaño reducido */
  }
}

/* Pantallas muy pequeñas (<= 400px) */
@media (max-width: 400px) {
  /* Ajustes adicionales para pantallas muy pequeñas */
  .imagenes-container {
    grid-template-columns: 1fr;    /* Una sola columna */
  }
  
  .seccion-imagen {
    height: 200px;                /* Altura aumentada para mejor visualización */
  }
  
  /* Menú principal más compacto */
  .menu_principal ul li a {
    padding: 0.4rem 0.8rem;       /* Espaciado más ajustado */
    font-size: 0.85rem;           /* Fuente más pequeña */
  }
  
  /* Footer en una sola columna */
  .footer__grid {
    grid-template-columns: 1fr;    /* Una sola columna */
    gap: 1.5rem;                  /* Espacio reducido */
  }
  
  /* Botones flotantes más pequeños */
  #dark-mode-toggle {
    width: 26px;                  /* Tamaño más pequeño */
    height: 26px;                 /* Tamaño más pequeño */
    font-size: 0.8rem;            /* Icono más pequeño */
  }
  
  #google_translate_element {
    right: 3rem;                  /* Posición más ajustada */
  }
}