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

html{
    scroll-behavior: smooth;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #111;
    overflow-x: hidden;
}

/* ========================================
   VARIÁVEIS
======================================== */

:root{
    --primary: #2ECEFF;
    --secondary: #0036ce;
    --dark: #08132b;
    --white: #fff;
    --gray: #f4f7fb;

    --transition: .4s ease;
}

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

.container{
    width: 100%;
    max-width: 1300px;
    margin: auto;
}

/* ========================================
   HEADER
======================================== */

header{
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 999;

    padding: 20px 0;

    transition: var(--transition);

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(12px);
}

header.scrolled{
    background: rgba(0,54,206,.96);
    padding: 14px 0;
}

header nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-container{
    position: relative;
    width: 180px;
    height: 60px;
}

.logo-img{
    position: absolute;
    width: 100%;
    transition: .4s ease;
}

.logo-scroll{
    opacity: 0;
}

header.scrolled .logo-scroll{
    opacity: 1;
}

header.scrolled .logo-initial{
    opacity: 0;
}

.nav-links{
    display: flex;
    align-items: center;
    gap: 35px;

    list-style: none;
}

.nav-links a{
    color: var(--white);
    text-decoration: none;
    font-weight: 600;

    transition: var(--transition);
}

.nav-links a:hover{
    color: var(--primary);
}

.btn-cliente{
    padding: 14px 26px;

    background: var(--primary);

    border-radius: 50px;

    color: var(--white) !important;

    transition: var(--transition);
}

.btn-cliente:hover{
    background: var(--white);
    color: var(--secondary) !important;
}

/* ========================================
   BOTÃO ORÇAMENTO 
======================================== */

.btn-orcamento{
    position: relative;

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

    padding: 18px 42px;
    margin-top: 25px;

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

    color: #fff;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;

    text-decoration: none;
    text-transform: uppercase;

    border: 2px solid rgba(255,255,255,0.25);

    border-radius: 16px;

    backdrop-filter: blur(14px);

    overflow: hidden;

    transition: all .45s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    inset 0 0 0 rgba(255,255,255,0.1);
}

/* EFEITO DE LUZ */

.btn-orcamento::before{
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition: .7s ease;
}

/* HOVER */

.btn-orcamento:hover{
    transform: translateY(-6px);

    background: #ffffff;

    color: #0036ce;

    border-color: #ffffff;

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

.btn-orcamento:hover::before{
    left: 120%;
}

/* CLIQUE */

.btn-orcamento:active{
    transform: scale(.96);
}

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

.img-section{
    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;
}

.bg-video{
    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* ========================================
   SOLUÇÕES
======================================== */

.solucoes {
    padding: 200px 0; /* Reduzi um pouco os 300px para ficar mais harmônico, ajuste como preferir */
    background-color: #f8f9fa59; /* Um fundo claro para destacar os cards escuros */
}

.cards-solucoes {
    width: 90%;
    max-width: 1300px;
    margin: auto;

    display: grid;
    /* Mantive o grid, mas se forem apenas 3 itens igual à foto, use: repeat(3, 1fr) */
    grid-template-columns: repeat(4, 1fr); 

    gap: 25px;
}

/* O CARD: Agora escuro, quadrado e centralizado */
.solucao-card {
    position: relative;
    height: 320px; /* Definido uma altura fixa para garantir que fique quadrado/proporcional */
    
    background-color: #1a1d20; /* Grafite escuro premium ultra profissional */
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;

    /* Ativa o Flexbox para centralizar a imagem horizontal e verticalmente */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px; /* Margem interna para a imagem nunca tocar a borda do card */

    /* Sombra sutil para dar profundidade de elemento flutuante */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* A IMAGEM: Centralizada e sem distorcer */
.solucao-card img {
    max-width: 85%;  /* Impede que a imagem passe do limite */
    max-height: 85%; /* Garante que ela respeite a altura do card */
    width: auto;
    height: auto;
    
    object-fit: contain; /* Faz a imagem inteira caber no centro sem cortar */
    transition: transform 0.4s ease;
}

/* EFEITOS DE HOVER (Quando passa o mouse) */
.solucao-card:hover {
    transform: translateY(-6px); /* O card flutua levemente para cima */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Aumenta a sombra no hover */
}

.solucao-card:hover img {
    transform: scale(1.05); /* Efeito de zoom sutil na imagem do produto */
}

/* A TAG/TEXTO (Caso ainda vá usar dentro do card) */
.tag-solucao {
    position: absolute;
    left: 20px;
    bottom: 20px;

    background-color: #f4f6f9;
    padding: 12px 22px;
    border-radius: 40px;

    color: var(--secondary);
    font-weight: 700;
}
/* ========================================
   AI SECTION
======================================== */

.ai-section{
    padding: 120px 0;
    background: var(--gray);
}

.ai-container{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 60px;
}

.ai-text{
    flex: 1;
}

.ai-text h2{
    font-size: 3rem;
    line-height: 1.2;

    margin-bottom: 30px;
}

.highlight{
    color: var(--primary);
}

.ai-text p{
    margin-bottom: 16px;
    color: #444;
    font-size: 1.1rem;
}

.ai-visual{
    flex: 1;
}

.ai-tech-img{
    width: 100%;
    border-radius: 30px;
}

/* ========================================
   SWIPER
======================================== */

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

.myFooterSwiper{
    width: 90%;
    max-width: 1300px;

    border-radius: 30px;

    overflow: hidden;
}

.swiper-slide img{
    width: 100%;
    height: 600px;

    object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev{
    color: #fff;
}


/* ==========================================================================
   SEÇÃO DE CONTATO PREMIUM & MINIMALISTA
   ========================================================================== */

.contact-section {
    background: #0036CE; 
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
}

.contact-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px; /* Espaço elegante de respiro entre o texto e o formulário */
    position: relative;
    z-index: 2; /* Garante que todo o conteúdo fique na FRENTE de qualquer onda/background */
}

/* ==========================================================================
   COLUNA DA ESQUERDA (TEXTO INCENTIVADOR / PERSUASIVO)
   ========================================================================== */

.contact-left {
    flex: 1;
    max-width: 520px;
}

.contact-left .sub-title {
    color: #2eceff; 
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
}

.contact-left .main-title {
    color: #ffffff; 
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

.contact-left .section-subtitle {
    color: #2eceff;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 25px 0;
}

.contact-left .description {
    color: rgba(255, 255, 255, 0.8); 
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   COLUNA DA DIREITA (FORMULÁRIO MINIMALISTA EM LINHAS)
   ========================================================================== */

.contact-form {
    flex: 1;
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px; /* Espaçamento idêntico e amplo para as linhas respirarem */
}

.form-group {
    position: relative;
    width: 100%;
}

/* Design Minimalista: Remove fundos e caixas, mantendo apenas a linha inferior */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 4px; /* Sem preenchimento lateral, alinhado perfeitamente à esquerda */
    font-size: 1rem;
    color: #ffffff; /* Texto que o usuário digita fica branco */
    background-color: transparent !important; /* Sem caixas cinzas ou brancas de fundo */
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Linha suave padrão */
    border-radius: 0;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Estilização dos Placeholders (Textos internos de orientação) */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5); /* Branco opaco sutil */
}

/* Acendimento em Ciano ao clicar/focar em qualquer campo */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-bottom-color: #2eceff;
    box-shadow: none;
}

/* Limitador para a caixa de mensagem */
.form-group textarea {
    resize: none;
    min-height: 90px;
}

/* ==========================================================================
   CORREÇÃO DEFINITIVA: OPÇÕES DO SELECT (NÃO FICAREM BRANCAS)
   ========================================================================== */

.select-wrapper {
    position: relative;
}

/* Remove as setas padrões feias dos navegadores */
.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Força as opções suspensas a terem fundo branco e texto no seu azul corporativo */
.form-group select option {
    background-color: #ffffff !important; /* Caixa de opções limpa */
    color: #0036CE !important;            /* Texto escuro perfeitamente legível ao abrir */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    padding: 12px;
}

/* Estiliza especificamente a primeira opção (Placeholder desabilitado) dentro da lista */
.form-group select option[disabled] {
    color: rgba(0, 54, 206, 0.5) !important;
}

/* Nova seta minimalista do Select (Seta fina apontando para baixo em Ciano) */
.select-wrapper::after {
    content: '↓';
    font-size: 1rem;
    color: #2eceff;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Permite clicar na seta e ainda abrir o select */
    transition: transform 0.3s ease;
}

/* Rotaciona levemente a seta quando o select estiver ativo (opcional e elegante) */
.select-wrapper:focus-within::after {
    transform: translateY(-50%) scale(1.1);
}

/* ==========================================================================
   RODAPÉ DO FORMULÁRIO (TERMOS E BOTÃO DE ENVIAR)
   ========================================================================== */

.form-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.terms-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    margin: 0;
}

/* Botão Clean com transição suave */
.btn-submit {
    background-color: #2eceff; /* Contraste imediato em Ciano */
    color: #0036CE; /* Texto no azul escuro para leitura perfeita */
    border: none;
    padding: 16px 40px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    align-self: flex-start; /* No desktop ele se ajusta ao tamanho do texto */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(46, 206, 255, 0.2);
}

.btn-submit:hover {
    background-color: #ffffff;
    color: #0036CE;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

.btn-submit:active {
    transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVIDADE COMPLETA (TABLET E MOBILE)
   ========================================================================== */

@media (max-width: 992px) {
    /* Faz o layout virar uma coluna única em tablets e telas menores */
    .contact-container {
        flex-direction: column;
        gap: 60px;
        padding: 0 10px;
    }
    
    .contact-left, 
    .contact-form {
        max-width: 100%; /* Ocupa toda a largura disponível */
    }
    
    .btn-submit {
        width: 100%; /* Botão vira bloco inteiro no mobile, facilitando o clique */
        text-align: center;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 110px 20px 60px 20px; /* Mantém uma folga segura para a onda no mobile */
    }

    .contact-left .main-title {
        font-size: 2.4rem; /* Reduz tamanho do título principal no celular */
    }

    .contact-left .section-subtitle {
        font-size: 1.2rem;
    }
    
    .contact-form {
        gap: 22px; /* Encurta levemente o espaçamento para telas pequenas */
    }
}

/* ==========================================================================
   RODAPÉ DO FORMULÁRIO (TERMOS E BOTÃO DE ENVIO)
   ========================================================================== */
.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    gap: 20px;
}

.terms-text {
    color: #ffffff;
    font-size: 0.8rem;
    max-width: 450px;
    line-height: 1.4;
}

.btn-submit {
    background-color: #2563eb; /* Azul padrão Infleet */
    color: #ffffff;
    padding: 12px 36px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.btn-submit:hover {
    background-color: #1d4ed8;
}

.btn-submit:active {
    transform: scale(0.98);
}

/* ==========================================================================
   RESPONSIVIDADE PARA CELULARES
   ========================================================================== */
@media (max-width: 640px) {
    .form-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        text-align: center;
    }
    
    .btn-submit {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .contact-container .main-title {
        font-size: 1.8rem;
    }
}

/* ========================================
   EMPRESAS
======================================== */

.empresas-section{
    padding: 100px 0;
    background: #fff;

    overflow: hidden;
}

.empresas-section .container{
    text-align: center;
    margin-bottom: 40px;
}

.empresas-tag{
    color: var(--secondary);
    font-size: 2.2rem;
    font-weight: 800;
}

.logos-slider{
    overflow: hidden;
    cursor: grab;
}

.logos-track{
    display: flex;
    align-items: center;

    gap: 70px;

    width: max-content;

    animation: scrollLogos 28s linear infinite;
}

.logos-slider:hover .logos-track{
    animation-play-state: paused;
}

.logo-item{
    width: 220px;
    height: 120px;

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

    border-radius: 25px;

    background: #fff;

    transition: .4s ease;
}

.logo-item img{
    width: 100%;
    max-width: 160px;

    object-fit: contain;

    filter: grayscale(100%);
    opacity: .8;

    transition: .4s ease;
}

.logo-item:hover{
    transform: translateY(-8px);
}

.logo-item:hover img{
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scrollLogos{

    from{
        transform: translateX(0);
    }

    to{
        transform: translateX(-50%);
    }

}

/* ========================================
   FAQ
======================================== */

.faq-section{
    width: 90%;
    max-width: 1300px;

    margin: 120px auto;

    display: flex;
    justify-content: space-between;

    gap: 60px;
}

.faq-info{
    flex: 1;
}

.faq-subtitle{
    color: var(--primary);
    font-weight: 700;
}

.faq-info h2{
    font-size: 3rem;
    margin: 20px 0;
}

.faq-info p{
    color: #555;
    line-height: 1.8;
}

.faq-btn{
    margin-top: 30px;

    padding: 16px 35px;

    background: var(--secondary);

    border: none;
    border-radius: 50px;

    color: #fff;

    font-weight: 700;

    cursor: pointer;

    transition: .4s ease;
}

.faq-btn:hover{
    background: var(--primary);
}

.faq-accordion{
    flex: 1;
}

.faq-item{
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
}

.faq-question{
    width: 100%;

    background: none;
    border: none;

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

    cursor: pointer;

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

    text-align: left;
}

.faq-answer{
    max-height: 0;
    overflow: hidden;

    transition: .4s ease;
}

.faq-answer p{
    margin-top: 20px;
    color: #555;
    line-height: 1.7;
}

.faq-item.active .faq-answer{
    max-height: 300px;
}

.faq-item.active .faq-icon{
    transform: rotate(45deg);
}

/* ========================================
   REDES
======================================== */

.contact-section{
    padding: 80px 0;
    text-align: center;
}

.social-contact{
    display: flex;
    justify-content: center;

    gap: 30px;
}

.social-contact img{
    width: 60px;

    transition: .4s ease;
}

.social-contact img:hover{
    transform: translateY(-10px) scale(1.1);
}

/* ========================================
   WHATSAPP
======================================== */

.whatsapp-btn{
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 70px;
    height: 70px;

    background: #25d366;

    border-radius: 50%;

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

    z-index: 999;

    box-shadow: 0 10px 30px rgba(0,0,0,.25);

    transition: .4s ease;
}

.whatsapp-btn img{
    width: 38px;
}

.whatsapp-btn:hover{
    transform: scale(1.1);
}

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

@media(max-width:1100px){

    .mvv-flex,
    .ai-container,
    .faq-section,
    .sobre-container{
        flex-direction: column;
    }

    .cards-solucoes{
        grid-template-columns: repeat(2,1fr);
    }

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

}

@media(max-width:768px){

    .nav-links{
        display: none;
    }

    .img-overlay h1{
        font-size: 3rem;
    }

    .mvv-texto h2,
    .texto-titulo h2,
    .ai-text h2,
    .faq-info h2,
    .sobre-texto h2{
        font-size: 2.2rem;
    }

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

    .swiper-slide img{
        height: 300px;
    }

}

@media(max-width:550px){

    .img-overlay h1{
        font-size: 2.2rem;
    }

    .btn-orcamento{
        padding: 16px 28px;
    }

}

: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; }

/* =========================
   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;
}

.sobre-mvv {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: sans-serif;
    background-color: transparent; 
}

/* --------------------------------------------------------------------------
   1. TOPO DA SEÇÃO (Título Centralizado)
   -------------------------------------------------------------------------- */
.mvv-topo {
    text-align: center;
    margin-bottom: 50px;
    background-color: transparent;
}

.mvv-topo .superior-tag {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #0b1b4f; /* Tom de azul escuro do seu título */
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.mvv-topo h2 {
    font-size: 36px;
    color: #0b1b4f;
    line-height: 1.2;
    margin: 0;
}

.mvv-topo h2 span {
    color: #0084ff; /* Tom de azul claro para o destaque */
    font-weight: 800;
}

.linha-decorativa {
    width: 60px;
    height: 3px;
    background-color: #0084ff;
    margin: 15px auto 0 auto;
}

/* --------------------------------------------------------------------------
   2. ESTRUTURA LADO A LADO (Flexbox)
   -------------------------------------------------------------------------- */
.mvv-container {
    display: flex;
    align-items: center;         
    justify-content: space-between; 
    gap: 50px;                   
    background-color: transparent;
}

/* --------------------------------------------------------------------------
   3. COLUNA DE TEXTO (Esquerda)
   -------------------------------------------------------------------------- */
.mvv-texto {
    flex: 1;                      /* Faz o bloco de texto ocupar metade do espaço */
    background-color: transparent;
}

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

.mvv-bloco:last-child {
    margin-bottom: 0;             /* Remove a margem do último bloco de texto */
}

.mvv-bloco h3 {
    font-size: 22px;
    color: #0b1b4f;
    margin: 0 0 8px 0;
}

.mvv-bloco p {
    font-size: 16px;
    color: #666666;               /* Tom de cinza suave para leitura confortável */
    line-height: 1.6;
    margin: 0;
}

/* --------------------------------------------------------------------------
   4. COLUNA DA IMAGEM (Direita)
   -------------------------------------------------------------------------- */
.mvv-imagem {
    flex: 1.2;
    display: flex;
    justify-content: center;
    background-color: transparent;
}

.mvv-imagem img {
    max-width: 100%;
    height: auto;
    display: block;
    border: none;                 /* Remove qualquer borda indesejada */
    background-color: transparent; /* Garante que a tag img não herda fundos opacos */
    
}

/* --------------------------------------------------------------------------
   5. RESPONSIVIDADE (Ecrãs de Telemóvel / Tablets)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sobre-mvv {
        padding: 40px 15px;
    }

    .mvv-topo h2 {
        font-size: 28px;          /* Diminui o título principal em ecrãs pequenos */
    }

    .mvv-container {
        flex-direction: column;   /* Empilha os elementos: Texto no topo, Imagem abaixo */
        text-align: center;       /* Centraliza o alinhamento dos textos no telemóvel */
        gap: 40px;
    }
    
    .mvv-imagem {
        width: 100%;
    }
}

/* =========================
   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; }
.video-overlay h1 { font-size: 3rem; margin-bottom: 10px; }
/* ===================================== */
/* RESET */
/* ===================================== */

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

.cards-section-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 40px 20px;
    background-color: #f4f6f9; /* Fundo levemente azulado igual ao seu print */
    flex-wrap: wrap;
}

/* Configuração do Card (Largura e Altura do quadrado) */
.flip-card {
    background-color: transparent;
    width: 280px;
    height: 320px;
    perspective: 1000px; /* Cria o efeito de profundidade 3D */
}

/* O container interno que realmente vai girar */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Quando passa o mouse, gira 180 graus */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Propriedades comuns para a Frente e o Verso */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Oculta o lado oposto durante a rotação */
    backface-visibility: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* --- ESTILO DA FRENTE CARDS --- */
.flip-card-front {
    background-color: #ffffff00;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 24px 16px;
}

/* Espaço reservado para a imagem */
.card-image-wrapper {
    width: 200%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- ESTILO DO VERSO (Texto descritivo) --- */
.flip-card-back {
    background-color: #ffffff00;
    color: #333333;
    transform: rotateY(180deg); /* Já começa invertido para aparecer na rotação */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.flip-card-back h3 {
    font-size: 20px;
    color: #0624a6;
    margin-bottom: 12px;
    font-weight: 700;
}

.flip-card-back p {
    font-size: 14px;
    color: #555555;
    line-height: 1.5;
}


.footer-carousel-section {
    width: 100%;
    overflow: hidden;
    background-color: #ffffff; /* Fundo preto caso o vídeo demore a carregar */
}

.video-container {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-video {
    width: 100%;
    height: auto;
    max-height: 500px; /* Ajuste a altura máxima como preferir */
    object-fit: cover; /* Faz o vídeo preencher o espaço sem distorcer */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fcfcfc;
}

.swiper-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que o vídeo se comporte como o banner antigo */
}

/* ===================================== */
/* 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; }
}

/* 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%;

    /* Atualizado para começar com o seu azul #0036CE */
    background: linear-gradient(
        to right,
        rgb(0, 54, 206) 40%, 
        rgba(20, 169, 238, 0.85) 80%,
        rgba(255, 255, 255, 0.3) 100%
    );
    
    /* Organiza o H1 e o P um embaixo do outro e centraliza na vertical */
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start;
    
    padding-left: 80px;
    padding-right: 40px; /* Evita que o texto encoste na borda direita */
    text-align: left;
}

/* TEXTO PRINCIPAL (H1) */
/* AQUI */

.img-overlay h1 {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 800; 
    font-size: 3rem; /* Tamanho ideal para Desktop */
    max-width: 700px;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: -1px; }

/* SUBTÍTULO / TEXTO DESCRITIVO (P) ATUALIZADO */
.img-overlay p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    max-width: 650px;
    line-height: 1.6;
    margin: 0;

    /* CORREÇÃO DO GRADIENTE: Metade Branco, Metade Ciano */
    background: linear-gradient(to right, #ffffff 50%, #2ECEFF 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; 
}

/* ==========================================================
   AJUSTES PARA MOBILE (Celulares até 768px)
   ========================================================== */

    /* Ajuste do H1 no Mobile */
    .img-overlay h1 {
        font-size: 1.8rem; 
        margin-bottom: 15px;
        background: linear-gradient(to bottom, #ffffff 60%, #2ECEFF 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .img-overlay p {
        font-size: 0.95rem;
        line-height: 1.5;
    }



/* =========================
   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;
    }



    /* 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 */
}

/* BANNER SOBRE */

    .about-banner {
        height: auto;
    }

    .banner-overlay {
        flex-direction: column;
    }

    .banner-images {
        display: none;
    }

    .banner-text-box {
        width: 100%;
        text-align: center;
        padding: 40px 20px;
    }

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

    .banner-text-box p {
        font-size: 0.95rem;
    }

    /* MVV */
    .sobre-mvv {
        padding: 70px 20px;
    }

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

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

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

    .superior-tag {
        display: none;
    }

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

   /* =========================================
   IMAGEM MAIS PROFISSIONAL
========================================= */

.mvv-imagem{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* brilho no fundo */
.mvv-imagem::before{
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(46,206,255,0.25) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
}

/* imagem */
.mvv-imagem img{
    position: relative;
    max-width: 420px; /* aumentei */
    width: 100%;
    border-radius: 22px;

    /* profundidade */
    box-shadow:
        0 10px 30px rgba(0,0,0,0.45),
        0 0 25px rgba(46,206,255,0.25);

    border: 1px solid rgba(46,206,255,0.2);

    transition: all 0.5s ease;

    z-index: 2;
}

/* efeito hover moderno */
.mvv-imagem img:hover{
    transform: translateY(-8px) scale(1.02);

    box-shadow:
        0 20px 45px rgba(0,0,0,0.55),
        0 0 40px rgba(46,206,255,0.45);
}

/* reflexo premium */
.mvv-imagem::after{
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 120px;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.12),
        transparent
    );

    border-radius: 20px;
    z-index: 3;
    pointer-events: none;
}

    /* FOOTER */
    .footer-starce {
        padding: 50px 20px 30px;
    }

    .footer-logos {
        gap: 20px;
    }

    .footer-logos img {
        max-height: 35px;
    }

    .logo-starce {
        height: 70px;
    }

    /* CONTATO */
    .social-contact {
        flex-wrap: wrap;
    }

    .social-contact a {
        width: 50px;
        height: 50px;
    }

    .social-contact img {
        width: 24px;
        height: 24px;
    }

/* 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;
    }
}

/* Container pai com fundo escuro (simulando o fundo do seu site) */
.camera-focus-container {
    position: relative;
    width: 100%;
    max-width: 550px;
    height: 550px;
    margin: 40px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #01162e; /* Cor idêntica ao fundo */
}

/* ==========================================================================
   MOLDURA EXTERNA (CANTOS DE FOCO DE CÂMERA)
   ========================================================================== */
.corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    display: block;
}
.top-left { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 24px; }
.top-right { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 24px; }
.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 24px; }
.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 24px; }

/* Linhas finas horizontais que ligam os cantos na imagem original */
.camera-focus-container::before {
    content: '';
    position: absolute;
    top: 0; left: 40px; right: 40px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 100%);
}


/* ==========================================================================
   BADGE FLUTUANTE DE VÍDEO (VERDE)
   ========================================================================== */
.floating-play-badge {
    position: absolute;
    top: 40px;
    right: -25px;
    width: 50px;
    height: 50px;
    background-color: #00cc66;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    box-shadow: 0 6px 15px rgba(0, 204, 102, 0.4);
    z-index: 10;
}
.floating-play-badge svg { width: 22px; height: 22px; }

/* ==========================================================================
   INTERFACE DO SMARTPHONE FLUTUANTE
   ========================================================================== */
.app-floating-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
    overflow: visible; /* Necessário para a linha verde escapar do card */
    z-index: 5;
}

/* Parte Escura (Topo do App) */
.app-header {
    background-color: #1a1f2c;
    color: #ffffff;
    padding: 15px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    font-size: 11px;
}
.app-meta { display: flex; justify-content: space-between; opacity: 0.7; margin-bottom: 12px; }
.driver-info { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.driver-avatar {
    width: 28px;
    height: 28px;
    background-color: #3b82f6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 10px;
}
.driver-info h3 { font-size: 11px; margin-bottom: 2px; font-weight: 600; }
.driver-info span { opacity: 0.6; font-size: 9px; display: block; }
.app-date { text-align: center; opacity: 0.8; font-size: 10px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.1); }


/* 2. ESTILIZAÇÃO CSS (Adicione ao seu arquivo de estilos) */
.tabs-nav {
    display: inline-flex;
    background-color: #ffffff;
    padding: 6px;
    border-radius: 30px;
    gap: 5px;
}

.tab-btn {
    background: none;
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background-color: #ffffff;
    color: #0056ff;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 86, 255, 0.1);
}

.tab-content {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Mostra a aba ativa em duas colunas usando CSS Grid */
.tab-content.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    opacity: 1;
    transform: translateY(0);
}

/* Os cantos verdes estilo foco de câmera da imagem da direita */
.content-right {
    position: relative;
    padding: 30px;
}

.frame-corners::before, .frame-corners::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid #3eceff; /* Cor verde idêntica ao vídeo */
}
.frame-corners::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.frame-corners::after { top: 0; right: 0; border-left: none; border-bottom: none; }

/* =========================================
   TABS TELEMETRIA (NAVEGAÇÃO)
========================================= */

.tabs-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 70px;
}

.tab-btn {
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    background: #edf4ff;
    color: #0036ce;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: .4s ease;
}

.tab-btn:hover {
    background: #d9e8ff;
}

.tab-btn.active {
    background: #0036ce;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,54,206,.18);
}

/* CONTAINER GERAL DAS ABAS */

.tabs-content-container {
    width: 100%;
    max-width: 1300px;
    margin: auto;
}

/* CONTEÚDO DAS ABAS */

.tab-content {
    display: none; /* Esconde as abas inativas */
}

.tab-content.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
    animation: fadeTab .5s ease;
}

/* ANIMAÇÃO DE TRANSIÇÃO */

@keyframes fadeTab {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TEXTO ESQUERDA */

.content-left h3 {
    font-size: 2.3rem;
    line-height: 1.2;
    color: #08132b;
    margin-bottom: 22px;
    font-weight: 700;
}

.content-left p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #5b6475;
    max-width: 560px;
}

.category-tag {
    display: block;
    margin-bottom: 10px;
}

/* LADO DIREITO (CONTAINER DA IMAGEM) */

.content-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;            /* AJUSTADO: Menos padding para dar mais espaço à imagem */
    background: transparent;
    width: 100%;
}

/* MOLDURA AZUL CORNER */

.frame-corners {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    pointer-events: none;
}

.frame-corners::before,
.frame-corners::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid #2ECEFF;
}

.frame-corners::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 24px;
}

.frame-corners::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 24px;
}

/* CARD DA IMAGEM */

.mockup-card {
    width: 100%;
    max-width: 650px; 
    background: transparent;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: none;
    transition: .4s ease;
}

.mockup-card:hover {
    transform: translateY(-8px);
}

/* IMAGEM AJUSTADA (CORREÇÃO DO TAMANHO) */

.mockup-image {
    width: 100%;
    height: auto;  
    max-height: 500px; 
    object-fit: contain;     
    display: block;
    background: transparent;
    padding: 0;              
}

/* =========================================
   RESPONSIVIDADE (MOBILE & TABLET)
========================================= */

@media(max-width: 992px) {
    .tab-content.active {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .content-left {
        text-align: center;
    }

    .content-left p {
        margin: auto;
    }
    
    .content-right {
        padding: 20px;
    }
}

@media(max-width: 768px) {
    .tabs-nav {
        gap: 10px;
    }

    .tab-btn {
        width: 100%;
        font-size: 14px;
    }

    .content-left h3 {
        font-size: 1.8rem;
    }

    .mockup-image {
        height: auto;  
    }
}

@media(max-width: 480px) {
    .header-section h2 {
        font-size: 1.6rem;
    }

    .content-left h3 {
        font-size: 1.5rem;
    }

    .content-left p {
        font-size: .95rem;
    }

    .mockup-image {
        height: auto;
        padding: 0;
    }
}

/* =========================================
   VÍDEO ALINHADO À ESQUERDA NO RODAPÉ
========================================= */

.video-footer-left {
    width: 100%;
    max-width: 360px;        /* Tamanho ideal para um player de canto */
    margin-right: auto;      /* Empurra tudo o que estiver ao lado para a direita */
    margin-left: 40px;       /* Afasta o vídeo da borda extrema esquerda da tela */
    margin-bottom: 30px;     /* Espaçamento em relação aos elementos de baixo */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
    display: block;
}

/* Deixa o iframe do YouTube responsivo dentro dos 360px */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* =========================================
   RESPONSIVIDADE (MOBILE)
========================================= */
@media (max-width: 768px) {
    .video-footer-left {
        max-width: 100%;     /* Em celulares, ele vira largura total */
        margin-left: 0;      /* Remove o recuo lateral */
        padding: 0 20px;     /* Adiciona uma folga nas bordas do celular */
        box-shadow: none;    /* Remove a sombra para ficar mais limpo no celular */
    }
}

/* =========================================
   FOOTER PROFISSIONAL - STAFF TELEMETRIA
========================================= */

.footer-modern{
    background: #ffffff;
    padding: 90px 0 30px;
    border-top: 1px solid rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}

.footer-modern::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #2eceff;
}

/* CONTAINER */

.footer-modern .container{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
}

/* =========================================
   TOPO
========================================= */

.footer-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 70px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}

/* =========================================
   BRAND
========================================= */

.footer-brand{
    flex: 1;
    min-width: 280px;
}

.footer-logo{
    width: 210px;
    margin-bottom: 25px;
}

.footer-brand p{
    color: #555;
    font-size: 15px;
    line-height: 1.8;
    max-width: 420px;
    margin-bottom: 30px;
}

/* =========================================
   REDES SOCIAIS
========================================= */

.footer-social{
    display: flex;
    gap: 15px;
}

.footer-social a{
    width: 48px;
    height: 48px;
    background: #f5f9fc;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s ease;
    border: 1px solid transparent;
}

.footer-social a:hover{
    background: #2eceff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(46,206,255,0.25);
}

.footer-social img{
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: 0.4s ease;
}

.footer-social a:hover img{
    filter: brightness(0) invert(1);
}

/* =========================================
   LINKS
========================================= */

.footer-links{
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}

.footer-column h4{
    font-size: 18px;
    color: #111;
    margin-bottom: 25px;
    position: relative;
    font-weight: 700;
}

.footer-column h4::after{
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 35px;
    height: 3px;
    background: #2eceff;
    border-radius: 10px;
}

.footer-column ul{
    list-style: none;
}

.footer-column ul li{
    margin-bottom: 14px;
}

.footer-column ul li a{
    text-decoration: none;
    color: #666;
    font-size: 15px;
    transition: 0.3s ease;
}

.footer-column ul li a:hover{
    color: #2eceff;
    padding-left: 5px;
}

/* =========================================
   CENTRO
========================================= */

.footer-center{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    padding: 60px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    flex-wrap: wrap;
}

/* =========================================
   VIDEO
========================================= */

.footer-video{
    flex: 1;
    min-width: 320px;
}

.footer-video video{
    width: 100%;
    max-width: 600px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border: 3px solid #ffffff;
}

/* =========================================
   PARCEIROS
========================================= */

.footer-partners{
    flex: 1;
    min-width: 280px;
}

.footer-partners h4{
    font-size: 22px;
    color: #111;
    margin-bottom: 30px;
}

.footer-logos{
    display: flex;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap;
}

.footer-logos img{
    width: 120px;
    background: #ffffff;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: 0.4s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.footer-logos img:hover{
    transform: translateY(-6px);
    border-color: #2eceff;
    box-shadow: 0 15px 30px rgba(46,206,255,0.15);
}

/* =========================================
   CONTATO
========================================= */

.footer-contact{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    padding: 60px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.contact-item{
    background: #0658aa;
    padding: 30px;
    border-radius: 24px;
    transition: 0.4s ease;
    border: 1px solid transparent;
}

.contact-item:hover{
    transform: translateY(-6px);
    border-color: rgba(46,206,255,0.4);
    box-shadow: 0 15px 30px rgba(46,206,255,0.12);
}

.contact-item h5{
    font-size: 17px;
    color: #111;
    margin-bottom: 12px;
}

.contact-item p{
    color: #666;
    line-height: 1.7;
    font-size: 15px;
}

/* =========================================
   COPYRIGHT
========================================= */

.footer-bottom{
    padding-top: 30px;
    text-align: center;
}

.footer-bottom p{
    color: #777;
    font-size: 14px;
    letter-spacing: 1px;
}

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

@media(max-width: 991px){

    .footer-top{
        flex-direction: column;
    }

    .footer-links{
        width: 100%;
        justify-content: space-between;
    }

    .footer-center{
        flex-direction: column;
        align-items: flex-start;
    }

}

@media(max-width: 768px){

    .footer-modern{
        padding-top: 70px;
    }

    .footer-links{
        gap: 40px;
    }

    .footer-column{
        width: 45%;
    }

    .footer-video video{
        max-width: 100%;
    }

}

@media(max-width: 580px){

    .footer-column{
        width: 100%;
    }

    .footer-social{
        flex-wrap: wrap;
    }

    .footer-contact{
        grid-template-columns: 1fr;
    }

    .footer-logos{
        justify-content: center;
    }

    .footer-bottom p{
        line-height: 1.7;
    }

}

.footer-video iframe{
    width: 100%;
    height: 340px;
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(14, 11, 189, 0.12);
}

/* =========================================
   EMPRESAS DO GRUPO — CLEAN & PREMIUM
========================================= */

.empresas-grupo{
    width: 100%;

    padding: 90px 20px;

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

    background: transparent;
}

/* =========================================
   TOPO CENTRAL
========================================= */

.titulo-grupo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    margin-bottom: 55px;
}

/* TÍTULO */

.titulo-grupo h1{
    position: relative;

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

    color: #0f172a;

    letter-spacing: -1.5px;

    line-height: 1.1;

    margin-bottom: 28px;
}

/* LINHA */

.titulo-grupo h1::after{
    content: "";

    position: absolute;

    left: 50%;
    bottom: -14px;

    transform: translateX(-50%);

    width: 55px;
    height: 3px;

    border-radius: 50px;

    background: #2eceff;
}

/* =========================================
   LOGO STARCE
========================================= */

.logo-grupo{
    width: 220px;

    height: auto;

    object-fit: contain;

    transition: .4s ease;
}

.logo-grupo:hover{
    transform: translateY(-4px);
}

/* =========================================
   LOGOS ABAIXO
========================================= */

.empresas-logos{
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 90px;

    flex-wrap: wrap;
}

/* LOGOS */

.empresas-logos img{
    width: 100px;
    height: 40px;

    object-fit: contain;

    opacity: .38;

    filter: grayscale(100%);

    transition: all .4s ease;
}

/* HOVER */

.empresas-logos img:hover{
    opacity: 1;

    filter: grayscale(0%);

    transform: translateY(-5px);
}

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

@media(max-width:768px){

    .empresas-grupo{
        padding: 70px 20px;
    }

    .titulo-grupo h1{
        font-size: 1.9rem;
    }

    .logo-grupo{
        width: 170px;
    }

    .empresas-logos{
        gap: 40px;
    }

    .empresas-logos img{
        width: 80px;
        height: 34px;
    }

}

/* ==========================================================
   SEÇÃO MINIMALISTA (IMAGENS MAIORES)
   ========================================================== */

.services-minimal {
    /* Fundo azul escuro para dar contraste aos ícones brancos/ciano */
    background-color: #0036CE; 
    padding: 80px 20px;
    font-family: 'Montserrat', sans-serif;
}

.minimal-container {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: space-between;
    gap: 30px; /* Cria um espaçamento elegante entre os cards */
}

/* Cards transparentes e minimalistas */
.minimal-card {
    flex: 1;
    padding: 25px 20px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Efeito ao passar o mouse: apenas acende o fundo de forma sutil */
.minimal-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
}

/* ==========================================================
   AJUSTE: IMAGENS MAIORES E ALINHADAS
   ========================================================== */
.minimal-icon {
    height: 160px; /* MODIFICADO: Aumentado de 100px para 160px para dar destaque */
    margin-bottom: 30px; /* Aumentado ligeiramente para afastar do título */
    display: flex;
    align-items: center;
    justify-content: center;
}

.minimal-icon img {
    max-height: 100%; /* Força a imagem a ocupar os novos 160px de altura */
    width: auto;
    object-fit: contain;

    /* Remove o fundo preto da foto da câmera e a deixa branca,
       além de clarear as outras imagens para não sumirem no azul */
    filter: brightness(0) invert(1);
    mix-blend-mode: screen; 
}

/* Títulos em branco puro */
.minimal-card h3 {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    letter-spacing: -0.3px;
}

/* Textos descritivos em branco suave (não cansa os olhos) */
.minimal-card p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* ==========================================================
   RESPONSIVIDADE (MOBILE)
   ========================================================== */
@media (max-width: 768px) {
    .minimal-container {
        flex-direction: column; /* Empilha os cards no celular */
        gap: 40px;
    }
    
    .services-minimal {
        padding: 50px 15px;
    }
    
    .minimal-card {
        padding: 10px;
    }
    
    /* Reduz um pouco o tamanho dos ícones no celular para não bloquear a tela toda */
    .minimal-icon {
        height: 130px; 
        margin-bottom: 20px;
    }
    
    .minimal-card:hover {
        transform: none;
        background-color: transparent;
    }
}

/* =========================================
   MAPA FULL WIDTH
========================================= */

.map-section{

    width: 100%;

    padding: 0;

    background: #ffffff;
}

/* MAPA */

.map-wrapper{

    position: relative;

    width: 100%;

    height: 450px;

    overflow: hidden;
}

/* IFRAME */

.map-wrapper iframe{

    width: 100%;

    height: 100%;

    border: 0;

    filter:
    grayscale(100%)
    brightness(1.08)
    contrast(0.92);
}

/* =========================================
   LOGO FIXA NA LOCALIZAÇÃO
========================================= */

.map-pin{

    position: absolute;

    /* AJUSTE A LOCALIZAÇÃO DA LOGO */
    top: 48%;
    left: 51%;

    transform: translate(-50%, -50%);

    z-index: 10;

    width: 90px;
    height: 90px;

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

    pointer-events: none;
}

/* LOGO */

.map-pin img{

    width: 100%;

    object-fit: contain;

    filter:
    drop-shadow(0 8px 20px rgba(0,0,0,0.35));
}

/* RESPONSIVO */

@media(max-width:768px){

    .map-wrapper{

        height: 320px;
    }

    .map-pin{

        width: 65px;
        height: 65px;
    }

}

/* =========================================
   FOOTER MODERNO
========================================= */

.footer-modern{

    width: 100%;

    background:
    linear-gradient(
        135deg,
        #0036CE,
        #2b2e5e
    );

    padding: 80px 8% 50px;

    color: #fff;
}

/* GRID */

.footer-grid{

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 80px;

    flex-wrap: wrap;
}

/* =========================================
   REDES SOCIAIS
========================================= */

.footer-social{

    display: flex;

    align-items: center;

    gap: 18px;
}

.footer-social a{

    width: 58px;
    height: 58px;

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

    border-radius: 18px;

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

    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(10px);

    transition: 0.4s ease;

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

.footer-social a:hover{

    transform:
    translateY(-8px)
    scale(1.05);

    background:
    linear-gradient(
        135deg,
        #2eceff,
        #eef0f3
    );

    box-shadow:
    0 18px 35px rgba(46,206,255,0.35);
}

.footer-social img{

    width: 26px;

    object-fit: contain;

    transition: 0.4s ease;
}

/* =========================================
   LINKS
========================================= */

.footer-links{

    display: flex;

    gap: 90px;

    flex-wrap: wrap;
}

/* COLUNAS */

.footer-column{

    min-width: 180px;
}

/* TITULOS */

.footer-column h4{

    position: relative;

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 28px;

    color: #fff;
}

/* LINHA ABAIXO */

.footer-column h4::after{

    content: "";

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 45px;
    height: 4px;

    border-radius: 50px;

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

/* LISTAS */

.footer-column ul{

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 18px;
}

/* LINKS */

.footer-column ul li,
.footer-column ul li a{

    color: rgba(255,255,255,0.78);

    text-decoration: none;

    font-size: 16px;

    font-weight: 400;

    transition: 0.35s ease;

    cursor: pointer;
}

/* HOVER */

.footer-column ul li:hover,
.footer-column ul li a:hover{

    color: #2eceff;

    transform: translateX(8px);
}

/* =========================================
   WHATSAPP FLOAT
========================================= */

.whatsapp-btn{

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 68px;
    height: 68px;

    border-radius: 50%;

    background: #25D366;

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

    box-shadow:
    0 12px 30px rgba(37,211,102,0.35);

    z-index: 999;

    transition: 0.4s ease;
}

.whatsapp-btn:hover{

    transform:
    scale(1.08)
    translateY(-5px);
}

.whatsapp-btn img{

    width: 34px;
}

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

@media(max-width: 992px){

    .footer-grid{

        flex-direction: column;

        gap: 50px;
    }

    .footer-links{

        gap: 50px;
    }
}

@media(max-width: 768px){

    .footer-modern{

        padding: 60px 6% 40px;
    }

    .footer-column h4{

        font-size: 20px;
    }

    .footer-column ul li,
    .footer-column ul li a{

        font-size: 15px;
    }

    .footer-social a{

        width: 52px;
        height: 52px;
    }

    .whatsapp-btn{

        width: 60px;
        height: 60px;
    }

    .whatsapp-btn img{

        width: 30px;
    }
}