/* Estilo de las guías paso a paso. Mismo lenguaje visual que vitrix.cl. */
:root{--bg:#0A0F1E;--bg-2:#0D1424;--surface:#121A2E;--border:rgba(120,145,190,.14);--border-2:rgba(120,145,190,.26);
  --cyan:#00AEEF;--navy:#1B3A6B;--green:#22C55E;--amber:#F59E0B;--text:#EAF0FA;--text-2:#8FA0BD;--text-3:#5A6885;
  --display:'Outfit',sans-serif;--body:'Inter',sans-serif;--mono:'JetBrains Mono',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse 50% 40% at 70% 0,rgba(0,174,239,.12),transparent 70%)}
a{color:var(--cyan)}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
.top{display:flex;justify-content:space-between;align-items:center;padding:20px 0;flex-wrap:wrap;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:21px;color:var(--text);text-decoration:none}
.mk{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--cyan),var(--navy));position:relative;flex:0 0 34px}
.mk::after{content:"";position:absolute;inset:8px 8px 11px 8px;border-radius:3px;background:#fff}
.mk::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;right:6px;top:6px;box-shadow:0 0 8px #fff}
.by{font-family:var(--body);font-size:11.5px;font-weight:500;color:var(--text-2);display:block;margin-top:-3px}
h1{font-family:var(--display);font-size:clamp(28px,4.6vw,40px);letter-spacing:-.03em;font-weight:600;margin:22px 0 10px}
.lead{color:var(--text-2);font-size:17px}
h2{font-family:var(--display);font-size:22px;font-weight:600;margin:40px 0 10px;letter-spacing:-.01em}
h3{font-family:var(--display);font-size:17.5px;font-weight:600;margin:0 0 8px}
p,li{color:var(--text-2);font-size:15px}
p+p{margin-top:10px}
b,strong{color:var(--text);font-weight:600}
/* Pasos numerados */
ol.pasos{list-style:none;counter-reset:paso;margin:24px 0}
ol.pasos>li{counter-increment:paso;position:relative;padding:0 0 28px 54px;border-left:2px solid var(--border);margin-left:17px}
ol.pasos>li:last-child{border-left-color:transparent;padding-bottom:4px}
ol.pasos>li::before{content:counter(paso);position:absolute;left:-19px;top:-4px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);border:1px solid var(--border-2);color:var(--cyan);
  font-family:var(--display);font-weight:700;font-size:16px}
ol.pasos ul,ol.pasos ol:not(.pasos){margin:8px 0 0 18px}
ol.pasos li li{font-size:14.5px;margin:4px 0}
/* Figuras */
.fig{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:16px;margin:14px 0}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{color:var(--text-3);font-size:13px;margin-top:10px;text-align:center}
/* Bloques de aviso */
.nota,.aviso,.ojo{border-radius:12px;padding:12px 16px;font-size:14.5px;margin:16px 0}
.nota{background:rgba(0,174,239,.07);border:1px solid rgba(0,174,239,.28);color:#9fe1fb}
.aviso{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:#fcd34d}
.ojo{background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.28);color:#86efac}
.nota b,.aviso b,.ojo b{color:inherit}
pre{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:14px;overflow:auto;
  font-family:var(--mono);font-size:13px;color:var(--text-2);margin:12px 0;line-height:1.55}
code{font-family:var(--mono);font-size:.92em;background:rgba(120,145,190,.12);padding:2px 6px;border-radius:5px;color:var(--text)}
pre code{background:none;padding:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--cyan);color:#04121f;
  border:1px solid transparent;padding:12px 18px;border-radius:11px;font-family:var(--display);font-weight:600;
  font-size:15px;text-decoration:none;margin:12px 8px 0 0;cursor:pointer}
.btn.ghost{background:transparent;border-color:var(--border-2);color:var(--text)}
.vias{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0}
.via{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px}
.via .tag{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--cyan);text-transform:uppercase}
.via h3{margin:6px 0 6px}
.via p{font-size:14px}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text-2)}
th{color:var(--text);font-family:var(--display);font-weight:600;font-size:14px}
.indice{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 22px;margin:24px 0}
.indice ol{margin-left:18px}
.indice li{margin:5px 0}
footer{border-top:1px solid var(--border);margin-top:56px;padding:26px 0;color:var(--text-3);font-size:13px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:560px){ol.pasos>li{padding-left:42px}ol.pasos>li::before{width:32px;height:32px;left:-17px}}