/* Docs (F7-58): el índice, las guías, el reproductor de clips y las
 * micro-animaciones de conceptos. Sólo tokens de `blockboard.css`; los dos
 * temas salen solos. Movimiento: sólo `transform`, `opacity` y `clip-path`,
 * y nada con `prefers-reduced-motion: reduce` (SKILL.md §11). El «?» de las
 * cabeceras de sección vive en `blockboard.css` (se ve en todas las páginas).
 */

/* --- Marco ---------------------------------------------------------------- */
.dc-wrap { padding-top: var(--s6); }
.dc-h1 { font-size: var(--size-2xl); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
.dc-lede { color: var(--text-muted); font-size: var(--size-md); line-height: 1.5; max-width: 62ch; margin: var(--s3) 0 0; }
.dc-key {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px;
  background: var(--surface-sunken); color: var(--text); font: 600 var(--size-2xs)/1 var(--font-mono);
}

/* --- Buscador ------------------------------------------------------------- */
.dc-q {
  position: relative; display: flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  padding: 0 var(--s3); min-height: 38px; transition: border-color .15s, box-shadow .15s;
}
.dc-q:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dc-q-i { display: inline-flex; color: var(--text-faint); }
.dc-q input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: var(--size-sm); padding: 8px 0;
}
.dc-q input::placeholder { color: var(--text-faint); }
.dc-q-lg { min-height: 48px; border-radius: 12px; }
.dc-q-lg input { font-size: var(--size-base); }
.dc-q-k { flex: none; }

/* --- Índice --------------------------------------------------------------- */
.dc-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: var(--s5);
  align-items: end; margin-bottom: var(--s5);
}
.dc-found { min-height: 1.2em; margin: var(--s3) 0 0; font-size: var(--size-sm); }
.dc-feature {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 220px auto; gap: var(--s4);
  align-items: center; padding: var(--s4) var(--s5); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 60%);
  color: var(--text); text-decoration: none; overflow: hidden; box-shadow: var(--sheen);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s;
}
.dc-feature:hover, .dc-feature:focus-visible { transform: translateY(-2px); border-color: var(--accent); }
.dc-feature-tag {
  font-size: var(--size-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-pill); padding: 3px 9px;
}
.dc-feature-t { display: grid; gap: 2px; }
.dc-feature-t b { font-size: var(--size-md); }
.dc-feature-t span { color: var(--text-muted); font-size: var(--size-sm); }
.dc-feature-art {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 56px; align-content: start;
}
.dc-feature-art i {
  grid-column: span var(--w); height: 16px; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 35%, var(--surface-hover));
}
.dc-feature-art i:nth-child(5) { height: 22px; background: color-mix(in srgb, var(--accent) 55%, var(--surface-hover)); }
.dc-feature-go { font-size: var(--size-lg); color: var(--accent); transition: transform .2s; }
.dc-feature:hover .dc-feature-go { transform: translateX(4px); }

.dc-group { margin-top: var(--s6); }
.dc-group-t { font-size: var(--size-lg); margin: 0 0 var(--s3); display: flex; align-items: baseline; gap: var(--s2); }
.dc-group-t .faint { font-size: var(--size-sm); font-weight: 500; }
.dc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s3); }
.dc-card {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--text); text-decoration: none; box-shadow: var(--sheen); min-height: 168px;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, background-color .2s;
}
.dc-card:hover, .dc-card:focus-visible { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-hover); }
.dc-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dc-card-t { font-size: var(--size-base); line-height: 1.3; }
.dc-card-s { color: var(--text-muted); font-size: var(--size-sm); line-height: 1.45; }
.dc-card-m { display: inline-flex; align-items: center; gap: 5px; font-size: var(--size-2xs); }
.dc-card-m svg { width: 10px; height: 10px; fill: currentColor; }
.dc-ic {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  color: var(--accent); background: var(--accent-soft); flex: none;
}
.dc-ic svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.dc-card:hover .dc-ic svg, .dc-card:focus-visible .dc-ic svg { transform: scale(1.14) rotate(-6deg); }
.dc-card:hover .dc-ic svg :is(path, rect, circle), .dc-card:focus-visible .dc-ic svg :is(path, rect, circle) {
  stroke-dasharray: 60; animation: dc-draw .7s ease-out;
}
@keyframes dc-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.dc-empty { margin-top: var(--s6); padding: var(--s6) var(--s4); text-align: center; display: grid; gap: var(--s1);
  border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-muted); }
.dc-empty b { color: var(--text); }
.dc-card[hidden], .dc-group[hidden], .dc-empty[hidden] { display: none; }

/* --- Guía: navegación lateral ---------------------------------------------- */
.dc-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.dc-side { position: sticky; top: var(--s4); max-height: calc(100vh - var(--s6)); overflow: auto; }
.dc-side-sum { display: none; }
.dc-side-q { margin-bottom: var(--s3); }
.dc-side nav { display: grid; gap: 1px; }
.dc-side nav a {
  display: block; padding: 6px 10px; border-radius: 8px; color: var(--text-muted); text-decoration: none;
  font-size: var(--size-sm); line-height: 1.35; border-left: 2px solid transparent;
}
.dc-side nav a:hover { color: var(--text); background: var(--surface-hover); }
.dc-side nav a.on { color: var(--text); background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; }
.dc-side-home { font-weight: 600; }
.dc-side-g {
  margin: var(--s4) 0 var(--s1); padding: 0 10px; font-size: var(--size-2xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint);
}

/* --- Guía: cuerpo ----------------------------------------------------------- */
.dc-guide { max-width: 800px; min-width: 0; }
.dc-crumb { display: flex; gap: var(--s2); font-size: var(--size-sm); color: var(--text-faint); margin-bottom: var(--s3); }
.dc-toc {
  margin: var(--s5) 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-sunken); font-size: var(--size-sm);
}
.dc-toc b { display: block; font-size: var(--size-2xs); letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--s1); }
.dc-toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 2px; }
.dc-toc a { color: var(--text-muted); text-decoration: none; }
.dc-toc a:hover { color: var(--accent); }
.dc-intro { color: var(--text-muted); line-height: 1.6; }
.dc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.dc-step { scroll-margin-top: var(--s5); }
.dc-step-t { display: flex; align-items: center; gap: var(--s3); font-size: var(--size-lg); line-height: 1.25; margin: 0 0 var(--s3); }
.dc-n {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: var(--size-sm); font-weight: 800;
}
.dc-step-b { display: grid; gap: var(--s3); }
.dc-step-b > p, .dc-guide p.dc-p { margin: 0; line-height: 1.6; color: var(--text-muted); max-width: 68ch; }
.dc-step-b > p b, .dc-step-b > p strong { color: var(--text); }
.dc-tip {
  margin-top: var(--s6); padding: var(--s4); border-radius: var(--radius); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); background: var(--surface); line-height: 1.6; color: var(--text-muted);
}
.dc-tip-t { display: block; color: var(--accent); font-size: var(--size-2xs); letter-spacing: .07em; text-transform: uppercase; margin-bottom: var(--s1); }
.dc-tip p { margin: 0; }
.dc-tip p + p { margin-top: var(--s2); }
.dc-related { margin-top: var(--s6); }
.dc-rel-t { font-size: var(--size-md); margin: 0 0 var(--s3); }
.dc-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.dc-rel-card {
  display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color .15s, transform .2s;
}
.dc-rel-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.dc-rel-card .dc-ic { width: 32px; height: 32px; border-radius: 9px; }
.dc-rel-card b { display: block; font-size: var(--size-sm); }
.dc-rel-card small { display: block; color: var(--text-faint); font-size: var(--size-xs); line-height: 1.4; margin-top: 2px; }
.dc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s6); }
.dc-pager a {
  display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); background: var(--surface);
}
.dc-pager a:hover { border-color: var(--accent); }
.dc-pager small { color: var(--text-faint); font-size: var(--size-xs); }
.dc-pager b { font-size: var(--size-sm); }
.dc-next { text-align: right; grid-column: 2; }
.dc-updated { margin-top: var(--s5); font-size: var(--size-xs); }

/* --- El reproductor ------------------------------------------------------- */
.dc-clip { margin: 0; display: grid; gap: var(--s2); }
.dc-frame {
  position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong);
  background: var(--surface-sunken); aspect-ratio: var(--dc-ar, 16 / 10); box-shadow: var(--shadow);
}
.dc-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface-sunken); cursor: pointer; }
.dc-frame video:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dc-ctl {
  position: absolute; right: 10px; bottom: 12px; display: flex; gap: 6px; z-index: 2;
}
.dc-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(8, 10, 15, .72); color: #f6f8fd; cursor: pointer;
  backdrop-filter: blur(4px); transition: transform .15s, background-color .15s;
}
.dc-btn:hover { transform: scale(1.07); background: rgba(8, 10, 15, .9); }
.dc-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dc-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dc-btn .i-play path { fill: currentColor; stroke: none; }
.dc-btn[aria-pressed="false"] .i-pause, .dc-btn[aria-pressed="true"] .i-play { display: none; }
.dc-big {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; z-index: 2;
}
.dc-big svg { width: 22px; height: 22px; }
.dc-big[hidden] { display: none; }
.dc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .1); z-index: 2; }
.dc-bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.dc-caps {
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px var(--s3);
  counter-reset: dc; font-size: var(--size-xs); color: var(--text-faint);
}
.dc-caps li { counter-increment: dc; }
.dc-caps li::before { content: counter(dc) ". "; color: var(--accent); font-weight: 700; }

/* --- Micro-animaciones ----------------------------------------------------- */
.dc-anim { position: relative; margin: 0; display: grid; gap: var(--s2); }
.dc-anim-stage {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-sunken);
  padding: var(--s4); overflow: hidden; min-height: 220px;
}
.dc-anim-cap { font-size: var(--size-xs); color: var(--text-faint); }
.dc-anim-btn { position: absolute; right: 10px; top: 10px; z-index: 2; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-muted); }
.dc-anim-btn:hover { color: var(--text); }
.dc-anim-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dc-anim-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dc-anim-btn .i-play path { fill: currentColor; stroke: none; }
.dc-anim-btn .i-pause, .dc-anim-btn .i-play, .dc-anim-btn .i-again { display: none; }
.dc-anim-btn[data-state="pause"] .i-pause, .dc-anim-btn[data-state="play"] .i-play, .dc-anim-btn[data-state="again"] .i-again { display: block; }
.dc-paused, .dc-paused * { animation-play-state: paused !important; }

/* «What lives where»: el menú y su mapa. */
.dc-map { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s4); }
.dc-map-side { display: grid; gap: 3px; align-content: start; }
.dc-map-side span {
  font-size: var(--size-xs); color: var(--text-muted); padding: 4px 8px; border-radius: 6px;
  border-left: 2px solid transparent;
}
.dc-map-main { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-content: start; }
.dc-map-card {
  display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
}
.dc-map-card b { font-size: var(--size-xs); }
.dc-map-card span { font-size: var(--size-2xs); color: var(--text-faint); line-height: 1.35; }

/* «Sizes»: una caja que pasa por las cuatro tallas sobre la rejilla. */
.dc-sizes { position: relative; height: 188px; }
.dc-sizes-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.dc-sizes-grid i { border: 1px dashed var(--line-strong); border-radius: 4px; opacity: .55; }
.dc-sizes-box {
  position: absolute; left: 0; top: 0; height: 50%; width: 100%; border-radius: 8px;
  border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent);
  display: grid; place-items: center; transform-origin: left top;
}
.dc-sizes-box span { grid-area: 1 / 1; font-size: var(--size-sm); font-weight: 700; color: var(--text); opacity: 0; }
.dc-sizes-box span.s4 { opacity: 1; }

/* «How we pick»: las cinco preguntas caen en un tablero. */
.dc-funnel { display: grid; grid-template-columns: 170px 40px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.dc-funnel-q { display: grid; gap: 6px; }
.dc-funnel-q span {
  font-size: var(--size-xs); padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
}
.dc-funnel-arrow { height: 2px; background: var(--accent); position: relative; }
.dc-funnel-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--accent); }
.dc-funnel-board { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.dc-funnel-board i { grid-column: span var(--w); height: 30px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 30%, var(--surface-hover)); }
.dc-funnel-board i:nth-child(5) { height: 46px; background: color-mix(in srgb, var(--accent) 50%, var(--surface-hover)); }

/* «Anatomy of a code». */
.dc-anatomy { display: grid; gap: var(--s4); justify-items: center; padding: var(--s4) 0; }
.dc-code {
  display: inline-flex; font: 700 clamp(26px, 6vw, 40px)/1 var(--font-mono); letter-spacing: .06em;
  padding: 14px 20px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface);
}
.dc-code .p0 { color: var(--text-faint); }
.dc-code .p1, .dc-code .p3 { color: var(--accent); }
.dc-code .p2 { color: var(--text-faint); }
.dc-anatomy-notes { display: grid; gap: 6px; justify-items: center; text-align: center; }
.dc-anatomy-notes span { font-size: var(--size-sm); color: var(--text-muted); }
.dc-anatomy-notes .n2 { color: var(--up); font-weight: 600; }

/* «Importance score»: la cifra y lo que pesa. */
.dc-score { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s5); align-items: center; }
.dc-score-chip {
  position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 22px;
  background: color-mix(in srgb, var(--hot) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--hot) 45%, transparent);
}
.dc-score-chip b { font-size: var(--size-2xl); color: var(--hot); }
.dc-score-chip i { position: absolute; left: 22px; right: 22px; bottom: 16px; height: 3px; border-radius: 2px; background: var(--hot); }
.dc-score-bars { display: grid; gap: 10px; }
.dc-score-bars div { display: grid; gap: 4px; }
.dc-score-bars span { font-size: var(--size-xs); color: var(--text-muted); }
.dc-score-bars i { display: block; height: 6px; width: var(--w); border-radius: 3px; background: var(--hot); transform-origin: left center; }

/* --- Reserva de los clips sin grabar --------------------------------------- */
.dc-mock { position: absolute; inset: 0; padding: 4%; display: grid; overflow: hidden; }
.dc-mock-soon {
  position: absolute; left: 12px; top: 12px; font-size: var(--size-2xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 3px 9px; z-index: 3;
}
.dc-mock-board { position: absolute; inset: 4%; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 8px; opacity: .45; }
.dc-mock-board i { border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.dc-mock-board i:nth-child(3) { grid-column: span 2; }
.dc-mock-win {
  position: relative; z-index: 1; margin: auto; width: 84%; height: 82%; display: grid; grid-template-rows: auto 1fr auto;
  border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-elevated); box-shadow: var(--shadow); overflow: hidden;
}
.dc-mock-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: var(--size-xs); }
.dc-mock-head span { color: var(--text-faint); padding: 3px 8px; border-radius: 6px; }
.dc-mock-head span.on { color: var(--text); background: var(--accent-soft); }
.dc-mock-body { display: grid; grid-template-columns: 26% 1fr; min-height: 0; }
.dc-mock-rail { display: grid; gap: 2px; align-content: start; padding: 8px; border-right: 1px solid var(--line); }
.dc-mock-rail span { font-size: var(--size-2xs); color: var(--text-muted); padding: 4px 6px; border-radius: 5px; }
.dc-mock-rail span.on { color: var(--text); background: var(--accent-soft); }
.dc-mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; align-content: start; }
.dc-mock-cards div { position: relative; display: grid; gap: 4px; padding: 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.dc-mock-cards i { height: 34px; border-radius: 5px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-hover)); }
.dc-mock-cards b { font-size: var(--size-2xs); }
.dc-mock-cards em { position: absolute; right: 6px; bottom: 5px; font-style: normal; color: var(--accent); font-weight: 800; }
.dc-mock-foot { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); font-size: var(--size-2xs); color: var(--text-faint); }
.dc-mock-foot b { color: var(--accent-ink); background: var(--accent); border-radius: 6px; padding: 3px 10px; }
.dc-mock-steps { display: inline-flex; gap: 4px; margin-left: auto; }
.dc-mock-steps i { width: 22px; height: 4px; border-radius: 2px; background: var(--accent); }
.dc-mock-wiz .dc-mock-body { grid-template-columns: 1fr 1fr; }
.dc-mock-q { display: grid; gap: 6px; padding: 12px; align-content: start; font-size: var(--size-xs); }
.dc-mock-q span { border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 9px; color: var(--text-muted); }
.dc-mock-q span.on { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.dc-mock-mini { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; padding: 12px; align-content: start; border-left: 1px solid var(--line); }
.dc-mock-mini i { grid-column: span var(--w); height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 30%, var(--surface-hover)); }
.dc-mock-share { width: 70%; height: auto; }
.dc-mock-share .dc-mock-body { display: grid; grid-template-columns: 1fr; gap: 10px; justify-items: center; padding: 16px; }
.dc-mock-share small { color: var(--text-faint); font-size: var(--size-2xs); text-align: center; }
.dc-mock-btns { display: flex; gap: 8px; }
.dc-mock-btns span { font-size: var(--size-2xs); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line-strong); }
.dc-mock-btns span.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dc-mock-undo { opacity: .8; }
.dc-mock-undo .dc-key { position: absolute; right: 8px; bottom: 8px; height: 28px; padding: 0 10px; font-size: var(--size-xs); }
.dc-mock-list { position: relative; z-index: 1; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 84%; }
.dc-mock-list div { display: grid; gap: 6px; padding: 8px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-elevated); }
.dc-mock-list div.on { border-color: var(--accent); }
.dc-mock-list i { height: 64px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--accent-soft) 0 30%, transparent 30% 34%); }
.dc-mock-list b { font-size: var(--size-xs); }

/* --- Movimiento: sólo con JS, sin movimiento reducido y al verse --------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .dc-card { animation: dc-up .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
  .dc-feature.fx-go .dc-feature-art i { animation: dc-grow .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms + .2s); }

  .dc-a-map.fx-go .dc-map-side span { animation: dc-menu 6s ease-in-out 2 both; animation-delay: calc(var(--i) * .45s); }
  .dc-a-map.fx-go .dc-map-card { animation: dc-light 6s ease-in-out 2 both; animation-delay: calc(var(--i) * .45s); }

  .dc-a-sizes.fx-go .dc-sizes-box { animation: dc-size 6s cubic-bezier(.65, 0, .35, 1) 2 both; }
  .dc-a-sizes.fx-go .dc-sizes-box .s1 { animation: dc-lab1 6s steps(1) 2 both; }
  .dc-a-sizes.fx-go .dc-sizes-box .s2 { animation: dc-lab2 6s steps(1) 2 both; }
  .dc-a-sizes.fx-go .dc-sizes-box .s3 { animation: dc-lab3 6s steps(1) 2 both; }
  .dc-a-sizes.fx-go .dc-sizes-box .s4 { animation: dc-lab4 6s steps(1) 2 both; }

  .dc-a-funnel.fx-go .dc-funnel-q span { animation: dc-q 6s ease-out 2 both; animation-delay: calc(var(--i) * .35s); }
  .dc-a-funnel.fx-go .dc-funnel-board i { animation: dc-drop 6s cubic-bezier(.2, .8, .2, 1) 2 both; animation-delay: calc(var(--i) * .12s); }

  .dc-a-anatomy.fx-go .dc-code span { animation: dc-pop 5s cubic-bezier(.2, .8, .2, 1) 2 both; }
  .dc-a-anatomy.fx-go .dc-code .p1 { animation-delay: .35s; }
  .dc-a-anatomy.fx-go .dc-code .p2 { animation-delay: .55s; }
  .dc-a-anatomy.fx-go .dc-code .p3 { animation-delay: .7s; }
  .dc-a-anatomy.fx-go .dc-anatomy-notes span { animation: dc-note 5s ease-out 2 both; }
  .dc-a-anatomy.fx-go .dc-anatomy-notes .n1 { animation-delay: .5s; }
  .dc-a-anatomy.fx-go .dc-anatomy-notes .n2 { animation-delay: 1s; }

  .dc-a-score.fx-go .dc-score-chip { animation: dc-pop 5s cubic-bezier(.2, .8, .2, 1) 2 both; }
  .dc-a-score.fx-go .dc-score-bars i { animation: dc-bar 5s cubic-bezier(.2, .8, .2, 1) 2 both; animation-delay: calc(var(--i) * .25s + .4s); }

  /* Reservas. */
  .dc-mk-modal.fx-go .dc-mock-win { animation: dc-open 6s cubic-bezier(.2, .8, .2, 1) 2 both; }
  .dc-mk-modal.fx-go .dc-mock-cards div { animation: dc-card 6s cubic-bezier(.2, .8, .2, 1) 2 both; animation-delay: calc(var(--i) * 60ms + .4s); }
  .dc-mk-wizard.fx-go .dc-mock-steps i { animation: dc-bar 6s ease-out 2 both; animation-delay: calc(var(--i) * .5s); transform-origin: left center; }
  .dc-mk-wizard.fx-go .dc-mock-mini i { animation: dc-drop 6s cubic-bezier(.2, .8, .2, 1) 2 both; animation-delay: calc(var(--i) * .3s + .3s); }
  .dc-mk-code.fx-go .dc-code { animation: dc-pop 5s cubic-bezier(.2, .8, .2, 1) 2 both; }
  .dc-mk-undo.fx-go i:nth-child(3) { animation: dc-gone 5s ease-in-out 2 both; }
  .dc-mk-undo.fx-go .dc-key { animation: dc-keyp 5s ease-in-out 2 both; }
  .dc-mk-board.fx-go .dc-mock-list div { animation: dc-card 6s cubic-bezier(.2, .8, .2, 1) 2 both; animation-delay: calc(var(--i) * .2s); }
}
@keyframes dc-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes dc-grow { from { opacity: 0; transform: scale(.4); } }
@keyframes dc-menu {
  0%, 100% { color: var(--text-muted); background: transparent; border-left-color: transparent; }
  4%, 10% { color: var(--text); background: var(--accent-soft); border-left-color: var(--accent); }
  16% { color: var(--text-muted); background: transparent; border-left-color: transparent; }
}
@keyframes dc-light {
  0% { opacity: .35; transform: scale(.97); }
  5%, 12% { opacity: 1; transform: scale(1.03); border-color: var(--accent); }
  18%, 100% { opacity: 1; transform: none; }
}
@keyframes dc-size {
  0%, 18% { transform: scale(.3333, 1); }
  25%, 43% { transform: scale(.6667, 1); }
  50%, 68% { transform: scale(.6667, 2); }
  75%, 100% { transform: scale(1, 2); }
}
@keyframes dc-lab1 { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes dc-lab2 { 0% { opacity: 0; } 25% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes dc-lab3 { 0%, 25% { opacity: 0; } 50% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes dc-lab4 { 0%, 50% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes dc-q { 0% { opacity: 0; transform: translateX(-10px); } 8%, 100% { opacity: 1; transform: none; } }
@keyframes dc-drop { 0%, 30% { opacity: 0; transform: translateY(-14px) scale(.6); } 42%, 100% { opacity: 1; transform: none; } }
@keyframes dc-pop { 0% { opacity: 0; transform: scale(.6); } 10%, 100% { opacity: 1; transform: none; } }
@keyframes dc-note { 0%, 10% { opacity: 0; transform: translateY(6px); } 20%, 100% { opacity: 1; transform: none; } }
@keyframes dc-bar { 0% { transform: scaleX(0); } 20%, 100% { transform: scaleX(1); } }
@keyframes dc-open { 0% { opacity: 0; transform: scale(.94) translateY(10px); } 10%, 100% { opacity: 1; transform: none; } }
@keyframes dc-card { 0%, 4% { opacity: 0; transform: translateY(10px); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes dc-gone { 0%, 20% { opacity: 1; transform: none; } 30%, 60% { opacity: 0; transform: scale(.8); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes dc-keyp { 0%, 55% { opacity: 0; transform: translateY(6px); } 62%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* --- Pantallas ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .dc-feature { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dc-feature-art { display: none; }
}
@media (max-width: 980px) {
  .dc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .dc-side { position: static; max-height: none; overflow: visible; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .dc-side-sum { display: flex; justify-content: space-between; align-items: center; padding: var(--s3) var(--s4); cursor: pointer; font-weight: 600; min-height: 44px; }
  .dc-side[open] .dc-side-sum { border-bottom: 1px solid var(--line); }
  .dc-side-q, .dc-side nav { padding: 0 var(--s3); }
  .dc-side-q { padding-top: var(--s3); }
  .dc-side nav { padding-bottom: var(--s3); }
}
@media (max-width: 720px) {
  .dc-wrap { padding-top: var(--s4); }
  .dc-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .dc-h1 { font-size: var(--size-xl); }
  .dc-lede { font-size: var(--size-base); }
  .dc-feature { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s4); gap: var(--s3); }
  .dc-feature-tag { grid-column: 1 / -1; justify-self: start; }
  .dc-cards { grid-template-columns: minmax(0, 1fr); }
  .dc-card { min-height: 0; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: var(--s3); }
  .dc-card .dc-ic { grid-row: 1 / span 3; }
  .dc-step-t { font-size: var(--size-md); }
  .dc-n { width: 26px; height: 26px; }
  .dc-map { grid-template-columns: minmax(0, 1fr); }
  .dc-map-side { display: none; }
  .dc-map-main { grid-template-columns: 1fr 1fr; }
  .dc-funnel { grid-template-columns: minmax(0, 1fr); }
  .dc-funnel-arrow { width: 2px; height: 22px; justify-self: center; }
  .dc-funnel-arrow::after { left: -5px; right: auto; top: auto; bottom: -4px; border-left-color: transparent; border-top-color: var(--accent); }
  .dc-score { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .dc-pager { grid-template-columns: minmax(0, 1fr); }
  .dc-next { grid-column: 1; }
  .dc-mock-win { width: 94%; height: 90%; }
  .dc-mock-body { grid-template-columns: minmax(0, 1fr); }
  .dc-mock-rail { display: none; }
  .dc-mock-cards { grid-template-columns: repeat(2, 1fr); }
  .dc-mock-list { grid-template-columns: minmax(0, 1fr); width: 70%; }
  .dc-mock-list div:not(:first-child) { display: none; }
  .dc-btn { width: 36px; height: 36px; }
}