@font-face { font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/reset/archivo-black-400.woff2') format('woff2'); }
@font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/reset/anton-400.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/reset/spectral-400.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/reset/spectral-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/reset/spectral-600.woff2') format('woff2'); }
@font-face { font-family:'Caveat'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/reset/caveat-var.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap; src:url('../fonts/reset/jetbrains-mono-var.woff2') format('woff2'); }

:root{
  --papel:#efe8db;
  --papel-2:#e6ddca;
  --papel-tarjeta:#f7f0dd;
  --tinta:#141210;
  --grafito:#3a342c;
  /* El gris de texto secundario. Está oscurecido a propósito: el anterior
     (#7a7166) daba 3,93:1 sobre el papel, por debajo del mínimo AA de 4,5:1, y
     se usaba en 39 sitios (rótulos de la ficha, navegación, entradillas). Este
     llega a 5,29:1 sobre --papel, 5,67:1 sobre --papel-tarjeta y 4,78:1 sobre
     --papel-2, que es el fondo más oscuro donde se apoya. Lo comprueba
     tests/test_contraste.php sobre los tres. */
  --gris:#665d54;
  --filete:#cdc3b0;
  --lapiz:#4d5a72;

  /* las cuatro tintas, una por sello */
  --ultramar:#1a2ec9;
  --bermellon:#e3351f;
  --negra:#0a0a0a;
  --acida:#f0d920;
  --asimov:var(--ultramar);
  --verne:var(--bermellon);
  --caja:var(--negra);
  --alicanto:var(--acida);
  /* variantes estampadas sobre papel (legibilidad).
     NO son un capricho: son las que llegan a 4,5:1 sobre --papel y
     --papel-tarjeta, que es el mínimo de WCAG AA para texto normal, y son las
     que deben usarse SIEMPRE que el color del sello pinte LETRAS. Las
     brillantes (--acida sobre todo, 1,18:1) son sólo para relleno y filete.
     Los valores están duplicados en config/sellos.php ['color_texto'] porque el
     CSS no puede leer PHP; tests/test_contraste.php comprueba que no se separen
     y que todos pasen el mínimo. */
  --asimov-t:var(--ultramar);
  --verne-t:#b02a17;
  --caja-t:var(--tinta);
  --alicanto-t:#7a6600;
  --tesla-t:#6f5718;

  /* El verde de los estados cumplidos: «pagado», «entregado», «activo». Nació en
     la mesa de trabajo (admin/mesa/style.css) y ahora vive aquí, porque el panel
     también lo usa y un color de estado no puede tener dos dueños. Es oscuro a
     propósito: un verde brillante como letra sobre papel no se lee. */
  --verde-pagado:#1f6b2e;

  --tinta-activa:var(--tinta);
  --tinta-texto:var(--tinta);

  /* mascaras del logo (inyectadas) */
  --m-iso:url('../img/marca/reset-isotipo.png');
  --m-lock:url('../img/marca/reset-lockup-h.png');

  --display:'Archivo Black',Impact,sans-serif;
  --sec:'Anton',Impact,sans-serif;
  --body:'Spectral',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --mano:'Caveat',cursive;

  /* 6.75rem y no 5.5rem: al subir las etiquetas de la regla al piso tipográfico
     de 13px dejaron de caber. Medían 96px en una regla de 88px y se salían 4px
     por CADA lado, a cualquier tamaño de letra. Como la regla y sus etiquetas
     están las dos en rem, el cociente se mantiene: si cabe a 16px, cabe a 32px. */
  --regla:6.75rem;
  --cmyk:1.125rem;

  --sombra-dura:
    0 0.0625rem 0 rgba(20,18,16,.15),
    0.0625rem 0.125rem 0 rgba(20,18,16,.40),
    0.1875rem 0.3125rem 0 rgba(20,18,16,.25),
    0 1.5rem 2.5rem -1.25rem rgba(20,18,16,.35);
}
body[data-sello="asimov"]  { --tinta-activa:var(--asimov);  --tinta-texto:var(--asimov-t); }
body[data-sello="verne"]   { --tinta-activa:var(--verne);   --tinta-texto:var(--verne-t); }
body[data-sello="caja"]    { --tinta-activa:var(--caja);    --tinta-texto:var(--caja-t); }
body[data-sello="alicanto"]{ --tinta-activa:var(--alicanto);--tinta-texto:var(--alicanto-t); }
body[data-sello="neutro"]  { --tinta-activa:var(--tinta);   --tinta-texto:var(--tinta); }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--papel); color:var(--tinta); font-family:var(--body); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-left:var(--regla); padding-bottom:var(--cmyk); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--tinta); color:var(--papel-tarjeta); }

/* ============ TEXTURAS ============ */
.grano{ position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:20rem 20rem; }
.humedad{ position:fixed; inset:0; z-index:9985; pointer-events:none;
  background:
    radial-gradient(26.25rem 20rem at 12% 18%, rgba(139,111,71,.14), transparent 70%),
    radial-gradient(35rem 26.25rem at 88% 62%, rgba(20,18,16,.07), transparent 72%),
    radial-gradient(23.75rem 18.75rem at 62% 92%, rgba(77,90,114,.08), transparent 70%); }
.mancha-cafe{ width:8.25rem; height:8.25rem; border-radius:50%; border:0.125rem solid rgba(107,74,42,.28); background:radial-gradient(circle at 42% 38%, rgba(107,74,42,.10), transparent 68%); position:absolute; z-index:2; pointer-events:none; }
.mancha-cafe::after{ content:""; position:absolute; inset:0.625rem; border-radius:50%; border:0.0625rem solid rgba(107,74,42,.18); }
.cinta{ position:absolute; width:6rem; height:1.625rem; opacity:.85; background:linear-gradient(180deg, rgba(255,252,242,.75), rgba(233,224,205,.55)); border-left:0.0625rem solid rgba(20,18,16,.12); border-right:0.0625rem solid rgba(20,18,16,.12); transform:rotate(-4deg); box-shadow:0 0.0625rem 0.125rem rgba(20,18,16,.12); z-index:4; }
.marca{ position:absolute; width:1.375rem; height:1.375rem; opacity:.55; z-index:3; pointer-events:none; }
.marca::before{ content:""; position:absolute; inset:0; background:
    linear-gradient(var(--tinta),var(--tinta)) center/0.0625rem 100% no-repeat,
    linear-gradient(var(--tinta),var(--tinta)) center/100% 0.0625rem no-repeat; }
.marca::after{ content:""; position:absolute; inset:0.25rem; border:0.0625rem solid var(--tinta); border-radius:50%; }

/* ============ REGLA DE IMPRENTA ============ */
.mesa{ position:relative; }
.regla{ position:fixed; top:0; left:0; bottom:var(--cmyk); width:var(--regla); z-index:9700; border-right:0.0625rem solid var(--tinta); background:linear-gradient(90deg, var(--papel) 0%, var(--papel-2) 55%, var(--filete) 100%); display:flex; flex-direction:column; align-items:center; padding:1rem 0 0.875rem; }
.regla::before{ content:""; position:absolute; top:0; bottom:0; right:0; width:0.875rem; background-image:
    repeating-linear-gradient(to bottom, var(--gris) 0 0.0625rem, transparent 0.0625rem 3.125rem),
    repeating-linear-gradient(to bottom, var(--filete) 0 0.0625rem, transparent 0.0625rem 0.625rem);
  background-size:0.875rem 100%, 0.375rem 100%; background-position:right top, right top; background-repeat:repeat-y, repeat-y; opacity:.9; }
.regla .regla-marca{ display:block; width:2.125rem; height:2.125rem; margin:0 auto 0.4375rem; background-color:var(--tinta-activa); transition:background-color .3s;
  -webkit-mask:var(--m-iso) center/contain no-repeat; mask:var(--m-iso) center/contain no-repeat; }
/* La marca de agua «Reset · mesa de trabajo».
   Iba en --lapiz con opacity:.82 y, al 82% sobre el degradado de la barra, se
   quedaba en 2,99:1–4,08:1. Es texto de 16px y peso 400, así que no cuenta como
   «grande» y necesita 4,5:1. En --grafito a opacidad llena da 10,29:1 sobre el
   papel, 9,42:1 sobre --papel-2 y 7,28:1 sobre el filete: pasa en las tres
   paradas del degradado, que es lo que antes fallaba en la más oscura. */
.regla .regla-cabeza{ font-family:var(--mano); font-size:1rem; line-height:1.1; color:var(--grafito); opacity:1; text-align:center; max-width:4.625rem; transform:rotate(-2deg); margin-bottom:auto; padding:0 0.375rem; }
.regla nav{ display:flex; flex-direction:column; gap:1.625rem; margin:auto 0; }
.regla nav a{ display:flex; flex-direction:column; align-items:center; gap:0.1875rem; font-family:var(--mono); text-transform:uppercase; color:var(--gris); transition:color .2s; position:relative; padding:0.125rem 0; }
.regla nav a .folio{ font-size:0.8125rem; letter-spacing:.06em; }
.regla nav a .nombre{ font-size:0.8125rem; letter-spacing:.14em; }
.regla nav a::after{ content:""; position:absolute; top:50%; left:-1.0625rem; width:0.75rem; height:0.125rem; background:var(--tinta-activa); transform:translateY(-50%) scaleX(0); transform-origin:left; transition:transform .25s,background .3s; }
.regla nav a.activo{ color:var(--tinta); }
.regla nav a.activo .folio{ color:var(--tinta-texto,var(--tinta)); }
.regla nav a.activo::after{ transform:translateY(-50%) scaleX(1); }
.regla .regla-pie{ margin-top:auto; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); white-space:nowrap; writing-mode:vertical-rl; transform:rotate(180deg); }

/* ============ BARRA CMYK ============ */
.cmyk{ position:fixed; left:var(--regla); right:0; bottom:0; height:var(--cmyk); z-index:9800; display:flex; align-items:stretch; border-top:0.0625rem solid var(--tinta); background:var(--papel-2); }
.cmyk .cmyk-label{ width:3.75rem; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.22em; color:var(--gris); border-right:0.0625rem solid var(--filete); }
.cmyk .tiras{ flex:1; display:flex; }
.cmyk .tiras i{ flex:1; }
.s-c{ background:#00a0d8; } .s-m{ background:#e5007e; } .s-y{ background:#ffed00; } .s-k{ background:#141210; } .s-g{ background:#a8a8a8; }

/* ============ SELLO DE GOMA ============ */
/* El color del sello es la tinta BRILLANTE, y aquí sólo puede pintar relleno y
   filete. Las letras heredan --sello-tinta (la variante legible): el rótulo usaba
   el brillante y con el bermellón quedaba en 2,73:1 y con el amarillo de Alicanto
   en 1,18:1, es decir invisible. */
.sello{ display:inline-flex; flex-direction:column; align-items:center; gap:0.5625rem; position:relative; z-index:5; transform:rotate(var(--sello-rot,0deg)); color:var(--sello-tinta, var(--tinta)); }
.sello-marca{ display:block; width:2.875rem; height:2.875rem; position:relative; background-color:var(--sello-color, var(--tinta));
  -webkit-mask:var(--m-iso) center/contain no-repeat; mask:var(--m-iso) center/contain no-repeat; }
.sello--doble .sello-marca::after{ content:""; position:absolute; inset:0; background-color:var(--sello-color, var(--tinta));
  -webkit-mask:var(--m-iso) center/contain no-repeat; mask:var(--m-iso) center/contain no-repeat; transform:translate(0.1875rem,0.125rem); opacity:.5; }
.sello--alta{ opacity:1; }
.sello--media{ opacity:.92; }
.sello--baja{ opacity:.5; filter:blur(0.0281rem); }
.sello .sello-sub{ display:block; text-align:center; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.22em; color:var(--sello-tinta, var(--gris)); opacity:1; }
.sello--gigante{ gap:1rem; }
.sello--gigante .sello-marca{ width:18.75rem; height:auto; aspect-ratio:380/139;
  -webkit-mask:var(--m-lock) center/contain no-repeat; mask:var(--m-lock) center/contain no-repeat; }
.sello--gigante.sello--doble .sello-marca::after{
  -webkit-mask:var(--m-lock) center/contain no-repeat; mask:var(--m-lock) center/contain no-repeat; }
.sello--gigante .sello-sub{ font-size:0.8125rem; letter-spacing:.28em; }

/* ============ PIEZAS COMPARTIDAS ============ */
.cubierta{ display:block; position:relative; transform:rotate(var(--rot,0deg)); transition:transform .28s cubic-bezier(.2,.7,.3,1); }
.cubierta img{ width:100%; box-shadow:var(--sombra-dura); transition:box-shadow .28s; }
.cubierta:hover{ transform:rotate(0deg) translateY(-0.375rem); }
.cubierta:hover img{ box-shadow:0 0.0625rem 0 rgba(20,18,16,.15), 0.3125rem 0.5rem 0 var(--tinta-activa), 0 1.875rem 3.125rem -1.25rem rgba(20,18,16,.42); }
/* La cinta que sujeta la portada. Va centrada arriba por defecto, así que sirve
   igual en el destacado de la portada y en la ficha del libro; el destacado sólo
   precisa el ajuste de .z-novedad. */
.cubierta .cinta{ top:-0.75rem; left:50%; margin-left:-3rem; }
/* TEXTO META: lo que simula las anotaciones de la mesa de trabajo —el tiraje, la
   tinta, «aprobado / pase a máquina»— frente al texto que le habla al lector. Va
   en la tipografía de corrección de pruebas (Caveat).
   La opacidad va al 100%: al 80% la tinta de lápiz daba 3,75:1 sobre papel, por
   debajo del mínimo AA, y este texto informa y ahora es visible para todos (antes
   parte iba con aria-hidden, que era peor). A opacidad llena queda en 5,71:1. */
.lapiz{ font-family:var(--mano); font-size:1.25rem; line-height:1.24; color:var(--lapiz); opacity:1; transform:rotate(var(--rot,0deg)); z-index:4; }
/* El folio de zona: «Zona 03 · Novedad» y su número. El número iba en la tinta
   BRILLANTE del sello, que como letra sobre papel da 3,59:1 con el bermellón;
   ahora usa la variante legible, igual que el rótulo del sello. Va después de la
   declaración general para ganarle. */
.folio-zona{ position:absolute; top:1.625rem; left:2.125rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.22em; color:var(--gris); z-index:6; }
.folio-zona b{ color:var(--tinta-texto,var(--tinta)); font-weight:400; }
/* El folio de zona: «Zona 03 · Novedad» y su número. El número iba en la tinta
   BRILLANTE del sello, que como letra sobre papel da 3,59:1 con el bermellón;
   ahora usa la variante legible, igual que el rótulo del sello. Va después de la
   declaración general para ganarle. */
.tarjeta{ background:var(--papel-tarjeta); border:0.0625rem solid var(--filete); border-top:0.25rem solid var(--tinta-activa); box-shadow:var(--sombra-dura); padding:1.625rem 1.5rem; }
.chip{ display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; border:0.0625rem solid var(--filete); padding:0.3125rem 0.625rem; color:var(--grafito); }
.chip i{ width:0.5625rem; height:0.5625rem; background:var(--c,var(--tinta)); display:inline-block; }
.sello-tag{ display:inline-flex; align-items:center; gap:0.4375rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); }
.sello-tag i{ width:0.5625rem; height:0.5625rem; background:var(--c); display:inline-block; }
.huincha{ display:flex; align-items:center; justify-content:center; background:var(--c,var(--tinta)); color:var(--c-txt,var(--papel-tarjeta)); font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; padding:0.4375rem 0.625rem; margin-top:0.625rem; box-shadow:0.125rem 0.1875rem 0 rgba(20,18,16,.18); }

/* duotono: la cubierta se prueba en la tinta de su sello */
.duotono{ position:relative; display:block; overflow:hidden; isolation:isolate; }
.duotono img{ display:block; width:100%; filter:grayscale(1) contrast(1.3) brightness(1.02); }
.duotono::after{ content:""; position:absolute; inset:0; z-index:2; background:var(--ink); mix-blend-mode:multiply; pointer-events:none; }

.zona{ position:relative; overflow:hidden; }

/* ============ ZONA 01 · NOVEDAD (tinta = sello del libro destacado) ============ */
.z-novedad{ min-height:120vh; padding:8.125rem 3.75rem 6.875rem; }
.z-novedad .agua{ position:absolute; left:1%; bottom:2%; z-index:0; font-family:var(--display); text-transform:uppercase; font-size:clamp(3.75rem,12vw,7.5rem); line-height:.8; letter-spacing:-.02em; color:var(--tinta-activa); opacity:.1; pointer-events:none; user-select:none; }
.z-novedad .sello{ position:absolute; top:3.625rem; right:3.5rem; }
.z-novedad .cubierta{ position:absolute; left:5%; top:24%; width:27%; z-index:3; }
.z-novedad .cinta{ top:-0.75rem; left:50%; margin-left:-3rem; }
.z-novedad .ficha{ position:absolute; left:41%; top:22%; width:30%; transform:rotate(1.4deg); z-index:3; }
/* La ficha del libro: la MISMA pieza en la portada (destacado) y en la ficha.
   Antes estas reglas vivían bajo «.z-novedad .ficha» y el destacado se quedaba
   con el diseño bueno mientras la ficha usaba .book-info, otro juego de clases
   para lo mismo. Ahora el aspecto es uno y el destacado sólo añade dónde va. */
.ficha .ficha-cod{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.18em; color:var(--acc-texto,var(--tinta-texto,var(--tinta))); margin-bottom:0.625rem; }
.ficha .ficha-tit{ font-family:var(--display); font-size:2.125rem; line-height:.98; text-transform:uppercase; margin-bottom:0.375rem; }
/* El destacado vive en una tarjeta estrecha y un título de dos palabras partía la
   segunda en una línea huérfana («SALITRE NEGRO» + «I»). text-wrap:balance reparte
   las líneas por sí solo; un tope en ch lo empeoraba (forzaba tres líneas), así que
   no se pone. */
.ficha .ficha-tit{ text-wrap:balance; }
.ficha .ficha-aut{ font-family:var(--body); font-style:italic; font-size:1.125rem; color:var(--grafito); margin-bottom:1rem; }
.ficha dl{ display:grid; grid-template-columns:auto 1fr; gap:0.3125rem 1rem; border-top:0.0625rem solid var(--filete); padding-top:0.875rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.04em; }
.ficha dt{ color:var(--gris); text-transform:uppercase; font-size:0.8125rem; letter-spacing:.14em; align-self:center; }
.ficha dd{ color:var(--tinta-texto,var(--tinta)); }
.ficha .ficha-nota{ margin-top:1rem; padding-top:0.875rem; border-top:0.0625rem solid var(--filete); font-family:var(--body); font-size:0.9375rem; line-height:1.55; color:var(--grafito); }
.ficha .chip{ margin-bottom:0.875rem; }
.z-novedad .lapiz-1{ position:absolute; left:6%; bottom:16%; --rot:-2deg; }
.z-novedad .lapiz-2{ position:absolute; left:44%; bottom:9%; --rot:1.4deg; }
.z-novedad .lapiz-3{ position:absolute; right:6%; top:22%; --rot:-1.6deg; text-align:right; }
.z-novedad .mc-1{ right:7%; bottom:7%; }

/* ============ ZONA 02 · PACKS (los combos del catálogo) ============
   REARMADA. Antes cada pack era una tarjeta vertical que ocupaba toda la
   columna: 515 × 1070 px, con la cubierta a 479 × 733 — más alta que la
   pantalla —, y la zona entera medía 2,2 pantallas. Como las cubiertas de los
   packs son composiciones de todos sus libros (651 × 1011), a todo el ancho se
   comían la tarjeta. Ahora el pack es una tarjeta HORIZONTAL: la cubierta a un
   lado con ancho fijo, los datos al otro, y el bloque con un tope real de
   ancho. Así la altura la manda el texto y no la imagen. */
/* Más aire arriba: el emblema del sello vive a 3.25rem del borde y con el padding
   anterior el titular le caía encima. */
.z-packs{ min-height:auto; padding:8.75rem 3.75rem 6.5rem; }
.z-packs .agua{ position:absolute; right:2%; top:3%; z-index:0; font-family:var(--display); text-transform:uppercase; font-size:clamp(3.75rem,11vw,7.5rem); line-height:.8; color:var(--tinta); opacity:.16; pointer-events:none; user-select:none; }
.z-packs .sello{ position:absolute; top:3.25rem; left:3.625rem; }
.z-packs .cab{ position:relative; z-index:2; }
.z-packs .megatit{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.5rem,5vw,5.375rem); line-height:.86; letter-spacing:-.01em; }
.z-packs .sub{ font-family:var(--body); font-style:italic; font-size:1.0625rem; color:var(--grafito); max-width:54ch; margin:1rem 0 2.75rem; position:relative; z-index:2; }
/* El subtítulo META: habla de la mesa (el tiraje, la tinta del sello), no del
   libro al lector. Por eso lleva la tipografía de corrección de pruebas y no la
   del texto de venta. */
.z-packs .sub--meta{ font-family:var(--mano); font-style:normal; font-size:1.375rem; line-height:1.25; color:var(--lapiz); }

.pack-bloque{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem; align-items:start; position:relative; z-index:2; max-width:66rem; }

.pack{
  position:relative; background:var(--papel-tarjeta);
  border:0.0625rem solid var(--filete); border-top:0.25rem solid var(--c,var(--tinta));
  padding:1.125rem; box-shadow:var(--sombra-dura);
  transform:rotate(var(--rot,0deg));
  display:grid; grid-template-columns:minmax(0,12.5rem) minmax(0,1fr); gap:1.25rem; align-items:start;
}
.pack-cub{ background:var(--tinta); box-shadow:var(--sombra-dura); }
/* La cubierta del pack es una composición vertical: se le da una proporción fija
   y se recorta, en vez de dejarla crecer a lo alto sin freno. */
.pack-cub img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; display:block; }
.pack-vineta{ min-width:0; display:flex; flex-direction:column; }
/* El distintivo va en claro sobre oscuro: la tinta del sello como fondo con letra
   de papel daba 2,76:1 (el ultramar de Asimov es oscuro). Así queda en 6,5:1. */
.pack-badge{ display:inline-block; align-self:flex-start; background:var(--papel-2); color:var(--tinta); border-left:0.1875rem solid var(--c,var(--tinta)); font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; padding:0.25rem 0.5rem; margin-bottom:0.625rem; }
.pack-badge--rec{ background:var(--tinta); color:var(--papel-tarjeta); }
.pack-tit{ font-family:var(--display); font-size:clamp(1.375rem,1.9vw,1.75rem); line-height:1.02; text-transform:uppercase; margin:0 0 0.5rem; }
.pack-inc{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.05em; color:var(--grafito); line-height:1.6; text-transform:uppercase; margin-bottom:0.75rem; }
.pack-precio{ margin:auto 0 0; font-family:var(--display); font-size:clamp(1.375rem,2vw,1.75rem); display:flex; align-items:baseline; flex-wrap:wrap; gap:0.5rem; }
.pack-precio s{ font-family:var(--mono); font-size:0.8125rem; color:var(--gris); }
.pack-ahorro{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; background:var(--papel-2); color:var(--tinta); padding:0.1875rem 0.4375rem; }
.pack-btn{ display:block; margin-top:0.875rem; text-align:center; background:var(--tinta); color:var(--papel-tarjeta); font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; padding:0.75rem; }
.pack-btn:hover{ background:var(--c,var(--tinta)); color:var(--tinta); }

/* En una columna la tarjeta vuelve a ser vertical: la cubierta arriba, a un ancho
   contenido, y los datos debajo. Esta media query va en una sola línea y sin una
   «}» al principio de línea dentro, porque tests/test_maqueta.php localiza el
   primer bloque @media (max-width:60em) con un regex no codicioso y una llave
   suelta en su interior lo truncaría. */
@media (max-width:60em){ .pack-bloque{ grid-template-columns:1fr; max-width:none; } .pack{ grid-template-columns:1fr; } .pack-cub img{ aspect-ratio:16/10; } }
/* ============ ZONA 03 · SELLOS (el catálogo, en dos columnas por sello) ============ */
.z-sellos{ display:grid; grid-template-columns:1fr 1fr; position:relative; }
.panel{ position:relative; overflow:hidden; padding:6.25rem 3.25rem 5.25rem; min-height:100vh; display:flex; flex-direction:column; }
.panel.s-asimov  { background:var(--asimov); color:var(--papel); --trazo:var(--papel); --c:var(--asimov); --acento:var(--acida); }
.panel.s-verne   { background:var(--verne);  color:var(--papel); --trazo:var(--papel); --c:var(--verne); --acento:var(--acida); }
.panel.s-caja    { background:var(--tinta);  color:var(--papel); --trazo:var(--papel); --c:var(--tinta); --acento:var(--acida); }
.panel.s-alicanto{ background:var(--acida);  color:var(--tinta); --trazo:var(--tinta); --c:#9c8300; --acento:var(--bermellon); }
.panel{ --sello-color:var(--trazo); }
.panel .lavado{ position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:20rem 20rem; }
.panel .sello{ position:absolute; top:2.75rem; right:2.75rem; }
.panel .folio-zona{ top:1.625rem; left:2.125rem; color:var(--trazo); opacity:.8; }
.panel .folio-zona b{ color:var(--trazo); }
.panel .marca::before{ background:
    linear-gradient(var(--trazo),var(--trazo)) center/0.0625rem 100% no-repeat,
    linear-gradient(var(--trazo),var(--trazo)) center/100% 0.0625rem no-repeat; }
.panel .marca::after{ border-color:var(--trazo); }
.panel .kicker{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.22em; text-transform:uppercase; color:var(--trazo); opacity:.75; margin-bottom:0.625rem; position:relative; z-index:2; }
.panel .mega-panel{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.75rem,5vw,6rem); line-height:.88; letter-spacing:-.01em; color:var(--trazo); position:relative; z-index:2; min-height:2.7em; }
.panel .mega-panel em{ font-style:normal; color:var(--acento,var(--trazo)); text-shadow:0.1875rem 0 0 rgba(10,10,10,.22); }
.panel.s-serif .mega-panel{ font-family:var(--body); font-style:italic; font-weight:600; text-transform:none; letter-spacing:-.02em; line-height:.94; font-size:clamp(2.5rem,4.4vw,5.375rem); min-height:2.9em; }
.panel.s-serif .mega-panel em{ font-style:italic; color:var(--acento,var(--trazo)); text-shadow:none; }
.panel .intro{ position:relative; z-index:2; font-size:1rem; line-height:1.6; max-width:34ch; margin:1.125rem 0 1.875rem; color:var(--trazo); opacity:.85; }
.panel .tira-libros{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(auto-fill, minmax(13.75rem,1fr)); gap:1.25rem; align-items:start; margin-top:0.625rem; }
.ficha-libro{ display:block; width:100%; max-width:18.75rem; background:var(--papel-tarjeta); padding:0.625rem 0.625rem 0.8125rem; transform:rotate(var(--rot,0deg)); box-shadow:0.3125rem 0.4375rem 0 rgba(0,0,0,.32); transition:transform .28s, box-shadow .28s; color:var(--tinta); }
.panel.s-alicanto .ficha-libro{ box-shadow:0.3125rem 0.4375rem 0 rgba(20,18,16,.3); }
.ficha-libro:hover{ transform:rotate(0deg) translateY(-0.25rem); box-shadow:0.3125rem 0.4375rem 0 var(--c); }
.ficha-libro .fl-img{ overflow:hidden; margin-bottom:0.5625rem; }
.ficha-libro img{ width:100%; display:block; }
.ficha-libro .fl-cod{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c,var(--tinta)); }
.ficha-libro .fl-tit{ font-family:var(--display); font-size:1.1875rem; line-height:1.02; text-transform:uppercase; margin:0.25rem 0 0.1875rem; }
.ficha-libro .fl-aut{ font-family:var(--body); font-style:italic; font-size:0.8438rem; color:var(--grafito); }
.ficha-libro .fl-linea{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); border-top:0.0625rem solid var(--filete); padding-top:0.375rem; margin-top:0.375rem; }
.panel .lapiz{ position:relative; z-index:2; margin-top:1.375rem; color:var(--trazo); opacity:.72; }
/* ============ ZONA 04 · CATÁLOGO (neutra; la tinta es filete y dato) ============ */
.z-catalogo{ min-height:130vh; padding:8.125rem 3.75rem 7.5rem; }
.z-catalogo .agua{ position:absolute; left:1%; top:2%; z-index:0; font-family:var(--display); text-transform:uppercase; font-size:clamp(3.75rem,11vw,7.5rem); line-height:.8; color:var(--tinta); opacity:.09; pointer-events:none; user-select:none; }
.z-catalogo .sello{ position:absolute; top:3.375rem; right:3.5rem; }
.z-catalogo .cab{ position:relative; z-index:2; margin-bottom:1.625rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1.875rem; }
.z-catalogo .megatit{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.75rem,5vw,5.375rem); line-height:.86; letter-spacing:-.01em; }
.z-catalogo .megatit em{ font-style:normal; color:var(--tinta); }
.z-catalogo .sub{ font-family:var(--body); font-style:italic; font-size:1.0625rem; color:var(--grafito); max-width:44ch; margin-bottom:1.875rem; position:relative; z-index:2; }
.z-catalogo .leyenda{ display:flex; flex-wrap:wrap; gap:0.75rem 1.375rem; margin-bottom:2.75rem; position:relative; z-index:2; }
.rejilla{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem 1.75rem; position:relative; z-index:2; }
.tarjeta-cat{ display:block; background:var(--papel-tarjeta); border:0.0625rem solid var(--filete); border-top:0.25rem solid var(--c,var(--tinta)); padding:0.75rem 0.75rem 1rem; transform:rotate(var(--rot,0deg)); box-shadow:0.125rem 0.1875rem 0 rgba(20,18,16,.18), 0 1.125rem 1.875rem -1.375rem rgba(20,18,16,.5); transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s; }
.tarjeta-cat:hover{ transform:rotate(0deg) translateY(-0.25rem); box-shadow:0.125rem 0.1875rem 0 var(--c,var(--tinta)), 0 1.5rem 2.125rem -1.25rem rgba(20,18,16,.5); z-index:5; }
.tarjeta-cat .tc-img{ overflow:hidden; margin-bottom:0.75rem; }
.tarjeta-cat .tc-img img{ width:100%; }
.tarjeta-cat .tc-meta{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); border-bottom:0.0625rem solid var(--filete); padding-bottom:0.5rem; margin-bottom:0.625rem; }
.tarjeta-cat .tc-meta b{ color:var(--c,var(--tinta)); font-weight:400; font-size:0.8125rem; }
.tarjeta-cat .tc-tit{ font-family:var(--display); font-size:1.1875rem; line-height:1.02; text-transform:uppercase; margin-bottom:0.375rem; }
.tarjeta-cat .tc-aut{ font-family:var(--body); font-style:italic; font-size:0.875rem; color:var(--grafito); margin-bottom:0.25rem; }
.tarjeta-cat .tc-lema{ font-family:var(--body); font-size:0.8125rem; color:var(--gris); line-height:1.4; margin-bottom:0.5rem; }
.tarjeta-cat .sello-tag{ border-top:0.0625rem solid var(--filete); padding-top:0.5rem; margin-top:0.125rem; color:var(--grafito); }

/* ============ ZONA 05 · COLOFÓN + CARTA DE TINTAS ============ */
.z-colofon{ min-height:100vh; padding:8.125rem 3.75rem 3.75rem; }
.z-colofon .agua{ position:absolute; right:1%; bottom:6%; z-index:0; font-family:var(--display); text-transform:uppercase; font-size:clamp(3.75rem,12vw,7.5rem); line-height:.8; color:var(--tinta); opacity:.1; pointer-events:none; user-select:none; }
.z-colofon .sello{ position:relative; margin-bottom:2.5rem; }
.z-colofon .grid-colofon{ display:grid; grid-template-columns:1.7fr 1fr; gap:2.75rem; position:relative; z-index:2; align-items:start; }
/* Un ítem de rejilla no baja de su ancho de contenido (min-width:auto por defecto),
   así que si dentro hay algo que no puede encogerse —aquí el correo del colofón,
   que es una palabra larguísima sin espacios— la tarjeta se sale de la rejilla y
   desborda la pantalla. Es exactamente lo que pasaba en un móvil de 390 px: la
   rejilla medía 267 px y la tarjeta 361. Con min-width:0 el ítem sí puede encoger,
   y el texto largo se parte con overflow-wrap. */
.z-colofon .grid-colofon > *{ min-width:0; }
.z-colofon .colofon-tarjeta dl{ overflow-wrap:anywhere; }
.z-colofon .colofon-tarjeta .ct-tit{ font-family:var(--display); font-size:1.625rem; text-transform:uppercase; margin-bottom:1.125rem; }
.z-colofon .colofon-tarjeta p{ font-size:0.9688rem; line-height:1.7; color:var(--grafito); margin-bottom:1rem; max-width:52ch; }
.z-colofon .colofon-tarjeta dl{ display:grid; grid-template-columns:auto 1fr; gap:0.375rem 1.125rem; border-top:0.0625rem solid var(--filete); padding-top:1rem; margin-top:1.25rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.04em; }
.z-colofon .colofon-tarjeta dt{ color:var(--gris); text-transform:uppercase; font-size:0.8125rem; letter-spacing:.14em; }
.z-colofon .contacto-tarjeta .ct-tit{ font-family:var(--display); font-size:1.25rem; text-transform:uppercase; margin-bottom:0.875rem; }
.z-colofon .contacto-tarjeta p{ font-size:0.9375rem; line-height:1.65; color:var(--grafito); }
.z-colofon .contacto-tarjeta a{ color:var(--tinta); border-bottom:0.125rem solid var(--tinta); transition:color .15s, border-color .15s; }
.z-colofon .contacto-tarjeta a:hover{ color:var(--lapiz); border-color:var(--lapiz); }
.carta{ margin-top:2.875rem; background:var(--papel-tarjeta); border:0.0625rem solid var(--filete); border-top:0.25rem solid var(--tinta); padding:1.625rem 1.75rem; max-width:53.75rem; position:relative; z-index:2; transform:rotate(-.5deg); box-shadow:var(--sombra-dura); }
.carta h3{ font-family:var(--display); font-size:1.375rem; text-transform:uppercase; margin-bottom:0.5rem; }
.carta p{ font-size:0.9063rem; color:var(--grafito); max-width:64ch; margin-bottom:1.125rem; }
.carta .carta-pie{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); border-top:0.0625rem solid var(--filete); padding-top:0.75rem; margin-top:1rem; margin-bottom:0; }
.carta ul{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:0.625rem 1.625rem; }
.carta li{ display:flex; align-items:center; gap:0.75rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.08em; text-transform:uppercase; border-top:0.0625rem solid var(--filete); padding-top:0.5625rem; }
.carta li .sw{ width:1.375rem; height:1.375rem; flex:0 0 1.375rem; display:inline-block; box-shadow:0.125rem 0.125rem 0 rgba(20,18,16,.22); }
.carta li b{ font-weight:400; min-width:6.5rem; }
.carta li .hex{ color:var(--gris); }
.z-colofon .legal{ display:flex; justify-content:space-between; gap:1.5rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); border-top:0.0625rem solid var(--tinta); margin-top:3.75rem; padding-top:1.125rem; position:relative; z-index:2; }
.z-colofon .legal b{ color:var(--tinta); font-weight:400; }
.z-colofon .mc-2{ right:12%; bottom:20%; }

/* ============ RESPONSIVE ============ */
@media (max-width:60em){
  /* La regla se acota con min(): con unidades relativas, un usuario que suba la
     letra al 200% en un móvil de 360px se encontraría con una regla de 128px,
     o sea un 36% de la pantalla comido por el chrome. min() la deja crecer con
     su preferencia pero nunca más allá del 18% del ancho. */
  :root{ --regla:min(4rem,18vw); }
  .regla .regla-cabeza{ font-size:0.8125rem; max-width:3.375rem; }
  .regla nav{ gap:1.25rem; }
  .regla nav a .nombre{ display:none; }
  .regla nav a .folio{ font-size:0.8125rem; }
  .regla .regla-pie{ display:none; }
  /* Los enlaces extra (Manifiesto, Contacto, FAQ) se ocultan en móvil: el
     colofón ya los repite, y a 13px miden ~96px dentro de una regla de 64, así
     que se salían por el borde IZQUIERDO de la pantalla. Se veía «NIFIESTO» en
     vez de «MANIFIESTO». Ninguna regla los ocultaba: la media query solo
     escondía .nombre y .regla-pie. */
  .regla .regla-enlaces{ display:none; }
  /* En las páginas de navegación (.regla--paginas) el menú ES la navegación de
     la regla, así que no se oculta: se pone DE CANTO, como el lomo «MMXXVI ·
     SANTIAGO DE CHILE» que el diseño ya usa. Así cabe en 64px y sigue siendo
     legible y pulsable. Ocultarlo dejaba enlaces invisibles. */
  .regla--paginas nav a .nombre{ display:block; writing-mode:vertical-rl; }
  .regla--paginas nav{ gap:0.875rem; }
  /* El lomo vertical no necesita 96px de ancho: se le da aire al contenido. */
  .regla--paginas{ padding-left:0.25rem; padding-right:0.25rem; }

  .zona{ min-height:auto; }
  .z-novedad, .z-vitrina, .z-catalogo, .z-colofon{ padding:5.75rem 1.375rem 4.5rem; }
  .z-sellos .banda{ padding:5.25rem 1.375rem 4.375rem; }
  .marca, .mancha-cafe{ display:none; }
  .z-novedad .agua, .z-vitrina .agua, .z-catalogo .agua, .z-colofon .agua{ display:none; }

  .z-novedad .sello, .z-vitrina .sello, .z-catalogo .sello{ position:static; margin-bottom:1.625rem; }
  .z-novedad .cubierta{ position:static; width:66%; margin:0 auto 1.625rem; transform:rotate(-2deg); }
  .z-novedad .ficha{ position:static; width:100%; transform:none; }
  .z-novedad .lapiz-1, .z-novedad .lapiz-2, .z-novedad .lapiz-3{ position:static; text-align:left; margin-top:1.125rem; }

  .z-vitrina .pieza{ position:static; width:100% !important; margin-bottom:2.375rem; }
  .z-vitrina .pieza .cubierta{ transform:none; }
  .z-vitrina .pieza-cat .cubierta{ position:static; width:100%; margin-bottom:0.875rem; }
  .z-vitrina .lomo{ display:none; }

  .z-sellos .banda{ grid-template-columns:1fr; gap:1.625rem; min-height:0; }
  .banda .sello{ position:static; margin-bottom:1.25rem; }
  .banda .tira-cub figure{ width:7.375rem; }

  .z-catalogo .cab{ flex-direction:column; align-items:flex-start; }
  /* El emblema del colofón tiene un ancho fijo de 18.75rem (300 px) y en un móvil
     de 390 la sección deja 267: se salía 27 px por la derecha. Se acota al ancho
     disponible y mantiene su proporción. */
  .z-colofon .sello--gigante .sello-marca{ width:100%; max-width:18.75rem; height:auto; }
  .rejilla{ grid-template-columns:repeat(2,1fr); gap:1.625rem 1rem; }
  .tarjeta-cat{ transform:none; }
  .tarjeta-cat:hover{ transform:translateY(-0.25rem); }

  .z-colofon .grid-colofon{ grid-template-columns:1fr; gap:1.875rem; }
  .carta ul{ grid-template-columns:1fr; }
  .z-colofon .legal{ flex-direction:column; gap:0.5rem; }
  .cubierta:hover{ transform:rotate(var(--rot,0deg)); }
  .cubierta:hover img{ box-shadow:var(--sombra-dura); }
}
@media (max-width:60em){
  .z-sellos{ grid-template-columns:1fr; }
  .panel{ min-height:0; padding:5rem 1.375rem 4.125rem; }
  .panel .sello{ position:static; margin-bottom:1.125rem; }
  .panel .tira-libros{ grid-template-columns:repeat(2,1fr); }
  .ficha-libro{ max-width:none; }
}

/* ============ ZONA SERIES ============ */
.z-series{ min-height:100vh; padding:7.375rem 3.75rem 6.5rem; }
.z-series .agua{ position:absolute; left:1%; top:2%; z-index:0; font-family:var(--display); text-transform:uppercase; font-size:clamp(3.75rem,11vw,7.5rem); line-height:.8; color:var(--tinta); opacity:.08; pointer-events:none; user-select:none; }
.z-series .sello{ position:absolute; top:3.375rem; right:3.5rem; }
.z-series .cab{ position:relative; z-index:2; }
.z-series .megatit{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.5rem,5vw,5.375rem); line-height:.86; letter-spacing:-.01em; }
.z-series .sub{ font-family:var(--body); font-style:italic; font-size:1.0625rem; color:var(--grafito); max-width:54ch; margin:1rem 0 2.75rem; position:relative; z-index:2; }
.serie-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13.125rem,1fr)); gap:1.875rem; position:relative; z-index:2; }
.serie-card{ display:block; background:var(--papel-tarjeta); border:0.0625rem solid var(--filete); border-top:0.25rem solid var(--c,var(--tinta)); padding:0.75rem 0.75rem 1rem; box-shadow:var(--sombra-dura); transform:rotate(var(--rot,0deg)); transition:transform .28s, box-shadow .28s; }
.serie-card:hover{ transform:rotate(0deg) translateY(-0.25rem); }
.serie-card .sc-img{ overflow:hidden; margin-bottom:0.75rem; background:var(--tinta); }
.serie-card img{ width:100%; display:block; }
.serie-card h3{ font-family:var(--display); font-size:1.375rem; text-transform:uppercase; line-height:1.02; margin-bottom:0.375rem; }
.serie-card .sc-meta{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); border-top:0.0625rem solid var(--filete); padding-top:0.5rem; margin-top:0.5rem; }

/* ============ ZONA ATMAN ============ */
.z-atman{ min-height:auto; padding:6.875rem 3.75rem 6.25rem; }
.z-atman .cab{ position:relative; z-index:2; margin-bottom:2.25rem; }
.z-atman .megatit{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.375rem,4.6vw,5rem); line-height:.86; }
.atman{ background:var(--tinta); color:var(--papel); display:grid; grid-template-columns:1fr 1.6fr; box-shadow:var(--sombra-dura); position:relative; z-index:2; }
.atman .code{ font-family:var(--mono); font-size:0.8125rem; line-height:1.8; color:var(--acida); padding:2.5rem 2.125rem; border-right:0.0625rem solid rgba(239,232,219,.16); }
.atman .code .err{ color:var(--bermellon); }
.atman .code .blink{ animation:blinker 1s step-end infinite; }
.atman .body{ padding:2.5rem 2.375rem; display:flex; flex-direction:column; justify-content:center; }
.atman h2{ font-family:var(--display); font-size:clamp(1.75rem,3.2vw,3.25rem); text-transform:uppercase; line-height:.9; margin-bottom:0.875rem; }
.atman p{ font-family:var(--body); font-size:1rem; line-height:1.65; color:rgba(239,232,219,.75); max-width:52ch; margin-bottom:1.625rem; }
.atman .cmd{ align-self:flex-start; border:0.0625rem solid var(--papel); color:var(--papel); font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; padding:0.75rem 1.25rem; }
.atman .cmd:hover{ background:var(--papel); color:var(--tinta); }

/* ============ ZONA SOCIAL (lectores) ============ */
.z-social{ min-height:auto; padding:6rem 3.75rem; }
.social{ border-top:0.0625rem solid var(--tinta); border-bottom:0.0625rem solid var(--filete); padding:3.25rem 0; position:relative; z-index:2; max-width:62.5rem; }
.social .kicker{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gris); margin-bottom:1.25rem; }
.social .q{ font-family:var(--body); font-style:italic; font-size:clamp(1.25rem,2.6vw,2.25rem); line-height:1.35; max-width:34ch; }
.social .a{ margin-top:1.375rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gris); }

/* ============ CATÁLOGO EN GRILLA (view_mode grid) ============ */
.rejilla-simple{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13.75rem,1fr)); gap:2.125rem 1.625rem; position:relative; z-index:2; }

/* ============ AVISO ADMIN ============ */
.admin-aviso{ background:var(--tinta); color:var(--papel); font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; padding:0.5rem 0.75rem; display:inline-block; margin-bottom:1.25rem; }
.admin-aviso b{ color:var(--acida); font-weight:400; }

/* ---- añadidos de producción ---- */
.cubierta video{ width:100%; display:block; box-shadow:var(--sombra-dura); transition:box-shadow .28s; }
.pack-ribbon{ position:absolute; top:0; left:50%; transform:translate(-50%,-50%); background:var(--tinta); color:var(--papel-tarjeta); font-family:var(--mono); font-size:0.8125rem; letter-spacing:.18em; text-transform:uppercase; padding:0.3125rem 0.625rem; z-index:3; }
.pack--destacado{ outline:0.125rem solid var(--tinta); outline-offset:0.25rem; }
.regla-admin{ display:flex; flex-direction:column; align-items:center; gap:0.5rem; padding:0.875rem 0 0; }
.regla-admin .toggle-wrapper{ display:flex; align-items:center; }
.toggle{ position:relative; display:inline-block; width:2.5rem; height:1.375rem; }
.toggle input{ opacity:0; width:0; height:0; }
.toggle-slider{ position:absolute; cursor:pointer; inset:0; background:var(--filete); border-radius:1.375rem; transition:.3s; border:0.0625rem solid var(--filete); }
.toggle-slider:before{ content:""; position:absolute; height:0.875rem; width:0.875rem; left:0.1875rem; bottom:0.125rem; background:var(--papel-tarjeta); border-radius:50%; transition:.3s; }
input:checked + .toggle-slider{ background:var(--tinta); border-color:var(--tinta); }
input:checked + .toggle-slider:before{ transform:translateX(1.125rem); }
.regla-admin-pill{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); }
.hero-marca{ max-width:56.25rem; position:relative; z-index:2; }
.hero-marca .mega{ font-size:clamp(2.75rem,6vw,6.5rem); margin:1.25rem 0 1.125rem; text-transform:uppercase; }
.hero-marca .intro{ font-family:var(--body); font-size:1.0625rem; max-width:46ch; color:var(--grafito); }


.clip{ position:absolute; right:6%; bottom:11%; width:24%; z-index:3; transform:rotate(var(--rot,0deg)); }
.clip video{ width:100%; display:block; background:#000; box-shadow:var(--sombra-dura); }
/* «clip · lanzamiento» es TEXTO META: nombra el papel que cumple la pieza en la
   mesa (un clip de lanzamiento), no le dice nada al lector. Va con la tipografía
   de corrección de pruebas, como el resto de las anotaciones de taller. */
.clip-tag{ display:block; margin-top:0.4375rem; font-family:var(--mano); font-size:1.25rem; line-height:1.2; letter-spacing:.02em; text-transform:none; color:var(--lapiz); }
@media (max-width:60em){ .clip{ position:static; width:100%; margin-top:1.25rem; } }


/* ============================================================
   LÍNEAS EDITORIALES (split a dos columnas · versión index4)
   ============================================================ */
:root{ --magenta:#ff2d9b; --cyan:#00e5ff; --sepia:#8b6f47; }
body[data-sello="distopia"] { --tinta-activa:var(--magenta); --tinta-texto:var(--magenta); }
body[data-sello="historica"]{ --tinta-activa:var(--sepia);   --tinta-texto:var(--sepia); }

.z-lineas{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; position:relative; }
.mitad{ position:relative; padding:7.5rem 3.5rem 6.25rem; overflow:hidden; display:flex; flex-direction:column; }
.mitad .agua{ position:absolute; right:-1%; top:6%; z-index:0; font-family:var(--display); text-transform:uppercase; font-size:clamp(4.375rem,9vw,9.375rem); line-height:.8; opacity:.16; pointer-events:none; user-select:none; }
.mitad .sello{ position:absolute; top:3.375rem; right:3rem; }
.mitad .folio-zona{ top:1.875rem; left:2.125rem; }
.mitad .etiq{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.24em; text-transform:uppercase; margin-bottom:1.625rem; position:relative; z-index:2; }
.mitad .megatit{ font-family:var(--display); text-transform:uppercase; font-size:clamp(3.25rem,5.4vw,5.75rem); line-height:.88; letter-spacing:-.01em; margin-bottom:1.625rem; position:relative; z-index:2; }
.mitad .intro{ font-size:1rem; line-height:1.65; max-width:34ch; margin-bottom:3.25rem; position:relative; z-index:2; }
.mitad .tira-cub{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem; position:relative; z-index:2; margin-top:auto; }
.mitad .tira-cub figure{ position:relative; }
.mitad .tira-cub img{ display:block; width:100%; box-shadow:var(--sombra-dura); }
.mitad .tira-cub figcaption{ margin-top:0.5625rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; }
.mitad .tira-cub figcaption b{ display:block; font-weight:400; font-size:0.8125rem; margin-bottom:0.125rem; }
.mitad .cod-pie{ margin-top:2.125rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.18em; text-transform:uppercase; position:relative; z-index:2; }

.m-dist{ background:#0d0b0f; color:var(--papel);
  background-image:
    radial-gradient(22.5rem 18.75rem at 22% 18%, rgba(255,45,155,.14), transparent 70%),
    radial-gradient(26.25rem 21.25rem at 82% 74%, rgba(0,229,255,.09), transparent 72%); }
.m-dist .agua{ color:var(--magenta); }
.m-dist .etiq{ color:var(--magenta); }
.m-dist .megatit{ color:var(--papel); }
.m-dist .megatit em{ font-style:normal; color:var(--magenta); text-shadow:0.125rem 0 0 var(--cyan); }
.m-dist .intro{ color:rgba(239,232,219,.74); }
.m-dist .tira-cub figcaption{ color:rgba(239,232,219,.62); }
.m-dist .tira-cub figcaption b{ color:var(--magenta); }
.m-dist .cod-pie{ color:rgba(239,232,219,.6); border-top:0.0625rem solid rgba(239,232,219,.18); padding-top:0.875rem; }

.m-hist{ background:var(--papel-2); color:var(--tinta); }
.m-hist .agua{ color:var(--sepia); }
.m-hist .etiq{ color:var(--sepia); }
.m-hist .megatit{ font-family:var(--body); font-style:italic; font-weight:600; text-transform:none; letter-spacing:-.02em; line-height:.94; font-size:clamp(2.75rem,4.6vw,4.875rem); color:var(--tinta); }
.m-hist .megatit em{ font-style:italic; color:var(--sepia); }
.m-hist .intro{ color:rgba(20,18,16,.72); }
.m-hist .tira-cub figcaption{ color:rgba(20,18,16,.62); }
.m-hist .tira-cub figcaption b{ color:var(--sepia); }
.m-hist .cod-pie{ color:rgba(20,18,16,.6); border-top:0.0625rem solid rgba(20,18,16,.2); padding-top:0.875rem; }
.m-hist .marca::before{ background: linear-gradient(var(--sepia),var(--sepia)) center/0.0625rem 100% no-repeat, linear-gradient(var(--sepia),var(--sepia)) center/100% 0.0625rem no-repeat; }
.m-hist .marca::after{ border-color:var(--sepia); }

.nota-mec{ margin-top:2.875rem; background:var(--papel-tarjeta); border:0.125rem solid var(--tinta); padding:1.375rem 1.625rem; font-family:var(--mono); font-size:0.8125rem; line-height:1.75; max-width:56ch; transform:rotate(-.6deg); box-shadow:0.375rem 0.375rem 0 var(--tinta); position:relative; z-index:2; }
.nota-mec b{ background:var(--acida); padding:0.0625rem 0.25rem; font-weight:400; }

@media (max-width:60em){
  .z-lineas{ grid-template-columns:1fr; }
  .mitad{ padding:6.25rem 1.625rem; }
  .mitad .tira-cub{ grid-template-columns:repeat(2,1fr); }
}


/* ---- emblemas de sello ---- */
.sello-ico{ display:inline-block; width:1.05em; height:1.05em; background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; vertical-align:-.16em; }
.sello-ico--asimov{ -webkit-mask-image:url('../img/sello-asimov.svg'); mask-image:url('../img/sello-asimov.svg'); }
.sello-ico--verne{ -webkit-mask-image:url('../img/sello-verne.svg'); mask-image:url('../img/sello-verne.svg'); }
.sello-ico--caja_negra{ -webkit-mask-image:url('../img/sello-caja-negra.svg'); mask-image:url('../img/sello-caja-negra.svg'); }
.sello-ico--alicanto{ -webkit-mask-image:url('../img/sello-alicanto.svg'); mask-image:url('../img/sello-alicanto.svg'); }
.chip .sello-ico, .pack-badge .sello-ico{ margin-right:0.375rem; }
.dd-sellos{ display:flex; flex-wrap:wrap; gap:0.375rem 1.125rem; }
.dd-sellos span{ display:inline-flex; align-items:center; gap:0.4375rem; }
/* Los sellos del colofón son enlaces a su vitrina. Se marcan con un filete que
   sólo aparece al pasar por encima, para que la lista siga leyéndose como una
   lista de datos y no como un menú de enlaces azules. */
.dd-sellos a{ display:inline-flex; align-items:center; gap:0.4375rem; color:inherit; border-bottom:0.0625rem solid transparent; transition:color .15s, border-color .15s; }
.dd-sellos a:hover, .dd-sellos a:focus-visible{ color:var(--tinta); border-bottom-color:var(--tinta); }

/* ---- Atman en clave de mesa ---- */
.z-atman{ min-height:auto; padding:6.875rem 3.75rem 6.25rem; }
.atman-tarjeta{ position:relative; z-index:2; background:var(--papel-tarjeta); border:0.0625rem solid var(--filete); border-top:0.25rem solid var(--tinta); box-shadow:var(--sombra-dura); padding:2.375rem 2.5rem; display:grid; grid-template-columns:1.35fr 1fr; gap:2.875rem; align-items:center; transform:rotate(-.4deg); }
/* min-width:0 en las columnas: la consola de la derecha trae tokens sin espacios
   («BYPASSING_DEFENSE_MECHANISMS...»), que fijan un ancho mínimo y estiraban la
   tarjeta hasta sacarla de un móvil de 390 px. Con esto el bloque encoge, y
   overflow-wrap permite partir esos tokens largos en vez de desbordar. */
.atman-tarjeta > *{ min-width:0; }
.atman-code{ overflow-wrap:anywhere; }
.atman-tape{ position:absolute; top:-0.75rem; left:2.25rem; width:5.375rem; height:1.5rem; opacity:.85; background:linear-gradient(180deg, rgba(255,252,242,.8), rgba(233,224,205,.6)); transform:rotate(-3deg); box-shadow:0 0.0625rem 0.125rem rgba(20,18,16,.12); z-index:3; }
.atman-kicker{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gris); }
.atman-tit{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.875rem,3.4vw,3.5rem); line-height:.9; margin:0.75rem 0 0.875rem; }
.atman-desc{ font-family:var(--body); font-size:1.0313rem; line-height:1.6; color:var(--grafito); max-width:44ch; margin-bottom:1.5rem; }
.atman-cmd{ display:inline-block; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; background:var(--tinta); color:var(--papel-tarjeta); padding:0.8125rem 1.25rem; }
.atman-cmd:hover{ background:var(--lapiz); }
.atman-code{ font-family:var(--mono); font-size:0.8125rem; line-height:1.85; color:var(--grafito); background:var(--papel); border-left:0.25rem solid var(--tinta); padding:1.25rem 1.375rem; white-space:pre-wrap; margin:0; }
.atman-code .err{ color:var(--verne-t); }
/* El cursor de la consola: mientras se escribe, parpadea. Antes esto era un
   <span class="blink"> con un «_» fijo dentro del texto; ahora el guión lo pone
   el JS como último carácter escrito, así que el parpadeo va en el propio bloque
   y sólo mientras dura la animación. Terminada, el cursor se queda quieto. */
.atman-code[data-escribiendo="1"]::after{ content:'▌'; margin-left:0.0625rem; animation:blinker 1s step-end infinite; }
/* Reserva la altura de las seis líneas mientras el bloque está vacío: sin esto el
   hueco crecería a medida que se escribe y la tarjeta daría un salto. */
.atman-code[data-pendiente="1"], .atman-code[data-escribiendo="1"]{ min-height:calc(6lh + 2.5rem); }
@media (prefers-reduced-motion: reduce){
  .atman-code[data-escribiendo="1"]::after{ animation:none; }
}
.atman-code .blink{ animation:blinker 1s step-end infinite; }
@keyframes blinker{ 50%{ opacity:0; } }
@media (max-width:60em){ .atman-tarjeta{ grid-template-columns:1fr; gap:1.625rem; padding:1.625rem 1.375rem; } }

/* La zona de Atman no estaba en la reducción de padding de móvil (la regla de
   ≤60em lista .z-novedad, .z-vitrina, .z-catalogo y .z-colofon, y .z-atman no
   está entre ellas). Con sus 3.75rem de aire lateral, en un móvil de 390 px el
   contenido medía 375 dentro de 307 y se recortaba 65 px: el titular se leía
   «EL ALGORITM» y el párrafo y el bloque de código perdían su final. Y no había
   arreglo posible: .zona{overflow:hidden} y body{overflow-x:hidden} matan el
   desplazamiento lateral, así que ese texto era ilegible sin más. Va después de
   la regla de .z-atman para poder ganarle. */
@media (max-width:60em){ .z-atman{ padding:5.75rem 1.375rem 4.5rem; } }


/* ---- paneles por sello (diagramación del split, 4 sellos) ---- */
.z-sellos{ display:grid; grid-template-columns:1fr 1fr; position:relative; }
.mitad{ min-height:100vh; }
.m-oscura{ background:#0d0b0f; color:var(--papel); }
.m-oscura .intro{ color:rgba(239,232,219,.72); }
.m-oscura .tira-cub figcaption{ color:rgba(239,232,219,.6); }
/* Sobre la tinta negra el blanco al 70% daba 2,99:1 y al 60% 2,5:1: por debajo del
   mínimo AA. Al 88% queda en 4,5:1 justos y al 85% en 4,3:1, así que se suben los
   dos que llevan letra informativa. */
.m-oscura .folio-zona{ color:rgba(239,232,219,.88); }
.m-oscura .folio-zona b{ color:var(--acc-texto,var(--papel)); }
.m-oscura .cod-pie{ color:rgba(239,232,219,.85); border-top:0.0625rem solid rgba(239,232,219,.18); padding-top:0.875rem; }
.m-clara{ background:var(--papel-2); color:var(--tinta); }
.m-clara .intro{ color:rgba(20,18,16,.72); }
.m-clara .tira-cub figcaption{ color:rgba(20,18,16,.62); }
.m-clara .cod-pie{ color:rgba(20,18,16,.6); border-top:0.0625rem solid rgba(20,18,16,.2); padding-top:0.875rem; }
.mitad .megatit em{ font-style:normal; color:var(--acc-texto,var(--tinta-texto,var(--tinta))); }
.mitad .megatit{ color:inherit; }
.mitad .etiq{ color:var(--acc-texto,var(--tinta-texto,var(--tinta))); }
.mitad .sello{ --sello-color:var(--acc-texto,var(--tinta-texto,var(--tinta))); }
.mitad .tira-cub figcaption b .sello-ico{ margin-right:0.3125rem; }
@media (max-width:60em){ .z-sellos{ grid-template-columns:1fr; } }


/* dos voces: oscuros en grotesca, papeles en itálica serif (como el original) */
.m-clara .megatit{ font-family:var(--body); font-style:italic; font-weight:600; text-transform:none; letter-spacing:-.02em; line-height:.94; font-size:clamp(2.625rem,4.6vw,5.125rem); }
.m-clara .megatit em{ font-style:italic; }


/* ---- cubiertas inclinadas y con animación (como en la versión anterior) ---- */
.mitad .tira-cub figure{
  position:relative;
  transform:rotate(var(--rot,0deg));
  transform-origin:50% 92%;
  transition:transform .42s cubic-bezier(.2,.7,.3,1);
  animation:asentar .85s cubic-bezier(.2,.7,.3,1);
}
.mitad .tira-cub figure:nth-child(1){ --rot:-2.9deg; animation-delay:0ms; }
.mitad .tira-cub figure:nth-child(2){ --rot:2.3deg;  animation-delay:90ms; }
.mitad .tira-cub figure:nth-child(3){ --rot:-1.6deg; animation-delay:180ms; }
.mitad .tira-cub figure:nth-child(4){ --rot:2.8deg;  animation-delay:270ms; }
.mitad .tira-cub figure:nth-child(5){ --rot:-2.1deg; animation-delay:360ms; }
.mitad .tira-cub figure:hover{ transform:rotate(0deg) translateY(-0.625rem); z-index:4; }
.mitad .tira-cub img{ transition:box-shadow .35s; }
.mitad .tira-cub figure:hover img{
  box-shadow:
    0 0.0625rem 0 rgba(20,18,16,.15),
    0.375rem 0.5625rem 0 var(--acc,var(--tinta)),
    0 1.625rem 2.5rem -1.125rem rgba(20,18,16,.45);
}
@keyframes asentar{
  from{ transform:rotate(calc(var(--rot,0deg) + 6deg)) translateY(0.875rem); }
  to  { transform:rotate(var(--rot,0deg)); }
}
@media (max-width:60em){
  .mitad .tira-cub figure{ transform:none; animation:none; }
  .mitad .tira-cub figure:hover{ transform:translateY(-0.375rem); }
}


/* ---- overlay de cubierta: reseña + Ver ficha (como la home actual) ---- */
.libro-a{ position:relative; display:block; overflow:hidden; }
.libro-over{
  position:absolute; inset:0; z-index:2;
  background:var(--papel-tarjeta); color:var(--tinta);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:0.75rem; padding:1rem; text-align:center;
  opacity:0; transform:translateY(0.5rem);
  transition:opacity .28s ease, transform .28s ease;
}
.libro-a:hover .libro-over,
.tarjeta-cat:hover .libro-over{ opacity:1; transform:none; }
/* Las estrellas van sobre la tarjeta del libro (--papel-tarjeta), no sobre la
   sección: heredar el color del sello las dejaba en 1,26:1. La variante ámbar de
   la casa es la que llega a AA sobre papel. */
.over-stars{ color:var(--tesla-t); font-size:0.8125rem; letter-spacing:0.1875rem; }
.over-quote{ font-family:var(--body); font-style:italic; font-size:0.8125rem; line-height:1.45; color:var(--grafito); max-width:24ch; }
.over-btn{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; border:0.0625rem solid var(--tinta); padding:0.4375rem 0.6875rem; }
.libro-flag{ position:absolute; top:0.5rem; left:0.5rem; z-index:3; background:var(--tinta); color:var(--papel-tarjeta); font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; padding:0.25rem 0.4375rem; }
.cap-tag{ display:block; margin-top:0.25rem; font-family:var(--body); font-size:0.8125rem; line-height:1.35; text-transform:none; letter-spacing:0; opacity:.68; }
.tc-img{ position:relative; overflow:hidden; }
.mitad .tira-cub .libro-over{ background:var(--papel-tarjeta); }


/* ---- enlaces reales del sitio (nav y pie) ---- */
.regla-enlaces{ display:flex; flex-direction:column; align-items:center; gap:0.375rem; padding:0.625rem 0; }
.regla-enlaces a{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }
.regla-enlaces a:hover{ color:var(--tinta-activa); }
.legal-links{ display:flex; flex-wrap:wrap; gap:0.375rem 1rem; }
.legal-links a{ color:var(--gris); border-bottom:0.0625rem solid var(--filete); }
.legal-links a:hover{ color:var(--tinta); border-color:var(--tinta); }
/* overlay de serie */
.sc-img{ position:relative; overflow:hidden; }
.serie-over{ position:absolute; inset:0; background:rgba(247,240,221,.95); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; }
.serie-card:hover .serie-over{ opacity:1; }


/* ---- emblema grande del sello en su panel ---- */
.sello-emblem{ position:absolute; top:2.75rem; right:2.875rem; z-index:5; display:flex; flex-direction:column; align-items:center; gap:0.5625rem; color:var(--acc-texto,var(--tinta-texto,var(--tinta))); }
.sello-emblem .sello-ico{ width:3.75rem; height:3.75rem; }
.sello-emblem-sub{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.2em; text-transform:uppercase; opacity:1; }

/* ---- emblemas a tamaño legible en el resto ---- */
.chip .sello-ico, .pack-badge .sello-ico, .dd-sellos .sello-ico{ width:1rem; height:1rem; vertical-align:-.25em; }
.mitad .tira-cub figcaption b{ color:var(--acc-texto,var(--tinta-texto,var(--tinta))); }
.mitad .tira-cub figcaption b .sello-ico{ width:0.9375rem; height:0.9375rem; vertical-align:-.2em; margin-right:0.3125rem; }
.tc-tit + .tc-aut + .sello-tag .sello-ico{ width:0.875rem; height:0.875rem; vertical-align:-.2em; }
@media (max-width:60em){ .sello-emblem{ position:static; flex-direction:row; margin-bottom:1rem; } .sello-emblem .sello-ico{ width:2.5rem; height:2.5rem; } }

.social-cta{ margin-top:1.625rem; }

/* ============ PÁGINAS INTERIORES ============ */
.z-pagina{ min-height:auto; padding:7.375rem 3.75rem 6rem; position:relative; }
.z-pagina .pagina-cab{ margin-bottom:2.25rem; }
.z-pagina h1{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.125rem,4.6vw,4.75rem); line-height:.9; letter-spacing:-.01em; margin-bottom:0.875rem; }
.z-pagina .entrada{ font-family:var(--body); font-style:italic; font-size:clamp(1rem,1.5vw,1.3125rem); color:var(--grafito); max-width:56ch; }
.z-pagina h2{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.25rem,2vw,1.875rem); line-height:1; margin:2.75rem 0 0.75rem; }
.z-pagina h3{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.0625rem,1.6vw,1.375rem); margin:0 0 0.375rem; }
.z-pagina p{ font-family:var(--body); font-size:1.0313rem; line-height:1.75; color:var(--grafito); margin-bottom:1rem; max-width:68ch; }
.z-pagina ul, .z-pagina ol{ margin:0 0 1.125rem 1.375rem; }
/* Las tiendas de BuscaLibre en la política de envíos: son nueve enlaces y en una
   lista corrida no se leen. En rejilla se ven de un vistazo y cada uno va a la
   tienda del país de quien lee. */
.z-pagina .lista-tiendas{ list-style:none; margin:0 0 1.25rem; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:0.375rem 1.5rem; }
.z-pagina .lista-tiendas li{ margin-bottom:0; }
.z-pagina .lista-tiendas a{ border-bottom:0; }
.z-pagina .lista-tiendas a:hover{ border-bottom:0.0625rem solid var(--tinta); }
.z-pagina li{ font-family:var(--body); font-size:1.0313rem; line-height:1.7; color:var(--grafito); margin-bottom:0.5rem; }
.z-pagina hr{ border:0; border-top:0.0625rem solid var(--filete); margin:1.75rem 0; }
.z-pagina strong{ color:var(--tinta); }
.z-pagina a{ border-bottom:0.0625rem solid var(--filete); }
.z-pagina a:hover{ border-color:var(--tinta); }
.sello-folio{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gris); display:block; margin-bottom:0.875rem; }
.nota{ background:var(--papel-tarjeta); border-left:0.25rem solid var(--tinta); padding:1.125rem 1.375rem; margin:1.625rem 0; font-family:var(--body); font-size:0.9688rem; line-height:1.65; color:var(--grafito); max-width:62ch; }
.regla--paginas .nombre{ font-size:0.8125rem !important; }
.sello-ico--tesla{ -webkit-mask-image:url('../img/sello-tesla.svg'); mask-image:url('../img/sello-tesla.svg'); }

/* formulario de contacto */
.form-mesa{ max-width:40rem; margin-top:0.375rem; }
.form-mesa label{ display:block; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); margin:1.375rem 0 0.4375rem; }
.form-mesa input, .form-mesa textarea{ width:100%; background:var(--papel-tarjeta); border:0.0625rem solid var(--filete); padding:0.8125rem 0.875rem; font-family:var(--body); font-size:1rem; color:var(--tinta); }
.form-mesa input:focus, .form-mesa textarea:focus{ outline:0.125rem solid var(--tinta); outline-offset:0.0625rem; }
.form-mesa textarea{ min-height:9.375rem; resize:vertical; }
.form-mesa .accion{ margin-top:1.625rem; }
.aviso{ display:inline-block; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; padding:0.625rem 0.875rem; margin-bottom:1.375rem; }
.aviso--ok{ background:var(--acida); color:var(--tinta); }
.aviso--err{ background:var(--tinta); color:var(--papel-tarjeta); }
.campo-requerido{ color:var(--bermellon); }

/* manifiesto */
.man-bloque{ max-width:48.75rem; margin-bottom:4rem; }
.man-num{ display:block; font-family:var(--display); font-size:clamp(3.375rem,7vw,6.875rem); line-height:.8; color:var(--tinta); opacity:.12; margin-bottom:-0.5rem; }
.man-bloque h2{ border-left:0.25rem solid var(--tinta); padding-left:0.875rem; }
.man-bloque .texto p{ font-family:var(--body); font-size:1.0313rem; line-height:1.8; color:var(--grafito); margin-bottom:1.125rem; max-width:68ch; }
.promesa{ border:0.125rem solid var(--tinta); background:var(--papel-tarjeta); padding:2.125rem; max-width:47.5rem; box-shadow:0.375rem 0.375rem 0 var(--tinta); transform:rotate(-.5deg); }
.promesa p{ font-family:var(--body); font-size:1.0313rem; line-height:1.75; color:var(--grafito); margin-bottom:0.875rem; max-width:54ch; }
.promesa .slogan{ display:block; margin-top:1.625rem; font-family:var(--display); text-transform:uppercase; font-size:clamp(1.25rem,2.4vw,2.375rem); }
.sellos-manifiesto{ display:grid; gap:1.25rem; margin-top:1.625rem; max-width:52.5rem; }
.sello-man{ position:relative; background:var(--papel-tarjeta); border:0.0625rem solid var(--filete); border-left:0.25rem solid var(--c,var(--tinta)); padding:1.375rem 1.5rem; box-shadow:0.125rem 0.1875rem 0 rgba(20,18,16,.2); }
.sello-man .sm-cab{ display:flex; align-items:center; gap:0.875rem; margin-bottom:0.5rem; }
.sello-man .sello-ico{ width:2.125rem; height:2.125rem; color:var(--c,var(--tinta)); }
.sello-man h3{ color:var(--c,var(--tinta)); margin:0; }
.sello-man .sm-tags{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); display:block; border-bottom:0.0625rem solid var(--filete); padding-bottom:0.625rem; margin-bottom:0.75rem; }
.sello-man p{ margin-bottom:0; }
.sello-man .sm-link{ display:inline-block; margin-top:0.875rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c,var(--tinta)); border-bottom:0.0625rem solid currentColor; }

/* FAQ */
.faq-item{ border-left:0.1875rem solid var(--tinta); padding:0 0 0 1rem; margin-bottom:1.625rem; max-width:70ch; }
.faq-item h3{ margin-bottom:0.375rem; }
.faq-item p{ margin-bottom:0; }

@media (max-width:60em){ .z-pagina{ padding:5.75rem 1.375rem 4.375rem; } }


/* ---- sello Tesla (Atman) ---- */
:root{ --tesla:#8a6d1f; }
body[data-sello="tesla"]{ --tinta-activa:var(--tesla); --tinta-texto:var(--tesla-t); }
.sello-emblem--inline{ position:static; flex-direction:row; align-items:center; gap:0.75rem; margin-bottom:1rem; }
.sello-emblem--inline .sello-ico{ width:2.375rem; height:2.375rem; }
.z-atman .atman-tarjeta{ border-top-color:var(--acc,var(--tinta)); }
.z-atman .atman-kicker{ color:var(--acc-texto,var(--tinta-texto,var(--gris))); }
.z-atman .atman-cmd{ background:var(--acc-texto,var(--acc,var(--tinta))); }
.z-atman .atman-code{ border-left-color:var(--acc,var(--tinta)); }


/* ============ PÁGINAS DE LISTADO (autor · serie · sello) ============ */
.listado-cab{ position:relative; padding:7.375rem 3.75rem 1.875rem; }
.listado-cab .sello-emblem{ position:static; flex-direction:row; align-items:center; gap:0.875rem; margin-bottom:1rem; }
.listado-cab h1{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.375rem,5vw,5.75rem); line-height:.88; letter-spacing:-.01em; }
.listado-cab .entrada{ font-family:var(--body); font-size:clamp(1rem,1.6vw,1.3125rem); color:var(--grafito); max-width:62ch; margin-top:1rem; line-height:1.7; }
.listado-cab .entrada p{ margin-bottom:0.75rem; }
.listado-cab .entrada p:first-of-type{ font-size:clamp(1.125rem,1.9vw,1.5625rem); color:var(--tinta); border-left:0.25rem solid var(--tinta); padding-left:1.125rem; }
.listado-cab .sello-folio{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gris); display:block; margin-bottom:0.875rem; }
.autor-grid{ display:flex; gap:2.25rem; align-items:flex-start; }
.autor-foto{ width:11.25rem; height:11.25rem; object-fit:cover; filter:grayscale(1); border:0.0625rem solid var(--filete); box-shadow:var(--sombra-dura); transform:rotate(-1.4deg); }
.autor-links{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:0.625rem 1.375rem; }
.autor-links a{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta); border-bottom:0.0625rem solid currentColor; }
.autor-links a:hover{ color:var(--verne); }
.listado-rejilla{ padding:1.5rem 3.75rem 6.875rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(14.375rem,1fr)); gap:2.375rem 1.625rem; }
/* Las tarjetas del catálogo llevan títulos que pueden traer una palabra larga sin
   espacios. Sin min-width:0 el ítem no baja de ese ancho y la rejilla desborda. */
.listado-rejilla > *{ min-width:0; }
.listado-rejilla .tarjeta-cat{ border-top-color:var(--c,var(--tinta)); }
.tc-formatos{ display:flex; flex-wrap:wrap; gap:0.375rem; margin-top:0.625rem; }
.f-badge{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; padding:0.3125rem 0.5rem; border:0.0625rem solid var(--tinta); color:var(--tinta); }
.f-badge--global{ border-color:var(--grafito); color:var(--grafito); }
.f-badge--ebook{ background:var(--tinta); color:var(--papel-tarjeta); }
.orden-tag{ display:block; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); margin-bottom:0.375rem; }
.vacio{ margin:1.5rem 3.75rem 6.875rem; border:0.0625rem dashed var(--filete); padding:3.75rem 2rem; text-align:center; max-width:41.25rem; }
.vacio h3{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.25rem,2.4vw,2.125rem); margin-bottom:0.5rem; }
.vacio p{ font-family:var(--body); font-style:italic; color:var(--grafito); }
@media (max-width:60em){
  .listado-cab{ padding:5.75rem 1.375rem 1.5rem; }
  .listado-rejilla{ padding:1rem 1.375rem 5rem; }
  .vacio{ margin:1rem 1.375rem 5rem; }
  .autor-grid{ flex-direction:column; gap:1.375rem; }
}


/* ============ FICHA DE LIBRO ============ */
.libro-ficha{ position:relative; padding:7.375rem 3.75rem 3.75rem; }
/* Anotaciones de taller de la ficha: TEXTO META sobre la SUPERFICIE de trabajo.
   No van dentro de ningún bloque de contenido —dentro parecen parte de la ficha—
   ni apiladas en un solo sitio: se reparten por los BORDES del bloque, como el
   papel de una mesa de edición que se va llenando de marcas. Unas en ángulo y
   otras de canto (writing-mode), que es como se anota en el margen de un pliego.
   Pueden pisarse entre ellas; lo que NUNCA deben pisar es texto, y eso se
   comprueba midiendo, no a ojo. */
.meta-margen{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.meta-margen .lapiz{
  position:absolute; font-size:1.125rem; line-height:1.15; white-space:nowrap;
  transform:rotate(var(--rot,0deg));
}
/* Borde de arriba: la nota se apoya en el filete superior del bloque. */
.meta-nota--arriba{ top:1.25rem; right:3.75rem; text-align:right; }
/* Borde de la derecha, de canto: en vertical ocupa el ancho de una línea, así que
   cabe en el margen aunque el bloque esté topado a 72ch. Se dejan 2.5rem hasta el
   canto para no rozar la barra de desplazamiento. */
.meta-nota--lateral{
  right:2.5rem; top:12rem;
  writing-mode:vertical-rl;
}
.meta-nota--lateral-2{ right:5.5rem; top:24rem; writing-mode:vertical-rl; }
/* Ojo: una nota de canto NO se gira. Rotar la caja de un texto en vertical lo
   deja de cabezas; el ángulo es cosa de las horizontales, y la verticalidad ya
   es, por sí sola, la marca de margen.
   El selector lleva las dos clases a propósito: «.meta-margen .lapiz» son dos
   clases y le gana a un selector de una sola, que fue lo que dejó el giro puesto
   la primera vez. */
.meta-margen .meta-nota--lateral,
.meta-margen .meta-nota--lateral-2{ transform:none; }
/* Borde de abajo. */
.meta-nota--abajo{ bottom:1.5rem; right:3.75rem; text-align:right; }

/* ── Las mismas notas en las páginas de catálogo (saga, sello, autor) ──────
   Ahí el ancla es .listado-cab. Se pegan al CANTO derecho (a partir de x≈1075) y
   van a dos alturas: la primera bajo el aviso de cookies, que llega hasta y=150 y
   ocupa el ancho del contenido; la segunda más abajo, en la banda que el titular
   deja libre.
   El canto es la única zona libre en TODAS: en /autor el nombre del autor llega
   hasta x=1064 (el .autor-grid le da mucho ancho), así que una nota que empezara
   antes se le montaba encima. Esto se midió en las tres páginas, no se supuso. */
.listado-cab > .meta-margen{ top:0; right:1.5rem; height:17rem; }
.listado-cab .meta-nota--arriba{ top:10rem; }
.listado-cab .meta-nota--abajo{ top:14.5rem; bottom:auto; }
/* Las de canto NO entran aquí: una nota vertical mide lo que mida su texto y se
   saldría de la franja, encima del titular. En estas páginas sólo hay dos bordes
   utilizables, así que se pintan dos anotaciones y no cuatro. */
.listado-cab .meta-nota--lateral,
.listado-cab .meta-nota--lateral-2{ display:none; }
/* En angosto la franja desaparece (el padding baja a 5.75rem) y no hay margen
   lateral: las notas se ocultan, igual que en la ficha. */
@media (max-width:60em){ .listado-cab > .meta-margen{ display:none; } }

/* Páginas de texto que no tienen .listado-cab (las preguntas frecuentes y otras):
   el ancla es la propia sección. Mismo criterio que en las de catálogo —pegadas al
   canto derecho, a dos alturas— porque aquí el texto llega aún más a la derecha
   (hasta x=1022 medido): una nota que empezara en 1045 le caía encima. */
.zona > .meta-margen{ top:0; right:1.5rem; height:19rem; }
.zona > .meta-margen .meta-nota--arriba{ top:11.5rem; }
.zona > .meta-margen .meta-nota--abajo{ top:15.5rem; bottom:auto; }
.zona > .meta-margen .meta-nota--lateral,
.zona > .meta-margen .meta-nota--lateral-2{ display:none; }
@media (max-width:60em){ .zona > .meta-margen{ display:none; } }
.libro-ficha .grid{ display:grid; grid-template-columns:minmax(15rem,22.25rem) 1fr; gap:3.5rem; align-items:start; }
/* min-width:0 en las dos columnas: un ítem de rejilla no baja de su contenido
   (min-width:auto), y aquí dentro hay cosas que no encogen solas —la línea del
   ISBN, el enlace de la serie, el título—. Sin esto, en un móvil de 390 px la
   tarjeta se ponía a 331 px y arrastraba a la cubierta: las dos se salían de la
   pantalla. */
.libro-ficha .grid > *{ min-width:0; }
.libro-ficha .sello-badge,
.libro-ficha .serie-link{ overflow-wrap:anywhere; }
.libro-cubierta{ position:relative; transform:rotate(-1.6deg); }
.libro-cubierta img{ width:100%; height:auto; display:block; box-shadow:var(--sombra-dura); }

/* La tarjeta de datos de la ficha: MISMA pieza que el destacado de la portada
   (.ficha), con el tamaño adaptado a que aquí manda la página y no un escaparate
   de 1200 px. La cinta sujeta la portada igual que allí.
   VA ENCERRADA BAJO .libro-ficha A PROPÓSITO: la clase «ficha tarjeta» la usan
   también el destacado de la portada, y sin encerrarla esta regla le ganaba en
   especificidad a «.z-novedad .ficha» (empatan a una clase y gana la última),
   dejando el destacado en position:relative en vez del absoluto que pide su
   diseño de tres capas. .libro-ficha sólo existe en la ficha. */
.libro-ficha .ficha.tarjeta{
  position:relative; z-index:3; background:var(--papel-tarjeta);
  border:0.0625rem solid var(--filete); padding:1.875rem 1.75rem 1.75rem;
  transform:rotate(0.9deg); box-shadow:var(--sombra-dura);
}
.libro-ficha .ficha.tarjeta .ficha-tit{ font-size:clamp(2rem,4.4vw,3.5rem); line-height:.92; margin:0.25rem 0 0.5rem; }
.libro-ficha .ficha.tarjeta .ficha-aut{ margin-bottom:1.125rem; }
.libro-ficha .ficha.tarjeta dl{ margin-top:0.25rem; }
.libro-ficha .ficha.tarjeta .ficha-nota{ margin-bottom:0; }
/* «Papel» / «Digital»: en qué soportes existe. Va tras la rejilla, así que necesita
   su propio aire; sin él quedaba pegado al último renglón de datos. */
.libro-ficha .ficha.tarjeta .libro-datos{ margin-top:0.75rem; padding-top:0.75rem; border-top:0.0625rem solid var(--filete); font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); }

.sello-badge{ display:inline-flex; align-items:center; gap:0.5625rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.18em; text-transform:uppercase; border:0.0625rem solid currentColor; color:var(--acc-texto,var(--tinta-texto,var(--tinta))); padding:0.375rem 0.6875rem; }
/* El distintivo lleva el ISBN, que es un número largo sin espacios: se le permite
   partirse para que no empuje el ancho de la tarjeta en pantallas angostas. */
.sello-badge{ overflow-wrap:anywhere; }
.sello-badge .sello-ico{ width:1rem; height:1rem; }
.serie-link{ display:inline-block; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); margin-left:0.875rem; border-bottom:0.0625rem solid var(--filete); }
.serie-link:hover{ color:var(--tinta); }
.libro-titulo{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.125rem,4.6vw,5rem); line-height:.9; letter-spacing:-.01em; margin:1.125rem 0 0.75rem; }
.libro-tagline{ font-family:var(--body); font-style:italic; font-size:clamp(1.0625rem,1.7vw,1.4375rem); color:var(--grafito); margin-bottom:2rem; }
.ediciones{ display:grid; gap:1.125rem; }
.edicion{ position:relative; background:var(--papel-tarjeta); border:0.0625rem solid var(--filete); border-top:0.25rem solid var(--ec,var(--tinta)); padding:1.25rem 1.375rem; box-shadow:0.125rem 0.1875rem 0 rgba(20,18,16,.18); }
.ed-badge{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ec,var(--tinta)); border:0.0625rem solid currentColor; padding:0.25rem 0.5625rem; display:inline-block; margin-bottom:0.875rem; }
.edicion ul{ list-style:none; margin:0 0 0.875rem; padding:0; }
/* Las viñetas cierran la tarjeta (van después del botón): sin esto dejan un
   hueco de más al final. */
.edicion > ul:last-child{ margin-bottom:0; margin-top:0.875rem; }
.edicion li{ font-family:var(--body); font-size:0.9063rem; line-height:1.5; color:var(--grafito); margin-bottom:0.375rem; padding-left:1.125rem; position:relative; }
.edicion li::before{ content:"—"; position:absolute; left:0; color:var(--ec,var(--tinta)); }
.ed-precio{ font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2.25rem); display:flex; align-items:baseline; gap:0.625rem; margin-bottom:0.875rem; }
.ed-precio s{ font-family:var(--mono); font-size:0.8125rem; color:var(--gris); }
.ed-precio small{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; color:var(--gris); }
.ed-stock{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bermellon); margin-bottom:0.75rem; display:block; }
.btn-mesa{ display:block; text-align:center; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; padding:0.8125rem; background:var(--tinta); color:var(--papel-tarjeta); border:0; cursor:pointer; }
.btn-mesa:hover{ background:var(--ec,var(--tinta)); }
.btn-mesa[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-linea{ display:block; text-align:center; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; padding:0.75rem; border:0.0625rem solid var(--tinta); color:var(--tinta); background:none; cursor:pointer; }
.btn-linea:hover{ background:var(--tinta); color:var(--papel-tarjeta); }

/* ── La oferta, RESUELTA ──────────────────────────────────────────────────
   La ficha tiene cuatro canales reales (papel/digital × Chile/fuera de Chile)
   porque son cuatro formas legítimas de comprar el mismo libro. El problema no
   era que existieran: era que se ENUMERABAN. Los cuatro bloques a la vez, los
   cuatro con el mismo botón, así que ninguno era el principal y la página
   parecía insistir. Y dos de ellos (ebook_cl y ebook_global) son el MISMO
   archivo: el mismo producto dos veces con dos precios.

   Ahora se muestra UNA celda —la del formato elegido y desde dónde compras— y
   las otras tres quedan a un clic. Se resuelve con :has() y radios, SIN
   JavaScript: el cambio es instantáneo y no depende del JS, que en esta página
   ya es necesario para comprar en papel. Si el navegador no soporta :has(), se
   ven las cuatro celdas, que es exactamente lo que había antes: degrada a lo
   conocido, no a una ficha rota. */
.compra .celda{ display:none; }
.compra:has(#cmp-fmt-papel:checked):has(#cmp-mk-cl:checked)     .celda[data-celda="papel-cl"]{ display:block; }
.compra:has(#cmp-fmt-papel:checked):has(#cmp-mk-intl:checked)   .celda[data-celda="papel-intl"]{ display:block; }
.compra:has(#cmp-fmt-digital:checked):has(#cmp-mk-cl:checked)   .celda[data-celda="digital-cl"]{ display:block; }
.compra:has(#cmp-fmt-digital:checked):has(#cmp-mk-intl:checked) .celda[data-celda="digital-intl"]{ display:block; }

.compra-controles{ display:flex; flex-wrap:wrap; gap:0.625rem 1.25rem; margin-bottom:1rem; }
/* min-width:0 para que el bloque pueda encoger: los botones del selector traen
   texto que no se parte («Copia física»), y sin esto el conjunto fijaba un ancho
   mínimo que estiraba la tarjeta fuera de su columna de la rejilla. El
   max-width:100% es el tope explícito, para que ni la tarjeta ni los controles
   puedan exceder a su contenedor por mucho que crezca su contenido. */
.compra, .compra-controles, .compra-seg{ min-width:0; max-width:100%; }
.libro-ficha .ficha.tarjeta{ min-width:0; max-width:100%; }
.compra-seg{ display:flex; border:0.0625rem solid var(--filete); background:var(--papel-tarjeta); }
/* MISMA TRAMPA QUE EL AVISO DE COOKIES: display:flex gana al display:none que el
   navegador aplica a [hidden], así que sin esta línea un eje que NO debe
   ofrecerse seguía visible. Se vio en los packs, que sólo tienen canales
   chilenos y aun así enseñaban «Fuera de Chile»: elegirlo llevaba a una celda
   vacía. Los radios ocultos siguen existiendo, que es lo que lee el CSS. */
.compra-seg[hidden]{ display:none; }
.compra-seg input{ position:absolute; opacity:0; width:0.0625rem; height:0.0625rem; }
.compra-seg label{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); padding:0.5625rem 0.9375rem; cursor:pointer; border-right:0.0625rem solid var(--filete); transition:background .15s, color .15s; }
.compra-seg label:last-of-type{ border-right:0; }
.compra-seg input:checked + label{ background:var(--tinta); color:var(--papel-tarjeta); }
.compra-seg input:focus-visible + label{ outline:0.125rem solid var(--lapiz); outline-offset:-0.125rem; }

.celda-nota{ font-family:var(--body); font-size:0.9375rem; line-height:1.6; color:var(--grafito); background:var(--papel-tarjeta); border:0.0625rem dashed var(--filete); padding:1.125rem 1.25rem; margin:0; }
.celda-fuera{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); margin:0.625rem 0 0; }
.compra-ayuda{ font-family:var(--body); font-size:0.875rem; color:var(--gris); margin:0.875rem 0 0; }
.compra-ayuda a{ color:var(--tinta); border-bottom:0.0625rem solid var(--filete); }

/* El botón de un canal de TERCERO no puede parecerse al nuestro: la compra
   ocurre en otro sitio, con otro cobrador y otras condiciones. Antes los cuatro
   botones eran idénticos, así que uno que te saca del sitio se veía igual que
   uno que cobra aquí. */
.btn-externo{ display:block; text-align:center; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta); background:transparent; border:0.0625rem solid var(--filete); padding:0.875rem 1.125rem; text-decoration:none; transition:border-color .15s; }
.btn-externo:hover{ border-color:var(--tinta); }

/* El gancho y los datos: el motivo para comprar, en el primer pantallazo. Antes
   ahí sólo había opciones de envío, y el 84% de diferencia de atención que
   documenta Nielsen Norman se gastaba en logística. El gancho lleva medida
   máxima —62 caracteres por línea— sin centrar nada: el eje izquierdo manda. */
.libro-gancho{ font-family:var(--body); font-size:1.0625rem; line-height:1.72; color:var(--grafito); margin:0 0 1rem; max-width:62ch; }
.libro-datos{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); margin:0 0 1.75rem; }

/* Texto sólo para lectores de pantalla. */
.sr{ position:absolute; width:0.0625rem; height:0.0625rem; padding:0; margin:-0.0625rem; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.ficha-datos{ display:grid; grid-template-columns:auto 1fr; gap:0.4375rem 1.25rem; font-family:var(--mono); font-size:0.8125rem; margin-top:1.875rem; border-top:0.0625rem solid var(--filete); padding-top:1.125rem; }
.ficha-datos dt{ color:var(--gris); text-transform:uppercase; font-size:0.8125rem; letter-spacing:.14em; }
.tags{ display:flex; flex-wrap:wrap; gap:0.4375rem; margin-top:1rem; }
/* Las tres garantías, rescatadas de la producción anterior: el rediseño las
   había perdido al reordenar. Van bajo la oferta porque contestan «¿puedo
   fiarme?» justo cuando alguien se lo pregunta. */
.garantias{ list-style:none; display:flex; flex-wrap:wrap; gap:0.5rem 1.125rem; margin:1.125rem 0 0; padding:0; }
.garantias li{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); padding-left:1rem; position:relative; }
/* El visto se dibuja con CSS para no meter un carácter más al HTML. */
.garantias li::before{ content:""; position:absolute; left:0; top:0.1875rem; width:0.5rem; height:0.3125rem; border-left:0.0938rem solid var(--ec,var(--tinta)); border-bottom:0.0938rem solid var(--ec,var(--tinta)); transform:rotate(-45deg); }
.tag{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.12em; text-transform:uppercase; border:0.0625rem solid var(--filete); color:var(--gris); padding:0.25rem 0.5rem; }
/* position:relative es para que las anotaciones de taller (.meta-margen) puedan
   colocarse dentro del bloque, en el aire que deja la prosa. */
.libro-bloque{ position:relative; padding:4.125rem 3.75rem; border-top:0.0625rem solid var(--filete); }
.libro-bloque h2{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.625rem,3vw,2.875rem); margin-bottom:1.25rem; }
.libro-bloque .prose{ font-family:var(--body); font-size:1.0625rem; line-height:1.8; color:var(--grafito); max-width:72ch; }
.libro-bloque .prose p{ margin-bottom:1rem; }
.libro-bloque .prose h3,.libro-bloque .prose h4{ font-family:var(--display); text-transform:uppercase; color:var(--tinta); margin:1.5rem 0 0.625rem; }
.testi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(18.125rem,1fr)); gap:1.375rem; }
.testi{ background:var(--papel-tarjeta); border:0.0625rem solid var(--filete); border-left:0.25rem solid var(--acc,var(--tinta)); padding:1.375rem 1.5rem; box-shadow:0.125rem 0.1875rem 0 rgba(20,18,16,.16); }
.testi .stars{ color:var(--acc-texto,var(--tinta-texto,var(--tinta))); font-size:0.8125rem; letter-spacing:0.1875rem; margin-bottom:0.75rem; display:block; }
.testi p{ font-family:var(--body); font-style:italic; font-size:0.9688rem; line-height:1.6; color:var(--grafito); margin-bottom:0.875rem; }
.testi .quien{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); border-top:0.0625rem solid var(--filete); padding-top:0.625rem; margin:0; }
.autor-ficha{ display:flex; gap:2rem; align-items:flex-start; }
.autor-ficha img{ width:9.375rem; height:9.375rem; object-fit:cover; filter:grayscale(1); border:0.0625rem solid var(--filete); box-shadow:var(--sombra-dura); transform:rotate(-1.4deg); }
.indice-box{ border:0.0625rem solid var(--filete); background:var(--papel-tarjeta); margin-top:1.625rem; }
.indice-box summary{ cursor:pointer; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.18em; text-transform:uppercase; padding:1rem 1.25rem; }
.indice-box ul{ margin:0; padding:0 1.25rem 1.25rem 2.375rem; }
.indice-box li{ font-family:var(--body); font-size:0.9375rem; line-height:1.6; color:var(--grafito); margin-bottom:0.5rem; }
.indice-box li.titulo-cap{ list-style:none; margin:1.25rem 0 0.5rem -1.25rem; font-family:var(--display); text-transform:uppercase; color:var(--tinta); letter-spacing:.02em; }
.mesa-modal{ position:fixed; inset:0; z-index:9990; display:none; align-items:center; justify-content:center; background:rgba(10,8,6,.74); padding:1.5rem; }
.mesa-modal.abierto{ display:flex; }
.mesa-modal .caja{ background:var(--papel); border:0.0625rem solid var(--tinta); box-shadow:var(--sombra-dura); max-width:48.75rem; width:100%; max-height:88vh; overflow:auto; position:relative; }
.mesa-modal .caja-cab{ position:sticky; top:0; z-index:2; background:var(--papel); border-bottom:0.0625rem solid var(--filete); padding:1.25rem 1.625rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.mesa-modal h3{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.25rem,2.4vw,2rem); }
.mesa-modal .cerrar{ font-family:var(--mono); font-size:1rem; background:none; border:0; cursor:pointer; color:var(--tinta); }
.mesa-modal .cuerpo{ padding:1.625rem; }
.mesa-modal .cuerpo .prose{ font-family:var(--body); font-size:1.0313rem; line-height:1.8; color:var(--grafito); }

/* ── El lector: pensado SÓLO para leer ────────────────────────────────────
   Un extracto no es «más contenido de la ficha»: es un texto que alguien va a
   leer durante diez minutos. Así que aquí manda una cosa y sólo una: que se lea
   sin esfuerzo. Tres decisiones y ninguna es decorativa:
     · MEDIDA de 34em, unos 65-70 caracteres por línea. Más ancho y el ojo
       pierde el renglón al volver; es el error clásico de leer en pantalla.
     · CUERPO de 1.1875rem (19px) y line-height 1.75, con control A+/A− para que
       cada quien lo ajuste a su vista. El tamaño sale de --lector-escala.
     · TINTA. El cuerpo va en --tinta (15.3:1, AAA de sobra) y no en --grafito:
       es el único sitio del sitio donde el texto ES el contenido.
   El tono se mantiene: papel, filete, sombra dura, el sello como estampilla y la
   tinta del sello en el filete de los títulos y en la barra de progreso. */
.mesa-modal--lector .caja{ max-width:46rem; max-height:92vh; overflow:hidden; display:flex; flex-direction:column; }
.mesa-modal--lector .caja-cab{ align-items:center; }
.lector-rotulo{ display:flex; align-items:baseline; gap:0.75rem; flex-wrap:wrap; min-width:0; }
.lector-stamp{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--acc-texto,var(--tinta-texto,var(--tinta))); border:0.0625rem solid currentColor; padding:0.1rem 0.45rem; }
.lector-dato{ font-family:var(--mono); font-size:0.8125rem; color:var(--gris); }
.lector-controles{ display:flex; align-items:center; gap:0.4rem; flex:0 0 auto; }
.lector-controles button{ font-family:var(--mono); font-size:0.8125rem; line-height:1; padding:0.45rem 0.6rem; background:none; border:0.0625rem solid var(--filete); color:var(--tinta); cursor:pointer; }
.lector-controles button:hover:not([disabled]){ border-color:var(--tinta); }
.lector-controles button[disabled]{ opacity:.35; cursor:default; }
.mesa-modal--lector .cuerpo{ padding:0; overflow-y:auto; flex:1 1 auto; background:var(--papel); }

.lector{ max-width:34em; margin:0 auto; padding:2.5rem 1.625rem 2rem;
  font-family:var(--body); font-size:calc(1.1875rem * var(--lector-escala,1));
  line-height:1.75; color:var(--tinta);
  hyphens:auto; -webkit-hyphens:auto; text-wrap:pretty;
  font-variant-numeric:oldstyle-nums; }
.lector p{ margin:0 0 1.05em; }
.lector > :first-child{ margin-top:0; }
.lector h1, .lector h2, .lector h3, .lector h4{ font-family:var(--display); text-transform:uppercase;
  font-size:1.1875em; line-height:1.22; margin:2.2em 0 1.1em; padding-bottom:0.45em;
  border-bottom:0.125rem solid var(--acc-texto,var(--tinta-texto,var(--tinta))); }
.lector em, .lector i{ font-style:italic; }
.lector blockquote{ margin:1.5em 0; padding-left:1.25em; border-left:0.1875rem solid var(--filete); font-style:italic; }
.lector ul, .lector ol{ margin:0 0 1.05em 1.25em; }
.lector li{ margin-bottom:0.4em; }
.lector-final{ max-width:34em; margin:0 auto; padding:2rem 1.625rem 2.75rem; border-top:0.0625rem solid var(--filete); }
.lector-final-tit{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.25rem,3vw,1.625rem); line-height:1.15; margin:0 0 0.35rem; }
.lector-final-sub{ font-family:var(--body); font-size:1rem; color:var(--gris); margin:0 0 1.25rem; }
.lector-progreso{ flex:0 0 auto; height:0.3rem; background:var(--papel-2); }
.lector-progreso i{ display:block; height:100%; width:0; background:var(--acc-texto,var(--tinta-texto,var(--tinta))); }
.form-envio label{ display:block; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); margin:1.125rem 0 0.375rem; }
.form-envio input, .form-envio select{ width:100%; background:var(--papel-tarjeta); border:0.0625rem solid var(--filete); padding:0.75rem; font-family:var(--body); font-size:0.9688rem; color:var(--tinta); }
.form-envio .fila{ display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.form-envio .resumen{ margin-top:1rem; border-top:0.0625rem solid var(--filete); padding-top:1rem; font-family:var(--mono); font-size:0.8125rem; }
.form-envio .resumen div{ display:flex; justify-content:space-between; margin-bottom:0.5rem; }
.form-envio .resumen .total{ font-size:0.9375rem; }
@media (max-width:60em){
  .libro-ficha{ padding:6rem 1.375rem 2.5rem; }
  .libro-ficha .grid{ grid-template-columns:1fr; gap:2.25rem; }
  /* Los dos grupos del selector de compra (formato y mercado) se apilan, y dentro
     de cada uno los botones también. Con este cuerpo y su letter-spacing, «Copia
     física» mide unos 200 px: dos botones lado a lado no caben en una tarjeta de
     261 y el texto se partía en dos líneas, descuadrando el botón contra
     «Digital». Apilados, cada uno va a ancho completo y se lee en una línea. */
  .compra-controles{ flex-direction:column; gap:0.625rem; }
  .compra-seg{ flex-direction:column; }
  .compra-seg label{ text-align:center; border-right:0; border-bottom:0.0625rem solid var(--filete); }
  /* [hidden] ya se resuelve más arriba con display:none, así que el borde de más
     sólo aparece en el grupo que se ve. */
  .compra-seg label:last-of-type{ border-bottom:0; }
  /* En angosto no hay banda libre sobre la rejilla: apretadas contra el bloque,
     las anotaciones dejarían de leerse como notas de margen y chocarían con la
     barra lateral. Se ocultan. */
  .meta-margen{ display:none; }
  .libro-bloque{ padding:3.25rem 1.375rem; }
  .autor-ficha{ flex-direction:column; gap:1.375rem; }
  .form-envio .fila{ grid-template-columns:1fr; }
}


/* ============ ESTADOS DE COMPRA Y ERRORES ============ */
.estado{ border:0.125rem solid var(--tinta); background:var(--papel-tarjeta); padding:2.75rem 2.5rem; max-width:41.25rem; box-shadow:0.375rem 0.375rem 0 var(--tinta); transform:rotate(-.4deg); }
.estado--ok{ border-color:#2f7d32; box-shadow:0.375rem 0.375rem 0 #2f7d32; }
.estado--pend{ border-color:#b58900; box-shadow:0.375rem 0.375rem 0 #b58900; }
.estado--err{ border-color:var(--bermellon); box-shadow:0.375rem 0.375rem 0 var(--bermellon); }
.estado .marca-estado{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.22em; text-transform:uppercase; display:block; margin-bottom:1rem; color:var(--gris); }
.estado h1{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.75rem,3.4vw,3.25rem); line-height:.92; margin-bottom:1rem; }
.estado p{ font-family:var(--body); font-size:1.0313rem; line-height:1.7; color:var(--grafito); margin-bottom:0.75rem; max-width:56ch; }
.estado .acciones{ margin-top:1.75rem; display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center; }
.estado .codigo{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.1em; color:var(--gris); }
.estado ol, .estado ul{ margin:0.75rem 0 0 1.25rem; }
.estado li{ font-family:var(--body); font-size:1rem; line-height:1.65; color:var(--grafito); margin-bottom:0.375rem; }
.gran-error{ font-family:var(--display); font-size:clamp(5rem,16vw,13.75rem); line-height:.8; letter-spacing:-.02em; margin-bottom:0.625rem; }

/* ── Banderas de los canales de venta (SVG en config/banderas.php) ──────────
   Se dibujan en SVG porque los emoji de bandera no se renderizan en Windows. */
.banderas{ display:inline-flex; align-items:center; gap:0.1875rem; margin-right:0.4375rem; vertical-align:middle; }
.bandera{ display:block; width:1.0625rem; height:0.6875rem; border-radius:0.125rem; box-shadow:0 0 0 0.0625rem rgba(20,18,16,.3); }
.ed-badge .banderas{ margin-right:0.5rem; }

/* ── Precio en las tarjetas del catálogo ───────────────────────────────────
   El precio se muestra SIEMPRE (antes solo aparecía al abrir la ficha) y el
   overlay de la reseña, que era exclusivo de :hover, ahora también responde al
   teclado y en pantallas táctiles deja un acceso visible a la ficha. */
.cap-precio{ display:block; margin-top:0.4375rem; padding-top:0.375rem; border-top:0.0625rem solid currentColor; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.1em; }
.cap-precio small{ font-size:0.8125rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
/* El color NO puede ser fijo: los sellos de material oscuro (Asimov y Alicanto)
   pintan el bloque en #0d0b0f, así que un precio en tinta oscura desaparecía.
   Se sigue el mismo criterio que el resto del bloque. */
.m-oscura .cap-precio{ color:rgba(239,232,219,.92); }
.m-clara  .cap-precio{ color:rgba(20,18,16,.88); }
.m-dist   .cap-precio{ color:rgba(239,232,219,.92); }
.m-hist   .cap-precio{ color:rgba(20,18,16,.88); }

/* Vista de rejilla: la tarjeta siempre es clara. */
.tc-precio{ color:var(--tinta); }
.tc-precio{ font-family:var(--display); font-size:clamp(1.0625rem,1.6vw,1.375rem); line-height:1.1; margin:0.375rem 0 0.625rem; color:var(--tinta); }
.tc-precio small{ font-family:var(--mono); font-size:0.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }

.libro-a:focus-within .libro-over,
.tarjeta-cat:focus-within .libro-over{ opacity:1; transform:none; }

@media (hover:none){
  /* Sin ratón, el overlay completo taparía la portada: se deja solo el acceso. */
  .libro-over{ inset:auto 0 0 0; padding:0.5rem; gap:0; opacity:1; transform:none; background:rgba(251,247,238,.92); border-top:0.0625rem solid var(--filete); }
  .libro-over .over-stars, .libro-over .over-quote{ display:none; }
}

/* ── Banner de consentimiento de cookies ─────────────────────────────────
   Se sirve con [hidden] y sólo lo enseña consentimiento.js. El [hidden]
   repetido es necesario: display:flex gana al display:none del navegador. */
.banner-cookies{ position:fixed; left:1.125rem; right:1.125rem; bottom:1.125rem; z-index:90; margin:0 auto; max-width:65rem; max-height:calc(100dvh - 2.25rem); overflow-y:auto; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap; padding:1.125rem 1.375rem; background:var(--papel-tarjeta); color:var(--tinta); border:0.0625rem solid var(--tinta); box-shadow:0 1.125rem 2.75rem rgba(20,18,16,.22); }
.banner-cookies[hidden]{ display:none; }
/* El aviso va FIJO abajo. Reservarle su altura al pie del documento evita que
   tape el FINAL del documento (el colofón), pero NO evita que cubra la franja
   inferior del viewport mientras se navega: eso es inherente a estar anclado
   abajo, y se midió. Para que no se coma el botón de compra lo que manda es la
   media query del final del archivo. */
body.con-banner-cookies{ padding-bottom:calc(var(--alto-banner, 0) + 1.875rem); }
.banner-cookies .bc-tit{ margin:0 0 0.375rem; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); }
.banner-cookies p{ margin:0; max-width:64ch; font-size:0.8438rem; line-height:1.6; color:var(--grafito); }
.banner-cookies a{ color:var(--tinta); border-bottom:0.0625rem solid var(--tinta); }
.bc-acciones{ display:flex; gap:0.625rem; flex:0 0 auto; }
.bc-btn{ padding:0.6875rem 1.25rem; border:0.0625rem solid var(--tinta); background:transparent; color:var(--tinta); font-family:var(--mono); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.bc-btn--si{ background:var(--tinta); color:var(--papel-tarjeta); }
.bc-btn:hover{ background:var(--lapiz); border-color:var(--lapiz); color:var(--papel-tarjeta); }
.legal-btn{ padding:0; border:0; border-bottom:0.0625rem solid var(--filete); background:none; color:var(--gris); font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.legal-btn:hover{ color:var(--tinta); border-color:var(--tinta); }
@media (max-width:40em){
  .banner-cookies{ left:0.625rem; right:0.625rem; bottom:0.625rem; padding:1rem; }
  .bc-acciones{ width:100%; }
  .bc-btn{ flex:1; }
}

/* ── Aviso de cookies en ventanas BAJAS: se ancla arriba ──────────────────
   Anclado abajo se comía el precio y el botón de compra. Medido a 1280x720: el
   aviso ocupaba de y=556 a y=702 y «Elegir dedicatoria y comprar» caía ENTERO
   dentro (y=582-622), igual que el precio (y=518-568). Ninguna reserva de
   espacio arregla eso, porque un elemento fijo abajo siempre cubre la franja
   inferior del viewport.

   A partir de 800px de alto el aviso se ancla ARRIBA: tapa la cabecera (logo y
   navegación) en vez de la compra, que es lo que no se puede permitir. NO se
   reserva espacio arriba a propósito: reservarlo empujaría el botón de compra
   fuera de la pantalla, que es justo lo que se está arreglando.

   Va al FINAL del archivo para ganar a la media query de 640px, que si no
   devolvería el aviso abajo en los móviles (donde también molestaba). */
@media (max-height:50em){
  .banner-cookies{ top:1.125rem; bottom:auto; }
  body.con-banner-cookies{ padding-bottom:0; }
}

/* ── Titulares de display en pantallas estrechas ──────────────────────────
   Los .megatit usan clamp() con un suelo pensado para escritorio (2.375rem a
   3.25rem). En un móvil de 360px ese suelo es MÁS ANCHO que la columna: medido
   en la portada, «ELIGE TU VENENO» ocupaba 186px dentro de una caja de 161px, o
   sea 25px fuera. Se baja el suelo y se permite partir palabras largas como red
   de seguridad, para que ningún titular pueda desbordar por muy largo que sea
   el texto que se escriba en el panel.
   Va al final del archivo y repite los selectores específicos porque
   «.z-packs .megatit» gana a «.megatit» por especificidad, no por orden. */
@media (max-width:60em){
  .z-packs .megatit, .z-catalogo .megatit, .z-series .megatit, .z-atman .megatit,
  .mitad .megatit, .m-hist .megatit, .m-clara .megatit, .megatit{
    font-size:clamp(1.75rem,5vw,5.75rem);
    overflow-wrap:anywhere;
  }
}