/* MONPENEDÈS — ART DIRECTION / PREMIUM EDITION 2026
   Architectural photography, editorial typography, calm transitions. Home only. */
.mp-main.mp-ux-home{--mp-ink:#252622;--mp-muted:#777970;--mp-paper:#f6f5f1;--mp-rule:#dcdcd5;color:var(--mp-ink)}
.mp-main.mp-ux-home .mp-ux-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;gap:clamp(22px,4vw,64px)!important;padding-block:clamp(45px,5.5vw,86px)!important;align-items:center!important}
.mp-main.mp-ux-home .mp-ux-hero-copy{padding:0!important;z-index:1!important}
.mp-main.mp-ux-home .mp-ux-hero-copy .mp-eyebrow{display:block;font-size:11px!important;letter-spacing:.18em!important;color:#65665f!important;margin-bottom:clamp(24px,4vw,54px)!important}
.mp-main.mp-ux-home .mp-ux-hero-copy h1{font-size:clamp(70px,7vw,120px)!important;line-height:.98!important;letter-spacing:-.073em!important;font-weight:450!important;max-width:730px!important;margin:0 0 35px!important;position:relative!important;z-index:1!important;text-wrap:balance}
.mp-main.mp-ux-home .mp-ux-hero-copy h1 em{font-style:italic!important;font-weight:400!important;letter-spacing:-.065em!important;display:inline!important;animation:none!important;transform:none!important}
.mp-main.mp-ux-home .mp-ux-hero-copy>p{max-width:430px!important;font-size:clamp(16px,1.25vw,19px)!important;line-height:1.75!important;color:#696a64!important}
.mp-main.mp-ux-home .mp-ux-hero-photo{min-height:clamp(520px,51vw,760px)!important;background-size:cover!important;background-position:center center!important;isolation:auto!important;box-shadow:none!important;filter:none!important;position:relative}
.mp-main.mp-ux-home .mp-ux-hero-photo:before,.mp-main.mp-ux-home .mp-ux-hero-photo:after{display:none!important;content:none!important}
.mp-main.mp-ux-home .mp-ux-hero-photo-caption{display:none!important}
.mp-main.mp-ux-home .mp-ux-hero-actions{margin-top:38px!important;display:flex;align-items:center;flex-wrap:wrap;gap:18px!important}
.mp-main.mp-ux-home .mp-ux-hero-actions .mp-button{background:#272822!important;color:#fff!important;border:1px solid #272822!important;padding:19px 27px!important;min-height:58px!important}
.mp-main.mp-ux-home .mp-ux-hero-actions .mp-button:hover{background:#45473e!important}
.mp-main.mp-ux-home .mp-ux-hero-textlink{color:#33352e!important;text-underline-offset:6px!important}
.mp-main.mp-ux-home .mp-ux-hero-note{display:block;margin-top:clamp(38px,6vw,86px)!important;font-size:10px!important;letter-spacing:.18em!important;color:#85867f!important}
.mp-main.mp-ux-home .mp-ux-choose{padding-block:clamp(100px,11vw,160px)!important}
.mp-main.mp-ux-home .mp-ux-section-row h2,.mp-main.mp-ux-home .mp-section-top h2{font-size:clamp(48px,5.6vw,82px)!important;line-height:1.04!important;letter-spacing:-.065em!important;font-weight:450!important}
.mp-main.mp-ux-home .mp-ux-choice-photo{min-height:clamp(350px,35vw,530px)!important;filter:none!important;transform:none!important}
.mp-main.mp-ux-home .mp-ux-choice-info{border-bottom:1px solid var(--mp-rule)!important;padding:28px 0 36px!important}
.mp-main.mp-ux-home .mp-ux-choice-info h3{font-size:clamp(28px,3vw,46px)!important;font-weight:450!important}
/* Interacció premium de les dues opcions: zoom subtil, enfosquiment i fletxa. */
.mp-main.mp-ux-home .mp-ux-choice{overflow:hidden}
.mp-main.mp-ux-home .mp-ux-choice-photo{transition:transform .7s cubic-bezier(.22,1,.36,1),filter .45s ease!important;transform:scale(1)!important;transform-origin:center}
.mp-main.mp-ux-home .mp-ux-choice-info b{display:inline-block;transition:transform .35s ease!important}
/* Títol editorial superposat a la fotografia quan es passa el cursor. */
.mp-main.mp-ux-home .mp-ux-choice-photo{position:relative;isolation:isolate}
.mp-main.mp-ux-home .mp-ux-choice-photo:after{
 content:"Habitatges en venda";position:absolute;inset:0;display:flex;
 align-items:center;justify-content:center;padding:28px;
 background:rgba(20,23,20,.43);color:#fff;text-align:center;
 font-size:clamp(25px,3vw,48px);font-weight:500;line-height:1.12;
 letter-spacing:-.045em;opacity:0;transition:opacity .4s ease;
 pointer-events:none;z-index:2
}
.mp-main.mp-ux-home .mp-ux-choice-cubo .mp-ux-choice-photo:after{content:"Cases ecosostenibles"}
@media(hover:hover){
 .mp-main.mp-ux-home .mp-ux-choice:hover .mp-ux-choice-photo:after{opacity:1}
}
.mp-main.mp-ux-home .mp-ux-choice:focus-visible .mp-ux-choice-photo:after{opacity:1}
@media(prefers-reduced-motion:reduce){.mp-main.mp-ux-home .mp-ux-choice-photo:after{transition:none}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .mp-main.mp-ux-home .mp-ux-choice:hover .mp-ux-choice-photo{transform:scale(1.045)!important;filter:brightness(.88) saturate(1.06)!important}
 .mp-main.mp-ux-home .mp-ux-choice:hover .mp-ux-choice-info b{transform:translate(5px,-4px)!important}
}
.mp-main.mp-ux-home .mp-ux-choice:focus-visible{outline:2px solid #252622!important;outline-offset:5px}
.mp-main.mp-ux-home .mp-ux-choice:focus-visible .mp-ux-choice-photo{filter:brightness(.9)!important}
@media(prefers-reduced-motion:reduce){.mp-main.mp-ux-home .mp-ux-choice-photo,.mp-main.mp-ux-home .mp-ux-choice-info b{transition:none!important}}

.mp-main.mp-ux-home .mp-home-featured{background:var(--mp-paper)!important}
.mp-main.mp-ux-home .mp-home-featured .mp-card-media img{filter:none!important}
.mp-main.mp-ux-home .mp-ux-cubo-feature{background:#292c28!important;color:#f6f6f1!important}
.mp-main.mp-ux-home .mp-ux-cubo-feature :is(h2,h3,p,a,.mp-eyebrow,.mp-card-title,.mp-card-loc){color:#f6f6f1!important}
.mp-main.mp-ux-home .mp-ux-end{background:#f9f8f5!important}
@media(prefers-reduced-motion:no-preference){
.mp-main.mp-ux-home .mp-ux-hero-copy h1{animation:mp-premium-headline 1s cubic-bezier(.2,.7,.2,1) both!important;animation-delay:.12s!important}
.mp-main.mp-ux-home .mp-ux-hero-photo{animation:mp-premium-image 1.25s cubic-bezier(.2,.7,.2,1) both!important;animation-delay:.2s!important}
@keyframes mp-premium-headline{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes mp-premium-image{from{opacity:0;clip-path:inset(0 0 16% 0);transform:scale(.985)}to{opacity:1;clip-path:inset(0);transform:scale(1)}}
}
@media(max-width:767px){
.mp-main.mp-ux-home .mp-ux-hero{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:32px!important;padding-block:35px 65px!important}
.mp-main.mp-ux-home .mp-ux-hero-copy h1{font-size:clamp(54px,12.5vw,80px)!important;line-height:.98!important;margin:0 0 25px!important}
.mp-main.mp-ux-home .mp-ux-hero-copy .mp-eyebrow{margin-bottom:24px!important}
.mp-main.mp-ux-home .mp-ux-hero-photo{min-height:clamp(390px,108vw,560px)!important}
.mp-main.mp-ux-home .mp-ux-hero-note{margin-top:32px!important}
.mp-main.mp-ux-home .mp-ux-choose,.mp-main.mp-ux-home .mp-home-featured,.mp-main.mp-ux-home .mp-ux-cubo-feature{padding-block:70px!important}
.mp-main.mp-ux-home .mp-ux-section-row h2,.mp-main.mp-ux-home .mp-section-top h2{font-size:clamp(42px,10vw,62px)!important}
.mp-main.mp-ux-home .mp-ux-choice-photo{min-height:280px!important}
}
@media(prefers-reduced-motion:reduce){.mp-main.mp-ux-home .mp-ux-hero-copy h1,.mp-main.mp-ux-home .mp-ux-hero-photo{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}}