/* BLOCO 12F — SitePronto360: ajuste mobile global dos banners de venda */
/* Regras:
   - Só afeta mobile.
   - Não mexe em desktop.
   - Usado em páginas de venda/explicação.
   - Não deve ser usado em Pix/checkout/pagamento.
*/

@media(max-width:768px){

  :root{
    --sp360-red:#e10000;
    --sp360-red2:#ff3030;
    --sp360-glow-blue:rgba(0,145,255,.18);
    --sp360-glow-red:rgba(255,0,40,.20);
    --sp360-glow-green:rgba(0,255,130,.10);
  }

  html, body{
    background-color:#000 !important;
  }

  /*
    Fundo robótico leve:
    aparece nas áreas pretas para não ficar um vazio morto.
  */
  body{
    background-image:
      radial-gradient(circle at 18% 18%, var(--sp360-glow-red), transparent 28%),
      radial-gradient(circle at 86% 32%, var(--sp360-glow-blue), transparent 30%),
      radial-gradient(circle at 50% 88%, var(--sp360-glow-green), transparent 26%),
      linear-gradient(180deg, #020202 0%, #000 55%, #050505 100%) !important;
    background-size:180% 180%, 170% 170%, 190% 190%, 100% 100% !important;
    animation:sp360RobotGlowMobile 11s ease-in-out infinite alternate !important;
  }

  @keyframes sp360RobotGlowMobile{
    0%{
      background-position:0% 12%, 100% 22%, 50% 100%, center;
    }
    50%{
      background-position:18% 4%, 82% 38%, 42% 76%, center;
    }
    100%{
      background-position:6% 24%, 94% 14%, 58% 88%, center;
    }
  }

  /*
    Clarear banners/heros no mobile.
  */
  .hero,
  .page-hero,
  .banner,
  .top-banner,
  .site-hero,
  .hero-section,
  .hero-banner,
  .page-banner,
  .cover,
  .capa,
  .topo-banner,
  .banner-topo,
  .intro-banner{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
    background-position:center center !important;
    background-size:cover !important;
  }

  .hero::before,
  .hero::after,
  .page-hero::before,
  .page-hero::after,
  .banner::before,
  .banner::after,
  .top-banner::before,
  .top-banner::after,
  .site-hero::before,
  .site-hero::after,
  .hero-section::before,
  .hero-section::after,
  .hero-banner::before,
  .hero-banner::after,
  .page-banner::before,
  .page-banner::after,
  .cover::before,
  .cover::after,
  .capa::before,
  .capa::after,
  .topo-banner::before,
  .topo-banner::after,
  .banner-topo::before,
  .banner-topo::after,
  .intro-banner::before,
  .intro-banner::after{
    opacity:.16 !important;
    background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.20)) !important;
  }

  .hero img,
  .page-hero img,
  .banner img,
  .top-banner img,
  .site-hero img,
  .hero-section img,
  .hero-banner img,
  .page-banner img,
  .cover img,
  .capa img,
  .topo-banner img,
  .banner-topo img,
  .intro-banner img,
  img.banner,
  img.hero,
  img.capa,
  img.cover{
    filter:brightness(1.24) contrast(1.06) saturate(1.06) !important;
    opacity:1 !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  /*
    Remove o pretão entre banner e texto.
    Sobe a primeira seção textual.
  */
  .hero + section,
  .page-hero + section,
  .banner + section,
  .top-banner + section,
  .site-hero + section,
  .hero-section + section,
  .hero-banner + section,
  .page-banner + section,
  .cover + section,
  .capa + section,
  .topo-banner + section,
  .banner-topo + section,
  .intro-banner + section{
    margin-top:0 !important;
    padding-top:24px !important;
  }

  main{
    padding-top:0 !important;
  }

  main > section:first-of-type,
  main > section:nth-of-type(2){
    margin-top:0 !important;
  }

  main > section:first-of-type:not(.sp360-avatar-explicativo),
  main > section:nth-of-type(2):not(.sp360-avatar-explicativo){
    padding-top:24px !important;
  }

  /*
    Se houver bloco inicial com muito espaço vertical.
  */
  .intro,
  .section-intro,
  .conteudo,
  .content,
  .servico-intro,
  .web-section,
  .about,
  .descricao,
  .descricao-servico,
  .service-intro{
    margin-top:0 !important;
  }

  .intro:first-of-type,
  .section-intro:first-of-type,
  .conteudo:first-of-type,
  .content:first-of-type,
  .servico-intro:first-of-type,
  .web-section:first-of-type,
  .about:first-of-type,
  .descricao:first-of-type,
  .descricao-servico:first-of-type,
  .service-intro:first-of-type{
    padding-top:24px !important;
  }

  /*
    Títulos sobem junto, sem aquele respiro exagerado.
  */
  h1,
  h2,
  .eyebrow,
  .kicker,
  .tagline,
  .subtitulo,
  .section-label,
  .label,
  .badge-title{
    margin-top:0 !important;
  }

  /*
    Efeito sutil nos blocos escuros de texto/cards:
    dá vida sem pesar.
  */
  .card,
  .service,
  .box,
  .painel,
  .panel,
  .bloco,
  .feature,
  .sp360-avatar-explicativo{
    position:relative;
    overflow:hidden;
  }

  .card::after,
  .service::after,
  .box::after,
  .painel::after,
  .panel::after,
  .bloco::after,
  .feature::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-90px;
    top:-90px;
    pointer-events:none;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,0,35,.16), transparent 68%);
    animation:sp360OrbPulse 7s ease-in-out infinite alternate;
  }

  @keyframes sp360OrbPulse{
    from{
      transform:translate3d(0,0,0) scale(.9);
      opacity:.35;
    }
    to{
      transform:translate3d(-28px,30px,0) scale(1.18);
      opacity:.75;
    }
  }
}