/* La estantería de grep.cat */

/* ---------- fuentes (alojadas aquí; licencia OFL en /fuentes) ---------- */
@font-face{font-family:Fraunces;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fuentes/fraunces-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}
@font-face{font-family:Fraunces;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fuentes/fraunces-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Fraunces;font-style:italic;font-weight:400;font-display:swap;
  src:url(/fuentes/fraunces-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}
@font-face{font-family:Fraunces;font-style:italic;font-weight:400;font-display:swap;
  src:url(/fuentes/fraunces-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fuentes/inter-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}
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fuentes/inter-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --pared:#efe6d8; --tinta:#3b2c20; --suave:#7a6653; --madera:#8a5a33; --madera-osc:#5c3d24;
  --papel:#fffdf7; --papel-borde:#e6dccb; --oro:#f1d9a0;
  /* libro abierto en horizontal: dos páginas de --w × --h */
  --w:clamp(240px,38vw,330px); --h:calc(var(--w)*1.36);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--pared);color:var(--tinta);font-family:Fraunces,serif;min-height:100vh;overflow-x:hidden}
button{font:inherit;color:inherit}
.envoltura{max-width:1000px;margin:0 auto;padding:0 16px 48px}

/* ---------- cabecera ---------- */
.top{display:flex;justify-content:flex-end;align-items:center;padding:20px 0 0}
.idiomas{display:flex;border:1px solid #d6c9b3;border-radius:99px;overflow:hidden}
.idiomas a{padding:4px 10px;font:600 12px Inter,sans-serif;letter-spacing:.06em;color:var(--suave);text-decoration:none}
.idiomas a+a{border-left:1px solid #d6c9b3}
.idiomas a:hover{color:var(--tinta)}
.idiomas a[aria-current="page"]{background:var(--tinta);color:var(--pared)}
.idiomas a:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
.intro{text-align:center;padding:26px 0 34px}
h1{font-size:clamp(30px,5.2vw,50px);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.005em;font-variation-settings:"opsz" 144}
.filete{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px auto 14px;color:var(--madera);font-size:12px}
.filete i{display:block;width:56px;height:1px;background:currentColor;opacity:.5}
.intro p{margin:0;color:var(--suave);font:500 13px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}

/* ---------- estantería ---------- */
.balda{display:flex;flex-wrap:wrap;align-items:flex-end;padding:0 14px;
  background:repeating-linear-gradient(to bottom,transparent 0 232px,var(--madera) 232px 248px,rgba(0,0,0,.18) 248px 256px,transparent 256px 264px)}
.hueco{height:232px;display:flex;align-items:flex-end;margin-bottom:32px;margin-right:4px}
.lomo{position:relative;border:0;padding:16px 0 12px;cursor:pointer;border-radius:3px 3px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  box-shadow:inset -5px 0 0 rgba(0,0,0,.14),inset 3px 0 0 rgba(255,255,255,.16);transition:transform .2s}
.lomo::before,.lomo::after{content:"";position:absolute;left:6px;right:6px;height:3px;border-top:1.5px solid var(--acento,var(--oro));border-bottom:1.5px solid var(--acento,var(--oro));opacity:.9}
.lomo::before{top:8px}.lomo::after{bottom:44px}
.lomo>img{width:26px;height:26px;border-radius:6px;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.lomo>img.marca{box-shadow:none;border-radius:0;object-fit:contain}
.tit-caja{position:relative;flex:1;align-self:stretch;margin:6px 0 14px}
.tit-caja img{position:absolute;left:50%;top:50%;height:auto;transform:translate(-50%,-50%) rotate(90deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.lomo:hover,.lomo:focus-visible{transform:translateY(-8px)}
.lomo:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.lomo.fuera{visibility:hidden}
/* decoración */
.relleno{border-radius:3px 3px 0 0;box-shadow:inset -4px 0 0 rgba(0,0,0,.08)}
.relleno.r1{width:34px;height:150px;background:#d8cdbb}
.relleno.r2{width:30px;height:160px;background:#c9b9a0}
.inclinado{transform:rotate(-7deg);transform-origin:bottom left;margin-left:10px}
.pila{display:flex;flex-direction:column;align-items:center;margin:0 10px}
.pila i{display:block;height:16px;border-radius:2px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.pila i:nth-child(1){width:120px;background:#9b6b8e}
.pila i:nth-child(2){width:110px;background:#6f8fa6}
.pila i:nth-child(3){width:126px;background:#c47a4a}
.sujeta{width:14px;height:120px;background:var(--madera-osc);border-radius:3px 3px 0 0}
/* sin JavaScript: lista sencilla de proyectos */
.sin-js{list-style:none;padding:0;margin:0 0 40px;text-align:center;font-size:18px}
.sin-js li{margin:.4em 0}
.sin-js a{color:var(--tinta)}

/* ---------- atril y libro ---------- */
.atril{position:relative;height:calc(var(--h) + 60px);display:grid;place-items:center;perspective:2000px;margin-top:6px}
.pista{position:absolute;font-style:italic;color:var(--suave);font-size:18px;margin:0;transition:opacity .3s}
.pista.oculta{opacity:0}
.libro{position:relative;width:calc(var(--w)*2);height:var(--h);transform-style:preserve-3d;
  transform:translateX(calc(var(--w)/-2));transition:transform .9s cubic-bezier(.3,.1,.2,1);visibility:hidden}
.libro.visible{visibility:visible}
.libro.abierto{transform:translateX(0)}
.hoja,.tapa{position:absolute;top:0;left:var(--w);width:var(--w);height:var(--h)}
.hoja{background:linear-gradient(90deg,#e9e0cc 0,var(--papel) 7%);border-radius:0 4px 4px 0;
  box-shadow:2px 2px 0 #efe7d6,4px 4px 0 #e2d7c0,6px 6px 0 #d6c9ae,10px 16px 28px -8px rgba(0,0,0,.35)}
.tapa{transform-origin:left center;transform-style:preserve-3d;transform:rotateY(0) translateZ(1px);transition:transform .9s cubic-bezier(.3,.1,.2,1);pointer-events:none}
.libro.abierto .tapa{transform:rotateY(-180deg) translateZ(1px)}
.cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.frente{border-radius:0 4px 4px 0;color:var(--oro);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;text-align:center;padding:12%;
  box-shadow:inset 10px 0 0 rgba(0,0,0,.18),inset 12px 0 0 rgba(255,255,255,.12),10px 16px 28px -8px rgba(0,0,0,.4)}
.frente::after{content:"";position:absolute;inset:7%;left:calc(7% + 10px);border:2px solid var(--acento,currentColor);opacity:.85;border-radius:2px}
.frente img{height:auto;position:relative;z-index:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.frente img.marca{width:30%}
.dorso{transform:rotateY(180deg);background:linear-gradient(270deg,#e9e0cc 0,var(--papel) 7%);border-radius:4px 0 0 4px;
  box-shadow:-2px 2px 0 #efe7d6,-4px 4px 0 #e2d7c0,-6px 6px 0 #d6c9ae;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;padding:12%;text-align:center}
/* Chrome no detecta bien los clics dentro de caras 3D giradas: al terminar de abrirse,
   la contraportada girada se sustituye por una copia plana (.plano) que sí es clicable.
   Su relleno va en unidades de página: en % se calcularía sobre el libro entero. */
.dorso.plano{transform:none;left:0;right:auto;bottom:auto;width:var(--w);height:var(--h);visibility:hidden;padding:calc(var(--w)*.12)}
.libro.listo .dorso.plano{visibility:visible}
.libro.listo .tapa{visibility:hidden}
.dorso .marco-img{width:62%;aspect-ratio:1;border:1px solid var(--papel-borde);border-top:4px solid var(--acento,var(--papel-borde));padding:6%;background:#fff}
.dorso .marco-img img{display:block;width:100%;height:100%;border-radius:20%}
.dorso .ficha{font-style:italic;color:var(--suave);font-size:clamp(12px,calc(var(--w)*.048),16px)}
.dorso .ficha b{display:block;font-style:normal;color:var(--tinta);font-size:1.5em}
.der{position:absolute;inset:0;padding:11% 11% 10% 13%;display:flex;flex-direction:column;font-size:clamp(12px,calc(var(--w)*.048),16px);line-height:1.55}
.der .meta{font:600 .72em Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a0784a}
.der h2{font-size:2em;line-height:1.05;margin:.25em 0 .5em}
.der p{margin:0 0 .8em}
.der .estado{align-self:flex-start;font:600 .72em Inter,sans-serif;border-radius:99px;padding:.3em .9em;margin-bottom:auto}
.estado.publicado{background:#dff3e3;color:#1f6b35}
.estado.pruebas{background:#fff1c9;color:#8a5b00}
.estado.prep{background:#ece6da;color:#7a6653}
.tiendas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5em .8em;margin-top:1.1em;font-style:normal}
.tiendas img{display:block;height:36px;width:auto}
.tiendas .google img{border-radius:5px}
.tiendas small{flex-basis:100%;text-align:center;font:italic .8em Fraunces,serif;color:var(--suave)}
.tiendas a{line-height:0}
.der .acciones{display:flex;flex-direction:column;gap:.5em;margin-top:1em;border-top:1px solid var(--papel-borde);padding-top:.8em}
.der a{font:600 .9em Inter,sans-serif;color:var(--enlace,#b8452f);text-decoration:none}
.der a:hover{text-decoration:underline}
.der button{align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;font:.85em Inter,sans-serif;color:var(--suave)}
.der button:hover{color:var(--tinta)}
.der .folio{position:absolute;bottom:4.5%;right:11%;font-size:.75em;color:var(--suave)}

/* libro en vuelo: bloque 3D con lomo, tapa, trasera y canto de páginas */
.bloque{position:absolute;z-index:50;pointer-events:none;transform-style:preserve-3d;transform-origin:50% 50%}
.bloque>div{position:absolute;top:0;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.b-tras{left:0;width:100%;border-radius:4px 0 0 4px}
.b-canto{background:repeating-linear-gradient(90deg,#fffdf7 0 2px,#e2d7c0 2px 3px)}
.b-lomo{overflow:hidden}

/* ---------- pie ---------- */
footer{margin-top:24px;font:13px Inter,sans-serif;color:var(--suave);text-align:center}
footer .legal{margin:10px auto 0;max-width:640px;font-size:11px;line-height:1.5;opacity:.85}

/* ---------- móvil: el libro se abre hacia arriba (como un bloc) ---------- */
@media (max-width:620px){
  :root{--w:min(calc(100vw - 40px),380px);--h:calc(var(--w)*1.02)}
  .atril{height:calc(var(--h)*2 + 40px)}
  .libro{width:var(--w);height:calc(var(--h)*2);transform:translateY(calc(var(--h)/-2))}
  .libro.abierto{transform:translateY(0)}
  .hoja,.tapa{left:0;top:var(--h)}
  .hoja{background:linear-gradient(180deg,#e9e0cc 0,var(--papel) 7%);border-radius:0 0 4px 4px}
  .tapa{transform-origin:center top;transform:rotateX(0) translateZ(1px)}
  .libro.abierto .tapa{transform:rotateX(180deg) translateZ(1px)}
  .frente{border-radius:0 0 4px 4px;box-shadow:inset 0 10px 0 rgba(0,0,0,.18),10px 16px 28px -8px rgba(0,0,0,.4)}
  .frente::after{left:7%;top:calc(7% + 10px)}
  .dorso{transform:rotateX(180deg);background:linear-gradient(0deg,#e9e0cc 0,var(--papel) 7%);border-radius:4px 4px 0 0;flex-direction:row;padding:8% 10%;text-align:left}
  .dorso.plano{padding:calc(var(--w)*.08) calc(var(--w)*.1)}
  .dorso .marco-img{width:42%}
  .tiendas{justify-content:flex-start}.tiendas small{text-align:left}
  .der{padding:9% 9% 8%;font-size:clamp(12px,calc(var(--w)*.04),15px)}
  .der h2{font-size:1.7em}
}
@media (prefers-reduced-motion:reduce){.libro,.tapa{transition-duration:.01s}}

/* ---------- página 404 ---------- */
.error{text-align:center;padding:70px 0 60px}
.error h1{font-variant-numeric:lining-nums}
.error .libro-caido{position:relative;width:190px;height:40px;margin:0 auto 42px;border-radius:3px;background:linear-gradient(180deg,#c9b9a0,#a8977c);transform:rotate(-3deg);box-shadow:inset 0 -5px 0 rgba(0,0,0,.12)}
.error .libro-caido::after{content:"";position:absolute;left:-40px;right:-40px;bottom:-14px;height:10px;background:var(--madera);border-radius:2px;transform:rotate(3deg)}
.error p{color:var(--suave);font-size:18px;margin:.4em 0}
.error a{color:var(--tinta);font:600 15px Inter,sans-serif}