/* ═══ HACERLO TAMBIÉN EN LA OTRA EDICIÓN · js/kora-otra-edicion.js ═══ 14 oct 2026
   La tarjeta en la compra con su muestra, y el velo mientras se
   pasa la historia. */
.koe-compra{
  margin:3.4rem 0 0 !important; padding:34px 0 0; max-width:none !important;
  background:none; border:0; border-top:1px solid #E4E2DE; border-radius:0;
  color:var(--k2-ink,#35322F); text-align:left;
}
/* 15 oct · Vivi: «siento el texto muy apretado, vamos a dejarlo que respire
   más». Más margen alrededor, el título más grande y con su renglón, y aire
   entre cada pieza: rótulo, título, muestra, texto y botón. */
.koe-k{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--k2-sand,#9E9993); margin:0 0 12px }
.koe-compra .koe-t{ font-family:'Cormorant Garamond',var(--font-display),serif; font-size:27px; line-height:1.3; margin:0 0 24px; max-width:640px }
.koe-compra .koe-s{ font-size:15px; line-height:1.75; color:var(--k2-ink-soft,#625E58); margin:26px 0 24px; max-width:640px }

/* La muestra: el spread de la otra edición, con el dibujo del editor.
   Lo que en el editor está atado a #s2 se repite aquí: el pliego es su propio
   contenedor y la letra se mide contra él (ver «LA MEDIDA DEL PLIEGO» en
   styles.css). Sin esto, el verso de Kids sale del tamaño de la ventana. */
.koe-sp{ position:relative; margin:0 }
.koe-sp .spread{ width:100%; max-width:none; margin:0; cursor:default }
.koe-sp .spread:not(.single){ container-type:inline-size }
.koe-sp .spread:not(.single) .verse{ font-size:clamp(9px, 1.69cqw, 22px) }
.koe-sp .spread:not(.single) .cap{ font-size:clamp(8px, 1.5cqw, 19px) }
.koe-sp .spread.kids:not(.kidscover) > *{ --k-pl:100cqw }
.koe-sp .spread.kids .pg:not(.bb-txt) .kverse{ font-size:calc(var(--k-pl) * .0169) }
.koe-sp .spread.kids .pg:not(.bb-txt) .ktext .kttl{ font-size:calc(var(--k-pl) * var(--kttl-p) / 100) }
.koe-sp .spread *{ pointer-events:none }
/* Un hueco que se quedó sin foto no se enseña: en la muestra no hay nada que subir. */
.koe-sp .blob.empty{ visibility:hidden }
/* Mientras se pinta, la foto va tal cual y un poco apagada. */
.koe-sp.koe-sin-pintar .spread img{ filter:saturate(.35) brightness(1.06); transition:filter .6s }
.koe-sp-estado{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); margin:0;
  padding:7px 14px; border-radius:20px; background:rgba(255,253,249,.94);
  font-size:13px; color:var(--k2-taupe,#6B6660); white-space:nowrap;
  box-shadow:0 6px 18px -8px rgba(44,37,32,.35);
}
.koe-cargando .koe-sp-estado{ animation:koeLate 1.6s ease-in-out infinite }
@keyframes koeLate{ 50%{ opacity:.55 } }
.koe-btns{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
/* El botón lleva su propio estilo: `.k2-btn-primary` solo existe dentro de
   las pantallas de la tienda (.k2new), y esta ventana vive fuera de ellas. */
.koe-si{
  font-family:var(--font-body,'Jost'); font-size:15px; letter-spacing:.02em; cursor:pointer;
  padding:13px 24px; border:1px solid #58534D; border-radius:10px; background:#fff; color:#58534D;
}
.koe-si:hover{ background:#58534D; color:#fff }

.koe-velo{
  position:fixed; inset:0; z-index:9300; background:rgba(246,241,232,.92);
  display:flex; align-items:center; justify-content:center;
}
.koe-velo-c{ text-align:center; color:var(--k2-ink,#35322F); font-size:16px }
.koe-giro{
  display:inline-block; width:28px; height:28px; border-radius:50%;
  border:2px solid var(--k2-line,#E4E1DC); border-top-color:var(--k2-taupe,#6B6660);
  animation:koeGira .9s linear infinite;
}
@keyframes koeGira{ to{ transform:rotate(360deg) } }
/* En el teléfono el editor apila las dos hojas, una debajo de otra. Aquí
   no: la muestra es para verla de un vistazo, como el libro abierto, así que
   va lado a lado y en chico (deshace la regla de 760px de styles.css). */
@media (max-width:760px){
  .koe-sp .spread{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); aspect-ratio:var(--k-spread-ar, 8/5) }
  .koe-sp .spread > .pg{ min-width:0 }
  .koe-sp .spread{ min-height:0; height:auto }
  .koe-sp .spread::after{ display:block }
  .koe-sp .spread .pg{ min-height:0; padding:6% 6% var(--k-piso) }
  .koe-sp .spread > .pg.kids-pg{ min-height:0 }
  .koe-sp .spread > .pg:not(.pg-empty) + .pg:not(.pg-empty){ box-shadow:none }
}
@media (max-width:640px){
  .koe-compra{ padding:26px 0 0 }
  .koe-compra .koe-t{ font-size:22px; margin-bottom:18px }
  .koe-compra .koe-s{ font-size:14.5px; margin:20px 0 18px }
  .koe-sp-estado{ font-size:12px; bottom:8px }
  .koe-si{ width:100% }
}
/* En el carrito el libro ya cierra con su raya: la sugerencia no lleva otra. */
.kcp-en-carrito .koe-compra{ border-top:0; padding-top:0; margin-top:2.8rem !important }