/* ==========================================================================
   Vamob Core — mockups, formulário de leads e botão de WhatsApp.
   Os mockups usam "em" e escalam com a largura do contêiner (container queries),
   então a ilustração inteira encolhe sem quebrar em qualquer tela.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Mockups — base
   ---------------------------------------------------------------------- */
.vmk-wrap { container-type: inline-size; width: 100%; }

.vmk {
	--k-ink: #071b3a;
	--k-navy: #0a3468;
	--k-blue: #045ba3;
	--k-teal: #1aaa91;
	--k-teal-d: #0e7c69;
	--k-line: #e3e9f0;
	--k-soft: #f5f8fb;
	--k-text: #3f4f68;
	--k-muted: #6b7a90;
	--brand: var(--k-teal);
	--on-brand: #071b3a;
	position: relative;
	color: var(--k-text);
	font-family: inherit;
	font-size: 12px;
	font-size: calc(100cqw / 50);
	line-height: 1.3;
	-webkit-user-select: none;
	user-select: none;
}

.vmk *,
.vmk *::before,
.vmk *::after { box-sizing: border-box; }
.vmk b { font-weight: 800; color: var(--k-ink); }
.vmk small { display: block; font-size: 0.7em; font-weight: 600; color: var(--k-muted); }

.vmk-caption { margin: 14px 0 0; text-align: center; font-size: 0.75rem; line-height: 1.4; color: #7b8aa0; }
.vm-section--dark .vmk-caption { color: rgba(255, 255, 255, 0.55); }

.vmk-logo {
	flex: none;
	width: 1.9em;
	height: 1.9em;
	border-radius: 0.55em;
	background: linear-gradient(135deg, var(--k-blue), var(--k-teal));
}

@keyframes vmk-pulse { 0% { transform: scale(0.6); opacity: 0.55; } 100% { transform: scale(2.4); opacity: 0; } }
.vmk-pulse { transform-box: fill-box; transform-origin: center; animation: vmk-pulse 2.6s ease-out infinite; }
.vmk-d2 { animation-delay: 0.8s; }
.vmk-d3 { animation-delay: 1.6s; }

/* Janela do painel */
.vmk-win {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--k-line);
	border-radius: 1.3em;
	box-shadow: 0 2px 4px rgba(7, 27, 58, 0.04), 0 30px 60px -20px rgba(7, 27, 58, 0.28);
}

.vmk-win__bar { display: flex; align-items: center; gap: 0.5em; height: 2.7em; padding: 0 1em; background: var(--k-soft); border-bottom: 1px solid var(--k-line); }
.vmk-win__bar i { width: 0.7em; height: 0.7em; border-radius: 50%; background: #ff9b9b; }
.vmk-win__bar i:nth-child(2) { background: #ffd166; }
.vmk-win__bar i:nth-child(3) { background: #6fdcb0; }
.vmk-win__bar span { margin-left: 0.8em; font-size: 0.78em; font-weight: 600; color: var(--k-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vmk-win__body { flex: 1; display: grid; grid-template-columns: 7.8em minmax(0, 1fr); min-height: 0; }
.vmk-side { display: flex; flex-direction: column; gap: 0.3em; padding: 1em 0.8em; background: #fbfcfe; border-right: 1px solid var(--k-line); }
.vmk-brandtile { display: flex; align-items: center; gap: 0.55em; margin-bottom: 0.7em; font-size: 0.85em; }
.vmk-brandtile .vmk-logo { width: 1.7em; height: 1.7em; }
.vmk-nav-i { display: flex; align-items: center; gap: 0.55em; padding: 0.5em 0.55em; border-radius: 0.6em; font-size: 0.78em; font-weight: 600; color: var(--k-muted); white-space: nowrap; }
.vmk-nav-i::before { content: ""; flex: none; width: 0.9em; height: 0.9em; border-radius: 0.28em; background: #d3dce8; }
.vmk-nav-i.is-on { background: #e6f7f3; color: var(--k-teal-d); }
.vmk-nav-i.is-on::before { background: var(--k-teal); }

.vmk-main { display: flex; flex-direction: column; gap: 0.8em; min-width: 0; padding: 1em; }
.vmk-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7em; }
.vmk-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vmk-kpi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4em; padding: 0.65em 0.8em; background: #fff; border: 1px solid var(--k-line); border-radius: 0.85em; }
.vmk-kpi small { flex: 0 0 100%; }
.vmk-kpi b { font-size: 1.4em; letter-spacing: -0.02em; line-height: 1.2; }
.vmk-up { font-size: 0.72em; font-weight: 800; color: var(--k-teal-d); }

.vmk-map { position: relative; flex: 1; min-height: 6em; overflow: hidden; border-radius: 0.9em; background: #e8eff6; }
.vmk-map svg,
.vmk-app-map svg,
.vmk-co__map svg { display: block; width: 100%; height: 100%; }

/* Telefones */
.vmk-phone {
	position: absolute;
	width: 27.5%;
	aspect-ratio: 9 / 18.6;
	padding: 0.5em;
	background: var(--k-ink);
	border-radius: 2.3em;
	box-shadow: 0 30px 50px -14px rgba(7, 27, 58, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.vmk-phone::after { content: ""; position: absolute; top: 0.95em; left: 50%; width: 26%; height: 0.75em; transform: translateX(-50%); border-radius: 1em; background: #000; z-index: 3; }
.vmk-screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; background: #fff; border-radius: 1.85em; }

.vmk-app-top { display: flex; align-items: center; gap: 0.5em; padding: 2.1em 0.9em 0.55em; font-size: 0.8em; }
.vmk-app-top .vmk-logo { width: 1.7em; height: 1.7em; }
.vmk-app-map { flex: 1; min-height: 0; margin: 0 0.6em; overflow: hidden; border-radius: 0.9em; }
.vmk-sheet { display: flex; flex-direction: column; gap: 0.55em; margin-top: auto; padding: 0.7em 0.65em 0.9em; }
.vmk-input { display: flex; align-items: center; gap: 0.5em; padding: 0.7em 0.7em; font-size: 0.7em; font-weight: 600; color: var(--k-muted); background: var(--k-soft); border: 1px solid var(--k-line); border-radius: 0.9em; }
.vmk-input i { flex: none; width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--k-teal); box-shadow: 0 0 0 0.25em rgba(26, 170, 145, 0.2); }
.vmk-eta { display: flex; align-items: center; gap: 0.6em; padding: 0.6em; background: #eefaf7; border-radius: 0.9em; }
.vmk-eta b { display: block; font-size: 0.72em; line-height: 1.25; }
.vmk-avatar { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: linear-gradient(135deg, #c9d6e6, #9fb3cb); }
.vmk-cta { padding: 0.8em; font-size: 0.75em; font-weight: 800; text-align: center; color: var(--on-brand); background: var(--brand); border-radius: 0.9em; }

.vmk-drv-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; padding: 2.1em 0.9em 0.5em; }
.vmk-drv-top b { font-size: 0.8em; }
.vmk-online { padding: 0.25em 0.6em 0.25em 0.9em; font-size: 0.62em; font-weight: 800; color: var(--k-teal-d); background: #e2f6f1; border-radius: 1em; position: relative; }
.vmk-online::before { content: ""; position: absolute; left: 0.4em; top: 50%; width: 0.4em; height: 0.4em; margin-top: -0.2em; border-radius: 50%; background: var(--k-teal); }
.vmk-earn { margin: 0.2em 0.65em; padding: 0.7em 0.85em; color: #fff; background: linear-gradient(150deg, var(--k-navy), var(--k-ink)); border-radius: 0.95em; }
.vmk-earn small { color: rgba(255, 255, 255, 0.7); font-size: 0.6em; }
.vmk-earn b { color: #fff; font-size: 1.5em; letter-spacing: -0.02em; }
.vmk-req { display: flex; flex-direction: column; gap: 0.55em; margin: 0.35em 0.65em 0; padding: 0.75em; border: 1px solid var(--k-line); border-radius: 0.95em; }
.vmk-tag { align-self: flex-start; padding: 0.2em 0.6em; font-size: 0.6em; font-weight: 800; color: var(--k-navy); background: #e6f0fa; border-radius: 1em; }
.vmk-route-lines { display: flex; flex-direction: column; gap: 0.5em; font-size: 0.68em; font-weight: 600; color: var(--k-ink); }
.vmk-route-lines span { display: flex; align-items: center; gap: 0.6em; }
.vmk-route-lines i { flex: none; width: 0.85em; height: 0.85em; border-radius: 50%; }
.vmk-dot-a { background: var(--k-ink); }
.vmk-dot-b { background: var(--k-teal); }
.vmk-req__meta { display: flex; align-items: baseline; justify-content: space-between; }
.vmk-req__meta b { font-size: 1.1em; }
.vmk-req__btns { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0.45em; }
.vmk-req__btns span { padding: 0.65em 0.2em; font-size: 0.68em; font-weight: 800; text-align: center; color: var(--k-ink); border: 1px solid var(--k-line); border-radius: 0.8em; }
.vmk-req__btns .is-go { color: #071b3a; background: var(--k-teal); border-color: var(--k-teal); }
.vmk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin: 0.55em 0.65em 0; }
.vmk-stats div { padding: 0.55em 0.65em; background: var(--k-soft); border-radius: 0.8em; }
.vmk-stats b { display: block; margin-top: 0.15em; font-size: 1.05em; }
.vmk-tabbar { display: flex; justify-content: space-around; margin-top: auto; padding: 0.7em 0.8em 0.95em; border-top: 1px solid var(--k-line); }
.vmk-tabbar i { width: 1.15em; height: 1.15em; border-radius: 0.35em; background: #d3dce8; }
.vmk-tabbar i:first-child { background: var(--k-teal); }

/* -------------------------------------------------------------------------
   Mockup: hero
   ---------------------------------------------------------------------- */
/* A largura máxima fica no wrapper (é ele que define a escala dos "em" via cqw). */
.vmk-wrap--hero,
.vmk-wrap--wl { max-width: 640px; margin-inline: auto; }
.vmk-hero { width: 100%; aspect-ratio: 600 / 570; }
.vmk-glow { position: absolute; inset: 6% 0 0 6%; background: radial-gradient(closest-side, rgba(26, 170, 145, 0.24), transparent 70%); filter: blur(10px); }
.vmk-hero .vmk-win { position: absolute; left: 0; top: 0; width: 88%; height: 66%; }
.vmk-hero .vmk-phone--a { left: 3%; top: 36%; }
.vmk-hero .vmk-phone--b { right: 0; top: 27%; }

/* -------------------------------------------------------------------------
   Mockup: hero animado (ciclo de 9s: chamada → aceite → carro no mapa → chegada)
   Estado padrão = cena parada e legível; as animações ficam no bloco de movimento.
   ---------------------------------------------------------------------- */
.vmk-livepill { position: relative; margin-left: auto; padding: 0.22em 0.75em 0.22em 1.45em; font-size: 0.72em; font-style: normal; font-weight: 800; color: var(--k-teal-d); background: #e2f6f1; border-radius: 1em; }
.vmk-livepill::before { content: ""; position: absolute; left: 0.55em; top: 50%; width: 0.5em; height: 0.5em; margin-top: -0.25em; border-radius: 50%; background: var(--k-teal); }

.vmk-cnt { position: relative; display: inline-block; }
.vmk-cnt .c2 { position: absolute; left: 0; top: 0; opacity: 0; }
.vmk-toast { position: absolute; top: 0.7em; right: 0.7em; display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.85em; font-size: 0.74em; font-weight: 700; color: var(--k-ink); background: #fff; border: 1px solid var(--k-line); border-radius: 0.85em; box-shadow: 0 10px 22px -8px rgba(7, 27, 58, 0.4); opacity: 0; z-index: 2; }
.vmk-toast i { flex: none; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--k-teal); }

/* Passageiro: estados do tempo de chegada */
.vmk-eta { position: relative; padding-bottom: 1.15em; }
.vmk-eta__txt { position: relative; flex: 1; min-height: 2.3em; }
.vmk-eta__s { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; }
.vmk-eta__s.s1 { opacity: 1; }
.vmk-eta__bar { position: absolute; left: 0.6em; right: 0.6em; bottom: 0.4em; height: 0.3em; overflow: hidden; border-radius: 1em; background: rgba(26, 170, 145, 0.2); }
.vmk-eta__bar i { display: block; height: 100%; background: var(--k-teal); transform-origin: left; transform: scaleX(0.6); }

/* Motorista: ganhos, chamada, cronômetro e aceite */
.vmk-earn { position: relative; }
.vmk-earn__v { position: relative; display: block; height: 1.75em; }
.vmk-earn__v b { position: absolute; left: 0; top: 0; }
.vmk-earn__v .e2 { opacity: 0; }
.vmk-earn__plus { position: absolute; right: 0.85em; top: 1.5em; font-size: 0.74em; font-weight: 800; color: #7fe9cf; opacity: 0; }
.vmk-reqwrap { position: relative; margin: 0.35em 0.65em 0; }
.vmk-reqwrap .vmk-req { margin: 0; }
.vmk-req--ok { position: absolute; inset: 0; justify-content: center; align-items: center; gap: 0.25em; text-align: center; background: #f0fbf8; border-color: #bfeadf; opacity: 0; }
.vmk-req--ok b { font-size: 0.9em; }
.vmk-req--ok small { font-size: 0.62em; }
.vmk-ok__ic { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; color: #fff; background: var(--k-teal); }
.vmk-ok__ic svg { width: 1.3em; height: 1.3em; stroke-width: 3; }
.vmk-req--idle { position: absolute; inset: 0; justify-content: center; align-items: center; gap: 0.3em; text-align: center; opacity: 0; }
.vmk-req--idle b { font-size: 0.9em; }
.vmk-req--idle small { font-size: 0.66em; }
.vmk-radar { position: relative; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--k-teal); box-shadow: 0 0 0 0.35em rgba(26, 170, 145, 0.18); }
.vmk-timer { height: 0.3em; overflow: hidden; border-radius: 1em; background: #e3efec; }
.vmk-timer i { display: block; height: 100%; background: var(--k-teal); transform-origin: left; transform: scaleX(0.55); }
.vmk-push { position: absolute; top: 2.6em; left: 0.6em; right: 0.6em; z-index: 4; display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.7em; color: #fff; background: rgba(7, 27, 58, 0.95); border-radius: 0.95em; box-shadow: 0 12px 26px -8px rgba(7, 27, 58, 0.65); opacity: 0; }
.vmk-push svg { flex: none; width: 1.35em; height: 1.35em; color: #7fe9cf; }
.vmk-push b { display: block; font-size: 0.72em; color: #fff; line-height: 1.2; }
.vmk-push small { color: rgba(255, 255, 255, 0.78); font-size: 0.62em; }

@media (prefers-reduced-motion: no-preference) {
	/* Passageiro */
	.vmk-eta__s.s0 { animation: vmk-s0 9s infinite; }
	.vmk-eta__s.s1 { animation: vmk-s1 9s infinite; }
	.vmk-eta__s.s2 { animation: vmk-s2 9s infinite; }
	.vmk-eta__s.s3 { animation: vmk-s3 9s infinite; }
	.vmk-eta__s.s4 { animation: vmk-s4 9s infinite; }
	.vmk-eta__bar i { animation: vmk-etabar 9s linear infinite; }
	.vmk-hero .vmk-cta { animation: vmk-cta 2.4s ease-in-out infinite; }
	@keyframes vmk-s0 { 0%, 24% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; transform: translateY(-0.35em); } }
	@keyframes vmk-s1 { 0%, 28% { opacity: 0; transform: translateY(0.35em); } 33%, 46% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-0.35em); } }
	@keyframes vmk-s2 { 0%, 48% { opacity: 0; transform: translateY(0.35em); } 52%, 66% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(-0.35em); } }
	@keyframes vmk-s3 { 0%, 68% { opacity: 0; transform: translateY(0.35em); } 72%, 86% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-0.35em); } }
	@keyframes vmk-s4 { 0%, 88% { opacity: 0; transform: translateY(0.35em); } 92%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
	@keyframes vmk-etabar { 0%, 33% { transform: scaleX(0.04); } 90%, 100% { transform: scaleX(1); } }
	@keyframes vmk-cta { 0%, 100% { box-shadow: 0 0 0 0 rgba(26, 170, 145, 0.5); } 60% { box-shadow: 0 0 0 0.6em rgba(26, 170, 145, 0); } }

	/* Motorista */
	.vmk-push { animation: vmk-push 9s infinite; }
	.vmk-req--new { animation: vmk-new 9s infinite; }
	.vmk-req--ok { animation: vmk-ok 9s infinite; }
	.vmk-req--idle { animation: vmk-idle 9s infinite; }
	.vmk-radar { animation: vmk-radar 1.8s ease-out infinite; }
	.vmk-timer i { animation: vmk-timer 9s linear infinite; }
	.vmk-req__btns .is-go { animation: vmk-accept 9s infinite; }
	.vmk-earn__v .e1 { animation: vmk-e1 9s infinite; }
	.vmk-earn__v .e2 { animation: vmk-e2 9s infinite; }
	.vmk-earn__plus { animation: vmk-plus 9s infinite; }
	@keyframes vmk-push { 0% { opacity: 0; transform: translateY(-1.4em); } 3%, 14% { opacity: 1; transform: none; } 18%, 100% { opacity: 0; transform: translateY(-1.4em); } }
	@keyframes vmk-new { 0%, 2% { opacity: 0; transform: translateY(16%) scale(0.97); } 8%, 27% { opacity: 1; transform: none; } 31%, 100% { opacity: 0; transform: scale(0.97); } }
	@keyframes vmk-ok { 0%, 28% { opacity: 0; transform: scale(0.94); } 34%, 86% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; } }
	@keyframes vmk-idle { 0%, 3% { opacity: 1; } 6%, 89% { opacity: 0; } 94%, 100% { opacity: 1; } }
	@keyframes vmk-radar { 0% { box-shadow: 0 0 0 0.1em rgba(26, 170, 145, 0.45); } 100% { box-shadow: 0 0 0 1.1em rgba(26, 170, 145, 0); } }
	@keyframes vmk-timer { 0%, 8% { transform: scaleX(1); } 27%, 100% { transform: scaleX(0.1); } }
	@keyframes vmk-accept { 0%, 12% { box-shadow: 0 0 0 0 rgba(26, 170, 145, 0.55); transform: none; } 22% { box-shadow: 0 0 0 0.5em rgba(26, 170, 145, 0); } 25% { transform: none; } 27% { transform: scale(0.92); } 30%, 100% { transform: none; box-shadow: none; } }
	@keyframes vmk-e1 { 0%, 30% { opacity: 1; } 34%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
	@keyframes vmk-e2 { 0%, 30% { opacity: 0; } 34%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
	@keyframes vmk-plus { 0%, 29% { opacity: 0; transform: translateY(0.5em); } 34% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translateY(-0.5em); } 58%, 100% { opacity: 0; transform: translateY(-0.9em); } }

	/* Painel: a corrida aceita entra no painel em tempo real */
	.vmk-cnt .c1 { animation: vmk-e1 9s infinite; }
	.vmk-cnt .c2 { animation: vmk-e2 9s infinite; }
	.vmk-toast { animation: vmk-toast 9s infinite; }
	.vmk-livepill::before { animation: vmk-blink 1.6s ease-in-out infinite; }
	@keyframes vmk-toast { 0%, 30% { opacity: 0; transform: translateY(-0.7em); } 35%, 55% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; transform: translateY(-0.7em); } }
	@keyframes vmk-blink { 50% { opacity: 0.3; } }

	/* Profundidade: os celulares flutuam de leve */
	.vmk-hero .vmk-phone--a { animation: vmk-bob 7s ease-in-out infinite; }
	.vmk-hero .vmk-phone--b { animation: vmk-bob 8s ease-in-out -3s infinite; }
	@keyframes vmk-bob { 50% { transform: translateY(-0.6em); } }
}

/* -------------------------------------------------------------------------
   Mockup: painel administrativo
   1em = 14px na largura original (1874px); tudo é em "em" e escala com o contêiner.
   ---------------------------------------------------------------------- */
.vmk-wrap--dash { max-width: 1120px; margin-inline: auto; }
.vmk-dash { font-size: 8px; font-size: calc(100cqw / 134); }
.vmk-dash .vmk-win { position: relative; box-shadow: 0 2px 4px rgba(7, 27, 58, 0.05), 0 40px 80px -30px rgba(7, 27, 58, 0.34); }
.vmk-dash .vmk-win__bar { height: 2.4em; }
.vmk-dash .vmk-win__bar span { font-size: 0.85em; }

.vmp { --y: #ffb800; color: #111; background: #fafafa; font-size: 1em; line-height: 1.35; }
.vmp svg { display: block; width: 1.15em; height: 1.15em; flex: none; }
.vmp-top { display: flex; align-items: center; justify-content: space-between; height: 5.3em; padding: 0 1em; background: #fff; border-bottom: 1px solid #ececec; }
.vmp-nav { display: flex; align-items: center; gap: 0.35em; }
.vmp-item { display: flex; align-items: center; gap: 0.5em; padding: 0.7em 0.95em; border-radius: 0.7em; font-size: 1.03em; font-weight: 500; color: #333; white-space: nowrap; }
.vmp-item svg { color: #555; }
.vmp-item.is-on { background: var(--y); color: #1a1300; font-weight: 600; }
.vmp-item.is-on svg { color: #1a1300; }
.vmp-chev svg { width: 0.9em; height: 0.9em; margin-left: -0.1em; color: #777; }
.vmp-user { display: flex; align-items: center; gap: 0.8em; padding-left: 1.4em; border-left: 1px solid #ececec; }
.vmp-user__shield { color: #eab308; }
.vmp-user__txt { display: flex; flex-direction: column; line-height: 1.2; }
.vmp-user__name { font-size: 0.86em; font-weight: 600; color: #111; }
.vmp-user__role { font-size: 0.75em; color: #8a8a8a; }
.vmp-user__out { color: #777; }

.vmp-body { padding: 2em 0.8em 1.6em; }
.vmp-title { font-size: 1.75em; font-weight: 700; letter-spacing: -0.01em; color: #111; line-height: 1.2; }
.vmp-sub { margin-top: 0.15em; font-size: 0.93em; color: #666; }
.vmp-g { display: grid; gap: 1.05em; margin-top: 1.7em; }
.vmp-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vmp-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vmp-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vmp-mt { margin-top: 1.05em; }

.vmp-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.15em 1.15em 1.1em; background: #fff; border: 1px solid #e8e8e8; border-radius: 1.15em; }
.vmp-cardh { display: flex; align-items: center; justify-content: space-between; font-size: 0.97em; font-weight: 500; color: #222; }
.vmp-cardt { display: flex; align-items: center; gap: 0.7em; font-size: 1.15em; font-weight: 600; color: #111; }
.vmp-ic svg { width: 1.3em; height: 1.3em; }
.vmp-num { font-size: 1.75em; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #111; }
.vmp-note { font-size: 0.82em; color: #666; }
.vmp-tiny { font-size: 0.72em; color: #8f8f8f; }
.vmp-r { text-align: right; }
.vmp-p { margin-top: 1.1em; font-size: 1em; color: #444; }

.vmp-kpi { min-height: 10.4em; }
.vmp-kpi__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin-top: 1.5em; }
.vmp-kpi__row.is-bottom { align-items: flex-end; }
.vmp-flat { min-height: 7.3em; }
.vmp-chips { display: flex; flex-wrap: wrap; gap: 0.65em; margin-top: 1em; }
.vmp-chips span { padding: 0.42em 1em; border-radius: 999px; background: #fef3c7; color: #6b4b00; font-size: 0.87em; font-weight: 500; }

.vmp-h2 { margin-top: 1.7em; font-size: 1.3em; font-weight: 700; color: #111; }
.vmp-week { min-height: 12.6em; }
.vmp-week .vmp-num { margin-top: 0.55em; }
.vmp-empty { margin-top: auto; padding-bottom: 1.4em; text-align: center; font-size: 0.83em; color: #9a9a9a; }
.vmp-cap { margin-top: 1.5em; font-size: 0.82em; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: #8a8a8a; }
.vmp-origin { margin-top: 0.6em; }
.vmp-origin .vmp-card { min-height: 11.5em; }
.vmp-dotl { display: flex; align-items: center; gap: 0.55em; font-size: 0.88em; font-weight: 500; color: #333; }
.vmp-dotl i { width: 0.6em; height: 0.6em; border-radius: 50%; }
.vmp-origin .vmp-num { margin-top: 0.75em; }
.vmp-money { font-size: 1em; color: #333; }
.vmp-bar { height: 0.55em; margin: 0.6em 0 0.55em; border-radius: 999px; background: #efefef; overflow: hidden; }
.vmp-bar i { display: block; width: 0; height: 100%; }

.vmp-chart { min-height: 16.5em; }
.vmp-plot { position: relative; display: flex; flex: 1; align-items: flex-end; gap: 0.7em; margin-top: 1em; padding-top: 1em; }
.vmp-col { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 0.6em; }
.vmp-col i { display: block; width: 100%; height: 0.16em; border-radius: 1em; }
.vmp-col i.is-gray { background: #e6e6e6; }
.vmp-col i.is-yellow { background: #facc15; }
.vmp-col i.is-gold { background: #eab308; height: 0.22em; }
.vmp-col em { font-size: 0.78em; font-style: normal; color: #999; }
.vmp-zero { position: absolute; top: 0.4em; right: 4.6em; font-size: 0.72em; font-weight: 700; color: #111; }
.vmp-legend { display: flex; gap: 1.1em; margin-top: 0.9em; font-size: 0.85em; color: #555; }
.vmp-legend span { display: flex; align-items: center; gap: 0.5em; }
.vmp-legend i { width: 0.6em; height: 0.6em; border-radius: 50%; }

/* Celular: versão resumida (menos colunas, sem gráficos) */
@container (max-width: 700px) {
	.vmk-dash { font-size: calc(100cqw / 44); }
	.vmp-top { height: 4.6em; }
	.vmp-item:not(.is-on),
	.vmp-user__txt,
	.vmp-user__out { display: none; }
	.vmp-user { padding-left: 0.8em; }
	.vmp-g3,
	.vmp-g2 { grid-template-columns: minmax(0, 1fr); }
	.vmp-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vmp-kpi,
	.vmp-week { min-height: 0; }
	.vmp-kpi__row { margin-top: 1em; }
	.vmp-week .vmp-empty { margin-top: 1.2em; padding-bottom: 0; }
	.vmp-charts { display: none; }
}

/* -------------------------------------------------------------------------
   Mockup: white-label
   ---------------------------------------------------------------------- */
.vmk-wl { display: flex; flex-direction: column; align-items: center; width: 100%; font-size: 11px; font-size: calc(100cqw / 54); color: #fff; }
.vmk-wl__pill { display: flex; align-items: center; gap: 1.1em; padding: 0.9em 1.6em; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 1.5em; box-shadow: 0 0 0 0.7em rgba(26, 170, 145, 0.08); }
.vmk-wl__pill img { display: block; width: auto; height: 3.1em; }
.vmk-wordmark { color: #fff; font-size: 1.6em; letter-spacing: 0.06em; }
.vmk-wl__pill span { padding-left: 1.1em; font-size: 0.82em; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #3cc4aa; border-left: 1px solid rgba(255, 255, 255, 0.25); }
.vmk-wl__lines { display: block; width: 100%; height: 5.4em; margin: 0.4em 0; color: rgba(255, 255, 255, 0.42); }
.vmk-wl__lines path { animation: vmk-flow 2.4s linear infinite; }
@keyframes vmk-flow { to { stroke-dashoffset: -16; } }
.vmk-wl__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; width: 100%; }
.vmk-co { display: flex; flex-direction: column; align-items: center; gap: 0.45em; text-align: center; }
.vmk-co .vmk-phone { position: relative; width: 78%; }
.vmk-co__head { display: flex; align-items: center; gap: 0.6em; padding: 2.2em 0.8em 0.75em; color: var(--on-brand); background: var(--brand); }
.vmk-co__head b { color: var(--on-brand); font-size: 0.82em; }
.vmk-co__logo { display: grid; flex: none; place-items: center; width: 1.9em; height: 1.9em; font-size: 0.9em; font-weight: 800; color: var(--brand); background: var(--on-brand); border-radius: 50%; }
.vmk-co__map { flex: 1; min-height: 0; margin: 0.65em 0.65em 0; overflow: hidden; border-radius: 0.85em; }
.vmk-co__map svg path[stroke="#1aaa91"] { stroke: var(--brand); }
.vmk-co__map svg path[fill="#1aaa91"] { fill: var(--brand); }
.vmk-co__body { display: flex; flex-direction: column; gap: 0.5em; margin-top: auto; padding: 0.7em 0.65em 0.95em; }
.vmk-sk { display: block; height: 0.7em; border-radius: 0.4em; background: #e6ecf3; }
.vmk-sk--s { width: 60%; }
.vmk-co__btn { padding: 0.8em; font-size: 0.72em; font-weight: 800; color: var(--on-brand); background: var(--brand); border-radius: 0.9em; }
.vmk-co__name { margin-top: 0.7em; font-size: 1.1em; font-weight: 800; color: #fff; }
.vmk-co__sub { font-size: 0.74em; color: rgba(255, 255, 255, 0.62); }

/* -------------------------------------------------------------------------
   Formulário de leads
   ---------------------------------------------------------------------- */
.vm-form-card {
	padding: clamp(24px, 4vw, 40px);
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 2px 4px rgba(7, 27, 58, 0.06), 0 30px 60px -20px rgba(2, 10, 26, 0.5);
}

.vm-form { display: flex; flex-direction: column; gap: 18px; font-family: var(--vm-font, inherit); color: #071b3a; text-align: left; }
.vm-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vm-field label { font-size: 0.85rem; font-weight: 700; color: #071b3a; }

.vm-field input,
.vm-field select {
	width: 100%;
	height: 52px;
	padding: 0 14px;
	border: 1.5px solid #d5deea;
	border-radius: 12px;
	background: #fff;
	color: #071b3a;
	font: inherit;
	font-size: 1rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.vm-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.vm-field input::placeholder { color: #98a5b8; }
.vm-field input:focus,
.vm-field select:focus { outline: none; border-color: #1aaa91; box-shadow: 0 0 0 4px rgba(26, 170, 145, 0.18); }
.vm-field [aria-invalid="true"] { border-color: #d92d20; box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.1); }
.vm-field__error { font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: #b42318; }
.vm-field__error[hidden] { display: none; }

.vm-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.vm-consent label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; line-height: 1.5; color: #3f4f68; cursor: pointer; }
.vm-consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #1aaa91; cursor: pointer; }
.vm-consent a { color: #045ba3; text-decoration: underline; text-underline-offset: 2px; }
.vm-consent .vm-field__error { display: block; margin: 6px 0 0 30px; }

.vm .vm-form .vm-form__submit { width: 100%; min-height: 54px; }
.vm .vm-form .vm-form__submit[disabled] { opacity: 0.65; cursor: progress; transform: none; }
.vm .vm-form .vm-form__status { min-height: 1.4em; margin: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: #0e7c69; }
.vm .vm-form .vm-form__status.is-error { color: #b42318; }

@media (max-width: 599px) {
	.vm-form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   Botão flutuante de WhatsApp (só existe se houver número em Vamob > Configurações)
   ---------------------------------------------------------------------- */
.vm-wa {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 70;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	color: #fff;
	background: #25d366;
	box-shadow: 0 10px 26px rgba(7, 27, 58, 0.28);
	transition: transform 0.2s, box-shadow 0.2s;
}

.vm-wa:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 30px rgba(7, 27, 58, 0.34); }
.vm-wa svg { width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce) {
	.vmk-pulse,
	.vmk-live::before,
	.vmk-wl__lines path { animation: none; }
}