/* Composiciones V62. Capturas originales en dispositivos y soporte editorial. */
.m62-scene{display:block;position:relative;isolation:isolate;container-type:inline-size;width:100%;aspect-ratio:1.32;text-decoration:none!important;color:#172C25;background:transparent;outline-offset:8px;overflow:visible}
.m62-scene *{box-sizing:border-box}.m62-scene:focus-visible{outline:2px solid #223D35;border-radius:3px}.m62-composition{position:absolute;inset:0;display:block;perspective:1500px;pointer-events:none}.m62-scene img{display:block;width:100%;max-width:none;height:auto;margin:0;padding:0;border:0;border-radius:0;filter:none}
.m62-floor{position:absolute;bottom:8%;left:3%;right:0;height:19%;background:radial-gradient(ellipse at center,rgba(23,44,37,.18),transparent 67%);filter:blur(9px);transform:rotate(-3deg);z-index:-1}
.m62-laptop{position:absolute;width:87%;left:0;top:13%;display:block;transform:rotate(-4deg) rotateY(7deg);transform-origin:50% 80%;transition:transform .5s cubic-bezier(.2,.65,.3,1)}
.m62-lid{display:block;position:relative;padding:1.5% 1.25% 1.9%;border:1px solid #77807D;border-radius:2.8% 2.8% 1.5% 1.5%;background:linear-gradient(140deg,#3C4440 0%,#141B18 55%,#3C4740 100%);box-shadow:0 15px 25px -17px rgba(16,32,25,.65),inset 0 0 0 1px #111915;overflow:hidden}
.m62-camera{position:absolute;width:3px;height:3px;left:50%;top:.7%;border-radius:50%;background:#62716C;box-shadow:0 0 0 1px #0A1510}.m62-display{display:block;overflow:hidden;border-radius:1.2%;aspect-ratio:1.44;background:white}
.m62-base{position:relative;display:block;width:111%;height:1.7cqw;margin-left:-5.5%;background:linear-gradient(#DDE0DC 0%,#B1B7B0 35%,#D6DBD3 60%,#879286 100%);border-radius:1px 1px 45% 45% / 1px 1px 90% 90%;box-shadow:0 9px 13px -7px #64705A}
.m62-base>i{position:absolute;left:40%;width:20%;top:0;height:44%;background:linear-gradient(#7C857B,#D6DBD3);border-radius:0 0 6px 6px}
.m62-phone{position:absolute;display:block;z-index:2;width:27%;right:0;bottom:8%;padding:1.2% 1%;background:linear-gradient(125deg,#646D68,#1C2922 30%,#0C1711 75%,#56625A);border:1px solid #818D83;border-radius:18% / 8%;box-shadow:11px 19px 24px -15px rgba(20,37,25,.65),inset 0 0 0 1px #0C1711;transform:rotate(6deg);transition:transform .5s cubic-bezier(.2,.65,.3,1)}
.m62-phone-screen{display:block;border-radius:15% / 7%;overflow:hidden;background:white}.m62-phone-screen img{width:100%;height:auto}.m62-phone-speaker{position:absolute;width:22%;height:.8%;background:#24352C;border-radius:5px;left:39%;top:.9%}.m62-phone-home{position:absolute;bottom:1.1%;left:35%;width:30%;height:.55%;border-radius:5px;background:#86988D}
.m62-maria .m62-floor{left:0;bottom:7%;height:18%;background:radial-gradient(ellipse at center,rgba(97,71,43,.17),transparent 67%)}
.m62-artwork{position:absolute;display:block;z-index:2;left:0;bottom:7%;width:29%;aspect-ratio:292 / 440;overflow:hidden;transform:rotate(-4deg);box-shadow:6px 9px 18px -14px rgba(62,52,34,.5);background:#EEEDE7;transition:transform .5s cubic-bezier(.2,.65,.3,1)}
.m62-artwork img{position:absolute;width:133.562%;height:auto;max-width:none;left:-16.781%;top:-20.91%}
.m62-art-browser{position:absolute;display:block;width:89%;left:9%;bottom:22%;z-index:1;border:1px solid #DFDCD5;border-radius:1.1cqw;background:#FAF9F6;box-shadow:0 21px 35px -22px rgba(65,52,34,.55),0 4px 10px -6px rgba(65,52,34,.2);overflow:hidden;transform:rotate(3deg) rotateY(-4deg);transition:transform .5s cubic-bezier(.2,.65,.3,1)}
.m62-chrome{display:flex;height:3.8cqw;min-height:13px;max-height:25px;align-items:center;gap:5%;padding:0 2.4%;border-bottom:1px solid #E5E2DC;background:linear-gradient(#FBFAF7,#EFEDE7);color:#837C70;font-family:DM,sans-serif;font-size:clamp(5px,1.35cqw,9px);line-height:1;letter-spacing:0;white-space:nowrap}
.m62-chrome>span{flex:1;text-align:center}.m62-dots{display:flex;gap:.6cqw}.m62-dots i{display:block;width:.7cqw;height:.7cqw;background:#C4BEB4;border-radius:50%}.m62-window-mark{font-style:normal;font-size:1.5cqw;font-weight:400}.m62-art-display{display:block;background:white;aspect-ratio:1909 / 923;overflow:hidden}
.h60-work-grid{gap:56px}.h60-case .m62-scene{margin-bottom:5px}.h60-case:has(.m62-scene) figcaption{padding-top:12px}.c61-index-work>.c61-figure:has(.m62-scene){background:transparent;padding:0}.c61-index-work .m62-scene{aspect-ratio:1.32}.c61-index-work .m62-scene img{border-radius:0}.c61-index-work .c61-figure:has(.m62-scene) figcaption{padding:10px 0 0}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.m62-opticalh:hover .m62-laptop{transform:translateY(-4px) rotate(-3deg) rotateY(5deg)}.m62-opticalh:hover .m62-phone{transform:translateY(-6px) rotate(4deg)}.m62-maria:hover .m62-artwork{transform:translateY(-4px) rotate(-3deg)}.m62-maria:hover .m62-art-browser{transform:translateY(-3px) rotate(2deg) rotateY(-3deg)}}
@media(max-width:1050px) and (min-width:701px){.h60-work-grid{gap:36px}.m62-scene{aspect-ratio:1.25}.m62-laptop{top:16%}.m62-phone{bottom:10%}.m62-art-browser{bottom:22%}}
@media(max-width:700px){.h60-work-grid{gap:46px}.m62-scene{aspect-ratio:1.3}.m62-laptop{top:14%;width:88%}.m62-phone{width:28%;right:0;bottom:8%}.m62-artwork{width:30%;left:0;bottom:7%}.m62-art-browser{width:89%;left:9%;bottom:22%;border-radius:4px}.m62-scene:focus-visible{outline-offset:4px}.h60-case:has(.m62-scene) figcaption{padding-top:8px}.m62-floor{filter:blur(6px)}}
@media(prefers-reduced-motion:reduce){.m62-scene *{transition:none!important}.m62-laptop{transform:rotate(-3deg)}.m62-phone{transform:rotate(4deg)}.m62-art-browser{transform:rotate(2deg)}.m62-artwork{transform:rotate(-4deg)}}

/* V63: únicamente María. OpticalH conserva sus reglas y su composición V62. */
.m62-maria .m63-monitor{position:absolute;display:block;width:87%;left:13%;top:15%;transform:rotate(2deg) rotateY(-4deg);transform-origin:50% 70%;transition:transform .5s cubic-bezier(.2,.65,.3,1)}
.m62-maria .m63-monitor-panel{position:relative;display:block;padding:1.35% 1.2% 0;border:1px solid #9FA8A2;border-radius:1.5cqw;background:linear-gradient(140deg,#D6DDD7,#EEF0EB 40%,#B3BEB5);box-shadow:0 12px 25px -19px rgba(35,48,37,.65),inset 0 0 0 1px #F5F5F1;overflow:hidden}
.m62-maria .m63-monitor-camera{position:absolute;top:.65%;left:50%;width:2px;height:2px;border-radius:50%;background:#68776B}
.m62-maria .m63-monitor-display{display:block;aspect-ratio:1909 / 923;overflow:hidden;background:white;border:1px solid #C4CDC3;border-radius:.55cqw .55cqw 0 0}
.m62-maria .m63-monitor-display img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.m62-maria .m63-monitor-chin{display:block;height:3.6cqw;background:linear-gradient(105deg,#DDE3DA,#E9ECE3 42%,#C4CDC0)}
.m62-maria .m63-monitor-neck{display:block;width:13%;height:5.2cqw;margin-inline:auto;background:linear-gradient(90deg,#AEB9AD,#D8DFD1 45%,#C3CDBB 70%,#A1AF9E);box-shadow:inset 0 7px 8px -5px #81917A;clip-path:polygon(17% 0,83% 0,100% 100%,0 100%)}
.m62-maria .m63-monitor-foot{position:relative;display:block;width:36%;height:1.3cqw;margin-inline:auto;background:linear-gradient(#D8DFD0,#B8C5AD 65%,#8D9E83);border-radius:50% 50% 15% 15% / 65% 65% 25% 25%;box-shadow:0 7px 13px -7px #4B5E3F}
.m62-maria .m63-maria-phone{left:0;right:auto;bottom:6%;width:27%;transform:rotate(-5deg);background:linear-gradient(125deg,#E0E4DA,#B9C4B1 30%,#DDE3D4 70%,#91A082);border-color:#A5B29A;box-shadow:10px 15px 22px -16px rgba(36,49,29,.6),inset 0 0 0 1px #EAF0E0}
.m62-maria .m63-maria-phone .m62-phone-speaker{background:#7E8D72}.m62-maria .m63-maria-phone .m62-phone-home{background:#98A58C}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.m62-maria:hover .m63-monitor{transform:translateY(-3px) rotate(1deg) rotateY(-3deg)}.m62-maria:hover .m63-maria-phone{transform:translateY(-5px) rotate(-3deg)}}
@media(max-width:1050px) and (min-width:701px){.m62-maria .m63-monitor{top:18%;width:86%;left:14%}.m62-maria .m63-maria-phone{bottom:9%}}
@media(max-width:700px){.m62-maria .m63-monitor{width:86%;left:14%;top:15%}.m62-maria .m63-maria-phone{width:28%;bottom:6%}.m62-maria .m63-monitor-panel{border-radius:6px}.m62-maria .m63-monitor-display{border-radius:2px 2px 0 0}}
@media(prefers-reduced-motion:reduce){.m62-maria .m63-monitor{transform:rotate(1deg)}.m62-maria .m63-maria-phone{transform:rotate(-4deg)}}
