/* Contenedor principal */
.svg-container {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: auto;
}

/* Imagen principal */
.svg-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Contenedor de botones */
.buttons-container {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Estilos generales para los botones */
.btn-image {
    position: absolute;
    transform: translate(-50%, -50%);
    height: auto;
    cursor: pointer;
}

/* Tamaños específicos de los botones */
#btn1 img, #btn2 img, #btn3 img, #btn4 img {
    max-width: 15vw; /* Tamaño base */
}

/* Botón 4 más grande */
#btn4 img {
    max-width: 25vw;
}

/*  Posiciones por defecto en pantallas grandes (botón 1 y 2 en vertical) */
#btn1 {
    position: absolute;
    top: 35%;
    left: 72%;
}

#btn2 {
    position: absolute;
    top: 53%;
    left: 72%;
}

#btn3 {
    position: absolute;
    top: 60%;
    left: 32%;
    font-size: 20px;
    color: #611232;
    font-style: oblique;
    font-weight: bolder;
}

#btn4 {
    position: absolute;
    top: 67%;
    left: 35%;
}

/*Tablets y pantallas medianas (botón 1 y 2 en horizontal) */
@media (max-width: 1200px) {
    .svg-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        margin-top: 10px;
    }
    #btn4 img {
        max-width: 50vw;
    }
    #btn1 img {
        max-width: 30vw;
    }
    #btn2 img {
        max-width: 30vw;
    }
    /*  Botones 1 y 2 en horizontal */
    #btn1, #btn2 {
        top: 43%;
        left: 50%;
        transform: translateX(-50%);
    }

    #btn1 {
        left: 30%;
    }

    #btn2 {
        left: 70%;
    }

    /*  Botones 3 y 4 centrados */
    #btn3, #btn4 {
        left: 50%;
        transform: translateX(-50%);
    }

    #btn3 {
        top: 65%;
    }

    #btn4 {
        top: 70%;
    }
}

/*  Móviles (botón 1 y 2 en horizontal) */
@media (max-width: 600px) {
    .svg-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        margin-top: 12px;
    }
    #btn4 img {
        max-width: 55vw;
    }
    #btn1 img {
        max-width: 30vw;
    }
    #btn2 img {
        max-width: 30vw;
    }
    /*  Botones 1 y 2 en horizontal */
    #btn1, #btn2 {
        top: 43%;
        left: 50%;
        transform: translateX(-50%);
    }

    #btn1 {
        left: 35%;
    }

    #btn2 {
        left: 71%;
    }

    /*  Botones 3 y 4 centrados */
    #btn3, #btn4 {
        left: 50%;
        transform: translateX(-50%);
    }

    #btn3 {
        top: 65%;
    }

    #btn4 {
        top: 72%;
    }
}