/* Versión para tablet/escritorio (más lenta y elegante) */
.bola-girando {
    animation: girarMundo 16s linear infinite; /* Más lento (12s) */
    transform-style: flat;
    perspective: none;
}

/* Versión para móviles (más rápida y fluida) */
@media (max-width: 768px) {
    .bola-girando {
        animation: girarMundo 16s linear infinite; /* Más rápido (6s) */
        transform-style: flat; /* Desactiva el 3D pesado */
        perspective: none;
        will-change: transform;
    }
}

@keyframes girarMundo {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* ========================================== */
/* BANDERA - MOVIMIENTO SUTIL PERCEPTIBLE    */
/* ========================================== */

.bandera-rd {
  display: inline-block;
  width: auto;
  max-width: 100%;
  background: transparent !important;
  animation: ondularSutil 4s ease-in-out infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 0;
  margin: 0;
  line-height: 0;
}

.bandera-rd img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: transparent !important;
  pointer-events: none;
  border: none;
  outline: none;
  box-shadow: none;
}

/* ========================================== */
/* ANIMACIÓN: ONDULACIÓN SUTIL PERCEPTIBLE   */
/* ========================================== */

@keyframes ondularSutil {
  0% {
    transform: scale(1, 1) rotate(0deg) skewX(0deg) translateY(0px);
  }
  20% {
    transform: scale(1.03, 0.96) rotate(1.2deg) skewX(1.2deg) translateY(-3px);
  }
  40% {
    transform: scale(1.04, 0.94) rotate(1.8deg) skewX(1.8deg) translateY(-2px);
  }
  60% {
    transform: scale(1.04, 0.94) rotate(1.8deg) skewX(1.8deg) translateY(2px);
  }
  80% {
    transform: scale(1.03, 0.96) rotate(1.2deg) skewX(1.2deg) translateY(3px);
  }
  100% {
    transform: scale(1, 1) rotate(0deg) skewX(0deg) translateY(0px);
  }
}

/* ========================================== */
/* VERSIÓN MÓVIL                             */
/* ========================================== */

@media (max-width: 768px) {
  .bandera-rd {
    animation: ondularSutil 3.2s ease-in-out infinite;
  }
}