/* GERAL START */
html {
    scroll-padding-top: 6.875rem; /* Garante que ao clicar no menu, o FAQ não pare atrás do header */
    scroll-behavior: smooth;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif; 
}

body {
    background-color: #010818;
    color: #fff;
}

:root {
    --primary-red: #ff0040;
    --dark-bg: #010818;
    --text-white: #ffffff;
}


.mobile-only {
    display: none !important;
}
/* GERAL END */


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* HEADER */
.header-old {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: top 0.3s ease-in-out; /* O segredo da suavidade */
    z-index: 1000; /* Garante que fique sobre o conteúdo */
}




.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* ADICIONE ISSO: Garante que o container também não corte */
    overflow: visible !important; 
    position: relative; /* Ajuda no posicionamento */
}




/* --------------------------------------------------------------------------------------*/
/* LOGO (DRAGÃO + "MYTHROS DIGITAL" */
.logo {
    font-size: 30px;
    color: var(--text-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    
    
    transition: transform 0.3s ease; 
    
    
    backface-visibility: hidden; 
}


.logo:hover {
    transform: scale(1.05);
}


.logo-img {
    height: 100px;
    width: auto;
}


.logo .highlight {
    color: var(--primary-red);
}

.logo-text {
    position: relative;
    top: 0rem; 
    left: -0.5rem;
}

/* --------------------------------------------------------------------------------------*/
/* ITENS DO MENU HEADER (Centralizado X e Y) */
.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
    
    /* --- POSICIONAMENTO ABSOLUTO PERFEITO --- */
    position: absolute;
    
    left: 50%;   /* Centraliza na Horizontal */
    top: 50%;    /* Centraliza na Vertical (Faz subir) */
    
    /* O "pulo do gato": puxa 50% para esquerda e 50% para cima para ficar no centro exato */
    transform: translate(-50%, -50%);
    
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--text-white);
    text-decoration: none;
    font-size: 17px;
    transition: 0.3s;
}

.nav-links a:hover {
    color: var(--primary-red);
}



/* --------------------------------------------------------------------------------------*/
/* SUBMENU EM PRODUTOS */
.nav-links li {
    position: relative;
}

/* SUBMENU EM PRODUTOS */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    
   
    background-color: #0f1724; 
    
    /* ADICIONAL: Borda fina vermelha para destacar do fundo */
    /*border: 1px solid var(--primary-red);*/ 
    
    padding: 15px;
    white-space: nowrap;
    list-style: none;
    min-width: 150px;
    border-radius: 10px; /* Reduzi um pouco para ficar mais moderno */
    
    /* Sombra mais forte para dar profundidade 3D */
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    
    z-index: 10000; /* Garante que fique acima de tudo */
}



.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 0px;
    font-size: 15px;
}

/* --------------------------------------------------------------------------------------*/
/* BOTÃO ENTRE EM CONTATO */

.btn-primary {
    position: relative;
    padding: 0.75rem 2.2rem; 
    border-radius: 3rem; 
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 1px;
    color: var(--text-white);
    background: transparent;
    border: 0.125rem solid var(--primary-red); 
    

    overflow: hidden; 
    -webkit-mask-image: -webkit-radial-gradient(white, black); 
    z-index: 1;
    transition: all 0.5s ease;
}

/* O elemento que preenche */
.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 100%;
    background: var(--primary-red);
    z-index: -1;
    transition: all 0.5s ease;
    
    
    border-radius: 3rem; 
}

/* Hover */
.btn-primary:hover {
    color: #fff;
    box-shadow: 0 0 1.25rem rgba(255, 0, 64, 0.6); 
}

.btn-primary:hover::before {
    width: 100%; 
    border-radius: 0; 
}

/* --------------------------------------------------------------------------------------*/


/* Mobile Hamburger */
.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-white);
}


/* HEADER END */


/* --- NOVO HEADER FLOATING MYTHROS --- */
:root {
    --primary-red: #ff0040; /* Certifique-se que essa cor está definida */
}

.header {
    position: fixed;
    top: 20px; /* Mantém como padrão inicial */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    z-index: 9999;
    background: rgba(15, 23, 36, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 0, 64, 0.2);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: top 0.3s ease-in-out; /* Transição suave apenas no topo */
    overflow: visible !important;
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
/* Efeito ao rolar */
.header.scrolled {
    top: 10px;
    width: 85%;
    background: rgba(15, 23, 36, 0.95);
    border-color: rgba(255, 0, 64, 0.5);
}

.container {
    height: 70px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: visible !important;
}

/* Alinhamento dos itens */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-img { height: 45px; transition: 0.5s; }
.logo-text { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: #fff; }
.logo .highlight { color: var(--primary-red); }


/* Classe que será aplicada ao link da página atual */
.nav-links a.active {
    color: var(--primary-red) !important;
    font-weight: 700;
}

/* Opcional: Detalhe visual (Underline Neon) para o link ativo */
.nav-links a.active::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--primary-red);
    box-shadow: 0 0 10px rgba(255, 0, 64, 0.6);
    margin-top: 4px;
    border-radius: 2px;
    transition: width 0.3s ease;
}



.nav-links { display: flex; list-style: none; gap: 30px; }
.nav-links a { 
    color: rgba(255, 255, 255, 0.8); 
    text-decoration: none; 
    font-size: 15px; 
    position: relative; 
    padding: 5px 0; 
}

/* Indicador animado */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: var(--primary-red);
    box-shadow: 0 0 10px var(--primary-red);
    transition: 0.3s; transform: translateX(-50%);
}
.nav-links a:hover::after { width: 100%; }

/* Dropdown */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    margin-top: 5px;
    background: rgba(15, 23, 36, 0.98);
    border: 1px solid rgba(255, 0, 64, 0.3);
    border-radius: 15px;
    padding: 15px;
    min-width: 200px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.dropdown:hover .dropdown-menu { display: block; }

/* Botão Evoluído */
.header .btn-contato {
    background: var(--primary-red);
    color: #fff;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease; /* Transição suave para todos os estados */
    border: 1px solid transparent;
}

/* EFEITO HOVER LEGAL */
.header .btn-contato:hover {
    background: #fff !important; /* Inverte o fundo para branco */
    color: var(--primary-red) !important; /* Texto fica vermelho */
    transform: translateY(-3px); /* Levanta levemente o botão */
    
    /* Cria um brilho (glow) vermelho ao redor do botão */
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.6);
    
    /* Borda sutil para dar acabamento */
    border-color: #fff;
}

/* Efeito ao clicar (Active) */
.header .btn-contato:active {
    transform: translateY(-1px); /* Abaixa um pouco ao clicar */
    box-shadow: 0 0 10px rgba(255, 0, 64, 0.4);
}

/* Hamburger (Sempre visível no mobile) */
.hamburger { display: none; color: #fff; font-size: 24px; cursor: pointer; }


/* --- ESTADOS DE MOVIMENTO DO HEADER --- */
.header.header-hidden {
    transform: translate(-50%, -150%) !important; /* Joga o header para fora da tela */
    opacity: 0;
    pointer-events: none; /* Evita cliques acidentais enquanto invisível */
}

/* Garante que o header tenha uma transição suave em qualquer estado */
.header {
    /* ease-in-out ou um cubic-bezier personalizado para efeito "premium" */
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), 
                top 0.6s cubic-bezier(0.65, 0, 0.35, 1), 
                opacity 0.5s ease-in-out !important;
}


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/




/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* HERO */
.hero-particles {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa a tela toda */
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#particles-js {
    position: fixed; /* Fixa na tela, não rola com o scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Fica atrás de tudo */
    
    /* O gradiente de fundo vem para cá agora */
    background: linear-gradient(135deg, #010818 0%, #010818 100%); /* Fundo escuro */
}

.hero-content {
    position: relative;
    z-index: 100; /* Texto na frente */
    margin-top: 3rem;
}


.hero-text {
    text-align: center; /* Centralizado fica mais imponente */
    max-width: 800px; /* Impede que o texto fique muito esticado em telas grandes */
    padding: 0 20px;
    z-index: 10; /* Garante que fique acima das partículas */
}

/* O pequeno texto acima do título */
.hero-text h4 {
    color: var(--primary-red);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 4px; /* Espaçamento chique entre letras */
    text-transform: uppercase;
    margin-bottom: 1rem;
    opacity: 0.9;
}

/* O Título Principal */
.hero-text h1 {
    font-size: 4rem; /* Grande e impactante */
    line-height: 1.1;
    font-weight: 800; /* Negrito forte */
    color: #fff;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Sombra para leitura no fundo partículas */
}

.hero-text h1 .highlight {
    color: var(--primary-red);
    /* Um leve brilho no texto vermelho */
    text-shadow: 0 0 20px rgba(255, 0, 64, 0.4); 
}

/* O parágrafo descritivo */
.hero-text p {
    font-size: 1.25rem;
    color: #cccccc; /* Cinza claro é melhor que branco puro para leitura longa */
    line-height: 1.6;
    margin-bottom: 3rem;
    font-weight: 400;
    max-width: 600px; /* Parágrafo mais estreito que o título fica mais bonito */
    margin-left: auto;
    margin-right: auto;
}

/* Container dos botões */
.hero-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Se a tela for pequena, um botão cai pra baixo do outro */
}

/* --- BOTÃO SECUNDÁRIO (BRANCO) COM EFEITO FILL --- */

/* 1. Estilo Base (Igual ao primário, mas branco) */
.btn-secondary {
    position: relative;
    padding: 0.75rem 2.2rem;
    border-radius: 3rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 1px;
    
    /* COR INICIAL: Texto branco, Borda branca, Fundo transparente */
    color: #ffffff;
    background: transparent;
    border: 0.125rem solid #ffffff;
    
    /* Configurações necessárias para o efeito funcionar */
    overflow: hidden;
    z-index: 1;
    transition: all 0.5s ease;
}

/* 2. O elemento de preenchimento (O "líquido" branco) */
.btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    
    width: 0; /* Começa com largura zero (invisível) */
    height: 100%;
    
    /* A COR DO PREENCHIMENTO: Branco */
    background: #ffffff;
    
    z-index: -1; /* Fica atrás do texto */
    transition: all 0.5s ease;
    border-radius: 3rem;
}

/* 3. O Estado Hover (Quando passa o mouse) */
.btn-secondary:hover {
    /* MUDANÇA DE COR: Texto vira Preto */
    color: #000000;
    
    /* Sombra/Brilho branco */
    box-shadow: 0 0 1.25rem rgba(255, 255, 255, 0.7);
    
    /* Garante que a borda e fundo fiquem brancos */
    border-color: #ffffff; 
    background-color: #ffffff; 
}

/* Faz o preenchimento expandir no hover */
.btn-secondary:hover::before {
    width: 100%;
    border-radius: 0;
}
/* --- FIM BOTÃO SECUNDÁRIO --- */




/* HERO END */
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/




/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* EFEITO MOUSE */

.trail-spark {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    
    
    background: radial-gradient(circle, #ff0040 0%, #8a0023 100%);
    
    
    box-shadow: 0 0 5px #5c0017; 
    
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    animation: fadeAndDrop 0.6s linear forwards;
}

@keyframes fadeAndDrop {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0; /* Fica transparente */
        transform: translate(-50%, 20px) scale(0); /* Cai e diminui */
    }
}
/* --- FIM DO EFEITO RASTRO DO MOUSE --- */
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/





/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* SEÇÃO DE PRODUTOS */
.products-section {
    padding: 100px 0;
    background-color: transparent; /* Mantém o fundo escuro do site */
    position: relative;
    z-index: 10; /* Garante que fique acima das partículas da hero */
    padding-top: 6.8rem;
}

/* Títulos da Seção */
.section-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-title {
    font-size: 3rem;
    color: #fff;
    /* MUDANÇA AQUI: De 700 para 800 */
    font-weight: 800; 
    margin-bottom: 10px;
}


/* Encontre este bloco no seu CSS e deixe ele assim: */
.section-title .highlight {
    /* ADICIONE ESTA LINHA: Torna a palavra "Arsenal" vermelha */
    color: var(--primary-red); 

    /* Mantém o efeito de brilho neon ao redor */
    text-shadow: 0 0 20px rgba(255, 0, 64, 0.4); 
}

.section-subtitle {
    color: #cccccc;
    font-size: 1.1rem;
}


/* --- GRID DE 4 COLUNAS --- */
.cards-grid {
    display: grid;
    /* O SEGREDO: cria 4 colunas de tamanhos iguais */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; /* Espaço entre eles */
    width: 100%;
    margin-top: 50px; /* Um espaço para desgrudar da Hero */
}

/* AJUSTE PARA TELAS MENORES (Responsividade) */
/* Quando a tela for menor que 1200px (Notebooks pequenos), muda para 2 por linha */


/* --- O CARD MÁGICO (Magic Card) --- */
.magic-card {
    position: relative;
    width: 100%;
    height: 400px; /* Altura fixa para ficarem iguais */
    background: #0f1724; /* Fundo do cartão */
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.5s;
    z-index: 1; /* Para o brilho ficar atrás */
}

/* Efeito de elevação ao passar o mouse */
.magic-card:hover {
    transform: translateY(-10px);
}

/* A "Aura" Giratória (Pseudo-elemento) */
.magic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente que vai girar: Transparente -> Vermelho -> Ouro -> Transparente */
    background: conic-gradient(transparent, transparent, transparent, var(--primary-red), #ffd700); 
    
    /* Centraliza e aumenta muito para cobrir tudo durante o giro */
    width: 200%; 
    height: 200%; 
    top: -50%; 
    left: -50%;
    
    animation: girarBorda 4s linear infinite;
    
    /* Começa invisível */
    opacity: 0; 
    transition: 0.5s;
}

/* Faz a aura aparecer no hover */
.magic-card:hover::before {
    opacity: 1;
}

/* A Animação de Giro */
@keyframes girarBorda {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* O Miolo do Card (Para cobrir o centro da aura giratória) */
.magic-card::after {
    content: '';
    position: absolute;
    /* Deixa uma borda fina (2px) onde a aura vai aparecer */
    inset: 3px; 
    background: #0f1724; /* Mesma cor do fundo para "tapar" o centro */
    border-radius: 16px;
    z-index: 1;
}

/* --- CONTEÚDO DENTRO DO CARD --- */
.card-content {
    position: relative;
    z-index: 2; /* Fica acima de tudo */
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.card-icon {
    font-size: 3.5rem;
    color: var(--primary-red);
    margin-bottom: 10px;
    
    /* Efeito de brilho no ícone */
    filter: drop-shadow(0 0 10px rgba(255, 0, 64, 0.4));
    transition: 0.3s;
}

.magic-card:hover .card-icon {
    color: #ffd700; /* Vira dourado no hover */
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
    transform: scale(1.1);
}

.card-content h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.card-content p {
    color: #a0aec0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Botão Link */
.card-btn {
    margin-top: auto; /* Empurra para o fundo se sobrar espaço */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    transition: 0.3s;
    border: 1px solid transparent;
}

.card-btn:hover {
    background: var(--primary-red);
    box-shadow: 0 0 15px var(--primary-red);
}

.card-btn i {
    margin-left: 5px;
    transition: 0.3s;
}

.card-btn:hover i {
    transform: translateX(5px); /* A setinha anda para a direita */
}
/* FIM SEÇÃO PRODUTOS */
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/




/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --- SEÇÃO PORTFÓLIO --- */
/* FORÇA O CONTEÚDO A FICAR UM EMBAIXO DO OUTRO NA SEÇÃO PORTFÓLIO */
.portfolio-section .container {
    display: flex;
    flex-direction: column; /* Isso coloca o Título em CIMA e o resto EMBAIXO */
    align-items: center; /* Centraliza o título se quiser, ou tire para alinhar a esquerda */
    margin-top: 12.5rem;
}

/* Garante que o Header (Título + Subtítulo) ocupe 100% da largura */
.portfolio-section .section-header {
    width: 100%;
    margin-bottom: 50px; /* Empurra o conteúdo para baixo */
    text-align: left; /* Ou center, se preferir centralizado */
}

.portfolio-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Esquerda menor, Direita maior (Imagem ganha destaque) */
    gap: 50px;
    align-items: center;
    min-height: 500px;
}

/* --- LADO ESQUERDO: CONTROLES --- */
.portfolio-controls {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- MENU DE PROJETOS COM SCROLL --- */
.project-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
    
    /* O SEGREDO DO SCROLL ESTÁ AQUI: */
    max-height: 180px; /* Altura aprox. para mostrar 3 itens. Ajuste se cortar o texto */
    overflow-y: auto;  /* Liga a rolagem vertical se passar da altura */
    padding-right: 10px; /* Um respiro para o texto não colar na barra de rolagem */
}

/* ESTILIZANDO A BARRA DE ROLAGEM (Para ficar bonita e Dark) */

/* Largura da barra */
.project-list::-webkit-scrollbar {
    width: 4px; /* Fininha e elegante */
}

/* O fundo por onde a barra corre */
.project-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

/* A "peça" que se move (o polegar) */
.project-list::-webkit-scrollbar-thumb {
    background: var(--primary-red); /* Vermelho da sua marca */
    border-radius: 4px;
    box-shadow: 0 0 5px var(--primary-red); /* Brilho neon suave */
}

/* Efeito ao passar o mouse na barra */
.project-list::-webkit-scrollbar-thumb:hover {
    background: #ff334b; /* Um vermelho um pouco mais claro */
}

.project-btn {
    background: transparent;
    border: none;
    text-align: left;
    color: #8892b0;
    font-size: 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
}

.project-btn:hover {
    color: #fff;
}

/* Estado Ativo (Selecionado) */
.project-btn.active {
    color: #fff;
    font-size: 1.3rem; /* Aumenta um pouco */
}

/* A barra vermelha indicadora */
.project-btn.active::before {
    content: '';
    position: absolute;
    left: -2px; /* Em cima da borda cinza */
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--primary-red);
    box-shadow: 0 0 10px var(--primary-red);
}

/* Caixa de Detalhes (Texto) */
.detail-box {
    display: none; /* Esconde todos por padrão */
    animation: fadeIn 0.5s ease;
}

.detail-box.active {
    display: block; /* Mostra só o ativo */
}

.detail-box h3 {
    font-size: 2.5rem;
    color: #ff0040;
    margin-bottom: 15px;
}

.detail-box p {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 20px;
}

.tech-stack {
    display: flex;
    gap: 10px;
    list-style: none;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.tech-stack li {
    font-size: 0.8rem;
    background: rgba(255, 0, 64, 0.1);
    color: var(--primary-red);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 0, 64, 0.3);
}

.btn-link {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid var(--primary-red);
    padding-bottom: 5px;
    transition: 0.3s;
}

.btn-link:hover {
    color: var(--primary-red);
}

/* --- LADO DIREITO: IMAGENS --- */
.portfolio-visuals {
    position: relative;
    width: 100%;
    /* Removemos altura fixa e bordas daqui para dar liberdade ao botão */
    height: auto; 
    margin-top: 0; 
    z-index: 10;
    margin-top: -8rem;
}

.project-img {
    display: none;
    flex-direction: column; /* Faz o botão ficar em cima da imagem */
    gap: 15px; /* Espaço entre o botão e a imagem */
    width: 100%;
}

.project-img.active {
    display: flex; /* Ativa o Flexbox */
    animation: fadeIn 0.5s ease;
}

.action-header {
    display: flex;
    justify-content: flex-end; /* Alinha o botão à DIREITA */
    width: 100%;
}

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

/* Efeito Gradiente sobre a imagem para integrar com o fundo */
.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #050a14 0%, transparent 50%);
}


/* --- BOTÃO FLUTUANTE NA IMAGEM (NOVO) --- */

.btn-visual-link {
    /* RESETANDO POSIÇÃO ABSOLUTA */
    position: relative; 
    top: auto;
    right: auto;
    
    /* MANTER O VISUAL QUE VOCÊ GOSTA */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05); /* Fundo sutil */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 25px;
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-visual-link:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.4);
    transform: translateY(-2px);
}


.img-wrapper {
    position: relative;
    width: 100%;
    height: 350px; /* Defina a altura da imagem aqui */
    border-radius: 20px;
    overflow: hidden;

    background: transparent; /* Garante que não tenha cor de fundo */
    border: none;            /* Remove a borda */
    box-shadow: none;        /* Remove a sombra quadrada */
    
    /* Borda e Sombra mudaram para cá */
    /*border: 1px solid rgba(255, 255, 255, 0.1);*/
    /*box-shadow: 0 20px 50px rgba(0,0,0,0.5);*/
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}

/* Zoom suave na imagem ao passar o mouse */
.img-wrapper:hover img {
    transform: scale(1.05);
}

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
}





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


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/





/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --- SEÇÃO SOBRE (DNA) --- */
.about-section {
    padding: 250px 0;
    position: relative;
    /* Um fundo sutilmente diferente para destacar a seção */
    background: linear-gradient(to bottom, transparent, rgba(1, 8, 24, 0.9)); 
    margin-top: 50rem;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Metade Texto, Metade Cards */
    gap: 80px;
    align-items: center;
}

/* LADO ESQUERDO: TEXTO */
.mini-tag {
    color: var(--primary-red);
    font-family: 'Courier New', monospace; /* Fonte estilo código */
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
    display: block;
    font-weight: 700;
}

.about-text .section-title {
    text-align: left; /* Alinhado à esquerda aqui */
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 30px;
}

.manifesto-text {
    color: #a0aab5;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.manifesto-text strong {
    color: #fff;
}

/* Assinatura decorativa */
.signature-block {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.sign-line {
    height: 2px;
    width: 50px;
    background: var(--primary-red);
    box-shadow: 0 0 10px var(--primary-red);
}

.signature-block span {
    font-family: 'Courier New', monospace;
    color: var(--primary-red);
    font-size: 0.9rem;
    opacity: 0.8;
}

/* LADO DIREITO: GRID DE CARDS */
.about-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.protocol-card {
    background: rgba(255, 255, 255, 0.03); /* Fundo quase invisível */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 15px;
    display: grid;
    grid-template-columns: auto 1fr; /* Ícone + Texto */
    gap: 20px;
    align-items: start;
    position: relative;
    overflow: hidden;
    transition: 0.4s ease;
    
    /* Efeito de Vidro */
    backdrop-filter: blur(10px);
}

/* Número decorativo de fundo */
.card-number {
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    font-family: 'Montserrat', sans-serif;
    pointer-events: none;
    transition: 0.4s;
}

.card-icon {
    font-size: 2rem;
    color: var(--primary-red);
    background: rgba(255, 0, 64, 0.1);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 0, 64, 0.2);
}

.protocol-card h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: right;
}

.protocol-card p {
    color: #8892b0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- HOVER EFFECTS (O BRILHO) --- */
.protocol-card:hover {
    transform: translateX(10px); /* Move levemente para a direita */
    border-color: var(--primary-red); /* Borda fica vermelha */
    background: rgba(5, 10, 20, 0.6); /* Fica mais escuro */
    box-shadow: 0 0 30px rgba(255, 0, 64, 0.1);
}

.protocol-card:hover .card-number {
    color: rgba(255, 0, 64, 0.1); /* Número brilha */
    transform: translateY(5px);
}

.protocol-card:hover .card-icon {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 15px var(--primary-red);
}



/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/







/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --- SEÇÃO DEPOIMENTOS --- */
.testimonials-section {
    padding: 230px 0;
    position: relative;
    overflow: hidden; /* Evita quebras laterais */
    margin-top: 18rem;
    
}

/* Container Flex para colocar lado a lado */
.testimonials-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Esquerda (Cards) maior, Direita (Texto) menor */
    gap: 80px;
    align-items: flex-start; /* Centraliza verticalmente */
}

/* Grade dos Cards (Lado Esquerdo) */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Colunas de cards */
    gap: 30px;
}

.testimonials-grid .testi-card:last-child {
    /* Faz o card ocupar a linha inteira (da coluna 1 até o fim) */
    grid-column: 1 / -1;
    
    /* Centraliza ele horizontalmente nesse espaço */
    justify-self: center;
    
    /* Define a largura para ser IDÊNTICA aos cards de cima */
    /* Cálculo: 50% da tela menos metade do gap de 30px */
    width: calc(50% - 15px); 
}
/* Se tiver 3 cards, o terceiro vai para baixo e centraliza ou estica, 
   ou você pode mudar acima para 'repeat(auto-fit, minmax(250px, 1fr))' */

/* Texto (Lado Direito) */
.section-header-right {
    text-align: right; /* Alinha todo o texto à direita */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Garante que elementos flex fiquem na direita */
    margin-top: 5rem;
    margin-right: 8rem;
}

.section-header-right .section-title {
    font-size: 3.5rem; /* Título gigante */
    line-height: 1.1;
    margin-bottom: 20px;
}

.section-header-right .section-subtitle {
    color: #a0aab5;
    font-size: 1.1rem;
    max-width: 400px; /* Limita a largura para não ficar uma linha comprida */
    line-height: 1.6;
}



/* --- AJUSTE COMPACTO PARA OS CARDS --- */

.testi-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px; /* Reduzido de 30px para 20px */
    border-radius: 12px; /* Leve arredondamento fica mais moderno */
    transition: 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço menor entre os elementos */
    height: auto; /* Garante que altura se ajuste ao conteúdo */

    /* --- O SEGREDO DO "VIDRO" QUE BLOQUEIA AS FAÍSCAS --- */
    backdrop-filter: blur(10px);         /* Desfoca o que passa atrás */
    -webkit-backdrop-filter: blur(10px); /* Para funcionar no Safari/iPhone */
    
    position: relative;
    z-index: 2; /* Um z-index baixo basta, se tiver o blur */
}

.testi-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--primary-red);
    transform: translateY(-5px);
}

/* TOPO DO CARD: Força a foto a ficar PEQUENA e ao lado do nome */
.card-top {
    display: flex;
    align-items: center; /* Alinha foto e nome no centro verticalmente */
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 5px; /* Reduz o espaço abaixo do nome */
}

.client-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* O SEGREDO: Tamanho fixo para a foto */
.client-photo {
    width: 50px !important;  /* Força tamanho pequeno */
    height: 50px !important; /* Força tamanho pequeno */
    border-radius: 50%;      /* Força ser redonda */
    object-fit: cover;       /* Evita que a foto fique deformada */
    border: 2px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;          /* Impede que a foto seja esmagada */
}

/* Texto do nome e cargo */
.client-name {
    color: #fff;
    font-size: 0.95rem; /* Mantém o tamanho original do seu h4 */
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    display: block; /* Garante que se comporte como o h4 antigo */
}

.client-info span {
    color: #8892b0;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    display: block;
    margin-top: 2px;
}

/* Ícone de aspas discreto */
.quote-icon {
    color: rgba(255, 255, 255, 0.05);
    font-size: 1.5rem;
}

/* Texto do depoimento mais compacto */
.testi-text {
    color: #ccc;
    font-size: 0.9rem; /* Reduzido para economizar espaço */
    line-height: 1.5;
    margin-bottom: 10px;
    font-style: italic;
    /* Limita o texto a 4 linhas se for muito grande (opcional) */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* MÉTRICA (Rodapé do Card) */
.metric-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 15px;
    border-left: 2px solid var(--primary-red);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    margin-top: auto; /* Empurra para o fundo se sobrar espaço */
}

.metric-label {
    font-size: 0.7rem;
    color: #8892b0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.metric-value {
    color: var(--primary-red);
    font-size: 1.4rem; /* Um pouco menor, mas ainda destaque */
    font-weight: 800;
}





/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/






/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --- SEÇÃO FAQ (DATABASE) --- */
/* --- SEÇÃO FAQ --- */
.faq-section {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(to top, #000510, transparent);
    
    /* AJUSTE CHAVE: Força a seção a crescer com o conteúdo */
    display: block !important;
    height: auto !important;
    overflow: visible; 
}

/* Garante que o container flexível não trave a altura */
.faq-section .container {
    display: flex;
    flex-direction: column;
    height: auto !important;
}


.faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* AJUSTE CHAVE: Faz o grid acompanhar a abertura dos cards */
    height: auto !important;
    width: 100%;
}

/* O CONTAINER DA PERGUNTA */
.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    /* MUDANÇA: overflow visible permite que o navegador calcule melhor a expansão */
    overflow: visible; 
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
    display: block;
}

.faq-item[open] {
    background: rgba(5, 10, 20, 0.8);
    border-color: var(--primary-red);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.1);
    /* Dá um pequeno respiro extra ao abrir */
    margin-bottom: 10px; 
}

/* A BARRA DE TÍTULO (Clicável) */
summary {
    list-style: none; /* Remove a setinha padrão feia */
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
}

/* Remove setinha padrão em alguns navegadores */
summary::-webkit-details-marker {
    display: none;
}

.faq-q {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    transition: 0.3s;
    font-family: 'Montserrat', sans-serif;
}

/* Ícone (+ / -) */
.faq-icon {
    color: var(--primary-red);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* ANIMAÇÃO AO ABRIR */
.faq-item[open] .faq-icon {
    transform: rotate(45deg); /* Vira um 'X' */
    color: #fff;
}

.faq-item[open] .faq-q {
    color: var(--primary-red); /* Título fica vermelho */
}

/* A RESPOSTA */
.faq-answer {
    padding: 0 25px 25px 25px;
    color: #a0aab5;
    line-height: 1.6;
    font-size: 0.95rem;
    animation: fadeIn 0.5s ease;
}

.faq-answer strong {
    color: #fff;
}

/* --- RODAPÉ DA FAQ (CHAMADA FINAL) --- */
.faq-footer {
    text-align: center;
    margin-top: 60px;
    padding-bottom: 20px;
    clear: both; /* Limpa qualquer flutuação anterior */
    position: relative;
}

.faq-footer p {
    color: #8892b0; /* Cinza tech */
    font-size: 1.1rem;
}

.specialist-link {
    color: #fff; /* Branco para destacar */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--primary-red); /* O sublinhado vermelho */
    padding-bottom: 3px;
    margin-left: 8px; /* Afasta um pouco da pergunta */
    transition: all 0.3s ease;
}

/* Efeito ao passar o mouse */
.specialist-link:hover {
    color: var(--primary-red); /* Texto fica vermelho */
    border-bottom-color: transparent; /* Linha some (efeito clean) ou muda de cor */
    padding-right: 10px; /* Dá uma leve andada para a direita */
}

.specialist-link i {
    font-size: 0.9rem;
    margin-left: 5px;
    transition: 0.3s;
}

.specialist-link:hover i {
    transform: translateX(5px); /* A setinha anda para a direita */
}

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




/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/




/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

/* --- SEÇÃO CONTATO --- */
.contact-section {
    padding: 25rem 0;
    position: relative;
    background: radial-gradient(circle at top right, rgba(10, 20, 40, 1), #010818);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Formulário um pouco maior */
    gap: 80px;
    align-items: center;
}

/* LADO ESQUERDO: TEXTOS */
.contact-info .section-title {
    font-size: 3rem;
    margin-bottom: 20px;
}

.info-channels {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.channel-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-red);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.channel-item:hover .icon-box {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 15px var(--primary-red);
}

.channel-item span {
    display: block;
    font-size: 0.8rem;
    color: #8892b0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.channel-item a {
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.channel-item a:hover {
    color: var(--primary-red);
}

/* LADO DIREITO: O FORMULÁRIO (TERMINAL) */
.contact-form-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.input-group {
    margin-bottom: 25px;
}

.input-group label {
    display: block;
    color: #8892b0;
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace; /* Fonte técnica */
}

/* Estilo dos Inputs e Selects */
.mythros-form input,
.mythros-form select,
.mythros-form textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

/* Efeito ao Clicar (Focus) */
.mythros-form input:focus,
.mythros-form select:focus,
.mythros-form textarea:focus {
    border-color: var(--primary-red);
    background: rgba(5, 10, 20, 0.8);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.2); /* Brilho vermelho */
}

/* Estilo do Dropdown (Select) */
.mythros-form select {
    cursor: pointer;
    appearance: none; /* Remove seta padrão feia */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF0040%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}
.mythros-form select option {
    background: #010818; /* Fundo escuro nas opções */
    color: #fff;
}

/* Botão de Enviar Épico */
.submit-btn {
    width: 100%;
    padding: 18px;
    background: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.submit-btn:hover {
    background: #cc0033;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 0, 64, 0.4);
}


/* --- NOTA DE CUSTO ZERO --- */
.form-note {
    text-align: center;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #8892b0;
    font-family: 'Courier New', monospace; /* Fonte técnica */
    opacity: 0.8;
}

.form-note i {
    color: #00ff88; /* Verde Neon (Passa a ideia de 'Liberado') */
    margin-right: 5px;
}

.highlight-green {
    color: #00ff88;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}






/* Estilo da mensagem que aparecerá DEPOIS do envio */
.success-message-container {
    text-align: center;
    padding: 30px 20px;
    animation: fadeIn 0.5s ease;
    color: #fff;
}

.success-icon-final {
    font-size: 4rem;
    color: #00ff88; /* Verde Neon */
    margin-bottom: 20px;
    display: block;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.success-message-container h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #fff;
}

.success-message-container p {
    color: #a0aab5;
    font-size: 0.9rem;
    line-height: 1.5;
}












/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/




/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* =========================================================================
/* =========================================================================
/* =========================================================================
/* =========================================================================
   RODAPÉ FINAL (CENTRALIZADO E SIMÉTRICO)
========================================================================= */
.site-footer {
    background-color: #000; /* Fundo preto sólido */
    padding: 11rem 0 0 0; /* Padding superior, sem padding inferior interno */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: #8892b0;
    position: relative;
    z-index: 20; /* Garante que fique acima de tudo */
}

/* Container específico do footer */
.site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-grid {
    display: grid;
    /* 4 Colunas iguais para simetria perfeita */
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px;
    align-items: start;
    text-align: center; /* Centraliza textos */
    margin-bottom: 60px; /* Espaço antes do copyright */
}

/* --- COLUNA 1: MARCA --- */
/* --- LOGO DO RODAPÉ CORRIGIDA --- */
.footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #fff;
    
    /* CORREÇÃO 1: Impede que o ponto caia para a linha de baixo */
    white-space: nowrap; 
}

/* CORREÇÃO 2: Garante que o ponto seja BRANCO */
.logo-dot {
    color: #fff !important; /* Força o branco */
}

.footer-brand p {
    line-height: 1.6;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

/* Status do Sistema */
.system-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 15px;
    border-radius: 20px;
    width: fit-content;
    margin: 0 auto;
    
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
    animation: statusPulse 2s infinite;
}

.status-text {
    color: #00ff88;
    font-weight: 700;
}

@keyframes statusPulse { 
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); } 
    50% { opacity: 0.5; box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } 
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } 
}

/* --- COLUNAS 2 e 3: LINKS --- */
.footer-links h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-links a {
    color: #8892b0;
    text-decoration: none;
    transition: 0.3s;
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--primary-red);
    opacity: 0.8; 
}

/* Ícones Sociais */
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.social-icons a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff !important;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.social-icons a:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    transform: translateY(-3px);
}

/* --- COLUNA 4: DRAGÃO --- */
.footer-dragon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.dragon-logo {
    max-width: 120px;
    height: auto;
    opacity: 0.7;
    filter: grayscale(100%);
    transition: 0.4s;
}

.footer-dragon-box:hover .dragon-logo {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ======================================================
   BARRA DE COPYRIGHT
   ====================================================== */

/* Resetando a borda superior do footer pai para não haver conflito */
.footer {
    border-top: none !important;
}

/* Espaçamento extra no final do grid para a linha não subir */
.footer-grid {
    padding-bottom: 80px; /* Ajuste conforme necessário para o respiro visual */
}

.copyright-bar {
    width: 100%;
    background-color: #000;
    /* AQUI ESTÁ A LINHA: Ela fica apenas no topo desta div */
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 10px 0;
    text-align: center;
}

/* Centralização forçada do container interno */
.copyright-bar .container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
}

.copyright-bar p {
    color: #fff;
    font-size: 0.75rem; /* Tamanho discreto como na imagem */
    font-family: 'Courier New', monospace; /* Fonte estilo terminal/enginnering */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    opacity: 0.5; /* Opacidade sutil para não brigar com a logo principal */
}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .copyright-bar {
        padding: 25px 15px;
    }
    .copyright-bar p {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }
}
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/





/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --- BOTÃO FLUTUANTE MYTHROS --- */
.whatsapp-link {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    
    /* Gradiente para dar profundidade, não apenas chapado */
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    
    /* Sombra Neon Verde */
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    
    /* Garante que fique acima de tudo */
    z-index: 99999;
    
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efeito elástico */
}

/* O Ícone */
.whatsapp-link i {
    font-size: 35px;
    z-index: 2; /* Fica acima da animação de pulso */
}

/* --- EFEITO PULSE (A ONDA DE ENERGIA) --- */
.whatsapp-link::before,
.whatsapp-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25d366;
    opacity: 0.5;
    z-index: 1;
    /* Animação infinita */
    animation: pulse-wave 2s infinite;
}

.whatsapp-link::after {
    animation-delay: 1s; /* Segunda onda com atraso */
}

@keyframes pulse-wave {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.6); /* Cresce 60% */
        opacity: 0; /* Desaparece */
    }
}

/* --- TOOLTIP "ONLINE AGORA" --- */
.status-tooltip {
    position: absolute;
    right: 80px; /* Fica à esquerda do botão */
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    
    background: rgba(10, 20, 35, 0.9); /* Escuro tech */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(37, 211, 102, 0.3); /* Borda verde sutil */
    
    padding: 8px 15px;
    border-radius: 6px;
    
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* A setinha do tooltip apontando para o botão */
.status-tooltip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid rgba(10, 20, 35, 0.9);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* --- INTERAÇÃO (HOVER) --- */
.whatsapp-link:hover {
    transform: translateY(-5px) scale(1.05); /* Sobe e cresce um pouco */
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
}

.whatsapp-link:hover .status-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0); /* Entra suavemente */
}

/* Para o pulso ao passar o mouse para não distrair */
.whatsapp-link:hover::before,
.whatsapp-link:hover::after {
    animation: none;
    transform: scale(1);
    opacity: 0;
}


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/



/* ======================================================
   PÁGINA SITES: HERO (NAMESPACE "st-")
   Proteção total contra alterações na Home
   ====================================================== */

/* Container Principal da Seção */
.st-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
    overflow: hidden; /* Garante que a luz não vaze da seção */
}

/* ADICIONADO: A Luz de Fundo Vermelha Suave */
.st-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza exatamente no meio */
    width: 80%; /* Largura da luz */
    height: 80%; /* Altura da luz */
    max-width: 800px;
    /* Gradiente radial: Vermelho fraco no centro, transparente nas bordas */
    background: radial-gradient(circle, rgba(255, 0, 64, 0.15) 0%, rgba(0,0,0,0) 60%);
    filter: blur(80px); /* Desfoque alto para ficar bem suave */
    z-index: 1; /* Fica atrás do conteúdo, mas na frente do fundo preto */
    pointer-events: none; /* Não atrapalha cliques */
}

/* Conteúdo (Texto e Botões) */
.st-hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 10; /* Garante que o texto fique NA FRENTE da luz */
}

/* 1. Badge (Pílula Superior) */
.st-badge-wrapper {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.st-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.st-badge i { color: var(--primary-red); }

/* 2. Título */
.st-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 25px;
}

/* Destaque "Digital" */
.st-highlight {
    color: var(--primary-red);
    display: block;
    /* Brilho extra só na palavra Digital, conforme a imagem */
    text-shadow: 0 0 50px rgba(255, 0, 64, 0.8);
}

/* 3. Descrição */
.st-description {
    font-size: 1.1rem;
    color: #cccccc;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 40px auto;
    font-weight: 400;
}

/* ======================================================
   BOTÕES DA PÁGINA SITES (ESTILO HOME ADAPTADO)
   Namespace: st- (Não afeta a Home)
   ====================================================== */

/* Container dos Botões */
.st-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Espaçamento igual ao da Home */
    flex-wrap: wrap;
    margin-top: 20px;
}

/* --- BOTÃO 1: PLANOS (VERMELHO COM GLITCH) --- */
.st-btn-plans {
    position: relative;
    
    /* ESTADO INICIAL: Transparente com Borda Vermelha */
    background-color: transparent;
    border: 2px solid var(--primary-red);
    color: #ffffff;
    
    padding: 0.75rem 2.2rem;
    border-radius: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    
    overflow: hidden; /* Segura o glitch dentro do botão */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
}

/* HOVER: Fica Vermelho Sólido + Brilho */
.st-btn-plans:hover {
    background-color: var(--primary-red);
    color: #ffffff;
    
    /* Glow/Luz Vermelha ao redor */
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.6), inset 0 0 10px rgba(255, 0, 64, 0.2);
    
    transform: translateY(-3px); /* Sobe um pouquinho */
}

/* O EFEITO GLITCH (O BRILHO QUE PASSA CORRENDO) */
.st-btn-glitch {
    position: absolute;
    top: 0;
    left: -150%; /* Começa escondido na esquerda */
    width: 100%;
    height: 100%;
    
    /* O Brilho Branco Forte */
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.8), /* Branco bem forte no meio */
        transparent
    );
    
    transform: skewX(-25deg); /* Inclinação */
    transition: none;
    z-index: 2;
    pointer-events: none;
}

/* Dispara o brilho quando passa o mouse no botão */
.st-btn-plans:hover .st-btn-glitch {
    left: 150%; /* Corre para a direita */
    transition: 0.6s ease;
}

/* --- BOTÃO 2: PORTFÓLIO (BRANCO COM FILL) --- */
.st-btn-portfolio {
    position: relative;
    padding: 0.75rem 2.2rem;
    border-radius: 3rem;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    
    color: #ffffff;
    background: transparent;
    border: 0.125rem solid #ffffff;
    
    overflow: hidden;
    z-index: 1;
    transition: all 0.5s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* O elemento de preenchimento (O "líquido" branco) */
.st-btn-portfolio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    
    width: 0; /* Começa invisível */
    height: 100%;
    
    background: #ffffff;
    z-index: -1; /* Atrás do texto */
    transition: all 0.5s ease;
    border-radius: 3rem;
}

/* HOVER DO PORTFÓLIO */
.st-btn-portfolio:hover {
    color: #000000; /* Texto vira preto */
    box-shadow: 0 0 1.25rem rgba(255, 255, 255, 0.7);
    border-color: #ffffff;
    background-color: #ffffff;
}

/* Faz o preenchimento expandir no hover */
.st-btn-portfolio:hover::before {
    width: 100%;
    border-radius: 0;
}



/* ======================================================
   ANIMAÇÃO DE FLUTUAÇÃO DO BADGE (ADAPTADO PARA st-)
   ====================================================== */

@keyframes st-smoothFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Sobe suavemente */
    }
    100% {
        transform: translateY(0); /* Volta suavemente */
    }
}

.st-badge {
    /* Garante que o elemento aceite transformações */
    display: inline-flex; 
    
    /* O Segredo da Performance: */
    will-change: transform; /* Avisa o navegador para usar a GPU */
    
    /* Aplica a animação renomeada */
    animation: st-smoothFloat 2s ease-in-out infinite;
}




/* ======================================================
   ANIMAÇÕES DE ENTRADA (NAMESPACE "st-")
   ====================================================== */

/* 1. A Lógica da Animação (Keyframes) */
@keyframes stFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. A Classe Base (Começa invisível e descida) */
.st-fade-in-up {
    animation: stFadeInUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* 3. Os Delays (Cascatas) para cada elemento */
.st-badge-wrapper.st-fade-in-up { animation-delay: 0.1s; }
.st-title.st-fade-in-up         { animation-delay: 0.2s; }
.st-description.st-fade-in-up   { animation-delay: 0.4s; }
.st-btn-wrapper.st-fade-in-up   { animation-delay: 0.6s; }



/* Responsividade Mobile */
@media (max-width: 768px) {
    .st-title { font-size: 2.2rem; }
    .st-hero-glow { width: 100%; height: 60%; filter: blur(60px); } /* Ajuste da luz no mobile */
    .st-btn-wrapper { flex-direction: column; width: 100%; padding: 0 20px; }
    .st-btn { width: 100%; }
}

/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/







/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* ======================================================
   SEÇÃO SETORES (CENTRALIZADA - NAMESPACE "st-")
   Proteção total contra alterações na Home
   ====================================================== */

.st-sectors-section {
    padding: 10rem 0;
    position: relative;
    z-index: 20;
    margin-top: -100px; /* Mantive o recuo negativo que você já tinha */
}

.st-text-center {
    text-align: center; /* Garante que tudo fique no meio */
}

/* Container do Cabeçalho */
.st-sectors-header {
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    
    /* AQUI ESTÁ O AJUSTE QUE VOCÊ PEDIU: */
    /* Isso empurra o texto para baixo, separando mais do topo */
    margin-top: 30px; 
    text-align: center;
}

/* Subtítulo */
.st-sectors-subtitle {
    color: var(--primary-red);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

/* Título Principal */
.st-sectors-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

.st-highlight {
    color: var(--primary-red);
    /* Opcional: Efeito de brilho no texto vermelho */
    text-shadow: 0 0 20px rgba(255, 0, 64, 0.4); 
}

/* Nuvem de Tags */
.st-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza as tags */
    gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

/* Estilo da Tag Individual */
.st-tag {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 25px;
    border-radius: 50px;
    
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #a0aab5;
    
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: default;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    
    /* Animação st-floatTag */
    animation: st-floatTag 4s ease-in-out infinite;
}

.st-tag i {
    color: var(--primary-red);
    font-size: 1rem;
    transition: 0.3s;
}

/* Hover da Tag */
.st-tag:hover {
    background: rgba(255, 0, 64, 0.1);
    border-color: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.4);
    transform: scale(1.05);
    animation-play-state: paused;
}

/* Animação */
@keyframes st-floatTag {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Ritmos */
.st-tag:nth-child(odd) { animation-duration: 3.5s; }
.st-tag:nth-child(even) { animation-duration: 4.5s; animation-delay: 0.5s; }
.st-tag:nth-child(3n) { animation-duration: 4s; animation-delay: 1s; }

/* --- CORREÇÃO DE QUEBRA DE LINHA (CRÍTICO) --- */

/* Isso garante que o "Seu Nicho" fique colado no "para" */
.st-sectors-title .st-highlight {
    display: inline-block; /* Ou 'inline' - anula o 'block' da Hero */
}
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/











/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* ======================================================
   SEÇÃO PREÇOS: VANGUARD/ASCENSION (NAMESPACE "st-")
   Proteção total contra alterações na Home
   ====================================================== */

.st-pricing-section {
    padding:  28rem 0;
    position: relative;
    /* Fundo escuro conforme a imagem */
    background-color: #020b1e; 
}

.st-pricing-section .container {
    display: flex;
    flex-direction: column; /* Obriga layout vertical */
    align-items: center;
    justify-content: center;
}

/* 1. CABEÇALHO */
.st-pricing-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1000px;
    width: 100%;


}

.st-tech-badge {
    /* Reutilizando seu estilo de badge se já existir na home, 
       mas definindo aqui para segurança */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
}

.st-pricing-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: #fff;
    margin-top: 20px;

}

.st-pricing-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 15px auto 0;
}

/* 2. SWITCHER (BOTÕES) */
.st-switcher-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 60px;
}

.st-switcher {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 5px;
}

.st-switch-btn {
    background: transparent;
    border: none;
    color: #a0aab5;
    padding: 10px 25px;
    border-radius: 40px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.st-switch-btn:hover { color: #fff; }

.st-switch-btn.active {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 0, 64, 0.4);
}

/* 3. GRID DOS CARDS */
.st-pricing-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.st-pricing-group {
    display: none; /* Esconde grupos inativos */
    width: 100%;
    max-width: 1100px;
    grid-template-columns: repeat(3, 1fr); /* 3 Colunas fixas no PC */
    gap: 30px;
    align-items: center; /* Alinha altura dos cards */
}

/* Responsividade do Grid */
@media (max-width: 1024px) {
    .st-pricing-group {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

.st-pricing-group.st-active-group {
    display: grid;
    animation: stFadeUpPrice 0.5s ease forwards;
}

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

/* --- ESTILO DOS CARDS (VANGUARD STYLE) --- */
.st-price-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: left;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

/* Card Destaque (ASCENSION) */
.st-price-card.st-featured {
    border: 1px solid rgba(255, 0, 64, 0.5);
    background: linear-gradient(180deg, rgba(255, 0, 64, 0.08) 0%, rgba(0,0,0,0) 100%);
    box-shadow: 0 0 30px rgba(255, 0, 64, 0.1);
    transform: scale(1.05);
    z-index: 2;
}

.st-price-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.st-price-card.st-featured:hover {
    transform: scale(1.05) translateY(-10px);
}

/* Cabeçalho do Card */
.st-card-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/* --- HIERARQUIA VISUAL DOS CARDS --- */

/* 1. NOME DO PLANO (Estilo "Rótulo Tech") */
.st-plan-name {
    font-size: 1.1rem;           /* Reduzi para diferenciar do preço */
    letter-spacing: 3px;       /* Letras espaçadas (Fica muito elegante) */
    color: var(--primary-red); /* Usa a cor da marca */
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
    /* Removemos a cor branca para ele não brigar com o preço */
}

/* 2. SUBTÍTULO (Ex: "Para lançamentos...") */
.st-plan-target {
    font-size: 0.85rem;
    color: #8892b0;       /* Cinza azulado discreto */
    font-weight: 400;
    margin-bottom: 25px;  /* Mais espaço antes do preço */
    font-style: italic;   /* Um toque de sofisticação */
}

/* 3. O PREÇO (O Grande Destaque) */
.st-price-value {
    font-size: 2.5rem;    /* Aumentei BASTANTE (Era 2.2rem) */
    font-weight: 800;     /* Extra Bold */
    color: #fff;          /* Branco Puro */
    line-height: 1;       /* Mais compacto */
    letter-spacing: -1px; /* Letras mais juntinhas para impacto */
    
    /* Um leve brilho branco para parecer "aceso" */
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}


/* Centavos alinhados EM BAIXO (Base) */
.st-cents {
    font-size: 0.4em;        /* 40% do tamanho */
    vertical-align: bottom;  /* O segredo: Alinha na base do número */
    position: relative;
    bottom: 6px;             /* Empurra um pouquinho pra cima pra alinhar visualmente */
    margin-left: 2px;        /* Afasta do número principal */
    font-weight: 600;
    opacity: 0.8;
}

/* 4. O SUFIXO (Ex: "/único") */
.st-price-value .term {
    font-size: 0.9rem;
    color: #555e75;       /* Bem escuro para não atrapalhar a leitura do valor */
    font-weight: 600;
    letter-spacing: 0;
    display: block;       /* Joga o "/único" para a linha de baixo (fica mais limpo) */
    margin-top: 5px;
    text-transform: uppercase;
}

/* Tag "Mais Escolhido" */
.st-popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-red);
    color: #fff;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(255, 0, 64, 0.3);
}

/* Lista de Features */
.st-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1; /* Empurra botão pro final */
}

.st-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ccd6f6;
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* --- Ícone de Check (Verde Neon) --- */
.st-plan-features li i {
    /* Cor principal: Verde Neon Vibrante (Tipo Ciano) */
    color: #00ff88; 

    /* O Efeito Neon (Brilho/Glow) */
    /* Cria uma luz suave em volta do ícone */
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6), 
                 0 0 15px rgba(0, 255, 136, 0.3);

    font-size: 1.1rem; /* Aumentei um pouquinho para destacar o brilho */
    
    /* Ajuste fino para alinhar verticalmente com o texto */
    margin-top: 2px; 
}

.st-plan-features li strong {
    color: #fff;
    font-weight: 700;
}

/* Botões do Card */
/* Botões do Card */
.st-btn-card {
    display: block;
    width: 100%;
    padding: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: 0.3s;
    margin-top: auto;

    /* ADICIONE ISTO AQUI: Remove a linha de baixo */
    text-decoration: none; 
}

.st-btn-card:hover { background: #fff; color: #000; }

.st-btn-highlight {
    background: var(--primary-red);
    border-color: var(--primary-red);
    box-shadow: 0 5px 20px rgba(255, 0, 64, 0.2);
}

/* --- HOVER DO BOTÃO DESTAQUE (CORRIGIDO) --- */
.st-btn-highlight:hover {
    /* Agora fica Branco Sólido (muito mais visível) */
    background: #ffffff; 
    
    /* O texto fica Vermelho para manter a marca */
    color: var(--primary-red);
    
    /* A borda acompanha o fundo branco */
    border-color: #ffffff;
    
    /* Adiciona um brilho branco ao redor para destacar */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); 
    
    /* Removemos o 'transparent' que estava sumindo com o botão */
}




/* --- CORREÇÃO DE QUEBRA DE LINHA (TÍTULO PLANOS) --- */

/* 1. Força a palavra "Estratégia" a se comportar como texto corrido (inline) */
.st-pricing-title .st-highlight {
    display: inline-block !important; /* O !important garante que vai funcionar */
}

/* 2. Garante que a frase inteira não quebre */
.st-pricing-title {
    white-space: nowrap; 
}


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/






/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* ======================================================
   SEÇÃO SUSTENTAÇÃO (MANUTENÇÃO) - NAMESPACE "st-"
   ====================================================== */

.st-maintenance-section {
    /* 1. Troque margin-top por padding-top */
    /* Isso cria o espaço de 9rem DENTRO da cor azul, não fora dela */
    padding-top: 11rem; 
    padding-bottom: 15rem; /* Adicione um respiro no fundo também */
    
    background-color: #020b1e; 
    position: relative;
    z-index: 10;
    
    /* 2. Remova o margin-top */
    margin-top: 0; 
    
    /* 3. Garante que a seção ocupe toda a largura sem falhas */
    width: 100%;
    display: block;
}
/* O Container (Caixa Estilizada) */
.st-maint-wrapper {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--primary-red); /* Detalhe lateral vermelho */
    border-radius: 15px;
    padding: 40px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; /* Para celular */
    
    max-width: 1000px;
    margin: 0 auto; /* Centraliza a caixa na tela */
    
    /* Efeito de brilho sutil */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* --- LADO ESQUERDO (TEXTO) --- */
.st-maint-info {
    flex: 1; /* Ocupa o espaço disponível */
    min-width: 300px;
}

.st-maint-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.st-maint-title i {
    color: var(--primary-red); /* Ícone de escudo vermelho */
    font-size: 1.5rem;
}

.st-maint-desc {
    color: #a0aab5;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 600px;
}

/* Lista de Benefícios (Horizontal) */
.st-maint-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.st-maint-features li {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Check Verde Neon (Igual ao dos Planos) */
.st-maint-features li i {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

/* --- LADO DIREITO (PREÇO) --- */
.st-maint-pricing {
    text-align: right;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 40px;
    min-width: 200px;
}

.st-maint-label {
    display: block;
    font-size: 0.75rem;
    color: #a0aab5;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 600;
}

.st-maint-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

/* Centavos pequenos na base */
.st-cents-maint {
    font-size: 0.5em;
    vertical-align: bottom;
    font-weight: 600;
}

.st-maint-value small {
    font-size: 0.4em;
    color: #a0aab5;
    font-weight: 400;
    margin-left: 5px;
}


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/






/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

/* ======================================================
   SEÇÃO PORTFÓLIO SITES (NAMESPACE "st-sites-")
   Isolamento total para não afetar a Home
   ====================================================== */

.st-sites-portfolio {
    padding: 20rem 0;
    /* Fundo transparente para mostrar as faíscas da Home */
    background: transparent; 
    position: relative;
    z-index: 10;
}

/* --- CABEÇALHO --- */
.st-sites-header {
    text-align: left;
    max-width: 800px;
    margin-bottom: 60px;
    padding: 0 15px;
}

.st-sites-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: #fff;
    margin-top: 20px;
    line-height: 1.1;
}

/* Proteção para o destaque vermelho */
.st-sites-title .st-highlight {
    display: inline-block;
}

.st-sites-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    margin-top: 20px;
    max-width: 500px;
    border-left: 3px solid var(--primary-red);
    padding-left: 20px;
}

/* --- GRID BENTO --- */
.st-sites-grid {
    display: grid;
    /* 1 Coluna larga + 2 colunas normais */
    grid-template-columns: 1.5fr 1fr 1fr; 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- ESTILO DO CARD --- */
.st-sites-card {
    background: rgba(255, 255, 255, 0.02); /* Vidro bem sutil */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    min-height: 450px;
}

.st-sites-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* --- IMAGEM --- */
.st-sites-image {
    height: 60%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.st-sites-placeholder {
    width: 100%;
    height: 100%;
    background-color: #0a1020;
    background-size: cover;
    background-position: top center;
    transition: transform 0.6s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.st-sites-card:hover .st-sites-placeholder {
    transform: scale(1.05); /* Zoom suave */
}

.st-sites-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(2, 11, 30, 0.9) 100%);
}

/* --- CONTEÚDO --- */
.st-sites-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #020b1e; /* Fundo sólido para leitura */
    position: relative;
    z-index: 2;
    margin-top: -40px;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px 20px 0 0;
}

/* Tags */
.st-sites-tags {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.st-sites-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 1px;
}

.st-sites-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.st-sites-excerpt {
    font-size: 0.9rem;
    color: #a0aab5;
    line-height: 1.5;
    margin-bottom: 25px;
}

.st-sites-btn {
    color: var(--primary-red);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.st-sites-btn:hover {
    color: #fff;
    gap: 12px;
}



/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/



/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* ======================================================
   SEÇÃO FAQ SITES - CORREÇÃO DE FLUXO E DESIGN
   ====================================================== */

.st-faq-section {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(to top, #000510, transparent);
    display: block !important;
    height: auto !important;
    overflow: visible; 
}

.st-faq-section .st-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: auto !important;
}

/* --- CABEÇALHO DO FAQ (BLINDAGEM DE TÍTULO) --- */
.st-section-header.st-center-text {
    width: 100%;
    max-width: 100%; 
    margin-bottom: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.st-mini-tag { 
    color: var(--primary-red); 
    font-family: monospace; 
    margin-bottom: 10px; 
}

.st-section-title {
    /* Unidade Fluida: escala entre 1.5rem e 2.5rem baseada na largura da tela */
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important; 
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    
    /* Força o título a ficar em uma linha única */
    white-space: nowrap !important; 
    display: inline-block !important;
    
    letter-spacing: -1px; 
    width: auto;
    max-width: 95vw;
}

.st-section-title .st-highlight {
    display: inline !important; /* Anula o block da hero para não quebrar a linha */
    color: var(--primary-red);
    text-shadow: 0 0 20px rgba(255, 0, 64, 0.4);
}

.st-section-subtitle { 
    color: #8892b0; 
    margin-top: 15px; 
    max-width: 600px;
}

/* --- GRID E CARDS --- */
.st-faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto !important;
    width: 100%;
}

.st-faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: visible; 
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: block;
}

.st-faq-item[open] {
    background: rgba(5, 10, 20, 0.8);
    border-color: var(--primary-red);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.1);
    margin-bottom: 10px; 
}

.st-faq-summary {
    list-style: none;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.st-faq-summary::-webkit-details-marker { display: none; }

.st-faq-q {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.st-faq-item[open] .st-faq-q { 
    color: var(--primary-red); 
}

.st-faq-icon {
    color: var(--primary-red);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.st-faq-item[open] .st-faq-icon { 
    transform: rotate(45deg); 
    color: #fff; 
}

.st-faq-answer {
    padding: 0 25px 25px 25px;
    color: #a0aab5;
    line-height: 1.6;
    font-size: 0.95rem;
    animation: stFadeIn 0.5s ease;
}

.st-faq-answer strong {
    color: #fff;
}

/* --- FOOTER DO FAQ --- */
.st-faq-footer { 
    text-align: center; 
    margin-top: 60px; 
}

.st-specialist-link {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--primary-red);
    transition: all 0.3s ease;
}

.st-specialist-link:hover { 
    color: var(--primary-red); 
    padding-right: 10px; 
}



/* Estilo do Badge "Centro de Inteligência" */
.st-tech-badge {
    background: rgba(255, 255, 255, 0.05); /* Fundo sutil */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda fina */
    padding: 8px 20px;
    border-radius: 50px; /* Formato de pílula */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a0aab5; /* Cor cinza tech */
    letter-spacing: 2px; /* Espaçamento entre letras elegante */
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px; /* Espaço entre o badge e o título */
}

/* --- ANIMAÇÃO --- */
@keyframes stFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/






/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

/* ======================================================
   SEÇÃO CONTATO SITES (NAMESPACE "st-sites-")
   ====================================================== */

.st-sites-contact-section {
    padding: 25rem 0;
    position: relative;
    
    /* MUDANÇA AQUI: */
    /* De: background: transparent; */
    /* Para: Cor Sólida (Igual Planos/Preços) */
    background-color: #020b1e; 
    
    /* Garante que fique acima do fundo global se houver */
    z-index: 10;
}

.st-sites-contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Formulário maior */
    gap: 80px;
    align-items: center;
}

/* --- LADO ESQUERDO: TEXTOS --- */
.st-sites-mini-tag {
    color: var(--primary-red);
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.st-sites-contact-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
}

.st-sites-contact-title .st-highlight {
    display: inline-block;
}

.st-sites-contact-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 450px;
}

/* Canais de Contato */
.st-sites-info-channels {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.st-sites-channel-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.st-sites-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-red);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.st-sites-channel-item:hover .st-sites-icon-box {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 15px var(--primary-red);
}

.st-sites-channel-item span {
    display: block;
    font-size: 0.8rem;
    color: #8892b0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.st-sites-channel-item a {
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.st-sites-channel-item a:hover {
    color: var(--primary-red);
}

/* --- LADO DIREITO: O FORMULÁRIO (ESTILO GLASS) --- */
.st-sites-form-box {
    /* Efeito de Vidro Fosco igual ao FAQ */
    background: rgba(2, 11, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
    
    /* O Blur para as faíscas */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.st-sites-input-group {
    margin-bottom: 25px;
}

.st-sites-input-group label {
    display: block;
    color: #8892b0;
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

/* Inputs e Selects */
.st-sites-form input,
.st-sites-form select,
.st-sites-form textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

/* Focus */
.st-sites-form input:focus,
.st-sites-form select:focus,
.st-sites-form textarea:focus {
    border-color: var(--primary-red);
    background: rgba(5, 10, 20, 0.8);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.2);
}

/* Select Seta Personalizada */
.st-sites-form select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF0040%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

.st-sites-form select option {
    background: #010818;
    color: #fff;
}

/* Botão Enviar */
.st-sites-submit-btn {
    width: 100%;
    padding: 18px;
    background: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
}

.st-sites-submit-btn:hover {
    background: #cc0033;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 0, 64, 0.4);
}

/* Nota de Rodapé */
.st-sites-form-note {
    text-align: center;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #8892b0;
    font-family: 'Courier New', monospace;
    opacity: 0.8;
}

.st-sites-form-note i {
    color: #00ff88;
    margin-right: 5px;
}

.st-highlight-green {
    color: #00ff88;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/



/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

/* ======================================================
   RODAPÉ SITES (NAMESPACE "st-sites-footer")
   Isolamento total. Estilo High-Ticket Escuro.
   ====================================================== */

.st-sites-footer {
    background-color: #000; /* Fundo preto sólido */
    padding: 11rem 0 0 0; /* Padding superior, sem padding inferior interno */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: #8892b0;
    position: relative;
    z-index: 20; /* Garante que fique acima de tudo */
}

/* Container específico do footer */
.st-sites-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.st-sites-footer-grid {
    display: grid;
    /* 4 Colunas iguais para simetria perfeita */
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px;
    align-items: start;
    text-align: center; /* Centraliza textos */
    margin-bottom: 60px; /* Espaço antes do copyright */
}

/* --- COLUNA 1: MARCA --- */
/* --- LOGO DO RODAPÉ CORRIGIDA --- */
.st-sites-footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #fff;
    
    /* CORREÇÃO 1: Impede que o ponto caia para a linha de baixo */
    white-space: nowrap; 
}

/* CORREÇÃO 2: Garante que o ponto seja BRANCO */
.st-sites-logo-dot {
    color: #fff !important; /* Força o branco */
}

.st-sites-footer-brand p {
    line-height: 1.6;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

/* Status do Sistema */
.st-sites-system-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 15px;
    border-radius: 20px;
    width: fit-content;
    margin: 0 auto;
    
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.st-sites-status-dot {
    width: 8px;
    height: 8px;
    background-color: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
    animation: stSitesPulse 2s infinite;
}

.st-sites-status-text {
    color: #00ff88;
    font-weight: 700;
}

@keyframes stSitesPulse { 
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); } 
    50% { opacity: 0.5; box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } 
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } 
}

/* --- COLUNAS 2 e 3: LINKS --- */
.st-sites-footer-links h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.st-sites-footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.st-sites-footer-links li {
    margin-bottom: 12px;
}

.st-sites-footer-links a {
    color: #8892b0;
    text-decoration: none;
    transition: 0.3s;
    font-weight: 500;
}

.st-sites-footer-links a:hover {
    color: var(--primary-red);
    opacity: 0.8; 
}

/* Ícones Sociais */
.st-sites-social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.st-sites-social-icons a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff !important;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.st-sites-social-icons a:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    transform: translateY(-3px);
}

/* --- COLUNA 4: DRAGÃO --- */
.st-sites-footer-dragon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.st-sites-dragon-logo {
    max-width: 120px;
    height: auto;
    opacity: 0.7;
    filter: grayscale(100%);
    transition: 0.4s;
}

.st-sites-footer-dragon-box:hover .st-sites-dragon-logo {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ======================================================
   BARRA DE COPYRIGHT (NAMESPACE "st-sites-")
   ====================================================== */

/* Resetando a borda superior do footer pai para não haver conflito */
.st-sites-footer {
    border-top: none !important;
}

/* Espaçamento extra no final do grid para a linha não subir */
.st-sites-footer-grid {
    padding-bottom: 80px; /* Ajuste conforme necessário para o respiro visual */
}

.st-sites-copyright-bar {
    width: 100%;
    background-color: #000;
    /* AQUI ESTÁ A LINHA: Ela fica apenas no topo desta div */
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 10px 0;
    text-align: center;
}

/* Centralização forçada do container interno */
.st-sites-copyright-bar .container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
}

.st-sites-copyright-bar p {
    color: #fff;
    font-size: 0.75rem; /* Tamanho discreto como na imagem */
    font-family: 'Courier New', monospace; /* Fonte estilo terminal/enginnering */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    opacity: 0.5; /* Opacidade sutil para não brigar com a logo principal */
}



/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

/* ======================================================
   BOTÃO WHATSAPP SITES (BLINDADO)
   ====================================================== */

.st-sites-whatsapp-link {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 99999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.st-sites-whatsapp-link i {
    font-size: 35px;
    position: relative;
    z-index: 2;
}

/* Efeito de Onda (Pulse) Blindado */
.st-sites-whatsapp-link::before,
.st-sites-whatsapp-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25d366;
    opacity: 0.5;
    z-index: 1;
    animation: stSitesPulseWave 2s infinite;
}

.st-sites-whatsapp-link::after {
    animation-delay: 1s;
}

@keyframes stSitesPulseWave {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Tooltip "Online Agora" */
.st-sites-status-tooltip {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(10, 20, 35, 0.95);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(37, 211, 102, 0.3);
    padding: 8px 15px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-sites-dot-online {
    width: 8px;
    height: 8px;
    background: #25d366;
    border-radius: 50%;
    display: inline-block;
}

.st-sites-status-tooltip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid rgba(10, 20, 35, 0.95);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* Interação Hover */
.st-sites-whatsapp-link:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
}

.st-sites-whatsapp-link:hover .st-sites-status-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Desliga o pulso no hover para focar no tooltip */
.st-sites-whatsapp-link:hover::before,
.st-sites-whatsapp-link:hover::after {
    animation: none;
    opacity: 0;
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .st-sites-whatsapp-link {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
    }
    .st-sites-whatsapp-link i { font-size: 28px; }
    .st-sites-status-tooltip { display: none; } /* Oculta tooltip no mobile para não poluir */
}










/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/


/* ======================================================
   HEADER APLICATIVOS (NAMESPACE "ap-") - FIDELIDADE TOTAL
   ====================================================== */

.ap-header {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    overflow: visible !important;
}

.ap-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: visible !important; 
    position: relative;
}

/* --- LOGO (TRAVA DE LINHA ÚNICA + PESO NORMAL) --- */
.ap-logo {
    font-size: 30px;
    color: var(--text-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px; /* Gap original */
    transition: transform 0.3s ease; 
    backface-visibility: hidden;
    white-space: nowrap !important;
    flex-shrink: 0;
}

.ap-logo:hover { transform: scale(1.05); }

.ap-logo-img { height: 100px; width: auto; }

.ap-logo-text, 
.ap-logo .ap-highlight {
    font-weight: 400 !important; /* Força o peso normal no Header */
    white-space: nowrap;
}

/* --- NAV LINKS (GAPS ORIGINAIS) --- */
.ap-nav-links {
    display: flex;
    list-style: none;
    gap: 40px; /* Gap original de 40px */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
}

.ap-nav-links a {
    color: var(--text-white);
    text-decoration: none;
    font-size: 17px;
    transition: 0.3s;
}

.ap-nav-links a:hover, .ap-nav-links a.ap-active {
    color: var(--primary-red);
}

/* --- SUBMENU (CONFIGURAÇÃO ORIGINAL) --- */
.ap-nav-links li { position: relative; }

.ap-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0f1724; 
    padding: 15px; /* Padding original */
    white-space: nowrap;
    list-style: none;
    min-width: 150px; /* Largura original */
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    z-index: 10000;
}

.ap-dropdown:hover .ap-dropdown-menu { display: block; }

.ap-dropdown-menu li a {
    display: block;
    padding: 10px 0px; /* Padding original dos links do submenu */
    font-size: 15px;
}

/* --- BOTÃO CONTATO (NAMESPACE ap-) --- */
.ap-btn-primary {
    position: relative;
    padding: 0.75rem 2.2rem; 
    border-radius: 3rem; 
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 1px;
    color: var(--text-white);
    background: transparent;
    border: 0.125rem solid var(--primary-red); 
    
    /* Garante que o efeito não vaze das bordas arredondadas */
    overflow: hidden; 
    -webkit-mask-image: -webkit-radial-gradient(white, black); 
    z-index: 1;
    transition: all 0.5s ease;
    display: inline-block;
}

/* O elemento que faz o preenchimento (Namespace ap-) */
.ap-btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0; /* Começa com largura zero */
    height: 100%;
    background: var(--primary-red);
    z-index: -1; /* Fica atrás do texto */
    transition: all 0.5s ease;
    border-radius: 3rem; 
}

/* Hover do Botão: Muda a cor da sombra e garante a visibilidade do texto */
.ap-btn-primary:hover {
    color: #fff;
    box-shadow: 0 0 1.25rem rgba(255, 0, 64, 0.6); 
}

/* Hover do Elemento de Preenchimento: Expande para 100% */
.ap-btn-primary:hover::before {
    width: 100%; 
    border-radius: 0; 
}

/* --- MOBILE --- */
.ap-hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-white);
}

@media (max-width: 768px) {
    .ap-nav-links {
        position: fixed;
        top: 70px;
        right: -100%;
        background-color: #0f1724;
        width: 100%;
        height: calc(100vh - 70px);
        flex-direction: column;
        align-items: center;
        padding: 50px 0;
        transition: 0.4s;
    }
    .ap-nav-links.ap-active { right: 0; }
    .ap-hamburger { display: block; }
}

/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/


/* ======================================================
   PÁGINA APLICATIVOS: HERO (NAMESPACE "ap-")
   ====================================================== */

.ap-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Padding superior maior para garantir que o Header (100px) tenha espaço livre */
    padding-top: 120px; 
    overflow: hidden;
    background: transparent;
    /* Camada inferior ao Header */
    z-index: 1; 
}

/* Luz de fundo que não interfere no mouse */
.ap-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    max-width: 800px;
    background: radial-gradient(circle, rgba(255, 0, 64, 0.15) 0%, rgba(0,0,0,0) 60%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
}

.ap-hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    /* Garante que o conteúdo da Hero não suba no espaço do Header */
    margin-top: 20px; 
    z-index: 20 !important;
}

/* --- BADGE --- */
.ap-badge-wrapper {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 30 !important;
    pointer-events: auto !important;
}

.ap-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    animation: ap-smoothFloat 2s ease-in-out infinite;
}

/* --- TÍTULO E DESTAQUE --- */
.ap-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 25px;
}

.ap-highlight {
    color: var(--primary-red);
    display: inline-block; /* Mudança: inline-block em vez de block */
    text-shadow: 0 0 50px rgba(255, 0, 64, 0.8);
    white-space: nowrap;
}

.ap-description {
    font-size: 1.1rem;
    color: #cccccc;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

/* --- BOTÕES (COM GARANTIA DE CLIQUE) --- */
.ap-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    z-index: 100; /* Garante que fique acima de qualquer brilho */
}

.ap-btn-plans, .ap-btn-portfolio {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Estilos de botão mantidos conforme o Header original */
.ap-btn-plans {
    position: relative;
    background: transparent;
    border: 2px solid var(--primary-red);
    color: #fff;
    padding: 0.75rem 2.2rem;
    border-radius: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: 0.3s;
}

.ap-btn-plans:hover {
    background: var(--primary-red);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.6);
}

.ap-btn-portfolio {
    position: relative;
    padding: 0.75rem 2.2rem;
    border-radius: 3rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border: 2px solid #fff;
    transition: 0.5s;
}

.ap-btn-portfolio:hover {
    color: #000;
    background: #fff;
}

/* --- ANIMAÇÕES (NAMESPACED) --- */
@keyframes ap-smoothFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes apFadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

.ap-fade-in-up {
    animation: apFadeInUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.ap-badge-wrapper.ap-fade-in-up { animation-delay: 0.1s; }
.ap-title.ap-fade-in-up         { animation-delay: 0.2s; }
.ap-description.ap-fade-in-up   { animation-delay: 0.4s; }
.ap-btn-wrapper.ap-fade-in-up   { animation-delay: 0.6s; }




/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

/* ======================================================
   PÁGINA APLICATIVOS: HERO (NAMESPACE "ap-")
   ====================================================== */

.ap-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Espaço extra no topo para o Header respirar livremente */
    padding-top: 100px; 
    overflow: hidden;
    background: transparent;
    /* Fica em uma camada atrás do Header */
    z-index: 1; 
}

/* Luz de Fundo (Atrás do conteúdo, sem bloquear cliques) */
.ap-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    max-width: 800px;
    background: radial-gradient(circle, rgba(255, 0, 64, 0.12) 0%, rgba(0,0,0,0) 60%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
}

.ap-hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 20 !important;
}

/* --- BADGE --- */
.ap-badge-wrapper {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

/* ======================================================
   BADGE APLICATIVOS COMPLETO (NAMESPACE "ap-")
   ====================================================== */

.ap-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    
    /* Animação Blindada */
    animation: ap-smoothFloat 2s ease-in-out infinite;
    will-change: transform;
}

/* Ícone no vermelho da Mythros Digital (#ff0040) */
.ap-badge i {
    color: #ff0040 !important;
    font-size: 0.9rem;
    /* Brilho para destacar o ícone no fundo escuro */
    text-shadow: 0 0 10px rgba(255, 0, 64, 0.5);
}

/* Animação exclusiva da página de Apps */
@keyframes ap-smoothFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --- TÍTULO --- */
.ap-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Peso extra-bold para o título principal */
    font-size: 3.5rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 25px;
}
.ap-highlight {
    color: var(--primary-red);
    display: inline-block;
    text-shadow: 0 0 50px rgba(255, 0, 64, 0.8);
    white-space: nowrap;
    
    /* AQUI ESTÁ O AJUSTE: */
    font-weight: 900 !important; /* Negrito máximo para destacar */
    margin-top: 10px; /* Pequeno ajuste de respiro entre as linhas */
}

.ap-description {
    font-size: 1.1rem;
    color: #cccccc;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

/* --- BOTÕES (NAMESPACED) --- */
/* ======================================================
   BOTÕES HERO APLICATIVOS (NAMESPACE "ap-") - CORREÇÃO DE CLIQUE
   ====================================================== */

/* Container dos Botões - Prioridade Máxima na Camada */
.ap-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 20px;
    position: relative;
    /* Eleva o container acima de qualquer seção que tenha subido com margem negativa */
    z-index: 999 !important; 
    pointer-events: auto !important;
}

/* Base comum para os dois botões */
.ap-btn-plans, .ap-btn-portfolio {
    position: relative;
    padding: 0.75rem 2.2rem;
    border-radius: 3rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Força o navegador a reconhecer o mouse mesmo com sobreposição de brilhos */
    pointer-events: auto !important; 
    /* Z-index interno para ficar à frente do conteúdo da Hero, mas atrás do Header */
    z-index: 10; 
}

/* --- BOTÃO 1: VER PLANOS (VERMELHO) --- */
.ap-btn-plans {
    background: transparent;
    border: 2px solid var(--primary-red);
    color: #fff;
    font-weight: 700;
    transition: 0.3s ease;
}

.ap-btn-plans:hover {
    background-color: var(--primary-red);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.6);
    transform: translateY(-3px);
}

/* Efeito de Brilho (Glitch) do Botão Planos */
.ap-btn-glitch {
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    transform: skewX(-25deg);
    z-index: 2;
    pointer-events: none; /* Brilho não pode bloquear o clique no botão */
}

.ap-btn-plans:hover .ap-btn-glitch {
    left: 150%;
    transition: 0.6s ease;
}

/* --- BOTÃO 2: VER PORTFÓLIO (BRANCO) --- */
.ap-btn-portfolio {
    font-weight: 600;
    color: #fff;
    border: 2px solid #fff;
    background: transparent;
    transition: all 0.5s ease;
}

/* Elemento de preenchimento líquido do Botão Portfólio */
.ap-btn-portfolio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 100%;
    background: #fff;
    /* CRÍTICO: z-index negativo garante que o fundo não cubra o texto ou o link */
    z-index: -1; 
    transition: all 0.5s ease;
    border-radius: 3rem;
}

.ap-btn-portfolio:hover {
    color: #000; /* Texto escurece no fundo branco */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
}

.ap-btn-portfolio:hover::before {
    width: 100%;
    border-radius: 0;
}


/* --- ANIMAÇÕES EXCLUSIVAS --- */
@keyframes ap-smoothFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes apFadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

.ap-fade-in-up {
    animation: apFadeInUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.ap-badge-wrapper.ap-fade-in-up { animation-delay: 0.1s; }
.ap-title.ap-fade-in-up         { animation-delay: 0.2s; }
.ap-description.ap-fade-in-up   { animation-delay: 0.4s; }
.ap-btn-wrapper.ap-fade-in-up   { animation-delay: 0.6s; }

/* Mobile */
@media (max-width: 768px) {
    .ap-title { font-size: 2.2rem; }
    .ap-btn-wrapper { flex-direction: column; width: 100%; }
    .ap-btn-plans, .ap-btn-portfolio { width: 100%; }
}



/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/


/* ======================================================
   SEÇÃO SETORES APLICATIVOS (NAMESPACE "ap-")
   ====================================================== */

.ap-sectors-section {
    padding: 12rem 0;
    position: relative;
    z-index: 0; /* Reduzido para não bloquear os botões da Hero */
    margin-top: -185px; 
    background: transparent;
}

.ap-text-center {
    text-align: center;
}

.ap-sectors-header {
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px !important; 
    text-align: center;
}

.ap-sectors-subtitle {
    color: var(--primary-red);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.ap-sectors-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

/* Garante que o destaque nesta seção não herde o negrito 900 da Hero */
.ap-sectors-title .ap-highlight {
    color: var(--primary-red);
    text-shadow: 0 0 20px rgba(255, 0, 64, 0.4); 
    display: inline-block;
    font-weight: 800 !important; 
}

.ap-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

.ap-tag {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 25px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #a0aab5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: default;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    animation: ap-floatTag 4s ease-in-out infinite;
    will-change: transform;
}

.ap-tag i {
    color: #ff0040; /* Vermelho Mythros Digital */
    font-size: 1rem;
    transition: 0.3s;
}

.ap-tag:hover {
    background: rgba(255, 0, 64, 0.1);
    border-color: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.4);
    transform: scale(1.05);
    animation-play-state: paused;
}

/* Animação exclusiva ap- */
@keyframes ap-floatTag {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.ap-tag:nth-child(odd) { animation-duration: 3.5s; }
.ap-tag:nth-child(even) { animation-duration: 4.5s; animation-delay: 0.5s; }



/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/




/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* ======================================================
   SEÇÃO PLANOS APLICATIVOS (NAMESPACE "ap-")
   ====================================================== */

.ap-pricing-section {
    padding: 28rem 0;
    position: relative;
    background-color: #020b1e; 
}

.ap-pricing-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ap-pricing-header {
    text-align: center;
    margin-bottom: 60px;
    width: 100%;
}

.ap-tech-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
}

.ap-pricing-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: #fff;
    margin-top: 20px;
    white-space: nowrap; 
}

.ap-pricing-title .ap-highlight {
    color: var(--primary-red);
    display: inline-block !important;
    font-weight: 800 !important;
}

.ap-pricing-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 15px auto 0;
}

/* ======================================================
   GRID ATUALIZADO (2 COLUNAS CENTRALIZADAS)
   ====================================================== */
.ap-pricing-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.ap-pricing-group-two {
    display: grid;
    width: 100%;
    /* Define exatamente duas colunas centralizadas */
    max-width: 850px; 
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 0 auto;
    align-items: stretch;
    animation: apFadeUpPrice 0.5s ease forwards;
}

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

/* ESTILO DOS CARDS */
.ap-price-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: left;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Card Destaque Profissional */
.ap-price-card.ap-featured {
    border: 1px solid rgba(255, 0, 64, 0.5);
    background: linear-gradient(180deg, rgba(255, 0, 64, 0.08) 0%, rgba(0,0,0,0) 100%);
    box-shadow: 0 0 30px rgba(255, 0, 64, 0.1);
    transform: scale(1.05); 
    z-index: 2;
}

/* Hover Padrão (Subida) */
.ap-price-card:hover {
    transform: translateY(-10px); 
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

/* Hover Destaque (Mantém o zoom e sobe) */
.ap-price-card.ap-featured:hover {
    transform: scale(1.05) translateY(-10px) !important;
    border-color: rgba(255, 0, 64, 0.8);
}

.ap-card-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.ap-plan-name {
    font-size: 1.1rem;
    letter-spacing: 3px;
    color: var(--primary-red);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}

.ap-price-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.ap-cents {
    font-size: 0.4em;
    vertical-align: bottom;
    position: relative;
    bottom: 6px;
    font-weight: 600;
}

.ap-popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-red);
    color: #fff;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(255, 0, 64, 0.3);
}

.ap-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
}

.ap-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ccd6f6;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.ap-plan-features li i {
    color: #00ff88; 
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

.ap-btn-card {
    display: block;
    width: 100%;
    padding: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
}

.ap-btn-card:hover { background: #fff; color: #000; }

.ap-btn-highlight {
    background: var(--primary-red);
    border-color: var(--primary-red);
    box-shadow: 0 5px 20px rgba(255, 0, 64, 0.2);
}

/* Hover Destaque corrigido para brilho máximo */
.ap-btn-highlight:hover {
    background: #ffffff !important; 
    color: var(--primary-red) !important;
    border-color: #ffffff !important;
    /* Glow/Brilho corrigido para sites */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px);
}

/* ======================================================
   MOBILE ATUALIZADO
   ====================================================== */
@media (max-width: 768px) {
    .ap-pricing-title { white-space: normal; }
    
    .ap-pricing-group-two { 
        grid-template-columns: 1fr; 
        max-width: 350px;
        gap: 30px;
    }
    
    .ap-price-card.ap-featured { 
        transform: scale(1); 
    }
    
    .ap-price-card.ap-featured:hover {
        transform: translateY(-10px) !important;
    }
}
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

.ap-sites-portfolio {
    padding: 20rem 0;
    /* Fundo transparente para mostrar as faíscas da Home */
    background: transparent; 
    position: relative;
    z-index: 10;
}

/* --- CABEÇALHO --- */
.ap-sites-header {
    text-align: left;
    max-width: 800px;
    margin-bottom: 60px;
    padding: 0 15px;
}

.ap-sites-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: #fff;
    margin-top: 20px;
    line-height: 1.1;
}

/* Proteção para o destaque vermelho */
.ap-sites-title .ap-highlight {
    display: inline-block;
}

.ap-sites-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    margin-top: 20px;
    max-width: 500px;
    border-left: 3px solid var(--primary-red);
    padding-left: 20px;
}

/* --- GRID BENTO --- */
.ap-sites-grid {
    display: grid;
    /* 1 Coluna larga + 2 colunas normais */
    grid-template-columns: 1.5fr 1fr 1fr; 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- ESTILO DO CARD --- */
.ap-sites-card {
    background: rgba(255, 255, 255, 0.02); /* Vidro bem sutil */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    min-height: 450px;
}

.ap-sites-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* --- IMAGEM --- */
.ap-sites-image {
    height: 60%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ap-sites-placeholder {
    width: 100%;
    height: 100%;
    background-color: #0a1020;
    background-size: cover;
    background-position: top center;
    transition: transform 0.6s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ap-sites-card:hover .ap-sites-placeholder {
    transform: scale(1.05); /* Zoom suave */
}

.ap-sites-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(2, 11, 30, 0.9) 100%);
}

/* --- CONTEÚDO --- */
.ap-sites-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #020b1e; /* Fundo sólido para leitura */
    position: relative;
    z-index: 2;
    margin-top: -40px;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px 20px 0 0;
}

/* Tags */
.ap-sites-tags {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.ap-sites-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 1px;
}

.ap-sites-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.ap-sites-excerpt {
    font-size: 0.9rem;
    color: #a0aab5;
    line-height: 1.5;
    margin-bottom: 25px;
}

.ap-sites-btn {
    color: var(--primary-red);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.ap-sites-btn:hover {
    color: #fff;
    gap: 12px;
}

/* --- RESPONSIVO --- */
@media (max-width: 1024px) {
    .ap-sites-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .ap-sites-header {
        text-align: center;
        margin: 0 auto 50px auto;
    }
    
    .ap-sites-desc {
        border-left: none;
        border-top: 3px solid var(--primary-red);
        padding-left: 0;
        padding-top: 20px;
        margin: 20px auto 0 auto;
    }
}



/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

/* ======================================================
   SEÇÃO FAQ APLICATIVOS - CÓDIGO COMPLETO E BLINDADO (AP)
   ====================================================== */

.ap-faq-section {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(to top, #000510, transparent);
    display: block !important;
    height: auto !important;
    overflow: visible; 
}

.ap-faq-section .ap-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: auto !important;
}

/* --- CABEÇALHO DO FAQ --- */
.ap-section-header.ap-center-text {
    width: 100%;
    max-width: 100%; 
    margin-bottom: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilo do Badge "Centro de Inteligência" */
.ap-tech-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

.ap-mini-tag { 
    color: var(--primary-red); 
    font-family: monospace; 
    margin-bottom: 10px; 
}

.ap-section-title {
    /* Unidade Fluida para manter linha única */
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important; 
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    white-space: nowrap !important; 
    display: inline-block !important;
    letter-spacing: -1px; 
    width: auto;
    max-width: 95vw;
}

.ap-section-title .ap-highlight {
    display: inline !important; 
    color: var(--primary-red);
    text-shadow: 0 0 20px rgba(255, 0, 64, 0.4);
}

.ap-section-subtitle { 
    color: #8892b0; 
    margin-top: 15px; 
    max-width: 600px;
}

/* --- GRID E CARDS --- */
.ap-faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto !important;
    width: 100%;
}

.ap-faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: visible; 
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: block;
}

.ap-faq-item[open] {
    background: rgba(5, 10, 20, 0.8);
    border-color: var(--primary-red);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.1);
    margin-bottom: 10px; 
}

.ap-faq-summary {
    list-style: none;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.ap-faq-summary::-webkit-details-marker { display: none; }

.ap-faq-q {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.ap-faq-item[open] .ap-faq-q { 
    color: var(--primary-red); 
}

.ap-faq-icon {
    color: var(--primary-red);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.ap-faq-item[open] .ap-faq-icon { 
    transform: rotate(45deg); 
    color: #fff; 
}

.ap-faq-answer {
    padding: 0 25px 25px 25px;
    color: #a0aab5;
    line-height: 1.6;
    font-size: 0.95rem;
    animation: apFadeIn 0.5s ease;
}

.ap-faq-answer strong {
    color: #fff;
}

/* --- FOOTER DO FAQ --- */
.ap-faq-footer { 
    text-align: center; 
    margin-top: 60px; 
}

.ap-specialist-link {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--primary-red);
    transition: all 0.3s ease;
}

.ap-specialist-link:hover { 
    color: var(--primary-red); 
    padding-right: 10px; 
}

/* --- ANIMAÇÃO --- */
@keyframes apFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsividade Mobile */
@media (max-width: 600px) {
    .ap-section-title {
        white-space: normal !important; 
        font-size: 1.8rem !important;
    }
}

/* ======================================================
   SEÇÃO CONTATO SITES (NAMESPACE "ap-sites-")
   ====================================================== */

.ap-sites-contact-section {
    padding: 25rem 0;
    position: relative;
    background-color: #020b1e; 
    z-index: 10;
}

.ap-sites-contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Formulário maior */
    gap: 80px;
    align-items: center;
}

/* --- LADO ESQUERDO: TEXTOS --- */
.ap-sites-mini-tag {
    color: var(--primary-red);
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.ap-sites-contact-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
}

.ap-sites-contact-title .ap-highlight {
    display: inline-block;
}

.ap-sites-contact-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 450px;
}

/* Canais de Contato */
.ap-sites-info-channels {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ap-sites-channel-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ap-sites-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-red);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.ap-sites-channel-item:hover .ap-sites-icon-box {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 15px var(--primary-red);
}

.ap-sites-channel-item span {
    display: block;
    font-size: 0.8rem;
    color: #8892b0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.ap-sites-channel-item a {
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.ap-sites-channel-item a:hover {
    color: var(--primary-red);
}

/* --- LADO DIREITO: O FORMULÁRIO (ESTILO GLASS) --- */
.ap-sites-form-box {
    background: rgba(2, 11, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.ap-sites-input-group {
    margin-bottom: 25px;
}

.ap-sites-input-group label {
    display: block;
    color: #8892b0;
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

/* Inputs e Selects */
.ap-sites-form input,
.ap-sites-form select,
.ap-sites-form textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

/* Focus */
.ap-sites-form input:focus,
.ap-sites-form select:focus,
.ap-sites-form textarea:focus {
    border-color: var(--primary-red);
    background: rgba(5, 10, 20, 0.8);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.2);
}

/* Select Seta Personalizada */
.ap-sites-form select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF0040%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

.ap-sites-form select option {
    background: #010818;
    color: #fff;
}

/* Botão Enviar */
.ap-sites-submit-btn {
    width: 100%;
    padding: 18px;
    background: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
}

.ap-sites-submit-btn:hover {
    background: #cc0033;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 0, 64, 0.4);
}

/* Nota de Rodapé */
.ap-sites-form-note {
    text-align: center;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #8892b0;
    font-family: 'Courier New', monospace;
    opacity: 0.8;
}

.ap-sites-form-note i {
    color: #00ff88;
    margin-right: 5px;
}

.ap-highlight-green {
    color: #00ff88;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

/* Responsividade */
@media (max-width: 900px) {
    .ap-sites-contact-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .ap-sites-contact-info {
        text-align: center;
    }
    .ap-sites-info-channels {
        align-items: center;
    }
}

/* ======================================================
   RODAPÉ SITES (NAMESPACE "ap-sites-footer")
   ====================================================== */


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
.ap-sites-footer {
    background-color: #000; /* Fundo preto sólido */
    padding: 11rem 0 0 0; /* Padding superior, sem padding inferior interno */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: #8892b0;
    position: relative;
    z-index: 20; /* Garante que fique acima de tudo */
}

/* Container específico do footer */
.ap-sites-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ap-sites-footer-grid {
    display: grid;
    /* 4 Colunas iguais para simetria perfeita */
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px;
    align-items: start;
    text-align: center; /* Centraliza textos */
    margin-bottom: 60px; /* Espaço antes do copyright */
}

/* --- COLUNA 1: MARCA --- */
/* --- LOGO DO RODAPÉ CORRIGIDA --- */
.ap-sites-footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #fff;
    
    /* CORREÇÃO 1: Impede que o ponto caia para a linha de baixo */
    white-space: nowrap; 
}

/* CORREÇÃO 2: Garante que o ponto seja BRANCO */
.ap-sites-logo-dot {
    color: #fff !important; /* Força o branco */
}

.ap-sites-footer-brand p {
    line-height: 1.6;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

/* Status do Sistema */
.ap-sites-system-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 15px;
    border-radius: 20px;
    width: fit-content;
    margin: 0 auto;
    
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ap-sites-status-dot {
    width: 8px;
    height: 8px;
    background-color: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
    animation: apSitesPulse 2s infinite;
}

.ap-sites-status-text {
    color: #00ff88;
    font-weight: 700;
}

@keyframes apSitesPulse { 
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); } 
    50% { opacity: 0.5; box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } 
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } 
}

/* --- COLUNAS 2 e 3: LINKS --- */
.ap-sites-footer-links h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.ap-sites-footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ap-sites-footer-links li {
    margin-bottom: 12px;
}

.ap-sites-footer-links a {
    color: #8892b0;
    text-decoration: none;
    transition: 0.3s;
    font-weight: 500;
}

.ap-sites-footer-links a:hover {
    color: var(--primary-red);
    opacity: 0.8; 
}

/* Ícones Sociais */
.ap-sites-social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.ap-sites-social-icons a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff !important;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.ap-sites-social-icons a:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    transform: translateY(-3px);
}

/* --- COLUNA 4: DRAGÃO --- */
.ap-sites-footer-dragon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.ap-sites-dragon-logo {
    max-width: 120px;
    height: auto;
    opacity: 0.7;
    filter: grayscale(100%);
    transition: 0.4s;
}

.ap-sites-footer-dragon-box:hover .ap-sites-dragon-logo {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ======================================================
   BARRA DE COPYRIGHT (NAMESPACE "ap-sites-")
   ====================================================== */

/* Resetando a borda superior do footer pai para não haver conflito */
.ap-sites-footer {
    border-top: none !important;
}

/* Espaçamento extra no final do grid para a linha não subir */
.ap-sites-footer-grid {
    padding-bottom: 80px; /* Ajuste conforme necessário para o respiro visual */
}

.ap-sites-copyright-bar {
    width: 100%;
    background-color: #000;
    /* AQUI ESTÁ A LINHA: Ela fica apenas no topo desta div */
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 10px 0;
    text-align: center;
}

/* Centralização forçada do container interno */
.ap-sites-copyright-bar .container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
}

.ap-sites-copyright-bar p {
    color: #fff;
    font-size: 0.75rem; /* Tamanho discreto como na imagem */
    font-family: 'Courier New', monospace; /* Fonte estilo terminal/enginnering */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    opacity: 0.5; /* Opacidade sutil para não brigar com a logo principal */
}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .ap-sites-copyright-bar {
        padding: 25px 15px;
    }
    .ap-sites-copyright-bar p {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }
}



/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* BOTÃO WPP*/

.ap-sites-whatsapp-link {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 99999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ap-sites-whatsapp-link i {
    font-size: 35px;
    position: relative;
    z-index: 2;
}

/* Efeito de Onda (Pulse) Blindado */
.ap-sites-whatsapp-link::before,
.ap-sites-whatsapp-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25d366;
    opacity: 0.5;
    z-index: 1;
    animation: apSitesPulseWave 2s infinite;
}

.ap-sites-whatsapp-link::after {
    animation-delay: 1s;
}

@keyframes apSitesPulseWave {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Tooltip "Online Agora" */
.ap-sites-status-tooltip {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(10, 20, 35, 0.95);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(37, 211, 102, 0.3);
    padding: 8px 15px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ap-sites-dot-online {
    width: 8px;
    height: 8px;
    background: #25d366;
    border-radius: 50%;
    display: inline-block;
}

.ap-sites-status-tooltip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid rgba(10, 20, 35, 0.95);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* Interação Hover */
.ap-sites-whatsapp-link:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
}

.ap-sites-whatsapp-link:hover .ap-sites-status-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Desliga o pulso no hover para focar no tooltip */
.ap-sites-whatsapp-link:hover::before,
.ap-sites-whatsapp-link:hover::after {
    animation: none;
    opacity: 0;
}


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

/* ======================================================================================
   INÍCIO: SEÇÃO HERO SISTEMAS (sis-)
   ====================================================================================== */

.sis-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
    overflow: hidden;
}

.sis-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    max-width: 800px;
    background: radial-gradient(circle, rgba(255, 0, 64, 0.15) 0%, rgba(0,0,0,0) 60%);
    filter: blur(80px);
    z-index: 1;
    pointer-events: none;
}

.sis-hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.sis-badge-wrapper {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.sis-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    will-change: transform;
    animation: sis-smoothFloat 2s ease-in-out infinite;
}

.sis-badge i { color: var(--primary-red); }

.sis-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 25px;
}

.sis-highlight {
    color: var(--primary-red);
    display: block;
    text-shadow: 0 0 50px rgba(255, 0, 64, 0.8);
}

.sis-description {
    font-size: 1.1rem;
    color: #cccccc;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 40px auto;
    font-weight: 400;
}

/* --- BOTÕES HERO --- */
.sis-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.sis-btn-plans {
    position: relative;
    background-color: transparent;
    border: 2px solid var(--primary-red);
    color: #ffffff;
    padding: 0.75rem 2.2rem;
    border-radius: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
}

.sis-btn-plans:hover {
    background-color: var(--primary-red);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.6), inset 0 0 10px rgba(255, 0, 64, 0.2);
    transform: translateY(-3px);
}

.sis-btn-glitch {
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    transform: skewX(-25deg);
    transition: none;
    z-index: 2;
    pointer-events: none;
}

.sis-btn-plans:hover .sis-btn-glitch {
    left: 150%;
    transition: 0.6s ease;
}

.sis-btn-portfolio {
    position: relative;
    padding: 0.75rem 2.2rem;
    border-radius: 3rem;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    background: transparent;
    border: 0.125rem solid #ffffff;
    overflow: hidden;
    z-index: 1;
    transition: all 0.5s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sis-btn-portfolio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 100%;
    background: #ffffff;
    z-index: -1;
    transition: all 0.5s ease;
    border-radius: 3rem;
}

.sis-btn-portfolio:hover {
    color: #000000;
    box-shadow: 0 0 1.25rem rgba(255, 255, 255, 0.7);
    border-color: #ffffff;
    background-color: #ffffff;
}

.sis-btn-portfolio:hover::before {
    width: 100%;
    border-radius: 0;
}

/* --- ANIMAÇÕES HERO --- */
@keyframes sis-smoothFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@keyframes sisFadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

.sis-fade-in-up {
    animation: sisFadeInUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.sis-badge-wrapper.sis-fade-in-up { animation-delay: 0.1s; }
.sis-title.sis-fade-in-up         { animation-delay: 0.2s; }
.sis-description.sis-fade-in-up   { animation-delay: 0.4s; }
.sis-btn-wrapper.sis-fade-in-up   { animation-delay: 0.6s; }

/* ======================================================================================
   FIM: SEÇÃO HERO SISTEMAS
   ====================================================================================== */


/* ======================================================================================
   INÍCIO: SEÇÃO SETORES SISTEMAS (sis-)
   ====================================================================================== */

.sis-sectors-section {
    padding: 10rem 0;
    position: relative;
    z-index: 20;
    margin-top: -100px;
}

.sis-text-center { text-align: center; }

.sis-sectors-header {
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px; 
    text-align: center;
}

.sis-sectors-subtitle {
    color: var(--primary-red);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.sis-sectors-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

.sis-sectors-title .sis-highlight {
    display: inline-block; 
}

.sis-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

.sis-tag {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 25px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #a0aab5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: default;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    animation: sis-floatTag 4s ease-in-out infinite;
}

.sis-tag i {
    color: var(--primary-red);
    font-size: 1rem;
    transition: 0.3s;
}

.sis-tag:hover {
    background: rgba(255, 0, 64, 0.1);
    border-color: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.4);
    transform: scale(1.05);
    animation-play-state: paused;
}

@keyframes sis-floatTag {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.sis-tag:nth-child(odd) { animation-duration: 3.5s; }
.sis-tag:nth-child(even) { animation-duration: 4.5s; animation-delay: 0.5s; }
.sis-tag:nth-child(3n) { animation-duration: 4s; animation-delay: 1s; }

/* ======================================================================================
   FIM: SEÇÃO SETORES SISTEMAS
   ====================================================================================== */


/* ======================================================================================
   INÍCIO: SEÇÃO PREÇOS SISTEMAS (sis-)
   ====================================================================================== */

.sis-pricing-section {
    padding: 28rem 0;
    position: relative;
    background-color: #020b1e; 
}

.sis-pricing-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sis-pricing-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1000px;
    width: 100%;
}

.sis-tech-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
}

.sis-pricing-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: #fff;
    margin-top: 20px;
    white-space: nowrap; 
}

.sis-pricing-title .sis-highlight {
    display: inline-block !important;
}

.sis-pricing-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 15px auto 0;
}

.sis-switcher-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 60px;
}

.sis-switcher {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 5px;
}

.sis-switch-btn {
    background: transparent;
    border: none;
    color: #a0aab5;
    padding: 10px 25px;
    border-radius: 40px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.sis-switch-btn:hover { color: #fff; }

.sis-switch-btn.active {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 0, 64, 0.4);
}

.sis-pricing-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.sis-pricing-group {
    display: none;
    width: 100%;
    max-width: 1100px;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: center;
}

.sis-pricing-group.sis-active-group {
    display: grid;
    animation: sisFadeUpPrice 0.5s ease forwards;
}

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

.sis-price-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: left;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.sis-price-card.sis-featured {
    border: 1px solid rgba(255, 0, 64, 0.5);
    background: linear-gradient(180deg, rgba(255, 0, 64, 0.08) 0%, rgba(0,0,0,0) 100%);
    box-shadow: 0 0 30px rgba(255, 0, 64, 0.1);
    transform: scale(1.05);
    z-index: 2;
}

.sis-price-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.sis-price-card.sis-featured:hover {
    transform: scale(1.05) translateY(-10px);
}

.sis-card-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.sis-plan-name {
    font-size: 1.1rem;
    letter-spacing: 3px;
    color: var(--primary-red);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
}

.sis-price-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}

.sis-cents {
    font-size: 0.4em;
    vertical-align: bottom;
    position: relative;
    bottom: 6px;
    margin-left: 2px;
    font-weight: 600;
    opacity: 0.8;
}

.sis-popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-red);
    color: #fff;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(255, 0, 64, 0.3);
}

.sis-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
}

.sis-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ccd6f6;
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

.sis-plan-features li i {
    color: #00ff88; 
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6), 0 0 15px rgba(0, 255, 136, 0.3);
    font-size: 1.1rem;
    margin-top: 2px; 
}

.sis-btn-card {
    display: block;
    width: 100%;
    padding: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: 0.3s;
    margin-top: auto;
    text-decoration: none; 
}

.sis-btn-card:hover { background: #fff; color: #000; }

.sis-btn-highlight {
    background: var(--primary-red);
    border-color: var(--primary-red);
    box-shadow: 0 5px 20px rgba(255, 0, 64, 0.2);
}

.sis-btn-highlight:hover {
    background: #ffffff; 
    color: var(--primary-red);
    border-color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); 
}

/* ======================================================================================
   FIM: SEÇÃO PREÇOS SISTEMAS
   ====================================================================================== */


/* ======================================================================================
   INÍCIO: SEÇÃO SUSTENTAÇÃO SISTEMAS (sis-)
   ====================================================================================== */

.sis-maintenance-section {
    /* 1. Troque margin-top por padding-top */
    /* Isso cria o espaço de 9rem DENTRO da cor azul, não fora dela */
    padding-top: 5rem; 
    padding-bottom: 12rem; /* Adicione um respiro no fundo também */
    
    background-color: #020b1e; 
    position: relative;
    z-index: 10;
    
    /* 2. Remova o margin-top */
    margin-top: 0; 
    
    /* 3. Garante que a seção ocupe toda a largura sem falhas */
    width: 100%;
    display: block;
}

.sis-maint-wrapper {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--primary-red);
    border-radius: 15px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.sis-maint-info {
    flex: 1;
    min-width: 300px;
}

.sis-maint-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.sis-maint-title i {
    color: var(--primary-red);
    font-size: 1.5rem;
}

.sis-maint-desc {
    color: #a0aab5;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 600px;
}

.sis-maint-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.sis-maint-features li {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sis-maint-features li i {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

.sis-maint-pricing {
    text-align: right;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 40px;
    min-width: 200px;
}

.sis-maint-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.sis-cents-maint {
    font-size: 0.5em;
    vertical-align: bottom;
    font-weight: 600;
}

.sis-maint-value small {
    font-size: 0.4em;
    color: #a0aab5;
    font-weight: 400;
    margin-left: 5px;
}

/* ======================================================================================
   FIM: SEÇÃO SUSTENTAÇÃO SISTEMAS
   ====================================================================================== */


/* ======================================================================================
   INÍCIO: SEÇÃO PORTFÓLIO SISTEMAS (sis-sites-)
   ====================================================================================== */

.sis-sites-portfolio {
    padding: 20rem 0;
    background: transparent; 
    position: relative;
    z-index: 10;
}

.sis-sites-header {
    text-align: left;
    max-width: 800px;
    margin-bottom: 60px;
    padding: 0 15px;
}

.sis-sites-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: #fff;
    margin-top: 20px;
    line-height: 1.1;
}

.sis-sites-title .sis-highlight {
    display: inline-block;
}

.sis-sites-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    margin-top: 20px;
    max-width: 500px;
    border-left: 3px solid var(--primary-red);
    padding-left: 20px;
}

.sis-sites-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr; 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.sis-sites-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    min-height: 450px;
}

.sis-sites-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.sis-sites-image {
    height: 60%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.sis-sites-placeholder {
    width: 100%;
    height: 100%;
    background-color: #0a1020;
    background-size: cover;
    background-position: top center;
    transition: transform 0.6s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sis-sites-card:hover .sis-sites-placeholder {
    transform: scale(1.05);
}

.sis-sites-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(2, 11, 30, 0.9) 100%);
}

.sis-sites-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #020b1e;
    position: relative;
    z-index: 2;
    margin-top: -40px;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px 20px 0 0;
}

.sis-sites-tags {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.sis-sites-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 1px;
}

.sis-sites-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.sis-sites-excerpt {
    font-size: 0.9rem;
    color: #a0aab5;
    line-height: 1.5;
    margin-bottom: 25px;
}

.sis-sites-btn {
    color: var(--primary-red);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.sis-sites-btn:hover {
    color: #fff;
    gap: 12px;
}

/* ======================================================================================
   FIM: SEÇÃO PORTFÓLIO SISTEMAS
   ====================================================================================== */


/* ======================================================
   SEÇÃO FAQ SITES - CÓDIGO COMPLETO E BLINDADO (SIS)
   ====================================================== */

.sis-faq-section {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(to top, #000510, transparent);
    display: block !important;
    height: auto !important;
    overflow: visible; 
}

.sis-faq-section .sis-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: auto !important;
}

/* --- CABEÇALHO DO FAQ (BLINDAGEM DE TÍTULO) --- */
.sis-section-header.sis-center-text {
    width: 100%;
    max-width: 100%; 
    margin-bottom: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilo do Badge "Centro de Inteligência" */
.sis-tech-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

.sis-section-title {
    /* Unidade Fluida: escala baseada na largura da tela */
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important; 
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    
    /* Força o título a ficar em uma linha única */
    white-space: nowrap !important; 
    display: inline-block !important;
    
    letter-spacing: -1px; 
    width: auto;
    max-width: 95vw;
}

.sis-section-title .sis-highlight {
    display: inline !important;
    color: var(--primary-red);
    text-shadow: 0 0 20px rgba(255, 0, 64, 0.4);
}

.sis-section-subtitle { 
    color: #8892b0; 
    margin-top: 15px; 
    max-width: 600px;
}

/* --- GRID E CARDS --- */
.sis-faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto !important;
    width: 100%;
}

.sis-faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: visible; 
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: block;
}

.sis-faq-item[open] {
    background: rgba(5, 10, 20, 0.8);
    border-color: var(--primary-red);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.1);
    margin-bottom: 10px; 
}

.sis-faq-summary {
    list-style: none;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.sis-faq-summary::-webkit-details-marker { display: none; }

.sis-faq-q {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.sis-faq-item[open] .sis-faq-q { 
    color: var(--primary-red); 
}

.sis-faq-icon {
    color: var(--primary-red);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.sis-faq-item[open] .sis-faq-icon { 
    transform: rotate(45deg); 
    color: #fff; 
}

.sis-faq-answer {
    padding: 0 25px 25px 25px;
    color: #a0aab5;
    line-height: 1.6;
    font-size: 0.95rem;
    animation: sisFadeIn 0.5s ease;
}

.sis-faq-answer strong {
    color: #fff;
}

/* --- FOOTER DO FAQ --- */
.sis-faq-footer { 
    text-align: center; 
    margin-top: 60px; 
}

.sis-specialist-link {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--primary-red);
    transition: all 0.3s ease;
}

.sis-specialist-link:hover { 
    color: var(--primary-red); 
    padding-right: 10px; 
}

/* --- ANIMAÇÃO --- */
@keyframes sisFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}



/* ======================================================================================
   FIM: SEÇÃO FAQ SISTEMAS
   ====================================================================================== */



/* ======================================================
   SEÇÃO CONTATO SISTEMAS (NAMESPACE "sis-sites-")
   ====================================================== */

.sis-sites-contact-section {
    padding: 25rem 0;
    position: relative;
    
    /* MUDANÇA AQUI: */
    /* De: background: transparent; */
    /* Para: Cor Sólida (Igual Planos/Preços) */
    background-color: #020b1e; 
    
    /* Garante que fique acima do fundo global se houver */
    z-index: 10;
}

.sis-sites-contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Formulário maior */
    gap: 80px;
    align-items: center;
}

/* --- LADO ESQUERDO: TEXTOS --- */
.sis-sites-mini-tag {
    color: var(--primary-red);
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.sis-sites-contact-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
}

.sis-sites-contact-title .sis-highlight {
    display: inline-block;
}

.sis-sites-contact-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 450px;
}

/* Canais de Contato */
.sis-sites-info-channels {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sis-sites-channel-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sis-sites-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-red);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.sis-sites-channel-item:hover .sis-sites-icon-box {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 15px var(--primary-red);
}

.sis-sites-channel-item span {
    display: block;
    font-size: 0.8rem;
    color: #8892b0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.sis-sites-channel-item a {
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.sis-sites-channel-item a:hover {
    color: var(--primary-red);
}

/* --- LADO DIREITO: O FORMULÁRIO (ESTILO GLASS) --- */
.sis-sites-form-box {
    /* Efeito de Vidro Fosco igual ao FAQ */
    background: rgba(2, 11, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
    
    /* O Blur para as faíscas */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.sis-sites-input-group {
    margin-bottom: 25px;
}

.sis-sites-input-group label {
    display: block;
    color: #8892b0;
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

/* Inputs e Selects */
.sis-sites-form input,
.sis-sites-form select,
.sis-sites-form textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

/* Focus */
.sis-sites-form input:focus,
.sis-sites-form select:focus,
.sis-sites-form textarea:focus {
    border-color: var(--primary-red);
    background: rgba(5, 10, 20, 0.8);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.2);
}

/* Select Seta Personalizada */
.sis-sites-form select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF0040%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%0-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

.sis-sites-form select option {
    background: #010818;
    color: #fff;
}

/* Botão Enviar */
.sis-sites-submit-btn {
    width: 100%;
    padding: 18px;
    background: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
}

.sis-sites-submit-btn:hover {
    background: #cc0033;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 0, 64, 0.4);
}

/* Nota de Rodapé */
.sis-sites-form-note {
    text-align: center;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #8892b0;
    font-family: 'Courier New', monospace;
    opacity: 0.8;
}

.sis-sites-form-note i {
    color: #00ff88;
    margin-right: 5px;
}

.sis-highlight-green {
    color: #00ff88;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/



/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
.sis-sites-footer {
    background-color: #000; /* Fundo preto sólido */
    padding: 11rem 0 0 0; /* Padding superior, sem padding inferior interno */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: #8892b0;
    position: relative;
    z-index: 20; /* Garante que fique acima de tudo */
}

/* Container específico do footer */
.sis-sites-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sis-sites-footer-grid {
    display: grid;
    /* 4 Colunas iguais para simetria perfeita */
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px;
    align-items: start;
    text-align: center; /* Centraliza textos */
    margin-bottom: 60px; /* Espaço antes do copyright */
}

/* --- COLUNA 1: MARCA --- */
/* --- LOGO DO RODAPÉ CORRIGIDA --- */
.sis-sites-footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #fff;
    
    /* CORREÇÃO 1: Impede que o ponto caia para a linha de baixo */
    white-space: nowrap; 
}

/* CORREÇÃO 2: Garante que o ponto seja BRANCO */
.sis-sites-logo-dot {
    color: #fff !important; /* Força o branco */
}

.sis-sites-footer-brand p {
    line-height: 1.6;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

/* Status do Sistema */
.sis-sites-system-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 15px;
    border-radius: 20px;
    width: fit-content;
    margin: 0 auto;
    
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sis-sites-status-dot {
    width: 8px;
    height: 8px;
    background-color: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
    animation: sisSitesPulse 2s infinite;
}

.sis-sites-status-text {
    color: #00ff88;
    font-weight: 700;
}

@keyframes sisSitesPulse { 
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); } 
    50% { opacity: 0.5; box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } 
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } 
}

/* --- COLUNAS 2 e 3: LINKS --- */
.sis-sites-footer-links h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.sis-sites-footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sis-sites-footer-links li {
    margin-bottom: 12px;
}

.sis-sites-footer-links a {
    color: #8892b0;
    text-decoration: none;
    transition: 0.3s;
    font-weight: 500;
}

.sis-sites-footer-links a:hover {
    color: var(--primary-red);
    opacity: 0.8; 
}

/* Ícones Sociais */
.sis-sites-social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.sis-sites-social-icons a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff !important;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.sis-sites-social-icons a:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    transform: translateY(-3px);
}

/* --- COLUNA 4: DRAGÃO --- */
.sis-sites-footer-dragon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.sis-sites-dragon-logo {
    max-width: 120px;
    height: auto;
    opacity: 0.7;
    filter: grayscale(100%);
    transition: 0.4s;
}

.sis-sites-footer-dragon-box:hover .sis-sites-dragon-logo {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ======================================================
   BARRA DE COPYRIGHT (NAMESPACE "sis-sites-")
   ====================================================== */

/* Resetando a borda superior do footer pai para não haver conflito */
.sis-sites-footer {
    border-top: none !important;
}

/* Espaçamento extra no final do grid para a linha não subir */
.sis-sites-footer-grid {
    padding-bottom: 80px; /* Ajuste conforme necessário para o respiro visual */
}

.sis-sites-copyright-bar {
    width: 100%;
    background-color: #000;
    /* AQUI ESTÁ A LINHA: Ela fica apenas no topo desta div */
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 10px 0;
    text-align: center;
}

/* Centralização forçada do container interno */
.sis-sites-copyright-bar .container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
}

.sis-sites-copyright-bar p {
    color: #fff;
    font-size: 0.75rem; /* Tamanho discreto como na imagem */
    font-family: 'Courier New', monospace; /* Fonte estilo terminal/enginnering */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    opacity: 0.5; /* Opacidade sutil para não brigar com a logo principal */
}


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/


/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

/* ======================================================
   BOTÃO WHATSAPP SISTEMAS (BLINDADO)
   ====================================================== */

.sis-sites-whatsapp-link {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 99999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sis-sites-whatsapp-link i {
    font-size: 35px;
    position: relative;
    z-index: 2;
}

/* Efeito de Onda (Pulse) Blindado */
.sis-sites-whatsapp-link::before,
.sis-sites-whatsapp-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25d366;
    opacity: 0.5;
    z-index: 1;
    animation: sisSitesPulseWave 2s infinite;
}

.sis-sites-whatsapp-link::after {
    animation-delay: 1s;
}

@keyframes sisSitesPulseWave {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Tooltip "Online Agora" */
.sis-sites-status-tooltip {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(10, 20, 35, 0.95);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(37, 211, 102, 0.3);
    padding: 8px 15px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sis-sites-dot-online {
    width: 8px;
    height: 8px;
    background: #25d366;
    border-radius: 50%;
    display: inline-block;
}

.sis-sites-status-tooltip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid rgba(10, 20, 35, 0.95);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* Interação Hover */
.sis-sites-whatsapp-link:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
}

.sis-sites-whatsapp-link:hover .sis-sites-status-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Desliga o pulso no hover para focar no tooltip */
.sis-sites-whatsapp-link:hover::before,
.sis-sites-whatsapp-link:hover::after {
    animation: none;
    opacity: 0;
}





















/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------*/

/* ======================================================
   HEADER CHATBOTS (NAMESPACE "ch-")
   ====================================================== */

.ch-header {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    
    /* Permite que o submenu saia da caixa do header */
    overflow: visible !important;
}

.ch-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Garante que o container também não corte */
    overflow: visible !important; 
    position: relative; /* Ajuda no posicionamento */
}

/* --------------------------------------------------------------------------------------*/
/* LOGO (DRAGÃO + "MYTHROS DIGITAL" */
.ch-logo {
    font-size: 30px;
    color: var(--text-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    
    transition: transform 0.3s ease; 
    
    backface-visibility: hidden; 
}

.ch-logo:hover {
    transform: scale(1.05);
}

.ch-logo-img {
    height: 100px;
    width: auto;
}

.ch-logo .ch-highlight {
    color: var(--primary-red);
}

.ch-logo-text {
    position: relative;
    top: 0rem; 
    left: -0.5rem;
}

/* --------------------------------------------------------------------------------------*/
/* ITENS DO MENU HEADER (Centralizado X e Y) */
.ch-nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
    
    /* --- POSICIONAMENTO ABSOLUTO PERFEITO --- */
    position: absolute;
    
    left: 50%;   /* Centraliza na Horizontal */
    top: 50%;    /* Centraliza na Vertical (Faz subir) */
    
    /* O "pulo do gato": puxa 50% para esquerda e 50% para cima para ficar no centro exato */
    transform: translate(-50%, -50%);
    
    margin: 0;
    padding: 0;
}

.ch-nav-links a {
    color: var(--text-white);
    text-decoration: none;
    font-size: 17px;
    transition: 0.3s;
}

.ch-nav-links a:hover {
    color: var(--primary-red);
}

/* --------------------------------------------------------------------------------------*/
/* SUBMENU EM PRODUTOS */
.ch-nav-links li {
    position: relative;
}

/* SUBMENU EM PRODUTOS */
.ch-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    
    background-color: #0f1724; 
    
    padding: 15px;
    white-space: nowrap;
    list-style: none;
    min-width: 150px;
    border-radius: 10px; 
    
    /* Sombra mais forte para dar profundidade 3D */
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    
    z-index: 10000; /* Garante que fique acima de tudo */
}

.ch-dropdown:hover .ch-dropdown-menu {
    display: block;
}

.ch-dropdown-menu li a {
    display: block;
    padding: 10px 0px;
    font-size: 15px;
}

/* --------------------------------------------------------------------------------------*/
/* BOTÃO ENTRE EM CONTATO */

.ch-btn-primary {
    position: relative;
    padding: 0.75rem 2.2rem; 
    border-radius: 3rem; 
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 1px;
    color: var(--text-white);
    background: transparent;
    border: 0.125rem solid var(--primary-red); 
    
    overflow: hidden; 
    -webkit-mask-image: -webkit-radial-gradient(white, black); 
    z-index: 1;
    transition: all 0.5s ease;
}

/* O elemento que preenche */
.ch-btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 100%;
    background: var(--primary-red);
    z-index: -1;
    transition: all 0.5s ease;
    
    border-radius: 3rem; 
}

/* Hover */
.ch-btn-primary:hover {
    color: #fff;
    box-shadow: 0 0 1.25rem rgba(255, 0, 64, 0.6); 
}

.ch-btn-primary:hover::before {
    width: 100%; 
    border-radius: 0; 
}

/* --------------------------------------------------------------------------------------*/

/* Mobile Hamburger */
.ch-hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-white);
}


/* ======================================================================================
   INÍCIO: PÁGINA CHATBOTS - HERO (NAMESPACE "ch-")
   Proteção total contra alterações na Home
   ====================================================================================== */

/* Container Principal da Seção */
.ch-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
    overflow: hidden; /* Garante que a luz não vaze da seção */
}

/* Luz de Fundo Vermelha Suave */
.ch-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza exatamente no meio */
    width: 80%; /* Largura da luz */
    height: 80%; /* Altura da luz */
    max-width: 800px;
    /* Gradiente radial: Vermelho fraco no centro, transparente nas bordas */
    background: radial-gradient(circle, rgba(255, 0, 64, 0.15) 0%, rgba(0,0,0,0) 60%);
    filter: blur(80px); /* Desfoque alto para ficar bem suave */
    z-index: 1; /* Fica atrás do conteúdo, mas na frente do fundo preto */
    pointer-events: none; /* Não atrapalha cliques */
}

/* Conteúdo (Texto e Botões) */
.ch-hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 10; /* Garante que o texto fique NA FRENTE da luz */
}

/* 1. Badge (Pílula Superior) */
.ch-badge-wrapper {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.ch-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    will-change: transform;
    animation: ch-smoothFloat 2s ease-in-out infinite;
}

.ch-badge i { color: var(--primary-red); }

/* 2. Título */
.ch-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 25px;
}

/* Destaque "Digital" */
.ch-highlight {
    color: var(--primary-red);
    display: block;
    /* Brilho extra só na palavra Digital */
    text-shadow: 0 0 50px rgba(255, 0, 64, 0.8);
}

/* 3. Descrição */
.ch-description {
    font-size: 1.1rem;
    color: #cccccc;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 40px auto;
    font-weight: 400;
}

/* ======================================================================================
   INÍCIO: BOTÕES DA PÁGINA CHATBOTS (Namespace: ch-)
   ====================================================================================== */

/* Container dos Botões */
.ch-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* --- BOTÃO 1: PLANOS (VERMELHO COM GLITCH) --- */
.ch-btn-plans {
    position: relative;
    background-color: transparent;
    border: 2px solid var(--primary-red);
    color: #ffffff;
    padding: 0.75rem 2.2rem;
    border-radius: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
}

.ch-btn-plans:hover {
    background-color: var(--primary-red);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.6), inset 0 0 10px rgba(255, 0, 64, 0.2);
    transform: translateY(-3px);
}

/* EFEITO GLITCH (O BRILHO QUE PASSA CORRENDO) */
.ch-btn-glitch {
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    transform: skewX(-25deg);
    transition: none;
    z-index: 2;
    pointer-events: none;
}

.ch-btn-plans:hover .ch-btn-glitch {
    left: 150%;
    transition: 0.6s ease;
}

/* --- BOTÃO 2: PORTFÓLIO (BRANCO COM FILL) --- */
.ch-btn-portfolio {
    position: relative;
    padding: 0.75rem 2.2rem;
    border-radius: 3rem;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    background: transparent;
    border: 0.125rem solid #ffffff;
    overflow: hidden;
    z-index: 1;
    transition: all 0.5s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ch-btn-portfolio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 100%;
    background: #ffffff;
    z-index: -1;
    transition: all 0.5s ease;
    border-radius: 3rem;
}

.ch-btn-portfolio:hover {
    color: #000000;
    box-shadow: 0 0 1.25rem rgba(255, 255, 255, 0.7);
    border-color: #ffffff;
    background-color: #ffffff;
}

.ch-btn-portfolio:hover::before {
    width: 100%;
    border-radius: 0;
}

/* ======================================================================================
   FIM: BOTÕES DA PÁGINA CHATBOTS
   ====================================================================================== */


/* ======================================================================================
   INÍCIO: ANIMAÇÕES (Namespace ch-)
   ====================================================================================== */

@keyframes ch-smoothFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes chFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ch-fade-in-up {
    animation: chFadeInUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.ch-badge-wrapper.ch-fade-in-up { animation-delay: 0.1s; }
.ch-title.ch-fade-in-up         { animation-delay: 0.2s; }
.ch-description.ch-fade-in-up   { animation-delay: 0.4s; }
.ch-btn-wrapper.ch-fade-in-up   { animation-delay: 0.6s; }


/* ======================================================================================
   FIM: ANIMAÇÕES DA PÁGINA CHATBOTS
   ====================================================================================== */



/* ======================================================================================
   INÍCIO: PLANOS E VALORES CHATBOTS
   ====================================================================================== */

  /* ======================================================
   SEÇÃO PREÇOS (NAMESPACE "ch-")
   ====================================================== */
/* ======================================================================================
   INÍCIO: SEÇÃO PREÇOS SISTEMAS (ch-)
   ====================================================================================== */

/* ======================================================
   SEÇÃO PREÇOS: PADRONIZAÇÃO E CENTRALIZAÇÃO (ch-)
   ====================================================== */

.ch-pricing-section {
    padding: 28rem 0; /* Padding ajustado para melhor respiro */
    position: relative;
    background-color: #020b1e; 
}

.ch-pricing-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- CABEÇALHO --- */
.ch-pricing-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1000px;
    width: 100%;
}

.ch-tech-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
}

.ch-pricing-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: #fff;
    margin-top: 20px;
    white-space: nowrap; 
}

.ch-pricing-title .ch-highlight {
    display: inline-block !important;
    color: var(--primary-red);
}

.ch-pricing-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 15px auto 0;
}

/* --- CONTAINER E GRID (Lógica de Centralização) --- */
.ch-pricing-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ch-pricing-group {
    display: flex; /* Mudado de GRID para FLEX para centralizar card único */
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 1100px;
    gap: 30px;
}

.ch-pricing-group.ch-active-group {
    display: flex;
    animation: chFadeUpPrice 0.5s ease forwards;
}

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

/* --- ESTILO DOS CARDS (Tamanho Padronizado) --- */
.ch-price-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: left;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 400px; /* Garante o mesmo tamanho das outras páginas */
}

/* Card Destaque (RECOMENDADO) */
.ch-price-card.ch-featured {
    border: 1px solid rgba(255, 0, 64, 0.5);
    background: linear-gradient(180deg, rgba(255, 0, 64, 0.08) 0%, rgba(0,0,0,0) 100%);
    box-shadow: 0 0 30px rgba(255, 0, 64, 0.1);
    transform: scale(1.05);
    z-index: 2;
}

/* Hover Padronizado */
.ch-price-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.ch-price-card.ch-featured:hover {
    /* Mantém a escala de 1.05 e adiciona o deslocamento para cima */
    transform: scale(1.05) translateY(-10px);
}

/* --- ELEMENTOS INTERNOS --- */
.ch-card-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.ch-plan-name {
    font-size: 1.1rem;
    letter-spacing: 3px;
    color: var(--primary-red);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
}

.ch-price-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}

.ch-cents {
    font-size: 0.4em;
    vertical-align: bottom;
    position: relative;
    bottom: 6px;
    margin-left: 2px;
    font-weight: 600;
    opacity: 0.8;
}

.ch-popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-red);
    color: #fff;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(255, 0, 64, 0.3);
}

.ch-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
}

.ch-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ccd6f6;
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

.ch-plan-features li i {
    color: #00ff88; 
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6), 0 0 15px rgba(0, 255, 136, 0.3);
    font-size: 1.1rem;
}

/* --- BOTÕES --- */
.ch-btn-card {
    display: block;
    width: 100%;
    padding: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: 0.3s;
    margin-top: auto;
    text-decoration: none; 
}

.ch-btn-card:hover { 
    background: #fff; 
    color: #000; 
}

.ch-btn-highlight {
    background: var(--primary-red);
    border-color: var(--primary-red);
    box-shadow: 0 5px 20px rgba(255, 0, 64, 0.2);
}

.ch-btn-highlight:hover {
    background: #ffffff !important; 
    color: var(--primary-red) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important; 
}


/* ======================================================================================
   FIM: PLANOS E VALORES CHATBOTS
   ====================================================================================== */





/* ======================================================
   SEÇÃO SUSTENTAÇÃO (MANUTENÇÃO) - NAMESPACE "ch-"
   ====================================================== */

.ch-maintenance-section {
    /* 1. Troque margin-top por padding-top */
    /* Isso cria o espaço de 9rem DENTRO da cor azul, não fora dela */
    padding-top: 5rem; 
    padding-bottom: 12rem; /* Adicione um respiro no fundo também */
    
    background-color: #020b1e; 
    position: relative;
    z-index: 10;
    
    /* 2. Remova o margin-top */
    margin-top: 0; 
    
    /* 3. Garante que a seção ocupe toda a largura sem falhas */
    width: 100%;
    display: block;
}

/* O Container (Caixa Estilizada) */
.ch-maint-wrapper {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--primary-red); /* Detalhe lateral vermelho */
    border-radius: 15px;
    padding: 40px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; /* Para celular */
    
    max-width: 1000px;
    margin: 0 auto; /* Centraliza a caixa na tela */
    
    /* Efeito de brilho sutil */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* --- LADO ESQUERDO (TEXTO) --- */
.ch-maint-info {
    flex: 1; /* Ocupa o espaço disponível */
    min-width: 300px;
}

.ch-maint-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.ch-maint-title i {
    color: var(--primary-red); /* Ícone de escudo vermelho */
    font-size: 1.5rem;
}

.ch-maint-desc {
    color: #a0aab5;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 600px;
}

/* Lista de Benefícios (Horizontal) */
.ch-maint-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ch-maint-features li {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Check Verde Neon (Igual ao dos Planos) */
.ch-maint-features li i {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

/* --- LADO DIREITO (PREÇO) --- */
.ch-maint-pricing {
    text-align: right;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 40px;
    min-width: 200px;
}

.ch-maint-label {
    display: block;
    font-size: 0.75rem;
    color: #a0aab5;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 600;
}

.ch-maint-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

/* Centavos pequenos na base */
.ch-cents-maint {
    font-size: 0.5em;
    vertical-align: bottom;
    font-weight: 600;
}

.ch-maint-value small {
    font-size: 0.4em;
    color: #a0aab5;
    font-weight: 400;
    margin-left: 5px;
}




/* ======================================================
   FIM: SEÇÃO SUSTENTAÇÃO (MANUTENÇÃO) - NAMESPACE "ch-"
   ====================================================== */




   /* ======================================================
   SEÇÃO PORTFÓLIO CHATBOTS (NAMESPACE "ch-sites-")
   Isolamento total para não afetar a Home
   ====================================================== */

.ch-sites-portfolio {
    padding: 20rem 0;
    /* Fundo transparente para mostrar as faíscas da Home */
    background: transparent; 
    position: relative;
    z-index: 10;
}

/* --- CABEÇALHO --- */
.ch-sites-header {
    text-align: left;
    max-width: 800px;
    margin-bottom: 60px;
    padding: 0 15px;
}

.ch-sites-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: #fff;
    margin-top: 20px;
    line-height: 1.1;
}

/* Proteção para o destaque vermelho */
.ch-sites-title .ch-highlight {
    display: inline-block;
}

.ch-sites-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    margin-top: 20px;
    max-width: 500px;
    border-left: 3px solid var(--primary-red);
    padding-left: 20px;
}

/* --- GRID BENTO --- */
.ch-sites-grid {
    display: grid;
    /* 1 Coluna larga + 2 colunas normais */
    grid-template-columns: 1.5fr 1fr 1fr; 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- ESTILO DO CARD --- */
.ch-sites-card {
    background: rgba(255, 255, 255, 0.02); /* Vidro bem sutil */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    min-height: 450px;
}

.ch-sites-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* --- IMAGEM --- */
.ch-sites-image {
    height: 60%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ch-sites-placeholder {
    width: 100%;
    height: 100%;
    background-color: #0a1020;
    background-size: cover;
    background-position: top center;
    transition: transform 0.6s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ch-sites-card:hover .ch-sites-placeholder {
    transform: scale(1.05); /* Zoom suave */
}

.ch-sites-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(2, 11, 30, 0.9) 100%);
}

/* --- CONTEÚDO --- */
.ch-sites-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #020b1e; /* Fundo sólido para leitura */
    position: relative;
    z-index: 2;
    margin-top: -40px;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px 20px 0 0;
}

/* Tags */
.ch-sites-tags {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.ch-sites-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 1px;
}

.ch-sites-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.ch-sites-excerpt {
    font-size: 0.9rem;
    color: #a0aab5;
    line-height: 1.5;
    margin-bottom: 25px;
}

.ch-sites-btn {
    color: var(--primary-red);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.ch-sites-btn:hover {
    color: #fff;
    gap: 12px;
}


   /* ======================================================
   FIM: SEÇÃO PORTFÓLIO CHATBOTS (NAMESPACE "ch-sites-")
   ====================================================== */





   /* ======================================================
   SEÇÃO FAQ CHATBOTS (NAMESPACE "ch-sites-faq-")
   ====================================================== */

/* ======================================================
   SEÇÃO FAQ SITES - CÓDIGO COMPLETO E BLINDADO (CH)
   ====================================================== */

.ch-faq-section {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(to top, #000510, transparent);
    display: block !important;
    height: auto !important;
    overflow: visible; 
}

.ch-faq-section .ch-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: auto !important;
}

/* --- CABEÇALHO DO FAQ (BLINDAGEM DE TÍTULO) --- */
.ch-section-header.ch-center-text {
    width: 100%;
    max-width: 100%; 
    margin-bottom: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilo do Badge "Centro de Inteligência" */
.ch-tech-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a0aab5;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

.ch-mini-tag { 
    color: var(--primary-red); 
    font-family: monospace; 
    margin-bottom: 10px; 
}

.ch-section-title {
    /* Unidade Fluida: escala entre 1.5rem e 2.5rem baseada na largura da tela */
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important; 
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    
    /* Força o título a ficar em uma linha única */
    white-space: nowrap !important; 
    display: inline-block !important;
    
    letter-spacing: -1px; 
    width: auto;
    max-width: 95vw;
}

.ch-section-title .ch-highlight {
    display: inline !important; 
    color: var(--primary-red);
    text-shadow: 0 0 20px rgba(255, 0, 64, 0.4);
}

.ch-section-subtitle { 
    color: #8892b0; 
    margin-top: 15px; 
    max-width: 600px;
}

/* --- GRID E CARDS --- */
.ch-faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto !important;
    width: 100%;
}

.ch-faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: visible; 
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: block;
}

.ch-faq-item[open] {
    background: rgba(5, 10, 20, 0.8);
    border-color: var(--primary-red);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.1);
    margin-bottom: 10px; 
}

.ch-faq-summary {
    list-style: none;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.ch-faq-summary::-webkit-details-marker { display: none; }

.ch-faq-q {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.ch-faq-item[open] .ch-faq-q { 
    color: var(--primary-red); 
}

.ch-faq-icon {
    color: var(--primary-red);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.ch-faq-item[open] .ch-faq-icon { 
    transform: rotate(45deg); 
    color: #fff; 
}

.ch-faq-answer {
    padding: 0 25px 25px 25px;
    color: #a0aab5;
    line-height: 1.6;
    font-size: 0.95rem;
    animation: chFadeIn 0.5s ease;
}

.ch-faq-answer strong {
    color: #fff;
}

/* --- FOOTER DO FAQ --- */
.ch-faq-footer { 
    text-align: center; 
    margin-top: 60px; 
}

.ch-specialist-link {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--primary-red);
    transition: all 0.3s ease;
}

.ch-specialist-link:hover { 
    color: var(--primary-red); 
    padding-right: 10px; 
}

/* --- ANIMAÇÃO --- */
@keyframes chFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ======================================================
   FIM: SEÇÃO FAQ CHATBOTS (NAMESPACE "ch-sites-faq-")
   ====================================================== */




/* ======================================================
   SEÇÃO CONTATO CHATBOTS (NAMESPACE "ch-sites-")
   ====================================================== */

.ch-sites-contact-section {
    padding: 25rem 0;
    position: relative;
    background-color: #020b1e; 
    z-index: 10;
}

.ch-sites-contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Formulário maior */
    gap: 80px;
    align-items: center;
}

/* --- LADO ESQUERDO: TEXTOS --- */
.ch-sites-mini-tag {
    color: var(--primary-red);
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.ch-sites-contact-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
}

.ch-sites-contact-title .ch-highlight {
    display: inline-block;
}

.ch-sites-contact-desc {
    color: #a0aab5;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 450px;
}

/* Canais de Contato */
.ch-sites-info-channels {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ch-sites-channel-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ch-sites-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-red);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.ch-sites-channel-item:hover .ch-sites-icon-box {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 15px var(--primary-red);
}

.ch-sites-channel-item span {
    display: block;
    font-size: 0.8rem;
    color: #8892b0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.ch-sites-channel-item a {
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.ch-sites-channel-item a:hover {
    color: var(--primary-red);
}

/* --- LADO DIREITO: O FORMULÁRIO (ESTILO GLASS) --- */
.ch-sites-form-box {
    background: rgba(2, 11, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.ch-sites-input-group {
    margin-bottom: 25px;
}

.ch-sites-input-group label {
    display: block;
    color: #8892b0;
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

/* Inputs e Selects */
.ch-sites-form input,
.ch-sites-form select,
.ch-sites-form textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

/* Focus */
.ch-sites-form input:focus,
.ch-sites-form select:focus,
.ch-sites-form textarea:focus {
    border-color: var(--primary-red);
    background: rgba(5, 10, 20, 0.8);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.2);
}

/* Select Seta Personalizada */
.ch-sites-form select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF0040%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%0-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

.ch-sites-form select option {
    background: #010818;
    color: #fff;
}

/* Botão Enviar */
.ch-sites-submit-btn {
    width: 100%;
    padding: 18px;
    background: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
}

.ch-sites-submit-btn:hover {
    background: #cc0033;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 0, 64, 0.4);
}

/* Nota de Rodapé */
.ch-sites-form-note {
    text-align: center;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #8892b0;
    font-family: 'Courier New', monospace;
    opacity: 0.8;
}

.ch-sites-form-note i {
    color: #00ff88;
    margin-right: 5px;
}

.ch-highlight-green {
    color: #00ff88;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}


/* --------------------------------------------------------------------------------------*/

/* ======================================================
   RODAPÉ CHATBOTS (NAMESPACE "ch-sites-footer")
   Isolamento total. Estilo High-Ticket Escuro.
   ====================================================== */
.ch-sites-footer {
    background-color: #000; /* Fundo preto sólido */
    padding: 11rem 0 0 0; /* Padding superior, sem padding inferior interno */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: #8892b0;
    position: relative;
    z-index: 20; /* Garante que fique acima de tudo */
}

/* Container específico do footer */
.ch-sites-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ch-sites-footer-grid {
    display: grid;
    /* 4 Colunas iguais para simetria perfeita */
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px;
    align-items: start;
    text-align: center; /* Centraliza textos */
    margin-bottom: 60px; /* Espaço antes do copyright */
}

/* --- COLUNA 1: MARCA --- */
/* --- LOGO DO RODAPÉ CORRIGIDA --- */
.ch-sites-footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #fff;
    
    /* CORREÇÃO 1: Impede que o ponto caia para a linha de baixo */
    white-space: nowrap; 
}

/* CORREÇÃO 2: Garante que o ponto seja BRANCO */
.ch-sites-logo-dot {
    color: #fff !important; /* Força o branco */
}

.ch-sites-footer-brand p {
    line-height: 1.6;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

/* Status do Sistema */
.ch-sites-system-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 15px;
    border-radius: 20px;
    width: fit-content;
    margin: 0 auto;
    
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ch-sites-status-dot {
    width: 8px;
    height: 8px;
    background-color: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
    animation: chSitesPulse 2s infinite;
}

.ch-sites-status-text {
    color: #00ff88;
    font-weight: 700;
}

@keyframes chSitesPulse { 
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); } 
    50% { opacity: 0.5; box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } 
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } 
}

/* --- COLUNAS 2 e 3: LINKS --- */
.ch-sites-footer-links h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.ch-sites-footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ch-sites-footer-links li {
    margin-bottom: 12px;
}

.ch-sites-footer-links a {
    color: #8892b0;
    text-decoration: none;
    transition: 0.3s;
    font-weight: 500;
}

.ch-sites-footer-links a:hover {
    color: var(--primary-red);
    opacity: 0.8; 
}

/* Ícones Sociais */
.ch-sites-social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.ch-sites-social-icons a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff !important;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.ch-sites-social-icons a:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    transform: translateY(-3px);
}

/* --- COLUNA 4: DRAGÃO --- */
.ch-sites-footer-dragon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.ch-sites-dragon-logo {
    max-width: 120px;
    height: auto;
    opacity: 0.7;
    filter: grayscale(100%);
    transition: 0.4s;
}

.ch-sites-footer-dragon-box:hover .ch-sites-dragon-logo {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ======================================================
   BARRA DE COPYRIGHT (NAMESPACE "ch-sites-")
   ====================================================== */

/* Resetando a borda superior do footer pai para não haver conflito */
.ch-sites-footer {
    border-top: none !important;
}

/* Espaçamento extra no final do grid para a linha não subir */
.ch-sites-footer-grid {
    padding-bottom: 80px; /* Ajuste conforme necessário para o respiro visual */
}

.ch-sites-copyright-bar {
    width: 100%;
    background-color: #000;
    /* AQUI ESTÁ A LINHA: Ela fica apenas no topo desta div */
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 10px 0;
    text-align: center;
}

/* Centralização forçada do container interno */
.ch-sites-copyright-bar .container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
}

.ch-sites-copyright-bar p {
    color: #fff;
    font-size: 0.75rem; /* Tamanho discreto como na imagem */
    font-family: 'Courier New', monospace; /* Fonte estilo terminal/enginnering */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    opacity: 0.5; /* Opacidade sutil para não brigar com a logo principal */
}


/* ======================================================
   FIM: RODAPÉ CHATBOTS (NAMESPACE "ch-sites-footer")
 ====================================================== */



 /* ======================================================
   BOTÃO WHATSAPP CHATBOTS (BLINDADO) - NAMESPACE "ch-"
   ====================================================== */

.ch-sites-whatsapp-link {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 99999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ch-sites-whatsapp-link i {
    font-size: 35px;
    position: relative;
    z-index: 2;
}

/* Efeito de Onda (Pulse) Blindado */
.ch-sites-whatsapp-link::before,
.ch-sites-whatsapp-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25d366;
    opacity: 0.5;
    z-index: 1;
    animation: chSitesPulseWave 2s infinite;
}

.ch-sites-whatsapp-link::after {
    animation-delay: 1s;
}

@keyframes chSitesPulseWave {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Tooltip "Online Agora" */
.ch-sites-status-tooltip {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(10, 20, 35, 0.95);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(37, 211, 102, 0.3);
    padding: 8px 15px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ch-sites-dot-online {
    width: 8px;
    height: 8px;
    background: #25d366;
    border-radius: 50%;
    display: inline-block;
}

.ch-sites-status-tooltip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid rgba(10, 20, 35, 0.95);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* Interação Hover */
.ch-sites-whatsapp-link:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
}

.ch-sites-whatsapp-link:hover .ch-sites-status-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Desliga o pulso no hover para focar no tooltip */
.ch-sites-whatsapp-link:hover::before,
.ch-sites-whatsapp-link:hover::after {
    animation: none;
    opacity: 0;
}




 /* ======================================================
   FIM: BOTÃO WHATSAPP CHATBOTS (BLINDADO) - NAMESPACE "ch-"
   ====================================================== */



/* INÍCIO DO CÓDIGO PRE-LOADER*/


/* ======================================================
   PRELOADER - MYTHROS DIGITAL
   ====================================================== */
/* ======================================================
   PRELOADER MYTHROS - CSS ATUALIZADO (CONTROLE DE SESSÃO)
   ====================================================== */


#preloader {
    position: fixed;
    /* inset: 0 substitui top, left, bottom, right e é mais estável */
    inset: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b1220;
    z-index: 100000; 
    /* Mudamos para 100% para ocupar a área visível sem forçar viewport units */
    width: 100%;
    height: 100%;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    opacity: 1;
    visibility: visible;
}

/* Criamos uma classe para esconder o preloader SEM animação caso ele não deva aparecer */
#preloader.preloader-instant-hide {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Mostra o preloader apenas quando a classe de trava está no HTML (via JS) */
.preloader-lock #preloader {
  display: flex !important;
}

#preloader .preloader-inner {
    text-align: center;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Impedimos que o container mude de tamanho dinamicamente */
    min-height: 450px; 
}

#preloader img {
    width: 300px;
    height: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    /* Importante: manter a logo fixa no topo do flex */
    flex-shrink: 0; 
    animation: pl-pulse 1.6s infinite ease-in-out;
}

#preloader .preloader-text {
    /* Reservamos o espaço exato da fonte antes dela aparecer */
    height: 60px; 
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-family: 'Montserrat', sans-serif !important; 
    font-weight: 800; 
    letter-spacing: 3px;
    text-transform: uppercase;
    
    /* Garante que o container de texto não empurre nada para cima */
    overflow: visible; 
}
/* Letras individuais da animação typewriter */
#preloader-text span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(24px, 5vw, 42px);
    font-weight: 800;
    display: inline-block;
    /* Mudamos para uma animação que não altere o tamanho do box (apenas escala interna) */
    animation: typeFadeBounce 0.45s ease-out forwards;
}

/* --- TRAVA DE SCROLL --- */
html.preloader-lock {
    /* Mantém a posição do scroll, mas impede o movimento */
    overflow: hidden !important;
    /* Evita o pulo horizontal (que já resolvemos) */
    scrollbar-gutter: stable; 
    /* Garante que o html não mude de tamanho */
    height: 100% !important;
}

body.preloader-lock {
    /* IMPORTANTE: Removido o 100vh !important que causava o pulo vertical */
    overflow: hidden !important;
    position: fixed; /* Congela a posição atual do usuário */
    width: 100%;
}

/* --- ANIMAÇÕES --- */
@keyframes pl-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes typeFadeBounce {
  0% { opacity: 0; transform: scale(0.8); }
  60% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Classe de fechamento suave */
#preloader.preloader-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 480px) {
  #preloader img { width: 180px !important; }
}









/* Classe para elementos visíveis apenas para Robôs de SEO e Leitores de Tela */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}






/* ======================================================
   RESPONSIVIDADE COMPLETA - MYTHROS DIGITAL (CORRIGIDA)
   ====================================================== */

/* ======================================================
   MEDIA QUERY UNIFICADA (MOBILE & TABLETS)
   ====================================================== */
@media screen and (max-width: 992px) {
    
    /* --- HEADER & CONTAINER --- */
    .header {
        width: 95%; 
        top: 10px;
        padding: 5px 0;
        overflow: visible !important; 
    }

    .container {
        padding: 0 20px;
        height: 60px;
        overflow: visible !important;
    }

    .header .btn-primary {
        display: none !important; 
    }

    .hamburger {
        display: block !important; 
        z-index: 1000001;
        cursor: pointer;
    }

    /* --- MENU GAVETA (NAVBAR) --- */
    .navbar {
        display: block !important;
        position: fixed !important;
        top: 0;
        right: -110%; 
        left: auto;
        width: 280px;
        height: 100vh;
        background: rgba(15, 23, 36, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-left: 1px solid rgba(255, 0, 64, 0.3) !important;
        padding: 100px 20px 40px 20px;
        z-index: 1000000 !important;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: none !important;
        box-sizing: border-box !important; 
        overflow-y: auto;
    }

    .navbar.active {
        right: 0 !important;
    }

    /* --- LINKS DO MENU (CENTRALIZADOS) --- */
    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centraliza horizontalmente */
        justify-content: center;
        gap: 25px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .nav-links li {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .nav-links a {
        border: none !important;
        text-decoration: none !important;
    }

    .nav-links a::after {
        display: none !important;
        width: 0 !important;
        content: none !important;
    }

    .nav-links a.active {
        color: var(--primary-red) !important;
        font-weight: 700 !important;
        background: transparent !important;
    }

    /* --- UTILITÁRIOS DE EXIBIÇÃO --- */
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }



















    /* --- SEÇÃO HERO --- */
.hero-particles {
        /* Mudamos para min-height para o conteúdo empurrar a próxima seção */
        height: auto !important; 
        min-height: 100vh;
        /* Padding maior no topo para fugir do Header e no fundo para desgrudar da próxima */
        padding: 160px 0 100px 0 !important; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }

    .hero-text h1 {
        font-size: 2.4rem !important;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    .hero-text h1 br { display: none; }

    .hero-text p {
        font-size: 1.1rem;
        margin-bottom: 2.5rem;
    }

    .hero-btns {
        flex-direction: column !important;
        align-items: center;
        gap: 15px;
    }

    .hero-btns .btn-primary, 
    .hero-btns .btn-secondary {
        width: 100%;
        max-width: 280px;
    }



















    /* --- SEÇÃO PRODUTOS --- */
.products-section {
        position: relative;
        /* O segredo para não sobrepor: um padding-top maior e fundo sólido */
        padding: 50rem 0 !important; 
        background: #010818 !important; /* Força o fundo escuro para cobrir as faíscas da Hero */
        z-index: 20; /* Garante que fique ACIMA da Hero ao rolar */
        margin-top: -1px; /* Remove frestas entre seções */
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px;
    }

    .magic-card {
        height: 380px !important;
    }

    .section-header {
        margin-bottom: 50px !important;
    }
 /* <--- FIM DA MEDIA QUERY 992px */

/* --- AJUSTES PARA TELAS PEQUENAS (MOBILE) --- */
@media screen and (max-width: 600px) {
    .cards-grid {
        grid-template-columns: 1fr !important; 
        max-width: 320px;
        margin: 0 auto;
    }

    .section-title {
        font-size: 2.2rem !important;
    }
}

@media screen and (max-width: 375px) {
    .hero-text h1 {
        font-size: 2rem !important;
    }
}













/* PORTIFÓLIIO */
   /* 1. Ajuste da Seção */
    .portfolio-section .container {
        margin-top: 4rem !important;
        padding: 0 20px;
        z-index: 999;
    }

    .portfolio-container {
        display: block !important;
        width: 100%;
    }

    /* Oculta a área de imagens definitivamente */
    .portfolio-visuals {
        display: none !important;
    }

    /* 2. Lista de Projetos (Transformada em Cards) */
    .project-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        border: none !important;
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .project-btn {
        width: 100%;
        font-size: 1.1rem !important;
        padding: 20px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 0, 64, 0.2) !important;
        /* border-radius: 15px; */
        color: #fff !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: 0.3s;
    }

    /* Ícone indicador de expansão */
    .project-btn::after {
        content: '\f078'; /* Seta para baixo */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.8rem;
        color: var(--primary-red);
        transition: 0.3s;
    }

    .project-btn.active {
        background: rgba(255, 0, 64, 0.08) !important;
        border-color: var(--primary-red) !important;
        /* border-radius: 15px 15px 0 0; */
    }

    .project-btn.active::after {
        transform: rotate(180deg); /* Seta vira para cima */
    }

    /* 3. Caixa de Detalhes (Aparece logo abaixo do botão) */
    .project-details {
        width: 100% !important;
        display: block !important; /* Deixa o container pai visível */
    }

    .detail-box {
        display: none; /* Escondido por padrão */
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 0, 64, 0.2);
        border-top: none;
        padding: 20px;
        border-radius: 0 0 15px 15px;
        margin-bottom: 10px;
        animation: slideDown 0.4s ease forwards;
    }

    .detail-box.active {
        display: block; /* Mostra apenas o ativo selecionado pelo JS */
    }

    .detail-box h3 {
        display: none; /* Esconde o título repetido (já está no botão) */
    }

    .detail-box p {
        font-size: 1rem;
        line-height: 1.6;
        color: #a0aec0;
        text-align: left;
        margin-bottom: 20px;
    }

    .tech-stack {
        justify-content: flex-start !important;
        gap: 8px;
    }

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
















    /* SOBRE */
    /* 1. Ajuste da Seção e Espaçamentos */
    .about-section {
        padding: 103rem 0 !important;
        margin-top: 0 !important; /* Removemos o 50rem que causaria um vácuo no mobile */
        /* O padding-top da seção anterior (Produtos/Portfolio) já cuidará do respiro */
        scroll-margin-top: -58rem !important; /* Corrige o link no hamburguer do sobre ir para o lugar certo */
    }

    .about-content {
        grid-template-columns: 1fr !important; /* Texto em cima, Cards embaixo */
        gap: 50px;
        text-align: center;
    }

    /* 2. Ajuste do Texto e Manifesto */
    .about-text .section-title {
        text-align: center !important;
        font-size: 2.2rem !important;
        line-height: 1.2;
    }

    .manifesto-text {
        font-size: 1rem;
        padding: 0 10px;
    }

    .signature-block {
        justify-content: center; /* Centraliza a assinatura da Mythros */
    }

    /* 3. Grid de Protocolos (Cards) */
    .about-grid {
        gap: 15px;
    }

    .protocol-card {
        padding: 25px 20px !important;
        /* Mudamos para uma coluna no mobile para o ícone não apertar o texto */
        grid-template-columns: 1fr !important; 
        text-align: center;
        justify-items: center;
        transform: none !important; /* Remove o deslocamento lateral no hover mobile */
    }

    .protocol-card:hover {
        transform: translateY(-5px) !important; /* No mobile, melhor subir do que ir pro lado */
    }

    .protocol-card h3 {
        text-align: center !important; /* Centraliza os títulos dos protocolos */
        font-size: 1.4rem;
        margin-top: 10px;
    }

    .card-number {
        font-size: 4rem; /* Reduz o número decorativo de fundo */
        opacity: 0.05;
    }

    .card-icon {
        width: 70px;
        height: 70px;
        font-size: 2.2rem;
    }


















    /* DEPOIMNETOS */
    /* 1. Destrava a Seção */
    .testimonials-section {
        padding: 0 0 !important;
        margin-top: -8rem !important;
        height: auto !important; /* Força altura automática */
        min-height: auto !important;
        overflow: visible !important; /* Garante que nada seja cortado */
    }

    .testimonials-wrapper {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 30px;
    }

    /* 2. Cabeçalho */
    .section-header-right {
        order: 1 !important; /* Coloca no topo da pilha flex */
        text-align: center !important;
        align-items: center !important;
        margin: 0 auto 30px auto !important;
        padding: 0 20px !important;
        width: 100% !important;
    }

    .section-header-right .mini-tag {
        margin: 0 auto 15px auto !important;
    }

    .section-header-right .section-subtitle {
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* 3. Lista de Depoimentos Minimalista */
    .testimonials-grid {
        order: 2 !important; /* Coloca abaixo do título */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
        padding: 0 20px !important;
    }


    .testimonials-grid .testi-card:last-child {
        grid-column: auto !important;      /* Remove a regra de grid do desktop */
        justify-self: center !important;   /* Garante centralização */
        width: 100% !important;            /* Ocupa a mesma largura dos outros */
        max-width: 400px;                  /* Limite opcional para o texto não espalhar muito */
        margin: 0 auto !important;         /* Força o alinhamento central */
    }

    /* Transforma o card em um bloco de texto simples */
    .testi-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;    /* Foto e Nome no meio */
        text-align: center !important;     /* Texto do depoimento no meio */
        width: 100% !important;
    }

    /* Foto, Nome e Texto centralizados */
    .card-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }

    .client-info {
        flex-direction: column !important;
        align-items: center !important;
    }

    .client-photo {
        width: 80px !important;
        height: 80px !important;
        border: 2px solid var(--primary-red) !important;
        margin-bottom: 10px;
    }

    .client-name {
        font-size: 1.2rem !important;
        color: #fff !important;
    }

    /* Depoimento Completo */
    .testi-text {
        color: #fff !important;
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        font-style: italic;
        max-width: 100% !important;
        -webkit-line-clamp: unset !important; /* Remove o limite de linhas */
        overflow: visible !important; /* Mostra o texto todo */
    }

    /* Remove métricas e aspas */
    .metric-box, .quote-icon {
        display: none !important;
    }




















    /* FAQ */
    .faq-section {
        padding: 45rem 0 !important;
        margin-top: 2rem !important;
        scroll-margin-top: -50rem !important;
    }

    .faq-section .section-title {
        font-size: 2.2rem !important;
        text-align: center;
    }

    .faq-section .section-subtitle {
        text-align: center;
        padding: 0 15px;
    }

    /* 2. Grid de Perguntas */
    .faq-grid {
        padding: 0 15px;
        gap: 15px;
    }

    /* 3. O Item da Pergunta (Ajuste de Toque) */
    summary {
        padding: 20px 15px !important; /* Mais respiro lateral */
    }

    .faq-q {
        font-size: 1rem !important; /* Fonte levemente menor para caber em telas estreitas */
        padding-right: 15px; /* Não deixa o texto bater no ícone + */
        line-height: 1.4;
    }

    /* 4. A Resposta */
    .faq-answer {
        padding: 0 15px 20px 15px !important;
        font-size: 0.9rem !important;
        text-align: left;
    }

    /* 5. Rodapé (Chamada para o Especialista) */
    .faq-footer {
        margin-top: 40px;
        padding: 0 20px;
    }

    .faq-footer p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .specialist-link {
        display: inline-block; /* Melhora o clique no mobile */
        margin-top: 10px;
        margin-left: 0;
    }
















    /* CONTATO */
    .contact-section {
        padding: 0 0 !important; 
        background: #010818 !important; /* Cor de base sólida */
        background: radial-gradient(circle at center, rgba(10, 20, 40, 1) 0%, #010818 100%) !important;
        height: auto !important;
        min-height: auto !important;
    }

    .contact-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        height: auto !important;
    }

    /* 1. Ajuste do Título e Canais */
    .contact-info {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .channel-item {
        display: flex !important;
        flex-direction: column !important; /* Ícone em cima do texto */
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* 2. Ajuste dos Links (Para não apertar o texto) */
    .channel-item a {
        font-size: 1.1rem !important;
        word-break: break-all; /* Evita que emails longos estourem a tela */
        line-height: 1.4;
        display: block;
    }

    .channel-item span {
        font-size: 0.8rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 5px;
    }


    .icon-box {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto !important;
    }
    .info-channels { 
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }

    /* 2. O FORMULÁRIO (CORREÇÃO DO CORTE) */
    .contact-form-box {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 2rem 20px !important;
        margin: 0 auto !important;
        
        /* CORREÇÃO AQUI: Fundo mais escuro e menos transparente para bloquear as faíscas */
        background: rgba(10, 20, 40, 0.95) !important; 
        backdrop-filter: blur(10px); /* Efeito de vidro que desfoca as faíscas atrás */
        
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-sizing: border-box !important;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }
    /* 3. Inputs e Grupos (Força Visibilidade) */
    .mythros-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important; /* Espaçamento interno entre os campos */
    }

    .input-group {
        margin-bottom: 5px !important; /* Reduzimos um pouco para caber tudo na tela */
    }
    .mythros-form input, 
    .mythros-form select, 
    .mythros-form textarea {
        background: rgba(0, 0, 0, 0.6) !important; /* Inputs mais escuros para destaque */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }

    .submit-btn {
        margin-top: 20px !important;
        margin-bottom: 10px !important; /* Garante que o botão não encoste na borda do box */
    }














/* FOOTER */
    .site-footer {
        padding: 26rem 0 0 0 !important; /* Mantido conforme solicitado */
        margin-top: 40rem !important;   /* Mantido conforme solicitado */
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background-color: #000000 !important;
        text-align: center;
        z-index: 100;
        display: block !important;
    }

    /* Ajuste do Grid para centralização total */
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centraliza os blocos no eixo X */
        justify-content: center !important;
        gap: 40px !important;
        padding-bottom: 50px !important;
        width: 100% !important;
    }

    /* 1. Marca e Status */
    .footer-brand { 
        order: 1; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .footer-logo { font-size: 1.8rem !important; margin-bottom: 10px; }
    
    /* Garante que o texto da marca não penda para os lados */
    .footer-brand p {
        margin: 0 auto !important;
        text-align: center !important;
    }


    .system-status {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        padding: 8px 15px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        width: fit-content !important;
        margin: 25px auto 0 auto !important; /* Espaço que você pediu */
        
        /* Restaura a fonte do container */
        font-family: 'Courier New', Courier, monospace !important; 
    }

    .status-dot {
        width: 8px !important;
        height: 8px !important;
        background-color: #00ff88 !important;
        border-radius: 50% !important;
        box-shadow: 0 0 10px #00ff88 !important;
        animation: statusPulse 2s infinite !important; /* Reativa a animação */
    }

    .status-text {
        color: #00ff88 !important;
        font-weight: 700 !important;
        font-family: 'Courier New', Courier, monospace !important; /* Restaura a fonte do texto */
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }


    /* 2. Navegação Centralizada */
    .footer-links:nth-of-type(2) { 
        order: 2; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 3. Legal & Redes Sociais */
    .footer-links:nth-of-type(3) { 
        order: 3; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* REMOVE RECUOS DE LISTA: O principal culpado pelo desalinhamento à esquerda */
    .footer-links ul {
        padding: 0 !important; 
        margin: 0 auto !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .social-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    /* 5. Barra de Copyright */
    .copyright-bar {
        background-color: #000 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 30px 15px !important;
        width: 100% !important;
        position: relative !important;
        clear: both !important;
        margin-top: 20rem; /* Mantido conforme solicitado */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .copyright-bar p {
        font-size: 0.65rem !important;
        opacity: 0.5;
        line-height: 1.6;
        text-align: center !important;
        margin: 0 auto !important;
    }

    













     /* BOTÃO WPP */
    .whatsapp-link {
        bottom: 20px;
        right: 20px;
        width: 55px; /* Reduzido de 65px */
        height: 55px; /* Reduzido de 65px */
    }

    .whatsapp-link i {
        font-size: 28px; /* Ícone proporcional ao novo tamanho */
    }

    /* 2. Comportamento do Tooltip no Mobile */
    /* Como não existe 'hover' no celular, o tooltip pode atrapalhar ou nunca aparecer */
    .status-tooltip {
        display: none !important; /* Recomendado esconder para um visual mais clean no mobile */
    }

    /* 3. Ajuste do Efeito Pulse */
    /* Reduzimos a escala da onda para não distrair tanto em telas pequenas */
    @keyframes pulse-wave {
        0% {
            transform: scale(1);
            opacity: 0.6;
        }
        100% {
            transform: scale(1.4); /* Reduzido de 1.6 */
            opacity: 0;
        }
    }


















    /* --- HEADER: SITES & PLATAFORMAS --- */

    .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    /* 1. Ajuste da Logo para não apertar no mobile */
    .logo-text {
        font-size: 18px !important; /* Redução leve para telas menores */
    }
    
    .logo-img {
        height: 38px !important;
    }

    /* 2. Tratamento do Dropdown no Mobile */
    /* No celular, transformamos o dropdown em uma lista comum para facilitar o toque */
    .dropdown > a i {
        margin-left: 8px;
        font-size: 0.8rem;
        transition: 0.3s;
    }

    /* Removemos o 'hover' do desktop e preparamos para o comportamento mobile */
    .dropdown:hover .dropdown-menu {
        display: none; /* Desativa o hover do desktop no mobile */
    }

    .dropdown-menu {
        display: none !important;
        position: static !important; /* Sai de cima do conteúdo e empurra os itens para baixo */
        display: block !important; /* Deixamos visível como uma sub-lista */
        background: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        border-left: 2px solid var(--primary-red) !important;
        box-shadow: none !important;
        margin: 10px 0 0 15px !important;
        padding: 5px 0 5px 15px !important;
        min-width: auto !important;
        width: 100%;
    }

    .dropdown-menu li {
        margin-bottom: 12px !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .dropdown-menu a {
        font-size: 15px !important;
        opacity: 0.8;
        text-align: left !important;
    }

    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important; /* Espaço entre os itens como na foto */
        padding-top: 40px !important;
    }


    .nav-links a {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.2rem !important; /* Fonte maior para destaque */
        font-weight: 500;
        color: #fff !important;
        text-decoration: none;
        transition: 0.3s;
    }

    /* 3. Ajuste do Link Ativo no Menu Mobile */
    .nav-links a.active::after {
        display: none !important; /* Removemos a linha neon embaixo para não poluir o menu lateral */
    }

    .nav-links a.active {
        color: var(--primary-red) !important;
        font-weight: 700;
    }

    /* 4. Botão de Contato no Mobile (CTA) */
    .cta-container .btn-primary {
        display: none !important; /* Escondemos o botão grande para dar espaço à logo */
    }


















    /* --- HERO SECTION: SITES & PLATAFORMAS--- */
    .st-hero-section {
        /* REDUÇÃO: de 25rem para um valor que permite ver os botões */
        padding: 20rem 0 60px 0 !important; 
        
        min-height: 100vh !important; /* Mudamos para 100vh para garantir o fundo preto total */
        display: flex !important; /* Flex ajuda a centralizar verticalmente */
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: 100% !important;
        overflow: visible !important; /* Garante que nada suma se crescer demais */
    }

    .st-hero-glow {
        width: 100%; /* Expande a luz para preencher o fundo mobile */
        height: 60%;
        opacity: 0.6; /* Deixa o brilho levemente mais intenso no celular */
    }

    /* 1. Título e Texto */
    .st-title {
        font-size: 2.2rem !important; /* Redução para não quebrar em 4 linhas */
        line-height: 1.2;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .st-title br {
        display: none; /* Remove a quebra de linha forçada do desktop */
    }

    .st-highlight {
        display: inline !important; /* No mobile, mantemos na mesma linha se couber */
        text-shadow: 0 0 30px rgba(255, 0, 64, 0.6);
    }

    .st-description {
        font-size: 1rem !important;
        line-height: 1.5;
        padding: 0 15px;
        margin-bottom: 35px !important;
    }

    /* 2. Badge Superior */
    .st-badge {
        font-size: 0.7rem !important;
        padding: 8px 18px !important;
        letter-spacing: 1px !important;
    }


    .st-hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-top: 20px !important;
        width: 100% !important;
        z-index: 999 !important;
        
    }

    /* 3. Botões (Empilhamento) */
    .st-btn-wrapper {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important; /* Garante centralização horizontal */
        gap: 15px !important;
        width: 100% !important;
        margin-top: 20px !important; 
        
        /* Força a exibição caso haja alguma animação travada */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important; 
        
    }

    .st-btn-plans, 
    .st-btn-portfolio {
        display: flex !important;
        width: 100% !important; /* Deixa fluído dentro do max-width */
        max-width: 280px !important; 
        height: 50px !important; 
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        margin: 0 auto !important;
    }



















    /* --- SEÇÃO SETORES: TIPOS DE SITES (MOBILE) --- */
    .st-sectors-section {
        margin-top: 0 !important; 
        padding: 12rem 0 !important;
    }

    /* 1. Container Principal (Força Texto em cima e Badges embaixo) */
    .st-sectors-section .container {
        display: flex !important;
        flex-direction: column !important; /* EMPILHA OS ELEMENTOS */
        align-items: center !important;
        width: 100% !important;
    }

    /* 2. Cabeçalho (Título) */
    .st-sectors-header {
        width: 100% !important;
        margin-bottom: 40px !important;
        text-align: center !important;
    }

    .st-sectors-title {
        font-size: 2.1rem !important;
        line-height: 1.2 !important;
        display: block !important;
    }

    /* 3. Nuvem de Tags (Badges) */
    .st-tags-cloud {
        display: flex !important;
        flex-direction: row !important; /* Força direção horizontal */
        flex-wrap: wrap !important;     /* Permite quebrar linha quando faltar espaço */
        justify-content: center !important; /* Centraliza o grupo na tela */
        align-items: center !important;
        gap: 10px !important;           /* Espaçamento entre os badges */
        width: 100% !important;
        padding: 0 10px !important;
    }

    .st-tag {
        /* IMPORTANTE: Remove largura fixa ou 100% para permitir que fiquem lado a lado */
        width: auto !important; 
        flex: 0 1 auto !important; /* Não estica, apenas ocupa o tamanho do texto */
        
        display: inline-flex !important;
        white-space: nowrap !important; /* Impede que o texto dentro da tag quebre linha */
        
        padding: 8px 16px !important;   /* Tamanho otimizado para caber mais itens */
        font-size: 0.7rem !important;
        border-radius: 50px !important;
        animation: none !important;
    }















    /* --- SEÇÃO PREÇOS: PLANOS (MOBILE) --- */
    .st-pricing-section {
        /* O SEGREDO ESTÁ AQUI: O padding na SECTION empurra tudo para baixo */
        padding: 60rem 0 !important; 
        margin-top: 25rem !important;
        background-color: #020b1e !important;
        display: block !important;
        clear: both !important; /* Garante que comece após a seção anterior */
        width: 100% !important;
        position: relative !important;
    }

    /* 1. Cabeçalho */
    .st-pricing-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centraliza o flex-item horizontalmente */
        text-align: center !important;   /* Centraliza o texto internamente */
        width: 100% !important;
        padding: 0 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .st-pricing-title {
        font-size: 2.2rem !important; /* Tamanho reduzido para evitar quebra excessiva */
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        display: block !important;
        margin: 0 !important;
        
        /* O SEGREDO DA CORREÇÃO AQUI: */
        white-space: normal !important; /* Permite que o texto quebre linha se não couber */
        overflow-wrap: break-word !important; /* Força a quebra de palavras se necessário */
        line-height: 1.2 !important;
    }
    .st-pricing-desc {
        text-align: center !important;
        margin: 15px auto 0 auto !important;
        width: 100% !important;
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        white-space: normal !important;
    }


    .st-pricing-title .st-highlight {
        display: inline !important; /* Garante que o vermelho não vire um bloco torto */
        white-space: normal !important;
    }

    /* 2. Switcher (Seleção de Categoria) */
    .st-switcher-wrapper {
        margin-bottom: 40px !important;
        padding: 0 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .st-switcher {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        
        /* O segredo para bordas perfeitas: */
        border-radius: 16px !important; 
        overflow: hidden !important; /* Corta qualquer conteúdo que saia da borda redonda */
        padding: 6px !important;
        gap: 4px !important;
    }
    .st-switch-btn {
        width: 100% !important;
        border-radius: 12px !important; /* Raio menor que o pai para encaixe perfeito */
        padding: 14px 10px !important;
        font-size: 0.75rem !important;
        border: none !important;
        transition: all 0.3s ease !important;
    }

    .st-switch-btn.active {
        background: var(--primary-red) !important;
        box-shadow: 0 4px 12px rgba(255, 0, 64, 0.3) !important;
    }

    /* 3. Grid dos Cards (O Coração da Seção) */
    .st-pricing-group.st-active-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        padding: 0 15px !important; /* Reduzi um pouco para dar mais espaço interno */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Estilo dos Cards no Mobile */
    .st-price-card {
        /* CORREÇÃO CRÍTICA: Use width: auto ou garanta que o 100% considere o padding */
        width: 100% !important; 
        max-width: 320px !important; /* Reduzi de 350px para garantir que caiba em iPhones menores */
        padding: 30px 20px !important;
        box-sizing: border-box !important; /* ESSENCIAL para não estourar */
        transform: none !important;
    }

    .st-price-card.st-featured {
        /* Reduzi o scale para 1.01. Às vezes o scale(1.02) faz a borda "comer" o espaço lateral */
        transform: scale(1.01) !important; 
        z-index: 2;
    }

    .st-price-card:hover,
    .st-price-card.st-featured:hover {
        transform: translateY(-5px) !important; /* Hover mais suave no mobile */
    }

    /* 4. Ajustes de Texto Interno */
    .st-price-value {
        font-size: 2.2rem !important; /* Ajuste leve para não quebrar a linha do preço */
    }

    .st-plan-features li {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
    }

    .st-btn-card {
        padding: 15px !important; /* Área de toque maior para mobile */
        font-size: 0.85rem !important;
    }


    .st-popular-tag {
        /* Garante que ocupe apenas o espaço necessário e não quebre linha */
        white-space: nowrap !important; 
        display: block !important;
        width: fit-content !important;
        
        /* Reset de posicionamento para centralização absoluta */
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: -12px !important; /* Mantém ela "montada" na borda superior */
        
        /* Ajuste fino de padding para o texto não encostar nas bordas */
        padding: 5px 15px !important;
        font-size: 0.65rem !important;
        text-align: center !important;
    }













/* --- SEÇÃO MANUTENÇÃO: SUSTENTAÇÃO (MOBILE) --- */
    .st-maintenance-section {
        /* 1. Usamos display: block e width: 100% para garantir que ela ocupe todo o lote */
        display: block !important;
        width: 100% !important;
        
        /* 2. Forçamos o fundo sólido sem nenhuma imagem de faísca */
        background-color: #020b1e !important;
        background-image: none !important;
        
        /* 3. Ajustamos os paddings para a seção ter corpo próprio */
        padding-top: 20rem !important; 
        padding-bottom: 25rem !important;
        
        /* 4. Z-index alto para cobrir as faíscas que vêm de baixo ou de cima */
        position: relative !important;
        z-index: 50 !important;
        
        /* 5. Clear both para evitar que flutuações das seções vizinhas entrem aqui */
        clear: both !important;
        margin: 0 !important;
    }

    /* 1. O Container Principal */
    .st-maint-wrapper {
        flex-direction: column !important;
        padding: 30px 20px !important;
        gap: 30px !important;
        border-left: none !important;
        border-top: 4px solid var(--primary-red) !important;
        text-align: center;
        background: rgba(255, 255, 255, 0.02) !important; /* Vidro sutil sobre o sólido */
        margin: 0 15px !important;
    }

    /* 2. Lado do Texto */
    .st-maint-info {
        min-width: unset !important;
        width: 100% !important;
    }

    .st-maint-title {
        font-size: 1.5rem !important;
        justify-content: center !important;
        flex-direction: column !important; /* Ícone em cima do texto se necessário */
        gap: 10px !important;
    }

    .st-maint-desc {
        font-size: 0.95rem !important;
        margin-bottom: 30px !important;
    }

    /* 3. Lista de Benefícios (Grade no Mobile) */
    .st-maint-features {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Duas colunas para não ficar muito longa */
        gap: 15px !important;
        text-align: left !important;
    }

    .st-maint-features li {
        font-size: 0.8rem !important;
        line-height: 1.2;
    }

    /* 4. Lado do Preço */
    .st-maint-pricing {
        text-align: center !important;
        border-left: none !important; /* Remove divisória vertical */
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* Adiciona divisória horizontal */
        padding: 30px 0 0 0 !important;
        width: 100% !important;
        min-width: unset !important;
    }

    .st-maint-value {
        font-size: 2.2rem !important;
    }









/* --- SEÇÃO PORTFÓLIO: SITES (MOBILE) --- */
    .st-sites-portfolio {
        padding: 5rem 0 !important; /* Redução do impacto de 20rem */
        background: transparent !important;
        background-color: transparent !important;
    }


    .st-sites-portfolio .container {
    display: flex !important;
    flex-direction: column !important; /* Empilha o texto e o grid verticalmente */
    align-items: center !important;    /* Centraliza os dois blocos horizontalmente */
}

    /* 1. Cabeçalho */
    .st-sites-header {
    text-align: center !important;     /* Centraliza o texto internamente */
    max-width: 800px !important;
    margin: 0 auto 50px auto !important; /* Centraliza o bloco e dá espaço para os cards */
    padding: 0 20px !important;
}
    .st-sites-title {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    .st-sites-desc {
    border-left: none !important;
    border-top: 3px solid var(--primary-red) !important; /* Detalhe vermelho agora no topo */
    padding: 20px 0 0 0 !important;
    margin: 20px auto 0 auto !important;
    text-align: center !important;
    display: inline-block; /* Garante que a borda acompanhe o tamanho do texto */
}

    /* 2. Grid (Conversão de Bento para Lista) */
    .st-sites-grid {
    display: flex !important;          /* No mobile, flex-column é melhor que grid bento */
    flex-direction: column !important;
    gap: 30px !important;
    width: 100% !important;
    padding: 0 20px !important;
}

    /* 3. Ajuste do Card */
    .st-sites-card {
        min-height: auto !important; /* Destrava a altura fixa */
        width: 100% !important;
    }

    .st-sites-card.st-card-large {
    grid-column: auto !important;
    width: 100% !important;
}

    .st-sites-image {
        height: 250px !important; /* Altura fixa confortável para mobile */
    }

    .st-sites-content {
        padding: 25px 20px !important;
        margin-top: -30px !important; /* Mantém o efeito de sobreposição suave */
    }

    .st-sites-name {
        font-size: 1.25rem !important;
    }

    .st-sites-excerpt {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
    }















    /* --- SEÇÃO FAQ: CENTRO DE INTELIGÊNCIA (MOBILE) --- */
    .st-faq-section {
        padding: 103rem 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        scroll-margin-top: -107rem !important;
    }

    .st-faq-section .st-container {
        padding: 0 20px !important;
    }

    /* 1. Cabeçalho */
    .st-section-header.st-center-text {
        margin-bottom: 40px !important;
    }

    .st-section-title {
        /* Remove o white-space: nowrap para permitir quebra em celulares pequenos */
        white-space: normal !important; 
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    /* 2. Itens do FAQ (Acordeon) */
    .st-faq-grid {
        gap: 15px !important;
    }

    .st-faq-summary {
        padding: 20px 15px !important; /* Mais respiro para o toque */
    }

    .st-faq-q {
        font-size: 0.95rem !important; /* Fonte legível sem ocupar muito espaço */
        padding-right: 15px;
        line-height: 1.4;
        text-align: left;
    }

    .st-faq-icon {
        font-size: 1rem !important;
    }

    /* 3. Resposta do FAQ */
    .st-faq-answer {
        padding: 0 15px 20px 15px !important;
        font-size: 0.9rem !important;
        text-align: left;
    }

    /* 4. Rodapé do FAQ */
    .st-faq-footer {
        margin-top: 40px !important;
        padding: 0 10px;
    }

    .st-faq-footer p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .st-specialist-link {
        display: inline-block;
        margin-top: 10px;
        font-size: 0.95rem;
    }





    /* --- SEÇÃO CONTATO: SITES & PLATAFORMAS (MOBILE) --- */
    .st-sites-contact-section {
        padding: 0 0 !important; 
        background: #010818 !important; /* Cor de base sólida */
        background: radial-gradient(circle at center, rgba(10, 20, 40, 1) 0%, #010818 100%) !important;
        height: auto !important;
        min-height: auto !important;
        margin-top: -60rem;
    }

    .st-sites-contact-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        height: auto !important;
    }

    /* 1. Ajuste do Título e Canais */
    .st-sites-contact-info {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .st-sites-channel-item {
        display: flex !important;
        flex-direction: column !important; /* Ícone em cima do texto */
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* 2. Ajuste dos Links (Para não apertar o texto) */
    .st-sites-channel-item a {
        font-size: 1.1rem !important;
        word-break: break-all; /* Evita que emails longos estourem a tela */
        line-height: 1.4;
        display: block;
    }

    .st-sites-channel-item span {
        font-size: 0.8rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 5px;
    }

    .st-sites-icon-box {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto !important;
    }

    .st-sites-info-channels { 
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }

    /* 2. O FORMULÁRIO (CORREÇÃO DO CORTE) */
    .st-sites-form-box {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 2rem 20px !important;
        margin: 0 auto !important;
        
        /* Fundo mais escuro e menos transparente para bloquear as faíscas */
        background: rgba(10, 20, 40, 0.95) !important; 
        backdrop-filter: blur(10px); /* Efeito de vidro que desfoca as faíscas atrás */
        
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-sizing: border-box !important;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    /* 3. Inputs e Grupos (Força Visibilidade) */
    .st-sites-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important; /* Espaçamento interno entre os campos */
    }

    .st-sites-input-group {
        margin-bottom: 5px !important; /* Reduzimos um pouco para caber tudo na tela */
    }

    .st-sites-form input, 
    .st-sites-form select, 
    .st-sites-form textarea {
        background: rgba(0, 0, 0, 0.6) !important; /* Inputs mais escuros para destaque */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }

    .st-sites-submit-btn {
        margin-top: 20px !important;
        margin-bottom: 10px !important; /* Garante que o botão não encoste na borda do box */
    }











    /* --- RODAPÉ: SITES & PLATAFORMAS (MOBILE) --- */
    .st-sites-footer {
        padding: 26rem 0 0 0 !important; 
        margin-top: 40rem !important;   
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background-color: #000000 !important;
        text-align: center;
        z-index: 100;
        display: block !important;
    }

    /* Ajuste do Grid para centralização total */
    .st-sites-footer-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important;
        gap: 40px !important;
        padding-bottom: 50px !important;
        width: 100% !important;
    }

    /* 1. Marca e Status */
    .st-sites-footer-brand { 
        order: 1; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .st-sites-footer-logo { font-size: 1.8rem !important; margin-bottom: 10px; }
    
    .st-sites-footer-brand p {
        margin: 0 auto !important;
        text-align: center !important;
    }

    .st-sites-system-status {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        padding: 8px 15px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        width: fit-content !important;
        margin: 25px auto 0 auto !important; 
        
        font-family: 'Courier New', Courier, monospace !important; 
    }

    .st-sites-status-dot {
        width: 8px !important;
        height: 8px !important;
        background-color: #00ff88 !important;
        border-radius: 50% !important;
        box-shadow: 0 0 10px #00ff88 !important;
        animation: stSitesPulse 2s infinite !important; 
    }

    .st-sites-status-text {
        color: #00ff88 !important;
        font-weight: 700 !important;
        font-family: 'Courier New', Courier, monospace !important; 
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }

    /* 2. Navegação Centralizada */
    .st-sites-footer-links:nth-of-type(2) { 
        order: 2; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 3. Legal & Redes Sociais */
    .st-sites-footer-links:nth-of-type(3) { 
        order: 3; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .st-sites-footer-links ul {
        padding: 0 !important; 
        margin: 0 auto !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .st-sites-social-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    /* 5. Barra de Copyright */
    .st-sites-copyright-bar {
        background-color: #000 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 30px 15px !important;
        width: 100% !important;
        position: relative !important;
        clear: both !important;
        margin-top: 20rem; 
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .st-sites-copyright-bar p {
        font-size: 0.65rem !important;
        opacity: 0.5;
        line-height: 1.6;
        text-align: center !important;
        margin: 0 auto !important;
    }



/* --- BOTÃO WHATSAPP: SITES & PLATAFORMAS (MOBILE) --- */
    .st-sites-whatsapp-link {
        bottom: 20px !important;
        right: 20px !important;
        width: 55px !important; /* Reduzido para não obstruir conteúdo */
        height: 55px !important;
        z-index: 9999 !important; /* Garante que fique acima de tudo */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .st-sites-whatsapp-link i {
        font-size: 28px !important; /* Ícone proporcional */
    }

    /* 2. Comportamento do Tooltip no Mobile */
    /* Em telas de toque, tooltips flutuantes podem causar cliques acidentais */
    .st-sites-status-tooltip {
        display: none !important; 
    }

    /* 3. Ajuste do Efeito Pulse (Energia Controlada) */
    /* Reduzimos a escala para manter a elegância em telas menores */
    @keyframes stSitesPulseWave {
        0% {
            transform: scale(1);
            opacity: 0.6;
        }
        100% {
            transform: scale(1.4); /* Expansão controlada */
            opacity: 0;
        }
    }

    /* Aplicando a animação corrigida ao elemento pulse se você tiver um */
    .st-sites-whatsapp-link::after {
        animation: stSitesPulseWave 2s infinite !important;
    }











/* ======================================================
   PÁGINA: APLICATIVOS (MOBILE) - PREFIXO "ap-"
   ====================================================== */


/* --- HEADER: APLICATIVOS --- */
   .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }


/* --- LOGO E IDENTIDADE (MOBILE) --- */
    header.header {
        width: 95% !important; 
        top: 10px !important;
        padding: 5px 0 !important;
        overflow: visible !important; 
    }

    header.header .container {
        padding: 0 20px !important;
        height: 60px !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Logo e Texto */
    .logo-text {
        font-size: 16px !important; /* Ajustado para não empurrar o hambúrguer */
        white-space: nowrap !important;
    }
    
    .logo-img {
        height: 35px !important;
    }

    /* Esconde o botão grande no mobile */
    .cta-container .btn-primary {
        display: none !important; 
    }

    /* O Hambúrguer (Usando o ID que você definiu) */
    #ap-hamburger {
        display: block !important; 
        z-index: 1000001 !important;
        cursor: pointer !important;
        color: #fff !important;
        font-size: 1.5rem !important;
    }

    /* --- NAVBAR GAVETA (MOBILE) --- */
    .navbar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: -110% !important; 
        left: auto !important;
        width: 280px !important;
        height: 100vh !important;
        background: rgba(15, 23, 36, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-left: 1px solid rgba(255, 0, 64, 0.3) !important;
        padding: 100px 20px 40px 20px !important;
        z-index: 1000000 !important;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-sizing: border-box !important; 
    }

    .navbar.active {
        right: 0 !important;
    }

    /* --- LINKS E DROPDOWN --- */
    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        gap: 25px !important;
        padding: 0 !important;
    }

    .nav-links li {
        width: 100% !important;
        text-align: center !important;
    }

    .nav-links a {
        font-size: 1.2rem !important;
        color: #fff !important;
    }

    /* Dropdown Aberto no Mobile */
    .dropdown-menu {
        display: block !important; /* Força ficar aberto no menu lateral */
        position: static !important;
        background: rgba(255, 255, 255, 0.05) !important;
        margin-top: 10px !important;
        border-left: 2px solid #ff0040 !important;
        padding-left: 15px !important;
    }

    .dropdown-menu li a {
        font-size: 0.9rem !important;
        opacity: 0.8;
    }










    

/* --- HERO SECTION: APLICATIVOS --- */
.ap-hero-section {
    padding: 20rem 0 60px 0 !important; 
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100% !important;
    overflow: visible !important;
}

.ap-hero-glow {
    width: 100%;
    height: 60%;
    opacity: 0.6;
}

/* 1. Título e Texto */
.ap-title {
    font-size: 2.2rem !important;
    line-height: 1.2;
    margin-bottom: 20px;
    padding: 0 10px;
}

.ap-title br {
    display: none;
}

.ap-highlight {
    display: inline !important;
    text-shadow: 0 0 30px rgba(255, 0, 64, 0.6);
}

.ap-description {
    font-size: 1rem !important;
    line-height: 1.5;
    padding: 0 15px;
    margin-bottom: 35px !important;
}

/* 2. Badge Superior */
.ap-badge {
    font-size: 0.7rem !important;
    padding: 8px 18px !important;
    letter-spacing: 1px !important;
}

.ap-hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 20px !important;
    width: 100% !important;
}

/* 3. Botões (Empilhamento) */
.ap-btn-wrapper {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    margin-top: 20px !important; 
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important; 
}

.ap-btn-plans, 
.ap-btn-portfolio {
    display: flex !important;
    width: 100% !important;
    max-width: 280px !important; 
    height: 50px !important; 
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 auto !important;
}












/* --- SEÇÃO SETORES: NICHOS DE APPS (MOBILE) --- */
.ap-sectors-section {
    margin-top: 0 !important; 
    padding: 10rem 0 !important;
}

.ap-sectors-section .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.ap-sectors-header {
    width: 100% !important;
    margin-bottom: 40px !important;
    text-align: center !important;
}

.ap-sectors-title {
    font-size: 2.1rem !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* 3. Nuvem de Tags */
.ap-tags-cloud {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 10px !important;
}

.ap-tag {
    width: auto !important; 
    flex: 0 1 auto !important;
    display: inline-flex !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
    font-size: 0.7rem !important;
    border-radius: 50px !important;
    animation: none !important;
}












/* --- SEÇÃO PREÇOS: PLANOS DE APPS (MOBILE) --- */
.ap-pricing-section {
    padding: 37rem 0 !important; 
    margin-top: 17rem !important;
    background-color: #020b1e !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    position: relative !important;
}

.ap-pricing-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ap-pricing-title {
    font-size: 2.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    display: block !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
}

.ap-pricing-desc {
    text-align: center !important;
    margin: 15px auto 0 auto !important;
    width: 100% !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
}

.ap-pricing-title .ap-highlight {
    display: inline !important;
    white-space: normal !important;
}

/* 2. Switcher */
.ap-switcher-wrapper {
    margin-bottom: 40px !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ap-switcher {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important; 
    overflow: hidden !important;
    padding: 6px !important;
    gap: 4px !important;
}

.ap-switch-btn {
    width: 100% !important;
    border-radius: 12px !important;
    padding: 14px 10px !important;
    font-size: 0.75rem !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.ap-switch-btn.active {
    background: var(--primary-red) !important;
    box-shadow: 0 4px 12px rgba(255, 0, 64, 0.3) !important;
}

.ap-pricing-group.ap-active-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 25px !important;
    padding: 0 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ap-price-card {
    width: 100% !important; 
    max-width: 320px !important;
    padding: 30px 20px !important;
    box-sizing: border-box !important;
    transform: none !important;
}

.ap-price-card.ap-featured {
    transform: scale(1.01) !important; 
    z-index: 2;
}

.ap-price-card:hover,
.ap-price-card.ap-featured:hover {
    transform: translateY(-5px) !important;
}

.ap-price-value {
    font-size: 2.2rem !important;
}

.ap-plan-features li {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
}

.ap-btn-card {
    padding: 15px !important;
    font-size: 0.85rem !important;
}

.ap-popular-tag {
    white-space: nowrap !important; 
    display: block !important;
    width: fit-content !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: -12px !important;
    padding: 5px 15px !important;
    font-size: 0.65rem !important;
    text-align: center !important;
}













/* --- SEÇÃO MANUTENÇÃO: APPS (MOBILE) --- */
.ap-maintenance-section {
    display: block !important;
    width: 100% !important;
    background-color: #020b1e !important;
    background-image: none !important;
    padding-top: 20rem !important; 
    padding-bottom: 25rem !important;
    position: relative !important;
    z-index: 50 !important;
    clear: both !important;
    margin: 0 !important;
}

.ap-maint-wrapper {
    flex-direction: column !important;
    padding: 30px 20px !important;
    gap: 30px !important;
    border-left: none !important;
    border-top: 4px solid var(--primary-red) !important;
    text-align: center;
    background: rgba(255, 255, 255, 0.02) !important;
    margin: 0 15px !important;
}

.ap-maint-info {
    min-width: unset !important;
    width: 100% !important;
}

.ap-maint-title {
    font-size: 1.5rem !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.ap-maint-desc {
    font-size: 0.95rem !important;
    margin-bottom: 30px !important;
}

.ap-maint-features {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    text-align: left !important;
}

.ap-maint-features li {
    font-size: 0.8rem !important;
    line-height: 1.2;
}

.ap-maint-pricing {
    text-align: center !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 30px 0 0 0 !important;
    width: 100% !important;
}

.ap-maint-value {
    font-size: 2.2rem !important;
}











/* --- SEÇÃO PORTFÓLIO: APPS (MOBILE) --- */
.ap-sites-portfolio {
    padding: 5rem 0 !important;
    background: transparent !important;
}

.ap-sites-portfolio .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.ap-sites-header {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 50px auto !important;
    padding: 0 20px !important;
}

.ap-sites-title {
    font-size: 2rem !important;
    line-height: 1.2;
}

.ap-sites-desc {
    border-left: none !important;
    border-top: 3px solid var(--primary-red) !important;
    padding: 20px 0 0 0 !important;
    margin: 20px auto 0 auto !important;
    text-align: center !important;
    display: inline-block;
}

.ap-sites-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    width: 100% !important;
    padding: 0 20px !important;
}

.ap-sites-card {
    min-height: auto !important;
    width: 100% !important;
}

.ap-sites-card.ap-card-large {
    grid-column: auto !important;
}

.ap-sites-image {
    height: 250px !important;
}

.ap-sites-content {
    padding: 25px 20px !important;
    margin-top: -30px !important;
}










/* --- SEÇÃO FAQ: APLICATIVOS (MOBILE) --- */
    .ap-faq-section {
        padding: 47rem 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        scroll-margin-top: -50rem !important;
    }

    .ap-faq-section .ap-container {
        padding: 0 20px !important;
    }

    /* 1. Cabeçalho */
    .ap-section-header.ap-center-text {
        margin-bottom: 40px !important;
    }

    .ap-section-title {
        /* Permite quebra em celulares pequenos e garante centralização */
        white-space: normal !important; 
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    /* 2. Itens do FAQ (Acordeon) */
    .ap-faq-grid {
        gap: 15px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .ap-faq-summary {
        padding: 20px 15px !important; /* Mais respiro para o toque */
    }

    .ap-faq-q {
        font-size: 0.95rem !important;
        padding-right: 15px;
        line-height: 1.4;
        text-align: left;
    }

    .ap-faq-icon {
        font-size: 1rem !important;
    }

    /* 3. Resposta do FAQ */
    .ap-faq-answer {
        padding: 0 15px 20px 15px !important;
        font-size: 0.9rem !important;
        text-align: left;
    }

    /* 4. Rodapé do FAQ */
    .ap-faq-footer {
        margin-top: 40px !important;
        padding: 0 10px;
        text-align: center !important;
    }

    .ap-faq-footer p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .ap-specialist-link {
        display: inline-block;
        margin-top: 10px;
        font-size: 0.95rem;
    }









    /* --- SEÇÃO CONTATO: APLICATIVOS (MOBILE) --- */
    .ap-sites-contact-section {
        padding: 0 0 !important; 
        background: #010818 !important; /* Cor de base sólida */
        background: radial-gradient(circle at center, rgba(10, 20, 40, 1) 0%, #010818 100%) !important;
        height: auto !important;
        min-height: auto !important;
        margin-top: -3rem; /* Mantido conforme sua estrutura de camadas */
    }

    .ap-sites-contact-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        height: auto !important;
    }

    /* 1. Ajuste do Título e Canais */
    .ap-sites-contact-info {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .ap-sites-channel-item {
        display: flex !important;
        flex-direction: column !important; /* Ícone em cima do texto */
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* 2. Ajuste dos Links (Para não apertar o texto) */
    .ap-sites-channel-item a {
        font-size: 1.1rem !important;
        word-break: break-all; /* Evita que emails longos estourem a tela */
        line-height: 1.4;
        display: block;
    }

    .ap-sites-channel-item span {
        font-size: 0.8rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 5px;
    }

    .ap-sites-icon-box {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto !important;
    }

    .ap-sites-info-channels { 
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }

    /* 2. O FORMULÁRIO (CORREÇÃO DO CORTE) */
    .ap-sites-form-box {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 2rem 20px !important;
        margin: 0 auto !important;
        
        /* Fundo escuro reforçado para bloquear faíscas */
        background: rgba(10, 20, 40, 0.95) !important; 
        backdrop-filter: blur(10px); /* Efeito glassmorphism */
        
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-sizing: border-box !important;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    /* 3. Inputs e Grupos (Força Visibilidade) */
    .ap-sites-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .ap-sites-input-group {
        margin-bottom: 5px !important;
    }

    .ap-sites-form input, 
    .ap-sites-form select, 
    .ap-sites-form textarea {
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        font-size: 16px !important; /* Evita zoom automático no iOS */
    }

    .ap-sites-submit-btn {
        margin-top: 20px !important;
        margin-bottom: 10px !important;
    }







/* --- RODAPÉ: APLICATIVOS (MOBILE) --- */
    .ap-sites-footer {
        padding: 26rem 0 0 0 !important; 
        margin-top: 40rem !important;   
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background-color: #000000 !important;
        text-align: center;
        z-index: 100;
        display: block !important;
    }

    /* Ajuste do Grid para centralização total */
    .ap-sites-footer-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important;
        gap: 40px !important;
        padding-bottom: 50px !important;
        width: 100% !important;
    }

    /* 1. Marca e Status */
    .ap-sites-footer-brand { 
        order: 1; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .ap-sites-footer-logo { font-size: 1.8rem !important; margin-bottom: 10px; }
    
    .ap-sites-footer-brand p {
        margin: 0 auto !important;
        text-align: center !important;
    }

    .ap-sites-system-status {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        padding: 8px 15px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        width: fit-content !important;
        margin: 25px auto 0 auto !important; 
        
        font-family: 'Courier New', Courier, monospace !important; 
    }

    .ap-sites-status-dot {
        width: 8px !important;
        height: 8px !important;
        background-color: #00ff88 !important;
        border-radius: 50% !important;
        box-shadow: 0 0 10px #00ff88 !important;
        animation: apSitesPulse 2s infinite !important; 
    }

    .ap-sites-status-text {
        color: #00ff88 !important;
        font-weight: 700 !important;
        font-family: 'Courier New', Courier, monospace !important; 
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }

    /* 2. Navegação Centralizada */
    .ap-sites-footer-links:nth-of-type(2) { 
        order: 2; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 3. Legal & Redes Sociais */
    .ap-sites-footer-links:nth-of-type(3) { 
        order: 3; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .ap-sites-footer-links ul {
        padding: 0 !important; 
        margin: 0 auto !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .ap-sites-social-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    /* 5. Barra de Copyright */
    .ap-sites-copyright-bar {
        background-color: #000 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 30px 15px !important;
        width: 100% !important;
        position: relative !important;
        clear: both !important;
        margin-top: 20rem; 
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .ap-sites-copyright-bar p {
        font-size: 0.65rem !important;
        opacity: 0.5;
        line-height: 1.6;
        text-align: center !important;
        margin: 0 auto !important;
    }







    /* --- BOTÃO WHATSAPP: APLICATIVOS (MOBILE) --- */
    .ap-sites-whatsapp-link {
        bottom: 20px !important;
        right: 20px !important;
        width: 55px !important;
        height: 55px !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ap-sites-whatsapp-link i {
        font-size: 28px !important;
    }

    .ap-sites-status-tooltip {
        display: none !important; 
    }

    /* Animação com prefixo ap */
    @keyframes apSitesPulseWave {
        0% { transform: scale(1); opacity: 0.6; }
        100% { transform: scale(1.4); opacity: 0; }
    }

    .ap-sites-whatsapp-link::after {
        animation: apSitesPulseWave 2s infinite !important;
    }










/* ======================================================
   PÁGINA: SISTEMAS (MOBILE) - PREFIXO "sis-"
   ====================================================== */


/* --- HEADER: SISTEMAS --- */
   .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }




    /* --- LOGO E IDENTIDADE (MOBILE) --- */
    header.header {
        width: 95% !important; 
        top: 10px !important;
        padding: 5px 0 !important;
        overflow: visible !important; 
    }

    header.header .container {
        padding: 0 20px !important;
        height: 60px !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Logo e Texto */
    .logo-text {
        font-size: 16px !important; /* Ajustado para não empurrar o hambúrguer */
        white-space: nowrap !important;
    }
    
    .logo-img {
        height: 35px !important;
    }

    /* Esconde o botão grande no mobile */
    .cta-container .btn-primary {
        display: none !important; 
    }

    /* O Hambúrguer (Usando o ID que você definiu) */
    #ap-hamburger {
        display: block !important; 
        z-index: 1000001 !important;
        cursor: pointer !important;
        color: #fff !important;
        font-size: 1.5rem !important;
    }

    /* --- NAVBAR GAVETA (MOBILE) --- */
    .navbar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: -110% !important; 
        left: auto !important;
        width: 280px !important;
        height: 100vh !important;
        background: rgba(15, 23, 36, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-left: 1px solid rgba(255, 0, 64, 0.3) !important;
        padding: 100px 20px 40px 20px !important;
        z-index: 1000000 !important;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-sizing: border-box !important; 
    }

    .navbar.active {
        right: 0 !important;
    }

    /* --- LINKS E DROPDOWN --- */
    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        gap: 25px !important;
        padding: 0 !important;
    }

    .nav-links li {
        width: 100% !important;
        text-align: center !important;
    }

    .nav-links a {
        font-size: 1.2rem !important;
        color: #fff !important;
    }

    /* Dropdown Aberto no Mobile */
    .dropdown-menu {
        display: block !important; /* Força ficar aberto no menu lateral */
        position: static !important;
        background: rgba(255, 255, 255, 0.05) !important;
        margin-top: 10px !important;
        border-left: 2px solid #ff0040 !important;
        padding-left: 15px !important;
    }

    .dropdown-menu li a {
        font-size: 0.9rem !important;
        opacity: 0.8;
    }






/* --- HERO SISTEMAS --- */
    .sis-hero-section {
    padding: 20rem 0 60px 0 !important; 
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100% !important;
    overflow: visible !important;
}

.sis-hero-glow {
    width: 100%;
    height: 60%;
    opacity: 0.6;
}

/* 1. Título e Texto */
.sis-title {
    font-size: 2.2rem !important;
    line-height: 1.2;
    margin-bottom: 20px;
    padding: 0 10px;
}

.sis-title br {
    display: none;
}

.sis-highlight {
    display: inline !important;
    text-shadow: 0 0 30px rgba(255, 0, 64, 0.6);
}

.sis-description {
    font-size: 1rem !important;
    line-height: 1.5;
    padding: 0 15px;
    margin-bottom: 35px !important;
}

/* 2. Badge Superior */
.sis-badge {
    font-size: 0.7rem !important;
    padding: 8px 18px !important;
    letter-spacing: 1px !important;
}

.sis-hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 20px !important;
    width: 100% !important;
    z-index: 999 !important;
}

/* 3. Botões (Empilhamento) */
.sis-btn-wrapper {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    margin-top: 20px !important; 
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important; 
}

.sis-btn-plans, 
.sis-btn-portfolio {
    display: flex !important;
    width: 100% !important;
    max-width: 280px !important; 
    height: 50px !important; 
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 auto !important;
}









/* --- SEÇÃO SETORES: NICHOS DE SISTEMAS (MOBILE) --- */
.sis-sectors-section {
    margin-top: 0 !important; 
    padding: 12rem 0 !important;
}

.sis-sectors-section .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.sis-sectors-header {
    width: 100% !important;
    margin-bottom: 40px !important;
    text-align: center !important;
}

.sis-sectors-title {
    font-size: 2.1rem !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* 3. Nuvem de Tags */
.sis-tags-cloud {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 10px !important;
}

.sis-tag {
    width: auto !important; 
    flex: 0 1 auto !important;
    display: inline-flex !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
    font-size: 0.7rem !important;
    border-radius: 50px !important;
    animation: none !important;
}






/* --- SEÇÃO PREÇOS: PLANOS DE SISTEMAS (MOBILE) --- */
.sis-pricing-section {
    padding: 52rem 0 !important; 
    margin-top: 15rem !important;
    background-color: #020b1e !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    position: relative !important;
}

.sis-pricing-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.sis-pricing-title {
    font-size: 2.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    display: block !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
}

.sis-pricing-desc {
    text-align: center !important;
    margin: 15px auto 0 auto !important;
    width: 100% !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
}

.sis-pricing-title .sis-highlight {
    display: inline !important;
    white-space: normal !important;
}

/* 2. Switcher */
.sis-switcher-wrapper {
    margin-bottom: 40px !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sis-switcher {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important; 
    overflow: hidden !important;
    padding: 6px !important;
    gap: 4px !important;
}

.sis-switch-btn {
    width: 100% !important;
    border-radius: 12px !important;
    padding: 14px 10px !important;
    font-size: 0.75rem !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.sis-switch-btn.active {
    background: var(--primary-red) !important;
    box-shadow: 0 4px 12px rgba(255, 0, 64, 0.3) !important;
}

.sis-pricing-group.sis-active-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 25px !important;
    padding: 0 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sis-price-card {
    width: 100% !important; 
    max-width: 320px !important;
    padding: 30px 20px !important;
    box-sizing: border-box !important;
    transform: none !important;
}

.sis-price-card.sis-featured {
    transform: scale(1.01) !important; 
    z-index: 2;
}

.sis-price-card:hover,
.sis-price-card.sis-featured:hover {
    transform: translateY(-5px) !important;
}

.sis-price-value {
    font-size: 2.2rem !important;
}

.sis-plan-features li {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
}

.sis-btn-card {
    padding: 15px !important;
    font-size: 0.85rem !important;
}

.sis-popular-tag {
    white-space: nowrap !important; 
    display: block !important;
    width: fit-content !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: -12px !important;
    padding: 5px 15px !important;
    font-size: 0.65rem !important;
    text-align: center !important;
}






/* --- SEÇÃO MANUTENÇÃO: SISTEMAS (MOBILE) --- */
.sis-maintenance-section {
    display: block !important;
    width: 100% !important;
    background-color: #020b1e !important;
    background-image: none !important;
    padding-top: 20rem !important; /* Ajustado de 20rem para px para melhor controle */
    padding-bottom: 20rem !important;
    position: relative !important;
    z-index: 50 !important;
    clear: both !important;
    margin: 0 !important;
}

.sis-maint-wrapper {
    flex-direction: column !important;
    padding: 30px 20px !important;
    gap: 30px !important;
    border-left: none !important;
    border-top: 4px solid var(--primary-red) !important;
    text-align: center;
    background: rgba(255, 255, 255, 0.02) !important;
    margin: 0 15px !important;
}

.sis-maint-info {
    min-width: unset !important;
    width: 100% !important;
}

.sis-maint-title {
    font-size: 1.5rem !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.sis-maint-desc {
    font-size: 0.95rem !important;
    margin-bottom: 30px !important;
}

.sis-maint-features {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    text-align: left !important;
}

.sis-maint-features li {
    font-size: 0.8rem !important;
    line-height: 1.2;
}

.sis-maint-pricing {
    text-align: center !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 30px 0 0 0 !important;
    width: 100% !important;
}

.sis-maint-value {
    font-size: 2.2rem !important;
}









/* --- SEÇÃO PORTFÓLIO: SISTEMAS (MOBILE) --- */
.sis-sites-portfolio {
    padding: 5rem 0 !important;
    background: transparent !important;
}

.sis-sites-portfolio .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.sis-sites-header {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 50px auto !important;
    padding: 0 20px !important;
}

.sis-sites-title {
    font-size: 2rem !important;
    line-height: 1.2;
}

.sis-sites-desc {
    border-left: none !important;
    border-top: 3px solid var(--primary-red) !important;
    padding: 20px 0 0 0 !important;
    margin: 20px auto 0 auto !important;
    text-align: center !important;
    display: inline-block;
}

.sis-sites-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    width: 100% !important;
    padding: 0 20px !important;
}

.sis-sites-card {
    min-height: auto !important;
    width: 100% !important;
}

.sis-sites-card.sis-card-large {
    grid-column: auto !important;
}

.sis-sites-image {
    height: 250px !important;
}

.sis-sites-content {
    padding: 25px 20px !important;
    margin-top: -30px !important;
}







/* --- SEÇÃO FAQ: SISTEMAS (MOBILE) --- */
.sis-faq-section {
    padding: 48rem 0 !important; /* Ajustado de 47rem para px para evitar buracos no mobile */
    background: transparent !important;
    background-color: transparent !important;
    scroll-margin-top: -50rem !important;
}

.sis-faq-section .sis-container {
    padding: 0 20px !important;
}

.sis-section-header.sis-center-text {
    margin-bottom: 40px !important;
}

.sis-section-title {
    white-space: normal !important; 
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.sis-faq-grid {
    gap: 15px !important;
    display: flex !important;
    flex-direction: column !important;
}

.sis-faq-summary {
    padding: 20px 15px !important;
}

.sis-faq-q {
    font-size: 0.95rem !important;
    padding-right: 15px;
    line-height: 1.4;
    text-align: left;
}

.sis-faq-icon {
    font-size: 1rem !important;
}

.sis-faq-answer {
    padding: 0 15px 20px 15px !important;
    font-size: 0.9rem !important;
    text-align: left;
}

.sis-faq-footer {
    margin-top: 40px !important;
    padding: 0 10px;
    text-align: center !important;
}

.sis-faq-footer p {
    font-size: 1rem;
    line-height: 1.6;
}

.sis-specialist-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.95rem;
}











 /* CONTATO SISTEMAS */
.sis-sites-contact-section {
        padding: 0 0 !important; 
        background: #010818 !important; /* Cor de base sólida */
        background: radial-gradient(circle at center, rgba(10, 20, 40, 1) 0%, #010818 100%) !important;
        height: auto !important;
        min-height: auto !important;
        margin-top: -3rem; /* Mantido conforme sua estrutura de camadas */
    }

    .sis-sites-contact-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        height: auto !important;
    }

    /* 1. Ajuste do Título e Canais */
    .sis-sites-contact-info {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .sis-sites-channel-item {
        display: flex !important;
        flex-direction: column !important; /* Ícone em cima do texto */
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* 2. Ajuste dos Links (Para não apertar o texto) */
    .sis-sites-channel-item a {
        font-size: 1.1rem !important;
        word-break: break-all; /* Evita que emails longos estourem a tela */
        line-height: 1.4;
        display: block;
    }

    .sis-sites-channel-item span {
        font-size: 0.8rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 5px;
    }

    .sis-sites-icon-box {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto !important;
    }

    .sis-sites-info-channels { 
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }

    /* 2. O FORMULÁRIO (CORREÇÃO DO CORTE) */
    .sis-sites-form-box {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 2rem 20px !important;
        margin: 0 auto !important;
        
        /* Fundo escuro reforçado para bloquear faíscas */
        background: rgba(10, 20, 40, 0.95) !important; 
        backdrop-filter: blur(10px); /* Efeito glassmorphism */
        
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-sizing: border-box !important;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    /* 3. Inputs e Grupos (Força Visibilidade) */
    .sis-sites-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .sis-sites-input-group {
        margin-bottom: 5px !important;
    }

    .sis-sites-form input, 
    .sis-sites-form select, 
    .sis-sites-form textarea {
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        font-size: 16px !important; /* Evita zoom automático no iOS */
    }

    .sis-sites-submit-btn {
        margin-top: 20px !important;
        margin-bottom: 10px !important;
    }









 /* FOOTER SISTEMAS */
    .sis-sites-footer {
        padding: 26rem 0 0 0 !important; 
        margin-top: 40rem !important;   
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background-color: #000000 !important;
        text-align: center;
        z-index: 100;
        display: block !important;
    }

    /* Ajuste do Grid para centralização total */
    .sis-sites-footer-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important;
        gap: 40px !important;
        padding-bottom: 50px !important;
        width: 100% !important;
    }

    /* 1. Marca e Status */
    .sis-sites-footer-brand { 
        order: 1; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .sis-sites-footer-logo { font-size: 1.8rem !important; margin-bottom: 10px; }
    
    .sis-sites-footer-brand p {
        margin: 0 auto !important;
        text-align: center !important;
    }

    .sis-sites-system-status {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        padding: 8px 15px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        width: fit-content !important;
        margin: 25px auto 0 auto !important; 
        
        font-family: 'Courier New', Courier, monospace !important; 
    }

    .sis-sites-status-dot {
        width: 8px !important;
        height: 8px !important;
        background-color: #00ff88 !important;
        border-radius: 50% !important;
        box-shadow: 0 0 10px #00ff88 !important;
        animation: sisSitesPulse 2s infinite !important; 
    }

    .sis-sites-status-text {
        color: #00ff88 !important;
        font-weight: 700 !important;
        font-family: 'Courier New', Courier, monospace !important; 
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }

    /* 2. Navegação Centralizada */
    .sis-sites-footer-links:nth-of-type(2) { 
        order: 2; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 3. Legal & Redes Sociais */
    .sis-sites-footer-links:nth-of-type(3) { 
        order: 3; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .sis-sites-footer-links ul {
        padding: 0 !important; 
        margin: 0 auto !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .sis-sites-social-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    /* 5. Barra de Copyright */
    .sis-sites-copyright-bar {
        background-color: #000 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 30px 15px !important;
        width: 100% !important;
        position: relative !important;
        clear: both !important;
        margin-top: 20rem; 
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .sis-sites-copyright-bar p {
        font-size: 0.65rem !important;
        opacity: 0.5;
        line-height: 1.6;
        text-align: center !important;
        margin: 0 auto !important;
    }








    /* WPP SISTEMAS */
.sis-sites-whatsapp-link {
        bottom: 20px !important;
        right: 20px !important;
        width: 55px !important; /* Tamanho otimizado para não obstruir o conteúdo */
        height: 55px !important;
        z-index: 9999 !important; /* Garante que fique acima de todas as seções */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
    }

    .sis-sites-whatsapp-link i {
        font-size: 28px !important; /* Ícone proporcional ao botão */
    }

    /* Oculta o tooltip no mobile para evitar poluição visual */
    .sis-sites-status-tooltip {
        display: none !important; 
    }

    /* Animação com prefixo sis para consistência de engenharia */
    @keyframes sisSitesPulseWave {
        0% { 
            transform: scale(1); 
            opacity: 0.6; 
        }
        100% { 
            transform: scale(1.4); 
            opacity: 0; 
        }
    }

    .sis-sites-whatsapp-link::after {
        content: '' !important;
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        background-color: #25d366 !important; /* Cor padrão do WhatsApp */
        border-radius: 50% !important;
        z-index: -1 !important;
        animation: sisSitesPulseWave 2s infinite !important;
    }






    /* ======================================================
   PÁGINA: CHATBOTS (MOBILE) - PREFIXO "sis-"
   ====================================================== */


/* --- HEADER: CHATBOTS --- */
   .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }




    /* --- LOGO E IDENTIDADE (MOBILE) --- */
    header.header {
        width: 95% !important; 
        top: 10px !important;
        padding: 5px 0 !important;
        overflow: visible !important; 
    }

    header.header .container {
        padding: 0 20px !important;
        height: 60px !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Logo e Texto */
    .logo-text {
        font-size: 16px !important; /* Ajustado para não empurrar o hambúrguer */
        white-space: nowrap !important;
    }
    
    .logo-img {
        height: 35px !important;
    }

    /* Esconde o botão grande no mobile */
    .cta-container .btn-primary {
        display: none !important; 
    }

    /* O Hambúrguer (Usando o ID que você definiu) */
    #ap-hamburger {
        display: block !important; 
        z-index: 1000001 !important;
        cursor: pointer !important;
        color: #fff !important;
        font-size: 1.5rem !important;
    }

    /* --- NAVBAR GAVETA (MOBILE) --- */
    .navbar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: -110% !important; 
        left: auto !important;
        width: 280px !important;
        height: 100vh !important;
        background: rgba(15, 23, 36, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-left: 1px solid rgba(255, 0, 64, 0.3) !important;
        padding: 100px 20px 40px 20px !important;
        z-index: 1000000 !important;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-sizing: border-box !important; 
    }

    .navbar.active {
        right: 0 !important;
    }

    /* --- LINKS E DROPDOWN --- */
    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        gap: 25px !important;
        padding: 0 !important;
    }

    .nav-links li {
        width: 100% !important;
        text-align: center !important;
    }

    .nav-links a {
        font-size: 1.2rem !important;
        color: #fff !important;
    }

    /* Dropdown Aberto no Mobile */
    .dropdown-menu {
        display: block !important; /* Força ficar aberto no menu lateral */
        position: static !important;
        background: rgba(255, 255, 255, 0.05) !important;
        margin-top: 10px !important;
        border-left: 2px solid #ff0040 !important;
        padding-left: 15px !important;
    }

    .dropdown-menu li a {
        font-size: 0.9rem !important;
        opacity: 0.8;
    }





    /* --- HERO SECTION: CHATBOTS --- */
.ch-hero-section {
    padding: 20rem 0 60px 0 !important; 
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100% !important;
    overflow: visible !important;
}

.ch-hero-glow {
    width: 100%;
    height: 60%;
    opacity: 0.6;
}

/* 1. Título e Texto */
.ch-title {
    font-size: 2.2rem !important;
    line-height: 1.2;
    margin-bottom: 20px;
    padding: 0 10px;
}

.ch-title br {
    display: none;
}

.ch-highlight {
    display: inline !important;
    text-shadow: 0 0 30px rgba(255, 0, 64, 0.6);
}

.ch-description {
    font-size: 1rem !important;
    line-height: 1.5;
    padding: 0 15px;
    margin-bottom: 35px !important;
}

/* 2. Badge Superior */
.ch-badge {
    font-size: 0.7rem !important;
    padding: 8px 18px !important;
    letter-spacing: 1px !important;
}

.ch-hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 20px !important;
    width: 100% !important;
}

/* 3. Botões (Empilhamento) */
.ch-btn-wrapper {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    margin-top: 20px !important; 
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important; 
}

.ch-btn-plans, 
.ch-btn-portfolio {
    display: flex !important;
    width: 100% !important;
    max-width: 280px !important; 
    height: 50px !important; 
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 auto !important;
}













/* --- SEÇÃO PREÇOS: PLANOS CHATBOTS (MOBILE) --- */
.ch-pricing-section {
    padding: 30rem 0 !important; 
    margin-top: 12rem !important;
    background-color: #020b1e !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    position: relative !important;
}

.ch-pricing-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ch-pricing-title {
    font-size: 2.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    display: block !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
}

.ch-pricing-desc {
    text-align: center !important;
    margin: 15px auto 0 auto !important;
    width: 100% !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
}

/* 2. Switcher de Chatbots */
.ch-switcher-wrapper {
    margin-bottom: 40px !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ch-switcher {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important; 
    overflow: hidden !important;
    padding: 6px !important;
    gap: 4px !important;
}

.ch-switch-btn {
    width: 100% !important;
    border-radius: 12px !important;
    padding: 14px 10px !important;
    font-size: 0.75rem !important;
    border: none !important;
}

.ch-switch-btn.active {
    background: var(--primary-red) !important;
    box-shadow: 0 4px 12px rgba(255, 0, 64, 0.3) !important;
}

.ch-pricing-group.ch-active-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 25px !important;
    padding: 0 15px !important;
    width: 100% !important;
}

.ch-price-card {
    width: 100% !important; 
    max-width: 320px !important;
    padding: 30px 20px !important;
    box-sizing: border-box !important;
}







/* --- SEÇÃO MANUTENÇÃO: IA (MOBILE) --- */
.ch-maintenance-section {
    display: block !important;
    width: 100% !important;
    background-color: #020b1e !important;
    background-image: none !important;
    padding-top: 18rem !important; 
    padding-bottom: 20rem !important;
    position: relative !important;
    z-index: 50 !important;
    clear: both !important;
    margin: 0 !important;
}

.ch-maint-wrapper {
    flex-direction: column !important;
    padding: 30px 20px !important;
    gap: 30px !important;
    border-left: none !important;
    border-top: 4px solid var(--primary-red) !important;
    text-align: center;
    background: rgba(255, 255, 255, 0.02) !important;
    margin: 0 15px !important;
}

.ch-maint-info {
    min-width: unset !important;
    width: 100% !important;
}

.ch-maint-title {
    font-size: 1.5rem !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.ch-maint-desc {
    font-size: 0.95rem !important;
    margin-bottom: 30px !important;
}

.ch-maint-features {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    text-align: left !important;
}

.ch-maint-features li {
    font-size: 0.8rem !important;
    line-height: 1.2;
}

.ch-maint-pricing {
    text-align: center !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 30px 0 0 0 !important;
    width: 100% !important;
}

.ch-maint-value {
    font-size: 2.2rem !important;
}










/* --- SEÇÃO PORTFÓLIO: CHATBOTS & IA (MOBILE) --- */
.ch-sites-portfolio {
    padding: 5rem 0 !important;
    background: transparent !important;
}

.ch-sites-portfolio .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.ch-sites-header {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 50px auto !important;
    padding: 0 20px !important;
}

.ch-sites-title {
    font-size: 2rem !important;
    line-height: 1.2;
}

.ch-sites-desc {
    border-left: none !important;
    border-top: 3px solid var(--primary-red) !important;
    padding: 20px 0 0 0 !important;
    margin: 20px auto 0 auto !important;
    text-align: center !important;
    display: inline-block;
}

/* 2. Grid de Cases IA (Verticalizado) */
.ch-sites-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    width: 100% !important;
    padding: 0 20px !important;
}

.ch-sites-card {
    min-height: auto !important;
    width: 100% !important;
}

.ch-sites-card.ch-card-large {
    grid-column: auto !important;
}

.ch-sites-image {
    height: 250px !important;
    border-radius: 15px 15px 0 0 !important;
}

.ch-sites-content {
    padding: 25px 20px !important;
    margin-top: -30px !important;
    background: rgba(15, 23, 36, 0.95) !important;
    border-radius: 0 0 15px 15px !important;
}





/* --- SEÇÃO FAQ: CHATBOTS (MOBILE) --- */
.ch-faq-section {
    padding: 48rem 0 !important; 
    background: transparent !important;
    background-color: transparent !important;
    scroll-margin-top: -50rem !important;
}

.ch-faq-section .ch-container {
    padding: 0 20px !important;
}

.ch-section-header.ch-center-text {
    margin-bottom: 40px !important;
}

.ch-section-title {
    white-space: normal !important; 
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.ch-faq-grid {
    gap: 15px !important;
    display: flex !important;
    flex-direction: column !important;
}

.ch-faq-summary {
    padding: 20px 15px !important;
}

.ch-faq-q {
    font-size: 0.95rem !important;
    padding-right: 15px;
    line-height: 1.4;
    text-align: left;
}

.ch-faq-icon {
    font-size: 1rem !important;
}

.ch-faq-answer {
    padding: 0 15px 20px 15px !important;
    font-size: 0.9rem !important;
    text-align: left;
}

.ch-faq-footer {
    margin-top: 40px !important;
    padding: 0 10px;
    text-align: center !important;
}

.ch-faq-footer p {
    font-size: 1rem;
    line-height: 1.6;
}

.ch-specialist-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.95rem;
}








/* --- SEÇÃO CONTATO: CHATBOTS (MOBILE) --- */
.ch-sites-contact-section {
    padding: 0 0 !important; 
    background: #010818 !important; 
    background: radial-gradient(circle at center, rgba(10, 20, 40, 1) 0%, #010818 100%) !important;
    height: auto !important;
    min-height: auto !important;
    margin-top: -3rem; 
}

.ch-sites-contact-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    height: auto !important;
}

.ch-sites-contact-info {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.ch-sites-channel-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}

.ch-sites-channel-item a {
    font-size: 1.1rem !important;
    word-break: break-all;
    line-height: 1.4;
    display: block;
}

.ch-sites-channel-item span {
    font-size: 0.8rem !important;
    letter-spacing: 2px !important;
    margin-bottom: 5px;
}

.ch-sites-icon-box {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto !important;
}

.ch-sites-info-channels { 
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}

.ch-sites-form-box {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 2rem 20px !important;
    margin: 0 auto !important;
    background: rgba(10, 20, 40, 0.95) !important; 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.ch-sites-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.ch-sites-input-group {
    margin-bottom: 5px !important;
}

.ch-sites-form input, 
.ch-sites-form select, 
.ch-sites-form textarea {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-size: 16px !important;
}

.ch-sites-submit-btn {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}





/* --- RODAPÉ: CHATBOTS (MOBILE) --- */
    .ch-sites-footer {
        padding: 26rem 0 0 0 !important; 
        margin-top: 40rem !important;   
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background-color: #000000 !important;
        text-align: center;
        z-index: 100;
        display: block !important;
    }

    /* Ajuste do Grid para centralização total */
    .ch-sites-footer-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important;
        gap: 40px !important;
        padding-bottom: 50px !important;
        width: 100% !important;
    }

    /* 1. Marca e Status */
    .ch-sites-footer-brand { 
        order: 1; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .ch-sites-footer-logo { font-size: 1.8rem !important; margin-bottom: 10px; }
    
    .ch-sites-footer-brand p {
        margin: 0 auto !important;
        text-align: center !important;
    }

    .ch-sites-system-status {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        padding: 8px 15px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        width: fit-content !important;
        margin: 25px auto 0 auto !important; 
        
        font-family: 'Courier New', Courier, monospace !important; 
    }

    .ch-sites-status-dot {
        width: 8px !important;
        height: 8px !important;
        background-color: #00ff88 !important;
        border-radius: 50% !important;
        box-shadow: 0 0 10px #00ff88 !important;
        animation: chSitesPulse 2s infinite !important; 
    }

    .ch-sites-status-text {
        color: #00ff88 !important;
        font-weight: 700 !important;
        font-family: 'Courier New', Courier, monospace !important; 
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }

    /* 2. Navegação Centralizada */
    .ch-sites-footer-links:nth-of-type(2) { 
        order: 2; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 3. Legal & Redes Sociais */
    .ch-sites-footer-links:nth-of-type(3) { 
        order: 3; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .ch-sites-footer-links ul {
        padding: 0 !important; 
        margin: 0 auto !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .ch-sites-social-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    /* 5. Barra de Copyright */
    .ch-sites-copyright-bar {
        background-color: #000 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 30px 15px !important;
        width: 100% !important;
        position: relative !important;
        clear: both !important;
        margin-top: 20rem; 
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .ch-sites-copyright-bar p {
        font-size: 0.65rem !important;
        opacity: 0.5;
        line-height: 1.6;
        text-align: center !important;
        margin: 0 auto !important;
    }





/* --- BOTÃO WHATSAPP: CHATBOTS (MOBILE) --- */
    .ch-sites-whatsapp-link {
        bottom: 20px !important;
        right: 20px !important;
        width: 55px !important; /* Tamanho otimizado para não obstruir o conteúdo */
        height: 55px !important;
        z-index: 9999 !important; /* Garante que fique acima de todas as seções */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
    }

    .ch-sites-whatsapp-link i {
        font-size: 28px !important; /* Ícone proporcional ao botão */
    }

    /* Oculta o tooltip no mobile para evitar poluição visual */
    .ch-sites-status-tooltip {
        display: none !important; 
    }

    /* Animação com prefixo ch para consistência de engenharia */
    @keyframes chSitesPulseWave {
        0% { 
            transform: scale(1); 
            opacity: 0.6; 
        }
        100% { 
            transform: scale(1.4); 
            opacity: 0; 
        }
    }

    .ch-sites-whatsapp-link::after {
        content: '' !important;
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        background-color: #25d366 !important; /* Cor padrão do WhatsApp */
        border-radius: 50% !important;
        z-index: -1 !important;
        animation: chSitesPulseWave 2s infinite !important;
    }





    

}