/* =========================================================
   Asterum · Landing page v6
   Carregado depois de style.css (base) e v5.css (camada limpa da v5).
   Direção: ilustração em traço fino com poucas cores, interface tátil (botão preto com brilho,
   sombras em camadas, raios generosos), títulos inteiros em preto numa sans geométrica-humanista
   e o hero sobre um painel em grade de pontos, como uma tela.
   ========================================================= */

:root { --f: "Nunito Sans", "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", sans-serif; --f-display: var(--f); --ink: #0b0b0b; --ink-2: #252524; --muted: #696964; --muted-2: #9b9b95; --line: #e9e9e5; --line-2: #dbdbd5; --card-line: #e8e8e4; --bg-2: #fafaf9; --bg-3: #f2f2ef; --frame: #f6f6f4; --dot: #d5d5cf; --tinta: #1d1d1c; /* traço das ilustrações */
  --traco: 1.25px; /* espessura única do contorno das ilustrações */

  /* verde estratégico: o que já funciona, o que a IA sugere, o que foi resolvido */
  --green: #1e9e58; --green-ink: #137a40; --green-bg: #e9f6ee; --green-line: #bfe4cd; --green-dk: #6fd39a; /* o mesmo verde sobre fundo escuro */
  /* atenção e atraso; vermelho só no que é crítico */
  --orange: #c46a12; --orange-ink: #9a520d; --orange-bg: #fdf1e3; --red: #d63b2f; --red-bg: #fdecea; /* compatibilidade com as camadas anteriores (sálvia vira verde) */
  --accent: var(--green-dk); --accent-2: var(--green); --accent-bg: var(--green-bg); --accent-ink: var(--green-ink); --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; /* sombras em camadas: controle, card, flutuante */
  --sh-1: 0 1px 2px rgba(16,16,15,.06), 0 1px 1px rgba(16,16,15,.03); --sh-2: 0 1px 2px rgba(16,16,15,.04), 0 10px 26px -14px rgba(16,16,15,.2); --sh-3: 0 2px 4px rgba(16,16,15,.04), 0 28px 64px -28px rgba(16,16,15,.32); --preto-hover: linear-gradient(180deg, #474745 0%, #2b2b2a 52%, #1b1b1a 100%); --claro: linear-gradient(180deg, #ffffff 0%, #f1f1ef 100%); --sec-y: clamp(88px, 9vw, 136px); }

/* ---------- tipografia ---------- */
body { font-family: var(--f); font-optical-sizing: auto; color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--f); }
h3, h4 { font-weight: 650; letter-spacing: -.018em; }
/* títulos inteiros numa cor: a segunda parte deixa de ser cinza (ou sálvia, no escuro) */
h1 .soft, h2 .soft, h2 .accent, .dark h2 .accent { color: inherit; }
h2 { font-weight: 430; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.038em; }
.problem2 h2, .cta h2 { font-family: var(--f); font-weight: 430; letter-spacing: -.038em; line-height: 1.04; }
.head__lead, .hero__sub { letter-spacing: -.004em; }
.head__lead { color: var(--muted); }
::selection { background: #d9f0e2; color: var(--ink); }

/* ---------- botões ---------- */
.btn { border-radius: 14px; font-weight: 650; letter-spacing: -.008em; }
.btn--sm { --h: 40px; padding: 0 16px; border-radius: 12px; }
.btn--lg { --h: 52px; padding: 0 24px; }
.btn--dark { background: var(--preto); color: #fff; box-shadow: var(--preto-sh); }
.btn--dark:hover { transform: translateY(-1px); }
.btn--dark:active { transform: translateY(0); background: var(--preto); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 2px 5px rgba(0,0,0,.4), 0 0 0 1px #121211; }
.btn--line { color: var(--ink); }
.btn--line:hover { background: #fff; box-shadow: inset 0 0 0 1px #c3c3bc, 0 2px 6px -2px rgba(16,16,15,.14); }
.btn--line:active { box-shadow: inset 0 0 0 1px #c3c3bc, inset 0 2px 4px rgba(16,16,15,.08); }
.btn--light { background: var(--claro); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.3), 0 6px 14px -8px rgba(0,0,0,.5); }
.btn--light:hover { background: #fff; transform: translateY(-1px); }
.btn .ico { stroke-width: 1.75; }

/* ---------- barra ---------- */
.nav { background: rgba(255,255,255,.86); }
.nav__links { gap: 30px; font-size: 15px; font-weight: 550; color: #3a3a37; }
.nav__wa, .nav__menu { width: 40px; height: 40px; border-radius: 12px; border-color: var(--line-2); background: var(--claro); box-shadow: inset 0 1px 0 #fff, var(--sh-1); }
.nav__wa .bi { --bc: var(--ink); width: 18px; height: 18px; }
.nav__menu span { left: 12px; }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding-top: calc(var(--nav-h) + 68px); padding-bottom: 88px; }
.hero h1 { font-weight: 430; font-size: clamp(40px, 5.5vw, 82px); line-height: 1.02; letter-spacing: -.038em; color: var(--ink); }
.hero__sub { margin-top: 24px; max-width: 620px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.58; color: var(--muted); text-wrap: balance; }
.hero__ctas { margin-top: 34px; gap: 12px; padding-bottom: 0; }

/* o painel: uma tela simples, com moldura branca, onde a operação é desenhada sobre uma grade de pontos */
/* o painel e os painéis escuros têm a mesma largura: dois sistemas na página, painel e conteúdo (1200) */
.stage, .inset { width: min(1440px, 100% - 32px); margin-inline: auto; }
.stage { height: auto; margin-top: 72px; padding: 44px 48px; border-radius: 32px; background-color: var(--frame); background-size: 100% 100%, 20px 20px; background-position: 0 0, 10px 10px; }
@media (min-width: 1181px) {
  .stage { grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1.08fr); column-gap: 40px; align-items: center; }
}

/* ---------- as fontes de dados, desenhadas em traço ----------
   Os sete objetos ficam numa tela de 640 × 600 que encolhe junto com a coluna (--cs vem do main.js).
   A mesma composição vale em todas as larguras: no tablet e no celular ela fica centralizada acima da marca. */
.chaos { height: calc(600px * var(--cs, 1)); }
.chaos__in { width: 640px; height: 600px; }
.chaos .src { color: var(--ink-2); display: block; }
.chaos .src--board { left: 0; top: 2px; width: 248px; }
.chaos .src--wa { top: 0; width: 216px; }
.chaos .src--note { top: 24px; }
.chaos .src--mail { left: 0; top: 266px; width: 202px; }
.chaos .src--laptop { width: 272px; height: auto; }
.chaos .src--sheet { left: 2px; width: 214px; }
.chaos .src--paper { left: 262px; width: 206px; }
@media (max-width: 1180px) {
  .stage { margin-top: 56px; padding: 32px 28px 28px; border-radius: 28px; }
  .chaos__in { left: 50%; top: 0; width: 640px; height: 600px; transform-origin: 50% 0; transform: translateX(-50%) scale(var(--cs, 1)); }
  .core2-wrap { padding: 40px 0 30px; }
}
@media (max-width: 600px) {
  .hero { padding-bottom: 56px; }
  .stage, .inset { width: calc(100% - 24px); border-radius: 24px; }
  .stage { padding: 22px 12px 14px; }
  /* abas numa fileira só, que rola de lado; a aba da cena atual entra na vista (main.js) */
  .show__tabs { overflow-x: auto; scrollbar-width: none; }
  .show__tabs::-webkit-scrollbar { display: none; }
  .show__tab { flex: none; scroll-snap-align: center; }
  /* Logística no celular: o aviso de atraso fica sempre dentro do trecho visível da cena */
  .show--mob .scn--map.is-3d .mp-alert { left: calc((12px - var(--sx, 0px)) / .8); }
}

/* cards de app: contorno em tinta, cabeçalho com o ícone do app em monocromático */
.chaos .ui { border: 0; border-radius: 14px; background: #fff; font-size: 12px; box-shadow: 0 0 0 var(--traco) var(--tinta), 0 16px 26px -18px rgba(16,16,15,.4); }
.chaos .ui__bar { position: relative; z-index: 2; gap: 8px; padding: 10px 11px; color: var(--ink); background: #fff; border-bottom: 1px solid var(--tinta); font-size: 12px; }
.chaos .ui__bar b { font-weight: 700; letter-spacing: -.005em; }
.ui__app { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--tinta); }
.ui__app .bi { --bc: var(--tinta); width: 11px; height: 11px; }
.chaos .count, .chaos .count--mail { height: 18px; min-width: 20px; padding: 0 6px; border-radius: 6px; font: 700 10px/1 var(--f); }

/* WhatsApp: balões brancos com contorno, os enviados em verde-claro */
.src--wa .wa { height: 164px; background: #fbfbfa; background-size: 12px 12px; }
.src--wa .bubble { max-width: 92%; border-radius: 10px; box-shadow: none; border: 1px solid #d9d9d3; }
.src--wa .bubble em { font-size: 10.5px; font-weight: 750; color: var(--ink); }
.src--wa .bubble.in { background: #fff; border-top-left-radius: 3px; }
.src--wa .bubble.out { background: var(--green-bg); border-color: var(--green-line); border-top-right-radius: 3px; }
.src--wa .typing { background: #fff; border: 1px solid #d9d9d3; }

/* e-mail: lista com o ponto de não lido em tinta */
.chaos .mail li { gap: 9px; padding: 8px 12px; border-bottom-color: #ececE8; font-size: 12px; color: #6b6b66; }
.chaos .mail li:last-child { border-bottom: 0; }
.chaos .mail li.unread { color: var(--ink); font-weight: 650; }
.chaos .mail li i { width: 6px; height: 6px; box-shadow: inset 0 0 0 1px #b9b9b3; }
.chaos .mail li.unread i { background: var(--tinta); box-shadow: none; }

/* planilha: grade fina, a célula em dúvida em âmbar e o erro em vermelho */
.chaos .sheet { font-size: 11px; }
.chaos .sheet span { padding: 6px 7px; }
.chaos .sheet .h { background: #f7f7f5; font-size: 9.5px; }
.chaos .sheet .hl { color: var(--ink); font-weight: 650; }

/* quadro branco num cavalete: moldura dupla, colunas a pincel e post-its */
.src--board { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.board { position: relative; padding: 12px 14px 16px; border-radius: 6px; background: #fff; color: #2a2a28; font-family: var(--f-hand); }
.board .board__t { font-size: 20px; font-weight: 600; line-height: 1; }
.board .board__cols > div { border-left: 1px solid #6a6a66; }
.board .board__cols > div:first-child { border-left: 0; }
.board .board__cols b { border-bottom: 1px solid #6a6a66; }
.board .board__cols i { background: #fbe7a0; box-shadow: 0 0 0 1px var(--tinta); }
.board .board__red { color: var(--red); }
.board .board__arrow { stroke: var(--red); }
.board .board__tray { left: 26%; right: 26%; bottom: -9px; height: 5px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 var(--traco) var(--tinta); }
.board .board__tray i { top: -3px; height: 4px; background: var(--tinta); }
.board .board__tray i:last-child { background: var(--red); }
.board__legs { display: block; width: 100%; height: 40px; margin-top: 8px; fill: none; stroke: var(--tinta); stroke-linecap: round; }

/* laptop em traço, aberto numa videochamada; quem fala ganha o contorno verde */
.lap2 { position: relative; }
.lap2__tela { position: relative; margin: 0 18px; padding: 8px 8px 10px; border-radius: 12px 12px 4px 4px; background: #fff; box-shadow: 0 0 0 var(--traco) var(--tinta); }
.lap2__tela::before { content: ""; position: absolute; top: 3px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--tinta); }
.vc2 { display: flex; flex-direction: column; aspect-ratio: 16 / 10.4; border-radius: 4px; overflow: hidden; background: #f3f3f1; box-shadow: inset 0 0 0 1px #d6d6d0; }
.vc2__top { display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 6px; color: #4a4a47; }
.vc2__top i { width: 4px; height: 4px; border-radius: 50%; background: var(--red); animation: blink 1.4s infinite; }
.vc2__top b { font-weight: 750; }
.vc2__top time { margin-left: auto; font: 500 6px var(--f-mono); color: #8a8a84; }
.vc2__grade { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; min-height: 0; }
.vc2__p { position: relative; min-height: 0; overflow: hidden; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px #dcdcd6; }
.vc2__p svg { display: block; width: 100%; height: 100%; }
.vc2__corpo, .vc2__cab { fill: #fff; stroke: var(--tinta); }
.vc2__p em { display: none; }
.vc2__p::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--green); opacity: 0; animation: vc2-fala 8s infinite; animation-delay: calc(var(--k) * 2s); }
.vc2__fala { position: absolute; display: flex; align-items: center; gap: 1px; height: 7px; padding: 0 2px; border-radius: 3px; background: var(--green); opacity: 0; animation: vc2-fala 8s infinite; animation-delay: calc(var(--k) * 2s); }
.vc2__fala i { width: 1px; height: 4px; border-radius: 1px; background: #fff; animation: eq .8s ease-in-out infinite; }
.vc2__fala i:nth-child(2) { animation-delay: .15s; }
.vc2__fala i:nth-child(3) { animation-delay: .3s; }
@keyframes vc2-fala { 0%, 22% { opacity: 1; } 26%, 100% { opacity: 0; } }
.vc2__ctrl { position: absolute; left: 50%; display: flex; gap: 2.5px; padding: 2px 3px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 .8px var(--tinta); transform: translateX(-50%); }
.vc2__ctrl i { border-radius: 50%; box-shadow: inset 0 0 0 .8px var(--tinta); }
.vc2__ctrl .fim { width: 9px; border-radius: 3px; background: var(--red); box-shadow: none; }
.lap2__base { position: relative; display: block; height: 11px; border-radius: 2px 2px 11px 11px; background: #fff; box-shadow: 0 0 0 var(--traco) var(--tinta), 0 14px 18px -14px rgba(16,16,15,.55); }
.lap2__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 36px; height: 3.5px; margin-left: -18px; border-radius: 0 0 4px 4px; box-shadow: inset 0 0 0 1px var(--tinta); }
.chaos .lap__sticky { bottom: auto; width: 82px; padding: 9px 8px 8px; border-radius: 2px 2px 10px 2px; background: #fbe7a0; color: #2f2a1a; transform: rotate(-7deg); z-index: 3; }

.chaos .lap__sticky svg { stroke: #2f2a1a; }

/* post-it: bloco com espessura, fita e escrita à mão */
.src--note { border-radius: 2px 2px 12px 2px; background: #fbe7a0; color: #2a2510; }
.note__2 { color: var(--red); }

/* romaneio: folha pautada com furos, marcas à mão e o carimbo de atraso */
.src--paper { border-radius: 4px; background-color: #fff; color: var(--ink-2); box-shadow: 0 0 0 var(--traco) var(--tinta), 4px 4px 0 0 #fff, 4px 4px 0 var(--traco) var(--tinta), 0 22px 30px -22px rgba(16,16,15,.45); }
.src--paper::before { left: 10px; right: 10px; background: radial-gradient(circle at 8px 3px, var(--frame) 2px, var(--tinta) 2.1px 2.9px, transparent 3px) 0 0 / 16px 6px; }
.paper__h { border-bottom-color: var(--tinta); }
.paper__list .no i, .paper__hand { color: var(--red); }

/* ---------- o núcleo: uma tecla no mesmo material do botão preto, num encaixe tracejado ---------- */
/* o encaixe: uma base branca rebaixada, não uma área tracejada */
.core2::before { content: ""; position: absolute; inset: 0; background: #fff; }
.core2__tile { width: 90px; height: 90px; border-radius: 26px; background: var(--preto); }
.core2__tile::after { display: none; }
.core2__tile .core-mark { width: 40px; height: 37px; }

/* fios: cinza fino entrando, verde saindo (depois da Asterum, tudo organizado) */
.wire--in { stroke: #b4b4ae; stroke-width: 1.25; }
.wire--out { stroke: var(--green); stroke-width: 1.6; }
.dot--in { fill: var(--tinta); stroke: var(--frame); stroke-width: 1.4; }
.dot--out { fill: var(--green); stroke: #fff; stroke-width: 1.4; }

/* ---------- a vitrine: interface limpa (o "depois") ---------- */
.show__win { border: 0; border-radius: 20px; }
.show__bar { height: 46px; padding: 0 14px; gap: 10px; border-bottom: 1px solid #ededea; }
.show__bar .dots { display: none; }
/* menu discreto à direita, para a barra não terminar no vazio */
.show__bar::after { content: ""; flex: none; height: 4px; margin-left: auto; background: radial-gradient(circle, #b4b4ae 1.6px, transparent 2px) 0 0 / 7px 4px repeat-x; }
.show__title-in { gap: 10px; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.show__title-in .ico { box-sizing: content-box; width: 14px; height: 14px; padding: 6px; border-radius: 9px; color: var(--ink); background: var(--claro); box-shadow: inset 0 0 0 1px #e1e1dc, var(--sh-1); }
.show__canvas { background: #fbfbfa; }
.show__tabs { margin-top: 16px; gap: 2px; border: 0; border-radius: 16px; background: #ebebe8; }
.show__tab { height: 36px; border-radius: 12px; color: #5c5c58; font-size: 13.5px; font-weight: 650; }
.show__tab:hover { background: rgba(255,255,255,.55); color: var(--ink); }
.show__tab[aria-selected="true"] { background: #fff; color: var(--ink); }
.show__tab i { bottom: 4px; height: 2px; }

/* =========================================================
   Vitrine · cartões das cenas: brancos e sólidos, a IA no preto com brilho
   ========================================================= */
.scn .vidro,
.scn--map.is-3d .mp-card, .scn--map.is-3d .mp-alert,
.scn--stock.is-3d .st-card {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; box-shadow: 0 0 0 1px #e3e3de, 0 1px 2px rgba(16,16,15,.05), 0 14px 30px -16px rgba(16,16,15,.3);
}
.scn--map.is-3d .mp-alert--warn { background: #fff; box-shadow: 0 0 0 1px #f0d9bd, 0 1px 2px rgba(16,16,15,.05), 0 14px 30px -16px rgba(154,82,13,.35); }
.scn .ia, .scn--map.is-3d .mp-sugg, .scn--stock.is-3d .st-sugg {
  background: var(--preto); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px #121211, 0 18px 36px -16px rgba(0,0,0,.55);
}
.mp-sugg__tag, .st-sugg__tag { color: var(--green-dk) !important; }
/* a cena se dissolve nas bordas por máscara (sem faixa de cor por cima e sem prédio cortado em linha reta) */
.g3d::after { display: none; }
.g3d__canvas { -webkit-mask-image: radial-gradient(118% 108% at 50% 50%, #000 60%, transparent 98%); mask-image: radial-gradient(118% 108% at 50% 50%, #000 60%, transparent 98%); }

/* marcadores das cenas 3D */
.g3d-tag { height: 20px; padding: 0 3px 0 8px; border-radius: 6px; font: 600 9px/1 var(--f-mono); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -6px rgba(0,0,0,.5); }

/* ---------- cartões das cenas: um só sistema (branco com contorno fino; a IA no preto com brilho) ---------- */
.vd-call, .vd-data, .ag-cal, .ag-prio, .mc-score, .mc-feed, .mc-al, .fi-total, .fi-costs, .fi-price { border: 0; border-radius: 14px; }
.vd-coach, .ag-sugg, .mc-al--ia, .fi-sugg { background: var(--preto); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px #121211, 0 16px 32px -18px rgba(0,0,0,.5); }
/* Vendas: a coluna da direita ocupa a altura toda; avatar sem halo */
.vd-side { height: 100%; }
.vd-av { background: var(--green-bg); }
.vd-ctrl { gap: 8px; }
/* Agenda: as prioridades no alto da coluna (chegam logo depois da sincronização); a sugestão da IA entra embaixo */
.ag-prio { order: -1; }
.ag-src { top: 3px; right: 3px; box-shadow: 0 0 0 1px #e1e1dc; }
.ag-ev { padding-right: 18px; }
/* Marca: o alerta em branco com contorno vermelho; logos em monocromático; o vermelho só no ícone e no texto */
.mc-al--neg { background: #fff; }
.mc-ch .bi, .mc-m .bi { --bc: var(--ink-2); }
.mc-m p span { color: var(--muted); }
.mc-n { align-items: baseline; }
.mc-n em { align-self: center; }
/* Finanças: o laranja só no maior desperdício (frete); os outros em tinta */
.fi-costs li em { color: var(--muted); }
.fi-costs li em::before { width: 5px; height: 5px; background: var(--muted-2); content: ""; }
.fi-costs li:first-child em { color: var(--orange-ink); }
.fi-costs li:first-child em::before { width: 12px; height: 12px; background: var(--orange); content: "!"; }
.fi-warn { background: #fff; box-shadow: inset 0 0 0 1px #efd9bf; color: var(--orange-ink); }
.g3d-st svg { stroke: var(--green-ink); }
.g3d-save { padding: 4px 8px; border-radius: 7px; background: var(--green); font: 750 9.5px/1 var(--f); box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(0,0,0,.35); }
.g3d-pin { border-radius: 6px; background: var(--preto); }
.g3d-jam { background: var(--red); box-shadow: 0 0 0 2px #fff, 0 6px 14px -4px rgba(214,59,47,.6); }
.g3d-jam::before { border-color: rgba(214,59,47,.5); }

/* =========================================================
   PROBLEMA (painel escuro)
   ========================================================= */
.inset { border-radius: 32px; }
.problem2 { background: #0c0c0b; }
.problem2 h2 { color: #fff; }
.losses li.is-hit .losses__ico { border-color: rgba(111,211,154,.5); background: #10201a; color: var(--green-dk); }
.losses li::before { background: var(--green-dk); }
.losses b { font-weight: 650; }
/* a tela do iPhone fala a língua do iOS: a fonte do sistema (Inter, a mais próxima da SF Pro) */
.iphone__screen { font-family: "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif; }

/* =========================================================
   SIMULADOR
   ========================================================= */
.sim__box { border: 0; border-radius: var(--r-xl); }
.sim__intro h3 { letter-spacing: -.02em; }
.field__top label { font-weight: 650; }
.field__top output { font-weight: 700; letter-spacing: -.025em; }
.field input[type="range"] { height: 6px; background: linear-gradient(90deg, var(--ink) 0 var(--fill, 50%), #ebebe8 var(--fill, 50%) 100%); }
.sim__out { background: radial-gradient(120% 80% at 0% 0%, #1d1d1c 0%, rgba(29,29,28,0) 60%), #0c0c0b; }
.sim__big b { font-weight: 600; letter-spacing: -.055em; }
.sim__bar-track { background: #262625; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
/* barra do simulador: as três parcelas em laranja (claro, médio, escuro), separadas por 1 px de preto */
.sim__bar-track i { border-radius: 1px; background: repeating-linear-gradient(135deg, #e5484d 0 7px, #b8363b 7px 14px); background-size: 19.8px 19.8px; box-shadow: none; animation: sim-listras 1.1s linear infinite; }
@keyframes sim-listras { to { background-position: 19.8px 0; } }
.sim__card-big b { color: var(--green-dk); font-weight: 600; }
.sim__margin .is-new i b { background: var(--green-dk); }
.sim__margin .is-new em { color: var(--green-dk); }

/* =========================================================
   COMO FUNCIONA: quadros em grade de pontos, como as ilustrações
   ========================================================= */
.etapa__quadro { border: 0; border-radius: var(--r-xl); background-color: var(--frame); background-size: 18px 18px; background-position: 9px 9px; box-shadow: inset 0 0 0 1px #e6e6e1; }
.etapa + .etapa .etapa__quadro::before { border: 0; background-color: #fff; box-shadow: 0 0 0 1px #e1e1dc, var(--sh-2); }
.etapa__n { font-family: var(--f-mono); }
.etapa__txt h3 { font-weight: 700; }
.fluxo__linha { background: #dcdcd6; }
.fluxo__pontos i { box-shadow: 0 0 0 2px var(--frame); }
.fluxo__pontos i.is-ok { background: var(--green); }
.fluxo__pontos i.is-exc { background: var(--orange); }
.no__ico { border: 0; background: var(--claro); }
.no small { font-weight: 650; }
.no--trava .no__ico { color: var(--red); background: #fff; }
.no--trava small { color: #b3261e; }
.no__fila { background: var(--red); }
.no--auto .no__ico { background: var(--preto); color: var(--green-dk); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px #121211, 0 12px 22px -12px rgba(0,0,0,.55); }
.no--auto .no__ico.confere { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px #121211, 0 0 0 6px rgba(30,158,88,.18), 0 12px 22px -12px rgba(0,0,0,.55); }
.lente { border: 0; border-radius: 18px; }
.lente__top { color: var(--green-ink); }
.prior b { height: 8px; border-radius: 5px; background: #efefec; }
.prior--red i, .prior--red b { color: var(--red); }
.prior--red i { background: var(--red); }
.prior--amber i { background: var(--orange); }
.prior--amber b { color: var(--orange); }
.regras .ok i { background: var(--green); border-color: var(--green); }
.regras .nao { color: var(--orange-ink); }
.regras .nao i { background: var(--orange); border-color: var(--orange); }
.veredito { border-radius: 12px; background: var(--frame); box-shadow: inset 0 0 0 1px #ececE8; }
.veredito.is-ok em { background: var(--green-bg); color: var(--green-ink); }
.veredito.is-exc em { background: var(--orange-bg); color: var(--orange-ink); }
.meses { padding: 3px; gap: 2px; border-radius: 11px; box-shadow: inset 0 1px 2px rgba(16,16,15,.06); }
.meses span { border-radius: 8px; background: transparent; }
.meses .ok { background: transparent; color: var(--green-ink); }
.meses .agora { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(16,16,15,.1), 0 3px 8px -3px rgba(16,16,15,.16); }
.revisao .ico { color: var(--green); }
.proximo { border-radius: 12px; box-shadow: inset 0 0 0 1px #ececE8; }

/* =========================================================
   PROJETOS
   ========================================================= */
/* três cartões ilustrados, como os das referências: a cena em grade de pontos e o nome embaixo */
.projs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.proj + .proj { border: 0; }
.proj__ilus { position: relative; padding: 40px 14px 6px; border-radius: var(--r-xl); background-color: var(--frame); box-shadow: inset 0 0 0 1px #e6e6e1; overflow: hidden; transition: box-shadow .35s var(--ease), translate .35s var(--ease); }
.proj:hover .proj__ilus { translate: 0 -2px; box-shadow: inset 0 0 0 1px #dcdcd6, 0 18px 36px -24px rgba(16,16,15,.3); }
.proj__tag { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.proj__tag .ico { width: 14px; height: 14px; color: var(--green); stroke-width: 1.9; }
.proj--logistica .proj__tag--a { left: 18px; top: 18px; }
.proj--logistica .proj__tag--b { right: 18px; }
.proj--logistica .proj__tag--c { right: 18px; bottom: 16px; }
.proj--seguros .proj__tag--a { right: 18px; }
.proj--seguros .proj__tag--b { left: 18px; top: 18px; }
.proj--seguros .proj__tag--c { right: 18px; bottom: 16px; }
.proj--franquias .proj__tag--a { right: 18px; top: 18px; }
.proj--franquias .proj__tag--b { left: 18px; top: 18px; }
.proj__txt { flex-direction: column; align-items: flex-start; text-align: left; }
.proj__txt h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 1180px) {
  .proj__tag { height: 28px; padding: 0 9px 0 8px; font-size: 12px; }
}
@media (max-width: 900px) {
  .projs { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 520px; padding-bottom: 0; }
  .proj { padding-bottom: 0; }
  .proj + .proj { border-top: 0; }
}
.status { border-radius: 9px; background: var(--green-bg); color: var(--green-ink); font-weight: 650; box-shadow: inset 0 0 0 1px var(--green-line); }
.status i { background: var(--green); }

/* ---------- ilustrações isométricas em traço (geradas por fonte-ilustracoes) ---------- */
.iso { display: block; width: 100%; height: auto; overflow: visible; }
.iso polygon, .iso polyline, .iso path, .iso rect, .iso circle { stroke: var(--tinta); stroke-width: var(--traco); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.iso polyline { fill: none; }
.iso .iso-t { fill: #fff; }
.iso .iso-l { fill: #f3f3f0; }
.iso .iso-r { fill: #e7e7e3; }
.iso .iso-vt { fill: #dcf2e5; }
.iso .iso-vl { fill: #a9e0c0; }
.iso .iso-vr { fill: #79cc9e; }
.iso .iso-grade { stroke: #d9d9d3; stroke-dasharray: 3 4; }
.iso .iso-rota { stroke: var(--green); stroke-dasharray: 5 4; }
.iso .iso-liga { stroke: #b4b4ae; }
.iso .iso-liga-v { stroke: var(--green); stroke-width: 1.5; stroke-dasharray: 4 4; }
.iso .iso-sombra { fill: rgba(16,16,15,.12); stroke: none; }
.iso .iso-pin { fill: #fff; }
.iso .iso-pin.is-feito { fill: var(--green); }
.iso .iso-pin-ok, .iso .iso-selo-i { fill: none; stroke: #fff; stroke-width: 1.8; }
.iso .iso-pin-o { fill: #fff; }
.iso .iso-selo { fill: var(--green); stroke: #fff; stroke-width: 2; }
.iso .iso-porta { fill: #f3f3f0; }
.iso .iso-janela { fill: #eceeed; }
.iso .iso-vidro { fill: #dfe2e1; }
.iso .iso-faixa { fill: var(--green); stroke: none; }
.iso .iso-roda { fill: #fff; stroke-width: 1.3; }
.iso .iso-cubo { fill: var(--tinta); stroke: none; }
.iso .iso-aro { fill: none; stroke-width: .9; }
.iso .iso-check.is-fino { stroke-width: 1.5; }
.iso .iso-fino { fill: none; stroke-width: .85; }
.iso .iso-txt { fill: var(--tinta); stroke: none; font-family: var(--f); font-weight: 800; }
.iso .iso-check { fill: none; stroke: var(--green); stroke-width: 2.1; }
.iso .iso-icone { fill: none; stroke-width: 1.3; }
.iso .iso-fantasma { fill: rgba(30,158,88,.07); stroke: var(--green); }
.iso .iso-fantasma-l { stroke: var(--green); stroke-dasharray: 4 3; }
.iso .iso-barra { fill: #fff; }
.iso .iso-barra.is-v { fill: var(--green); }
.iso .iso-mastro { stroke-width: 1.3; }
.iso .iso-bandeira { fill: var(--green); }
.iso .iso-tr { stroke-dasharray: 4 3; }

/* =========================================================
   COMO CONTRATAR
   ========================================================= */
.plan { border: 0; border-radius: var(--r-xl); box-shadow: 0 0 0 1px #e4e4df, 0 1px 2px rgba(16,16,15,.04), 0 24px 48px -32px rgba(16,16,15,.3); }
.plan h3 { font-weight: 700; letter-spacing: -.025em; }
.plan__price { font-weight: 700; }
.plan__list .ico { color: var(--green); }
/* o plano em destaque não projeta sombra (decisão do cliente: nada de sombra sobre o vizinho) */
.plan--featured { background: radial-gradient(120% 70% at 0% 0%, #262625 0%, rgba(38,38,37,0) 62%), #0d0d0c; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px #121211; }
.plan--featured .plan__list .ico { color: var(--green-dk); }
/* segurança: um grupo em cinza com as garantias em células brancas, como os grupos de opções das referências */
.security { grid-template-columns: 290px minmax(0, 1fr); margin-top: 64px; border: 0; }
.security__head { padding: 20px 18px 18px; }
.security__head b { letter-spacing: -.02em; }
.security__head p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; }
.security__ico { background: var(--preto); color: var(--green-dk); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px #121211, 0 8px 16px -8px rgba(0,0,0,.45); }
.security__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.security__list li { flex-direction: column; gap: 14px; }
.security__list .ico { box-sizing: content-box; width: 17px; height: 17px; margin: 0; }
.security__list b { letter-spacing: -.01em; color: var(--ink); }
.security__list span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; }
@media (max-width: 1180px) {
  .security__head { padding: 14px 12px 6px; }
  .security__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .security__list { grid-template-columns: minmax(0, 1fr); }
  .security__list li { flex-direction: row; gap: 14px; }
}

/* =========================================================
   DÚVIDAS + ATHENA
   ========================================================= */
.faq summary { font-family: var(--f); font-weight: 600; letter-spacing: -.015em; }
.athena { border: 0; }
.athena__ola { font-family: var(--f); font-weight: 500; letter-spacing: -.03em; }
.athena__nucleo { background: var(--preto); }
.athena__id i { background: var(--green); }
.athena__form:focus-within { box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px rgba(30,158,88,.16), 0 16px 30px -22px rgba(16,16,15,.4); }
.athena__form.tem-texto button { background: var(--preto); box-shadow: var(--preto-sh); }
.athena__chips button { border: 0; border-radius: 14px; }
.athena__chips .ico, .athena__ia .ico { color: var(--green); }
.amsg--user { background: var(--preto); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.amsg__av { background: var(--preto); color: var(--green-dk); }
.amsg__acts a.pri { background: var(--preto); border-color: #121211; box-shadow: var(--preto-sh); }

/* =========================================================
   CONTATO
   ========================================================= */
.cta { background: #0c0c0b; }
.cta h2 { color: #fff; }
.form { border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 100px -40px rgba(0,0,0,.9); }
.form input:not([type="checkbox"]), .form select, .form textarea { border-radius: 12px; background: #fafaf9; }
.form input:focus, .form select:focus, .form textarea:focus { box-shadow: 0 0 0 4px rgba(30,158,88,.16); }
.opt span { border-color: var(--line-2); font-weight: 550; }
.opt input:checked + span { background: var(--preto); border-color: #121211; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px -4px rgba(0,0,0,.45); }
.opt input:checked + span .ico { color: var(--green-dk); }
.fs__bar i { background: var(--ink); }
.form__done-ico { background: var(--preto); color: var(--green-dk); box-shadow: 0 0 0 10px rgba(30,158,88,.14); }

/* etapa da agenda: dias em quadrados e horários em botões, como um calendário de verdade */
.agd__dia span { border: 0; border-radius: 14px; background: #f2f2ef; box-shadow: none; }
.agd__dia span:hover, .agd__hora span:hover { box-shadow: 0 0 0 1px #c9c9c3; }
.agd__dia input:checked + span { background: var(--preto); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px #121211, 0 8px 16px -8px rgba(0,0,0,.5); }
.agd__dia input:disabled + span { background: transparent; border: 0; box-shadow: none; opacity: .45; }
.agd__hora span { gap: 7px; grid-auto-flow: column; height: 42px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e1e1dc, var(--sh-1); font-weight: 650; }
.agd__hora span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.agd__hora input:checked + span { background: var(--preto); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px #121211, 0 8px 16px -8px rgba(0,0,0,.5); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.footer2__social a { border-radius: 12px; }

/* Estoque: o marcador da baia em risco (laranja) que vira verde quando o pedido é aprovado */
.g3d-pin.g3d-pin--baia { padding: 4px 8px; border-radius: 7px; background: var(--orange); font: 700 9.5px/1 var(--f); letter-spacing: 0; box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(0,0,0,.4); }
.g3d-pin.g3d-pin--baia::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 11px; margin-left: -.75px; background: inherit; }
.g3d-pin.g3d-pin--baia.is-ok { background: var(--green); }

/* enquanto o 3D carrega, a cena mostra o próprio primeiro quadro (nunca uma janela vazia) */
.espera-3d .g3d::before { content: ""; position: absolute; inset: 0; background: center / cover no-repeat; -webkit-mask-image: radial-gradient(118% 108% at 50% 50%, #000 60%, transparent 98%); mask-image: radial-gradient(118% 108% at 50% 50%, #000 60%, transparent 98%); }
.scn--map.espera-3d .g3d::before { background-image: url(../assets/cena-cidade.jpg); }
.scn--stock.espera-3d .g3d::before { background-image: url(../assets/cena-armazem.jpg); }

/* =========================================================
   Rodada 2 (críticas da rodada 1): ajustes por seção
   ========================================================= */

/* ---------- títulos e textos de apoio ---------- */
.head__lead, .problem2__lead, .cta__lead { text-wrap: pretty; }
.head__link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.head__link:hover { text-decoration-color: var(--ink); }

/* ---------- problema ---------- */
.problem2__lead { max-width: 48ch; color: #aaa9a4; }
.losses { margin-top: 30px; }
.losses li { gap: 14px; padding: 20px 0; }
.losses__ico { width: 40px; height: 40px; border-radius: 12px; }
/* papel de parede do iPhone: a marca grande e discreta em cinza-esverdeado neutro (sem mancha saturada) */
.ios__wall::before { background: linear-gradient(160deg, #c9d2cd 0%, #9fada6 100%); }

/* ---------- simulador ---------- */
.sim .head { margin-bottom: 44px; }
.sim__intro h3 { text-wrap: balance; }
.sim__big b { font-size: clamp(48px, 5.4vw, 76px); }
.sim__bar-legend { font-size: 13px; }
.sim__out .btn { align-self: flex-start; width: auto; }
.assume summary { min-height: 44px; }

/* ---------- como funciona ---------- */
.etapa + .etapa .etapa__quadro::before { display: none; }
.etapa__quadro { min-height: 0; }
.no__ico { width: 42px; height: 42px; border-radius: 13px; }
.fluxo__linha { top: 20px; }
.fluxo__pontos i { top: 21px; }
.etapa__n { width: 24px; height: 24px; }

/* ---------- projetos ---------- */
.proj--logistica .proj__tag--b { top: 18px; }
.proj--seguros .proj__tag--a { top: 18px; }
.proj__txt { gap: 8px; padding-top: 16px; }
/* status discreto: ponto verde e texto, sem cápsula */
.proj__txt .status { padding: 0; border-radius: 0; background: none; box-shadow: none; font-weight: 650; }

/* ---------- como contratar ---------- */
.plan__list { gap: 12px; }
.plan--featured .plan__price { letter-spacing: -.03em; }
.security__list .ico { padding: 7px; }

/* ---------- dúvidas e Athena ---------- */
.faq summary { font-size: 18px; }
/* a marca da Athena sem os raios: tecla preta com halos verdes estáticos, marca branca */
.athena__raios { display: none; }
.athena__nucleo { color: #fff; }
.athena__ia { display: none; }
/* a pergunta de exemplo que se escreve sozinha tem cara de placeholder, não de texto digitado */
.athena__chips button { line-height: 1.3; }
.athena__chips .ico { margin-top: 1px; }

/* ---------- contato ---------- */
.opt span { border-radius: 12px; }
.fs__bar { height: 4px; border-radius: 2px; }
.fs__nav .btn--dark { box-shadow: var(--preto-sh); }
.next li::before { width: 28px; height: 28px; background: transparent; border: 1px solid #3a3a38; }
.next span { color: #b0b0aa; }

/* ---------- rodapé ---------- */
.footer2__social a, .footer2__social a.ph { border: 1px solid var(--line-2); background: #fff; outline: 0; }
.footer2__social a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.footer2__col a[href^="https://wa.me"], .footer2__col a[href^="mailto:"] { color: var(--ink); font-weight: 600; }
.footer2__col a { text-underline-offset: 4px; }
.footer2__col a:hover { text-decoration: underline; text-decoration-color: var(--line-2); }
.footer2__legal { padding: 26px 0 36px; }

/* ---------- celular: escala tipográfica e alturas internas ---------- */
@media (max-width: 600px) {
  /* cada frase começa numa linha: a primeira cabe inteira, a segunda quebra equilibrada */
  .btn--lg { --h: 48px; }
  h2, .problem2 h2, .cta h2 { font-size: clamp(30px, 8.6vw, 34px); line-height: 1.08; text-wrap: balance; }
  h2 br { display: none; }
  .section { padding-block: 64px; }
  .sim, .how, .proof, .plans, .faq { padding-block: 56px; }
  /* problema: o iPhone menor e com respiro no fim do painel */
  /* simulador: rótulo e valor na mesma linha */
  .field__top { flex-direction: row; align-items: baseline; }
  .sim__inputs { gap: 22px; padding: 24px 20px; }
  .sim__big b { font-size: 48px; }
  .sim__out .btn { width: 100%; }
  /* como funciona e projetos: menos espaço entre as etapas */
  .projs { gap: 32px; }
  /* contato: opções em duas colunas e o botão de continuar na largura toda */
  .fs .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs .chips .opt span { width: 100%; }
  .fs__nav .btn--dark { flex: 1; }
  .faq summary { font-size: 17px; }
}
.footer2__fine { text-wrap: balance; }
.iso .iso-selo-p { fill: var(--green); stroke: var(--green); }
.iso .iso-selo-c { fill: none; stroke: #fff; stroke-width: 1.5; }

/* Projetos: cabeçalho dividido (título à esquerda, texto à direita) para a página não repetir o mesmo
   bloco centralizado de "Como funciona" logo antes */
@media (min-width: 901px) {
  .proof .head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; max-width: none; margin-bottom: 48px; text-align: left; }
  .proof .head__lead { margin: 0 0 6px; justify-self: end; }
}

/* =========================================================
   Rodada 3 (críticas da rodada 2)
   ========================================================= */

/* ---------- sistema ---------- */
.nw { white-space: nowrap; }
.btn--lg { border-radius: 14px; }
.head__lead { max-width: 56ch; }
.head--center .head__lead { margin-inline: auto; }

/* ---------- hero: painel, núcleo, objetos ---------- */
/* o encaixe acompanha o raio da tecla (raio da tecla + folga) */
/* tablet: a bancada e a marca lado a lado, como no computador; a vitrine embaixo, um pouco mais estreita */
@media (min-width: 601px) and (max-width: 1180px) {
  .stage { justify-content: center; align-items: center; column-gap: 44px; }
}
.chaos .src--laptop { top: 240px; }
.chaos .src--sheet { top: 428px; }
.chaos .src--paper { top: 418px; }
/* quadro branco: um só contorno (a espessura vem do deslocamento, como no post-it e no romaneio) */
.board { box-shadow: 0 0 0 var(--traco) var(--tinta), 4px 4px 0 0 #fff, 4px 4px 0 var(--traco) var(--tinta), 0 22px 30px -22px rgba(16,16,15,.45); }
.board .board__red { font-size: 16px; }
/* fitas dos post-its mais leves que o contorno */
/* laptop: só o ponto de gravação e o título, maiores; participantes com a mesma geometria */
.vc2__top time { display: none; }
/* planilha: a célula em dúvida e o erro são os dois focos; coordenadas mais apagadas */
.chaos .sheet .hl, .chaos .sheet .err { font-size: 12.5px; font-weight: 700; }
/* romaneio: o carimbo ocupa o canto do cabeçalho (no lugar da data), sem cobrir nenhuma linha */
.paper__h { justify-content: flex-start; }
.paper__h span { display: none; }
.paper__stamp { transform: rotate(-5deg); }
/* a linha riscada usa a classe .no, a mesma do nó do fluxo em "Como funciona": desfaz o espaçamento e o centro de lá */
.paper__list li.no { gap: 0; text-align: left; }
/* WhatsApp: balões com respiro regular */
.src--wa .bubble { padding: 6px 9px; line-height: 1.3; }
/* a janela da vitrine com sombra curta (não pesa sobre as abas) */
/* cenas 3D: somem nos quatro lados (nenhum prédio ou estante termina em linha reta) */
.g3d__canvas, .espera-3d .g3d::before {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

/* ---------- vitrine: cenas ---------- */
/* Vendas: transcrição logo abaixo da onda; o cartão de dados termina onde o conteúdo termina */
.vd-av { box-shadow: none; }
/* Agenda: eventos com duas linhas quando há altura; conflito em laranja, a sugestão no pé da coluna */
.ag-ev b, .ag-ev span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ag-ev:not(.ag-ev--curto) b { -webkit-line-clamp: 2; }
.ag-ev--curto b { font-size: 9.5px; }
.ag-ev.conflito { box-shadow: inset 0 0 0 1.5px var(--orange), 0 6px 14px -8px rgba(196,106,18,.45); }
.ag-ev.movido { box-shadow: inset 0 0 0 1.5px var(--green), 0 6px 14px -8px rgba(30,158,88,.4); }
.ag-sugg { margin-top: auto; }
.ag-sync .bi { --bc: var(--ink-2); }
/* Marca: indicadores e estrelas legíveis */
.mc-m p span { font-size: 10px; }
.mc-al { padding: 12px 13px; }
/* Finanças: número principal no peso das outras cenas */
.fi-total p b { font-size: 26px; }
.fi-curve__x { font-size: 10px; }
/* Estoque: a curva de cobertura visível desde a entrada, com área até a ruptura */
.st-mini__antes { stroke: #c46a12; stroke-width: 1.75; }
.st-mini__rop { stroke: #d9a35b; opacity: .9; }
.st-mini__t { font-size: 10px; }
/* Logística no celular: o resumo sem a lista da frota e a sugestão mais estreita */
@media (max-width: 600px) {
  /* no celular o atraso entra no próprio cartão de resumo (a linha da CAM-03 fica laranja), sem o aviso
     separado: a cidade fica com uma área contínua para o caminhão, o desvio e o destino */
  .show--mob .scn--map.is-3d .mp-fleet li:not(#fl-c) { display: none; }
  .show--mob .scn--map.is-3d #mp-alert { display: none; }
  .show--mob .scn--map.is-3d .mp-sugg { width: 168px; }
}

/* ---------- problema ---------- */
@media (min-width: 1181px) {
  .problem2__grid { gap: 80px; }
}
.losses b { text-wrap: balance; }

/* ---------- ferramentas (só o texto; a faixa não muda) ---------- */
.tools__label b { text-wrap: balance; max-width: 22ch; }

/* ---------- simulador ---------- */
.sim__margin i { height: 8px; border-radius: 4px; }
.sim__out .btn { --h: 48px; padding: 0 22px; }
.sim__pct { text-wrap: pretty; }

/* ---------- como funciona: cartão no pé do quadro, fluxo no alto ---------- */
/* os três cartões com a mesma altura: o conteúdo foi igualado (passo seguinte no 1, terceiro item no 3)
   e o rodapé de cada um fica no pé */
.lente { flex: 1; margin-top: 0; }
.lente__nota { padding-top: 14px; }
#diagnosticar .proximo { margin-top: 14px; }
#revisao .proximo { margin-top: auto; }
.ag-ev.conflito .ag-flag { background: var(--orange); }
/* acompanhamento: o fluxo inteiro já roda, os nós ficam com contorno verde */
.etapa:last-child .no__ico { color: var(--green-ink); }
.etapa:last-child .no--auto .no__ico { color: var(--green-dk); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px #121211, 0 12px 22px -12px rgba(0,0,0,.55); }
.etapa:last-child .fluxo__linha { background: var(--green-line); }

/* ---------- projetos ---------- */
.proj__txt .status { font-size: 12.5px; }

/* ---------- como contratar ---------- */
.plan__price { display: flex; align-items: center; }
.plan--featured .plan__price { font-size: 36px; }
.plan__list li { line-height: 1.5; }
.security__list li span, .security__list li p { text-wrap: pretty; }
@media (max-width: 600px) {
  .plans h2 .soft { display: block; }
}

/* ---------- dúvidas e Athena ---------- */
.faq summary { padding: 20px 0; }
.athena__chips button { padding: 11px 12px; }
@media (max-width: 600px) {
  .athena:not(.athena--conversa) .athena__chips button:nth-child(4) { display: flex; }
}

/* ---------- contato ---------- */
@media (min-width: 601px) {
  .fs .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fs .chips .opt span { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 48px; padding: 10px 12px; line-height: 1.25; }
}
.fs__count, .fs__count b { font-weight: 500; }
@media (min-width: 901px) {
  .cta__copy { align-self: center; }
}

/* ---------- rodapé ---------- */
.footer2__col { gap: 12px; }
.footer2__col a[data-wa], .footer2__col a[data-kind="mailto"] { display: inline-flex; align-items: center; }
.footer2__col a[data-wa]::before, .footer2__col a[data-kind="mailto"]::before { content: ""; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.footer2__col a[data-wa] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.footer2__col a[data-kind="mailto"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); }
@media (max-width: 600px) {
  .footer2, .footer2 a, .footer2 p { font-size: 15px; line-height: 1.55; }
  .footer2__legal { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- celular: leads, grade do painel ---------- */
@media (max-width: 600px) {
  .head__lead, .problem2__lead, .cta__lead { font-size: 16px; line-height: 1.5; }
  .stage { background-size: 100% 100%, 16px 16px; background-position: 0 0, 8px 8px; }
  /* a marca um pouco menor e mais espaço acima dela, onde os fios fazem a curva */
  .core2-wrap { padding: 44px 0 20px; }
  .core2__tile { width: 64px; height: 64px; border-radius: 19px; }
  .core2__tile .core-mark { width: 28px; height: 26px; }
  /* a bancada fica em pouco mais da metade do tamanho: as mensagens e os dois focos da planilha crescem */
  .lap__sticky p { font-size: 16px; }
}
/* tablet: a reticência da janela sai, o fio da marca chega naquele canto */
/* Estoque: o estado (ruptura / pedido enviado) desce para a linha da projeção; o nome do item nunca quebra */
.scn--stock.is-3d .st-card__h { position: relative; display: block; }
.scn--stock.is-3d .st-card__h em { position: absolute; right: 0; bottom: -1px; }
/* contraste mínimo de 4,5 nos textos pequenos */
.mp-hora { color: #6c6c66; }
.chaos .sheet .err { color: #b8322a; }

/* =========================================================
   Rodada 4 (críticas da rodada 3)
   ========================================================= */

/* ---------- hero: objetos ---------- */
/* post-it maior à direita (pedido do Elisson no editor): "procedimento" cabe com margem; o WhatsApp recua um pouco */
.chaos .src--wa { left: 280px; }
.chaos .src--note { left: 510px; width: 122px; }
.src--note { padding: 15px 14px 17px; font-size: 20px; }
/* post-its do pipeline com dois tracinhos de "texto" */
.board .board__cols i { background-image: linear-gradient(#b9b9b3, #b9b9b3), linear-gradient(#b9b9b3, #b9b9b3); background-size: 11px 1px, 7px 1px; background-position: 4px 6px, 4px 10px; background-repeat: no-repeat; }
.board .board__cols i.half { background-size: 9px 1px, 0 0; background-position: 4px 5px, 0 0; }
/* fita dos post-its: só um fio claro, bem mais leve que o contorno */
/* o post-it do laptop cobre só o canto de baixo da tela, longe do título da chamada */
.chaos .src--laptop { left: 242px; }
/* o carimbo longe da espiral */
.paper__stamp { top: 14px; }

/* ---------- sistema: botões ---------- */
/* o brilho de cima mais discreto e a sombra curta, sem halo cinza */
/* o mesmo corpo de texto em todos os botões grandes (hero, simulador, planos, formulário) */
.btn--lg, .plan .btn { font-size: 15px; }
.plan .btn { --h: 52px; font-weight: 650; }

/* ---------- hero no celular: abertura mais curta e título em três linhas deliberadas ---------- */
@media (max-width: 600px) {
  .hero h1 { font-size: 31px; line-height: 1.05; text-wrap: wrap; }
  .hero h1 .soft { display: block; }
  .hero__sub { margin-top: 20px; }
}
/* laptop: quatro pessoas diferentes (enquadramento, inclinação, caneca, mão levantada), o mesmo traço */
.vc2__gola { fill: none; stroke: var(--tinta); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.vc2__obj { fill: #fff; stroke: var(--tinta); stroke-width: 1.3; stroke-linejoin: round; }
.vc2__obj--alca { fill: none; stroke-linecap: round; }
/* WhatsApp: as perguntas que dependem do dono pesam mais que a resposta */
.src--wa .bubble.in em { font-weight: 750; color: #6b6b66; }
/* e-mail: divisórias recuadas (não é uma planilha) e marcador alinhado ao assunto; lidas bem mais claras */
.chaos .mail li { position: relative; border-bottom: 0; }
.chaos .mail li + li::before { content: ""; position: absolute; left: 27px; right: 12px; top: 0; height: 1px; background: #ececE8; }
/* post-it: a linha vermelha com a mesma margem óptica da escrita preta */
.note__2 { padding-left: 2px; }
/* planilha: a coluna do valor em dúvida mais larga; cabeçalhos secundários mais apagados */
.chaos .sheet { grid-template-columns: 22px 1.14fr 1.06fr .75fr; }
.chaos .sheet .h { padding-inline: 0; }
/* romaneio: a anotação com respiro embaixo */
.src--paper { padding-bottom: 18px; }
.paper__hand { margin-top: 8px; }
/* quadro branco: os títulos das colunas e a nota vermelha são as duas âncoras de leitura */
.board .board__red { font-weight: 700; }
/* tablet: a bancada e a vitrine mais próximas (o fio da marca faz a curva nesse intervalo) */
/* celular: as seis cenas à vista, em duas linhas de três abas */
@media (max-width: 600px) {
  .show__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
  .show__tab .ico { width: 14px; height: 14px; }
}

/* ---------- vitrine: cenas (rodada 4) ---------- */
/* Logística: a sugestão com a mesma margem dos cartões de cima */
.scn--map.is-3d .mp-sugg { bottom: 16px; right: 16px; }
/* Vendas: a orientação da IA é o centro da cena; a chamada fica mais compacta e sem vazio interno
   (o palco do vídeo absorve a altura, a legenda tem três linhas fixas logo acima dos controles) */
.scn--sales { grid-template-columns: 272px minmax(0, 1fr); }
.vd-cc { margin-top: 6px; }
.vd-slot > b { margin-top: 8px; font-weight: 600; }
.vd-slot > p { min-height: 34px; margin-top: 5px; font-size: 12px; line-height: 17px; }
.vd-data { height: 100%; align-self: stretch; }
/* Agenda: a prioridade do dia e a ação proposta em 12 a 13 px; horários e origens menores; quem muda de
   lugar anima a largura no mesmo ritmo da posição (nunca atravessa a divisória do dia) */
.ag-ev { transition: left .95s cubic-bezier(.65,0,.35,1), top .95s cubic-bezier(.65,0,.35,1), width .95s cubic-bezier(.65,0,.35,1), height .6s var(--ease), opacity .4s, transform .5s var(--ease), box-shadow .35s; }
.ag-prio li b { font-size: 12px; }
.ag-prio li span { font-size: 9.5px; }
.ag-sugg > b { line-height: 1.3; }
/* Marca: concorrência num cartão só, com duas divisões; as menções preenchem o cartão */
.mc-al--duplo .mc-al__parte + .mc-al__parte { border-top: 1px solid rgba(255,255,255,.12); }
.mc-al--duplo .mc-al__sub { margin-top: 8px; }
.mc-al--duplo .mc-al__parte + .mc-al__parte .mc-al__sub { margin-top: 0; }
.mc-al--duplo span { color: #c4c4be; }
.mc-feed ul { gap: 9px; }
.mc-m { padding-block: 8px; }
.mc-m p { font-size: 11.5px; line-height: 1.35; }
/* Finanças: o aviso entra no fluxo do cartão do gráfico, com espaço próprio; a curva ocupa o que sobra */
.fi-price { display: flex; flex-direction: column; padding: 12px 14px 14px; }
.fi-price .fi-curve { flex: 1 1 auto; min-height: 64px; height: auto; width: 100%; }
.fi-warn { flex: none; margin-top: 10px; }
/* Agenda: quinta mais larga (1 : 1,6 : 1), para os dois compromissos em conflito caberem lado a lado sem
   reticências; as linhas da grade acompanham as colunas */
.ag-days { grid-template-columns: 30px 1fr 1.6fr 1fr; }
.ag-grid { background-size: 100% calc(100% / 9), 100% 100%, 100% 100%; }
.ag-grid::before { left: 27.78%; width: 44.44%; }
.ag-ev:not([data-fonte]) { padding-right: 6px; }
.ag-ev.conflito { padding: 3px 4px 3px 8px; }
.ag-ev.conflito::before { left: 3px; }
.ag-ev.conflito .ag-src { display: none; }
.ag-now { left: 27.78%; width: 44.44%; }
/* o selo "Conflito" acima dos dois cartões, sem cobrir o texto */
.ag-ev.conflito .ag-flag { right: auto; left: 6px; }

/* ---------- problema ---------- */
@media (min-width: 1181px) {
  .problem2__visual { align-self: center; }
}
.losses li.is-hit .losses__ico { box-shadow: inset 0 0 0 1px rgba(111,211,154,.75); }
/* a notificação mais nova em contraste cheio; as anteriores um pouco recuadas (sem desfocar) */
.notifs .notif:not(:last-child) .notif__txt, .notifs .notif:not(:last-child) time, .notifs .notif:not(:last-child) .notif__app { opacity: .72; }
@media (max-width: 600px) {
  .problem2__visual { margin-top: -8px; }
  .problem2 { padding-bottom: 56px; }
}

/* ---------- ferramentas (só texto e respiro; a faixa não muda) ---------- */
.tools__grid { height: 212px; }
.tools__label span { display: block; font-size: 16px; }
@media (max-width: 900px) {
  .tools__label b { margin-inline: auto; }
}

/* ---------- simulador ---------- */
.sim__box { box-shadow: 0 0 0 1px #e2e2dd, 0 2px 4px rgba(16,16,15,.04), 0 18px 36px -20px rgba(16,16,15,.22); }
.field__scale { position: relative; }
.field__tick { position: absolute; left: calc(11px + var(--p) * (100% - 22px)); translate: -50% 0; }
.field__tick::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1px; height: 4px; background: #d3d3cd; }
/* a ressalva logo abaixo do número, legível sobre o preto */
@media (max-width: 600px) {
  .sim__out { padding-top: 40px; }
}

/* ---------- como funciona: o quadro é só suporte; a profundidade fica no cartão interno ---------- */
.etapa__txt p { text-wrap: pretty; }
.no small { letter-spacing: -.01em; }
.no__ico { box-shadow: 0 0 0 1px #dfdfda, inset 0 1px 0 #fff; }
.etapa:last-child .no__ico { box-shadow: 0 0 0 1px var(--green-line), inset 0 1px 0 #fff; }
.no--trava .no__ico { box-shadow: 0 0 0 1px #f3c7c2, 0 0 0 5px rgba(214,59,47,.08); }
.no--auto .no__ico, .etapa:last-child .no--auto .no__ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px #121211, 0 6px 12px -8px rgba(0,0,0,.45); }

/* ---------- projetos ---------- */
@media (min-width: 901px) {
  .proof .head h2 { max-width: 14ch; }
}

/* ---------- como contratar ---------- */
/* a sequência: 1, 2, 3 discretos antes de cada título (o mesmo marcador de "Como funciona") */
.plans__grid { counter-reset: plano; }
.plan { counter-increment: plano; }
.plan h3::before { content: counter(plano); display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 11px/1 var(--f-mono); vertical-align: 4px; }
.plan--featured h3::before { background: #fff; color: var(--ink); }
.plan:not(.plan--featured) { box-shadow: 0 0 0 1px #e4e4df, 0 1px 2px rgba(16,16,15,.04), 0 14px 28px -22px rgba(16,16,15,.3); }
@media (max-width: 600px) {
  .plans h2 { font-size: clamp(26px, 7.1vw, 30px); letter-spacing: -.035em; }
}
/* segurança: uma faixa só, quatro colunas separadas por linhas (sem cartões dentro de cartão) */
.security { gap: 0; padding: 26px 0; background: none; box-shadow: none; border-radius: 0; border-top: 1px solid #e9e9e5; }
.security__list { gap: 0; }
.security__list li { padding: 2px 22px; border-radius: 0; background: none; box-shadow: none; border-left: 1px solid #e9e9e5; }
@media (max-width: 1180px) {
  .security { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .security__list li:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
  .security__list li { padding: 16px 0; border-left: 0; border-top: 1px solid #e9e9e5; }
}

/* ---------- dúvidas e Athena ---------- */
.faq summary { display: grid; column-gap: 16px; align-items: start; }
/* a Athena com a própria altura (e presa à tela enquanto a lista rola); apresentação mais curta */
@media (min-width: 901px) {
  .athena:not(.athena--conversa) { height: auto; }
}
.athena__oi { margin-top: 0; }
.athena__chips { padding-bottom: 24px; }
.athena__chips button { background: #fff; }
.athena__form button { color: #8a8a84; }
.athena__form button:disabled { opacity: 1; }
.athena__form.tem-texto button { color: #fff; }
@media (max-width: 600px) {
  .athena { min-height: 0; }
}

/* ---------- contato ---------- */
/* a linha do tempo liga só um passo ao seguinte (não continua depois do 04) */
.next::before { display: none; }
.next { gap: var(--gap); }
.next li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 28px; border-left: 1px dashed #3a3a3a; }
.next li::before { line-height: 1; padding-top: 1px; }

/* ---------- rodapé ---------- */
.footer2__brand p { font-size: 14px; }
.footer2__col b { font-weight: 700; }
.footer2__col a:hover { color: var(--ink); }
.footer2__col a[data-wa], .footer2__col a[data-kind="mailto"] { color: #3a3a37; font-weight: 500; text-decoration-color: #c9c9c2; text-underline-offset: 3px; }
.footer2__col .footer2__fine { line-height: 1.5; }
.footer2__col a[href="privacidade.html"] { margin-top: 8px; text-decoration: underline; text-decoration-color: #c9c9c2; text-underline-offset: 3px; }
.footer2__social a, .footer2__social a.ph { width: 40px; height: 40px; }

/* ---------- sistema: três cinzas de linha com função fixa ---------- */
:root { --linha-div: #e9e9e5; --linha-cartao: #e1e1dc; }
.security { align-items: start; }
@media (min-width: 1181px) {
  .security__head { padding-right: 24px; }
}
.athena__chips button { border-color: transparent; }
.athena__chips button:hover { box-shadow: inset 0 0 0 1px #cfcfc9; }
/* ---------- projetos: ilustrações ---------- */
/* a base é suporte (traço cinza); os objetos ficam em tinta; o caminho do pedido até a entrega em verde mais grosso */
.iso .iso-rota { stroke-width: 2; }
/* etiquetas com o mesmo recuo (16 px) em todos os cartões */
.proj .proj__tag--a, .proj .proj__tag--b, .proj .proj__tag--c { top: auto; right: auto; bottom: auto; left: auto; }
.proj--logistica .proj__tag--a, .proj--seguros .proj__tag--b, .proj--franquias .proj__tag--b { left: 16px; top: 16px; }
.proj--logistica .proj__tag--b, .proj--seguros .proj__tag--a, .proj--franquias .proj__tag--a { right: 16px; top: 16px; }
.proj--logistica .proj__tag--c, .proj--seguros .proj__tag--c { right: 16px; bottom: 16px; }
.proj--franquias .proj__tag--c { bottom: 16px; }
/* celular: a área do desenho mais baixa (cerca de 230 px), sem encolher as etiquetas */
@media (max-width: 600px) {
  .proj__ilus { padding: 44px 8px 10px; }
  .proj__ilus .iso { height: 178px; max-width: 100%; margin-inline: auto; }
}
@media (min-width: 601px) and (max-width: 1180px) {
  .security__list { row-gap: 24px; }
}
/* celular: a cena na escala 0,8 mostra só um trecho; a borda some do lado em que ela continua */
@media (max-width: 600px) {
  .show--mob .show__view { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fe, 0px), #000 calc(100% - var(--fd, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fe, 0px), #000 calc(100% - var(--fd, 0px)), transparent 100%); }
}

/* =========================================================
   Rodada 5 (críticas da rodada 4)
   ========================================================= */

/* ---------- vitrine no celular: coreografia por unidade ---------- */
@media (max-width: 600px) {
  .show--mob .scn .fora { opacity: 0 !important; transition: opacity .35s ease; }
  /* Finanças: o ganho e os custos formam a coluna da esquerda; preço e sugestão, a da direita (cada
     coluna cabe inteira no trecho visível, então o número nunca aparece cortado) */
  .show--mob .scn--fin { grid-template-rows: auto minmax(0, 1fr) auto; }
  .show--mob .fi-total { grid-column: 1; grid-row: 1; flex-wrap: wrap; row-gap: 6px; }
  .show--mob .fi-total em { margin-left: 0; }
  .show--mob .fi-costs { grid-column: 1; grid-row: 2 / 4; }
  .show--mob .fi-price { grid-column: 2; grid-row: 1 / 3; }
  .show--mob .fi-sugg { grid-column: 2; grid-row: 3; }
}
@media (max-width: 600px) {
  /* a câmera pode enquadrar uma coluna além da borda da cena: o fundo da janela é o mesmo das cenas */
  .show--mob .show__view { background: #fbfbfa; }
}

/* ---------- sistema: três níveis de profundidade (painel sem sombra, janela com sombra curta, cartão
   interno quase só borda) ---------- */
.vd-call, .vd-data, .ag-cal, .ag-prio, .mc-score, .mc-feed, .mc-al, .fi-total, .fi-costs, .fi-price { box-shadow: 0 0 0 1px #e6e6e1, 0 2px 4px rgba(16,16,15,.02), 0 8px 16px -8px rgba(16,16,15,.08); }
.mc-al--neg { box-shadow: 0 0 0 1px #f2c9c4, 0 2px 4px rgba(16,16,15,.02), 0 8px 16px -8px rgba(214,59,47,.12); }
.lente { box-shadow: 0 0 0 1px #e3e3de, 0 1px 2px rgba(16,16,15,.03), 0 5px 12px -4px rgba(16,16,15,.07); }
.show__tabs { box-shadow: inset 0 1px 1px rgba(16,16,15,.05); }
.show__tab i { background: #c9c9c2; }

/* ---------- hero ---------- */
.btn .ico { translate: 0 .5px; }
.show__bar::after { background-image: radial-gradient(circle, #9a9a95 1.8px, transparent 2.1px); background-size: 7px 4px; }
@media (min-width: 601px) and (max-width: 1180px) {
  .show__bar::after { visibility: visible; }
}
/* núcleo: o aro branco mais estreito (a tecla é a peça; o aro só a assenta) */
.core2 { width: 110px; height: 110px; }
.core2::before { border-radius: 34px; }
@media (max-width: 1180px) {
  .core2 { width: 88px; height: 88px; }
  .core2::before { border-radius: 29px; }
}
@media (max-width: 600px) {
  .core2 { width: 78px; height: 78px; }
  .core2::before { border-radius: 26px; }
}
/* papéis amarelos um tom mais claro; fitas quase só um brilho */
.src--note, .chaos .lap__sticky { background-color: #fff0b1; }
.chaos .lap__sticky { box-shadow: 0 0 0 var(--traco) var(--tinta), 3px 3px 0 0 #fff0b1, 3px 3px 0 var(--traco) var(--tinta), 0 12px 18px -14px rgba(16,16,15,.45); }
.board .board__cols i { background-color: #fff0b1; }
/* quadro branco: a pergunta vermelha é o único acento forte; colunas em peso médio, lista mais clara */
.board .board__cols b { font-weight: 650; }
.board .board__todo { margin-top: 6px; }
.board .board__cols > div { border-left-color: #a3a39c; }
.board .board__cols b { border-bottom-color: #a3a39c; }
/* laptop: uma linha só por forma (o cabelo é mancha cinza, sem contorno próprio sobre o rosto) */
/* WhatsApp: textura interna bem mais fraca, balões com respiro e nada cortado no alto */
.src--wa .wa { gap: 8px; padding: 16px 10px 12px; background-image: radial-gradient(rgba(16,16,15,.035) 1px, transparent 1.2px); }
/* e-mail: o contador discreto (o primeiro assunto não lido comanda) */
.chaos .count--mail { min-width: 44px; justify-content: center; background: #f6f6f3; color: #6b6b66; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px #e6e6e1; }
/* planilha: as coordenadas no mesmo cinza nos dois eixos, grade interna mais clara */
.chaos .sheet span { border-color: #f1f1ee; }
/* romaneio: o carimbo é a identificação; o risco e o ✗ mais leves; a anotação é a escrita forte */
.paper__stamp { right: 12px; }
.paper__list s { text-decoration-color: rgba(214,59,47,.65); }
.paper__list .no i { font-size: 15px; opacity: .8; }

/* ---------- cenas ---------- */
/* Logística: prédios em grafite mais claro; marcadores com um anel branco fino que os separa das arestas */
.g3d-pin { box-shadow: 0 0 0 1.5px #fff, 0 4px 10px -4px rgba(16,16,15,.35); }
/* Vendas: o conselho sem altura sobrando; a análise segue ouvindo no cartão de dados */
.vd-slots { min-height: 104px; }
.vd-cc b, .vd-cc em { margin-right: 4px; }
.vd-escuta { display: flex; align-items: center; gap: 8px; color: #9a9a94; font-size: 10.5px; }
.vd-escuta i { width: 8px; height: 8px; border-radius: 50%; background: #d3d3cd; animation: vd-escuta 1.6s ease-in-out infinite; }
@keyframes vd-escuta { 50% { background: #9a9a94; } }
.vd-moments .vd-escuta::before { display: none; }
.scn--sales.fim .vd-escuta { display: none; }
/* Agenda: compromissos de contexto mais apagados; o laranja só no conflito; selo afastado da borda */
.ag-ev.on:not(.conflito):not(.movido):not(#ag-visita):not(#ag-forn) { opacity: .82; }
.ag-ev.conflito .ag-flag { box-shadow: 0 0 0 2px #fff; }
.ag-sugg > b { text-wrap: balance; }
/* Marca: o alerta operacional manda; a concorrência mais compacta */
.mc-al__acao { display: block; font-size: 10.5px; font-style: normal; font-weight: 650; color: #b3261e; }

/* ---------- problema ---------- */
.ios__widget { margin-block: 26px; }
.problem2__visual .glow { opacity: .35; }
@media (max-width: 1180px) {
  /* no celular e no tablet o iPhone entra logo depois da introdução, antes da lista */
  .problem2__copy { display: contents; }
  .problem2__copy h2 { order: 1; }
  .problem2__lead { order: 2; }
  .problem2__visual { order: 3; }
  .losses { order: 4; }
  .problem2__grid { row-gap: 0; }
  .problem2__lead { margin-bottom: 32px; }
  .losses { margin-top: 32px; }
}
@media (max-width: 600px) {
  .losses b { display: block; }
  .losses li { gap: 14px; }
}

/* ---------- ferramentas ---------- */
.tools__label { align-self: center; }
.tools__label b { font-size: 18px; line-height: 26px; font-weight: 550; }
.tools__label span { line-height: 24px; }

/* ---------- simulador ---------- */
.assume summary { font-size: 14px; font-weight: 600; color: var(--ink); }
.sim__inputs .assume { margin-top: -6px; }
.sim__bar-legend, .sim__card small { font-size: 13px; line-height: 18px; }
.sim__bar-legend span { color: #a8a8a1; }
.sim__big { align-items: baseline; }
.sim__big b { line-height: 1; }
.sim__bar-legend .is-loss b { color: #f0a057; }
.sim__out .btn--light { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px -12px rgba(0,0,0,.6); }
@media (max-width: 600px) {
  .field__tick { display: none; }
  .field__tick--cel { display: block; font-size: 11px; }
}

/* ---------- como funciona: o fluxo e o cartão como um desenho só ---------- */
.etapa__quadro { gap: 14px; }
.lente__top { font-size: 13px; line-height: 18px; font-weight: 650; }
.lente .prior li span, .regras li, .revisao li { font-size: 12px; line-height: 17px; }
.veredito.is-ok em { box-shadow: inset 0 0 0 1px rgba(42,122,78,.18); }

/* ---------- projetos ---------- */
.iso .iso-base { stroke: #b9b9b3; }
.proj__txt p { max-width: 40ch; color: #6b6b66; }

/* ---------- como contratar ---------- */
.plan__price { height: 84px; min-height: 84px; padding-block: 0; }
.plan__list { margin-bottom: 40px; }
/* segurança: a abertura alinhada à borda dos cartões e aos títulos das colunas */
/* a abertura com a mesma estrutura das colunas (ícone em cima, título na mesma linha dos outros) */
.security__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-left: 0; }
.security__ico { width: 32px; height: 32px; border-radius: 10px; }
.security__list .ico { border-radius: 10px; }
@media (min-width: 1181px) {
  .security__list li { padding-top: 0; }
}

/* ---------- dúvidas e Athena ---------- */
.athena__oi { padding-top: 24px; }
.athena__marca { width: 56px; height: 56px; margin-bottom: 0; }
.athena__nucleo { width: 40px; height: 40px; border-radius: 13px; }
.athena__nucleo .core-mark { width: 18px; height: 17px; }
.athena__ola { margin-top: 12px; font-size: 26px; }
.athena__sub { margin-top: 8px; }
.athena__form { margin-top: 16px; }
.athena__form input::placeholder { color: #777770; }
.athena__chips button { font-size: 13px; }
.athena__form button { margin-right: 1px; }
@media (max-width: 900px) {
  .faq__ai { margin-top: 32px; }
}

/* ---------- contato ---------- */
.next li:first-child::before { background: #0b0b0b; color: #d4d4d4; border-color: #3a3a3a; }
.next li::before { font-variant-numeric: tabular-nums; text-align: center; }
@media (max-width: 600px) {
  .fs .chips .opt span { display: grid; align-items: center; }
}

/* ---------- rodapé ---------- */
.footer2__brand p, .footer2__col .footer2__fine { font-size: 14px; line-height: 21px; color: #62625b; }
.footer2__social a, .footer2__social a.ph { border-radius: 14px; }

/* ---------- celular: um ritmo só (seções 56 a 64 px, blocos 24 a 32 px, título e apoio 12 a 16 px) ---------- */
@media (max-width: 600px) {
  .hero__sub { max-width: 350px; margin-inline: auto; font-size: 16px; line-height: 24px; }
  .section, .sim, .how, .proof, .plans, .faq { padding-block: 56px; }
  .head { margin-bottom: 28px; }
  .head__lead { margin-top: 12px; }
  /* abas: ícone e texto alinhados entre as duas linhas */
}
.iso .iso-ctx { stroke: #8f8f89; }
.iso .iso-seta { fill: none; stroke: var(--green); stroke-width: 1.8; }
.security__ico .ico { width: 16px; height: 16px; }
/* tablet: menos intervalo entre a bancada e a vitrine (o fio faz a curva logo acima da janela) */
/* celular: a bancada equilibrada no painel (as linhas de baixo deslocadas para a direita) */
@media (max-width: 600px) {
  .chaos .src--mail { left: 20px; }
  .chaos .src--sheet { left: 22px; }
  .chaos .src--paper { left: 298px; }
}

/* =========================================================
   Rodada 6 (críticas da rodada 5)
   ========================================================= */

/* ---------- estados de toque: o :hover não fica preso em telas sem ponteiro ---------- */
@media (hover: none) {
  .faq summary:hover { color: inherit; }
  .footer2__col a:hover { text-decoration: none; color: inherit; }
}

/* ---------- hero ---------- */
@media (min-width: 1181px) {
  .hero__sub { max-width: 600px; text-wrap: balance; }
}
@media (max-width: 600px) {
  .chaos .src--board { left: 14px; }
}

/* ---------- vitrine: cenas ---------- */
/* Vendas: o palco da ligação mais baixo; a legenda ganha espaço, numa marcação só */
.vd-stage { flex: none; min-height: 0; }
.vd-cc { flex: 1; height: auto; }
.vd-cc mark, .vd-cc .hl, .vd-cc em.hl { background: rgba(196,106,18,.14); text-decoration: none; border-bottom: 0; }
/* Agenda: respiro no alto da grade e o último compromisso inteiro */
.ag-body { padding-top: 6px; }
/* Marca: o alerta termina no próprio conteúdo */
.mc-side { align-items: stretch; }
.mc-al--neg { flex: none; }
/* Finanças: um sistema só para valores em dinheiro (Nunito com algarismos tabulares) */
.fi-costs li p span { font-family: var(--f); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Estoque no celular: o cartão de cobertura entra no pé da janela, sobre a estante */
@media (max-width: 600px) {
  .show--mob .scn--stock.is-3d .st-card { top: auto; bottom: 14px; left: 190px; width: 390px; display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 14px; align-items: center; }
  .show--mob .scn--stock.is-3d .st-card .st-card__h { grid-column: 1; grid-row: 1; }
  .show--mob .scn--stock.is-3d .st-card .st-card__n { grid-column: 1; grid-row: 2; }
  .show--mob .scn--stock.is-3d .st-card .st-mini { grid-column: 2; grid-row: 1 / 3; }
  /* Vendas e Marca: os cartões do lado em foco terminam no conteúdo */
  .show--mob .vd-data { height: auto; }
  .show--mob .ag-sync { display: none; }
}

/* ---------- problema ---------- */
.problem2__visual .glow { display: none; }

/* ---------- ferramentas ---------- */
@media (min-width: 901px) {
  .tools__inner { gap: 0; }
}
@media (max-width: 600px) {
  .tools { margin-top: 48px; }
}

/* ---------- simulador: o resultado em duas colunas desde o alto ---------- */
@media (min-width: 1181px) {
  .sim__out { display: grid; column-gap: 44px; }
  .sim__hit { grid-column: 1; grid-row: 1; }
  .sim__duo { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); align-self: end; gap: 20px; padding-top: 0; }
  .sim__duo .sim__card:first-child { padding-right: 0; }
  .sim__duo .sim__card + .sim__card { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid #262626; }
  .sim__bar { grid-column: 1 / -1; grid-row: 2; }
  .sim__out > .btn { grid-row: 3; }
}
.sim__intro h3 { font-weight: 600; }
.sim__intro p { font-size: 14px; line-height: 20px; }

/* ---------- como funciona ---------- */
.proximo { background: #f3f3f0; }
.etapa__txt p { max-width: 38ch; }

/* ---------- projetos ---------- */
@media (min-width: 901px) {
  .proof .head__lead { margin-bottom: 0; }
}
.proj__txt p { text-wrap: balance; }

/* ---------- como contratar ---------- */
.plan--featured .plan__price { font-weight: 500; }
.plan:not(.plan--featured) .plan__price { font-size: 18px; line-height: 24px; font-weight: 600; }
.plan:not(.plan--featured) .btn--line { border-color: #dcdcd6; }
.security { border-bottom: 0; padding-bottom: 0; }

/* ---------- dúvidas ---------- */
.faq .head__lead { max-width: 54ch; text-wrap: balance; }
.faq details[open] summary::after { transform: rotate(45deg); }
.athena__form button { background: #eaeae6; }

/* ---------- contato ---------- */
.fs__count { font-size: 12px; letter-spacing: .02em; }

/* ---------- rodapé ---------- */
.footer2__col a[data-wa], .footer2__col a[data-kind="mailto"] { text-decoration: none; }
@media (max-width: 600px) {
  .footer2__col a[data-kind="mailto"] { word-break: normal; overflow-wrap: normal; }
}
.vd-cc mark { box-shadow: none; }
.vd-cc mark.ok { box-shadow: none; }
/* laptop: a grade de participantes com o mesmo intervalo dos dois lados */
.vc2__grade { gap: 4px; padding: 0 4px 4px; }
@media (min-width: 1181px) {
  .sim__big { flex-wrap: nowrap; }
  .sim__big b { font-size: clamp(60px, 5.1vw, 76px); }
}

/* ---------- vitrine no celular: colunas com largura de celular ----------
   A cena em HTML fica com 710 px (a câmera percorre esse trecho) e cada coluna ocupa cerca de 80% da
   janela; dentro dela, os cartões crescem 15% (na escala 0,8, a ação principal fica perto de 13 a 14 px
   e o apoio perto de 11 a 12 px). */
@media (max-width: 600px) {
  .show--mob .scn--sales, .show--mob .scn--cal, .show--mob .scn--brand, .show--mob .scn--fin { right: auto; }
  .show--mob .vd-call, .show--mob .vd-side, .show--mob .ag-cal, .show--mob .ag-side,
  .show--mob .mc-score, .show--mob .mc-feed, .show--mob .mc-side,
  .show--mob .fi-total, .show--mob .fi-costs, .show--mob .fi-price, .show--mob .fi-sugg { zoom: 1.15; }
}
@media (max-width: 600px) {
  .show--mob .vd-slots { min-height: 96px; }
  .show--mob .mc-feed li:nth-child(n+3) { display: none; }
  .show--mob .fi-total, .show--mob .fi-costs { zoom: 1.04; }
}
/* Finanças: as duas dimensões do gráfico nomeadas, discretas; o ponto com traço que não deforma */
.fi-curve__dot { vector-effect: non-scaling-stroke; }
.fi-eixo { font: 500 9.5px var(--f); }
.fi-curve__x .fi-eixo { position: absolute; right: 0; left: auto; translate: none; }
.fi-eixo--y { position: absolute; left: 16px; }

/* ---------- rodada 6: acabamentos (Astra) ---------- */
/* hero: sequência da abertura */
@media (min-width: 601px) {
  .hero__sub { margin-top: 28px; }
  .hero__ctas { margin-top: 32px; }
}
/* botão preto com volume mais contido */
:root { --preto: linear-gradient(180deg, #30312e 0%, #1c1c1b 55%, #111210 100%); }
/* quadro branco: a lista legível (cerca de 11 a 12 px no tamanho final) */
/* laptop: traços internos mais finos que o contorno do aparelho */
/* e-mail: lida e não lida pelo peso; a lida ainda legível */
.chaos .mail li:not(.unread) { font-weight: 500; }
/* post-it: a folha de trás mais rente e mais clara; a profundidade fica com a sombra */
/* planilha: coordenadas um pouco mais presentes (o mesmo cinza nos dois eixos) */
.chaos .sheet .h { color: #a3a39c; }
/* romaneio: a anotação com um rodapé próprio, sem as pautas atrás */
.paper__hand { margin: 10px -14px -18px; padding: 8px 14px 14px; background: #fff; border-radius: 0 0 4px 4px; }
/* núcleo: aro branco sem o filete cinza (aro, corpo e brilho) */
.core2::before { border: 0; box-shadow: 0 0 0 1px rgba(16,16,15,.06), 0 6px 14px -8px rgba(16,16,15,.18); }
/* abas: a pílula ativa com sombra curta */
/* Marca: o número do alerta em destaque; a concorrência um grau mais leve */

/* ---------- problema ---------- */
.losses__ico { border-color: rgba(255,255,255,.07); }
.losses__ico .ico { stroke-width: 1.5; }

/* ---------- ferramentas ---------- */
@media (min-width: 601px) {
  .tools { margin-bottom: -20px; }
}

/* ---------- simulador ---------- */
.field input[type="range"]::-webkit-slider-thumb { border-width: 1px; }
.field input[type="range"]::-moz-range-thumb { border-width: 1px; }
.sim__margin > div:first-child i b { background: #8a8a84; }

/* ---------- como funciona ---------- */
#diagnosticar .lente__top { color: var(--ink); }
#diagnosticar .lente__top .ico { color: var(--ink-2); }
.lente__nota { font-size: 13px; line-height: 18px; color: #5c5c58; }

/* ---------- projetos ---------- */
.proj__tag { box-shadow: 0 0 0 1px #e1e1dc; }
.iso polygon, .iso polyline, .iso path { shape-rendering: geometricPrecision; }

/* ---------- como contratar ---------- */
.plan--featured .plan__list li { line-height: 24px; }
@media (max-width: 1180px) {
  .plan__price { height: auto; min-height: 0; padding-block: 16px; }
  .plan__list { margin-bottom: 30px; }
}
@media (max-width: 600px) {
  .security__list li { border-top-color: #efefeb; }
}

/* ---------- dúvidas e Athena ---------- */
@media (max-width: 600px) {
  .faq summary { min-height: 60px; padding: 17px 0; align-items: center; }
}

/* ---------- contato: três estados das opções ---------- */
.fs .chips .opt span { transition: background-color .2s, box-shadow .2s; }
@media (hover: hover) {
  .fs .chips .opt:hover span { background: #fafaf8; }
}
.fs .chips .opt input:checked + span { background: var(--green-bg); box-shadow: inset 0 0 0 1px var(--green-line); color: var(--ink); }
.fs .chips .opt input:checked + span .ico, .fs .chips .opt input:checked + span svg { color: var(--green-ink); }
.fs .chips .opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.fs { justify-content: flex-start; }
.next { --gap: 26px; }

/* ---------- rodapé ---------- */
.footer2__col b { font: 600 12px/16px var(--f); letter-spacing: .01em; }
.fs__nav { margin-top: 0; }
.plan:not(.plan--featured) .btn--line { background: transparent; box-shadow: inset 0 0 0 1px #d3d3cd; }
.plan:not(.plan--featured) .btn--line:hover { box-shadow: inset 0 0 0 1px #a3a39c; }
/* simulador: o atalho para as premissas, dentro da ressalva */
/* contraste mínimo de 4,5 nos textos pequenos (réguas, lista do quadro, e-mail lido) */
.chaos .mail li:not(.unread) { color: #71716b; }
.field__scale { color: #6c6c66; }

/* =========================================================
   Rodada 7 (críticas da rodada 6)
   ========================================================= */

/* ---------- hero ---------- */
/* WhatsApp: o balão que chegaria ao alto some antes (posição final calculada no main.js); a máscara só
   amacia a borda */
.src--wa .bubble, .src--wa .typing { transition: opacity .18s ease; }
/* painel: o mesmo recuo nos quatro lados */
@media (min-width: 1181px) {
  .stage { padding: 44px; }
}
/* botão claro no mesmo plano do preto */
/* tablet: subtítulo em duas linhas equilibradas */
@media (min-width: 601px) and (max-width: 1180px) {
  .hero__sub { text-wrap: balance; }
}

/* ---------- cenas ---------- */
/* Marca: a lista de menções termina num degradê (é um feed que rola) */
.mc-feed ul { min-height: 0; }
/* Agenda: a coluna da direita um pouco mais larga; o título da sugestão em duas linhas */
@media (min-width: 601px) {
  .scn--cal { grid-template-columns: minmax(0, 1fr) 200px; }
}
.ag-sugg > b { font-size: 12.5px; }
/* Vendas: cada momento detectado com o trecho da fala que o originou (o cartão de dados fica cheio) */
.vd-moments li { align-items: start; border-radius: 10px; background: #f7f7f4; }
.vd-moments li::before { margin-top: 4px; }
.vd-moments li time { margin-top: 1px; }
.vd-moments li span { font-weight: 600; }
.vd-moments li small { display: block; margin-top: 2px; font-size: 10px; font-weight: 450; line-height: 1.35; color: #6b6b66; }
.vd-moments .vd-escuta { padding: 4px 10px; background: none; }
/* Agenda (celular): o calendário é uma unidade da coreografia; some por inteiro quando a câmera está na
   coluna da direita (nada de compromissos pela metade com reticências) */
/* Vendas e Marca (celular): a coluna em foco fica centrada na altura da janela */
@media (max-width: 600px) {
  .show--mob .vd-side, .show--mob .mc-side { align-self: center; }
}

/* ---------- problema ---------- */
@media (min-width: 1181px) {
  .problem2 { padding-block: 112px; }
}
.losses__ico .ico { width: 18px; height: 18px; }

/* ---------- simulador: o resultado sobe; o botão ancora no pé ---------- */
@media (min-width: 1181px) {
  .sim__inputs { padding: 32px 32px 28px; }
}
.sim__bar-track { height: 14px; border-radius: 7px; }
.sim__bar-legend { margin-top: 8px; }
.field__tick { color: #6b6b66; }
.assume summary { display: flex; align-items: center; line-height: 20px; }

/* ---------- como funciona: um só sinal de "feito" (círculo verde com check branco) ---------- */
.revisao li svg.ico { box-sizing: border-box; width: 17px; height: 17px; margin-top: 0; padding: 3.5px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 2.6; flex: none; }
.lente__nota { display: flex; align-items: flex-end; }

/* ---------- projetos ---------- */
@media (min-width: 901px) {
  .proof .head { align-items: end; }
}

/* ---------- como contratar: a abertura da faixa de segurança é um título, sem ícone ---------- */
.security__ico { display: none; }
.security__head b { line-height: 22px; }

/* ---------- dúvidas: a Athena com a altura da lista, conteúdo centrado ---------- */
@media (min-width: 901px) {
  .faq__ai { flex-direction: column; }
}
.faq summary::after { transition: transform .3s var(--ease), opacity .2s; }

/* ---------- contato ---------- */
.next li:not(:last-child)::after { bottom: calc(-2px - var(--gap)); }

/* ---------- rodapé ---------- */
@media (min-width: 901px) {
  .footer2__col b { padding-top: 7px; }
}
@media (max-width: 600px) {
  .footer2 { padding-top: 72px; }
}
/* simulador: de onde vem o valor (as três parcelas do cálculo), logo abaixo da barra */
.sim__parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.sim__parts li { display: flex; flex-direction: column; gap: 4px; }
.sim__parts span { font-size: 13px; line-height: 18px; color: #a8a8a1; }
.sim__parts b { font-size: 17px; line-height: 22px; font-weight: 600; color: #f2f2ee; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .sim__parts { grid-template-columns: minmax(0, 1fr); }
  .sim__parts li { flex-direction: row; justify-content: space-between; align-items: baseline; }
}
@media (min-width: 1181px) {
  .sim__inputs { gap: 18px; }
}
/* puxador: 20 px, contorno de 1 px que se vê sobre a trilha clara e sombra curta */
.field input[type="range"]::-webkit-slider-thumb { border: 0; background: #fff; }
.field input[type="range"]::-moz-range-thumb { border: 0; background: #fff; }

/* ---------- rodada 7: pontos do Astra ---------- */
/* hero no celular: a primeira solução chega mais cedo (abertura, painel e núcleo mais justos) */
@media (max-width: 600px) {
  .hero__ctas { margin-top: 24px; }
}
/* botão claro seco: contorno de 1 px e sombra curta */
.btn--line { box-shadow: inset 0 0 0 1px #d6d6d0, inset 0 1px 0 #fff, 0 1px 2px rgba(16,16,15,.08); }
/* grade de pontos 20% mais fraca */
/* quadro: a nota vermelha com mais distância do contorno */
.board .board__red { right: 17px; bottom: 19px; }
/* laptop: controles da chamada afastados da borda; traços internos mais finos */
/* e-mail: respiro depois do cabeçalho */
.chaos .mail { padding-top: 4px; }
/* post-it: a folha de trás bem rente */
/* planilha: as linhas do valor em dúvida e do erro um pouco mais altas */
.chaos .sheet span { padding-block: 7px; }
/* romaneio: o risco fino */
.paper__list s { text-decoration-thickness: .75px; }
/* núcleo: aro de 7 px (no computador; tablet e celular têm os seus tamanhos) */
@media (min-width: 1181px) {
  .core2 { width: 104px; height: 104px; }
  .core2::before { border-radius: 33px; }
}
/* janela: os três pontos do menu inteiros */
.show__bar::after { width: 20px; }
/* abas: trilho com 5 px de recuo e a pílula com pouco relevo */
.show__tabs { padding: 5px; }
.show__tab[aria-selected="true"] { box-shadow: 0 1px 3px rgba(0,0,0,.08), inset 0 0 0 .5px rgba(16,16,15,.06); }

/* cenas */
/* Logística: o aviso de atraso sai antes do "Cliente avisado" entrar no mesmo lugar */
.scn--map.is-3d #mp-alert.saiu { opacity: 0; transition: opacity .2s; }
/* Vendas: a transcrição logo abaixo da onda */
.vd-cc { justify-content: flex-start; }
/* Agenda: concluída, a sugestão vira uma confirmação só ("Reunião movida"), sem a outra opção */
.ag-btns:has(#ag-yes.is-done) { grid-template-columns: 1fr; }
.ag-btns:has(#ag-yes.is-done) > span:first-child { display: none; }
/* Marca: três níveis na concorrência (rótulo, achado, explicação) */
/* Finanças: a conclusão do aviso com mais peso que os rótulos do gráfico */
.fi-warn { padding: 8px 10px; }
.fi-warn b { font-weight: 700; }

/* problema */
.losses, .losses li { border-color: transparent; }
.losses li { position: relative; }
.losses li + li::before { content: ""; position: absolute; left: 54px; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.08); }
.notifs .notif:not(:last-child) .notif__txt { color: rgba(14,20,17,.82); }
.notifs .notif:not(:last-child) .notif__txt, .notifs .notif:not(:last-child) .notif__app { opacity: .86; }

/* ferramentas: o texto no centro óptico das duas fileiras */
@media (min-width: 901px) {
  .tools__label { padding-top: 10px; }
}

/* simulador */
.field__scale { margin-top: 8px; line-height: 16px; }

/* como funciona: marcadores de etapa chapados */
.etapa__n { background: var(--ink); box-shadow: none; }
.plan h3::before { box-shadow: none; }

/* como contratar: a sequência ligada por um traço discreto entre os números (computador) */
@media (min-width: 1181px) {
  .plan { position: relative; }
  .plans__grid .plan + .plan::after { content: ""; position: absolute; top: 50px; }
}

/* dúvidas e Athena */
.athena__av { width: 28px; height: 28px; border-radius: 9px; }
.athena__av .core-mark { width: 14px; height: 13px; }
@media (max-width: 600px) {
  .athena__oi { padding-top: 24px; }
  .athena__form { margin-top: 16px; }
  .athena__chips { gap: 8px; padding-bottom: 24px; }
}

/* contato: opções no celular com coluna fixa de ícone e texto 14/18 */

/* rodapé: a razão social como título do bloco; endereço e privacidade separados */
.footer2__col .footer2__fine + .footer2__fine { margin-top: -6px; }
.footer2__col .footer2__fine:last-of-type { margin-top: 2px; }
@media (max-width: 600px) {
  .show--mob .vd-moments small { display: none; }
  .show--mob .vd-moments li { padding-block: 6px; }
  .show--mob .vd-moments { gap: 6px; }
}
/* Vendas: a linha da grade presa à altura da cena (nada passa do pé da janela) */
.scn--sales { grid-template-rows: minmax(0, 1fr); }
.vd-call, .vd-side { min-height: 0; }
.vd-data { overflow: hidden; min-height: 0; }
.vd-moments { gap: 8px; }
.vd-moments li { padding: 7px 10px; }
.vd-todo { gap: 5px; }
/* o momento ainda não detectado não ocupa lugar (entra com um "pop" quando é detectado) */
.vd-moments li[data-a]:not(.on) { display: none; }
.vd-moments li[data-a].on { animation: pop .35s var(--ease) both; }

/* =========================================================
   Rodada 8 (críticas da rodada 7)
   ========================================================= */

/* ---------- hero ---------- */
@media (min-width: 1181px) {
  .hero { padding-top: calc(var(--nav-h) + 44px); }
  .stage { margin-top: 56px; }
}
@media (min-width: 601px) and (max-width: 1180px) {
  .hero__sub { max-width: 590px; font-size: 17px; }
}
.btn--line { background: #fff; }
/* quadro: a lista com a sua coluna, a nota vermelha com a dela */
.board .board__todo { max-width: 64%; }
/* romaneio: a anotação em laranja (atenção); o vermelho fica no carimbo e no erro da planilha */
.paper__hand { color: #9a520d; }
/* laptop: o título da chamada legível; pessoas em traço fino com preenchimentos claros */
.vc2__top { font-size: 9px; }
.vc2__ctrl i { width: 6.5px; height: 6.5px; }
/* abas: as inativas com mais contraste */
.show__tab:not([aria-selected="true"]) { color: #5f5f59; }
@media (max-width: 600px) {
  .show__tab { justify-content: center; padding-left: 6px; }
  /* núcleo: só o aro (sem a sombra que fazia dele um cartão) */
  .core2::before { box-shadow: 0 0 0 1px rgba(16,16,15,.07); }
}

/* ---------- cenas ---------- */
/* Vendas: o quadro da pessoa mais baixo, com a onda dentro dele (indicador ao vivo); transcrição 12/17 */
.vd-stage { gap: 4px; }
.vd-av { width: 40px; height: 40px; font-size: 14px; }
.vd-wave { left: 22px; right: 22px; top: 118px; }
.vd-cc p b { font-weight: 700; }
.vd-cc mark { background: rgba(196,106,18,.1); }
.vd-cc mark.ok { background: rgba(30,158,88,.1); }
.vd-ctrl .end { background: #fff; color: var(--red); box-shadow: inset 0 0 0 1px rgba(214,59,47,.6); }
.vd-pane:first-child .vd-moments { flex: 1; display: flex; flex-direction: column; gap: 8px; }
/* Agenda: o último compromisso com respiro do pé */
.ag-body { padding-bottom: 10px; }
/* Marca: canais com respiro e o selo RA em contorno, como os outros */
.mc-ch li { height: 24px; font-size: 11px; line-height: 14px; }
.mc-ra { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* Finanças: rótulos do gráfico legíveis; a guia de hoje distinta; custos distribuídos no cartão */
.fi-curve__x span:not(.ok):not(.fi-eixo) { color: #4a4a47; font-weight: 600; }
.fi-curve__mark { stroke: #a3a39c; }
.fi-costs { display: flex; flex-direction: column; }
.fi-costs ul { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
/* Estoque: o marcador troca de cor de uma vez (sem o tom intermediário) */
.g3d-pin.g3d-pin--baia { transition: opacity .35s; }

/* ---------- problema ---------- */
@media (min-width: 1181px) {
  .problem2__lead, .losses { max-width: 560px; }
}
@media (max-width: 600px) {
  .losses b { font-size: 17px; line-height: 22px; }
  .losses p { margin-top: 8px; font-size: 15px; line-height: 24px; }
}

/* ---------- ferramentas: sem sangria (o degradê das pontas fica à vista) ---------- */
@media (min-width: 901px) {
  .tools__grid { margin-right: 0; }
}

/* ---------- simulador ---------- */
.sim__parts-h { padding-top: 16px; border-top: 1px solid #222221; line-height: 16px; }
.sim__parts { margin-top: 10px; padding-top: 0; border-top: 0; }
.sim__intro p { text-wrap: pretty; }
/* a barra "Na mesa" dividida nas mesmas três parcelas */
@media (max-width: 600px) {
  .sim__out { gap: 0; }
  .sim__bar { margin-top: 28px; }
  .sim__parts-h { padding-top: 14px; }
  .sim__parts { margin-top: 8px; gap: 8px; }
  .sim__duo { gap: 12px; }
  .sim__out .btn { margin-top: 28px; }
}

/* ---------- como funciona ---------- */
.no--parado .no__ico { opacity: 1; color: #9a9a94; box-shadow: 0 0 0 1px #d6d6d1, inset 0 1px 0 #fff; }
.no--parado small { color: #777a73; }
.etapa__quadro { background-image: radial-gradient(circle, rgba(11,11,11,.09) 1px, transparent 1.35px); }
.etapa__n { translate: 0 -1px; }
@media (max-width: 600px) {
  .etapa__txt h3 + p { margin-top: 10px; }
}

/* ---------- como contratar ---------- */
@media (min-width: 1181px) {
  .plans__grid .plan + .plan::after { left: -22px; width: 20px; border-top: 1px solid #cfcfc9; }
}
.plan--featured .plan__list li { font-weight: 400; color: #e8e8e2; }
.security__head { padding-top: 0; }
@media (min-width: 1181px) {
  .security__head { padding-top: 0; }
}

/* ---------- dúvidas e Athena ---------- */
.faq summary::after { width: 16px; height: 16px; margin-top: 4px; background-size: 16px; opacity: .85; }
.faq summary { grid-template-columns: minmax(0, 1fr) 16px; }
.athena__chips button { min-height: 56px; align-items: center; }
.athena__id em { margin-left: -2px; }
/* a saudação no centro do espaço de cima; o campo e as sugestões ancorados no pé */
@media (min-width: 360px) and (max-width: 600px) {
  .athena:not(.athena--conversa) .athena__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .athena:not(.athena--conversa) .athena__chips button { min-height: 64px; font-size: 13px; line-height: 18px; }
}

/* ---------- contato ---------- */
.fs__nav .btn { border-radius: 14px; }
@media (max-width: 600px) {
  .fs .chips .opt span { padding: 12px 10px; }
  .next span { font-size: 16px; }
}

/* ---------- rodapé ---------- */
.footer2__legal-dir { display: inline-flex; gap: 20px; align-items: baseline; }
.footer2__legal-dir a { color: inherit; text-decoration: underline; text-decoration-color: #c9c9c2; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .footer2__col a { font-size: 16px; }
  .footer2__legal-dir { gap: 12px; }
}

/* ---------- sistema: cartões internos com elevação mínima ---------- */
.lente, .proj__tag { box-shadow: 0 0 0 1px #e3e3de, 0 1px 2px rgba(0,0,0,.025), 0 5px 12px rgba(0,0,0,.035); }
.athena__chips button { box-shadow: inset 0 0 0 1px #e6e6e1; }
/* celular: colunas mais largas (cerca de 89% da janela na escala 0,8), margens de 16 a 20 px em repouso */
@media (max-width: 600px) {
  .show--mob .scn--sales, .show--mob .scn--cal, .show--mob .scn--brand, .show--mob .scn--fin { width: 790px; }
  .show--mob .scn--sales { grid-template-columns: 372px 380px; }
  .show--mob .scn--cal { grid-template-columns: 380px 372px; }
  .show--mob .scn--brand { grid-template-columns: 380px 372px; }
  .show--mob .scn--fin { grid-template-columns: 372px 380px; }
}
/* Logística: o aviso de "Cliente avisado" entra no canto de baixo à esquerda (nunca em cima do aviso de atraso) */
.scn--map.is-3d .mp-alert--ok { top: auto; bottom: 16px; left: 16px; }
@media (max-width: 600px) {
  .show--mob .scn--map.is-3d .mp-alert--ok { top: 12px; bottom: auto; }
}
/* Vendas: a onda volta para o fluxo, logo abaixo do quadro da pessoa, mais baixa */
.vd-wave { position: static; height: 22px; margin: 6px 12px 0; opacity: 1; }
.vd-who { padding-bottom: 0; }
.vd-cc { padding-top: 8px; }

/* =========================================================
   Rodada 9 (críticas da rodada 8)
   ========================================================= */

/* ---------- hero ---------- */
.stage { box-shadow: inset 0 0 0 1px #dcdcd6; }
/* quadro: a lista manuscrita legível (um ponto maior, traço mais escuro) */
.board .board__todo { font-size: 14.5px; line-height: 17px; color: #5c5c57; }
/* WhatsApp e e-mail: contadores secundários, em contorno */
.chaos .count, .chaos .count--mail { background: #fff; color: #6b6b66; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(16,16,15,.28); }
.chaos .mail li.unread i { width: 5px; height: 5px; }
/* post-its: fita translúcida com um contorno leve; sombra da folha 20% mais clara */
.src--note::before, .chaos .lap__sticky::before { background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(16,16,15,.16); }
.src--note { box-shadow: 0 0 0 var(--traco) var(--tinta), 1.5px 1.5px 0 0 #fff0b1, 1.5px 1.5px 0 var(--traco) #b4b4ae, 0 10px 16px -12px rgba(16,16,15,.3); }
/* planilha: o erro sem fundo rosa, com sublinhado ondulado (como na planilha de verdade) */
.chaos .sheet .err { background: #fff; text-decoration: underline wavy rgba(214,59,47,.7); text-decoration-thickness: 1px; text-underline-offset: 3px; animation: none; }
/* romaneio: carimbo mais leve que o contorno dos cartões */
.paper__stamp { border-width: 1.25px; }
/* laptop: traço das pessoas um pouco mais definido */
/* janela e abas */
.show__bar::after { align-self: center; }
@media (hover: hover) {
  .show__tab:not([aria-selected="true"]):hover { background: rgba(255,255,255,.55); color: var(--ink); }
}
/* tablet: o núcleo desce na coluna (a descida até a janela fica curta) */
/* celular: a abertura e o núcleo mais justos */

/* ---------- cenas ---------- */
/* cartões pretos: o brilho só no filete de cima, sem faixa clara */
.vd-coach, .ag-sugg, .mc-al--ia, .fi-sugg, .mp-sugg, .st-sugg { background: linear-gradient(180deg, #232322 0%, #151514 100%); }
/* Vendas: a onda dentro do quadro da pessoa; a transcrição com contraste final */
.vd-stage { position: relative; align-content: start; padding-top: 12px; }
.vd-stage .vd-wave { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 18px; margin: 0; }
.vd-cc p.old { opacity: .62; }
.vd-cc p.ma b { color: var(--green-ink); font-weight: 650; }
.vd-self { top: 8px; right: 8px; }
/* Agenda: o nome do compromisso manda; os metadados mais leves */
.ag-ev b { font-size: 10.5px; }
/* Marca: o problema da própria empresa primeiro */
.mc-al--neg b { font-weight: 700; }
/* Finanças: a curva identificada como ilustrativa; o desperdício do frete num segmento chapado */
.fi-ilus { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #f3f3f0; font-weight: 500; }

/* ---------- problema ---------- */
.losses__ico { background: rgba(255,255,255,.04); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #e8e8e2; }
.ios__widget { align-items: baseline; }
.iphone::before { box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.notifs .notif { background: rgba(255,255,255,.78); }
.notifs .notif:not(:last-child) { background: rgba(255,255,255,.6); }
.notif__txt { color: #1d1d1c; }
@media (max-width: 600px) {
  .losses__ico { width: 40px; height: 40px; }
}

/* ---------- ferramentas ---------- */
.tools__grid { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }

/* ---------- simulador ---------- */
@media (min-width: 1181px) {
  .sim__out { border-radius: 0 28px 28px 0; }
}
.sim__tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; vertical-align: 2px; }
.sim__card-nota { margin-top: 4px; font-size: 12px; line-height: 16px; color: #a8a8a1; }
.sim__parts-h { font-size: 13px; color: #9a9a94; }
/* a barra "Na mesa" em três trechos separados, com as mesmas três intensidades das parcelas */
/* premissas: o mesmo "+" sem círculo das dúvidas */
.assume summary::before { width: 16px; height: 16px; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d1d1c' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M8 2.5v11M2.5 8h11'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s var(--ease); }
.assume[open] summary::before { transform: rotate(45deg); }
.field__tick { top: 0; }
@media (max-width: 600px) {
  .field__scale span, .field__tick--cel { font-size: 11px; line-height: 14px; color: #777770; }
}

/* ---------- como funciona ---------- */
.fluxo__pontos i { translate: 0 1px; }
.veredito em { height: 24px; display: inline-flex; align-items: center; }
.etapa__txt p { color: #5c5c57; }
.lente { padding: 16px 18px; }
.lente__top + * { margin-top: 12px; }

/* ---------- projetos ---------- */
@media (min-width: 901px) {
  .proof .head__lead { padding-bottom: 0; align-self: start; }
}
.proj--logistica .proj__tag--c, .proj--seguros .proj__tag--c, .proj--franquias .proj__tag--c { bottom: 22px; }
.proj__txt { margin-top: 4px; }
.iso .iso-fantasma-l, .iso .iso-fantasma { opacity: .7; }

/* ---------- como contratar ---------- */
.plans__grid .plan + .plan::after { display: none; }
.plan h3 { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 11px; align-items: start; line-height: 1.2; }
.plan h3::before { margin: 2px 0 0; }
.plans .head__lead { text-wrap: balance; }
.security__list li { border-left-color: #f1f1ee; }
@media (min-width: 1181px) {
  .security { grid-template-columns: 1.1fr 4fr; }
  .security__list span { font-size: 14px; line-height: 21px; }
}

/* ---------- dúvidas e Athena ---------- */
.athena { box-shadow: 0 0 0 1px #e3e3de, 0 1px 2px rgba(0,0,0,.03), 0 6px 16px rgba(0,0,0,.05); }
.athena__form { box-shadow: 0 1px 2px rgba(16,16,15,.04); }
.athena__chips button .ico, .athena__chips button svg { color: #666660; stroke-width: 1.5; }
.athena__nucleo { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px #121211, 0 0 0 4px rgba(30,158,88,.08), 0 10px 20px -12px rgba(0,0,0,.5); }
@media (hover: hover) {
  .faq summary:hover { color: var(--ink); }
  .faq summary:hover::after { opacity: 1; }
}

/* ---------- contato ---------- */
.fs .chips .opt span .ico, .fs .chips .opt span svg { color: #4a4a47; }
.fs__bar { flex: 1 1 auto; width: 100%; }
@media (max-width: 600px) {
  .fs .chips .opt span { min-height: 64px; hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; }
}

/* ---------- rodapé ---------- */
.footer2__col a { color: #2a2a28; }
.footer2__brand p { font-weight: 400; line-height: 22px; }
@media (max-width: 600px) {
  .footer2__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 16px; }
}
@media (max-width: 600px) {
  .fs .chips .opt span { line-height: 19px; }
}
@media (max-width: 380px) {
  .fs .chips .opt span { font-size: 13px; }
}
.vd-stage .vd-wave { top: auto; }
/* contraste mínimo de 4,5 */
.meses span:not(.agora):not(.ok) { color: #5f5f59; }
.footer2__legal-dir > span { color: #71716b; }

/* =========================================================
   Rodada 10 (críticas da rodada 9)
   ========================================================= */

/* ---------- hero ---------- */
.btn .ico { width: 16px; height: 16px; }
.board__legs { stroke-width: 1.25; }
.src--wa .typing i { width: 4px; height: 4px; background: #8a8a84; }
/* laptop: a tela apoiada na base (um só volume) */
.lap2__base { margin-top: -2px; }
/* planilha: o valor em dúvida menos chamativo que o erro */
.chaos .sheet .hl { box-shadow: inset 0 0 0 var(--traco) rgba(196,106,18,.6); background: #fffaf0; }

/* ---------- cenas ---------- */
/* Logística: o cartão de resumo mais estreito */

/* Vendas: quadro da pessoa um pouco mais alto e transcrição 12,5/18 (menos vazio antes dos controles) */
.vd-stage { height: 128px; }
/* Agenda: ícones de origem legíveis */
.ag-src { width: 15px; height: 15px; }
.ag-src .bi { width: 11px; height: 11px; --bc: #8a8a84; }
/* Marca: o degradê das menções começa acima do texto; selo RA do tamanho dos ícones */
.mc-ra { width: 12px; height: 12px; line-height: 12px; font-size: 6.5px; border-radius: 3px; }
/* Finanças: o selo "curva ilustrativa" no canto do gráfico, numa linha só; o desperdício do frete chapado */
.fi-price { position: relative; }
.fi-h .fi-ilus { position: absolute; right: 14px; top: 38px; margin: 0; white-space: nowrap; }
.fi-eixo--y { top: 34px; }
.fi-bar s { background-image: none; }
/* Estoque: o trecho plano do gráfico marcado como ruptura (até o pedido) */
.st-mini__t--rupt { fill: #9a520d; font-size: 9px; }
.scn--stock.ordered .st-mini__t--rupt { opacity: 0; transition: opacity .3s; }
/* tablet: o núcleo no meio da altura da bancada */
/* celular: Vendas maior; Marca alinhada ao alto */
@media (max-width: 600px) {
  .show--mob .mc-side { align-self: start; margin-top: 4px; }
}

/* ---------- problema ---------- */
.losses__ico .ico { translate: 0 -1px; }
.notif time { font-size: 10px; }

/* ---------- ferramentas ---------- */

/* ---------- simulador ---------- */

/* ---------- como funciona ---------- */
.no__fila { box-shadow: 0 0 0 2px #fff; }

/* ---------- projetos: as etiquetas de baixo não cortam a aresta da plataforma ---------- */
.proj__ilus .iso { transform-origin: 50% 40%; }

/* ---------- como contratar ---------- */
.security__list b { font-size: 14px; font-weight: 650; }
.security__list li { margin-top: 6px; }

/* ---------- dúvidas: o cursor do texto de exemplo em cinza, fino ---------- */
.athena__dica::after { width: 1px; background: #a3a39c; }

/* ---------- contato ---------- */
.fs__bar i { border-radius: 2px; }
.fs .chips .opt span { border-radius: 14px; }

/* ---------- rodapé ---------- */

/* ---------- rodada 10: pontos do Astra ---------- */
/* botão preto: a superfície faz o acabamento (um contorno só, brilho discreto no topo) */
/* painel: a grade ainda mais discreta perto dos fios */
/* laptop: as pessoas com o mesmo traço dos outros objetos */
/* cartões pretos: um contorno só e sombra curta */
.vd-coach, .ag-sugg, .mc-al--ia, .fi-sugg, .mp-sugg, .st-sugg { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px #121211, 0 6px 12px -8px rgba(0,0,0,.22); }
/* Agenda: as integrações com respiro */
.ag-sync { gap: 4px; }
.ag-sync .bi { width: 13px; height: 13px; }
.ag-sync .bi:last-of-type { margin-right: 2px; }

/* problema no celular */
@media (max-width: 600px) {
  .losses li { padding: 14px 0; }
}

/* simulador: marcador de cor junto de cada parcela; rótulos legíveis; puxador com contorno */
.sim__parts li { border-left: 0; padding-left: 0; }
.sim__parts li span { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: #b5b5ae; }
/* legenda: quadrados de 10 px na cor de cada parcela, com contorno claro (o mais escuro um pouco mais marcado) */
.sim__parts li span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.sim__parts li:nth-child(1) { --c: #e9a662; }
.sim__parts li:nth-child(2) { --c: #c46a12; }
.sim__parts li:nth-child(3) { --c: #9a5313; }
.sim__parts li:nth-child(3) span::before { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.sim__parts li b { padding-left: 16px; }
@media (max-width: 600px) {
  .sim__duo { margin-top: 32px; }
  .sim__parts li b { padding-left: 0; }
}

/* projetos: descrições com corpo de leitura */
.proj__txt p { font-size: 15px; line-height: 23px; }

/* como contratar no celular: a faixa de segurança perto dos cartões */
@media (max-width: 600px) {
  .security { margin-top: 40px; padding-top: 24px; }
}

/* Athena: o campo como superfície; a apresentação mais perto dele */
.athena__form { border-color: #deded8; }
@media (max-width: 600px) {
  .athena:not(.athena--conversa) .athena__chips button { gap: 10px; }
  .athena:not(.athena--conversa) .athena__chips button .ico, .athena:not(.athena--conversa) .athena__chips button svg { margin-top: 2px; }
}

/* contato: progresso perto da pergunta; linha do tempo mais justa no celular */
.fs__top { margin-bottom: 10px; }
@media (max-width: 600px) {
  .fs__top { margin-bottom: 6px; }
}
/* como funciona no celular: o título encostado no próprio quadro (20 px), a próxima etapa a 46 px */
@media (max-width: 600px) {
  .etapa__txt { margin-top: 0; }
}
.athena__dica { color: #6e6e68; }
/* Vendas: o primeiro painel do cartão de dados ocupa a altura toda; "Ouvindo a ligação…" fica no pé */
.vd-pane:first-child { display: flex; flex-direction: column; min-height: 0; }

/* =========================================================
   Rodada 11 (críticas da rodada 10)
   ========================================================= */

/* ---------- hero ---------- */
.btn--line { --h: 52px; }
@media (max-width: 600px) {
  .btn--line { --h: 48px; box-shadow: inset 0 0 0 1px #d4d4cf, 0 1px 2px rgba(0,0,0,.04); }
}
.vc2__fala { top: 5px; right: 5px; }
/* romaneio: a entrega pendente com um círculo tracejado; quantidades na mesma linha de base */
.paper__list li.pend i::before { content: ""; display: block; width: 9px; height: 9px; margin: 2px 0 0 2px; border-radius: 50%; border: 1px dashed #8a8a84; }
.paper__list li { align-items: baseline; }
.paper__list li > i { align-self: center; }
/* tablet: a janela alinhada à direita, sob o núcleo (fontes em cima à esquerda, marca à direita, soluções embaixo) */

/* ---------- cenas ---------- */
/* Logística: a sugestão entra no lugar (só sobe 6 px), nunca da borda da janela */
.scn--map.is-3d .mp-sugg:not(.on) { transform: translateY(6px); }
/* Marca: o degradê das menções começa mais alto */
.mc-feed ul { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent calc(100% - 10px)); mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent calc(100% - 10px)); }
/* Finanças: as quatro barras com o mesmo trilho */
.fi-bar i { background: #3a3a38; }
/* Agenda: o último compromisso termina 8 px acima da borda */
.ag-grid { margin-bottom: 8px; }

/* ---------- problema ---------- */
@media (min-width: 1181px) {
  .problem2__visual { justify-self: center; }
}
.losses__ico { margin-top: 2px; }
@media (max-width: 600px) {
  .losses b { text-wrap: pretty; }
}

/* ---------- ferramentas ---------- */

/* ---------- simulador ---------- */
/* três laranjas sólidos, os mesmos na barra e nos marcadores */

/* ---------- como funciona ---------- */
.no small { min-height: 32px; line-height: 16px; }
.meses { background: #e9e9e5; }
@media (max-width: 600px) {
  .trilha { gap: 48px; }
  .etapa__txt { padding-top: 16px; }
}

/* ---------- projetos ---------- */
.proj--franquias .proj__tag--c { right: auto; left: 16px; }
@media (max-width: 600px) {
  .proj__txt p { text-wrap: pretty; }
}

/* ---------- como contratar ---------- */
.plan--featured .plan__price, .plan--featured .plan__list { border-color: #333331; }
.security__list li { align-self: stretch; }
@media (max-width: 600px) {
  .security__list li { align-items: flex-start; }
  .security__list .ico { margin-top: 2px; }
}

/* ---------- dúvidas: a apresentação da Athena no meio do espaço livre ---------- */
@media (min-width: 901px) {
  .athena:not(.athena--conversa) .athena__oi { margin-block: auto; }
}

/* ---------- contato ---------- */
.form { padding: 32px; }
.fs__count { color: #6b6b66; }
.fs__count b { color: var(--ink); }
.fs__count span { color: inherit; }
.next li:not(:last-child)::after { border-left-color: #4a4a47; }

/* ---------- rodapé ---------- */
.footer2__col .footer2__fine:first-of-type { color: #3a3a38; }
@media (max-width: 600px) {
  .footer2__social a, .footer2__social a.ph { box-shadow: 0 0 0 1px #d9d9d4; border-color: transparent; }
}

/* ---------- celular: abas mais leves ---------- */
@media (max-width: 600px) {
  .show__tabs { padding: 4px; gap: 2px; }
  .show__tab { min-height: 44px; font-size: 13px; padding: 0 8px; gap: 4px; }
}

/* ---------- rodada 11: pontos do Astra ---------- */
/* Finanças: só o frete em laranja (chapado); os outros desperdícios em cinza, chapados */
.fi-bar s { background: #9a9a94; }
.fi-costs li:first-child .fi-bar s { background: #c46a12; }
/* Agenda: concluída a remarcação, o tracejado do destino sai (um contorno só, o verde) */
.scn--cal:has(#ag-forn.movido) .ag-ghost { opacity: 0; }
/* Marca: o texto que explica o alerta e a concorrência num corpo legível */
.mc-al span { font-size: 11px; line-height: 15px; }
.mc-al--duplo span { font-size: 11px; }
/* Como funciona: faixas "Primeiro passo" e "Próximo passo" legíveis */
.proximo span { font-size: 12px; color: #6b6b66; opacity: 1; }
/* Projetos: o parágrafo do cabeçalho alinhado pelo topo das letras do título */
@media (min-width: 901px) {
  .proof .head__lead { margin-top: 6px; }
}
/* Athena: o grupo (apresentação, campo e sugestões) no meio do cartão; campo com borda e fundo próprios */
@media (min-width: 901px) {
  .athena:not(.athena--conversa) .athena__oi { margin-top: auto; margin-bottom: 0; }
  .athena:not(.athena--conversa) .athena__chips { margin-bottom: auto; }
}
.athena__form { border: 1px solid #deded8; background: #f7f7f4; }
/* simulador: três laranjas com luminosidades bem distintas; legenda mais perto da barra */
.sim__parts-h { margin-top: 18px; }
/* tablet: o núcleo mais baixo, perto da janela */
@media (min-width: 601px) and (max-width: 1180px) {
  .core2-wrap { margin-bottom: 24px; }
}
/* celular: o iPhone um pouco menor */
@media (max-width: 600px) {
  .problem2__visual .iphone { zoom: .73; }
}
/* rodapé: peso óptico dos textos e ícones sociais maiores */
.footer2__brand p, .footer2__col .footer2__fine { font-weight: 450; }
.footer2__col a { font-weight: 500; }
.footer2__social a .ico, .footer2__social a svg { width: 16px; height: 16px; }

/* =========================================================
   Rodada 12 (críticas da rodada 11)
   ========================================================= */

/* ---------- hero ---------- */
@media (max-width: 600px) {
  .hero__ctas { gap: 12px; }
}
/* tablet: a janela ocupa a largura da bancada mais a marca (alinha com o quadro branco à esquerda) */

/* ---------- cenas ---------- */
/* Logística: o aviso de atraso resolvido (verde) assim que a rota é aplicada */
.scn--map.is-3d .mp-alert.resolvido { box-shadow: 0 0 0 1px var(--green-line), 0 1px 2px rgba(16,16,15,.04), 0 12px 26px -20px rgba(16,16,15,.3); }
.mp-alert.resolvido .mp-alert__ico { background: var(--green); color: #fff; }
.mp-alert.resolvido b { color: var(--green-ink); }
/* Agenda: o "agora" às 13h (o mesmo horário da Logística) */
.ag-now { top: calc(100% * 5 / 9); }
/* Vendas: a escuta logo depois dos momentos (sem vazio entre eles) */
.vd-moments .vd-escuta { margin-top: 0; }
/* tempo de fala nas duas partes (você e a Marina), a mesma informação aberta */
.vd-talk__duo { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: #8a8a84; }
/* celular: as colunas em foco centradas na altura da janela, com 12 px entre os cartões */
@media (max-width: 600px) {
  .show--mob .vd-side, .show--mob .ag-side, .show--mob .mc-side { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
  .show--mob .ag-sugg { margin-top: 0; }
}

/* ---------- problema ---------- */
.losses p { max-width: 46ch; text-wrap: pretty; }
.ios__wall { background: radial-gradient(90% 50% at 12% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%), radial-gradient(110% 60% at 100% 100%, #d7e8dc 0%, rgba(215,232,220,0) 66%), linear-gradient(180deg, #eceee9 0%, #d3dad4 100%); }

/* ---------- ferramentas: degradê longo nas duas pontas ---------- */
@media (min-width: 901px) {
  .tools__grid { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 130px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 130px), transparent 100%); }
}

/* ---------- simulador ---------- */
@media (min-width: 1181px) {
  .sim__inputs { padding-top: 44px; }
  .sim__out { padding-top: 44px; }
}

/* ---------- como funciona ---------- */
.etapa__txt { padding-inline: 0; }

/* ---------- projetos ---------- */
@media (min-width: 901px) {
  .proof .head__lead { max-width: 44ch; text-wrap: pretty; }
}

/* ---------- como contratar ---------- */
/* celular: os títulos de seção num tamanho só (30 px, um ponto abaixo do título do hero) */
@media (max-width: 600px) {
  h2, .problem2 h2, .cta h2, .plans h2 { font-size: 30px; line-height: 1.1; letter-spacing: -.035em; }
}
.security__list .ico { background: #fff; box-shadow: inset 0 0 0 1px #e1e1dc; color: var(--green-ink); }

/* ---------- dúvidas e Athena ---------- */
.athena__head .athena__av { display: none; }
.athena__form:not(.tem-texto) button { background: #fff; box-shadow: 0 0 0 1px #d3d3cd; color: #6b6b66; }

/* ---------- contato ---------- */
.fs__nav { padding-top: 24px; }
.next li::before { color: rgba(255,255,255,.8); }
@media (max-width: 600px) {
  .form { padding: 22px 18px; }
  .fs .chips .opt span { font-size: 13.5px; letter-spacing: -.01em; }
}

/* ---------- rodapé ---------- */
@media (max-width: 600px) {
  .footer2__legal { gap: 6px 14px; }
}
.iso .iso-cifrao { font: 700 1.05px/1 var(--f); stroke: none; }

/* ---------- rodada 12: pontos do Astra ---------- */
/* hero: quadro com os títulos das colunas mais presentes; núcleo com menos camadas */
.board .board__cols b { font-size: 14.5px; color: #1d1d1c; }
.core2__tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px #0f0f0e, 0 6px 14px rgba(0,0,0,.14); translate: none; }
/* WhatsApp: o degradê do alto é uma camada por cima (a máscara deixava o texto embaçado) */
.src--wa .wa { position: relative; -webkit-mask-image: none; mask-image: none; }
.src--wa .wa::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 20px; background: linear-gradient(#fbfbfa, rgba(251,251,250,0)); pointer-events: none; }
/* laptop: o cabelo é uma mancha sem contorno, por cima da cabeça (um traço só por forma) */

/* cenas: três níveis de texto (mensagem, explicação, metadado) */
.mc-al--neg b { font-size: 14px; line-height: 19px; }
.mc-al--neg span { margin-top: 6px; font-size: 12px; line-height: 16px; }
.mc-al--duplo b { font-size: 12px; line-height: 16px; font-weight: 500; }
.fi-warn { font-size: 12px; line-height: 16px; }
.fi-costs li p { font-size: 11.5px; }
.fi-sugg > b { font-size: 14px; }
/* Logística: a CAM-03 em destaque enquanto está atrasada */
.g3d-tag.is-warn { scale: 1.1; box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(0,0,0,.5); }
/* Vendas: a orientação é a primeira leitura; o tempo de fala recua */
.vd-slot > b { font-size: 15px; line-height: 1.28; }
.vd-talk em b { font-weight: 500; }
.vd-talk em { color: #4a4a47; }

/* problema no celular */
@media (max-width: 600px) {
  .problem2__lead { margin-bottom: 24px; }
}

/* simulador: o resultado junto dos controles no celular (fica preso ao pé da tela enquanto os controles estão à vista) */
.sim__resumo { display: none; }
@media (max-width: 1180px) {
  .sim__resumo { display: flex; align-items: baseline; gap: 6px; padding: 12px 16px; border-radius: 14px; background: #0c0c0b; color: #c9c9c3; font-size: 13px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.45); }
  .sim__resumo b { font-size: 18px; font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; }
}
.sim__card-nota { font-size: 14px; line-height: 20px; color: #a8a8a3; }

/* como funciona no celular: o nome da etapa antes do quadro */
@media (max-width: 900px) {
  .etapa__txt { display: contents; }
  .etapa__txt h3 { order: -1; margin: 0 0 16px; }
  .etapa__quadro { order: 0; }
  .etapa__txt p { order: 1; margin-top: 16px; }
}

/* projetos: desenho sem transformação (vetor nítido); a terceira etiqueta no mesmo canto nos três; grade mais leve */
.proj__ilus .iso { transform: none; display: block; }
.proj .proj__tag--c, .proj--franquias .proj__tag--c, .proj--seguros .proj__tag--c, .proj--logistica .proj__tag--c { left: 16px; right: auto; bottom: 22px; top: auto; }
.proj__ilus { background-image: radial-gradient(circle, rgba(16,16,15,.1) 1px, transparent 1.35px); }

/* dúvidas: as sugestões da Athena em 14/20 */
@media (min-width: 901px) {
  .athena__chips button { font-size: 14px; line-height: 20px; min-height: 58px; }
  .athena__chips button .ico, .athena__chips button svg { margin-top: 2px; }
}

/* contato no celular: chips com folga para "Posicionamento"; menos espaço até a linha do tempo */
@media (max-width: 600px) {
  .fs .chips .opt span .ico, .fs .chips .opt span svg { width: 15px; height: 15px; }
  .next { margin-top: 32px; }
}

/* rodapé: linha legal legível; ícones de contato no tamanho dos sociais */
.footer2__legal, .footer2__legal a, .footer2__legal span { font-size: 13px; line-height: 20px; font-weight: 400; color: #6b6b66; }
.footer2__col a[data-wa], .footer2__col a[data-kind="mailto"] { gap: 10px; }
.footer2__col a[data-wa]::before, .footer2__col a[data-kind="mailto"]::before { width: 16px; height: 16px; -webkit-mask-size: 16px; mask-size: 16px; }
@media (max-width: 900px) {
  .etapa__txt h3 + p { margin-top: 14px; }
}
.mc-al b { text-wrap: balance; }
.iso .iso-forte { stroke-width: 1.5px; }
.iso .iso-cifrao { fill: var(--green); }

/* =========================================================
   Rodada 13 (críticas da rodada 12)
   ========================================================= */

/* ---------- hero ---------- */
/* o laptop (com o post-it) por cima do e-mail: o bilhete se lê inteiro */
.chaos .src--laptop { z-index: 3; }

/* ---------- cenas ---------- */
/* Logística: os dois flutuantes de cima na mesma linha (12 px) */
.scn--map.is-3d .mp-alert--warn { top: 12px; left: 12px; }
/* Vendas: a legenda da ligação em 13/19 (ocupa o miolo do cartão); o selo "Você" discreto */
.vd-cc { font-size: 13px; line-height: 19px; gap: 8px; }
.vd-self { color: #6b6b66; }
/* Agenda: horas legíveis */
/* Finanças: as quatro barras na mesma tinta; só o frete fracionado em laranja */
.fi-costs li:not(:first-child) .fi-bar s { background: #3a3a38; }
@media (max-width: 600px) {
  .sim__pct { text-wrap: balance; }
}

/* ---------- problema ---------- */
@media (min-width: 1181px) {
  .losses { margin-top: 40px; }
}
/* "Chamada perdida" com o ícone do app Telefone (fone branco sobre verde, raio de 22%) */
.notif__app--call { border-radius: 22%; background: linear-gradient(180deg, #5fe07f, #2fb94f); }

/* ---------- ferramentas ---------- */
.tools__label span { margin-top: 14px; }

/* ---------- simulador (computador): o número e a recuperação em cima; a barra no meio; a margem e o botão embaixo ---------- */
@media (min-width: 1181px) {
  .sim__out { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; }
  .sim__hit { grid-area: hit; }
  .sim__duo { display: contents; }
  .sim__duo .sim__card--rec { grid-area: rec; align-self: end; padding: 0; border: 0; }
  .sim__duo .sim__card:not(.sim__card--rec) { grid-area: mar; align-self: end; padding: 0; border: 0; max-width: 380px; }
  .sim__out > .btn { grid-area: btn; grid-column: auto; align-self: end; justify-self: end; }
}
.sim__intro h3 { font-size: 22px; line-height: 28px; }
/* celular: a faixa com o total some quando o painel do resultado entra na tela */
.sim__resumo { transition: opacity .3s, translate .3s; }
.sim__resumo.some { opacity: 0; translate: 0 12px; pointer-events: none; }

/* ---------- como funciona ---------- */
.no__fila { top: -6px; right: -6px; }
.fluxo__pontos i { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }

/* ---------- projetos ---------- */
.proj__txt { padding: 20px 16px 0; }
@media (min-width: 901px) {
  .proof .head__lead { padding-top: 10px; }
}

/* ---------- como contratar ---------- */
.plan__list li { text-wrap: pretty; }
.security__head b { font-size: 17px; font-weight: 600; }

/* ---------- dúvidas: a Athena como um chat (altura própria, presa à tela enquanto a lista rola) ---------- */
@media (min-width: 901px) {
  .faq__wrap { align-items: start; }
  .faq__ai { position: sticky; top: 96px; align-self: start; display: block; }
  .faq__ai .athena:not(.athena--conversa) { height: auto; flex: none; }
  .athena:not(.athena--conversa) .athena__oi { margin: 0; padding-top: 36px; }
  .athena:not(.athena--conversa) .athena__form { margin-top: 28px; }
}
.athena__head { padding-inline: 16px; }
.athena__id b { font-size: 14px; font-weight: 700; }

/* ---------- contato ---------- */
@media (min-width: 901px) {
  .fs__nav .btn--dark { min-width: 200px; }
}
.next li::before { border-color: rgba(255,255,255,.35); }

/* ---------- rodapé ---------- */
.footer2__col b { margin-bottom: 12px; }
@media (max-width: 600px) {
  .footer2__grid { row-gap: 40px; }
}

/* ---------- celular ---------- */
@media (max-width: 600px) {
  .faq { padding-bottom: 64px; }
}
@media (min-width: 901px) {
  .athena:not(.athena--conversa) .athena__chips { margin: 12px 20px 0; padding-bottom: 24px; }
}
.mc-al--duplo { padding-block: 9px; }

/* ---------- rodada 13: pontos do Astra ---------- */
/* painel: grade ainda mais discreta */
.stage { background-image: radial-gradient(ellipse 40% 55% at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), radial-gradient(circle, rgba(16,16,15,.045) 1px, transparent 1.3px); }
/* quadro: a coluna "Negociação" mais larga */
.board .board__cols { grid-template-columns: 1fr 1.05fr 1.25fr .8fr; }
/* laptop: faixa própria para os controles da chamada */
.vc2__grade { padding-bottom: 14px; }
.vc2__ctrl { bottom: 13px; }
/* post-it do laptop com margem livre em volta da escrita */
.chaos .lap__sticky { left: -58px; top: 56px; }
/* WhatsApp: as mensagens atuais com mais definição */
.src--wa .bubble { font-size: 12.5px; }

/* Vendas no celular: os dois cartões da coluna com a mesma largura */
@media (max-width: 600px) {
  .show--mob .vd-data { align-self: stretch; }
}

/* simulador: o laranja mais escuro com contorno claro (não some no preto) */
.field input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; box-shadow: 0 0 0 1px #b8b8b0, 0 1px 2px rgba(0,0,0,.1); }
.field input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; box-shadow: 0 0 0 1px #b8b8b0, 0 1px 2px rgba(0,0,0,.1); }

/* Athena no celular: perguntas com quebra equilibrada, mesma altura */
@media (max-width: 600px) {
  .athena:not(.athena--conversa) .athena__chips button { padding-inline: 10px; font-size: 14px; line-height: 20px; }
}

/* contato no celular: a linha do tempo mais curta */
@media (max-width: 600px) {
  .next span { line-height: 24px; }
}

/* hero no celular: a solução chega mais cedo */
@media (max-width: 600px) {
  .hero { padding-top: calc(var(--nav-h) + 8px); }
  .stage { margin-top: 20px; }
  .core2-wrap { padding-bottom: 10px; }
}
.iso .iso-cifrao { font-size: 1.15px; }
/* projetos: os desenhos ocupam mais o quadro */
.proj__ilus { padding-inline: 10px; }
.proj__ilus .iso { width: 100%; margin: -10px auto 2px; }
/* WhatsApp: o balão que sai some de fato (a animação de entrada fixava a opacidade em 1) */
.src--wa .bubble.some, .src--wa .typing.some { animation: none; opacity: 0; transition: opacity .18s ease; }
/* celular: espaço para as trilhas dos fios virarem com folga antes da marca */
@media (max-width: 600px) {
  .core2-wrap { padding-top: 50px; }
}
/* dúvidas: o "+" com o mesmo traço de 1,5 px do resto da página (2,25 no desenho de 24 desenhado em 16) */
.faq summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); }

/* ---------- tablet: a mesma leitura do celular, de cima para baixo (bancada, marca, vitrine) ----------
   A bancada fica centralizada no painel, a marca logo abaixo dela e o fio de saída desce reto até a janela. */
@media (min-width: 601px) and (max-width: 1180px) {
  .stage { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 44px 40px 32px; }
  .chaos { grid-column: 1; grid-row: 1; }
  .core2-wrap { grid-column: 1; grid-row: 2; align-self: auto; justify-self: center; margin: 0; padding: 80px 0 46px; }
  .show { grid-column: 1; grid-row: 3; justify-self: center; width: 100%; max-width: 700px; }
  /* núcleo: a tecla com o mesmo aro de 7 px do computador e do celular */
  .core2__tile { width: 74px; height: 74px; border-radius: 22px; }
  /* as linhas de baixo deslocadas para a direita, como no celular: o conjunto fica centrado */
  .chaos .src--board { left: 14px; }
  .chaos .src--mail { left: 20px; }
  .chaos .src--sheet { left: 22px; }
  .chaos .src--laptop { left: 278px; }
  .chaos .src--paper { left: 298px; }
}

/* =========================================================
   Rodada 14 (críticas da rodada 13)
   ========================================================= */

/* ---------- simulador ---------- */
/* o rótulo e o valor recuperável num bloco só (no celular e no tablet, o mesmo intervalo de antes) */
.sim__rec-topo { display: flex; flex-direction: column; gap: 10px; }
/* computador: perda e recuperação na mesma linha de base (os dois valores e os dois "por ano"); as notas
   embaixo, também alinhadas; a barra, a margem e o botão seguem como antes */
@media (min-width: 1181px) {
  .sim__out { grid-template-areas: "kick ." "big rec" "pct nota" "fine nota" "bar bar" "mar btn"; row-gap: 0; }
  .sim__hit, .sim__duo .sim__card--rec { display: contents; }
  .sim__kicker { grid-area: kick; }
  .sim__big { grid-area: big; align-self: last baseline; }
  .sim__rec-topo { grid-area: rec; align-self: last baseline; }
  .sim__pct { grid-area: pct; align-self: baseline; }
  /* a nota ocupa as duas linhas de texto (a ressalva vem logo abaixo do percentual) e começa na mesma linha de base dele */
  .sim__card-nota { grid-area: nota; align-self: start; margin-top: 15px; }
  .sim__bar { grid-area: bar; margin-top: 30px; }
  .sim__duo .sim__card:not(.sim__card--rec) { margin-top: 30px; }
  .sim__out > .btn { margin-top: 30px; }
}
/* a estimativa mais presente: selo legível e a ressalva em 15/21, com mais contraste */
.sim__tag { background: rgba(255,255,255,.13); color: #f2f2ee; }
/* rótulos das escalas: 11/16 em cinza médio, separados do trilho */
.field__scale span { font-size: 11px; line-height: 16px; color: #6b6b66; }

/* ---------- projetos ---------- */
/* a grade de pontos dos cartões com o mesmo passo do painel do hero (20 px) */
.proj__ilus { background-size: 20px 20px; background-position: 10px 10px; }

/* ---------- hero: laptop ---------- */
/* participantes no mesmo traço da bancada: contorno de 1,25 em tudo; o cabelo com contorno e um cinza bem claro */
.vc2__corpo, .vc2__cab { stroke-width: 1.25; }
.vc2__gola, .vc2__obj { stroke-width: 1.2; }
.vc2__cabelo { fill: #ebeae5; stroke: var(--tinta); stroke-width: 1.25; stroke-linejoin: round; }
/* botão preto: o brilho só no meio da borda de cima (o anel claro que seguia o raio parecia uma borda
   metálica dupla nos cantos); o degradê fica, a sombra externa mais curta */
:root {
  --preto-brilho: linear-gradient(90deg, rgba(255,255,255,0) 10%, rgba(255,255,255,.17) 28%, rgba(255,255,255,.17) 72%, rgba(255,255,255,0) 90%) top / 100% 1px no-repeat;
  --preto-sh: 0 0 0 1px #121211, 0 1px 2px rgba(0,0,0,.18), 0 4px 9px -6px rgba(0,0,0,.34);
}
.btn--dark, .athena__form.tem-texto button, .amsg__acts a.pri { background: var(--preto-brilho), var(--preto); }
.btn--dark:hover { background: var(--preto-brilho), var(--preto-hover); box-shadow: 0 0 0 1px #121211, 0 2px 4px -1px rgba(0,0,0,.26), 0 10px 18px -11px rgba(0,0,0,.5); }
/* romaneio: o carimbo no vermelho de alerta do sistema */
.paper__stamp { border-color: rgba(216,58,50,.85); color: rgba(216,58,50,.88); opacity: 1; }
/* janela da vitrine: a sombra de baixo mais curta e mais leve (não chega às abas) */
.show__win { box-shadow: 0 0 0 1px #e1e1dc, 0 1px 2px rgba(16,16,15,.04), 0 10px 20px -12px rgba(0,0,0,.18); }

/* ---------- celular: vitrine ---------- */
/* as cenas em HTML começam todas na mesma altura, logo abaixo do cabeçalho da janela (antes cada coluna
   era centralizada e o primeiro cartão mudava de lugar a cada troca de cena) */
@media (max-width: 600px) {
  .show--mob .vd-side, .show--mob .ag-side, .show--mob .mc-side { align-self: start; justify-content: flex-start; }
  /* abas: o fundo cinza com menos presença (duas fileiras de 44 px, 4 px de respiro) */
  .show__tabs { background: #f0f0ed; box-shadow: inset 0 0 0 1px #e6e6e1; }
  /* painel do hero um pouco mais justo em cima e embaixo */
  .stage { padding-top: 16px; padding-bottom: 12px; }
}
/* bancada no celular: a tela de 640 px encolhe para ~0,55; as mensagens que contam o problema ficam
   com ~10 px na tela (WhatsApp, o pedido urgente do e-mail e as duas células da planilha); o painel
   cede 6 px de cada lado para a bancada */
@media (max-width: 600px) {
  .stage { padding-left: 6px; padding-right: 6px; }
  .src--wa .bubble { padding: 7px 10px; }
  .chaos .mail li { padding-inline: 10px; }
  .chaos .mail li:nth-child(2) { font-weight: 700; letter-spacing: -.01em; }
  .chaos .mail li + li::before { left: 25px; right: 10px; }
  .chaos .src--sheet { width: 240px; }
  .chaos .sheet { font-size: 13px; grid-template-columns: 16px 1.12fr 1.1fr .56fr; }
  .chaos .sheet span { padding-inline: 5px; }
  /* o bilhete do laptop sai no celular: com o e-mail mais legível, ele cobriria o pedido urgente */
  .chaos .lap__sticky { display: none; }
}

/* ---------- vitrine: Agenda ---------- */
/* horas legíveis (11 px em cinza médio); os compromissos no tamanho que cabe na grade, com mais contraste;
   a grade mais leve */
.ag-hours { font-size: 11px; color: #6b6b66; }
.ag-ev span { color: #6b6b66; }
.ag-ev.conflito b { font-size: 9.5px; }
.ag-ev.conflito span { font-size: 9px; }
.ag-grid {
  background-image:
    linear-gradient(#f5f5f2 1px, transparent 1px),
    linear-gradient(90deg, transparent calc(27.78% - 1px), #f0f0ec calc(27.78% - 1px), #f0f0ec 27.78%, transparent 27.78%),
    linear-gradient(90deg, transparent calc(72.22% - 1px), #f0f0ec calc(72.22% - 1px), #f0f0ec 72.22%, transparent 72.22%);
}
.ag-hours span { border-top-color: #f5f5f2; }
/* os compromissos de uma hora com as duas linhas inteiras (a descida do "g" de "Urgente" era cortada) */
.ag-ev { padding-top: 2px; padding-bottom: 2px; }
.ag-ev b { line-height: 12.5px; }
.ag-ev span { line-height: 12.5px; }
/* a etiqueta "Conflito" embaixo do cartão do fornecedor (em cima, cobria o retorno do Grupo Nova) */
.ag-ev.conflito .ag-flag { top: auto; bottom: -12px; }

/* ---------- vitrine: Marca e Finanças ---------- */
/* Marca: a nota de reclamações com um ícone de traço (balão com alerta), como os outros canais */
.mc-ico { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Marca: os rótulos dos dois blocos da concorrência em 12 px, a 7 px da informação principal (o resto do
   cartão um pouco mais justo para a coluna caber na cena) */
.mc-al--duplo .mc-al__sub { font-size: 12px; line-height: 14px; font-weight: 600; color: #a3a39d; }
.mc-al--duplo b { margin-top: 7px; }
.mc-al--duplo span { line-height: 14px; }
.mc-al--duplo .mc-al__parte + .mc-al__parte { margin-top: 7px; padding-top: 7px; }
.mc-side { gap: 6px; }
.mc-al__acao { margin-top: 8px; }
/* Finanças: os períodos com presença (o ganho é por ano; os custos ao lado são do mês) */
.fi-h { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.fi-total p span { font-size: 12px; }
.fi-total p b small { margin-left: 2px; font-size: 15px; font-weight: 600; color: #4a4a47; letter-spacing: 0; }

/* ---------- problema ---------- */
/* a lista começa a 40 px do parágrafo (o respiro de cima do primeiro item somava mais 21 px) */
.losses li:first-child { padding-top: 0; }
@media (min-width: 1181px) {
  /* o telefone 40 px mais perto do texto (o vazio entre a lista e o aparelho diminui) */
  .problem2__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 40px; }
  .problem2__copy + * { justify-self: start; margin-left: 72px; align-self: start; }
}
/* celular: a mesma escala de tipo das outras seções; a lista a ~32 px do aparelho */
@media (max-width: 600px) {
  .problem2__lead { font-size: 16px; line-height: 24px; }
  .losses li b { font-size: 17px; line-height: 22px; }
  .losses { margin-top: 32px; padding-top: 0; }
}

/* ---------- ferramentas ---------- */
/* as pontas da faixa começam transparentes (nenhuma lasca de cartão encostada no texto ou na borda da
   tela) e esmaecem num trecho mais longo */
@media (min-width: 1181px) {
  .tools__grid { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 28px, #000 140px, #000 calc(100% - 130px), transparent calc(100% - 16px)); mask-image: linear-gradient(90deg, transparent 0, transparent 28px, #000 140px, #000 calc(100% - 130px), transparent calc(100% - 16px)); }
}
@media (max-width: 600px) {
  .tools__grid { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 10px, #000 70px, #000 calc(100% - 70px), transparent calc(100% - 10px)); mask-image: linear-gradient(90deg, transparent 0, transparent 10px, #000 70px, #000 calc(100% - 70px), transparent calc(100% - 10px)); }
  .tools__inner { padding-bottom: 24px; }
}

/* ---------- como funciona ---------- */
/* números das etapas mais legíveis */
.etapa__n { font-size: 12px; font-weight: 700; }
/* os pedidos parados antes de "Você aprova" na tinta dos outros pontos (lidos como pedidos, não como pontilhado) */
.etapa:first-child .fluxo__pontos i:not(.is-ok):not(.is-exc) { background: var(--ink-2); }
/* celular: 40 px entre as etapas; 16 px entre o quadro e a descrição */
@media (max-width: 900px) {
  .trilha { row-gap: 40px; }
  .etapa__txt p, .etapa__txt h3 + p { margin-top: 16px; }
}

/* ---------- projetos (celular) ---------- */

/* ---------- como contratar ---------- */
/* o botão branco do cartão preto com volume (a sombra aparece sobre o preto) */
.plan--featured .btn--light { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(16,16,15,.08), 0 1px 0 rgba(255,255,255,.06), 0 10px 22px -12px rgba(0,0,0,.95); }
/* faixa de segurança: os divisores na altura do conteúdo de cada item */
@media (min-width: 901px) {
  .security__list li { align-self: start; }
}

/* ---------- dúvidas: Athena ---------- */
/* cabeçalho de 56 px */
.athena__head { min-height: 56px; padding-block: 9px; }
/* celular: abertura compacta (marca de 36 px, título 24/28, texto 14/20) e as sugestões numa coluna,
   uma linha cada */
@media (max-width: 600px) {
  .athena:not(.athena--conversa) .athena__oi { padding-top: 18px; }
  .athena__marca { width: 36px; height: 36px; }
  .athena__nucleo { width: 32px; height: 32px; border-radius: 10px; }
  .athena__nucleo .core-mark { width: 15px; height: 14px; }
  .athena__ola { margin-top: 10px; font-size: 24px; line-height: 28px; }
  .athena__sub { margin-top: 6px; font-size: 14px; line-height: 20px; }
  .athena:not(.athena--conversa) .athena__form { margin-top: 14px; }
  .athena:not(.athena--conversa) .athena__chips { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 6px; }
  .athena:not(.athena--conversa) .athena__chips button { min-height: 44px; align-items: center; text-wrap: wrap; }
}

/* ---------- contato ---------- */
/* ícones das opções em tinta, 16 px no computador e no tablet */
@media (min-width: 601px) {
  .fs .chips .opt span .ico, .fs .chips .opt span svg { width: 16px; height: 16px; color: #2a2a28; }
}
/* linha do tempo: pontilhado miúdo e regular (pontos de 2 px a cada 6 px), no lugar do tracejado */
.next::before { border-left: 0; width: 1px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.34) 0 2px, transparent 2px 6px); }

/* ---------- rodapé ---------- */
.footer2__col b { font-size: 13px; line-height: 16px; color: #6b6b66; }
.footer2__col a { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .footer2__col a[data-wa], .footer2__col a[data-kind="mailto"] { gap: 8px; }
  .footer2__col a[data-kind="mailto"] { font-size: 15px; }
}

/* ---------- hero: bancada no computador ---------- */
/* as duas fileiras de baixo 10 px mais altas: o romaneio termina na linha das abas da vitrine */
@media (min-width: 1181px) {
  .chaos .src--laptop { top: 230px; }
  .chaos .src--mail { top: 256px; }
  .chaos .src--sheet { top: 418px; }
  .chaos .src--paper { top: 408px; }
}
/* WhatsApp: as mensagens em tinta mais escura (o cartão inclinado e flutuando suaviza o texto em telas 1x) */
.src--wa .bubble.in { color: #161615; font-weight: 650; }
.src--wa .bubble.out { color: #3a3a37; font-weight: 600; }

/* ---------- vitrine: Estoque no computador e no tablet ---------- */
/* os dois cartões à direita, como na Logística: a cobertura em cima e a compra sugerida embaixo (a sugestão
   da IA fica no mesmo canto em todas as cenas); a estante ocupa a esquerda com os vãos do item inteiros */

/* Vendas: "você" como um avatar redondo, no mesmo tratamento do avatar da Marina (sem a pílula com a palavra) */
.vd-self { height: auto; padding: 0; background: none; box-shadow: none; }
.vd-self > span:not(.vd-self__av) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.vd-self__av { width: 22px; height: 22px; border-radius: 50%; background: #eaf5ee; color: #2f8a5a; box-shadow: inset 0 0 0 1px var(--green-line); font-size: 8.5px; font-weight: 700; }
/* Marca: os quatro canais numa linha só (a nota do Reclame Aqui com a sigla) */
.mc-ch { gap: 5px; flex-wrap: nowrap; }
.mc-ch li { padding: 0 6px; gap: 4px; white-space: nowrap; }

/* ---------- simulador no celular e no tablet ---------- */
/* a faixa com o total fica fora do fluxo, presa ao pé da tela, e só aparece enquanto um controle é arrastado */
@media (max-width: 1180px) {
  .sim__resumo { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; margin: 0; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .25s, translate .25s; }
  .sim__resumo.ativa { opacity: 1; translate: 0 0; }
}
/* ferramentas no celular: o subtítulo no tamanho do corpo das outras seções */
@media (max-width: 600px) {
  .tools__label span { font-size: 17px; line-height: 24px; }
}
/* como funciona: nos três cartões a caixa de destaque fica logo acima do fecho, com o mesmo respiro
   (o espaço livre vai para cima dela, não para baixo) */
.lente .veredito, #diagnosticar .proximo { margin-top: auto; }
.lente__nota { margin-top: 12px; min-height: 0; }
/* Estoque: o esmaecimento de baixo começa depois dos pés da estante (eles e a sombra de contato ficam definidos) */
.scn--stock .g3d__canvas, .scn--stock.espera-3d .g3d::before, .espera-3d .scn--stock .g3d::before {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 93%, transparent 100%);
}
/* Logística: a barra fica colada à contagem de entregas (é o progresso delas); o "no prazo" vem 10 px abaixo */
.mp-kpi__bar { margin: 5px 0 0; }
.mp-kpi small { display: block; margin-top: 10px; }
/* celular: a aba ativa com sombra curta (a superfície branca não compete com as cenas) e as seis abas com a mesma altura */
@media (max-width: 600px) {
  .show__tabs { align-items: stretch; }
  .show__tab { height: 44px; padding-block: 0; }
  .show__tab[aria-selected="true"] { box-shadow: 0 0 0 1px rgba(16,16,15,.06), 0 2px 5px rgba(0,0,0,.06); }
}
/* Vendas: as falas anteriores em cinza médio; a atual em tinta */
.vd-cc p.old, .vd-cc p.old b { color: #62625d; }
/* Agenda: o marcador de agora em tinta (o vermelho fica para o conflito) */
.ag-now { border-top-color: #2a2a28; }
.ag-now::before { background: #2a2a28; }
/* Finanças: os rótulos do gráfico (margem, preço, curva ilustrativa) legíveis, acima da malha */
.fi-eixo { font-size: 11px; color: #6b6b66; }
.fi-ilus { font-size: 10.5px; color: #6b6b66; }
/* premissas do cálculo: o mesmo "+" das dúvidas, à direita, com a linha inteira clicável */
.assume summary { justify-content: space-between; }
.assume summary::before { content: none; }
.assume summary::after { content: ""; flex: none; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") no-repeat center / 14px; transition: transform .3s var(--ease); }
.assume[open] summary::after { transform: rotate(45deg); }
/* projetos: a sombra de contato das teclas, macia */
.iso .iso-contato { fill: rgba(16,16,15,.14); filter: blur(1.5px); }
/* projetos: uma família só para percursos e ligações tracejadas (1,5 px, 4 de traço e 3 de intervalo) */
.iso .iso-rota, .iso .iso-liga-v, .iso .iso-fantasma-l { stroke-width: 1.5; stroke-dasharray: 4 3; }
.iso .iso-liga { stroke-width: 1.25; stroke-dasharray: 4 3; }
.iso .iso-fantasma { stroke-width: 1.25; stroke-dasharray: 4 3; }
/* projetos: a descrição a ~10 px do nome (computador e celular); no celular, 17/26 como nas outras seções */
.proj__txt p { margin-top: 6px; }
@media (max-width: 600px) {
  .proj__txt p { font-size: 17px; line-height: 26px; }
}
@media (max-width: 600px) {
  .etapa__txt p, .etapa__txt h3 + p, .plan__desc { font-size: 17px; line-height: 26px; }
}
/* como contratar: listas com passo de 32 px (o cartão de 4 itens fica uma linha mais curto que o de 5, não duas) */
.plan__list { row-gap: 8px; }

/* ---------- dúvidas ---------- */
/* sugestões da Athena: o texto centrado na altura do cartão (as de uma linha não ficam no topo) */
@media (min-width: 901px) {
  .athena__chips button { align-items: center; }
  /* linhas da lista de 64 px (a lista termina mais perto do fim do cartão da Athena) */
  .faq summary { padding-block: 17px; }
}

/* ---------- contato ---------- */
/* etapa 1 no computador: "Continuar" ocupa a linha inteira (sem o vazio à esquerda) */
@media (min-width: 901px) {
  .fs__nav .btn:only-child { flex: 1; width: 100%; }
}
/* celular: as oito opções com a mesma altura (a quebra é natural, com folga dos dois lados) */
@media (max-width: 600px) {
  .fs .chips { grid-auto-rows: minmax(64px, 1fr); gap: 8px; }
  .fs .chips .opt, .fs .chips .opt span { height: 100%; }
  .fs .chips .opt span { grid-template-columns: 15px minmax(0, 1fr); column-gap: 8px; padding-inline: 12px; }
  .next { --gap: 24px; }
}

/* ---------- rodapé ---------- */
/* coluna Empresa num tom só (a tinta fica para os links); a razão social em 600 */
.footer2__col .footer2__fine, .footer2__col .footer2__fine:first-of-type { color: #6b6b66; }
.footer2__col .footer2__fine:first-of-type { font-weight: 600; }
/* o parágrafo institucional sem palavra sozinha na última linha */
.footer2__brand p { max-width: 308px; text-wrap: pretty; }

/* ---------- celular: vitrine ---------- */
/* cada cena ocupa a altura da janela com o mesmo respiro: 11 px em cima e pelo menos 16 px embaixo */
@media (max-width: 600px) {
  .show--mob .vd-talk__duo { display: flex; }
  .show--mob .vd-side { zoom: 1.1; gap: 14px; }
  .show--mob .ag-side { zoom: 1.16; }
  .show--mob .mc-side { zoom: 1.18; }
  /* Vendas: o segundo momento entra no lugar do "Ouvindo a ligação…" (a coluna não cresce nem passa da janela) */
  .show--mob #vd-m2.on ~ .vd-escuta { display: none; }
  /* Finanças: 16 px livres embaixo, como nas outras cenas */
  .show--mob .fi-price, .show--mob .fi-sugg { zoom: 1.12; }
  .show--mob .scn--fin { padding-bottom: 20px; }
  .show--mob .fi-costs { zoom: .98; }
}
/* coach de vendas: a dica nova entra depois que a anterior sai (as duas nunca aparecem sobrepostas) */
.vd-slot { transition: opacity .25s, transform .35s var(--ease); }
.vd-slot.on:not(.saiu) { transition-delay: .25s; }
.vd-slot.on.saiu { transition-delay: 0s; }

/* ---------- tablet: abertura mais curta ---------- */
@media (min-width: 601px) and (max-width: 1180px) {
  .hero { padding-top: calc(var(--nav-h) + 28px); }
  .stage { margin-top: 40px; }
}
/* bancada no celular: as três mensagens que contam o problema com ~11 px na tela (a bancada fica em ~0,55);
   o e-mail ganha largura e o laptop vai um pouco para a direita */
@media (max-width: 600px) {
  .src--wa .bubble { font-size: 20px; line-height: 1.22; }
  .src--wa .bubble em { font-size: 15px; }
  .chaos .src--mail { width: 300px; }
  .chaos .src--laptop { left: 326px; }
  .chaos .mail li { font-size: 16px; }
  .chaos .mail li:nth-child(2) { font-size: 20px; }
  .chaos .sheet .hl, .chaos .sheet .err { font-size: 20px; }
}

/* ---------- depois da última revisão: defeitos objetivos ---------- */
/* rodapé no celular: o e-mail termina dentro da largura do conteúdo */
@media (max-width: 600px) {
  .footer2__col a[data-kind="mailto"] { font-size: 14px; gap: 6px; }
}
/* bancada no celular: o e-mail mais compacto e 8 px mais alto (com o texto maior, a borda dele encostava na
   planilha) e o laptop 6 px mais alto (a espiral do romaneio encostava na base dele); o pé da bancada não muda */
@media (max-width: 600px) {
  .chaos .mail li { padding-block: 5px; }
  .chaos .src--mail { top: 258px; }
  .chaos .src--laptop { top: 234px; }
  /* a planilha um pouco mais baixa por dentro e o corredor dos fios com a folga de antes (o texto maior das
     células alongou a planilha) */
  .chaos .sheet span { padding-block: 5px; }
  .core2-wrap { padding-top: 56px; }
}
/* abas da vitrine: foco de teclado visível */
.show__tab:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }

/* =========================================================
   Cor na bancada do hero (pedido do cliente): o traço continua, com as cores dos apps e da chamada
   ========================================================= */
/* WhatsApp: o fundo bege da conversa com os pontinhos, balões recebidos brancos e enviados em verde-claro
   (um pouco mais claros que os do app); o nome de cada pessoa na sua cor */
.src--wa .wa { background-color: #f6f1ea; background-image: radial-gradient(rgba(120,96,64,.09) 1px, transparent 1.2px); }
.src--wa .wa::before { background: linear-gradient(#f6f1ea, rgba(246,241,234,0)); }
.src--wa .bubble.in, .src--wa .typing { background: #fff; border-color: #e9e1d4; }
.src--wa .bubble.out { background: #e3f8da; border-color: #c4e6b5; }
.src--wa .bubble em[data-p="pedro"] { color: #17775f; }
.src--wa .bubble em[data-p="ana"] { color: #7d4fa3; }
.src--wa .bubble em[data-p="expedicao"] { color: #a55a14; }
.src--wa .ui__app { background: #e5f6ea; box-shadow: inset 0 0 0 1px #a8dbb9; }
.src--wa .ui__app .bi { --bc: #1faa52; }
.chaos .src--wa .count { background: #dff5e7; color: #17713d; box-shadow: inset 0 0 0 1px #b4e2c4; }
/* caixa de entrada: o "M" do Gmail em vermelho, o contador em vermelho e os não lidos com o ponto azul */
.src--mail .ui__app { background: #fdecea; box-shadow: inset 0 0 0 1px #f3b8b1; }
.src--mail .ui__app .bi { --bc: #d93025; }
.chaos .count--mail { background: #d93025; color: #fff; box-shadow: none; }
.chaos .mail li.unread i { width: 6px; height: 6px; background: #1a73e8; }
/* planilha: o ícone verde do Sheets, cabeçalhos em cinza, a célula em dúvida em amarelo e o erro em vermelho */
.src--sheet .ui__app { background: #e6f4ea; box-shadow: inset 0 0 0 1px #a8d5b5; }
.src--sheet .ui__app .bi { --bc: #1e8e3e; }
.chaos .sheet span { border-color: #e6e8eb; }
.chaos .sheet .h { background: #f1f3f4; color: #80868b; }
.chaos .sheet .hl { background: #fff4c7; box-shadow: inset 0 0 0 1.5px #f4b400; color: #3d3418; }
.chaos .sheet .err { background: #fde9e7; color: #b3261e; }
/* laptop: moldura grafite e base prateada; na chamada, cada pessoa com pele, cabelo, roupa e fundo próprios */
.lap2__tela { background: #2d2e31; }
.lap2__tela::before { background: #6e7076; }
.vc2 { background: #f5f5f3; box-shadow: none; }
.lap2__base { background: linear-gradient(180deg, #e7e9ec, #d2d5d9); }
.lap2__base::before { background: #c4c7cc; box-shadow: inset 0 0 0 1px #8f939a; }
.vc2__p { background: var(--fundo, #fff); box-shadow: inset 0 0 0 1px rgba(16,16,15,.1); }
.vc2__cab { fill: var(--pele, #fff); }
.vc2__corpo { fill: var(--roupa, #fff); }
.vc2__cabelo { fill: var(--cabelo, #ebeae5); }
.vc2__obj { fill: var(--obj, #fff); }

/* ---------- simulador: a perda em vermelho listrado (como na v5) ---------- */
/* a legenda das três parcelas no mesmo vermelho listrado da barra; o valor da perda em vermelho */
.sim__parts li span::before, .sim__parts li:nth-child(3) span::before { background: repeating-linear-gradient(135deg, #e5484d 0 2px, #b8363b 2px 4px); box-shadow: none; }
.sim__bar-legend .is-loss b { color: #f87171; }
@media (prefers-reduced-motion: reduce) {
  .sim__bar-track i { animation: none; }
}
/* simulador: a altura não muda com os números (a demonstração troca de perfil e os valores passam por
   todos os tamanhos): valor, unidade e selo nunca quebram linha; no celular, a frase do percentual
   fica sempre em duas linhas e a legenda da barra sempre empilhada */
.sim__kicker, .sim__big, .sim__big b, .sim__big span, .sim__card-big, .sim__card-big b, .sim__card-big span, .sim__parts li b, .sim__bar-legend span { white-space: nowrap; }
.sim__card-big { flex-wrap: nowrap; }
@media (min-width: 1181px) {
  .sim__big b { font-size: clamp(60px, 5.1vw, 72px); }
}
@media (max-width: 600px) {
  .sim__big b { font-size: min(48px, 12.4vw); }
  .sim__pct-mes { display: block; }
  .sim__bar-legend { flex-direction: column; align-items: flex-start; gap: 4px; }
}
/* o aviso de valores incoerentes aparece por cima da linha do percentual, no mesmo espaço */
.sim__pct { position: relative; }
.sim__pct.tem-aviso { color: transparent; }
.sim__pct.tem-aviso > b, .sim__pct.tem-aviso > .sim__pct-mes { visibility: hidden; }
.sim__pct .sim__warn { position: absolute; inset: 0; margin: 0; color: #e8b465; font-size: 14px; line-height: 20px; white-space: normal; }
/* WhatsApp: o ícone original do app (fone branco no balão verde) */
.src--wa .ui__app { border-radius: 50%; background: #25d366; box-shadow: none; }
.src--wa .ui__app .bi { --bc: #fff; width: 12px; height: 12px; }

/* =========================================================
   Luz espacial nas áreas pretas (referência: borda de planeta iluminada por trás, com o facho de luz vindo de
   cima, só no painel do celular; nas outras áreas, luz invadindo as bordas). Tudo em cinza-sálvia bem
   dessaturado e com pouca intensidade; nada fica por cima do conteúdo.
   ========================================================= */
:root { --luz: 196, 214, 204; --luz-borda: 233, 242, 237; }
.problem2, .cta, .plan--featured { isolation: isolate; }

/* Problema: o iPhone pousado na borda de um planeta (a borda passa atrás do terço de cima do aparelho) */
.problem2__visual .glow {
  display: block; position: absolute; z-index: -1; left: 50%; top: calc(33% - 220px);
  width: 1560px; height: 1560px; translate: -50% 0; border-radius: 0; opacity: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0 518px, rgba(var(--luz), .045) 550px, rgba(var(--luz-borda), .55) 559px, rgba(var(--luz-borda), .55) 560.5px, rgba(var(--luz), .17) 563px, rgba(var(--luz), .06) 640px, transparent 780px);
  -webkit-mask-image: radial-gradient(ellipse 420px 300px at 50% 220px, #000 0%, rgba(0,0,0,.55) 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 420px 300px at 50% 220px, #000 0%, rgba(0,0,0,.55) 50%, transparent 100%);
}
.problem2, .cta { position: relative; }
@media (max-width: 600px) {
  .problem2__visual .glow {
    top: calc(33% - 160px); width: 1080px; height: 1080px;
    background: radial-gradient(circle at 50% 50%, transparent 0 352px, rgba(var(--luz), .045) 374px, rgba(var(--luz-borda), .55) 379px, rgba(var(--luz-borda), .55) 380.5px, rgba(var(--luz), .17) 383px, rgba(var(--luz), .06) 440px, transparent 540px);
    -webkit-mask-image: radial-gradient(ellipse 260px 220px at 50% 160px, #000 0%, rgba(0,0,0,.55) 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 260px 220px at 50% 160px, #000 0%, rgba(0,0,0,.55) 50%, transparent 100%);
  }
}

/* As outras áreas pretas: a luz invadindo as bordas, cada uma de um jeito (só o halo, sem linha de borda) */
/* Contato: luz entrando pelos dois cantos opostos, larga e difusa (em cima à direita, atrás do formulário,
   e embaixo à esquerda) */
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 88% at 103% -8%, rgba(var(--luz), .32) 0%, rgba(var(--luz), .11) 40%, transparent 72%),
    radial-gradient(ellipse 40% 80% at -4% 110%, rgba(var(--luz), .25) 0%, rgba(var(--luz), .08) 40%, transparent 72%);
}
/* simulador: luz subindo pela borda de baixo, concentrada num trecho (como um horizonte aceso) */
.sim__out::before {
  content: ""; display: block; position: absolute; z-index: 0; inset: 0; width: auto; height: auto; border-radius: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 40% at 62% 106%, rgba(var(--luz), .4) 0%, rgba(var(--luz), .12) 40%, transparent 72%);
}
.sim__out > * { position: relative; z-index: 1; }
/* plano em destaque: luz entrando pelo canto de cima, à direita */
.plan--featured { position: relative; overflow: hidden; }
.plan--featured::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 72% 52% at 97% -8%, rgba(var(--luz), .4) 0%, rgba(var(--luz), .13) 42%, transparent 74%);
}
/* a luz vem só desse canto: o realce antigo do canto oposto sai */
.plan--featured { background: #0d0d0c; }
/* no celular o painel do contato é alto e estreito: a luz fica nos cantos, com tamanho fixo (em % virava uma
   faixa ao longo das laterais) */
@media (max-width: 600px) {
  .cta::before {
    background:
      radial-gradient(ellipse 280px 340px at 104% -4%, rgba(var(--luz), .3) 0%, rgba(var(--luz), .1) 40%, transparent 72%),
      radial-gradient(ellipse 260px 360px at -6% 104%, rgba(var(--luz), .24) 0%, rgba(var(--luz), .08) 40%, transparent 72%);
  }
}

/* Problema: o facho de luz vindo de cima até o planeta, nas proporções da referência: no alto, largo como o
   aparelho; abre um pouco até o planeta e termina na borda dele; o brilho cai pouco no caminho. É um cone com a
   fonte bem acima do painel e perfil gaussiano de lado a lado; a máscara recorta o planeta (a luz para na borda)
   e apaga o facho aos poucos abaixo do alto do planeta, onde o halo da borda assume. */
.problem2__visual::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -136px; width: 1160px; height: 607px;
  translate: -50% 0; pointer-events: none;
  background: conic-gradient(from 162.6deg at 50% -1242px, transparent 0deg, rgba(var(--luz), .024) 2.9deg, rgba(var(--luz), .073) 5.8deg, rgba(var(--luz), .173) 8.7deg, rgba(var(--luz), .33) 11.6deg, rgba(var(--luz), .475) 14.5deg, rgba(var(--luz), .54) 17.4deg, rgba(var(--luz), .475) 20.3deg, rgba(var(--luz), .33) 23.2deg, rgba(var(--luz), .173) 26.1deg, rgba(var(--luz), .073) 29deg, rgba(var(--luz), .024) 31.9deg, transparent 34.8deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.78) 347px, rgba(0,0,0,.45) 437px, transparent 607px), radial-gradient(circle 560px at 50% 907px, transparent 559px, #000 562px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.78) 347px, rgba(0,0,0,.45) 437px, transparent 607px), radial-gradient(circle 560px at 50% 907px, transparent 559px, #000 562px);
  mask-composite: intersect;
}
/* tablet e celular: o aparelho vem depois do texto. O facho continua vindo do alto, mas atrás do parágrafo fica
   fraco (o texto mantém o contraste) e só ganha força no respiro logo acima do aparelho */
@media (max-width: 1180px) {
  .problem2__visual::before {
    top: -312px; width: 1170px; height: 772px;
    background: conic-gradient(from 162.6deg at 50% -1086px, transparent 0deg, rgba(var(--luz), .024) 2.9deg, rgba(var(--luz), .073) 5.8deg, rgba(var(--luz), .173) 8.7deg, rgba(var(--luz), .33) 11.6deg, rgba(var(--luz), .475) 14.5deg, rgba(var(--luz), .54) 17.4deg, rgba(var(--luz), .475) 20.3deg, rgba(var(--luz), .33) 23.2deg, rgba(var(--luz), .173) 26.1deg, rgba(var(--luz), .073) 29deg, rgba(var(--luz), .024) 31.9deg, transparent 34.8deg);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 120px, rgba(0,0,0,.3) 278px, #000 312px, rgba(0,0,0,.78) 512px, rgba(0,0,0,.45) 602px, transparent 772px), radial-gradient(circle 560px at 50% 1072px, transparent 559px, #000 562px);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 120px, rgba(0,0,0,.3) 278px, #000 312px, rgba(0,0,0,.78) 512px, rgba(0,0,0,.45) 602px, transparent 772px), radial-gradient(circle 560px at 50% 1072px, transparent 559px, #000 562px);
    mask-composite: intersect;
  }
}
@media (max-width: 600px) {
  .problem2__visual::before {
    top: -256px; width: 900px; height: 582px;
    background: conic-gradient(from 162.6deg at 50% -680px, transparent 0deg, rgba(var(--luz), .024) 2.9deg, rgba(var(--luz), .073) 5.8deg, rgba(var(--luz), .173) 8.7deg, rgba(var(--luz), .33) 11.6deg, rgba(var(--luz), .475) 14.5deg, rgba(var(--luz), .54) 17.4deg, rgba(var(--luz), .475) 20.3deg, rgba(var(--luz), .33) 23.2deg, rgba(var(--luz), .173) 26.1deg, rgba(var(--luz), .073) 29deg, rgba(var(--luz), .024) 31.9deg, transparent 34.8deg);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 100px, rgba(0,0,0,.3) 238px, #000 256px, rgba(0,0,0,.78) 402px, rgba(0,0,0,.45) 462px, transparent 582px), radial-gradient(circle 380px at 50% 782px, transparent 379px, #000 382px);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 100px, rgba(0,0,0,.3) 238px, #000 256px, rgba(0,0,0,.78) 402px, rgba(0,0,0,.45) 462px, transparent 582px), radial-gradient(circle 380px at 50% 782px, transparent 379px, #000 382px);
    mask-composite: intersect;
  }
}