/*
 * Faixa "Marketing e tecnologia" em capítulos com cenas animadas (template-parts/blocos/agentes.php
 * e template-parts/v3/agentes.php). Saiu de componentes.css em 10/10/2026 para servir aos dois
 * layouts (o de 14/09 e o 2026) sem duplicar código. Usa os tokens de base.css; no layout 2026
 * os mesmos tokens são declarados em v3.css.
 */
/* ---------------------------------------------------------------------------
   Agentes de IA em capítulos (template-parts/blocos/agentes.php), 01/10/2026.
   Faixa escura de ponta a ponta. Computador: capítulos à esquerda, cena parada
   (sticky) à direita que muda com o capítulo lido. Até 1000 px o site.js leva
   cada cena para dentro do capítulo e nada fica preso na tela. Sem JS ou com
   movimento reduzido, as cenas aparecem no estado final.
   --------------------------------------------------------------------------- */
.dg-agentes { margin-top: var(--secao); background: var(--ink0); color: var(--papel-70); padding: clamp(72px, 9vw, 140px) var(--gutter) clamp(40px, 6vw, 90px); }
.dg-agentes__in { max-width: 1440px; margin-inline: auto; }

/* cabeçalho */
.dg-agentes__cab { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(28px, 5vw, 96px); align-items: end; }
.dg-agentes__cab h2 { font-weight: 300; font-size: clamp(36px, 4.4vw, 68px); line-height: 1.03; margin-top: 18px; color: var(--branco); }
.dg-agentes__cab h2 em { color: var(--lime); }
.dg-agentes__lide { font-size: 16.5px; line-height: 1.7; color: var(--papel-70); max-width: 52ch; }
.dg-agentes__link { color: var(--lime); display: inline-block; margin-top: 20px; }

/* corpo: capítulos + cena */
.dg-agentes__corpo { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); margin-top: clamp(56px, 7vw, 110px); }
.dg-agentes__caps { display: grid; }
.dg-agentes__cap { padding: 34px 0 44px; border-top: 1px solid rgba(255, 255, 255, .12); }
.dg-agentes--vivo .dg-agentes__cap { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; border-top: 0; padding: 0; opacity: .28; transition: opacity .5s ease; }
.dg-agentes--vivo .dg-agentes__cap:last-child { min-height: 64vh; }
.dg-agentes--vivo .dg-agentes__cap.is-on { opacity: 1; }
.dg-agentes__num { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.dg-agentes__cap h3 { font-weight: 300; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.12; color: var(--branco); margin-top: 14px; letter-spacing: -.02em; }
.dg-agentes__par { display: grid; gap: 16px; margin-top: 22px; max-width: 48ch; }
.dg-agentes__par .dg-mono { display: block; font-size: 10.5px; color: var(--papel-55); }
.dg-agentes__par .dg-agentes__nosso { color: var(--lime); }
.dg-agentes__par p { font-size: 15.5px; line-height: 1.65; margin-top: 6px; color: var(--papel-70); }
.dg-agentes__par > div:last-child p { color: var(--branco); }
.dg-agentes__par + .dg-agentes__par { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
.dg-agentes .dg-agentes__sub { font-size: 15px; color: var(--branco); font-weight: 500; }

/* a cena */
.dg-agentes__visual { position: relative; }
.dg-agentes--vivo .dg-agentes__fixo { position: sticky; top: max(96px, calc(50vh - 270px)); }
.dg-agentes__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dg-agentes__topo .dg-mono { font-size: 10.5px; color: var(--papel-55); }
.dg-agentes__ex { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--papel-55); border: 1px dashed rgba(255, 255, 255, .22); border-radius: var(--r-pilula); padding: 3px 10px; white-space: nowrap; }
.dg-agentes__passos { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 16px; }
.dg-agentes--vivo .dg-agentes__passo { cursor: pointer; }
.dg-agentes__passo i { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.dg-agentes__passo i::after { content: ""; display: block; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--e-out); }
.dg-agentes__passo span { display: block; margin-top: 9px; font-size: 12px; line-height: 1.3; color: var(--papel-55); transition: color .3s ease; }
.dg-agentes__passo b { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .08em; color: rgba(255, 255, 255, .35); margin-right: 6px; transition: color .3s ease; }
.dg-agentes__passo.is-feito i::after, .dg-agentes__passo.is-on i::after { transform: scaleX(1); }
.dg-agentes__passo.is-on span { color: var(--branco); }
.dg-agentes__passo.is-on b { color: var(--lime); }
.dg-agentes:not(.dg-agentes--vivo) .dg-agentes__passos { display: none; }

.dg-agentes__palco { position: relative; margin-top: 26px; }
.dg-agentes__slot { display: none; }
.dg-agentes--vivo .dg-agentes__palco { height: 440px; }
.dg-agentes__cena + .dg-agentes__cena { margin-top: 28px; }
.dg-agentes--vivo .dg-agentes__cena { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; translate: 0 18px; transition: opacity .45s ease, translate .6s var(--e-out), visibility 0s .45s; }
.dg-agentes--vivo .dg-agentes__cena.is-on { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .5s ease .1s, translate .7s var(--e-out) .1s, visibility 0s; }

/* peças comuns */
.dg-fx-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 14px 16px; }
.dg-fx-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.dg-fx-tag--m { color: var(--papel-55); }
.dg-fx-mono { font-family: var(--mono); font-size: 11.5px; color: var(--papel-55); }

/* 01 conectar */
.dg-fx-con { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(40px, .8fr) auto; align-items: stretch; height: 340px; }
.dg-fx-con ul { list-style: none; display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; }
.dg-fx-con li { display: flex; flex-direction: column; justify-content: center; padding: 8px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: var(--branco); font-size: 16px; line-height: 1.2; }
.dg-fx-con li small { font-size: 12px; color: var(--papel-55); margin-top: 3px; }
.dg-agentes--vivo .dg-fx-con li { opacity: 0; translate: -10px 0; transition: opacity .4s ease, translate .5s var(--e-out); }
.dg-agentes--vivo .is-on .dg-fx-con li { opacity: 1; translate: 0 0; }
.dg-agentes--vivo .is-on .dg-fx-con li:nth-child(2) { transition-delay: .1s; }
.dg-agentes--vivo .is-on .dg-fx-con li:nth-child(3) { transition-delay: .2s; }
.dg-agentes--vivo .is-on .dg-fx-con li:nth-child(4) { transition-delay: .3s; }
.dg-fx-con svg { width: 100%; height: 100%; overflow: visible; }
.dg-fx-con .base { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.2; }
.dg-fx-con .fluxo { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 8 92; stroke-dashoffset: 100; opacity: 0; }
.is-on .dg-fx-con .fluxo { opacity: 1; animation: dg-fx-corre 1.8s linear infinite; animation-delay: var(--d, 0s); }
@keyframes dg-fx-corre { to { stroke-dashoffset: 0; } }
.dg-fx-agente { align-self: center; width: 160px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; position: relative; background: radial-gradient(circle, rgba(196, 242, 78, .16), rgba(196, 242, 78, 0) 70%); }
.dg-fx-agente::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(196, 242, 78, .55); }
.is-on .dg-fx-agente::before { animation: dg-gira 16s linear infinite; }
.dg-fx-agente::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 1px solid var(--lime); }
.is-on .dg-fx-agente::after { animation: dg-fx-pulsa 2.4s ease-out infinite; }
@keyframes dg-fx-pulsa { 0% { box-shadow: 0 0 0 0 rgba(196, 242, 78, .4); } 100% { box-shadow: 0 0 0 20px rgba(196, 242, 78, 0); } }
.dg-fx-agente strong { display: block; font-weight: 400; color: var(--branco); font-size: 18px; }
.dg-fx-agente small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); margin-top: 3px; }

/* 02 avaliar */
.dg-fx-ach { display: grid; gap: 10px; }
.dg-fx-ach .dg-fx-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 18px; }
.dg-fx-ach p { grid-column: 1 / -1; color: var(--branco); font-size: 16px; line-height: 1.4; }
.dg-fx-ach .dg-fx-mono { grid-column: 1 / -1; }
.dg-fx-ach .dg-fx-tag--m { text-align: right; }
.dg-agentes--vivo .dg-fx-ach .dg-fx-card { opacity: 0; translate: -14px 0; transition: opacity .4s ease, translate .5s var(--e-out); }
.dg-agentes--vivo .is-on .dg-fx-ach .dg-fx-card { opacity: 1; translate: 0 0; }
.dg-agentes--vivo .is-on .dg-fx-ach .dg-fx-card:nth-child(1) { transition-delay: .25s; }
.dg-agentes--vivo .is-on .dg-fx-ach .dg-fx-card:nth-child(2) { transition-delay: .55s; }
.dg-agentes--vivo .is-on .dg-fx-ach .dg-fx-card:nth-child(3) { transition-delay: .85s; }
.dg-fx-varre { position: relative; overflow: hidden; }
.dg-agentes--vivo .is-on .dg-fx-varre::after { content: ""; position: absolute; left: 0; right: 0; height: 60px; top: -60px; background: linear-gradient(180deg, rgba(196, 242, 78, 0), rgba(196, 242, 78, .12), rgba(196, 242, 78, 0)); animation: dg-fx-varre 1.4s ease-in-out .1s 1 both; pointer-events: none; }
@keyframes dg-fx-varre { to { top: 100%; } }

/* 03 pautar */
.dg-fx-pauta { padding: 20px 22px; }
.dg-fx-pauta__cab { display: flex; justify-content: space-between; gap: 12px; }
.dg-fx-pauta h4 { margin-top: 10px; font-weight: 400; font-size: 23px; line-height: 1.22; color: var(--branco); }
.dg-fx-pauta dl { margin: 16px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; font-size: 14.5px; line-height: 1.4; }
.dg-fx-pauta dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--papel-55); padding-top: 2px; }
.dg-fx-pauta dd { margin: 0; color: var(--papel-86); }
.dg-agentes--vivo .dg-fx-pauta h4, .dg-agentes--vivo .dg-fx-pauta dt, .dg-agentes--vivo .dg-fx-pauta dd { opacity: 0; transition: opacity .35s ease; }
.dg-agentes--vivo .is-on .dg-fx-pauta h4, .dg-agentes--vivo .is-on .dg-fx-pauta dt, .dg-agentes--vivo .is-on .dg-fx-pauta dd { opacity: 1; }
.dg-agentes--vivo .is-on .dg-fx-pauta h4 { transition-delay: .25s; }
.dg-agentes--vivo .is-on .dg-fx-pauta :is(dt, dd):nth-of-type(1) { transition-delay: .5s; }
.dg-agentes--vivo .is-on .dg-fx-pauta :is(dt, dd):nth-of-type(2) { transition-delay: .7s; }
.dg-agentes--vivo .is-on .dg-fx-pauta :is(dt, dd):nth-of-type(3) { transition-delay: .9s; }
.dg-agentes--vivo .is-on .dg-fx-pauta :is(dt, dd):nth-of-type(4) { transition-delay: 1.1s; }
.dg-agentes--vivo .is-on .dg-fx-pauta :is(dt, dd):nth-of-type(5) { transition-delay: 1.3s; }

/* 04 revisar e publicar */
.dg-fx-rev { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.dg-fx-rev h4 { margin-top: 10px; font-weight: 400; font-size: 18px; line-height: 1.3; color: var(--branco); }
.dg-fx-rev ul { list-style: none; display: grid; gap: 12px; }
.dg-fx-rev li { display: flex; gap: 12px; align-items: center; font-size: 14.5px; color: var(--papel-86); }
.dg-fx-rev li::before { content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--lime); color: var(--ink0); }
.dg-agentes--vivo .dg-fx-rev li::before { background: rgba(255, 255, 255, .1); color: transparent; transition: background .25s ease, color .25s ease; }
.dg-agentes--vivo .is-on .dg-fx-rev li::before { background: var(--lime); color: var(--ink0); }
.dg-agentes--vivo .is-on .dg-fx-rev li:nth-child(1)::before { transition-delay: .35s; }
.dg-agentes--vivo .is-on .dg-fx-rev li:nth-child(2)::before { transition-delay: .65s; }
.dg-agentes--vivo .is-on .dg-fx-rev li:nth-child(3)::before { transition-delay: .95s; }
.dg-agentes--vivo .is-on .dg-fx-rev li:nth-child(4)::before { transition-delay: 1.25s; }
.dg-fx-status { display: inline-grid; margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.dg-fx-status > span { grid-area: 1 / 1; padding: 6px 12px; border-radius: var(--r-pilula); }
.dg-fx-status .a { background: rgba(255, 255, 255, .1); color: var(--papel-70); opacity: 0; }
.dg-fx-status .b { background: var(--lime); color: var(--ink0); }
.dg-agentes--vivo .dg-fx-status .a { opacity: 1; transition: opacity .3s ease; }
.dg-agentes--vivo .dg-fx-status .b { opacity: 0; scale: .85; transition: opacity .3s ease, scale .4s var(--e-back); }
.dg-agentes--vivo .is-on .dg-fx-status .a { opacity: 0; transition-delay: 1.5s; }
.dg-agentes--vivo .is-on .dg-fx-status .b { opacity: 1; scale: 1; transition-delay: 1.85s; }
.dg-agentes .dg-fx-selo { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(196, 242, 78, .45); background: rgba(196, 242, 78, .08); color: var(--branco); font-size: 15px; }
.dg-fx-selo b { font-weight: 500; color: var(--lime); }
.dg-agentes--vivo .dg-fx-selo { opacity: 0; translate: 0 8px; transition: opacity .4s ease, translate .5s var(--e-out); }
.dg-agentes--vivo .is-on .dg-fx-selo { opacity: 1; translate: 0 0; transition-delay: 1.5s; }

/* 05 monitorar */
.dg-fx-mon { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.dg-fx-graf { display: flex; flex-direction: column; }
.dg-fx-graf svg { width: 100%; height: 210px; margin-top: 12px; overflow: visible; }
.dg-fx-graf .grade { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.dg-fx-graf .area { fill: url(#dg-fx-gr); opacity: .9; }
.dg-fx-graf .linha { fill: none; stroke: var(--lime); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.dg-agentes--vivo .dg-fx-graf .linha { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--e-io) .3s; }
.dg-agentes--vivo .is-on .dg-fx-graf .linha { stroke-dashoffset: 0; }
.dg-agentes--vivo .dg-fx-graf .area { opacity: 0; transition: opacity .8s ease 1.2s; }
.dg-agentes--vivo .is-on .dg-fx-graf .area { opacity: .9; }
.dg-fx-graf__x { display: flex; justify-content: space-between; margin-top: 8px; }
.dg-fx-num { display: grid; gap: 10px; }
.dg-fx-num p { color: var(--branco); font-size: 22px; font-weight: 300; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dg-fx-num p s { text-decoration: none; color: var(--papel-55); font-size: 15px; }
.dg-fx-volta { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--papel-70); font-size: 14px; margin-top: 4px; }
.dg-fx-volta svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* tablet e celular: uma coluna, nada fica preso na tela. O JS leva cada cena para
   dentro do seu capítulo (entre o título e o texto) e a animação toca quando o
   capítulo entra na tela. A coluna da cena e os passos somem. */
@media (max-width: 1000px) {
  .dg-agentes__cab, .dg-agentes__corpo { grid-template-columns: 1fr; }
  .dg-agentes--movido .dg-agentes__visual { display: none; }
  .dg-agentes--movido .dg-agentes__cap { min-height: 0; display: block; opacity: 1; padding: 44px 0 8px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .dg-agentes--movido .dg-agentes__cap:first-child { border-top: 0; padding-top: 0; }
  .dg-agentes--movido .dg-agentes__cap:last-child { min-height: 0; }
  .dg-agentes--movido .dg-agentes__slot { display: block; margin-top: 22px; }
  .dg-agentes__slot .dg-agentes__ex { display: inline-block; margin-bottom: 10px; }
  .dg-agentes__slot .dg-agentes__cena { position: static; opacity: 1; visibility: visible; translate: none; }
  .dg-agentes__cap h3 { font-size: 24px; }
  .dg-agentes__par p { font-size: 15px; }

  .dg-fx-card { padding: 11px 13px; border-radius: 13px; }
  .dg-fx-con { height: 260px; grid-template-columns: minmax(0, 1.3fr) minmax(22px, .35fr) auto; }
  .dg-fx-con li { padding: 6px 11px; font-size: 13.5px; border-radius: 11px; }
  .dg-fx-con li small { font-size: 10.5px; }
  .dg-fx-agente { width: 100px; }
  .dg-fx-agente strong { font-size: 14px; }
  .dg-fx-agente small { font-size: 8.5px; letter-spacing: .04em; }
  .dg-fx-agente::after { inset: 15px; }
  .dg-fx-ach { gap: 8px; }
  .dg-fx-ach .dg-fx-card { padding: 11px 13px; }
  .dg-fx-ach p { font-size: 13.5px; }
  .dg-fx-mono { font-size: 10.5px; }
  .dg-fx-pauta { padding: 13px 14px; }
  .dg-fx-pauta h4 { font-size: 17px; margin-top: 6px; }
  .dg-fx-pauta dl { grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: 12.5px; margin-top: 10px; }
  .dg-fx-pauta dt { font-size: 9.5px; }
  .dg-fx-pauta .opc { display: none; }
  .dg-fx-rev { grid-template-columns: 1fr; gap: 8px; }
  .dg-fx-rev h4 { font-size: 14.5px; margin-top: 4px; }
  .dg-fx-rev .dg-fx-card:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .dg-fx-rev .dg-fx-card:first-child .dg-fx-tag { display: none; }
  .dg-fx-status { margin-top: 0; font-size: 10px; flex: none; }
  .dg-fx-rev ul { gap: 8px; }
  .dg-fx-rev li { font-size: 13px; }
  .dg-agentes .dg-fx-selo { padding: 10px 13px; font-size: 13.5px; }
  .dg-fx-mon { grid-template-columns: 1fr; gap: 8px; }
  .dg-fx-graf svg { height: 120px; }
  .dg-fx-num { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dg-fx-num .dg-fx-tag { font-size: 9px; }
  .dg-fx-num p { font-size: 16px; }
  .dg-fx-num p s { font-size: 11px; display: block; }
  .dg-fx-volta { display: none; }
}


/* ---- cenas de tráfego pago (agentes-cenas-agencia-de-trafego-pago.php) ---- */
.dg-agentes .dg-fx-card p { color: var(--branco); }
.dg-fx-check { display: grid; gap: 10px; list-style: none; }

/* 01 rastrear */
.dg-fx-ras { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; align-items: start; }
.dg-fx-ras__ads { display: grid; gap: 10px; }
.dg-fx-ras__ads p { font-size: 17px; line-height: 1.3; margin-top: 6px; }
.dg-fx-ras__ads .dg-fx-mono { display: block; margin-top: 4px; }
.dg-fx-ras__ev { list-style: none; display: grid; gap: 14px; padding: 16px 18px; }
.dg-fx-ras__ev li { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; align-items: center; }
.dg-fx-ras__ev li::before { content: "✓"; grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--lime); color: var(--ink0); }
.dg-fx-ras__ev span { font-size: 15px; color: var(--branco); }
.dg-fx-ras__ev small { font-family: var(--mono); font-size: 10.5px; color: var(--papel-55); }
.dg-agentes .dg-fx-ras__orig { grid-column: 1 / -1; padding: 12px 16px; border-radius: 14px; border: 1px dashed rgba(196, 242, 78, .4); color: var(--papel-70); line-height: 1.5; }
.dg-fx-ras__orig b { font-weight: 500; color: var(--lime); text-transform: uppercase; letter-spacing: .06em; margin-right: 8px; }
.dg-agentes--vivo .dg-fx-ras__ads .dg-fx-card { opacity: 0; translate: -12px 0; transition: opacity .4s ease, translate .5s var(--e-out); }
.dg-agentes--vivo .is-on .dg-fx-ras__ads .dg-fx-card { opacity: 1; translate: 0 0; }
.dg-agentes--vivo .is-on .dg-fx-ras__ads .dg-fx-card:nth-child(2) { transition-delay: .15s; }
.dg-agentes--vivo .dg-fx-ras__ev li::before { background: rgba(255, 255, 255, .1); color: transparent; transition: background .25s ease, color .25s ease; }
.dg-agentes--vivo .is-on .dg-fx-ras__ev li::before { background: var(--lime); color: var(--ink0); }
.dg-agentes--vivo .is-on .dg-fx-ras__ev li:nth-child(1)::before { transition-delay: .5s; }
.dg-agentes--vivo .is-on .dg-fx-ras__ev li:nth-child(2)::before { transition-delay: .8s; }
.dg-agentes--vivo .is-on .dg-fx-ras__ev li:nth-child(3)::before { transition-delay: 1.1s; }
.dg-agentes--vivo .is-on .dg-fx-ras__ev li:nth-child(4)::before { transition-delay: 1.4s; }
.dg-agentes--vivo .dg-fx-ras__orig { opacity: 0; translate: 0 8px; transition: opacity .4s ease, translate .5s var(--e-out); }
.dg-agentes--vivo .is-on .dg-fx-ras__orig { opacity: 1; translate: 0 0; transition-delay: 1.7s; }

/* 02 qualificar */
.dg-fx-lead { padding: 20px 22px; }
.dg-fx-lead__cab { display: flex; justify-content: space-between; gap: 12px; }
.dg-fx-lead h4 { margin-top: 10px; font-weight: 400; font-size: 21px; line-height: 1.25; color: var(--branco); }
.dg-fx-lead dl { margin: 14px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 14.5px; line-height: 1.4; }
.dg-fx-lead dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--papel-55); padding-top: 2px; }
.dg-fx-lead dd { margin: 0; color: var(--papel-86); }
.dg-fx-lead__crit { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.dg-fx-lead__crit li { font-size: 13px; color: var(--branco); padding: 6px 12px 6px 10px; border-radius: var(--r-pilula); background: rgba(255, 255, 255, .07); display: flex; gap: 8px; align-items: center; }
.dg-fx-lead__crit li::before { content: "✓"; color: var(--lime); font-size: 12px; }
.dg-agentes .dg-fx-lead__ok { margin-top: 14px; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(196, 242, 78, .45); background: rgba(196, 242, 78, .08); color: var(--branco); font-size: 15px; }
.dg-fx-lead__ok b { color: var(--lime); font-weight: 500; }
.dg-agentes--vivo .dg-fx-lead :is(h4, dt, dd) { opacity: 0; transition: opacity .35s ease; }
.dg-agentes--vivo .is-on .dg-fx-lead :is(h4, dt, dd) { opacity: 1; }
.dg-agentes--vivo .is-on .dg-fx-lead h4 { transition-delay: .2s; }
.dg-agentes--vivo .is-on .dg-fx-lead :is(dt, dd):nth-of-type(1) { transition-delay: .4s; }
.dg-agentes--vivo .is-on .dg-fx-lead :is(dt, dd):nth-of-type(2) { transition-delay: .55s; }
.dg-agentes--vivo .is-on .dg-fx-lead :is(dt, dd):nth-of-type(3) { transition-delay: .7s; }
.dg-agentes--vivo .is-on .dg-fx-lead :is(dt, dd):nth-of-type(4) { transition-delay: .85s; }
.dg-agentes--vivo .dg-fx-lead__crit li { opacity: 0; scale: .9; transition: opacity .3s ease, scale .4s var(--e-back); }
.dg-agentes--vivo .is-on .dg-fx-lead__crit li { opacity: 1; scale: 1; }
.dg-agentes--vivo .is-on .dg-fx-lead__crit li:nth-child(1) { transition-delay: 1s; }
.dg-agentes--vivo .is-on .dg-fx-lead__crit li:nth-child(2) { transition-delay: 1.25s; }
.dg-agentes--vivo .is-on .dg-fx-lead__crit li:nth-child(3) { transition-delay: 1.5s; }
.dg-agentes--vivo .dg-fx-lead__ok { opacity: 0; translate: 0 8px; transition: opacity .4s ease, translate .5s var(--e-out); }
.dg-agentes--vivo .is-on .dg-fx-lead__ok { opacity: 1; translate: 0 0; transition-delay: 1.9s; }

/* 03 vender: um cursor arrasta o cartão do lead pelas etapas do funil até "ganho".
   As posições de cada etapa ficam em --x0..--x3 / --y0..--y3 (colunas no computador,
   linhas no celular); a mesma linha do tempo move o cartão, levanta e solta, e no fim
   ele fica verde. Sem movimento, o cartão aparece parado em "Venda". */
.dg-fx-funil { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  --x0: 13px; --x1: calc(25% + 2.5px + 13px); --x2: calc(50% + 5px + 13px); --x3: calc(75% + 7.5px + 13px);
  --y0: 39px; --y1: 39px; --y2: 39px; --y3: 39px; --w: calc(25% - 7.5px - 26px); }
.dg-fx-funil__col { display: grid; align-content: start; gap: 8px; min-height: 290px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.dg-fx-funil__col > .dg-fx-tag { display: block; height: 14px; line-height: 14px; margin-bottom: 4px; }
.dg-fx-funil__col s { display: block; height: 54px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .14); }
.dg-fx-funil__col i { display: block; height: 46px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.dg-fx-arrasta { position: absolute; left: var(--x3); top: var(--y3); width: var(--w); z-index: 2; }
.dg-fx-funil__card { display: block; box-sizing: border-box; min-height: 54px; padding: 10px 12px; border-radius: 10px; font-weight: 400; font-size: 13px; line-height: 1.3; background: var(--lime); border: 1px solid var(--lime); color: var(--ink0); }
.dg-fx-funil__card small { display: block; font-family: var(--mono); font-size: 10.5px; margin-top: 3px; color: rgba(6, 19, 15, .7); }
.dg-fx-cursor { position: absolute; right: 14px; bottom: -16px; width: 22px; height: 22px; opacity: 0; }
.dg-fx-cursor path { fill: var(--branco); stroke: var(--ink0); stroke-width: 1.4; stroke-linejoin: round; }
.dg-agentes .dg-fx-funil__orig { margin-top: 14px; color: var(--papel-70); }

.dg-agentes--vivo .dg-fx-arrasta { left: var(--x0); top: var(--y0); }
.dg-agentes--vivo .dg-fx-funil__card { background: #2a3a35; border-color: rgba(255, 255, 255, .22); color: var(--branco); }
.dg-agentes--vivo .dg-fx-funil__card small { color: var(--papel-55); }
.dg-agentes--vivo .dg-fx-funil__card small span { opacity: 0; }
.dg-agentes--vivo .is-on .dg-fx-arrasta { animation: dg-fx-anda 5s var(--e-io) .4s both; }
.dg-agentes--vivo .is-on .dg-fx-funil__card { animation: dg-fx-ergue 5s ease .4s both; }
.dg-agentes--vivo .is-on .dg-fx-funil__card small { animation: dg-fx-ganho-txt 5s ease .4s both; }
.dg-agentes--vivo .is-on .dg-fx-funil__card small span { animation: dg-fx-ganho 5s ease .4s both; }
.dg-agentes--vivo .is-on .dg-fx-cursor { animation: dg-fx-mao 5s ease .4s both; }
@keyframes dg-fx-anda {
  0%, 12% { left: var(--x0); top: var(--y0); }
  28%, 42% { left: var(--x1); top: var(--y1); }
  58%, 72% { left: var(--x2); top: var(--y2); }
  88%, 100% { left: var(--x3); top: var(--y3); }
}
@keyframes dg-fx-ergue {
  0%, 8%, 32%, 38%, 62%, 68%, 92% { rotate: 0deg; scale: 1; box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: #2a3a35; border-color: rgba(255, 255, 255, .22); color: var(--branco); }
  12%, 28%, 42%, 58%, 72%, 88% { rotate: -2.5deg; scale: 1.04; box-shadow: 0 18px 30px rgba(0, 0, 0, .45); }
  89% { background: #2a3a35; border-color: rgba(255, 255, 255, .22); color: var(--branco); }
  96%, 100% { rotate: 0deg; scale: 1; box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--lime); border-color: var(--lime); color: var(--ink0); }
}
@keyframes dg-fx-ganho-txt { 0%, 89% { color: var(--papel-55); } 96%, 100% { color: rgba(6, 19, 15, .7); } }
@keyframes dg-fx-ganho { 0%, 89% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes dg-fx-mao {
  0% { opacity: 0; translate: 26px 26px; scale: 1; }
  8% { opacity: 1; translate: 0 0; scale: 1; }
  12%, 28%, 42%, 58%, 72%, 88% { scale: .82; }
  32%, 38%, 62%, 68% { scale: 1; }
  92% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: 26px 26px; scale: 1; }
}
.dg-agentes--vivo .dg-fx-funil__orig { opacity: 0; transition: opacity .4s ease; }
.dg-agentes--vivo .is-on .dg-fx-funil__orig { opacity: 1; transition-delay: 5.2s; }

/* 04 devolver */
.dg-fx-dev { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 10px; align-items: center; }
.dg-fx-dev__venda p { font-size: 17px; margin-top: 6px; }
.dg-fx-dev__venda { border-color: rgba(196, 242, 78, .45); background: rgba(196, 242, 78, .08); }
.dg-fx-dev__setas { display: grid; gap: 44px; }
.dg-fx-dev__setas i { position: relative; display: block; height: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; border-radius: 2px; }
.dg-fx-dev__setas i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--lime); translate: -100% 0; }
.is-on .dg-fx-dev__setas i::after { animation: dg-fx-seta 1.4s ease-in-out infinite; }
.is-on .dg-fx-dev__setas i:nth-child(2)::after { animation-delay: .35s; }
@keyframes dg-fx-seta { to { translate: 260% 0; } }
.dg-fx-dev__plat { display: grid; gap: 10px; }
.dg-fx-dev__plat p { font-size: 14.5px; margin-top: 4px; }
.dg-fx-dev__verba { grid-column: 1 / -1; display: grid; gap: 12px; padding: 16px 18px; margin-top: 4px; }
.dg-fx-barra { display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto; gap: 14px; align-items: center; }
.dg-fx-barra span { font-family: var(--mono); font-size: 11px; color: var(--papel-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-fx-barra i { display: block; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.dg-fx-barra i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--b); border-radius: 8px; background: var(--lime); }
.dg-fx-barra em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--branco); font-variant-numeric: tabular-nums; }
.dg-agentes--vivo .dg-fx-barra i::after { width: var(--a); background: rgba(255, 255, 255, .45); transition: width 1s var(--e-io) 1s, background .4s ease 1s; }
.dg-agentes--vivo .is-on .dg-fx-barra i::after { width: var(--b); background: var(--lime); }
.dg-agentes--vivo .dg-fx-dev__plat .dg-fx-card { opacity: .35; transition: opacity .4s ease; }
.dg-agentes--vivo .is-on .dg-fx-dev__plat .dg-fx-card { opacity: 1; transition-delay: .6s; }
.dg-agentes--vivo .is-on .dg-fx-dev__plat .dg-fx-card + .dg-fx-card { transition-delay: .85s; }

/* 05 medir */
.dg-fx-painel { display: grid; gap: 12px; }
.dg-fx-painel__num { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dg-fx-painel__num p { font-size: 26px; font-weight: 300; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dg-fx-painel__num .dg-fx-card:last-child { border-color: rgba(196, 242, 78, .45); background: rgba(196, 242, 78, .08); }
.dg-fx-painel__funil { display: grid; gap: 12px; padding: 16px 18px; }
.dg-fx-etapa { display: grid; grid-template-columns: 7rem 1fr 4rem; gap: 14px; align-items: center; }
.dg-fx-etapa span { font-size: 13.5px; color: var(--papel-86); }
.dg-fx-etapa i { display: block; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
.dg-fx-etapa i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 10px; background: var(--lime); }
.dg-fx-etapa em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--branco); text-align: right; font-variant-numeric: tabular-nums; }
.dg-agentes--vivo .dg-fx-etapa i::after { width: 0; transition: width .9s var(--e-out); }
.dg-agentes--vivo .is-on .dg-fx-etapa i::after { width: var(--w); }
.dg-agentes--vivo .is-on .dg-fx-etapa:nth-child(3) i::after { transition-delay: .15s; }
.dg-agentes--vivo .is-on .dg-fx-etapa:nth-child(4) i::after { transition-delay: .3s; }
.dg-agentes--vivo .is-on .dg-fx-etapa:nth-child(5) i::after { transition-delay: .45s; }
.dg-agentes--vivo .is-on .dg-fx-etapa:nth-child(6) i::after { transition-delay: .6s; }
.dg-agentes--vivo .dg-fx-painel__num .dg-fx-card { opacity: 0; translate: 0 10px; transition: opacity .4s ease, translate .5s var(--e-out); }
.dg-agentes--vivo .is-on .dg-fx-painel__num .dg-fx-card { opacity: 1; translate: 0 0; transition-delay: .9s; }
.dg-agentes--vivo .is-on .dg-fx-painel__num .dg-fx-card:nth-child(2) { transition-delay: 1.05s; }
.dg-agentes--vivo .is-on .dg-fx-painel__num .dg-fx-card:nth-child(3) { transition-delay: 1.2s; }

@media (max-width: 1000px) {
  .dg-fx-ras { grid-template-columns: 1fr; gap: 8px; }
  .dg-fx-ras__ads { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dg-fx-ras__ads p { font-size: 13.5px; }
  .dg-fx-ras__ads .dg-fx-mono { display: none; }
  .dg-fx-ras__ev { padding: 12px 14px; gap: 10px; }
  .dg-fx-ras__ev span { font-size: 13.5px; }
  .dg-fx-ras__ev small { font-size: 9.5px; }
  .dg-agentes .dg-fx-ras__orig { padding: 10px 12px; font-size: 10.5px; }
  .dg-fx-lead { padding: 14px; }
  .dg-fx-lead h4 { font-size: 16px; }
  .dg-fx-lead dl { gap: 6px 12px; font-size: 12.5px; }
  .dg-fx-lead dt { font-size: 9.5px; }
  .dg-fx-lead__crit li { font-size: 12px; padding: 5px 10px 5px 8px; }
  .dg-agentes .dg-fx-lead__ok { font-size: 13.5px; padding: 10px 12px; }
  /* celular: as etapas viram linhas e o cartão desce de uma para a outra */
  .dg-fx-funil { grid-template-columns: 1fr; gap: 8px; --x0: 111px; --x1: 111px; --x2: 111px; --x3: 111px; --y0: 9px; --y1: 79px; --y2: 149px; --y3: 219px; --w: calc(100% - 122px); }
  .dg-fx-funil__col { min-height: 0; grid-template-columns: 92px 1fr; align-items: center; padding: 8px 10px; }
  .dg-fx-funil__col > .dg-fx-tag { margin: 0; }
  .dg-fx-funil__col s { height: 44px; }
  .dg-fx-funil__col i { display: none; }
  .dg-fx-funil__card { min-height: 44px; font-size: 12px; padding: 6px 10px; }
  .dg-fx-funil__card small { font-size: 10px; margin-top: 1px; }
  .dg-fx-dev { grid-template-columns: 1fr; gap: 8px; }
  .dg-fx-dev__setas { display: none; }
  .dg-fx-dev__plat { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dg-fx-dev__plat p { font-size: 12.5px; }
  .dg-fx-dev__venda p { font-size: 14.5px; }
  .dg-fx-dev__verba { padding: 12px 14px; gap: 10px; }
  .dg-fx-barra { grid-template-columns: 1fr auto; row-gap: 5px; }
  .dg-fx-barra i { grid-column: 1 / -1; grid-row: 2; }
  .dg-fx-barra span, .dg-fx-barra em { font-size: 10px; }
  .dg-fx-painel { gap: 8px; }
  .dg-fx-painel__num { gap: 8px; }
  .dg-fx-painel__num p { font-size: 17px; }
  .dg-fx-painel__num .dg-fx-tag { font-size: 9px; }
  .dg-fx-painel__funil { padding: 12px 14px; gap: 9px; }
  .dg-fx-etapa { grid-template-columns: 5.6rem 1fr 3rem; gap: 10px; }
  .dg-fx-etapa span { font-size: 12px; }
  .dg-fx-etapa em { font-size: 11px; }
}