/* ============================================================
    1. HERO
        1.1 SECÇÃO PRINCIPAL
        1.2 FUNDO
        1.3 GRID
        1.4 LINHAS DECORATIVAS
        1.5 GLOW
        1.6 CONTEÚDO
        1.7 LABEL
        1.8 TÍTULO
        1.9 TEXTO
        1.10 RESPONSIVIDADE
        1.11 LINHAS DECORATIVAS
    2. CARDS DOS CASOS ESTUDO
        2.1 SECÇÃO PRINCIPAL
        2.2 TÍTULO
        2.3 SLIDER
        2.4 CARD
        2.5 LINHA SUPERIOR
        2.6 HOVER
        2.7 STAGGER
        2.8 TEXTO
        2.9 BOTÃO VER MAIS
        2.10 BOTÕES SLIDER
        2.11 IMAGEM CARD
    3. CTA
        3.1 SECÇÃO PRINCIPAL
        3.2 CONTAINER
        3.3 TEXTO
        3.4 LABEL
        3.5 TÍTULO
        3.6 DESCRIÇÃO
        3.7 BOTÃO
        3.8 MAPA
        3.9 BRILHO
============================================================ */



/* ============================================================
   1. HERO
============================================================ */



/* ============================================================
   1.1 SECÇÃO PRINCIPAL
============================================================ */

.hero {

    position: relative;

    width: 100%;
    height: 72vh;
    min-height: 620px;

    overflow: hidden;

    background: #eef4f8;
}



/* ============================================================
   1.2 FUNDO
============================================================ */

.hero-bg {

    position: absolute;
    inset: 0;

    overflow: hidden;
}



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

.hero-grid {

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(27,63,148,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27,63,148,0.07) 1px, transparent 1px);

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.9),
            rgba(0,0,0,0.2)
        );
}



/* ============================================================
   1.4 LINHAS DECORATIVAS
============================================================ */

.hero-line {

    position: absolute;

    height: 2px;

    border-radius: 999px;

    overflow: hidden;
}


/* =========================
   AZUL CLARO
========================= */

.hero-line.line1 {

    width: 520px;

    top: 22%;
    left: -80px;

    transform: rotate(-8deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(0,147,208,0.45),
        transparent
    );
}

.hero-line.line2 {

    width: 320px;

    bottom: 18%;
    right: 10%;

    transform: rotate(14deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(0,147,208,0.35),
        transparent
    );
}


/* =========================
   AZUL ESCURO
========================= */

.hero-line.line3 {

    width: 420px;

    top: 60%;
    left: 12%;

    transform: rotate(10deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(27,63,148,0.35),
        transparent
    );
}

.hero-line.line4 {

    width: 260px;

    top: 12%;
    right: 16%;

    transform: rotate(-20deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(27,63,148,0.28),
        transparent
    );
}


/* =========================
   VERMELHO
========================= */

.hero-line.line5 {

    width: 340px;

    bottom: 26%;
    left: 34%;

    transform: rotate(-12deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(237,28,36,0.28),
        transparent
    );
}

.hero-line.line6 {

    width: 240px;

    top: 42%;
    right: -40px;

    transform: rotate(22deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(237,28,36,0.22),
        transparent
    );
}


/* ============================================================
   BRILHO ANIMADO
============================================================ */

.hero-line::before {

    content: "";

    position: absolute;

    top: 0;
    left: -40%;

    width: 80%;
    height: 100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgb(255, 255, 255),
        transparent
    );

    animation: lineShine 4s linear infinite;
}


/* velocidades diferentes */

.hero-line.line2::before {
    animation-duration: 5s;
}

.hero-line.line3::before {
    animation-duration: 3.5s;
}

.hero-line.line4::before {
    animation-duration: 6s;
}

.hero-line.line5::before {
    animation-duration: 4.5s;
}

.hero-line.line6::before {
    animation-duration: 7s;
}


/* animação */

@keyframes lineShine {

    0% {
        left: -40%;
    }

    100% {
        left: 140%;
    }
}


/* ============================================================
   1.5 GLOW
============================================================ */

.hero-glow {

    position: absolute;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background: rgba(0,147,208,0.08);

    filter: blur(120px);

    top: -200px;
    right: -100px;
}



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

.hero-content {

    position: relative;
    z-index: 2;

    max-width: 760px;

    padding-left: 90px;
    padding-top: 150px;
}



/* ============================================================
   1.7 LABEL
============================================================ */

.hero-label {

    display: inline-block;

    color: #52cefb;

    letter-spacing: 5px;
    text-transform: uppercase;

    font-size: 10px;
    font-weight: 600;
}



/* ============================================================
   1.8 TÍTULO
============================================================ */

.hero-content h1 {

    font-size: clamp(3rem, 5vw, 4.4rem);

    line-height: 1.08;
    font-weight: 600;

    color: #1B3F94;

    margin-bottom: 28px;

    max-width: 700px;
}



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

.hero-content p {

    font-size: 1.08rem;
    line-height: 1.9;

    color: #516173;

    max-width: 620px;
}



/* ============================================================
   1.10 RESPONSIVIDADE
============================================================ */

@media (max-width: 900px) {

    .hero {

        min-height: 540px;
    }

    .hero-content {

        padding: 120px 40px 0;
    }

    .hero-content h1 {

        font-size: 2.7rem;
    }

    .hero-grid {

        background-size: 50px 50px;
    }
}

/* ============================================================
   1.11 LINHAS DECORATIVAS
============================================================ */

/* ============================================================
   1.4 LINHAS DECORATIVAS
============================================================ */

.hero-line {

    position: absolute;

    height: 2px;

    border-radius: 999px;

    overflow: hidden;
}


/* =========================
   AZUL CLARO
========================= */

.hero-line.line1 {

    width: 520px;

    top: 22%;
    left: -80px;

    transform: rotate(-8deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(0,147,208,0.45),
        transparent
    );
}

.hero-line.line2 {

    width: 320px;

    bottom: 18%;
    right: 10%;

    transform: rotate(14deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(0,147,208,0.35),
        transparent
    );
}


/* =========================
   AZUL ESCURO
========================= */

.hero-line.line3 {

    width: 420px;

    top: 60%;
    left: 12%;

    transform: rotate(10deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(27,63,148,0.35),
        transparent
    );
}

.hero-line.line4 {

    width: 260px;

    top: 12%;
    right: 16%;

    transform: rotate(-20deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(27,63,148,0.28),
        transparent
    );
}


/* =========================
   VERMELHO
========================= */

.hero-line.line5 {

    width: 340px;

    bottom: 26%;
    left: 34%;

    transform: rotate(-12deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(237,28,36,0.28),
        transparent
    );
}

.hero-line.line6 {

    width: 240px;

    top: 42%;
    right: -40px;

    transform: rotate(22deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(237,28,36,0.22),
        transparent
    );
}


/* ============================================================
   BRILHO ANIMADO
============================================================ */

.hero-line::before {

    content: "";

    position: absolute;

    top: 0;
    left: -40%;

    width: 80%;
    height: 100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgb(255, 255, 255),
        transparent
    );

    animation: lineShine 4s linear infinite;
}


/* velocidades diferentes */

.hero-line.line2::before {
    animation-duration: 5s;
}

.hero-line.line3::before {
    animation-duration: 3.5s;
}

.hero-line.line4::before {
    animation-duration: 6s;
}

.hero-line.line5::before {
    animation-duration: 4.5s;
}

.hero-line.line6::before {
    animation-duration: 7s;
}


/* animação */

@keyframes lineShine {

    0% {
        left: -40%;
    }

    100% {
        left: 140%;
    }
}

/* ============================================================
   2. CARDS DOS CASOS ESTUDO
============================================================ */

/* ============================================================
   2.1 SECÇÃO PRINCIPAL
============================================================ */

.servicos-slider {

    position: relative;

    padding: 120px 0 80px;

    background: #f7fafc;

    overflow: visible;
}



/* ============================================================
   2.2 TÍTULO
============================================================ */

.servicos-titulo {

    color: #1B3F94;

    font-size: 2.5rem;
    font-weight: 700;

    margin-bottom: 60px;

    padding-left: 80px;
}



/* ============================================================
   2.3 SLIDER
============================================================ */

.slider-container {

    display: flex;
    gap: 30px;

    padding: 0 80px 60px;

    overflow-x: auto;
    overflow-y: visible;

    scroll-behavior: smooth;

    scrollbar-width: none;
}

.slider-container::-webkit-scrollbar {

    display: none;
}



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

.service-card {
    position: relative;

    width: 380px;
    min-width: 380px;
    max-width: 380px;

    height: 500px;

    flex-shrink: 0;

    padding: 40px;

    border-radius: 28px;

    background: white;

    border: 1px solid #dbe7f0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    box-sizing: border-box;
}



/* ============================================================
   2.5 LINHA SUPERIOR
============================================================ */

.service-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #0093D0,
            #1B3F94
        );
}



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

.service-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(0,0,0,0.08);
}



/* ============================================================
   2.7 STAGGER
============================================================ */

.service-card:nth-child(even) {

    margin-top: 60px;
}



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

.service-card h3 {

    font-size: 2rem;
    line-height: 1.2;

    color: #1B3F94;

    margin-bottom: 18px;
}

.service-card p {

    font-size: 1rem;
    line-height: 1.8;

    color: #5c6b7a;

    margin-bottom: 25px;

    white-space: normal !important;
}

.service-card h3,
.service-card p {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
}

/* ============================================================
   2.9 BOTÃO VER MAIS
============================================================ */

.btn-vermais {

    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    padding: 14px 24px;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 600;

    color: #1B3F94;

    background: #eef5fb;

    transition: 0.3s;

    position: relative;
    z-index: 5;
}

.btn-vermais:hover {

        background: linear-gradient( 135deg, #00bbff, #013f86);

    color: white;

    transform: translateX(4px);
}



/* ============================================================
   2.10 BOTÕES SLIDER
============================================================ */

.slider-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 100;

    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;

    background: white;

    color: #1B3F94;

    font-size: 1rem;

    cursor: pointer;

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

    transition: 0.3s;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.08);
}


.slider-btn i {

    pointer-events: none;
}

.slider-btn:hover {

    background: #1B3F94;
    color: white;

    transform:
        translateY(-50%)
        scale(1.08);
}

.slider-btn.left {

    left: 25px;
}

.slider-btn.right {

    right: 25px;
}

/*=================================
    2.11 IMAGEM CARD
==================================*/

.service-card-img {
    width: 100%;
    height: 170px;

    object-fit: cover;

    border-radius: 16px;

    display: block;
}

/* ============================================================
   3. CTA
============================================================ */



/* ============================================================
   3.1 SECÇÃO PRINCIPAL
============================================================ */

.cta-contactos {

    padding: 120px 80px;

    background:
        linear-gradient(
            135deg,
            #eef5f8,
            #dcecf3
        );
}



/* ============================================================
   3.2 CONTAINER
============================================================ */

.cta-contactos-container {

    display: flex;
    align-items: center;

    gap: 70px;
}



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

.cta-contactos-info {

    flex: 1;
}



/* ============================================================
   3.4 LABEL
============================================================ */

.cta-label {

    display: inline-block;

    color: #52cefb;

    letter-spacing: 5px;
    text-transform: uppercase;

    font-size: 10px;
    font-weight: 600;
}



/* ============================================================
   3.5 TÍTULO
============================================================ */

.cta-contactos-info h2 {

    font-size: 60px;

    color: #0a2540;

    margin-bottom: 24px;

    line-height: 1.1;
}



/* ============================================================
   3.6 DESCRIÇÃO
============================================================ */

.cta-contactos-info p {

    font-size: 1.1rem;
    line-height: 1.8;

    color: #35536b;

    max-width: 550px;

    margin-bottom: 40px;
}



/* ============================================================
   3.7 BOTÃO
============================================================ */

.cta-contacto-btn {

    display: inline-block;

    padding: 15px 32px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    color: white;

    background:
        linear-gradient(
            135deg,
            #00bbff,
            #013f86
        );

    box-shadow:
        0 10px 25px rgba(0, 119, 255, 0.397);

    transition: 0.3s;
}

.cta-contacto-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgb(0, 40, 87);
}



/* ============================================================
   3.8 MAPA
============================================================ */

.cta-mapa {

    flex: 1;

    height: 380px;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0a2540,
            #006699
        );

    box-shadow:
        0 20px 50px rgba(0,0,0,0.12);

    position: relative;
}

.cta-mapa:hover {

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgb(0, 40, 87);
}



/* ============================================================
   3.9 BRILHO
============================================================ */

.cta-mapa::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    background: rgba(255,255,255,0.08);

    border-radius: 50%;

    top: -80px;
    right: -80px;

    filter: blur(10px);
}





.service-card-img {
    width: 100%;
    height: 180px;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;

    margin-bottom: 18px;
}


    /* 14.2 CURSOR - DESATIVAR NO MOBILE */
    @media (max-width: 900px) {

        .cursor,
        .cursor-ring,
        .trail,
        .particle {
            display: none !important;
        }

        /* restaurar cursor normal */
        * {
            cursor: auto !important;
        }
    }