/* =========================================================================
   Emérito · peças próprias das páginas de serviço do grupo 2 (23/09/2026)
   /servicos/anuncio, /site, /atendimento-whatsapp, /agenda-e-lembretes
   Só o que a biblioteca comum (componentes.css) não tem.
   ========================================================================= */

/* ---------- fluxo em linha: nó → nó → nó (o caminho do clique) ---------- */
.g2-fluxo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative}
.g2-fluxo li{
  position:relative;border:1px solid var(--linha);border-radius:20px;padding:22px 20px 24px;
  background:linear-gradient(180deg,#0b0b0c,#040404);min-width:0;
}
.g2-fluxo li::after{
  content:'';position:absolute;top:50%;right:-15px;width:16px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(240,86,31,.8));
}
.g2-fluxo li:last-child::after{display:none}
.g2-fluxo .g2-no-icone{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;color:#fff;
  border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#151517,#080808);
}
.g2-fluxo li.g2-volta{border-color:rgba(240,86,31,.45);background:linear-gradient(180deg,rgba(240,86,31,.1),rgba(240,86,31,.02))}
.g2-fluxo li.g2-volta .g2-no-icone{color:var(--laranja-escuro);border-color:rgba(240,86,31,.5);box-shadow:0 0 22px -6px rgba(240,86,31,.7)}
.g2-fluxo h3{font-size:1.05rem;margin-bottom:6px}
.g2-fluxo p{color:var(--tinta-2);font-size:.92rem;line-height:1.55}
.g2-retorno{
  display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 18px;border-radius:14px;
  border:1px dashed rgba(240,86,31,.4);color:var(--tinta-2);font-size:.92rem;line-height:1.5;
}
.g2-retorno svg{flex:none;color:var(--laranja-escuro)}
@media(max-width:900px){
  .g2-fluxo{grid-template-columns:minmax(0,1fr)}
  .g2-fluxo li::after{top:auto;bottom:-15px;right:auto;left:39px;width:1px;height:16px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(240,86,31,.8))}
}

/* ---------- painel de anúncio por especialidade (dentro das abas verticais) ---------- */
.g2-peca{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:start}
.g2-peca .mock-anuncio-post{max-width:300px}
.g2-peca .post-arte strong{font-size:1.45rem}
.g2-peca .post-arte.g2-arte-2{background:radial-gradient(70% 60% at 60% 30%,rgba(210,230,255,.45),transparent 70%),radial-gradient(90% 80% at 30% 80%,rgba(90,120,160,.6),transparent 70%),linear-gradient(160deg,#1d2530,#0d1116)}
.g2-peca .post-arte.g2-arte-3{background:radial-gradient(70% 60% at 60% 30%,rgba(255,236,210,.5),transparent 70%),radial-gradient(90% 80% at 30% 80%,rgba(170,130,90,.55),transparent 70%),linear-gradient(160deg,#2c241c,#130f0b)}
.g2-peca .post-arte.g2-arte-4{background:radial-gradient(70% 60% at 60% 30%,rgba(200,255,235,.4),transparent 70%),radial-gradient(90% 80% at 30% 80%,rgba(70,140,120,.55),transparent 70%),linear-gradient(160deg,#16241f,#0a110e)}
.g2-regras h3{font-size:1.2rem;margin-bottom:6px}
.g2-regras > p{color:var(--tinta-2);line-height:1.6;margin-bottom:16px}
.g2-regras ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.g2-regras li{position:relative;padding-left:26px;color:var(--tinta-2);font-size:.94rem;line-height:1.5}
.g2-regras li::before{content:'';position:absolute;left:2px;top:.5em;width:12px;height:6px;border-left:1.6px solid #46fea5;border-bottom:1.6px solid #46fea5;transform:rotate(-45deg)}
.g2-regras li.nao::before{content:'\00d7';border:0;transform:none;top:-.05em;left:3px;color:#ff6b6b;font-size:1.1rem;width:auto;height:auto}
.g2-regras li b{color:#fff;font-weight:500}
@media(max-width:700px){.g2-peca{grid-template-columns:minmax(0,1fr)}.g2-peca .mock-anuncio-post{max-width:none}}

/* ---------- vitrine grande de sites reais ---------- */
.g2-vitrine .escolha-site{justify-content:center;margin:0 0 18px}
.g2-vitrine .vitrine-palco{height:clamp(440px,52vw,640px)}
@media(max-width:700px){.g2-vitrine .vitrine-palco{height:620px}}

/* ---------- cursor nomeado andando sobre o print (padrão Inboxes) ---------- */
.g2-cursor-palco{position:relative}
.g2-cursor{
  position:absolute;left:0;top:0;z-index:3;pointer-events:none;
  display:flex;align-items:flex-start;gap:2px;
  animation:g2-andar 7s cubic-bezier(.65,0,.35,1) infinite;
}
.g2-cursor svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.g2-cursor span{
  margin-top:14px;padding:3px 9px;border-radius:999px;font-size:.8rem;font-weight:600;color:#fff;white-space:nowrap;
  background:var(--laranja);box-shadow:0 6px 18px -6px rgba(240,86,31,.8);
}
@keyframes g2-andar{
  0%,8%{transform:translate(calc(var(--g2-w) * .42),calc(var(--g2-h) * .62))}
  45%,70%{transform:translate(calc(var(--g2-w) * .755),calc(var(--g2-h) * .07))}
  78%{transform:translate(calc(var(--g2-w) * .755),calc(var(--g2-h) * .07)) scale(.92)}
  84%{transform:translate(calc(var(--g2-w) * .755),calc(var(--g2-h) * .07)) scale(1)}
  100%{transform:translate(calc(var(--g2-w) * .42),calc(var(--g2-h) * .62))}
}
@media(prefers-reduced-motion:reduce){.g2-cursor{animation:none;transform:translate(calc(var(--g2-w) * .755),calc(var(--g2-h) * .07))}}
@media(max-width:600px){.g2-cursor span{font-size:.8rem;padding:2px 7px;margin-top:10px}.g2-cursor svg{width:14px;height:14px}}

/* ---------- telefone parado com conversa curta (lembretes) ---------- */
.g2-conversa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(20px,3vw,40px);align-items:center}
.g2-conversa .telefone{max-width:340px;margin:0 auto}
.g2-conversa .thread{height:auto;min-height:260px;overflow:visible}
.g2-conversa .bolha{animation:none}
.g2-conversa h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2;margin-bottom:12px}
.g2-conversa p{color:var(--tinta-2);line-height:1.6;margin-top:10px}
.g2-conversa p b{color:#fff;font-weight:500}
.g2-conversa .print img{border-radius:12px}
.g2-quando{display:inline-block;font-size:.8rem;color:var(--laranja-escuro);border:1px solid rgba(240,86,31,.4);border-radius:999px;padding:3px 10px;margin-bottom:14px}
.g2-sistema{align-self:center;font-size:.8rem;color:rgba(233,237,239,.6);background:rgba(255,255,255,.06);border-radius:8px;padding:4px 10px;text-align:center}
@media(max-width:900px){.g2-conversa{grid-template-columns:minmax(0,1fr)}}

/* ---------- agenda ao vivo (bloco copiado da home) ---------- */
.g2-agenda-viva{margin-top:0}

/* ---------- links pros outros serviços ---------- */
.g2-outros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g2-outros a{
  display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:16px;border:1px solid var(--linha);
  background:linear-gradient(180deg,#0a0a0b,#040404);transition:border-color .2s var(--curva),transform .2s var(--curva);
}
.g2-outros a:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.g2-outros b{font-weight:500;color:#fff;font-size:1rem}
.g2-outros span{font-size:.88rem;color:var(--tinta-2);line-height:1.5}
.g2-outros em{font-style:normal;font-size:.82rem;color:var(--tinta-3);margin-top:6px}
.g2-outros a:hover em{color:#fff}
@media(max-width:900px){.g2-outros{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g2-outros{grid-template-columns:minmax(0,1fr)}}

/* ---------- miudezas ---------- */
.g2-centro-acao{display:flex;justify-content:center;margin-top:28px}
.g2-link{color:#fff;text-decoration:underline;text-decoration-color:rgba(240,86,31,.6);text-underline-offset:3px}
.g2-nota{margin-top:14px;font-size:.8rem;color:var(--tinta-3);text-align:center}
.g2-nota.esq{text-align:left}
.bloco .dupla-texto .apoio + .apoio{margin-top:14px}
.g2-lista-curta{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.g2-lista-curta li{display:flex;gap:10px;color:var(--tinta-2);line-height:1.5}
.g2-lista-curta li svg{flex:none;margin-top:3px;color:var(--laranja-escuro)}
.g2-lista-curta li b{color:#fff;font-weight:500}
.linha-tempo.g2-tempo{max-width:760px;margin:0 auto}
.linha-tempo.g2-tempo li{grid-template-columns:120px minmax(0,1fr)}
.linha-tempo.g2-tempo time{font-size:1.5rem}
.linha-tempo.g2-tempo span b{display:block;color:#fff;font-weight:500;margin-bottom:2px}
@media(max-width:480px){.linha-tempo.g2-tempo li{grid-template-columns:minmax(0,1fr);gap:6px}}
.g2-raio svg{display:block;width:100%;height:auto;border-radius:12px;background:#060606}
@media(max-width:640px){
  .g2-tabela .tabela-comparar{min-width:0}
  .g2-tabela thead{display:none}
  .g2-tabela tr{display:block;padding:14px 16px;border-bottom:1px solid var(--linha)}
  .g2-tabela tr:last-child{border-bottom:0}
  .g2-tabela td{display:block;border:0;padding:3px 0}
  .g2-tabela td::before{content:attr(data-r);display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:2px}
  .g2-tabela td + td{margin-top:8px}
}
.cartao-bento .arte.g2-corte{max-height:300px;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.cartao-bento .arte.g2-corte img{max-width:260px}
.g2-cursor-palco{overflow:hidden;border-radius:14px}
@media(max-width:600px){.g2-cursor span{position:absolute;right:16px;top:0;margin-top:12px}}
.linha-tempo.g2-tempo li.fim{grid-template-columns:minmax(0,1fr)}
.g2-print-celular{max-width:300px;margin:0 auto}
.g2-mini-agenda{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--linha);background:#070708}
.g2-ev{font-size:.84rem;color:#d9d9d9;padding:9px 12px;border-radius:10px;border-left:3px solid;background:rgba(255,255,255,.03)}
.g2-ev b{font-weight:600;color:#fff;margin-right:6px}
.g2-ev.verde{border-left-color:#1f9d6b;background:rgba(31,157,107,.1)}
.g2-ev.azul{border-left-color:#3b6fd8;background:rgba(59,111,216,.1)}
.g2-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:4px;font-size:.8rem;color:var(--tinta-3)}
.g2-legenda i{width:8px;height:8px;border-radius:2px;display:inline-block}
.g2-legenda i.verde{background:#1f9d6b}.g2-legenda i.azul{background:#3b6fd8;margin-left:6px}
.g2-legenda{gap:6px 14px}.g2-legenda span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.g2-legenda i.azul{margin-left:0}