#home {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 100;
      opacity: 1;
      transform: translateY(0);
      transition:
        transform 1.1s cubic-bezier(0.76, 0, 0.24, 1),
        opacity 0.8s ease;
    }
    /* Estado final: sai deslizando para cima */
    #home.hero-out {
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
    }

    /* Barra de progresso no rodapé do Hero */
    .hero-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background: rgba(255, 255, 255, 0.35);
      width: 0%;
    }

    /* ─── PRÓXIMA SECTION ───────────────────────────────────── */

    /*
      INSTRUÇÃO: Cole o seu HTML da próxima seção dentro de #next-section.
      Ela começa invisível e sobe suavemente quando o Hero sai.
    */
    #nosso-trabalho {
      padding-top: 100px;
      min-height: 100vh;
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity 0.9s ease 0.4s,
        transform 0.9s ease 0.4s;
    }

    #nosso-trabalho.section-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ─── ANIMAÇÕES ─────────────────────────────────────────── */
    @keyframes fadeUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 667px) {
    #nosso-trabalho {
     }
  }