/* ============================================================ MOBILE FIXES. piso de responsividade Carrega POR ÚLTIMO para vencer especificidade. Não substitui media queries existentes; só impede overflow horizontal e colunas 1fr que não encolhem em viewports estreitos. ============================================================ */ /* 1. Trava overflow horizontal global, sem quebrar sticky. overflow-x: hidden no bloqueia position:sticky em todos os descendentes e pode causar reflow sutil em cada repaint. Usamos overflow-x: clip no (não cria contexto de rolagem) e evitamos max-width:100vw (que inclui a scrollbar e força a página a ser ligeiramente mais larga que a viewport). ------------------------------------------------------------- */ html { overflow-x: clip; /* Scrollbar gutter estável evita que abrir modal (que trava o body scroll) faça a página inteira pular ~15px à direita. */ scrollbar-gutter: stable; } body { overflow-x: clip; width: 100%; } /* 1b. Estabiliza reveals. força camada de composição GPU para que a transição opacity+transform não envolva o layout em cada frame (evita o "tremor" durante o scroll). */ .v-reveal { will-change: opacity, transform; backface-visibility: hidden; } .v-reveal.v-revealed { will-change: auto; } /* 2. Mídia e SVG nunca extrapolam. --------------------------- */ img, video, svg, canvas, iframe { max-width: 100%; } /* 3. Bento grid (crédito, compliance, fraude, etc). Substitui repeat(12, 1fr) por minmax(0, 1fr). assim colunas conseguem encolher quando o conteúdo é intrinsecamente largo (visualizações com listas, tabelas, marquees). --------- */ .cr-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* ============================================================ Quebras estreitas (≤ 720px) ============================================================ */ @media (max-width: 720px) { /* Bento. uma coluna real. */ .cr-bento { grid-template-columns: minmax(0, 1fr) !important; } .cr-bento__card, .cr-bento__card--wide, .cr-bento__card--xwide { grid-column: 1 / -1 !important; min-width: 0; max-width: 100%; } .cr-bento__viz { min-width: 0; max-width: 100%; overflow: hidden; } .cr-bento__head { min-width: 0; flex-wrap: wrap; } .cr-bento__t { min-width: 0; word-break: break-word; } .cr-bento__d { min-width: 0; word-break: break-word; } /* Compliance differentials viz. sub-grids com listas longas. */ .cp-dv-stack, .cp-dv-evo, .cp-dv-agents, .cp-dv-mon, .cp-dv-logos { min-width: 0; max-width: 100%; } .cp-dv-stack__step, .cp-dv-evo__row, .cp-dv-agents__item, .cp-dv-mon__row { min-width: 0; } .cp-dv-stack__body, .cp-dv-evo__body, .cp-dv-agents__body, .cp-dv-mon__body { min-width: 0; } .cp-dv-agents__item { grid-template-columns: 26px minmax(0, 1fr) auto; } .cp-dv-mon__row { grid-template-columns: 42px minmax(0, 1fr) auto; } .cp-dv-stack__step { grid-template-columns: 28px minmax(0, 1fr) auto; } .cp-dv-evo__row { grid-template-columns: 56px minmax(0, 1fr) auto; } /* Anatomia v2 (KYS, Compliance). */ .ks-anat2 { grid-template-columns: minmax(0, 1fr) !important; } .ks-anat2__doc, .ks-anat2__callouts { min-width: 0; max-width: 100%; } .ks-anat2__callout { grid-template-columns: 36px minmax(0, 1fr); } /* Watch stats (KYS). quebrar para várias linhas. */ .ks-watch__stats { flex-wrap: wrap; gap: 8px; } .ks-watch__stat { flex: 1 1 calc(50% - 4px); min-width: 0; } /* Stuck card (crédito / fraude). */ .cr-stuck { min-width: 0; max-width: 100%; } .cr-stuck__head { flex-wrap: wrap; gap: 8px; min-width: 0; } .cr-stuck__name { word-break: break-word; } .cr-stuck__timer-v { font-size: clamp(28px, 8vw, 36px) !important; } /* Produto stack. escada de layers ofsetada à esquerda. */ .pr-stack { width: 100%; } .pr-stack__layer--2, .pr-stack__layer--3, .pr-stack__layer--4 { margin-left: 0 !important; } .pr-stack__output { margin-left: 0 !important; } .pr-stack__layer { min-width: 0; } .pr-stack__body { min-width: 0; } /* Sobre. press marquee header. */ .sb-press-mq { min-width: 0; max-width: 100%; } .sb-press-mq__viewport { min-width: 0; max-width: 100%; } .sb-press-mq__head { min-width: 0; flex-wrap: wrap; } .sb-press-mq__legend { min-width: 0; flex-wrap: wrap; } /* Tab strips: rolagem horizontal real, alinhada à esquerda. */ .v-legal-tabs__inner, .cr-port__tabs, .cp-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; justify-content: flex-start !important; scroll-snap-type: x proximity; padding-left: 16px !important; padding-right: 16px !important; } .v-legal-tab, .cr-port__tab, .cp-tab { scroll-snap-align: start; flex-shrink: 0; } /* Heros e títulos grandes. proteger contra overflow textual. */ .v-hero__bg { left: 0; right: 0; max-width: 100%; } h1, h2, h3 { word-break: break-word; overflow-wrap: anywhere; } /* Tabelas e blocos de código nunca quebram o layout. */ pre, code, kbd, samp { white-space: pre-wrap; word-break: break-word; } table { display: block; max-width: 100%; overflow-x: auto; } /* Containers utilitários comuns devem respeitar a viewport. */ .v-container, .v-section__inner, .v-bento, .dh-bsec__inner, .v-legal-doc, .v-legal-hero__inner, .v-legal-tabs__inner { max-width: 100%; } } /* ============================================================ Quebras extras para ≤ 480px (smartphones pequenos) ============================================================ */ @media (max-width: 480px) { /* Hero bento da home. empilhar tudo. */ .v-bento__tile--data { padding: 14px 0 14px 14px; } .v-bento__dh-logo { width: 96px; max-height: 44px; } /* Watch stats. uma por linha em telas muito estreitas. */ .ks-watch__stat { flex: 1 1 100%; } /* Tab strips. fontes menores. */ .v-legal-tab, .cr-port__tab, .cp-tab { font-size: 12.5px; padding: 9px 12px; } } /* ============================================================ FIXES adicionais (auditoria mobile @ 390px). Maio 2026 ============================================================ */ @media (max-width: 720px) { /* ---- produto-v2 (/produto.html): pv-twocol base não colapsa, força overflow. Aplica fallback aqui caso o usuário esteja em viewport ≤ 1100px sem o media query original cobrir. -------------------------------------- */ .pv-twocol, .pv-twocol--reverse, .pv-twocol--wide { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; } .pv-twocol__copy, .pv-twocol__viz { min-width: 0; max-width: 100%; } .pv-twocol__copy { position: static !important; } /* pv-mock e pv-exec não podem extrapolar a coluna mobile. ------------ */ .pv-mock { min-width: 0; max-width: 100%; } .pv-mock__body { padding: 16px !important; min-width: 0; } .pv-mock__bar { padding: 10px 12px; gap: 8px; } .pv-mock__path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Execução: no mobile, ocultar a animação (mock + trace + dossiê + metrics) e manter apenas a copy (eyebrow, título, sub e bullets). ------------ */ #execucao .pv-twocol > div:last-child, #execucao .pv-mock { display: none !important; } #execucao .pv-twocol--wide { gap: 0 !important; } /* Modelagem: ocultar o sidepanel (testes + regras) no mobile. -------- */ #modelagem .pv-mod__sidepanel { display: none !important; } .pv-exec__flow { padding: 24px 14px 14px !important; min-width: 0; } .pv-exec__lane { grid-template-columns: 70px minmax(0, 1fr) 64px !important; gap: 8px !important; font-size: 12px !important; } .pv-exec__lane-bar { margin: 0 4px !important; } /* Container do produto: padding mais enxuto. */ .pv-container { padding: 0 18px !important; } /* ---- Footer: hitbox dos links (independente de pointer:coarse) ----- */ .v-footer__col a, .v-footer__links a, .v-footer__bottom > a { padding: 8px 0; display: inline-block; min-height: 32px; line-height: 1.3; } .v-footer__col { gap: 4px; } /* Ícones sociais: manter o box quadrado centralizado (sem o padding/inline-block dos links). */ .v-footer__social a { padding: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 0; } /* ---- Outros links/CTAs com hitbox baixo --------------------------- */ .v-bento__more { padding: 10px 0; min-height: 36px; display: inline-flex; align-items: center; } .v-fvid__close { width: 36px !important; height: 36px !important; } /* ---- Texto minúsculo no live card do hero ------------------------- */ .v-hero__decision-kind, .v-hero__decision-time, .v-hero__decision-verdict, .v-hero__decision-risk, .v-hero__decision-score { font-size: 12px !important; } .v-hero__decision-risk b { font-size: 12px !important; } /* ---- Bumps de legibilidade em chips/tags muito pequenos ----------- */ .v-area__tag, .pv-overview__card-tag, .dh-card__source, .cr-port__regs-l, .cr-port__mock-tag, .cr-dv-ia-doc-tag, .cp-map__card-field-l, .cp-map__card-chip, .cp-map__card-signal, .kc-hero__proof-l, .kc-ar__rec-l, .kc-ar__cam, .kc-ar__time, .kc-ar__verdict-l, .kc-ar__verdict-meta, .kc-pillar__tag, .ks-anat__doc-id, .ks-anat__doc-tag, .ks-anat__doc-section-t, .ks-reg__abbr-sub, .ks-flow__badge { font-size: 11px !important; } /* ---- pv-comp__tree-source (produto): texto longo extrapolando ----- */ .pv-comp__tree-source { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-comp__tree, .pv-comp__split { min-width: 0; max-width: 100%; } } /* Hide hero animations/visualizations on mobile across all solucao pages */ @media (max-width: 980px) { .kc-ar, /* KYC live AR demo */ .ks-watch, /* KYS world watch grid */ .cp-live, /* Compliance live pipeline */ .cr-hero__viz, /* Credito & Fraude live simulation card */ .sg-split, /* SG before/after comparison */ .pv-hero__viz, /* Produto v2 engine animation */ .pr-hero__viz, /* Produto v1 stack */ .mesa-hero__viz, /* Mesa dossier + floating cards */ .ia-hero__viz { /* IA parecer card */ display: none !important; } /* Reclaim the grid layout — single column once viz is gone */ .cp-hero__inner, .cr-hero__inner, .kc-hero__inner, .ks-hero__inner, .sg-hero__inner, .pv-hero__inner, .pr-hero__inner, .mesa-hero__inner, .ia-hero__inner { grid-template-columns: 1fr !important; } } @media (max-width: 980px) { .pv-wf-stats { display: none !important; } } /* ============================================================ MesaSim (#sim). Navegação por setas + chrome minimizado no mobile. ============================================================ */ /* Arrow nav: oculta por padrão (apenas mobile usa) */ .mesa-sim__nav-mobile { display: none; } @media (max-width: 720px) { /* Troca: tabs viram setas */ #sim .mesa-sim__steps { display: none !important; } #sim .mesa-sim__nav-mobile { display: flex !important; align-items: stretch; gap: 8px; margin-bottom: 20px; background: #fff; border: 1px solid rgba(0,11,88,.1); border-radius: 6px; padding: 8px; } .mesa-sim__nav-arrow { flex: 0 0 44px; min-height: 44px; border: 1px solid rgba(0,11,88,.12); background: #fafbfc; border-radius: 4px; font-size: 24px; line-height: 1; font-family: var(--font-display); color: var(--vaas-blue-deep); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out); } .mesa-sim__nav-arrow:hover { background: var(--vaas-blue-deep); color: #fff; border-color: var(--vaas-blue-deep); } .mesa-sim__nav-arrow:disabled { opacity: .35; cursor: not-allowed; } .mesa-sim__nav-arrow:disabled:hover { background: #fafbfc; color: var(--vaas-blue-deep); border-color: rgba(0,11,88,.12); } .mesa-sim__nav-current { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 6px; } .mesa-sim__nav-n { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--vaas-blue-deep); color: #fff; font-family: var(--font-display); font-size: 13px; display: flex; align-items: center; justify-content: center; } .mesa-sim__nav-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mesa-sim__nav-body b { font-family: var(--font-display); font-size: 14px; color: var(--vaas-blue-deep); line-height: 1.2; } .mesa-sim__nav-body span { font-family: var(--font-display); font-size: 11.5px; color: rgba(0,11,88,.55); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mesa-sim__nav-of { font-family: var(--font-mono, var(--font-display)); font-size: 11px; color: rgba(0,11,88,.5); letter-spacing: 0.04em; align-self: center; } /* Chrome minimizado: oculta barra do browser-mock, breadcrumbs, busca, abas de workflow e botões/menus excessivos. ----------- */ #sim .mesa-sim__bar { display: none !important; } #sim .mesa-kb__bc, #sim .mesa-do__bc, #sim .mesa-pn__bc { display: none !important; } #sim .mesa-kb__h-search { display: none !important; } #sim .mesa-kb__h { justify-content: flex-start; } #sim .mesa-kb__wf { display: none !important; } #sim .mesa-do__h-actions { display: none !important; } #sim .mesa-do__rulesH-sub { display: none !important; } /* Popover "Atribuir analista" sobre o card do kanban: oculto no mobile. */ #sim .mesa-kb__card-pop { display: none !important; } /* Stage sem cantos arredondados pesados, sem altura mínima fixa */ #sim .mesa-sim__stage { min-height: 0 !important; } } /* ============================================================ Mobile: alinhar todos os textos à esquerda. Foco: section heads, hero headers e CTAs. Mantém centralizações intencionais dentro de cards, KPI cells, donuts, dots, badges etc. ============================================================ */ @media (max-width: 720px) { /* Section heads em todas as páginas */ .v-section-head, .v-section-head .v-section-sub, .pv-section-head, .pv-section-head--center, .pv-section-head--center .pv-sub, .cr-sec__head, .ks-sec__head, .ks-hero__header, .ks-roi-sec__head, .pr-section-head, .pr-mesa__config-head, .dh-how__head, .dh-bsec__head, .dh-bsec__head--center, .dh-hub__head, .dh-hub__foot, .dh-any__head, .cp-head, .ia-mid__head, .ia-sum__head, .v-rich__head, .v-hero-c, .v-hero-c__proof, .mt-videos__head, .ks-cta2, .ks-cta2__inner, .sb-careers__head { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* Sections that should remain centered on mobile (override the rule above). */ .v-areas .v-section-head, .v-areas .v-section-head .v-section-sub { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .v-areas .v-eyebrow--center { justify-content: center !important; } /* Eyebrows/titles/subs dentro de section heads centralizados */ .ia-sum__head .pv-eyebrow, .ia-sum__head .pv-title, .ia-sum__head .pv-sub, .ia-mid__head .pv-eyebrow, .ia-mid__head .pv-title, .ia-mid__head .pv-sub { text-align: left !important; justify-content: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; } /* Restaura inline-flex pra eyebrow que usa display:inline-flex */ .ia-sum__head .pv-eyebrow, .ia-mid__head .pv-eyebrow { display: inline-flex !important; } }