/* Portada de eliasliarte.es · web única */
/* ---- capa propia del borrador de web única ---- */
:root{
  /* Escala tipográfica 1,25 (tercera mayor) sobre 17 px: 7 tamaños en lugar de 16 */
  --t-xs:13.6px; --t-s:15px; --t-m:17px; --t-l:21px; --t-xl:26.5px; --t-2xl:33px; --t-3xl:41.5px; --t-4xl:52px;
  /* Escala de espacios en múltiplos de 8 */
  --e-1:8px; --e-2:16px; --e-3:24px; --e-4:32px; --e-6:48px; --e-8:64px; --e-12:96px;
  --medida:35em; /* ≈70 caracteres por línea */
}
main{max-width:none;margin:0;padding:0}
.menu-fijo{position:sticky;top:0;z-index:20;background:rgba(20,22,26,.96);backdrop-filter:blur(6px);color:var(--piedra);border-bottom:1px solid #2A2D33}
.menu-fijo .dentro{max-width:1080px;margin:0 auto;padding:var(--e-1) var(--e-3);display:flex;justify-content:space-between;align-items:center;gap:var(--e-2)}
.menu-fijo .marca{font:400 var(--t-l) var(--serif);color:var(--piedra);text-decoration:none;white-space:nowrap}
.menu-fijo nav{display:flex;gap:var(--e-2);font-size:var(--t-xs);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.menu-fijo nav a{color:var(--gris-claro);text-decoration:none}
.menu-fijo nav a:hover{color:var(--oro-claro)}
.obj .etq{opacity:1;transform:none}
.franja{padding:var(--e-12) var(--e-3)}
.franja .dentro{max-width:880px;margin:0 auto}
.franja.oscura{background:var(--tinta);color:var(--piedra)}
.franja.oscura .etiqueta{color:var(--oro)}
.franja.media{background:var(--piedra-2)}
.franja h2{font:400 clamp(var(--t-2xl),4.2vw,var(--t-3xl))/1.12 var(--serif);margin:var(--e-2) 0 var(--e-3)}
.entrada{font:300 clamp(var(--t-l),2.6vw,var(--t-xl))/1.4 var(--serif);margin:0;max-width:var(--medida)}
.franja p{margin:var(--e-2) 0 0;max-width:var(--medida)}
.franja.oscura p{color:#D9D3C7}
.manifiesto{font:300 italic clamp(var(--t-xl),3.6vw,var(--t-3xl))/1.3 var(--serif);color:var(--oro-claro);margin:0}
.faceta{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:var(--e-2) var(--e-6);padding:var(--e-8) 0;border-top:1px solid var(--linea);counter-increment:oficio}
.faceta:first-of-type{border-top:0}
.faceta .rol{font:var(--t-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--oro-texto)}
.faceta h3{font:400 var(--t-xl)/1.18 var(--serif);margin:var(--e-1) 0 0}
.faceta > div:first-child::before{content:counter(oficio,decimal-leading-zero);display:block;font:300 var(--t-3xl)/1 var(--serif);color:var(--oro);margin-bottom:var(--e-2)}
#lo-que-hago .dentro{counter-reset:oficio}
.faceta .texto p:first-child{margin-top:0}
.faceta .texto p{color:var(--texto-2)}
.faceta .texto .plegable > p:first-child{margin-top:var(--e-2)}
.util{margin-top:var(--e-3);padding:var(--e-2) var(--e-3);background:#fff;border-left:2px solid var(--oro);color:var(--texto)!important}
.util b{display:block;font:500 var(--t-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--oro-texto);margin-bottom:4px}
.respaldo{margin-top:var(--e-3);padding:var(--e-3) 0 0;border-top:1px solid var(--linea-2);font:var(--t-s)/1.5 var(--sans);color:var(--texto-3)}
.respaldo b{color:var(--texto);font-weight:600}
.cifras{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4);margin:0 0 var(--e-2);padding:0;list-style:none}
.cifras li{display:flex;flex-direction:column;min-width:96px}
.cifras li b{font:400 var(--t-2xl)/1 var(--serif);color:var(--texto)}
.cifras li span{font-size:var(--t-xs);color:var(--texto-3);margin-top:4px;max-width:150px;line-height:1.35}
.profundizar{display:inline-block;margin-top:var(--e-2);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.hueco{background:#F3E3C3;color:#6b4a12;padding:0 4px;font-family:var(--mono);font-size:.9em}
.indice-oficios{display:flex;flex-wrap:wrap;gap:var(--e-1);margin-top:var(--e-4)}
.indice-oficios a{padding:var(--e-1) var(--e-2);border:1px solid var(--linea);background:#fff;color:var(--texto);text-decoration:none;font-size:var(--t-s)}
.indice-oficios a:hover{border-color:var(--oro);color:var(--oro-texto)}
.pilares,.palabras{display:grid;gap:var(--e-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:var(--e-4)}
.pilar{border-top:2px solid var(--oro);padding-top:var(--e-2)}
.pilar h3{font:400 var(--t-xl) var(--serif);margin:0}
.pilar .sub{font:var(--t-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--oro)}
.pilar .piensa{margin-top:var(--e-2);padding:var(--e-2) var(--e-2);background:#1E2025;font-size:var(--t-s)}
.pilar .piensa b{display:block;font:var(--t-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--oro);margin-bottom:4px}
.palabra h3{font:400 var(--t-2xl) var(--serif);margin:0}
.palabra .sub{font:var(--t-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--oro-texto)}
.palabra .practica{margin-top:var(--e-2);padding:var(--e-2) var(--e-2);background:#fff;border-left:2px solid var(--oro);font-size:var(--t-s)}
.palabra .practica b{display:block;font:var(--t-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--oro-texto);margin-bottom:4px}
.preguntas{list-style:none;padding:0;margin:var(--e-4) 0 0;display:grid;gap:2px}
.preguntas li{font:300 clamp(var(--t-l),2.4vw,var(--t-xl))/1.35 var(--serif);padding:var(--e-2) 0;border-bottom:1px solid #2A2D33}
.voces{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--e-1) var(--e-4);margin-top:var(--e-4)}
.voces div{padding:var(--e-1) 0;border-bottom:1px solid var(--linea-2)}
.voces b{display:block;font-weight:600}
.voces span{color:var(--texto-3);font-size:var(--t-s)}
.mas-voces summary{cursor:pointer;margin-top:var(--e-3);font-weight:600;color:var(--oro-texto)}
.mas-voces[open] summary{margin-bottom:0}
.mano{font-family:'Caveat',cursive;font-size:var(--t-xl);color:#2F4A7A;line-height:1.1}
.libro-gr{display:grid;grid-template-columns:180px 1fr;gap:var(--e-4);align-items:center;margin-top:var(--e-3)}
.libro-gr img{width:180px;height:auto;box-shadow:0 18px 34px rgba(0,0,0,.45)}
.botones{display:flex;flex-wrap:wrap;gap:var(--e-1);margin-top:var(--e-3)}
.btn{display:inline-block;padding:var(--e-1) var(--e-2);border:1px solid var(--oro);color:var(--piedra);text-decoration:none}
.btn.lleno{background:var(--oro);color:var(--tinta)}
.franja:not(.oscura) .btn{color:var(--texto)}
.salidas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e-2);margin-top:var(--e-4)}
.salidas a{display:block;padding:var(--e-2);border:1px solid var(--linea);background:#fff;text-decoration:none;color:var(--texto)}
.salidas a b{display:block;font:400 var(--t-l) var(--serif)}
.salidas a span{color:var(--texto-3);font-size:var(--t-s)}
.salidas .art-pend{display:block;padding:var(--e-2);border:1px dashed var(--linea);background:#fff}
.salidas .art-pend b{display:block;font:400 var(--t-l) var(--serif)}
.salidas .art-pend span{color:var(--texto-3);font-size:var(--t-s)}
.salidas .art-pend i{font-style:normal;color:var(--texto-3);font-size:var(--t-xs)}
.salidas a i{font-style:normal;color:var(--oro-texto);font-weight:600;font-size:var(--t-xs)}
.pie-final{background:var(--tinta);color:#A9A397;text-align:center;padding:var(--e-4) var(--e-3);font-size:var(--t-xs)}
.pie-final .mano{color:var(--oro-claro);font-size:var(--t-2xl);display:block;margin-bottom:var(--e-1)}
[id]{scroll-margin-top:var(--e-8)}
.menu-fijo nav a.activo{color:var(--oro-claro);border-bottom:1px solid var(--oro)}
.arriba{position:fixed;right:18px;bottom:18px;z-index:30;display:flex;align-items:center;gap:var(--e-1);background:var(--oro);color:var(--tinta);text-decoration:none;font:500 var(--t-xs) var(--sans);padding:var(--e-1) var(--e-2);box-shadow:0 8px 20px rgba(0,0,0,.3);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s}
.arriba.ver{opacity:1;pointer-events:auto;transform:none}
@media (prefers-reduced-motion:reduce){.arriba{transition:none}}
.leyenda-mesa{display:none}
@media (max-width:900px){
  .portada{flex-wrap:wrap}
  .leyenda-mesa{display:flex;flex-wrap:wrap;gap:var(--e-1);width:100%;padding:var(--e-2) var(--e-2) var(--e-2);background:#3B2E23}
  .leyenda-mesa a{flex:1 1 auto;text-align:center;padding:var(--e-1) var(--e-1);background:rgba(0,0,0,.28);color:var(--piedra);text-decoration:none;font-size:var(--t-xs);border:1px solid rgba(201,161,90,.4)}
}
.menu-fijo nav a{padding:var(--e-1) 0}
.seguir{display:none}
@media (max-width:720px){
  .js .plegable{display:none}
  .js .abierto > .plegable{display:block}
  .js .seguir{display:inline-flex;align-items:center;gap:6px;margin-top:var(--e-2);padding:10px 0;background:none;border:0;border-bottom:1px solid currentColor;color:var(--oro-texto);font:600 var(--t-s) var(--sans);cursor:pointer}
  .js .seguir::after{content:"↓"}
  .js .abierto > .seguir{display:none}
  .franja.oscura .seguir{color:var(--oro-claro)}
}
.borrador-aviso{background:#8E2A2A;color:#fff;text-align:center;font:var(--t-xs) var(--mono);padding:var(--e-1) var(--e-1)}
@media (max-width:720px){
  .faceta{grid-template-columns:1fr;padding:var(--e-6) 0}
  .faceta > div:first-child::before{font-size:var(--t-2xl);margin-bottom:var(--e-1)}
  .libro-gr{grid-template-columns:1fr}
  .franja{padding:var(--e-8) 20px}
  .menu-fijo nav{gap:var(--e-2);font-size:var(--t-xs)}
}

/* ===== Creatividad v1 · «De Kéter a Maljut» ===== */
/* La lámpara: la luz cálida sigue al cursor sobre la mesa */
.mesa::after{background:radial-gradient(circle 300px at var(--lx,62%) var(--ly,40%),rgba(255,214,150,.26),transparent 72%),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.42))!important;transition:background .08s linear}
/* Los objetos se posan en la mesa al llegar */
@keyframes posarse{from{translate:0 -36px;opacity:0}to{translate:0 0;opacity:1}}
.escena .obj,.escena .deco{animation:posarse .7s cubic-bezier(.2,.8,.2,1) both}
.escena > *:nth-child(2){animation-delay:.10s}.escena > *:nth-child(3){animation-delay:.18s}.escena > *:nth-child(4){animation-delay:.26s}
.escena > *:nth-child(5){animation-delay:.34s}.escena > *:nth-child(6){animation-delay:.42s}.escena > *:nth-child(7){animation-delay:.50s}.escena > *:nth-child(8){animation-delay:.58s}
/* Un hilo dorado bajo el menú indica cuánto has leído */
.hilo-movil{position:sticky;top:48px;z-index:19;height:3px;background:transparent}
.hilo-movil span{display:block;height:100%;width:var(--avance,0%);background:var(--oro)}
/* El manifiesto se ilumina palabra a palabra al leerlo */
.manifiesto .pal{color:rgba(226,194,133,.5);transition:color .25s}
.manifiesto .pal.luz{color:var(--oro-claro)}
/* Notas a mano en el margen */
.dentro{position:relative}
.nota-mano{display:block;font:500 30px/1.1 'Caveat',cursive;color:#2F4A7A;transform:rotate(-3deg);margin-bottom:var(--e-2)}
.franja.oscura .nota-mano{color:var(--oro-claro)}
@media (min-width:1340px){.nota-mano{position:absolute;right:-190px;top:8px;width:170px;margin:0}}
/* Una pregunta para hoy */
.pregunta-hoy{margin-top:var(--e-6);padding:var(--e-6) var(--e-4);border:1px solid #3A3D44;text-align:center}
.pq-eti{font:var(--t-xs) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.pq-texto{font:300 clamp(var(--t-2xl),4vw,var(--t-3xl))/1.2 var(--serif)!important;color:var(--piedra)!important;margin:var(--e-3) auto!important;max-width:24em!important;min-height:2.4em;transition:opacity .25s}
.pq-texto.cambia{opacity:0}
.pq-otra{background:none;border:1px solid var(--oro);color:var(--oro-claro);font:500 var(--t-s) var(--sans);padding:12px 20px;cursor:pointer}
.pq-otra:hover{background:var(--oro);color:var(--tinta)}
.todas-preguntas summary{cursor:pointer;margin-top:var(--e-4);color:var(--oro-claro);font-weight:600}
/* Final */
.pie-final .mano{font-size:clamp(28px,4vw,40px)}
.pie-final .firma{display:block;margin-bottom:var(--e-1);color:var(--gris-claro)}
/* Menos movimiento si el visitante lo pide */
@media (prefers-reduced-motion:reduce){
  .escena .obj,.escena .deco{animation:none}
  .manifiesto .pal{color:var(--oro-claro)}
  .mesa::after{transition:none}
}

/* ===== Vídeo: Elías dando clase, detrás del manifiesto ===== */
.con-video{position:relative;overflow:hidden;min-height:78vh;display:flex;align-items:center;background:#0E0F12}
.con-video .dentro{position:relative;z-index:2;width:100%}
.video-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% 40%;opacity:0;transition:opacity 1.2s ease;filter:grayscale(1) contrast(1.05)}
.video-fondo.listo{opacity:.55}
.con-video::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,15,18,.30) 0%,rgba(14,15,18,.70) 45%,rgba(14,15,18,.92) 100%)}
.con-video .manifiesto{margin-top:var(--e-3)!important}
@media (min-width:1000px){.con-video .etiqueta,.con-video .manifiesto{display:block;max-width:560px;margin-left:auto}}
@media (max-width:999px){.con-video::after{background:rgba(14,15,18,.72)}.video-fondo{object-position:30% 40%}}

/* ===== Creatividad v2 ===== */
.afiliaciones{margin-top:var(--e-4)!important;padding-top:var(--e-2);border-top:1px solid var(--linea);font-size:var(--t-s);color:var(--texto-2)}
.afiliaciones span{display:block;margin-top:4px;color:var(--texto-3);font-style:italic}
/* Infografía de trayectoria: seis caminos sobre un eje 1999–hoy (posiciones en %) */
.infografia{--col:150px;position:relative;margin-top:var(--e-6);padding-bottom:var(--e-6)}
.ig-rejilla{position:absolute;top:0;bottom:var(--e-6);left:var(--col);right:0;pointer-events:none}
.ig-rejilla i{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:var(--linea-2)}
.ig-rejilla i.ig-hoy{background:var(--oro);opacity:.7}
.ig-camino{display:grid;grid-template-columns:var(--col) 1fr;align-items:start;border-top:1px solid var(--linea-2);padding:var(--e-2) 0}
.ig-nombre{font:500 var(--t-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c);padding-top:6px}
.ig-pistas{position:relative;display:grid;gap:4px}
.ig-item{position:relative;display:block;width:100%;height:46px;padding:0;margin:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.ig-etq{position:absolute;top:2px;left:var(--x);white-space:nowrap;font-size:var(--t-s);color:var(--texto);line-height:1.2}
.ig-etq small{font:var(--t-xs) var(--mono);color:var(--texto-3);margin-left:4px}
.ig-item.derecha .ig-etq{left:auto;right:calc(100% - var(--x) - var(--w))}
.ig-item.hito.derecha .ig-etq{right:calc(100% - var(--x) - 7px)}
.ig-marca{position:absolute;top:28px;left:var(--x);height:10px;border-radius:5px;background:var(--c);width:var(--w);transform-origin:left center}
.ig-item.hoy .ig-marca{border-radius:5px 0 0 5px;background:linear-gradient(90deg,var(--c) 80%,color-mix(in srgb,var(--c) 45%,transparent))}
.ig-item.hito .ig-marca{width:14px;height:14px;top:26px;margin-left:-7px;border-radius:50%;background:var(--piedra);border:3px solid var(--c)}
.ig-item:hover .ig-marca,.ig-item:focus-visible .ig-marca,.ig-item[aria-pressed="true"] .ig-marca{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
.ig-item[aria-pressed="true"] .ig-etq{font-weight:600}
.ig-item:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.ig-eje{position:absolute;left:var(--col);right:0;bottom:0;height:var(--e-4);border-top:1px solid var(--linea)}
.ig-eje span{position:absolute;top:8px;left:var(--x);transform:translateX(-50%);font:var(--t-xs) var(--mono);color:var(--texto-3)}
.ig-eje span:first-child{transform:none}
.ig-eje .ig-hoy{transform:translateX(-100%);color:var(--oro-texto);font-weight:500}
.ig-ficha{min-height:3.4em;margin-top:var(--e-3)!important;padding:var(--e-2) var(--e-3);background:#fff;border-left:3px solid var(--oro);font-size:var(--t-m)}
.ig-ficha b{display:block;font:500 var(--t-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--oro-texto);margin-bottom:4px}
/* Las barras se dibujan de izquierda a derecha al aparecer, en orden cronológico */
.js .infografia .ig-marca{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d)}
.js .infografia .hito .ig-marca{transform:scale(0)}
.js .infografia .ig-etq{opacity:0;transition:opacity .5s ease calc(var(--d) + .2s)}
.js .infografia.ver .ig-marca{transform:none}
.js .infografia.ver .ig-etq{opacity:1}
@media (max-width:720px){
  .infografia{--col:0px}
  .ig-camino{grid-template-columns:1fr;gap:4px}
  .ig-nombre{padding-top:0}
  .ig-etq,.ig-item.derecha .ig-etq,.ig-item.hito.derecha .ig-etq{left:0;right:auto;font-size:var(--t-xs);white-space:normal;max-width:100%}
  .ig-eje span{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.js .infografia .ig-marca,.js .infografia .ig-etq{transform:none;opacity:1;transition:none}}
/* Ahora */
.ahora{list-style:none;padding:0;margin:var(--e-3) 0 0}
.ahora li{padding:var(--e-2) 0 var(--e-2) var(--e-4);border-bottom:1px solid var(--linea-2);position:relative;font-size:var(--t-l);font-family:var(--serif);font-weight:300}
.ahora li::before{content:"→";position:absolute;left:0;color:var(--oro-texto)}
.fechado{font-size:var(--t-xs)!important;color:var(--texto-3)}
/* La estantería: libros con volumen sobre baldas de madera */
.estanteria{margin-top:var(--e-6);padding:var(--e-6) var(--e-3) 18px;background:none;border:0;box-shadow:none}
.estante{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:flex-end;row-gap:var(--e-6)}
.estante > li{position:relative;display:flex;align-items:flex-end;padding:0 1px}
/* cada libro apoya sobre su tramo de balda: si la fila se parte, la balda se parte con ella */
.estante > li::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-18px;height:18px;z-index:0;
  background:linear-gradient(180deg,#8A6A4C 0 3px,#6B4E36 3px 7px,#4A3A2C 7px 100%);box-shadow:0 12px 14px -6px rgba(0,0,0,.35)}
.lomo{position:relative;z-index:1;writing-mode:vertical-rl;transform:rotate(180deg);height:var(--h);width:var(--g);padding:40px 0;border:0;border-radius:3px 3px 2px 2px;cursor:pointer;
  color:var(--t);font:500 14px/1 var(--serif);letter-spacing:.05em;
  background:
    linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(255,255,255,.14) 16%,rgba(255,255,255,.05) 38%,rgba(0,0,0,.10) 72%,rgba(0,0,0,.45) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    var(--c);
  box-shadow:3px 0 4px -1px rgba(0,0,0,.35);transition:translate .25s ease,box-shadow .25s ease}
.lomo.piel{background:
    linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(255,255,255,.18) 14%,rgba(255,255,255,.06) 35%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.5) 100%),
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.06),transparent 60%),var(--c)}
.lomo.papel{background:
    linear-gradient(90deg,rgba(0,0,0,.22) 0,rgba(255,255,255,.35) 18%,rgba(255,255,255,.1) 45%,rgba(0,0,0,.08) 75%,rgba(0,0,0,.25) 100%),var(--c)}
/* filetes dorados arriba y abajo del lomo */
.lomo::before,.lomo::after{content:"";position:absolute;left:6px;right:6px;height:6px;border-top:1px solid var(--f);border-bottom:1px solid var(--f);opacity:.9}
.lomo::before{top:14px}.lomo::after{bottom:14px}
.lomo span{display:block;max-height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lomo:hover,.lomo:focus-visible,.lomo[aria-pressed="true"]{translate:0 -18px;box-shadow:3px 6px 10px -2px rgba(0,0,0,.4)}
.lomo:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
/* libros tumbados, uno sobre otro */
.estante .pila{flex-direction:column;align-items:flex-start;padding-left:var(--e-2)}
.lomo.tumbado{writing-mode:horizontal-tb;transform:none;width:var(--w);height:var(--g);padding:0 24px;text-align:left;font-size:11.5px;
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0,rgba(0,0,0,.05) 50%,rgba(0,0,0,.4) 100%),var(--c)}
.lomo.tumbado + .lomo.tumbado{margin-top:1px}
.lomo.tumbado:nth-child(1){margin-left:14px}
.lomo.tumbado::before,.lomo.tumbado::after{top:5px;bottom:5px;left:auto;right:auto;width:6px;height:auto;border:0;border-left:1px solid var(--f);border-right:1px solid var(--f)}
.lomo.tumbado::before{left:8px}.lomo.tumbado::after{right:8px}
.lomo.tumbado:hover,.lomo.tumbado:focus-visible,.lomo.tumbado[aria-pressed="true"]{translate:12px 0}
/* sujetalibros de latón con la bombilla */
.sujetalibros{padding-left:var(--e-1)}
.sujetalibros img{display:block;width:40px;height:auto;padding:22px 7px 12px;background:linear-gradient(90deg,#8B6A2E,#D6B46A 45%,#9C7835);border-radius:4px 4px 0 0;box-shadow:inset -3px 0 4px rgba(0,0,0,.25)}
/* ficha de biblioteca */
.ficha-biblio{position:relative;max-width:560px;margin-top:var(--e-8);padding:var(--e-3) var(--e-4) var(--e-3);background:#FBF8F1;
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(47,74,122,.13) 31px 32px);border:1px solid #E2D9C6;box-shadow:0 10px 24px -12px rgba(0,0,0,.3);transform:rotate(-.6deg)}
.ficha-biblio::before{content:"";position:absolute;top:-1px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--piedra);box-shadow:inset 0 2px 3px rgba(0,0,0,.25)}
.fb-cab{display:block;font:500 var(--t-xs) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8E2A2A;border-bottom:1px solid rgba(142,42,42,.35);padding-bottom:6px;margin-bottom:10px}
.ficha-biblio b{display:block;font:500 var(--t-s) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-2)}
.ficha-biblio p{margin:6px 0 0!important;font:500 30px/1.15 'Caveat',cursive;color:#2F4A7A}
@media (max-width:720px){.lomo{font-size:13px;padding:30px 0}.lomo.tumbado{font-size:11px}.ficha-biblio p{font-size:26px}}
/* Colofón */
.colofon{max-width:640px;margin:0 auto var(--e-3);font-size:var(--t-s);line-height:1.6;color:#C9C3B7}
.colofon b{color:var(--piedra)}
@media (prefers-reduced-motion:reduce){.lomo{transition:none}}

/* ===== Libro en escritura, proyectos y vídeos ===== */
.libro-nuevo{margin-top:var(--e-8);padding-top:var(--e-6);border-top:1px solid #2A2D33}
.libro-nuevo img{width:180px;height:auto;box-shadow:0 18px 34px rgba(0,0,0,.45);transform:rotate(-2deg)}
.sello{display:inline-block;font:500 var(--t-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta);background:var(--oro-claro);padding:4px 10px}
.titulo-libro{font:400 var(--t-2xl)/1.15 var(--serif);margin:var(--e-2) 0 0;color:var(--piedra)}
.subtitulo-libro{font:300 italic var(--t-l)/1.35 var(--serif)!important;color:var(--oro-claro)!important}
.proyecto{margin-top:var(--e-4);padding:var(--e-4);background:#fff;border-left:3px solid var(--oro)}
.proyecto h3{font:400 var(--t-xl)/1.2 var(--serif);margin:0}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e-3);margin-top:var(--e-4)}
.video{display:flex;flex-direction:column;justify-content:space-between;gap:var(--e-2);min-height:160px;padding:var(--e-3);border:1px solid #3A3D44;color:var(--piedra);text-decoration:none;position:relative;transition:border-color .2s,translate .2s}
.video:hover,.video:focus-visible{border-color:var(--oro);translate:0 -4px}
.video::before{content:"";width:44px;height:44px;border-radius:50%;background:var(--oro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%2314161A'/%3E%3C/svg%3E") center/22px no-repeat}
.video b{font:400 var(--t-l)/1.3 var(--serif)}
.video span{font:var(--t-xs) var(--mono);color:#A9A397}
.ciclo{margin-top:var(--e-8);padding-top:var(--e-6);border-top:1px solid #3A3D44}
.ciclo h3{font:400 var(--t-xl)/1.2 var(--serif);margin:0 0 var(--e-2)}
.ciclo p{max-width:68ch}
.ciclo .videos{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.video.pronto{border-style:dashed;color:#A9A397}
.video.pronto::before{background-color:#3A3D44}
.franja.oscura .profundizar{color:var(--oro-claro)}
.video .tipo{font:500 var(--t-xs) var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--oro-claro)}
.video em{font-style:normal;font-size:var(--t-s);color:#C9C3B7}

/* ===== Logo: la bombilla «Since 1999» ===== */
.menu-fijo .marca{display:inline-flex;align-items:center;gap:10px}
.menu-fijo .marca img{height:24px;width:auto}
.intro .web img{height:20px;width:auto;vertical-align:-4px;margin-right:8px}
.logo-pie{display:block;margin:0 auto var(--e-4);width:190px;height:auto}
@media (min-width:1000px){.estanteria{margin-left:-48px;margin-right:-48px}}
/* La pregunta sobre el vídeo */
.con-video .manifiesto{font-size:clamp(var(--t-2xl),5vw,56px)!important;line-height:1.1!important}
.manifiesto-pie{margin:var(--e-3) 0 0!important;max-width:30em!important;font:300 var(--t-l)/1.5 var(--serif);color:#D9D3C7!important}
@media (min-width:1000px){.con-video .manifiesto-pie{margin-left:auto!important;max-width:560px!important}}
.sujetalibros img{filter:brightness(.32) contrast(1.2);background-blend-mode:normal}
.sujetalibros{position:relative}
.sujetalibros::before{content:"";position:absolute;inset:0 1px 0 1px;bottom:0;z-index:0;border-radius:4px 4px 0 0;background:linear-gradient(90deg,#8B6A2E,#D6B46A 45%,#9C7835)}
.sujetalibros img{position:relative;z-index:1;background:none}
.sujetalibros::before{inset:0 1px 0 calc(var(--e-1) + 1px)}

/* ===== Proyecto «Compañía que escucha» ===== */
.proyecto-grande{padding:0;background:#fff;border-left:0;border-top:3px solid var(--oro);overflow:hidden}
.pr-cab{padding:var(--e-4) var(--e-4) 0}
.pr-tema{font:500 var(--t-xs) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--oro-texto)}
.pr-cab h3{font:400 var(--t-2xl)/1.15 var(--serif)!important;margin:var(--e-1) 0 0!important}
.pr-lema{font:300 italic var(--t-l) var(--serif)!important;color:var(--texto-2)!important;margin:6px 0 0!important}
.pr-cuerpo{display:grid;grid-template-columns:1fr;gap:var(--e-4);padding:var(--e-3) var(--e-4) var(--e-4)}
@media (min-width:1000px){.pr-cuerpo{grid-template-columns:1.15fr 1fr}}
.pr-texto p{margin:0 0 var(--e-2)!important;max-width:none!important}
.pr-principios{list-style:none;margin:var(--e-3) 0 0;padding:0;display:grid;gap:10px}
.pr-principios li{padding-left:var(--e-3);position:relative;font-size:var(--t-s);color:var(--texto-2)}
.pr-principios li::before{content:"";position:absolute;left:0;top:.65em;width:10px;height:2px;background:var(--oro)}
.pr-principios b{color:var(--texto)}
.pr-medios{display:grid;gap:var(--e-3);align-content:start}
.pr-avatar{margin:0}
.pr-avatar img{display:block;width:100%;height:auto;border-radius:4px}
.pr-avatar figcaption,.pr-pie{margin-top:6px!important;font-size:var(--t-xs)!important;color:var(--texto-3)!important}
.pr-audios{padding:var(--e-2) var(--e-3);background:var(--piedra-2);border-radius:4px}
.pr-eti{margin:0 0 var(--e-1)!important;font:500 var(--t-xs) var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--oro-texto)!important}
.pr-audios figure{margin:var(--e-1) 0 0}
.pr-audios figcaption{font-size:var(--t-xs);color:var(--texto-2);margin-bottom:4px}
.pr-audios audio{width:100%;height:40px}
.pr-carcasa{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--e-1);align-items:end}
.pr-carcasa img{display:block;width:100%;height:auto;border-radius:4px;background:#3c3c3c}
.pr-carcasa .pr-pie{grid-column:1/-1}
.pr-cita{margin:0;padding:var(--e-3) var(--e-4);background:var(--tinta);color:var(--oro-claro);font:300 italic var(--t-xl)/1.3 var(--serif)}

/* ===== Entrada con dibujos a línea ===== */
.portal{position:relative;overflow:hidden;background:var(--tinta);color:var(--piedra);font:17px/1.6 var(--sans);min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:36px 24px 28px}
.portal::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 420px at var(--lx,70%) var(--ly,30%),rgba(226,194,133,.10),transparent 70%)}
.en-dentro{position:relative;max-width:1120px;margin:0 auto;width:100%}
.en-arriba{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.en-web{font:13px var(--mono);letter-spacing:.08em;color:var(--gris-medio);display:flex;align-items:center;gap:10px}
.en-web img{height:20px;width:auto}
.en-hola{margin:20px 0 4px;color:var(--gris-claro)}
.portal h1{margin:0;font:400 clamp(48px,7vw,84px)/.98 var(--serif);letter-spacing:-.01em;color:var(--piedra)}
.en-perfiles{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px;font-size:18px}
.en-perfiles li{display:flex;align-items:center;gap:14px}
.en-perfiles li::before{content:"";width:18px;height:1px;background:var(--oro)}
.en-lema{margin:22px 0 0;font:300 clamp(26px,3vw,34px)/1.15 var(--serif);color:var(--oro-claro)}
.en-mano{font:500 26px 'Caveat',cursive;color:var(--oro);margin:6px 0 0;transform:rotate(-2deg);display:inline-block}
.en-retrato{justify-self:end;position:relative;width:min(290px,100%);margin:0}
.en-retrato img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.15) contrast(1.02);box-shadow:16px 16px 0 -1px var(--tinta),16px 16px 0 0 var(--oro)}
.en-retrato figcaption{margin-top:22px;font:13px var(--mono);color:var(--gris-medio);text-align:right}
.puertas{list-style:none;margin:34px 0 0;padding:18px 0 0;border-top:1px solid #2E3138;display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.puertas a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;color:var(--gris-claro);text-decoration:none;border-radius:4px;transition:background .25s,color .25s}
.puertas a:hover,.puertas a:focus-visible{background:rgba(201,161,90,.07);color:var(--oro-claro)}
.puertas a:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.puertas svg{width:100%;max-width:96px;height:auto;overflow:visible}
.puertas svg *{fill:none;stroke:var(--oro);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.puertas svg .suave{stroke-opacity:.45}
.puertas .nombre{font:500 23px/1 'Caveat',cursive;text-align:center;letter-spacing:.01em}
.puertas .que{font:12px var(--mono);letter-spacing:.06em;color:var(--gris-medio);text-transform:uppercase;text-align:center}
/* El trazo se dibuja al cargar y se vuelve a dibujar al pasar el ratón */
.puertas svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:trazo 1.6s cubic-bezier(.45,.05,.3,1) both;animation-delay:calc(var(--i) * .14s + .2s)}
.puertas .p0{--i:0}.puertas .p1{--i:1}.puertas .p2{--i:2}.puertas .p3{--i:3}.puertas .p4{--i:4}.puertas .p5{--i:5}.puertas .p6{--i:6}.puertas .p7{--i:7}
.puertas a.redibuja svg *{animation:trazo2 1.1s cubic-bezier(.45,.05,.3,1) both;animation-delay:0s}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes trazo2{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.puertas svg [pathLength],.puertas a.redibuja svg *{animation:none;stroke-dashoffset:0}}
@media (max-width:860px){
  .en-arriba{grid-template-columns:1fr;gap:32px}
  .en-retrato{justify-self:start;width:min(260px,70%)}
  .en-retrato figcaption{text-align:left}
  .puertas{grid-template-columns:repeat(4,1fr);margin-top:44px}
}
@media (max-width:420px){.portal{padding:28px 16px 24px}.puertas{gap:4px}.puertas a{padding:10px 2px}.puertas .nombre{font-size:19px}.puertas .que{display:none}}
.marca-oficio{display:block;width:64px;height:auto;margin-top:var(--e-2)}
.marca-oficio *{fill:none;stroke:var(--oro-texto);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* ===== fin entrada ===== */










/* ===== Capítulos y avales ===== */
.capitulo{display:inline-flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
.cap-nombre{font-weight:500}
.cap-sub{white-space:nowrap}
.cap-dibujo{width:46px;height:auto;flex:none;overflow:visible}
.cap-dibujo *{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cap-dibujo .suave{stroke-opacity:.45}
.js .cap-dibujo *{stroke-dasharray:1;stroke-dashoffset:1}
.js .cap-dibujo.visto *{animation:trazo 1.3s cubic-bezier(.45,.05,.3,1) .1s both}
@media (prefers-reduced-motion:reduce){.js .cap-dibujo *{stroke-dashoffset:0;animation:none!important}}
@media print{.js .cap-dibujo *{stroke-dashoffset:0!important;animation:none!important}}
@media (max-width:600px){.cap-sub{flex-basis:100%;margin-top:-4px}.cap-sep{display:none}}
.avales{list-style:none;margin:var(--e-4) 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative;overflow:hidden;
  background:radial-gradient(circle 360px at 20% 0%,rgba(226,194,133,.13),transparent 70%),var(--tinta);border-radius:6px;max-width:960px}
.avales li+li{border-left:1px solid rgba(201,161,90,.22)}
.avales a{display:flex;flex-direction:column;height:100%;padding:26px 22px 22px;color:var(--gris-claro);text-decoration:none;transition:background .25s}
.avales a:hover,.avales a:focus-visible{background:rgba(201,161,90,.08)}
.avales .av-dibujo{width:52px;color:var(--oro);margin-bottom:14px}
.avales b{font:300 clamp(40px,4.4vw,54px)/1 var(--serif);color:var(--oro-claro);letter-spacing:-.01em}
.avales span{margin-top:10px;font-size:16px;line-height:1.4;color:var(--gris-claro)}
.avales a::after{content:"→";margin-top:auto;padding-top:14px;font-size:15px;color:var(--oro);opacity:.55;transition:opacity .25s,transform .25s}
.avales a:hover::after,.avales a:focus-visible::after{opacity:1;transform:translateX(4px)}
.avales a:focus-visible{outline-color:var(--oro);outline-offset:-4px}
@media (max-width:760px){.avales{grid-template-columns:1fr 1fr}.avales li:nth-child(3){border-left:0}.avales li:nth-child(n+3){border-top:1px solid rgba(201,161,90,.22)}.avales a{padding:22px 18px 18px}}
.ig-item:focus-visible,.lomo:focus-visible{outline-color:var(--oro-texto)}
.titulo-libro cite{font-style:normal}
/* ===== fin capítulos ===== */
