/* =========================================================
   V7 Imóveis · Sobre a V7
   ========================================================= */

.sobre-topo { background: var(--creme); padding: 40px 0 0; overflow: hidden; }
.sobre-topo__grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: end; }
.sobre-topo__grade > div:first-child { padding-bottom: 80px; }
.sobre-topo h1 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; letter-spacing: -.04em; margin-bottom: 22px; }
.sobre-topo__foto img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; clip-path: var(--telhado); }

.texto-duplo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.texto-duplo h2 { font-size: clamp(26px, 3vw, 36px); position: sticky; top: calc(var(--topo-h) + 40px); }

.mvv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mvv__item { padding: 44px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); }
.mvv__item h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 14px; }
.mvv__item p:not(.rotulo) { font-size: 17px; }
.mvv__item--laranja { background: var(--laranja); border-color: var(--laranja); color: rgba(255, 255, 255, .92); }
.mvv__item--laranja h3 { color: #fff; }

.valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.valor { padding: 30px; border-radius: var(--raio); background: var(--creme); }
.valor__ico { width: 54px; height: 54px; display: grid; place-items: center; background: #fff; color: var(--laranja-esc); clip-path: var(--telhado); border-radius: 0 0 12px 12px; margin-bottom: 18px; }
.valor__ico .ico { width: 24px; height: 24px; margin-top: 6px; }
.valor h3 { font-size: 19px; margin-bottom: 8px; }
.valor p { color: var(--suave); font-size: 15px; }

.visite { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.visite h2 { font-size: clamp(26px, 3vw, 36px); }

@media (max-width: 980px) {
	.sobre-topo__grade, .texto-duplo, .visite { grid-template-columns: 1fr; gap: 32px; }
	.sobre-topo__grade > div:first-child { padding-bottom: 0; }
	.sobre-topo__foto { max-width: 460px; }
	.texto-duplo h2 { position: static; }
	.mvv { grid-template-columns: 1fr; }
	.valores { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.mvv__item { padding: 28px 22px; }
	.valores { grid-template-columns: 1fr; }
	.valor { padding: 24px 20px; }
}