/* Onboard · Pixel & Dot — entrada, lista de cursos y registro (mismo lenguaje que los cursos) */
:root{--yellow:#FFD923;--k7:#3E3935;--paper:#FAFAF7;--surface:#fff;--sunk:#F1F0EC;--ink:#1E1C1A;--ink-2:#6F6B66;--line:#E2E0DB;--hair:#CFCCC6;--dot:#FB3449;--ok:#137A73;--ok-bg:#E3F4F3;--bad:#D21F36;--bad-bg:#FDE8EA;
  --f-body:"Inter Tight","Helvetica Neue",Arial,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--f-serif:"Instrument Serif",Georgia,serif;--f-brand:"Arvo",Rockwell,Georgia,serif;--f-brand-sans:"Montserrat",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.1,1)}
@media (prefers-color-scheme:dark){:root{--paper:#151413;--surface:#1D1B1A;--sunk:#242220;--ink:#F2F0EC;--ink-2:#A8A29C;--line:#33302D;--hair:#4A4642;--ok:#65CBC9;--ok-bg:#16302F;--bad:#FF7383;--bad-bg:#3A171C;color-scheme:dark}}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2{font-weight:500;letter-spacing:-.035em;line-height:1.02;margin:0}
a{color:inherit}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.serif,h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400}
.mono{font-family:var(--f-mono)} .sm{font-size:12px;color:var(--ink-2)}
.note{font-size:14px;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:15px 24px;border-radius:999px;min-height:50px;cursor:pointer;text-decoration:none;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)} .btn:disabled{opacity:.45;cursor:wait}
.btn-ghost{border:1px solid var(--hair);border-radius:999px;padding:7px 12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.link{background:none;border:none;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* entrada */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
@media (max-width:860px){.login{grid-template-columns:minmax(0,1fr)}}
.cover{position:relative;overflow:hidden;background:var(--yellow);color:var(--k7);padding:clamp(24px,5vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.cover::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(62,57,53,.17) 1.6px,transparent 1.9px);background-size:18px 18px;-webkit-mask-image:linear-gradient(110deg,transparent 30%,#000 85%);mask-image:linear-gradient(110deg,transparent 30%,#000 85%);pointer-events:none}
.cover>*{position:relative;z-index:1}
.cv-top{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--f-brand-sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-align:right}
.cv-top .logo{width:clamp(56px,7vw,86px);height:auto}
.cv-title{font-family:var(--f-brand);font-weight:700;font-size:clamp(64px,11vw,170px);line-height:.86;letter-spacing:-.045em}
.cv-sub{font-family:var(--f-brand-sans);font-weight:500;font-size:clamp(15px,1.5vw,18px);max-width:40ch;margin:0}
.form-side{display:flex;align-items:center;padding:clamp(24px,5vw,64px)}
.step{width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px}
.step h2{font-size:clamp(32px,4vw,48px);margin:8px 0 18px}
.step input{font:inherit;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;border:none;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);padding:10px 0;min-height:52px;border-radius:0}
.step input.code{font-family:var(--f-mono);letter-spacing:.4em;font-size:clamp(26px,3.4vw,36px)}
.step input:focus{outline:none;border-bottom-width:2px}
.msg{min-height:1.4em;margin:0;color:var(--bad);font-size:14px}
/* barra superior */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:12px;padding-block:12px}
.top .logo{width:34px;height:34px;flex:none}
.top-title{flex:1;min-width:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.45}
.top-title b{display:block;font-weight:500}.top-title span{color:var(--ink-2);text-transform:none;letter-spacing:.04em}
/* cursos y registro */
.hub{max-width:1000px;margin:0 auto;padding-bottom:40px;display:flex;flex-direction:column;gap:30px}
.phead{padding-top:clamp(30px,6vw,70px);display:flex;flex-direction:column;gap:14px}
.phead h1{font-size:clamp(48px,9vw,110px)}
.lede{font-family:var(--f-mono);font-size:13px;line-height:1.7;color:var(--ink-2);max-width:70ch;margin:0}
.idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.idx a{display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.idx .nn,.idx .mm{font-family:var(--f-mono);font-size:12px;color:var(--ink-2)}
.idx .tt{font-size:clamp(24px,3.6vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.08;transition:transform .35s var(--ease)}
.idx .tt small{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px;font-weight:400}
.idx .bar{display:block;height:2px;background:var(--line);margin-top:12px;max-width:360px}.idx .bar i{display:block;height:100%;background:var(--ink)}
.idx .go{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--hair);border-radius:999px;padding:10px 16px;white-space:nowrap;transition:background .2s,color .2s}
.idx a:hover .tt{transform:translateX(8px)} .idx a:hover .go{background:var(--ink);color:var(--paper)}
@media (max-width:640px){.idx a{grid-template-columns:30px minmax(0,1fr)}.idx .mm,.idx .go{grid-column:2}}
.sec{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:14px}
.sec-h{display:flex;justify-content:space-between;gap:12px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:var(--sunk)}
tr:last-child td{border-bottom:none}
.pill{display:inline-block;font-family:var(--f-mono);font-size:11px;padding:3px 8px;border:1px solid var(--hair);border-radius:999px;white-space:nowrap}
.pill.ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}.pill.no{color:var(--bad);background:var(--bad-bg);border-color:transparent}
.foot{max-width:1240px;margin:40px auto 0;border-top:1px solid var(--line);padding-block:16px 24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.idx .ds{display:block;font-size:15px;line-height:1.45;letter-spacing:-.005em;color:var(--ink-2);margin-top:8px;max-width:60ch}
.idx.dl .tt{font-size:clamp(22px,3vw,34px)}