/* Libro 3D de /trabajo/. Fondo claro (escritorio de día) que se funde con la página. */
.lb{--lb-bg:#f4f2ee;background:var(--lb-bg);padding-top:74px;position:relative}
.lb.lb-sin{display:none}
.lb-cab{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px;padding-bottom:6px;position:relative;z-index:2}
.lb-cab .eyebrow{margin:0}
.lb-alista{font:600 13px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.04em;color:#3a3a40;border:1px solid rgba(10,10,12,.14);border-radius:999px;padding:10px 14px;background:rgba(255,255,255,.7)}
.lb-alista:hover{background:#fff}
.lb-escena{position:relative;height:clamp(520px,calc(100svh - 140px),820px);overflow:hidden;background:#e7ddcd}
.lb-escena canvas{position:relative;display:block;width:100%;height:100%;touch-action:manipulation;outline:none;}
/* El escritorio de mármol: lo crea libro.js (la foto nítida solo se descarga cuando el libro se arma) */
.lb-mesa{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;pointer-events:none}
.lb-mesa i{position:absolute;inset:0;background:url(../images/libro/mesa.webp) center/cover}
.lb-mesa::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(28,18,6,.42))}
/* solo en computadora: en celular y tableta /trabajo/ muestra directamente la lista */
@media (max-width:999px),(hover:none),(pointer:coarse){.lb:not(.lb--casa){display:none}}
.lb-hint{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;
  text-align:center;font:400 13px/1.4 "Geist Mono",ui-monospace,monospace;letter-spacing:.03em;color:#3a3833;transition:opacity .4s;
  background:rgba(250,246,238,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px}
.lb-nav{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:4px;align-items:center;max-width:calc(100% - 24px);
  background:rgba(14,14,18,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:5px;box-shadow:0 12px 30px rgba(20,16,10,.18)}
.lb-nav button,.lb-nav a{font:500 12px/1 "Geist Mono",ui-monospace,monospace;color:#f1efe9;background:transparent;border:0;
  padding:10px 13px;border-radius:999px;cursor:pointer;letter-spacing:.04em;min-height:38px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lb-nav button:hover,.lb-nav a:hover,.lb-nav button:focus-visible,.lb-nav a:focus-visible{background:rgba(255,255,255,.12);outline:none}
.lb-nav button:disabled{opacity:.3;cursor:default;background:transparent}
.lb-nav a[hidden]{display:none}
.lb-nav #b-sitio{background:#f1efe9;color:#0c0c0f;font-weight:600}
.lb-nav #b-sitio:hover,.lb-nav #b-sitio:focus-visible{background:#fff}
#etiqueta{font:400 12px/1 "Geist Mono",ui-monospace,monospace;color:#a3a1ab;padding:0 8px;min-width:9ch;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26vw}
.lb-carga{position:absolute;inset:0;display:grid;place-items:center;background:var(--lb-bg);z-index:3;transition:opacity .8s}
.lb-carga div{font:500 12px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#6b6973}
.lb-carga i{display:block;height:2px;margin-top:14px;width:0;background:linear-gradient(90deg,#595bff,#26d9ff,#a8ff6a,#ff7a1a,#ff4fc6);transition:width .3s}
/* la lista de abajo arranca pegada al libro: sin el aire extra que deja el nav fijo */
.lb + .tw-hero{padding-top:56px}
@media (max-width:720px){
  .lb-escena{height:clamp(520px,calc(100svh - 120px),760px)}
  .lb-hint{bottom:70px;font-size:11px}
  #etiqueta{display:none}
  .lb-nav button,.lb-nav a{padding:10px 10px}
  .lb-cab .eyebrow{font-size:10px}
}
/* El mismo libro dentro de «Mira lo que ya construimos» en la portada (solo pantallas anchas). */
.lb--casa{--lb-bg:transparent;padding-top:0;z-index:2;width:100%;margin:0 auto}
.lb--casa .lb-escena{height:clamp(480px,calc(100svh - 270px),640px);border-radius:24px;box-shadow:inset 0 0 0 1px rgba(20,20,30,.06)}
/* con el libro, el encabezado ocupa una sola franja: título a la izquierda, explicación a la derecha */
#trabajos.con-libro{padding-top:36px}
.work.con-libro .work-head{display:grid;width:min(100% - 64px,1380px);grid-template-columns:max-content minmax(0,1fr);column-gap:56px;row-gap:12px;align-items:end;margin-bottom:24px}
.work.con-libro .work-head .eyebrow{grid-column:1/-1}
.work.con-libro .work-head .section-title{grid-area:2/1;margin:0;font-size:clamp(44px,4.4vw,66px);white-space:nowrap}
.work.con-libro .work-head .section-title br{display:none}
.work.con-libro .work-lead{grid-area:2/2;margin:0 0 6px;max-width:540px;justify-self:end}
.lb--casa .lb-carga{background:#f3f0ea}
.work.con-libro .feat-track,.work.con-libro .feat-controls .feat-count,.work.con-libro .feat-controls .feat-progress,.work.con-libro .feat-controls .feat-arrows{display:none}
.work.con-libro .feat-controls{display:flex;margin-top:28px;justify-content:center}
/* La mesa ocupa toda la sección «Mira lo que ya construimos»: el título va encima, en blanco y con sombra para leerse sobre la foto. */
.work.con-mesa{position:relative;overflow:hidden;isolation:isolate}
.work.con-mesa>.lb-mesa{z-index:-2}
.work.con-mesa::before{content:"";position:absolute;inset:0 0 auto;height:340px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(12,9,5,.62),rgba(12,9,5,.28) 55%,rgba(12,9,5,0))}
.work.con-mesa .work-head .section-title{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.6)}
.work.con-mesa .work-head .eyebrow,.work.con-mesa .work-lead{color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5)}
.work.con-mesa .lb--casa .lb-escena{background:transparent;border-radius:0;box-shadow:none}
.work.con-mesa .feat-all{background:rgba(14,14,18,.86);color:#f1efe9;border-radius:999px;padding:12px 20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}