/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-o


/* ==========================================================================
   Nível 1: Variáveis Globais e Estilos Base - LARGURA PADRONIZADA
   ========================================================================== */


@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cor-primaria: #2C2D3A; /* ALTERADO */
    --cor-texto-corpo: #4A5568;
    --cor-texto-cabecalho: #2C2D3A;
    --cor-icone-claro: #CBD5E0;
    --cor-branco: #FFFFFF;
    --cor-sombra: rgba(0, 0, 0, 0.08);
    --cor-fundo-pagina: #f8f9fa;
    --cor-urgencia: #FF8C00; /* Laranja mais suave para urgência */
    --cor-primaria-rgb-r: 44;  /* ALTERADO */
    --cor-primaria-rgb-g: 45;  /* ALTERADO */
    --cor-primaria-rgb-b: 58;  /* ALTERADO */
    --fonte-principal: "Inter", sans-serif;
    /* Esta é a cor verde/ciano que encontrei no seu CSS */
    --cor-verde-destaque: #0EDCCE; 
    --cor-fundo-claro: #F8F8F8; /* Cor de fundo da seção */
    --cor-cinza-texto: #545B6C; /* Cor do texto da descrição */
    --cor-borda-logo: #E8EBF2; /* Cor da borda dos itens de logo */
    --cor-sombra-logo: rgba(0, 0, 0, 0.05); /* Sombra suave */
    /* Cores do novo layout */
    --cor-fundo-dark: #000000;
    --cor-brilho-magenta: #c700ff; /* Cor estimada da imagem */
    --cor-grid-dark: rgba(255, 255, 255, 0.05); /* Cor da grade */
}

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

html{
    scroll-behavior: smooth; /* Garante que a rolagem seja suave */
}

body {
    font-family: "Inter", sans-serif !important;
    background-color: var(--cor-branco);
    color: var(--cor-texto-corpo);
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover,
a:active,
a:focus{
    text-decoration: none !important;
    color: inherit !important;
}

ul {
    list-style: none;
}

.div-hr{
    display: flex;
    justify-content: center;
    padding-bottom: 40px;
}

p{
    font-size: 1.1rem !important;
}

h2{
    font-size: 2.5rem !important;
}

h3, h4, h5{
    font-size: 1.5rem !important;
}

button{
     font-size: 1.1rem !important;
}

.hr{
    width: 90%;
    height: 2px;
    background-color: #2C2D3A;
}

/* --- ESTILOS DO MENU MOBILE --- */
/* --- ESTILOS DO MENU MOBILE (COM CORREÇÃO DE ESPECIFICIDADE) --- */

/* Esconde o botão hambúrguer no desktop */
nav.nav .nav-toggle {
display: none !important;
}

/* Garante que o menu e botões do desktop estão visíveis */
nav.nav .nav-menu,
nav.nav .nav-buttons {
display: flex !important;
}

/* Adiciona este estilo ao teu ficheiro CSS */

/* Adiciona este estilo ao teu ficheiro CSS */

.nav-link.active,
.nav-mobile-link.active {
    color: #0EDCCE !important;
    font-weight: bold; /* Sugestão para dar mais destaque */
}

.nav-link:focus,
.nav-mobile-link:focus {
    color: #0EDCCE !important;
    font-weight: bold; /* Sugestão para dar mais destaque */
}


/* Estilo dos botões de abrir e fechar */
.nav-toggle,
.nav-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--cor-texto-cabecalho);
    cursor: pointer;
}

/* Painel do menu mobile (começa fora da tela) */
.nav-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Começa escondido */
    width: 100%;
    max-width: 320px; /* Largura máxima do menu */
    height: 100%;
    background-color: var(--cor-branco);
    z-index: 1050;
    padding: 2rem;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.4s ease-in-out;
}

/* Classe que o JavaScript adiciona para mostrar o menu */
.nav-mobile-menu.show-menu {
    right: 0; /* Posição final visível */
}

.nav-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.nav-mobile-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.nav-mobile-link {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cor-texto-cabecalho);
    text-decoration: none;
}

.logo-go-header{
    max-width: 60px;
}

/* ==========================================================================
   Responsividade (CSS ATUALIZADO E COMPLETO)
   ========================================================================== */

/* Para telas menores que 1200px (Laptops pequenos) */
@media (max-width: 1200px) {
    .hero-section.container {
        padding: 0 2rem;
    }

    .products-container {
        padding: 3rem 2rem;
    }
}

/* Para telas menores que 992px (Tablets) */
@media (max-width: 992px) {
    /* --- Ajustes Gerais --- */
    .section-title h2 {
        font-size: 2.2rem;
    }

  /* --- Cabeçalho e Menu Mobile (CORREÇÃO v2: Forçar Cor) --- */
    
/* Força o menu desktop e os botões a desaparecerem */
nav.nav .nav-menu,
nav.nav .nav-buttons {
display: none !important;
}

/* Força o botão hambúrguer a APARECER e a ser BRANCO */
nav.nav .nav-toggle {
display: block !important;
color: var(--cor-branco) !important; /* FORÇA A COR BRANCA */
font-size: 1.8rem; /* Aumentei um pouco para garantir */
background: transparent; /* Garante que não tem fundo */
border: none; /* Garante que não tem borda */
}
    
/* Garante que o ícone DENTRO do botão também seja visível */
nav.nav .nav-toggle i {
display: inline-block !important; /* Garante que o ícone não está escondido */
color: inherit !important; /* Herda a cor branca do botão */
}

    /* --- Seção de Produtos --- */
    .products-grid {
        /* Mostra 2 produtos por linha em vez de 4 */
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem 0;
    }

    .product-card {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* --- Depoimentos --- */
    .swiper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .logo-container {
        /* Move o logo para cima do card em vez de na lateral */
        left: 50%;
        top: -20% !important;
        transform: translateX(-50%);
    }

    .testimonial-card {
        padding-top: 50px; /* Adiciona espaço para o logo que agora está acima */
        padding-left: 25px;
        text-align: center;
    }

    /* --- Seção Time --- */
    .team-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .team-content {
        order: 2;
        text-align: center;
    }

    .team-image-wrapper {
        order: 1;
    }

    /* --- Rodapé --- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .footer-column,
    .footer-links,
    .footer-contact {
        border: none;
        padding: 0;
    }

    .footer-links {
        justify-content: center;
        gap: 2rem;
    }

    .footer-socials {
        justify-content: center;
    }

 
}


/* Para telas menores que 768px (Celulares grandes) */
@media (max-width: 768px) {
    /* --- Ajustes Gerais --- */
    body {
        font-size: 90%; /* Reduz o tamanho base da fonte */
    }

    /* Força o menu desktop e os botões a desaparecerem */
nav.nav .nav-menu,
nav.nav .nav-buttons {
display: none !important;
}

/* Força o botão hambúrguer a APARECER e a ser BRANCO */
nav.nav .nav-toggle {
display: block !important;
color: var(--cor-branco) !important; /* FORÇA A COR BRANCA */
font-size: 1.8rem; /* Aumentei um pouco para garantir */
background: transparent; /* Garante que não tem fundo */
border: none; /* Garante que não tem borda */
}
    
/* Garante que o ícone DENTRO do botão também seja visível */
nav.nav .nav-toggle i {
display: inline-block !important; /* Garante que o ícone não está escondido */
color: inherit !important; /* Herda a cor branca do botão */
}

    .section-title h2 {
        font-size: 1.8rem;
    }

    .cta-section {
        padding: 6rem 0;
    }

    .team-section {
        padding: 4rem 0;
    }

    /* --- Slider Principal --- */
    .slider {
        height: auto !important;
    }

    .slide-content h1 {
        font-size: 2.2rem;
    }

    .slide-content p {
        font-size: 1.1rem;
        margin: 1rem 0 1.5rem;
    }

    /* --- Seção de Produtos --- */
    .product-card {
        /* Mostra 1 produto por linha */
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* --- CTA Cases --- */

    .cases-cta-content {
        flex-direction: column;
        gap: 2rem;
    }

    .cases-cta-content img {
        max-width: 80%;
    }

    /* --- CTA Flutuante --- */
    .partner-cta-card {
        padding: 2.5rem 1.5rem;
        margin-bottom: -70px;
    }

    .partner-cta-card h2 {
        font-size: 1.5rem;
    }

    /* --- Rodapé --- */
    .footer-links {
        flex-direction: column;
        gap: 1.5rem;
    }

    .site-footer {
        padding-top: 120px;
    }
}


/* Para telas menores que 576px (Celulares pequenos) */
@media (max-width: 576px) {
    /* --- Botões --- */
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .nav .nav-buttons {
        /* Ajusta os botões do header se necessário */
        gap: 0.5rem;
    }

    /* --- Slider Principal --- */
    .slide {
        padding: 2rem 1.5rem;
        text-align: center;
        justify-content: center;
    }

    .slide-content h1 {
        font-size: 1.8rem;
    }

    /* --- Seção Produtos --- */
    .products-container {
        padding: 2rem 1rem;
    }

    .product-card {
        padding: 0 0.5rem;
    }

    .product-title,
    .product-subtitle,
    .product-description {
        text-align: center;
    }

    /* --- CTA Principal --- */
    .cta-content h2 {
        font-size: 1.8rem;
    }

    /* --- Time e CTA Flutuante --- */
    .team-content .team-title {
        font-size: 1.6rem;
    }

    .partner-cta-card h2 {
        font-size: 1.4rem;
    }

    
}

/* --- AJUSTE GLOBAL DE LARGURA --- */
.container {
    max-width: 1100px; /* Largura PADRÃO para o conteúdo do site */
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* --- EXCEÇÃO PARA O SLIDER PRINCIPAL --- */
.hero-section.container {
    max-width: 95%; /* Largura MAIOR apenas para o slider */
    display: flex;
    justify-content: center;
    align-items: center;

}

.slider {
    height: 80vh !important;
}

/* --- ESTILOS GERAIS DE BOTÕES (ATUALIZADO) --- */
.btn {
    padding: 8px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    /* Transição suave para todas as animações */
    transition: all 0.3s ease !important;
}

/* --- EFEITO DE ELEVAÇÃO (HOVER) PADRÃO PARA TODOS OS BOTÕES --- */
.btn:hover {
    transform: translateY(-3px) !important;
    /* A sombra (brilho) será definida abaixo, de acordo com a cor */
}


.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title span {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-primaria);
    margin-bottom: 0.5rem;
}

.section-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
}

/* ==========================================================================
   Seção 1: Cabeçalho (Header)
   ========================================================================== */
.header {
    background-color: var(--cor-branco);
    height: 90px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    height: 100%;
}

.nav-logo {
    font-size: 1.5rem;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    display: flex;
}

.nav-list {
    display: flex;
    gap: 2.5rem;
}

.nav-link {
    font-weight: bold;
    transition: color 0.3s;
    color: var(--cor-texto-cabecalho);
    font-size: 1.1rem;
}

.nav-link:hover {
    color: #0EDCCE !important;
}

.nav-buttons {
    display: flex;
    gap: 1rem;
}

/* --- Definições de cor de fundo dos botões --- */
.btn-login{
    background-color: var(--cor-branco);
    color: #2c2d3a; /* ALTERADO */
    border: 2px solid #2c2d3a;
}

.btn-cta,
.btn-cta-products,
.btn-cta-main,
.btn-cases,
.btn-team,
.btn-cta-observability,
.btn-secondary-partner {
    background-color: none;
    color: var(--cor-branco); /* ALTERADO */
    border: 2px solid white;
}

.btn-cta:hover,
.btn-cta-products:hover,
.btn-cta-main:hover,
.btn-cases:hover,
.btn-team:hover,
.btn-cta-observability:hover,
.btn-secondary-partner:hover {
    border: 2px solid #0EDCCE;
}

.btn-secondary-partner {
    background-color: #2C2D3A;
    color: white; /* ALTERADO */
    border: 2px solid #2C2D3A;
}

.btn-cta-observability, .bkg{
    background-color: var(--cor-primaria);;
}
/* Casos especiais de cor de texto */
.btn-cases,
.btn-team {
    color: var(--cor-branco); /* ALTERADO */
}

.btn-cta-urgency {
   background-color: var(--cor-primaria);
   color: var(--cor-branco); /* ALTERADO */
}


/* ==========================================================================
   EFEITOS DE BRILHO ESPECÍFICOS POR COR (NOVA SEÇÃO)
   ========================================================================== */

/* --- BRILHO PARA BOTÕES COM --cor-primaria --- */
.btn-cta-main:hover,
.btn-cta:hover,
.btn-cta-observability:hover {
    box-shadow: 0 4px 20px rgba(44, 45, 58, 0.4); /* ALTERADO */
}


.btn-cta-products:hover,
.btn-cases:hover,
.btn-team:hover {
    box-shadow: 0 4px 20px rgba(44, 45, 58, 0.3); /* ALTERADO */
}

/* --- BRILHO PARA BOTÕES COM --cor-urgencia --- */
.btn-cta-urgency:hover {
    box-shadow: 0 4px 20px rgba(255, 140, 0, 0.4);
}


/* ==========================================================================
   Seção 2: Slider Principal (Hero)
   ========================================================================== */
.hero-section.container {
    padding: 0;
    
}

.slider {
    position: relative;
    width: 100%;
    height: 550px;
    border-radius: 25px;
    overflow: hidden;
   
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    padding: 2rem 5rem;
    
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    
    
}

.slide-content {
    position: relative;
    z-index: 2;
    color: var(--cor-branco);
    max-width: 650px;
    
}

.slide-content h1 {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.slide-content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 1.5rem 0;
}

.slider-nav {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    z-index: 3;
}

.slider .slider-nav {
    position: absolute;
    top: 70vh;
    left: 50%;
    transform: translateX(-50%);
}

.slider-dot {
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-dot.active,
.slider .slider-dot:hover {
    background-color: var(--cor-primaria);
}


/* ==========================================================================
    Seção 3: Clientes - Estilos do Carrossel (AJUSTES)
   ========================================================================== */

/* Mantém os estilos existentes para a seção e título */
.clients-section {
    padding: 4rem 0;
}

.section-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 3rem;
}

.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    gap: 1rem; 
}

.carousel-track.moving {
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.0rem;
    width: calc(100% / 5);
}

.carousel-slide img {
    max-height: 100px;
    width: 100px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.carousel-slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Estilos para as setas de navegação - Esconder completamente */
.carousel-button {
    display: none;
}


/* Media Queries para Responsividade (AJUSTES) */

/* Para tablets e telas menores (até 768px) */
@media (max-width: 768px) {
    .carousel-track {
        gap: 0.8rem; /* Ajustar gap para tablets */
    }

    .carousel-slide {
        width: calc(100% / 4);
        padding: 0 0.4rem;
    }

    .carousel-slide img {
        max-height: 100px;
        width: auto;
    }
}

/* Para dispositivos móveis (até 480px) */
@media (max-width: 480px) {
    .carousel-track {
        gap: 0.6rem; /* Ajustar gap para mobile */
    }

    .carousel-slide {
        width: calc((100% - (2 * 0.6rem)) / 3);
        padding: 0 0.3rem;
    }

    .carousel-slide img {
        max-height: 100px;
    }
}


/* ==========================================================================
   Seção 4: Diferenciais (versão com imagem) - Agora escondida por padrão
   ========================================================================== */
.features-section-final {
    display: block;
    padding: 4rem 0;
    text-align: center;
}

.features-img-final {
    max-width: 60%;
    height: auto;
}

/* ==========================================================================
   NOVA SEÇÃO: Grandes Números (1.5)
   ========================================================================== */
.big-numbers-section {
    background-color: #2C2D3A; 
    color: var(--cor-branco);
    padding: 4rem 0;
    text-align: center;
}

.big-numbers-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.number-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.number-item .number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--cor-branco); /* ALTERADO */
    margin-bottom: 0.5rem;
    transition: all 0.5s ease-out;
}

.number-item .description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 200px;
}

/* ==========================================================================
   NOVA SEÇÃO: Observabilidade / Telas do Produto (1.7)
   ========================================================================== */
.product-observability-section {
    padding: 6rem 0;
    background-color: var(--cor-fundo-pagina);
    text-align: center;
}

.section-title span{
    color: #2C2D3A;
}
.observability-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.observability-image {
    width: 100%;
    
    height: auto;
    border-radius: 12px;
    
}

.product-observability-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--cor-texto-corpo);
    max-width: 700px;
}

.btn-cta-observability {
    margin-top: 1rem;
}

/* ==========================================================================
   Seção 5: Produtos (Blocos Estáticos em Desktop, Carrossel em Mobile) - ATUALIZADO
   ========================================================================== */
.products-section {
    padding-bottom: 6rem;
    padding-top: 2px;
    position: relative;
    overflow: hidden;
    background-image: none; 
    background-color: var(--cor-branco); 
}

.products-section.home-products-material-style {
    padding: 5rem 1rem; 
    background-color: #2C2D3A;
    background-image: url('/wp-content/uploads/2025/11/bkg-cinza.jpg');
    background-position: center;
     background-size: cover;
    background-repeat: no-repeat;
    color: var(--cor-branco); 
    position: relative;
    overflow: hidden;
}



.products-section.home-products-material-style .container {
    background-color: transparent;
    padding: 0; 
    box-shadow: none; 
}

.products-section.home-products-material-style .section-title {
    text-align: center;
    margin-bottom: 3rem; 
    color: var(--cor-branco);
}

.products-section.home-products-material-style .section-title h2 {
    color: var(--cor-branco); 
}

.products-section.home-products-material-style .material-p {
    color: rgba(255, 255, 255, 0.8);
}

.products-section.home-products-material-style .products-grid-home-override {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; 
    margin-top: 3rem;
}

.products-section.home-products-material-style .material-card {
    background-color: #2c2d3a;  
    border-radius: 12px;
    padding: 1.5rem; 
    border: 2px solid #3a3b4a;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 
}

.products-section.home-products-material-style .material-card:hover {
    transform: translateY(-5px);
    border-color: #0EDCCE; /* ALTERADO PARA CONTRASTE */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.products-section.home-products-material-style .material-card .img-material {
    padding-bottom: 20px;
    max-width: 60px;
    height: auto;
}

.products-section.home-products-material-style .material-card .product-icon {
    font-size: 3rem;
    color: var(--cor-branco); /* ALTERADO */
    margin-bottom: 1rem;
    padding-top: 0; 
    filter: none; 
}


.products-section.home-products-material-style .material-card h3 {
    font-size: 1.2rem;
    color: var(--cor-branco); /* ALTERADO */
    margin-bottom: 0.5rem;
    line-height: 1.3; 
}

.products-section.home-products-material-style .material-card p {
    color: rgba(255, 255, 255, 0.7); 
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex-grow: 1; 
}

.products-section.home-products-material-style .material-card .btn-outline {
   padding: 0.5rem 1.5rem;
   border: 2px solid var(--cor-branco); /* ALTERADO */
   color: var(--cor-texto-cabecalho); 
   border-radius: 8px;
   font-weight: 600;
   text-align: center;
   background-color: var(--cor-branco); /* ALTERADO */
}

.products-section.home-products-material-style .material-card .btn-outline:hover {
  background-color: transparent;
   color: var(--cor-branco); /* ALTERADO */
   border: 2px solid #0EDCCE;
   
}

.products-section.home-products-material-style .products-grid-container {
    overflow: visible; 
    margin-bottom: 0;
}

.products-section.home-products-material-style .products-footer {
    display: flex;
    justify-content: center;
    margin-top: 3rem; 
    padding-top: 0; 
}

/* Mídias queries para responsividade */
@media (max-width: 992px) {
    .products-section.home-products-material-style .products-grid-home-override {
        grid-template-columns: repeat(2, 1fr); 
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .products-section.home-products-material-style {
        display: none; 
    }
}

/* ==========================================================================
   Seção 6: Chamada para Ação (CTA)
   ========================================================================== */
.cta-section {
    padding: 10rem 0;
    background-color: #1f2029;
    background-image: url('/wp-content/uploads/2025/11/bkg1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--cor-branco);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-content h2 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--cor-branco);
}

.cta-content p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.btn-cta-main {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    border-radius: 10px;
    font-weight: 600;
}


/* ==========================================================================
   Seção 7: Depoimentos (Testimonials)
   ========================================================================== */
.testimonials-section {
    width: 100%;
    max-width: 1100px;
    padding: 0 20px;
    margin: 0 auto;
    background-color: white;
}

.container-testimonials {
    background-color: white;
}

.swiper {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 60px;
    overflow-x: hidden;
    overflow-y: visible;
}

.testimonial-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 25px;
    padding-left: 45px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    position: relative;
}

.logo-container {
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    position: absolute;
    top: 70px;
    left: -60px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.logo-container img {
    max-width: 60%;
    height: auto;
}

.card-content {
    margin-top: 20px;
}

.stars {
    font-size: 24px;
    color: #2C2D3A; /* ALTERADO */
    margin-bottom: 15px;
}

.testimonial-text {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

:root {
    --swiper-theme-color: #2C2D3A; /* ALTERADO */
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--swiper-theme-color);
}

.swiper-pagination-bullet-active {
    background-color: var(--swiper-theme-color);
}

/* ==========================================================================
   Seção 8: Chamada para Cases
   ========================================================================== */
.cases-cta-section {
    padding-top: 0px;
    padding-bottom: 4rem;
    background-color: var(--cor-branco);
}

.cases-cta-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10rem;
}

/* ==========================================================================
   Seção 9: Conheça o Time
   ========================================================================== */
.team-section {
    padding: 6rem 0;
    background-color: #F3F3F3;
    margin-bottom: 100px;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}

.team-content .team-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 1.5rem;
}

.team-content .team-description {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.team-photo {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Seção 10: Chamada para Parceria (CTA Flutuante)
   ========================================================================== */
.partner-cta-section {
    position: relative;
    z-index: 5;
    padding: 0 1rem;
}

.partner-cta-card {
    background-color: #2C2D3A;
    background-image: url('/wp-content/uploads/2025/11/bkg2.png');
    background-size: cover;
    background-position: center;
    color: var(--cor-branco);
    text-align: center;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    margin-bottom: -90px;
}

.partner-cta-card h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-branco);
    margin-bottom: 1rem;
}

.partner-cta-card p {
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto 2rem auto;
    line-height: 1.6;
}

/* ==========================================================================
   Seção 11: Rodapé Principal
   ========================================================================== */
.site-footer {
    background-color: #000000;
    color: white;
    padding: 150px 0 2rem 0;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 3rem;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: 3rem;
    
    border-right: 1px solid #0EDCCE;
    border-left: 1px solid #0EDCCE;
    font-size: 1.1rem;
}



.footer-nav-list a:hover {
    color: #0EDCCE !important;
}

.footer-contact {
    padding-left: 1.5rem;
}

.footer-contact p {
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.footer-socials {
    display: flex;
    gap: 1rem;
}

.footer-socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: white;
    border-radius: 50%;
    transition: background-color 0.3s, transform 0.3s;
    color: #3F3C3E;
}

.footer-socials a:hover {
    background-color: white;
    transform: translateY(-2px);
    color: #0EDCCE !important;
}

.footer-bottom {
    border-top: 1px solid #2d3748;
    padding-top: 2rem;
    text-align: center;
    font-size: 0.85rem;
    margin-top: 3rem;
}

.footer-bottom a {
    font-weight: 600;
}

/* ==========================================================================
   Responsividade
   ========================================================================== */
@media (max-width: 1200px) {
    .hero-section.container {
        padding: 0 2rem;
    }

    .products-container {
        padding: 3rem 2rem;
    }
}

@media (max-width: 992px) {
    .section-title h2 {
        font-size: 2.2rem;
    }

    .products-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem 0;
    }

    .product-card {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .testimonial-card {
        margin-left: 0;
    }

    .logo-container {
        left: 50%;
        transform: translateX(-50%);
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .team-content {
        order: 2;
        text-align: center;
    }

    .team-image-wrapper {
        order: 1;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .footer-column,
    .footer-links,
    .footer-contact {
        border: none;
        padding: 0;
    }

    .footer-links {
        justify-content: center;
        gap: 2rem;
    }

    .footer-socials {
        justify-content: center;
    }

    .features-section-final {
        display: none;
    }

    .big-numbers-content {
        /* Ajuste para mobile */
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 90%;
    }

    .section-title h2 {
        font-size: 1.8rem;
    }

    .cta-section {
        padding: 6rem 1rem;
    }

    .team-section {
        padding: 4rem 1rem;
    }

    .partner-cta-section {
        margin-top: -80px;
    }

    .slider {
        height: 480px;
    }

    .slide-content h1 {
        font-size: 2.2rem;
    }

    .slide-content p {
        font-size: 1.1rem;
        margin: 1rem 0 1.5rem;
    }

    .product-card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cases-cta-content {
        flex-direction: column;
        gap: 2rem;
    }

    .cases-cta-content img {
        max-width: 80%;
    }

    .partner-cta-card {
        padding: 2.5rem 1.5rem;
    }

    .partner-cta-card h2 {
        font-size: 1.5rem;
    }

    .footer-links {
        flex-direction: column;
        gap: 1.5rem;
    }

    .site-footer {
        padding-top: 140px;
    }

    /* Ajustes para a nova seção de observabilidade no mobile */
    .product-observability-section {
        padding: 4rem 1rem;
    }

    .observability-image {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .nav {
        justify-content: space-between;
        width: 100%;
    }

    .header .nav-buttons {
        display: none;
    }

    .nav-logo img {
        height: 35px;
    }

    .slide {
        padding: 2rem 1.5rem;
        text-align: center;
        justify-content: center;
    }

    .slide-content h1 {
        font-size: 1.8rem;
    }

    .products-container {
        padding: 2rem 1rem;
    }

    .product-card {
        padding: 0 0.5rem;
    }

    .product-title,
    .product-description {
        text-align: center;
    }

    .container-testimonials {
        padding-top: 40px;
    }

    .testimonial-card {
        padding: 1.5rem;
        padding-top: 50px;
    }

    .cta-content h2 {
        font-size: 1.8rem;
    }

    .team-content .team-title {
        font-size: 1.6rem;
    }

    .partner-cta-card h2 {
        font-size: 1.4rem;
    }

    .big-numbers-section .number-item .number {
        font-size: 2.8rem;
    }

    .big-numbers-section .number-item .description {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   Nível Extra: Animações Modernas (Fade in on Scroll)
   ========================================================================== */

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in {
    transform: translateY(0);
}

.fade-in-up {
    transform: translateY(20px);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0); 
}

.animate-on-scroll.is-visible.stagger-1 {
    transition-delay: 0.1s;
}

.animate-on-scroll.is-visible.stagger-2 {
    transition-delay: 0.2s;
}

.animate-on-scroll.is-visible.stagger-3 {
    transition-delay: 0.3s;
}

.animate-on-scroll.is-visible.stagger-4 {
    transition-delay: 0.4s;
}

/* ---- Estrutura do Carrossel ---- */
.slider-wrapper {
    display: none;
    width: 100%;
    max-width: 400px;
    margin: 30px auto;
    padding-bottom: 4rem;
}

.mobile-slider-container {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.mobile-slider-container::-webkit-scrollbar {
    display: none;
}

.mobile-slide-card {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 16px;
    padding-left: 32px;
    padding-right: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---- Estilos da Navegação por Pontos (Dots) ---- */
.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: var(--cor-primaria);
}


/* ---- Media Query para Exibir no Mobile ---- */
@media (max-width: 768px) {
    .slider-wrapper {
        display: block;
    }

    .products-section {
        display: none;
    }

    .product-title {
        padding-top: 0px;
    }

    .hero-section.container {
        padding: 0px;
    }

    .slider {
        min-height: 100% !important;
    }
}

/* ---- Estilos dos Elementos Internos (Sem Mudanças) ---- */
.icon-container img {
    width: 60px;
    height: auto;
    margin-bottom: 16px;
}

.card-title {
    color: #2C2D3A; /* ALTERADO */
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.card-subtitle {
    color: #2C2D3A; /* ALTERADO */
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.card-description {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 8px 0 0 0;
}


/* ==========================================================================
   INÍCIO: Estilos Específicos da Página de Planos
   ========================================================================== */

/* --- Wrapper do Hero --- */
.plans-hero-wrapper {
    max-width: 95%;
    margin: 0rem auto;
    border-radius: 25px;
    overflow: hidden;
}

/* --- Seção de Título (Hero) --- */
.plans-hero-new {
    background-color: var(--cor-fundo-dark);
    color: var(--cor-branco);
    background-image: none;
    padding: 8rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-height: calc(50vh - 90px); /* Altura total (menos o header de 90px) */
    position: relative;
    overflow: hidden; /* Importante para os brilhos */

    /* Padrão de grid */
    background-image: 
        linear-gradient(var(--cor-grid-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--cor-grid-dark) 1px, transparent 1px);
    background-size: 50px 50px; /* Tamanho da célula do grid */
}

.plans-hero-new::before {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero-bg-text {
    display: none;
}

.plans-hero-new h2 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--cor-branco);
    margin-bottom: 1rem;
}

.plans-hero-new p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.8);
}

/* --- Seção de Cards de Preços --- */
.pricing-section-new {
    padding: 4rem 1rem;
}

.pricing-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.planos-container {
    margin-bottom: 50px;
    margin-top: -200px;
}

.pricing-card-new {
    background-color: var(--cor-branco);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.pricing-card-new:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.plan-tag {
    display: inline-block;
    background-color: #e2e8f0; /* ALTERADO para melhor contraste */
    color: #2C2D3A; 
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
    align-self: flex-start;
}

.pricing-card-new .plan-name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    text-align: left;
    margin-bottom: 0.5rem;
}

.pricing-card-new .plan-subtitle {
    font-weight: 600;
    text-align: left;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.pricing-card-new .plan-description {
    text-align: left;
    color: var(--cor-texto-corpo);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.pricing-card-new h4 {
    text-align: left;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 1rem;
}

.features-list{
    font-size: 1.1rem !important;
}

.pricing-card-new .features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.pricing-card-new .features-list li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
}

.pricing-card-new .features-list li::before {
    content: '•';
    color: var(--cor-primaria);
    font-size: 1.5rem;
    margin-right: 0.75rem;
    line-height: 1;
}

.pricing-card-new.recommended {
    border: 2px solid #0EDCCE;
}

.includes-all-box {
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    font-size: 1.1rem !important;
}

.pricing-card-new .btn {
    width: 100%;
    margin-top: 2rem;
    padding: 8px 28px;
}


/* ===================================================================
   CSS GERAL PARA ACORDEÕES E CORREÇÕES PARA A TABELA DE BENEFÍCIOS
   =================================================================== */

/* -------------------------------------------------------------------
   #1 - ESTILOS GERAIS PARA TODOS OS ACORDEÕES (Páginas de Planos, FAQ, etc.)
   ------------------------------------------------------------------- */

/* ==========================================================================
   **NOVA TÉCNICA PARA ACORDEÃO (À PROVA DE FALHAS)**
   ========================================================================== */
.accordion-item {
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: var(--cor-branco);
    transition: margin 0.3s ease;
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background-color: transparent !important;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-texto-cabecalho) !important;
    cursor: pointer;
    text-align: left;
}

button.accordion-header.active{
    background-color: #0EDCCE !important;
    border: 2px solid #0EDCCE !important;
}

button.accordion-header:hover{
     background-color: #0EDCCE !important;
     border: 2px solid #0EDCCE !important;
}

.accordion-header .icon-toggle {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.4s ease;
    flex-shrink: 0;
}

.accordion-item.active .accordion-header .icon-toggle {
    transform: rotate(0deg);
   
}

/* Animação com Grid */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr; /* Começa fechado */
    transition: grid-template-rows 0.4s ease-out;
}
.accordion-item.active .accordion-content {
    grid-template-rows: 1fr; /* Expande para a altura total do conteúdo */
}
.accordion-content .content-inner {
    overflow: hidden; /* Essencial para a animação */
}

/* ==========================================================================
   **NOVO** - CORREÇÃO DE ALINHAMENTO DA TABELA
   ========================================================================== */

   .comparison-sub-table th:first-child, .comparison-sub-table td:first-child{
    font-size: 1.1rem !important;
   }

   .comparison-sub-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.comparison-sub-table th,
.comparison-sub-table td {
    text-align: center;      /* Centraliza todo o texto por padrão */
    vertical-align: middle;
    padding: 0.8rem;
    border-top: 1px solid #f0f0f0;
}
.comparison-sub-table th {
    font-weight: 600;
    color: var(--cor-texto-cabecalho);
    font-size: 1.1rem !important;
}
.comparison-sub-table tr:first-child td {
    border-top: none;
    
}
/* Alinha a primeira coluna (header e células) à esquerda */
.comparison-sub-table th:first-child,
.comparison-sub-table td:first-child {
    text-align: left;
}
.comparison-sub-table .fa-check-circle {
    color: #0EDCCE; /* Cor verde para o ícone de check */
    font-size: 1.2rem;
}


/* -------------------------------------------------------------------
   #2 - AJUSTES ESPECÍFICOS PARA A TABELA DE BENEFÍCIOS (GoPartner)
   ------------------------------------------------------------------- */

/* Container principal da tabela de benefícios */
.program-levels-section .benefits-table {
    border: 1px solid #e2e8f0;
    border-radius: 12px; /* Cantos arredondados no container geral */
    overflow: hidden; /* Essencial para corrigir o bug dos cantos */
    margin-top: 2rem;
}

/* Remove a borda e a margem do .accordion-item quando ele está dentro da tabela */
.program-levels-section .accordion-item {
    border: none;
    margin-bottom: 0;
    border-radius: 0;
}

/* Estilo para o botão "Ver todos os benefícios" */
.program-levels-section .accordion-header {
    background-color: #f8f9fa; /* Um fundo leve para destacar */
    border-top: 1px solid #e2e8f0; /* Separador superior */
}

/* Remove a cor primária de fundo quando o botão da tabela está ativo */
.program-levels-section .accordion-header.active {
    background-color: #f8f9fa;
    color: var(--cor-texto-cabecalho);
    border-radius: 0px;
}



/* Remove a borda superior do conteúdo, pois o header já tem uma */
.program-levels-section .accordion-content {
    border-top: none;
}

/* Estilos para as linhas e células dos benefícios para alinhar corretamente */
.program-levels-section .benefit-row {
    display: flex;
    align-items: center;
    border-top: 1px solid #e2e8f0;
}

.program-levels-section .benefit-row > div {
    padding: 1rem 0.75rem;
    text-align: left;
    font-size: 1.1rem !important;
}

.program-levels-section .benefit-description {
    flex-basis: 40%; /* Ajuste a largura da coluna de descrição */
    text-align: left;
    font-weight: 500;
    padding-left: 1.5rem;
}

.program-levels-section .check-cell {
    flex: 1;
}

/* -------------------------------------------------------------------
   #3 - ESTILOS DA SUB-TABELA (Página de Planos, já estava ok)
   ------------------------------------------------------------------- */

/* ... (as regras de .comparison-sub-table continuam aqui, sem alterações) ... */
.comparison-sub-table {
    width: 100%;
    border-collapse: collapse;
}

/* --- Ajustes na Tabela Comparativa (Acordeão) --- */
    .comparison-accordion-section {
        padding: 2.5rem 1rem;
    }

/* ... etc ... */
.material-h2{
    color: white !important;
}

.span-soluction-material {
    color: white !important;
    text-transform: lowercase !important;
}

.material-p {
    padding-top: 30px;
    padding-bottom: 30px;
    font-weight: 400;
    color: white !important;
}

/* --- Seção Material Completo --- */
.material-section {
    padding: 5rem 1rem;
    padding-bottom: 20rem;
    background-color: #2C2D3A; 
    background-image: url("/wp-content/uploads/2025/11/bkg-cinza.jpg");
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
    color: white;
    position: relative;
    overflow: hidden;
}

.material-section .container {
    position: relative;
    z-index: 2;
}

.material-section.planos-material-style {
    padding: 5rem 1rem; 
    background-color: #2C2D3A;
    background-image: url('/wp-content/uploads/2025/11/bkg-cinza.jpg');
    background-position: center;
    background-size: auto;
    background-repeat: repeat;
    color: var(--cor-branco); 
    position: relative;
    overflow: hidden;
}

.material-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10%;
    width: 50%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    z-index: 1;
}

#mat-observabilidade .material-grid {
    display: flex;
    justify-content: center; /* Centraliza os cards horizontalmente */
    flex-wrap: wrap; /* Garante que quebrem linha em telas pequenas */
    gap: 1.5rem; /* Mantém o mesmo espaçamento */
}

#mat-observabilidade .material-card {
    width: 100%;
    max-width: 249px; /* Mantém a largura idêntica à aba Segurança */
    min-height: 326px; /* Mantém a altura idêntica à aba Segurança */
    flex: 0 0 auto; /* Impede que o card estique ou encolha */
}

.material-content{
    padding-bottom: 15rem;
}

.material-card {
    background-color: #2c2d3a;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #3a3b4a;
    transition: all 0.3s ease;
    max-width: 249px;
    min-height: 326px;
}

.img-material {
    padding-bottom: 20px;
}

.material-card:hover {
    transform: translateY(-5px);
    border-color: var(--cor-branco); /* ALTERADO */
}

.material-card-icon {
    font-size: 2rem;
    color: var(--cor-branco); /* ALTERADO */
    margin-bottom: 1rem;
}

.material-card h3 {
    font-size: 1.2rem;
    color: var(--cor-branco); /* ALTERADO */
    margin-bottom: 0.5rem;
}

.material-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.material-card .btn-outline {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--cor-branco); /* ALTERADO */
    color: var(--cor-primaria); /* ALTERADO */
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    background-color: var(--cor-branco); /* ALTERADO */
}

.material-card .btn-outline:hover {
    background-color: transparent;
    color: var(--cor-branco); /* ALTERADO */
}

/* --- CTA Final --- */
.final-cta-section {
    position: relative;
    z-index: 5;
    padding: 0 1rem;
    background-color: #2C2D3A; 
}

.final-cta-card {
    background-color: #2C2D3A;
    background-image: url('/wp-content/uploads/2025/11/Planos/banner2.png');
    background-size: cover;
    background-position: center;
    color: var(--cor-branco);
    text-align: center;
    padding: 4rem 3rem;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    margin-top: -90px;
    position: relative;
}

.final-cta-card h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-branco);
    margin-bottom: 1rem;
}

.final-cta-card p {
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto 2rem auto;
    line-height: 1.6;
}

/* ==========================================================================
   INÍCIO: Estilos Responsivos para Mobile (até 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* --- Ajustes no Hero --- */
    .plans-hero-new {
        height: auto;
        min-height: 350px;
        padding: 2rem 1rem;
    }

    .story-graphics-column{
        display: none;
    }

    .scroll-story-section{
        padding-top: 50px;
    }

    .plans-hero-new h2 {
        font-size: 2.2rem;
    }

    .plans-hero-new p {
        font-size: 1.1rem;
    }

    /* --- Ajustes nos Cards de Planos --- */
    .planos-container {
        margin-top: -150px;
        margin-bottom: 30px;
    }

    .pricing-grid-new {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .pricing-card-new {
        padding: 1.5rem;
    }

    .pricing-card-new .plan-name {
        font-size: 1.8rem;
    }

    /* --- Ajustes na Tabela Comparativa (Acordeão) --- */
    .comparison-accordion-section {
        padding: 2.5rem 1rem;
    }

    .accordion-header {
        font-size: 1.1rem;
        padding: 1rem;
    }

    .accordion-content.open {
        overflow-x: auto;
    }

    .comparison-sub-table {
        width: 100%;
        min-width: 600px;
    }

    .comparison-sub-table th,
    .comparison-sub-table td {
        padding: 0.8rem;
        white-space: nowrap;
    }

    /* --- Ajustes na Seção de Materiais --- */
    .material-section {
        padding: 3rem 1rem;
        padding-bottom: 15rem;
    }

    .material-grid {
        grid-template-columns: 1fr;
    }

    .material-card {
        text-align: center;
    }

    .material-card-icon,
    .material-card h3,
    .material-card p {
        text-align: center;
    }

    .material-card .btn-outline {
        margin: 0 auto;
    }


    /* --- Ajustes no CTA Final --- */
    .final-cta-card {
        margin-top: -120px;
        padding: 2.5rem 1.5rem;
    }

    .final-cta-card h2 {
        font-size: 1.8rem;
    }

    .final-cta-card p {
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   INÍCIO: Estilos Específicos da Página de Ajuda/FAQ
   ========================================================================== */

/* --- Seção de Título (Hero) --- */
.help-hero-wrapper {
    max-width: 95%;
    margin: 0rem auto;
    border-radius: 25px;
    overflow: hidden;
}

.help-hero-section {
    background-image: url("/wp-content/uploads/2025/11/5_Banner_Ajuda.png");
    background-size: cover;
    background-position: center;
    padding: 6rem 2rem;
    text-align: center;
    color: var(--cor-branco);
    position: relative;
    display: flex;
    height: 80vh;
    justify-content: center;
    align-items: center;
}

.help-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.help-hero-section .hero-content {
    position: relative;
    z-index: 2;
}

.help-hero-section h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.help-hero-section h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

/* --- Seção de Navegação Rápida --- */
.help-nav-section {
    padding: 4rem 1rem;
}

.help-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.help-nav-card {
    background-color: var(--cor-branco);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.help-nav-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--cor-primaria);
}

.help-nav-card i {
    font-size: 2.5rem;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
}

.help-nav-card span {
    font-weight: 600;
    color: var(--cor-texto-cabecalho);
}

/* --- Seção FAQ --- */
.faq-section {
    padding: 4rem 1rem;
    background-color: #f8f9fa;
}

.faq-answer {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    line-height: 1.7;
    color: var(--cor-texto-corpo);
}



.accordion-header.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 2px solid #0EDCCE !important;
}

.accordion-header.active+.accordion-content {
    border-color: #e2e8f0;
}


/* --- Seção CTA de Contato --- */
.contact-cta-section {
    position: relative;
    z-index: 5;
    background-color: transparent;
    padding: 0 1rem;
   
}


.contact-cta-card {
    background-color: #2C2D3A; 
   
    background-size: cover;
    background-position: center;
    color: var(--cor-branco);
    text-align: center;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    margin-bottom: -90px;
}

.contact-cta-card h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white !important;
}

.contact-cta-card p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-ajuda {
   padding-top: 150px;
}


/* --- Responsividade para a Página de Ajuda --- */
@media (max-width: 992px) {
    .help-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .help-hero-section h1 {
        font-size: 1.2rem;
    }

    .help-hero-section h2 {
        font-size: 2.2rem;
    }

    .contact-cta-card h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 576px) {
    .help-nav-grid {
        grid-template-columns: 1fr;
    }

    .help-hero-section {
        padding: 4rem 1rem;
    }

    .help-hero-section h2 {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   INÍCIO: Estilos Específicos da Página de Cases
   ========================================================================== */

/* --- Hero Section (sem alterações) --- */
.cases-hero-wrapper {
    max-width: 95%;
    margin: 0rem auto;
    border-radius: 25px;
    overflow: hidden;
}

.cases-hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/wp-content/uploads/2025/11/4_Banner_Cases.png");
    background-size: cover;
    background-position: center;
    padding: 5rem 2rem;
    text-align: center;
    color: var(--cor-branco);
    display: flex;
    height: 80vh;
    justify-content: center;
    align-items: center;
}

.cases-hero-section h1 {
    font-size: 3rem;
    font-weight: 700;
}

.cases-hero-section p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 1rem auto 0;
    color: rgba(255, 255, 255, 0.9);
}

/* --- Filtros de Categoria (ATUALIZADO PARA LAYOUT 5x2) --- */

/* ==========================================================
   NOVOS ESTILOS DA PÁGINA DE CASES
   ========================================================== */

/* 1. Estilização dos Filtros (Centralizados e Limpos) */
.category-filters.centered-filters {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    gap: 20px; /* Espaçamento entre os botões */
    flex-wrap: wrap; /* Permite quebra de linha em telas pequenas */
    margin-bottom: 40px;
}

/* Ajuste visual dos botões de filtro (opcional, para ficar mais leve) */
.filter-btn {
    padding: 10px 30px;
    border-radius: 50px; /* Botões mais arredondados */
    background-color: transparent;
    color: var(--cor-texto-cabecalho);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--cor-primaria);
    color: #fff !important;
    border-color: var(--cor-primaria);
    box-shadow: 0 4px 15px rgba(44, 45, 58, 0.3);
}

/* 2. Estilização do Link "Saiba Mais" (Preto e Sublinhado) */
.link-saiba-mais {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Espaço entre texto e seta */
    
    font-size: 1rem;
    font-weight: 700; /* Negrito */
    color: #2C2D3A; /* Cor preta/cinza escuro do tema */
    text-decoration: none; /* Remove sublinhado padrão do link */
    
    /* Criação da linha inferior cinza */
    
    padding-bottom: 2px;
    
    transition: all 0.3s ease;
    align-self: flex-start; /* Alinha à esquerda no flexbox do card */
    margin-top: auto; /* Empurra para o fundo do card se houver espaço */
}

/* Efeito Hover no Link */
.link-saiba-mais:hover {
    color: #000; /* Fica preto puro no hover */
    border-bottom: 2px solid #000; 
}

/* Animação da setinha */
.link-saiba-mais i {
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.link-saiba-mais:hover i {
    transform: translateX(5px); /* Move a seta para a direita */
}

.category-filter-section {
    padding: 3rem 1rem;
    text-align: center;
}

.filter-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 1.5rem;
}

.category-filters {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.filter-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cor-texto-corpo);
    background-color: var(--cor-branco);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

button.filter-btn.btn.btn-solid-green:hover,
button.filter-btn.btn.btn-solid-green:focus
 {
    background-color: white !important;
    color: black !important;
    border: 2px solid #0EDCCE  !important;
    box-shadow: 0 4px 20px rgba(14, 220, 206, 0.4) !important; /* Brilho verde */
}

.filter-btn.active {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: white !important; /* ALTERADO */
    box-shadow: 0 4px 15px rgba(44, 45, 58, 0.3); /* ALTERADO */
}


/* --- Grade de Cases e Responsividade (sem alterações) --- */
.cases-grid-section {
    padding: 1rem 1rem 5rem 1rem;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.case-card {
    background-color: var(--cor-branco);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeIn 0.5s ease;
}

.case-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid #0EDCCE; 
}

.case-logo {
    max-height: 108px;
    max-width: 269px;
    width: auto;
    margin-bottom: 1.5rem;
    align-self: flex-start;
}

.case-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 0.8rem;
}

.case-description {
    line-height: 1.6;
    color: var(--cor-texto-corpo);
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.case-link {
    font-weight: 600;
    color: #2C2D3A; 
    display: inline-block;
    align-self: flex-start;
}

.case-link i {
    margin-left: 0.3rem;
    transition: transform 0.3s ease;
}

.case-link:hover i {
    transform: translateX(5px);
}

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

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


/* --- Responsividade (ATUALIZADA) --- */

/* Para a grade de cases */
@media (max-width: 992px) {
    .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cases-hero-section h1 {
        font-size: 2.5rem;
    }

    .cases-grid {
        grid-template-columns: 1fr;
    }
}

/* Para os botões de filtro */
@media (max-width: 992px) {
    .category-filters {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .category-filters {
        grid-template-columns: repeat(2, 1fr);
    }
}

.products-section.home-products-material-style .material-card .img-material {
    filter: brightness(0) invert(1);
}

.img-material{
      filter: brightness(0) invert(1);
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS DA PÁGINA DE PARCEIROS (ATUALIZADO COM NOVAS VARIAVEIS)
   ========================================================================== */

.partner-hero-wrapper {
    max-width: 95%;
    margin: 0rem auto;
    border-radius: 25px;
    overflow: hidden;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.btn.btn-cta{
    background-color: #0EDCCE;
    color: black;
    border: 2px solid #0EDCCE;
    font-size: 1.1rem !important;
}



input.wpcf7-form-control.wpcf7-submit.has-spinner.btn.btn-cta:hover{
    background-color: var(--cor-branco);
    color: black !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2) !important; /* Brilho branco */
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.btn.btn-cta:active,
input.wpcf7-form-control.wpcf7-submit.has-spinner.btn.btn-cta:focus{
     background-color: var(--cor-branco);
    color: black !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2) !important; /* Brilho branco */
}

.partner-hero-section {
    background-color: var(--cor-texto-cabecalho);
    background-image: url('/wp-content/uploads/2025/11/3_Banner_Parceiros.png');
    background-size: cover;
    background-position: center;
    color: var(--cor-branco);
    padding: 5rem 2rem;
    display: flex;
    height: 80vh;
    justify-content: center;
    align-items: center;
    text-align: left;
}

.partner-hero-section .hero-subtitle {
    display: block;
    font-weight: 600;
    color: var(--cor-branco); /* ALTERADO */
    margin-bottom: 1rem;
}

.hero-p{
     display: flex;
    justify-content: left;
    align-items: left;
    text-align: left;
}

.partner-hero-section h1 {
    font-size: 2.8rem;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: left;
}

.partner-hero-section p {
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

 /* ==========================================================================
          ESTILOS ATUALIZADOS E NOVOS PARA A PÁGINA DE PARCEIROS
          ========================================================================== */

         /* --- Nova Hero Section --- */
         .new-hero-section {
             background-color: #f8f9fa;
             padding: 80px 0;
             overflow: hidden;
         }

         .new-hero-grid {
             display: grid;
             grid-template-columns: 1.1fr 1fr;
             align-items: center;
             gap: 60px;
         }

         .new-hero-content .hero-subtitle {
             font-weight: 600;
             color: var(--cor-roxo-go);
             margin-bottom: 15px;
             display: block;
             text-transform: uppercase;
             font-size: 1.1rem;
         }

         .new-hero-content h1 {
             font-family: var(--fonte-titulo);
             font-size: 2.5rem;
             font-weight: 700;
             line-height: 1.2;
             margin-bottom: 20px;
             color: var(--cor-texto-cabecalho);
         }

         .new-hero-content p {
             font-size: 18px;
             margin-bottom: 30px;
             color: var(--cor-texto-corpo);
         }

         .new-hero-image img {
             width: 100%;
             height: auto;
             border-radius: 16px;
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         }

         .hero-buttons {
             display: flex;
             gap: 15px;
             flex-wrap: wrap;
         }

      
         
         /* --- Seção de Prova Social (Logos) --- */
         .clients-section {
             padding: 60px 0;
         }
         .carousel-container {
             overflow: hidden;
             position: relative;
             width: 100%;
         }
         .carousel-track {
             display: flex;
             animation: scroll 30s linear infinite;
         }
         .carousel-track img {
             height: auto;
             max-width: 100px;
             margin: 0 40px;
             filter: grayscale(100%);
             opacity: 0.7;
             transition: all 0.3s ease;
         }
          .carousel-track img:hover {
             filter: grayscale(0%);
             opacity: 1;
             transform: scale(1.1);
         }
         @keyframes scroll {
             0% { transform: translateX(0); }
             100% { transform: translateX(-50%); }
         }

    
/* --- Container Principal da Seção --- */
.partners-tab-section {
    padding: 80px 1rem;
    background-color: #f8f9fa;
}

/* --- Cabeçalho da Seção --- */
.partners-tab-header {
    text-align: center;
    margin-bottom: 50px;
}

.partners-tab-header .section-subtitle {
    display: block;
    font-weight: 600;
    color: #2C2D3A; 
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.partners-tab-header h2 {
    font-family: var(--fonte-titulo);
    font-size: 2.2rem;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.partners-tab-header p {
    font-size: 1.1rem;
    color: var(--cor-texto-corpo);
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Caixa que envolve a navegação e o conteúdo --- */
.partners-tab-container {
    display: flex;
    gap: 0;
    background-color: var(--cor-branco);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(44, 45, 58, 0.1);
    overflow: hidden; 
}

/* --- Navegação Lateral (Abas) --- */
.partner-tabs-nav {
    flex: 0 0 240px;
    background-color: #f8f9fa;
    padding: 20px 10px;
    border-right: 1px solid #e9ecef;
}

.partner-tab-pane {
  display: none;
}

.partner-tab-link {
    display: flex;
    align-items: center;
    gap: 15px; 
    width: 100%;
    padding: 16px 20px;
    font-size: 1.05rem;
    font-family: var(--fonte-titulo);
    font-weight: 500;
    color: #4A5568;
    background-color: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    margin-bottom: 5px;
    transition: all 0.25s ease-in-out;
    border-left: 4px solid transparent;
}

.partner-tab-link:hover {
    background-color: #e9ecef;
    color: var(--cor-texto-cabecalho);
}

.partner-tab-link.active {
    color: #2C2D3A;
    background-color: var(--cor-branco);
    font-weight: 600;
    border-left: 4px solid #0EDCCE;
    transform: translateX(5px);
}

.partner-tab-link i {
    font-size: 1.1em;
    width: 20px;
    text-align: center;
}

/* --- Conteúdo do Parceiro (Direita) --- */
.partner-tab-content-wrapper {
    flex: 1;
    padding: 40px;
}

.partner-tab-pane.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

.partner-content-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.partner-content-header .gocache-seal {
    max-height: 70px;
}

.partner-content-header h3 {
    font-size: 2.8rem;
    font-weight: 700;
}

.partner-tab-pane p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    max-width: 90%;
}

/* --- Subseção de Soluções Melhorada --- */

/* Container da seção de funcionalidades */
.partner-solutions {
    margin-top: 40px; /* Adiciona mais espaço acima do título */
    padding-top: 25px;
    border-top: 1px solid #e9ecef; /* Linha sutil para separar do texto principal */
}

/* Título "Principais Funcionalidades" */
.partner-solutions h4 {
    text-align: center; /* Centraliza o título */
    font-size: 1.5rem; /* Aumenta o tamanho da fonte */
    font-weight: 600; /* Deixa a fonte um pouco mais forte */
    color: #343a40; /* Cor mais escura e sólida */
    margin-bottom: 30px; /* Aumenta o espaço abaixo do título */
}
/* --- Cards de Solução Interativos --- */
.solution-card {
    background-color: #f8f9fa;
}

.solution-card:hover {
    border: 2px solid #0EDCCE;
    background-color: var(--cor-branco);
}

.solution-card i {
    background-color: var(--cor-branco);
    border: 1px solid #e9ecef; 
    color: #2C2D3A;
}

/* --- Novo Botão de Ação "Visitar Site" --- */
.btn-partner-link {
    background-color: #2C2D3A;
    color: var(--cor-branco);
    margin-top: 30px;
    padding: 12px 25px;
    font-weight: 600;
}

.btn-partner-link:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(44, 45, 58, 0.2);
}

.btn-partner-link i {
    margin-left: 8px;
    font-size: 0.8em;
}

/* --- Ajustes Responsivos --- */
@media (max-width: 992px) {
    .partners-tab-container {
        flex-direction: column;
    }
    .partner-tabs-nav {
        display: flex;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        overflow-x: auto; 
    }
    .partner-tab-link {
        flex-shrink: 0;
        border-left: none;
        border-bottom: 4px solid transparent; 
    }
    .partner-tab-link.active {
        border-bottom: 4px solid #2C2D3A;
        transform: none;
    }
    .partner-tab-content-wrapper {
        padding: 30px 20px;
    }
    .partner-content-header h3 {
        font-size: 2.2rem;
    }
}

.partner-content-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.partner-content-header .gocache-seal {
    max-height: 80px;
}

.partner-content-header h3 {
    font-family: var(--fonte-titulo);
    font-size: 2.5rem;
    color: var(--cor-texto-cabecalho);
}

.partner-tab-pane p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: var(--cor-texto-corpo);
}

/* --- Subseção de Soluções --- */
.partner-solutions h4 {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    color: var(--cor-texto-cabecalho);
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Grid que alinha os cards */
.solutions-grid {
    display: grid;
    /* Cria colunas flexíveis, com no mínimo 200px de largura */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px; /* Aumenta o espaçamento entre os cards */
}

/* Card de cada funcionalidade - Onde a mágica acontece! */
.solution-card {
    background-color: #ffffff; /* Fundo branco para um visual limpo */
    border: 1px solid #e9ecef; /* Borda sutil */
    border-radius: 8px; /* Bordas mais arredondadas */
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra suave para dar profundidade */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animação suave para o hover */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Espaçamento entre o ícone e o texto */
}

/* Efeito ao passar o mouse sobre o card */
.solution-card:hover {
    transform: translateY(-8px); /* Efeito de "levantar" o card */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra mais pronunciada */
}

/* Ícone dentro do card */
.solution-card i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* Largura do círculo */
    height: 60px; /* Altura do círculo */
    background-color: #e7f1ff; /* Fundo azul bem claro para o ícone */
    border-radius: 50%; /* Transforma o fundo em um círculo perfeito */
    font-size: 1.75rem; /* Tamanho do ícone */
    color: #007bff; /* Cor principal do ícone (azul) */
    margin-bottom: 0; /* Remove a margem anterior para usar o 'gap' */
}

/* Texto (span) dentro do card */
.solution-card span {
    font-size: 1.1rem;
    font-weight: 500;
    color: #495057; /* Cor de texto suave */
    line-height: 1.4;
}

/*
 * ======================================================
 * MELHORIA MOBILE: Abas roláveis para telas menores
 * ======================================================
 */

@media (max-width: 768px) {

    /* Altera o container de navegação das abas */
    .partner-tabs-nav {
        display: flex;
        justify-content: flex-start; /* Alinha as abas à esquerda para iniciar o scroll */
        overflow-x: auto; /* A MÁGICA ACONTECE AQUI: habilita o scroll horizontal */
        -webkit-overflow-scrolling: touch; /* Garante uma rolagem suave em dispositivos Apple */
        padding-bottom: 10px; /* Adiciona um espaço inferior para a barra de rolagem não ficar colada */
    }

    /* Estilo para esconder a barra de rolagem, mantendo a funcionalidade */
    /* Funciona na maioria dos navegadores modernos */
    .partner-tabs-nav::-webkit-scrollbar {
        display: none; /* Esconde a barra de rolagem no Chrome, Safari, etc. */
    }

    /* Para Firefox */
    .partner-tabs-nav {
        scrollbar-width: none; /* Esconde a barra de rolagem no Firefox */
    }

    /* Garante que o texto dentro de cada botão não quebre a linha */
    .partner-tab-link {
        white-space: nowrap; /* Impede que o texto "Application Firewall" quebre em duas linhas */
        flex-shrink: 0; /* Impede que os botões encolham */
        font-size: 1.1rem; /* Leve ajuste no tamanho da fonte para mobile */
        padding: 12px 20px; /* Ajusta o preenchimento para um toque mais confortável */
    }
    
    /* Ajusta o cabeçalho para melhor leitura em telas menores */
    .partners-tab-header h2 {
        font-size: 2rem; /* Reduz um pouco o título principal */
    }

    .partners-tab-header p {
        font-size: 1.1rem; /* Reduz o parágrafo */
    }
}
         /* --- Seção Níveis e Benefícios (Accordion) --- */
         .program-levels-section {
             padding: 80px 0;
             background-color: var(--cor-fundo-pagina);
         }

         .benefits-accordion {
             max-width: 900px;
             margin: 40px auto;
         }

         .benefits-accordion .accordion-item {
             border: 1px solid #dee2e6;
             border-radius: 12px;
             margin-bottom: 15px;
             overflow: hidden;
             background-color: #fff;
             transition: border-color 0.3s ease;
         }

         .benefits-accordion .accordion-item.active {
             border-color: var(--cor-roxo-go);
         }

         .benefits-accordion .accordion-header {
             background-color: transparent;
             padding: 20px;
             width: 100%;
             border: none;
             text-align: left;
             font-size: 18px;
             font-weight: 600;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: space-between;
             transition: background-color 0.3s ease;
         }

         .benefits-accordion .accordion-header:hover {
             background-color: #f8f9fa !important;
         }
         
         .benefits-accordion .accordion-header span {
             font-family: var(--fonte-titulo);
             color: var(--cor-texto-cabecalho);
             text-transform: none;
             margin: 0;
         }

         .benefits-accordion .accordion-header img {
             height: 40px;
             margin-right: 15px;
         }

         .benefits-accordion .accordion-header .icon-toggle {
             font-size: 24px;
             font-weight: 300;
             transition: transform 0.3s;
             color: var(--cor-roxo-go);
         }

         .benefits-accordion .accordion-content {
             padding: 0 30px;
             max-height: 0;
             overflow: hidden;
             transition: max-height 0.4s ease-out, padding 0.4s ease-out;
         }
         
         .benefits-accordion .accordion-item.active .accordion-content {
             padding: 0px 30px 20px 30px;
         }

         .benefits-accordion .accordion-content ul {
             list-style-type: '✓  ';
             padding: 10px 0 20px 20px;
         }

         .benefits-accordion .accordion-content ul li {
             margin-bottom: 10px;
             color: var(--cor-texto-corpo);
         }

        

         /* --- Área de Afiliados com Destaque --- */

         /* Adiciona uma margem invisível no topo dos elementos alvo */
         /* Adiciona uma margem invisível no topo dos elementos alvo */
            #affiliate-section,
            #gopartner-section,
            #partner-form {
                scroll-margin-top: 140px; /* 90px do header + 50px de respiro */
            }

         .affiliate-section {
             background-color: #f7f2ff;
           
             
             padding: 80px 0;
         }

         .affiliate-content {
             max-width: 800px;
             margin: 0 auto;
             text-align: center;
         }

         .affiliate-benefits-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 30px;
             margin-top: 30px;
             margin-bottom: 40px;
             text-align: center;
         }

         .affiliate-benefits-grid .benefit-card-small {
             background-color: #fff;
             padding: 30px 25px;
             border-radius: 12px;
             border: 1px solid #dee2e6;
         }

         .affiliate-benefits-grid .benefit-card-small i {
             color: var(--cor-roxo-go);
             font-size: 32px;
             margin-bottom: 15px;
             display: block;
         }

         .affiliate-benefits-grid .benefit-card-small h4 {
             font-family: var(--fonte-titulo);
             font-size: 18px;
             margin-bottom: 10px;
             color: var(--cor-texto-cabecalho);
         }
         
         /* --- Seção do Formulário --- */
         .partner-form-section {
             background-color: var(--cor-fundo-dark);
            color: var(--cor-branco);
            padding: 6rem 1rem;
            position: relative;
            overflow: hidden;

            /* Padrão de grid (copiado do hero) */
            background-image: 
                linear-gradient(var(--cor-grid-dark) 1px, transparent 1px),
                linear-gradient(90deg, var(--cor-grid-dark) 1px, transparent 1px);
            background-size: 50px 50px;

         }
         .partner-form-section .section-title h2,
         .partner-form-section .section-title p {
             color: var(--cor-branco);
         }
         
         /* --- Responsividade --- */
         @media (max-width: 992px) {
             .new-hero-grid {
                 grid-template-columns: 1fr;
                 text-align: center;
             }
             .new-hero-image {
                 grid-row: 1;
                 margin-bottom: 40px;
             }
             .hero-buttons {
                 justify-content: center;
             }
             .nav-list, .nav-buttons {
                 display: none;
             }
             .nav-toggle {
                 display: block;
             }
         }

         @media (max-width: 768px) {
             .new-hero-content h1 {
                 font-size: 36px;
             }
             .new-hero-content p {
                 font-size: 16px;
             }
             .hero-buttons {
                 flex-direction: column;
                 align-items: center;
                 width: 100%;
             }
             .hero-buttons .btn {
                 width: 100%;
                 max-width: 320px;
             }
             .affiliate-benefits-grid {
                 grid-template-columns: 1fr;
             }
         }
/* ==========================================================================
   RESPONSIVIDADE (ATUALIZADA COM NOVAS VARIAVEIS)
   ========================================================================== */
@media (max-width: 992px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .affiliate-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .partner-levels-table-desktop {
        display: none;
    }

    .partner-levels-accordion-mobile {
        display: block;
    }

    .partner-levels-accordion-mobile .accordion-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        background-color: var(--cor-fundo-pagina);
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.8rem 1rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        font-weight: 600;
        color: var(--cor-texto-cabecalho);
        transition: background-color 0.2s ease;
    }

    .partner-levels-accordion-mobile .accordion-header:hover {
        background-color: #f0f2f5;
    }

    .partner-levels-accordion-mobile .accordion-header img {
        height: 40px;
        width: auto;
    }

    .partner-levels-accordion-mobile .accordion-content {
        background-color: var(--cor-branco);
        border: 1px solid #e2e8f0;
        border-top: none;
        border-radius: 0 0 8px 8px;
        margin-bottom: 1rem;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease-out;
    }

    .partner-levels-accordion-mobile .accordion-content.active {
        max-height: 500px;
    }

    .partner-levels-accordion-mobile .accordion-content ul {
        padding: 0.5rem 1.5rem 1.5rem 2.5rem;
        list-style-type: '✓  ';
        color: var(--cor-texto-corpo);
    }

    .partner-levels-accordion-mobile .accordion-content li {
        padding-left: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 768px) {
    .partner-hero-section h1 {
        font-size: 2.2rem;
    }

    .value-prop-section p {
        font-size: 1.1rem;
    }

    .partner-form .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .partner-form {
        padding: 1.8rem;
    }

    .section-title h2 {
        font-size: 2rem;
    }

    .section-title p {
        font-size: 1.1rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .partner-form .choice-group {
        flex-direction: column;
        gap: 0.8rem;
    }
}

@media (max-width: 576px) {
    .affiliate-steps {
        grid-template-columns: 1fr;
    }

    .partner-form {
        padding: 1.5rem;
    }

    .partner-form .btn-cta {
        padding: 1rem;
        font-size: 1.1rem;
    }

    .partner-hero-section {
        padding: 3rem 1rem;
    }

    .partner-hero-section h1 {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS DA PÁGINA DE CONTATO
   ========================================================================== */
.contact-hero-wrapper {
    max-width: 95%;
    margin: 0rem auto;
    border-radius: 25px;
    overflow: hidden;
}

.contact-hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("/wp-content/uploads/2025/11/6_Banner_Contato.png");
    background-size: cover;
    background-position: center;
    padding: 5rem 2rem;
    text-align: center;
    color: var(--cor-branco);
    display: flex;
    height: 80vh;
    justify-content: center;
    align-items: center;
}

.contact-hero-section h1 {
    font-size: 3rem;
    font-weight: 700;
}

.contact-hero-section p {
    font-size: 1.1rem;
    margin-top: 1rem;
}

.contact-main-section {
    padding: 4rem 1rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    background-color: var(--cor-branco);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.contact-info h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--cor-texto-cabecalho);
}

.contact-info p {
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 1.1rem !important;
}

.contact-info span{
    font-size: 1.1rem !important;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-item i {
    font-size: 1.2rem;
    color: var(--cor-primaria);
    width: 25px;
    text-align: center;
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: var(--fonte-principal);
    font-size: 1.1rem;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
}

.contact-form button {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    border: none;
    
}

.contact-form button:hover{
    border: 2px solid #0EDCCE;
}

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 992px) {
   

    .nav-mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 320px;
        height: 100%;
        background-color: var(--cor-branco);
        z-index: 1050;
        padding: 2rem;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: right 0.4s ease-in-out;
    }

    .nav-mobile-menu.show-menu {
        right: 0;
    }

    .nav-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3rem;
    }

    .nav-close {
        display: block;
    }

    .nav-mobile-list {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }

    .nav-mobile-link {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--cor-texto-cabecalho);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-links {
        border: none;
        padding: 0;
        justify-content: center;
    }

    .footer-socials {
        justify-content: center;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .footer-links {
        flex-direction: column;
    }

    .contact-grid {
        padding: 2rem 1.5rem;
    }
}

/* Container de largura máxima */
.layout__container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* Seção de Diferenciais (Contêiner Flex) */
.diferenciais__section {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 40px 0;
}

/* Colunas (organizem os boxes verticalmente) */
.diferenciais__coluna {
    display: flex;
    flex-direction: column;  
    gap: 20px;
    flex: 1;
}

/* Estilos de base para todos os boxes (card) */
.card__box {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    max-width: 800px;
    border-radius: 15px;
    background-color: white;
    padding: 20px 40px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

/* Estilo para o título dentro dos boxes */
.card__title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2C2D3A;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

/* Efeito ao passar o mouse (hover) */
.card__box:hover {
    transform: translateY(-5px);  
    box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px;  
    background-color: #2C2D3A; 
    color: #FFFFFF; 
    background-image: none;
}

.card__box:hover .card__title {
    color: var(--cor-branco); /* ALTERADO */
}

/* Classes de Variação (Modificadores) para Imagens e Padding */
.card__box--protecao {
    padding-top: 80px;
    padding-bottom: 80px;
    background-image: url(/wp-content/uploads/2025/11/box1.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

.card__box--performance {
    background-image: url(/wp-content/uploads/2025/11/box2.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 80px;
}

.card__box--suporte {
    background-image: url(/wp-content/uploads/2025/11/box3.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 80px;
}

.card__box--compliance {
    background-image: url(/wp-content/uploads/2025/11/box4.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 80px;
}

.card__box--granularidade {
    background-image: url(/wp-content/uploads/2025/11/box5.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 80px;
}

.card__box--custo {
    padding-top: 80px;
    padding-bottom: 80px;
    background-image: url(/wp-content/uploads/2025/11/box6.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ==========================================================================
   NOVA ESTILIZAÇÃO PARA A SEÇÃO DE GRANDES NÚMEROS (ESTILO CTA)
   ========================================================================== */
.big-numbers-cta-style {
    background-color: transparent;
    padding: 4rem 1rem;
    position: relative;
    margin-bottom: -100px;
    z-index: 999;
}

.big-numbers-card {
  
    background-size: cover;
    background-position: center;
    color: var(--cor-branco);
    text-align: center;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.big-numbers-card .number-item .description {
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS DA PÁGINA INTERNA DE CASE
   ========================================================================== */

/* --- Hero Section do Case --- */
.case-study-hero-wrapper {
    max-width: 95%;
    margin: 2rem auto;
    border-radius: 25px;
    overflow: hidden;
}

.case-study-hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("/wp-content/uploads/2025/11/Planos/banner2.png");
    background-size: cover;
    background-position: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--cor-branco);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
}

.case-study-logo {
    max-height: 120px;
    width: auto;
    margin-bottom: 0rem;
    filter: brightness(0) invert(1);
}

.interna-hero-case{
    padding: 3rem !important;
}

.case-study-hero-section h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.case-study-hero-section p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

/* --- Conteúdo Principal e Grid --- */
.case-study-content {
    padding: 4rem 1rem;
}

.case-study-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
}

.case-study-main h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.case-study-main h2:first-child {
    margin-top: 0;
}

.case-study-main p, .case-study-main ul {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--cor-texto-corpo);
    margin-bottom: 1rem;
}

.case-study-main ul {
    list-style-position: inside;
    list-style-type: '✓  ';
    padding-left: 0.5rem;
}

/* --- Barra Lateral (Sidebar) --- */
.case-study-sidebar {
    position: sticky;
    top: 120px;
    align-self: start;
}

.sidebar-card {
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.sidebar-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.sidebar-card .info-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.sidebar-card .info-item i {
    color: var(--cor-primaria);
    font-size: 1.1rem;
}

/* Card de resultados */
.results-card .result-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.results-card .result-item i {
    font-size: 2rem;
    color: var(--cor-primaria);
    width: 40px;
    text-align: center;
}

.results-card .result-item strong {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    display: block;
}

.results-card .result-item span {
    font-size: 0.9rem;
    color: var(--cor-texto-corpo);
}

/* --- Seção de Depoimento --- */
.testimonial-section-case {
    background-color: #f8f9fa;
    padding: 4rem 1rem;
    text-align: center;
}

.testimonial-section-case blockquote {
    max-width: 800px;
    margin: 0 auto;
    border-left: 4px solid var(--cor-primaria);
    padding-left: 2rem;
    text-align: left;
}

.testimonial-section-case blockquote p {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--cor-texto-cabecalho);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.testimonial-section-case blockquote footer {
    font-size: 1.1rem;
    font-style: normal;
    color: var(--cor-texto-corpo);
}

/* --- CTA Final --- */
.final-cta-section {
    padding: 5rem 1rem;
    background-color: var(--cor-branco);
}
.final-cta-section .final-cta-card {
    margin-top: 0;
}


/* --- Responsividade para a Página de Case --- */
@media (max-width: 992px) {
    .case-study-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .case-study-sidebar {
        position: static;
    }

    .big-numbers-card{
        background-image: none;
        margin-bottom: 100px;
        margin-top: 100px;
    }
}

@media (max-width: 768px) {
    .case-study-hero-section h1 {
        font-size: 2.2rem;
    }
    .case-study-hero-section {
        min-height: auto;
        padding: 3rem 1rem;
    }
}

/* ESTILOS ESPECÍFICOS DA PÁGINA DE PARCEIROS */
.value-prop-section {
    padding: 3rem 1rem;
    text-align: center;
    background-color: var(--cor-branco);
}

.value-prop-section .section-subtitle-go {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 1.5rem;
    display: block;
}

.value-prop-section .section-subtitle-go .highlight-gopartner {
    color: var(--cor-roxo-go);
    font-weight: 700;
}

.value-prop-section p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--cor-texto-corpo);
    margin-bottom: 3rem;
}

/* Responsividade para a nova seção */
@media (max-width: 768px) {
    .value-prop-section {
        padding: 2.5rem 1rem;
        margin-bottom: 1.5rem;
    }
    .value-prop-section .section-subtitle-go {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    .value-prop-section p {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }
}

/* Programa de Afiliados */
.affiliate-section {
    padding: 1rem 1rem;
    background-color: var(--cor-branco);
}
.affiliate-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.affiliate-content h2 {
    font-size: 2.2rem;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 1rem;
}
.affiliate-content p { 
    margin-bottom: 2rem;
}

.span-forms-part{
    color: white !important;
}

.affiliate-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 3rem 0;
    text-align: left;
}
.step-item {
    background-color: var(--cor-fundo-pagina);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px var(--cor-sombra);
    transition: transform 0.2s ease;
}
.step-item:hover {
    transform: translateY(-3px);
}
.step-item span {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    display: block;
    margin-bottom: 0.8rem;
}

.affiliate-disclaimer {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-texto-cabecalho);
    margin-top: 3rem;
    margin-bottom: 3rem;
    line-height: 1.5;
}

.affiliate-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 2.5rem;
}


.affiliate-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
    justify-content: center;
}

.benefit-card-small {
    background-color: var(--cor-branco);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card-small:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid #0EDCCE; 
}

.benefit-card-small i {
    font-size: 3rem;
    color: var(--cor-roxo-go);
    margin-bottom: 1.5rem;
}

.benefit-card-small p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--cor-texto-corpo);
    margin: 0;
}

.affiliate-cta-btn {
    background-color: var(--cor-roxo-go);
    color: var(--cor-branco);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 2rem;
    display: inline-block;
    text-decoration: none;
}

.affiliate-cta-btn:hover {
    box-shadow: 0 4px 20px rgba(var(--cor-roxo-go-rgb-r), var(--cor-roxo-go-rgb-g), var(--cor-roxo-go-rgb-b), 0.5);
    transform: translateY(-3px);
}

@media (max-width: 992px) {
    .affiliate-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .affiliate-benefits-grid {
        grid-template-columns: 1fr;
    }
    .affiliate-cta-btn {
        width: 80%;
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .affiliate-steps {
        grid-template-columns: 1fr;
    }
    .affiliate-disclaimer {
        font-size: 0.9rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .affiliate-content h3 {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    .benefit-card-small i {
        font-size: 2.5rem;
    }
    .benefit-card-small p {
        font-size: 0.9rem;
    }
    .affiliate-cta-btn {
        width: 100%;
        padding: 0.8rem 1.5rem;
        font-size: 1.1rem;
    }

    .monitor-visual-image{
        margin-top: 50px !important;
    }
}

@media (max-width: 576px) {
    .affiliate-section {
        padding: 3rem 1rem;
    }
}

.partner-hero-section .hero-content {
    
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.clients-cta-wrapper {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.program-levels-cta-wrapper {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 4rem;
}


@media (max-width: 768px) {
    .clients-cta-wrapper,
    .program-levels-cta-wrapper {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 576px) {
    .btn-partner-hero,
    .clients-cta-wrapper .btn, 
    .program-levels-cta-wrapper .btn {
        width: 100%;
        padding: 1rem;
        font-size: 1.1rem;
    }
}

.partner-hero-section .hero-content {
    
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.partner-hero-buttons {
    display: flex;
    gap: 1.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-partner-hero {
    background-color: var(--cor-roxo-go);
    color: var(--cor-branco);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
}
.btn-partner-hero:hover {
    box-shadow: 0 4px 20px rgba(var(--cor-roxo-go-rgb-r), var(--cor-roxo-go-rgb-g), var(--cor-roxo-go-rgb-b), 0.5);
    transform: translateY(-3px) !important;
}




.welcome-partner-section {
    padding: 4rem 1rem;
    background-color: var(--cor-branco);
}

.welcome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.welcome-gopartner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.gopartner-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 1.5rem;
}

.welcome-gopartner p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--cor-texto-corpo);
    margin-bottom: 1rem;
}

.welcome-image img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.advantages-partner-section {
    padding: 5rem 1rem;
    background-color: var(--cor-fundo-pagina);
}

.advantages-partner-section .section-title span {
    color: var(--cor-roxo-go);
    text-transform: uppercase;
}

.advantages-partner-section .section-title h2 {
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.advantages-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.advantage-item i {
    font-size: 2.5rem;
    color: var(--cor-roxo-go);
    flex-shrink: 0;
    padding-top: 5px;
}

.advantage-item h4 {
    font-size: 1.2rem;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.advantage-item p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--cor-texto-corpo);
}

.additional-info {
    text-align: center;
    max-width: 700px;
    margin: 4rem auto 0 auto;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--cor-texto-corpo);
    font-weight: 500;
}

@media (max-width: 992px) {
    .partner-hero-section h1 {
        font-size: 2.5rem;
    }
    .partner-hero-section p {
        font-size: 1.1rem;
    }

    .welcome-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .welcome-gopartner {
        align-items: center;
        text-align: center;
    }
    .welcome-gopartner p {
        text-align: center;
    }

    .gopartner-logo {
        margin: 0 auto 1.5rem auto;
    }

    .advantages-list {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .advantage-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .advantage-item i {
        margin-bottom: 0.8rem;
    }

    .advantage-item h4,
    .advantage-item p {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .partner-hero-section {
        padding: 4rem 1rem;
    }
    .partner-hero-section h1 {
        font-size: 2rem;
    }
    .partner-hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
    }
    .btn-partner-hero {
        width: 100%;
        font-size: 1.1rem;
        padding: 0.8rem 1.5rem;
    }

    .welcome-partner-section {
        padding: 3rem 1rem;
    }
    .advantages-partner-section {
        padding: 4rem 1rem;
    }
    .advantages-partner-section .section-title h2 {
        font-size: 1.8rem;
    }
    .additional-info {
        font-size: 0.95rem;
        margin-top: 3rem;
    }
}

@media (max-width: 576px) {
    .partner-hero-section h1 {
        font-size: 1.8rem;
    }
    .partner-hero-section p {
        font-size: 0.9rem;
    }
}

.partner-form-section {
      background-color: var(--cor-fundo-dark);
            color: var(--cor-branco);
            padding: 6rem 1rem;
            position: relative;
            overflow: hidden;

            /* Padrão de grid (copiado do hero) */
            background-image: 
                linear-gradient(var(--cor-grid-dark) 1px, transparent 1px),
                linear-gradient(90deg, var(--cor-grid-dark) 1px, transparent 1px);
            background-size: 50px 50px;

}

.partner-form-section .section-title h2,
.partner-form-section .section-title p {
    color: var(--cor-branco);
}

.partner-form {
    max-width: 800px;
    margin: 3rem auto 0;
    background-color: var(--cor-branco);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.partner-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.partner-form .form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.partner-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.6rem;
    font-size: 1.1rem;
    color: var(--cor-texto-cabecalho);
}

.partner-form input[type="text"],
.partner-form input[type="tel"],
.partner-form input[type="email"],
.partner-form textarea {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: var(--fonte-principal);
    font-size: 1.1rem;
    color: var(--cor-texto-cabecalho);
    background-color: var(--cor-branco);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.partner-form input:focus,
.partner-form textarea:focus {
    outline: none;
    border-color: var(--cor-roxo-go, #8A2BE2);
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}

.partner-form textarea {
    resize: vertical;
    min-height: 120px;
}

.partner-form .choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
    margin-top: 0.8rem;
}

.partner-form .choice-group label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--cor-texto-corpo);
}

.partner-form input[type="radio"] {
    appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    display: grid;
    place-content: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.partner-form input[type="radio"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--cor-roxo-go, #8A2BE2);
}

.partner-form input[type="radio"]:checked {
    border-color: var(--cor-roxo-go, #8A2BE2);
}

.partner-form input[type="radio"]:checked::before {
    transform: scale(1);
}

.partner-form .btn-cta, 
.partner-form button[type="submit"] {
    background-color: var(--cor-roxo-go, #8A2BE2);
    color: var(--cor-branco);
    padding: 1rem 1.5rem;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.partner-form .btn-cta:hover,
.partner-form button[type="submit"]:hover {
    filter: brightness(1.1);
    transform: translateY(-3px);
}

.partner-form .spam-promise {
    text-align: center;
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .partner-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .partner-form {
        padding: 1.8rem;
    }
}

/* ==========================================================================
   ESTILOS PARA AS ABAS DE CATEGORIAS DE PRODUTOS
   ========================================================================== */

/* Container dos botões de categoria */
.product-categories {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap; /* Permite que os botões quebrem a linha em telas menores */
}

/* Estilo individual dos botões de categoria */
.category-btn {
    padding: 10px 25px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-branco);
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Efeito hover para os botões */
.category-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--cor-branco);
}

/* Estilo do botão ATIVO */
.category-btn.active {
    background-color: var(--cor-branco);
    color: var(--cor-primaria); /* Cor escura para o texto */
    border-color: var(--cor-branco);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Painel de conteúdo de cada categoria */
.category-panel {
    display: none; /* Oculta todos os painéis por padrão */
    animation: fadeIn 0.6s ease; /* Animação suave de entrada */
}

/* Mostra o painel que tem a classe 'active' */
.category-panel.active {
    display: block;
}

/* Keyframe para a animação de fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajuste para garantir que o grid dentro de um painel ativo funcione */
.category-panel.active .products-grid-home-override {
    display: grid; /* Mantém o layout de grid que você já tinha */
}

/* ==========================================================================
   SOLUÇÃO FINAL: Polígono Full-Bleed com Conteúdo Contido via CSS Grid
   ========================================================================== */

/* 1. A SECTION: Agora é um container GRID.
      - Criamos 3 colunas: uma central com a largura do seu site (1100px)
        e duas laterais flexíveis que preenchem o resto da tela.
      - O fundo preto e as linhas decorativas se aplicam à seção inteira. */
.products-section.home-products-material-style {
    position: relative;
    display: grid; /* MUDANÇA IMPORTANTE */
    grid-template-columns: 1fr minmax(0, 1100px) 1fr; /* Colunas: [lateral] [centro] [lateral] */
    background-color: #111217;
    padding: 6rem 0; /* Padding vertical, sem padding lateral na seção */
    overflow: hidden;
}

/* As linhas decorativas continuam no fundo, ocupando a LARGURA TOTAL */
.products-section.home-products-material-style::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-size: cover;
    background-position: bottom center;
    opacity: 0.1;
    z-index: 1;
}

/* 2. A FORMA DE POLÍGONO: Criada com ::before na SECTION.
      - Por estar na section, ela também ocupa a LARGURA TOTAL da tela.
      - Fica posicionada no topo, por trás do conteúdo. */
.products-section.home-products-material-style::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* LARGURA TOTAL */
    height: 350px; /* Altura da forma, do topo à ponta */
    background-color: #21232B;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    z-index: 2; /* Fica na frente das linhas, mas atrás do conteúdo */
}


/* 3. O CONTAINER: Agora ele é um item do GRID.
      - A regra 'grid-column: 2' força o container e TODO o seu conteúdo
        a ficar APENAS na coluna central de 1100px.
      - Ele é transparente e serve apenas para agrupar e posicionar. */
.products-section.home-products-material-style .container {
    grid-column: 2 / 3; /* MANDA O CONTAINER FICAR NA COLUNA CENTRAL */
    position: relative;
    z-index: 3; /* Fica na frente de tudo */
    width: 100%;
    text-align: center;
    /* Adicionamos padding para alinhar o conteúdo verticalmente com a forma */
   
}


/* 4. ESTILOS DO CONTEÚDO (Idênticos aos da imagem)
      - Nenhuma mudança drástica aqui, apenas ajustes finos. */

.products-section.home-products-material-style .section-title {
    margin-bottom: 3rem;
}
.products-section.home-products-material-style .span-soluction-material {
    color: #A0AEC0;
}
.products-section.home-products-material-style .material-h2 {
    color: #FFFFFF;
    font-size: 2.5rem;
    margin: 0.5rem 0 1rem 0;
}
.products-section.home-products-material-style .material-p {
    color: #A0AEC0;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 550px;
    margin: 0 auto;
}

.products-section.home-products-material-style .product-categories {
    margin-bottom: 3rem;
}
.products-section.home-products-material-style .category-btn {
    background-color: transparent;
    color: #E2E8F0;
    border: 2px solid #0EDCCE;
    border-radius: 25px;
    padding: 10px 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.products-section.home-products-material-style .category-btn:hover {
    background-color: #2D3748;
}
.products-section.home-products-material-style .category-btn.active {
    background-color: #FFFFFF;
    color: #1A202C;
    border-color: #FFFFFF;
}

.products-section.home-products-material-style .material-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.products-section.home-products-material-style .material-card {
    background-color: #2D3748;
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
}
.products-section.home-products-material-style .products-footer {
    display: none;
}


/* --- RESPONSIVIDADE --- */
@media (max-width: 1140px) { /* Ajuste para o grid */
    .products-section.home-products-material-style {
        /* Nas laterais, usamos padding em vez de colunas de grid */
        grid-template-columns: 1fr;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .products-section.home-products-material-style .container {
        grid-column: 1 / -1; /* Ocupa a única coluna */
    }
}

@media (max-width: 768px) {
    .products-section.home-products-material-style .material-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ESTILOS PARA A NOVA TABELA DE BENEFÍCIOS SANFONADA
   ========================================================================== */

/* Container principal da tabela */
.benefits-table {
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    background-color: #FFFFFF;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

/* Linha do cabeçalho com os logos */
.table-header-row {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr; /* 1ª coluna para o texto, as outras 4 para os logos */
    background-color: #F8F9FA;
    padding: 1rem;
    border-bottom: 1px solid #E2E8F0;
}

.header-cell-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-cell-logo img {
    max-height: 60px;
    width: auto;
}

/* Estilo do cabeçalho de cada grupo da sanfona */
.accordion-table-header {
    width: 100%;
    background-color: #F8F9FA;
    padding: 1.25rem 1.5rem;
    border: none;
    border-top: 1px solid #E2E8F0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho, #2C2D3A);
    transition: background-color 0.3s ease;
}

.accordion-table-header:hover {
    background-color: #F1F5F9;
}

.accordion-table-header .icon-toggle {
    font-size: 1.8rem;
    font-weight: 300;
    transition: transform 0.4s ease;
}

.accordion-table-header.active .icon-toggle {
    transform: rotate(90deg);
}

/* Conteúdo sanfonado (linhas de benefícios) */
.accordion-table-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

/* Linha de um benefício específico */
.benefit-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /* Mesma estrutura de colunas do cabeçalho */
    align-items: center;
    border-top: 1px solid #F1F5F9;
    padding: 1rem;
}

.benefit-row:first-child {
    border-top: none;
}

.benefit-description {
    padding-right: 1rem;
    font-weight: 500;
    color: var(--cor-texto-corpo, #4A5568);
}

.check-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px; /* Garante alinhamento mesmo quando vazio */
   
}

.check-cell img {
    max-width: 24px;
    height: auto;
}

.icon-check{
    color: #0EDCCE;
}

/* --- Responsividade para a tabela --- */
@media (max-width: 768px) {
    .benefits-table {
        border: none;
        box-shadow: none;
        background-color: transparent;
    }

    .table-header-row {
        display: none; /* Esconde o cabeçalho de logos em telas pequenas */
    }

    .accordion-table-header {
        font-size: 1.1rem;
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid #E2E8F0;
        background-color: #FFFFFF;
        box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    }
    
    .accordion-group {
        margin-bottom: 1rem;
    }

    .accordion-table-header.active {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
    }

    .accordion-table-content {
        border: 1px solid #E2E8F0;
        border-top: none;
        border-radius: 0 0 8px 8px;
        background-color: #FFFFFF;
        padding-bottom: 0.5rem;
    }

    .benefit-row {
        grid-template-columns: 2fr repeat(4, 1fr); /* Mantém estrutura no tablet */
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    /* Transforma cada linha em um card no celular */
    .benefit-row {
        grid-template-columns: 1fr; /* Uma única coluna */
        gap: 0.75rem;
        padding: 1rem;
        text-align: center;
    }

    .benefit-description {
        padding: 0;
        font-size: 1.1rem;
    }

    .check-cell {
        height: auto;
        padding: 0.25rem 0;
        border-top: 1px dashed #E2E8F0;
        position: relative;
    }

    .check-cell:before {
        content: attr(data-level); /* Adiciona o nome do nível */
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #718096;
    }

    .check-cell img {
        margin: 0 auto; /* Centraliza o check */
    }
}

.hero-sanfona{
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

/* ==========================================================================
   ESTILOS PARA A LISTA DE FUNCIONALIDADES DOS PLANOS
   ========================================================================== */

/* Remove o estilo antigo da lista que você me passou */
.pricing-card-new .features-list li::before {
    content: none;
}

/* Prepara a lista para receber os novos ícones */
.pricing-card-new .features-list {
    list-style: none; /* Garante a remoção dos marcadores padrão */
    padding: 0;
    text-align: left;
}

.pricing-card-new .features-list li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espaço entre o ícone e o texto */
    line-height: 1.4;
}

/* Estilo comum para os ícones que vamos adicionar */
.pricing-card-new .features-list li::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif; /* Garante compatibilidade */
    font-weight: 900; /* Estilo sólido (preenchido) do Font Awesome */
    font-size: 1.1rem;
    width: 20px; /* Alinha os textos, mesmo com ícones de larguras diferentes */
    text-align: center;
}

/* Define o ícone de CHECK para funcionalidades inclusas */
.pricing-card-new .features-list .feature-included::before {
    content: "\f00c"; /* Código Unicode do ícone 'check' no Font Awesome */
    color: #28a745;   /* Verde */
}

/* Define o ícone de X para funcionalidades NÃO inclusas */
.pricing-card-new .features-list .feature-excluded::before {
    content: "\f00d"; /* Código Unicode do ícone 'xmark' (xis) no Font Awesome */
    color: #dc3545;   /* Vermelho */
}

/* Estiliza o texto das funcionalidades não inclusas */
.pricing-card-new .features-list .feature-excluded {
    color: #a0aec0; /* Deixa o texto cinza e mais apagado */
    text-decoration: line-through; /* Tacha o texto */
}


/*
 * ======================================================
 * CSS DA SEÇÃO DE SCROLL INTERATIVO
 * ======================================================
 */
.scroll-story-section {
    position: relative;
    
    /* A altura é controlada pelo JavaScript para melhor ajuste */
}
.scroll-story-container {
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.story-graphics-column { position: relative; width: 100%; height: 100%; }
.graphic-scene {
    position: absolute; top: 0; left: 10rem; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.graphic-scene.active { opacity: 1; visibility: visible; transition-delay: 0s; }
.story-graphic-bg, .story-graphic-fg { position: absolute; min-width: 100%; max-height: 100%; object-fit: contain;  }
.story-graphic-fg { z-index: 1; }
.story-accordion-column { display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.accordion-item { width: 100%; background-color: transparent; border: none; border-radius: 30px; transition: all 0.4s ease-out; }

.accordion-header {
    width: 100%; background: #fff; border: 1px solid #EBEBEB;
    border-radius: 8px; padding: 15px 30px; font-size: 1.1rem;
    font-weight: 500; color: #333; display: flex;
    justify-content: space-between; align-items: center; text-align: left;
    position: relative; z-index: 2; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease-out;
}




.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out 0.1s, visibility 0s linear 0.5s; visibility: hidden; }
.accordion-item.active .accordion-content { max-height: 1200px; visibility: visible; }
.content-box { padding: 25px 0px 0px 10px; position: relative; }
.content-box p { background-color: #fff; border: 2px solid #00E2D6; border-radius: 12px; padding: 20px; margin: 0; color: #333; line-height: 1.6; }
.content-connector {
    position: absolute; top: -1px; right: 28px; transform: translateX(50%);
    z-index: 1; width: 42px; height: 26px; opacity: 0;
    transition: opacity 0.4s ease-out;
}
.accordion-item.active .content-connector { opacity: 1; }
.accordion-icon {
    position: relative; width: 28px; height: 28px; flex-shrink: 0;
    margin-left: 15px; border: 1px solid #ddd; border-radius: 50%;
    transition: all 0.3s ease;
}
.accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; background-color: #888; transition: all 0.3s ease; top: 50%; left: 50%; }
.accordion-icon::before { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.accordion-icon::after { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.accordion-item.active .accordion-icon { background-color: #00E2D6; border-color: #00E2D6; transform: rotate(180deg); }
.accordion-item.active .accordion-icon::before { opacity: 0; }
.accordion-item.active .accordion-icon::after { background-color: #fff; }

@media (max-width: 992px) {
    .scroll-story-container { grid-template-columns: 1fr; grid-template-rows: 40vh auto; gap: 20px; }
    .story-graphics-column { order: 1; }
    .story-accordion-column { order: 2; justify-content: flex-start; }
}

/*
 * ======================================================
 * EFEITO DE LEVITAÇÃO INFINITO
 * =.====================================================
 */

/* 1. Define a animação */
@keyframes levitate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); /* Move o elemento 15px para cima */
  }
  100% {
    transform: translateY(0);
  }
}

/* 2. Aplica a animação à imagem de primeiro plano (o cadeado/ícone) */
.story-graphic-bg {
  animation: levitate 6s ease-in-out infinite;
}

/* style.css */

/* ==========================================================================
   INÍCIO: Estilos do Slider de Cases em Destaque
   ========================================================================== */

.featured-cases-section{ 
    padding-top: 50px;
}

/* Título da nova seção */
.section-title-featured {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Container principal do slider */
.featured-slider {
    position: relative;
    width: 100%;
    max-width: 900px; /* Largura máxima do slider */
    margin: 0 auto;
    overflow: hidden; /* Essencial para o efeito de slide */
    padding-top: 50px ;
}

/* Faixa que contém os slides */
.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Animação da transição */
}

/* Cada slide individual */
.slider-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 0 1rem; /* Espaçamento lateral entre os slides */
}

.featured-case-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza horizontalmente os itens flex (img, link) */
    text-align: center;  /* Centraliza o texto do parágrafo */
    padding: 3rem 2rem;  /* Espaçamento interno confortável */
}

/* Garante que a logo tenha uma margem inferior correta */
.featured-case-card .case-logo {
    margin: 0 auto 1.5rem auto;
    display: block;
}

/* Força o link "Saiba Mais" a ficar no centro APENAS nos cards destaque */
.featured-case-card .link-saiba-mais {
    align-self: center !important; /* Sobrescreve o align-self: flex-start padrão */
    margin-top: 1.5rem;
}

.featured-case-card .case-title {
    font-size: 1.5rem; /* Título maior */
}

.featured-case-card .case-description {
    font-size: 1.05rem;
    max-width: 500px; /* Limita a largura do texto */
    margin: 0 auto 2rem auto;
}

.featured-case-card .case-link {
    align-self: center; /* Centraliza o link */
}


/* Navegação por pontos */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 2rem;
}

.slider-dots .dot {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-dots .dot:hover {
    background-color: #aaa;
}

/* Ponto ativo (slide atual) */
.slider-dots .dot.active {
    background-color: var(--cor-primaria);
}


/* --- Responsividade do Slider --- */
@media (max-width: 768px) {
    .section-title-featured {
        font-size: 1.8rem;
    }

    .graphic-scene {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

    .slider-slide {
        padding: 0 0.5rem;
    }

    .featured-case-card {
        padding: 2rem;
    }
}
/* ==========================================================================
   FIM: Estilos do Slider de Cases em Destaque
   ========================================================================== */


   /* ==========================================================================
     ESTILOS: Nova Seção de Acesso Rápido
     ========================================================================== */

/* 1. Container Principal da Seção */
/* Define o espaçamento vertical e uma cor de fundo para destacar a área. */
.acesso-rapido-section {
    padding: 4rem 1rem;
    background-color: var(--cor-fundo-pagina, #f8f9fa); /* Usa a variável de fundo ou um cinza claro */
}

/* 2. Cabeçalho da Seção (Títulos) */
/* Centraliza e estiliza o título e o parágrafo. */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cor-texto-cabecalho);
    margin-bottom: 0.5rem;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--cor-texto-corpo);
    max-width: 600px;
    margin: 0 auto; /* Centraliza o parágrafo horizontalmente */
}

/* 3. Grelha dos Botões */
/* Organiza os botões em 4 colunas. */
.acesso-rapido-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* 4. Estilo dos Botões */
/* Aplica o design de botão que criámos anteriormente. */
/* 4. Estilo dos Botões */
.acesso-rapido-card {
background-color: var(--cor-primaria);
border: 1px solid var(--cor-primaria);
border-radius: 12px;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(var(--cor-primaria-rgb-r), var(--cor-primaria-rgb-g), var(--cor-primaria-rgb-b), 0.2);
text-decoration: none; /* Garante que o link não tenha sublinhado */
}

/* Efeito ao passar o rato (AQUI ESTÁ A CORREÇÃO) */
.acesso-rapido-card:hover {
transform: translateY(-8px); /* ALTERADO DE -2px para -8px */
filter: brightness(1.15);
box-shadow: 0 12px 25px rgba(var(--cor-primaria-rgb-r), var(--cor-primaria-rgb-g), var(--cor-primaria-rgb-b), 0.3);
}

/* Ícone dentro do botão */
.acesso-rapido-card i {
    font-size: 2.5rem;
    color: var(--cor-branco);
    margin-bottom: 1rem;
}

/* Texto dentro do botão */
.acesso-rapido-card span {
    font-weight: 600;
    color: var(--cor-branco);
    font-size: 1.1rem;
}


/* --- Media Queries para Responsividade --- */
/* Ajusta a grelha para ecrãs menores */

/* Para tablets (até 992px de largura) */
@media (max-width: 992px) {
    .acesso-rapido-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    }
}

/* Para telemóveis (até 576px de largura) */
@media (max-width: 576px) {
    .acesso-rapido-grid {
        grid-template-columns: 1fr; /* 1 coluna */
    }

    .section-header h2 {
        font-size: 2rem;
    }
}





/* NEW DESIGN */



/* Adicione a classe .header-dark ao seu <header> no HTML */
.header.header-dark {
    background-color: var(--cor-fundo-dark);
    border-bottom: 1px solid var(--cor-grid-dark);
}

/* Ajusta a cor dos links do menu para branco */
.header-dark .nav-logo,
.header-dark .nav-link {
    color: var(--cor-branco);
    font-weight: 500;
}

.header-dark .nav-link:hover {
    color: var(--cor-verde-destaque);
}

/* Ajusta o ícone do menu mobile (caso o tenha) */
.header-dark .nav-toggle {
    color: var(--cor-branco);
}


/* ====================================================
 2. NOVOS ESTILOS DE BOTÃO
 (Para complementar sua classe .btn)
====================================================
*/

input.wpcf7-form-control.wpcf7-submit.has-spinner.btn.btn-solid-green{
    background-color: var(--cor-verde-destaque);
    color: var(--cor-primaria); /* Texto escuro, como na imagem */
    border: 2px solid var(--cor-verde-destaque);
    font-weight: 700;
}

/* Herda o :hover do seu .btn e adiciona o brilho */
input.wpcf7-form-control.wpcf7-submit.has-spinner.btn.btn-solid-green:hover {
    background-color: transparent;
    color: black;
    border-color: var(--cor-verde-destaque);
    box-shadow: 0 4px 20px rgba(14, 220, 206, 0.4) !important; /* Brilho verde */
}

/* Botão Sólido Verde (Principal) */
.btn-solid-green {
    background-color: var(--cor-verde-destaque);
    color: black !important; /* Texto escuro, como na imagem */
    border: 2px solid var(--cor-verde-destaque);
    font-weight: 700;
    font-size: 1.1rem !important;
}

/* Herda o :hover do seu .btn e adiciona o brilho */
.btn-solid-green:hover {
    background-color: transparent;
    color: black;
    border-color: var(--cor-verde-destaque);
    box-shadow: 0 4px 20px rgba(14, 220, 206, 0.4) !important; /* Brilho verde */
}

.btn-solid-green-home {
    background-color: var(--cor-verde-destaque) !important;
    color: black !important; /* Texto escuro, como na imagem */
    border: 2px solid var(--cor-verde-destaque);
    font-weight: 700;
    font-size: 1.1rem;
}

.btn-solid-green-home:hover,
.btn-solid-green-home:focus,
.btn-solid-green-home:active {
    background-color: #0EDCCE !important;
    color: black !important;
    border-color: var(--cor-verde-destaque) !important;
    box-shadow: 0 4px 20px rgba(14, 220, 206, 0.4) !important; /* Brilho verde */
}


/* Botão Vazado Branco (Secundário) */
.btn-outline-white {
    background-color: transparent;
    color: var(--cor-branco);
    border: 2px solid #0EDCCE;
    font-size: 1.1rem !important;
    
}

/* Herda o :hover do seu .btn e adiciona o brilho */
.btn-outline-white:hover,
.btn-outline-white:active,
.btn-outline-white:focus  {
    background-color: var(--cor-branco);
    color: black !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2) !important; /* Brilho branco */
}



/* Botão Vazado Branco (Secundário) */
.more-btn {
    margin-top: 30px;
}


/* ====================================================
 3. SEÇÃO DO HERO BANNER (Novo)
====================================================
*/

.interna-hero{
    max-height: calc(70vh - 90px) !important; /* Altura total (menos o header de 90px) */
      /* Padrão de grid */
    background-color: var(--cor-fundo-dark);
    color: var(--cor-branco);
    padding: 8rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    
    position: relative;
    overflow: hidden; /* Importante para os brilhos */

    /* Padrão de grid */
    background-image: 
        linear-gradient(var(--cor-grid-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--cor-grid-dark) 1px, transparent 1px);
    background-size: 50px 50px; /* Tamanho da célula do grid */
    
}

/* --- ESTA É A CORREÇÃO --- */

/* * Agora esta regra só se aplica a secções de banner
 * que NÃO tenham a classe .interna-hero.
*/
.hero-banner-section:not(.interna-hero) {
    background-color: var(--cor-fundo-dark);
    color: var(--cor-branco);
    padding: 8rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 90px); /* Agora só se aplica à Home */
    position: relative;
    overflow: hidden; 

     /* Padrão de grid */
    background-image: 
        linear-gradient(var(--cor-grid-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--cor-grid-dark) 1px, transparent 1px);
    background-size: 50px 50px; /* Tamanho da célula do grid */

    /* ... etc ... */
}

.hero-banner-container {
    position: relative;
    z-index: 2; /* Fica na frente dos brilhos */
    
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    max-width: 100%;
    margin: 0 auto 1.5rem auto;
    color: white !important;
    text-align: center;
}

.hero-content .highlight-green {
    color: var(--cor-verde-destaque) !important;
}

.hero-content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 650px;
    margin: 0 auto 2.5rem auto;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap; /* Para quebrar em telas menores */
}


/* ====================================================
 4. EFEITOS DE BRILHO (Glow) (Novo)
====================================================
*/

.glow-top-right,
.glow-bottom-left {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    opacity: 0.3; /* Opacidade do brilho */
    filter: blur(150px); /* O "blur" que cria o efeito */
    z-index: 1;
    pointer-events: none; /* Impede que o brilho bloqueie cliques */
}

/* --- ESTA É A PARTE QUE FALTAVA --- */

/**
 * Documentação: Define a cor e a posição do brilho superior direito.
 * Usamos a variável --cor-verde-destaque que já definiu no :root.
 * Os valores negativos (top: -150px) empurram o brilho para "fora"
 * do ecrã, para que apenas a "borda" do brilho apareça.
 */
.glow-top-right {
background-color: var(--cor-verde-destaque);
top: -150px; 
right: -150px;
}

/**
 * Documentação: Define a cor e a posição do brilho inferior esquerdo.
 * Usamos a variável --cor-brilho-magenta do :root.
 */
.glow-bottom-left {
background-color: var(--cor-brilho-magenta);
bottom: -150px;
left: -150px;
}



/* ====================================================
 5. RESPONSIVIDADE (Ajustes para o Hero)
====================================================
*/

@media (max-width: 768px) {
    .hero-banner-section {
        padding: 5rem 1rem;
        min-height: auto;
    }

    .hero-content h1 {
        font-size: 2.5rem; /* Fonte menor no mobile */
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    .hero-buttons {
        flex-direction: column; /* Botões um em cima do outro */
        align-items: center;
        gap: 1rem;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 350px; /* Limita a largura dos botões */
    }
}

/* ====================================================
 0. VARIÁVEIS DE COR (Referenciando seu :root)
    (Estas variáveis devem estar no seu :root principal)
==================================================== */
:root {
    /* Supondo que estas variáveis já existem no seu CSS */
    --cor-primaria: #2C2D3A; 
    --cor-branco: #FFFFFF;
    
    /* Novas variáveis para esta seção */
    --cor-fundo-claro: #F8F8F8; 
    --cor-cinza-texto: #545B6C; 
    --cor-borda-logo: #E8EBF2; 
    --cor-sombra-logo: rgba(0, 0, 0, 0.05);
}

/* ====================================================
 1. SEÇÃO PRINCIPAL "EMPRESAS QUE CONFIAM"
==================================================== */
.trusted-companies-section {
    background-color: var(--cor-fundo-claro);
    padding: 6rem 0; /* Espaçamento superior e inferior */
    color: var(--cor-primaria); /* Cor principal do texto (Dark) */
    overflow-x: hidden; /* Garante que nada transborde lateralmente */
}

.trusted-companies-header {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: 2rem; /* Espaço entre as colunas */
    margin-bottom: 4rem; /* Espaço abaixo do cabeçalho */
    align-items: flex-start; /* Alinha o topo */
}

.trusted-companies-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cor-primaria);
    text-align: left;
}

.trusted-companies-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--cor-cinza-texto);
    text-align: left;
}


/* ====================================================
 2. CARROSSEL DE LOGOS (Animação infinita com CSS)
==================================================== */
.logo-carousel-wrapper {
    position: relative;
    overflow: hidden; /* Esconde as logos que saem da tela */
    padding: 20px 0; /* Espaçamento vertical para sombra/elementos */
    
    /* Remove padding lateral para que o carrossel "vaze" */
    width: 100%; 
}

.logo-carousel {
    display: flex;
    flex-direction: column; /* Para as duas linhas de logos */
    gap: 1.5rem; /* Espaço entre as linhas de logos */
    
    /* Move o carrossel para fora da tela para esconder o início/fim */
    margin-left: -5%;
    width: 110%;
}

.logo-carousel-track {
    display: flex;
    white-space: nowrap; /* Impede que os itens quebrem linha */
    animation: scroll-left 40s linear infinite; /* Animação de scroll infinito */
    gap: 1rem; /* Espaço entre as logos */
    
    /* Garante que o padding seja adicionado ao tamanho */
    box-sizing: content-box; 
}

/* Pausa a animação ao passar o mouse */
.logo-carousel-wrapper:hover .logo-carousel-track {
    animation-play-state: paused;
}

/* Espaçamento para a linha de cima (à esquerda) */
.logo-track-top {
    padding-left: 100px; 
}

/* Espaçamento para a linha de baixo (à direita) */
.logo-track-bottom {
    padding-right: 100px; 
    animation-name: scroll-right; /* Direção oposta */
}

.logo-item {
    flex-shrink: 0; /* Impede que os itens encolham */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    height: 150px; /* Altura fixa para todos os itens */
    border: 1px solid var(--cor-borda-logo);
    border-radius: 8px;
    background-color: var(--cor-branco);
    box-shadow: 0 4px 10px var(--cor-sombra-logo);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logo-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.logo-item img {
    max-height: 120px; /* Garante que a imagem se ajuste à altura do item */
    max-width: 120px;
    object-fit: contain; /* Mantém a proporção da imagem */
    filter: grayscale(100%); /* Logos cinzas */
    opacity: 0.7; /* Opacidade padrão */
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-item:hover img {
    filter: grayscale(100%) !important;
    opacity: 1 !important; /* Mantém a opacidade em 100% para dar um feedback visual sutil, mas sem cor */
}

/* ====================================================
 3. ANIMAÇÕES (Scroll-left e Scroll-right)
==================================================== */

/* Animação de scroll (para a esquerda) */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Rola 50% do tamanho para o loop infinito */
    }
}

/* Animação de scroll (para a direita) */
@keyframes scroll-right {
    0% {
        transform: translateX(-50%); /* Começa da metade */
    }
    100% {
        transform: translateX(0); /* Termina no início */
    }
}


/* ====================================================
 4. RESPONSIVIDADE
==================================================== */

@media (max-width: 992px) {
    .trusted-companies-section {
        padding: 4rem 0;
    }

    .trusted-companies-header {
        grid-template-columns: 1fr; /* Uma coluna em telas menores */
        text-align: center;
        margin-bottom: 3rem;
    }

    .trusted-companies-title,
    .trusted-companies-description {
        text-align: center;
    }

    .trusted-companies-title {
        font-size: 2rem;
    }

    .trusted-companies-description {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .logo-carousel-track {
        animation-duration: 30s; /* Animação mais rápida em telas menores */
    }
}

@media (max-width: 576px) {
    .trusted-companies-section {
        padding: 3rem 0;
    }
    .trusted-companies-title {
        font-size: 1.8rem;
    }
    .logo-carousel-track {
        animation-duration: 20s; /* Ainda mais rápido */
    }
    .logo-item {
        padding: 2.6rem 1rem;
        height: 50px;
    }
    
    /* Reduz o offset em telas muito pequenas */
    .logo-track-top {
        padding-left: 50px; 
    }
    .logo-track-bottom {
        padding-right: 50px; 
    }
}

/* ====================================================
   5. SEÇÃO DE VANTAGENS (Proteção e Confiabilidade)
   CSS COMPLETO (COM ABAS INTERATIVAS)
==================================================== */

/* --- 5.1: Estilos da Seção Principal --- */
.features-dark-section {
    background-color: var(--cor-fundo-dark);
    color: var(--cor-branco);
    padding: 6rem 0;
    position: relative;
    overflow: hidden; /* Importante para os brilhos */

    /* Padrão de grid (copiado do hero) */
    background-image: 
        linear-gradient(var(--cor-grid-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--cor-grid-dark) 1px, transparent 1px);
    background-size: 50px 50px; /* Tamanho da célula do grid */
}

/* Cabeçalho da seção */
.features-header-dark {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

.features-header-dark h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cor-branco);
    margin-bottom: 1rem;
}

.features-header-dark p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7); /* Texto com leve transparência */
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- 5.2: Estilos das Abas Interativas (Novo) --- */

/* Container principal das abas */
.feature-tabs-wrapper {
    display: flex;
    height: 450px; /* Altura fixa para as abas. Ajuste se precisar. */
    gap: 1.5rem; /* Espaço entre as abas */
    width: 100%;
    margin-top: 3rem; /* Espaço abaixo do título da secção */
    position: relative;
    z-index: 2;
}

/* Estilo de cada Aba (ativa e inativa) */
.feature-tab {
    position: relative;
    border-radius: 12px; 
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    
    /* Estado Inativo (fechado) - adaptado do teu .feature-card-dark */
    background-color: rgba(255, 255, 255, 0.03); 
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex: 0 0 100px; /* Largura fixa quando fechado */
}

.feature-tab.active {
    /* Estado Ativo (aberto) */
    background-color: transparent; 
    border: 2px solid var(--cor-verde-destaque, #00A99D); /* Cor de destaque */
    flex: 1 1 500px; /* Cresce para ocupar o espaço */
}

/* Título vertical (para abas fechadas) */
.feature-tab .tab-title {
    font-family: 'Poppins', sans-serif; /* Assumindo Poppins do teu site */
    font-size: 1.5rem; 
    font-weight: 600;
    color: var(--cor-branco, white);
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    transform-origin: center;
    writing-mode: vertical-rl;
    transform: translate(-50%, -50%) rotate(180deg);
    transition: opacity 0.3s ease, transform 0.5s ease, top 0.5s ease;
}

/* Esconde o título vertical quando a aba está ativa */
.feature-tab.active .tab-title {
    opacity: 0;
    transform: translate(-50%, -100%) rotate(180deg); 
}

/* Conteúdo interno (para abas abertas) */
.feature-tab__content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    
    /* Escondido por padrão */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s 0.2s ease, transform 0.4s 0.2s ease;
}

/* Mostra o conteúdo quando a aba está ativa */
.feature-tab.active .feature-tab__content {
    opacity: 1;
    transform: scale(1);
}

/* Estilizando o conteúdo (Reaproveitando teu .feature-card-dark) */
.feature-tab__content .feature-icon {
    width: 50px; /* Tamanho do teu CSS original */
    height: 50px; /* Tamanho do teu CSS original */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-verde-destaque);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.feature-tab__content .feature-icon i {
    color: var(--cor-fundo-dark); /* Ícone escuro */
    font-size: 1.5rem;
}

.feature-tab__content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-branco);
    margin-bottom: 1rem;
}

.feature-tab__content p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* --- 5.3: Estilos da Linha do Tempo (Novo) --- */
.features-timeline {
    margin-top: 2rem;
    position: relative;
    z-index: 2;
}
.timeline-bar {
    width: 100%;
    height: 3px;
    background-color: #334155; /* Cor da barra de fundo */
    border-radius: 2px;
    position: relative;
}
/* Procure por .timeline-marker e ATUALIZE para ficar assim: */

.timeline-marker {
    position: absolute;
    top: 50%;
    left: 8%; /* Posição inicial (será alterada pelo JS) */
    
    /* AQUI ESTÁ A CORREÇÃO MÁGICA: */
    /* translate(-50%, -50%) centraliza o eixo X e Y ao mesmo tempo */
    transform: translate(-50%, -50%); 
    
    width: 12px;
    height: 12px;
    background-color: var(--cor-verde-destaque, #00A99D);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--cor-verde-destaque, #00A99D), 0 0 20px var(--cor-verde-destaque, #00A99D);
    transition: left 0.5s ease;
}

.timeline-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 5%; 
    margin-top: 0.75rem;
}
.timeline-labels span {
    font-size: 1.1rem;
    color: #94A3B8;
    font-weight: 500;
}

/* ====================================================
   6. RESPONSIVIDADE (Seção de Vantagens com Abas)
==================================================== */

@media (max-width: 992px) {
    /* O cabeçalho H2 fica menor em tablets */
    .features-header-dark h2 {
        font-size: 2rem;
    }
    
    /* A linha do tempo pode ficar muito cheia, esconde os textos */
    .timeline-labels {
        display: none;
    }
}

@media (max-width: 768px) {
    .features-dark-section {
        padding: 4rem 1rem; /* Menor padding no mobile */
    }

    .main-tabs-nav{
        display: block;
    }

    button.main-tab-btn{
        margin: 10px;
    }

    /* No mobile, as abas ficam na vertical */
    .feature-tabs-wrapper {
        flex-direction: column;
        height: auto; /* Altura automática */
        gap: 1rem;
    }
    
    .feature-tab {
        /* Abas fechadas são finas */
        flex: 0 0 60px; 
        justify-content: center;
    }
    
    .feature-tab.active {
         /* Aba ativa expande a altura */
        flex: 1 1 auto; /* Altura se ajusta ao conteúdo */
        min-height: 300px; /* Garante uma altura mínima para o conteúdo */
    }

    .feature-tab .tab-title {
        /* Título volta para a horizontal no mobile */
        writing-mode: horizontal-tb;
        transform: translate(-50%, -50%) rotate(0deg);
        font-size: 1.25rem;
    }
    
    .feature-tab.active .tab-title {
        /* Esconde o título quando a aba está ativa */
        opacity: 0;
        transform: translate(-50%, -150%);
    }

    .feature-tab__content {
        padding: 1.5rem;
    }
    
    /* Esconde a linha do tempo no mobile para simplificar */
    .features-timeline {
        display: none;
    }
}

/* ====================================================
   7. Estilo Avulso (copiado do teu snippet)
==================================================== */
.new-home-big-numbers{
    background-color: black !important;
    background-position: bottom center;
    margin-bottom: 0px;
}

/* ====================================================
 7. SEÇÃO DE SOLUÇÕES COM ABAS (COMPLETO)
==================================================== */

.solutions-tabs-section {
    background-color: var(--cor-fundo-dark);
    color: var(--cor-branco);
    padding: 6rem 1rem;
    position: relative;
    overflow: hidden;

    /* Padrão de grid (copiado do hero) */
    background-image: 
        linear-gradient(var(--cor-grid-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--cor-grid-dark) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* NOTA: Esta seção assume que você tem os efeitos .glow-top-right 
  e .glow-bottom-left definidos globalmente ou no CSS do seu hero.
  Se não, copie-os do CSS do hero que fizemos anteriormente.
*/

.solutions-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.solutions-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cor-branco);
}

/* Abas principais (Segurança, Desempenho) */
.main-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

.main-tab-btn {
    font-family: var(--fonte-principal);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    
      background-color: transparent;
    color: var(--cor-branco);
    border: 2px solid #0EDCCE;
}

.main-tab-btn.active,
.main-tab-btn:hover {
    background-color: var(--cor-branco);
    color: var(--cor-fundo-dark);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2) !important; /* Brilho branco */
    border: 2px solid #0EDCCE !important; 
}

/* Wrapper do conteúdo principal */
.main-tab-panel {
    display: none; /* Oculto por padrão */
    animation: fadeIn 0.5s ease;
    position: relative;
    z-index: 2;
}
.main-tab-panel.active {
    display: block; /* Visível quando ativo */
}

/* Grid de 2 colunas: Nav Vertical | Conteúdo */
.solution-content-grid {
    display: grid;
    grid-template-columns: 260px 1fr; /* Largura fixa para nav, resto flexível */
    
}

/* 1. Coluna da Nav Vertical */
.vertical-tabs-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: #161614;
    padding: 20px;
}

.vertical-tab-btn {
    font-family: var(--fonte-principal);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: transparent;
    border: none;
    color: #A0AEC0; /* Texto cinza claro */
    text-align: left;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vertical-tab-btn i {
    font-size: 1.1rem;
    width: 20px;
}

.vertical-tab-btn:hover {
    background-color: rgba(14, 220, 206, 0.1); /* Fundo ciano fraco */
    color: var(--cor-branco);
}

.vertical-tab-btn.active {
    background-color: var(--cor-verde-destaque);
    color: var(--cor-fundo-dark); /* Texto escuro */
    font-weight: 600;
}

/* 2. Coluna de Conteúdo Vertical */
.vertical-tab-content-wrapper {
    /* O "card" de fundo escuro-azulado da imagem */
    background-color: #0F2027; /* Tom de azul/verde bem escuro */
    border: 1px solid rgba(14, 220, 206, 0.3);
    border-radius: 0px 12px 12px 0px;
    padding: 2rem 2.5rem;
}

.vertical-tab-panel {
    display: none; /* Oculto por padrão */
    animation: fadeIn 0.5s ease;
}
.vertical-tab-panel.active {
    display: block; /* Visível quando ativo */
}

.vertical-tab-panel h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-branco);
    margin-bottom: 1rem;
}

.vertical-tab-panel p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

.vertical-tab-panel h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cor-branco);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

/* Grid de funcionalidades (3 colunas) */
.function-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Card "Vidro Fosco" (Glass Claro) */
.function-card {
    background: rgba(255, 255, 255, 0.1); /* Fundo branco semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borda mais clara */
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    color: var(--cor-branco); /* Garante que o texto seja branco */
    
    /* Efeito de vidro fosco */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    transition: all 0.3s ease;
}

.function-card:hover {
    background: rgba(255, 255, 255, 0.2); /* Mais claro no hover */
    border-color: rgba(255, 255, 255, 0.5); /* Borda mais visível no hover */
}

.function-card i {
    font-size: 2.5rem;
    color: var(--cor-verde-destaque);
}

.function-card span {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 1rem;
    color: var(--cor-branco); /* Garante que o texto seja branco */
}

/* Botão "Saiba Mais" (Glass Claro) */
.btn-saiba-mais {
    display: inline-flex; /* Use flexbox para alinhar texto e ícone */
    align-items: center; /* Centraliza verticalmente */
    color: var(--cor-branco);
    font-weight: 600;
    margin-top: 2.5rem;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    
    background: rgba(255, 255, 255, 0.1); /* Fundo branco semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borda mais clara */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition: all 0.3s ease;
}

.btn-saiba-mais:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-saiba-mais i {
    margin-left: 0.8rem;
    transition: transform 0.3s ease;
}

.btn-saiba-mais:hover i {
    transform: translateX(3px);
}

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


/* ====================================================
 8. RESPONSIVIDADE (Seção de Abas)
==================================================== */

@media (max-width: 992px) {
    .solutions-header h2 {
        font-size: 2rem;
    }
    
    /* Em tablets, as 2 colunas principais viram 1 */
    .solution-content-grid {
        grid-template-columns: 1fr;
    }

    /* As abas verticais viram horizontais e roláveis */
    .vertical-tabs-nav {
        flex-direction: row;
        overflow-x: auto; /* Permite rolar lateralmente */
        white-space: nowrap; /* Impede que quebrem a linha */
        padding-bottom: 1rem; /* Espaço para a barra de rolagem */
        
        /* Esconde a barra de rolagem (visual) */
        -ms-overflow-style: none; /* IE e Edge */
        scrollbar-width: none; /* Firefox */
    }
    .vertical-tabs-nav::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .vertical-tab-btn {
        flex-shrink: 0; /* Impede que os botões encolham */
    }

    .vertical-tab-content-wrapper {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .function-grid {
        grid-template-columns: 1fr; /* Cards de função em 1 coluna */
    }
    
    .vertical-tab-panel h3 {
        font-size: 1.5rem;
    }
}

/* ====================================================
 9. SEÇÃO DE MONITORAMENTO (VERSÃO VAZADA)
==================================================== */

.monitoring-section {
    background-color: var(--cor-fundo-dark);
    color: var(--cor-branco);
    padding: 6rem 1rem;
    position: relative;
    /* <<< O "corte" final da imagem acontece aqui */
    overflow: hidden; 
    
    background-image: 
        linear-gradient(var(--cor-grid-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--cor-grid-dark) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Títulos da seção (sem alterações) */
.monitor-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}
.monitor-header span {
    font-size: 1.1rem !important; 
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-bottom: 0.5rem;
}
.monitor-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cor-branco);
}

/* O "Palco" (sem alterações) */
.monitor-stage {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

/* Card azul-escuro de fundo (Estático) */
.monitor-card-background {
    background-color: #0F2027;
    border: 1px solid rgba(14, 220, 206, 0.3);
    border-radius: 40px;
    position: relative;
    z-index: 1;
    
    /* <<< MUDANÇA CRUCIAL: TEM DE SER 'visible' para vazar */
    overflow: visible; 
    
    padding: 4rem; /* Padding normal de volta */
}

/* NOVO: O Grid que separa Texto e Imagem */
.monitor-content-layout {
    display: grid;
    /* O mesmo grid que você tinha antes */
    grid-template-columns: 0.9fr 1.1fr;
    align-items: flex-start;
}

/* Wrapper do Slider (só contém texto) */
.monitor-slider-wrapper {
    width: 100%;
    overflow: hidden; /* O slider de texto AINDA precisa disto */
    position: relative;
    z-index: 3; /* Garante que o texto fique por cima */
}

/* O Track que se move (contém os slides) */
.monitor-slider-track {
    display: flex;
    width: 300%; /* 100% por 3 slides */
    transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Slide individual (agora só tem 1 coluna) */
.monitor-slide {
    width: 33.3333%;
    display: grid; 
    grid-template-columns: 1fr; /* <<< SÓ UMA COLUNA */
    
    /* Damos uma altura mínima para o texto não "saltar" */
    min-height: 250px; 
    
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

.monitor-slide.active {
    opacity: 1;
}

/* Coluna da esquerda: Texto */
.slide-text-content {
    padding-right: 1rem;
    max-width: 400px;
}
.slide-text-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cor-branco);
    margin-bottom: 1.5rem;
}
.slide-text-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

/* --- ESTA É A MÁGICA --- */

/* NOVO: Contêiner das Imagens */
.monitor-visuals-container {
    position: relative; /* Referência para as imagens */
    height: 100%;
    min-height: 400px; /* Altura para a imagem se posicionar */
    z-index: 2; /* Atrás do texto, à frente do card */
}

/* NOVO: A Imagem que Vaza */
.monitor-visual-image {
    position: absolute;
    width: 140%; /* 1. Aumenta a imagem */
    max-width: none;
    
    /* 2. Empurra para fora do card */
    right: -40%; 
    
    /* 3. Centraliza verticalmente */
    top: 50%;
    transform: translateY(-50%);
    
    border-radius: 8px;
    object-fit: cover;
    
    /* 4. Lógica de fade */
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* NOVO: A Imagem Ativa */
.monitor-visual-image.active {
    opacity: 1;
    transform: translateY(-50%) scale(1); /* Garante que está no sítio certo */
}


/* --- FIM DA MÁGICA --- */


/* Botão Dark Glass (sem alterações) */
.btn-glass-dark {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--cor-branco);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-glass-dark:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}
.btn-glass-dark i { transition: transform 0.3s ease; }
.btn-glass-dark:hover i { transform: translateX(3px); }


/* Botão CTA Principal (sem alterações) */
.monitor-bottom-cta {
    text-align: center;
    margin-top: 3rem;
    position: relative;
    z-index: 5;
}

/* Navegação por Pontos (Dots) (sem alterações) */
.monitor-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem; 
    position: relative;
    z-index: 5;
    padding-top: 2rem; 
}
.monitor-slider-dots .dot {
    width: 10px;
    height: 10px;
    background-color: #4A556C; /* Cinza-azulado */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}
.monitor-slider-dots .dot:hover {
    background-color: #A0AEC0; /* Cinza claro */
}
.monitor-slider-dots .dot.active {
    background-color: var(--cor-verde-destaque);
    transform: scale(1.2);
}

/* Ajuste da seção (sem alterações) */
.monitoramento-section{
    padding-bottom: 1rem;
    padding-top: 6rem;;
}

/* ====================================================
 10. RESPONSIVIDADE (Seção Monitoramento)
==================================================== */

@media (max-width: 992px) {
    .monitor-card-background {
        padding: 2.5rem;
        /* <<< No mobile, voltamos a esconder o overflow */
        overflow: hidden; 
    }

    /* Quebra o layout para 1 coluna */
    .monitor-content-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .slide-text-content {
        text-align: center;
        padding-right: 0;
        max-width: 100%; 
        min-height: auto; /* Remove altura mínima */
    }
    .monitor-slide {
        min-height: auto; /* Remove altura mínima */
    }
    
    .monitor-visuals-container {
        min-height: auto; /* Remove altura mínima */
        margin-top: 3rem;
    }

    /* A imagem volta ao normal no mobile */
    .monitor-visual-image {
        position: static; /* Remove posicionamento absoluto */
        width: 100% !important; 
        max-width: 500px;
        margin: 0 auto;
        transform: none; /* Remove transformações */
        object-fit: contain;
        opacity: 1; /* Todas visíveis (JS vai tratar) */
    }
    
    /* <<< No mobile, o JS vai falhar em mostrar/esconder. 
       Então forçamos com CSS */
    .monitor-visual-image:not(.active) {
        display: none;
    }
}

@media (max-width: 576px) {
    .monitoring-section {
        padding: 4rem 1rem;
    }
    .monitor-header h2 {
        font-size: 1.8rem;
    }
    .monitor-card-background {
        padding: 2rem 1.5rem;
        border-radius: 30px;
    }
    .slide-text-content h2 {
        font-size: 2rem;
    }

    ul.footer-nav-list{
        margin: 0px !important;
    }
}
/* ====================================================
 11. SEÇÃO DEPOIMENTOS (SLIDER)
==================================================== */

.testimonials-section {
    /* Fundo claro, oposto das seções escuras */
    background-color: var(--cor-branco); 
    color: var(--cor-primaria); /* Texto escuro */
    padding: 6rem 1rem;
    position: relative;
    overflow: hidden;
    
    /* Um leve brilho vindo do card escuro */
    background-image: radial-gradient(at 80% 50%, rgba(14, 220, 206, 0.1), transparent 70%);
}

/* Grid de 2 colunas */
.testimonials-section .testimonials-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Força 2 colunas de tamanho igual */
    gap: 3rem !important;
    align-items: center !important; /* Alinha o texto e o slider verticalmente */
}

/* Coluna da Esquerda: Texto */
.testimonials-text-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cor-texto-cabecalho); /* Usando sua variável de texto escuro */
    margin-bottom: 1.5rem;
}

.testimonials-text-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--cor-texto-corpo); /* Usando sua variável de texto de corpo */
    margin-bottom: 1.5rem;
}

/* Coluna da Direita: Slider */
.testimonial-slider-wrapper {
    position: relative;
}

/* O "Card" de fundo (azul-escuro) */
.testimonial-card-background {
    background-color: #0F2027; /* Azul/verde escuro (mesmo do slider anterior) */
    color: var(--cor-branco);
    border-radius: 20px;
    padding: 1.5rem 1.5rem;
    position: relative;
    overflow: hidden; /* Para o slider interno */
    min-height: 380px !important; /* Altura para acomodar o texto */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* O Track que se move */
.testimonial-slider-track {
    display: flex;
    /* MUDANÇA: De 300% para 200% (pois são 2 slides) */
    width: 200% !important; 
    transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

cite{
    color: var(--cor-verde-destaque)
}

.testimonial-slide {
    /* MUDANÇA: De 33.3333% para 50% (metade de 200%) */
    width: 50% !important; 
    padding-right: 2rem;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
.testimonial-slide:not(.active) {
    opacity: 0;
}

/* Autor (ícone + nome) */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 5; /* Na frente das aspas */
}

.author-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.author-icon i {
    font-size: 1.3rem;
    color: var(--cor-verde-destaque);
}

.testimonial-author span {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-branco);
}

/* Citação (Depoimento) */
.testimonial-quote {
    border-left: 3px solid var(--cor-verde-destaque);
    padding-left: 1.5rem;
    position: relative;
    z-index: 5; /* Na frente das aspas */
}

.testimonial-quote .quote-highlight {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cor-branco);
    line-height: 1.4;
    margin-bottom: 1rem;
}

.testimonial-quote p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

/* Aspas gigantes (decorativas) */
.quote-icon-decoration {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.05);
    z-index: 1;
}

/* Navegação por Pontos */
.testimonial-slider-dots {
    display: flex;
    justify-content: center; /* Alinhado à esquerda do card */
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.testimonial-slider-dots .dot {
    width: 10px;
    height: 10px;
    background-color: #A0AEC0; /* Cinza claro inativo */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonial-slider-dots .dot:hover {
    background-color: #4A556C; /* Cinza escuro no hover */
}

.testimonial-slider-dots .dot.active {
    background-color: var(--cor-verde-destaque); /* Ciano ativo */
    width: 25px; /* Ponto ativo fica mais largo */
    border-radius: 5px;
}


/* ====================================================
 12. RESPONSIVIDADE (Seção Depoimentos)
==================================================== */

@media (max-width: 992px) {
    /* Quebra o layout para 1 coluna */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .testimonials-text-content {
        text-align: center;
    }

    .testimonials-text-content h2 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .testimonials-section {
        padding: 4rem 1rem;
    }
    
    .testimonial-card-background {
        padding: 2rem 1.5rem;
        min-height: 420px; /* Ajusta altura para mobile */
    }

    .testimonial-slide {
        padding-right: 1rem;
    }

    .testimonial-quote .quote-highlight {
        font-size: 1.1rem;
    }

    .quote-icon-decoration {
        font-size: 6rem;
    }
    
    .testimonial-slider-dots {
        justify-content: center; /* Centraliza os pontos no mobile */
    }

    .glow-bottom-left{
        display: none;
    }
    /* Aplica a todas as abas dentro da seção de soluções */
    .solutions-tabs-section .material-grid {
        display: flex !important;
        flex-direction: column; /* Um embaixo do outro */
        align-items: center; /* Centraliza no meio da tela */
        justify-content: center;
        gap: 2rem;
    }

    /* Garante o tamanho e margem para todos os cards */
    .solutions-tabs-section .material-card {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 249px; /* Mantém o tamanho original */
    }
}

/* ====================================================
 13. SEÇÃO CTA FINAL (A GoCache é para quem exige)
==================================================== */

.final-cta-dark-section {
    background-color: black;
    color: var(--cor-branco);
    padding: 6rem 1rem;
    position: relative;
    overflow: hidden; /* Importante para os brilhos */
    text-align: center;

    /* Padrão de grid (copiado do hero) */
    
}

/* Opcional: Imagem de fundo de circuito. 
   Troque 'bkg-circuit.png' pelo caminho da sua imagem.
*/
.final-cta-background-image {
    background-image: url('/wp-content/uploads/2025/11/bkg-circuit.png'); /* Caminho da sua imagem */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.1; /* Deixa o padrão bem sutil */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Container do conteúdo (na frente dos brilhos e fundo) */
.final-cta-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem; /* Espaço entre o título e o botão */
}

.final-cta-container h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cor-branco);
    max-width: 600px; /* Limita a largura do título */
}

/* Novo estilo de botão: Glass Escuro com Brilho */
.btn-cta-glass-glow {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-branco);
    padding: 1rem 2.5rem; /* Botão grande */
    border-radius: 10px;
    text-decoration: none;
    
    /* O Efeito Glass Escuro */
    background: linear-gradient(to bottom, 
        rgba(14, 220, 206, 0.15),  /* Brilho ciano sutil no topo */
        rgba(0, 0, 0, 0.2)        /* Sombra escura na base */
    );
    border: 1px solid rgba(14, 220, 206, 0.4); /* Borda ciano */
    
    /* Sombra interna para profundidade */
    box-shadow: inset 0 1px 3px rgba(14, 220, 206, 0.2);
    
    /* Efeito de vidro fosco */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Transição suave (já deve herdar de .btn) */
    transition: all 0.3s ease;
}

/* Efeito Hover:
   O transform: translateY(-3px) já vem da sua classe .btn.
   Vamos apenas intensificar o brilho.
*/
.btn-cta-glass-glow:hover {
    background: linear-gradient(to bottom, 
        rgba(14, 220, 206, 0.25), /* Brilho ciano mais forte */
        rgba(0, 0, 0, 0.3)
    );
    border-color: var(--cor-verde-destaque); /* Borda ciano sólida */
    
    /* Sombra externa no hover */
    box-shadow: inset 0 1px 3px rgba(14, 220, 206, 0.3),
                0 5px 20px rgba(14, 220, 206, 0.2);
}


/* ====================================================
 14. RESPONSIVIDADE (CTA Final)
==================================================== */

@media (max-width: 768px) {
    .final-cta-dark-section {
        padding: 5rem 1rem;
    }
    .final-cta-container h2 {
        font-size: 2rem;
    }
    .btn-cta-glass-glow {
        font-size: 1.1rem;
        padding: 0.9rem 2rem;
    }
    .glow-top-right,
    .glow-bottom-left{
        display: none;
    }
}

/*
=====================================================
  PADRONIZAÇÃO DAS SEÇÕES DE ABAS (COMPLETO)
=====================================================
*/

/* * 1. CABEÇALHO DA SEÇÃO 
  * (Oculta o <p> e <span> da seção "Material" 
  * para igualar ao cabeçalho limpo da seção "Soluções")
  */

/* Adiciona margem de segurança para o scroll não ficar atrás do header */
#materiais-completos,
#mat-seguranca,
#mat-performance,
#mat-observabilidade,
.solutions-tabs-section {
    /* 150px é uma média segura (Header + Espaço). Ajuste se necessário. */
    scroll-margin-top: 250px; 
}

.solutions-header h2,
.section-title .material-h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cor-branco);
    margin-bottom: 1rem; 
    text-align: center; /* Garante centralização */
}

.section-title .material-p,
.section-title .span-soluction-material {
    display: none; /* Oculta para padronizar */
}


/* * 2. ABAS PRINCIPAIS (Segurança, Performance, etc.)
  * (O seu HTML já usa as classes corretas, então este CSS
  * vai funcionar para AMBAS as seções)
  */
.main-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

.main-tab-btn {
    font-family: var(--fonte-principal);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: transparent;
    color: var(--cor-branco);
    border: 2px solid #0EDCCE; /* Borda Ciano */
}

.main-tab-btn.active,
.main-tab-btn:hover {
    background-color: var(--cor-branco);
    color: var(--cor-fundo-dark); /* Texto escuro */
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2) !important;
}

.main-tab-panel {
    display: none; 
    animation: fadeIn 0.5s ease;
    position: relative;
    z-index: 2;
}
.main-tab-panel.active {
    display: block; 
}

/* * 3. GRID DE CARDS (Padronizado)
  * (Aplica um grid flexível e automático para ambas as seções)
  */
.function-grid,
.material-grid {
    display: grid;
    /* Cria colunas flexíveis de no mínimo 200px */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 1.5rem;
}


/* * 4. ESTILO "GLASS" DO CARD (Unificado)
  * (Aplica o mesmo visual para .function-card e .material-card)
  */
.function-card,
.material-card {
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    color: var(--cor-branco);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    display: flex; 
    flex-direction: column; 
    height: 100%; /* Garante mesma altura */
}

.function-card:hover,
.material-card:hover {
    background: rgba(255, 255, 255, 0.2); 
    border: 2px solid #0EDCCE; 
    transform: translateY(-3px);
}


/* * 5. CONTEÚDO DO CARD (Unificado)
  */

/* Ícones (i) e Imagens (img) */
.function-card i {
    font-size: 2.5rem; /* 40px */
    color: var(--cor-verde-destaque);
    margin-bottom: 1rem; 
}

.material-card .img-material {
    height: 40px; 
    width: 40px;
    margin: 0 auto 1rem auto; /* Centraliza */
    /* Transforma a imagem branca em ciano */
    filter: brightness(0) invert(1) sepia(1) saturate(10000%) hue-rotate(130deg);
}

/* Títulos (span ou h3) */
.function-card span,
.material-card h3 {
    display: block;
    font-size: 1.1rem; /* 14.4px */
    font-weight: 600;
    margin-top: 1rem;
    color: var(--cor-branco);
    line-height: 1.4;
}

/* Descrição (p) */
.function-card p,
.material-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
    flex-grow: 1; /* Força o botão a ficar no fundo */
}


/* Correções WORDPRESS */

/* ====================================================
   CORREÇÃO DE CONFLITO DO HEADER (Astra)
   ==================================================== */

/* * Força o menu principal (o container da lista) 
 * a ser flexível e a centrar o seu conteúdo.
 */
.header-dark .nav-menu {
    display: flex !important;
    flex-grow: 1 !important;
    justify-content: center !important;
    align-items: center !important;
}

/* * Força a lista de links (ul) a ser uma linha
 * horizontal e restaura o teu espaçamento.
 */
.header-dark .nav-list {
    display: flex !important;
    flex-direction: row !important; /* Garante que é uma linha */
    justify-content: center !important;
    gap: 2.5rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* * Remove qualquer padding ou margem
 * que o Astra possa ter adicionado aos <li>
 */
.header-dark .nav-list li {
    margin: 0 !important;
    padding: 0 !important;
}

/* ====================================================
   CORREÇÃO DE CONFLITO DOS SLIDER DOTS (Astra)
   ==================================================== */

/* * Os seletores ".monitoramento-section" e ".testimonials-section" 
 * vêm dos teus templates e tornam esta regra mais forte que a do Astra.
 */

/* --- Dots do Slider de Monitoramento --- */
.monitoramento-section .monitor-slider-dots .dot {
    all: unset; /* Remove QUALQUER estilo de 'button' do Astra */
    display: inline-block; /* Faz com que se comporte como um elemento de bloco em linha */
    width: 10px;
    height: 10px;
    background-color: #4A556C;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0 4px; /* Adiciona um pequeno espaçamento que podes ter perdido */
}

.monitoramento-section .monitor-slider-dots .dot:hover {
    background-color: #A0AEC0;
}

.monitoramento-section .monitor-slider-dots .dot.active {
    background-color: var(--cor-verde-destaque);
    transform: scale(1.2);
}

/* --- Dots do Slider de Depoimentos --- */
.testimonials-section .testimonial-slider-dots .dot {
    all: unset; /* Remove QUALQUER estilo de 'button' do Astra */
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #A0AEC0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0 3px; /* Adiciona um pequeno espaçamento */
}

.testimonials-section .testimonial-slider-dots .dot:hover {
    background-color: #4A556C;
}

.testimonials-section .testimonial-slider-dots .dot.active {
    background-color: var(--cor-verde-destaque);
    width: 25px; /* Restaura o estilo de "pílula" ativa */
    border-radius: 5px;
}

/* ====================================================
   CORREÇÃO DE CONFLITO DO GRID DE DEPOIMENTOS (Nível 2)
   ==================================================== */

/* * Usamos a classe do body (.page-template-template-home-php) 
 * para forçar esta regra APENAS nas páginas que usam o template home.
 * Isto é o seletor mais forte que podemos criar.
*/
body.page-template-template-home-php .testimonials-section .testimonials-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 colunas iguais */
    gap: 3rem !important;
    align-items: center !important;
}

/* * Vamos também garantir que o conteúdo de texto (coluna 1) 
 * e o slider (coluna 2) não tenham larguras mínimas
 * que "explodam" o grid.
*/
body.page-template-template-home-php .testimonials-text-content {
    min-width: 0; /* Permite que a coluna encolha se necessário */
}

body.page-template-template-home-php .testimonial-slider-wrapper {
    min-width: 0; /* Permite que a coluna encolha */
    width: 100%; /* Garante que o slider não seja maior que a coluna do grid */
}

/* * Media query para 1 coluna em telas menores 
 * (também com alta especificidade) 
*/
@media (max-width: 992px) {
    body.page-template-template-home-php .testimonials-section .testimonials-grid {
        grid-template-columns: 1fr !important; /* 1 coluna */
        gap: 3rem !important;
    }
}

/* ====================================================
   CORREÇÃO DEFINITIVA: Altura do Hero (Home vs. Internas)
   ==================================================== */

/*
 * 1. FORÇA a Home Page (que usa este template específico) 
 * a ter 100vh.
*/
body.page-template-template-home-php .hero-banner-section {
    min-height: calc(100vh - 90px) !important;
}

/*
 * 2. FORÇA qualquer banner que tenha AMBAS as classes
 * (.hero-banner-section E .interna-hero) a ter 50vh.
 * Este seletor é mais específico e vai ganhar a "guerra".
*/
body.page .hero-banner-section.interna-hero {
    min-height: calc(70vh - 90px) !important;
    text-align: center !important;
}

/* ====================================================
   CORREÇÃO DE ESTILO: Rádios do CF7 na Pág. Parceiros
   ==================================================== */

/* 1. Alinha os novos labels do CF7 (gerados pelo "use_label_element") */
.partner-form .choice-group .wpcf7-list-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0; /* Remove a margem padrão do CF7 */
}

.partner-form .choice-group .wpcf7-list-item label {
    font-weight: 500;
    cursor: pointer;
    color: var(--cor-texto-corpo);
    margin-bottom: 0; /* Anula a margem do label */
}

/* 2. Aplica teus estilos de rádio personalizados ao input do CF7 */
.partner-form .choice-group input[type="radio"] {
    appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 2px solid #e2e8f0;
    border-radius: 100%;
    display: grid;
    place-content: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    margin: 0; /* Limpa estilos do tema */
}

.partner-form .choice-group input[type="radio"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border-radius: 100%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--cor-roxo-go, #0EDCCE);
}

.partner-form .choice-group input[type="radio"]:checked {
    border-color: var(--cor-roxo-go, #0EDCCE);
}

.partner-form .choice-group input[type="radio"]:checked::before {
    transform: scale(1);
}

/* ==========================================================================
   ESTILO: TEMPLATE BLOG GOCACHE (Light Mode)
   ========================================================================== */

/* Wrapper Principal: Fundo Claro */
.blog-main-wrapper {
    background-color: #F8F9FA; /* Cinza muito suave */
    padding: 4rem 0;
    min-height: 100vh;
    z-index: 999;
    position: relative;
}

/* 1. HERO SECTION (Topo Escuro) */
.blog-hero-section {
    background-color: #2C2D3A; /* Sua cor escura padrão */
    color: #FFFFFF;
    padding: 6rem 1rem;
    text-align: center;
    /* Grid decorativo */
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.blog-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #FFFFFF !important;
    margin-bottom: 1rem;
}

.blog-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

/* 2. LAYOUT (Conteúdo + Sidebar) */
.blog-layout-grid {
    display: flex;
    grid-template-columns: 2fr 1fr; /* 2 partes conteúdo, 1 parte sidebar */
    gap: 3rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

/* 3. CARD DO POST */
.blog-posts-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.blog-card-item {
    background-color: #FFFFFF; /* Card Branco */
    border: 1px solid #E2E8F0; /* Borda cinza claro */
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.blog-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #0EDCCE; /* Borda verde no hover */
}

.blog-card-img-link {
    display: block;
    height: 300px; /* Altura fixa para imagem */
    overflow: hidden;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card-item:hover .blog-card-img {
    transform: scale(1.05);
}

.blog-card-body {
    padding: 2rem;
}

/* Meta dados */
.blog-card-meta {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #718096;
    display: flex;
    gap: 10px;
    align-items: center;
}

.blog-category {
    background-color: rgba(14, 220, 206, 0.1);
    color: #00A99D;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Título e Texto */
.blog-card-title a {
    color: #2D3748; /* Cinza escuro */
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    transition: color 0.3s;
}

.blog-card-title a:hover {
    color: #0EDCCE;
}

.blog-card-excerpt p {
    color: #4A5568;
    margin-top: 1rem;
    line-height: 1.7;
    font-size: 1.05rem;
}

.blog-read-more {
    display: inline-block;
    margin-top: 1.5rem;
    color: #0EDCCE;
    font-weight: 700;
    text-decoration: none;
}

.blog-read-more i {
    margin-left: 5px;
    transition: margin 0.3s;
}

.blog-read-more:hover i {
    margin-left: 10px;
}

/* 4. SIDEBAR */
.blog-sidebar-area {
    position: relative;
    top: 100px;
}

.blog-sidebar-area .widget {
    background-color: #FFFFFF;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    margin-bottom: 2rem;
}

.blog-sidebar-area .widget-title {
    font-size: 1.2rem;
    color: #2D3748;
    border-bottom: 2px solid #0EDCCE;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}

/* Barra de Pesquisa */
.blog-sidebar-area .search-form {
    display: flex;
}

.blog-sidebar-area .search-field {
    width: 100%;
    padding: 12px;
    border: 1px solid #CBD5E0;
    border-radius: 6px 0 0 6px;
    color: #4A5568;
}

.blog-sidebar-area .search-submit {
    background-color: #2C2D3A;
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
}

.blog-sidebar-area .search-submit:hover {
    background-color: #0EDCCE;
}

/* Paginação */
.blog-pagination {
    margin-top: 3rem;
    text-align: center;
}
.blog-pagination .page-numbers {
    padding: 10px 16px;
    background: #FFF;
    border: 1px solid #E2E8F0;
    color: #2C2D3A;
    margin: 0 4px;
    border-radius: 6px;
    text-decoration: none;
}
.blog-pagination .current, .blog-pagination .page-numbers:hover {
    background: #0EDCCE;
    color: #FFF;
    border-color: #0EDCCE;
}

/* Mobile */
@media (max-width: 992px) {
    .blog-layout-grid {
       display: grid;
        grid-template-columns: 2fr 1fr; /* Conteúdo ocupa 2 partes, Sidebar 1 parte */
        gap: 40px; /* Espaço entre eles */
        align-items: start;

    }
}

/* ==========================================================================
   CSS COMPLETO: PÁGINA DE POST ÚNICO (SINGLE PAGE)
   ========================================================================== */

/* --- 1. CONFIGURAÇÃO GERAL DO CONTAINER --- */

/* Fundo cinza claro para a área principal */
.single-post .blog-main-wrapper {
    background-color: #F8F9FA; 
    padding: 4rem 0;
    min-height: 100vh;
}

/* O Grande Container Centralizado */
.single-post .blog-layout-grid {
    display: flex;
    /* Proporção: 3 partes para texto (Largo), 1 parte para Sidebar (Estreito) */
    grid-template-columns: 3fr 1fr; 
    gap: 4rem; /* Espaço generoso entre o texto e a sidebar */
    
    /* Largura Aumentada para 1300px (Padrão era 1100px) */
    max-width: 1100px; 
    width: 100%;
    
    /* Centraliza o bloco na tela */
    margin: 0 auto; 
    padding-left: 1rem;
    padding-right: 1rem;
}

/* --- 2. HERO SECTION (Cabeçalho Escuro) --- */
.blog-hero-section {
    background-color: #000000; /* Sua cor escura padrão */
    color: #FFFFFF;
    padding: 6rem 1rem; /* Altura do cabeçalho */
    text-align: center;
    position: relative;
    
    /* Padrão de Grid Decorativo no Fundo */
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Título do Post no Hero */
.single-hero-title {
    font-size: 3rem; /* Título Grande */
    font-weight: 700;
    color: #FFFFFF !important;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Meta dados (Data e Autor) no Hero */
.single-hero-meta {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    font-weight: 500;
}
.single-hero-meta span { margin: 0 15px; }
.single-hero-meta i { color: var(--cor-verde-destaque, #0EDCCE); margin-right: 5px; }

/* Categoria (Tag colorida) */
.single-hero-category {
    background-color: var(--cor-verde-destaque, #0EDCCE);
    color: #000;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

/* --- 3. CARTÃO DO CONTEÚDO (Papel Branco) --- */
.single-article-card {
    background-color: #F8F9FA;
   
    border-radius: 16px;
    /* Espaçamento interno grande para leitura confortável */
    padding: 4rem; 
    
}

/* Imagem Destacada dentro do post */
.single-featured-image img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 3rem;
}

/* --- 4. TIPOGRAFIA DO ARTIGO (Legibilidade) --- */

/* Texto Corrido */
.entry-content p, 
.entry-content li {
    color: #2D3748; /* Cinza escuro para contraste no fundo branco */
    font-size: 1.18rem; /* Fonte levemente maior */
    line-height: 1.8;   /* Altura da linha confortável */
    margin-bottom: 1.5rem;
}

/* Subtítulos (H2, H3, H4...) */
.entry-content h2, 
.entry-content h3, 
.entry-content h4, 
.entry-content h5 {
    color: #1A202C; /* Quase preto */
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.entry-content h2 {
    font-size: 2rem;
    color: var(--cor-verde-destaque, #0EDCCE); /* Destaque na cor da marca */
    border-left: 4px solid var(--cor-verde-destaque, #0EDCCE);
    padding-left: 1rem;
}

/* Links no texto */
.entry-content a {
    color: var(--cor-verde-destaque, #0EDCCE);
    text-decoration: underline;
    font-weight: 600;
}
.entry-content a:hover { color: #2C2D3A; }

/* Citações */
.entry-content blockquote {
    background-color: #f8f9fa;
    border-left: 4px solid #2C2D3A;
    margin: 2rem 0;
    padding: 2rem;
    font-style: italic;
    color: #4A5568;
}

.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single, .ast-separate-container .ast-author-box, .ast-separate-container .ast-404-layout-1, .ast-separate-container .no-results{
    padding: 0rem !important;
}

.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single, .ast-separate-container .comment-respond{
    padding: 0rem !important;
}

.ast-separate-container .ast-article-single:not(.ast-related-post), .ast-separate-container .error-404, .ast-separate-container .no-results, .single.ast-separate-container .site-main .ast-author-meta, .ast-separate-container .related-posts-title-wrapper, .ast-separate-container .comments-count-wrapper, .ast-box-layout.ast-plain-container .site-content, .ast-padded-layout.ast-plain-container .site-content, .ast-separate-container .ast-archive-description, .ast-separate-container .comments-area{
    background-color: #F8F9FA;
}

/* --- 5. SIDEBAR (Lateral Direita) --- */
.blog-sidebar-area {
    position: relative;
    top: 0px; /* Fixa ao rolar */
    min-width: 300px;
}

/* Estilo dos Widgets */
.blog-sidebar-area .widget {
    background-color: #FFFFFF;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.blog-sidebar-area .widget-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2D3748;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--cor-verde-destaque, #0EDCCE);
    padding-bottom: 0.5rem;
    display: inline-block;
}

/* Lista de Últimos Posts */
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget ul li {
    padding: 12px 0;
    border-bottom: 1px solid #edf2f7;
}
.widget ul li:last-child { border-bottom: none; }

.widget ul li a {
    color: #4A5568;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1.4;
    display: block;
}
.widget ul li a:hover { color: var(--cor-verde-destaque, #0EDCCE); }

/* --- 6. BARRA DE PESQUISA (Search) --- */
.widget_search .search-form { display: flex; }
.widget_search .search-field {
    width: 100%;
    padding: 12px;
    border: 1px solid #CBD5E0;
    border-radius: 6px 0 0 6px;
    background: #F7FAFC;
    color: #2D3748;
}
.widget_search .search-submit {
    background-color: #2C2D3A;
    color: #FFF;
    border: none;
    padding: 0 20px;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
}
.widget_search .search-submit:hover { background-color: var(--cor-verde-destaque, #0EDCCE); }

/* --- 7. RESPONSIVIDADE --- */

/* Tablets (Ajusta Grid e Padding) */
@media (max-width: 1200px) {
    .single-post .blog-layout-grid {
        gap: 2rem; 
        max-width: 100%;
    }
    .single-article-card {
        padding: 3rem;
    }
}

/* Mobile (Vira uma coluna única) */
@media (max-width: 992px) {
    .single-post .blog-layout-grid {
        grid-template-columns: 1fr; /* 1 Coluna */
        gap: 3rem;
    }
    .single-article-card {
        padding: 1.5rem; /* Menos espaço no celular */
    }
    .single-hero-title {
        font-size: 2rem;
    }
    .blog-sidebar-area {
        position: static; /* Remove sticky no mobile */
    }
}

/* ==========================================================================
   OCULTAR SIDEBAR NO MOBILE
   ========================================================================== */

@media (max-width: 992px) {
    /* Esconde a área da sidebar */
    .blog-sidebar-area {
        display: none !important;
    }

    /* Garante que o conteúdo ocupe 100% da largura sem a sidebar */
    .blog-layout-grid,
    .single-post .blog-layout-grid {
        grid-template-columns: 1fr !important; /* Uma única coluna */
        display: block; /* Remove o comportamento de grid se necessário */
    }

    /* Ajuste de margens do conteúdo para não ficar "buraco" */
    .blog-content-area {
        width: 100%;
        margin-bottom: 2rem;
    }
}

.single-social-share {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* Uma linha para separar das tags */
}

.single-social-share .share-title {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
}

.single-social-share .share-icons a {
    display: inline-block;
    margin-right: 15px;
    font-size: 20px;
    color: #333; /* Cor dos ícones */
    transition: color 0.3s ease;
}

.single-social-share .share-icons a:hover {
    color: #e3350d; /* Cor ao passar o rato (ex: Laranja Incandescente) */
}

/* Estilo para a CTA da Sidebar */
.widget_cta_special {
    margin-bottom: 30px; /* Espaço abaixo da CTA */
}

.widget_cta_special .cta-link-wrapper {
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Efeito ao passar o mouse */
.widget_cta_special .cta-link-wrapper:hover {
    transform: translateY(-3px); /* Levanta ligeiramente a imagem */
    opacity: 0.95;
}

/* Ajuste da imagem */
.cta-banner {
    border: 1px solid #eee; /* Borda sutil opcional */
}