.container-reservar {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    position: relative;
    z-index: 0;
    margin: 20px 0; /* Agregado para evitar solapamiento */
    padding: 10px 0; /* Espaciado interno opcional */
}

.btn-circular-reservar {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: visible;
    text-decoration: none;
    display: inline-block;
    background-color: transparent;
}

.text-svg-reservar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: 3s linear infinite rotate;
    overflow: visible;
    z-index: 10;
    transition: animation-play-state 0.3s;
}

.btn-circular-reservar:hover .text-svg-reservar {
    animation-play-state: paused;
}

text {
    font-size: 22px;
    font-weight: 700;
    fill: #FFF;
    text-anchor: middle;
    letter-spacing: 1px;
    z-index: 100;
    overflow: visible;
    transition: fill 0.3s;
}

.btn-circular-reservar:hover text {
    fill: #A8E600;
}

.center-text-reservar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    pointer-events: none;
    z-index: 20;
    transition: color 0.3s;
}

.btn-circular-reservar:hover .center-text-reservar,
.btn-circular-reservar:hover ~ .reservation-text-reservar {
    color: #a8e600;
}

.reservation-text-reservar {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    transition: color 0.3s;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(180deg);
    }
}

@media only screen and (max-width: 768px) {
    .container-reservar {
        margin: 20px 0; /* Asegura espacio en dispositivos móviles */
        padding: 10px 0; /* Espaciado interno opcional */
    }
}