/* ==========================================================================
   Fachada de la tienda con animación al hacer scroll (página de inicio)
   Sin la clase zl-fachada--anim (sin JS o con «reducir movimiento») se ve quieta en su estado final:
   por eso todas las variables tienen 1 como valor por defecto.
   ========================================================================== */
.zl-fachada{position:relative;margin:0;background:#0b0a08;color:#f3ecdf}
.zl-fachada-pista{position:relative}
.zl-fachada-escena{position:relative;height:72vh;min-height:420px;overflow:hidden;background:#0b0a08}
.zl-fachada--anim .zl-fachada-pista{height:230vh}
.zl-fachada--anim .zl-fachada-escena{position:absolute;left:0;right:0;top:0;height:var(--alto,100vh);min-height:0}
.zl-fachada--anim.zl-fachada--fija .zl-fachada-escena{position:fixed;top:var(--cabecera,0px);z-index:5}
.zl-fachada--anim.zl-fachada--final .zl-fachada-escena{top:auto;bottom:0}
.zl-fachada-marco{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;clip-path:inset(calc(7% * (1 - var(--e,1))) calc(20% * (1 - var(--e,1))) calc(19% * (1 - var(--e,1))) round calc(26px * (1 - var(--e,1))))}
.zl-fachada .zl-fachada-marco img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0;transform:translateY(calc(6% * (1 - var(--e,1)))) scale(calc(1.12 - .12 * var(--z,1)));transform-origin:50% 0;will-change:transform}
.zl-fachada-sombra{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:calc(1 - .72 * var(--z,1));background:radial-gradient(ellipse 58% 72% at 50% 34%,rgba(11,10,8,0) 0%,rgba(11,10,8,.3) 62%,rgba(11,10,8,.82) 100%)}
.zl-fachada-degradado{position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;background:linear-gradient(to top,rgba(11,10,8,.94),rgba(11,10,8,0));opacity:var(--t1,1)}
.zl-fachada .zl-fachada-intro{position:absolute;left:0;right:0;bottom:7%;margin:0;text-align:center;font-size:11px;letter-spacing:6px;text-transform:uppercase;color:#d9b36c;opacity:calc(1 - var(--e,1) * 2.4)}
.zl-fachada-texto{position:absolute;left:20px;right:20px;bottom:8%;text-align:center}
.zl-fachada .zl-fachada-eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:4px;text-transform:uppercase;color:#d9b36c;font-weight:600;opacity:var(--t1,1);transform:translateY(calc(18px * (1 - var(--t1,1))))}
.zl-fachada .zl-fachada-titulo{margin:0 0 10px;padding:0;border:0;font-family:Georgia,"Times New Roman",serif;font-size:56px;line-height:1.05;font-weight:400;color:#fff;text-transform:none;letter-spacing:.5px;opacity:var(--t2,1);transform:translateY(calc(26px * (1 - var(--t2,1))))}
.zl-fachada .zl-fachada-sub{margin:0 0 24px;font-size:17px;color:#e6dccb;opacity:var(--t3,1);transform:translateY(calc(22px * (1 - var(--t3,1))))}
.zl-fachada a.zl-fachada-boton{display:inline-block;padding:13px 34px;border:1px solid rgba(243,236,223,.75);border-radius:40px;color:#fff;font-size:14px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;background:rgba(11,10,8,.3);opacity:var(--t3,1);transform:translateY(calc(22px * (1 - var(--t3,1))))}
.zl-fachada a.zl-fachada-boton:hover,.zl-fachada a.zl-fachada-boton:focus{background:#f3ecdf;color:#16130F;text-decoration:none}
.zl-fachada a.zl-fachada-boton:focus{outline:3px solid #d9b36c;outline-offset:3px}
.zl-fachada a.zl-fachada-boton:focus:not(:focus-visible){outline:none}
/* Mientras el texto aún no ha aparecido, el botón no se puede pulsar ni enfocar */
/* (revisión) sin visibility:hidden para que el teclado y los lectores de pantalla lleguen al botón */
.zl-fachada--anim:not(.zl-fachada--texto) a.zl-fachada-boton{pointer-events:none}
.zl-fachada--anim a.zl-fachada-boton:focus{opacity:1;transform:none}
.zl-fachada--anim:focus-within .zl-fachada-intro{opacity:0}
/* (revisión) el texto no queda debajo del aviso de cookies mientras la escena está fija */
.zl-fachada--anim .zl-fachada-texto{bottom:calc(8% + var(--aviso,0px))}
@media (min-width:768px) and (max-width:1199px){
.zl-fachada .zl-fachada-titulo{font-size:44px}
}
@media (max-width:767px){
.zl-fachada{margin-top:0}
.zl-fachada-escena{height:68vh;min-height:380px}
.zl-fachada--anim .zl-fachada-pista{height:200vh}
.zl-fachada-marco{clip-path:inset(calc(4% * (1 - var(--e,1))) calc(7% * (1 - var(--e,1))) calc(16% * (1 - var(--e,1))) round calc(20px * (1 - var(--e,1))))}
.zl-fachada .zl-fachada-marco img{transform:translateY(calc(5% * (1 - var(--e,1)))) scale(calc(1.1 - .1 * var(--z,1)))}
.zl-fachada-sombra{background:radial-gradient(ellipse 85% 60% at 50% 34%,rgba(11,10,8,0) 0%,rgba(11,10,8,.3) 62%,rgba(11,10,8,.82) 100%)}
.zl-fachada-degradado{height:62%}
.zl-fachada .zl-fachada-intro{bottom:6%;font-size:10px;letter-spacing:5px}
.zl-fachada .zl-fachada-titulo{font-size:34px;line-height:1.1}
.zl-fachada .zl-fachada-sub{margin-bottom:18px;font-size:15px}
.zl-fachada a.zl-fachada-boton{padding:12px 28px;font-size:13px}
}
/* Fondo del principio: la foto empieza como tarjeta con sombra sobre el blanco de la página
   (Paul: el fondo negro de la 1.1.12 parecía que la imagen no había cargado). */
.zl-fachada-halo{position:absolute;top:7%;left:20%;right:20%;bottom:19%;border-radius:26px;pointer-events:none;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,236,200,.22);opacity:calc(1 - var(--e,1))}
.zl-fachada--claro,.zl-fachada--claro .zl-fachada-escena{background:#fff}
.zl-fachada--claro .zl-fachada-halo{box-shadow:0 28px 70px rgba(22,19,15,.28)}
.zl-fachada--claro .zl-fachada-intro{color:#7B1A19;text-shadow:none}
.zl-fachada--claro .zl-fachada-sombra{clip-path:inset(calc(7% * (1 - var(--e,1))) calc(20% * (1 - var(--e,1))) calc(19% * (1 - var(--e,1))) round calc(26px * (1 - var(--e,1))))}
@media (max-width:767px){
.zl-fachada-halo{top:4%;left:7%;right:7%;bottom:16%;border-radius:20px}
.zl-fachada--claro .zl-fachada-sombra{clip-path:inset(calc(4% * (1 - var(--e,1))) calc(7% * (1 - var(--e,1))) calc(16% * (1 - var(--e,1))) round calc(20px * (1 - var(--e,1))))}
}
/* Móvil con animación (el script pone zl-fachada--movil y calcula tarjeta, foto, degradado y texto en píxeles):
   empieza la fachada entera y alejada, crece hasta dejar ver la puerta y parte de los escaparates (sin recorrido
   lateral) y el texto sube DENTRO de la foto, abajo, como en ordenador. Decisión de Paul, 13-sep-2026. */
@media (max-width:767px){
.zl-fachada--movil .zl-fachada-marco img{left:50%;max-width:none;object-fit:fill;transform-origin:50% 50%}
.zl-fachada--movil .zl-fachada-intro{bottom:auto}
.zl-fachada--movil .zl-fachada-sombra{opacity:.3}
.zl-fachada--movil .zl-fachada-titulo{font-size:30px}
}
/* La foto antigua de la tienda del creador de páginas sobra cuando está la fachada (el script también la oculta) */
body#index:has(#zl-fachada) .box-pebanner > .ApColumn:has(img[src*="tienda2"]){display:none!important}

/* ==========================================================================
   Bloque del libro en la página de inicio
   ========================================================================== */
.zl-portada{background:#14110d;color:#EDE4D3;margin:40px 0;padding:48px 0}
.zl-fachada + .zl-portada{margin-top:0}
.zl-portada .zl-portada-inner{display:flex;align-items:center;gap:52px;max-width:980px;margin:0 auto}
.zl-portada .zl-portada-foto{display:block;flex:0 0 320px}
.zl-portada .zl-portada-foto img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.zl-portada .zl-portada-texto{flex:1 1 auto;min-width:0;text-align:left}
.zl-portada .zl-portada-eyebrow{margin:0 0 10px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:#d9b36c;font-weight:600}
.zl-portada .zl-portada-titulo{margin:0;padding:0;font-family:Georgia,"Times New Roman",serif;font-size:50px;line-height:1.05;font-weight:400;color:#fff;letter-spacing:.5px;text-transform:none;border:0}
.zl-portada .zl-portada-sub{margin:4px 0 20px;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:24px;color:#cdbb9c}
.zl-portada .zl-portada-gancho{margin:0 0 18px;padding:2px 0 2px 16px;border-left:3px solid #b0443f;background:none}
.zl-portada .zl-portada-gancho p{margin:0}
.zl-portada .zl-portada-gancho-eu{font-family:Georgia,"Times New Roman",serif;font-size:20px;line-height:1.4;color:#fff}
.zl-portada .zl-portada-gancho-es{margin-top:4px!important;font-style:italic;font-size:14px;color:#cdbb9c}
.zl-portada .zl-portada-desc{margin:0 0 24px;font-size:16px;line-height:1.6;color:#EDE4D3}
.zl-portada a.zl-portada-boton{display:inline-block;padding:15px 30px;border-radius:6px;background:#EDE4D3;color:#16130F;font-size:16px;font-weight:600;letter-spacing:.5px;line-height:1.3;text-decoration:none;text-align:center}
.zl-portada a.zl-portada-boton:hover,.zl-portada a.zl-portada-boton:focus{background:#fff;color:#16130F;text-decoration:none}
/* El tema quita el contorno a todos los enlaces (a:focus{outline:none}): se devuelve solo para el teclado */
.zl-portada a.zl-portada-boton:focus{outline:3px solid #d9b36c;outline-offset:3px}
.zl-portada a.zl-portada-boton:focus:not(:focus-visible){outline:none}
@media (max-width:767px){
.zl-portada{margin:28px 0;padding:36px 0}
.zl-portada .zl-portada-inner{flex-direction:column;gap:24px}
.zl-portada .zl-portada-foto{flex:none;width:100%;max-width:300px;margin:0 auto}
.zl-portada .zl-portada-texto{text-align:center}
.zl-portada .zl-portada-titulo{font-size:40px}
.zl-portada .zl-portada-sub{font-size:21px;margin-bottom:16px}
.zl-portada .zl-portada-gancho{border-left:0;padding:0}
.zl-portada .zl-portada-gancho-eu{font-size:18px}
.zl-portada a.zl-portada-boton{display:block;width:100%}
}

/* ==========================================================================
   Menú: enlace «Libro» (clase zl-menu-libro puesta en el megamenú)
   ========================================================================== */
ul.megamenu > li.zl-menu-libro > a .menu-title{color:#7B1A19!important}
/* Con LIBRO son 10 apartados en un menú de 1170px. Los li son inline-block y dejan ~3,4px de hueco entre ellos:
   a 14px por lado sumaban 1173px en castellano y ~1190px en euskera (NUESTRA TIENDA / GURE DENDA bajaban de fila).
   A 11px quedan ~58px de margen en castellano y ~40px en euskera. Gana en especificidad a la regla de custom.css del 5-sep. */
@media (min-width:1200px){
ul.megamenu.horizontal > li.nav-item > a.nav-link{padding-left:11px!important;padding-right:11px!important}
}
@media (min-width:992px) and (max-width:1199px){
ul.megamenu.horizontal > li.nav-item > a.nav-link{padding-left:5px!important;padding-right:5px!important}
}
@media (max-width:991px){
ul.megamenu > li.zl-menu-libro > a .menu-title{font-size:15px!important;font-weight:600!important}
}