.elementor-570 .elementor-element.elementor-element-3c7dd2a5{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-570 .elementor-element.elementor-element-2988cb32{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-2988cb32 *//* style.css */

#scrollToTopBtn {
    /* --- Posicionamiento --- */
    position: fixed; /* Se mantiene en la pantalla aunque hagas scroll */
    bottom: 30px;
    right: 30px;
    z-index: 1000; /* Se asegura de que esté por encima de otros elementos */

    /* --- Apariencia --- */
    background-color: #f39c12; /* Un tono de anaranjado agradable */
    color: white;
    border: none;
    border-radius: 50%; /* Lo hace circular */
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    /* --- Comportamiento inicial (Oculto) --- */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Empieza un poco más abajo para el efecto de aparición */

    /* --- Transiciones suaves --- */
    transition: all 0.4s ease-in-out;
}

/* Estilo para cuando el botón debe ser visible */
#scrollToTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Vuelve a su posición original */
}

/* Efecto al pasar el mouse por encima */
#scrollToTopBtn:hover {
    background-color: #e68a00; /* Un anaranjado un poco más oscuro */
    transform: translateY(-5px); /* Se eleva un poco */
}/* End custom CSS */