/* Visuais da V2 (COMANDO 21): mockups próprios em HTML/CSS (sem imagens de terceiros).
   Paleta e fontes do clone: --color-gm-*, Montserrat (display), JetBrains Mono (mono). */

.vx-legenda { margin-top: .75rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-gm-subtle); }

/* Janela base (painel, terminal, chat do consultor) */
.vx-janela { position: relative; border: 1px solid var(--color-gm-line); background: #0d0d0f; border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.95), 0 0 80px -30px rgba(249,101,0,.18); text-align: left; }
.vx-barra { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--color-gm-line); background: #111113; }
.vx-ponto { width: 9px; height: 9px; border-radius: 50%; background: #2e2e30; }
.vx-titulo { margin-left: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-gm-subtle); }
.vx-vivo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-gm-muted); }
.vx-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-gm-green); box-shadow: 0 0 0 4px rgba(31,157,107,.18); animation: vx-pulso 2s ease-in-out infinite; }

/* 1. Painel da operação + celular (hero) */
.vx-cena { position: relative; max-width: 64rem; margin: 3.5rem auto 0; }
.vx-painel-corpo { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px; }
@media (min-width: 768px) { .vx-painel-corpo { grid-template-columns: repeat(3, 1fr); padding: 20px 20px 22px; } }
/* No celular, uma tarefa por área para a hero não ficar longa */
@media (max-width: 767px) { .vx-painel-corpo .vx-tarefa + .vx-tarefa { display: none; } .vx-cena { margin-top: 2.75rem; } }
.vx-coluna-rotulo { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--color-gm-blue); margin-bottom: 8px; }
.vx-tarefa { border: 1px solid var(--color-gm-line); background: #141416; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.vx-tarefa p { margin: 0; color: #f5f5f5; font-size: 14px; font-weight: 600; line-height: 1.3; }
.vx-tarefa small { display: block; margin-top: 3px; color: var(--color-gm-subtle); font-size: 12px; line-height: 1.35; }
.vx-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 3px 9px; border-radius: 999px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid; }
.vx-chip--ok { color: #6fd3a8; border-color: rgba(31,157,107,.45); background: rgba(31,157,107,.1); }
.vx-chip--aprovar { color: var(--color-gm-orange); border-color: rgba(249,101,0,.45); background: rgba(249,101,0,.1); }
.vx-chip--andamento { color: var(--color-gm-blue); border-color: rgba(205,216,235,.3); background: rgba(205,216,235,.06); }
.vx-painel-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--color-gm-line); background: #111113; color: var(--color-gm-muted); font-size: 13px; }
.vx-painel-rodape strong { color: #fff; }
.vx-botao-mini { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--color-gm-orange); border-radius: 999px; padding: 6px 12px; }

/* Celular (chat genérico, sem marca de aplicativo) */
.vx-celular { width: 248px; margin: 18px auto 0; border-radius: 34px; border: 1px solid #2e2e30; background: #0a0a0a; padding: 9px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), 0 0 0 6px #121214; }
@media (min-width: 1024px) { .vx-cena { max-width: none; padding-right: 272px; } .vx-celular { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; } }
.vx-tela { border-radius: 26px; overflow: hidden; background: #0f0f11; border: 1px solid #1d1d20; }
.vx-chat-topo { display: flex; align-items: center; gap: 9px; padding: 14px 13px 11px; border-bottom: 1px solid #1d1d20; background: #121214; }
.vx-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--color-gm-orange); color: #fff; font-family: Montserrat, ui-sans-serif, sans-serif; font-weight: 800; font-size: 11px; }
.vx-chat-topo p { margin: 0; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; }
.vx-chat-topo small { color: var(--color-gm-green); font-size: 10px; }
.vx-chat { display: flex; flex-direction: column; gap: 7px; padding: 12px 10px 14px; }
.vx-msg { max-width: 86%; padding: 8px 10px; border-radius: 13px; font-size: 12px; line-height: 1.38; color: #eaeaea; }
.vx-msg--ia { align-self: flex-start; background: #1a1a1d; border: 1px solid #26262a; border-bottom-left-radius: 4px; }
.vx-msg--voce { align-self: flex-end; background: rgba(249,101,0,.16); border: 1px solid rgba(249,101,0,.35); border-bottom-right-radius: 4px; color: #fff; }
.vx-anexo { margin-top: 7px; border-radius: 9px; border: 1px solid #2a2a2e; background: #121214; padding: 8px; }
.vx-anexo b { display: block; font-size: 11px; color: #fff; }
.vx-anexo span { display: block; margin-top: 2px; font-size: 10px; color: var(--color-gm-subtle); }
.vx-acoes { display: flex; gap: 6px; margin-top: 8px; }
.vx-acoes i { font-style: normal; flex: 1; text-align: center; font-size: 10px; font-weight: 700; padding: 5px 0; border-radius: 7px; }
.vx-acoes i:first-child { background: var(--color-gm-orange); color: #fff; }
.vx-acoes i:last-child { border: 1px solid #33333a; color: var(--color-gm-muted); }

/* 2. Terminal (bastidor) */
.vx-term { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.75; padding: 18px 18px 20px; color: #d6d6da; }
.vx-term .vx-cmd { color: #fff; }
.vx-term .vx-cmd::before { content: "$ "; color: var(--color-gm-orange); }
.vx-term .vx-linha { display: flex; gap: 10px; }
.vx-term .vx-linha::before { content: "›"; color: var(--color-gm-orange); }
.vx-term .vx-linha span { flex: 1; color: #bdbdc3; }
.vx-term .vx-linha b { font-weight: 600; color: #6fd3a8; }
.vx-term .vx-linha b.vx-espera { color: var(--color-gm-orange); }
.vx-term .vx-fim { margin-top: 6px; color: var(--color-gm-subtle); }
.vx-cursor { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: var(--color-gm-orange); animation: vx-cursor 1s steps(1) infinite; }

/* 3. Consultor Estratégico com IA */
.vx-consultor { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 768px) { .vx-consultor { grid-template-columns: 5fr 7fr; gap: 2.5rem; } }
.vx-consultor .vx-chat { padding: 16px; gap: 9px; }
.vx-consultor .vx-msg { font-size: 13.5px; max-width: 92%; }
.vx-consultor ol { margin: 6px 0 0; padding-left: 20px; list-style: decimal; }
.vx-consultor ol li::marker { color: var(--color-gm-orange); font-weight: 700; }
.vx-consultor ol li { margin: 2px 0; }
.vx-decisao { align-self: center; margin-top: 4px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-gm-subtle); }

/* Entrada sequencial quando o bloco aparece (usa o .is-visible do clone) */
.gm-reveal.is-visible .vx-seq > * { animation: vx-aparece .45s ease both; }
.gm-reveal.is-visible .vx-seq > *:nth-child(2) { animation-delay: .35s; } .gm-reveal.is-visible .vx-seq > *:nth-child(3) { animation-delay: .7s; }
.gm-reveal.is-visible .vx-seq > *:nth-child(4) { animation-delay: 1.05s; } .gm-reveal.is-visible .vx-seq > *:nth-child(5) { animation-delay: 1.4s; }
.gm-reveal.is-visible .vx-seq > *:nth-child(6) { animation-delay: 1.75s; } .gm-reveal.is-visible .vx-seq > *:nth-child(7) { animation-delay: 2.1s; }
@keyframes vx-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vx-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes vx-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gm-reveal.is-visible .vx-seq > *, .vx-vivo::before, .vx-cursor { animation: none !important; } }

/* Celular: títulos de janela e terminal mais compactos */
@media (max-width: 639px) { .vx-titulo { letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .vx-vivo { flex-shrink: 0; } .vx-term { font-size: 11.5px; padding: 16px 14px 18px; } }