/* TROPHUB81 V50 · difuminado lateral fino para perder la línea vertical del hero */

@media (min-width: 761px){
  /* Suaviza todavía más las orillas reales de la foto principal para que desaparezca
     la línea de corte entre la imagen contenida y el fondo ambiental. */
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual img.th30-hero-original,
  body.th30-home.th31-home.th33-home .mi-v16-hero-slide.is-active .mi-v16-hero-visual img.th30-hero-original {
    -webkit-mask-image:
      linear-gradient(90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.42) 2.5%,
        rgba(0,0,0,.78) 5%,
        rgba(0,0,0,.96) 8%,
        #000 12%,
        #000 88%,
        rgba(0,0,0,.96) 92%,
        rgba(0,0,0,.78) 95%,
        rgba(0,0,0,.42) 97.5%,
        rgba(0,0,0,0) 100%) !important;
    mask-image:
      linear-gradient(90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.42) 2.5%,
        rgba(0,0,0,.78) 5%,
        rgba(0,0,0,.96) 8%,
        #000 12%,
        #000 88%,
        rgba(0,0,0,.96) 92%,
        rgba(0,0,0,.78) 95%,
        rgba(0,0,0,.42) 97.5%,
        rgba(0,0,0,0) 100%) !important;
  }

  /* Velos laterales muy suaves, uno encima de la foto principal y otro encima del fondo.
     Con eso se pierde el borde duro sin que se note borroso excesivo. */
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage::before,
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage::after {
    width: clamp(72px, 10vw, 150px) !important;
    z-index: 3 !important;
  }
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage::before {
    left: 0;
    background:
      linear-gradient(90deg,
        rgba(8,10,12,.94) 0%,
        rgba(8,10,12,.72) 18%,
        rgba(8,10,12,.34) 52%,
        rgba(8,10,12,0) 100%) !important;
  }
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage::after {
    right: 0;
    background:
      linear-gradient(270deg,
        rgba(8,10,12,.96) 0%,
        rgba(8,10,12,.74) 18%,
        rgba(8,10,12,.36) 52%,
        rgba(8,10,12,0) 100%) !important;
  }

  /* Un pequeño feather extra exactamente sobre el borde óptico de la foto. */
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage .th50-edge-feather {
    position:absolute;
    top:0; bottom:0;
    width: clamp(42px, 6vw, 90px);
    pointer-events:none;
    z-index:2;
    display:block;
  }
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage .th50-edge-feather.is-left {
    left: max(0px, calc(50% - 41vw));
    background: linear-gradient(90deg, rgba(12,14,16,.60) 0%, rgba(12,14,16,.22) 55%, rgba(12,14,16,0) 100%);
  }
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage .th50-edge-feather.is-right {
    right: max(0px, calc(50% - 41vw));
    background: linear-gradient(270deg, rgba(12,14,16,.62) 0%, rgba(12,14,16,.22) 55%, rgba(12,14,16,0) 100%);
  }
}

@media (max-width:760px){
  /* En móvil dejamos las orillas más limpias y sin overlay adicional. */
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage .th50-edge-feather{display:none !important;}
}
