/* CicloDocs — página de una universidad (UTEC). Usa portada.css y cuenta.css. */

.btn--cyan{background:var(--acento);box-shadow:4px 4px 0 var(--tinta)}

.u-barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px max(24px,calc((100vw - 1180px) / 2));background:var(--blanco);border-bottom:var(--borde);
}
.u-main{max-width:1180px;margin:0 auto;padding:24px 24px 90px}
.u-ruta{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:15px;font-weight:800}
.u-ruta a{transition:color .2s}
.u-ruta a:hover{color:var(--acento-oscuro)}
.u-ruta span{color:#999;font-weight:500}

/* ---------- portada de la universidad ---------- */
.u-hero{
  position:relative;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;overflow:hidden;
  min-height:290px;padding:30px 36px 34px;color:#fff;border:var(--borde);border-radius:16px;
  background:#08080a url("img/utec-binario-oscuro.webp") right 20% bottom 35%/auto 150% no-repeat;
  box-shadow:9px 9px 0 var(--acento-oscuro);animation:sube .6s var(--suave) both;
}
.u-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#08080a 25%,rgba(8,8,10,.55) 55%,rgba(8,8,10,.15));pointer-events:none}
.u-hero > *{position:relative}
.u-tag{
  display:inline-flex;align-items:center;gap:16px;padding:8px 16px;color:var(--tinta);
  font-size:clamp(38px,5vw,54px);font-weight:900;letter-spacing:-.04em;line-height:1;
  background:var(--blanco);border:var(--borde);border-radius:10px;box-shadow:-4px 5px 0 var(--acento);
}
.u-tag i{width:30px;height:30px;border-radius:50%;background:var(--acento);border:var(--borde)}
.u-lema{margin:22px 0 8px;font-size:clamp(24px,3.2vw,34px);font-weight:900;letter-spacing:-.03em}
.u-nombre{margin:0 0 20px;font-size:16px;color:#ddd}
.u-online{
  display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 16px;border-radius:999px;
  font-size:15px;font-weight:800;border:2px solid var(--acento);background:rgba(18,181,234,.12);
}
.u-online i{position:relative;width:9px;height:9px;border-radius:50%;background:#30d158}
.u-online i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#30d158;animation:latido 2s ease-out infinite}
@keyframes latido{from{transform:scale(1);opacity:.7}to{transform:scale(3);opacity:0}}
.u-online b{font-variant-numeric:tabular-nums}

.u-hero__der{display:flex;flex-direction:column;gap:14px;width:236px}
.u-semana{
  padding:16px 18px;color:var(--tinta);background:var(--blanco);border:var(--borde);border-radius:12px;
  box-shadow:5px 5px 0 var(--acento-oscuro);
}
.u-semana__titulo{margin:0 0 10px;font-size:12px;font-weight:900;letter-spacing:.14em}
.u-semana__num{display:flex;align-items:center;gap:8px}
.u-semana__num span{font-size:22px;font-weight:900;margin-right:6px}
.u-semana__num b{
  display:grid;place-items:center;width:52px;height:62px;font-size:44px;font-weight:900;font-variant-numeric:tabular-nums;
  background:var(--acento);border:var(--borde);border-radius:6px;animation:voltea .6s var(--resorte) both;
}
.u-semana__num b + b{animation-delay:.1s}
@keyframes voltea{from{transform:rotateX(90deg)}}
.u-semana__vac{margin:4px 0 2px;font-size:30px;font-weight:900;letter-spacing:-.03em}
.u-semana__pie{margin:10px 0 0;font-size:12px;color:#444}
.u-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.u-stats p{
  margin:0;padding:10px 14px;color:var(--tinta);font-size:13px;font-weight:800;
  background:var(--acento-claro);border:var(--borde);border-radius:10px;
}
.u-stats b{display:block;font-size:34px;font-weight:900;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}

/* ---------- cursos ---------- */
.u-cursos{margin-top:44px}
.u-cursos__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.u-cursos__head h2{margin:0;font-size:34px;font-weight:900;letter-spacing:-.04em}
.u-cursos__head p{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:14px;color:#444}
.u-buscar{
  display:flex;align-items:center;gap:10px;width:min(330px,100%);height:44px;padding:0 14px;
  background:var(--blanco);border:var(--borde);border-radius:10px;box-shadow:4px 4px 0 var(--tinta);
}
.u-buscar input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px}
.u-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.cu{
  position:relative;display:flex;flex-direction:column;min-height:148px;padding:20px 20px 16px;
  background:var(--blanco);border:var(--borde);border-radius:12px;cursor:pointer;
  animation:sube .5s var(--suave) both;animation-delay:calc(.1s + min(var(--i,0),12) * .04s);
  transition:transform .25s var(--resorte), box-shadow .25s var(--resorte), opacity .3s;
}
.cu:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--acento-oscuro)}
.cu-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.cu-nombre{margin:0 46px 4px 0;font-size:20px;font-weight:900;letter-spacing:-.03em;line-height:1.15}
.cu-desc{margin:0 0 6px;font-size:12px;color:#555}
.cu-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.cu-num{margin:0;font-size:13px;color:#555}
.cu-num b{display:block;color:var(--acento-oscuro);font-size:14px}
.cu-num b span{font-size:25px;font-weight:900;letter-spacing:-.03em;margin-right:2px}
.cu-ir{
  flex:none;display:grid;place-items:center;width:36px;height:36px;border:var(--borde);border-radius:8px;background:var(--blanco);
  transition:background .2s, transform .3s var(--resorte);
}
.cu:hover .cu-ir{background:var(--acento);transform:translateX(2px)}
.cu-check{
  position:absolute;z-index:2;top:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;cursor:pointer;
  color:#777;background:var(--blanco);border:2px dashed #b9b4a8;border-radius:8px;
  transition:color .2s, border-color .2s, background .2s, transform .3s var(--resorte);
}
.cu-check:hover{color:var(--tinta);border-style:solid;border-color:var(--tinta);background:var(--acento-claro)}
.cu-check:active{transform:scale(.88)}
.cu-volver{display:none}
.u-vacio{margin:30px 0;text-align:center;font-weight:700;color:#555}

/* cursos ya pasados */
.u-pasados{margin-top:36px}
.u-pasados__titulo{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:14px;font-weight:900;letter-spacing:.14em;color:#555}
.u-pasados__titulo::after{content:"";flex:1;border-top:2px dashed #cfcac0}
.cu.is-pasado{opacity:.55;border-style:dashed;border-color:#b9b4a8;background:#f3f1ea;min-height:100px}
.cu.is-pasado:hover{opacity:.9;box-shadow:none;transform:none}
.cu.is-pasado .cu-nombre{text-decoration:line-through;color:#666;font-size:17px}
.cu.is-pasado .cu-desc,.cu.is-pasado .cu-ir{display:none}
.cu.is-pasado .cu-num b{color:#777;display:inline;font-size:13px}
.cu.is-pasado .cu-num b span{font-size:13px}
.cu.is-pasado [data-pasar]{display:none}
.cu.is-pasado .cu-volver{display:grid;border-style:solid}

@media (max-width:760px){
  .u-barra{padding:12px 16px}
  .u-barra .btn{height:40px;padding:0 13px;font-size:14px}
  .u-main{padding:18px 16px 70px}
  .u-hero{grid-template-columns:1fr;padding:22px 20px 24px;background-size:auto 120%}
  .u-hero__der{width:100%;flex-direction:row;flex-wrap:wrap}
  .u-semana{flex:1 1 220px}
  .u-stats{flex:1 1 220px}
  .u-grid{grid-template-columns:1fr 1fr;gap:12px}
  .cu{min-height:136px;padding:16px 14px 12px}
  .cu-nombre{font-size:17px;margin-right:38px}
}
@media (max-width:420px){.u-grid{grid-template-columns:1fr}}