/* --- Estilos Gerais --- */
body {
    font-family: 'Inter', sans-serif; /* Define a fonte principal para todo o texto */
    margin: 0; /* Remove margens padrão do navegador */
    padding: 0; /* Remove preenchimento padrão do navegador */
    background-color: #f4f6f9; /* Cor de fundo suave para a página */
    color: #333; /* Cor padrão do texto */
    line-height: 1.6; /* Espaçamento entre linhas para melhor legibilidade */
    -webkit-font-smoothing: antialiased; /* Suavização de fontes para navegadores WebKit (Chrome, Safari) */
    -moz-osx-font-smoothing: grayscale; /* Suavização de fontes para navegadores Firefox */
}

/* Estilo para centralizar o conteúdo e limitar sua largura */
.container {
    max-width: 800px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o container horizontalmente na página */
    padding: 0 16px; /* 16px de padding nas laterais para evitar que o conteúdo encoste nas bordas da tela */
}

/* --- Cabeçalho (Header) --- */
/* Estilos para a seção de cabeçalho da página (a área azul superior) */
header {
    background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%); /* Gradiente de azul para o fundo do cabeçalho */
    color: #ffffff; /* Cor do texto no cabeçalho */
    /* Padding mínimo na vertical (2px) para compactar o header ao máximo, */
    /* fazendo com que a logo encoste nas bordas superior e inferior. */
    padding: 2px 16px; /* 2px vertical, 16px horizontal */
    text-align: center; /* Centraliza o texto do cabeçalho (embora o flexbox abaixo sobreponha para logo/texto) */
    border-bottom: 0px solid #0d47a1; /* Borda inferior sólida para destaque */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra suave para profundidade */
    display: flex; /* Habilita Flexbox para alinhar o conteúdo verticalmente */
    align-items: center; /* Alinha os itens flexíveis (logo e texto) verticalmente ao centro do header */
    /* 'min-height' foi removido para permitir que o 'padding' e o conteúdo ditem a altura mínima */
}

/* Estilos para o container interno do cabeçalho, que segura o logo e o texto */
.header-content {
    display: flex; /* Habilita Flexbox para alinhar logo e texto */
    align-items: center; /* Alinha os itens (logo e texto) verticalmente ao centro */
    gap: 10px; /* Espaço entre o logo e o texto */
    padding: 0; /* Remove qualquer padding padrão que possa interferir */
    width: 100%; /* Garante que este container ocupe toda a largura disponível dentro do header */
}

/* Estilos para a imagem do logo no cabeçalho */
.header-logo {
    max-height: 200px; /* Altura máxima da logo (ajustar conforme o tamanho real da sua logo) */
    width: auto; /* Mantém a proporção original da imagem */
    flex-shrink: 0; /* Impede que a logo encolha em telas menores para dar espaço ao texto */
    margin: 0; /* Remove margens extras */
    display: block; /* Garante que a imagem seja tratada como um bloco */
}

/* Estilos para o texto ao lado do logo no cabeçalho */
.header-text {
    flex-grow: 1; /* Permite que o texto ocupe o espaço restante disponível */
    text-align: center; /* Centraliza o texto dentro de sua própria área */
}

/* Estilos para as "subheadlines" (subtítulos) no cabeçalho */
header .subheadline {
    margin: 0; /* Remove margens padrão */
    font-size: 18px; /* Tamanho da fonte */
    font-weight: 300; /* Peso da fonte (mais leve) */
    opacity: 0.9; /* Pequena transparência para um visual mais suave */
}

/* --- Seção de Conteúdo --- */
/* Estilos para as seções de conteúdo abaixo do cabeçalho */
.content-section {
    background-color: #ffffff; /* Fundo branco para a seção */
    padding: 15px; /* Espaçamento interno */
    margin-top: 8px; /* Margem superior para separar do cabeçalho */
    border-radius: 12px; /* Cantos arredondados */
    box-shadow: 0 8px 16px rgba(0,0,0,0.05); /* Sombra para dar profundidade */
}

/* Estilos para títulos H2 dentro das seções de conteúdo */
.content-section h2 {
    color: #1e3a8a; /* Cor azul escuro */
    font-size: 32px; /* Tamanho da fonte */
    font-weight: 700; /* Peso da fonte (negrito) */
    margin-bottom: 16px; /* Margem inferior */
    text-align: center; /* Centraliza o texto */
}

/* Estilos para títulos H3 dentro das seções de conteúdo */
.content-section h3 {
    color: #1e3a8a;
    font-size: 22px;
    margin-top: 32px;
    margin-bottom: 16px;
    border-bottom: 2px solid #e2e8f0; /* Linha de separação abaixo do título */
    padding-bottom: 8px; /* Espaçamento entre o texto e a linha */
}

/* Estilos para parágrafos e listas (p e ul) dentro das seções de conteúdo */
.content-section p, .content-section ul {
    font-size: 16px;
    margin-bottom: 16px;
    color: #4a5568; /* Cor de texto padrão */
}

/* Estilos para listas não ordenadas (ul) */
.content-section ul {
    list-style: none; /* Remove os marcadores de lista padrão */
    padding-left: 0; /* Remove o padding padrão da lista */
}

/* Estilos para cada item de lista (li) */
.content-section ul li {
    padding-left: 28px; /* Espaço para o ícone de 'check' personalizado */
    position: relative; /* Necessário para posicionar o ícone 'check' */
    margin-bottom: 8px; /* Margem inferior entre os itens */
}

/* Estilos para o ícone de 'check' personalizado antes de cada item da lista */
.content-section ul li::before {
    content: '✔'; /* Caractere de checkmark */
    position: absolute; /* Posicionamento absoluto em relação ao 'li' */
    left: 0; /* Alinha o ícone à esquerda */
    top: 2px; /* Pequeno ajuste vertical */
    color: #16a34a; /* Cor verde para o checkmark */
    font-weight: bold; /* Deixa o checkmark em negrito */
    font-size: 19px; /* Tamanho do checkmark */
}

/* --- Botões de Ação (CTA) --- */
/* Container para os botões de WhatsApp, permitindo alinhamento e espaçamento */
.whatsapp-buttons-container {
    display: flex; /* Habilita Flexbox para alinhar os botões lado a lado */
    flex-wrap: wrap; /* Permite que os botões quebrem para a próxima linha em telas menores */
    justify-content: center; /* Centraliza os botões horizontalmente */
    gap: 24px; /* Espaçamento entre os botões */
    margin: 32px 0; /* Margem superior e inferior para separar do conteúdo */
}

/* Estilos BASE para todos os botões de Call To Action (CTA) */
.cta-button {
    display: inline-flex; /* Torna o botão um container flexível, alinhando ícone e texto */
    align-items: center; /* Alinha o conteúdo verticalmente ao centro */
    justify-content: center; /* Centraliza o conteúdo horizontalmente (útil para botões menores) */
    padding: 16px 32px; /* Padding padrão para botões (aplicado ao botão de formulário) */
    border: none; /* Remove a borda padrão */
    color: #ffffff; /* Cor do texto do botão */
    text-align: center; /* Alinhamento do texto */
    text-decoration: none; /* Remove sublinhado do link */
    font-size: 18px; /* Tamanho da fonte padrão para botões */
    font-weight: 600; /* Peso da fonte */
    border-radius: 8px; /* Cantos levemente arredondados */
    transition: all 0.3s ease; /* Transição suave para efeitos de hover */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra para profundidade */
    cursor: pointer; /* Muda o cursor para "mãozinha" ao passar por cima */
    min-width: 250px; /* Largura mínima para o botão de formulário para que não fique muito pequeno */
    width: auto; /* Permite que o botão se ajuste ao conteúdo (para o botão de formulário) */
    height: auto; /* Altura automática (para o botão de formulário) */
}

/* Estilos ESPECÍFICOS para os botões do WhatsApp (que são quadrados e maiores) */
/* Esta classe é mais específica para garantir que apenas os botões de WhatsApp recebam este estilo */
.cta-button.whatsapp.whatsapp-cta-button {
    width: 200px; /* Define a largura fixa para o botão quadrado */
    height: 200px; /* Define a altura fixa para o botão quadrado (igual à largura) */
    padding: 0; /* Remove o padding, pois 'width' e 'height' fixos controlam o tamanho */
    flex-direction: column; /* Organiza o ícone e o texto em coluna (um acima do outro) */
    font-size: 24px; /* Aumenta o tamanho da fonte para o texto dentro do botão WhatsApp */
}

/* Estilos para a cor de fundo e efeito de hover dos botões WhatsApp */
.cta-button.whatsapp {
    background-color: #25D366; /* Cor verde padrão do WhatsApp */
}
.cta-button.whatsapp:hover {
    background-color: #128C7E; /* Cor verde mais escura ao passar o mouse */
    transform: translateY(-3px); /* Move o botão ligeiramente para cima no hover */
    box-shadow: 0 7px 14px rgba(0,0,0,0.1); /* Sombra mais intensa no hover */
}

/* Estilos para o ícone do Font Awesome dentro dos botões WhatsApp */
.whatsapp-fa-icon {
    font-size: 80px; /* Define o tamanho do ícone Font Awesome (maior para botões quadrados) */
    color: white; /* Cor do ícone */
    margin-bottom: 10px; /* Espaço entre o ícone e o texto abaixo dele */
    display: inline-block; /* Ajuda a garantir a correta renderização do ícone */
    vertical-align: middle; /* Ajuda no alinhamento vertical em alguns contextos */
}

.secondary-cta {
    display: block; /* Torna o botão um elemento de bloco (ocupa toda a largura disponível) */
    width: 90%; /* Ocupa 90% da largura do container */
    max-width: 450px; /* Largura máxima para o botão */
    margin: 16px auto 0 auto; /* Centraliza o botão e adiciona margem superior */
    background-color: #1d4ed8; /* Cor azul forte */
    padding: 16px 32px; /* Padding para o botão de formulário */
    font-size: 18px; /* Tamanho da fonte */
    /* Redefine 'width' e 'height' para garantir que não fique quadrado como os botões de WhatsApp */
    width: auto;
    height: auto;
}
.secondary-cta:hover {
    background-color: #1e3a8a; /* Cor azul mais escura no hover */
    transform: translateY(-3px); /* Move o botão ligeiramente para cima no hover */
    box-shadow: 0 7px 14px rgba(0,0,0,0.1); /* Sombra mais intensa no hover */
}

/* --- Rodapé (Footer) --- */
/* Estilos para a seção de rodapé da página */
footer {
    text-align: center; /* Centraliza o texto do rodapé */
    padding: 40px 16px; /* Espaçamento interno */
    background-color: #1e293b; /* Cor de fundo escura */
    color: #94a3b8; /* Cor do texto no rodapé */
    font-size: 14px; /* Tamanho da fonte */
    margin-top: 48px; /* Margem superior para separar do conteúdo principal */
}

/* Estilos para parágrafos dentro do rodapé */
footer p {
    margin: 8px 0; /* Margem superior e inferior para parágrafos */
}

/* Estilos para links dentro do rodapé */
footer a {
    color: #e2e8f0; /* Cor dos links */
    text-decoration: none; /* Remove sublinhado padrão */
}
footer a:hover {
    text-decoration: underline; /* Adiciona sublinhado no hover */
    color: #ffffff; /* Cor branca no hover */
}

/* Estilos para o link de "Acesso ao Sistema" no rodapé */
.system-access-link-footer {
    color: #64748b; /* Cor mais suave */
    font-size: 14px;
    text-decoration: underline; /* Sublinhado sempre visível */
    transition: color 0.2s ease; /* Transição suave de cor */
}
.system-access-link-footer:hover {
    color: #e2e8f0; /* Clareia a cor no hover */
}

/* Estilos para o disclaimer legal no rodapé */
.footer-disclaimer {
    font-size: 12px; /* Fonte menor para o disclaimer */
    color: #64748b;
    margin-top: 16px;
    max-width: 600px; /* Limita a largura do texto do disclaimer */
    margin-left: auto; /* Centraliza o disclaimer */
    margin-right: auto; /* Centraliza o disclaimer */
}

/* Estilos para a linha de "Desenvolvido por" no rodapé */
.footer-dev {
    margin-top: 24px;
    font-size: 13px;
    color: #475569;
}
.footer-dev a {
    color: #94a3b8;
    font-weight: 500;
}
.footer-dev a:hover {
    color: #e2e8f0;
}

/* --- Responsividade --- */
/* Media Query para telas com largura máxima de 768px (tablets e celulares) */
@media (max-width: 768px) {
    /* Ajustes para o conteúdo do cabeçalho em telas menores */
    .header-content {
        flex-direction: column; /* Empilha o logo e o texto verticalmente */
        text-align: center; /* Centraliza o texto */
        gap: 10px; /* Reduz o espaçamento entre o logo e o texto */
    }
    /* Reduz a altura máxima da logo em telas menores */
    .header-logo {
        max-height: 120px;
    }
    /* Reduz o tamanho da fonte da subheadline em telas menores */
    header .subheadline { font-size: 16px; }
    /* Reduz o tamanho da fonte dos títulos h2 em telas menores */
    .content-section h2 { font-size: 24px; }
    /* Ajusta o container dos botões do WhatsApp para telas menores */
    .whatsapp-buttons-container {
        flex-direction: column; /* Empilha os botões verticalmente */
        align-items: center; /* Centraliza os botões empilhados */
    }
    /* Estilos específicos para os botões do WhatsApp em telas menores */
    .cta-button.whatsapp.whatsapp-cta-button {
        width: 150px; /* Reduz a largura do botão quadrado */
        height: 150px; /* Reduz a altura do botão quadrado */
        font-size: 18px; /* Reduz o tamanho da fonte do texto do botão */
    }
    /* Estilos para o ícone do Font Awesome em telas menores */
    .whatsapp-fa-icon {
        font-size: 60px; /* Reduz o tamanho do ícone */
        margin-bottom: 8px; /* Ajusta a margem inferior */
    }
    /* Ajustes para o botão secundário (formulário) em telas menores */
    .secondary-cta {
        width: 90%; /* Ocupa mais largura em telas menores */
        max-width: none; /* Remove o limite de largura máxima */
        font-size: 16px; /* Reduz o tamanho da fonte */
        padding: 12px 24px; /* Ajusta o padding */
    }
}