:root{--tinta:#0A1540;--azul:#0033A0;--azul-claro:#2C5FE0;--magenta:#E4007C;--magenta-claro:#FF4FA3;--lienzo:#F2F4F9;--gris:#5A6480;--linea:#DDE2EE;--ok:#0E8A5F;--mx:clamp(16px,5vw,56px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--tinta);font-family:Lato,system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--azul)}
h1,h2,h3{font-family:Poppins,system-ui,sans-serif;margin:0;line-height:1.15}
h1{font-size:clamp(1.9rem,4.4vw,3rem);color:var(--azul);letter-spacing:-.03em}
h2{font-size:clamp(1.35rem,2.6vw,1.9rem);color:var(--azul);letter-spacing:-.02em}
h3{font-size:1.08rem}
p{margin:0 0 1em}
.wrap{max-width:1120px;margin:0 auto;padding-inline:var(--mx)}
.cargando{padding:80px var(--mx);color:var(--gris);text-align:center}
.muted{color:var(--gris)}
.small{font-size:.88rem}

/* encabezado */
.hdr{border-bottom:1px solid var(--linea);background:#fff;position:sticky;top:0;z-index:50}
.hdr .wrap{display:flex;align-items:center;gap:16px;min-height:68px}
.hdr .logo img{height:32px;width:auto;display:block}
.hdr .marca{font-family:Poppins,sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);padding-left:14px;border-left:1px solid var(--linea)}
.hdr nav{margin-left:auto;display:flex;align-items:center;gap:18px;font-family:Poppins,sans-serif;font-size:.88rem;font-weight:500}
.hdr nav a{text-decoration:none;color:var(--tinta)}
.hdr nav a:hover,.hdr nav a.on{color:var(--magenta)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;font-family:Poppins,sans-serif;font-weight:600;font-size:.8rem}
@media(max-width:640px){.hdr .marca{display:none}.hdr nav{gap:12px;font-size:.82rem}.hdr nav .solo-desk{display:none}}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Poppins,sans-serif;font-weight:600;font-size:.92rem;padding:14px 28px;border-radius:999px;background:var(--magenta);color:#fff;text-decoration:none;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:#b80066}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--tinta);border:2px solid var(--tinta)}
.btn.sec:hover{background:var(--tinta);color:#fff}
.btn.azul{background:var(--azul)}
.btn.azul:hover{background:#00267a}
.btn.chico{padding:9px 18px;font-size:.82rem}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}

/* portada */
.hero{background:var(--tinta);color:#fff;border-radius:36px;margin:28px var(--mx) 0;padding:clamp(36px,6vw,84px) clamp(22px,6vw,72px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:560px;height:560px;right:-210px;top:-260px;border-radius:50%;border:64px solid var(--magenta);opacity:.85;pointer-events:none}
.hero>*{position:relative}
.eyebrow{font-family:Poppins,sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta-claro);margin:0 0 16px}
.hero h1{color:#fff;font-size:clamp(2.2rem,5.6vw,4.4rem);text-transform:uppercase;line-height:.98;max-width:14ch}
.hero p.lead{color:#C2D0F0;font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:54ch;margin:22px 0 30px}
.hero .btn.sec{background:transparent;color:#fff;border-color:#fff}
.hero .btn.sec:hover{background:#fff;color:var(--tinta)}
@media(max-width:600px){.hero{border-radius:26px}.hero::before{width:280px;height:280px;border-width:38px;right:-140px;top:-160px;opacity:.6}}

.sec{padding:clamp(44px,7vw,90px) 0}
.sec .lead{color:var(--gris);max-width:62ch;margin:12px 0 32px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid3,.grid2{grid-template-columns:1fr}}

/* tarjetas de curso */
.curso{border:1px solid var(--linea);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:10px;background:#fff;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
a.curso:hover{border-color:var(--azul);box-shadow:0 10px 30px rgba(0,51,160,.08)}
.curso .tag{font-family:Poppins,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta)}
.curso h3{color:var(--azul);font-size:1.15rem}
.curso p{margin:0;color:var(--gris);font-size:.94rem;flex:1}
.curso.bloq{opacity:.62}
.barra{height:8px;background:var(--lienzo);border-radius:999px;overflow:hidden}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--magenta));border-radius:999px}
.meta{display:flex;justify-content:space-between;font-size:.84rem;color:var(--gris)}

/* formularios */
.panel{background:var(--lienzo);border-radius:28px;padding:clamp(22px,4vw,44px)}
.form{background:#fff;border-radius:24px;padding:clamp(22px,4vw,40px);max-width:640px;margin:0 auto}
.form h1{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:8px}
.par{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.par{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.f label{font-family:Poppins,sans-serif;font-size:.84rem;font-weight:600}
.f input,.f select,.f textarea{width:100%;min-width:0;font:inherit;font-size:1rem;padding:13px 15px;border:1px solid var(--linea);border-radius:12px;background:#fff;color:var(--tinta)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--azul)}
.f .ayuda{font-size:.8rem;color:var(--gris)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.seg button{font:inherit;font-family:Poppins,sans-serif;font-weight:600;font-size:.9rem;padding:14px;border-radius:14px;border:2px solid var(--linea);background:#fff;color:var(--tinta);cursor:pointer;text-align:left;line-height:1.3}
.seg button span{display:block;font-family:Lato,sans-serif;font-weight:400;font-size:.8rem;color:var(--gris);margin-top:3px}
.seg button.on{border-color:var(--azul);background:#F4F7FF}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--gris);margin:4px 0 20px;line-height:1.45}
.chk input{margin-top:3px;accent-color:var(--azul)}
.msg{font-size:.93rem;margin-top:14px;padding:12px 16px;border-radius:12px;display:none}
.msg.on{display:block}
.msg.err{background:#FDECF4;color:#A3004F}
.msg.ok{background:#E8F6F0;color:var(--ok)}
.msg.info{background:#EEF2FC;color:var(--azul)}
.link{background:none;border:0;padding:0;font:inherit;color:var(--azul);text-decoration:underline;cursor:pointer}

/* curso y módulo */
.migas{font-size:.86rem;color:var(--gris);margin:26px 0 10px}
.migas a{color:var(--gris)}
.mods{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--linea)}
.mods li{border-bottom:1px solid var(--linea)}
.mods a,.mods .x{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:16px 4px;text-decoration:none;color:inherit}
.mods a:hover{background:#FAFBFE}
.num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:Poppins,sans-serif;font-weight:600;font-size:.85rem;background:var(--lienzo);color:var(--azul)}
.num.ok{background:var(--ok);color:#fff}
.estado{font-size:.8rem;font-family:Poppins,sans-serif;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--lienzo);color:var(--gris);white-space:nowrap}
.estado.ok{background:#E8F6F0;color:var(--ok)}
.estado.cur{background:#FDECF4;color:var(--magenta)}
.video{border-radius:22px;overflow:hidden;background:#000;aspect-ratio:16/9;margin:18px 0 8px}
.video video{width:100%;height:100%;display:block}
.sinvideo{border-radius:22px;background:var(--lienzo);padding:28px;margin:18px 0 8px;color:var(--gris)}
.lect{max-width:760px}
.lect h3{font-size:1.25rem;color:var(--azul);margin:30px 0 12px}
.lect ul{padding-left:1.2em}
.lect li{margin-bottom:.4em}
.lect .ex{background:var(--lienzo);border-left:4px solid var(--azul);padding:16px 20px;border-radius:0 14px 14px 0;margin:18px 0}
.lect .keep{background:#FFF4FA;border:1px solid #F8C6E0;padding:18px 22px;border-radius:16px;margin:22px 0}
.pasos{display:flex;gap:6px;margin:22px 0 4px;flex-wrap:wrap}
.pasos i{height:6px;flex:1;min-width:16px;border-radius:999px;background:var(--linea)}
.pasos i.ok{background:var(--azul)}
.quiz{max-width:760px;margin-top:34px;border-top:2px solid var(--tinta);padding-top:26px}
.preg{margin:0 0 26px}
.preg p{font-weight:700;margin-bottom:10px}
.preg label{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border:1px solid var(--linea);border-radius:12px;margin-bottom:8px;cursor:pointer}
.preg label:hover{border-color:var(--azul)}
.preg input{margin-top:4px;accent-color:var(--azul)}
.preg label.bien{border-color:var(--ok);background:#E8F6F0}
.preg label.mal{border-color:var(--magenta);background:#FDECF4}
.bloqueado{border:1px dashed var(--linea);border-radius:18px;padding:22px;color:var(--gris);margin-top:30px;max-width:760px}

/* certificado */
.cert{max-width:980px;margin:30px auto;background:#fff;border:1px solid var(--linea);border-radius:8px;aspect-ratio:1.414;padding:6%;position:relative;overflow:hidden;display:flex;flex-direction:column}
.cert::before{content:"";position:absolute;width:46%;aspect-ratio:1;right:-14%;top:-24%;border-radius:50%;border:5.2vw solid var(--magenta);opacity:.9}
.cert .logo{height:clamp(30px,4.4vw,52px);width:auto;align-self:flex-start}
.cert .tit{font-family:Poppins,sans-serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);font-size:clamp(.7rem,1.2vw,.95rem);margin-top:6%}
.cert .nom{font-family:Poppins,sans-serif;font-weight:700;color:var(--azul);font-size:clamp(1.6rem,4.4vw,3.2rem);letter-spacing:-.03em;margin:2% 0 1%}
.cert .txt{font-size:clamp(.85rem,1.6vw,1.15rem);color:var(--tinta);max-width:70%}
.cert .ccur{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(1.05rem,2.4vw,1.7rem);color:var(--tinta);margin:1% 0}
.cert .pie-c{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;font-size:clamp(.62rem,1.05vw,.8rem);color:var(--gris)}
.cert .firma b{display:block;color:var(--tinta);font-family:Poppins,sans-serif;font-size:clamp(.72rem,1.2vw,.92rem)}
.cert .firmas{display:flex;gap:4%;flex:1;max-width:66%}
.cert .firma{border-top:1px solid var(--tinta);padding-top:8px;flex:1}
.cert .cod{text-align:right;display:flex;gap:12px;align-items:flex-end}
.cert .qr{width:clamp(56px,8vw,96px);flex:none}
.cert .qr svg{width:100%;height:auto;display:block}
.cert .bfa{margin-top:6px;font-family:Poppins,sans-serif;font-weight:600;color:var(--azul);font-size:clamp(.58rem,.95vw,.74rem)}
.cert .bfa-i{margin-right:4px}
.cert .cod b{font-family:Poppins,sans-serif;color:var(--azul);font-size:clamp(.75rem,1.3vw,1rem);letter-spacing:.06em}
.cert .leg{font-size:clamp(.55rem,.9vw,.72rem);color:var(--gris);margin-top:2%}
@media print{
  @page{size:A4 landscape;margin:0}
  body *{visibility:hidden}
  .cert,.cert *{visibility:visible}
  .cert{position:fixed;inset:0;margin:0;border:0;border-radius:0;max-width:none;width:100%;height:100%;aspect-ratio:auto}
  .cert::before{border-width:60px}
}

/* tablas del panel */
.tabs{display:flex;gap:8px;margin:20px 0;flex-wrap:wrap}
.tabs button{font:inherit;font-family:Poppins,sans-serif;font-weight:600;font-size:.86rem;padding:9px 18px;border-radius:999px;border:1px solid var(--linea);background:#fff;cursor:pointer;color:var(--tinta)}
.tabs button.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla th{text-align:left;font-family:Poppins,sans-serif;font-weight:600;font-size:.78rem;color:var(--gris);padding:10px 8px;border-bottom:2px solid var(--linea)}
.tabla td{padding:12px 8px;border-bottom:1px solid var(--linea);vertical-align:top}
.scroll{overflow-x:auto}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.kpis div{background:var(--lienzo);border-radius:18px;padding:16px 18px}
.kpis b{display:block;font-family:Poppins,sans-serif;font-size:1.8rem;color:var(--azul);line-height:1.1}
.kpis span{font-size:.82rem;color:var(--gris)}
@media(max-width:700px){.kpis{grid-template-columns:1fr 1fr}}

.pie{background:var(--tinta);color:#AEBCDD;padding:30px 0;font-size:.85rem;margin-top:60px}
.pie .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.pie img{height:28px;width:auto}
.pie a{color:#fff}
.pie .der{margin-left:auto}
@media(max-width:640px){.pie .der{margin-left:0}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--tinta);color:#fff;padding:12px 22px;border-radius:999px;font-size:.92rem;opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.aviso-pcc{font-size:.84rem;color:var(--gris);margin-top:22px;max-width:70ch}