style.css

/* ======================================= */
/* KEYFRAMES: Movimiento de Barrido (Izquierda a Derecha) */
/* ======================================= */
@keyframes gradient-sweep {
    /* Mueve el fondo (el gradiente) desde la izquierda hacia la derecha */
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

:root {
    /* Paleta de Colores Futurista/Neón */
    --primary-color: #00FFFF; /* Cian Neón para acentos (Tu color 'azul') */
    --secondary-color: #FF00FF; /* Magenta Neón para hover/destacado */
    --bg-color: #121212; /* Fondo muy oscuro, casi negro */
    --text-color: #E0E0E0; /* Texto Principal Claro (Tu color 'gris' inicial) */
    --card-bg: #1A1A1A; /* Fondo de tarjeta un poco más claro que el fondo */
    --border-color: #333333; /* Borde sutil oscuro */
    
    /* Gradiente para el barrido: Mezcla de los colores Neón principales */
    --sweep-gradient: linear-gradient(
        to right,
        var(--secondary-color), /* Magenta */
        var(--primary-color), /* Cian */
        #00FF00, /* Verde */
        var(--secondary-color) /* Magenta (Para un bucle suave) */
    );

    /* Color para el efecto de relleno líquido del botón */
    --liquid-fill-color: #00BFFF; /* Un azul más suave para el relleno */
}

/* ------------------- Base y Reset ------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    margin-bottom: 1rem;
    color: var(--text-color); 
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

/* ------------------- Hero Section ------------------- */
.hero {
    background: #000000; 
    color: #ffffff;
    padding: 100px 0;
    padding-bottom: 120px; /* Espacio para la barra animada */
    text-align: center;
    position: relative; 
    overflow: hidden; 
    border-bottom: none;
    box-shadow: none;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--primary-color); 
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    color: #a0a0a0;
}

/* BARRA 1: Debajo del Hero (Barrido Sincronizado) */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 2px; 
    z-index: 5;
    
    /* APLICACIÓN DEL BARRIDO SINCRONIZADO */
    background: var(--sweep-gradient);
    background-size: 300% 100%; 
    animation: gradient-sweep 4s infinite linear; 
    
    /* Efecto de Neón */
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); 
}

/* Estilos base para el botón */
.btn {
    display: inline-block;
    background: var(--primary-color);
    color: var(--bg-color); 
    padding: 12px 30px;
    border-radius: 50px; 
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
}

.btn:hover {
    background-color: var(--secondary-color);
    color: #FFFFFF;
    transform: scale(1.05);
    box-shadow: 0 0 25px var(--secondary-color);
}

/* ======================================= */
/* EFECTO LIQUID FILL PARA BOTONES ESPECÍFICOS */
/* ======================================= */
.btn-liquid {
    position: relative; /* Esencial para posicionar el pseudo-elemento */
    overflow: hidden; /* Oculta el pseudo-elemento que está fuera del botón */
    z-index: 1; /* Asegura que el texto esté por encima del líquido */
    color: var(--text-color); /* Color del texto inicial */
    background: none; /* Empezamos sin fondo para que el líquido lo genere */
    border: 2px solid var(--primary-color); /* Borde neón */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); /* Sombra neón inicial */
    transition: all 0.4s ease-out; /* Transición suave para el color del texto y la sombra */
}

.btn-liquid::before {
    content: '';
    position: absolute;
    top: 50%; /* Centrado verticalmente */
    left: 50%; /* Centrado horizontalmente */
    width: 0%; /* Empieza sin ancho */
    height: 180%; /* Altura mayor para un efecto de "desbordamiento" */
    background: var(--liquid-fill-color); /* Color del líquido */
    border-radius: 50%; /* Forma circular para el efecto */
    transition: all 0.6s ease-out; /* Transición para el crecimiento del líquido */
    transform: translate(-50%, -50%) scale(0); /* Empieza pequeño y centrado */
    z-index: -1; /* Detrás del texto del botón */
}

.btn-liquid:hover {
    color: var(--bg-color); /* Cambia el color del texto cuando el líquido lo cubre */
    transform: scale(1.05);
    box-shadow: 0 0 25px var(--liquid-fill-color); /* Sombra neón del color de relleno */
    border-color: var(--liquid-fill-color); /* El borde se llena con el color del líquido */
}

.btn-liquid:hover::before {
    transform: translate(-50%, -50%) scale(1); /* El líquido crece y llena el botón */
    width: 180%; /* Ancho mayor para asegurar que cubra todo */
}


/* ------------------- Section de Tecnologías ------------------- */
.tech-stack {
    padding: 60px 20px;
    background-color: var(--card-bg);
    padding-bottom: 80px; /* Espacio para la barra */
    text-align: center;
    position: relative; 
    overflow: hidden;
    border-bottom: none; 
    box-shadow: none;
}

.tech-stack h2 {
    color: var(--primary-color);
    margin-bottom: 30px;
}

.tech-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 20px 0;
}

.tech-icon {
    font-size: 3rem;
    color: var(--text-color);
    opacity: 0.8;
    transition: color 0.3s, transform 0.3s;
}

.tech-icon:hover {
    color: var(--primary-color);
    transform: translateY(-5px);
    text-shadow: 0 0 8px var(--primary-color);
}

/* BARRA 2: Debajo de la Sección de Tecnologías (Barrido Sincronizado) */
.tech-stack::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 2px; 
    z-index: 5;
    
    /* APLICACIÓN DEL BARRIDO SINCRONIZADO */
    background: var(--sweep-gradient);
    background-size: 300% 100%; 
    animation: gradient-sweep 4s infinite linear; 
    
    /* Efecto de Neón */
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); 
}

/* ------------------- Projects Carousel ------------------- */
.projects-carousel {
    padding: 80px 20px; 
    position: relative; 
    overflow: hidden; 
}

.projects-carousel h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.2rem;
    color: var(--primary-color);
}

.carousel-wrapper {
    overflow: hidden; 
    padding: 20px 0; 
    margin: 0 60px; 
}

.carousel-track {
    display: flex; 
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

/* Estilo de la Tarjeta del Proyecto */
.project-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0; 
    width: 350px; 
    margin-right: 30px; 
    display: flex;
    flex-direction: column;
    color: var(--text-color);
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), 0 12px 25px rgba(0, 0, 0, 0.5);
}

.project-card img {
    width: 100%;
    height: auto; 
    object-fit: contain; 
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s;
}

.project-card:hover img {
    border-bottom: 1px solid var(--primary-color);
}

.card-content {
    padding: 20px;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.card-content h3 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.card-content p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    color: #b0b0b0;
    flex-grow: 1;
}

/* CORRECCIÓN: Estado Inicial (Gris) y Hover (Cian) */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    /* Color inicial: El texto principal es gris (var(--text-color)) */
    color: var(--text-color); /* <-- CÓDIGO CORREGIDO: Inicia en Gris */
    font-weight: bold;
    transition: color 0.3s ease; /* Transición para el color del texto */
}

/* El span y el i heredan el color del .card-footer, 
   pero la flecha necesita una transición de color individual. */

.card-footer i {
    transition: transform 0.3s ease, color 0.3s ease; /* Aseguramos la transición de color en la flecha */
}

/* CAMBIO: Al hacer hover en la tarjeta, el color del pie cambia a Cian (Azul) */
.project-card:hover .card-footer {
    color: var(--primary-color); /* <-- CÓDIGO CORREGIDO: Cambia a Cian (Azul) al hacer hover */
}

.project-card:hover .card-footer i {
    transform: translateX(8px);
    /* Ya no necesita color aquí porque el padre (.card-footer) ya lo establece, 
       pero lo dejamos para más seguridad/especificidad si fuera necesario: */
    color: var(--primary-color); 
}


/* Estilo de Botones del Carrusel (Estático) */
.carousel-btn {
    position: absolute;
    top: 55%; 
    transform: translateY(-50%);
    background: rgba(0, 255, 255, 0.1); 
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    opacity: 0.9;
    transition: all 0.3s;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    opacity: 1;
    background: var(--primary-color); 
    color: var(--bg-color); 
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 25px var(--secondary-color);
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
    border-color: #555;
    color: #777;
    box-shadow: none;
    transform: translateY(-50%);
}

/* Estilo para Tarjeta 'Próximamente' */
.coming-soon {
    opacity: 0.5;
    background-color: #000000;
    pointer-events: none;
    box-shadow: none;
}
.coming-soon .card-content {
    text-align: center;
    justify-content: center;
}
.coming-soon .card-footer {
    color: #777;
    justify-content: center;
    gap: 10px;
    border-top: 1px dashed #555;
}
.coming-soon .card-content h3 {
    color: #777;
}
.coming-soon .card-footer i {
    color: #777;
}

/* ------------------- Footer ------------------- */
footer {
    text-align: center;
    padding: 30px 0;
    background: #000000;
    color: var(--text-color); 
    font-size: 0.85rem;
    position: relative; 
    overflow: hidden; 
    border-top: none;
    box-shadow: none;
}

/* BARRA 3: Arriba del Footer (Barrido Sincronizado) */
footer::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 2px; 
    z-index: 5;
    
    /* APLICACIÓN DEL BARRIDO SINCRONIZADO */
    background: var(--sweep-gradient);
    background-size: 300% 100%; 
    animation: gradient-sweep 4s infinite linear; 
    
    /* Efecto de Neón */
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); 
}

/* ------------------- Responsividad ------------------- */
@media (max-width: 900px) {
    .carousel-wrapper {
        margin: 0 20px; 
    }
    .project-card {
        width: 300px;
        margin-right: 15px;
    }
    .prev-btn {
        left: 0px;
    }
    .next-btn {
        right: 0px;
    }
}

@media (max-width: 600px) {
    .hero {
        padding: 60px 0;
        padding-bottom: 80px; 
    }
    .hero h1 {
        font-size: 2.5rem;
    }
    .carousel-wrapper {
        margin: 0; 
    }
    .project-card {
        width: 85vw; 
        margin-left: 7.5vw;
        margin-right: 7.5vw;
    }
    .projects-carousel {
        padding: 50px 0;
    }
    .tech-stack {
        padding-bottom: 70px; 
    }
    .carousel-btn {
        top: 65%; 
        padding: 8px 10px;
        width: 40px;
        height: 40px;
    }
}