/* ============================================================
   jmlucero.com — rediseño v6
   Portado de design/mockups-v6/. Tipografía del sistema: sin
   fuentes externas, igual que las maquetas aprobadas.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
/* las imágenes llevan width/height (reservan el hueco); con height:auto se escalan sin deformarse */
img{height:auto}
.art img{max-width:100%}
:root{--pag:1240px;--gap:22px;--fondo:#f2f1ef}
/* La hoja: el contenido va sobre blanco, la página es gris, y hay 22 de aire parejo
   por los cuatro lados — el mismo que separa una imagen de la otra. Un solo ancho para
   todo: encabezado, contenido y pie cuelgan de él. */
.hoja{background:#fff;max-width:var(--pag);margin:22px auto;padding:22px;
  position:relative;z-index:2}
.hoja header{padding-left:0;padding-right:0;padding-top:0}
.hoja footer{padding-left:0;padding-right:0}
/* Todo lo que cuelga de la hoja pierde su aire lateral propio: el de la hoja ya son
   los 22, y sumarle el suyo dejaba el texto corrido hacia adentro respecto del nombre. */
.hoja .bio,.hoja .prensa,.hoja .grid,.hoja .grid3,.hoja .proy-grandes,.hoja .fichero,.hoja .lista,.hoja .ficha,
.hoja .ficha-intro,.hoja .intro,.hoja .catalogo,.hoja .art,.hoja .seguir,
.hoja .tema{padding-left:0;padding-right:0}
/* Los bloques que ocupan el ancho completo de la hoja sueltan además su ancho propio.
   Los que NO están acá conservan el suyo a propósito: .art, .seguir y .ficha-intro son
   columnas de lectura de 760 y tienen que seguir siéndolo. */
.hoja .prensa,.hoja .grid,.hoja .grid3,.hoja .proy-grandes,.hoja .fichero,.hoja .lista,.hoja .catalogo,.hoja .intro{
  max-width:none}
/* la bio es la excepción: dejó de ser una columna para ser la grilla de tres */
.hoja .bio{max-width:none}
body{background:var(--fondo);color:#111;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}

/* campo de anillos fijo de fondo, siempre vivo */
#dots{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}

/* ---------- header ---------- */
header{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:baseline;padding:22px}
header .brand{font-weight:800;font-size:26px;letter-spacing:.02em;text-transform:uppercase;color:#111;text-decoration:none}
header .nav{display:flex;gap:28px}
header .nav a{color:#111;text-decoration:none;font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.02em;opacity:.55}
header .nav a.activo{opacity:1;color:#EA4335}
header .nav a:hover{color:#EA4335;opacity:1}
/* desplegables: se abren con el mouse (acá), con el teclado y con el toque (site.js) */
.nav-item{position:relative}
header .nav a.tiene-sub::after{content:" \25BE";font-size:.8em}
header .nav .sub{display:none;position:absolute;top:100%;left:-26px;z-index:60;list-style:none;
  background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.14);padding:18px 26px 14px;min-width:200px;white-space:nowrap}
/* los sub-ítems van en negro pleno; el menú principal sigue gris */
header .nav .sub a{display:block;padding:8px 0;opacity:1}
.nav-item:hover .sub,.nav-item.abierto .sub{display:block}
/* English no es parte del menú: va al final, separado por una barra gris clara */
header .nav a.en{border-left:1px solid #d6d6d6;padding-left:28px}
/* el encabezado queda fijo al bajar (sólo escritorio). Sube 22 y se ensancha 22 por lado
   para que el blanco llegue a los bordes de la hoja; el texto queda donde estaba. */
@media(min-width:801px){
  .hoja header{position:sticky;top:0;z-index:50;background:#fff;
    margin:-22px -22px 0;padding:22px}
}
header .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px 0;background:none;border:0}
header .burger span{display:block;width:26px;height:3px;background:#111}

/* mobile: hamburguesa a la izquierda + nombre centrado */
@media(max-width:800px){
  header{align-items:center;padding:18px 20px}
  header .burger{display:flex}
  header .brand{position:absolute;left:50%;transform:translateX(-50%);font-size:21px;white-space:nowrap}
  header .nav{display:none}
}

/* menú hamburguesa: overlay a pantalla completa con los mismos ítems */
.menu-overlay{position:fixed;inset:0;background:#fff;z-index:200;display:none;flex-direction:column;justify-content:center;padding:26px}
.menu-overlay.open{display:flex}
.menu-overlay{overflow-y:auto}
.menu-overlay a:not(.sub-m){margin-top:12px}
.menu-overlay a.sub-m{font-size:17px;font-weight:700;letter-spacing:0;color:#555;padding-left:18px;line-height:1.5;margin-top:0}
.menu-overlay a.en-m{font-size:17px;font-weight:700;letter-spacing:0;color:#555;margin-top:22px}
.menu-overlay a{color:#111;text-decoration:none;font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:-.015em;line-height:1.18}
.menu-overlay .cerrar{position:absolute;top:18px;right:22px;font-size:33px;font-weight:400;cursor:pointer;line-height:1;background:none;border:0;font-family:inherit}

/* ---------- intro de sección ---------- */
.intro{position:relative;z-index:2;padding:44px 22px 24px}
h1.titulo{margin:0}
/* visible sólo para buscadores y lectores de pantalla */
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.intro .titulo{font-weight:800;font-size:clamp(33px,3.4vw,41px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.intro .bajada{margin-top:12px;font-size:21px;line-height:1.45;color:#555;font-weight:400;max-width:680px}

/* ---------- proyectos: fichero monoespaciado ---------- */
.catalogo{position:relative;z-index:2;padding:16px 22px 66px;font-family:'JetBrains Mono',Menlo,Consolas,monospace}
.catalogo .fila{display:grid;grid-template-columns:52px 1.5fr 2.4fr .9fr .8fr;gap:18px;align-items:baseline;padding:16px 8px;border-bottom:1px solid #e4e4e4;color:#111;text-decoration:none;transition:background .12s}
.catalogo .cab{border-bottom:2px solid #111;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#999;padding-bottom:10px}
.catalogo .num{color:#bbb;font-size:13px}
.catalogo .nom{font-weight:700;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.01em}
.catalogo .que{color:#666;font-size:13px;line-height:1.35}
.catalogo .est{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#999}
.catalogo .anio{font-size:13px;color:#888;text-align:right}
a.fila:hover{background:#f4f2ec}
a.fila:hover .nom{color:#EA4335}
/* activos: número y estado en rojo, marca visible */
.catalogo .act .num{color:#EA4335;font-weight:700}
.catalogo .act .nom{color:#111}
.catalogo .act .est{color:#EA4335;font-weight:700}
a.act.fila:hover .nom{color:#EA4335}
@media(max-width:800px){
  .catalogo .fila{grid-template-columns:34px 1fr;gap:4px 12px;padding:14px 4px}
  .catalogo .cab{display:none}
  .catalogo .que{grid-column:2}
  .catalogo .est,.catalogo .anio{grid-column:2;text-align:left;margin-top:2px}
  /* cuatro escalones en mobile: 13 dato / 16 qué es / 20 nombre / 28 titular */
  .catalogo .num,.catalogo .est,.catalogo .anio{font-size:13px}
  .catalogo .que{font-size:17px}
  .catalogo .nom{font-size:21px}
}

/* ---------- ficha de proyecto ---------- */
/* cabecera: video full-bleed con el título encima */
.vhead{position:relative;z-index:2;height:72vh;min-height:420px;overflow:hidden}
.vhead video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vhead .velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.vhead h1{position:absolute;left:22px;bottom:26px;right:22px;color:#fff;font-weight:800;font-size:clamp(26px,3.4vw,41px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.vhead .rol{position:absolute;left:22px;bottom:8px;color:rgba(255,255,255,.75);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* el bloque de texto de la ficha (en las maquetas se llamaba .intro, pero ese
   nombre ya lo usa el título de sección de Proyectos) */
.ficha-intro{position:relative;z-index:2;max-width:760px;padding:44px 22px 10px}
.ficha-intro p{font-size:21px;line-height:1.55;margin-bottom:26px}
.video{position:relative;z-index:2;max-width:980px;margin:24px auto 10px;padding:0 22px;aspect-ratio:16/9}
.video iframe{width:100%;height:100%;border:0}
.art .video{padding:0;margin:24px 0}
.tema{position:relative;z-index:2;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.16em;padding:44px 22px 14px;color:#111}

/* ---------- grilla de tarjetas ---------- */
.grid{position:relative;z-index:2;columns:3;column-gap:22px;padding:22px 22px 44px}
.tile{position:relative;display:block;width:100%;margin-bottom:22px;break-inside:avoid;cursor:pointer;overflow:hidden;text-decoration:none;color:inherit}
.tile img{width:100%;display:block}
/* el título aparece sólo al pasar el mouse */
.tile .cap{position:absolute;top:16px;left:16px;right:16px;color:#fff;font-weight:800;font-size:clamp(21px,2.4vw,33px);line-height:1.1;letter-spacing:-.015em;text-transform:uppercase;opacity:0;transition:opacity .2s;z-index:3}
.tile:hover .cap{opacity:1}
/* hover: la imagen se convierte en ASCII (el modo ASCII de Circular Music) */
.tile canvas.ascii{position:absolute;inset:0;width:100%;height:100%;background:#000;opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}
.tile:hover canvas.ascii{opacity:1}
/* tarjeta de artículo = tapa tipográfica: fecha / TÍTULO BLOQUE / bajada */
.art-tile{background:#111;color:#fff;padding:22px 20px 24px;min-height:400px;display:flex;flex-direction:column;justify-content:flex-start}
.art-tile .arriba{font-size:13px;font-weight:700;letter-spacing:.08em;color:#999;margin-bottom:16px}
/* Un escalón por debajo del título de sección: los dos en 41 hacían que la tapa de
   una pieza pesara lo mismo que el nombre de la sección entera. */
.art-tile .t{font-weight:800;font-size:clamp(21px,2.4vw,33px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.art-tile .b{margin-top:13px;font-size:17px;line-height:1.45;color:#bbb;font-weight:400;text-transform:none;letter-spacing:0}

/* paleta póster (referencia → rol). Sin imagen, la tapa es color plano */
:root{--c-klein:#1F3AA5;--c-bermellon:#C2331B;--c-amarillo:#F2C200;--c-verde:#1E6B4A;--c-magenta:#B2256C;--c-negro:#111}
.art-tile.p-klein{background:var(--c-klein);color:#fff}
.art-tile.p-bermellon{background:var(--c-bermellon);color:#fff}
.art-tile.p-amarillo{background:var(--c-amarillo);color:#111}
.art-tile.p-amarillo .arriba{color:rgba(0,0,0,.55)}
.art-tile.p-amarillo .b{color:rgba(0,0,0,.75)}
.art-tile.p-verde{background:var(--c-verde);color:#fff}
.art-tile.p-magenta{background:var(--c-magenta);color:#fff}
.art-tile.p-negro{background:var(--c-negro);color:#fff}
/* con foto: la imagen va en --img y cada color pone su propio velo encima, para que
   el texto se lea sin importar la foto */
.art-tile.con-img{color:#fff;background-size:cover;background-position:center top;
  background-image:linear-gradient(180deg,rgba(5,5,15,.05),rgba(5,5,15,.82)),var(--img)}
.art-tile.con-img.p-klein{background-image:linear-gradient(180deg,rgba(8,18,60,.08),rgba(6,15,50,.8)),var(--img)}
.art-tile.con-img.p-verde{background-image:linear-gradient(180deg,rgba(8,30,40,.08),rgba(6,25,35,.8)),var(--img)}
.art-tile.con-img.p-magenta{background-image:linear-gradient(180deg,rgba(60,8,38,.08),rgba(50,6,32,.8)),var(--img)}
.art-tile.con-img.p-bermellon{background-image:linear-gradient(180deg,rgba(70,14,8,.08),rgba(58,12,6,.8)),var(--img)}
.art-tile.con-img.p-amarillo{background-image:linear-gradient(180deg,rgba(25,20,5,.08),rgba(20,16,4,.8)),var(--img)}
/* las fotos claras (capturas de sitios, papel) llevan un velo parejo y más oscuro */
.art-tile.con-img.claro{background-image:linear-gradient(180deg,rgba(5,5,15,.62),rgba(5,5,15,.86)),var(--img)}
.art-tile.con-img .arriba{color:rgba(255,255,255,.65)}
.art-tile.con-img .b{color:#e2e0e8}

/* ---------- Proyectos ----------
   Arriba, los que pesan: uno grande y tres al costado. La columna de la derecha manda la
   altura y la foto del grande se estira hasta que los dos pies quedan alineados; con un
   alto fijo se desalineaba apenas cambiaba un texto. */
.proy-grandes{position:relative;z-index:2;display:grid;grid-template-columns:2fr 1fr;
  gap:22px;align-items:stretch;padding:0 22px 10px}
.proy-grandes .col{display:grid;gap:22px;align-content:start}
.proy-grandes a{display:block;text-decoration:none;color:#111}
.proy-grandes img{width:100%;display:block;object-fit:cover}
.proy-grandes .uno{display:flex;flex-direction:column}
.proy-grandes .uno img{flex:1;min-height:0;height:auto}
.proy-grandes .chico img{height:156px}
.proy-grandes .pie{padding:12px 0 0}
/* en el grande el nombre va ARRIBA de la foto, así que el aire pasa abajo del texto */
.proy-grandes .uno .pie{padding:0 0 14px}
.proy-grandes .n{font-weight:800;font-size:26px;letter-spacing:-.02em}
.proy-grandes .chico .n{font-size:21px}
.proy-grandes .q{font-size:17px;color:#666;margin-top:4px;line-height:1.4}
.proy-grandes a:hover .n{color:#EA4335}
@media(max-width:800px){
  .proy-grandes{grid-template-columns:1fr;padding:0 20px 10px}
  .proy-grandes .uno img{height:280px;flex:none}
}

/* Abajo el fichero, que para un historial es lo correcto. La foto del que se señala
   aparece al costado; en el celular esa columna no se muestra. */
.fichero{position:relative;z-index:2;display:grid;grid-template-columns:1fr 420px;
  gap:34px;align-items:start;padding:0 22px 66px}
.fichero .filas .fila{display:grid;grid-template-columns:52px 1.4fr 2fr .8fr;gap:18px;
  align-items:baseline;padding:18px 0;border-bottom:1px solid #e4e4e4;
  text-decoration:none;color:#111;font-family:'JetBrains Mono',Menlo,Consolas,monospace}
.fichero a.fila:hover{background:#faf8f4}
.fichero a.fila:hover .nom{color:#EA4335}
.fichero .num{color:#bbb;font-size:13px}
.fichero .nom{font-weight:700;font-size:21px;letter-spacing:-.01em}
.fichero .que{color:#666;font-size:13px;line-height:1.35}
.fichero .anio{font-size:13px;color:#888;text-align:right}
/* un activo que no sea de los grandes cae acá abajo, y se marca en rojo como antes */
.fichero .act .num{color:#EA4335;font-weight:700}
.fichero .act .nom{color:#111}
.fichero .visor{position:sticky;top:22px;height:420px;overflow:hidden}
.fichero .visor img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:800px){
  .fichero{grid-template-columns:1fr;padding:0 20px 66px}
  .fichero .visor{display:none}
  .fichero .filas .fila{grid-template-columns:34px 1fr;gap:4px 12px;padding:14px 4px}
  /* la escala del fichero en el celular está cerrada: 13 el dato, 17 el qué es, 21 el
     nombre. No se toca. */
  .fichero .que{grid-column:2;font-size:17px}
  .fichero .anio{grid-column:2;text-align:left;margin-top:2px}
}

/* grilla pareja de tres, para el archivo */
/* grilla pareja de tres: cada pieza arranca donde le toca y las de una misma fila
   miden lo mismo. Sin align-items:start, que dejaba cada tarjeta a su altura. */
.grid3{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid3 .tile{margin-bottom:0}
/* Proyectos: la compañía actual ocupa la fila entera, con su texto a lo ancho */
.grid3 .art-tile.lider{grid-column:1/-1;min-height:400px}
.grid3 .art-tile.lider .t{font-size:clamp(28px,4.4vw,64px)}
.grid3 .art-tile.lider .b{max-width:34em}
/* con foto: la ilustración a lo ancho, mostrando el cielo, que es donde va el texto */
.grid3 .art-tile.lider.con-img{background-image:linear-gradient(90deg,rgba(5,5,15,.78),rgba(5,5,15,.45) 55%,rgba(5,5,15,.05)),var(--img);background-position:center 30%}
@media(max-width:800px){.grid3{display:block}.grid3 .tile{margin-bottom:22px}}

/* ritmo de recortes para romper la previsibilidad de la grilla */
.tile img.c-sq{aspect-ratio:1/1;object-fit:cover}
.tile img.c-tall{aspect-ratio:3/4;object-fit:cover}
.tile img.c-pano{aspect-ratio:16/9;object-fit:cover}
@media(max-width:800px){.grid{columns:1;padding:14px 20px 90px}}

/* ---------- la grilla de la portada ----------
   Dos alturas y nada más: 212 la celda, 446 la pieza grande (dos celdas más el aire).
   Cada pieza declara su tamaño en content/home.yml, así las bandas cierran parejas y
   todo encaja tanto en columnas como en filas. */
.grilla{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:212px;gap:22px;padding:0}
.p{position:relative;display:block;overflow:hidden;background:#eee;text-decoration:none;
  background-image:var(--img);background-size:cover;background-position:center}
.p.gr{grid-row:span 2}
.p-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* el efecto de caracteres se dibuja encima al pasar el mouse: la imagen abajo, el
   efecto en el medio, la leyenda arriba de todo */
.p canvas.ascii{position:absolute;inset:0;width:100%;height:100%;background:#000;
  opacity:0;transition:opacity .2s;z-index:2;pointer-events:none}
.p:hover canvas.ascii{opacity:1}
/* fotos y proyectos: sin texto, la leyenda aparece al pasar el mouse */
.p-foto .cap{position:absolute;top:16px;left:16px;right:16px;color:#fff;font-weight:800;
  font-size:clamp(21px,2.4vw,33px);line-height:1.1;letter-spacing:-.015em;
  text-transform:uppercase;opacity:0;transition:opacity .2s;z-index:3}
.p-foto:hover .cap{opacity:1}
/* con `cap_fija: true` en home.yml la leyenda queda siempre a la vista */
.p-foto.cap-fija .cap{opacity:1;top:auto;bottom:16px}
.p-foto.cap-fija::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;z-index:1;
  background:linear-gradient(180deg,rgba(5,5,15,0),rgba(5,5,15,.85));pointer-events:none}
/* ensayos: título corto, siempre visible. El velo va DENTRO del fondo, no como capa
   aparte: aparte, el efecto de caracteres lo lee como tipografía y llena de ruido. */
.p-art{color:#fff;background-color:#111;
  background-image:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72) 100%),var(--img)}
/* el texto va POR ENCIMA del lienzo del efecto, como el título de las fotos: con el
   mismo z-index que el lienzo quedaba tapado, porque el lienzo se agrega después */
.p-art .et,.p-serv .et,.p-video .et,.p-foto .et,.p-hero .et{position:absolute;left:18px;top:15px;z-index:3;font-size:13px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.82);
  text-shadow:0 1px 12px rgba(0,0,0,.55)}
.p-art .t,.p-serv .t,.p-hero .t{position:absolute;left:18px;right:18px;bottom:16px;z-index:3;font-weight:800;
  text-transform:uppercase;letter-spacing:-.015em;line-height:1.08;font-size:26px}
.p-art.ch .t{font-size:21px}
/* hechos duros: cortan el ritmo de imágenes */
.p-hecho{background:#111;color:#fff;display:flex;flex-direction:column;
  justify-content:flex-end;padding:18px 18px 16px}
.p-hecho .n{font-size:33px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.p-hecho .q{font-size:13px;line-height:1.35;color:#a8a8a8;margin-top:7px}
/* la fila de servicios: la foto grande con botones, y dos mosaicos oscuros que usan la
   misma tipografía que las piezas de lectura (etiqueta arriba, título abajo) */
.p-serv{background:#1a1a1a;color:#fff}
.p-hero{background:#111;color:#fff}
.p-hero img{width:100%;height:100%;object-fit:cover;display:block}
.p-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.74) 100%)}
.p-hero .hero-txt{position:absolute;left:18px;right:18px;bottom:16px;z-index:3;color:#fff}
.p-hero .lema{font-weight:800;font-size:21px;line-height:1.15;letter-spacing:-.015em;margin-bottom:12px}
.btn{display:block;text-align:center;font-size:13px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;padding:11px 10px;margin-top:8px;border:1px solid #fff}
.btn-lleno{background:#fff;color:#111}
.btn-vacio{background:transparent;color:#fff}
.btn:hover{background:#EA4335;border-color:#EA4335;color:#fff}
/* marcador de lugar de Radar IA · Video: negro, con el ícono de reproducir al medio */
.p-video{background:#000;color:#fff;display:flex;align-items:center;justify-content:center}
.p-video .play{width:64px;height:64px}
@media(max-width:800px){
  .grilla{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
  .p{aspect-ratio:4/3}
  .p.gr{grid-row:auto;aspect-ratio:3/4}
}

/* ---------- la lista para elegir papers ---------- */
.sel-barra{position:sticky;top:0;z-index:10;background:#fff;display:flex;gap:12px;
  align-items:center;flex-wrap:wrap;padding:14px 0;border-bottom:2px solid #111;
  margin-bottom:4px}
.sel-barra input[type=search],.sel-barra select{font:400 17px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;
  padding:10px 12px;border:1px solid #d8d8d8;background:#fff;color:#111}
.sel-barra input[type=search]{flex:1;min-width:220px}
.sel-cuenta{font-size:13px;color:#888;letter-spacing:.04em;text-transform:uppercase}
.sel-cuenta b{font-size:21px;color:#111}
#sel-guardar{font:800 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;padding:12px 18px;cursor:pointer;border:1px solid #111;
  background:#111;color:#fff}
#sel-guardar:hover{border-color:#EA4335;background:#EA4335}
#sel-guardar:disabled{opacity:.5;cursor:default}
.sel-estado{font-size:13px;color:#888}
.sel-estado.ok{color:#1E6B4A}.sel-estado.mal{color:#EA4335}.sel-estado.pendiente{color:#B26C00}

.sel-fila{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;
  padding:14px 0;border-bottom:1px solid #e2e2e2;cursor:pointer}
.sel-fila:hover{background:#faf9f8}
.sel-fila input{width:20px;height:20px;margin-top:2px;accent-color:#EA4335;cursor:pointer}
.sel-tit{display:block;font-size:17px;line-height:1.35;font-weight:700}
.sel-meta{display:block;font-size:13px;color:#888;margin-top:4px}
.sel-meta b{color:#111;font-size:17px}
.sel-motivo{display:block;font-size:13px;line-height:1.45;color:#555;margin-top:5px;
  max-width:80ch}
.sel-incompleto .sel-tit{color:#888}
.sel-tono{background:#111;color:#fff;font-size:11px;padding:2px 7px;margin-left:6px;
  letter-spacing:.06em;text-transform:uppercase}
@media(max-width:800px){.sel-barra{position:static}}

/* ---------- el panel de /adm1n ----------
   No es parte del sitio público: usa su misma tipografía pero se ve como una
   herramienta, no como una página. */
.adm-aviso{background:#faf3f2;border-left:3px solid #EA4335;padding:14px 18px;
  font-size:17px;line-height:1.5;margin:0 0 34px;max-width:760px}
.adm{display:flex;flex-direction:column;gap:22px}
.adm-pieza{display:grid;grid-template-columns:212px 1fr;gap:22px;align-items:start;
  border-top:1px solid #d8d8d8;padding-top:22px}
.adm-tapa{aspect-ratio:1/1;background:var(--img) center/cover no-repeat #eee}
.adm-campo{min-width:0}
.adm-tema{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#888}
.adm-interna{background:#111;color:#fff;padding:3px 8px;margin-left:6px;letter-spacing:.06em}
.adm-pieza h2{font-size:26px;font-weight:800;line-height:1.15;margin:6px 0 22px}
.adm-rot{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#999;margin-bottom:8px;display:flex;gap:10px;align-items:baseline}
.adm-estado{font-weight:400;letter-spacing:0;text-transform:none;font-size:13px;color:#888}
.adm-estado.ok{color:#1E6B4A}
.adm-estado.mal{color:#EA4335}
.adm-estado.pendiente{color:#B26C00}
.adm textarea{width:100%;font:400 19px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#111;border:1px solid #d8d8d8;padding:14px;resize:vertical;background:#fff}
.adm textarea:focus{outline:2px solid #111;outline-offset:-1px;border-color:#111}
.adm-acciones{display:flex;gap:10px;margin:12px 0 26px}
.adm-acciones button{font:800 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;padding:12px 18px;cursor:pointer;
  border:1px solid #111;background:#111;color:#fff}
.adm-acciones .adm-usar{background:none;color:#111}
.adm-acciones button:hover{border-color:#EA4335;background:#EA4335;color:#fff}
.adm-acciones button:disabled{opacity:.5;cursor:default}
.adm-motivo{font-size:17px;line-height:1.5;color:#555;margin:0 0 10px}
.adm-puntajes{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#888;
  margin:0 0 26px}
.adm-puntajes b{color:#111;font-size:17px;font-weight:800}
.adm-concl{list-style:none;margin:0;padding:0}
.adm-concl li{font-size:13px;line-height:1.45;color:#555;padding:0 0 7px 18px;
  position:relative}
.adm-concl li::before{content:"—";position:absolute;left:0;color:#EA4335}
@media(max-width:800px){
  .adm-pieza{grid-template-columns:1fr}
  .adm-tapa{aspect-ratio:16/9}
}

/* ---------- bio ---------- */
/* La bio entra en la misma grilla de tres columnas que la portada: la lectura ocupa
   dos (790, la medida de lectura de siempre) y los hechos duros la tercera. */
.bio{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--gap);align-items:start;
  padding-top:44px}
.bio .lectura{grid-column:span 2;min-width:0}
.bio .hechos{grid-column:3;position:sticky;top:22px}
.hechos .h{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#999;margin-bottom:12px}
/* sin líneas: dos bloques, las cifras y los temas, ordenados por sus rótulos */
.hechos .d{margin-bottom:22px}
.hechos .n{font-size:33px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.hechos .q{font-size:13px;line-height:1.35;color:#555;margin-top:4px}
.hechos .temas{margin-top:34px}
.hechos .tm{font-size:17px;line-height:1.6}
/* en el celular una sola columna: primero la lectura y abajo los hechos */
@media(max-width:800px){
  .bio{grid-template-columns:1fr}
  .bio .lectura,.bio .hechos{grid-column:1}
  .bio .hechos{position:static;margin-top:8px}
}

.bio{position:relative;z-index:2;max-width:760px;padding:60px 22px 44px;margin:0}
.bio p{font-weight:400;font-size:21px;line-height:1.55;margin-bottom:34px;min-height:1em}
.bio p.cierre{font-weight:800;font-size:26px;line-height:1.3;text-transform:uppercase;letter-spacing:-.01em}
/* el mismo aire que hay entre párrafo y párrafo */
.bio .foto{margin:34px 0}
.bio .foto{position:relative;overflow:hidden}
/* Cortocircuito de televisor: cada tanto la foto pierde la señal. Son copias de la
   misma imagen recortadas en franjas y corridas de lugar durante medio segundo; el
   resto del tiempo están recortadas a nada y la foto se ve limpia. El guion de site.js
   pone y saca la clase «rota». */
.bio .foto::before,.bio .foto::after{content:'';position:absolute;inset:0;
  pointer-events:none;background:var(--img) center/cover no-repeat;
  clip-path:inset(0 0 100% 0)}
.bio .foto::after{filter:sepia(1) hue-rotate(-60deg) saturate(6);mix-blend-mode:screen}
.bio .foto.rota::before{animation:senal-rota .6s steps(1,end)}
.bio .foto.rota::after{animation:senal-rota2 .6s steps(1,end)}
@keyframes senal-rota{
  0%{clip-path:inset(14% 0 74% 0);transform:translateX(-42px)}
  20%{clip-path:inset(46% 0 40% 0);transform:translateX(58px)}
  40%{clip-path:inset(66% 0 22% 0);transform:translateX(-26px)}
  60%{clip-path:inset(30% 0 62% 0);transform:translateX(34px)}
  80%{clip-path:inset(78% 0 8% 0);transform:translateX(-48px)}
  100%{clip-path:inset(0 0 100% 0);transform:none}}
@keyframes senal-rota2{
  0%{clip-path:inset(52% 0 34% 0);transform:translateX(-66px)}
  35%{clip-path:inset(20% 0 68% 0);transform:translateX(50px)}
  70%{clip-path:inset(72% 0 16% 0);transform:translateX(-30px)}
  100%{clip-path:inset(0 0 100% 0);transform:none}}
/* siendo lo primero de la bio ya no lleva aire propio arriba: con él, la foto
   arrancaba más abajo que la franja de datos de al lado */
.bio .foto:first-child{margin-top:0}
/* siendo lo primero de la bio, no lleva aire propio arriba */
.bio .foto:first-child{margin-top:0}
.bio .foto img{width:100%;display:block}

/* prensa: destacados en tarjetas + índice plano */
.prensa{position:relative;z-index:2;max-width:1240px;padding:20px 22px 60px}
.prensa h2{font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:28px}
.destacados{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:60px}
.dest{position:relative;display:block;overflow:hidden;color:#111;text-decoration:none}
.dest img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.dest .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.dest .play::after{content:"";border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:3px}
.dest .t{margin-top:10px;font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.01em}
.dest .m{font-size:13px;color:#888;font-weight:700;letter-spacing:.06em;margin-top:2px}
a.dest{cursor:pointer}
/* índice plano: medio · título · año · flecha */
/* La lista sigue a los videos separada sólo por aire: la raya gruesa que había acá
   hacía leerla como otra sección, y se confundía con las del pie. */
.indice{list-style:none;margin-top:38px}
/* Son casi cuarenta y van a ser más: enteras hacen la página infinita. Se ven las
   doce más recientes y la barra despliega el resto. */
.indice.corto li:nth-child(n+13){display:none}
.mas{display:block;width:100%;background:none;border:0;border-bottom:1px solid #d8d8d8;
  padding:16px 0;cursor:pointer;text-align:center;color:#111;
  font:800 12.5px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;
  letter-spacing:.08em;text-transform:uppercase}
.mas:hover{color:#EA4335}
.indice li{border-bottom:1px solid #d8d8d8}
.indice .linea{display:grid;grid-template-columns:128px 1fr 60px 24px;gap:16px;align-items:baseline;padding:15px 0;color:#111;text-decoration:none;font-size:17px;line-height:1.4}
.indice a.linea:hover{opacity:.55}
.indice .tipo{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#888}
.indice .anio{color:#888;text-align:right}
.indice .fl{text-align:right}
@media(max-width:800px){.destacados{grid-template-columns:1fr}.indice .linea{grid-template-columns:96px 1fr 44px 18px;font-size:17px}}

/* ---------- página de artículo ---------- */
.art{position:relative;z-index:2;max-width:760px;padding:44px 22px 60px}
.art .fecha{font-size:13px;font-weight:700;letter-spacing:.08em;color:#999;margin-bottom:16px}
.art .nota{font-size:17px;line-height:1.5;color:#888;font-style:italic;margin-bottom:34px;max-width:60ch}
.art h1{font-weight:800;font-size:clamp(26px,3.4vw,41px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:28px}
/* La bajada apenas por encima del cuerpo, como en los diarios: medido, el Guardian
   la pone 1,18 veces el cuerpo y el NYT 1,15. Se distingue por color y peso, no por
   tamaño. Estaba en 33, un 35% más grande que lo que usa cualquiera de los dos. */
.art .bajada{font-weight:400;font-size:26px;line-height:1.35;color:#444;margin-bottom:34px}
.art figure{margin:34px -22px}
.art figure img{width:100%;display:block}
.art figcaption{font-size:13px;color:#888;padding:8px 22px 0}
.art p{font-size:21px;line-height:1.55;margin-bottom:26px}
.art a{color:#111;text-decoration:underline;text-underline-offset:3px}
.art a:hover{color:#EA4335}
.art .destacado{font-weight:800;font-size:26px;line-height:1.25;letter-spacing:-.01em;margin:40px 0;padding-left:22px;border-left:4px solid #EA4335}
.art .preguntas{margin:34px 0}
.art .preguntas p{font-weight:700;font-style:italic;margin-bottom:18px}
.art .cierre{background:#111;color:#fff;padding:34px 28px;margin:44px 0 0}
.art .cierre p{font-weight:800;font-size:clamp(26px,2.4vw,33px);line-height:1.25;letter-spacing:-.01em;margin:0;text-transform:uppercase}
.art .epigrafe{font-style:italic;font-size:21px;color:#555;margin-bottom:6px}
.art .epigrafe-cred{font-size:13px;color:#888;margin-bottom:34px}
/* El comentario de Juanma abre la ficha. Va en el cuerpo de la bajada porque es lo
   primero que se lee, con una franja roja al costado, que es la marca que el sitio ya
   usa para lo destacado. Debajo, el hallazgo del paper baja de jerarquía: pasa a ser el
   dato y deja de ser la entrada. */
/* El rótulo es el mismo gris que usan «El estudio» y «Conclusiones»: el bloque avisa
   que acá habla él, pero sin gritarlo. Lo que lo distingue del resto es la tipografía
   monoespaciada del texto, no el color del rótulo. */
.art .comentario{margin-bottom:34px}
.art .comentario .rot{display:block;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#999;margin-bottom:12px}
/* En monoespaciada, que es la otra tipografía que el sitio ya usa en el fichero de
   Proyectos. No es una fuente nueva: es marcar que esto lo escribió una persona y no
   salió del resumidor, sin romper el sistema. Va más chica que la bajada porque la
   monoespaciada pesa más a igual cuerpo. */
.art .comentario p{font-family:'JetBrains Mono',Menlo,Consolas,monospace;
  font-weight:400;font-size:21px;line-height:1.5;color:#111;margin-bottom:0;
  letter-spacing:-.01em}
.art .bajada.hallazgo{font-size:21px;color:#555}
/* la ficha de Radar: la ilustración con su frase hecha al pie */
.art .ilustra{margin:34px 0 40px}
.art .ilustra img{width:100%;display:block}
/* Lo que acompaña al texto va al margen derecho, que en las demás páginas queda vacío.
   Es el margen exterior ancho del libro (canon Van de Graaf) usado como marginalia: la
   columna de lectura conserva sus 760, que son los ~70 caracteres por línea que pide
   Bringhurst, y al costado van las conclusiones y la ficha del paper. Sólo en Radar: las
   páginas de Ideas comparten .art y no se tocan. */
.ficha-radar .margen .bloque{margin-bottom:34px}
.ficha-radar .margen .rotulo{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#999;margin-bottom:12px}
.art .concl{margin:0 0 26px 22px}
.art .concl li{font-size:21px;line-height:1.55;margin-bottom:14px}
/* en el margen no lleva la línea ni el aire con que se despega del pie del artículo:
   arranca a la misma altura que el título */
.ficha-radar .margen .fuentes{margin-top:0;padding-top:0;border-top:0}
/* debajo del estudio, separados por una línea, los otros artículos de la sección */
.ficha-radar .margen .otros{border-top:1px solid #d8d8d8;padding-top:22px}
/* con viñeta: sin ella, dos títulos de dos renglones se leían como un solo bloque */
.ficha-radar .margen .otros ul{list-style:disc;margin:0 0 0 18px}
.ficha-radar .margen .otros li::marker{color:#999}
/* mismo cuerpo e interlineado que el bloque del estudio: el tamaño va en el ítem, que
   es lo que manda cuando el texto pasa de renglón, y no sólo en el enlace */
.ficha-radar .margen .otros li{font-size:17px;line-height:1.55;margin-bottom:8px}
/* el mismo gris que el bloque del estudio: en el margen convivían un bloque gris y
   otro en negro pleno. El peso, no el color, es lo que los mantiene como títulos. Al
   pasar el mouse suben a negro, además del amarillo. */
.ficha-radar .margen .otros a{color:#555;text-decoration:none}
/* la miniatura del artículo, sólo en escritorio: en el celular la lista se queda como
   estaba, con su viñeta y sin imágenes */
.ficha-radar .margen .otros .mini{display:none}
/* al pasar el mouse las letras se revuelven, como el nombre del header. Lo hace
   scramble-links.js y sólo en escritorio; acá alcanza con que el título se ponga negro
   para que se note que está vivo. */
@media(min-width:1100px){
  .art.ficha-radar{max-width:1196px;display:grid;grid-template-columns:760px 374px;column-gap:62px;align-items:start}
  /* La fecha y el título ocupan la primera fila, sobre la columna de lectura. El margen
     empieza en la segunda, o sea a la altura del primer párrafo, sin importar cuántos
     renglones mida el título. */
  .ficha-radar .cabecera{grid-column:1;grid-row:1}
  .ficha-radar .cuerpo{grid-column:1;grid-row:2;min-width:0}
  .ficha-radar .margen{grid-column:2;grid-row:2}
  /* con la miniatura al lado, la viñeta sobra: la imagen ya marca dónde empieza cada uno */
  .ficha-radar .margen .otros ul{list-style:none;margin-left:0}
  /* una línea entre artículo y artículo: sin ella los tres se leían como un bloque */
  .ficha-radar .margen .otros li{padding-bottom:16px;margin-bottom:16px;
    border-bottom:1px solid #e8e8e8}
  .ficha-radar .margen .otros li:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
  /* el título centrado contra la imagen: alineado arriba quedaba colgando de una
     esquina, con el hueco debajo */
  .ficha-radar .margen .otros a{display:grid;grid-template-columns:104px 1fr;
    column-gap:14px;align-items:center}
  .ficha-radar .margen .otros .mini{display:block;width:104px;height:104px;object-fit:cover}
  /* con la imagen al lado, el título aguanta el cuerpo de un titular chico */
  .ficha-radar .margen .otros a .t{font-size:21px;font-weight:700;line-height:1.2;
    letter-spacing:-.01em}
}
.art h2{font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;margin:44px 0 18px}
.art .fuentes{font-size:17px;line-height:1.6;color:#555;border-top:1px solid #d8d8d8;padding-top:22px;margin-top:44px}
.art .fuentes p{font-size:17px;margin-bottom:8px}
.art .licencia{font-size:13px;color:#999;margin-top:22px}
/* al pie del artículo, adónde seguir */
.seguir{position:relative;z-index:2;max-width:760px;padding:0 22px 40px}
.seguir .rotulo{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#888;margin-bottom:14px}

/* ---------- pie: una sola línea, © a la izquierda y las redes a la derecha ---------- */
footer{position:relative;z-index:2;background:#fff;color:#111;border-top:1px solid #e5e5e5;margin-top:22px;
  padding:22px 0 0;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px 22px;font-size:13px}
footer .social{list-style:none;display:flex;gap:22px}
footer a{color:#111;text-decoration:none}
footer a:hover{opacity:.55}