/* === Área 03 · Muebles a medida === */
.mx{position:relative;background:var(--cal);padding:clamp(72px,8vw,124px) 0;overflow:hidden}
.mx-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;margin-bottom:clamp(40px,4.5vw,64px)}
.mx-head h2{margin:0;font-size:clamp(2.3rem,4.2vw,4.2rem);line-height:.96}
.mx-head h2 span{display:block;color:var(--violeta)}
.mx-intro{justify-self:end;max-width:31rem}
.mx-intro p{margin:0 0 22px;color:#55505a;font-size:clamp(1rem,1.1vw,1.06rem);line-height:1.65}
.mx-main{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.mx-list{border-top:1px solid var(--line)}
.mx-item{border-bottom:1px solid var(--line);position:relative}
.mx-item:before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--violeta);transition:width .5s var(--ease)}
.mx-item.is-active:before{width:100%}
.mx-trigger{display:grid;grid-template-columns:40px 1fr 28px;align-items:center;gap:12px;width:100%;padding:20px 0;border:0;background:none;text-align:left;color:var(--grafito);cursor:pointer}
.mx-n{font:500 .68rem var(--font-mono);letter-spacing:.1em;color:var(--aluminio);transition:color .3s var(--ease)}
.mx-t{font:800 clamp(1.1rem,1.6vw,1.5rem)/1.05 var(--font-title);text-transform:uppercase;letter-spacing:-.02em;transition:color .3s var(--ease),transform .4s var(--ease)}
.mx-arrow{justify-self:end;display:grid;place-items:center;width:28px;height:28px;font-style:normal;color:var(--aluminio);transition:color .3s var(--ease),transform .4s var(--ease)}
.mx-arrow:before{content:"→";font:500 1rem var(--font-body)}
.mx-item.is-active .mx-n,.mx-item.is-active .mx-t,.mx-item.is-active .mx-arrow{color:var(--violeta)}
.mx-item.is-active .mx-t{transform:translateX(4px)}
.mx-item.is-active .mx-arrow{transform:translateX(4px)}
.mx-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.mx-panel>div{overflow:hidden;padding-left:52px}
.mx-item.is-active .mx-panel{grid-template-rows:1fr}
.mx-panel p{margin:0 0 10px;color:#5a555e;font-size:.95rem;line-height:1.55;max-width:26rem}
.mx-panel a{display:inline-block;margin-bottom:20px;font:500 .68rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--violeta);border-bottom:1px solid currentColor;padding-bottom:3px}
.mx-visual{position:relative}
.mx-stage{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--grafito)}
.mx-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s var(--ease)}
.mx-slide.is-active{opacity:1;z-index:1}
.mx-slide img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.4s var(--ease)}
.mx-slide.is-active img{transform:scale(1)}
.mx-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;padding:clamp(22px,3vw,40px);color:#fff;background-color:#1d1a21;background-image:radial-gradient(circle at 80% 15%,rgba(75,30,143,.5),transparent 55%),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:auto,40px 40px,40px 40px}
.mx-ph b{font:800 clamp(4rem,9vw,8rem)/.9 var(--font-title);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}
.mx-ph span{font:800 clamp(1.2rem,2vw,1.8rem)/1 var(--font-title);text-transform:uppercase;letter-spacing:-.02em}
.mx-fig{position:absolute;z-index:3;top:16px;left:16px;background:rgba(23,21,26,.82);color:#fff;padding:7px 10px;font-size:.62rem;backdrop-filter:blur(4px)}
.mx-fig b{color:#cdb9ec;font-weight:500}.mx-fig em{font-style:normal}
.mx-steps{list-style:none;margin:clamp(48px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.mx-steps li{display:flex;gap:16px;padding:24px 24px 0 0}
.mx-steps li+li{padding-left:24px;border-left:1px solid var(--line)}
.mx-steps b{font:500 .68rem var(--font-mono);letter-spacing:.1em;color:var(--violeta);padding-top:4px}
.mx-steps strong{display:block;font:800 1.05rem/1.1 var(--font-title);text-transform:uppercase;margin-bottom:6px}
.mx-steps span{display:block;color:#5a555e;font-size:.9rem;line-height:1.5}
.covers{background:#fff}
@media(max-width:900px){
.mx-head{grid-template-columns:minmax(0,1fr);gap:18px}
.mx-intro{justify-self:start}
.mx-main{grid-template-columns:minmax(0,1fr);gap:28px}
.mx-visual{order:-1}
.mx-visual .hx-corner{display:none}
.mx-steps{grid-template-columns:minmax(0,1fr)}
.mx-steps li{padding:18px 0}
.mx-steps li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:720px){
.mx{padding:60px 0}
.mx-head h2{font-size:clamp(2rem,8.6vw,2.7rem)}
.mx-intro .btn{width:100%}
.mx-trigger{padding:16px 0;grid-template-columns:32px 1fr 24px}
.mx-panel>div{padding-left:44px}
}