/* cristal.css — Lámina IV: el reloj cromático y las escalas simétricas. */

.cristal {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
  margin-top: 24px;
}
@media (max-width: 820px) { .cristal { grid-template-columns: 1fr; gap: 26px; } }

.cristal__clock { display: flex; justify-content: center; }
.clock { width: 100%; max-width: 360px; height: auto; overflow: visible; }
.clock__base { fill: none; stroke: var(--line); stroke-width: 1; }
.clock__tick { fill: var(--line); }
.clock__shape { transition: transform var(--d-5) var(--ease); }
.clock__poly {
  fill: color-mix(in srgb, var(--flow) 12%, transparent);
  stroke: var(--flow); stroke-width: 1.5; stroke-linejoin: round;
}
.clock__node { stroke: var(--paper); stroke-width: 1.5; fill: var(--pc, var(--live)); }
.clock__label { font-family: var(--font-mono); font-size: 13px; fill: var(--ink-dim); }

/* — Hélice (ciclos por 4ªs/5ªs) — */
.helix { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.helix__ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.helix__spiral { fill: none; stroke: var(--flow); stroke-width: 1.5; stroke-linejoin: round; opacity: 0.7; }
.helix__node { stroke: var(--paper); stroke-width: 1.5; fill: var(--pc, var(--live)); }
.helix__node.is-start { stroke: var(--live); stroke-width: 2.5; }
.helix__label { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-dim); }

.cristal__name { font-family: var(--font-display); font-weight: 300; font-size: var(--t-1); margin: 0 0 10px; }
.cristal__notes { font-size: var(--t-0); color: var(--ink); margin: 0 0 14px; letter-spacing: 0.04em; }
.cristal__genera { font-size: var(--t--1); color: var(--ink-dim); font-style: italic; max-width: 56ch; margin: 0 0 14px; }
.cristal__transp { font-size: var(--t--2); color: var(--ink-dim); margin: 0 0 18px; }
.cristal__transp b { color: var(--flow-text); font-size: var(--t--1); }
.cristal__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }