.button-container {
    display: flex;
    flex-direction: column; /* Por defecto, uno debajo del otro */
    gap: 15px; /* Espacio entre los botones */
    align-items: flex-start; /* Alinea al inicio del contenedor */
}

/* Botón Descargar */
.custom-download-button {
    padding: 10px 20px;
    background-color: magenta;
    color: white;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
    display: block;
}

.custom-download-button:hover {
    background-color: #d400d4;
}

/* Botón Compartir */
.share-button {
    margin: 0;
}

.btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #fff;
    color: black;
    text-decoration: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: background-color 0.3s ease;
}

.btn-share:hover {
    background-color: #ddd;
}

.icono-compartir {
    width: 20px;
    height: 20px;
}

/* Ajustes para vista móvil */
@media (max-width: 768px) {
    .button-container {
        flex-direction: row; /* Alinea los botones horizontalmente */
        justify-content: center; /* Centra los botones horizontalmente */
        align-items: center; /* Alinea verticalmente */
    }

    .custom-download-button {
        flex: 1; /* Opcional: hacer que ambos botones tengan el mismo ancho */
        text-align: center;
    }

    .btn-share {
        flex: 0; /* Mantiene el tamaño natural del botón compartir */
    }
}