/* ══════════════════════════════════════════════════════════
   HERO · LIBRERÍA — repisa con dos divisiones (Español / English)
   Objetos 3D: tapa blanda, tapa dura, iPad, Kindle y celular.
   El panel de compra (pastillas, etiquetas, CTA) usa estilos de rack.css.
   ══════════════════════════════════════════════════════════ */

@font-face {
}

.st {
  --k: 1; --sk: 1;
  --stage-h: 41rem;
  --floor: 336;
  position: relative; height: var(--stage-h);
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
}
.st-scene {
  position: absolute; left: 0; right: 0; top: 0; height: calc(390px * var(--k));
  perspective: 1600px; perspective-origin: 50% 35%;
  transition: filter .6s ease, opacity .6s ease;
}
.st.is-open .st-scene { filter: blur(5px); opacity: .42; }
.st.is-open .st-scene:hover { opacity: .58; }

/* ── Mueble ── */
.st-set { position: absolute; inset: 0; pointer-events: none; }
.st-set > * { position: absolute; inset: 0; display: none; }
.st[data-alt="repisa"] .set-repisa, .st[data-alt="pila"] .set-pila, .st[data-alt="vidriera"] .set-vidriera { display: block; }
.st-set > * > * { position: absolute; display: block; }
.st-wood { background: linear-gradient(to bottom, #a77c3f, var(--gold2) 40%, #6b4c22); }
.st-back {
  left: calc(50% - 430px * var(--k)); width: calc(860px * var(--k));
  top: calc(16px * var(--k)); height: calc((var(--floor) - 16) * var(--k) * 1px);
  background:
    radial-gradient(40% 70% at 30% 0%, rgba(230,208,154,.26), transparent 70%),
    radial-gradient(30% 70% at 80% 0%, rgba(230,208,154,.22), transparent 70%),
    linear-gradient(to bottom, #2c251d, #1d1913 70%, #18140F);
  box-shadow: inset 0 22px 30px -14px rgba(0,0,0,.65);
}
.st-board-top { left: calc(50% - 444px * var(--k)); width: calc(888px * var(--k)); top: 0; height: calc(16px * var(--k)); }
.st-board-bot {
  left: calc(50% - 444px * var(--k)); width: calc(888px * var(--k));
  top: calc(var(--floor) * var(--k) * 1px); height: calc(20px * var(--k));
  box-shadow: 0 16px 24px -8px rgba(24,20,15,.45);
}
.st-board-bot::before {             /* canto delantero más claro */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(3px * var(--k));
  background: rgba(241,232,206,.35);
}
.st-side { top: 0; width: calc(14px * var(--k)); height: calc((var(--floor) + 20) * var(--k) * 1px); background: linear-gradient(to right, #6b4c22, var(--gold2) 50%, #6b4c22); }
.st-side.l { left: calc(50% - 444px * var(--k)); }
.st-side.r { left: calc(50% + 430px * var(--k)); }
.st-div  { top: calc(16px * var(--k)); left: calc(50% + 122px * var(--k)); width: calc(14px * var(--k)); height: calc((var(--floor) - 16) * var(--k) * 1px); background: linear-gradient(to right, #6b4c22, var(--gold2) 50%, #6b4c22); box-shadow: 6px 0 14px rgba(0,0,0,.35), -6px 0 14px rgba(0,0,0,.35); }
.st-stand {                          /* atril para los dispositivos */
  top: calc((var(--floor) - 8) * var(--k) * 1px); height: calc(8px * var(--k));
  background: linear-gradient(to bottom, var(--gold3), var(--gold2));
  border-radius: 2px 2px 0 0; transform: translateX(-50%);
}
.st-stand.ipad   { left: calc(50% - 46px * var(--k)); width: calc(110px * var(--k)); }
.st-stand.kindle { left: calc(50% + 62px * var(--k)); width: calc(90px * var(--k)); }
.st-stand.phone  { left: calc(50% + 352px * var(--k)); width: calc(56px * var(--k)); }

/* Carteles escritos a mano (posición por puesta en escena más abajo) */
.st-sign {
  top: calc(16px * var(--k)); transform: translateX(-50%) rotate(var(--tilt, -2deg)); transform-origin: 50% 0;
  display: flex; flex-direction: column; align-items: center;
}
.st-sign::before {                   /* hilos */
  content: ''; width: calc(70px * var(--k)); height: calc(16px * var(--k));
  border-left: 1px solid rgba(241,232,206,.55); border-right: 1px solid rgba(241,232,206,.55);
}
.st-sign b {
  display: block; padding: calc(4px * var(--k)) calc(20px * var(--k)) calc(6px * var(--k));
  background: linear-gradient(180deg, #efe3c6, #e4d4ae);
  box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(107,76,34,.18);
  font-family: 'Caveat', 'Cormorant Garamond', cursive; font-weight: 600;
  font-size: calc(30px * var(--k)); line-height: 1.1; color: var(--ink2);
  border-radius: 2px;
}
.set-repisa .st-sign.es { left: calc(50% - 150px * var(--k)); --tilt: -2.2deg; }
.set-repisa .st-sign.en { left: calc(50% + 280px * var(--k)); --tilt: 1.8deg; }

/* ── Ediciones ── */
.st-items { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d; }
.ed {
  position: absolute;
  left: calc(50% + var(--dx, 0) * var(--k) * 1px);
  top: calc(var(--fy, var(--floor)) * var(--k) * 1px);
  transform: translate(-50%, var(--ay, -100%));
  transform-style: preserve-3d;
  z-index: var(--zi, 1);
}
.ed-deco { pointer-events: none; }
.ed-btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: block; transform-style: preserve-3d; }
.ed-pose {
  display: block; transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: translate3d(var(--hx, 0px), var(--hy, 0px), var(--hz, 0px)) rotateZ(var(--rz, 0deg));
  transition: transform .5s cubic-bezier(.2,.75,.15,1);
}
.ed.is-away { visibility: hidden; }
.ed-btn:focus-visible { outline: none; }
.ed-btn:focus-visible .rk-obj { outline: 2px solid var(--gold3); outline-offset: 5px; }

.st .rk-obj, .lr-ghost .rk-obj, .st-fwrap .rk-obj { display: block; }
.st .rk-obj { --k: calc(var(--ok, .92) * var(--sk, 1)); transition: transform .55s cubic-bezier(.2,.75,.15,1); }

.st[data-alt="repisa"] .ed[data-id="blanda"] { --dx: -338; --ry: 42deg; }
.st[data-alt="repisa"] .ed[data-id="dura"]   { --dx: -205; --ry: 40deg; }
.st[data-alt="repisa"] .ed[data-id="epub"]   { --dx: -46;  --ry: -12deg; --rx: 7deg; --zi: 2; }
.st[data-alt="repisa"] .ed[data-id="kindle"] { --dx: 62;   --ry: -16deg; --rx: 7deg; --zi: 2; }
.st[data-alt="repisa"] .ed[data-id="en"]     { --dx: 214;  --ry: 40deg; }
.st[data-alt="repisa"] .ed[data-id="enk"]    { --dx: 352;  --ry: -14deg; --rx: 7deg; --zi: 2; }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)) { --hy: -10px; --hz: 34px; --zi: 6; }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="blanda"], [data-id="dura"], [data-id="en"]) { --ry: 8deg; }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="epub"], [data-id="kindle"], [data-id="enk"]) { --ry: 0deg; --rx: 2deg; }

/* ── Tapa blanda: cantos al ras, tapa fina, lomo plano ── */
.bk-soft .f-edge, .bk-soft .f-top, .bk-soft .f-bot {
  background: repeating-linear-gradient(to right, #f5eedf 0 1px, #e3d9c4 1px 2px);
  box-shadow: inset 1px 0 0 #c9d0cc, inset -1px 0 0 #c9d0cc;      /* filo de la tapa */
}
.bk-soft .f-top, .bk-soft .f-bot {
  background: repeating-linear-gradient(to bottom, #f5eedf 0 1px, #e3d9c4 1px 2px);
  box-shadow: inset 0 1px 0 #c9d0cc, inset 0 -1px 0 #c9d0cc;
}
.bk-soft .f-spine::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,.10), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.18));
}
.bk-soft .f-front::after {          /* laminado mate + marca de plegado junto al lomo */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.16) 0, rgba(0,0,0,0) 1.5%, rgba(255,255,255,.18) 2.6%, rgba(0,0,0,0) 4.5%),
    linear-gradient(110deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.12) 52%, rgba(255,255,255,0) 64%);
}

/* ── Tapa dura: cartones que sobresalen, bisagra y lomo redondeado ── */
.bk-hard { --bt: calc(2.6px * var(--k)); --sq: calc(3.2px * var(--k)); }
.bk-hard .f-front::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.30) 0, rgba(0,0,0,.05) 2%, rgba(0,0,0,0) 5.2%, rgba(0,0,0,.22) 6%, rgba(255,255,255,.22) 6.8%, rgba(0,0,0,0) 8.4%),
    linear-gradient(110deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 62%);
}
.bk-hard .f-spine { border-radius: 45% / 4%; }
.bk-hard .f-spine::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to right, rgba(0,0,0,.45), rgba(255,255,255,.12) 30%, rgba(255,255,255,.04) 55%, rgba(0,0,0,.42));
}
/* bloque de hojas metido hacia adentro */
.bk-hard .f-edge {
  height: calc(var(--H) - 2 * var(--sq)); top: var(--sq);
  width: calc(var(--D) - 2 * var(--bt)); left: calc(50% - (var(--D) - 2 * var(--bt)) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--W) / 2 - var(--sq)));
  background: repeating-linear-gradient(to right, #f5eedf 0 1px, #e0d6c0 1px 2px);
}
.bk-hard .f-top, .bk-hard .f-bot {
  width: calc(var(--W) - var(--sq) - 4px); left: calc(50% - (var(--W) - var(--sq) - 4px) / 2 - var(--sq) / 2);
  height: calc(var(--D) - 2 * var(--bt)); top: calc(50% - (var(--D) - 2 * var(--bt)) / 2);
  background: repeating-linear-gradient(to bottom, #f5eedf 0 1px, #e0d6c0 1px 2px);
}
.bk-hard .f-top { transform: rotateX(90deg) translateZ(calc(var(--H) / 2 - var(--sq))); }
.bk-hard .f-bot { transform: rotateX(-90deg) translateZ(calc(var(--H) / 2 - var(--sq))); }
/* cantos de los cartones (sobrecubierta doblada) */
.bk-hard .f-b { background: linear-gradient(to right, #c6ccc8, #e7ebe8 50%, #b9c0bc); }
.bk-hard .f-b.fe1, .bk-hard .f-b.fe2 { top: 0; height: var(--H); width: var(--bt); left: calc(50% - var(--bt) / 2); }
.bk-hard .f-b.fe1 { transform: rotateY(90deg) translateZ(calc(var(--W) / 2)) translateX(calc(-1 * (var(--D) / 2 - var(--bt) / 2))); }
.bk-hard .f-b.fe2 { transform: rotateY(90deg) translateZ(calc(var(--W) / 2)) translateX(calc(var(--D) / 2 - var(--bt) / 2)); }
.bk-hard .f-b.ft1, .bk-hard .f-b.ft2, .bk-hard .f-b.fb1, .bk-hard .f-b.fb2 { left: 0; width: var(--W); height: var(--bt); top: calc(50% - var(--bt) / 2); background: linear-gradient(to bottom, #c6ccc8, #e7ebe8 50%, #b9c0bc); }
.bk-hard .f-b.ft1 { transform: rotateX(90deg)  translateZ(calc(var(--H) / 2)) translateY(calc(var(--D) / 2 - var(--bt) / 2)); }
.bk-hard .f-b.ft2 { transform: rotateX(90deg)  translateZ(calc(var(--H) / 2)) translateY(calc(-1 * (var(--D) / 2 - var(--bt) / 2))); }
.bk-hard .f-b.fb1 { transform: rotateX(-90deg) translateZ(calc(var(--H) / 2)) translateY(calc(-1 * (var(--D) / 2 - var(--bt) / 2))); }
.bk-hard .f-b.fb2 { transform: rotateX(-90deg) translateZ(calc(var(--H) / 2)) translateY(calc(var(--D) / 2 - var(--bt) / 2)); }

/* ── Dispositivos ── */
.dv .f-front { box-sizing: border-box; background: #0e0e10; }
.dv .f-front img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dv .f-back, .dv .f-spine, .dv .f-edge, .dv .f-top, .dv .f-bot { background: linear-gradient(135deg, #d9dbdd, #b4b8bb); }
.dv-ipad .f-front, .dv-ipad .f-back { border-radius: calc(17px * var(--k)); }
.dv-ipad .f-front { padding: calc(10px * var(--k)); box-shadow: inset 0 0 0 calc(1.5px * var(--k)) #6d7175; }
.dv-ipad .f-front img { border-radius: calc(7px * var(--k)); }
.dv-ipad .f-back::after { content: ''; position: absolute; left: calc(12px * var(--k)); top: calc(12px * var(--k)); width: calc(11px * var(--k)); height: calc(11px * var(--k)); border-radius: 50%; background: #2a2c2e; }
.dv-kindle .f-front { border-radius: calc(9px * var(--k)); padding: calc(13px * var(--k)) calc(12px * var(--k)) calc(13px * var(--k)); }
.dv-kindle .f-front img { border-radius: 1px; filter: grayscale(1) contrast(1.08) brightness(1.05); }
.dv-kindle .f-back, .dv-kindle .f-spine, .dv-kindle .f-edge, .dv-kindle .f-top, .dv-kindle .f-bot { background: #121214; }
.dv-kindle .f-back { border-radius: calc(9px * var(--k)); }
.dv-phone .f-front, .dv-phone .f-back { border-radius: calc(15px * var(--k)); }
.dv-phone .f-front { padding: calc(4px * var(--k)); box-shadow: inset 0 0 0 calc(1.5px * var(--k)) #3a3a3d; }
.dv-phone .f-front img { border-radius: calc(12px * var(--k)); }
.dv-phone .f-front::after { content: ''; position: absolute; top: calc(9px * var(--k)); left: 50%; width: calc(26px * var(--k)); height: calc(7px * var(--k)); margin-left: calc(-13px * var(--k)); border-radius: 99px; background: #050506; }
.dv-phone .f-back, .dv-phone .f-spine, .dv-phone .f-edge, .dv-phone .f-top, .dv-phone .f-bot { background: linear-gradient(135deg, #3b3d40, #1f2022); }

/* Texto bajo la repisa */
.st-hint {
  position: absolute; left: 0; right: 0; top: calc(398px * var(--k)); margin: 0; text-align: center;
  font-family: var(--ff-s); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem); color: var(--ink2);
  transition: opacity .3s ease;
}
.st-hint em { color: var(--rust); }
.st-hint .st-hint-ed { font-style: normal; font-family: var(--ff-u); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); display: block; }
.st-hint .st-hint-spec { font-size: 1.05rem; }
.st.is-open .st-hint { opacity: 0; pointer-events: none; }

/* ── Edición elegida al frente ── */
.st-focus { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 8; perspective: 1400px; }
.st-fwrap { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 50% 50%; cursor: grab; touch-action: none; }
.st.is-dragging .st-fwrap { cursor: grabbing; }
.st-fwrap .rk-obj { --k: 1; transition: none; transform: rotateX(var(--frx, 0deg)) rotateY(var(--fry, 0deg)); }
.st-fwrap .rk-obj.is-snap { transition: transform .7s cubic-bezier(.2,.75,.15,1); }

.st .rk-detail { top: calc(var(--panel-y, 392) * 1px); }
.st .rk-tags { top: calc(var(--tag-y, 40) * 1px); }
.st .rk-back { top: calc(4px * var(--k)); left: 0; }

/* Dos acciones: Comprar / Leer la introducción */
.rk-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.rk-actions .btn { border-radius: 999px; min-width: 11.5rem; justify-content: center; padding: .9rem 1.5rem; letter-spacing: .12em; }
.rk-actions .btn[aria-expanded="true"] { background: var(--ink); color: var(--cream); }
.rk-buy { display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.rk-buy[hidden] { display: none; }

/* ── Responsive ── */
@media (max-width: 1240px) { .st { --k: .84; --sk: .84; } }
@media (max-width: 980px)  { .st { --k: .8; --sk: .8; --stage-h: 40rem; } }
@media (max-width: 760px)  { .st { --k: .62; --sk: .62; --stage-h: 38rem; } }
@media (max-width: 600px)  { .st { --k: .43; --sk: .43; --stage-h: 37rem; } .rk-actions .btn { min-width: 0; flex: 1 1 9rem; } }
@media (prefers-reduced-motion: reduce) {
  .ed-pose, .st .rk-obj, .st-scene { transition: none !important; }
}

/* ══ PILA — mesa de novedades ══ */
.st[data-alt="pila"] { --floor: 318; }
.set-pila .st-tabletop {
  left: calc(50% - 450px * var(--k)); width: calc(900px * var(--k));
  top: calc(250px * var(--k)); height: calc(84px * var(--k));
  background: linear-gradient(to bottom, #d9c6a0, #c9ae7c);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}
.set-pila .st-tableedge {
  left: calc(50% - 450px * var(--k)); width: calc(900px * var(--k));
  top: calc(334px * var(--k)); height: calc(18px * var(--k));
  background: linear-gradient(to bottom, #a77c3f, var(--gold2) 40%, #6b4c22);
  box-shadow: 0 18px 26px -10px rgba(24,20,15,.45);
}
.set-pila .st-legs { left: calc(50% - 420px * var(--k)); width: calc(840px * var(--k)); top: calc(352px * var(--k)); height: calc(30px * var(--k));
  background: linear-gradient(to right, #6b4c22 0 2%, transparent 2% 98%, #6b4c22 98%); }
.set-pila .st-glow { left: 10%; right: 10%; top: 0; height: calc(300px * var(--k)); background: radial-gradient(50% 60% at 50% 10%, rgba(195,146,72,.16), transparent 70%); }
.set-pila .st-stand { top: calc(310px * var(--k)); }
.set-pila .st-stand.ipad   { left: calc(50% + 2px * var(--k)); }
.set-pila .st-stand.kindle { left: calc(50% + 128px * var(--k)); }
.set-pila .st-stand.phone  { left: calc(50% + 426px * var(--k)); }
.set-pila .st-sep { left: calc(50% + 200px * var(--k)); top: calc(250px * var(--k)); width: 1px; height: calc(84px * var(--k)); background: rgba(107,76,34,.35); }
/* cartel de mesa doblado */
.set-pila .st-tent { top: calc(150px * var(--k)); transform: translateX(-50%) rotate(var(--tilt, -1.5deg)); display: flex; flex-direction: column; align-items: center; }
.set-pila .st-tent b {
  display: block; padding: calc(6px * var(--k)) calc(18px * var(--k));
  background: linear-gradient(180deg, #f3e9d2, #e4d4ae); border-radius: 2px;
  box-shadow: 0 8px 14px rgba(0,0,0,.18), inset 0 0 0 1px rgba(107,76,34,.2);
  font-family: 'Caveat', 'Cormorant Garamond', cursive; font-weight: 600; font-size: calc(30px * var(--k)); color: var(--ink2); line-height: 1.1;
}
.set-pila .st-tent i { display: block; width: calc(2px * var(--k)); height: calc(36px * var(--k)); background: linear-gradient(var(--gold2), #6b4c22); }
.set-pila .st-tent.es { left: calc(50% - 245px * var(--k)); }
.set-pila .st-tent.en { left: calc(50% + 330px * var(--k)); --tilt: 2deg; top: calc(150px * var(--k)); }

.st[data-alt="pila"] .ed:is([data-id="blanda"], [data-id="dura"], [data-id="en"], .ed-deco) { --ay: -50%; --ry: 90deg; }
.st[data-alt="pila"] .ed:is([data-id="blanda"], [data-id="dura"], [data-id="en"], .ed-deco) .ed-pose { transform-origin: 50% 50%; }
.st[data-alt="pila"] { --ok: .8; }
.st[data-alt="pila"] .ed[data-id="dura"]   { --dx: -340; --fy: 270; --rz: -90deg; --zi: 6; }
.st[data-alt="pila"] .ed[data-id="blanda"] { --dx: -150; --fy: 274; --rz: -90deg; --zi: 6; }
.st[data-alt="pila"] .ed[data-id="en"]     { --dx: 300;  --fy: 280; --rz: -90deg; --zi: 6; }
.st[data-alt="pila"] .ed[data-id="epub"]   { --dx: 2;   --ry: -12deg; --rx: 7deg; --zi: 3; }
.st[data-alt="pila"] .ed[data-id="kindle"] { --dx: 128; --ry: -16deg; --rx: 7deg; --zi: 3; }
.st[data-alt="pila"] .ed[data-id="enk"]    { --dx: 426; --ry: -14deg; --rx: 7deg; --zi: 3; }
.st[data-alt="pila"] .ed-deco[data-pile="dura"]   { --dx: -340; }
.st[data-alt="pila"] .ed-deco[data-pile="blanda"] { --dx: -150; }
.st[data-alt="pila"] .ed-deco[data-pile="en"]     { --dx: 300; }
.st[data-alt="pila"] .ed-deco { --fy: calc(var(--base) - var(--n) * var(--t)); --rz: calc(-90deg + var(--j, 0deg)); --hx: calc(var(--jx, 0) * 1px); z-index: calc(4 - var(--n)); }
.st[data-alt="pila"] .ed-deco[data-pile="dura"]   { --base: 323; --t: 14.2; }
.st[data-alt="pila"] .ed-deco[data-pile="blanda"] { --base: 325; --t: 11.2; }
.st[data-alt="pila"] .ed-deco[data-pile="en"]     { --base: 325; --t: 11.8; }
.st[data-alt="pila"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="blanda"], [data-id="dura"], [data-id="en"]) { --hx: -38px; --hz: 40px; --hy: -4px; --zi: 7; }
.st[data-alt="pila"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="epub"], [data-id="kindle"], [data-id="enk"]) { --hy: -10px; --hz: 30px; --ry: 0deg; --rx: 2deg; --zi: 7; }
.st:not([data-alt="pila"]) .ed-deco { display: none; }

/* ══ VIDRIERA — dos gradas, ediciones de frente ══ */
.st[data-alt="vidriera"] { --floor: 350; }
.set-vidriera .st-window {
  left: calc(50% - 450px * var(--k)); width: calc(900px * var(--k)); top: 0; height: calc(368px * var(--k));
  background:
    radial-gradient(35% 60% at 25% 0%, rgba(255,247,226,.9), transparent 70%),
    radial-gradient(30% 60% at 80% 0%, rgba(255,247,226,.8), transparent 70%),
    linear-gradient(to bottom, var(--cream2), var(--cream3));
  box-shadow: inset 0 0 0 calc(10px * var(--k)) #6b4c22, inset 0 0 0 calc(12px * var(--k)) var(--gold2), inset 0 30px 40px -20px rgba(0,0,0,.25);
}
.set-vidriera .st-rod { left: calc(50% - 420px * var(--k)); width: calc(840px * var(--k)); top: calc(26px * var(--k)); height: calc(4px * var(--k)); background: linear-gradient(to bottom, var(--gold3), var(--gold2)); border-radius: 2px; }
.set-vidriera .st-tier { display: none !important; }
.set-vidriera .st-plinth { top: calc(262px * var(--k)); height: calc(88px * var(--k)); width: calc(132px * var(--k)); transform: translateX(-50%); background: linear-gradient(to bottom, var(--white), #e9e1cd); box-shadow: inset 0 1px 0 #fff, 0 10px 18px -10px rgba(24,20,15,.35); }
.set-vidriera .st-plinth.a { left: calc(50% - 360px * var(--k)); }
.set-vidriera .st-plinth.b { left: calc(50% - 72px * var(--k)); }
.set-vidriera .st-plinth.c { left: calc(50% + 290px * var(--k)); }
.set-vidriera .st-x { display:none; background: linear-gradient(to bottom, var(--white), #e9e1cd); box-shadow: inset 0 1px 0 #fff, 0 -1px 0 rgba(107,76,34,.15); }
.set-vidriera .st-floor { left: calc(50% - 440px * var(--k)); width: calc(880px * var(--k)); top: calc(350px * var(--k)); height: calc(18px * var(--k)); background: linear-gradient(to bottom, #a77c3f, #6b4c22); }
.set-vidriera .st-sep { left: calc(50% + 196px * var(--k)); top: calc(30px * var(--k)); width: 1px; height: calc(320px * var(--k)); background: linear-gradient(to bottom, transparent, rgba(107,76,34,.4) 20%, rgba(107,76,34,.4)); }
.set-vidriera .st-sign { top: calc(28px * var(--k)); }
.set-vidriera .st-sign::before { border-color: rgba(107,76,34,.6); height: calc(12px * var(--k)); }
.set-vidriera .st-sign.es { left: calc(50% - 140px * var(--k)); --tilt: -1.6deg; }
.set-vidriera .st-sign.en { left: calc(50% + 320px * var(--k)); --tilt: 2deg; }

.st[data-alt="vidriera"] { --ok: .84; }
.st[data-alt="vidriera"] .ed[data-id="dura"]   { --dx: -360; --fy: 262; --ry: 30deg;  --rx: 3deg; }
.st[data-alt="vidriera"] .ed[data-id="epub"]   { --dx: -214; --ry: 8deg;  --rx: 6deg; }
.st[data-alt="vidriera"] .ed[data-id="blanda"] { --dx: -72;  --fy: 262; --ry: -30deg; --rx: 3deg; }
.st[data-alt="vidriera"] .ed[data-id="kindle"] { --dx: 82;   --ry: -10deg; --rx: 6deg; }
.st[data-alt="vidriera"] .ed[data-id="en"]     { --dx: 290;  --fy: 262; --ry: 30deg; --rx: 3deg; }
.st[data-alt="vidriera"] .ed[data-id="enk"]    { --dx: 396;  --ry: -10deg; --rx: 6deg; }
.st[data-alt="vidriera"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)) { --hy: -12px; --hz: 36px; --ry: 0deg; --rx: 0deg; --zi: 7; }

/* ── Selector de alternativas (solo en la propuesta) ── */
.alt-switch {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: .3rem; padding: .35rem;
  background: rgba(24,20,15,.92); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.alt-switch span { font-family: var(--ff-u); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold3); padding: 0 .6rem 0 .8rem; }
.alt-switch button { appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: .5rem .95rem; background: transparent; color: var(--cream); font-family: var(--ff-u); font-size: .74rem; }
.alt-switch button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.alt-switch button b { color: var(--gold); font-weight: 600; }
.alt-switch button[aria-pressed="true"] b { color: var(--rust); }
.alt-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 600px) { .alt-switch { bottom: .6rem; } .alt-switch span { display: none; } .alt-switch button { padding: .45rem .7rem; font-size: .7rem; } }

/* ══════════════════════════════════════════════════════════
   HERO CENTRADO — título arriba, librería debajo
   ══════════════════════════════════════════════════════════ */
.hero--rack { padding: 5.6rem 0 2rem; }
.hero--rack .hr-grid { grid-template-columns: 1fr; gap: 1.4rem; min-height: 0; max-width: 1180px; }
.hero--rack .hr-copy { text-align: center; max-width: 46rem; margin: 0 auto; }
.hero--rack .hero-kicker { justify-content: center; margin-bottom: 1rem; }
.hero--rack .hero-kicker::after { content: ''; width: 2.2rem; height: 1px; background: currentColor; }
.hero--rack .hero-title-wrap { margin-bottom: .4rem; }
.hero--rack .hero-title-main { font-size: clamp(3rem, 6.4vw, 5.6rem); margin-top: .1rem; }
.hero--rack .hero-author { margin-bottom: 1rem; }
.hero--rack .hero-pull {
  border-left: 0; padding: 0; margin: 0 auto 1.1rem; max-width: 34rem;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.6;
}
.hero--rack .hr-links { justify-content: center; }
.hero--rack .hr-links .btn { padding: .7rem 1.3rem; }
.hero--rack .st { --k: 1.04; --sk: 1.04; width: 100%; }

/* ══════════════════════════════════════════════════════════
   REALISMO — madera, luz, sombras, vidrio y papel
   ══════════════════════════════════════════════════════════ */
.st-wood, .set-repisa .st-board-top, .set-repisa .st-board-bot {
  background:
    linear-gradient(to bottom, rgba(255,240,210,.22), rgba(0,0,0,0) 30%, rgba(0,0,0,.28)),
    url('../media/libreria/madera-tabla.webp') 0 0 / auto 100% repeat-x;
}
.set-repisa .st-board-bot {               /* estante: canto delantero iluminado desde arriba */
  background:
    linear-gradient(to bottom, rgba(255,236,196,.55) 0, rgba(255,236,196,.15) 12%, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%),
    url('../media/libreria/madera-tabla.webp') 30% 0 / auto 160% repeat-x;
  box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 22px 30px -10px rgba(24,20,15,.55);
}
.set-repisa .st-side, .set-repisa .st-div {
  background:
    linear-gradient(to right, rgba(0,0,0,.35), rgba(255,240,210,.12) 40%, rgba(0,0,0,.3)),
    url('../media/libreria/madera-lateral.webp') 0 0 / 100% auto repeat-y;
}
.set-repisa .st-back {
  background:
    radial-gradient(28% 62% at 26% -6%, rgba(255,214,150,.42), rgba(255,214,150,.10) 55%, transparent 75%),
    radial-gradient(22% 62% at 78% -6%, rgba(255,214,150,.38), rgba(255,214,150,.08) 55%, transparent 75%),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 22%, rgba(0,0,0,.25) 85%, rgba(0,0,0,.55)),
    url('../media/libreria/madera-fondo.webp') 0 0 / cover;
  box-shadow: inset 0 26px 34px -16px rgba(0,0,0,.85), inset 18px 0 26px -16px rgba(0,0,0,.8), inset -18px 0 26px -16px rgba(0,0,0,.8);
}
/* focos de luz cálida en el borde superior */
.set-repisa .st-board-top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(-6px * var(--k)); height: calc(6px * var(--k));
  background:
    radial-gradient(closest-side, rgba(255,226,170,.95), rgba(255,226,170,0)) 24% 0 / calc(120px * var(--k)) 100% no-repeat,
    radial-gradient(closest-side, rgba(255,226,170,.95), rgba(255,226,170,0)) 78% 0 / calc(120px * var(--k)) 100% no-repeat;
}
/* sombra del mueble sobre la pared */
.set-repisa::before {
  content: ''; position: absolute; left: calc(50% - 470px * var(--k)); width: calc(940px * var(--k));
  top: calc(20px * var(--k)); height: calc((var(--floor) + 30) * var(--k) * 1px);
  background: rgba(24,20,15,.28); filter: blur(calc(26px * var(--k))); transform: translateY(calc(16px * var(--k)));
  border-radius: 8px;
}

/* sombra de contacto y sombra proyectada de cada objeto */
.ed::after {
  content: ''; position: absolute; left: 50%; bottom: calc(-5px * var(--k)); width: 104%; height: calc(14px * var(--k));
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.62), rgba(0,0,0,.25) 55%, transparent);
  pointer-events: none; transition: opacity .4s ease, transform .5s ease;
}
.st[data-alt="repisa"] .ed::before, .st[data-alt="vidriera"] .ed::before {
  content: ''; position: absolute; left: 8%; right: -6%; top: 10%; bottom: 0;
  background: rgba(0,0,0,.5); filter: blur(calc(12px * var(--k)));
  transform: translateZ(-70px) translateX(calc(16px * var(--k)));
  pointer-events: none; border-radius: 4px;
}
.st[data-alt="vidriera"] .ed::before { background: rgba(60,40,15,.22); }
.st[data-alt="pila"] .ed::after { bottom: auto; top: 50%; height: calc(26px * var(--k)); width: 96%; opacity: .55; }
.st[data-alt="pila"] .ed-deco::after { display: none; }
.st[data-alt="pila"] .ed-deco[style*="--n:0"]::after { display: block; top: auto; bottom: calc(-12px * var(--k)); }
.ed:is(.is-hover, :has(.ed-btn:focus-visible))::after { opacity: .5; transform: translateX(-50%) scaleX(.92); }

/* vidrio de las pantallas */
.dv .f-front::before {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 32%, rgba(255,255,255,0) 33%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.05), rgba(0,0,0,.08));
}
.dv-kindle .f-front::before { background: linear-gradient(118deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 30%); }
.dv .f-front { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 calc(3px * var(--k)) rgba(0,0,0,.8); }
.dv-ipad .f-front { box-shadow: inset 0 0 0 calc(1.5px * var(--k)) #8a8e92, inset 0 0 0 calc(2.5px * var(--k)) #1a1b1d; }

/* libros: luz de foco que cae desde arriba */
.bk .f-front::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,232,190,.14), rgba(0,0,0,0) 40%, rgba(0,0,0,.14));
}
.bk .f-spine img { filter: brightness(.96) contrast(1.05); }

/* carteles: papel kraft, broche metálico y sombra en la madera */
.st-sign b, .set-pila .st-tent b {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.06)),
    url('../media/libreria/papel-kraft.webp') 0 0 / cover;
  color: #2a2119;
  box-shadow: 0 8px 14px -4px rgba(0,0,0,.55), 0 2px 3px rgba(0,0,0,.3);
  border-radius: 1px;
  position: relative;
}
.st-sign b::before {
  content: ''; position: absolute; top: calc(-7px * var(--k)); left: 50%; width: calc(26px * var(--k)); height: calc(12px * var(--k));
  margin-left: calc(-13px * var(--k)); border-radius: 2px;
  background: linear-gradient(to bottom, #e9e3d6, #9fa3a6 45%, #6c7073);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.st-sign::before { border-color: rgba(220,205,170,.5) !important; }

/* mesa y vidriera con madera real */
.set-pila .st-tabletop {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(255,240,210,.10) 40%, rgba(0,0,0,.08)),
    url('../media/libreria/madera-mesa.webp') 0 0 / cover;
}
.set-pila .st-tableedge, .set-vidriera .st-floor {
  background:
    linear-gradient(to bottom, rgba(255,236,196,.4), rgba(0,0,0,0) 25%, rgba(0,0,0,.35)),
    url('../media/libreria/madera-tabla.webp') 0 0 / auto 200% repeat-x;
}
.set-vidriera .st-window {
  box-shadow: inset 0 0 0 calc(12px * var(--k)) #5a3f1c, inset 0 0 0 calc(13px * var(--k)) var(--gold3), inset 0 40px 50px -24px rgba(0,0,0,.28);
}
.set-vidriera .st-window::after {     /* reflejo del vidrio de la vidriera */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 36%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12) 74%, rgba(255,255,255,0) 78%);
}

@media (max-width: 980px) { .hero--rack .st { --k: .8; --sk: .8; } }
@media (max-width: 760px) { .hero--rack .st { --k: .62; --sk: .62; } }
@media (max-width: 600px) {
  .hero--rack { padding-top: 5rem; }
  .hero--rack .st { --k: .43; --sk: .43; }
  .hero--rack .hero-pull { display: block; font-size: .95rem; }
  .hero--rack .hr-links { display: none; }
  .hero--rack .hero-title-main { font-size: 3rem; }
}

/* El escenario crece solo cuando hay una edición elegida */
.hero--rack .st { height: calc(400px * var(--k) + 4.6rem); transition: height .6s cubic-bezier(.2,.75,.15,1); }
.hero--rack .st.is-open { height: var(--stage-h); }
@media (max-width: 600px) {
  .hero--rack .hero-kicker { font-size: .56rem; letter-spacing: .14em; gap: .5rem; }
  .hero--rack .hero-kicker::before, .hero--rack .hero-kicker::after { width: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .hero--rack .st { transition: none; } }

/* Carteles escritos a mano (imagen generada con tools/manuscrito.mjs) */
.st-sign b, .set-pila .st-tent b { padding: calc(3px * var(--k)) calc(14px * var(--k)) calc(4px * var(--k)); }
.st-hand { display: block; height: calc(40px * var(--k)); width: auto; mix-blend-mode: multiply; }

/* ══════════════════════════════════════════════════════════
   REPISA v2 — libros apoyados como en una biblioteca real
   ══════════════════════════════════════════════════════════ */
.hero--rack .st, .hero--rack .st.is-open { height: calc(400px * var(--k) + 4.6rem); }
.st .rk-obj { transform-origin: 50% 100%; }
.st .ed-pose { transform-origin: 50% 100%; }
/* Español: tapa dura contra el fondo, tapa blanda recostada sobre ella, tablet y Kindle en atril */
.st[data-alt="repisa"] .ed[data-id="dura"]   { --dx: -352; --ry: 14deg;  --rx: 5deg;  --rz: 0deg;   --zi: 2; }
.st[data-alt="repisa"] .ed[data-id="blanda"] { --dx: -236; --ry: 10deg;  --rx: 3deg;  --rz: -11deg; --zi: 3; }
.st[data-alt="repisa"] .ed[data-id="epub"]   { --dx: -78;  --ry: -8deg;  --rx: 13deg; --rz: 0deg;   --zi: 2; }
.st[data-alt="repisa"] .ed[data-id="kindle"] { --dx: 54;   --ry: -14deg; --rx: 13deg; --rz: 0deg;   --zi: 2; }
/* English: paperback apoyado contra el divisor, celular en su atril */
.st[data-alt="repisa"] .ed[data-id="en"]     { --dx: 214;  --ry: 16deg;  --rx: 3deg;  --rz: -7deg;  --zi: 2; }
.st[data-alt="repisa"] .ed[data-id="enk"]    { --dx: 352;  --ry: -12deg; --rx: 13deg; --rz: 0deg;   --zi: 2; }
/* Cursor encima: el libro se endereza y sale del estante hacia vos */
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)) { --hz: 80px; --hy: -10px; --rz: 0deg; --rx: 0deg; --ry: 0deg; --zi: 9; }
.st .ed-btn { cursor: pointer; }
.set-repisa .st-bookend.l { left: calc(50% - 420px * var(--k)); top: calc((var(--floor) - 78) * var(--k) * 1px); }
.set-repisa .st-bookend.r { display: none; }
.set-repisa .st-stand.ipad   { left: calc(50% - 78px * var(--k)); }
.set-repisa .st-stand.kindle { left: calc(50% + 54px * var(--k)); }
.set-repisa .st-stand.phone  { left: calc(50% + 352px * var(--k)); }
.set-repisa .st-bookend { display: block; position: absolute; width: calc(9px * var(--k)); height: calc(78px * var(--k));
  background: linear-gradient(to right, #6d7073, #c9ccce 45%, #8a8d90); border-radius: 2px 2px 0 0; }
.set-repisa .st-bookend::after { content: ''; position: absolute; bottom: 0; left: 0; width: calc(40px * var(--k)); height: calc(4px * var(--k)); background: linear-gradient(#b9bcbe, #7a7d80); }

/* ══ Primer plano ══ */
html.ov-open { overflow: hidden; }
.ov { position: fixed; inset: 0; z-index: 400; }
.ov[hidden] { display: none; }
.ov-veil {
  position: absolute; inset: 0; background: rgba(24,20,15,.32);
  backdrop-filter: blur(14px) saturate(.9); -webkit-backdrop-filter: blur(14px) saturate(.9);
  opacity: 0; transition: opacity .55s ease;
}
.ov.is-on .ov-veil { opacity: 1; }
.ov-close {
  position: absolute; top: clamp(.8rem, 2vw, 1.4rem); right: clamp(.8rem, 2vw, 1.4rem); z-index: 3;
  width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid rgba(245,240,230,.5);
  background: rgba(24,20,15,.35); color: var(--cream); cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity .4s ease .2s, background .2s;
}
.ov-close svg { width: 1.1rem; height: 1.1rem; }
.ov-close:hover { background: rgba(24,20,15,.6); }
.ov.is-on .ov-close { opacity: 1; }
.ov-stage { position: absolute; inset: 0; perspective: 1500px; pointer-events: none; }
.ov-obj { position: absolute; left: 0; top: 0; transform-style: preserve-3d; cursor: grab; touch-action: none; pointer-events: auto; }
.ov.is-dragging .ov-obj { cursor: grabbing; }
.ov-obj .rk-obj { display: block; --k: 1; transform-origin: 50% 50%; transform: rotateX(var(--frx, 0deg)) rotateY(var(--fry, 0deg)); transition: none; }
.ov-obj .rk-obj.is-snap { transition: transform .8s cubic-bezier(.2,.8,.15,1); }
.ov-obj::after {                       /* sombra suave bajo el libro flotante */
  content: ''; position: absolute; left: 10%; right: 10%; bottom: -14%; height: 9%;
  background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); filter: blur(4px);
  animation: ovFloat 4.5s ease-in-out infinite;
}
@keyframes ovFloat { 50% { transform: scale(.88); opacity: .7; } }
.ov-drag {
  position: absolute; left: 50%; top: calc(var(--drag-top, 8%)); margin: 0; transform: translateX(-50%);
  width: 2.2rem; height: 2.2rem; color: rgba(245,240,230,.75); opacity: 0; transition: opacity .5s ease .6s;
}
.ov.is-on .ov-drag { opacity: 1; }
.ov.is-dragging .ov-drag { opacity: 0; transition-delay: 0s; }
.ov-drag svg { width: 100%; height: 100%; }

.ov-panels { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.ov-panel {
  position: absolute; left: 50%; top: var(--top, 60vh); width: min(30rem, 92vw); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; pointer-events: auto;
  opacity: 0; transition: opacity .5s ease .35s;
}
.ov-panel[hidden] { display: none; }
.ov.is-on .ov-panel { opacity: 1; }
.ov-name { margin: 0; font-family: var(--ff-u); font-weight: 600; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.ov-spec { margin: 0 0 .5rem; font-family: var(--ff-u); font-size: .8rem; color: rgba(245,240,230,.82); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.ov-actions { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.ov-read {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--cream); color: var(--ink); border: 0; box-shadow: 0 8px 22px -8px rgba(0,0,0,.6);
  transition: transform .2s ease, background .2s ease;
}
.ov-read svg { width: 1.7rem; height: 1.7rem; }
.ov-read:hover { transform: translateY(-2px); background: var(--white); }
.ov-buy { height: 3.4rem; padding: 0 2.4rem; border-radius: 999px; font-family: var(--ff-u); font-size: .82rem; font-weight: 600; letter-spacing: .22em; box-shadow: 0 10px 26px -10px rgba(181,83,38,.8); }
.ov-buy[aria-expanded="true"] { background: var(--rust2); }
.ov-read:focus-visible, .ov-buy:focus-visible, .ov-close:focus-visible, .ov-chip:focus-visible { outline: 2px solid var(--gold3); outline-offset: 3px; }
.ov-stores {
  display: none; flex-direction: column; align-items: center; gap: .55rem; margin-top: .8rem; padding: 1rem 1.2rem;
  background: rgba(24,20,15,.72); border: 1px solid rgba(245,240,230,.14); border-radius: 6px; width: 100%;
}
.ov-stores.is-open { display: flex; animation: ovIn .35s ease; }
@keyframes ovIn { from { opacity: 0; transform: translateY(-6px); } }
.ov-l { margin: .2rem 0 0; font-family: var(--ff-u); font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold3); }
.ov-n { margin: 0; font-family: var(--ff-u); font-size: .76rem; line-height: 1.55; color: rgba(245,240,230,.75); }
.ov-n strong { color: var(--cream); }
.ov-n--c { margin-top: .6rem; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.ov-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.ov-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.7rem; height: 2.1rem; padding: 0 .7rem;
  border-radius: 999px; border: 1px solid rgba(245,240,230,.35); color: var(--cream); text-decoration: none;
  font-family: var(--ff-u); font-size: .72rem; font-weight: 600; letter-spacing: .06em; transition: background .2s, color .2s;
}
.ov-chip:hover { background: var(--cream); color: var(--ink); }
.ov-chip.is-local { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.ov-chip--wide { padding: 0 1.2rem; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .ov-veil, .ov-panel, .ov-close { transition: none; } .ov-obj::after { animation: none; } }
.st[data-alt="repisa"] .ed[data-id="blanda"] { --dx: -222; --rz: -8deg; }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)) { --hz: 150px; --hy: -22px; }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)) .rk-obj { filter: drop-shadow(0 26px 22px rgba(0,0,0,.45)); }
.st .rk-obj { transition: transform .55s cubic-bezier(.2,.75,.15,1), filter .55s ease; }

/* ══════════════════════════════════════════════════════════
   REPISA v3 — lomos afuera, profundidad y luz reales
   Coordenadas en px de diseño (× --k). Español: −430…+40 · English: +54…+430
   ══════════════════════════════════════════════════════════ */
.st[data-alt="repisa"] { --floor: 384; }
.hero--rack .st, .hero--rack .st.is-open { height: calc(470px * var(--k) + 3.6rem); }
.st-scene { height: calc(450px * var(--k)); perspective: 1100px; perspective-origin: 50% 18%; }
.st-hint { top: calc(452px * var(--k)); }

/* Caja del mueble */
.set-repisa .st-board-top { top: 0; height: calc(20px * var(--k)); }
.set-repisa .st-board-bot { top: calc(var(--floor) * var(--k) * 1px); height: calc(26px * var(--k)); }
.set-repisa .st-side { height: calc((var(--floor) + 26) * var(--k) * 1px); width: calc(18px * var(--k)); }
.set-repisa .st-side.l { left: calc(50% - 448px * var(--k)); }
.set-repisa .st-side.r { left: calc(50% + 430px * var(--k)); }
.set-repisa .st-div { left: calc(50% + 40px * var(--k)); width: calc(16px * var(--k)); top: calc(20px * var(--k)); height: calc((var(--floor) - 20) * var(--k) * 1px); z-index: 1; }
/* fondo retirado: más chico y más arriba (profundidad) */
.set-repisa .st-back {
  left: calc(50% - 404px * var(--k)); width: calc(808px * var(--k));
  top: calc(44px * var(--k)); height: calc((var(--floor) - 84) * var(--k) * 1px);
}
.set-repisa .st-ceil {
  left: calc(50% - 430px * var(--k)); width: calc(860px * var(--k)); top: calc(20px * var(--k)); height: calc(24px * var(--k));
  background: linear-gradient(to bottom, #120d08, #2a1f15);
  clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
}
.set-repisa .st-floor-in {
  left: calc(50% - 430px * var(--k)); width: calc(860px * var(--k));
  top: calc((var(--floor) - 40) * var(--k) * 1px); height: calc(40px * var(--k));
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(40% 140% at 30% 0%, rgba(255,224,170,.28), transparent 70%),
    radial-gradient(30% 140% at 76% 0%, rgba(255,224,170,.24), transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%, rgba(255,236,196,.12)),
    url('../media/libreria/madera-tabla.webp') 0 0 / auto 260% repeat-x;
}
.set-repisa .st-wall { top: calc(20px * var(--k)); height: calc((var(--floor) - 20) * var(--k) * 1px); width: calc(26px * var(--k)); }
.set-repisa .wl-l  { left: calc(50% - 430px * var(--k)); clip-path: polygon(0 0, 100% 6.5%, 100% 89%, 0 100%); background: linear-gradient(to right, #1a120b, #3b2a1a); }
.set-repisa .wl-r  { left: calc(50% + 404px * var(--k)); clip-path: polygon(0 6.5%, 100% 0, 100% 100%, 0 89%); background: linear-gradient(to left, #1a120b, #3b2a1a); }
.set-repisa .wl-dl { left: calc(50% + 14px * var(--k));  clip-path: polygon(0 6.5%, 100% 0, 100% 100%, 0 89%); background: linear-gradient(to left, #22180f, #3b2a1a); }
.set-repisa .wl-dr { left: calc(50% + 56px * var(--k));  clip-path: polygon(0 0, 100% 6.5%, 100% 89%, 0 100%); background: linear-gradient(to right, #22180f, #3b2a1a); }
/* focos cálidos: cono de luz sobre fondo y piso */
.set-repisa .st-light { top: calc(20px * var(--k)); height: calc((var(--floor) - 20) * var(--k) * 1px); width: calc(360px * var(--k)); pointer-events: none;
  background: radial-gradient(48% 70% at 50% 0%, rgba(255,214,150,.30), rgba(255,214,150,.08) 55%, transparent 75%); mix-blend-mode: screen; transform: translateX(-50%); }
.set-repisa .lt-es { left: calc(50% - 195px * var(--k)); }
.set-repisa .lt-en { left: calc(50% + 242px * var(--k)); width: calc(300px * var(--k)); }
.set-repisa .st-board-top::after { bottom: calc(-4px * var(--k)); height: calc(4px * var(--k));
  background:
    radial-gradient(closest-side, #fff2d6, rgba(255,226,170,0)) 26% 0 / calc(90px * var(--k)) 100% no-repeat,
    radial-gradient(closest-side, #fff2d6, rgba(255,226,170,0)) 78% 0 / calc(90px * var(--k)) 100% no-repeat; }
.set-repisa .st-sign.es { left: calc(50% - 150px * var(--k)); }
.set-repisa .st-sign.en { left: calc(50% + 268px * var(--k)); }
.set-repisa .st-sign { top: calc(20px * var(--k)); z-index: 2; }
.set-repisa .st-bookend.l { left: calc(50% - 296px * var(--k)); top: calc((var(--floor) - 18 - 78) * var(--k) * 1px); }
.set-repisa .st-bookend.r { display: block; left: calc(50% + 178px * var(--k)); top: calc((var(--floor) - 18 - 78) * var(--k) * 1px); }
.set-repisa .st-stand { top: calc((var(--floor) - 18 - 7) * var(--k) * 1px); height: calc(7px * var(--k)); }
.set-repisa .st-stand.ipad   { left: calc(50% - 196px * var(--k)); width: calc(118px * var(--k)); }
.set-repisa .st-stand.kindle { left: calc(50% - 50px * var(--k));  width: calc(96px * var(--k)); }
.set-repisa .st-stand.phone  { left: calc(50% + 300px * var(--k)); width: calc(60px * var(--k)); }

/* Ediciones: los libros, de lomo; los dispositivos, derechos en su atril */
.st[data-alt="repisa"] .ed { --fy: calc(var(--floor) - 18); }
.st[data-alt="repisa"] .rk-obj { --k: calc(var(--ok, 1.32) * var(--sk, 1)); }
.st[data-alt="repisa"] .ed[data-id="dura"]   { --dx: -404; --ry: 90deg; --rx: 0deg; --rz: 0deg; --zi: 3; }
.st[data-alt="repisa"] .ed-deco[data-pile="dura"]   { --dx: calc(-404 + var(--n) * 24); --ry: 90deg; }
.st[data-alt="repisa"] .ed[data-id="blanda"] { --dx: -352; --ry: 90deg; --rx: 0deg; --rz: 0deg; --zi: 3; }
.st[data-alt="repisa"] .ed-deco[data-pile="blanda"] { --dx: calc(-352 + var(--n) * 19); --ry: 90deg; }
.st[data-alt="repisa"] .ed[data-id="en"]     { --dx: 110; --ry: 90deg; --rx: 0deg; --rz: 0deg; --zi: 3; }
.st[data-alt="repisa"] .ed-deco[data-pile="en"]     { --dx: calc(110 + var(--n) * 20); --ry: 90deg; }
.st[data-alt="repisa"] .ed:is([data-id="epub"], [data-id="kindle"], [data-id="enk"]) { --rx: 3deg; --rz: 0deg; --ok: .95; }
.st[data-alt="repisa"] .ed[data-id="epub"]   { --dx: -196; --ry: 6deg;  --fy: calc(var(--floor) - 25); }
.st[data-alt="repisa"] .ed[data-id="kindle"] { --dx: -50;  --ry: -6deg; --fy: calc(var(--floor) - 25); }
.st[data-alt="repisa"] .ed[data-id="enk"]    { --dx: 300;  --ry: -6deg; --fy: calc(var(--floor) - 25); }
.st[data-alt="repisa"] .ed:is([data-id="epub"], [data-id="kindle"], [data-id="enk"]) .rk-obj { --ok: .95; }
.st[data-alt="repisa"] .ed-deco { pointer-events: none; z-index: 2; }
/* Cursor encima: el libro sale del estante y gira para mostrar la tapa */
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="dura"], [data-id="blanda"], [data-id="en"]) { --hz: 120px; --hy: -14px; --ry: 38deg; --zi: 9; }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="epub"], [data-id="kindle"], [data-id="enk"]) { --hz: 70px; --hy: -10px; --ry: 0deg; --rx: 0deg; --zi: 9; }
/* Sombras: contacto en el piso y halo sobre el fondo */
.st[data-alt="repisa"] .ed::after { bottom: calc(-6px * var(--k)); height: calc(12px * var(--k)); width: 130%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,.3) 60%, transparent); }
.st[data-alt="repisa"] .ed::before { left: -20%; right: -20%; top: 4%; bottom: 0; background: rgba(0,0,0,.55); filter: blur(calc(14px * var(--k))); transform: translateZ(-90px); }
/* Lomo: luz cálida desde arriba y canto superior visible */
.st[data-alt="repisa"] .bk .f-spine::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,226,170,.22), rgba(0,0,0,0) 30%, rgba(0,0,0,.25)); }

/* Etiquetas de tipo, en mayúsculas, sobre el canto del estante */
.st-tags { position: absolute; left: 0; right: 0; top: calc((var(--floor) + 6) * var(--k) * 1px); height: 0; pointer-events: none; z-index: 12; }
.st-tag {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  padding: calc(3px * var(--k)) calc(9px * var(--k)); border-radius: 2px;
  background: #fbf7ee; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(24,20,15,.08);
  font-family: var(--ff-u); font-size: max(.56rem, calc(10px * var(--k))); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.st-tag--dura   { left: calc(50% - 392px * var(--k)); }
.st-tag--blanda { left: calc(50% - 334px * var(--k)); top: calc(18px * var(--k)); }
.st-tag--epub   { left: calc(50% - 196px * var(--k)); }
.st-tag--kindle { left: calc(50% - 50px * var(--k)); }
.st-tag--en     { left: calc(50% + 130px * var(--k)); }
.st-tag--enk    { left: calc(50% + 300px * var(--k)); }

/* Video de borde a borde */
.fm { padding: 0; }
.fm-frame { width: 100% !important; max-width: none; border-radius: 0 !important; box-shadow: none; aspect-ratio: 16 / 9; }
.st-scene { perspective: 1800px; perspective-origin: 50% 16%; }
.st[data-alt="repisa"] .ed[data-id="dura"]   { --dx: -372; }
.st[data-alt="repisa"] .ed-deco[data-pile="dura"]   { --dx: calc(-372 + var(--n) * 25); }
.st[data-alt="repisa"] .ed[data-id="blanda"] { --dx: -306; }
.st[data-alt="repisa"] .ed-deco[data-pile="blanda"] { --dx: calc(-306 + var(--n) * 19); }
.st[data-alt="repisa"] .ed::before { display: none; }
.set-repisa .st-bookend.l { left: calc(50% - 258px * var(--k)); }
.st-tag--dura   { left: calc(50% - 360px * var(--k)); }
.st-tag--blanda { left: calc(50% - 288px * var(--k)); top: 0; }
.st-tag--dura, .st-tag--blanda { font-size: max(.5rem, calc(9px * var(--k))); letter-spacing: .14em; padding: calc(3px * var(--k)) calc(7px * var(--k)); }
.st[data-alt="repisa"] .ed:is([data-id="dura"], [data-id="blanda"]), .st[data-alt="repisa"] .ed-deco:is([data-pile="dura"], [data-pile="blanda"]) { --ry: 97deg; }
.st[data-alt="repisa"] .ed[data-id="en"], .st[data-alt="repisa"] .ed-deco[data-pile="en"] { --ry: 93deg; }
.st[data-alt="repisa"] .ed:is([data-id="dura"], [data-id="blanda"], [data-id="en"], .ed-deco)::after { width: 22%; left: 50%; }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="dura"], [data-id="blanda"], [data-id="en"])::after { width: 70%; }
.bk-hard .f-b.ft1, .bk-hard .f-b.ft2, .bk-hard .f-b.fb1, .bk-hard .f-b.fb2 { display: none; }

/* Tapa dura: caras del bloque de hojas con la geometría base (sin cálculos encadenados que el navegador descarta) */
.bk-hard .f-edge, .bk-hard .f-top, .bk-hard .f-bot { border-radius: 0; }
.bk-hard .f-edge {
  top: 0; height: var(--H); width: var(--D); left: calc(50% - var(--D) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--W) / 2 - 3px)) scale(.86, .97);
}
.bk-hard .f-top, .bk-hard .f-bot {
  left: 0; width: var(--W); height: var(--D); top: calc(50% - var(--D) / 2);
}
.bk-hard .f-top { transform: rotateX(90deg) translateZ(calc(var(--H) / 2 - 3px)) scale(.97, .86); }
.bk-hard .f-bot { transform: rotateX(-90deg) translateZ(calc(var(--H) / 2 - 3px)) scale(.97, .86); }
.pq-h { margin: 0; }

/* Arrastrar para girar no selecciona ni arrastra imágenes */
.ov-stage, .ov-obj, .ov-obj *, .st-items, .st-items * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.ov-obj img, .st-items img { pointer-events: none; }

/* ══ Revisión de diseño · repisa y primer plano ══ */
/* hero sin vacío en celular y tablet */
.hero--rack { min-height: auto; padding-bottom: 3rem; }
@media (max-width: 980px) { .hero--rack .hr-copy .hero-pull { display: block; } }
@media (max-width: 600px) { .hero--rack .st, .hero--rack .st.is-open { --k: .4; --sk: .4; } .hero--rack .hr-grid { padding-inline: 16px; } }
/* grupos separados; cada etiqueta bajo su libro */
.st[data-alt="repisa"] .ed[data-id="dura"]   { --dx: -392; }
.st[data-alt="repisa"] .ed-deco[data-pile="dura"]   { --dx: calc(-392 + var(--n) * 25); }
.st[data-alt="repisa"] .ed[data-id="blanda"] { --dx: -300; }
.st[data-alt="repisa"] .ed-deco[data-pile="blanda"] { --dx: calc(-300 + var(--n) * 19); }
.set-repisa .st-bookend.l { left: calc(50% - 246px * var(--k)); }
.st-tag--dura   { left: calc(50% - 380px * var(--k)); }
.st-tag--blanda { left: calc(50% - 281px * var(--k)); }
/* lomos con un hilo de canto visible y leve variación */
.st[data-alt="repisa"] .ed:is([data-id="dura"], [data-id="blanda"]) { --ry: 84deg; }
.st[data-alt="repisa"] .ed-deco[data-n="1"], .st[data-alt="repisa"] .ed-deco[style*="--n:1"] { --ry: 85.5deg; }
.st[data-alt="repisa"] .ed-deco[style*="--n:2"] { --ry: 83deg; --rz: -3deg; }
.st[data-alt="repisa"] .ed[data-id="en"] { --ry: 86deg; }
.bk-hard .f-spine { border-radius: 2px; }
/* proporciones reales: los dispositivos a la misma escala que los libros (un poco contenida) */
.st[data-alt="repisa"] .ed:is([data-id="epub"], [data-id="kindle"], [data-id="enk"]) .rk-obj { --ok: 1.16; }
.dv-phone .f-front img { object-fit: contain; background: #f1ede3; }
/* el libro que sale pasa por delante: más adelante y hacia el hueco libre; los vecinos se apagan */
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="dura"], [data-id="blanda"], [data-id="en"]) { --hz: 230px; --hx: 40px; --hy: -10px; }
.st-items:has(.ed:not(.ed-deco):is(.is-hover, :has(.ed-btn:focus-visible))) .ed:not(.is-hover) .rk-obj { filter: brightness(.72); }
/* sombras proyectadas y de contacto */
.st[data-alt="repisa"] .ed:not(.ed-deco)::before { display: block; left: 10%; right: -4%; top: 6%; bottom: 0; background: rgba(0,0,0,.48);
  filter: blur(calc(10px * var(--k))); transform: translateZ(-60px) translate(8px, 6px); }
.st[data-alt="repisa"] .ed:is([data-id="dura"], [data-id="blanda"], [data-id="en"], .ed-deco)::after { width: 40%; opacity: .85; }
/* luz: fondo más profundo, focos con punto caliente, canto delantero brillante */
.set-repisa .st-back { filter: brightness(.82) contrast(.92); }
.set-repisa .st-light { background: radial-gradient(48% 70% at 50% 0%, rgba(255,214,150,.45), rgba(255,214,150,.1) 55%, transparent 75%); }
.set-repisa .st-floor-in { background:
    radial-gradient(22% 120% at 28% 30%, rgba(255,224,170,.42), transparent 70%),
    radial-gradient(18% 120% at 76% 30%, rgba(255,224,170,.36), transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%, rgba(255,236,196,.12)),
    url('../media/libreria/madera-tabla.webp') 0 0 / auto 260% repeat-x; }
.set-repisa .st-board-bot { box-shadow: inset 0 1px 0 rgba(255,230,180,.55), inset 0 -6px 10px rgba(0,0,0,.35), 0 22px 30px -10px rgba(24,20,15,.55); }
.set-repisa .st-bookend { background: linear-gradient(to right, #1c140c, #3a2a1a 45%, #22180f); }
.set-repisa .st-bookend::after { background: linear-gradient(#3a2a1a, #1c140c); }
/* etiquetas: portaetiquetas de bronce, un solo tamaño */
.st-tag, .st-tag--dura, .st-tag--blanda {
  background: linear-gradient(#e6cd96, #b48a45); color: #1f170e; border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.45);
  font-size: max(.5rem, calc(9.5px * var(--k))); letter-spacing: .14em; padding: calc(3px * var(--k)) calc(8px * var(--k));
}
/* primer plano: velo oscuro para que el texto se lea */
.ov-veil { background: rgba(24,20,15,.72); }
/* especificación bajo la repisa en DM Sans (funcional) */
.st-hint .st-hint-spec { font-family: var(--ff-u); font-style: normal; font-size: .82rem; color: var(--ink3); }
/* sin filtro en los vecinos (aplana el 3D); etiquetas cortas en celular */
.st-items:has(.ed:not(.ed-deco):is(.is-hover, :has(.ed-btn:focus-visible))) .ed:not(.is-hover) .rk-obj { filter: none; }
.st-tag .st-tag-s { display: none; }
@media (max-width: 600px) { .st-tag .st-tag-l { display: none; } .st-tag .st-tag-s { display: inline; } }

/* ══ Revisión de animaciones ══ */
.st[data-alt="repisa"] .ed .rk-obj, .st[data-alt="repisa"] .ed.is-hover .rk-obj { filter: none !important; }
.st[data-alt="repisa"] .ed.is-hover[data-id="dura"] { --hx: 70px; }
/* cantos de los dispositivos dentro de las esquinas redondeadas */
.dv-ipad { --r: calc(17px * var(--k)); } .dv-kindle { --r: calc(9px * var(--k)); } .dv-phone { --r: calc(15px * var(--k)); }
.dv .f-top, .dv .f-bot { left: var(--r); width: calc(var(--W) - 2 * var(--r)); }
.dv .f-spine, .dv .f-edge { top: var(--r); height: calc(var(--H) - 2 * var(--r)); }
/* tiendas siempre alcanzables */
.ov-panel { max-height: calc(100vh - var(--top, 60vh) - 12px); max-height: calc(100dvh - var(--top, 60vh) - 12px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: .6rem; }
/* cierre sin retrasos: las demoras solo al abrir */
.ov-panel, .ov-close, .ov-drag { transition-delay: 0s !important; }
.ov.is-on .ov-panel { transition-delay: .35s !important; } .ov.is-on .ov-close { transition-delay: .2s !important; } .ov.is-on .ov-drag { transition-delay: .6s !important; }
.ov-obj .rk-obj.is-snap { transition-duration: .6s; }
@media (max-width: 600px) {
  .st-tag, .st-tag--dura, .st-tag--blanda { font-size: 7.5px; letter-spacing: .06em; padding: 2px 4px; }
  .st-tag--epub { left: calc(50% - 186px * var(--k)); }
}
@media (max-width: 980px) {
  .st-tag .st-tag-l { display: none; } .st-tag .st-tag-s { display: inline; }
  .st-tag--blanda { top: calc(16px * var(--k) + 8px); }
}
@media (max-width: 600px) { .st-tag--epub { left: calc(50% - 168px * var(--k)); } }

/* Franja de confianza bajo la repisa */

/* ══ Página inglesa: la división «English» va primero ══
   Solo se espeja el mueble (tablas, división, luces); los libros y dispositivos
   se reubican con la posición opuesta, así tapas, textos y lomos quedan al derecho. */
html[lang="en"] .st-set { transform: scaleX(-1); }
html[lang="en"] .st-set .st-sign b { display: block; transform: scaleX(-1); }
html[lang="en"] .st[data-alt="repisa"] .ed { left: calc(50% - var(--dx, 0) * var(--k) * 1px); }
html[lang="en"] .st-tags { transform: scaleX(-1); }
html[lang="en"] .st-tag > span { transform: scaleX(-1); }
html[lang="en"] .st-tag > span:not([hidden]) { display: inline-block; }

/* ══ Instagram: entre la frase y la repisa ══ */
.hero-ig {
  display: inline-flex; align-items: center; gap: .5rem; margin: 1.1rem auto 0;
  font-family: var(--ff-u); font-size: .8rem; font-weight: 500; letter-spacing: .06em; color: #4A443D;
  text-decoration: none; padding: .45rem .9rem .45rem .7rem; border-radius: 999px;
  border: 1px solid rgba(24,20,15,.14); background: rgba(255,255,255,.35);
  transition: color .25s, border-color .25s, background-color .25s, transform .25s;
}
.hero-ig svg { width: 20px; height: 20px; flex: none; }
.hero-ig:hover, .hero-ig:focus-visible { color: var(--rust2); border-color: currentColor; background: rgba(255,255,255,.7); transform: translateY(-1px); }
.hr-copy:has(.hero-ig) { display: flex; flex-direction: column; align-items: center; }

/* ══ Prueba social bajo la repisa: medios y reseñas que corren ══ */
.hp { position: relative; width: min(100%, 1180px); margin: 1.2rem auto 0; display: grid; gap: .5rem; }
.hp-mq {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.hp-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; width: max-content;
  animation: hp-run var(--hp-dur, 38s) linear infinite; }
.hp-mq--rev .hp-track { --hp-dur: 70s; }
.hp-mq:hover .hp-track, .hp-mq:focus-within .hp-track, .hp.is-paused .hp-track { animation-play-state: paused; }
@keyframes hp-run { to { transform: translateX(-50%); } }

/* marcas de los medios (tipográficas, monocromas; color al pasar) */
.hp-logo { display: flex; align-items: center; height: 54px; padding: 0 2.6rem; color: #5C554D; text-decoration: none;
  opacity: .78; transition: opacity .25s, color .25s; position: relative; }
.hp-logo::after { content: ''; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--gold, #A07A40); opacity: .55; }
.hp-logo:hover, .hp-logo:focus-visible { opacity: 1; color: var(--ink, #18140F); }
.wm { font-weight: 400; line-height: 1; white-space: nowrap; }
.wm-infobae { font-family: var(--ff-u); font-weight: 800; font-size: 1.62rem; letter-spacing: -.045em; text-transform: lowercase; }
.wm-losandes { font-family: var(--ff-s); font-weight: 700; font-size: 1.85rem; letter-spacing: -.01em; }
.wm-uno { font-family: var(--ff-m); font-weight: 800; font-size: 1.6rem; letter-spacing: .02em; display: inline-flex; align-items: baseline; gap: .32em; }
.wm-uno small { font-family: var(--ff-u); font-weight: 500; font-size: .5em; letter-spacing: .14em; text-transform: uppercase; }

/* reseñas */
.hp-rev { display: flex; align-items: baseline; gap: .7rem; padding: .35rem 2.4rem; color: #3C362F; text-decoration: none; white-space: nowrap; position: relative; }
.hp-rev::after { content: ''; position: absolute; right: -1px; top: 25%; bottom: 25%; width: 1px; background: rgba(24,20,15,.14); }
.hp-stars { color: var(--gold, #A07A40); font-size: .78rem; letter-spacing: .12em; }
.hp-rev q { font-family: var(--ff-s); font-style: italic; font-size: 1.12rem; quotes: none; }
.hp-who { font-family: var(--ff-u); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #6B645C; }
.hp-rev:hover q, .hp-rev:focus-visible q { color: var(--rust2); }

/* pausa (WCAG 2.2.2) */
.hp-toggle { position: absolute; right: 0; bottom: -2.4rem; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(24,20,15,.16); background: transparent; color: #6B645C; cursor: pointer; display: grid; place-items: center; padding: 0;
  opacity: .7; transition: opacity .2s, color .2s; }
.hp-toggle:hover, .hp-toggle:focus-visible { opacity: 1; color: var(--ink, #18140F); }
.hp-toggle svg { width: 14px; height: 14px; }
.hp-toggle .i-play, .hp.is-paused .hp-toggle .i-pause { display: none; }
.hp.is-paused .hp-toggle .i-play { display: inline; }

@media (max-width: 600px) {
  .hp-logo { height: 44px; padding: 0 1.6rem; }
  .wm-infobae { font-size: 1.3rem; } .wm-losandes { font-size: 1.45rem; } .wm-uno { font-size: 1.28rem; }
  .hp-rev { padding: .3rem 1.6rem; } .hp-rev q { font-size: 1rem; }
  .hero-ig { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .hp-track [aria-hidden="true"] { display: none; }
  .hp-track li:has(> [aria-hidden="true"]) { display: none; }
  .hp-mq { -webkit-mask-image: none; mask-image: none; }
  .hp-rev { white-space: normal; }
  .hp-toggle { display: none; }
}
/* libros de lomo: la sombra proyectada tiene el ancho del lomo, no el de la tapa (no asoma fuera del mueble) */
.st[data-alt="repisa"] .ed:is([data-id="dura"], [data-id="blanda"], [data-id="en"])::before { left: 30%; right: 30%; }
html[lang="en"] .st[data-alt="repisa"] .ed:not(.ed-deco)::before { transform: translateZ(-60px) translate(-8px, 6px); }
/* Tapa dura: el lomo es más ancho y alto que el de la tapa blanda; la imagen entra completa (sin recorte
   del texto) y el resto del lomo toma el color de la tela */
.bk-hard .f-spine { background: #191512; }
.bk-hard .f-spine img { object-fit: contain; }
@media (max-width: 600px) { .hp { margin-top: -.4rem; } }

/* ══ Sacar un libro del estante, como en la vida real ══
   1) primero se desliza hacia afuera y se levanta un poco (sin girar);
   2) recién afuera gira para mostrar la tapa.  Al soltarlo, al revés: gira y vuelve a entrar.
   Las etiquetas del canto se apartan para que no queden encima del libro. */
.st[data-alt="repisa"] .ed .ed-pose { transition: transform .5s cubic-bezier(.3,.7,.2,1) .16s; }
.st[data-alt="repisa"] .ed .rk-obj  { transition: transform .45s cubic-bezier(.3,.7,.2,1) 0s; }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)) .ed-pose { transition: transform .48s cubic-bezier(.25,.75,.2,1) 0s; }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)) .rk-obj  { transition: transform .55s cubic-bezier(.25,.75,.2,1) .2s; }
/* el libro sale levantado: su base nunca queda detrás del canto ni de las etiquetas */
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="dura"], [data-id="blanda"], [data-id="en"]) { --hy: calc(-46px * var(--k)); }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="epub"], [data-id="kindle"], [data-id="enk"]) { --hy: calc(-30px * var(--k)); }
.st-tags { transition: opacity .25s ease; }
.st:has(.ed:not(.ed-deco):is(.is-hover, :has(.ed-btn:focus-visible))) .st-tags,
.st.is-open .st-tags { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .st[data-alt="repisa"] .ed .ed-pose, .st[data-alt="repisa"] .ed .rk-obj { transition: none !important; }
}
/* la tapa dura sale hacia el hueco libre, sin pasarse del borde del mueble */
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible))[data-id="dura"] { --hx: calc(165px * var(--k)); }
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible))[data-id="blanda"] { --hx: calc(70px * var(--k)); }
/* el libro que sale pasa por delante de los carteles colgados */
.st-items:has(.ed:not(.ed-deco):is(.is-hover, :has(.ed-btn:focus-visible))) { z-index: 3; }
.st-items { z-index: 0; transition: z-index 0s linear .7s; }
.st-items:has(.ed:not(.ed-deco):is(.is-hover, :has(.ed-btn:focus-visible))) { transition-delay: 0s; }
/* página inglesa: el libro sale hacia el hueco libre del lado espejado */
html[lang="en"] .st[data-alt="repisa"] .ed .ed-pose { transform: translate3d(calc(var(--hx, 0px) * -1), var(--hy, 0px), var(--hz, 0px)) rotateZ(calc(var(--rz, 0deg) * -1)); }
/* fuente de las reseñas, visible */
.hp-src { margin: .1rem 0 0; text-align: center; font-family: var(--ff-u); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #6B645C; }
@media (max-width: 600px) { .hp-src { font-size: .58rem; letter-spacing: .06em; padding-inline: 1rem; } }

/* ══ Revisión de diseño (equipo) ══ */
/* el libro que sale no atrapa el mouse: la zona activa sigue siendo su lugar en el estante */
.st[data-alt="repisa"] .ed.is-hover .ed-pose { pointer-events: none; }
/* sale un poco menos: no sobrepasa la tabla de arriba */
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible)):is([data-id="dura"], [data-id="blanda"], [data-id="en"]) { --hz: 175px; }
/* sombra de contacto del libro levantado */
.st[data-alt="repisa"] .ed:is(.is-hover, :has(.ed-btn:focus-visible))::after { opacity: .6; }
/* etiquetas en una sola fila también en tablet y celular */
@media (max-width: 980px) {
  .st-tag--blanda { top: 0; }
  .st-tag--dura { left: calc(50% - 398px * var(--k)); }
  .st-tag--blanda { left: calc(50% - 268px * var(--k)); }
}
/* primer plano: foco de luz en lugar de un velo gris; el ícono de giro separado del libro */
.ov-veil { background: radial-gradient(60% 55% at 50% 40%, rgba(24,20,15,.80), rgba(12,10,8,.95)); }
.ov-drag { margin-top: -1.4rem; }

/* ══ Revisión de accesibilidad y compra (equipo) ══ */
/* inglés: cada etiqueta muestra una sola versión (larga o corta) y al derecho */
.st-tag .st-tag-s { display: none !important; }
@media (max-width: 980px) { .st-tag .st-tag-l { display: none !important; } .st-tag .st-tag-s { display: inline-block !important; } }
/* en pantallas táctiles las etiquetas también se tocan */
@media (hover: none) { .st-tags { pointer-events: none; } .st-tag { pointer-events: auto; cursor: pointer; } }
/* COMPRAR: el libro sube y se achica para que la lista de tiendas entre entera */
.ov-stage { transition: transform .45s cubic-bezier(.2,.75,.15,1); transform-origin: 50% 0; }
.ov-panel { transition: opacity .5s ease .35s, top .45s cubic-bezier(.2,.75,.15,1); }
.ov.is-buying .ov-stage { transform: scale(.72); }
.ov.is-buying .ov-drag { opacity: 0 !important; }
.ov.is-buying .ov-panel { top: calc(var(--top, 60vh) - 16vh); max-height: calc(100dvh - var(--top, 60vh) + 16vh - 12px); }
/* botones de pausa: visibles y con contraste */
.hp-toggle { opacity: 1; color: #4A443D; border-color: rgba(24,20,15,.3); }
/* «Para quién»: el público enfocado se ve entero */
.pqb-mq:focus-within { -webkit-mask-image: none; mask-image: none; }
/* inicio más compacto: la frase del estante y la franja de prensa entran en la primera pantalla */
@media (min-width: 981px) {
  .hero--rack { padding-top: 4.9rem; }
  .hero--rack .hero-kicker { margin-bottom: .6rem; }
  .hero--rack .hero-author { margin-bottom: .6rem; }
  .hero--rack .hr-grid { gap: .9rem; }
  .hero-ig { margin-top: .7rem; }
  .hero--rack .hero-title-main { font-size: clamp(3rem, 5.6vw, 5rem); }
}
@media (min-width: 981px) and (max-height: 960px) {
  .hero--rack .st, .hero--rack .st.is-open { --k: .9; --sk: .9; }
  .hero--rack .hero-pull { margin-top: .4rem; margin-bottom: 0; }
}
@media (min-width: 981px) and (max-height: 840px) {
  .hero--rack .st, .hero--rack .st.is-open { --k: .78; --sk: .78; }
  .hero--rack { padding-top: 4.6rem; }
}