/* =========================================================
   HERO V23 — CORRECCIÓN EXCLUSIVA MÓVIL
   Alcance: <= 720px.
   PC, laptop y tablet NO reciben reglas de este archivo.

   Motivo:
   El hero móvil usa align-items:flex-end. Reducir solo padding-top
   no desplazaba el bloque visual completo hacia arriba porque el
   contenedor seguía anclándolo al borde inferior.
   Esta corrección mueve el BLOQUE COMPLETO como una sola unidad.
   ========================================================= */

@media (max-width: 720px) {
  /* Subir como una sola unidad mini título, título, descripción,
     botón y beneficios, conservando todas sus distancias internas. */
  .hero-contenido {
    position: relative;
    top: -138px;
  }

  /* Elevar ligeramente el encuadre de la persona sin cambiar la imagen.
     El pequeño 106% crea margen vertical suficiente para reposicionar
     sin deformación ni huecos en el fondo. */
  .hero-foto {
    background-size: auto 106%;
    background-position: 64% top;
  }

  /* La flecha acompaña el bloque y sigue apuntando hacia CHICLAYO. */
  .hero-indicador {
    top: clamp(72px, 20vw, 92px) !important;
    right: 14px !important;
    left: auto !important;
  }
}

/* Ajuste fino para móviles estrechos, sin alterar tamaños ni espaciados. */
@media (max-width: 390px) {
  .hero-contenido {
    top: -145px;
  }

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

/* Móvil horizontal: subir el bloque sin tocar tablet. */
@media (max-width: 720px) and (orientation: landscape) {
  .hero-contenido {
    top: -118px;
  }
}