:root{
  --fondo:#05070e;
  --panel:#0f1626;
  --panel-2:#0b1120;
  --linea:#1e2a44;
  --tinta:#dbe6f5;
  --tinta-2:#93a4be;
  --acento:#00e0ff;
  --acento-2:#0b2545;
  --alerta:#ffb454;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:radial-gradient(1100px 600px at 15% -10%,#10203c 0%,var(--fondo) 55%) fixed;
  color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.62;
  font-size:16px;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;color:var(--acento)}

.cab{
  padding:34px 20px 22px;
  border-bottom:1px solid var(--linea);
  background:linear-gradient(180deg,rgba(0,224,255,.06),transparent);
}
.marca{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acento);
}
h1{margin:0;font-size:29px;line-height:1.15;letter-spacing:-.4px}
.sub{margin:12px 0 0;color:var(--tinta-2);max-width:56ch}
.fecha{margin:14px 0 0;font-size:12.5px;color:var(--tinta-2)}

main{max-width:760px;margin:0 auto;padding:6px 20px 40px}
section{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--linea);
  border-radius:14px;
  padding:20px 20px 16px;
  margin:18px 0;
}
h2{
  margin:0 0 14px;
  font-size:17px;
  letter-spacing:.01em;
  padding-bottom:9px;
  border-bottom:1px solid var(--linea);
}
h2::before{content:"▍";color:var(--acento);margin-right:8px}
p{margin:0 0 12px;color:var(--tinta)}
ul,ol{margin:0 0 12px;padding-left:0;list-style:none}

.equipo li{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px dashed var(--linea);
}
.equipo li:last-child{border-bottom:none}
.equipo span{color:var(--tinta-2);font-size:13px;text-align:right}

.pasos{counter-reset:p}
.pasos li{
  counter-increment:p;
  position:relative;
  padding:9px 0 9px 40px;
  border-bottom:1px dashed var(--linea);
}
.pasos li:last-child{border-bottom:none}
.pasos li::before{
  content:counter(p);
  position:absolute;left:0;top:11px;
  width:25px;height:25px;border-radius:50%;
  background:var(--acento-2);border:1px solid var(--acento);
  color:var(--acento);font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

.aviso{
  margin-top:6px;
  border:1px solid #2a3a5c;
  border-left:3px solid var(--acento);
  border-radius:10px;
  padding:14px 16px;
  background:rgba(0,224,255,.045);
}
.aviso b{color:var(--acento)}
.aviso ul{margin:9px 0 0}
.aviso li{position:relative;padding:4px 0 4px 18px;color:var(--tinta-2)}
.aviso li::before{content:"›";position:absolute;left:2px;color:var(--acento)}

.lista-ok li,.lista-pend li{position:relative;padding:8px 0 8px 26px;border-bottom:1px dashed var(--linea)}
.lista-ok li:last-child,.lista-pend li:last-child{border-bottom:none}
.lista-ok li::before{content:"✓";position:absolute;left:2px;color:var(--acento);font-weight:700}
.lista-pend li::before{content:"!";position:absolute;left:5px;color:var(--alerta);font-weight:700}

.nota,.aviso,.sub{color:var(--tinta-2)}
.nota{font-size:14px;margin:12px 0 0}

footer{
  padding:20px;text-align:center;color:var(--tinta-2);font-size:12.5px;
  border-top:1px solid var(--linea);
}
footer p{margin:0;color:var(--tinta-2)}

@media (max-width:520px){
  h1{font-size:24px}
  .cab{padding:26px 16px 18px}
  main{padding:2px 14px 30px}
  section{padding:17px 15px 13px}
}