.docs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.doc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 14px 40px #04336b10;transition:border-color .25s,box-shadow .3s}
.doc:hover{border-color:var(--cobalt);box-shadow:0 18px 46px #04336b1c}
.doc-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--soft);color:var(--cobalt)}
.doc-para{margin:0 0 4px;font:600 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt)}
.doc h3{margin:0 0 6px;font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.02em}
.doc-txt>p:not(.doc-para){margin:0 0 12px;color:var(--muted)}
.doc-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 16px}
.doc-meta div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.doc-meta dt{font:600 .72rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.doc-meta dd{margin:0;font-weight:700;color:var(--navy)}
.doc .actions{gap:10px 18px}
.doc .button svg{flex:none}
.doc-h2{margin-top:clamp(36px,5vw,56px)}
.doc-pend{border-style:dashed;background:var(--soft);box-shadow:none}
.doc-pend:hover{box-shadow:none}
.doc-pend .doc-ico{background:#fff;color:var(--muted)}
.doc-pend .en-progreso{margin-top:4px}

@media(max-width:560px){
 .doc{grid-template-columns:1fr;gap:14px;padding:18px}
 .doc-ico{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
 .doc,.doc:hover{box-shadow:none}
}