/* El cubo de las reseñas (js/src/cubo.js). Sin JavaScript, sin WebGL o con movimiento reducido se leen las tarjetas;
   con el cubo vivo («.cubo-vivo») se ven el lienzo y los mandos, y las tarjetas pasan a ser solo para lectores. */
.cubo { position: relative; padding: clamp(56px, 10vh, 110px) var(--margen) clamp(48px, 8vh, 90px); text-align: center; color: var(--tinta); }
.cubo-kicker { margin: 0 0 8px; color: var(--cielo); font: 700 .78rem/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; }
.cubo h2 { margin: 0; font: 700 clamp(1.7rem, 4.4vw, 2.8rem)/1.1 var(--display); }
.cubo-media { margin: 12px 0 0; color: var(--tenue); font: 400 .98rem/1.6 var(--texto); }
.cubo-media .estrellas { margin-right: 6px; }
.cubo-media a { color: var(--cielo); }
.cubo-lienzo { display: none; position: relative; width: min(600px, 100%); aspect-ratio: 1; margin: 8px auto 4px; touch-action: pan-y; cursor: grab; }
.cubo-lienzo.arrastrando { cursor: grabbing; }
.cubo-lienzo canvas { display: block; width: 100%; height: 100%; }
.cubo-lienzo:focus-visible { outline: 2px solid var(--cielo); outline-offset: 4px; border-radius: 12px; }
.cubo-mandos { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.cubo-mandos button, .cubo-todas button { font: 600 .92rem/1 var(--texto); min-height: 42px; border-radius: 999px; cursor: pointer; }
.cubo-flecha, .cubo-pausa { display: none; width: 44px; background: transparent; color: var(--tinta); border: 1px solid var(--linea-fuerte); }
.cubo-flecha:hover, .cubo-pausa:hover { border-color: var(--cielo); color: var(--cielo); }
.cubo-ver { padding: 0 20px; background: var(--boton-fondo); color: var(--boton-texto); border: 0; box-shadow: 0 0 24px var(--boton-sombra); }
.cubo-vivo .cubo-lienzo { display: block; }
.cubo-vivo .cubo-flecha, .cubo-vivo .cubo-pausa { display: inline-block; }
.cubo-oculto, .cubo-vivo .cubo-tarjetas { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Las tarjetas: lo que se lee siempre */
.cubo-tarjetas { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px;
  max-width: 1100px; margin: 32px auto 0; padding: 0; text-align: left; }
.cubo-tarjetas li, .cubo-lista li { padding: 18px 20px; border: 1px solid var(--linea); border-radius: 16px; background: var(--panel); }
.cubo-tarjetas p, .cubo-lista p { margin: 10px 0 0; color: var(--suave); line-height: 1.6; }
.cubo-quien { font: 400 .86rem/1.4 var(--texto); color: var(--tenue); }
.cubo-quien b { color: var(--tinta); }
.cubo-quien .estrellas { margin: 0 4px; }

.cubo-todas { width: min(720px, calc(100vw - 32px)); max-height: min(82vh, 780px); padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 20px;
  background: var(--fondo); color: var(--tinta); }
.cubo-todas::backdrop { background: rgba(var(--fondo-rgb), .72); backdrop-filter: blur(4px); }
.cubo-todas header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 20px; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.cubo-todas h3 { margin: 0; font: 700 1.2rem/1.2 var(--display); }
.cubo-todas header button { padding: 0 16px; background: none; border: 1px solid var(--linea-fuerte); color: var(--tinta); }
.cubo-lista { list-style: none; margin: 0; padding: 12px 20px 4px; display: grid; gap: 12px; text-align: left; }
.cubo-todas footer { padding: 12px 20px 20px; color: var(--tenue); font: 400 .85rem/1.5 var(--texto); text-align: left; }
.cubo-todas footer a { color: var(--cielo); }

/* Que la escena de fondo no pase por detrás de las letras de polvo: fondo propio con fundidos, como tenía la travesía */
.cubo { background: var(--fondo); }
.cubo::before, .cubo::after { content: ""; position: absolute; left: 0; right: 0; height: 10vh; pointer-events: none; }
.cubo::before { bottom: 100%; background: linear-gradient(to bottom, rgba(var(--fondo-rgb), 0), var(--fondo)); }
.cubo::after { top: 100%; background: linear-gradient(to top, rgba(var(--fondo-rgb), 0), var(--fondo)); }