/* ============================================================
   El arte de la fuga
   Un solo sistema de tokens para las tres secciones.
   Lo único que cambia entre ellas es la disposición.
   ============================================================ */

@font-face {
  font-family: "Junicode";
  src: url("fonts/junicode-roman.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Junicode";
  src: url("fonts/junicode-italic.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif";
  src: url("fonts/source-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif";
  src: url("fonts/source-serif-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Cobre oxidado: la plancha grabada de 1751, no el papel crema. */
  --verdin: #22403a;
  --plate: #162925;
  --copper: #c1794a;
  --patina: #86c5ac;
  --rag: #efebdd;
  --lead: #8c948f;

  --copper-dim: color-mix(in srgb, var(--copper) 45%, var(--verdin));
  --patina-dim: color-mix(in srgb, var(--patina) 30%, var(--verdin));
  --hairline: color-mix(in srgb, var(--rag) 14%, transparent);

  --display: "Junicode", "Iowan Old Style", Georgia, serif;
  --body: "Source Serif", Georgia, serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;
  --stave: 3px; /* grosor de una voz */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--verdin);
  color: var(--rag);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:where(a) {
  color: var(--patina);
  text-decoration-color: var(--patina-dim);
  text-underline-offset: 0.2em;
}
:where(a):hover {
  color: var(--copper);
  text-decoration-color: var(--copper);
}

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 1px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- envoltorios comunes ---------- */

.wrap {
  width: min(72rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.movement {
  padding-block: clamp(5rem, 12vh, 9rem);
  position: relative;
}
.movement + .movement {
  border-top: 1px solid var(--hairline);
}

.movement__head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.movement__numeral {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: var(--copper);
  text-transform: uppercase;
  flex: none;
  padding-top: 0.35em;
}

.movement__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}
.movement__title em {
  font-style: italic;
  color: var(--patina);
}

/* ============================================================
   HERO — la exposición. Tres voces entran escalonadas.
   ============================================================ */

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  padding-block: 3rem;
}

.hero__voices {
  grid-row: 2;
  position: relative;
  width: 100%;
  height: clamp(9rem, 22vh, 15rem);
}

.hero__voice {
  position: absolute;
  left: 0;
  height: var(--stave);
  background: linear-gradient(
    90deg,
    transparent,
    var(--copper) 8%,
    var(--copper) 82%,
    transparent
  );
  transform-origin: left center;
  width: 100%;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: voice-enter 4.8s var(--ease) forwards;
}
.hero__voice:nth-child(1) {
  top: 18%;
  animation-delay: 0.3s;
}
.hero__voice:nth-child(2) {
  top: 42%;
  animation-delay: 1.5s;
  background: linear-gradient(
    90deg,
    transparent,
    var(--patina) 8%,
    var(--patina) 82%,
    transparent
  );
}
.hero__voice:nth-child(3) {
  top: 66%;
  animation-delay: 2.7s;
  background: linear-gradient(
    90deg,
    transparent,
    var(--copper-dim) 8%,
    var(--copper-dim) 82%,
    transparent
  );
}
.hero__voice:nth-child(4) {
  top: 90%;
  animation-delay: 3.9s;
  background: linear-gradient(
    90deg,
    transparent,
    var(--lead) 8%,
    var(--lead) 82%,
    transparent
  );
}

@keyframes voice-enter {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  12% {
    opacity: 1;
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.hero__title {
  grid-row: 2;
  align-self: center;
  justify-self: start;
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.75rem, 1rem + 8vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  mix-blend-mode: normal;
  position: relative;
  z-index: 2;
  text-wrap: balance;
}
.hero__title span {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.3em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lead);
  margin-top: 1.5rem;
  font-family: var(--mono);
}

.hero__foot {
  grid-row: 3;
  align-self: end;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lead);
}

.hero__scroll {
  writing-mode: vertical-rl;
  animation: nudge 2.6s var(--ease) infinite;
}
@keyframes nudge {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(0.5rem);
    opacity: 1;
  }
}

/* ============================================================
   I — CONTRAPUNTO VISIBLE
   Cada obra es una línea. La línea es la voz.
   ============================================================ */

.stave {
  list-style: none;
  margin: 0;
  padding: 0;
}

.work {
  position: relative;
  border-top: 1px solid var(--hairline);
  padding-block: clamp(1.5rem, 3vh, 2.25rem);
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  transition: background-color 0.4s var(--ease);
}
.work:last-child {
  border-bottom: 1px solid var(--hairline);
}
.work:hover,
.work.is-playing {
  background: color-mix(in srgb, var(--plate) 70%, transparent);
}

.work__year {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--lead);
  font-feature-settings: "tnum";
  align-self: start;
  padding-top: 0.5rem;
}
.work.is-playing .work__year {
  color: var(--copper);
}

.work__ident {
  min-width: 0;
}

.work__composer {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lead);
  margin: 0 0 0.35rem;
}

.work__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.005em;
}
.work__title em {
  font-style: italic;
}

.work__cat {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--copper-dim);
  margin-top: 0.4rem;
  font-feature-settings: "tnum";
}

.work__time {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--lead);
  font-feature-settings: "tnum";
  align-self: start;
  padding-top: 0.5rem;
}

/* la línea: N voces apiladas, con las entradas del sujeto marcadas */
.work__line {
  grid-column: 1 / -1;
  margin-top: 1.25rem;
  position: relative;
  height: calc(var(--voices, 3) * 7px);
}

.voice {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--stave);
  background: var(--copper-dim);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease);
}
.work.is-visible .voice {
  clip-path: inset(0 0 0 0);
  transition-delay: calc(var(--i) * 0.22s);
}
.voice:nth-child(odd) {
  background: var(--patina-dim);
}

/* marca de entrada del sujeto */
.entry {
  position: absolute;
  width: 2px;
  height: 11px;
  background: var(--copper);
  top: -4px;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.work.is-visible .entry {
  opacity: 1;
  transition-delay: calc(var(--i) * 0.22s + 0.5s);
}

/* la fuga inacabada: la línea se detiene y a la derecha no hay nada */
.work--unfinished .voice {
  right: 46%;
}
.work--unfinished .work__line::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 54%;
  right: 0;
}
.work--unfinished .work__title {
  color: var(--copper);
}

.unfinished-note {
  grid-column: 2 / -1;
  margin-top: 1.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lead);
  max-width: 26rem;
  line-height: 1.9;
}

/* cabezal de reproducción sobre la línea */
.playhead {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 1px;
  background: var(--rag);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--rag) 50%, transparent);
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.work.is-playing .playhead {
  opacity: 1;
}

/* ============================================================
   II — REJILLA
   Después de Bach la fuga es un objeto que otros manipulan.
   La tarjeta dice "museo".
   ============================================================ */

.vitrine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.case {
  background: var(--verdin);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 17rem;
  position: relative;
  transition: background-color 0.4s var(--ease);
}
.case:hover,
.case.is-playing {
  background: var(--plate);
}

.case__rule {
  height: 1px;
  background: var(--copper-dim);
  width: 2.5rem;
  transition: width 0.6s var(--ease);
}
.case:hover .case__rule,
.case.is-playing .case__rule {
  width: 100%;
  background: var(--copper);
}

.case__year {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--lead);
  font-feature-settings: "tnum";
}

.case__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.15;
  margin: 0;
}
.case__title em {
  font-style: italic;
}

.case__composer {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lead);
  margin: 0;
}

/* el motivo de la línea sobrevive dentro de la vitrina */
.case__strands {
  margin-top: auto;
  display: grid;
  gap: 4px;
}
.case__strand {
  height: 2px;
  background: var(--patina-dim);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease);
}
.case.is-visible .case__strand {
  clip-path: inset(0 0 0 0);
  transition-delay: calc(var(--i) * 0.14s);
}

/* ============================================================
   III — ESPIRAL
   El canon cangrejo, el bucle extraño.
   Lo que no puedo alojar sale despedido hacia su enlace.
   ============================================================ */

.spiral {
  position: relative;
  width: min(100%, 60rem);
  margin-inline: auto;
  aspect-ratio: 1;
}

.spiral__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.spiral__curve {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1;
}

.spiral__ray {
  stroke: var(--copper-dim);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.node {
  position: absolute;
  translate: -50% -50%;
  width: max-content;
  max-width: 11rem;
}

.node__dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--patina);
  margin-bottom: 0.5rem;
  transition:
    transform 0.4s var(--ease),
    background-color 0.4s var(--ease);
}
.node--link .node__dot {
  background: transparent;
  border: 1px solid var(--copper);
}
.node:hover .node__dot,
.node.is-playing .node__dot {
  transform: scale(1.8);
  background: var(--copper);
}

.node__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lead);
  line-height: 1.5;
  display: block;
  text-decoration: none;
}
.node__label strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rag);
  margin-top: 0.2rem;
}
.node:hover .node__label strong {
  color: var(--copper);
}

/* nodos fuera de la música: sin punto, solo texto en cursiva */
.node--field .node__dot {
  background: none;
  border: 1px dashed var(--lead);
}
.node--field .node__label strong {
  font-style: italic;
  color: var(--patina);
}

/* ============================================================
   Ensayo — plegado por defecto. Sin texto introductorio.
   ============================================================ */

.more {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.more + .more {
  border-top: none;
}

.more__summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lead);
  transition: color 0.3s var(--ease);
}
.more__summary::-webkit-details-marker {
  display: none;
}
.more__summary:hover {
  color: var(--copper);
}
.more__summary::before {
  content: "+";
  font-size: 1rem;
  line-height: 1;
  color: var(--copper);
  flex: none;
}
.more[open] .more__summary::before {
  content: "–";
}
.more[open] .more__summary {
  color: var(--rag);
}

.more__body {
  max-width: var(--measure);
  padding-bottom: 3rem;
  animation: unfold 0.6s var(--ease);
}
@keyframes unfold {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}
.more__body p {
  margin: 0 0 1.25em;
}
.more__body p:last-child {
  margin-bottom: 0;
}
.more__body h3 {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--patina);
  margin: 2.25em 0 0.75em;
}
.more__body .lead {
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--rag);
}

/* ============================================================
   Botón final + barra de reproducción
   ============================================================ */

.finale {
  padding-block: clamp(6rem, 16vh, 11rem);
  text-align: center;
  border-top: 1px solid var(--hairline);
}

.listen {
  appearance: none;
  border: 1px solid var(--copper);
  background: transparent;
  color: var(--copper);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.25rem 2.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease);
}
.listen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.listen:hover::before {
  transform: scaleX(1);
}
.listen:hover {
  color: var(--plate);
}
.listen span {
  position: relative;
  z-index: 1;
}

.finale__meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lead);
  margin-top: 1.75rem;
}

.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--plate) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--copper-dim);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
}
.bar.is-open {
  transform: translateY(0);
}

.bar__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-block: 0.9rem;
}

.bar__btn {
  appearance: none;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--rag);
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.bar__btn:hover {
  border-color: var(--copper);
  color: var(--copper);
}
.bar__btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.bar__now {
  min-width: 0;
  flex: 1;
}
.bar__now-title {
  font-family: var(--display);
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar__now-composer {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lead);
}

.bar__progress {
  flex: 2;
  height: 1px;
  background: var(--hairline);
  position: relative;
  cursor: pointer;
}
.bar__progress-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0;
  background: var(--copper);
}
.bar__progress::after {
  content: "";
  position: absolute;
  inset-block: -10px;
  inset-inline: 0;
}

.bar__time {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--lead);
  font-feature-settings: "tnum";
  flex: none;
}

/* cuando la playlist llega a una obra que solo puedo enlazar */
.bar.is-elsewhere {
  border-top-color: var(--copper);
}
.bar__elsewhere {
  display: none;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  align-items: center;
  gap: 1rem;
  flex: none;
}
.bar.is-elsewhere .bar__elsewhere {
  display: flex;
}
.bar.is-elsewhere .bar__progress,
.bar.is-elsewhere .bar__time {
  opacity: 0.25;
}

/* ---------- pie ---------- */

.colophon {
  padding-block: 4rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--lead);
  padding-bottom: 8rem;
}
.colophon a {
  color: var(--lead);
}
.colophon a:hover {
  color: var(--copper);
}

/* ============================================================
   Modo edición — numeración de referencia (tecla "e" o #edit)
   Invisible en la página pública.
   ============================================================ */

.ref-badge {
  display: none;
  position: absolute;
  z-index: 30;
  top: 0.35rem;
  left: 0.35rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.28em 0.5em;
  color: var(--plate);
  background: var(--copper);
  border-radius: 2px;
  pointer-events: none;
}
.movement__head,
.work,
.case,
.node,
.more {
  position: relative;
}
.case .ref-badge {
  left: auto;
  right: 0.35rem;
}
.node .ref-badge {
  top: -1.4rem;
  left: -0.3rem;
}
.more .ref-badge {
  top: 1.15rem;
  left: auto;
  right: 0;
}

body.editing .ref-badge {
  display: inline-block;
}
body.editing .work,
body.editing .case,
body.editing .node,
body.editing .more {
  outline: 1px dashed var(--copper-dim);
  outline-offset: 2px;
}
body.editing::after {
  content: "modo edición · pulsa «e» para salir";
  position: fixed;
  z-index: 40;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  background: color-mix(in srgb, var(--plate) 92%, transparent);
  padding: 0.5em 1em;
  border: 1px solid var(--copper-dim);
  pointer-events: none;
}

/* ---------- responsive ---------- */

@media (max-width: 46rem) {
  .work {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }
  .work__time {
    grid-column: 1;
    grid-row: 2;
    padding-top: 0;
  }
  .hero__title span {
    margin-top: 1rem;
  }
  .spiral {
    aspect-ratio: 0.72;
  }
  .bar__now {
    flex: 3;
  }
  .bar__progress {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__voice {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  .voice,
  .case__strand {
    clip-path: inset(0 0 0 0);
  }
  .entry {
    opacity: 1;
  }
}

/* ============================================================
   AMPLIACIÓN — marca Fugy, burbujas, descargas, slides, vídeo
   Misma paleta (cobre oxidado sobre verdín). Añadido, no sustituye.
   ============================================================ */

/* ---------- Fugy · marca + menú arriba a la izquierda ---------- */
.fugy {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.25rem);
  left: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 40;
}
.fugy__btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  appearance: none;
  background: color-mix(in srgb, var(--plate) 80%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: var(--stave);
  padding: 0.4rem 0.7rem 0.4rem 0.45rem;
  cursor: pointer;
  color: var(--copper);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.fugy__btn:hover { border-color: var(--copper); }
.fugy__mark { width: 30px; height: 30px; display: block; overflow: visible;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--copper) 45%, transparent)); }
.fm-staff { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: 0.35; }
.fm-tail  { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.fm-head  { fill: currentColor; }
.fm-punctus { fill: none; stroke: currentColor; stroke-width: 1.5; }
.fm-voice { transform-box: view-box; transform-origin: 12px 12px; animation: fugy-chase 7s linear infinite; }
.fm-vB { animation-delay: -2.92s; }
@keyframes fugy-chase { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.fugy__word {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--rag);
  letter-spacing: 0.01em;
}
.fugy__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--plate) 94%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--copper-dim);
  padding: 0.4rem;
  animation: unfold 0.35s var(--ease);
}
.fugy__menu[hidden] { display: none; }
.fugy__link {
  appearance: none;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lead);
  text-decoration: none;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.fugy__link:hover { color: var(--copper); background: color-mix(in srgb, var(--copper) 12%, transparent); }

/* ---------- artículo en profundidad (dialog) ---------- */
.deep {
  width: min(46rem, 92vw);
  max-height: 88vh;
  border: 1px solid var(--copper-dim);
  background: var(--plate);
  color: var(--rag);
  padding: 0;
  overflow: auto;
}
.deep::backdrop { background: color-mix(in srgb, #000 62%, transparent); backdrop-filter: blur(3px); }
.deep__body { padding: clamp(1.75rem, 5vw, 3.5rem); max-width: var(--measure); }
.deep__close {
  position: sticky; top: 0; float: right;
  margin: 0.75rem 0.75rem -2.5rem 0;
  appearance: none; background: none; border: 1px solid var(--hairline);
  color: var(--lead); width: 2.1rem; height: 2.1rem; border-radius: 50%;
  cursor: pointer; font-size: 0.9rem; z-index: 2;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.deep__close:hover { border-color: var(--copper); color: var(--copper); }
.deep__kicker {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--copper); margin: 0 0 0.75rem;
}
.deep__title {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.1; margin: 0 0 1.5rem;
}
.deep__body .lead {
  font-family: var(--display); font-size: 1.3rem; line-height: 1.45; color: var(--rag); margin: 0 0 1.5em;
}
.deep__body p { margin: 0 0 1.2em; }
.deep__body h3 {
  font-family: var(--display); font-weight: 400; font-style: italic; font-size: 1.25rem;
  color: var(--patina); margin: 2em 0 0.6em;
}

/* botón «ver más» que abre el artículo */
.deepmore {
  appearance: none; background: none; border: 0;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--copper); cursor: pointer; padding: 1.5rem 0 0; margin-top: 1rem;
  border-top: 1px solid var(--hairline); width: 100%; text-align: left;
  transition: color 0.3s var(--ease);
}
.deepmore:hover { color: var(--rag); }

/* ---------- I · campo de burbujas ---------- */
.songfield__hint {
  max-width: var(--measure);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--lead);
  line-height: 1.8;
  margin: 0 0 1.75rem;
}
.songfield {
  position: relative;
  height: clamp(380px, 62vh, 580px);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--plate) 60%, transparent), transparent 70%),
    color-mix(in srgb, var(--plate) 35%, transparent);
  overflow: hidden;
  touch-action: manipulation;
}
.songfield__sparks {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.song {
  position: absolute;
  left: 0; top: 0;
  width: var(--d, 120px); height: var(--d, 120px);
  margin-left: calc(var(--d, 120px) / -2);
  margin-top: calc(var(--d, 120px) / -2);
  border-radius: 50%;
  border: 1px solid var(--copper-dim);
  background: radial-gradient(120% 120% at 35% 28%,
    color-mix(in srgb, var(--plate) 88%, var(--copper) 12%),
    color-mix(in srgb, var(--verdin) 92%, #000) 82%);
  color: var(--rag);
  display: grid;
  place-content: center;
  text-align: center;
  padding: calc(var(--d, 120px) * 0.08);
  cursor: pointer;
  will-change: transform;
  transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.song:hover { border-color: var(--copper); }
.song:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.song__title {
  font-family: var(--display); font-size: clamp(0.5rem, calc(var(--d, 120px) * 0.11), 1rem);
  line-height: 1.12; margin: 0;
}
.song__cat {
  font-family: var(--mono); font-size: clamp(0.42rem, calc(var(--d, 120px) * 0.058), 0.56rem);
  letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--lead); margin-top: calc(var(--d, 120px) * 0.02);
}
.song.is-playing {
  border-color: var(--copper);
  box-shadow: 0 0 0 1px var(--copper), 0 0 26px 2px color-mix(in srgb, var(--copper) 40%, transparent);
}
.song--unfinished { border-style: dashed; }

/* la lista original queda como datos + respaldo accesible, oculta a la vista */
.stave--data {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; padding: 0; margin: -1px; border: 0;
}

/* ---------- enlaces «ver más» (grabaciones no descargables) ---------- */
.linked { margin-top: 2.5rem; max-width: var(--measure); }
.linked__toggle {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lead); padding: 0; display: flex; align-items: center; gap: 0.6rem;
  transition: color 0.3s var(--ease);
}
.linked__toggle::before { content: "+"; color: var(--copper); font-size: 1rem; }
.linked__toggle[aria-expanded="true"]::before { content: "–"; }
.linked__toggle:hover { color: var(--copper); }
.linked__list { list-style: none; margin: 1.25rem 0 0; padding: 0; animation: unfold 0.5s var(--ease); }
.linked__list[hidden] { display: none; }
.linked__list li { border-top: 1px solid var(--hairline); }
.linked__list li:last-child { border-bottom: 1px solid var(--hairline); }
.linked__list a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem;
  padding: 0.9rem 0; text-decoration: none;
}
.linked__work { font-family: var(--display); font-size: 1.05rem; color: var(--rag); }
.linked__list a:hover .linked__work { color: var(--copper); }
.linked__why {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lead); margin-left: auto;
}
.linked__note { font-family: var(--mono); font-size: 0.64rem; color: var(--lead); line-height: 1.9; margin-top: 1.25rem; }

/* ---------- slides por sección ---------- */
.slides { margin-top: 3rem; }
.slides__track {
  display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory;
  background: var(--hairline); border: 1px solid var(--hairline);
  scrollbar-width: thin;
}
.slide {
  scroll-snap-align: start; flex: 0 0 min(22rem, 80%);
  margin: 0; background: var(--verdin);
  display: flex; flex-direction: column;
}
.slide figcaption {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--lead); padding: 0.85rem 1rem; line-height: 1.6;
}
.slide--graphic { background: var(--plate); }
.slide__diagram { width: 100%; height: 12rem; padding: 1rem; }
.slide--photo { min-height: 12rem; position: relative; }
.slide--photo::before {
  content: ""; flex: 1; margin: 1rem 1rem 0;
  border: 1px dashed var(--copper-dim);
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
}
/* diagramas: trazos cobre/pátina */
.dg-line { stroke: var(--copper-dim); stroke-width: 2; }
.dg-line--2 { stroke: var(--patina-dim); }
.dg-line--3 { stroke: var(--copper-dim); }
.dg-entry rect { fill: var(--copper); }
.dg-frame { fill: none; stroke: var(--copper-dim); stroke-width: 1.5; }
.dg-spiral { fill: none; stroke: var(--patina-dim); stroke-width: 1.5; }

/* ---------- vídeo del contrapunto ---------- */
.video { margin: 2em 0; max-width: 100%; }
.video__el { width: 100%; display: block; border: 1px solid var(--copper-dim); background: #000; aspect-ratio: 16/9; }
.video figcaption {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--lead);
  line-height: 1.8; margin-top: 0.75rem;
}
.video code { color: var(--copper); }

/* ---------- descargas ---------- */
.downloads { padding-block: clamp(3rem, 8vh, 6rem); border-top: 1px solid var(--hairline); }
.downloads__list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.downloads__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--hairline);
}
.downloads__item:last-child { border-bottom: 1px solid var(--hairline); }
.downloads__name { font-family: var(--display); font-size: 1.1rem; }
.downloads__name small { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--lead); margin-left: 0.5rem; }
.downloads__btn {
  flex: none; text-decoration: none;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper); border: 1px solid var(--copper-dim); padding: 0.6rem 1rem;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.downloads__btn span { opacity: 0.6; }
.downloads__btn:hover { background: var(--copper); color: var(--plate); border-color: var(--copper); }
.downloads__all {
  appearance: none; cursor: pointer;
  border: 1px solid var(--copper); background: transparent; color: var(--copper);
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 1.15rem 2.5rem; transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.downloads__all:hover { background: var(--copper); color: var(--plate); }
.downloads__meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--lead);
  margin-top: 1.5rem; line-height: 1.9; }

/* ---------- botón de descarga en la barra ---------- */
.bar__dl { text-decoration: none; }
.bar__dl svg { width: 13px; height: 13px; fill: none; }

@media (max-width: 46rem) {
  .fugy__word { display: none; }
  .songfield { height: clamp(320px, 70vh, 460px); }
  .downloads__item { flex-wrap: wrap; }
}

/* ============================================================
   AJUSTE 2 — más luminoso + burbujas mayores, música visual
   Sube la luz de la plancha; ilumina el campo y las burbujas.
   ============================================================ */
:root {
  --verdin: #2c4f47;   /* + luz que el #22403a original */
  --plate:  #244842;
  --patina: #9fd6bd;
  --rag:    #f4f1e6;
  --glow:   #e7b587;   /* cobre claro para brillos */
}
body {
  background:
    radial-gradient(1200px 720px at 50% -10%, color-mix(in srgb, var(--patina) 12%, transparent), transparent 60%),
    var(--verdin);
  background-attachment: fixed;
}

/* campo de burbujas: luminoso, no negro */
.songfield {
  background:
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--patina) 20%, transparent), transparent 68%),
    radial-gradient(90% 90% at 80% 100%, color-mix(in srgb, var(--copper) 12%, transparent), transparent 60%),
    color-mix(in srgb, var(--verdin) 82%, var(--rag));
  border-color: color-mix(in srgb, var(--copper) 40%, var(--hairline));
}

/* burbujas: mayores (JS sube el diámetro) y con borde OBVIO */
.song {
  border: 2.5px solid var(--copper);
  background: radial-gradient(130% 130% at 34% 26%,
    color-mix(in srgb, var(--rag) 22%, var(--plate)),
    color-mix(in srgb, var(--verdin) 78%, var(--copper) 8%) 84%);
  box-shadow: 0 6px 22px color-mix(in srgb, #000 30%, transparent),
              inset 0 1px 0 color-mix(in srgb, var(--rag) 22%, transparent);
  transition: transform 0.18s var(--ease), border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.song__title { color: var(--rag); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.song:hover { border-color: var(--glow); }
.song.is-playing {
  border-color: var(--glow);
  box-shadow: 0 0 0 2px var(--glow),
              0 0 34px 4px color-mix(in srgb, var(--glow) 55%, transparent);
}
.song--unfinished { border-style: dashed; }

/* golpe (colisión o clic): destello de color + latido */
.song.is-hit {
  border-color: var(--patina);
  box-shadow: 0 0 0 2px var(--patina),
              0 0 40px 6px color-mix(in srgb, var(--patina) 50%, transparent);
}
.song.is-clicked { animation: song-pop 0.5s var(--ease); }
@keyframes song-pop {
  0%   { transform: translate(var(--tx,0), var(--ty,0)) scale(1); }
  35%  { transform: translate(var(--tx,0), var(--ty,0)) scale(1.14); }
  100% { transform: translate(var(--tx,0), var(--ty,0)) scale(1); }
}

/* la barra y paneles, un punto más claros */
.bar { background: color-mix(in srgb, var(--plate) 88%, var(--rag) 4%); }

/* ============================================================
   AJUSTE 2b — marcas-dispositivo por sección, doble columna, play
   ============================================================ */

/* marcas Fugy en las cabeceras de cada sección */
.movement__head { align-items: center; }
.mvt-mark { width: 34px; height: 34px; flex: none; color: var(--copper); display: block; overflow: visible;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--copper) 35%, transparent)); }
.mvt-mark .g { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mvt-mark .ln { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.4; }
.mvt-mark .pt { fill: none; stroke: currentColor; stroke-width: 1.5; }
.mvt-mark .hd { fill: currentColor; }
.mvt-mark .void { stroke-dasharray: 1.6 1.9; opacity: 0.55; }
.mk-subject .pt { transform-box: fill-box; transform-origin: center; animation: mk-bloom 2.8s ease-in-out infinite; }
@keyframes mk-bloom { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.35); opacity: 1; } }
.mk-inversion .refl { transform-box: view-box; transform-origin: 12px 12px; animation: mk-refl 5s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes mk-refl { 0%,38% { transform: scaleY(1); } 62%,100% { transform: scaleY(-1); } }
.mk-canon .spin { transform-box: view-box; transform-origin: 12px 12px; animation: mk-spin 6s linear infinite; }
@keyframes mk-spin { to { transform: rotate(360deg); } }
.mk-counterpoint .cross { transform-box: view-box; transform-origin: 12px 12px; animation: mk-cross 3.4s ease-in-out infinite; }
@keyframes mk-cross { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(0.68); } }
.mk-unfinished .void { animation: mk-flick 2.6s steps(1,end) infinite; }
@keyframes mk-flick { 0%,60% { opacity: 0.55; } 66%,74% { opacity: 0; } 80%,100% { opacity: 0.55; } }

/* finale: la marca inacabada */
.finale__mark { width: 30px; height: 30px; margin: 0 auto 1.5rem; color: var(--copper); display: block; }

/* doble columna: imagen | vídeo, por sección */
.media2 {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.media2 figure { margin: 0; background: var(--verdin); display: flex; flex-direction: column; min-height: 13rem; }
.media2 figcaption { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--lead);
  padding: 0.8rem 1rem; line-height: 1.6; }
.media2 .m-img::before {
  content: ""; flex: 1; margin: 1rem 1rem 0;
  border: 1px dashed var(--copper-dim);
  background-image: var(--photo, none); background-size: cover; background-position: center;
}
.media2 .m-vid { padding: 0; }
.media2 video { width: 100%; flex: 1; min-height: 11rem; background: #0c1512; object-fit: cover; display: block; }
@media (max-width: 46rem) { .media2 { grid-template-columns: 1fr; } }

/* descargas: reproducir directo ANTES, luego descargar */
.downloads__actions { display: flex; gap: 0.5rem; flex: none; align-items: center; flex-wrap: wrap; }
.downloads__play {
  appearance: none; cursor: pointer; background: none; border: 1px solid var(--hairline); color: var(--rag);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.6rem 1rem; transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.downloads__play:hover { border-color: var(--copper); color: var(--copper); }
.downloads__play.is-playing { border-color: var(--glow); color: var(--glow); }

/* ============================================================
   TEMA CLARO — luminoso, no negro. Texto de alto contraste,
   acentos cobre/verdigrís, animaciones mayores. (Capa final: gana.)
   ============================================================ */
:root {
  --verdin: #f5f0e4;   /* papel cálido: el fondo ahora es LUZ */
  --plate:  #ece5d4;   /* paneles, un punto más hondos */
  --rag:    #232d29;   /* tinta: texto oscuro (no negro puro), muy visible */
  --lead:   #55605a;   /* secundario, con contraste real */
  --copper: #a9521f;   /* cobre intenso sobre papel */
  --patina: #2c6e5b;   /* verdigrís hondo */
  --copper-dim: #b0713f;
  --patina-dim: #5a9a86;
  --hairline: rgba(35,45,41,0.14);
  --glow: #c06a2a;
  --stave: 5px;        /* voces más gruesas → animación más grande */
}

body {
  color: var(--rag);
  background:
    radial-gradient(1200px 760px at 50% -12%, rgba(44,110,91,0.10), transparent 60%),
    radial-gradient(1000px 720px at 100% 8%, rgba(169,82,31,0.08), transparent 55%),
    var(--verdin);
  background-attachment: fixed;
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.12rem); /* algo mayor = más legible */
}
:where(a) { color: var(--copper); text-decoration-color: color-mix(in srgb, var(--copper) 55%, transparent); }
:where(a):hover { color: var(--patina); text-decoration-color: var(--patina); }

/* jerarquía tipográfica más marcada y profesional */
.movement__numeral, .work__composer, .case__composer, .node__label,
.finale__meta, .downloads__name small, .hero__foot, .hero__title span,
.colophon, .more__summary, .linked__why, .bar__now-composer {
  color: var(--lead);
}
.movement__title, .work__title, .case__title, .deep__title, .downloads__name {
  color: var(--rag);
}
.movement__title em, .work__title em, .case__title em, .deep__title { color: var(--patina); }

/* HERO — voces más grandes y luminosas */
.hero__voices { height: clamp(11rem, 26vh, 18rem); }
.hero__title { font-weight: 400; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }

/* campo de burbujas: luz cálida, nada de negro */
.songfield {
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(44,110,91,0.14), transparent 66%),
    radial-gradient(90% 90% at 82% 100%, rgba(169,82,31,0.12), transparent 60%),
    #efe8d7;
  border: 1px solid color-mix(in srgb, var(--copper) 35%, var(--hairline));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.songfield__hint { color: var(--lead); }

/* burbujas: tarjetas claras, borde cobre grueso, texto oscuro visible */
.song {
  border: 3px solid var(--copper);
  background: radial-gradient(135% 135% at 34% 26%, #fffdf7, #f0e8d6 82%);
  box-shadow: 0 8px 24px rgba(35,45,41,0.14), inset 0 1px 0 rgba(255,255,255,0.7);
}
.song__title { color: var(--rag); text-shadow: none; }
.song__cat { color: var(--lead); }
.song:hover { border-color: var(--glow); box-shadow: 0 10px 28px rgba(35,45,41,0.2); }
.song.is-playing {
  border-color: var(--glow);
  box-shadow: 0 0 0 3px var(--glow), 0 0 40px 6px rgba(192,106,42,0.4), 0 8px 24px rgba(35,45,41,0.18);
}
.song.is-hit {
  border-color: var(--patina);
  box-shadow: 0 0 0 3px var(--patina), 0 0 44px 8px rgba(44,110,91,0.35), 0 8px 24px rgba(35,45,41,0.18);
}

/* marcas más grandes en cabeceras + hero + finale */
.mvt-mark { width: 46px; height: 46px; }
.finale__mark { width: 42px; height: 42px; }
.fugy__mark { width: 38px; height: 38px; }
.fugy__word { color: var(--rag); }
.fugy__btn { background: color-mix(in srgb, #fffdf7 78%, transparent); border-color: color-mix(in srgb, var(--copper) 30%, var(--hairline)); }

/* barra de reproducción clara */
.bar {
  background: color-mix(in srgb, #fffdf7 90%, var(--patina) 3%);
  border-top: 1px solid var(--copper);
  box-shadow: 0 -6px 24px rgba(35,45,41,0.1);
}
.bar__btn { border-color: color-mix(in srgb, var(--copper) 30%, var(--hairline)); color: var(--rag); }
.bar__now-title { color: var(--rag); }

/* diálogo del artículo, claro */
.deep { background: #fbf7ec; border-color: var(--copper); box-shadow: 0 24px 60px rgba(35,45,41,0.28); }
.deep::backdrop { background: rgba(35,45,41,0.4); }

/* slides / doble columna: fondos claros */
.slide, .media2 figure { background: #f1ead9; }
.slide--graphic { background: #ece5d4; }
.media2 video, .video__el { background: #e6dfce; }

/* botones de descarga y play, contraste alto */
.downloads__btn { color: var(--copper); border-color: color-mix(in srgb, var(--copper) 55%, transparent); }
.downloads__btn:hover { background: var(--copper); color: #fff; }
.downloads__all { color: var(--copper); border-color: var(--copper); }
.downloads__all:hover { background: var(--copper); color: #fff; }
.downloads__play { color: var(--rag); border-color: color-mix(in srgb, var(--copper) 30%, var(--hairline)); }
.listen { color: var(--copper); border-color: var(--copper); }
.listen:hover { color: #fff; }

/* la línea inacabada del hero y las voces: más presencia */
.work:hover, .work.is-playing { background: color-mix(in srgb, var(--copper) 8%, transparent); }

/* más espacio para las burbujas */
.songfield { height: clamp(460px, 76vh, 760px); }
@media (max-width: 46rem) { .songfield { height: clamp(380px, 72vh, 560px); } }

/* ============================================================
   DIRECCIÓN — "la plancha y su pátina"
   Verde = la tinta grabada (silencio, archivo). Cobre = lo que SUENA.
   El pentagrama es la espina de la página. (Capa final: gana.)
   ============================================================ */
:root {
  --verdin: #e9ece1;              /* papel con fondo verde, no crema */
  --plate:  #dfe3d5;
  --rag:    #1c3b33;              /* tinta verdigrís: texto oscuro y legible */
  --lead:   #4c5a52;
  --patina: #2c6e5b;             /* verdigrís = acento PRIMARIO (grabado) */
  --patina-dim: #5f9384;
  --copper: #b0561f;             /* cobre = solo LO QUE SUENA */
  --copper-dim: #c98a5e;
  --hairline: rgba(28,59,51,0.14);
  --rule: rgba(28,59,51,0.22);
  --glow: #c4671f;
}
body {
  color: var(--rag);
  background:
    radial-gradient(1200px 760px at 50% -12%, rgba(44,110,91,0.10), transparent 62%),
    radial-gradient(1000px 720px at 100% 6%, rgba(176,86,31,0.06), transparent 55%),
    var(--verdin);
  background-attachment: fixed;
}

/* el verde es la tinta: enlaces, numerales, marcas, títulos em */
:where(a) { color: var(--patina); text-decoration-color: color-mix(in srgb, var(--patina) 45%, transparent); }
:where(a):hover { color: var(--copper); text-decoration-color: var(--copper); }
.movement__title em, .work__title em, .case__title em, .deep__title,
.node--field .node__label strong { color: var(--patina); }
.mvt-mark { color: var(--patina); }               /* marcas grabadas = verde */

/* la voz de catálogo: numerales mono con un tic de cobre delante */
.movement__numeral { color: var(--patina); display: flex; align-items: center; gap: 0.6em; }
.movement__numeral::before { content: ""; width: 1.5em; height: 2px; background: var(--copper); flex: none; }

/* EL PENTAGRAMA — espina de cada sección (líneas regladas tenues) */
.movement + .movement { border-top: none; }
.movement::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 21px;
  background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 6px);
  opacity: 0.55; pointer-events: none;
}

/* HERO — la primera voz entra sonando (cobre); las respuestas, verdes */
.hero__voice:nth-child(1) { background: linear-gradient(90deg, transparent, var(--copper) 8%, var(--copper) 82%, transparent); }
.hero__voice:nth-child(2) { background: linear-gradient(90deg, transparent, var(--patina) 8%, var(--patina) 82%, transparent); }
.hero__voice:nth-child(3) { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--patina) 62%, var(--verdin)) 8%, color-mix(in srgb, var(--patina) 62%, var(--verdin)) 82%, transparent); }
.hero__voice:nth-child(4) { background: linear-gradient(90deg, transparent, var(--lead) 8%, var(--lead) 82%, transparent); }
.hero__title { text-shadow: 0 1px 0 rgba(255,255,255,0.35); }

/* CAMPO — silencioso y verde; cada voz suena en cobre */
.songfield {
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(44,110,91,0.14), transparent 66%),
    radial-gradient(92% 90% at 82% 100%, rgba(176,86,31,0.09), transparent 60%),
    #e6eadc;
  border: 1px solid color-mix(in srgb, var(--patina) 32%, var(--hairline));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.song {
  border: 2.5px solid var(--patina);           /* en silencio: grabado, verde */
  background: radial-gradient(135% 135% at 34% 26%, #fbfcf6, #e7ebdd 82%);
  box-shadow: 0 8px 22px rgba(28,59,51,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}
.song__title { color: var(--rag); text-shadow: none; }
.song__cat { color: var(--lead); }
.song:hover { border-color: var(--copper); }
.song.is-playing, .song.is-hit {                /* al sonar / al golpear: cobre */
  border-color: var(--copper);
  box-shadow: 0 0 0 3px var(--copper), 0 0 40px 6px rgba(196,103,31,0.38), 0 8px 22px rgba(28,59,51,0.16);
}

/* marcas: Fugy sigue en cobre (la app que suena); secciones en verde */
.fugy__btn { color: var(--copper); background: color-mix(in srgb, #fbfcf6 80%, transparent);
  border-color: color-mix(in srgb, var(--copper) 28%, var(--hairline)); }
.fugy__word { color: var(--rag); }

/* diagramas grabados en verde, con las entradas en cobre */
.dg-line, .dg-line--2, .dg-line--3 { stroke: var(--patina-dim); }
.dg-entry rect { fill: var(--copper); }
.dg-frame, .dg-spiral { stroke: var(--patina-dim); }

/* superficies claras y verdes */
.deep { background: #eef1e7; border-color: var(--patina); box-shadow: 0 24px 60px rgba(28,59,51,0.26); }
.deep::backdrop { background: rgba(28,59,51,0.4); }
.slide, .media2 figure { background: #e7ebdd; }
.slide--graphic { background: #dfe3d5; }
.media2 video, .video__el { background: #d8ddcd; }

/* barra: papel claro, acento de sonido en cobre */
.bar { background: color-mix(in srgb, #fbfcf6 92%, var(--patina) 3%); border-top: 1px solid var(--copper);
  box-shadow: 0 -6px 22px rgba(28,59,51,0.10); }
.bar__btn { color: var(--rag); border-color: color-mix(in srgb, var(--patina) 30%, var(--hairline)); }
.bar__btn:hover { border-color: var(--copper); color: var(--copper); }

/* CTAs = sonido = cobre */
.listen, .downloads__all { color: var(--copper); border-color: var(--copper); }
.listen:hover, .downloads__all:hover { color: #fff; }
.downloads__btn { color: var(--copper); border-color: color-mix(in srgb, var(--copper) 50%, transparent); }
.downloads__btn:hover { background: var(--copper); color: #fff; }
.downloads__play { color: var(--rag); border-color: color-mix(in srgb, var(--patina) 32%, var(--hairline)); }
.downloads__play:hover, .downloads__play.is-playing { border-color: var(--copper); color: var(--copper); }
.work:hover, .work.is-playing { background: color-mix(in srgb, var(--copper) 7%, transparent); }

/* ---------- imágenes y vídeos reales embebidos ---------- */
.fig-img { width: 100%; flex: 1; min-height: 12rem; object-fit: cover; object-position: center top; display: block; }
.fig-img--contain { object-fit: contain; background: #ece7d7; padding: 0.6rem; min-height: 10rem; }
.m-img.has-img::before, .slide--photo.has-img::before { display: none; }
.slide--photo.has-img { min-height: 0; }
.slide--photo .fig-img { min-height: 13rem; }
.media2--single { grid-template-columns: 1fr; }
.media2 figure.wide { grid-column: 1 / -1; }
.media2 .wide video { min-height: 16rem; max-height: 62vh; }
figure figcaption cite { font-style: normal; color: var(--patina); }
figure figcaption a { color: var(--patina); }

/* ============================================================
   AJUSTE 3 — vitrina con imagen+enlace, slides en columna,
   ensayos en dos columnas con gráfico juguetón, vídeo encuadrado
   ============================================================ */

/* vídeo: encuadrado, sin descuadre (poster llena sin deformar) */
.video__el { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.media2 .wide video { min-height: 0; max-height: none; }
.media2 video { min-height: 0; }

/* --- vitrina: reproductor-enlace + imagen real por tarjeta --- */
.case { justify-content: flex-start; }
.case__strands { display: none; }               /* fuera las rayas */
.case__media { margin-top: auto; display: flex; flex-direction: column; gap: 0.75rem; }
.case__img {
  width: 100%; height: 8rem; object-fit: cover; object-position: center 16%;
  border: 1px solid var(--hairline); background: var(--plate);
  filter: saturate(0.96); transition: filter 0.4s var(--ease);
}
.case:hover .case__img, .case:focus-visible .case__img { filter: saturate(1.06) contrast(1.03); }
.case__play {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--copper); border: 1px solid color-mix(in srgb, var(--copper) 45%, transparent);
  padding: 0.55rem 0.8rem; align-self: flex-start;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.case:hover .case__play { background: var(--copper); color: #fff; }
.case__src { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--lead); text-transform: none; }

/* --- slides en una sola columna (Sección II) --- */
.slides--col .slides__track { flex-direction: column; overflow: visible; gap: 1px; }
.slides--col .slide { flex: none; width: 100%; scroll-snap-align: none; }
.slides--col .slide__diagram { height: 9.5rem; }

/* --- ensayos en dos columnas, cada uno con su gráfico que invita al clic --- */
.essays {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); margin-bottom: 1.5rem;
}
.essays > .more { border: none; background: var(--verdin); }
.essays > .more + .more { border: none; }
/* apilado en una columna: cada ensayo es una fila icono | texto */
.essays--stack { grid-template-columns: 1fr; }
.essays .more__summary {
  display: flex; flex-direction: row; align-items: center; gap: 1.5rem; padding: 1.6rem 1.5rem;
  color: var(--rag);
}
/* el ensayo del contrapunto lleva su icono a la otra columna — un espejo, como una inversión */
.essays .more--flip .more__summary { flex-direction: row-reverse; }
.essays .more__txt { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; min-width: 0; }
.essays .fun { width: 150px; height: 108px; flex: none; }
.essays .more__summary::before { content: none; }        /* fuera el +/- aquí */
.essays .more__label { font-family: var(--display); font-size: 1.2rem; line-height: 1.2;
  font-style: normal; text-transform: none; letter-spacing: 0; color: var(--rag); }
.essays .more__cue { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--copper); }
.essays .more[open] .more__cue::after,
.essays .more__cue::after { content: " ↓"; }
.essays .more[open] .more__summary .more__cue::after { content: " ↑"; }
.essays .more__body { padding: 0 1.5rem 2rem; }

/* 3er bloque: la lámina recuperada — Bach + la partitura del Contrapunctus XIV */
.essays > .essays__plate { background: var(--verdin); }
.essays__plate { margin: 0; padding: 1.4rem 1.5rem 1.6rem; }
.plate__pair {
  display: grid; grid-template-columns: 5fr 7fr; gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
}
.plate__img {
  width: 100%; height: 17rem; object-fit: cover; object-position: center 28%;
  display: block; background: #ece7d7;
}
.plate__img--score { object-fit: contain; padding: 0.6rem; }
.essays__plate figcaption {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--lead); line-height: 1.6; padding-top: 0.9rem;
}
.essays__plate figcaption cite { font-style: normal; color: var(--copper); }

/* el gráfico juguetón */
.fun { width: 100%; height: 120px; display: block; overflow: visible; color: var(--patina); }
.fun .ink { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fun .fill { fill: currentColor; }
.fun .copper { color: var(--copper); }
.fun .note { transform-box: fill-box; transform-origin: center; animation: fun-bob 2.6s ease-in-out infinite; }
.fun .eye-pupil { transform-box: fill-box; transform-origin: center; animation: fun-look 3.4s ease-in-out infinite; }
.fun .loop { stroke-dasharray: 6 0; }
@keyframes fun-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes fun-look { 0%,100% { transform: translate(0,0) } 30% { transform: translate(3px,-2px) } 60% { transform: translate(-3px,1px) } }
/* al pasar el ratón: se anima más y llama a ser clicado */
.essays .more__summary:hover .fun .note { animation-duration: 0.7s; }
.essays .more__summary:hover .fun .wobble { animation: fun-wob 0.5s ease-in-out infinite; }
.fun .wobble { transform-box: fill-box; transform-origin: center; }
@keyframes fun-wob { 0%,100% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } }
.essays .more__summary { cursor: pointer; }
.essays .more__summary:hover .more__label { color: var(--copper); }

@media (max-width: 46rem) {
  .essays { grid-template-columns: 1fr; }
  .essays .more__summary,
  .essays .more--flip .more__summary { flex-direction: column; align-items: stretch; gap: 1rem; }
  .essays .fun { width: 100%; height: 120px; }
  .plate__pair { grid-template-columns: 1fr; }
  .plate__img { height: 13rem; }
  .vitrine { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .fun .note, .fun .eye-pupil, .essays .more__summary:hover .fun .wobble { animation: none !important; }
}

/* ============================================================
   AJUSTE 4 — hitos en pase automático, campo sin bordes,
   enlaces en dos columnas, teoría en cuatro gráficos,
   el bucle con flecha + slider de vídeo. (Capa final: gana.)
   ============================================================ */

/* ---------- Hitos: slideshow Bach + 3, pasa solo cada 10 s ---------- */
.events {
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.events__stage { display: grid; }
.event {
  grid-area: 1 / 1;
  max-width: 58rem;
  display: grid; grid-template-columns: 1fr minmax(0, 16rem); gap: 2.5rem; align-items: center;
  opacity: 0; visibility: hidden;
  transform: translateY(0.4rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.7s;
}
.event.is-current {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.event__text { min-width: 0; }
.event__media { margin: 0; }
.event__img {
  width: 100%; max-height: 22rem; object-fit: cover; object-position: center top;
  display: block; border: 1px solid var(--hairline);
}
@media (max-width: 46rem) {
  .event { grid-template-columns: 1fr; gap: 1.25rem; }
  .event__img { max-height: 15rem; }
}
.event__tag {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--patina); margin: 0 0 1rem;
}
.event__tag::before { content: ""; width: 1.6em; height: 2px; background: var(--patina); }
.event__tag--main { color: var(--copper); }
.event__tag--main::before { background: var(--copper); }
.event__year {
  display: block; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.24em;
  color: var(--copper); margin-bottom: 0.3rem;
}
.event__title {
  font-family: var(--display); font-weight: 400; line-height: 1.05;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -0.015em;
  margin: 0 0 0.6rem; color: var(--rag);
}
.event__title em { font-style: italic; color: var(--patina); }
.event__by {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--lead);
  margin: 0 0 1.1rem;
}
.event__note {
  font-family: var(--body); font-size: 1.05rem; line-height: 1.6; max-width: 34rem; margin: 0 0 1.25rem;
}
.event__go {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--copper); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--copper) 45%, transparent); padding-bottom: 0.2rem;
}
.event__go:hover { color: var(--patina); border-color: var(--patina); }
.events__controls { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.events__dots { display: flex; gap: 0.55rem; flex: 1; }
.events__dots button {
  appearance: none; cursor: pointer; padding: 0; border: 1px solid var(--copper);
  width: 10px; height: 10px; border-radius: 50%; background: transparent;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.events__dots button[aria-selected="true"] { background: var(--copper); transform: scale(1.15); }
.events__dots button:hover { background: color-mix(in srgb, var(--copper) 40%, transparent); }
.events__arrow {
  appearance: none; cursor: pointer; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--copper) 35%, var(--hairline));
  background: color-mix(in srgb, #fbfcf6 70%, transparent); color: var(--copper);
  font-size: 1.1rem; line-height: 1; display: grid; place-content: center;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.events__arrow:hover { background: var(--copper); color: #fff; border-color: var(--copper); }

/* ---------- Sección I: campo sin bordes, más aire ---------- */
.movement--field { padding-top: clamp(2.5rem, 7vh, 5rem); }
.songfield {
  border: 0 !important;
  box-shadow: none !important;
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(44,110,91,0.10), transparent 68%),
    radial-gradient(92% 90% at 82% 100%, rgba(176,86,31,0.07), transparent 62%),
    transparent;
  height: clamp(520px, 82vh, 880px);
}
@media (max-width: 46rem) { .songfield { height: clamp(420px, 76vh, 620px); } }

/* ---------- enlaces «ver más» en dos columnas, siempre abiertos ---------- */
.linked { max-width: none; }
.linked__head {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lead); margin: 0 0 1.25rem; display: flex; align-items: center; gap: 0.6rem;
}
.linked__head::before { content: ""; width: 1.5em; height: 2px; background: var(--copper); flex: none; }
.linked__list a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.3rem 1.5rem; padding: 1rem 0;
}
.linked__col { display: flex; flex-direction: column; gap: 0.4rem; }
.linked__listen {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--copper);
}
.linked__list a:hover .linked__listen { color: var(--patina); }
.linked__why { margin-left: 0; text-align: right; }
@media (max-width: 46rem) {
  .linked__list a { grid-template-columns: 1fr; }
  .linked__why { text-align: left; }
}

/* ---------- «Oír más»: título centrado + lista | láminas ---------- */
.hear { margin-top: 3.25rem; }
.hear__head {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lead); text-align: center; margin: 0 0 2rem;
}
.hear__cols { display: grid; grid-template-columns: 5fr 6fr; gap: 2.5rem; align-items: start; }
.hear__listcol .linked__list { margin: 0; }
.hear__listcol .linked__list a {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  gap: 0.4rem; padding: 1rem 0; text-decoration: none;
}
.hear__listcol .linked__note { margin-top: 1.25rem; }
/* el gráfico, en la columna derecha de «Oír más» */
.hear__graphic { margin: 0; display: flex; flex-direction: column; }
@media (max-width: 46rem) { .hear__cols { grid-template-columns: 1fr; gap: 1.75rem; } }

/* media en dos columnas: [partitura + vídeo apilados] | [retrato de Bach] */
.media-split { margin-top: 2.75rem; }
.media-split__stack { display: grid; gap: 1px; background: var(--hairline); }
/* play «a la primera lámina» (el gráfico): cobre = lo que suena */
.slide--graphic { position: relative; }
.hear__play {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 3; padding: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--copper); background: color-mix(in srgb, var(--rag) 78%, transparent);
  color: var(--copper); cursor: pointer; display: grid; place-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.hear__play svg { width: 0.9rem; height: 0.9rem; fill: currentColor; margin-left: 1px; }
.hear__play:hover { background: var(--copper); color: var(--rag); transform: scale(1.08); }
.hear__play:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.hear__cue { color: var(--copper); white-space: nowrap; }
/* el vídeo, como una lámina más del apilado */
.slide--video { padding: 0; }
.slide--video .video__el { width: 100%; display: block; min-height: 13rem; object-fit: cover; }
@media (max-width: 46rem) { .hear__cols { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ---------- ensayos: el eslogan bajo el título ---------- */
/* sin el +/- tampoco en abierto (gana en especificidad a .more[open]) */
.essays .more__summary::before,
.essays .more[open] .more__summary::before { content: none; }
.essays .more__slogan {
  font-family: var(--display); font-style: italic; font-size: 1.02rem; line-height: 1.45;
  color: var(--lead);
}
.essays .more[open] .more__slogan { color: var(--rag); }

/* ---------- Sección II: la caja de herramientas en cuatro gráficos ---------- */
.theory {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); margin-top: 2.25rem;
}
.theory__cell { margin: 0; background: #e7ebdd; display: flex; flex-direction: column; }
.thg { width: 100%; height: 8rem; padding: 0.9rem 0.9rem 0; display: block; }
.theory__cell figcaption {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--lead);
  line-height: 1.55; padding: 0.6rem 1rem 1rem;
}
.theory__cell figcaption b {
  display: block; font-family: var(--display); font-style: italic; font-size: 0.98rem;
  letter-spacing: 0; text-transform: none; color: var(--rag); margin-bottom: 0.3rem;
}
.thg-axis { stroke: var(--copper); stroke-width: 1.1; stroke-dasharray: 3 3; opacity: 0.6; }
.thg-a { fill: none; stroke: var(--copper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.thg-b { fill: none; stroke: var(--patina); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.thg-tick { stroke: var(--copper); stroke-width: 2.6; stroke-linecap: round; }
.thg-dot-a { fill: var(--copper); }
.thg-dot-b { fill: var(--patina); }
@media (max-width: 46rem) { .theory { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sección III: el bucle en dos voces ---------- */
.loop {
  display: grid; grid-template-columns: 0.85fr 1.35fr; gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); margin-top: 2.25rem;
}
.loop__aside {
  margin: 0; background: #dfe3d5; display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.25rem 1.35rem;
}
.loop__aside .slide__diagram { height: 8rem; padding: 0; margin-bottom: 0.75rem; }
.loop__aside figcaption {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--lead);
  line-height: 1.55; margin-bottom: auto;
}
.loop__more {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.25rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--copper); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--copper) 45%, transparent); padding: 0.6rem 0.9rem;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.loop__more:hover { background: var(--copper); color: #fff; }
.loop__arrow { font-size: 1.1rem; line-height: 1; transition: transform 0.3s var(--ease); }
.loop__more:hover .loop__arrow { transform: translateX(-4px); }
.loop__slider { position: relative; background: #d8ddcd; overflow: hidden; }
.loop__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 100%; }
.loop__track::-webkit-scrollbar { display: none; }
.loop__slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; }
.loop__slide video { width: 100%; flex: 1; min-height: 15rem; max-height: 60vh; background: #d8ddcd; object-fit: contain; display: block; }
.loop__slide figcaption {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--lead);
  line-height: 1.7; padding: 0.8rem 1rem;
}
.loop__nav {
  position: absolute; top: 38%; transform: translateY(-50%); z-index: 2;
  appearance: none; cursor: pointer; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--copper) 40%, var(--hairline));
  background: color-mix(in srgb, #fbfcf6 82%, transparent); color: var(--copper);
  font-size: 1.2rem; line-height: 1; display: grid; place-content: center;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.loop__nav:hover { background: var(--copper); color: #fff; }
.loop__nav--prev { left: 0.6rem; }
.loop__nav--next { right: 0.6rem; }
.loop__nav[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }
@media (max-width: 46rem) {
  .loop { grid-template-columns: 1fr; }
  .loop__slide video { min-height: 12rem; }
}