/*=============================== VARIABLES: =================================*/
/* Declaración de variables CSS personalizadas en el ámbito :root */
:root {
    /* Variables de color */
    --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: #2ecc71; /* Color verde para acciones secundarias */
    --secondary-hover: #27ae60; /* Versión hover del color secundario */
    --dark-color: #9fc1e2; /* Azul claro para fondos */
    --darker-color: #1a252f; /* Azul muy oscuro para cabeceras/pies */
    --light-color: #ecf0f1; /* Gris claro */
    --lighter-color: #f8f9fa; /* Gris muy claro para fondo principal */
    --accent-color: #e74c3c; /* Rojo para elementos destacados/importantes */
    --accent-hover: #c0392b; /* Versión hover del color de acento */
    --text-dark: #2d3436; /* Color de texto oscuro para fondos claros */
    --text-medium: #636e72; /* Color de texto medio */
    --text-light: #f5f6fa; /* Color de texto claro para fondos oscuros */
    
    /* Variables de sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra pequeña para elevación sutil */
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra media para elevación moderada */
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra grande para elevación pronunciada */
    
    /* Variables de transición y bordes */
    --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); /* Transición con efecto elástico */
    --border-radius: 12px; /* Radio de borde estándar para esquinas redondeadas */
    
    /* Variables de animación */
    --header-animation-duration: 15s; /* Duración de la animación del encabezado */
    --header-animation-opacity: 0.1; /* Opacidad del efecto del encabezado */
    --header-gradient-size: 200%; /* Tamaño del gradiente animado del encabezado */
}

/*=============================== RESET: =================================*/
/* Reset básico optimizado para todos los elementos */
*, *::before, *::after {
    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 */
}

/* Configuración base del elemento HTML */
html {
    scroll-behavior: smooth; /* Desplazamiento suave al hacer scroll */
    font-size: 16px; /* Tamaño base de fuente (1rem = 16px) */
}

/* Estilos base para el cuerpo del documento */
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /* Fuente principal con fallbacks */
    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 */
}

/* ====================== HEADER ====================== */
/* Estilos para la sección de encabezado */
.header {
    background: linear-gradient(145deg, var(--dark-color), var(--darker-color)); /* Gradiente azul */
    color: var(--text-light); /* Texto claro */
    padding: 3rem 1rem; /* Espaciado interno (3rem arriba/abajo, 1rem izquierda/derecha) */
    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 */
    z-index: 1; /* Nivel de apilamiento */
    animation: fadeIn 0.8s ease-out forwards; /* Animación de entrada */
}

/* Pseudoelemento para efecto visual en el encabezado */
.header::before {
    content: ''; /* Contenido vacío */
    position: absolute; /* Posicionamiento absoluto */
    top: -50%; /* Posición desde arriba */
    left: -50%; /* Posición desde la izquierda */
    width: var(--header-gradient-size); /* Ancho basado en variable */
    height: var(--header-gradient-size); /* Alto basado en variable */
    background: radial-gradient(circle, rgba(255,255,255,var(--header-animation-opacity)) 0%, transparent 70%); /* Gradiente radial */
    animation: pulseHeader var(--header-animation-duration) infinite linear; /* Animación continua */
    will-change: transform; /* Optimización para animaciones */
    transform-origin: center center; /* Origen de transformación */
    pointer-events: none; /* Ignora eventos de ratón */
}

/* Contenedor del contenido del encabezado */
.header__content {
    position: relative; /* Posicionamiento relativo */
    z-index: 2; /* Nivel de apilamiento sobre el pseudoelemento */
    max-width: 1200px; /* Ancho máximo */
    margin: 0 auto; /* Centrado horizontal */
    isolation: isolate; /* Aislamiento para stacking context */
}

/* Título principal del encabezado */
.header__title {
    margin: 0; /* Elimina margen */
    font-size: clamp(2.5rem, 5vw, 3.5rem); /* Tamaño responsive (mín 2.5rem, preferido 5vw, máx 3.5rem) */
    font-weight: 800; /* Grosor de fuente extra-negrita */
    letter-spacing: -0.03em; /* Espaciado entre letras ligeramente reducido */
    background: linear-gradient(90deg, var(--text-light), #dfe6e9); /* Gradiente de texto */
    -webkit-background-clip: text; /* Compatibilidad con WebKit */
    background-clip: text; /* Recorte de fondo para texto */
    color: transparent; /* Texto transparente para mostrar gradiente */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Sombra de texto */
    line-height: 1.2; /* Interlineado */
    margin-bottom: 1rem; /* Margen inferior */
    transition: transform 0.5s ease-out; /* Transición suave para transformaciones */
}

/* Efecto hover para el título */
.header__title:hover {
    transform: scale(1.03); /* Escala ligeramente al hacer hover */
}

/* Subtítulo del encabezado */
.header__subtitle {
    font-size: 1.2rem; /* Tamaño de fuente */
    opacity: 0.9; /* Ligera transparencia */
    font-weight: 400; /* Grosor normal */
    max-width: 700px; /* Ancho máximo */
    margin: 0 auto; /* Centrado */
    transition: opacity 0.3s ease; /* Transición suave para opacidad */
}

/* Efecto hover para el subtítulo */
.header:hover .header__subtitle {
    opacity: 1; /* Opacidad completa al hacer hover en el encabezado */
}

/* ====================== NAVBAR ====================== */
/* Barra de navegación principal */
.navbar {
    background-color: rgba(44, 62, 80, 0.98); /* Azul oscuro semitransparente */
    padding: 1rem 2rem; /* Espaciado interno */
    position: static; /* Posicionamiento estático (podría ser sticky) */
    top: 0; /* Posición desde arriba */
    z-index: 1000; /* Alto nivel de apilamiento */
    backdrop-filter: blur(12px); /* Efecto de desenfoque */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil */
    box-shadow: var(--shadow-sm); /* Sombra pequeña */
    transition: var(--transition); /* Transición suave */
    animation: fadeIn 0.8s ease-out 0.2s forwards; /* Animación con retardo */
    opacity: 0; /* Inicialmente invisible */
}

/* Estado "scrolled" de la barra de navegación */
.navbar.scrolled {
    padding: 0.7rem 2rem; /* Espaciado reducido */
    background-color: rgba(33, 47, 61, 0.98); /* Fondo más oscuro */
}

/* Contenedor de la barra de navegación */
.navbar__container {
    display: flex; /* Modelo flexible */
    justify-content: space-between; /* Espacio entre elementos */
    align-items: center; /* Centrado vertical */
    flex-wrap: wrap; /* Permite envolver */
    max-width: 1400px; /* Ancho máximo */
    margin: 0 auto; /* Centrado */
}

/* Logo de la barra de navegación */
.navbar__logo {
    font-size: 1.5rem; /* Tamaño de fuente */
    font-weight: 700; /* Grosor negrita */
    color: var(--text-light); /* Color claro */
    text-decoration: none; /* Sin subrayado */
    display: flex; /* Modelo flexible */
    align-items: center; /* Centrado vertical */
    gap: 0.5rem; /* Espacio entre elementos */
    margin-right: auto; /* Empuja elementos a la derecha */
}

/* Icono del logo */
.navbar__logo-icon {
    font-size: 1.8rem; /* Tamaño de icono */
    color: var(--primary-color); /* Color primario */
}

/* Menú de navegación */
.navbar__menu {
    display: flex; /* Modelo flexible */
    gap: 1.5rem; /* Espacio entre elementos */
    list-style: none; /* Sin viñetas */
    margin: 0; /* Sin margen */
    padding: 0; /* Sin padding */
    align-items: center; /* Centrado vertical */
}

/* Enlaces de navegación */
.navbar__link {
    color: var(--text-light); /* Color claro */
    text-decoration: none; /* Sin subrayado */
    font-weight: 600; /* Grosor seminegrita */
    font-size: 1rem; /* Tamaño de fuente */
    padding: 0.5rem 1rem; /* Espaciado interno */
    border-radius: 50px; /* Bordes redondeados */
    transition: var(--transition); /* Transición suave */
    position: relative; /* Contexto de posicionamiento */
    white-space: nowrap; /* Evita salto de línea */
}

/* Pseudoelemento para efecto de subrayado */
.navbar__link::before {
    content: ''; /* Contenido vacío */
    position: absolute; /* Posicionamiento absoluto */
    bottom: 0; /* Posición desde abajo */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Centrado preciso */
    width: 0; /* Ancho inicial cero */
    height: 2px; /* Altura del subrayado */
    background: #3498db; /* Color Azul */
    transition: var(--transition); /* Transición suave */
}

/* Efecto hover para enlaces de navegación */
.navbar__link:hover {
    color: #3498db; /* Color Azul */
}

/* Efecto hover para el pseudoelemento */
.navbar__link:hover::before {
    width: 70%; /* Ancho al hacer hover */
}

/* Botón de llamada a la acción (CTA) */
.navbar__cta {
    background-color: var(--primary-color); /* Fondo azul */
    color: white; /* Texto blanco */
    padding: 0.6rem 1.5rem; /* Espaciado interno */
    border-radius: 50px; /* Bordes redondeados */
    font-weight: 600; /* Grosor seminegrita */
    transition: var(--transition); /* Transición suave */
    border: 2px solid transparent; /* Borde transparente */
    text-decoration: none; /* Sin subrayado */
    white-space: nowrap; /* Evita salto de línea */
    display: inline-block; /* Modelo de caja inline-block */
}

/* Efecto hover para el CTA */
.navbar__cta:hover {
    background-color: transparent; /* Fondo transparente */
    color: var(--primary-color); /* Color azul */
    border-color: var(--primary-color); /* Borde azul */
    transform: translateY(-2px); /* Efecto de levitación */
}


/* Contenedor de controles (tema, móvil) */
.navbar__controls {
    display: flex; /* Modelo flexible */
    align-items: center; /* Centrado vertical */
    gap: 1.5rem; /* Espacio entre elementos */
}

/* Estilos específicos para el botón de descarga y traducción */
.navbar__cta, 
.translate-button {
    margin: 0 1.5rem; /* Añade margen horizontal a ambos lados */
}

/* Botones de tema y móvil */
.navbar__theme-toggle,
.navbar__mobile-toggle {
    background: none; /* Sin fondo */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
    color: var(--text-light); /* Color claro */
    width: 40px; /* Ancho fijo */
    height: 40px; /* Alto fijo */
    border-radius: 50%; /* Forma circular */
    display: flex; /* Modelo flexible */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    cursor: pointer; /* Cursor pointer */
    transition: var(--transition); /* Transición suave */
}

/* Efecto hover para botones de controles */
.navbar__theme-toggle:hover,
.navbar__mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
}

/* Botón de menú móvil (oculto por defecto) */
.navbar__mobile-toggle {
    display: none; /* Oculto inicialmente */
}

/* ====================== NAVBAR ====================== */

/* Estilos para el botón de descarga del CV */
#download-cv {
    position: relative; /* Necesario para la animación */
    overflow: hidden; /* Oculta el pseudo-elemento que se desborda */
}

/* Animación del icono de descarga */
#download-cv i.fas.fa-download {
    margin-right: 10px; /* Separación entre el icono y el texto */
    transition: all 0.3s ease; /* Transición suave para la animación */
    display: inline-block; /* Permite transformaciones */
}

/* Efecto hover para el icono */
#download-cv:hover i.fas.fa-download {
    animation: downloadBounce 0.5s ease infinite alternate; /* Animación de rebote */
}

/* Animación de rebote para el icono */
@keyframes downloadBounce {
    0% {
        transform: translateY(0); /* Posición inicial */
    }
    100% {
        transform: translateY(-5px); /* Se mueve hacia arriba */
    }
}

/* Efecto de pulso cuando no está en hover */
#download-cv i.fas.fa-download {
    animation: downloadPulse 2s ease infinite; /* Animación de pulso suave */
}

/* Animación de pulso */
@keyframes downloadPulse {
    0% {
        transform: scale(1); /* Tamaño normal */
    }
    50% {
        transform: scale(1.1); /* Ligeramente más grande */
    }
    100% {
        transform: scale(1); /* Vuelve al tamaño normal */
    }
}

/* Desactiva la animación de pulso al hacer hover */
#download-cv:hover i.fas.fa-download {
    animation: downloadBounce 0.5s ease infinite alternate, none; /* Solo mantiene el rebote */
}

/* ====================== MAIN CONTENT ====================== */
/* Contenido principal de la página */
.main {
    flex: 1; /* Ocupa espacio disponible */
    padding: 4rem 1rem; /* Espaciado interno */
    max-width: 1400px; /* Ancho máximo */
    margin: 0 auto; /* Centrado */
    width: 100%; /* Ancho completo */
}

/* Estilos para títulos de sección */
.section-title {
    text-align: center; /* Texto centrado */
    margin-bottom: 3rem; /* Margen inferior */
    position: relative; /* Contexto de posicionamiento */
}

/* Título de sección */
.section-title h2 {
    font-size: 2.2rem; /* Tamaño de fuente */
    color: var(--dark-color); /* Color azul claro */
    display: inline-block; /* Modelo de caja inline-block */
    position: relative; /* Contexto de posicionamiento */
}

/* Pseudoelemento decorativo para títulos de sección */
.section-title h2::after {
    content: ''; /* Contenido vacío */
    position: absolute; /* Posicionamiento absoluto */
    bottom: -10px; /* Posición desde abajo */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Centrado preciso */
    width: 60px; /* Ancho fijo */
    height: 4px; /* Altura fija */
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); /* Gradiente */
    border-radius: 2px; /* Bordes redondeados */
}

/* Contenedor genérico */
.container {
    display: grid; /* Modelo grid */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
    gap: 20px; /* Espacio entre elementos */
    padding: 20px; /* Espaciado interno */
    width: 100%; /* Ancho completo */
    box-sizing: border-box; /* Modelo de caja */
}

/* Grid de proyectos */
.projects-grid {
    display: grid; /* Modelo grid */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Columnas responsivas */
    gap: 2.5rem; /* Espacio entre elementos */
    animation: fadeIn 0.8s ease-out 0.4s forwards; /* Animación con retardo */
    opacity: 0; /* Inicialmente invisible */
}

/* Tarjeta de proyecto */
.project-card {
    background: white; /* Fondo blanco */
    border-radius: var(--border-radius); /* Bordes redondeados */
    overflow: hidden; /* Oculta desbordamiento */
    box-shadow: var(--shadow-md); /* Sombra media */
    transition: var(--transition); /* Transición suave */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Borde sutil */
    position: relative; /* Contexto de posicionamiento */
}

/* Efecto hover para tarjetas de proyecto */
.project-card:hover {
    transform: translateY(-10px); /* Efecto de levitación */
    box-shadow: var(--shadow-lg); /* Sombra más pronunciada */
}

/* Badge/etiqueta de proyecto */
.project-card__badge {
    position: absolute; /* Posicionamiento absoluto */
    top: 1rem; /* Posición desde arriba */
    right: 1rem; /* Posición desde derecha */
    background-color: var(--accent-color); /* Fondo rojo */
    color: white; /* Texto blanco */
    padding: 0.4rem 1rem; /* Espaciado interno */
    border-radius: 50px; /* Bordes redondeados */
    font-size: 0.8rem; /* Tamaño de fuente */
    font-weight: 700; /* Grosor negrita */
    z-index: 2; /* Nivel de apilamiento */
    text-transform: uppercase; /* Texto en mayúsculas */
    letter-spacing: 0.5px; /* Espaciado entre letras */
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3); /* Sombra */
    animation: pulse 2s infinite; /* Animación de pulso */
}

/* Ocultar badge si está vacío */
.project-card__badge:empty {
    display: none; /* No mostrar */
}

/* Imagen de proyecto */
.project-card__image {
    width: 100%; /* Ancho completo */
    height: 220px; /* Altura fija */
    object-fit: cover; /* Ajuste de imagen */
    display: block; /* Modelo de bloque */
}

/* Contenido de la tarjeta de proyecto */
.project-card__content {
    padding: 1.5rem; /* Espaciado interno */
}

/* Título del proyecto */
.project-card__title {
    color: var(--dark-color); /* Color azul claro */
    margin-bottom: 0.5rem; /* Margen inferior */
    font-size: 1.4rem; /* Tamaño de fuente */
}

/* Descripción del proyecto */
.project-card__description {
    color: var(--text-medium); /* Color de texto medio */
    margin-bottom: 1.5rem; /* Margen inferior */
    line-height: 1.6; /* Interlineado */
}

/* Contenedor de etiquetas/tags */
.project-card__tags {
    display: flex; /* Modelo flexible */
    flex-wrap: wrap; /* Permite envolver */
    gap: 0.5rem; /* Espacio entre elementos */
    margin-bottom: 1.5rem; /* Margen inferior */
}

/* Etiquetas/tags individuales */
.project-card__tag {
    background-color: var(--light-color); /* Fondo gris claro */
    color: var(--dark-color); /* Color azul claro */
    padding: 0.3rem 0.8rem; /* Espaciado interno */
    border-radius: 50px; /* Bordes redondeados */
    font-size: 0.8rem; /* Tamaño de fuente */
    font-weight: 500; /* Grosor medio */
}

/* Enlaces de proyecto */
.project-card__links {
  display: flex; /* Modelo flexible */
  flex-wrap: wrap; /* Permite envolver */
  gap: 0.5rem; /* Espacio entre elementos */
  justify-content: center; /* Centrado horizontal */
  margin-top: 1rem; /* Margen superior */
}

/* Estilos para enlaces dentro de project-card__links */
.project-card__links a {
  flex: 1 1 45%; /* Flexibilidad con base del 45% */
  min-width: 120px; /* Ancho mínimo */
  text-align: center; /* Texto centrado */
}

/* ====================== BOXES ====================== */
/* Cajas genéricas */
.box {
    background-color: white; /* Fondo blanco */
    border: 1px solid #ddd; /* Borde gris */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    padding: 20px; /* Espaciado interno */
    text-align: center; /* Texto centrado */
    transition: all 0.3s ease; /* Transición suave */
    overflow: hidden; /* Oculta desbordamiento */
}

/* Efecto hover para cajas */
.box:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* Imágenes dentro de cajas */
.box img {
    width: 100%; /* Ancho completo */
    height: 200px; /* Altura fija */
    object-fit: cover; /* Ajuste de imagen */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
    transition: transform 0.3s ease; /* Transición suave */
    margin-bottom: 15px; /* Margen inferior */
}

/* ====================== BUTTONS ====================== */
/* Estilos base para botones */
.btn {
    display: inline-flex; /* Modelo flexible inline */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    gap: 0.5rem; /* Espacio entre elementos */
    padding: 0.8rem 1.8rem; /* Espaciado interno */
    font-weight: 600; /* Grosor seminegrita */
    border-radius: 50px; /* Bordes redondeados */
    text-decoration: none; /* Sin subrayado */
    transition: var(--transition); /* Transición suave */
    border: 2px solid transparent; /* Borde transparente */
    cursor: pointer; /* Cursor pointer */
    font-family: 'Poppins', sans-serif; /* Fuente */
}

/* Variante primaria de botón */
.btn--primary {
    background-color: var(--primary-color); /* Fondo azul */
    color: white; /* Texto blanco */
}

/* Efecto hover para botón primario */
.btn--primary:hover {
    background-color: var(--primary-hover); /* Fondo azul oscuro */
    transform: translateY(-3px); /* Efecto de levitación */
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4); /* Sombra azul */
}

/* Variante secundaria de botón */
.btn--secondary {
    background-color: var(--secondary-color); /* Fondo verde */
    color: white; /* Texto blanco */
}

/* Efecto hover para botón secundario */
.btn--secondary:hover {
    background-color: var(--secondary-hover); /* Fondo verde oscuro */
    transform: translateY(-3px); /* Efecto de levitación */
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4); /* Sombra verde */
}

/* Variante outline de botón */
.btn--outline {
    background-color: transparent; /* Fondo transparente */
    color: var(--primary-color); /* Texto azul */
    border-color: var(--primary-color); /* Borde azul */
}

/* Efecto hover para botón outline */
.btn--outline:hover {
    background-color: var(--primary-color); /* Fondo azul */
    color: white; /* Texto blanco */
    transform: translateY(-3px); /* Efecto de levitación */
}

/* ====================== FEATURED SECTION ====================== */
/* Sección destacada */
.featured {
    background: linear-gradient(145deg, #f8f9fa, #e9ecef); /* Gradiente claro */
    padding: 4rem 2rem; /* Espaciado interno */
    margin: 4rem 0; /* Margen vertical */
    border-radius: var(--border-radius); /* Bordes redondeados */
    text-align: center; /* Texto centrado */
    position: relative; /* Contexto de posicionamiento */
    overflow: hidden; /* Oculta desbordamiento */
}

/* Pseudoelemento decorativo superior */
.featured::before {
    content: ''; /* Contenido vacío */
    position: absolute; /* Posicionamiento absoluto */
    top: 0; /* Posición desde arriba */
    left: 0; /* Posición desde izquierda */
    width: 100%; /* Ancho completo */
    height: 5px; /* Altura pequeña */
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); /* Gradiente */
}

/* Contenido de la sección destacada */
.featured__content {
    max-width: 800px; /* Ancho máximo */
    margin: 0 auto; /* Centrado */
    position: relative; /* Contexto de posicionamiento */
    z-index: 2; /* Nivel de apilamiento */
}

/* Título de la sección destacada */
.featured__title {
    color: var(--dark-color); /* Color azul claro */
    font-size: 2rem; /* Tamaño de fuente */
    margin-bottom: 1.5rem; /* Margen inferior */
}

/* Texto de la sección destacada */
.featured__text {
    color: var(--text-medium); /* Color de texto medio */
    font-size: 1.1rem; /* Tamaño de fuente */
    line-height: 1.8; /* Interlineado */
    margin-bottom: 2rem; /* Margen inferior */
}

/* ====================== FOOTER ====================== */
/* Pie de página */
.footer {
    background: linear-gradient(145deg, var(--dark-color), var(--darker-color)); /* Gradiente azul */
    color: var(--text-light); /* Texto claro */
    padding: 4rem 0 2rem; /* Espaciado interno */
    position: relative; /* Contexto de posicionamiento */
    width: 100%; /* Ancho completo */
    box-sizing: border-box; /* Modelo de caja */
}

/* Pseudoelemento decorativo superior */
.footer::before {
    content: ''; /* Contenido vacío */
    position: absolute; /* Posicionamiento absoluto */
    top: 0; /* Posición desde arriba */
    left: 0; /* Posición desde izquierda */
    width: 100%; /* Ancho completo */
    height: 5px; /* Altura pequeña */
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); /* Gradiente */
     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 */
  }
}

/* Grid del pie de página */
.footer__grid {
    display: grid; /* Modelo grid */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas responsivas */
    gap: 3rem; /* Espacio entre elementos */
    max-width: 1200px; /* Ancho máximo */
    margin: 0 auto; /* Centrado */
    padding: 0 2rem; /* Espaciado interno */
}

/* Títulos de columnas del footer */
.footer__col h4 {
    font-size: 1.3rem; /* Tamaño de fuente */
    margin-bottom: 1.5rem; /* Margen inferior */
    position: relative; /* Contexto de posicionamiento */
    display: inline-block; /* Modelo inline-block */
}

/* Pseudoelemento decorativo para títulos de columnas */
.footer__col h4::after {
    content: ''; /* Contenido vacío */
    position: absolute; /* Posicionamiento absoluto */
    bottom: -8px; /* Posición desde abajo */
    left: 0; /* Posición desde izquierda */
    width: 40px; /* Ancho fijo */
    height: 3px; /* Altura fija */
    background: var(--primary-color); /* Color azul */
}

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

/* Elementos de la lista de enlaces */
.footer__link {
    margin-bottom: 0.8rem; /* Margen inferior */
}

/* Enlaces del footer */
.footer__link a {
    color: rgba(255, 255, 255, 0.8); /* Color semitransparente */
    text-decoration: none; /* Sin subrayado */
    transition: var(--transition); /* Transición suave */
    display: flex; /* Modelo flexible */
    align-items: center; /* Centrado vertical */
    gap: 0.8rem; /* Espacio entre elementos */
}

/* Efecto hover para enlaces del footer */
.footer__link a:hover {
    color: var(--text-light); /* Color claro */
    transform: translateX(5px); /* Efecto de desplazamiento */
}

/* Iconos dentro de enlaces */
.footer__link i {
    width: 20px; /* Ancho fijo */
    text-align: center; /* Texto centrado */
}

/* Redes sociales del footer */
.footer__social {
    display: flex; /* Modelo flexible */
    gap: 1rem; /* Espacio entre elementos */
    margin-top: 1.5rem; /* Margen superior */
    flex-wrap: wrap; /* Permite envolver */
}

/* Enlaces de redes sociales */
.footer__social-link {
    display: flex; /* Modelo flexible */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    width: 40px; /* Ancho fijo */
    height: 40px; /* Alto fijo */
    border-radius: 50%; /* Forma circular */
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
    color: var(--text-light); /* Color claro */
    transition: var(--transition); /* Transición suave */
    font-size: 1.2rem; /* Tamaño de fuente */
}

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

/* Sección inferior del footer */
.footer__bottom {
    text-align: center; /* Texto centrado */
    padding-top: 3rem; /* Espaciado superior */
    margin-top: 3rem; /* Margen superior */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Borde superior sutil */
    color: rgba(255, 255, 255, 0.7); /* Color semitransparente */
    font-size: 0.9rem; /* Tamaño de fuente pequeño */
}

/* ====================== DARK MODE ====================== */
/* Estilos para el modo oscuro */
body.dark-mode {
    background-color: #121212; /* Fondo oscuro */
    color: #e0e0e0; /* Texto claro */
}

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

/* Pseudoelemento del encabezado en modo oscuro */
body.dark-mode .header::before {
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%); /* Gradiente más sutil */
    animation-duration: calc(var(--header-animation-duration) * 1.2); /* Animación más lenta */
}

/* Footer en modo oscuro */
body.dark-mode .footer {
    background: linear-gradient(145deg, #121212, #1a1a1a); /* Gradiente oscuro */
}

/* ====================== THEME TOGGLE ====================== */
/* Botón de cambio de tema */
.theme-toggle {
    background-color: var(--primary-color); /* Fondo azul */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    width: 60px; /* Ancho fijo */
    height: 60px; /* Alto fijo */
    border-radius: 50%; /* Forma circular */
    cursor: pointer; /* Cursor pointer */
    font-size: 1.5rem; /* Tamaño de fuente */
    display: flex; /* Modelo flexible */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    transition: var(--transition); /* Transición suave */
    box-shadow: var(--shadow-md); /* Sombra media */
}

/* Efecto hover para el botón de tema */
.theme-toggle:hover {
    background-color: var(--primary-hover); /* Fondo azul oscuro */
    transform: scale(1.1) rotate(30deg); /* Efecto de escala y rotación */
}

/* ====================== GOOGLE TRANSLATE ====================== */
/* Contenedor del widget de Google Translate */
#google_translate_element {
    display: inline-block; /* Modelo inline-block */
    vertical-align: middle; /* Alineación vertical */
}

/* Estilos para el gadget de Google Translate */
.goog-te-gadget {
    color: transparent !important; /* Texto transparente */
    font-size: 0 !important; /* Tamaño de fuente cero */
}

/* Versión simple del gadget */
.goog-te-gadget-simple {
    background-color: transparent !important; /* Fondo transparente */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Borde sutil */
    padding: 8px 12px !important; /* Espaciado interno */
    border-radius: 20px !important; /* Bordes redondeados */
    height: auto !important; /* Altura automática */
    display: flex !important; /* Modelo flexible */
    align-items: center !important; /* Centrado vertical */
    transition: var(--transition) !important; /* Transición suave */
}

/* Al pasar el cursor sobre el traductor, cambia ligeramente el fondo */
.goog-te-gadget-simple:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Fondo semitransparente blanco */
}

/* Oculta la imagen y el texto predeterminado del botón del traductor */
.goog-te-gadget-simple img,
.goog-te-gadget-simple span {
    display: none !important; /* Oculta completamente */
}

/* Inserta el texto personalizado en el botón del traductor */
.goog-te-gadget-simple:after {
    content: "🌐 Traducir" !important; /* Texto con icono globe */
    color: var(--text-light) !important; /* Usa la variable personalizada para color */
    font-family: 'Poppins', sans-serif !important; /* Tipografía moderna */
    font-size: 0.9rem !important; /* Tamaño de fuente */
    font-weight: 500 !important; /* Peso medio */
}

/* Personalización del iframe del menú de Google Translate */
.goog-te-menu-frame {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; /* Sombra suave */
    border-radius: 12px !important; /* Bordes redondeados */
    margin-top: 10px !important; /* Separación superior */
    max-width: 200px !important; /* Máximo ancho */
    border: none !important; /* Sin borde */
}

/* Cambia el borde del botón del traductor en modo oscuro */
body.dark-mode .goog-te-gadget-simple {
    border-color: rgba(255, 255, 255, 0.1) !important; /* Borde tenue en blanco */
}

/* Cambia el color del texto insertado en modo oscuro */
body.dark-mode .goog-te-gadget-simple:after {
    color: var(--text-light) !important; /* Usa color claro para contraste */
}

/* ====================== ANIMACIONES ====================== */

/* Define una animación de aparición desde abajo */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); } /* Comienza invisible y desplazado */
    to { opacity: 1; transform: translateY(0); } /* Termina visible y en posición original */
}

/* Define una animación de entrada lateral desde la izquierda */
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); } /* Empieza oculto y desplazado a la izquierda */
    to { opacity: 1; transform: translateX(0); } /* Llega a su posición visible */
}

/* Define una animación de crecimiento suave (zoom) */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); } /* Empieza más pequeño y opaco */
    to { opacity: 1; transform: scale(1); } /* Termina en su tamaño y visible */
}

/* Efecto de pulso con expansión y contracción */
@keyframes pulse {
    0% { transform: scale(1); } /* Inicio */
    50% { transform: scale(1.05); } /* Se agranda levemente */
    100% { transform: scale(1); } /* Vuelve al tamaño original */
}

/* Efecto de rotación completo (360 grados) */
@keyframes pulseHeader {
    0% { transform: rotate(0deg); } /* Comienza sin rotación */
    100% { transform: rotate(360deg); } /* Termina con rotación completa */
}

/* Clases que aplican las animaciones anteriores con duración y suavizado */
.fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; /* Animación de entrada vertical */
}
.slide-in {
    animation: slideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; /* Entrada desde el lado */
}
.scale-in {
    animation: scaleIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; /* Entrada con escala */
}

/* Delays para encadenar o escalonar animaciones */
.delay-1 { animation-delay: 0.2s; } /* Retraso de 200ms */
.delay-2 { animation-delay: 0.4s; } /* Retraso de 400ms */
.delay-3 { animation-delay: 0.6s; } /* Retraso de 600ms */

/* ====================== RESPONSIVE DESIGN ====================== */
@media (max-width: 1200px) {
    .navbar__controls {
        gap: 2.5rem; /* Aún más espacio en pantallas muy grandes */
    }
    
    .navbar__cta {
        margin-right: 1rem; /* Mayor margen a la derecha en pantallas grandes */
    }
    
    .navbar__container,
    .navbar__menu {
        gap: 1rem; /* Reduce el espacio entre elementos de la navbar */
    }
    
    .main {
        padding: 3rem 1.5rem; /* Reduce el padding lateral */
    }
    
    .projects-grid {
        gap: 2rem; /* Ajusta el espacio entre tarjetas de proyectos */
    }
}


@media (max-width: 992px) {
    .header__title {
        font-size: clamp(2rem, 4vw, 3rem); /* Escala dinámica del título */
    }
    
    .header__subtitle {
        font-size: 1.1rem; /* Ajusta subtítulo */
        max-width: 600px; /* Limita el ancho del subtítulo */
    }
    
    .container {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Acomodo de tarjetas responsivo */
    }
    
    .header::before {
        --header-animation-duration: 20s; /* Reduce la duración de la animación del fondo */
    }

    .navbar__container {
        flex-wrap: wrap; /* Permite que los elementos de la navbar bajen de línea */
    }
    
    .navbar__link {
        padding: 0.4rem 0.8rem; /* Ajusta padding de enlaces */
        font-size: 0.9rem; /* Tamaño de fuente más compacto */
    }
    
    .navbar__cta {
        padding: 0.5rem 1.2rem; /* Ajuste del botón CTA */
    }

    .navbar__menu {
        order: 3; /* Reorganiza el orden en flex */
        width: 100%; /* Ocupa todo el ancho */
        justify-content: center; /* Centra elementos */
        margin-top: 1rem; /* Separación superior */
        flex-wrap: wrap; /* Permite múltiples líneas */
    }
    
    .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Adapta tarjetas de proyectos */
    }
    
    .footer__grid {
        grid-template-columns: repeat(2, 1fr); /* Divide el pie en 2 columnas */
        gap: 2rem; /* Espaciado entre columnas */
    }
    
    .featured {
        padding: 3.5rem 1.5rem; /* Ajuste interior */
        margin: 3rem 0; /* Márgenes verticales */
    }
}

@media (max-width: 768px) { /* Aplica estilos para dispositivos con ancho máximo de 768px */
    .header {
        padding: 2.5rem 1rem 2rem; /* Reduce el padding: arriba, laterales, abajo */
    }

    .header::before {
        --header-animation-opacity: 0.07; /* Reduce opacidad de animación decorativa */
        animation-duration: 25s; /* Hace más lenta la animación de fondo */
    }

    .header__title {
        font-size: clamp(1.8rem, 3.5vw, 2.5rem); /* Tamaño de fuente adaptable entre 1.8rem y 2.5rem */
    }

    .header__subtitle {
        font-size: 1rem; /* Reduce el tamaño del subtítulo */
    }

    .section-title h2 {
        font-size: 1.8rem; /* Disminuye el tamaño de títulos de sección */
    }

    .section-title {
        margin-bottom: 2rem; /* Reduce el espacio inferior */
    }

    .featured {
        padding: 2.5rem 1.5rem; /* Ajusta el relleno interno */
        margin: 2.5rem 0; /* Ajusta márgenes verticales */
    }

    .featured__title {
        font-size: 1.7rem; /* Reduce tamaño de título destacado */
    }

    .featured__text {
        font-size: 1rem; /* Reduce tamaño del texto destacado */
    }

    .navbar {
        padding: 0.8rem 1.5rem; /* Reduce el padding de la barra de navegación */
    }

    .navbar.scrolled {
        padding: 0.6rem 1.5rem; /* Menor padding cuando se hace scroll */
    }

    .navbar__mobile-toggle {
        display: flex; /* Muestra el botón hamburguesa */
        margin-left: auto; /* Lo empuja a la derecha */
        margin-right: 1rem; /* Añade espacio al borde derecho */
    }

    .navbar__menu {
        flex-direction: column; /* Apila los enlaces verticalmente */
        max-height: 0; /* Oculta el menú por defecto */
        overflow: hidden; /* Esconde contenido excedente */
        opacity: 0; /* Totalmente invisible */
        transition: all 0.4s ease; /* Animación fluida al expandirse */
    }

    .navbar__menu.active {
        max-height: 500px; /* Muestra el menú expandido */
        opacity: 1; /* Lo hace visible */
        margin-top: 1rem; /* Añade espacio superior */
    }

    .navbar__link,
    .navbar__cta {
        width: 100%; /* Ocupan todo el ancho disponible */
        text-align: center; /* Centra el texto */
    }

    .main {
        padding: 2.5rem 1rem; /* Reduce el espacio general en móviles */
    }

    .projects-grid {
        gap: 1.5rem; /* Disminuye separación entre proyectos */
    }

    .footer {
        padding: 3rem 0 1.5rem; /* Ajusta padding superior e inferior */
    }

    .theme-toggle {
        width: 32px; /* Tamaño del botón de tema */
        height: 32px;
        font-size: 1rem; /* Tamaño de icono/texto */
    }

    .goog-te-gadget-simple {
        padding: 5px 8px !important; /* Ajuste específico para botón de Google Translate */
    }
}

@media (max-width: 576px) { /* Aplica a pantallas de hasta 576px */
    .header {
        padding: 2rem 1rem 1.8rem; /* Menor relleno en dispositivos más pequeños */
    }

    .header::before {
        --header-animation-opacity: 0.05; /* Opacidad aún menor en fondos decorativos */
    }

    .header__title {
        font-size: clamp(1.6rem, 3vw, 2rem); /* Título más pequeño aún */
    }

    .header__subtitle {
        font-size: 0.95rem; /* Subtítulo más compacto */
    }

    .navbar {
        padding: 0.7rem 1rem; /* Navbar más compacta */
    }

    .navbar.scrolled {
        padding: 0.5rem 1rem; /* Incluso más compacto con scroll */
    }

    .navbar__logo {
        font-size: 1.3rem; /* Reduce el tamaño del logo */
    }

    .navbar__logo-icon {
        font-size: 1.5rem; /* Reduce ícono del logo */
    }

    .navbar__link {
        font-size: 0.85rem; /* Enlaces más pequeños */
        padding: 0.3rem 0.7rem; /* Padding reducido */
    }

    .project-card {
        border-radius: 10px; /* Bordes más redondeados para tarjetas */
    }

    .project-card__image {
        height: 180px; /* Altura fija más pequeña para la imagen */
    }

    .project-card__content {
        padding: 1.2rem; /* Menor relleno en contenido */
    }

    .project-card__title {
        font-size: 1.2rem; /* Título del proyecto más compacto */
    }

    .project-card__links {
        flex-direction: column; /* Botones en columna para más espacio */
    }

    .btn {
        width: 100%; /* Botones ocupan todo el ancho */
    }

    .footer__grid {
        grid-template-columns: 1fr; /* Una sola columna en el footer */
        text-align: center; /* Centra el texto */
    }

    .footer__col h4::after {
        left: 50%; /* Centra la línea decorativa del h4 */
        transform: translateX(-50%);
    }

    .footer__links {
        align-items: center; /* Centra enlaces */
    }

    .footer__link a {
        justify-content: center; /* Centra íconos/textos */
    }

    .footer__link a:hover {
        transform: translateY(-3px); /* Efecto visual en hover */
    }

    .footer__social {
        justify-content: center; /* Centra redes sociales */
    }

    .theme-toggle {
        width: 28px; /* Botón de tema más pequeño */
        height: 28px;
        font-size: 0.9rem; /* Texto o ícono reducido */
    }

    .goog-te-gadget-simple:after {
        content: "🌐" !important; /* Agrega ícono al botón de traducción */
        font-size: 0.8rem !important; /* Ícono más pequeño */
    }

    .box {
        padding: 1.5rem; /* Caja con relleno ajustado */
    }
}

@media (max-width: 400px) { /* Estilos específicos para pantallas muy pequeñas */
    .header {
        padding: 1.8rem 0.8rem 1.5rem; /* Padding aún más compacto */
    }

    .header__title {
        font-size: 1.5rem; /* Título más reducido */
    }

    .header__subtitle {
        font-size: 0.9rem; /* Subtítulo más pequeño */
        max-width: 280px; /* Limita ancho del subtítulo */
    }

    .navbar {
        padding: 0.6rem 0.8rem; /* Navbar muy ajustada */
    }

    .navbar__logo {
        font-size: 1.2rem; /* Logo más pequeño aún */
    }

    .section-title h2 {
        font-size: 1.5rem; /* Título de sección más compacto */
    }

    .projects-grid {
        grid-template-columns: 1fr; /* Una sola tarjeta por fila */
    }

    .featured__title {
        font-size: 1.4rem; /* Título destacado más pequeño */
    }

    .featured__text {
        font-size: 0.9rem; /* Texto destacado reducido */
    }

    .footer {
        padding: 2rem 0 1rem; /* Footer con menos espacio */
    }
}

/* ====================== PERFORMANCE IMPROVEMENTS ====================== */
@media (prefers-reduced-motion: no-preference) {
    .header {
        contain: layout style paint; /* Mejora el rendimiento al contener elementos */
    }
}