/* ================================== */
/*          ESTILOS GERAIS (FINAL)    */
/* ================================== */
html {
    height: 100%;
}

body {
    /* Estrutura para o rodapé fixo (Sticky Footer) */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    
    /* Estilos Visuais */
    font-family: "Montserrat", sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f9f9f9;
    color: #333;
}

.page-wrapper {
    flex-grow: 1; /* Faz o conteúdo principal crescer e empurrar o rodapé */
}

.container {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}


/* ================================== */
/*      ESTILOS DA BARRA SUPERIOR (VERSÃO FINAL)     */
/* ================================== */

.top-bar {
    background-color: #A7231F;
    color: #fff;
    font-weight: 500;
    font-size: 1.1rem;
    overflow: hidden; 
    padding: 8px 0;
}

.top-bar-content {
    /* Define este elemento como o ponto de referência para a posição absoluta */
    position: relative; 
    
    /* Garante que ele tenha altura para conter o texto animado */
    min-height: 1.5em; 

    /* Usa flexbox para centralizar, como um fallback */
    display: flex;
    align-items: center;
    justify-content: center;
}

#sliding-text {
    position: absolute;
    
    /* A técnica de centralização correta */
    left: 50%;
    transform: translateX(-150%) scale(0.8); /* Começa fora e pequeno */
    opacity: 0;
    
    white-space: nowrap;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease-out;
}

#sliding-text.is-visible {
    opacity: 1;
    /* Move para o centro exato e para o tamanho normal */
    transform: translateX(-50%) scale(1); 
}

/* ================================== */
/*     AJUSTE RESPONSIVO DA TOP-BAR     */
/* ================================== */
@media (max-width: 768px) {
    .top-bar {
        font-size: 0.6rem; /* Fonte um pouco maior para legibilidade */
    }
}

/* ================================== */
/*   CSS DO HEADER (VERSÃO CORRIGIDA)   */
/* ================================== */

/* --- GARANTE QUE O HEADER FIQUE NO TOPO --- */
/* A div que envolve tudo, inclusive a barra superior */
.sticky-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Define a camada mais alta para o conjunto */
    background-color: #fff; /* Fundo para não ficar transparente ao rolar */
}

header {
    /* O header em si não precisa mais de position, apenas o seu container sticky */
    border-bottom: 1px solid #e7e7e7;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .logo-link img { max-height: 50px; width: auto; }

.main-menu {
    margin: 0; padding: 0; list-style: none; display: flex;
}
.main-menu li {
    position: relative;
}
.main-menu > li > a {
    display: flex; align-items: center; padding: 25px 15px;
    color: #333; text-decoration: none; font-weight: 500; font-size: 1.1rem;
    transition: all 0.2s ease; cursor: pointer;
}
.main-menu > li > a:hover, .main-menu > li.is-open > a {
    color: #A7231F; background-color: #f9f9f9;
}
.main-menu li.is-open > a > i.fas { transform: rotate(180deg); }

/* --- A REGRA CORRETA PARA SUBMENUS NO DESKTOP --- */
.sub-menu {
    display: none;
    position: absolute; /* ESSENCIAL PARA O DROPDOWN FUNCIONAR */
    top: 100%; left: 0;
    background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 8px; padding: 10px; min-width: 220px; list-style: none;
}
.menu-item-has-children.is-open > .sub-menu {
    display: block; /* O JavaScript controla isso */
}
/* ... (outras regras de submenu) ... */
.sub-menu-level-2 { top: -11px; left: 100%; }
.sub-menu li a { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; color: #333; text-decoration: none; border-radius: 5px; white-space: nowrap; }
.sub-menu li a:hover { background-color: #A7231F; color: #fff; }

/* ======================================================== */
/*   CÓDIGO UNIFICADO E FINAL PARA O HEADER                 */
/* ======================================================== */

/* --- Estilos de Desktop --- */
header { background: #fff; border-bottom: 1px solid #e7e7e7; }
header .container { display: flex; justify-content: space-between; align-items: center; }
header .logo-link img { max-height: 50px; width: auto; }
.sticky-header { position: sticky; top: 0; left: 0; width: 100%; z-index: 1000; background-color: #fff; }
.menu-toggle { display: none; }
.main-menu { margin: 0; padding: 0; list-style: none; display: flex; }
.main-menu li { position: relative; }
.main-menu > li > a { display: flex; align-items: center; padding: 25px 15px; color: #333; text-decoration: none; font-weight: 500; font-size: 1.1rem; cursor: pointer; }
.sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); min-width: 220px; list-style: none; }
.menu-item-has-children.is-open > .sub-menu { display: block; }
.sub-menu li a { display: block; padding: 12px 15px; color: #333; text-decoration: none; }
.sub-menu li a:hover { background-color: #A7231F; color: #fff; }

/* --- NOVA REGRA PARA TRAVAR O SCROLL DO BODY --- */
body.menu-body-lock {
    overflow: hidden;
}

/* ======================================================== */
/*   CÓDIGO UNIFICADO E FINAL PARA O HEADER                 */
/* ======================================================== */

/* --- 1. ESTILOS DE DESKTOP (Seu código original funcional) --- */
header {
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .logo-link img { max-height: 50px; width: auto; }

.sticky-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Z-INDEX ALTO PARA O HEADER */
    background-color: #fff;
}

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

.main-menu {
    margin: 0; padding: 0; list-style: none; display: flex;
}
.main-menu li {
    position: relative;
}
.main-menu > li > a {
    display: flex; align-items: center; padding: 25px 15px;
    color: #333; text-decoration: none; font-weight: 500; font-size: 1.1rem;
    cursor: pointer;
}
.sub-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    min-width: 220px;
    list-style: none;
    border-radius: 8px;
    padding: 10px;
}
.menu-item-has-children.is-open > .sub-menu {
    display: block; /* O JS controla a abertura no desktop */
}
.sub-menu li a {
    display: block; padding: 12px 15px;
    color: #333; text-decoration: none;
}
.sub-menu li a:hover {
    background-color: #A7231F;
    color: #fff;
}

/* --- 2. RESPONSIVIDADE (A SOLUÇÃO FINAL) --- */
@media (max-width: 992px) {

    /* Esconde a lista de links do desktop */
    .main-menu {
        display: none;
    }

    /* Mostra o botão hambúrguer */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px; height: 24px;
        background: transparent; border: none;
        cursor: pointer; padding: 0;
    }
    .menu-toggle span {
        display: block; width: 100%; height: 3px;
        background-color: #333;
    }

    /* --- A CORREÇÃO DE CAMADAS (Z-INDEX) --- */
   .main-navigation.is-active-mobile .main-menu a {
    display: block;
    padding: 15px 25px;
    padding-top: 70px; /* <<<-- ADICIONADO AQUI */
    border-bottom: 1px solid #f0f0f0;
}
    
    /* Força os itens a aparecerem */
    .main-navigation.is-active-mobile .main-menu {
        display: block !important;
    }
    
    .main-navigation.is-active-mobile .main-menu li {
        display: block !important;
        position: static;
    }
    
    /* Estilos dos links e submenus no mobile */
    .main-navigation.is-active-mobile .main-menu a {
        display: block; padding: 15px 25px;
        border-bottom: 1px solid #f0f0f0;
    }
    .main-navigation.is-active-mobile .sub-menu {
        display: none;
        position: static;
        box-shadow: none;
        background-color: #f8f8f8;
    }
    .main-navigation.is-active-mobile .menu-item-has-children.is-open > .sub-menu {
        display: block;
    }
}

/* ================================== */
/*   SLIDER DE IMAGENS (VERSÃO FINAL) */
/* ================================== */
.full-width-slider {
    position: relative; /* Base para o posicionamento dos slides */
    width: 100%;
    line-height: 0; /* Remove espaços em branco indesejados abaixo das imagens */
}

.full-width-slide {
    /* Posiciona todos os slides uns sobre os outros no mesmo lugar */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    
    /* Lógica de transição suave (fade in/out) */
    opacity: 0;
    z-index: 1;
    transition: opacity 1.5s ease-in-out; /* Transição mais lenta e suave */
}

.full-width-slide.active {
    /* O slide ativo define a altura do container e fica visível */
    position: relative; /* Tira o slide do empilhamento para definir a altura */
    opacity: 1;
    z-index: 2;
}

.full-width-slide img {
    /* Garante que a imagem seja responsiva */
    width: 100%;      /* Imagem sempre ocupa 100% da largura */
    height: auto;     /* Altura se ajusta para não distorcer a imagem */
    display: block;   /* Remove pequenos espaços em branco */
}




/* ================================== */
/*    ESTILOS DA SEÇÃO DE SERVIÇOS    */
/* ================================== */
.services-section {
    padding: 4rem 0;
    background-color: #f9f9f9;
    border-top: 8px solid #A7231F;
}
.section-title {
    text-align: center;
    font-size: 2rem;
    color: #333;
    margin-bottom: 3rem;
}
.services-grid {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    align-items: stretch; 
}
.service-card {
    width: 350px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.4s ease;
    overflow: hidden; 
    border-radius: 15px;
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15), 0 8px 10px rgba(0, 0, 0, 0.1);
}
.card-image { width: 100%; height: auto; display: block; }
.card-content {
    background-color: #A7231F;
    color: #fff;
    padding: 3rem;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    text-align: center;
}
.card-content h3 { margin: 0 0 1rem 0; font-size: 1.8rem; }
.card-content hr {
    border: 0; border-top: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 auto 1rem auto; width: 100%;
}

.card-content p { 
    margin: 0; 
    font-size: 1rem; 
    line-height: 1.5; 
    font-size: 18px;
}


/* ================================================== */
/*   RESPONSIVIDADE PARA A SEÇÃO DE SERVIÇOS (FINAL)  */
/* ================================================== */
@media (max-width: 768px) {
    
    /* Ajusta o título da seção */
    .services-section .section-title {
        font-size: 1.6rem; /* Aumentei um pouco para melhor leitura */
        line-height: 1.4;
        padding: 0 1rem; /* Adiciona um respiro lateral ao título */
    }

    /* "Limpa" o container para permitir a centralização perfeita */
    .services-section .container {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%; /* Garante que ele ocupe toda a tela */
    }

    /* Ajusta o grid */
    .services-section .services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        justify-items: center;
    }

    /* Ajusta o card */
    .services-section .service-card {
        width: 90%;       /* O card ocupa 90% da tela */
        max-width: 400px;  /* Com um limite máximo */
    }
}


/* ================================== */
/*   ESTILOS DA SEÇÃO DE PRODUTOS (CORRIGIDO) */
/* ================================== */
/* ================================== */
/*   ESTILOS DA SEÇÃO DE PRODUTOS (SOLUÇÃO FINAL) */
/* ================================== */
/* ================================== */
/*   ESTILOS DA SEÇÃO DE PRODUTOS (SOLUÇÃO FINAL) */
/* ================================== */
.products-section {
    padding: 4rem 0;
    background-color: #fff;
    border-top: 8px solid #5c5a5a;
}
.products-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem; /* Padding para o respiro nas bordas do desktop */
}
.products-section .section-title,
.products-section .section-subtitle {
    text-align: center;
}
.products-section .section-subtitle {
    color: #888; font-weight: 500;
    margin-top: -2.5rem; margin-bottom: 3rem;
}

/* --- O GRID PARA DESKTOP --- */
.products-grid {
    display: grid;
    /* CRIA 3 COLUNAS DE TAMANHO IGUAL */
    grid-template-columns: repeat(3, 1fr); 
    /* CRIA O ESPAÇAMENTO DE 2REM ENTRE AS COLUNAS */
    gap: 2rem; 
}

/* --- ESTILO DO CARD DE PRODUTO --- */
.product-card {
    background-color: #fff;
    border: 2px solid #A7231F;
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    
    /* O card ocupa 100% da sua coluna no grid */
    width: 100%; 
    /* Garante que o padding seja calculado corretamente */
    box-sizing: border-box; 
}
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* ... (O resto do seu CSS para .product-image-wrapper, etc., continua igual) ... */
.product-image-wrapper { height: 180px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.product-image { max-width: 90%; max-height: 160px; }
.product-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.product-info h3 { font-size: 1.6rem; color: #555; line-height: 1.3; margin: 0 0 1.5rem 0; }
.product-actions { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.action-icon { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background-color: #A7231F; color: #fff; border-radius: 50%; text-decoration: none; font-size: 1.2rem; }

/* ================================================== */
/*   RESPONSIVIDADE PARA A SEÇÃO DE PRODUTOS (FINAL)  */
/* ================================================== */
@media (max-width: 767px) {
    
    /* "Limpa" o container no mobile para permitir centralização */
    .products-section .container {
        padding-left: 0;
        padding-right: 0;
        width: 90%;
    }

    /* Ajusta o card para ocupar 90% da tela */
    .products-section .product-card {
        width: 100%;
    }
}

/* Para tablets, muda para 2 colunas */
@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Para desktops, muda para 3 colunas */
@media (min-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .products-section .container {
        /* Adiciona o espaçamento lateral */
        padding-left: 2rem;
        padding-right: 2rem;
    }
}





/* ================================== */
/*   ESTILOS SEÇÃO MISSÃO/VISÃO       */
/* ================================== */
.mission-vision-section {
    background-color: #A7231F;
    color: #fff;
    padding: 6rem 0;
    position: relative;
}
.mission-vision-grid { display: flex; align-items: center; gap: 3rem; }
.mission-vision-text-col, .mission-vision-image-col { flex: 1; }
.feature-item { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2.5rem; }
.feature-icon { font-size: 1.8rem; padding-top: 5px; }
.feature-text h3 { margin: 0 0 0.5rem 0; font-size: 1.8rem; font-weight: 700; }
.feature-text p { margin: 0; opacity: 0.9; font-size: 18px; line-height: 1.7; }
.mission-vision-image-col img { width: 100%; height: auto; border-radius: 20px; display: block; }
.mission-vision-image-col img { 
    width: 100%; 
    height: auto; 
    border-radius: 20px; 
    display: block; 
}

.about-text-col p { 
    font-size: 1.1rem; 
    line-height: 1.8; 
    color: #666; 
    margin-bottom: 1rem; 
    font-size: 18px; 
}


.mission-vision-image-col img { 
    width: 100%; 
    height: auto; 
    border-radius: 20px; 
    display: block; 
}


/* ======================================================== */
/*   RESPONSIVIDADE PARA A SEÇÃO "MISSÃO/VISÃO" (FINAL)     */
/* ======================================================== */
@media (max-width: 992px) {

    /* 1. "Limpa" o container para dar espaço, se necessário */
    .mission-vision-section .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* 2. Empilha e centraliza o grid */
    .mission-vision-grid {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    /* 3. A COLUNA DE IMAGEM VEM PRIMEIRO */
    .mission-vision-image-col {
        order: 1; /* Imagem aparece primeiro */
        width: 90%; /* Ocupa 100% da largura da tela */
    }

    /* 4. A COLUNA DE TEXTO VEM DEPOIS */
    .mission-vision-text-col {
        order: 2; /* Texto aparece depois */
        width: 90%; /* Bloco de texto ocupa 90% para ter um respiro */
        max-width: 500px;
    }
    
    /* Centraliza os itens (ícone + texto) dentro da coluna de texto */
    .feature-item {
        justify-content: center;
        text-align: left;
    }
}


















/* ================================== */
/*   ESTILOS SEÇÃO ATEND. ONLINE      */
/* ================================== */
.online-service-section {
    padding: 6rem 0;
    background-color: #eaebec;
}
.online-service-grid {
    display: flex;
    align-items: center;
    gap: 4rem;
}
.online-service-image-col, .online-service-text-col { flex: 1; align-self: center; }
.image-composition { position: relative; }
.image-composition img { width: 100%; border-radius: 20px; }
.deco-circle { position: absolute; background-color: #A7231F; border-radius: 50%; z-index: -1; }
.deco-circle.circle-1 { width: 150px; height: 150px; bottom: -50px; right: -30px; }
.deco-circle.circle-2 { width: 80px; height: 80px; bottom: 50px; right: -60px; }
.online-service-text-col h2 { font-size: 2.5rem; font-weight: 700; color: #444; }
.section-subtitle-alt { font-size: 1.1rem; color: #777; margin-top: -1rem; }
.title-hr { display: none; }
.service-item { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.service-icon { font-size: 2.5rem; color: #A7231F; }
.service-text h4 { margin: 0 0 0.3rem 0; font-size: 1.3rem; color: #444; }
.service-text p { margin: 0; color: #666; font-size: 18px; }



/* ======================================================== */
/*   RESPONSIVIDADE PARA A SEÇÃO "ATENDIMENTO ONLINE" (FINAL) */
/* ======================================================== */
@media (max-width: 992px) {

    /* 1. "Limpa" o container para dar espaço, se necessário */
    .online-service-section .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* 2. Empilha e centraliza o grid */
    .online-service-grid {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    /* 3. A COLUNA DA IMAGEM VEM PRIMEIRO */
    .online-service-image-col {
        order: 1; /* Imagem aparece primeiro */
        width: 90%; /* Ocupa 100% da largura da tela */
    }

    /* 4. A COLUNA DE TEXTO VEM DEPOIS */
    .online-service-text-col {
        order: 2; /* Texto aparece depois */
        width: 90%; /* Bloco de texto ocupa 90% para ter um respiro */
        max-width: 500px; /* E não fica muito largo */
    }

    /* Ajusta o título */
    .online-service-text-col h2 {
        font-size: 2rem;
    }
    
    /* Centraliza os itens de serviço (WhatsApp, Acesso Remoto) */
    .service-item {
        justify-content: center;
        text-align: left;
    }

    /* Esconde os círculos decorativos no mobile */
    .deco-circle {
        display: none;
    }
}






/* ================================== */
/*    ESTILOS DA SEÇÃO "SOBRE NÓS"    */
/* ================================== */
.about-section { padding: 5rem 0; background-color: #F5F6FA; }
.about-grid { display: flex; align-items: center; gap: 4rem; }
.about-image-col, .about-text-col { flex: 1; }
.about-image-wrapper { position: relative; }
.about-main-photo {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(15px 0 0 #A7231F) drop-shadow(0 15px 0 #A7231F);
}
.about-bg-graphic {
    position: absolute; width: 40%; left: -20%; top: 50%;
    transform: translateY(-50%); z-index: -1; opacity: 0.8;
}
.about-text-col h2 { font-size: 2.5rem; font-weight: 700; color: #444; margin: 0 0 1.5rem 0; }
.about-text-col p { font-size: 1.1rem; line-height: 1.8; color: #666; margin-bottom: 1rem; font-size: 18px; }+


/* ... (suas regras existentes para .about-section, etc.) ... */
.about-text-col p { 
    font-size: 1.1rem; 
    line-height: 1.8; 
    color: #666; 
    margin-bottom: 1rem; 
    font-size: 18px; 
}


/* ======================================================== */
/*   RESPONSIVIDADE PARA A SEÇÃO "SOBRE NÓS" (SEPARADA)   */
/* ======================================================== */
@media (max-width: 992px) {

    /* 1. "Limpa" o container no mobile para dar espaço à imagem */
    .about-section .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* 2. Empilha as colunas verticalmente */
    .about-grid {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    /* 3. Define a ordem: IMAGEM PRIMEIRO */
    .about-image-col {
        order: 1; /* Imagem no topo */
        width: 90%; /* Imagem ocupa 100% da largura */
    }

    /* 4. Define a ordem: TEXTO DEPOIS */
    .about-text-col {
        order: 2; /* Texto embaixo */
        width: 90%; /* Bloco de texto ocupa 90% para ter um respiro */
        max-width: 500px;
    }

    /* 5. Remove os efeitos visuais no mobile para um visual mais limpo */
    .about-main-photo {
        filter: none;
    }
    .about-bg-graphic {
        display: none;
    }
    .about-text-col h2 {
        font-size: 2rem;
    }
}


/* ================================== */
/*     ESTILOS DA SEÇÃO "NOSSA BASE"  */
/* ================================== */
.team-section { padding: 5rem 0; background-color: #fff; text-align: center; } /* Adicionado text-align */
.section-header { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.header-line { flex-grow: 1; border: 0; border-top: 1px solid #e0e0e0; }

/* Adicionado estilo para o subtítulo para centralizar e limitar a largura */
.team-section .section-subtitle {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #666;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr; /* Padrão para mobile */
    gap: 2rem;
    margin-top: 3rem;
    text-align: left; /* Garante que o texto dentro dos cards alinhe à esquerda */
}
.team-card {
    background-color: #fff;
    border-radius: 20px; /* Bordas um pouco menos arredondadas */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease;
}
.team-card:hover { transform: translateY(-10px); }
.team-card-header {
    background-color: #A7231F; color: #fff; padding: 1.5rem 2rem;
    position: relative;
    padding-left: 3.5rem; 
}
.team-card-header::before {
    content: ''; position: absolute; left: 1.5rem; /* Ajustado para melhor alinhamento */
    top: 50%; transform: translateY(-50%);
    display: block; width: 4px; height: 50%; background-color: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
}
.team-card-header h3 { margin: 0; font-size: 1.6rem; font-weight: 700; } /* Fonte um pouco menor */
.team-card-header span { display: block; font-size: 0.9rem; opacity: 0.9; margin-top: 0.25rem; }
.team-card-photo { line-height: 0; }
.team-card-photo img { width: 100%; height: auto; }



/* ================================================ */
/*   RESPONSIVIDADE PARA A SEÇÃO "NOSSA BASE" (FINAL) */
/* ================================================ */

/* --- PADRÃO PARA MOBILE (TELAS MENORES QUE 768px) --- */
@media (max-width: 767px) {
    /* "Limpa" o container no mobile */
    .team-section .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* O grid já está com 1 coluna por padrão, agora ajustamos o card */
    .team-section .team-card {
        width: 90%; /* Card ocupa 90% da tela */
        margin: 0 auto; /* Centraliza o card */
    }
}

/* --- TABLETS (A PARTIR DE 768px) --- */
@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- DESKTOPS (A PARTIR DE 1024px) --- */
@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}






/* ================================== */
/*   ESTILOS SEÇÃO DE REGIÕES (CORRIGIDO) */
/* ================================== */

/* A seção principal com o fundo vermelho */
.regions-section-cta {
    padding: 5rem 0;
    background-color: #A7231F;
    text-align: center;
}

/* Títulos claros para contrastar com o fundo */
.section-title-light {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 0.5rem;
}
.section-subtitle-light {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* O grid que organiza os cards */
.regions-grid {
    display: grid;
    grid-template-columns: 1fr; /* Padrão para mobile: 1 coluna */
    gap: 2rem;
}

/* O estilo de cada card branco individual */
.region-card {
    background-color: #fff;
    padding: 2.5rem 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.region-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.region-card h3 {
    font-size: 1.6rem;
    color: #333;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1.5rem;
}
.whatsapp-icon-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    font-size: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}
.whatsapp-icon-button:hover {
    background-color: #1ebe58;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}


/* ================================================ */
/*   RESPONSIVIDADE PARA A SEÇÃO DE REGIÕES (FINAL) */
/* ================================================ */

/* --- PADRÃO PARA MOBILE (TELAS MENORES QUE 576px) --- */
@media (max-width: 575px) {
    
    /* 1. "Limpa" o container no mobile */
    .regions-section-cta .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* O grid já está com 1 coluna por padrão, então ajustamos o card */
    .regions-section-cta .region-card {
        width: 80%;       /* Card ocupa 90% da tela */
        margin: 0 auto;   /* Centraliza o card horizontalmente */
    }
}

/* --- CELULARES MAIORES E TABLETS NA VERTICAL (A PARTIR DE 576px) --- */
@media (min-width: 576px) {
    .regions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- DESKTOPS (A PARTIR DE 992px) --- */
@media (min-width: 992px) {
    .regions-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}



/* ================================== */
/*   ESTILOS DA SEÇÃO "ENTRE EM CONTATO" */
/* ================================== */
.contact-section {
    padding: 5rem 0;
    background-color: #f0f2f5;
}

/* --- Cards de Informação --- */
.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 2rem;
    margin: 0 auto 4rem auto;
    max-width: 1050px;
    text-align: center;
  
}



.contact-info-card {
    background-color: transparent;
    padding: 2rem;
    border-radius: 15px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.contact-info-card:hover {
    background-color: #fff;
    border-color: #A7231F;
}

.contact-info-card i {
    font-size: 2.5rem;
    color: #888;
    margin-bottom: 1rem;
}

.contact-info-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
    color: #333;
}

.contact-info-card p {
    margin: 0;
    color: #777;
    line-height: 1.6;
    font-size: 18px;
}

/* --- Estilos do Formulário --- */
.contact-form {
    max-width: 1050px;
    margin: auto;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    row-gap: 1.5rem;
}

/* ... (outros estilos como whatsapp-link e landline-numbers permanecem iguais) ... */

.whatsapp-link a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
.whatsapp-link a:hover { color: #A7231F; }
.whatsapp-link .fa-whatsapp { margin-left: 8px; font-size: 1.2em; color: #25d366; vertical-align: middle; }
.landline-numbers { margin-top: 1rem; color: #777; }
.landline-numbers i { margin-right: 8px; font-size: 1.1em; }


.form-group {
    width: 100%;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.contact-section .form-group input,
.contact-section .form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #ffffff !important;
    text-align: center;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #A7231F;
    box-shadow: 0 0 0 3px rgba(167, 35, 31, 0.2);
}

/* --- Botão de Envio --- */
.form-submit {
    text-align: center;
    margin-top: 2rem;
}

.submit-button {
    background-color: #A7231F;
    color: #fff;
    border: none;
    padding: 1rem 3rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-button:hover {
    background-color: #c0392b;
    transform: translateY(-3px);
}

/* ======================================================== */
/*   RESPONSIVIDADE PARA A SEÇÃO "ENTRE EM CONTATO" (FINAL) */
/* ======================================================== */
@media (max-width: 768px) {

    /* --- 1. A SEÇÃO COM O FUNDO COLORIDO --- */
    .contact-section {
        /*
           Usa a margem negativa para "puxar" a seção para as bordas.
           Ajuste este valor se o padding geral do seu site for diferente.
        */
        margin-left: -2rem;
        margin-right: -2rem;

        /* Estilos visuais */
        
        padding: 2.5rem 0;
    }

    /* --- 2. O CONTAINER INTERNO --- */
    /* Este container agora controla TODO o espaçamento lateral */
    .contact-section .container {
        padding-left: 2rem;
        padding-right: 2rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* --- 3. O GRID DE CARDS (JÁ ESTAVA CORRETO) --- */
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        justify-items: center;
        margin-bottom: 2.5rem;
    }
    
    .contact-info-card {
        max-width: 350px;
        width: 100%;
        text-align: center;
        padding: 1.5rem;
        background-color: #fff;
        border-radius: 15px;
    }

    /* --- 4. O BLOCO DO FORMULÁRIO --- */
    .contact-form {
        width: 100%;
        padding: 0;
    }

    /* --- 5. A CORREÇÃO FINAL: GRID DO FORMULÁRIO CENTRALIZADO --- */
    .form-grid {
        width: 90%; /* Mantém a sua largura de 90% */
        margin-left: auto;  /* A mágica da centralização */
        margin-right: auto; /* A mágica da centralização */
        
        grid-template-columns: 1fr;
        row-gap: 1.2rem;
    }

    /* --- 6. Garante que os inputs se comportem bem --- */
    .form-group input,
    .form-group textarea {
        width: 100%;
        box-sizing: border-box;
    }
}


/* ================================== */
/*        ESTILOS DO FOOTER           */
/* ================================== */
/* ================================== */
/*        ESTILOS DO FOOTER (FINAL COM FLEXBOX) */
/* ================================== */

footer {
    background-color: #A7231F;
    color: #fff;
    padding: 3rem 1rem;
    
    /* A MÁGICA ESTÁ AQUI: */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente (bom para textos com mais de uma linha) */
}

footer p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center; /* Camada extra de segurança para a centralização */
    max-width: 90%; /* Garante que o texto quebre a linha em telas muito estreitas */
}


/* ================================================ */
/*   RESPONSIVIDADE PARA O FOOTER (AJUSTE DE FONTE) */
/* ================================================ */
@media (max-width: 768px) {
    footer {
        padding: 2.5rem 1rem;
    }

    footer p {
        font-size: 0.9rem;
    }
}

/* ################################################################## */
/* #                 REGRAS DE RESPONSIVIDADE                       # */
/* ################################################################## */
@media (max-width: 992px) {
    .menu-toggle {
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1001;
    }
    .menu-toggle span {
        display: block; width: 25px; height: 3px;
        background-color: #333; margin: 5px 0;
        transition: all 0.3s ease;
    }
    .main-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .main-menu.is-active-mobile {
        display: flex;
    }
    .sub-menu, .sub-menu-level-2 {
        position: static;
        box-shadow: none;
        border: none;
        background-color: #f9f9f9;
        padding-left: 1.5rem;
    }
   
}
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .regions-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
}

/* ================================== */
/*       ESTILOS DA SEÇÃO "SISTEMAS"    */
/* ================================== */
.systems-section {
    padding: 5rem 0;
    background-color: #f9f9f9;
    text-align: center;
}
.section-highlight {
    font-size: 2.2rem;
    font-weight: 700;
    color: #A7231F;
    margin: 1rem 0 2rem 0;
}
.features-list { display: none; }
.systems-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.system-card-v2 {
    width: 450px;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.system-card-header {
    background-color: #A7231F;
    color: #fff;
    padding: 1rem 1.5rem;
}
.system-card-header h3 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 500;
}
.myrp-card .system-card-header h3 {
    font-size: 1.6rem;
    line-height: 1.3;
}
.system-card-body {
    padding: 2rem 1.5rem;
    flex-grow: 1;
}
.system-logo {
    text-align: center;
    margin-bottom: 2rem;
}
.system-logo img {
    max-height: 60px;
    width: auto;
}
.system-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.system-features li {
    font-weight: 500;
    color: #555;
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 25px;
}
.system-features li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #A7231F;
    position: absolute;
    left: 0;
    top: 2px;
}
.system-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
    text-align: center;
}
.system-card-footer {
    padding: 1.5rem;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.btn-contract {
    display: inline-block;
    background-color: #A7231F;
    color: #fff;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.btn-contract:hover {
    background-color: #c0392b;
    transform: translateY(-3px);
}
.btn-more-info {
    display: inline-block;
    background-color: #fff;
    color: #555;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    border: 2px solid #ddd;
    transition: all 0.3s ease;
}
.btn-more-info:hover {
    background-color: #eee;
    border-color: #ccc;
}
.section-link a {
    color: #555;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid #A7231F;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}
.section-link a:hover {
    color: #A7231F;
}


/* ... (suas regras existentes para .systems-section, .system-card-v2, etc.) ... */
.section-link a:hover {
    color: #A7231F;
}


/* ======================================================== */
/*   RESPONSIVIDADE PARA A SEÇÃO "SISTEMAS" (SEPARADA)      */
/* ======================================================== */
@media (max-width: 991px) { /* Usamos 991px para alinhar com o breakpoint dos outros flex */

    /* "Limpa" o container no mobile para dar mais espaço */
    .systems-section .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* Empilha os cards */
    .systems-grid {
        flex-direction: column;
        align-items: center; /* Centraliza os cards empilhados */
    }
    
    /* Ajusta a largura do card */
    .system-card-v2 {
        width: 90%; /* Ocupa 90% da largura da tela */
        max-width: 450px; /* Mantém a largura máxima definida */
    }

    /* Ajusta o título principal da seção */
    .systems-section .section-title {
        font-size: 1.8rem;
    }
}



/* ================================== */
/*   ESTILOS DA PÁGINA DE DEPOIMENTOS (VERSÃO FINAL) */
/* ================================== */
.testimonials-page-section {
    padding: 4rem 0;
}
.testimonials-page-section .page-title {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 3rem;
}
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem; /* Aumenta o espaço vertical */
    justify-items: center;
}
.testimonial-item {
    text-align: center;
    width: 100%;
    max-width: 450px;
}
.testimonial-item p {
    font-size: 1.2rem; font-weight: 600; color: #555;
    margin-bottom: 1rem;
}
.video-wrapper {
    position: relative; padding-bottom: 56.25%; height: 0;
    overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 10px;
}
.video-wrapper video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 10px;
}
@media (min-width: 768px) {
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ======================================================== */
/*   RESPONSIVIDADE PARA MOBILE (COM AJUSTE FINAL)          */
/* ======================================================== */
@media (max-width: 767px) {

    /* --- 1. A SEÇÃO OCUPA A TELA DE PONTA A PONTA --- */
    .testimonials-page-section {
        padding: 2.5rem 0;
        width: 100%;
        /*
           A CORREÇÃO: Aumentamos a margem negativa para anular
           um padding maior do elemento pai.
        */
        margin-left: -2rem;
        margin-right: -2rem;
        
    }

    /* --- 2. O CONTAINER INTERNO ALINHA O CONTEÚDO --- */
    .testimonials-page-section .container {
        /*
           Aumentamos o padding na mesma proporção para compensar
           a margem negativa e manter o conteúdo alinhado.
        */
        padding-left: 1rem;
        padding-right: 1rem;
        width: 90%;
    }

    /* --- 3. Ajustes finos no conteúdo --- */
    .testimonials-page-section .page-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
}


.whatsapp-fixo {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: white;
  padding: 10px 14px;
  border-radius: 40px;
  text-decoration: none;
  display: flex;
  align-items: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 1000;
  font-family: Arial, sans-serif;
}
.whatsapp-fixo img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.whatsapp-fixo span {
  font-size: 14px;
  font-weight: bold;
}
.iframe-page-section {
    padding: 0;
    background-color: #fff;
}
.container-full-width {
    width: 100%;
    margin: 0;
    padding: 0;
}
.content-iframe {
    display: block;
    width: 100%;
    border: none;
    min-height: calc(100vh - 120px);
}   
.form-feedback-message {
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    border: 1px solid transparent;
}
.form-feedback-message.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}
.form-feedback-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}


@media (max-width: 768px) {

     .bottom: 20px;
  right: 20px;}


  .whatsapp-fixo img {
    width: 18px;
    height: 18px;
  }
  .whatsapp-fixo img {
    width: 18px;
    height: 18px;
  }

  .whatsapp-fixo span {
    font-size: 10px;
  }
}