/* Hero con video de fondo (agregar al final de styles.css) */
.hero-video{display:none}
.hero.is-video .hero-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none;background:#02070d}
.hero.is-video .hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(2,7,13,.99) 0,rgba(2,7,13,.94) 28%,rgba(2,7,13,.22) 57%,rgba(2,7,13,.34) 100%)}
@media(max-width:760px){
  .hero.is-video .hero-video{object-position:center top}
  .hero.is-video .hero-overlay{background:linear-gradient(180deg,rgba(2,7,13,.99) 0,rgba(2,7,13,.96) 55%,rgba(2,7,13,.42) 72%,rgba(2,7,13,.12) 100%)}
}
@media(prefers-reduced-motion:reduce){.hero.is-video .hero-video{display:none}.hero.is-video .hero-overlay{display:none}}


/* Keep mobile catalog controls and brand text inside their grid tracks. */
@media(max-width:760px){
  .search-band>*{min-width:0;width:100%}
  .brand-panel>*{min-width:0}
  .brand-panel h2,.brand-panel p{overflow-wrap:anywhere}
}

/* QV2 - Hero video movil: el overlay de la imagen estatica (99% opaco hasta el 55%)
   tapaba el video. Se aligera y se ajusta la altura. Agregar AL FINAL de hero-video.css */
@media (max-width: 760px) {
  .hero.is-video { min-height: min(820px, 100svh); }
  .hero.is-video .hero-video { object-position: center top; }
  .hero.is-video .hero-overlay {
    background: linear-gradient(180deg,
      rgba(2,7,13,.82) 0%, rgba(2,7,13,.72) 38%,
      rgba(2,7,13,.30) 62%, rgba(2,7,13,.08) 82%, rgba(2,7,13,.55) 100%);
  }
}