/* CONTEÚDO PRINCIPAL (.main-content) */
.main-content {
    max-width: 900px; /* Define a largura máxima do conteúdo principal */
    margin: 100px auto 50px auto; /* Define margens: 100px topo, auto lados (centraliza), 50px inferior */
    padding: 20px; /* Adiciona preenchimento interno de 20px em todos os lados */
    line-height: 1.6; /* Define a altura da linha para melhor legibilidade do texto */
    color: #333; /* Define a cor padrão do texto (um cinza escuro) */
    background-color: rgba(255, 255, 255, 0.9); /* Define a cor de fundo branca com 90% de opacidade */
    backdrop-filter: blur(10px); /* Aplica um desfoque ao fundo atrás do elemento (efeito vidro fosco) */
    border-radius: 8px; /* Arredonda os cantos do elemento com um raio de 8px */
    box-shadow: none; /* Remove qualquer sombra padrão ou definida anteriormente */
}

.main-content h2, /* Seleciona todos os elementos <h2> dentro de .main-content */
.main-content h3 { /* E todos os elementos <h3> dentro de .main-content */
    color: #1a1a1a; /* Define a cor do texto para títulos (um cinza bem escuro) */
    margin-top: 30px; /* Adiciona uma margem superior de 30px */
    margin-bottom: 15px; /* Adiciona uma margem inferior de 15px */
    border-bottom: 1px solid #eee; /* Adiciona uma borda inferior sólida de 1px com cor cinza claro */
    padding-bottom: 10px; /* Adiciona um preenchimento inferior de 10px sob o título e antes da borda */
}

.main-content p { /* Seleciona todos os parágrafos dentro de .main-content */
    margin-bottom: 15px; /* Adiciona uma margem inferior de 15px para separar os parágrafos */
}

.main-content ul, /* Seleciona todas as listas não ordenadas dentro de .main-content */
.main-content ol { /* E todas as listas ordenadas dentro de .main-content */
    margin-left: 25px; /* Adiciona uma margem à esquerda para indentar as listas */
    margin-bottom: 15px; /* Adiciona uma margem inferior de 15px */
}

.main-content ul li, /* Seleciona cada item de lista dentro de listas não ordenadas em .main-content */
.main-content ol li { /* E cada item de lista dentro de listas ordenadas em .main-content */
    margin-bottom: 8px; /* Adiciona uma margem inferior de 8px para separar os itens da lista */
}

.main-content a { /* Seleciona todos os links dentro de .main-content */
    color: #007bff; /* Define a cor padrão dos links (azul) */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
}

.main-content a:hover { /* Estilo para links dentro de .main-content quando o mouse passa por cima */
    text-decoration: underline; /* Adiciona um sublinhado ao passar o mouse */
}

/* Responsividade: Estilos para Tablets (largura máxima de 768px) */
@media (max-width: 768px) {
    .main-content { /* Ajustes para o conteúdo principal em telas de tablet */
        margin-top: 80px; /* Reduz a margem superior para 80px */
        padding: 15px; /* Reduz o preenchimento interno para 15px */
    }
}

/* Responsividade: Estilos para Telemóveis (largura máxima de 480px) */
@media (max-width: 480px) {
    .main-content { /* Ajustes para o conteúdo principal em telas de telemóvel */
        margin-top: 70px; /* Reduz ainda mais a margem superior para 70px */
        padding: 10px; /* Reduz o preenchimento interno para 10px */
        font-size: 14px; /* Diminui o tamanho da fonte para 14px */
    }

    .main-content h2 { /* Ajustes para títulos <h2> em telas de telemóvel */
        font-size: 22px; /* Diminui o tamanho da fonte para 22px */
    }

    .main-content h3 { /* Ajustes para títulos <h3> em telas de telemóvel */
        font-size: 18px; /* Diminui o tamanho da fonte para 18px */
    }
}

/* BREADCRUMBS (CAMINHO DE NAVEGAÇÃO) */
.breadcrumbs {
    padding: 10px 0; /* Adiciona preenchimento vertical de 10px */
    margin-bottom: 20px; /* Adiciona margem inferior de 20px */
    font-size: 14px; /* Define o tamanho da fonte para 14px */
    color: #6c757d; /* Define a cor do texto (um cinza médio) */
}

.breadcrumbs a { /* Seleciona links dentro dos breadcrumbs */
    color: #007bff; /* Define a cor do link (azul) */
    text-decoration: none; /* Remove o sublinhado do link */
    font-family: 'Poppins', sans-serif; /* Define a fonte como Poppins (ou uma sans-serif genérica) */
    font-weight: 500; /* Define a espessura da fonte como 500 (médio) */
}

.breadcrumbs a:hover { /* Estilo para links dos breadcrumbs ao passar o mouse */
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

.breadcrumbs .separator { /* Seleciona o separador dentro dos breadcrumbs */
    margin: 0 10px; /* Adiciona margem horizontal de 10px */
    color: #ced4da; /* Define a cor do separador (um cinza muito claro) */
}

.breadcrumbs .current { /* Seleciona o item atual nos breadcrumbs */
    font-weight: 600; /* Define a espessura da fonte como 600 (semi-negrito) */
    color: #343a40; /* Define a cor do texto (um cinza escuro) */
}

/* NAVBAR PRINCIPAL (DESKTOP) */

/* Botão Flutuante do WhatsApp */
.whatsapp-button {
    position: fixed; /* Fixa o botão na tela */
    bottom: 20px; /* Distância da borda inferior */
    right: 20px; /* Distância da borda direita */
    background-color: #00c800; /* Cor verde do WhatsApp */
    color: white; /* Cor do ícone */
    width: 60px; /* Largura do botão */
    height: 60px; /* Altura do botão (para ser um círculo) */
    border-radius: 50%; /* Transforma o botão em um círculo */
    display: flex; /* Permite centralizar o ícone */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    font-size: 30px; /* Tamanho do ícone do WhatsApp */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Sombra para profundidade */
    z-index: 1000; /* Garante que o botão fique acima de outros elementos */
    transition: all 0.3s ease; /* Transição suave para efeitos de hover e scroll */
    text-decoration: none; /* Remove sublinhado do link */
}

.whatsapp-button:hover {
    background-color: #fff; /* Cor verde mais escura ao passar o mouse */
    color: #00c800;
    transform: scale(1.08); /* Aumenta ligeiramente o tamanho no hover */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); /* Sombra mais pronunciada no hover */
}

/* Media Queries para responsividade em telas menores */
@media (max-width: 768px) {
    .whatsapp-button {
        width: 50px; /* Tamanho menor em tablets */
        height: 50px;
        font-size: 26px;
        bottom: 15px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .whatsapp-button {
        width: 45px; /* Tamanho ainda menor em celulares */
        height: 45px;
        font-size: 24px;
        bottom: 10px;
        right: 10px;
    }
}