/* /notas/ — el índice de notas. Lo común está en base.css. Lo enlaza tools/plantilla-notas-indice.html */
/* Lo común está en /css/base.css; aquí solo la lista de notas */
.lista{display:flex;flex-direction:column;padding-bottom:70px}
.nota{display:grid;grid-template-columns:1fr auto;gap:6px 26px;align-items:start;
  padding:30px 0;border-bottom:1px solid rgba(58,72,112,.26);text-decoration:none;color:inherit;
  transition:background .22s cubic-bezier(.6,0,.2,1)}
.nota:hover{background:rgba(18,24,55,.42)}
.nota:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.nota .meta{grid-column:1/-1;font-family:var(--mono);font-size:11px;letter-spacing:3.4px;color:var(--dim);
  text-transform:uppercase;display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:8px}
.nota .meta .tipo{color:var(--primary)}
.nota h2{font-weight:700;font-size:clamp(22px,3.2vw,30px);line-height:1.14;letter-spacing:-.8px;color:var(--white);text-wrap:balance}
.nota:hover h2{color:var(--primary)}
.nota .sub{grid-column:1;font-size:16.5px;line-height:1.5;color:var(--mid);margin-top:9px;max-width:36rem}
.nota .ir{grid-row:2;grid-column:2;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--dim);
  text-transform:uppercase;white-space:nowrap;padding-top:8px}
.nota:hover .ir{color:var(--primary)}
.vacio{padding:60px 0;color:var(--dim);font-family:var(--mono);font-size:13px;letter-spacing:2px;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:640px){
  .nota{grid-template-columns:1fr}
  .nota .ir{grid-row:auto;grid-column:1;padding-top:12px}
}