/* =========================
   HERO — MOBILE (SEM IMAGEM)
========================= */

@media (max-width: 768px) {

  .hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 64px 0;
  }

  /* Remove interações pesadas */
  #hero-canvas,
  #hero-bg-canvas {
    display: none;
  }

  /* Mantém exatamente o background atual */
  .hero-background {
    opacity: 0.85;
    filter: blur(80px);
  }

  /* =========================
     CONTAINER
  ========================= */

  .hero-container {
    position: relative;
    grid-template-columns: 1fr;
    padding: 0 20px;
    z-index: 2;
  }

  /* =========================
     REMOVE IMAGEM DO HERO (MOBILE)
  ========================= */

  .hero-visual {
    display: none;
  }

  /* =========================
     TEXTO
  ========================= */

  .hero-left {
    position: relative;
    z-index: 3;
    max-width: 100%;
  }

  .hero-tag {
    font-size: 0.68rem;
    margin-bottom: 12px;
  }

  .hero h1 {
    font-size: 2.3rem;
    line-height: 1.05;
  }

  .hero h2 {
    font-size: 1.05rem;
    margin-top: 12px;
    max-width: 95%;
    line-height: 1.4;
  }

  .hero p {
    font-size: 0.92rem;
    margin-top: 18px;
    max-width: 95%;
  }

  /* =========================
     AÇÕES
  ========================= */

  .hero-actions {
    margin-top: 26px;
    gap: 12px;
    display: flex;
    flex-direction: column;
  }

  .hero-actions a {
    width: 100%;
    justify-content: center;
  }

  /* =========================
     LINKS
  ========================= */

  .hero-links {
    margin-top: 18px;
    gap: 10px;
  }

}