/* ==========================================================================
   ESTILO FINAL CONSOLIDADO 2025 - SHARMAQ
   Design: Vibrant Professional | Fonte: Montserrat
   (Limpo e Otimizado - Versão Estável)
   ========================================================================== */

/* --- 1. IMPORTAÇÃO E RESET GLOBAL --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

body, html, h1, h2, h3, h4, h5, h6, p, a, span, li, button, .btn, div, input {
    font-family: 'Montserrat', sans-serif !important;
}

/* Fundo Geral: Cinza suave para destacar cards */
body {
    background-color: #F4F6F9 !important; 
    color: #464646;
    overflow-x: hidden;
}

/* =========================================
   2. MENU SUPERIOR (EFEITO TRANSPARENTE -> BRANCO)
   ========================================= */

/* --- ESTADO 1: TRANSPARENTE (Topo da página) --- */
.menu-blue {
    background-color: transparent !important; /* Transparente */
    border-bottom: 1px solid rgba(255,255,255,0.1) !important; /* Linha sutil */
    box-shadow: none !important;
    height: 90px;
    transition: all 0.4s ease; /* Transição suave */
}

.menu-blue .navbar-brand {
    padding: 10px 15px !important;
    height: 90px;
    display: flex;
    align-items: center;
}

.menu-blue .logo-img {
    height: 55px !important;
    width: auto !important;
    margin-bottom: 1rem!important;
    max-width: none !important;
    padding: 0 !important;
    display: block;
    transition: all 0.3s ease;
}

/* Links (Brancos no topo) */
.menu-blue .navbar-nav > li > a {
    color: #000000 !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 60px;
    transition: color 0.3s ease;
    opacity: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Sombra para ler melhor sobre imagens */
}

.menu-blue .navbar-nav > li > a:hover {
    color: #C18E5E !important;
}

/* Botão Comprar (Borda Branca no topo) */
.btn-menu-destaque {
    background: linear-gradient(to right,  #CC9966 20%, #AA7744 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    border-radius: 6px;
    padding: 10px 30px !important;
    margin-top: 23px;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 20px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

/* Força a cor BRANCA apenas neste botão, ignorando a cor geral do menu */
.menu-blue .navbar-nav > li > a.btn-menu-destaque {
    color: #FFFFFF !important;
    opacity: 1 !important; /* Garante que não fique transparente */
}

.btn-menu-destaque:hover {
    background-color: #FFFFFF !important;
    color: #354D76 !important;
}


/* --- ESTADO 2: ROLANDO (Fundo Branco Sólido) --- */
/* Esta classe "menu-scrolled" é adicionada pelo Javascript abaixo */
.menu-blue.menu-scrolled {
    background-color: #FFFFFF !important; /* Vira BRANCO Puro */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; /* Sombra aparece */
    height: 80px !important; /* Fica um pouquinho mais compacto */
    border-bottom: none !important;
}

/* Ajustes visuais quando rola */
.menu-blue.menu-scrolled .logo-img { height: 55px !important; }
.menu-blue.menu-scrolled .navbar-nav > li > a { line-height: 50px; }

/* Correção do Menu Hambúrguer (Mobile) */
    @media (max-width: 767px) {
        /* O container que abre ao clicar */
        .navbar-collapse.collapse.in, 
        .navbar-collapse.collapsing {
            background-color: #ffffff !important; /* Fundo Branco */
            position: absolute; /* Faz flutuar sobre o conteúdo */
            width: 100%;
            z-index: 9999;
            box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* Sombra para destacar do fundo */
            border-top: 1px solid #eee;
        }

        /* Ajuste na cor dos links para garantir leitura no fundo branco */
        .navbar-nav > li > a {
            color: #354D76 !important; /* Azul da sua marca */
            padding: 15px 20px;
            border-bottom: 1px solid #f5f5f5;
        }

        /* Efeito ao tocar no link no celular */
        .navbar-nav > li > a:hover,
        .navbar-nav > li > a:focus {
            background-color: #f9f9f9 !important;
            color: #C18E5E !important; /* Dourado da marca */
        }

        .btn-menu-destaque {
            margin: 15px 20px;
            width: calc(100% - 40px); /* Botão ocupa toda a largura menos as margens */
        }

    }


/* =========================================
   3. HERO SECTION (FUNDO BRANCO)
   ========================================= */
.hero-split {
    padding: 100px 0 80px;
    background: linear-gradient(105deg, #F5F9FC 48%, #E8EFF7 48.1%) !important;
    position: relative;
    border-bottom: 4px solid #C18E5E;
}

.hero-text-box h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 48px;
    color: #000000;
    line-height: 1.3;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}

.hero-text-box p {
    font-size: 18px;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.8;
}

.hero-btn {
    background: linear-gradient(to right,  #CC9966 20%, #AA7744 100%) !important;
    color: #FFF; 
    padding: 15px 40px; 
    border-radius: 25px; 
    font-weight: 700; 
    text-transform: uppercase;
}

.hero-image-box img {
    max-width: 100%;
    filter: drop-shadow(0 20px 40px rgba(53, 77, 118, 0.2));
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.5s ease;
}
.hero-image-box img:hover { transform: perspective(1000px) rotateY(0deg); }


/* =========================================
   4. BARRA DE AUTORIDADE (AZUL)
   ========================================= */
.authority-strip {
    background-color: #354D76 !important;
    padding: 40px 0;
    margin-top: 0 !important;
}

.stat-item {
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.stat-item:last-child { border-right: none; }

.stat-number {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #FFFFFF;
}

.stat-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #C18E5E;
    font-weight: 700;
    margin-top: 5px;
}


/* =========================================
   5. PAINEL DE PROPAGANDAS (CORRIGIDO)
   ========================================= */
.section-promo {
    padding: 50px 0 20px;
    background-color: #F4F6F9;
}

/* Pai relativo para segurar as setas */
#promoCarousel {
    position: relative !important;
    overflow: hidden;
    margin-bottom: 0px !important;
}

.promo-box {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(53, 77, 118, 0.15);
    border: 1px solid rgba(193, 142, 94, 0.2);
    background: #FFF;
    position: relative;
    /* Altura automática: A imagem manda no tamanho */
    height: auto !important;
    min-height: 0 !important;
}

.promo-box .carousel-inner > .item {
    height: auto !important;
    min-height: 0 !important;
    background-color: #354D76;
}

/* Imagem inteira (Sem cortes) */
.promo-box .carousel-inner > .item > a > img,
.promo-box .carousel-inner > .item > img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* --- SETAS DO CARROSSEL (BOLINHAS) --- */
.seta-promo {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Centro Vertical Exato */
    z-index: 100 !important;
    margin: 0 !important;
    
    /* Design */
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 45px !important;
    height: 45px !important;
    background-color: #354D76 !important;
    border-radius: 50% !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    
    text-decoration: none !important;
    opacity: 0.9;
    cursor: pointer;
}

/* Posicionamento Lateral */
.seta-promo.seta-esquerda { left: 20px !important; right: auto !important; }
.seta-promo.seta-direita { right: 20px !important; left: auto !important; }

/* Ícone */
.seta-promo i {
    color: #FFFFFF !important;
    font-size: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hover */
.seta-promo:hover {
    background-color: #C18E5E !important;
    transform: translateY(-50%) scale(1.1) !important;
}


/* =========================================
   6. GRID DE SOLUÇÕES (CARDS)
   ========================================= */
.solutions-grid-section {
    padding: 80px 0;
    background-color: #F4F6F9;
}

.grid-card {
    background: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 35px;
    height: 100%;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.grid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(53, 77, 118, 0.15);
    border-bottom: 3px solid #C18E5E;
}

/* Card Destaque (SHOficina) */
.grid-card.featured {
    background: linear-gradient(135deg, #354D76 0%, #2A3E60 100%);
    color: #FFF;
    border: none;
}
.grid-card.featured h3 { color: #FFF; }
.grid-card.featured p { color: rgba(255,255,255,0.9); }
.grid-card.featured i { color: #C18E5E; }

.grid-card h3 {
    font-weight: 700;
    font-size: 22px;
    color: #354D76;
    margin-bottom: 15px;
    margin-top: 0;
}

.grid-icon { font-size: 32px; color: #354D76; margin-bottom: 20px; display: block; }

.btn-link-arrow {
    font-weight: 700;
    color: #C18E5E;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 20px;
    display: inline-block;
    transition: 0.3s;
}
.btn-link-arrow:hover { color: #354D76; padding-left: 5px; text-decoration: none; }


/* =========================================
   7. SEÇÃO APRENDA FÁCIL (BRANCO)
   ========================================= */
.learn-section-bg {
    background-color: #FFFFFF;
    padding: 80px 0;
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
}


/* =========================================
   8. CTA CARD FLUTUANTE
   ========================================= */
.section-cta-wrapper {
    padding: 60px 0 100px;
    background-color: #F4F6F9;
}

.cta-card {
    background: linear-gradient(135deg, #354D76 0%, #223452 100%);
    border-radius: 24px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(53, 77, 118, 0.25);
    color: #FFF;
    max-width: 1000px;
    margin: 0 auto;
}

.cta-card::before {
    content: ''; position: absolute; top: -50%; left: -10%; width: 300px; height: 300px;
    background: rgba(255,255,255,0.03); border-radius: 50%; pointer-events: none;
}
.cta-card::after {
    content: ''; position: absolute; bottom: -50%; right: -10%; width: 400px; height: 400px;
    background: rgba(193, 142, 94, 0.1); border-radius: 50%; pointer-events: none;
}

.cta-card h2 {
    font-weight: 800;
    font-size: 42px;
    color: #FFF;
    margin-bottom: 15px;
    position: relative; z-index: 2;
}

.cta-card p {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 40px;
    position: relative; z-index: 2;
}

.btn-cta-gold {
    background-color: #C18E5E;
    color: #FFF !important;
    padding: 18px 50px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #C18E5E;
    text-decoration: none;
    display: inline-block;
    position: relative; z-index: 2;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.btn-cta-gold:hover {
    background-color: transparent;
    border-color: #FFF;
    color: #FFF !important;
    transform: translateY(-3px);
}

.cta-note {
    display: block; margin-top: 20px; font-size: 13px; opacity: 0.7; color: #FFF; position: relative; z-index: 2;
}


/* =========================================
   9. RODAPÉ (AZUL)
   ========================================= */
.footer-modern {
    background-color: #354D76;
    color: #FFFFFF;
    padding: 80px 0 30px;
    border-top: 4px solid #C18E5E;
}

.footer-logo {
    height: 70px !important;
    width: auto !important;
    max-width: none !important;
    margin-bottom: 25px;
    display: block;
}

.footer-modern h4 {
    font-weight: 700;
    color: #C18E5E;
    font-size: 20px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-brand-col p { color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 25px; max-width: 90%; }

.footer-links-col ul { list-style: none; padding: 0; margin: 0; }
.footer-links-col ul li { margin-bottom: 12px; }
.footer-links-col ul li a { color: rgba(255,255,255,0.7); text-decoration: none; transition: 0.3s; font-size: 14px; }
.footer-links-col ul li a:hover { color: #C18E5E; padding-left: 5px; }

.badge-new { background-color: #C18E5E; color: #FFF; font-size: 9px; padding: 2px 5px; border-radius: 3px; vertical-align: middle; margin-left: 5px; text-transform: uppercase; }

.contact-list { list-style: none; padding: 0; }
.contact-list li { margin-bottom: 18px; display: flex; text-decoration: none !important; align-items: flex-start; color: rgba(255,255,255,0.7); line-height: 1.5; }
.contact-list li i { color: #C18E5E; margin-right: 15px; font-size: 18px; margin-top: 3px; width: 20px; text-align: center; }
.contact-list li a { color: rgba(255,255,255,0.7); text-decoration: none !important;}
.contact-list li a:hover { color: #C18E5E; border-bottom-color: #C18E5E; transition: 0.3s; padding-left: 5px;}
.contact-list li:hover { color: #C18E5E; border-bottom-color: #C18E5E; transition: 0.3s;}

.footer-bottom { margin-top: 60px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: rgba(255,255,255,0.4); }
.footer-bottom a { color: rgba(255,255,255,0.4); margin-left: 20px; text-decoration: none; }
.footer-bottom a:hover { color: #C18E5E; }


/* =========================================
   10. MOBILE / RESPONSIVIDADE
   ========================================= */
@media (max-width: 768px) {
    .menu-blue, .footer-modern { height: auto; text-align: center; }
    .hero-split { text-align: center; padding-top: 40px; }
    .hero-image-box { margin-top: 40px; }
    
    .cta-card { padding: 40px 20px; }
    .cta-card h2 { font-size: 28px; }
    
    .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; margin-bottom: 15px; }
    
    .logo-img, .footer-logo { height: 55px !important; }
}

/* =========================================
   CORREÇÃO FINAL: BANNER E SETAS (PERFEITO)
   ========================================= */

/* 1. Destrava a altura para a imagem mandar no tamanho */
.promo-box,
.promo-box .carousel,
.promo-box .carousel-inner,
.promo-box .carousel-inner > .item {
    height: auto !important;
    min-height: 0 !important;
}

/* 2. Imagem Inteira (Sem cortes) */
.promo-box .carousel-inner > .item > a > img,
.promo-box .carousel-inner > .item > img {
    width: 100% !important;
    height: auto !important; /* Altura proporcional */
    max-height: none !important;
    object-fit: contain !important; 
    display: block !important;
    margin: 0 auto !important;
}

/* 3. SETAS FLUTUANTES (Correção do posicionamento) */
#promoCarousel {
    position: relative !important; /* Pai é a referência */
    overflow: hidden; /* Garante limpeza */
}

.seta-promo {
    position: absolute !important; /* VOLTA A FLUTUAR */
    top: 50% !important;           /* Meio da altura */
    transform: translateY(-50%) !important; /* Centro exato */
    z-index: 100 !important;       /* Fica por cima da imagem */
    margin: 0 !important;          /* Remove margens estranhas */
    
    /* Estilo da Bolinha */
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 45px !important;
    height: 45px !important;
    background-color: #354D76 !important;
    border-radius: 50% !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    cursor: pointer;
    text-decoration: none !important;
}

/* Cola nas laterais */
.seta-promo.seta-esquerda { left: 20px !important; right: auto !important; }
.seta-promo.seta-direita { right: 20px !important; left: auto !important; }

/* Ícone */
.seta-promo i {
    color: #FFFFFF !important;
    font-size: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hover */
.seta-promo:hover {
    background-color: #C18E5E !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* =========================================
   PÁGINA INTERNA SIMPLES (SEM BANNER)
   ========================================= */

/* Cabeçalho Simples (Branco) */
.page-head-simple {
    background-color: #FFFFFF;
    padding: 50px 0 40px; /* Espaço maior em cima por causa do menu fixo */
    border-bottom: 1px solid #EAEAEA;
}

.page-title {
    color: #354D76;
    font-weight: 800;
    font-size: 36px;
    margin-bottom: 10px;
    margin-top: 0;
}

.page-subtitle {
    color: #666;
    font-size: 16px;
    max-width: 600px;
}

/* Seção de Funcionalidades */
.features-list-section {
    padding: 60px 0;
}

.display-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

/* Cards de Funcionalidade */
.feature-clean-card {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(0,0,0,0.03); /* Borda muito sutil */
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    height: calc(100% - 30px); /* Mesma altura na linha */
    transition: all 0.3s ease;
}

.feature-clean-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(53, 77, 118, 0.1);
    border-bottom: 3px solid #C18E5E; /* Detalhe da marca no hover */
}

/* Ícone do Card */
.feature-clean-card .icon-box {
    width: 60px;
    height: 60px;
    background-color: #F5F9FC; /* Fundo gelo */
    color: #354D76; /* Ícone Azul */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.feature-clean-card h3 {
    color: #354D76;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.feature-clean-card p {
    color: #777;
    font-size: 14px;
    line-height: 1.6;
}

/* Lista Detalhada (Checklist) */
.detailed-list {
    list-style: none;
    padding: 0;
}

.detailed-list li {
    padding: 10px 0;
    border-bottom: 1px solid #F0F0F0;
    color: #555;
    font-size: 15px;
}

.detailed-list li i {
    color: #C18E5E;
    margin-right: 15px;
    font-weight: bold;
}

/* =========================================
   ESTILO DO BOTÃO "TELAS" (btntela-r)
   ========================================= */

.btntela-r {
    background-color: transparent !important;
    color: #C18E5E !important; /* Cor Bege Dourado */
    border: 1px solid #C18E5E !important;
    border-radius: 50px !important; /* Bem redondo */
    padding: 8px 25px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto; /* Empurra para o fundo do card */
    transition: all 0.3s ease !important;
    outline: none !important;
    /* Centraliza se necessário */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Efeito ao passar o mouse */
.btntela-r:hover {
    background-color: #C18E5E !important;
    color: #FFFFFF !important;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(193, 142, 94, 0.3);
}

/* Ícone dentro do botão */
.btntela-r i {
    color: inherit !important; /* Segue a cor do texto */
}

/* Estilo "Bonitinho" para o Magnific Popup */

/* Fundo escuro um pouco mais transparente e moderno */
.mfp-bg {
    background: #0b0b0b;
    opacity: 0.85;
}

/* A imagem em si */
img.mfp-img {
    background: #fff;
    padding: 0 !important; /* Remove padding padrão feio */
    border: 5px solid #fff; /* Borda branca estilo polaroid/moldura */
    border-radius: 6px; /* Cantos arredondados */
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); /* Sombra para dar profundidade */
    max-height: 85vh !important; /* Respeita a altura da tela */
}

/* Centralização do contador de páginas (ex: 1 de 5) */
.mfp-counter {
    color: #CCC;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

/* Ajuste do botão de fechar para ficar mais visível */
.mfp-close {
    color: #fff !important;
    right: -30px; 
    top: -30px;
    opacity: 1;
}

/* Efeito de Zoom (Animação de entrada) */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}