:root {
    --z-space-height: 90px;
}

body {
    color: var(--tr-z3-text-color);
    max-width: 100vw;
}

div.main_content {
    padding-top: 15vh;
}

.mov {
    display: none;
}
.rotating-border-btn {
    position: relative;
    padding: 14px 32px;
    background: #111;
    color: var(--tr-z3-gray);
    font-size: 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
}

    /* Borde girando */
    .rotating-border-btn::before {
        content: "";
        position: absolute;
        inset: -60px;
        background: conic-gradient(from 0deg, #2c2c2c, #db8041 10%, #ffffff, #5d47c6, #001cc7);
        border-radius: inherit;
        z-index: -1;
        animation: spin 3s linear infinite;
        background: linear-gradient(#1d1d1b 0%, #2d38f9 16%, #a92d76 40%, #f8d851 60%, #97bd5a 80%, #ffffff 100%);
    }

    /* Relleno interior */
    .rotating-border-btn::after {
        content: "";
        position: absolute;
        inset: 3px;
        background: #F5F5F7;
        border-radius: inherit;
        z-index: -1;
    }

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.cont_inicio {
    margin: 0px 2.5%;
    border-radius: 50px;
    background: #FFFFFF;
    background: linear-gradient(180deg, #FFFFFF 0%, #DDDCEA 100%);
    padding: 45px 25px 0px;
    justify-items: center;
}

    .cont_inicio > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
    }

        .cont_inicio > div > a {
            margin-bottom: -60px;
            z-index: 9;
        }

    .cont_inicio > h1 {
        padding: 0px;
        color: var(--tr-z3-text-title);
        font-weight: 700;
        margin-bottom: 0px;
        text-align: center;
        font-size: 4.2vw;
        line-height: 1.1;
    }

        .cont_inicio > h1:nth-child(1),
        .cont_inicio > h1:nth-child(3) {
            background: #2D38F9;
            background: linear-gradient(to right, #2D38F9 0%, #1C1C1C 60%, #8D64FF 85%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    .cont_inicio > h4 {
        font-size: 0.9vw;
        font-weight: 400;
        text-align: center;
        margin: 13px 25px 15px;
        max-width: 500px;
    }

    .cont_inicio > div > div {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2%;
    }

        .cont_inicio > div > div img {
            width: 20%;
            margin-top: 2%;
        }

    .cont_inicio > div button {
        margin-bottom: calc(var(--tr-z3-mrg-out)*-1);
    }

    .cont_inicio > div > div img#img_central {
        margin-bottom: calc(var(--tr-z3-mrg-out) * -1.75);
        margin-top: calc(var(--tr-z3-mrg-out) * .5);
        width: 22.5%;
        object-fit: cover;
        object-position: 49% center;
    }

#porque-trapichar {
    padding: 5px 2.5% var(--z-space-height);
    position: relative;
    z-index: 2;
    background-color: #ffffff;
}

    #porque-trapichar > div {
        display: flex;
        flex-direction: row;
        gap: 2.5%;
    }

        #porque-trapichar > div:first-child {
            width: 85%;
            margin: 2.5% 7.5% 3%;
            padding: 0px 0%;
        }

        #porque-trapichar > div > div {
            display: flex;
            flex-direction: column;
            width: 50%;
            align-self: center;
        }

            #porque-trapichar > div > div h3 {
                font-size: 1.65vw;
                font-weight: 600;
                margin-bottom: 0px;
            }

            #porque-trapichar > div > div h6 {
                font-weight: 600;
                color: #d3d3d3;
                font-size: 1vw;
                margin-bottom: 0px;
            }

            #porque-trapichar > div > div h4 {
                font-size: 1.3vw;
                font-weight: 400;
                line-height: 1.2;
                margin-bottom: 0px;
            }

        #porque-trapichar > div img {
            border-radius: 15px;
            max-width: 100%;
        }

.swiper {
    width: 90%;
    margin-bottom: var(--z-space-height);
}

    .swiper.cont_func .swiper-slide img {
        border-radius: 85px;
        height: 35vw;
        width: 100%;
        object-fit: cover;
        object-position: center;
        max-width: 100%;
    }

#como-funciona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 0px 10% var(--z-space-height);
    background: linear-gradient(180deg, #FFFFFF 0%, #DDDCEA 100%);
    position: relative;
    z-index: 2;
}

    #como-funciona > h6, #como-funciona > h4, #como-funciona > h1 {
        margin-bottom: 0px;
    }

    #como-funciona > h4 {
        font-weight: 400;
        font-size: 1.25vw;
    }

    #como-funciona > p {
        margin-bottom: 0px;
        font-size: 1.3vw;
        line-height: 1.1;
        text-align: center;
        margin-bottom: 50px;
    }

figure.swiper-slide {
    margin: 0px;
}

    figure.swiper-slide figcaption {
        position: absolute;
        margin-top: -160px;
        background: linear-gradient(180deg, #0000002e 45%, #1d1d1b75 100%);
        height: 160px;
        border-radius: 100px;
        width: 100%;
        color: #ffffff;
        padding: 35px 50px;
        display: none;
        flex-direction: column;
        justify-content: center;
        font-size: 1.2vw;
        line-height: 1.2;
        font-weight: 400;
    }

figure.swiper-slide-active figcaption {
    display: flex;
}

figure .swiper-slide figcaption b {
    font-size: 1.5vw;
    font-weight: 500;
}

.swiper.cont_func {
    padding-bottom: 50px !important;
}

    .swiper.cont_func .swiper-pagination {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

        .swiper.cont_func .swiper-pagination .swiper-pagination-bullet {
            height: 12px !important;
            width: 12px !important;
        }

        .swiper.cont_func .swiper-pagination .swiper-pagination-bullet-active {
            height: 20px !important;
            width: 20px !important;
            background: var(--tr-z3-black) !important;
        }

#cont_dash_info {
    display: flex;
    flex-direction: row;
    margin-bottom: var(--z-space-height);
    margin-top: 105px;
}

    #cont_dash_info i {
        background-color: var(--tr-z3-black);
        color: #ffffff;
        padding: 7.5px 10px;
        border-radius: 100%;
        font-size: 1.25vw;
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #cont_dash_info label {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 1vw;
        background-color: transparent;
        cursor: pointer;
        z-index: 99;
    }

    #cont_dash_info > div:last-child label {
        display: flex;
        flex-direction: row-reverse;
    }

    #cont_dash_info label i:hover {
        transform: scale(1.1);
    }

    #cont_dash_info label input:checked ~ i {
        background: radial-gradient(circle at 35% 100%, rgb(255 255 255 / 75%), #00000000 45%), radial-gradient(circle at 100%, #2d38f9 70%);
        box-shadow: 0 0 10px rgb(100 100 255), 0 0 5px rgb(50 50 255 / 98%);
    }

    #cont_dash_info label input ~ div h5,
    #cont_dash_info label input:checked ~ div p {
        opacity: 1;
    }

    #cont_dash_info .rgt label input ~ div h5,
    #cont_dash_info .rgt label input:checked ~ div p {
        display: block;
        text-align: right;
    }

    #cont_dash_info label > div {
        display: flex;
        flex-direction: column;
        gap: 0.5vw;
    }

    #cont_dash_info > div {
        display: flex;
        flex-direction: column;
        align-self: center;
        gap: 3.5vw;
        padding-top: 0px;
        width: 20%;
    }

        #cont_dash_info > div.rgt > label {
            flex-direction: row-reverse;
        }

        #cont_dash_info > div.mov {
            display: none;
        }

        #cont_dash_info > div h5 {
            margin-bottom: 0px;
            text-align: left;
            color: var(--tr-z3-text-color);
            font-size: 1.2vw;
            font-weight: 500;
            width: 90%;
        }

        #cont_dash_info > div.rgt > label h5 {
            margin-left: 10%;
        }

        #cont_dash_info > div.rgt > label p {
            text-align: right;
            margin-left: -15%;
        }

        #cont_dash_info > div p {
            margin-bottom: 0px;
            margin-top: 1vw;
            text-align: left;
            line-height: 1.3;
            color: var(--tr-z3-text-color);
            font-size: 0.82vw;
            opacity: 0;
            width: 115%;
        }

    #cont_dash_info > img#img_dashboard {
        width: 60%;
        transition: opacity 0.4s ease-in-out;
        opacity: 1;
        object-fit: contain;
        margin-top: -140px;
    }

    #cont_dash_info > #img_dashboard.fade-out {
        opacity: 0;
    }

    #cont_dash_info input {
        display: none;
    }

    #cont_dash_info .mov {
        display: none;
    }

#como-funciona .btn_grd {
    font-size: 1.5vw;
    padding: 10px 30px 10px;
}

#currnt-info {
    background: linear-gradient(180deg, #6149C5, #2B31CF, #06083f);
    display: flex;
    flex-direction: column;
    padding: 50px 50px;
    color: #ffffff;
    align-items: center;
    gap: 30px;
    height: 40vh;
    min-height: 340px;
    justify-content: center;
}

    #currnt-info > div:first-child {
        display: flex;
        flex-direction: row;
        width: 80%;
        justify-content: space-around;
    }

    #currnt-info > div > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 30%;
    }

        #currnt-info > div > div h3 {
            font-size: 5vw;
            margin-bottom: 0px;
            line-height: 1;
            font-weight: 700;
        }

        #currnt-info > div > div p,
        #currnt-info > div:nth-child(2n) p {
            font-size: 0.9vw;
            margin-bottom: 0px;
        }

    #currnt-info > div:nth-child(2n) {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        #currnt-info > div:nth-child(2n) h2 {
            font-size: 6vw;
            margin-bottom: 0px;
            line-height: 1;
            font-weight: 700;
        }

#usos {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--z-space-height) 2.5% 50px;
    background: linear-gradient(180deg, #FFFFFF 0%, #DDDCEA 100%);
    z-index: 2;
    position: relative;
}

    #usos > button.btn_black {
        font-weight: 600;
        width: 125px;
    }

    #usos > h6 {
        margin: 20px 0px 15px;
        font-size: 1.3vw;
        font-weight: 400;
    }

    #usos > p {
        width: 60%;
        text-align: center;
        font-size: 1.3vw;
        line-height: 1.2;
        margin-top: 15px;
    }

    #usos > div {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 1%;
        padding: 0px 5%;
        flex-wrap: wrap;
    }

        #usos > div.swiper {
            margin-bottom: 0px;
        }

.cont_card_usos {
    display: flex;
    flex-direction: row;
    margin-top: 50px;
    flex-wrap: wrap;
    gap: 2%;
}

    .cont_card_usos .card_uso {
        background: linear-gradient(45deg, #ababab, #00000012);
    }

    .cont_card_usos .card_uso {
        height: 20vw;
        width: calc(24.5% - 1%);
        border-radius: 45px;
        margin-bottom: 2.5%;
        position: relative;
        background-size: cover;
        background-position: center;
    }

    .cont_card_usos .card_chat {
        background: transparent;
    }

    .cont_card_usos .card_uso_50 {
        width: calc(50% - 1%);
    }

    .cont_card_usos .card_uso .imagen {
        width: 100%;
        height: 100%;
    }

    .cont_card_usos .card_uso img {
        width: 100%;
        object-fit: cover;
        object-position: top;
        border-radius: 30px;
        height: inherit;
        height: -webkit-fill-available;
    }

        .cont_card_usos .card_uso img.img_etiqueta {
            object-position: bottom;
            /*border-radius: 45px;*/
        }

        .cont_card_usos .card_uso img.img_campaing {
            transform: translateY(0px);
            height: calc(100% + 0px);
            /*border-radius: 45px;*/
        }

        .cont_card_usos .card_uso img.img_etiqueta {
            height: calc(100% + 0px);
            transform: translateY(0px);
            object-position: bottom;
        }

        .cont_card_usos .card_uso img.img_rds,
        .cont_card_usos .card_uso img.img_espect,
        .cont_card_usos .card_uso img.img_chat {
            height: calc(100% + 25px);
            transform: translateY(-25px);
            /*border-radius: 50px;*/
        }

    .cont_card_usos .card_uso .etiquetas {
        position: absolute;
        bottom: 5%;
        left: 7.5%;
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }

    .cont_card_usos .cont_card_dble {
        width: calc(50% - 1%);
        display: flex;
        flex-direction: row;
        gap: 2%;
    }

    .cont_card_usos .card_uso .etiquetas span {
        cursor: auto !important;
        padding: 3px 12px 2px !important;
        border-radius: 15px;
        font-size: 14px;
        font-weight: 500;
    }

    .cont_card_usos .card_uso .etiquetas .tag_color {
        color: #ffffff;
        background: var(--tr-z3-black);
    }

    .cont_card_usos .card_uso .etiquetas .tag_black {
        color: var(--tr-z3-black);
        background: #ffffff;
        display: flex;
        justify-items: center;
        border: 2px solid var(--tr-z3-black);
    }

#usos > div#beneficios {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--z-space-height);
    align-content: center;
}

#usos > a.button_land {
    margin-top: 30px;
    transform: scale(1.25);
}

.cont_usos .swiper-pagination {
    display: none;
}

#beneficios img {
    width: 65%;
    margin: 0px 17.5%;
}

#beneficios > h4 {
    font-weight: 400;
    margin-top: 25px;
    font-size: 1.25vw;
}

#beneficios > p {
    font-size: 1.3vw;
    padding: 0px 10%;
    text-align: center;
    line-height: 1.2;
    margin: 10px 0px;
}

.cont_metrics {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 60px 3% 25px;
    justify-content: space-between;
    gap: 7.5%;
}

    .cont_metrics > div {
        max-width: 405px;
    }

    .cont_metrics .metric_top {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .cont_metrics .metric_top > div {
            display: flex;
            flex-direction: column;
        }

        .cont_metrics .metric_top span:first-child {
            text-align: right;
            font-size: 1.5vw;
            line-height: 0.5;
            font-weight: 400;
        }

        .cont_metrics .metric_top span:last-child {
            font-size: 4vw;
            background: #2D38F9;
            background: linear-gradient(to right, #8d64ff 0%, #152489 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
            line-height: 1;
        }

    .cont_metrics .metric_data h3 {
        font-weight: 600;
        color: var(--tr-z3-black);
        margin-bottom: 5px;
        line-height: 0.9;
        font-size: 1.25vw;
    }

    .cont_metrics .metric_data p {
        font-size: 1.3vw;
        line-height: 1.2;
    }

#final {
    min-height: 60vh;
    background: linear-gradient(90deg, #1d1d1b, #000000);
    background-position: left bottom;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    #final > div {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

        #final > div > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #ffffff;
            max-width: 550px;
            text-align: center;
            padding-right: 5vw;
            width: 475px;
            max-width: 100%;
        }

            #final > div > div h3,
            #final > div > div h5 {
                margin: 0px 0px 5px;
                line-height: 1;
            }

            #final > div > div h3 {
                font-size: 2.5vw;
                font-weight: 700;
                margin-bottom: 25px;
            }

            #final > div > div h5 {
                font-size: 1.1vw;
                font-weight: 100;
            }

    #final a {
        font-size: clamp(1.25vw, 1.5vw, 1.75vw);
        padding: 10px 20px 10px;
    }

    .cont_inicio .circles,
    #final span.circles,
    #currnt-info span.circles {
        display: flex;
        position: absolute;
    }

.cont_inicio .wrapper_circles {
    overflow: hidden;
    position: absolute;
    height: 80vw;
    width: 80vw;
    right: 10vw;
    margin-top: calc((0.45vw * 70) * -1);
    z-index: 0;
}

.cont_inicio .circles {
    height: 80vw;
    width: 80vw;
    position: absolute;
}

.cont_inicio .circle-shadow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0px 0px 15px 0px #6f6f6f;
}

#currnt-info span.circles {
    height: 25vw;
    width: 25vw;
    position: absolute;
    right: -12.5vw;
    top: -12.5vw;
}

#currnt-info .wrapper_circles {
    overflow: hidden;
    position: absolute;
    width: 25vw;
    right: 0;
    z-index: 999;
    height: 40vh;
    min-height: 340px;
}

#final .wrapper_circles {
    overflow: hidden;
    position: absolute;
    height: 35vw;
    width: 35vw;
    right: 0;
    margin-top: -17.5vw;
}

#final span.circles {
    height: 35vw;
    width: 35vw;
    display: block;
    position: absolute;
    right: -17.5vw;
}

.cont_inicio span.circle {
    position: absolute;
    border-radius: 50%;
}

    .cont_inicio span.circle.layer0,
    .cont_inicio span.circle.layer3 {
        background: linear-gradient(#1d1d1b 0%, #2d38f9 16%, #a92d76 40%, #f8d851 60%, #97bd5a 80%, #ffffff 100%);
        mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black 0);
        transform: rotate(275deg);
    }

    .cont_inicio span.circle.layer0 {
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #414141 84%);
        inset: 0;
    }

    .cont_inicio span.circle.layer1,
    .cont_inicio span.circle.layer2 {
        box-shadow: 0px 0px 10px 0px #b9b9b9;
    }

    .cont_inicio span.circle.layer1 {
        inset: 5vw;
    }

    .cont_inicio span.circle.layer2 {
        inset: 10vw;
    }

    .cont_inicio span.circle.layer3 {
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black 0);
        inset: 15vw;
        opacity: 0.5;
    }

#final span.circle,
#currnt-info span.circle {
    position: absolute;
    border-radius: 50%;
    background: conic-gradient(#ffffff 0%, #8d64ff 30%, #2d38f9 60%, #97bd5a 100%);
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), black 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), black 0);
}

    #final span.circle.layer1 {
        inset: 0;
        transform: rotate(320deg);
    }

    #final span.circle.layer2 {
        inset: 5vw;
        transform: rotate(120deg);
    }

    #final span.circle.layer3 {
        inset: 10vw;
        transform: rotate(10deg);
    }

    #currnt-info span.circle.layer1 {
        inset: 0;
        transform: rotate(145deg);
    }

    #currnt-info span.circle.layer2 {
        inset: 3.5vw;
        transform: rotate(35deg);
    }

    #currnt-info span.circle.layer3 {
        inset: 7vw;
        transform: rotate(315deg);
    }

@media (max-width: 1420px) {
    #final {
        min-height: 50vh;
    }
}

@media (max-width: 1280px) {
    .cont_inicio .wrapper_circles {
        margin-top: calc((0.40vw * 70) * -1);
    }
}

@media (max-width: 1120px) {
    .cont_inicio .wrapper_circles {
        margin-top: calc((0.40vw * 70) * -1);
    }
}

@media (max-width: 1080px) {
    div.main_content {
        padding-top: 7.5vh;
    }

    .cont_inicio > h4 {
        font-size: 1.4vw;
    }

    #porque-trapichar {
        padding: 5px 2.5% 75px;
    }

        #porque-trapichar > div > div h6 {
            font-size: 1.5vw;
        }

    figure.swiper-slide figcaption {
        margin-top: -130px;
        height: 130px;
        padding: 15px 20px;
        font-size: clamp(1.75vh, 2vh, 3vh);
        border-radius: 50px;
    }

    .swiper-slide img {
        border-radius: 50px;
    }

    #final {
        background-position: 35% bottom;
    }
}

@media (max-width: 980px) {
    .cont_inicio .wrapper_circles {
        margin-top: calc((0.38vw * 70) * -1);
    }

    .cont_inicio > div > div img#img_central {
        margin-bottom: calc(var(--tr-z3-mrg-out) * -1.05);
    }

    #como-funciona > h4 {
        display: none;
    }

    #porque-trapichar > div:first-child {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    #porque-trapichar > div > div {
        width: 100%;
    }

    #porque-trapichar > div img {
        height: 50vh;
        object-fit: cover;
    }

    .text_black_grdt {
        font-size: 5.25vh;
        text-align: center;
        line-height: 1;
        font-weight: 800;
    }

    .btn_black {
        font-size: 1.5vh;
    }

    #como-funciona > p {
        font-size: 2vh;
        margin-bottom: 25px;
    }

    .swiper {
        margin-bottom: 75px;
    }

        .swiper.cont_func .swiper-slide img {
            border-radius: 65px;
        }

        .swiper.cont_func figure.swiper-slide-active img {
            border-radius: 30px;
        }

    figure.swiper-slide figcaption {
        border-radius: 30px;
    }

    #currnt-info > div > div h3, #currnt-info > div:nth-child(2n) h2 {
        font-size: 7vh;
    }

    #currnt-info > div:first-child {
        width: 100%;
        justify-content: space-evenly;
    }

    #currnt-info {
        height: auto;
        min-height: auto;
    }

        #currnt-info > div > div p,
        #currnt-info > div:nth-child(2n) p {
            font-size: 1.5vh;
            margin-bottom: 0px;
            text-align: center;
        }

    .cont_card_usos .card_uso img {
        border-radius: 25px;
    }

    #currnt-info .wrapper_circles {
        height: 36.95vh;
        min-height: auto;
    }
}

/* -- Inicia menu mov -- */
@media (max-width: 820px) {
    .cont_inicio .wrapper_circles {
        margin-top: calc((0.35vw * 70) * -1);
    }

    .cont_inicio > h1 {
        font-size: 5vh;
        line-height: 1;
    }

    .swiper-slide img {
        border-radius: 65px;
    }

    #cont_dash_info {
        margin-bottom: 45px;
        width: 100%;
        margin-top: 40px;
    }

        #cont_dash_info > div {
            padding-top: 0px;
        }

            #cont_dash_info > div.top-buttons,
            #cont_dash_info > div p {
                width: 100%;
            }

        #cont_dash_info .top-buttons button.active i {
            background: radial-gradient(circle at 35% 100%, rgb(255 255 255 / 75%), #00000000 45%), radial-gradient(circle at 100%, #2d38f9 70%)
        }
}

@media (max-width: 755px) {
    #currnt-info .wrapper_circles {
        height: 37vh;
    }
}

@media (max-width: 720px) {

    .dsk {
        display: none !important;
    }

    .mov {
        display: block !important;
    }

    .cont_inicio > div > div img#img_central {
        width: 100%;
        margin-top: -28%;
    }

    .cont_inicio {
        margin: 0px;
        border-radius: 0px;
        padding: 20px 0px 70px;
    }

        .cont_inicio > h1 {
            font-size: 6.5vw;
            line-height: 1;
            font-weight: revert-layer;
        }

        .cont_inicio > h4 {
            font-size: 2.75vw;
            margin: 4vw 5vw 6vw;
        }

        .cont_inicio > div > a {
            font-size: 2.5vw;
        }

        .cont_inicio .wrapper_circles {
            height: 100vw;
            width: 100vw;
            right: 0vw;
            display: none;
        }

        .cont_inicio .circles {
            height: 100vw;
            width: 100vw;
        }

        .cont_inicio span.circle.layer1 {
            inset: 7.5vw;
        }

        .cont_inicio span.circle.layer2 {
            inset: 15vw;
        }

        .cont_inicio span.circle.layer3 {
            inset: 22.5vw;
        }

        .cont_inicio > div > div img:nth-child(1),
        .cont_inicio > div > div img:nth-child(3),
        #porque-trapichar > div > div h6,
        #beneficios > h4 {
            display: none;
        }

    #porque-trapichar > div:first-child {
        flex-direction: column-reverse;
    }

    #porque-trapichar > div:first-child {
        width: 85%;
        margin: 2.5% 7.5% 3%;
    }

    #porque-trapichar > div > div h4 {
        font-size: 2.75vw;
    }

    #porque-trapichar > div > div h3 {
        font-size: 2.75vw;
        font-weight: 600;
        max-width: 70%;
        align-self: center;
    }

    .swiper.cont_func .swiper-slide img {
        height: 100%;
        border-radius: 30px;
    }

    .btn_black {
        font-size: 2.5vw;
        padding: 5px 15px;
    }

    #como-funciona {
        padding: 0px 10% 7.5vw;
    }

    #currnt-info {
        padding: 5vw 15px 1vw;
        gap: 3.5vw;
    }

        #currnt-info .wrapper_circles {
            height: calc(49vw);
        }

        #currnt-info span.circles {
            height: 38vw;
            width: 38vw;
            right: -20.5vw;
            top: -20.5vw;
        }

        #currnt-info > div > div {
            max-width: 22.5%;
        }

        #currnt-info > div:first-child {
            padding-top: 5vw;
            gap: 5vw;
            justify-content: center;
        }

        #currnt-info > div > div h3,
        #currnt-info > div:nth-child(2n) h2 {
            margin-bottom: 1vw;
            font-size: 8vw;
        }

        #currnt-info > div:first-child > div:nth-child(2) {
            max-width: 20%;
        }

        #currnt-info > div:nth-child(2) {
            padding-bottom: 20px;
            max-width: 40%;
        }

        #currnt-info > div > div p,
        #currnt-info > div:nth-child(2n) p {
            font-size: 2.15vw;
            font-weight: 300;
            line-height: 1.2;
        }

    .text_yellow_grdt {
        padding: 2vw 10% 0px;
        font-size: 6vw;
        width: 80%;
        font-weight: 800;
        text-align: center;
    }

    .text_black_grdt {
        font-size: 6.0vw;
    }

    #como-funciona > p {
        font-size: 2.75vw;
        margin-bottom: 25px;
    }

    #como-funciona > h4 {
        font-size: 2.25vh;
    }

    figure.swiper-slide figcaption {
        font-size: 2.5vw;
        position: static;
        margin-top: 4vw;
        background: none;
        color: var(--tr-z3-text-color);
        padding: 0;
        height: auto;
        width: 75%;
        padding-left: 5vw;
    }

    .swiper.cont_func {
        padding-bottom: 45px !important;
        width: 85vw;
        margin: 0px -7.5vw;
    }

    figure.swiper-slide figcaption b {
        font-size: 2.5vw;
        margin-bottom: 1vw;
    }

    #como-funciona .btn_grd {
        margin-top: 0vw;
        font-size: 2vw;
        padding: 5px 10px;
        transform: scale(1.25);
    }

    #usos > div#beneficios {
        padding: 0px;
        margin-top: 15vw;
    }

    .cont_card_usos {
        flex-wrap: nowrap;
        gap: 0px;
        margin-top: 30px;
    }

        .cont_card_usos .card_uso {
            height: 55vw;
            background-position: center right 35%;
            border: none;
            background: none;
            border-radius: 0px;
        }

            .cont_card_usos .card_uso img {
                border-radius: 0px;
                object-fit: fill;
            }

                .cont_card_usos .card_uso img.img_rds,
                .cont_card_usos .card_uso img.img_espect,
                .cont_card_usos .card_uso img.img_chat {
                    height: -webkit-fill-available;
                    transform: none;
                }

    .cont_usos .swiper-pagination {
        margin-top: 20px !important;
        position: relative;
        z-index: 9;
        margin-bottom: -45px;
        text-align: right;
        display: block;
        font-size: 3vw;
    }

    .cont_card_usos .cont_card_dble {
        max-width: 100%;
    }

    #cont_dash_info {
        margin-top: 2vw;
        flex-direction: column;
        margin-bottom: 4vw;
    }

        #cont_dash_info i {
            font-size: 2.5vw;
            padding: 1.1vw 1vw;
        }

        #cont_dash_info > div.mov {
            gap: 4.5%;
        }

        #cont_dash_info > div h3 {
            margin-bottom: 0px;
            font-size: 2.5vw;
            font-weight: 700;
            margin-left: 3vw;
        }

    .mov_content .image {
        width: 110%;
        border-radius: 10px;
        margin: 2vw 0px 5vw -5%;
    }

    #cont_dash_info > div.mov {
        display: flex !important;
        flex-direction: row;
        gap: 0;
        justify-content: space-evenly;
    }

    #cont_dash_info > div.mov_content {
        width: 100%;
    }

    #cont_dash_info > div.mov button {
        background-color: transparent;
        min-width: 6vw;
        width: 6vw;
        min-height: 6vw;
        height: 6vw;
    }

    .top-buttons {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }

        .top-buttons button {
            min-width: 35px;
            min-height: 35px;
            border-radius: 50%;
            border: none;
            background: #222;
            color: white;
            cursor: pointer;
            transition: 0.3s;
            max-width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-self: center;
        }

    .mov_content .tab-content {
        display: none;
    }

        .mov_content .tab-content.active {
            display: block;
        }

    #cont_dash_info > div .tab-content.active p {
        opacity: 1;
        font-size: 2.5vw;
        margin-left: 3vw;
        max-width: 80%;
    }

    #usos > div {
        padding: 0px;
    }

    #usos > a.button_land {
        margin-top: 12vw;
        font-size: 2vw;
        padding: 5px 10px;
    }

    #usos > p {
        margin-top: 0px;
    }

    #usos > button.btn_black {
        width: auto;
    }

    #beneficios .text_black_grdt {
        margin: 4vw 0px 2vw;
        width: 65%;
    }

    #beneficios > p {
        font-size: 2.5vw;
        padding: 0px 0%;
        width: 80%;
    }

    #usos > p {
        width: 80%;
        text-align: center;
        font-size: 2.4vw;
        margin-bottom: 0px;
    }

    .cont_metrics {
        flex-direction: column;
        gap: 4vw;
        padding: 25px 2.5% 10px;
    }

        .cont_metrics > div {
            width: 100%;
            max-width: 100%;
            background-color: #ffffff87;
            padding: 2vw 5vw;
            border-radius: 5px;
            display: flex;
            flex-direction: row;
            gap: 10%;
            align-items: center;
            justify-content: normal;
            zoom: 1.25;
        }

        .cont_metrics .metric_top span:first-child {
            text-align: left;
            font-size: 2vh;
            line-height: 1;
            margin-bottom: 0.5vw;
        }

        .cont_metrics .metric_top span:last-child {
            font-size: 8vw;
        }

        .cont_metrics .metric_data h3 {
            font-size: 2.25vw;
            text-align: left;
            color: var(--tr-z3-text-color);
            font-weight: 600;
        }

        .cont_metrics .metric_data p {
            font-size: 2.25vw;
            margin-bottom: 0px;
            text-align: left;
            font-weight: 400;
            width: 90%;
        }

    #beneficios img {
        width: 100%;
        margin: -4% 5% 0px;
    }

    #final > div:nth-child(2) {
        width: 60%;
    }

    #final > div {
        width: 0%;
    }

    #final {
        background: linear-gradient(90deg, #1d1d1b, #000000) !important;
        min-height: 45vw;
    }

        #final > div:nth-child(2) {
            width: 100%;
        }

        #final > div > div {
            align-self: center;
            padding: 0px;
            max-width: 100%;
        }

            #final > div > div h5 {
                font-size: 2vw;
                font-weight: 400;
            }

            #final > div > div h3 {
                font-size: 4vw;
                width: 45%;
                margin-bottom: 3vw;
            }

        #final a {
            font-size: 2.5vw;
        }
}

@media (max-width: 620px) {
    #currnt-info .wrapper_circles {
        height: calc(50vw);
    }
}

@media (max-width: 425px) {
    #currnt-info .wrapper_circles {
        height: calc(51vw);
    }
}