:root {
    --primary: #2ECEFF;
    --dark-blue: #0036ce;
    --text-white: #f0f1f8;
    --text-dark: #1e293b;
    --transition: all 0.4s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: #f0f4f8;
    overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* BOTÃO ORÇAMENTO */

.btn-orcamento{
    display:inline-flex;

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

    margin-top:25px;

    padding:16px 38px;

    background:linear-gradient(90deg,#0036ce,#2ECEFF);

    color:#fff;

    font-size:17px;
    font-weight:700;

    text-decoration:none;

    border-radius:50px;

    transition:0.4s ease;

    box-shadow:0 10px 25px rgba(0,0,0,0.25);
}


.btn-orcamento:hover{
    transform:translateY(-5px) scale(1.03);

    box-shadow:0 18px 35px rgba(0,0,0,0.35);

    background:linear-gradient(90deg,#0b1747,#0036ce);
}

/* =========================
   HEADER & NAVEGAÇÃO
========================= */


header {
    background: rgba(255, 255, 255, 0.98);
    padding: 0.6rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;  
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: var(--transition);
    display: flex;
    align-items: center;
}

header.scrolled {
    background: var(--dark-blue) !important;
    padding: 0.4rem 0;
    backdrop-filter: blur(5px);
}

nav.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo-container {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.logo-img {
    height: 40px;
    width: auto;
    display: block;
}

.logo-scroll { display: none; }
header.scrolled .logo-initial { display: none; }
header.scrolled .logo-scroll { display: block; }

.nav-links { display: flex; list-style: none; gap: 2rem; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text-dark); font-weight: 600; transition: var(--transition); }
header.scrolled .nav-links a { color: #ffffff; }
.nav-links a:hover, header.scrolled .nav-links a:hover { color: var(--primary); }

.btn-cliente {
    background: var(--dark-blue);
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 0.9rem;
}

.mvv-imagem {
    width: 120%;        /* Aumenta a largura para além do contêiner */
    max-width: none;    /* Garante que nada bloqueie o crescimento */
    height: auto;
    display: block;
    margin: -70px auto 0; /* O valor negativo puxa o caminhão para cima, removendo o vazio */
    transform: scale(1.2); /* Aplica um zoom de 20% sem distorcer */
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.15));
}

/* =========================
   SEÇÕES DE CONTEÚDO
========================= */
.video-section { position: relative; height: 100vh; overflow: hidden; }
.bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: -2; }
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, var(--dark-blue), rgba(244, 246, 247, 0.3)); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center; }
.video-overlay h2 { font-size: 3rem; margin-bottom: 10px; }

/* ===================================== */
/* RESET */
/* ===================================== */

html,
body{
    width:100%;
    overflow-x:hidden;
}


/* ===================================== */
/* SEÇÃO SOLUÇÕES */
/* ===================================== */

.solucoes{
    width:100%;
    background:transparent;
    padding:90px 5%;
    text-align:center;
    overflow:hidden;
}

/* ===================================== */
/* CARDS */
/* ===================================== */

.cards-solucoes{
    width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap: 100px;

    flex-wrap:wrap;

    background:transparent;
}

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

.solucao-card{
    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-end;

    width:260px;

    min-height:260px;

    transition:0.4s ease;

    cursor:pointer;

    background:transparent;
}

/* HOVER */

.solucao-card:hover{
    transform:translateY(-12px) scale(1.03);
}

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

.solucao-card img{

    width:100%;

    height:180px; /* TODAS MESMA ALTURA */

    object-fit:contain; /* mantém proporção */

    display:block;

    background:transparent;

    mix-blend-mode:multiply; /* remove fundo branco leve */

    margin-bottom:-12px;

    z-index:2;

    filter:drop-shadow(0 12px 18px rgba(0,0,0,0.12));
}

/* ===================================== */
/* TAG */
/* ===================================== */

.tag-solucao{

    position:relative;

    background:linear-gradient(90deg,#0623a5,#268cbb);

    color:#fff;

    padding:12px 34px;

    border-radius:50px;

    font-size:20px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    white-space:nowrap;

    width:fit-content;

    z-index:1;

    box-shadow:0 10px 20px rgba(0,0,0,0.15);
}

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

@media(max-width:1200px){

    .texto-titulo h2{
        font-size:48px;
    }

}

@media(max-width:768px){

    .solucoes{
        padding:70px 20px;
    }

    .titulo-solucoes{
        flex-direction:column;
        gap:15px;
        margin-bottom:50px;
    }

    .linha{
        display:none;
    }

    .texto-titulo h2{
        font-size:32px;
        line-height:1.2;
    }

    .cards-solucoes{
        gap:40px;
    }

    .solucao-card{
        width:100%;
        max-width:300px;
        min-height:auto;
    }

    .solucao-card img{
        height:170px;
    }

    .tag-solucao{
        font-size:16px;
        padding:10px 24px;
    }

}

/* ===================================== */
/* CARROSSEL FOOTER */
/* ===================================== */

.footer-carousel-section {
    width: 100%;
    max-width: 1200px;

    margin: 60px auto;
    padding: 0 20px;
}

/* SWIPER */
.myFooterSwiper {
    width: 100%;

    /* ALTURA DEFINIDA */
    height: 500px;

    border-radius: 20px;
    overflow: hidden;

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

    position: relative;

    background: #000;
}

/* SLIDE */
.myFooterSwiper .swiper-slide {
    width: 100%;
    height: 100%;

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

    overflow: hidden;
}

/* IMAGEM */
.myFooterSwiper .swiper-slide img {
    width: 100%;
    height: 100%;

    display: block;

    /* PREENCHE O BANNER */
    object-fit: cover;

    /* CENTRALIZA */
    object-position: center;

    border-radius: 20px;
}

/* BOTÕES */
.swiper-button-next,
.swiper-button-prev {
    color: #2ECEFF;
    transform: scale(0.8);
}

/* PAGINAÇÃO */
.swiper-pagination-bullet {
    background: #2ECEFF;
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

/* ===================================== */
/* 🤖 AI SECTION */
/* ===================================== */

.ai-section {
    padding: 80px 0;
    background: white;
}

.ai-container {
    display: flex;
    align-items: center;
    gap: 40px;
}

.ai-tech-img {
    width: 100%;
    height: auto;

    border-radius: 20px;

    object-fit: cover;

    box-shadow: 20px 20px 0px var(--primary);
}

/* ===================================== */
/*  TABLET */
/* ===================================== */

@media (max-width: 768px) {

    .footer-carousel-section {
        margin: 40px auto;
        padding: 0 15px;
    }

    .myFooterSwiper {
        height: 320px;
        border-radius: 15px;
    }

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

    .ai-container {
        flex-direction: column;
        text-align: center;
    }

    .ai-tech-img {
        box-shadow: 10px 10px 0px var(--primary);
    }
}

/* ===================================== */
/* 📱 MOBILE */
/* ===================================== */

@media (max-width: 480px) {

    .footer-carousel-section {
        padding: 0 10px;
    }

    .myFooterSwiper {
        height: 220px;
        border-radius: 10px;
    }

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

    .swiper-button-next,
    .swiper-button-prev {
        transform: scale(0.6);
    }

    .ai-section {
        padding: 50px 0;
    }
}

.contact-section{

    position: relative;

    background: #0036ce;

    padding: 160px 20px 80px;

    text-align: center;

    overflow: hidden;
}

.contact-section::before{

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 160px;

    background: #f5f7fb;

    clip-path: ellipse(75% 100% at 75% 0%);
}

/* REDES */

.social-contact{

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;
}



/* BOTÕES MENORES */

.social-contact a{

    width: 54px;
    height: 54px;

    border-radius: 50%;

    background: rgba(245, 242, 242, 0.904);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(250, 244, 244, 0.986);

    display: flex;

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

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

/* ÍCONES MENORES */

.social-contact img{

    width: 24px;
    height: 24px;

    object-fit: contain;
}

/* HOVER */

.social-contact a:hover{

    transform: translateY(-6px);

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

    box-shadow:
        0 10px 20px rgba(0,0,0,0.15);
}

/* MOBILE */

@media (max-width: 768px){

    .contact-section{

        padding: 130px 20px 70px;
    }

    .contact-section h2{

        font-size: 1.3rem;
    }

    .social-contact a{

        width: 48px;
        height: 48px;
    }

    .social-contact img{

        width: 20px;
        height: 20px;
    }
}

/* =========================
   FOOTER (AJUSTE DAS LOGOS)
========================= */
.footer-starce { 
    background-color: #0036ce;
    padding: 60px 0 30px; 
    text-align: center; 
    color: white; 
}

.logo-starce { 
    height: 100px; /* Reduzi de 150px para 100px */
    width: auto; 
    filter: brightness(0) invert(1); 
    margin-bottom: 20px;
}

.footer-logos { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 40px; 
    flex-wrap: wrap; 
    margin: 30px 0; 
}

.footer-logos img { 
    max-height: 55px; /* Reduzido para um tamanho mais clean */
    width: auto;
    filter: brightness(0) invert(1); 
    opacity: 0.7; /* Opacidade suave para não brigar com o conteúdo */
    transition: var(--transition); 
}

.footer-logos img:hover { 
    opacity: 1; 
    transform: scale(1.05); 
}

.whatsapp-btn { position: fixed; bottom: 30px; right: 30px; background: #25d366; width: 65px; height: 65px; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 1001; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }

/* RESPONSIVO */
@media (max-width: 768px) {
    .ai-container { flex-direction: column; }
    .myFooterSwiper { height: 250px; }
    .solucoes .card { width: 90%; max-width: 320px; }
    .footer-logos { gap: 25px; }
    .footer-logos img { max-height: 40px; }
}
/* =========================
   AJUSTE NA CAPA (SEM ALTERAR HTML)
========================= */

/* container da imagem */
.img-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* overlay azul + transparência */
.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        to right,
        rgb(20, 30, 168) 40%,
        rgba(20, 169, 238, 0.808) 80%,
        rgba(255, 255, 255, 0.3) 100%
    );
    display: flex;
    align-items: center;
    padding-left: 80px;
    text-align: left;
}

/* TEXTO PRINCIPAL ATUALIZADO */
.img-overlay p {
    /* Fonte mais moderna e limpa */
    font-family: 'Montserrat', sans-serif; 
    font-weight: 800; /* Um pouco menos que 900 para não ficar bruto */
    
    /* Tamanho reduzido (de 3.5rem para 2.4rem) */
    font-size: 2.4rem; 
    max-width: 700px;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: -1px; /* Toque moderno: letras levemente mais juntas */

    /* EFEITO DE COR: Metade Branco, Metade Ciano */
    /* 50% branco até o meio, depois vira ciano */
    background: linear-gradient(to right, #ffffff 50%, #2ECEFF 50%);
    
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .img-overlay p {
        font-size: 1.8rem;
        background: linear-gradient(to bottom, #ffffff 50%, #2ECEFF 50%) !important; 
        
        -webkit-background-clip: text !important;
        background-clip: text;
        -webkit-text-fill-color: transparent !important;
        
        display: inline-block; /* Garante que o fundo cubra apenas a área do texto */
    }
}
/* =========================
   TABLET
========================= */
@media (max-width: 1024px) {

    /* textos menores */
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.4rem; }

    /* grids viram 1 coluna */
    .grid,
    .feature-grid,
    .cards {
        flex-direction: column !important;
        display: flex !important;
        align-items: center;
    }

    /* cards ocupam mais espaço */
    .feature-card,
    .card,
    .diff-card {
        width: 90% !important;
        max-width: 400px;
    }
}

/* Conteúdo */
.img-overlay {
    position: relative;
    z-index: 1;
    color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* texto à esquerda */

    text-align: left; /* alinha texto */
    height: 100%;
    padding: 0 80px;

    /* GRADIENTE SUAVE */
    background: linear-gradient(
        to right,
        rgba(0, 54, 206, 0.7) 10%,
        rgba(15, 51, 160, 0.4) 50%,
        rgba(197, 82, 82, 0.2) 80%,
        rgba(172, 187, 38, 0) 100%
    );
}

/*/* ========================= */
/* 📱 RESPONSIVO (TABLET E CELULAR) */
/* ========================= */
@media (max-width: 768px) {

    /* MENU */
    .navbar,
    .nav-links {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-links a {
        font-size: 14px;
        padding: 8px 10px;
    }

    .btn-cliente {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* BANNER */
    .img-overlay {
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .img-overlay h2 {
        font-size: 20px;
        line-height: 1.3;
    }

    .img-overlay p {
        font-size: 14px;
    }

    /* ABOUT BANNER */
    .banner-overlay {
        flex-direction: column;
    }

    .banner-images {
        width: 100%;
        height: 220px;
    }

    .banner-text-box {
        width: 100%;
        padding: 1.5rem;
        text-align: center;
    }

    .banner-text-box h1 {
        font-size: 2rem;
    }

    .banner-text-box p {
        font-size: 1rem;
        border-left: none;
        padding-left: 0;
        margin-top: 1rem;
    }

    /* GRID */
    .history-mission.grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Diferenciais */
.differentials {
    background-color: #f8fafc;
    padding: 80px 2rem;
    text-align: center;
}

.differentials h2 {
    color: #0b1747;
    margin-bottom: 3rem;
}

.diff-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.diff-card {
    width: 300px;
}

.diff-card .img-wrapper {
    width: 100%;
    height: 200px;
    border: 2px solid #0b1747;
    overflow: hidden;
    margin-bottom: 1rem;
}

.diff-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.diff-card:hover img {
    transform: scale(1.1);
}

.diff-card p {
    font-weight: 600;
    color: #0b1747;
}

/* CONFIGURAÇÕES DO BANNER ÚNICO TELA A TELA */
.about-banner-full {
    width: 100vw; /* Ocupa 100% da largura da janela de visualização */
    height: 300px; /* Altura fixa do banner. Ajuste conforme preferir */
    position: relative;
    overflow: hidden;
    margin-top: 80px; /* Espaço para o header fixo */
    margin-left: calc(-50vw + 50%); /* Garante que ela saia do container e vá tela a tela */
}

/* A imagem de fundo */
.banner-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem cobrir toda a área sem distorcer */
    object-position: center; /* Centraliza o foco da imagem */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Fica atrás de tudo */
}
.sobre {
    background: linear-gradient(180deg, #e1e2e4 0%, #f7f8fa 100%);
    padding: 160px 8% 120px 8%; 
    color: #0a094d;
    position: relative;
    overflow: hidden;
}

/* Container da Onda (Shape Divider) */
.sobre-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg); 
}

.sobre-container {
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.sobre-texto {
    flex: 1;
}

.sobre-tag {
    display: inline-block;
    color: #178cda;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.sobre-texto h2 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 25px;
    font-weight: 800;
}

.sobre-texto p {
    color: #1a275c;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.sobre-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.sobre-card {
    background: rgba(19, 17, 99, 0.05);
    border: 1px solid rgba(9, 24, 156, 0.08);
    border-radius: 20px;
    padding: 25px;
    transition: 0.4s ease;
    backdrop-filter: blur(10px);
}

.sobre-card:hover {
    transform: translateY(-8px);
    border-color: #dadcdd;
    box-shadow: 0 0 25px rgba(9, 136, 175, 0.2);
}

.sobre-card h3 {
    color: #178cda;
    margin-bottom: 12px;
    font-size: 20px;
}

.sobre-card p {
    font-size: 15px;
    margin: 0;
    line-height: 1.6;
}

.sobre-imagem {
    flex: 1;
    display: flex;
    justify-content: center;
}

.sobre-imagem img {
    width: 100%;
    max-width: 550px;
    border-radius: 30px;
    object-fit: cover;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transition: 0.4s ease;
}

.sobre-imagem img:hover {
    transform: scale(1.02);
}

/* Responsividade */
@media (max-width: 992px) {
    .sobre-container {
        flex-direction: column;
        text-align: center;
    }
    .sobre-cards {
        grid-template-columns: 1fr;
    }
}

/* RESPONSIVO */

@media (max-width: 1100px) {

    .sobre-container {
        flex-direction: column;
    }

    .sobre-texto h2 {
        font-size: 38px;
    }

    .sobre-cards {
        grid-template-columns: 1fr;
    }

    .sobre-imagem img {
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    .sobre {
        padding: 90px 6%;
    }

    .sobre-texto h2 {
        font-size: 30px;
    }

    .sobre-texto p {
        font-size: 15px;
    }

    .sobre-card {
        padding: 20px;
    }
}

/* =========================
   SEÇÃO TRANSFORMAÇÕES COM EFICIENCIA 
========================= */

.sobre-mvv {
    padding: 120px 8%;
    background: #f5f5f5;
}

.mvv-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

/* TEXTO */

.mvv-texto {
    flex: 1;
    position: relative;
    max-width: 550px;
}

.superior-tag {
    position: absolute;
    left: -45px;
    top: 10px;

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #64748b;

    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.mvv-texto h2 {
    font-size: 3rem;
    line-height: 1.1;
    color: #0b1747;
    margin-bottom: 15px;
    font-weight: 800;
}

.mvv-texto h2 span {
    color: #178cda;
}

.linha-decorativa {
    width: 70px;
    height: 4px;
    background: #178cda;
    margin-bottom: 35px;
    border-radius: 20px;
}

.mvv-bloco {
    margin-bottom: 30px;
}

.mvv-bloco h3 {
    color: #0b1747;
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.mvv-bloco p {
    color: #475569;
    font-size: 1rem;
    line-height: 1.8;
}

/* IMAGEM */

.mvv-imagem {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* REMOVE FUNDO BRANCO */
.mvv-imagem img {
    width: 100%;
    max-width: 500px;

    object-fit: contain;

    background: transparent;
    mix-blend-mode: multiply;

    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.158));

    transition: 0.4s ease;
}

.mvv-imagem img:hover {
    transform: scale(1.03);
}

/* RESPONSIVO */

@media (max-width: 992px) {

    .mvv-flex {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .mvv-texto {
        max-width: 100%;
    }

    .superior-tag {
        display: none;
    }

    .linha-decorativa {
        margin: 0 auto 30px;
    }

    .mvv-texto h2 {
        font-size: 2.2rem;
    }

    .mvv-imagem img {
        max-width: 350px;
    }
}