:root {
  --cor-primaria: #5A2CAC;
  --cor-secundaria: #7D3FE0;
  --cor-acento: #B38BFF;
  --cor-neutro-escuro: #3F3F4A;
  --cor-neutro-claro: #F7F7FA;
  --gradiente: linear-gradient(135deg, #5A2CAC 0%, #7D3FE0 100%);
  --fonte-titulo: 'Montserrat', sans-serif;
  --fonte-texto: 'Inter', sans-serif;
}

body { margin:0; background: var(--cor-neutro-claro); font-family: var(--fonte-texto); }

header { height:80px; padding:0 48px; background:#fff; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(0,0,0,0.06); }
header nav a { margin-left:24px; text-decoration:none; color:var(--cor-neutro-escuro); font-family:var(--fonte-titulo); font-size:24px; }
header nav a:hover { color:var(--cor-primaria); }

.hero { padding:80px 48px; background:var(--gradiente); color:white; }
.hero h1 { font-size:48px; font-family:var(--fonte-titulo); }
.hero h4 { font-size:32px; font-family:var(--fonte-titulo); }
.hero p { font-size:20px; max-width:90%; }

.btn { display:inline-block; padding:14px 28px; border-radius:6px; font-family:var(--fonte-titulo); font-weight:600; text-decoration:none; }
.btn-primary { background:var(--cor-primaria); color:white; }
.btn-primary:hover { background:var(--cor-secundaria); }

.banner-interno { background:var(--cor-primaria); color:white; padding:60px 48px; }
.banner-interno h1 { font-family:var(--fonte-titulo); font-size:36px; }

.conteudo p {  font-family:var(--fonte-texto); font-size:20px; max-width:80%; padding:60px 48px; }

#.cards { padding:48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
#.card { background:white; padding:24px; border-radius:10px; box-shadow:0px 4px 12px rgba(0,0,0,0.06); }
#.card h3 { font-family:var(--fonte-titulo); }

/* Seu CSS Existente, Modificado */
.cards { 
    padding:48px; 
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); 
    gap:24px; 
}
.card { 
    background:white; 
    padding: 0; /* Alterado para 0 para imagem de ponta a ponta */
    border-radius:10px; 
    box-shadow:0px 4px 12px rgba(0,0,0,0.06); 
    overflow: hidden; /* Adicionado para respeitar border-radius com a imagem */
}
.card h3 { 
    font-family:var(--fonte-titulo); 
    padding-left: 24px; /* Adicionado padding para o texto */
    padding-right: 24px;
    margin-top: 16px; /* Espaço entre o topo do card e o título */
}

/* NOVO: Estilo para a Imagem */
.card img {
    width: 100%; /* Preenche a largura do card */
    height: auto; /* Mantém a proporção */
    display: block;
    margin-bottom: 16px; /* Espaço abaixo da imagem */
}

/* NOVO: Estilo para o Parágrafo */
.card p {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
}

/* NOVO ESTILO PARA ÍCONES (TAGS <i> DO FONT AWESOME) */
.card i {
    /* Centralização */
    display: block;
    text-align: center;
    
    /* Tamanho e Cor */
    font-size: 40px; /* Define um bom tamanho para o ícone */
    color: #5A2CAC; /* Exemplo de cor. Use a cor principal da sua marca */
    
    /* Espaçamento */
    margin: 24px 0 16px 0; /* Espaço superior e inferior */
}

.logo-header { height: 80px; }