/* Alphyx v11 — presentación del ejemplo «Espacios · Mantenimiento» (portal conceptual de mantenimiento del sitio de
 * Estudio Espacios) en el bloque Mantenimiento y evolución de la portada y en mantenimiento.html. Se añade a
 * styles.css/motion.css sin modificarlos. Prefijo me-. Las pantallas en miniatura usan la paleta del portal (papel, tinta
 * y bronce del estudio; estados con texto e icono) dentro de un portátil dibujado; lo que las rodea mantiene la
 * identidad Alphyx. Movimiento en mantenimiento-espacios.js. */

.me-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-size: 15px; color: var(--blue, #0068d9); }
.me-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.me-credits { font-size: 12px; line-height: 1.5; color: var(--muted, #595f69); text-align: center; margin: 4px 20px 0; }
.me-credits a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--blue, #0068d9); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; font-size: 13px; }
.me-ico { width: 20px; height: 20px; }

/* ——— Portátil dibujado ——— */
.me-display { position: relative; container-type: inline-size; width: 100%; margin: 0 auto; text-align: left; }
.me-bezel { position: relative; width: 88%; margin: 0 auto; padding: 1.3% 1.3% 1.1%; border-radius: 2.2cqi 2.2cqi 0 0; background: linear-gradient(#27292d, #121316); box-shadow: inset 0 0 0 1px #45484e; }
.me-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .6cqi; background: #f6f6f3; container-type: inline-size; }
.me-base { position: relative; height: 2.2cqi; border-radius: 0 0 2.6cqi 2.6cqi / 0 0 1.8cqi 1.8cqi; background: linear-gradient(#d9dbde, #a9acb1); box-shadow: 0 26px 40px -24px #0f1a2a88; }
.me-base i { position: absolute; left: 50%; top: 0; width: 14%; height: 45%; transform: translateX(-50%); border-radius: 0 0 1cqi 1cqi; background: #b9bcc1; }
.me-promo .me-promo-art { flex-direction: column; padding: 14px 0 30px; }
.me-promo .me-display { width: min(92%, 660px); }
.me-promo .concept-label { margin-top: 26px; }
.me-hero .me-hero-art { width: min(1040px, calc(100% - 48px)); margin: 48px auto 0; }
.me-hero .concept-label { margin-top: 32px; }

/* ——— Portal en miniatura (paleta del portal) ——— */
.me-s { position: absolute; inset: 0; display: grid; grid-template-columns: 17% 1fr; font: 400 clamp(4px, 1.3cqi, 12.5px)/1.35 -apple-system, "Segoe UI", system-ui, sans-serif; color: #151616; background: #f6f6f3; }
.me-s-ico { width: 1.25em; height: 1.25em; flex: none; }
.me-s-side { display: flex; flex-direction: column; gap: .3em; padding: 1.4em 1em; background: #fff; border-right: 1px solid #d4d3cd; }
.me-s-brand { font-weight: 400; font-size: 1.35em; letter-spacing: -.02em; }
.me-s-sub { margin-bottom: 1em; color: #6f5320; font-size: .95em; }
.me-s-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .25em; }
.me-s-nav li { display: flex; align-items: center; gap: .5em; padding: .55em .6em; border-radius: .4em; color: #4f5256; }
.me-s-nav li.is-on { background: #efe4cf; color: #151616; box-shadow: inset .2em 0 0 #6f5320; }
.me-s-nav i { margin-left: auto; min-width: 1.5em; padding: 0 .35em; border-radius: 9em; background: #151616; color: #fff; font-style: normal; font-size: .85em; text-align: center; }
.me-s-main { min-width: 0; padding: 1.6em 2em; overflow: hidden; }
.me-s-kick { margin: 0; color: #6f5320; font-size: .95em; }
.me-s-title { margin: .1em 0 .8em; font: 300 3em/1.05 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; letter-spacing: -.04em; }
.me-s-card { min-width: 0; padding: .9em; border: 1px solid #d4d3cd; border-radius: .6em; background: #fff; }
.me-s-card small { display: block; margin-top: .5em; color: #4f5256; }
.me-s-card .me-pic img { width: 100%; height: auto; border-radius: .3em; }
.me-s-h { margin: 0 0 .5em; font-weight: 600; }
.me-s-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.2em; align-items: start; }
.me-s-cmp { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; border-radius: .5em; border: 1px solid #d4d3cd; box-shadow: 0 1.2em 2.4em -1.2em #15161666; }
.me-s-cmp-a, .me-s-cmp-b { position: absolute; inset: 0; }
.me-s-cmp-b { clip-path: inset(0 0 0 var(--p, 55%)); }
.me-s-cmp img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.me-s-cmp-h { position: absolute; top: 0; bottom: 0; left: var(--p, 55%); width: 0; }
.me-s-cmp-h::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 2px; background: #fff; box-shadow: 0 0 0 1px #15161655; }
.me-s-cmp-h b { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; background: #fff; border: 1px solid #151616; }
.me-s-tag { position: absolute; top: .6em; padding: .15em .5em; border-radius: .25em; background: #121314dd; color: #fff; font: 600 .85em/1.4 ui-monospace, Consolas, monospace; }
.me-s-tag--a { left: .6em; } .me-s-tag--b { right: .6em; }
.me-s-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }
.me-s-log-i { display: grid; grid-template-columns: 2em 1fr; gap: .6em; align-items: start; }
.me-s-log-i em { display: block; font: 500 .85em/1.4 ui-monospace, Consolas, monospace; color: #4f5256; font-style: normal; }
.me-s-dot { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #151616; color: #fff; }
.me-s-dot .me-s-ico { width: 1em; height: 1em; }
.me-s-log-i.is-new .me-s-dot { background: #e0ede3; color: #255235; border: 1px solid #255235; }
.me-s-log--lg { gap: 1.1em; max-width: 44em; font-size: 1.1em; }
.me-s-log-i small { display: block; margin-top: .2em; font: 1em/1.45 "Iowan Old Style", "Palatino Linotype", Georgia, serif; color: #4f5256; }
.me-s-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 1.2em; border: 1px solid #d4d3cd; border-radius: .6em; overflow: hidden; background: #d4d3cd; }
.me-s-strip > span { display: grid; gap: .3em; align-content: start; padding: .8em .9em; background: #fff; }
.me-s-strip em { font: .85em ui-monospace, Consolas, monospace; font-style: normal; color: #4f5256; }
.me-s-strip b { font: 300 2em/1 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; }
.me-s-st { display: inline-flex; align-items: center; gap: .3em; padding: .15em .55em .15em .35em; border-radius: 9em; font-weight: 600; font-size: .85em; white-space: nowrap; }
.me-s-st .me-s-ico { width: 1.05em; height: 1.05em; }
.me-s-st--recibida { color: #4f5256; background: #ecebe6; } .me-s-st--revision { color: #22435e; background: #e1e9f0; } .me-s-st--trabajo { color: #7a4108; background: #f6e7d2; } .me-s-st--publicada { color: #255235; background: #e0ede3; }
.me-s-status { display: flex; align-items: center; gap: 1em; padding: .9em 1.1em; margin-bottom: .9em; border: 1px solid #d4d3cd; border-radius: .6em; background: #fff; }
.me-s-status em { margin-left: .4em; padding: .1em .4em; border: 1px dashed #4f5256; border-radius: .2em; font: .85em ui-monospace, Consolas, monospace; font-style: normal; color: #4f5256; }
.me-s-status b { color: #255235; }
.me-s-pulse { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #e0ede3; color: #255235; }
.me-s-ver { margin-left: auto; color: #4f5256; }
.me-s-ver b { color: #151616; font-size: 1.6em; font-weight: 400; }
.me-s-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-bottom: 1em; border: 1px solid #d4d3cd; border-radius: .6em; overflow: hidden; background: #d4d3cd; }
.me-s-fact { display: grid; gap: .25em; align-content: start; padding: .8em .9em; background: #fff; }
.me-s-fact .me-s-ico { color: #6f5320; }
.me-s-fact em { font: .85em ui-monospace, Consolas, monospace; font-style: normal; color: #4f5256; }
.me-s-fact b { font: 300 2.2em/1 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; }
.me-s-fact:nth-child(-n+2) b { font: 500 1em/1.3 ui-monospace, Consolas, monospace; }
.me-s-fact small { color: #4f5256; font-size: .85em; }
.me-s-bar { display: block; height: .45em; border-radius: .3em; background: #ecebe6; overflow: hidden; }
.me-s-bar > i { display: block; height: 100%; background: #6f5320; transform-origin: left; }
.me-s-estado { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2em; align-items: start; }
.me-s-plano { display: grid; grid-template-columns: 1.3fr 1fr; border: .25em solid #151616; background: #fff; }
.me-s-room { display: grid; gap: .1em; padding: .7em .9em; min-height: 5.2em; border-right: 1px solid #151616; border-bottom: 1px solid #151616; font-weight: 600; }
.me-s-room:nth-child(2n) { border-right: 0; }
.me-s-room b { font: 300 2.2em/1 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; color: #6f5320; }
.me-s-room--sitio { grid-column: 1 / -1; min-height: 3.4em; border: 0; background: repeating-linear-gradient(135deg, #f6f6f3 0 .4em, #fff .4em .8em); grid-template-columns: auto 1fr; align-items: center; column-gap: .8em; }
.me-s-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; }
.me-s-col { padding: .6em; border-radius: .6em; background: #ecebe6; min-height: 22em; }
.me-s-colh { display: flex; align-items: center; gap: .35em; margin: 0 0 .6em; font-weight: 600; }
.me-s-col--recibida .me-s-colh { color: #4f5256; } .me-s-col--revision .me-s-colh { color: #22435e; } .me-s-col--trabajo .me-s-colh { color: #7a4108; } .me-s-col--publicada .me-s-colh { color: #255235; }
.me-s-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.me-s-sol { display: grid; gap: .3em; justify-items: start; padding: .6em .7em; border-radius: .45em; background: #fff; border: 1px solid #e4e3dd; }
.me-s-sol em { font: .8em ui-monospace, Consolas, monospace; font-style: normal; color: #4f5256; }
.me-s-sol b { font-weight: 500; line-height: 1.25; }
.me-s-sol.is-move { box-shadow: 0 0 0 .15em #6f5320; }
.me-s-prog { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4em; max-width: 30em; margin: 0 0 1em; color: #4f5256; }
.me-s-prog b { font: 300 2.6em/1 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; color: #151616; }
.me-s-prog .me-s-bar { flex-basis: 100%; height: .6em; }
.me-s-plan { list-style: none; margin: 0; padding: 0; max-width: 46em; border-top: 1px solid #d4d3cd; }
.me-s-plan li { display: grid; grid-template-columns: 2em 1fr; gap: .8em; padding: .6em .2em; border-bottom: 1px solid #d4d3cd; }
.me-s-plan li.is-now { background: #fff; }
.me-s-plan li b { font-weight: 500; }
.me-s-plan li em { display: block; font-style: normal; font-size: .85em; color: #4f5256; }
.me-s-plan li.is-done b { color: #4f5256; text-decoration: line-through; }
.me-s-box { display: grid; place-items: center; width: 1.7em; height: 1.7em; border: .12em solid #4f5256; border-radius: .35em; background: #fff; }
.me-s-box svg { width: 1.3em; height: 1.3em; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.me-s-plan li.is-done .me-s-box { background: #255235; border-color: #255235; }
.me-s-plan li.is-done .me-s-box svg { stroke-dashoffset: 0; }
.me-s-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2em; }
.me-s-prop { display: grid; gap: .6em; justify-items: start; padding: .9em; border: 1px solid #d4d3cd; border-radius: .6em; background: #fff; }
.me-s-prop b { font: 400 1.4em/1.15 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; letter-spacing: -.02em; }
.me-s-stamp { display: inline-flex; align-items: center; gap: .35em; padding: .3em .6em; border-radius: .3em; background: #e0ede3; color: #255235; font-weight: 600; }
.me-s-later { display: inline-flex; align-items: center; gap: .35em; color: #7a4108; font-weight: 600; }
/* Bocetos del portal reutilizados en miniatura */
.me-sk { position: relative; justify-self: stretch; height: 7.5em; border: 1px solid #4f5256; background: #fff; }
.me-sk--encuadre .me-sk-arcos { position: absolute; inset: 22% 8% 0; display: flex; gap: 6%; align-items: flex-end; }
.me-sk--encuadre .me-sk-arcos i { flex: 1; height: 88%; border: 1px solid #4f5256; border-bottom: 0; border-radius: 999px 999px 0 0; }
.me-sk-frame { position: absolute; left: 4%; right: 4%; height: 42%; padding: .1em .4em; border: 1.5px dashed; font: 600 .8em/1.3 ui-monospace, Consolas, monospace; }
.me-sk-frame--hoy { top: 4%; border-color: #4f5256; color: #4f5256; }
.me-sk-frame--nuevo { top: 30%; border-color: #6f5320; color: #6f5320; text-align: right; }
.me-sk--materiales { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em; padding: .3em; }
.me-sk--materiales span { display: flex; align-items: flex-end; padding: .2em .35em; background: var(--c); font: 600 .75em/1.2 ui-monospace, Consolas, monospace; }

/* ——— Comparador real (mantenimiento.html) ——— */
.me-cmp-sec { background: #fff; padding: 110px 0 96px; }
.me-head { text-align: center; }
.me-head h2 { font-size: clamp(34px, 4.3vw, 58px); max-width: 900px; margin: 0 auto; }
.me-head p:not(.eyebrow) { font-size: 19px; color: var(--muted); max-width: 700px; margin: 20px auto 0; }
.me-cmp-stage { width: min(1180px, calc(100% - 48px)); margin: 56px auto 0; }
.me-cmp-pairs { display: grid; gap: 56px; }
.me-cmp-pair { display: grid; gap: 28px 48px; align-items: start; }
.me-cmp-frame { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.me-cmp-a, .me-cmp-b { margin: 0; }
.me-cmp-a img, .me-cmp-b img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px #0000001a, 0 24px 44px -26px #1d2a3a66; }
.me-cmp-a figcaption, .me-cmp-b figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.me-cmp-tag, .me-cmp-handle, .me-js-only { display: none; }
.me-cmp-notes h3 { font-size: 22px; letter-spacing: -.02em; margin: 0 0 12px; }
.me-cmp-notes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.me-cmp-notes li { font-size: 17px; line-height: 1.5; color: var(--muted); }
.me-cmp-foot { margin-top: 56px; text-align: center; }
.me-cmp-foot .actions { justify-content: center; }
.me-cmp-foot .concept-label { margin-top: 18px; }
/* Con JavaScript: una hoja (v6) se desliza sobre la otra (v5). */
html.js .me-js-only { display: block; }
html.js .me-cmp-ctl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 28px; margin-bottom: 18px; }
html.js .me-cmp-ctl-l { margin: 0; font-size: 15px; font-weight: 600; }
html.js .me-cmp-segs { display: flex; flex-wrap: wrap; gap: 8px; }
.me-seg, .me-step { min-height: 44px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 99px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.me-seg[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.me-seg:hover, .me-step:hover { border-color: var(--ink); }
html.js .me-cmp-label { grid-column: 1 / 3; font-size: 15px; font-weight: 600; }
html.js .me-cmp-hint { grid-column: 1 / 3; margin: -10px 0 0; font-size: 14px; color: var(--muted); }
html.js .me-cmp-steps { grid-column: 3; grid-row: 1 / span 3; display: flex; gap: 8px; }
html.js .me-cmp-pair { grid-template-columns: minmax(0, 1fr) 300px; }
html.js .me-cmp-pair[hidden] { display: none; }
html.js .me-cmp-frame { display: block; aspect-ratio: 1440 / 900; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px #0000001a, 0 40px 70px -40px #1d2a3a88; touch-action: pan-y; }
html.js .me-cmp-frame:has(.me-cmp-range:focus-visible) { outline: 3px solid var(--blue, #0068d9); outline-offset: 4px; }
html.js .me-cmp-a, html.js .me-cmp-b { position: absolute; inset: 0; }
html.js .me-cmp-a img, html.js .me-cmp-b img { height: 100%; object-fit: cover; object-position: top; border-radius: 0; box-shadow: none; }
html.js .me-cmp-a figcaption, html.js .me-cmp-b figcaption { display: none; }
html.js .me-cmp-b { clip-path: inset(0 0 0 var(--pos, 50%)); }
html.js .me-cmp-tag { display: block; position: absolute; top: 14px; padding: 4px 10px; border-radius: 6px; background: #121314dd; color: #fff; font: 600 13px/1.4 ui-monospace, Consolas, monospace; pointer-events: none; }
html.js .me-cmp-tag--a { left: 14px; } html.js .me-cmp-tag--b { right: 14px; }
html.js .me-cmp-handle { display: block; position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 0; pointer-events: none; }
.me-cmp-handle::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 2px; background: #fff; box-shadow: 0 0 0 1px #15161655; }
.me-cmp-handle b { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fffffff0; border: 1.5px solid var(--ink); color: var(--ink); box-shadow: 0 10px 26px #15161640; }
html.js .me-cmp-frame:has(.me-cmp-range:focus-visible) .me-cmp-handle b { background: var(--ink); color: #fff; }
/* Extremos («Solo v5» / «Solo v6»): el asa se apoya dentro del marco y la etiqueta del lado que no se ve se retira. */
html.js .me-cmp-frame.is-v5-only .me-cmp-handle b { margin-left: -60px; }
html.js .me-cmp-frame.is-v6-only .me-cmp-handle b { margin-left: 8px; }
html.js .me-cmp-frame.is-v5-only .me-cmp-tag--b, html.js .me-cmp-frame.is-v6-only .me-cmp-tag--a { visibility: hidden; }
/* Al recibir el foco, el rango deja a la vista también su etiqueta, que está sobre el comparador (bajo la barra fija). */
html.js .me-cmp-range { scroll-margin-top: 150px; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.me-cmp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 100vh; }

/* ——— Recorrido ligado al scroll ——— */
.me-scene { background: #f5f5f7; padding: 110px 0 96px; }
.me-scene-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; width: min(1080px, calc(100% - 64px)); margin: 56px auto 0; }
.me-scene:not(.me-scene-live) .me-display--scene .me-screen { aspect-ratio: auto; background: none; overflow: visible; container-type: normal; }
.me-scene:not(.me-scene-live) .me-display--scene { container-type: normal; }
.me-scene:not(.me-scene-live) .me-display--scene .me-bezel { width: 100%; padding: 0; background: none; box-shadow: none; }
.me-scene:not(.me-scene-live) .me-display--scene .me-base { display: none; }
.me-scene:not(.me-scene-live) .me-scene-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.me-scene:not(.me-scene-live) .me-scene-screen { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #0000001a, 0 24px 44px -26px #1d2a3a66; }
.me-scene-screen .me-s { font-size: clamp(4px, 1.3cqi, 12.5px); }
.me-scene-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 8px 0 0; padding: 0; }
.me-scene-steps li { font-size: 15px; line-height: 1.45; color: var(--muted); }
.me-scene-steps b { color: var(--ink); font-weight: 600; }
.me-scene-bar { display: block; height: 2px; margin-bottom: 14px; background: var(--line); overflow: hidden; }
.me-scene-bar span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.me-scene:not(.me-scene-live) .me-scene-bar span { transform: none; }
.me-scene-foot { margin-top: 64px; text-align: center; }
.me-scene-foot .actions { justify-content: center; }
.me-scene-foot .concept-label { margin-top: 18px; }
.me-scene-live { height: 380vh; min-height: 2600px; padding: 0; }
.me-scene-live .me-scene-pin { position: sticky; top: var(--me-nav-h, 64px); height: calc(100svh - var(--me-nav-h, 64px)); display: flex; flex-direction: column; justify-content: center; padding: 20px 0 16px; overflow: hidden; }
.me-scene-live .me-scene-head p:not(.eyebrow), .me-scene-live .me-scene-foot { display: none; }
.me-scene-live .me-scene-head h2 { font-size: clamp(28px, 3.4vw, 46px); }
.me-scene-live .me-scene-stage { flex: 1; min-height: 0; grid-template-columns: minmax(0, 760px) minmax(0, 280px); justify-content: center; align-items: center; gap: 32px 56px; margin-top: 24px; }
.me-scene-live .me-display--scene { align-self: center; width: min(100%, calc((100svh - var(--me-nav-h, 64px) - 210px) * 1.45)); justify-self: center; }
.me-scene-live .me-scene-screens { position: absolute; inset: 0; }
.me-scene-live .me-scene-screen { position: absolute; inset: 0; visibility: hidden; container-type: inline-size; }
.me-scene-live .me-scene-screen.is-on { visibility: visible; }
.me-scene-live .me-scene-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; }
.me-scene-live .me-scene-steps li { transition: color .25s ease; }
.me-scene-live .me-scene-steps li.is-active { color: var(--ink); }

/* ——— Detalles ——— */
.me-notes { background: #fff; padding: 110px 0; }
.me-notes-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; }
.me-notes h2 { font-size: clamp(32px, 3.6vw, 50px); max-width: 540px; }
.me-notes-list { margin: 0; border-top: 1px solid var(--line); }
.me-notes-list div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.me-notes-list dt { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.me-notes-list dd { margin: 0; font-size: 17px; color: var(--muted); }

/* Estado oculto solo con JS + movimiento permitido (lo quita mantenimiento-espacios.js al revelar). */
.me-motion .me-pending .me-display { opacity: 0; }
.me-motion .me-pending.me-cmp-stage { opacity: 0; }

@media (max-width: 1099px) {
  html.js .me-cmp-pair { grid-template-columns: minmax(0, 1fr); }
  html.js .me-cmp-ctl { grid-template-columns: 1fr; }
  html.js .me-cmp-label, html.js .me-cmp-hint, html.js .me-cmp-steps { grid-column: 1; grid-row: auto; }
  html.js .me-cmp-hint { margin: 0; }
}
@media (max-width: 900px) {
  .me-scene-live .me-scene-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 16px; width: calc(100% - 48px); }
  .me-scene-live .me-display--scene { width: min(100%, 720px, calc((100svh - var(--me-nav-h, 64px) - 260px) * 1.45)); }
  .me-scene-live .me-scene-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .me-scene-live .me-scene-steps li { font-size: 13px; line-height: 1.3; }
  .me-scene-live .me-scene-steps li .me-step-text { display: none; }
  .me-notes-grid { grid-template-columns: minmax(0, 1fr); }
  .me-notes-list div { grid-template-columns: minmax(0, 1fr); }
  .me-scene-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .me-promo .me-display { width: 96%; }
  .me-hero .me-hero-art { width: calc(100% - 32px); margin-top: 36px; }
  .me-cmp-sec, .me-scene, .me-notes { padding: 80px 0 72px; }
  .me-cmp-stage { width: calc(100% - 32px); }
  .me-cmp-frame { grid-template-columns: minmax(0, 1fr); }
  html.js .me-cmp-steps { flex-wrap: wrap; }
  .me-cmp-tag-x { display: none; }
  .me-scene:not(.me-scene-live) .me-scene-screens { grid-template-columns: minmax(0, 1fr); }
  .me-scene-stage { width: calc(100% - 32px); }
  .me-scene-steps { grid-template-columns: minmax(0, 1fr); }
  .me-s { grid-template-columns: minmax(0, 1fr); }
  .me-s-side { display: none; }
  .me-s-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .me-s-fact:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .me-scene-live .me-scene-steps li { transition: none; } }

/* v13 (fluidez): pseudo-elementos que sustituyen animaciones que el navegador no compone o que no conviene animar.
   - Velo de la pantalla: su opacidad (0,75 → 0) equivale exactamente a filter: brightness(.25 → 1) sobre la pantalla.
   - Sombra de la solicitud que cambia de columna en el recorrido: quieta, solo se desvanece su opacidad (antes se
     animaba box-shadow, que repinta en cada cuadro). */
.me-screen::after { content: ""; position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none;}
.me-s-sol.is-move { position: relative;}
.me-s-sol.is-move::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 1.2em 2em -.6em #15161666; opacity: 0; pointer-events: none;}