/* =========================================================
   HERO V24 — AJUSTE EXCLUSIVO MÓVIL
   Solo <= 720px.
   PC, laptop y tablet permanecen sin cambios.

   Corrección:
   - El contenido deja de estar anclado al borde inferior.
   - Todo el bloque se coloca más arriba como una sola unidad.
   - El encuadre de la imagen se desplaza hacia arriba de forma coordinada.
   ========================================================= */

@media (max-width: 720px) {
  .hero-contenedor {
    align-items: flex-start;
  }

  .hero-contenido {
    position: relative;
    top: auto;
    padding-top: 108px;
    padding-bottom: 58px;
  }

  .hero-foto {
    background-size: auto 110%;
    background-position: 64% 100%;
  }

  .hero-indicador {
    top: 58px !important;
    right: 14px !important;
    left: auto !important;
  }
}

@media (max-width: 430px) {
  .hero-contenido {
    padding-top: 100px;
  }

  .hero-indicador {
    top: 54px !important;
  }
}

@media (max-width: 390px) {
  .hero-contenido {
    padding-top: 94px;
  }

  .hero-indicador {
    top: 50px !important;
    right: 12px !important;
  }
}

@media (max-width: 360px) {
  .hero-contenido {
    padding-top: 88px;
  }
}

@media (max-width: 720px) and (orientation: landscape) {
  .hero-contenido {
    padding-top: 62px;
    padding-bottom: 44px;
  }

  .hero-indicador {
    top: 28px !important;
  }
}