@charset "UTF-8";
/* ============================================================================
   GESTORCAR — recriações animadas dos painéis do produto

   ORIGEM: /Users/dev1-mac-mini-m2-cdw/handoff (index.html), os protótipos de
   motion apontados pelas anotações de Dev Mode do Figma. Este arquivo é
   GERADO a partir daquele stylesheet — não edite regra por regra aqui sem
   antes conferir o handoff, senão as duas fontes divergem.

   ESCOPO: todo seletor foi prefixado com `.lp-mock`. As classes do protótipo
   são genéricas demais (.app, .card, .row, .sidebar) e colidiriam com o
   design system da landing e com o Bootstrap das páginas internas. O que era
   `:root`/`body` no protótipo virou o próprio `.lp-mock`, então as custom
   properties continuam resolvendo dentro do painel.

   Carregado só na home, e depois do lp.css.
   ========================================================================= */

.lp-mock {
    /* tokens da landing page (DESIGN.md), pra coluna de texto — os valores
       de --lp-ink/--lp-ink-muted/--lp-ink-faint originais eram claros
       (pensados pra fundo escuro, --lp-void, que nunca chegou a ser usado
       como background de nenhuma seção); o body real é branco (#fff), então
       ficavam quase invisíveis (texto quase branco em fundo branco) — trocado
       pelos tons escuros que o resto do arquivo já usa (--ink/--ink-muted). */
    --lp-void:#101211;
    --lp-ink:#212529;
    --lp-ink-muted:#5b6169;
    --lp-ink-faint:#8a9099;
    --lp-accent:#0be96a;
    --lp-line:rgba(0,0,0,.09);
    --font-display:'Archivo',Arial Black,sans-serif;
    --font-lp-body:'IBM Plex Sans',system-ui,sans-serif;
    --font-mono:'IBM Plex Mono',SFMono-Regular,monospace;

    /* valores extraídos ao vivo de novo.gestorcar.com.br/veiculos via getComputedStyle, não aproximados */
    --sidebar-bg:#293042;         /* nav.sidebar background-color real */
    --sidebar-active:#09e968;     /* .sidebar-link ativo — bate quase exato com o accent do DESIGN.md (#0be96a) */
    --sidebar-text:rgba(233,236,239,.5);
    --sidebar-text-active:#333333;
    --content-bg:#f7f9fc;         /* body background-color real */
    --card-bg:#ffffff;
    --card-shadow:0 0 14px 0 rgba(41,48,66,.05); /* box-shadow real do .card, não border */
    --ink:#212529;
    --ink-muted:#6c757d;          /* body color real */
    --ink-faint:#9aa0a6;
    --btn-primary:#3f80ea;        /* .btn-primary real: é AZUL, não verde */
    --btn-dark:#495057;           /* botão "AÇÕES" real */
    --status-success:#4bbf73;     /* .text-success real */
    --status-warning:#e5a54b;     /* .text-warning real */
    --status-danger:#d9534f;      /* .text-danger real */
    --status-grey:#6c757d;        /* .text-grey real */
    --line:#e9ecef;
    --ease-out:cubic-bezier(0.23,1,0.32,1);
    --ease-inout:cubic-bezier(0.65,0,0.35,1); /* só pro movimento do cursor: começa e termina suave */
    --font-body:'Space Grotesk',-apple-system,'system-ui','Segoe UI','Helvetica Neue',Arial,sans-serif; /* fonte real do produto */
  }

.lp-mock * {box-sizing:border-box;}

.lp-mock {
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }

.lp-mock .note {
    max-width:900px;
    margin:0 auto;
    padding:16px 20px;
    background:#181b19;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    font-size:13px;
    color:#a6ada7;
    line-height:1.6;
  }

.lp-mock .note strong {color:#f3f5f2;}

.lp-mock .wrap-outer {padding:40px 20px 120px;}
/* ---- Módulo: só o painel (interface real), centralizado — a coluna de
     texto da landing page foi removida a pedido do usuário. */
/* [descartado: layout de seção do protótipo] .module */
/* ---- Recriação fiel do painel real ----
     .app tem tamanho NATURAL fixo (não max-width) — quem encolhe de verdade é o
     .app-scale-wrap por fora, via aspect-ratio; o .app é escalado com transform
     pra dentro dele, então tudo (texto, ícone, tabela) encolhe junto, na mesma
     proporção, em vez de só a largura reduzir com a altura travada. */
/* sombra vai em filter:drop-shadow no wrap, não em box-shadow no .app — o
     .app tem overflow:hidden (recorte do conteúdo real) e um box-shadow nele
     seria cortado pelo próprio overflow; drop-shadow não sofre esse corte. */

.lp-mock .app-scale-wrap {position:relative;width:100%;margin:0 auto;overflow:hidden;border-radius:12px;filter:drop-shadow(0 2px 8px rgba(16,24,40,.06)) drop-shadow(0 24px 48px rgba(16,24,40,.14));}

.lp-mock .app-scale-wrap .app {position:absolute;top:0;left:0;transform-origin:top left;}

.lp-mock .app {
    width:890px;
    height:560px; /* altura fixa e compartilhada pelos dois módulos — mais baixa que antes (era 650px) */
    margin:0;
    border-radius:12px;
    overflow:hidden;
    font-size:12.5px;
  }
/* módulo 2 lista TODOS os portais integrados — de propósito é mais alto que o frame,
     e o overflow:hidden do .app corta o resto, dando a impressão de que tem muito mais
     opção do que cabe na tela (os portais que o loop de fato usa ficam nas primeiras
     linhas, sempre visíveis; os que só aparecem cortados embaixo são decorativos). */
/* .app-inner é o alvo do zoom de câmera: escala e recorta dentro da moldura fixa do .app,
     igual a um player de vídeo dando zoom num quadro fixo. Cursor e modal ficam FORA dela,
     de propósito, pra não escalar junto e continuarem legíveis em qualquer nível de zoom. */

.lp-mock .app-inner {
    display:grid;
    grid-template-columns:64px 1fr; /* sidebar colapsada em ícones — mais espaço pro conteúdo real */
    grid-template-rows:minmax(0,1fr); /* faz a linha esticar até min-height, não só até o conteúdo */
    min-height:560px; /* piso — a altura visível de verdade é travada pelo .app (560px) */
    transform:scale(1);
    transform-origin:50% 50%;
    /* mesma duração do glide do cursor no botão Entrada (900ms), pra andarem juntos, acompanhando */
    transition:transform 900ms var(--ease-inout);
    will-change:transform;
  }
/* módulo 2 também anima transform-origin — a câmera faz pan entre portais com o zoom
     ligado, em vez de sempre voltar pro zoom(1) entre um alvo e outro */

.lp-mock #app-inner2 {transition:transform 700ms var(--ease-inout), transform-origin 700ms var(--ease-inout);}

.lp-mock .sidebar {
    background:var(--sidebar-bg);
    color:var(--sidebar-text);
    padding:16px 0 12px;
    display:flex;flex-direction:column;align-items:center;
  }
/* rail colapsado: os labels de seção viram um divisor fino, sem texto */

.lp-mock .side-label {
    width:30px;height:1px;background:rgba(255,255,255,.1);
    margin:10px 0;padding:0;font-size:0;overflow:hidden;
  }

.lp-mock .side-item {
    display:flex;align-items:center;justify-content:center;
    width:40px;height:36px;margin:0 0 4px;
    border-radius:8px;
    font-size:0;   /* colapsa o texto do item — só o ícone (com font-size próprio) fica visível */
    color:var(--sidebar-text);
  }

.lp-mock .side-item i {font-size:17px;width:auto;text-align:center;opacity:.85;flex-shrink:0;}

.lp-mock .side-item i.side-chevron {display:none;}
/* indicador de submenu não faz sentido sem o texto do item */

.lp-mock .sidebar-mark {width:28px;height:auto;display:block;margin:2px 0 16px;flex-shrink:0;}

.lp-mock .side-item.active {background:var(--sidebar-active);color:var(--sidebar-text-active);font-weight:600;}

.lp-mock .side-item.active i {opacity:1;}

.lp-mock .main {background:var(--content-bg);}

.lp-mock .topbar {
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);
    font-size:12.5px;color:var(--ink-muted);
  }

.lp-mock .topbar-left {display:flex;align-items:center;gap:14px;}

.lp-mock .topbar-left i.mdi-menu {font-size:18px;color:var(--ink-muted);}

.lp-mock .topbar-right {display:flex;align-items:center;gap:14px;}

.lp-mock .whatsapp-pill {
    background:var(--sidebar-active);color:#0f1411;font-weight:600;
    padding:6px 14px;border-radius:6px;font-size:11.5px;
    display:inline-flex;align-items:center;gap:6px;
  }

.lp-mock .whatsapp-pill i {font-size:14px;}

.lp-mock .icon-btn {font-size:16px;color:var(--ink-faint);position:relative;}

.lp-mock .icon-btn .badge-dot {position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:999px;background:var(--status-danger);}
/* badge numérico do sino — extraído ao vivo de novo.gestorcar.com.br
     (.indicator: 18x18, #e30e0e, texto branco) */

.lp-mock .icon-btn .badge-count {
    position:absolute;top:-5px;right:-7px;min-width:16px;height:16px;
    border-radius:999px;background:#e30e0e;color:#fff;
    font-size:9.5px;font-weight:600;line-height:16px;text-align:center;padding:0 2px;
  }

.lp-mock .avatar-group {display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-muted);}

.lp-mock .avatar {width:24px;height:24px;border-radius:999px;background:#d7d9dc;object-fit:cover;flex-shrink:0;}

.lp-mock .content-inner {padding:22px 20px;}

.lp-mock .page-title {font-size:19px;font-weight:700;margin:0 0 2px;color:var(--ink);}

.lp-mock .page-sub {font-size:12.5px;color:var(--ink-muted);margin:0 0 18px;}

.lp-mock .new-btn {
    background:var(--btn-primary);color:#fff;font-weight:400;font-size:12.5px;
    border-radius:3px;padding:7px 18px;display:inline-flex;align-items:center;gap:6px;
  }
/* botões-fantasma do topo (Relatórios / Fotos / Vendidos) — extraídos ao vivo da página real */

.lp-mock .top-actions {display:flex;gap:8px;flex-wrap:wrap;}

.lp-mock .ghost-btn {
    font-size:11.5px;font-weight:400;border-radius:3px;padding:6.5px 12px;
    display:inline-flex;align-items:center;gap:5px;background:transparent;
  }

.lp-mock .ghost-btn.secondary {color:var(--btn-dark);border:1px solid var(--btn-dark);}

.lp-mock .ghost-btn.outline-primary {color:var(--btn-primary);border:1px solid var(--btn-primary);}

.lp-mock .ghost-btn .mdi-chevron-down {font-size:11px;opacity:.7;}
/* card "Buscar no estoque" — label + input-group + botão Filtrar, igual ao painel real */

.lp-mock .search-card {background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:4px;padding:16px 18px;margin-bottom:14px;}

.lp-mock .search-label {font-size:12.5px;color:var(--ink-muted);margin-bottom:8px;}

.lp-mock .search-row {display:flex;gap:10px;}

.lp-mock .search-input-group {flex:1;display:flex;align-items:stretch;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff;}

.lp-mock .search-icon {display:flex;align-items:center;padding:0 11px;color:var(--ink-faint);background:var(--content-bg);border-right:1px solid var(--line);font-size:14px;}

.lp-mock .search-input-group input {border:none;outline:none;flex:1;padding:0 11px;font-size:12px;font-family:inherit;color:var(--ink);background:transparent;}

.lp-mock .search-input-group input::placeholder {color:var(--ink-faint);}

.lp-mock .filter-btn {
    background:var(--btn-primary);color:#fff;font-size:12px;border-radius:3px;padding:0 16px;
    display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  }
/* legenda de status de publicação — bolinhas coloridas, igual ao painel real */

.lp-mock .legend-row {display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;font-size:11.5px;color:var(--ink-muted);}

.lp-mock .legend-title {font-weight:600;color:var(--ink-muted);}

.lp-mock .legend-item {display:inline-flex;align-items:center;gap:6px;}

.lp-mock .legend-item i {font-size:8px;}
/* barra Ordenação + toggle "mostrar imagem", acima da tabela */

.lp-mock .table-toolbar {display:flex;align-items:center;gap:14px;margin-bottom:10px;}

.lp-mock .sort-btn {
    background:var(--btn-dark);color:#fff;font-size:11.5px;border-radius:3px;padding:6.5px 12px;
    display:inline-flex;align-items:center;gap:5px;
  }

.lp-mock .toggle-row {display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-muted);}

.lp-mock .toggle-track {width:32px;height:18px;border-radius:999px;background:#dbdfe3;position:relative;flex-shrink:0;}

.lp-mock .toggle-track::after {content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);}

.lp-mock .kpi-row {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}

.lp-mock .kpi-card {
    background:var(--card-bg);border:none;border-radius:4px;
    box-shadow:var(--card-shadow);
    padding:14px 16px;
    display:flex;justify-content:space-between;align-items:flex-start;
  }

.lp-mock .kpi-label {font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;}

.lp-mock .kpi-value {font-size:20px;font-weight:700;color:var(--ink);}

.lp-mock .kpi-value small {font-size:12px;font-weight:400;color:var(--ink-faint);}

.lp-mock .kpi-value .kpi-good {display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--ink-muted);margin-left:2px;}

.lp-mock .kpi-value .kpi-good i {color:var(--btn-primary);font-size:13px;}

.lp-mock .kpi-bar {height:4px;border-radius:999px;background:#eee;margin-top:8px;overflow:hidden;}

.lp-mock .kpi-fill {
    display:block;height:100%;width:100%;background:var(--status-success);border-radius:999px;
    transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease-out);
  }

.lp-mock .kpi-icon {
    width:34px;height:34px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
  }

.lp-mock .kpi-icon.primary {background:rgba(63,128,234,.12);color:var(--btn-primary);}

.lp-mock .kpi-icon.warning {background:rgba(229,165,75,.14);color:var(--status-warning);}

.lp-mock .kpi-icon.success {background:rgba(75,191,115,.14);color:var(--status-success);}

.lp-mock .kpi-icon.danger {background:rgba(217,83,79,.12);color:var(--status-danger);}

.lp-mock .table-card {background:var(--card-bg);border:none;box-shadow:var(--card-shadow);border-radius:4px;overflow:hidden;}

.lp-mock table {width:100%;border-collapse:collapse;}

.lp-mock thead th {
    text-align:left;font-size:12.5px;
    color:var(--ink-muted);padding:9px 12px;border-bottom:1px solid var(--line);
    background:transparent;font-weight:400;
  }

.lp-mock tbody td {padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink);}

.lp-mock tbody tr:last-child td {border-bottom:none;}

.lp-mock .row-anim {
    opacity:0;transform:translateY(14px);
    transition:opacity 400ms var(--ease-out), transform 400ms var(--ease-out), background-color 450ms var(--ease-out);
  }

.lp-mock .row-anim.in-view {opacity:1;transform:translateY(0);}

.lp-mock .photo-chip {
    width:34px;height:24px;border-radius:3px;
    background:linear-gradient(135deg,#d8dadd,#c3c6cb);
    display:inline-flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.75);font-size:12px;
  }

.lp-mock .type-icon {color:var(--ink-faint);font-size:15px;margin-right:2px;}

.lp-mock .plate {font-family:'SFMono-Regular',Consolas,monospace;font-size:11.5px;color:var(--ink-muted);}

.lp-mock .price {font-weight:600;}

.lp-mock .status-dot {font-size:8px;color:var(--status-success);transition:color 400ms var(--ease-out);}

.lp-mock .status-dot.pending {color:var(--status-grey);opacity:.5;}

.lp-mock .status-dot.warn {color:var(--status-warning);opacity:1;}

.lp-mock .action-btn {
    font-size:11px;font-weight:600;color:#fff;background:var(--btn-dark);
    border-radius:1.6px;padding:4px 10px 4px 12px;display:inline-flex;align-items:center;gap:5px;
  }

.lp-mock .kpi-value .num {font-variant-numeric:tabular-nums;}

.lp-mock .metric-badge {
    display:flex;align-items:center;gap:8px;margin-top:3px;
    font-size:10px;color:var(--ink-faint);
    opacity:0;transform:translateY(4px);
    transition:opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
  }

.lp-mock .metric-badge.in-view {opacity:1;transform:translateY(0);}

.lp-mock .metric-badge span {display:inline-flex;align-items:center;gap:3px;}

.lp-mock .metric-badge i {font-size:11px;}
/* ---- Loop de demonstração: estágio de telas + cursor falso ---- */

.lp-mock .view-stage {position:relative;min-height:330px;}

.lp-mock .view {
    position:absolute;inset:0;
    opacity:0;pointer-events:none;
    transform:scale(.97);
    transition:opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
  }

.lp-mock .view.active {position:relative;opacity:1;pointer-events:auto;transform:scale(1);}

.lp-mock .row-hover {background:rgba(63,128,234,.06);}

.lp-mock .fake-cursor {
    position:absolute;top:20px;left:20px;
    font-size:20px;color:#1c1f23;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
    opacity:0;z-index:50;pointer-events:none; /* acima do modal-overlay (40), pra nunca ficar por baixo do popup */
    /* posição é controlada via JS (glideCursorTo, curva + duração por distância) —
       aqui só fica a transição de opacidade e o pulso de clique */
    transition:opacity 450ms var(--ease-out);
  }

.lp-mock .fake-cursor.visible {opacity:1;}

.lp-mock .fake-cursor.clicking {transform:scale(.86) translateY(1px);transition:opacity 450ms var(--ease-out), transform 130ms var(--ease-out);}

.lp-mock .click-ripple {
    position:absolute;width:26px;height:26px;border-radius:999px;
    background:rgba(63,128,234,.35);
    transform:translate(-50%,-50%) scale(0);
    opacity:0;pointer-events:none;z-index:51; /* junto do cursor, também acima do modal */
    animation:rippleOut 800ms var(--ease-out) forwards;
  }

@keyframes rippleOut {
    0%{transform:translate(-50%,-50%) scale(.2);opacity:.8;}
    100%{transform:translate(-50%,-50%) scale(2.6);opacity:0;}
  }

.lp-mock .back-btn {
    font-size:10.5px;font-weight:600;color:var(--ink-muted);border:1px solid var(--line);
    border-radius:3px;padding:6px 12px;display:inline-flex;align-items:center;gap:5px;
    text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;
  }

.lp-mock .info-card {display:flex;gap:18px;margin-top:16px;background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:4px;padding:16px;}

.lp-mock .info-photo-col {display:flex;flex-direction:column;gap:0;flex-shrink:0;width:160px;}

.lp-mock .profile-title {text-transform:uppercase;}

.lp-mock .profile-photo {
    width:160px;height:112px;flex-shrink:0;border-radius:4px;background:#eceef1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    color:#b7bbc0;font-size:10.5px;text-align:center;margin-bottom:8px;
  }

.lp-mock .profile-photo i {font-size:28px;}
/* nome da marca + modelo, repetido aqui igual à página real (mesmo já
     aparecendo no <h1> lá em cima) — fica logo acima do botão Editar. */

.lp-mock .profile-brand {font-size:12.5px;font-weight:700;color:var(--ink);margin-top:2px;}

.lp-mock .profile-model {font-size:10.5px;color:var(--ink-muted);line-height:1.35;margin:2px 0 8px;}
/* estado vazio do painel RENAVE — extraído ao vivo da página real
     ("Nenhuma operação RENAVE para este veículo."), some quando uma
     operação é registrada, junto com o badge. */

.lp-mock .renave-empty {
    margin-top:12px;padding:10px 12px;background:var(--content-bg);border-radius:3px;
    font-size:11px;color:var(--ink-faint);text-align:center;
    transition:opacity 300ms var(--ease-out), max-height 300ms var(--ease-out), margin-top 300ms var(--ease-out), padding 300ms var(--ease-out);
    overflow:hidden;max-height:40px;
  }

.lp-mock .renave-empty.gone {opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;}

.lp-mock .info-list {flex:1;display:grid;grid-template-columns:repeat(3,1fr);}

.lp-mock .info-list div {
    padding:0 14px 10px 0;
    border-bottom:1px solid var(--line);
    display:flex;flex-direction:column;font-size:11.5px;
  }

.lp-mock .info-list span {color:var(--ink-faint);font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;}

.lp-mock .info-list strong {color:var(--ink);font-weight:600;}

.lp-mock .renave-panel {
    background:var(--card-bg);border:none;box-shadow:var(--card-shadow);border-radius:4px;
    padding:16px 18px;
  }

.lp-mock .renave-panel-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}

.lp-mock .renave-panel-title {
    font-size:10px;letter-spacing:.04em;color:var(--ink-faint);
    display:flex;align-items:center;gap:6px;
  }

.lp-mock .renave-fields {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}

.lp-mock .renave-fields div {display:flex;flex-direction:column;font-size:11px;}

.lp-mock .renave-fields > div > span {color:var(--ink-faint);font-size:9.5px;text-transform:uppercase;margin-bottom:4px;}

.lp-mock .renave-badge {
    display:inline-block;width:fit-content;font-size:10.5px;font-weight:600;
    padding:3px 8px;border-radius:3px;
    background:#e9ecef;color:#495057;
    transition:background-color 600ms var(--ease-out), color 600ms var(--ease-out);
  }

.lp-mock .renave-badge.homolog {background:rgba(63,128,234,.12);color:var(--btn-primary);}

.lp-mock .renave-badge.registered {background:rgba(75,191,115,.15);color:var(--status-success);}

.lp-mock .renave-badge.pop {animation:badgePop 550ms var(--ease-out);}

@keyframes badgePop {
    0%{transform:scale(1);}
    35%{transform:scale(1.22);}
    100%{transform:scale(1);}
  }

.lp-mock .renave-actions {display:flex;gap:8px;}

.lp-mock .renave-btn {
    font-size:10.5px;font-weight:600;color:#fff;background:var(--btn-primary);
    border-radius:3px;padding:7px 14px;display:inline-flex;align-items:center;gap:5px;
    text-transform:uppercase;letter-spacing:.03em;
    transition:transform 150ms var(--ease-out);
  }

.lp-mock .renave-btn.ghost {background:transparent;color:var(--ink-muted);border:1px solid var(--line);}

.lp-mock .renave-btn.small {padding:5px 10px;font-size:9.5px;}

.lp-mock .back-btn {transition:transform 150ms var(--ease-out), background-color 250ms var(--ease-out);}

.lp-mock .pressed {transform:scale(.94);}

.lp-mock .radio-dot.pressed {transform:scale(.85);}
/* ---- Modal "Entrada por compra" ---- */

.lp-mock .modal-overlay {
    position:absolute;inset:0;z-index:40;
    background:rgba(20,23,26,.5);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity 450ms var(--ease-out);
  }

.lp-mock .modal-overlay.active {opacity:1;pointer-events:auto;}

.lp-mock .modal-card {
    background:#fff;border-radius:6px;width:min(480px,88%);max-height:82%;overflow:auto;
    padding:18px 20px;box-shadow:0 24px 60px rgba(0,0,0,.35);
    transform:scale(.96) translateY(6px);
    transition:transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
  }

.lp-mock .modal-overlay.active .modal-card {transform:scale(1) translateY(0);}
/* zoom leve durante o preenchimento, pra destacar e centralizar mais o popup */

.lp-mock .modal-overlay.active .modal-card.emphasize {
    transform:scale(1.045) translateY(0);
    box-shadow:0 30px 70px rgba(0,0,0,.42);
  }

.lp-mock .modal-header {
    display:flex;justify-content:space-between;align-items:center;
    font-size:13px;font-weight:600;color:var(--ink);margin-bottom:16px;
  }

.lp-mock .modal-header i:last-child {color:var(--ink-faint);font-size:16px;}

.lp-mock .form-label-top {font-size:10.5px;color:var(--ink-muted);margin-bottom:8px;}

.lp-mock .radio-row {display:flex;gap:22px;margin-bottom:16px;flex-wrap:wrap;}

.lp-mock .radio-row label {display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink);}

.lp-mock .radio-dot {width:14px;height:14px;border-radius:999px;border:1.5px solid #c7cbd1;flex-shrink:0;position:relative;transition:border-color 300ms var(--ease-out), transform 150ms var(--ease-out);}

.lp-mock .radio-dot.checked {border-color:var(--btn-primary);}

.lp-mock .radio-dot::after {content:'';position:absolute;inset:2.5px;border-radius:999px;background:var(--btn-primary);opacity:0;transform:scale(.4);transition:opacity 250ms var(--ease-out), transform 250ms var(--ease-out);}

.lp-mock .radio-dot.checked::after {opacity:1;transform:scale(1);}

.lp-mock .field-row {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px;}

.lp-mock .field {display:flex;flex-direction:column;gap:5px;}

.lp-mock .field label {font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;}

.lp-mock .field input {
    border:1px solid var(--line);border-radius:3px;padding:7px 9px;
    font-size:11px;font-family:inherit;color:var(--ink);background:#fff;
    transition:border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
  }

.lp-mock .field input.field-active {border-color:var(--btn-primary);box-shadow:0 0 0 3px rgba(63,128,234,.15);}

.lp-mock .form-section-label {
    font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;
    margin:14px 0 10px;padding-top:12px;border-top:1px solid var(--line);
  }

.lp-mock .modal-footer {display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
/* ---- Módulo 2: Multi-Anúncio — card do veículo + grade de portais com toggle próprio ---- */

.lp-mock .publish-card {
    background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:4px;
    padding:14px 16px;display:flex;align-items:center;gap:12px;
  }

.lp-mock .publish-car-name {font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px;}

.lp-mock .publish-types {display:flex;gap:7px;color:var(--ink-faint);font-size:14px;}

.lp-mock .portal-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}

.lp-mock .portal-tile {
    background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:4px;
    padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
    opacity:0;transform:translateY(12px);
    transition:opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  }

.lp-mock .portal-tile.in-view {opacity:1;transform:translateY(0);}

.lp-mock .portal-tile-mark {
    width:100%;max-width:112px;height:34px;object-fit:contain;
  }

.lp-mock .portal-tile-name {font-size:9.5px;font-weight:600;color:var(--ink-muted);letter-spacing:.01em;}

.lp-mock .portal-tile.pop {animation:tilePop 500ms var(--ease-out);}

@keyframes tilePop {0%{transform:scale(1);}35%{transform:scale(1.07);}100%{transform:scale(1);}}
/* toggle por portal — mesmo desenho do "Mostrar imagem" do módulo 1, agora animado */

.lp-mock .portal-toggle {display:flex;align-items:center;gap:6px;font-size:8.5px;color:var(--status-grey);}

.lp-mock .toggle-track {transition:background-color 300ms var(--ease-out);}

.lp-mock .toggle-track::after {transition:left 300ms var(--ease-out);}

.lp-mock .portal-tile.active .portal-toggle {color:var(--status-success);}

.lp-mock .portal-tile.active .toggle-track {background:var(--status-success);}

.lp-mock .portal-tile.active .toggle-track::after {left:16px;}
/* ---- Módulo 3: Kanban de leads — só o painel full-width ---- */
/* [descartado: layout de seção do protótipo] .module-kanban */

.lp-mock .module-kanban .app {width:1320px;height:636px;}

.lp-mock .module-kanban .app-scale-wrap {max-width:1320px;aspect-ratio:1320/636;}

.lp-mock .module .app-scale-wrap, .lp-mock .module.reverse .app-scale-wrap {max-width:890px;aspect-ratio:890/560;}
/* sem sidebar nem topbar aqui de propósito — o painel é full-width só pra dar foco
     total no quadro, então a grade de 2 colunas do .app-inner base não faz sentido */

.lp-mock .module-kanban .app-inner {grid-template-columns:1fr;min-height:636px;}

.lp-mock .module-kanban .content-inner {padding:28px 32px 24px;height:100%;display:flex;flex-direction:column;}

.lp-mock .module-kanban .kanban-board {flex:1;}
/* extraídos ao vivo de novo.gestorcar.com.br/leads via getComputedStyle */

.lp-mock .kanban-board {display:flex;gap:24px;align-items:stretch;height:100%;}

.lp-mock .kanban-col {flex:1;min-width:0;display:flex;flex-direction:column;}

.lp-mock .kanban-col-card {
    background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:4px;
    padding:20px;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;
  }

.lp-mock .kanban-col-header {display:flex;align-items:center;justify-content:space-between;}

.lp-mock .kanban-col-title {font-size:15.5px;font-weight:600;color:#495057;margin:0;}

.lp-mock .kanban-col-count {
    font-size:11.52px;font-weight:500;color:#fff;border-radius:3.2px;
    padding:3.5px 6px;min-width:18px;text-align:center;
    transition:background-color 300ms var(--ease-out);
  }

.lp-mock .kanban-col-count.primary {background:var(--btn-primary);}

.lp-mock .kanban-col-count.warning {background:var(--status-warning);color:#293042;}

.lp-mock .kanban-col-count.success {background:var(--status-success);}

.lp-mock .kanban-col-count.pop {animation:tilePop 450ms var(--ease-out);}

.lp-mock .kanban-col-sub {font-size:11.52px;color:rgba(109,118,126,.75);margin:0 0 2px;}
/* as colunas Contato e Em negociação têm 1 card a mais de propósito — mais do
     que cabe — pra dar a mesma dica visual de "tem mais aqui embaixo" que a
     grade de portais do módulo 2, mesmo depois do arraste tirar um card de lá.
     max-height fixo (não flex:1) porque a cadeia de altura % até aqui não é
     definida — sem isso overflow:hidden não tem o que cortar. 415px deixa uns
     ~55px do 3º card à mostra: ~27px em opacidade cheia (a bordinha lê como
     card de verdade, não como um resto de pixel) antes do fade começar. */

.lp-mock .kanban-col-body {display:flex;flex-direction:column;gap:8px;position:relative;max-height:415px;overflow:hidden;}
/* disfarça o corte como uma opção de design, não um acidente — some por baixo do
     card seguinte em vez de parar em seco no meio dele */

.lp-mock .kanban-col-body::after {
    content:'';position:absolute;left:0;right:0;bottom:0;height:28px;
    background:linear-gradient(to bottom, rgba(255,255,255,0), var(--card-bg));
    pointer-events:none;
  }

.lp-mock .lead-card {
    background:var(--card-bg);border:1px solid #dee6ed;border-radius:4px;
    padding:14px 16px;box-shadow:none;
    opacity:0;transform:translateY(20px) scale(.98);
    transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out),
      box-shadow 200ms var(--ease-out);
  }

.lp-mock .lead-card.in-view {opacity:1;transform:translateY(0) scale(1);}

.lp-mock .lead-card.dragging {
    box-shadow:0 18px 30px rgba(41,48,66,.22);
    transform:scale(1.035) rotate(-1deg);
    position:absolute;z-index:30;transition:box-shadow 200ms var(--ease-out);
  }
/* clone translúcido do próprio card (não uma caixa vazia) — fica no lugar de
     origem enquanto o card real viaja, até o solto ser confirmado no destino */

.lp-mock .lead-card.lead-card-ghost {
    opacity:.4;pointer-events:none;
    transform:translateY(0) scale(1);
    transition:opacity 280ms var(--ease-out);
  }

.lp-mock .lead-card.lead-card-ghost.leaving {opacity:0;}

.lp-mock .lead-card-top {display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}

.lp-mock .lead-temp-icon {font-size:22px;color:var(--ink-muted);flex-shrink:0;margin-top:1px;}

.lp-mock .lead-name-row {display:flex;align-items:center;gap:7px;flex-wrap:wrap;}

.lp-mock .lead-name {font-size:13.5px;font-weight:500;color:#495057;}

.lp-mock .lead-date {font-size:11px;color:var(--ink-faint);font-weight:400;}

.lp-mock .lead-badge-novo {
    font-size:9.5px;font-weight:500;color:#fff;background:var(--status-success);
    border-radius:3.2px;padding:2px 5px;
    opacity:1;max-width:40px;overflow:hidden;white-space:nowrap;
    transition:opacity 300ms var(--ease-out), max-width 300ms var(--ease-out),
      padding 300ms var(--ease-out), margin 300ms var(--ease-out);
  }
/* some no drop — um lead que já saiu de "Contato" não é mais "Novo" */

.lp-mock .lead-badge-novo.novo-gone {opacity:0;max-width:0;padding-left:0;padding-right:0;margin:0;}

.lp-mock .lead-vehicle {display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-muted);margin-bottom:12px;}

.lp-mock .lead-vehicle i {font-size:13px;color:var(--ink-muted);flex-shrink:0;}

.lp-mock .lead-divider {border:none;border-top:1px solid #eef1f5;margin:0 0 12px;}

.lp-mock .lead-foot {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}

.lp-mock .lead-seller {display:flex;align-items:center;gap:8px;font-size:11.5px;color:#495057;}

.lp-mock .lead-avatar {
    width:22px;height:22px;border-radius:50%;background:#e4e7eb;flex-shrink:0;
    object-fit:cover;
  }

.lp-mock .lead-actions-row {display:flex;align-items:center;justify-content:space-between;margin-top:12px;}

.lp-mock .lead-btn {
    font-size:11px;font-weight:500;color:var(--btn-primary);border:1px solid var(--btn-primary);
    border-radius:1.6px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px;background:transparent;
  }

.lp-mock .lead-channel {display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-muted);}

.lp-mock .lead-channel i {font-size:15px;}

.lp-mock .lead-channel i.whatsapp {color:var(--status-success);}

.lp-mock .lead-channel i.site {color:var(--btn-primary);}
/* ---- Módulo 0: Dashboard — visão geral, só entrada, sem loop de ação.
     Extraído ao vivo de novo.gestorcar.com.br/ (Dashboard): esses cards usam
     um estilo mais novo/arredondado que o resto do produto (raio 16px, sombra
     em camadas), diferente do .card 4px das telas de Estoque/Leads — mantive
     a diferença de propósito, é assim que a tela real é. */
/* [descartado: layout de seção do protótipo] .module-dash */

.lp-mock .module-dash .app {width:1320px;height:748px;}

.lp-mock .module-dash .app-scale-wrap {max-width:1320px;aspect-ratio:1320/748;}

.lp-mock .module-dash .app-inner {grid-template-columns:64px 1fr;min-height:748px;}

.lp-mock .module-dash .content-inner {padding:26px 28px 24px;}
/* a última linha (Vendas/Integrações) fica cortada de propósito — mesma dica
     visual de "tem mais aqui embaixo" usada no resto do arquivo (grade de
     portais, colunas do kanban) — mais barato que deixar o frame bem alto */

.lp-mock .module-dash .app-scale-wrap::after {
    content:'';position:absolute;left:4.85%;right:0;bottom:0;height:7.35%;
    background:linear-gradient(to bottom, rgba(247,249,252,0), var(--content-bg));
    pointer-events:none;
  }

.lp-mock .dash-card {
    background:#fff;border-radius:16px;
    box-shadow:0 1px 2px 0 rgba(16,24,40,.04), 0 8px 24px 0 rgba(16,24,40,.06);
    border:1px solid rgba(31,39,51,.08);
  }

.lp-mock .dash-card.enter {opacity:0;transform:translateY(18px);transition:opacity 750ms var(--ease-out), transform 750ms var(--ease-out);}

.lp-mock .dash-card.enter.in-view {opacity:1;transform:translateY(0);}
/* seletor de período (Hoje/7 dias/30 dias) — extraído ao vivo de
     novo.gestorcar.com.br: .btn-group.dash-period real */

.lp-mock .dash-period {
    display:inline-flex;gap:2px;background:rgba(31,39,51,.05);
    border-radius:10px;padding:3px;flex-shrink:0;
  }

.lp-mock .dash-period-btn {
    background:transparent;color:#7a8699;font-size:13px;font-weight:600;
    border-radius:8px;padding:5px 14px;cursor:default;
    transition:background-color 150ms var(--ease-out), color 150ms var(--ease-out);
  }

.lp-mock .dash-period-btn.active {
    background:#fff;color:#4f7cff;box-shadow:0 1px 3px 0 rgba(16,24,40,.12);
  }

.lp-mock .dash-period-btn:not(.active):hover {background:rgba(255,255,255,.6);color:#495057;}

.lp-mock .dash-period-btn {cursor:pointer;}
/* troca de valor ao clicar no período — fade rápido no texto; o "pulso" de
     todos os cards (JS) já dá o feedback tátil do clique, então esse texto
     não precisa de um pop próprio também. Classe genérica: além do card de
     Leads, o donut de Vendas (valor central + legenda) também troca de
     verdade por período, então reaproveita o mesmo fade. */

.lp-mock .period-swap {transition:opacity 140ms var(--ease-out);}

.lp-mock .period-swap.swapping {opacity:0;}

.lp-mock .dash-kpi-row {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}

.lp-mock .dash-kpi-card {padding:16px 18px;display:flex;flex-direction:column;gap:10px;}

.lp-mock .dash-kpi-head {display:flex;align-items:flex-start;justify-content:space-between;}

.lp-mock .dash-kpi-label {font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7a8699;}

.lp-mock .dash-kpi-icon {
    width:32px;height:32px;border-radius:9px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:15px;
  }

.lp-mock .dash-kpi-icon.primary {background:rgba(63,128,234,.12);color:var(--btn-primary);}

.lp-mock .dash-kpi-icon.success {background:rgba(75,191,115,.14);color:var(--status-success);}

.lp-mock .dash-kpi-icon.danger {background:rgba(217,83,79,.12);color:var(--status-danger);}

.lp-mock .dash-kpi-value {font-size:28px;font-weight:700;color:var(--ink-muted);line-height:1;}

.lp-mock .dash-kpi-value .dash-kpi-sub {font-size:15px;font-weight:500;color:#7a8699;margin-left:2px;}

.lp-mock .dash-kpi-bar {height:5px;border-radius:999px;background:#eef0f3;margin-top:2px;overflow:hidden;}

.lp-mock .dash-kpi-fill {
    display:block;height:100%;width:100%;border-radius:999px;
    transform:scaleX(0);transform-origin:left;transition:transform 800ms var(--ease-out);
  }

.lp-mock .dash-kpi-fill.primary {background:var(--btn-primary);}

.lp-mock .dash-kpi-fill.success {background:var(--status-success);}

.lp-mock .dash-kpi-foot {font-size:11.5px;color:#7a8699;}

.lp-mock .dash-kpi-foot a {color:var(--btn-primary);font-weight:500;text-decoration:none;}

.lp-mock .dash-row {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}

.lp-mock .dash-section-card {padding:18px 20px;display:flex;flex-direction:column;gap:14px;}

.lp-mock .dash-section-label {font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7a8699;margin:0;}

.lp-mock .dash-section-title {font-size:15px;font-weight:700;color:#495057;margin:0;}

.lp-mock .dash-action-item {
    display:flex;align-items:center;gap:10px;padding:8px;margin:0 -8px;border-radius:8px;
    border-bottom:1px solid #f0f2f5;font-size:12.5px;color:var(--ink);
    transition:background-color 180ms var(--ease-out);
  }

.lp-mock .dash-action-item:last-child {border-bottom:none;}

.lp-mock .dash-action-icon {
    width:28px;height:28px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:13px;
    background:rgba(63,128,234,.1);color:var(--btn-primary);
  }

.lp-mock .dash-action-label {flex:1;font-weight:500;}

.lp-mock .dash-action-badge {
    font-size:10.5px;font-weight:600;color:#fff;border-radius:3.2px;padding:2px 6px;flex-shrink:0;
  }

.lp-mock .dash-action-badge.success {background:var(--status-success);}

.lp-mock .dash-action-badge.warning {background:var(--status-warning);color:#293042;}

.lp-mock .dash-action-badge.danger {background:var(--status-danger);}

.lp-mock .dash-action-chevron {color:#c3c9d1;font-size:15px;flex-shrink:0;}

.lp-mock .dash-stat-pair {display:flex;gap:10px;}

.lp-mock .dash-stat-box {
    flex:1;background:#f7f9fc;border-radius:10px;padding:12px;text-align:center;
  }

.lp-mock .dash-stat-box-value {font-size:19px;font-weight:700;color:var(--ink);}

.lp-mock .dash-stat-box-label {font-size:10px;color:var(--ink-muted);margin-top:2px;}

.lp-mock .dash-mini-list {display:flex;flex-direction:column;gap:8px;}

.lp-mock .dash-mini-row {display:flex;justify-content:space-between;font-size:12px;color:var(--ink-muted);}

.lp-mock .dash-mini-row strong {color:var(--ink);font-weight:600;}

.lp-mock .dash-table {width:100%;border-collapse:collapse;font-size:11.5px;}

.lp-mock .dash-table th {text-align:left;color:#9aa5b3;font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding-bottom:8px;}

.lp-mock .dash-table td {padding:6px 0;color:var(--ink-muted);border-top:1px solid #f0f2f5;}

.lp-mock .dash-table tr:first-child td {border-top:none;}

.lp-mock .dash-table td:not(:first-child) {text-align:right;color:var(--ink);font-weight:500;}
/* ---- Vendas + Integrações: os dois gráficos, extraídos ao vivo de uma conta
     com dados reais (SIDAO MULTIMARCAS) — no produto real são canvas/Chart.js,
     recriados aqui em SVG/CSS puro pra não puxar uma lib de gráfico só pra isso. */

.lp-mock .dash-row2 {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}

.lp-mock .dash-donut-wrap {display:flex;justify-content:center;padding:4px 0 8px;}

.lp-mock .dash-donut {position:relative;width:150px;height:150px;flex-shrink:0;}

.lp-mock .dash-donut svg {width:100%;height:100%;}

.lp-mock .dash-donut-center {
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
  }

.lp-mock .dash-donut-value {font-size:24px;font-weight:700;color:var(--ink);line-height:1;}

.lp-mock .dash-donut-label {font-size:9px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:3px;}

.lp-mock .dash-legend-dot {width:8px;height:8px;border-radius:999px;display:inline-block;margin-right:7px;flex-shrink:0;}

.lp-mock .dash-legend-dot.blue {background:var(--btn-primary);}

.lp-mock .dash-legend-dot.green {background:var(--status-success);}

.lp-mock .dash-legend-row {display:flex;align-items:center;font-size:12px;color:var(--ink);padding:5px 0;border-top:1px solid #f0f2f5;}

.lp-mock .dash-legend-row:first-child {border-top:none;}

.lp-mock .dash-legend-row .qty {margin-left:auto;margin-right:16px;color:var(--ink-muted);}

.lp-mock .dash-legend-row .pct {font-weight:600;color:var(--status-success);}

.lp-mock .dash-sync-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}

.lp-mock .dash-sync-badge {
    font-size:10px;font-weight:600;color:#fff;background:var(--status-success);
    border-radius:3.2px;padding:2.5px 7px;
  }

.lp-mock .dash-sync-overall {height:6px;border-radius:999px;background:#eef0f3;overflow:hidden;margin-bottom:16px;}

.lp-mock .dash-sync-overall-fill {
    height:100%;background:var(--status-success);border-radius:999px;
    transform:scaleX(0);transform-origin:left;transition:transform 800ms var(--ease-out);
  }

.lp-mock .dash-sync-bars {display:flex;gap:12px;height:90px;margin-bottom:10px;}

.lp-mock .dash-sync-bar-col {
    flex:1;height:100%;border-radius:6px;overflow:hidden;background:#f0f2f5;
    display:flex;flex-direction:column-reverse;
    transform:scaleY(0);transform-origin:bottom;transition:transform 700ms var(--ease-out);
  }

.lp-mock .dash-sync-seg.success {background:var(--status-success);}

.lp-mock .dash-sync-seg.warning {background:var(--status-warning);}

.lp-mock .dash-sync-legend {display:flex;gap:16px;font-size:10.5px;color:var(--ink-muted);margin-bottom:14px;}

.lp-mock .dash-sync-legend span {display:flex;align-items:center;}

.lp-mock .dash-sync-table {width:100%;border-collapse:collapse;font-size:11px;}

.lp-mock .dash-sync-table th {text-align:left;color:#9aa5b3;font-weight:500;font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;padding-bottom:7px;}

.lp-mock .dash-sync-table td {padding:7px 0;color:var(--ink-muted);border-top:1px solid #f0f2f5;vertical-align:middle;}

.lp-mock .dash-sync-table tr:first-child td {border-top:none;}

.lp-mock .dash-sync-table td:not(:first-child) {text-align:right;}

.lp-mock .dash-sync-table .portal-name {color:var(--ink);font-weight:500;}

.lp-mock .dash-sync-table .taxa {font-weight:600;color:var(--ink);}

.lp-mock .dash-sync-open {
    font-size:10px;font-weight:600;color:var(--btn-primary);border:1px solid var(--btn-primary);
    border-radius:1.6px;padding:2.5px 8px;background:transparent;
    transition:background-color 150ms var(--ease-out), color 150ms var(--ease-out);
  }

.lp-mock .dash-sync-bar-col.in-view {transform:scaleY(1);}
/* ---- micro-interações do módulo 0: só hover, nada de mouse-tracking —
     cada pedaço que parece clicável (card, item de lista, botão, linha de
     tabela) ganha uma reação pequena, só pra confirmar que "isso reage". */
/* só a regra do :hover define a transition (não uma regra "sempre ligada")
     de propósito — se essa tivesse mais especificidade que a da entrada por
     causa do #module-0, ela vazava pro estado de repouso e atropelava o
     tempo mais lento (750ms) que pedimos pra entrada aparecer. */

.lp-mock #module-0 .dash-card:hover {
    transition:box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
    transform:translateY(-3px);
    box-shadow:0 4px 8px 0 rgba(16,24,40,.06), 0 14px 32px 0 rgba(16,24,40,.10);
  }

.lp-mock #module-0 .dash-action-item:hover {background:var(--content-bg);}

.lp-mock #module-0 .dash-action-icon {transition:transform 180ms var(--ease-out);}

.lp-mock #module-0 .dash-action-item:hover .dash-action-icon {transform:scale(1.1);}

.lp-mock #module-0 .dash-action-chevron {display:inline-block;transition:transform 180ms var(--ease-out);}

.lp-mock #module-0 .dash-action-item:hover .dash-action-chevron {transform:translateX(3px);}

.lp-mock #module-0 .dash-kpi-foot a {transition:opacity 150ms var(--ease-out);}

.lp-mock #module-0 .dash-kpi-foot a:hover {opacity:.65;}

.lp-mock #module-0 .dash-sync-open:hover {background:var(--btn-primary);color:#fff;}

.lp-mock #module-0 .dash-legend-row {transition:background-color 150ms var(--ease-out);border-radius:6px;}

.lp-mock #module-0 .dash-legend-row:hover {background:var(--content-bg);}

.lp-mock #module-0 .dash-table tbody tr, .lp-mock #module-0 .dash-sync-table tbody tr {transition:background-color 150ms var(--ease-out);}

.lp-mock #module-0 .dash-table tbody tr:hover, .lp-mock #module-0 .dash-sync-table tbody tr:hover {background:var(--content-bg);}

.lp-mock #module-0 .side-item:not(.active) {transition:background-color 150ms var(--ease-out), color 150ms var(--ease-out);}

.lp-mock #module-0 .side-item:not(.active):hover {background:rgba(255,255,255,.07);color:#fff;}

.lp-mock #module-0 .side-item:not(.active):hover i {opacity:1;}

.lp-mock #module-0 .icon-btn {transition:color 150ms var(--ease-out);}

.lp-mock #module-0 .icon-btn:hover {color:var(--ink-muted);}

.lp-mock #module-0 .icon-btn:hover .badge-count {transform:scale(1.12);}

.lp-mock #module-0 .badge-count {transition:transform 150ms var(--ease-out);}

.lp-mock #module-0 .avatar-group {border-radius:999px;padding:4px 8px 4px 4px;margin:-4px -8px -4px -4px;transition:background-color 150ms var(--ease-out);}

.lp-mock #module-0 .avatar-group:hover {background:var(--content-bg);cursor:pointer;}

.lp-mock #module-0 .whatsapp-pill {transition:filter 150ms var(--ease-out);}

.lp-mock #module-0 .whatsapp-pill:hover {filter:brightness(1.06);}

.lp-mock .dash-sync-overall-fill.in-view {transform:scaleX(1);}
/* ---- Módulo de fundo (seção ainda sem conteúdo — só o efeito, pra
     validar antes de desenhar a seção de verdade em cima). Full-bleed:
     width:100vw + margin negativo cancela o padding lateral do .wrap-outer,
     que não tem max-width próprio, então isso sempre encosta nas bordas
     reais da viewport, não só nas bordas do wrap-outer. Manchas de gradiente
     verdes (tons pedidos: #09E968 / #3DFF8E), só transform anima (composita
     na GPU, sem JS por frame) — validado no teste em CSS puro antes desta
     versão. Concentradas no topo de propósito: o ::after com gradiente pra
     branco garante que a metade de baixo da seção fica sempre limpa, mesmo
     se as manchas migrarem um pouco durante a animação. */
/* [descartado: layout de seção do protótipo] .module-flow */

.lp-mock .flow-bg {position:absolute;inset:0;overflow:hidden;pointer-events:none;}
/* manchas bem maiores e com blur bem mais forte que a v1 — de propósito:
     a referência é uma mancha única e contínua no topo (sem dar pra ver
     onde uma "bolha" termina e a outra começa), não 3 círculos separados.
     O overlap generoso + blur forte é o que funde tudo numa coisa só. */

.lp-mock .flow-blob {position:absolute;border-radius:50%;filter:blur(150px);will-change:transform;}

.lp-mock .flow-blob.blob-a {
    width:900px;height:900px;left:-8%;top:-480px;
    background:radial-gradient(circle at 40% 40%, #09E968, transparent 72%);
    opacity:.9;
    animation:flowDrift1 14s ease-in-out infinite;
  }

.lp-mock .flow-blob.blob-b {
    width:820px;height:820px;right:-6%;top:-460px;
    background:radial-gradient(circle at 60% 40%, #3DFF8E, transparent 72%);
    opacity:.85;
    animation:flowDrift2 17s ease-in-out infinite;
  }

.lp-mock .flow-blob.blob-c {
    width:680px;height:680px;left:30%;top:-380px;
    background:radial-gradient(circle at 50% 50%, #3DFF8E, transparent 72%);
    opacity:.7;
    animation:flowDrift3 11s ease-in-out infinite;
  }
/* cada blob percorre vários pontos (não só ida-e-volta em 2 pontos), com
     durações não-múltiplas entre si (14/17/11s — bem mais rápidas que a v1,
     que levava 30-40s pra dar uma volta e a oscilação ficava imperceptível)
     pra dessincronizar rápido — a combinação das 3 raramente se repete
     igual, então lê como "sempre mudando" mesmo sendo, cada uma, um loop
     fechado (0%=100%, sem salto no fim do ciclo). Swing de opacidade maior
     também, pra reforçar visualmente que está variando, não só se movendo. */

@keyframes flowDrift1 {
    0%{transform:translate(0,0) scale(1);opacity:.9;}
    28%{transform:translate(90px,120px) scale(1.12);opacity:.55;}
    58%{transform:translate(30px,200px) scale(1.22);opacity:1;}
    82%{transform:translate(-60px,90px) scale(1.05);opacity:.7;}
    100%{transform:translate(0,0) scale(1);opacity:.9;}
  }

@keyframes flowDrift2 {
    0%{transform:translate(0,0) scale(1);opacity:.85;}
    35%{transform:translate(-90px,150px) scale(1.18);opacity:.5;}
    65%{transform:translate(-30px,230px) scale(1.26);opacity:1;}
    100%{transform:translate(0,0) scale(1);opacity:.85;}
  }

@keyframes flowDrift3 {
    0%{transform:translate(0,0) scale(1);opacity:.7;}
    24%{transform:translate(70px,100px) scale(1.1);opacity:.4;}
    52%{transform:translate(-40px,190px) scale(1.28);opacity:.9;}
    78%{transform:translate(60px,80px) scale(1.02);opacity:.5;}
    100%{transform:translate(0,0) scale(1);opacity:.7;}
  }

.lp-mock .module-flow.paused .flow-blob {animation-play-state:paused;}

@media (prefers-reduced-motion: reduce) {

.lp-mock .flow-blob {animation:none;}

}

.lp-mock .flow-bg::after {
    content:'';position:absolute;inset:0;
    background:linear-gradient(to bottom, transparent 0%, #fff 80%);
  }
/* ---- Dois carrosséis infinitos de logos de portal, um pra cada lado ----
     Técnica clássica de marquee sem JS: cada track tem a lista de cards
     duplicada (mesma sequência 2x) e width:max-content; animar de
     translateX(0) até translateX(-50%) desloca exatamente uma cópia inteira
     pra fora enquanto a segunda cópia entra no lugar dela — o corte é
     invisível porque as duas metades são idênticas. Só transform anima
     (GPU, sem JS por frame), mesmo princípio das manchas de gradiente. */
/* seção própria, fundo branco sólido — separada de propósito do
     .module-flow (gradiente) acima, pra cada uma dar pra copiar/colar
     sozinha depois, sem vir grudada na outra. */
/* [descartado: layout de seção do protótipo] .module-logos */

.lp-mock .flow-logos {
    position:relative;z-index:1;
    display:flex;flex-direction:column;gap:20px;
    padding:64px 0;
  }

.lp-mock .flow-logo-row {
    position:relative;overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  }

.lp-mock .flow-logo-track {
    display:flex;gap:16px;width:max-content;
    will-change:transform;
  }

.lp-mock .track-left {animation:marqueeLeft 46s linear infinite;}

.lp-mock .track-right {animation:marqueeRight 38s linear infinite;}

@keyframes marqueeLeft {from{transform:translateX(0);}to{transform:translateX(-50%);}}

@keyframes marqueeRight {from{transform:translateX(-50%);}to{transform:translateX(0);}}

.lp-mock .flow-logo-card {
    flex-shrink:0;
    min-width:210px;height:104px;
    display:flex;align-items:center;justify-content:center;
    padding:20px 30px;
    background:#fff;
    /* borda de verdade (era rgba(255,255,255,.9) — invisível no fundo
       branco sólido da seção) no lugar do box-shadow, a pedido do usuário */
    border:1px solid #dfe2e6;
    border-radius:16px;
  }

.lp-mock .flow-logo-card img {max-width:150px;max-height:42px;object-fit:contain;}

.lp-mock .module-logos.paused .flow-logo-track {animation-play-state:paused;}

@media (prefers-reduced-motion: reduce) {

.lp-mock .flow-logo-track {animation:none;}

}
/* ---- Protótipo reusável: texto + checklist, 2 estágios de entrada ----
     Estágio 1 (.reveal / li): sobe com fade, igual ao resto do arquivo.
     Estágio 2 (li.checked): só depois do estágio 1 assentar, o anel de
     cada item vira check — cross-fade+scale entre ::before (anel vazio) e
     ::after (ícone de check), não duas animações competindo na mesma
     propriedade. */
/* [descartado: layout de seção do protótipo] .module-checklist */

.lp-mock .checklist-inner {max-width:520px;}

.lp-mock .checklist-heading {
    font-family:var(--font-display);
    line-height:1.1;
    letter-spacing:-0.01em;
    font-size:clamp(28px,4vw,40px);
    color:var(--ink);
    margin:0 0 16px;
    opacity:0;transform:translateY(16px);
    transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  }

.lp-mock .checklist-heading .w-light {font-weight:400;}

.lp-mock .checklist-heading .w-bold {font-weight:800;}

.lp-mock .checklist-body {
    font-family:var(--font-lp-body);
    font-size:15.5px;line-height:1.65;
    color:var(--ink-muted);
    max-width:50ch;
    margin:0 0 28px;
    opacity:0;transform:translateY(16px);
    transition:opacity 500ms var(--ease-out) 80ms, transform 500ms var(--ease-out) 80ms;
  }

.lp-mock .checklist-heading.in-view, .lp-mock .checklist-body.in-view {opacity:1;transform:translateY(0);}

.lp-mock .checklist {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}

.lp-mock .checklist li {
    display:flex;align-items:center;gap:12px;
    font-family:var(--font-lp-body);
    font-size:15px;color:var(--ink);line-height:1.5;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    opacity:0;transform:translateY(14px);
    transition:opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
  }

.lp-mock .checklist li:last-child {border-bottom:none;}

.lp-mock .checklist li.in-view {opacity:1;transform:translateY(0);}
/* mesmo comportamento de antes (anel vira símbolo no estágio 2), só que
     o símbolo agora é o ícone real de cada item (Figma: cloud_upload /
     ads_click / directions_car), não mais um check genérico — cross-fade
     entre o anel (.icon-ring) e o ícone, igual ao check antigo fazia. */

.lp-mock .checklist .feature-icon {width:20px;height:20px;flex-shrink:0;position:relative;}

.lp-mock .checklist .feature-icon .icon-ring {
    position:absolute;inset:0;border-radius:50%;
    border:1.5px solid var(--ink-faint);
    transition:opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
  }

.lp-mock .checklist .feature-icon svg {
    position:absolute;inset:0;display:block;width:100%;height:100%;
    color:#06C86C;
    opacity:0;transform:scale(.55);
    transition:opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  }

.lp-mock .checklist li.checked .feature-icon .icon-ring {opacity:0;transform:scale(.7);}

.lp-mock .checklist li.checked .feature-icon svg {opacity:1;transform:scale(1);}

@media (prefers-reduced-motion: reduce) {

.lp-mock .checklist-heading, .lp-mock .checklist-body, .lp-mock .checklist li, .lp-mock .checklist .feature-icon .icon-ring, .lp-mock .checklist .feature-icon svg {transition:none;}

}
/* ---- Cards de planos (importados de gestorcar-planos-cards.html) ----
     Tokens e classes com prefixo plans-/--plans- de propósito: o arquivo
     original tinha --ink/--line/--font-body/.price etc no :root/global, que
     colidiriam com os tokens (--ink, --line...) e classes (.price já existe
     na tabela do módulo 1) já usados no resto deste arquivo. Escopando tudo
     dentro de .module-plans, os cards continuam copiáveis como bloco único,
     sem vazar estilo pro resto da página nem herdar nada de fora. */
/* [descartado: layout de seção do protótipo] .module-plans */

.lp-mock .plans-grid {
    display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start;
    max-width:1296px;margin:0 auto;
  }
/* wrapper cuida só da entrada (fade+slide); o transform do .plans-card em
     si fica livre pro isolate/translateZ do glow e pro lift do featured,
     sem os dois brigarem pela mesma propriedade transform. */

.lp-mock .plans-card-wrap {
    opacity:0;transform:translateY(24px);
    transition:opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
  }

.lp-mock .plans-card-wrap.in-view {opacity:1;transform:translateY(0);}

.lp-mock .plans-card {
    position:relative;border:1px solid var(--plans-line);border-radius:16px;
    aspect-ratio:1;
    background:var(--plans-surface);
    transition:transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
    transform:translateZ(0.01px);
    isolation:isolate;
    --edge-proximity:0;
    --cursor-angle:45deg;
    --edge-sensitivity:8;
  }

.lp-mock .plans-card.featured {
    border-color:var(--plans-brand);border-width:2px;
    transform:translateY(-8px) translateZ(0.01px);
  }

.lp-mock .plans-card > .plans-edge-light {
    content:'';position:absolute;inset:-36px;border-radius:inherit;
    pointer-events:none;z-index:2;mix-blend-mode:plus-lighter;
    opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
    transition:opacity 250ms ease-out;
    mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 12%, transparent 88%, black 97.5%);
  }

.lp-mock .plans-card:not(:hover) > .plans-edge-light {
    opacity:0;transition:opacity 600ms ease-in-out;
  }

.lp-mock .plans-card > .plans-edge-light::before {
    content:'';position:absolute;inset:36px;border-radius:inherit;
    box-shadow:
      inset 0 0 0 1.5px hsl(0 0% 45% / 85%),
      inset 0 0 3px 0 hsl(0 0% 45% / 60%),
      inset 0 0 9px 0 hsl(0 0% 45% / 40%),
      0 0 3px 0 hsl(0 0% 45% / 60%),
      0 0 10px 2px hsl(0 0% 45% / 38%),
      0 0 22px 3px hsl(0 0% 45% / 20%);
  }

.lp-mock .plans-card.featured > .plans-edge-light::before {
    box-shadow:
      inset 0 0 0 1.5px hsl(145 90% 55% / 100%),
      inset 0 0 3px 0 hsl(145 90% 55% / 90%),
      inset 0 0 9px 0 hsl(145 90% 55% / 70%),
      inset 0 0 20px 0 hsl(145 90% 55% / 50%),
      0 0 3px 0 hsl(145 90% 55% / 90%),
      0 0 12px 2px hsl(145 90% 55% / 65%),
      0 0 28px 3px hsl(145 90% 55% / 45%),
      0 0 56px 5px hsl(145 90% 55% / 28%);
  }

@media (max-width:1080px) {

.lp-mock .plans-grid {grid-template-columns:1fr 1fr;}

.lp-mock .plans-card.featured {transform:none;}

}

@media (max-width:640px) {

.lp-mock .plans-grid {grid-template-columns:1fr;}
/* [descartado: layout de seção do protótipo] .module-plans */

}

@media (prefers-reduced-motion: reduce) {

.lp-mock .plans-card-wrap {transition:none;}

}
/* ---- Protótipo: hero encolhe + arredonda ao rolar ----
     Sem sticky/pin de propósito — é só o teste do efeito visual (escala +
     border-radius crescendo com o scroll), não o comportamento final de
     "hero gruda no topo enquanto o resto sobe por cima". Fundo escuro atrás
     do quadrado só pra dar contraste e a "bordinha" ficar visível quando
     ele encolhe — no hero de verdade isso deve virar a cor de fundo real
     da seção. Só transform + border-radius são tocados por JS a cada
     scroll (via rAF), nada de width/margin (isso seria layout thrash). */

.lp-mock .hero-test-wrap {
    position:relative;
    width:100vw;margin:-40px calc(50% - 50vw) 0;
    height:100vh;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }

.lp-mock .hero-test-square {
    width:100%;height:100%;
    object-fit:cover;display:block;
    border-radius:0px;
    will-change:transform, border-radius;
  }

@media (prefers-reduced-motion: reduce) {

.lp-mock .hero-test-square {transition:none;}

}
/* ---- Prova social com órbita ----
     Truque de "dupla rotação" pra orbitar: cada .orbit-item tem um transform
     ESTÁTICO (rotate(angle) translateX(radius) rotate(-angle)) que só
     posiciona o quadrado num ponto do círculo, sem girar ele; o giro de
     verdade (automático OU arrastado pelo usuário) é aplicado via JS direto
     no .orbit-rotator (rotate(rotationDeg)) e, em espelho, em cada
     .orbit-square (rotate(-rotationDeg)) — mesmo truque de antes (cancelar a
     rotação herdada do pai), só que agora dirigido por rAF em vez de duas
     @keyframes CSS separadas, porque precisa ser a MESMA variável de
     rotação pro clique-e-arraste e o giro automático não desincronizarem. */
/* Layout da seção RESTAURADO — ao contrário dos outros módulos, este é
 o dono do próprio enquadramento: full-bleed com `width:100vw`, altura
 mínima e o cursor de arraste. Sem ele a órbita não tem palco. */
.lp-mock .module-social {
  --social-brand: #09e968;
  --social-ink: #1a1a1a;
  --social-ink-muted: #5f6b66;
  position: relative;
  /* `100vw` inclui a barra de rolagem, então o full-bleed ficava ~8px mais
     largo que a área visível e criava rolagem horizontal na página inteira.
     `--lp-scrollbar` é medido pelo lp-motion.js (innerWidth menos
     clientWidth) e desconta exatamente essa diferença. */
  width: calc(100vw - var(--lp-scrollbar, 0px));
  margin: 0 calc(50% - (100vw - var(--lp-scrollbar, 0px)) / 2);
  min-height: 980px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
          user-select: none;
}
@media (max-width: 600px) { .lp-mock .module-social { min-height: 700px; } }

.lp-mock .module-social.dragging {cursor:grabbing;}
/* anéis e órbita inteiros escalam juntos por aqui — em vez de reescrever
     cada --radius/--size individualmente por breakpoint, um transform:scale
     único encolhe tudo mantendo as proporções entre os anéis. O JS do
     arrasto só toca .orbit-rotator (rotate), nunca este wrapper, então a
     escala responsiva nunca briga com a rotação. */

.lp-mock .orbit-scale-wrap {position:absolute;inset:0;}

.lp-mock .social-rings {position:absolute;inset:0;}

.lp-mock .social-ring {
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px solid rgba(20,30,26,.09);
  }

.lp-mock .orbit-rotator {
    position:absolute;inset:0;
    transform:rotate(0deg);
  }

.lp-mock .orbit-item {
    position:absolute;top:50%;left:50%;
    transform:rotate(var(--angle)) translateX(var(--radius)) rotate(calc(var(--angle) * -1));
  }
/* logos de clientes reais, não mais quadrado verde liso — cartão branco
     com a marca dentro (object-fit:contain preserva a proporção de cada
     logo, que variam bastante entre si), mesmo glow verde de antes por
     baixo pra manter a assinatura visual da seção. */

.lp-mock .orbit-square {
    position:absolute;top:0;left:0;
    width:var(--size);height:calc(var(--size) * .56);
    background:#fff;
    border:1px solid #e3e5e8;
    border-radius:calc(var(--size) * .14);
    transform:translate(-50%,-50%) rotate(0deg);
    display:flex;align-items:center;justify-content:center;
    padding:calc(var(--size) * .04) calc(var(--size) * .05);
  }

.lp-mock .orbit-square img {width:100%;height:100%;object-fit:contain;}

.lp-mock .social-content {
    position:relative;z-index:1;
    max-width:600px;
    padding:0 24px;
    text-align:center;
  }

.lp-mock .social-heading {
    font-family:var(--font-display);
    font-weight:400;
    line-height:1.2;
    letter-spacing:-0.01em;
    font-size:clamp(24px,3.4vw,34px);
    color:var(--social-ink);
    margin:0 0 16px;
  }

.lp-mock .social-heading .w-bold {font-weight:800;}

.lp-mock .social-sub {
    font-family:var(--font-lp-body);
    font-size:14.5px;line-height:1.6;
    color:var(--social-ink-muted);
    max-width:46ch;margin:0 auto 24px;
  }

.lp-mock .social-cta {
    font-family:var(--font-lp-body);
    display:inline-block;
    background:var(--social-brand);
    color:#0a0a0a;
    font-weight:600;font-size:14px;
    padding:12px 26px;
    border:none;border-radius:999px;
    cursor:pointer;
    transition:filter 150ms var(--ease-out);
  }

.lp-mock .social-cta:hover {filter:brightness(1.06);}

.lp-mock .orbit-item.mobile-orbit, .lp-mock .social-ring.mobile-orbit {display:none;}

@media (max-width:1300px) {

.lp-mock .orbit-item.is-outer2, .lp-mock .social-ring.is-outer2 {display:none;}

}

@media (max-width:900px) {

.lp-mock .orbit-item.is-outer, .lp-mock .social-ring.is-outer {display:none;}

.lp-mock .orbit-scale-wrap {transform:scale(.8);}

}
/* <600px troca pra um layout próprio (não é o do desktop encolhido — ver
     comentário no HTML): o texto largo-e-baixo só deixa espaço livre perto
     de cima/baixo numa tela estreita, então reaproveitar os ângulos do
     desktop (espalhados nos 360°) deixaria a maioria dos quadrados atrás
     do texto ou fora da viewport. */

@media (max-width:600px) {
/* [descartado: layout de seção do protótipo] .module-social */

.lp-mock .orbit-item:not(.mobile-orbit), .lp-mock .social-ring:not(.mobile-orbit) {display:none;}

.lp-mock .orbit-item.mobile-orbit, .lp-mock .social-ring.mobile-orbit {display:block;}

.lp-mock .orbit-scale-wrap {transform:none;}

.lp-mock .social-content {padding:0 20px;}

.lp-mock .social-sub {font-size:13.5px;}

}
/* ---- Spotlight (reactbits.dev) direto na logo ----
     Fundo escuro de propósito — a logo original é cinza-escuro pensada pra
     fundo claro, então virou currentColor e ganhou cor clara aqui, senão
     sumiria no preto. Sem card/moldura ao redor: duas cópias da MESMA logo
     via <use> (path fica uma vez só em <defs>) empilhadas — a de baixo fica
     apagada sempre; a de cima é mais clara/viva mas só aparece onde o
     mask-image (um círculo radial preso no cursor via --mx/--my) deixa,
     então só a área perto do mouse "acende" — o resto continua na versão
     apagada. É a logo em si que brilha, não uma caixa em volta dela. */
/* [descartado: layout de seção do protótipo] .module-logo-spot */
/* sem padding de propósito: as camadas .brand-logo-glow/.brand-logo-edge
     usam inset:0 (preenchem a padding-box do ancestral posicionado) — se
     esse wrap tivesse padding, o inset:0 delas ficaria maior que a logo
     "base" (que só ocupa a content-box), desalinhando as 3 camadas. */

.lp-mock .logo-spotlight-wrap {
    position:relative;width:100%;max-width:900px;
  }

.lp-mock .brand-logo {display:block;width:100%;height:auto;}

.lp-mock .brand-logo-base {color:#333635;}
/* mais suave que a v1: raio maior + degradê em 3 paradas (não só 2), pra
     não ter uma borda dura entre "aceso" e "apagado"; tom cinza-claro em
     vez de verde, por pedido — mantém o brilho mas sem virar "luz de neon". */

.lp-mock .brand-logo-glow {
    position:absolute;inset:0;
    color:#d7dadc;
    opacity:0;
    -webkit-mask-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.45) 38%, transparent 88%);
    mask-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.45) 38%, transparent 88%);
    transition:opacity 450ms var(--ease-out);
  }

.lp-mock .logo-spotlight-wrap:hover .brand-logo-glow {opacity:.85;}
/* "bordinha brilhando" tem que ser o contorno das PRÓPRIAS letras, não
     uma caixa retangular ao redor — por isso não é mais um box-shadow numa
     div, e sim uma 3ª cópia da mesma logo, sem preenchimento (fill:none),
     só o traçado (stroke) do contorno, mascarada pelo mesmo círculo preso
     no cursor. Onde o círculo passa, o contorno da letra acende. */

.lp-mock .brand-logo-edge {
    position:absolute;inset:0;
    fill:none;
    stroke:#eef0f1;
    stroke-width:1.6;
    opacity:0;
    -webkit-mask-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.5) 45%, transparent 85%);
    mask-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.5) 45%, transparent 85%);
    filter:drop-shadow(0 0 3px rgba(238,240,241,.7));
    transition:opacity 350ms var(--ease-out);
  }

.lp-mock .logo-spotlight-wrap:hover .brand-logo-edge {opacity:1;}

@media (prefers-reduced-motion: reduce) {

.lp-mock .brand-logo-glow, .lp-mock .brand-logo-edge {transition:none;}

}

@media (max-width:640px) {
/* [descartado: layout de seção do protótipo] .module-logo-spot */

}
/* ---- Mockup de devices (MacBook + iPhone) com o site "scrollando" ----
     Fotos de device com a área da tela transparente (checado por script:
     alpha=0 no recorte), então o conteúdo fica atrás e a moldura por cima
     — não precisa clipar/recortar a moldura em si. Bounding box da área
     transparente extraído direto do PNG (não é chute): MacBook 12.91% /
     12.54% / 74.15% / 74.88%, iPhone 9.79% / 5.05% / 80.17% / 89.83%. */
/* tamanho igual ao frame dos módulos 1/2 (890x560, mesmo .module{max-width:890px}
     e mesmo ritmo de margem) — era 1000x640, escalado por ~0.89 (incl. os
     offsets/tamanhos dos devices e o range de translateY do scroll). */
/* [descartado: layout de seção do protótipo] .module-device-mockup */

.lp-mock .mockup-stage {
    position:relative;
    width:890px;max-width:100%;height:570px;
    background:linear-gradient(180deg,#f6f6f8,#e8e9ec);
    border-radius:28px;
  }

.lp-mock .device-frame {position:absolute;}

.lp-mock .device-frame img.frame-png {
    position:relative;width:100%;height:auto;display:block;z-index:2;
    pointer-events:none;
  }

.lp-mock .device-screen {position:absolute;overflow:hidden;background:#fff;z-index:1;}

.lp-mock .device-screen .scroll-track {position:absolute;top:0;left:0;width:100%;}

.lp-mock .device-screen .scroll-track img {width:100%;display:block;}
/* espaço em branco só no mobile, antes do início do site — sem isso a
     logo ficava embaixo da curva do notch (o retângulo da tela, por bbox,
     começa reto, mas o recorte transparente da foto é arredondado ali em
     cima, então o topo do conteúdo ficava "cortado" visualmente). */

.lp-mock .device-iphone .scroll-track-spacer {height:16px;background:#fff;}

.lp-mock .device-macbook {
    left:36px;top:62px;width:712px;
    filter:drop-shadow(0 32px 43px rgba(16,24,40,.22));
  }

.lp-mock .device-macbook .device-screen {left:12.91%;top:12.54%;width:74.15%;height:74.88%;}
/* as duas animações usam a MESMA duração e os MESMOS pontos-percentuais
     de keyframe (e nenhuma tem delay), então chegam no rodapé juntas —
     sincronizado só por isso, não precisa de JS pra travar as duas. */

.lp-mock .device-macbook .scroll-track {animation:scrollMac 44s ease-in-out infinite;}
/* range calculado pra assets/scroll-desktop.jpg (1100x3551) na largura
     real da tela nesse tamanho de moldura (712px → tela 528px de largura,
     imagem renderiza a 1704.5px de altura, tela tem 329.9px de altura) —
     recalcular se a moldura ou a imagem de scroll mudar de proporção */

@keyframes scrollMac {
    0%{transform:translateY(0);}
    10%{transform:translateY(0);}
    48%{transform:translateY(-1375px);}
    62%{transform:translateY(-1375px);}
    96%{transform:translateY(0);}
    100%{transform:translateY(0);}
  }

.lp-mock .device-iphone {
    right:53px;bottom:18px;width:205px;
    filter:drop-shadow(0 21px 28px rgba(16,24,40,.28));
  }

.lp-mock .device-iphone .device-screen {left:9.79%;top:5.05%;width:80.17%;height:89.83%;border-radius:20px;}

.lp-mock .device-iphone .scroll-track {animation:scrollPhone 44s ease-in-out infinite;}
/* range calculado pra assets/scroll-mobile.jpg (420x8385) + os 16px do
     spacer do topo — página mobile é proporcionalmente bem mais longa que
     a desktop, mas como a duração agora é igual à do macbook, ela "viaja"
     mais rápido (mais pixels no mesmo tempo) */

@keyframes scrollPhone {
    0%{transform:translateY(0);}
    10%{transform:translateY(0);}
    48%{transform:translateY(-2939px);}
    62%{transform:translateY(-2939px);}
    96%{transform:translateY(0);}
    100%{transform:translateY(0);}
  }

@media (prefers-reduced-motion: reduce) {

.lp-mock .device-screen .scroll-track {animation:none !important;}

}
/* ---- Selo holográfico ----
     Camada de brilho arco-íris usa o próprio SVG do selo como máscara
     (mask-image), então o efeito nunca vaza pra fora do contorno recortado
     do selo — sem precisar redesenhar a forma em CSS. mix-blend-mode:hue
     troca só a matiz mantendo a luminosidade/textura metálica de baixo —
     é o que dá o look "folha holográfica" (testei color-dodge antes e
     lavava tudo). Sem interação (mobile, ou parado), balança sozinho
     devagar (holoIdle); no pointermove, só a POSIÇÃO do brilho segue o
     cursor — sem tilt/3D, a pedido do usuário. */
/* [descartado: layout de seção do protótipo] .module-holo-seal */

.lp-mock .holo-seal {
    position:relative;width:320px;height:320px;
  }

.lp-mock .holo-seal .seal-base {
    position:relative;width:100%;height:100%;display:block;
    /* PNG exportado pelo usuário (o SVG original renderizava esquisito no
       navegador — os hacks de gradiente do Figma nele não são fiéis fora
       do Figma). Sem filtro de brightness/contrast aqui: esse PNG já é a
       referência de como o selo deve ficar, não precisa compensar nada. */
    filter:drop-shadow(0 20px 36px rgba(16,24,40,.18));
  }

.lp-mock .holo-seal .holo-shine, .lp-mock .holo-seal .holo-sparkle {
    position:absolute;inset:0;
    -webkit-mask-image:url('../images/lp/seal-gestorcar.svg');mask-image:url('../images/lp/seal-gestorcar.svg');
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    pointer-events:none;
  }

.lp-mock .holo-seal .holo-shine {
    /* não é mais cor — é só BRILHO: uma faixa clara (com uma sombrinha fina
       nas duas bordas, pra dar profundidade) varrendo o selo, tipo luz
       batendo em metal escovado. mix-blend-mode:overlay só clareia/escurece,
       não troca matiz — por isso não "muda de cor" mais. Faixa fina (~8% do
       gradiente) + background-size grande (420%) = passa como um reflexo,
       não cobre o disco inteiro de uma vez. */
    background:linear-gradient(115deg,
      transparent 0%, transparent 40%,
      rgba(0,0,0,.35) 44%,
      rgba(255,255,255,.95) 49%,
      rgba(0,0,0,.35) 54%,
      transparent 58%, transparent 100%);
    background-size:420% 420%;
    background-position:var(--holo-x,20%) var(--holo-y,20%);
    mix-blend-mode:overlay;
    opacity:.8;
    animation:holoIdle 6s ease-in-out infinite;
  }
/* animation:none (não só paused) — uma @keyframes pausada continua "dona"
     do background-position no valor congelado, e nunca volta a ler a
     declaração de baixo (a de var(--holo-x/--holo-y)); só tirando a
     animação de vez é que o CSS volta a obedecer a variável. */

.lp-mock .holo-seal.active .holo-shine {animation:none;}

@keyframes holoIdle {
    0%,100%{background-position:15% 15%;}
    50%{background-position:85% 85%;}
  }

.lp-mock .holo-seal .holo-sparkle {
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0, transparent 1.5%),
      radial-gradient(circle at 70% 60%, rgba(255,255,255,.8) 0, transparent 1.2%),
      radial-gradient(circle at 40% 80%, rgba(255,255,255,.7) 0, transparent 1%),
      radial-gradient(circle at 85% 20%, rgba(255,255,255,.8) 0, transparent 1.3%),
      radial-gradient(circle at 55% 45%, rgba(255,255,255,.6) 0, transparent 1%);
    mix-blend-mode:overlay;
    opacity:.25;
  }

@media (prefers-reduced-motion: reduce) {

.lp-mock .holo-seal .holo-shine {animation:none;}

}