/* Libros · índice del pack y páginas de El método Arkwright y No eres tú · MC41 · 29-oct-2026
   Sistema: el de la home A, la landing de Money Code y la página hermana Soft CEO Code
   (P1, T5 Archivo 125 % + Libre Caslon Text). Menú H2-A y pie H4-E vienen tal cual de la home
   (hero.css, base.css, home.css). La cubierta de Arkwright usa la «luz cobre» del bloque #libros aprobado.
   Bandas sólo en papel o en tinta (BRAND-02: «el bloque azul no pega… acentos estratégicos, no pegotes»).
   Burdeos como en la home: una pieza por página, segundos tiempos y títulos de libro sobre papel. Móvil primero. */

@font-face{font-family:"DB Archivo";src:url("/home/web-motion-2026-10-24/assets/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"DB Archivo";src:url("/home/web-motion-2026-10-24/assets/archivo-vf-italic-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}

/* ------------------------------------------------------------------ tokens -- */
/* Color y letra, en el body: así los lee también la barra fija opcional, que vive fuera del main (revisión M2).
   --burdeos y --ease valen lo mismo que en :root de hero.css; el resto de nombres no los usa la home. */
.lib-page{
  --papel:#fffdfb; --tinta:#111; --tinta-suave:#3c4247;
  --burdeos:#4b1014; --burdeos-vivo:#750e1e; --acero:#4a6274; --acero-sobre-tinta:#b8c6d0;
  --archivo:"DB Archivo",Arial,sans-serif;
  --caslon:"A1 Caslon Text",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
.lib{
  --g:clamp(20px,4.4vw,64px); --max:1312px;
  --bloque:clamp(72px,9vw,136px);
  /* Escala (razón ≈ 1,414, página editorial): tres niveles de titular, el nombre monumental aparte, y dos de enunciado. */
  --t-portada:clamp(2rem,1.12rem + 4.2vw,4.6rem);        /* titular de la primera pantalla */
  --t-bloque:clamp(1.62rem,1.02rem + 2.6vw,3.5rem);      /* titular de bloque */
  --t-rotulo:clamp(1.2rem,1rem + 1.05vw,1.9rem);         /* cabecera de la oferta */
  --e-grande:clamp(1.45rem,1.1rem + 1.5vw,2.6rem);       /* enunciado en Caslon */
  --e-medio:clamp(1.18rem,1.02rem + .75vw,1.65rem);      /* enunciado menor, cita, entradilla */
  display:flex;flex-direction:column;
  background:var(--papel);color:var(--tinta);
  font:400 17px/1.65 var(--caslon);font-kerning:normal;font-synthesis:none;
  overflow-x:clip;
}
@media(min-width:1024px){.lib{font-size:18px}}
.lib p{text-wrap:pretty}
.lib :where(h1,h2,h3){text-wrap:balance}
.lib em{font-style:italic}
.lib a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.lib-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Titulares T5: Archivo ancho en versales. Las mayúsculas las pone el CSS; el DOM conserva el literal. */
.lib-display{font-family:var(--archivo);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;text-transform:uppercase;letter-spacing:-.032em;line-height:1.03}
.lib-display em{font-style:italic;font-variation-settings:"wdth" 125,"wght" 800}

/* Negrita del copy: Libre Caslon no tiene negrita y no se sintetiza; se compone en Archivo y, sobre papel, en burdeos (home A). */
.lib strong{font-family:var(--archivo);font-weight:700;font-variation-settings:"wdth" 108,"wght" 700;font-size:.92em;letter-spacing:-.012em;color:var(--burdeos)}
/* Títulos de libro en el texto: cursiva real de Caslon en burdeos, como «El método Arkwright» en el bloque de libros de la home. */
.lib-obra{color:var(--burdeos)}
.lib-tinta .lib-obra,.lib-tinta strong,.lib-oferta .lib-obra,.lib-oferta strong,.lib-display .lib-obra{color:inherit}

/* -------------------------------------------------------------------- botón -- */
/* El de la home A (cierre H3-A) y Soft CEO Code. Flecha sólo donde el copy la escribe («→»). Nunca se parte. */
.lib-accion{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-width:min(100%,17.5rem);max-width:100%;min-height:58px;padding:18px 28px;background:var(--tinta);color:var(--papel);font:600 13px/1.3 var(--archivo);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-align:center;box-sizing:border-box;transition:background-color .22s ease,color .22s ease}
.lib-accion span{white-space:nowrap}
.lib-accion svg{width:20px;height:20px;flex:none;transition:transform .3s var(--ease)}
.lib-accion--flecha{justify-content:space-between;text-align:left}
.lib-accion:hover{background:var(--burdeos)}
.lib-accion:hover svg{transform:translateX(4px)}
.lib-accion:active{transform:translateY(1px)}
.lib .lib-accion:focus-visible{outline:2px solid var(--acero);outline-offset:5px}
.lib-accion--claro{background:var(--papel);color:var(--tinta)}
.lib-accion--claro:hover{background:#d3dee7;color:var(--tinta)}
.lib-oferta .lib-accion:focus-visible,.lib-tinta .lib-accion:focus-visible{outline-color:var(--papel)}
.lib-micro{margin:0;font:500 12.5px/1.5 var(--archivo);letter-spacing:.01em;color:var(--tinta-suave);max-width:34em}
@media(max-width:599px){
  .lib-accion{width:100%;max-width:380px;padding-inline:20px;gap:16px}
  .lib-accion--largo{font-size:11.5px;letter-spacing:.02em;padding-inline:14px}
}
@media(min-width:1024px){.lib-accion{min-height:62px;padding:20px 34px;font-size:13.5px;min-width:19rem}}

/* ------------------------------------------------------- apertura (LB1/LA1) -- */
/* La promesa abre la página (Jamie, bloque 1) y, en la misma pantalla, se ven el botón y el libro, como en Money Code
   (revisión M1): sin altura mínima, el aire lo ponen los rellenos. En Arkwright, la frase del libro va debajo,
   en el sitio de los mensajes de Jamie, compuesta como epígrafe. */
.lib-apertura{display:flex;flex-direction:column;box-sizing:border-box;padding:calc(64px + clamp(26px,6vw,56px)) var(--g) clamp(14px,2.6svh,30px)}
.lib-apertura__dentro{display:flex;flex-direction:column;width:100%;max-width:var(--max);margin:0 auto}
.lib-apertura__dentro > .lib-titular{margin:clamp(6px,2svh,24px) 0 0}
.lib-titular{margin:0;display:grid;gap:clamp(14px,1.7vw,28px)}
.lib-titular__uno{display:block;font-family:var(--archivo);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;text-transform:uppercase;font-size:var(--t-portada);line-height:1.02;letter-spacing:-.034em;max-width:16.5em;text-wrap:balance}
.lib-titular__dos{display:block;font:400 var(--e-grande)/1.24 var(--caslon);letter-spacing:-.02em;color:var(--burdeos);max-width:23em;text-wrap:balance}
.lib-titular__dos:empty{display:none}
.lib-cita{margin:clamp(34px,5vw,64px) 0 0;max-width:33em;display:grid;gap:14px;flex:none}
.lib-cita blockquote{margin:0;font:italic 400 var(--e-medio)/1.45 var(--caslon);letter-spacing:-.012em;text-wrap:pretty}
.lib-cita blockquote p{margin:0}
.lib-cita figcaption{font:600 11.5px/1.5 var(--archivo);letter-spacing:.12em;text-transform:uppercase;color:var(--acero)}
html[data-op-la1p="b"] .lib-cita{display:none}
@media(min-width:1024px){
  .lib-apertura{padding-top:calc(84px + clamp(12px,2.6svh,36px));padding-bottom:clamp(28px,6svh,64px)}
  .lib-titular__dos{margin-left:33.333%}
  .lib-apertura__dentro > .lib-titular{margin:0}
  .lib-cita{margin:clamp(18px,3svh,36px) 0 0 33.333%;max-width:40em}
  .lib-cita blockquote{font-size:clamp(1.12rem,.9rem + .5vw,1.36rem)}
  /* Arkwright: su línea larga («parece normal ganar.») mide 16,2 em; el titular se limita por el ancho útil
     para quedarse en dos líneas también a 1024, en vez de partir una tercera. */
  .lib--arkwright .lib-titular__uno{font-size:min(var(--t-portada),calc((100vw - 2 * var(--g)) / 16.4))}
  /* Arkwright: «Y no la elegiste tú.» baja a la izquierda y la frase del libro sube a su lado, en el eje del 33 %
     (un epígrafe junto al segundo tiempo, en vez de otra fila). Sin segundo tiempo (opción B), la frase sigue debajo. */
  .lib--arkwright .lib-titular:has(> .lib-titular__dos) > .lib-titular__dos{margin-left:0;max-width:calc(33.333% - clamp(24px,3vw,48px))}
  .lib--arkwright .lib-titular:has(> .lib-titular__dos) + .lib-cita{margin-top:calc(-1.24 * var(--e-grande) + .3em)}
}
/* Móvil (QA-REVISION-2, N2): el titular de Arkwright cabe en 4 líneas («que te parece» mide 10,05 em) y, en pantallas bajas,
   la apertura recorta aire para que el botón entre entero (360×740, 375×667, 390×664; igual a 390×844 y 414×896). */
@media(max-width:599px){
  .lib--arkwright .lib-titular__uno{font-size:min(var(--t-portada),calc((100vw - 2 * var(--g)) / 10.2))}
}
@media(max-width:599px) and (max-height:700px){
  .lib--arkwright .lib-apertura{padding-top:80px;padding-bottom:10px}
  .lib--arkwright .lib-cita{margin-top:20px}
  .lib--arkwright .lib-presentacion{padding-top:12px}
}

/* ----------------------------------------------------- presentación (LB2/LA2) -- */
/* Jamie, bloque 2: antetítulo → nombre → botón → objeto, centrado. */
.lib-presentacion{position:relative;z-index:1;padding:clamp(20px,3vw,40px) var(--g) clamp(26px,3.4vw,44px);text-align:center}
.lib-presentacion__texto{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(16px,2.1vw,30px)}
.lib-antetitulo{margin:0;font:italic 400 var(--e-medio)/1.3 var(--caslon);color:var(--tinta-suave)}
.lib-antetitulo--versal{font:600 12px/1.4 var(--archivo);font-style:normal;letter-spacing:.2em;color:var(--acero)}
.lib-nombre{margin:0;display:grid;justify-items:center;gap:.1em;font-weight:400}
/* «ARKWRIGHT» mide 7,8 em en Archivo 125 % 800: el tamaño se limita por el ancho útil para que nunca desborde. */
.lib-nombre__uno{display:block;font-family:var(--archivo);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;text-transform:uppercase;font-size:min(clamp(2.6rem,1rem + 7.3vw,8.6rem),calc((100vw - 2 * var(--g)) / 8.05));line-height:.94;letter-spacing:-.036em;text-wrap:balance}
.lib-nombre__dos{display:block;font:italic 400 var(--e-grande)/1.1 var(--caslon);letter-spacing:-.02em;color:var(--burdeos)}
.lib-nombre--libro .lib-nombre__dos{color:var(--tinta)}
.lib-nombre--libro .lib-nombre__uno{font-size:min(clamp(3rem,1rem + 9.5vw,10.6rem),calc((100vw - 2 * var(--g)) / 8.05))}
.lib-presentacion__accion{display:grid;justify-items:center;gap:12px;width:100%}
/* Escritorio (revisión M1): la presentación sigue a la promesa sin pantalla vacía y el objeto asoma bajo el botón.
   En el índice, EL MÉTODO ARKWRIGHT va en una sola línea de ancho completo (15,45 em), como una cabecera;
   en Arkwright, el ARKWRIGHT monumental se limita también por la altura de la pantalla (16 svh). */
@media(min-width:1024px){
  .lib-presentacion{padding-top:0;padding-bottom:clamp(8px,1.6svh,20px)}
  .lib-presentacion__texto{gap:clamp(10px,1.9svh,22px)}
  .lib-presentacion__accion{gap:8px}
  .lib--indice .lib-presentacion .lib-nombre__uno{font-size:min(clamp(2.6rem,1rem + 7.3vw,8.6rem),calc((100vw - 2 * var(--g)) / 15.6))}
  .lib-presentacion .lib-nombre--libro .lib-nombre__uno{font-size:min(clamp(3rem,1rem + 9.5vw,10.6rem),calc((100vw - 2 * var(--g)) / 8.05),16svh)}
}

/* ------------------------------------------- el libro como objeto (portadas) -- */
.lib-libro{position:relative;display:block;color:inherit;text-decoration:none;perspective:1400px;isolation:isolate;flex:none;-webkit-tap-highlight-color:transparent}
.lib-libro__inclina{display:block;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .6s var(--ease)}
.lib-libro__objeto{position:relative;display:block;transform-style:preserve-3d}
/* Arkwright: cubierta original de pie, con canto de páginas, luz cobre en el título y sombra suave (bloque #libros). */
.lib-libro--ark .lib-libro__objeto{aspect-ratio:1875/2775;transform:perspective(1300px) rotateY(-1deg) rotate(-2deg);filter:drop-shadow(12px 19px 13px #11111126)}
.lib-libro__portada{position:relative;z-index:2;display:block;width:100%;height:auto;backface-visibility:hidden;box-shadow:inset 2px 0 2px #1114;border-radius:1px 3px 3px 1px}
.lib-libro__paginas{position:absolute;top:1%;left:99%;width:17px;height:98%;background:repeating-linear-gradient(90deg,#fffdfb 0 2px,#d3dee7 2px 3px);transform:rotateY(80deg);transform-origin:left center;border-right:3px solid #111;z-index:1}
.lib-libro__luz{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:screen;overflow:hidden;opacity:0}
.lib-libro__canto{position:absolute;inset:0;z-index:4;pointer-events:none;border-left:1px solid #ffffff30;box-shadow:inset 4px 0 4px #0003}
html[data-mov="1"] .lib-libro__luz{opacity:1}
/* No eres tú: el mockup original tumbado (con transparencia), con la tinta burdeos que cruza su título. */
.lib-libro--net .lib-libro__objeto{transform:rotate(-1deg);transform-origin:50% 65%;filter:drop-shadow(5px 10px 9px #1112)}
.lib-libro--net .lib-libro__mockup{display:block;width:100%;height:auto}
.lib-libro__tinta{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none;overflow:hidden;opacity:0}
html[data-mov="1"] .lib-libro__tinta{opacity:1}
a.lib-libro:focus-visible{outline:2px solid var(--acero);outline-offset:10px}

/* Bodegón del índice: Arkwright de pie (principal) y No eres tú tumbado a su lado (secundario), sin taparse. */
.lib-bodegon{position:relative;z-index:0;display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,2.4vw,40px);width:100%;max-width:var(--max);margin:0 auto;padding:clamp(18px,3vw,40px) var(--g) clamp(40px,5vw,64px);box-sizing:border-box}
.lib-bodegon .lib-libro--ark{width:min(51%,clamp(170px,26vw,372px))}
.lib-bodegon .lib-libro--net{width:min(44%,clamp(150px,29vw,420px));margin-bottom:-2%}
/* Escena del libro en Arkwright: una sola cubierta, grande. */
.lib-escena{position:relative;z-index:0;display:flex;justify-content:center;width:100%;padding:clamp(18px,3vw,40px) var(--g) clamp(44px,5vw,72px);box-sizing:border-box}
.lib-escena .lib-libro--ark{width:min(68vw,clamp(220px,calc((100svh - 140px) * .62),430px))}
/* Escritorio (revisión M1): el objeto arranca justo bajo el botón, para que asome en la primera pantalla. */
@media(min-width:1024px){.lib-bodegon,.lib-escena{padding-top:clamp(20px,3.6svh,40px)}}
/* Escritorio con poca altura útil (QA-REVISION-2, N5): a 1100×700 el libro asoma unos 50 px en vez de un filete de 5. */
@media(min-width:1024px) and (max-height:760px){
  .lib-apertura{padding-top:calc(84px + 8px);padding-bottom:20px}
  .lib-bodegon,.lib-escena{padding-top:12px}
}

/* G1/telón: el objeto se queda y la hoja siguiente (LB3/LA3) sube y lo tapa. */
.lib-telon{position:relative}
html:not([data-quieto="1"]) .lib-telon > .lib-bodegon,html:not([data-quieto="1"]) .lib-telon > .lib-escena{position:sticky;top:max(12px,calc(50svh - var(--alto-objeto,320px) / 2))}

/* ---------------------------------------------------- lo que enseña (LB3/LA3) -- */
/* Jamie, bloque 3: titular y una tarjeta con la frase. Aquí la tarjeta es una página suelta del libro:
   papel con filete doble y la sombra de libro del bloque #libros, sobre la hoja que sube. Sin campos de color. */
.lib-ensena{position:relative;z-index:2;background:var(--papel);padding:clamp(60px,8vw,112px) var(--g) var(--bloque);box-shadow:0 -26px 44px -30px #11111147}
.lib-ensena__dentro{max-width:var(--max);margin:0 auto;display:grid;justify-items:center;gap:clamp(30px,3.6vw,54px);text-align:center}
.lib-ensena__titulo{margin:0;font-size:var(--t-bloque);max-width:17em}
.lib-tarjeta{position:relative;width:min(100%,760px);box-sizing:border-box;display:grid;gap:clamp(16px,2vw,24px);padding:clamp(40px,6vw,84px) clamp(26px,5vw,72px) clamp(44px,6.4vw,92px);background:var(--papel);color:var(--tinta);text-align:center;border:1px solid #1111141f;transform:rotate(-1.1deg);filter:drop-shadow(12px 19px 13px #1111111c)}
.lib-tarjeta::before{content:"";position:absolute;inset:clamp(10px,1.4vw,16px);border:1px solid #11111414;pointer-events:none}
.lib-tarjeta__frase{margin:0;font:400 var(--e-grande)/1.2 var(--caslon);letter-spacing:-.018em;text-wrap:balance}
.lib-tarjeta__nota{margin:0 auto;max-width:30em;font:italic 400 clamp(1.04rem,.98rem + .3vw,1.22rem)/1.5 var(--caslon);color:var(--tinta-suave)}

/* ------------------------------------------------------- promesas (LB4/LA4) -- */
/* Jamie, bloque 4: titular y cinco cajas de una línea sobre un campo oscuro. Aquí, banda de tinta.
   En escritorio el titular se queda a la izquierda (y en el índice, los dos libros) mientras pasan las cajas. */
.lib-promesas{position:relative;z-index:2;background:var(--tinta);color:var(--papel);padding:var(--bloque) var(--g)}
.lib-promesas__dentro{max-width:var(--max);margin:0 auto;display:grid;gap:clamp(30px,3.6vw,52px)}
.lib-promesas__cabeza{display:grid;gap:clamp(28px,3vw,44px);justify-items:center;text-align:center;align-content:start}
.lib-promesas__titulo{margin:0;font-size:var(--t-bloque);max-width:13em;color:var(--papel)}
/* Las cubiertas son el material de la banda en todos los anchos (revisión M3): en el móvil, bajo el titular;
   en escritorio, en la columna fija. En Arkwright, su cubierta sola (--uno) llena la columna del titular. */
.lib-promesas__libros{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,3vw,24px);width:min(80%,300px)}
.lib-promesas__libros img{display:block;height:auto;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.lib-promesas__libros .lib-mini--ark{width:44%;transform:rotate(-2deg)}
.lib-promesas__libros .lib-mini--net{width:56%;margin-bottom:-2%}
.lib-promesas__libros--uno{width:min(44%,170px)}
.lib-promesas__libros--uno .lib-mini--ark{width:100%}
.lib-promesas__lista{display:grid;gap:clamp(26px,3vw,40px);width:100%;max-width:760px;justify-self:center}
.lib-grupo{width:100%;display:grid;gap:14px}
.lib-grupo__libro{margin:0;font:italic 400 var(--e-medio)/1.3 var(--caslon);letter-spacing:-.005em;color:var(--acero-sobre-tinta);text-align:center}
.lib-cajas{list-style:none;margin:0;padding:0;display:grid;gap:12px;width:100%}
.lib-caja{margin:0;padding:clamp(20px,2.4vw,28px) clamp(20px,3vw,40px);background:var(--papel);color:var(--tinta);border:1px solid var(--papel);font:400 clamp(1.1rem,1rem + .42vw,1.38rem)/1.42 var(--caslon);letter-spacing:-.006em;text-align:center;text-wrap:balance;transition:background-color .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease),transform .7s var(--ease)}
.lib-cajas--num{counter-reset:capitulo}
.lib-cajas--num .lib-caja{counter-increment:capitulo;display:grid;grid-template-columns:2.2em minmax(0,1fr);align-items:baseline;column-gap:12px;text-align:left}
.lib-cajas--num .lib-caja::before{content:counter(capitulo) ".";font:800 .92em/1 var(--archivo);font-variation-settings:"wdth" 125,"wght" 800;color:var(--burdeos);transition:color .55s var(--ease)}
/* Un foco por pantalla: la caja que cruza el centro se enciende; las leídas quedan en papel. Sin movimiento, todas en papel. */
html[data-lectura="1"] .lib-caja:not(.is-leida){background:transparent;color:#fffdfbcc;border-color:#fffdfb4d}
html[data-lectura="1"] .lib-cajas--num .lib-caja:not(.is-leida)::before{color:var(--acero-sobre-tinta)}
html[data-lectura="1"] .lib-caja.is-foco{transform:scale(1.018)}
@media(min-width:900px){
  .lib-promesas__dentro{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,6vw,112px);align-items:start}
  .lib-promesas__cabeza{position:sticky;top:clamp(48px,12vh,120px);justify-items:start;text-align:left}
  .lib-promesas__titulo{max-width:9em}
  .lib-promesas__lista{justify-self:stretch}
  .lib-grupo__libro{text-align:left}
  .lib-caja{text-align:left}
  .lib-promesas__libros{justify-content:flex-start;gap:clamp(14px,1.6vw,24px);width:min(100%,360px)}
  .lib-promesas__libros--uno{width:min(56%,210px)}
  html[data-lectura="1"] .lib-promesas__libros img{opacity:.32}
  html[data-lectura="1"] .lib-promesas[data-grupo-activo="ark"] .lib-mini--ark,
  html[data-lectura="1"] .lib-promesas[data-grupo-activo="net"] .lib-mini--net,
  html[data-lectura="1"] .lib-promesas__libros--uno img{opacity:1}
}

/* ---------------------------------------------------------- oferta (LB5/LA5) -- */
/* Jamie, bloque 5: tarjeta «qué recibes» con dos entregables unidos y el botón con el precio.
   Es la pieza burdeos de la página (R9: una vez), con el brillo Hanya de la invitación de la home. */
.lib-oferta-bloque{position:relative;z-index:2;background:var(--papel);padding:var(--bloque) var(--g)}
.lib-oferta{--brillo-x:68%;--brillo-y:22%;position:relative;isolation:isolate;overflow:hidden;max-width:700px;margin:0 auto;box-sizing:border-box;display:grid;justify-items:center;gap:clamp(12px,1.4vw,18px);padding:clamp(38px,5vw,64px) clamp(22px,4.4vw,60px) clamp(34px,4.4vw,54px);background:var(--burdeos);color:var(--papel);text-align:center;border:1px solid #6a2b2e;box-shadow:inset 0 1px 0 #ffffff18,inset 0 -1px 0 #160005aa}
.lib-oferta::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(ellipse at var(--brillo-x) var(--brillo-y),#e9b5a655 0%,#c67d7120 32%,transparent 68%);transition:opacity .7s ease}
.lib-oferta::after{content:"";position:absolute;inset:-120% -70%;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 44%,#ffddd61c 49%,#ffddd63d 50%,#ffddd61c 51%,transparent 56%);transform:translateX(-65%);transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.lib-oferta:hover::before,.lib-oferta.is-luz::before{opacity:1}
.lib-oferta:hover::after,.lib-oferta.is-luz::after{transform:translateX(40%)}
.lib-oferta p,.lib-oferta h2{margin:0}
.lib-oferta__cabeza{font-size:var(--t-rotulo);line-height:1.08;max-width:15em;margin-bottom:clamp(6px,1vw,14px)!important}
.lib-oferta__lista{display:grid;justify-items:center;gap:6px}
.lib-oferta__titulo{font:italic 400 var(--e-grande)/1.1 var(--caslon);letter-spacing:-.018em;text-wrap:balance}
.lib-oferta__titulo strong{font:inherit;letter-spacing:inherit}
.lib-oferta__sub{margin-top:2px!important;max-width:24em;font:italic 400 clamp(.98rem,.95rem + .18vw,1.08rem)/1.45 var(--caslon);color:#fffdfbd9}
.lib-oferta__formato{margin-top:4px!important;font:500 13px/1.5 var(--archivo);letter-spacing:.02em;color:#fffdfbe0;max-width:26em}
.lib-oferta__y{margin:clamp(8px,1.2vw,16px) 0!important;font:italic 400 var(--e-grande)/1 var(--caslon);color:#fffdfbcc}
.lib-oferta .lib-accion{margin-top:clamp(16px,2vw,26px)}
/* WCAG 1.4.12 (QA-REVISION-2, N4): con el espaciado del usuario, la pista de la tarjeta ya no crece con los títulos que llevan
   espacios de no separación (su overflow:hidden, el del brillo, los cortaba) y, sólo si no cabe, la palabra se parte. Sin la anulación no cambia nada. */
.lib-oferta{grid-template-columns:minmax(0,1fr)}
.lib-oferta :is(.lib-oferta__cabeza,.lib-oferta__titulo,.lib-oferta__formato,.lib-oferta__sub),.lib-nombre__uno{overflow-wrap:anywhere}

/* ----------------------------------------------------------- espejo (LB6/LA6) -- */
/* Jamie, bloque 6: titular en tercera, entradilla, cuerpo, cierre de duda, botón y foto de la autora. */
.lib-espejo{position:relative;z-index:2;display:grid;background:var(--papel)}
.lib-espejo__texto{display:grid;gap:clamp(22px,2.4vw,32px);padding:var(--bloque) var(--g) clamp(44px,5vw,64px);align-content:center}
.lib-espejo__copy{display:grid;gap:clamp(18px,2vw,26px)}
.lib-espejo__copy > *{margin:0}
/* El titular del espejo es una frase larga en tercera persona (como el de Jamie, en serif): se compone como enunciado
   en Caslon, y la entradilla en cursiva burdeos, la segunda voz del sistema. */
.lib-espejo__titulo{font:400 var(--e-grande)/1.16 var(--caslon);letter-spacing:-.02em;text-transform:none;max-width:19em}
.lib-espejo__entradilla{font:italic 400 var(--e-medio)/1.36 var(--caslon);letter-spacing:-.012em;max-width:26em;color:var(--burdeos)}
.lib-espejo__cuerpo{max-width:34em}
.lib-espejo__duda{font-size:clamp(1.1rem,1rem + .38vw,1.3rem);line-height:1.5;max-width:30em}
.lib-espejo__duda em{display:block}
.lib-espejo__foto{position:relative;margin:0;height:min(130vw,640px);overflow:hidden;background:#f0f3f5}
.lib-espejo__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 26%;transform-origin:50% 50%}
/* G5 · B/N que cobra color al cursor (o al cruzar el centro en táctil). Sin JS, quieto o movimiento reducido: color. */
html[data-g5="1"] .lib-espejo__foto--g5 img{filter:grayscale(1) contrast(1.04);transition:filter 1s var(--ease)}
html[data-g5="1"] .lib-espejo__foto--g5:hover img,html[data-g5="1"] .lib-espejo__foto--g5.is-color img{filter:none}
@media(min-width:900px){
  .lib-espejo{grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:min(100svh,940px)}
  .lib-espejo__texto{padding:var(--bloque) clamp(40px,6vw,112px) var(--bloque) max(var(--g),calc((100vw - var(--max)) / 2))}
  .lib-espejo__foto{height:auto;min-height:100%}
}
/* Arkwright (revisión M4): la autora es A11 y el MAPA-FOTOS la admite «a tamaño medio», en 4:5 por encima de la cintura.
   Va como retrato con aire de papel alrededor, no a sangre: así el traje chocolate, los aros y el escote no dominan. */
.lib--arkwright .lib-espejo__foto{width:min(calc(100% - 2 * var(--g)),300px);height:auto;aspect-ratio:4/5;margin:0 auto var(--bloque)}
.lib--arkwright .lib-espejo__foto img{object-position:50% 6%}
/* Fotos de autora del espejo en B/N fijo (decisión de dirección tras QA-REVISION-2, N3), como las de Sobre mí y el hero:
   en color, A11 enseña traje chocolate y aros dorados, y A19 jersey verde y herrajes dorados (R8). A19 deja el revelado G5. */
:is(.lib--indice,.lib--arkwright) .lib-espejo__foto img{filter:grayscale(1) contrast(1.05)}
@media(min-width:900px){
  .lib--arkwright .lib-espejo__foto{align-self:center;width:min(calc(100% - var(--g)),360px);min-height:0;margin:var(--bloque) auto;margin-right:max(var(--g),calc((100vw - var(--max)) / 2))}
}

/* -------------------------------------------------------- preguntas (LB7/LA7) -- */
/* Jamie, bloque 7: preguntas en acordeón. Sobre tinta, como las preguntas de Soft CEO Code. */
.lib-preguntas{position:relative;z-index:2;background:var(--tinta);color:var(--papel);padding:var(--bloque) var(--g)}
.lib-faq{max-width:860px;margin:0 auto;border-top:1px solid #fffdfb33}
.lib-faq details{border-bottom:1px solid #fffdfb33}
.lib-faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:22px 0;cursor:pointer;list-style:none;font:600 17px/1.4 var(--archivo);font-variation-settings:"wdth" 104,"wght" 600;letter-spacing:-.005em}
.lib-faq summary::-webkit-details-marker{display:none}
.lib-faq summary:focus-visible{outline:2px solid var(--papel);outline-offset:4px}
.lib-faq__signo{position:relative;flex:none;width:18px;height:18px}
.lib-faq__signo::before,.lib-faq__signo::after{content:"";position:absolute;left:0;top:8.25px;width:18px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.lib-faq__signo::after{transform:rotate(90deg)}
.lib-faq details[open] .lib-faq__signo::after{transform:rotate(0deg)}
.lib-faq__respuesta{padding:0 0 26px;max-width:38em;color:#fffdfbe0}
.lib-faq__respuesta p{margin:0}
@media(min-width:1024px){.lib-faq summary{font-size:18px;padding:25px 0}}

/* ---------------------------------------------------------- autora (LB9/LA9) -- */
/* Jamie, bloque 9: una línea de autora en tercera persona. La L de Hazel en relieve la firma (sin sello). */
.lib-autora{position:relative;z-index:2;background:var(--papel);padding:clamp(60px,8vw,112px) var(--g) clamp(64px,8vw,120px)}
.lib-autora__dentro{max-width:var(--max);margin:0 auto;display:grid;justify-items:center;text-align:center;gap:6px}
.lib-autora__texto{display:grid;justify-items:center;gap:6px}
.lib-autora__texto > p{margin:0}
.lib-firma{position:relative;width:132px;height:146px;margin:-10px 0 4px;display:flex;align-items:center;justify-content:center}
.lib-firma .rl-hazel{display:block;font-size:98px;line-height:1;margin:.275em .356em .187em .185em;color:var(--burdeos)}
.lib-autora__linea{font:400 var(--e-medio)/1.45 var(--caslon);letter-spacing:-.01em;max-width:30em}
.lib-autora__linea--dos{font:600 12px/1.6 var(--archivo);letter-spacing:.13em;text-transform:uppercase;color:var(--acero);max-width:40em}
@media(min-width:900px){.lib-firma{width:148px;height:156px}.lib-firma .rl-hazel{font-size:108px}}

/* -------------------------------------------------- bloque de libro de Jen -- */
/* Jen Gottlieb, bloque BE SEEN: portada grande → titular en dos tonos → tres párrafos → un botón.
   Página de No eres tú (estructura única) y estructura B de Arkwright y del índice. */
.lib-jen{position:relative;z-index:2;background:var(--papel);padding:clamp(48px,7vw,96px) var(--g) var(--bloque)}
.lib-jen--pagina{padding-top:calc(64px + clamp(26px,5vw,48px))}
.lib-jen__dentro{max-width:1180px;margin:0 auto;display:grid;gap:clamp(30px,4vw,56px);align-items:center}
.lib-jen__libro{justify-self:center;display:grid;justify-items:center;gap:18px;width:100%}
.lib-jen__libro .lib-libro--ark{width:min(66vw,clamp(220px,30vw,400px))}
.lib-jen__libro .lib-libro--net{width:min(100%,clamp(300px,44vw,600px))}
.lib-jen__nombre{text-align:center}
.lib-jen__nombre .lib-nombre__uno{font-size:var(--t-bloque)}
.lib-jen__nombre .lib-nombre__dos{font-size:var(--e-medio)}
.lib-jen__texto{display:grid;gap:clamp(18px,2vw,24px);max-width:34em}
.lib-jen__texto > *{margin:0}
.lib-jen__titular{display:grid;gap:clamp(10px,1.2vw,16px)}
/* Como en Jen, el titular en dos tonos tiene que caber con el libro y el botón en la primera pantalla de escritorio. */
.lib-jen__titular .lib-titular__uno{font-size:clamp(1.62rem,1.02rem + 1.9vw,2.65rem);line-height:1.04;max-width:none}
.lib-jen__titular .lib-titular__dos{font-size:var(--e-medio);margin-left:0!important;font-style:italic}
.lib-jen__titular .lib-titular__dos em{font-style:italic}
.lib-jen__parrafo{font-size:clamp(1.04rem,1rem + .15vw,1.12rem);line-height:1.6}
.lib-jen__accion{display:grid;gap:12px;justify-items:start;margin-top:clamp(4px,1vw,12px)!important}
@media(max-width:599px){.lib-jen__accion{justify-items:stretch}}
@media(min-width:900px){
  .lib-jen__dentro{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:clamp(48px,5vw,88px)}
  .lib-jen--pagina{min-height:100svh;box-sizing:border-box;display:grid;align-items:center;padding-top:calc(84px + 24px);padding-bottom:clamp(64px,8vh,104px)}
}

/* ------------------------------------------------ barra fija (opción, móvil) -- */
.lib-barra{display:none}
@media(max-width:899px){
  html[data-op-barra="si"] .lib-barra{position:fixed;inset:auto 0 0 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px max(14px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:var(--papel);border-top:1px solid #11111426;box-shadow:0 -10px 30px -18px #11111140}
  html[data-op-barra="si"] .lib-barra p{margin:0;font:500 12.5px/1.35 var(--archivo);color:var(--tinta)}
  html[data-op-barra="si"] .lib-barra .lib-accion{width:auto;min-width:0;min-height:48px;padding:12px 18px;font-size:12px}
  html[data-op-barra="si"] .lib-page .mc40-footer{padding-bottom:96px}
}

/* ------------------------------------------------------------ estructuras -- */
/* Estructura A (por defecto) y B: el orden lo fija el copy de cada página. */
html:not([data-op-estructura="b"]) .lib-solo-b{display:none!important}
html[data-op-estructura="b"] .lib-solo-a{display:none!important}
html[data-op-estructura="b"] .lib--indice > .lib-apertura{order:1}
html[data-op-estructura="b"] .lib--indice > .lib-telon{order:2}
html[data-op-estructura="b"] .lib--indice > .lib-espejo{order:3}
html[data-op-estructura="b"] .lib--indice > .lib-jen{order:4}
html[data-op-estructura="b"] .lib--indice > .lib-oferta-bloque{order:5}
html[data-op-estructura="b"] .lib--indice > .lib-preguntas{order:6}
html[data-op-estructura="b"] .lib--indice > .lib-autora{order:7}
html[data-op-estructura="b"] .lib--indice .lib-ensena{box-shadow:none}

/* El pie H4-E sigue a la firma sobre papel. */
.lib-page .mc40-footer{position:relative;z-index:2}

/* Partes unidas por «·» (revisión m3): si no caben en una línea, cada parte va en la suya y el punto se oculta,
   para que nunca quede colgado al final (libros.js marca data-apilado). Sin JS, el punto va pegado a la palabra anterior. */
.lib-segs[data-apilado]{display:block}
.lib-segs[data-apilado] > .lib-seg{display:block}
.lib-segs[data-apilado] > .lib-punto{display:none}

/* ---------------------------------------------------------------- entrada -- */
/* Un solo momento al cargar: los dos tiempos del titular suben desde su línea y la cita llega después. */
html[data-entrada="1"] .lib-entra{transition:clip-path 1.2s var(--ease),transform 1.2s var(--ease),opacity .9s ease}
html[data-entrada="1"]:not([data-entrada-hecha]) .lib-entra{clip-path:inset(0 0 100% 0);transform:translateY(.42em);opacity:0}
html[data-entrada="1"] .lib-entra--2{transition-delay:.16s}
html[data-entrada="1"] .lib-entra--3{transition-delay:.42s}
html[data-entrada="1"] .lib-entra--4{transition-delay:.6s}
html[data-entrada="1"] .lib-entra-libro{transition:transform 1.5s var(--ease),opacity 1s ease}
html[data-entrada="1"]:not([data-entrada-hecha]) .lib-entra-libro{transform:translateY(46px) rotate(-5deg);opacity:0}
/* Índice y Arkwright (revisión m2): el mismo titular que se abre, antes y más corto; arranca en cuanto están las fuentes. */
html[data-entrada="1"] :is(.lib--indice,.lib--arkwright) .lib-entra{transition:clip-path .75s var(--ease),transform .75s var(--ease),opacity .45s ease}
html[data-entrada="1"] :is(.lib--indice,.lib--arkwright) .lib-entra--2{transition-delay:.08s}
html[data-entrada="1"] :is(.lib--indice,.lib--arkwright) .lib-entra--3{transition-delay:.24s}

/* ------------------------------------------------- quieto y movimiento reducido -- */
html[data-quieto="1"] .lib *,html[data-quieto="1"] .lib *::before,html[data-quieto="1"] .lib *::after{transition:none!important;animation:none!important}
html[data-quieto="1"] .lib-libro__luz,html[data-quieto="1"] .lib-libro__tinta{display:none}
html[data-quieto="1"] .lib-promesas__cabeza{position:static}
@media(prefers-reduced-motion:reduce){
  .lib *,.lib *::before,.lib *::after{transition:none!important;animation:none!important}
  .lib-telon > .lib-bodegon,.lib-telon > .lib-escena,.lib-promesas__cabeza{position:relative!important;top:auto!important}
  .lib-libro__luz,.lib-libro__tinta,.lib-oferta::after{display:none}
  .lib-espejo__foto--g5 img{filter:none!important}
}

/* No eres tú no lleva pieza de oferta: su pieza burdeos es el botón, como el «Descubrir El método Arkwright» del bloque de libros aprobado. */
.lib-accion--burdeos{background:var(--burdeos)}
.lib-accion--burdeos:hover{background:var(--burdeos-vivo)}