/* ==========================================================================
   Peronchómetro — theme
   El color viene de "slides" y de los tramos en config.json.
   Acá solo van los guiños propios, bajo el modificador .ometro--peroncho
   ========================================================================== */

/* Franja celeste y blanca al pie de la intro */
.ometro--peroncho .quiz__screen--intro {
  background:
    linear-gradient(#6cace4, #6cace4) bottom 16px left 0 / 100% 10px no-repeat,
    linear-gradient(#fff, #fff) bottom 6px left 0 / 100% 10px no-repeat,
    linear-gradient(#6cace4, #6cace4) bottom -4px left 0 / 100% 10px no-repeat;
}

/* La mascota "marcha" al ritmo del bombo */
.ometro--peroncho .quiz__hero .sticker {
  animation: peroncho-marcha 1.06s ease-in-out infinite;
}

@keyframes peroncho-marcha {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  25%      { transform: rotate(-3deg) translateY(-6px); }
  50%      { transform: rotate(-6deg) translateY(0); }
  75%      { transform: rotate(-9deg) translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .ometro--peroncho .quiz__hero .sticker { animation: none; }
}