/* Nexia · Centro de ayuda · guías paso a paso (mismo estilo que nexiaapp.app) */
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--ink:#1C1733;--ink2:#57526E;--paper:#F3F4F9;--card:#fff;--acc:#6D28D9;--acc2:#B79CFF;--acc-soft:#EFE9FD;--ok:#0F7A4A;--ok-soft:#E3F3EA;--warn:#8A5200;--warn-soft:#FCF1DC;--line:#E4E6EE;--night:#120E24}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Atkinson",system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:18px;line-height:1.6}
a{color:var(--acc)}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}
header.top{background:var(--ink);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.logo{font-family:"Bricolage",system-ui,sans-serif;font-weight:800;font-size:22px;color:#fff;text-decoration:none;letter-spacing:-.02em}
.logo span{color:var(--acc2)}
.top-r{color:#D6D1EA;font-size:15px;text-decoration:none}
main{max-width:980px;margin:0 auto;padding:28px 18px 64px}
.miga{font-size:15px;color:var(--ink2);margin-bottom:10px}
.miga a{color:var(--ink2)}
h1{font-family:"Bricolage",system-ui,sans-serif;font-size:clamp(30px,6vw,44px);line-height:1.05;letter-spacing:-.025em;margin-bottom:10px}
.intro{color:var(--ink2);max-width:62ch;margin-bottom:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{background:var(--acc-soft);color:var(--acc);font-weight:700;font-size:14px;padding:4px 12px;border-radius:99px}
.aviso{background:var(--warn-soft);color:var(--ink);border-radius:16px;padding:14px 16px;margin:0 0 22px;font-size:16px}
.aviso b{color:var(--warn)}
/* selector móvil / ordenador */
.disp{display:inline-flex;background:#fff;border-radius:14px;padding:5px;box-shadow:0 0 0 1px var(--line);margin-bottom:22px}
.disp button{font:inherit;font-size:16px;font-weight:700;border:0;background:none;color:var(--ink2);padding:10px 18px;border-radius:10px;cursor:pointer;min-height:44px}
.disp button[aria-pressed=true]{background:var(--ink);color:#fff}
/* guía */
.guia{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:820px){.guia{grid-template-columns:1fr}}
.escena{position:relative;display:flex;justify-content:center}
.marco{position:relative;width:100%}
.marco.movil{max-width:min(300px,64vw);border-radius:38px;background:var(--night);padding:12px;box-shadow:0 20px 50px -20px rgba(28,23,51,.45)}
.marco.movil .pantalla{border-radius:28px;aspect-ratio:390/844}
.marco.pc{background:var(--night);border-radius:16px 16px 6px 6px;padding:10px 10px 14px;box-shadow:0 20px 50px -20px rgba(28,23,51,.45)}
.marco.pc .pantalla{border-radius:6px;aspect-ratio:1280/800}
.marco.pc::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-12px;height:12px;background:#2A2442;border-radius:0 0 14px 14px}
.pantalla{position:relative;overflow:hidden;background:#fff}
.lienzo{position:absolute;inset:0;transition:transform 1s cubic-bezier(.3,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.lienzo{transition:none}}
.pantalla img{display:block;width:100%;height:100%;object-fit:cover}
/* aro que marca dónde pulsar */
.aro{position:absolute;border:3px solid var(--acc);border-radius:12px;box-shadow:0 0 0 9999px rgba(18,14,36,.28);opacity:0;transition:opacity .35s}
.aro.on{opacity:1}
.aro.on::after{content:"";position:absolute;inset:-8px;border:3px solid var(--acc2);border-radius:16px;animation:latido 1.6s ease-out infinite}
@keyframes latido{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
/* puntero (dedo en el móvil, flecha en el ordenador) */
.puntero{position:absolute;width:44px;height:44px;left:110%;top:110%;transform:translate(-22%,-8%);transition:left .9s cubic-bezier(.3,.7,.2,1),top .9s cubic-bezier(.3,.7,.2,1);pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));z-index:3}
.puntero.pulsa{animation:pulsa .5s ease-in-out 1}
@keyframes pulsa{50%{transform:translate(-22%,-8%) scale(.82)}}
.onda{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(109,40,217,.45);transform:scale(0);pointer-events:none;z-index:2}
.onda.va{animation:onda .7s ease-out 1}
@keyframes onda{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}
/* dibujos (pasos que ocurren fuera de Nexia) */
.dibujo{position:absolute;inset:0;background:linear-gradient(180deg,#F7F7FB,#ECECF4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;font-size:14px;color:var(--ink)}
.marco.movil .dibujo{font-size:13px}
.marco.pc .dibujo{justify-content:flex-start;padding-top:50px;gap:6px;font-size:13px}
.marco.pc .d-fila{padding:6px 12px}
.marco.pc .d-flecha{font-size:16px;line-height:1}
.marco.pc .d-dialogo{padding:12px}
.marco.pc .d-dialogo p{margin-bottom:8px}
.d-barra{position:absolute;top:0;left:0;right:0;height:40px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.d-lista{width:100%;max-width:340px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.d-fila{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.d-fila:first-child{border-top:0}
.d-fila.sel{background:var(--acc-soft);font-weight:700}
.d-ico{width:30px;height:36px;border-radius:5px;flex:none;position:relative;display:flex;align-items:flex-end;justify-content:center;font-size:9px;font-weight:700;color:#fff;padding-bottom:3px}
.d-ico.zip{background:#8A8698}.d-ico.html{background:var(--acc)}.d-ico.pdf{background:#C2410C}.d-ico.json{background:var(--ok)}.d-ico.dir{background:#5B8DEF;height:26px;width:34px;border-radius:4px}
.d-flecha{font-size:22px;color:var(--acc);font-weight:700}
.d-dialogo{width:100%;max-width:300px;background:#fff;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.18);text-align:center}
.d-dialogo p{margin-bottom:14px;font-size:14px;line-height:1.4}
.d-botones{display:flex;gap:8px;justify-content:center}
.d-bot{padding:8px 16px;border-radius:9px;background:#EEF0F6;font-weight:700;font-size:14px}
.d-bot.si{background:var(--acc);color:#fff}
.d-hoja{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.15);padding:14px 14px 22px}
.d-hoja .d-fila{border-top:1px solid var(--line);border-radius:0}
.d-icoapp{width:58px;height:58px;border-radius:14px;background:var(--acc);color:#fff;font-family:"Bricolage",sans-serif;font-weight:800;font-size:26px;display:flex;align-items:center;justify-content:center}
.d-nota{font-size:12px;color:var(--ink2)}
/* texto del paso */
.texto{background:var(--card);border-radius:22px;padding:22px;box-shadow:0 0 0 1px var(--line)}
.paso-n{font-size:14px;font-weight:700;color:var(--acc);margin-bottom:4px}
.texto h2{font-family:"Bricolage",system-ui,sans-serif;font-size:26px;line-height:1.15;letter-spacing:-.02em;margin-bottom:10px}
.texto p{margin-bottom:10px}
.texto .ojo{background:var(--warn-soft);border-radius:12px;padding:10px 12px;font-size:16px}
.texto .bien{background:var(--ok-soft);border-radius:12px;padding:10px 12px;font-size:16px}
.mandos{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{font:inherit;font-weight:700;font-size:17px;border:0;border-radius:12px;padding:12px 18px;min-height:48px;cursor:pointer;background:#EEF0F6;color:var(--ink)}
.btn.prin{background:var(--acc);color:#fff}
.btn:disabled{opacity:.4;cursor:default}
.puntos{display:flex;gap:6px;margin-left:auto}
.puntos i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.puntos i.on{background:var(--acc)}
.repetir{font:inherit;font-size:15px;background:none;border:0;color:var(--acc);text-decoration:underline;cursor:pointer;margin-top:10px;padding:6px 0}
/* lista completa en texto */
details.todo{margin-top:34px;background:#fff;border-radius:18px;box-shadow:0 0 0 1px var(--line);padding:4px 20px}
details.todo summary{cursor:pointer;font-weight:700;padding:14px 0;min-height:44px}
details.todo ol{padding:0 0 16px 22px}
details.todo li{margin-bottom:10px}
.ayuda-mas{margin-top:30px;background:var(--ink);color:#EDEAF7;border-radius:22px;padding:22px}
.ayuda-mas h2{font-family:"Bricolage",sans-serif;font-size:22px;margin-bottom:6px;color:#fff}
.ayuda-mas a{color:#D6C8FF}
footer{text-align:center;padding:30px 18px;font-size:14px;background:var(--night);color:#A9A3C4}
footer a{color:#D6D1EA;margin:0 8px}
/* sin JavaScript: se ven todos los pasos en la lista */
.js-solo{display:none}
.js .js-solo{display:block}
.js .disp.js-solo{display:inline-flex}
.js .guia.js-solo{display:grid}
@media (max-width:820px){.js .guia.js-solo{display:grid}}
@media (prefers-reduced-motion:reduce){.puntero{transition:none}.aro.on::after,.onda.va,.puntero.pulsa{animation:none}}
@media print{header.top,.disp,.guia,.ayuda-mas,footer{display:none!important}details.todo{box-shadow:none}details.todo>*{display:block}}
/* centro de ayuda */
.buscador{width:100%;font:inherit;font-size:18px;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:#fff;margin-bottom:18px}
.temas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tema{display:block;background:#fff;border-radius:18px;padding:18px;box-shadow:0 0 0 1px var(--line);text-decoration:none;color:var(--ink)}
.tema:hover{box-shadow:0 0 0 2px var(--acc)}
.tema b{display:block;font-family:"Bricolage",sans-serif;font-size:20px;letter-spacing:-.01em;margin-bottom:4px}
.tema span{color:var(--ink2);font-size:16px}
.tema.prox{opacity:.55;pointer-events:none}
/* dibujos de las guías 2-4 */
.d-hojacalc{display:grid;grid-template-columns:1.4fr 1.1fr 1fr;width:100%;max-width:360px;background:#fff;border-radius:8px;box-shadow:0 0 0 1px #C9CCD8;overflow:hidden;font-size:12px}
.d-celda{padding:7px 8px;border-right:1px solid #E4E6EE;border-bottom:1px solid #E4E6EE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-celda.c{background:#E3F3EA;font-weight:700;color:#0F7A4A}
.d-candado{font-size:54px;line-height:1;width:96px;height:96px;border-radius:28px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(28,23,51,.15)}
.d-semana{display:flex;gap:6px}
.d-semana span{width:36px;height:40px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.d-semana span.sel{width:58px;background:var(--acc);color:#fff}
.marco.movil .d-semana{gap:3px}.marco.movil .d-semana span{width:24px;height:34px;font-size:11px}.marco.movil .d-semana span.sel{width:40px}