/* BLOCO 12H — Efeito robótico leve nos cards mobile SitePronto360 */
/* Só afeta mobile. Desktop permanece igual. */

@media(max-width:768px){

  /*
    Cards principais do menu/home.
    O efeito preenche áreas pretas vazias sem pesar a página.
  */
  .service,
  .card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    background:
      radial-gradient(circle at 82% 18%, rgba(255,0,40,.22), transparent 30%),
      radial-gradient(circle at 12% 86%, rgba(255,0,0,.11), transparent 28%),
      linear-gradient(135deg, rgba(18,18,18,.98), rgba(35,0,8,.94) 48%, rgba(8,8,8,.98)) !important;
    box-shadow:
      0 16px 38px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  /*
    Textura digital sutil.
  */
  .service::before,
  .card::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:-2 !important;
    pointer-events:none !important;
    opacity:.34 !important;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255,255,255,.026) 1px, transparent 1px),
      radial-gradient(circle at 70% 18%, rgba(255,0,40,.18), transparent 34%) !important;
    background-size:34px 34px, 34px 34px, 100% 100% !important;
    animation:sp360CardGridMove 10s linear infinite !important;
  }

  /*
    Mancha/brilho animado para preencher os vazios.
  */
  .service::after,
  .card::after{
    content:"" !important;
    position:absolute !important;
    z-index:-1 !important;
    pointer-events:none !important;
    width:220px !important;
    height:220px !important;
    right:-90px !important;
    bottom:-95px !important;
    border-radius:50% !important;
    background:
      radial-gradient(circle, rgba(255,0,40,.28), rgba(255,0,40,.10) 38%, transparent 70%) !important;
    filter:blur(2px) !important;
    opacity:.72 !important;
    animation:sp360OrbFloat 7.5s ease-in-out infinite alternate !important;
  }

  /*
    Mantém conteúdo acima do efeito.
  */
  .service > *,
  .card > *{
    position:relative !important;
    z-index:2 !important;
  }

  /*
    Realce discreto nos cards ao tocar/rolar.
  */
  .service,
  .card{
    border-color:rgba(255,40,40,.20) !important;
  }

  .service .ico,
  .card-icon,
  .card .ico{
    box-shadow:
      0 0 0 1px rgba(255,0,40,.18),
      0 0 22px rgba(255,0,40,.14) !important;
  }

  /*
    Linha fina futurista dentro do card, sem criar espaço.
  */
  .service .price,
  .card .price,
  .service hr,
  .card hr{
    border-color:rgba(255,255,255,.08) !important;
  }

  /*
    Botão vermelho mais vivo.
  */
  .service .go,
  .card .go,
  .service a.go,
  .card a.go{
    box-shadow:0 0 22px rgba(255,0,0,.24) !important;
  }

  @keyframes sp360CardGridMove{
    from{
      background-position:0 0, 0 0, center;
    }
    to{
      background-position:34px 34px, -34px 34px, center;
    }
  }

  @keyframes sp360OrbFloat{
    0%{
      transform:translate3d(0,0,0) scale(.92);
      opacity:.42;
    }
    50%{
      transform:translate3d(-26px,-18px,0) scale(1.08);
      opacity:.68;
    }
    100%{
      transform:translate3d(-44px,-34px,0) scale(1.18);
      opacity:.82;
    }
  }

  /*
    Respeita usuários que desativam animações no celular.
  */
  @media(prefers-reduced-motion:reduce){
    .service::before,
    .card::before,
    .service::after,
    .card::after{
      animation:none !important;
    }
  }
}