/* Carrusel 3D de libros · estilos
   Usa las variables de la web si existen; si no, estos valores por defecto. */
.l3d{
  --l3d-crema:#fbf6ee;
  --l3d-crema-2:#f3eadb;
  --l3d-tinta:#352b25;
  --l3d-tinta-2:#62554a;
  --l3d-acento:#98513a;
  --l3d-acento-h:#743a2a;
  --l3d-linea:#d8cbbc;
  font-family:var(--display-font,-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif);
  color:var(--l3d-tinta);
  margin:clamp(2rem,4vw,4rem) 0 4rem;
}
.l3d *{box-sizing:border-box}

.l3d-escena{
  position:relative;
  height:clamp(21rem,59vh,35rem);
  cursor:grab;
  touch-action:pan-y;
  background:
    radial-gradient(ellipse 60% 22% at 50% 82%,rgba(201,154,59,.20),transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 40%,rgba(255,255,255,.55),transparent 75%);
  border-bottom:1px solid var(--l3d-linea);
  overflow:hidden;
}
.l3d-escena::after{
  content:"";position:absolute;z-index:0;top:50%;left:50%;height:82%;width:auto;
  aspect-ratio:var(--cover-ratio,648 / 976);transform:translate(-50%,-50%);
  border-radius:2px;box-shadow:0 16px 23px rgba(55,36,22,.19),0 3px 5px rgba(55,36,22,.1);
  pointer-events:none;
}
.l3d-listo .l3d-escena::after{display:none}
.l3d-escena.agarrando{cursor:grabbing}
.l3d-escena:focus-visible{outline:2px solid var(--l3d-acento);outline-offset:-2px}
.l3d-escena canvas{display:block;width:100%;height:100%}
.l3d-portada{
  position:absolute;top:50%;left:50%;height:84%;width:auto;max-width:70%;object-fit:contain;
  --crop-scale:1.18;--crop-top:7.7%;--crop-right:8%;--crop-bottom:7.6%;--crop-left:7.7%;
  clip-path:inset(var(--crop-top) var(--crop-right) var(--crop-bottom) var(--crop-left));
  transform:translate(-50%,-50%) scale(var(--crop-scale));
  filter:drop-shadow(0 12px 14px rgba(55,36,22,.16));
}
.l3d-portada[src$="nana-para-dormir-a-mis-abuelos.webp"]{--crop-scale:1.180;--crop-top:7.73%;--crop-right:7.94%;--crop-bottom:7.55%;--crop-left:7.68%}
.l3d-portada[src$="instrucciones-a-mis-hijos.webp"]{--crop-scale:1.179;--crop-top:7.29%;--crop-right:8.46%;--crop-bottom:7.90%;--crop-left:8.46%}
.l3d-portada[src$="te-necesitas.webp"]{--crop-scale:1.277;--crop-top:10.76%;--crop-right:8.85%;--crop-bottom:10.94%;--crop-left:8.46%}
.l3d-portada[src$="tengo-que-hablar-conmigo-seriamente.webp"]{--crop-scale:1.263;--crop-top:9.20%;--crop-right:10.29%;--crop-bottom:11.63%;--crop-left:10.81%}
.l3d-portada[src$="abonando-el-jardin.webp"]{--crop-scale:1.162;--crop-top:6.25%;--crop-right:10.16%;--crop-bottom:7.73%;--crop-left:9.51%}
.l3d-portada[src$="tu.webp"]{--crop-scale:1.147;--crop-top:6.34%;--crop-right:6.64%;--crop-bottom:6.51%;--crop-left:6.64%}
.l3d-portada[src$="queridos-jovenes.webp"]{--crop-scale:1.190;--crop-top:6.16%;--crop-right:9.77%;--crop-bottom:9.81%;--crop-left:8.85%}
.l3d-portada[src$="ahora-que-soy-arena.webp"]{--crop-scale:1.190;--crop-top:6.94%;--crop-right:7.68%;--crop-bottom:9.03%;--crop-left:7.94%}
.l3d-portada[src$="ceniza-viva.webp"]{--crop-scale:1.223;--crop-top:8.85%;--crop-right:10.29%;--crop-bottom:9.38%;--crop-left:10.03%}
.l3d-portada:not(.l3d-lateral){z-index:1}
.l3d-lateral{height:62%;opacity:.67;filter:drop-shadow(0 7px 10px rgba(55,36,22,.09))}
.l3d-lateral-izq{left:20%;transform:translate(-50%,-45%) perspective(800px) rotateY(38deg) scale(var(--crop-scale))}
.l3d-lateral-der{left:80%;transform:translate(-50%,-45%) perspective(800px) rotateY(-38deg) scale(var(--crop-scale))}
.l3d-listo .l3d-portada{display:none}
.l3d-sin-webgl .l3d-escena canvas{display:none}

.l3d-ayuda{
  position:absolute;left:0;right:0;bottom:.7rem;text-align:center;
  font-size:.82rem;color:var(--l3d-tinta-2);pointer-events:none;
}

.l3d-panel{
  display:grid;gap:1.1rem;justify-items:center;text-align:center;
  padding:2rem 1rem 0;
}
.l3d-titulo{
  font-family:inherit;font-weight:700;
  font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;margin:0;min-height:2.4em;
  display:flex;align-items:center;justify-content:center;
}
.l3d-meta{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0;color:var(--l3d-tinta-2)}
.l3d-meta strong{font-size:1.35rem;line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--l3d-tinta);font-variant-numeric:tabular-nums}
.l3d-meta span{border-left:1px solid var(--l3d-linea);padding-left:.75rem;font-size:.82rem;line-height:1.3}
.l3d-acciones{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.35rem;border:1px solid #dccfc0;border-radius:999px;background:rgba(255,255,255,.38);box-shadow:0 5px 18px rgba(55,36,22,.035)}

.l3d-flecha,.l3d-anadir{
  font:inherit;font-weight:600;cursor:pointer;
  transition:background-color .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.l3d-flecha{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--l3d-tinta);
}
.l3d-flecha svg{width:1.25rem;height:1.25rem}
.l3d-flecha:hover{background:var(--l3d-tinta);color:var(--l3d-crema)}
.l3d-flecha:active{transform:scale(.93)}
.l3d-anadir{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;width:min(100%,18rem);min-height:3.6rem;
  padding:.45rem .5rem .45rem 1.35rem;border:1px solid var(--l3d-acento);border-radius:999px;
  background:var(--l3d-acento);color:#fff;font-size:.95rem;text-align:left;
  box-shadow:0 8px 20px rgba(125,65,44,.16);
}
.l3d-anadir-icon{display:grid;place-items:center;flex:none;width:2.55rem;height:2.55rem;border-radius:50%;background:rgba(255,255,255,.17)}
.l3d-anadir-icon svg{width:1.15rem;height:1.15rem}
.l3d-anadir:hover{background:var(--l3d-acento-h);border-color:var(--l3d-acento-h);box-shadow:0 11px 24px rgba(125,65,44,.22);transform:translateY(-2px)}
.l3d-anadir:active{transform:translateY(0)}
.l3d-anadir:disabled{cursor:wait;opacity:.82;transform:none}
.l3d button:focus-visible{outline:2px solid var(--l3d-acento);outline-offset:3px}
.l3d-cuenta{min-width:5.25rem;font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--l3d-tinta-2)}
.l3d-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.5rem;font-size:.86rem;font-weight:700}
.l3d-links a{text-underline-offset:4px;color:#684533}
.l3d-cart-link{display:inline-flex;align-items:center;gap:.45rem}
.l3d-cart-count{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .3rem;border-radius:999px;background:#e8d9ca;color:#533a2e;font-size:.72rem;font-variant-numeric:tabular-nums;text-decoration:none}
.l3d-flying-cover.flying-book.book-face{border:0;background:transparent;box-shadow:none;overflow:visible;padding:0}
.l3d-flying-cover .l3d-portada{height:100%;max-width:none;filter:drop-shadow(0 8px 12px rgba(55,36,22,.24))}
.l3d-estado{min-height:1.4em;margin:0;font-size:.85rem;color:#375747}
.catalog-heading{font-size:clamp(1.5rem,2.8vw,2rem);margin:0 0 1.5rem;color:#352b25}

.l3d-vivo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* La portada WebP sigue siendo navegable si el navegador no dispone de WebGL. */

@media(max-width:540px){
  .l3d{margin:2rem 0 3rem}
  .l3d-escena{height:clamp(19rem,52vh,26rem)}
  .l3d-portada{height:78%}
  .l3d-lateral{height:55%;opacity:.48}
  .l3d-lateral-izq{left:9%}
  .l3d-lateral-der{left:91%}
  .l3d-panel{gap:.95rem;padding-top:1.5rem}
}

@media(prefers-reduced-motion:reduce){
  .l3d *{transition:none!important}
}