/* =====================================================
   OTAO BRASIL
   DISTRIBUTORS PAGE
===================================================== */


/* =====================================================
   HERO
===================================================== */

.distributors-page__hero{

    padding:140px 0 110px;

    background:
        linear-gradient(
            135deg,
            #07111c 0%,
            #0b2238 55%,
            #005bac 100%
        );

    color:#fff;

}

.distributors-page__title{

    max-width:850px;

    margin:18px 0 24px;

    font-size:clamp(
        42px,
        5vw,
        72px
    );

    line-height:1.08;

    font-weight:700;

    color:#FFFFFF;

}

.distributors-page__description{

    max-width:720px;

    margin-bottom:36px;

    font-size:18px;

    line-height:1.7;

    color:rgba(255,255,255,.78);

}


/* =====================================================
   HEADER DAS SEÇÕES
===================================================== */

.distributors-page__header{

    max-width:780px;

    margin:0 auto 55px;

    text-align:center;

}


/* =====================================================
   SEÇÃO PRINCIPAL
===================================================== */

.distributors-page__section{

    padding:100px 0;

    background:#fff;

}


/* =====================================================
   FEATURES
===================================================== */

.distributors-page__features{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:24px;

}

.distributors-page__feature{

    padding:34px;

    border:1px solid #e5e5e5;

    border-radius:16px;

    background:#fff;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

.distributors-page__feature:hover{

    transform:translateY(-5px);

    border-color:#005bac;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.08);

}

.distributors-page__feature-number{

    margin-bottom:25px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

    color:#005bac;

}

.distributors-page__feature h3{

    margin-bottom:12px;

    font-size:22px;

    color:#111;

}

.distributors-page__feature p{

    color:#666;

    line-height:1.7;

}


/* =====================================================
   MERCADO
===================================================== */

.distributors-page__market{

    padding:100px 0;

    background:#f7f8fa;

}

.distributors-page__market-grid{

    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:80px;

    align-items:center;

}

.distributors-page__market-list{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:16px;

}

.distributors-page__market-item{

    display:flex;

    align-items:center;

    gap:18px;

    min-height:76px;

    padding:20px 24px;

    border-radius:10px;

    background:#fff;

    border:1px solid #e5e5e5;

}

.distributors-page__market-item span{

    font-size:13px;

    font-weight:700;

    color:#005bac;

}

.distributors-page__market-item strong{

    color:#222;

}


/* =====================================================
   PRODUTOS
===================================================== */

.distributors-page__products{

    padding:100px 0;

    background:#fff;

}

.distributors-page__product-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:24px;

}

.distributors-page__product{

    min-height:210px;

    padding:34px;

    border-radius:16px;

    background:#07111c;

    color:#fff;

    position:relative;

    overflow:hidden;

}

.distributors-page__product::after{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    right:-60px;

    bottom:-70px;

    border-radius:50%;

    background:rgba(0,91,172,.28);

}

.distributors-page__product h3{

    position:relative;

    z-index:1;

    margin-bottom:14px;

    font-size:23px;

}

.distributors-page__product p{

    position:relative;

    z-index:1;

    max-width:360px;

    color:rgba(255,255,255,.7);

    line-height:1.7;

}


/* =====================================================
   PROCESSO
===================================================== */

.distributors-page__process{

    padding:100px 0;

    background:#f7f8fa;

}

.distributors-page__steps{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:24px;

}

.distributors-page__step{

    position:relative;

    padding:32px;

    background:#fff;

    border-radius:16px;

    border:1px solid #e5e5e5;

}

.distributors-page__step span{

    display:block;

    margin-bottom:25px;

    font-size:14px;

    font-weight:700;

    color:#005bac;

}

.distributors-page__step h3{

    margin-bottom:12px;

    font-size:20px;

    color:#111;

}

.distributors-page__step p{

    color:#666;

    line-height:1.7;

}


/* =====================================================
   CTA
===================================================== */

.distributors-page__cta{

    padding:90px 0;

    background:#07111c;

    color:#fff;

}

.distributors-page__cta-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}

.distributors-page__cta-inner h2{

    margin:14px 0;

    font-size:clamp(
        30px,
        4vw,
        48px
    );

}

.distributors-page__cta-inner p{

    max-width:650px;

    margin:0;

    color:rgba(255,255,255,.7);

    line-height:1.7;

}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width:1200px){

    .distributors-page__features{

        grid-template-columns:
            repeat(2,1fr);

    }

    .distributors-page__steps{

        grid-template-columns:
            repeat(2,1fr);

    }

}


@media (max-width:992px){

    .distributors-page__market-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .distributors-page__product-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}


@media (max-width:768px){

    .distributors-page__hero{

        padding:110px 0 80px;

    }

    .distributors-page__section,
    .distributors-page__market,
    .distributors-page__products,
    .distributors-page__process{

        padding:75px 0;

    }

    .distributors-page__features,
    .distributors-page__product-grid,
    .distributors-page__steps,
    .distributors-page__market-list{

        grid-template-columns:1fr;

    }

    .distributors-page__cta-inner{

        flex-direction:column;

        align-items:flex-start;

    }

}
/* =====================================================
   CTA — COR DO TÍTULO
===================================================== */

.distributors-page__cta-inner h2{

    color:#FFFFFF;

}
/* =====================================================
   PORTFÓLIO — TÍTULOS DOS CARDS
===================================================== */

.distributors-page__portfolio-card h3 {
    color: #FFFFFF;
}