/* Portada móvil: el mensaje de venta aparece dentro del primer vistazo. */
@media (max-width: 640px) {
  .hero {
    display: flex;
    min-height: 720px;
    height: 100svh;
    overflow: hidden;
    background: #070b12;
  }

  .hero-image {
    height: 100%;
    /* En móvil privilegiamos tanques, tubería y acero; no el muro de ladrillo. */
    object-position: 72% 64%;
    transform: scale(1.24);
    transform-origin: 72% 64%;
  }

  .hero-shade {
    height: 100%;
    background: linear-gradient(180deg, rgba(3, 6, 11, .22) 0%, rgba(3, 6, 11, .04) 34%, rgba(3, 6, 11, .88) 59%, #070b12 100%);
  }

  .hero-content {
    width: 100%;
    margin: 0;
    /* El texto debe entrar en el primer vistazo, no quedar pegado al borde inferior. */
    /* Subimos el bloque completo: conserva el aire inferior, pero deja el titular
       en el encuadre de referencia desde el primer vistazo. */
    padding: 0 20px 164px;
    align-self: flex-end;
  }

  .hero-content .eyebrow { margin-bottom: 12px; }
  .hero h1 { max-width: 350px; font-size: clamp(2.7rem, 11.4vw, 3.3rem); }
  .hero-copy { margin: 14px 0 20px; }
  .trust-strip { display: none; }
}