/* ---------------------------------------------
   VIDEO POPUP MODULE STYLES – subgrafica
--------------------------------------------- */

.video-image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 5px;
  overflow: hidden;
}

.video-background {
  width: 100%;
  height: auto;
  display: block;
}

/* Cursor pointer solo si hay video */
.video-popup-trigger.has-video {
  cursor: pointer;
}

/* Icono de reproducción centrado */
.video-play-icon {
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* Mostrar icono solo si hay video y hover */
.video-popup-trigger.has-video:hover .video-play-icon {
  opacity: 1;
}

/* Ocultar icono si no hay video */
.video-popup-trigger:not(.has-video) .video-play-icon {
  display: none;
}

/* Título del video */
.video-title {
  font-family: var(--ffa);
  font-size: var(--fs-p) !important;
  font-weight: var(--fwl-2);
  line-height: var(--flh2);
  letter-spacing: var(--fls);
  cursor: default;
}

/* Subtítulo */
.video-subtitle {
  font-family: var(--ffa);
  font-size: var(--fs-p) !important;
  font-weight: var(--fwl-1);
  line-height: var(--flh2);
  letter-spacing: var(--fls);
  margin-top: 4px;
  cursor: default;
}

/* Contenedor de texto */
.video-text-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  opacity: 0;
  animation: fadeInText 0.3s ease 0.5s forwards;
}

/* Márgenes de texto */
.video-title,
.video-subtitle {
  margin-top: 2px;
}

/* Animación de entrada de texto */
@keyframes fadeInText {
  to {
    opacity: 1;
  }
}

/* Estilos Magnific Popup (fade simple) */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mfp-fade.mfp-bg.mfp-ready {
  opacity: 1;
}

.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-fade .mfp-content {
  opacity: 0;
  transition: opacity 0.3s ease 0.3s;
}

.mfp-fade.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-fade.mfp-removing .mfp-content {
  opacity: 0;
  transition-delay: 0s;
}

/* Botón cerrar del popup */
.mfp-close {
  position: fixed !important;
  top: 20px !important;
  right: 2% !important;
  padding-right: 0px !important;
  z-index: 10000 !important;
  width: 20px;
  height: 20px;
  background: url('https://juliogomeztrevilla.com/wp-content/uploads/2025/05/close_bl_2@2x.png') no-repeat right center !important;
  background-size: contain !important;
  color: transparent;
  font-size: 0 !important;
  border: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.mfp-close:hover {
  opacity: 1 !important;
}

.mfp-close:hover {
  opacity: 1;
}

/* Fade básico para otros usos */
@keyframes fadeInOnly {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}