/* Fundo azul-ardósia escuro sólido — igual ao hero do site atual do cliente (que usa slate-900,
   não um gradiente de laranja; o laranja ali é só cor de destaque em botão/ícones/badge). */
.hero {
    background: var(--cor-fundo-escuro);
    padding: 56px 0;
}

.hero__confianca {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
}

.hero__confianca-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #C7D3DC;
    font-size: 14px;
    font-weight: 600;
}

.hero__confianca-item svg {
    flex-shrink: 0;
    color: var(--cor-primaria-clara);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .hero__grid {
        grid-template-columns: 1.1fr 1fr;
    }
}

.hero__texto h1 {
    color: var(--cor-branco);
}

.hero__subtitulo {
    color: #C7D3DC;
    font-size: 18px;
    margin-top: 16px;
    max-width: 560px;
}

.hero__imagem img {
    border-radius: var(--raio-grande);
}

.secao--quem-somos img,
.secao--servico-hero img {
    border-radius: var(--raio-grande);
}

/* Foto real (retrato) de obra usada em "Quem Somos" — limita a altura para não dominar
   o layout ao lado do texto em telas largas. */
.secao--quem-somos img,
.secao--historia img {
    max-height: 520px;
    width: 100%;
    object-fit: cover;
}