/* Reset general */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.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;
}

/* En móviles: mostrar toda la imagen, aunque no cubra todo */
@media (max-width: 600px) {
    .svg-image {
        /*object-fit: contain;*/
        object-fit: scale-down;
    }
}
/* Contenedor de botones */
.buttons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem; /* Espacio entre botones */
    flex-direction: row; /* Horizontal en desktop */
}

/* Estilos para los botones */
.buttons-container a {
    text-align: center;
    transition: transform 0.3s ease;
}

.btn-image {
    height: auto;
    max-width: 20vw;
    transition: transform 0.3s ease;
}

/* Hover */
.buttons-container a:hover .btn-image {
    transform: scale(1.05);
}

/* Tablets */
@media (max-width: 1200px) {
    .btn-image {
        max-width: 30vw;
    }
    .buttons-text-box {
        font-size: 20px;
        width: 80%;
    }
}

/* Móviles */
@media (max-width: 600px) {
    .buttons-container {
        flex-direction: column; /* Vertical en móvil */
        gap: 1.5rem;
    }

    .btn-image {
        max-width: 40vw;
    }

    .buttons-text-box {
        font-size: 20px;
        top: 60%; /* se adapta mejor en móviles */
    }
}
.buttons-text-box {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    backdrop-filter: blur(5px);
    font-weight: bold;
    z-index: 5;
}