/* WS Editore — libro 3D girando.
   CSS ACOTADO: todo vive bajo .lb3, sin resets ni estilos de body,
   para poder clavarlo en la web de producción sin tocar nada más.
   Sobre fondo ámbar del hero: sin fondos crema, rótulo en color claro. */
@font-face{font-family:'Fraunces3D';src:url('Fraunces-700.woff2') format('woff2');font-weight:700;font-display:swap}

.lb3{
  --w:clamp(215px,26vw,300px);
  --h:calc(var(--w) * 1.4142);
  --d:calc(var(--w) * .115);
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:calc(var(--h) + 92px);
  perspective:1400px;padding-bottom:58px;
}
/* --- sombras: JS las ancla al borde inferior real del libro --- */
.lb3-sombra,.lb3-sombra2{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  transition:width .12s linear,opacity .12s linear;
}
.lb3-sombra{
  width:calc(var(--w) * var(--huella, .9));height:16px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%, rgba(38,17,6,.68) 0%, rgba(38,17,6,.34) 45%, rgba(38,17,6,0) 76%);
  filter:blur(3px);
}
.lb3-sombra2{
  width:calc(var(--w) * var(--huella2, 1.14));height:30px;
  transform:translateX(-50%) translateX(var(--corre, 0px));
  background:radial-gradient(ellipse at 50% 50%, rgba(38,17,6,.32) 0%, rgba(38,17,6,.12) 50%, rgba(38,17,6,0) 78%);
  filter:blur(11px);
}

/* --- el libro: 6 caras, 0 motores, 0 WebGL --- */
.lb3-book{
  position:relative;z-index:2;width:var(--w);height:var(--h);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-30deg));
  will-change:transform;
}
.lb3-face{position:absolute;backface-visibility:hidden}
.lb3-front{
  inset:0;transform:translateZ(calc(var(--d)/2));
  background:#FEE187;border-radius:1px 3px 3px 1px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(58,44,20,.10);
}
.lb3-front img{width:100%;height:100%;object-fit:cover;display:block}
.lb3-back{
  inset:0;transform:rotateY(180deg) translateZ(calc(var(--d)/2));
  background:#0E5A6F url('contraportada-editore.webp') center/100% 100% no-repeat;
  border-radius:3px 1px 1px 3px;overflow:hidden;
}
.lb3-spine{
  width:var(--d);height:var(--h);left:calc(var(--d)/-2);top:0;
  transform:rotateY(-90deg);
  background:
    linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 14%, rgba(255,255,255,.10) 34%, rgba(0,0,0,0) 62%, rgba(0,0,0,.30) 100%),
    linear-gradient(90deg,#0B4A5C 0%,#12657B 45%,#0B4A5C 100%);
  display:flex;align-items:center;justify-content:center;
}
.lb3-spine span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'Fraunces3D',Georgia,serif;font-size:11px;letter-spacing:.16em;
  color:rgba(254,225,135,.92);white-space:nowrap;
}
.lb3-edge{
  width:var(--d);height:var(--h);left:calc(var(--w) - var(--d)/2);top:0;
  transform:rotateY(90deg);
  background:
    linear-gradient(180deg, rgba(58,44,20,.20), rgba(58,44,20,0) 9%, rgba(58,44,20,0) 91%, rgba(58,44,20,.22)),
    repeating-linear-gradient(90deg, #F7EEDC 0 3px, #B9A87F 3px 5px),
    #FBF4E4;
  box-shadow:inset 0 0 14px rgba(58,44,20,.22);
}
.lb3-top,.lb3-bot{
  width:var(--w);height:var(--d);left:0;
  background:repeating-linear-gradient(0deg,#F7EEDC 0 3px,#B9A87F 3px 5px), #EDE2CA;
}
.lb3-top{top:calc(var(--d)/-2);transform:rotateX(90deg);box-shadow:inset 0 0 10px rgba(58,44,20,.25)}
.lb3-bot{top:calc(var(--h) - var(--d)/2);transform:rotateX(-90deg);box-shadow:inset 0 0 14px rgba(58,44,20,.35)}
.lb3-hinge{
  position:absolute;top:0;left:0;width:28px;height:100%;pointer-events:none;
  background:linear-gradient(90deg,rgba(58,44,20,.42) 0%,rgba(58,44,20,.16) 42%,rgba(255,255,255,.16) 58%,rgba(58,44,20,0) 100%);
  transform:translateZ(calc(var(--d)/2 + .5px));
}
.lb3-luz{
  position:absolute;top:0;left:0;width:100%;height:5px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:translateZ(calc(var(--d)/2 + .6px));
}
/* rótulo: sobre el hero ámbar va en claro, no en marrón */
.lb3-pista{
  position:absolute;bottom:-2px;left:0;right:0;text-align:center;margin:0;
  font-size:.735rem;letter-spacing:.01em;color:rgba(255,247,234,.72);
}
.lb3-pista b{color:#FEE187}

@media (max-width:720px){
  .lb3{--w:min(56vw,230px);min-height:calc(var(--h) + 74px);padding-bottom:46px}
}


/* --- El sitio esconde .hero-visual desde 960 px hacia abajo, asi que el libro
   no existia en celular. Se activa a proposito (decision de Walter). --- */
@media (max-width:960px){
  .hero-grid .hero-visual{ display:flex; }
  .lb3{ margin-top:1.5rem; }
}