/* ─── CUADERNO ──────────────────────────────────────────────── */

/* Shared layout */
.cuaderno-main {
  display: flex;
  align-items: flex-start;
  padding-top: 9%;
}

/* Header — compartido sidebar (desktop) y mobile */
.cuaderno-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.cuaderno-title {
  font-family: var(--f-disp);
  font-size: clamp(44px, 5.5vw, 80px);
  font-style: italic;
  line-height: .93;
  letter-spacing: -.03em;
  margin-bottom: 48px;
}

/* Sidebar desktop */
.cuaderno-sidebar {
  width: 280px;
  min-width: 280px;
  padding: 80px 28px 120px;
  border-right: 1px solid var(--b0);
  position: sticky;
  top: 80px;   /* nav: ~22px padding × 2 + ~26px logo ≈ 70px; +10px buffer */
  align-self: flex-start;
}
.cuaderno-sidebar .cuaderno-title {
  font-size: clamp(32px, 3vw, 52px);
  margin-bottom: 20px;
}
.cuaderno-sep {
  width: 24px;
  height: 1px;
  background: var(--b0);
  margin-bottom: 24px;
}

/* Botón de suscripción en sidebar */
.cuaderno-subscribe-btn {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.cuaderno-subscribe-btn:hover {
  opacity: 0.85;
}

/* Variante mobile: vive dentro del header mobile, no del sidebar (que está
   display:none). Tamaño táctil, alineado a flex-start como kicker y título. */
.cuaderno-subscribe-btn--mobile { display: none; }

/* Área de lista */
.cuaderno-list-area {
  flex: 1;
  min-width: 0;
  padding: 80px 48px 120px;
}

/* Header mobile — oculto en desktop, visible en <900px */
.cuaderno-header--mobile { display: none; }

/* Filtros mobile — ocultos en desktop */
.cuaderno-filter--mobile { display: none; }

/* Filtros sidebar — disposición vertical */
.cuaderno-filter--sidebar {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 0;
}
.cuaderno-filter--sidebar .cf-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
}
.cf-count {
  font-family: var(--f-mono);
  font-size: 8px;
  color: var(--muted);
  opacity: .5;
}
.cf-btn.is-active .cf-count { opacity: .8; }

/* Lista en desktop: columnas y tipografía más generosas */
.cuaderno-list-area .cuaderno-item { grid-template-columns: 3px 80px 1fr auto; }
.cuaderno-list-area .ci-title { font-size: 20px; }
.cuaderno-list-area .ci-excerpt { font-size: 13px; }

/* Maintenance */
.cuaderno-maintenance,
.cuaderno-main--state { padding-top: 120px; }
.cuaderno-state { text-align: center; }
.cuaderno-state__msg { color: var(--muted); margin-bottom: 24px; }
.cuaderno-state__back {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
  text-decoration: none;
}
.cuaderno-state__back:hover { color: var(--fg); }

/* Filter bar */
.cuaderno-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.cf-btn {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 2px;
  border: 1px solid var(--b0);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cf-btn.is-active,
.cf-btn:hover { border-color: var(--fg); color: var(--fg); }
.cf-btn--audio.is-active { border-color: var(--c-audio); color: var(--c-audio); }
.cf-btn--video.is-active { border-color: var(--c-video); color: var(--c-video); }
.cf-btn--code.is-active  { border-color: var(--c-code);  color: var(--c-code); }

/* Lista */
.cuaderno-list {
  list-style: none;
}
.cuaderno-item {
  position: relative;
  display: grid;
  grid-template-columns: 3px 72px 1fr auto;
  gap: 0 20px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--b0);
  transition: background .12s;
}
.cuaderno-item:first-child { border-top: 1px solid var(--b0); }
.cuaderno-item.is-hidden { display: none; }

/* Estado leído: oscurece el item completo */
.cuaderno-item.is-read          { opacity: .35; }
.cuaderno-item.is-read .ci-band { opacity: .25; }

/* Franja de color */
.ci-band { width: 3px; border-radius: 2px; align-self: stretch; min-height: 100%; }
.ci-band--audio { background: var(--c-audio); }
.ci-band--video { background: var(--c-video); }
.ci-band--code  { background: var(--c-code); }

/* Fecha */
.ci-date {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--muted);
  padding-top: 4px;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Columna de fecha + punto pendiente */
.ci-date-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 4px;
}
.ci-date-col .ci-date { padding-top: 0; }

/* Punto de luz — indica "pendiente de leer" */
.ci-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}
.ci-unread-dot--audio {
  background: var(--c-audio);
  box-shadow: 0 0 8px rgba(245, 208, 32, .55);
}
.ci-unread-dot--video {
  background: var(--c-video);
  box-shadow: 0 0 8px rgba(130, 49, 255, .55);
}
.ci-unread-dot--code {
  background: var(--c-code);
  box-shadow: 0 0 8px rgba(57, 255, 20, .5);
}

/* Cuerpo del item */
.ci-pill {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 2px;
  margin-bottom: 10px;
}
.ci-pill--audio { background: var(--c-audio); color: #0c0c0a; }
.ci-pill--video { background: var(--c-video); color: #fff; }
.ci-pill--code  { background: var(--c-code);  color: #0c0c0a; }

.ci-title {
  font-family: var(--f-disp);
  font-size: 18px;
  font-style: italic;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.ci-title a { position: relative; z-index: 2; color: var(--fg); text-decoration: none; }
.ci-title a:hover { color: var(--fg); opacity: .75; }

.ci-excerpt {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.ci-arrow {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--muted);
  padding-top: 2px;
  text-decoration: none;
  transition: color .15s;
  align-self: center;
}
.cuaderno-item:hover .ci-arrow { color: var(--fg); }

/* Stretched link: extiende el área clickeable al card completo.
   ci-arrow no tiene position, así que ::after se ancla a .cuaderno-item */
.ci-arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cuaderno-empty { padding: 40px 0; color: var(--muted); font-size: 13px; }

/* ─── SCROLL-BACK ──────────────────────────────────────────── */
.scroll-back-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  z-index: 50;
  background: rgba(12, 12, 10, .85);
  backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.scroll-back-bar.is-visible { opacity: 1; }

/* Variante desktop: scroll arriba al inicio de página → barra arriba */
.scroll-back-bar--top {
  bottom: auto;
  top: 0;
}

.scroll-back-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  transition: none;
}

.scroll-back-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  z-index: 1;
}
.scroll-back-label.is-visible { opacity: 1; }

.scroll-back-label.is-returning {
  letter-spacing: .16em;
  animation: scroll-back-pulse 700ms ease-out forwards;
}
@keyframes scroll-back-pulse {
  0%   { opacity: .7; transform: translate(-50%, -50%) scale(.95); }
  30%  { opacity: 1;  transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 1;  transform: translate(-50%, -50%) scale(1); }
}

/* Pull zone: área extra al final del contenido que hay que revelar para
   activar la acción. Gradiente sutil hacia el acento como pista visual. */
.scroll-back-zone {
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(130, 49, 255, .06));
  pointer-events: none;
  user-select: none;
}

/* ─── POST INDIVIDUAL ───────────────────────────────────────── */

/* Hero band */
.post-hero {
 padding: 104px 32px 25px;
}
.post-hero--audio { background: var(--c-audio); }
.post-hero--video { background: var(--c-video); }
.post-hero--code  { background: var(--c-code); }

.post-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}
.post-hero__back {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(12,12,10,.55);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color .15s;
}
.post-hero__back:hover { color: rgba(12,12,10,.8); }
.post-hero--video .post-hero__back { color: rgba(237,233,220,.5); }
.post-hero--video .post-hero__back:hover { color: rgba(237,233,220,.8); }

.post-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.post-hero__pill {
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(12,12,10,.12);
  color: rgba(12,12,10,.75);
}
.post-hero--video .post-hero__pill {
  background: rgba(237,233,220,.15);
  color: rgba(237,233,220,.75);
}
.post-hero__date {
  font-family: var(--f-mono);
  font-size: 9px;
  color: rgba(12,12,10,.45);
}
.post-hero--video .post-hero__date { color: rgba(237,233,220,.45); }

.post-hero__title {
  font-family: var(--f-disp);
  font-size: clamp(30px, 4vw, 52px);
  font-style: italic;
  line-height: .95;
  letter-spacing: -.03em;
  color: #0c0c0a;
  margin-bottom: 16px;
}
.post-hero--video .post-hero__title { color: var(--fg); }

.post-hero__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(12,12,10,.6);
  max-width: 560px;
}
.post-hero--video .post-hero__excerpt { color: rgba(237,233,220,.6); }

/* ── Hero instruments ── */
.hero-instrument { display: block; flex-shrink: 0; }

/* Mobile: ocultar paneles de escritorio dentro del widget */
@media (max-width: 899px) {
  .hero-instrument .oscillo-screen,
  .hero-instrument .oscillo-readouts,
  .hero-instrument .oscillo-controls,
  .hero-instrument .timecode-panel,
  .hero-instrument .tc-transport,
  .hero-instrument .term-panel { display: none; }
}

@media (min-width: 900px) {
  .post-hero--has-instrument .post-hero__inner {
    max-width: min(1100px, 95vw);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .post-hero__text { flex: 1; min-width: 0; }
  .hero-instrument { display: flex; flex-direction: column; }
}

/* Shared dark panel */
.instr-panel {
  background: #060606;
  border: 1px solid rgba(237,233,220,.1);
  border-radius: 2px;
}

/* Oscilloscope — panel propio (no usa .instr-panel) */
.oscillo-screen {
  background: #060606;
  border: 1px solid rgba(237,233,220,.1);
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  width: 180px;
  height: 110px;
  padding: 8px 8px 10px 22px;
  position: relative;
}
.oscillo-screen svg { width: 100%; height: 100%; display: block; }
.oscillo-tag {
  position: absolute; top: 5px; right: 7px;
  font-family: var(--f-mono); font-size: 7px;
  color: rgba(245,208,32,.45); letter-spacing: .08em;
}
.oscillo-yl {
  position: absolute; top: 8px; bottom: 8px; left: 4px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--f-mono); font-size: 6.5px;
  color: rgba(237,233,220,.2);
}
.oscillo-readouts {
  background: #0a0a0a;
  border: 1px solid rgba(237,233,220,.1);
  border-top: 1px solid rgba(237,233,220,.06);
  border-radius: 0 0 2px 2px;
  padding: 7px 10px;
  display: flex;
  width: 180px;
}
.oscillo-rd {
  flex: 1; padding: 0 8px;
  border-right: 1px solid rgba(237,233,220,.06);
}
.oscillo-rd:first-child { padding-left: 0; }
.oscillo-rd:last-child  { border-right: none; }
.oscillo-rd__label {
  font-family: var(--f-mono); font-size: 6px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(237,233,220,.22);
}
.oscillo-rd__val {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .04em; color: rgba(245,208,32,.85);
}
.oscillo-rd__unit {
  font-family: var(--f-mono); font-size: 6px;
  color: rgba(237,233,220,.25); letter-spacing: .06em; margin-top: 1px;
}

/* Oscilloscope — controles de acoplamiento debajo del panel */
.oscillo-controls {
  display: flex; align-items: center; justify-content: space-between;
  width: 180px; padding-top: 6px;
}
.osc-ctrl-group { display: flex; gap: 3px; }
.osc-btn {
  font-family: var(--f-mono); font-size: 7px; letter-spacing: .08em;
  text-transform: uppercase; cursor: default; user-select: none;
  color: rgba(0,0,0,.4);
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(0,0,0,.05);
  padding: 2px 5px; border-radius: 1px;
}
.osc-btn--active {
  color: rgba(0,0,0,.72);
  border-color: rgba(0,0,0,.32);
  background: rgba(0,0,0,.1);
}
.osc-btn--ch { letter-spacing: .04em; }

/* Timecode */
.timecode-panel {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 170px;
}
.timecode-row  { display: flex; align-items: center; gap: 8px; }
.timecode-tag  {
  font-family: var(--f-mono); font-size: 7px;
  color: rgba(237,233,220,.3); letter-spacing: .1em; width: 28px;
}
.timecode-val  {
  font-family: var(--f-mono); font-size: 18px;
  letter-spacing: .05em; color: rgba(245,208,32,.85);
}
.timecode-subval {
  font-family: var(--f-mono); font-size: 11px;
  color: rgba(237,233,220,.45);
}
.timecode-sep  { height: 1px; background: rgba(237,233,220,.06); }
.timecode-meta {
  font-family: var(--f-mono); font-size: 7px;
  color: rgba(237,233,220,.2); letter-spacing: .08em;
  display: flex; justify-content: space-between;
}

/* Timecode — botones de transport debajo del panel */
.tc-transport {
  display: flex; padding-top: 7px;
}
.tc-btn {
  flex: 1; text-align: center;
  font-family: var(--f-mono); font-size: 10px; line-height: 1;
  cursor: default; user-select: none;
  color: rgba(237,233,220,.4);
  border: 1px solid rgba(237,233,220,.15);
  border-right: none;
  background: rgba(237,233,220,.04);
  padding: 5px 0; border-radius: 0;
}
.tc-btn:last-child { border-right: 1px solid rgba(237,233,220,.15); }
.tc-btn--rec  { color: rgba(255,70,70,.65); }
.tc-btn--play { flex: 2; color: rgba(237,233,220,.7); }

/* Terminal */
.term-panel  { width: 200px; overflow: hidden; }
.term-bar    {
  background: rgba(237,233,220,.05);
  border-bottom: 1px solid rgba(237,233,220,.06);
  padding: 5px 10px;
  display: flex; align-items: center; gap: 5px;
}
.term-dot    { width: 7px; height: 7px; border-radius: 50%; }
.term-dot--r { background: rgba(255,100,80,.5); }
.term-dot--y { background: rgba(245,208,32,.4); }
.term-dot--g { background: rgba(57,255,20,.35); }
.term-body   {
  padding: 10px 12px;
  font-family: var(--f-mono); font-size: 10px; line-height: 1.7;
}
.term-prompt { color: rgba(57,255,20,.7); }
.term-cmd    { color: rgba(237,233,220,.7); }
.term-output { color: rgba(237,233,220,.35); margin-top: 2px; }
.term-cursor {
  display: inline-block; width: 6px; height: 11px;
  background: rgba(57,255,20,.7); vertical-align: middle;
  animation: term-blink .9s step-end infinite;
}
@keyframes term-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Hero instrument strip (mobile) ── */
.hero-instr-strip {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  height: 26px;
  overflow: hidden;
}
@media (min-width: 900px) { .hero-instr-strip { display: none; } }

/* Audio strip — fondo amarillo, texto oscuro */
.hero-instr-strip--audio .strip-wave { flex: 1; height: 20px; min-width: 0; display: block; }
.strip-audio-val {
  font-family: var(--f-mono); font-size: 11px;
  color: rgba(0,0,0,.78); white-space: nowrap; letter-spacing: .02em; flex-shrink: 0;
}
.strip-audio-unit {
  font-family: var(--f-mono); font-size: 8px;
  color: rgba(0,0,0,.48); white-space: nowrap; letter-spacing: .06em; flex-shrink: 0;
}

/* Video strip — fondo púrpura, texto claro */
.strip-tc-tag {
  font-family: var(--f-mono); font-size: 7px;
  color: rgba(255,255,255,.55); letter-spacing: .1em; flex-shrink: 0;
}
.strip-tc-val {
  font-family: var(--f-mono); font-size: 14px;
  letter-spacing: .04em; color: rgba(245,208,32,.95); flex-shrink: 0;
}
.strip-tc-meta {
  font-family: var(--f-mono); font-size: 7.5px;
  color: rgba(255,255,255,.38); letter-spacing: .05em;
  white-space: nowrap;
}

/* Code strip — fondo verde neón, texto oscuro */
.strip-dots { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.strip-dot-r { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.25); }
.strip-dot-y { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.18); }
.strip-dot-g { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.32); }
.strip-prompt-c {
  font-family: var(--f-mono); font-size: 10px;
  color: rgba(0,0,0,.6); white-space: nowrap; flex-shrink: 0;
}
.strip-cmd-mobile { font-family: var(--f-mono); font-size: 10px; color: rgba(0,0,0,.78); }
.strip-cursor-m {
  display: inline-block; width: 5px; height: 10px;
  background: rgba(0,0,0,.55); vertical-align: middle;
  animation: term-blink .9s step-end infinite; flex-shrink: 0;
}

/* Botones compactos de franja */
.strip-btns { display: flex; margin-left: auto; flex-shrink: 0; }
.strip-sbtn {
  font-family: var(--f-mono); font-size: 7px; letter-spacing: .06em;
  text-transform: uppercase; cursor: default; user-select: none; line-height: 1;
  padding: 3px 5px;
  color: rgba(0,0,0,.38);
  border: 1px solid rgba(0,0,0,.18);
  border-right: none;
  background: rgba(0,0,0,.06);
}
.strip-sbtn:last-child { border-right: 1px solid rgba(0,0,0,.18); }
.strip-sbtn--active { color: rgba(0,0,0,.7); border-color: rgba(0,0,0,.32); background: rgba(0,0,0,.1); }
/* Video — variante clara */
.strip-btns--light .strip-sbtn {
  color: rgba(255,255,255,.45);
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
}
.strip-btns--light .strip-sbtn:last-child { border-right: 1px solid rgba(255,255,255,.2); }
.strip-sbtn--rec-v  { color: rgba(255,100,100,.8)  !important; }
.strip-sbtn--play-v { color: rgba(255,255,255,.75) !important; padding-left: 7px; padding-right: 7px; }

/* Contenido del post */
.post-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 100px;
}
.post-body {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(237,233,220,.85);
}
.post-body h2 {
  font-family: var(--f-disp);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--fg);
  margin: 40px 0 14px;
}
.post-body h3 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 28px 0 10px;
}
.post-body p { margin-bottom: 18px; }
.post-body ul, .post-body ol {
  margin: 0 0 18px 20px;
}
.post-body li { margin-bottom: 6px; }
.post-body img {
  max-width: 100% !important; /* vence inline style="width:Xpx" de WP */
  height: auto   !important; /* vence inline style="height:Xpx" de WP */
  display: block;
  border-radius: 3px;
  margin: 24px 0;
}
.post-body figure {
  max-width: 100%;
  margin: 1.5rem 0;
}
.post-body .wp-block-image {
  max-width: 100%;
}
.post-body figcaption {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}
.post-body a { color: var(--fg); text-underline-offset: 3px; }
.post-body strong { color: var(--fg); font-weight: 600; }
.post-body blockquote {
  border-left: 3px solid var(--b1);
  padding-left: 20px;
  margin: 24px 0;
  color: var(--muted);
  font-style: italic;
}

/* ── Callout / Aviso (Gutenberg block style: is-style-callout) ── */
.is-style-callout {
  background:    var(--accent);
  color:         var(--accent-fg);
  border-radius: 12px;
  padding:       1rem 1.5rem;
  margin:        1.5rem 0;
  line-height:   1.5;
}

/* ── Post layout — wrapper grid: sidebar TOC + cuerpo del post ───────────── */
.post-layout {
  display: block; /* mobile por defecto: flujo vertical */
}

/* Desktop: sidebar TOC (220px) + contenido (1fr) — activo desde 900px */
@media (min-width: 900px) {
  .post-content { max-width: min(1179px, 95vw); }
  .post-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: start;
  }
  .post-toc {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0; /* quitar margen inline heredado */
  }
  /* 900-999px: 1 columna de texto para conservar legibilidad en anchos estrechos */
  .post-body { column-count: 1; }
  /* Sin TOC: anular grid y volver a flujo bloque normal */
  .post-layout--no-toc { display: block; }
}

/* 1000px+: 2 columnas de texto */
@media (min-width: 1000px) {
  .post-body { column-count: 2; }
}



/* ── Post body — base ── */
.post-body {
  column-gap: 40px;
  column-rule: 1px solid var(--b0);
  min-width: 0; /* necesario para grid items con texto */
}
.post-body img,
.post-body figure,
.post-body blockquote,
.post-body pre,
.post-body table,
.post-body .is-style-callout,
.post-body .image-container,
.post-body .daw-player,
.post-body .wp-block-table,
.post-body .wp-block-columns,
.post-body .wp-block-group {
  break-inside: avoid;
}
.post-body h2 { break-after: avoid; }

/* ── Tablas Gutenberg (wp-block-table) ───────────────────────────────────── */
.post-body .wp-block-table {
  overflow-x: auto;
  margin: 24px 0;
}
.post-body .wp-block-table figure {
  margin: 0;
}
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.post-body table th,
.post-body table td {
  padding: 7px 10px;
  border: 1px solid var(--b1);
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
}
.post-body table thead th {
  background: rgba(255,255,255,.07);
  color: var(--fg);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 600;
}
.post-body table tbody tr:nth-child(even) {
  background: rgba(255,255,255,.03);
}
.post-body .wp-block-table figcaption {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* ── Bloque preformateado (pre) ──────────────────────────────────────────── */
.post-body pre {
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(237,233,220,.72);
  border-left: 2px solid var(--b1);
  padding: 12px 16px;
  margin: 20px 0;
  background: rgba(255,255,255,.03);
  border-radius: 0 3px 3px 0;
  white-space: pre-wrap;
  word-break: break-word;
}


/* ── Clases custom del editor (informacion / comentario) ─────────────────── */
.post-body .informacion {
  background: rgba(130,49,255,.12);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 10px 16px;
  margin: 20px 0;
  color: rgba(237,233,220,.85);
  font-size: 14px;
}
.post-body .comentario {
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--b1);
  border-radius: 4px;
  padding: 12px 16px;
  margin: 24px 0;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

/* ── TOC widget (Índice) ─────────────────────────────────────────────────── */
.post-toc {
  border: 1px solid var(--b0);
  border-radius: 6px;
  overflow: hidden;
  margin: 16px 0 24px;
  font-size: 13px;
}
.post-toc__title {
  display: block;
  padding: 10px 14px;
  background: rgba(255,255,255,.05);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg); /* más visible que --muted */
}
.post-toc__list {
  list-style: none;
  margin: 0;
  padding: 8px 0 10px;
  border-top: 1px solid var(--b0);
}
.post-toc__list li { margin: 0; padding: 0; }
.post-toc__list a {
  display: block;
  padding: 5px 14px 5px 20px;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  font-size: 12px;
  line-height: 1.5;
  transition: color .15s, background .15s, border-color .15s;
}
.post-toc__list a:hover {
  color: var(--fg);
  background: rgba(255,255,255,.04);
}
.post-toc__list a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(130,49,255,.06);
}
.post-toc__list a.is-active:hover {
  background: rgba(130,49,255,.09); /* ligeramente más brillante que el estado activo */
}

/* ── scroll-margin dinámico vía CSS variable (actualizada por JS) ─────────── */
.post-body h2 {
  scroll-margin-top: var(--h2-scroll-offset, 80px);
}

/* ── Glow heading activo (desktop) ──────────────────────────────────────── */
@keyframes heading-glow {
  0%   { background-color: transparent; }
  20%  { background-color: color-mix(in srgb, var(--accent) 18%, transparent); }
  65%  { background-color: color-mix(in srgb, var(--accent) 9%, transparent); }
  100% { background-color: transparent; }
}
.post-body h2.is-highlighted {
  animation: heading-glow 1.4s ease forwards;
  border-radius: 4px;
  padding-inline: 6px 4px;
  margin-inline-start: -6px;
}

/* ── TOC sticky mobile: se oculta al bajar, reaparece al subir ───────────── */
@media (max-width: 899px) {
  .post-body img {
    width: 100% !important; /* columna única: expandir al ancho disponible */
  }
  .post-toc {
    position: sticky;
    top: 68px;                          /* sobreescrito por JS con altura real del nav */
    z-index: 50;
    background: var(--bg);              /* fondo sólido: sin esto el TOC es transparente */
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    transition: transform .3s ease;
  }
  .post-toc.toc-hidden {
    transform: translateY(calc(-100% - 72px));
  }
}

/* Footer del post */
.post-footer {
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid var(--b0);
}
.post-footer__back {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
  text-decoration: none;
}
.post-footer__back:hover { color: var(--fg); }

/* ── Aviso admin — slot ACF sin datos ───────────────────────────────────── */
.acf-slot-hint {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 24px 0;
  padding: 12px 16px;
  border-left: 3px solid #f5a623;
  background: rgba(245,166,35,.07);
  font-family: var(--f-mono);
  font-size: 12px;
  color: #f5a623;
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
}
.acf-slot-hint__icon { flex-shrink: 0; font-size: 14px; }
.acf-slot-hint code {
  background: rgba(245,166,35,.15);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.acf-slot-hint a { color: #f5a623; text-decoration: underline; }
.acf-slot-hint a:hover { color: #ffd280; }
.acf-slot-hint--schema {
  border-color: #e05252;
  background: rgba(224,82,82,.07);
  color: #e05252;
}
.acf-slot-hint--schema a { color: #e05252; }
.acf-slot-hint--schema a:hover { color: #ff8a8a; }

/* ── Admin section: SEO Health (account) ───────────────────── */
.seo-health {
  max-width: 720px;
  margin: 2rem auto 0;
}
.seo-health__header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--b0);
}
.seo-health__title {
  font-family: var(--f-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg);
  margin: 0;
}
.seo-health__badge {
  font-family: var(--f-mono);
  font-size: 11px;
  padding: .15rem .55rem;
  border-radius: 999px;
  line-height: 1.4;
}
.seo-health__badge--ok   { background: #14532d; color: #4ade80; }
.seo-health__badge--warn { background: #3a2e0a; color: #f5a623; }
.seo-health__badge--error{ background: #450a0a; color: #e05252; }
.seo-health__badge--info { background: transparent; color: var(--b1); margin-left: auto; }

.seo-health__card {
  border: 1px solid var(--b0);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: .65rem;
}
.seo-health__card-title {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--b1);
  margin: 0 0 .5rem;
}
.seo-health__status { font-size: 14px; margin: 0; }
.seo-health__status--ok    { color: #4ade80; }
.seo-health__status--warn  { color: #f5a623; }
.seo-health__status--error { color: #e05252; }
.seo-health__issues {
  list-style: none;
  padding: 0;
  margin: .4rem 0 0;
  font-size: 14px;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.seo-health__issues li {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.seo-health__tag {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .1rem .4rem;
  border-radius: 3px;
  background: var(--b0);
  color: var(--b1);
  white-space: nowrap;
}
.seo-health__issues code {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--accent);
}

.seo-health__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.seo-health__checker {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  padding: .25rem .65rem;
  border: 1px solid var(--b0);
  border-radius: 6px;
  transition: border-color .15s;
}
.seo-health__checker:hover { border-color: var(--accent); color: #a76bff; }

.seo-health__code {
  margin-top: .5rem;
}
.seo-health__code:first-of-type { margin-top: 0; }
.seo-health__code-summary {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--b1);
  cursor: pointer;
  user-select: none;
  padding: .25rem 0;
}
.seo-health__code-summary:hover { color: var(--fg); }
.seo-health__code-text {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .55rem;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--b0);
  border-radius: 6px;
  resize: vertical;
  white-space: pre;
  overflow-x: auto;
}
.seo-health__code-copy {
  margin-top: .35rem;
  padding: .2rem .6rem;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.seo-health__code-copy:hover { background: #a76bff; }

/* ── Comparador de imágenes ─────────────────────────────────────────────── */
.imagenesCOMP {
  max-width: 100%;
  display: block;
}
.image-container {
  position: relative;
  width: 100%;
  margin: 2em 0;
}
@media only screen and (min-width: 768px) {
  .image-container { margin: 4em 0; }
}
.image-label {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  padding: 1em;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: translateY(20px);
  transition: transform .3s .7s, opacity .3s .7s;
}
.image-label.is-hidden { visibility: hidden; }
.is-visible .image-label {
  opacity: 1;
  transform: translateY(0);
}
.resize-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left top;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.resize-image .image-label { right: auto; left: 0; }
.is-visible .resize-image {
  width: 50%;
  animation: cd-bounce-in .7s;
}
@keyframes cd-bounce-in {
  0%   { width: 0; }
  60%  { width: 55%; }
  100% { width: 50%; }
}
.resize-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  pointer-events: none;
}
.resize-image .image-label { position: relative; z-index: 1; }
.handle {
  position: absolute;
  height: 44px;
  width: 44px;
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--accent) url('/assets/arrows.svg') no-repeat center center;
  cursor: move;
  box-shadow: 0 0 0 6px rgba(0,0,0,.2), 0 0 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3);
  opacity: 0;
  transform: translate3d(0,0,0) scale(0);
}
.handle.draggable { background-color: #9b55ff; }
.is-visible .handle {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transition: transform .3s .7s, opacity 0s .7s;
}

/* ── DAW Player (nativo HTML5, sin CORS) ────────────────────────────────── */
.daw-player {
  margin: 2em 0;
  background: #1a1918;
  border: 1px solid var(--b1);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  font-family: var(--f-mono);
  font-size: 13px;
}

/* Transport row */
.daw-player__transport {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.daw-player__play {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.daw-player__play:hover { background: #9b55ff; }
.daw-player__play-icon { line-height: 1; user-select: none; }

.daw-player__seekbar {
  flex: 1;
  height: 4px;
  background: var(--b1);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.daw-player__fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .1s linear;
  pointer-events: none;
}
.daw-player__time {
  flex-shrink: 0;
  color: var(--muted);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Track list */
.daw-player__tracks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.daw-player__track label {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  padding: .45rem .75rem;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
  color: var(--muted);
}
.daw-player__track label:hover {
  border-color: var(--b1);
  color: var(--fg);
}
.daw-player__track input[type="radio"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.daw-player__track.is-active label {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--fg);
}
.daw-player__track-name { line-height: 1.3; }

/* ─── CUADERNO RESPONSIVE ───────────────────────────────────── */

/* Tablet / mobile — colapsar sidebar */
@media (max-width: 900px) {
  .cuaderno-main { display: block; padding: 80px 32px 120px; }
  .cuaderno-sidebar { display: none; }
  .cuaderno-header--mobile { display: block; }
  .cuaderno-filter--mobile { display: flex; }
  .cuaderno-list-area { padding: 0; }
  .cuaderno-list-area .cuaderno-item { grid-template-columns: 3px 72px 1fr auto; gap: 0 20px; }
  .cuaderno-list-area .ci-title { font-size: 18px; }
  .cuaderno-list-area .ci-excerpt { font-size: 12px; }

  /* CTA del popup, equivalente al del sidebar en desktop. Inline (no full
     width) para no romper el ritmo del header. Margen superior cerrado
     respecto al título y margen inferior generoso para separar de los
     filtros. */
  .cuaderno-header--mobile .cuaderno-title { margin-bottom: 24px; }
  .cuaderno-subscribe-btn--mobile {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0 0 36px;
    padding: 13px 26px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* Pequeño mobile */
@media (max-width: 600px) {
  .cuaderno-main { padding: 56px 20px 80px; }
  .cuaderno-list-area .cuaderno-item { grid-template-columns: 3px 56px 1fr auto; gap: 0 12px; }
  .post-hero { padding: 80px 20px 40px; }
  .post-content { padding: 40px 20px 72px; }
  .is-style-callout { padding: 0.875rem 1rem; }
}