/* ============================================================================
   PORTAFOLIO DE RALDY - ARCHIVO DE ESTILOS CSS
   Tema: Negro Elegante con animaciones suaves e imágenes de preview
   ============================================================================ */

/* ============================================================================
   RESET Y CONFIGURACIÓN BASE
   Resetea los estilos por defecto del navegador para tener un control total
   ============================================================================ */
* {
    margin: 0;              /* Elimina márgenes por defecto */
    padding: 0;             /* Elimina padding por defecto */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

/* ============================================================================
   ESTILOS DEL BODY
   Configuración general de toda la página
   ============================================================================ */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a0a0a;    /* Negro profundo para el fondo */
    color: #ffffff;         /* Texto blanco */
    line-height: 1.6;       /* Altura de línea para mejor legibilidad */
    overflow-x: hidden;     /* Evita scroll horizontal */
}

/* ============================================================================
   CONTENEDOR PRINCIPAL
   Limita el ancho del contenido y lo centra
   ============================================================================ */
.container {
    max-width: 1400px;      /* Ancho máximo del contenido */
    margin: 0 auto;         /* Centra horizontalmente */
    padding: 0 2rem;        /* Espacio a los lados */
}

/* ============================================================================
   HEADER - NAVEGACIÓN
   Barra de navegación fija en la parte superior
   ============================================================================ */
header {
    padding: 2rem 0;                    /* Espaciado vertical */
    position: fixed;                    /* Se mantiene fijo al hacer scroll */
    width: 100%;                        /* Ocupa todo el ancho */
    top: 0;                             /* Pegado arriba */
    background: rgba(10, 10, 10, 0.95); /* Negro semi-transparente */
    backdrop-filter: blur(10px);        /* Efecto de desenfoque del fondo */
    z-index: 1000;                      /* Por encima de todo */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Línea sutil abajo */
    animation: slideDown 0.6s ease-out; /* Animación de entrada */
}

/* Animación de entrada del header */
@keyframes slideDown {
    from {
        transform: translateY(-100%);   /* Empieza arriba fuera de vista */
        opacity: 0;                     /* Invisible */
    }
    to {
        transform: translateY(0);       /* Baja a su posición */
        opacity: 1;                     /* Visible */
    }
}

/* ============================================================================
   NAVEGACIÓN
   Organiza el logo y los links de navegación
   ============================================================================ */
nav {
    display: flex;                      /* Flexbox para layout */
    justify-content: space-between;     /* Espacio entre logo y links */
    align-items: center;                /* Alinea verticalmente */
}

/* ============================================================================
   LOGO
   Estilo del nombre "RALDY" en el header
   ============================================================================ */
.logo {
    font-size: 1.5rem;                  /* Tamaño de letra */
    font-weight: 700;                   /* Negrita */
    letter-spacing: 2px;                /* Espacio entre letras */
    /* Gradiente en el texto */
    background: linear-gradient(135deg, #ffffff 0%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================================
   LINKS DE NAVEGACIÓN
   Los botones Inicio, Proyectos, Contacto
   ============================================================================ */
.nav-links {
    display: flex;                      /* Layout horizontal */
    gap: 2rem;                          /* Espacio entre links */
    list-style: none;                   /* Sin puntos de lista */
}

.nav-links a {
    color: #ffffff;                     /* Color blanco */
    text-decoration: none;              /* Sin subrayado */
    font-weight: 500;                   /* Semi-negrita */
    transition: all 0.3s ease;          /* Transición suave */
    position: relative;                 /* Para el efecto de subrayado */
}

/* Línea animada bajo los links */
.nav-links a::after {
    content: '';                        /* Elemento vacío */
    position: absolute;                 /* Posicionado relativo al link */
    bottom: -5px;                       /* 5px abajo del texto */
    left: 0;
    width: 0;                           /* Empieza sin ancho */
    height: 2px;                        /* Altura de la línea */
    background: #ffffff;                /* Color blanco */
    transition: width 0.3s ease;        /* Animación del ancho */
}

/* Cuando pasas el mouse por encima */
.nav-links a:hover::after {
    width: 100%;                        /* La línea crece al 100% */
}

/* ============================================================================
   SECCIÓN HERO
   La primera pantalla con tu presentación
   ============================================================================ */
.hero {
    min-height: 100vh;                  /* Altura mínima de toda la pantalla */
    display: flex;                      /* Flexbox para centrar */
    align-items: center;                /* Centra verticalmente */
    justify-content: center;            /* Centra horizontalmente */
    text-align: center;                 /* Texto centrado */
    padding-top: 80px;                  /* Espacio arriba por el header fijo */
    position: relative;                 /* Para el efecto de fondo */
}

/* Efecto de luz radial en el fondo del hero */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradiente radial desde el centro */
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;               /* No interfiere con clicks */
}

/* Contenedor del contenido del hero */
.hero-content {
    animation: fadeInUp 0.8s ease-out;  /* Animación de entrada */
}

/* Animación de aparición desde abajo */
@keyframes fadeInUp {
    from {
        opacity: 0;                     /* Invisible */
        transform: translateY(30px);    /* 30px más abajo */
    }
    to {
        opacity: 1;                     /* Visible */
        transform: translateY(0);       /* En su posición */
    }
}

/* ============================================================================
   TÍTULOS DEL HERO
   "Hago sitios web." y "Hola, mi nombre es Raldy"
   ============================================================================ */
.hero h1 {
    font-size: 4rem;                    /* Tamaño grande */
    margin-bottom: 1rem;                /* Espacio abajo */
    font-weight: 300;                   /* Peso ligero */
    letter-spacing: -2px;               /* Letras más juntas */
}

/* Estilos para el efecto typing */
.typing-text {
    display: inline-block;
    min-height: 1.2em;                  /* Altura mínima para evitar saltos */
}

.typed-text {
    color: #ffffff;                     /* Color blanco */
    font-weight: 300;                   /* Peso ligero */
    letter-spacing: -2px;               /* Letras más juntas */
}

.cursor {
    display: inline-block;
    width: 3px;                         /* Ancho del cursor */
    height: 1.2em;                      /* Altura del cursor */
    background-color: #ffffff;          /* Color blanco */
    animation: blink 1s infinite;       /* Animación de parpadeo */
    vertical-align: text-bottom;        /* Alineación con el texto */
    margin-left: 2px;                   /* Espacio pequeño después del texto */
}

/* Animación de parpadeo del cursor */
@keyframes blink {
    0%, 50% { opacity: 1; }             /* Visible */
    51%, 100% { opacity: 0; }           /* Invisible */
}

/* El punto final en negrita con gradiente */
.hero h1 strong {
    font-weight: 700;                   /* Negrita */
    /* Gradiente blanco a gris */
    background: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero p {
    font-size: 1.5rem;                  /* Tamaño mediano */
    color: #aaaaaa;                     /* Gris claro */
    margin-bottom: 1rem;                /* Espacio abajo */
    animation: fadeInUp 0.8s ease-out 0.2s both; /* Con delay de 0.2s */
}

.hero .subtitle {
    font-size: 1.2rem;                  /* Tamaño más pequeño */
    color: #888888;                     /* Gris más oscuro */
    margin-bottom: 2rem;                /* Espacio abajo */
    animation: fadeInUp 0.8s ease-out 0.4s both; /* Con delay de 0.4s */
}

/* ============================================================================
   SECCIÓN DE PROYECTOS
   Donde están todas las tarjetas de tus proyectos
   ============================================================================ */
.projects {
    padding: 6rem 0;                    /* Espaciado vertical */
}

/* Título "Proyectos Destacados" */
.section-title {
    font-size: 3rem;                    /* Tamaño grande */
    margin-bottom: 3rem;                /* Espacio abajo */
    text-align: center;                 /* Centrado */
    font-weight: 300;                   /* Peso ligero */
    letter-spacing: -1px;               /* Letras más juntas */
}

/* ============================================================================
   GRID DE PROYECTOS
   Sistema de rejilla para organizar las tarjetas
   ============================================================================ */
.projects-grid {
    display: grid;                      /* Sistema de rejilla */
    /* Columnas automáticas con mínimo 350px */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;                          /* Espacio entre tarjetas */
    margin-bottom: 4rem;                /* Espacio abajo */
}

/* ============================================================================
   TARJETAS DE PROYECTO
   Cada caja individual de proyecto con imagen
   ============================================================================ */
.project-card {
    background: rgba(255, 255, 255, 0.03); /* Fondo casi transparente */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
    border-radius: 12px;                /* Esquinas redondeadas */
    overflow: hidden;                   /* Oculta el desbordamiento */
    transition: all 0.4s ease;          /* Transición suave */
    cursor: pointer;                    /* Cursor de manita */
    position: relative;                 /* Para el efecto de brillo */
}

/* Efectos al pasar el mouse sobre la tarjeta */
.project-card:hover {
    transform: translateY(-8px);        /* Sube 8px */
    background: rgba(255, 255, 255, 0.05); /* Fondo un poco más claro */
    border-color: rgba(255, 255, 255, 0.3); /* Borde más visible */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6); /* Sombra profunda */
}

/* ============================================================================
   IMAGEN DEL PROYECTO
   Contenedor de la imagen con efectos hover
   ============================================================================ */
.project-image {
    width: 100%;                        /* Ancho completo */
    height: 250px;                      /* Altura fija */
    overflow: hidden;                   /* Oculta lo que sobresale */
    position: relative;                 /* Para el overlay */
}

.project-image img {
    width: 100%;                        /* Ancho completo */
    height: 100%;                       /* Altura completa */
    object-fit: cover;                  /* Cubre todo el espacio */
    transition: transform 0.5s ease;    /* Transición suave del zoom */
}

/* Efecto zoom al pasar el mouse */
.project-card:hover .project-image img {
    transform: scale(1.1);              /* Zoom del 110% */
}

/* Overlay oscuro sobre la imagen */
.project-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradiente de arriba a abajo */
    background: linear-gradient(to bottom, transparent 0%, rgba(10, 10, 10, 0.8) 100%);
    pointer-events: none;               /* No bloquea clicks */
}

/* ============================================================================
   CONTENIDO DEL PROYECTO
   Número, título, descripción y link
   ============================================================================ */
.project-content {
    padding: 2rem;                      /* Espaciado interno */
}

/* Número del proyecto (01, 02, 03...) */
.project-number {
    font-size: 0.9rem;                  /* Tamaño pequeño */
    color: #666666;                     /* Gris oscuro */
    margin-bottom: 0.5rem;              /* Espacio abajo */
    font-weight: 500;                   /* Semi-negrita */
}

/* Título del proyecto */
.project-content h3 {
    font-size: 1.5rem;                  /* Tamaño mediano */
    margin-bottom: 1rem;                /* Espacio abajo */
    font-weight: 600;                   /* Semi-negrita */
}

/* Descripción del proyecto */
.project-content p {
    color: #aaaaaa;                     /* Gris claro */
    margin-bottom: 1.5rem;              /* Espacio abajo */
}

/* Link "Ver Proyecto →" */
.project-link {
    display: inline-block;              /* Comportamiento de bloque inline */
    color: #ffffff;                     /* Blanco */
    text-decoration: none;              /* Sin subrayado por defecto */
    font-weight: 500;                   /* Semi-negrita */
    padding: 0.5rem 0;                  /* Padding vertical */
    border-bottom: 2px solid transparent; /* Borde inferior invisible */
    transition: all 0.3s ease;          /* Transición suave */
}

/* Al pasar el mouse, aparece línea abajo */
.project-link:hover {
    border-bottom-color: #ffffff;       /* Línea blanca */
}

/* ============================================================================
   FOOTER
   Pie de página con información de contacto
   ============================================================================ */
footer {
    background: rgba(255, 255, 255, 0.02); /* Fondo muy sutil */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea arriba */
    padding: 3rem 0;                    /* Espaciado vertical */
}

/* Contenido del footer dividido en secciones */
.footer-content {
    display: flex;                      /* Flexbox para mejor control */
    flex-direction: column;             /* Apilar elementos verticalmente */
    align-items: center;                /* Centrar horizontalmente */
    text-align: center;                 /* Centrar texto */
    gap: 2rem;                          /* Espacio entre secciones */
    margin-bottom: 2rem;                /* Espacio abajo */
}

/* Títulos de las secciones del footer */
.footer-section h4 {
    font-size: 1.2rem;                  /* Tamaño mediano */
    margin-bottom: 1rem;                /* Espacio abajo */
    font-weight: 600;                   /* Semi-negrita */
}

/* ============================================================================
   ENLACES SOCIALES
   LinkedIn, Instagram, WhatsApp
   ============================================================================ */
.social-links {
    display: flex;                      /* Flexbox para alinear horizontalmente */
    gap: 1rem;                          /* Espacio entre iconos */
    margin-top: 1rem;                   /* Espacio arriba */
}

.social-link {
    display: flex;                      /* Flexbox para centrar contenido */
    align-items: center;                /* Centra verticalmente */
    justify-content: center;            /* Centra horizontalmente */
    width: 50px;                        /* Diámetro del círculo */
    height: 50px;                       /* Diámetro del círculo */
    border-radius: 50%;                 /* Hace el círculo perfecto */
    text-decoration: none;              /* Sin subrayado */
    transition: all 0.3s ease;          /* Transición suave */
    font-size: 1.5rem;                  /* Tamaño del icono */
    color: #ffffff;                     /* Color del icono */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* LinkedIn - Color oficial #0077B5 */
.social-link.linkedin {
    background: linear-gradient(135deg, #0077B5 0%, #005885 100%); /* Gradiente azul LinkedIn */
}

.social-link.linkedin:hover {
    background: linear-gradient(135deg, #005885 0%, #004066 100%); /* Gradiente más oscuro */
    transform: translateY(-3px) scale(1.05); /* Eleva y agranda ligeramente */
    box-shadow: 0 6px 20px rgba(0, 119, 181, 0.4); /* Sombra con color LinkedIn */
}

/* Instagram - Colores oficiales gradiente */
.social-link.instagram {
    background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100%); /* Gradiente Instagram */
}

.social-link.instagram:hover {
    background: linear-gradient(135deg, #6B2C91 0%, #E91E63 50%, #FF9800 100%); /* Gradiente más oscuro */
    transform: translateY(-3px) scale(1.05); /* Eleva y agranda ligeramente */
    box-shadow: 0 6px 20px rgba(131, 58, 180, 0.4); /* Sombra con color Instagram */
}

/* WhatsApp - Color oficial #25D366 */
.social-link.whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); /* Gradiente verde WhatsApp */
}

.social-link.whatsapp:hover {
    background: linear-gradient(135deg, #128C7E 0%, #0F5F54 100%); /* Gradiente más oscuro */
    transform: translateY(-3px) scale(1.05); /* Eleva y agranda ligeramente */
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); /* Sombra con color WhatsApp */
}

/* ============================================================================
   COPYRIGHT
   Texto de derechos reservados al final
   ============================================================================ */
.copyright {
    text-align: center;                 /* Centrado */
    color: #666666;                     /* Gris oscuro */
    padding-top: 2rem;                  /* Espacio arriba */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea arriba */
}

/* Enlace del desarrollador */
.developer-link {
    color: #888888;                     /* Gris claro */
    text-decoration: none;              /* Sin subrayado */
    transition: all 0.3s ease;          /* Transición suave */
    font-weight: 500;                   /* Semi-negrita */
}

.developer-link:hover {
    color: #ffffff;                     /* Blanco al hover */
    text-decoration: underline;         /* Subrayado al hover */
}

/* ============================================================================
   ANIMACIONES DE SCROLL
   Los elementos aparecen al hacer scroll
   ============================================================================ */
.fade-in {
    opacity: 0;                         /* Empieza invisible */
    animation: fadeInUp 0.8s ease-out forwards; /* Animación */
}

/* Delays para que aparezcan en secuencia */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* ============================================================================
   RESPONSIVE DESIGN
   Adaptación para pantallas pequeñas (móviles y tablets)
   ============================================================================ */
@media (max-width: 768px) {
    /* Hero más pequeño en móviles */
    .hero h1 {
        font-size: 2.5rem;              /* Título más pequeño */
    }

    .hero p {
        font-size: 1.2rem;              /* Subtítulo más pequeño */
    }

    /* Navegación más compacta */
    .nav-links {
        gap: 1rem;                      /* Menos espacio entre links */
    }

    /* Grid de proyectos en una sola columna */
    .projects-grid {
        grid-template-columns: 1fr;     /* Una columna en móviles */
    }

    /* Título de sección más pequeño */
    .section-title {
        font-size: 2rem;
    }

    /* Imagen de proyecto más pequeña en móviles */
    .project-image {
        height: 200px;                  /* Altura reducida */
    }
}

/* ============================================================================
   FIN DE LOS ESTILOS
   ============================================================================ */