/* ── Fundo do topo (todas as larguras): cápsulas laranja atrás do título.
   Véu escuro no centro pra o texto branco ler em cima do laranja, e
   fade pro preto embaixo pra emendar no mosaico. ── */
.pg-produtor .hero{ position:relative; isolation:isolate; }
.pg-produtor .hero > .container{ position:relative; }
.pg-fundo{
  position:absolute; left:0; right:0; top:0; height:min(100vh, 920px); z-index:-1; pointer-events:none;
  /* largura da tela inteira (não cover): as 7 cápsulas aparecem inteiras e
     centradas; a imagem tem fundo preto, então a sobra em cima/embaixo
     se mistura com a página sem marca */
  background:url("../../uploads/fundos/produtor-capsulas.jpg") center 32% / 100% auto no-repeat;
  opacity:.55;
  animation: pgFundoEntra 1.6s cubic-bezier(.2,.7,.3,1) both;
}
.pg-fundo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 46% at 50% 40%, rgba(10,10,10,.80) 0%, rgba(10,10,10,.45) 60%, rgba(10,10,10,.15) 100%),
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 62%, #0A0A0A 100%);
}
@keyframes pgFundoEntra{ from{ opacity:0; transform:scale(1.08); } to{ opacity:.55; transform:none; } }
@media (prefers-reduced-motion: reduce){ .pg-fundo{ animation:none; } }
@media (max-width: 700px){
  /* tela em pé: as cápsulas ficam no meio do recorte, atrás dos botões */
  .pg-fundo{ height:min(100svh, 760px); background-position: 50% 50%; background-size:cover; }
}

/* ============================================================
   /orcamento/produtor no celular — menos coisa, na ordem certa.
   O produtor precisa entender três coisas: o que leva, quanto custa
   e como fecha. Então o preço sobe pra logo depois do topo, cada bloco
   perde o texto de apoio e os gráficos viram números.
   ============================================================ */
.so-desk{}
@media (max-width: 700px){
  .pg-produtor .so-desk{ display:none; }

  /* ordem: topo → preço → estratégia → resultados → entregáveis → fechar */
  .pg-produtor main{ display:flex; flex-direction:column; }
  .pg-produtor #pacote{ order:1; }
  .pg-produtor #clientes{ order:2; }
  .pg-produtor #resultados{ order:3; }
  .pg-produtor #servicos{ order:4; }
  .pg-produtor #contato{ order:5; }

  /* ── topo ── */
  .pg-produtor .hero{ padding-top:100px !important; padding-bottom:28px; }
  .pg-produtor .hero .lead{ font-size:15.5px !important; margin-top:16px; }
  .pg-produtor .hero-cta{ flex-direction:column; align-items:stretch; gap:10px; width:100%; }
  .pg-produtor .hero-cta .btn{ width:100%; justify-content:center; }
  /* mosaico: duas colunas e mais baixo (as outras quatro nem carregam vídeo) */
  /* a altura é do .mosaic (o site.css o fixa em 600px no celular); o wrap
     só recorta — sem overflow:hidden as fotos vazavam por cima das logos */
  .pg-produtor .mosaic-wrap{ margin-top:28px; overflow:hidden; }
  .pg-produtor .mosaic{ grid-template-columns:1fr 1fr !important; gap:8px; height:380px !important; }
  .pg-produtor .m-col:nth-child(n+3){ display:none !important; }
  /* logos dos clientes numa linha só, pequenas */
  .pg-produtor .clients{ margin-top:22px; padding:0 22px !important; }
  .pg-produtor .clients-eyebrow{ margin-bottom:14px !important; }
  .pg-produtor .clients-grid{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:14px 22px; }
  .pg-produtor .clients-grid{ height:auto !important; min-height:0 !important; padding:0 !important; gap:16px 24px !important; align-items:center; }
  .pg-produtor .client-logo{ padding:0 !important; min-height:0 !important; height:auto !important; width:auto !important;
    flex:0 0 auto !important; border:0 !important; background:none !important; box-shadow:none !important; }
  .pg-produtor .client-logo img{ max-height:30px !important; height:auto !important; width:auto !important; max-width:110px !important; }

  /* ── preço ── */
  .pg-produtor #pacote{ padding-top:36px; padding-bottom:36px; }
  .pg-produtor .pc-desc, .pg-produtor .pc-note, .pg-produtor .pc-pitch{ display:none; }
  .pg-produtor .pc-features em{ display:none; }     /* só o nome de cada entrega */
  .pg-produtor .pc-features li{ padding-top:8px; padding-bottom:8px; }

  /* ── estratégia: linha do tempo de quatro passos ── */
  .pg-produtor .scroll-cases{ height:auto !important; padding:40px 0 20px; }
  .pg-produtor .sc-sticky{ position:static !important; height:auto !important; min-height:0 !important;
    display:block !important; padding:0 22px; }
  .pg-produtor .sc-right{ display:none !important; }
  .pg-produtor .sc-h{ font-size:clamp(26px, 7.6vw, 34px); margin-bottom:20px; }
  .pg-produtor .sc-list{ counter-reset:passo; display:grid; gap:0; }
  .pg-produtor .sc-item{ counter-increment:passo; position:relative; padding:0 0 20px 56px !important;
    opacity:1 !important; border:0 !important; background:none !important; }
  .pg-produtor .sc-item::before{ content:"0" counter(passo); position:absolute; left:0; top:0;
    width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
    background:#FF6A1A; color:#0A0A0A; font-size:13px; font-weight:700;
    box-shadow:0 6px 18px rgba(255,106,26,.35); }
  .pg-produtor .sc-item:not(:last-child)::after{ content:""; position:absolute; left:19px; top:40px; bottom:0;
    width:2px; background:linear-gradient(#FF6A1A, rgba(255,106,26,.12)); }
  .pg-produtor .sc-title{ font-size:17px; font-weight:600; padding-top:8px; }
  .pg-produtor .sc-desc{ display:none !important; }
  .pg-produtor .sc-curto{ display:block; font-size:14px; color:#A8A8A8; margin-top:4px; line-height:1.45; }

  /* ── resultados: só os quatro números, 2×2 ── */
  .pg-produtor #resultados{ padding-top:40px; padding-bottom:28px; }
  .pg-produtor .results-head p{ display:none; }
  .pg-produtor .results-grid{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px; }
  /* cada card com um degradê próprio, no tom da marca: a luz vem de um
     canto diferente em cada um, então os quatro não ficam iguais */
  .pg-produtor .r-card{ padding:16px 14px !important; min-height:0 !important;
    border-color:rgba(255,255,255,.12) !important; }
  .pg-produtor .r-card:nth-child(1){ background:linear-gradient(150deg, rgba(255,106,26,.30) 0%, rgba(255,106,26,.06) 55%, rgba(14,14,14,.9) 100%) !important; }
  .pg-produtor .r-card:nth-child(2){ background:linear-gradient(210deg, rgba(255,150,60,.26) 0%, rgba(255,106,26,.05) 55%, rgba(14,14,14,.9) 100%) !important; }
  .pg-produtor .r-card:nth-child(3){ background:linear-gradient(330deg, rgba(255,90,40,.28) 0%, rgba(255,106,26,.05) 55%, rgba(14,14,14,.9) 100%) !important; }
  .pg-produtor .r-card:nth-child(4){ background:linear-gradient(30deg, rgba(255,170,80,.24) 0%, rgba(255,106,26,.05) 55%, rgba(14,14,14,.9) 100%) !important; }
  .pg-produtor .r-card > *:not(.r-tag):not(.r-bigmetric):not(.r-bigmetric-label){ display:none !important; }
  .pg-produtor .r-tag{ font-size:10px; margin-bottom:10px; }
  .pg-produtor .r-bigmetric{ margin:0 !important; }
  .pg-produtor .r-bigmetric .num{ font-size:34px !important; }
  .pg-produtor .r-bigmetric .unit{ font-size:18px !important; }
  .pg-produtor .r-bigmetric-label{ font-size:12px; line-height:1.4; margin-top:6px; }

  /* ── entregáveis: 2 colunas, só o nome ── */
  .pg-produtor #servicos{ padding-top:36px; padding-bottom:28px; }
  .pg-produtor .grid-services{ grid-template-columns:1fr 1fr !important; gap:8px; }
  .pg-produtor .service{ padding:14px 12px !important; min-height:0 !important; height:auto !important;
    aspect-ratio:auto !important; display:flex !important; flex-direction:row !important;
    align-items:center !important; justify-content:flex-start !important; gap:10px !important; }
  .pg-produtor .service .icon{ flex:0 0 auto; margin:0 !important; }
  .pg-produtor .service .name{ font-size:14px; }
  .pg-produtor .service .name small{ display:none; }

  /* ── fechar ── */
  .pg-produtor .cta{ padding:56px 0 64px !important; }
  .pg-produtor .cta h2{ font-size:clamp(28px, 8vw, 36px) !important; }
  .pg-produtor .cta p{ font-size:15px; }
  .pg-produtor .cta .hero-cta{ margin-top:22px !important; }
}
.sc-curto{ display:none; }
@media (max-width: 700px){ .pg-produtor .sc-curto{ display:block; } }