/* Variáveis globais */
:root {
    --cor-primaria: #0a0a0a;
    --cor-secundaria: #2d2d2d;
    --cor-destaque: #6e60d1;
    --cor-texto: #ffffff;
    --cor-texto-claro: #f0f0f0; /* Adicionada */
    --cor-fundo-claro: #f8f9fa; /* Adicionada */
    --cor-primaria-escura: #050505; /* Adicionada */
    --fonte-titulos: 'Sora', 'IBM Plex Sans', 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --fonte-textos: 'Manrope', 'IBM Plex Sans', 'Open Sans', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --transicao-padrao: all 0.3s ease;
    --cor-destaque-rgb: 110, 96, 209;
    --cor-destaque-transparente: rgba(var(--cor-destaque-rgb), 0.1);
}

/* Reset e estilos base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fonte-textos);
    background-color: var(--cor-primaria);
    color: var(--cor-texto);
    line-height: 1.6;
    font-weight: 400;
}

body.menu-aberto {
    overflow: hidden;
}

/* Estilos para títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulos);
    font-weight: 600;
    line-height: 1.2;
}

/* Utilitários */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUpIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blinkCursor {
    from {
        border-right-color: rgba(255, 255, 255, 0.75);
    }
    to {
        border-right-color: transparent;
    }
}

@keyframes composicao-ide {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
        filter: blur(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Classes para animação do hero-titulo */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.5s; }
.delay-5 { animation-delay: 0.6s; }
.delay-6 { animation-delay: 0.7s; }
.delay-7 { animation-delay: 0.8s; }
.delay-8 { animation-delay: 0.9s; }

/* Efeitos de hover */
.botao {
    background: var(--cor-texto);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    color: var(--cor-primaria);
    font-family: var(--fonte-textos);
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transicao-padrao);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.botao:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.botao-secundario {
    background: transparent;
    color: var(--cor-texto);
    font-family: var(--fonte-textos);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding: 12px 24px;
    border-radius: 8px;
}

.botao-secundario span {
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientText 3s ease infinite;
    transition: all 0.3s ease;
}

.botao-secundario::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    background-image: url('../img/Hero\ assets/seta.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    opacity: 0.6;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.botao-secundario:hover::after {
    animation: arrowMove 1.5s ease-in-out infinite;
    opacity: 1;
}

@keyframes arrowMove {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

@keyframes gradientText {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.botao-secundario:hover {
    background: transparent;
    opacity: 1;
}

.botao-secundario:hover span {
    -webkit-text-fill-color: var(--cor-texto);
    text-fill-color: var(--cor-texto);
    animation: none;
    text-shadow: 0 0 8px rgba(var(--cor-destaque-rgb), 0.8);
}

.janela-pq-agente {
    background: rgba(45, 45, 45, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 30px;
    margin: 20px auto;
    width: 95vw;
    max-width: 1800px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 768px) {
    .janela-pq-agente {
        width: calc(100% - 30px);
        margin: 20px auto;
        padding: 15px;
        left: 0;
        transform: none;
    }
}

/* Header */
.cabecalho {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35),
                0 2px 8px rgba(0, 0, 0, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(0) !important;
}

.cabecalho::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg, 
        rgba(10, 10, 10, 0.35) 0%,
        rgba(10, 10, 10, 0.15) 100%
    );
    z-index: -1;
}

.navegacao {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    gap: 300px; /* AUMENTADO de 60px para 120px */
    max-width: 1200px;
    margin: 0 auto;
    transition: padding-bottom 0.3s ease; /* Adiciona transição ao padding */
}

/* Remove padding inferior da navegação quando o submenu desktop está visível */
.cabecalho.submenu-desktop-visivel .navegacao {
    padding-bottom: 0;
}

.logo {
    font-family: var(--fonte-titulos);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--cor-texto);
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.logo img {
    height: 36px;
    width: auto;
    margin-right: 10px;
}

.menu-lista {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-link {
    font-family: var(--fonte-textos);
    font-weight: 500;
    color: var(--cor-texto);
    text-decoration: none;
    transition: var(--transicao-padrao);
    font-size: 1rem;
    padding: 8px 0;
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.menu-link:hover {
    color: var(--cor-destaque);
}

/* Menu botão (hamburger) */
.menu-botao {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000;
    font-family: var(--fonte-textos);
}

.menu-botao span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--cor-texto);
    margin: 5px 0;
    transition: var(--transicao-padrao);
}

.menu-botao span:nth-child(2) {
    width: 18px;
    margin-left: 6px;
}

/* Menu Mobile */
@media (max-width: 768px) {
    .menu-botao {
        display: block;
    }

    .menu-lista {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(10, 10, 10, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center; /* Centraliza os LIs principais */
        gap: 20px;
        padding: 80px 20px ;
        z-index: 999;
    }

    /* REMOVIDO: Regra que desalinha o item Soluções */
    /* .menu-lista li.has-submenu {
        margin-left: 80px !important; 
        width: auto !important;       
    } */

    .menu-lista.ativo {
        display: flex;
    }

    /* Animação do hambúrguer */
    .menu-botao.ativo span:first-child {
        transform: rotate(45deg) translate(7px, 7px);
    }

    .menu-botao.ativo span:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }

    .menu-botao.ativo span:last-child {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    .menu-link {
        font-size: 1.2rem;
        padding: 15px 20px;
        display: block;
        text-align: center; /* Centraliza texto dos links normais */
        opacity: 0.9;
        transition: all 0.3s ease;
    }

    /* ADICIONADO: Estilo Específico para o Link "Soluções" */
    .menu-lista li.has-submenu > a.menu-link {
        display: block !important; /* Modificado para block ao invés de flex */
        text-align: center;
        padding: 15px 20px;
        width: 100%; /* Garante largura completa */
        position: relative; /* Para posicionamento do pseudo-elemento */
    }
    
    /* Indicador visual para o submenu (seta suave) */
    .menu-lista li.has-submenu > a.menu-link::after {
        content: '▾'; /* Símbolo de seta para baixo Unicode */
        display: inline-block;
        margin-left: 8px;
        font-size: 1.2em; /* Aumentado de 0.85em para 1.2em */
        opacity: 0.8;
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Transição mais suave com efeito elástico */
    }
    
    /* Rotação da seta quando o submenu está aberto */
    .has-submenu.submenu-aberto > a.menu-link::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* Overlay do menu */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 998;
    }

    .menu-overlay.ativo {
        display: block;
    }

    /* Estilos dropdown aninhado mobile */
    .has-submenu .submenu {
        display: none;
        position: static;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border: none;
        padding-left: 0;
        min-width: unset;
        width: 100%; /* Garantir largura total */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: max-height 0.8s cubic-bezier(0.17, 0.84, 0.44, 1), 
                    opacity 0.6s ease-in-out,
                    transform 0.6s cubic-bezier(0.17, 0.84, 0.44, 1);
    }
    .has-submenu .submenu.ativo {
         /* Usar Flexbox para centralizar itens internos */
         display: flex !important;
         flex-direction: column;
         align-items: center; /* Centraliza os itens do submenu (links) */
         max-height: 300px; /* Altura máxima para animação */
         opacity: 1;
         transform: translateY(0);
         padding-top: 6px; /* Reduzir padding */
         padding-bottom: 6px; /* Reduzir padding */
         gap: 2px; /* Espaçamento pequeno entre itens */
    }

    .has-submenu .submenu li {
        /* Garantir que o LI não interfira na centralização */
        width: auto;
        list-style: none;
        padding-left: 0;
        margin-left: 0;
        margin-bottom: 0; /* Eliminar margem entre itens */
    }
    .has-submenu .submenu-link {
        display: block;
        padding: 5px 12px; /* Padding reduzido */
        color: #c0c0c0; /* Cor prata clara para diferenciar */
        text-decoration: none;
        font-size: 1.1rem;
        font-family: var(--fonte-secundaria);
        white-space: normal;
        transition: all 0.5s cubic-bezier(0.17, 0.84, 0.44, 1);
        text-align: center; /* Garantir centralização do texto */
        transform: translateY(0); /* Estado inicial para animação */
        opacity: 0;
        animation: fadeInItems 0.4s ease-out forwards;
        animation-delay: calc(0.05s * var(--item-index, 0)); /* Atraso consistente */
    }
    
    @keyframes fadeInItems {
        from {
            opacity: 0;
            transform: translateY(-5px); /* Movimento reduzido para animação mais suave */
        }
        to {
            opacity: 0.9;
            transform: translateY(0);
        }
    }
    
    .has-submenu .submenu-link:hover {
        color: #e6e6e6; /* Prata mais clara no hover */
        opacity: 1;
        transform: translateY(-2px); /* Leve movimento para cima no hover */
    }

    /* Setas Mobile */
    .menu-link .submenu-arrow-mobile {
        display: none; /* Esconder a seta no mobile */
    }

    .navegacao {
        justify-content: space-between;
        gap: 0;
        padding: 8px 20px;
    }
    
    .logo {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .menu-botao {
        display: block;
    }

    .menu-lista {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(10, 10, 10, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center; /* Centraliza os LIs principais */
        gap: 20px;
        padding: 80px 20px ;
        z-index: 999;
    }

    /* REMOVIDO: Regra que desalinha o item Soluções */
    /* .menu-lista li.has-submenu {
        margin-left: 80px !important; 
        width: auto !important;       
    } */

    .menu-lista.ativo {
        display: flex;
    }

    /* Animação do hambúrguer */
    .menu-botao.ativo span:first-child {
        transform: rotate(45deg) translate(7px, 7px);
    }

    .menu-botao.ativo span:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }

    .menu-botao.ativo span:last-child {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    .menu-link {
        font-size: 1.2rem;
        padding: 15px 20px;
        display: block;
        text-align: center; /* Centraliza texto dos links normais */
        opacity: 0.9;
        transition: all 0.3s ease;
    }

    /* ADICIONADO: Estilo Específico para o Link "Soluções" */
    .menu-lista li.has-submenu > a.menu-link {
        display: block !important; /* Modificado para block ao invés de flex */
        text-align: center;
        padding: 15px 20px;
        width: 100%; /* Garante largura completa */
        position: relative; /* Para posicionamento do pseudo-elemento */
    }
    
    /* Indicador visual para o submenu (seta suave) */
    .menu-lista li.has-submenu > a.menu-link::after {
        content: '▾'; /* Símbolo de seta para baixo Unicode */
        display: inline-block;
        margin-left: 8px;
        font-size: 1.2em; /* Aumentado de 0.85em para 1.2em */
        opacity: 0.8;
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Transição mais suave com efeito elástico */
    }
    
    /* Rotação da seta quando o submenu está aberto */
    .has-submenu.submenu-aberto > a.menu-link::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* Overlay do menu */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 998;
    }

    .menu-overlay.ativo {
        display: block;
    }

    /* Estilos dropdown aninhado mobile */
    .has-submenu .submenu {
        display: none;
        position: static;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border: none;
        padding-left: 0;
        min-width: unset;
        width: 100%; /* Garantir largura total */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: max-height 0.8s cubic-bezier(0.17, 0.84, 0.44, 1), 
                    opacity 0.6s ease-in-out,
                    transform 0.6s cubic-bezier(0.17, 0.84, 0.44, 1);
    }
    .has-submenu .submenu.ativo {
         /* Usar Flexbox para centralizar itens internos */
         display: flex !important;
         flex-direction: column;
         align-items: center; /* Centraliza os itens do submenu (links) */
         max-height: 300px; /* Altura máxima para animação */
         opacity: 1;
         transform: translateY(0);
         padding-top: 6px; /* Reduzir padding */
         padding-bottom: 6px; /* Reduzir padding */
         gap: 2px; /* Espaçamento pequeno entre itens */
    }

    .has-submenu .submenu li {
        /* Garantir que o LI não interfira na centralização */
        width: auto;
        list-style: none;
        padding-left: 0;
        margin-left: 0;
        margin-bottom: 0; /* Eliminar margem entre itens */
    }
    .has-submenu .submenu-link {
        display: block;
        padding: 5px 12px; /* Padding reduzido */
        color: #c0c0c0; /* Cor prata clara para diferenciar */
        text-decoration: none;
        font-size: 1.1rem;
        font-family: var(--fonte-secundaria);
        white-space: normal;
        transition: all 0.5s cubic-bezier(0.17, 0.84, 0.44, 1);
        text-align: center; /* Garantir centralização do texto */
        transform: translateY(0); /* Estado inicial para animação */
        opacity: 0;
        animation: fadeInItems 0.4s ease-out forwards;
        animation-delay: calc(0.05s * var(--item-index, 0)); /* Atraso consistente */
    }
    
    @keyframes fadeInItems {
        from {
            opacity: 0;
            transform: translateY(-5px); /* Movimento reduzido para animação mais suave */
        }
        to {
            opacity: 0.9;
            transform: translateY(0);
        }
    }
    
    .has-submenu .submenu-link:hover {
        color: #e6e6e6; /* Prata mais clara no hover */
        opacity: 1;
        transform: translateY(-2px); /* Leve movimento para cima no hover */
    }

    /* Setas Mobile */
    .menu-link .submenu-arrow-mobile {
        display: none; /* Esconder a seta no mobile */
    }

    .navegacao {
        justify-content: space-between;
        gap: 0;
        padding: 8px 20px;
    }
    
    .logo {
        margin-right: 0;
    }
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80px;
    position: relative;
    overflow: hidden;
    background: var(--cor-primaria);
    width: 100%;
    padding-bottom: 0;
}

.hero-conteudo {
    max-width: 900px;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    text-align: left;
    padding: 0 20px;
    margin-top: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.hero-titulo {
    font-family: var(--fonte-titulos);
    font-weight: 600;
    font-size: clamp(1.5rem, 4.5vw, 2.9rem);
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--cor-texto);
    letter-spacing: -0.03em;
    text-align: left;
    max-width: 900px;
    opacity: 0;
    animation: composicao-ide 1.3s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    animation-delay: 0.3s;
}

.hero-titulo span {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    filter: blur(20px);
    animation: composicao-ide 1.1s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

.hero-descricao {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin-top: -0.75rem;
    margin-bottom: 1.5rem;
    max-width: 600px;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: left;
    opacity: 0;
    animation: composicao-ide 1.3s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    animation-delay: 0.8s;
}

.hero-botoes {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    max-width: 600px;
    margin-top: -1rem;
    opacity: 0;
    animation: composicao-ide 1.3s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    animation-delay: 1s;
}

.hero-botoes .botao {
    background: var(--cor-texto);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    color: var(--cor-primaria);
    font-family: var(--fonte-textos);
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transicao-padrao);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.hero-botoes .botao:first-child {
    background: #000000;
    color: white;
    position: relative;
    z-index: 1;
    padding: 10px 22px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.hero-botoes .botao:first-child::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #B08CFF, #E26DDE, #FFA85C);
    background-size: 200% 200%;
    border-radius: 9px;
    z-index: -1;
    animation: gradientAnimation 3s ease infinite;
    transition: all 0.3s ease;
}

.hero-botoes .botao:first-child:hover::before {
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
}

.hero-botoes .botao:first-child:hover {
    transform: none;
    /* Brilho mais suave: blur menor, spread menor, opacidade menor */
    box-shadow: 0 0 10px 2px rgba(176, 140, 255, 0.5), /* Roxo mais suave */
                0 0 10px 2px rgba(255, 168, 92, 0.4);  /* Laranja mais suave */
}

.hero-botoes .botao:first-child span {
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.hero-botoes .botao:first-child:hover span {
    background: linear-gradient(45deg, #B08CFF, #E26DDE, #FFA85C);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientText 3s ease infinite;
}

.hero-botoes .botao:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    border-radius: 6px;
    z-index: -1;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.hero-svg-container {
    position: absolute;
    width: 100%;
    height: calc(100vh - 300px);
    bottom: 15px;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
}

.hero-svg-container svg {
    width: auto;
    height: 85%;
    max-width: none;
    object-fit: contain;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    cursor: default;
}

.hero-svg-container path,
.hero-svg-container polygon {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-svg-container path.visivel,
.hero-svg-container polygon.visivel {
    opacity: 1;
}

.hero-svg-container image {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    mix-blend-mode: normal;
}

.hero-svg-container image.visivel {
    opacity: 1;
    transform: translateY(0);
}

/* Seção Quem Somos (agora após os serviços) */
.pq-agente {
    position: relative;
    padding: 100px 0;
    background: #000000;
    margin-top: -50px;
    z-index: 0;
}

.secao-titulo {
    font-family: var(--fonte-titulos);
    font-weight: 600;
    font-size: 2.5rem;
    margin-bottom: 50px;
    text-align: center;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.card {
    background: rgba(45, 45, 45, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 30px;
    transition: var(--transicao-padrao);
}

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

.card h3 {
    color: var(--cor-destaque);
    margin-bottom: 15px;
}

.card p {
    font-family: var(--fonte-textos);
    font-weight: 400;
}

/* Seção Serviços */
.servicos {
    padding: 100px 0;
    background: var(--cor-secundaria);
    position: relative;
    z-index: 1;
    margin-top: 0;
}

.servicos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.servico-card {
    background: var(--cor-primaria);
    border-radius: 10px;
    padding: 30px;
    transition: var(--transicao-padrao);
}

.servico-card:hover {
    transform: translateY(-5px);
}

/* === Seção Logos (agora após o hero) === */
.secao-logos {
    padding: 4rem 0;
    background-color: var(--cor-primaria);
    overflow: hidden;
    width: 100%;
    position: relative;
}

.secao-logos::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.2) 20%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0.8) 80%,
        #000000 100%
    );
    pointer-events: none;
    z-index: 2;
}

.secao-logos .container {
    max-width: 100%;
    padding: 0;
    position: relative;
    z-index: 1;
}

.titulo-logos {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--cor-texto);
    padding: 0 20px;
    font-size: 30px;
}

.logo-carousel {
    width: 100%;
    padding: 20px 0;
    position: relative;
    margin-bottom: 50px;
}

.logo-carousel::before,
.logo-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.logo-carousel::before {
    left: 0;
    background: linear-gradient(
        to right,
        var(--cor-primaria) 0%,
        rgba(10, 10, 10, 0.8) 30%,
        transparent 100%
    );
}

.logo-carousel::after {
    right: 0;
    background: linear-gradient(
        to left,
        var(--cor-primaria) 0%,
        rgba(10, 10, 10, 0.8) 30%,
        transparent 100%
    );
}

.logo-carousel .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
}

.logo-carousel .swiper-slide img {
    max-width: 113px;
    height: auto;
    filter: grayscale(1);
    opacity: 0.7;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.85);
}

.logo-carousel .swiper-slide-active img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.15);
}

.logo-carousel .swiper-slide-prev img,
.logo-carousel .swiper-slide-next img {
    filter: grayscale(0.5);
    opacity: 0.85;
    transform: scale(0.95);
}

.swiper-pagination {
    position: relative;
    margin-top: 20px;
}

.swiper-pagination-bullet {
    background: var(--cor-primaria);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

@media (max-width: 768px) {
    .logo-carousel .swiper-slide img {
        max-width: 88px;
    }
    .logo-carousel::before,
    .logo-carousel::after {
        width: 25%;
    }
    
    .titulo-logos {
        font-size: 24px;
    }
}

/* === Seção Fundamentos === */
.secao-fundamentos {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--cor-secundaria) 0%, var(--cor-primaria) 100%);
    position: relative;
    overflow: hidden;
}

.grid-fundacoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: start;
    margin-top: 60px;
}

.item-fundacao {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-fundacao:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.item-fundacao h3 {
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: var(--cor-destaque);
    font-weight: 600;
}

.item-fundacao p {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--fonte-textos);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
    font-weight: 400;
}

.logos-conformidade {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.logo-conformidade {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    transition: all 0.3s ease;
}

.logo-conformidade:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* === Seção Metodologia === */
.secao-metodologia {
    padding: 120px 0;
    background: var(--cor-primaria);
    position: relative;
}

.secao-metodologia::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
}

.grid-rastreamento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.item-rastreamento {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    transition: all 0.3s ease;
}

.item-rastreamento:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.item-rastreamento h3 {
    font-size: 1.4rem;
    margin-bottom: 16px;
    color: var(--cor-destaque);
    font-weight: 600;
}

.item-rastreamento p {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--fonte-textos);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
    font-weight: 400;
}

.mockup-interno {
    height: 200px;
    width: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.mockup-interno::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 100%
    );
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-30%) translateY(-30%) rotate(45deg); }
    100% { transform: translateX(30%) translateY(30%) rotate(45deg); }
}

/* === Seção Colaboração === */
.secao-colaboracao {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%);
    position: relative;
}

.grid-flex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.cartao {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    height: 100%;
    transition: all 0.3s ease;
}

.cartao:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.cartao h3 {
    font-size: 1.4rem;
    margin-bottom: 16px;
    color: var(--cor-destaque);
    font-weight: 600;
}

.cartao p {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--fonte-textos);
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
}

/* === Rodapé === */
.rodape {
    padding: 80px 0 40px;
    background: var(--cor-secundaria);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rodape-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.rodape-grid {
    display: grid;
    grid-template-columns: 1.8fr 1.5fr 1.5fr 1fr; /* Reduzida a proporção da primeira coluna */
    gap: 40px; 
    margin-bottom: 60px;
}

.rodape-coluna h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--cor-texto); 
    font-weight: 600;
    margin-top: 12px; /* Mantido: Margem para alinhar visualmente com o logo */
}

.rodape-coluna p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.45; /* Reduzido de 1.6 para apertar as linhas */
    margin-bottom: 24px; /* Mantém margem padrão para outros parágrafos */
    max-width: 400px;
}

.rodape-links {
    list-style: none;
}

.rodape-links li {
    margin-bottom: 12px;
}

.rodape-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.rodape-links a:hover {
    color: var(--cor-destaque);
}

.rodape-social {
    display: flex;
    flex-direction: column; /* Links em coluna */
    gap: 12px; /* Espaçamento entre os links */
    margin-top: 0; /* Remover margem superior se não precisar mais */
    align-items: flex-start; /* Alinha itens à esquerda */
}

.rodape-social a { 
    color: rgba(255, 255, 255, 0.7); 
    transition: all 0.3s ease;
    text-decoration: none; 
    display: inline-flex; /* Para alinhar ícone e texto */
    align-items: center; /* Alinha ícone e texto verticalmente */
    gap: 8px; /* Espaço entre ícone e nome */
}

.rodape-social a i.ti { 
    font-size: 20px; /* Ícone um pouco menor talvez? Ajuste se necessário */
    vertical-align: middle; 
    font-weight: 400; 
    flex-shrink: 0; /* Impede que o ícone encolha */
}

.rodape-social a .social-name { /* Estilo para o nome da rede */
    font-size: 0.95rem;
}

.rodape-social a:hover {
    color: var(--cor-destaque); 
    transform: translateY(-2px); /* Mantém o efeito de subir */
}

.rodape-inferior {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.rodape-inferior-links {
    display: flex;
    gap: 24px;
}

.rodape-inferior-links a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.rodape-inferior-links a:hover {
    color: var(--cor-destaque);
}

a.voltar-topo {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

@media (max-width: 768px) {
    .rodape-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .rodape-inferior {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .rodape-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .rodape-inferior-links {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 100vh;
        padding-top: 100px;
        padding-bottom: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .hero-conteudo {
        padding: 0 20px;
        max-width: 100%;
        margin-top: 0;
    }

    .hero-svg-container {
        position: relative;
        height: 45vh;
        top: auto;
        transform: none;
        margin-top: auto;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-svg-container svg {
        max-height: 100%;
        width: auto;
        height: auto;
        max-width: 90%;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .hero {
        padding-top: 80px;
    }

    .hero-svg-container {
        height: 40vh;
    }
}

@keyframes scrollLogos {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50%));
    }
}

/* Animação do SVG no hover */
.hero-svg-container svg:hover {
    animation: flutuar 6.8s ease-in-out infinite;
    transform-origin: center 60%;
    will-change: transform;
}

@keyframes flutuar {
    0% {
        transform: rotate(0deg) translateY(0px);
    }
    25% {
        transform: rotate(0.3deg) translateY(-3px);
    }
    50% {
        transform: rotate(0deg) translateY(0px);
    }
    75% {
        transform: rotate(-0.3deg) translateY(3px);
    }
    100% {
        transform: rotate(0deg) translateY(0px);
    }
}

/* WhatsApp Flutuante */
.whatsapp-flutuante {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: rgba(7, 94, 84, 0.15);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(7, 94, 84, 0.1);
    transition: all 0.3s ease;
    z-index: 1000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(7, 94, 84, 0.2);
}

.whatsapp-flutuante::before {
    content: '';
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23075E54'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.8;
}

.whatsapp-flutuante:hover {
    transform: scale(1.1);
    background: rgba(7, 94, 84, 0.25);
    box-shadow: 0 4px 20px rgba(7, 94, 84, 0.2);
}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .whatsapp-flutuante {
        bottom: 15px;
        right: 15px;
        width: 50px;
        height: 50px;
    }
    
    .whatsapp-flutuante::before {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 768px) {
    .hero-descricao {
        font-size: 1rem;
        margin-top: -0.5rem;
        margin-bottom: 1.25rem;
    }
    
    .hero-titulo {
        margin-bottom: 15px;
    }
    
    .hero-botoes {
        margin-top: -0.75rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }
    
    .hero-botoes .botao,
    .hero-botoes .botao-secundario {
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 0.9rem;
    }
    
    .hero-botoes .botao:first-child {
        padding: 6px 12px;
    }
    
    .hero-botoes .botao-secundario::after {
        width: 16px;
        height: 16px;
        margin-left: 4px;
    }
    
    .hero-botoes .botao span,
    .hero-botoes .botao-secundario span {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .hero-botoes {
        flex-wrap: wrap;
    }
    
    .hero-botoes .botao,
    .hero-botoes .botao-secundario {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
    
    .hero-botoes .botao:first-child {
        padding: 6px 10px;
    }
    
    .hero-botoes .botao-secundario::after {
        width: 14px;
        height: 14px;
        margin-left: 3px;
    }
    
    .hero-botoes .botao span,
    .hero-botoes .botao-secundario span {
        font-size: 0.85rem;
    }
}

/* Estilos para a Seção Soluções */
.solucoes {
    position: relative;
    padding: 100px 0;
    background-color: #000000;
    overflow: hidden;
}

/* Elemento para o fundo animado - comentado pois substituído pelo efeito Vanta.NET
.solucoes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../img/backgrounds/rede-vetorial.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.15;
    z-index: 0;
    animation: pulseNetwork 12s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes pulseNetwork {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
         transform: scale(0.8);
         opacity: 0.0;
    }
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
}
*/

.solucoes .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.solucoes .secao-titulo {
    color: var(--cor-texto-claro);
    margin-bottom: 60px;
    text-align: center;
}

.solucoes-categorias {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.solucao-categoria {
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid var(--cor-destaque-transparente);
    border-radius: 12px;
    padding: 40px;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.solucao-categoria:hover {
    /* transform: translateY(-8px); */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.categoria-titulo {
    display: flex; /* Adicionado para alinhar itens */
    align-items: center; /* Adicionado para centralizar verticalmente */
    font-size: 1.6rem;
    margin-bottom: 25px;
    color: var(--cor-texto);
    position: relative; /* Necessário para o pseudo-elemento */
    padding-bottom: 8px; /* Espaço para o sublinhado */
}

/* Novo: Estilo para o sublinhado roxo */
.categoria-titulo::after {
    content: '';
    position: absolute;
    bottom: 0; /* Posição na parte inferior com padding */
    left: calc(50px + 15px); /* Ajustado para ícone de 50px e margem de 15px */
    width: calc(100% - (50px + 15px)); /* Ajustado para ícone de 50px e margem de 15px */
    height: 3px; /* Espessura do sublinhado */
    background-color: var(--cor-destaque); /* Cor roxa */
    transform: scaleX(1); /* Garante visibilidade */
    transform-origin: left; /* Origem da transformação (se animado no futuro) */
}

.categoria-icone {
    width: 50px; /* Restaurado para 50px */
    height: 50px; /* Restaurado para 50px */
    margin-right: 15px; /* Espaçamento entre ícone e texto */
    /* filter: brightness(0) invert(1); Removido para restaurar a cor original */
}

.solucoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.solucao-card {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    box-sizing: border-box;
}

.solucao-card:hover {
    background-color: rgba(255, 255, 255, 0.07);
    transform: translateY(-6px) scale(1.01);
    border-color: var(--cor-destaque-transparente);
    box-shadow: 0 8px 20px rgba(var(--cor-destaque-rgb), 0.08);
}

.solucao-icone {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    margin-bottom: 25px;
    background-color: var(--cor-destaque-transparente);
    border-radius: 50%;
    display: inline-block;
    color: var(--cor-destaque);
    font-size: 1.8rem;
    transition: transform 0.3s ease;
    vertical-align: middle;
}

/* Animação do ícone no hover do card */
.solucao-card:hover .solucao-icone {
    transform: scale(1.15) rotate(8deg);
}

/* Regra que estava removendo o content dos placeholders - Mantida comentada */
/* .solucao-card:nth-child(1) .solucao-icone::before,
.solucao-card:nth-child(2) .solucao-icone::before,
.solucao-card:nth-child(3) .solucao-icone::before {
    content: '';
} */

.solucao-card h4 {
    font-family: var(--fonte-titulos);
    color: var(--cor-texto-claro);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.solucao-card p {
    color: var(--cor-texto);
    font-size: 0.98rem;
    line-height: 1.7;
    flex-grow: 1;
    margin-bottom: 25px;
}

.botao-card {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--cor-destaque);
    color: var(--cor-fundo);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, border-color 0.3s ease;
    text-align: center;
    margin-top: auto;
    align-self: flex-start;
}

.botao-card:hover {
    background-color: transparent;
    border-color: var(--cor-destaque);
    color: var(--cor-destaque);
    transform: translateY(-3px);
}

/* Responsividade */
@media (max-width: 992px) {
    .solucoes-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    .solucao-categoria {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .solucoes {
        padding: 60px 0;
    }
    .solucoes .secao-titulo {
        font-size: 1.5rem;
        margin-bottom: 40px;
    }
    .categoria-titulo {
        font-size: 1rem;
    }
    .solucoes-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .solucao-card {
        padding: 20px;
    }

    .solucoes::before {
        background-size: cover;
        background-position: center;
        opacity: 0.25;
    }

    .pq-agente .secao-titulo {
        font-size: 24px;
    }

    .secao-depoimentos .secao-titulo,
    .secao-certificacoes .secao-titulo {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .solucao-categoria {
        padding: 25px;
    }
     .categoria-titulo {
        font-size: 1.4rem;
    }
    .solucao-card h4 {
        font-size: 1.2rem;
    }
    .solucao-card p {
        font-size: 0.9rem;
    }
    .botao-card {
        padding: 8px 16px;
        font-size: 0.9rem;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Estilos para Seção Depoimentos */
.secao-depoimentos {
    padding: 80px 0;
    background-color: #000000; 
    position: relative;
}

/* Adiciona o pseudo-elemento para o degradê de transição */
.secao-depoimentos::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Altura do degradê */
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0) 0%, /* Transparente (cor de fundo da seção depoimentos) */
        rgba(10, 10, 10, 0.8) 80%, /* Cor primária com um pouco de transparência */
        var(--cor-primaria) 100% /* Cor primária sólida (fundo da seção certificações) */
    );
    z-index: 2; /* Acima do fundo, abaixo do conteúdo da próxima seção */
    pointer-events: none; /* Não interfere com cliques */
}

.secao-depoimentos .container {
    position: relative;
    z-index: 1;
    max-width: 1100px; /* Ajustar largura se necessário para o carrossel */
}

/* Estilos para o container Swiper de Depoimentos */
.depoimento-carousel {
    width: 100%;
    padding: 20px 0 50px; /* Espaço para paginação/navegação */
    position: relative;
}

/* Estilos para cada slide/item */
.depoimento-carousel .swiper-slide {
    height: auto; /* Permitir altura automática */
    display: flex; /* Para centralizar o card se necessário */
    justify-content: center;
    padding: 0 10px; /* Pequeno espaçamento lateral */
    box-sizing: border-box;
}

.item-depoimento {
    background: #000000; /* Fallback de fundo */
    padding: 40px 30px 30px; 
    border-radius: 14px; 
    text-align: center;
    transition: var(--transicao-padrao);
    box-shadow: 0 6px 20px rgba(var(--cor-destaque), 0.1); 
    display: flex;
    flex-direction: column;
    align-items: center; 
    height: 100%; 
    box-sizing: border-box;
    position: relative; 
    width: 100%; 
    /* overflow: hidden; - Não mais necessário aqui */
    z-index: 1; 

    /* Borda transparente para definir a espessura */
    border: 2px solid transparent;

    /* Múltiplos Fundos para Efeito de Borda */
    background-image: 
        linear-gradient(#000, #000), /* Camada preta sólida */
        conic-gradient(
            from var(--angle),
            var(--cor-destaque), /* Roxo principal */
            #a88bff, /* Roxo mais claro/vibrante */
            #8e6fff, /* Outro tom de roxo */
            #a88bff, /* Roxo mais claro/vibrante novamente */
            var(--cor-destaque) /* Roxo principal novamente */
        ); /* Camada de gradiente animado */
    background-origin: border-box; /* Ambas originam na borda */
    background-clip: padding-box, border-box; /* Preto dentro (padding), Gradiente total (borda) */

    /* Animação do gradiente */
    animation: rotate-gradient 4s linear infinite;
    --angle: 0deg; /* Variável para animação */
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate-gradient {
    0% {
        --angle: 0deg;
    }
    100% {
        --angle: 360deg;
    }
}

.item-depoimento:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(var(--cor-destaque), 0.25); 
    border-width: 3px; /* Aumenta a espessura da borda no hover */
    /* A animação da borda pode ser acelerada se desejado */
     animation-duration: 2s; /* Acelerar no hover */
}

.depoimento-foto {
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Espaço redondo para foto */
    background-color: rgba(255, 255, 255, 0.1); /* Cor placeholder */
    margin-bottom: 25px;
    border: 3px solid var(--cor-destaque); /* Borda roxa na foto também */
    box-shadow: 0 0 15px rgba(var(--cor-destaque), 0.3);
    /* Adicione background-image aqui para a foto real */
    background-size: cover;
    background-position: center;
}

.depoimento-icone {
    font-size: 2.8rem;
    color: var(--cor-destaque);
    margin-bottom: 20px;
    display: inline-block;
    position: absolute; /* Posicionar o ícone */
    top: 20px;
    left: 25px;
    opacity: 0.5;
}

.item-depoimento h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.3rem; /* Ajustar tamanho */
    margin-top: 0; /* Remover margem superior se houver */
    margin-bottom: 15px;
    color: var(--cor-texto);
}

.item-depoimento p {
    font-family: var(--fonte-textos);
    font-size: 0.95rem; /* Ajustar tamanho */
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8); /* Texto um pouco mais claro */
    margin-bottom: 25px;
    font-style: italic;
    flex-grow: 1; /* Para empurrar o autor para baixo */
}

.depoimento-autor {
    font-family: var(--fonte-textos);
    font-weight: 600; /* Nome mais destacado */
    font-size: 0.9rem;
    color: var(--cor-destaque); /* Autor em roxo */
    display: block;
    margin-top: auto;
}

/* Estilos para Paginação e Navegação do Swiper */
.depoimento-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.4);
    opacity: 0.7;
    transition: all 0.3s ease;
    width: 10px;
    height: 10px;
}

.depoimento-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: var(--cor-destaque);
    opacity: 1;
    width: 12px;
    height: 12px;
}

.depoimento-button-prev,
.depoimento-button-next {
    /* ... estilos existentes ... */
    display: none !important; /* Remover botões de navegação */
}

/* Efeito de brilho e crescimento na seta ao passar o mouse no botão */
/* 
.depoimento-button-prev:hover::after,
.depoimento-button-next:hover::after {
    transform: scale(1.1); 
    text-shadow: 
        0 0 4px #fff,
        0 0 8px #fff,
        0 0 12px var(--cor-destaque); 
}
*/

@media (max-width: 768px) {
    .secao-depoimentos {
        padding: 60px 0;
    }

    .item-depoimento {
        padding: 30px 20px 20px;
    }

     .depoimento-foto {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }

    .depoimento-icone {
        font-size: 2.2rem;
        top: 15px;
        left: 20px;
    }

    .depoimento-button-prev,
    .depoimento-button-next {
        display: none; /* Ocultar botões em telas menores, usar só paginação */
    }

    .depoimento-carousel {
        padding-bottom: 40px; /* Menos espaço para paginação */
    }
}

@media (max-width: 480px) {
    .item-depoimento h3 {
        font-size: 1.15rem;
    }

    .item-depoimento p {
        font-size: 0.9rem;
    }

    .depoimento-foto {
        width: 60px;
        height: 60px;
    }
}

/* Estilos para Seção Certificações */
.secao-certificacoes {
    padding: 80px 0;
    background-color: var(--cor-primaria); 
    position: relative; /* Necessário para z-index */
    z-index: 1; /* Camada base */
}

.secao-certificacoes .container {
    position: relative; /* Para empilhar sobre o ::after da seção anterior */
    z-index: 3; /* Conteúdo acima do degradê */
}

.grid-certificacoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 60px; /* Aumentado de 30px para 60px */
    margin-top: 40px;
    align-items: stretch; /* Garante que os itens tenham a mesma altura */
}

.item-certificacao {
    /* Alterando para gradiente cinza escuro para preto */
    background: linear-gradient(to bottom, #222, #000);
    padding: 35px 30px;
    border-radius: 10px; /* Raio de borda base */
    text-align: center;
    transition: var(--transicao-padrao);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Mantendo a borda sutil original */
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    position: relative; /* Necessário para os pseudo-elementos */
    z-index: 1; /* Garante que o card base fique acima do fundo */
}

/* Cria as bordas duplas roxas usando pseudo-elementos */
.item-certificacao::before,
.item-certificacao::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #8A2BE2; /* Roxo (BlueViolet) */
  /* Raio de borda um pouco maior para as bordas externas */
  border-radius: 18px; /* Ex: 10px (base) + 8px (offset) */
  box-sizing: border-box;
  pointer-events: none; /* Impede que as bordas interfiram com cliques */
  z-index: -1; /* Coloca as bordas atrás do conteúdo do card */
  transition: top 0.3s ease, left 0.3s ease; /* Adiciona transição suave para o hover */
}

/* Posiciona a primeira borda (::before) */
.item-certificacao::before {
  top: -8px;
  left: -8px;
}

/* Posiciona a segunda borda (::after) */
.item-certificacao::after {
  top: 8px;
  left: 8px;
}

/* Garante que o conteúdo interno fique sobre as bordas */
.item-certificacao > * {
    position: relative; /* Necessário para z-index funcionar */
    z-index: 2;
}

.item-certificacao:hover {
    transform: translateY(-3px) scale(1.02);
    /* Mantém o fundo original no hover, ou ajuste se desejar */
    /* background: linear-gradient(145deg, var(--cor-secundaria), rgba(138, 43, 226, 0.08)); */
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.15); /* Sombra roxa suave */
}

/* Efeito Hover: move ligeiramente as bordas para fora */
.item-certificacao:hover::before {
    top: -10px;
    left: -10px;
}

.item-certificacao:hover::after {
    top: 10px;
    left: 10px;
}

.certificacao-icone {
    font-size: 3rem; /* Tamanho dos ícones */
    color: var(--cor-destaque);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.item-certificacao:hover .certificacao-icone {
    transform: scale(1.1);
}

.item-certificacao h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--cor-texto);
}

.item-certificacao p {
    font-family: var(--fonte-textos);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 25px; /* Espaço antes dos logos, se houver */
    /* flex-grow: 1; */ /* REMOVIDO para não empurrar logos para baixo */
}

.logos-conformidade {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px; /* Espaçamento entre os logos */
    margin-top: auto; /* Empurra para o final do card */
    padding-top: 20px; /* Espaço acima dos logos */
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* Linha separadora sutil */
}

.logo-conformidade {
    display: inline-block;
    position: relative; /* Necessário para o tooltip */
    transition: transform 0.3s ease;
}

.logo-conformidade:hover {
    transform: scale(1.1);
}

.logo-conformidade img {
    max-height: 40px; /* Ajuste a altura máxima dos logos */
    width: auto;
    filter: grayscale(50%) brightness(0.8); /* Efeito sutil nos logos */
    transition: var(--transicao-padrao);
}

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

/* Estilos Básicos para Tooltip */
.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%; /* Posiciona acima do elemento */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
  pointer-events: none; /* Evita que o tooltip interfira no hover do logo */
}

/* Pequena seta para o tooltip */
.tooltip::after {
  content: '';
  position: absolute;
  bottom: 110%; /* Alinha com a base do ::before */
  margin-bottom: -5px; /* Ajusta a posição da seta */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
   pointer-events: none;
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Ajustes responsivos para as novas seções */
@media (max-width: 768px) {
    .secao-certificacoes {
        padding: 60px 0;
    }

    .grid-certificacoes {
        grid-template-columns: 1fr;
        gap: 40px; /* Aumentado de 25px para 40px no mobile */
    }

    .item-certificacao {
        padding: 25px;
    }

    .certificacao-icone {
        font-size: 2rem;
    }

     .logos-conformidade {
        gap: 20px;
    }

    .logo-conformidade img {
        max-height: 35px;
    }
}

@media (max-width: 480px) {
    .item-certificacao h3 {
        font-size: 1.2rem;
    }

    .item-certificacao p {
        font-size: 0.9rem;
    }

    .logos-conformidade {
        flex-wrap: wrap;
        gap: 15px;
    }

     .logo-conformidade img {
        max-height: 30px;
    }

    .tooltip::before {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}

/* === Estilos para a Nova Seção CTA Footer === */
.cta-footer {
    padding: 80px 0;
    background-color: var(--cor-primaria);
    position: relative;
    overflow: hidden;
    height: auto;
    min-height: 300px;
}

.cta-footer-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    height: 100%;
    position: relative;
}

.cta-texto {
    max-width: 60%;
    opacity: 0;
    transform: translateY(30px);
    height: 250px; /* Altura fixa para comportar o texto */
    display: flex;
    flex-direction: column;
}

.cta-titulo {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--cor-texto);
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px; /* Adicionado espaçamento inferior */
}

.cta-subtextos {
    margin-top: 15px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cta-subtexto {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    min-height: 30px;
    display: flex;
    align-items: center;
}

/* Estilos para os ícones */
.cta-titulo-icone,
.cta-subtexto-icone {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    display: inline-block;
    vertical-align: middle;
}

.cta-titulo-icone {
    width: 45px;
    height: 45px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0;
}

.cta-botao-container {
    position: absolute;
    right: 0;
    top: 60%; /* Aumentado de 50% para 60% para descer o container */
    transform: translateY(-50%);
    text-align: center;
    opacity: 0;
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 120px;
}

.cta-botao {
    padding: 18px 40px;
    font-size: 1.3rem;
    font-weight: bold;
    color: white;
    background-color: #000000;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: fit-content;
    margin-bottom: 30px; /* Aumentado de 20px para 30px para dar mais espaço entre o botão e o texto */
}

.cta-botao::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    /* Aplicando o novo degradê */
    background: linear-gradient(45deg, #B08CFF, #E26DDE, #FFA85C);
    background-size: 200% 200%; /* Ajustado */
    border-radius: 10px;
    z-index: -1;
    animation: gradientAnimation 3s ease infinite; /* Ajustado */
}

.cta-botao::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #000000;
    border-radius: 6px;
    z-index: -1;
}

@keyframes gradientBorderAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.cta-botao span {
    position: relative;
    z-index: 2;
    color: white;
    background: none;
    -webkit-text-fill-color: white;
}

.cta-botao:hover {
    transform: scale(1.05);
    /* Aplicando o novo brilho suave */
    box-shadow: 0 0 10px 2px rgba(176, 140, 255, 0.5), /* Roxo mais suave */
                0 0 10px 2px rgba(255, 168, 92, 0.4);  /* Laranja mais suave */
}

.cta-botao:hover::before {
    /* Pode remover ou ajustar este filter/animation se não for mais desejado com o novo gradiente */
    filter: brightness(1.2); /* Reduzi um pouco o brilho */
    animation-duration: 3s; /* Ajustado para combinar */
}

.cta-botao:hover span {
    /* Aplicando o novo degradê ao texto */
    background: linear-gradient(45deg, #B08CFF, #E26DDE, #FFA85C);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto; /* Ajustado */
    animation: gradientText 3s ease infinite; /* Ajustado para usar a animação do texto do hero */
}

.cursor-animado {
    display: inline-block;
    margin-left: 5px;
    animation: blinkCursor 0.7s infinite;
}

.cta-icone {
    font-size: 1.1rem;
    margin-right: 8px;
    vertical-align: middle;
    color: var(--cor-destaque); /* Mantém a cor ou ajuste */
}

/* Estilos para os ícones inseridos via JS */
.cta-titulo-icone,
.cta-subtexto-icone {
    width: 32px; /* Tamanho padrão */
    height: 30px;
    vertical-align: center;
    margin-right: 6px; /* Espaçamento */
    display: inline-block;
}

/* Ajuste fino para o ícone do título se necessário */
.cta-titulo-icone {
    width: 50px;
    height: 50px;
}

/* Estilo para o SVG no botão CTA */
.cta-botao-icone {
    margin-right: 1px; /* Espaço entre o ícone e o texto */
    margin-bottom: 2px;
    stroke: var(--cor-primaria); /* Cor inicial do ícone */
    transition: transform 0.3s ease;
}

.cta-botao:hover .cta-botao-icone {
    transform: scale(1.1); /* Efeito de leve zoom no hover */
}

@media (max-width: 768px) {
    .cta-footer-container {
        flex-direction: column;
        /* REMOVIDO: text-align: center; */
        gap: 30px;
    }

    .cta-texto {
        max-width: 100%;
        height: auto;
        min-height: 200px;
        text-align: left; /* ADICIONADO: Garante alinhamento à esquerda */
    }

    .cta-botao-container {
        position: relative;
        transform: none;
        width: 100%;
        margin-top: 40px; /* Aumentado de 30px para 40px */
        min-height: 120px; /* Aumentado de 100px para 120px */
    }

    .cta-botao {
        margin: 0 auto 30px; /* Mantendo o espaçamento maior também no mobile */
    }

    .cta-titulo {
        font-size: 32px;
        min-height: auto;
        display: block;
        /* REMOVIDO: text-align: center; */
        white-space: normal; /* PERMITIR quebra de linha se necessário */
        /* REMOVIDO: white-space: nowrap; */
    }

    .cta-subtextos {
        min-height: 120px;
    }

    .cta-subtexto {
        font-size: 1rem;
        min-height: 25px;
    }

    .cta-microtexto {
        position: relative;
        bottom: 0;
        margin-top: 20px; /* Aumentado para dar mais espaço no mobile */
    }
}

@media (max-width: 480px) {
    .cta-titulo {
        font-size: 28px;
    }
    
    .cta-texto {
        min-height: 180px;
    }
    
    .cta-subtextos {
        min-height: 100px;
    }
}

.cta-microtexto {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    position: absolute;
    bottom: -20px; /* Ajustado para -20px para descer mais o texto */
    width: 100%;
    text-align: center;
}

/* Estilo para o ÍCONE DE FONTE no botão CTA (Garantindo estado normal) */
.cta-botao .cta-botao-icone { /* Mantendo especificidade */
    margin-right: 8px;
    font-size: 1.25rem;
    font-weight: normal;
    color: var(--cor-texto); /* Branco normal */
    vertical-align: middle;
    display: inline-block;
    position: relative;
    z-index: 5;
    transition: color 0.3s ease, transform 0.3s ease;
    /* Garantir reset do background */
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    animation: none; /* Remover animação no estado normal */
}

/* Estilo HOVER para o ÍCONE DE FONTE (Garantindo gradiente) */
.cta-botao:hover .cta-botao-icone {
    transform: scale(1.1);
    /* Aplica o gradiente como fundo */
    background: linear-gradient(45deg, #B08CFF, #E26DDE, #FFA85C);
    background-size: 200% auto;
    /* Recorta o fundo para a forma do texto (ícone) */
    -webkit-background-clip: text;
    background-clip: text;
    /* Torna a cor do texto transparente para revelar o fundo */
    color: transparent !important; /* Usando !important p/ garantir sobreposição */
    -webkit-text-fill-color: transparent;
    /* Aplica a animação do gradiente */
    animation: gradientText 3s ease infinite; /* Reutiliza a animação existente */
}

@media (max-width: 768px) {
    .cta-titulo {
        font-size: 2rem; /* Ajustado para mobile */
        margin-bottom: 15px; /* Menos espaço abaixo */
        text-align: center; /* Centralizado */
        line-height: 1.3;
        white-space: nowrap; /* Impede a quebra de linha */
    }
}

@media (max-width: 480px) {
    .cta-titulo {
        font-size: 1.8rem; /* Ainda menor para telas muito pequenas */
        white-space: nowrap; /* Impede a quebra de linha */
    }
}

/* SELETOR CORRIGIDO: Aplicar somente ao texto DENTRO do título */
.cta-titulo .texto-digitado {
    display: inline-block; 
    text-align: left;
    line-height: 1.2;
    text-decoration: underline solid var(--cor-destaque) 4px; 
    text-underline-offset: 12px;
}

/* Remover text-decoration dos outros spans se existir alguma regra genérica */
.cta-subtextos .texto-digitado,
.cta-microtexto .texto-digitado {
    text-decoration: none; /* Garante que não haja sublinhado aqui */
}

/* Estilos para o logo no rodapé */
.logo-rodape {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--cor-texto);
    font-family: var(--fonte-titulos);
    font-weight: 600;
    font-size: 1.2rem; /* Ajuste o tamanho da fonte se necessário */
    margin-bottom: 15px; /* Espaço abaixo do logo */
}

.logo-rodape img {
    max-height: 40px; /* Define a altura máxima do logo */
    width: auto; /* Mantém a proporção */
}

.rodape-coluna.rodape-sobre p { /* Adiciona margem abaixo do texto sobre */
    margin-bottom: 10px; /* Reduzido de 15px para diminuir espaço abaixo */
    line-height: 1.4; /* Pode ser ainda mais apertado aqui, se necessário */
    text-align: left; /* Garantir alinhamento à esquerda */
}

.rodape-inferior {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

/* Estilos para os links inferiores do rodapé */
.rodape-inferior .rodape-links-inferiores a {
  color: inherit; /* Usa a cor do texto do elemento pai */
  text-decoration: none; /* Remove o sublinhado padrão */
  margin-left: 15px; /* Adiciona um espaçamento entre os links */
  transition: color 0.3s ease; /* Suaviza a transição da cor no hover */
}

.rodape-inferior .rodape-links-inferiores a:hover,
.rodape-inferior .rodape-links-inferiores a:focus {
  color: var(--cor-destaque); /* Muda a cor para o destaque roxo ao passar o mouse ou focar */
  /* text-decoration: underline; // Removido sublinhado no hover/focus */
}

/* Ajuste de espaçamento para o primeiro link */
.rodape-inferior .rodape-links-inferiores a:first-child {
    margin-left: 0;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .rodape-inferior {
        flex-direction: column; /* Empilha os elementos verticalmente */
        align-items: center; /* Centraliza os itens */
        text-align: center;
    }

    .rodape-inferior .copyright {
        margin-bottom: 10px; /* Adiciona espaço abaixo do copyright */
    }

    .rodape-inferior .rodape-links-inferiores {
        margin-top: 10px; /* Adiciona espaço acima dos links */
    }

     .rodape-inferior .rodape-links-inferiores a {
        margin: 0 8px; /* Ajusta o espaçamento horizontal dos links */
        display: inline-block; /* Garante que os links fiquem na linha */
     }
}

@media (max-width: 480px) {
     .rodape-inferior .rodape-links-inferiores a {
        margin: 5px 8px; /* Adiciona espaçamento vertical e ajusta horizontal */
        display: block; /* Faz cada link ocupar uma linha */
    }
    .rodape-inferior .rodape-links-inferiores a:first-child {
         margin-top: 10px; /* Espaço acima do primeiro link */
    }
}

/* Estilos para a Seção de Certificações - Logos */
.logos-certificacao {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    width: 100%; /* Garantir que o container use a largura */
}

.logo-item {
    display: inline-block;
}

.logo-item img {
    height: 35px; /* Altura padrão dos logos */
    width: auto;
    max-width: 100px;
    vertical-align: middle;
    /* Filtro inicial para deixar branco */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    transition: filter 0.3s ease; /* Transição suave para o filtro */
}

/* REMOVE o filtro de TODOS os logos quando o CARD PAI está em hover */
.item-certificacao:hover .logo-item img {
    filter: none; /* Mostra a cor original */
}

/* Remover regras de hover individual, tamanho específico do primeiro card e tooltips, se ainda existirem */
/* .logo-item:hover img { ... } */
/* .grid-certificacoes .item-certificacao:first-child .logo-item img { ... } */
/* .tooltip { ... } */
/* .tooltip::after { ... } */
/* .tooltip:hover::after { ... } */
/* .item-certificacao .ti-device-cog.certificacao-icone { ... } */ /* Remove a regra de forçar ícone */

/* ============================================= */
/* ========== ESTILOS SUBMENU (MOVIDO) ========= */
/* ============================================= */

/* Estilos Submenu Desktop */
@media (min-width: 769px) {
    .has-submenu {
        position: relative;
    }

    /* Link principal "Soluções" */
    .has-submenu > .menu-link {
        /* Removido: border-bottom: 1px solid var(--cor-destaque-transparente); */
        position: relative;
        z-index: 1001;
        border-bottom: 1px solid transparent; /* Adicionado para manter espaço, mas invisível por padrão */
        transition: color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                    border-bottom-color 0.5s cubic-bezier(0.17, 0.84, 0.44, 1), 
                    background-color 0.5s cubic-bezier(0.17, 0.84, 0.44, 1); /* Transição mais suave */
        padding-bottom: 2px; /* Reduzir padding inferior */
    }

    /* Esconder dropdown aninhado (usado só no mobile) */
    .has-submenu .submenu {
         /* display: none !important; */ /* REMOVIDO !important */
         display: none;
    }

    /* Remover borda do link principal quando submenu está ativo */
    /* .has-submenu.submenu-ativo-desktop > .menu-link {
        border-bottom-color: transparent;
    } */ /* Removido, controle unificado abaixo */

    /* Aplica estilo de hover/ativo ao link principal quando submenu está ativo */
    .has-submenu.submenu-ativo-desktop > .menu-link {
         background-color: transparent; /* Alterado: Fundo transparente */
         color: var(--cor-destaque); /* Alterado: Cor roxa (mesma do hover) */
         border-bottom-color: transparent; /* Garante que a borda inferior fique transparente */
         transform: translateY(-2px); /* Leve movimento para cima quando ativo */
         transition: color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    border-bottom-color 0.5s cubic-bezier(0.17, 0.84, 0.44, 1);
    }

    /* Hover normal do link Soluções (mantém a borda se não estiver ativo) */
    .has-submenu > .menu-link:hover {
        color: var(--cor-destaque); /* Cor roxa no hover */
        /* background-color: var(--cor-destaque-transparente); */ /* REMOVIDO: Fundo levemente roxo no hover */
        /* A borda inferior só aparece se NÃO estiver ativo */
        border-bottom-color: var(--cor-destaque-transparente);
        transform: translateY(-2px); /* Leve movimento para cima no hover */
    }

    /* Ajuste específico para o hover quando o submenu já está ATIVO (para não reaparecer a borda) */
     .has-submenu.submenu-ativo-desktop > .menu-link:hover {
        background-color: transparent; /* Mantém fundo transparente */
        color: var(--cor-destaque); /* Mantém cor roxa */
        border-bottom-color: transparent; /* Garante que a borda NÃO reapareça no hover */
    }


    /* --- ESTILOS PARA A NOVA BARRA DE SUBMENU (#submenu-bar) --- */
    #submenu-bar {
        display: none; /* 1. Escondida por padrão */
        padding: 0;
        border-bottom: 1px solid var(--cor-destaque-transparente);
        position: relative;
        z-index: 999;
        /* Fundo totalmente transparente */
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        margin-top: -5px; /* Aproximar do menu principal */
    }

    /* Mostrar a barra quando ativa via JS */
    #submenu-bar.submenu-bar-ativa {
        display: block;
        animation: submenuFadeIn 0.6s cubic-bezier(0.17, 0.84, 0.44, 1);
    }

    /* Animação para o submenu desktop */
    @keyframes submenuFadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Lista dentro da barra secundária */
    .submenu-items {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-end; /* Alinhar à direita */
        gap: 2px; /* Espaçamento entre itens */
        margin-left: 0; /* Remover margem esquerda */
        margin-right: 60px; /* Reduzido de 85px para 50px */
    }

    /* Links dentro da barra secundária */
    .submenu-item-link {
        display: block;
        padding: 2px 6px; /* Padding muito reduzido */
        font-size: 0.75rem;
        color: var(--cor-texto-claro);
        text-decoration: none;
        font-family: var(--fonte-textos); /* Usar Manrope */
        position: relative;
        transition: all 0.4s cubic-bezier(0.17, 0.84, 0.44, 1);
        white-space: nowrap;
        margin: 0; /* Remover margin */
        border-radius: 3px;
    }

    /* Efeito hover melhorado nos links do submenu */
    .submenu-item-link:hover {
        color: var(--cor-destaque);
        background-color: transparent;
        transform: translateY(-1px);
    }
    
    /* Efeito de underline animado no hover */
    .submenu-item-link::after {
        content: '';
        position: absolute;
        bottom: 1px;
        left: 50%;
        width: 0;
        height: 1px;
        background-color: var(--cor-destaque);
        transition: all 0.4s cubic-bezier(0.17, 0.84, 0.44, 1);
        transform: translateX(-50%);
        opacity: 0;
    }
    
    .submenu-item-link:hover::after {
        width: 90%;
        opacity: 1;
    }
    
    /* Ajustar fonte do menu e logo */
    .menu-link {
        font-family: var(--fonte-textos); /* Manrope para itens de menu normais */
    }
    
    .has-submenu > .menu-link {
        font-family: var(--fonte-textos); /* Manrope para o item Soluções */
        padding-bottom: 1px; /* Espaçamento mínimo */
    }
    
    .logo {
        font-family: var(--fonte-titulos); /* Sora para o logo */
    }
}

/* Estilos Submenu Mobile */
@media (max-width: 768px) {
    /* Esconder barra secundária no mobile */
    #submenu-bar {
         display: none !important;
    }

     /* Link principal "Soluções" no mobile - REMOVER ESTILOS CONFLITANTES */
    .has-submenu > .menu-link {
        /* REMOVIDO: display: inline-flex !important; */
        /* REMOVIDO: padding-right: 90px; */
        /* REMOVIDO: gap: 0; */
        /* Herdará display: block e text-align: center da regra .menu-link */
        border-bottom: none !important; /* Manter sem borda */
        transition: none; /* Manter sem transição */
        position: relative;
        z-index: 1;
        /* REMOVIDO: align-items: center !important; (não necessário com display: block) */
    }

    .has-submenu > .menu-link:hover,
    .has-submenu > .menu-link:active {
        color: var(--cor-texto-claro) !important; /* Manter cor padrão */
        background-color: transparent !important; /* Manter sem fundo */
    }

    /* Estilos dropdown aninhado mobile */
    .has-submenu .submenu {
        display: none;
        position: static;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border: none;
        padding-left: 0;
        min-width: unset;
        width: 100%;
    }
    .has-submenu .submenu.ativo {
         /* Manter Flexbox para centralizar itens internos */
         display: flex !important;
         flex-direction: column;
         align-items: center;
    }

    /* ... (regra .has-submenu > .menu-link.submenu-aberto) ... */

    .has-submenu .submenu li {
        list-style: none;
        padding-left: 0;
        margin-left: 0;
        width: auto; /* Garantir que o LI não ocupe 100% */
    }
    .has-submenu .submenu-link {
        display: block;
        /* ALTERADO: Padding simétrico */
        padding: 10px 15px;
        color: var(--cor-texto-claro);
        text-decoration: none;
        font-size: 1.1rem;
        font-family: var(--fonte-secundaria);
        white-space: normal;
        transition: color 0.3s ease;
        text-align: center; /* Manter texto centralizado */
    }

    /* ... (restante das regras) ... */
}

/* Estilos para a página de links de soluções */
.solucoes-links {
    margin: 3rem 0;
}

.categoria-solucao {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background-color: var(--cor-cinza-claro);
    border-radius: 0.8rem;
    transition: all 0.3s ease;
}

.categoria-solucao:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.categoria-titulo {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--cor-primaria);
    font-weight: 600;
    border-bottom: 2px solid var(--cor-primaria-clara);
    padding-bottom: 0.8rem;
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.link-solucao {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.2rem;
    border-radius: 0.5rem;
    background-color: var(--cor-branco);
    color: var(--cor-texto);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.link-solucao:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    transform: translateX(5px);
}

.link-solucao::before {
    content: '→';
    margin-right: 0.8rem;
    font-size: 1.1rem;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.link-solucao:hover::before {
    opacity: 1;
    transform: translateX(3px);
} 

/* Estilo para o texto de contagem */
.texto-contagem {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -15px;
  margin-bottom: 20px;
  font-style: italic;
  text-align: center; /* Alterado para center como padrão para corresponder aos títulos */
  width: 100%; /* Garante que o texto use a largura completa disponível */
  display: block; /* Garante que seja exibido como bloco */
}

/* Classe adicional para centralizar alguns textos de contagem */
.texto-contagem-centralizado {
  text-align: center;
}

/* Classe para alinhamento à esquerda quando necessário */
.texto-contagem-esquerda {
  text-align: left;
}

/* Media query para centralizar textos no mobile */
@media (max-width: 768px) {
  .texto-contagem-esquerda {
    text-align: center;
  }
}

/* Estilo para Formulário de Contato */