/* ==========================================
   BLOCO 1: HEADER DA PÁGINA DE PRIVACIDADE
   Responsabilidade: Estilizar cabeçalho principal com background e layout
   ========================================== */

/* Cabeçalho da seção de privacidade com altura proporcional */
.privacy-header {
    height: 40vh; /* 40% da altura da viewport */
    
    /* Background com imagem e overlay escuro para legibilidade */
    background-image: url('../imagens/fotos-banner/banner-privacidade.png');
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar imagem */
    
    /* Layout flexbox para centralização */
    display: flex;
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    text-align: center; /* Texto centralizado */
    
    color: white; /* Texto branco */
}

/* ==========================================
   BLOCO 2: CONTEÚDO DO HEADER
   Responsabilidade: Estilizar texto dentro do header
   ========================================== */

/* Container do conteúdo do header com largura máxima */
.privacy-header-content {
    max-width: 800px; /* Limitar largura para legibilidade */
    padding: 0 20px; /* Espaçamento lateral responsivo */
}

/* Título principal do header */
.privacy-header-content h1 {
    font-size: 36px; /* Tamanho grande para impacto */
    margin-bottom: 15px; /* Espaçamento abaixo do título */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para destaque */
}

/* Parágrafo de descrição do header */
.privacy-header-content p {
    font-size: 18px; /* Tamanho moderado para descrição */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra sutil */
}

/* ==========================================
   BLOCO 3: SEÇÃO PRINCIPAL DE PRIVACIDADE
   Responsabilidade: Container principal com espaçamento
   ========================================== */

/* Seção principal com espaçamento vertical */
.privacy-section {
    padding: 60px 0; /* Espaçamento vertical superior e inferior */
}

/* ==========================================
   BLOCO 4: CONTAINER DA POLÍTICA
   Responsabilidade: Layout em card com design limpo
   ========================================== */

/* Container centralizado com layout em card */
.privacy-container {
    background-color: white; /* Fundo branco para contraste */
    border-radius: 8px; /* Cantos arredondados */
    padding: 40px; /* Espaçamento interno generoso */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil para elevação */
}

/* ==========================================
   BLOCO 5: DATA DE ÚTIMA ATUALIZAÇÃO
   Responsabilidade: Indicação temporal da política
   ========================================== */

/* Informações sobre última atualização da política */
.last-updated {
    text-align: right; /* Alinhamento à direita */
    color: #666; /* Cinza médio */
    font-style: italic; /* Estilo itálico para indicação temporal */
    margin-bottom: 30px; /* Espaçamento abaixo */
    font-size: 14px; /* Tamanho menor para metadados */
}

/* ==========================================
   BLOCO 6: TÍTULOS E HIERARQUIA
   Responsabilidade: Estrutura visual da política
   ========================================== */

/* Títulos secundários (H2) com cor da marca e decoração */
.privacy-section h2 {
    color: var(--primary-color); /* Cor definida em variáveis CSS */
    margin: 30px 0 15px; /* Espaçamento generoso */
    font-size: 24px; /* Tamanho consistente */
    border-bottom: 2px solid #e6f7ff; /* Linha decorativa azul clara */
    padding-bottom: 10px; /* Espaçamento interno abaixo */
}

/* Títulos terciários (H3) com cor secundária */
.privacy-section h3 {
    color: var(--secondary-color); /* Cor secundária da marca */
    margin: 25px 0 15px; /* Espaçamento intermediate */
    font-size: 20px; /* Tamanho menor que H2 */
}

/* ==========================================
   BLOCO 7: PARÁGRAFOS E TEXTO
   Responsabilidade: Legibilidade do conteúdo legal
   ========================================== */

/* Parágrafos com espaçamento e cor amigável */
.privacy-section p {
    margin-bottom: 15px; /* Espaçamento entre parágrafos */
    line-height: 1.7; /* Altura de linha para legibilidade */
    color: #555; /* Cinza escuro para conforto visual */
}

/* ==========================================
   BLOCO 8: LISTAS E CONTEÚDO ESTRUTURADO
   Responsabilidade: Formatação de listas e enumerações
   ========================================== */

/* Containers de listas com espaçamento */
.privacy-section ul, .privacy-section ol {
    margin-bottom: 20px; /* Espaçamento após listas */
    padding-left: 20px; /* Indentação das listas */
}

/* Itens de listas com espaçamento e cor */
.privacy-section li {
    margin-bottom: 10px; /* Espaçamento entre itens */
    line-height: 1.7; /* Altura de linha para legibilidade */
    color: #555; /* Cinza escuro consistente */
}

/* ==========================================
   BLOCO 9: LINKS E INTERATIVIDADE
   Responsabilidade: Estilização de links externos e internos
   ========================================== */

/* Links da política com cor secundária */
.privacy-section a {
    color: var(--secondary-color); /* Cor secundária da marca */
    text-decoration: underline; /* Sublinhado para indicar interatividade */
}

/* Efeito hover nos links */
.privacy-section a:hover {
    color: var(--secondary-dark); /* Cor mais escura no hover */
}

/* ==========================================
   BLOCO 10: CAIXAS DE DESTAQUE
   Responsabilidade: Destacar informações importantes
   ========================================== */

/* Caixa de destaque com fundo azul claro */
.privacy-section .highlight-box {
    background-color: #e6f7ff; /* Fundo azul muito claro */
    border-left: 4px solid var(--secondary-color); /* Borda lateral da cor secundária */
    padding: 20px; /* Espaçamento interno */
    margin: 20px 0; /* Espaçamento vertical */
    border-radius: 4px; /* Cantos arredondados suaves */
}

/* Último parágrafo da caixa de destaque sem margem */
.privacy-section .highlight-box p:last-child {
    margin-bottom: 0; /* Remover margem do último parágrafo */
}

/* ==========================================
   BLOCO 11: TABELAS RESPONSIVAS
   Responsabilidade: Exibição de dados tabulares
   ========================================== */

/* Container com scroll horizontal para tabelas */
.table-container {
    overflow-x: auto; /* Scroll horizontal em telas pequenas */
    margin: 20px 0; /* Espaçamento vertical */
}

/* Tabela principal com largura 100% */
.privacy-table {
    width: 100%; /* Largura total do container */
    border-collapse: collapse; /* Remover espaçamento entre bordas */
    margin-bottom: 20px; /* Espaçamento abaixo da tabela */
}

/* ==========================================
   BLOCO 12: CÉLULAS DA TABELA
   Responsabilidade: Formatação de cabeçalhos e dados
   ========================================== */

/* Cabeçalhos e células de dados */
.privacy-table th, .privacy-table td {
    padding: 12px 15px; /* Espaçamento interno das células */
    text-align: left; /* Alinhamento à esquerda */
    border-bottom: 1px solid #ddd; /* Borda inferior sutil */
}

/* Cabeçalhos da tabela com estilo diferenciado */
.privacy-table th {
    background-color: #f5f5f5; /* Fundo cinza claro para cabeçalhos */
    font-weight: 600; /* Fonte semi-negrito */
    color: #333; /* Texto escuro */
}

/* ==========================================
   BLOCO 13: EFEITO HOVER NA TABELA
   Responsabilidade: Feedback visual ao passar mouse
   ========================================== */

/* Linhas da tabela com efeito hover */
.privacy-table tr:hover {
    background-color: #f9f9f9; /* Fundo muito claro no hover */
}

/* ==========================================
   BLOCO 14: CAIXA DE INFORMAÇÕES DE CONTATO
   Responsabilidade: Seção destacada para contatos
   ========================================== */

/* Container para informações de contato */
.contact-info-box {
    background-color: #f5f5f5; /* Fundo cinza claro para separação */
    border-radius: 8px; /* Cantos arredondados */
    padding: 25px; /* Espaçamento interno generoso */
    margin-top: 30px; /* Espaçamento superior para separação */
}

/* Título da caixa de contato */
.contact-info-box h3 {
    margin-top: 0; /* Remover margem superior */
}

/* ==========================================
   BLOCO 15: RESPONSIVIDADE MOBILE
   Responsabilidade: Adaptação para dispositivos móveis
   ========================================== */

/* Media query para smartphones */
@media (max-width: 768px) {
    /* Reduzir padding do container principal */
    .privacy-container {
        padding: 25px; /* Padding reduzido para economizar espaço */
    }

    /* Reduzir tamanho do título no header */
    .privacy-header-content h1 {
        font-size: 28px; /* Tamanho menor para mobile */
    }
}