.elementor-206 .elementor-element.elementor-element-8904787{--spacer-size:70px;}.elementor-206 .elementor-element.elementor-element-e4dfe7a{--spacer-size:70px;}.elementor-206 .elementor-element.elementor-element-c45ea31{--spacer-size:365px;}@media(max-width:1024px){.elementor-206 .elementor-element.elementor-element-8904787{--spacer-size:50px;}.elementor-206 .elementor-element.elementor-element-e4dfe7a{--spacer-size:50px;}.elementor-206 .elementor-element.elementor-element-c45ea31{--spacer-size:225px;}}@media(max-width:767px){.elementor-206 .elementor-element.elementor-element-c45ea31{--spacer-size:1px;}}/* Start custom CSS *//* =========================================
   HUMAN BEING — EXPLORE BUTTON
   ========================================= */


/* CONTENEDOR PRINCIPAL */
.hb-explore {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;

    min-height: 70px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;

    overflow: hidden;
    cursor: pointer;

    transition:
        transform .65s cubic-bezier(.22,1,.36,1);
}


/* =========================================
   TEXTO EXPLORAR
   ========================================= */

.hb-explore .hb-explore-text {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

    transition:
        transform .75s cubic-bezier(.22,1,.36,1),
        letter-spacing .75s cubic-bezier(.22,1,.36,1);
}


/* =========================================
   CONTENEDOR DE LÍNEA
   NO SE PINTA EL DIV
   ========================================= */

.hb-explore .hb-explore-line {
    position: relative;

    flex-grow: 1 !important;
    flex-shrink: 1 !important;

    width: auto !important;

    /*
    Le damos altura únicamente para tener
    espacio donde dibujar la flecha.
    */
    height: 24px !important;
    min-height: 24px !important;

    margin-left: 38px;
    margin-right: 20px;

    /* MUY IMPORTANTE */
    background: transparent !important;

    align-self: center;

    transform-origin: right center;

    transition:
        transform .75s cubic-bezier(.22,1,.36,1);
}


/* =========================================
   LÍNEA HORIZONTAL
   ========================================= */

.hb-explore .hb-explore-line::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 2px;

    background: #fff;

    transform: translateY(-50%);

    pointer-events: none;
}


/* =========================================
   PUNTA DE FLECHA
   ========================================= */

.hb-explore .hb-explore-line::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 13px;
    height: 13px;

    border-top: 2px solid #fff;
    border-right: 2px solid #fff;

    transform:
        translateY(-50%)
        rotate(45deg);

    transform-origin: center;

    pointer-events: none;

    transition:
        transform .75s cubic-bezier(.22,1,.36,1);
}


/* =========================================
   HOVER
   ========================================= */


/* EL BOTÓN SUBE MUY LIGERAMENTE */
.hb-explore:hover {
    transform: translateY(-2px);
}


/* EXPLORAR VIAJA HACIA LA DERECHA */
.hb-explore:hover .hb-explore-text {
    transform: translateX(75px);

    letter-spacing: .30em;
}


/* LA FLECHA COMPLETA SE MUEVE Y CONTRAE */
.hb-explore:hover .hb-explore-line {
    transform:
        translateX(35px)
        scaleX(.72);
}


/* PEQUEÑO MOVIMIENTO EXTRA DE LA PUNTA */
.hb-explore:hover .hb-explore-line::after {
    transform:
        translateY(-50%)
        rotate(45deg)
        translate(3px, -3px);
}

/* =========================================
   HUMAN BEING — EXPLORE INVERTIDO
   ========================================= */

.hb-explore.hb-explore-invert {
    background: #fff !important;
    border-color: #000 !important;
}


/* TEXTO NEGRO */
.hb-explore.hb-explore-invert .hb-explore-text {
    color: #000 !important;
}


/* LÍNEA NEGRA */
.hb-explore.hb-explore-invert .hb-explore-line::before {
    background: #000 !important;
}


/* PUNTA DE FLECHA NEGRA */
.hb-explore.hb-explore-invert .hb-explore-line::after {
    border-top-color: #000 !important;
    border-right-color: #000 !important;
}/* End custom CSS */