/* Cabecera de materiales. Usa las fuentes y variables compartidas de Proto&Go!. */
.material-gallery{--mg-bg:#101010;--mg-soft:#969694;background:var(--mg-bg);color:var(--paper);color-scheme:dark;overflow:hidden;position:relative;padding-top:var(--nav)}
.mg-main{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.3fr);gap:clamp(30px,4vw,68px);align-items:center;padding-top:26px;padding-bottom:20px;min-height:460px}
.mg-copy{position:relative;z-index:2;padding-block:0}
.mg-copy .crumbs{color:var(--mg-soft);margin-bottom:22px}
.mg-copy h1{font-size:clamp(2.6rem,4.2vw,4.1rem);letter-spacing:-.055em;line-height:.98;font-weight:580}
.mg-copy h1 em{font-style:normal;color:var(--orange)}
.mg-copy .lede{color:#aaa9a5;max-width:35ch;font-size:clamp(1rem,1.3vw,1.08rem);margin-top:20px;line-height:1.6}
.mg-actions{margin-top:22px}
.mg-actions .btn{padding:13px 22px;font-size:.94rem}
.mg-stats{display:flex;gap:25px;margin-top:24px;font-size:.76rem;color:var(--mg-soft)}
.mg-stats span{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.mg-stats b{font-family:var(--display);font-size:1.22rem;font-weight:500;color:#e9e9e4}
.mg-showroom{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;outline-offset:8px}
.mg-topline{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.13em;color:#8b8c88;position:relative;z-index:1}
.mg-topline span:first-child{display:flex;align-items:center;gap:9px}
.mg-topline span:first-child::before{content:"";width:5px;height:5px;background:var(--orange);border-radius:50%}
.mg-stage{position:relative;height:clamp(290px,25vw,390px);isolation:isolate;touch-action:pan-y}
.mg-pieces{position:absolute;inset:0;perspective:1200px;transform-style:preserve-3d}
.mg-piece{position:absolute;width:100%;aspect-ratio:8/5;top:0;left:0;opacity:0;transform:translate3d(48%,-10%,0) scale(.4) rotate(-8deg);transition:transform .85s cubic-bezier(.22,.75,.17,1),filter .7s ease;pointer-events:none;mix-blend-mode:normal;mask-image:url(materiales-pieza/carcasa-silueta.svg);-webkit-mask-image:url(materiales-pieza/carcasa-silueta.svg);mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
/* Only optically transparent catalogue materials transmit the pieces behind them. */
.mg-piece[data-transparent=true]{mix-blend-mode:lighten}
.mg-piece img{width:100%;height:100%;object-fit:contain}
.mg-piece.is-current{opacity:1;filter:brightness(1);transform:translate3d(-5%,-8%,0) scale(.8);z-index:3}
.mg-piece.is-previous{opacity:1;filter:brightness(.42);transform:translate3d(-32%,-25%,0) scale(.42) rotate(-13deg);z-index:1}
.mg-piece.is-next{opacity:1;filter:brightness(.65);transform:translate3d(32%,-27%,0) scale(.43) rotate(12deg);z-index:2}
.mg-piece.is-away{opacity:0;z-index:0;transform:translate3d(-52%,15%,0) scale(.35) rotate(-18deg)}
.mg-ground{position:absolute;bottom:7%;left:14%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#393935 40%,#393935 60%,transparent);opacity:.4}
.mg-ground::after{content:"";position:absolute;left:50%;top:-4px;width:1px;height:9px;background:#8b8c88}
.mg-stage[aria-busy=true]::after{content:"";position:absolute;inset:25% 12%;border-radius:10px;background:linear-gradient(110deg,transparent,#ffffff06,transparent);animation:mg-loading 1.3s ease-in-out infinite alternate}
@keyframes mg-loading{to{opacity:.2;transform:translateX(15px)}}
.mg-image-error{position:absolute;inset:45% 15% auto;text-align:center;font-size:.86rem;color:#c7c7c1;z-index:4;background:#101010;padding:15px}
.mg-image-error[hidden]{display:none}
.mg-caption{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-bottom:19px;min-height:108px;position:relative;z-index:4}
.mg-family{color:#989b95;font-family:var(--mono);font-size:.59rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px}
.mg-name{font-family:var(--body);font-size:clamp(1.4rem,2.35vw,2.1rem);font-weight:500;line-height:1.1;letter-spacing:-.035em}
.mg-trait{color:#9d9d98;font-size:.79rem;margin-top:8px;min-height:1.55em}
.mg-caption-copy.is-changing{animation:mg-caption-in .65s var(--ease) both}
@keyframes mg-caption-in{from{opacity:.25;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.mg-counter{font-family:var(--mono);font-size:.66rem;white-space:nowrap}
.mg-counter b{font-weight:400;color:var(--paper)}
.mg-counter span{margin-left:6px;color:#777b75}
.mg-timer{height:1px;background:#ffffff1a;overflow:hidden}
.mg-timer>span{display:block;width:100%;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.material-gallery :focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.mg-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mg-noscript{padding-block:20px;color:#ddd}
.mg-noscript a{text-decoration:underline}
@media(min-width:1600px){.mg-main{min-height:570px}.mg-stage{height:390px}}
@media(max-width:1100px){.mg-main{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:25px;padding-top:25px}.mg-stage{height:280px}.mg-name{font-size:1.45rem}.mg-trait{font-size:.73rem}}
@media(max-width:767px){
 .mg-main{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:26px;padding-bottom:26px;min-height:0}
 .mg-copy{padding:0}.mg-copy .crumbs{margin-bottom:22px}.mg-copy h1{font-size:clamp(2.7rem,8.7vw,4.2rem)}
 .mg-copy .lede{font-size:1rem;max-width:40ch;margin-top:20px}.mg-actions{margin-top:22px}.mg-actions .btn{padding:13px 20px;font-size:.9rem}.mg-stats{margin-top:22px;gap:21px;font-size:.72rem}.mg-stats b{font-size:1.1rem}
 .mg-showroom{padding-top:12px}.mg-topline{font-size:.51rem}.mg-stage{height:clamp(245px,66vw,400px)}.mg-piece{top:0}
 .mg-piece.is-current{transform:translate3d(-5%,0,0) scale(.95)}.mg-piece.is-previous{transform:translate3d(-31%,-23%,0) scale(.45) rotate(-13deg)}.mg-piece.is-next{transform:translate3d(32%,-25%,0) scale(.47) rotate(12deg)}
 .mg-caption{min-height:98px;padding-bottom:15px}.mg-name{font-size:1.5rem}.mg-family{font-size:.5rem;max-width:29ch}.mg-trait{font-size:.72rem;max-width:28ch;min-height:2.8em}
}
@media(prefers-reduced-motion:reduce){.material-gallery *,.material-gallery *::before{animation:none!important;transition:none!important}.mg-timer>span{display:none}.mg-piece.is-previous,.mg-piece.is-next{filter:brightness(.4)}}