/* ----------------------------------------------------------
   MEDIA HOVERS MODULE – Subgrafica
   FINAL PRO (ALIGNED WITH PHP)
----------------------------------------------------------- */

/* =========================================
   OUTER WRAPPER
========================================= */

.et_pb_media_hovers_wrapper{
  position:relative;
  width:100%;
  margin-bottom:40px;
  display:block;
}

/* =========================================
   MEDIA WRAPPER
========================================= */

.mh-media-wrapper{
  position:relative;
  width:100%;
  display:block;
  overflow:hidden;
}

/* =========================================
   LINK OVERLAY (SOLO IMAGEN)
========================================= */

.et_pb_media_hovers_wrapper.mh-click-link .mh-real-link{
  position:absolute;
  inset:0;
  display:block;
  z-index:3;
  text-indent:-9999px;
}

/* =========================================
   STILL IMAGE
========================================= */

.mh-image-wrapper{
  position:relative;
  width:100%;
  overflow:hidden;
}

.mh-background{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity .28s ease;
}

/* load sync */

.et_pb_media_hovers_wrapper.mh-loaded .mh-background{
  opacity:.9;
}

/* editorial hover */

.et_pb_media_hovers_wrapper:hover .mh-background{
  opacity:1;
}

/* =========================================
   HOVER VIDEO
========================================= */

.mh-hover-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  transition:opacity .28s ease;
}

.et_pb_media_hovers_wrapper.has-hover-video:hover .mh-background{
  opacity:0;
}

.et_pb_media_hovers_wrapper.has-hover-video:hover .mh-hover-video{
  opacity:1;
}

/* =========================================
   MOBILE FIX
========================================= */

@media (max-width:981px){

  .et_pb_media_hovers_wrapper.has-hover-video:hover .mh-background{
    opacity:.9 !important;
  }

  .et_pb_media_hovers_wrapper.has-hover-video:hover .mh-hover-video{
    opacity:0 !important;
  }

}

/* =========================================
   MEDIA FIT
========================================= */

.mh-fit-cover .mh-background,
.mh-fit-cover .mh-hover-video{
  object-fit:cover;
}

.mh-fit-contain .mh-background,
.mh-fit-contain .mh-hover-video{
  object-fit:contain;
}

/* =========================================
   VIDEO POSITION
========================================= */

.mh-pos-center .mh-hover-video{ object-position:center; }
.mh-pos-top .mh-hover-video{ object-position:top; }
.mh-pos-bottom .mh-hover-video{ object-position:bottom; }



/* =========================================
   PLAY ICON
========================================= */

.mh-play-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:40px;
  height:40px;
  pointer-events:none;
  z-index:6;
}

.mfp-bg,
.mfp-wrap {
  position: fixed !important;
  height: 100vh !important;
  top: 0 !important;
}
/* FIX REAL VIEWPORT POPUP */

.mfp-bg,
.mfp-wrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
}

html.mfp-open,
body.mfp-open {
  height: 100% !important;
  overflow: hidden !important;
}
/* =========================================
   POPUP CLICK AREA
========================================= */

.et_pb_media_hovers_wrapper.mh-click-popup .mh-play-trigger{
  position:absolute;
  inset:0;
  z-index:7;
  cursor:pointer;
}
.mh-play-trigger{
  pointer-events:none;
}
.mh-click-popup .mh-real-link {
  display: none;
}
/* =========================================
   CURSOR (ZONAS CLICKABLES)
========================================= */

.et_pb_media_hovers_wrapper[data-destination-url] .mh-image-wrapper,
.et_pb_media_hovers_wrapper[data-destination-url] .mh-title,
.et_pb_media_hovers_wrapper[data-destination-url] .mh-subtitle,
.et_pb_media_hovers_wrapper[data-destination-url] .mh-category{
  cursor:pointer;
}
.et_pb_media_hovers_wrapper.mh-click-popup .mh-title:hover,
.et_pb_media_hovers_wrapper.mh-click-popup .mh-subtitle:hover,
.et_pb_media_hovers_wrapper.mh-click-popup .mh-category:hover{
  color: var(--bl) !important;
  transition: all 0.2s ease-in-out;
}
/* =========================================
   META
========================================= */

.mh-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  color:var(--gr);
  opacity:0;
  transition:opacity .35s ease;
  transition-delay:.12s;
}

.et_pb_media_hovers_wrapper.mh-loaded .mh-meta{
  opacity:1;
}

.mh-meta-left{
  display:flex;
  flex-direction:column;
}

/* overlay */

.mh-media-wrapper .mh-meta{
  position:absolute;
  left:15px;
  right:15px;
  bottom:15px;
  z-index:5;
}

/* editorial */

.et_pb_media_hovers_wrapper > .mh-meta{
  position:relative;
  margin-top:10px;
}

/* =========================================
   TEXTS (SOPORTE PARA <a> Y <h>)
========================================= */

.mh-title,
.mh-subtitle,
.mh-category{
  display:inline-block;
  width:auto;
  max-width:max-content;
  font-family:var(--ffa);
  font-weight:var(--fwl-reg);
  margin:0;
  color:var(--gr);
  text-decoration:none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* hover real tipo link */

.mh-title:hover,
.mh-subtitle:hover,
.mh-category:hover{
  color:var(--bl);
  text-decoration:none;
}

/* =========================================
   META OUT
========================================= */

.et_pb_media_hovers_wrapper.mh-meta-out > .mh-meta{
  flex-wrap:wrap;
  align-items:flex-start;
}

.et_pb_media_hovers_wrapper.mh-meta-out .mh-meta-left{
  flex:1 1 auto;
}

.et_pb_media_hovers_wrapper.mh-meta-out .mh-category{
  margin-left:auto;
  white-space:nowrap;
}

.media-button-insert:empty::after {
  content: "Seleccionar";
}

/* contenedor del popup */
.mfp-content{
  position: relative;
}

/* caption debajo del video */
.mh-popup-meta {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 10px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: var(--gr);
  font-family: var(--ffa);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 10px;
}
.mh-popup-meta .mh-title,
.mh-popup-meta .mh-subtitle,
.mh-popup-meta .mh-category{
  cursor: default !important;
  pointer-events: none; 
  color: var(--gr) !important;
}
.mh-popup-meta .mh-sep{
  cursor: default !important;
  pointer-events: none;
}

/* quitar hover */
.mh-popup-meta .mh-title:hover,
.mh-popup-meta .mh-subtitle:hover,
.mh-popup-meta .mh-category:hover{
  color: var(--gr) !important;
}
.mh-popup-meta .mh-sep{
  margin: 0 8px;
}

/* =========================================
   MOBILE PREVIEW
========================================= */

@media (max-width:981px){

  .mh-mobile-disable .mh-hover-video{
    display:none !important;
  }

  .mh-mobile-preview-active .mh-hover-video{
    opacity:1;
  }

  .mh-mobile-preview-active .mh-background{
    opacity:0;
  }

}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:767px){

  .mh-media-wrapper .mh-meta{
    left:14px;
    right:14px;
    bottom:12px;
  }

  .et_pb_media_hovers_wrapper > .mh-meta{
    margin-top:16px;
  }

  .mh-title{ font-size:15px!important; }
  .mh-subtitle{ font-size:13px!important; }
  .mh-category{ font-size:13px!important; }

}