/* ==========================================================
   FREELAN - HERO HOME
   Versão consolidada 1.0
   Escopo exclusivo: .freelan-home-hero
========================================================== */


/* ==========================================================
   ESTRUTURA PRINCIPAL
========================================================== */

.freelan-home-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
}


/* ==========================================================
   CONTEÚDO
========================================================== */

.freelan-home-hero .freelan-home-hero__content {

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 620px;

    background: #ffffff;

    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: clamp(30px, 6vw, 110px);
    padding-right: 70px;
}


.freelan-home-hero .freelan-home-hero__content > * {
    max-width: 680px;
}


/* ==========================================================
   ÁREA DA IMAGEM
========================================================== */

.freelan-home-hero .freelan-home-hero__visual {

    position: relative;

    align-self: stretch;

    min-height: 780px;

    overflow: hidden;

    background: #07152D;
}


/* Curva de transição */

.freelan-home-hero .freelan-home-hero__visual::before {

    content: "";

    position: absolute;

    z-index: 2;

    top: -10%;
    bottom: -10%;

    left: -95px;

    width: 170px;

    background: #ffffff;

    border-radius: 0 50% 50% 0;

    pointer-events: none;
}


/* ==========================================================
   IMAGEM
========================================================== */

.freelan-home-hero .freelan-home-hero__image {

    width: 100%;
    height: 780px;

    margin: 0;

    display: block;

    background: #07152D;
}


.freelan-home-hero .freelan-home-hero__image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: left center;
}


/* ==========================================================
   TIPOGRAFIA
========================================================== */


/* Eyebrow */

.freelan-home-hero .freelan-home-hero__eyebrow {

    position: relative;

    margin: 0 0 54px;

    color: #1847A8;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: -0.2px;
}


.freelan-home-hero .freelan-home-hero__eyebrow p {

    margin: 0;
}


.freelan-home-hero .freelan-home-hero__eyebrow::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -14px;

    width: 80px;

    height: 3px;

    background: #1E56D8;

    border-radius: 999px;
}


/* Divider */

.freelan-home-hero .freelan-home-hero__divider {

    width: 95px;

    margin: 18px 0 34px;

}


.freelan-home-hero .freelan-home-hero__divider hr {

    margin: 0;

    border: none;

    height: 4px;

    background: #1E56D8;

    border-radius: 30px;
}


/* Título */

.freelan-home-hero .freelan-home-hero__title {

    margin: 0 0 34px;

}


.freelan-home-hero .freelan-home-hero__title h1 {

    margin: 0;

    color: #101828;

    font-size: 72px;

    font-weight: 800;

    line-height: 1.07;

    letter-spacing: -3px;
}


.freelan-home-hero .hero-line,
.freelan-home-hero .hero-blue {

    display: block;

}


.freelan-home-hero .hero-blue {

    color: #1E56D8;

}


/* Descrição */

.freelan-home-hero .freelan-home-hero__description {

    max-width: 620px;

    margin: 0;

    color: #5f6f82;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.7;
}


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

.freelan-home-hero .freelan-hero-features {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin: 42px 0 46px;
}


/* Item */

.freelan-home-hero .freelan-feature {

    display: flex;

    align-items: center;

    gap: 14px;
}


/* Ícone */

.freelan-home-hero .freelan-feature__icon {

    width: 52px;

    min-width: 52px;

    height: 52px;


    display: flex;

    align-items: center;

    justify-content: center;


    border: 1px solid #D7E2F4;

    border-radius: 14px;


    background: #FFFFFF;

    color: #1E56D8;


    transition:

        border-color .25s ease,

        box-shadow .25s ease,

        transform .25s ease;
}


/* Hover */

.freelan-home-hero .freelan-feature:hover .freelan-feature__icon {

    border-color: #1E56D8;

    box-shadow: 0 8px 20px rgba(30,86,216,.12);

    transform: translateY(-2px);
}


/* SVG */

.freelan-home-hero .freelan-feature__icon svg {

    width: 28px;

    height: 28px;

    display: block;
}


/* Texto */

.freelan-home-hero .freelan-feature__text {

    color: #1E293B;

    font-size: 17px;

    font-weight: 600;

    line-height: 1.35;
}


/* ==========================================================
   BOTÕES KADENCE
========================================================== */


.freelan-home-hero .freelan-hero-btn {

    min-height: 58px;

    padding: 0 28px !important;


    display: inline-flex;

    align-items: center;

    justify-content: center;


    gap: 14px;


    border-radius: 10px !important;


    font-size: 17px;

    font-weight: 600;

    line-height: 1.2;


    transition:

        background-color .2s ease,

        border-color .2s ease,

        color .2s ease,

        transform .2s ease,

        box-shadow .2s ease;
}


/* Botão principal */

.freelan-home-hero .freelan-hero-btn-primary {

    background: #1557D6 !important;

    color: #FFFFFF !important;

    border: 1px solid #1557D6 !important;
}


/* Botão secundário */

.freelan-home-hero .freelan-hero-btn-secondary {

    background: #FFFFFF !important;

    color: #1557D6 !important;

    border: 1px solid #1557D6 !important;
}


/* Hover geral */

.freelan-home-hero .freelan-hero-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(21,87,214,.18);
}


/* Foco */

.freelan-home-hero .freelan-hero-btn:focus-visible {

    outline: 3px solid rgba(21,87,214,.28);

    outline-offset: 4px;
}


/* Hover botão principal */

.freelan-home-hero .freelan-hero-btn-primary:hover,
.freelan-home-hero .freelan-hero-btn-primary:focus-visible {

    background: #1049B8 !important;

    border-color: #1049B8 !important;

    color: #FFFFFF !important;
}


/* Hover botão secundário */

.freelan-home-hero .freelan-hero-btn-secondary:hover,
.freelan-home-hero .freelan-hero-btn-secondary:focus-visible {

    background: #F4F7FF !important;

    border-color: #1557D6 !important;

    color: #1049B8 !important;
}


/* ==========================================================
   LARGURA DAS COLUNAS
========================================================== */


.freelan-home-hero .freelan-hero-col-content {

    width: 54%;

    flex: 0 0 54%;

    max-width: 54%;
}


.freelan-home-hero .freelan-hero-col-image {

    width: 46%;

    flex: 0 0 46%;

    max-width: 46%;
}


/* ==========================================================
   RESPONSIVO - TABLET
========================================================== */

@media (max-width: 1024px) {


    /* Colunas */

    .freelan-home-hero .freelan-hero-col-content {

        width: 55%;

        flex-basis: 55%;

        max-width: 55%;
    }


    .freelan-home-hero .freelan-hero-col-image {

        width: 45%;

        flex-basis: 45%;

        max-width: 45%;
    }


    /* Features */

    .freelan-home-hero .freelan-hero-features {

        gap: 16px;

        margin: 36px 0 40px;
    }


    .freelan-home-hero .freelan-feature__icon {

        width: 48px;

        min-width: 48px;

        height: 48px;
    }


    .freelan-home-hero .freelan-feature__icon svg {

        width: 26px;

        height: 26px;
    }


    .freelan-home-hero .freelan-feature__text {

        font-size: 16px;
    }

}


/* ==========================================================
   RESPONSIVO - CELULAR
========================================================== */

@media (max-width: 767px) {


    /* Colunas */

    .freelan-home-hero .freelan-hero-col-content,
    .freelan-home-hero .freelan-hero-col-image {

        width: 100%;

        flex-basis: 100%;

        max-width: 100%;
    }


    /* Features */

    .freelan-home-hero .freelan-hero-features {

        gap: 14px;

        margin: 30px 0 36px;
    }


    .freelan-home-hero .freelan-feature {

        align-items: flex-start;
    }


    .freelan-home-hero .freelan-feature__icon {

        width: 44px;

        min-width: 44px;

        height: 44px;

        border-radius: 12px;
    }


    .freelan-home-hero .freelan-feature__icon svg {

        width: 24px;

        height: 24px;
    }


    .freelan-home-hero .freelan-feature__text {

        font-size: 15px;

        line-height: 1.55;
    }


    /* Imagem no mobile */

    .freelan-home-hero .freelan-home-hero__visual {

        min-height: auto;
    }


    .freelan-home-hero .freelan-home-hero__image {

        height: auto;
    }


    .freelan-home-hero .freelan-home-hero__image img {

        height: auto;

        object-fit: contain;
    }

}


/* ==========================================
   LOGOS DE EMPRESAS - CORPORATIVO
========================================== */

.freelan-empresas img{

    filter: grayscale(100%);

    opacity: .75;

    transition:
        filter .35s ease,
        opacity .35s ease,
        transform .35s ease;
}

.freelan-empresas img:hover{

    filter: grayscale(0%);

    opacity: 1;

    transform: scale(1.05);
}



/* =====================================================
   BLOCO INSTITUCIONAL - FREELAN
===================================================== */

.freelan-solucoes{
    padding:90px 20px 30px;
}

.freelan-solucoes .container{
    max-width:1200px;
    margin:auto;
}

/* =====================================================
   CABEÇALHO
===================================================== */

.secao-titulo{
    max-width:820px;
    margin:0 auto 70px;
    text-align:center;
}

.secao-titulo h2{
    font-size:2.2rem;
    font-weight:700;
    color:#1e293b;
    margin-bottom:20px;
    line-height:1.2;
}

.secao-titulo p{
    font-size:1.08rem;
    line-height:1.85;
    color:#64748b;
}

/* =====================================================
   GRID
===================================================== */

.freelan-beneficios{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;

}

/* =====================================================
   CARD
===================================================== */

.beneficio{

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:18px;

    padding:34px;

    transition:.28s;

    box-shadow:
        0 8px 24px rgba(15,23,42,.05);

}

.beneficio:hover{

    transform:translateY(-6px);

    border-color:#dbeafe;

    box-shadow:
        0 18px 40px rgba(37,99,235,.10);

}

/* =====================================================
   ÍCONE
===================================================== */

.beneficio .icone{

    width:68px;
    height:68px;

    border-radius:18px;

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:32px;

    margin-bottom:26px;

    color:#fff;

    box-shadow:
        0 10px 24px rgba(37,99,235,.18);

}

/* =====================================================
   TITULO
===================================================== */

.beneficio h3{

    font-size:1.35rem;

    margin-bottom:16px;

    color:#1e293b;

    line-height:1.3;

}

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

.beneficio p{

    color:#64748b;

    line-height:1.8;

    font-size:1rem;

}

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

.freelan-cta{

    padding:40px 20px 0px;

}

.freelan-cta .container{

    max-width:760px;

    margin:auto;

    text-align:center;

}

.freelan-cta h2{

    font-size:2rem;

    margin-bottom:20px;

    color:#1e293b;

}

.freelan-cta p{

    font-size:1.05rem;

    color:#64748b;

    line-height:1.85;

    margin-bottom:40px;

}

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

@media(max-width:900px){

    .freelan-beneficios{

        grid-template-columns:1fr;

    }

    .secao-titulo h2{

        font-size:1.8rem;

    }

    .beneficio{

        padding:28px;

    }

}



.freelan-btn-consultoria{

    display:inline-flex;

    align-items:center;

    padding:14px 28px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    color:#2563eb;

    border:2px solid #2563eb;

    transition:.25s ease;
}

.freelan-btn-consultoria:hover{

    background:#2563eb;

    color:#fff;
}

a.btn-parceiros{
    display:inline-flex !important;
    align-items:center;
    gap:10px;

    padding:14px 28px !important;

    background:#ffffff !important;
    color:#1d4ed8 !important;

    border:1px solid #dbeafe !important;
    border-radius:999px !important;

    font-weight:600 !important;
    text-decoration:none !important;

    box-shadow:0 8px 24px rgba(29,78,216,.08) !important;

    transition:all .3s ease !important;
}

a.btn-parceiros:hover{
    background:#1d4ed8 !important;
    color:#ffffff !important;

    transform:translateY(-3px);

    box-shadow:0 12px 32px rgba(29,78,216,.25) !important;
}

a.btn-parceiros .kt-btn-inner-text{
    color:inherit !important;
}