/* ==========================================================================
   dp-art / Chekk — hoja de estilo autónoma del sub-sitio
   --------------------------------------------------------------------------
   No depende de main.css. Todo (tokens, reset, componentes) vive aquí.

   IDENTIDAD
   · Concepto: MICROTEXTURA. El detalle mínimo del sonido como motivo visual:
     grano, semitono, línea de onda, barrido.
   · Estructura: riel numerado a la izquierda + columna de lectura estrecha.
     Es un registro (ledger), no un sitio de secciones apiladas.
   · Tipografía display: Bricolage Grotesque (variable, ejes wdth/wght),
     usada condensada. Karla para lectura, IBM Plex Mono para metadatos.
   · Movimiento: BARRIDO (scan). El contenido se revela de izquierda a derecha
     por recorte, como una cabeza lectora. Nunca el «rack focus» de dp-art.
     Respeta prefers-reduced-motion y no oculta nada sin JS.
   ========================================================================== */

/* --------------------------------------------------------------- fuentes */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/chekk-bricolage-latin-wdth.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  /* Superficie: papel dominante (dp-art es tinta dominante; aquí se invierte
     la proporción de la misma familia cromática). */
  --ck-paper: #e7e1d3;
  --ck-paper-2: #ddd6c5;
  --ck-paper-3: #d3cbb7;
  --ck-ink: #17170f;
  --ck-ink-2: #20201a;

  /* Roles. Contrastes calculados sobre --ck-paper:
     fg 13.8:1 · fg-2 7.2:1 · fg-3 5.3:1 · accent 6.6:1 · signal 5.4:1 */
  --ck-bg: var(--ck-paper);
  --ck-surface: var(--ck-paper-2);
  --ck-fg: #17170f;
  --ck-fg-2: #4a4738;
  --ck-fg-3: #5d5a46;
  --ck-accent: #37523d;   /* musgo profundo — enlaces y marcas */
  --ck-signal: #6b5636;   /* bronce profundo — numeración del riel */
  --ck-rule: rgba(23, 23, 15, 0.16);
  --ck-rule-2: rgba(23, 23, 15, 0.34);
  --ck-btn-bg: #17170f;
  --ck-btn-fg: #e7e1d3;

  /* Tipografía */
  --ck-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --ck-body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --ck-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ck-fs-hero: clamp(3.6rem, 0.6rem + 12.5vw, 11.5rem);
  --ck-fs-h1: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem);
  --ck-fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  --ck-fs-h3: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
  --ck-fs-lede: clamp(1.08rem, 1rem + 0.45vw, 1.32rem);
  --ck-fs-body: 1.03125rem;
  --ck-fs-small: 0.875rem;
  --ck-fs-label: clamp(0.6875rem, 0.66rem + 0.09vw, 0.75rem);
  --ck-track: 0.12em;

  /* Espacio */
  --ck-s1: 0.25rem;
  --ck-s2: 0.5rem;
  --ck-s3: 0.75rem;
  --ck-s4: 1rem;
  --ck-s5: 1.5rem;
  --ck-s6: 2rem;
  --ck-s7: 3rem;
  --ck-s8: 4.5rem;
  --ck-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* Layout */
  --ck-max: 1280px;
  --ck-gut: clamp(1rem, 0.35rem + 3vw, 3rem);
  --ck-rail: 10.5rem;
  --ck-rail-gap: clamp(1.5rem, 0.5rem + 3.2vw, 4rem);
  --ck-hh: 3.75rem;
  --ck-measure: 58ch;

  /* Movimiento */
  --ck-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ck-scan: 0.85s;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ck-hh) + 3.5rem);
}
@media (min-width: 62rem) { html { scroll-padding-top: calc(var(--ck-hh) + 1.5rem); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.ck-body {
  margin: 0;
  background: var(--ck-bg);
  color: var(--ck-fg);
  font-family: var(--ck-body);
  font-size: var(--ck-fs-body);
  line-height: 1.66;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Microtextura: semitono fino sobre toda la superficie. Muy bajo contraste
   para no afectar la legibilidad del texto. */
body.ck-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: radial-gradient(rgba(23, 23, 15, 0.55) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  opacity: 0.05;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ck-accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.ck-inv :focus-visible { outline-color: var(--ck-accent); }

::selection { background: var(--ck-accent); color: var(--ck-paper); }

.ck-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.ck-skip {
  position: absolute;
  left: var(--ck-gut);
  top: -4rem;
  z-index: 200;
  background: var(--ck-ink);
  color: var(--ck-paper);
  padding: 0.7rem 1.1rem;
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  transition: top 0.2s var(--ck-ease);
}
.ck-skip:focus { top: 0.6rem; }

/* ------------------------------------------------- movimiento: BARRIDO */
.ck-js [data-scan] {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path, opacity;
}
.ck-js [data-scan].is-in {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path var(--ck-scan) var(--ck-ease) calc(var(--d, 0) * 70ms),
    opacity 0.3s linear calc(var(--d, 0) * 70ms);
}
/* Cabeza lectora: filo luminoso que acompaña al barrido en figuras */
.ck-js .ck-fig[data-scan]::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 2px;
  left: 0;
  background: var(--ck-signal);
  opacity: 0;
}
.ck-js .ck-fig[data-scan].is-in::after {
  animation: ck-head var(--ck-scan) var(--ck-ease) calc(var(--d, 0) * 70ms) both;
}
@keyframes ck-head {
  0% { opacity: 0.9; transform: translateX(0); }
  99% { opacity: 0.9; transform: translateX(calc(100cqw - 2px)); }
  100% { opacity: 0; transform: translateX(calc(100cqw - 2px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ck-js [data-scan],
  .ck-js [data-scan].is-in {
    opacity: 1;
    clip-path: none;
    transition: none;
    animation: none;
  }
  .ck-js .ck-fig[data-scan]::after { display: none; }
}

/* ----------------------------------------------------------- tipografía */
.ck-mono, .ck-meta {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  line-height: 1.4;
}
.ck-meta { color: var(--ck-signal); margin-bottom: var(--ck-s2); }

.ck-h1, .ck-h2, .ck-h3, .ck-hero__name, .ck-ledger__t, .ck-rel__t, .ck-foot__giant {
  font-family: var(--ck-display);
  font-variation-settings: "wdth" 82;
  letter-spacing: -0.015em;
  font-weight: 460;
  line-height: 1.04;
  text-wrap: balance;
}
.ck-h1 { font-size: var(--ck-fs-h1); }
.ck-h2 { font-size: var(--ck-fs-h2); margin-bottom: var(--ck-s5); }
.ck-h3 { font-size: var(--ck-fs-h3); font-variation-settings: "wdth" 88; }
.ck-h2 em, .ck-h1 em, .ck-hero__sig em { font-style: normal; color: var(--ck-accent); }

.ck-lede {
  font-size: var(--ck-fs-lede);
  line-height: 1.5;
  color: var(--ck-fg-2);
  max-width: 52ch;
}
.ck-prose > p { max-width: var(--ck-measure); color: var(--ck-fg-2); }
.ck-prose > p + p { margin-top: var(--ck-s4); }
.ck-prose > p:first-child { color: var(--ck-fg); }

/* ------------------------------------------------------------- enlaces */
.ck-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--ck-accent);
  font-weight: 600;
  transition: color 0.2s var(--ck-ease);
}
.ck-link .ck-i { width: 1em; height: 1em; flex: none; }
.ck-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.18em;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ck-ease);
}
/* Firma: el subrayado se dibuja como una forma de onda, de izquierda a derecha */
@supports (mask-image: linear-gradient(#000, #000)) {
  .ck-link::after {
    height: 7px;
    bottom: -0.32em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q5 0.7 10 4 T20 4 T30 4 T40 4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q5 0.7 10 4 T20 4 T30 4 T40 4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");
    -webkit-mask-size: 22px 7px;
    mask-size: 22px 7px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
  }
}
.ck-link:hover, .ck-link:focus-visible { color: var(--ck-fg); }
.ck-link:hover::after, .ck-link:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .ck-link::after { transition: none; }
}

/* ------------------------------------------------------------- botones */
.ck-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.78em 1.25em;
  background: var(--ck-btn-bg);
  color: var(--ck-btn-fg);
  border: 1px solid var(--ck-btn-bg);
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.24s var(--ck-ease), color 0.24s var(--ck-ease), transform 0.24s var(--ck-ease);
}
.ck-btn .ck-i { width: 1.05em; height: 1.05em; }
.ck-btn:hover { background: var(--ck-accent); border-color: var(--ck-accent); }
.ck-btn--ghost {
  background: transparent;
  color: var(--ck-fg);
  border-color: var(--ck-rule-2);
}
.ck-btn--ghost:hover { background: var(--ck-fg); color: var(--ck-paper); border-color: var(--ck-fg); }

/* ------------------------------------------------------------- cabecera */
.ck-head {
  position: sticky;
  top: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--ck-paper) 90%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--ck-rule);
}
@supports not (backdrop-filter: blur(4px)) { .ck-head { background: var(--ck-paper); } }
.ck-head.is-stuck { border-bottom-color: var(--ck-rule-2); box-shadow: 0 1px 0 var(--ck-rule); }

.ck-head__in {
  max-width: var(--ck-max);
  margin-inline: auto;
  padding-inline: var(--ck-gut);
  min-height: var(--ck-hh);
  display: flex;
  align-items: center;
  gap: var(--ck-s4);
  flex-wrap: wrap;
}

.ck-lockup { display: inline-flex; align-items: baseline; gap: 0.3em; line-height: 1; white-space: nowrap; }
.ck-lockup__p {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: lowercase;
  color: var(--ck-fg-3);
}
.ck-lockup__s { color: var(--ck-signal); font-family: var(--ck-mono); font-size: var(--ck-fs-label); }
.ck-lockup__n {
  font-family: var(--ck-display);
  font-variation-settings: "wdth" 84;
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  color: var(--ck-fg);
}
.ck-lockup:hover .ck-lockup__n { color: var(--ck-accent); }

.ck-nav { order: 3; width: 100%; }
.ck-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--ck-s5);
  border-top: 1px solid var(--ck-rule);
  padding-block: 0.6rem;
}
.ck-nav a {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-fg-2);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ck-ease), border-color 0.2s var(--ck-ease);
}
.ck-nav a:hover { color: var(--ck-fg); border-bottom-color: var(--ck-rule-2); }
.ck-nav a[aria-current="page"] { color: var(--ck-fg); border-bottom-color: var(--ck-signal); }

.ck-exit {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.42em 0.72em;
  border: 1px solid var(--ck-rule-2);
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-fg-2);
  transition: background 0.22s var(--ck-ease), color 0.22s var(--ck-ease), border-color 0.22s var(--ck-ease);
}
.ck-exit .ck-i { width: 1em; height: 1em; }
.ck-exit__k { color: var(--ck-fg-3); }
.ck-exit__n { color: var(--ck-fg); font-weight: 500; }
.ck-exit:hover { background: var(--ck-fg); border-color: var(--ck-fg); color: var(--ck-paper); }
.ck-exit:hover .ck-exit__k, .ck-exit:hover .ck-exit__n { color: var(--ck-paper); }

@media (min-width: 62rem) {
  .ck-head__in { flex-wrap: nowrap; gap: var(--ck-s6); }
  .ck-nav { order: 2; width: auto; margin-left: auto; }
  .ck-nav ul { border-top: 0; padding-block: 0; flex-wrap: nowrap; gap: clamp(1rem, 1.6vw, 2rem); }
  .ck-exit { order: 3; margin-left: 0; }
}

/* --------------------------------------------------------- riel + grid */
.ck-main { display: block; }

.ck-sec {
  max-width: var(--ck-max);
  margin-inline: auto;
  padding-inline: var(--ck-gut);
  padding-block: var(--ck-block);
  display: grid;
  gap: var(--ck-s5);
  border-top: 1px solid var(--ck-rule);
}
.ck-sec:first-of-type { border-top: 0; }

.ck-sec__rail {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
}
.ck-sec__n { color: var(--ck-signal); font-weight: 500; }
.ck-sec__label { color: var(--ck-fg-3); }
.ck-sec__body { min-width: 0; }

@media (min-width: 62rem) {
  .ck-sec {
    grid-template-columns: var(--ck-rail) minmax(0, 1fr);
    column-gap: var(--ck-rail-gap);
  }
  .ck-sec__rail {
    position: sticky;
    top: calc(var(--ck-hh) + 2rem);
    align-self: start;
    flex-direction: column;
    gap: 0.5em;
    padding-top: 0.45em;
  }
  .ck-sec__rail::after {
    content: "";
    display: block;
    width: 1px;
    height: 3.5rem;
    margin-top: 0.4em;
    background: linear-gradient(var(--ck-rule-2), transparent);
  }
  .ck-sec__n { font-size: 1rem; letter-spacing: 0.06em; }
}

/* ------------------------------------------------------------ portada */
.ck-hero {
  max-width: var(--ck-max);
  margin-inline: auto;
  padding-inline: var(--ck-gut);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--ck-block);
  display: grid;
  gap: var(--ck-s6);
}
.ck-hero__rail {
  display: flex;
  gap: 0.8em;
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-fg-3);
}
.ck-hero__rail b { color: var(--ck-signal); font-weight: 500; }
.ck-hero__copy { min-width: 0; }

.ck-hero__name {
  font-size: var(--ck-fs-hero);
  font-variation-settings: "wdth" 76;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.86;
  margin: 0 0 var(--ck-s5) -0.02em;
}
.ck-hero__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.4em;
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-fg-2);
  padding-bottom: var(--ck-s5);
  border-bottom: 1px solid var(--ck-rule);
}
.ck-hero__roles li { display: inline-flex; align-items: center; gap: 1.4em; }
.ck-hero__roles li:not(:last-child)::after { content: ""; width: 4px; height: 4px; background: var(--ck-signal); }
.ck-hero__sig {
  margin-top: var(--ck-s5);
  font-family: var(--ck-display);
  font-variation-settings: "wdth" 90;
  font-weight: 380;
  font-size: clamp(1.25rem, 1rem + 1.3vw, 2rem);
  line-height: 1.24;
  letter-spacing: -0.012em;
  max-width: 26ch;
  color: var(--ck-fg);
}
.ck-hero__acts { margin-top: var(--ck-s6); display: flex; flex-wrap: wrap; gap: var(--ck-s3) var(--ck-s5); align-items: center; }

@media (min-width: 62rem) {
  .ck-hero {
    grid-template-columns: var(--ck-rail) minmax(0, 1fr) minmax(0, 20rem);
    column-gap: var(--ck-rail-gap);
    align-items: end;
  }
  .ck-hero__rail { flex-direction: column; gap: 0.5em; align-self: start; padding-top: 0.45em; }
  .ck-hero__fig { align-self: end; }
}

/* ------------------------------------------------------------- figuras */
.ck-fig {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ck-ratio, 3 / 2);
  background: var(--ck-avg, var(--ck-paper-3));
  container-type: inline-size;
  border: 1px solid var(--ck-rule);
}
.ck-fig img { width: 100%; height: 100%; object-fit: cover; }
.ck-fig--tall { --ck-ratio: 4 / 5; }
.ck-fig__cap {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-fg-3);
  margin-top: var(--ck-s2);
}

/* -------------------------------------------------------------- ledger */
.ck-ledger { border-top: 1px solid var(--ck-rule); }
.ck-ledger__row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 var(--ck-s4);
  padding-block: var(--ck-s5);
  border-bottom: 1px solid var(--ck-rule);
}
.ck-ledger__n {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: 0.06em;
  color: var(--ck-signal);
  padding-top: 0.35em;
}
.ck-ledger__body { min-width: 0; }
.ck-ledger__t {
  font-family: var(--ck-display);
  font-variation-settings: "wdth" 88;
  font-weight: 520;
  font-size: var(--ck-fs-h3);
  line-height: 1.16;
  letter-spacing: -0.012em;
}
.ck-ledger__x { margin-top: var(--ck-s2); color: var(--ck-fg-2); max-width: 54ch; }
.ck-ledger__go { margin-top: var(--ck-s3); font-size: var(--ck-fs-small); }
@media (min-width: 48rem) {
  .ck-ledger__row { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 var(--ck-s6); }
}

/* ------------------------------------------------------------ disciplinas */
.ck-disc { display: grid; gap: var(--ck-s7); }
.ck-disc__item { border-top: 1px solid var(--ck-rule-2); padding-top: var(--ck-s5); }
.ck-disc__t {
  font-family: var(--ck-display);
  font-variation-settings: "wdth" 80;
  font-weight: 480;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.ck-disc__line { margin-top: var(--ck-s2); color: var(--ck-signal); font-size: var(--ck-fs-lede); }
.ck-disc__body { margin-top: var(--ck-s4); }
@media (min-width: 62rem) {
  .ck-disc__item {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: var(--ck-s7);
  }
  .ck-disc__t { grid-column: 1; }
  .ck-disc__line { grid-column: 1; font-size: var(--ck-fs-small); line-height: 1.5; }
  .ck-disc__body { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .ck-tags { grid-column: 2; margin-top: var(--ck-s4); }
}
.ck-disc__body p { max-width: var(--ck-measure); color: var(--ck-fg-2); }
.ck-disc__body p + p { margin-top: var(--ck-s3); }
.ck-tags { display: flex; flex-wrap: wrap; gap: var(--ck-s2); margin-top: var(--ck-s5); }
.ck-tags li {
  padding: 0.35em 0.75em;
  border: 1px solid var(--ck-rule-2);
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-fg-2);
}

/* ----------------------------------------------------------- estado vacío */
.ck-empty {
  border: 1px dashed var(--ck-rule-2);
  padding: var(--ck-s6);
  background:
    repeating-linear-gradient(90deg, var(--ck-rule) 0 1px, transparent 1px 9px);
  background-blend-mode: normal;
}
.ck-empty__t {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-signal);
}
.ck-empty__x { margin-top: var(--ck-s2); color: var(--ck-fg-2); max-width: 46ch; }

/* -------------------------------------------------------------- releases */
.ck-rels { display: grid; gap: var(--ck-s6); }
.ck-rel { border-top: 1px solid var(--ck-rule-2); padding-top: var(--ck-s5); }
.ck-rel__t {
  font-family: var(--ck-display);
  font-variation-settings: "wdth" 84;
  font-weight: 500;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
}
.ck-rel__x { margin-top: var(--ck-s2); color: var(--ck-fg-2); max-width: 54ch; }
.ck-rel__go { margin-top: var(--ck-s4); font-size: var(--ck-fs-small); }

.ck-player { margin-top: var(--ck-s4); }
.ck-player__note { margin-top: var(--ck-s2); font-size: var(--ck-fs-small); color: var(--ck-fg-3); }
.ck-player iframe { width: 100%; border: 1px solid var(--ck-rule); background: var(--ck-paper-3); }

/* ------------------------------------------------------------ formulario */
.ck-form { display: grid; gap: var(--ck-s4); max-width: 26rem; }
.ck-form__intro { color: var(--ck-fg-2); font-size: var(--ck-fs-small); }
.ck-field { display: grid; gap: 0.35rem; }
.ck-field label {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-fg-3);
}
.ck-field input {
  font: inherit;
  color: var(--ck-fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ck-rule-2);
  padding: 0.5rem 0;
  border-radius: 0;
}
.ck-field input:focus { outline: 0; border-bottom-color: var(--ck-accent); box-shadow: 0 1px 0 var(--ck-accent); }
.ck-form__status { font-size: var(--ck-fs-small); color: var(--ck-fg-2); min-height: 1.2em; }
.ck-form__status[data-state="err"] { color: #7a2f22; }
.ck-form .ck-btn { justify-self: start; }

/* ---------------------------------------------------- bloque invertido */
.ck-inv {
  --ck-bg: #14140f;
  --ck-surface: #1f1f16;
  --ck-fg: #e7e1d3;
  --ck-fg-2: #a8a390;
  --ck-fg-3: #9b9784;
  --ck-accent: #8fae94;
  --ck-signal: #c9a877;
  --ck-rule: rgba(231, 225, 211, 0.16);
  --ck-rule-2: rgba(231, 225, 211, 0.32);
  --ck-btn-bg: #e7e1d3;
  --ck-btn-fg: #14140f;
  background: var(--ck-bg);
  color: var(--ck-fg);
}
.ck-inv .ck-btn--ghost { color: var(--ck-fg); }
.ck-inv .ck-btn--ghost:hover { background: var(--ck-fg); color: var(--ck-bg); }
.ck-band { border-top: 0; }
.ck-band-wrap { background: #14140f; }
.ck-band-wrap .ck-sec { border-top: 0; }

/* ------------------------------------------------------- dp-art (puente) */
.ck-areas { border-top: 1px solid var(--ck-rule); }
.ck-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ck-s2) var(--ck-s4);
  align-items: baseline;
  padding-block: var(--ck-s5);
  border-bottom: 1px solid var(--ck-rule);
  transition: padding-left 0.4s var(--ck-ease), background 0.3s var(--ck-ease);
}
.ck-area__n {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  color: var(--ck-signal);
  grid-column: 1;
}
.ck-area__name {
  grid-column: 1;
  font-family: var(--ck-display);
  font-variation-settings: "wdth" 82;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  flex-wrap: wrap;
}
.ck-area__tag {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-fg-3);
  font-weight: 400;
}
.ck-area__x { grid-column: 1; color: var(--ck-fg-2); max-width: 58ch; }
.ck-area__i { grid-column: 2; grid-row: 2; width: 1.4rem; height: 1.4rem; color: var(--ck-fg-3); flex: none; transition: transform 0.4s var(--ck-ease), color 0.3s; }
.ck-area:hover { padding-left: 0.6rem; }
.ck-area:hover .ck-area__name { color: var(--ck-accent); }
.ck-area:hover .ck-area__i { transform: translateX(0.35rem); color: var(--ck-accent); }
.ck-area__lines { grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--ck-s2); margin-top: var(--ck-s3); }
.ck-area__lines span {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: 0.06em;
  color: var(--ck-fg-3);
  border: 1px solid var(--ck-rule);
  padding: 0.25em 0.6em;
}
.ck-chip {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-fg-3);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.ck-chip::before { content: ""; width: 5px; height: 5px; background: var(--ck-signal); }

/* --------------------------------------------------------------- grid 2 */
.ck-two { display: grid; gap: var(--ck-s6); }
@media (min-width: 48rem) {
  .ck-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ck-s7); }
}
.ck-cards { display: grid; gap: var(--ck-s5); }
@media (min-width: 40rem) { .ck-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ck-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ck-card { border-top: 1px solid var(--ck-rule-2); padding-top: var(--ck-s4); }
.ck-card h3 {
  font-family: var(--ck-display);
  font-variation-settings: "wdth" 86;
  font-weight: 520;
  font-size: var(--ck-fs-h3);
  letter-spacing: -0.012em;
  line-height: 1.15;
}
.ck-card p { margin-top: var(--ck-s2); color: var(--ck-fg-2); font-size: var(--ck-fs-small); }

/* ------------------------------------------------------------- listado */
.ck-list { display: grid; gap: 0; border-top: 1px solid var(--ck-rule); }
.ck-list > li { border-bottom: 1px solid var(--ck-rule); }
.ck-list a, .ck-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ck-s1) var(--ck-s4);
  align-items: baseline;
  padding-block: var(--ck-s4);
  transition: padding-left 0.4s var(--ck-ease);
}
.ck-list a:hover { padding-left: 0.5rem; }
.ck-list__n {
  grid-column: 1;
  font-family: var(--ck-display);
  font-variation-settings: "wdth" 86;
  font-weight: 520;
  font-size: var(--ck-fs-h3);
  letter-spacing: -0.012em;
}
.ck-list a:hover .ck-list__n { color: var(--ck-accent); }
.ck-list__x { grid-column: 1; color: var(--ck-fg-2); font-size: var(--ck-fs-small); }
.ck-list .ck-i { grid-column: 2; grid-row: 1; width: 1.2rem; height: 1.2rem; color: var(--ck-fg-3); }

/* --------------------------------------------------------------- pie */
.ck-foot {
  background: var(--ck-paper-2);
  border-top: 1px solid var(--ck-rule-2);
  margin-top: var(--ck-block);
  overflow: hidden;
}
.ck-foot__in {
  max-width: var(--ck-max);
  margin-inline: auto;
  padding: var(--ck-s8) var(--ck-gut) var(--ck-s6);
  display: grid;
  gap: var(--ck-s7);
}
@media (min-width: 48rem) { .ck-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ck-foot__in { grid-template-columns: 1.4fr 0.8fr 0.9fr 1.2fr; gap: var(--ck-s6); } }

.ck-lockup--foot .ck-lockup__n { font-size: 1.6rem; }
.ck-foot__line { margin-top: var(--ck-s3); color: var(--ck-fg-2); max-width: 34ch; font-size: var(--ck-fs-small); }
.ck-foot__mail { margin-top: var(--ck-s4); }
.ck-foot__h {
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  text-transform: uppercase;
  color: var(--ck-fg-3);
  font-weight: 400;
  margin-bottom: var(--ck-s3);
}
.ck-foot__h--gap { margin-top: var(--ck-s5); }
.ck-foot__col ul { display: grid; gap: var(--ck-s2); }
.ck-foot__col a { color: var(--ck-fg-2); font-size: var(--ck-fs-small); }
.ck-foot__col a:hover { color: var(--ck-accent); }
.ck-foot__x { color: var(--ck-fg-2); font-size: var(--ck-fs-small); margin-bottom: var(--ck-s4); max-width: 34ch; }
.ck-foot__areas { display: flex; flex-wrap: wrap; gap: var(--ck-s2) var(--ck-s4); margin-top: var(--ck-s4); }

.ck-foot__giant {
  font-family: var(--ck-display);
  font-variation-settings: "wdth" 76;
  font-weight: 500;
  font-size: clamp(5rem, 1rem + 19vw, 17rem);
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ck-rule-2);
  padding-inline: var(--ck-gut);
  max-width: var(--ck-max);
  margin-inline: auto;
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px red) { .ck-foot__giant { color: var(--ck-rule); } }

.ck-foot__base {
  max-width: var(--ck-max);
  margin-inline: auto;
  padding: var(--ck-s4) var(--ck-gut) var(--ck-s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s2) var(--ck-s5);
  justify-content: space-between;
  font-family: var(--ck-mono);
  font-size: var(--ck-fs-label);
  letter-spacing: var(--ck-track);
  color: var(--ck-fg-3);
  border-top: 1px solid var(--ck-rule);
}
.ck-foot__base i { font-style: normal; color: var(--ck-signal); }

/* ----------------------------------------------------------- utilidades */
.ck-stack > * + * { margin-top: var(--ck-s4); }
.ck-stack-6 > * + * { margin-top: var(--ck-s6); }
.ck-i { width: 1.1em; height: 1.1em; flex: none; }
.ck-note { font-size: var(--ck-fs-small); color: var(--ck-fg-3); }
.ck-rule { height: 1px; background: var(--ck-rule); border: 0; margin-block: var(--ck-s6); }

@media print {
  .ck-head, .ck-foot__giant, .ck-skip { display: none; }
  body.ck-body::after { display: none; }
  .ck-js [data-scan] { opacity: 1; clip-path: none; }
}

/* ==========================================================================
   ETAPA 2026 — INTROSPECCIÓN
   Capa sobre el sistema anterior (no lo reemplaza): paleta de penumbra
   (grafito azulado, niebla cálida, un acento salvia desaturado), display en
   trazo fino alineado al logotipo, más aire y movimiento más lento.
   Para volver al tema claro basta con borrar este bloque.
   ========================================================================== */
:root {
  color-scheme: dark;
  --ck-paper: #16181b;
  --ck-paper-2: #1c1f23;
  --ck-paper-3: #23272c;
  --ck-bg: #16181b;
  --ck-surface: #1c1f23;
  --ck-fg: #dcd8cf;       /* niebla cálida · 13.9:1 */
  --ck-fg-2: #aaa69c;     /* 7.6:1 */
  --ck-fg-3: #8f8c84;     /* 5.4:1 */
  --ck-accent: #a9bab5;   /* salvia/escarcha · 9.1:1 */
  --ck-signal: #b9a37f;   /* latón apagado · 7.3:1 */
  --ck-rule: rgba(220, 216, 207, 0.12);
  --ck-rule-2: rgba(220, 216, 207, 0.26);
  --ck-btn-bg: #dcd8cf;
  --ck-btn-fg: #16181b;
  --ck-display: "Karla", "Helvetica Neue", Arial, sans-serif;
  --ck-fs-label: clamp(0.75rem, 0.72rem + 0.09vw, 0.8125rem);
  --ck-scan: 1.4s;
  --ck-measure: 54ch;
}
body.ck-body { background: var(--ck-bg); }
body.ck-body::after {
  background-image: radial-gradient(rgba(220, 216, 207, 0.6) 0.5px, transparent 0.6px);
  opacity: 0.035;
}
/* Viñeta muy suave: la luz se queda en el centro, los bordes se apagan. */
body.ck-body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 20%, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
}
.ck-main, .ck-head, .ck-foot { position: relative; z-index: 1; }
::selection { background: var(--ck-accent); color: #16181b; }

/* Display: trazo fino, sin compresión */
.ck-h1, .ck-h2, .ck-h3, .ck-hero__name, .ck-ledger__t, .ck-rel__t, .ck-foot__giant, .ck-hero__sig {
  font-variation-settings: normal;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.ck-h2 em, .ck-h1 em, .ck-hero__sig em { font-style: normal; color: var(--ck-accent); }
.ck-hero__sig { font-weight: 300; color: var(--ck-fg-2); max-width: 30ch; }

/* Logotipo */
.ck-hero__name { line-height: 1; margin-bottom: var(--ck-s6); }
.ck-hero__logo { width: min(100%, 44rem); height: auto; color: var(--ck-fg); }
.ck-lockup__logo { height: 0.95em; width: auto; display: inline-block; vertical-align: -0.12em; color: var(--ck-fg); }
.ck-lockup, .ck-exit, .ck-link { min-height: 44px; display: inline-flex; align-items: center; }

/* Inversión: en penumbra la banda se vuelve un poco más clara, no más oscura */
.ck-inv, .ck-band-wrap { background: #1f2327; }
.ck-inv {
  --ck-bg: #1f2327; --ck-surface: #262a2f;
  --ck-fg: #dcd8cf; --ck-fg-2: #aaa69c; --ck-fg-3: #93908a;
  --ck-accent: #a9bab5; --ck-signal: #b9a37f;
  --ck-rule: rgba(220, 216, 207, 0.12); --ck-rule-2: rgba(220, 216, 207, 0.26);
  --ck-btn-bg: #dcd8cf; --ck-btn-fg: #16181b;
}
.ck-form__status[data-state="err"] { color: #e3a58f; }
.ck-field input, .ck-field textarea { background: transparent; color: var(--ck-fg); }

/* Imágenes: un poco de niebla para que las fotos entren en la paleta */
.ck-fig img[src*="/photo/"] { filter: saturate(0.72) contrast(0.96) brightness(0.92); }

/* Fechas */
.ck-dates { border-top: 1px solid var(--ck-rule); }
.ck-date {
  display: grid; gap: var(--ck-s2) var(--ck-s5); padding: var(--ck-s5) 0;
  border-bottom: 1px solid var(--ck-rule);
}
@media (min-width: 48rem) { .ck-date { grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: baseline; } }
.ck-date__when { font-family: var(--ck-mono); font-size: var(--ck-fs-label); letter-spacing: var(--ck-track); text-transform: uppercase; color: var(--ck-signal); }
.ck-date__place { font-family: var(--ck-display); font-weight: 300; font-size: var(--ck-fs-h3); line-height: 1.2; }
.ck-date__place span { color: var(--ck-fg-3); }
.ck-date__ev, .ck-date__notes { color: var(--ck-fg-2); font-size: var(--ck-fs-small); margin-top: 0.3em; }
.ck-date__acts { display: flex; flex-wrap: wrap; gap: var(--ck-s2) var(--ck-s4); align-items: center; }
.ck-date__st { font-family: var(--ck-mono); font-size: var(--ck-fs-label); text-transform: uppercase; letter-spacing: var(--ck-track); color: var(--ck-fg-3); }
.ck-date.is-cancelled .ck-date__place { text-decoration: line-through; color: var(--ck-fg-3); }
.ck-dates--past .ck-date { opacity: 0.7; }
/* Marcadores generados (no fotos reales): se hunden en la penumbra */
.ck-fig img[src*="img/chekk/"]:not([src*="/photo/"]) { filter: contrast(0.85); opacity: 0.55; }