/* ==========================================================================
   Cinta de sponsors — pie de las pantallas del invitado (acreditación y
   sorteo). La arma sponsors.js; sin logos no existe y nada de esto aplica.
   ========================================================================== */

:root { --alto-cinta: calc(58px + env(safe-area-inset-bottom)); }

/* Blanca, para que cada logo vaya con sus colores venga como venga: en el
   fondo navy del sitio, la mitad de los logos de un sponsor no se leen. */
.cinta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Arriba de los papelitos (0) y del escenario (1) del sorteo. */
  z-index: 5;
  overflow: hidden;
  padding: 11px 0 calc(11px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid rgba(15, 23, 42, .12);
  box-shadow: 0 -6px 18px rgba(2, 6, 16, .18);
  pointer-events: none;
}

.cinta__pista {
  display: flex;
  align-items: center;
  width: max-content;
  animation: cinta-corre var(--cinta-vuelta, 30s) linear infinite;
}

/* Margen a la derecha y no `gap`: así cada logo carga su propio espacio, las
   dos tandas miden exactamente lo mismo, y correr la mitad empalma sin salto. */
.cinta__logo {
  flex: 0 0 auto;
  height: 36px;
  width: auto;
  max-width: 150px;
  margin-right: 40px;
  object-fit: contain;
}

@keyframes cinta-corre { to { transform: translateX(-50%); } }

/* El contenido no queda tapado: el cuerpo deja lugar abajo. */
body.con-cinta { padding-bottom: var(--alto-cinta); }
/* El escenario del sorteo ocupa la pantalla entera: sin esto la página se
   estiraría el alto de la cinta y aparecería un scroll de más. */
body.con-cinta .escenario { min-height: calc(100svh - var(--alto-cinta)); }

/* Sin movimiento para quien lo pidió en su celular: la cinta queda quieta. */
@media (prefers-reduced-motion: reduce) {
  .cinta__pista { animation: none; }
}