/* ==========================================================================
   fix-passos — 30/10.
   1) "Numa tarde": os 3 passos viram uma cena só, na linguagem do Launcher:
      contas voam pra Deu ROI, a régua corta o faturamento, o lucro vira decisão.
   2) ChatGPT do MCP: resultado do dia, com gráficos, diferente do Claude.
   ========================================================================== */
.nt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.nt-e {
    position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 22px;
    border-radius: var(--r); background: #0b0e0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
    transition: box-shadow .35s var(--ease);
}
.nt-e.on { box-shadow: 0 0 0 1px rgba(60, 230, 160, .5), 0 18px 50px -24px rgba(60, 230, 160, .45); }
.nt-vis {
    position: relative; height: 216px; padding: 14px; border-radius: calc(var(--r) - 6px); overflow: hidden; background: #050807;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.nt-tx { padding: 18px 10px 0; }
.nt-tx .step-n { margin-bottom: 8px; }
.nt-tx h3 { font-size: 19px; letter-spacing: -.03em; }
.nt-tx p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* ponte entre os passos */
.nt-ponte { position: absolute; z-index: 2; left: 50%; bottom: -34px; width: 2px; height: 34px; margin-left: -1px; background: rgba(255, 255, 255, .1); }
.nt-ponte i { position: absolute; left: -4px; top: -5px; width: 10px; height: 10px; border-radius: 3px; background: #3ce6a0; box-shadow: 0 0 14px rgba(60, 230, 160, .9); opacity: 0; }
@media (min-width: 900px) {
    .nt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
    .nt-ponte { left: auto; right: -28px; top: 120px; bottom: auto; width: 28px; height: 2px; margin: 0; }
    .nt-ponte i { left: -5px; top: -4px; }
}

/* 1. contas */
.nt-fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nt-fios path { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.2; stroke-dasharray: 4 5; }
.nt-con.vai .nt-fios path { stroke: rgba(60, 230, 160, .55); animation: nt-fio .7s linear infinite; }
@keyframes nt-fio { to { stroke-dashoffset: -9; } }
.nt-con { display: flex; align-items: center; justify-content: space-between; }
.nt-ps { position: relative; z-index: 1; display: grid; gap: 7px; width: 132px; margin: 0; padding: 0; list-style: none; }
.nt-p { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 9px 0 6px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--text); background: #111514; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); transition: box-shadow .3s var(--ease); }
.nt-p.ok { box-shadow: 0 0 0 1px rgba(60, 230, 160, .4); }
.nt-p u { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: rgba(255, 255, 255, .16); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.nt-p.ok u { background: #3ce6a0; box-shadow: 0 0 8px rgba(60, 230, 160, .9); }
.nt-q { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 22%; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; }
.nt-q svg { width: 16px; height: 16px; fill: #fff; }
.nt-q.c0 { background: linear-gradient(150deg, #4f9bff, #0f56b8); }
.nt-q.c1 { background: linear-gradient(150deg, #f0a27a, #a8452f); }
.nt-q.c2 { background: linear-gradient(150deg, #3ce6a0, #127a55); }
.nt-q.c3 { background: linear-gradient(150deg, #f2c463, #a9701a); }
.nt-voa { position: absolute; z-index: 3; margin: 0; pointer-events: none; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .8); }
.nt-hub { position: relative; z-index: 2; display: grid; place-items: center; flex: none; width: 74px; height: 74px; margin-right: 8px; }
.nt-hub b { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #1c3a2d, #0c1713 70%); box-shadow: 0 0 0 1px rgba(60, 230, 160, .4), 0 10px 34px -8px rgba(60, 230, 160, .55); }
.nt-hub img { width: 54%; height: 54%; }
.nt-onda { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(60, 230, 160, .8); opacity: 0; }

/* 2. régua */
.nt-reg { display: flex; flex-direction: column; }
.nt-reg > small { font-size: 12px; color: var(--text-3); }
.nt-reg > strong { margin-top: 1px; font-family: var(--display); font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; transition: color .3s var(--ease); }
.nt-reg.fim > strong { color: #3ce6a0; }
.nt-cs { display: grid; gap: 3px; margin: auto 0 0; padding: 0; list-style: none; }
.nt-c { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 7px; font-size: 12.5px; color: var(--text-2); background: #111514; font-variant-numeric: tabular-nums; }
.nt-c em { font-style: normal; font-weight: 600; color: #e5706b; }

/* 3. decisão */
.nt-dec { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.nt-dec > small { font-size: 12px; color: var(--text-3); }
.nt-l { display: grid; grid-template-columns: minmax(0, 1fr) auto 62px; align-items: center; gap: 8px; min-height: 46px; padding: 0 8px 0 10px; border-radius: 10px; background: #111514; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07); }
.nt-l b { overflow: hidden; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: #c4c4cc; white-space: nowrap; text-overflow: ellipsis; }
.nt-l em { font-style: normal; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: #3ce6a0; }
.nt-l.neg em { color: #e5706b; }
.nt-l span { display: grid; place-items: center; height: 26px; border-radius: 7px; font-size: 11.5px; font-weight: 700; color: #06130c; background: #3ce6a0; }
.nt-l.mid span { color: #e4e4e7; background: rgba(255, 255, 255, .1); }
.nt-l.neg span { color: #fff; background: #d9534f; }

/* enquanto a cena roda: só existe o que já aconteceu */
.nt.anda .nt-c { opacity: 0; transform: translateX(-10px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.nt.anda .nt-c.in { opacity: 1; transform: none; }
.nt.anda .nt-l { opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.nt.anda .nt-l.in { opacity: 1; transform: none; }
.nt.anda .nt-l span { opacity: 0; transform: scale(.7); transition: opacity .25s var(--ease), transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.nt.anda .nt-l.pop span { opacity: 1; transform: none; }

/* --- ChatGPT: resultado de hoje --- */
#mcp .rel-in { animation-duration: 7.6s; }
#mcp .rel-t span.ok { color: #3ce6a0; }
#mcp .hj-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 4px; height: 92px; }
#mcp .hj-bars i { display: block; height: calc(var(--v) * 22px + 3px); border-radius: 4px 4px 2px 2px; background: rgba(60, 230, 160, .32); transform-origin: bottom; }
#mcp .hj-bars i.pico { background: #3ce6a0; box-shadow: 0 0 16px rgba(60, 230, 160, .55); }
#mcp .hj-eixo { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10px; color: #80808a; }
#mcp .rel-t .hj-leg, #mcp .rel-t .hj-leg span { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: #a1a1aa; }
#mcp .rel-t .hj-leg span { gap: 0; }
#mcp .hj-leg u { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; background: #3ce6a0; text-decoration: none; }
#mcp .hj-leg u.ont { background: #5b5b63; }
#mcp .hj-linha { display: block; width: 100%; height: 76px; }
#mcp .hj-linha path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#mcp .hj-linha .h { stroke: #3ce6a0; }
#mcp .hj-linha .o { stroke: #5b5b63; }
#mcp .hj-org { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
#mcp .hj-org li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 18px; align-items: center; gap: 8px; font-size: 11.5px; color: #d4d4d8; }
#mcp .hj-org i { display: block; width: var(--w); height: 8px; border-radius: 9px; background: #3ce6a0; transform-origin: left; }
#mcp .hj-org em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
    #mcp .ia.on .hj-bars i { animation: hj-sobe .55s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 1.1s); }
    #mcp .ia.on .hj-linha path { stroke-dasharray: 1; animation: hj-risca 1.4s var(--ease) 1.6s both; }
    #mcp .ia.on .hj-org i { animation: hj-enche .7s var(--ease) 3s both; }
}
@keyframes hj-sobe { from { transform: scaleY(0); } }
@keyframes hj-risca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hj-enche { from { transform: scaleX(0); } }

/* --- Launcher: linha sobre a headline --- */
#launcher .pre-h { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--brand); }
#video[hidden] { display: none; }

/* --- Garantia: fecha a página no lugar das perguntas --- */
.gar { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; max-width: 980px; margin-inline: auto; padding: clamp(28px, 5vw, 56px); text-align: center; border-radius: var(--r); background: #0b0e0d; box-shadow: 0 0 0 1px rgba(60, 230, 160, .22); }
.gar-selo { position: relative; flex: none; width: 220px; height: 220px; }
.gar-selo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gar-selo path { fill: none; stroke: #3ce6a0; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(60, 230, 160, .5)); }
.gar-selo p { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; text-align: center; }
.gar-selo b { font-family: var(--display); font-size: 68px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: #fff; }
.gar-selo small { margin-top: 2px; font-size: 14px; font-weight: 600; color: #3ce6a0; }
.gar-tx .h2 { text-wrap: balance; }
.gar-tx .lead { margin-top: 12px; }
.gar-tx .btn { margin-top: 22px; }
@media (min-width: 900px) {
    .gar { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 52px; text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
    .js .gar:not(.acende) .gar-selo path { stroke: rgba(255, 255, 255, .1); filter: none; }
    .gar.acende .gar-selo path { animation: gar-dia .45s var(--ease) both; animation-delay: calc(var(--i) * 190ms + .25s); }
    .gar.acende .gar-selo b { animation: gar-pop .5s cubic-bezier(.3, 1.6, .5, 1) 1.65s both; }
}
@keyframes gar-dia { from { stroke: rgba(255, 255, 255, .1); filter: none; } }
@keyframes gar-pop { 0% { transform: scale(1); } 50% { transform: scale(1.14); color: #3ce6a0; } 100% { transform: scale(1); } }

/* etapa 1 com só duas contas: Meta e a plataforma de vendas */
.nt-ps { width: 164px; gap: 12px; }
.nt-p { height: 58px; line-height: 1.2; }

/* Launcher: os vídeos passam pela Deu ROI e as campanhas nascem na Meta */
#launcher .lsa-meta b { background: radial-gradient(circle at 32% 28%, #1c3a2d, #0c1713 70%); box-shadow: 0 0 0 1px rgba(60, 230, 160, .45), 0 10px 34px -6px rgba(60, 230, 160, .6); }
#launcher .lsa-meta img { width: 56%; height: 56%; }
#launcher .lsa-onda { border-color: rgba(60, 230, 160, .8); }
#launcher .lsa-na { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
#launcher .lsa-na svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; fill: #fff; background: #1877f2; }
@container (max-width: 470px) {
    #launcher .lsa-na { justify-content: center; }
}

/* card 1: o ponto do fio fica na ponta do container */
.nt-p { position: relative; }
.nt-p u { position: absolute; right: -4px; top: 50%; flex: none; width: 8px; height: 8px; margin: -4px 0 0; }
.nt-p span { min-width: 0; }

/* card 2: um líquido só que escoa; o vermelho vem atrás e some */
.nt-barra { position: relative; flex: none; height: 16px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .05); }
.nt-liq, .nt-rast { position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: 99px; }
.nt-liq { overflow: hidden; background: linear-gradient(180deg, #5bf0b4, #2bd08c); box-shadow: 0 0 14px rgba(60, 230, 160, .45); transition: width .6s cubic-bezier(.3, 0, .15, 1); }
.nt-rast { background: linear-gradient(90deg, rgba(229, 112, 107, .35), #e5706b); transition: width .7s cubic-bezier(.4, 0, .2, 1) .32s; }
.nt-liq::after { content: ''; position: absolute; inset: 0 auto 0 -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); }
@media (prefers-reduced-motion: no-preference) {
    .nt.anda .nt-liq::after { animation: nt-brilho 2.4s ease-in-out infinite; }
}
@keyframes nt-brilho { to { left: 110%; } }

/* card 3: cada linha é um vídeo, igual ao Launcher */
.nt-l { grid-template-columns: 34px minmax(0, 1fr) 62px; gap: 10px; min-height: 48px; padding: 0 8px 0 7px; }
.nt-nm { display: grid; gap: 1px; min-width: 0; }
.nt-vid { position: relative; display: block; width: 34px; height: 34px; border-radius: 22%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 14px -6px rgba(0, 0, 0, .8); }
.nt-vid::before { content: ''; position: absolute; left: 50%; top: 46%; transform: translate(-30%, -50%); border-left: 7px solid rgba(255, 255, 255, .92); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.nt-vid::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 11%; height: 2px; border-radius: 9px; background: linear-gradient(90deg, #fff 58%, rgba(255, 255, 255, .28) 58%); }
.nt-vid.c0 { background: linear-gradient(150deg, #f0a27a, #a8452f); }
.nt-vid.c1 { background: linear-gradient(150deg, #8d7cf5, #4a35a8); }
.nt-vid.c4 { background: linear-gradient(150deg, #5cc6f2, #1b6c9c); }

/* --- Nome grande no fim da página --- */
.mg { position: relative; container-type: inline-size; padding: clamp(18px, 3vw, 40px) clamp(16px, 2.4vw, 32px) clamp(14px, 2vw, 28px); user-select: none; touch-action: pan-y; }
.mg-t { display: flex; justify-content: center; gap: .24em; margin: 0; font-family: var(--display); font-size: 25.8cqw; font-weight: 700; line-height: .86; letter-spacing: -.045em; white-space: nowrap; color: #101413; -webkit-text-stroke: 2px rgba(255, 255, 255, .1); paint-order: stroke fill; }
.mg-t b, .mg-t span { font: inherit; }
.mg-t b { color: #0c1a15; -webkit-text-stroke-color: rgba(60, 230, 160, .2); }
.mg-luz { position: absolute; inset: clamp(18px, 3vw, 40px) clamp(16px, 2.4vw, 32px) clamp(14px, 2vw, 28px); pointer-events: none; -webkit-text-stroke: 0; }
.mg-luz span, .mg-luz b {
    color: transparent; -webkit-text-stroke: 0; -webkit-background-clip: text; background-clip: text; background-attachment: fixed;
}
.mg-luz { --x: 30%; --y: 50%; color: transparent; -webkit-mask-image: radial-gradient(circle 24cqw at var(--x) var(--y), #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%); mask-image: radial-gradient(circle 24cqw at var(--x) var(--y), #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%); }
.mg-luz span { background: none; color: #fff; }
.mg-luz b { background: none; color: #3ce6a0; }