:root {
  

/* ... transição modo escuro ... */
  --theme-transition: color 1.5s ease, background-color 1.5s ease, border-color 1s ease, background-image 1s ease;

  /* velocidade da animação */
  --transition-slow: 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  
  /* variaveis de cor */
  --navy:#0B1628; --navy2:#132040; --navy3:#1E3058; 
  --gold:#C8973A; --gold2:#E8B65A; --gold3:#F5D490;
  --cream:#F8F5EE; --cream2:#EDE8DD;
  --white:#FFFFFF; --gray:#8A8880; --gray2:#B8B5AF;
  --text:#1A1814; --text2:#4A4840; --yelow1:#ffef13;
  --yelow2:#ddcf10; --green:#009a54; --green2:#015f35;
  --green3:#08bb6a; --blue:#284d92; --blue2:#5371a8; 
  --blue3: #374b70;

  --r:4px; --r2:10px; --r3:16px;
}







*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;background:var(--cream);color:var(--text);overflow-x:hidden;font-size:16px;line-height:1.6}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height: 10px;}
::-webkit-scrollbar-track{background:var(--navy3)}
::-webkit-scrollbar-thumb{background:var(--yelow1);border-radius:4px}

/* ── NAV ── */
#logo{display: flex; /* Para centralizar a imagem dentro */align-items: center; justify-content: center; width: 170px;          /* Largura do quadrado */
  height: 45px;         /* Altura do quadrado (igual à largura) */
  background: var(--cream2); /* Cor de fundo (ex: o Amarelo #ffef13 do seu CSS) */
  
  /* 2. Estilização Opcional do Quadrado */
  border-radius: 16px;   /* Cantos levemente arredondados (opcional) */
  /*box-shadow: 4px 4px 8px rgba(2,2,4,0.4); /* Sombra suave (opcional) */
  border: none; 
  
  /* 3. Posicionamento na Nav (opcional, se estiver usando o CSS anterior) */
  margin-right: 15px;   /* Espaço entre o quadrado e o texto/links */
}
#logo img{max-height: 30px;}


#navbar{position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background-image: linear-gradient(to bottom, rgb(40, 77, 146, .9), rgb(83, 113, 168, 0.90));
    backdrop-filter: blur(16px);
    border-bottom: 6px solid rgba(40, 77, 146, .15);
    transition: all .3s}

/* ── NOVO: CONTAINER DE CONTROLES (Dark Mode + Hamburger) ── */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    order: 2; /* Garante que fique à direita no flex */
}

.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer}
.nav-mark{width:36px;height:36px;background:var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family: "Barlow", sans-serif;font-weight:900;font-size:16px;color:var(--navy);flex-shrink:0}
.nav-brand strong{display:block;font-size:14px;font-weight:500;color:#fff;letter-spacing:.3px}
.nav-brand span{display:block;font-size:10px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;font-family:'Open Sans', sans-serif}

.nav-links{
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;}

.nav-links a{
  text-decoration: none;
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 20px;
    transition: all .2s;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Open Sans', sans-serif;
}


.nav-links a:hover{
  color:#fff;background:rgba(255,255,255,.07)
}

/* ── SUB-MENU ── */
.nav-links .has-sub { position: relative; }

/* Hover apenas para Desktop */
@media (min-width: 961px) {
    .nav-links .has-sub:hover .sub-menu { display: flex; }
}

.sub-menu {
    display: none;
    position: absolute;
    top: calc(100%);
    left: 0;
    background: var(--blue3);
    border: 1px solid rgba(255, 239, 19, .15);
    border-radius: 10px;
    padding: 8px;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
    z-index: 100;
}

.sub-menu a {
    color: rgba(255, 255, 255, .7) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
}

.sub-menu a:hover {
    color: #fff !important;
    background: rgba(255, 239, 19, .1) !important;
}

/* ── RESPONSIVIDADE (MOBILE) ── */


/* ── BOTÃO CTA & DARK MODE ── */
#navbar .nav-actions a.nav-cta:hover,
a.nav-cta:hover {
    background-color: var(--yelow1) !important;
    color: var(--blue) !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Variação Verde (Menor e com espaçamento)
   ========================================================================== */
.nav-cta.verde {
    background: var(--green) !important;
    color: var(--cream2) !important;

    /* ESPAÇAMENTO: Cria a distância entre o botão amarelo e o verde */
    margin-left: 15px; 

    /* TAMANHO MENOR: Reduz ligeiramente a fonte e o padding em relação ao amarelo */
    font-size: clamp(12px, 1.1vw, 15px) !important;
    padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 24px) !important;
}

/* Hover do botão verde */
.nav-cta.verde:hover {
    background: var(--green3) !important;
    color: var(--cream) !important;
}


.botaoDeDownload {
    display: block !important;       /* Transforma o link em bloco para ele aceitar margens */
    width: max-content;             /* Faz a largura do botão abraçar apenas o texto dele */
    margin: 40px auto 0 !important; /* O 'auto' nas laterais faz a mágica de centralizar */
    text-align: center;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    
    /* 1. Blindagem da Div que envelopa o botão */
    .containerbotaoDeDownload {
        display: block !important; /* Desativamos o flex que o pai bugado estava travando */
        width: 100vw !important;   /* Força a div a ter EXATAMENTE a largura da tela do celular */
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;      /* Empurra o início da div para o meio exato da tela */
        transform: translateX(-50%) !important; /* Puxa de volta metade dela para centralizar perfeito */
        margin-top: 35px !important;
        text-align: center !important; /* Força tudo dentro dela a ir para o centro */
    }

    /* 2. Blindagem do Botão em si */
    .containerbotaoDeDownload .botaoDeDownload {
        display: inline-block !important; /* Faz ele se comportar como um bloco de texto */
        width: max-content !important;    /* Não deixa ele esticar 100% */
        margin: 0 auto !important;        /* Força o alinhamento central */
        position: relative !important;
        left: 0 !important;               /* Reseta qualquer empurrão de ID antigo */
        right: auto !important;
        float: none !important;           /* Mata qualquer float:left perdido */
    }
}

/* --- SEÇÃO 1: SLIDE --- */
.section-topo-slide {
    width: 100%;
    padding: 0 !important; /* Zere o padding para colar no topo */
    margin: 0 !important;
    height: 90vh;         /* Altura idêntica ao container */
    display: block;
}

.container_slide {
    position: relative;
    width: 100%; 
    height: 100%;          /* Faz o container ocupar os 400px da section */
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
    z-index: 10;
}

/* --- ELEMENTOS INTERNOS (VISIBILIDADE) --- */
.meuSlide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out; /* 0.8s é um tempo equilibrado */
    display: block !important;
}

.meuSlide.show {
    opacity: 1;
    z-index: 20; /* Slide ativo */
}

.imgSlide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Posicionamento da logo no canto inferior direito */
.logo-rodape-slide {
    position: absolute;
    top: 30px;          /* Distância da borda inferior */
    left: 130px;           /* Distância da borda direita */
    width: 150px;          /* Largura padrão para desktop */
    height: auto;          /* Mantém a proporção */
    z-index: 10;           /* Garante que fique acima da imagem de fundo */
    pointer-events: none;  /* Opcional: evita que o clique na logo atrapalhe a navegação do slide */
    /* background-color: white; */
    
    border-radius: 10px;
}

@media screen and (max-width: 768px) { 

/* Ajuste fino para telas menores (Celular) */
.logo-rodape-slide {
    /* 1. Limpa as posições do desktop */
    top: auto;        
    left: auto;       

    /* 2. Aplica as novas posições na parte inferior direita */
    bottom: 20px;      
    right: 20px;
    
    /* GERAÇÃO DO ESPAÇAMENTO DO BLUR */
    box-sizing: content-box; /* Força o padding a ir para fora, protegendo o tamanho da logo */
    width: 80px;             /* A logo vai continuar exatamente com 80px */
    height: auto;
    padding: 4px;           /* Aumente ou diminua este valor para controlar o tamanho da área do blur */

    background-color: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(1px);                  
    -webkit-backdrop-filter: blur(1px);          
    border-radius: 1px;     /* Mantém as bordas arredondadas no vidro do blur */
}

 }


/* --- BOTÕES E SETAS (FORÇANDO VISIBILIDADE) --- */
.botaoDaDivEsquerdo, 
.botaoDaDivDireito {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 45%;
    transform: translateY(-50%);
    z-index: 100 !important; /* Força ficar na frente de tudo */
    border: none;
    display: flex !important; /* Garante que não suma */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: rgba(55, 75, 112, 0.5);
    color: var(--gray2);
    font-size: 28px;
    transition: ease .8s;
}

.botaoDaDivEsquerdo:hover, 
.botaoDaDivDireito:hover { background-color: rgba(55, 75, 112, 0.8); color: var(--cream);}

.botaoDaDivEsquerdo { left: 0px; }
.botaoDaDivDireito { right: 0px; }

.btn-sobre-imagem {
    position: absolute;
    top: 30px;
    right: 40px;
    z-index: 100 !important;
    background-color: rgba(55, 75, 112, 0.4);
    color: var(--cream2);
    padding: 15px 25px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: block !important;
    text-shadow: 2px 2px 6px rgb(0, 0, 0);
    transition: ease .8s;
}

.btn-sobre-imagem:hover{
    background-color: rgba(55, 75, 112, 0.6);
    color: var(--cream);
    text-shadow: none;
}

/* ==========================================================================
   1. REGRAS GERAIS E BASE (Sua referência: Telas de 1024px até 1366px)
   ========================================================================== */

.box-texto {
    position: absolute;
    z-index: 101;
    width: 55vw; 
    max-width: 55vw;
    box-sizing: border-box;
}

.celular-somente {
    display: none !important;
}

.textoDaImagemTitulo {
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: var(--cream2);
    font-size: clamp(32px, 5.2vw, 68px); /* Reduzido levemente o teto para 1366px */
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgb(0, 0, 0, .8);
    display: block !important;
    text-align: left;
}

.textoDaImagemSub {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    padding: 0;
    margin: 0;
    font-size: clamp(16px, 2vw, 24px); 
    line-height: 1.4;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    margin-top: 12px;
    display: inline-block !important; 
    white-space: normal; 
}

/* ── 3. POSICIONAMENTO DINÂMICO POR ID ── */
/* Removidos os clamps repetidos dos IDs para evitar conflito com a regra geral proporcional */

#posicaoArquivoSeguro {
    top: 15%;  
    left: 8vw; /* Mudado para vw para manter a distância da lateral idêntica */    
}



#posicaoArquivoSeguroSub {
    color: var(--cream2);
}

#posicaoAcordoRapido {
    top: 25%;  
    right: 2vw;           /* Distância original da margem direita */
    left: auto !important; /* Garante que ignore o left dos outros slides */
    
    text-align: left;     /* Mantém o alinhamento à esquerda para o contêiner */
    width: 35vw !important; /* Caixa estreita para o conteúdo ficar ajustado */
}

/* Nova classe para controlar a imagem no lugar do H2 */
.imagem-titulo-acordo {
    display: block;        /* Garante comportamento de bloco para respeitar margens */
    width: 100%;           /* Ocupa toda a largura disponível de 25vw do contêiner */
    height: auto;          /* Mantém a proporção original da imagem sem distorcer */
    margin-bottom: 15px;   /* Cria o espaçamento ideal entre a imagem e o texto abaixo */
}


/* Força as cores azuis e sombras originais */
#posicaoAcordoRapido .textoDaImagemTitulo,
#posicaoAcordoRapidoSub {
    color: var(--blue) !important;
    text-shadow: 2px 2px 8px rgb(163, 163, 163) !important;
}

#posicaoSolucoes {
    top: 15%;  
    left: 8vw;    
}


#posicaoSolucoesSub {
    color: var(--cream2);
}


#posicaoEvento { top: 15%;  
    left: 8vw; 
}

#posicaoEventoSub { color: var(--cream2); }


#posicaoCredianalise {
    top: 15%;  
    left: 8vw;    
}

#posicaoCredianaliseSub {
    color: var(--cream2);
}

#posicaoEntidade {
    top: 15%;  
    left: 8vw;    
}

#posicaoposicaoEntidadeSub {
    color: var(--cream2);
}

#posicaoConciliador { 
    top: 15%;  
    left: 8vw;    
}

#posicaoConciliadorSub { 
    color: var(--cream2); 
}

#posicaoConvenio { 
    top: 15%;  
    left: 8vw;    
}

#posicaoConvenioSub { 
    color: var(--cream2); 
}

.menor { width: 4px;
         height: 4px;            
}

.link-logo {
  display: inline-flex;
  align-items: center; /* Alinha o texto e a imagem perfeitamente no meio vertical */
  gap: 6px;            /* Cria um espaçamento controlado entre a logo e o texto */
  text-decoration: none; /* Remove o sublinhado padrão de links, se quiser */
}

.link-logo img {
    background-color: white;
    padding: 2px;
    border-radius: 2px;
}

.logo-pequena {
  height: 2em;         /* Truque de mestre: a imagem terá exatamente a altura da linha do texto */
  width: auto;         /* Mantém a proporção da logo sem distorcer */
  flex-shrink: 0;      /* Garante que a imagem não vai esmagar se o espaço for curto */
}



/* ==========================================================================
   2. TELAS MAIORES (Monitores Full HD, PC, iMac - Acima de 1400px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Inverte as visibilidades */
    .desktop-somente {
        display: none !important;
    }
    .celular-somente {
        display: block !important;
    }

    .box-texto {
        width: 85vw !important; 
    }
    
    .textoDaImagemTitulo {
        font-size: clamp(18px, 6vw, 26px) !important; 
        line-height: 1.1 !important; 
        margin-bottom: 0 !important;
    }
    
    .textoDaImagemSub {
        margin-top: 4px !important; /* Espaço esmagado no mobile */
        padding-top: 0 !important;
        color: var(--cream2) !important;
    }


    /* Posicionamento dos blocos mobile */
    #posicaoArquivoSeguroCelular,
    #posicaoSolucoesCelular,
    #posicaoCredianaliseCelular,
    #posicaoEntidadeCelular,
    #posicaoConciliadorCelular,
    #posicaoConvenioCelular,
    #posicaoEventoCelular {
        top: 10% !important;  
        left: 5vw !important;    
        right: auto !important;
    }

    /* Acordo Rápido Mobile na Direita */
    #posicaoAcordoRapidoCelular {
        top: 20% !important;  
        right: 1vw !important;    
        left: auto !important;
        
        text-align: left !important; /* Texto alinhado à esquerda no celular também */
        width: 41vw !important;      /* Largura controlada para o mobile */
    }
    #posicaoAcordoRapidoCelular .textoDaImagemSubCelular {
        display: block !important;
    }
    #posicaoAcordoRapidoCelular .textoDaImagemTitulo,
    #posicaoAcordoRapidoSubCelular {
        color: var(--blue) !important;
        text-shadow: 2px 2px 8px rgb(163, 163, 163) !important;
    }

    #posicaoAcordoRapidoSubCelular {
        gap: 0px;
    }
}


/* --- SEÇÃO 2: CONTEÚDO HERO --- */
.hero-content-area {
    position: relative;
    width: 100%;
    padding: 60px 0;
    background-color: var(--blue3);
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* Reset essencial */
body { 
    overflow-x: hidden; 
    margin: 0; 
    padding: 0; 
}

/* modal de imagens */


/* Container do Modal (Fundo escuro) */
.sol-modal {
    display: none; /* Escondido por padrão */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* O "Card" do Modal */
.sol-modal-content {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: rgb(55, 75, 112, .2); /* Fundo azul escuro */
    width: 100%;
    max-width: 800px;
    min-height: 550px;
    padding: 40px;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: modalShow 0.4s ease;
}

/* Efeito de Imagem de Fundo (Herança do sol-card) */
.sol-modal-content::before {
    content: "";
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    background-size: cover;
    background-position: center;

    border-radius: 8px;
    z-index: 0;
    /* O ID da imagem será injetado via JS ou classe */
    /* ADICIONE ESTA LINHA AQUI: */
    background-image: var(--modal-bg);
}

/* Linha Amarela na Base (Herança do sol-card) */
.sol-modal-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--yelow1);
}

/* Conteúdo acima da imagem */
.sol-modal-inner {
    position: relative;
    z-index: 1;
}

.sol-modal-title {
    font-size: 18px;
    color: var(--yelow1);
    margin-bottom: 15px;
    font-weight: bold;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8), 4px 4px 6px rgba(0, 0, 0, 0.8), 6px 6px 8px rgba(0, 0, 0, 0.8);
}

.sol-modal-text {
    color: var(--cream2);
    line-height: 1.6;
    font-size: 16px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8), 4px 4px 6px rgba(0, 0, 0, 0.8), 6px 6px 8px rgba(0, 0, 0, 0.8) ;
}

/* Botão Fechar */
.sol-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s;
}

.sol-modal-close:hover { color: var(--yelow1); }

/* Animação de Entrada */
@keyframes modalShow {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}


/* card modal */

.sol-card-image {
    position: relative;
    min-height: 250px; /* Altura mínima para a foto aparecer bem */
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--blue3); /* Fundo padrão caso a imagem demore a carregar */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 3px solid var(--yelow1); /* Mantém a identidade da linha amarela */
    margin: 10px;
}

/* Moldura interna (semelhante ao seu featured) */
.sol-card-image::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    
    background-image: var(--card-bg); /* Usaremos variável aqui também */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Aqui a opacidade é maior porque o foco é a imagem */
    opacity: 0.8; 
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

/* Efeito de brilho/destaque ao passar o mouse */
.sol-card-image:hover::before {
    opacity: 1 !important;
}

.sol-card-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Transições de Tema */
#navbar, #logo, .hcard, .news-card, .sol-card, footer {
    transition: var(--theme-transition), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-links .has-sub{position:relative}

.nav-links .has-sub:hover .sub-menu{display:flex}

.sub-menu{display:none;position:absolute;top:calc(100%);left:0;background:var(--blue3);border:1px solid rgba(255, 239, 19,.15);border-radius:10px;padding:8px;flex-direction:column;gap:2px;min-width:220px;box-shadow:0 16px 40px rgba(0,0,0,.4);z-index:100;margin-top: 0;}
.sub-menu a{color:rgba(255,255,255,.7)!important;border-radius:6px!important;display:flex!important;align-items:center!important;gap:8px!important;font-size:13px!important}
.sub-menu a:hover{color:#fff!important;background:rgba(255, 239, 19,.1)!important}

.sub-menu .sub-icon{font-size:14px;width:22px;text-align:center}



#analiseDeCreditoMiniIcone {

  display: inline-block;
    width: 60px;
    height: 40px;
    background-image: url('../img/icones/pontuacao-de-credito.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Faz a imagem caber nos 20px sem cortar */
    vertical-align: middle;    /* Alinha o ícone com o texto ao lado */
}


#acordoMiniIcone {

  display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('img/icones/aperto-de-mao.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Faz a imagem caber nos 20px sem cortar */
    vertical-align: middle;    /* Alinha o ícone com o texto ao lado */
}

#certificadoMiniIcone {

  display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('img/icones/certificado.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Faz a imagem caber nos 20px sem cortar */
    vertical-align: middle;    /* Alinha o ícone com o texto ao lado */
}

#arquivoMiniIcone {

  display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('img/icones/seguro-de-dados.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Faz a imagem caber nos 20px sem cortar */
    vertical-align: middle;    /* Alinha o ícone com o texto ao lado */
}

#analiseDeCreditoMiniIconeSol{

  display: inline-block;
    width: 60px;
    height: 40px;
    background-image: url('img/icones/pontuacao-de-credito.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Faz a imagem caber nos 20px sem cortar */
    vertical-align: middle;    /* Alinha o ícone com o texto ao lado */

}
#acordoMiniIconeSol{

  display: inline-block;
    width: 60px;
    height: 40px;
    background-image: url('img/icones/aperto-de-mao.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Faz a imagem caber nos 20px sem cortar */
    vertical-align: middle;    /* Alinha o ícone com o texto ao lado */

}
#certificadoMiniIconeSol{

  display: inline-block;
    width: 60px;
    height: 40px;
    background-image: url('img/icones/certificado.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Faz a imagem caber nos 20px sem cortar */
    vertical-align: middle;    /* Alinha o ícone com o texto ao lado */

}
#arquivoMiniIconeSol{

  display: inline-block;
    width: 60px;
    height: 40px;
    background-image: url('img/icones/seguro-de-dados.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Faz a imagem caber nos 20px sem cortar */
    vertical-align: middle;    /* Alinha o ícone com o texto ao lado */

}

#credAnaliseMiniIconeSol {

  display: inline-block;
    width: 60px;
    height: 40px;
    background-image: url('img/icones/pontuacao-de-credito_2.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Faz a imagem caber nos 20px sem cortar */
    vertical-align: middle;    /* Alinha o ícone com o texto ao lado */

}
#conciliadorMiniIconeSol {

  display: inline-block;
    width: 60px;
    height: 40px;
    background-image: url('img/icones/configuracoes-da-web.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Faz a imagem caber nos 20px sem cortar */
    vertical-align: middle;    /* Alinha o ícone com o texto ao lado */

}

.nav-cta{background:#ddcf10!important;color:rgb(40, 76, 143)!important;font-weight:500!important;filter: drop-shadow(6px 6px 10px rgba(46, 46, 46,.6))!important;border-radius:20px!important;

  /* IMPEDE O TEXTO DE PULAR LINHA */
    white-space: nowrap; 
    
    /* FONTE ADAPTÁVEL: 
       Mínimo 12px, Ideal 1.1vw (largura da tela), Máximo 16px */
    font-size: clamp(12px, 1.1vw, 15px) !important;
    
    /* PADDING ADAPTÁVEL:
       Diminui o respiro interno conforme a tela diminui */
    padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 24px) !important;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

}


.nav-cta:hover{background:rgb(255, 239, 19)!important;color: rgb(60, 114, 214);}

/* ── CONFIGURAÇÃO UNIFICADA DO BOTÃO DA NAV ── */
.nav-spc {
    /* Flexbox e Empilhamento (Logo acima do texto) */
    display: inline-flex !important;
    margin-left: 20px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* DESTRAVADO: !important força a fonte a mudar mesmo com outras regras na nav */
    font-size: 14px !important; 
    
    /* Espaçamentos e Dimensões */
    gap: 0px !important;
    width: 90px;
    height: 45px ; 
    
    border-radius: 18px !important;
    
    /* DESTRAVADO: Mudado para background-color e adicionado !important */
    background-color: var(--cream2) !important; 
    
    /* Cores e Estética (SEM BORDA) */
    color: var(--blue3) !important;
    text-decoration: none; 
    border: none !important; 
}

/* ── CONTROLE DA LOGO ── */
#spcLogoNav {
    width: 60px !important;  
    height: auto !important; 
    display: block !important;
}


/* ── ADICIONE ESTA REGRA PARA CASAR COM O SEU TEXTO ── */
.nav-spc span, 
.nav-spc {
    /* Alvo: O texto dentro do botão */
    display: inline-block;
    
    /* MARGEM NEGATIVA: Força o texto a subir em direção à logo.
       Ajuste este número (ex: -2px, -4px, -6px) até achar a distância ideal */
    margin-top: 0px !important; 
    
    /* Garante que o espaçamento do texto não crie linhas fantasmas */
    line-height: 1 !important; 
}


@media (max-width: 768px) {
    .nav-spc {
        flex-direction: row !important; 
        font-size: 14px !important; 
        gap: 6px !important; 
        padding: 6px 14px !important; 
        border-radius: 15px !important;

        /* RESET TOTAL: Remove qualquer margem antiga de todos os lados */
        margin: 0px !important; 
         
    }

    /* FORÇA BRUTA NO OUTRO BOTÃO: Se o .nav-cta estiver colado nele na esquerda,
       nós forçamos o .nav-cta a criar uma margem na direita dele */
    .nav-cta {
        margin: 0px !important;
    }

    .nav-spc span,
    .nav-spc {
        margin-left: 0;
        margin-top: 6px !important; 
    }

    #spcLogoNav {
        width: 22px !important; 
    }
}




.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:none}
.hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.8);border-radius:2px;transition:all .3s}


/* ── PAGE SYSTEM ── */
.page{display:none;padding-top:68px;min-height:100vh}
.page.active{display:block}

/* ── HERO ── */
.hero{min-height:calc(100vh - 68px);background:rgb(55, 75, 112);display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}

/* 1. SEÇÃO DO SLIDE (TOPO) */
.section-topo-slide {
    width: 100%;
    /* Ajuste este padding para o Header não cobrir o slide */
    padding-top: 100px; 
    display: flex;
    justify-content: flex-end; /* Empurra o slide para a direita */
    overflow: hidden;
}


.hero-bg-image {

    position: absolute;
    bottom: 0;
    left: 5%;            /* Cola totalmente na esquerda da tela */
    width: 100%;         /* Ocupa 90% da largura da tela */
    height: 100%;       /* Ocupa a altura total da seção */
    
    /* Configurações da Imagem */
    background-image: url('../img/cards/certificado_digital/certificado_digital_8.webp'); /* Substitua pelo seu link */
    background-size: cover;
    background-position: center; /* Alinha a imagem dentro da div pela esquerda */
    background-repeat: no-repeat;
    
    /* Camada de profundidade */
    z-index: 0;
    opacity: 0.2;       /* Ajuste a opacidade conforme necessário */

    /* --- MÁGICA DO DEGRADÊ NAS LATERAIS E TOPO --- */
    /* Usamos máscaras gradientes para suavizar as bordas */
    
    /* Para navegadores Webkit (Chrome, Safari, Edge moderno) */
    -webkit-mask-image: 
        linear-gradient(to right, transparent, black 10%, black 90%, transparent), /* Suaviza Laterais */
        linear-gradient(to top, black 85%, transparent 100%); /* Suaviza Topo */
    -webkit-mask-composite: source-in; /* Combina as duas máscaras */

    /* Máscara padrão (Firefox e outros) */
    mask-image: 
        linear-gradient(to right, transparent, black 10%, black 90%, transparent), /* Suaviza Laterais */
        linear-gradient(to top, black 85%, transparent 100%); /* Suaviza Topo */
    mask-composite: intersect; /* Combina as duas máscaras */
}

/* Garante que o conteúdo fique visível por cima */
.hero-left, .hero-right, .hero-grid, .hero-orb {
    position: relative;
    z-index: 1;
}

.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(200,151,58,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(200,151,58,.03) 1px,transparent 1px);background-size:64px 64px;}
.hero-orb{position:absolute;top:-150px;right:-150px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(200,151,58,.07) 0%,transparent 70%);}
.hero-left{padding:72px 28px 72px 80px;display:flex;flex-direction:column;justify-content:center;z-index:2}
.tag{display:inline-flex;align-items:center;gap:10px;font-family:'Open Sans', sans-serif;font-size:12px;color:var(--yelow1);letter-spacing:2px;text-transform:uppercase;margin-bottom:24px}
.tag::before{content:'';width:16px;height:1px;background:var(--yelow1)}
.hero-h1{font-family:"Barlow", sans-serif;font-size:clamp(40px,4.5vw,64px);font-weight:900;color:#fff;line-height:1.05;letter-spacing:-1px;margin-bottom:24px}
.hero-h1 em{font-size:clamp(50px,5.5vw,74px);font-style:italic;color:var(--yelow2)}
.hero-p{font-size:17px;color:var(--cream2);line-height:1.75;max-width:460px;margin-bottom:40px;font-weight:300}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:56px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:var(--r);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;border:none;font-family:'Open Sans', sans-serif;transition:all .22s;letter-spacing:.3px}
.btn-gold{background:var(--yelow2);color:var(--blue)}
.btn-gold:hover{background:var(--yelow1);transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,151,58,.3)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:var(--yelow1);color:var(--yelow2)}
.wathsappIcon img{display: block;width: 60px; height: 60px; object-fit: contain; transition: transform 0.6s ease; filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.4));}
.wathsappIcon:hover img{transform: scale(1.2); /* Efeito de aumento ao passar o mouse */
filter: brightness(1.1) drop-shadow(2px 2px 5px rgba(0,0,0,0.4));}
/* .btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy2);transform:translateY(-2px)} */
.btn-outline-gold{padding: 10px 22px;background:transparent;color:var(--blue);border:1.5px solid var(--blue3)}
.btn-outline-gold:hover{background:var(--yelow1);border:1.5px solid var(--blue2);}
.hero-stats{display:flex;gap:40px;padding-top:36px;border-top:1px solid rgba(255,255,255,.07)}
.stat-n{font-family:"Barlow", sans-serif;font-size:36px;font-weight:700;color:var(--yelow2);line-height:1}
.stat-l{font-size:11px;color:var(--cream2);margin-top:4px;text-transform:uppercase;letter-spacing:.5px;font-family:'Open Sans', sans-serif}


.hero-right{z-index: 2;
    display: flex;
    align-items: center;
    
    /* 1. Faz a div ocupar todo o resto do espaço disponível à direita */
    flex: 1; 
    
    /* 2. Zera o padding da direita para encostar na borda da tela */
    padding-right: 0 !important; 
    
    /* 3. Se o hero estiver dentro de um container limitado, force o transbordo */
    width: 100%; 
    
    /* Garante que o slide não "vaze" para baixo, apenas para a direita */
    overflow: visible;
}


.hero-card-wrap{width:100%;max-width:400px;position:relative;}
.hcard-back{position:absolute;top:-12px;right:-12px;left:12px;bottom:12px;background:color-mix(in srgb, var(--navy), transparent 40%);border:1px solid color-mix(in srgb, var(--yelow1), transparent 85%);border-radius:12px;z-index:0}
.hcard{background:color-mix(in srgb, var(--navy3), transparent 20%);border:1px solid color-mix(in srgb, var(--yelow1), transparent 85%);border-radius:12px;padding:28px;position:relative;z-index:1;backdrop-filter:blur(18px)}
.hcard-tag{font-family:'Open Sans', sans-serif;font-size:10px;color:var(--yelow2);letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.hcard-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--yelow1);animation:pulse 2s infinite}
.hcard-title{font-family:"Barlow", sans-serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.25}
.hcard-desc{font-size:14px;color:var(--cream2);line-height:1.6;margin-bottom:22px}
.hcard-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--yelow2);font-weight:500;cursor:pointer;transition:gap .2s}
.hcard-link:hover{gap:14px; color: var(--yelow1);}
.hcard-div{height:1px;background:rgba(255,255,255,.06);margin:22px 0}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-card{
  
  background:color-mix(in srgb, var(--navy2), transparent 50%);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:12px;cursor:pointer;transition:all .2s;
}
.mini-card:hover{border-color:color-mix(in srgb, var(--yelow1), transparent 25%);background:color-mix(in srgb, var(--blue2), transparent 40%)}
.mini-icon{font-size:18px;margin-bottom:6px}
.mini-name{font-size:12px;font-weight:500;color:var(--cream2)}

/* ── MARQUEE ── */
.marquee-wrap{background:var(--green);overflow:hidden;padding:13px 0}
.marquee-track{display:flex;animation:marquee 28s linear infinite;white-space:nowrap}
.m-item{display:inline-flex;align-items:center;gap:14px;padding:0 28px;font-family:'Open Sans', sans-serif;font-size:11px;font-weight:500;color:var(--cream2);letter-spacing:1px;text-transform:uppercase}
.m-dot{width:4px;height:4px;border-radius:50%;background:var(--navy);opacity:.35}

/* ── SECTION BASICS ── */
.sec{padding:88px 80px}
.sec-label{font-family:'Open Sans', sans-serif;font-size:12px;color:var(--yelow2);letter-spacing:2.5px;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sec-label::before{content:'';width:22px;height:1px;background:var(--yelow2)}
.sec-h2{font-family:"Barlow", sans-serif;font-size:clamp(30px,3.5vw,48px);font-weight:700;line-height:1.1;letter-spacing:-.8px;color:var(--text)}
.sec-h2 em{font-size:clamp(40px,4.5vw,58px);font-style:italic;color:var(--yelow2)}
.sec-h2.white{color:#fff}
.sec-p{font-size:16px;color:var(--text2);line-height:1.8;margin-top:16px;text-align: justify;}
.sec-p.muted{color:var(--cream2)}

/* ── BREADCRUMB ── */
.breadcrumb{background:var(--blue3);padding:14px 80px;display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.4);font-family:'Open Sans', sans-serif}
.breadcrumb a{color:rgba(255,255,255,.4);text-decoration:none;cursor:pointer}
.breadcrumb a:hover{color:var(--yelow1)}
.breadcrumb span{color:var(--yelow2)}

/* ── PAGE HERO (interior pages) ── */
.page-hero{background: var(--blue3); /* Cor de fundo base */
    padding: 56px 80px;
    position: relative; /* FUNDAMENTAL para a imagem absoluta se prender aqui */
    overflow: hidden;   /* Garante que a imagem não saia das bordas arredondadas */
    z-index: 1;         /* Cria o contexto de empilhamento */}

.page-hero-bg-image {

    position: absolute;
    inset: 0;           /* Atalho para top, bottom, left, right: 0 */
    width: 100%;
    height: 100%;
    
     
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    z-index: -1;        /* Fica atrás do texto, mas dentro do .page-hero */
    opacity: 0.4; 
    pointer-events: none; /* Garante que a imagem não bloqueie cliques em botões */
}

#page-hero-bg-image-entidade{ background-image: url('img/cards/entidade/entidadeHero.webp'); }
#page-hero-bg-image-solucoes{ background-image: url('img/slideImagens/solucoes2.webp') !important; }
#page-hero-bg-image-credAnalise{ background-image: url('img/slideImagens/credianalise.webp') !important; }
#page-hero-bg-image-acordo{ background-image: url('img/cards/acordo_rapido/acordo_rapido_4.webp') !important; }
#page-hero-bg-image-arquivo{ background-image: url('img/slideImagens/arquivo_seguro_8_2.webp') !important; }
#page-hero-bg-image-conciliador{ background-image: url('img/slideImagens/conciliador.webp') !important; }
#page-hero-bg-image-convenio{ background-image: url('img/slideImagens/convenio.webp') !important; }
#page-hero-bg-image-noticias{ background-image: url('img/cards/noticias/pageheroNoticias.webp') !important; }
#page-hero-bg-image-fundacao{ background-image: url('img/cards/fundacao/pexels-yankrukov-7793932.webp') !important; }
#page-hero-bg-image-contato{ background-image: url('img/cards/Contato/pexels-mart-production-7709189.webp') !important; }
#page-hero-bg-image-galeria{ background-image: url('img/studio/galeria/auditorio3.webp'); }

.page-hero .page-hero-tag, 
.page-hero .page-hero-sub {
    position: relative;
    z-index: 2; /* Sempre acima da imagem que está no -1 */
}



.page-hero::after{content:'';position:absolute;right:-100px;top:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(200,151,58,.06) 0%,transparent 70%);}

.page-hero-tag{font-family:'Open Sans', sans-serif;font-size:11px;color:var(--yelow1);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px}

.page-hero-tag::before{content:'';width:22px;height:1px;background:var(--yelow1)}

.page-hero h1{font-family:"Barlow", sans-serif;font-size:clamp(32px,4vw,52px);font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.8px;max-width:700px}

.page-hero h1 em{font-style:italic;color:var(--yelow2)}
.page-hero-sub{font-size:17px;color:var(--cream2);margin-top:16px;max-width:600px;font-weight:300;line-height:1.7}

.page-hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* ── PRODUCT PAGE LAYOUT ── */
.prod-layout{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start;padding:72px 80px}
.prod-main{}
.prod-sidebar{position:sticky;top:88px}
.prod-section{margin-bottom:48px}
.prod-section:last-child{margin-bottom:0}
.prod-h3{font-family:"Barlow", sans-serif;font-size:24px;font-weight:700;color:var(--text);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--cream2)}
.prod-h4{font-family:"Barlow", sans-serif;font-size:18px;font-weight:700;color:var(--text);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--cream2)}
.prod-p{font-size:15px;color:var(--text2);line-height:1.8;margin-bottom:14px}
.prod-p strong{color:var(--text);font-weight:500}
.benefit-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.benefit-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text2);line-height:1.6}
.benefit-list li::before{content:'✓';color:var(--green);font-weight:700;margin-top:1px;flex-shrink:0}

.info-table{width:100%;border-collapse:collapse;margin-top:8px}
.info-table th{text-align:left;font-size:12px;font-weight:500;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;padding:10px 14px;background:var(--cream);font-family:'Open Sans', sans-serif}
.info-table td{font-size:14px;color:var(--text2);padding:12px 14px;border-bottom:1px solid var(--cream2)}
.info-table tr:last-child td{border-bottom:none}
.info-table tr:hover td{background:var(--cream)}

.info-table-blue{width:100%;border-collapse:collapse;margin-top:8px;}
.info-table-blue th{text-align:left;font-size:12px;font-weight:500;color:var(--cream2);text-transform:uppercase;letter-spacing:.5px;padding:10px 14px;background:var(--navy3);font-family:'Open Sans', sans-serif; border-bottom:1px solid var(--cream2)}

.info-table-blue td{background: var(--blue3);font-size:14px;color:var(--cream2); padding: 14px;border-bottom: 1px solid var(--cream2)}

.info-table-blue tr:last-child td{border-bottom:none}
.info-table-blue tr:hover td{background:var(--blue2)}

.doc-block{background:var(--cream);border:1px solid var(--cream2);border-radius:10px;padding:20px 24px;margin-top:8px}
.doc-block h4{font-size:14px;font-weight:500;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.doc-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.doc-list li{font-size:13px;color:var(--text2);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.doc-list li::before{content:'-';font-size:12px;margin-top:1px}
.sidebar-card{background:var(--navy3);border-radius:12px;padding:28px;margin-bottom:16px}
.sidebar-card h4{font-family:"Barlow", sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:12px}
.sidebar-card p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:20px}
.sidebar-card .btn{width:100%;justify-content:center;margin-bottom:8px}
.sidebar-card .btn:last-child{margin-bottom:0}
.sidebar-contact{background:var(--cream2);border-radius:10px;padding:20px}
.sidebar-contact h4{font-size:13px;font-weight:500;color:var(--text);margin-bottom:12px}
.contact-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;color:var(--text2)}
.contact-row:last-child{margin-bottom:0}
.contact-row a{display: inline-flex;align-items: center;gap: 8px; color:var(--text2);text-decoration:none}

.contact-row svg {
  flex-shrink: 0;        /* Impede que o ícone esmague em telas menores */
  /* Se quiser mudar a cor do ícone via CSS, use a propriedade fill: */
  /* fill: #007bff; */ 
}

.related-grid{display:grid;grid-template-columns:1fr;gap:8px}
.related-card{display:flex;align-items:center;gap:12px;padding:12px;background:var(--cream);border:1px solid var(--cream2);border-radius:8px;cursor:pointer;transition:all .2s;text-decoration:none}
.related-card:hover{border-color:var(--green);background:#fff;transform:translateX(4px)}
.related-icon{font-size:20px;flex-shrink:0}
.related-name{font-size:13px;font-weight:500;color:var(--text)}
.related-arrow{margin-left:auto;color:var(--green2);font-size:12px}



/* ── ABOUT PAGE ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.timeline{position:relative;padding-left:28px}
.timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--cream2)}
.tl-item{position:relative;margin-bottom:32px}
.tl-item:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid var(--cream);z-index:1}
.tl-year{font-family:'Open Sans', sans-serif;font-size:11px;color:var(--yelow2);letter-spacing:1px;margin-bottom:4px}
.tl-title{font-size:15px;font-weight:500;color:var(--text);margin-bottom:4px}
.tl-text{font-size:14px;color:var(--text2);line-height:1.6}
.mission-card{background:var(--navy3);border-radius:12px;padding:36px;position:relative;overflow:hidden}
.mission-card::before{content:'';position:absolute;bottom:-40px;right:-40px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(200,151,58,.1)}
.mission-card blockquote{font-family:"Barlow", sans-serif;font-size:20px;font-style:italic;color:#fff;line-height:1.5;margin-bottom:20px}
.mission-card cite{font-size:12px;color:var(--yelow2);letter-spacing:1px;font-family:'Open Sans', sans-serif;text-transform:uppercase}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.pillar{padding:18px;background:var(--blue3);border:1px solid rgba(221, 207, 16,.2);border-radius:8px}
.pillar-title{font-size:13px;font-weight:500;color:#fff;margin-bottom:4px}
.pillar-text{font-size:12px;color:rgba(255,255,255,.45);line-height:1.5}
.estatutos{display:flex;flex-direction:column;gap:10px}
.estatuto-item{padding:16px 20px;background:var(--cream);border:1px solid var(--cream2);border-radius:8px;font-size:14px;color:var(--text2);line-height:1.6;display:flex;gap:12px;align-items:flex-start}
.estatuto-num{font-family:'Open Sans', sans-serif;font-size:11px;color:var(--yelow2);font-weight:500;margin-top:2px;flex-shrink:0}

.estatuto-item:hover{ background-color: rgb(184, 181, 175,.3); }

/* ── SOLUTIONS GRID PAGE ── */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}

.sol-card{

    position: relative; 
    z-index: 2; /* Isso mantém o texto e a imagem "presos" dentro do card */
    background-color:#fff;
    padding:36px;
    cursor:pointer;
    overflow:hidden;
    transition:all .3s;
    border-bottom:3px solid transparent;
    border-radius: 12px;
  }

.sol-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--yelow1);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.sol-card:hover::after{transform:scaleX(1)}
.sol-card:hover{background-color:var(--blue3)}
.sol-card:hover .sol-title,.sol-card:hover .sol-icon-wrap{color:#fff; text-shadow: #1A1814 2px 2px 4px}
.sol-card:hover .sol-desc{color:var(--cream2); text-shadow: #1A1814 2px 2px 4px}
.sol-card:hover .sol-num{color:rgba(200,151,58,.2)}
.sol-card:hover .sol-link{color:var(--yelow1)}


#analiseDeCreditoCard::before,
#acordoCard::before,
#certificadoCard::before,
#arquivoCard::before,
#conciliadorCard::before,
#solConsultaDeCredito::before,
#solSolucoesAcordoRapido::before,
#solSolucoesArquivoSeguro::before,
#solSolucoesConciliador::before,
#solSolucoesConvenio::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1 !important; /* Fica acima do fundo branco */
    border-radius: 8px;
    transition: opacity 0.8s ease;
    opacity: .3; /* Invisível por padrão */
}

/* 2. ATIVAÇÃO (Quando a imagem aparece) */
.sol-card:hover::before, 
.sol-card.featured::before {
    opacity: 0.4 !important; /* Aparece no hover ou se for destaque */
}

/* 3. AS IMAGENS (Caminhos corrigidos) */
#AnaliseCreditoFixoCard::before { 
    background-image: url('img/slideImagens/credianalise.webp') !important; 
}
#analiseDeCreditoCard::before { 
    background-image: url('img/slideImagens/solucoes1.webp') !important; 
}
#acordoCard::before { 
    background-image: url('img/slideImagens/acordoRapido.webp') !important; 
}
#certificadoCard::before { 
    background-image: url('img/slideImagens/convenio.webp') !important; 
}
#arquivoCard::before { 
    background-image: url('img/slideImagens/arquivo_seguro_8.webp') !important; 
}
#conciliadorCard::before { 
    background-image: url('img/slideImagens/conciliador.webp') !important; 
}


/* IDs de Imagens de Fundo - Soluções (Padrão CamelCase) */

/* 1 a 4 */
#solSolucoesPositivo .solucoesCard-img { background-image: url('img/cards/solucoes/creditoCadastropositivo2.webp'); }
#solSolucoesAgro .solucoesCard-img { background-image: url('img/cards/solucoes/Agro.webp'); }
#solSolucoesCheque .solucoesCard-img { background-image: url('img/cards/solucoes/consultaCheque.webp'); }
#solSolucoesVeicular .solucoesCard-img { background-image: url('img/cards/solucoes/solucoesVeicular.webp'); }
#solSolucoesAvisa .solucoesCard-img { background-image: url('img/cards/solucoes/aviso2.webp'); }
#solSolucoesRegistro .solucoesCard-img { background-image: url('img/cards/solucoes/notificacao.webp'); }
#solSolucoesProdutosAntiFraude .solucoesCard-img { background-image: url('img/cards/solucoes/antiFraude.webp'); }
#solSolucoesMonitoramento .solucoesCard-img { background-image: url('img/cards/solucoes/monitoramento.webp'); }
#solSolucoesEnriquecimentoDeDados .solucoesCard-img { background-image: url('img/cards/solucoes/enriquecimentoDeDados.webp'); }

/* 9 a 12 (Novos nomes solicitados) */
#solSolucoesCredianalise::before { background-image: url('img/slideImagens/credianalise.webp'); }
#solSolucoesAcordoRapido::before { background-image: url('img/slideImagens/acordoRapido.webp'); }
#solSolucoesArquivoSeguro::before { background-image: url('img/slideImagens/arquivo_seguro_8.webp'); }
#solSolucoesConciliador::before { background-image: url('img/slideImagens/conciliador.webp'); }
#solSolucoesConvenio::before { background-image: url('img/slideImagens/convenio.webp'); }

/* imagens da parte entidade-studio */

#studio1::before{ background-image:url('img/studio/studio1.webp') ; }
#studio2::before{ background-image:url('img/studio/studio2.webp') ; }
#studio3::before{ background-image:url('img/studio/studio3.webp') ; }
#studio4::before{ background-image:url('img/studio/studio4.webp') ; }
#studio5::before{ background-image:url('img/studio/studio5.webp') ; }
#studio6::before{ background-image:url('img/studio/studio6.webp') ; }
#studio7::before{ background-image:url('img/studio/studio7.webp') ; }


.sol-card.featured {
  
  position: relative; /* Necessário para o posicionamento da imagem */
    background-color: var(--blue3); /* Esta será a cor da sua "borda" */
    display: flex;
    flex-direction: column;
    z-index: 1;
    overflow: hidden;

  }

  .sol-card.featured::before {
  
  content: "";
    position: absolute;
    /* Ajuste esses valores para controlar a grossura da borda */
    /* Quanto menor o número, mais a imagem preenche o card */
    top: 5px;    
    left: 5px;
    right: 5px;
    bottom: 5px;
    
    
    background-size: cover;       /* GARANTE QUE NÃO DISTORCE */
    background-position: center;
    background-repeat: no-repeat;
    
    /* Controle a opacidade da imagem aqui sem afetar o texto */
    opacity: 0.2; 
    
    border-radius: 8px; /* Opcional: arredonda a imagem dentro do card */

  }




.sol-card.featured .sol-title{color:#fff; text-shadow: 2px 2px 2px rgb(26, 24, 20, .8), 4px 4px 4px rgb(26, 24, 20, .8)}
.sol-card.featured .sol-desc{color:var(--cream2);text-shadow: 2px 2px 2px rgb(26, 24, 20, .8), 4px 4px 4px rgb(26, 24, 20, .8)}
.sol-card.featured .sol-link{color:var(--yelow1)}
.sol-card.featured::after{transform:scaleX(1)}
.sol-num{font-family:'Open Sans', sans-serif;font-size:11px;color:var(--cream2);margin-bottom:20px;transition:color .3s}
.sol-icon-wrap{font-size:28px;margin-bottom:16px;transition:color .3s}

.sol-title{font-family:"Barlow", sans-serif;font-size:22px;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:10px;transition:color .3s}

.sol-desc{font-size:18px;color:var(--text2);line-height:1.6;margin-bottom:24px;transition:color .3s}


.sol-link{font-size:13px;color:var(--navy3);font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.sol-link:hover{gap:12px}

/* Garante que o texto fique ACIMA da imagem agora que ela está em z-index 0 */
.sol-num, .sol-icon-wrap, .sol-title, .sol-desc, .sol-link {
    position: relative;
    z-index: 10 !important; 
}







/* ── NUMBERS ── */
.numbers-sec{background:var(--blue3);padding:72px 80px}
.num-inner{display:grid;grid-template-columns:1fr 2fr;gap:72px;align-items:center}
.num-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.num-card{padding:36px;background:var(--navy3);border:1px solid rgba(200,151,58,.07);border-radius: 16px;position:relative;overflow:hidden;transition:background .3s}
.num-card:hover{background: var(--blue2)}
.num-val{font-family:"Barlow", sans-serif;font-size:36px;font-weight:700;color:var(--yelow2);line-height:1;margin-bottom:6px}
.num-label{font-size:13px;color:var(--cream2);line-height:1.4;font-weight:300}
.num-bg{position:absolute;bottom:-10px;right:-8px;font-family:"Barlow", sans-serif;font-size:72px;font-weight:900;color:rgba(200,151,58,.04);;line-height:1}

/* ── FAQ ── */
.faq-inner{display:grid;grid-template-columns:1fr 2fr;gap:72px}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--cream2)}
.faq-q{padding:22px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:15px;font-weight:500;color:var(--text);gap:16px;transition:color .4s}
.faq-q:hover{color:var(--yelow2)}
.faq-q svg{flex-shrink:0;transition:transform .6s;color:var(--yelow2)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{display: block;max-height:0;overflow:hidden;font-size:14px;color:var(--text2);line-height:1.7}
.faq-item.open .faq-a{max-height:400px;padding-bottom:22px}


/* ── NEWS ── */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.news-card{background:#fff;border-radius:10px;overflow:hidden;transition:all .3s;cursor:pointer;border:1px solid var(--cream2)}
.news-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.1);border-color:var(--yelow1)}

.news-img{height: 160px;
    background: var(--blue3); /* A cor que vai transparecer */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    position: relative;
    overflow: hidden;
    z-index: 1; /* Cria o contexto para as camadas */}

.news-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.8; /* Ajuste aqui a intensidade da imagem (0.1 a 0.3 recomendado) */
    z-index: -1; /* Fica atrás do conteúdo (ícones/texto), mas acima do background do pai */
    transition: transform 0.5s ease;
}

#newsImage1::before { background-image: url('img/cards/noticias/ia_varejo.webp'); }
#newsImage2::before { background-image: url('img/cards/noticias/ia_varejo_2.webp'); }
#newsImage3::before { background-image: url('img/cards/noticias/mulheres-emprendedoras.webp'); }
#newsImage4::before { background-image: url('img/cards/noticias/ia_varejo.webp'); }
#newsImage5::before { background-image: url('img/cards/noticias/mulheres-emprendedoras.webp'); }
#newsImage6::before { background-image: url('img/cards/noticias/panoramaDoComercio.webp'); }
#newsImage7::before { background-image: url('img/cards/noticias/ia_varejo_2.webp'); }
#newsImage8::before { background-image: url('img/cards/noticias/mulheres-empreendedoras2.webp') }
#newsImage9::before { background-image: url('img/cards/noticias/Pasco_cdl.webp'); }
#newsImage10::before { background-image: url('img/cards/noticias/estrategia.webp'); }
#newsImage11::before { background-image: url('img/cards/noticias/menorAprendiz.webp'); }
#newsImage12::before { background-image: url('img/cards/noticias/dentista.webp'); }

.news-img::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(55,75,112,.6) 0%,transparent 60%)}

.news-cat{position:absolute;top:12px;left:12px;font-family:'Open Sans', sans-serif;font-size:10px;color:var(--yelow2);letter-spacing:1.5px;text-transform:uppercase;background:rgba(55, 75, 112,.4);padding:4px 8px;border-radius:4px;z-index:1}
.news-body{padding:20px}
.news-date{font-family:'Open Sans', sans-serif;font-size:11px;color:var(--gray);letter-spacing:.5px;margin-bottom:8px}
.news-title{font-family:"Barlow", sans-serif;font-size:17px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:8px}
.news-excerpt{font-size:13px;color:var(--text2);line-height:1.6}

/* ── ECOSYSTEM ── */
.eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.eco-card{padding:28px 20px;background:#fff;border-radius:10px;border:1px solid var(--cream2);text-align:center;transition:all .3s;cursor:pointer}
.eco-card:hover{border-color:var(--yelow1);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}


.eco-icon{ width: 100%;             /* Ocupa a largura do card */
    height: 60px;            /* DÁ UMA ALTURA FIXA PARA A IMAGEM APARECER */
    margin-bottom: 12px;
    
    /* Configurações para a imagem não cortar e ficar centralizada */
    background-size: contain;     /* Faz a imagem se ajustar sem distorcer ou cortar */
    background-repeat: no-repeat; /* Impede que a imagem fique se repetindo */
    background-position: center;  /* Centraliza a logo no meio do espaço */ }


.eco-name{font-family:"Barlow", sans-serif;font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px}
.eco-desc{font-size:12px;color:var(--text2);line-height:1.5}


#cardCndl { background-image: url('img/logo/parceiros/cndl_logo.webp')  }
#cardFcdl { background-image: url('img/logo/parceiros/fcndl_logo.webp') ; }
#cardSpcBrasil { background-image: url('img/logo/parceiros/spc_brasil_logo_.webp') ; }
#cardCdlJoven { background-image: url('img/logo/parceiros/cdl_joven_logo.webp') ; }


/* ── FUNDAÇÃO ── */
.fund-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.proj-list{display:flex;flex-direction:column;gap:10px}
.proj-item{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;background:#fff;border:1px solid var(--cream2);border-radius:10px;cursor:pointer;transition:all .25s}
.proj-item:hover{border-color:var(--yelow1);box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateX(4px)}
.proj-icon{font-size:24px;flex-shrink:0;margin-top:2px}
.proj-name{font-size:15px;font-weight:500;color:var(--text);margin-bottom:3px}
.proj-desc{font-size:13px;color:var(--text2);line-height:1.5}

/* ── CTA BANNER ── */
.cta-banner{background:var(--yelow2);padding:72px 80px;text-align:center;position:relative;overflow:hidden; z-index: 10;}
.cta-banner::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:500px;height:500px;border-radius:50%;border:1px solid rgba(11,22,40,.06);}
.cta-tag{font-family:'Open Sans', sans-serif;font-size:12px;color:var(--blue2);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
.cta-h2{font-family:"Barlow", sans-serif;font-size:clamp(28px,4vw,48px);font-weight:900;color:var(--blue3);letter-spacing:-.8px;margin-bottom:16px}
.cta-sub{font-size:17px;color:var(--blue3);margin-bottom:36px;font-weight:300}
.cta-btns{display:flex;gap:48px;justify-content:center; margin-left: 20px;}

.cta-btns button, 
.cta-btns a {
    cursor: pointer;
    position: relative;
    z-index: 11;
}

.cta-tag,
.cta-h2,
.cta-sub { z-index: 12; position: relative;}

hr {color: var(--cream2);}

/* ── CONTACT ── */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.contact-info{}
.contact-cards{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.cinfo-card{display:flex;align-items:flex-start;gap:14px;padding:18px;background:#fff;border:1px solid var(--cream2);border-radius:10px}
.cinfo-icon{font-size:18px;margin-top:1px;flex-shrink:0}
.cinfo-label{font-family:'Open Sans', sans-serif;font-size:10px;color:var(--blue3);letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.cinfo-val{font-size:14px;color:var(--text);font-weight:400}

#cinfo-valChatOnline { color: var(--navy3); transition: 0.6s; }
#cinfo-valChatOnline:hover { color: var(--blue); }

.form-box{background:var(--blue3);border-radius:14px;padding:36px}
.form-title{font-family:"Barlow", sans-serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.fg label{font-size:12px;color:var(--cream2);letter-spacing:.3px}
.fg input,.fg select,.fg textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:11px 13px;font-size:14px;color:#fff;font-family:'Open Sans', sans-serif;outline:none;transition:border-color .2s}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,.2)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold)}
.fg select option{background:var(--navy2);color:#fff}
.fg textarea{resize:vertical;min-height:96px}
.btn-submit{width:100%;background:var(--yelow2);color:var(--blue3);padding:14px;border:none;border-radius:var(--r);font-size:14px;font-weight:500;cursor:pointer;font-family:'Open Sans', sans-serif;transition:all .25s;margin-top:4px}
.btn-submit:hover{background:var(--yelow1);transform:translateY(-1px);color: var(--blue);}

/* "Desoculta" os elementos e garante que ocupem espaço */
.partner-strip, 
.cta-banner, 
footer {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important; /* Garante que fiquem na frente */
    overflow: visible !important;
}

/* Garante que o container de logos não tenha altura zero */
.slider-container {
    min-height: 100px !important; 
    display: block !important;
    overflow: hidden !important; /* ISSO IMPEDE O VAZAMENTO */
}



/* Força as imagens a aparecerem */
.plogo img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.meu-rodape-completo {
    all: unset; /* Limpa heranças de CSS de outras páginas que podem deformar o footer */
    display: block !important;
    width: 100% !important;
    position: relative !important;
    clear: both !important; /* Garante que nada que venha de cima "atropele" o rodapé */
}

/* Isso impede que o footer verde suba e tape as logos */
.partner-strip, .cta-banner, footer {
    display: block !important; 
    position: relative !important;
    float: none !important;
}


/* ── FOOTER ── */
footer{background-image: linear-gradient(to bottom, rgb(1, 95, 53,.9), rgb(0, 154, 84, 0.90));padding:56px 80px 32px;border-top:1px solid rgba(200,151,58,.08)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:44px}
.footer-logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:14px;cursor:pointer}
#logoFooter img{max-height: 45px;}
.footer-mark{width:34px;height:34px;background:var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:900;font-size:15px;color:var(--navy)}
.footer-tagline{font-size:13px;color:var(--cream2);line-height:1.6;max-width:260px}
.footer-socials{display:flex;gap:8px;margin-top:18px}
.fsoc{width:32px;height:32px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;transition:all .2s;font-weight:700}
.fsoc:hover{border-color:var(--gold);color:var(--gold);background:rgba(200,151,58,.07)}
.footer-col-title{font-family:'Open Sans', sans-serif;font-size:14px;font-weight:500;color: var(--cream);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-links a{font-family:'Open Sans', sans-serif;font-size:12px;color:var(--cream2);text-decoration:none;transition:color .2s;cursor:pointer}
.footer-links a:hover{color:var(--yelow1)}
.footer-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center}
.footer-copy{font-size:12px;color:var(--gray2)}
.footer-legal{display:flex;gap:18px}
.footer-legal a{font-size:12px;color:var(--gray2);text-decoration:none;transition:color .2s;cursor:pointer}
.footer-legal a:hover{color:var(--yelow1)}

/* ── PARTNER STRIP ── */
/* Container principal ajustado */
.partner-strip {
    padding: 40px 0; /* Tiramos o padding lateral para a faixa encostar nos cantos */
    background: var(--blue);
    display: flex;
    flex-direction: column; /* Label em cima, logos embaixo */
    align-items: center;
    gap: 35px;
    overflow: hidden; /* Corta as logos que saem da tela */
    width: 100%;
}

.partner-label {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: var(--yelow2);
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* Janela por onde as logos passam */
.slider-container {
    gap: 20px;
    width: 100%;
    overflow: hidden;
    position: relative;

    display: flex;
    align-items: center; /* Centraliza verticalmente */
    min-height: 120px;   /* Dá uma altura mínima para o trilho respirar */
}

/* O "trilho" que realmente se move */
.partner-logos-track {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content; /* Importante: faz o trilho ter o tamanho real das logos somadas */
    animation: scroll-loop 100s linear infinite; /* 20s controla a velocidade */
}

/* Ajuste do card da logo para conter a imagem */
.plogo {
    width: 160px; /* Largura fixa para manter o padrão */
    height: 60px;
    background: var(--cream);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    flex-shrink: 0; /* Impede que a logo "esmague" */
}

.plogo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ajusta a imagem sem distorcer */
    filter: grayscale(60%); /* Opcional: logos em cinza */
    opacity: 0.7;
    transition: 0.3s;
    cursor: pointer;
}

.plogo img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* A MÁGICA DA ANIMAÇÃO */
@keyframes scroll-loop {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exatamente metade do trilho (a parte original) */
        transform: translateX(calc(-50% - 12px)); 
    }
}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}

/* ── HELPERS ── */
.white{color:#fff!important}
.gold{color:var(--gold)!important}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.divider{height:1px;background:var(--cream2);margin:32px 0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500}
.chip-gold{background:rgba(200,151,58,.12);color:#8B6520;border:1px solid rgba(200,151,58,.25)}
.chip-navy{background:rgba(11,22,40,.08);color:var(--navy);border:1px solid rgba(11,22,40,.12)}
.chip-green{background:rgba(22,163,74,.1);color:#166534;border:1px solid rgba(22,163,74,.2)}
.centered{text-align:center}
.centered .sec-label{justify-content:center}

/* ── ANIMATIONS ── */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ── RESPONSIVE ── */

/* ─── BLOCO UNIFICADO PARA MOBILE E TABLET (Substitua os 3 anteriores por este) ─── */
@media (max-width: 960px) {
    #navbar { 
        padding: 0 20px; 
    }

    /* 1. O Hamburguer aparece */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 5px;
        z-index: 1001;
    }

    .hamburger span {
        width: 25px;
        height: 2px;
        background: white;
        transition: 0.3s;
    }

    /* 2. A Lista de Links vira o menu lateral/cortina */
    .nav-links {
        display: none; /* Escondido por padrão, JS ativa com .active */
        flex-direction: column !important;
        position: absolute;
        top: 68px;
        left: 0;
        width: 100%;
        background: var(--blue3); /* Cor do seu tema */
        padding: 10px 0;
        height: auto;
        max-height: calc(40vh - 40px);
        overflow-y: auto;
        border-bottom: 4px solid var(--yelow1);
        z-index: 499;
    }

    /* 3. Quando o JS adiciona a classe .active */
    .nav-links.active {
        display: flex !important;
    }

    /* 4. Sub-menus: Escondidos para abrir no clique via JS */
    .sub-menu {
        display: none; /* O JS vai alternar para flex ao clicar */
        position: static !important;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.15);
        width: 100%;
        margin-top: 5px;
        margin-bottom: 10px;
        padding-left: 15px !important;
    }

    /* Classe que o JS vai colocar no <li> pai quando clicar */
    .has-sub.sub-open > .sub-menu {
        display: flex !important;
        flex-direction: column;
    }

    /* 5. Ajuste dos links dentro do menu mobile */
    .nav-links li {
        width: 100%;
        text-align: left;
        margin: 0;
    }

    .nav-links a {
        display: block;
        width: 100%;
        padding: 8px 20px;
        font-size: 16px; /* Fonte maior para facilitar o toque */
        border-bottom: 1px solid rgba(255,255,255,0.05); /* Linha sutil para separar sem afastar */
    }

    /* 6. Dark Mode: Ele NÃO deve sumir (já que está no nav-controls fora da ul) */
    #dark-mode-toggle {
        display: flex !important;
        margin-right: 10px;
    }


    .sol-card {

    position: relative; 
    z-index: 2; /* Isso mantém o texto e a imagem "presos" dentro do card */
    background-color: var(--blue3);
    padding:36px;
    cursor:pointer;
    overflow:hidden;
    transition:all .3s;
    border-bottom:3px solid transparent;
    border-radius: 12px;
  }

  .sol-title,.sol-card, .sol-desc, .sol-icon-wrap{color:#fff; text-shadow: 2px 2px 2px rgb(26, 24, 20, .8), 4px 4px 4px rgb(26, 24, 20, .8); transition: ease .6s;}

  .sol-link{color: var(--yelow1);}

#analiseDeCreditoCard::before,
#acordoCard::before,
#certificadoCard::before,
#arquivoCard::before,
#conciliadorCard::before,
#solConsultaDeCredito::before,
#solSolucoesAcordoRapido::before,
#solSolucoesArquivoSeguro::before,
#solSolucoesConciliador::before,
#solSolucoesConvenio::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1 !important; /* Fica acima do fundo branco */
    border-radius: 8px;
    transition: opacity 0.8s ease;
    opacity: .8; /* Invisível por padrão */
}

}


@media(max-width:960px){

  .hero{grid-template-columns:1fr}
  .hero-right{display:none}
  .hero-left{padding:48px 20px 56px}
  .sec{padding:56px 20px}
  .breadcrumb{padding:12px 20px}
  .page-hero{padding:40px 20px}
  .prod-layout{grid-template-columns:1fr;padding:40px 20px}
  .prod-sidebar{position:static}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .sol-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .eco-grid{grid-template-columns:1fr 1fr}
  .fund-grid{grid-template-columns:1fr;gap:40px}
  .faq-inner{grid-template-columns:1fr;gap:32px}
  .num-inner{grid-template-columns:1fr;gap:40px}
  .num-grid{grid-template-columns:1fr 1fr}
  .contact-layout{grid-template-columns:1fr;gap:40px}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .cta-banner,.numbers-sec{padding:56px 20px}
  .partner-strip{padding:32px 20px}
  .hero-stats{gap:24px;flex-wrap:wrap}
}

/* ─── AJUSTE ESTÉTICO DO FOOTER (MOBILE & TABLET) ─── */
@media (max-width: 960px) {
    /* 1. Ajuste da Grade: 2 colunas para Tablets */
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px 20px; /* Mais espaço vertical entre as linhas */
        padding: 40px 20px;
    }

    /* 2. Tipografia: Diminuir levemente para não quebrar linha */
    .footer-top h4 {
        font-size: 16px;
        margin-bottom: 15px;
        color: var(--yelow1); /* Mantendo o destaque nos títulos */
    }

    .footer-top ul li a {
        font-size: 14px;
        line-height: 1.6;
    }

    /* 3. Redes Sociais: Ícones um pouco maiores para facilitar o toque */
    .footer-social {
        display: flex;
        gap: 15px;
        margin-top: 10px;
    }

    .footer-social a {
        font-size: 20px; 
    }

    /* 4. Footer Bottom: Copyright e Links Legais */
    .footer-bottom {
        flex-direction: column; /* Empilha o texto no mobile */
        text-align: center;
        gap: 15px;
        padding: 20px;
        font-size: 13px;
    }
}

@media (max-width: 960px) {
    @media (max-width: 960px) {
    /* Esconde o submenu de verdade quando não tiver a classe sub-open */
    .has-sub .sub-menu {
        display: none !important; /* Remove do fluxo da página */
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }

    /* Mostra o submenu APENAS quando o pai tiver a classe sub-open */
    .has-sub.sub-open .sub-menu {
        display: flex !important; /* Volta para o fluxo da página */
        visibility: visible;
        height: auto;
        background: rgba(0, 0, 0, 0.2);
        padding: 5px 0 !important;
        margin-top: 2px !important;
    }

    /* Colar as LIs */
    .nav-links li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .nav-links a {
        padding: 10px 20px !important;
        min-height: unset !important;
    }

 }
}


/* Container do Grid Soluções */
.solucoesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas de tamanhos iguais */
  gap: 24px;                             /* Espaçamento entre os cards */
  max-width: 1200px;                     /* Limita a largura máxima do grid */
  margin: 0 auto;                        /* Centraliza o grid na tela */
  padding: 32px;
  
}


/* --- REGRAS DO CARD (Mantendo suas configurações) --- */
.solucoesCard {
  position: relative;                    /* Mantém o botão preso dentro do card */
  width: 100%;                           /* O card agora se adapta à largura da coluna do grid */
  max-width: 100%;                      /* Garante que ele não passe do tamanho ideal */
  box-sizing: border-box;                /* Evita que o padding altere o tamanho final do card */
  background-color: #284d92;
  border: none;
  border-radius: 16px;
  padding: 4px;
  font-family: "Barlow", sans-serif;
  cursor: pointer;
  box-shadow: inset 0 0 0 4px #374b70, 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.6s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  padding-bottom: 30px;
}

body.dark-mode .solucoesCard {
    background-color: var(--navy2);
}

.solucoesCard:hover {
  transform: translateY(-4px);
  border: 2px solid rgb(221, 207, 16);
  /* Mantido os mesmos 4px de espessura interna para a imagem não recalcular o tamanho e piscar */
  box-shadow: 0 16px 24px rgba(0,0,0,0.3);
}

/* Novo container para a imagem via CSS */
.solucoesCard-img {
  width: 100%;
  aspect-ratio: 8 / 7;       /* Força a proporção exata de 800x700 */                         /* Altura fixa para a imagem */
  border-radius: 10px;
  background-size: contain;                /* Garante que a imagem preencha o espaço sem distorcer */
  background-position: center;           /* Centraliza a imagem no espaço */
}
/* --- TEXTOS E CONTEÚDO (Mantidos) --- */
.solucoesCard-content {
  padding: 16px 4px 8px 4px;
}

.solucoesCard-content h3 {
  margin: 0 12px 8px 12px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}

.solucoesCard-content p {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0 15px 16px 15px;
  color: #e0f2fe;
  font-size: 0.9rem;
  line-height: 1.4;
}

.solucoesCard-btn {
  position: absolute;
  bottom: 12px;       /* Distância fixa da borda de baixo do card */
  left: 12px;         /* Distância fixa da borda esquerda do card */
  transition: ease 0.4s;
  
  color: #ddcf10;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.solucoesCard-btn:hover {
  color: #ffef13;
}

/* Responsividade Básica para telas menores */
@media (max-width: 1024px) {
  .solucoesGrid { grid-template-columns: repeat(2, 1fr); } /* 2 colunas em tablets */
}
@media (max-width: 680px) {
  .solucoesGrid { grid-template-columns: 1fr; justify-items: center; } /* 1 coluna no celular */
}


/* MODAL SOLUCOES INICIO */


/* --- ESTILOS DO MODAL/SLIDE SHOW EM CAMELCASE (Isolamento Completo) --- */
.solucoesModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.solucoesModalOverlay.solucoesModalActive {
  opacity: 1;
  pointer-events: auto;
}

.solucoesModalContent {
  background: var(--blue3); /* ALTERADO: Aplica o background azul escuro */
  width: 92%;
  max-width: 850px;
  max-height: 85vh;
  border-radius: 12px;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  padding: 40px;
  /* ALTERADO: Aplica a nova stack de fontes do texto comum */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.1); /* ADICIONADO: Borda sutil para dar profundidade no modo escuro */
}

body.dark-mode .solucoesModalContent { background-color: var(--navy3);}

.solucoesModalClose {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--yelow2);
  transition: color 0.2s;
  z-index: 10;
}

.solucoesModalClose:hover {
  color: var(--cream2); /* ALTERADO: Cor do hover do fechar para combinar com os textos */
}

/* Configuração interna das páginas */
.solucoesModalPage {
  display: none;
  animation: solucoesModalFadeIn 0.35s ease;
}

.solucoesModalPage.solucoesModalActivePage {
  display: block;
}

.solucoesModalLayout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .solucoesModalLayout { flex-direction: column; }
  .solucoesModalImgFrame { width: 100% !important; height: 200px !important; }
}

.solucoesModalImgFrame {
  width: 40%;
  height: 350px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #cbd5e1;
}

.solucoesModalImgFrame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solucoesModalTextFrame {
  flex-grow: 1;
}

.solucoesModalTextFrame h2 {
  color: var(--yelow2); /* ALTERADO: Cor para o amarelo dinâmico */
  font-family: 'Barlow', sans-serif; /* ADICIONADO: Nova família de fonte */
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.solucoesModalTextFrame h4 {
  color: var(--cream2); /* ALTERADO: Cor para o mesmo amarelo dinâmico */
  opacity: 0.85; /* ADICIONADO: Sutil opacidade para diferenciar do h2 */
  font-family: 'Barlow', sans-serif; /* ADICIONADO: Nova família de fonte */
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* Formatação do conteúdo textual injetado */
.solucoesModalInnerHtml p {
  color: var(--cream); /* ALTERADO: Cor creme para simular branco */
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

.solucoesModalInnerHtml ul {
  list-style: none;
  margin-bottom: 16px;
  padding-left: 0;
}

.solucoesModalInnerHtml ul li {
  font-size: 0.85rem;
  color: var(--cream); /* ALTERADO: Cor creme */
  padding-left: 16px;
  position: relative;
  margin-bottom: 8px;
}

.solucoesModalInnerHtml ul li::before {
  content: "•";
  color: var(--yelow2); /* ALTERADO: Marcadores de listas amarelos combinando com o título */
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

/* ADICIONADO: Estilo do substituto do <strong> com weight maior */
.solucoesModalInnerHtml .destaque {
  font-weight: 600 !important;
  color: var(--cream2) !important; /* Destaque sutilmente mais claro para leitura */
}

/* ADICIONADO: Estilização para a nota cinza da página de Consultas PJ */
.solucoesModalInnerHtml .card-nota {
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
  border-radius: 6px;
  border-left: 3px solid var(--yelow2);
  margin-top: 15px;
  color: var(--cream2);
}

/* Tabelas dentro do Slider */
.solucoesModalTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.8rem;
}

.solucoesModalTable th {
  background: rgba(255, 255, 255, 0.05); /* ALTERADO: Fundo adaptado para modo escuro */
  color: var(--white); /* ALTERADO: Cabeçalhos com a fonte Barlow amarela */
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  padding: 8px;
  border-bottom: 2px solid rgb(255, 255, 255,.4);
  border-top: 2px solid rgb(255, 255, 255,.1);
  text-align: left;
}

.solucoesModalTable td {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .4); /* ALTERADO: Linha sutil translúcida */
  color: var(--cream2); /* ALTERADO: Texto da tabela creme */
}

/* Setas de navegação */
.solucoesModalNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--blue2, #1e293b); /* ALTERADO: Seta com fundo azul escuro */
  border: 1px solid rgba(255, 255, 255, 0.1); /* ALTERADO: Borda escura suave */
  color: var(--cream2); /* ALTERADO: Ícone interno claro */
  width: 25px;
  height: 25px;
  font-size: 10px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
  transition: all 0.2s;
}

body.dark-mode .solucoesModalNav { background-color: var(--navy2);}

body.dark-mode .solucoesModalNav:hover { background-color: var(--navy); color: var(--yelow2);}

.solucoesModalNav:hover {
  background: rgba(255, 255, 255, 0.1); /* ALTERADO: Efeito hover translúcido moderno */
  color: #ffffff;
}

.solPrev { left: 8px; }
.solNext { right: 8px; }

/* Bolinhas de paginação */
.solucoesModalDots {
  text-align: center;
  margin-top: 24px;
}

.solucoesDot {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 0 4px;
  background-color: rgba(255, 255, 255, 0.2); /* ALTERADO: Bolinha inativa translúcida */
  border-radius: 50%;
  display: inline-block;
  transition: all 0.2s;
}

.solucoesDot.solucoesModalActiveDot, .solucoesDot:hover {
  background-color: var(--yelow2); /* ALTERADO: Bolinha ativa segue o tom amarelo */
  transform: scale(1.2);
}

/* --- ADICIONADO: Regras exclusivas para forçar a largura total das tabelas --- */
.solucoesModalPage.solucoesModalActivePage:has(.pf-table-marker),
.solucoesModalPage.solucoesModalActivePage:has(.pj-table-marker) {
  display: block !important;
}

.solucoesModalPage.solucoesModalActivePage:has(.pf-table-marker) .solucoesModalImgFrame,
.solucoesModalPage.solucoesModalActivePage:has(.pj-table-marker) .solucoesModalImgFrame {
  display: none !important; /* Remove a coluna de imagem apenas nas páginas marcadas */
}

.solucoesModalPage.solucoesModalActivePage:has(.pf-table-marker) .solucoesModalTextFrame,
.solucoesModalPage.solucoesModalActivePage:has(.pj-table-marker) .solucoesModalTextFrame {
  width: 100% !important;
  max-width: 100% !important;
}

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


/* MODAL SOLUCOES FIM */


/* ─── AJUSTE PARA CELULARES PEQUENOS (Abaixo de 600px) ─── */
@media (max-width: 600px) {
    .footer-top {
        grid-template-columns: 1fr; /* Tudo em uma coluna só */
        text-align: center; /* Centraliza o conteúdo */
    }

    .footer-top ul li {
        margin-bottom: 8px;
    }

    .footer-social {
        justify-content: center; /* Centraliza os ícones sociais */
    }
    
    /* Se tiver logo no footer, centraliza ela também */
    .footer-info img {
        margin: 0 auto 20px;
        display: block;
    }

    /* ─── AJUSTE FINO DO RODAPÉ INFERIOR (MOBILE) ─── */
@media (max-width: 600px) {
    .footer-bottom {
        display: flex;
        flex-direction: column; /* Empilha as divs */
        align-items: center;    /* Centraliza os blocos */
        text-align: center;     /* Centraliza o texto interno */
        padding: 30px 15px;
        gap: 20px;
    }

    /* Ajuste do Copyright (Máximo 2 linhas) */
    .footer-copy {
        font-size: 10px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.7);
        max-width: 280px; /* Limita a largura para forçar a quebra em 2 linhas */
        margin: 0 auto;
    }

    /* Ajuste do Legal (Máximo 1 linha) */
    .footer-legal {
        display: flex;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: 100%; /* Garante que não quebre a linha se o texto for curto */
    }

    .footer-legal a {
        font-size: 10px; /* Letra ligeiramente menor para caber em uma linha */
        white-space: nowrap; /* Impede que os links individuais quebrem */
        text-decoration: none;
        color: rgba(255, 255, 255, 0.6);
    }
    
    /* Separador visual entre os links do legal (opcional) */
    .footer-legal a:not(:last-child)::after {
        content: "|";
        margin-left: 15px;
        opacity: 0.3;
    }
}


/* 1. Reset Global de Segurança para evitar vazamentos */
    .contato-container, 
    .contato-wrapper,
    .contato-section,
    .contato-content {
        width: 100% !important;
        max-width: 100vw !important; /* Garante que não passe da largura da "janela" */
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden; /* Corta qualquer coisa que tente sair */
        box-sizing: border-box !important; /* O padding não soma mais na largura */
    }

    /* 2. Centralizar e ajustar textos/títulos que ficaram grandes */
    .contato-section h2, 
    .contato-section h3 {
        font-size: 24px !important; /* Tamanho confortável para celular */
        text-align: center !important;
        margin-bottom: 20px;
    }

    /* 3. Ajuste para o Formulário e Mapas (Culpados comuns de vazamento) */
    .contato-section form,
    .contato-section iframe {
        width: 100% !important;
        height: auto !important;
        min-width: unset !important;
    }

    /* 4. Se tiver colunas (lado a lado), elas precisam virar uma só */
    .contato-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px;
        align-items: center;
    }

    /* 5. Ajuste de Inputs e Botões para não ficarem gigantes */
    input, textarea, .btn-contato {
        width: 100% !important;
        font-size: 16px !important; /* Evita que o iPhone dê zoom automático no input */
        box-sizing: border-box !important;
    }

}


/* ── MODO ESCURO: CORREÇÃO DE VISIBILIDADE ── */
body.dark-mode {
    background-color: var(--navy) !important;
    color: var(--white) !important;
}

body.dark-mode .hero-content-area {
    background-color: var(--navy2);
}

body.dark-mode .btn-sobre-imagem {
    background-color: rgb(19, 32, 64, .4);
}

body.dark-mode .btn-sobre-imagem:hover {
    background-color: rgb(19, 32, 64, .8);
}

body.dark-mode .botaoDaDivDireito {
    background-color: rgb(19, 32, 64, .4);
    color: white;
}

body.dark-mode .botaoDaDivEsquerdo {
    background-color: rgb(19, 32, 64, .4);
    color: white;
}

body.dark-mode .botaoDaDivDireito:hover {
    background-color: rgb(19, 32, 64, .8);
}

body.dark-mode .botaoDaDivEsquerdo:hover {
    background-color: rgb(19, 32, 64, .8);
}

body.dark-mode .textoDaImagemTitulo {
    
    color: white;
}

body.dark-mode .textoDaImagemSub {
    
    color: white;
}



/* 1. HERO E NAVBAR (Onde as fontes costumam sumir) */
body.dark-mode #navbar {
    background-image: linear-gradient(to bottom, var(--navy), var(--navy2)) !important;
    border-bottom: 2px solid var(--navy3) !important;
}

body.dark-mode .nav-spc span {
    color: var(--blue3);
}

body.dark-mode .hero {
    background: var(--navy2) !important; /* Fundo escuro sólido no Hero */
}

body.dark-mode .hero-h1, 
body.dark-mode .sec-h2, 
body.dark-mode .hcard-title,
body.dark-mode .page-hero h1 {
    color: var(--white) !important; /* Força títulos em branco */
}

body.dark-mode .hero-p, 
body.dark-mode .sec-p, 
body.dark-mode .hcard-desc,
body.dark-mode .page-hero-sub {
    color: var(--gray2) !important; /* Força parágrafos em cinza claro */
}

/* 2. SEÇÕES GERAIS (Garante que o fundo não fique claro) */
body.dark-mode .sec, 
body.dark-mode .page, 
body.dark-mode .numbers-sec,
body.dark-mode .page-hero {
    background-color: var(--navy) !important;
}

/* 3. CARDS (Elevação visual) */
body.dark-mode .sol-card, 
body.dark-mode .news-card, 
body.dark-mode .hcard,
body.dark-mode .mini-card,
body.dark-mode .cinfo-card,
body.dark-mode .proj-item {
    background-color: var(--navy2) !important;
    border: 1px solid var(--navy3) !important;
}

/* 4. LINKS E TEXTOS DE NAVEGAÇÃO */
body.dark-mode .nav-links a {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-mode .nav-links a.nav-cta {
    color: var(--blue3) !important;
}

body.dark-mode .nav-links a:hover {
    color: var(--yelow1) !important;
}



body.dark-mode .footer-links a,
body.dark-mode .footer-tagline {
    color: var(--cream2) !important;
}

/* 5. FORMULÁRIOS (Essencial para o usuário enxergar o que digita) */
body.dark-mode .fg label {
    color: var(--gray2) !important;
}

body.dark-mode .fg input, 
body.dark-mode .fg textarea {
    background: var(--navy3) !important;
    color: var(--white) !important;
    border-color: var(--navy2) !important;
}

/* ── MODO ESCURO: CORREÇÃO DEFINITIVA DE FONTES ── */
body.dark-mode {
    background-color: var(--navy) !important;
    color: var(--cream) !important; /* Cor base vira Cream */
}

/* 1. TÍTULOS (De Pretos para Cream) */
body.dark-mode .hero-h1, 
body.dark-mode .sec-h2, 
body.dark-mode .hcard-title,
body.dark-mode .page-hero h1,
body.dark-mode .sol-title,
body.dark-mode .news-title,
body.dark-mode .eco-name,
body.dark-mode .prod-h3,
body.dark-mode .form-title,
body.dark-mode .footer-col-title,
body.dark-mode .tl-title,
body.dark-mode .pillar-title,
body.dark-mode .cinfo-val {
    color: var(--cream) !important;
}

/* 2. PARÁGRAFOS E TEXTOS DE APOIO (De Cinzas para Cream2) */
body.dark-mode .hero-p, 
body.dark-mode .sec-p, 
body.dark-mode .hcard-desc,
body.dark-mode .page-hero-sub,
body.dark-mode .sol-desc,
body.dark-mode .news-excerpt,
body.dark-mode .eco-desc,
body.dark-mode .prod-p,
body.dark-mode .benefit-list li,
body.dark-mode .info-table td,
body.dark-mode .doc-list li,
body.dark-mode .tl-text,
body.dark-mode .pillar-text,
body.dark-mode .estatuto-item,
body.dark-mode .footer-tagline,
body.dark-mode .footer-links a,
body.dark-mode .cinfo-label,
body.dark-mode .contact-row,
body.dark-mode .stat-l {
    color: var(--cream2) !important;
}

/* 3. LINKS E INTERAÇÕES */
body.dark-mode .nav-links a,
body.dark-mode .breadcrumb a,
body.dark-mode .faq-q,
body.dark-mode .hcard-link {
    color: var(--cream2) !important;
}

body.dark-mode .nav-links a:hover,
body.dark-mode .faq-q:hover,
body.dark-mode .hcard-link:hover {
    color: var(--yelow1) !important;
}

/* 4. ELEMENTOS DE TABELAS E CARDS (Removendo fundos brancos residuais) */
body.dark-mode .info-table tr:hover td,
body.dark-mode .info-table th,
body.dark-mode .doc-block,
body.dark-mode .related-card,
body.dark-mode .estatuto-item,
body.dark-mode .proj-item,
body.dark-mode .eco-card,
body.dark-mode .sol-card,
body.dark-mode .news-card,
body.dark-mode .cinfo-card {
    background-color: var(--navy2) !important;
    border-color: var(--navy3) !important;
}

/* 5. INPUTS (Garantindo que o usuário veja o que escreve) */
body.dark-mode input, 
body.dark-mode textarea, 
body.dark-mode select {
    background: var(--navy3) !important;
    color: var(--cream) !important;
    border: 1px solid var(--navy2) !important;
}

/* ── AJUSTE DE FONTES: CARDS E FIM DA PÁGINA ── */

/* 1. Descrição dos Projetos (Cinzas -> Cream2) */
body.dark-mode .proj-desc,
body.dark-mode .proj-item p,
body.dark-mode .news-excerpt,
body.dark-mode .eco-desc {
    color: var(--cream2) !important;
}

/* 2. Títulos dos Projetos (Pretos -> Cream) */
body.dark-mode .proj-name,
body.dark-mode .proj-item strong,
body.dark-mode .eco-name {
    color: var(--cream) !important;
}

/* 3. Ajuste para o H3 e P no fim da página (Estilos Inline) 
   Usamos seletores genéricos com !important para "vencer" o style do HTML */
body.dark-mode h3, 
body.dark-mode .prod-h3,
body.dark-mode section:last-of-type h3 {
    color: var(--cream) !important;
}

body.dark-mode p,
body.dark-mode .prod-p,
body.dark-mode section:last-of-type p {
    color: var(--cream2) !important;
}

/* 4. Garantia para textos que venham do HTML (Inline Styles) */
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color: #1A1814"],
body.dark-mode [style*="color: var(--text)"] {
    color: var(--cream) !important;
}

body.dark-mode [style*="color: #4A4840"],
body.dark-mode [style*="color: #8A8880"],
body.dark-mode [style*="color: var(--text2)"] {
    color: var(--cream2) !important;
}

#navbar .nav-actions a.nav-cta:hover,
a.nav-cta:hover {
    background-color: var(--yelow1) !important;
    color: var(--blue) !important; /* FORÇA o azul no texto */
    opacity: 1 !important;         /* Garante que não esteja transparente */
}

/* No Modo Escuro, usamos o Navy que é o seu azul mais forte */
body.dark-mode a.nav-cta:hover {
    color: var(--navy3) !important;
    background-color: var(--yelow1) !important;
}

body.dark-mode .faq-a {
    color: var(--cream2) !important;
    background-color: transparent; /* Garante que não herde fundos claros */
}

/* ── NAV LINKS ── */
.nav-links a {
  /* ... outras propriedades ... */
  transition: all var(--transition-slow); /* Alterado de .2s */
}

/* ── BOTÕES (Geral) ── */
.btn {
  /* ... outras propriedades ... */
  transition: all var(--transition-slow); /* Alterado de .22s */
}

/* ── WHATSAPP ICON ── */
.wathsappIcon svg {
  /* ... outras propriedades ... */
  transition: transform var(--transition-slow); /* Já estava 0.6s, mantido para consistência */
}

/* ── CARDS DE SOLUÇÕES (Página de Serviços) ── */
.sol-card {
  /* ... outras propriedades ... */
  transition: all var(--transition-slow); /* Alterado de .3s */
}

.sol-card::after {
  /* ... outras propriedades ... */
  transition: transform var(--transition-slow); /* Alterado de .3s */
}

/* ── NUMBERS & STATS ── */
.num-card {
  /* ... outras propriedades ... */
  transition: background var(--transition-slow); /* Alterado de .3s */
}

/* ── FAQ ── */
.faq-q {
  /* ... outras propriedades ... */
  transition: color var(--transition-slow); /* Alterado de .2s */
}

/* ── NEWS (Notícias) ── */
.news-card {
  /* ... outras propriedades ... */
  transition: all var(--transition-slow); /* Alterado de .3s */
}

/* ── ECOSYSTEM ── */
.eco-card {
  /* ... outras propriedades ... */
  transition: all var(--transition-slow); /* Alterado de .3s */
}

/* ── FUNDAÇÃO (Lista de Projetos) ── */
.proj-item {
  /* ... outras propriedades ... */
  transition: all var(--transition-slow); /* Alterado de .25s */
}

/* ── RELATED CARDS (Sidebar) ── */
.related-card {
  /* ... outras propriedades ... */
  transition: all var(--transition-slow); /* Alterado de .2s */
}

/* ── FORMULÁRIOS ── */
.btn-submit {
  /* ... outras propriedades ... */
  transition: all var(--transition-slow); /* Alterado de .25s */
}

/* 1. Ajuste a base do sub-menu para permitir animação */
.sub-menu {
  display: flex;             /* Deixe como flex por padrão */
  opacity: 0;                /* Começa invisível */
  visibility: hidden;        /* Fica "escondido" para o mouse não clicar sem querer */
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--blue3);
  border: 1px solid rgba(255, 239, 19,.15);
  border-radius: 10px;
  padding: 8px;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  z-index: 100;
  margin-top: 10px;          /* Um leve distanciamento para o efeito de subida */
  
  /* A MÁGICA: 0.6s de transição suave */
  transition: 
    opacity var(--transition-slow), 
    visibility var(--transition-slow), 
    transform var(--transition-slow);
  
  transform: translateY(10px); /* Começa um pouco abaixo para o efeito de subida */
}

/* 2. O estado de Hover (quando o mouse passa no pai) */
.nav-links .has-sub:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);   /* Sobe suavemente para a posição original */
}

/* 3. Links dentro do sub-menu também com 0.6s */
.sub-menu a {
  transition: all var(--transition-slow) !important;
}

/* Aplica a transição ao corpo do site e elementos de texto */
body {
  /* ... suas propriedades atuais ... */
  transition: var(--theme-transition);
}

/* Aplica à Navbar e ao Logo (que você mencionou ter fundo cream2) */
#navbar, #logo, .hcard, .news-card, .sol-card, footer {
  transition: var(--theme-transition), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Aplica especificamente às classes de texto e links que mudam no modo escuro */
.nav-links a, .footer-links a, .sec-h2, .sec-p, .faq-a {
  transition: var(--theme-transition);
}

body.dark-mode .prod-p strong,
body.dark-mode h4,
body.dark-mode .prod-h3,
body.dark-mode .prod-h4 {
    color: var(--cream) !important;
}

/* ── AJUSTE ESPECÍFICO: SIDEBAR CONTACT (DARK MODE) ── */

/* Altera o H4 e a div contact-row apenas dentro da sidebar-contact */
body.dark-mode .sidebar-contact h4,
body.dark-mode .sidebar-contact .contact-row {
    color: var(--text2) !important;
}

/* Caso queira que os links (telefone/email) também sigam essa cor ou herdem */
body.dark-mode .sidebar-contact .contact-row a {
    color: inherit; /* Faz o link usar a cor do pai (var(--text2)) */
    text-decoration: none;
}

body.dark-mode .sidebar-contact .contact-row a:hover {
    color: var(--yelow1) !important;
}

/* AJUSTE ESPECÍFICO PARA MOBILE (Telas menores que 768px) */
@media (max-width: 768px) {
    .nav-cta {
        font-size: 11px !important; /* Tamanho seguro para não quebrar */
        padding: 6px 12px !important;
        letter-spacing: -0.2px; /* Aproxima as letras para ganhar espaço */
        min-width: fit-content;
    }
}


/* --- RESPONSIVIDADE PARA CELULARES (Até 768px) --- */
@media (max-width: 768px) {
    
    /* 1. Ajuste da altura do slide para não cobrir o celular todo */
    .container_slide {
        height: 350px; /* Altura reduzida para mobile */
    }

    .section-topo-slide {
        height: 350px; /* Mantém a section com o mesmo tamanho do container */
        padding-top: 60px; /* Ajuste para o menu mobile se necessário */
    }

    /* 2. Redimensionamento das Setas (Menores e mais discretas) */
    .botaoDaDivEsquerdo, 
    .botaoDaDivDireito {
        width: 40px;
        height: 40px;
        font-size: 18px;
        background-color: rgba(55, 75, 112, 0.8); /* Um pouco mais sólido para facilitar o toque */
    }

    /* 3. Ajuste do Botão de Ação (Título sobre a imagem) */
    .btn-sobre-imagem {
        top: 15px;
        right: 15px;
        padding: 8px 15px;
        font-size: 14px; /* Fonte menor */
        border-radius: 12px;
    }

    /* 4. Ajuste da Legenda/Texto Inferior */
    .textoDaImagemTitulo {
        padding: 15px 20px;
        font-size: 12px; /* Fonte menor para caber mais texto */
        line-height: 1.3;
    }


    /* 4. Ajuste da Legenda/Texto Inferior */
    .textoDaImagemSub {
        padding: 15px 20px;
        font-size: 12px; /* Fonte menor para caber mais texto */
        line-height: 1.3;
    }


    /* 5. Ajuste da Seção de Texto (Hero Content) */
    .hero-content-area {
        padding: 40px 20px;
    }

    .hero-h1 {
        font-size: 28px; /* Título principal menor no mobile */
        line-height: 1.2;
    }

    .hero-p {
        font-size: 15px;
    }

    .hero-btns {
        flex-direction: column; /* Botões um em cima do outro no mobile */
        gap: 10px;
    }

    .btn {
        width: 100%; /* Botões ocupam a largura toda no mobile */
        justify-content: center;
    }
}


/* GRID E ÍCONES */
.cx-grid-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 100px;
    padding: 20px;
}

.cx-card-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-align: center;
}

.cx-icon-wrapper {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 18px;
    padding: 12px;
    transition: 0.3s;
}

.cx-card-box:hover .cx-icon-wrapper {
    box-shadow: 0 8px 20px rgba(55, 75, 112, 0.15);
    border-color: #ffef13;
}

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

.cx-badge-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: #374b70;
    background-color: #ffef13;
    padding: 4px 12px;
    border-radius: 20px;
    margin-top: 10px;
}

/* MODAL */
.cx-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(55, 75, 112, 0.9);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    animation: cxFadeIn 0.4s ease-out;
}

.cx-modal-body {
    background: #fff;
    width: 100%;
    max-width: 650px;
    max-height: 85vh;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    overflow-y: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    animation: cxSlideDown 0.4s ease-out;
}

.cx-btn-close {
    position: sticky;
    top: -20px;
    float: right;
    font-size: 35px;
    color: #374b70;
    cursor: pointer;
    z-index: 100;
}

/* CONTEÚDO INTERNO */
.cx-title-h3 { font-size: 26px; font-weight: 800; color: #374b70; margin-bottom: 5px; }
.cx-text-p { font-size: 15px; color: #666; margin-bottom: 20px; }
.cx-title-h4 { font-size: 17px; font-weight: bold; color: #374b70; margin-top: 20px; }

.cx-table-blue {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

.cx-table-blue th {
    background: #374b70;
    color: #ffef13;
    padding: 12px;
    text-align: left;
    font-size: 13px;
}

.cx-table-blue td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.cx-list {
    list-style: none;
    padding: 0;
}

.cx-list li::before {
    content: "•";
    color: #ffef13;
    margin-right: 8px;
    font-weight: bold;
}


/* --- KEYFRAMES (As regras da animação) --- */

@keyframes cxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cxSlideDown {
    from { 
        transform: translateY(-30px); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 12px; /* Opcional: para arredondar as bordas */
}

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


.video-wrapper2 {
    max-width: 700px;       /* Controla o quão "retangular" ele fica */
    margin: 40px auto;     /* Centraliza na horizontal e dá espaço em cima/baixo */
    padding: 0 20px;       /* Respiro lateral para não colar na borda do celular */
}

.video-container2 {
    position: relative;
    padding-bottom: 56.25%; /* Proporção padrão retangular (16:9) */
    height: 0;
    overflow: hidden;
    border-radius: 15px;    /* Bordas arredondadas para combinar com o seu site */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Sombra para dar profundidade */
    background: #000;
}

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

.cx-estudio-completo {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    line-height: 1.6;
}

/* LISTA HORIZONTAL */
.cx-lista-vertical {
    list-style: none;      /* Remove as bolinhas pretas padrão */
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-direction: column; /* Força os itens a ficarem um embaixo do outro */
    gap: 12px;             /* Espaço entre cada linha */
}

/* Cada item da lista */
.cx-lista-vertical li {
    display: flex;
    align-items: flex-start; /* Alinha a bolinha com a primeira linha do texto */
    font-size: 16px;
    color: #444;
    line-height: 1.4;
}

/* A bolinha amarela customizada */
.cx-lista-vertical li::before {
    content: "";           
    width: 5px;            
    height: 5px;           
    background-color: #ffef13; /* Amarelo CDL */
    border-radius: 50%;    
    margin-right: 12px;    
    margin-top: 8px;       /* Ajusta a altura da bolinha para alinhar com o texto */
    flex-shrink: 0;        /* Impede que a bolinha mude de formato */
}

.cx-text-p {
    margin-bottom: 15px;
    color: #444;
    font-size: 16px;
    text-align: justify;
}

.cx-destaque-final {
    margin-top: 30px;
    padding: 20px;
    border-left: 4px solid #ffef13;
    background-color: #f0f4f8;
    color: #374b70;
    font-weight: bold;
    font-style: italic;
}

/* FORÇA BRUTA MOBILE - Cole no final do arquivo */
@media (max-width: 768px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* Trava o container das logos para não vazar de jeito nenhum */
    .slider-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        display: block !important;
    }

    /* Se o menu sanduíche ou a nav estiverem flutuando para fora, isso corta */
    header, nav {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 768px) {

.partner-strip { 
    max-height: 12rem;
}
    
.partner-logos-track { 
    animation: scroll-loop 40s linear infinite; /* 20s controla a velocidade */
}
 

.plogo {
    width: 80px; /* Largura fixa para manter o padrão */
    height: 40px;
    background: var(--cream);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    flex-shrink: 0; /* Impede que a logo "esmague" */
    filter: grayscale(0%); /* Opcional: logos em cinza */
}

}

body.dark-mode .partner-strip  { background-color: var(--navy3); }

body.dark-mode .cx-lista-vertical li  { color: var(--cream2); }

body.dark-mode .cx-destaque-final  { background-color: var(--navy3); }

body.dark-mode .breadcrumb  { background-color: var(--navy); }

/* ── AJUSTE RESPONSIVO DO MENU (ACOMPANHANDO O JS) ── */
@media (max-width: 960px) {
    
    /* 1. Garante que o container pai não trave a expansão dos filhos */
    nav#navbar {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 2. Configura a UL padrão para ficar oculta na inicialização */
    ul#nav-links.nav-links {
        display: none !important; /* Começa oculto */
        flex-direction: column !important;
    }

    /* 3. O SEGREDO: Só desce e toma tamanho se tiver a classe '.active' que seu JS injeta */
    ul#nav-links.nav-links.active {
        display: flex !important;          
        position: fixed !important;        /* Flutua por cima do site */
        top: 70px !important;              /* Cola logo abaixo do topo do site */
        left: 0 !important;
        width: 100% !important;
        
        /* Força a descida do menu de forma fluida */
        height: 75vh !important;           /* Ocupa 75% da altura da tela do celular */
        overflow-y: auto !important;       /* Permite rolar interno se o conteúdo for longo */
        z-index: 99999 !important;         /* Fica na frente de tudo */
    }

    /* Garante o alinhamento correto dos itens em blocos verticais */
    ul#nav-links.nav-links li {
        display: block !important;
        width: 100% !important;
        clear: both !important;
    }

    /* 4. CONTROLE DOS SUBMENUS (.sub-menu) baseado no seu clique do JS */
    /* Por padrão ocultamos os submenus no mobile */
    ul#nav-links.nav-links li.has-sub .sub-menu {
        display: none !important;
        position: static !important; /* Tira o absoluto do desktop para não quebrar o layout */
    }

    /* Quando você clica no link pai, o JS joga a classe '.sub-open' na li. Ativamos o submenu! */
    ul#nav-links.nav-links li.has-sub.sub-open .sub-menu {
        display: block !important;   /* Revela o submenu fazendo ele empurrar o resto para baixo */
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}

@media (max-width: 960px) { 
    #logo { max-width: 7rem;
    max-height: 2rem; }
    #logo img {max-width: 5rem;}
}

@media (max-width: 960px) {
    .num-val{ font-size: 26px; }
}

/* RESOLUÇÃO GLOBAL DE ESPAÇAMENTO MOBILE — TODAS AS PÁGINAS */
@media (max-width: 960px) {

    /* 1. Garante que o topo tenha a mesma altura física em todo o site */
    nav#navbar {
        position: relative !important;
        height: 70px !important; 
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. ATENÇÃO: Zera absolutamente QUALQUER elemento que venha logo após o navbar */
    nav#navbar + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 3. Caça os contêineres internos e limpa as margens superiores */
    .root-wrapper > *, 
    main, 
    #content, 
    .container,
    [class*="page-"], 
    [class*="pagina-"] {
        margin-top: 0 !important;
    }

    /* 4. Garante que a primeira section ou div dentro do corpo da página cole no topo */
    main > *:first-child,
    #content > *:first-child,
    .root-wrapper > *:not(#navbar):first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* RESOLUÇÃO COMPLETA PARA PÁGINAS INTERNAS NO MOBILE */
@media (max-width: 960px) {

    /* 1. Alvo direto na div que envelopa a página e no breadcrumb */
    .page, 
    #page-fundacao, 
    [id^="page-"] {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 2. Zera as margens e paddings do breadcrumb que estão empurrando o topo */
    .breadcrumb {
        margin-top: 0 !important;
        padding-top: 15px !important; /* Ajuste esse valor se quiser afastar um pouquinho o texto do topo */
        margin-bottom: 0px !important;
    }

    /* 3. Garante que o container de conteúdo não tenha espaçamentos fantasmas */
    .page-hero {
        margin-top: 0 !important;
    }
}

/* ── FORMATADO DE HERO INTERNO PARA MOBILE (EXCETO HOME) ── */
@media (max-width: 960px) {

    /* 1. Transforma o container em uma coluna e remove o padding excessivo */
    .page-hero {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 0 32px 0 !important; /* Remove padding superior e lateral para a imagem colar nas bordas */
        background: var(--blue3) !important; /* Garante que a caixa de texto de baixo tenha o fundo original */
        overflow: visible !important;
    }

    /* 2. Força a imagem de fundo a virar um bloco retangular físico no topo */
    .page-hero-bg-image {
        position: relative !important;   /* Sai do modo absoluto (atrás do texto) */
        order: -1 !important;            /* Garante que ela seja o PRIMEIRO elemento no topo */
        width: 100% !important;
        
        /* FORMATO RETANGULAR PROPORCIONAL: 16:9 (padrão TV/Monitor) ou escolha 21:9 se quiser mais fina */
        aspect-ratio: 16 / 9 !important; 
        height: auto !important;
        
        opacity: 1 !important;           /* Tira a transparência para o usuário ver a foto nitidamente */
        margin-bottom: 24px !important;  /* Empurra os textos para baixo criando um respiro */
    }

    #page-hero-bg-image-entidade {

        background-image: url('img/cards/entidade/entidadeHero_2.webp');

    }

    /* 3. Devolve o padding lateral apenas para os textos não colarem na borda da tela */
    .page-hero-tag, 
    .page-hero h1, 
    .page-hero-sub,
    .page-hero-actions {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* 4. Ajuste fino nos textos para o novo fundo escuro sem a imagem por trás */
    .page-hero h1 {
        font-size: 28px !important; /* Confortável para telas de celular */
        margin-top: 8px !important;
        margin-bottom: 10px !important;
    }

    .page-hero-sub {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px;
    }

    /* Remove os círculos decorativos do background (::after) no mobile para limpar o visual */
    .page-hero::after {
        display: none !important;
    }
}

/* ── ADAPTAÇÃO PROPORCIONAL DO SLIDER DA HOME NO MOBILE ── */
@media (max-width: 960px) {

    /* 1. Remove a altura vertical fixa (vh) e ativa a proporção retangular automática */
    .section-topo-slide {
        height: auto !important; /* Libera o tamanho fixo da tela */
        display: block !important;
    }

    .container_slide {
        /* Força o container a manter o formato retangular de monitor/TV */
        aspect-ratio: 16 / 9 !important; 
        height: auto !important;
        width: 100% !important;
    }

    /* 2. Garante que os slides acompanhem o novo formato físico proporcional */
    .meuSlide {
        height: 100% !important;
        width: 100% !important;
    }

    /* 3. A imagem se ajusta perfeitamente sem distorcer nenhuma face ou elemento */
    .imgSlide {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Preenche o retângulo proporcional sem achatar */
    }

    /* ── REDUÇÃO DE COMPONENTES INTERNOS PARA NÃO ARRUINAR O LAYOUT ── */

    /* Ajusta as setas para as laterais do novo retângulo menor */
    .botaoDaDivEsquerdo, 
    .botaoDaDivDireito {
        width: 20px !important;
        height: 20px !important;
        font-size: 8px !important;
        top: 50% !important;
    }

    /* Reduz o botão flutuante de canto para caber na nova área */
    .btn-sobre-imagem {
        top: 15px !important;
        right: 15px !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
    }

    /* Reduz a caixa de texto inferior para que ela não engula o slide todo */
    .textoDaImagemTitulo {
        padding: 12px 20px !important;
        font-size: 14px !important; /* Tamanho confortável para leitura rápida em celular */
        line-height: 1.3 !important;
    }
}

/* Modal Diretoria e GRID */

/* ==========================================================================
   Painel de Destaque Superior (Ajustado sem bordas/sombras na foto)
   ========================================================================== */
.modal-overlay.active-inline {
  display: block; 
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 32px;
}

.modal-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1100px;
  border-radius: 12px;
  background-color: var(--cream2);
  overflow: hidden;
  margin: 0 auto;
  border: none !important; 
  box-shadow: none !important; 
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.dark-mode .modal-container { 
  background: var(--navy2); 
}

.modal-container.changing {
  opacity: 0;
  transform: translateY(-4px);
}

.modal-img-container {
  flex: 0 0 320px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; 
  border: none !important;
}

.modal-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none !important;
}

.modal-info {
  padding: 40px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.modal-info h3 {
  margin: 0 0 10px 0;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--yelow2);
  line-height: 1.2;
}

.modal-info p#modalCargo {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text, #f5f5dc);
  opacity: 0.95;
  width: 100%;
  font-weight: 400;
}

.modal-texto-extra {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text2);
  opacity: 0.8;
}

/* ==========================================================================
   Grid Inferior (Classes Atualizadas de .estatutos para .diretoria-grid)
   ========================================================================== */
.grid-title {
  font-size: 12px;
  color: var(--text-muted, #718096);
  letter-spacing: 1px;
  margin: 24px 0 12px 0;
  font-weight: 600;
}

.diretoria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  width: 100%;
}

.membro-item {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

body.dark-mode .membro-item { 
  background: var(--navy2); 
}

.card-img-wrapper {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

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

.membro-item:hover .card-img-wrapper img {
  transform: scale(1.04);
}

.card-text-block {
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 4px;
}

.membro-num {
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
}

.member-name { 
  font-size: 15px; 
  font-weight: 600; 
  color: #2d3748; 
}
body.dark-mode .member-name { color: #f7fafc; }

.member-role { 
  font-size: 13px; 
  color: #718096; 
}

.membro-item.active {
  box-shadow: 0 0 0 3px rgb(255, 239, 19,.25);
  transform: translateY(-4px);
}

@media (max-width: 768px) {
  .modal-container { flex-direction: column; }
  .modal-img-container { width: 100%; height: 300px; }
  .modal-info { padding: 24px; align-items: center; text-align: center; }
}

/* CONSELHO DA DIRETORIA */

/* Container Geral da Seção */
.conselhos-section {
  width: 100%;
  max-width: 1140px;
  margin: 40px auto;
  padding: 0 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Título Principal com Linha Dourada */
.sec-label-linha {
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.sec-label-linha::before {
  content: "";
  width: 40px;
  height: 3px;
  background-color: var(--yelow2); /* Tom dourado fiel à imagem */
  display: inline-block;
  flex-shrink: 0;
}

/* Subtítulo */
.conselhos-subtitulo {
  font-size: 16px;
  color: var(--text2);
  margin: 8px 0 32px 0;
}

/* Grid de 3 Colunas Simétricas */
.conselhos-tab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

/* Card com fundo creme institucional */
.conselho-tab-card {
  background: var(--cream); /* Cor de fundo creme suave */
  border-radius: 12px;
  border: 1px solid rgba(196, 167, 71, 0.2);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* Cabeçalho do Card */
.conselho-tab-header {
  padding: 24px 24px 16px 24px;
}

.conselho-tab-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
}

/* Lista / Linhas da Tabela */
.conselho-tab-lista {
  list-style: none;
  padding: 0 0 16px 0;
  margin: 0;
}

/* Linhas com espaçamento e divisória horizontal sutil */
.conselho-tab-lista li {
  display: flex;
  align-items: flex-start;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  color: #2d3748;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Linha divisória */
  line-height: 1.4;
}

/* Remove a borda inferior do último elemento da lista */
.conselho-tab-lista li:last-child {
  border-bottom: none;
}

/* Siglas Alinhadas à Esquerda (FIS, CON, NAT) */
.badge-sigla {
  font-size: 13px;
  font-weight: 600;
  color: var(--yelow2); /* Dourado escuro com excelente contraste */
  letter-spacing: 0.5px;
  width: 45px; /* Trava a largura da sigla para alinhar os nomes perfeitamente */
  flex-shrink: 0;
  display: inline-block;
}

/* Suporte para Dark Mode (Opcional, se integrado ao seu sistema) */
body.dark-mode .sec-label-linha { color: #ffffff; }
body.dark-mode .conselhos-subtitulo { color: #a0aec0; }
body.dark-mode .conselho-tab-card {
  background: var(--navy2);
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .conselho-tab-header h3 { color: #ffffff; }
body.dark-mode .conselho-tab-lista li {
  color: #e2e8f0;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .badge-sigla { color: #dfc46c; }

/* Responsive Layout */
@media (max-width: 1024px) {
  .conselhos-tab-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .conselhos-tab-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sec-label-linha { font-size: 20px; }
  .conselho-tab-lista li { padding: 12px 20px; }
}

/* Opcional: Efeito de clique nos itens da lista */
.estatuto-item {
  cursor: pointer;
}

/* PRIMEIROS PRESIDENTES ACCORDION */

/* Herda todo o design visual do item original, mas desativa interações de clique */
.estatuto-item-estatico {
  /* Se você usa um arquivo CSS separado, esta linha abaixo faz ele clonar o visual anterior: */
  padding:16px 20px;background:var(--cream);border:1px solid var(--cream2);border-radius:8px;font-size:14px;color:var(--text2);line-height:1.6;display:flex;gap:12px;align-items:flex-start
}

body.dark-mode .estatuto-item-estatico {
    background:var(--navy2);
    color: var(--cream2);
    border: none;
}

/* Caso você use CSS Puro, adicione esta regra para garantir que eles fiquem iguais visualmente, mas sem o cursor de mãozinha */
.estatuto-item-estatico {
  cursor: default !important; /* Remove a mãozinha de clique */
  pointer-events: none;       /* Garante que o JS ignore completamente o elemento */
}

/* Configuração base da lista para suportar a transição de altura */
/* 1. Altere a altura máxima inicial para caber os 7 itens */
#lista-presidentes {
  display: flex;
  flex-direction: column;
  transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  
  /* AUMENTADO: Cada item tem ~56px. Para 7 itens + gaps, usamos 430px */
  max-height: 952px; 
}

/* 2. Altere de (n+4) para (n+8) para começar a esconder a partir do 8º item */
#lista-presidentes .estatuto-item-estatico:nth-child(n+17) {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 3. Altere também na regra do estado aberto para o mesmo número (n+8) */
#lista-presidentes.aberto .estatuto-item-estatico:nth-child(n+17) {
  opacity: 1;
  transition: opacity 0.5s ease 0.2s; 
}

/* Estado Aberto: Libera a altura máxima e ativa a opacidade de todos */
#lista-presidentes.aberto {
  /* Coloque um valor alto o suficiente para caber todos os nomes (ex: 2000px) 
     O CSS vai abrir apenas até o tamanho real do conteúdo, mas a transição precisa de um teto */
  max-height: 2000px; 
}

#lista-presidentes.aberto .estatuto-item-estatico:nth-child(n+4) {
  opacity: 1;
  /* Um pequeno delay para o texto só clarear depois que a caixinha começar a expandir */
  transition: opacity 0.5s ease 0.2s; 
}

/* Estilização do botão para combinar com o visual institucional */
.btn-expandir {
  display: block;
  margin: 16px auto 0 auto;
  padding: 8px 24px;
  background-color: transparent;
  color: var(--yelow2); /* Ou a cor de destaque do seu tema */
  border: 1px solid var(--yelow2);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.8s ease;
}

.btn-expandir:hover {
  background-color: var(--yelow2);
  color: var(--blue3);
}

/* FIM PRESIDENTES ACCORDION */

/* SOLUCOES CERTIFICADO DIGITAL */

/* Regras aplicadas exclusivamente a esta seção de certificado */
#secBannerCertificado {
    position: relative; /* Necessário para prender a div de fundo absoluta aqui dentro */
    width: 100%;
    min-height: 330px;  /* Altura mínima para o banner respirar */
    box-sizing: border-box;
    overflow: hidden;   /* Garante que a imagem não escape da seção */
    
    /* Adicionado padding para dar respiro interno nas bordas superior e inferior */
    padding: 60px 40px; 
}

/* Controla a imagem de fundo apenas desta seção */
#secBannerCertificado .sec-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Camada de trás */
    
    background-image: url('img/certificadoDigital/certificadoDigitalHero.webp');
    background-repeat: no-repeat;
    background-position: right center; /* Mantém a modelo e os gráficos visíveis ao encolher a tela */
    background-size: cover;            /* Ocupa 100% da área da div, eliminando o creme do fundo */
}

/* Garante que o conteúdo fique por cima da imagem */
#secBannerCertificado .sec-content {
    position: relative;
    z-index: 2; /* Camada da frente */
    pointer-events: none; /* Evita sobreposição invisível bloqueando cliques */
}

/* Container exclusivo para centralizar e posicionar este botão específico */
#secBannerCertificado .certificado-btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    
    /* CONTROLADOR DE ALTURA: Aumente este valor para jogar o botão mais para baixo */
    margin-top: 55px !important; 
}

/* Classe exclusiva do botão de Certificado Digital */
.certificado-btn-action {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--blue); /* Aplica o azul do seu escopo */
    color: var(--yelow2);      /* Força o texto branco puro */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;         /* Remove o sublinhado padrão de links */
    border-radius: 4px;            
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.8s ease;     
    text-align: center;
}

/* Efeito Hover isolado */
.certificado-btn-action:hover {
    background-color: var(--yelow2);     /* Ajuste para o tom de hover desejado */
    transform: translateY(-2px);   
    color: var(--blue2);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Efeito de Clique isolado */
.certificado-btn-action:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}


/* ==========================================================
   CONFIGURAÇÃO RESPONSIVA PARA CELULAR (MOBILE)
   ========================================================== */

@media (max-width: 768px) {
    

    /* Transforma a seção em uma coluna flexível */
    #secBannerCertificado {
        display: flex;
        flex-direction: column;
        padding: 0 !important; /* Remove o padding para o bloco de texto e a imagem colarem nas bordas */
        min-height: auto;      /* Desfaz a altura mínima de desktop */
        background: var(--blue3) !important; /* Garante que a seção inteira herde a cor base */
    }

    /* Transforma a div de fundo em um bloco visível ACIMA do texto */
    #secBannerCertificado .sec-bg {
        position: relative;    /* Sai do modo absoluto para ocupar espaço físico */
        width: 100%;
        height: 300px;         /* Altura ideal para o banner não achatar no celular */
        z-index: 1;
        background-image: url(img/certificadoDigital/certificadoDigitalHero2.webp);
        /* Ajusta o foco da imagem para o centro para não cortar o rosto da modelo no mobile */
        background-position: center center; 
        background-size: cover;
    }

    /* Bloco do conteúdo (texto e botão) que fica ABAIXO da imagem */
    #secBannerCertificado .sec-content {
        position: relative;
        width: 100%;
        padding: 40px 24px;    /* Padding interno do texto no celular */
        box-sizing: border-box;
        background-color: var(--blue3); /* Aplica a cor de fundo solicitada */
        z-index: 2;
    }

    /* Ajuste fino nos espaçamentos dos textos para telas menores */
    #secBannerCertificado .sec-h2 {
        font-size: 22px;       /* Reduz um pouco o tamanho da fonte para não quebrar muitas linhas */
        line-height: 1.3;
    }

    /* Ajusta o espaçamento do botão no mobile */
    #secBannerCertificado .certificado-btn-wrap {
        margin-top: 32px !important; /* Mantém uma distância confortável do texto */
        width: 100%;
    }

    /* Garante que o botão ocupe uma largura boa ou total no celular se necessário */
    .certificado-btn-action {
        width: 100%;           /* O botão vira bloco de largura total para facilitar o clique com o polegar */
        max-width: 300px;      /* Mas limita para não ficar exageradamente gigante */
        box-sizing: border-box;
    }
}


/* FIM SOLUCOES CERTIFICADO DIGITAL */

/* SLIDE_SHOW_GALERIA */

/* ── CONFIGURAÇÕES GERAIS DA GALERIA ── */
        .slideShowContainerGaleria {
            max-width: 1000px;
            position: relative;
            margin: auto;
            font-family: sans-serif;
            user-select: none;
            border-radius: 20px;
            border-radius: 15px; /* Escolha o tamanho do arredondamento */
            overflow: hidden;    /* Corta o conteúdo que tentar passar da borda */
        }

        /* Esconde as imagens por padrão */
        .mySlidesGaleria {
            display: none;
            position: relative;
        }

        .mySlidesGaleria img {
            width: 100%;
            height: 350px;
            object-fit: cover;
            vertical-align: middle;
        }

        /* Contador de páginas (Ex: 1 / 4) */
        /* .numberTextGaleria {
            color: #f2f2f2;
            font-size: 14px;
            padding: 12px 16px;
            position: absolute;
            top: 0;
            left: 0;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
        } */

        /* Botões de Avançar e Voltar (Setas) */
        .prevGaleria, .nextGaleria {
            cursor: pointer;
            position: absolute;
            top: 40%;
            width: auto;
            padding: 16px;
            margin-top: -50px;
            color: white;
            font-weight: bold;
            font-size: 24px;
            border-radius: 0 3px 3px 0;
            user-select: none;
            transition: 0.6s ease;
        }

        .nextGaleria {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        .prevGaleria:hover, .nextGaleria:hover {
            background-color: rgb(55, 75, 112,.8);
        }

        /* Barra de Título (Abaixo da imagem grande) */
        .captionContainerGaleria {
            text-align: center;
            background-color: var(--blue);
            padding: 18px;
            color: white;
        }

        body.dark-mode .captionContainerGaleria { background-color: var(--navy2); }

        .captionContainerGaleria p {
            margin: 0;
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        /* ── SEÇÃO DAS MINIATURAS (THUMBNAILS) ── */
        .rowThumbnailsGaleria {
            display: flex;
            width: 100%;
            background-color: #222;
        }

        /* Container de cada miniatura */
        .columnGaleria {
            flex: 1;
            position: relative;
            cursor: pointer;
            height: 80px;
            overflow: hidden;
        }

        .columnGaleria img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            vertical-align: middle;
            transition: transform 0.3s ease;
        }

        /* Camada Azul Opaca sobre as miniaturas */
        .columnGaleria::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(55, 75, 112,.4); /* Azul escuro opaco */
            transition: background-color 0.3s ease;
            z-index: 1;
        }

        /* Efeito Hover: Revela a foto original ao passar o mouse */
        .columnGaleria:hover::after {
            background-color: rgba(0, 0, 0, 0);
        }

        .columnGaleria:hover img {
            transform: scale(1.05);
        }

        /* Estado Ativo: Remove o azul da foto que está ativa na tela */
        .columnGaleria.slideActiveGaleria::after {
            background-color: rgba(0, 0, 0, 0);
            border-bottom: 4px solid var(--yelow2);
        }


        .img-sec-label {
        display: inline-block; /* Ou 'block' se quiser que ocupe a linha toda */
        max-width: 150px;      /* Defina a largura máxima ideal para a sua logo */
        height: auto;          /* Mantém a proporção da imagem sem distorcer */
        vertical-align: middle;
        background-color: var(--cream2);
        padding: 12px;
        border-radius: 8px;
}

.sec-label.sem-before::before {
    content: none !important;
    display: none !important;
}

/* Container principal do depoimento posicionado no canto inferior esquerdo */
.testimonial-box-slide {
  position: absolute;
  bottom: 2%;  /* Distância da borda inferior do slide */
  left: 6vw;    /* Distância da borda esquerda do slide */
  z-index: 10;   /* Garante que fique acima da imagem de fundo */
  
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 600px; 
  background-color: transparent; 
   
  border-radius: 8px; 
  overflow: hidden;
  box-sizing: border-box;

  /* Efeito opcional que ajuda MUITO em fundos claros/detalhados */
  
}

.testimonial-box-slide .testimonial-header {
  padding: 24px 36px;
  background-color: transparent;
}

.testimonial-box-slide .testimonial-name {
  margin: 0 0 2px 0;
  color: var(--blue); 
  font-size: 36px;
  font-weight: 700;
  
  /* Sombra escura para destacar a fonte clara */
  text-shadow: 2px 2px 8px rgb(163, 163, 163);
}

.testimonial-box-slide .testimonial-company {
  color: var(--cream2); 
  font-size: 27px;
  display: block;
  
  /* Sombra escura suave */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.testimonial-box-slide .testimonial-body {
  padding: 16px 18px;
  border-top: 1px solid rgba(83, 113, 168, 0.8); 
  /* Adicionado um fundo ligeiramente escuro no corpo para ajudar na leitura se o fundo for muito branco */
  background-color: transparent; 
}

.testimonial-box-slide .testimonial-body p {
  margin: 0;
  color: var(--cream2); 
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  
  /* Sombra projetada para garantir a leitura do texto longo */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}


@media (max-width: 768px) {
  .testimonial-box-slide {
    position: absolute;
    bottom: 2vw;       /* Distância da base proporcional à tela */
    left: 3vw;         /* Distância da esquerda proporcional à tela */
    width: 50vw;       /* Ocupa 75% da largura da tela, sem estourar */
    max-width: none;   
    border-radius: 1.5vw; /* Cantos arredondados responsivos */
    
    z-index: 9999 !important; 
    display: block !important;
  }

  .testimonial-box-slide .testimonial-header {
    padding: 2vw 3vw; /* Espaçamento interno que diminui em telas menores */
  }

  .testimonial-box-slide .testimonial-name {
    font-size: 3vw;   /* Fonte acompanha o tamanho do slide */
    margin: 0 0 0.5vw 0;
    text-shadow: 1px 1px 2px rgb(163, 163, 163);
  }

  .testimonial-box-slide .testimonial-company {
    font-size: 2.2vw; /* Fonte acompanha o tamanho do slide */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }

  .testimonial-box-slide .testimonial-body {
    padding: 2vw 3vw;
    border-top: 1px solid rgba(83, 113, 168, 0.5);
  }

  .testimonial-box-slide .testimonial-body p {
    font-size: 2.4vw; /* Texto do depoimento perfeitamente proporcional */
    line-height: 1.3;  
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
}

/* botao verde area do associado dark mode */

/* Substitua ".dark-mode" pela classe exata que seu JS usa no body/html */
/* Forçamos o seletor grudando o body à classe e garantindo a leitura */
body.dark-mode a.nav-cta.verde {
    background: var(--green) !important; 
    color: var(--cream2) !important; /* Agora o 'a.nav-cta.verde' quebra o vínculo com o azul */
    filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, .8)) !important;
}

body.dark-mode a.nav-cta.verde:hover {
    background: var(--green) !important; /* Se quiser mudar o tom no hover, use var(--green2) aqui */
    color: var(--cream) !important; 
}

body.dark-mode .related-name{color: var(--cream2);}

/* ==========================================================================
   MODAL DE ENVIO DE E-MAIL (Isolado em camelCase)
   ========================================================================== */
.modalAvisoFormEmail {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fundo escurecido um pouco mais elegante */
    display: flex; 
    align-items: center;
    justify-content: center; 
    z-index: 9999;
    padding: 15px; /* Margem de segurança para telas pequenas */
}

.modalContentFormEmail {
    background: #fff; 
    padding: 30px; 
    border-radius: 8px; 
    max-width: 400px;
    width: 100%; 
    text-align: center; 
    position: relative; 
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

.modalCloseFormEmail {
    position: absolute; 
    top: 10px; 
    right: 15px; 
    font-size: 28px;
    cursor: pointer; 
    color: #aaa; 
    transition: 0.2s;
    line-height: 1;
}

.modalCloseFormEmail:hover { 
    color: #333; 
}

/* --- AJUSTE PARA CELULARES (Telas até 480px) --- */
@media (max-width: 480px) {
    .modalContentFormEmail {
        padding: 20px 15px; /* Reduz o espaçamento interno para sobrar espaço pro texto */
        border-radius: 12px; /* Visual levemente mais mobile-friendly */
    }
    
    .modalCloseFormEmail {
        top: 8px;
        right: 12px;
        font-size: 32px; /* Aumenta o 'X' um pouco para facilitar o clique com o dedo */
    }
}