/* ============================================================
   SABER+ — Sistema visual de las páginas internas
   (catálogo, ficha de curso, aula e inscripción)
   La portada lleva su CSS embebido; los tokens son los mismos.
   ============================================================ */
:root{
  --tinta-950:#080D28; --tinta-900:#101A45; --tinta-800:#182463;
  --tinta-700:#22318A; --tinta-600:#3346B8;
  --oro:#F5B31A; --oro-hondo:#D98A00; --oro-claro:#FFD469;
  --cayena:#E24C34; --cayena-hondo:#C0341F;
  --menta:#0F9E78; --menta-claro:#3FCFA0;
  --wayuu:#D6417C;
  --papel:#FAF5EC; --papel-2:#F1E7D6; --papel-3:#E7D9C2;
  --tiza:#FFFFFF; --texto:#0D1330; --grafito:#5B6478;
  --borde:rgba(13,19,48,.11);
  --r-xl:30px; --r-lg:22px; --r-md:15px; --r-sm:10px;
  --sombra:0 26px 64px -24px rgba(8,13,40,.38);
  --sombra-sm:0 12px 32px -14px rgba(8,13,40,.30);
  --max:1240px;
  --curva:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;background:var(--papel);
  color:var(--texto);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.wrap{width:min(100% - 40px,var(--max));margin-inline:auto}
.dis{font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;letter-spacing:-.03em;line-height:1.05}
.ser{font-family:'Instrument Serif',Georgia,serif;font-style:italic}
.oculto{display:none!important}

.rev{opacity:0;transform:translateY(26px);transition:opacity .8s var(--curva),transform .8s var(--curva)}
.rev.vi{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important;transition-duration:.001s!important}
}

/* ---------- Imagen con respaldo de color ---------- */
.ph{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(140deg,var(--tinta-800),var(--tinta-600) 55%,var(--oro))}
.ph img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:transform 1.1s var(--curva),opacity .5s}
.ph img.na{opacity:0}
.ph.t2{background:linear-gradient(140deg,var(--cayena-hondo),var(--oro) 70%,var(--oro-claro))}
.ph.t3{background:linear-gradient(140deg,var(--menta),var(--menta-claro) 60%,var(--oro-claro))}
.ph.t4{background:linear-gradient(140deg,var(--tinta-900),var(--wayuu) 65%,var(--oro))}
.ph.t5{background:linear-gradient(140deg,var(--tinta-950),var(--tinta-700) 50%,var(--menta))}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  font-weight:650;font-size:15px;padding:14px 26px;border-radius:999px;white-space:nowrap;
  transition:transform .35s var(--curva),box-shadow .35s var(--curva),background .3s,color .3s,border-color .3s}
.btn svg{width:17px;height:17px;flex:none}
.btn-p{background:var(--cayena);color:#fff;box-shadow:0 14px 30px -14px rgba(226,76,52,.85)}
.btn-p:hover{background:var(--cayena-hondo);transform:translateY(-3px)}
.btn-o{background:var(--oro);color:var(--tinta-950)}
.btn-o:hover{transform:translateY(-3px);box-shadow:0 20px 38px -16px rgba(217,138,0,.85)}
.btn-t{background:var(--tinta-900);color:#fff}
.btn-t:hover{transform:translateY(-3px);box-shadow:var(--sombra-sm)}
.btn-l{background:transparent;color:var(--tinta-900);border:1.5px solid var(--borde)}
.btn-l:hover{border-color:var(--tinta-900);transform:translateY(-2px)}
.btn-s{padding:11px 20px;font-size:14px}
.btn-g{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}

/* ---------- Etiquetas ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:650}
.pill-o{background:rgba(245,179,26,.18);color:var(--oro-hondo)}
.pill-m{background:rgba(15,158,120,.14);color:var(--menta)}
.pill-c{background:rgba(226,76,52,.13);color:var(--cayena-hondo)}
.pill-t{background:rgba(24,36,99,.09);color:var(--tinta-800)}
.pill-w{background:rgba(214,65,124,.13);color:var(--wayuu)}
.pill-foto{background:rgba(8,13,40,.72);color:#fff;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18)}
.pill-foto.oro{background:var(--oro);color:var(--tinta-950);border-color:transparent}

/* ---------- Nav ---------- */
header.nav{position:sticky;top:0;z-index:100;background:rgba(250,245,236,.9);backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--borde);padding:12px 0}
header.nav.oscura{background:rgba(8,13,40,.9);border-bottom-color:rgba(255,255,255,.1)}
.nav-in{display:flex;align-items:center;gap:26px}
.marca{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--tinta-900)}
header.nav.oscura .marca{color:#fff}
.marca-sig{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:var(--tinta-900);
  display:grid;place-items:center;position:relative;overflow:hidden}
.marca-sig::before{content:"";position:absolute;inset:0;
  background:conic-gradient(from 200deg,transparent 0deg,rgba(245,179,26,.55) 90deg,transparent 200deg,rgba(226,76,52,.45) 300deg,transparent 360deg);
  animation:giro 11s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.marca-sig svg{width:21px;height:21px;position:relative;z-index:2}
.marca small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.6}
.nav-links{display:flex;gap:23px;margin-left:auto;align-items:center}
.nav-links a:not(.btn){font-size:14.4px;font-weight:550;color:var(--tinta-800);position:relative;padding:3px 0;white-space:nowrap}
header.nav.oscura .nav-links a:not(.btn){color:rgba(255,255,255,.85)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--oro);transition:width .35s var(--curva)}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-links a.act::after{width:100%}
@media(max-width:820px){.nav-links a:not(.btn){display:none}}

/* ---------- Migas ---------- */
.migas{display:flex;align-items:center;gap:9px;font-size:13.4px;color:var(--grafito);flex-wrap:wrap}
.migas a:hover{color:var(--tinta-900);text-decoration:underline;text-underline-offset:3px}
.migas svg{width:13px;height:13px;opacity:.5}

/* ---------- Tarjeta de curso (compartida) ---------- */
.curso-c{background:var(--tiza);border:1px solid var(--borde);border-radius:var(--r-xl);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .45s var(--curva),box-shadow .45s var(--curva)}
.curso-c:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.curso-c .foto{aspect-ratio:16/10;position:relative;display:block}
.curso-c:hover .foto img{transform:scale(1.06)}
.curso-c .foto .etq{position:absolute;top:13px;left:13px;z-index:4;display:flex;gap:7px;flex-wrap:wrap;max-width:calc(100% - 26px)}
.curso-c .foto .precio{position:absolute;bottom:13px;right:13px;z-index:4;background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);padding:8px 14px;border-radius:999px;font-weight:800;font-size:15px;color:var(--tinta-900);
  font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.curso-c .foto .precio s{font-weight:500;font-size:12px;color:var(--grafito);margin-right:5px}
.curso-c .cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.curso-c h3{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:750;letter-spacing:-.025em;line-height:1.2;margin-bottom:8px}
.curso-c .gancho{font-size:14.2px;color:var(--grafito);line-height:1.55;flex:1}
.curso-c .meta{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:12.6px;color:var(--grafito);flex-wrap:wrap}
.curso-c .meta span{display:inline-flex;align-items:center;gap:5px}
.curso-c .meta svg{width:14px;height:14px;opacity:.7;stroke-width:1.9;fill:none;stroke:currentColor}
.curso-c .pie{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:15px;border-top:1px solid var(--borde)}
.curso-c .prof{display:flex;align-items:center;gap:9px;min-width:0}
.curso-c .prof div{min-width:0}
.curso-c .prof b{display:block;font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.curso-c .prof span{display:block;font-size:11.6px;color:var(--grafito)}
.ini{width:33px;height:33px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:750}
.estrellas{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:13px;font-weight:700;color:var(--tinta-900)}
.estrellas svg{width:14px;height:14px;fill:var(--oro);stroke:none}
.estrellas i{font-style:normal;font-weight:500;color:var(--grafito);font-size:12px}

/* ---------- Footer compacto ---------- */
footer.pie{background:var(--tinta-950);color:rgba(255,255,255,.6);padding:52px 0 26px;font-size:14.2px;margin-top:auto}
.pie-in{display:flex;justify-content:space-between;gap:36px;align-items:flex-start;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
.pie-marca{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;color:#fff}
.pie-links{display:flex;gap:26px;flex-wrap:wrap}
.pie-links a:hover{color:var(--oro)}
.pie-abajo{display:flex;justify-content:space-between;gap:16px;padding-top:20px;font-size:12.8px;flex-wrap:wrap}
.aviso-demo{margin-top:16px;padding:12px 16px;border-radius:12px;background:rgba(245,179,26,.09);
  border:1px solid rgba(245,179,26,.22);font-size:12.6px;color:rgba(255,255,255,.66);line-height:1.55;max-width:60ch}
.aviso-demo b{color:var(--oro-claro)}

/* ---------- Cargando / vacío ---------- */
.cargando{padding:80px 20px;text-align:center;color:var(--grafito)}
.esqueleto{background:var(--tiza);border:1px solid var(--borde);border-radius:var(--r-xl);overflow:hidden;height:390px}
.esqueleto .b{background:linear-gradient(90deg,var(--papel-2) 25%,var(--papel-3) 50%,var(--papel-2) 75%);
  background-size:300% 100%;animation:brillo 1.5s infinite}
@keyframes brillo{to{background-position:-300% 0}}
.esqueleto .b1{height:180px}
.esqueleto .b2{height:15px;margin:22px 22px 10px;border-radius:5px}
.esqueleto .b3{height:15px;margin:0 22px 10px;width:60%;border-radius:5px}
.vacio{grid-column:1/-1;text-align:center;padding:70px 24px;background:var(--tiza);border:1px dashed var(--borde);border-radius:var(--r-xl)}
.vacio h3{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:750;letter-spacing:-.025em;margin-bottom:9px}
.vacio p{color:var(--grafito);max-width:44ch;margin:0 auto 20px}