.hero {
    background: linear-gradient(160deg, var(--cor-primaria-escura), var(--cor-primaria));
    padding: 56px 0;
}

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

.hero__grid > * {
    min-width: 0;
}

@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);
}

/* Colagem de 3 fotos no topo da home: uma grande à esquerda e duas empilhadas à direita. */
.hero__colagem {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    aspect-ratio: 5 / 4;
}

.hero__colagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 0;
}

.hero__colagem-grande {
    grid-row: 1 / span 2;
}

/* Colagem de 3 fotos em "Quem Somos" (home e página da empresa). */
.colagem-fotos {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    aspect-ratio: 5 / 4;
}

.secao--quem-somos .colagem-fotos img,
.secao--historia .colagem-fotos img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    min-height: 0;
}

.colagem-fotos__grande {
    grid-row: 1 / span 2;
}

.hero__lista {
    margin-top: 24px;
    max-width: 560px;
}

.hero__lista li {
    color: #E7ECEF;
}

.hero__lista li::before {
    color: var(--cor-destaque);
}

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

/* Foto real 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;
}

/* Faixa de regiões atendidas na home — pílulas de bairros de São Paulo. */
.secao--regioes {
    background: var(--cor-fundo-alt);
    border-top: 1px solid var(--cor-borda);
    border-bottom: 1px solid var(--cor-borda);
}

.secao--regioes .grid-pilulas {
    margin: 24px 0;
}

.secao--projetos .grid-diferenciais {
    margin-top: 8px;
}