/* tension.css — Lámina III: dominantes secundarias, resoluciones y cadencias. */

.sect { font-family: var(--font-display); font-weight: 300; font-size: var(--t-1); margin: 8px 0 18px; }
.sect small { font-size: var(--t--1); font-style: italic; }

/* — Dominantes secundarias — */
.sd { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sdcard {
  border: 1px solid var(--line); border-top: 3px solid var(--fn-d); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--paper-sunk);
}
.sdcard__label { font-size: var(--t--2); color: var(--ink-dim); letter-spacing: 0.06em; }
.sdcard__play {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--t--1); color: var(--ink);
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.sdcard__play:hover { border-color: var(--fn-d); background: color-mix(in srgb, var(--fn-d) 8%, var(--paper)); }
.sdcard__sub {
  background: none; border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 5px; font-size: var(--t--2); color: var(--ink-dim);
  transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.sdcard__sub:hover { color: var(--flow); border-color: var(--flow); }
.arrow { color: var(--live); }

/* — Tarjeta de resolución — */
.resol { min-height: 56px; margin: 22px 0 6px; }
.resol__hint { font-style: italic; font-size: var(--t--1); }
.resolcard {
  border-left: 3px solid var(--live); padding: 12px 18px; background: var(--paper-sunk);
  border-radius: var(--radius); animation: inkwipe var(--d-3) var(--ease);
}
.resolcard__head { font-size: var(--t-1); margin-bottom: 6px; }
.resolcard__body { font-size: var(--t--1); color: var(--ink-dim); max-width: 64ch; margin: 0; }
.resolcard__body b.up { color: var(--bright-text); }
.resolcard__body b.down { color: var(--dark-text); }
.resolcard__body em { color: var(--ink); }
.resolcard__demo { display: flex; align-items: flex-end; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.resolcard__voz {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 14px; font-size: var(--t--1); color: var(--ink); flex: 0 0 auto;
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.resolcard__voz:hover { border-color: var(--live); background: color-mix(in srgb, var(--live) 8%, var(--paper)); }
.resolcard__kb .keyboard { max-width: 300px; display: block; }

/* — Cadencias — */
.cad { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cadbtn {
  display: flex; flex-direction: column; gap: 7px; text-align: left;
  background: var(--paper-sunk); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; transition: transform var(--d-1) var(--ease), border-color var(--d-2) var(--ease);
}
.cadbtn:hover { transform: translateY(-2px); border-color: var(--live); }
.cadbtn__name { font-family: var(--font-display); font-size: var(--t-0); }
.cadbtn__chords { font-size: var(--t--1); color: var(--ink); }
.cadbtn__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t--2); color: var(--ink-dim); }
/* flex-wrap: la barra mide la fuerza (100 % = auténtica) y, sin hueco, la sensación salía de la tarjeta. */
.cadbtn__meta em { font-style: italic; }
.cadbtn__bar { height: 4px; background: var(--live); border-radius: 3px; flex: 0 0 auto; min-width: 8px; }