:root{ /* respaldo: tokens.css (tema del usuario) los pone según el modo */
  --fondo:#000; --sup:#0F141B; --linea:rgba(255,255,255,.10); --texto:#EEF1F5; --gris:#9AA3B0; --gris2:#6B7480;
  --menta:#89FF9E; --menta-osc:rgba(137,255,158,.14);
  --f:"Avenir Next","Archivo",system-ui,sans-serif; --num:"Barlow Condensed","Archivo",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--f);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--menta);font-weight:600;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.cab{position:sticky;top:0;z-index:10;background:rgba(var(--vidrio-rgb,0,0,0),.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.cab .in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.cab img{height:28px;width:auto}
.cab .paso-de{margin-left:auto;font-family:var(--num);font-weight:700;font-size:18px;color:var(--gris);white-space:nowrap}
.cab .paso-de b{color:var(--menta)}
.barra{height:3px;background:rgba(var(--tinta-rgb,255,255,255),.06)}
.barra i{display:block;height:100%;width:0;background:var(--menta);transition:width .25s ease}
.portada{min-height:calc(88svh - 52px);display:flex;flex-direction:column;justify-content:center;max-width:1100px;margin:0 auto;padding:28px 16px 40px}
.ante{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--menta);margin:0 0 10px}
h1{font-size:clamp(34px,8.5vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0 0 14px;max-width:900px}
h1 i,h2 i{font-style:normal;color:var(--menta)}
.portada p.sub{color:var(--gris);font-size:18px;max-width:600px;margin:0 0 22px}
.datos{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.datos span{border:1px solid var(--linea);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--gris)}
.datos b{color:var(--texto)}
.portada .foto{max-width:320px;margin:10px 0 0;filter:drop-shadow(0 20px 30px rgba(0,0,0,.8))}
.baja{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--gris);font-weight:600}
.baja svg{width:22px;height:22px;stroke:var(--menta);animation:rebota 1.6s ease-in-out infinite}
@keyframes rebota{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.paso{scroll-margin-top:52px;min-height:80svh;display:flex;align-items:center;max-width:1100px;margin:0 auto;padding:48px 16px;border-top:1px solid var(--linea)}
.paso .rej{display:grid;gap:22px;width:100%}
.paso .num{font-family:var(--num);font-weight:700;font-size:clamp(110px,34vw,200px);line-height:.78;letter-spacing:-.03em;color:var(--menta);margin:0}
.paso h2{font-size:clamp(26px,6.4vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:12px 0 8px}
.paso p{color:var(--texto2,#C9CFD8);font-size:18px;margin:0;max-width:540px}
.paso p b{color:var(--texto)}
.ruta{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.ruta span{background:var(--menta-osc);color:var(--menta);border-radius:8px;padding:4px 9px;font-weight:600;font-size:15px}
.ruta em{font-style:normal;color:var(--gris2)}
.ojo{margin-top:14px!important;font-size:15px!important;color:var(--gris)!important;border-left:2px solid var(--menta);padding-left:10px}
.fuente,.paso p.fuente{font-size:12px;color:var(--gris2);margin-top:10px}
.fuente a{color:var(--gris);font-weight:400;text-decoration:underline;text-underline-offset:2px}
.icono{position:relative;aspect-ratio:4/3;border-radius:20px;border:1px solid var(--linea);background:radial-gradient(ellipse 70% 70% at 50% 40%,rgba(var(--menta-rgb,137,255,158),.13),transparent 70%),var(--sup,#07090C);display:flex;align-items:center;justify-content:center;overflow:hidden}
.icono svg{width:46%;height:auto;stroke:var(--menta);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icono .mano{position:absolute;right:20%;bottom:16%;width:22%;stroke:#111;fill:#fff;stroke-width:1.3;animation:dedo 1.6s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
@keyframes dedo{0%,100%{transform:translate(6px,8px)}35%{transform:translate(0,0)}}
.js .paso .rej>*{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.js .paso .rej>*:nth-child(2){transition-delay:.12s}
.js .paso.ve .rej>*{opacity:1;transform:none}
.final{max-width:1100px;margin:0 auto;padding:56px 16px 40px;border-top:1px solid var(--linea)}
.final h2{font-size:clamp(32px,8vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0 0 12px}
.final p{color:var(--texto2,#C9CFD8);font-size:18px;margin:0 0 20px;max-width:640px}
.marco{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--linea);background:#111;max-width:820px;margin:0 0 8px}
.marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:420px;background:var(--menta);color:var(--sobre-menta,#04110A);font-weight:800;font-size:17px;border-radius:12px;padding:15px 18px;margin:0 0 10px}
.btn.sec{background:transparent;color:var(--texto);border:1px solid var(--linea)}
.acciones{margin-top:26px}
.fuentes{max-width:1100px;margin:0 auto;padding:10px 16px 60px;color:var(--gris);font-size:14px}
.fuentes h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris2);margin:24px 0 8px}
.fuentes ol{padding-left:20px;margin:0}
.fuentes li{margin:6px 0;word-break:break-word}
.fuentes a{color:var(--gris);font-weight:400;text-decoration:underline;text-underline-offset:2px}
.fuentes p{margin:12px 0 0;color:var(--gris2)}
/* fuentes detrás de un toque (docs/estilo-textos.md: lo que no hace falta leer a la primera va en «Ver más») */
.fuentes summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px}.fuentes summary::-webkit-details-marker{display:none}
.fuentes summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:14px;transition:transform .2s}.fuentes details[open] summary::after{transform:rotate(-135deg);margin-top:20px}
@media (min-width:860px){
  .paso .rej{grid-template-columns:1fr 1fr;gap:48px;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .paso .rej>*{opacity:1;transform:none;transition:none}
  .icono .mano,.baja svg{animation:none}
}
/* imágenes reales de los pasos (mismo trato que la guía del ArtiDiag800 BT 2) */
.lienzo{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--linea);background:#fff}
.lienzo img{display:block;width:100%;height:auto}
.lienzo.foto-r{background:#0b0d10}
.lienzo.dibujo{padding:18px;display:flex;justify-content:center}
.lienzo.dibujo img{max-height:300px;width:auto}
.lienzo.pantalla{border:8px solid #1b1f26;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
figcaption.fuente{margin-top:8px}
.esc-capa figure .lienzo{width:fit-content;max-width:100%;margin:0 auto}
.esc-capa figure figcaption{text-align:center}
/* toque: mano y aro que señalan el botón que casi nadie ve (marca.js · img.toque, en % de la imagen) */
.tq-caja{position:relative;width:fit-content;max-width:100%;margin:0 auto}
.tq-aro{position:absolute;box-sizing:border-box;border:3px solid var(--menta,#89FF9E);border-radius:12px;box-shadow:0 0 0 0 rgba(var(--menta-rgb,137,255,158),.55);animation:tqPulso 1.6s ease-out infinite;pointer-events:none}
.tq-mano{position:absolute;width:44px;height:44px;margin:-44px 0 0 -22px;color:#fff;transform:rotate(180deg) scaleX(-1);transform-origin:50% 50%;filter:drop-shadow(0 4px 10px rgba(0,0,0,.75));animation:tqMano 1.6s ease-in-out infinite;pointer-events:none}
.tq-mano svg{width:100%;height:100%;fill:var(--menta,#89FF9E);fill-opacity:.25;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tq-nota{margin:8px 0 0;text-align:center;font-weight:700;color:var(--menta,#89FF9E)!important;font-size:15px!important}
@keyframes tqPulso{0%{box-shadow:0 0 0 0 rgba(var(--menta-rgb,137,255,158),.55)}100%{box-shadow:0 0 0 14px rgba(var(--menta-rgb,137,255,158),0)}}
@keyframes tqMano{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (prefers-reduced-motion:reduce){.tq-aro,.tq-mano{animation:none}}
.esc-capa figure .tq-caja .lienzo{margin:0}
/* el paso con toque lleva una línea más: la imagen cede un poco para que nada toque «Desliza» */
.diseno-b .esc-capa .tq-caja img{max-height:25vh!important}
.tq-nota{margin-top:6px!important;font-size:14px!important;line-height:1.3}
@media (max-height:760px){.diseno-b .esc-capa .tq-caja img{max-height:21vh!important}}