/* BOTONES */
.btn {
    .elementor-button-link {
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
        border-radius: 0;
        border: 2px solid var(--c-azul);
        background: transparent !important;
        color: var(--c-azul) !important;
        padding: 12px 30px;
        position: relative;
        z-index: 0;
        transition: all 0.35s ease-in-out;

        &::before {
            content: '';
            background-color: var(--c-naranja);
            width: 30px;
            height: 30px;
            transform: rotate(45deg);
            position: absolute;
            left: calc(100% - 14px);
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 1;
            transition: all 0.35s ease-in-out;
        }

        &::after {
            content: '';
            background-color: var(--c-naranja);
            width: 0;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: -1;
            transition: all 0.35s ease-in-out;
        }

        &:hover {
            color: var(--c-blanco) !important;
            border-color: var(--c-naranja);

            &::before {
                transform: rotate(225deg);
                background-color: var(--c-azul);
            }
            &::after {
                width: 100%;
            }
        }
    }
}

.btn-secundario {
    .elementor-button-link {
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
        border-radius: 0;
        background: var(--c-azul) !important;
        color: var(--c-blanco) !important;
        padding: 12px 40px;
        position: relative;
        z-index: 0;
        margin-left: 20px;
        transition: all 0.35s ease-in-out;

        &::before {
            content: '';
            background-color: var(--c-naranja);
            width: 40px;
            height: 40px;
            position: absolute;
            left: -20px;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 200px;
            z-index: 1;
            transition: all 0.35s ease-in-out;
        }

        &::after {
            content: '';
            background-color: var(--c-naranja);
            width: 0;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: -1;
            transition: all 0.35s ease-in-out;
        }

        &:hover {
            margin-left: 0;
            
            &::before {
                background-color: var(--c-azul);
                left: calc(100% - 20px);
            }
            &::after {
                width: 100%;
            }
        }
    }
}

.btn-secundario {
    .elementor-button-link {
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
        border-radius: 0;
        background: var(--c-azul) !important;
        color: var(--c-blanco) !important;
        padding: 12px 40px;
        position: relative;
        z-index: 0;
        margin-left: 20px;
        transition: all 0.35s ease-in-out;

        &::before {
            content: '';
            background-color: var(--c-naranja);
            width: 40px;
            height: 40px;
            position: absolute;
            left: -20px;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 200px;
            z-index: 1;
            transition: all 0.35s ease-in-out;
        }

        &::after {
            content: '';
            background-color: var(--c-naranja);
            width: 0;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: -1;
            transition: all 0.35s ease-in-out;
        }

        &:hover {
            margin-left: 0;
            
            &::before {
                background-color: var(--c-azul);
                left: calc(100% - 20px);
            }
            &::after {
                width: 100%;
            }
        }
    }
}

.btn-blanco {
    .elementor-button-link {
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
        border-radius: 0;
        background: var(--c-blanco) !important;
        color: var(--c-azul) !important;
        padding: 12px 40px;
        position: relative;
        z-index: 0;
        margin-left: 20px;
        transition: all 0.35s ease-in-out;

        &::before {
            content: '';
            background-color: var(--c-naranja);
            width: 40px;
            height: 40px;
            position: absolute;
            left: -20px;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 200px;
            z-index: 1;
            transition: all 0.35s ease-in-out;
        }

        &::after {
            content: '';
            background-color: var(--c-naranja);
            width: 0;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: -1;
            transition: all 0.35s ease-in-out;
        }

        &:hover {
            margin-left: 0;
            color: var(--c-blanco) !important;
            
            &::before {
                background-color: var(--c-blanco);
                left: calc(100% - 20px);
            }
            &::after {
                width: 100%;
            }
        }
    }
}