/* ==========================================================================
   bitacora.css — Bitácora de Overlord Corp (2026-10-26). Va DESPUÉS de producto.css.
   Idea: "cada entrada trae su recibo". El recibo es el mismo activo de la portada
   (#portafolio en index.html, tarea 1725): tira de térmica con borde dentado, franja
   de campo naranja a la izquierda, fecha en mono. Si una entrada no tiene imagen real,
   el recibo en grande ES la imagen. Reglas de marca intactas: naranja solo como
   campo, nunca texto; sin degradados de color ni sombras.

   RETÍCULA (verificada en las capturas de render_check):
   - Índice: 1080 px útiles, 2 columnas iguales con 32 px de medianil; la entrada más
     reciente ocupa las 2 (imagen 1.15fr | texto 1fr). Abajo de 760 px, 1 columna.
   - Todo medio de la cuadrícula mide 16:10 (imagen con contain sobre concreto, o el
     recibo en grande), así los títulos de cada fila arrancan a la misma altura.
   - Entrada: columna de lectura de 780 px, cuerpo a 62ch como el resto del sitio.
   - Ritmo vertical en múltiplos de 4 px (gaps 8/12/16/28/32/44).
   - Botón del CTA corto: esquina superior derecha cortada a 45° (regla de la marca).

   COLOR (qué significa, medido el 2026-10-26 sobre la captura completa del índice):
   - Concreto (fondo y superficies) = el papel; ~85 % de la página.
   - Tinta = texto, filetes y lo que se pulsa; ~11 % con texto e imágenes.
   - Campo naranja = "esto ya corre": franja del recibo, cuadrito de Producto y CTA final; ~4 %.
   - Categoría por llenado del cuadrito (lleno / medio / contorno): se lee también en una tinta.
   Contraste WCAG medido: tinta/fondo 14.30, tinta-suave/fondo 7.72, tinta/recibo 15.69,
   tinta-suave/recibo 8.47, tinta-suave/superficie-2 6.88, fondo/tinta 14.30, tinta/campo 5.37,
   tinta-tenue/fondo 5.56. Todos AA (≥ 4.5:1).
   ========================================================================== */

.bitacora-pag .wrap{ max-width: 1080px; }
.bitacora-pag .crumbs{ font-size: 12px; }
.bitacora-pag .b-articulo{ max-width: 780px; }

/* ---- Recibo (mismo dibujo que en la portada) ---- */
.recibo{ margin: 0; padding: 10px 12px 20px 14px; display: grid; gap: 3px;
  font-family: var(--f-etiqueta); font-size: 0.8125rem; line-height: 1.45; color: var(--c-tinta);
  background: var(--c-superficie); border-left: 4px solid var(--c-campo);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x; }
.recibo__fecha::before{ content: "Registro · "; color: var(--c-tinta-suave); font-weight: 500; }
.recibo__fecha{ font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.recibo__linea{ overflow-wrap: anywhere; }
.tapado{ background: var(--c-tinta); color: var(--c-fondo); padding: 0 4px; }

/* ---- Cabecera del índice ---- */
.b-cabecera h1{ max-width: 16ch; }

/* ---- Arquitectura del índice (tarea 1738) ----
   1) «Para empezar»: 3 destacadas, la primera a todo el ancho.
   2) «Todas las entradas, por lo que hacen»: 4 grupos por capacidad (Operación, Creación,
      Inteligencia, Con clientes), una fila por entrada: folio | título + recibo | tipo, fecha, estado.
   Capacidad = eje principal (qué hace). Tipo (Producto / Experimento / Detrás de cámaras) = filtro. */
.b-seccion{ margin: 0; font-family: var(--f-etiqueta); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tinta); }
.b-destacadas{ margin-top: 44px; }
.b-destacadas .b-lista{ margin-top: 14px; }
.b-indice{ margin-top: 72px; }
.b-indice__cab{ display: grid; gap: 14px; padding-bottom: 18px; border-bottom: 2px solid var(--c-tinta); }
.b-indice__cab .b-seccion{ font-family: var(--f-titular); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.01em; text-transform: none; line-height: 1.05; }
.b-saltos{ display: flex; flex-wrap: wrap; gap: 6px 22px; }
.b-saltos a{ font-family: var(--f-titular); font-weight: 800; font-size: 1.125rem; color: var(--c-tinta); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.b-saltos a span{ font-family: var(--f-etiqueta); font-weight: 500; font-size: 12px; color: var(--c-tinta-suave); }
.b-saltos a:hover, .b-saltos a:focus-visible{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.b-filtro__rotulo{ align-self: center; margin-right: 4px; font-family: var(--f-etiqueta); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tinta-suave); }
.b-grupo{ display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 32px; padding: 28px 0; border-bottom: 1px solid var(--c-tinta); scroll-margin-top: 16px; }
.b-grupo[hidden]{ display: none; }
.b-grupo__cab h3{ margin: 0; font-size: 1.5rem; line-height: 1.05; }
.b-grupo__cab p{ margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--c-tinta-suave); }
.b-filas{ list-style: none; margin: 0; padding: 0; }
.b-fila[hidden]{ display: none; }
.b-fila + .b-fila{ border-top: 1px solid color-mix(in srgb, var(--c-tinta) 22%, transparent); }
.b-fila a{ display: grid; grid-template-columns: 64px minmax(0, 1fr) 190px; gap: 4px 20px; padding: 14px 0; color: inherit; text-decoration: none; }
.b-fila__folio{ font-family: var(--f-etiqueta); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; padding-top: 4px; font-variant-numeric: tabular-nums; }
.b-fila__cuerpo{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.b-fila__titulo{ font-family: var(--f-titular); font-weight: 800; font-size: 1.1875rem; line-height: 1.15; color: var(--c-tinta); text-wrap: balance; }
.b-fila a:hover .b-fila__titulo, .b-fila a:focus-visible .b-fila__titulo{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.b-fila__titulo::after{ content: "\00a0→"; }
.b-fila__recibo{ align-self: flex-start; font-family: var(--f-etiqueta); font-size: 12px; line-height: 1.45; color: var(--c-tinta-suave); padding-left: 10px; border-left: 3px solid var(--c-campo); overflow-wrap: anywhere; }
.b-fila__lado{ display: flex; flex-direction: column; gap: 4px; padding-top: 3px; font-family: var(--f-etiqueta); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-tinta-suave); }
.b-fila__lado time{ font-variant-numeric: tabular-nums; }
.b-cap{ color: var(--c-tinta); }

/* ---- Entrada: más de la misma capacidad ---- */
.b-relacionadas{ margin-top: 40px; padding: 18px 20px; background: var(--c-superficie); }
.b-relacionadas ul{ list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.b-relacionadas a{ display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; font-weight: 600; line-height: 1.3; color: var(--c-tinta); text-decoration: none; }
.b-relacionadas a span{ font-family: var(--f-etiqueta); font-size: 12px; font-weight: 600; padding-top: 2px; color: var(--c-tinta-suave); }
.b-relacionadas a:hover{ text-decoration: underline; }

/* ---- Filtro por categoría ---- */
.b-filtro{ display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding-top: 18px; border-top: 2px solid var(--c-tinta); }
.b-filtro[hidden]{ display: none; }
.b-filtro button{ font-family: var(--f-etiqueta); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-tinta); background: transparent; border: 1.5px solid var(--c-tinta); border-radius: 0; padding: 8px 12px; cursor: pointer; min-height: 40px; }
.b-filtro button span{ color: var(--c-tinta-suave); margin-left: 4px; }
.b-filtro button[aria-pressed="true"]{ background: var(--c-tinta); color: var(--c-fondo); }
.b-filtro button[aria-pressed="true"] span{ color: var(--c-fondo); }

/* ---- Lista ---- */
.b-lista{ list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
.b-entrada[hidden]{ display: none; }
.b-enlace{ display: flex; flex-direction: column; gap: 16px; height: 100%; color: inherit; text-decoration: none; border-top: 3px solid var(--c-tinta); padding-top: 14px; }
.b-enlace:hover .b-titulo, .b-enlace:focus-visible .b-titulo{ text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.b-texto{ display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.b-titulo{ margin: 0; font-size: 1.5rem; line-height: 1.08; text-wrap: balance; }
.b-resumen{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-tinta-suave); max-width: 60ch; }
.b-leer{ margin-top: auto; padding-top: 4px; font-family: var(--f-etiqueta); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.b-estado{ margin: 0; font-family: var(--f-etiqueta); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-tinta-suave); }

/* Meta: folio · fecha · categoría. El cuadrito de la categoría es el único código de color:
   Producto = campo lleno, Experimento = medio campo, Detrás de cámaras = solo contorno. */
.b-meta{ margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-family: var(--f-etiqueta); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tinta-suave); }
.b-folio{ color: var(--c-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.b-meta time{ font-variant-numeric: tabular-nums; }
.b-cat{ display: inline-flex; align-items: center; gap: 7px; color: var(--c-tinta); }
.b-cat::before{ content: ""; width: 10px; height: 10px; box-shadow: inset 0 0 0 1.5px var(--c-tinta); }
.b-cat--producto::before{ background: var(--c-campo); }
.b-cat--experimento::before{ background: linear-gradient(90deg, var(--c-campo) 50%, transparent 50%); }

/* Medios */
.b-media{ margin: 0; }
.b-media img{ display: block; width: 100%; height: auto; max-height: 400px; object-fit: contain;
  border: 3px solid var(--c-tinta); background: #D9D3CB; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.b-media figcaption{ margin-top: 8px; font-family: var(--f-etiqueta); font-size: 12px; line-height: 1.4; color: var(--c-tinta-suave); }
/* Sin imagen real: el recibo en grande ocupa el lugar de la imagen, sobre una base de concreto. */
.b-media--recibo{ aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 24px clamp(18px, 4vw, 40px); background: var(--c-superficie-2); border: 3px solid var(--c-tinta);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.b-media--recibo .recibo{ font-size: clamp(0.875rem, 1.6vw, 1.0625rem); padding: 16px 18px 26px 20px; border-left-width: 6px; }

/* Destacada: la más reciente, a todo el ancho, imagen a la izquierda */
.b-entrada--destacada{ grid-column: 1 / -1; }
.b-entrada--destacada .b-enlace{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 32px; border-top-width: 4px; padding-top: 18px; }
.b-entrada--destacada .b-titulo{ font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.02; }
.b-entrada--destacada .b-media img{ max-height: 520px; }

/* En la cuadrícula todos los medios miden lo mismo (16:10), así los títulos de una fila quedan alineados */
.b-entrada:not(.b-entrada--destacada) .b-media img{ aspect-ratio: 16 / 10; max-height: none; }
.b-entrada:not(.b-entrada--destacada) .b-media figcaption{ min-height: 2.8em; }
.b-entrada:not(.b-entrada--destacada) .b-media--recibo{ margin-bottom: calc(2.8em * 12 / 16 + 8px); }
.b-vacio{ margin-top: 24px; font-size: 15px; color: var(--c-tinta-suave); }
.bitacora-pag .cta-final{ margin-top: 64px; }

/* ---- Página de entrada ---- */
.b-articulo > .b-meta{ margin-bottom: 4px; }
.b-articulo > .b-estado{ margin-top: 14px; }
.b-cta-corto{ margin: 18px 0 0; }
.b-cta{ display: inline-block; font-family: var(--f-texto); font-weight: 600; font-size: 15px; text-decoration: none;
  color: var(--c-sobre-tinta); background: var(--c-tinta); padding: 11px 22px 11px 16px; min-height: 44px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.b-cta:hover, .b-cta:focus-visible{ background: var(--c-fondo); color: var(--c-tinta); box-shadow: inset 0 0 0 2px var(--c-tinta); text-decoration: none; }
.b-articulo .b-media--grande{ margin-top: 28px; }
.b-articulo .b-media--grande img{ max-height: 560px; }
.b-recibos{ margin: 28px 0 8px; display: grid; gap: 12px; max-width: 620px; }
.b-recibos__titulo{ margin: 0; font-family: var(--f-etiqueta); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tinta); }
.b-articulo section.block{ padding: 32px 0; }
.b-articulo .nota-honesta{ margin-top: 8px; }
.b-vecinas{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; padding-top: 18px; border-top: 2px solid var(--c-tinta); }
.b-vecinas a{ display: flex; flex-direction: column; gap: 4px; font-family: var(--f-titular); font-weight: 800; font-size: 1.05rem; line-height: 1.15; text-decoration: none; color: var(--c-tinta); }
.b-vecinas a:hover{ text-decoration: underline; }
.b-vecinas a span{ font-family: var(--f-etiqueta); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tinta-suave); }
.b-vecinas .sig{ text-align: right; }

/* ---- MOTION: el recibo "se imprime" al cargar ----
   Gesto firma: "avance de térmica". El papel sale RENGLÓN POR RENGLÓN (cada salto = 1.45em,
   el interlineado del recibo), así nunca se ve una letra cortada a media altura.
   Curva con nombre: "térmica" = step-end por renglón (sin easing: una impresora no acelera).
   Duración base: 160 ms por renglón; escalonado entre recibos: 90 ms; arranque: 150 ms.
   Una sola vez, sin loop. Con prefers-reduced-motion no hay animación: el recibo sale completo. */
@media (prefers-reduced-motion: no-preference){
  .recibo__linea{ animation: b-termica 480ms step-end both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
}
@keyframes b-termica{
  0%{ clip-path: inset(0 0 100% 0); }
  33.333%{ clip-path: inset(0 0 calc(100% - 1.45em) 0); }
  66.666%{ clip-path: inset(0 0 calc(100% - 2.9em) 0); }
  100%{ clip-path: inset(0 0 0 0); }
}

@media (max-width: 900px){
  .b-grupo{ grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 760px){
  .b-lista{ grid-template-columns: 1fr; gap: 36px; }
  .b-fila a{ grid-template-columns: 52px minmax(0, 1fr); }
  .b-fila__lado{ grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; padding-top: 0; }
  .b-entrada--destacada .b-enlace{ display: flex; }
  .b-media--recibo{ aspect-ratio: auto; min-height: 180px; }
  .b-vecinas{ grid-template-columns: 1fr; }
  .b-vecinas .sig{ text-align: left; }
}

/* Ajustes de la revisión visual (tarea 1738) */
.b-indice__cab .b-filtro{ margin: 4px 0 0; padding-top: 0; border-top: 0; }
@media (min-width: 761px){ .b-fila a{ grid-template-columns: 64px minmax(0, 1fr) 236px; } .b-fila__lado{ letter-spacing: 0.04em; } }
@media (max-width: 760px){
  .b-fila a{ grid-template-columns: 1fr; gap: 6px; }
  .b-fila__lado{ grid-column: auto; }
  .b-fila__folio{ padding-top: 0; white-space: nowrap; }
}