/* Atualize o início do seu style.css para isto: */
:root {
    /* Cores Personalizáveis - HARMONIZADAS COM A LOGO */
    --cor-primaria: #3F356B; /* Roxo Escuro */
    --cor-secundaria: #8A2BE2; /* Roxo Vivo */
    --cor-cta-emergencia: #FFD700; /* Amarelo Ouro/Vibrante */
    --cor-texto-claro: #f8f9fa; /* Para fundos escuros */
    --cor-texto-escuro: #343a40; /* Para fundos claros */
    --cor-background: #ffffff;
    --cor-background-acolhimento: #F8F7FA;
}

/* Garanta que o texto nos fundos escuros (Navbar, Cards, etc.) seja CLARO */
.card-metric, .bg-dark, #hero {
    color: var(--cor-texto-claro) !important;
}

/* O CTA de Emergência deve usar a cor amarela, mas com texto ESCURO para contraste */
.btn-cta-emergencia {
    background-color: var(--cor-cta-emergencia);
    border-color: var(--cor-cta-emergencia);
    color: var(--cor-texto-escuro) !important; /* IMPORTANTE para contraste no Amarelo */
    font-weight: bold;
    animation: pulse-emergency 2s infinite; 
}


body {
    font-family: 'Roboto', sans-serif; /* Fonte elegante e legível */
    color: var(--cor-texto-escuro);
}

/* Ajuste da Navbar (Linha Única - Mobile First) */
.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--cor-primaria);
}

.navbar-brand {
    font-weight: 700;
    color: var(--cor-primaria) !important;
}

.nav-link {
    color: var(--cor-texto-escuro) !important;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--cor-primaria) !important;
}

.btn-cta-emergencia {
    background-color: var(--cor-cta-emergencia);
    border-color: var(--cor-cta-emergencia);
    color: var(--cor-texto-claro);
    font-weight: bold;
    animation: pulse-emergency 2s infinite; /* Efeito para o CTA */
}

/* Efeito de destaque para o CTA Emergência */
@keyframes pulse-emergency {
    0% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(217, 83, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0); }
}

/* Estilo para a seção Hero */
#hero {
    min-height: 80vh;
    background: url('../assets/img/bg-hero.jpg') no-repeat center center/cover; /* Substitua pela sua imagem */
    display: flex;
    align-items: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Exemplo de CSS para aplicar overlay na imagem */
#hero {
    position: relative;
    /* Adiciona uma camada escura sobre a imagem */
}

#hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(63, 53, 107, 0.7); /* Roxo Primário com 70% de opacidade */
    z-index: 1;
}
#hero .container {
    z-index: 2; /* Garante que o texto fique acima do overlay */
}


/* Estilo de Acolhimento e Humanidade */
.section-title {
    color: var(--cor-primaria);
    font-weight: 700;
    margin-bottom: 1rem;
}

.card-metric {
    background-color: var(--cor-primaria);
    color: var(--cor-texto-claro);
    border: none;
    transition: transform 0.3s ease-in-out;
}

.card-metric:hover {
    transform: translateY(-5px);
}

/* Ajuste para ícones do AOS */
.aos-init {
    opacity: 0;
}
.aos-animate {
    opacity: 1;
}

/* Estilo de alinhamento para a lista de cidades */
.list-cidades-atendidas li {
    padding-left: 0;
    list-style-type: none; /* Remove bullet padrão */
    position: relative;
    margin-bottom: 0.5rem;
}

.list-cidades-atendidas li::before {
    content: "\F26E"; /* Ícone de localização do Bootstrap Icons */
    font-family: "Bootstrap Icons";
    color: var(--cor-cta-emergencia); /* Cor de destaque para o ícone */
    margin-right: 0.5rem;
}

.bg-light-acolhimento {
    background-color: var(--cor-background-acolhimento) !important;
}

.card, .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08) !important; /* Um pouco mais de vida nas sombras */
}

/* Opcional: Fundo para o Hero (simulação) */
/* Crie a pasta 'assets/img' e adicione 'bg-hero.jpg' */