.skills-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 24px 0;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

    mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}



.skills-track {
    display: inline-flex;
    align-items: center;
    gap: 70px;

    animation: scrollSkills 22s linear infinite;
}


/* TEXTO */

.skills-track span {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 600; /* SemiBold */

    text-transform: uppercase;
    letter-spacing: 0.04em;

    color: #FE5900;

    opacity: 0.95;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* HOVER */

.skills-track span:hover {
    transform: translateY(-2px);
    opacity: 1;
}


/* ANIMACIÓN */

@keyframes scrollSkills {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}

.custom-logo{
    transition:
        transform 0.45s cubic-bezier(.16,1,.3,1),
        filter 0.45s ease;

    transform-origin:center;
}

.custom-logo:hover{
    transform:
        scale(1.08)
        translateY(-2px);

    filter:
        drop-shadow(0 10px 25px rgba(254,89,0,0.28))
        brightness(1.05);
}

.evolucion-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    padding: 20px 0;
}

.evolucion-text {

    /* ESTILO */

    font-size: 70pt;
    line-height: 0.95;
    text-transform: lowercase;

    color: #F15808;

    /* RENDER */

    text-rendering: geometricPrecision;

    /* ANIMACIÓN */

    animation: brutalTypeChange 4s infinite steps(1);
}



/* ANIMACIÓN */

@keyframes brutalTypeChange {

    0% {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        letter-spacing: 0;
        transform: scale(1);
    }

    10% {
        font-family: 'Bebas Neue', sans-serif;
        font-weight: 400;
        letter-spacing: 0.06em;
        transform: scale(1.03);
    }

    20% {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        letter-spacing: -0.02em;
        transform: scale(0.98);
    }

    30% {
        font-family: 'Oswald', sans-serif;
        font-weight: 500;
        letter-spacing: 0.08em;
        transform: scale(1.02);
    }

    40% {
        font-family: 'Anton', sans-serif;
        font-weight: 400;
        letter-spacing: 0.01em;
        transform: scale(1.05);
    }

    50% {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 600;
        letter-spacing: -0.01em;
        transform: scale(0.97);
    }

    60% {
        font-family: 'Archivo Black', sans-serif;
        font-weight: 700;
        letter-spacing: 0.03em;
        transform: scale(1.04);
    }

    70% {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 500;
        letter-spacing: -0.03em;
        transform: scale(0.99);
    }

    80% {
        font-family: 'Abril Fatface', serif;
        font-weight: 400;
        letter-spacing: 0;
        transform: scale(1.02);
    }

    90% {
        font-family: 'Inter Tight', sans-serif;
        font-weight: 700;
        letter-spacing: -0.04em;
        transform: scale(1);
    }

    100% {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        letter-spacing: 0;
        transform: scale(1);
    }
}

/* CONTENEDOR */

.circular-text {
    position: relative;

    width: 320px;
    height: 320px;

    display: flex;
    justify-content: center;
    align-items: center;
}


/* TEXTO CIRCULAR */

.circular-text p {

    position: absolute;

    width: 100%;
    height: 100%;

    margin: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.15em;

    color: #F15808;

    animation: rotateText 14s linear infinite;
}


/* CADA LETRA */

.circular-text p span {
    position: absolute;
    left: 50%;
    top: 50%;

    transform-origin: 0 160px;
}


/* ANIMACIÓN */

@keyframes rotateText {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}