.enc-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0; }
.enc-filter { padding: 7px 18px; border-radius: 40px; cursor: pointer; font-size: .85rem; font-weight: 600; background: rgba(255,255,255,.03); color: #b5b0a8; border: 1px solid rgba(201,169,89,.25); }
.enc-filter.active { background: rgba(201,169,89,.15); color: #e8d5a3; border-color: #c9a959; }
.enc-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 10px; }
.enc-tools .form-control, .enc-tools .form-select { background-color: #14131f; color: #e4dfd7; border-color: rgba(201,169,89,.3); max-width: 260px; }
.enc-count { text-align: center; color: #b5b0a8; font-size: .85rem; margin-bottom: 18px; }
.enc-card { background: rgba(255,255,255,.03); border: 1px solid rgba(201,169,89,.2); border-radius: 16px; padding: 18px; margin-bottom: 18px; scroll-margin-top: 90px; }
.enc-card header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.enc-card h3 { font-family: 'Playfair Display', serif; font-size: 2rem; color: #e8d5a3; margin: 0; min-width: 84px; }
.enc-card header strong { display: block; color: #e4dfd7; }
.enc-tipo { display: inline-block; font-size: .72rem; letter-spacing: .5px; text-transform: uppercase; color: #c9a959; }
.enc-desc { color: #b5b0a8; margin-bottom: 10px; font-size: .95rem; }
.enc-notes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.enc-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 54px; padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(201,169,89,.3); color: #e4dfd7; font-weight: 600; }
.enc-chip small { font-weight: 400; font-size: .7rem; color: #b5b0a8; }
.enc-chip.root { background: #e8d5a3; color: #0e0d1a; border-color: #e8d5a3; }
.enc-chip.root small { color: #4a4636; }
.enc-bass { font-size: .8rem; color: #8ab4ff; margin-left: 6px; }
.enc-shapes { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; }
.enc-shape { margin: 0; flex: 0 0 auto; width: 150px; text-align: center; background: #14131f; border: 1px solid rgba(201,169,89,.18); border-radius: 12px; padding: 8px 6px 6px; scroll-snap-align: start; }
.enc-shape svg { width: 100%; height: auto; display: block; }
.enc-shape figcaption { font-size: .78rem; color: #b5b0a8; line-height: 1.3; }
.enc-shape figcaption b { display: block; color: #e8d5a3; font-size: .95rem; letter-spacing: 1px; }
.enc-hint { font-size: .75rem; color: #8d879a; margin: 4px 0 0; }
.enc-shape .g { stroke: #5d586b; stroke-width: 1.2; }
.enc-shape .nut { fill: #e8d5a3; }
.enc-shape .fn { fill: #8d879a; font-size: 10px; }
.enc-shape .mu { fill: #ff6b6b; font-size: 14px; font-weight: 700; }
.enc-shape .op { fill: none; stroke: #e8d5a3; stroke-width: 1.6; }
.enc-shape .bar { fill: rgba(232,213,163,.28); }
.enc-shape .dn { fill: #e08a3c; } .enc-shape .dr { fill: #c9a959; stroke: #fff; stroke-width: 1; } .enc-shape .db { fill: #4a90d9; }
.enc-shape .dt { fill: #0e0d1a; font-size: 10px; font-weight: 700; }
.enc-table { width: 100%; font-size: .85rem; color: #e4dfd7; }
.enc-table th { color: #e8d5a3; text-align: left; padding: 6px 10px; }
.enc-table td { padding: 6px 10px; border-top: 1px solid rgba(201,169,89,.12); vertical-align: top; }
.dot-leg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 2px; }