.boton-lateral {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 9999;
    border-radius: 80px 0px 0px 80px;
    border-style: solid;
    border-width: 3px 0px 3px 3px;
    border-color: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 10px 15px 8px 20px;
}

.boton-lateral .lottie-icon {
    width: 90px;
    height: 90px;
    margin-right: 10px;
}

.boton-lateral span {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.4px;
}
#boton-te-llamamos a {text-align: center;width: 118px;}

.boton-lateral {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 15px;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

/* Estilos para el botón horizontal (actual) */
.boton-horizontal {
    flex-direction: row;
}

/* Estilos para el botón vertical */
.boton-vertical {
    flex-direction: column;
    text-align: center;
}

.boton-vertical .lottie-icon {
    margin-bottom: 5px; /* Espacio entre el icono y el texto en la versión vertical */
}

.boton-lateral .lottie-icon {
    width: 70px;
    height: 70px;
}
.boton-lateral.boton-vertical {
    border-radius: 17px 0px 0px 17px;
    padding: 10px 0px;
    width: 80px;
}
.boton-vertical span {
    writing-mode: vertical-rl; /* Escribe el texto en formato vertical de derecha a izquierda */
    transform: rotate(180deg); /* Rota el texto para leer de arriba hacia abajo */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}
.boton-lateral.boton-vertical .lottie-icon {
    width: 59px;
    height: 59px;
    margin-right: 0px;
}


/* Ajuste para dispositivos móviles */
@media (max-width: 768px) {
    .boton-lateral, .boton-lateral.boton-vertical {
        top: auto;
        bottom: 0;           /* Alineado con el borde inferior */
        right: 0;            /* Posición en el borde derecho */
        width: 100%;         /* Ocupa el 100% de ancho */
        transform: none;     /* Elimina la transformación de centrado */
        border-radius: 0;    /* Sin bordes redondeados */
        border: none;        /* Elimina los bordes */
        padding: 3px 0;     /* Ajusta el padding para un diseño más limpio */
        justify-content: center; /* Centra el contenido dentro del botón */
    }
    .boton-vertical span {
        writing-mode: initial; /* Escribe el texto en formato vertical de derecha a izquierda */
         /* Rota el texto para leer de arriba hacia abajo */
         /* Evita que el texto se divida en varias líneas */
    }
    .boton-vertical {
        flex-direction: row;
        text-align: center;
    }
    #boton-te-llamamos a {
        text-align: center;
        width: 164px;
    }
    .boton-lateral .lottie-icon {
        width: 69px;
        height: 69px;
    }
}