/* Variables CSS para colores principales - Define colores reutilizables en toda la aplicación */
:root {
    --primary-color: #667eea; /* Color azul principal para elementos destacados */
    --secondary-color: #764ba2; /* Color morado secundario para complementos */
    --accent-color: #f093fb; /* Color rosa de acento para elementos especiales */
    --dark-color: #2c3e50; /* Color oscuro para textos y fondos oscuros */
    --light-color: #ecf0f1; /* Color claro para fondos y elementos sutiles */
    --text-dark: #2c3e50; /* Color para textos principales (mismo que dark-color) */
    --text-light: #7f8c8d; /* Color para textos secundarios y menos importantes */
    --white: #ffffff; /* Color blanco puro para fondos y textos claros */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradiente principal azul a morado */
    --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); /* Gradiente de acento rosa a rojo */
    --shadow-light: 0 5px 15px rgba(0,0,0,0.08); /* Sombra sutil para elementos elevados */
    --shadow-medium: 0 10px 30px rgba(0,0,0,0.12); /* Sombra media para elementos destacados */
    --shadow-strong: 0 20px 60px rgba(0,0,0,0.15); /* Sombra fuerte para elementos muy elevados */
}

/* Reset y configuración global - Elimina márgenes y padding por defecto del navegador */
* {
    margin: 0; /* Elimina todos los márgenes externos */
    padding: 0; /* Elimina todo el padding interno */
    box-sizing: border-box; /* Incluye padding y border en el ancho total del elemento */
}

/* Estilos del cuerpo de la página */
body {
    font-family: 'Poppins', sans-serif; /* Fuente principal de Google Fonts */
    line-height: 1.6; /* Espaciado entre líneas para mejor legibilidad */
    color: var(--text-dark); /* Color del texto usando variable CSS */
    background-color: #f8f9fa; /* Color de fondo gris muy claro */
}

/* Scroll suave - Hace que el desplazamiento de la página sea suave */
html {
    scroll-behavior: smooth; /* Aplica transición suave al hacer scroll */
}

/* Navbar personalizada - Barra de navegación con efectos modernos */
.navbar-custom {
    background: rgba(255, 255, 255, 0.95); /* Fondo blanco semi-transparente */
    backdrop-filter: blur(10px); /* Efecto de desenfoque del fondo */
    box-shadow: var(--shadow-light); /* Sombra sutil usando variable CSS */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
}

/* Navbar cuando se hace scroll - Cambia apariencia al desplazarse */
.navbar-custom.scrolled {
    background: rgba(255, 255, 255, 0.98); /* Fondo más opaco al hacer scroll */
    box-shadow: var(--shadow-medium); /* Sombra más pronunciada al hacer scroll */
}

/* Logo de la marca en la navbar */
.navbar-brand {
    font-weight: 700; /* Peso de fuente extra bold */
    font-size: 1.5rem; /* Tamaño de fuente grande */
    background: var(--gradient-primary); /* Aplica gradiente como fondo */
    -webkit-background-clip: text; /* Recorta el fondo solo al texto (Safari/Chrome) */
    -webkit-text-fill-color: transparent; /* Hace el texto transparente */
    background-clip: text; /* Recorta el fondo solo al texto (estándar) */
}

/* Enlaces de navegación */
.nav-link {
    font-weight: 500; /* Peso de fuente medium */
    color: var(--text-dark) !important; /* Color del texto usando variable CSS */
    transition: color 0.3s ease; /* Transición suave del color */
    position: relative; /* Posición relativa para el pseudo-elemento ::after */
}

/* Línea decorativa debajo de los enlaces de navegación */
.nav-link::after {
    content: ''; /* Contenido vacío para crear la línea */
    position: absolute; /* Posición absoluta respecto al enlace */
    bottom: -5px; /* 5px debajo del enlace */
    left: 50%; /* Centrado horizontalmente */
    width: 0; /* Ancho inicial 0 (invisible) */
    height: 2px; /* Altura de 2px para la línea */
    background: var(--gradient-primary); /* Color de la línea usando gradiente */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    transform: translateX(-50%); /* Centra la línea horizontalmente */
}

/* Línea decorativa visible al hacer hover o cuando está activo */
.nav-link:hover::after,
.nav-link.active::after {
    width: 100%; /* Ancho completo para hacer visible la línea */
}

/* Sección Hero - Sección principal de la página */
.hero-section {
    min-height: 100vh; /* Altura mínima del 100% de la ventana */
    background: var(--gradient-primary); /* Fondo con gradiente principal */
    position: relative; /* Posición relativa para elementos hijos absolutos */
    overflow: hidden; /* Oculta elementos que se salgan del contenedor */
    display: flex; /* Usa flexbox para centrar contenido */
    align-items: center; /* Centra verticalmente el contenido */
}

/* Patrón de fondo animado con SVG */
.hero-section::before {
    content: ''; /* Contenido vacío para crear el patrón */
    position: absolute; /* Posición absoluta para cubrir toda la sección */
    top: 0; /* Desde la parte superior */
    left: 0; /* Desde la parte izquierda */
    right: 0; /* Hasta la parte derecha */
    bottom: 0; /* Hasta la parte inferior */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><circle cx="200" cy="200" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="800" cy="300" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="400" cy="600" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="900" cy="800" r="2" fill="rgba(255,255,255,0.1)"/></svg>'); /* Patrón SVG de círculos pequeños */
    animation: float 20s infinite linear; /* Aplica animación infinita de 20 segundos */
}

/* Animación de flotación para el patrón de fondo */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); } /* Estado inicial: sin movimiento ni rotación */
    50% { transform: translateY(-20px) rotate(180deg); } /* Estado medio: sube 20px y rota 180° */
    100% { transform: translateY(0px) rotate(360deg); } /* Estado final: vuelve a posición inicial y completa rotación */
}

/* Contenido principal de la sección hero */
.hero-content {
    z-index: 2; /* Capa superior para estar por encima del patrón de fondo */
    position: relative; /* Posición relativa para el z-index */
}

/* Título principal de la sección hero */
.hero-title {
    font-size: 3.5rem; /* Tamaño de fuente muy grande */
    font-weight: 800; /* Peso de fuente extra bold */
    color: var(--white); /* Color blanco para el texto */
    margin-bottom: 1rem; /* Margen inferior de 1rem */
    text-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra sutil del texto */
}

/* Subtítulo de la sección hero */
.hero-subtitle {
    font-size: 1.5rem; /* Tamaño de fuente grande */
    font-weight: 400; /* Peso de fuente normal */
    color: rgba(255,255,255,0.9); /* Color blanco semi-transparente */
    margin-bottom: 2rem; /* Margen inferior de 2rem */
}

/* Descripción de la sección hero */
.hero-description {
    font-size: 1.1rem; /* Tamaño de fuente mediano */
    color: rgba(255,255,255,0.8); /* Color blanco más transparente */
    margin-bottom: 3rem; /* Margen inferior de 3rem */
    max-width: 600px; /* Ancho máximo para mejor legibilidad */
}

/* Avatar circular en la sección hero */
.hero-avatar {
    width: 250px; /* Ancho del avatar */
    height: 250px; /* Alto del avatar */
    border-radius: 50%; /* Forma circular perfecta */
    border: 5px solid rgba(255,255,255,0.2); /* Borde blanco semi-transparente */
    box-shadow: var(--shadow-strong); /* Sombra fuerte usando variable CSS */
    transition: transform 0.3s ease; /* Transición suave para transformaciones */
    background: linear-gradient(45deg, #667eea, #764ba2); /* Gradiente de fondo */
    display: flex; /* Usa flexbox para centrar contenido */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    font-size: 4rem; /* Tamaño de fuente muy grande para el ícono */
    color: white; /* Color blanco para el ícono */
}

/* Efecto hover del avatar */
.hero-avatar:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al hacer hover */
}

/* Botones personalizados */
.btn-custom {
    padding: 12px 30px; /* Padding interno vertical y horizontal */
    border-radius: 50px; /* Bordes completamente redondeados */
    font-weight: 600; /* Peso de fuente semi-bold */
    text-decoration: none; /* Sin subrayado */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    border: none; /* Sin borde */
    cursor: pointer; /* Cursor de mano al hacer hover */
    display: inline-flex; /* Display flex inline */
    align-items: center; /* Centra verticalmente el contenido */
    gap: 10px; /* Espacio entre elementos del botón */
}

/* Botón primario personalizado */
.btn-primary-custom {
    background: var(--white); /* Fondo blanco */
    color: var(--primary-color); /* Color del texto azul */
    box-shadow: var(--shadow-medium); /* Sombra media usando variable CSS */
}

/* Efecto hover del botón primario */
.btn-primary-custom:hover {
    transform: translateY(-2px); /* Se eleva 2px hacia arriba */
    box-shadow: var(--shadow-strong); /* Sombra más fuerte */
    color: var(--primary-color); /* Mantiene el color del texto */
}

/* Botón outline personalizado */
.btn-outline-custom {
    background: transparent; /* Fondo transparente */
    color: var(--white); /* Color del texto blanco */
    border: 2px solid var(--white); /* Borde blanco de 2px */
}

/* Efecto hover del botón outline */
.btn-outline-custom:hover {
    background: var(--white); /* Fondo blanco al hacer hover */
    color: var(--primary-color); /* Color del texto azul al hacer hover */
    transform: translateY(-2px); /* Se eleva 2px hacia arriba */
}

/* Espaciado estándar para secciones */
.section-padding {
    padding: 100px 0; /* Padding vertical de 100px, horizontal 0 */
}

/* Título de sección */
.section-title {
    font-size: 2.5rem; /* Tamaño de fuente grande */
    font-weight: 700; /* Peso de fuente bold */
    text-align: center; /* Texto centrado */
    margin-bottom: 3rem; /* Margen inferior de 3rem */
    position: relative; /* Posición relativa para el pseudo-elemento ::after */
}

/* Línea decorativa debajo del título de sección */
.section-title::after {
    content: ''; /* Contenido vacío para crear la línea */
    position: absolute; /* Posición absoluta respecto al título */
    bottom: -10px; /* 10px debajo del título */
    left: 50%; /* Centrado horizontalmente */
    transform: translateX(-50%); /* Centra la línea horizontalmente */
    width: 80px; /* Ancho de la línea */
    height: 4px; /* Altura de la línea */
    background: var(--gradient-primary); /* Color de la línea usando gradiente */
    border-radius: 2px; /* Bordes redondeados de la línea */
}

/* Tarjetas personalizadas */
.card-custom {
    background: var(--white); /* Fondo blanco */
    border: none; /* Sin borde */
    border-radius: 20px; /* Bordes redondeados de 20px */
    box-shadow: var(--shadow-light); /* Sombra sutil usando variable CSS */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    overflow: hidden; /* Oculta contenido que se salga de la tarjeta */
    height: 100%; /* Altura completa del contenedor padre */
}

/* Efecto hover de las tarjetas */
.card-custom:hover {
    transform: translateY(-10px); /* Se eleva 10px hacia arriba */
    box-shadow: var(--shadow-strong); /* Sombra más fuerte */
}

/* Ícono circular de las tarjetas */
.card-icon {
    width: 70px; /* Ancho del ícono */
    height: 70px; /* Alto del ícono */
    background: var(--gradient-primary); /* Fondo con gradiente principal */
    border-radius: 50%; /* Forma circular perfecta */
    display: flex; /* Usa flexbox para centrar contenido */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    margin: 0 auto 20px; /* Margen automático horizontal y 20px abajo */
    color: var(--white); /* Color blanco para el ícono */
    font-size: 1.5rem; /* Tamaño de fuente del ícono */
}

/* Elementos de habilidad */
.skill-item {
    margin-bottom: 2rem; /* Margen inferior de 2rem entre habilidades */
}

/* Nombre de la habilidad */
.skill-name {
    font-weight: 600; /* Peso de fuente semi-bold */
    margin-bottom: 0.5rem; /* Margen inferior de 0.5rem */
    display: flex; /* Usa flexbox para distribuir elementos */
    justify-content: space-between; /* Distribuye elementos con espacio entre ellos */
}

/* Barra de progreso personalizada */
.progress-custom {
    height: 8px; /* Altura de la barra de progreso */
    border-radius: 10px; /* Bordes redondeados */
    background: var(--light-color); /* Color de fondo claro */
    overflow: hidden; /* Oculta el contenido que se salga */
}

/* Barra de progreso interna */
.progress-bar-custom {
    background: var(--gradient-primary); /* Fondo con gradiente principal */
    border-radius: 10px; /* Bordes redondeados */
    transition: width 2s ease; /* Transición suave del ancho durante 2 segundos */
}

/* Timeline de experiencia */
.timeline {
    position: relative; /* Posición relativa para elementos hijos absolutos */
    padding: 0; /* Sin padding */
    list-style: none; /* Sin viñetas de lista */
}

/* Línea vertical del timeline */
.timeline::before {
    content: ''; /* Contenido vacío para crear la línea */
    position: absolute; /* Posición absoluta */
    top: 0; /* Desde la parte superior */
    bottom: 0; /* Hasta la parte inferior */
    left: 30px; /* 30px desde la izquierda */
    width: 2px; /* Ancho de 2px para la línea */
    background: var(--gradient-primary); /* Color de la línea usando gradiente */
}

/* Elemento individual del timeline */
.timeline-item {
    position: relative; /* Posición relativa para elementos hijos absolutos */
    margin-bottom: 3rem; /* Margen inferior de 3rem entre elementos */
    padding-left: 80px; /* Padding izquierdo para dejar espacio a la línea */
}

/* Círculo indicador del timeline */
.timeline-badge {
    position: absolute; /* Posición absoluta */
    left: 20px; /* 20px desde la izquierda */
    top: 0; /* Desde la parte superior */
    width: 20px; /* Ancho del círculo */
    height: 20px; /* Alto del círculo */
    background: var(--gradient-primary); /* Fondo con gradiente principal */
    border-radius: 50%; /* Forma circular perfecta */
    border: 4px solid var(--white); /* Borde blanco de 4px */
    box-shadow: var(--shadow-medium); /* Sombra media usando variable CSS */
}

/* Tarjeta del timeline */
.timeline-card {
    background: var(--white); /* Fondo blanco */
    border-radius: 15px; /* Bordes redondeados de 15px */
    padding: 25px; /* Padding interno de 25px */
    box-shadow: var(--shadow-light); /* Sombra sutil usando variable CSS */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
}

/* Efecto hover de las tarjetas del timeline */
.timeline-card:hover {
    transform: translateX(10px); /* Se mueve 10px hacia la derecha */
    box-shadow: var(--shadow-medium); /* Sombra más pronunciada */
}

/* Elementos del portfolio */
.portfolio-item {
    position: relative; /* Posición relativa para elementos hijos absolutos */
    overflow: hidden; /* Oculta contenido que se salga */
    border-radius: 15px; /* Bordes redondeados de 15px */
    box-shadow: var(--shadow-light); /* Sombra sutil usando variable CSS */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
}

/* Efecto hover de los elementos del portfolio */
.portfolio-item:hover {
    transform: scale(1.02); /* Aumenta ligeramente el tamaño */
    box-shadow: var(--shadow-strong); /* Sombra más fuerte */
}

/* Overlay del portfolio al hacer hover */
.portfolio-overlay {
    position: absolute; /* Posición absoluta para cubrir toda la imagen */
    top: 0; /* Desde la parte superior */
    left: 0; /* Desde la parte izquierda */
    right: 0; /* Hasta la parte derecha */
    bottom: 0; /* Hasta la parte inferior */
    background: linear-gradient(45deg, rgba(102,126,234,0.9), rgba(118,75,162,0.9)); /* Gradiente semi-transparente */
    opacity: 0; /* Inicialmente invisible */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    display: flex; /* Usa flexbox para centrar contenido */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    flex-direction: column; /* Dirección de columna para el contenido */
    color: var(--white); /* Color blanco para el texto */
}

/* Overlay visible al hacer hover en el portfolio */
.portfolio-item:hover .portfolio-overlay {
    opacity: 1; /* Completamente visible */
}

/* Footer personalizado */
.footer-custom {
    background: var(--dark-color); /* Fondo oscuro */
    color: var(--white); /* Color blanco para el texto */
    padding: 50px 0 20px; /* Padding vertical de 50px arriba y 20px abajo */
}

/* Enlaces de redes sociales */
.social-links {
    display: flex; /* Usa flexbox para distribuir elementos */
    gap: 15px; /* Espacio de 15px entre elementos */
    justify-content: center; /* Centra horizontalmente */
    margin: 30px 0; /* Margen vertical de 30px */
}

/* Enlace individual de red social */
.social-link {
    width: 50px; /* Ancho del enlace */
    height: 50px; /* Alto del enlace */
    background: var(--gradient-primary); /* Fondo con gradiente principal */
    border-radius: 50%; /* Forma circular perfecta */
    display: flex; /* Usa flexbox para centrar contenido */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    color: var(--white); /* Color blanco para el ícono */
    font-size: 1.2rem; /* Tamaño de fuente del ícono */
    text-decoration: none; /* Sin subrayado */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
}

/* Efecto hover de los enlaces sociales */
.social-link:hover {
    transform: translateY(-5px) scale(1.1); /* Se eleva 5px y aumenta tamaño */
    color: var(--white); /* Mantiene el color del texto */
}

/* Diseño responsive para dispositivos móviles */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem; /* Tamaño de fuente más pequeño en móviles */
    }
    
    .hero-subtitle {
        font-size: 1.2rem; /* Tamaño de fuente más pequeño en móviles */
    }
    
    .hero-avatar {
        width: 200px; /* Avatar más pequeño en móviles */
        height: 200px; /* Avatar más pequeño en móviles */
        font-size: 3rem; /* Tamaño de fuente del ícono más pequeño */
    }
    
    .section-title {
        font-size: 2rem; /* Título de sección más pequeño en móviles */
    }
}

/* Scrollbar personalizado para navegadores WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de scroll */
}

/* Pista de la barra de scroll */
::-webkit-scrollbar-track {
    background: var(--light-color); /* Color de fondo claro */
}

/* Barra de scroll */
::-webkit-scrollbar-thumb {
    background: var(--gradient-primary); /* Fondo con gradiente principal */
    border-radius: 10px; /* Bordes redondeados */
}

/* Animación de aparición gradual */
.fade-in {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(30px); /* Inicialmente desplazado 30px hacia abajo */
    transition: all 0.6s ease; /* Transición suave durante 0.6 segundos */
}

/* Estado visible de la animación */
.fade-in.visible {
    opacity: 1; /* Completamente visible */
    transform: translateY(0); /* Sin desplazamiento */
}