/* ============================================================
   29A LABS — Componentes: feed, tarjetas, post, paginación
   ============================================================ */

/* ── Feed ─────────────────────────────────────────────────── */
.feed {
  padding: var(--s-7) 0 var(--s-8);
  display: flex;
  flex-direction: column;
}

/* ── Tarjeta de entrada ───────────────────────────────────── */
.entry-card {
  position: relative;
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--c-border);
}

/* La barra naranja que crece a la izquierda al pasar el mouse.
   Es el gesto principal del feed: marca "esto es lo que estás mirando". */
.entry-card::before {
  content: '';
  position: absolute;
  left: calc(var(--gutter) * -1);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-base) var(--e-out);
}
.entry-card:hover::before,
.entry-card:focus-within::before {
  transform: scaleY(1);
}

/* ── Metadata de la entrada ───────────────────────────────── */
.entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* El prompt: txt / img / snd / vid / quo. Le da al feed su textura. */
.entry-meta__prompt {
  padding: 2px var(--s-2);
  border: 1px solid var(--c-accent-a40);
  border-radius: var(--r-sm);
  color: var(--c-accent);
  background: var(--c-accent-a10);
  font-weight: 700;
}

.entry-meta__cat {
  color: var(--c-text-dim);
  background-image: none;
}
.entry-meta__cat:hover { color: var(--c-accent); }

.entry-meta__sep { color: var(--c-border-lit); }

/* ── Título de la entrada ─────────────────────────────────── */
.entry-card__title {
  margin-top: var(--s-4);
  font-size: var(--t-3);
}
.entry-card__title a {
  color: var(--c-text-strong);
  background-image: none;
  transition: color var(--d-fast) var(--e-out);
}
.entry-card__title a:hover { color: var(--c-accent); }

/* ── Media ────────────────────────────────────────────────── */
.entry-card__media {
  display: block;
  margin-top: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background-image: none;
}
.entry-card__media img {
  width: 100%;
  /* Proporción fija con recorte. Las imágenes del blog son de todos los
     tamaños y proporciones; sin esto, una foto cuadrada se come 900px de
     alto y el feed pierde el pulso. Todas las tarjetas laten igual. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  transition: transform var(--d-slow) var(--e-out), filter var(--d-slow) var(--e-out);
  /* Las imágenes viejas del blog son heterogéneas: las bajo un punto
     para que no griten por encima del texto, y las devuelvo en hover. */
  filter: saturate(0.85) brightness(0.92);
}

/* En un post de formato imagen, la imagen ES el post: se le da más aire
   y una proporción menos recortada, pero sigue acotada. */
.entry-card--image .entry-card__media img {
  aspect-ratio: 3 / 2;
  filter: none;
}
.entry-card:hover .entry-card__media img {
  transform: scale(1.02);
  filter: saturate(1) brightness(1);
}

/* ── Extracto y CTA ───────────────────────────────────────── */
.entry-card__excerpt {
  margin-top: var(--s-5);
  max-width: var(--w-prose);
  color: var(--c-text-dim);
}

.entry-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  background-image: none;
}
.entry-card__more span[aria-hidden] {
  transition: transform var(--d-base) var(--e-snap);
}
.entry-card__more:hover span[aria-hidden] { transform: translateX(4px); }

/* ── Formato: cita ────────────────────────────────────────── */
.entry-card--quote .entry-card__quote {
  margin-top: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--c-surface);
  border-left: 2px solid var(--c-accent);
  border-radius: var(--r-sm);
  font-size: var(--t-1);
  line-height: var(--lh-snug);
  color: var(--c-text-strong);
}
.entry-card--quote .entry-card__quote p + p { margin-top: var(--s-4); }

/* ── Post individual ──────────────────────────────────────── */
/* OJO con el `article`: WordPress le pone la clase `single` AL <body> en las
   vistas de post (body_class()). Con un `.single` pelado, este max-width se
   le aplicaba también al body y encogía la página ENTERA a 680px — header,
   contenido y footer — pero solo dentro de las publicaciones. El <body> nunca
   es un <article>, así que cualificar el selector lo resuelve. */
article.single {
  max-width: var(--w-prose);
  margin: 0 auto;
  padding: var(--s-8) 0 var(--s-9);
}

.single__head { margin-bottom: var(--s-7); }

.single__title {
  margin-top: var(--s-4);
  font-size: var(--t-4);
}

.single__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.tag {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--c-accent-a40);
  border-radius: var(--r-sm);
  background: var(--c-accent-a10);
  background-image: none;
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.tag:hover { background: var(--c-accent-a20); border-color: var(--c-accent); color: var(--c-accent-lit); }

.tag--ghost {
  border-color: var(--c-border);
  background: transparent;
  color: var(--c-text-dim);
  text-transform: lowercase;
}
.tag--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); background: transparent; }

/* La imagen destacada rompe la medida de lectura a propósito */
.single__hero {
  margin: var(--s-7) calc(var(--s-7) * -1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.single__hero img { width: 100%; }

@media (max-width: 800px) {
  .single__hero { margin-inline: 0; }
}

/* ── Cuerpo del post ──────────────────────────────────────── */
.single__body > * + * { margin-top: var(--s-5); }
.single__body h2 { margin-top: var(--s-8); font-size: var(--t-2); }
.single__body h3 { margin-top: var(--s-7); font-size: var(--t-1); }

.single__body img,
.single__body figure {
  margin-top: var(--s-6);
  margin-bottom: var(--s-6);
  border-radius: var(--r-sm);
}

.single__body figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  color: var(--c-text-faint);
  text-align: center;
}

/* Los posts de 2008–2013 traen <embed>/<iframe> viejos. Que no rompan el layout. */
.single__body iframe,
.single__body embed,
.single__body object,
.single__body video {
  max-width: 100%;
  margin-top: var(--s-6);
}

.single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}

/* ── Navegación entre posts ───────────────────────────────── */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-8);
}

.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-image: none;
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.post-nav__link:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.post-nav__link--next { text-align: right; }
.post-nav__link--next:only-child { grid-column: 2; }

.post-nav__dir {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}
.post-nav__title { color: var(--c-text); }

@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__link--next { text-align: left; }
  .post-nav__link--next:only-child { grid-column: 1; }
}

/* ── Paginación ───────────────────────────────────────────── */
.pagination {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  justify-content: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-image: none;
  font-family: var(--font-mono);
  font-size: var(--t--1);
  color: var(--c-text-dim);
  transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.pagination .page-numbers:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination .page-numbers.current {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 700;
}
.pagination .dots { border-color: transparent; }

/* ── Vacío / 404 ──────────────────────────────────────────── */
/* OJO con el selector: WordPress pone la clase `error404` en el <body> cuando
   sirve una página de error. Un `.error404 { max-width: 68ch; text-align:
   center }` a secas no estiliza la sección — estiliza el DOCUMENTO ENTERO, y
   entonces la cabecera y el pie aparecen encogidos y centrados solo en esta
   página. Ya nos pasó con `.single`: por eso van cualificados con la etiqueta. */
.empty,
section.error404 {
  max-width: var(--w-prose);
  margin: 0 auto;
  padding: var(--s-10) 0;
  text-align: center;
}

/* El letrero: la figura y el número, encendidos en el mismo tubo. */
.error404__sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-4), 4vw, var(--s-7));
  min-height: clamp(140px, 26vw, 240px);
}

.error404__figure {
  display: block;
  color: var(--c-accent-lit);
  flex: none;
}
.error404__figure svg {
  height: clamp(110px, 22vw, 200px);
  width: auto;
  /* El neón de una figura no es text-shadow: es drop-shadow siguiendo su
     silueta.

     El halo va en CIAN, no en naranja. Un halo naranja alrededor de una figura
     naranja se come el contorno: la luz y el trazo son el mismo color, así que
     el borde se disuelve y el muñeco pierde definición. El cian es el opuesto
     del naranja en la rueda de color, de modo que MARCA el filo en lugar de
     fundirse con él — y es el mismo cian del glitch del titular, así que no
     entra un color nuevo en la paleta, se reutiliza uno que ya está.

     El núcleo sigue siendo casi blanco y muy ceñido (2px): es la capa que
     dibuja el borde. Sin ella, el cian tocaría el naranja directamente y el
     contorno quedaría sucio.

     Los desenfoques se quedan por debajo de 20px, y no por gusto: al apilar
     drop-shadows con blurs grandes, Chromium desborda la región del filtro y la
     RECORTA — aparece una caja oscura de bordes rectos alrededor de la figura.
     Un halo con esquinas no es un halo. */
  filter:
    drop-shadow(0 0 2px rgb(255 245 235 / 0.95))
    drop-shadow(0 0 5px rgb(95 243 240 / 0.9))
    drop-shadow(0 0 12px rgb(95 243 240 / 0.55))
    drop-shadow(0 0 19px rgb(70 200 255 / 0.32));
}

.error404__code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 15vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tr-tight);
  color: var(--c-accent-lit);
  text-shadow:
    0 0 1px rgb(255 200 170 / 0.95),
    0 0 4px rgb(252 97 33 / 1),
    0 0 12px rgb(252 97 33 / 0.8),
    0 0 26px rgb(252 97 33 / 0.45);
}

.error404__salidas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.error404__alt {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  color: var(--c-text-faint);
}
.error404__alt:hover { color: var(--c-accent); }

.empty__prompt,
.error404__prompt {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  color: var(--c-accent);
  word-break: break-all;
}

.error404__msg,
.empty__msg {
  margin-top: var(--s-4);
  font-size: var(--t-2);
  color: var(--c-text-strong);
}

.error404__hint {
  margin-top: var(--s-4);
  color: var(--c-text-dim);
}

/* Cualificados por la misma razón: `.error404 .btn` con la clase en el <body>
   alcanzaría CUALQUIER botón de la página, no solo los de la sección. */
section.error404 .btn { margin-top: var(--s-5); }
section.error404 .searchform,
.empty .searchform { margin-top: var(--s-6); }

/* ── Formulario de búsqueda ───────────────────────────────── */
.searchform {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 480px;
  margin-inline: auto;
  padding: var(--s-2) var(--s-3);
  border: var(--hairline);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  transition: border-color var(--d-fast) var(--e-out);
}
.searchform:focus-within { border-color: var(--c-accent); }
.searchform__prompt { color: var(--c-accent); font-family: var(--font-mono); }
.searchform input {
  flex: 1;
  min-width: 0;   /* sin esto, el input desborda el flex en móvil */
  padding: var(--s-2) 0;
  border: 0;
  background: none;
}
.searchform input:focus { box-shadow: none; }
.searchform button { border: 0; padding: var(--s-2) var(--s-3); }

/* ── Barra de progreso de lectura ─────────────────────────── */
.read-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--c-accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  box-shadow: var(--c-accent-glow);
}

/* ── Texturas por formato de post ─────────────────────────── */
/* El prompt (txt/img/snd/vid/quo) cambia de color según el tipo.
   Es el mismo naranja de familia, pero el ojo distingue el tipo de
   post antes de leer el título. */
.entry-card--video .entry-meta__prompt,
.entry-card--audio .entry-meta__prompt {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

.entry-card--image .entry-meta__prompt {
  border-style: dashed;
}

.entry-card--quote .entry-meta__prompt {
  background: transparent;
  border-color: var(--c-border-lit);
  color: var(--c-text-dim);
}

/* El botón de play sobre la miniatura del vídeo */
.entry-card__media { position: relative; }

.entry-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-3);
  color: var(--c-text-strong);
  background: rgb(10 10 12 / 0.35);
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.6);
  transition: background-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.entry-card:hover .entry-card__play {
  background: rgb(10 10 12 / 0.15);
  color: var(--c-accent);
}

/* Vídeo o audio SIN miniatura: un bloque que igual dice qué es */
.entry-card__slug {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-border);
  border-left: 2px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  background-image: none;
  transition: border-color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.entry-card__slug:hover { background: var(--c-surface-2); border-color: var(--c-border-lit); border-left-color: var(--c-accent); }

/* Dentro del bloque el play es estático, no una capa encima */
.entry-card__slug .entry-card__play {
  position: static;
  inset: auto;
  display: inline;
  background: none;
  font-size: var(--t-2);
  color: var(--c-accent);
  text-shadow: none;
}

.entry-card__slug-label {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* En un post de medio el texto es un pie de foto, no un adelanto */
.entry-card__excerpt--caption {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  color: var(--c-text-faint);
  margin-top: var(--s-4);
}

/* ── Embeds responsivos ───────────────────────────────────── */
/* Los YouTube de 2010 traen width/height fijos. tna_responsive_embeds()
   los envuelve acá y les quita las dimensiones; el contenedor manda. */
.embed {
  position: relative;
  margin-top: var(--s-6);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-surface);

  /* El vídeo SE SALE de la medida de lectura. La columna de texto son 68
     caracteres (~530px) porque leer líneas largas cansa — pero eso no tiene
     por qué encoger un vídeo. Se centra sobre el ancho del contenido (1140px),
     igual que la imagen destacada.
     `margin-left: 50%` + `translateX(-50%)` lo centra respecto a la columna,
     y como la columna ya está centrada en la página, el resultado también.
     El max-width impide que se salga de la pantalla en anchos intermedios. */
  width: var(--w-content);
  max-width: calc(100vw - var(--gutter) * 2);
  margin-left: 50%;
  transform: translateX(-50%);
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* margin: 0 NO es cosmético. La regla genérica `.single__body iframe` les
     pone un margin-top de 32px, y sobre un elemento posicionado en absoluto
     ese margen lo EMPUJA dentro de su propia caja: aparecía una franja gris
     arriba y el vídeo salía cortado por abajo. */
  margin: 0;
}

/* ── Página de Archivo ────────────────────────────────────── */
.archive-page {
  padding: var(--s-8) 0 var(--s-9);
}

.archive-page__prompt {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  color: var(--c-accent);
  margin-bottom: var(--s-4);
}

.archive-page__title { font-size: var(--t-4); }

.archive-page__count {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.archive-page__count [data-archive-count] { color: var(--c-accent); font-weight: 700; }

/* ── Filtros ──────────────────────────────────────────────── */
/* Sin JS no hay filtros: la lista entera está en el HTML y funciona igual.
   Mostrar botones muertos sería peor que no mostrarlos. */
.archive-filters { display: none; }
.js .archive-filters {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: var(--s-7) 0 var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}

.archive-filters__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.archive-filters__label {
  /* min-width, no width: "TIPO" en mayúsculas y con tracking mide más de
     3.5ch y se montaba encima del primer chip. */
  min-width: 5.5ch;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.chip {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
  cursor: pointer;
  transition:
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out),
    background-color var(--d-fast) var(--e-out);
}
.chip:hover { border-color: var(--c-border-lit); color: var(--c-text); background: transparent; }
.chip.is-active {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 700;
}

/* ── La lista ─────────────────────────────────────────────── */
.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archive-list li { margin: 0; }

/* Cabecera de año */
.archive-year {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-7) 0 var(--s-3);
}
.archive-year__num {
  font-family: var(--font-mono);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  color: var(--c-text-strong);
}
.archive-year__rule {
  flex: 1;
  height: 1px;
  background: var(--c-border);
}
.archive-year[hidden] { display: none; }

/* Una fila = un post. Denso a propósito: 109 entradas tienen que caber. */
.archive-row[hidden] { display: none; }

.archive-row__link {
  display: grid;
  grid-template-columns: 3.5rem 4.5rem 1fr auto;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--c-border);
  background-image: none;
  transition: background-color var(--d-fast) var(--e-out), padding-left var(--d-base) var(--e-out);
}
.archive-row__link:hover {
  background: var(--c-surface);
  padding-left: var(--s-3);
}

.archive-row__prompt {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.7;
}

.archive-row__date {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  color: var(--c-text-faint);
}

.archive-row__title {
  color: var(--c-text);
  transition: color var(--d-fast) var(--e-out);
}
.archive-row__link:hover .archive-row__title { color: var(--c-accent); }

.archive-row__arrow {
  color: var(--c-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-base) var(--e-snap);
}
.archive-row__link:hover .archive-row__arrow { opacity: 1; transform: none; }

.archive-empty {
  padding: var(--s-8) 0;
  text-align: center;
  font-family: var(--font-mono);
  color: var(--c-text-faint);
}
.archive-empty[hidden] { display: none; }

@media (max-width: 640px) {
  /* En móvil el prompt sobra: la fecha y el título son lo que importa. */
  .archive-row__link { grid-template-columns: 3.5rem 1fr auto; }
  .archive-row__prompt { display: none; }
  .archive-filters__label { width: 100%; }
}

/* Los posts de 2009 envolvían los vídeos en <p style="text-align:center">.
   Un <div> dentro de un <p> es HTML inválido: el navegador parte el párrafo
   y deja <p> vacíos flotando, que se ven como una franja gris sobre el vídeo.
   No vamos a reescribir el HTML de 2009; los escondemos. */
.single__body p:empty { display: none; }

/* ── Lightbox ─────────────────────────────────────────────── */
/* Sustituye al plugin lightbox-2 (que traía prototype.js + scriptaculous). */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgb(6 6 7 / 0.94);
  backdrop-filter: blur(6px);
  animation: tna-lb-in var(--d-base) var(--e-out);
}

.lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  box-shadow: 0 24px 80px -20px rgb(0 0 0 / 0.9);
}

.lightbox__close {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 44px;
  height: 44px;
  padding: 0;
  border-color: var(--c-border-lit);
  background: var(--c-bg);
  font-size: var(--t-0);
}

@keyframes tna-lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
}

/* Las imágenes ampliables se anuncian como tales */
.single__body a[rel~='lightbox'] { cursor: zoom-in; display: inline-block; }

/* ── Comentarios ──────────────────────────────────────────── */
.comments {
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-border);
}

.comments__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--t-1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--s-6);
}
.comments__prompt { color: var(--c-accent); }

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

/* Las respuestas anidadas: se marcan con una regla naranja, no con sangría
   ciega. Solo 3 de los 43 comentarios son respuestas; el hilo no es profundo. */
.comments__list .children {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding-left: var(--s-5);
  border-left: 2px solid var(--c-accent-a40);
}

.comment__body {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-border);
}
.comment:last-child > .comment__body { border-bottom: 0; }

.comment__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

/* La inicial del autor en vez del avatar. Cada Gravatar es una petición a
   gravatar.com — un tercero — y este theme no manda peticiones fuera. */
.comment__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--c-accent-a40);
  border-radius: var(--r-sm);
  background: var(--c-accent-a10);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--c-accent);
}

.comment__author {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  color: var(--c-text-strong);
}

.comment__date {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  color: var(--c-text-faint);
}

.comment__content {
  color: var(--c-text);
}
.comment__content p + p { margin-top: var(--s-4); }

.comment__moderation {
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  color: var(--c-accent);
}

.comment__reply {
  margin-top: var(--s-4);
}
.comment__reply a {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  background-image: none;
}

.comments__closed {
  margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--c-text-faint);
}

/* ── Formulario de comentario ─────────────────────────────── */
.comment-form {
  margin-top: var(--s-8);
}
.comment-form p { margin-top: var(--s-4); }
.comment-form label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.comment-form textarea { resize: vertical; min-height: 8rem; }
.comment-form .comment-notes,
.comment-form .comment-form-cookies-consent label {
  font-family: var(--font-sans);
  font-size: var(--t--1);
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text-faint);
}
.comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.comment-form-cookies-consent input { width: auto; }
.comment-form .submit { margin-top: var(--s-5); }

/* El aviso de "responder a X" */
#cancel-comment-reply-link {
  margin-left: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  text-transform: uppercase;
}

/* El asterisco de campo obligatorio */
.comment-form__req { color: var(--c-accent); }

/* La casilla de "guardar mis datos" del núcleo: que no grite */
.comment-form-cookies-consent label {
  margin-bottom: 0;
  cursor: pointer;
}

/* ── Turnstile (integración propia — ver inc/turnstile.php) ── */
/* El widget se pinta justo encima del botón, dentro del formulario. Va con
   data-size="flexible", que lo estira al ancho del contenedor en vez de
   dejarlo en los 300px de rigor: así mide exactamente lo mismo que el campo
   "Web (opcional)" que tiene encima. El interior es un iframe de Cloudflare
   y no se puede estilar desde acá — solo darle sitio y aire. */
.tna-turnstile {
  margin-top: var(--s-5);
  margin-bottom: var(--s-5);
}

.tna-turnstile .cf-turnstile {
  /* Mientras el iframe carga, el hueco ya está reservado: sin esto el botón
     "Enviar" pega un salto hacia abajo a mitad de lectura. */
  min-height: 65px;
}

.tna-turnstile iframe {
  max-width: 100%;
  border-radius: var(--r-sm);
}

/* "flexible" tiene un ancho MÍNIMO de 300px que no negocia, y en pantallas de
   320px la columna es más estrecha que eso: scroll horizontal, que acá no se
   permite. La escala lo encoge a la vista (300 × 0.88 = 264px, holgado), pero
   escalar NO cambia el espacio que el elemento ocupa: su caja sigue midiendo
   300px. Por eso hace falta el overflow, que corta esos 300px de caja — sin
   recortar nada visible, porque lo que se ve mide 264. */
@media (max-width: 360px) {
  .tna-turnstile {
    overflow: hidden;
  }
  .tna-turnstile .cf-turnstile {
    transform: scale(0.88);
    transform-origin: left top;
  }
}

.tna-turnstile__noscript {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t--1);
  color: var(--c-accent);
}

/* ── Audio (los 99 posts de música de la Bitácora) ─────────── */
/* El reproductor lo pinta el navegador y su interior NO se puede estilar: es
   una píldora gris clarito, que sobre un fondo casi negro aparece como una
   pastilla luminosa flotando en mitad del post.
   La inversión de color le da la vuelta —fondo oscuro, iconos claros— sin
   renunciar a los controles nativos, que son los que ya conoce cualquiera y
   los que funcionan con teclado y lector de pantalla. Escribir un reproductor
   propio sería mucho código para perder accesibilidad. */
audio {
  width: 100%;
  margin: var(--s-6) 0;
  border-radius: var(--r-sm);
  filter: invert(1) hue-rotate(180deg);
}

/* En modo de alto contraste la inversión sobra: el sistema ya manda. */
@media (forced-colors: active) {
  audio { filter: none; }
}

/* ── Contador de comentarios en la tarjeta ────────────────── */
.entry-meta__comments {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--c-text-dim);
  background-image: none;
  transition: color var(--d-fast) var(--e-out);
}
.entry-meta__comments:hover { color: var(--c-accent); }

.entry-meta__bubble {
  /* Alineación óptica: el icono se ve alto respecto a la mayúscula del mono. */
  margin-top: -1px;
  flex: none;
}