.scroll_down {
display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;    
    overflow: visible;
    cursor: pointer;    
    width: 100vw;
    position: fixed;
    z-index: 16;
    bottom: 0; 
    margin: auto;
    margin-bottom: 28px;    
    color: white;
    text-align: center;
    font-size: 100%;
}

.scroll_down img{
    width: 80%;
    margin-top: 6px;
    height: 5vw;
}

/* texto animado */
.cta {
display: inline-flex;
gap: 0.06em;
font: 700 15px/1.1 system-ui, sans-serif;
letter-spacing: 0.5em;
text-transform: uppercase;
color: #ed1cd2;
}

.char {
display: inline-block;
opacity: 1;
transform: translateY(4px);
animation: bounce 1.2s cubic-bezier(.2,.7,.3,1) infinite both;
    }
@keyframes bounce {
0%, 100% { opacity: 0.5; transform: translateY(1px); }
40% { opacity: 1; transform: translateY(-1px); }
}

/* flecha animada */
.arrow {
width: 40px;
height: auto;
fill: #33ff00;
opacity: 0.3;
animation: arrowMove 1.2s ease-in-out infinite;
filter: invert(56%) sepia(50%) saturate(500%) hue-rotate(280deg);

}

@keyframes arrowMove {
0%, 100% { transform: translateY(-1px); opacity: 0.3; }
50% { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
.char, .arrow {
    animation: none;
    opacity: 1;
    transform: none;
}
}