/* Movimiento compartido por las portadas.
 *
 * El contenido NUNCA nace invisible desde aquí: la clase que lo oculta la pone
 * el JavaScript (`entra--espera`), así que si el script no carga todo se ve
 * igual. Es la lección de cuando el catálogo entero desaparecía porque
 * `app.js` no llegaba.
 *
 * Y todo queda anulado si el visitante pide reducir movimiento — al final del
 * fichero, sin excepciones. */

/* ── Entrada al aparecer ─────────────────────────────────────────────────── */
.entra--espera { opacity: 0; transform: translateY(14px); }
.entra--espera,
.entra--ya     { transition: opacity .55s cubic-bezier(.2,.7,.3,1),
                             transform .55s cubic-bezier(.2,.7,.3,1); }
.entra--ya     { opacity: 1; transform: none; }

/* Variantes: se piden con data-entra="lado" o "escala" */
[data-entra="lado"].entra--espera   { transform: translateX(-18px); }
[data-entra="escala"].entra--espera { transform: scale(.965); }

/* ── Cinta ───────────────────────────────────────────────────────────────── */
.cinta { overflow: hidden; position: relative; display: flex; }
.cinta > *  { display: flex; gap: 28px; padding-right: 28px; flex: 0 0 auto; }
.cinta--lista > * { animation: cinta-corre 34s linear infinite; }
.cinta:hover > *  { animation-play-state: paused; }
@keyframes cinta-corre { to { transform: translateX(-100%); } }
/* Los bordes se desvanecen para que no parezca que el texto se corta. */
.cinta::before, .cinta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2; pointer-events: none;
}
.cinta::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.cinta::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

/* ── Carrusel ────────────────────────────────────────────────────────────── */
.carrusel { position: relative; }
.carrusel [data-lamina] {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, transform .5s ease; transform: scale(1.02);
}
.carrusel [data-lamina].lamina--ya { position: relative; opacity: 1; visibility: visible; transform: none; }
.car-punto {
  width: 26px; height: 4px; border: 0; border-radius: 99px; cursor: pointer;
  background: currentColor; opacity: .28; padding: 0; transition: opacity .25s, width .25s;
}
.car-punto.on { opacity: 1; width: 40px; }
.car-punto:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ── Brillo que sigue al puntero (lo usa data-inclina) ───────────────────── */
[data-inclina] { transition: transform .18s ease-out; will-change: transform; }
[data-inclina]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .25s;
  background: radial-gradient(340px circle at var(--brillo-x,50%) var(--brillo-y,50%),
              rgba(255,255,255,.16), transparent 60%);
}
[data-inclina]:hover::after { opacity: 1; }

/* ── Nada de lo anterior si el visitante pide calma ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .entra--espera { opacity: 1 !important; transform: none !important; }
  .cinta--lista > * { animation: none !important; }
  .carrusel [data-lamina] { position: relative; opacity: 1; visibility: visible; transform: none; }
  [data-inclina] { transform: none !important; }
  [data-inclina]::after { display: none; }
  * { scroll-behavior: auto !important; }
}