/*** BLOG ***/
    .blog-post-card{
        cursor: pointer;
        border-radius: 16px;
    }

    .blog-post-card-body{
        border-radius: 16px;
    }

    .btn-blog-icon{
        margin-left: 0.3125rem;
        font-size: 28px;
        vertical-align: middle;
        --cor-fundo: #fff;
        --cor-seta: #295788;
    }

    .btn-primary:active .btn-blog-icon,
    .btn-primary:first-child:active .btn-blog-icon,
    .btn-primary:focus-visible .btn-blog-icon,
    .btn-primary:hover .btn-blog-icon{
        --cor-fundo: #295788;
        --cor-seta: #fff;
    }

    .img-post-principal{
        height: 400px;
        background: url(../img/blog/img-post-blog-2.webp) center no-repeat;
        background-size: cover;
    }

    .img-post-secundario{
        height: 200px;
        background: url(../img/blog/img-post-blog-5.webp) center no-repeat;
        background-size: cover;
    }

    .img-post-terciario-1{
        height: 180px;
        background: url(../img/blog/img-post-blog-6.webp) center no-repeat;
        background-size: cover;
    }

    .img-post-terciario-2{
        height: 180px;
        background: url(../img/blog/img-post-blog-4.webp) center no-repeat;
        background-size: cover;
    }

    .titulo-post{
        position: absolute;
        bottom: 0;
        padding: 5px 30px;
    }

    .titulo-post-principal{
        font-size: 30px;
        color: #fff;
    }

    .titulo-post-secundario{
        font-size: 20px;
        color: #fff;
    }

    .titulo-post-terciario{
        font-size: 16px;
        color: #fff;
    }

/*** BOX ***/
    .box{
        height: 97%;
        box-shadow: 5px 5px 7.39px 0px rgba(0, 0, 0, 0.25);
    }

/*** CARDS ***/
    .card-impacto{
        height: 100%;
        padding: 20px 20px;
    }

    .card-icon{
        margin-right: 4px;
        --cor-icone: #295788;
    }

/*** CASES ***/
    .segmento-pill{
        padding: 6px 30px;
        border: 1px solid #ccc;
        background-color: #fff;
    }

/*** CTA FINAL ***/
    .card-final-container{
        padding: 50px;
        color: #fff;
    }

/*** DEPOIMENTOS ***/
    .box-depoimento{
        padding: 40px;
        text-align: left;
        border: 1px solid #243547;
        background-color: #fff;
    }

    .carousel-indicators-depoimentos{
        position: relative;
        margin-top: 1.5rem;
        margin-bottom: 0;
    }

    .carousel-indicators-depoimentos button{
        width: 12px !important;
        height: 12px !important;
        margin: 0 5px !important;
        border-radius: 50% !important;
        opacity: 0.4;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .carousel-indicators-depoimentos button.active{
        opacity: 1;
        transform: scale(1.2);
    }

    .foto-depoimento{
        margin-right: 0.9375rem; /* 15px */
        border-radius: 50%;
    }

    .txt-quote{
        min-height: 312px;
        margin: 1.25rem 0; /* 20px 0 */
    }

/*** FLUXO DE COMPRAS ***/
    .box-fluxo{
        border: 1px solid #243547;
        background-color: #fff;
    }

    .col-positioning{
        position: relative;
        display: flex;
        justify-content: center;
    }

    .col-positioning:not(.ultimo-passo) .zigzag-card::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 28px;
        background-color: #1a1a1a;
        z-index: 5;
    }

    .col-positioning:not(.ultimo-passo) .zigzag-card::before {
        content: "";
        position: absolute;
        top: calc(100% + 28px);
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid #1a1a1a;
        z-index: 6;
    }

    .zigzag-card{
        position: relative;
        max-width: 264px;
        height: 100%;
        margin: 0 auto;
        background: #ffffff;
        border: 1px solid #243547;
        border-radius: 40px;
        transition: transform 0.2s ease;
    }

    .zigzag-card:hover{
        transform: translateY(-5px);
    }

/*** INTEGRAÇÃO ***/
    .marquee-group div:nth-child(odd){
        background-color: #fafcfd;
    }

/*** JUMBOTRON ***/
    .jumbotron-header{
        padding: 3.75rem 0; /* 60px 0 */
    }

    .jumbotron-saphira{;
        background: url('../img/bg-jumbotron-saphira.webp') left / cover no-repeat #fff;
    }

    .logo-banner-saphira{
        width: 15.625rem; /* 250px */
        aspect-ratio: auto 50 / 17;
    }

    .topic-icon{
        height: 1.25rem; /* 20px */
        --cor-icone: #295788;
    }

/*** MARQUEE ***/
    .marquee-wrapper{
        position: relative;
        max-width: 48rem;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
    }

    .marquee-container{
        overflow: hidden;
    }

    .marquee-track{
        display: flex;
        width: max-content;
        will-change: transform;
    }

    .scroll-left{
        animation: marquee-left 35s linear infinite;
    }

    .scroll-right{
        animation: marquee-right 45s linear infinite;
    }

    .marquee-wrapper:hover .marquee-track{
        animation-play-state: paused;
    }

    @keyframes marquee-left{
        0%{
            transform: translate3d(0, 0, 0);
        }
        100%{
            transform: translate3d(-50%, 0, 0);
        }
    }

    @keyframes marquee-right{
        0%{
            transform: translate3d(-50%, 0, 0);
        }
        100%{
            transform: translate3d(0, 0, 0);
        }
    }

/*** MODAL ***/
    .btn-modal,
    .btn-modal:hover{
        padding: 7px 14px;
        color: #fff;
        border: none;
        border-radius: 50%;
        background-color: #000;
    }

    .btn-modal:hover{
        font-weight: 600;
    }

    .modal-video .modal-content{
        border: none;
        background: transparent;
    }

    .modal-video .modal-footer{
        border: none;
    }

/*** MÓDULOS ***/
    .bg-modulos{
        background-color: #f5f2ff;
    }

    .card-body-text{
        color: #666;
    }

    .card-img-container{
        display: flex;
        justify-content: center;
        height: 200px;
        border-radius: 8px;
        background-color: #f1f7ff;
    }

    .logo-modulo{
        max-height: 60px;
    }

/*** PILLS EXPANSÍVEIS ***/
    .card-features-container{
        background-color: #f3f3f3;
    }

    .custom-feature-btn{
        text-align: left;
        color: #999 !important;
        border: 1px solid #ddd;
        border-radius: 50px !important;
        background-color: #ffffff !important;
        overflow: hidden;
        transition: 
            border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
            background-color 0.3s ease;
        transform: scale(1);
    }

    .custom-feature-btn:hover:not(.active){
        background-color: #f8fafc !important;
        transform: scale(1.01);
    }

    .custom-feature-btn.active{
        width: 100%;
        padding: 1.25rem;
        color: #212529 !important;
        border-radius: 1rem !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    }

    .custom-feature-btn.active .btn-body{
        max-height: 180px;
        opacity: 1;
    }

    .btn-body{
        max-height: 0;
        opacity: 0;
        color: #666;
        transition: 
            max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.3s ease 0.05s,
            margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .custom-feature-icon{
        font-size: 18px;
        --cor-icone: #999;
    }

    .custom-feature-btn.active .custom-feature-icon{
        --cor-icone: #295788;
    }

    .tab-content .tab-pane{
        transition: opacity 0.8s ease-in-out;
    }

/*** SOLUÇÃO IDEAL ***/
    .bg-solucao-ideal{
        background: url('../img/bg-saphira-4.webp') left center / cover no-repeat;
    }

    .box-claro,
    .box-escuro{
        padding: 40px 40px 20px;
        text-align: left;
        border-radius: 20px;
    }

    .box-claro{
        color: #666;
        border: 2px solid #cecece;
        background-color: #fff;
    }
    
    .box-escuro{
        color: #fff;
        border: 4px solid #ee8601;
        background: linear-gradient(33deg, #000, #212529);
    }

    .box-claro li,
    .box-escuro li{
        display: flex;
        align-items: baseline;
        gap: 15px;
        margin-bottom: 20px;
    }

    .box-tag{
        float: right;
        margin: -40px -40px 0 0;
        padding: 4px 40px;
        font-weight: 500;
        border-bottom-left-radius: 20px;
        border-top-right-radius: 10px;
        background-color: #ee8601;
    }

    .box-claro .list-icon,
    .box-escuro .list-icon{
        /*margin-right: 15px;*/
        flex-shrink: 0;
    }

    .box-claro .list-icon{
        --cor-icone: #f66;
    }

    .box-escuro .list-icon{
        --cor-icone: #4ade80;
    }

/*** TEXT-ROTATOR ***/
    .hero-text-rotator{
        position: relative;
        overflow: hidden;
    }

    .rotator-wrapper{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .rotator-item{
        grid-area: 1 / 1;
        opacity: 0;
        will-change: transform, opacity;
        animation: rotate-fade 18s linear infinite;
    }

    .rotator-item:nth-child(1) { animation-delay: 0s; }
    .rotator-item:nth-child(2) { animation-delay: 3s; }
    .rotator-item:nth-child(3) { animation-delay: 6s; }
    .rotator-item:nth-child(4) { animation-delay: 9s; }
    .rotator-item:nth-child(5) { animation-delay: 12s; }
    .rotator-item:nth-child(6) { animation-delay: 15s; }

    /* Distribuição exata dos tempos para 6 frases (cada ciclo = 16.66%) */
    @keyframes rotate-fade{
        0% {
            opacity: 0;
            transform: translateY(12px);
        }
        3% {
            opacity: 1;
            transform: translateY(0);
        }
        16.66% {
            opacity: 1;
            transform: translateY(0);
        }
        19.66% {
            opacity: 0;
            transform: translateY(-12px);
        }
        100% {
            opacity: 0;
            transform: translateY(-12px);
        }
    }

@media (max-width: 992px){
    .feature-img{
        max-height: 380px;
    }

    .gap-mobile{
        gap: 26px !important;
    }
}

@media (min-width: 768px){
    /*** DEPOIMENTOS ***/
    .bg-depoimentos{
        background: url('../img/bg-saphira-5.webp') left center / cover no-repeat;
    }

    .txt-quote{
        min-height: 500px;
        margin: 1.875rem 0; /* 30px 0 */
    }

    #carrosselDepoimentos .carousel-inner{
        display: flex !important;
        gap: 0.9375rem; /* 15px */
    }

    #carrosselDepoimentos .carousel-item{
        display: none;
        flex: 0 0 calc(50% - 0.75rem);
        margin-right: 0;
        transition: none;
    }

    #carrosselDepoimentos .carousel-item.active,
    #carrosselDepoimentos .carousel-item.active + .carousel-item,
    #carrosselDepoimentos .carousel-item:last-child.active,
    #carrosselDepoimentos .carousel-item:nth-child(7):has(~ .carousel-item:last-child.active){
        display: block;
    }

    #carrosselDepoimentos .carousel-control-prev{
        left: 0;
        width: 40px;
    }

    #carrosselDepoimentos .carousel-control-next{
        right: 0;
        width: 40px;
    }

    #carrosselDepoimentos:has(.carousel-inner .carousel-item:first-child.active) .carousel-control-prev{
        display: none !important;
    }

    #carrosselDepoimentos:has(.carousel-inner .carousel-item:nth-child(7).active) .carousel-control-next,
    #carrosselDepoimentos:has(.carousel-inner .carousel-item:last-child.active) .carousel-control-next{
        display: none !important;
    }
}

@media (min-width: 992px){
    /*** CTA FINAL ***/
    .card-final-container{
        padding: 80px;
    }

    /*** DEPOIMENTOS ***/
    .txt-quote{
        min-height: 390px;
    }

    /*** FLUXO DE COMPRAS ***/
    .col-positioning:not(.ultimo-passo) .zigzag-card::after, 
    .col-positioning:not(.ultimo-passo) .zigzag-card::before{
        display: none !important;
    }

    .col-positioning.curva-descendente::after{
        content: "" !important;
        display: block !important;
        position: absolute;
        top: 50%;
        left: calc(50% + 115px + 6px);
        width: calc((100% - 234px) / 2 + var(--bs-gutter-x, 1.5rem) / 2 - 6px);
        height: calc(100% + 3rem);
        border-top: 2px solid #212529;
        border-right: 2px solid #212529;
        border-bottom: 2px solid #212529;
        background-color: transparent !important;
        transform: none;
        z-index: 15;
    }

    .col-positioning.curva-descendente::before{
        content: "" !important;
        display: block !important;
        position: absolute;
        top: calc(150% + 2.9375rem);
        left: calc(50% + 105px + 6px);
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-right: 10px solid #212529;
        border-left: none;
        background-color: transparent !important;
        transform: translateY(-50%);
        z-index: 16;
    }

    .seta-container{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 14px;
        z-index: 10;
        pointer-events: none;
    }

    .seta-fluxo{
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible !important;
        --cor-seta: #212529;
        --espessura-seta: 0;
    }

    .seta-direita-svg{
        left: calc(50% + 82px + 6px);
        width: 36px;
    }

    .seta-esquerda-svg{
        right: calc(50% + 82px + 6px);
        width: 36px;
    }

    /*** JUMBOTRON ***/
    .jumbotron-saphira{;
        background: url('../img/bg-jumbotron-saphira.webp') center / cover no-repeat #fff;
    }

    /*** PILLS EXPANSÍVEIS ***/
    .features-list{
        min-height: 860px;
    }
}

@media (min-width: 1200px){
    /*** DEPOIMENTOS ***/
    .txt-quote{
        min-height: 290px;
    }

    /*** FLUXO DE COMPRAS ***/
    .col-positioning.curva-descendente::after{
        left: calc(50% + 132px + 6px);
        width: calc((100% - 264px) / 2 + var(--bs-gutter-x, 1.5rem) / 2 - 6px);
    }

    .col-positioning.curva-descendente::before{
        left: calc(50% + 129px + 6px);
    }

    .seta-fluxo{
        --cor-linha-seta: #212529;
        --espessura-seta: 2px;
    }

    .seta-direita-svg{
        left: calc(50% + 132px + 6px);
        width: calc(100% - 264px - 12px);
    }

    .seta-esquerda-svg{
        right: calc(50% + 132px + 6px);
        width: calc(100% - 264px - 12px);
    }

    /*** MÓDULOS ***/
    .logo-modulo{
        max-height: 50px;
    }
}

@media (min-width: 1400px){
    /*** DEPOIMENTOS ***/
    .txt-quote{
        min-height: 240px;
    }

    /*** PILLS EXPANSÍVEIS ***/
    .features-list{
        min-height: 790px;
    }
}