/* Movra · complementos à folha do site (styles.css, compartilhada): hero com telas,
   faixa de promessas, telas em moldura, planos, perguntas e conversa. Mesmos tokens. */

/* Marca do produto: símbolo em cobalto, palavra em tinta (no rodapé, ambos em papel) */
.logo-movra svg { color: var(--cobalto); }
/* Marca do produto ancorada na da empresa: o "by Dynamis Works" é o caminho de volta ao site. */
.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-by { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid var(--linha);
  font: 500 12px/1 var(--body); color: var(--ardosia); text-decoration: none; white-space: nowrap; transition: color .2s var(--ease); }
.logo-by svg { width: 16px; height: 16px; color: var(--tinta); }
.logo-by-name { font-weight: 600; }
.logo-by:hover, .logo-by:focus-visible { color: var(--tinta); }
@media (max-width: 360px) { .logo-by-word { display: none; } .logo-by { padding-left: 8px; } }
.site-footer .logo-movra svg { color: var(--papel); }
.hero-movra .eyebrow { margin-bottom: calc(var(--s3) * -1); }

/* HERO: texto + duas telas sobrepostas (navegador e celular) */
.hero-movra { padding-bottom: clamp(48px, 7vw, 104px); }
.hero-movra .hero-copy { gap: var(--s4); }
.hero-movra h1 { font-size: clamp(40px, 6.4vw, 92px); }
/* INTEGRAÇÕES na capa: os sistemas que a associação já usa, ditos pelo nome, como
   na proposta. Quem é do setor reconhece o SGA e o CRM antes de ler o resto. */
.integrations { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.integrations-label { font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ardosia); }
.integrations ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.integrations li { padding: 7px 13px; border: 1px solid var(--linha); border-radius: 999px;
  font: 600 14px/1 var(--body); color: var(--tinta); white-space: nowrap; }

.price-tag { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; max-width: none; }
.price-tag b { font: 800 clamp(22px, 2.4vw, 30px)/1.1 var(--display); letter-spacing: -.03em; }
.price-tag span { color: var(--ardosia); font-size: 15px; }
/* No celular as duas telas empilham: sobrepostas, o telefone fica estreito demais para o
   próprio conteúdo e corta os cartões por dentro. A sobreposição volta quando há largura. */
.hero-shots { display: grid; width: min(100%, 640px); margin-inline: auto; }
.hero-shots .mock-site { width: 100%; }
.hero-shots .mock-member { width: min(62%, 240px); min-width: 212px; justify-self: end; margin-top: -14%; box-shadow: 0 30px 60px -24px rgb(14 18 48 / .45); }
@media (min-width: 680px) {
  .hero-shots { display: block; position: relative; padding-bottom: 12%; }
  .hero-shots .mock-site { width: 88%; }
  .hero-shots .mock-member { position: absolute; right: 0; bottom: 0; width: 34%; min-width: 212px; margin-top: 0; }
}
@media (min-width: 1024px) {
  .hero-movra .hero-grid { grid-template-columns: 6fr 6fr; }
  .hero-shots { margin-inline: 0; justify-self: end; }
}

/* PROMESSAS: faixa escura, uma coluna por área do produto (4) */
.promises { background: var(--tinta); color: var(--papel); padding-block: clamp(48px, 7vw, 96px); }
.promises-grid { display: grid; gap: var(--s5) var(--s4); }
.promises-grid li { display: grid; gap: var(--s2); align-content: start; padding-top: var(--s4); border-top: 1px solid #3A3F68; }
.promise-area { font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--brasa); }
.promises h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.promises h2::after { content: ""; display: block; width: 36px; height: 4px; background: var(--brasa); margin-top: var(--s3); }
.promises p { color: #C9CDE6; font-size: 15px; line-height: 1.55; }
@media (min-width: 680px) { .promises-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .promises-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* RECURSOS: as linhas do site (.rows) com texto aberto na primeira */
.features .row h3 { font-size: clamp(24px, 3vw, 40px); }

/* TELAS: linhas alternadas, texto de um lado e moldura do outro */
.screens { background: var(--papel); }
.screen { display: grid; gap: var(--s5); align-items: center; padding-block: var(--s6); border-top: 1px solid var(--linha); }
.screen:last-child { padding-bottom: 0; }
.screen-copy { display: grid; gap: var(--s3); }
.screen-copy h3 { font-size: clamp(28px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.screen-photo { position: relative; overflow: hidden; border-radius: var(--radius); margin-bottom: var(--s2); }
.screen-photo img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 4; object-fit: cover; filter: var(--foto-filtro); }
.screen-photo::after { content: ""; position: absolute; inset: 0; background: var(--foto-preto); mix-blend-mode: lighten; pointer-events: none; }
.screen-shot { display: grid; justify-items: center; }
.screen-shot .mock-browser { width: 100%; }
.screen-shot .mock-phone { width: min(60%, 280px); }
.screen-duo { grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; }
.screen-duo .mock-phone { width: 100%; max-width: 280px; }
.screen-duo .mock-phone:last-child { margin-top: var(--s5); }
@media (min-width: 960px) {
  .screen { grid-template-columns: 5fr 7fr; gap: var(--s7); }
  .screen:nth-child(odd) .screen-copy { order: 2; }
}

/* MOLDURAS: navegador e celular, no desenho do protótipo. Marca fictícia com cor própria,
   para a tela não parecer nem a do cliente nem a do Movra. */
.mock { --mk: #24408C; --mk-soft: var(--ceu); --mk-dark: var(--tinta); --mk-ink: #1A1F3D; --mk-mute: #6B7190; --mk-line: #E2E5EF;
  font: 400 11px/1.35 var(--body); color: var(--mk-ink); background: var(--branco); border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; container-type: inline-size; }
.mock * { max-width: none; }
.mock-browser { box-shadow: 0 24px 48px -28px rgb(14 18 48 / .35); }
.mock-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: var(--panot); border-bottom: 1px solid var(--linha); }
.mock-bar span { width: 8px; height: 8px; border-radius: 50%; background: #CBD0E0; }
.mock-url { flex: 1; margin-left: 8px; padding: 3px 10px; background: var(--branco); border-radius: 999px; font-style: normal; font-size: 10px; color: var(--mk-mute); }
.mock-body { padding: 12px; display: grid; gap: 10px; }
.mock-flat { padding: 0; gap: 0; }
.mock-brand { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--display); letter-spacing: -.02em; color: var(--mk); }
.mock-brand i { width: 14px; height: 14px; border-radius: 4px 4px 4px 0; background: var(--mk); }
.mock-btn { display: inline-block; padding: 6px 10px; border-radius: 4px; background: var(--mk); color: #fff; font: 600 10px/1.2 var(--body); font-style: normal; white-space: nowrap; }
.mock-btn.ghost { background: transparent; border: 1px solid var(--mk-line); color: var(--mk-ink); }
.mock-btn-full { display: block; text-align: center; }
.mock-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mock-card { display: grid; gap: 4px; align-content: start; padding: 10px; border: 1px solid var(--mk-line); border-radius: 6px; background: var(--branco); }
.mock-card small { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-mute); }
.mock-card b { font: 700 15px/1.1 var(--display); letter-spacing: -.02em; }
.mock-card b.mock-sm { font-size: 11px; line-height: 1.25; }
.mock-card em { font-style: normal; font-size: 10px; color: var(--mk-mute); }
.mock-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mock-chip { font-style: normal; padding: 2px 6px; border-radius: 999px; background: #F1F2F6; color: var(--mk-mute); font-size: 9px; font-weight: 600; white-space: nowrap; }
.mock-chip.ok { background: var(--mk-soft); color: var(--mk); }
.mock-chip.warn { background: #FFF1EC; color: #B8461F; }
.mock-hello { font: 700 14px/1.1 var(--display); letter-spacing: -.02em; }
.mock-hello-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mock-crumb { font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-mute); }
.mock-sub { font-size: 10px; color: var(--mk-mute); }
.mock-banner { padding: 10px 12px; border-radius: 6px; background: linear-gradient(110deg, var(--mk-dark), #1E2A5C); color: #E8EBFA; font: 700 11px/1.25 var(--display); letter-spacing: -.01em; }

/* site público: barra de utilidade, nav, hero escuro com cotação por cima, portas de entrada */
.mock-topbar { display: flex; justify-content: space-between; gap: 10px; padding: 5px 12px; background: var(--mk-dark); color: #9AA3CE; font-size: 9px; }
.mock-topbar em { font-style: normal; }
.mock-nav { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--mk-line); }
.mock-links { display: none; flex: 1; gap: 10px; font-size: 10px; color: var(--mk-mute); }
.mock-links em { font-style: normal; }
.mock-nav .mock-btn { margin-left: auto; }
.mock-hero-dark { display: grid; gap: 10px; padding: 14px 12px; background: linear-gradient(105deg, var(--mk-dark) 40%, #1C2450); color: #E8EBFA; }
.mock-hero-copy { display: grid; gap: 6px; align-content: center; }
.mock-hero-copy small { font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8C95C6; }
.mock-hero-copy strong { font: 800 clamp(15px, 4.6cqw, 22px)/1.05 var(--display); letter-spacing: -.03em; }
.mock-hero-copy p { color: #AEB6DC; font-size: 10px; }
.mock-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 9px; color: #8C95C6; }
.mock-checks em { font-style: normal; }
.mock-checks em::before { content: "✓ "; color: var(--brasa); }
.mock-quote { display: grid; gap: 5px; padding: 10px; border-radius: 6px; background: var(--branco); color: var(--mk-ink); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .5); }
.mock-quote small { font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-mute); }
.mock-quote > b { font: 800 13px/1.15 var(--display); letter-spacing: -.02em; }
.mock-quote label { display: grid; gap: 2px; }
.mock-quote label span { font-size: 9px; color: var(--mk-mute); }
.mock-quote label i { font-style: normal; padding: 5px 8px; background: var(--branco); border: 1px solid var(--mk-line); border-radius: 4px; color: #9AA1B2; }
.mock-quote u { text-decoration: none; font-size: 8px; color: var(--mk-mute); }
.mock-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--mk-line); border-top: 1px solid var(--mk-line); }
.mock-quick span { padding: 8px 12px; background: var(--branco); font-size: 10px; font-weight: 600; color: var(--mk-ink); }
.mock-quick span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--mk); vertical-align: middle; }
@container (min-width: 380px) {
  .mock-links { display: flex; }
  .mock-hero-dark { grid-template-columns: 1fr 1fr; align-items: center; }
  .mock-quick { grid-template-columns: repeat(4, 1fr); }
}

/* celular (área do associado) */
.mock-phone { border: 6px solid var(--tinta); border-radius: 26px; background: #F6F7FB; }
.mock-phone .mock-body { padding: 14px 10px 12px; gap: 8px; }
.mock-top { display: flex; align-items: center; justify-content: space-between; }
.mock-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--mk-soft); color: var(--mk); font-weight: 700; font-size: 10px; display: grid; place-items: center; }
.mock-bill b { font-size: 20px; }
.mock-link-sm { justify-self: start; margin-top: 2px; font-size: 10px; font-weight: 600; color: var(--mk); border-bottom: 1px solid currentColor; }
.mock-plan-tag { justify-self: start; padding: 2px 6px; border-radius: 3px; background: var(--mk-soft); color: var(--mk); font-weight: 600; }
.mock-report { background: var(--mk-dark); border-color: transparent; }
.mock-report b { color: var(--branco); }
.mock-report em { color: #9AA3CE; }

/* aplicação com menu lateral (consultor, Universidade) */
.mock-app { grid-template-columns: 56px 1fr; gap: 0; padding: 0; }
.mock-side { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 12px 10px; background: #F6F7FB; border-right: 1px solid var(--mk-line); }
.mock-side .mock-brand b { display: none; }
.mock-side > i { width: 100%; height: 8px; border-radius: 3px; background: var(--mk-line); }
.mock-side > i.on { background: var(--mk); }
.mock-main { display: grid; gap: 8px; align-content: start; padding: 12px; }
.mock-search { padding: 6px 10px; border: 1px solid var(--mk-line); border-radius: 999px; background: #F6F7FB; font-size: 10px; color: #9AA1B2; }
.mock-search::before { content: "⌕ "; }
.mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mock-kpis div { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--mk-line); border-radius: 6px; }
.mock-kpis b { font: 800 18px/1 var(--display); letter-spacing: -.03em; color: var(--mk); }
.mock-kpis .alert b { color: #B8461F; }
.mock-kpis small { font-size: 8px; color: var(--mk-mute); }
.mock-two { display: grid; gap: 8px; }
.mock-list { display: grid; gap: 6px; margin-top: 2px; }
.mock-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--mk-line); font-size: 10px; }
.mock-list li:first-child { padding-top: 0; border-top: 0; }
.mock-list li.col { flex-wrap: wrap; }
.mock-list b { font: 600 10px/1.3 var(--body); }
.mock-list li.col b { flex: 1 0 100%; }
.mock-list em { font-style: normal; font-size: 9px; color: var(--mk-mute); }
.mock-link b { word-break: break-all; }
.mock-resume { background: var(--mk-soft); border-color: transparent; }
.mock-resume .mock-btn { justify-self: start; margin-top: 2px; }
.mock-done { display: flex; align-items: baseline; gap: 6px; }
.mock-done b { font: 800 22px/1 var(--display); color: var(--mk); }
.mock-done small { font-size: 9px; }
@container (min-width: 420px) {
  .mock-two { grid-template-columns: 1fr 1fr; }
  .mock-two-wide { grid-template-columns: 5fr 7fr; }
}

/* IMPLANTAÇÃO: os passos do site, sem a foto */
.how .steps { margin-bottom: 0; }

/* PLANOS */
.plans { background: var(--panot); }
.billing { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--s5); border: 1px solid var(--linha); border-radius: 999px; background: var(--branco); }
.billing-btn { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: none; color: var(--ardosia); font: 600 15px/1.2 var(--body); cursor: pointer; }
.billing-btn small { font-size: 12px; font-weight: 400; }
.billing-btn[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.plan-grid { display: grid; gap: var(--s4); align-items: start; }
.plan { position: relative; display: grid; gap: var(--s3); padding: var(--s5) var(--s4); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--radius); }
.plan h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.035em; }
.plan-for { color: var(--ardosia); font-size: 15px; min-height: 2.4em; }
.plan-price { display: flex; align-items: baseline; gap: 6px; max-width: none; }
.plan-price b { font: 800 clamp(34px, 3.4vw, 46px)/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.plan-price span { color: var(--ardosia); }
.plan-setup { font-size: 14px; color: var(--ardosia); padding-bottom: var(--s3); border-bottom: 1px solid var(--linha); max-width: none; }
.plan-setup b { color: var(--tinta); }
.plan-list { display: grid; gap: 10px; font-size: 15px; }
.plan-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.plan-list svg { width: 18px; height: 18px; color: var(--cobalto); margin-top: 3px; }
.plan .btn { justify-self: start; margin-top: var(--s2); }
.plan-featured { background: var(--cobalto); color: var(--branco); border-color: var(--cobalto); }
.plan-featured .plan-for, .plan-featured .plan-price span, .plan-featured .plan-setup { color: #C9CDE6; }
.plan-featured .plan-setup { border-color: rgb(255 255 255 / .25); } .plan-featured .plan-setup b { color: var(--branco); }
.plan-featured .plan-list svg { color: var(--brasa); }
.plan-flag { position: absolute; top: -13px; left: var(--s4); padding: 4px 10px; border-radius: 999px; background: var(--brasa); color: var(--tinta); font: 600 12px/1.3 var(--body); letter-spacing: .04em; text-transform: uppercase; }
[data-billing="monthly"] .price-year, [data-billing="yearly"] .price-month { display: none; }
.plan-notes { display: grid; gap: var(--s2); margin-top: var(--s5); font-size: 14px; color: var(--ardosia); }
.plan-notes li { padding-left: 16px; position: relative; }
.plan-notes li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--brasa); }
@media (min-width: 900px) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plan-featured { margin-top: calc(var(--s3) * -1); } }

/* PERGUNTAS: lista com details, no ritmo das linhas do site */
.faq-list { display: grid; border-top: 1px solid var(--tinta); }
.faq-list li { border-bottom: 1px solid color-mix(in srgb, var(--tinta) 25%, transparent); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s4); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list h3 { font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.02em; }
.faq-list details[open] .row-seta { transform: translateY(3px) rotate(225deg); }
.faq-list p { color: var(--ardosia); padding-bottom: var(--s4); }

/* CONVERSA: pedido de proposta, com o formulário do site (.form, .field, .chip vêm do styles.css) */
.cta-final { background: var(--tinta); color: var(--papel); }
.cta-final .lede { color: #C9CDE6; }
.cta-final h2 { font-size: clamp(34px, 5vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: var(--s4); }
.cta-grid { display: grid; gap: var(--s6); align-items: start; }
.form-row { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cta-grid { grid-template-columns: 5fr 7fr; gap: var(--s7); } .contact-copy { position: sticky; top: calc(var(--header-h) + 40px); } }

/* RODAPÉ: assinatura da Dynamis Works */
.foot-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; }
.foot-by a { display: inline-flex; align-items: center; gap: 6px; color: var(--papel); font: 600 16px/1 var(--display); letter-spacing: -.02em; }
.foot-by svg { width: 22px; height: 22px; }
@media (min-width: 720px) { .foot-movra { grid-template-columns: 2fr 1fr; } }
@media (min-width: 1024px) { .foot-movra { grid-template-columns: 3fr 6fr 2fr; } .foot-movra > div:last-child { grid-column: 3; } }

/* PLATAFORMA: tema escuro -------------------------------------------------
   As landings de plataforma (Movra e as próximas) são escuras, para não se
   confundir com o institucional claro da Dynamis, como a introdução do protótipo.
   A folha do site é semântica (tinta = texto, papel = fundo): trocar os tokens
   inverte quase tudo; o resto é ajustado abaixo. As telas (.mock) continuam
   claras, porque são o produto visto de fora. */
body.platform {
  --papel: #0A0D24;      /* fundo da página: um degrau abaixo da tinta */
  --panot: #11163A;      /* superfícies (recursos, planos) */
  --branco: #161C45;     /* cartões e caixas */
  --tinta: #F4F6FF;      /* texto principal */
  --ardosia: #A9B0D6;    /* texto secundário */
  --linha: #2A3060;
  --ceu: #1B2358;
  --cobalto: #8FA0FF;    /* cobalto luminoso: legível como texto e linha sobre o escuro */
  --cobalto-deep: #2438F5;
  --fundo-faixa: #05071A; /* faixas e rodapé: ainda mais fundo que a página */
  --foto-preto: #0A0D24;
}
.platform .logo-movra svg { color: #FFFFFF; }
.platform .hero {
  background:
    radial-gradient(55% 65% at 88% 28%, #1B2358 0%, transparent 70%),
    radial-gradient(38% 45% at 6% 96%, rgb(255 91 46 / .14) 0%, transparent 70%);
}
.platform .hero h1 em { color: var(--cobalto); }
.platform .btn-primary { background: var(--brasa); color: #0E1230; }
.platform .btn-primary:hover { background: #FFFFFF; color: #0E1230; }
.platform .btn-brasa { color: #0E1230; }
.platform .btn-brasa:hover { background: #FFFFFF; color: #0E1230; }
.platform .site-header .btn-brasa:hover { background: #FFFFFF; color: #0E1230; }
.platform .promises, .platform .cta-final, .platform .site-footer { background: var(--fundo-faixa); --papel: #F4F6FF; color: #F4F6FF; }
.platform .site-footer { color: #A9B0D6; }
.platform .site-footer .logo-movra svg { color: #FFFFFF; }
.platform .promises-grid li { border-top-color: var(--linha); }
.platform .site-footer { border-top-color: var(--linha); }
.platform .copy { border-top-color: var(--linha); }
.platform .plan-featured { background: var(--cobalto-deep); border-color: var(--cobalto-deep); color: #FFFFFF; }
.platform .plan-featured .plan-list svg { color: var(--brasa); }
.platform .plan-featured .btn-white { background: #FFFFFF; color: #0E1230; }
.platform .plan-featured .btn-white:hover { background: #0E1230; color: #FFFFFF; }
.platform .plan-flag { color: #0E1230; }
.platform .billing-btn[aria-pressed="true"] { background: #FFFFFF; color: #0E1230; }
.platform .lang-list a[aria-current="true"] { background: #FFFFFF; color: #0E1230; border-color: #FFFFFF; }
.platform .legal-body mark { background: #3A2A20; color: #FFB79E; }
/* as telas ficam claras: são o produto visto de fora */
.platform .mock { --papel: #FAFBFE; --panot: #EEF0F6; --branco: #FFFFFF; --tinta: #0E1230; --ardosia: #565B7C; --linha: #DDE0EC; --ceu: #E6EAFF; border-color: #2A3060; }
.platform .mock-browser { box-shadow: 0 30px 70px -30px rgb(0 0 0 / .8); }
.platform .hero-shots .mock-member { box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7); }
/* formulário na faixa escura: o token "tinta" é claro no tema, então os estados invertidos precisam de tinta real */
.platform .chip input:checked + span { color: #0E1230; }
.platform .field select option { color: #0E1230; background: #FFFFFF; }
.platform .form--sent .btn, .platform .form--sent .btn:hover { color: var(--papel); }

/* TELAS NOVAS: segunda via com PIX e comunicar evento (celular) */
.mock-bill-head { gap: 2px; }
.mock-bill-head b { font-size: 22px; }
.mock-pix { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: start; }
.mock-qr-code { padding: 6px; border: 1px solid var(--mk-line); border-radius: 6px; background: #fff; color: #111; }
.mock-qr-code svg { display: block; width: 100%; height: auto; }
.mock-pix-copy { display: grid; gap: 4px; }
.mock-pix-copy .mock-btn { justify-self: start; }
.mock-code { display: block; font: 500 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; color: var(--mk-ink); word-break: break-all; padding: 5px 7px; background: #F6F7FB; border: 1px dashed var(--mk-line); border-radius: 4px; }
.mock-step { display: grid; gap: 5px; }
.mock-plates { display: flex; gap: 6px; }
.mock-plates span { padding: 4px 8px; border: 1px solid var(--mk-line); border-radius: 4px; font: 700 10px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .04em; color: var(--mk-mute); }
.mock-plates span.on { border-color: var(--mk); background: var(--mk-soft); color: var(--mk); }
.mock-textarea { padding: 7px 8px; border: 1px solid var(--mk-line); border-radius: 4px; background: #fff; font-size: 10px; line-height: 1.35; }
.mock-two-fields { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; }
.mock-two-fields i { font-style: normal; padding: 5px 8px; border: 1px solid var(--mk-line); border-radius: 4px; background: #fff; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mock-photos b { aspect-ratio: 1; border-radius: 4px; background: linear-gradient(135deg, #C9CFE6, #8F98C2); }
.mock-photos b:nth-child(2) { background: linear-gradient(135deg, #B8C0DE, #6F7AA8); }
.mock-photos b:nth-child(3) { background: linear-gradient(135deg, #D6DAEC, #9AA3C9); }
.mock-photos b:nth-child(4) { background: linear-gradient(135deg, #AEB6D6, #5E6A9C); }
.mock-photos em { grid-column: 1 / -1; font-style: normal; font-size: 9px; color: var(--mk-mute); }
.mock-toast { display: grid; gap: 1px; padding: 8px 10px; border-radius: 6px; background: var(--mk-dark); color: #fff; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .6); }
.mock-toast b { font: 700 11px/1.2 var(--display); }
.mock-toast em { font-style: normal; font-size: 9px; color: #AEB6DC; }

/* TELAS: página de cotação e redes sociais no site */
.mock-quote-page { display: grid; gap: 10px; padding: 12px; }
.mock-quote-form { display: grid; gap: 6px; }
.mock-crumbs { display: flex; gap: 10px; font-size: 9px; font-weight: 600; color: var(--mk-mute); }
.mock-crumbs li.on { color: var(--mk); border-bottom: 2px solid var(--mk); }
.mock-quote-form > strong { font: 800 clamp(14px, 4.4cqw, 20px)/1.1 var(--display); letter-spacing: -.03em; margin-top: 4px; }
.mock-group { margin-top: 6px; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mk); }
.mock-grid2, .mock-grid3 { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.mock-grid2 label, .mock-grid3 label { display: grid; gap: 2px; min-width: 0; }
.mock-grid2 span, .mock-grid3 span { font-size: 8px; color: var(--mk-mute); }
.mock-grid2 i, .mock-grid3 i { font-style: normal; padding: 5px 7px; background: #fff; border: 1px solid var(--mk-line); border-radius: 4px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-grid2 i.sel, .mock-grid3 i.sel { padding-right: 16px; background: #fff no-repeat right 6px center / 7px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7190' stroke-width='2'/%3E%3C/svg%3E"); }
.mock-quote-form .mock-btn { justify-self: start; margin-top: 6px; }
.mock-quote-aside { display: none; gap: 6px; align-content: start; padding: 12px; border-radius: 6px; background: linear-gradient(160deg, var(--mk-dark), #1E2A5C); color: #E8EBFA; }
.mock-quote-aside .mock-brand { color: #fff; } .mock-quote-aside .mock-brand i { background: #fff; }
.mock-quote-aside b { font: 700 12px/1.2 var(--display); margin-top: 8px; }
.mock-quote-aside em { font-style: normal; font-size: 10px; color: var(--brasa); }
@container (min-width: 460px) {
  .mock-quote-page { grid-template-columns: 1fr 120px; }
  .mock-quote-aside { display: grid; }
  .mock-grid3 { grid-template-columns: 1fr 1fr 1fr; }
}
.mock-social .mock-body { padding: 14px 12px 12px; gap: 8px; }
.mock-social-head { display: grid; gap: 8px; }
.mock-social-head strong { font: 800 clamp(14px, 4.4cqw, 20px)/1.1 var(--display); letter-spacing: -.03em; }
.mock-social-links { display: flex; flex-wrap: wrap; gap: 6px; }
.mock-social-links span { padding: 4px 9px; border: 1px solid var(--mk-line); border-radius: 999px; font-size: 9px; font-weight: 600; color: var(--mk-ink); }
.mock-social-links span.ig { border-color: var(--mk); color: var(--mk); background: var(--mk-soft); }
.mock-social-links span::before { content: "●"; margin-right: 5px; font-size: 7px; color: var(--mk); }
.mock-feed-label { margin-top: 4px; }
.mock-feed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mock-feed b { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
.mock-feed img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-filtro); }
.mock-feed i { position: absolute; right: 5px; top: 5px; font-style: normal; font-size: 9px; color: #fff; }
.mock-follow { justify-self: start; }
@container (min-width: 460px) { .mock-social-head { grid-template-columns: 1fr auto; align-items: start; } }

.mock-social-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.mock-reviews { display: grid; grid-template-columns: auto auto; gap: 0 6px; align-items: baseline; }
.mock-reviews small { grid-column: 1 / -1; font-size: 8px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-mute); }
.mock-reviews b { font: 800 14px/1 var(--display); color: #B8461F; }
.mock-reviews em { font-style: normal; font-size: 9px; color: var(--mk-mute); }

/* fotos dentro das telas: o mesmo tratamento das fotos da página */
.mock img { filter: var(--foto-filtro); }

/* TELAS: página pública do consultor e mapa de consultores */
.mock-cpage-hero { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 12px; background: linear-gradient(110deg, var(--mk-dark) 45%, #1C2450); color: #E8EBFA; }
.mock-portrait { width: 64px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid rgb(255 255 255 / .35); }
.mock-cpage-copy { display: grid; gap: 3px; }
.mock-cpage-copy small { font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8C95C6; }
.mock-cpage-copy strong { font: 800 clamp(15px, 4.6cqw, 22px)/1.05 var(--display); letter-spacing: -.03em; }
.mock-cpage-copy p { font-size: 10px; color: #AEB6DC; }
.mock-cpage-copy .mock-btn { background: #25A45B; }
.mock-share { display: none; gap: 4px; justify-items: center; text-align: center; }
.mock-share .mock-qr-code { width: 56px; padding: 4px; }
.mock-share em { font-style: normal; font-size: 8px; color: #AEB6DC; }
.mock-cpage-body { display: grid; gap: 10px; padding: 12px; }
.mock-plans-col { display: grid; gap: 6px; align-content: start; }
@container (min-width: 460px) {
  .mock-cpage-hero { grid-template-columns: 64px 1fr auto; }
  .mock-share { display: grid; }
  .mock-cpage-body { grid-template-columns: 1.3fr 1fr; }
}
.mock-map .mock-body { padding: 12px; gap: 10px; }
.mock-map-head { display: grid; gap: 8px; }
.mock-map-head strong { font: 800 clamp(14px, 4.4cqw, 20px)/1.1 var(--display); letter-spacing: -.03em; }
.mock-map-tools { display: grid; gap: 6px; }
.mock-map-tools .mock-btn { justify-self: start; }
.mock-map-grid { display: grid; gap: 10px; }
.mock-map-canvas { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: #E9EDF2; border: 1px solid var(--mk-line); }
.mock-map-canvas .road { position: absolute; background: #fff; }
.mock-map-canvas .r1 { left: 0; right: 0; top: 38%; height: 7%; }
.mock-map-canvas .r2 { top: 0; bottom: 0; left: 30%; width: 6%; }
.mock-map-canvas .r3 { left: 0; right: 0; top: 70%; height: 4%; transform: rotate(-8deg); }
.mock-map-canvas .r4 { top: 0; bottom: 0; left: 68%; width: 4%; transform: rotate(12deg); }
.mock-map-canvas .park { position: absolute; left: 6%; top: 8%; width: 18%; height: 24%; border-radius: 8px; background: #D6E9D2; }
.mock-map-canvas .you { position: absolute; left: 44%; top: 52%; width: 12px; height: 12px; border-radius: 50%; background: #2F6FED; box-shadow: 0 0 0 5px rgb(47 111 237 / .25); }
.mock-map-canvas .pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--brasa); transform: rotate(-45deg); box-shadow: 0 2px 4px rgb(0 0 0 / .3); }
.mock-map-canvas .pin em { position: absolute; left: 16px; top: -6px; transform: rotate(45deg); font-style: normal; font-size: 8px; font-weight: 700; color: var(--mk-ink); background: #fff; padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.mock-map-canvas .p1 { left: 52%; top: 40%; } .mock-map-canvas .p2 { left: 24%; top: 62%; } .mock-map-canvas .p3 { left: 78%; top: 22%; }
.mock-map-list { display: grid; gap: 6px; align-content: start; }
.mock-map-list > small { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mk); }
.mock-map-item { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 6px 8px; border: 1px solid var(--mk-line); border-radius: 6px; font-size: 10px; }
.mock-map-item b { font-weight: 600; }
.mock-map-item span { font-weight: 700; color: var(--mk); }
.mock-map-item em { grid-column: 1 / -1; font-style: normal; font-size: 9px; color: var(--mk-mute); }
.mock-map-join { display: grid; gap: 1px; padding: 8px; border-radius: 6px; background: var(--mk-soft); font-size: 10px; }
.mock-map-join b { font-weight: 700; } .mock-map-join em { font-style: normal; color: var(--mk); font-weight: 600; }
@container (min-width: 460px) { .mock-map-head { grid-template-columns: 1fr auto; } .mock-map-grid { grid-template-columns: 1.4fr 1fr; } }