.image-container-wrapper {
            display: flex;
            justify-content: center;
            align-items: center; /* Centra la imagen verticalmente */
            margin-top: 20px; /* Ajusta el margen superior según sea necesario */
        }
        .image-container {
            position: relative;
            width: 700px; /* Ajusta el ancho según sea necesario */
            height: 200px; /* Ajusta la altura según sea necesario */
        }

        
        .image-mensaje1 {
        width: 1200px;
        max-width: 100%; /* Para hacerlo responsive */
        }
        .image-mensaje2{
            width: 450px;
            max-width: 100%; /* Para hacerlo responsive */
        }
        .base-image {
            position: absolute; /* Permite el control absoluto dentro del contenedor */
            top: 6%; /* Ajusta la posición vertical */
            left: 65%; /* Mueve la imagen hacia la izquierda */
            transform: translate(-60%, -50%); /* Ajusta el desplazamiento horizontal y centra verticalmente */
            width: 145%; /* Incrementa el tamaño de la imagen */
            height: 450px; /* Incrementa la altura de la imagen */
        }
        .overlay-button {
            position: absolute;
            cursor: pointer;
        }
        .button1, .button2, .button3, .button4 {
            width: auto; /* Ajusta el tamaño del botón según sea necesario */
            height: 160px; /* Ajusta el tamaño del botón según sea necesario */
        }
        .button1 { top: -68px; left: -20px; }
        .button2 { top: -68px; left: 185px; }
        .button3 { top: -68px; left: 390px; }
        .button4 { top: -68px; left: 595px; }

        /* Imagen que aparece sobre o debajo del botón */
        .hover-image {
            display: none;
            position: absolute;
            width: 200px;
            height: auto;
        }

        .button1:hover ~ .button1-image,
        .button2:hover ~ .button2-image,
        .button3:hover ~ .button3-image,
        .button4:hover ~ .button4-image {
            display: block;
        }

        .button1-image { top: -230px; left: -38px; }  /* Ajusta la posición según sea necesario */
        .button2-image { top: 50px; left: 167px; } /* Ajusta la posición según sea necesario */
        .button3-image { top: -230px; left: 370px; } /* Ajusta la posición según sea necesario */
        .button4-image { top: 50px; left: 575px; } /* Ajusta la posición según sea necesario */


        @media (max-width: 768px) {

        p {
            font-size: 15px;
            line-height: 1.5; 
        }
        .image-mensaje1 {
        width: 600px;
        max-width: 100%; /* Para hacerlo responsive */
        }
        .image-mensaje2{
            width: 260px;
            max-width: 100%; /* Para hacerlo responsive */
        }
        .image-mensaje3{
            width: 40px;
            max-width: 100%; /* Para hacerlo responsive */
        }
        .base-image {
            position: absolute; /* Permite el control absoluto dentro del contenedor */
            top: -40%; /* Ajusta la posición vertical */
            left: 60%; /* Mueve la imagen hacia la izquierda */
            transform: translate(-60%, -50%); /* Ajusta el desplazamiento horizontal y centra verticalmente */
            width: 130%; /* Incrementa el tamaño de la imagen */
            height: 310px; /* Incrementa la altura de la imagen */
        }

        .button1, .button2, .button3, .button4 {
            width: auto; /* Ajusta el tamaño del botón según sea necesario */
            height: 70px; /* Ajusta el tamaño del botón según sea necesario */
        }
        .button1 { top: -115px; left: -20px; }
        .button2 { top: -115px; left: 75px; }
        .button3 { top: -115px; left: 165px; }
        .button4 { top: -115px; left: 265px; }

        /* Imagen que aparece sobre o debajo del botón */
        .hover-image {
            display: none;
            position: absolute;
            width: 100px;
            height: auto;
        }

        .button1:hover ~ .button1-image,
        .button2:hover ~ .button2-image,
        .button3:hover ~ .button3-image,
        .button4:hover ~ .button4-image {
            display: block;
        }

        .button1-image { top: -200px; left: -35px; }  /* Ajusta la posición según sea necesario */
        .button2-image { top: -70px; left: 65px; } /* Ajusta la posición según sea necesario */
        .button3-image { top: -200px; left: 155px; } /* Ajusta la posición según sea necesario */
        .button4-image { top: -70px; left: 240px; }
        }