/* Alphyx v10 — presentación del ejemplo «Alfar · Automatizaciones» (consola conceptual de la tienda ficticia Alfar) en
 * el bloque Automatizaciones e integraciones de la portada y en automatizaciones.html. Se añade a styles.css/motion.css
 * sin modificarlos. Prefijo aa-. Las pantallas en miniatura usan la paleta de la consola (caolín, horno, verde cobre =
 * correcto, ocre = revisión, óxido = error; siempre con texto) dentro de una pantalla de escritorio dibujada; lo que las
 * rodea mantiene la identidad Alphyx. Movimiento en automatizaciones-alfar.js. */

.aa-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-size: 15px; color: var(--light-blue, #6cb0ff); }
.aa-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.night .aa-link:focus-visible { outline-color: var(--light-blue, #6cb0ff); }
.aa-credits { font-size: 12px; line-height: 1.5; color: var(--muted, #595f69); text-align: center; margin: 8px 20px 0; }
.aa-credits a { color: var(--blue, #0068d9); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.night .aa-credits { color: #b9bec8; }
.night .aa-credits a { color: var(--light-blue, #6cb0ff); }

/* ——— Pantalla de escritorio dibujada ——— */
.aa-display { position: relative; container-type: inline-size; width: 100%; margin: 0 auto; text-align: left; }
.aa-bezel { position: relative; padding: 1.4%; border-radius: 1.8cqi; background: linear-gradient(#2c2926, #151311); box-shadow: inset 0 0 0 1px #4a4540, 0 44px 70px -42px #000c; }
.aa-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0.7cqi; background: #eeede9; }
.aa-stand { position: relative; display: flex; justify-content: center; height: 6.5cqi; }
.aa-stand::before { content: ""; width: 16%; height: 100%; background: linear-gradient(90deg, #aaa49b, #d2cdc4 45%, #a39d94); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.aa-stand i { position: absolute; bottom: -0.9cqi; left: 50%; width: 30%; height: 1.1cqi; transform: translateX(-50%); border-radius: 0.4cqi; background: linear-gradient(#d9d4cb, #a9a39a); box-shadow: 0 10px 18px -10px #000a; }
.aa-promo .aa-promo-art { padding: 14px 0 34px; }
.aa-promo .aa-display { width: min(86%, 620px); }
.aa-hero .aa-hero-art { width: min(1000px, calc(100% - 48px)); margin: 48px auto 0; }
.aa-hero .concept-label { margin-top: 36px; }

/* ——— Pantallas en miniatura (no interactivas) ——— */
.aa-s { position: absolute; inset: 0; display: flex; overflow: hidden; background: #eeede9; color: #1d1c1a; font: clamp(4px, 1.22cqi, 12.5px)/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; }
.aa-s-ico { width: 1.15em; height: 1.15em; flex: none; }
.aa-s-side { width: 16%; flex: none; display: flex; flex-direction: column; gap: 0.3em; padding: 1.1em 0.7em; background: #22201d; color: #f1eee8; }
.aa-s-brand { display: flex; align-items: center; gap: 0.45em; margin-bottom: 0.8em; }
.aa-s-brand b { display: block; font-size: 1.3em; letter-spacing: -.03em; }
.aa-s-brand small { display: block; font-size: 0.68em; color: #c2bdb3; }
.aa-s-seal { width: 1.9em; height: 1.9em; flex: none; color: #9fc4b4; }
.aa-s-nav { display: flex; justify-content: space-between; gap: 0.3em; padding: 0.4em 0.5em; border-radius: 0.4em; font-size: 0.82em; white-space: nowrap; overflow: hidden; }
.aa-s-nav.on { background: #ffffff26; box-shadow: inset 0.2em 0 0 #9fc4b4; font-weight: 600; }
.aa-s-nav em { font-style: normal; padding: 0 0.45em; border-radius: 1em; background: #e8c98a; color: #3b2600; font-weight: 700; }
.aa-s-foot { margin-top: auto; font-size: 0.72em; color: #c2bdb3; }
.aa-s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.8em; padding: 1.1em 1.3em; }
.aa-s-title { display: flex; align-items: baseline; gap: 0.8em; min-width: 0; }
.aa-s-title b { font-size: 1.5em; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-s-title small { color: #57534d; font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-s-title .aa-s-sw { margin-left: auto; align-self: center; }
.aa-s-card { display: grid; align-content: start; gap: 0.3em; min-width: 0; padding: 0.7em 0.8em; border-radius: 0.7em; background: #fff; box-shadow: 0 0 0 0.06em #d3d0c8; }
.aa-s-card > b { display: flex; align-items: center; gap: 0.3em; font-size: 0.9em; }
.aa-s-card small { color: #57534d; }
.aa-s-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; }
.aa-s-big { margin: 0.1em 0 0.2em; font: 600 2em/1 ui-monospace, Consolas, monospace; }
.aa-s-big small { margin-left: 0.4em; font: 400 0.4em system-ui, sans-serif; }
.aa-s-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; padding: 0.22em 0; border-top: 0.06em solid #e2dfd9; font-size: 0.76em; white-space: nowrap; }
.aa-s-row > span:first-child { display: flex; align-items: center; gap: 0.3em; overflow: hidden; text-overflow: ellipsis; }
.aa-s-row em { font: 600 1em ui-monospace, Consolas, monospace; font-style: normal; }
.aa-s-st { display: inline-flex; align-items: center; gap: 0.25em; padding: 0.05em 0.45em; border-radius: 0.35em; font-size: 0.86em; font-weight: 600; color: var(--c); background: var(--b); white-space: nowrap; }
.aa-s-st--ok { --c: #1f5a4c; --b: #e3eee9; }
.aa-s-st--rev { --c: #6b4300; --b: #f8eed8; }
.aa-s-st--err { --c: #9b2d17; --b: #f8e5df; }
.aa-s-st--skip { --c: #4d4943; --b: #e7e4de; }
.aa-s-shelf { display: flex; flex-wrap: wrap; gap: 0.25em; padding-bottom: 0.35em; margin-bottom: 0.2em; border-bottom: 0.2em solid #d9d5cc; }
.aa-s-tile { width: 1em; height: 1.25em; border-radius: 0.2em 0.2em 0.1em 0.1em; background: linear-gradient(var(--g) 0 70%, #d4c9b6 70% 100%); }
.aa-s-tile--ok { --g: #6f9383; } .aa-s-tile--rev { --g: #c9a45c; } .aa-s-tile--err { --g: #c0714a; } .aa-s-tile--skip { --g: #c1b59c; }
.aa-s-pend { display: grid; padding: 0.3em 0.45em; border-left: 0.2em solid #9b2d17; background: #faf6f4; }
.aa-s-pend b { font-size: 0.8em; }
.aa-s-pend small { font-size: 0.68em; }
.aa-s-stock { flex: 1; min-height: 0; }
.aa-s-srow { display: grid; grid-template-columns: 2em minmax(0, 1fr) 2em 28%; align-items: center; gap: 0.6em; padding: 0.18em 0; border-top: 0.06em solid #e2dfd9; font-size: 0.78em; }
.aa-s-srow em { font: 600 1em ui-monospace, Consolas, monospace; font-style: normal; text-align: right; }
.aa-s-thumb { display: block; width: 2em; height: 2em; border-radius: 0.35em; overflow: hidden; background: #d9d5cc; }
.aa-s-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aa-s-bar { position: relative; display: block; height: 0.35em; border-radius: 0.2em; background: #e6e3dd; }
.aa-s-bar > i { position: absolute; inset: 0; border-radius: 0.2em; background: #6f6a62; transform-origin: 0 50%; transform: scaleX(var(--p)); }
.aa-s-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.9em; padding: 0.8em 1em; border-radius: 0.7em; background: #fff; border-left: 0.3em solid #1f5a4c; box-shadow: 0 0 0 0.06em #d3d0c8; }
.aa-s-flow span b { display: block; font-size: 0.95em; }
.aa-s-flow span small { display: block; font-size: 0.72em; color: #57534d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-s-flow--hl { box-shadow: 0 0 0 0.15em #1d1c1a; }
.aa-s-sw { position: relative; display: inline-block; width: 2.6em; height: 1.5em; border-radius: 1em; background: #8f8a81; }
.aa-s-sw > i { position: absolute; left: 0.2em; top: 0.2em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; }
.aa-s-sw.on { background: #1f5a4c; }
.aa-s-sw.on > i { transform: translateX(1.1em); }
.aa-s-btn { padding: 0.45em 0.8em; border-radius: 0.5em; background: #fff; box-shadow: inset 0 0 0 0.08em #8f8a81; font-size: 0.74em; font-weight: 600; white-space: nowrap; }
.aa-s-ed { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.45fr 1fr; gap: 0.8em; }
.aa-s-dg { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0.8em; border-radius: 0.7em; background: radial-gradient(circle at 1px 1px, #00000012 1px, transparent 1.4px) 0 0 / 1.1em 1.1em, #f7f6f3; box-shadow: 0 0 0 0.06em #d3d0c8; }
.aa-s-dgrow { display: grid; grid-template-columns: 56% 2.4em minmax(0, 1fr); align-items: center; }
.aa-s-node { position: relative; grid-column: 1; display: grid; gap: 0.08em; min-width: 0; padding: 0.38em 0.6em 0.42em 0.85em; border-radius: 0.45em; background: #fff; box-shadow: 0 0 0 0.09em #8f8a81; }
.aa-s-node b { font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-s-k { font: 600 0.54em/1.3 ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: #57534d; }
.aa-s-i { font-size: 0.64em; color: #57534d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-s-r { display: flex; align-items: center; gap: 0.3em; font-size: 0.66em; font-weight: 600; white-space: nowrap; overflow: hidden; }
.aa-s-node--trigger::before, .aa-s-node--rev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.3em; border-radius: 0.45em 0 0 0.45em; background: #1d1c1a; }
.aa-s-node--rev::before { background: #9a6a12; }
.aa-s-node--handoff { box-shadow: none; outline: 0.09em dashed #8f8a81; }
.aa-s-node--b { grid-column: 3; opacity: .82; }
.aa-s-node.is-sel { box-shadow: 0 0 0 0.16em #1d1c1a; }
.aa-s-node.is-ok { box-shadow: 0 0 0 0.12em #1f5a4c; background: #f1f6f3; }
.aa-s-node.is-ok .aa-s-r { color: #1f5a4c; }
.aa-s-node.is-dec { box-shadow: 0 0 0 0.12em #1d1c1a; background: #f7f6f3; }
.aa-s-bw { position: relative; grid-column: 2; height: 0.12em; background: #8f8a81; }
.aa-s-bw em { position: absolute; left: 50%; top: -1.35em; transform: translateX(-50%); padding: 0 0.3em; border-radius: 0.2em; background: #eeede9; font: 600 0.54em/1.5 ui-monospace, Consolas, monospace; font-style: normal; white-space: nowrap; }
.aa-s-w { position: relative; display: block; width: 56%; height: 1.05em; flex: none; }
.aa-s-w::before, .aa-s-w > i { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 0.12em; margin-left: -0.06em; background: #8f8a81; }
.aa-s-w > i { background: #1d1c1a; transform-origin: 50% 0; transform: scaleY(0); }
.aa-s-w.is-on > i { transform: none; }
.aa-s-w em { position: absolute; left: calc(50% + 0.5em); top: 50%; transform: translateY(-50%); padding: 0 0.3em; border-radius: 0.2em; background: #eeede9; font: 600 0.54em/1.5 ui-monospace, Consolas, monospace; font-style: normal; }
.aa-s-w.is-on em { background: #1d1c1a; color: #fff; }
.aa-s-panel small { font: 600 0.62em ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.aa-s-panel > b { font-size: 1.02em; }
.aa-s-dl { display: grid; gap: 0.08em; padding: 0.3em 0; border-top: 0.06em solid #e2dfd9; font-size: 0.7em; }
.aa-s-dl i { font-style: normal; font-size: 0.85em; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: #57534d; }
.aa-s-steps { display: flex; align-items: center; gap: 0.25em; margin-left: auto; align-self: center; }
.aa-s-steps i { width: 0.45em; height: 0.45em; border-radius: 0.3em; background: #d6d2ca; }
.aa-s-steps i.past { background: #6f6a62; }
.aa-s-steps i.on { width: 1.8em; background: #1d1c1a; }
.aa-s-run { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 0.8em; }
.aa-s-dg--run .aa-s-dgrow { grid-template-columns: 80% 1fr; }
.aa-s-dg--run .aa-s-w { width: 80%; }
.aa-s-token { position: absolute; left: 0; top: 0; z-index: 2; width: 2.3em; height: 2.3em; margin: -1.15em 0 0 -1.15em; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 0.15em #fff, 0 0 0 0.3em #1d1c1a; opacity: 0; pointer-events: none; }
.aa-s-token .aa-s-thumb { width: 100%; height: 100%; border-radius: 0; }
.aa-s-stamp { position: absolute; right: 0.5em; bottom: 0.6em; display: flex; align-items: center; gap: 0.3em; color: #1f5a4c; transform: rotate(-8deg); }
.aa-s-stamp .aa-s-seal { width: 2.5em; height: 2.5em; color: currentColor; }
.aa-s-stamp b { padding: 0.1em 0.4em; border: 0.15em solid currentColor; border-radius: 0.3em; background: #fff; font-size: 0.66em; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.aa-s-log { display: grid; align-content: start; gap: 0.6em; min-width: 0; }
.aa-s-li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: 0.4em; align-items: start; padding: 0.25em 0; border-top: 0.06em solid #e2dfd9; font-size: 0.74em; }
.aa-s-li > em { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #e3eee9; color: #1f5a4c; font: 700 0.85em ui-monospace, Consolas, monospace; font-style: normal; }
.aa-s-li span b, .aa-s-li span small, .aa-s-fx span small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-s-fx { display: flex; align-items: center; gap: 0.5em; padding: 0.25em 0; border-top: 0.06em solid #e2dfd9; font-size: 0.74em; min-width: 0; }
.aa-s-fx > span { min-width: 0; }
.aa-s-hist { display: grid; overflow: hidden; border-radius: 0.7em; background: #fff; box-shadow: 0 0 0 0.06em #d3d0c8; }
.aa-s-hrow { display: grid; grid-template-columns: 2.4em 3em minmax(0, 1.1fr) minmax(0, 1.5fr) auto; align-items: center; gap: 0.6em; padding: 0.45em 0.8em; border-left: 0.25em solid transparent; font-size: 0.76em; white-space: nowrap; }
.aa-s-hrow + .aa-s-hrow { border-top: 0.06em solid #e2dfd9; }
.aa-s-hrow > em { font: 600 1em ui-monospace, Consolas, monospace; font-style: normal; }
.aa-s-hrow > span, .aa-s-hrow > small { overflow: hidden; text-overflow: ellipsis; }
.aa-s-hrow > small { color: #57534d; }
.aa-s-hrow--rev { border-left-color: #9a6a12; }
.aa-s-hrow--err { border-left-color: #9b2d17; }
.aa-s-hrow--hl { background: #fbf4e6; }
.aa-s-fix { border-left: 0.3em solid #9a6a12; }
.aa-s-fix small { font-size: 0.72em; }
.aa-s-opts, .aa-s-acts { display: flex; flex-wrap: wrap; gap: 0.4em; }
.aa-s-opts i, .aa-s-acts i { padding: 0.35em 0.7em; border-radius: 0.45em; background: #fff; box-shadow: inset 0 0 0 0.08em #8f8a81; font-size: 0.72em; font-style: normal; }
.aa-s-opts i.on { box-shadow: inset 0 0 0 0.15em #1d1c1a; }
.aa-s-acts i.pri { background: #1d1c1a; color: #fff; box-shadow: none; }

/* ——— Recorrido «La tienda, conectada» (#ejemplo) ——— */
.aa-scene { background: #fff; padding: 110px 0 96px; }
.aa-scene-head { text-align: center; }
.aa-scene-head h2 { font-size: clamp(34px, 4.3vw, 58px); max-width: 900px; margin: 0 auto; }
.aa-scene-head p:not(.eyebrow) { font-size: 19px; color: var(--muted); max-width: 680px; margin: 20px auto 0; }
.aa-scene-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; width: min(1080px, calc(100% - 64px)); margin: 56px auto 0; }
.aa-scene:not(.aa-scene-live) .aa-display--scene .aa-screen { aspect-ratio: auto; background: none; overflow: visible; }
.aa-scene:not(.aa-scene-live) .aa-display--scene { container-type: normal; }
.aa-scene:not(.aa-scene-live) .aa-display--scene .aa-bezel { padding: 0; background: none; box-shadow: none; }
.aa-scene:not(.aa-scene-live) .aa-display--scene .aa-stand { display: none; }
.aa-scene:not(.aa-scene-live) .aa-scene-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.aa-scene:not(.aa-scene-live) .aa-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; }
.aa-scene-screen .aa-s { font-size: clamp(4px, 1.3cqi, 12.5px); }
.aa-scene-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 8px 0 0; padding: 0; }
.aa-scene-steps li { font-size: 15px; line-height: 1.45; color: var(--muted); }
.aa-scene-steps b { color: var(--ink); font-weight: 600; }
.aa-scene-bar { display: block; height: 2px; margin-bottom: 14px; background: var(--line); overflow: hidden; }
.aa-scene-bar span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.aa-scene:not(.aa-scene-live) .aa-scene-bar span { transform: none; }
.aa-scene-foot { margin-top: 64px; text-align: center; }
.aa-scene-foot .actions { justify-content: center; }
.aa-scene-foot .concept-label { margin-top: 18px; }
.aa-scene-live { height: 380vh; min-height: 2600px; padding: 0; }
.aa-scene-live .aa-scene-pin { position: sticky; top: var(--aa-nav-h, 64px); height: calc(100svh - var(--aa-nav-h, 64px)); display: flex; flex-direction: column; justify-content: center; padding: 20px 0 16px; overflow: hidden; }
.aa-scene-live .aa-scene-head p:not(.eyebrow), .aa-scene-live .aa-scene-foot { display: none; }
.aa-scene-live .aa-scene-head h2 { font-size: clamp(28px, 3.4vw, 46px); }
.aa-scene-live .aa-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; }
.aa-scene-live .aa-display--scene { align-self: center; width: min(100%, calc((100svh - var(--aa-nav-h, 64px) - 210px) * 1.5)); justify-self: center; }
.aa-scene-live .aa-scene-screens { position: absolute; inset: 0; }
.aa-scene-live .aa-scene-screen { position: absolute; inset: 0; visibility: hidden; container-type: inline-size; }
.aa-scene-live .aa-scene-screen.is-on { visibility: visible; }
.aa-scene-live .aa-scene-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; }
.aa-scene-live .aa-scene-steps li { transition: color .25s ease; }
.aa-scene-live .aa-scene-steps li.is-active { color: var(--ink); }
.aa-scene-live .aa-display--scene .aa-screen { aspect-ratio: 16 / 10; }

/* ——— La tienda conectada ——— */
.aa-shop { background: var(--soft); padding: 100px 0; }
.aa-shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.aa-shop-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; background: #d9d5cc; }
.aa-fill, .aa-fill img { position: absolute; inset: 0; width: 100%; height: 100%; }
.aa-fill img { object-fit: cover; }
.aa-shop-photo .aa-credits { text-align: left; margin: 10px 0 0; }
.aa-shop-copy h2 { font-size: clamp(30px, 3.4vw, 46px); max-width: 540px; }
.aa-shop-copy p:not(.eyebrow) { margin-top: 18px; font-size: 18px; color: var(--muted); }
.aa-link--light { color: var(--blue, #0068d9); font-weight: 500; }
.aa-shop-copy p:has(> .aa-link) { margin-top: 10px; }
.aa-shop-copy .aa-shop-note { font-size: 14px; }

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

/* Estado oculto solo con JS y movimiento permitido (lo quita automatizaciones-alfar.js). */
.aa-motion .aa-pending .aa-display { opacity: 0; }

@media (max-width: 1100px) {
  .aa-scene-live .aa-scene-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 16px; width: calc(100% - 48px); }
  .aa-scene-live .aa-display--scene { width: min(100%, 720px, calc((100svh - var(--aa-nav-h, 64px) - 260px) * 1.5)); }
  .aa-scene-live .aa-scene-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .aa-scene-live .aa-scene-steps li { font-size: 13px; line-height: 1.3; }
  .aa-scene-live .aa-scene-steps li .aa-step-text { display: none; }
  .aa-notes-grid, .aa-shop-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .aa-promo .aa-display { width: 90%; }
  .aa-hero .aa-hero-art { width: calc(100% - 32px); margin-top: 36px; }
  .aa-scene { padding: 72px 0 64px; }
  .aa-scene-stage { width: calc(100% - 40px); gap: 16px; }
  .aa-scene:not(.aa-scene-live) .aa-scene-screens { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .aa-scene-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aa-scene-steps li { font-size: 14px; }
  .aa-scene-bar { margin-bottom: 8px; }
  .aa-scene-live .aa-scene-pin { padding: 12px 0 10px; }
  .aa-scene-live .aa-scene-head .eyebrow { display: none; }
  .aa-scene-live .aa-scene-head h2 { font-size: 24px; padding: 0 16px; }
  .aa-scene-live .aa-scene-stage { width: calc(100% - 32px); margin-top: 12px; }
  .aa-scene-live .aa-scene-steps li { font-size: 12px; }
  .aa-shop, .aa-notes { padding: 72px 0; }
  .aa-notes-list div { grid-template-columns: minmax(0, 1fr); }
  .aa-s-side { width: 0; padding: 0; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .aa-scene-steps li { transition: none !important; }
}

/* v13 (fluidez): pseudo-elementos que sustituyen animaciones que el navegador no compone o que no conviene animar.
   - Velo de la pantalla: su opacidad (0,8 → 0) equivale exactamente a filter: brightness(.2 → 1) sobre la pantalla.
   - Estado de partida de cada nodo al encenderse (fondo blanco y anillo gris): vive en un pseudo-elemento bajo el texto
     del nodo y solo se desvanece su opacidad sobre el fondo y el anillo finales (antes se animaban background-color y
     box-shadow, que en la página no se componían y repintaban en cada cuadro). isolation deja el pseudo-elemento
     (z-index -1) por encima del fondo propio del nodo y por debajo de su contenido. */
.aa-screen::after { content: ""; position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none;}
.aa-s-node { isolation: isolate;}
.aa-s-node::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; box-shadow: 0 0 0 0.09em #8f8a81; opacity: 0; pointer-events: none;}