/* ═══════════════════════════════════════════════════════════════════════════ mockup.css — a tela do produto nas LPs LEGADAS ═══════════════════════════════════════════════════════════════════════════ Arquivo PROPRIO, e nao um trecho de `styles.css`, por um motivo medido: das 4 LPs de produto, duas (`ponto-eletronico.html` e `atesta.html`) NAO carregam `styles.css` — sao paginas autocontidas, com todo o CSS inline. Jogar `styles.css` nelas importaria ~7.400 linhas de CSS legado por cima de um layout proprio. Um arquivo so, com uma linha de em cada LP, e a unica forma de as quatro dividirem a MESMA fonte. Pedido do Anderson (28/08/2026): "no banner principal consta tela do otimiza vt pro e deve constar da Plataforma Otimiza e nao de apenas um produto. Use de cada produto especifico no banner de cada lp especifica". A home ja mostra o console; aqui entra a tela de CADA produto na SUA LP. 🚨 POR QUE OS TOKENS ESTAO ESCOPADOS DENTRO DE `.mk`, e nao no `:root`: as LPs legadas tem outro vocabulario de token (`--text-light`, `--surface-border`, `--bg-section-alt`) e NAO tem nenhum dos 9 semanticos que o componente Astro usa. Declarar os semanticos no `:root` daqui colidiria com ~694 paginas legadas de uma vez. Escopados no proprio `.mk`, o bloco e autocontido: entra e sai sem tocar em mais nada. 🚨 A LP legada roda com `body[data-theme="light"]` FIXO — o script legado carimba isso e ignora `prefers-color-scheme` (medido em producao; ver o comentario do `.vt-audience__lead`). Por isso a base e o tema CLARO e o escuro vem por `[data-theme='dark']`, que e o padrao das irmas deste arquivo. Os valores sao os mesmos de `site/src/styles/tema.css`. ⚠️ Este bloco e um ESPELHO de `site/src/components/MockupApp.astro`, do mesmo jeito que o CSS do header vive em dois lugares. Mexeu la, mexe aqui. ⛔ ZERO imagem (a CSP proibe CDN) e ⛔ ZERO metrica nova: todo numero da tela e ilustrativo e a legenda diz isso em palavras. ═══════════════════════════════════════════════════════════════════════════ */ .mk { /* 🚨 Medido a 375px na LP do VT: ali o `.mk` e item flex de `.hero__container`, e item flex nasce com `min-width: auto` — a janela inchou para 557px num viewport de 375 e o pedaco que sobrou ficou CORTADO (o nao rolava na horizontal, entao o defeito nao se denunciava). Com `min-width: 0`, quem rola e o `.mk__corpo`, como nas outras tres. */ max-width: 100%; min-width: 0; /* 🚨 `.hero__container` da LP legada e `text-align: center`, e isso descia para dentro da tabela do pedido — coluna de dado centralizada e o oposto do que uma tela de sistema parece. O componente Astro nunca precisou disto porque nenhum pai dele centraliza. */ text-align: left; --fundo: #fbfaf8; --fundo-alt: #f5f4f2; --fundo-card: rgba(12, 18, 32, 0.03); --borda: #e7e5e4; --tinta: #0c1220; --tinta-2: #44403c; --tinta-3: #635c57; --marca-no-fundo: #c2410c; --verde-no-fundo: #047857; } [data-theme='dark'] .mk { --fundo: #050b1f; --fundo-alt: #0a1628; --fundo-card: rgba(255, 255, 255, 0.035); --borda: rgba(255, 255, 255, 0.09); --tinta: #ffffff; --tinta-2: #a8b5c8; --tinta-3: #7c8ca8; --marca-no-fundo: #ff6b35; --verde-no-fundo: #34d399; } .mk { margin: 0; display: flex; flex-direction: column; gap: 0.65rem; } .mk__janela { border: 1px solid var(--borda); border-radius: 14px; background: var(--fundo-alt); overflow: hidden; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22); } .mk__barra { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--borda); background: var(--fundo-card); } .mk__ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-3); opacity: 0.5; flex: none; } .mk__caminho { margin-left: 0.6rem; font-size: 0.72rem; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk__corpo { display: flex; /* 📐 regra 5: a janela e larga; quem rola e ela, nunca o . */ overflow-x: auto; } .mk__lat { flex: none; width: 46px; padding: 0.85rem 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; border-right: 1px solid var(--borda); background: var(--fundo); } .mk__lat-marca { width: 18px; height: 18px; border-radius: 5px; background: var(--marca-no-fundo); margin-bottom: 0.35rem; } .mk__lat-i { width: 18px; height: 5px; border-radius: 3px; background: var(--tinta-3); opacity: 0.35; } .mk__lat-i--on { opacity: 1; background: var(--marca-no-fundo); } .mk__tela { flex: 1; min-width: 460px; padding: 0.95rem 1.1rem 1.1rem; } .mk__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .mk__h { display: block; font-size: 0.95rem; color: var(--tinta); } .mk__sub { font-size: 0.74rem; color: var(--tinta-3); } .mk__fraco { color: var(--tinta-3); font-size: 0.74rem; } .mk__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.85rem; } .mk__kpi { border: 1px solid var(--borda); border-radius: 9px; padding: 0.55rem 0.65rem; background: var(--fundo-card); } .mk__kpi-r { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-3); } .mk__kpi-v { font-size: 0.98rem; color: var(--tinta); } .mk__kpi-v--ok { color: var(--verde-no-fundo); } .mk__tab { width: 100%; border-collapse: collapse; font-size: 0.76rem; } .mk__tab th { text-align: left; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-3); font-weight: 700; padding: 0 0.5rem 0.45rem 0; border-bottom: 1px solid var(--borda); } .mk__tab td { padding: 0.42rem 0.5rem 0.42rem 0; border-bottom: 1px solid var(--borda); color: var(--tinta-2); white-space: nowrap; } .mk__tab td strong { color: var(--tinta); } .mk__risc { text-decoration: line-through; opacity: 0.55; } .mk__delta { color: var(--tinta-3); font-weight: 700; } .mk__delta--ok { color: var(--verde-no-fundo); } .mk__delta--al { color: var(--marca-no-fundo); } .mk__chip { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 5px; border: 1px solid var(--borda); font-size: 0.68rem; color: var(--tinta-2); white-space: nowrap; } .mk__tag { flex: none; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; border: 1px solid var(--borda); color: var(--tinta-2); white-space: nowrap; } .mk__tag--ok { color: var(--verde-no-fundo); border-color: currentColor; } .mk__tag--al { color: var(--marca-no-fundo); border-color: currentColor; } .mk__lista, .mk__trilha { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .mk__item, .mk__trecho { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--borda); border-radius: 9px; background: var(--fundo-card); font-size: 0.78rem; } /* Cara de documento: o retangulo vazio lia como caixa de selecao. As duas "linhas de texto" saem de gradiente, nao de imagem (regra 1). */ .mk__item-ic { flex: none; width: 22px; height: 26px; border-radius: 3px; border: 1px solid var(--borda); background: linear-gradient(var(--tinta-3), var(--tinta-3)) 4px 8px / 13px 2px no-repeat, linear-gradient(var(--tinta-3), var(--tinta-3)) 4px 13px / 13px 2px no-repeat, linear-gradient(var(--tinta-3), var(--tinta-3)) 4px 18px / 8px 2px no-repeat, var(--fundo); } .mk__item-tx, .mk__trecho-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; } .mk__item-tx strong, .mk__trecho-tx strong { color: var(--tinta); font-size: 0.8rem; } .mk__trecho-pt { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--marca-no-fundo); } .mk__trecho-v { flex: none; font-weight: 700; color: var(--tinta); } .mk__rodape { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.7rem; } .mk__graf { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--borda); } .mk__graf-r { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-3); margin-bottom: 0.4rem; } .mk__barras { display: flex; align-items: flex-end; gap: 6px; height: 62px; border-bottom: 1px solid var(--borda); /* 12 barras nao preenchem ~980px sem engordar. A serie ocupa a largura que ela precisa e a linha de base termina COM ela — senao sobra meia regua vazia parecendo grafico cortado. 🚨 `max-width: max-content` some: barra e um VAZIO com `min-width: 0`, entao a contribuicao max-content dela e ZERO e o grafico inteiro colapsa. Largura explicita (12 x 34 + 11 x 6) com `max-width: 100%` para encolher junto quando a janela aperta. */ width: 474px; max-width: 100%; } /* ⚠️ `flex: 1` deixava 12 barras dividirem ~980px — 78px cada, e a serie lia como fileira de blocos. A largura da BARRA e que e travada; ela encolhe sozinha quando a janela aperta. 🎨 regra 3: a cor sai de token — hex fixo some no tema claro, do mesmo jeito que o header sumiu. */ .mk__b { flex: 1 1 0; min-width: 0; border-radius: 3px 3px 0 0; background: var(--tinta-3); opacity: 0.35; } .mk__b--pos { background: var(--marca-no-fundo); opacity: 1; } .mk__cap { font-size: 0.76rem; color: var(--tinta-2); line-height: 1.5; } .mk__cap-nb { color: var(--tinta-3); } /* Hero de faixa ESCURA fixa (`ponto-eletronico.html`, `atesta.html`): essas duas LPs nao carimbam `data-theme`, entao a janela fica na paleta clara — e isso esta CERTO, janela branca sobre faixa escura e exatamente a leitura de "software rodando". O que quebrava era so a LEGENDA, que herda `--tinta-2` escuro e sumia no fundo escuro (medido: ilegivel nas duas). ⛔ Nao inverter os tokens no `.mk` inteiro — isso escureceria a janela junto e desfaria o efeito. Inverte a legenda, e so ela. */ .mk--faixa-escura .mk__cap { color: rgba(255, 255, 255, 0.82); } .mk--faixa-escura .mk__cap-nb { color: rgba(255, 255, 255, 0.55); } .mk--compacto .mk__tela { min-width: 380px; padding: 0.8rem 0.9rem 0.9rem; } .mk--compacto .mk__kpis { gap: 0.35rem; } @media (max-width: 600px) { .mk__kpis { grid-template-columns: 1fr; } } /* ── Respiro nos dois pontos de insercao ─────────────────────────────────── `.hero__tela` e o invólucro que as LPs de Ponto e Atesta usam para pendurar a janela no fim do hero; na pagina-pilar de Roteirizacao a janela entra direto no corpo do artigo, depois do paragrafo de abertura. */ .hero__tela { margin-top: 2.25rem; } .article-body .mk { margin: 2rem 0 2.25rem; } /* ── LP do VT: o hero legado e uma coluna flex de 800px ──────────────────── A tela do produto nao cabe nesse cap — ela e uma JANELA de sistema, e a 752px a tabela do pedido fica ilegivel. So o container abre; a coluna de texto continua presa em 800px, que e a medida de leitura. `:has` mantem a regra inerte nas LPs que nao tem mockup. 🚨 E o `min-width: 0` abaixo nao e enfeite: medido a 375px, `.hero__image` e item flex e item flex nasce com `min-width: auto`. A janela inchou para 557px num viewport de 375, e como `.hero` e `overflow: hidden` o excedente ficou CORTADO em silencio — o nao rolava, entao nada denunciava. */ .hero__container:has(.mk) { max-width: 1140px; } .hero__container:has(.mk) .hero__content { max-width: 800px; } .hero__container:has(.mk) .hero__image { min-width: 0; max-width: 100%; width: 100%; }