/***************************************************************************************************************/

    /* PALETA DE CORES */
    :root {
        --font-principal: 'Times New Roman', Times, serif;
        --font-secundaria: 'Times New Roman Condensed', 'Arial Narrow', sans-serif;
        --bordo: #260101;   /* rgb(38, 1, 1)  */
        --marrom-escuro: #3a0606;   /* rgb(58, 6, 6)  */
        --canela: #733b27;   /* rgb(115, 59, 39)  */
        --areia: #dccfa3;  /* rgb(220, 207, 163)  */
    }

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

    html {
    scroll-behavior: smooth;
    }

    html, body {
    max-width: 100%;
    overflow-x: hidden; /* Corta qualquer coisa que tente escapar para a direita */
    position: relative;
}

    body {
        font-family: var(--font-principal);
        color: var(--marrom-escuro);
        line-height: 1.6;
        overflow-x: hidden;
    }

/***************************************************************************************************************/

    /* HEADER */
    .header {
        background: var(--bordo);
        border-bottom: 2px solid var(--areia);
        padding: 5px 0;
        z-index: 999;
        position: fixed;
        width: 100%;
        top: 0;
    }

    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        max-width: 1200px;
        margin: auto;
        padding: 0 20px;
    }

    .logo img {
        height: 230px; /* Ajuste de escala da logo */
        width: auto; 
    } 

    .menu { 
        display: flex; 
        list-style: none; 
        gap: 15px; 
    }

    .menu-mobile-btn { 
        display: none; 
    }

    .menu-text {
        display: none;
    }

    .menu a {
        color: var(--areia);
        padding: 8px 15px;
        font-size: 15px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-decoration: none;
        transition: 0.3s ease, color 0.3s ease; 
    }

    .menu a.active {
        background-color: rgba(220, 207, 163, 0.2);
        border-radius: 4px;
    }

/***************************************************************************************************************/

    /* SEÇÕES GERAIS */
    .section { 
        padding: 60px 0; 
        display: flex;
        flex-direction: column;
        scroll-margin-top: 50px;
    }

    .section h2 { 
        font-family: var(--font-secundaria); 
        font-size: 2.5rem; 
        text-transform: uppercase; 
        color: var(--bordo); 
        margin-bottom: 40px; 
        letter-spacing: 2px;
        padding-left: 0%;
    }

    .section h2::after { 
        content: ''; 
        display: block; 
        width: 60px; 
        height: 3px; 
        background: var(--canela); 
        margin-top: 10px; 
    }

/***************************************************************************************************************/

    /* SEÇÃO ÁREAS DE ATUAÇÃO COM TEXTURA E DESFOQUE */
    .light {
        position: relative;
        /*background: url("images/fundo-areas3.webp") center/cover no-repeat;  --- isso é para imagem*/
        background-color: #fff;
        background-attachment: scroll; 
        overflow: hidden; 
    }

    /* Ajuste no título para garantir leitura */
    .light h2 {
        color: var(--bordo);
        position: relative;
        z-index: 2;
    }

/***************************************************************************************************************/

    /* HERO */
    .hero {
        height: 100vh;
        background: linear-gradient(
            rgba(0, 0, 0, 0.511), 
            rgba(194, 180, 180, 0.477)),
                    url("images/header.webp") center/cover no-repeat;
        display: flex;
        
        /* MUDANÇA AQUI: Adicionamos padding-top para não colar no header */
        padding-top: 50px; 
        
        /* Centraliza a caixa verticalmente no espaço restante */
        align-items: center; 
        
        padding-left: 10%;
    }

    .hero-box {
        background-color: rgba(224, 213, 177, 0.822); 
        padding: 60px;
        width: 100%;
        max-width: 550px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        box-shadow: 20px 20px 0px rgba(38, 1, 1, 0.5);
        
        /* Garante que a caixa não suba demais */
        margin-top: 20px; 
    }

    .hero-name {
        font-family: var(--font-secundaria);
        font-size: 4rem !important;
        color: var(--bordo);
        text-transform: none;
        line-height: 1;
        margin: 0;
    }

    .hero-subtitle {
        font-family: var(--font-principal);
        font-size: 1.3rem; /* Ajuste leve para equilibrar com a OAB */
        color: var(--marrom-escuro);
        margin: 0 !important;
        font-style: normal !important;
    }

    /* RODAPÉ DO QUADRADO (Seta + OAB) */
    .hero-footer {
        display: flex;
        align-items: center;
        gap: 30px;
        margin-top: 20px;
    }

    /* Construção da Seta em CSS */
    .hero-arrow {
        display: flex;
        align-items: center;
        position: relative;
        width: 100px;
    }

    .arrow-line {
        height: 2px;
        width: 100%;
        background-color: var(--bordo);
        position: relative;
    }

    .arrow-line::before {
        content: '';
        position: absolute;
        left: 0;
        top: -40px;
        height: 40px;
        width: 2px;
        background-color: var(--bordo);
    }

    .arrow-head {
        width: 15px;
        height: 15px;
        border-top: 2px solid var(--bordo);
        border-right: 2px solid var(--bordo);
        transform: rotate(45deg);
        margin-left: -15px;
    }

    /* O Botão agora com estilo bordo no lugar do areia para contraste no fundo claro */
    .btn {
        font-family: var(--font-secundaria);
        letter-spacing: 0.7px;
        display: inline-flex;
        padding: 12px 25px;
        background-color: rgba(37, 211, 102, 0.7);
        color: var(--bordo);
        text-transform: uppercase;
        text-decoration: none;
        transition: 0.3s;
        gap: 10px;
        border: none;
        font-weight: bold;
    }

    .btn:hover {
        background-color: #25D366;
        color: #fff;
        transform: scale(1.05);
    }

    .btn i {
        font-size: 1.6rem;
    }

/***************************************************************************************************************/

    /* GRID SOBRE */
    .about-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        padding: 0 10%;
        align-items: start;
    }

    .img-perfil {
        display: block; /* Garante que a imagem se comporte como bloco */
        margin-left: auto; 
        margin-right: 0;
        
        width: 100%;
        max-width: 400px;
        border: 10px solid var(--areia);
        box-shadow: 15px 15px 0 var(--bordo);
    }

    /* ESTILIZAÇÃO DA LISTA ACADÊMICA */
    .academic-list {
        list-style: none;
        margin: 25px 0;
        padding: 0;
    }

    .academic-list li {
        font-size: 1rem;
        margin-bottom: 12px;
        display: flex-start;
        align-items: flex-start;
    }

    .academic-list li strong {
        color: var(--canela); /* Destaque para o Magna Cum Laude */
    }

    /* CAIXA DE CITAÇÃO (FILOSOFIA) */
    .quote-box {
        width: 100%;
        margin-top: 30px;
        padding: 20px;
        border-left: 4px solid var(--canela);
        background-color: rgba(115, 59, 39, 0.05); /* Um fundo canela bem clarinho */
        font-style: italic;
    }

    .quote-box p {
        margin-bottom: 0;
        color: var(--bordo);
        font-size: 1.1rem;
        line-height: 1.5;
    }

/***************************************************************************************************************/

    /* ESTILOS SEÇÃO DIFERENCIAIS */

    .section-diferenciais {
    padding: 0;
    display: flex;
    flex-direction: column;
    scroll-margin-top: 50px; /* Mesma altura do seu nav/header */
    }

    .container-diferenciais {
        padding: 0 10%;
        max-width: 1400px;
        margin: 0 auto;
    }

    /* PARTE COM A FOTO DE FUNDO */
    .diferenciais-topo {
        position: relative;
        padding: 60px 0;
        background: url("images/fundo-diferenciais.webp") center/cover no-repeat;
        background-attachment: fixed;
    }

    /* Filtro para fundo de DIFERENCIAIS*/
    .diferenciais-topo::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            background-color: rgba(234, 227, 227, 0.5); 

            backdrop-filter: blur(10px); 
            -webkit-backdrop-filter: blur(8px);

            z-index: 1;
    }

    .diferenciais-topo .container-diferenciais {
        position: relative;
        z-index: 2;
    }

    /* Títulos Padronizados com Áreas de Atuação */
    .diferenciais-topo h2 {
        text-align: flex-start;
        font-size: 2.5rem;
        color: var(--bordo) !important;
        font-family: var(--font-secundaria);
        text-transform: uppercase;
        margin-bottom: 50px;
    }

    .diferenciais-topo h2::after {
        content: "";
        display: block;
        width: 60px;
        height: 3px;
        background: var(--canela);
        margin: 10px ;
    }

    .diferenciais-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        position: relative; /* Garante que o conteúdo (cards e título) fique POR CIMA do fundo */
        z-index: 2; /* Garante que o conteúdo (cards e título) fique POR CIMA do fundo */
        margin-bottom: 70px;
    }

    .diff-card {
        background: #fdfdfd;
        padding: 30px;
        border: 1.5px solid var(--areia);
        text-align: center;
        transition: 0.3s;
    }

    .diff-card:hover {
        border-color: var(--canela);
        box-shadow: 10px 10px 0px var(--areia);
    }

    .diff-card i {
        font-size: 2.4rem;
        color: var(--canela);
        margin-bottom: 25px;
        display: block;
        transition: transform 0.3s ease;
    }

    .diff-card:hover i{
        transform: scale(1.1); /* Pequeno zoom no ícone ao passar o mouse */
    }

    .diff-card h3 {
        font-family: var(--font-secundaria);
        text-transform: uppercase;
        color: var(--bordo);
        margin-bottom: 15px;
    }

        /* Barra de Confiança tipo "Pills" */
    .trust-bar {
        display: flex;
        justify-content: center; 
        gap: 50px;
        padding: 1px 0;
        
        /* Novo: */
        max-width: 800px;  /* Comprimento total da barra */
        margin: 0 auto;    /* Centraliza a barra no meio da página */


    }

    .trust-item {
        background: var(--areia);
        color: var(--bordo);
        padding: 8px 0;    /* Removi o padding lateral para o width mandar */
        border-radius: 50px;
        font-size: 1.2rem;
        letter-spacing: 1.5px;
        font-weight: bold;
        text-transform: none;
        text-align: center; /* Centraliza o texto dentro da pill */

        flex-basis: 200px;  /* Cada pill terá exatamente 150px de largura */
        flex-shrink: 0;     /* Impede que elas "esmaguem" em telas menores */
    }

/***************************************************************************************************************/

    /* SEÇÃO AREAS DE ATUAÇÃO */
    .section-atuacao {
        padding: 80px 0;
        background-color: #fff;
        scroll-margin-top: 50px;    /*garante que ao clicar em menu, não sobrepõe em cima do título da seção*/
    }

    .container-atuacao {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0; /* Agora igual ao padding da seção Sobre */
    }

    .section-atuacao h2 {
        font-family: var(--font-secundaria);
        font-size: 2.5rem;
        text-transform: uppercase;
        color: var(--bordo);
        margin-bottom: 40px;

        padding-left: 5%; 
        text-align: left;
    }

    .section-atuacao h2::after {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background: var(--canela);
        margin-top: 10px;
    }

    /* Estrutura do Accordion */

    .accordion-container {
        padding: 0 10%; /* Mantém o alinhamento original dos itens */
    }
    .accordion-item {
        border-bottom: 1px solid var(--areia);
        margin-bottom: 5px;
        width: 100%;
    }

    .accordion-header {
        width: 100%;
        padding: 20px 30px; /* Aumentado o respiro interno */
        background: none;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: 0.3s;
        font-family: var(--font-secundaria);
        font-size: 1.3rem;
        text-transform: uppercase;
        color: var(--bordo);
        letter-spacing: 1px;
    }

    .accordion-header span i {
        color: var(--canela);
        margin-right: 15px;
        width: 25px;
        text-align: center;
    }

    .accordion-header:hover {
        background-color: rgba(115, 59, 39, 0.5);
    }

    .accordion-header.active {
        background-color: var(--bordo);
        color: var(--areia);
    }

    .accordion-header.active span i {
        color: var(--areia);
    }

    .arrow {
        transition: transform 0.3s ease;
    }

    .accordion-header.active .arrow {
        transform: rotate(180deg);
    }

    /* Conteúdo que expande */
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out, padding 0.3s ease;
        background-color: #fdfdfd;
    }

    .accordion-inner {
        display: grid;
        grid-template-columns: 0.7fr 1fr; /* Imagem na esquerda, texto na direita */
        gap: 50px;
        padding: 30px;
        align-items: start;
    }

    .accordion-image img {
        width: 100%;
        height: auto;
        border: 5px solid var(--areia);
        box-shadow: 10px 10px 0 var(--bordo);
    }

    .accordion-text p {
        font-size: 1rem;
        margin-bottom: 20px;
        color: var(--marrom-escuro);
    }

    .accordion-text ul {
        list-style: none;
        padding-left: 0;
    }

    .accordion-text ul li {
        margin-bottom: 12px;
        position: relative;
        padding-left: 20px;
        display: flex;
        align-items: center; /* Centraliza verticalmente a bolinha com o texto */
        gap: 10px;           /* Espaço exato entre a bolinha e o texto */
        font-size: 1rem;
        color: var(--marrom-escuro);
    }

    .accordion-text ul li::before {
        content: '•';
        color: var(--canela);
        font-weight: bold;
        position: absolute;
        left: 0;
        font-size: 1.5rem;
    }

/***************************************************************************************************************/

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

    .section-solucoes {
        padding: 80px 10%;
        /* Substitua pelo caminho da sua imagem */
        background: url("images/fundo-solucoes.webp") center/cover no-repeat;
        background-attachment: fixed; /* Efeito Parallax, se desejar manter o padrão */
        position: relative;
    }

    /* Camada de contraste para garantir que o texto e cards apareçam bem */
    .section-solucoes::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        background-color: rgba(234, 227, 227, 0.6); 

        backdrop-filter: blur(4px); 
        -webkit-backdrop-filter: blur(8px);

        z-index: 1;
    }

    /* Garante que o conteúdo fique acima da película */
    .container-solucoes {
        position: relative;
        z-index: 2;
    }

    .solucoes-intro {
        text-align: left;
        max-width: 1200px;
        margin: 0 auto 50px;
        padding-left: 0;
    }

    .solucoes-intro p {
        text-align: center;
        font-size: 1.3rem;
        font-family: var(--font-secundaria);
        color: var(--marrom-escuro);
        line-height: 1.8;
    }

    /* Título estilizado para combinar com o tema */
    .sub-title-gold {
        display: inline-block;
        font-family: var(--font-secundaria);
        font-size: 2.2rem;
        color: var(--bordo);
        text-transform: uppercase;
        margin-bottom: 20px;
        letter-spacing: 2px;
    }

    .sub-title-gold::after {
        content: '';
        display: block;
        width: 80px;
        height: 3px;
        background: var(--canela);
        margin: 10px 0;
    }

    /* Grid de Cards */
    .solucoes-grid-v2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .solucao-card {
        background: #fff;
        border: 1.5px solid var(--areia);
        padding: 40px 30px;
        transition: all 0.4s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .solucao-card:hover {
        transform: translateY(-10px);
        border-color: var(--canela);
        box-shadow: 10px 10px 0px var(--areia);
    }

    .card-icon {
        font-size: 2.8rem; /* Tamanho levemente maior para destaque */
        color: var(--canela);
        margin-bottom: 20px;
        display: block;
        transition: transform 0.3s ease;
    }

    .solucao-card:hover .card-icon {
        transform: scale(1.1); /* Pequeno zoom no ícone ao passar o mouse */
    }

    .solucao-card h4 {
        font-family: var(--font-secundaria);
        font-size: 1.4rem;
        color: var(--bordo);
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    .badge-solucao {
        display: inline-block;
        background-color: var(--bordo);
        color: var(--areia);
        padding: 4px 12px;
        font-size: 0.8rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }

    .solucao-card p {
        font-size: 0.95rem;
        color: var(--marrom-escuro);
    }

/***************************************************************************************************************/

    /* CONTATO */
    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 0 10%;
    }

    .contact-subtitle {
    font-family: var(--font-secundaria);
    text-transform: uppercase;
    color: var(--bordo);
    font-size: 1.2rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
    }

    .methods-list {
        list-style: none;
        padding: 0;
        margin-bottom: 30px; /* Aumentar de 25px para 30px ajuda no respiro visual */
    }

    .methods-list li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 10px;
        font-size: 0.95rem;
    }

    .methods-list li::before {
        content: '•';
        color: var(--canela);
        font-weight: bold;
        position: absolute;
        left: 0;
    }

    .contact-divider {
        border: 0;
        border-top: 2px solid var(--areia);
        /* O segredo está aqui: */
        margin: 40px 0; /* 40px em cima e 40px em baixo. Ajuste o número conforme preferir */
        width: 100%;
        padding: 0; /* Remove qualquer padding que você tenha tentado usar */
    }
    #contato h2 {
        padding-top: 20px;
        margin-bottom: 50px;
        text-align: left;
        padding-left: 10%;
    }

    .contact-info p {
        margin-bottom: 20px;
        display: flex;
        align-items: center; /* Centraliza verticalmente ícone e texto */
        gap: 4px; 
    }

    .contact-channels p {
        margin-bottom: 20px;
        display: flex;
        align-items: flex-start; /* Alinha o ícone com a primeira linha do endereço longo */
        gap: 3px;
        line-height: 1.5;
    }

    /* Largura fixa para os ícones para alinhar o texto verticalmente */
    .contact-channels p i {
        width: 25px; 
        text-align: center;
        font-size: 1.3rem;
        flex-shrink: 0; /* Impede o ícone de amassar em telas menores */
    }

    .contact-link {
        text-decoration: none;
        color: inherit;
        transition: 0.3s;
    }

    .contact-link:hover {
        color: var(--canela);
        text-decoration: underline;
    }

    /* Nova classe para o Pin de Localização estilo Google */
    .icon-map-pin {
        color: #EA4335 !important; /* Vermelho padrão do Google Maps */
        font-size: 1.1rem;
        margin-top: 3px;
    }

    .icon-zap {
        color: #25D366;
        font-size: 1.1rem;
        filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));
        transition: 0.2s;
        display: inline-block; /* Garante que o efeito de escala funcione bem */
    }

    .contact-link:hover .icon-zap {
        transform: scale(1.2);
    }

    /* Ajuste do ícone para não ficar colado no teto do parágrafo */
    .contact-info p i:not(.icon-zap) {
        margin-top: 4px;
        color: var(--bordo);
    }

    /* Estilo fixo para o ícone do e-mail (Azul Outlook) */
    .icon-email {
        color: #0078d4 !important; /* O !important garante que ele ignore a cor padrão dos outros ícones */
        font-size: 1.1rem;
        display: inline-block;
        transition: 0.3s ease;
    }

    /* O efeito de hover continua funcionando apenas para o movimento */
    .contact-link:hover .icon-email {
        transform: scale(1.2);
    }

    /* Ajuste das margens para ícones que agora estão no início */
    .icon-zap, .icon-email {
        margin-left: 0 !important; /* Remove a margem esquerda anterior */
        margin-right: 8px;        /* Adiciona espaço entre o ícone e o texto */
    }

    .contact-map {
        border: 5px solid var(--areia);
        height: 100%;
        min-height: 350px;
    }
    
    .contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    }

/***************************************************************************************************************/

    /* BBOTÃO WHATSAPP FLUTUANTE */
    .whatsapp-fixed {
        position: fixed;
        bottom: 50px;
        right: 35px;
        width: 70px;
        height: 70px;
        background-color: #25D366;
        color: #fff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 35px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
        z-index: 1000;
        text-decoration: none;
        transition: all 0.3s ease;
        
        /* Começa invisível e um pouco abaixo */
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
    }

    .whatsapp-fixed:hover {
        background-color: #128C7E;
        transform: scale(1.1) translateY(0px);
        color: #fff;
    }

    /* Classe que será adicionada via JS */
    .whatsapp-fixed.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

/***************************************************************************************************************/

    /* SEÇÃO DE REGIÕES */
    .atendimento {
        padding: 40px 20px;
        background-color: #fff;
        text-align: center;
        border-top: 1px solid #eee;
    }

    .atendimento h3 {
        font-family: var(--font-secundaria);
        color: var(--bordo);
        text-transform: uppercase;
        font-size: 1.5rem;
        margin-bottom: 30px;
        letter-spacing: 1px;
    }

    .atendimento-sub {
        color: var(--canela);
        margin-bottom: 40px;
        font-style: italic;
    }

    .tabs-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    .tabs-header {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }

    .tab-link {
        background: none;
        border: 1px solid rgba(38, 1, 1, 0.5);
        padding: 10px 20px;
        cursor: pointer;
        font-family: var(--font-secundaria);
        color: var(--marrom-escuro);
        transition: 0.3s;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }

    .tab-link:hover, .tab-link.active {
        background-color: var(--bordo);
        color: var(--areia);
        border-color: var(--bordo);
    }

    .tab-content {
        display: none;
        animation: fadeIn 0.5s ease;
    }

    .tab-content.active {
        display: block;
        
        /* Cria 4 colunas de tamanho igual (1fr). 
        Você pode mudar o '4' para '3' ou '5' se preferir */
        
        grid-template-columns: repeat(4, 1fr); 
        
        /* Espaçamento entre as cidades (quadros) */
        gap: 15px; 
        
        /* Alinhamento geral da grid */
        text-align: left; /* Cidades alinhadas à esquerda dentro da grid */
        padding: 10px 0;
    }

    .tab-content p {
        margin: 0; /* Remove margens padrão */
        padding: 15px 15px; /* O primeiro valor (15px) é em cima/baixo, o segundo (10px) é nas laterais */
        font-size: 1rem; /* Tamanho da fonte */
        color: #4b4a4a; /* Cor da fonte */
        font-family: var(--font-secundaria); /* Fonte secundária */
        text-transform: capitalize; /* Primeira letra maiúscula */
        
        /* --- Adicione o estilo abaixo para simular os "quadros" --- */
        background-color: #f9f9f9; /* Fundo muito leve para o quadro */
        border: 1.3px solid #eee; /* Borda sutil */
        border-radius: 3px; /* Cantos levemente arredondados */
        box-shadow: 1px 1px 2px rgba(0,0,0,0.03); /* Sombra bem suave */
        
        /* Garante que o texto fique centralizado dentro do seu próprio quadro */
        display: flex;
        justify-content: flex-start; /* Alinha o nome da cidade à esquerda do quadro */
        align-items: center;
    }

/***************************************************************************************************************/

    /* FOOTER */
    .footer {
        background: var(--bordo);
        color: var(--areia);
        text-align: center;
        padding: 15px 15px; /* Aumentei um pouco o padding para dar respiro */
        font-size: 0.9rem;
    }

    .footer-social {
        margin-bottom: 5px;
        display: flex;
        justify-content: center;
        gap: 35px; /* Espaço entre os ícones */
    }

    .footer-social a {
        color: var(--areia);
        font-size: 1.5rem; /* Tamanho dos ícones */
        text-decoration: none;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    /* Efeito de hover: o ícone sobe levemente e brilha um pouco */
    .footer-social a:hover {
        transform: translateY(-3px);
        color: #fff; /* Muda para branco ou outra cor de sua preferência no hover */
    }

    .footer p {
        opacity: 0.8;
        margin-top: 10px;
    }



/***************************************************************************************************************/
    
/* RESPONSIVIDADE REFINADA - ADVOCACIA CLARA GALHARDO */
    
    @media (max-width: 1024px) {
        /* Ajustes de Seção e Containers */
        section {
            padding: 20px 20px; /* Respiro padrão para mobile */
            margin: 0;
        }

        .container-diferenciais, .about-grid, .contact-grid, .accordion-container, .section-solucoes {
            padding: 20px 20px;
            margin: 0;
        }

        /* Capitular (Drop Cap) no Mobile */
        .drop-cap {
            font-size: 3rem !important; 
            line-height: 0.8;
            margin-top: 5px;
            margin-right: 8px;
        }

        /* Header e Logo */
        .nav {
            height: auto; 
            padding: 0px 20px;
            height: 70px;  /* Altura mínima para não ficar "esmagado" */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo img {
            height: 160px; /* Logo menor para sobrar tela */
            width: auto;
            display: block;
        } 

        .menu-mobile-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            color: var(--areia);
            font-size: 1.3rem;
            cursor: pointer;
            padding: 5px 10px;
        }
        .menu-text {
            display: inline;
            font-family: var(--font-secundaria); /* Usa a fonte mais limpa do seu site */
            font-size: 1.2rem;
            font-weight: bold;
            letter-spacing: 1px;   /* Um toque extra de elegância */
        }
        .menu-mobile-btn i {
            font-size: 1.2rem; /* Garante que o ícone não fique desalinhado */
        }
        /* Esconde o menu original e prepara o Dropdown */
        .menu {
            display: none; /* Começa escondido */
            flex-direction: column;
            position: absolute;
            top: 60px; /* Altura do seu header */ 
            right: 0;
            background: var(--bordo);
            width: 100%;
            border-bottom: 2px solid var(--areia);
            z-index: 1000;
            padding: 20px 0;
        }
        .menu.active {
            display: flex;
        }
        .menu li {
            text-align: center;
            margin: 15px 0;
        }

        /* Hero Section - Ajuste de Impacto */
        .hero {
            padding: 50px 15px 50px 15px; /* Compensa o header fixo */
            padding-top: 80px !important;
            padding-bottom: 20px !important;
            min-height: auto !important;
            display: flex;
            justify-content: center;
            text-align: center;
        }
        .hero-box {
            margin-top: 0;
            margin-bottom: 0;
            padding: 30px 15px;
            box-shadow: 6px 6px 0px rgba(38, 1, 1, 0.4);
            border: 1px solid var(--areia);
            max-width: calc(100% - 30px); /* Garante que a caixa nunca encoste na borda absoluta */
            box-sizing: border-box; /* Fundamental para o padding não somar na largura */
        }
        .hero-name { 
            font-size: 2.2rem !important; 
            line-height: 1.1;
        }
        .hero-footer {
            flex-direction: column;
            gap: 15px;
            margin-top: 20px;
        }
        .hero-arrow { display: none; }

        /* Sobre (Abaixo em cima do texto) */
        .about-grid { 
            display: flex;
            flex-direction: column; 
            align-items: center; /* Garante que o padrão seja a esquerda */
            text-align: left;     /* Opcional: centraliza o texto do "Sobre" também */
            gap: 25px;
        }
        .about-content {
            text-align: left; /* Mantém o texto do escritório alinhado à esquerda para leitura, se preferir */
        }
        .img-perfil {
            max-width: 240px;
            margin: 0 auto;
            display: block;  /* Garante que o elemento seja tratado como bloco */
        }

        /* Diferenciais */
        .diferenciais-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }
        #diferenciais {
            padding-top: 5px !important;
            padding-bottom: 5px !important;
        }
        .container-diferenciais {
            padding: 5px 10px !important; /* Quase zero de altura */
            margin: 5px !important;
        }
        .trust-bar {
            display: none;
            grid-template-columns: repeat(1, 1fr);
            justify-content: center;
            align-items: center;
            gap: 10px;
            padding: 2%;
            width: 100%;
            box-sizing: border-box;
        }
        /* Ajuste específico para os diferenciais (caixas marrom claro) */
        .trust-item {
            display: flex;
            flex-direction: row; 
            align-items: center;
            justify-content: center;
            
            /* O SEGREDO: largura automática + padding pequeno */
            width: auto !important;      /* Faz a caixa abraçar o texto */
            min-width: 180px;            /* Garante que não fique pequena demais */
            height: 32px !important;     /* TRAVA a altura para ser bem fina */
            padding: 0 15px !important;  /* Tira o padding de cima e baixo, deixa só nos lados */
            
            margin: 0 auto;
            gap: 10px;
            
        }

        .trust-item i {
            font-size: 1rem; /* Diminui um pouco o ícone no celular */
            margin-bottom: 0; /* Remove a margem de baixo já que agora estão lado a lado */
        }

        .trust-item span {
            font-size: 0.9rem; /* Ajusta o tamanho da fonte para caber melhor */
            line-height: 1;
            white-space: nowrap; /* Evita que o texto quebre em duas linhas */
            display: inline-block;
        }

        /* Áreas de Atuação (Accordion) */
        .accordion-inner {
            grid-template-columns: 1fr; 
            padding: 15px;
        }
        .accordion-inner img {
            max-height: 180px; /* Imagem não domina a tela */
            object-fit: cover;
        }
        .accordion-header {
            font-size: 1rem;
            padding: 18px 12px;
        }

        /* Soluções Inteligentes */
        .solucoes-grid-v2 {
            grid-template-columns: 1fr;
            gap: 15px;
        }

        /* Contato e Mapa */
        .contact-grid {
            grid-template-columns: 1fr;
        }
        .contact-info { 
            order: 1; 
        }
        .contact-map {
            height: 250px;
            order: 2; /* Mapa vai para baixo do texto no mobile */
            border: 5px solid var(--areia);
            height: 100%;
            min-height: 350px;
        }
        
        /* Regiões e Cidades */
        .tabs-header {
            flex-direction: column;
            gap: 5px;
        }
        .tab-link {
            width: 100%;
            font-size: 0.9rem;
        }
        .tab-content.active {
            grid-template-columns: 1fr; /* 1 coluna para evitar quebra de nomes longos */
            padding: 15px;
        }

        /* Footer */
        .footer-social {
            gap: 20px; /* Aumenta o espaço para facilitar o toque com o dedo */
        }

        /* WhatsApp Flutuante */
        .whatsapp-fixed {
            width: 60px;
            height: 60px;
            font-size: 28px;
            bottom: 35px;
            right: 15px;

            z-index: 9999;
        }
    }

    /* Ajuste para telas minúsculas (iPhone SE e antigos) */
    @media (max-width: 380px) {
        .hero-name { font-size: 1.8rem !important; }
        .section-title { font-size: 1.4rem; }
    }

/***************************************************************************************************************/