/* ============================================================
   Pelatech — Blog 2026
   Depende de pelatech-2026.css (tokens, nav, .wrap, .sec, .sec-h, .idx,
   .crumbs, .case-*, .btn, .contact, .ft).
   Acá vive solo lo que el sistema base no resuelve: el blog es la primera
   parte del sitio con texto largo, y la landing nunca lo necesitó.
   ============================================================ */

/* ---- registro en modo listado ----
   Mismo componente .idx del hero, con las filas apiladas y el título al
   frente. Sin .reg el registro no cambia en absoluto. */
.idx.reg .idx-row{padding:18px 16px;align-items:start}
.idx.reg .idx-row .n{padding-top:5px;white-space:nowrap}
.idx.reg .idx-row .nm{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.015em;line-height:1.32}
.idx.reg .idx-row .sub{display:block;margin-top:7px;line-height:1.5;max-width:64ch}
.idx.reg .idx-row .go{align-self:center}
@media(max-width:560px){
  .idx.reg .idx-row{grid-template-columns:auto 1fr;gap:10px 12px}
  .idx.reg .idx-row .nm{font-size:16px}
  .idx.reg .idx-row .go{grid-column:2;justify-self:start}
}

/* ---- prosa ----
   El único texto largo del sitio. Medida corta e interlineado alto: se lee
   seguido, no se escanea como una landing.
   Ojo: la convención "em = acento verde" está escopada a headings
   (.sec-h .t em, .case-top h1 em), así que acá <em> sale en itálica normal,
   que es lo que necesita el resumen del paper. */
.prose{max-width:68ch}
.prose p{font-size:16px;line-height:1.75;color:var(--ink-2)}
.prose p + p{margin-top:18px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--accent)}
.prose h3{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:36px 0 12px}
.prose h3:first-child{margin-top:0}
.prose > p:first-child{margin-top:0}
.prose .lead{font-size:18px;line-height:1.65;color:var(--ink)}

/* listas: filas con separador, en el mismo idioma visual que .p-specs */
.prose ul{list-style:none;border-top:1px solid var(--line);margin-top:22px}
.prose li{padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.prose li strong{display:block;margin-bottom:3px;font-size:13.5px}

/* nota al pie de una sección: más chica y apagada que el cuerpo */
.prose .fine{margin-top:22px;font-size:13px;line-height:1.6;color:var(--muted);max-width:60ch}

/* ---- tira de cifras ----
   Mismo lenguaje que .facts del hero, pero componente suelto: .facts está
   atado al borde superior del hero. */
.figures{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:clamp(28px,4vw,40px) 0}
.figures .f{padding:22px 24px 24px;border-right:1px solid var(--line)}
.figures .f:first-child{padding-left:0}
.figures .f:last-child{border-right:0}
.figures .v{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.figures .v em{font-style:normal;color:var(--accent)}
.figures .l{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.45;max-width:26ch}
@media(max-width:820px){
  .figures{grid-template-columns:1fr 1fr}
  .figures .f{border-bottom:1px solid var(--line)}
  .figures .f:nth-child(2n){border-right:0}
  .figures .f:nth-child(3){padding-left:0}
  .figures .f:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:480px){
  .figures{grid-template-columns:1fr}
  .figures .f{border-right:0;padding-left:0}
  .figures .f:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .figures .f:last-child{border-bottom:0}
}

/* ---- bloque de cita / BibTeX ----
   overflow-wrap:anywhere para que una URL larga o un campo de BibTeX no
   desborde el viewport a 320 px. */
.cite{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;white-space:pre-wrap;overflow-wrap:anywhere;max-width:68ch;tab-size:2}
.cite + .cite{margin-top:14px}

/* ---- diagrama del flujo ----
   Ocho etapas en el mismo lenguaje visual que .steps de la home: barra de
   color arriba, numero en mono, titulo y rol. Sin flechas entre cajas a
   proposito: al hacer wrap la grilla, una flecha colgada al final de fila es
   el modo de falla clasico; el orden se lee por la numeracion.
   La banda inferior cruza todo el ancho porque la autoridad humana no es una
   etapa mas: aprueba la corrida antes de empezar, decide producto en el medio
   y responde por el resultado. */
.flow{margin:clamp(28px,4vw,40px) 0}
.flow-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.fstep{padding:0 18px;border-right:1px solid var(--line);padding-bottom:22px}
.fstep:first-child,.fstep:nth-child(5){padding-left:0}
.fstep:nth-child(4),.fstep:last-child{border-right:0}
.fstep:nth-child(-n+4){border-bottom:1px solid var(--line);padding-bottom:24px}
.fstep:nth-child(n+5){padding-top:24px}
/* Prefijo fs- a proposito: .ft ya es el footer del sitio (pelatech-2026.css)
   y su padding de 88px se colaba en cada caja. */
.fstep .bar{height:2px;background:var(--line-2);margin-bottom:16px}
.fstep .fs-n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
.fstep .fs-t{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin:8px 0 7px}
.fstep .fs-w{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.4}

/* las dos compuertas son el corazon del metodo: van en acento */
.fstep.gate .bar{background:var(--accent)}
.fstep.gate .fs-n{color:var(--accent)}
.fstep.gate .fs-t{color:var(--accent)}
/* la ejecucion arbitra solo lo que tiene oraculo: barra partida */
.fstep.oracle .bar{background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 10px)}

.flow-human{margin-top:0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.flow-human .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);flex-shrink:0}
.flow-human .t{font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:78ch}

@media(max-width:900px){
  .flow-track{grid-template-columns:1fr 1fr}
  .fstep{padding-left:18px;padding-top:24px;padding-bottom:24px}
  .fstep:nth-child(odd){padding-left:0}
  .fstep:nth-child(even){border-right:0}
  .fstep:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .fstep:nth-child(5),.fstep:nth-child(6){border-bottom:1px solid var(--line)}
  .fstep:nth-child(-n+2){padding-top:22px}
}
@media(max-width:560px){
  .flow-track{grid-template-columns:1fr}
  .fstep{border-right:0;padding-left:0;border-bottom:1px solid var(--line)}
  .fstep:last-child{border-bottom:0}
}

/* ---- hoja de receta ----
   Densidad mayor que .prose: es una hoja de consulta, no un texto para leer
   de corrido. Bloques numerados con la clave a la izquierda. */
.sheet{max-width:78ch}
.sheet .blk{border-top:1px solid var(--line);padding:20px 0 22px}
.sheet .blk:last-child{border-bottom:1px solid var(--line)}
.sheet .blk-h{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:baseline;margin-bottom:12px}
.sheet .blk-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.sheet .blk-t{font-size:17px;font-weight:600;letter-spacing:-.015em}
.sheet .blk-b{padding-left:48px}
.sheet .blk-b p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.sheet .blk-b p + p{margin-top:10px}
.sheet ul{list-style:none;margin:0}
.sheet li{position:relative;padding:7px 0 7px 18px;font-size:14px;line-height:1.55;color:var(--ink-2);border-bottom:1px solid var(--line)}
.sheet li:last-child{border-bottom:0}
.sheet li::before{content:'';position:absolute;left:0;top:15px;width:6px;height:1px;background:var(--accent)}
.sheet li b{color:var(--ink);font-weight:600}
.sheet .never li::before{background:var(--warn)}
.sheet .fine{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--muted)}
@media(max-width:560px){
  .sheet .blk-h{grid-template-columns:26px 1fr;gap:10px}
  .sheet .blk-b{padding-left:0}
}

/* ---- copiar al portapapeles ----
   La hoja se lee en pantalla y se pega en otro lado: la consigna y la receta
   entera tienen que salir de aca sin seleccionar a mano. */
.cite-wrap{position:relative}
.copy{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);padding:5px 9px;cursor:pointer;transition:border-color .2s,color .2s}
.copy:hover{border-color:var(--accent);color:var(--accent)}
.copy.ok{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.copy svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.copy.ok .i-copy{display:none}
.copy .i-ok{display:none}
.copy.ok .i-ok{display:block}
.sheet-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,3vw,28px);padding-top:20px;border-top:1px solid var(--line)}
.sheet-actions .copy{position:static;font-size:11px;padding:10px 14px}
.sheet-actions .hint{font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:560px){
  .copy{position:static;margin-bottom:8px}
  .cite-wrap{display:flex;flex-direction:column-reverse;align-items:flex-start}
  .cite-wrap .cite{width:100%}
}

/* ---- impresion: la hoja tiene que caber en una carilla ----
   Se van nav, footer, fondo animado, migas y cualquier cosa que no sea la
   receta. Colores forzados a tinta sobre papel: los tokens del tema oscuro
   gastarian medio cartucho y quedarian ilegibles. */
@media print{
  @page{size:A4;margin:10mm 12mm}
  /* La nota de cierre repite lo que ya dice el encabezado de impresion
     (autor, licencia, DOI): en papel es redundante y cuesta media carilla. */
  nav.nav,footer.ft,.fondo,.crumb-row,.langs,.case-hero,.sheet + .prose,.copy,.sheet-actions,.rv-hide,.print-hide{display:none !important}
  html,body{background:#fff !important;color:#000 !important}
  .sec{padding:0 !important;border:0 !important;background:transparent !important}
  .wrap{max-width:none !important;padding:0 !important}
  .rv{opacity:1 !important;transform:none !important}
  /* Dos columnas para que los cinco bloques entren en una carilla; la
     consigna cruza el ancho completo porque en columna angosta el
     monoespaciado se parte en demasiadas lineas. */
  .sheet{max-width:none;column-count:2;column-gap:16pt}
  .sheet .blk{border-top:.5pt solid #bbb;padding:4pt 0 5pt;break-inside:avoid}
  .sheet .blk:nth-child(2){column-span:all}
  .sheet .blk:last-child{border-bottom:.5pt solid #bbb}
  .sheet .blk-h{grid-template-columns:22px 1fr;gap:8px;margin-bottom:5pt}
  .sheet .blk-n{color:#000;font-size:7.5pt}
  .sheet .blk-t{font-size:9.5pt}
  .sheet .blk-b{padding-left:0}
  .sheet .blk-b p,.sheet li{font-size:7.4pt;line-height:1.24;color:#000}
  .sheet .blk-b p + p{margin-top:3pt}
  .sheet li{padding:1.5pt 0 1.5pt 8pt;border-bottom:.5pt solid #e4e4e4}
  .sheet li::before{background:#000;top:7pt;width:4pt}
  .sheet .never li::before{background:#000}
  .sheet .fine{font-size:6.7pt;color:#333;margin-top:3pt}
  .print-title{display:block !important}
  .cite{background:#f4f4f4 !important;border:.5pt solid #ccc !important;color:#000 !important;font-size:8pt;padding:6pt 8pt}
  a{color:#000 !important;text-decoration:none !important}
}
.print-title{display:none}

/* ---- switch de idioma ----
   Va en la fila de las migas. La página en inglés lo necesita para volver;
   la española, para ofrecer la traducción. */
.langs{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.langs a,.langs span{padding:4px 9px;border:1px solid var(--line);border-radius:99px;color:var(--muted)}
.langs a:hover{border-color:var(--accent);color:var(--accent)}
.langs .on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.crumb-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}