.elementor-1484 .elementor-element.elementor-element-1cc3bf7e{--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-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1484 .elementor-element.elementor-element-423808fe .elementor-button{background-color:var( --e-global-color-primary );font-family:"Roboto", Sans-serif;font-size:38px;font-weight:500;border-radius:50% 50% 50% 50%;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-1484 .elementor-element.elementor-element-1cc3bf7e{--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}}@media(min-width:768px){.elementor-1484 .elementor-element.elementor-element-1cc3bf7e{--width:80px;}}/* Start custom CSS for button, class: .elementor-element-423808fe */.elementor-1484 .elementor-element.elementor-element-423808fe .elementor-button{
     /* Establece Ancho y Alto para que sea cuadrado. El valor de 60px es solo un ejemplo. */
    width:80px;
    height: 80px;
    /* Centra el texto del botón */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Hace el círculo */
    border-radius: 50% !important; /* El 50% garantiza un círculo perfecto */
    padding: 0 !important; /* Quitamos el padding para que no interfiera con el Ancho/Alto */
}

@media (max-width: 767px){
.elementor-1484 .elementor-element.elementor-element-423808fe .elementor-button {
      width:60px;
    height:60px;
    font-size:30px;
    }
}

/* PASO 1: Ocultar el elemento por defecto y prepararlo para la transición */
.contenedor-scroll-visible {
    opacity: 0; /* Lo hace completamente transparente */
    visibility: hidden; /* Asegura que no sea interactivo ni ocupe espacio visualmente */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transición suave */
    /* Posicionamiento: Si es un botón flotante, asegúrate de que tiene un "position: fixed;"
       dentro de otro .elementor-1484 .elementor-element.elementor-element-423808fe para que se mantenga en el mismo lugar */
}

/* PASO 2: Regla para MOSTRAR el elemento cuando el JS añade la clase 'is-visible' */
.contenedor-scroll-visible.is-visible {
    opacity: 1; /* Lo hace completamente visible */
    visibility: visible; /* Lo hace visible e interactivo */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1cc3bf7e *//* 1. Oculta el contenedor por defecto y aplica la transición */
.contenedor-scroll-visible {
    /* POSICIONAMIENTO FIJO */
    position: fixed;        /* Lo fija a la ventana del navegador */
    bottom: 30px;           /* 30px desde el borde inferior */
    right: 30px;            /* 30px desde el borde derecho */
    z-index: 9999;          /* Asegura que esté por encima de otros elementos */

    /* OCULTAR Y TRANSICIÓN */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* 2. Clase para hacerlo visible (agregada por JavaScript) */
.contenedor-scroll-visible.is-visible {
    opacity: 1;
    visibility: visible;
}


@media (max-width: 767px){
    .contenedor-scroll-visible {
    position: fixed;       
    bottom: 5px;       
    right: 5px;   
}
}/* End custom CSS */
/* Start custom CSS */<script>
document.addEventListener("scroll", function() {
  const boton = document.querySelector(".mi-boton-flotante");
  
  if (window.scrollY > 200) {
    boton.classList.add("show");
  } else {
    boton.classList.remove("show");
  }
});
</script>/* End custom CSS */