/* css\compromisso.css */
/* A seção agora é apenas um "container" posicional
para o emblema e o conteúdo.
*/
#compromisso {
position: relative; /* Essencial para o posicionamento do emblema */
padding: 0; /* Removemos o padding antigo */
background-color: transparent; /* O fundo é o verde do */
}
/* 1. O Emblema (Badge) do Título
*/
.compromisso-badge {
display: inline-block; /* Para o padding funcionar corretamente */
background-color: var(--cor-principal-teal); /* Cor ciano/verde-água */
color: white;
padding: 18px 55px; /* Define o tamanho do "botão" */
border-radius: 50px; /* Deixa em formato de pílula */
text-transform: uppercase; /* Deixa o texto em maiúsculas */
/* Posicionamento */
position: relative; /* Para ficar "acima" do conteúdo branco */
z-index: 10;
/* Mágica: Puxa o emblema para CIMA.
Se o emblema tem ~70px de altura (padding + fonte), -35px o
posiciona exatamente na metade.
*/
margin-top: -42px;
margin-bottom: 0; /* Importante para o layout */
/* Sombra bonita que combina com a cor do emblema */
box-shadow: 0 15px 15px rgba(0, 192, 183, 0.4);
}
.compromisso-badge h2 {
margin: 0; /* Remove margem padrão do h2 */
font-size: 1.65rem; /* Tamanho da fonte do título */
}
/* 2. O Conteúdo (Caixa Branca)
*/
.compromisso-content {
background-color: #ffffff; /* Fundo branco, como no design */
/* Mágica 2: Puxa a caixa branca para CIMA,
para ela "encontrar" o emblema no meio.
Usamos o mesmo valor negativo do 'margin-top' do emblema.
*/
margin-top: -42px;
/* Padding interno:
- Damos um padding-top grande (70px) para o texto "Foco no Cliente..."
não ficar escondido atrás do emblema.
- 80px embaixo para dar respiro.
*/
padding: 70px 0 80px 0;
position: relative; /* Necessário para z-index funcionar */
z-index: 9; /* Envia a caixa branca PARA TRÁS do emblema ciano */
}
/* Novo Subtítulo: "É PROPORCIONAR:" */
.compromisso-subtitle {
display: inline-block; /* Para o padding funcionar */
background-color: #4A4A4A; /* Cor escura do design */
color: white;
padding: 10px 35px; /* Padding vertical e horizontal */
border-radius: 50px; /* Formato de pílula */
position: relative; /* Para ficar "acima" do conteúdo branco */
z-index: 11;
margin-bottom: 3rem;
margin-top: -85px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra */
}
/* Layout de cada item (o ![]()
+ ) */
.compromisso-item {
text-align: center; /* Alinha o texto à esquerda */
/* A classe 'd-flex' no HTML cuida do alinhamento */
}
/* O ícone (a imagem customizada) */
.compromisso-icon {
max-width: 100px;
height: auto;
margin-left: auto; /* Centraliza o ícone */
margin-right: auto; /* Centraliza o ícone */
}
/* Título de cada item (ex: "APRENDIZADO CONTÍNUO") */
.compromisso-item h4 {
font-weight: 700; /* Mais forte (bold) */
font-size: 1.1rem;
color: var(--cor-dark);
text-transform: uppercase; /* Deixa em maiúsculas */
margin-bottom: 0.5rem;
}
/* Texto de descrição de cada item */
.compromisso-item p {
color: #555; /* Um cinza escuro, mas não 'muted' */
font-size: 0.9rem;
line-height: 1.6;
}