/* MatekObras — hero de obra e secção antes/depois (2640276) */
.hero-obra { position: relative; }
.hero-obra:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,28,32,.72) 0%, rgba(20,28,32,.45) 45%, rgba(20,28,32,0) 80%); z-index: 0; }
.hero-obra .swiper-slide-caption { position: relative; z-index: 1; text-align: left; }
.hero-obra h1 { color: #fff; }
.hero-obra .hero-sub { color: #fff; font-size: 18px; line-height: 1.5; max-width: 560px; margin-top: 18px; }
.hero-obra .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-obra .hero-actions .button { margin: 0; }
.hero-obra .button-ghost { color: #fff; background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.hero-obra .button-ghost:hover { color: #222; background: #fff; }
.hero-obra .hero-trust { color: rgba(255,255,255,.9); font-size: 14px; margin-top: 22px; }
.hero-obra .hero-note { position: absolute; right: 16px; bottom: 12px; z-index: 1; color: rgba(255,255,255,.75); font-size: 12px; }
@media (max-width: 767px) { .hero-obra .hero-sub, .hero-obra .hero-trust { display: block; font-size: 15px; } .hero-obra:before { background: rgba(20,28,32,.55); } }

.antes-depois .ad-intro { max-width: 680px; margin: 0 auto 36px; }
.ad-compare { position: relative; max-width: 1024px; margin: 0 auto; aspect-ratio: 1024 / 559; overflow: hidden; user-select: none; touch-action: pan-y; background: #e9eeee; }
.ad-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ad-compare .ad-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ad-compare .ad-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.ad-compare .ad-knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #729293; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.ad-compare .ad-tag { position: absolute; top: 14px; padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(34,34,34,.75); pointer-events: none; }
.ad-compare .ad-tag-l { left: 14px; } .ad-compare .ad-tag-r { right: 14px; background: #729293; }
.ad-compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ad-compare input[type=range]:focus-visible ~ .ad-line .ad-knob { outline: 3px solid #fff; outline-offset: 3px; }
.ad-note { font-size: 13px; color: #888; margin-top: 10px; }
.ad-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1024px; margin: 40px auto 0; padding: 0; list-style: none; text-align: left; }
.ad-steps img { width: 100%; height: auto; display: block; margin-bottom: 12px; }
.ad-steps h4 { margin: 0 0 6px; }
.ad-steps p { margin: 0; font-size: 15px; }
@media (max-width: 767px) { .ad-steps { grid-template-columns: 1fr; } .ad-compare .ad-knob { width: 38px; height: 38px; margin: -19px 0 0 -19px; } }

/* Página Obras: miniaturas todas com o mesmo formato, sem buracos na grelha */
.obras-grid .gallery-item img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }

/* Antes/depois real (fotos verticais) na página Obras */
.ad-compare.ad-portrait { aspect-ratio: 3 / 4; max-width: 600px; }
.ad-real { margin: 0 auto 60px; }

/* Remodelações — introdução, serviços, passos */
.rem-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; text-align: left; }
.rem-intro img { width: 100%; height: auto; display: block; }
.rem-intro p { font-size: 17px; }
.rem-intro .button { margin-top: 12px; }
.rem-servicos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: left; margin-top: 36px; }
.rem-card { background: #fff; }
.rem-card .rem-foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #e9eeee; }
.rem-card .rem-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rem-card h4 { margin: 16px 0 6px; }
.rem-card p { margin: 0; font-size: 15px; }
.rem-passos { list-style: none; margin: 36px auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1100px; counter-reset: passo; text-align: left; }
.rem-passos li { counter-increment: passo; padding-top: 14px; border-top: 3px solid #729293; }
.rem-passos h4 { margin: 0 0 6px; }
.rem-passos h4:before { content: counter(passo) ". "; color: #729293; }
.rem-passos p { margin: 0; font-size: 15px; }
.rem-cta { background: #f6f8f8; }
@media (max-width: 991px) { .rem-servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rem-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rem-intro { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 520px) { .rem-servicos, .rem-passos { grid-template-columns: 1fr; } }