/* ==========================================================================
   1. RESET GERAL E CONFIGURAÇÕES BASE
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: #ffffff;
    color: #333333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ==========================================================================
   2. CABEÇALHO, LINKS SUPERIORES E LOGÓTIPO
   ========================================================================== */
.top-legal-links {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding: 10px 40px;
    font-size: 11px;
}

.top-legal-links a {
    color: #666666;
    text-decoration: underline;
}

.main-header {
    background-color: #ffffff;
    width: 100%;
}

.logo-container {
    display: inline-block;
    margin-bottom: 15px;
}

.brand-logo {
    max-height: 70px;
    width: auto;
    display: block;
}

/* ==========================================================================
   3. MENU DE NAVEGAÇÃO
   ========================================================================== */
.main-nav {
    /* COR DAS BORDAS DO MENU (Atualmente em Cinza Médio #94a3b8) */
    /* Para mudar para Azul-Claro use: #5dade2 | Para Vermelho use: #d9232d */
    border-top: 1px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
}

.main-nav ul {
    display: flex;
    list-style: none;
    max-width: 1100px;
    margin: 0 auto;
}

.main-nav li {
    flex: 1;
}

/* Estilo padrão dos links do menu */
.main-nav li a {
    display: block;
    text-align: center;
    padding: 12px 0;
    text-decoration: none;
    color: #333333;
    font-weight: bold;
    font-size: 14px;
    transition: background 0.2s;
}

/* Efeito de passar o rato nos botões do menu */
.main-nav li a:hover {
    background-color: #f3f4f6; /* Fundo cinza muito claro ao passar o rato */
}

/* COR DO BOTÃO ATIVO NO MENU (Atualmente em Cinza Claro #e5e7eb) */
/* Para mudar para Azul-Claro use: #e0f2fe | Para Vermelho Suave use: #fde8e8 */
.main-nav li a.active {
    background-color: #e5e7eb; 
    color: #111111; /* Cor do texto no botão ativo */
}

/* ==========================================================================
   4. PÁGINA PRINCIPAL / ESTRUTURA DE CONTEÚDO
   ========================================================================== */

.info-card {
    display: flex;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
}

/* ==========================================================================
   5. PÁGINA DE SERVIÇOS (servicos.html)
   ========================================================================== */
.services-intro-text { 
    max-width: 1000px; 
    margin-bottom: 40px; 
}

.services-intro-text p { 
    font-size: 14px; 
    line-height: 1.6; 
    color: #333333; 
    margin-bottom: 18px; 
    text-align: justify; 
}

.pricing-grid { 
    display: flex; 
    width: 100%; 
    gap: 40px; 
    max-width: 900px; 
    margin: 0 auto 30px auto; 
}

.plan-card { 
    flex: 1; 
    border: 1px solid #e2e8f0; /* Borda cinza suave para os pacotes */
    background-color: #ffffff; 
    text-align: center; 
    padding: 20px 0; 
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.plan-speed { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 5px; 
}

.speed-number { 
    font-size: 64px; 
    font-weight: bold; 
    color: #111111; 
    line-height: 1; 
}

.info-icon {
    display: inline-flex; 
    justify-content: center; 
    align-items: center;
    background-color: #475569; /* Ícone informativo em Cinza Escuro Slate */
    color: #ffffff; 
    border-radius: 50%;
    width: 20px; 
    height: 20px; 
    font-size: 12px; 
    font-family: serif; 
    font-weight: bold;
}

.plan-upload { 
    font-size: 14px; 
    color: #444444; 
    border-bottom: 2px solid #e2e8f0; 
    padding-bottom: 15px; 
    width: 85%; 
    margin: 0 auto 15px auto; 
}

.plan-price { 
    font-size: 32px; 
    color: #111111; 
    font-weight: bold;
    margin-bottom: 15px;
}

.details-link-container { 
    width: 100%; 
    text-align: center; 
    margin-bottom: 40px; 
}

.blue-text-link { 
    color: #ffffff; 
    background-color: #475569; /* Botão pequeno de detalhes em Cinza */
    padding: 6px 16px; 
    font-size: 14px; 
    text-decoration: none; 
    border-radius: 4px;
}

.blue-text-link:hover { 
    background-color: #334155; 
}

.services-footer-action { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    width: 100%; 
    max-width: 1000px; 
    margin-top: 20px; 
    gap: 40px; 
}

.footer-notes { 
    flex: 1; 
}

.footer-notes p { 
    font-size: 13px; 
    color: #333333; 
    line-height: 1.5; 
    margin-bottom: 10px; 
}

/* COR DO BOTÃO ROXO DA IMAGEM PRINCIPAL (Atualmente em Cinza Escuro / Grafite #374151) */
/* Para mudar para Azul-Escuro use: #1e5598 | Para Vermelho use: #d9232d */
.cta-button-purple { 
    display: inline-block; 
    background-color: #374151; 
    color: #ffffff; 
    padding: 12px 30px; 
    font-size: 16px; 
    font-weight: bold; 
    text-decoration: none; 
    border-radius: 4px; 
    transition: background 0.2s;
}

.cta-button-purple:hover { 
    background-color: #1f2937; /* Cinza ainda mais escuro no hover */
}

/* ==========================================================================
   6. OUTRAS PÁGINAS INFORMATIVAS E DOCUMENTOS
   ========================================================================== */
.general-text-block { 
    max-width: 950px; 
    width: 100%; 
}

.general-text-block p { 
    font-size: 14px; 
    line-height: 1.6; 
    color: #333333; 
    margin-bottom: 20px; 
    text-align: justify; 
}

.general-text-block .highlight-text { 
    font-size: 18px; 
    color: #111111; 
    font-weight: bold; 
}

.styled-box { 
    margin-top: 30px; 
    border: 1px solid #e0e0e0; 
    padding: 25px; 
    background-color: #fafafa; 
    border-radius: 4px; 
    width: 100%; 
}

.styled-box h3 { 
    font-size: 16px; 
    color: #000000; 
    margin-bottom: 12px; 
    border-bottom: 1px solid #c0c0c0; 
    padding-bottom: 8px; 
}

.content-list { 
    margin: 20px 0 20px 20px; 
    list-style-type: square; 
}

.content-list li { 
    font-size: 14px; 
    color: #444444; 
    margin-bottom: 8px; 
}

/* CAIXA DE ALERTA / DESTAQUE LATERAL (Atualmente barra em Cinza Escuro #4b5563) */
/* Para mudar para Azul-Claro use: #5dade2 | Para Vermelho use: #d9232d */
.alert-box { 
    background-color: #f8fafc; 
    border-left: 4px solid #4b5563; 
    padding: 15px 20px; 
    margin: 30px 0; 
    border-radius: 0 4px 4px 0; 
    width: 100%; 
}

.alert-box p { 
    margin-bottom: 0 !important; 
    font-weight: bold; 
}

.alert-box a { 
    color: #1f2937; 
    text-decoration: underline; 
}

/* BOTÃO DE VOLTAR ATRÁS (Atualmente em Cinza Escuro #4b5563) */
/* Para mudar para Azul use: #1e5598 */
.btn-back { 
    display: inline-block; 
    background-color: #4b5563; 
    color: #ffffff; 
    padding: 10px 35px; 
    font-size: 16px; 
    font-weight: bold; 
    text-decoration: none; 
    border-radius: 4px; 
}

.btn-back:hover {
    background-color: #374151;
}

.vertical-links { 
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
    margin: 40px 0 60px 0; 
}

.vertical-links a { 
    font-size: 16px; 
    color: #666666; 
    text-decoration: underline; 
}

.center-btn-wrapper { 
    width: 100%; 
    display: flex; 
    justify-content: center; 
}

/* TABELAS TÉCNICAS DO SITE */
.contract-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 20px 0 35px 0; 
    font-size: 14px; 
}

.contract-table th, .contract-table td { 
    border: 1px solid #dddddd; 
    padding: 12px; 
    text-align: left; 
}

.contract-table th { 
    background-color: #f8fafc; 
    font-weight: bold; 
    color: #333333;
}

/* ==========================================================================
   7. RODAPÉ DO SITE (CORRIGIDO PARA CINZA ESCURO GRAFITE #222222)
   ========================================================================== */
.main-footer { 
    background-color: #222222; /* Cinza Escuro Profissional */
    padding: 25px 20px; 
    display: flex; 
    justify-content: center; 
    margin-top: auto; 
    border-top: 3px solid #4b5563; /* Linha de divisão superior do rodapé em cinza médio */
    /* Dica: se mudar o site para azul-claro, mude esta linha acima para: #5dade2 */
}

.complaints-book { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    color: #ffffff; 
    font-size: 13px; 
    font-weight: bold; 
}

.circle-icon { 
    width: 35px; 
    height: 35px; 
    background-color: #ffffff; 
    border-radius: 50%; 
}

/* ==========================================================================
   8. RESPONSIVIDADE MOBILE (ADAPTAÇÃO AUTOMÁTICA PARA TELEMÓVEIS)
   ========================================================================== */
@media (max-width: 768px) {
    .main-header, .info-page-layout { 
        padding: 15px; 
    }
    .main-nav ul { 
        flex-direction: column; 
    }
    .info-card { 
        flex-direction: column; 
        padding: 20px; 
    }
    .card-right { 
        border-left: none; 
        border-top: 1px solid #e2e8f0; 
        padding-left: 0; 
        padding-top: 20px; 
    }
    .phone-box { 
        flex-direction: column; 
        text-align: center; 
    }
    .pricing-grid { 
        flex-direction: column; 
        gap: 20px; 
    }
    .services-footer-action { 
        flex-direction: column; 
        align-items: center; 
        gap: 25px; 
    }
    .cta-button-purple { 
        width: 100%; 
        text-align: center; 
    }
}
/* ALINHAMENTO ABSOLUTO DO CONTEÚDO CENTRAL */
main, .content-wrapper, #main-content {
    max-width: 1100px !important;
    width: 100% !important;
    margin: 30px auto 110px auto !important;
    padding: 0 20px !important; /* Mesma folga que o logótipo usa no topo.php */
    box-sizing: border-box !important;
    display: block !important;
    clear: both !important;
}