:root {
  --plyr-color-main: #bf4a1a; /* Tu rojo EMSAM */
  --plyr-video-control-background-hover: rgba(0, 0, 0, 0.30);  /* ? */
  --plyr-video-control-color: #efedea; /* Iconos (play, engranaje, etc) */
  --plyr-control-toggle-checked-background: #bf4a1a;  /* ? */
  --plyr-badge-text-color: #efedea;    /* texto botones resolucion*/
  --plyr-menu-background: #efedea;   /* Color cuadros de fondo (blanco) */
  --plyr-menu-shadow: #bf4a1a;  /* ? */
}

.video-wrapper {
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.video-wrapper:hover {
  transform: scale(1.2);
}

.video-gallery {
  gap: 60px !important;
  padding-top: 60px;
}
/* Personalizacion del boton de play en Plyr */
.plyr__control.plyr__control--overlaid {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  
}

.plyr__control.plyr__control--overlaid svg {
  width: 30px !important;
  height: 30px !important;
  fill: white !important;
  transition: all 0.3s ease-in-out;
}
.plyr__control.plyr__control--overlaid:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
  animation: shake-hover 0.2s ease-in-out;
}
.video-wrapper.js-player {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 800px;
}
.video-wrapper {
  position: relative; /* importante para que lo anterior funcione */
}

@keyframes shake-hover {
  0% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.plyr__controls button:hover svg {
  animation: shake-hover 0.4s ease-in-out;
}
/* Por defecto en escritorio */
.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}

/* En móviles verticales o pantallas pequeñas */
@media screen and (max-width: 768px), screen and (orientation: portrait) {
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: block !important;
  }
}
.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}

/* Por precaución, fuerza ocultar Plyr en pantallas pequeñas */
@media screen and (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }

  }
/* Aplica solo a videos dentro de Plyr para rellenar el contenedor y evitar bordes negros*/
/* Forzar zoom manual y cubrir el contenedor completo */