:root {
    /* PALETA ORIGINAL TECHRIO */
    --brand-black: #0f1112;
    --brand-blue: #085ea5;
    --brand-blue-deep: #053b68;
    
    /* PONTO DE LUZ: CIANO TECH (EXCLUSIVIDADE) */
    /* Mantivemos os nomes das variáveis para o HTML continuar funcionando perfeitamente */
    --accent-violet: #00C2EE; 
    --violet-glow: rgba(0, 194, 238, 0.25);
    --violet-glow-strong: rgba(0, 194, 238, 0.5);
    
    --white: #ffffff;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--brand-black); color: var(--white); overflow-x: hidden; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 25px; }
.section-padding { padding: 120px 0; }

/* --- BACKGROUNDS E EFEITOS --- */
.bg-premium { 
    background: radial-gradient(circle at top right, var(--brand-blue-deep) 0%, var(--brand-black) 60%);
}

.glow-sphere {
    position: absolute; width: 500px; height: 500px;
    background: var(--accent-violet);
    filter: blur(200px); opacity: 0.15; z-index: 0;
    border-radius: 50%; pointer-events: none;
}

/* --- COMPONENTES VALIDADOS --- */
.btn-outline-violet { 
    border: 1px solid var(--accent-violet); 
    color: white; padding: 16px 35px; border-radius: 50px;
    text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    font-size: 12px; display: inline-flex; align-items: center; gap: 10px; justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: var(--violet-glow); /* Corrigido para variável */
    cursor: pointer; position: relative; z-index: 2;
}
.btn-outline-violet:hover { 
    background: var(--accent-violet); 
    box-shadow: 0 0 30px var(--violet-glow-strong);
    transform: scale(1.05); border-color: transparent;
}

.accent-dot { 
    width: 8px; height: 8px; background: var(--accent-violet); 
    display: inline-block; border-radius: 50%; margin-left: 8px; 
    box-shadow: 0 0 15px var(--accent-violet);
}

.glass-panel {
    background: var(--glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
}

/* --- 1. HEADER --- */
header { 
    padding: 20px 0; background: rgba(15, 17, 18, 0.7);
    backdrop-filter: blur(15px); border-bottom: 1px solid var(--glass-border);
    position: fixed; width: 100%; top: 0; z-index: 1000;
}
.nav-wrapper { display: flex; justify-content: space-between; align-items: center; }
.nav-links { display: flex; align-items: center;}
.nav-links a.link-item { color: white; text-decoration: none; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-left: 35px; opacity: 0.6; transition: 0.3s; }
.nav-links a.link-item:hover { opacity: 1; color: var(--accent-violet); }

.nav-links .btn-outline-violet {
    margin-left: 35px;
}

/* --- 2. HERO SPLIT PREMIUM (DOBRA 1) --- */
/* --- NOVO HERO DA HOME (COM IMAGEM DE FUNDO) --- */
.hero-home {
    position: relative;
    min-height: 90vh; /* Mantém a altura imponente que a Home exige */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinhado à esquerda na Home */
    background-image: linear-gradient(to right, rgba(11, 13, 14, 0.95) 0%, rgba(11, 13, 14, 0.4) 100%), 
                      url('../images/techrio-home-hero');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efeito Parallax sutil */
    padding-top: 80px;
}

.hero-home-content {
    max-width: 700px;
    z-index: 2;
    position: relative;
}

.hero-home h1 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -2px;
}

.hero-home p {
    font-size: 18px;
    opacity: 0.7;
    line-height: 1.8;
    margin-bottom: 40px;
}

.hero-home-botoes {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap;
}

.link-parceiro {
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    opacity: 0.7;
}

.link-parceiro:hover {
    opacity: 1;
    color: var(--accent-violet);
}

/* Responsividade da Home */
/* Responsividade da Home */
@media (max-width: 992px) {
    .hero-home { 
        justify-content: center; 
        text-align: center; 
        /* FIX iOS/Safari: Parallax buga no mobile, então voltamos para scroll normal */
        background-attachment: fixed;
        background-position: 70% center;
    }
    
    .hero-home-content {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza a tag, título e texto */
    }

    .hero-home h1 { 
        font-size: 46px; 
        letter-spacing: -1px; /* Suaviza o espaçamento na tela menor */
    }
    
    .hero-home-botoes { 
        justify-content: center; 
    }
}

@media (max-width: 600px) {
    .hero-home { 
        min-height: 85vh; /* Ajuste suave para a barra nativa do celular não comer o conteúdo */
        padding-top: 120px; /* Mais respiro para o header fixo não encostar na Tag */
        padding-bottom: 60px;
    }
    
    .hero-home h1 { 
        font-size: 38px; 
        line-height: 1.2; 
    }
    
    /* Remove a quebra de linha forçada no celular para o texto fluir naturalmente */
    .hero-home h1 br {
        display: none; 
    }
    
    .hero-home p { 
        font-size: 16px; 
        line-height: 1.6; 
        margin-bottom: 30px; 
    }

    /* Empilha os botões para melhor UX e área de clique */
    .hero-home-botoes { 
        flex-direction: column; 
        width: 100%;
        gap: 20px;
    }
    
    .hero-home-botoes .btn-outline-violet {
        width: 100%; 
        justify-content: center; /* Deixa o texto e o ícone perfeitamente no meio */
    }
    
    .hero-home-botoes .link-parceiro {
        padding: 10px; /* Aumenta a área de toque para o dedão */
    }
}

/* --- 3. PARCEIROS VIP (DOBRA 2) --- */
.partners { padding: 40px 0; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); background: rgba(0,0,0,0.2); }
.partner-grid { display: flex; justify-content: space-between; align-items: center; opacity: 0.3; flex-wrap: wrap; gap: 30px; }
.partner-grid svg { height: 30px; }

/* --- TEMA AZUL CORPORATIVO (MODIFICADOR) --- */
.theme-blue {
    --accent-violet: var(--brand-blue);
    --violet-glow: rgba(8, 94, 165, 0.15);
    --violet-glow-strong: rgba(8, 94, 165, 0.4);
    border-color: var(--brand-blue) !important;
}

/* --- 4. CARDS DE SOLUÇÃO (DOBRA 3) --- */
.grid-premium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.card-premium { padding: 50px 40px; transition: 0.4s; position: relative; overflow: hidden; }
.card-premium:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--accent-violet); transform: translateY(-10px); }
.card-premium::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, var(--violet-glow) 0%, transparent 70%); opacity: 0; transition: 0.5s; pointer-events: none; }
.card-premium:hover::before { opacity: 0.3; }
.icon-svg { width: 45px; height: 45px; color: var(--accent-violet); margin-bottom: 25px; }

/* =========================================
   ECOSSISTEMA / CARDS DUPLOS (MOBILE)
   ========================================= */

@media (max-width: 992px) {
    /* 1. Transforma o Grid de 2 colunas para 1 coluna empilhada */
    #solucoes > div:nth-child(2) {
        grid-template-columns: 1fr !important; /* Força 1 coluna em tablets/celulares */
        gap: 30px !important;
        margin: 0 20px;
    }
}

@media (max-width: 600px) {
    /* 2. Ajustes de espaçamento do Título Principal */
    #solucoes h2 {
        font-size: 32px !important; /* Diminui de 42px para 32px */
    }
    
    #solucoes > div:first-child p {
        font-size: 16px !important;
        padding: 0 10px; /* Evita que o subtítulo grude nas bordas da tela */
    }

    /* 3. Ajuste do Container dos Cards (Glass Panels) */
    #solucoes .glass-panel {
        padding: 60px 25px 30px !important; /* Aumenta o padding no topo (60px) para afastar a tag do título */
    }

    /* 4. Ajuste das Tags ("Para Você..." / "Programa...") */
    #solucoes .glass-panel > div:first-child {
        width: 100%; /* Faz a tag ocupar a largura toda do card */
        text-align: center;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-radius: 24px 24px 0 0 !important; /* Arredonda só o topo acompanhando o card */
        left: 0;
        right: 0;
        top: 0;
        padding: 12px 10px !important; /* Diminui um pouco a altura para ficar mais elegante */
    }

    /* 5. Ajustes de Tipografia Interna dos Cards */
    #solucoes .glass-panel h3 {
        font-size: 24px !important;
        text-align: center; /* Centraliza o título no celular */
    }

    #solucoes .glass-panel > p {
        text-align: center; /* Centraliza o parágrafo descritivo */
        font-size: 14px !important;
    }

    /* 6. Ajuste da Lista de Benefícios (Premium List) */
    .premium-list li {
        align-items: flex-start; /* Garante que o ícone fique no topo se o texto quebrar linha */
        gap: 15px; /* Reduz um pouco o espaço entre ícone e texto */
    }

    .premium-list strong {
        font-size: 15px !important;
    }

    .premium-list p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}


/* --- 5. PROCESSO / SEGURANÇA (DOBRA 4) --- */
.split-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.premium-list { list-style: none; margin-top: 40px; }
.premium-list li { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
.list-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--violet-glow); display: flex; align-items: center; justify-content: center; color: var(--accent-violet); flex-shrink: 0; border: 1px solid var(--violet-glow-strong); } /* Corrigido para variável */
.img-stack { position: relative; }
.img-stack img { width: 100%; border-radius: 20px; border: 1px solid var(--glass-border); box-shadow: 0 30px 60px rgba(0,0,0,0.8); }

/* =========================================
   SEÇÃO SEGURANÇA / SPLIT SECTION (MOBILE)
   ========================================= */

@media (max-width: 992px) {
    /* 1. Empilha a imagem e o texto e reduz o abismo entre eles */
    .split-section {
        grid-template-columns: 1fr !important;
        gap: 50px !important; /* Cai de 80px para 50px no tablet/celular */
    }
}

@media (max-width: 600px) {
    /* 2. O X da questão: Reduz o respiro gigante em cima e embaixo da seção */
    #seguranca.section-padding {
        padding: 60px 0 !important; /* Corta o padding pela metade no mobile */
    }

    /* 3. Ajuste do Título e da Quebra de Linha */
    #seguranca h2 {
        font-size: 32px !important;
    }
    
    #seguranca h2 br {
        display: none; /* Remove a quebra forçada para o texto fluir na tela fina */
    }

    /* 4. Ajuste fino dos textos para leitura rápida */
    #seguranca p {
        font-size: 15px !important;
    }

    #seguranca .premium-list li {
        gap: 15px; /* Reduz um pouco o espaço entre o ícone e os textos da lista */
    }
    
    #seguranca .premium-list h4 {
        font-size: 16px !important;
    }
}


/* --- 6. BENTO GRID DIFERENCIAIS (DOBRA 5) --- */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.bento-item { padding: 50px 40px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; position: relative; overflow: hidden; transition: 0.4s; }
.bento-item:hover { border-color: rgba(255,255,255,0.2); }
.bento-item h4 { font-size: 24px; margin-bottom: 10px; z-index: 2; position: relative; }
.bento-item p { opacity: 0.5; font-size: 15px; z-index: 2; position: relative; line-height: 1.6; }
.bento-icon-bg { position: absolute; top: 0px; right: 0px; width: 150px; height: 150px; opacity: 0.05; color: white; transition: 0.5s; }
.bento-item:hover .bento-icon-bg { color: var(--accent-violet); opacity: 0.1; transform: scale(1.1); }

/* =========================================
   BENTO GRID / DIFERENCIAIS (MOBILE)
   ========================================= */

@media (max-width: 992px) {
    /* 1. Mata as colunas do desktop e força o empilhamento seguro */
    .bento-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* 2. Anula as spans (span 2, span 3) escritas no HTML */
    .bento-item {
        grid-column: auto !important; 
        width: 100% !important;
    }
}

@media (max-width: 600px) {
    /* 3. Ajuste de paddings para o card não ficar vazio por causa de margens grossas */
    .bento-item {
        padding: 40px 25px !important; 
        min-height: auto !important;
        justify-content: flex-start !important; /* Joga o conteúdo pra cima ao invés do final */
    }

    /* 4. A Mágica do Card 3: Mata o 70% de largura para usar a tela toda no celular */
    .bento-item > div[style*="max-width: 70%"] {
        max-width: 100% !important;
    }

    /* 5. Harmonização da Tipografia */
    .bento-item h4 {
        font-size: 22px !important; /* Unifica os tamanhos (tinha um de 28px no HTML) */
        line-height: 1.3 !important;
    }

    .bento-item p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    /* 6. Controle dos Ícones de Fundo (Para não brigarem com o texto) */
    .bento-icon-bg {
        width: 120px !important;
        height: 120px !important;
        top: 0 !important;
        right: 0 !important;
        opacity: 0.03 !important; /* Deixa ele um pouco mais fantasma no mobile para facilitar leitura */
    }
}

/* --- 7. TABELA COMPARATIVA (DOBRA 6) --- */
.premium-table-box { padding: 60px; margin-top: 50px; overflow-x: auto; }
.premium-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.premium-table th { text-align: left; padding: 20px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-violet); border-bottom: 1px solid var(--glass-border); }
.premium-table td { padding: 25px 20px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 15px; color: rgba(255,255,255,0.8); }

/* =========================================
   EMISSÃO SOB MEDIDA (MOBILE)
   ========================================= */

@media (max-width: 600px) {
    /* 1. Redução do Abismo do Título */
    #atendimento {
        padding: 60px 0 !important; /* Mantém a coerência com as outras seções */
    }

    #atendimento > div:first-child {
        margin-bottom: 40px !important; /* Aproxima o título dos cards */
    }

    /* 2. Ajuste de Título e Texto */
    #atendimento h2 {
        font-size: 32px !important;
        line-height: 1.2;
    }

    #atendimento > div:first-child p {
        font-size: 15px !important;
        padding: 0 10px; /* Evita que o texto encoste muito na borda */
    }

    /* 3. O Respiro das Laterais (Seu principal pedido) e Ajuste dos Cards */
    #atendimento > div:nth-child(2) {
        gap: 20px !important; /* Reduz de 30px para 20px o espaço entre os cards no mobile */
        padding: 0 20px !important; /* ADICIONA O RESPIRO DE 20PX NAS LATERAIS DA TELA */
    }

    /* Ajuste fino dentro do card */
    #atendimento .glass-panel {
        padding: 35px 25px !important; /* Reduz o padding interno gigante do desktop */
    }

    #atendimento .glass-panel h4 {
        font-size: 18px !important; /* Título do card levemente menor */
    }

    #atendimento .glass-panel p {
        font-size: 14px !important;
    }
}

/* --- 8. CTA FINAL VIP (DOBRA 7) --- */
/* Corrigido para variável para não puxar mais o roxo antigo */
.cta-vip { padding: 100px; text-align: center; position: relative; overflow: hidden; border: 1px solid var(--violet-glow-strong); box-shadow: 0 0 50px var(--violet-glow) inset; }

/* =========================================
   CTA FINAL VIP (MOBILE)
   ========================================= */

@media (max-width: 600px) {
    /* 1. Redução do Padding Interno e Adição de Margem Externa */
    .cta-vip {
        padding: 50px 25px !important; /* Cai de 100px para um respiro interno confortável */
        margin: 0 15px !important; /* Adiciona a margem de respiro lateral por fora do card */
        border-radius: 24px; /* Garante que os cantos fiquem arredondados no mobile */
    }

    /* 2. Ajuste do Título e Texto */
    .cta-vip h2 {
        font-size: 32px !important; /* Padronizado com o resto do site */
        line-height: 1.2;
    }

    .cta-vip p {
        font-size: 15px !important;
        margin-bottom: 30px !important; /* Reduz o espaço até o botão */
    }

    /* 3. Ajuste do Botão (Sobrescrevendo o Inline Style) */
    .cta-vip a.btn-outline-violet {
        width: 100% !important; /* Estica o botão para facilitar o toque (UX) */
        padding: 15px 20px !important; /* Substitui o 45px lateral que quebraria a tela */
        justify-content: center !important; /* Centraliza o texto e a setinha */
        font-size: 13px !important;
    }

    /* 4. Controle do Efeito de Luz (Glow Sphere) */
    .cta-vip .glow-sphere {
        width: 300px !important; /* Reduz a bola de luz para não sobrecarregar o render do celular */
        height: 300px !important;
    }
}

/* --- 9. FOOTER --- */
footer { padding: 80px 0 30px; border-top: 1px solid var(--glass-border); margin-top: 50px; background: rgba(0,0,0,0.3); }
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 30px;
    align-items: start;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 15px; }
.footer-links a { 
    color: rgba(255,255,255,0.4); 
    text-decoration: none; 
    font-size: 14px; 
    transition: 0.3s; 
    font-weight: 400 !important; /* Força o peso normal */
}
.footer-links a:hover { color: var(--accent-violet); }

@media (max-width: 900px) {
    .hero-grid, .split-section, .bento-grid, .footer-grid { grid-template-columns: 1fr; }
    .hero-premium h1 { font-size: 48px; }
    .hero-image-glass img { height: 350px; }
    .premium-table-box { padding: 30px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .grid-3 { grid-template-columns: 1fr; }
}

/* --- 10. ESTATÍSTICAS DE AUTORIDADE --- */
.stats-wrap { 
    padding: 60px 0; 
    border-top: 1px solid var(--glass-border); 
    border-bottom: 1px solid var(--glass-border); 
    background: rgba(0,0,0,0.2); 
    position: relative;
    z-index: 5;
}
.stats-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
    text-align: center; 
}
.stat-item h3 { 
    font-size: 46px; 
    font-weight: 800; 
    color: var(--white); 
    margin-bottom: 10px;
    text-shadow: none !important; 
}
.stat-item p { 
    font-size: 13px; 
    opacity: 0.5; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    font-weight: 600;
}

/* =========================================
   ESTATÍSTICAS (MOBILE)
   ========================================= */

@media (max-width: 900px) {
    /* Essa regra você já tinha, estou apenas garantindo que esteja aqui */
    .stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 40px; 
    }
}

@media (max-width: 600px) {
    .stats-wrap {
        padding: 40px 0; /* Diminui o respiro vertical exagerado no celular */
    }
    
    .stats-grid { 
        gap: 30px 15px; /* 30px de espaço vertical entre as linhas, 15px horizontal entre as colunas */
    }

    .stat-item h3 {
        font-size: 32px; /* Reduz de 46px para caber na tela dividida sem quebrar */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px; /* Alinha a estrela com o número 5.0 perfeitamente */
    }
    
    .stat-item h3 svg {
        width: 22px; /* Diminui a estrela proporcionalmente à nova fonte */
        height: 22px;
    }

    .stat-item p {
        font-size: 11px; /* Fonte levemente menor para garantir que frases como "De Experiência no Mercado" não fiquem bagunçadas */
        letter-spacing: 1px;
        line-height: 1.4;
        padding: 0 5px; /* Evita que o texto encoste nas bordas da tela */
    }
}

/* --- 11. DEPOIMENTOS (GOOGLE REVIEWS) --- */
.grid-3 { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
}
.testimonial { 
    padding: 40px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    transition: transform 0.3s ease;
}
.testimonial:hover {
    transform: translateY(-5px);
    border-color: var(--violet-glow-strong); /* Corrigido para variável */
}
.stars { 
    margin-bottom: 20px; 
    color: #facc15; 
    display: flex; 
    gap: 5px; 
}
.stars svg { width: 18px; height: 18px; fill: currentColor; }
.testimonial p { 
    font-size: 15px; 
    font-style: italic; 
    opacity: 0.8; 
    margin-bottom: 30px; 
    line-height: 1.7; 
}
.client-profile { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    border-top: 1px solid var(--glass-border);
    padding-top: 20px;
}
.client-profile img { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    border: 2px solid var(--accent-violet); 
}

/* =========================================
   DEPOIMENTOS / PROVA SOCIAL (MOBILE)
   ========================================= */

@media (max-width: 600px) {
    
    .grid-3 {
        margin: 0 20px;
    }
    
    /* 1. Ajuste do Título Principal */
    .section-padding h2 {
        font-size: 32px !important; 
        line-height: 1.2;
    }

    /* 2. A Mágica da Badge em 2 Linhas */
    .section-padding > div > div[style*="display: inline-flex"] {
        flex-wrap: wrap !important; /* Permite que o conteúdo quebre para a linha de baixo */
        justify-content: center !important;
        padding: 15px 20px !important; 
        border-radius: 20px !important; 
        /*width: 100%; */
        gap: 10px !important;
        margin: 0 20px;
    }

    /* Força o texto (5.0 + avaliações) a ocupar 100% da largura, jogando-o para a 2ª linha */
    .section-padding > div > div[style*="display: inline-flex"] > span {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        margin-top: 5px !important;
    }

    /* Ajuste fino: tira a margem do texto em parênteses para ele centralizar perfeitamente sob o 5.0 */
    .section-padding > div > div[style*="display: inline-flex"] > span > span {
        margin-left: 0 !important;
        display: inline-block !important;
        margin-top: 3px !important;
    }

    /* 3. Depoimentos Empilhados (Força Bruta) */
    .grid-3 {
        display: flex !important;
        flex-direction: column !important; /* Força 1 embaixo do outro */
        gap: 25px !important;
    }

    /* 4. Ajustes de Respiro dos Cards */
    .testimonial {
        padding: 30px 25px !important; 
    }

    .testimonial p {
        font-size: 14px !important; 
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
    }

    .client-profile {
        padding-top: 15px !important; 
    }

    .client-profile img {
        width: 45px !important; 
        height: 45px !important;
    }

    .client-profile strong {
        font-size: 14px !important;
    }

    .client-profile span {
        font-size: 11px !important;
    }
}

/* --- 12. BOTÃO FLUTUANTE WPP --- */
.btn-wpp-fixo {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    background-color: #25D366 !important;
    color: #ffffff !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4) !important;
    z-index: 2147483647 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important; /* Animação suave devolvida! */
}
.btn-wpp-fixo svg {
    width: 34px !important;
    height: 34px !important;
    fill: #ffffff !important;
}
.btn-wpp-fixo:hover {
    transform: scale(1.1) translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.6) !important; /* Sombra mais bonita no hover */
}
@media (max-width: 768px) {
    .btn-wpp-fixo { bottom: 20px !important; right: 20px !important; width: 55px !important; height: 55px !important; }
}

/* =========================================
   HERO PADRONIZADO (PÁGINAS INTERNAS)
   ========================================= */
.hero-interno {
    padding: 150px 0 80px;
    text-align: center;
    background: radial-gradient(circle at center, rgba(0, 194, 238, 0.05) 0%, transparent 70%);
}

.hero-interno h1 {
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -2px;
    line-height: 1.1;
}

.hero-interno p {
    max-width: 650px;
    margin: 20px auto;
    opacity: 0.6;
    font-size: 18px;
    line-height: 1.6;
}

/* O Chapéu (Badge) Padronizado */
.badge-interno {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(0, 194, 238, 0.1);
    color: var(--accent-violet);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px; /* Arredondado igual ao de Produtos */
    margin-bottom: 25px;
    border: none;
}

/* Responsividade */
@media (max-width: 600px) {
    .hero-interno h1 { font-size: 42px; }
    .hero-interno p { font-size: 16px; }
}

/* =========================================
   TRAVA DE SEGURANÇA BLINDADA (MOBILE)
   ========================================= */
html, body {
    width: 100%;
    max-width: 100vw; /* Impede esticamento horizontal */
    overflow-x: hidden !important; /* Força bruta contra o AOS e Safari */
    position: relative;
}

/* Garante que elementos decorativos absolutos não empurrem a tela */
.glow-sphere {
    max-width: 100vw;
}

/* =========================================
   MOBILE NAVIGATION (HEADER)
   ========================================= */
   
/* =========================================
   MOBILE NAVIGATION (HEADER)
   ========================================= */
   
@media (max-width: 992px) {
    /* 1. MENU COM FADE-IN (Eliminando qualquer translateX antigo) */
    .nav-links {
        position: fixed; 
        top: 0;
        left: 0; 
        width: 100%;
        height: 100vh;
        background: rgba(15, 17, 18, 0.98); 
        backdrop-filter: blur(15px); 
        display: flex;
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        gap: 30px; 
        z-index: 1050; 
        
        /* Animação via Opacidade (Elegante e sem vazar tela) */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none !important; /* Mata qualquer translate que possa estar bugando */
        transition: all 0.5s ease-in-out;
    }
    
    .nav-links.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* 2. AJUSTE DOS LINKS E DO BOTÃO "SEJA PARCEIRO" (Que já está no HTML) */
    .nav-links a.link-item {
        margin-left: 0; 
        font-size: 18px; 
    }

    .nav-links .btn-outline-violet {
        margin: 0 0 0 0 !important; /* Dá um respiro entre o botão e os links */
        font-size: 14px !important;
    }

    /* 3. ÍCONE HAMBÚRGUER */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 1100; 
        position: relative; 
    }

    .menu-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--white);
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
        transform-origin: center;
    }

    /* 4. ANIMAÇÃO DO "X" */
    .menu-toggle.is-active span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }
    
    .menu-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.is-active span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }
}

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

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important; /* Coluna única no celular */
        text-align: center;
        gap: 50px;
    }

    .footer-grid div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-grid p {
        margin: 0 auto 25px;
    }

    /* Ajuste dos logos das certificadoras no rodapé */
    .footer-grid + .container div {
        gap: 20px !important;
        justify-content: center;
    }

    .footer-grid + .container img {
        height: 22px; /* Reduz um pouco os logos no mobile */
    }
}

.social-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
}

/* =========================================
   PÁGINAS INSTITUCIONAIS/TEXTUAIS (MOBILE)
   ========================================= */

@media (max-width: 768px) {
    /* 1. Ajuste do Hero das páginas internas */
    .hero-interno {
        padding: 120px 20px 40px !important; /* Respiro lateral de 20px e topo ajustado */
    }

    .hero-interno h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .hero-interno h1 br {
        display: none !important; /* Mata quebras de linha que esmagam o texto */
    }

    /* 2. O Respiro da Seção de Conteúdo */
    /* Como você usou style="max-width: 900px" no HTML, precisamos forçar o respiro por fora */
    section.container.section-padding {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 60px !important;
    }

    /* 3. Ajuste do Painel de Vidro (Onde o texto mora) */
    /* No HTML está padding: 60px, o que é um crime no mobile. Vamos reduzir. */
    .glass-panel[style*="padding: 60px"], 
    .glass-panel[style*="padding: 50px 60px"],
    .glass-panel {
        padding: 40px 20px !important; /* Reduz o padding interno de 60px para 20px */
        text-align: left !important; /* Garante leitura natural */
    }

    /* 4. Elementos internos (PDF, Boxes de Destaque) */
    .glass-panel div[style*="padding: 40px"],
    .glass-panel div[style*="padding: 30px"] {
        padding: 25px 15px !important; /* Reduz padding de boxes internos (ex: download PDF) */
    }

    /* Botão de PDF e outros botões internos */
    .glass-panel a.btn-outline-violet {
        width: 100% !important; /* Botão ocupa a largura toda no mobile */
        justify-content: center !important;
        padding: 15px !important;
    }

    /* 5. Grids de Rodapé (Formas de Pagamento/Entrega) */
    /* Força a quebra de colunas na Política de Privacidade */
    .glass-panel div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Ajuste de textos e listas */
    .glass-panel h3 { font-size: 20px !important; }
    .glass-panel h4 { font-size: 18px !important; }
    .glass-panel p { font-size: 15px !important; line-height: 1.6 !important; }
    
    .glass-panel ul {
        padding-left: 20px !important;
    }
}

/* ============================================================
   CORREÇÃO DE CONFLITO DE CAMADAS (Z-INDEX) E CONTRASTE - HOME
   ============================================================ */

/* Força o ícone ciano para alto contraste no modo escuro */
.menu-toggle span {
    background-color: #00C2EE !important;
    opacity: 1 !important;
    filter: none !important;
}

@media (max-width: 992px) {
    /* Desativa o fundo fixo que quebra a renderização de camadas no mobile */
    .hero-home {
        background-attachment: scroll !important;
    }

    /* Garante que o cabeçalho fique no topo absoluto */
    header {
        z-index: 99999 !important;
        position: fixed !important;
    }

    /* Mantém o botão do menu na camada mais alta de clique */
    .menu-toggle {
        display: flex !important;
        z-index: 100000 !important;
        position: relative !important;
    }

    /* Ajusta a camada dos links do menu mobile */
    .nav-links {
        z-index: 99998 !important;
    }

    /* Neutraliza a prioridade do conteúdo da Home para não cobrir o menu */
    .glow-sphere, 
    main, 
    .hero-home, 
    .hero-home-content,
    [data-aos] {
        z-index: 1 !important;
    }
}

/* --- CORREÇÃO DA TRANSFORMAÇÃO EM X (ANULA O ASTERISCO) --- */

/* Força a linha do meio a sumir completamente no clique */
.menu-toggle.is-active span:nth-child(2) {
    opacity: 0 !important;
    transform: scale(0) !important;
}

/* Ajusta a linha superior para descer e girar no centro */
.menu-toggle.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
}

/* Ajusta a linha inferior para subir e girar no centro */
.menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg) !important;
}

/* ============================================================
   AJUSTE DE CONTRASTE: APENAS MOBILE E APENAS MODO ESCURO
   ============================================================ */

@media (max-width: 992px) {
    @media (prefers-color-scheme: dark) {
        
        h1, h2, h3, h4, h5, h6, 
        .card-title, 
        .card-title a, 
        .alert-heading {
            color: #ffffff !important;
        }

        p, 
        .card-text, 
        .section-padding p,
        main p {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        span, 
        li, 
        small, 
        .text-muted, 
        .validity-item span {
            color: rgba(255, 255, 255, 0.65) !important;
        }

        .validity-item span:last-child,
        .accent-text,
        .text-dark, 
        .black-text, 
        .grey-text,
        [style*="color: black"],
        [style*="color: #082b48"] {
            color: #00C2EE !important;
            font-weight: 700 !important;
            text-shadow: 0 0 8px rgba(0, 194, 238, 0.3) !important;
        }
    }
}

/* Garante a estrutura do menu aberto caso falte o CSS do framework na Home */
.navbar-collapse.show {
    display: block !important;
    position: absolute !important;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.95) !important;
    padding: 20px !important;
    z-index: 99999 !important;
}



/* --- AJUSTE COMPLEMENTAR DO BOTÃO DE FECHAR (X) --- */
.navbar-toggler.is-active span:nth-child(2) {
    opacity: 0 !important;
    transform: scale(0) !important;
}
.navbar-toggler.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
}
.navbar-toggler.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg) !important;
}