/* biblioteca.css — la Biblioteca de toque.
   Sistema del manual llevado a la web: papel cálido, tinta para el texto,
   el naranja como único color, rótulos Shrikhand con raya naranja, etiquetas
   en Space Grotesk y una columna estrecha a la izquierda para números.
   Cada página es una «hoja»: en escritorio, un folio con su aire; en el
   móvil, papel a todo lo ancho. */
:root{
  --orange:#E8540A;--orange-hi:#FF7A1F;--orange-deep:#B23B02;--naranja-claro:#FFE2CF;
  --ink:#1A140C;--smoke:#6B6253;--gris:#6E655A;--cream:#F2EDE0;--paper:#FBF8F0;--sunk:#EAE4D4;--blanco:#fff;
  --linea:rgba(26,20,12,.14);
  --border:2px solid var(--ink);--shadow:4px 4px 0 var(--ink);--shadow-lg:6px 6px 0 var(--ink);
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --font-display:'Shrikhand',Georgia,serif;--font-body:'Nunito Sans',Verdana,Tahoma,sans-serif;
  --font-mono:'Space Grotesk','Courier New',Courier,monospace;
  --rail:clamp(40px,10vw,112px);--hueco:clamp(14px,2.4vw,30px);
}
body{background:var(--sunk);font-family:var(--font-body);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;font-family:var(--font-display);font-size:17px;border:var(--border);box-shadow:var(--shadow);transition:transform 150ms var(--ease-out),box-shadow 150ms var(--ease-out);letter-spacing:.3px}

/* ── Barra, menú y pie: los de la web ─────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:var(--cream);border-bottom:var(--border);padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-cta{font-size:14px;padding:10px 20px;line-height:1.6}
.nav-logo{transform-origin:left center;transition:transform 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav-logo:hover{transform:scale(1.12)}}
.nav-logo:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.nav-menu-btn{width:46px;height:44px;padding:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:transform 150ms var(--ease-out)}
.nav-menu-btn span{display:block;width:28px;height:4px;background:var(--orange);box-shadow:3px 3px 0 var(--ink);transition:box-shadow 150ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav-menu-btn:hover{transform:translate(-2px,-2px)}.nav-menu-btn:hover span{box-shadow:5px 5px 0 var(--ink)}}
.nav-menu-btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.menu{position:fixed;top:var(--nav-h,64px);right:0;left:auto;bottom:auto;z-index:110;margin:0;width:min(400px,92vw);max-width:none;height:calc(100dvh - var(--nav-h,64px));max-height:none;padding:clamp(18px,2vw,26px);border:0;border-left:var(--border);background:var(--cream);color:var(--ink);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 220ms var(--ease-drawer),overlay 220ms allow-discrete,display 220ms allow-discrete}
.menu[open]{transform:translateX(0);transition-duration:320ms}
@starting-style{.menu[open]{transform:translateX(100%)}}
.menu__cerrar{position:absolute;top:8px;right:10px;z-index:1;width:34px;height:34px;padding:0;border:0;background:none;font-family:var(--font-display);font-size:20px;line-height:1;color:var(--ink)}
.menu__nav{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.menu__nav:focus{outline:none}
.menu__nav>*{font-family:var(--font-display);font-size:clamp(19px,2.2vw,24px);line-height:1.1;color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color 150ms ease}
.menu__nav [aria-current]{text-decoration-color:var(--orange)}
@media (hover:hover) and (pointer:fine){.menu__nav a:hover{text-decoration-color:var(--orange)}}
.menu__firma{text-align:right;margin:auto 0 0;font-family:var(--font-display);font-size:clamp(38px,9vw,56px);line-height:1;color:var(--orange)}
.footer{background:var(--orange);padding:clamp(36px,6vh,64px) 20px 36px;margin-top:clamp(40px,8vh,80px)}
.entero{white-space:nowrap}
@media (max-width:560px){
  .menu{width:100vw;border-left:0}
  .footer__inner{display:grid;grid-template-columns:1fr auto;align-items:end;gap:16px 20px}
  .footer__links{grid-column:1;grid-row:1}
  .footer__logo{grid-column:2;grid-row:1}
}

.borrador{background:#FFE58A;color:var(--ink);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px 16px;border-bottom:1px solid var(--linea)}
mark.verificar{background:#FFE58A;color:var(--ink);font-family:var(--font-mono);font-size:.82em;padding:0 3px}

/* ── Migas ──────────────────────────────────────────────────── */
.migas{max-width:860px;margin:22px auto 0;padding:0 20px;display:flex;flex-wrap:wrap;gap:6px 10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--gris)}
.migas a{text-decoration:underline;text-decoration-color:var(--linea);text-underline-offset:3px}
.migas a:hover{color:var(--ink);text-decoration-color:var(--orange)}
.migas [aria-current]{color:var(--ink);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── La hoja ────────────────────────────────────────────────── */
.hoja{position:relative;max-width:860px;margin:18px auto 0;background:var(--paper);padding:clamp(28px,7vw,80px) clamp(20px,7.5vw,84px) clamp(32px,6vw,64px);box-shadow:0 1px 0 rgba(26,20,12,.06),0 18px 40px -24px rgba(26,20,12,.35)}
.hoja + .hoja{margin-top:28px}
@media (max-width:860px){.hoja{box-shadow:none;margin-top:12px}.hoja + .hoja{margin-top:12px}}
/* Las hojas de longitud fija (Lo esencial) mantienen la proporción A4. */
@media (min-width:861px){.hoja--fija{aspect-ratio:210/297;display:flex;flex-direction:column}.hoja--fija .folio{margin-top:auto}}

.b-etq{display:block;font-family:var(--font-mono);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);line-height:1.3}
.rotulos{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;border-top:3px solid var(--orange);padding-top:10px;font-family:var(--font-display);font-size:clamp(13px,1.7vw,16px);line-height:1.2;color:var(--orange)}
.rotulos>:nth-child(2){text-align:center}
.rotulos>:last-child{text-align:right}
@media (max-width:520px){.rotulos{grid-template-columns:1fr auto}.rotulos>:nth-child(2){display:none}}
.hoja__cab h1{font-family:var(--font-display);font-weight:400;font-size:clamp(32px,5.6vw,54px);line-height:1.06;color:var(--orange);margin-top:clamp(28px,5vw,48px);letter-spacing:-.005em;text-wrap:balance}
.firma-art{margin-top:18px;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:var(--gris);line-height:1.6}
.firma-art a{text-decoration:underline;text-decoration-color:var(--linea);text-underline-offset:3px}
.firma-art a:hover{color:var(--ink);text-decoration-color:var(--orange)}

/* Índice: la columna de números del manual */
.indice{margin-top:clamp(28px,4vw,40px);padding-top:14px;border-top:1px solid var(--linea)}
.indice ol{list-style:none;counter-reset:i;margin-top:10px;columns:2 260px;column-gap:var(--hueco)}
.indice li{counter-increment:i;break-inside:avoid;padding:4px 0;font-size:15px;line-height:1.4;display:grid;grid-template-columns:28px 1fr}
.indice li::before{content:counter(i,decimal-leading-zero);font-family:var(--font-mono);font-weight:600;font-size:12px;color:var(--orange);padding-top:2px}
.indice a:hover{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}

/* ── Texto ──────────────────────────────────────────────────── */
.hoja__texto{margin-top:clamp(24px,4vw,36px)}
.hoja__texto > * + *{margin-top:16px}
.hoja__texto h2{font-weight:800;font-size:clamp(22px,2.8vw,27px);line-height:1.22;letter-spacing:-.01em;margin-top:clamp(40px,6vw,60px);scroll-margin-top:90px;text-wrap:balance}
.hoja__texto h2::before{content:'';display:block;width:44px;height:3px;background:var(--orange);margin-bottom:14px}
.hoja__texto h3{font-weight:800;font-size:19px;line-height:1.3;margin-top:30px}
.hoja__texto h2 + *,.hoja__texto h3 + *{margin-top:10px}
.hoja__texto a{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.hoja__texto a:hover{color:var(--orange)}
.hoja__texto strong{font-weight:800}
.hoja__texto ul{list-style:none;padding-left:0}
.hoja__texto ul li{position:relative;padding-left:22px}
.hoja__texto ul li + li{margin-top:8px}
.hoja__texto ul li::before{content:'';position:absolute;left:2px;top:.68em;width:9px;height:9px;border-radius:50%;background:var(--orange)}
/* Pasos: número grande en la columna estrecha, como las tareas del manual */
.hoja__texto ol{list-style:none;counter-reset:p;padding-left:0}
.hoja__texto ol > li{counter-increment:p;position:relative;min-height:56px;padding:16px 0 16px calc(var(--rail) + var(--hueco));border-top:1px solid var(--linea)}
.hoja__texto ol > li:last-child{border-bottom:1px solid var(--linea)}
.hoja__texto ol > li::before{content:counter(p);position:absolute;left:0;top:14px;font-family:var(--font-display);font-size:clamp(26px,3.6vw,36px);line-height:1;color:var(--orange)}
.hoja__texto ol > li > p + p{margin-top:8px}
.hoja__texto blockquote{border-left:3px solid var(--orange);padding:2px 0 2px 18px;font-size:19px;line-height:1.5;font-weight:600}
.hoja__texto hr{border:0;border-top:1px solid var(--linea);margin:36px 0}
.hoja__texto img{border:1px solid var(--linea)}
.hoja__texto code{font-family:var(--font-mono);font-size:.88em;background:var(--blanco);border:1px solid var(--linea);padding:0 4px}

/* Tablas: solo líneas finas */
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;min-width:480px}
.tabla th{font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);text-align:left;padding:0 12px 8px 0;border-bottom:1.5px solid var(--ink)}
.tabla td{padding:10px 12px 10px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla td:first-child{font-weight:800}

/* ── Bloques ────────────────────────────────────────────────── */
.b-respuesta{border-top:3px solid var(--orange);padding-top:12px}
.b-respuesta p{font-size:clamp(19px,2.2vw,21px);line-height:1.5;margin-top:8px}
.b-respuesta p + p{margin-top:10px}
.b-cita{border-left:3px solid var(--orange);padding:4px 0 4px 18px}
.b-cita p{font-size:19px;line-height:1.5;font-weight:650}
.b-tarea{border-top:3px solid var(--orange);padding-top:12px}
.b-tarea p{font-weight:650;margin-top:8px}
.b-aviso{background:var(--naranja-claro);padding:16px 20px}
.b-aviso p{margin-top:6px}
.b-dato{display:grid;grid-template-columns:var(--rail) 1fr;column-gap:var(--hueco);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:16px 0}
.b-dato .b-etq{grid-column:1/-1;margin-bottom:6px}
.b-dato > :not(.b-etq){grid-column:1/-1}
.b-dato strong:first-child{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4.4vw,44px);line-height:1;color:var(--orange);display:block;margin-bottom:6px}
.b-copia{position:relative;background:var(--blanco);border:1px solid var(--linea);border-radius:6px;padding:22px 20px 18px;margin-top:26px !important}
.b-copia .b-etq{position:absolute;top:-8px;left:14px;padding:0 6px;background:var(--paper);font-size:10.5px}
.b-copia pre{font-family:var(--font-mono);font-size:14.5px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}
.b-copia button{position:absolute;top:10px;right:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--paper);border:1px solid var(--linea);padding:4px 8px;color:var(--ink)}
.b-copia button:hover{border-color:var(--orange)}
.b-dibujo{margin:30px 0 !important}
.b-dibujo svg{display:block;width:100%;height:auto;overflow:visible}
.b-dibujo figcaption{margin-top:10px;font-family:var(--font-mono);font-size:12.5px;color:var(--gris);line-height:1.5}

/* El producto: tras el método, antes de las preguntas */
.b-producto{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:clamp(16px,3vw,32px);align-items:center;border-top:3px solid var(--orange);border-bottom:1px solid var(--linea);padding:22px 0;margin:clamp(36px,5vw,52px) 0 0 !important}
.b-producto img{width:100%;height:auto;max-height:240px;object-fit:contain;border:0;background:none}
.b-producto__t{font-weight:800;font-size:clamp(19px,2.3vw,22px);line-height:1.3;margin-top:8px}
.b-producto ul{list-style:none;margin:12px 0 18px;padding:0}
.b-producto li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5}
.b-producto li + li{margin-top:6px}
.b-producto li::before{content:'';position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.b-producto .btn{text-decoration:none;color:var(--paper)}
@media (max-width:560px){.b-producto{grid-template-columns:1fr}.b-producto img{max-width:150px;max-height:200px}}

/* Pie del artículo */
.hoja__pie{margin-top:clamp(40px,6vw,56px)}
.hoja__pie > * + *{margin-top:32px}
.pilar{font-size:15.5px;color:var(--smoke)}
.pilar a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}

/* Listas de artículos: las filas del mapa del manual */
.lista{list-style:none;margin-top:10px;padding:0}
.lista li{border-bottom:1px solid var(--linea)}
.lista li:first-child{border-top:1.5px solid var(--ink)}
.lista a{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 0;align-items:baseline;transition:padding-left 150ms var(--ease-out)}
.lista__t{font-weight:800;font-size:17px;line-height:1.35}
.lista__s{grid-column:1;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--orange)}
.lista__m{grid-row:1;grid-column:2;font-family:var(--font-mono);font-size:12px;color:var(--gris);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.lista a:hover{padding-left:8px}.lista a:hover .lista__t{color:var(--orange)}}
.grupo{margin-top:clamp(36px,5vw,52px)}
.grupo__t{font-family:var(--font-display);font-weight:400;font-size:clamp(21px,2.6vw,26px);line-height:1.15;color:var(--orange)}
.sectores-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sectores-chips a{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;padding:7px 12px;border:1.5px solid var(--ink);background:var(--blanco);transition:transform 150ms var(--ease-out),box-shadow 150ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.sectores-chips a:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}}

/* Calculadoras de reseñas */
.b-calc{margin:32px 0;padding:22px clamp(16px,3vw,28px) 18px;border:var(--border);background:var(--blanco);box-shadow:var(--shadow)}
.calc__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px 24px;margin-top:14px}
.calc__campo{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;font-size:14px;font-weight:700;line-height:1.3}
.calc__campo > span{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.calc__campo output{font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1;color:var(--orange)}
.calc__campo input[type=number],.calc__campo select{font:inherit;font-size:16px;font-weight:400;padding:9px 10px;border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);width:100%}
.calc__campo input:focus-visible,.calc__campo select:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.calc__campo input[type=range]{width:100%;accent-color:var(--orange);height:28px}
.calc__res{display:flex;align-items:center;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--linea);font-size:17px;line-height:1.4;font-weight:700}
.calc__num{flex:none;font-family:var(--font-display);font-weight:400;font-size:clamp(40px,6vw,54px);line-height:1;color:var(--orange)}
.calc__graf{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
.calc__curva{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.calc__meta{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:6 6}
.calc__eje{stroke:var(--linea);stroke-width:1.5}
.calc__punto{fill:var(--orange);stroke:var(--ink);stroke-width:2}
.calc__etq{font-family:var(--font-mono);font-size:13px;fill:var(--smoke)}
.calc__etq--f{fill:var(--ink);font-weight:700}
@media (max-width:560px){.calc__res{flex-direction:column;align-items:flex-start;gap:6px}}

/* Botón fijo: la compra siempre a un toque. En móvil, barra a todo el ancho;
   en escritorio, una pestaña del mismo ancho que la hoja, pegada abajo. */
.cta-fijo{display:block;position:sticky;bottom:0;z-index:50;margin-top:16px;background:var(--orange);color:var(--paper);font-family:var(--font-display);font-size:17px;text-align:center;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:var(--border)}
.b-articulo .footer{margin-top:0}
@media (min-width:861px){
  .cta-fijo{max-width:860px;margin:28px auto 0;font-size:19px;padding:16px;border:var(--border);border-bottom:0;transition:background-color 150ms var(--ease-out)}
  .cta-fijo:hover{background:var(--orange-hi)}
}

/* ── El libro «Artículos»: elegir sector ────────────────────── */
.elige{margin-top:clamp(28px,4vw,40px)}
.elige__filtro{display:block;width:100%;margin-top:10px;font:inherit;font-size:17px;padding:14px 16px;border:var(--border);background:var(--blanco);box-shadow:var(--shadow);border-radius:0;color:var(--ink)}
.elige__filtro:focus{outline:2px solid var(--orange);outline-offset:3px}
.sectores{list-style:none;padding:0;margin-top:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.sectores a,.sectores__pronto > span{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:104px;padding:16px;border:var(--border);background:var(--blanco);box-shadow:var(--shadow);transition:transform 150ms var(--ease-out),box-shadow 150ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.sectores a:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}}
.sectores a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sectores__n{font-family:var(--font-display);font-size:19px;line-height:1.15}
.sectores__c{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.sectores__pronto > span{border-style:dashed;box-shadow:none;background:transparent;color:var(--gris)}
.sectores__pronto .sectores__c{color:var(--gris)}
.elige__nada{margin-top:18px}
.elige__nada a{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}

/* ── Estantería ─────────────────────────────────────────────── */
.estanteria__cab{max-width:860px;margin:0 auto;padding:clamp(36px,7vh,72px) 20px 0}
.estanteria__cab h1{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,5.6vw,56px);line-height:1.06;color:var(--orange);margin-top:12px;max-width:16ch;text-wrap:balance}
.estanteria__intro{margin-top:16px;max-width:58ch;color:var(--smoke)}
.estanteria__intro p + p{margin-top:12px}
.estanteria__intro a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.estanteria{max-width:980px;margin:clamp(36px,6vh,60px) auto 0;padding:0 20px}
.balda{display:flex;align-items:flex-end;justify-content:center;gap:clamp(22px,5vw,64px);padding:0 clamp(8px,4vw,40px)}
/* Texturas: ruido SVG (escala sin pérdida). Gris semitransparente que aclara
   y oscurece a la vez; el alfa marca cuánto se nota. */
.estanteria{
  --grano-piel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.4 0 0 0 -.7 2.4 0 0 0 -.7 2.4 0 0 0 -.7 0 0 0 0 .09'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grano-fino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.2 0 0 0 -.6 2.2 0 0 0 -.6 2.2 0 0 0 -.6 0 0 0 0 .16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grano-papel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.2 0 0 0 -.6 2.2 0 0 0 -.6 2.2 0 0 0 -.6 0 0 0 0 .07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Volumen del lomo: luz a la izquierda, sombra en los cantos */
  --redondo:linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(255,255,255,.14) 12%,rgba(255,255,255,.05) 32%,rgba(0,0,0,0) 55%,rgba(0,0,0,.22) 85%,rgba(0,0,0,.5) 100%);
  --oro:linear-gradient(90deg,#c27a0c,#ffd36b 35%,#ffe9b0 50%,#f2a51a 70%,#c27a0c);
}
.balda__tabla{height:18px;background:linear-gradient(rgba(255,255,255,.16) 0 2px,rgba(0,0,0,0) 2px 60%,rgba(0,0,0,.35)),var(--grano-piel),var(--ink);box-shadow:0 12px 18px -6px rgba(26,20,12,.35)}
.libro,.revista{position:relative;display:block;transition:transform 180ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.libro:hover,.revista:hover{transform:translateY(-10px)}}
.libro:active,.revista:active{transform:translateY(-3px)}
.libro:focus-visible,.revista:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.libro__lomo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border:var(--border);box-shadow:var(--shadow);padding:20px 0 16px}
.libro__t{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-display);line-height:1.15;text-align:center}
/* Letras estampadas: el relleno es la lámina (oro o crema) y la sombra las hunde en la tapa */
.libro__t{-webkit-background-clip:text;background-clip:text;color:transparent}
/* El manual: piel negra, título y filetes en oro, cerrado con candado */
.libro--manual .libro__lomo{width:clamp(58px,8vw,74px);height:clamp(300px,44vw,380px);
  background:linear-gradient(#FFB300,#FFB300) 0 22px/100% 1px no-repeat,linear-gradient(#FFB300,#FFB300) 0 26px/100% 2px no-repeat,
    linear-gradient(#FFB300,#FFB300) 0 calc(100% - 22px)/100% 1px no-repeat,linear-gradient(#FFB300,#FFB300) 0 calc(100% - 26px)/100% 2px no-repeat,
    var(--redondo),var(--grano-piel),#221a14;padding:40px 0 38px}
.libro--manual .libro__t{font-size:clamp(13px,1.5vw,15px);max-height:84%;background-image:var(--oro);filter:drop-shadow(0 -1px 0 rgba(0,0,0,.9)) drop-shadow(0 1px 0 rgba(255,220,150,.18))}
.libro__candado{width:22px;height:22px;fill:#FFB300;stroke:#FFB300;stroke-width:2.2;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.9)) drop-shadow(0 1px 0 rgba(255,220,150,.25))}
.libro__candado path{fill:none}
/* La enciclopedia: tela naranja con trama, nervios en relieve y tejuelo hundido */
.libro--enciclopedia .libro__lomo{width:clamp(108px,15vw,150px);height:clamp(330px,48vw,420px);
  --nervio:linear-gradient(#e98a55,#b23b02 30%,#a33500 60%,#5a1a00);
  background:var(--nervio) 0 6%/100% 8px no-repeat,var(--nervio) 0 10%/100% 8px no-repeat,var(--nervio) 0 89%/100% 8px no-repeat,var(--nervio) 0 93%/100% 8px no-repeat,
    var(--redondo),repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,rgba(0,0,0,0) 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(255,255,255,0) 1px 3px),var(--grano-fino),var(--orange);padding:clamp(48px,6.4vw,66px) 0 clamp(46px,6vw,62px)}
.libro--enciclopedia .libro__t{font-size:clamp(26px,3.6vw,36px);writing-mode:vertical-rl;background-image:linear-gradient(180deg,#fffaf0,#efe2c6 45%,#fffdf6 60%,#e8d9ba);filter:drop-shadow(1px 1px 0 rgba(110,35,0,.6)) drop-shadow(-1px -1px 0 rgba(255,205,160,.35))}
.libro__vol{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:0 8px;line-height:1.35}
.libro--enciclopedia .libro__vol{margin:0 12px;padding:7px 6px;border-radius:2px;color:#fbf3e2;text-shadow:1px 1px 0 rgba(90,26,0,.6);background:rgba(80,24,0,.22);box-shadow:inset 0 2px 3px rgba(60,18,0,.55),0 1px 0 rgba(255,214,170,.35)}
/* Lo esencial: una revista de cara, tamaño folio, con las páginas de debajo asomando */
.revista__portada{display:flex;flex-direction:column;width:clamp(150px,22vw,230px);aspect-ratio:210/297;border:var(--border);padding:14px 14px 16px;transform:rotate(-2.5deg);transform-origin:bottom center;
  background:linear-gradient(90deg,rgba(26,20,12,.18),rgba(26,20,12,0) 7%),linear-gradient(125deg,rgba(255,255,255,.7),rgba(255,255,255,0) 35%,rgba(26,20,12,.05) 100%),var(--grano-papel),var(--paper);
  box-shadow:2px 2px 0 #efe7d6,3px 3px 0 rgba(26,20,12,.55),5px 5px 0 #efe7d6,6px 6px 0 var(--ink),10px 14px 18px -8px rgba(26,20,12,.35)}
.revista__n{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);border-top:3px solid var(--orange);padding-top:6px}
.revista__t{font-family:var(--font-display);font-size:clamp(26px,3.8vw,38px);line-height:.98;color:var(--orange);margin-top:10px}
.revista__s{margin-top:auto;font-weight:700;font-size:clamp(12px,1.4vw,14px);line-height:1.35}
.libro__nota{position:absolute;top:calc(100% + 30px);left:50%;transform:translateX(-50%);width:max-content;max-width:150px;text-align:center;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;line-height:1.4;color:var(--smoke)}
.portada + .hoja{margin-top:clamp(90px,12vh,120px)}
/* En escritorio, el texto a la izquierda y la estantería a la derecha en la
   misma pantalla; los sectores de debajo ocupan el mismo ancho. */
@media (min-width:1100px){
  .portada{--margen:clamp(24px,3vw,48px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,4vw,80px);align-items:center;max-width:1680px;margin:0 auto;padding:clamp(40px,8vh,88px) var(--margen) 0}
  .portada .estanteria__cab{max-width:none;margin:0;padding:0}
  .portada .estanteria__cab h1{max-width:22ch}
  .portada .estanteria__intro{max-width:72ch}
  .portada .estanteria{max-width:none;margin:0;padding:0 0 80px;justify-self:end}
  .portada .balda{gap:clamp(20px,2.6vw,44px);padding:0 16px}
  .portada + .hoja--atajos{max-width:calc(1680px - 2 * clamp(24px,3vw,48px));width:calc(100% - 2 * clamp(24px,3vw,48px));margin-top:clamp(40px,6vh,64px);padding:44px 52px 52px}
}
@media (max-width:560px){
  .balda{gap:18px;padding:0}
  .libro--manual .libro__lomo{height:260px;width:54px}
  .libro--enciclopedia .libro__lomo{height:330px;width:96px;padding:42px 0 40px}
  .libro--enciclopedia .libro__vol{margin:0 8px;padding:5px 4px;font-size:9px;letter-spacing:.05em}
  .libro--enciclopedia .libro__t{font-size:26px}
  .revista__portada{width:128px;padding:10px 10px 12px}
  .revista__t{font-size:24px}
  .revista__s{font-size:11.5px}
  .libro__nota{max-width:84px;font-size:10px}
}

/* Folio de las hojas fijas */
.folio{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:12px;border-top:1px solid var(--linea);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* Manual bloqueado */
.b-manual .hoja__cab h1{max-width:18ch}

@media (prefers-reduced-motion:reduce){
  .libro,.revista,.lista a,.sectores a,.sectores-chips a,.btn{transition:none}
  .menu{transition:none}
}
@media print{.nav,.menu,.footer,.cta-fijo,.borrador,.migas,.progress-bar{display:none}.hoja{box-shadow:none;margin:0;max-width:none}body{background:#fff}}

/* «Cómo lo calculamos»: la fórmula, plegada */
.b-formula{margin:24px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:12px 0}
.b-formula summary{cursor:pointer;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.b-formula[open] summary{margin-bottom:12px}
.b-formula p + p{margin-top:10px}

/* «Lo decimos claro»: en los artículos donde comparamos lo que vendemos */
.b-vendemos{margin-top:24px}
.b-vendemos a{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
