/* TROPHUB81 V49 · suavizado del fondo del hero + optimización visual y de carga */

/* En desktop, el efecto borroso sí es intencional: sirve para extender la foto
   sin recortar la unidad. En V49 se vuelve más suave y solo se percibe como
   una integración lateral con difuminado, no como una capa pesada. */
@media (min-width: 761px){
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage {
    background:#0b0d0f !important;
  }
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual img.th32-hero-ambient,
  body.th30-home.th31-home.th33-home .mi-v16-hero-slide.is-active .mi-v16-hero-visual img.th32-hero-ambient {
    filter: blur(15px) brightness(.56) saturate(.92) !important;
    transform: scale(1.09) !important;
    opacity:.92 !important;
  }
  /* Difuminado lateral encima de la foto principal para mezclarla con el fondo. */
  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 {
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:clamp(40px, 7vw, 110px);
    z-index:2;
    pointer-events:none;
  }
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage::before {
    left:0;
    background:linear-gradient(90deg, rgba(11,13,15,.88) 0%, rgba(11,13,15,.45) 34%, rgba(11,13,15,0) 100%);
  }
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual.th30-hero-stage::after {
    right:0;
    background:linear-gradient(270deg, rgba(11,13,15,.92) 0%, rgba(11,13,15,.50) 34%, rgba(11,13,15,0) 100%);
  }
  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 {
    z-index:1 !important;
    filter: brightness(1.02) contrast(1.01) saturate(1.02) !important;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.94) 10%, #000 18%, #000 82%, rgba(0,0,0,.94) 90%, rgba(0,0,0,.18) 100%) !important;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.94) 10%, #000 18%, #000 82%, rgba(0,0,0,.94) 90%, rgba(0,0,0,.18) 100%) !important;
  }
}

/* Optimización perceptible: el navegador puede posponer el render de secciones
   largas bajo el hero hasta que estén cerca de entrar al viewport. */
@supports (content-visibility: auto){
  body.th31-home :is(.mi-section, .mi-stock, .mi-categories, .th48-deliveries, .mi-advice, .mi-search-section, .mi-footer){
    content-visibility:auto;
    contain-intrinsic-size: 900px;
  }
  body.th31-home .mi-v16-hero,
  body.th31-home .mi-header {content-visibility:visible;}
}

/* Reduce pequeños repaints del carrusel y ayuda al móvil. */
body.th30-home.th31-home.th33-home .mi-v15-hero-slide,
body.th30-home.th31-home.th33-home .mi-v16-hero-visual,
body.th30-home.th31-home.th33-home .mi-v16-hero-overlay {
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* En móvil evitamos efectos extra y priorizamos carga/claridad. */
@media (max-width:760px){
  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 {display:none;}
  body.th30-home.th31-home.th33-home .mi-v16-hero-visual img.th32-hero-ambient,
  body.th30-home.th31-home.th33-home .mi-v16-hero-slide.is-active .mi-v16-hero-visual img.th32-hero-ambient {
    filter: blur(10px) brightness(.58) saturate(.9) !important;
    transform: scale(1.04) !important;
  }
}