/* css/nucleo.css */

/* AJUSTE 1: Adicionamos 'background-color' para garantir
  que a seção tenha o fundo branco (var(--cor-light) é #FFFFFF).
*/
#nucleo {
    background-color: var(--cor-light);
    color: var(--cor-dark); /* Texto escuro em fundo claro */
}

/* Estilo para o título principal da seção */
#nucleo .titulo-secao h2 {
    font-weight: 700; /* Texto em negrito */
    color: var(--cor-dark);
}

/* Estilo para o "badge" (Agência Interna) */
#nucleo .badge-dark-pill {
    background-color: var(--cor-dark); /* Fundo preto/escuro */
    color: var(--cor-light); /* Texto branco */
    font-weight: 600;
    padding: 0.5rem 1.25rem; /* Espaçamento interno */
    border-radius: 50rem; /* Formato de pílula */
    font-size: 1rem;
    margin-top: 0.5rem; /* Margem acima */
}

#nucleo .lead {
    color: #6c757d;
}

/* AJUSTE 3:
  Removemos o estilo '.overlay-text', pois
  o "36%" não existe no novo design.
*/

/* Estilo para cada caixa de serviço (os 6 itens) */
.service-box {
    /* Usamos a cor ciano clara do menu como borda */
    border: 2px solid var(--cor-brand-navbar); 
    border-radius: 10px; /* Bordas arredondadas */
    padding: 1.5rem; /* Espaçamento interno */
    
    /* Flexbox para alinhar ícone e texto */
    display: flex;
    align-items: center; /* Alinha verticalmente */
    height: 100%; /* Faz todas as caixas terem a mesma altura */
    
    /* Sombra suave (opcional, mas elegante) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* O wrapper (caixa) do ícone */
.service-icon-wrapper {
    /* Fundo ciano claro */
    background-color: var(--cor-brand-navbar); 
    color: var(--cor-light); /* Ícone branco */
    
    /* Dimensões */
    min-width: 60px; /* Largura mínima fixa */
    height: 60px;    /* Altura fixa */
    
    border-radius: 10px; /* Bordas arredondadas */
    
    /* Centraliza o ícone dentro da caixa */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1.75rem; /* Tamanho do ícone */
    margin: 15px;
}

/* Estilo para o texto dentro da caixa de serviço */
.service-box-text h5 {
    font-weight: 700;
    color: var(--cor-dark);
    margin-left: 20px;
}

.service-box-text p {
    color: #6c757d; /* Cor de texto "muted" (cinza) */
    margin-bottom: 0; /* Remove margem inferior */
    margin-left: 20px;
}