/* AMIGA LECTORA v7 (v6 + estilo pegatina, al final) — papel, lila, frambuesa, rosa y menta.
   Reglas de la casa: en modo papel ninguna superficie grande oscura (lo oscuro vive en html.oscuro); texto de lectura ≥ 7:1;
   saturados medios solo en piezas pequeñas sin texto; titulares Literata 600; sin degradados, sin blur, sin emojis.
   Los libros son objetos (.tapa: lomo + sombra). Cada ficha se tiñe con el matiz de su portada (--h, de build.py).
   Todo movimiento respeta prefers-reduced-motion. */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/literata-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/literata-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/literata-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/literata-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --papel:#FBF7F3; --papel-2:#F3ECE5; --sup:#FFFFFF;
  --tinta:#1F1519; --t2:#4F4248; --t3:#6E6066;
  --linea:#ECE3DC; --linea-2:#DCCFC7; --div:rgba(31,21,25,.14);
  --frambuesa:#8E1B4B; --frambuesa-2:#6F1239; --frambuesa-txt:#8E1B4B; --sobre-frambuesa:#FBF7F3;
  --lila:#EAE3FC; --lila-2:#D6CAF7; --lila-txt:#4A3889; --violeta:#5A3D8A;
  --rosa:#FFE4EC; --rosa-2:#FFCADB; --cinta:#FF4D8D;
  --menta:#D2F1E5; --menta-2:#A9E3CD; --menta-txt:#0B4A3A;
  --cielo:#DDEAFB; --melocoton:#FDE4D6;
  --guindilla:#D93A2B; --chili-off:#DCCFD2; --repisa:#EADFD6;
  --tinte-l:94.5%; --tinte-c:.034;
  --serif:'Literata',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --suave:cubic-bezier(.2,.8,.2,1);
  --sombra-libro:0 1px 1px rgba(60,20,35,.10),0 8px 14px -6px rgba(60,20,35,.24),0 24px 40px -20px rgba(60,20,35,.40);
  --sombra-libro-alta:0 2px 2px rgba(60,20,35,.10),0 18px 26px -10px rgba(60,20,35,.30),0 44px 64px -26px rgba(60,20,35,.46);
  --sombra-caja:0 1px 2px rgba(60,20,35,.06),0 14px 36px -14px rgba(60,20,35,.20);
  --velo:rgba(31,21,25,.42);
  --wrap:1280px;
  color-scheme:light;
}
html.oscuro{
  --papel:#16111A; --papel-2:#201925; --sup:#241C29;
  --tinta:#F4EEF1; --t2:#CFC3CA; --t3:#AA9DA4;
  --linea:#33293A; --linea-2:#4A3E52; --div:rgba(244,238,241,.16);
  --frambuesa:#FF94B9; --frambuesa-2:#FFB6CF; --frambuesa-txt:#FF9EC0; --sobre-frambuesa:#1F1519;
  --lila:#282042; --lila-2:#3B3060; --lila-txt:#CDBFFF; --violeta:#8E76D6;
  --rosa:#36202C; --rosa-2:#4E2B3C;
  --menta:#16392F; --menta-2:#1F5244; --menta-txt:#8DE6C7;
  --cielo:#1B2A3E; --melocoton:#3A271E;
  --guindilla:#FF6B57; --chili-off:#4F4352; --repisa:#2E2533;
  --tinte-l:24%; --tinte-c:.045;
  --sombra-libro:0 1px 1px rgba(0,0,0,.35),0 8px 14px -6px rgba(0,0,0,.55),0 24px 40px -20px rgba(0,0,0,.75);
  --sombra-libro-alta:0 2px 2px rgba(0,0,0,.35),0 18px 26px -10px rgba(0,0,0,.6),0 44px 64px -26px rgba(0,0,0,.8);
  --sombra-caja:0 14px 36px -14px rgba(0,0,0,.65);
  --velo:rgba(0,0,0,.62);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.012em;margin:0;color:var(--tinta)}
h1 em,h2 em{font-style:italic;font-weight:600;color:var(--frambuesa-txt)}
p{margin:0}
[hidden]{display:none!important}
::selection{background:var(--rosa-2);color:var(--tinta)}
:focus-visible{outline:2.5px solid var(--frambuesa);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 48px}
.oculto{display:none!important}
.num{font-variant-numeric:tabular-nums}
.etq{display:block;font:600 15px/1.3 var(--sans);color:var(--frambuesa-txt);margin:0 0 14px;letter-spacing:0}
.sec{padding:120px 0}
.sec:not(.escala-sec)+.sec:not(.escala-sec){padding-top:0}   /* dos secciones lisas seguidas no suman sus dos paddings: el hueco entre ellas es siempre uno (120, 72 en móvil); la escala lleva el suyo dentro de la mancha */
.sec-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px}
.sec-cab h2{font-size:52px;max-width:18ch}
.ver,.enlace-flecha{display:inline-flex;align-items:center;gap:8px;font:600 16px/1.3 var(--sans);color:var(--frambuesa-txt);white-space:nowrap}
.ver svg,.enlace-flecha svg{width:18px;height:18px;flex:none;transition:transform .2s var(--suave)}
.ver:hover svg,.enlace-flecha:hover svg{transform:translateX(4px)}
.ver:hover,.enlace-flecha:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
img.claro{display:none} html.oscuro img.claro{display:block} html.oscuro img.oscuro{display:none}
.tinte{background:oklch(var(--tinte-l) var(--tinte-c) var(--h,355))}

/* ---------- botones, chips, guindillas, estrellas ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--sans);white-space:nowrap;border:1.5px solid var(--linea-2);background:var(--sup);color:var(--tinta);transition:transform .15s var(--suave),background .15s,border-color .15s,box-shadow .15s,color .15s}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{border-color:var(--tinta);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn small{font-weight:500;font-size:13px;opacity:.85}
.btn-l{height:54px;padding:0 28px;font-size:16px}
.btn-s{height:38px;padding:0 16px;font-size:14px}
.btn-rosa{background:var(--frambuesa);border-color:var(--frambuesa);color:var(--sobre-frambuesa)}
.btn-rosa:hover{background:var(--frambuesa-2);border-color:var(--frambuesa-2)}
.btn-menta{background:var(--menta);border-color:var(--menta-2);color:var(--menta-txt)}
.btn-menta:hover{border-color:var(--menta-txt)}
.btn-borde{background:transparent}
.btn-ico{width:46px;padding:0}.btn-l.btn-ico{width:54px}
.btn-duro{box-shadow:var(--sombra-peg)}
.btn-duro:hover{transform:translate(-2px,-2px);box-shadow:var(--sombra-peg)}
.btn-duro:active{transform:translate(2px,2px);box-shadow:var(--sombra-peg)}
[data-guardar].si svg{fill:currentColor}
.latido{animation:latido .4s var(--suave)}
.chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:999px;border:1.5px solid var(--linea-2);background:var(--sup);font:500 15px/1 var(--sans);color:var(--tinta);white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.chip small{font-size:13px;color:var(--t3);font-weight:500}
.chip:hover{border-color:var(--tinta)}
.chip.activo{background:var(--lila);border-color:var(--lila-txt);color:var(--lila-txt)}
.chip.activo small{color:var(--lila-txt)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.spice{display:inline-flex;align-items:center;gap:1px;vertical-align:middle;flex:none}
.chili{width:16px;height:16px;fill:var(--guindilla);flex:none}
.chili.off{fill:var(--chili-off)}
.spice.grande .chili{width:24px;height:24px}
.nivel{margin-left:8px;font-size:14px;color:var(--t2);vertical-align:middle}
.nota{display:inline-flex;align-items:center;gap:4px;font:700 15px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--tinta);white-space:nowrap}
.estrella{width:15px;height:15px;fill:var(--frambuesa);flex:none}
.estrellas{position:relative;display:inline-block}
.estrellas>span{display:flex;gap:2px}
.estrellas svg{width:18px;height:18px;flex:none}
.estrellas .e-fondo svg{fill:var(--chili-off)}
.estrellas .e-lleno{position:absolute;top:0;left:0;bottom:0;overflow:hidden}
.estrellas .e-lleno svg{fill:var(--frambuesa)}

/* ---------- el libro como objeto ---------- */
.tapa{position:relative;display:block;border-radius:2px 7px 7px 2px;background:var(--papel-2);box-shadow:var(--sombra-libro);transition:transform .35s var(--suave),box-shadow .35s var(--suave)}
.tapa img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:inherit}
.tapa::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 2px 0 0 rgba(255,255,255,.30),inset 5px 0 0 rgba(0,0,0,.10),inset 7px 0 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(0,0,0,.08)}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:40;background:var(--papel);border-bottom:1px solid transparent;transition:border-color .2s}
.cab.sombra{border-bottom-color:var(--linea-2)}
.cab .wrap{display:flex;align-items:center;gap:40px;height:80px}
.logo{display:block;flex:none}
.logo img{height:48px;width:auto}
.menu{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:11px 16px;border-radius:999px;font:500 16px/1 var(--sans);color:var(--t2);transition:background .15s,color .15s}
.menu a:hover{color:var(--tinta);background:var(--papel-2)}
.menu a.activo{color:var(--frambuesa-txt);background:var(--rosa);font-weight:600}
.cab-acciones{margin-left:auto;display:flex;align-items:center;gap:8px}
.buscar-btn{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 16px;border-radius:999px;border:1.5px solid var(--linea-2);background:var(--sup);color:var(--t2);font-size:15px;min-width:210px;transition:border-color .15s}
.buscar-btn:hover{border-color:var(--tinta)}
.buscar-btn svg{width:18px;height:18px;flex:none}
.buscar-btn kbd{margin-left:auto}
kbd{font:500 12px/1 var(--sans);padding:4px 6px;border-radius:6px;border:1px solid var(--linea-2);color:var(--t3);background:var(--papel)}
.estante-btn{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--menta);color:var(--menta-txt);font:600 15px/1 var(--sans);border:1.5px solid var(--menta-2);transition:border-color .15s}
.estante-btn:hover{border-color:var(--menta-txt)}
.estante-btn svg{width:18px;height:18px;flex:none}
.estante-btn.lleno svg{fill:currentColor}
.estante-btn b{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--frambuesa);color:var(--sobre-frambuesa);font:700 12px/22px var(--sans);text-align:center}
.estante-btn b.salto{animation:salto .5s var(--suave)}
.btn-tema,.btn-burger{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--linea-2);background:var(--sup);transition:border-color .15s}
.btn-tema:hover,.btn-burger:hover{border-color:var(--tinta)}
.btn-tema svg,.btn-burger svg{width:19px;height:19px}
.btn-tema .sol{display:none} html.oscuro .btn-tema .sol{display:block} html.oscuro .btn-tema .luna{display:none}
.btn-burger{display:none}
.menu-movil{position:fixed;inset:80px 0 0;z-index:39;background:var(--papel);padding:12px 24px 48px;overflow:auto;display:none;flex-direction:column}
.menu-movil.abierto{display:flex}
.menu-movil a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--linea);font:600 22px/1.2 var(--serif)}
.menu-movil small{font:500 14px var(--sans);color:var(--t3)}
.menu-movil .grupo{margin-top:28px;font:600 14px var(--sans);color:var(--frambuesa-txt)}

/* ---------- buscador ⌘K y aviso ---------- */
.paleta{position:fixed;inset:0;z-index:60;background:var(--velo);display:none;padding:12vh 16px 0}
.paleta.abierta{display:block;animation:fundido .15s ease-out}
.paleta-caja{max-width:640px;margin:0 auto;background:var(--sup);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(31,21,25,.5)}
.paleta-input{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--linea)}
.paleta-input svg{width:20px;height:20px;color:var(--t2);flex:none}
.paleta-input input{flex:1;border:0;background:none;padding:0;font-size:18px;outline:0}
.paleta-lista{max-height:52vh;overflow:auto;padding:8px}
.paleta-item{display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:center;padding:10px 12px;border-radius:14px}
.paleta-item img{width:36px;height:54px;object-fit:cover;border-radius:2px 4px 4px 2px;box-shadow:var(--sombra-libro)}
.paleta-item.activo,.paleta-item:hover{background:var(--lila)}
.pi-t{font:600 16px/1.3 var(--sans)}
.pi-s{font-size:14px;color:var(--t2)}
.pi-g{font-size:13px;color:var(--t3)}
.paleta-vacio{padding:24px 16px;color:var(--t2)}
.paleta-vacio a{color:var(--frambuesa-txt);font-weight:600}
.paleta-pie{display:flex;gap:18px;padding:12px 22px;font-size:13px;color:var(--t3);border-top:1px solid var(--linea)}
.toast{position:fixed;left:50%;bottom:28px;z-index:70;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--sup);color:var(--tinta);border:1.5px solid var(--frambuesa);box-shadow:var(--sombra-peg);padding:14px 20px;border-radius:14px;font:500 15px/1.4 var(--sans);transition:opacity .2s,transform .2s var(--suave);max-width:calc(100vw - 32px)}
.toast.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:var(--frambuesa-txt);font-weight:700;text-decoration:underline}

/* ---------- portada · 1 · hero con el juego ---------- */
.hero{padding:36px 0 64px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.hero h1{font-size:84px;line-height:1.06;letter-spacing:-.015em;margin:0 0 28px}
.hero h1 span{display:block;animation:sube .6s var(--suave) backwards}
.hero h1 span:nth-child(2){animation-delay:.07s}.hero h1 span:nth-child(3){animation-delay:.14s}.hero h1 span:nth-child(4){animation-delay:.21s}
.promesa{font:500 20px/1.55 var(--sans);color:var(--t2);max-width:38ch;margin-bottom:32px}
.hero-cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cifras-mini{display:flex;gap:36px;list-style:none;margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--linea-2)}
.cifras-mini li{font-size:14px;color:var(--t2);line-height:1.35;max-width:14ch}
.cifras-mini b{display:block;font:600 30px/1.1 var(--serif);color:var(--tinta);margin-bottom:4px}
.hero-juego{position:relative;padding:40px 0}
.hero-juego .bloque{position:absolute;left:0;right:-50vw;top:0;bottom:0;background:var(--lila);border-radius:36px 0 0 36px}
.juego{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.juego-fila{position:relative;display:flex;align-items:center;gap:32px}
.mazo{--pie:64px;position:relative;width:272px;height:472px;perspective:1200px;touch-action:pan-y;animation:entra-mazo .7s var(--suave) .1s backwards}
.mazo .carta{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:var(--sup);color:var(--tinta);box-shadow:0 30px 60px -20px rgba(60,20,35,.5),0 4px 10px rgba(60,20,35,.15);transition:transform .35s var(--suave),opacity .35s;will-change:transform;transform-origin:50% 100%;user-select:none;-webkit-user-drag:none;cursor:grab}
.mazo .carta img{position:absolute;left:0;top:0;width:100%;height:calc(100% - var(--pie));object-fit:cover;pointer-events:none}
.mazo .carta a{display:block;position:relative;height:100%;color:inherit}
.mazo .carta .pie{position:absolute;left:0;right:0;bottom:0;height:var(--pie);padding:11px 18px;background:var(--sup);border-top:2px solid var(--frambuesa)}
.mazo .carta .pie b{display:block;font:700 16px/1.4 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mazo .carta .pie span{display:block;font-size:14px;line-height:1.4;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mazo .carta:nth-last-child(2){transform:rotate(-8deg) translateY(10px);animation:abre .5s var(--suave) .45s backwards}
.mazo .carta:nth-last-child(3){transform:rotate(8deg) translateY(10px);animation:abre .5s var(--suave) .45s backwards}
.mazo .carta:nth-last-child(n+4){opacity:0;pointer-events:none}
.mazo .carta:nth-last-child(n+5){display:none}   /* sin caja no se descargan (loading=lazy): solo queda lista la siguiente */
.mazo .carta.inclina{transition:transform .12s ease-out}
.mazo .carta.arrastrando{transition:none;cursor:grabbing;z-index:2}
.mazo .carta.fuera-izq{transform:translateX(-160%) rotate(-18deg)!important;opacity:0}
.mazo .carta.fuera-der{transform:translateX(160%) rotate(18deg)!important;opacity:0}
.juego-fila:has(.paso:hover) .mazo .carta:last-child:not(.arrastrando){transform:rotate(-4deg)}
.juego-fila:has(.loleo:hover) .mazo .carta:last-child:not(.arrastrando){transform:rotate(4deg)}
.rotulo{position:absolute;top:28px;padding:8px 14px;border:2.5px solid;border-radius:10px;font:800 22px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .12s;background:var(--sup)}
.rotulo.loleo{left:18px;color:var(--menta-txt);transform:rotate(-12deg)}
.rotulo.paso{right:18px;color:var(--frambuesa-txt);transform:rotate(12deg)}
.mazo .fin{position:absolute;inset:0;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;text-align:center;padding:32px;border-radius:14px;background:var(--sup);font:500 20px/1.4 var(--serif);box-shadow:var(--sombra-caja)}
.mazo .fin b{color:var(--menta-txt)}
.boton-juego{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--tinta);animation:bota-in .45s var(--suave) .8s backwards}
.boton-juego .circulo{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sup);border:2px solid var(--violeta);box-shadow:var(--sombra-peg);transition:transform .15s var(--suave),background .15s,box-shadow .15s}
.boton-juego .circulo svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.boton-juego .nombre{font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.boton-juego.loleo .circulo{background:var(--menta);color:var(--menta-txt)}
.boton-juego:hover .circulo{transform:scale(1.06)}
.boton-juego:active .circulo{transform:translate(3px,3px);box-shadow:var(--sombra-peg)}
.boton-juego.paso:hover .circulo,.boton-juego.paso.activo .circulo{background:var(--rosa);color:var(--frambuesa-txt)}
.boton-juego.loleo:hover .circulo,.boton-juego.loleo.activo .circulo{background:var(--menta-2)}
.peg{position:absolute;z-index:3;background:var(--sup);border:1.5px solid var(--frambuesa);border-radius:10px;padding:14px 16px;box-shadow:var(--sombra-peg);animation:bota-in .45s var(--suave) .9s backwards}
.peg::before{content:"";position:absolute;left:50%;top:-9px;width:52px;height:14px;background:var(--cinta);transform:translateX(-50%) rotate(-5deg);border-radius:2px;opacity:.85}
.peg i{display:block;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--t2);margin-bottom:6px}
.peg b{display:block;font:600 30px/1.1 var(--serif);color:var(--tinta)}
.peg .chili{width:20px;height:20px}
.peg.bota{animation:bota .3s var(--suave)}
.peg-nota{left:calc(50% + 150px);top:0;rotate:3deg}
.peg-spice{right:calc(50% + 150px);bottom:0;rotate:-3deg}
.resultado-juego{width:380px;margin:24px auto 0;padding:16px 20px;background:var(--sup);border:1.5px solid var(--frambuesa);border-radius:12px;box-shadow:var(--sombra-peg);animation:bota-in .45s var(--suave) 1s backwards}
.gustos-cab{display:flex;justify-content:space-between;align-items:center;gap:16px}
.gustos-cab .etq{margin:0;font-size:14px}
.gustos-cab .cuenta{font-size:14px;color:var(--t2);white-space:nowrap}
.gustos-cab .cuenta b{color:var(--frambuesa-txt)}
.gustos .lectura{font:500 19px/1.4 var(--serif);margin-top:4px;min-height:1.4em}
.gustos .lectura b{color:var(--frambuesa-txt);font-weight:600}
.gustos .lectura i{font-style:normal;color:var(--t3);margin:0 6px}
.gustos .lectura.cambia{animation:aparece .4s var(--suave)}
.pasos ol{list-style:none;margin:0;padding:28px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--linea-2);border-bottom:1px solid var(--linea-2)}
.pasos li{display:flex;gap:16px;align-items:center;font-size:16px;line-height:1.45;color:var(--t2)}
.pasos li b{flex:none;width:44px;height:44px;border-radius:50%;background:var(--lila);color:var(--lila-txt);display:flex;align-items:center;justify-content:center;font:600 20px/1 var(--serif)}
.pasos strong{color:var(--tinta)}

/* ---------- portada · 2 · lo último que he cerrado ---------- */
.destacado{padding:96px 0 72px;margin-top:120px}
.destacado>.wrap:first-child{display:grid;grid-template-columns:420px 1fr;gap:88px;align-items:center}
.destacado-libro{display:block;perspective:1200px}
.destacado-libro .tapa{max-width:340px;margin:0 auto;box-shadow:var(--sombra-libro-alta);rotate:-3deg}
.destacado-libro:hover .tapa{rotate:0deg;translate:0 -6px}
.destacado h2{font-size:50px;line-height:1.08;margin-bottom:14px;max-width:20ch}
.destacado h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.libro-de{font-size:18px;color:var(--t2);margin-bottom:32px}
.libro-de em,.libro-de b{color:var(--tinta)}
.frase{font:italic 500 22px/1.5 var(--serif);color:var(--tinta);margin:32px 0;padding-left:22px;border-left:3px solid var(--frambuesa);max-width:46ch}
.para-quien{font-size:16px;line-height:1.6;color:var(--t2);margin:-8px 0 32px;max-width:62ch}
.para-quien b{color:var(--tinta)}
.acciones{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.antes{display:flex;align-items:center;gap:32px;margin-top:72px;padding-top:28px;border-top:1px solid var(--div)}
.antes-etq{font:600 15px var(--sans);color:var(--t2);flex:none}
.antes a{display:flex;gap:16px;align-items:center;flex:1;min-width:0}
.antes .tapa{width:54px;flex:none}
.antes a:hover .tapa{translate:0 -4px;rotate:-2deg}
.antes b{display:block;font:600 17px/1.3 var(--serif);margin-bottom:4px}
.antes a:hover b{color:var(--frambuesa-txt)}
.antes small{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--t2)}
.antes small .nota{font-size:14px}
.marcador{display:flex;flex-wrap:wrap;margin:0;gap:20px 0}
.marcador>div{padding:0 28px;border-left:1px solid var(--div)}
.marcador>div:first-child{padding-left:0;border-left:0}
.marcador dt{font:600 14px/1.3 var(--sans);color:var(--t2);margin-bottom:10px}
.marcador dd{margin:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.m-num{font:600 38px/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--tinta)}
.m-num small{font-size:18px;color:var(--t3);margin-left:2px;font-weight:500}
.m-txt{font:600 26px/1.1 var(--serif)}
.m-sub{font-size:14px;line-height:1.35;color:var(--t2);max-width:17ch}
.m-sub:empty{display:none}

/* ---------- portada · 3 · ¿qué te pide el cuerpo? ---------- */
.moods-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mood{--c:var(--lila);position:relative;display:flex;flex-direction:column;min-height:340px;padding:28px 30px;border-radius:28px;overflow:hidden;background:var(--c);transition:transform .3s var(--suave),box-shadow .3s}
.mood:nth-child(1){--c:var(--lila)}.mood:nth-child(2){--c:var(--cielo)}.mood:nth-child(3){--c:var(--melocoton)}
.mood:nth-child(4){--c:var(--lila-2)}.mood:nth-child(5){--c:var(--menta)}.mood:nth-child(6){--c:var(--rosa)}
.mood:hover{transform:translateY(-4px);box-shadow:var(--sombra-caja)}
.mood-n{font:600 14px var(--sans);color:var(--t2);position:relative;z-index:1}
.mood h3{font-size:38px;margin:auto 0 8px;position:relative;z-index:1}
.mood p{font-size:16px;line-height:1.45;color:var(--t2);max-width:30ch;position:relative;z-index:1}
.abanico{position:absolute;top:30px;right:26px;width:196px;height:170px;pointer-events:none}
.abanico .tapa{position:absolute;top:0;width:90px;transition:transform .4s var(--suave);transform-origin:50% 100%}
.abanico .tapa:nth-child(1){right:96px;transform:rotate(-12deg) translateY(16px)}
.abanico .tapa:nth-child(2){right:52px;transform:rotate(-1deg);z-index:1}
.abanico .tapa:nth-child(3){right:8px;transform:rotate(11deg) translateY(16px);z-index:2}
.mood:hover .abanico .tapa:nth-child(1){transform:rotate(-18deg) translate(-12px,8px)}
.mood:hover .abanico .tapa:nth-child(2){transform:rotate(-2deg) translateY(-10px)}
.mood:hover .abanico .tapa:nth-child(3){transform:rotate(17deg) translate(12px,8px)}

/* ---------- portada · 4 · estanterías ---------- */
.estantes-rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:72px}   /* una repisa por fila: a media columna no caben ni 4 tapas */
.estante-cab{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;margin-bottom:8px}
.estante-cab h3{font-size:34px;display:flex;align-items:baseline;gap:10px}
.estante-cab h3 a:hover{color:var(--frambuesa-txt)}
.estante-cab h3 small{font:600 15px var(--sans);color:var(--t3)}
.estante-cab p{color:var(--t2);font-size:16px}
.flechas{display:flex;gap:8px}
.flechas button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--linea-2);background:var(--sup);display:flex;align-items:center;justify-content:center;transition:border-color .15s,opacity .15s}
.flechas button:hover:not(:disabled){border-color:var(--tinta)}
.flechas button:disabled{opacity:.35;cursor:default}
.flechas svg{width:20px;height:20px}
.repisa{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:28px 0 4px;margin:0 -14px}
.repisa::-webkit-scrollbar{display:none}
.pz{position:relative;flex:none;scroll-snap-align:start;padding:0 14px;display:flex;flex-direction:column;align-items:center}
.pz .tapa{width:150px;z-index:1;transform-origin:50% 100%}
.pz::before{content:"";position:absolute;left:0;right:0;top:calc(150px * 1.5 - 2px);height:14px;background:var(--repisa);box-shadow:0 14px 18px -14px rgba(60,20,35,.45)}
.pz:hover .tapa{transform:translateY(-12px) rotate(-2deg);box-shadow:var(--sombra-libro-alta)}
.pz-i{display:flex;align-items:center;gap:10px;margin-top:28px}
.pz-i .chili{width:14px;height:14px}

/* ---------- portada · 5 · la escala de spice ---------- */
.escala-sec{background:var(--rosa)}
.escala-sec .wrap{display:grid;grid-template-columns:4fr 8fr;gap:72px;align-items:start}
.escala-txt{position:sticky;top:120px}
.escala-txt h2{font-size:52px;margin-bottom:20px}
.escala-txt p:not(.etq){font-size:18px;line-height:1.6;color:var(--t2);margin-bottom:28px}
.escala-juego{background:var(--sup);border-radius:32px;padding:32px;box-shadow:var(--sombra-caja)}
.escala-botones{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:32px}
.escala-botones button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 4px 14px;border-radius:18px;border:1.5px solid var(--linea-2);background:var(--papel);transition:transform .15s var(--suave),background .15s,border-color .15s,box-shadow .15s}
.escala-botones button:hover{border-color:var(--tinta);transform:translateY(-2px)}
.esc-n{font:600 30px/1 var(--serif)}
.escala-botones .chili{width:11px;height:11px}
.esc-c{font-size:13px;color:var(--t3)}
.escala-botones button[aria-selected=true]{background:var(--rosa);border-color:var(--frambuesa);box-shadow:var(--sombra-peg)}
.escala-botones button[aria-selected=true] .esc-c{color:var(--frambuesa-txt)}
.escala-panel h3{font-size:32px;margin-bottom:10px}
.escala-panel>p{color:var(--t2);font-size:17px;line-height:1.6;max-width:58ch;margin-bottom:28px;min-height:3.2em}
.escala-libros{display:flex;flex-wrap:wrap;gap:20px}
.escala-libros a{width:88px;animation:aparece .35s var(--suave) backwards}
.escala-libros a:hover .tapa{transform:translateY(-6px) rotate(-2deg)}
.escala-vacio{color:var(--t2);font-style:italic}

/* ---------- portada · 6 · el quiz ---------- */
.quiz-promo{display:grid;grid-template-columns:1fr 440px;gap:72px;align-items:center;background:var(--menta);border-radius:36px;padding:80px}
.qp-texto h2{font-size:50px;margin-bottom:20px;max-width:16ch}
.qp-texto p:not(.etq){font-size:18px;line-height:1.6;color:var(--t2);margin-bottom:36px;max-width:46ch}
.qp-texto .etq{color:var(--menta-txt)}
.qp-muestra{display:flex;flex-direction:column;gap:10px;background:var(--sup);border-radius:22px;padding:30px;border:1.5px solid var(--menta-txt);box-shadow:var(--sombra-peg);rotate:2deg;transition:rotate .3s var(--suave)}
.qp-muestra:hover{rotate:0deg}
.qp-n{font:600 13px var(--sans);color:var(--t3)}
.qp-muestra b{font:600 28px/1.15 var(--serif);margin-bottom:8px}
.qp-op{display:block;padding:15px 18px;border-radius:14px;border:1.5px solid var(--linea-2);font:600 16px var(--sans)}
.qp-op.sel{background:var(--rosa);border-color:var(--frambuesa);color:var(--frambuesa-txt)}

/* ---------- panel lateral ---------- */
.velo{position:fixed;inset:0;z-index:55;background:var(--velo);opacity:0;pointer-events:none;transition:opacity .25s}
.velo.visible{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:56;width:min(440px,100vw);background:var(--papel);padding:28px 36px 40px;overflow:auto;transform:translateX(105%);visibility:hidden;transition:transform .38s var(--suave),visibility 0s .38s;display:flex;flex-direction:column;gap:12px}
.drawer.abierto{transform:none;visibility:visible;transition:transform .38s var(--suave);box-shadow:-24px 0 60px -24px rgba(31,21,25,.4)}
.drawer .cerrar{align-self:flex-end;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--linea-2);display:flex;align-items:center;justify-content:center;flex:none}
.drawer .cerrar svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.drawer .etq{margin:0}
.drawer img{width:210px;aspect-ratio:2/3;object-fit:cover;border-radius:2px 7px 7px 2px;box-shadow:var(--sombra-libro-alta);margin:8px 0 14px}
.drawer h3{font-size:32px}
.drawer .autor{color:var(--t2);margin-bottom:8px}
.drawer .frase{margin:16px 0 20px;font-size:19px}
.tabla{margin:0;display:grid}
.tabla>div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--linea);align-items:center}
.tabla>div:last-child{border-bottom:0}
.tabla dt{font:600 14px var(--sans);color:var(--t2)}
.tabla dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tabla dd .num{font:600 24px var(--serif)}
.tabla dd .chip{height:32px;font-size:14px;padding:0 12px}

/* ---------- cabeceras de página, migas ---------- */
.pagina-cab{padding:56px 0 40px}
.migas{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--t2);margin-bottom:22px}
.migas a:hover{color:var(--frambuesa-txt);text-decoration:underline;text-underline-offset:3px}
.migas>span::before{content:"/";margin-right:8px;color:var(--t3)}
.pagina-cab h1{font-size:64px;max-width:18ch;margin-bottom:18px}
.pagina-cab .sub{font-size:19px;line-height:1.6;color:var(--t2);max-width:62ch}
.pagina-cab .sub+p{font-size:17px;color:var(--t2)}
.pagina-cab .sub+p a{color:var(--frambuesa-txt);font-weight:600;text-decoration:underline}
.intro-etq{max-width:62ch;margin-top:14px;font-size:17px;line-height:1.6;color:var(--t2)}.intro-etq p+p,.intro-etq ul{margin-top:10px}.intro-etq ul{padding-left:1.2em}.intro-etq li+li{margin-top:4px}.intro-etq a{color:var(--frambuesa-txt);font-weight:600;text-decoration:underline}

/* ---------- listado con filtros ---------- */
.listado{padding-bottom:120px}
.filtros{background:var(--sup);border-radius:28px;padding:24px 28px;box-shadow:var(--sombra-caja);display:grid;gap:20px;margin-bottom:28px}
.filtros>*,.filtros-fila3>*{min-width:0}
.filtros-fila1{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.filtro-busca{flex:1 1 280px;display:flex;align-items:center;gap:10px;height:50px;padding:0 18px;border-radius:999px;border:1.5px solid var(--linea-2);background:var(--papel);cursor:text;transition:border-color .15s}
.filtro-busca:focus-within{border-color:var(--frambuesa)}
.filtro-busca svg{width:18px;height:18px;color:var(--t3);flex:none}
.filtro-busca input{flex:1;border:0;background:none;outline:0;font-size:16px;min-width:0}
.pestanas{display:flex;gap:4px;padding:5px;border-radius:999px;background:var(--papel-2);overflow-x:auto;scrollbar-width:none}
.pestanas button{height:40px;padding:0 16px;border-radius:999px;font:600 15px var(--sans);color:var(--t2);white-space:nowrap;transition:background .15s,color .15s}
.pestanas button small{font-weight:500;color:var(--t3);margin-left:3px}
.pestanas button:hover{color:var(--tinta)}
.pestanas button.activo{background:var(--sup);color:var(--frambuesa-txt);box-shadow:0 1px 4px rgba(60,20,35,.16)}
.filtros-fila2{display:flex;align-items:center;gap:16px;min-width:0}
.fila-etq{font:600 14px var(--sans);color:var(--t2);white-space:nowrap}
.chips-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;min-width:0}
.chips-scroll,.pestanas{cursor:grab} .chips-scroll.agarrada,.pestanas.agarrada{cursor:grabbing;user-select:none} .chips-scroll.agarrada *,.pestanas.agarrada *{cursor:grabbing} .chips-scroll.hay-mas,.pestanas.hay-mas{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}   /* filas que se arrastran */
.chips-scroll::-webkit-scrollbar,.pestanas::-webkit-scrollbar{display:none}
.filtros-fila3{display:grid;grid-template-columns:1fr 1fr 240px;gap:40px;align-items:start;padding-top:20px;border-top:1px solid var(--linea)}
.control .fila-etq{display:block;margin-bottom:8px}
.spice-nombre{font-size:14px;color:var(--t2);margin-top:30px}
.spice-nombre b{color:var(--frambuesa-txt)}
.rango-spice{position:relative;height:28px;display:flex;align-items:center}
.rango-spice .pista{position:absolute;left:0;right:0;height:4px;background:var(--linea-2);border-radius:2px}
.rango-spice .relleno{position:absolute;left:0;height:4px;background:var(--guindilla);border-radius:2px;width:0}
.rango-spice input[type=range]{-webkit-appearance:none;appearance:none;position:relative;width:100%;height:28px;background:transparent;margin:0;outline:0;cursor:pointer}
.rango-spice input[type=range]::-webkit-slider-runnable-track{height:28px;background:transparent}
.rango-spice input[type=range]::-moz-range-track{height:28px;background:transparent}
.rango-spice input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:var(--rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23D93A2B' d='M9 3.4C11.5 2.6 13.6 4.2 13.4 6.8 13.1 10.6 8.6 14.2 2.4 13.9 1.8 13.9 1.6 13.2 2.1 12.9 6.3 11.3 8.3 9 8.3 5.5 8.3 4.8 8.5 3.8 9 3.4zM9.3 3.6C9.8 2.2 11 1.4 12.6 1.4 12.9 1.9 12.7 2.6 12.1 3 11.2 3.6 10.4 3.6 9.3 3.6z'/%3E%3C/svg%3E") center/16px no-repeat;border:2px solid var(--frambuesa);transition:transform .12s}
.rango-spice input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--rosa);border:2px solid var(--frambuesa)}
.rango-spice input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.rango-spice .marcas{position:absolute;left:0;right:0;top:32px;display:flex;justify-content:space-between;font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums;pointer-events:none}
.rango-spice .marcas span{width:30px;text-align:center}
.rango-spice .marcas span.on{color:var(--frambuesa-txt);font-weight:700}
.rango{display:flex;align-items:center;gap:14px}
.rango output{font-size:14px;color:var(--t2);white-space:nowrap;min-width:70px}
.rango-nota input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;background:var(--linea-2);border-radius:2px;outline:0;margin:13px 0;cursor:pointer}
.rango-nota input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--sup);border:2px solid var(--frambuesa);box-shadow:var(--sombra-peg)}
.rango-nota input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--sup);border:2px solid var(--frambuesa)}
.selector select{width:100%;height:46px;border-radius:999px;border:1.5px solid var(--linea-2);background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6066' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat;padding:0 40px 0 18px;appearance:none;-webkit-appearance:none;font-size:15px;cursor:pointer}
.mas-filtros{border-top:1px solid var(--linea);padding-top:18px}
.mas-filtros summary{cursor:pointer;list-style:none;font:600 15px var(--sans);color:var(--frambuesa-txt);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.mas-filtros summary::-webkit-details-marker{display:none}
.mas-filtros summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--rosa);font-size:16px;line-height:1}
.mas-filtros[open] summary::before{content:"−"}
.mas-filtros summary span{font-weight:400;color:var(--t3)}
.grupos{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 48px;margin-top:22px}
.grupo h3{font:600 14px var(--sans);color:var(--t2);margin-bottom:10px;letter-spacing:0}
.filtro-chips{display:flex;flex-wrap:wrap;gap:6px}
.filtro-chips .chip{height:34px;font-size:14px;padding:0 13px}
.filtro-estado{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:32px;min-height:38px}
.filtro-estado .cuenta{font-size:16px;color:var(--t2)}
.filtro-estado .cuenta b{font:600 26px var(--serif);color:var(--tinta);margin-right:2px}
.activos{display:flex;gap:6px;flex-wrap:wrap}
.activos .chip{background:var(--lila);border-color:var(--lila-txt);color:var(--lila-txt);height:34px;font-size:14px}
.activos .chip::after{content:"×";font-size:18px;line-height:1;margin-left:2px}
.enlace-quitar{font:600 14px var(--sans);color:var(--frambuesa-txt);text-decoration:underline;text-underline-offset:3px}
.rejilla{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:56px 32px}
.libro{position:relative;display:flex;flex-direction:column;min-width:0}
.libro .portada{position:relative;margin-bottom:18px;transition:transform .35s var(--suave);transform-origin:50% 100%}
.libro:hover .portada{transform:translateY(-8px) rotate(-1.5deg)}
.libro:hover .tapa{box-shadow:var(--sombra-libro-alta)}
.libro h3{font-size:19px;line-height:1.25;margin-bottom:4px;transition:color .15s}
.libro:hover h3{color:var(--frambuesa-txt)}
.libro .autor{font-size:15px;color:var(--t2);margin-bottom:10px}
.libro .saga-de{font-size:13px;line-height:1.3;font-weight:600;color:var(--lila-txt);margin:-4px 0 10px}
.datos{display:flex;align-items:center;gap:12px;margin-top:auto;flex-wrap:wrap}
.guardar{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;background:var(--sup);color:var(--tinta);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(31,21,25,.22);opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s var(--suave),background .15s}
.libro:hover .guardar,.guardar:focus-visible,.guardar.si{opacity:1;transform:none}
.guardar svg{width:18px;height:18px}
.guardar.si{background:var(--menta);color:var(--menta-txt)}
.libro .porque{font-size:14px;line-height:1.5;color:var(--t2);margin-top:12px}
.libro.saliendo{transform:scale(.6);opacity:0;transition:transform .3s,opacity .3s}
.vacio{grid-column:1/-1;text-align:center;padding:64px 24px;background:var(--sup);border-radius:28px;box-shadow:var(--sombra-caja)}
.vacio b{display:block;font:600 28px var(--serif);margin-bottom:8px}
.vacio p{color:var(--t2);margin-bottom:24px}
.vacio a{color:var(--frambuesa-txt);font-weight:600;text-decoration:underline}

/* ---------- ficha de reseña ---------- */
.ficha-cab{padding:48px 0 80px}
.ficha-cab .wrap{display:grid;grid-template-columns:400px 1fr;gap:80px;align-items:center}
.portada-grande{perspective:1200px;padding-top:8px}
.portada-grande .tapa{max-width:380px;box-shadow:var(--sombra-libro-alta)}
.aviso-calidad{display:inline-block;margin-top:16px;font-size:13px;color:var(--t2)}
.ficha-info .migas{margin-bottom:22px}
.pildoras{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.pildora{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--sup);font:600 14px var(--sans);color:var(--frambuesa-txt)}
a.pildora:hover{text-decoration:underline;text-underline-offset:3px}
.pildora-borde{background:transparent;border:1.5px solid var(--div);color:var(--t2)}
.pildora-saga{background:var(--lila);color:var(--lila-txt)}
.ficha-info h1{font-size:54px;line-height:1.07;margin-bottom:16px;max-width:19ch}
.ficha-info .libro-de{font-size:19px;margin-bottom:40px}
.ficha-info .frase{margin:36px 0}
.ficha-info .meta{margin-top:22px;font-size:14px;color:var(--t2)}
.meta a{color:var(--frambuesa-txt);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ficha-cuerpo{padding:80px 0 40px}
.ficha-cuerpo .wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:96px;align-items:start}
.prosa{max-width:700px;font:400 19px/1.78 var(--serif);color:var(--tinta)}
.prosa p{margin:0 0 1.2em}
.prosa h2{font-size:34px;line-height:1.18;margin:2.1em 0 .7em;scroll-margin-top:110px}
.prosa a{color:var(--frambuesa-txt);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prosa strong,.prosa b{font-weight:700}
.prosa ul,.prosa ol{padding-left:1.2em;margin:0 0 1.2em}
.prosa li{margin-bottom:.45em}
.prosa li::marker{color:var(--frambuesa)}
.prosa .spice{vertical-align:-2px}
.cw{font:400 16px/1.6 var(--sans);background:var(--rosa);border-radius:18px;padding:18px 22px;margin:0 0 40px}
.cw b{display:block;color:var(--frambuesa-txt);margin-bottom:4px;font-weight:700}
.cw>div+div{margin-top:14px}
.cita{position:relative;margin:56px 0;padding:44px 0 0;font:italic 500 30px/1.38 var(--serif);color:var(--tinta)}
.cita::before{content:"“";position:absolute;top:-16px;left:-6px;font:600 100px/1 var(--serif);color:var(--frambuesa)}
.nota-lateral{font:400 17px/1.65 var(--sans);background:var(--lila);border-radius:22px;padding:26px 30px;margin:44px 0}
.nota-lateral .etq{color:var(--lila-txt);margin-bottom:8px}
.nota-lateral p{margin:0 0 .8em}
.nota-lateral>*:last-child{margin-bottom:0}
.m-revelar{height:38px;padding:0 16px;border-radius:999px;border:1.5px dashed var(--frambuesa);font:600 14px var(--sans);color:var(--frambuesa-txt);white-space:nowrap;transition:background .15s}
.m-revelar:hover{background:var(--sup);border-style:solid}
.m-txt:not([hidden]){animation:aparece .3s var(--suave)}
.m-sub a{color:var(--frambuesa-txt);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.votar{display:grid;grid-template-columns:auto 1fr auto;gap:12px 32px;align-items:center;margin-top:64px;padding:30px 32px;border-radius:26px;background:var(--rosa);font-family:var(--sans);scroll-margin-top:110px}
.votar .etq{margin-bottom:6px}
.votar-t{font:600 28px/1.15 var(--serif);margin:0 0 8px}
.votar-sub{font-size:15px;line-height:1.5;color:var(--t2);margin:0;max-width:44ch}
.votar-estrellas{display:flex;gap:4px}
.votar-estrellas button{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;transition:transform .15s var(--suave)}
.votar-estrellas svg{width:38px;height:38px;fill:var(--sup);stroke:var(--frambuesa);stroke-width:1.4;transition:fill .12s}
.votar-estrellas button.on svg{fill:var(--frambuesa)}
.votar-estrellas:hover button svg{fill:var(--sup)}
.votar-estrellas button:hover svg,.votar-estrellas button:has(~ button:hover) svg{fill:var(--frambuesa)}
.votar-estrellas button:hover{transform:scale(1.12)}
.votar-estado{grid-column:1/-1;margin:0;font-size:15px;color:var(--t2);min-height:1.5em}
.votar-estado:empty{display:none}
.ficha-clas{margin-top:64px;font-family:var(--sans);background:var(--sup);border-radius:26px;padding:28px 32px;box-shadow:var(--sombra-caja)}
.anuncio{margin:44px 0;font-family:var(--sans)}
.indice-movil{display:none}
.rail{position:sticky;top:112px;display:grid;gap:20px;font-family:var(--sans)}
.rail-etq{font:600 14px var(--sans);color:var(--t2);margin-bottom:12px}
.indice{display:grid}
.indice a{display:block;padding:9px 16px;border-left:2px solid var(--linea-2);font-size:15px;line-height:1.35;color:var(--t2);transition:color .15s,border-color .15s}
.indice a:hover{color:var(--tinta)}
.indice a.activo{color:var(--frambuesa-txt);border-left-color:var(--frambuesa);font-weight:600}
.compra,.estado-caja{background:var(--sup);border-radius:24px;padding:22px;box-shadow:var(--sombra-caja)}
.compra{display:grid;gap:10px}
.compra .rail-etq{margin-bottom:4px}
.compra .btn{justify-content:space-between;height:54px;width:100%;padding:0 22px}
.disclosure{font-size:13px;line-height:1.5;color:var(--t2);margin-top:6px}
.disclosure a{color:var(--frambuesa-txt);text-decoration:underline}
.estado{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.estado button{height:42px;border-radius:12px;border:1.5px solid var(--linea-2);font:600 13px var(--sans);color:var(--t2);transition:border-color .15s,background .15s}
.estado button:hover{border-color:var(--tinta);color:var(--tinta)}
.estado button.on{background:var(--menta);border-color:var(--menta-txt);color:var(--menta-txt)}
.siguientes{padding:88px 0 120px}
.siguientes .sec-cab h2{font-size:42px;max-width:22ch}
.siguientes .rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}
.barra-compra{display:none}
.progreso{position:fixed;top:0;left:0;height:3px;background:var(--frambuesa);z-index:50;width:0}

/* ---------- quiz ---------- */
.quiz-cab h1 em{display:block}
.quiz{padding-bottom:120px}
.quiz-carta{background:var(--sup);border-radius:36px;padding:48px 56px;box-shadow:var(--sombra-caja);scroll-margin-top:110px}
.quiz-barra{height:8px;border-radius:999px;background:var(--lila);overflow:hidden;margin-bottom:44px}
.quiz-barra i{display:block;height:100%;width:0;background:var(--frambuesa);border-radius:inherit;transition:width .4s var(--suave)}
.quiz .paso{display:none}
.quiz .paso.activo{display:block;animation:aparece .4s var(--suave)}
.quiz .paso h2{font-size:46px;margin-bottom:10px}
.quiz .paso .ayuda{font-size:17px;color:var(--t2);margin-bottom:32px}
.opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.opcion{--c:var(--papel);position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;text-align:left;padding:22px 24px;min-height:128px;border-radius:22px;background:var(--c);border:1.5px solid transparent;overflow:hidden;transition:transform .2s var(--suave),border-color .15s,box-shadow .2s}
.opcion:nth-child(6n+1){--c:var(--rosa)}.opcion:nth-child(6n+2){--c:var(--lila)}.opcion:nth-child(6n+3){--c:var(--menta)}
.opcion:nth-child(6n+4){--c:var(--cielo)}.opcion:nth-child(6n+5){--c:var(--melocoton)}.opcion:nth-child(6n+6){--c:var(--lila-2)}
.opcion b{font:600 23px/1.2 var(--serif);position:relative;z-index:1}
.opcion>span:not(.abanico):not(.spice){font-size:15px;line-height:1.45;color:var(--t2);max-width:26ch;position:relative;z-index:1}
.opcion:hover{transform:translateY(-3px);border-color:var(--tinta)}
.opcion.sel{border-color:var(--frambuesa);box-shadow:var(--sombra-peg)}
.opcion .spice{margin-bottom:auto;padding-bottom:10px}
.opcion .chili{width:19px;height:19px}
.opciones:has(.abanico){grid-template-columns:repeat(2,minmax(0,1fr))}
.opcion:has(.abanico){padding-right:170px;min-height:170px}
.opcion .abanico{top:auto;right:-4px;bottom:-34px;width:150px;height:150px}
.opcion .abanico .tapa{width:66px;top:auto;bottom:0}
.opcion .abanico .tapa:nth-child(1){right:66px}.opcion .abanico .tapa:nth-child(2){right:36px}.opcion .abanico .tapa:nth-child(3){right:4px}
.opcion:hover .abanico .tapa:nth-child(2){transform:rotate(-3deg) translateY(-30px)}
.quiz-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid var(--linea)}
.paso-n{font-size:14px;color:var(--t3)}
.resultado{display:none}
.resultado.activo{display:block;animation:aparece .5s var(--suave)}
.resultado>.acciones{margin-top:40px}
.ganador{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center;background:var(--lila);border-radius:30px;padding:48px;margin-bottom:56px}
.ganador .tapa{box-shadow:var(--sombra-libro-alta);rotate:-3deg}
.ganador .etq{margin-bottom:6px}
.ganador h3{font-size:46px;margin:0 0 12px}
.ganador h3 a:hover{text-decoration:underline;text-underline-offset:6px}
.ganador .libro-de{margin-bottom:20px;font-size:17px}
.ganador .frase{margin:0 0 20px;font-size:20px}
.ganador .porque{background:var(--sup);border-radius:16px;padding:14px 18px;font-size:16px;line-height:1.5;margin-bottom:24px}
.mas{font-size:30px;margin-bottom:28px}
.alternativas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}

/* ---------- mi estantería ---------- */
.resumen-estante{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.resumen-estante>div{background:var(--sup);border-radius:22px;padding:24px 26px;box-shadow:var(--sombra-caja)}
.resumen-estante b{display:block;font:600 46px/1 var(--serif);margin-bottom:8px}
.resumen-estante span{color:var(--t2);font-size:15px}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:120px}
.balda{--c:var(--rosa);background:var(--c);border-radius:28px;padding:24px;min-height:340px;transition:outline-color .15s}
.balda:nth-child(2){--c:var(--lila)}.balda:nth-child(3){--c:var(--menta)}
.balda.sobre{outline:2.5px dashed var(--frambuesa);outline-offset:4px}
.balda h3{font-size:26px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:baseline}
.balda h3 b{font:600 16px var(--sans);color:var(--t2)}
.estante-item{position:relative;display:grid;grid-template-columns:56px 1fr;gap:14px;background:var(--sup);border-radius:18px;padding:12px;margin-bottom:10px;box-shadow:0 1px 3px rgba(60,20,35,.10);cursor:grab}
.estante-item.arrastrando{z-index:5;box-shadow:var(--sombra-caja);cursor:grabbing}
.estante-item img{width:56px;height:84px;object-fit:cover;border-radius:2px 5px 5px 2px;box-shadow:var(--sombra-libro)}
.estante-item .t{font:600 16px/1.3 var(--serif)}
.estante-item .t:hover{color:var(--frambuesa-txt)}
.estante-item .s{font-size:13px;color:var(--t2);margin:3px 0 8px}
.estante-item .estado{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.estante-item .estado button{height:30px;padding:0 10px;font-size:12px;border-radius:999px}
.quitar{font-size:12px;color:var(--t2);text-decoration:underline;margin-top:8px}
.pista-balda{font-size:14px;color:var(--t2);text-align:center;padding:44px 16px;border:1.5px dashed var(--div);border-radius:18px}
.estante-vacio{text-align:center;background:var(--sup);border-radius:28px;padding:64px 24px;box-shadow:var(--sombra-caja);margin-bottom:120px}
.estante-vacio b{display:block;font:600 30px var(--serif);margin-bottom:8px}
.estante-vacio p{color:var(--t2);margin-bottom:26px}

/* ---------- sobre mí, etiquetas, legales, 404 ---------- */
.sobre-cab{padding:64px 0 24px}
.sobre-cab>.wrap:first-child{display:grid;grid-template-columns:1fr 380px;gap:80px;align-items:center}
.sobre-cab h1{font-size:58px;line-height:1.08;margin-bottom:26px}
.sobre-cab .intro{font-size:19px;line-height:1.65;color:var(--t2);margin-bottom:32px}
.sobre-cab .intro p{margin-bottom:1em}
.sobre-cab .intro b,.sobre-cab .intro strong{color:var(--tinta)}
.retrato{margin:0;text-align:center}
.retrato-img{width:100%;max-width:380px;height:auto;margin:0 auto 14px}
.retrato figcaption{font:italic 500 18px/1.45 var(--serif);color:var(--t2)}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:64px}
.cifras>div{background:var(--sup);border-radius:22px;padding:24px 26px;box-shadow:var(--sombra-caja)}
.cifras .n{font:600 40px/1 var(--serif);margin-bottom:8px}
.cifras .l{font-size:15px;line-height:1.4;color:var(--t2)}
.sobre-cuerpo{display:grid;grid-template-columns:1fr 380px;gap:80px}   /* mismo ancho que el texto de la cabecera */
.sobre-cuerpo .texto{position:relative} .peg-lado{position:absolute;left:calc(100% + 150px);width:190px;margin-top:-80px;rotate:5deg} .peg-lado:nth-of-type(even){rotate:-5deg}   /* pegatinas en la columna libre, a la altura de cada título */
.trope{display:flex;align-items:center;gap:12px;margin-bottom:.3em!important} .mini-peg{width:48px;height:48px;object-fit:contain;flex:none;rotate:-6deg} .trope:nth-of-type(4n+1) .mini-peg{rotate:6deg}   /* glosario */
.texto{max-width:780px;padding-top:24px;padding-bottom:120px;font:400 18px/1.7 var(--sans)}
.texto h2{font-size:34px;margin:1.9em 0 .6em}
.texto h3{font-size:24px;margin:1.6em 0 .5em}
.texto p,.texto ul,.texto ol{margin:0 0 1.1em}
.texto li{margin-bottom:.4em}
.texto a{color:var(--frambuesa-txt);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.indice-etq{padding-bottom:120px}
.indice-etq h2{font-size:34px;margin:64px 0 20px}
.indice-etq h2:first-child{margin-top:16px}
.escala{display:grid;background:var(--sup);border-radius:26px;padding:8px 28px;box-shadow:var(--sombra-caja)}
.escala-fila{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--linea);align-items:center}
.escala-fila:last-child{border:0}
.escala-fila strong{display:block;font:600 20px/1.3 var(--serif);margin-bottom:2px}
.escala-fila strong a:hover{color:var(--frambuesa-txt)}
.escala-fila span{font-size:15px;color:var(--t2)}
.escala-fila .chili{width:18px;height:18px}
.centrado{min-height:62vh;display:flex;align-items:center;padding-top:80px;padding-bottom:80px}
.centrado h1{font-size:58px;margin-bottom:18px;max-width:16ch}
.centrado p{font-size:19px;line-height:1.6;color:var(--t2);max-width:56ch;margin-bottom:32px}

/* ---------- la Amiga ilustrada: pegatinas de gouache con fondo transparente ---------- */
.pegatina{display:block;height:auto;filter:drop-shadow(0 6px 10px rgba(60,20,35,.16));user-select:none;-webkit-user-drag:none}
.prosa h2.con-pegatina{display:flex;align-items:center;gap:18px}
.prosa h2.con-pegatina .pegatina{width:96px;flex:none;rotate:-5deg;margin:-14px 0 -14px -6px}
.prosa h2.con-pegatina:nth-of-type(even) .pegatina{rotate:5deg}
.votar-peg{width:112px;rotate:-4deg}
.escala-caras{float:right;position:relative;width:136px;height:136px;margin:-10px -6px 0 16px}
.escala-caras .pegatina{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;scale:.85;transition:opacity .25s,scale .3s var(--suave)}
.escala-caras .pegatina.on{opacity:1;scale:1}
.qp-peg{width:136px;rotate:-6deg;margin:-24px 0 14px -10px}
.pie-peg{width:124px;margin-top:28px;rotate:4deg}
.centrado{gap:64px}
.centrado-peg{width:250px;flex:none;rotate:-4deg}
.vacio-peg{width:190px;margin:0 auto 18px}
.fila-peg{width:66px;margin-bottom:6px}

/* ---------- pie ---------- */
footer.pie{background:var(--lila);padding:88px 0 36px}
footer.pie .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px}
footer.pie .logo img{height:58px;margin-bottom:20px}
footer.pie p{color:var(--t2);font-size:16px;line-height:1.6;max-width:36ch;margin-bottom:28px}
footer.pie h4{font:600 15px var(--sans);color:var(--lila-txt);margin-bottom:16px}
footer.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
footer.pie ul a{font-size:16px}
footer.pie ul a:hover{color:var(--frambuesa-txt);text-decoration:underline;text-underline-offset:3px}
.pie-bajo{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:24px;padding-top:28px;border-top:1px solid var(--div);font-size:14px;color:var(--t2)}

/* ---------- animaciones ---------- */
@keyframes sube{from{opacity:0;transform:translateY(28px)}}
@keyframes entra-mazo{from{opacity:0;transform:translateX(60px) rotate(6deg)}}
@keyframes abre{from{transform:rotate(0) translateY(0)}}
@keyframes bota-in{from{opacity:0;transform:scale(.6)}60%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@keyframes bota{50%{scale:1.08}}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}}
@keyframes fundido{from{opacity:0}}
@keyframes salto{40%{transform:translateY(-6px) scale(1.25)}}
@keyframes latido{50%{transform:scale(1.12)}}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .wrap{padding:0 36px}
  .hero h1{font-size:70px}
  .hero .wrap{grid-template-columns:1fr 1fr;gap:32px}
  .juego-fila{gap:22px}
  .mazo{width:262px;height:454px;--pie:62px}
  .boton-juego .circulo{width:74px;height:74px}
  .peg-nota{left:calc(50% + 142px)}.peg-spice{right:calc(50% + 142px)}
  .destacado>.wrap:first-child{grid-template-columns:340px 1fr;gap:56px}
  .destacado h2{font-size:44px}
  .rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ficha-cab .wrap{grid-template-columns:330px 1fr;gap:56px}
  .ficha-info h1{font-size:46px}
  .ficha-cuerpo .wrap{grid-template-columns:minmax(0,1fr) 290px;gap:56px}
  .marcador>div{padding:0 20px}
  .quiz-promo{grid-template-columns:1fr 380px;padding:56px;gap:48px}
  .escala-sec .wrap{gap:48px}
  .moods-rejilla{gap:16px}
  .mood h3{font-size:32px}
  .abanico{width:172px;right:20px}.abanico .tapa{width:80px}.abanico .tapa:nth-child(1){right:84px}.abanico .tapa:nth-child(2){right:46px}
}
@media (max-width:1000px){
  .escala-sec .wrap{grid-template-columns:1fr}
  .escala-txt{position:static}
  .quiz-promo{grid-template-columns:1fr}
  .qp-muestra{max-width:440px}
}
@media (max-width:900px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .sec{padding:72px 0}
  .sec-cab{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px}
  .sec-cab h2{font-size:36px}
  .etq{font-size:14px;margin-bottom:10px}
  .cab .wrap{height:64px;gap:12px}
  .logo img{height:38px}
  .menu{display:none}
  .cab-acciones{gap:6px}
  .buscar-btn{min-width:0;width:42px;height:42px;padding:0;justify-content:center}
  .buscar-btn span,.buscar-btn kbd{display:none}
  .estante-btn{width:42px;height:42px;padding:0;justify-content:center}
  .estante-btn span{display:none}
  .btn-tema,.btn-burger{width:42px;height:42px}
  .btn-burger{display:flex}
  .menu-movil{inset:64px 0 0}
  .hero{padding:28px 0 40px}
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .hero h1{font-size:44px;line-height:1.08;margin-bottom:16px}
  .promesa{font-size:17px;margin-bottom:24px}
  .hero-cta{gap:16px 24px}
  .cifras-mini{display:none}
  .cifras-mini b{font-size:24px}
  .cifras-mini li{font-size:13px}
  .hero-juego{padding:36px 0 28px}
  .hero-juego .bloque{left:-20px;right:-20px;border-radius:28px}
  .juego-fila{gap:14px}
  .mazo{width:200px;height:344px;--pie:48px}
  .mazo .carta .pie{padding:8px 12px}
  .mazo .carta .pie b{font-size:14px}
  .mazo .carta .pie span{display:none}
  .rotulo{font-size:16px;top:18px}
  .boton-juego{gap:8px}
  .boton-juego .circulo{width:60px;height:60px;box-shadow:var(--sombra-peg)}
  .boton-juego .circulo svg{width:24px;height:24px}
  .boton-juego .nombre{font-size:11px}
  .peg{padding:9px 12px}
  .peg b{font-size:22px}
  .peg i{font-size:10px;margin-bottom:4px}
  .peg-nota{left:auto;right:-8px;top:-18px}
  .peg-spice{display:none}
  .resultado-juego{width:100%;max-width:360px;margin-top:22px}
  .pasos ol{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .pasos li{font-size:15px}
  .pasos li b{width:38px;height:38px;font-size:18px}
  .destacado{padding:64px 0 56px;margin-top:72px}
  .destacado>.wrap:first-child{grid-template-columns:1fr;gap:40px}
  .destacado-libro .tapa{max-width:220px}
  .destacado h2{font-size:32px}
  .libro-de{font-size:16px;margin-bottom:24px}
  .marcador{gap:18px 0}
  .marcador>div{padding:0 16px}
  .marcador>div:nth-child(3){padding-left:0;border-left:0}
  .marcador>div:nth-child(-n+2){flex:1 1 40%}
  .m-num{font-size:30px}
  .m-txt{font-size:22px}
  .frase{font-size:19px;margin:26px 0;padding-left:18px}
  .antes{flex-wrap:wrap;gap:16px;margin-top:48px}
  .antes-etq{flex:1 1 100%}
  .antes a{flex:1 1 100%}
  .moods-rejilla{grid-template-columns:1fr 1fr;gap:12px}
  .mood{min-height:250px;padding:16px 16px 18px;border-radius:22px}
  .mood h3{font-size:23px;margin-bottom:4px}
  .mood p{font-size:14px}
  .mood-n{font-size:13px;order:3;margin-top:8px}
  .abanico{top:16px;right:50%;translate:50% 0;width:132px;height:110px}
  .abanico .tapa{width:56px}
  .abanico .tapa:nth-child(1){right:66px}.abanico .tapa:nth-child(2){right:38px}.abanico .tapa:nth-child(3){right:10px}
  .estantes-rejilla{grid-template-columns:minmax(0,1fr);gap:48px}
  .estante-cab{grid-template-columns:1fr;gap:4px}
  .estante-cab h3{font-size:27px}
  .estante-cab p{font-size:15px}
  .flechas{display:none}
  .repisa{margin:0 -20px;padding:22px 10px 4px}
  .pz{padding:0 10px}
  .pz .tapa{width:118px}
  .pz::before{top:calc(118px * 1.5 - 2px);height:12px}
  .pz-i{margin-top:22px;gap:6px}
  .pz-i .chili{width:11px;height:11px}
  .escala-txt h2{font-size:36px}
  .escala-txt p:not(.etq){font-size:16px}
  .escala-juego{padding:18px;border-radius:24px}
  .escala-botones{gap:6px;margin-bottom:24px}
  .escala-botones button{padding:12px 2px 10px;border-radius:14px;gap:6px}
  .escala-botones .spice{display:none}
  .esc-n{font-size:24px}
  .esc-c{font-size:11px}
  .escala-panel h3{font-size:26px}
  .escala-libros{gap:14px}
  .escala-libros a{width:70px}
  .quiz-promo{padding:32px 22px 40px;gap:32px;border-radius:28px}
  .qp-texto h2{font-size:32px}
  .qp-texto p:not(.etq){font-size:16px;margin-bottom:28px}
  .qp-muestra{rotate:0deg;padding:22px}
  footer.pie{padding:56px 0 28px}
  footer.pie .wrap{grid-template-columns:1fr 1fr;gap:36px 24px}
  footer.pie .wrap>div:first-child{grid-column:1/-1}
  .pagina-cab{padding:28px 0 24px}
  .pagina-cab h1{font-size:40px}
  .pagina-cab .sub{font-size:17px}
  .listado{padding-bottom:88px}
  .filtros{padding:16px;border-radius:22px;gap:16px}
  .filtros-fila1{gap:12px}
  .filtro-busca{flex-basis:100%}
  .pestanas{width:100%}
  .filtros-fila2{flex-direction:column;align-items:stretch;gap:8px}
  .filtros-fila3{grid-template-columns:1fr;gap:22px;padding-top:16px}
  .grupos{grid-template-columns:1fr;gap:20px}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  .libro h3{font-size:16px}
  .libro .autor{font-size:14px}
  .datos{gap:8px}
  .datos .chili{width:13px;height:13px}
  .guardar{opacity:1;transform:none;width:36px;height:36px;top:8px;right:8px}
  .ficha-cab{padding:20px 0 48px}
  .ficha-cab .wrap{grid-template-columns:1fr;gap:28px}
  .portada-grande .tapa{max-width:210px;margin:0 auto}
  .aviso-calidad{display:block;text-align:center}
  .ficha-info h1{font-size:33px}
  .ficha-info .libro-de{font-size:17px;margin-bottom:28px}
  .ficha-info .acciones .btn-l:not(.btn-ico){flex:1 1 auto}
  .ficha-cuerpo{padding:40px 0 24px}
  .ficha-cuerpo .wrap{grid-template-columns:1fr;gap:40px}
  .rail{position:static}
  .rail .indice{display:none}
  .indice-movil{display:block;margin-bottom:28px;font-family:var(--sans);background:var(--sup);border-radius:18px;padding:14px 18px;box-shadow:var(--sombra-caja)}
  .indice-movil summary{font-weight:600;cursor:pointer}
  .indice-movil nav{display:grid;gap:10px;margin-top:12px}
  .indice-movil a{font-size:15px;color:var(--t2)}
  .prosa{font-size:18px;line-height:1.72}
  .prosa h2{font-size:27px}
  .cita{font-size:23px;margin:40px 0}
  .nota-lateral{padding:20px 22px;font-size:16px}
  .ficha-clas{padding:20px;margin-top:48px}
  .votar{grid-template-columns:1fr;padding:22px;margin-top:48px}
  .votar-peg{width:84px}
  .votar-t{font-size:24px}
  .votar-estrellas{justify-content:space-between}
  .tabla>div{grid-template-columns:1fr;gap:8px}
  .siguientes{padding:56px 0 110px}
  .siguientes .sec-cab h2{font-size:30px}
  .siguientes .rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barra-compra{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px;background:var(--sup);border:1.5px solid var(--frambuesa);border-radius:18px;box-shadow:var(--sombra-peg);transform:translateY(150%);transition:transform .3s var(--suave)}
  .barra-compra.visible{transform:none}
  .barra-compra .t{flex:1;min-width:0}
  .barra-compra .t b{display:block;font:600 15px/1.3 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra-compra .t span{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--t2)}
  .barra-compra .t .nota{font-size:13px}
  .barra-compra .btn-ico{width:42px;height:42px}
  .quiz{padding-bottom:88px}
  .quiz-carta{padding:24px 18px;border-radius:26px}
  .quiz-barra{margin-bottom:28px}
  .quiz .paso h2{font-size:31px}
  .quiz .paso .ayuda{font-size:16px;margin-bottom:22px}
  .opciones,.opciones:has(.abanico){grid-template-columns:1fr;gap:10px}
  .opcion{min-height:0;padding:18px 20px;border-radius:18px}
  .opcion b{font-size:20px}
  .opcion:has(.abanico){min-height:118px;padding-right:120px}
  .opcion .abanico{width:118px;height:118px;bottom:-30px}
  .opcion .abanico .tapa{width:50px}
  .opcion .abanico .tapa:nth-child(1){right:52px}.opcion .abanico .tapa:nth-child(2){right:28px}.opcion .abanico .tapa:nth-child(3){right:4px}
  .quiz-pie .btn-s{padding:0 12px;font-size:13px}
  .ganador{grid-template-columns:1fr;padding:28px 22px;gap:28px}
  .ganador>a{max-width:170px}
  .ganador h3{font-size:32px}
  .alternativas{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .resumen-estante{gap:8px}
  .resumen-estante>div{padding:14px 16px;border-radius:18px}
  .resumen-estante b{font-size:30px}
  .resumen-estante span{font-size:12px}
  .kanban{grid-template-columns:1fr;padding-bottom:88px}
  .balda{min-height:0}
  .sobre-cab{padding:32px 0 16px}
  .sobre-cab>.wrap:first-child{grid-template-columns:1fr;gap:40px} .sobre-cuerpo{grid-template-columns:1fr} .peg-lado{position:static;float:right;width:96px;margin:-4px 0 6px 12px}
  .sobre-cab h1{font-size:36px}
  .sobre-cab .intro{font-size:17px}
  .retrato-img{max-width:260px}
  .prosa h2.con-pegatina .pegatina{width:72px}
  .escala-caras{width:92px;height:92px}
  .qp-peg{width:104px}
  .centrado{flex-direction:column;align-items:flex-start;gap:24px}
  .centrado-peg{width:170px}
  .fila-peg{width:52px}
  .cifras{grid-template-columns:1fr 1fr;gap:10px;margin-top:40px}
  .cifras .n{font-size:30px}
  .texto{font-size:17px;padding-bottom:88px}
  .texto h2{font-size:28px}
  .indice-etq h2{font-size:28px;margin-top:48px}
  .escala{padding:4px 18px}
  .escala-fila{grid-template-columns:1fr;gap:6px}
  .centrado h1{font-size:38px}
  .drawer{padding:20px 22px 32px}
  .drawer img{width:170px}
}
@media (hover:none){.guardar{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* =====================================================================================================================
   v7 · ESTILO PEGATINA — la web pintada con el mismo gouache que la amiga (Pedro, 19-oct: «haz la web siguiendo el
   estilo de las pegatinas»). Los fondos de color son MANCHAS de gouache: una máscara (ilustraciones/mancha-*.webp) y el
   color en --pintura, así sirve para cada token, el tinte de cada libro y el modo oscuro. Las piezas son pegatinas
   troqueladas (borde blanco + sombra suave; adiós a las sombras duras violeta). Acentos escritos a mano (Caveat),
   guindillas y estrellas pintadas, cinta washi en las tarjetas y papel con grano.
   ===================================================================================================================== */
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caveat-700-latin.woff2) format('woff2')}
:root{
  --mano:'Caveat','Segoe Print','Bradley Hand',cursive;
  --troquel:#FFFFFF;
  --sombra-peg:0 0 0 4px var(--troquel),0 12px 22px -10px rgba(60,20,35,.32);
  --sombra-libro:0 0 0 4px var(--troquel),0 2px 3px rgba(60,20,35,.10),0 14px 22px -10px rgba(60,20,35,.36);
  --sombra-libro-alta:0 0 0 5px var(--troquel),0 4px 6px rgba(60,20,35,.10),0 30px 44px -20px rgba(60,20,35,.44);
  --sombra-caja:0 2px 4px rgba(60,20,35,.05),0 22px 40px -20px rgba(60,20,35,.30);
  --ancha:url(ilustraciones/mancha-ancha.webp?v=c6fe90c8); --cuadrada:url(ilustraciones/mancha-cuadrada.webp?v=78716ae9);
  --alta:url(ilustraciones/mancha-alta.webp?v=2c6ef43c); --punto:url(ilustraciones/punto.webp?v=fe704503);
}
html.oscuro{
  --troquel:#EFE6EA;
  --sombra-peg:0 0 0 4px var(--troquel),0 12px 22px -10px rgba(0,0,0,.6);
  --sombra-libro:0 0 0 4px var(--troquel),0 14px 22px -10px rgba(0,0,0,.7);
  --sombra-libro-alta:0 0 0 5px var(--troquel),0 30px 44px -20px rgba(0,0,0,.8);
  --sombra-caja:0 22px 40px -20px rgba(0,0,0,.7);
}
body,.cab,.menu-movil,.drawer{background-image:url(ilustraciones/grano.webp?v=9831214c)}

/* manchas de gouache */
.hero-juego .bloque,.destacado,.mood,.escala-sec,.quiz-promo,.votar,.nota-lateral,.cw,.ganador,.ficha-cab,footer.pie,.opcion,.pasos li b{isolation:isolate;background:none;--mancha:var(--ancha)}
.destacado,.escala-sec,.quiz-promo,.votar,.nota-lateral,.cw,.ganador,.ficha-cab,footer.pie,.pasos li b{position:relative}
:is(.hero-juego .bloque,.destacado,.mood,.escala-sec,.quiz-promo,.votar,.nota-lateral,.cw,.ganador,.ficha-cab,footer.pie,.opcion,.pasos li b)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--pintura);-webkit-mask:var(--mancha) center/100% 100% no-repeat;mask:var(--mancha) center/100% 100% no-repeat}
:is(.destacado,.escala-sec,.ficha-cab,footer.pie)::before{inset:0 14px}
.tinte{background:none;--pintura:oklch(var(--tinte-l) var(--tinte-c) var(--h,355))}
.hero-juego .bloque{--pintura:var(--lila)}
.escala-sec{--pintura:var(--rosa)}
.quiz-promo{--pintura:var(--menta)}
.votar,.cw{--pintura:var(--rosa)}
.nota-lateral,.ganador,footer.pie{--pintura:var(--lila)}
.mood{--pintura:var(--c);--mancha:var(--cuadrada);overflow:visible}
.mood:hover{box-shadow:none;transform:translateY(-4px) rotate(-.6deg)}
.opcion{--pintura:var(--c);border-color:transparent}
.opcion:hover{border-color:transparent;transform:translateY(-3px) rotate(-.5deg)}
.opcion.sel{border-color:transparent;box-shadow:none;--pintura:var(--rosa-2)}
.opcion.sel::after{content:"";position:absolute;top:12px;right:14px;width:30px;height:28px;background:url(ilustraciones/corazon.webp?v=3950b19a) center/contain no-repeat;rotate:8deg}
.votar{padding:40px 52px;grid-template-columns:auto 1fr}
.votar-peg{grid-row:span 2}
.votar-estrellas{grid-column:2}
.pasos li b{--pintura:var(--lila);--mancha:var(--punto);width:52px;height:52px;font:700 30px/1 var(--mano)}

/* pegatinas troqueladas: libros, cartas del mazo, botones */
.tapa{border-radius:5px}
.mazo .carta{border-radius:16px;box-shadow:0 0 0 5px var(--troquel),0 30px 60px -20px rgba(60,20,35,.5),0 4px 10px rgba(60,20,35,.15)}
.btn-rosa,.btn-menta,.btn-duro{box-shadow:0 0 0 3px var(--troquel),0 10px 18px -9px rgba(60,20,35,.5)}
.btn:hover,.btn-duro:hover{transform:translateY(-2px) rotate(-1.2deg);box-shadow:0 0 0 3px var(--troquel),0 14px 22px -10px rgba(60,20,35,.5)}
.btn:active,.btn-duro:active{transform:translateY(1px)}
.boton-juego .circulo{border:0}
.boton-juego:active .circulo{transform:scale(.95);box-shadow:var(--sombra-peg)}
.peg,.toast,.resultado-juego,.qp-muestra{border-color:transparent}
.peg::before{top:-19px;width:84px;height:30px;background:url(ilustraciones/cinta.webp?v=a547f4ae) center/contain no-repeat;border-radius:0;opacity:1;filter:drop-shadow(0 1px 1.5px rgba(60,20,35,.2))}
.escala-juego,.quiz-carta,.qp-muestra{position:relative}
:is(.escala-juego,.quiz-carta,.qp-muestra)::after{content:"";position:absolute;top:-28px;left:50%;width:150px;height:54px;translate:-50% 0;rotate:-3deg;background:url(ilustraciones/cinta.webp?v=a547f4ae) center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 1px 1.5px rgba(60,20,35,.2))}

/* escrito a mano */
.etq{font:700 28px/1.1 var(--mano);letter-spacing:0}
.gustos-cab .etq{font-size:24px}
.peg i{font:700 20px/1 var(--mano);letter-spacing:0;text-transform:none}
.boton-juego .nombre{font:700 23px/1 var(--mano);letter-spacing:0;text-transform:none}
.mood-n,.qp-n{font:700 22px/1 var(--mano);color:var(--t2)}
.antes-etq{font:700 25px/1 var(--mano)}
.estante-cab h3 small{font:700 24px/1 var(--mano);color:var(--frambuesa-txt)}
.retrato figcaption{font:700 30px/1.2 var(--mano);color:var(--t2);rotate:-2deg}
h1 em,h2 em{background:url(ilustraciones/trazo-claro.webp?v=97bcb441) 0 94%/100% .36em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .05em}
h1 em,h2 em{width:fit-content}
html.oscuro h1 em,html.oscuro h2 em{background-image:url(ilustraciones/trazo-oscuro.webp?v=15730784)}

/* guindillas y estrellas pintadas (el <use> del SVG se apaga; la pintura va de fondo) */
:is(.chili,.estrella,.estrellas svg,.votar-estrellas svg) use{display:none}
.chili,.estrella,.estrellas svg,.votar-estrellas svg{background:url(ilustraciones/estrella.webp?v=fb24910f) center/contain no-repeat}
.chili{background-image:url(ilustraciones/guindilla.webp?v=85f07f9d);rotate:20deg}
.chili.off,.estrellas .e-fondo svg{filter:grayscale(1);opacity:.3}
.escala-botones .chili{width:14px;height:14px}
.votar-estrellas svg{filter:grayscale(1);opacity:.3;transition:opacity .12s,filter .12s}
.votar-estrellas button.on svg,.votar-estrellas button:hover svg,.votar-estrellas button:has(~ button:hover) svg{filter:none;opacity:1}
.votar-estrellas:hover button:not(:hover):not(:has(~ button:hover)) svg{filter:grayscale(1);opacity:.3}

/* objetos pintados repartidos */
.genero-peg{width:66px;align-self:center;rotate:-7deg;margin:-16px 2px -16px -6px}
.estante:nth-child(even) .genero-peg{rotate:6deg}
.hero-peg{position:absolute;z-index:3;left:-86px;bottom:-34px;width:196px;rotate:-7deg;pointer-events:none}
.destacado-texto{position:relative}
.destacado-peg{position:absolute;top:-64px;right:0;width:118px;rotate:7deg}
.estantes-peg{width:230px;margin:0 28px -14px auto;rotate:-3deg}
.pagina-cab .wrap:has(>.cab-peg){display:grid;grid-template-columns:1fr auto;column-gap:48px;align-items:center}
.pagina-cab .wrap:has(>.cab-peg)>:not(.cab-peg){grid-column:1}
.cab-peg{grid-column:2;grid-row:1/span 6;width:190px;rotate:6deg}

@media (max-width:900px){
  :is(.destacado,.escala-sec,.ficha-cab,footer.pie)::before{inset:0 6px}
  .destacado,.escala-sec,.quiz-promo,.votar,.ganador,.ficha-cab,footer.pie{--mancha:var(--alta)}
  .votar{padding:32px 26px;grid-template-columns:1fr}
  .votar-peg{grid-row:auto}
  .votar-estrellas{grid-column:auto}
  .etq{font-size:24px}
  .hero-peg{left:auto;right:4px;top:-112px;bottom:auto;width:104px;rotate:6deg}
  .destacado-peg{top:-46px;width:84px}
  .estantes-peg{display:none}
  .genero-peg{width:52px}
  .pagina-cab .wrap:has(>.cab-peg){display:block}
  .cab-peg{width:116px;margin:0 0 10px;rotate:-4deg}
}
html.oscuro :is(.chili.off,.estrellas .e-fondo svg,.votar-estrellas svg){opacity:.5}
html.oscuro .votar-estrellas button.on svg,html.oscuro .votar-estrellas button:hover svg,html.oscuro .votar-estrellas button:has(~ button:hover) svg{opacity:1}
/* hero (Pedro, 20-oct): el mazo centrado en la parte morada VISIBLE (la mancha llega hasta el borde de la ventana, así que
   se corre la mitad del margen derecho: W/4 - 296 px con la .wrap de 1280), los botones más separados de los libros y
   la peg del spice que abrace sus cinco guindillas (con right: y sin left: encogía y la quinta se salía). */
.peg{width:max-content}
@media (min-width:1241px){
  .juego{translate:calc(max(100vw, 1280px) / 4 - 296px) 0}
  .juego-fila{gap:60px}
}

/* =============================================================================================================
   NOVEDADES Y SAGAS (20-oct-2026): /novedades/, /sagas/, /sagas/<saga>/ y la fila «lo que tengo apuntado» de la home.
   Chips de estado en pasteles claros (regla: en modo papel ningún fondo oscuro).
   ============================================================================================================= */
.menu a{white-space:nowrap}
span.estado{display:inline-flex;align-self:flex-start;align-items:center;min-height:28px;padding:4px 12px;border-radius:999px;font:600 13px/1.2 var(--sans);background:var(--papel-2);color:var(--t2);border:1.5px solid var(--linea-2)}
.estado.leido{background:var(--menta);border-color:var(--menta-2);color:var(--menta-txt)}
.estado.leyendo,.estado.ya{background:var(--rosa);border-color:var(--rosa-2);color:var(--frambuesa-txt)}
.estado.proximo{background:var(--lila);border-color:var(--lila-2);color:var(--lila-txt)}
.estado.aprox{background:var(--melocoton);border-color:var(--linea-2);color:var(--tinta)}
.saltos{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.nov-mes{padding-bottom:88px}
.nov-mes h2,.saga-cuerpo h2{font-size:40px;line-height:1.15;margin:0 0 32px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.nov-mes h2 small{font:500 16px var(--sans);color:var(--t3)}
.nov-intro{font-size:18px;line-height:1.6;color:var(--t2);max-width:62ch;margin:-16px 0 32px}
.nov-mes .rejilla,.rejilla-nov{grid-template-columns:repeat(4,minmax(0,1fr))}
.nov .estado{margin-bottom:10px}
.nov-rel{font-size:14px;line-height:1.5;color:var(--t2);margin-top:10px}
.nov-rel a,.nov-enlaces a{color:var(--frambuesa-txt);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nov-enlaces{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font:600 14px/1.4 var(--sans)}
.saga-cuerpo{padding-bottom:120px}
.saga-cuerpo h2{margin-top:72px}
.saga-cuerpo h2:first-child{margin-top:8px}
.orden{list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:900px}
.orden li{display:grid;grid-template-columns:40px 64px minmax(0,1fr) auto;align-items:center;gap:20px;padding:14px 20px;background:var(--sup);border-radius:20px;box-shadow:var(--sombra-caja)}
.orden .num{font:700 26px/1 var(--serif);color:var(--frambuesa-txt);text-align:center}
.orden .tapa{width:64px}
.orden h3{font-size:20px;line-height:1.25;margin:0 0 6px}
.orden h3 a:hover{color:var(--frambuesa-txt)}
.orden p{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--t2);margin:0}
.pantallas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pantalla{display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;align-items:start;padding:24px;background:var(--sup);border-radius:24px;box-shadow:var(--sombra-caja)}
.pantalla .tapa{width:96px}
.pantalla .etq{font-size:19px;margin-bottom:6px}
.pantalla h3{font-size:22px;line-height:1.25;margin:0 0 10px}
.pantalla .estado{margin-bottom:10px}
.pantalla p{font-size:15px;line-height:1.55;color:var(--t2);margin:0 0 8px}
.pantalla .reparto{font-size:14px;color:var(--t3)}
.sagas-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-bottom:120px}
.sec .sagas-rejilla,.saga-cuerpo .sagas-rejilla{padding-bottom:0}
.faq-saga{max-width:760px}
.faq-saga h3{font-size:21px;line-height:1.3;margin:30px 0 8px}
.faq-saga h3:first-child{margin-top:0}
.saga-t{display:flex;flex-direction:column;gap:6px;padding:24px;background:var(--sup);border-radius:24px;box-shadow:var(--sombra-caja);transition:transform .2s var(--suave)}
.saga-t:hover{transform:translateY(-4px)}
.saga-t:hover h3{color:var(--frambuesa-txt)}
.saga-t .tapas{display:flex;gap:10px;margin-bottom:16px}
.saga-t .tapa{width:64px}
.saga-t h3{font-size:23px;line-height:1.2}
.saga-t p{font-size:15px;color:var(--t2)}
.saga-t .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.apuntado .sec-cab{margin-bottom:36px}
.apuntado-fila{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px}
.apuntado-fila a{display:flex;flex-direction:column;gap:8px;min-width:0}
.apuntado-fila .tapa{margin-bottom:6px;transition:transform .3s var(--suave)}
.apuntado-fila a:hover .tapa{transform:translateY(-6px) rotate(-1.5deg)}
.apuntado-fila a:hover b{color:var(--frambuesa-txt)}
.apuntado-fila b{font:600 17px/1.3 var(--serif)}
.apuntado-fila small{font-size:14px;color:var(--t2)}
@media (max-width:1000px){
  .nov-mes .rejilla,.rejilla-nov{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sagas-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pantallas{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .nov-mes h2,.saga-cuerpo h2{font-size:30px}
  .nov-mes .rejilla,.rejilla-nov{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  .sagas-rejilla{grid-template-columns:minmax(0,1fr)}
  .orden li{grid-template-columns:28px 52px minmax(0,1fr);gap:14px;padding:12px 14px}
  .orden .tapa{width:52px}
  .orden .num{font-size:22px}
  .orden li>.estado{grid-column:3;margin-top:-6px}
  .pantalla{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:18px}
  .pantalla .tapa{width:72px}
  .apuntado-fila{display:flex;overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
  .apuntado-fila a{flex:0 0 40%;scroll-snap-align:start}
}
/* Logo pintado (gouache, 20-oct-2026): más ancho que el anterior, se le da algo más de alto para que se lea */
.logo img{height:56px}
footer.pie .logo img{height:76px}
@media (max-width:900px){ .logo img{height:44px} }
/* Menú a juego con el logo pintado (20-oct-2026): el activo y el hover llevan el mismo brochazo que los <em> de los
   titulares, y los botones de la cabecera son pegatinas (anillo de troquel), como los botones grandes */
.menu a{border-radius:0;padding:11px 12px}
.menu a:hover{background:url(ilustraciones/trazo-claro.webp?v=97bcb441) 50% 82%/88% .42em no-repeat;color:var(--tinta)}
.menu a.activo{background:url(ilustraciones/trazo-claro.webp?v=97bcb441) 50% 82%/92% .5em no-repeat;color:var(--frambuesa-txt);font-weight:600}
html.oscuro .menu a:hover,html.oscuro .menu a.activo{background-image:url(ilustraciones/trazo-oscuro.webp?v=15730784)}
.buscar-btn,.btn-tema,.btn-burger{border-color:transparent;box-shadow:0 0 0 3px var(--troquel),0 8px 14px -8px rgba(60,20,35,.35)}
.estante-btn{border-color:var(--menta-2);box-shadow:0 0 0 3px var(--troquel),0 8px 14px -8px rgba(60,20,35,.35)}
.buscar-btn,.btn-tema,.btn-burger,.estante-btn{transition:transform .15s var(--suave),box-shadow .15s}
.buscar-btn:hover,.btn-tema:hover,.btn-burger:hover,.estante-btn:hover{transform:translateY(-1px) rotate(-1.2deg)}
.buscar-btn{min-width:150px}
html.oscuro .buscar-btn,html.oscuro .btn-tema,html.oscuro .btn-burger,html.oscuro .estante-btn{box-shadow:0 0 0 2px rgba(239,230,234,.38),0 8px 14px -8px rgba(0,0,0,.6)}
@media (max-width:900px){ .buscar-btn{min-width:0} }

/* =============================================================================================================
   BOTONES PEGATINA (20-oct-2026): todo lo pulsable es una pegatina troquelada, como los .btn-rosa/.btn-menta de la v7
   y los botones de la cabecera. Relleno liso CLARO (rosa = acción principal, menta = guardar/estantería, lila = el
   resto), anillo de troquel y sombra suave, sin borde gris; en hover el mismo leve giro. Chips: pegatina pequeña
   (anillo de 2 px, sombra mínima), el activo en lila. En oscuro, anillo suave como la cabecera (el blanco entero pesa).
   .btn-rosa sigue en frambuesa macizo: es el único bloque oscuro permitido en modo papel (de marca, aprobado en la v7).
   ============================================================================================================= */
:root{
  --peg-anillo:var(--troquel);
  --peg-btn:0 0 0 3px var(--peg-anillo),0 10px 18px -9px rgba(60,20,35,.45);
  --peg-btn-alta:0 0 0 3px var(--peg-anillo),0 14px 22px -10px rgba(60,20,35,.5);
  --peg-chip:0 0 0 2px var(--peg-anillo),0 3px 6px -3px rgba(60,20,35,.28);
  --peg-giro:translateY(-2px) rotate(-1.2deg);
}
html.oscuro{
  --peg-anillo:rgba(239,230,234,.38);
  --peg-btn:0 0 0 2px var(--peg-anillo),0 10px 18px -9px rgba(0,0,0,.6);
  --peg-btn-alta:0 0 0 2px var(--peg-anillo),0 14px 22px -10px rgba(0,0,0,.65);
  --peg-chip:0 0 0 2px rgba(239,230,234,.28),0 3px 6px -3px rgba(0,0,0,.5);
}
/* botones de acción */
.btn,.btn:hover{border-color:transparent}
.btn{background:var(--lila);color:var(--tinta);box-shadow:var(--peg-btn)}
.btn-rosa{background:var(--frambuesa);color:var(--sobre-frambuesa)} .btn-rosa:hover{background:var(--frambuesa-2);color:var(--sobre-frambuesa)}
.btn-menta,.btn-menta:hover{background:var(--menta);color:var(--menta-txt)}
.btn:hover{transform:var(--peg-giro);box-shadow:var(--peg-btn-alta)}
.btn:disabled{opacity:.45;cursor:default}
.btn:disabled:hover{transform:none;box-shadow:var(--peg-btn)}
.boton-juego .circulo{box-shadow:var(--peg-btn)}
.boton-juego:hover .circulo{transform:var(--peg-giro);box-shadow:var(--peg-btn-alta)}
.boton-juego:active .circulo{transform:scale(.95);box-shadow:var(--peg-btn)}
.flechas button,.drawer .cerrar,.guardar,.votar-estrellas button{border-color:transparent;background:var(--sup);box-shadow:var(--peg-btn);transition:transform .15s var(--suave),box-shadow .15s,opacity .2s,background .15s}
.flechas button:hover:not(:disabled),.drawer .cerrar:hover,.guardar:hover,.votar-estrellas button:hover{border-color:transparent;transform:var(--peg-giro);box-shadow:var(--peg-btn-alta)}
.guardar.si{background:var(--menta)}
.votar-estrellas{gap:10px}
.votar-estrellas button{border-radius:50%}
.votar-estrellas svg{width:32px;height:32px}
.m-revelar,.enlace-quitar{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:0;background:var(--rosa);color:var(--frambuesa-txt);font:600 14px var(--sans);text-decoration:none;box-shadow:var(--peg-btn);transition:transform .15s var(--suave),box-shadow .15s}
.m-revelar:hover,.enlace-quitar:hover{background:var(--rosa);transform:var(--peg-giro);box-shadow:var(--peg-btn-alta)}
.escala-botones{gap:12px}
.escala-botones button,.opcion,.qp-op{border-color:transparent;box-shadow:var(--peg-btn)}
.escala-botones button{background:var(--papel-2)}
.escala-botones button:hover,.opcion:hover{border-color:transparent;transform:var(--peg-giro);box-shadow:var(--peg-btn-alta)}
.escala-botones button[aria-selected=true]{background:var(--rosa-2);transform:translateY(-2px) rotate(-2deg);box-shadow:var(--peg-btn-alta)}
.opcion{background:var(--c)}
.opcion::before{display:none}
.opcion.sel{background:var(--rosa-2);box-shadow:var(--peg-btn-alta)}
.qp-op{background:var(--papel-2);padding:13px 18px;margin-bottom:4px}
.qp-op.sel{background:var(--rosa-2);color:var(--frambuesa-txt)}
.estado-caja .estado{gap:10px;grid-template-columns:repeat(3,auto)}
.estado button{border-color:transparent;background:var(--papel-2);color:var(--t2);box-shadow:var(--peg-btn);white-space:nowrap;padding:0 10px;transition:transform .15s var(--suave),box-shadow .15s,background .15s,color .15s}
.estado button:hover{border-color:transparent;color:var(--tinta);transform:var(--peg-giro);box-shadow:var(--peg-btn-alta)}
.estado button.on{border-color:transparent;background:var(--menta);color:var(--menta-txt)}
.estante-item .estado{gap:8px}
.estante-item .estado button{box-shadow:var(--peg-chip);padding:0 10px}
/* segmentado de géneros: el grupo es la pegatina y la opción activa va rellena */
.pestanas{background:var(--papel-2);box-shadow:var(--peg-btn)}
.pestanas button.activo{background:var(--lila);color:var(--lila-txt);box-shadow:0 2px 6px -2px rgba(60,20,35,.3)}
.pestanas button.activo small{color:var(--lila-txt)}
/* controles del filtro */
.selector select{border-color:transparent;background-color:var(--papel-2);box-shadow:var(--peg-btn)}
.rango-spice input[type=range]::-webkit-slider-thumb{border:0;background-color:var(--rosa-2);box-shadow:var(--peg-btn)}
.rango-spice input[type=range]::-moz-range-thumb{border:0;background:var(--rosa-2);box-shadow:var(--peg-btn)}
.rango-nota input[type=range]::-webkit-slider-thumb{border:0;background:var(--rosa-2);box-shadow:var(--peg-btn)}
.rango-nota input[type=range]::-moz-range-thumb{border:0;background:var(--rosa-2);box-shadow:var(--peg-btn)}
.mas-filtros summary::before{box-shadow:var(--peg-chip)}
/* chips, estados y píldoras: pegatinas pequeñas */
.chip,span.estado,.estado:is(.leido,.leyendo,.ya,.proximo,.aprox),.pildora{border-color:transparent;box-shadow:var(--peg-chip)}
.chip{background:var(--papel-2);transition:transform .15s var(--suave),background .15s,color .15s}
.chip:hover{border-color:transparent;transform:translateY(-1px) rotate(-1.2deg)}
.chip.activo,.activos .chip{background:var(--lila);color:var(--lila-txt)}
.pildora-borde{background:var(--sup)}
.prosa a.chip{color:var(--tinta);font-weight:500;text-decoration:none}
.chips,.saltos{gap:10px}
.filtro-chips,.tabla dd,.activos{gap:8px}
.chips-scroll{padding:4px 4px 8px}
html.oscuro :is(.chip.activo,.activos .chip,.pestanas button.activo){background:var(--lila-2)}
/* índice de la reseña: sin raíl gris; la sección activa es una pegatina lila */
.indice{gap:4px}
.indice a{border-left:0;border-radius:12px;padding:8px 14px}
.indice a.activo{background:var(--lila);color:var(--lila-txt);box-shadow:var(--peg-chip)}
html.oscuro .indice a.activo{background:var(--lila-2)}
@media (max-width:900px){
  .escala-botones{gap:8px}
  .quiz-pie .btn-s{padding:0 12px}
}

/* =============================================================================================================
   POST-IT (20-oct-2026, idea de Pedro): los botones rectangulares y las etiquetas son banderitas de marcar páginas.
   Punta de color opaca a la izquierda (sombra interior) y cuerpo translúcido; esquinas casi rectas, un pelín
   torcidas, y al pasar el ratón se «despegan» hacia arriba. Lo redondo (Paso/Lo leo, guardar, flechas, iconos de la
   cabecera) sigue siendo pegatina. Copia del CSS anterior: scratchpad/style-antes-postit.css.
   ============================================================================================================= */
:root{--pi-rosa:#FF7AA8;--pi-menta:#4FC79C;--pi-lila:#A58BEA;--pi-ambar:#F2B33D;--pi-sombra:0 1px 1px rgba(60,20,35,.10),0 7px 12px -7px rgba(60,20,35,.32)}
html.oscuro{--pi-sombra:0 7px 12px -7px rgba(0,0,0,.7)}
.btn,.chip,.estado button,.pestanas button,.m-revelar,.enlace-quitar,.indice a{
  --pi-punta:var(--pi-lila);--pi-cuerpo:var(--lila);
  border:0;border-radius:2px 6px 6px 2px;padding-left:24px;
  background:color-mix(in srgb,var(--pi-cuerpo) 82%,transparent);
  box-shadow:inset 9px 0 0 var(--pi-punta),var(--pi-sombra);
  transition:transform .18s var(--suave),box-shadow .18s,background .18s}
.btn.btn-ico{padding:0 0 0 9px}   /* el icono, centrado en lo claro: sin contar la franja de 9px */
.btn:hover,.chip:hover,.estado button:hover,.pestanas button:hover,.m-revelar:hover,.enlace-quitar:hover,.indice a:hover{transform:translateY(-2px) rotate(-.6deg);box-shadow:inset 9px 0 0 var(--pi-punta),0 2px 2px rgba(60,20,35,.10),0 12px 16px -9px rgba(60,20,35,.36)}
.btn-rosa,.btn-rosa:hover{--pi-cuerpo:var(--frambuesa);--pi-punta:var(--frambuesa-2);background:var(--frambuesa);color:var(--sobre-frambuesa)}
.btn-menta,.btn-menta:hover{--pi-cuerpo:var(--menta);--pi-punta:var(--pi-menta)}
.chip{--pi-cuerpo:var(--sup);padding-left:20px}
.chip:nth-child(4n+1){--pi-punta:var(--pi-rosa)} .chip:nth-child(4n+2){--pi-punta:var(--pi-menta)} .chip:nth-child(4n+3){--pi-punta:var(--pi-ambar)}
.chip:nth-child(odd){rotate:-.5deg} .chip:nth-child(even){rotate:.4deg}
.chip.activo,.activos .chip{--pi-cuerpo:var(--lila-2);color:var(--lila-txt)}
.estado button{--pi-cuerpo:var(--sup)}
.estado button[data-estado=quiero]{--pi-punta:var(--pi-ambar)} .estado button[data-estado=leyendo]{--pi-punta:var(--pi-rosa)} .estado button[data-estado=leido]{--pi-punta:var(--pi-menta)}
.estado button.on{--pi-cuerpo:var(--rosa-2);font-weight:700}
.pestanas{background:none;box-shadow:none;gap:8px;padding:4px}
.pestanas button{--pi-cuerpo:var(--sup)}
.pestanas button.activo{--pi-cuerpo:var(--lila-2);--pi-punta:var(--pi-lila);color:var(--lila-txt)}
.indice a{--pi-cuerpo:var(--sup);margin-bottom:6px;display:block}
.indice a.activo{--pi-cuerpo:var(--lila);--pi-punta:var(--pi-rosa);translate:6px 0}
.m-revelar{--pi-punta:var(--pi-rosa);--pi-cuerpo:var(--sup)} .m-revelar:hover{background:var(--sup)}   /* blanco: sobre las cabeceras rosas se perdía */
html.oscuro .btn,html.oscuro .chip,html.oscuro .estado button,html.oscuro .pestanas button,html.oscuro .indice a{color:var(--tinta)}
html.oscuro .btn-rosa{color:var(--sobre-frambuesa)}
html.oscuro .chip.activo,html.oscuro .pestanas button.activo{color:var(--lila-txt)}