.animatedContainer {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.dotsContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Los puntos quedan detrás */
    pointer-events: none; /* Los puntos no interfieren con los clics */
}

.childrenContainer {
    position: relative;
    z-index: 1; /* El contenido queda al frente */
    pointer-events: auto; /* Permite interactuar con el contenido */
    isolation: isolate; /* Evitar interferencia con puntos animados */
    width: 100%; /*esta propiedad es nueva y no se si puede causar conflictos. La agregue para que el contenido se expanda a todo el ancho disponible*/
}
