/* Hero mobile rules (cherry-pick de mobile-fixes.css de produccion) */

@media screen and (max-width: 991px) {
.hero-images-grid {
    grid-column-gap: 10px !important;
    grid-row-gap: 10px !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: 600px !important;
    display: flex !important;
  }

.hero-images-grid video,
  .hero-images-grid .image-1,
  .hero-images-grid .image-2,
  .hero-images-grid .image-3,
  .hero-images-grid .image-4,
  .hero-images-grid .image-5 {
    width: 185px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }

.mobile-mockup-inner {
    width: 200px !important;
  }

.hero-title-bottom-wrapper {
    width: 25vw !important;
    max-width: 25vw !important;
  }

.hero-title-bottom-1,
  .hero-title-bottom-2,
  .hero-title-bottom-3 {
    font-size: 7.5vw !important;
  }

.heading-wrapper {
    grid-column-gap: 10px !important;
    grid-row-gap: 10px !important;
    margin-bottom: 40px !important;
  }

.absolute-heading-wrapper {
    grid-column-gap: 10px !important;
    grid-row-gap: 10px !important;
    margin-bottom: 40px !important;
  }

.mobile-mockup-footer {
    width: 200px !important;
    overflow: visible !important;
  }
}

@media screen and (max-width: 767px) {
.home-h1 {
    white-space: normal !important;
    margin-bottom: 0 !important;
    font-size: 9vw !important;
  }

.hero-title-bottom-wrapper {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 40vw !important;
    max-width: 40vw !important;
    min-height: 12vw !important;
    margin-left: 15px !important;
  }

.hero-title-bottom-1,
  .hero-title-bottom-2,
  .hero-title-bottom-3 {
    text-align: left !important;
    margin-left: 0 !important;
    font-size: 12vw !important;
  }

.heading-wrapper,
  .absolute-heading-wrapper {
    grid-column-gap: 0px !important;
    grid-row-gap: 0px !important;
    flex-flow: wrap !important;
  }

.absolute-heading-wrapper-footer {
    grid-column-gap: 0px !important;
    grid-row-gap: 0px !important;
    flex-flow: wrap !important;
    top: -75px !important;
  }

.horizontal-heading-wrapper {
    flex-flow: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }
}

@media screen and (max-width: 479px) {
.home-h1 {
    font-size: 10vw !important;
  }

.hero-title-bottom-wrapper {
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 20vw !important;
    margin-left: 0 !important;
  }

.hero-title-bottom-1,
  .hero-title-bottom-2,
  .hero-title-bottom-3 {
    font-size: 20vw !important;
  }

.absolute-heading-wrapper-footer {
    display: inline-flex !important;
    top: -60px !important;
  }

.feature-mockup-inner,
  .mobile-mockup-footer {
    overflow: hidden !important;
    border-radius: 28px !important;
  }
}

@media screen and (max-width: 991px) {
.heading-wrapper .home-h1 {
    font-size: 7vw !important;
    gap: 0.2ch !important;
  }

.rotator-word.home-h1,
  .rotator-measure {
    font-size: 7vw !important;
  }
}

@media screen and (max-width: 767px) {
.heading-wrapper .home-h1 {
    font-size: 9vw !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

.rotator-word.home-h1,
  .rotator-measure {
    font-size: 9vw !important;
  }

.heading-wrapper {
    white-space: normal !important;
  }

.hero-rotator-mask {
    max-width: 95vw !important;
  }
}

@media screen and (max-width: 479px) {
.heading-wrapper .home-h1 {
    font-size: 10vw !important;
  }

.rotator-word.home-h1,
  .rotator-measure {
    font-size: 10vw !important;
  }

.hero-rotator-mask {
    max-width: 90vw !important;
  }
}

/* === Fixes auditoria responsive 2026-07-31 === */

/* V1: en tablet el H1 va en UNA linea con fuente reducida (el wrap choca
   con la mascara del rotator); la palabra mas larga entra a 5vw */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .heading-wrapper .home-h1 { font-size: 5vw !important; white-space: nowrap !important; }
}

/* B1: en tablet (768-991) el catch de IX2 no cierra con el layout mobile —
   se oculta el mockup y el hero queda como el mobile verificado (sin catch) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* Congelar IX2 en tablet: el catch nunca cierra con el layout mobile en esta
     banda. transform:none !important pisa los estilos inline de IX2 -> hero
     estatico (grilla + telefono quietos), como reduced-motion. */
  .hero-section .hero-images-grid,
  .hero-section .hero-images-grid video,
  .hero-section .mobile-mockup-inner { transform: none !important; }
  /* con IX2 congelado el telefono queda vacio (su contenido era el catch) */
  .hero-section .mobile-mockup-inner { display: none !important; }
}

/* V2: la segunda frase del hero descansa por ENCIMA del telefono en phones */
@media screen and (max-width: 767px) {
  .hero-section .absolute-heading-wrapper { margin-top: 17vh !important; }
  .hero-section .absolute-heading-wrapper .home-h1 {
    font-size: 6.8vw !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* P1: slab fantasma bajo el mockup al terminar el catch */
.hero-section .mobile-bg { display: none !important; }