/* Tokens · v3: par "Casa financeira" escolhido pelo JM em 24/09 (Newsreader nos títulos, Hanken Grotesk no texto e nos números) */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fontes/newsreader-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fontes/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* v37 (JM, 12/10): o cifrão da Newsreader (com traço passando e serifa) parecia estranho nos títulos; nos títulos o "$"
   vem da Hanken Grotesk, o mesmo dos cartões (unicode-range só para o $, o resto continua Newsreader) */
@font-face {
  font-family: 'Conex Cifrao';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fontes/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0024;
}
:root {
  /* superfícies escuras (tema executivo, na tonalidade do site antigo) */
  --papel: #0B2035;          /* fundo padrão da página */
  --gelo: #0E2740;           /* seção alternada */
  --nevoa: #16375A;          /* superfície elevada */
  --nevoa-2: #1D456D;
  /* marinho (blocos de maior peso) */
  --marinho: #061421;
  --marinho-2: #0A2137;
  --marinho-3: #17426A;
  /* texto */
  --tinta: #EAF2F8;
  --tinta-2: #BCCFDF;
  --creme: #F4F7FA;
  --creme-2: #C3D0DD;
  /* marca */
  --azul: #9BC9E3;
  --azul-marca: #5891AF;
  --azul-claro: #A9CBE0;
  --ouro: #D8AC52;
  --ouro-claro: #E8CE93;
  /* fios */
  --fio: rgba(233, 242, 248, 0.10);
  --fio-forte: rgba(233, 242, 248, 0.20);
  --fio-escuro: rgba(233, 242, 248, 0.12);

  /* tipo */
  --f-titulo: 'Conex Cifrao', 'Newsreader', 'Newsreader Reserva', Georgia, 'Times New Roman', serif;
  --f-texto: 'Hanken Grotesk', 'Hanken Reserva', 'Hanken Reserva Android', ui-sans-serif, system-ui, sans-serif;
  /* a secundária do par: rótulos, datas e números (algarismos tabulares) */
  --f-mono: 'Hanken Grotesk', 'Hanken Reserva', 'Hanken Reserva Android', ui-sans-serif, system-ui, sans-serif;
  --t-hero: clamp(2.4rem, min(1rem + 3.9vw, 8.4svh), 4.6rem);
  --t-h1-interna: clamp(2.2rem, min(1rem + 3vw, 7.4svh), 3.8rem);
  --t-h2: clamp(1.85rem, 1.1rem + 2.2vw, 3.15rem);
  --t-h3: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  --t-corpo: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --t-mono: 0.75rem;

  /* espaço e forma */
  --largura: 1240px;
  --margem: 20px;
  --moldura: 10px;          /* respiro entre a borda da tela e os blocos arredondados */
  --secao: clamp(60px, 7vw, 104px);
  --raio-p: 12px;
  --raio: 20px;
  --raio-g: 32px;
  --altura-topo: 68px;
  --altura-barra: 56px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -14px rgba(0, 0, 0, 0.6);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 34px 64px -28px rgba(0, 0, 0, 0.75);
}
@media (min-width: 1024px) {
  :root { --margem: 40px; --moldura: 16px; --altura-topo: 80px; --altura-barra: 64px; }
}

/* reservas com a métrica do par novo (medidas no Chrome com canvas, 24/09): o título não reflui quando a fonte chega */
@font-face { font-family: 'Newsreader Reserva'; src: local('Georgia'); size-adjust: 102.83%; ascent-override: 71.96%; descent-override: 25.28%; line-gap-override: 0%; }
@font-face { font-family: 'Hanken Reserva'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; size-adjust: 99.18%; ascent-override: 100.83%; descent-override: 30.25%; line-gap-override: 0%; }
@font-face { font-family: 'Hanken Reserva'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 93.81%; ascent-override: 106.6%; descent-override: 31.98%; line-gap-override: 0%; }
@font-face { font-family: 'Hanken Reserva Android'; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 112.3%; ascent-override: 89.05%; descent-override: 26.71%; line-gap-override: 0%; }

/* Base · reset curto, tipografia e utilitários */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--altura-topo) + 16px); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 var(--t-corpo)/1.6 var(--f-texto);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 500; letter-spacing: -0.018em; line-height: 1.04; text-wrap: balance; font-variant-numeric: lining-nums; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.012em; line-height: 1.2; font-weight: 500; }
h1 em, h2 em { font-style: normal; color: var(--azul); }
.escuro h2 em { color: var(--azul-claro); }
p { text-wrap: pretty; }
a { color: inherit; }
::selection { background: var(--azul-claro); color: var(--marinho); }
.escuro p, p { color: inherit; }

.envelope { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--creme); color: var(--marinho); padding: 12px 16px; border-radius: var(--raio-p);
}
.pular:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.escuro :focus-visible { outline-color: var(--azul-claro); }

/* rótulo de seção: texto pequeno com um traço antes (nunca pílula) */
.rotulo {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 var(--t-mono)/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azul);
}
.rotulo::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.escuro .rotulo { color: var(--azul-claro); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* link de texto: o sublinhado recua e volta */
.link {
  text-decoration: none; font-weight: 560;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px;
  padding-bottom: 3px;
}
@media (hover: hover) {
  .link:hover { background-size: 0% 1px; transition: background-size 380ms var(--curva); }
}

.secao { padding-block: var(--secao); position: relative; }
.secao--gelo { background: var(--gelo); }
.cabeca-secao { max-width: 760px; }
.cabeca-secao h2 { margin-top: 18px; }
.cabeca-secao > p:not(.rotulo) { margin-top: 18px; color: var(--tinta-2); max-width: 60ch; }
.escuro { color: var(--creme); }
.escuro p { color: var(--creme-2); }

/* entrada por rolagem (referência do carro, JM 24/09): cada bloco sobe de baixo, sem desfoque, e os irmãos
   entram em cascata. Só existe com .anima (sem JS ou com movimento reduzido, nasce visível). */
.anima .revela { opacity: 0; translate: 0 72px; transition: opacity 700ms linear, translate 1100ms cubic-bezier(.16, 1, .3, 1); }
.anima .revela.visivel { opacity: 1; translate: 0 0; }
/* títulos e blocos de texto entram por uma cortina que sobe */
.anima .revela--cortina { translate: 0 0; clip-path: inset(0 0 100% 0); transition: opacity 600ms linear, clip-path 900ms cubic-bezier(.16, .84, .3, 1); }
.anima .revela--cortina.visivel { clip-path: inset(0 0 0 0); }
.anima .revela[data-atraso="1"] { transition-delay: 120ms; }
.anima .revela[data-atraso="2"] { transition-delay: 240ms; }
.anima .revela[data-atraso="3"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.sem-transicao, .sem-transicao * { transition: none !important; }


/* ícones do sistema têm tamanho base: sem regra, o SVG estica e vira um risco gigante */
.visto, .seta, .trava, .estrela { width: 18px; height: 18px; flex: none; }
.estrelas svg { width: 16px; height: 16px; }

/* JM, 27/09: sem o rótulo no topo das seções ("Depoimentos", "Resultados"...). O texto fica no HTML só para
   quem usa leitor de tela não perder a referência; as etiquetas internas das interfaces continuam. */
.rotulo, .rcs__rot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0 !important; padding: 0 !important; }

/* aprova.css */
/* ---------- Quem pode o quê · o cofre (JM, 27/09, modelo C), destravado pela rolagem ----------
   data-etapa na seção: 0 nada · 1 a Conex preparou · 2 você aprovou (o cadeado abre) · 3 o banco pagou · 4 aprovado
   (o centro vira o selo). Os segmentos enchem com a rolagem (JS escreve o traço de cada um). Sem JS: etapa 4. */
.cx { position: relative; }
.anima .cx.cx--vivo { height: calc(100svh + 3 * 65svh); padding-block: 0; }
.cx__palco { position: relative; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(20px, 3svh, 36px); padding-block: var(--secao); }
.cx--vivo .cx__palco { position: sticky; top: 0; height: 100svh; padding: calc(var(--altura-topo) + 28px) 0 clamp(24px, 4svh, 44px); }
.cx__titulo { width: min(100% - 2 * var(--margem), 900px); margin: 0 auto; text-align: center; font: 400 clamp(2rem, 1.1rem + 2.4vw, 3.4rem)/1.06 var(--f-titulo); letter-spacing: -0.025em; color: #0B2035; text-wrap: balance; }
.cx__destaque { color: #1F5A85; }

.cx__cena { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); min-height: 0; }
.cx__col { display: grid; gap: clamp(20px, 4svh, 40px); }
.cx__col--e { justify-items: end; text-align: right; }
.cx-passo { display: grid; gap: 6px; max-width: 30ch; opacity: 0.35; transition: opacity 400ms linear; }
.cx-passo.on { opacity: 1; }
.cx-passo__quem { display: inline-flex; align-items: center; gap: 8px; font: 600 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #5E450D; }
.cx__col--e .cx-passo__quem { justify-self: end; flex-direction: row-reverse; }
.cx-passo__ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0B5B3A; color: #FFFFFF; scale: 0; transition: scale 380ms cubic-bezier(.3, 1.5, .5, 1); }
.cx-passo__ok svg { width: 12px; height: 12px; }
.cx-passo.feito .cx-passo__ok { scale: 1; }
.cx-passo b { font: 400 clamp(1.5rem, 1.1rem + 1vw, 2.1rem)/1.1 var(--f-titulo); letter-spacing: -0.015em; color: #0B2035; }
.cx-passo__txt { font-size: 1rem; line-height: 1.5; color: #3B4753; }

/* o mostrador */
.cx__disco { position: relative; width: min(440px, 50svh, 38vw); aspect-ratio: 1; }
.cx__aro { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.cx__marcas line { stroke: rgba(11, 32, 53, 0.28); stroke-width: 0.8; stroke-linecap: round; }
.cx__base { fill: none; stroke: rgba(11, 32, 53, 0.08); stroke-width: 16; }
.cx__seg { fill: none; stroke-width: 16; stroke-linecap: butt; stroke-dasharray: 0 3; }
.cx__seg[data-cx-seg="0"] { stroke: #5891AF; } .cx__seg[data-cx-seg="1"] { stroke: #D8AC52; } .cx__seg[data-cx-seg="2"] { stroke: #0B2035; }
.cx__centro { position: absolute; inset: 16%; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #1D4A73, #0B2035 70%); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.14), 0 40px 70px -34px rgba(11, 32, 53, 0.8); }
.cx__centro > svg { grid-area: 1 / 1; }

/* o cadeado: a chave gira, a alça sobe e gira para fora pela perna direita, o corpo assenta */
.cx__cadeado { width: 40%; overflow: visible; transition: opacity 400ms linear, scale 500ms cubic-bezier(.4, 0, .2, 1); }
.cx__cadeado * { transform-box: view-box; }
.cx__fecho { transform-origin: 40px 64px; transition: rotate 320ms cubic-bezier(.4, 0, .2, 1); }
.cx__alca { transform-origin: 58px 44px; transition: translate 420ms cubic-bezier(.3, 1.4, .5, 1) 260ms, rotate 620ms cubic-bezier(.3, 1.5, .5, 1) 420ms; }
.cx:is([data-etapa="2"], [data-etapa="3"]) .cx__fecho { rotate: 90deg; }
.cx:is([data-etapa="2"], [data-etapa="3"]) .cx__alca { translate: 0 -11px; rotate: 32deg; }
.cx:is([data-etapa="2"], [data-etapa="3"]) .cx__corpo { animation: cx-assenta 520ms cubic-bezier(.3, 1.5, .5, 1) 300ms; }
@keyframes cx-assenta { 40% { translate: 0 3px; } }
/* o selo de aprovação toma o lugar do cadeado no fim do ciclo */
.cx__selo { width: 78%; overflow: visible; opacity: 0; scale: 0.6; rotate: -18deg; transition: opacity 300ms linear, scale 750ms cubic-bezier(.3, 1.4, .5, 1), rotate 750ms cubic-bezier(.3, 1.4, .5, 1); }
.cx__selo-txt { font: 700 5.6px/1 var(--f-mono); letter-spacing: 0.9px; fill: #E8CE93; }
.cx__visto { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms cubic-bezier(.4, 0, .2, 1); }
.cx[data-etapa="4"] .cx__cadeado { opacity: 0; scale: 0.7; }
.cx[data-etapa="4"] .cx__selo { opacity: 1; scale: 1; rotate: 0deg; transition-delay: 150ms; }
.cx[data-etapa="4"] .cx__visto { stroke-dashoffset: 0; transition-delay: 600ms; }

/* o pé: o estado do lote e o WhatsApp no fim */
.cx__fim { display: grid; justify-items: center; gap: 16px; }
.cx__estado { position: relative; display: grid; text-align: center; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #3B4753; }
.cx__estado > span { grid-area: 1 / 1; transition: opacity 300ms linear; }
.cx__estado-b { opacity: 0; color: #0B5B3A; }
.cx[data-etapa="4"] .cx__estado-a { opacity: 0; } .cx[data-etapa="4"] .cx__estado-b { opacity: 1; }
.cx--vivo .cx__fim .bt { opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity 400ms linear, translate 600ms cubic-bezier(.22, 1, .36, 1); }
.cx--vivo[data-etapa="4"] .cx__fim .bt { opacity: 1; translate: 0 0; pointer-events: auto; transition-delay: 500ms; }

/* celular: o mostrador em cima e só o passo da vez embaixo */
@media (max-width: 899px) {
  .cx__cena { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; }
  .cx__col { display: contents; }
  .cx__disco { grid-row: 1; width: min(76vw, 40svh); }
  .cx-passo { grid-row: 2; grid-column: 1; justify-items: center; text-align: center; max-width: 34ch; }
  .cx__col--e .cx-passo__quem { flex-direction: row; justify-self: center; }
  .cx--vivo .cx-passo { opacity: 0; transition: opacity 300ms linear; }
  .cx--vivo .cx-passo.atual { opacity: 1; }
  .cx:not(.cx--vivo) .cx-passo { grid-row: auto; }
  .cx-passo b { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .cx *, .cx *::before { transition: none !important; animation: none !important; } }
.cx__seg[data-cx-seg="0"] { stroke-dashoffset: -0.03; } .cx__seg[data-cx-seg="1"] { stroke-dashoffset: -1.03; } .cx__seg[data-cx-seg="2"] { stroke-dashoffset: -2.03; }
.cx:not(.cx--vivo) .cx__seg { stroke-dasharray: 0.94 3; }
.cx:not(.cx--vivo) .cx-passo { opacity: 1; }

/* botoes.css */
/* CTA principal · marinho, cantos de 12px. Hover: a seta atravessa a caixinha e a caixinha vira ouro.
   A caixa do botão não se move nem escurece. */
.bt {
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 0 8px 0 22px; border-radius: var(--raio-p);
  color: var(--creme);
  background-color: var(--marinho);
  background-image: linear-gradient(112deg, #071829 0%, #0D2B47 38%, #1D5C90 52%, #0D2B47 66%, #071829 100%);
  background-size: 280% 100%; background-position: 62% 0;
  font: 600 1rem/1.15 var(--f-texto); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 14px 28px -16px rgba(0, 0, 0, 0.8);
}
button.bt { border: 0; cursor: pointer; }
.bt--grande { min-height: 70px; padding: 0 10px 0 28px; font-size: 1.125rem; gap: 14px; }
.bt--grande .bt__caixa { width: 50px; height: 50px; border-radius: 11px; }
.bt--grande .bt__whats { width: 23px; height: 23px; }
.bt--m { min-height: 50px; padding-left: 18px; font-size: 0.9375rem; gap: 10px; }
.bt--p { min-height: 44px; padding: 0 6px 0 14px; font-size: 0.875rem; gap: 8px; }
.bt--cheio { display: flex; width: 100%; justify-content: space-between; }
.bt--cheio .bt__texto { margin-right: auto; }
.bt--claro { color: var(--marinho); background-color: #EFF5FA; background-image: linear-gradient(112deg, #FFFFFF 0%, #E4EEF6 38%, #C9DEEE 52%, #E4EEF6 66%, #FFFFFF 100%); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.6); }
.bt__whats { width: 20px; height: 20px; flex: none; }
.bt--p .bt__whats { width: 17px; height: 17px; }
.bt__caixa {
  position: relative; overflow: hidden; flex: none;
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 9px;
  background: rgba(244, 247, 250, 0.12);
  transition: background-color 320ms var(--curva), color 320ms var(--curva);
}
.bt--m .bt__caixa { width: 36px; height: 36px; border-radius: 8px; }
.bt--p .bt__caixa { width: 32px; height: 32px; border-radius: 7px; }
.bt--claro .bt__caixa { background: var(--nevoa); color: #FFFFFF; }
/* variante do cabeçalho: contorno, para não competir com o CTA sólido do hero */
.bt--contorno { color: var(--tinta); background: transparent; box-shadow: inset 0 0 0 1px var(--fio-forte); }
.bt--contorno .bt__caixa { background: rgba(233, 242, 248, 0.1); color: var(--tinta); }
@media (hover: hover) { .bt--contorno:hover .bt__caixa { background: var(--marinho); color: var(--ouro-claro); } }
.bt__trilho { position: absolute; inset: 0; transition: translate 420ms var(--curva); }
.bt__trilho svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.bt__trilho svg + svg { left: calc(50% - 44px); }
@media (hover: hover) {
  .bt:hover .bt__caixa { background: var(--ouro); color: var(--marinho); }
  .bt:hover .bt__trilho[data-hover-interno] { translate: 44px 0; }
}
.bt:focus-visible .bt__caixa { background: var(--ouro); color: var(--marinho); }
.bt:focus-visible .bt__trilho { translate: 44px 0; }

.bt-icone {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-p);
  background: var(--marinho); color: var(--creme);
}
.bt-icone .bt__whats { width: 21px; height: 21px; }

/* CTA secundário */
.bs {
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 0 8px 0 22px; border-radius: var(--raio-p);
  color: var(--tinta);
  background-color: transparent;
  background-image: linear-gradient(112deg, rgba(23, 66, 106, 0) 0%, rgba(23, 66, 106, 0.5) 40%, rgba(45, 122, 174, 0.65) 52%, rgba(23, 66, 106, 0.5) 64%, rgba(23, 66, 106, 0) 100%);
  background-size: 280% 100%; background-position: 100% 0;
  transition: background-position 950ms cubic-bezier(.16, 1, .3, 1), box-shadow 400ms var(--curva);
  font: 600 1rem/1.15 var(--f-texto); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--fio-forte);
  transition: box-shadow 320ms var(--curva);
}
.bs .bt__caixa { background: var(--nevoa); color: var(--tinta); }
@media (hover: hover) { .bs:hover .bt__caixa { background: var(--ouro); color: var(--marinho); } .bs:hover .bt__trilho[data-hover-interno] { translate: 44px 0; } }
.bs:focus-visible .bt__caixa { background: var(--ouro); color: var(--marinho); }
.bs:focus-visible .bt__trilho { translate: 44px 0; }
.bs--m { min-height: 50px; padding-left: 18px; font-size: 0.9375rem; }
.bs--m .bt__caixa { width: 36px; height: 36px; border-radius: 8px; }
.bs--cheio { display: flex; width: 100%; justify-content: space-between; }
.bs__circulo {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--azul); box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color 320ms var(--curva), color 320ms var(--curva), box-shadow 320ms var(--curva);
}
.bs__circulo svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .bs:hover { box-shadow: inset 0 0 0 1px var(--tinta); }
  .bs:hover .bs__circulo { background: var(--azul); color: var(--papel); box-shadow: inset 0 0 0 1.5px var(--azul); }
}
.bs:focus-visible .bs__circulo { background: var(--azul); color: var(--papel); }

@media (max-width: 419px) {
  .bt, .bs { white-space: normal; }
  .bt:not(.bt--p) { padding-left: 18px; }
}


/* ---- tinta dourada: nasce de onde o ponteiro entra (--px/--py, pelo JS) e se espalha até os cantos.
   Sem JS, nasce do centro. Ao sair, recolhe para o ponto de saída. ---- */
.bt__pintura { position: absolute; z-index: 0; pointer-events: none; left: var(--px, 50%); top: var(--py, 50%); width: 0; height: 0; }
.bt__pintura::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: var(--r, 320px); height: var(--r, 320px); margin: calc(var(--r, 320px) / -2) 0 0 calc(var(--r, 320px) / -2);
  border-radius: 50%; background: radial-gradient(circle, #F2DDA8 0%, #E2BE6E 42%, #C99B3C 100%);
  scale: 0; transition: scale 620ms cubic-bezier(.22, 1, .28, 1);
}
.bt__whats, .bt__texto, .bt__caixa, .bs > span:not(.bt__pintura) { position: relative; z-index: 1; }
@media (hover: hover) {
  .bt:hover [data-hover-interno].bt__pintura::before, .bs:hover [data-hover-interno].bt__pintura::before { scale: 1; }
  .bs:hover .bt__caixa { background: var(--marinho); color: var(--creme); }
  .bt:hover, .bs:hover { color: var(--marinho); }
  .bt:hover .bt__caixa, .bs:hover .bt__caixa { background: var(--marinho); color: var(--ouro-claro); }
}
.bt:focus-visible .bt__pintura::before, .bs:focus-visible .bt__pintura::before { scale: 1; }
.bt:focus-visible, .bs:focus-visible { color: var(--marinho); }
.bt:focus-visible .bt__caixa, .bs:focus-visible .bt__caixa { background: var(--marinho); color: var(--ouro-claro); }
.bt, .bs { transition: color 320ms linear, box-shadow 400ms var(--curva); }


/* bpo.css */
/* ---------- BPO financeiro · v4.1 (JM, 07/10, rodada 2). Referências em componentes/bpo.mjs ---------- */

/* hero: texto à esquerda; à direita o tablet real do site (espelhado) com o relatório do mês em uma página */
.bh { position: relative; z-index: 2; overflow: hidden; color: #F7F3EA;
  background: radial-gradient(42% 52% at 74% 58%, rgba(216, 172, 82, 0.20) 0%, rgba(216, 172, 82, 0) 72%), radial-gradient(60% 70% at 18% 30%, #12304D 0%, rgba(18, 48, 77, 0) 70%), linear-gradient(180deg, #0C2238 0%, #06121F 100%); }
.bh__sentinela { position: absolute; left: 0; top: 0; width: 1px; height: 100svh; pointer-events: none; }
.bh__grade { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 4vw, 80px); min-height: max(720px, calc(100svh + var(--onda-h))); padding-block: calc(var(--altura-topo) + 20px) calc(var(--onda-h) + 24px); }
.bh__texto { display: grid; justify-items: start; gap: clamp(18px, 2.6svh, 26px); min-width: 0; }
.bh__titulo { margin: 0; font: 600 clamp(2.3rem, 0.6rem + 3.5vw, 4.6rem)/1.02 var(--f-texto); letter-spacing: -0.05em; color: #F7F3EA; }
.bh__titulo > span[aria-hidden] { display: grid; }
.bh__l { display: block; overflow: clip; overflow-clip-margin: 0.25em; padding-block: 0.04em; white-space: nowrap; }
.bh__m { display: inline-block; }
.bh__apoio { margin: 0; max-width: 44ch; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.5; color: #C9D8E4; text-wrap: pretty; }

.bh__cena { }
.bh__tab { --tx: 0; --ty: 0; position: relative; width: min(540px, 40vw, calc((100svh - var(--altura-topo) - 70px) * 0.754)); aspect-ratio: 766 / 1016; translate: calc(var(--tx) * 1px) calc(var(--ty) * 1px); rotate: calc(var(--tx) * 0.12deg); transition: translate 700ms cubic-bezier(.2, .8, .2, 1), rotate 700ms cubic-bezier(.2, .8, .2, 1); }
.bh__img, .bh__vidro { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bh__img { z-index: 2; } .bh__vidro { z-index: 3; opacity: 0.7; }
.bh__sombra { position: absolute; left: 6%; right: 10%; bottom: -2%; height: 8%; border-radius: 50%; background: rgba(0, 0, 0, 0.55); filter: blur(26px); }
.bh__tela { position: absolute; left: 0; top: 0; z-index: 1; width: 400px; height: 580.3px; transform-origin: 0 0; overflow: hidden; border-radius: 8px; visibility: hidden; background: #F8F4EB; }
.bh--encaixado .bh__tela { visibility: visible; }

/* o relatório (desenho em 400 × 580) */
.br { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; padding: 26px 26px 22px; background: linear-gradient(180deg, #FBF8F1 0%, #F2EADB 100%); color: #0B2035; font-family: var(--f-texto); font-variant-numeric: tabular-nums; }
.br p, .br ul { margin: 0; padding: 0; list-style: none; }
.br__cab { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(11, 32, 53, 0.1); }
.br__elos { width: 40px; height: 40px; object-fit: contain; }
.br__cab p { display: grid; gap: 2px; }
.br__cab b { font: 400 21px/1.1 var(--f-titulo); letter-spacing: -0.01em; }
.br__cab span { font: 500 11px/1.2 var(--f-texto); color: #5B6875; }
.br__sobra { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(150deg, #17426A, #0B2035); color: #FFFFFF; }
.br__sobra p { font: 500 11.5px/1 var(--f-texto); color: #C9D8E4; }
.br__sobra b { font: 600 34px/1.05 var(--f-texto); letter-spacing: -0.035em; }
.br__sobra span { font: 600 11px/1.2 var(--f-texto); color: #E8CE93; }
.br__linhas { display: grid; gap: 9px; }
.br__linhas p { display: grid; grid-template-columns: 46px 1fr 80px; align-items: center; gap: 10px; font: 500 12px/1 var(--f-texto); color: #3B4753; }
.br__linhas b { font-weight: 600; color: #0B2035; text-align: right; }
.br__linhas i { height: 8px; border-radius: 4px; background: rgba(11, 32, 53, 0.07); overflow: hidden; }
.br__linhas em { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; }
.br__linhas .e em { width: 100%; background: #5891AF; } .br__linhas .s em { width: 74%; background: #0B2035; }
.br__bloco { display: grid; gap: 8px; }
.br__t { font: 600 11.5px/1 var(--f-texto); color: #0B2035; }
.br__pilha { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.br__pilha i { height: 100%; transform-origin: 0 50%; }
.br__pilha i:nth-child(1) { flex: 38; } .br__pilha i:nth-child(2) { flex: 27; } .br__pilha i:nth-child(3) { flex: 14; } .br__pilha i:nth-child(4) { flex: 12; } .br__pilha i:nth-child(5) { flex: 9; }
.br__pa { background: #0B2035; } .br__pb { background: #5891AF; } .br__pc { background: #C8962F; } .br__pd { background: #A9CBE0; } .br__pe { background: #D9CDB4; }
.br__leg { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; }
.br__leg li { display: flex; align-items: center; gap: 6px; font: 500 11px/1.2 var(--f-texto); color: #3B4753; }
.br__leg li i { width: 8px; height: 8px; border-radius: 2px; }
.br__leg b { margin-left: auto; font-weight: 600; color: #0B2035; }
.br__proj { width: 100%; height: 48px; display: block; }
.br__proj .a { fill: rgba(216, 172, 82, 0.18); } .br__proj .l { fill: none; stroke: #C8962F; stroke-width: 2; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.br__pe { display: flex; align-items: center; gap: 7px; margin-top: auto !important; padding-top: 12px; border-top: 1px solid rgba(11, 32, 53, 0.1); font: 600 11px/1 var(--f-texto); color: #2F7A52; }
.br__pe svg { width: 15px; height: 15px; }

/* entrada: linhas do título; o tablet chega deitando para a frente; o relatório se monta por partes */
.anima .bh__m { translate: 0 110%; animation: ht-sobe 1100ms cubic-bezier(.16, 1, .3, 1) 140ms forwards; }
.anima .bh__l:nth-child(2) .bh__m { animation-delay: 250ms; } .anima .bh__l:nth-child(3) .bh__m { animation-delay: 360ms; }
.anima :is(.bh__apoio, .bh__acoes) { opacity: 0; translate: 0 24px; animation: ht-entra 900ms cubic-bezier(.16, 1, .3, 1) 520ms forwards; }
.anima .bh__acoes { animation-delay: 640ms; }
.anima .bh__cena { opacity: 0; translate: 0 120px; rotate: 6deg; animation: bh-chega 1300ms cubic-bezier(.16, 1, .3, 1) 260ms forwards; }
@keyframes bh-chega { to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.anima .bh .hpl-pc { scale: 0.6; opacity: 0; transition: scale 700ms cubic-bezier(.3, 1.4, .5, 1), opacity 300ms linear; }
.anima .bh.bh--pecas .hpl-pc { scale: 1; opacity: 1; }
.anima .bh.bh--pecas .bh__l:nth-child(3) .hpl-pc { transition-delay: 240ms; }
.anima .br > * { opacity: 0; translate: 0 14px; transition: opacity 500ms linear, translate 800ms cubic-bezier(.16, 1, .3, 1); }
.anima .bh--tela .br > * { opacity: 1; translate: none; }
.anima .bh--tela .br > :nth-child(2) { transition-delay: 100ms; } .anima .bh--tela .br > :nth-child(3) { transition-delay: 220ms; }
.anima .bh--tela .br > :nth-child(4) { transition-delay: 340ms; } .anima .bh--tela .br > :nth-child(5) { transition-delay: 460ms; } .anima .bh--tela .br > :nth-child(6) { transition-delay: 580ms; }
.anima .br__linhas em, .anima .br__pilha i { scale: 0 1; transition: scale 1000ms cubic-bezier(.2, .8, .2, 1) 450ms; }
.anima .bh--tela .br__linhas em, .anima .bh--tela .br__pilha i { scale: none; }
.anima .br__proj .l { stroke-dashoffset: 1; transition: stroke-dashoffset 1300ms cubic-bezier(.4, 0, .2, 1) 800ms; }
.anima .bh--tela .br__proj .l { stroke-dashoffset: 0; }

/* ---------- o que é: o celular com a rotina e o verbete ---------- */
.bv__grade { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 5vw, 96px); }
.bv__fone { display: grid; place-items: center; }
.bv__aparelho { position: relative; width: min(390px, 88%); aspect-ratio: 1464 / 2710; }
.bv__aparelho > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.bv__sombra { position: absolute; left: 12%; right: 12%; bottom: -3%; height: 6%; border-radius: 50%; background: rgba(11, 32, 53, 0.45); filter: blur(22px); }
.bv__tela { position: absolute; left: 0; top: 0; z-index: 1; width: 332px; height: 714.3px; transform-origin: 0 0; overflow: hidden; border-radius: 44px; background: #F8F4EB; visibility: hidden; }
.bv--encaixado .bv__tela { visibility: visible; }
.bf-t { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 58px 20px 24px; background: linear-gradient(180deg, #FBF8F1, #F1E9DA); color: #0B2035; font-family: var(--f-texto); }
.bf-t::before { content: ''; position: absolute; left: 50%; top: 12px; translate: -50% 0; width: 96px; height: 28px; border-radius: 99px; background: #030405; }
.bf-t p, .bf-t ul { margin: 0; padding: 0; list-style: none; }
.bf-t__topo { position: absolute; left: 30px; top: 18px; font: 600 14px/1 var(--f-texto); }
.bf-t__cab { display: flex; align-items: center; gap: 10px; }
.bf-t__elos { width: 42px; height: 42px; object-fit: contain; }
.bf-t__cab span { display: grid; font: 600 17px/1.15 var(--f-texto); } .bf-t__cab small { font: 500 12px/1.2 var(--f-texto); color: #5B6875; }
.bf-t__semana { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(150deg, #17426A, #0B2035); color: #FFFFFF; }
.bf-t__semana p { font: 500 12px/1 var(--f-texto); color: #C9D8E4; }
.bf-t__semana b { font: 600 28px/1.1 var(--f-texto); letter-spacing: -0.03em; }
.bf-t__semana span { font: 500 12px/1.2 var(--f-texto); color: #E8CE93; }
.bf-t__lista { display: grid; gap: 8px; }
.bf-t__lista { gap: 7px !important; }
.bf-t__lista li { display: grid; grid-template-columns: 36px 1fr 22px; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.06); transition: box-shadow 300ms, background-color 300ms; }
.bf-t__lista li.realce { background: #FFFBF1; box-shadow: inset 0 0 0 2px #D8AC52; }
.bf-t__lista li > svg:first-child { width: 36px; height: 36px; padding: 8px; box-sizing: border-box; border-radius: 10px; background: #F1E5CC; fill: none; stroke: #0B2035; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bf-t__lista span { display: grid; gap: 2px; font: 600 13.5px/1.2 var(--f-texto); }
.bf-t__lista small { font: 500 11.5px/1.2 var(--f-texto); color: #5B6875; }
.bf-t__lista li > svg:last-child { width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #E6F1EA; color: #2F7A52; }

.bv__verbete { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.bv__rot { margin: 0; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #5E450D; }
.bv__verbete h2 { margin: 0; font: 400 clamp(3rem, 1.6rem + 4.2vw, 5.8rem)/0.95 var(--f-titulo); letter-spacing: -0.035em; }
.bv__verbete dfn { font-style: normal; }
.bv__classe { margin: 0; font: 400 clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem)/1.4 var(--f-titulo); color: #5B6875; }
.bv__acep { display: grid; gap: 18px; margin: 8px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid rgba(11, 32, 53, 0.14); }
.bv__acep li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; }
.bv__n { font: 400 1.6rem/1 var(--f-titulo); color: #9A7120; }
.bv__acep p { margin: 0; max-width: 56ch; font: 400 clamp(1.12rem, 1rem + 0.4vw, 1.35rem)/1.45 var(--f-titulo); color: #14283B; text-wrap: pretty; }
.bv__acep b { font-weight: 600; }
/* a diferença para a contabilidade: duas colunas, só tipografia e um fio entre elas */
.bv__dif { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(11, 32, 53, 0.14); }
.bv__dif > div { display: grid; align-content: start; gap: 8px; padding-right: 26px; }
.bv__dif > div + div { padding: 0 0 0 26px; border-left: 1px solid rgba(11, 32, 53, 0.14); }
.bv__dif-t { margin: 0; font: 400 1.3rem/1.15 var(--f-titulo); color: #0B2035; }
.bv__dif p:not(.bv__dif-t) { margin: 0; font-size: 0.98rem; line-height: 1.5; color: #3B4753; }
.bv__dif > div + div .bv__dif-t { color: #5B6875; }
.anima .bv .bv__verbete > *, .anima .bv .bv__acep li { opacity: 0; translate: 0 22px; transition: opacity 600ms linear, translate 1000ms cubic-bezier(.16, 1, .3, 1); }
.anima .bv .bv__aparelho { opacity: 0; translate: 0 80px; rotate: -6deg; transition: opacity 700ms linear, translate 1300ms cubic-bezier(.16, 1, .3, 1), rotate 1300ms cubic-bezier(.16, 1, .3, 1); }
.anima .bv [data-bf-i] { opacity: 0; translate: 0 10px; transition: opacity 400ms linear, translate 700ms cubic-bezier(.16, 1, .3, 1); }
.anima .bv.vista .bv__verbete > *, .anima .bv.vista .bv__acep li, .anima .bv.vista [data-bf-i] { opacity: 1; translate: 0 0; }
.anima .bv.vista .bv__aparelho { opacity: 1; translate: 0 0; rotate: 0deg; }
.anima .bv.vista .bv__verbete > :nth-child(2) { transition-delay: 80ms; } .anima .bv.vista .bv__verbete > :nth-child(3) { transition-delay: 180ms; }
.anima .bv.vista .bv__acep li:nth-child(1) { transition-delay: 300ms; } .anima .bv.vista .bv__acep li:nth-child(2) { transition-delay: 440ms; }
.anima .bv.vista .bv__verbete > :nth-child(5) { transition-delay: 600ms; }
.anima .bv.vista [data-bf-i]:nth-child(1) { transition-delay: 700ms; } .anima .bv.vista [data-bf-i]:nth-child(2) { transition-delay: 820ms; } .anima .bv.vista [data-bf-i]:nth-child(3) { transition-delay: 940ms; }
.anima .bv.vista [data-bf-i]:nth-child(4) { transition-delay: 1060ms; } .anima .bv.vista [data-bf-i]:nth-child(5) { transition-delay: 1180ms; }

/* ---------- um mês: régua de outubro e o painel que troca no lugar ---------- */
.bm { padding-block: 0; }
.bm__palco { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px, 5vw, 96px); padding-block: var(--secao); }
.bm--vivo .bm__trilho { height: 300svh; }
.bm--vivo .bm__palco { position: sticky; top: 0; min-height: 100svh; padding-block: calc(var(--altura-topo) + 16px) 32px; }
.bm__rot { margin: 0 0 14px; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.bm__texto h2 { margin: 0; font: 400 var(--t-h2)/1.06 var(--f-titulo); letter-spacing: -0.02em; color: #F7F3EA; text-wrap: balance; }
.bm__semanas { display: grid; gap: 4px; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.bm__semanas li { display: grid; gap: 6px; padding: 14px 0 14px 20px; box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.12); opacity: 0.38; transition: opacity 500ms, box-shadow 500ms; }
.bm__semanas li.on { opacity: 1; box-shadow: inset 2px 0 0 #D8AC52; }
.bm__semanas b { font: 600 1.05rem/1.2 var(--f-texto); color: #FFFFFF; }
.bm__semanas p { margin: 0; max-width: 44ch; font-size: 1rem; line-height: 1.5; color: #C9D8E4; }
.bm__cena { --bm-p: 0; display: grid; gap: 26px; }
.bm__regua { display: grid; gap: 14px; }
.bm__eixo { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.bm__feito { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #B5862B, #E8CE93); transform-origin: 0 50%; transform: scaleX(var(--bm-p)); }
.bm__marca { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #F7F3EA; box-shadow: 0 0 0 5px rgba(216, 172, 82, 0.28); transform: translateX(calc(var(--bm-w, 600px) * var(--bm-p))); }
.bm__etapas { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.bm__etapas li { font: 600 0.78rem/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #6F8597; transition: color 500ms; }
.bm__etapas li.on { color: #E8CE93; }
.bm__paineis { display: grid; }
.bm__p { grid-area: 1 / 1; position: relative; display: grid; align-content: start; gap: 12px; min-height: 340px; padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: linear-gradient(170deg, #FAF6EE, #F1E9DA); color: #0B2035;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.7); opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.98); transition: opacity 600ms cubic-bezier(.4, 0, .2, 1), transform 900ms cubic-bezier(.22, 1, .36, 1), visibility 0s 600ms; }
.bm__p.on { opacity: 1; visibility: visible; transform: none; transition: opacity 600ms cubic-bezier(.4, 0, .2, 1) 120ms, transform 900ms cubic-bezier(.22, 1, .36, 1) 120ms, visibility 0s; }
.bm__p.saiu { transform: translateY(-24px) scale(0.98); }
.bm__p > * { transition: opacity 600ms, translate 900ms cubic-bezier(.22, 1, .36, 1); }
.bm__p:not(.on) > * { opacity: 0; translate: 0 12px; }
.bm__p.on > :nth-child(3) { transition-delay: 80ms; } .bm__p.on > :nth-child(4) { transition-delay: 140ms; } .bm__p.on > :nth-child(5) { transition-delay: 200ms; }
.bm__obj { position: absolute; right: clamp(18px, 2.4vw, 32px); top: clamp(18px, 2.4vw, 30px); width: clamp(84px, 9vw, 120px); height: auto; filter: drop-shadow(0 14px 18px rgba(11, 32, 53, 0.3)); }
.bm__p:not(.on) .bm__obj { rotate: -30deg; scale: 0.6; }
.bm__p .bm__obj { transition: opacity 500ms, rotate 800ms cubic-bezier(.3, 1.3, .5, 1), scale 800ms cubic-bezier(.3, 1.3, .5, 1); }
.bm__quando { margin: 0; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9A7120; }
.bm__big { margin: 4px 0 0; max-width: 11ch; font: 400 clamp(2.6rem, 1.8rem + 2.4vw, 4.2rem)/1.02 var(--f-titulo); letter-spacing: -0.03em; }
.bm__sub { margin: 0; max-width: 30ch; font-size: 1.05rem; line-height: 1.45; color: #3B4753; }
.bm__p ul { display: grid; margin: 14px 0 0; padding: 0; list-style: none; }
.bm__p li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(11, 32, 53, 0.1); font-size: 1.02rem; color: #26323E; }
.bm__p li svg { flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #0B2035; color: #E8CE93; }
.bm__p li b { font-weight: 600; color: #0B2035; font-variant-numeric: tabular-nums; }

/* ---------- o que a Conex assume (ABCBank): painéis lado a lado, o escolhido abre ---------- */
.ba__cab { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.ba__cab h2 { margin: 0; max-width: 16ch; font: 400 var(--t-h2)/1.06 var(--f-titulo); letter-spacing: -0.02em; text-wrap: balance; }
.ba__cab p { margin: 0; max-width: 30ch; font-size: var(--t-corpo); line-height: 1.5; color: #3B4753; }
.ba__paineis { display: flex; gap: 12px; height: clamp(460px, 40vw, 580px); }
.ba__p { position: relative; flex: 1 1 0; min-width: 0; border-radius: 26px; overflow: hidden; cursor: pointer; transition: flex-grow 800ms cubic-bezier(.65, 0, .25, 1); }
.ba__p--on { flex-grow: 4.6; }
.ba__alvo { all: unset; position: absolute; inset: 0; z-index: 2; border-radius: inherit; cursor: pointer; }
.ba__p--on .ba__alvo { cursor: default; pointer-events: none; }
.ba__alvo:focus-visible { outline: 3px solid #D8AC52; outline-offset: -5px; }
.ba__p--pagar { background: linear-gradient(170deg, #17426A, #0B2035); }
.ba__p--receber { background: linear-gradient(170deg, #6B9EBB, #4A7F9D); }
.ba__p--caixa { background: linear-gradient(170deg, #E9CF94, #D8AC52); }
.ba__p--notas { background: linear-gradient(170deg, #FFFFFF, #E9E1D1); }
.ba__p--relatorio { background: linear-gradient(170deg, #1D456D, #102B45); }
.ba__fechado { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0 30px; transition: opacity 400ms linear 350ms; }
.ba__fechado img { width: 72px; height: 72px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.3)); }
.ba__vert { writing-mode: vertical-rl; rotate: 180deg; font: 600 1.15rem/1 var(--f-texto); letter-spacing: -0.01em; white-space: nowrap; color: #F7F3EA; }
.ba__p--caixa .ba__vert, .ba__p--notas .ba__vert { color: #0B2035; }
.ba__aberto { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 380ms linear; pointer-events: none; }
.ba__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.06; transition: scale 1400ms cubic-bezier(.16, 1, .3, 1); }
.ba__aberto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 18, 31, 0.92) 0%, rgba(6, 18, 31, 0.55) 40%, rgba(6, 18, 31, 0) 70%); }
.ba__txt { position: absolute; display: grid; z-index: 1; left: clamp(22px, 2.6vw, 36px); right: clamp(22px, 2.6vw, 36px); bottom: clamp(22px, 2.6vw, 34px); display: grid; gap: 10px; color: #FFFFFF; translate: 0 18px; transition: translate 900ms cubic-bezier(.16, 1, .3, 1); }
.ba__txt p { margin: 0; }
.ba__nome { margin: 0; font: 400 clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem)/1.05 var(--f-titulo); letter-spacing: -0.02em; white-space: nowrap; }
.ba__desc { max-width: 40ch; font-size: 1.0625rem; line-height: 1.5; color: #DCE6EE; }
.ba__recebe { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: 46ch; padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.98rem; line-height: 1.45; color: #FFFFFF; }
.ba__recebe i { font: 600 0.72rem/1.3 var(--f-mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.ba__p--on .ba__fechado { opacity: 0; transition-delay: 0ms; transition-duration: 200ms; }
.ba__p--on .ba__aberto { opacity: 1; transition-delay: 300ms; transition-duration: 600ms; }
.ba__p--on .ba__foto { scale: 1; }
.ba__p--on .ba__txt { translate: 0 0; transition-delay: 320ms; }
.anima .ba .ba__p { opacity: 0; translate: 0 60px; transition: flex-grow 800ms cubic-bezier(.65, 0, .25, 1), opacity 600ms linear, translate 1100ms cubic-bezier(.16, 1, .3, 1); }
.anima .ba.vista .ba__p { opacity: 1; translate: 0 0; }
.anima .ba.vista .ba__p:nth-child(2) { transition-delay: 0ms, 90ms, 90ms; } .anima .ba.vista .ba__p:nth-child(3) { transition-delay: 0ms, 180ms, 180ms; }
.anima .ba.vista .ba__p:nth-child(4) { transition-delay: 0ms, 270ms, 270ms; } .anima .ba.vista .ba__p:nth-child(5) { transition-delay: 0ms, 360ms, 360ms; }

/* o nome do painel aberto em branco (o tom do marfim deixava o h3 marinho sobre a foto) */
.tom-marfim .ba__nome, .ba .ba__nome { color: #FFFFFF; }

/* ---------- setores: refeitos na v26 (JM, 07/10), em zzz-m-bpo.css ---------- */
.bs-set + .pv-sec { padding-top: 0; }

@media (max-width: 1023px) {
  .bh__grade { grid-template-columns: minmax(0, 1fr); gap: 36px; min-height: 0; padding-top: calc(var(--altura-topo) + 26px); }
  .bh__titulo { font-size: clamp(1.9rem, 0.4rem + 7.4vw, 3.4rem); }
  .bh__acoes, .bh__acoes .bt { width: 100%; justify-content: center; }
  .bh__cena { justify-self: center; }
  .bh__tab { width: min(420px, 84vw); }
  .bv__grade { grid-template-columns: minmax(0, 1fr); }
  .bv__aparelho { width: min(270px, 66vw); }
  .bm__palco { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 899px) {
  .bv__dif { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bv__dif > div + div { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(11, 32, 53, 0.14); }
  .bm--vivo .bm__palco { padding-block: calc(var(--altura-topo) + 4px) 70px; align-content: start; }
  .bm--vivo .bm__semanas li:not(.on) { display: none; }
  .bm--vivo .bm__semanas { margin-top: 12px; }
  .bm__semanas li { padding-block: 6px; }
  .bm__p { padding: 22px; border-radius: 22px; }
  .bm__big { font-size: 2.6rem; }
  .bm__obj { width: 72px; }
  .ba__cab { display: grid; }
  .ba__paineis { flex-direction: column; height: auto; }
  .ba__p { flex: none; height: 76px; transition: height 800ms cubic-bezier(.65, 0, .25, 1); }
  .ba__p--on { height: 440px; }
  .ba__fechado { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 0 20px; }
  .ba__fechado img { width: 50px; height: 50px; }
  .ba__vert { writing-mode: horizontal-tb; rotate: none; }
}

/* o que é, rodada 3: definição curta, as frentes em lista com ícone (ligadas às linhas do celular), a senha master numa linha */
.bv__def { margin: 6px 0 0; max-width: 46ch; font: 400 clamp(1.2rem, 1rem + 0.5vw, 1.45rem)/1.45 var(--f-titulo); color: #14283B; }
.bv__frentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.bv__frentes li { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(11, 32, 53, 0.1); font: 600 1rem/1.25 var(--f-texto); color: #0B2035; cursor: default; transition: color 250ms; }
.bv__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.08); transition: background-color 300ms, color 300ms; }
.bv__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .bv__frentes li:hover .bv__ic { background: #0B2035; color: #E8CE93; } }
.bv__ic--ouro { background: #0B2035; color: #E8CE93; box-shadow: none; }
.bv__senha { display: flex; align-items: flex-start; gap: 14px; margin: 4px 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.55; color: #3B4753; }
.bv__senha b { font-weight: 600; color: #0B2035; }
.bv__dif-t { font-family: var(--f-titulo); }
.anima .bv.vista .bv__verbete > :nth-child(4) { transition-delay: 260ms; } .anima .bv.vista .bv__verbete > :nth-child(5) { transition-delay: 360ms; }
.anima .bv.vista .bv__verbete > :nth-child(6) { transition-delay: 460ms; } .anima .bv.vista .bv__verbete > :nth-child(7) { transition-delay: 560ms; }
@media (max-width: 639px) { .bv__frentes { grid-template-columns: minmax(0, 1fr); } }

/* JM, 07/10: o que é mais enxuto; o celular é o da direita da home (tela virada para o texto) */
.bv__dif { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 4px 0 0; padding: 0; border: 0; }
.bv__dif > div { display: flex; align-items: baseline; gap: 10px; padding: 14px 0 0; border-top: 1px solid rgba(11, 32, 53, 0.14); }
.bv__dif > div + div { padding: 14px 0 0 22px; border-left: 0; margin-left: 0; }
.bv__dif dt { font: 500 1.15rem/1.2 var(--f-titulo); color: #0B2035; white-space: nowrap; }
.bv__dif dd { margin: 0; font-size: 0.95rem; color: #5B6875; }
.bv__dif > div:first-child dt::after, .bv__dif > div + div dt::after { content: '·'; margin-left: 10px; color: #9A7120; }
.bv__senha { align-items: center; }
.bv__classe { display: none; }
@media (max-width: 899px) { .bv__dif { grid-template-columns: minmax(0, 1fr); } .bv__dif > div + div { padding-left: 0; } }

/* JM, 07/10: no mês preso, o monograma mora no palco (não anda com a rolagem) */
.bm__palco { position: relative; isolation: isolate; }
.bm__palco > .monograma { left: calc(50% - 50vw); right: calc(50% - 50vw); }
.bm--vivo .bm__palco { position: sticky; }

/* cabecalho.css */
/* Cabeçalho · opção A: no topo, barra larga e transparente; rolando, uma ilha centralizada */
.topo {
  --logo-h: 34px;
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--altura-topo); pointer-events: none;
  transition: translate 420ms var(--curva);
}
.topo--escondido { translate: 0 -110%; }
.topo__barra {
  position: relative; pointer-events: auto;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-radius: 0; background-color: rgba(8, 24, 40, 0); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0);
  transition: width 700ms var(--curva), height 520ms var(--curva), margin-top 700ms var(--curva), padding 700ms var(--curva),
    border-radius 700ms var(--curva), background-color 400ms linear, box-shadow 400ms linear;
}
.topo--ilha .topo__barra {
  width: min(100% - 2 * var(--moldura), 1060px); height: calc(var(--altura-topo) - 18px); margin-top: 9px; padding: 0 8px 0 14px;
  border-radius: 18px; background-color: rgba(8, 24, 40, 0.9);
  box-shadow: inset 0 0 0 1px var(--fio-forte), 0 24px 44px -26px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
}
/* a logo recolhe para o símbolo: o recorte estreita, o desenho não muda de tamanho */
.topo__marca { display: block; flex: none; overflow: hidden; width: calc(var(--logo-h) * 6.171); transition: width 640ms var(--curva); }
.logo--topo { height: var(--logo-h); width: calc(var(--logo-h) * 6.171); max-width: none; }
.logo--topo > path { transition: opacity 360ms linear; }
.topo--ilha .topo__marca { width: calc(var(--logo-h) * 1.68); }
.topo--ilha .logo--topo > path { opacity: 0; }
/* linha de leitura */
.topo__leitura { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; overflow: hidden; opacity: 0; transition: opacity 400ms linear; }
.topo__leitura i { display: block; height: 100%; background: var(--ouro); transform-origin: 0 50%; transform: scaleX(0); }
.topo--ilha .topo__leitura { opacity: 1; }

.menu ul { display: flex; gap: 2px; }
.menu__link {
  position: relative; display: block; padding: 10px 13px; border-radius: 10px;
  font-size: 0.9375rem; font-weight: 520; color: var(--tinta-2); text-decoration: none;
}
.menu__rolo { display: block; height: 1.5em; line-height: 1.5; overflow: hidden; }
.menu__rolo > span { display: block; transition: translate 460ms var(--curva); }
.menu__rolo > span + span { color: var(--tinta); }
@media (hover: hover) { .menu__link:hover .menu__rolo > [data-hover-interno] { translate: 0 -100%; } }
.menu__link:focus-visible .menu__rolo > span { translate: 0 -100%; }
.menu__link[aria-current="page"] { color: var(--tinta); }
.menu__link[aria-current="page"]::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; background: var(--ouro); }
.topo__acoes { display: flex; align-items: center; gap: 0; }
.topo__tel {
  font-size: 0.9375rem; font-weight: 560; color: var(--tinta); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
  max-width: 190px; margin-right: 16px; overflow: hidden;
  transition: opacity 300ms linear, max-width 600ms var(--curva), margin 600ms var(--curva);
}
@media (hover: hover) { .topo__tel:hover { text-decoration: underline; text-underline-offset: 4px; } }
.topo--ilha .topo__tel { opacity: 0; max-width: 0; margin-right: 0; pointer-events: none; }
@media (max-width: 1279px) { .topo__tel { display: none; } }
/* WhatsApp: contorno no topo, sólido na ilha (a caixinha da seta segue virando ouro no hover) */
.topo__whats { transition: background-color 450ms linear, color 450ms linear, box-shadow 450ms linear; }
.topo--ilha .topo__whats { background-color: var(--creme); color: var(--marinho); box-shadow: none; }
.topo--ilha .topo__whats .bt__caixa { background: var(--marinho); color: var(--creme); }
@media (hover: hover) { .topo--ilha .topo__whats:hover { color: var(--marinho); } .topo--ilha .topo__whats:hover .bt__caixa { background: var(--marinho); color: var(--ouro-claro); } }
.topo__mobile { display: none; align-items: center; gap: 8px; }
.topo__menu {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 0; border-radius: var(--raio-p);
  background: var(--nevoa); color: var(--creme); box-shadow: inset 0 0 0 1px var(--fio-forte); font-weight: 600; font-size: 0.9375rem;
}
.topo__menu-linhas { display: grid; gap: 5px; }
.topo__menu-linhas i { display: block; width: 16px; height: 1.5px; background: currentColor; }
@media (max-width: 1099px) {
  .menu, .topo__whats, .topo__tel { display: none; }
  .topo__mobile { display: inline-flex; }
  .topo { --logo-h: 30px; }
  .topo--ilha .topo__barra { height: calc(var(--altura-topo) - 12px); margin-top: 6px; padding: 0 6px 0 12px; border-radius: 16px; }
}
@media (max-width: 379px) { .topo { --logo-h: 24px; } .topo__barra { gap: 12px; } .topo__menu { padding: 0; width: 44px; justify-content: center; } .topo__menu-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* gaveta do menu mobile */
.gaveta {
  margin: 0 0 0 auto; width: min(420px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh;
  border: 0; padding: 18px var(--margem) 28px; background: var(--marinho-2); color: var(--tinta);
  display: none; flex-direction: column; gap: 28px;
}
.gaveta[open] { display: flex; }
.gaveta::backdrop { background: rgba(3, 10, 18, 0.7); }
.gaveta__topo { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.logo--gaveta { height: 30px; width: auto; }
.gaveta__fechar { height: 44px; padding: 0 16px; border: 0; border-radius: var(--raio-p); background: var(--nevoa); color: var(--creme); font-weight: 600; }
.gaveta__lista { display: grid; margin-top: 8px; }
.gaveta__lista a {
  display: flex; justify-content: space-between; align-items: center; padding: 18px 0;
  border-bottom: 1px solid var(--fio); text-decoration: none; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em;
}
.gaveta__lista a span { color: var(--azul); }
.gaveta .bt { margin-top: auto; }
/* JM, 07/10: abertura e fechamento mais fluidos (antes a gaveta aparecia de uma vez e travava): desliza da direita,
   o fundo escurece junto e os links entram em cascata curta */
.gaveta[open] { animation: gaveta-entra 460ms cubic-bezier(.22, 1, .36, 1); will-change: translate; }
.gaveta[open]::backdrop { animation: gaveta-fundo 360ms linear; }
.gaveta[open] .gaveta__lista li, .gaveta[open] > .bt { animation: gaveta-item 520ms cubic-bezier(.22, 1, .36, 1) both; }
.gaveta[open] .gaveta__lista li:nth-child(2) { animation-delay: 50ms; }
.gaveta[open] .gaveta__lista li:nth-child(3) { animation-delay: 100ms; }
.gaveta[open] .gaveta__lista li:nth-child(4) { animation-delay: 150ms; }
.gaveta[open] .gaveta__lista li:nth-child(5) { animation-delay: 200ms; }
.gaveta[open] > .bt { animation-delay: 240ms; }
.gaveta.gaveta--sai { animation: gaveta-sai 320ms cubic-bezier(.4, 0, .7, .2) forwards; }
.gaveta.gaveta--sai::backdrop { animation: gaveta-fundo-sai 320ms linear forwards; }
@keyframes gaveta-entra { from { translate: 100% 0; } }
@keyframes gaveta-sai { to { translate: 100% 0; } }
@keyframes gaveta-fundo { from { opacity: 0; } }
@keyframes gaveta-fundo-sai { to { opacity: 0; } }
@keyframes gaveta-item { from { opacity: 0; translate: 24px 0; } }
@media (prefers-reduced-motion: reduce) { .gaveta[open], .gaveta[open]::backdrop, .gaveta[open] .gaveta__lista li, .gaveta[open] > .bt { animation: none; } }

/* celular.css */
/* Celular · moldura de titânio escuro, tela azul da marca, uma notificação */
.celular {
  position: relative; width: 280px; aspect-ratio: 9 / 19.2; border-radius: 46px; padding: 10px;
  background: linear-gradient(145deg, #3A4C60, #0B1826 55%, #26384C);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 50px 80px -30px rgba(0, 0, 0, 0.6);
}
.celular__tela {
  position: relative; height: 100%; border-radius: 37px; overflow: hidden; padding: 58px 12px 0;
  background:
    radial-gradient(80% 50% at 50% 100%, rgba(68, 120, 150, 0.5), transparent 70%),
    radial-gradient(70% 40% at 20% 30%, rgba(48, 100, 142, 0.45), transparent 70%),
    linear-gradient(180deg, #0B2440, #123A5E 60%, #17466B);
  color: #fff; text-align: center;
}
.celular__ilha { position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 88px; height: 26px; border-radius: 20px; background: #05090F; }
.celular__data { font-size: 0.8125rem; color: #F1F6FA; }
.celular__hora { font-size: 4.2rem; font-weight: 560; letter-spacing: -0.04em; line-height: 1; margin-top: 2px; color: #fff; }
.celular__aviso {
  display: flex; gap: 9px; align-items: flex-start; text-align: left; margin-top: 34px; padding: 11px 12px;
  border-radius: 20px; background: rgba(246, 249, 252, 0.94); color: #0B2038;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35);
}
.celular__app { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #25D366; color: #fff; }
.celular__app .bt__whats { width: 19px; height: 19px; }
.celular__origem { font-size: 0.75rem !important; color: #33485C !important; letter-spacing: 0.06em; }
.celular__elos { width: 22px; height: auto; }
.celular__aviso-texto { display: grid; gap: 2px; font-size: 0.82rem; line-height: 1.38; color: #143050; }
.celular__aviso-texto strong { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 650; }
.celular__aviso-texto small { font-weight: 400; color: #4A6480; font-size: 0.75rem; }
.anima .celular__aviso { opacity: 0; translate: 0 -18px; scale: 0.96; transition: opacity 600ms var(--curva), translate 700ms var(--curva), scale 700ms var(--curva); }
.anima .visivel .celular__aviso { opacity: 1; translate: 0 0; scale: 1; transition-delay: 450ms; }

.celular { rotate: -2deg; }

/* cofre.css */
/* ---------- Segurança · v16 (JM, 01/10): opção C refinada ----------
   Palco marinho com o celular real e a tela de bloqueio; ao lado, a linha do tempo do dia. O JS escreve o progresso da
   rolagem (classes nas notificações e no Face ID); aqui mora a forma. Sem JS (sem .cfx--vivo), tudo no estado final. */
.cfx__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cfx__palco { position: relative; display: grid; place-items: center; min-height: 680px; padding: 40px 20px; border-radius: 34px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 55% at 50% 45%, #1C4B76 0%, rgba(28, 75, 118, 0) 70%), radial-gradient(90% 60% at 50% 105%, rgba(216, 172, 82, 0.22) 0%, rgba(216, 172, 82, 0) 60%), #0B2035;
  box-shadow: 0 40px 80px -50px rgba(11, 32, 53, 0.9); }
.cfx__palco::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.35;
  background: repeating-radial-gradient(circle at 50% 46%, rgba(201, 216, 228, 0.08) 0 1px, transparent 1px 64px); -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }
.cfx-fone { position: relative; width: min(330px, 70vw); aspect-ratio: 1464 / 2710; }
.cfx-fone > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.cfx-fone__sombra { position: absolute; z-index: 0; left: 10%; right: 4%; bottom: -4%; height: 8%; border-radius: 50%; background: rgba(0, 0, 0, 0.6); filter: blur(24px); }
.cfx-fone__tela { position: absolute; left: 0; top: 0; width: 332px; height: 714.3px; transform-origin: 0 0; overflow: hidden; border-radius: 47.9px; container-type: inline-size; background: #0B2035; visibility: hidden; }
.cfx--encaixado .cfx-fone__tela { visibility: visible; }
.cfx-fone__tela::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 28%, rgba(255, 255, 255, 0) 42%); }
/* a tela de bloqueio */
.cfx-t { position: absolute; inset: 0; color: #FFFFFF; font-family: var(--f-texto); background: radial-gradient(90% 60% at 50% 18%, #1F5A85 0%, rgba(31, 90, 133, 0) 70%), linear-gradient(180deg, #123A60 0%, #0B2035 62%, #081828 100%); }
.cfx-t p { margin: 0; }
.cfx-t__marca { position: absolute; left: 50%; bottom: 10cqw; width: 64cqw; translate: -50% 0; opacity: 0.12; }
.cfx-t__marca svg { width: 100%; height: auto; display: block; }
.cfx-t__data { position: absolute; left: 0; right: 0; top: 19cqw; text-align: center; font: 500 4.4cqw/1 var(--f-texto); color: #DCE6EE; }
.cfx-t__hora { position: absolute; left: 0; right: 0; top: 25cqw; text-align: center; font: 600 22cqw/1 var(--f-texto); letter-spacing: -0.04em; color: #F4F1EA; }
.cfx-t__pilha { position: absolute; left: 4.5cqw; right: 4.5cqw; top: 66cqw; display: grid; gap: 2.6cqw; }
.cfx-n { display: grid; grid-template-columns: 10cqw minmax(0, 1fr) auto; align-items: center; gap: 0.4cqw 3cqw; padding: 3.6cqw 4cqw; border-radius: 6.4cqw;
  background: rgba(240, 244, 248, 0.94); color: #0B2035; box-shadow: 0 3cqw 6cqw -3cqw rgba(0, 0, 0, 0.5); }
.cfx-n__ic { grid-row: span 2; display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 2.8cqw; background: #0B2035; color: #E8CE93; font-style: normal; }
.cfx-n__ic svg { width: 64%; height: 64%; }
.cfx-n--voce .cfx-n__ic { background: #D8AC52; color: #0B2035; }
.cfx-n--banco .cfx-n__ic { background: #1F5A85; color: #FFFFFF; }
.cfx-n b { font: 700 3.7cqw/1.2 var(--f-texto); }
.cfx-n small { font-size: 3.2cqw; color: #6B7682; align-self: start; }
.cfx-n__txt { grid-column: 2 / 4; font-size: 3.7cqw; line-height: 1.3; color: #26323E; }
.cfx-n__txt strong { color: #0B2035; }
.cfx-n__acoes { grid-column: 1 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin-top: 2cqw; overflow: hidden; }
.cfx-n__acoes em { display: grid; place-items: center; height: 10cqw; border-radius: 3cqw; font: 600 3.7cqw/1 var(--f-texto); font-style: normal; background: rgba(11, 32, 53, 0.08); }
.cfx-n__acoes .cfx-n__sim { background: #0B2035; color: #E8CE93; }
/* o Face ID */
.cfx-fid { position: absolute; left: 50%; top: 40%; z-index: 5; display: grid; justify-items: center; gap: 3cqw; padding: 6cqw 8cqw; border-radius: 7cqw; translate: -50% -50%;
  background: rgba(8, 24, 40, 0.86); color: #E8CE93; opacity: 0; scale: 0.9; }
.cfx-fid p { font: 600 3.6cqw/1 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: #DCE6EE; }
.cfx-fid__ic { width: 20cqw; height: 20cqw; }
.cfx-fid__ok { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cfx-fid__canto, .cfx-fid__rosto { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* estados (o JS liga as classes conforme a rolagem; sem JS fica o estado final) */
.cfx--vivo .cfx-n { opacity: 0; translate: 0 -8cqw; scale: 0.94; transition: opacity 380ms linear, translate 700ms cubic-bezier(.22, 1, .36, 1), scale 700ms cubic-bezier(.22, 1, .36, 1); }
.cfx--vivo .cfx-n.on { opacity: 1; translate: 0 0; scale: 1; }
.cfx--vivo .cfx-n__acoes { max-height: 0; margin-top: 0; opacity: 0; transition: max-height 500ms cubic-bezier(.22, 1, .36, 1), margin-top 500ms, opacity 300ms linear; }
.cfx--vivo .cfx-n.aberta .cfx-n__acoes { max-height: 14cqw; margin-top: 2cqw; opacity: 1; }
.cfx--vivo .cfx-n.aprovada .cfx-n__acoes { max-height: 0; margin-top: 0; opacity: 0; }
.cfx--vivo .cfx-fid { transition: opacity 300ms linear, scale 500ms cubic-bezier(.3, 1.4, .5, 1); }
.cfx--vivo .cfx-fid.on { opacity: 1; scale: 1; }
.cfx--vivo .cfx-fid .cfx-fid__rosto { transition: opacity 300ms linear; }
.cfx--vivo .cfx-fid.ok .cfx-fid__rosto { opacity: 0; }
.cfx--vivo .cfx-fid .cfx-fid__ok { transition: stroke-dashoffset 500ms cubic-bezier(.45, .05, .25, 1); }
.cfx--vivo .cfx-fid.ok .cfx-fid__ok { stroke-dashoffset: 0; }
.cfx:not(.cfx--vivo) .cfx-n__acoes { display: none; }
.cfx:not(.cfx--vivo) .cfx-fid { display: none; }
/* o texto e a linha do tempo */
.cfx__rot { font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase; color: #5E450D; }
.cfx__titulo { margin-top: 12px; font: 400 clamp(2.1rem, 1.1rem + 2.6vw, 3.5rem)/1.06 var(--f-titulo); letter-spacing: -0.02em; color: #0B2035; max-width: 16ch; }
.cfx__destaque { color: #1F5A85; }
.cfx__apoio { margin-top: 14px; font-size: 1.0625rem; color: #3B4753; }
.cfx__linha { position: relative; display: grid; gap: 0; margin: 26px 0 0; padding: 0 0 0 28px; list-style: none; }
.cfx__linha::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: rgba(11, 32, 53, 0.14); }
.cfx__linha::after { content: ''; position: absolute; left: 6px; top: 10px; width: 2px; height: calc((100% - 20px) * var(--p, 1)); background: #B88A2B; }
.cfx-p { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 12px 0; transition: opacity 400ms linear; }
.cfx-p::before { content: ''; position: absolute; left: -28px; top: 17px; width: 14px; height: 14px; border-radius: 50%; background: #F1E5CC; box-shadow: inset 0 0 0 2px rgba(11, 32, 53, 0.3); transition: background-color 300ms, box-shadow 300ms; }
.cfx-p.on::before { background: #B88A2B; box-shadow: 0 0 0 4px rgba(184, 138, 43, 0.18); }
.cfx--vivo .cfx-p:not(.on) { opacity: 0.4; }
.cfx-p__hora { font: 600 0.9375rem/1.6 var(--f-texto); color: #5E450D; font-variant-numeric: tabular-nums; }
.cfx-p__txt { display: grid; gap: 2px; font-size: 1rem; color: #3B4753; }
.cfx-p__txt b { font: 400 1.4rem/1.2 var(--f-titulo); color: #0B2035; }
.cfx__chaves { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 22px 0 0; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.14); }
.cfx__chaves div { padding: 14px 16px; }
.cfx__chaves dt { font: 700 0.6875rem/1.3 var(--f-texto); letter-spacing: 0.12em; text-transform: uppercase; color: #3B4753; }
.cfx__chaves dd { margin: 4px 0 0; font: 400 1.5rem/1.1 var(--f-titulo); color: #0B2035; }
.cfx__chave-sua { background: #0B2035; } .cfx__chave-sua dt { color: #E8CE93; } .cfx__chave-sua dd { color: #FFFFFF; }
.cfx__acao { margin-top: 24px; }
@media (max-width: 960px) {
  .cfx__grade { grid-template-columns: minmax(0, 1fr); }
  .cfx__palco { min-height: 0; padding: 36px 16px 44px; }
  .cfx-fone { width: min(300px, 74vw); }
}
@media (prefers-reduced-motion: reduce) { .cfx--vivo .cfx-n, .cfx--vivo .cfx-fid, .cfx-p { transition: none; } }
.cfx-n__ic .cfx-elos { width: 100%; height: 100%; object-fit: contain; }

/* comparativo.css */
/* ---------- Comparativo CLT × Conex (JM, 07/10) ----------
   Duas fichas lado a lado, como a página de uma proposta: à esquerda o custo de um assistente, linha a linha, até o
   total; à direita a Conex, com o que deixa de existir e a economia. As linhas entram em fila e o total conta. */
.cp__cab { display: grid; justify-items: center; gap: 14px; max-width: 760px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.cp__rot { margin: 0; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #5E450D; }
.cp__cab h2 { margin: 0; font: 500 var(--t-h2)/1.08 var(--f-titulo); letter-spacing: -0.02em; color: #0B2035; text-wrap: balance; }
.cp__cab p:last-child { margin: 0; max-width: 54ch; font: 400 clamp(1.15rem, 1rem + 0.45vw, 1.4rem)/1.45 var(--f-titulo); color: #3B4753; }
.cp__mesa { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: start; max-width: 1080px; margin: 0 auto; }
.cp__ficha { display: grid; gap: 18px; padding: clamp(24px, 3vw, 38px); border-radius: 26px; }
.cp__ficha header { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; }
.cp__ficha header img { width: 44px; height: 44px; object-fit: contain; }
.cp__quem { margin: 0; font: 500 1.6rem/1.1 var(--f-titulo); }
.cp__sub { margin: 4px 0 0; font: 600 0.72rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.cp__ficha dl { display: grid; margin: 0; }
.cp__ficha dl > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; }
.cp__ficha dt { display: flex; align-items: center; gap: 8px; font-size: 0.98rem; }
.cp__ficha dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding-top: 16px; }
.cp__total span { font: 600 0.8rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.cp__total b { font: 500 clamp(2rem, 1.5rem + 1.4vw, 2.8rem)/1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* a ficha do CLT: papel claro, total em tom de alerta discreto */
.cp__ficha--clt { background: #FFFCF5; color: #0B2035; box-shadow: 0 30px 60px -40px rgba(74, 52, 12, 0.45), inset 0 0 0 1px rgba(154, 113, 32, 0.12); }
.cp__ficha--clt header { border-bottom: 2px solid #0B2035; }
.cp__ficha--clt .cp__sub { color: #5B6875; }
.cp__ficha--clt dl > div { border-bottom: 1px solid rgba(11, 32, 53, 0.08); }
.cp__ficha--clt dt { color: #3B4753; }
.cp__ficha--clt .cp__total b { color: #9B3B2E; }
/* a ficha da Conex: marinho, o que some vira R$ 0 em ouro */
.cp__ficha--conex { background: linear-gradient(160deg, #17426A, #0B2035); color: #FFFFFF; box-shadow: 0 40px 70px -40px rgba(11, 32, 53, 0.9); }
.cp__ficha--conex header { border-bottom: 1px solid rgba(232, 206, 147, 0.5); }
.cp__ficha--conex .cp__sub { color: #E8CE93; }
.cp__ficha--conex dl > div { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cp__ficha--conex dt { color: #DCE6EE; }
.cp__ficha--conex dt svg { width: 16px; height: 16px; color: #D8AC52; }
.cp__ficha--conex dd { color: #E8CE93; }
.cp__ficha--conex .cp__total b { color: #E8CE93; }
.cp__como { margin: 0; font-size: 0.92rem; line-height: 1.5; color: #C9D8E4; }
/* a diferença que não está no preço (v26: o desenho novo está em zzz-m-home2.css) */
.cp__pe { display: grid; justify-items: center; gap: 14px; margin-top: clamp(28px, 4vw, 44px); text-align: center; }
.cp__nota { margin: 0; max-width: 70ch; font-size: 0.82rem; line-height: 1.5; color: #5B6875; }
/* entrada: as linhas da ficha entram em fila; o total conta */
.anima .cp [data-cp-l] { opacity: 0; transform: translateY(8px); transition: opacity 400ms linear, transform 600ms cubic-bezier(.16, 1, .3, 1); }
.anima .cp.vista [data-cp-l] { opacity: 1; transform: none; }
.anima .cp__ficha { opacity: 0; transform: translateY(40px); transition: opacity 700ms linear, transform 1000ms cubic-bezier(.16, 1, .3, 1); }
.anima .cp.vista .cp__ficha { opacity: 1; transform: none; }
.anima .cp.vista .cp__ficha--conex { transition-delay: 150ms; }
@media (max-width: 899px) {
  .cp__mesa { grid-template-columns: minmax(0, 1fr); }
}
.cp__ficha--clt header { display: grid; gap: 2px; }

/* conversa.css */
/* ---------- A semana · conversa no WhatsApp ---------- */
.conversa__grade { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 1024px) { .conversa__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }
.conversa__texto { display: grid; justify-items: start; gap: 18px; }
.conversa__texto h2 { font-size: clamp(1.9rem, 1.1rem + 2vw, 3rem); max-width: 16ch; }
.conversa__apoio { color: var(--tinta-2); max-width: 44ch; }
/* os seis dias: cada um se marca quando a Conex responde */
.conversa__dias { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.conversa__dias li { display: grid; place-items: center; min-width: 52px; height: 40px; padding: 0 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--fio-forte);
  font: 700 0.75rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); transition: background-color 400ms linear, color 400ms linear, box-shadow 400ms linear; }
.conversa__dias li.agora { box-shadow: inset 0 0 0 1.5px var(--ouro); color: var(--tinta); }
.conversa__dias li.feito { background: var(--ouro); color: var(--marinho); box-shadow: none; }

/* o celular */
.zap-lado { display: grid; justify-items: center; gap: 12px; }
.zap { width: min(100%, 400px); height: 600px; display: flex; flex-direction: column; border-radius: 34px; overflow: hidden;
  background: #081B2D; box-shadow: inset 0 0 0 2px rgba(233, 242, 248, 0.16), 0 50px 80px -44px rgba(0, 0, 0, 0.9); }
.zap__cab { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; background: #0C2640; border-bottom: 1px solid var(--fio); }
.zap__foto { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #F4F7FA; }
.zap__elos { width: 26px; height: auto; }
.zap__quem { display: grid; line-height: 1.2; }
.zap__quem b { font-weight: 600; font-size: 1rem; }
.zap__quem small { font-size: 0.8125rem; color: var(--azul); transition: color 200ms linear; }
.zap__chat { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
.zap__chat::-webkit-scrollbar { display: none; }
.zap__dia { align-self: center; margin: 6px 0 2px; }
.zap__dia span { display: inline-block; padding: 4px 10px; border-radius: 8px; background: rgba(233, 242, 248, 0.08); font: 600 0.75rem/1.3 var(--f-mono); color: var(--tinta-2); }
.zap__msg { max-width: 84%; padding: 9px 12px 6px; border-radius: 16px; font-size: 0.9375rem; line-height: 1.4; color: var(--tinta); transform-origin: 100% 100%; }
.zap__msg p { margin: 0; }
.zap__msg small { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: 0.6875rem; color: #DCE7F0; font-variant-numeric: tabular-nums; }
.zap__msg--voce { align-self: flex-end; background: #1F4A6E; border-bottom-right-radius: 5px; }
.zap__msg--conex { align-self: flex-start; background: #16375A; border-bottom-left-radius: 5px; transform-origin: 0 100%; }
.zap__msg--conex > b { display: block; font-size: 0.75rem; font-weight: 700; color: var(--ouro-claro); margin-bottom: 1px; }
.zap__msg--resumo { box-shadow: inset 0 0 0 1px rgba(216, 172, 82, 0.55); }
.zap__msg--resumo strong { font-weight: 600; }
.zap__lido { display: inline-flex; color: var(--azul); }
.zap__lido svg { width: 16px; height: 11px; }

/* rodapé do celular: começar, campo com a mensagem sendo digitada, ver de novo */
.zap__pe { padding: 12px 12px 16px; background: #0C2640; border-top: 1px solid var(--fio); min-height: 78px; display: grid; }
.zap__comecar { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border: 0; border-radius: 26px; background: var(--ouro); color: var(--marinho); font-weight: 700; font-size: 1rem; }
.zap__comecar svg { width: 18px; height: 18px; }
.zap__campo { display: flex; align-items: center; gap: 8px; }
.zap__texto { flex: 1; min-height: 48px; display: flex; align-items: center; padding: 8px 16px; border-radius: 24px; background: #132F4B; font-size: 0.9375rem; line-height: 1.3; color: var(--tinta); }
.zap__texto:empty::before { content: "Mensagem"; color: #B4C4D2; }
.zap__enviar { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--azul-marca); color: #fff; }
.zap__enviar svg { width: 20px; height: 20px; }
.zap__fim { display: grid; }
.zap__rever { height: 48px; border: 0; border-radius: 24px; background: rgba(233, 242, 248, 0.08); color: var(--tinta); font-weight: 600; box-shadow: inset 0 0 0 1px var(--fio-forte); }
.zap__nota { display: flex; gap: 14px; align-items: center; font-size: 0.75rem; color: var(--tinta-2); }
.zap__pular { border: 0; background: none; padding: 4px 0; color: var(--tinta); font: 600 0.75rem var(--f-texto); text-decoration: underline; text-underline-offset: 3px; }

/* antes de começar: o convite no meio da conversa vazia */
.zap__vazio { display: none; }
.conversa--viva .zap__vazio { display: grid; gap: 4px; margin: auto; max-width: 24ch; text-align: center; font-size: 0.9375rem; line-height: 1.4; color: var(--tinta-2); transition: opacity 250ms linear; }
.conversa--viva .zap__vazio b { font: 500 1.375rem/1.15 var(--f-titulo); color: var(--tinta); }
.conversa--rodando .zap__vazio { display: none; }
@media (max-width: 639px) { .conversa__dias { gap: 6px; } .conversa__dias li { min-width: 0; flex: 1; padding: 0; } }
/* com animação: as mensagens nascem escondidas e entram quando a conversa chega nelas */
.conversa--viva .zap__msg, .conversa--viva .zap__dia { display: none; }
.conversa--viva .zap__msg.on, .conversa--viva .zap__dia.on { display: block; }
.conversa--viva .zap__msg.on { animation: zap-entra 420ms cubic-bezier(.3, 1.3, .5, 1) both; }
.conversa--viva .zap__dia.on { display: block; animation: zap-dia 360ms ease-out both; }
@keyframes zap-entra { from { opacity: 0; scale: 0.86; translate: 0 10px; } }
@keyframes zap-dia { from { opacity: 0; } }
@media (max-width: 1023px) { .conversa__texto .bt { display: none; } .zap { height: 560px; } }
@media (prefers-reduced-motion: reduce) { .conversa--viva .zap__msg.on, .conversa--viva .zap__dia.on { animation: none; } .zap__chat { scroll-behavior: auto; } }

/* depoimentos.css */
/* ---------- Depoimentos · opção 3 do JM (27/09): destaque + fila, com a foto da sócia em destaque ----------
   Em cima, a foto grande da sócia e uma avaliação por vez se preenchendo palavra por palavra (frase-chave em dourado).
   Embaixo, o título com a nota e a fila com todas correndo de lado; o mouse ou o toque freia a fila. No cartão: frase
   marcada, estrelas que se completam e aspas que entram. Versões anteriores em _antigo/depoimentos-v9.2 e v10. */
.dp { position: relative; overflow: hidden; color: #FFFFFF; padding-block: calc(clamp(56px, 6vw, 88px) + var(--onda-h)) calc(clamp(48px, 5vw, 72px) + var(--onda-h));
  background: radial-gradient(55% 60% at 8% 30%, rgba(46, 111, 163, 0.3), transparent 70%), radial-gradient(50% 55% at 88% 100%, rgba(46, 111, 163, 0.26), transparent 72%), #0B2035; }
.dp > .envelope { position: relative; z-index: 2; }

/* em cima: a foto e a avaliação em destaque */
.dp__topo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
.dp__foto { position: relative; width: clamp(300px, 30vw, 440px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: 30px;
  box-shadow: 0 50px 90px -46px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(233, 242, 248, 0.12); }
.dp__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.dp__foto figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 2px; padding: 14px 18px; border-radius: 18px;
  background: rgba(11, 32, 53, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.14); }
.dp__foto figcaption b { font-size: 1.0625rem; color: #FFFFFF; }
.dp__foto figcaption span { font: 600 0.6875rem/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #E8CE93; }
.dp__destaque { display: grid; align-content: center; gap: 22px; min-width: 0; }
.dp__rot { display: flex; align-items: center; gap: 12px; font: 600 0.75rem/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #C9D8E4; }
.dp__rot-est { display: flex; gap: 3px; } .dp__rot-est svg { width: 14px; height: 14px; fill: #D8AC52; }
.dp__citacao { margin: 0; min-height: 4.6em; font: 400 clamp(1.9rem, 1rem + 2.3vw, 3.3rem)/1.14 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; text-wrap: pretty; }
.dp__citacao .w { transition: color 280ms linear; }
.dp--vivo .dp__citacao .w { color: rgba(233, 242, 248, 0.2); }
.dp--vivo .dp__citacao .w.on { color: #FFFFFF; }
.dp__citacao .w.k, .dp--vivo .dp__citacao .w.k.on { color: #E8CE93; }
.dp--vivo .dp__citacao .w.k:not(.on) { color: rgba(232, 206, 147, 0.25); }
.dp__autor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 1rem; color: #C9D8E4; }
.dp__autor b { color: #FFFFFF; }
.dp__autor [data-dp-ctx]::before { content: '·'; margin-right: 12px; color: rgba(233, 242, 248, 0.4); }
.dp__passos { display: flex; gap: 6px; margin-left: auto; }
.dp__passos i { width: 28px; height: 3px; border-radius: 3px; background: rgba(233, 242, 248, 0.2); overflow: hidden; }
.dp__passos i.on { background: linear-gradient(90deg, #D8AC52 var(--prog, 100%), rgba(233, 242, 248, 0.2) var(--prog, 100%)); }

/* no meio: o título e a nota */
.dp__meio { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-top: clamp(48px, 6vw, 80px); }
.dp h2 { max-width: 20ch; font: 400 clamp(2rem, 1.2rem + 2vw, 3.1rem)/1.06 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; }
.dp__nota { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; font-size: 0.9375rem; color: #D5E1EB; }
.dp__nota b { font: 400 3rem/1 var(--f-titulo); color: #E8CE93; }
.dp__nota a { color: #F4E2B4; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* embaixo: a fila correndo de lado, com máscara nas pontas */
.dp__faixa { position: relative; z-index: 2; margin-top: 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.dp__fila { display: flex; gap: 18px; width: max-content; margin: 0; padding: 8px 0 16px; list-style: none; animation: dp-lado 70s linear infinite; } .dp__faixa.parada .dp__fila { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine){.dp__faixa:hover .dp__fila{ animation-play-state: paused; }}
@keyframes dp-lado { to { transform: translateX(-50%); } }
.dp-card { position: relative; flex: none; width: 360px; padding: 24px 22px 20px; border-radius: 20px; background: #F7F2E8; color: #2E3A46; cursor: pointer; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 24px 44px -26px rgba(0, 0, 0, 0.8); -webkit-tap-highlight-color: transparent; }
.dp-card:focus-visible { outline: 3px solid #D8AC52; outline-offset: 3px; }
.dp-card blockquote { margin: 0; }
.dp-card__topo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-right: 50px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #3B4753; }
.dp-card__txt { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.dp-card__quem { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.dp-card__av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #0B2035; color: #E8CE93; font-weight: 700; box-shadow: 0 0 0 2px #EDE4D3; }
.dp-card__nome { display: flex; flex-direction: column; } .dp-card__nome cite { font-style: normal; font-weight: 600; color: #0B2035; } .dp-card__nome span { margin-top: 2px; font-size: 0.8125rem; color: #3B4753; }
.dp-card__marca { padding: 0 0.1em; border-radius: 3px; color: #0B2035; background: linear-gradient(rgba(216, 172, 82, 0.55), rgba(216, 172, 82, 0.55)) 0 100% / 100% 0.22em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 500ms cubic-bezier(.22, 1, .36, 1); }
.dp-est { display: flex; gap: 3px; } .dp-est i { position: relative; display: block; width: 14px; height: 14px; }
.dp-est i:nth-child(2) { --i: 1; } .dp-est i:nth-child(3) { --i: 2; } .dp-est i:nth-child(4) { --i: 3; } .dp-est i:nth-child(5) { --i: 4; }
.dp-est svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dp-est .b path { fill: none; stroke: #B88A2B; stroke-width: 1.2; stroke-linejoin: round; } .dp-est .c path { fill: #9A7120; }
.dp-card__aspas { position: absolute; top: 18px; right: 20px; width: 32px; height: auto; overflow: visible; }
.dp-card__aspas path { fill: #D9C9A6; transition: fill 380ms linear; }
@keyframes dp-enche { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dp-pula { 55% { scale: 1.28; } }
@keyframes dp-aspa { from { translate: -6px -10px; opacity: 0; } }
.dp-card.ativo .dp-card__marca { background-size: 100% 100%; }
.dp-card.ativo .dp-est .c { animation: dp-enche 380ms cubic-bezier(.3, .7, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.dp-card.ativo .dp-est i { animation: dp-pula 420ms cubic-bezier(.3, .7, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
.dp-card.ativo .dp-card__aspas path { fill: #B88A2B; }
.dp-card.ativo .dp-card__aspas path:first-child { animation: dp-aspa 560ms cubic-bezier(.34, 1.4, .5, 1) backwards; }
.dp-card.ativo .dp-card__aspas path:last-child { animation: dp-aspa 560ms cubic-bezier(.34, 1.4, .5, 1) 110ms backwards; }
@media (hover: hover) {
  .dp-card:hover .dp-card__marca { background-size: 100% 100%; }
  .dp-card:hover .dp-est .c { animation: dp-enche 380ms cubic-bezier(.3, .7, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
  .dp-card:hover .dp-est i { animation: dp-pula 420ms cubic-bezier(.3, .7, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .dp-card:hover .dp-card__aspas path { fill: #B88A2B; }
  .dp-card:hover .dp-card__aspas path:first-child { animation: dp-aspa 560ms cubic-bezier(.34, 1.4, .5, 1) backwards; }
  .dp-card:hover .dp-card__aspas path:last-child { animation: dp-aspa 560ms cubic-bezier(.34, 1.4, .5, 1) 110ms backwards; }
}

@media (max-width: 1023px) {
  .dp__topo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .dp__foto { width: min(100%, 420px); }
  .dp__destaque { width: 100%; }
}
@media (max-width: 767px) {
  .dp__citacao { min-height: 6.2em; font-size: 1.6rem; }
  .dp-card { width: 290px; }
  .dp__passos { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dp__fila { animation: none; flex-wrap: wrap; width: auto; } .dp-card * { animation: none !important; } }

/* ---------- JM, 28/09: a foto do cartão é da Erika (sócia-diretora), com a frase dela ----------
   A frase é dela, não de cliente: fica presa à foto e assinada, separada das avaliações do Google ao lado. */
/* JM, 07/10: a foto é a nova da Erika à mesa, de camisa branca (socia-erika-mesa.webp; a antiga, de blazer vermelho, era socia-erika.webp) */
.dp__foto--fala { background: #0A0A0B; }
.dp__foto--fala img { object-position: 50% 0%; }
.dp__foto--fala figcaption { gap: 4px; padding: 18px 20px 16px; }
.dp__fala { margin: 0 0 10px; }
.dp__fala p { font: 400 clamp(1rem, 0.9rem + 0.35vw, 1.1875rem)/1.34 var(--f-titulo); letter-spacing: -0.005em; color: #FFFFFF; text-wrap: pretty; }
.dp__fala mark { background: none; color: #E8CE93; }
@media (max-width: 767px) { .dp__fala p { font-size: 1rem; } }

/* diagnostico.css */
/* /diagnostico · uma pergunta por vez num cartão branco sobre a névoa */
.diag { padding: calc(var(--altura-topo) + clamp(20px, 4svh, 48px)) 0 var(--secao); background: linear-gradient(180deg, #0C2338, #0A1E31); min-height: 100svh; }
.diag__grade { display: grid; gap: 20px; align-items: start; }
.diag__lente { background: var(--nevoa); border-radius: var(--raio-g); padding: clamp(22px, 4vw, 48px); box-shadow: var(--sombra-2); }
.diag__etiqueta { font-size: 0.8125rem; letter-spacing: 0.1em; color: #BFD8E9; }
.diag h1 { margin-top: 12px; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.diag__apoio { margin-top: 12px; color: var(--tinta-2); }
.diag--compacto .diag__topo h1, .diag--compacto .diag__apoio { display: none; }
.diag__regua { display: flex; gap: 6px; margin: 24px 0 8px; }
.diag__regua li { flex: 1; height: 4px; border-radius: 4px; background: rgba(233, 242, 248, 0.14); }
.diag__regua li.feito { background: var(--azul); }
.diag__regua li.atual { background: var(--ouro); }
.diag__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.diag--passo .diag__q { display: none; }
.diag--passo .diag__q.ativa { display: block; }
.diag__texto { padding: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); font-weight: 620; letter-spacing: -0.02em; line-height: 1.25; margin-top: 18px; }
.diag__progresso { display: block; margin-bottom: 10px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; color: var(--tinta-2); text-transform: uppercase; }
.diag__opcoes { margin-top: 20px; display: grid; gap: 8px; }
.diag__opcao { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--fio-forte); cursor: pointer; font-weight: 540; transition: box-shadow 240ms var(--curva), background-color 240ms var(--curva); }
.diag__opcao input { width: 20px; height: 20px; accent-color: var(--azul); flex: none; margin: 0; }
.diag__opcao:has(input:checked) { box-shadow: inset 0 0 0 2px var(--azul); background: rgba(140, 190, 220, 0.12); }
@media (hover: hover) { .diag__opcao:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); } }
.diag__campos { margin-top: 20px; display: grid; gap: 14px; }
.campo-form { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; }
.campo-form input { min-height: 52px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--fio-forte); background: var(--marinho-2); color: var(--tinta); font-size: 1rem; font-weight: 400; }
.campo-form input:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.diag__lgpd { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--tinta-2); }
.diag__lgpd input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--azul); flex: none; }
.diag__aviso { margin-top: 16px; font-size: 0.875rem; color: var(--tinta-2); }
.diag__enviar { margin-top: 20px; border: 0; }
.diag__nav { margin-top: 18px; }
.diag__resultado { margin-top: 12px; display: grid; gap: 14px; }
.diag__resultado[hidden] { display: none; }
.diag__resultado h2 { font-size: var(--t-h3); }
.diag__razao { display: grid; gap: 8px; }
.diag__razao li { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-radius: 12px; background: var(--nevoa); font-weight: 600; }
.carimbo { font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.08em; padding: 7px 9px; border-radius: 6px; background: var(--azul-marca); color: var(--marinho); }
.diag__adiantar { display: grid; gap: 12px; justify-items: start; margin-top: 8px; }
.diag__lado { border-radius: var(--raio-g); padding: 28px; background: linear-gradient(160deg, #17426A, #0A1F35); color: var(--creme); display: grid; gap: 14px; justify-items: start; }
.diag__lado-rotulo { font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--azul-claro); }
.diag__passos { display: grid; gap: 10px; width: 100%; }
.diag__passos li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--fio-escuro); }
.diag__passos .mono { font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--ouro-claro); }
.diag__lado-conversar { margin-top: 8px; font-weight: 600; }
.diag__google { color: #fff; font-size: 0.9375rem; }
@media (min-width: 1024px) { .diag__grade { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); gap: 24px; } }

@media (max-width: 599px) { .diag__lente { padding: 20px 16px; } .diag__opcao { padding: 12px 12px; gap: 10px; } }

/* erp.css */
/* ---------- Implantação de ERP · v4 (JM, 07/10): sequência do Credix (pin 1125829606882474890) ----------
   Céu marinho com nuvens → o dashboard sobe → cresce até ocupar a tela e o fundo vira marfim → desliza para a direita
   em perspectiva com o texto à esquerda → sai deitando para cima. O JS (site.js › ex) faz a pose a cada quadro com
   amortecimento; aqui ficam o desenho, a entrada e o estado parado (sem JS ou com movimento reduzido). */
.ex { position: relative; z-index: 2; background: #06121F; color: #F7F3EA; }
.ex__sentinela { position: absolute; left: 0; top: 0; width: 1px; height: 100svh; pointer-events: none; }
.ex__palco { position: relative; perspective: 1900px; perspective-origin: 50% 46%; overflow-x: clip; }
.ex__fundo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #0C2338 0%, #0A1D30 60%, #08192A 100%); }
/* fundo do ERP (JM, 07/10, rodada 3): sem malha. Duas luzes amplas e muito desfocadas, azul da marca e um ouro discreto,
   que se deslocam devagar (60 a 80 s) sobre o marinho; granulação fina por cima e vinheta nas bordas. Sem feixe, sem brilho */
.ex__aura { position: absolute; width: 85vmax; height: 85vmax; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.ex__aura--a { left: -25vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(88, 145, 175, 0.55), rgba(88, 145, 175, 0)); }
.ex__aura--b { right: -30vmax; bottom: -40vmax; background: radial-gradient(closest-side, rgba(216, 172, 82, 0.28), rgba(216, 172, 82, 0)); }
.anima .ex__aura--a { animation: ex-aura-a 70s ease-in-out infinite alternate; }
.anima .ex__aura--b { animation: ex-aura-b 84s ease-in-out infinite alternate; }
@keyframes ex-aura-a { to { transform: translate(22vmax, 14vmax) scale(1.15); } }
@keyframes ex-aura-b { to { transform: translate(-18vmax, -12vmax) scale(0.92); } }
.ex__grao { position: absolute; inset: 0; background-image: var(--grao); opacity: 0.07; mix-blend-mode: overlay; }
.ex__grao--marfim { opacity: 0.06; mix-blend-mode: multiply; }
.ex__fundo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(6, 18, 31, 0) 55%, rgba(6, 18, 31, 0.55) 100%); }
@media (prefers-reduced-motion: reduce) { .ex__aura { animation: none !important; } }
/* luz fria atrás do dashboard (onde ele nasce), para a cena ter profundidade sem degradê cortado */
.ex__luz { position: absolute; left: 50%; top: 82%; width: 110vw; height: 80vh; translate: -50% -50%; background: radial-gradient(closest-side, rgba(88, 145, 175, 0.22), rgba(88, 145, 175, 0) 100%); }
/* o marfim sobe como uma folha com a onda do site na borda (a mesma curva das separações); o JS dá o avanço em --m */
.ex__marfim { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 100%; --m: 0; background: #F1E5CC; translate: 0 calc((1 - var(--m)) * (100% + 120px)); }
.ex__onda { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(60px, 9vw, 130px); fill: #F1E5CC; }
.ex:not(.ex--vivo) .ex__marfim { display: none; }

/* texto do hero, centralizado como no vídeo */
.ex__hero { position: relative; z-index: 3; display: grid; justify-items: center; gap: clamp(14px, 2.2svh, 22px); width: min(100% - 2 * var(--margem), 980px); margin: 0 auto; text-align: center; }
.ex__migalha { display: flex; gap: 8px; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #C9D8E4; }
.ex__migalha a { color: inherit; text-decoration: none; background: linear-gradient(#D8AC52, #D8AC52) 0 100% / 100% 0 no-repeat; transition: background-size 280ms var(--curva), color 280ms; }
@media (hover: hover) and (pointer: fine) { .ex__migalha a:hover { background-size: 100% 100%; color: #0B2035; } }
.ex__titulo { margin: 0; font: 600 clamp(2.3rem, 0.7rem + 4vw, 5rem)/1.02 var(--f-texto); letter-spacing: -0.05em; color: #F7F3EA; }
.ex__titulo > span[aria-hidden] { display: grid; justify-items: center; }
.ex__l { display: block; overflow: clip; overflow-clip-margin: 0.25em; padding-block: 0.04em; white-space: nowrap; }
.ex__m { display: inline-block; }
.ex__apoio { max-width: 52ch; margin: 0; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.5; color: #C9D8E4; text-wrap: pretty; }
.ex__acoes { margin-top: 4px; }

/* texto que entra à esquerda quando o dashboard vai para a direita */
.ex__lado { position: relative; z-index: 3; display: grid; gap: 16px; color: #0B2035; }
.ex__rot { margin: 0; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #5E450D; }
.ex__lado h2 { margin: 0; font: 400 clamp(2rem, 1.2rem + 2vw, 3.1rem)/1.06 var(--f-titulo); letter-spacing: -0.02em; color: #0B2035; text-wrap: balance; }
.ex__lado p:last-child { margin: 0; max-width: 40ch; font-size: var(--t-corpo); line-height: 1.55; color: #3B4753; }
.ex__lado::after { content: ''; order: 2; width: 100%; height: 1px; background: rgba(11, 32, 53, 0.14); }
.ex__lado h2 { order: 1; } .ex__lado p:last-child { order: 3; } .ex__rot { order: 0; }

/* o dashboard: 1200 × 740 em pixels de desenho, numa moldura de vidro de 12 px (1224 × 764); a escala vem do JS */
.ex__cena { position: relative; z-index: 4; }
.ex__vidro { width: 1224px; height: 764px; padding: 12px; border-radius: 30px; transform-origin: 0 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 50px 90px -40px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ---------- estado vivo: palco preso e trilho de rolagem ---------- */
.ex--vivo { height: var(--ex-trilho, 235svh); }
.ex--vivo .ex__palco { position: sticky; top: 0; height: 100svh; }
.ex--vivo .ex__hero { position: absolute; left: 50%; top: calc(var(--altura-topo) + clamp(18px, 5svh, 56px)); translate: -50% 0; will-change: transform, opacity; }
.ex--vivo .ex__lado { position: absolute; left: max(var(--margem), calc(50% - 640px)); top: 50%; width: min(36vw, 470px); translate: 0 -50%; opacity: 0; }
.ex--vivo .ex__cena { position: absolute; left: 0; top: 0; width: 1224px; height: 764px; transform-origin: 50% 50%; }
.ex--vivo .ex__vidro { transform: none; }
.ex--vivo + .tom-marfim { position: relative; z-index: 1; }

/* entrada: linhas sobem do recorte, depois apoio e botão; o dashboard nasce de baixo, desfocado */
.anima .ex__m { translate: 0 110%; animation: ht-sobe 1100ms cubic-bezier(.16, 1, .3, 1) 140ms forwards; }
.anima .ex__l:nth-child(2) .ex__m { animation-delay: 250ms; }
.anima .ex__l:nth-child(3) .ex__m { animation-delay: 360ms; }
.anima :is(.ex__migalha, .ex__apoio, .ex__acoes) { opacity: 0; translate: 0 24px; animation: ht-entra 900ms cubic-bezier(.16, 1, .3, 1) 520ms forwards; }
.anima .ex__migalha { animation-delay: 60ms; }
.anima .ex__acoes { animation-delay: 640ms; }
.anima .ex__sobe { opacity: 0; translate: 0 160px; filter: blur(10px); animation: ex-sobe 900ms cubic-bezier(.16, 1, .3, 1) 120ms forwards; }
@keyframes ex-sobe { 60% { filter: blur(0); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.anima .ex .hpl-pc { scale: 0.6; opacity: 0; transition: scale 700ms cubic-bezier(.3, 1.4, .5, 1), opacity 300ms linear; }
.anima .ex.ex--pecas .hpl-pc { scale: 1; opacity: 1; }
.anima .ex.ex--pecas .ex__l:nth-child(2) .hpl-pc { transition-delay: 180ms; }
.anima .ex.ex--pecas .ex__l:nth-child(3) .hpl-pc { transition-delay: 360ms; }

/* ---------- estado parado (sem JS, movimento reduzido): hero, dashboard e texto empilhados ---------- */
.ex--parado .ex__palco, .ex:not(.ex--vivo) .ex__palco { padding: calc(var(--altura-topo) + 40px) 0 72px; }
.ex:not(.ex--vivo) .ex__cena { width: min(100% - 2 * var(--margem), 1160px); margin: 48px auto 0; overflow: hidden; border-radius: 28px; }
.ex:not(.ex--vivo) .ex__lado { width: min(100% - 2 * var(--margem), 760px); margin: 56px auto 0; color: #F7F3EA; }
.ex:not(.ex--vivo) .ex__lado h2 { color: #F7F3EA; } .ex:not(.ex--vivo) .ex__lado p:last-child { color: #C9D8E4; } .ex:not(.ex--vivo) .ex__rot { color: #E8CE93; }

/* ---------- o sistema (ed) ---------- */
.ed { --e-tinta: #0B2035; --e-cinza: #5B6875; --e-fio: #E8E2D6; --e-papel: #FFFFFF; --e-fundo: #F6F2EA; --e-azul: #5891AF; --e-ouro: #C8962F;
  display: grid; grid-template-columns: 216px 1fr; width: 1200px; height: 740px; border-radius: 20px; overflow: hidden; background: var(--e-fundo);
  font-family: var(--f-texto); color: var(--e-tinta); font-variant-numeric: tabular-nums; text-align: left; }
.ed p, .ed ul, .ed ol { margin: 0; padding: 0; list-style: none; }
.ed-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ed__menu { display: flex; flex-direction: column; gap: 26px; padding: 24px 16px 20px; background: linear-gradient(180deg, #0E2740 0%, #0B2035 100%); color: #C9D8E4; }
.ed__marca { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.ed__elos { width: 34px; height: auto; }
.ed__marca span { display: grid; font: 600 15px/1.2 var(--f-texto); color: #FFFFFF; letter-spacing: -0.01em; }
.ed__marca small { font: 500 11px/1.3 var(--f-texto); color: #9FB4C6; letter-spacing: 0; }
.ed__nav { display: grid; gap: 4px; }
.ed__nav li { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; font: 500 14px/1 var(--f-texto); transition: background-color 400ms, color 400ms; }
.ed__nav li.on { background: rgba(255, 255, 255, 0.10); color: #FFFFFF; box-shadow: inset 2px 0 0 #D8AC52; }
.ed__nav li.on .ed-i { color: #E8CE93; }
.ed__pe { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 14px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); font: 600 13px/1.25 var(--f-texto); color: #FFFFFF; }
.ed__pe span { display: grid; } .ed__pe small { font: 500 11px/1.3 var(--f-texto); color: #9FB4C6; }

/* corpo do sistema (JM, rodada 3): cara de software de verdade. Faixa única de indicadores com divisórias, painéis com
   fio de 1 px e raio pequeno, tabelas com cabeçalho e situação em texto (sem pílulas nem cartões soltos) */
.ed__corpo { display: grid; grid-template-rows: auto auto 1fr; gap: 16px; padding: 18px 22px 22px; min-width: 0; }
.ed__topo { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--e-fio); }
.ed__trilha { display: flex; align-items: center; gap: 8px; margin-right: auto !important; font: 500 13px/1 var(--f-texto); color: var(--e-cinza); }
.ed__trilha span { color: #B9B2A3; } .ed__trilha b { font: 600 17px/1 var(--f-texto); color: var(--e-tinta); letter-spacing: -0.01em; }
.ed__busca { display: flex; align-items: center; gap: 8px; width: 300px; height: 34px; padding: 0 8px 0 12px; border-radius: 8px; background: var(--e-papel); box-shadow: inset 0 0 0 1px var(--e-fio); font: 500 12px/1 var(--f-texto); color: #8A949E; }
.ed__busca .ed-i { width: 14px; height: 14px; }
.ed__busca kbd { margin-left: auto; padding: 3px 6px; border-radius: 5px; background: #F3EFE6; font: 600 10px/1 var(--f-texto); color: #8A949E; }
.ed__periodo { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; border-radius: 8px; background: var(--e-papel); box-shadow: inset 0 0 0 1px var(--e-fio); font: 600 12px/1 var(--f-texto); color: var(--e-tinta); }
.ed__periodo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ed__kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 10px; background: var(--e-papel); box-shadow: inset 0 0 0 1px var(--e-fio); }
.ed__kpis > div { display: grid; gap: 5px; padding: 14px 18px; }
.ed__kpis > div + div { border-left: 1px solid var(--e-fio); }
.ed__kpis p { font: 600 10.5px/1 var(--f-texto); letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-cinza); }
.ed__kpis b { font: 600 24px/1.1 var(--f-texto); letter-spacing: -0.03em; color: var(--e-tinta); }
.ed__kpis span { font: 500 11.5px/1.2 var(--f-texto); color: var(--e-cinza); }
.ed__alta { font-style: normal; font-weight: 600; color: #2F7A52; }
.ed__grade { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 14px; align-content: start; min-height: 0; }
.ed__painel { display: grid; align-content: start; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--e-papel); box-shadow: inset 0 0 0 1px var(--e-fio); min-width: 0; }
.ed__painel header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ed__painel header > p:first-child { font: 600 13.5px/1.2 var(--f-texto); color: var(--e-tinta); }
.ed__nota { font: 500 11px/1 var(--f-texto); color: var(--e-cinza); }
.ed__leg { display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--f-texto); color: var(--e-cinza); }
.ed__leg i { width: 8px; height: 8px; border-radius: 2px; margin-left: 8px; }
.ed__leg .e { background: var(--e-azul); } .ed__leg .s { background: var(--e-tinta); } .ed__leg .p { height: 2px; border-radius: 1px; background: var(--e-ouro); }
.ed__resumo { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding-top: 10px; border-top: 1px solid #F0EBE1; }
.ed__resumo dt { font: 500 11px/1 var(--f-texto); color: var(--e-cinza); }
.ed__resumo dd { margin: 4px 0 0; font: 600 15px/1 var(--f-texto); color: var(--e-tinta); }
.ed__sobra { color: #2F7A52 !important; }
.ed-g { width: 100%; height: auto; overflow: visible; }
.ed-g text { font: 500 11px var(--f-texto); fill: #7C8792; text-anchor: middle; }
.ed-g .ed-g__eixo { text-anchor: start; font-size: 10px; fill: #9AA3AC; }
.ed-g__grade { stroke: #EFEAE0; stroke-width: 1; }
.ed-g__faixa { fill: #FBF6EA; }
.ed-g__e { fill: var(--e-azul); } .ed-g__s { fill: var(--e-tinta); }
.ed-g__proj { fill: none; stroke: var(--e-ouro); stroke-width: 2.4; stroke-dasharray: 1; stroke-linecap: round; }
.ed-g__proj-area { fill: rgba(200, 150, 47, 0.10); }
.ed-g__ponto { fill: #FFFFFF; stroke: var(--e-ouro); stroke-width: 2.2; }
.ed__ciclo { grid-row: span 2; }
.ed__ciclo ol { display: grid; margin: 0; padding: 0; list-style: none; }
.ed__ciclo li { display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #F0EBE1; }
.ed__ciclo time { font: 600 11.5px/1 var(--f-texto); color: var(--e-cinza); font-variant-numeric: tabular-nums; }
.ed__passo { display: grid; gap: 3px; } .ed__passo b { font: 600 13px/1.2 var(--f-texto); color: var(--e-tinta); } .ed__passo small { font: 500 11px/1.2 var(--f-texto); color: var(--e-cinza); }
.ed__ok { width: 16px; height: 16px; color: #2F7A52; stroke-width: 2.4; }
.ed__contas table { width: 100%; border-collapse: collapse; font: 500 12px/1.2 var(--f-texto); color: var(--e-tinta); }
.ed__contas th { padding: 0 0 8px; font: 600 10px/1 var(--f-texto); letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-cinza); text-align: left; border-bottom: 1px solid var(--e-fio); }
.ed__contas td { padding: 9px 0; border-bottom: 1px solid #F0EBE1; }
.ed__contas tr:last-child td { border-bottom: 0; }
.ed__contas th:nth-child(4), .ed__contas td:nth-child(4) { text-align: right; padding-right: 16px; font-variant-numeric: tabular-nums; }
.ed__contas td:nth-child(4) { font-weight: 600; }
.ed__contas td:last-child { color: #2F7A52; font-weight: 600; white-space: nowrap; }
.ed__contas td:last-child .ed-i { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; stroke-width: 2.4; }

/* o sistema ganha vida depois que entra (uma vez): barras crescem, a projeção se desenha, o pedido anda pelos módulos */
.anima .ed-g__e, .anima .ed-g__s { transform-box: fill-box; transform-origin: 50% 100%; scale: 1 0; transition: scale 900ms cubic-bezier(.2, .8, .2, 1); }
.anima .ed-g__proj { stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms cubic-bezier(.4, 0, .2, 1) 700ms; }
.anima .ed-g__proj-area, .anima .ed-g__ponto { opacity: 0; transition: opacity 700ms linear 1300ms; }
.anima .ed__ok { opacity: 0; scale: 0.4; transition: opacity 300ms linear, scale 500ms cubic-bezier(.3, 1.5, .5, 1); }
.anima .ed__ciclo li { opacity: 0.35; transition: opacity 400ms; } .anima .ed--vivo .ed__ciclo li { opacity: 1; }
.anima .ed--vivo :is(.ed-g__e, .ed-g__s) { scale: 1 1; }
.anima .ed--vivo .ed-g__proj { stroke-dashoffset: 0; }
.anima .ed--vivo :is(.ed-g__proj-area, .ed-g__ponto) { opacity: 1; }
.anima .ed--vivo .ed__ok { opacity: 1; scale: 1; }
.ed-g__e:nth-of-type(2), .ed-g__s:nth-of-type(2) { transition-delay: 80ms !important; }
.anima .ed--vivo .ed__ciclo li:nth-child(1), .anima .ed--vivo .ed__ciclo li:nth-child(1) .ed__ok { transition-delay: 300ms; }
.anima .ed--vivo .ed__ciclo li:nth-child(2), .anima .ed--vivo .ed__ciclo li:nth-child(2) .ed__ok { transition-delay: 650ms; }
.anima .ed--vivo .ed__ciclo li:nth-child(3), .anima .ed--vivo .ed__ciclo li:nth-child(3) .ed__ok { transition-delay: 1000ms; }
.anima .ed--vivo .ed__ciclo li:nth-child(4), .anima .ed--vivo .ed__ciclo li:nth-child(4) .ed__ok { transition-delay: 1350ms; }
.anima .ed--vivo .ed__ciclo li:nth-child(5), .anima .ed--vivo .ed__ciclo li:nth-child(5) .ed__ok { transition-delay: 1700ms; }

/* ---------- módulos que conversam: a linha se preenche e cada módulo mostra o que aconteceu com o pedido ---------- */
.ee { padding-top: clamp(48px, 6vw, 96px); }
.ef__cab { display: grid; justify-items: center; gap: 14px; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.ef__cab h2, .eg__lado h2 { margin: 0; font: 400 var(--t-h2)/1.06 var(--f-titulo); letter-spacing: -0.02em; text-wrap: balance; color: #0B2035; }
.ef__cab p, .eg__lado > p { margin: 0; max-width: 52ch; font-size: var(--t-corpo); line-height: 1.55; color: #3B4753; }
.ef__trilho { --ef-p: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ef__linha { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 36px; height: 2px; border-radius: 2px; background: rgba(11, 32, 53, 0.12); }
.ef__linha i { position: absolute; inset: 0; border-radius: inherit; background: #C8962F; transform-origin: 0 50%; scale: var(--ef-p) 1; }
.ef__mod { position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; }
.ef__no { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: #FBF8F2; color: #6B7783;
  box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.12), 0 12px 24px -18px rgba(11, 32, 53, 0.5); transition: background-color 500ms, color 500ms, box-shadow 500ms; }
.ef__no .ed-i { width: 28px; height: 28px; stroke-width: 1.6; }
.ef__ok { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: #D8AC52; fill: none; stroke: #0B2035; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; scale: 0; transition: scale 450ms cubic-bezier(.3, 1.6, .5, 1) 150ms; }
.ef__mod h3 { margin: 6px 0 0; font: 400 clamp(1.2rem, 1rem + 0.5vw, 1.5rem)/1.1 var(--f-titulo); color: #0B2035; }
/* o que aconteceu entra no lugar do "aguardando", num recorte de altura fixa (uma linha sobe, a outra entra) */
.ef__ex { display: grid; overflow: hidden; height: 2.9em; margin: 0; font-size: 0.94rem; line-height: 1.45; }
.ef__ex span { grid-area: 1 / 1; transition: translate 600ms cubic-bezier(.16, 1, .3, 1), opacity 400ms; }
.ef__ex-a { color: #8A949E; } .ef__ex-b { color: #26323E; translate: 0 100%; opacity: 0; }
.ef__mod.on .ef__no { background: #0B2035; color: #E8CE93; box-shadow: 0 16px 28px -16px rgba(11, 32, 53, 0.8); }
.ef__mod.on .ef__ok { scale: 1; }
.ef__mod.on .ef__ex-a { translate: 0 -100%; opacity: 0; }
.ef__mod.on .ef__ex-b { translate: 0 0; opacity: 1; }

/* ---------- entregas por momento: título preso à esquerda, três fases à direita com o fio que se preenche ---------- */
.eg { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 110px); margin-top: clamp(80px, 9vw, 140px); /* v42 (JM, 12/10): sem a linha divisória fina (e sem o respiro que ela pedia) */ }
.eg__lado { position: sticky; top: calc(var(--altura-topo) + 48px); align-self: start; display: grid; justify-items: start; gap: 18px; }
.eg__fases { position: relative; display: grid; gap: clamp(36px, 4vw, 56px); padding-left: 34px; }
.eg__fio { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: rgba(11, 32, 53, 0.12); }
.eg__fio i { position: absolute; inset: 0; border-radius: inherit; background: #C8962F; transform-origin: 50% 0; scale: 1 var(--eg-p, 1); }
.eg__fase { position: relative; display: grid; gap: 16px; }
.eg__quando { position: relative; margin: 0; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #5E450D; }
.eg__quando::before { content: ''; position: absolute; left: -40px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #F1E5CC; box-shadow: inset 0 0 0 2px #C8962F; }
.eg__fase ul { display: grid; margin: 0; padding: 0; list-style: none; border-radius: 22px; background: #FBF8F2; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.08), 0 20px 40px -32px rgba(11, 32, 53, 0.5); }
.eg__fase li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 18px; padding: 20px 24px; }
.eg__fase li + li { border-top: 1px solid rgba(11, 32, 53, 0.08); }
.eg__obj { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(160deg, #FFFFFF, #EFE6D4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.eg__obj img { width: 54px; height: 54px; object-fit: contain; }
.eg__fase h3 { margin: 0; font: 600 1.15rem/1.25 var(--f-texto); letter-spacing: -0.015em; color: #0B2035; }
.eg__fase p { margin: 4px 0 0; max-width: 46ch; font-size: 0.98rem; line-height: 1.5; color: #3B4753; }
.anima .ee [data-ee-i] { opacity: 0; translate: 0 22px; transition: opacity 600ms linear, translate 900ms cubic-bezier(.16, 1, .3, 1); }
.anima .ee [data-ee-i].vista { opacity: 1; translate: 0 0; }

/* ---------- tem sistema ou vai trocar: a placa no meio da bifurcação ---------- */
.ec__t { margin: 0 auto clamp(40px, 5vw, 72px); max-width: 18ch; font: 400 var(--t-h2)/1.08 var(--f-titulo); letter-spacing: -0.02em; text-align: center; text-wrap: balance; color: #F7F3EA; }
.ec__palco { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 20vw, 280px) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2vw, 32px); }
.ec__lado { display: grid; align-content: start; justify-items: start; gap: 16px; padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.ec__lado--troca { justify-items: start; }
.ec__rot { margin: 0; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.ec__lado h3 { margin: 0; font: 400 clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem)/1.1 var(--f-titulo); letter-spacing: -0.015em; color: #FFFFFF; }
.ec__lado ol { display: grid; gap: 12px; margin: 4px 0 8px; padding: 0; list-style: none; }
.ec__lado li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.5; color: #C9D8E4; }
.ec__lado li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 14px; height: 2px; border-radius: 2px; background: #D8AC52; }
.ec__placa { display: grid; place-items: center; }
.ec__placa img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }
.anima .ec .ec__placa img { opacity: 0; scale: 0.82; rotate: -6deg; transition: opacity 600ms linear, scale 1100ms cubic-bezier(.3, 1.3, .5, 1), rotate 1100ms cubic-bezier(.3, 1.3, .5, 1); }
.anima .ec .ec__lado { opacity: 0; translate: -48px 0; transition: opacity 700ms linear 250ms, translate 1100ms cubic-bezier(.16, 1, .3, 1) 250ms; }
.anima .ec .ec__lado--troca { translate: 48px 0; }
.anima .ec.vista .ec__placa img { opacity: 1; scale: 1; rotate: 0deg; }
.anima .ec.vista .ec__lado { opacity: 1; translate: 0 0; }

@media (max-width: 899px) {
  .ex__titulo { font-size: clamp(1.85rem, 0.3rem + 7.2vw, 3.4rem); }
  .ex--vivo .ex__lado { left: var(--margem); right: var(--margem); width: auto; top: auto; bottom: calc(env(safe-area-inset-bottom) + 84px); margin: 0; }
  .ex--vivo .ex__lado h2 { font-size: clamp(1.7rem, 1.1rem + 3vw, 2.3rem); }
  .ex__lado p:last-child { font-size: 1rem; }
  .ef__trilho { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ef__linha { left: 35px; right: auto; top: 36px; bottom: 36px; width: 2px; height: auto; }
  .ef__linha i { transform-origin: 50% 0; scale: 1 var(--ef-p); }
  .ef__mod { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; column-gap: 18px; row-gap: 2px; text-align: left; }
  .ef__no { grid-row: 1 / 3; }
  .ef__mod h3 { margin: 0; align-self: end; }
  .ef__ex { height: 1.45em; }
  .eg { grid-template-columns: minmax(0, 1fr); }
  .eg__lado { position: static; }
  .eg__fases { padding-left: 26px; }
  .eg__quando::before { left: -32px; }
  .eg__fase li { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px 18px; }
  .eg__obj { width: 52px; height: 52px; } .eg__obj img { width: 44px; height: 44px; }
  .ec__palco { grid-template-columns: minmax(0, 1fr); }
  .ec__placa { order: -1; width: 180px; margin: 0 auto -8px; }
}
.ec + .pv-sec { padding-top: 0; }

/* texto à esquerda do dashboard (JM, 07/10): no lugar do parágrafo longo, as fontes soltas da empresa (planilha, caderno,
   emissor, extrato) entram desalinhadas e se juntam num sistema só quando o texto aparece (classe ex--junta, do JS) */
.ex__junta { display: none; }
@media (min-width: 900px) {
  .ex__junta { order: 3; display: grid; grid-template-columns: auto 64px auto; align-items: center; margin: 6px 0 2px; }
  .ex__lado p:last-child { order: 4; max-width: 34ch; font-size: 1.1rem; }
  .ex__fontes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .ex__fontes li { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 12px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 10px 22px -16px rgba(11, 32, 53, 0.5), inset 0 0 0 1px rgba(11, 32, 53, 0.08);
    font: 600 0.9rem/1 var(--f-texto); color: #0B2035; white-space: nowrap; transition: transform 900ms cubic-bezier(.22, 1, .36, 1), opacity 500ms; }
  .ex__fontes .ed-i { width: 18px; height: 18px; color: #8C7A52; }
  .ex__fontes li:nth-child(1) { transform: translate(-26px, -6px) rotate(-5deg); } .ex__fontes li:nth-child(2) { transform: translate(18px, 4px) rotate(4deg); }
  .ex__fontes li:nth-child(3) { transform: translate(-12px, 2px) rotate(-3deg); } .ex__fontes li:nth-child(4) { transform: translate(24px, -4px) rotate(6deg); }
  .ex__fios { width: 64px; height: 212px; overflow: visible; }
  .ex__fios path { fill: none; stroke: #C8962F; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms cubic-bezier(.4, 0, .2, 1); }
  .ex__um { display: grid; justify-items: start; gap: 4px; margin: 0; padding: 16px 18px; border-radius: 16px; background: #0B2035; color: #FFFFFF; opacity: 0; transform: scale(0.85); transition: opacity 500ms, transform 700ms cubic-bezier(.3, 1.4, .5, 1); }
  .ex__um img { width: 38px; height: 38px; object-fit: contain; margin-bottom: 4px; }
  .ex__lado .ex__um b { font: 500 1.3rem/1.1 var(--f-titulo); color: #FFFFFF; } .ex__lado .ex__um small { font: 500 0.8rem/1.3 var(--f-texto); color: #E8CE93; max-width: 15ch; }
  .ex--junta .ex__fontes li { transform: none; }
  .ex--junta .ex__fios path { stroke-dashoffset: 0; transition-delay: 450ms; }
  .ex--junta .ex__fios path:nth-child(2) { transition-delay: 520ms; } .ex--junta .ex__fios path:nth-child(3) { transition-delay: 590ms; } .ex--junta .ex__fios path:nth-child(4) { transition-delay: 660ms; }
  .ex--junta .ex__um { opacity: 1; transform: none; transition-delay: 950ms; }
  .ex:not(.ex--vivo) .ex__fontes li, .ex:not(.ex--vivo) .ex__fios path, .ex:not(.ex--vivo) .ex__um { transform: none; stroke-dashoffset: 0; opacity: 1; }
  .ex:not(.ex--vivo) .ex__fontes li { color: #0B2035; }
}

/* monograma da marca no fundo do hero (JM, 07/10), no marinho e na folha de marfim que sobe */
.ex__fundo .monograma { z-index: 1; }
.ex__marfim .monograma { z-index: 1; }
.ex__marfim .ex__onda, .ex__marfim .ex__grao { z-index: 2; }

/* fila.css */
/* ---------- Como funciona · cartões em abas com topo ondulado (JM, 27/09: referência "Nextdot") ----------
   A seção fica presa na tela enquanto a rolagem sobe as quatro fases, uma a uma, até a pilha completa; a
   manchete de cada fase entra quando o cartão dela chega (.on). O mouse levanta o cartão e ele passa por cima
   dos outros. O clique abre o painel da fase (~80% da tela). Sem animação: a pilha já aparece completa.
   A fila de vidro anterior está em _antigo/como-fila-v9.6/. */
.cf2 { --aba: 112px; position: relative; color: #FFFFFF; background: radial-gradient(55% 55% at 12% 30%, rgba(46, 111, 163, 0.28), transparent 70%), #0B2035; }
.anima .cf2.cf2--vivo { height: calc(100svh + 4 * 42svh); }
.cf2__palco { position: relative; display: flex; flex-direction: column; min-height: calc(4 * var(--aba) + 620px); overflow: hidden;
  padding-top: calc(max(var(--altura-topo), var(--onda-h)) + 20px); }
.cf2--vivo .cf2__palco { position: sticky; top: 0; height: 100svh; min-height: 0; }
.cf2__cabeca { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; text-align: center; }
.cf2__cabeca .rotulo { color: #D5E1EB; }
.cf2 h2 { max-width: 22ch; font-size: clamp(1.9rem, 1.1rem + 2vw, 3rem); color: #FFFFFF; text-wrap: balance; }
.cf2-pal { display: inline-block; transition: opacity 520ms linear, filter 620ms cubic-bezier(.2, .8, .2, 1), color 700ms linear; }
.anima .cf2:not(.cf2--visto) .cf2-pal { opacity: 0; filter: blur(8px); color: #6F8499; }
.cf2-pal[data-i="1"] { transition-delay: 80ms; } .cf2-pal[data-i="2"] { transition-delay: 160ms; } .cf2-pal[data-i="3"] { transition-delay: 240ms; }
.cf2-pal[data-i="4"] { transition-delay: 320ms; } .cf2-pal[data-i="5"] { transition-delay: 400ms; } .cf2-pal[data-i="6"] { transition-delay: 480ms; }
.cf2-pal[data-i="7"] { transition-delay: 560ms; } .cf2-pal[data-i="8"] { transition-delay: 640ms; }

/* a pilha: cada fase é uma aba um pouco mais larga e mais baixa que a anterior; o pé passa da tela */
.cf2__pilha { position: relative; z-index: 3; flex: 1; margin: clamp(22px, 3svh, 36px) 0 0; padding: 0; list-style: none; }
.cf2-card { --k: 0; --sobe: 0; --ergue: 0px; --zoom: 1; --cor: #A9CBE0; --tinta: #0B2035; --tinta-2: #26323E;
  position: absolute; left: 50%; top: calc(var(--k) * var(--aba)); z-index: calc(var(--k) + 1);
  width: min(calc(72% + var(--k) * 4%), calc(1000px + var(--k) * 44px)); height: calc(100% - var(--k) * var(--aba) + 80px);
  translate: -50% calc(var(--sobe) * 105svh); transform: translateY(calc(-1 * var(--ergue))) scale(var(--zoom)); transform-origin: 50% 0;
  padding: 50px clamp(22px, 3vw, 44px) 0; border-radius: 30px 30px 0 0; background: var(--cor); color: var(--tinta);
  /* topo ondulado: a mesma curva das ondas do site */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 0 480 0 720 38S1200 84 1440 34V90H0Z'/%3E%3C/svg%3E") 0 0 / 100% 42px no-repeat, linear-gradient(#000 0 0) 0 40px / 100% calc(100% - 40px) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 0 480 0 720 38S1200 84 1440 34V90H0Z'/%3E%3C/svg%3E") 0 0 / 100% 42px no-repeat, linear-gradient(#000 0 0) 0 40px / 100% calc(100% - 40px) no-repeat;
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1); cursor: pointer; }
.cf2-card:nth-child(1) { --k: 0; --cor: #A9CBE0; }
.cf2-card:nth-child(2) { --k: 1; --cor: #D8AC52; }
.cf2-card:nth-child(3) { --k: 2; --cor: #1F5A85; --tinta: #FFFFFF; --tinta-2: #DCE6EE; }
.cf2-card:nth-child(4) { --k: 3; --cor: #F7F2E8; }
.cf2-card:nth-child(2n) .cf2-card__topo { flex-direction: row; }
/* o mouse levanta o cartão, aproxima um pouco e ele passa por cima dos outros */
@media (hover: hover) { .cf2-card:hover { --ergue: 30px; --zoom: 1.02; z-index: 10; } }
/* o foco do teclado fica só no contorno do botão: levantar o cartão deixava um deles preso por cima da pilha */

.cf2-card__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; height: calc(var(--aba) - 50px); }
.cf2-card__tit { display: flex; align-items: baseline; gap: 14px; font: 400 clamp(2rem, 1.3rem + 1.8vw, 3rem)/1 var(--f-titulo); letter-spacing: -0.02em; color: var(--tinta); }
.cf2-card__num { font: 600 0.8125rem/1 var(--f-mono); letter-spacing: 0.1em; opacity: 0.7; }
.cf2-card__nome { display: inline-block; transition: opacity 500ms linear, translate 700ms cubic-bezier(.22, 1, .36, 1), filter 600ms linear; }
.anima .cf2--vivo .cf2-card:not(.on) .cf2-card__nome { opacity: 0; translate: 0 18px; filter: blur(6px); }
.cf2-card__quando { display: grid; justify-items: end; gap: 2px; padding-top: 6px; text-align: right; font-size: 0.875rem; color: var(--tinta-2); }
.cf2-card__quando b { font: 600 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta); }

.cf2-card__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 44px); padding-top: 18px; }
.cf2-card__txt { display: grid; align-content: start; justify-items: start; gap: 22px; }
.cf2-card__frase { max-width: 30ch; font: 400 clamp(1.25rem, 1rem + 0.7vw, 1.6rem)/1.3 var(--f-titulo); color: var(--tinta); }
.cf2-card__bt { position: static; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: #0B2035; color: #FFFFFF; font: 600 0.9375rem/1 var(--f-texto); }
.cf2-card__bt svg { width: 18px; height: 18px; }
.cf2-card:nth-child(3) .cf2-card__bt { background: #FFFFFF; color: #0B2035; }

.cf2-card__bt:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.cf2-card__foto { display: block; height: clamp(180px, 30svh, 300px); overflow: hidden; border-radius: 22px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6); }
.cf2-card__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* o painel da fase: cresce do cartão até ~80% da tela */
.cf2__veu { position: fixed; inset: 0; z-index: 90; background: rgba(6, 20, 40, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 420ms linear; }
.cf2--aberto .cf2__veu { opacity: 1; pointer-events: auto; }
.cf2-painel { position: fixed; z-index: 95; top: 50%; left: 50%; width: min(80vw, 1120px); height: min(78svh, 680px); translate: -50% -50%; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 22px clamp(20px, 3vw, 36px) 28px; border-radius: 30px; background: var(--cor, #F7F2E8); color: var(--tinta, #0B2035);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.8);
  transition: top 620ms cubic-bezier(.22, 1, .36, 1), left 620ms cubic-bezier(.22, 1, .36, 1), width 620ms cubic-bezier(.22, 1, .36, 1), height 620ms cubic-bezier(.22, 1, .36, 1), translate 620ms cubic-bezier(.22, 1, .36, 1), border-radius 620ms linear; }
.cf2-painel__volta { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(11, 32, 53, 0.08); color: inherit; font: 600 0.9375rem/1 var(--f-texto); }
.cf2-painel__volta svg { width: 18px; height: 18px; }
.cf2-painel__volta:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.cf2-fase { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); min-height: 0; }
.cf2-fase__foto { display: block; min-height: 0; overflow: hidden; border-radius: 22px; }
.cf2-fase__foto img { width: 100%; height: 100%; object-fit: cover; }
.cf2-fase__txt { display: grid; align-content: center; gap: 12px; min-height: 0; overflow-y: auto; }
.cf2-fase__quando { font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.cf2-fase__tit { font: 400 clamp(2.2rem, 1.4rem + 2vw, 3.4rem)/1 var(--f-titulo); letter-spacing: -0.02em; }
.cf2-fase__tit em { display: block; margin-top: 6px; font-size: 0.5em; font-style: italic; opacity: 0.85; }
.cf2-fase__frase { max-width: 40ch; font-size: 1.0625rem; line-height: 1.55; }
.cf2-fase__rot { margin-top: 8px; font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.cf2-fase__lista { display: grid; margin: 0; padding: 0; list-style: none; }
.cf2-fase__lista li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-block: 11px; border-top: 1px solid rgba(11, 32, 53, 0.14); font-size: 1rem; }
.cf2-fase__ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0B2035; color: #FFFFFF; }
.cf2-fase__ok svg { width: 14px; height: 14px; }
.cf2-quem { padding: 4px 9px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(11, 32, 53, 0.1); }
.cf2-quem--voce { background: #0B2035; color: #F4E2B4; }
.cf2-painel[data-k="2"] .cf2-fase__lista li { border-top-color: rgba(255, 255, 255, 0.2); }
.cf2-painel[data-k="2"] .cf2-fase__ok, .cf2-painel[data-k="2"] .cf2-quem--voce { background: #FFFFFF; color: #0B2035; }
.cf2-painel[data-k="2"] .cf2-quem { background: rgba(255, 255, 255, 0.16); }
.cf2-painel[data-k="2"] .cf2-painel__volta { background: rgba(255, 255, 255, 0.14); }
.cf2-painel .cf2-fase > * { transition: opacity 360ms linear 280ms; }
.cf2-painel--crescendo .cf2-fase > * { opacity: 0; transition-delay: 0ms; }

@media (max-width: 1023px) { .cf2-card { width: calc(86% + var(--k) * 3%); } }
@media (max-width: 767px) {
  .cf2 { --aba: 92px; }
  .cf2-card { width: calc(92% + var(--k) * 2%); padding: 46px 18px 0; }
  .cf2-card__tit { font-size: 1.9rem; }
  .cf2-card__quando { display: none; }
  .cf2-card__corpo { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 26px; }
  .cf2-card__frase { font-size: 1.1875rem; }
  .cf2-card__foto { height: 150px; }
  .cf2-painel { width: 94vw; height: 88svh; }
  .cf2-fase { grid-template-columns: minmax(0, 1fr); grid-template-rows: 170px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .cf2-card, .cf2-painel, .cf2__veu, .cf2-pal, .cf2-card__nome { transition: none; } }

/* ---------- JM, 27/09 (ajuste): cartões maiores e a foto como fundo ----------
   A foto cobre o cartão de borda a borda; a cor da fase fica no topo ondulado (a aba que aparece na pilha) e um véu
   escuro do lado do texto garante a leitura. O botão do cartão não segura mais o destaque depois do clique. */
.cf2 { --aba: clamp(84px, 10.5svh, 120px); }
.cf2-card { width: min(calc(86% + var(--k) * 3%), calc(1200px + var(--k) * 44px)); overflow: hidden; background: #0B2035; color: #FFFFFF; }
.cf2-card__fundo { position: absolute; inset: 0; z-index: 0; display: block; }
.cf2-card__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.cf2-card:nth-child(3) .cf2-card__fundo img { object-position: 50% 58%; }
/* no celular, enquanto não existem as fase-N-m.webp, o recorte vertical vai para onde está o assunto (55% a 90% da largura) */
@media (max-width: 767px) { .cf2-card__fundo img, .cf2-card:nth-child(3) .cf2-card__fundo img { object-position: 74% 50%; } }
.cf2-card__fundo::after { content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cor) 94%, transparent) 0, color-mix(in srgb, var(--cor) 80%, transparent) 64px, color-mix(in srgb, var(--cor) 0%, transparent) 150px),
    linear-gradient(90deg, rgba(8, 22, 38, 0.9) 0%, rgba(8, 22, 38, 0.66) 36%, rgba(8, 22, 38, 0.12) 68%, rgba(8, 22, 38, 0) 100%); }
.cf2-card__topo, .cf2-card__corpo { position: relative; z-index: 1; }
.cf2-card__corpo { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 24px; padding-top: 34px; }
.cf2-card__frase { max-width: 26ch; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); line-height: 1.22; color: #FFFFFF; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.cf2-card__bt, .cf2-card:nth-child(3) .cf2-card__bt { background: #F7F2E8; color: #0B2035; }
.cf2-card__foto { display: none; }
@media (min-width: 1600px) { .cf2-card { width: min(calc(84% + var(--k) * 3%), calc(1300px + var(--k) * 44px)); } }
@media (max-width: 767px) {
  .cf2 { --aba: 96px; }
  .cf2-card { width: calc(94% + var(--k) * 2%); }
  .cf2-card__fundo::after { background:
    linear-gradient(180deg, color-mix(in srgb, var(--cor) 94%, transparent) 0, color-mix(in srgb, var(--cor) 78%, transparent) 54px, color-mix(in srgb, var(--cor) 0%, transparent) 120px),
    linear-gradient(180deg, rgba(8, 22, 38, 0) 30%, rgba(8, 22, 38, 0.82) 62%, rgba(8, 22, 38, 0.92) 100%); }
  .cf2-card__corpo { padding-top: 38svh; gap: 16px; }
  .cf2-card__frase { font-size: 1.3rem; }
}

/* ---------- JM, 27/09 (escolha): cartões no formato "foto editorial", com a mesma subida pela rolagem ----------
   Foto inteira de borda a borda com véu escuro à esquerda, número grande em contorno dourado, título, frase e as
   entregas em etiquetas de vidro (Conex / Você). Sem o topo ondulado e sem a cor da fase por cima da foto. */
.cf2-card { -webkit-mask: none; mask: none; border-radius: 30px 30px 0 0; padding-top: 26px; box-shadow: 0 -24px 50px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.cf2-card__fundo::after { background: linear-gradient(180deg, rgba(8, 22, 38, 0.72) 0, rgba(8, 22, 38, 0.3) 120px, rgba(8, 22, 38, 0) 220px),
  linear-gradient(90deg, rgba(8, 22, 38, 0.9) 0%, rgba(8, 22, 38, 0.55) 45%, rgba(8, 22, 38, 0.1) 75%, rgba(8, 22, 38, 0) 100%); }
.cf2-card__topo { height: calc(var(--aba) - 26px); align-items: center; }
.cf2-card__tit { gap: 18px; align-items: center; color: #FFFFFF; font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.8rem); }
.cf2-card__num { font: 400 clamp(2.6rem, 1.6rem + 2.4vw, 4rem)/1 var(--f-titulo); letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1.5px rgba(232, 206, 147, 0.9); opacity: 1; }
.cf2-card__quando { color: #DCE6EE; } .cf2-card__quando b { color: #E8CE93; }
.cf2-card__frase { color: #FFFFFF; }
.cf2-card__chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; }
.cf2-card__chips span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; font-size: 0.875rem; color: #F4F7FA;
  background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.cf2-card__chips b { padding: 2px 7px; border-radius: 6px; font: 700 0.625rem/1.5 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.cf2-card__chips b.v { background: #D8AC52; color: #0B2035; }
.cf2-card__corpo { gap: 18px; padding-top: 22px; }
.cf2-card__bt, .cf2-card:nth-child(3) .cf2-card__bt { background: #F7F2E8; color: #0B2035; }
@media (max-width: 767px) {
  .cf2-card__num { font-size: 2.2rem; }
  .cf2-card__chips span { font-size: 0.8125rem; }
  .cf2-card__chips span:nth-child(n + 3) { display: none; }
  .cf2-card__fundo::after { background: linear-gradient(180deg, rgba(8, 22, 38, 0.78) 0, rgba(8, 22, 38, 0.35) 110px, rgba(8, 22, 38, 0.7) 32%, rgba(8, 22, 38, 0.94) 60%); }
}

/* ---------- JM, 27/09 (acabamento): número, bordas, pilha que termina inteira e destaque que segue a rolagem ----------
   · número: sai o contorno dourado (o traço fino da serifa falhava); fica "01/04" em texto limpo, dourado, com um fio
     separando do título.
   · bordas: o recorte arredondado é da foto (e não do cartão), e o contorno é um fio por cima dela; as etiquetas de vidro
     dentro de um cartão com overflow e transform serrilhavam os cantos no Chrome.
   · pé: todos os cartões terminam na mesma linha, com os quatro cantos arredondados e folga acima da onda; os mais
     largos, por cima, escondem os cantos dos de trás. Nada mais é cortado pela borda do palco.
   · mouse: o cartão só sobe um pouco, sem passar por cima da pilha, e nada sobe enquanto a página rola; assim o
     próximo cartão que chega cobre o anterior normalmente. */
.cf2__palco { padding-bottom: calc(var(--onda-h) + clamp(14px, 2.4svh, 28px)); }
.cf2-card { --raio: clamp(18px, 1.8vw, 26px); height: calc(100% - var(--k) * var(--aba)); overflow: visible; border-radius: var(--raio); background: #0B2035;
  box-shadow: 0 -18px 40px -26px rgba(0, 0, 0, 0.8); /* JM, 01/10: sem a sombra preta embaixo do último cartão */
  transform: translateY(calc(-1 * var(--ergue))); transition: transform 460ms cubic-bezier(.22, 1, .36, 1); }
.cf2-card::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.cf2-card__fundo { border-radius: inherit; overflow: hidden; clip-path: inset(0 round var(--raio)); }
.cf2-card__fundo picture { display: contents; }
@media (hover: hover) {
  .cf2-card:hover { --ergue: 8px; --zoom: 1; z-index: calc(var(--k) + 1); }
  .cf2--rolando .cf2-card:hover { --ergue: 0px; }
}
.cf2-card__tit { gap: 0; align-items: center; }
.cf2-card__num { display: inline-flex; align-items: baseline; gap: 2px; margin-right: clamp(16px, 1.6vw, 24px); padding-right: clamp(16px, 1.6vw, 24px);
  border-right: 1px solid rgba(232, 206, 147, 0.4); align-self: center; line-height: 1;
  font: 600 clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem)/1 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.04em;
  color: #E8CE93; -webkit-text-stroke: 0; opacity: 1; }
.cf2-card__de { font-weight: 500; color: rgba(232, 206, 147, 0.55); }
.cf2-card__num { padding-block: 0.5em; }
.cf2-card__quando { display: block; padding-top: 0; font-size: 0.875rem; color: #DCE6EE; }
.cf2-card__chips span { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11, 32, 53, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
@media (max-width: 767px) {
  .cf2-card__num { font-size: 0.875rem; margin-right: 12px; padding-right: 12px; }
  .cf2-card__de { display: none; }
}
/* a pilha cabe inteira no palco: abas mais baixas, manchete numa linha no computador, a onda fica depois do palco
   (no pé da seção) e o desenho de fundo some suave em vez de ser cortado; no celular, folga para a barra fixa */
.cf2 { --aba: clamp(70px, 9svh, 104px); }
.anima .cf2.cf2--vivo { padding-block: 0 var(--onda-h); }
.cf2__palco { padding-top: calc(var(--altura-topo) + clamp(14px, 2.4svh, 28px)); padding-bottom: clamp(18px, 3svh, 32px); }
.cf2:not(.cf2--vivo) .cf2__palco { padding-top: calc(max(var(--altura-topo), var(--onda-h)) + 20px); padding-bottom: calc(var(--onda-h) + 32px); }
.cf2-card { padding-top: 0; }
.cf2-card__topo { height: var(--aba); }
.cf2-card__corpo { padding-top: clamp(6px, 1.4svh, 18px); gap: clamp(12px, 2svh, 18px); }
.cf2-card__chips { max-width: 780px; }
@media (min-width: 1100px) { .cf2 h2 { max-width: none; } }
@media (max-width: 767px) {
  .cf2 { --aba: clamp(64px, 8.6svh, 80px); }
  .cf2-card__quando { display: none; }
  .cf2__palco { padding-bottom: 92px; }
}
@media (max-width: 767px) { .cf2-card { width: calc(90% + var(--k) * 2.4%); } }

/* ---------- JM, 28/09: abrir e fechar a fase sem travar ----------
   O painel já nasce no tamanho final e cresce a partir do cartão por clip-path (antes animava top, left, width e
   height, que recalcula o layout a cada quadro). O véu deixa de desfocar a página: o blur sobre a seção inteira
   pesava a cada quadro da abertura. */
.cf2__veu { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6, 20, 40, 0.82); }
.cf2-painel { transition: clip-path 560ms cubic-bezier(.22, 1, .36, 1); will-change: clip-path; clip-path: inset(0 round 30px); }
.cf2-painel--sem-transicao { transition: none; }

/* ---------- JM, 29/09 (opção A): o objeto da fase no lugar do "01/04", a frase como manchete, sem as pílulas, e o
   botão no formato do CTA do hero (tinta dourada e a seta na caixinha). O painel da fase fica mais simples: a lista
   de entregas sem os ícones, com quem faz escrito ao lado. */
.cf2-card__topo { justify-content: flex-start; align-items: center; gap: clamp(12px, 1.4vw, 18px); }
.cf2-card__placa { flex: none; display: grid; place-items: center; width: clamp(50px, 4.4vw, 64px); aspect-ratio: 1; border-radius: clamp(13px, 1.1vw, 16px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 26px -16px rgba(0, 0, 0, 0.7); }
.cf2-card__placa img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35)); }
.cf2-card__tit { display: grid; gap: 4px; align-items: start; }
.cf2-card__tit .cf2-card__quando { display: block; padding: 0; font: 600 0.75rem/1.2 var(--f-texto); letter-spacing: 0.12em; text-transform: uppercase; text-align: left; color: #E8CE93; }
.cf2-card__corpo { gap: clamp(16px, 2.4svh, 24px); }
.cf2-card__frase { max-width: 22ch; font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.6rem); line-height: 1.14; letter-spacing: -0.015em; }
.cf2-card__chips { display: none; }
.cf2-card__cta { white-space: nowrap; }
@media (max-width: 767px) {
  .cf2-card__tit .cf2-card__quando { font-size: 0.6875rem; }
  .cf2-card__frase { font-size: 1.45rem; }
}
.cf2-fase__lista li { grid-template-columns: minmax(0, 1fr) auto; }
.cf2-painel[data-k] .cf2-fase__lista .cf2-quem { padding: 0; border-radius: 0; background: none; color: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: 0.78; }
.cf2-painel[data-k] .cf2-fase__lista .cf2-quem--voce { opacity: 1; font-weight: 700; text-decoration: underline 2px #D8AC52; text-underline-offset: 5px; }
/* JM, 29/09: o cartão não sobe mais no hover (veto "card que sobe"); quem responde ao mouse é só o botão */
@media (hover: hover) { .cf2-card:hover { --ergue: 0px; } }

/* ---------- JM, 30/09: a aba do cartão sem o objeto 3D ("ícone genérico"). A aba vira um cabeçalho de pasta: o nome da
   fase à esquerda e o "quando" à direita, na mesma linha, centrados na altura da aba e alinhados às margens do corpo;
   um fio fino separa a aba do conteúdo. É a faixa que continua visível quando o cartão seguinte cobre este. */
.cf2-card__placa { display: none; }
.cf2-card__topo { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--aba); padding-inline: 0;
  border-bottom: 1px solid rgba(232, 206, 147, 0.22); }
.cf2-card .cf2-card__tit { display: block; margin: 0; font: 400 clamp(1.9rem, 1.3rem + 1.4vw, 2.7rem)/1 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; }
.cf2-card__topo .cf2-card__quando { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; font: 600 0.75rem/1.2 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; text-align: right; }
.cf2-card__topo .cf2-card__quando::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.cf2-card__corpo { padding-top: clamp(18px, 3svh, 30px); }
@media (max-width: 767px) {
  .cf2-card .cf2-card__tit { font-size: 1.75rem; }
  .cf2-card__topo .cf2-card__quando { display: none; }
}

/* ---------- JM, 30/09 (2ª): a placa 3D volta na aba, ao lado do nome; o painel da fase foi refeito ----------
   Aba: placa de vidro com o objeto da fase + nome, à esquerda; o "quando" à direita; tudo centrado na altura da aba.
   Painel: marinho para todas as fases; em cima a capa (a foto larga da fase) com a placa, o "quando" e o título; embaixo
   a frase e as três entregas em colunas, cada uma com quem faz. A saída do painel é um esmaecer com leve recuo (antes
   o recorte voltava para o contorno do cartão e cortava o painel no meio). */
.cf2-card .cf2-card__tit { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 16px); }
.cf2-placa { flex: none; display: grid; place-items: center; width: clamp(44px, 3.6vw, 54px); aspect-ratio: 1; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 22px -14px rgba(0, 0, 0, 0.7); }
.cf2-placa img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35)); }
.cf2-card__frase { max-width: 24ch; }
@media (max-width: 767px) { .cf2-placa { width: 40px; border-radius: 12px; } }

.cf2-painel { width: min(88vw, 1180px); height: min(84svh, 760px); padding: 0; gap: 0; grid-template-rows: minmax(0, 1fr); background: #0B2035; color: #FFFFFF;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cf2-painel__volta { position: absolute; z-index: 3; left: 20px; top: 20px; background: rgba(6, 20, 33, 0.55); color: #FFFFFF; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.cf2-painel[data-k] .cf2-painel__volta { background: rgba(6, 20, 33, 0.55); }
.cf2-fase { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.05fr) auto; gap: 0; height: 100%; min-height: 0; }
.cf2-fase__capa { position: relative; min-height: 0; overflow: hidden; }
.cf2-fase__capa > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cf2-fase__capa::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 32, 53, 0.25) 0%, rgba(11, 32, 53, 0) 30%, rgba(11, 32, 53, 0.55) 65%, #0B2035 100%); }
.cf2-fase__cab { position: absolute; z-index: 1; left: clamp(22px, 3.4vw, 48px); right: clamp(22px, 3.4vw, 48px); bottom: 18px; display: flex; align-items: flex-end; gap: 18px; }
.cf2-fase__cab .cf2-placa { width: clamp(56px, 5vw, 72px); border-radius: 18px; }
.cf2-painel .cf2-fase__quando { margin: 0 0 8px; font: 600 0.75rem/1.2 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; opacity: 1; }
.cf2-painel .cf2-fase__tit { margin: 0; font: 400 clamp(2.2rem, 1.4rem + 2.2vw, 3.6rem)/1 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; }
.cf2-painel .cf2-fase__tit em { display: inline; margin: 0 0 0 0.2em; font-size: 0.5em; font-style: italic; color: #C9D8E4; opacity: 1; }
.cf2-fase__corpo { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 48px); align-items: start; padding: clamp(20px, 2.6vw, 34px) clamp(22px, 3.4vw, 48px) clamp(24px, 3vw, 40px); }
.cf2-painel .cf2-fase__frase { margin: 0; max-width: 30ch; font: 400 clamp(1.15rem, 1rem + 0.5vw, 1.4rem)/1.35 var(--f-titulo); color: #E4ECF3; }
.cf2-painel .cf2-fase__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cf2-painel .cf2-fase__lista li.cf2-ent { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 16px 0 0; border-top: 2px solid rgba(201, 216, 228, 0.22); font-size: 1rem; line-height: 1.4; color: #FFFFFF; }
.cf2-ent b { font: 700 0.6875rem/1.2 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #A9BCCB; }
.cf2-painel .cf2-fase__lista li.cf2-ent--voce { border-top-color: #D8AC52; }
.cf2-ent--voce b { color: #E8CE93; }
/* as entregas entram uma a uma depois que o painel abre */
.cf2-painel .cf2-ent { opacity: 1; translate: 0 0; transition: opacity 400ms linear, translate 600ms cubic-bezier(.22, 1, .36, 1); }
.cf2-painel .cf2-ent:nth-child(1) { transition-delay: 300ms; } .cf2-painel .cf2-ent:nth-child(2) { transition-delay: 380ms; } .cf2-painel .cf2-ent:nth-child(3) { transition-delay: 460ms; }
.cf2-painel--crescendo .cf2-ent { opacity: 0; translate: 0 12px; transition-delay: 0ms !important; }
/* saída */
.cf2-painel.cf2-painel--saindo { transition: opacity 260ms linear, scale 320ms cubic-bezier(.4, 0, .2, 1); opacity: 0; scale: 0.97; }
.cf2-painel--saindo .cf2-fase > * { transition: none; }
@media (max-width: 767px) {
  .cf2-painel { width: 94vw; height: 90svh; }
  .cf2-fase { grid-template-rows: 200px minmax(0, 1fr); }
  .cf2-fase__corpo { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; overflow-y: auto; }
  .cf2-painel .cf2-fase__lista { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cf2-painel .cf2-fase__lista li.cf2-ent { padding: 14px 0; }
  .cf2-fase__cab .cf2-placa { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cf2-painel.cf2-painel--saindo, .cf2-painel .cf2-ent { transition: none; } }

/* ---------- JM, 01/10: o acesso ao banco como apoio da fase Rodar ----------
   Sem cartão (o perfil de banco ficou genérico e roubava a cena): uma linha só, abaixo da frase, com dois marcadores
   separados por um fio. O visto diz o que a Conex faz; o cadeado dourado, o que fica com a empresa. */
.cf2-acesso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; font: 500 0.9375rem/1.3 var(--f-texto); color: rgba(234, 240, 245, 0.82); }
.cf2-acesso__p { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cf2-acesso__p svg { flex: none; width: 17px; height: 17px; color: #9FD3B4; }
.cf2-acesso__p + .cf2-acesso__p { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.22); }
.cf2-acesso__p--master { color: #E8CE93; }
.cf2-acesso__p--master svg { color: currentColor; }
@media (max-width: 479px) { .cf2-acesso { flex-direction: column; align-items: flex-start; } .cf2-acesso__p + .cf2-acesso__p { margin-left: 0; padding-left: 0; border-left: 0; } }
.cf2-fase__ctrl { display: block; margin-top: 10px; font: 500 0.9375rem/1.4 var(--f-texto); color: #E8CE93; }
/* sem a seção de segurança, o Como funciona encosta direto no Quem é a Conex (os dois marinho): o pé da seção desce
   para o marinho liso, sem a emenda do degradê preso à janela; e o palco perde a folga que era da onda */
.cf2 { isolation: isolate; }
/* só o palco sobe acima do degradê do pé; o painel da fase e o véu continuam fixos na tela (antes .cf2 > * os tirava do fixed) */
.cf2__palco { z-index: 1; }
.cf2:not(.cf2--vivo) .cf2__palco { position: relative; }
.cf2__palco { padding-bottom: clamp(24px, 4svh, 44px); }
/* com o painel aberto a seção inteira sobe na pilha: a seção isolada (monograma) prendia o painel abaixo da seguinte */
.cf2.cf2--aberto { z-index: 100; }

/* fim.css */
/* CTA final · cartão marinho com moldura, elos em 3D à direita */
.cta-final { padding: 0 0 clamp(40px, 5vw, 72px); }
.cta-final__bloco {
  width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto;
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--raio-g);
  padding: clamp(48px, 7vw, 104px) clamp(24px, 6vw, 96px);
  background:
    radial-gradient(50% 80% at 85% 50%, rgba(88, 145, 175, 0.45), transparent 70%),
    linear-gradient(135deg, #17426A 0%, #0A1F35 60%);
}
.cta-final__texto { position: relative; z-index: 2; max-width: 660px; }
.cta-final h2 { color: #fff; font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.9rem); letter-spacing: -0.02em; }
.cta-final__apoio { margin-top: 20px; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); max-width: 48ch; color: #DCE7F1; }
.cta-final__acoes { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cta-final__aval { color: #fff; }
.cta-final__contatos { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--fio-escuro); display: flex; flex-wrap: wrap; gap: 20px 40px; }
.cta-final__contatos li { display: grid; gap: 4px; color: #fff; font-size: 0.9375rem; }
.cta-final__contatos .mono { font-size: 0.78rem; letter-spacing: 0.12em; color: #BFD8E9; }
.cta-final__bloco { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.cta-final__texto { max-width: 560px; }
.conversa {
  position: relative; z-index: 2; border-radius: var(--raio);
  background: rgba(6, 20, 33, 0.52); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.14), 0 40px 70px -34px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (min-width: 1024px) { .cta-final__bloco { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
@media (max-width: 1023px) { .conversa { width: min(460px, 100%); justify-self: center; } }

/* rodapé claro */
.rodape { padding: clamp(40px, 5vw, 72px) 0 calc(24px + env(safe-area-inset-bottom)); background: var(--marinho); color: var(--creme); }
.rodape__grade { display: grid; gap: 36px; }
.logo--rodape { height: 34px; width: auto; }
.rodape__marca p { margin-top: 16px; max-width: 36ch; font-size: 0.9375rem; color: var(--creme-2); }
.rodape__titulo { font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--azul-claro); }
.rodape__col ul { margin-top: 14px; display: grid; gap: 10px; font-size: 0.9375rem; color: var(--creme-2); }
.rodape__link { text-decoration: none; color: var(--creme); background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; padding-bottom: 2px; transition: background-size 360ms var(--curva); }
@media (hover: hover) { .rodape__link:hover { background-size: 100% 1px; } }
.rodape__base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--fio-escuro); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.875rem; color: var(--creme-2); }
@media (min-width: 900px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; } }

/* WhatsApp flutuante (JM, 07/10): círculo na cor do WhatsApp com a marca em branco, no canto inferior direito, pulsando
   (dois anéis que se abrem e somem). Só abaixo de 1100 px, onde o cabeçalho não tem o botão do WhatsApp por extenso */
.wf { display: none; }
@media (max-width: 1099px) {
  .wf { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); display: block;
    opacity: 0; scale: 0.6; pointer-events: none; transition: opacity 260ms linear, scale 420ms cubic-bezier(.34, 1.56, .64, 1); }
  .wf[hidden] { display: none; }
  .wf--visivel { opacity: 1; scale: 1; pointer-events: auto; }
  .wf__bt { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #FFFFFF;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18); -webkit-tap-highlight-color: transparent; transition: scale 160ms ease-out; }
  .wf__bt svg { position: relative; z-index: 1; width: 30px; height: 30px; }
  .wf__bt::before, .wf__bt::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #25D366; animation: wf-pulso 2.4s cubic-bezier(.2, .6, .35, 1) infinite; }
  .wf__bt::after { animation-delay: 1.2s; }
  .wf__bt:active { scale: 0.92; }
  .rodape { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@keyframes wf-pulso { 0% { opacity: 0.55; scale: 1; } 80%, 100% { opacity: 0; scale: 1.75; } }
@media (prefers-reduced-motion: reduce) { .wf__bt::before, .wf__bt::after { animation: none; opacity: 0; } }

/* consentimento */
.consent {
  position: fixed; z-index: 60; left: var(--margem); right: var(--margem); bottom: 16px; max-width: 560px;
  display: grid; gap: 14px; padding: 18px 20px; border-radius: 16px;
  background: var(--marinho); color: var(--creme); box-shadow: var(--sombra-2); font-size: 0.9375rem;
}
.consent[hidden] { display: none; }
.consent p { color: var(--creme); }
.consent__acoes { display: flex; gap: 8px; }
.consent__botao { flex: 1; min-height: 44px; border: 0; border-radius: 10px; font-weight: 600; background: #fff; color: var(--marinho); }
/* JM, 10/11: o mesmo hover dos botões do site (tinta dourada que nasce de onde o ponteiro entra, botoes.css) */
.consent__botao { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; }
.consent__botao > span:not(.bt__pintura) { position: relative; z-index: 1; } .consent__botao:focus-visible .bt__pintura::before { scale: 1; }
@media (hover: hover) and (pointer: fine){.consent__botao:hover .bt__pintura::before{ scale: 1; }}

/* fechamento: a primeira conversa, no lugar do 3D (o 3D vive só no hero) */
.conversa { display: grid; align-content: center; gap: 10px; padding: clamp(20px, 2.4vw, 32px); }
.conversa__topo { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(233, 242, 248, 0.14); }
.conversa__topo > span { display: grid; gap: 1px; }
.conversa__topo b { font-size: 0.9375rem; font-weight: 640; color: #fff; }
.conversa__topo i { font-style: normal; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: #9BE2B2; }
.conversa__app { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #25D366; color: #fff; }
.conversa__app .bt__whats { width: 20px; height: 20px; }
.conversa__balao {
  justify-self: start; max-width: 88%; padding: 12px 15px; border-radius: 14px 14px 14px 4px;
  font-size: 0.9rem; line-height: 1.45; color: #E9F1F7;
  background: rgba(233, 242, 248, 0.09); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.1);
}
.conversa__balao--sua { justify-self: end; border-radius: 14px 14px 4px 14px; background: rgba(216, 172, 82, 0.16); box-shadow: inset 0 0 0 1px rgba(216, 172, 82, 0.28); color: #fff; }
.conversa__pe { margin-top: 6px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #BFD8E9; }
.anima .conversa__balao { animation: sobe 620ms var(--curva) both; }
.anima .conversa__balao:nth-of-type(2) { animation-delay: 220ms; }
.anima .conversa__balao:nth-of-type(3) { animation-delay: 440ms; }

/* ---------- Contato: a conversa enviada pela rolagem (JM, 27/09) ----------
   No desktop a seção fica presa enquanto a rolagem desce e as mensagens vão sendo enviadas, com "digitando…" antes
   das respostas da Conex; no celular a conversa anda conforme ela passa pela tela. A conversa ocupa mais espaço. */
.anima .cta-final.ct--vivo { height: calc(100svh + 70svh); padding-bottom: 0; } /* JM, 01/10: trecho preso mais curto, sem travar */
.anima .cta-final.ct--rola { height: calc(100svh + 150svh); } /* JM, 01/10 (v3): a conversa inteira cabe na rolagem, devagar */
@media (min-width: 1024px) {
  .cta-final__bloco { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .ct--vivo .cta-final__bloco { position: sticky; top: calc(var(--altura-topo) + 16px); min-height: calc(100svh - var(--altura-topo) - 40px); padding-block: clamp(36px, 5svh, 64px); }
}
@media (max-width: 1023px) { .anima .cta-final.ct--vivo { height: auto; padding-bottom: clamp(40px, 5vw, 72px); } }
.ct-chat { position: relative; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; height: min(640px, calc(100svh - var(--altura-topo) - 150px)); min-height: 460px;
  padding: 20px 20px 16px; border-radius: 28px; background: rgba(6, 20, 33, 0.55); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.14), 0 40px 70px -34px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ct-chat__cab { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(233, 242, 248, 0.14); }
.ct-chat__nome { display: grid; gap: 2px; }
.ct-chat__cab b { font-size: 1.0625rem; color: #fff; }
.ct-chat__cab i { display: grid; font-style: normal; font: 500 0.75rem/1.2 var(--f-mono); letter-spacing: 0.06em; color: #9BE2B2; }
.ct-chat__cab i span { grid-area: 1 / 1; }
.ct-chat__cab i .b { opacity: 0; }
.ct-chat[data-digitando] .ct-chat__cab i .a { opacity: 0; } .ct-chat[data-digitando] .ct-chat__cab i .b { opacity: 1; }
.ct-chat__app { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #25D366; color: #fff; }
.ct-chat__app .bt__whats { width: 24px; height: 24px; }
.ct-chat__msgs { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 0; overflow: hidden; margin: 0; padding: 0 2px; list-style: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%); mask-image: linear-gradient(to bottom, transparent, #000 14%); }
.ct-msg { flex: none; max-width: 80%; padding: 13px 16px 8px; border-radius: 18px 18px 18px 6px; background: rgba(233, 242, 248, 0.11); color: #F4F7FA;
  box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.12); }
.ct-msg p { font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); line-height: 1.45; }
.ct-msg small { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.6875rem; color: #9FB4C6; font-variant-numeric: tabular-nums; color: #C3D0DD; }
.ct-msg--voce { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: rgba(88, 145, 175, 0.3); box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.4); }
.ct-lido { display: inline-flex; color: #7FD3F7; } .ct-lido svg { width: 16px; height: 11px; }
.ct-digita { display: none; align-self: flex-start; gap: 5px; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: rgba(233, 242, 248, 0.11); }
.ct-digita i { width: 7px; height: 7px; border-radius: 50%; background: #C9D8E4; animation: ct-ponto 1s ease-in-out infinite; }
.ct-digita i:nth-child(2) { animation-delay: 150ms; } .ct-digita i:nth-child(3) { animation-delay: 300ms; }
@keyframes ct-ponto { 0%, 60%, 100% { translate: 0 0; opacity: 0.5; } 30% { translate: 0 -4px; opacity: 1; } }
.ct-chat__pe { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #BFD8E9; }
/* viva: a mensagem só existe depois de enviada; entra subindo do campo */
.ct--vivo .ct-msg { display: none; }
/* o balão novo espera os anteriores terminarem de subir (FLIP, 480ms) para não passar por cima deles */
.ct--vivo .ct-msg.on { display: block; animation: ct-entra 420ms cubic-bezier(.22, 1, .36, 1) 300ms both; }
.ct--vivo .ct-digita.on { display: flex; animation: ct-entra 320ms cubic-bezier(.22, 1, .36, 1) 260ms both; }
.ct-msg, .ct-digita { transform-origin: 0 100%; } .ct-msg--voce { transform-origin: 100% 100%; }
@keyframes ct-entra { from { opacity: 0; translate: 0 10px; scale: 0.97; } 60% { opacity: 1; } }
@media (max-width: 1023px) { .ct-chat { width: 100%; height: 560px; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .ct-digita i, .ct--vivo .ct-msg.on { animation: none; } }

/* council visual (28/09): o balão que sai pelo topo some em degradê, sem toco cortado */
.ct-chat__msgs { -webkit-mask-image: linear-gradient(transparent, #000 56px); mask-image: linear-gradient(transparent, #000 56px); }
/* depois de uma onda (páginas internas: dúvidas no marfim), o painel começa abaixo da curva, com os cantos à vista */
.onda--topo-sobre + .cta-final { padding-top: calc(var(--onda-h) + clamp(28px, 4vw, 56px)); }

/* ---------- council visual r2 (28/09) ---------- */
/* painel sem ponto de luz (veto "feixe de luz"): degradê linear só de cima para baixo */
.cta-final__bloco { background: linear-gradient(180deg, #143A5E 0%, #0B2035 100%); }
.cta-final { padding-bottom: clamp(56px, 7vw, 104px); }
.cta-final__contatos .mono { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
.ct-msg { background: rgba(233, 242, 248, 0.07); }
.ct-msg small { color: #D3DDE7; font-size: 0.75rem; }
/* celular: título, apoio, a conversa inteira (sem sequência nem altura reservada), o botão e os contatos */
@media (max-width: 1023px) {
  .cta-final__texto { display: contents; }
  .cta-final__bloco h2 { order: 1; } .cta-final__apoio { order: 2; margin-top: -8px; }
  .ct-chat { order: 3; height: auto; min-height: 0; }
  .cta-final__acoes { order: 4; margin-top: 0; } .cta-final__contatos { order: 5; margin-top: 0; }
  .ct--vivo .ct-msg { display: block; }
  .ct--vivo .ct-msg.on, .ct--vivo .ct-digita.on { animation: none; }
  .ct-digita { display: none !important; }
  .ct-chat__msgs { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- council visual r3 (28/09) ---------- */
/* a conversa cresce de cima para baixo (sem vazio acima da primeira mensagem) e chega com as duas primeiras */
.ct-chat__msgs { justify-content: flex-start; -webkit-mask-image: none; mask-image: none; }
/* o cartão fecha com os cantos à vista antes do rodapé: fio claro no contorno e respiro depois da parte presa */
.cta-final__bloco { box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.12); }
.ct--vivo .cta-final__bloco { margin-bottom: clamp(48px, 6vw, 88px); }
/* celular: o botão logo depois do apoio, a conversa depois, balões mais largos */
@media (max-width: 1023px) {
  .cta-final__acoes { order: 3; } .ct-chat { order: 4; }
  .ct-msg { max-width: 88%; }
}

/* ---------- JM, 01/10: no trecho preso, o fundo também fica parado ----------
   O cartão já ficava preso, mas o monograma da seção corria por trás dele. Com o ladrilho preso à janela, nada no
   fundo se mexe enquanto a conversa anda com a rolagem. */
@media (min-width: 1024px) { .ct--vivo > .monograma { background-attachment: fixed; } }

/* ---------- JM, 01/10: a conversa dentro de um tablet ----------
   O tablet é um render (cena 23 do render3d: iPad Pro 11 em pé, um pouco virado) com a tela vazada; a conversa em HTML
   (caixa de 460 × 666,3) é encaixada nos quatro cantos do vidro por homografia (cantos em build/tablet-cantos.mjs, já
   descontado o recorte da imagem) e passa 0,01 por baixo do vidro preto. No celular e no tablet de verdade, a conversa
   volta a ser o cartão de antes, sem o aparelho. */
.ct-tab { position: relative; z-index: 2; }
.ct-tab__img, .ct-tab__sombra, .ct-tab__vidro { display: none; }
@media (min-width: 1024px) {
  .ct-tab { justify-self: center; width: min(100%, calc((100svh - var(--altura-topo) - 110px) * 1184 / 1749), 520px); aspect-ratio: 1184 / 1749; }
  .ct-tab__img { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
  .ct-tab__sombra { display: block; position: absolute; z-index: 0; left: 14%; right: 8%; bottom: 0; height: 6%; border-radius: 50%; background: rgba(0, 0, 0, 0.55); filter: blur(28px); }
  .ct-tab__tela { position: absolute; z-index: 1; left: 0; top: 0; width: 460px; height: 666.3px; transform-origin: 0 0; overflow: hidden; border-radius: 42.9px; visibility: hidden;
    background: radial-gradient(120% 60% at 0% 0%, #17426A, rgba(23, 66, 106, 0) 70%), #0A1F33; }
  .ct-tab--encaixado .ct-tab__tela { visibility: visible; }
  .ct-tab__tela .ct-chat { height: 100%; min-height: 0; padding: 24px 22px 16px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ct-tab__tela .ct-msg p { font-size: 0.9375rem; }
}
@media (max-width: 1023px) { .ct-tab { order: 4; width: 100%; } }

/* ---------- JM, 02/10: o mockup de iPad do JM, com o WhatsApp como ele é hoje ----------
   A foto do JM (iPad Pro prateado, espelhada para a tela olhar para o texto) foi recortada do xadrez e levada por
   homografia aos mesmos cantos de tela do tablet anterior (build/tablet/mockup/), então ângulo, posição e tamanho da
   tela não mudaram. A conversa (caixa de 400 × 580,3) entra por baixo da moldura; o buraco da tela tem cantos de 9 a 20
   na caixa, por isso o raio da caixa é pequeno (nada de fresta). Na tela, o WhatsApp claro do iOS: barra do sistema com
   data, cabeçalho com voltar, vídeo e ligação, papel de parede bege com desenho discreto, balões com bico (branco da
   Conex, verde seu), hora dentro do balão, aviso amarelo e barra de mensagem com +, figurinha, câmera e microfone. No
   celular a conversa segue o cartão escuro de antes (barra, voltar, ações e campo somem). */
.ct-chat__sis, .ct-chat__campo, .ct-chat__av, .ct-chat__volta, .ct-chat__acoes { display: none; }
@media (min-width: 1024px) {
  .ct-tab { width: min(100%, calc((100svh - var(--altura-topo) - 100px) * 766 / 1016), 540px); aspect-ratio: 766 / 1016; }
  .ct-tab__sombra { left: 10%; right: 4%; bottom: 0.5%; height: 4%; background: rgba(0, 0, 0, 0.6); filter: blur(24px); }
  .ct-tab__tela { --wa: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    width: 400px; height: 580.3px; border-radius: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' fill='none' stroke='%23000' stroke-opacity='.032' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='26' r='9'/%3E%3Cpath d='M21 26h6M24 23v6'/%3E%3Cpath d='M92 14h18l6 6v24H92z'/%3E%3Cpath d='M97 26h12M97 32h12M97 38h7'/%3E%3Cpath d='M30 92v-12M38 92V74M46 92V84M26 92h24'/%3E%3Cpath d='m104 82 6 6 12-12'/%3E%3Crect x='72' y='112' width='22' height='20' rx='3'/%3E%3Cpath d='M72 119h22M78 108v6M88 108v6'/%3E%3Cpath d='M128 126c4-6 10-6 14 0'/%3E%3Ccircle cx='60' cy='50' r='2'/%3E%3Ccircle cx='130' cy='54' r='2'/%3E%3Ccircle cx='16' cy='130' r='2'/%3E%3C/svg%3E") 0 0 / 150px 150px, #EFEAE2; }
  .ct-tab__vidro { display: block; position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; opacity: 0.5; } /* branco com a opacidade do reflexo */
  .ct-tab__tela .ct-chat { grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 0; padding: 0; color: #111B21; font-family: var(--wa); }
  /* barra do sistema (iPad: hora e data à esquerda) e cabeçalho do app, os dois no cinza-claro translúcido do iOS */
  .ct-tab__tela .ct-chat__sis { order: 1; display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 3px; background: #F6F6F6; color: #000; font: 600 10.5px/1 var(--wa); font-variant-numeric: tabular-nums; }
  .ct-chat__sis em { margin-left: 6px; font-style: normal; font-weight: 500; }
  .ct-chat__sinais { display: inline-flex; align-items: center; gap: 5px; } .ct-chat__sinais svg:first-child { width: 14px; height: 10px; } .ct-chat__sinais svg:last-child { width: 22px; height: 11px; }
  .ct-tab__tela .ct-chat__cab { order: 2; display: flex; align-items: center; gap: 9px; padding: 5px 14px 8px 10px; border: 0; background: #F6F6F6; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.09); }
  .ct-tab__tela .ct-chat__volta { display: grid; place-items: center; flex: none; width: 14px; color: #111B21; } .ct-chat__volta svg { width: 10px; height: 18px; }
  .ct-tab__tela .ct-chat__app { display: none; }
  .ct-tab__tela .ct-chat__av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
  .ct-chat__av img { width: 26px; height: 26px; object-fit: contain; }
  .ct-tab__tela .ct-chat__nome { flex: 1; min-width: 0; gap: 1px; }
  .ct-tab__tela .ct-chat__cab b { font: 600 14px/1.15 var(--wa); color: #111B21; }
  .ct-tab__tela .ct-chat__cab i { font: 400 11px/1.2 var(--wa); letter-spacing: 0; color: #667781; }
  .ct-tab__tela .ct-chat__acoes { display: flex; align-items: center; gap: 20px; padding-right: 2px; color: #111B21; } .ct-chat__acoes svg { width: 21px; height: 21px; }
  .ct-chat__acoes svg:last-child { width: 18px; height: 18px; }
  /* aviso de sistema: o amarelo-claro dos avisos do WhatsApp */
  .ct-tab__tela .ct-chat__pe { order: 3; justify-self: center; max-width: 76%; margin: 10px 0 6px; padding: 5px 10px; border-radius: 7px; background: #FDF4C5; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.1);
    font: 400 10.5px/1.35 var(--wa); letter-spacing: 0; text-transform: none; text-align: center; color: #54656F; }
  .ct-tab__tela .ct-chat__msgs { order: 4; gap: 6px; padding: 2px 16px 10px; -webkit-mask-image: linear-gradient(transparent, #000 14px); mask-image: linear-gradient(transparent, #000 14px); }
  /* balões: cantos de 8, bico só no primeiro de cada sequência, hora dentro do balão, à direita da última linha */
  .ct-tab__tela .ct-msg { position: relative; max-width: 78%; padding: 6px 8px 6px 9px; font: 400 13.5px/1.36 var(--wa); border-radius: 8px; background: #FFFFFF; color: #111B21; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
  .ct-tab__tela .ct-msg--voce { background: #D9FDD3; }
  .ct-tab__tela .ct-msg--bico.ct-msg--conex { border-top-left-radius: 0; } .ct-tab__tela .ct-msg--bico.ct-msg--voce { border-top-right-radius: 0; }
  .ct-tab__tela .ct-msg--bico::before { content: ''; position: absolute; top: 0; left: -7px; width: 8px; height: 12px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); }
  .ct-tab__tela .ct-msg--voce.ct-msg--bico::before { left: auto; right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .ct-tab__tela .ct-msg::after { content: ''; display: block; clear: both; }
  .ct-tab__tela .ct-msg p { display: inline; font: 400 13.5px/1.36 var(--wa); color: #111B21; }
  .ct-tab__tela .ct-msg small { float: right; display: flex; align-items: center; gap: 3px; margin: 7px -1px -3px 10px; font: 400 10px/1 var(--wa); color: #667781; }
  .ct-tab__tela .ct-lido { color: #53BDEB; } .ct-tab__tela .ct-lido svg { width: 15px; height: 10px; }
  .ct-tab__tela .ct-digita { position: relative; padding: 10px 12px; border-radius: 0 8px 8px 8px; background: #FFFFFF; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
  .ct-tab__tela .ct-digita::before { content: ''; position: absolute; top: 0; left: -7px; width: 8px; height: 12px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); }
  .ct-tab__tela .ct-digita i { width: 6px; height: 6px; background: #8696A0; }
  /* barra de mensagem e o indicador de início do iPad */
  .ct-tab__tela .ct-chat__campo { order: 5; position: relative; display: flex; align-items: center; gap: 14px; padding: 7px 14px 20px; background: #F6F6F6; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08); color: #111B21; }
  .ct-tab__tela .ct-chat__campo::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 118px; height: 4px; margin-left: -59px; border-radius: 2px; background: #111B21; }
  .ct-chat__campo i { display: grid; place-items: center; flex: none; } .ct-chat__campo i svg { width: 21px; height: 21px; }
  .ct-chat__campo span { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 8px 0 12px; border-radius: 15px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); font: 400 12.5px/1 var(--wa); color: #8696A0; }
  .ct-chat__campo span svg { width: 18px; height: 18px; color: #54656F; }
}

/* JM, 01/10 (v3): conversa guiada pela rolagem. O JS pinta margem, opacidade e posição de cada balão a cada quadro;
   aqui só se desliga o que era da fila antiga (mensagem escondida até entrar, animação de entrada, espaçamento fixo). */
.ct--rola .ct-chat__msgs, .ct--rola .ct-tab__tela .ct-chat__msgs { gap: 0; }
.ct--rola .ct-msg, .ct--rola .ct-msg.on { display: block; animation: none; will-change: transform, opacity; }
.ct--rola .ct-digita, .ct--rola .ct-digita.on { display: flex; animation: none; }

/* fundo-elos.css */
/* ---------- Monograma no fundo do site inteiro (JM, 28/09) ----------
   O símbolo exato da logo (geometria de build/logo.mjs), 40 px, dois por ladrilho de 232 × 168 em grade
   desencontrada: uniforme em todas as seções, sem máscara nem sorteio, num tom que só aparece para quem olha.
   A camada entra no build (fundo-elos.mjs › comMonograma) como primeiro filho de cada seção de fundo, atrás do
   conteúdo (z-index -1 dentro da seção isolada) e por cima da cor da seção. No marinho, o azul da logo; no marfim,
   o marinho. Os ladrilhos são data URI porque a CSP não aceita style= inline. */
.com-monograma { position: relative; isolation: isolate; }
.monograma { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22640%22 height=%22480%22%3E%3Csvg x=%22190.3%22 y=%2262.1%22 width=%2234%22 height=%2220.68%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%2226.4%22 y=%22245.1%22 width=%2240%22 height=%2224.33%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22354.0%22 y=%22425.1%22 width=%2238%22 height=%2223.11%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%2223.7%22 y=%2230.8%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22323.0%22 y=%22260.1%22 width=%2246%22 height=%2227.97%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22499.3%22 y=%2272.8%22 width=%2246%22 height=%2227.97%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22348.6%22 y=%2279.8%22 width=%2234%22 height=%2220.68%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22415.5%22 y=%22193.1%22 width=%2240%22 height=%2224.33%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%2298.1%22 y=%22364.0%22 width=%2234%22 height=%2220.68%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22540.1%22 y=%22338.0%22 width=%2240%22 height=%2224.33%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22197.9%22 y=%22435.2%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22516.6%22 y=%22440.7%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22579.0%22 y=%22156.6%22 width=%2246%22 height=%2227.97%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22137.5%22 y=%22174.9%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22217.3%22 y=%22260.3%22 width=%2238%22 height=%2223.11%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22439.3%22 y=%22305.4%22 width=%2238%22 height=%2223.11%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22252.6%22 y=%22160.8%22 width=%2234%22 height=%2220.68%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22-16.4%22 y=%22405.3%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22623.6%22 y=%22405.3%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22272.0%22 y=%22353.9%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%23C9AE78%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%23C9AE78%22/%3E%3C/g%3E%3C/svg%3E%3C/svg%3E"); background-size: 640px 480px; background-position: center top; opacity: 0.12; }
.monograma--marfim { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22640%22 height=%22480%22%3E%3Csvg x=%22190.3%22 y=%2262.1%22 width=%2234%22 height=%2220.68%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%2226.4%22 y=%22245.1%22 width=%2240%22 height=%2224.33%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22354.0%22 y=%22425.1%22 width=%2238%22 height=%2223.11%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%2223.7%22 y=%2230.8%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22323.0%22 y=%22260.1%22 width=%2246%22 height=%2227.97%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22499.3%22 y=%2272.8%22 width=%2246%22 height=%2227.97%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22348.6%22 y=%2279.8%22 width=%2234%22 height=%2220.68%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22415.5%22 y=%22193.1%22 width=%2240%22 height=%2224.33%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%2298.1%22 y=%22364.0%22 width=%2234%22 height=%2220.68%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22540.1%22 y=%22338.0%22 width=%2240%22 height=%2224.33%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22197.9%22 y=%22435.2%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22516.6%22 y=%22440.7%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22579.0%22 y=%22156.6%22 width=%2246%22 height=%2227.97%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22137.5%22 y=%22174.9%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22217.3%22 y=%22260.3%22 width=%2238%22 height=%2223.11%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22439.3%22 y=%22305.4%22 width=%2238%22 height=%2223.11%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22252.6%22 y=%22160.8%22 width=%2234%22 height=%2220.68%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22-16.4%22 y=%22405.3%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22623.6%22 y=%22405.3%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3Csvg x=%22272.0%22 y=%22353.9%22 width=%2242%22 height=%2225.54%22 viewBox=%2252 38 638 388%22%3E%3Cg%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 371 232)%22%3E%3Cpath d=%22M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6%22 fill=%22none%22 stroke=%22%237A5A1E%22 stroke-width=%2265%22/%3E%3Ccircle cx=%22452.6%22 cy=%22239.6%22 r=%2232.5%22 fill=%22%237A5A1E%22/%3E%3C/g%3E%3C/svg%3E%3C/svg%3E"); opacity: 0.075; }
@media (max-width: 767px) { .monograma { background-size: 512px 384px; } }
@media print { .monograma { display: none; } }

/* ---------- JM, 01/10: em nenhuma seção presa à rolagem o fundo se mexe ----------
   Nas seções com palco preso (Como funciona, a semana, o cadeado das internas, o topo das internas), o monograma e o
   degradê da seção ficam presos à janela; só o conteúdo anima. O Contato tem a mesma regra em fim.css e o "Quem é a
   Conex" já desenha o fundo dentro do palco preso. */
@media (min-width: 1024px) {
  .cf2--vivo, .cf2--vivo > .monograma, .cx--vivo > .monograma, .anima .hp, .anima .hp > .monograma, .semana--viva > .monograma { background-attachment: fixed; }
}

/* ---------- JM, 01/10: transições sem falha ----------
   O desenho de cada seção termina numa linha reta, mas a onda que faz a passagem é curva: os elos apareciam cortados ao
   meio junto da onda. O monograma agora some em degradê nas duas pontas de cada seção (a altura da onda mais uma folga),
   então nenhuma onda encosta num elo pela metade. */
.monograma {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--onda-h) + 24px), #000 calc(var(--onda-h) + 120px), #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px));
  mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--onda-h) + 24px), #000 calc(var(--onda-h) + 120px), #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px));
}

/* ---------- JM, 01/10: Como funciona → Quem é a Conex sem faixa escura ----------
   As duas seções são marinho e não têm onda entre elas, então o monograma não some na emenda (a máscara só vale do
   lado de uma onda): o fundo do Como funciona não apaga embaixo, o do Quem é a Conex não apaga em cima. No computador
   os dois ladrilhos ficam presos à janela, então a grade continua sem degrau na passagem; no celular a folga é curta. */
.cf2 > .monograma { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--onda-h) + 24px), #000 calc(var(--onda-h) + 120px)); mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--onda-h) + 24px), #000 calc(var(--onda-h) + 120px)); }
.qx__palco > .monograma { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px)); mask-image: linear-gradient(180deg, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px)); }
@media (min-width: 1024px) { .qx__palco > .monograma { background-attachment: fixed; } }
@media (max-width: 1023px) {
  .cf2 > .monograma { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--onda-h) + 24px), #000 calc(var(--onda-h) + 120px), #000 calc(100% - 60px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--onda-h) + 24px), #000 calc(var(--onda-h) + 120px), #000 calc(100% - 60px), transparent 100%); }
  .qx__palco > .monograma { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px)); mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px)); }
}
/* as luzes das duas seções terminavam em linha reta na emenda: um véu marinho embaixo da luz e por cima da cor, mas
   abaixo do monograma (z-index −2), apaga cada luz antes da emenda e deixa só o marinho liso com a grade */
.cf2::before { content: ''; position: absolute; z-index: -2; left: 0; right: 0; bottom: 0; height: 320px; pointer-events: none; background: linear-gradient(180deg, rgba(11, 32, 53, 0), #0B2035 75%); }
.qx__palco::before { content: ''; position: absolute; z-index: -2; left: 0; right: 0; top: 0; height: 260px; pointer-events: none; background: linear-gradient(180deg, #0B2035 20%, rgba(11, 32, 53, 0)); }

/* grifo.css */
/* ---------- Grifo das palavras de destaque: marca-texto azul por trás da palavra (JM, 27/09) ----------
   A faixa ocupa o terço de baixo da palavra, no azul claro da marca, para o texto marinho seguir legível por cima. */
.grifo { position: relative; display: inline-block; white-space: nowrap; cursor: default; isolation: isolate; }
.grifo__txt { position: relative; z-index: 1; }
.grifo__faixa { position: absolute; z-index: 0; left: -0.08em; right: -0.08em; bottom: 0.06em; height: 0.4em; border-radius: 0.08em;
  background: #A9CBE0; transform: scaleX(0); transform-origin: 0 50%; transition: transform 800ms cubic-bezier(.65, 0, .35, 1); }
.grifo--on .grifo__faixa, html:not(.anima) .grifo__faixa { transform: none; }
/* refazer no mouse: some na hora e varre de novo */
.grifo--refaz .grifo__faixa { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .grifo__faixa { transition: none !important; } }

/* hero-cartao.css */
/* ---------- Hero da home · referências Fresh Finances (cartão de cor com duas telas) e MRStudio
   (peças entre as palavras). O cartão fica sobre o marfim, que segue direto para as Três frentes. ---------- */
.hc { position: relative; z-index: 3; background: #F1E5CC; padding: calc(var(--altura-topo) + 6px) clamp(12px, 2vw, 28px) clamp(40px, 6vw, 80px); color: #0B2035; }
.hc__sentinela { position: absolute; left: 0; top: 0; width: 1px; height: 100svh; pointer-events: none; }
.hc__cartao { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 24px; max-width: 1360px; margin: 0 auto;
  min-height: min(calc(100svh - var(--altura-topo) - 34px), 740px); padding: clamp(36px, 4.6vw, 72px) clamp(28px, 4.6vw, 72px); border-radius: 34px;
  background: radial-gradient(70% 90% at 12% 10%, #DDEBF4 0%, rgba(221, 235, 244, 0) 60%), linear-gradient(135deg, #C9DFEE 0%, #A9CBE0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.hc__texto { position: relative; z-index: 2; align-self: center; display: grid; justify-items: start; gap: clamp(18px, 2.6svh, 28px); }

/* título: frase simples, peças no meio das palavras */
.hc__titulo { display: grid; font: 600 clamp(2.5rem, 0.9rem + 3.9vw, 5rem)/1.04 var(--f-texto); letter-spacing: -0.04em; color: #0B2035; }
.hc__l { display: block; overflow: clip; overflow-clip-margin: 0.2em; padding-block: 0.03em; white-space: nowrap; }
.hc__m { display: inline-block; }
.hc__titulo .hero__chip { margin-inline: 0.14em; box-shadow: 0 12px 24px -12px rgba(154, 113, 32, 0.9); }
.hc__titulo .ht__chave { margin: 0 0.16em 0 0; background: #0B2035; box-shadow: 0 12px 24px -14px rgba(11, 32, 53, 0.7); }
.hc__titulo .ht__chave i { background: #FFFFFF; color: #0B2035; }
.hc__titulo .ht__chave--on { background: linear-gradient(150deg, #E8CE93, #D8AC52); }
.hc__titulo .ht__chave--on i { background: #0B2035; color: #FFFFFF; }
.hc__carimbo { display: inline-grid; place-items: center; width: 0.78em; height: 0.78em; margin-left: 0.16em; border-radius: 50%; vertical-align: 0.04em;
  background: #0B2035; color: #E8CE93; box-shadow: 0 0 0 0.06em #FFFFFF, 0 14px 26px -12px rgba(11, 32, 53, 0.7); }
.hc__carimbo svg { width: 0.42em; height: 0.42em; }

.hc__apoio { max-width: 40ch; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.5; color: #14283B; }
.hc__acoes { position: relative; display: flex; align-items: center; }
.hc__seta { position: absolute; left: calc(100% + 18px); bottom: 34%; width: 150px; height: auto; overflow: visible; pointer-events: none; }
.hc__seta path { fill: none; stroke: #0B2035; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc__mais .link { color: #0B2035; font-weight: 600; }

/* as duas telas do painel da Conex */
.hc__telas { position: relative; z-index: 1; min-height: 520px; }
.hc-tela { position: absolute; container-type: inline-size; display: flex; flex-direction: column; gap: 9px; overflow: hidden; font-family: var(--f-texto); }
.hc-tela--escura { right: 0; top: -2%; width: min(318px, 52%); aspect-ratio: 9 / 18.6; padding: 26px 20px 20px; border-radius: 34px;
  background: linear-gradient(180deg, #10304D 0%, #0B2035 100%); color: #FFFFFF; box-shadow: 0 0 0 6px #061421, 0 40px 70px -30px rgba(11, 32, 53, 0.75); }
.hc-tela--clara { z-index: 2; left: 2%; top: 16%; width: min(300px, 49%); aspect-ratio: 9 / 18.6; padding: 26px 18px 20px; border-radius: 30px;
  background: #FFFFFF; color: #0B2035; box-shadow: 0 40px 70px -30px rgba(11, 32, 53, 0.55), 0 0 0 1px rgba(11, 32, 53, 0.06); }
.hc-t__topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3cqw; font: 600 5cqw/1 var(--f-texto); }
.hc-t__topo span { display: flex; align-items: center; gap: 2cqw; }
.hc-t__topo i { font-style: normal; font-weight: 500; font-size: 4.2cqw; padding: 1.6cqw 3cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.1); color: #DCE6EE; }
.hc-elos { width: 9cqw; height: auto; }
.hc-t__rot { font: 600 4.2cqw/1.2 var(--f-texto); letter-spacing: 0.06em; text-transform: uppercase; color: #C9D8E4; }
.hc-tela--clara .hc-t__rot { color: #34414E; }
.hc-t__num { font: 700 10.4cqw/1 var(--f-texto); letter-spacing: -0.03em; }
.hc-t__var { display: flex; align-items: center; gap: 1.6cqw; font-size: 4.2cqw; color: #E8CE93; }
.hc-t__var svg { width: 4.4cqw; height: 4.4cqw; }
.hc-t__graf { width: 100%; height: 30cqw; margin-top: 2cqw; overflow: visible; }
.hc-t__area { fill: rgba(216, 172, 82, 0.16); }
.hc-t__linha { fill: none; stroke: #D8AC52; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.hc-t__abas { display: flex; gap: 1.6cqw; padding: 1.4cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.08); font-size: 4.2cqw; }
.hc-t__abas span { flex: 1; padding: 2cqw 0; border-radius: 2.2cqw; text-align: center; color: #C9D8E4; }
.hc-t__abas .on { background: #FFFFFF; color: #0B2035; font-weight: 600; }
.hc-t__mes li { display: flex; justify-content: space-between; padding-block: 3cqw; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 4.8cqw; color: #DCE6EE; }
.hc-t__mes b { color: #FFFFFF; font-weight: 600; }
.hc-t__mes .forte b { color: #E8CE93; font-size: 5.6cqw; }
.hc-t__bt { margin-top: auto; padding: 4cqw; border-radius: 3cqw; background: #D8AC52; color: #0B2035; font: 600 4.8cqw/1 var(--f-texto); text-align: center; }
.hc-t__cab { font: 700 6.4cqw/1.1 var(--f-texto); letter-spacing: -0.02em; margin-bottom: 1cqw; }
.hc-t__card { display: grid; gap: 2.4cqw; padding: 6cqw; border-radius: 5cqw; background: #0B2035; color: #FFFFFF; }
.hc-t__card .hc-t__rot { color: #C9D8E4; }
.hc-t__aprova { display: grid; margin-top: 1.6cqw; border-radius: 2.8cqw; background: #D8AC52; color: #0B2035; font: 600 4.8cqw/1 var(--f-texto); overflow: hidden; }
.hc-t__aprova > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; padding: 4cqw 2cqw; transition: opacity 260ms linear, translate 520ms cubic-bezier(.16, 1, .3, 1); }
.hc-t__aprova svg { width: 4.6cqw; height: 4.6cqw; }
.hc-t__aprova .b { opacity: 0; translate: 0 70%; }
.hc--aprovado .hc-t__aprova .a { opacity: 0; translate: 0 -70%; }
.hc--aprovado .hc-t__aprova .b { opacity: 1; translate: 0 0; }
.hc-t__sub { margin-top: 2cqw; font: 600 4.2cqw/1.2 var(--f-texto); letter-spacing: 0.06em; text-transform: uppercase; color: #34414E; }
.hc-t__contas li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3cqw; padding-block: 3.4cqw; border-top: 1px solid rgba(11, 32, 53, 0.08); font: 600 4.8cqw/1.2 var(--f-texto); }
.hc-t__contas small { display: block; font-weight: 400; font-size: 3.8cqw; color: #34414E; }
.hc-t__contas b { font-weight: 600; }
.hc-t__ic { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 3cqw; background: #E6EFF6; color: #1F5A85; }
.hc-t__ic svg { width: 5.4cqw; height: 5.4cqw; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* entrada (depois da intro): linhas sobem, peças entram, telas sobem, a chave liga e o lote é aprovado */
.anima .hc__m { translate: 0 110%; }
.anima .hc__apoio, .anima .hc__acoes, .anima .hc__mais { opacity: 0; translate: 0 24px; }
.anima .hc-tela { opacity: 0; translate: 0 80px; }
.anima .hc__carimbo { scale: 0; rotate: -120deg; }
.anima .hc__seta path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.anima:is(:not(.intro), .intro-sai) .hc__m { animation: ht-sobe 1100ms cubic-bezier(.16, 1, .3, 1) forwards; }
.anima:is(:not(.intro), .intro-sai) .hc__l:nth-child(2) .hc__m { animation-delay: 110ms; }
.anima:is(:not(.intro), .intro-sai) .hc__l:nth-child(3) .hc__m { animation-delay: 220ms; }
.anima:is(:not(.intro), .intro-sai) .hc__apoio { animation: ht-entra 900ms cubic-bezier(.16, 1, .3, 1) 380ms forwards; }
.anima:is(:not(.intro), .intro-sai) .hc__acoes { animation: ht-entra 900ms cubic-bezier(.16, 1, .3, 1) 480ms forwards; }
.anima:is(:not(.intro), .intro-sai) .hc__mais { animation: ht-entra 900ms cubic-bezier(.16, 1, .3, 1) 580ms forwards; }
.anima:is(:not(.intro), .intro-sai) .hc-tela--escura { animation: ht-entra 1200ms cubic-bezier(.16, 1, .3, 1) 260ms forwards; }
.anima:is(:not(.intro), .intro-sai) .hc-tela--clara { animation: ht-entra 1200ms cubic-bezier(.16, 1, .3, 1) 420ms forwards; }
.anima:is(:not(.intro), .intro-sai) .hc__carimbo { animation: hc-carimba 800ms cubic-bezier(.3, 1.5, .5, 1) 1300ms forwards; }
.anima:is(:not(.intro), .intro-sai) .hc__seta path { animation: ht-risca 1000ms cubic-bezier(.4, 0, .2, 1) 1100ms forwards; }
.anima:is(:not(.intro), .intro-sai) .hc__seta path + path { animation-delay: 2000ms; animation-duration: 400ms; }
.anima:is(:not(.intro), .intro-sai) .hc-t__linha { animation: ht-risca 1400ms cubic-bezier(.3, .7, .2, 1) 1200ms forwards; }
html:not(.anima) .hc-t__linha { stroke-dashoffset: 0; }
@keyframes hc-carimba { to { scale: 1; rotate: 0deg; } }

/* cabeçalho sobre o marfim do hero: sem barra no topo, texto marinho (vira a ilha ao rolar) */
body:has(.hc) .topo:not(.topo--ilha) { --tinta: #0B2035; --tinta-2: #26323E; --fio-forte: rgba(11, 32, 53, 0.24); --nevoa: rgba(11, 32, 53, 0.06); --creme: #0B2035; color: #0B2035; }
body:has(.hc) .topo:not(.topo--ilha) .topo__barra { background-color: rgba(241, 229, 204, 0.94); }
body:has(.hc) .topo:not(.topo--ilha) .topo__whats { background: #0B2035; color: #FFFFFF; box-shadow: none; }
body:has(.hc) .topo:not(.topo--ilha) .topo__whats .bt__caixa { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
body:has(.hc) .topo:not(.topo--ilha) .bt-icone { background: #0B2035; color: #FFFFFF; box-shadow: none; }
/* o marfim do hero emenda nas Três frentes sem corte */
.hc + .tom-marfim { padding-top: clamp(24px, 4vw, 56px); }

@media (max-width: 1023px) {
  .hc__cartao { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 34px 22px 0; border-radius: 26px; overflow: clip; }
  .hc__titulo { font-size: clamp(2.1rem, 0.8rem + 5.6vw, 3.4rem); }
  .hc__seta { display: none; }
  .hc__telas { min-height: 0; height: min(96vw, 460px); margin-top: 8px; }
  .hc-tela--escura { right: 2%; top: 4%; width: 54%; }
  .hc-tela--clara { left: 0; top: 14%; width: 52%; }
}
@media (max-width: 1023px) { .hc-tela--escura, .hc-tela--clara { padding: 18px 12px 14px; } }
@media (max-width: 420px) { .hc-tela--escura, .hc-tela--clara { border-radius: 22px; } }
.hc-t__receber { display: flex; justify-content: space-between; align-items: center; margin-top: 2cqw; padding: 4cqw; border-radius: 4cqw; background: #EEF4F9; font-size: 4.4cqw; color: #26323E; }
.hc-t__receber b { font-weight: 700; color: #0B2035; }
.hc-t__app { display: flex; justify-content: space-around; margin: auto -18px -20px; padding: 4cqw 0 6cqw; border-top: 1px solid rgba(11, 32, 53, 0.08); color: #7E8C99; }
.hc-t__app svg { width: 7cqw; height: 7cqw; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hc-t__app svg:nth-child(2) { color: #1F5A85; }
@media (max-width: 1023px) { .hc-t__app { margin: auto -12px -14px; } }

/* ---------- JM, 27/09: opção A (peças iguais, sem seta) + celulares 2 (inclinados, aprovação e aviso do banco) ----------
   As três peças têm o mesmo desenho e terminam a ação em sequência: a nota vira conferida, a chave liga, o visto se
   desenha. Os celulares ficam em perspectiva, virados para o texto, com borda fina; em laço, o deslize aprova sozinho,
   chega o aviso "Lote pago" e o saldo desce o valor pago. */
.hc__seta, .hc__carimbo { display: none; }
.hc-pc { position: relative; display: inline-grid; place-items: center; vertical-align: 0.06em; width: 1.24em; height: 0.8em; margin: 0 0.12em; overflow: hidden;
  border-radius: 0.22em; background: #0B2035; color: #FFFFFF; box-shadow: 0 12px 24px -14px rgba(11, 32, 53, 0.8); transition: background-color 400ms linear, color 400ms linear; }
.hc-pc svg { width: 0.44em; height: 0.44em; }
.hc-pc--doc .doc, .hc-pc--doc .ok { position: absolute; display: grid; transition: translate 620ms cubic-bezier(.3, 1.3, .5, 1); }
.hc-pc--doc .ok { translate: 0 220%; }
.hc-pc--chave { justify-items: start; padding: 0 0.08em; background: rgba(11, 32, 53, 0.14); box-shadow: inset 0 0 0 2px rgba(11, 32, 53, 0.2); }
.hc-pc--chave b { display: grid; place-items: center; width: 0.62em; height: 0.62em; border-radius: 0.16em; background: #0B2035; color: #FFFFFF; transition: translate 620ms cubic-bezier(.3, 1.3, .5, 1); }
.hc-pc--chave b svg { width: 0.34em; height: 0.34em; }
.hc-pc--fim { width: 0.8em; margin-left: 0.16em; border-radius: 50%; background: #FFFFFF; color: #0B2035; box-shadow: inset 0 0 0 0.05em #0B2035, 0 12px 24px -14px rgba(11, 32, 53, 0.8); }
.hc-pc--fim svg { width: 0.42em; height: 0.42em; }
.hc-pc--fim path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms cubic-bezier(.4, 0, .2, 1); }
/* a sequência (a classe entra pelo JS depois da abertura; sem animação já nasce pronta) */
.hc--pecas .hc-pc--doc, html:not(.anima) .hc-pc--doc { background: #D8AC52; color: #0B2035; }
.hc--pecas .hc-pc--doc .doc, html:not(.anima) .hc-pc--doc .doc { translate: 0 -220%; }
.hc--pecas .hc-pc--doc .ok, html:not(.anima) .hc-pc--doc .ok { translate: 0 0; }
.hc--pecas .hc-pc--chave, html:not(.anima) .hc-pc--chave { background: #D8AC52; box-shadow: none; transition-delay: 650ms; }
.hc--pecas .hc-pc--chave b, html:not(.anima) .hc-pc--chave b { translate: 0.44em 0; transition-delay: 500ms; }
.hc--pecas .hc-pc--fim, html:not(.anima) .hc-pc--fim { background: #0B2035; color: #E8CE93; transition-delay: 1100ms; }
.hc--pecas .hc-pc--fim path, html:not(.anima) .hc-pc--fim path { stroke-dashoffset: 0; transition-delay: 1250ms; }

/* os celulares em perspectiva: mesmo ângulo, virados para o texto, borda fina e sombra longa e suave */
.hc__telas { perspective: 1700px; perspective-origin: 20% 40%; }
.hc-tela { transform-style: preserve-3d; }
.hc-tela--escura { transform: rotateY(-20deg) rotateX(8deg) rotateZ(3deg); box-shadow: 0 0 0 2px #061421, 30px 50px 80px -34px rgba(11, 32, 53, 0.65); }
.hc-tela--clara { transform: rotateY(-20deg) rotateX(8deg) rotateZ(-2deg); box-shadow: 0 0 0 1px rgba(11, 32, 53, 0.08), 30px 50px 80px -34px rgba(11, 32, 53, 0.5); }
@keyframes hc-pousa { from { transform: rotateY(-4deg) rotateX(22deg) rotateZ(0deg); } }
.anima:is(:not(.intro), .intro-sai) .hc-tela--escura { animation: ht-entra 1300ms cubic-bezier(.16, 1, .3, 1) 260ms forwards, hc-pousa 1500ms cubic-bezier(.16, 1, .3, 1) 260ms backwards; }
.anima:is(:not(.intro), .intro-sai) .hc-tela--clara { animation: ht-entra 1300ms cubic-bezier(.16, 1, .3, 1) 420ms forwards, hc-pousa 1500ms cubic-bezier(.16, 1, .3, 1) 420ms backwards; }

/* o deslize para aprovar, que anda sozinho */
.hc-t__aprova { position: relative; background: rgba(216, 172, 82, 0.3); }
.hc-t__enche { position: absolute; inset: 0; background: #D8AC52; transform: scaleX(0); transform-origin: 0 50%; transition: transform 950ms cubic-bezier(.65, 0, .35, 1); }
.hc-t__bola { position: absolute; z-index: 2; left: 1.4cqw; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 2.4cqw; background: #0B2035; color: #FFFFFF;
  transition: left 950ms cubic-bezier(.65, 0, .35, 1), opacity 250ms linear; }
.hc-t__bola svg { width: 4.6cqw; height: 4.6cqw; }
.hc-t__aprova > span.a, .hc-t__aprova > span.b { position: relative; z-index: 1; }
.hc-t__aprova .a { padding-left: 10cqw; }
.hc--desliza .hc-t__enche { transform: none; }
.hc--desliza .hc-t__bola { left: calc(100% - 10.4cqw); }
.hc--aprovado .hc-t__bola { opacity: 0; }

/* o aviso do banco chega na tela escura */
.hc-t__aviso { position: absolute; z-index: 3; left: 3.4cqw; right: 3.4cqw; top: 3.4cqw; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6cqw 2.6cqw;
  padding: 3.4cqw 3.8cqw; border-radius: 5cqw; background: rgba(244, 247, 250, 0.97); color: #0B2035; font-size: 3.8cqw; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.7);
  translate: 0 -150%; transition: translate 650ms cubic-bezier(.3, 1.3, .5, 1); }
.hc-t__aviso-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 8.4cqw; height: 8.4cqw; border-radius: 2.4cqw; background: #0B2035; color: #FFFFFF; }
.hc-t__aviso-ic svg { width: 5cqw; height: 5cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hc-t__aviso b { font-size: 4.2cqw; } .hc-t__aviso em { grid-row: 1; grid-column: 3; font-style: normal; color: #3E5367; }
.hc--aviso .hc-t__aviso { translate: 0 0; }
.hc-t__num { font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) {
  .hc-tela--escura { transform: rotateY(-14deg) rotateX(6deg) rotateZ(3deg); }
  .hc-tela--clara { transform: rotateY(-14deg) rotateX(6deg) rotateZ(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .hc-pc, .hc-pc *, .hc-t__enche, .hc-t__bola, .hc-t__aviso { transition: none; } }

/* ---------- JM, 27/09: peças do título com os ícones 3D da Conex, trocando sozinhas ----------
   Cada peça é uma placa de vidro claro com o objeto 3D; a troca é um giro curto: o objeto sai por cima e o próximo
   sobe inclinado e assenta. As três trocam em tempos diferentes (JS). */
.hc-pc--img { width: 1.46em; height: 0.94em; margin: 0 0.12em; overflow: visible; border-radius: 0.28em; background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(11, 32, 53, 0.08), 0 14px 26px -16px rgba(11, 32, 53, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hc-pc--redonda { width: 0.98em; height: 0.98em; margin-left: 0.16em; border-radius: 50%; }
.hc-pc--img img { position: absolute; left: 50%; top: 50%; width: 1.16em; height: 1.16em; margin: -0.6em 0 0 -0.58em; opacity: 0; translate: 0 55%; rotate: -14deg; scale: 0.8;
  /* JM, 28/09: os PNGs vinham com uma sombra de chão embutida que batia na borda da imagem e aparecia cortada reta;
     ela saiu dos arquivos (originais em _antigo/ic-sombra-embutida-v10.7/) e a sombra agora é do CSS, em três camadas
     que seguem o contorno do objeto: contato, meia distância e ambiente. */
  filter: drop-shadow(0 0.012em 0.01em rgba(11, 32, 53, 0.34)) drop-shadow(0 0.045em 0.05em rgba(11, 32, 53, 0.2)) drop-shadow(0 0.11em 0.13em rgba(11, 32, 53, 0.12));
  transition: opacity 360ms linear, translate 760ms cubic-bezier(.3, 1.35, .5, 1), rotate 760ms cubic-bezier(.3, 1.35, .5, 1), scale 760ms cubic-bezier(.3, 1.35, .5, 1); }
.hc-pc--redonda img { width: 0.9em; height: 0.9em; margin: -0.46em 0 0 -0.45em; }
.hc-pc--img img.on { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
.hc-pc--img img.sai { opacity: 0; translate: 0 -55%; rotate: 12deg; scale: 0.8; transition-duration: 300ms, 520ms, 520ms, 520ms; }
/* entrada: a placa aparece e o primeiro objeto cai no lugar */
.anima .hc-pc--img { scale: 0.6; opacity: 0; transition: scale 700ms cubic-bezier(.3, 1.4, .5, 1), opacity 300ms linear; }
.anima .hc--pecas .hc-pc--img { scale: 1; opacity: 1; }
.anima .hc--pecas .hc__l:nth-child(2) .hc-pc--img { transition-delay: 180ms; }
.anima .hc--pecas .hc__l:nth-child(3) .hc-pc--img { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) { .hc-pc--img, .hc-pc--img img { transition: none; } }

/* hero-planeta.css */
/* ---------- Hero da home · v14 "planeta de fluxos" (JM, 29/09) ----------
   Fundo marinho com a névoa e o planeta (dois canvas atrás de tudo), a headline no centro e os dois celulares
   reais nas laterais, inclinados para o centro. No celular, os dois descem em leque para o pé. */
/* --hh é a primeira tela; o hero tem a altura da onda a mais, então a onda que separa da próxima seção só aparece
   quando a pessoa começa a rolar. --fw: os celulares cabem inteiros na primeira tela (o corpo ocupa 83% da imagem). */
.hpl { --hh: max(760px, 100svh); --fw: min(560px, calc((var(--hh) - var(--altura-topo) - 70px) / 1.32)); position: relative; overflow: hidden; isolation: isolate; height: calc(var(--hh) + var(--onda-h)); background: #06121F; color: #F7F3EA; --mx: 0; --my: 0; }
.hpl__nevoa, .hpl__planeta { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hpl__nevoa { z-index: 0; background: radial-gradient(60% 40% at 50% 70%, #3A3524 0%, rgba(58, 53, 36, 0) 70%), linear-gradient(180deg, #0C2238 0%, #06121F 100%); }
.hpl__planeta { z-index: 2; }
.hpl__sentinela { position: absolute; top: 60%; left: 0; width: 1px; height: 1px; }
.hpl::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay; background-size: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
/* JM, 01/10: sem a moldura técnica (as cantoneiras nos quatro cantos saíram) */

/* a headline de sempre, clara sobre o marinho */
.hpl__texto { position: absolute; z-index: 7; left: 50%; top: calc(var(--altura-topo) + 58px); translate: -50% 0; width: min(760px, 60%); display: grid; justify-items: center; text-align: center; }
.hpl__titulo { margin: 0; font: 600 clamp(2.5rem, 0.8rem + 4.2vw, 5.4rem)/1 var(--f-texto); letter-spacing: -0.05em; color: #F7F3EA; }
.hpl__l { display: block; white-space: nowrap; }
.hpl-pc { display: inline-grid; place-items: center; width: 1.3em; height: 0.86em; margin: 0 0.08em; vertical-align: -0.06em; border-radius: 0.26em;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 18px 30px -16px rgba(0, 0, 0, 0.75); }
.hpl-pc img { width: 1.05em; height: 1.05em; filter: drop-shadow(0 0.03em 0.03em rgba(0, 0, 0, 0.4)) drop-shadow(0 0.08em 0.1em rgba(0, 0, 0, 0.25)); }
.hpl-pc--redonda { width: 0.95em; height: 0.95em; border-radius: 50%; } .hpl-pc--redonda img { width: 0.8em; height: 0.8em; }
.hpl__apoio { margin: 22px 0 0; max-width: 44ch; font-size: 1.1875rem; line-height: 1.5; color: #C9D8E4; }
.hpl__acoes { margin-top: 26px; }

/* os celulares: corpo renderizado + tela em HTML (a transformação da tela vem do JS) + reflexo do vidro */
.hpl__fones { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hpl-fone { position: absolute; aspect-ratio: 1400 / 2100; }
.hpl-fone > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.hpl-fone__tela { position: absolute; left: 0; top: 0; width: 332px; height: 714.3px; transform-origin: 0 0; overflow: hidden; border-radius: 44px; container-type: inline-size; background: #000; visibility: hidden; }
.hpl--encaixado .hpl-fone__tela { visibility: visible; }
.hpl-fone__tela::after { content: ''; position: absolute; inset: 0; z-index: 5; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 26%, rgba(255, 255, 255, 0) 40%); }
.hpl-fone__sombra { position: absolute; z-index: 0; left: 26%; right: 26%; bottom: 8%; height: 8%; border-radius: 50%; background: rgba(0, 0, 0, 0.6); filter: blur(30px); }
.hpl-fone--esq { width: var(--fw); left: max(calc(24px - var(--fw) * 0.2), calc(50% - 880px)); top: calc((var(--hh) + var(--altura-topo)) / 2 + 10px - var(--fw) * 0.75); rotate: 10deg; translate: calc(var(--mx) * -16px) calc(var(--my) * -10px); }
.hpl-fone--dir { width: var(--fw); left: min(calc(100% - 24px - var(--fw) * 0.8), calc(50% + 880px - var(--fw))); top: calc((var(--hh) + var(--altura-topo)) / 2 - 10px - var(--fw) * 0.75); rotate: -10deg; translate: calc(var(--mx) * 16px) calc(var(--my) * 10px); }
/* telas */
.hpl-t { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3.4cqw; padding: 17cqw 7cqw 7cqw; font-family: var(--f-texto); }
.hpl-t::before { content: ''; position: absolute; left: 50%; top: 3.4cqw; translate: -50% 0; width: 29cqw; height: 8.6cqw; border-radius: 99px; background: #030405; }
.hpl-t__hora { position: absolute; left: 9cqw; top: 5.2cqw; font: 600 4cqw/1 var(--f-texto); }
.hpl-t--escura { background: linear-gradient(180deg, #13385E 0%, #0B2035 70%); color: #FFFFFF; }
.hpl-t--clara { background: #F4F7FA; color: #0B2035; }
.hpl-t p { margin: 0; }
.hpl-t__topo { display: flex; justify-content: space-between; align-items: center; font: 600 5cqw/1 var(--f-texto); }
.hpl-t__topo i { font-style: normal; font-weight: 500; font-size: 3.8cqw; padding: 1.6cqw 3cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.1); }
.hpl-t__rot { margin-top: 4cqw !important; font: 600 3.6cqw/1.2 var(--f-texto); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.hpl-t__num { font: 700 11cqw/1 var(--f-texto); letter-spacing: -0.03em; }
.hpl-t__ok { font-size: 4cqw; color: #E8CE93; }
.hpl-t__graf { width: 100%; height: 40cqw; margin-top: 4cqw; }
.hpl-t__area { fill: rgba(216, 172, 82, 0.2); } .hpl-t__linha { fill: none; stroke: #D8AC52; stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.hpl-t__fim { margin-top: auto !important; display: flex; justify-content: space-between; align-items: baseline; padding: 5cqw; border-radius: 5cqw; background: rgba(255, 255, 255, 0.07); font-size: 4.2cqw; }
.hpl-t__fim b { font-size: 6cqw; color: #E8CE93; }
.hpl-t__card { display: grid; gap: 2.4cqw; margin-top: 3cqw; padding: 6cqw; border-radius: 6cqw; background: #0B2035; color: #FFFFFF; }
.hpl-t__card .hpl-t__rot { margin-top: 0 !important; color: #C9D8E4; }
.hpl-t__desliza { position: relative; margin-top: 3cqw !important; height: 13cqw; border-radius: 3.4cqw; background: #D8AC52; color: #0B2035; font: 600 4.2cqw/13cqw var(--f-texto); text-align: center; overflow: hidden; }
.hpl-t__desliza i { position: absolute; left: 1.3cqw; top: 1.3cqw; width: 10.4cqw; height: 10.4cqw; border-radius: 2.6cqw; background: #0B2035; }
.anima .hpl-t__desliza i { animation: hpl-desliza 5.5s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes hpl-desliza { 0%, 25% { translate: 0 0; } 45%, 80% { translate: calc(100cqw - 14cqw - 26cqw) 0; } 100% { translate: 0 0; } }
.hpl-t__lin { display: flex; justify-content: space-between; padding: 3.4cqw 0; border-top: 1px solid rgba(11, 32, 53, 0.1); font-size: 4.4cqw; }
.hpl-t__nota { margin-top: auto !important; display: flex; align-items: center; gap: 3cqw; padding: 5cqw; border-radius: 5cqw; background: #E6EFF6; font: 500 4cqw/1.35 var(--f-texto); color: #26323E; }
.hpl-t__nota svg { flex: none; width: 7cqw; height: 7cqw; color: #0B2035; }

/* entrada, uma vez: o texto sobe, os celulares chegam dos lados (o planeta nasce pelo JS) */
.anima .hpl__texto { opacity: 0; translate: -50% 24px; }
.anima .hpl-fone--esq { opacity: 0; margin-left: -140px; } .anima .hpl-fone--dir { opacity: 0; margin-left: 140px; }
.anima .hpl--entrou .hpl__texto { opacity: 1; translate: -50% 0; transition: opacity 700ms ease-out, translate 800ms cubic-bezier(.22, 1, .36, 1); }
.anima .hpl--entrou .hpl-fone { opacity: 1; margin-left: 0; transition: opacity 900ms ease-out 350ms, margin-left 1400ms cubic-bezier(.16, 1, .3, 1) 350ms; }

@media (max-width: 1279px) {
  .hpl__texto { width: min(640px, 56%); }
  .hpl__titulo { font-size: clamp(2.4rem, 0.6rem + 4vw, 4.4rem); }
}
@media (max-width: 900px) {
  .hpl { --hh: 960px; }
  .hpl__texto { width: calc(100% - 32px); top: calc(var(--altura-topo) + 34px); }
  .hpl__titulo { font-size: clamp(2.3rem, 1rem + 5.4vw, 3.6rem); }
  .hpl__apoio { font-size: 1.0625rem; }
  .hpl-fone--esq { width: 300px; left: calc(50% - 250px); top: 540px; rotate: -7deg; }
  .hpl-fone--dir { width: 300px; left: calc(50% - 50px); top: 515px; rotate: 7deg; }
}
@media (prefers-reduced-motion: reduce) {
  .anima .hpl__texto, .anima .hpl-fone, .anima .hpl-mac { opacity: 1 !important; margin-left: 0 !important; transition: none !important; }
  .anima .hpl__texto { translate: -50% 0; }
  .anima .hpl-t__desliza i { animation: none; }
}

/* JM, 30/09: o objeto centrado dentro da placa (antes passava da borda) e a troca entre objetos: o que sai desce e
   esmaece, o que entra sobe de baixo, dentro do recorte da placa */
.hpl-pc { position: relative; overflow: hidden; }
.hpl-pc img { position: absolute; left: 50%; top: 50%; width: 0.74em; height: 0.74em; margin: -0.37em 0 0 -0.37em; object-fit: contain;
  opacity: 0; translate: 0 0.5em; transition: opacity 420ms linear, translate 640ms cubic-bezier(.22, 1, .36, 1); }
.hpl-pc img.on { opacity: 1; translate: 0 0; }
.hpl-pc img.sai { opacity: 0; translate: 0 -0.45em; }
.hpl-pc--redonda img { width: 0.66em; height: 0.66em; margin: -0.33em 0 0 -0.33em; }
@media (prefers-reduced-motion: reduce) { .hpl-pc img { transition: none; } }

/* JM, 30/09: o mockup real (729 × 1347, o corpo ocupa a imagem inteira, já inclinado); a tela tem cantos mais
   redondos, como o vidro do aparelho, e os celulares dimensionam pela altura da primeira tela */
.hpl { --fw: min(400px, calc((var(--hh) - var(--altura-topo) - 90px) / 1.85)); }
.hpl-fone { aspect-ratio: 1464 / 2710; }
.hpl-fone__tela { border-radius: 47.9px; } /* raio da tela do modelo (build/fone/fone.json) */
.hpl-fone__sombra { left: 14%; right: 14%; bottom: -3%; height: 7%; }
.hpl-fone--esq { rotate: -4deg; left: max(calc(24px - var(--fw) * 0.1), calc(50% - 860px)); top: calc((var(--hh) + var(--altura-topo)) / 2 + 20px - var(--fw) * 0.925); }
.hpl-fone--dir { rotate: 4deg; left: min(calc(100% - 24px - var(--fw) * 0.9), calc(50% + 860px - var(--fw))); top: calc((var(--hh) + var(--altura-topo)) / 2 - 10px - var(--fw) * 0.925); }
@media (max-width: 900px) {
  .hpl-fone--esq { width: 196px; left: calc(50% - 184px); top: 548px; rotate: -4deg; }
  .hpl-fone--dir { width: 196px; left: calc(50% - 12px); top: 524px; rotate: 4deg; }
}
.hpl-t::before { display: none; } /* a ilha já vem no mockup */
.hpl-t { padding-top: 19cqw; }

/* ---------- JM, 09/10: o notebook é o mockup real (MacBook Pro) visto da esquerda, espelhando o celular ----------
   Da foto fica só a base (public/mac-base.webp, 1313 × 1326). A tampa é desenhada aqui numa caixa de 1060 × 733 (o aro vai
   de 6 a 1054 × 6 a 727; a tela, 1000 × 646, começa em 32 × 25) e o JS leva a caixa aos quatro cantos medidos na foto.
   Tamanho e altura casados com o celular: o pé do notebook na mesma linha do pé do celular, e o maior possível sem a tela
   passar da borda direita nem encostar no texto. Receita do recorte em build/mac/LEIA.md. */
.hpl-mac { --mw: min(calc(var(--fw) * 1.62), calc((50vw - 330px) / 0.73)); position: absolute; z-index: 3; width: var(--mw); aspect-ratio: 1313 / 1326;
  left: calc(50% + 312px); top: calc((var(--hh) + var(--altura-topo)) / 2 + 26px + var(--fw) * 0.925 - var(--mw) * 1.01); rotate: -4deg;
  translate: calc(var(--mx) * 16px) calc(var(--my) * 10px); }
.hpl-mac__base { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.5)); }
.hpl-mac__tampa { position: absolute; left: 0; top: 0; z-index: 2; width: 1060px; height: 733px; transform-origin: 0 0; visibility: hidden; }
.hpl--encaixado .hpl-mac__tampa { visibility: visible; }
/* aro de alumínio: mais largo à esquerda (a espessura da tampa, que aparece porque se vê da esquerda), fio claro no pé */
.hpl-mac__aro { position: absolute; left: 6px; top: 6px; width: 1048px; height: 721px; padding: 3px 3px 2.5px 7px; border-radius: 30px 30px 7px 7px;
  background: linear-gradient(90deg, #6F757C 0, #C9CED3 3px, #E6E9EC 5px, #A7ADB3 8px, #B9BEC3 40%, #9BA1A8 100%);
  box-shadow: inset 0 -2.5px 0 #D9DDE1, 0 14px 30px -10px rgba(0, 0, 0, 0.45); }
.hpl-mac__moldura { width: 100%; height: 100%; border-radius: 26px 26px 5px 5px; background: linear-gradient(180deg, #0B0C0E 0, #08090A 88%, #141518 100%); box-shadow: inset 0 0 0 1px #1C1E22; }
.hpl-mac__tela { position: absolute; left: 32px; top: 25px; width: 1000px; height: 646px; overflow: hidden; border-radius: 14px 14px 3px 3px; container-type: inline-size; background: #0B2035; }
.hpl-mac__tela::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 28%, rgba(255, 255, 255, 0) 42%); }
.hpl-mac__notch { position: absolute; left: 478px; top: 24px; z-index: 3; width: 110px; height: 19px; border-radius: 0 0 9px 9px; background: #08090A; }
.hpl-mac__notch::before, .hpl-mac__notch::after { content: ''; position: absolute; top: 0; width: 8px; height: 8px; background: radial-gradient(circle at 0 100%, transparent 7.5px, #08090A 8px); }
.hpl-mac__notch::before { left: -8px; } .hpl-mac__notch::after { right: -8px; transform: scaleX(-1); }
.hpl-mac__notch i { position: absolute; left: 50%; top: 6px; width: 6px; height: 6px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3A4250, #121519 70%); }

/* a tela (1 cqw = 10 px do painel de 1000 px) */
.hpl-m { position: absolute; inset: 0; display: grid; grid-template-columns: 20cqw minmax(0, 1fr); font-family: var(--f-texto); color: #FFFFFF;
  background: radial-gradient(60% 50% at 80% 0%, rgba(46, 111, 163, 0.35), transparent 70%), linear-gradient(160deg, #10304F 0%, #0A1C2F 75%); font-variant-numeric: tabular-nums; }
.hpl-m p, .hpl-m ul { margin: 0; padding: 0; list-style: none; }
.hpl-m svg { display: block; }
.hpl-m__lado { display: flex; flex-direction: column; gap: 2.4cqw; padding: 4.6cqw 1.8cqw 2.2cqw; background: rgba(4, 14, 25, 0.45); border-right: 0.1cqw solid rgba(255, 255, 255, 0.07); }
.hpl-m__marca { display: flex; align-items: center; gap: 1cqw; padding: 0 1cqw; font: 650 1.75cqw/1 var(--f-texto); }
.hpl-m__marca img { width: 2.8cqw; height: 2.8cqw; object-fit: contain; }
.hpl-m__lado ul { display: grid; gap: 0.5cqw; }
.hpl-m__lado li { display: flex; align-items: center; gap: 1.1cqw; padding: 1.05cqw 1cqw; border-radius: 1cqw; font-size: 1.4cqw; white-space: nowrap; color: #9FB2C3; }
.hpl-m__lado li svg { width: 1.9cqw; height: 1.9cqw; flex: none; }
.hpl-m__lado li.on { background: rgba(216, 172, 82, 0.14); color: #F2DFAF; box-shadow: inset 0.25cqw 0 0 #D8AC52; }
.hpl-m__quem { margin-top: auto !important; display: grid; grid-template-columns: auto 1fr; column-gap: 1cqw; align-items: center; padding: 1.2cqw 1cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.05); font-size: 1.35cqw; font-weight: 600; }
.hpl-m__quem span { grid-row: span 2; display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: #1F5A85; font-size: 1.1cqw; }
.hpl-m__quem small { font-size: 1.15cqw; font-weight: 500; color: #8FA3B5; }
.hpl-m__corpo { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 2cqw; padding: 4.4cqw 3cqw 2.6cqw; min-width: 0; }
.hpl-m__cab { display: flex; align-items: baseline; gap: 1.4cqw; }
.hpl-m__cab b { font: 400 2.9cqw/1 var(--f-titulo); letter-spacing: -0.01em; }
.hpl-m__cab span { font-size: 1.3cqw; color: #8FA3B5; }
.hpl-m__cab i { margin-left: auto; padding: 0.8cqw 1.4cqw; border-radius: 0.9cqw; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 0.1cqw rgba(255, 255, 255, 0.12); font-style: normal; font-size: 1.3cqw; font-weight: 600; }
.hpl-m__kpis { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 1.4cqw; }
.hpl-m__kpis p { display: grid; gap: 0.7cqw; padding: 1.7cqw 1.9cqw; border-radius: 1.5cqw; background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 0.1cqw rgba(255, 255, 255, 0.09); }
.hpl-m__kpis span { font-size: 1.2cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #A9BCCB; }
.hpl-m__kpis b { font-size: 3cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.hpl-m__kpis p:first-child b { font-size: 3.6cqw; }
.hpl-m__kpis small { font-size: 1.2cqw; color: #8FA3B5; }
.hpl-m__kpis small.ok { color: #E8CE93; }
.hpl-m__kpis p.ouro { background: linear-gradient(150deg, rgba(216, 172, 82, 0.2), rgba(216, 172, 82, 0.06)); box-shadow: inset 0 0 0 0.1cqw rgba(232, 206, 147, 0.3); }
.hpl-m__kpis p.ouro b { color: #E8CE93; }
.hpl-m__baixo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.4cqw; min-height: 0; }
.hpl-m__graf, .hpl-m__lote { display: grid; min-height: 0; padding: 1.7cqw 1.9cqw; border-radius: 1.5cqw; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 0.1cqw rgba(255, 255, 255, 0.08); }
.hpl-m__graf { grid-template-rows: auto minmax(0, 1fr) auto; gap: 1cqw; }
.hpl-m__tit { font-size: 1.4cqw; font-weight: 650; color: #DCE6EE; }
.hpl-m__area { position: relative; min-height: 0; }
.hpl-m__area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hpl-m__grade { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hpl-m__linha { fill: none; stroke: #E0B65E; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* o degradê do preenchimento é máscara CSS: o degradê do SVG dentro da tampa (matrix3d) saía como uma faixa reta */
.hpl-m__preench { fill: rgba(216, 172, 82, 0.5); -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%); mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%); }
.hpl-m__ponto { position: absolute; right: 0; top: 11.76%; width: 1.1cqw; height: 1.1cqw; translate: 50% -50%; border-radius: 50%; background: #F2DFAF; box-shadow: 0 0 0 0.35cqw rgba(216, 172, 82, 0.28); }
.hpl-m__eixo { display: flex; justify-content: space-between; font-size: 1.15cqw; color: #7F94A7; }
.hpl-m__lote { align-content: start; gap: 1cqw; }
.hpl-m__lote ul { display: grid; }
.hpl-m__lote li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1cqw; padding: 0.95cqw 0; border-bottom: 0.1cqw solid rgba(255, 255, 255, 0.07); font-size: 1.3cqw; }
.hpl-m__lote li span { display: grid; gap: 0.2cqw; font-weight: 600; }
.hpl-m__lote li small { font-size: 1.05cqw; font-weight: 500; color: #8FA3B5; }
.hpl-m__lote li b { font-weight: 600; white-space: nowrap; }
.hpl-m__lote li i { display: grid; place-items: center; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: rgba(155, 226, 178, 0.16); color: #9BE2B2; font-style: normal; font-size: 1cqw; }
.hpl-m__total { display: grid; gap: 0.4cqw; padding-top: 0.4cqw; font-size: 1.15cqw; color: #A9BCCB; }
.hpl-m__total b { white-space: nowrap; font-size: 2.3cqw; color: #FFFFFF; letter-spacing: -0.02em; }
.hpl-m__bt { display: grid; place-items: center; padding: 1.15cqw; border-radius: 1cqw; background: #D8AC52; color: #0B2035; font-size: 1.35cqw; font-weight: 700; }
.hpl-m__senha { text-align: center; font-size: 1.1cqw; color: #E8CE93; }
.anima .hpl-mac { opacity: 0; margin-left: 140px; }
.anima .hpl--entrou .hpl-mac { opacity: 1; margin-left: 0; transition: opacity 900ms ease-out 350ms, margin-left 1400ms cubic-bezier(.16, 1, .3, 1) 350ms; }
@media (max-width: 900px) { .hpl-fone--esq { z-index: 4; } }

/* tablet deitado e notebook pequeno (900 a 1279): ao lado do texto não cabe; o notebook desce para o lado do botão */
@media (min-width: 900px) and (max-width: 1279px) {
  .hpl-mac { --mw: min(calc(var(--fw) * 1.25), calc((50vw - 172px) / 0.73)); left: calc(50% + 160px); top: min(calc(var(--hh) * 0.58), calc(var(--hh) - var(--mw) * 0.92)); }
}
/* JM, 09/10: na headline da home os objetos ficam soltos, sem a placa de vidro, e maiores. Sem a placa, o recorte da troca
   apareceria como uma borda dura: a troca vira só subir e esmaecer, sem recorte */
.hpl .hpl-pc { width: 1.12em; height: 0.86em; margin: 0 0.04em; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
.hpl .hpl-pc img { width: 1.08em; height: 1.08em; margin: -0.56em 0 0 -0.54em;
  filter: drop-shadow(0 0.04em 0.04em rgba(0, 0, 0, 0.45)) drop-shadow(0 0.14em 0.18em rgba(0, 0, 0, 0.35)); translate: 0 0.22em; }
.hpl .hpl-pc img.on { translate: 0 0; }
.hpl .hpl-pc img.sai { translate: 0 -0.22em; }

/* JM, 09/10: os aparelhos na proporção certa. A headline, o subtítulo e a coluna de texto ficam menores, o celular um
   pouco menor, e o notebook ganha o espaço (até 1,9 × o celular, inteiro na tela; o tamanho e a posição vêm do JS) */
@media (min-width: 900px) {
  .hpl { --fw: min(360px, calc((var(--hh) - var(--altura-topo) - 120px) / 1.95)); }
  .hpl .hpl__texto { left: var(--tx, 50%); width: min(620px, 46%); top: calc(var(--altura-topo) + 60px); }
  .hpl .hpl__titulo { font-size: clamp(2.4rem, 0.6rem + 3.4vw, 4.4rem); }
  .hpl .hpl__apoio { max-width: 36ch; margin-top: 18px; font-size: 1.0625rem; }
  .hpl .hpl__acoes { margin-top: 22px; }
}
/* tablet deitado e notebook pequeno: o texto aperta um pouco mais para os dois aparelhos caberem inteiros ao lado */
@media (min-width: 900px) and (max-width: 1199px) {
  .hpl .hpl__texto { width: min(420px, 40%); }
  .hpl .hpl__titulo { font-size: clamp(2.1rem, 0.4rem + 3.2vw, 2.7rem); }
  .hpl .hpl__apoio { max-width: 30ch; font-size: 0.9375rem; }
  .hpl .hpl__acoes .bt--grande { font-size: 1rem; }
}

/* hero.css */
/* Hero · névoa azul da marca, nome gigante apagado ao fundo (Guarrent), texto à esquerda e objeto 3D à direita (NovaWave) */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  padding: calc(var(--altura-topo) + clamp(16px, 4svh, 56px)) 0 clamp(44px, 7vw, 120px);
  background:
    radial-gradient(58% 66% at 76% 38%, rgba(88, 145, 175, 0.34), transparent 70%),
    radial-gradient(52% 60% at 6% 4%, rgba(23, 66, 106, 0.55), transparent 70%),
    linear-gradient(180deg, #0C2338 0%, #0A1E31 52%, #0B2035 100%);
}
.hero__fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
/* auroras que respiram devagar e dois feixes de luz atravessando o hero */
.hero__aura { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.85; }
.hero__aura--1 { width: 46vw; height: 46vw; right: 6vw; top: 4vh; background: radial-gradient(circle, rgba(88, 145, 175, 0.55), transparent 65%); }
.hero__aura--2 { width: 38vw; height: 38vw; left: -8vw; bottom: -12vh; background: radial-gradient(circle, rgba(201, 155, 60, 0.18), transparent 62%); }
.anima .hero__aura--1 { animation: respira 16s ease-in-out infinite alternate; }
.anima .hero__aura--2 { animation: respira 22s ease-in-out infinite alternate-reverse; }
@keyframes respira { to { translate: -4vw 3vh; scale: 1.14; } }
.hero__feixe {
  position: absolute; top: -30%; height: 170%; width: 26vw;
  background: linear-gradient(90deg, transparent, rgba(140, 190, 220, 0.5), transparent);
  filter: blur(26px); transform: rotate(16deg); opacity: 0.55;
}
.hero__feixe--1 { left: 26%; }
.hero__feixe--2 { left: 58%; width: 12vw; opacity: 0.4; }
.anima .hero__feixe--1 { animation: varre 19s linear infinite; }
.anima .hero__feixe--2 { animation: varre 26s linear infinite reverse; }
@keyframes varre { 0% { translate: -30vw 0; } 100% { translate: 60vw 0; } }

/* peças de vidro flutuando em volta do objeto (referência: Grow your business) */
.chips { position: absolute; inset: 0; pointer-events: none; }
.chip {
  position: absolute; display: grid; place-items: center; width: clamp(48px, 5vw, 74px); aspect-ratio: 1;
  border-radius: 22%; color: #fff;
  background: linear-gradient(145deg, rgba(233, 242, 248, 0.16), rgba(88, 145, 175, 0.12));
  border: 1px solid rgba(233, 242, 248, 0.22);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.chip svg { width: 46%; height: 46%; }
.chip--1 { left: 2%; top: 16%; color: var(--azul-claro); }
.chip--2 { right: 4%; top: 6%; color: var(--creme); }
.chip--3 { right: 14%; bottom: 8%; color: var(--ouro-claro); }
.anima .chip--1 { animation: bobo 9s ease-in-out infinite; }
.anima .chip--2 { animation: bobo 11s ease-in-out 0.8s infinite reverse; }
.anima .chip--3 { animation: bobo 13s ease-in-out 0.3s infinite; }
@keyframes bobo { 50% { translate: 0 -14px; rotate: 4deg; } }
@media (max-width: 1023px) { .chips { display: none; } }

.hero__nome path { fill: inherit; }

/* ---------- hero v3 (referências Formula + Logify): título gigante centrado,
   uma peça inline cruzando o texto, o 3D no centro e dois cartões flanqueando ---------- */
.hero__env { position: relative; z-index: 2; display: grid; gap: clamp(22px, 3.4svh, 40px); }
.hero__titulo { display: grid; gap: 0; text-align: center; justify-items: center; }
.hero__l1, .hero__l2 {
  display: block; font-size: clamp(2.35rem, 0.6rem + 5.7vw, 6.1rem); font-weight: 680;
  letter-spacing: -0.055em; line-height: 0.92; color: #fff;
}
.hero__l2 { color: var(--azul-claro); }
/* a peça inline: um selo de conferido dentro da frase, no lugar do espaço */
.hero__chip {
  display: inline-grid; place-items: center; vertical-align: 0.02em;
  width: 1.3em; height: 0.78em; margin-inline: 0.17em; border-radius: 0.3em;
  background: linear-gradient(150deg, var(--ouro-claro), var(--ouro));
  color: var(--marinho); box-shadow: 0 14px 30px -12px rgba(216, 172, 82, 0.8);
}
.hero__chip svg { width: 0.46em; height: 0.46em; }
.anima .hero__chip { animation: chip-entra 900ms cubic-bezier(.2, 1.3, .4, 1) 480ms both; }
@keyframes chip-entra { from { scale: 0 1; opacity: 0; } }

.hero__baixo { display: grid; gap: clamp(20px, 3vw, 34px); align-items: center; }
.hero__dizer { display: grid; gap: clamp(16px, 2.4svh, 26px); justify-items: start; }
.hero__apoio { max-width: 34ch; color: var(--tinta-2); font-size: clamp(1rem, 0.94rem + 0.24vw, 1.125rem); }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.hero__numeros { justify-content: center; }

/* a cena: 3D no centro, cartão de nota à esquerda, selo de aprovação à direita */
.cena { position: relative; display: grid; justify-items: center; }
.hero__lado { display: grid; gap: 34px; align-content: center; justify-items: stretch; }
.cena__elos { width: 100%; max-width: none; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.62)); }
.anima .cena__elos { animation: flutua 9s ease-in-out 1.2s infinite; }
@keyframes flutua { 50% { translate: 0 -14px; } }

.cena__nota, .cena__selo {
  display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(158deg, rgba(23, 66, 106, 0.88), rgba(8, 26, 44, 0.94));
  border: 1px solid rgba(233, 242, 248, 0.18);
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cena__nota-topo { display: flex; align-items: center; gap: 10px; }
.cena__nota-topo b { font-size: 1.75rem; font-weight: 660; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.cena__nota-txt { font-size: 0.8125rem; line-height: 1.4; color: #D2DEEA; max-width: 22ch; }
.estrelas { display: inline-flex; gap: 2px; color: var(--ouro); }
.cena__selo { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.cena__selo-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(216, 172, 82, 0.18); color: var(--ouro-claro); }
.cena__selo-ic svg { width: 21px; height: 21px; }
.cena__selo-txt { display: grid; gap: 3px; font-size: 0.8125rem; line-height: 1.4; color: #D2DEEA; max-width: 24ch; }
.cena__selo-txt b { font-size: 0.9375rem; font-weight: 640; color: #fff; }

.cena__aviso {
  position: relative; z-index: 3;
  display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; border-radius: 16px;
  background: linear-gradient(158deg, rgba(23, 66, 106, 0.9), rgba(9, 28, 46, 0.95));
  color: #EAF2F8;
  border: 1px solid rgba(233, 242, 248, 0.18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 36px 60px -24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cena__aviso-app { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #25D366; color: #fff; }
.cena__aviso-app .bt__whats { width: 19px; height: 19px; }
.cena__aviso-selo { margin-left: auto; padding: 3px 8px; border-radius: 6px; background: rgba(233, 242, 248, 0.12); color: #C6DCEB; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.cena__aviso-txt { display: grid; gap: 4px; font-size: 0.84rem; line-height: 1.35; }
.cena__aviso-txt b { display: flex; align-items: baseline; gap: 8px; font-weight: 680; }
.cena__aviso-txt i { font-style: normal; font-size: 0.84em; font-weight: 500; color: #BFD8E9; }
.anima .cena__aviso { animation: sobe 800ms var(--curva) 1.05s both; }

/* três números com fio vertical entre eles */
.numeros { display: grid; grid-auto-flow: column; justify-content: start; max-width: 640px; }
.numeros > div { padding: 2px clamp(16px, 3vw, 32px); border-left: 1px solid var(--fio-forte); }
.numeros > div:first-child { padding-left: 0; border-left: 0; }
.numeros dd { display: grid; gap: 6px; }
.numeros strong { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 640; letter-spacing: -0.04em; line-height: 1; }
.numeros span { font-size: 0.875rem; line-height: 1.35; color: var(--tinta-2); max-width: 17ch; }
.escuro .numeros > div { border-color: var(--fio-escuro); }
.escuro .numeros span { color: var(--creme-2); }

/* objeto 3D das páginas internas (a assinatura de cada página) */
.objeto { position: relative; aspect-ratio: 16 / 13; }
.objeto__vidro i { position: absolute; border-radius: 34px; transform: perspective(1600px) rotateY(-18deg) rotateX(5deg); }
.painel { display: none; }
.objeto__vidro i:first-child {
  inset: 10% 4% 8% 14%;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.3) 46%, transparent 62%),
    radial-gradient(90% 70% at 20% 10%, rgba(169, 203, 224, 0.5), transparent 62%),
    linear-gradient(155deg, #2F6E9C 0%, #164B74 48%, #0A2036 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 50px 90px -40px rgba(10, 31, 53, 0.6);
}
.objeto__img { position: relative; z-index: 1; width: 100%; max-width: none; margin-left: 4%; margin-top: -4%; }
.anima .objeto__img { animation: flutua 8s ease-in-out 1.4s infinite; }

.cartao-vidro {
  width: 250px; padding: 18px 18px 20px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(23, 66, 106, 0.94), rgba(10, 31, 53, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 60px -24px rgba(10, 31, 53, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--creme);
}
.cartao-vidro__topo { display: flex; align-items: center; justify-content: space-between; }
.cartao-vidro__topo .mono { font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--creme-2); }
.cartao-vidro__icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ouro); color: var(--marinho); }
.cartao-vidro__icone svg { width: 20px; height: 20px; }
.cartao-vidro__titulo { margin-top: 22px; font-size: 1.1875rem; font-weight: 620; letter-spacing: -0.02em; color: var(--creme); }
.cartao-vidro__texto { margin-top: 6px; font-size: 0.875rem; line-height: 1.45; color: var(--creme-2); }
.cartao-vidro__barra { display: block; margin-top: 16px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.cartao-vidro__barra i { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg, var(--ouro), var(--ouro-claro)); }
.objeto__cartao { position: absolute; right: 0; bottom: 6%; }

.hero__curva {
  position: absolute; left: -15%; right: -15%; bottom: -1px; height: clamp(56px, 9vw, 150px); z-index: 1;
  background: var(--papel); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* entrada */
.anima .hero__titulo, .anima .hero__dizer > *, .anima .cena > * { animation: sobe 900ms var(--curva) both; }
.anima .hero__dizer > :nth-child(2) { animation-delay: 140ms; }
.anima .cena__nota { animation-delay: 420ms; }
.anima .cena__palco { animation-delay: 200ms; }
.anima .cena__selo { animation-delay: 560ms; }
.anima .hero__numeros { animation: sobe 900ms var(--curva) 680ms both; }
.anima .hero__objeto { animation: surge 1300ms var(--curva) 120ms both; }
@keyframes sobe { from { opacity: 0; translate: 0 22px; } }
@keyframes surge { from { opacity: 0; scale: 0.94; } }

@media (min-width: 1024px) {
  .hero { min-height: min(100svh, 980px); display: flex; align-items: center; padding-block: calc(var(--altura-topo) + 24px) clamp(44px, 5vw, 92px); }
  .hero__l1, .hero__l2 { white-space: nowrap; }
  .hero__baixo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 2vw, 30px); }
  /* o 3D sobe e cruza por trás do título (o título fica na frente) */
  .cena { margin-top: clamp(-170px, -10vw, -90px); width: 136%; margin-inline: -18%; }
  .hero__titulo { position: relative; z-index: 3; }
  .cena { position: relative; z-index: 1; }
  .hero__dizer, .hero__lado { position: relative; z-index: 2; }
  .cena__aviso { margin-right: -6%; width: min(330px, 100%); justify-self: end; }
}
@media (max-width: 1023px) {
  .hero__baixo { grid-template-columns: 1fr; }
  .hero__dizer { justify-items: center; text-align: center; }
  .hero__apoio { max-width: 46ch; }
  .cena { gap: 16px; }
  .cena__elos { width: min(100%, 380px); margin-inline: auto; }
  .cena__nota, .cena__selo { width: min(100%, 420px); }
  .cena__nota { order: 2; }
  .cena__selo { order: 3; }
  .cena__aviso { position: static; width: 100%; margin-top: 10px; }
  .cena__aviso-selo { display: none; }
  .numeros { justify-content: center; }
  .hero__objeto { width: min(100%, 560px); justify-self: center; margin-top: 4px; }
  .cartao-vidro { width: 210px; padding: 14px; }
  .cartao-vidro__titulo { margin-top: 14px; font-size: 1.0625rem; }
  .objeto__cartao { right: 0; bottom: 0; }
}
@media (max-width: 599px) {
  .hero__acoes > * { flex: 1 1 100%; justify-content: space-between; }
  .numeros > div { padding-inline: 10px; }
  .numeros span { font-size: 0.8125rem; }
}

/* ---------- hero + painel (opção C): um palco só ---------- */
.hp { position: relative; isolation: isolate; background: linear-gradient(180deg, #0C2338 0%, #0A1E31 60%, #081B2D 100%); }
.hp__sentinela { position: absolute; left: 0; top: 0; width: 1px; height: 100svh; pointer-events: none; }
.hp__fixo { position: relative; padding: calc(var(--altura-topo) + clamp(18px, 4svh, 48px)) 0 48px; }
.hp__fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(45% 50% at 78% 30%, rgba(88, 145, 175, 0.34), transparent 70%),
  radial-gradient(60% 45% at 50% 100%, rgba(88, 145, 175, 0.3), transparent 70%),
  radial-gradient(circle at 50% 130%, transparent 40%, rgba(233, 242, 248, 0.06) 40.2%, transparent 40.6%),
  radial-gradient(circle at 50% 130%, transparent 55%, rgba(233, 242, 248, 0.05) 55.2%, transparent 55.6%),
  radial-gradient(circle at 50% 130%, transparent 70%, rgba(233, 242, 248, 0.04) 70.2%, transparent 70.6%); }
.hp__topo { position: relative; z-index: 3; display: grid; justify-items: center; text-align: center; }
.hp__texto { display: grid; gap: clamp(14px, 2.2svh, 22px); justify-items: center; }
.hp__titulo { display: grid; }
.hp__l { display: block; font-size: clamp(2.2rem, 0.6rem + 5.2vw, 5.8rem); font-weight: 500; letter-spacing: -0.022em; line-height: 0.95; color: #fff; white-space: nowrap; }
.hp__l--azul { color: var(--azul-claro); }
.hp__apoio { max-width: 42ch; color: var(--tinta-2); font-size: clamp(1rem, 0.94rem + 0.24vw, 1.125rem); }
.hp__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; }
.hp__prova { font-size: 0.875rem; color: #C6D7E5; }
.hp__prova b { color: var(--ouro-claro); }
.hp__lugar { display: block; aspect-ratio: 16 / 13; width: 100%; }
.hp__elos { display: block; width: min(420px, 80%); max-width: none; margin: 0 auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.6)); }
.hp__palco { margin-top: 24px; perspective: 1800px; }
.hp__janela {
  position: relative; overflow: hidden; width: min(100% - 2 * var(--margem), 1180px); margin-inline: auto;
  border-radius: 18px; background: linear-gradient(168deg, #10365A 0%, #0A2340 46%, #06182A 100%);
  box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.18), 0 -24px 90px -24px rgba(88, 145, 175, 0.45), 0 60px 110px -40px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 0; will-change: transform;
}
.hp__janela .pn__bloco { opacity: 1; }
.hp__dica { display: none; }
@media (max-width: 1023px) { .hp__l { font-size: clamp(2.1rem, 0.4rem + 8.6vw, 3.6rem); white-space: normal; } }
@media (max-width: 420px) { .hp__apoio { font-size: 0.9375rem; } }
@media (max-width: 859px) { .anima .hp__dica { display: none; } }

/* com animação: o palco fica preso e a rolagem conduz tudo (site.js · componente hp) */
.anima .hp { height: 235vh; }
/* Credix (JM, 24/09): no desktop, depois de rolar por dentro, o painel vai para a direita em perspectiva
   e o texto entra à esquerda. No celular o painel só sobe e rola. */
.hp__lado { display: none; }
@media (min-width: 1024px) {
  .anima .hp { height: 330vh; }
  .anima .hp__lado { position: absolute; z-index: 5; left: max(var(--margem), calc(50% - 600px)); top: 50%; translate: 0 -40%; width: min(34vw, 430px);
    display: grid; gap: 16px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
  .hp__lado-tit { font: 500 clamp(2rem, 1.1rem + 1.6vw, 2.9rem)/1.05 var(--f-titulo); letter-spacing: -0.018em; color: #fff; text-wrap: balance; }
  .hp__lado-txt { color: var(--tinta-2); max-width: 38ch; }
  .hp__lado-lista { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--fio-forte); }
  .hp__lado-lista li { display: flex; gap: 12px; align-items: baseline; font-size: 0.9375rem; color: var(--tinta); }
  .hp__lado-lista li::before { content: ''; flex: none; width: 9px; height: 5px; border-left: 2px solid var(--ouro); border-bottom: 2px solid var(--ouro); rotate: -45deg; translate: 0 -3px; }
}
.anima .hp__fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; padding-bottom: 0; }
.anima .hp__elos { position: absolute; z-index: 6; left: 0; top: 0; margin: 0; transform-origin: 0 0; will-change: transform; }
.anima .hp__palco { position: absolute; z-index: 4; left: 0; right: 0; top: 0; margin: 0; will-change: transform; }
.anima .hp__janela .pn__bloco { opacity: 0.32; }
.anima .hp__janela .pn__bloco--aceso { opacity: 1; }
.anima .hp__dica { display: block; white-space: nowrap; position: absolute; z-index: 5; left: 50%; bottom: 18px; translate: -50% 0; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--azul-claro); }
.anima .hp__topo { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .anima .hp { height: auto; }
  .anima .hp__fixo { position: relative; height: auto; overflow: visible; padding-bottom: 48px; }
  .anima .hp__elos { position: static; margin: 0 auto; }
  .anima .hp__palco { position: static; margin-top: 24px; }
  .anima .hp__janela .pn__bloco { opacity: 1; }
  .anima .hp__dica { display: none; }
  .anima .hp__lado { display: none; }
}

/* ---------- selo da frase do topo: só ele muda (ícone que se desenha + fundo que sobe em onda) ---------- */
.selo { position: relative; overflow: hidden; isolation: isolate; background: var(--selo-a); }
.selo[data-tom="0"] { --selo-a: linear-gradient(150deg, #E8CE93, #D8AC52); --selo-b: linear-gradient(150deg, #F4E2B4, #C99B3C); }
.selo[data-tom="1"] { --selo-a: linear-gradient(150deg, #F4E2B4, #C99B3C); --selo-b: linear-gradient(150deg, #E8CE93, #D8AC52); }
.selo__onda { position: absolute; inset: 0; z-index: 0; background: var(--selo-b); clip-path: circle(0% at 50% 115%); }
.selo--onda .selo__onda { clip-path: circle(150% at 50% 115%); transition: clip-path 720ms cubic-bezier(.22, 1, .28, 1); }
.selo__ic { position: absolute; z-index: 1; left: 50%; top: 50%; width: 0.5em; height: 0.5em; margin: -0.25em 0 0 -0.25em; overflow: visible;
  fill: none; stroke: var(--marinho); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.selo__ic > * { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.selo__ic--on { opacity: 1; }
.selo__ic--on > * { stroke-dashoffset: 0; transition: stroke-dashoffset 640ms cubic-bezier(.3, .7, .2, 1) 260ms; }
.selo__ic--on > :nth-child(2) { transition-delay: 420ms; }
.selo__ic--on > :nth-child(3) { transition-delay: 560ms; }
.selo__ic--sai { opacity: 0; translate: 0 -70%; transition: opacity 280ms linear, translate 460ms cubic-bezier(.4, 0, .2, 1); }
.selo__ic--sai > * { stroke-dashoffset: 0; }
.anima .selo__ic--primeiro > * { animation: selo-desenha 700ms cubic-bezier(.3, .7, .2, 1) 1300ms both; }
@keyframes selo-desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.selo--mola { animation: selo-mola 720ms cubic-bezier(.3, 1.4, .5, 1); }
@keyframes selo-mola { 0% { scale: 1; } 28% { scale: 0.9 0.96; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .selo__ic > * { stroke-dashoffset: 0; } }

/* historia.css */
/* ---------- História da Conex · foto das sócias + pilha de cartões para arrastar ---------- */
.historia__grade { display: grid; gap: clamp(26px, 4vw, 64px); align-items: stretch; }
@media (min-width: 1024px) { .historia__grade { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
.historia__foto { position: relative; margin: 0; min-height: clamp(420px, 44vw, 600px); border-radius: var(--raio); overflow: hidden;
  display: grid; place-items: center; background: linear-gradient(160deg, #1A4166, #0B2239); box-shadow: inset 0 0 0 1px var(--fio-forte); }
.historia__vazia { display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--tinta-2); padding: 24px; }
.historia__elos { width: 140px; height: auto; opacity: 0.5; }
.historia__vazia b { font: 700 0.75rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ouro-claro); }
.historia__leg { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 14px 16px; border-radius: 14px; background: rgba(6, 20, 33, 0.85); font-size: 0.875rem; color: var(--tinta-2); }
.historia__leg b { display: block; font: 500 1.25rem/1.15 var(--f-titulo); color: var(--tinta); }
.historia__lado { display: grid; gap: 20px; align-content: center; }
.historia__lado h2 { font-size: clamp(2rem, 1.1rem + 2.2vw, 3rem); max-width: 15ch; }

/* os cartões: sem JS, uma lista; com JS, uma pilha */
.baralho { display: grid; gap: 12px; outline-offset: 6px; }
.carta { display: grid; gap: 10px; align-content: start; padding: 22px 24px; border-radius: 18px; background: #F4F7FA; color: #0B2035; }
.carta__rot { display: flex; justify-content: space-between; font: 700 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #3E5367; }
.carta h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); color: #0B2035; }
.carta__txt { font-size: 1.0625rem; line-height: 1.55; color: #22384D; max-width: 46ch; }
.carta__conf { display: inline-block; vertical-align: 0.3em; margin-left: 6px; padding: 3px 7px; border-radius: 5px; background: #F3E3BD; color: #4A3306;
  font: 700 0.625rem/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.baralho--vivo { display: grid; grid-template-areas: 'c'; gap: 0; min-height: 250px; padding: 0 30px 30px 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.baralho--vivo .carta { grid-area: c; cursor: grab; box-shadow: 0 24px 40px -26px rgba(0, 0, 0, 0.85);
  transition: transform 520ms cubic-bezier(.3, 1.2, .5, 1), opacity 300ms linear; transform-origin: 50% 110%; }
.baralho--vivo .carta[data-pos="0"] { z-index: 4; }
.baralho--vivo .carta[data-pos="1"] { z-index: 3; transform: translate(12px, 12px) rotate(2.5deg) scale(0.97); }
.baralho--vivo .carta[data-pos="2"] { z-index: 2; transform: translate(22px, 22px) rotate(-1.8deg) scale(0.94); }
.baralho--vivo .carta[data-pos="3"] { z-index: 1; transform: translate(30px, 30px) scale(0.91); opacity: 0; }
.baralho--vivo .carta > * { transition: opacity 250ms linear; }
.baralho--vivo .carta:not([data-pos="0"]) > * { opacity: 0; }
.baralho--vivo .carta.arrastando { transition: none; cursor: grabbing; }
.baralho--vivo .carta.voa { opacity: 0; transition: transform 420ms cubic-bezier(.4, 0, .2, 1), opacity 380ms linear; }
.baralho--dica .carta[data-pos="0"] { animation: carta-dica 1.4s var(--curva) 300ms; }
@keyframes carta-dica { 0%, 100% { transform: none; } 35% { transform: translate(-46px, 2px) rotate(-5deg); } 60% { transform: translate(8px, 0) rotate(1deg); } }
.baralho__ctl { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.baralho__bt { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(233, 242, 248, 0.08); color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--fio-forte); }
.baralho__bt svg { width: 20px; height: 20px; }
.baralho__dica { font-size: 0.875rem; color: var(--tinta-2); }

.historia__fatos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 0; border-top: 1px solid var(--fio); }
@media (max-width: 639px) { .historia__fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.historia__fatos div { padding: 16px 12px 0 0; }
.historia__fatos dd { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--tinta-2); }
.historia__fatos b { display: block; font: 500 1.75rem/1.1 var(--f-titulo); color: var(--tinta); margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .baralho--dica .carta[data-pos="0"] { animation: none; } .baralho--vivo .carta { transition: none; } }

/* interna.css */
/* ---------- Páginas internas · v3 (JM, 28/09): o sistema do hero da home aplicado aos serviços ----------
   docs/internas/PLANO.md §2. Cartão de cor por serviço (BPO azul-névoa, ERP marinho, Processos dourado claro), peças
   3D no título (hero-cartao.css › .hc-pc--img), a tela do serviço à direita. O H1 mede pela coluna de texto (cqi). */
.pi { position: relative; z-index: 3; background: #F1E5CC; padding: calc(var(--altura-topo) + 6px) clamp(12px, 2vw, 28px) clamp(28px, 4vw, 56px); color: #0B2035; }
.pi__sentinela { position: absolute; left: 0; top: 0; width: 1px; height: 100svh; pointer-events: none; }
.pi__cartao { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(20px, 3vw, 48px); max-width: 1360px; margin: 0 auto;
  min-height: min(calc(100svh - var(--altura-topo) - 34px), 680px); padding: clamp(34px, 4.4vw, 68px) clamp(26px, 4.4vw, 68px); border-radius: 34px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.pi--bpo .pi__cartao { background: radial-gradient(70% 90% at 12% 10%, #DDEBF4 0%, rgba(221, 235, 244, 0) 60%), linear-gradient(135deg, #C9DFEE 0%, #A9CBE0 100%); }
.pi--erp .pi__cartao { background: radial-gradient(70% 90% at 12% 8%, #F4F8FB 0%, rgba(244, 248, 251, 0) 60%), linear-gradient(135deg, #E8F0F6 0%, #D3E2EE 100%); }
.pi--processos .pi__cartao { background: radial-gradient(70% 90% at 12% 10%, #F2E2BD 0%, rgba(242, 226, 189, 0) 60%), linear-gradient(135deg, #EBD6A6 0%, #E3C47E 100%); }

.pi__texto { position: relative; z-index: 2; align-self: center; display: grid; justify-items: start; gap: clamp(16px, 2.4svh, 26px); container-type: inline-size; min-width: 0; }
.pi__migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #26323E; }
.pi__migalha a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine){.pi__migalha a:hover{ text-decoration-color: #9A7120; }}
.pi__titulo { display: grid; width: 100%; font: 600 clamp(1.9rem, 10.5cqi, 4.5rem)/1.04 var(--f-texto); letter-spacing: -0.04em; color: inherit; }
.pi__titulo > span[aria-hidden] { display: grid; }
.pi__l { display: block; overflow: clip; overflow-clip-margin: 0.2em; padding-block: 0.03em; white-space: nowrap; }
.pi__m { display: inline-block; }
.pi__apoio { max-width: 46ch; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.5; color: #14283B; text-wrap: pretty; }
.pi__acoes { display: flex; align-items: center; }
.pi__mais:empty { display: none; }
.pi__tela { position: relative; z-index: 1; min-height: 500px; }

/* as peças aparecem depois das linhas, como na home (lá é .hc--pecas) */
.anima .pi .hc-pc--img { scale: 0.6; opacity: 0; transition: scale 700ms cubic-bezier(.3, 1.4, .5, 1), opacity 300ms linear; }
.anima .pi.pi--pecas .hc-pc--img { scale: 1; opacity: 1; }
.anima .pi.pi--pecas .pi__l:nth-child(2) .hc-pc--img { transition-delay: 180ms; }
.anima .pi.pi--pecas .pi__l:nth-child(3) .hc-pc--img { transition-delay: 360ms; }

/* entrada: a mesma da home (linhas sobem do recorte, apoio e ações em seguida, a tela sobe) */
.anima .pi__m { translate: 0 110%; animation: ht-sobe 1100ms cubic-bezier(.16, 1, .3, 1) 120ms forwards; }
.anima .pi__l:nth-child(2) .pi__m { animation-delay: 230ms; }
.anima .pi__l:nth-child(3) .pi__m { animation-delay: 340ms; }
.anima :is(.pi__migalha, .pi__apoio, .pi__acoes, .pi__mais) { opacity: 0; translate: 0 24px; animation: ht-entra 900ms cubic-bezier(.16, 1, .3, 1) 480ms forwards; }
.anima .pi__migalha { animation-delay: 60ms; }
.anima .pi__acoes { animation-delay: 580ms; }
.anima .pi__mais { animation-delay: 680ms; }
.anima .pi__tela > * { opacity: 0; translate: 0 80px; animation: ht-entra 1200ms cubic-bezier(.16, 1, .3, 1) 300ms forwards; }

/* cabeçalho sobre o marfim do topo (igual à home) */
body:has(.pi) .topo:not(.topo--ilha) { --tinta: #0B2035; --tinta-2: #26323E; --fio-forte: rgba(11, 32, 53, 0.24); --nevoa: rgba(11, 32, 53, 0.06); --creme: #0B2035; color: #0B2035; }
body:has(.pi) .topo:not(.topo--ilha) .topo__barra { background-color: rgba(241, 229, 204, 0.94); }
body:has(.pi) .topo:not(.topo--ilha) .topo__whats { background: #0B2035; color: #FFFFFF; box-shadow: none; }
body:has(.pi) .topo:not(.topo--ilha) .topo__whats .bt__caixa { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
body:has(.pi) .topo:not(.topo--ilha) .bt-icone { background: #0B2035; color: #FFFFFF; box-shadow: none; }
.pi + .tom-marfim { padding-top: clamp(24px, 4vw, 56px); }

@media (max-width: 1023px) {
  .pi__cartao { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 32px 20px 0; border-radius: 26px; overflow: clip; }
  .pi__tela { min-height: 0; height: min(96vw, 440px); margin-top: 4px; }
  .pi__acoes { width: 100%; }
  .pi__acoes .bt { width: 100%; justify-content: center; }
}

/* ---------- partes comuns das seções internas ---------- */
.in-cabeca { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.in-cabeca h2 { font: 400 var(--t-h2)/1.08 var(--f-titulo); letter-spacing: -0.02em; text-wrap: balance; }
.in-cabeca p { max-width: 56ch; font-size: var(--t-corpo); line-height: 1.55; }
.tom-marfim .in-cabeca p { color: #26323E; }
.secao:not(.tom-marfim) .in-cabeca p { color: #C9D8E4; }
/* CTA de texto no meio da página */
.in-meio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: clamp(28px, 4vw, 44px); font-size: 1.0625rem; }
.in-meio a { font-weight: 600; color: inherit; text-decoration: underline; text-decoration-color: #D8AC52; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine){.in-meio a:hover{ text-decoration-thickness: 0.5em; text-underline-offset: -0.32em; text-decoration-color: rgba(216, 172, 82, 0.55); text-decoration-skip-ink: none; }}
.tom-marfim .in-meio { color: #0B2035; } .secao:not(.tom-marfim) .in-meio { color: #FFFFFF; }

/* marca-texto que acompanha a quebra de linha (prova, frases): faixa dourada que corre de 0 a 100% ao aparecer */
.mt { background-image: linear-gradient(rgba(216, 172, 82, 0.5), rgba(216, 172, 82, 0.5)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 0.36em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.anima .mt { background-size: 0% 0.36em; transition: background-size 600ms cubic-bezier(.65, 0, .35, 1) 150ms; }
.anima .vista .mt, .anima .mt.vista { background-size: 100% 0.36em; }

/* prova literal do Google */
.pv { display: grid; gap: 26px; max-width: 1040px; }
.pv__rot { display: flex; align-items: center; gap: 10px; font: 600 0.75rem/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.pv__rot > span { display: flex; gap: 3px; }
.pv__rot svg { width: 14px; height: 14px; fill: #D8AC52; }
.pv blockquote { margin: 0; }
.pv blockquote p { font: 400 clamp(1.6rem, 1rem + 1.9vw, 2.8rem)/1.2 var(--f-titulo); letter-spacing: -0.02em; text-wrap: pretty; }
.pv__quem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 1rem; }
.pv__quem b { font-weight: 600; }
.pv__quem a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.tom-marfim .pv__rot, .tom-marfim .pv__quem { color: #26323E; }
.secao:not(.tom-marfim) .pv__rot, .secao:not(.tom-marfim) .pv__quem { color: #C9D8E4; }
.secao:not(.tom-marfim) .pv blockquote p { color: #FFFFFF; }
.secao:not(.tom-marfim) .pv .mt { background-image: linear-gradient(rgba(216, 172, 82, 0.42), rgba(216, 172, 82, 0.42)); }

/* "Também cuidamos de": dois cartões-link na cor do cartão-hero de cada serviço (council r2). O objeto fica em cor; só
   com ponteiro fino ele começa em cinza e ganha cor no hover, e a seta atravessa a caixinha */
.tb { display: grid; gap: 18px; margin-top: clamp(44px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid rgba(11, 32, 53, 0.18); }
.tb__t { font: 600 0.75rem/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #26323E; }
.tb__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tb__card { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 18px 16px 12px; border-radius: 22px;
  text-decoration: none; color: #0B2035; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.tb__card--bpo { background: linear-gradient(135deg, #C9DFEE, #A9CBE0); } .tb__card--erp { background: linear-gradient(135deg, #E8F0F6, #DCE8F1); } .tb__card--processos { background: linear-gradient(135deg, #EBD6A6, #E3C47E); }
.tb__obj { display: grid; place-items: center; width: 84px; height: 84px; }
.tb__obj img { width: 78px; height: 78px; filter: drop-shadow(0 3px 4px rgba(11, 32, 53, 0.24)); }
@media (hover: hover) and (pointer: fine) {
  .tb__card:hover .bt__caixa { background: #D8AC52; color: #0B2035; }
  .tb__card:hover .tb__txt b { text-decoration: underline; text-decoration-color: #9A7120; text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .tb__card:hover .bt__trilho[data-hover-interno] { translate: 44px 0; }
}
.tb__card:focus-visible .bt__trilho { translate: 44px 0; }
.tb__txt { display: grid; gap: 4px; }
.tb__txt b { font: 400 1.35rem/1.15 var(--f-titulo); }
.tb__txt span { font-size: 0.9375rem; line-height: 1.4; color: #1D2B38; }
.tb__card .bt__caixa { background: #0B2035; color: #E8CE93; }
.tb__card:focus-visible { outline: 3px solid #0B2035; outline-offset: 3px; }
@media (max-width: 767px) { .tb__lista { grid-template-columns: minmax(0, 1fr); } .tb__card { grid-template-columns: 64px minmax(0, 1fr) auto; } .tb__obj { width: 64px; height: 64px; } .tb__obj img { width: 62px; height: 62px; } }

/* Dúvidas no marfim (o componente nasceu no marinho): perguntas em marinho, cartão da resposta continua escuro */
.tom-marfim.faq .faq__q { color: #34414E; }
.tom-marfim.faq .faq__q--ativa { color: #0B2035; }
.tom-marfim.faq .faq__q-ir { color: #26323E; }
.tom-marfim.faq .faq__q--ativa .faq__q-ir { color: #0B2035; }
@media (max-width: 1023px) {
  .tom-marfim.faq .faq__q { background: rgba(11, 32, 53, 0.04); }
  .tom-marfim.faq .faq__q--ativa { background: rgba(11, 32, 53, 0.08); }
}
@media (prefers-reduced-motion: reduce) { .tb__obj img, .anima .mt { transition: none; } }

/* Dúvidas das internas no celular (council visual): sanfona vertical, a resposta abre embaixo da pergunta tocada;
   o botão do cabeçalho sai (a barra fixa já é o WhatsApp) */
@media (max-width: 1023px) {
  .tom-marfim.faq .faq__lado .bt { display: none; }
  .faq--sanfona .faq__perguntas { display: grid; gap: 0; overflow: visible; margin-inline: 0; padding-inline: 0; border-top: 1px solid rgba(11, 32, 53, 0.18); }
  .faq--sanfona .faq__q { flex: none; flex-direction: row; align-items: center; min-height: 0; padding: 18px 4px 18px 16px; border-radius: 0; background: none !important; box-shadow: none; border-bottom: 1px solid rgba(11, 32, 53, 0.18); }
  .faq--sanfona .faq__q::before { left: 0; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto; scale: 1 0; transform-origin: 50% 0; }
  .faq--sanfona .faq__q--ativa::before { scale: 1 1; }
  .faq--sanfona .faq__r { grid-area: auto; display: none; margin: 10px 0 14px; opacity: 1 !important; translate: none !important; visibility: visible !important; }
  .faq--sanfona .faq__r--ativa { display: grid; }
  .faq--sanfona .faq__r-q { display: none; }
  .faq--sanfona .faq__respostas { display: none; }
}

/* ---------- council visual r2 (28/09) ---------- */
main p, main li, .tb__txt span, .ct-msg p { text-wrap: pretty; }
main h2, main h3, .tb__txt b { text-wrap: balance; }
/* Também cuidamos de no celular: objeto e título na mesma linha, descrição embaixo; seta atravessa, caixa marinho */
@media (max-width: 559px) {
  .tb__card { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; padding: 14px 16px 16px 10px; }
  .tb__obj { width: 52px; height: 52px; grid-row: 1; } .tb__obj img { width: 52px; height: 52px; }
  .tb__txt { display: contents; } .tb__txt b { grid-column: 2; grid-row: 1; align-self: center; }
  .tb__txt span { grid-column: 1 / -1; grid-row: 2; }
  .tb__card .bt__caixa { grid-column: 3; grid-row: 1; }
}
@media (hover: hover) and (pointer: fine) { .tb__card:hover .bt__caixa { background: #0B2035; color: #E8CE93; } .tb__card:hover .tb__txt b { text-decoration: none; } }
/* Dúvidas das internas em sanfona em todas as larguras (council r2: nada de painel ao lado); sem botão no cabeçalho */
.tom-marfim.faq .faq__lado .bt { display: none; }
.faq--sanfona { grid-template-columns: minmax(0, 1fr) !important; max-width: 860px; }
.faq--sanfona .faq__perguntas { display: grid; gap: 0; overflow: visible; margin-inline: 0; padding-inline: 0; border-top: 1px solid rgba(11, 32, 53, 0.18); }
.faq--sanfona .faq__q { flex: none; flex-direction: row; align-items: center; min-height: 0; padding: 20px 4px 20px 18px; border-radius: 0; background: none !important; box-shadow: none; border-bottom: 1px solid rgba(11, 32, 53, 0.18); font-size: 1.0625rem; }
.faq--sanfona .faq__q::before { left: 0; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto; scale: 1 0; transform-origin: 50% 0; }
.faq--sanfona .faq__q--ativa::before { scale: 1 1; }
.faq--sanfona .faq__r { grid-area: auto; display: none; margin: 0; padding: 4px 18px 26px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid rgba(11, 32, 53, 0.18); opacity: 1 !important; translate: none !important; visibility: visible !important; }
.faq--sanfona .faq__r--ativa { display: grid; }
.faq--sanfona .faq__r > * { animation: none !important; }
.faq--sanfona .faq__r-q { display: none; }
.faq--sanfona .faq__r-manchete { color: #0B2035; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); }
.faq--sanfona .faq__r-corpo { color: #26323E; }
.faq--sanfona .faq__r-link { color: #0B2035; text-decoration-color: #9A7120; }
.faq--sanfona .faq__q--ativa { border-bottom-color: transparent; }
.faq--sanfona .faq__respostas { display: none; }
.faq--sanfona + .tb, .faq__palco.faq--sanfona ~ .tb { border-top: 0; padding-top: 0; }

/* internas.css */
/* ---------- internas v4 (JM, 07/10): ajustes comuns às três páginas, no eixo da home atual ---------- */
/* "Também cuidamos de": cartões marinho, como os blocos escuros da home; hover = preenchimento de baixo para cima */
.tb__card, .tb__card--bpo, .tb__card--erp, .tb__card--processos { isolation: isolate; overflow: hidden; background: linear-gradient(150deg, #17426A 0%, #0B2035 100%); color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 24px 40px -30px rgba(11, 32, 53, 0.9); }
.tb__card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #1D456D; transform-origin: 50% 100%; scale: 1 0; transition: scale 520ms cubic-bezier(.65, 0, .25, 1); }
.tb__txt b { color: #FFFFFF; }
.tb__txt span { color: #C9D8E4; }
.tb__card .bt__caixa { background: #F7F3EA; color: #0B2035; }
.tb__obj img { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.4)); }
@media (hover: hover) and (pointer: fine) {
  .tb__card:hover::before { scale: 1 1; }
  .tb__card:hover .bt__caixa { background: #D8AC52; color: #0B2035; }
  .tb__card:hover .tb__txt b { text-decoration: none; }
}
.tb__card:active::before { scale: 1 1; }
.tb__card:focus-visible { outline-color: #D8AC52; }
@media (max-width: 899px) {
  .bh__foto { margin-bottom: -22%; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 86%); mask-image: linear-gradient(180deg, #000 52%, transparent 86%); }
  .bs-set__arco { aspect-ratio: 1 / 1.05; }
}

/* dúvidas em sanfona (JM, 07/10, v2): a altura anima pelo JS (Web Animations, só a caixa da resposta); o texto desliza
   e aparece por transform e opacidade, que a placa de vídeo faz sem recalcular a página. Nenhuma outra animação herdada. */
.faq--sanfona .faq__r { display: block !important; height: 0; overflow: hidden; margin: 0 !important; opacity: 1 !important; translate: none !important; visibility: visible !important; transition: none !important; }
.faq--sanfona .faq__r--ativa { height: auto; }
.faq--sanfona .faq__r > *, .faq--sanfona .faq__r--ativa > * { animation: none !important; }
.faq--sanfona .faq__r-dentro { display: grid; align-content: start; gap: 10px; opacity: 0; transform: translateY(-10px); transition: opacity 260ms linear, transform 420ms cubic-bezier(.22, 1, .36, 1); }
.faq--sanfona .faq__r--ativa .faq__r-dentro { opacity: 1; transform: none; transition: opacity 420ms linear 120ms, transform 620ms cubic-bezier(.22, 1, .36, 1) 60ms; }
.faq--sanfona .faq__r-dentro > * { animation: none !important; }
.faq--sanfona .faq__r-dentro .faq__r-q { display: none; }
.faq--sanfona .faq__q-ir svg { transition: rotate 520ms cubic-bezier(.22, 1, .36, 1); }
.faq--sanfona .faq__q[aria-expanded="true"] .faq__q-ir svg { rotate: 90deg; }
.faq--sanfona .faq__q-ir { transition: background-color 400ms, color 400ms, box-shadow 400ms; }
.faq--sanfona .faq__q::before { transition: scale 520ms cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .faq--sanfona .faq__r-dentro { transition: none; } }

/* ---------- Dúvidas padronizadas (JM, 07/10): o mesmo desenho em todas as páginas ----------
   Título preso à esquerda com a chamada do WhatsApp; à direita a sanfona, um fio só entre as perguntas, a resposta abre
   com a altura animada. Vale no marfim (internas) e no marinho (home). */
@media (min-width: 1024px) {
  .faq > .envelope { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 6vw, 110px); align-items: start; }
  .faq > .envelope > .faq__cabeca { grid-row: 1; align-self: stretch; display: block; }
  .faq > .envelope > .faq__palco { grid-row: 1; }
  .faq > .envelope > .tb { grid-row: 2; }
  /* o título acompanha a rolagem só dentro da altura das perguntas: para antes do "Também cuidamos de" */
  .faq__cabeca-in { position: sticky; top: calc(var(--altura-topo) + 40px); display: grid; gap: 18px; }
  .faq > .envelope > .faq__palco { margin-top: 0; }
  .faq > .envelope > .tb { grid-column: 1 / -1; }
}
.faq .faq__cabeca h2 { max-width: 14ch; }
.faq .faq__lado { gap: 16px; }
.faq .faq__lado p { font: 400 1.1rem/1.5 var(--f-titulo); max-width: 30ch; }
.faq .faq__lado .bt, .tom-marfim.faq .faq__lado .bt { display: inline-flex; }
.faq--sanfona { max-width: none; }
/* um fio por pergunta: o da pergunta sai, a resposta (mesmo fechada) carrega o fio de baixo */
.faq--sanfona .faq__q { border-bottom: 0 !important; padding: 22px 6px 22px 18px; }
.faq--sanfona .faq__r { padding: 0 !important; border-bottom: 1px solid rgba(11, 32, 53, 0.16); }
.faq--sanfona .faq__r-dentro { padding: 0 54px 0 18px !important; }
.faq--sanfona .faq__r-dentro > :first-child { margin-top: 2px; }
.faq--sanfona .faq__r-dentro > :last-child { margin-bottom: 26px; }
.faq--sanfona .faq__r-link { justify-self: start; }
.faq--sanfona .faq__perguntas { border-top: 1px solid rgba(11, 32, 53, 0.16); }
/* no marinho (home) */
.faq:not(.tom-marfim) .faq--sanfona .faq__perguntas { border-top-color: rgba(255, 255, 255, 0.14); }
.faq:not(.tom-marfim) .faq--sanfona .faq__r { border-bottom-color: rgba(255, 255, 255, 0.14); }
.faq:not(.tom-marfim) .faq--sanfona .faq__q { color: #C9D8E4; }
.faq:not(.tom-marfim) .faq--sanfona .faq__q--ativa { color: #FFFFFF; }
.faq:not(.tom-marfim) .faq--sanfona .faq__r-manchete { color: #FFFFFF; }
.faq:not(.tom-marfim) .faq--sanfona .faq__r-corpo { color: #C9D8E4; }
.faq:not(.tom-marfim) .faq--sanfona .faq__r-link { color: #FFFFFF; }
.faq--sanfona ~ .faq__col .faq__respostas, .faq--sanfona .faq__col .faq__respostas { display: none; }
.faq--sanfona .faq__col { gap: 0; }
.faq--sanfona .faq__cta { margin-top: 22px; }

.faq__cabeca-in { display: grid; gap: 18px; }


/* intro.css */
/* ---------- Abertura: o símbolo da Conex se desenha na posição final e a tela se recolhe ----------
   0,10s o elo azul nasce na ponta redonda e corre até a ponta reta · 0,32s o dourado faz o mesmo ·
   ~1,37s a logo está completa, em 2D, exatamente como no SVG da marca · 1,85s a tela sobe
   (site.js liga html.intro-sai) · a trava do <head> tira tudo em 4s. Sem troca para 3D (pedido do dono). */
.intro-tela { display: none; }
html.intro { overflow: hidden; }
html.intro .intro-tela {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--grao), radial-gradient(70% 60% at 50% 50%, #0F2F4D 0%, #0A2036 55%, #071827 100%);
  background-size: 160px 160px, auto; background-blend-mode: soft-light, normal;
  clip-path: inset(0 0 0 0);
}
.intro-tela__marca { position: relative; display: grid; width: min(64vw, 380px); aspect-ratio: 638 / 388; }
.intro-tela__svg { grid-area: 1 / 1; width: 100%; height: 100%; overflow: visible; }
.intro-elo { fill: none; stroke-width: 65; stroke-linecap: round; stroke-dasharray: 1 1.2; stroke-dashoffset: 1; }
.intro-elo--azul { stroke: #5891AF; }
.intro-elo--ouro { stroke: #BC8E2E; }

/* velocidade constante no meio, sem arrancar nem frear seco: parece mão desenhando */
html.intro .intro-elo--azul { animation: intro-traco 1.05s cubic-bezier(.45, .05, .35, 1) 0.1s both; }
html.intro .intro-elo--ouro { animation: intro-traco 1.05s cubic-bezier(.45, .05, .35, 1) 0.32s both; }
@keyframes intro-traco { 0% { stroke-dashoffset: 1; opacity: 0; } 6% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }

/* a abertura: a tela recolhe de baixo para cima e o símbolo sobe junto, sumindo */
html.intro-sai .intro-tela { clip-path: inset(0 0 100% 0); transition: clip-path 760ms cubic-bezier(.76, 0, .24, 1); }
html.intro-sai .intro-tela__marca { translate: 0 -46px; opacity: 0; transition: translate 620ms cubic-bezier(.5, 0, .2, 1), opacity 460ms linear 120ms; }
/* o hero entra enquanto a tela sobe */
html.intro .hp__texto > * { opacity: 0; translate: 0 26px; }
html.intro-sai .hp__texto > * { opacity: 1; translate: 0 0; transition: opacity 640ms linear, translate 900ms cubic-bezier(.16, 1, .3, 1); }
html.intro-sai .hp__texto > :nth-child(2) { transition-delay: 90ms; }
html.intro-sai .hp__texto > :nth-child(3) { transition-delay: 180ms; }
html.intro-sai .hp__texto > :nth-child(4) { transition-delay: 260ms; }
html.intro .hp__palco { opacity: 0; }
html.intro-sai .hp__palco { opacity: 1; transition: opacity 900ms linear 260ms; }

/* leque.css */
/* ---------- Três frentes · sete cartões parados em arco (JM, 27/09) ----------
   As posições são as do leque original (Card Fan Carousel): o do meio reto, os outros menores e girados,
   descendo para as pontas. Nada se move sozinho. O cartão sob o ponteiro (ou tocado, ou com foco do teclado)
   cresce no mesmo lugar e ângulo, vai para a frente e sobe o verso "o que inclui" na metade de baixo; o título
   sobe junto. A foto não aproxima. */
.servicos { overflow-x: clip; }
.leque { --cw: 16rem; --ch: 22.3rem; --k: 1; --mx: 1; margin-top: clamp(20px, 3vw, 36px); }
/* o palco inteiro escala em tela pequena (o cartão mantém o desenho de 19rem e só diminui) */
.leque__palco { position: relative; width: 100%; max-width: 80rem; height: calc(var(--ch) + 7rem); margin-inline: auto;
  scale: var(--k); transform-origin: 50% 0; margin-bottom: calc((var(--k) - 1) * (var(--ch) + 7rem)); touch-action: pan-y; }

.leque__card { --x: 0; --y: 0; --r: 0; --s: 1; --z: 10; --cresce: 1;
  position: absolute; left: 50%; top: 50%; z-index: var(--z); width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; text-decoration: none; color: #fff; background: #0A2137;
  box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.14), 0 40px 60px -30px rgba(0, 0, 0, 0.85);
  transform-origin: 50% 100%;
  transform: translate(calc(var(--x) * var(--mx) * 1rem), calc(var(--y) * 1rem)) rotate(calc(var(--r) * 1deg)) scale(calc(var(--s) * var(--cresce)));
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1), box-shadow 520ms linear; }
.leque__card:nth-child(1) { --x: -44.6; --y: 6.2; --r: -15; --s: 0.78; --z: 1; }
.leque__card:nth-child(2) { --x: -31.3; --y: 3; --r: -10; --s: 0.86; --z: 2; }
.leque__card:nth-child(3) { --x: -16.2; --y: 0.8; --r: -5; --s: 0.94; --z: 3; }
.leque__card:nth-child(4) { --x: 0; --y: 0; --r: 0; --s: 1; --z: 4; }
.leque__card:nth-child(5) { --x: 16.2; --y: 0.8; --r: 5; --s: 0.94; --z: 3; }
.leque__card:nth-child(6) { --x: 31.3; --y: 3; --r: 10; --s: 0.86; --z: 2; }
.leque__card:nth-child(7) { --x: 44.6; --y: 6.2; --r: 15; --s: 0.78; --z: 1; }

/* a foto em tela cheia; o texto no pé sobre degradê marinho; o ícone no alto */
.lq-pic { position: absolute; inset: 0; display: block; background: #0F2C49; }
.lq-foto { width: 100%; height: 100%; object-fit: cover; }
.lq-ic { position: absolute; z-index: 2; left: 14px; top: 14px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px;
  background: rgba(11, 33, 55, 0.88); color: #E8CE93; box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.35), 0 10px 22px -10px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lq-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lq-txt { position: relative; z-index: 2; display: grid; gap: 7px; margin-top: auto; padding: 64px 18px 18px;
  background: linear-gradient(180deg, rgba(10, 33, 55, 0) 0%, rgba(10, 33, 55, 0.86) 34%, #0A2137 62%);
  transition: translate 520ms cubic-bezier(.22, 1, .36, 1); }
.leque__tag { font: 600 0.6875rem/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #BFD8E9; }
.lq-tit { font-family: var(--f-titulo); font-size: 1.25rem; line-height: 1.08; letter-spacing: -0.012em; color: #fff; }
.lq-lin { font-size: 0.875rem; line-height: 1.45; color: #C9DBE8; transition: opacity 260ms linear; }

/* o verso: metade de baixo do cartão */
.lq-verso { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 52%; padding: 12px 16px 12px; display: flex; flex-direction: column; gap: 8px;
  background: #0A2137; box-shadow: inset 0 1px 0 rgba(233, 242, 248, 0.16); translate: 0 101%; transition: translate 520ms cubic-bezier(.22, 1, .36, 1); }
.lq-verso__rot { font: 700 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ouro-claro); }
.lq-verso__lista { display: grid; gap: 6px; }
.lq-verso__lista > span { display: flex; align-items: baseline; gap: 7px; font-size: 0.8125rem; line-height: 1.35; color: #EAF2F8; }
.lq-verso__lista svg { flex: none; width: 15px; height: 15px; color: var(--ouro); translate: 0 2px; }
.lq-verso__ir { margin-top: auto; font-weight: 600; font-size: 0.875rem; color: var(--ouro-claro); }

/* foco: cresce no lugar (mesmo x, y e ângulo), vai para a frente, o verso sobe e o título sobe junto */
.leque__card.leque__card--aberto { --cresce: 1.14; z-index: 20; box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.22), 0 60px 90px -30px rgba(11, 32, 53, 0.75); }
.leque__card--aberto .lq-verso { translate: 0 0; }
.leque__card--aberto .lq-txt { translate: 0 calc(var(--ch) * -0.52 + 14px); }
.leque__card--aberto .lq-lin { opacity: 0; }
@media (hover: hover) {
  .leque__card:hover { --cresce: 1.14; z-index: 20; box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.22), 0 60px 90px -30px rgba(11, 32, 53, 0.75); }
  .leque__card:hover .lq-verso { translate: 0 0; }
  .leque__card:hover .lq-txt { translate: 0 calc(var(--ch) * -0.52 + 14px); }
  .leque__card:hover .lq-lin { opacity: 0; }
}
.leque__card:focus-visible { --cresce: 1.14; z-index: 20; outline: 3px solid #0B2035; outline-offset: 4px; }
.leque__card:focus-visible .lq-verso { translate: 0 0; }
.leque__card:focus-visible .lq-txt { translate: 0 calc(var(--ch) * -0.52 + 14px); }
.leque__card:focus-visible .lq-lin { opacity: 0; }

/* telas menores: o arco aperta na horizontal e o palco inteiro diminui */
@media (max-width: 1700px) { .leque { --mx: 0.92; } }
@media (max-width: 1500px) { .leque { --mx: 0.8; } }
@media (max-width: 1365px) { .leque { --mx: 0.76; } }
@media (max-width: 1023px) { .leque { --k: 0.86; --mx: 0.72; } }
@media (max-width: 767px) { .leque { --mx: 0.55; } }
@media (max-width: 639px) { .leque { --k: 0.74; --mx: 0.45; } }
@media (max-width: 479px) { .leque { --mx: 0.36; } }
@media (prefers-reduced-motion: reduce) { .leque__card, .lq-verso, .lq-txt { transition: none; } }
/* aberto: o título sobe com um degradê mais curto, para a foto continuar aparecendo em cima */
.leque__card--aberto .lq-txt { padding-top: 40px; background: linear-gradient(180deg, rgba(10, 33, 55, 0) 0%, rgba(10, 33, 55, 0.78) 45%, #0A2137 100%); }
@media (hover: hover) { .leque__card:hover .lq-txt { padding-top: 40px; background: linear-gradient(180deg, rgba(10, 33, 55, 0) 0%, rgba(10, 33, 55, 0.78) 45%, #0A2137 100%); } }
.leque__card:focus-visible .lq-txt { padding-top: 40px; background: linear-gradient(180deg, rgba(10, 33, 55, 0) 0%, rgba(10, 33, 55, 0.78) 45%, #0A2137 100%); }

/* ---------- entrada (JM, 01/10: "mais fluida e dinâmica, sem muito tempo corrido") ----------
   Um movimento só, em ~1,1 s: o título entra palavra por palavra (rápido) e, junto, os sete cartões saem empilhados de
   baixo e abrem direto no arco, do meio para as pontas, com a mesma mola. Antes eram quatro etapas com pausas (~2,7 s),
   em _antigo/leque-entrada-v17/. Classes no .leque pelo JS: lq-e0 (empilhado, guardado) → lq-voa (abrindo) → nada. */
.anima .servicos:not(.lq-visto) .lq-pal { opacity: 0; filter: blur(6px); translate: 0 0.25em; color: #8C95A0; }
.lq-pal { display: inline-block; transition: opacity 380ms linear, filter 460ms cubic-bezier(.2, .8, .2, 1), translate 560ms cubic-bezier(.16, 1, .3, 1), color 520ms linear; }
.lq-pal[data-i="1"] { transition-delay: 45ms; } .lq-pal[data-i="2"] { transition-delay: 90ms; } .lq-pal[data-i="3"] { transition-delay: 135ms; }
.lq-pal[data-i="4"] { transition-delay: 180ms; } .lq-pal[data-i="5"] { transition-delay: 225ms; } .lq-pal[data-i="6"] { transition-delay: 270ms; } .lq-pal[data-i="7"] { transition-delay: 315ms; }
.anima .servicos:not(.lq-visto) [data-lq-cabeca] .rotulo { opacity: 0; }
[data-lq-cabeca] .rotulo { transition: opacity 400ms linear; }

.leque.lq-e0 .leque__card, .leque.lq-voa .leque__card { pointer-events: none; }
/* guardado: os sete juntos no centro, um pouco abaixo e menores; o do meio já à vista */
.leque.lq-e0 .leque__card { --x: 0; --y: 9; --r: 0; --s: 0.88; opacity: 0; transition: none; }
.leque.lq-e0 .leque__card:nth-child(4) { --r: -6; opacity: 1; }
/* abrindo: cada um vai direto para o seu lugar no arco; o do meio primeiro, as pontas logo atrás */
.leque.lq-voa .leque__card { transition: transform 1000ms cubic-bezier(.16, 1, .3, 1), opacity 260ms linear; }
.leque.lq-voa .leque__card:is(:nth-child(3), :nth-child(5)) { transition-delay: 60ms; }
.leque.lq-voa .leque__card:is(:nth-child(2), :nth-child(6)) { transition-delay: 120ms; }
.leque.lq-voa .leque__card:is(:nth-child(1), :nth-child(7)) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .lq-pal, [data-lq-cabeca] .rotulo { transition: none; } }

/* ---------- JM, 27/09 (ajuste): cartões maiores, texto enxuto e foco com desfoque ----------
   Em repouso só a etiqueta e o título, com degradê curto (a foto aparece mais). No foco, o cartão cresce 18%,
   os outros desfocam e escurecem; o "o que inclui" ocupa 44% embaixo e o título fica logo acima dele. */
.lq-lin { display: none; }
.lq-txt { gap: 6px; padding: 56px 18px 18px; background: linear-gradient(180deg, rgba(10, 33, 55, 0) 0%, rgba(10, 33, 55, 0.72) 45%, rgba(10, 33, 55, 0.94) 100%); }
.lq-tit { font-size: 1.375rem; }
.lq-verso { height: 44%; padding: 14px 18px 14px; gap: 7px; background: rgba(10, 33, 55, 0.96); }
.lq-verso__rot { display: none; }
.lq-verso__lista { gap: 7px; }
.lq-verso__lista > span { font-size: 0.875rem; line-height: 1.3; }
.leque__card { transition: transform 520ms cubic-bezier(.22, 1, .36, 1), box-shadow 520ms linear; }
/* os outros cartões recuam com um véu desfocado POR DENTRO de cada cartão (JM, 28/09). O filter: blur no cartão
   inteiro levava junto a sombra grande de cada um, e o Chrome recortava esse desfoque em retângulos: aparecia uma
   moldura clara em degraus atrás do cartão aberto. O véu fica preso ao recorte arredondado do cartão. */
.leque__card::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit;
  background: rgba(8, 24, 40, 0.22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 420ms linear; }
.leque__card.leque__card--aberto { --cresce: 1.18; }
.leque__card--aberto .lq-txt { translate: 0 calc(var(--ch) * -0.44); padding-top: 26px; background: linear-gradient(180deg, rgba(10, 33, 55, 0) 0%, rgba(10, 33, 55, 0.7) 60%, rgba(10, 33, 55, 0.96) 100%); }
.leque:has(.leque__card--aberto) .leque__card:not(.leque__card--aberto)::after { opacity: 1; }
@media (hover: hover) {
  .leque__card:hover { --cresce: 1.18; }
  .leque__card:hover .lq-txt { translate: 0 calc(var(--ch) * -0.44); padding-top: 26px; background: linear-gradient(180deg, rgba(10, 33, 55, 0) 0%, rgba(10, 33, 55, 0.7) 60%, rgba(10, 33, 55, 0.96) 100%); }
  .leque__palco:has(.leque__card:hover) .leque__card:not(:hover)::after { opacity: 1; }
}
.leque__card:focus-visible { --cresce: 1.18; }
.leque__card:focus-visible .lq-txt { translate: 0 calc(var(--ch) * -0.44); padding-top: 26px; }
.leque__palco:has(.leque__card:focus-visible) .leque__card:not(:focus-visible)::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .leque__card, .leque__card::after { transition: none; } }

/* JM, 27/09: textos mais fortes no cartão (a etiqueta e o título sumiam sobre a parte clara da foto) */
.leque__tag { color: #F1DDA8; font-weight: 700; text-shadow: 0 1px 10px rgba(6, 20, 33, 0.9); }
.lq-tit { color: #FFFFFF; text-shadow: 0 2px 14px rgba(6, 20, 33, 0.85); }
.lq-txt { background: linear-gradient(180deg, rgba(8, 24, 40, 0) 0%, rgba(8, 24, 40, 0.8) 38%, rgba(8, 24, 40, 0.97) 100%); }
.leque__card--aberto .lq-txt { background: linear-gradient(180deg, rgba(8, 24, 40, 0) 0%, rgba(8, 24, 40, 0.86) 45%, #0A2137 100%); }
@media (hover: hover) { .leque__card:hover .lq-txt { background: linear-gradient(180deg, rgba(8, 24, 40, 0) 0%, rgba(8, 24, 40, 0.86) 45%, #0A2137 100%); } }
.lq-verso { background: #0A2137; }
.lq-verso__lista > span { color: #FFFFFF; font-weight: 500; }
.lq-verso__lista svg { color: #E8CE93; }
.lq-verso__ir { color: #F1DDA8; font-weight: 700; }
.lq-ic { background: rgba(8, 24, 40, 0.92); color: #F1DDA8; }

/* ---------- JM, 01/10: o leque se adapta a cada resolução sem espremer ----------
   Do tablet para cima o arco tem um desenho só (afastamento fixo entre os cartões) e o palco inteiro escala para caber
   na largura disponível (--k vem do JS, componente 'leque'); antes o afastamento encolhia por faixa de tela e os
   cartões se encavalavam e saíam pelas bordas. Mais respiro entre o título e o arco. */
@media (min-width: 768px) {
  .leque, .leque[style] { --mx: 0.84; } /* JM, 01/10: o respiro maior (1,08) foi testado e voltou */
  .leque { margin-top: clamp(36px, 5vw, 80px); }
}

/* JM, 07/10: cinco cartões (as posições 2 a 6 do arco de sete) */
.leque__card:nth-child(1) { --x: -31.3; --y: 3; --r: -10; --s: 0.86; --z: 1; }
.leque__card:nth-child(2) { --x: -16.2; --y: 0.8; --r: -5; --s: 0.94; --z: 2; }
.leque__card:nth-child(3) { --x: 0; --y: 0; --r: 0; --s: 1; --z: 4; }
.leque__card:nth-child(4) { --x: 16.2; --y: 0.8; --r: 5; --s: 0.94; --z: 2; }
.leque__card:nth-child(5) { --x: 31.3; --y: 3; --r: 10; --s: 0.86; --z: 1; }
.leque.lq-e0 .leque__card:nth-child(4) { --r: 5; opacity: 0; }
.leque.lq-e0 .leque__card:nth-child(3) { --r: -6; opacity: 1; }
.leque.lq-voa .leque__card:is(:nth-child(2), :nth-child(4)) { transition-delay: 60ms; }
.leque.lq-voa .leque__card:is(:nth-child(1), :nth-child(5)) { transition-delay: 120ms; }

/* link-aval.css */
/* ---------- Link da avaliação gratuita (JM, 27/09): hover com motivo, não só a linha sumindo ----------
   Prancheta num quadrado; no hover o quadrado fica dourado e o visto se desenha, o sublinhado cresce e vira
   marca-texto dourado atrás de "avaliação gratuita" e a seta entra deslizando. */
.link-aval { display: inline-flex; align-items: center; gap: 12px; color: #0B2035; text-decoration: none; font-weight: 600; font-size: 1.0625rem; }
.link-aval__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(11, 32, 53, 0.08);
  box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.12); transition: background-color 300ms linear, box-shadow 300ms linear, rotate 500ms cubic-bezier(.3, 1.4, .5, 1); }
.link-aval__ic svg { width: 19px; height: 19px; }
.link-aval__visto { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 420ms cubic-bezier(.4, 0, .2, 1); }
.link-aval__txt b { font-weight: 700; padding: 0 0.12em; margin: 0 -0.12em; border-radius: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat, linear-gradient(rgba(216, 172, 82, 0.55), rgba(216, 172, 82, 0.55)) 0 100% / 100% 0 no-repeat;
  transition: background-size 460ms cubic-bezier(.22, 1, .36, 1); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.link-aval__seta { display: grid; width: 18px; overflow: hidden; }
.link-aval__seta svg { width: 18px; height: 18px; translate: -120% 0; opacity: 0; transition: translate 420ms cubic-bezier(.3, 1.3, .5, 1), opacity 200ms linear; }
@media (hover: hover) {
  .link-aval:hover .link-aval__ic { background: #D8AC52; box-shadow: none; rotate: -6deg; }
  .link-aval:hover .link-aval__visto { stroke-dashoffset: 0; transition-delay: 120ms; }
  .link-aval:hover .link-aval__txt b { background-size: 100% 0, 100% 100%; }
  .link-aval:hover .link-aval__seta svg[data-hover-interno] { translate: 0 0; opacity: 1; transition-delay: 100ms; }
}
.link-aval:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 12px; }
.link-aval:focus-visible .link-aval__ic { background: #D8AC52; box-shadow: none; }
.link-aval:focus-visible .link-aval__visto { stroke-dashoffset: 0; }
.link-aval:focus-visible .link-aval__txt b { background-size: 100% 0, 100% 100%; }
/* fundo marinho (contato) */
.link-aval--escuro { color: #FFFFFF; }
.link-aval--escuro .link-aval__ic { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); } .link-aval--escuro:focus-visible .link-aval__ic { color: #0B2035; }
@media (hover: hover) and (pointer: fine){.link-aval--escuro:hover .link-aval__ic{ color: #0B2035; }}
.link-aval--escuro .link-aval__txt b { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat, linear-gradient(rgba(216, 172, 82, 0.4), rgba(216, 172, 82, 0.4)) 0 100% / 100% 0 no-repeat; }
@media (hover: hover) { .link-aval--escuro:hover .link-aval__txt b { background-size: 100% 0, 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .link-aval *, .link-aval { transition: none !important; } }

/* paginas-simples.css */
/* privacidade e 404 */
.texto-legal { padding: calc(var(--altura-topo) + 56px) 0 var(--secao); background: linear-gradient(180deg, var(--gelo), var(--papel) 420px); }
.texto-legal__coluna { max-width: 70ch; }
.texto-legal h1 { font-size: var(--t-h1-interna); margin-top: 16px; }
.texto-legal h2 { font-size: var(--t-h3); margin-top: 40px; }
.texto-legal p, .texto-legal li { margin-top: 12px; color: var(--tinta-2); }
.texto-legal strong { color: var(--tinta); }
.texto-legal ul { padding-left: 20px; list-style: disc; }
.erro { min-height: 86svh; display: grid; align-items: center; padding: calc(var(--altura-topo) + 40px) 0 80px; background: linear-gradient(180deg, #0C2338, #0A1E31); }
.erro__grade { display: grid; gap: 24px; align-items: center; }
.erro h1 { font-size: var(--t-h1-interna); margin-top: 16px; }
.erro p:not(.rotulo) { margin-top: 16px; color: var(--tinta-2); }
.erro__links { margin: 18px 0 28px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.erro__img { display: block; width: min(560px, 100%); justify-self: center; }
@media (min-width: 1024px) { .erro__grade { grid-template-columns: 1fr 1fr; } }

/* painel.css */
/* ---------- Painel da Conex (dobra 2): janela que abre e painel que sobe ---------- */
.pz { position: relative; height: 250vh; background: linear-gradient(180deg, var(--papel) 0%, #081B2D 40%, #081B2D 72%, var(--papel) 100%); }
.pz__fixo {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; align-content: center; justify-items: center; gap: clamp(14px, 2.4svh, 26px);
  padding: calc(var(--altura-topo) + 12px) var(--margem) clamp(22px, 4svh, 44px);
}
.pz__fixo::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(62% 52% at 50% 40%, rgba(88, 145, 175, 0.26), transparent 74%); }
.pz__texto { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; text-align: center; transition: opacity 400ms linear; }
.pz__texto .bt { margin-top: 6px; }
.pz__h { max-width: 28ch; font-size: clamp(1.5rem, 1rem + 1.7vw, 2.5rem); color: #fff; }
.pz__h em { font-style: normal; color: var(--ouro-claro); }
.pz__dica { position: absolute; z-index: 3; bottom: clamp(14px, 3svh, 30px); left: 50%; translate: -50% 0; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--azul-claro); transition: opacity 360ms linear; }

/* a janela: recorta o painel e cresce conforme a rolagem */
.pz__janela {
  position: relative; z-index: 1; overflow: hidden;
  width: min(100%, 1180px); height: 42svh;
  border-radius: 18px;
  background: linear-gradient(168deg, #10365A 0%, #0A2340 46%, #06182A 100%);
  border: 1px solid rgba(233, 242, 248, 0.16);
  box-shadow: 0 60px 110px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  scale: 0.9;
  will-change: height, scale;
}
.pz__janela::after { content: ''; position: absolute; z-index: 4; inset: auto 0 0; height: 56px; pointer-events: none; opacity: var(--fim, 1); transition: opacity 300ms linear; background: linear-gradient(180deg, transparent, rgba(6, 24, 42, 0.8)); }
.pn { padding: clamp(14px, 1.6vw, 24px); display: grid; gap: clamp(12px, 1.4vw, 20px); color: #fff; will-change: translate; }

.pn__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(233, 242, 248, 0.12); }
.pn__marca { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(0.88rem, 0.7rem + 0.4vw, 1.0625rem); font-weight: 640; }
.pn__elos { width: 26px; height: auto; }
.pn__mes { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--azul-claro); }

/* cada bloco acende quando entra no recorte */
.pn__bloco { opacity: 0.32; transition: opacity 520ms var(--curva); }
.pn__bloco--aceso { opacity: 1; }

.pn__bloco--kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pn-kpi { display: grid; gap: 5px; padding: clamp(10px, 1.1vw, 15px); border-radius: 12px; background: rgba(233, 242, 248, 0.055); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.09); }
.pn-kpi__rot { font-size: clamp(0.62rem, 0.5rem + 0.24vw, 0.75rem); color: var(--azul-claro); }
.pn-kpi__valor { font-size: clamp(0.94rem, 0.7rem + 0.7vw, 1.4rem); font-weight: 660; letter-spacing: -0.03em; }
.pn-kpi__nota { font-size: clamp(0.7rem, 0.58rem + 0.2vw, 0.8rem); color: #C6D7E5; }
.pn-kpi--forte { background: rgba(216, 172, 82, 0.13); box-shadow: inset 0 0 0 1px rgba(216, 172, 82, 0.38); }
.pn-kpi--forte .pn-kpi__valor { color: var(--ouro-claro); }
.pn-kpi--forte .pn-kpi__rot { color: var(--ouro-claro); }

.pn__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pn__h { display: inline-flex; align-items: center; gap: 9px; font-size: clamp(0.8rem, 0.66rem + 0.35vw, 0.98rem); font-weight: 620; color: #fff; }
.pn__ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(155, 201, 227, 0.16); color: var(--azul-claro); }
.pn__ic svg { width: 15px; height: 15px; }
.pn__tag { font-size: 0.68rem; color: var(--ouro-claro); }
.pn__legenda { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 0.72rem; color: #C3D5E4; }
.pn__pt { width: 8px; height: 8px; border-radius: 2px; }
.pn__pt--ent { background: #5FA8D3; }
.pn__pt--sai { background: rgba(233, 242, 248, 0.34); margin-left: 8px; }

.pn__grafico { display: flex; align-items: flex-end; gap: clamp(6px, 0.9vw, 14px); height: clamp(120px, 14vw, 178px); padding: 12px; border-radius: 12px; background: rgba(233, 242, 248, 0.04); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.07); }
.pn-col { flex: 1; display: grid; gap: 7px; justify-items: center; height: 100%; grid-template-rows: 1fr auto; }
.pn-col__par { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 100%; }
.pn-col__par i { width: 42%; border-radius: 3px 3px 1px 1px; }
.pn-col__ent { background: linear-gradient(180deg, #7CC0E4, #2A6A9E); }
.pn-col__sai { background: rgba(233, 242, 248, 0.26); }
.pn-col__rot { font-size: 0.72rem; color: #C6D7E5; }
.pn__bloco--aceso .pn-col__par i { animation: pn-sobe 760ms cubic-bezier(.16, 1, .3, 1) both; transform-origin: bottom; }
.pn-col:nth-child(2) .pn-col__par i { animation-delay: 60ms } .pn-col:nth-child(3) .pn-col__par i { animation-delay: 120ms }
.pn-col:nth-child(4) .pn-col__par i { animation-delay: 180ms } .pn-col:nth-child(5) .pn-col__par i { animation-delay: 240ms }
.pn-col:nth-child(6) .pn-col__par i { animation-delay: 300ms } .pn-col:nth-child(7) .pn-col__par i { animation-delay: 360ms }
.pn-col:nth-child(8) .pn-col__par i { animation-delay: 420ms }
@keyframes pn-sobe { from { scale: 1 0; } }

.pn__lista { display: grid; gap: 5px; }
.pn-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: clamp(8px, 1.4vw, 20px);
  padding: clamp(8px, 0.9vw, 12px) clamp(10px, 1.1vw, 14px); border-radius: 10px;
  background: rgba(233, 242, 248, 0.05); font-size: clamp(0.68rem, 0.56rem + 0.3vw, 0.84rem);
}
.pn-linha__nome { color: #EAF2F8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-linha__data { color: #C6D7E5; font-size: 0.94em; }
.pn-linha__valor { font-weight: 620; color: #fff; }
.pn-marca { font-family: var(--f-mono); font-size: 0.74em; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 5px; }
.pn-marca--pronta { background: rgba(216, 172, 82, 0.2); color: var(--ouro-claro); }
.pn-marca--agendada { background: rgba(233, 242, 248, 0.12); color: #C9D9E7; }
.pn-marca--recebida { background: rgba(124, 192, 228, 0.18); color: #BEE0F3; }
.pn-marca--prevista { background: rgba(233, 242, 248, 0.12); color: #C9D9E7; }

.pn__bloco--fim { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(10px, 1.2vw, 18px); }
.pn__caixa { padding: clamp(11px, 1.2vw, 16px); border-radius: 12px; background: rgba(233, 242, 248, 0.045); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.08); }
.pn__conc { display: grid; gap: 9px; }
.pn-conc { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; align-items: center; gap: 10px; font-size: clamp(0.7rem, 0.58rem + 0.26vw, 0.82rem); color: #DCE8F2; }
.pn-conc__barra { height: 5px; border-radius: 5px; background: rgba(233, 242, 248, 0.14); overflow: hidden; }
.pn-conc__i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5FA8D3, #A9CBE0); width: 0; transition: width 900ms var(--curva); }
.pn-conc__num { font-size: 0.92em; color: #C6D7E5; }
.pn__notas { display: grid; gap: 8px; }
.pn__nota-n { display: flex; align-items: baseline; gap: 10px; font-size: clamp(0.7rem, 0.58rem + 0.26vw, 0.82rem); color: #DCE8F2; }
.pn__nota-n b { font-size: 1.7em; font-weight: 660; letter-spacing: -0.03em; color: #fff; }

.pn__pe { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(233, 242, 248, 0.12); }
.pn__pe .bt { pointer-events: auto; }
.pn__aviso, .pn__assina { font-size: 0.78rem; letter-spacing: 0.04em; color: #D3E1EE; }
.pn__assina { color: #C6D7E5; }

@media (max-width: 859px) {
  .pz { height: 230vh; }
  .pz__fixo { padding-block: calc(var(--altura-topo) + 8px) 18px; gap: 12px; }
  .pz__h { font-size: clamp(1.35rem, 1rem + 2.2vw, 1.9rem); }
  .pz__janela { width: 100%; border-radius: 14px; }
  .pn__bloco--kpis { grid-template-columns: 1fr 1fr; }
  .pn__bloco--fim { grid-template-columns: 1fr; }
  .pn-linha { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pn-linha__data { display: none; }
  .pn__grafico { gap: 4px; }
  .pn-col__rot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pz { height: auto; }
  .pz__fixo { position: static; height: auto; }
  .pz__janela { height: auto; scale: 1; }
  .pz__janela::after, .pz__dica { display: none; }
  .pn__bloco { opacity: 1; }
  .pn-conc__i { width: 100%; }
}

.pn__topo-dir { display: flex; align-items: center; gap: 12px; flex: none; }
.pn__marca { flex: none; white-space: nowrap; }
.pn__selo { padding: 4px 9px; border-radius: 6px; background: rgba(216, 172, 82, 0.2); color: var(--ouro-claro); font-size: 0.72rem; letter-spacing: 0.03em; }
@media (max-width: 859px) { .pn__mes, .pn__selo-longo { display: none; } .pn__selo { font-size: 0.68rem; padding: 3px 8px; } .pn__topo { gap: 8px; } }

/* processo.css */
/* ---------- Como funciona · janela com painel de cor, objeto 3D, lista de entregas e barra flutuante ---------- */
.processo__cabeca { display: grid; gap: 14px; max-width: 760px; }
.processo__cabeca h2 { font-size: clamp(1.9rem, 1.1rem + 2vw, 3rem); }
.processo__cabeca p:not(.rotulo) { color: var(--tinta-2); max-width: 58ch; }
.pr { --pr-bg: #1E4F7A; position: relative; margin-top: clamp(28px, 4vw, 44px); height: 600px; border-radius: 30px; overflow: hidden;
  background: #0C2640; box-shadow: inset 0 0 0 1px var(--fio-forte), 0 50px 90px -60px rgba(0, 0, 0, 0.9); }
.pr[data-cor="1"] { --pr-bg: #1B5E78; } .pr[data-cor="2"] { --pr-bg: #6B4E18; } .pr[data-cor="3"] { --pr-bg: #243F73; }
/* o painel de cor: forma orgânica, a cor muda devagar a cada fase */
.pr-cor { position: absolute; left: 22px; top: 22px; bottom: 22px; width: 47%; border-radius: 22px 44% 38% 22px / 22px 36% 46% 22px;
  background: radial-gradient(90% 70% at 20% 10%, rgba(255, 255, 255, 0.12), transparent 60%), var(--pr-bg); transition: background-color 700ms linear; }
.pr-cor__marca { position: absolute; left: 34px; top: 30px; }
.pr-elos { width: 34px; height: auto; opacity: 0.9; }
/* nome da fase: desliza na horizontal dentro do recorte */
.pr-titulos { position: absolute; left: 22px; top: 92px; width: 42%; height: 150px; overflow: hidden; padding-left: 34px; }
.pr-nome { position: absolute; left: 34px; right: 0; top: 0; display: grid; translate: 104% 0; opacity: 0;
  transition: translate 820ms cubic-bezier(.65, 0, .25, 1), opacity 400ms linear; }
.pr-nome.on { translate: 0 0; opacity: 1; }
.pr-nome.sai { translate: -104% 0; opacity: 0; }
.pr-nome b { font: 500 clamp(3rem, 1.6rem + 2.6vw, 4.4rem)/0.95 var(--f-titulo); letter-spacing: -0.025em; color: #fff; }
.pr-nome span { font: 400 clamp(1.4rem, 1rem + 0.8vw, 1.9rem)/1.1 var(--f-titulo); font-style: italic; color: #DCE9F2; margin-top: 6px; }
.pr-frases { position: absolute; left: 56px; bottom: 116px; width: calc(47% - 90px); min-height: 80px; }
.pr-frase { position: absolute; inset: 0 0 auto; font-size: 1rem; line-height: 1.5; color: #F4F7FA; max-width: 30ch; opacity: 0; translate: 0 10px; transition: opacity 360ms linear, translate 520ms var(--curva); }
.pr-frase.on { opacity: 1; translate: 0 0; transition-delay: 260ms; }
/* o objeto 3D: entra voando com desfoque de movimento e fica pairando sobre a borda do painel */
.pr-objs { position: absolute; left: 28%; top: 16%; width: 30%; aspect-ratio: 1; pointer-events: none; }
.pr-obj { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; translate: -40px 70px; rotate: -8deg; filter: blur(10px);
  transition: opacity 500ms linear, translate 900ms cubic-bezier(.3, 1.1, .4, 1), rotate 900ms cubic-bezier(.3, 1.1, .4, 1), filter 700ms linear;
  filter: blur(10px) drop-shadow(0 40px 40px rgba(0, 0, 0, 0.55)); }
.pr-obj.on { opacity: 1; translate: 0 0; rotate: 0deg; filter: blur(0) drop-shadow(0 40px 40px rgba(0, 0, 0, 0.55)); animation: pr-paira 6s ease-in-out 1s infinite; }
.pr-obj.sai { opacity: 0; translate: 90px -80px; rotate: 10deg; filter: blur(12px) drop-shadow(0 40px 40px rgba(0, 0, 0, 0.55)); transition-duration: 420ms, 620ms, 620ms, 420ms; }
@keyframes pr-paira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* a lista de entregas */
.pr-lado { position: absolute; right: 48px; top: 56px; width: 40%; }
.pr-lado__tit { font: 500 2.25rem/1.02 var(--f-titulo); letter-spacing: -0.015em; color: var(--tinta); }
.pr-lado__cols { display: grid; grid-template-columns: minmax(0, 1fr) 84px 28px; margin-top: 30px; padding-bottom: 10px; border-bottom: 1px solid var(--fio);
  font: 700 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-2); }
.pr-listas { position: relative; min-height: 210px; }
.pr-lista { position: absolute; inset: 0 0 auto; display: grid; }
.pr-item { display: grid; grid-template-columns: minmax(0, 1fr) 84px 28px; align-items: center; min-height: 66px; border-bottom: 1px solid var(--fio); overflow: hidden; }
.pr-item > * { opacity: 0; translate: 0 26px; transition: opacity 320ms linear, translate 560ms cubic-bezier(.3, 1.1, .4, 1); }
.pr-lista.on .pr-item > * { opacity: 1; translate: 0 0; }
.pr-lista.on .pr-item[data-k="0"] > * { transition-delay: 300ms; } .pr-lista.on .pr-item[data-k="1"] > * { transition-delay: 380ms; } .pr-lista.on .pr-item[data-k="2"] > * { transition-delay: 460ms; }
.pr-lista.sai .pr-item > * { opacity: 0; translate: 0 -20px; transition-duration: 220ms, 300ms; }
.pr-item__t { font-size: 1rem; line-height: 1.35; color: var(--tinta); padding-right: 12px; }
.pr-quem { justify-self: start; font: 700 0.6875rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; }
.pr-quem--conex { background: rgba(155, 201, 227, 0.14); color: var(--azul); }
.pr-quem--voce { background: rgba(216, 172, 82, 0.16); color: var(--ouro-claro); }
.pr-item__ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(233, 242, 248, 0.08); color: var(--azul); }
.pr-item__ok svg { width: 13px; height: 13px; }
/* a barra flutuante: as fases e o avançar */
.pr-barra { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 18px;
  background: #F4F7FA; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.9); }
.pr-fase { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: #3E5367; font-weight: 600; font-size: 0.875rem; transition: background-color 300ms linear, color 300ms linear; }
.pr-fase svg { width: 18px; height: 18px; flex: none; }
.pr-fase span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 500ms var(--curva); }
.pr-fase[aria-pressed="true"] { background: #E3EBF2; color: #0B2035; }
.pr-fase[aria-pressed="true"] span { max-width: 120px; }
.pr-prox { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; border: 0; border-radius: 50%; background: var(--marinho); color: #fff; }
.pr-prox svg { width: 18px; height: 18px; }
.pr-conta { position: absolute; right: 48px; bottom: 40px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); }

@media (max-width: 1023px) {
  .pr { height: auto; display: grid; padding: 14px 14px 20px; gap: 18px; }
  .pr-cor { position: relative; inset: auto; width: auto; height: 380px; grid-area: 1 / 1; border-radius: 20px 20px 40% 20px / 20px 20px 22% 20px; }
  .pr-titulos { grid-area: 1 / 1; position: relative; left: 0; top: 76px; width: 70%; height: 130px; align-self: start; }
  .pr-frases { grid-area: 1 / 1; position: relative; left: 0; bottom: auto; width: auto; align-self: end; margin: 0 28px 26px 34px; min-height: 96px; }
  .pr-objs { grid-area: 1 / 1; position: relative; left: auto; top: 150px; justify-self: end; width: 36%; margin-right: 10px; align-self: start; }
  .pr-frase { max-width: 62%; }
  .pr-lado { position: relative; right: auto; top: auto; width: auto; padding: 4px 8px 0; }
  .pr-lado__tit { font-size: 1.75rem; }
  .pr-barra { position: relative; left: auto; bottom: auto; translate: none; justify-self: center; }
  .pr-conta { position: relative; right: auto; bottom: auto; justify-self: center; }
  .pr-lado__cols, .pr-item { grid-template-columns: minmax(0, 1fr) 72px 26px; }
}
@media (max-width: 479px) { .pr-fase { padding: 0 10px; } .pr-fase[aria-pressed="true"] span { max-width: 90px; } .pr-nome b { font-size: 2.6rem; } }
html:not(.anima) .pr-nome, html:not(.anima) .pr-frase, html:not(.anima) .pr-obj { transition: none; }
@media (prefers-reduced-motion: reduce) { .pr-obj.on { animation: none; } .pr-nome, .pr-frase, .pr-obj, .pr-item > * { transition: none; } }

/* fotos das fases (JM, 24/09): preenchem o painel de cor; a cor da fase cobre o alto e o pé, onde estão o
   nome e a frase, e deixa a foto aparecer no meio. Fase sem foto continua com o objeto 3D. */
.pr-cor { overflow: hidden; }
.pr-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; scale: 1.06; transition: opacity 600ms linear, scale 1400ms cubic-bezier(.16, 1, .3, 1); }
.pr[data-cor="0"] .pr-foto[data-cor-foto="0"], .pr[data-cor="1"] .pr-foto[data-cor-foto="1"], .pr[data-cor="2"] .pr-foto[data-cor-foto="2"], .pr[data-cor="3"] .pr-foto[data-cor-foto="3"] { opacity: 1; scale: 1; }
.pr-cor__tinta { position: absolute; inset: 0; transition: background 700ms linear;
  background: linear-gradient(180deg, var(--pr-bg) 0%, color-mix(in srgb, var(--pr-bg) 78%, transparent) 30%, color-mix(in srgb, var(--pr-bg) 18%, transparent) 50%, color-mix(in srgb, var(--pr-bg) 82%, transparent) 70%, var(--pr-bg) 86%); }
.pr-cor__marca { z-index: 1; }
.pr-obj--foto { display: none; }

/* processos.css */
/* ---------- Mapeamento de processos · v4 (JM, 07/10). Referências em componentes/processos.mjs ---------- */

/* hero: texto à esquerda; à direita o quadro de marfim (papel quadriculado) onde o emaranhado vira fluxo */
.ph { position: relative; z-index: 2; overflow: hidden; color: #F7F3EA;
  background: radial-gradient(50% 50% at 78% 55%, rgba(216, 172, 82, 0.16) 0%, rgba(216, 172, 82, 0) 70%), radial-gradient(60% 70% at 20% 30%, #12304D 0%, rgba(18, 48, 77, 0) 70%), linear-gradient(180deg, #0C2238 0%, #06121F 100%); }
.ph__sentinela { position: absolute; left: 0; top: 0; width: 1px; height: 100svh; pointer-events: none; }
.ph__grade { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(28px, 4vw, 72px); min-height: max(720px, calc(100svh + var(--onda-h))); padding-block: calc(var(--altura-topo) + 28px) calc(var(--onda-h) + 40px); }
.ph__texto { position: relative; z-index: 3; display: grid; justify-items: start; gap: clamp(16px, 2.4svh, 24px); min-width: 0; }
.ph__migalha { display: flex; gap: 8px; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #C9D8E4; }
.ph__migalha a { color: inherit; text-decoration: none; background: linear-gradient(#D8AC52, #D8AC52) 0 100% / 100% 0 no-repeat; transition: background-size 280ms var(--curva), color 280ms; }
@media (hover: hover) and (pointer: fine) { .ph__migalha a:hover { background-size: 100% 100%; color: #0B2035; } }
.ph__titulo { margin: 0; font: 600 clamp(2.3rem, 0.6rem + 3.4vw, 4.5rem)/1.02 var(--f-texto); letter-spacing: -0.05em; color: #F7F3EA; }
.ph__titulo > span[aria-hidden] { display: grid; }
.ph__l { display: block; overflow: clip; overflow-clip-margin: 0.25em; padding-block: 0.04em; white-space: nowrap; }
.ph__m { display: inline-block; }
.ph__apoio { margin: 0; max-width: 44ch; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.5; color: #C9D8E4; text-wrap: pretty; }

/* o quadro (JM, rodada 2): direto no marinho, sem cartão nem botões. Notas de papel no mesmo tom, só com o nome da tarefa;
   o emaranhado de fios até "você" se desfaz em três raias com dono, uma vez */
.ph__quadro { position: relative; margin: 0; }
.ph__legenda { position: relative; display: grid; margin: 0 0 14px; font: 600 0.78rem/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.ph__legenda span { grid-area: 1 / 1; transition: opacity 500ms, translate 700ms cubic-bezier(.16, 1, .3, 1), filter 500ms; }
.ph__quadro[data-estado="a"] .ph__leg-b, .ph__quadro[data-estado="b"] .ph__leg-a { opacity: 0; translate: 10px 0; filter: blur(5px); }
.ph__palco { position: relative; aspect-ratio: 1.2; }
.ph__raia { position: absolute; left: 0; right: 0; height: 1px; margin: 0; background: rgba(255, 255, 255, 0.12); transition: opacity 800ms; }
.ph__raia span { position: absolute; left: 0; bottom: 10px; font: 600 0.7rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8FA5B8; }
.ph__raia--0 { top: 31%; } .ph__raia--1 { top: 59%; } .ph__raia--2 { top: 87%; }
.ph__quadro[data-estado="a"] .ph__raia { opacity: 0; }
.ph__linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph__lig { fill: none; stroke-linecap: round; transition: opacity 700ms, stroke 700ms; }
.ph__lig--a, .ph__quadro[data-estado="a"] .ph__lig--ab { stroke: rgba(201, 216, 228, 0.32); stroke-width: 1.2; }
.ph__lig--ab, .ph__lig--b { stroke: #D8AC52; stroke-width: 1.6; }
.ph__quadro[data-estado="a"] .ph__lig--b, .ph__quadro[data-estado="b"] .ph__lig--a { opacity: 0; }
/* a nota: papel marfim, sombra de papel preso na parede, texto marinho */
.ph__no { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; translate: -50% -50%; padding: 12px 16px; border-radius: 4px; background: #F7F2E8; color: #0B2035; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 3px rgba(0, 0, 0, 0.25), 0 18px 28px -16px rgba(0, 0, 0, 0.7);
  transition: left 1300ms cubic-bezier(.65, 0, .25, 1), top 1300ms cubic-bezier(.65, 0, .25, 1), rotate 1300ms cubic-bezier(.65, 0, .25, 1); }
.ph__no b { font: 600 0.95rem/1.1 var(--f-texto); }
.ph__no--voce { background: #0B2035; color: #F7F3EA; box-shadow: inset 0 0 0 1px rgba(216, 172, 82, 0.6), 0 18px 28px -16px rgba(0, 0, 0, 0.8); }
.ph__no--voce img { width: 26px; height: 26px; object-fit: contain; }
/* posições do fluxo (estado final, sem JS); o JS leva ao emaranhado e de volta */
.ph__no--nota { left: 30%; top: 22%; } .ph__no--cobrar { left: 66%; top: 22%; } .ph__no--banco { left: 30%; top: 50%; } .ph__no--pagar { left: 66%; top: 50%; }
.ph__no--insumo { left: 30%; top: 78%; } .ph__no--folha { left: 66%; top: 78%; } .ph__no--voce { left: 88%; top: 64%; }

.anima .ph__m { translate: 0 110%; animation: ht-sobe 1100ms cubic-bezier(.16, 1, .3, 1) 140ms forwards; }
.anima .ph__l:nth-child(2) .ph__m { animation-delay: 250ms; } .anima .ph__l:nth-child(3) .ph__m { animation-delay: 360ms; }
.anima :is(.ph__migalha, .ph__apoio, .ph__acoes) { opacity: 0; translate: 0 24px; animation: ht-entra 900ms cubic-bezier(.16, 1, .3, 1) 520ms forwards; }
.anima .ph__migalha { animation-delay: 60ms; } .anima .ph__acoes { animation-delay: 640ms; }
.anima .ph__quadro { opacity: 0; translate: 0 90px; rotate: 2deg; animation: ph-quadro 1400ms cubic-bezier(.16, 1, .3, 1) 320ms forwards; }
@keyframes ph-quadro { to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.anima .ph .hpl-pc { scale: 0.6; opacity: 0; transition: scale 700ms cubic-bezier(.3, 1.4, .5, 1), opacity 300ms linear; }
.anima .ph.ph--pecas .hpl-pc { scale: 1; opacity: 1; }
.anima .ph.ph--pecas .ph__l:nth-child(3) .hpl-pc { transition-delay: 240ms; }

/* ---------- POPs em cascata (Aspen) ---------- */
.pp__grade { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(28px, 5vw, 88px); }
.pp__texto { display: grid; justify-items: start; gap: 18px; }
.pp__rot { margin: 0; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #5E450D; }
.pp__texto h2 { margin: 0; font: 400 var(--t-h2)/1.06 var(--f-titulo); letter-spacing: -0.02em; text-wrap: balance; }
.pp__texto > p:not(.pp__rot) { margin: 0; max-width: 44ch; font-size: var(--t-corpo); line-height: 1.55; color: #3B4753; }
.pp__abas { display: grid; gap: 8px; width: 100%; max-width: 360px; margin-top: 10px; }
.pp__abas button { all: unset; box-sizing: border-box; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-radius: 14px; cursor: pointer;
  background: rgba(11, 32, 53, 0.05); box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.1); font: 600 1rem/1.2 var(--f-texto); color: #0B2035; transition: color 300ms 120ms; }
.pp__abas button::after { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.35; transition: width 400ms cubic-bezier(.16, 1, .3, 1), opacity 300ms; }
.pp__pint { position: absolute; inset: 0; z-index: -1; background: #0B2035; transform-origin: 50% 100%; scale: 1 0; transition: scale 480ms cubic-bezier(.65, 0, .25, 1); }
.pp__abas button[aria-selected="true"] { color: #F7F3EA; }
.pp__abas button[aria-selected="true"] .pp__pint { scale: 1 1; }
.pp__abas button[aria-selected="true"]::after { width: 34px; opacity: 1; background: #D8AC52; }
.pp__abas button:focus-visible { outline: 3px solid #9A7120; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pp__abas button:hover .pp__pint { scale: 1 1; } .pp__abas button:hover { color: #F7F3EA; } }
.pp__abas button:active .pp__pint { scale: 1 1; }

.pp__pilha { position: relative; height: clamp(470px, 38vw, 520px); }
.pp__folha { --x: 0%; --y: 0px; --r: 0deg; --s: 1; position: absolute; left: 0; top: 0; width: 84%; display: grid; gap: 20px; padding: clamp(26px, 3vw, 42px); border-radius: 22px; background: #FFFFFF; color: #0B2035;
  box-shadow: 0 1px 0 rgba(11, 32, 53, 0.05), 0 30px 60px -36px rgba(11, 32, 53, 0.55), inset 0 0 0 1px rgba(11, 32, 53, 0.06);
  transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); transform-origin: 50% 0; transition: transform 560ms cubic-bezier(.65, 0, .25, 1), filter 400ms; }
.pp__folha:not(.pp__folha--frente) { filter: brightness(0.97); }
.pp__folha--sai { animation: pp-sai 620ms cubic-bezier(.65, 0, .25, 1); }
@keyframes pp-sai { 0% { transform: translate(0, 0) rotate(0) scale(1); z-index: 9; } 45% { transform: translate(-58%, 40px) rotate(-9deg) scale(0.96); z-index: 9; } 46% { z-index: 0; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); z-index: 0; } }
.pp__tipo { margin: 0; font: 600 0.7rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9A7120; }
.pp__folha h3 { margin: -10px 0 0; font: 400 clamp(2rem, 1.4rem + 1.4vw, 2.7rem)/1.02 var(--f-titulo); letter-spacing: -0.025em; }
.pp__campos { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 18px 0; border-block: 1px solid rgba(11, 32, 53, 0.1); }
.pp__campos div + div { padding-left: 20px; border-left: 1px solid rgba(11, 32, 53, 0.1); }
.pp__campos dt { font: 600 0.7rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #5B6875; }
.pp__campos dd { margin: 6px 0 0; font: 400 1.35rem/1.15 var(--f-titulo); color: #0B2035; }
.pp__passos { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pp__passos li { display: flex; align-items: center; gap: 14px; padding: 10px 0; font-size: 1.05rem; line-height: 1.35; color: #26323E; }
.pp__caixa { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(11, 32, 53, 0.3); color: #FFFFFF; transition: background-color 300ms, box-shadow 300ms; }
.pp__caixa svg { width: 14px; height: 14px; scale: 0; transition: scale 400ms cubic-bezier(.3, 1.6, .5, 1); }
.pp__folha--frente .pp__caixa { background: #0B2035; box-shadow: none; }
.pp__folha--frente .pp__caixa svg { scale: 1; }
.pp__folha--frente li:nth-child(1) * { transition-delay: 250ms; } .pp__folha--frente li:nth-child(2) * { transition-delay: 350ms; }
.pp__folha--frente li:nth-child(3) * { transition-delay: 450ms; }
.anima .pp .pp__folha { opacity: 0; transform: translate(0, 80px) rotate(0) scale(0.96); transition: transform 1100ms cubic-bezier(.16, 1, .3, 1), opacity 600ms linear, filter 600ms; }
.anima .pp.vista .pp__folha { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); }
.anima .pp.vista .pp__folha:nth-child(2) { transition-delay: 120ms; } .anima .pp.vista .pp__folha:nth-child(3) { transition-delay: 240ms; } .anima .pp.vista .pp__folha:nth-child(4) { transition-delay: 360ms; }
.anima .pp.vista.pp--pronta .pp__folha { transition-delay: 0ms; transition: transform 560ms cubic-bezier(.65, 0, .25, 1), filter 400ms; }

/* palco preso: a rolagem conduz as quatro etapas (só no computador) */
.pm--vivo { padding-block: 0; }
.pm--vivo .pm__trilho { height: 190svh; }
.pm--vivo .pm__preso { position: sticky; top: 0; display: grid; align-content: center; min-height: 100svh; padding-top: calc(var(--altura-topo) + 10px); }
/* ---------- método (FoodHue): o celular no centro, a onda atrás, as etapas ao longo dela ---------- */
.pm__cab { display: grid; justify-items: center; gap: 14px; max-width: 720px; margin: 0 auto clamp(16px, 2vw, 28px); text-align: center; }
.pm__cab h2 { margin: 0; font: 400 var(--t-h2)/1.06 var(--f-titulo); letter-spacing: -0.02em; color: #0B2035; }
.pm__cab p { margin: 0; max-width: 52ch; font-size: var(--t-corpo); line-height: 1.55; color: #3B4753; }
.pm__palco { position: relative; display: grid; grid-template-columns: 1fr minmax(300px, 340px) 1fr; align-items: center; gap: clamp(16px, 2vw, 32px); min-height: min(600px, calc(100svh - 260px)); }
.pm__onda { position: absolute; left: calc(50% - 50vw); width: 100vw; top: 8%; height: 84%; overflow: visible; pointer-events: none; }
.pm__trilho { fill: none; stroke: rgba(11, 32, 53, 0.08); stroke-width: 26; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pm__traco { fill: none; stroke: #D8AC52; stroke-width: 26; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--pm-d, 0); vector-effect: non-scaling-stroke; opacity: 0.55; }
.pm__marcos { display: contents; margin: 0; padding: 0; list-style: none; }
.pm__m { position: relative; z-index: 1; display: grid; align-content: start; gap: 8px; width: min(100%, 270px); padding: 22px 22px 24px; border-radius: 22px; background: #FFFFFF; cursor: default;
  box-shadow: 0 1px 0 rgba(11, 32, 53, 0.04), 0 26px 44px -30px rgba(11, 32, 53, 0.55), inset 0 0 0 1px rgba(11, 32, 53, 0.06);
  transition: box-shadow 350ms, opacity 380ms cubic-bezier(.22, 1, .36, 1), transform 500ms cubic-bezier(.22, 1, .36, 1); }
.pm--vivo .pm__m:not(.ativo) { opacity: 0.42; transform: scale(0.96); }
.pm__m--0 { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; }
.pm__m--1 { grid-column: 1; grid-row: 1; justify-self: end; align-self: end; margin-bottom: 30px; }
.pm__m--2 { grid-column: 3; grid-row: 1; justify-self: start; align-self: end; margin-bottom: 30px; }
.pm__m--3 { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; }
.pm__m.ativo { box-shadow: 0 0 0 2px #D8AC52, 0 26px 44px -30px rgba(11, 32, 53, 0.55); }
.pm__obj { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #F1E5CC; }
.pm__obj img { width: 46px; height: 46px; object-fit: contain; }
.pm__m h3 { margin: 6px 0 0; font: 600 1.12rem/1.2 var(--f-texto); letter-spacing: -0.015em; color: #0B2035; }
.pm__m p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: #3B4753; }
.pm__fone { grid-column: 2; grid-row: 1 / 3; position: relative; z-index: 2; display: grid; place-items: center; }
.pm__aparelho { position: relative; width: 100%; aspect-ratio: 1464 / 2710; }
.pm__aparelho > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.pm__sombra { position: absolute; left: 14%; right: 14%; bottom: -3%; height: 6%; border-radius: 50%; background: rgba(11, 32, 53, 0.4); filter: blur(22px); }
.pm__tela { position: absolute; left: 0; top: 0; z-index: 1; width: 332px; height: 714.3px; transform-origin: 0 0; overflow: hidden; border-radius: 44px; background: #F8F4EB; visibility: hidden; }
.pm--encaixado .pm__tela { visibility: visible; }
.pmt { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18px; padding: 62px 22px 26px; background: linear-gradient(180deg, #FBF8F1, #F1E9DA); color: #0B2035; font-family: var(--f-texto); }
.pmt::before { content: ''; position: absolute; left: 50%; top: 12px; translate: -50% 0; width: 96px; height: 28px; border-radius: 99px; background: #030405; }
.pmt p, .pmt ul { margin: 0; padding: 0; list-style: none; }
.pmt__topo { position: absolute; left: 30px; top: 18px; font: 600 14px/1 var(--f-texto); }
.pmt__cab { display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; align-items: center; font: 600 17px/1.15 var(--f-texto); }
.pmt__cab img { grid-row: 1 / 3; width: 40px; height: 40px; object-fit: contain; }
.pmt__cab small { font: 500 12px/1.2 var(--f-texto); color: #5B6875; }
.pmt__fase { height: 6px; border-radius: 3px; background: rgba(11, 32, 53, 0.08); overflow: hidden; }
.pmt__fase i { display: block; height: 100%; border-radius: inherit; background: #C8962F; transform-origin: 0 50%; scale: var(--pm-f, 0.25) 1; transition: scale 700ms cubic-bezier(.65, 0, .25, 1); }
.pmt__telas { display: grid; }
.pmt__t { grid-area: 1 / 1; display: grid; align-content: start; gap: 6px; }
.pmt__t > * { transition: opacity 280ms, translate 420ms cubic-bezier(.16, 1, .3, 1), filter 280ms; }
.pmt__t:not(.on) > * { opacity: 0; translate: 10px 0; filter: blur(5px); }
.pmt__t.on > :nth-child(2) { transition-delay: 40ms; } .pmt__t.on > :nth-child(3) { transition-delay: 80ms; } .pmt__t.on > :nth-child(4) { transition-delay: 120ms; }
.pmt__t-rot { font: 600 11px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9A7120; }
.pmt__big { margin-top: 6px !important; font: 400 40px/1 var(--f-titulo); letter-spacing: -0.02em; }
.pmt__sub { font: 500 13px/1.3 var(--f-texto); color: #5B6875; }
.pmt__t ul { display: grid; gap: 8px; margin-top: 14px !important; }
.pmt__t li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.06); font: 600 13px/1.25 var(--f-texto); }
.pmt__t em { flex: none; padding: 4px 8px; border-radius: 8px; background: #E6F1EA; color: #2F7A52; font: 600 11px/1 var(--f-texto); font-style: normal; }
.pmt__t em.alerta { background: #FBF1DC; color: #7A5A14; }
.anima .pm .pm__aparelho { opacity: 0; translate: 0 70px; transition: opacity 700ms linear, translate 1200ms cubic-bezier(.16, 1, .3, 1); }
.anima .pm.vista .pm__aparelho { opacity: 1; translate: 0 0; }

@media (max-width: 1023px) {
  .ph__grade { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 34px; padding-top: calc(var(--altura-topo) + 24px); }
  .ph__titulo { font-size: clamp(2rem, 0.5rem + 7.4vw, 3.6rem); }
  .ph__acoes, .ph__acoes .bt { width: 100%; justify-content: center; }
  .pp__grade { grid-template-columns: minmax(0, 1fr); }
  .pp__abas { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .pp__abas button { padding: 13px 14px; font-size: 0.94rem; }
  .pp__abas button::after { display: none; }
}
@media (max-width: 639px) {
  .ph__legenda { font-size: 0.7rem; }
  .ph__palco { aspect-ratio: 0.86; }
  .ph__no { padding: 7px 9px; border-radius: 10px; }
  .ph__no b { font-size: 0.74rem; }
  .ph__raia span { font-size: 0.6rem; }
  .ph__no--nota, .ph__no--banco, .ph__no--insumo { left: 26%; } .ph__no--cobrar, .ph__no--pagar, .ph__no--folha { left: 70%; }
  .ph__no--voce { left: 76%; top: 94%; }
  .pp__pilha { height: 470px; }
  .pp__folha { width: 92%; gap: 16px; padding: 20px; }
  .pp__campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pp__campos div { padding: 10px; }
  .pp__campos dd { font-size: 0.85rem; }
  .pp__passos li { font-size: 0.9rem; padding: 7px 0; }
  .pm__palco { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 14px; }
  .pm__onda { display: none; }
  .pm__fone { grid-column: 1; grid-row: 1; width: min(250px, 64vw); justify-self: center; margin-bottom: 14px; }
  .pm__m { grid-column: 1 !important; grid-row: auto !important; justify-self: stretch !important; width: auto; margin: 0 !important; }
}

/* v31 e-processos: o POP impresso do topo (pf) saiu; a tela do processo mora em zzzzz-v31-e-processos.css */

/* JM, 07/10: o fundo (monograma) mora no palco preso, então não anda com a rolagem; celular maior e com destaque */
.pm__preso { position: relative; isolation: isolate; }
.pm--vivo .pm__preso { position: sticky; }
.pm__fone::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(216, 172, 82, 0.28), rgba(216, 172, 82, 0)); }
.pm__sombra { left: 20%; right: 20%; bottom: -1.5%; height: 3.5%; background: rgba(11, 32, 53, 0.42); filter: blur(16px); }
@media (min-width: 1024px) { .pm--vivo .pm__palco { min-height: min(660px, calc(100svh - 230px)); } .pm__aparelho { width: min(100%, calc((100svh - 330px) * 0.52)); justify-self: center; } }

/* JM, 07/10: a linha liga os cartões de verdade (o JS traça a curva pelos centros, na ordem das etapas, passando por
   trás do celular); os cartões ficam opacos e só o conteúdo dos que não estão em foco esmaece */
.pm__onda { top: 0; height: 100%; }
.pm__trilho { stroke: rgba(11, 32, 53, 0.08); stroke-width: 24; stroke-linecap: round; }
.pm__traco { stroke: #D8AC52; stroke-width: 24; stroke-linecap: round; opacity: 0.6; }
.pm--vivo .pm__m:not(.ativo) { opacity: 1; transform: scale(0.96); }
.pm--vivo .pm__m:not(.ativo) > * { opacity: 0.45; }
.pm__m > * { transition: opacity 380ms; }
.pm__m { background: #FFFFFF; }

/* ---------- JM, 07/10: disposição fiel ao FoodHue (pin 1125829606882750659) ----------
   Os quatro cartões numa fileira só, na mesma base (os das pontas um pouco mais baixos), o celular em pé no centro
   e uma onda contínua de ponta a ponta da tela: passa por baixo dos cartões da esquerda, sobe por trás do celular e
   passa por cima dos da direita. O JS traça a onda pela posição real dos cartões. Só no computador. */
@media (min-width: 1024px) {
  .pm__palco { width: min(100vw - 48px, 1440px); margin-left: 50%; translate: -50% 0; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(270px, 320px) repeat(2, minmax(0, 1fr)); grid-template-rows: auto; align-items: end; gap: clamp(14px, 1.6vw, 24px); padding-top: 0; }
  .pm__m--0, .pm__m--1, .pm__m--2, .pm__m--3 { grid-row: 1; justify-self: stretch; align-self: end; width: auto; margin: 0 0 clamp(30px, 6svh, 70px); }
  .pm__m--0 { grid-column: 1; } .pm__m--1 { grid-column: 2; } .pm__m--2 { grid-column: 4; } .pm__m--3 { grid-column: 5; }
  .pm__m--0, .pm__m--3 { position: relative; top: 34px; }
  .pm__fone { grid-column: 3; grid-row: 1; align-self: end; }
  .pm__aparelho { width: 100%; }
  .pm--vivo .pm__palco { min-height: 0; }
  .pm__onda { left: calc(50% - 50vw); width: 100vw; top: 0; height: 100%; }
  .pm__trilho { stroke: rgba(11, 32, 53, 0.07); stroke-width: 16; }
  .pm__traco { stroke: #D8AC52; stroke-width: 16; opacity: 0.75; }
  .pm__m { padding: 24px 22px 26px; }
}

/* quem.css */
/* ---------- Quem é a Conex · v10.3 (JM, 28/09) ----------
   O palco fica preso (sticky) e leva o fundo: a luz e o monograma não rolam, só as cenas trocam. Em cada cena o texto
   acende palavra por palavra com a rolagem (qx-pal → .cheia). Tudo centralizado, uma coisa por cena.
   Sem JS ou com movimento reduzido: as cinco cenas uma embaixo da outra, com o texto aceso. */
/* sem o padding de .secao: o fundo (luz e monograma) está no palco, e o padding deixava uma faixa lisa em cima e embaixo */
.qx { position: relative; color: #FFFFFF; background: #0B2035; padding-block: 0; }
.anima .qx.qx--vivo { height: calc(100svh + 4 * 42svh); }
.qx__palco { position: relative; overflow: hidden; display: grid; justify-items: center; gap: clamp(56px, 8vw, 96px);
  padding: calc(var(--secao) + var(--onda-h)) var(--margem) var(--secao);
  background: radial-gradient(50% 55% at 50% 30%, rgba(46, 111, 163, 0.26), transparent 70%), #0B2035; }
.qx--vivo .qx__palco { position: sticky; top: 0; display: block; height: 100svh; padding: 0; }
.qx__rot { position: relative; z-index: 2; color: #D5E1EB; text-align: center; }
.qx--vivo .qx__rot { position: absolute; left: 50%; top: calc(var(--altura-topo) + 26px); translate: -50% 0; margin: 0; }

/* cenas: centradas, uma por vez */
.qx__cena { position: relative; z-index: 2; display: grid; justify-items: center; align-content: center; gap: clamp(14px, 2.2svh, 22px);
  width: min(1040px, 100%); text-align: center; }
.qx--vivo .qx__cena { position: absolute; left: 50%; top: calc(var(--altura-topo) + 64px); bottom: 56px; width: min(1040px, 100% - 2 * var(--margem));
  translate: -50% 24px; opacity: 0; pointer-events: none; transition: opacity 500ms linear, translate 700ms cubic-bezier(.22, 1, .36, 1); }
.qx--vivo[data-cena="1"] [data-qx-cena="1"], .qx--vivo[data-cena="2"] [data-qx-cena="2"], .qx--vivo[data-cena="3"] [data-qx-cena="3"],
.qx--vivo[data-cena="4"] [data-qx-cena="4"], .qx--vivo[data-cena="5"] [data-qx-cena="5"] { opacity: 1; translate: -50% 0; pointer-events: auto; }

/* o acender: cada palavra (ou item) sai de 22% para 100% conforme a rolagem avança na cena */
.qx-pal { transition: opacity 360ms linear, color 360ms linear; }
.qx--vivo .qx-pal { opacity: 0.22; }
.qx--vivo .qx-pal.cheia { opacity: 1; }

/* 1 · manifesto */
.qx__manifesto { max-width: 22ch; font: 400 clamp(2.1rem, 1rem + 3.4vw, 4.4rem)/1.1 var(--f-titulo); letter-spacing: -0.025em; color: #FFFFFF; text-wrap: balance; }

/* 2 e 3 · as sócias: foto, papel, nome e o texto que acende */
.qx-pessoa__foto { width: calc(min(40svh, 400px) * 0.8); max-width: 72vw; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 26px;
  background: #061421; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(233, 242, 248, 0.12); }
.qx-pessoa__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
[data-qx-cena="3"] .qx-pessoa__foto img { object-position: 50% 30%; }
.qx-pessoa__papel { margin-top: 6px; font: 600 0.75rem/1.2 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: #E8CE93; }
.qx-pessoa__nome { font: 400 clamp(2.3rem, 1.2rem + 3vw, 4.2rem)/1 var(--f-titulo); letter-spacing: -0.03em; color: #FFFFFF; }
.qx-linha { display: block; overflow: hidden; padding-bottom: 0.08em; white-space: nowrap; }
.qx-l { display: inline-block; transition: translate 760ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 30ms); }
.qx--vivo .qx-l { translate: 0 120%; }
.qx--vivo[data-cena="2"] [data-qx-cena="2"] .qx-l, .qx--vivo[data-cena="3"] [data-qx-cena="3"] .qx-l { translate: 0 0; transition-delay: calc(200ms + var(--i, 0) * 30ms); }
.qx-pessoa__texto { max-width: 46ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; color: #E3ECF3; text-wrap: balance; }

/* 4 · o que a Conex junta: quatro frentes lado a lado, cada uma acende inteira */
.qx-frentes__t { font: 400 clamp(1.8rem, 1rem + 2.2vw, 3rem)/1.1 var(--f-titulo); letter-spacing: -0.02em; text-wrap: balance; }
.qx-frentes__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin: clamp(10px, 2svh, 24px) 0 0; padding: 0; list-style: none; }
.qx-frentes__lista li { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 8px clamp(12px, 2vw, 28px); }
.qx-frentes__lista li + li { border-left: 1px solid rgba(232, 206, 147, 0.35); }
.qx-frentes__lista b { font: 400 clamp(1.5rem, 1rem + 1.2vw, 2.1rem)/1.1 var(--f-titulo); color: #E8CE93; }
.qx-frentes__lista span { max-width: 20ch; font-size: 1rem; line-height: 1.45; color: #D5E1EB; }

/* 5 · números e WhatsApp */
.qx-elos { width: clamp(84px, 7vw, 116px); height: auto; overflow: visible; }
.qx-elos__a, .qx-elos__b { transition: translate 1000ms cubic-bezier(.22, 1, .36, 1) 150ms, opacity 500ms linear 150ms; }
.qx--vivo .qx-elos__a { translate: -150px 0; opacity: 0; } .qx--vivo .qx-elos__b { translate: 150px 0; opacity: 0; }
.qx--vivo[data-cena="5"] :is(.qx-elos__a, .qx-elos__b) { translate: 0 0; opacity: 1; }
.qx__frase { max-width: 20ch; font: 400 clamp(1.9rem, 1rem + 2.4vw, 3.4rem)/1.08 var(--f-titulo); letter-spacing: -0.02em; text-wrap: balance; }
.qx__fatos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin: clamp(6px, 1.4svh, 16px) 0; padding: 0; list-style: none; }
.qx-fato { display: grid; justify-items: center; gap: 6px; padding: 0 clamp(10px, 2vw, 24px); }
.qx-fato + .qx-fato { border-left: 1px solid rgba(232, 206, 147, 0.35); }
.qx-fato__num { font: 400 clamp(2.2rem, 1.2rem + 2.2vw, 3.6rem)/1 var(--f-titulo); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.qx-fato__txt { max-width: 22ch; font-size: 0.9375rem; line-height: 1.4; color: #D5E1EB; }

/* marcador de cena (cinco traços), centrado no pé */
.qx__marcas { display: none; }
.qx--vivo .qx__marcas { position: absolute; z-index: 3; left: 50%; bottom: 22px; translate: -50% 0; display: flex; gap: 8px; margin: 0; }
.qx__marcas i { display: block; width: 28px; height: 3px; border-radius: 3px; background: rgba(233, 242, 248, 0.2); transition: background-color 400ms linear; }
.qx--vivo[data-cena="1"] [data-qx-marca="1"], .qx--vivo[data-cena="2"] [data-qx-marca="2"], .qx--vivo[data-cena="3"] [data-qx-marca="3"],
.qx--vivo[data-cena="4"] [data-qx-marca="4"], .qx--vivo[data-cena="5"] [data-qx-marca="5"] { background: #D8AC52; }

@media (max-width: 767px) {
  .qx--vivo .qx__cena { top: calc(var(--altura-topo) + 52px); bottom: calc(var(--altura-barra, 64px) + 34px); }
  .qx-pessoa__foto { width: calc(min(30svh, 260px) * 0.8); }
  .qx-pessoa__texto { font-size: 0.9375rem; line-height: 1.5; }
  .qx-frentes__lista, .qx__fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .qx-frentes__lista li:nth-child(3), .qx-fato:nth-child(3) { border-left: 0; }
  .qx-frentes__lista span { font-size: 0.875rem; }
  .qx-fato__txt { font-size: 0.8125rem; }
  .qx--vivo .qx__marcas { bottom: calc(var(--altura-barra, 64px) + 14px); }
}
@media (prefers-reduced-motion: reduce) { .qx *, .qx *::before { transition: none !important; } }

/* ---------- v10.4 (JM, 28/09): opção B da página de opções. As sócias em duas colunas: a foto à esquerda na altura da
   tela, cargo, nome grande e o texto que acende à direita. Mesmas peças, mais destaque, menos espaço vazio.
   No celular volta a ser empilhado e centrado. ---------- */
.qx-pessoa { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; column-gap: clamp(32px, 5vw, 88px); text-align: left; }
.qx--vivo .qx-pessoa { width: min(1260px, 100% - 2 * var(--margem)); top: calc(var(--altura-topo) + 20px); bottom: 44px; }
.qx-pessoa__foto { width: auto; height: min(calc(100svh - var(--altura-topo) - 90px), 720px); max-width: none; border-radius: 32px; }
.qx:not(.qx--vivo) .qx-pessoa__foto { height: min(80svh, 640px); }
.qx-pessoa__lado { display: grid; gap: 22px; align-content: center; }
.qx-pessoa__papel { margin-top: 0; font-size: 0.8125rem; letter-spacing: 0.2em; }
.qx-pessoa__nome { font-size: clamp(3.4rem, 1.4rem + 5vw, 7.2rem); line-height: 0.95; letter-spacing: -0.035em; }
.qx-pessoa__nome .qx-linha + .qx-linha .qx-l { transition-delay: calc(80ms + var(--i, 0) * 30ms); }
.qx-pessoa__texto { max-width: 30ch; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); line-height: 1.5; text-wrap: pretty; }
.qx--vivo:is([data-cena="2"], [data-cena="3"]) .qx__rot { opacity: 0; }
.qx__rot { transition: opacity 400ms linear; }
@media (max-width: 900px) {
  .qx-pessoa { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 16px; }
  .qx--vivo .qx-pessoa { top: calc(var(--altura-topo) + 20px); }
  .qx-pessoa__foto { height: min(40svh, 360px); border-radius: 26px; }
  .qx-pessoa__lado { justify-items: center; gap: 12px; }
  .qx-pessoa__nome { font-size: clamp(2.6rem, 1.4rem + 6vw, 3.8rem); }
  .qx-pessoa__texto { font-size: 1.0625rem; max-width: 36ch; }
}
@media (max-width: 767px) {
  .qx--vivo .qx-pessoa { bottom: calc(var(--altura-barra, 64px) + 34px); }
  .qx-pessoa__foto { height: min(34svh, 300px); }
  .qx-pessoa__texto { font-size: 0.9375rem; }
}

/* JM, 01/10: com o Como funciona encostado em cima (sem a seção de segurança no meio), a luz do palco nascia numa linha
   reta no topo; uma faixa marinho no começo da seção (que rola embora) faz a passagem sem emenda */
/* JM, 07/10: o manifesto em três linhas, cada frase surge depois da anterior */
.qx__manifesto { max-width: none; }
.qx-frase { display: block; transition: opacity 600ms linear, transform 900ms cubic-bezier(.16, 1, .3, 1); }
.qx--vivo .qx-frase { opacity: 0; transform: translateY(22px); }
.qx--vivo .qx-frase.cheia { opacity: 1; transform: none; }
/* JM, 07/10: cinco frentes (entrou Treinamento) */
.qx-frentes__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.qx-frentes__lista li { padding-inline: clamp(8px, 1.4vw, 22px); }
.qx-frentes__lista b { font-size: clamp(1.35rem, 0.95rem + 1vw, 1.9rem); }
@media (max-width: 899px) {
  .qx-frentes__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qx-frentes__lista li:nth-child(odd) { border-left: 0; } .qx-frentes__lista li:nth-child(even) { border-left: 1px solid rgba(232, 206, 147, 0.35); }
  .qx-frentes__lista li:last-child { grid-column: 1 / -1; border-left: 0; }
}
@media (min-width: 900px) { .qx-frase { white-space: nowrap; } .qx__manifesto { font-size: clamp(2rem, 0.8rem + 3vw, 4rem); } }

/* resultados.css */
/* ---------- Resultados · v13 (JM, 29/09): quatro cartões lado a lado, a foto no fundo de cada um; o cartão sob o
   ponteiro cresce e os outros cedem na mesma proporção. Aberto, mostra a prévia do que chega para o cliente e o
   botão de WhatsApp com a mensagem daquele resultado. No celular, carrossel de arrastar com todos abertos. ---------- */
.rcs__cabeca { display: grid; justify-items: center; gap: 14px; text-align: center; }
.rcs__rot { font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase; color: #5E450D; }
.rcs h2 { font: 500 clamp(2.1rem, 1.1rem + 2.7vw, 3.8rem)/1.2 var(--f-texto); letter-spacing: -0.035em; color: #0B2035; max-width: 20ch; text-wrap: balance; }
.rcs__apoio { max-width: 40ch; color: #3B4753; font-size: 1.0625rem; }
.rcs__so-mouse { display: none; }

/* o cartão (base: carrossel do celular e do tablet, todos abertos) */
.rcs__trilho { display: flex; gap: 12px; margin: clamp(28px, 4vw, 44px) calc(-1 * var(--margem, 16px)) 0; padding: 0 var(--margem, 16px) 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem, 16px); overscroll-behavior-x: contain; scrollbar-width: none; }
.rcs__trilho::-webkit-scrollbar { display: none; }
.rc { position: relative; flex: 0 0 min(84vw, 400px); min-height: 580px; overflow: hidden; border-radius: 26px; background: #1D4A73; isolation: isolate; scroll-snap-align: start; }
.rc__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.rc:nth-child(1) .rc__foto { object-position: 78% 40%; }
.rc:nth-child(2) .rc__foto { object-position: 64% 50%; }
.rc:nth-child(3) .rc__foto { object-position: 50% 30%; }
.rc:nth-child(4) .rc__foto { object-position: 50% 40%; }
/* o marinho sobe de baixo só até onde o texto precisa; o alto da foto fica limpo */
.rc::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 32, 53, 0) 18%, rgba(11, 32, 53, 0.72) 44%, rgba(11, 32, 53, 0.95) 64%, #0B2035 100%); }
.rc__corpo { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px; color: #FFFFFF; }
.rcs .rc__tit { font: 500 clamp(1.7rem, 1.3rem + 0.8vw, 2.1rem)/1.08 var(--f-texto); letter-spacing: -0.03em; color: #FFFFFF; }
.rc__txt { max-width: 36ch; font-size: 0.9375rem; line-height: 1.5; color: #E4ECF3; }
.rc__mais { display: grid; grid-template-rows: 1fr; grid-template-columns: minmax(0, 1fr); } /* a coluna não passa da largura do cartão */
.rc__mais-in { min-height: 0; display: grid; justify-items: start; gap: 14px; padding-top: 6px; }
.rc__cta { max-width: 100%; }

/* a prévia: o que chega para o cliente (a tela do banco, a curva do caixa, o mês, a lista) */
.rp { width: 100%; margin: 0; padding: 14px 16px; border-radius: 16px; background: #F6F1E7; color: #0B2035; font-size: 0.875rem; box-shadow: 0 20px 36px -24px rgba(0, 0, 0, 0.8); }
.rp__de { font: 700 0.6875rem/1.3 var(--f-texto); letter-spacing: 0.12em; text-transform: uppercase; color: #5E450D; }
.rp__forte { margin-top: 4px; font-size: 1rem; font-weight: 700; }
.rp__linha { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: #26323E; }
.rp__linha b { color: #0B2035; white-space: nowrap; }
.rp__graf { display: block; width: 100%; height: 56px; margin-top: 8px; }
.rp__area { fill: rgba(47, 102, 144, 0.14); }
.rp__traco { fill: none; stroke: #2F6690; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rp__ponto { fill: #B88A2B; stroke: #F6F1E7; stroke-width: 2; }
.rp--mes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rp--mes dt { font: 700 0.6875rem/1.3 var(--f-texto); letter-spacing: 0.1em; text-transform: uppercase; color: #3B4753; }
.rp--mes dd { margin: 4px 0 0; font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.rp__sobra dt { color: #5E450D; }
.rp--rotina { list-style: none; display: grid; gap: 0; padding-block: 6px; }
.rp--rotina li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(11, 32, 53, 0.1); }
.rp--rotina li:first-child { border-top: 0; }
.rp--rotina b { font-weight: 600; color: #3B4753; white-space: nowrap; }
.rp--rotina .rp__voce span, .rp--rotina .rp__voce b { color: #0B2035; font-weight: 700; }

/* ---------- com mouse, tela larga: os quatro lado a lado e o do ponteiro cresce ---------- */
@media (hover: hover) and (min-width: 1024px) {
  .rcs__so-mouse { display: inline; } .rcs__so-toque { display: none; }
  .rcs__trilho { margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; gap: 14px; height: clamp(540px, 42vw, 600px); }
  .rc { flex: 1 1 0; min-width: 0; min-height: 0; border-radius: 28px; transition: flex-grow 760ms cubic-bezier(.22, 1, .36, 1); }
  .rc--on { flex-grow: 2.5; }
  .rc__foto { scale: 1.06; transition: scale 1100ms cubic-bezier(.22, 1, .36, 1); }
  .rc--on .rc__foto { scale: 1; }
  .rc::after { background: linear-gradient(180deg, rgba(11, 32, 53, 0) 34%, rgba(11, 32, 53, 0.78) 62%, rgba(11, 32, 53, 0.96) 82%, #0B2035 100%); transition: opacity 500ms linear; }
  .rc--on::after { opacity: 0; }
  /* aberto, o marinho sobe mais para caber a prévia e o botão */
  .rc::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 500ms linear;
    background: linear-gradient(180deg, rgba(11, 32, 53, 0) 8%, rgba(11, 32, 53, 0.74) 30%, rgba(11, 32, 53, 0.95) 48%, #0B2035 100%); }
  .rc--on::before { opacity: 1; }
  .rc__corpo { padding: 26px; }
  .rc__txt { max-height: 7em; overflow: hidden; transition: opacity 300ms linear, max-height 700ms cubic-bezier(.22, 1, .36, 1); }
  /* quem cede espaço fica só com o nome, assentado embaixo */
  .rcs--foco .rc:not(.rc--on) .rc__txt { opacity: 0; max-height: 0; }
  .rc__mais { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 700ms cubic-bezier(.22, 1, .36, 1), opacity 260ms linear; }
  .rc--on .rc__mais { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 700ms cubic-bezier(.22, 1, .36, 1), opacity 400ms linear 260ms; }
  .rc__mais-in { overflow: hidden; width: min(440px, 100%); padding-top: 8px; }
  .rc--on .rc__mais-in { width: 440px; max-width: 100%; }
}

/* ---------- entrada: os quatro sobem um atrás do outro quando o trilho aparece ---------- */
.anima .rcs--espera .rc { opacity: 0; translate: 0 60px; }
.anima .rcs--entra .rc { animation: rc-surge 900ms cubic-bezier(.22, 1, .36, 1) both; }
.anima .rcs--entra .rc:nth-child(2) { animation-delay: 110ms; } .anima .rcs--entra .rc:nth-child(3) { animation-delay: 220ms; } .anima .rcs--entra .rc:nth-child(4) { animation-delay: 330ms; }
@keyframes rc-surge { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .rc, .rc__foto, .rc__mais, .rc__txt, .rc::before, .rc::after { transition: none !important; }
  .anima .rcs--espera .rc { opacity: 1; translate: none; } .anima .rcs--entra .rc { animation: none; }
}

/* ---------- JM, 01/10: o miolo do cartão aberto é um placar ----------
   Três números lado a lado, separados por fio; o fio de cima é dourado e se desenha quando o cartão abre. O número que
   importa vai em ouro. Com mouse, o JS conta os números ao abrir. */
.rp, .rd { display: none; }
/* cada coluna nunca fica mais estreita que o número final (min-content), então o número não passa do fio */
.pl { position: relative; display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.pl::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: #E8CE93; transform-origin: 0 50%; }
.pl div { display: grid; align-content: start; gap: 4px; padding: 16px 12px 0 0; }
.pl div + div { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.pl b { display: inline-grid; justify-self: start; font: 500 1.2rem/1 var(--f-texto); letter-spacing: -0.02em; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* reserva a largura do valor final: enquanto conta, o número não empurra nem invade a coluna ao lado */
.pl b::after { content: attr(data-alvo); height: 0; overflow: hidden; visibility: hidden; }
.pl span { font-size: 0.8125rem; line-height: 1.3; color: #A9BCCB; }
.pl .pl__ouro b { color: #F4E2B4; } .pl .pl__ouro span { color: #E8CE93; }
@media (min-width: 420px) { .pl b { font-size: 1.4rem; } }
@media (hover: hover) and (min-width: 1024px) {
  .pl b { font-size: clamp(1.35rem, 0.95rem + 0.75vw, 1.75rem); }
  .rc:not(.rc--on) .pl::before { transform: scaleX(0); }
  .pl::before { transition: transform 900ms cubic-bezier(.22, 1, .36, 1) 300ms; }
}
@media (prefers-reduced-motion: reduce) { .pl::before { transition: none !important; } }

/* ---------- JM, 01/10: bordas do cartão sem falha ----------
   O canto arredondado com overflow + a foto escalando deixava um fio claro (o fundo do cartão) nos cantos. A foto passa
   1px além de cada lado e o cartão recorta por clip-path com o mesmo raio, que o navegador desenha liso na composição. */
.rc { --raio-rc: 26px; border-radius: var(--raio-rc); clip-path: inset(0 round var(--raio-rc)); background: #0B2035; }
.rc__foto { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
@media (hover: hover) and (min-width: 1024px) { .rc { --raio-rc: 28px; } }

/* ---------- JM, 07/10: abertura do cartão mais fluida ----------
   Antes, o texto entrava enquanto o cartão ainda crescia e quebrava linha a cada quadro. Agora o miolo tem largura fixa
   (o cartão só revela o que já está montado), a altura abre com a mesma curva do crescimento e cada parte entra em
   seguida, de baixo para cima: texto, placar (com o fio dourado) e botão. Ao fechar, tudo sai junto e rápido. */
@media (hover: hover) and (min-width: 1024px) {
  .rc { transition: flex-grow 820ms cubic-bezier(.65, 0, .25, 1); }
  .rc__corpo { right: auto; width: max(100%, 488px); }
  .rc:not(.rc--on) .rc__corpo { width: 100%; }
  .rc__txt { width: 400px; max-width: none; max-height: none; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 820ms cubic-bezier(.65, 0, .25, 1); }
  .rcs--foco .rc:not(.rc--on) .rc__txt { opacity: 1; max-height: none; grid-template-rows: 0fr; }
  .rc__mais { opacity: 1 !important; transition: grid-template-rows 820ms cubic-bezier(.65, 0, .25, 1) !important; }
  .rc__mais-in, .rc--on .rc__mais-in { width: 440px; max-width: none; }
  /* as partes: saem juntas e rápido; entram uma depois da outra, depois que o cartão já ganhou espaço */
  .rc__txt, .rc__mais-in > * { transition-property: opacity, transform, grid-template-rows; }
  .rc:not(.rc--on) :is(.rc__txt, .rc__mais-in > *) { opacity: 0; transform: translateY(14px); transition-duration: 180ms, 180ms, 820ms; transition-timing-function: linear, ease-in, cubic-bezier(.65, 0, .25, 1); }
  .rc--on :is(.rc__txt, .rc__mais-in > *) { opacity: 1; transform: none; transition-duration: 450ms, 700ms, 820ms; transition-timing-function: linear, cubic-bezier(.22, 1, .36, 1), cubic-bezier(.65, 0, .25, 1); }
  .rc--on .rc__txt { transition-delay: 300ms, 300ms, 0ms; }
  .rc--on .rc__mais-in > :nth-child(1) { transition-delay: 400ms, 400ms, 0ms; }
  .rc--on .rc__mais-in > :nth-child(2) { transition-delay: 500ms, 500ms, 0ms; }
  .rc--on .rc__mais-in > :nth-child(3) { transition-delay: 600ms, 600ms, 0ms; }
  .rc__txt > p { min-height: 0; overflow: hidden; margin: 0; }
  .pl::before { transition: transform 900ms cubic-bezier(.22, 1, .36, 1) 520ms; }
  /* o título dos que cedem fica parado e assentado; o do aberto sobe junto com o miolo */
  .rcs .rc__tit { transition: font-size 820ms cubic-bezier(.65, 0, .25, 1); }
}
.rc__txt > p { margin: 0; }
/* JM, 07/10: nomes mais longos (Pagamentos e recebimentos): nos cartões recolhidos o título diminui para caber */
@media (hover: hover) and (min-width: 1024px) {
  .rcs .rc:not(.rc--on) .rc__tit { font-size: clamp(1.25rem, 0.9rem + 0.7vw, 1.7rem); }
}

/* secoes.css */
/* Seções · v2 */

/* ---------- faixa: letreiro lento com o que a Conex assume ---------- */
.faixa { position: relative; z-index: 2; overflow: hidden; padding: 6px 0 22px; background: var(--papel); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.faixa__trilho { display: flex; width: max-content; }
.anima .faixa__trilho { animation: letreiro 48s linear infinite; }
@keyframes letreiro { to { translate: -50% 0; } }
.faixa__itens { display: flex; flex: none; }
.faixa__itens li { display: inline-flex; align-items: center; white-space: nowrap; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem); font-weight: 560; letter-spacing: -0.02em; color: var(--tinta); }
.faixa__itens li::after { content: ''; width: 7px; height: 7px; margin: 0 clamp(20px, 3vw, 40px); border-radius: 50%; background: var(--ouro); }
@media (prefers-reduced-motion: reduce) { .faixa__trilho { flex-wrap: wrap; width: auto; justify-content: center; } .faixa__itens[aria-hidden] { display: none; } .faixa__itens { flex-wrap: wrap; justify-content: center; row-gap: 8px; } }

/* ---------- a semana: quadro de segunda a sábado; a linha da Conex varre e cada dia vira ---------- */
.semana { padding-block: 0; }
.semana__fixo { padding-block: var(--secao); }
.semana__grade { display: grid; gap: clamp(26px, 4vw, 56px); align-items: center; }
.semana__cabeca { display: grid; justify-items: start; gap: 16px; }
.semana__cabeca .bt { margin-top: 6px; }

.quadro { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(14px, 1.6vw, 20px);
  background: linear-gradient(170deg, #0F2E4C, #0A2036 70%); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.12), 0 50px 90px -50px rgba(0, 0, 0, 0.9); }
.quadro__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 14px; }
.quadro__estado { position: relative; display: grid; font-size: 1.0625rem; font-weight: 640; letter-spacing: -0.02em; color: #fff; }
.quadro__estado > span { grid-area: 1 / 1; transition: opacity 420ms linear, translate 520ms cubic-bezier(.2, .9, .25, 1); }
.quadro__estado-b { opacity: 0; translate: 0 10px; color: var(--ouro-claro); }
.semana--feita .quadro__estado-a { opacity: 0; translate: 0 -10px; }
.semana--feita .quadro__estado-b { opacity: 1; translate: 0 0; }
.quadro__mes { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: #BFD8E9; }
.quadro__dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.dia { display: grid; grid-template-rows: auto 1fr; gap: 8px; }
/* cabeçalho de calendário: dia abreviado, número grande e uma barrinha que enche quando o dia é resolvido */
.dia__nome { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 0 4px 8px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: #BFD8E9; }
.dia__nome b { font-size: 1.25rem; font-weight: 660; letter-spacing: -0.03em; color: #fff; transition: color 400ms linear; }
.dia__barra { position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 2px; background: rgba(233, 242, 248, 0.14); overflow: hidden; }
.dia__barra::after { content: ''; position: absolute; inset: 0; background: var(--ouro); scale: 0 1; transform-origin: 0 50%; transition: scale 620ms cubic-bezier(.3, .8, .25, 1) 120ms; }
.dia--virado .dia__barra::after { scale: 1 1; }
.dia--virado .dia__nome b { color: var(--ouro-claro); }
/* lado resolvido: como uma tarefa concluída */
.dia__feito { display: grid; gap: 4px; }
.dia__feito b { font-size: 1.0625rem; font-weight: 660; letter-spacing: -0.02em; color: #fff; }
.dia__det { font-size: 0.82rem; line-height: 1.4; color: #C6D7E5; }
.dia__quando { margin-top: auto; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ouro-claro); }
.dia__face--ok { grid-template-rows: auto 1fr auto; }
/* o visto se desenha na hora em que a carta termina de virar */
.dia__visto .visto path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 420ms cubic-bezier(.3, .8, .25, 1) 420ms; }
.dia--virado .dia__visto .visto path, .semana:not(.semana--viva) .dia__visto .visto path { stroke-dashoffset: 0; }
.dia__carta { position: relative; display: grid; min-height: 150px; perspective: 900px; }
.dia__face { grid-area: 1 / 1; display: grid; align-content: start; gap: 10px; padding: 14px 14px 16px; border-radius: 14px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: rotate 760ms cubic-bezier(.3, 1.2, .4, 1); }
.dia__face p { font-size: 0.9rem; line-height: 1.4; }
.dia__face--dor { background: #F4EEE2; color: #2B2012; rotate: y 0deg; box-shadow: 0 16px 26px -16px rgba(0, 0, 0, 0.7); }
.dia__face--dor p { color: #2B2012; }
.dia__face--ok { background: linear-gradient(160deg, #173F66, #0C2742); color: #fff; rotate: y 180deg; box-shadow: inset 0 0 0 1px rgba(216, 172, 82, 0.45); }
.dia__face--ok p { color: #EAF2F8; }
.dia__alerta { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #B4401F; color: #fff; font-weight: 700; font-size: 0.875rem; }
.dia__visto { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--ouro); color: var(--marinho); }
.dia__visto .visto { width: 15px; height: 15px; }
/* a carta vira: a dor gira para trás e a resposta da Conex vem para frente */
.dia--virado .dia__face--dor { rotate: y -180deg; }
.dia--virado .dia__face--ok { rotate: y 0deg; }
/* cada dor chega colada meio torta no quadro; ao virar, a resposta assenta reta */
.dia__carta { transform: rotate(var(--tz, 0deg)); transition: transform 760ms cubic-bezier(.3, 1.2, .4, 1); }
.dia:nth-child(1) { --tz: -2deg; } .dia:nth-child(2) { --tz: 1.5deg; } .dia:nth-child(3) { --tz: -1deg; }
.dia:nth-child(4) { --tz: 2deg; } .dia:nth-child(5) { --tz: -1.5deg; } .dia:nth-child(6) { --tz: 1deg; }
.dia--virado .dia__carta { transform: none; }
.anima .semana .dia__carta { transition: transform 760ms cubic-bezier(.3, 1.2, .4, 1), translate 700ms cubic-bezier(.2, .9, .25, 1), opacity 500ms linear; }
.anima .semana:not(.semana--vista) .dia__carta { opacity: 0; translate: 0 24px; }
.anima .semana .dia:nth-child(2) .dia__carta { transition-delay: 70ms; } .anima .semana .dia:nth-child(3) .dia__carta { transition-delay: 140ms; }
.anima .semana .dia:nth-child(4) .dia__carta { transition-delay: 210ms; } .anima .semana .dia:nth-child(5) .dia__carta { transition-delay: 280ms; }
.anima .semana .dia:nth-child(6) .dia__carta { transition-delay: 350ms; }

/* ---- estado inicial: cada dor tem a cara do objeto de onde veio, presa com fita no quadro ---- */
.dia__face--dor { position: relative; }
.dia__face--dor::before { content: ''; position: absolute; top: -9px; left: 50%; width: 58px; height: 18px; margin-left: -29px; rotate: -3deg;
  background: rgba(233, 226, 205, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.dia__origem { display: grid; gap: 1px; padding-bottom: 8px; border-bottom: 1px solid rgba(43, 32, 18, 0.14); font-size: 0.72rem; line-height: 1.3; color: #5A4A36; }
.dia__origem b { font-size: 0.8125rem; color: #2B2012; }
/* WhatsApp: balão verde-claro com a ponta */
.dia--whats .dia__face--dor { background: #DCF8C6; border-radius: 4px 14px 14px 14px; }
.dia--whats .dia__origem b { color: #064D25; }
/* e-mail: folha branca com a barra do cliente de e-mail */
.dia--email .dia__face--dor { background: #FFFFFF; border-top: 5px solid #C0392B; border-radius: 6px; }
.dia--email .dia__origem { border-bottom-style: dashed; }
/* post-it amarelo, um pouco mais inclinado */
.dia--postit .dia__face--dor { background: #FBE7A1; border-radius: 2px; align-content: center; }
.dia--postit .dia__face--dor p { font-size: 1rem; font-weight: 560; }
.dia--postit .dia__face--dor::before { background: rgba(255, 255, 255, 0.5); }
/* relatório impresso, com o número circulado em vermelho */
.dia--relatorio .dia__face--dor { background: #FBFCFD; border-radius: 3px;
  background-image: repeating-linear-gradient(180deg, transparent 0 21px, rgba(43, 32, 18, 0.07) 21px 22px); }
.dia--relatorio .dia__origem b::after { content: ' ?'; color: #B4401F; font-weight: 800; }
/* tela do sistema parado */
.dia--sistema .dia__face--dor { background: #E8EDF2; border-radius: 10px; box-shadow: inset 0 22px 0 #C9D4DE, 0 16px 26px -16px rgba(0, 0, 0, 0.7); }
.dia--sistema .dia__origem { padding-top: 10px; }
/* bilhete amassado: rosa, com dobras */
.dia--amassado .dia__face--dor { background: #F6D5D0; border-radius: 3px;
  background-image: linear-gradient(118deg, transparent 46%, rgba(0, 0, 0, 0.06) 48%, transparent 52%), linear-gradient(28deg, transparent 58%, rgba(0, 0, 0, 0.05) 60%, transparent 64%); align-content: center; }
.dia--amassado .dia__face--dor p { font-size: 1rem; font-weight: 560; }
/* inclinações do estado inicial: mais bagunçadas; ao virar, tudo assenta reto */
.dia--postit { --tz: 3.5deg; } .dia--amassado { --tz: -3deg; } .dia--email { --tz: -1deg; }
/* os bilhetes balançam de leve enquanto esperam, como papel preso só pela fita */
.anima .semana--vista .dia:not(.dia--virado) .dia__face--dor { animation: dia-balanca 4.2s ease-in-out infinite; transform-origin: 50% 0; }
.anima .dia:nth-child(2n) .dia__face--dor { animation-delay: -1.4s; }
.anima .dia:nth-child(3n) .dia__face--dor { animation-delay: -2.6s; }
@keyframes dia-balanca { 0%, 100% { transform: rotate(-0.6deg); } 50% { transform: rotate(0.7deg); } }

/* contador no topo do quadro: pendências em vermelho que zeram até "semana em dia" */
.quadro__conta { display: inline-flex; align-items: baseline; gap: 8px; font-size: 0.8125rem; color: #F2B8A6; }
.quadro__conta b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: #FF9A7A; font-variant-numeric: tabular-nums; transition: color 300ms linear; }
.quadro__conta-b { display: none; color: var(--ouro-claro); }
.semana--feita .quadro__conta-a { display: none; }
.semana--feita .quadro__conta-b { display: inline; }
.semana--feita .quadro__conta b { display: none; }

/* a linha da Conex: atravessa o quadro na horizontal (desktop) ou na vertical (celular) */
.quadro__varre { position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: 2px; pointer-events: none; opacity: 0; transition: opacity 400ms linear; will-change: translate;
  background: linear-gradient(180deg, transparent, var(--ouro-claro) 12%, var(--ouro) 88%, transparent); box-shadow: 0 0 22px 4px rgba(216, 172, 82, 0.35); }
.quadro__varre i { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ouro-claro); }
.quadro__varre-rot { position: absolute; top: 10px; left: 8px; padding: 3px 8px; border-radius: 6px; background: var(--ouro); color: var(--marinho); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

/* sem animação: o quadro já nasce com as duas faces empilhadas, para a resposta ser lida */
.semana:not(.semana--viva) .dia__carta { display: grid; gap: 8px; min-height: 0; }
.semana:not(.semana--viva) .dia__face { grid-area: auto; rotate: none; backface-visibility: visible; }

@media (min-width: 1024px) {
  .semana { height: 260vh; }
  .semana__fixo { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--altura-topo) + 20px) 32px; }
  .semana__grade { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
}
@media (max-width: 1023px) {
  .semana { height: 300vh; }
  .semana__fixo { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--altura-topo) + 4px) 84px; }   /* 84px: a barra fixa do celular */
  .semana__grade { gap: 18px; }
  .semana__cabeca > p:not(.rotulo), .semana__cabeca .bt { display: none; }
  .semana__cabeca h2 { font-size: clamp(1.45rem, 1rem + 2.6vw, 1.9rem); }
  .semana__cabeca .rotulo { display: none; }
  .quadro { padding: 12px; }
  .quadro__topo { padding: 2px 4px 10px; }
  .quadro__estado { font-size: 0.9375rem; }
  .dia { gap: 5px; }
  .quadro__dias { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dia__carta { min-height: 104px; }
  .dia__face { padding: 10px 10px 12px; gap: 6px; }
  .dia__face p { font-size: 0.78rem; line-height: 1.35; }
  /* no celular a resposta fica no essencial: título e carimbo (o detalhe continua para leitor de tela) */
  .dia__det { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dia__feito b { font-size: 0.9375rem; }
  .dia__quando { font-size: 0.66rem; }
  .dia__nome { padding-bottom: 6px; }
  .dia__nome b { font-size: 1.0625rem; }
  .quadro__varre { width: auto; height: 2px; top: 0; bottom: auto; left: 0; right: 0; background: linear-gradient(90deg, transparent, var(--ouro-claro) 12%, var(--ouro) 88%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .semana { height: auto; } .semana__fixo { position: static; min-height: 0; } }

/* ---------- como funciona (mosaico Guarrent) ---------- */
.mosaico { display: none; }
.mosaico > li { border-radius: var(--raio); position: relative; overflow: hidden; }
.mosaico > .mosaico__abre { overflow: visible; }
.mosaico__abre { background: transparent; padding: 0 0 clamp(12px, 2vw, 24px); }
.mosaico__abre-texto { display: grid; gap: 18px; }
@media (min-width: 1024px) { .mosaico__abre-texto { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; } .mosaico__abre-texto > p:last-child { margin-top: 0 !important; } }
.mosaico__abre-texto > p:last-child { margin-top: 18px; color: var(--tinta-2); max-width: 46ch; }
.mosaico__img { display: block; margin: 12px -8% -14% 0; }
/* ---------- as quatro fases: a linha desce e vai ligando os cartões (referência Orchid) ---------- */
.como__cabeca { display: grid; gap: 20px; align-items: end; }
.como__apoio { color: var(--tinta-2); max-width: 46ch; }
@media (min-width: 1024px) { .como__cabeca { grid-template-columns: 1.25fr 1fr; gap: 64px; } }

.passos { position: relative; margin-top: clamp(30px, 3.6vw, 52px); padding-left: 34px; }
.passos__linha { position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: rgba(233, 242, 248, 0.12); border-radius: 2px; }
.passos__linha i { display: block; width: 100%; height: 0; border-radius: inherit; background: linear-gradient(180deg, var(--azul-marca) 0%, var(--ouro) 100%); }
.passos__lista { display: grid; gap: 16px; }
.passo { position: relative; }
.passo__no { position: absolute; left: -34px; top: 26px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gelo); box-shadow: inset 0 0 0 2px rgba(233, 242, 248, 0.18); }
.passo__no i { width: 8px; height: 8px; border-radius: 50%; background: rgba(233, 242, 248, 0.25); transition: background-color 420ms var(--curva), scale 420ms var(--curva); }
.passo--aceso .passo__no { box-shadow: inset 0 0 0 2px var(--ouro); }
.passo--aceso .passo__no i { background: var(--ouro); scale: 1.15; }
.passo__cartao {
  position: relative; overflow: hidden; display: grid; gap: 10px; padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--raio); background: linear-gradient(155deg, rgba(23, 66, 106, 0.55), rgba(9, 28, 46, 0.75));
  box-shadow: inset 0 0 0 1px var(--fio);
  transition: box-shadow 420ms var(--curva), background-color 420ms var(--curva);
}
.anima .passo { opacity: 0; translate: 0 42px; }
.anima .passo--aceso { opacity: 1; translate: 0 0; transition: opacity 560ms var(--curva), translate 720ms cubic-bezier(.16, 1, .3, 1); }
.passo__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(233, 242, 248, 0.07); color: #BFD8E9; transition: background-color 420ms var(--curva), color 420ms var(--curva); }
.passo__icone svg { width: 22px; height: 22px; }
.passo--aceso .passo__icone { background: var(--ouro); color: var(--marinho); }
.passo__nome { font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem); letter-spacing: -0.03em; color: #fff; }
.passo__conex { color: #D6E3EE; line-height: 1.5; }
.passo__voce { display: grid; gap: 4px; font-size: 0.9375rem; line-height: 1.5; color: #C6D7E5; }
.passo__voce span { font-size: 0.75rem; font-weight: 620; letter-spacing: 0.04em; color: #BFD8E9; }
/* a cena da fase: ocupa o lado direito inteiro do cartão, sangrando até as bordas */
.passo__cartao { padding: 0; overflow: hidden; }
.passo__texto { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 34px); }
.passo__cena { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 220px;
  background: radial-gradient(circle at 1px 1px, rgba(233, 242, 248, 0.08) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(170deg, #0C2A47, #081D33);
  box-shadow: inset 1px 0 0 rgba(233, 242, 248, 0.08); }
.passo__palco { position: relative; display: grid; align-content: center; padding: 22px clamp(18px, 2vw, 28px) 8px; }
.passo__legenda { padding: 12px clamp(18px, 2vw, 28px) 16px; border-top: 1px solid rgba(233, 242, 248, 0.08); font-size: 0.875rem; color: #D6E3EE; }
.passo__troca { display: block; height: 1.35rem; overflow: hidden; }
.passo__troca > span { display: block; height: 1.35rem; line-height: 1.35rem; transition: translate 520ms cubic-bezier(.16, 1, .3, 1); }
.passo__troca > span + span { color: var(--ouro-claro); }
@media (hover: hover) { .passo__cartao:hover .passo__troca[data-hover-interno] > span { translate: 0 -1.35rem; } }

/* Levantamento: a lupa desce pelo extrato e marca onde o dinheiro trava */
.cena-l { position: relative; display: grid; gap: 6px; }
.cena-l__ln { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 9px; background: rgba(233, 242, 248, 0.05); font-size: 0.8125rem; color: #D6E3EE; }
.cena-l__ln span { flex: 1; }
.cena-l__ln b { font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.cena-l__ln em { font-style: normal; font-size: 0.72rem; font-weight: 640; padding: 2px 8px; border-radius: 5px; background: #F4EEE2; color: #7A2A12; }
.cena-l__lupa { position: absolute; left: -6px; right: -6px; top: 0; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--ouro); background: rgba(216, 172, 82, 0.08); opacity: 0; }
.anima .cena-l__ln--achado em { opacity: 0; scale: 0.6; transition: opacity 300ms linear, scale 420ms cubic-bezier(.3, 1.6, .5, 1); }
.anima .passo--aceso .cena-l__ln--achado em { opacity: 1; scale: 1; }
.anima .passo--aceso .cena-l__ln:nth-child(2) em { transition-delay: 420ms; }
.anima .passo--aceso .cena-l__ln:nth-child(3) em { transition-delay: 700ms; }
.anima .passo--aceso .cena-l__ln:nth-child(5) em { transition-delay: 1240ms; }
.anima .passo--aceso .cena-l__lupa { animation: cena-lupa 1.5s cubic-bezier(.45, 0, .3, 1) both; }
@keyframes cena-lupa { 0% { opacity: 0; translate: 0 0; } 10% { opacity: 1; } 90% { opacity: 1; translate: 0 176px; } 100% { opacity: 0; translate: 0 176px; } }

/* Implantação: os fios se ligam e chegam na sua aprovação */
.cena-i { position: relative; height: 170px; }
.cena-i__fios { position: absolute; inset: 0; width: 100%; height: 100%; }
.cena-i__fios path { fill: none; stroke: rgba(155, 201, 227, 0.7); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cena-i__fios .cena-i__fio-ouro { stroke: var(--ouro); stroke-width: 2.5; }
.anima .cena-i__fios path { stroke-dashoffset: 1; transition: stroke-dashoffset 800ms cubic-bezier(.5, 0, .3, 1); }
.anima .passo--aceso .cena-i__fios path { stroke-dashoffset: 0; }
.anima .passo--aceso .cena-i__fios path:nth-child(2) { transition-delay: 150ms; }
.anima .passo--aceso .cena-i__fios .cena-i__fio-ouro { transition-delay: 800ms; }
.cena-i__no { position: absolute; translate: -50% -50%; padding: 8px 12px; border-radius: 10px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; color: #EAF2F8; background: #0F3050; box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.2); }
.cena-i__no--a { left: 19%; top: 25%; } .cena-i__no--b { left: 19%; top: 75%; }
.cena-i__no--c { left: 50%; top: 50%; } .cena-i__no--d { left: 81%; top: 50%; background: linear-gradient(150deg, var(--ouro-claro), var(--ouro)); color: var(--marinho); box-shadow: none; }
.anima .cena-i__no--d { opacity: 0; scale: 0.8; transition: opacity 300ms linear 1300ms, scale 480ms cubic-bezier(.3, 1.6, .5, 1) 1300ms; }
.anima .passo--aceso .cena-i__no--d { opacity: 1; scale: 1; }

/* Execução: a semana se marca sozinha, item a item, com a hora */
.cena-e { display: grid; gap: 7px; }
.cena-e__ln { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; background: rgba(233, 242, 248, 0.05); font-size: 0.875rem; color: #EAF2F8; }
.cena-e__ln span { flex: 1; }
.cena-e__ln em { font-style: normal; font-size: 0.75rem; color: #BFD8E9; font-variant-numeric: tabular-nums; }
.cena-e__box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--ouro); color: var(--marinho); }
.cena-e__box .visto { width: 13px; height: 13px; }
.anima .cena-e__box { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(233, 242, 248, 0.3); transition: background-color 260ms linear, box-shadow 260ms linear; }
.anima .cena-e__box .visto { opacity: 0; scale: 0.4; transition: opacity 200ms linear, scale 380ms cubic-bezier(.3, 1.6, .5, 1); }
.anima .passo--aceso .cena-e__box { background: var(--ouro); box-shadow: none; }
.anima .passo--aceso .cena-e__box .visto { opacity: 1; scale: 1; }
.anima .passo--aceso .cena-e__ln:nth-child(2) .cena-e__box, .anima .passo--aceso .cena-e__ln:nth-child(2) .visto { transition-delay: 320ms; }
.anima .passo--aceso .cena-e__ln:nth-child(3) .cena-e__box, .anima .passo--aceso .cena-e__ln:nth-child(3) .visto { transition-delay: 640ms; }
.anima .passo--aceso .cena-e__ln:nth-child(4) .cena-e__box, .anima .passo--aceso .cena-e__ln:nth-child(4) .visto { transition-delay: 960ms; }

/* Acompanhamento: o gráfico do mês se desenha e fecha no ouro */
.cena-a { position: relative; display: grid; gap: 2px; min-height: 170px; align-content: start; }
.cena-a__rot { font-size: 0.8125rem; color: #C6D7E5; }
.cena-a__num { font-size: 1.75rem; font-weight: 680; letter-spacing: -0.04em; color: #fff; }
.cena-a__graf { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; overflow: visible; }
.cena-a__area { fill: rgba(216, 172, 82, 0.14); }
.cena-a__linha { fill: none; stroke: var(--ouro-claro); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* o ponto final fica fora do SVG esticado para continuar redondo: y=22 de 110 na altura de 62% */
.cena-a__pt { position: absolute; right: -6px; bottom: calc(62% * 88 / 110 - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 5px rgba(216, 172, 82, 0.2); }
.anima .cena-a__linha { stroke-dashoffset: 1; transition: stroke-dashoffset 1300ms cubic-bezier(.5, 0, .25, 1); }
.anima .passo--aceso .cena-a__linha { stroke-dashoffset: 0; }
.anima .cena-a__area, .anima .cena-a__pt { opacity: 0; transition: opacity 500ms linear 1100ms; }
.anima .passo--aceso .cena-a__area, .anima .passo--aceso .cena-a__pt { opacity: 1; }

@media (min-width: 900px) {
  .passos { padding-left: 54px; }
  .passos__linha { left: 19px; }
  .passo__no { left: -54px; top: 30px; width: 40px; height: 40px; }
  .passo__cartao { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
  .passo__texto { grid-template-columns: 44px minmax(0, 1fr); column-gap: 22px; padding: clamp(28px, 2.8vw, 40px); }
  .passo__texto .passo__icone { grid-row: 1 / span 4; }
}

.mosaico__escuro {
  margin-top: 16px; border-radius: var(--raio); overflow: hidden; position: relative; isolation: isolate;
  display: grid; align-items: center; gap: 24px; padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(60% 90% at 80% 100%, rgba(88, 145, 175, 0.4), transparent 70%),
    linear-gradient(135deg, #0F2C4A, #0A1F35 70%);
}
.mosaico__escuro-titulo { margin-top: 0; font-size: var(--t-h2); letter-spacing: -0.02em; line-height: 1.08; color: #fff; max-width: 18ch; }
.mosaico__escuro-texto > p:not(.rotulo) { margin-top: 16px; max-width: 44ch; }
.mosaico__escuro-texto .bt { margin-top: 26px; }
.mosaico__mao { display: flex; justify-content: center; margin-bottom: calc(-1 * clamp(28px, 4vw, 56px) - 120px); }
.mosaico__mao .celular { rotate: -8deg; }
@media (min-width: 800px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico__abre, .mosaico__escuro {
  margin-top: 16px; border-radius: var(--raio); overflow: hidden; position: relative; isolation: isolate; grid-column: 1 / -1; }
  .mosaico__escuro {
  margin-top: 16px; border-radius: var(--raio); overflow: hidden; position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr) 280px; }
  .mosaico__mao { margin: 0 0 -240px; }
}
@media (min-width: 1100px) {
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaico__escuro {
  margin-top: 16px; border-radius: var(--raio); overflow: hidden; position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: 56px; }
  .mosaico__escuro-titulo { max-width: 20ch; }
  .mosaico__escuro {
  margin-top: 16px; border-radius: var(--raio); overflow: hidden; position: relative; isolation: isolate; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; }
  .mosaico__mao { margin: -10px 0 -260px; }
  .mosaico__mao .celular { width: 290px; }
}

/* ---------- segurança: a única dobra clara da página (muda de identidade de propósito:
   é o momento do contrato, papel branco, tinta marinho). Sem bolinha, sem brilho, sem pulsar. ---------- */
.seguranca { background: #EEF3F7; color: #0B2038; }
.seguranca h2 { color: #0B2038; }
.seguranca .rotulo { color: #1E4266; }
.seguranca .cabeca-secao > p:not(.rotulo) { color: #33485C; }
.seguranca__grade { display: grid; gap: 40px; align-items: center; }
.seguranca__banco { margin-top: 28px; padding-left: 16px; border-left: 3px solid #0B2038; font-weight: 560; color: #0B2038; max-width: 38ch; }
.seguranca :focus-visible { outline-color: #0B2038; }
@media (min-width: 1024px) { .seguranca__grade { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; } }

/* ---------- quem é a Conex: a foto fica presa ao lado e a frase sobre ela acompanha o pilar
   ativo (por rolagem ou clique). Imersivo sem cartão, sem trilho, sem bolinha. ---------- */
.pilares { background: linear-gradient(180deg, var(--papel), #07182A 55%, var(--papel)); }
.pilares__cabeca { display: grid; gap: 16px; max-width: 820px; }
.pilares__cabeca h2 { color: #fff; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); }
.pilares__corpo { margin-top: clamp(30px, 4vw, 54px); display: grid; gap: 28px; }
.pilares__foto { position: relative; margin: 0; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 5; background: #0B2239; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(233, 242, 248, 0.1); }
.pilares__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(0.92);
  object-position: var(--pos, 66% 60%); scale: var(--esc, 1.05); opacity: 0;
  transition: opacity 900ms linear, object-position 1600ms cubic-bezier(.25, .8, .2, 1), scale 1600ms cubic-bezier(.25, .8, .2, 1); }
.pilares__img--ativa { opacity: 1; }
/* quatro traços no topo da foto: quanto do caminho já foi lido */
.pilares__marcas { position: absolute; z-index: 3; left: clamp(22px, 3vw, 36px); right: clamp(22px, 3vw, 36px); top: 22px; display: flex; gap: 6px; }
.pilares__marcas i { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(233, 242, 248, 0.25); overflow: hidden; }
.pilares__marcas i::after { content: ''; position: absolute; inset: 0; background: var(--ouro-claro); scale: 0 1; transform-origin: 0 50%; transition: scale 700ms cubic-bezier(.3, .8, .25, 1); }
.pilares__marcas i.on::after { scale: 1 1; }
.pilares__foto::before { content: ''; position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply; background: linear-gradient(160deg, #2F6E9C, #0B2239 70%); }
.pilares__foto::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgba(6, 20, 33, 0.92) 100%); }
.pilares__sobre { position: absolute; z-index: 2; left: clamp(22px, 3vw, 36px); right: clamp(22px, 3vw, 36px); bottom: clamp(48px, 5vw, 64px); display: grid; }
.pilares__frase { grid-area: 1 / 1; display: grid; gap: 6px; align-content: end; color: #D6E3EE; font-size: 1rem;
  opacity: 0; clip-path: inset(0 0 0 0); transition: opacity 380ms linear, translate 700ms cubic-bezier(.2, .9, .25, 1), clip-path 700ms cubic-bezier(.2, .9, .25, 1); }
/* a frase sai pelo lado de onde a rolagem vem e a próxima entra pelo outro: sente-se a direção */
.pilares__frase--antes { translate: 0 -28px; clip-path: inset(0 0 100% 0); }
.pilares__frase--depois { translate: 0 28px; clip-path: inset(100% 0 0 0); }
.pilares__frase b { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); font-weight: 680; letter-spacing: -0.045em; line-height: 1; color: #fff; }
.pilares__frase--ativa { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); transition-delay: 120ms; }
.pilares__foto figcaption { position: absolute; z-index: 2; left: clamp(22px, 3vw, 36px); bottom: 20px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #BFD8E9; }

.pilares__lista { display: grid; border-top: 1px solid var(--fio); }
.pilar { border-bottom: 1px solid var(--fio); }
.pilar__bt { width: 100%; display: grid; gap: 8px; padding: clamp(22px, 2.6vw, 34px) 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
.pilar__nome { font-size: clamp(1.4rem, 1rem + 1.3vw, 2.1rem); font-weight: 640; letter-spacing: -0.035em; line-height: 1.1; color: #9FB3C6; transition: color 420ms linear; }
.pilar__texto { max-width: 46ch; font-size: 1rem; line-height: 1.5; color: #9FB3C6; transition: color 420ms linear; }
.pilar--ativo .pilar__nome { color: #fff; }
.pilar--ativo .pilar__texto { color: #D6E3EE; }
/* o pilar ativo ganha um traço dourado que cresce da esquerda: marca de leitura, não enfeite */
.pilar__bt { position: relative; }
.pilar__bt::before { content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--ouro); scale: 0 1; transform-origin: 0 50%; transition: scale 720ms cubic-bezier(.2, .9, .25, 1); }
.pilar--ativo .pilar__bt::before { scale: 1 1; }
.pilar__bt:focus-visible { outline-offset: 6px; }

@media (min-width: 1024px) {
  .pilares__corpo { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .pilares__foto { position: sticky; top: calc(var(--altura-topo) + 28px); aspect-ratio: auto; height: min(78svh, 680px); }
  .pilares__lista { padding-bottom: max(0px, calc(var(--altura-topo) + 28px + min(78svh, 680px) - 50svh - 110px)); }
  .pilar__bt { padding-block: clamp(40px, 7svh, 72px); }
}
@media (max-width: 1023px) { .pilares__foto { aspect-ratio: 4 / 3; } }
/* ---------- avaliações ---------- */
.prova__nota { display: flex; align-items: center; gap: 18px; }
.prova__numero { font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); font-weight: 640; letter-spacing: -0.05em; line-height: 0.9; }
.prova__nota p:not(.prova__numero) { margin-top: 6px; font-size: 0.9375rem; color: var(--tinta-2); max-width: 30ch; }
.estrelas { display: inline-flex; gap: 2px; color: var(--ouro); }
.escuro .estrelas, .citacao--destaque .estrelas { color: var(--ouro-claro); }
.estrelas svg { width: 16px; height: 16px; fill: currentColor; }
/* Depoimentos · formato "Testimonials Columns" (21st.dev), traduzido para o tema escuro */
.prova__cabeca { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 540px; margin-inline: auto; }
.prova__selo { padding: 4px 16px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--fio-forte); font-size: 0.875rem; color: var(--tinta); }
.prova__cabeca h2 { margin-top: 20px; max-width: 16ch; font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3rem); letter-spacing: -0.02em; }
.prova__apoio { margin-top: 20px; color: var(--tinta-2); }
.dep {
  display: flex; justify-content: center; gap: 24px; margin-top: 40px;
  max-height: 740px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
.dep-col--md, .dep-col--lg { display: none; }
@media (min-width: 768px) { .dep-col--md { display: block; } }
@media (min-width: 1024px) { .dep-col--lg { display: block; } }
.dep-col__trilho, .dep-col__copia { display: flex; flex-direction: column; gap: 24px; }
.dep-col__trilho { padding-bottom: 24px; }
.dep-col__copia { padding-top: 0; }
.anima .dep-col__trilho { animation: dep-laco 15s linear infinite; will-change: translate; }
@keyframes dep-laco { from { translate: 0 0; } to { translate: 0 -50%; } }
.dep-card {
  margin: 0; width: 100%; max-width: 320px; padding: 40px; border-radius: 24px;
  background: linear-gradient(165deg, #0F2B47, #0B2239);
  box-shadow: inset 0 0 0 1px var(--fio-forte), 0 10px 15px -3px rgba(155, 201, 227, 0.1), 0 4px 6px -4px rgba(155, 201, 227, 0.1);
}
.dep-card blockquote { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--tinta); }
.dep-card__quem { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.dep-card__avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1C4166; color: #fff; font-weight: 640; }
.dep-card__nome { display: flex; flex-direction: column; line-height: 1.25; }
.dep-card__nome strong { font-weight: 560; letter-spacing: -0.01em; color: #fff; }
.dep-card__nome span { color: #C6D7E5; font-size: 0.9375rem; }
@media (prefers-reduced-motion: reduce) {
  .dep { max-height: none; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
  .dep-col__copia { display: none; }
}
.prova__grade { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 14px; }
.citacao { margin: 0; }
.citacao__link { height: 100%; grid-template-rows: auto 1fr auto; }
.citacao__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.citacao__aspas {
  position: absolute; z-index: 0; right: 18px; top: 46px;
  font: 700 5rem/1 var(--f-texto); color: var(--azul); opacity: 0.12; pointer-events: none;
}
.citacao--destaque .citacao__aspas { color: var(--ouro-claro); opacity: 0.22; }
.citacao__feixe {
  position: absolute; z-index: -1; top: -50%; bottom: -50%; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(88, 145, 175, 0.22), transparent);
  transform: skewX(-16deg); filter: blur(8px); translate: -200% 0; opacity: 0;
  transition: translate 900ms cubic-bezier(.3,.7,.2,1), opacity 200ms linear;
}
.citacao--destaque .citacao__feixe { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); }
@media (hover: hover) { .citacao__link:hover [data-hover-interno].citacao__feixe { translate: 230% 0; opacity: 1; } }
@media (min-width: 760px) { .prova__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .prova__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .citacao--destaque { grid-row: span 2; } }
.citacao__link {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 16px; padding: 26px 24px 22px; border-radius: var(--raio); text-decoration: none;
  background: var(--papel); box-shadow: inset 0 0 0 1px var(--fio), var(--sombra-1);
  transition: box-shadow 320ms var(--curva);
}
.citacao blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--tinta); }
.citacao--destaque .citacao__link { background: linear-gradient(160deg, #0F2C4A, #0A1F35); box-shadow: none; }
.citacao--destaque blockquote { font-size: 1.25rem; line-height: 1.45; color: #fff; letter-spacing: -0.01em; }
.citacao--destaque .citacao__quem strong { color: #fff; }
.citacao--destaque .citacao__quem span { color: var(--creme-2); }
.citacao--destaque .citacao__inicial { background: rgba(255, 255, 255, 0.12); color: #fff; }
.citacao figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.citacao__inicial { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(140, 190, 220, 0.16); color: var(--azul-claro); font-weight: 650; }
.citacao__quem { display: grid; line-height: 1.3; }
.citacao__quem strong { font-weight: 620; font-size: 0.9375rem; }
.citacao__quem span { font-size: 0.8125rem; color: var(--tinta-2); }
.citacao__ver { font-size: 0.8125rem; font-weight: 560; color: var(--azul); white-space: nowrap; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; padding-bottom: 2px; transition: background-size 380ms var(--curva); }
.citacao--destaque .citacao__ver { color: var(--azul-claro); }
@media (hover: hover) { .citacao__link:hover .citacao__ver { background-size: 100% 1px; } .citacao__link:hover { background: var(--nevoa); } .citacao--destaque .citacao__link:hover { background: linear-gradient(160deg, #143A5D, #0D2740); } }

.prova--uma { padding-block: clamp(56px, 6vw, 88px); }
.prova__uma { max-width: 760px; }
.prova__nota-curta { margin-top: 4px; color: var(--tinta-2); font-size: 0.9375rem; }

/* ---------- chamada da avaliação ---------- */
.chamada { padding-top: var(--secao); }
.chamada__cartao {
  display: grid; gap: 32px; padding: clamp(28px, 5vw, 64px); border-radius: var(--raio-g);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(88, 145, 175, 0.3), transparent 70%),
    linear-gradient(160deg, #123351, #0B2136);
  box-shadow: inset 0 0 0 1px var(--fio);
}
.chamada__texto h2 { margin-top: 18px; }
.chamada__texto > p:not(.rotulo) { margin-top: 18px; color: var(--tinta-2); max-width: 46ch; }
.chamada__texto .chamada__whats { margin-top: 24px; color: var(--tinta); }
.chamada__caixa { padding: 26px; border-radius: var(--raio); background: var(--nevoa); box-shadow: var(--sombra-2); }
.chamada__conduz { margin-top: 10px; font-size: 0.9375rem; color: var(--tinta-2); }
.chamada__etiqueta { font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--azul-claro); }
.chamada__pergunta { margin-top: 12px; font-size: 1.3rem; font-weight: 620; letter-spacing: -0.02em; line-height: 1.25; }
.chamada__opcoes { margin-top: 18px; display: grid; gap: 8px; }
.chamada__opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px;
  border-radius: 12px; text-decoration: none; font-weight: 540; box-shadow: inset 0 0 0 1px var(--fio-forte);
}
/* hover: a seta atravessa dentro do recorte. Sem borda acesa, sem trocar a cor do cartão. */
.chamada__opcao-ir { position: relative; overflow: hidden; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--azul); box-shadow: inset 0 0 0 1px var(--fio-forte); }
.chamada__opcao-trilho { position: absolute; inset: 0; display: grid; place-items: center; transition: translate 520ms cubic-bezier(.16, 1, .3, 1); }
.chamada__opcao-ir .seta { position: absolute; width: 16px; height: 16px; }
.chamada__opcao-ir .seta + .seta { translate: -34px 0; }
@media (hover: hover) { .chamada__opcao:hover .chamada__opcao-trilho[data-hover-interno] { translate: 34px 0; } }
@media (min-width: 1024px) { .chamada__cartao { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }
@media (max-width: 599px) { .chamada__cartao { padding: 32px 18px; } .chamada__caixa { padding: 20px 14px; } }

/* ---------- FAQ: índice de perguntas + painel de resposta (não é acordeão) ---------- */
.faq__cabeca { display: grid; gap: 18px 64px; align-items: end; }
.faq__cabeca h2 { max-width: 18ch; }
.faq__lado { display: grid; gap: 20px; justify-items: start; }
.faq__lado p { color: var(--tinta-2); max-width: 40ch; }
.faq__palco { margin-top: clamp(30px, 4vw, 52px); display: grid; gap: 20px; }
.faq__perguntas { display: grid; align-content: start; border-top: 1px solid var(--fio-forte); }
.faq__q { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%;
  padding: 20px 4px 20px 22px; border: 0; border-bottom: 1px solid var(--fio-forte); background: none; text-align: left; cursor: pointer;
  font-size: 1.0625rem; font-weight: 580; letter-spacing: -0.01em; line-height: 1.35; color: #C6D7E5; transition: color 280ms linear; }
/* a pergunta escolhida ganha o traço dourado à esquerda, crescendo de cima para baixo */
.faq__q::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--ouro); scale: 1 0; transform-origin: 50% 0; transition: scale 420ms cubic-bezier(.3, .8, .25, 1); }
.faq__q--ativa { color: #fff; }
.faq__q--ativa::before { scale: 1 1; }
.faq__q-ir { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; color: #BFD8E9; box-shadow: inset 0 0 0 1px var(--fio-forte); }
.faq__q-ir .seta { width: 16px; height: 16px; transition: translate 420ms cubic-bezier(.3, .8, .25, 1); }
.faq__q--ativa .faq__q-ir { background: var(--ouro); color: var(--marinho); box-shadow: none; }
.faq__q:focus-visible { outline-offset: -2px; }

.faq__respostas { display: grid; }
.faq__r { grid-area: 1 / 1; align-self: start; display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 3vw, 40px); border-radius: 22px;
  background: linear-gradient(165deg, #123A5E, #0A2036 75%); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.12), 0 40px 70px -40px rgba(0, 0, 0, 0.85); }
.faq__r-q { font-size: 0.8125rem; letter-spacing: 0.04em; color: #BFD8E9; }
.faq__r-manchete { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem); font-weight: 640; letter-spacing: -0.03em; line-height: 1.2; color: #fff; max-width: 26ch; }
.faq__r-corpo { color: #D6E3EE; max-width: 58ch; }
.faq__r-link { margin-top: 6px; color: var(--ouro-claro); }
/* com JS: só a resposta ativa aparece; a troca é esmaecer + deslizar, sem mudar altura */
.faq--vivo .faq__r { opacity: 0; translate: 0 14px; visibility: hidden; transition: opacity 260ms linear, translate 420ms cubic-bezier(.3, .8, .25, 1), visibility 0s linear 420ms; }
.faq--vivo .faq__r--ativa { opacity: 1; translate: 0 0; visibility: visible; transition: opacity 360ms linear 90ms, translate 520ms cubic-bezier(.2, .9, .25, 1) 60ms, visibility 0s; }
.faq--vivo .faq__r--ativa > * { animation: faq-entra 520ms cubic-bezier(.2, .9, .25, 1) both; }
.faq--vivo .faq__r--ativa > :nth-child(2) { animation-delay: 60ms; }
.faq--vivo .faq__r--ativa > :nth-child(3) { animation-delay: 120ms; }
.faq--vivo .faq__r--ativa > :nth-child(4) { animation-delay: 180ms; }
@keyframes faq-entra { from { opacity: 0; translate: 0 8px; } }
/* sem JS: todas as respostas empilhadas, legíveis */
.faq__palco:not(.faq--vivo) .faq__respostas { gap: 14px; }
.faq__palco:not(.faq--vivo) .faq__r { grid-area: auto; }

@media (min-width: 1024px) {
  .faq__cabeca { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .faq__palco { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
  .faq__respostas { position: static; } /* JM, 01/10: a resposta fica parada ao lado das perguntas, sem acompanhar a rolagem */
}
@media (max-width: 1023px) {
  /* celular: as perguntas viram uma fileira para deslizar com o dedo, a resposta fica embaixo */
  .faq__perguntas { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); border: 0; padding-bottom: 6px; margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scrollbar-width: none; }
  .faq__perguntas::-webkit-scrollbar { display: none; }
  .faq__q { flex: 0 0 min(76vw, 300px); scroll-snap-align: start; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 128px;
    padding: 16px; border: 0; border-radius: 16px; background: rgba(233, 242, 248, 0.05); box-shadow: inset 0 0 0 1px var(--fio-forte); font-size: 1rem; }
  .faq__q::before { left: 16px; right: 16px; top: auto; bottom: 0; width: auto; height: 3px; scale: 0 1; transform-origin: 0 50%; }
  .faq__q--ativa::before { scale: 1 1; }
  .faq__q--ativa { background: rgba(233, 242, 248, 0.09); }
}
/* ---- textura nos blocos escuros. O feixe de luz que varria o bloco saiu (28/09, council visual: veto do JM a
   "feixe de luz"); fica só o grão ---- */
.quem__bloco::after, .cta-final__bloco::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.22;
  background-image: var(--grao); mix-blend-mode: overlay;
}
.quem__grade, .mosaico__escuro-texto, .mosaico__mao { position: relative; z-index: 1; }

/* seções claras: malha suave em vez de branco chapado */
.secao--gelo { background: radial-gradient(70% 60% at 82% 8%, rgba(88, 145, 175, 0.16), transparent 60%), var(--gelo); }
.servicos { background: radial-gradient(60% 50% at 6% 0%, rgba(88, 145, 175, 0.14), transparent 62%); }
.prova { background: radial-gradient(60% 60% at 96% 20%, rgba(216, 172, 82, 0.1), transparent 60%); }


/* ---------- frase que clareia ---------- */
.frase { background: linear-gradient(180deg, var(--papel), #07182A 50%, var(--papel)); }
.frase__caixa { max-width: 1000px; }
.frase__texto { font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); font-weight: 620; letter-spacing: -0.035em; line-height: 1.25; text-wrap: pretty; }
.frase__p { color: #93A6B8; transition: color 480ms linear; }  /* apagada, mas ainda legível (AAA) */
.frase__p--forte { color: #C2A672; }
.frase__p--acesa { color: var(--creme); }
.frase__p--forte.frase__p--acesa { color: var(--ouro-claro); }
.frase__quem { margin-top: 28px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--azul-claro); }


/* ---------- fotos reais da empresa, tratadas para o tema escuro ---------- */
.frente--foto { padding: 0; overflow: hidden; }
.frente--foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) contrast(1.05) brightness(0.72); }
.frente--foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(23, 66, 106, 0.55), rgba(6, 20, 33, 0.82)); mix-blend-mode: multiply; pointer-events: none; }
.frente__legenda { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; font-size: 0.9375rem; font-weight: 560; line-height: 1.35; color: #fff; }
.semana__foto { position: relative; overflow: hidden; border-radius: var(--raio); margin-top: 26px; }
.semana__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) brightness(0.68); }
.semana__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(23, 66, 106, 0.5), rgba(6, 20, 33, 0.85)); mix-blend-mode: multiply; }
@media (min-width: 1024px) {
  .semana__foto { aspect-ratio: 16 / 7; }
}
@media (max-width: 1023px) { .frente--foto { min-height: 200px; } .semana__foto { aspect-ratio: 16 / 9; } }

/* serviços: cabeça centrada (container diferente do resto da página) */
.servicos__cabeca { display: grid; justify-items: center; text-align: center; gap: 16px; max-width: 760px; margin-inline: auto; }
.servicos__cabeca h2 { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.1rem); }
.servicos__lead { color: var(--tinta-2); max-width: 46ch; }

/* FAQ da home (JM, 30/09): o WhatsApp mora logo abaixo do cartão da resposta aberta */
.faq__cabeca--so { grid-template-columns: minmax(0, 1fr) !important; }
.faq__col { display: grid; align-content: start; gap: 18px; }
@media (min-width: 1024px) { .faq__col { position: static; align-self: start; } .faq__col .faq__respostas { position: static; } }
.faq__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-left: 4px; }
.faq__cta p { max-width: 30ch; font-size: 0.9375rem; color: var(--tinta-2); }

/* ---------- Chamada da avaliação · v17 (JM, 01/10): questionário no cartão, fiel ao vídeo "Furniture Website Design" ----------
   Seção no marfim; cartão claro (raio grande, sombra macia). .qz__fundo é o recorte do cartão: a forma colorida (o JS
   desenha o contorno em pixels do cartão, encostado nas bordas de cima e da esquerda) e o tema escrito numa fita que
   desliza. .qz__objs tem o mesmo tamanho mas não recorta: os objetos passam da divisa e saem do cartão. */
.qz__cab { display: grid; gap: 14px; max-width: 760px; }
.qz__cab p { color: #26323E; max-width: 60ch; }
.qz__cartao { --qr: clamp(28px, 4.4vw, 60px); position: relative; margin-top: clamp(40px, 6vw, 84px); margin-bottom: 12px; aspect-ratio: 1.55; min-height: 660px; max-height: 800px; width: 100%;
  border-radius: var(--qr); background: #FDFBF7; color: #0B2035; box-shadow: 0 40px 70px -46px rgba(11, 32, 53, 0.4), 0 2px 0 rgba(255, 255, 255, 0.8) inset; } /* sombra curta: não chega na onda */
.qz__fundo, .qz__objs { position: absolute; inset: 0; }
.qz__fundo { z-index: 2; overflow: hidden; border-radius: var(--qr); pointer-events: none; }
.qz__blob { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.qz__marca { position: absolute; left: 4.6%; top: 7%; width: 30px; color: rgba(255, 255, 255, 0.85); }
.qz__marca .qz__elos { display: block; width: 100%; height: auto; }
.qz__marca .qz__elos path, .qz__marca .qz__elos * { stroke: currentColor !important; fill: none; }
.qz__titulos { position: absolute; left: 8.4%; top: 19%; width: 38%; display: grid; }
/* JM, 02/10 (v22.2): a palavra se transforma no lugar, sem deslizar: as letras da que sai se desfazem em desfoque e as da
   que entra se formam no mesmo ponto, numa onda curta da esquerda para a direita (o JS pinta cada letra) */
.qz__linha { display: grid; }
.qz-l { display: inline-block; }
.qz__linha + .qz__linha { margin-top: calc(clamp(2.4rem, 0.6rem + 3.5vw, 4.1rem) * -0.2); } /* as duas linhas na entrelinha de antes */
.qz-tit { grid-area: 1 / 1; opacity: 0; } .qz-tit.on { opacity: 1; }
.qz-tit { margin: 0; font: 700 clamp(2.4rem, 0.6rem + 3.5vw, 4.1rem)/0.98 var(--f-texto); letter-spacing: -0.035em; color: #FFFFFF; white-space: nowrap; }
.qz__objs { z-index: 3; pointer-events: none; }
.qz-cena { position: absolute; inset: 0; }
.qz-ob { position: absolute; display: block; height: auto; max-width: none; translate: -50% -50%; filter: drop-shadow(0 30px 28px rgba(11, 32, 53, 0.28)); opacity: 0; will-change: transform, left, top; }
/* JM, 02/10: posição, giro e opacidade de cada objeto vêm do JS a cada quadro (a roda); só a cena da vez e a que sai aparecem */
.qz-cena:not(.on) { visibility: hidden; }
/* o painel da pergunta: à direita, com as linhas em faixas que vão até a borda do cartão */
.qz__painel { position: absolute; z-index: 1; left: 57%; right: 0; top: 15%; display: grid; clip-path: inset(-80px 0 -80px -60px); } /* recorta só à direita: a fita entra pela borda do cartão; à esquerda sobra folga para o desfoque */
.qz-passo { --pd: clamp(28px, 4.6vw, 66px); grid-area: 1 / 1; display: grid; align-content: start; padding-right: var(--pd); } /* folga até a borda do cartão */
.qz-passo[hidden] { display: none; }
.qz .qz__pergunta { margin: 0; font: 400 clamp(1.7rem, 1rem + 1.25vw, 2.45rem)/1.1 var(--f-titulo); letter-spacing: -0.02em; color: #0B2035; max-width: 17ch; min-height: 2.2em; }
.qz__cols { display: flex; justify-content: space-between; margin: clamp(22px, 3vw, 40px) 0 10px; font: 700 0.6875rem/1 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #5C6773; }
/* v19: as respostas são botões claros; um destaque marinho único desliza por trás da que está sob o ponteiro (ou com
   foco, ou marcada). O fundo branco de cada botão é um ::before atrás do destaque; o conteúdo fica na frente. */
.qz__opcoes { position: relative; isolation: isolate; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qz__realce { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: var(--h, 64px); border-radius: 16px; background: linear-gradient(110deg, #12304E, #0B2035 60%); pointer-events: none;
  box-shadow: 0 18px 30px -18px rgba(11, 32, 53, 0.65); opacity: 0; transform: translateY(var(--y, 0px));
  transition: transform 460ms cubic-bezier(.22, 1, .36, 1), height 460ms cubic-bezier(.22, 1, .36, 1), opacity 220ms linear; }
.qz__opcoes.realcada .qz__realce { opacity: 1; }
.qz__realce.pula { transition: opacity 220ms linear; }
.qz-op { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 16px; min-height: 64px; padding: 10px;
  border-radius: 16px; color: #0B2035; text-decoration: none; font-size: 1.0625rem; font-weight: 500; transition: color 240ms linear; }
.qz-op .qz-op__bg { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.09), 0 10px 20px -18px rgba(11, 32, 53, 0.5); transition: opacity 240ms linear; }
.qz-op > * { position: relative; z-index: 1; }
.qz-w { display: inline-block; } /* cada palavra anda sozinha na troca */
.qz-op__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #F1EADD; color: #1F5A85; transition: background-color 240ms linear, color 240ms linear; }
.qz-op__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qz-op__caixa { position: relative; overflow: hidden; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #F1EADD; color: #0B2035; transition: background-color 240ms linear, color 240ms linear; }
.qz-op__caixa .bt__trilho svg { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.qz-op__ok { position: absolute; width: 18px; height: 18px; opacity: 0; transition: opacity 200ms linear; }
/* a resposta com o destaque: o fundo claro sai, o texto fica branco, o ícone dourado e a seta atravessa a caixinha dourada */
.qz-op.ativa { color: #FFFFFF; }
.qz-op.ativa .qz-op__bg { opacity: 0; }
.qz-op.ativa .qz-op__ic { background: rgba(255, 255, 255, 0.1); color: #E8CE93; }
.qz-op.ativa .qz-op__caixa { background: #E8CE93; color: #0B2035; }
.qz-op.ativa .bt__trilho { translate: 44px 0; }
.qz-op:focus-visible { outline: 3px solid #1F5A85; outline-offset: 2px; }
.qz-op.marcada .bt__trilho { opacity: 0; } .qz-op.marcada .qz-op__ok { opacity: 1; }
/* JM, 02/10 (v22.1): a troca do painel é do JS (Web Animations): cada peça (palavra, rótulo, fundo, ícone, texto e seta
   de cada resposta, campo) anda sozinha, com atraso pela posição: de cima para baixo e da esquerda para a direita. */
/* último passo, no padrão das respostas: cada campo é uma linha branca com o ícone na caixinha marfim */
.qz-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qz-campo { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 64px; padding: 10px; border-radius: 16px; background: #FFFFFF; cursor: text;
  box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.09), 0 10px 20px -18px rgba(11, 32, 53, 0.5); transition: box-shadow 240ms linear; }
.qz-campo__txt { display: grid; gap: 3px; min-width: 0; }
.qz-campo__rot { font: 700 0.6875rem/1 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #5C6773; }
.qz-campo__rot i { font-style: normal; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: #8A949E; }
.qz-campo input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; font: 500 1.0625rem/1.3 var(--f-texto); color: #0B2035; outline: none; }
.qz-campo input::placeholder { color: #A3ACB5; font-weight: 400; }
.qz-campo:focus-within { box-shadow: inset 0 0 0 2px #0B2035, 0 18px 30px -20px rgba(11, 32, 53, 0.55); }
.qz-campo:focus-within .qz-op__ic { background: #0B2035; color: #E8CE93; }
.qz-campo.qz--erro { box-shadow: inset 0 0 0 2px #B4531F; }
.qz-lgpd { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 16px; font-size: 0.875rem; line-height: 1.45; color: #34414E; cursor: pointer; }
.qz-lgpd input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.qz-lgpd__caixa { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #FFFFFF; color: #0B2035; box-shadow: inset 0 0 0 1.5px rgba(11, 32, 53, 0.28); transition: background-color 200ms linear, box-shadow 200ms linear; }
.qz-lgpd__caixa .qz-op__ok { position: static; width: 15px; height: 15px; opacity: 0; }
.qz-lgpd input:checked + .qz-lgpd__caixa { background: #E8CE93; box-shadow: none; } .qz-lgpd input:checked + .qz-lgpd__caixa .qz-op__ok { opacity: 1; }
.qz-lgpd input:focus-visible + .qz-lgpd__caixa { outline: 3px solid #1F5A85; outline-offset: 2px; }
.qz-lgpd.qz--erro .qz-lgpd__caixa { box-shadow: inset 0 0 0 2px #B4531F; }
.qz-erro { min-height: 1.4em; margin: 8px 0 0; font-size: 0.875rem; font-weight: 600; color: #B4531F; }
.qz-enviar, .qz-res__whats { justify-self: start; margin-top: 6px; border: 0; background: #0B2035; color: #FFFFFF; }
@media (hover: hover) { .qz-enviar:hover, .qz-res__whats:hover { color: #0B2035; } }
.qz-res__whats .bt__caixa svg { width: 20px; height: 20px; }
/* a prévia do resultado: as três áreas em linhas, com o selo do nível à direita */
.qz-razao { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qz-razao li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.09), 0 10px 20px -18px rgba(11, 32, 53, 0.5); font-size: 1.0625rem; font-weight: 600; }
.qz-selo { padding: 8px 12px; border-radius: 10px; font: 700 0.6875rem/1 var(--f-texto); letter-spacing: 0.12em; text-transform: uppercase; background: #E4EEF5; color: #1F5A85; }
.qz-selo[data-nivel="meio"] { background: #F6EBD3; color: #8A6417; } .qz-selo[data-nivel="atencao"] { background: #0B2035; color: #E8CE93; }
.qz-res__nota { max-width: 46ch; margin: 18px 0 14px; font-size: 0.875rem; line-height: 1.5; color: #5C6773; }
.qz--pagina { padding-top: calc(var(--altura-topo) + clamp(28px, 5vw, 64px)); }
/* pé do cartão: o passo à esquerda, a barra flutuante no meio, o WhatsApp à direita */
.qz__passo { position: absolute; z-index: 4; left: 4.4%; bottom: 6.4%; display: flex; align-items: center; gap: 12px; margin: 0; font: 600 0.9375rem/1 var(--f-texto); color: #6B7682; }
.qz__passo-atual { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #EFE8DA; color: #0B2035; font-size: 1.0625rem; }
.qz__passo i { width: 22px; height: 1.5px; background: rgba(11, 32, 53, 0.22); }
.qz__barra { position: absolute; z-index: 5; left: 58.5%; bottom: 5.2%; translate: -50% 0; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 12px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.96); box-shadow: 0 30px 50px -24px rgba(11, 32, 53, 0.42), 0 0 0 1px rgba(11, 32, 53, 0.05); }
.qz__volta, .qz__vai { display: grid; place-items: center; border: 0; cursor: pointer; }
.qz__volta { width: 44px; height: 44px; border-radius: 12px; background: transparent; color: #0B2035; transition: background-color 250ms linear, opacity 250ms linear; }
.qz__volta:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) { .qz__volta:not(:disabled):hover { background: #EFE8DA; } }
.qz__vai { width: 60px; height: 60px; border-radius: 18px; background: #0B2035; color: #FFFFFF; box-shadow: 0 14px 24px -12px rgba(11, 32, 53, 0.7); transition: background-color 300ms linear, opacity 300ms linear; }
.qz__vai:disabled { opacity: 0.32; cursor: default; box-shadow: none; }
@media (hover: hover) { .qz__vai:not(:disabled):hover { background: #1F5A85; } }
.qz__volta svg, .qz__vai svg { width: 20px; height: 20px; }
.qz__volta:focus-visible, .qz__vai:focus-visible, .qz__whats:focus-visible { outline: 3px solid #1F5A85; outline-offset: 2px; }
.qz__trilha { display: flex; gap: 6px; }
.qz__trilha i { width: 18px; height: 4px; border-radius: 4px; background: rgba(11, 32, 53, 0.14); transition: background-color 300ms linear, width 420ms cubic-bezier(.22, 1, .36, 1); }
.qz__trilha i.feito { background: #1F5A85; } .qz__trilha i.atual { width: 34px; background: #B88A2B; }
.qz__div { width: 1px; height: 30px; background: rgba(11, 32, 53, 0.12); }
.qz__whats { position: absolute; z-index: 4; right: 4.4%; bottom: 6.4%; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #EFE8DA; color: #0B2035; transition: background-color 250ms linear, color 250ms linear; }
.qz__whats svg { width: 24px; height: 24px; }
@media (hover: hover) { .qz__whats:hover { background: #0B2035; color: #FFFFFF; } }
/* celular e tablet: a forma ocupa a faixa de cima do cartão (encostada em cima e nas laterais); a pergunta vem embaixo */
@media (max-width: 899px) {
  .qz__cartao { aspect-ratio: auto; min-height: 0; max-height: none; --qr: 30px; padding: 330px 0 104px; }
  .qz__fundo, .qz__objs { bottom: auto; height: 310px; }
  .qz__fundo { border-radius: var(--qr) var(--qr) 0 0; }
  .qz__titulos { left: 7%; top: 16%; width: 62%; }
  .qz-tit { font-size: clamp(2.3rem, 1.2rem + 4.6vw, 3.2rem); }
  .qz__linha + .qz__linha { margin-top: calc(clamp(2.3rem, 1.2rem + 4.6vw, 3.2rem) * -0.2); }
  .qz__marca { left: 7%; top: 7%; width: 24px; }
  .qz__painel { position: relative; left: auto; top: auto; padding: 0 0 0 20px; }
  .qz-passo { --pd: 20px; }
  .qz-op { grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 12px; min-height: 58px; padding: 8px; font-size: 1rem; }
  .qz-op__ic { width: 40px; height: 40px; border-radius: 11px; } .qz-op__caixa { width: 36px; height: 36px; }
  .qz-campos { grid-template-columns: minmax(0, 1fr); } .qz-campo { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; min-height: 60px; padding: 8px; }
  .qz-razao li { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 8px 10px 8px 8px; font-size: 1rem; }
  .qz__passo { display: none; }
  .qz__barra { left: 20px; right: 92px; translate: none; bottom: 22px; justify-content: space-between; gap: 8px; }
  .qz__whats { right: 20px; bottom: 22px; width: 60px; height: 60px; }
  .qz__trilha i { width: 10px; } .qz__trilha i.atual { width: 22px; }
}
@media (max-width: 899px) and (min-width: 600px) { .qz__cartao { padding-top: 400px; } .qz__fundo, .qz__objs { height: 380px; } }
/* JM, 01/10: a entrelinha 0,98 cortava a perna do "g" de "gestão" */
.qz-tit { padding-bottom: 0.2em; }

/* seguranca.css */
/* ---------- Segurança · v19 (JM, 01/10): uma coluna para cada um ----------
   Marfim, só tipografia e fio. Um ciclo de 7 s: os verbos da Conex acendem um por vez com o visto; depois o interruptor
   do seu lado passa para o dourado e aparece "Pago". É o único dourado da seção. Fora da tela o ciclo fica pausado. */
.sg { --T: 7s; --mola: cubic-bezier(.22, 1, .36, 1); --apagado: #B9B2A5; }
.sg__grade { display: grid; gap: clamp(32px, 6vw, 96px); align-items: center; }
.sg__rot { margin: 0 0 14px; font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase; color: #5E450D; }
.sg .sg__titulo { margin: 0; font: 400 clamp(2.1rem, 1.2rem + 2.6vw, 3.6rem)/1.04 var(--f-titulo); letter-spacing: -0.02em; color: #0B2035; text-wrap: balance; }
.sg__titulo span { color: #1F4C77; }
.sg__apoio { margin: 18px 0 0; max-width: 44ch; color: #26323E; font-size: 1.0625rem; }
.sg__cols { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(11, 32, 53, 0.14); }
.sg__col { display: grid; align-content: start; padding-top: 18px; }
.sg__col + .sg__col { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid rgba(11, 32, 53, 0.14); }
.sg__quem { margin: 0 0 14px; font: 600 0.8125rem/1 var(--f-texto); letter-spacing: 0.12em; text-transform: uppercase; color: #5C6773; }
.sg__item { display: flex; align-items: center; gap: 12px; margin: 0; padding: 13px 0; border-bottom: 1px solid rgba(11, 32, 53, 0.06); font: 400 clamp(1.3rem, 1rem + 0.8vw, 1.6rem)/1.1 var(--f-titulo); color: #0B2035; }
.sg__visto { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #0B2035; box-shadow: inset 0 0 0 1.5px currentColor; }
.sg__visto::after { content: ''; position: absolute; left: 7px; top: 4px; width: 6px; height: 10px; border: solid #FBF8F2; border-width: 0 2px 2px 0; rotate: 45deg; }
.sg__verbo { margin: 0 0 14px; padding: 13px 0 0; font: 400 clamp(1.3rem, 1rem + 0.8vw, 1.6rem)/1.1 var(--f-titulo); color: #0B2035; }
.sg__chave { position: relative; display: block; width: 68px; height: 38px; border-radius: 999px; background: #B88A2B; }
.sg__chave::after { content: ''; position: absolute; left: 4px; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 10px -4px rgba(11, 32, 53, 0.45); transform: translateX(30px); }
.sg__pago { margin: 16px 0 0; font-size: 0.9375rem; line-height: 1.45; color: #5C6773; }
.sg__pago b { color: #0B2035; font-weight: 600; }
@media (min-width: 1024px) { .sg__grade { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }

/* o ciclo (com movimento): o estado de cima é o final; as animações partem do apagado */
.anima .sg--vivo .sg__item { animation: sg-item var(--T) var(--mola) infinite; }
.anima .sg--vivo .sg__visto { animation: sg-visto var(--T) var(--mola) infinite; }
.anima .sg--vivo .sg__visto::after { animation: sg-check var(--T) linear infinite; }
.anima .sg--vivo .sg__item--2, .anima .sg--vivo .sg__item--2 .sg__visto, .anima .sg--vivo .sg__item--2 .sg__visto::after { animation-delay: 0.7s; }
.anima .sg--vivo .sg__item--3, .anima .sg--vivo .sg__item--3 .sg__visto, .anima .sg--vivo .sg__item--3 .sg__visto::after { animation-delay: 1.4s; }
.anima .sg--vivo .sg__verbo { animation: sg-lib var(--T) var(--mola) infinite; }
.anima .sg--vivo .sg__chave { animation: sg-trilho var(--T) var(--mola) infinite; }
.anima .sg--vivo .sg__chave::after { animation: sg-bola var(--T) var(--mola) infinite; }
.anima .sg--vivo .sg__pago { animation: sg-pago var(--T) linear infinite; }
@keyframes sg-item { 0%, 6% { color: var(--apagado); } 10%, 72% { color: #0B2035; } 78%, 100% { color: var(--apagado); } }
@keyframes sg-visto { 0%, 6% { background: transparent; color: var(--apagado); } 10%, 72% { background: #0B2035; color: #0B2035; } 78%, 100% { background: transparent; color: var(--apagado); } }
@keyframes sg-check { 0%, 7% { opacity: 0; } 10%, 72% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes sg-lib { 0%, 40% { color: var(--apagado); } 46%, 90% { color: #0B2035; } 96%, 100% { color: var(--apagado); } }
@keyframes sg-trilho { 0%, 40% { background: #E4DCCD; } 46%, 90% { background: #B88A2B; } 96%, 100% { background: #E4DCCD; } }
@keyframes sg-bola { 0%, 40% { transform: none; } 46%, 90% { transform: translateX(30px); } 96%, 100% { transform: none; } }
@keyframes sg-pago { 0%, 52% { opacity: 0; transform: translateY(6px); } 58%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
/* durante o atraso de cada verbo vale o primeiro quadro (apagado), não o estado final */
.anima .sg--vivo *, .anima .sg--vivo *::after { animation-fill-mode: both !important; } /* os atalhos acima zeram o fill-mode */
.sg--parado, .sg--parado *, .sg--parado *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .sg *, .sg *::after { animation: none !important; } }

/* separador.css */
/* ---------- Separação das seções: aba do topo (Carty) e ondas; fundos em marfim dourado ---------- */
.anima .hp, .hp { border-radius: 0 0 44px 44px; z-index: 3; }
.aba-topo { position: relative; z-index: 4; height: 0; }
.aba-topo__forma { position: absolute; left: 50%; top: -1px; translate: -50% 0; width: 320px; height: 84px; display: block; }
.aba-topo__forma path { fill: #081B2D; }
.ht + .aba-topo .aba-topo__forma path { fill: #E7ECF0; }
.aba-topo__selo { position: absolute; left: 50%; top: -54px; translate: -50% 0; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%;
  background: var(--marinho); box-shadow: 0 0 0 6px rgba(216, 172, 82, 0.2), 0 20px 40px -18px rgba(0, 0, 0, 0.8); }
.aba-topo__texto { position: absolute; inset: 0; width: 100%; height: 100%; animation: aba-gira 18s linear infinite; }
.aba-topo__texto text { font: 700 10.5px var(--f-mono); letter-spacing: 0.3em; text-transform: uppercase; fill: var(--ouro-claro); }
.aba-topo__elos { width: 40px; height: auto; }
@keyframes aba-gira { to { rotate: 360deg; } }
@media (max-width: 639px) { .aba-topo__forma { width: 240px; height: 66px; } .aba-topo__selo { width: 96px; height: 96px; top: -44px; } .aba-topo__elos { width: 32px; } }
/* a seção logo abaixo do topo passa por trás dos cantos arredondados */
.aba-topo + section, .aba-topo + .tom-marfim { margin-top: -44px; padding-top: calc(var(--secao) + 64px); }

:root { --onda-h: clamp(44px, 6vw, 90px); }
.onda { position: relative; z-index: 2; height: var(--onda-h); margin-bottom: -1px; }
/* a onda sobe por cima do pé da seção de cima: o fundo dela (degradê, desenho) vai inteiro até a curva */
.onda.onda--sobre { margin-top: calc(-1 * var(--onda-h)); background: transparent; }
.onda.onda--topo-sobre { margin-bottom: calc(-1 * var(--onda-h)); background: transparent; }
.onda svg { display: block; width: 100%; height: 100%; }
.onda--marfim { background: #F1E5CC; } .onda--navy { background: #0B2035; }
.onda--para-marfim { fill: #F1E5CC; } .onda--para-navy { fill: #0B2035; }

/* marfim dourado: os mesmos componentes, com os tons trocados na seção */
.tom-marfim {
  --tinta: #0B2035; --tinta-2: #3B4753; --azul: #5E450D; --azul-claro: #1F4C77; --azul-marca: #2F6690;
  --fio: rgba(11, 32, 53, 0.12); --fio-forte: rgba(11, 32, 53, 0.22); --fio-escuro: rgba(11, 32, 53, 0.14);
  background: #F1E5CC; color: #0B2035;
}
.tom-marfim .rotulo { color: #5E450D; }
.tom-marfim h2, .tom-marfim h3 { color: #0B2035; }
.tom-marfim h2 em { color: #1F4C77; }
@media (prefers-reduced-motion: reduce) { .aba-topo__texto { animation: none; } }

/* v31 a-global-home1: a linha azul de 1–2 px nas emendas (JM, 10/10: "com zoom aparece aquela linha na divisão da sessão").
   Causa: quando a emenda cai entre dois pixels da tela (zoom, densidade 2,625 do Android, 1,25 do Windows), cada lado
   pinta só uma fração do pixel da borda e o marinho do <body> aparece na fresta. Acontecia em três lugares: (1) a borda
   reta da onda que desce sobre a seção de baixo, (2) a borda de baixo da onda que sobe sobre o pé da seção de cima e
   (3) duas seções marfim seguidas. Correção na raiz: a pintura sólida passa 2 px por cima da emenda, então nenhum pixel
   dela fica pela metade. A curva desloca menos de 2 px, invisível. */
.onda svg { overflow: visible; }
.onda--topo-sobre svg { translate: 0 -2px; height: calc(100% + 2px); }
.onda:not(.onda--topo-sobre) svg { height: calc(100% + 2px); }
.tom-marfim + .tom-marfim { box-shadow: 0 -2px 0 #F1E5CC; }

/* topo-hero.css */
/* ---------- Hero da home · referência Logify: texto em caixa alta à esquerda com peças dentro da frase,
   o empresário recortado à direita com dois cartões de vidro; fundo claro ---------- */
.ht { --ht-bg: #E9EDF1; position: relative; z-index: 3; isolation: isolate; overflow: clip; border-radius: 0 0 44px 44px; color: #0B2035;
  background: radial-gradient(60% 70% at 24% 42%, #F8FAFB 0%, rgba(248, 250, 251, 0) 70%), radial-gradient(50% 60% at 78% 70%, #DCE4EB 0%, rgba(220, 228, 235, 0) 70%), var(--ht-bg); }
.ht__sentinela { position: absolute; left: 0; top: 0; width: 1px; height: 100svh; pointer-events: none; }
.ht__env { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); min-height: 100svh; padding-top: calc(var(--altura-topo) + 20px); }
.ht__texto { position: relative; z-index: 3; align-self: center; display: grid; justify-items: start; gap: clamp(20px, 3.2svh, 32px); padding-block: 4svh 8svh; }

/* os três ícones em fila, sobrepostos */
.ht__icones { display: flex; }
.ht__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 3px var(--ht-bg); }
.ht__ic + .ht__ic { margin-left: -10px; }
.ht__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ht__ic--ouro { background: linear-gradient(150deg, #E8CE93, #D8AC52); color: #0B2035; }
.ht__ic--marinho { background: #0B2035; color: #E8CE93; }
.ht__ic--azul { background: #1F5A85; color: #FFFFFF; }

/* o título: caixa alta, três linhas, peças no meio da frase */
.ht__titulo { display: grid; font: 500 clamp(2.3rem, 0.7rem + 3.5vw, 4.1rem)/1.04 var(--f-texto); letter-spacing: -0.035em; text-transform: uppercase; color: #0B2035; }
.ht__l { display: block; overflow: clip; overflow-clip-margin: 0.16em; padding-block: 0.02em; white-space: nowrap; }
.ht__m { display: inline-block; }
.ht__titulo .hero__chip { box-shadow: 0 12px 24px -12px rgba(216, 172, 82, 0.9); }
.ht__pilula { position: relative; display: inline-block; overflow: hidden; width: 1.62em; height: 0.66em; margin-right: 0.12em; border-radius: 0.17em; vertical-align: 0.06em; background: #0B2035; color: #E8CE93; }
.ht__pilula-trilho { position: absolute; left: 0; top: 50%; display: flex; gap: 0.1em; translate: -0.5em -50%; }
.ht__pilula-trilho svg { flex: none; width: 0.4em; height: 0.4em; }
.ht__chave { position: relative; display: inline-block; width: 1.3em; height: 0.66em; margin-left: 0.2em; border-radius: 0.17em; vertical-align: 0.06em;
  background: #FFFFFF; box-shadow: inset 0 0 0 0.03em rgba(11, 32, 53, 0.16), 0 10px 22px -12px rgba(11, 32, 53, 0.4); transition: background-color 420ms linear; }
.ht__chave i { position: absolute; left: 0.07em; top: 0.07em; display: grid; place-items: center; width: 0.52em; height: 0.52em; border-radius: 0.13em; background: #1F5A85; color: #FFFFFF;
  transition: translate 620ms cubic-bezier(.5, 1.4, .5, 1), background-color 420ms linear; }
.ht__chave svg { grid-area: 1 / 1; width: 0.3em; height: 0.3em; transition: opacity 240ms linear, scale 420ms cubic-bezier(.3, 1.4, .5, 1); }
.ht__chave svg + svg { opacity: 0; scale: 0.4; }
.ht__chave--on { background: linear-gradient(150deg, #E8CE93, #D8AC52); }
.ht__chave--on i { translate: 0.64em 0; background: #0B2035; }
.ht__chave--on svg { opacity: 0; scale: 0.4; }
.ht__chave--on svg + svg { opacity: 1; scale: 1; }

.ht__acoes { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ht__prova { font-size: 0.9375rem; color: #26323E; }
.ht__prova .link { color: #0B2035; }
.ht__prova b { font-weight: 700; }
.ht__rabisco { position: absolute; right: -130px; top: 64%; width: 104px; height: auto; overflow: visible; pointer-events: none; }
.ht__rabisco path { fill: none; stroke: #C9962E; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ht__apoio { max-width: 46ch; padding-top: 18px; border-top: 1px solid rgba(11, 32, 53, 0.14); color: #34414E; font-size: 1.0625rem; }

/* a cena: o empresário encostado no pé do hero e os cartões de vidro por cima */
.ht__cena { position: relative; z-index: 2; min-height: 0; }
.ht__foto { position: absolute; left: -12%; bottom: 0; width: auto; height: min(92%, 880px); max-width: none; filter: drop-shadow(0 30px 40px rgba(11, 32, 53, 0.18)); }
.ht__cartao { position: absolute; z-index: 3; display: grid; gap: 4px; width: 196px; padding: 16px 18px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 24px 50px -24px rgba(11, 32, 53, 0.45); }
.ht__cartao--1 { left: 64%; top: 40%; }
.ht__cartao--2 { left: 36%; bottom: 5%; }
.ht__cartao-rot { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: #34414E; }
.ht__cartao b { display: flex; align-items: center; gap: 4px; font: 500 2.6rem/1 var(--f-texto); letter-spacing: -0.03em; color: #0B2035; }
.ht__cartao b i { font-style: normal; color: #9A7120; }
.ht__estrela .estrela { width: 0.5em; height: 0.5em; fill: #C9962E; }
.ht__cartao-txt { font-size: 0.8125rem; line-height: 1.35; color: #26323E; }

/* entrada (depois da intro): linhas sobem de trás do recorte, peças entram em sequência */
.anima .ht__m { translate: 0 108%; }
.anima .ht__ic, .anima .ht__acoes, .anima .ht__apoio { opacity: 0; translate: 0 26px; }
.anima .ht__foto { opacity: 0; translate: 0 70px; }
.anima .ht__cartao--1 { opacity: 0; translate: 40px 0; }
.anima .ht__cartao--2 { opacity: 0; translate: -40px 0; }
.anima .ht__rabisco path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.anima:is(:not(.intro), .intro-sai) .ht__m { animation: ht-sobe 1100ms cubic-bezier(.16, 1, .3, 1) forwards; }
.anima:is(:not(.intro), .intro-sai) .ht__l:nth-child(2) .ht__m { animation-delay: 110ms; }
.anima:is(:not(.intro), .intro-sai) .ht__l:nth-child(3) .ht__m { animation-delay: 220ms; }
.anima:is(:not(.intro), .intro-sai) .ht__ic { animation: ht-entra 800ms cubic-bezier(.3, 1.3, .5, 1) forwards; }
.anima:is(:not(.intro), .intro-sai) .ht__ic:nth-child(2) { animation-delay: 90ms; }
.anima:is(:not(.intro), .intro-sai) .ht__ic:nth-child(3) { animation-delay: 180ms; }
.anima:is(:not(.intro), .intro-sai) .ht__acoes { animation: ht-entra 900ms cubic-bezier(.16, 1, .3, 1) 420ms forwards; }
.anima:is(:not(.intro), .intro-sai) .ht__apoio { animation: ht-entra 900ms cubic-bezier(.16, 1, .3, 1) 540ms forwards; }
.anima:is(:not(.intro), .intro-sai) .ht__foto { animation: ht-entra 1300ms cubic-bezier(.16, 1, .3, 1) 160ms forwards; }
.anima:is(:not(.intro), .intro-sai) .ht__cartao { animation: ht-entra 1000ms cubic-bezier(.16, 1, .3, 1) 900ms forwards; }
.anima:is(:not(.intro), .intro-sai) .ht__cartao--2 { animation-delay: 1060ms; }
.anima:is(:not(.intro), .intro-sai) .ht__rabisco path { animation: ht-risca 1100ms cubic-bezier(.4, 0, .2, 1) 1300ms forwards; }
.anima:is(:not(.intro), .intro-sai) .ht__rabisco path + path { animation-delay: 1900ms; animation-duration: 600ms; }
.anima .ht__pilula-trilho { animation: ht-setas 1500ms linear infinite; }
@keyframes ht-sobe { to { translate: 0 0; } }
@keyframes ht-entra { to { opacity: 1; translate: 0 0; } }
@keyframes ht-risca { to { stroke-dashoffset: 0; } }
@keyframes ht-setas { to { translate: 0 -50%; } }

@media (max-width: 1023px) {
  .ht__env { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: calc(var(--altura-topo) + 12px); }
  .ht__texto { padding-block: 16px 0; gap: 18px; }
  .ht__titulo { font-size: clamp(1.9rem, 0.6rem + 5.6vw, 3.2rem); }
  .ht__cena { height: min(62svh, 118vw); }
  .ht__foto { left: 50%; translate: -50% 0; height: 100%; }
  .anima .ht__foto { translate: -50% 70px; }
  @keyframes ht-entra-foto { to { opacity: 1; translate: -50% 0; } }
  .anima:is(:not(.intro), .intro-sai) .ht__foto { animation-name: ht-entra-foto; }
  .ht__cartao { width: 150px; padding: 12px 14px 14px; }
  .ht__cartao b { font-size: 1.9rem; }
  .ht__cartao-txt { font-size: 0.75rem; }
  .ht__cartao--1 { left: auto; right: 0; top: 34%; }
  .ht__cartao--2 { left: 0; bottom: 22%; }
  .ht__rabisco { display: none; }
  .ht__apoio { font-size: 1rem; }
}
@media (max-width: 420px) { .ht__ic { width: 36px; height: 36px; } .ht__ic svg { width: 17px; height: 17px; } }
@media (prefers-reduced-motion: reduce) {
  .anima .ht__pilula-trilho { animation: none; }
}

/* cabeçalho sobre o hero claro: enquanto está no topo (antes da ilha), texto e contornos em marinho */
body:has(.ht) .topo:not(.topo--ilha) { --tinta: #0B2035; --tinta-2: #26323E; --fio-forte: rgba(11, 32, 53, 0.24); --nevoa: rgba(11, 32, 53, 0.06); --creme: #0B2035; color: #0B2035; }
body:has(.ht) .topo:not(.topo--ilha) .topo__whats .bt__caixa { background: #0B2035; color: #FFFFFF; }
body:has(.ht) .topo:not(.topo--ilha) .bt-icone { background: #0B2035; color: #FFFFFF; box-shadow: none; }
body:has(.ht) .topo:not(.topo--ilha) .topo__barra { height: calc(var(--altura-topo) - 20px); margin-top: 12px; padding: 0 8px 0 16px; border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 16px 36px -24px rgba(11, 32, 53, 0.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* foto original inteira (JM, 25/09: "100% original, sem cortes no corpo"): ocupa o hero de ponta a ponta;
   um véu claro só atrás do texto deixa a janela de Recife aparecer suave. Celular e empresário ficam nítidos. */
.ht__cena { position: absolute; z-index: 1; inset: 0; }
.ht__foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 27% 50%; filter: none; }
.ht__cena::before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(236, 239, 242, 0.96) 0%, rgba(236, 239, 242, 0.9) 30%, rgba(236, 239, 242, 0.55) 39%, rgba(236, 239, 242, 0) 46%),
    linear-gradient(0deg, rgba(236, 239, 242, 0.5) 0%, rgba(236, 239, 242, 0) 18%); }
.ht__cartao { z-index: 2; }
.ht__env { z-index: 2; pointer-events: none; }
.ht__texto { pointer-events: auto; }
.ht__cartao--1 { left: 85%; top: 50%; }
.ht__cartao--2 { left: 69%; top: auto; bottom: 7%; }
.anima .ht__foto { opacity: 0; translate: none; scale: 1.04; }
.anima:is(:not(.intro), .intro-sai) .ht__foto { animation: ht-foto 1600ms cubic-bezier(.16, 1, .3, 1) 100ms forwards; }
@keyframes ht-foto { to { opacity: 1; scale: 1; } }
@media (min-width: 1024px) {
  /* o texto encosta na margem da tela (não no envelope) para nunca chegar no celular da foto */
  .ht__env { width: auto; margin: 0; padding-left: max(var(--margem), 5vw); padding-right: 0; grid-template-columns: minmax(0, 44vw) 1fr; }
  .ht__titulo { font-size: clamp(2.2rem, 0.4rem + 3.3vw, 4rem); }
}
@media (max-width: 1023px) {
  .ht { display: flex; flex-direction: column; }
  .ht__env { order: 1; }
  .ht__cena { position: relative; inset: auto; order: 2; width: 100%; height: min(58svh, 120vw); margin-top: 8px; }
  .ht__cena::before { background: linear-gradient(180deg, #E9EDF1 0%, rgba(233, 237, 241, 0) 16%); }
  .ht__foto { object-position: 80% 50%; translate: none; }
  .anima .ht__foto { translate: none; }
  .anima:is(:not(.intro), .intro-sai) .ht__foto { animation-name: ht-foto; }
  .ht__cartao--1 { left: auto; right: 12px; top: 40%; }
  .ht__cartao--2 { left: 12px; bottom: 10%; }
}
.ht__rabisco { display: none; }
.ht__cartao--1 { left: auto; right: max(24px, 3vw); top: 50%; }
@media (max-width: 1023px) { .ht__cartao { display: none; } }

/* zz-tipografia.css */
/* ---------- tipografia padronizada (JM, 07/10): títulos e subtítulos na Newsreader, o par elegante da marca ----------
   O texto corrido, rótulos, números e botões continuam na Hanken Grotesk. Este arquivo carrega por último (zz-). */

/* título do topo de cada página (home e internas): serifa, peso de leitura, as peças 3D seguem em em */
:is(.hpl__titulo, .ex__titulo, .bh__titulo, .ph__titulo) { font-family: var(--f-titulo); font-weight: 400; letter-spacing: -0.035em; line-height: 1.04; }
.hpl__titulo { font-size: clamp(2.7rem, 0.9rem + 4.5vw, 5.8rem); }
.ex__titulo { font-size: clamp(2.5rem, 0.8rem + 4.3vw, 5.4rem); }
:is(.bh__titulo, .ph__titulo) { font-size: clamp(2.5rem, 0.7rem + 3.8vw, 4.9rem); }

/* títulos de seção: um peso só em todas as páginas (o manifesto continua leve, de propósito) */
main h2:not(.qx__manifesto) { font-family: var(--f-titulo); font-weight: 500; letter-spacing: -0.02em; }
.rcs h2 { font-size: clamp(2.1rem, 1.1rem + 2.6vw, 3.6rem); line-height: 1.1; letter-spacing: -0.02em; }

/* títulos de cartão que ainda estavam na Hanken */
.rcs .rc__tit, .eg__fase h3, .pm__m h3 { font-family: var(--f-titulo); font-weight: 500; letter-spacing: -0.015em; }
.rcs .rc__tit { font-size: clamp(1.8rem, 1.4rem + 0.8vw, 2.2rem); line-height: 1.05; }
.eg__fase h3 { font-size: 1.4rem; line-height: 1.15; }
.pm__m h3 { font-size: 1.35rem; line-height: 1.15; }

/* subtítulos: a linha logo abaixo do título, em Newsreader, um pouco maior que o corpo */
:is(.hpl__apoio, .ex__apoio, .bh__apoio, .ph__apoio, .rcs__apoio, .cta-final__apoio, .qz__cab > p, .ef__cab p, .eg__lado > p,
  .ba__cab p, .bs-set__cab p, .pm__cab p, .pp__texto > p:not(.pp__rot), .ex__lado p:last-child) {
  font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem); line-height: 1.45; letter-spacing: -0.005em; }

/* zz-tons.css */
/* carrega por último (zz-), depois de secoes.css */
/* JM, 07/10: o cartão do questionário puxa para o marfim dourado do site (antes quase branco); respostas e barra
   seguem claras por cima, num creme um pouco mais leve que o cartão */
.qz__cartao { background: linear-gradient(165deg, #FBF5E8 0%, #F5EAD4 100%); box-shadow: 0 40px 70px -46px rgba(74, 52, 12, 0.45), 0 2px 0 rgba(255, 252, 244, 0.9) inset, inset 0 0 0 1px rgba(154, 113, 32, 0.12); }
.qz-op .qz-op__bg, .qz-campo, .qz-razao li { background: #FFFCF5; }
.qz-op__ic, .qz-op__caixa { background: #F1E5CC; }
.qz__passo-atual { background: #EFE2C6; }
.qz__barra { background: rgba(255, 252, 245, 0.97); box-shadow: 0 30px 50px -24px rgba(74, 52, 12, 0.35), 0 0 0 1px rgba(154, 113, 32, 0.1); }
.bm__palco > .monograma, .pm__preso > .monograma { -webkit-mask-image: none; mask-image: none; }

/* zzz-m-bpo.css */
/* ---------- BPO financeiro · v26 (JM, 07/10, revisão no celular) ----------
   Topo sem o tablet no celular (extrato do mês no lugar), "o que é" sem o celular (papéis soltos → mês fechado), o mês
   só com título, régua e cartão, painéis em carrossel no celular e os setores refeitos no computador e no celular.
   Carrega depois do bpo.css e do zzz-mobile.css. */

/* ---------- topo no celular: v31 c-bpo, o extrato saiu; o tablet com o relatório está em zzzzz-v31-c-bpo.css ---------- */
@media (max-width: 1023px) {
  .bh__grade { padding-top: calc(var(--altura-topo) + 14px); }
  .anima .bh__acoes { animation-delay: 720ms; }
}

/* ---------- o que é no celular: v31 c-bpo, os papéis soltos saíram; frase e cartão em zzzzz-v31-c-bpo.css ---------- */
@media (max-width: 1023px) {
  .bv__fone { display: none; }
  .bv__verbete h2 { font-size: clamp(2.8rem, 12vw, 4.4rem); }
}

/* ---------- o mês: só título, régua e o cartão da etapa; os cartões correm na horizontal com a marca da régua ---------- */
.bm__cu { display: none; }
@media (max-width: 1023px) {
  .bm .bm__semanas { display: none; }
  .bm__lg { display: none; } .bm__cu { display: inline; }
  /* cada rótulo sobre o ponto da etapa na régua (0, 1/3, 2/3 e o fim), numa linha só */
  .bm__etapas { position: relative; display: block; height: 1.2em; }
  .bm__etapas li { position: absolute; top: 0; left: 0; font-size: 0.7rem; letter-spacing: 0.08em; white-space: nowrap; }
  .bm__etapas li:nth-child(2) { left: 33.333%; translate: -50% 0; } .bm__etapas li:nth-child(3) { left: 66.667%; translate: -50% 0; }
  .bm__etapas li:last-child { left: auto; right: 0; }
}
@media (max-width: 379px) { .bm__etapas li { font-size: 0.66rem; letter-spacing: 0.04em; } }
@media (max-width: 1023px) {
  .bm__cena { --bm-q: 0; gap: 22px; min-width: 0; }
  .bm__regua { gap: 12px; }
  /* a marca e o traço feito seguem a etapa escalonada (--bm-q, 0 a 3), a mesma que move os cartões */
  .bm__feito { transform: scaleX(calc(var(--bm-q) / 3)); }
  .bm__marca { transform: translateX(calc(var(--bm-w, 300px) * var(--bm-q) / 3)); }
  .bm__paineis { display: flex; min-width: 0; gap: 12px; transform: translateX(calc(var(--bm-q) * (-88% - 12px))); will-change: transform; }
  .bm__p, .bm__p.on, .bm__p.saiu { grid-area: auto; flex: 0 0 88%; min-height: 0; opacity: 0.5; visibility: visible; transform: none; transition: opacity 450ms linear; }
  .bm__p.on { opacity: 1; }
  .bm__p:not(.on) > * { opacity: 1; translate: none; }
  .bm__p ul { margin-top: 8px; }
  .bm__p li { padding: 11px 0; font-size: 0.98rem; }
  .bm__big { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }
  .bm--vivo .bm__palco { align-content: center; padding-block: calc(var(--altura-topo) + 12px) 28px; }
  .bm__texto h2 { font-size: clamp(1.85rem, 8.2vw, 2.4rem); }
  .bm__rot { margin-bottom: 10px; }
  /* sem movimento: os quatro cartões numa fileira de rolagem lateral, sem a régua */
  .bm:not(.bm--vivo) .bm__regua { display: none; }
  .bm:not(.bm--vivo) .bm__paineis { transform: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scroll-padding-inline: var(--margem); }
  .bm:not(.bm--vivo) .bm__p { opacity: 1; scroll-snap-align: start; }
}

/* ---------- carrossel do celular (painéis e setores): traços da posição e o rótulo "Arraste para o lado" ---------- */
.bnav { display: none; }
@media (max-width: 899px) {
  .bnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
  .bnav__pontos { display: flex; align-items: center; gap: 6px; }
  .bnav__pontos i { width: 6px; height: 6px; border-radius: 3px; background: currentColor; opacity: 0.25; transition: width 320ms cubic-bezier(.22, 1, .36, 1), opacity 320ms linear; }
  .bnav__pontos i.on { width: 22px; opacity: 1; }
  .bnav__dica { display: inline-flex; align-items: center; gap: 6px; font: 600 0.8rem/1 var(--f-texto); letter-spacing: 0.01em; opacity: 0.75; transition: opacity 300ms linear; }
  .bnav__dica svg { width: 16px; height: 16px; }
  .bnav--fim .bnav__dica { opacity: 0.3; }
  .ba__nav { color: #0B2035; }
  .bs-set__nav { color: #E8CE93; } .bs-set__nav .bnav__dica { color: #C9D8E4; }
  /* a fileira: rolagem nativa com encaixe, sem barra, a primeira alinhada à margem e a próxima aparecendo cortada */
  .ba__paineis, .bs-set__lista { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem) 0; scroll-padding-inline: var(--margem); -webkit-overflow-scrolling: touch; }
  .ba__paineis::-webkit-scrollbar, .bs-set__lista::-webkit-scrollbar { display: none; }
  .ba__paineis::after, .bs-set__lista::after { content: ''; flex: 0 0 calc(var(--margem) - 12px); }
}

/* ---------- o que a Conex assume: no celular, carrossel de cartões já abertos ---------- */
@media (max-width: 899px) {
  .ba__paineis { flex-direction: row; height: auto; }
  .ba__p, .ba__p--on { flex: 0 0 84%; height: 440px; scroll-snap-align: start; cursor: default; transition: opacity 600ms linear, translate 900ms cubic-bezier(.16, 1, .3, 1); }
  .ba__alvo, .ba__fechado { display: none; }
  .ba__aberto, .ba__p--on .ba__aberto { opacity: 1; transition: none; }
  .ba__foto, .ba__p--on .ba__foto { scale: 1; transition: none; }
  .ba__txt, .ba__p--on .ba__txt { left: 20px; right: 20px; bottom: 22px; translate: none; transition: none; }
  .ba__nome { font-size: 1.9rem; }
  .ba__desc { font-size: 1rem; }
  .ba__recebe { font-size: 0.95rem; }
  /* entrada: a fileira chega da direita e os cartões aparecem um depois do outro (o que sugere que ela anda para o
     lado). O deslocamento é da fileira, nunca do cartão: cartão deslocado muda o ponto de encaixe e a rolagem ficava torta */
  .anima .ba .ba__p, .anima .ba.vista .ba__p { translate: none; }
  .anima .ba .ba__paineis { translate: 48px 0; transition: translate 1000ms cubic-bezier(.16, 1, .3, 1); }
  .anima .ba.vista .ba__paineis { translate: none; }
  .anima .ba.vista .ba__p:nth-child(2) { transition-delay: 90ms; } .anima .ba.vista .ba__p:nth-child(3) { transition-delay: 180ms; }
  .anima .ba.vista .ba__p:nth-child(4) { transition-delay: 270ms; } .anima .ba.vista .ba__p:nth-child(5) { transition-delay: 360ms; }
}

/* ---------- setores (JM, 07/10, v26): o arco de cada setor com o ícone desenhado; o escolhido cresce e vai para o centro ---------- */
.bs-set__cab { display: grid; gap: 14px; margin-bottom: clamp(30px, 4vw, 56px); }
.bs-set__cab h2 { margin: 0; max-width: 18ch; font: 500 var(--t-h2)/1.06 var(--f-titulo); letter-spacing: -0.02em; color: #F7F3EA; text-wrap: balance; }
.bs-set__cab p { margin: 0; max-width: 46ch; color: #C9D8E4; }
.bs-set__lista { list-style: none; }
.bs-set__n { margin: 0; font: 500 clamp(1.2rem, 0.95rem + 0.5vw, 1.45rem)/1.15 var(--f-titulo); letter-spacing: -0.01em; color: inherit; text-wrap: balance; }
.bs-set__arte, .bs-set__grande { display: grid; place-items: center; }
.bs-set__arte svg, .bs-set__grande svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.bs-set__arte svg > *, .bs-set__grande svg > * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.bs-set__rotina, .bs-set__conex { margin: 0; line-height: 1.45; text-wrap: pretty; }
.bs-set__conex span { display: block; margin-bottom: 4px; font: 600 0.7rem/1.3 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; }
/* as cores dos arcos (as mesmas da v3): fundo, ícone e texto */
.bs-set__cor--0 { background: linear-gradient(180deg, #1D456D, #12304D); color: #E8CE93; }
.bs-set__cor--1 { background: linear-gradient(180deg, #6B9EBB, #4A7F9D); color: #FFFFFF; }
.bs-set__cor--2 { background: linear-gradient(180deg, #E9CF94, #D8AC52); color: #0B2035; }
.bs-set__cor--3 { background: linear-gradient(180deg, #F7F1E5, #E6DCC8); color: #0B2035; }
.bs-set__cor--4 { background: linear-gradient(180deg, #BFD8E8, #96BCD4); color: #0B2035; }
.bs-set__cor--5 { background: linear-gradient(180deg, #2A5680, #17426A); color: #F7F3EA; }
@keyframes bs-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (min-width: 900px) {
  .bs-set__cab { justify-items: center; text-align: center; }
  .bs-set__cab p { max-width: 52ch; }
  /* três setores de cada lado, o palco no meio */
  .bs-set__palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: repeat(3, auto); column-gap: clamp(24px, 4vw, 64px); row-gap: 14px; align-items: center; }
  .bs-set__lista { display: contents; margin: 0; padding: 0; }
  .bs-set__s:nth-child(1) { grid-area: 1 / 1; } .bs-set__s:nth-child(2) { grid-area: 2 / 1; } .bs-set__s:nth-child(3) { grid-area: 3 / 1; }
  .bs-set__s:nth-child(4) { grid-area: 1 / 3; } .bs-set__s:nth-child(5) { grid-area: 2 / 3; } .bs-set__s:nth-child(6) { grid-area: 3 / 3; }
  .bs-set__s { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 18px; padding: 14px 22px 14px 14px; border-radius: 24px;
    background: linear-gradient(170deg, #132F4B 0%, #0E253C 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 40px -30px rgba(0, 0, 0, 0.8); color: #C9D8E4; transition: color 300ms linear; }
  /* os da esquerda espelhados: o arco do lado do palco */
  .bs-set__s:nth-child(-n+3) { grid-template-columns: minmax(0, 1fr) 64px; padding: 14px 14px 14px 22px; text-align: right; }
  .bs-set__s:nth-child(-n+3) .bs-set__arte { grid-column: 2; grid-row: 1; }
  .bs-set__s:nth-child(-n+3) .bs-set__n { grid-column: 1; grid-row: 1; }
  .bs-set__txt { display: none; }
  .bs-set__alvo { all: unset; position: absolute; inset: 0; z-index: 2; border-radius: inherit; cursor: pointer; }
  .bs-set__alvo:focus-visible { outline: 2px solid #D8AC52; outline-offset: 3px; }
  .bs-set__pint { position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.08); transform-origin: 50% 100%; scale: 1 0; transition: scale 420ms cubic-bezier(.65, 0, .25, 1); }
  .bs-set__arte { width: 64px; height: 74px; border-radius: 32px 32px 12px 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: opacity 300ms linear, scale 420ms cubic-bezier(.22, 1, .36, 1); }
  .bs-set__arte svg { width: 34px; height: 34px; stroke-width: 2.2; }
@media (hover: hover) and (pointer: fine){.bs-set__s:hover .bs-set__pint{ scale: 1 1; }}
@media (hover: hover) and (pointer: fine){.bs-set__s:hover{ color: #FFFFFF; }}
  .bs-set__s.on { color: #FFFFFF; }
  .bs-set__s.on .bs-set__pint { scale: 1 1; }
  /* o arco do escolhido "saiu" para o palco: fica só o contorno no lugar */
  .bs-set__s.on .bs-set__arte { opacity: 0.32; scale: 0.92; }
  /* o palco: os seis arcos no mesmo lugar; o da vez aparece (o JS faz ele sair do lugar dele e crescer até aqui) */
  .bs-set__centro { grid-area: 1 / 2 / 4 / 3; display: grid; }
  .bs-set__face { grid-area: 1 / 1; display: grid; justify-items: center; align-content: end; gap: 12px; aspect-ratio: 4 / 4.9; padding: 0 clamp(24px, 2.6vw, 36px) clamp(26px, 2.6vw, 36px); border-radius: 999px 999px 32px 32px; text-align: center;
    box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.14); visibility: hidden; opacity: 0; transform-origin: 50% 50%; }
  .bs-set__face.on { visibility: visible; opacity: 1; }
  .bs-set__grande svg { width: clamp(96px, 9vw, 124px); height: auto; margin-bottom: 4px; stroke-width: 1.4; }
  .bs-set__fn { margin: 0; font: 500 clamp(1.6rem, 1.2rem + 0.8vw, 2rem)/1.08 var(--f-titulo); letter-spacing: -0.015em; }
  .bs-set__face .bs-set__rotina { max-width: 32ch; font-size: 0.97rem; opacity: 0.82; }
  .bs-set__face .bs-set__conex { max-width: 32ch; padding-top: 12px; border-top: 1px solid color-mix(in srgb, currentColor 26%, transparent); font-size: 1.02rem; }
  .bs-set__face:is(.bs-set__cor--0, .bs-set__cor--5) .bs-set__fn, .bs-set__face:is(.bs-set__cor--0, .bs-set__cor--5) .bs-set__conex { color: #FFFFFF; }
  .bs-set__face:is(.bs-set__cor--0, .bs-set__cor--5) .bs-set__rotina { color: #C9D8E4; opacity: 1; }
  .bs-set__face:is(.bs-set__cor--0, .bs-set__cor--5) .bs-set__conex span { color: #E8CE93; }
  .bs-set__face:is(.bs-set__cor--2, .bs-set__cor--3, .bs-set__cor--4) .bs-set__conex span { color: #5E450D; }
  .bs-set__face.bs-set__cor--1 .bs-set__conex span { color: #0B2035; }
  /* o texto do palco entra depois que o arco chega; o ícone se desenha */
  .bs-set__face > :not(.bs-set__grande) { opacity: 0; translate: 0 10px; transition: opacity 200ms linear, translate 500ms cubic-bezier(.22, 1, .36, 1); }
  .bs-set__face.on > :not(.bs-set__grande) { opacity: 1; translate: none; transition: opacity 380ms linear 200ms, translate 600ms cubic-bezier(.22, 1, .36, 1) 160ms; }
  .bs-set__face.on > :nth-child(3) { transition-delay: 260ms; } .bs-set__face.on > :nth-child(4) { transition-delay: 320ms; }
  .anima .bs-set.vista .bs-set__face.on .bs-set__grande svg > * { animation: bs-traco 1000ms cubic-bezier(.4, 0, .2, 1) 120ms both; }
  /* entrada da seção: os setores chegam dos lados, o palco sobe */
  .anima .bs-set .bs-set__s { opacity: 0; translate: -28px 0; transition: color 300ms linear, opacity 600ms linear, translate 900ms cubic-bezier(.16, 1, .3, 1); }
  .anima .bs-set .bs-set__s:nth-child(n+4) { translate: 28px 0; }
  .anima .bs-set .bs-set__centro { opacity: 0; translate: 0 40px; transition: opacity 700ms linear, translate 1100ms cubic-bezier(.16, 1, .3, 1); }
  .anima .bs-set.vista .bs-set__s, .anima .bs-set.vista .bs-set__centro { opacity: 1; translate: 0 0; }
  .anima .bs-set.vista .bs-set__s:nth-child(2), .anima .bs-set.vista .bs-set__s:nth-child(5) { transition-delay: 0ms, 90ms, 90ms; }
  .anima .bs-set.vista .bs-set__s:nth-child(3), .anima .bs-set.vista .bs-set__s:nth-child(6) { transition-delay: 0ms, 180ms, 180ms; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .bs-set__palco { grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) minmax(0, 1fr); column-gap: 24px; }
  .bs-set__s { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding-right: 16px; }
  .bs-set__s:nth-child(-n+3) { grid-template-columns: minmax(0, 1fr) 52px; padding-left: 16px; }
  .bs-set__arte { width: 52px; height: 60px; }
  .bs-set__arte svg { width: 28px; height: 28px; }
  .bs-set__face .bs-set__rotina { display: none; }
}

/* celular: carrossel de cartões completos (arco + nome + rotina + o que a Conex faz), sem palco e sem toque para abrir */
@media (max-width: 899px) {
  .bs-set__centro, .bs-set__alvo, .bs-set__pint { display: none; }
  .bs-set__s { flex: 0 0 80%; scroll-snap-align: start; display: grid; align-content: start; gap: 14px; padding: 20px 20px 22px; box-sizing: border-box; border-radius: 24px; color: #FFFFFF;
    background: linear-gradient(170deg, #173A5C 0%, #0F2740 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 50px -36px rgba(0, 0, 0, 0.8); }
  .bs-set__arte { width: 76px; height: 88px; border-radius: 38px 38px 14px 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 26px -16px rgba(0, 0, 0, 0.7); }
  .bs-set__arte svg { width: 42px; height: 42px; stroke-width: 1.9; }
  .bs-set__n { margin-top: 4px; font-size: 1.5rem; color: #FFFFFF; }
  .bs-set__txt { display: grid; gap: 12px; }
  .bs-set__s .bs-set__rotina { font-size: 0.97rem; color: #C9D8E4; }
  .bs-set__s .bs-set__conex { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 1rem; color: #FFFFFF; }
  .bs-set__s .bs-set__conex span { color: #E8CE93; }
  /* o ícone do cartão que chega ao centro da fileira se desenha */
  .anima .bs-set.vista .bs-set__s.on .bs-set__arte svg > * { animation: bs-traco 1000ms cubic-bezier(.4, 0, .2, 1) 100ms both; }
  .anima .bs-set .bs-set__s { opacity: 0; translate: none; transition: opacity 600ms linear; }
  .anima .bs-set .bs-set__lista { translate: 48px 0; transition: translate 1000ms cubic-bezier(.16, 1, .3, 1); }
  .anima .bs-set.vista .bs-set__lista { translate: none; }
  .anima .bs-set.vista .bs-set__s { opacity: 1; }
  .anima .bs-set.vista .bs-set__s:nth-child(2) { transition-delay: 90ms; } .anima .bs-set.vista .bs-set__s:nth-child(3) { transition-delay: 180ms; }
}
@media (prefers-reduced-motion: reduce) { .bs-set__face, .bs-set__face > *, .bs-set__arte, .bs-set__pint { transition: none !important; } .bs-set__arte svg > *, .bs-set__grande svg > * { animation: none !important; } }

/* zzz-m-home1.css */
/* ---------- v26 · home, parte 1 (JM, 07/10, revisão no celular) ----------
   Hero, Três frentes, depoimentos e Resultados no celular. Carrega depois do zzz-mobile. O computador (≥ 1024 com
   mouse) não muda: tudo aqui está dentro de max-width ou só existe no celular. */

/* ---------- hero: sem notebook e sem celular; o planeta é o fundo e o protagonista ----------
   O topo do disco passa atrás do botão (o JS mede o texto e posiciona o planeta); os pagamentos correm de Recife para
   as capitais e as etiquetas aparecem embaixo do botão. A primeira tela mostra o título, o botão e o planeta. */
@media (max-width: 899px) {
  .hpl { --hh: max(100svh, 700px); }
  .hpl__fones { display: none; }
  .hpl__texto { top: calc(var(--altura-topo) + 28px); }
  .hpl__apoio { margin-top: 16px; max-width: 30em; font-size: 1rem; line-height: 1.45; text-wrap: balance; }
  .hpl__acoes { margin-top: 24px; }
}

/* ---------- indicador de rolagem lateral (arraste.mjs): "Arraste para o lado →" e um traço por cartão ----------
   Os traços dos cartões à vista acendem (JS 'arraste'); sem JS, o primeiro fica aceso. Fica escondido onde a seção não
   é carrossel. */
.arraste { display: none; }
.arraste { align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--margem); margin-top: 14px; color: #3B4753; }
.arraste__rot { display: inline-flex; align-items: center; gap: 6px; font: 600 0.75rem/1.2 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.arraste__rot svg { width: 16px; height: 16px; color: #8A6A22; }
.arraste__tr { display: flex; gap: 5px; }
.arraste__tr i { width: 14px; height: 3px; border-radius: 3px; background: rgba(11, 32, 53, 0.16); transition: width 320ms cubic-bezier(.22, 1, .36, 1), background-color 240ms linear; }
.arraste:not(.arraste--vivo) .arraste__tr i:first-child, .arraste__tr i.on { width: 24px; background: #0B2035; }
@media (prefers-reduced-motion: reduce) { .arraste__tr i { transition: none; } }

/* ---------- Três frentes: no celular, carrossel de arrastar com os cinco cartões ----------
   Cartões estreitos (cabem dois e um pedaço do terceiro, cortado na borda); cada um com a foto, o ícone, o nome, uma
   linha e a seta de entrar. O toque entra na página do serviço (o "o que inclui" fica para o computador). Nada anda
   sozinho; a entrada é uma vez, os cartões chegando da direita em sequência curta. */
@media (max-width: 899px) {
  .leque { --cw: calc((100vw - var(--margem) - 20px) / 2.35); --ch: calc(var(--cw) * 1.58); margin-top: 26px; }
  .leque__palco { display: flex; gap: 10px; width: auto; max-width: none; height: auto; margin: 0; padding: 4px var(--margem) 22px; scale: none;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); overscroll-behavior-x: contain;
    scrollbar-width: none; touch-action: auto; -webkit-overflow-scrolling: touch; }
  .leque__palco::-webkit-scrollbar { display: none; }
  .leque .leque__card { position: relative; left: auto; top: auto; z-index: auto; flex: 0 0 var(--cw); width: var(--cw); height: var(--ch); margin: 0;
    scroll-snap-align: start; transform: none; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.14), 0 18px 28px -18px rgba(11, 32, 53, 0.7); transition: none; }
  .leque__card::after, .lq-verso, .leque__tag { display: none; }
  .leque__card:active { scale: 0.98; transition: scale 120ms ease-out; }
  .lq-ic { left: 10px; top: 10px; width: 32px; height: 32px; border-radius: 10px; }
  .lq-ic svg { width: 18px; height: 18px; }
  .lq-ir { position: absolute; z-index: 2; right: 10px; top: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(247, 242, 232, 0.94); color: #0B2035; }
  .lq-ir svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .leque .lq-txt, .leque .leque__card--aberto .lq-txt { translate: none; gap: 5px; padding: 44px 11px 12px; background: linear-gradient(180deg, rgba(8, 24, 40, 0) 0%, rgba(8, 24, 40, 0.84) 34%, rgba(8, 24, 40, 0.97) 100%); }
  .leque .lq-tit { font-size: 1.0625rem; line-height: 1.1; }
  .leque .lq-lin, .leque .leque__card--aberto .lq-lin { display: block; opacity: 1; font-size: 0.78125rem; line-height: 1.35; color: #D3E1EC; }
  .leque .arraste { display: flex; margin-top: 2px; }
  /* entrada: da direita, um atrás do outro (substitui o arco que se abria) */
  .leque.lq-e0 .leque__card:nth-child(n) { opacity: 0; transform: translateX(36px); }
  .leque.lq-voa .leque__card { transition: transform 760ms cubic-bezier(.16, 1, .3, 1), opacity 320ms linear; }
  .leque.lq-voa .leque__card:nth-child(2) { transition-delay: 60ms; } .leque.lq-voa .leque__card:nth-child(3) { transition-delay: 120ms; }
  .leque.lq-voa .leque__card:nth-child(4) { transition-delay: 180ms; } .leque.lq-voa .leque__card:nth-child(5) { transition-delay: 240ms; }
}
@media (min-width: 900px) { .lq-ir { display: none; } }

/* ---------- depoimentos no celular: a frase em destaque mais compacta e a fila mais rápida ----------
   A citação ocupa só a altura da frase mais longa (o JS 'dp' mede), com letra um pouco menor e menos vão até o autor;
   o rótulo cabe numa linha. A fila de cartões anda ~1,8× mais rápido (de 22 para ~40 px/s), ainda legível; o toque
   num cartão continua parando a fila e o segundo toque solta (zzz-mobile). */
@media (max-width: 899px) {
  .dp__topo { gap: 28px; }
  .dp__destaque { gap: 12px; }
  .dp__rot { gap: 10px; font-size: 0.6875rem; letter-spacing: 0.08em; white-space: nowrap; }
  .dp__rot-est { gap: 2px; } .dp__rot-est svg { width: 12px; height: 12px; }
  .dp__citacao { min-height: 0; font-size: 1.4375rem; line-height: 1.17; }
  .dp__autor { font-size: 0.9375rem; gap: 4px 10px; }
  .dp__autor [data-dp-ctx]::before { margin-right: 10px; }
  .dp__passos { margin-top: 4px; }
  .dp__meio { margin-top: 40px; }
  .dp__fila { animation-duration: 38s; }
}

/* ---------- Resultados no celular e no tablet: carrossel de cartões baixos que abrem no toque ----------
   Fechado (≈ 330 px, antes 580): a foto no alto, o nome, uma linha e "Ver detalhes +". Os quatro fechados têm a mesma
   altura (o nome reserva duas linhas e a linha, duas). Tocado, só ele cresce para baixo (os vizinhos ficam alinhados
   ao topo): o texto completo, o placar e o botão de WhatsApp entram com a altura animada e um fade curto; o + vira ×.
   O computador com mouse continua com o hover (resultados.css). */
.rc__sub, .rc__abre { display: none; }
@media (max-width: 1023px) {
  .rcs__trilho { align-items: flex-start; }
  .rc { --rc-foto: 140px; min-height: 0; display: block; }
  .rc__foto { top: -1px; bottom: auto; height: calc(var(--rc-foto) + 150px); }
  .rc::after { bottom: auto; height: calc(var(--rc-foto) + 152px);
    background: linear-gradient(180deg, rgba(11, 32, 53, 0) 22%, rgba(11, 32, 53, 0.78) 52%, rgba(11, 32, 53, 0.97) 74%, #0B2035 100%); }
  .rc__corpo { position: relative; left: auto; right: auto; bottom: auto; margin-top: var(--rc-foto); gap: 0; padding: 0 20px 14px; }
  .rcs .rc__tit { display: flex; align-items: flex-end; min-height: 2.16em; font-size: 1.625rem; }
  .rc__sub { display: block; min-height: 2.8em; margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.4; color: #D9E5EE; }
  .rc__abre { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; margin: 4px 0 0; padding: 0; border: 0; background: none;
    font: 600 0.875rem/1 var(--f-texto); letter-spacing: 0.02em; color: #F1DDA8; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .rc__abre i { position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(241, 221, 168, 0.6); transition: rotate 380ms cubic-bezier(.22, 1, .36, 1); }
  .rc__abre i::before, .rc__abre i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -0.8px 0 0 -5.5px; border-radius: 2px; background: currentColor; }
  .rc__abre i::after { rotate: 90deg; }
  .rc__abre:active { opacity: 0.7; }
  .rc__abre:focus-visible { outline: 2px solid #F1DDA8; outline-offset: 4px; border-radius: 6px; }
  .rc__abre-fecha, .rc--aberto .rc__abre-ver { display: none; }
  .rc--aberto .rc__abre-fecha { display: inline; }
  .rc--aberto .rc__abre i { rotate: 45deg; }
  /* o que abre: o texto completo e o placar com o botão, cada um em grid 0fr → 1fr */
  .rc__txt, .rc__mais { display: grid; grid-template-rows: 0fr; max-width: none; transition: grid-template-rows 460ms cubic-bezier(.22, 1, .36, 1); }
  .rc__txt > p, .rc__mais-in { min-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 160ms linear, visibility 0s linear 460ms; }
  .rc__mais-in { padding-top: 0; }
  .rc--aberto :is(.rc__txt, .rc__mais) { grid-template-rows: 1fr; }
  .rc--aberto :is(.rc__txt > p, .rc__mais-in) { opacity: 1; visibility: visible; transition: opacity 280ms linear 140ms, visibility 0s; }
  .rc--aberto .rc__txt > p { padding-top: 6px; }
  .rc--aberto .rc__mais-in { padding: 14px 0 8px; }
  .rc__cta { width: 100%; min-width: 0; }
  .rc__cta .bt__texto { min-width: 0; white-space: normal; text-wrap: balance; }
  .rcs .arraste { display: flex; padding-inline: 0; margin-top: 12px; }
}
/* telas estreitas (360): o placar cabe no cartão sem cortar o último número */
@media (max-width: 389px) {
  .pl b { font-size: 1.0625rem; }
  .pl div { padding-right: 6px; } .pl div + div { padding-left: 10px; }
  .pl span { font-size: 0.75rem; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .rc__txt, .rc__mais, .rc__abre i, .rc__txt > p, .rc__mais-in { transition: none !important; }
}

/* zzz-m-home2.css */
/* ---------- v26 (JM, 07/10) · home, parte 2: Como funciona, Quem é a Conex, comparativo e contato ----------
   Carrega depois dos componentes (zzz-) e antes do zzz-mobile.css. Quase tudo é do celular; o que vale no computador
   está marcado ("computador também"). */

/* ===== 1 · Como funciona ===== */
/* JM, 07/10: "tira essa movimentação do background e deixa só os cards se movimentando". No computador o fundo já é
   preso à janela (background-attachment: fixed), mas o celular ignora o fixed: o monograma e a luz rolavam junto da
   seção alta enquanto o palco ficava preso. Aqui o monograma vira uma camada presa (sticky) do tamanho da tela, por
   baixo do palco, e a luz passa para o palco; só os cartões se movem. */
@media (max-width: 1023px) {
  .anima .cf2.cf2--vivo { background: #0B2035; }
  .cf2--vivo > .monograma { position: sticky; inset: auto; top: 0; height: 100svh; margin-bottom: -100svh; background-attachment: scroll; }
  .cf2--vivo .cf2__palco { background: radial-gradient(70% 45% at 12% 30%, rgba(46, 111, 163, 0.28), transparent 70%); }
}

/* JM, 07/10: o painel aberto da fase no celular deixa de ser "texto abaixo de texto". Capa mais baixa com o objeto da
   fase (o mesmo da aba do cartão), a frase, e as entregas em dois blocos: o que a Conex faz (fio azul, os elos) e o que
   fica com você (fio dourado, a pessoa). No pé, a fase em que se está e o botão para a seguinte. */
.cf2-fase__grupos, .cf2-fase__nav { display: none; }
@media (max-width: 767px) {
  /* o painel tem a altura do conteúdo (sem vazio antes da barra), até 90% da tela; aí só o corpo rola */
  .cf2-painel { height: auto; max-height: min(90svh, 760px); }
  .cf2-fase { height: auto; max-height: min(90svh, 760px); grid-template-rows: 156px minmax(0, 1fr) auto; }
  .cf2-fase__capa::after { background: linear-gradient(180deg, rgba(11, 32, 53, 0.35) 0%, rgba(11, 32, 53, 0.1) 30%, rgba(11, 32, 53, 0.7) 68%, #0B2035 100%); }
  .cf2-fase__cab { left: 20px; right: 20px; bottom: 12px; align-items: center; gap: 14px; }
  .cf2-fase__cab .cf2-placa { display: grid; width: 52px; border-radius: 15px; }
  .cf2-painel .cf2-fase__quando { margin-bottom: 6px; font-size: 0.6875rem; text-wrap: balance; }
  .cf2-painel .cf2-fase__tit { font-size: 2rem; }
  .cf2-painel .cf2-fase__tit em { display: block; margin: 4px 0 0; font-size: 1.0625rem; }
  .cf2-fase__corpo { gap: 20px; padding: 16px 20px 20px; overscroll-behavior: contain; }
  .cf2-painel .cf2-fase__frase { max-width: none; font-size: 1.1875rem; line-height: 1.38; color: #E4ECF3; }
  .cf2-fase__ctrl { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 0.875rem; }
  .cf2-painel .cf2-fase__lista { display: none; }

  .cf2-fase__grupos { display: grid; gap: 12px; }
  .cf2-gr { --c: #8FC0DA; display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 18px; background: rgba(88, 145, 175, 0.12); box-shadow: inset 3px 0 0 var(--c); }
  .cf2-gr--voce { --c: #D8AC52; background: rgba(216, 172, 82, 0.1); }
  .cf2-gr__t { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 0.6875rem/1.2 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
  .cf2-gr__t svg { flex: none; width: 22px; height: 22px; }
  .cf2-gr--voce .cf2-gr__t svg { width: 20px; height: 20px; }
  .cf2-gr ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .cf2-gr li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 1rem; line-height: 1.4; color: #FFFFFF; }
  .cf2-gr li i { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); color: var(--c); }
  .cf2-gr li i svg { width: 14px; height: 14px; }
  /* as entregas entram uma a uma depois que o painel abre (mesma cadência do computador) */
  .cf2-painel .cf2-gr { transition: opacity 400ms linear, translate 600ms cubic-bezier(.22, 1, .36, 1); }
  .cf2-painel .cf2-gr:nth-child(1) { transition-delay: 280ms; } .cf2-painel .cf2-gr:nth-child(2) { transition-delay: 380ms; }
  .cf2-painel--crescendo .cf2-gr { opacity: 0; translate: 0 12px; transition-delay: 0ms !important; }

  .cf2-fase__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 12px 20px; border-top: 1px solid rgba(233, 242, 248, 0.12); background: #0B2035; }
  .cf2-fase__passo { display: grid; gap: 7px; margin: 0; font: 600 0.75rem/1 var(--f-texto); letter-spacing: 0.04em; color: #A9BCCB; font-variant-numeric: tabular-nums; }
  .cf2-fase__tracos { display: flex; gap: 5px; }
  .cf2-fase__tracos i { width: 16px; height: 3px; border-radius: 2px; background: rgba(233, 242, 248, 0.2); }
  .cf2-fase__tracos i.feito { background: rgba(216, 172, 82, 0.5); }
  .cf2-fase__tracos i.on { width: 26px; background: #D8AC52; }
  .cf2-fase__prox { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px 0 18px; border: 0; border-radius: 14px; cursor: pointer;
    background: #F7F2E8; color: #0B2035; font: 600 0.9375rem/1 var(--f-texto); transition: background-color 160ms linear, scale 160ms ease-out; }
  .cf2-fase__prox svg { width: 18px; height: 18px; }
  .cf2-fase__prox span { white-space: nowrap; }
  .cf2-fase__prox[data-cf2-fecha] { padding-inline: 20px; background: rgba(233, 242, 248, 0.1); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.2); }
  .cf2-fase__prox:active { scale: 0.97; background: #E8CE93; }
  .cf2-fase__prox[data-cf2-fecha]:active { background: rgba(233, 242, 248, 0.18); }
  .cf2-fase__prox:focus-visible { outline: 3px solid #E8CE93; outline-offset: 2px; }
  /* o Voltar fica por cima da foto, acima da manchete */
  .cf2-painel__volta { left: 14px; top: 14px; }
}
/* no 360 o "Próxima: Acompanhar" quebrava em duas linhas: fica só o traço da fase, sem o "Fase 3 de 4" */
@media (max-width: 379px) { .cf2-fase__passo { font-size: 0; gap: 0; } .cf2-fase__nav { padding-left: 16px; } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .cf2-painel .cf2-gr { transition: none; } }

/* ===== 2 · Quem é a Conex ===== */
/* computador também: o manifesto ganha um trecho próprio da rolagem (o JS revela uma frase por vez) */
.anima .qx.qx--vivo { height: calc(100svh + 4 * 42svh + 26svh); }
.qx__manifesto { display: grid; justify-items: center; }
.qx__manifesto .qx-frase { display: block; opacity: 1; transform: none; }
.qx-liga { font-style: italic; color: #E8CE93; }
.qx-nq { white-space: nowrap; } /* o ponto não desce sozinho para a linha de baixo */
/* o fio que liga uma frase à seguinte: desce da palavra dourada e se desenha quando a próxima frase chega */
.qx-fio { display: block; width: 1.5px; height: clamp(22px, 3.4svh, 36px); margin: clamp(8px, 1.4svh, 14px) auto; border-radius: 1px;
  background: linear-gradient(180deg, rgba(232, 206, 147, 0.9), rgba(232, 206, 147, 0.35)); transform-origin: 50% 0; }
.qx--vivo .qx-fio { transform: scaleY(0); opacity: 0.4; transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 300ms linear; }
.qx--vivo .qx-fio.cheia { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .qx-fio { transform: none !important; opacity: 1 !important; } }
@media (min-width: 900px) { .qx__manifesto { font-size: clamp(2rem, 0.6rem + 2.9vw, 3.7rem); line-height: 1.08; } }

@media (max-width: 899px) {
  /* JM, 07/10: as cinco frentes em cinco linhas iguais (antes eram 2 + 2 + 1, com a Gestão sozinha embaixo):
     o nome à esquerda, a descrição à direita, um fio dourado entre elas */
  .qx-frentes { gap: 18px; }
  .qx-frentes__lista { grid-template-columns: minmax(0, 1fr); row-gap: 0; max-width: 460px; margin-top: 4px; border-bottom: 1px solid rgba(232, 206, 147, 0.28); }
  .qx-frentes__lista li, .qx-frentes__lista li + li, .qx-frentes__lista li:nth-child(odd), .qx-frentes__lista li:nth-child(even), .qx-frentes__lista li:last-child {
    grid-column: auto; display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); align-items: center; justify-items: start; gap: 12px;
    padding: 12px 2px; border-left: 0; border-top: 1px solid rgba(232, 206, 147, 0.28); text-align: left; }
  .qx-frentes__lista b { font-size: 1.375rem; }
  .qx-frentes__lista span { max-width: none; font-size: 0.875rem; line-height: 1.4; }
}
@media (max-width: 767px) {
  /* JM, 07/10: menos vazio entre o último quadro (números e WhatsApp) e a seção seguinte. O quadro sobe para logo abaixo
     do cabeçalho e a onda da seção seguinte passa por cima do pé do palco (os traços de cena), que no fim ficava vazio */
  .qx--vivo [data-qx-cena="5"] { align-content: start; top: calc(var(--altura-topo) + 28px); }
  .qx.qx--vivo + .onda.onda--sobre { margin-top: calc(-1 * var(--onda-h) - 150px); }
}

/* ===== 3 · Comparativo ===== */
/* JM, 07/10: no celular, um seletor de duas opções troca a ficha no mesmo lugar. Escolhido em vez das colunas lado a lado
   porque a ficha do assistente tem dez linhas com nome e valor: em 175 px por coluna os nomes quebrariam em três linhas
   e os valores não caberiam. Com o seletor, o total fica na mesma altura nas duas fichas e a comparação é de um toque. */
.cp__seg, .cp__seg-dica { display: none; }
@media (max-width: 899px) {
  /* o seletor acompanha a leitura da ficha (preso logo abaixo do cabeçalho até o fim das fichas) */
  .cp--seg .cp__seg { position: sticky; z-index: 5; top: calc(var(--altura-topo) + 10px); display: grid; justify-items: center; margin: 0 auto 14px; }
  .cp__seg-trilho { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 420px); padding: 4px; border-radius: 16px;
    background: #E9DBBD; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.1), 0 12px 24px -18px rgba(11, 32, 53, 0.55); }
  .cp__seg-bt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 8px; border: 0; border-radius: 12px;
    background: none; color: #0B2035; font: 600 0.9375rem/1.1 var(--f-texto); white-space: nowrap; cursor: pointer; transition: color 260ms linear; }
  .cp__seg-bt img { width: 22px; height: 22px; object-fit: contain; }
  .cp__seg[data-ver="conex"] .cp__seg-bt[aria-pressed="true"] { color: #FFFFFF; }
  .cp__seg-bt:active { opacity: 0.8; }
  .cp__seg-bt:focus-visible { outline: 3px solid #D8AC52; outline-offset: 2px; }
  /* o marcador desliza para baixo da opção escolhida: papel para o assistente, marinho para a Conex (as cores das fichas) */
  .cp__seg-cursor { position: absolute; z-index: 0; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 12px; background: #FFFCF5;
    box-shadow: 0 6px 14px -8px rgba(11, 32, 53, 0.45), inset 0 0 0 1px rgba(154, 113, 32, 0.14); transition: translate 420ms cubic-bezier(.22, 1, .36, 1), background-color 300ms linear; }
  .cp__seg[data-ver="conex"] .cp__seg-cursor { translate: 100% 0; background: #17426A; }
  .cp--seg .cp__seg-dica { display: block; margin: 0 0 8px; text-align: center; font-size: 0.8125rem; color: #5B6875; transition: opacity 300ms linear; }
  .cp__seg-dica b { font-weight: 600; color: #0B2035; }
  .cp--seg-usado .cp__seg-dica { opacity: 0; }

  /* as duas fichas no mesmo lugar; a escolhida entra de lado, a outra sai */
  .cp--seg .cp__mesa { position: relative; grid-template-columns: minmax(0, 1fr); overflow: clip; overflow-clip-margin: 40px; }
  .cp--seg .cp__ficha { align-content: start; gap: 14px; padding: 22px 20px 24px; }
  .cp--seg .cp__ficha:not(.on) { position: absolute; left: 0; right: 0; top: 0; }
  .cp--seg .cp__ficha header { min-height: 58px; padding-bottom: 12px; }
  .cp--seg .cp__quem { font-size: 1.4rem; }
  .cp--seg .cp__total { order: -1; grid-row: 2; padding: 2px 0 6px; }
  .cp--seg .cp__total b { font-size: 2.3rem; }
  .cp--seg .cp__ficha dl > div { padding: 8px 0; }
  .cp--seg .cp__ficha dt, .cp--seg .cp__ficha dd { font-size: 0.9063rem; }
  .cp--seg .cp__ficha--clt dl > div:last-child, .cp--seg .cp__ficha--conex dl > div:last-child { border-bottom: 0; }
  .cp.cp--seg .cp__ficha, .anima .cp.cp--seg.vista .cp__ficha { transition: opacity 260ms linear, translate 420ms cubic-bezier(.22, 1, .36, 1), transform 1000ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s; }
  .cp.cp--seg .cp__ficha:not(.on), .anima .cp.cp--seg.vista .cp__ficha:not(.on) { opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 200ms linear, translate 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 200ms; }
  .cp--seg .cp__ficha--clt:not(.on) { translate: -18px 0; } .cp--seg .cp__ficha--conex:not(.on) { translate: 18px 0; }
  .anima .cp.cp--seg.vista .cp__ficha--conex { transition-delay: 0ms; }
}

/* computador também: a diferença além do preço em três colunas (tópico, assistente, Conex), com cabeçalho */
.cp__dif { display: grid; gap: 10px; max-width: 1080px; margin: clamp(28px, 4vw, 48px) auto 0; }
.cp__dif-l { display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.cp__dif-l > b { align-self: center; font: 500 1.2rem/1.2 var(--f-titulo); color: #0B2035; }
.cp__dif-cab > span { display: flex; align-items: center; gap: 8px; padding: 0 18px; font: 600 0.72rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #5B6875; }
.cp__dif-cab .cp__dif-cc { color: #0B2035; }
.cp__dif-cab img { width: 22px; height: 22px; object-fit: contain; }
.cp__dif .cp__a, .cp__dif .cp__b { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border-radius: 16px; font-size: 1rem; line-height: 1.4; }
.cp__dif .cp__a { background: #FFFCF5; color: #5B6875; box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.12); }
.cp__dif .cp__b { background: linear-gradient(160deg, #17426A, #0B2035); color: #FFFFFF; font-weight: 600; box-shadow: 0 18px 30px -24px rgba(11, 32, 53, 0.8); }
.cp__dif .cp__a svg, .cp__dif .cp__b svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.cp__dif .cp__a svg { color: #9AA6B2; } .cp__dif .cp__b svg { color: #D8AC52; }
/* entram com a seção */
.anima .cp .cp__dif-l { opacity: 0; transform: translateY(12px); transition: opacity 500ms linear, transform 800ms cubic-bezier(.16, 1, .3, 1); }
.anima .cp.vista .cp__dif-l { opacity: 1; transform: none; }
.anima .cp.vista .cp__dif-l:nth-child(2) { transition-delay: 500ms; } .anima .cp.vista .cp__dif-l:nth-child(3) { transition-delay: 600ms; } .anima .cp.vista .cp__dif-l:nth-child(4) { transition-delay: 700ms; }
@media (max-width: 899px) {
  .cp__dif { gap: 8px; margin-top: 32px; }
  .cp__dif-l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .cp__dif-l > b { grid-column: 1 / -1; margin: 10px 0 0 2px; font-size: 1.125rem; }
  .cp__dif-cab > span:first-child { display: none; }
  .cp__dif-cab > span { padding: 0 4px; font-size: 0.6875rem; letter-spacing: 0.1em; }
  .cp__dif .cp__a, .cp__dif .cp__b { gap: 7px; padding: 12px 12px 14px 10px; border-radius: 14px; font-size: 0.9375rem; }
  .cp__dif .cp__a svg, .cp__dif .cp__b svg { width: 16px; height: 16px; margin-top: 2px; }
  /* no celular a seção já entra vista quando chega aqui; as linhas não esperam a animação */
  .anima .cp.vista .cp__dif-l { transition-delay: 0ms !important; }
}
@media (prefers-reduced-motion: reduce) { .cp__seg-cursor, .cp__ficha, .cp__dif-l { transition: none !important; } }

/* ===== 4 · Contato (cta-final) ===== */
/* JM, 07/10: no celular e no tablet, a conversa inteira (seis balões parados) sai; entra uma prévia curta do WhatsApp logo
   acima do botão, que se digita sozinha quando chega à tela. No computador nada muda (o tablet continua). */
.ct-mini { display: none; }
@media (max-width: 1023px) {
  .ct-tab { display: none; }
  .ct-mini { order: 3; display: grid; gap: 12px; width: 100%; max-width: 460px; padding: 14px 14px 12px; border-radius: 22px;
    background: rgba(6, 20, 33, 0.55); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.14), 0 30px 60px -34px rgba(0, 0, 0, 0.8); }
  .cta-final__acoes { order: 4; } .cta-final__contatos { order: 5; }
  .ct-mini__cab { display: flex; align-items: center; gap: 10px; padding: 0 2px 12px; border-bottom: 1px solid rgba(233, 242, 248, 0.12); }
  .ct-mini__av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #F4F7FA; }
  .ct-mini__av img { width: 26px; height: 26px; object-fit: contain; }
  .ct-mini__nome { flex: 1; display: grid; gap: 2px; }
  .ct-mini__nome b { font-size: 0.9375rem; font-weight: 640; color: #FFFFFF; }
  .ct-mini__nome i { display: grid; font: 500 0.75rem/1.2 var(--f-texto); font-style: normal; color: #9BE2B2; }
  .ct-mini__nome i span { grid-area: 1 / 1; transition: opacity 200ms linear; }
  .ct-mini__nome i .b, .ct-mini[data-digitando] .ct-mini__nome i .a { opacity: 0; }
  .ct-mini[data-digitando] .ct-mini__nome i .b { opacity: 1; }
  .ct-mini__app { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #25D366; color: #FFFFFF; }
  .ct-mini__app .bt__whats, .ct-mini__app svg { width: 19px; height: 19px; }

  .ct-mini__msgs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .ct-mini__m { display: block; max-width: 86%; padding: 10px 13px 6px; border-radius: 16px 16px 16px 5px; background: rgba(233, 242, 248, 0.08); color: #F4F7FA;
    box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.1); transform-origin: 0 100%; }
  .ct-mini__m p { font-size: 0.9375rem; line-height: 1.42; }
  .ct-mini__m small { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 3px; font-size: 0.6875rem; color: #C3D0DD; font-variant-numeric: tabular-nums; }
  .ct-mini__m--voce { justify-self: end; border-radius: 16px 16px 5px 16px; background: rgba(88, 145, 175, 0.3); box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.4); transform-origin: 100% 100%; }
  /* a resposta e o "digitando…" ocupam o mesmo lugar: a altura da resposta já está reservada */
  .ct-mini__vez { display: grid; }
  .ct-mini__vez > * { grid-area: 1 / 1; align-self: start; justify-self: start; }
  .ct-mini__digita { display: flex; gap: 5px; padding: 13px 15px; border-radius: 16px 16px 16px 5px; background: rgba(233, 242, 248, 0.08); opacity: 0; }
  .ct-mini__digita i { width: 7px; height: 7px; border-radius: 50%; background: #C9D8E4; animation: ct-ponto 1s ease-in-out infinite; }
  .ct-mini__digita i:nth-child(2) { animation-delay: 150ms; } .ct-mini__digita i:nth-child(3) { animation-delay: 300ms; }

  .ct-mini__campo { display: flex; align-items: center; gap: 8px; }
  .ct-mini__campo span { flex: 1; min-width: 0; min-height: 40px; display: flex; align-items: center; padding: 6px 14px; border-radius: 20px; background: rgba(233, 242, 248, 0.07);
    box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.1); font-size: 0.875rem; line-height: 1.3; color: #F4F7FA; overflow: hidden; white-space: nowrap; }
  .ct-mini__campo span:empty::before { content: 'Mensagem'; color: #8FA3B5; }
  .ct-mini__campo span.cursor::after { content: ''; flex: none; width: 1.5px; height: 1.1em; margin-left: 1px; background: #E8CE93; animation: ct-mini-cursor 900ms steps(1) infinite; }
  .ct-mini__campo i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(233, 242, 248, 0.08); color: #C9D8E4; transition: background-color 200ms linear, color 200ms linear; }
  .ct-mini__campo i svg { width: 19px; height: 19px; }
  .ct-mini[data-escrevendo] .ct-mini__campo i { background: #25D366; color: #FFFFFF; }

  /* com animação: as mensagens nascem escondidas (o lugar já existe) e entram quando a conversa chega nelas */
  .ct-mini--vivo .ct-mini__m { opacity: 0; scale: 0.94; translate: 0 8px; transition: opacity 260ms linear, scale 420ms cubic-bezier(.3, 1.3, .5, 1), translate 420ms cubic-bezier(.22, 1, .36, 1); }
  .ct-mini--vivo .ct-mini__m.on { opacity: 1; scale: 1; translate: 0 0; }
  .ct-mini--vivo .ct-mini__digita { transition: opacity 200ms linear; }
  .ct-mini--vivo[data-digitando] .ct-mini__digita { opacity: 1; }
  .cta-final__acoes { margin-top: -4px; }
}
@keyframes ct-mini-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ct-mini__digita i, .ct-mini__campo span::after { animation: none; } }

/* 360: rótulos que quebravam em duas linhas */
@media (max-width: 379px) {
  .cf2-fase { grid-template-rows: 172px minmax(0, 1fr) auto; }
  .cf2-fase__cab .cf2-placa { width: 46px; border-radius: 13px; }
  .cp--seg .cp__total span { white-space: nowrap; letter-spacing: 0.08em; font-size: 0.75rem; }
  .cp--seg .cp__total b { font-size: 2rem; }
  .cp__pe .bt__texto { font-size: 0.875rem; white-space: nowrap; }
}

/* zzz-m-int.css */
/* ---------- v26 · internas ERP e Mapeamento de processos no celular (JM, 07/10) ----------
   Só celular (até 899 px; até 1023 onde a seção já quebra em 1023). O computador não muda. */

/* peças que só existem no celular */
.exm, .ex__pe, .ef__rastreio, .ec__escolha, .pf__pe-elos, .pp__dica, .pp__ic, .pp__chev, .pm__num, .pm__res { display: none; }

/* ===== ERP › topo (v31 d-erp: o cartão .exm saiu; o celular com o app está em zzzzz-v31-d-erp.css) ===== */
@media (max-width: 899px) {
  .ex__cena, .ex__lado { display: none !important; }
  .ex:not(.ex--vivo) .ex__palco { padding: calc(var(--altura-topo) + 36px) 0 calc(var(--onda-h) + 30px); }
  .ex__pe { display: block; position: absolute; z-index: 3; left: 0; bottom: -1px; width: 100%; height: calc(var(--onda-h) + 2px); fill: #F1E5CC; }
}

/* ===== ERP › os módulos conversam (v31 d-erp: o painel branco saiu; o cartão da Conex está em zzzzz-v31-d-erp.css) ===== */

/* ===== ERP › tem sistema ou vai trocar: a placa no ponto de decisão, dois ramos, e o caminho escolhido ===== */
@media (max-width: 899px) {
  .ec--escolha .ec__t { margin-bottom: 18px; }
  .ec--escolha .ec__placa { display: none; }
  .ec--escolha .ec__escolha { display: grid; justify-items: center; }
  .ec__no { display: grid; place-items: center; width: 92px; height: 92px; }
  .ec__no img { width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.45)); }
  .ec__ramo { display: block; width: 100%; height: 40px; margin-top: -2px; overflow: visible; }
  .ec__ramo path { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke 350ms; }
  .ec__ramo .ec__ramo-f, .ec__ramo path.on { stroke: #D8AC52; }
  .ec__seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .ec__seg button { all: unset; box-sizing: border-box; position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 54px; padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: center;
    background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); font: 600 0.95rem/1.2 var(--f-texto); color: #C9D8E4; transition: color 300ms 80ms; -webkit-tap-highlight-color: transparent; }
  .ec__pint { position: absolute; inset: 0; z-index: -1; background: #F1E5CC; transform-origin: 50% 100%; scale: 1 0; transition: scale 420ms cubic-bezier(.65, 0, .25, 1); }
  .ec__seg button[aria-selected="true"] { color: #0B2035; }
  .ec__seg button[aria-selected="true"] .ec__pint { scale: 1 1; }
  .ec__seg button:active:not([aria-selected="true"]) .ec__pint { scale: 1 0.18; }
  .ec__seg button:focus-visible { outline: 3px solid #D8AC52; outline-offset: 2px; }
  /* o caminho continua da opção escolhida até o cartão */
  .ec--escolha .ec__palco { position: relative; margin-top: 16px; }
  .ec--escolha .ec__palco::before { content: ''; position: absolute; top: 0; left: calc(25% - 3.5px); width: 2px; height: 16px; margin-top: -16px; background: #D8AC52; transition: left 400ms cubic-bezier(.65, 0, .25, 1); }
  .ec--escolha[data-ec="1"] .ec__palco::before { left: calc(75% + 1.5px); }
  .ec--escolha .ec__lado:not(.on) { display: none; }
  .ec--escolha .ec__lado .ec__rot { display: none; }
  /* entrada: a placa, depois os ramos se desenham, depois as opções e o cartão */
  .anima .ec--escolha .ec__no { opacity: 0; scale: 0.85; transition: opacity 500ms linear, scale 800ms cubic-bezier(.3, 1.3, .5, 1); }
  .anima .ec--escolha .ec__ramo path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 600ms cubic-bezier(.4, 0, .2, 1) 300ms, stroke 350ms; }
  .anima .ec--escolha .ec__seg { opacity: 0; translate: 0 16px; transition: opacity 500ms linear 450ms, translate 800ms cubic-bezier(.16, 1, .3, 1) 450ms; }
  .anima .ec--escolha.vista .ec__no { opacity: 1; scale: 1; }
  .anima .ec--escolha.vista .ec__ramo path { stroke-dashoffset: 0; }
  .anima .ec--escolha.vista .ec__seg { opacity: 1; translate: 0 0; }
  .anima .ec--escolha .ec__lado { transition-delay: 550ms; }
}

/* ===== Processos › topo: a folha embaixo do texto, sem o fio grosso do cabeçalho; os elos vão para o pé ===== */
@media (max-width: 899px) {
  .pf__cab { padding-bottom: 0; border-bottom: 0; }
  .pf__cab img { display: none; }
  .pf__pe { display: flex; align-items: flex-end; gap: 12px; }
  .pf__pe-elos { display: block; width: 34px; height: 34px; object-fit: contain; margin-bottom: 14px; }
}
/* a fresta de 1 px no começo da 2ª seção: a onda termina numa fração de pixel e, na borda serrilhada, o fundo marinho
   do topo aparecia por baixo. A onda passa 2 px para dentro da seção de marfim e cobre a emenda */
@media (max-width: 1023px) {
  .ph + .onda--sobre svg { height: calc(100% + 2px); }
}

/* ===== Processos › POPs: as áreas viram botões que pedem toque, com a instrução verdadeira ===== */
@media (max-width: 1023px) {
  .pp__texto > p.pp__dica { display: flex; max-width: none; align-items: center; gap: 8px; margin: 8px 0 -8px; font: 600 0.72rem/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #5E450D; }
  .pp__dica svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .pp__abas { gap: 10px; }
  .pp__abas button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 10px 8px; min-height: 84px; padding: 14px; border-radius: 16px;
    background: #FBF8F2; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.12), 0 10px 20px -16px rgba(11, 32, 53, 0.6); -webkit-tap-highlight-color: transparent; }
  .pp__ic { display: block; grid-column: 1; grid-row: 1; width: 22px; height: 22px; color: #8C7A52; transition: color 300ms 120ms; }
  .pp__chev { display: block; grid-column: 2; grid-row: 1; justify-self: end; width: 18px; height: 18px; opacity: 0.55; transition: rotate 380ms cubic-bezier(.65, 0, .25, 1), opacity 300ms; }
  .pp__aba-t { grid-column: 1 / -1; grid-row: 2; font-size: 1rem; white-space: nowrap; }
  .pp__abas button[aria-selected="true"] { box-shadow: 0 14px 24px -16px rgba(11, 32, 53, 0.8); }
  .pp__abas button[aria-selected="true"] .pp__ic { color: #E8CE93; }
  /* a aba escolhida aponta para a folha logo abaixo */
  .pp__abas button[aria-selected="true"] .pp__chev { rotate: 90deg; opacity: 1; color: #E8CE93; }
  .pp__abas button:active:not([aria-selected="true"]) .pp__pint { scale: 1 0.16; }
  .pp__abas button:active:not([aria-selected="true"]) { color: #0B2035; }
  .pp__pilha { margin-top: 6px; }
}

/* ===== Processos › como o mapeamento acontece: linha do tempo vertical, sem o celular e sem nada preso à rolagem ===== */
@media (max-width: 1023px) {
  .pm__fone, .pm__onda { display: none !important; }
  .pm__palco { display: block; min-height: 0; }
  .pm__marcos { --pm-p: 1; position: relative; display: grid; gap: 14px; padding-left: 46px; }
  /* o fio da linha do tempo: base clara e o dourado que avança até a última etapa que entrou */
  .pm__marcos::before, .pm__marcos::after { content: ''; position: absolute; left: 15px; top: 34px; bottom: 34px; width: 2px; border-radius: 2px; background: rgba(11, 32, 53, 0.12); }
  .pm__marcos::after { background: #C8962F; transform-origin: 50% 0; scale: 1 var(--pm-p); transition: scale 800ms cubic-bezier(.22, 1, .36, 1); }
  .pm__m { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 8px; width: auto; margin: 0 !important; padding: 18px; border-radius: 20px;
    grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; box-shadow: 0 1px 0 rgba(11, 32, 53, 0.04), 0 22px 40px -30px rgba(11, 32, 53, 0.55), inset 0 0 0 1px rgba(11, 32, 53, 0.06); }
  .pm__m.ativo { box-shadow: 0 1px 0 rgba(11, 32, 53, 0.04), 0 22px 40px -30px rgba(11, 32, 53, 0.55), inset 0 0 0 1px rgba(11, 32, 53, 0.06); }
  .pm__m > * { opacity: 1 !important; }
  .pm__obj { grid-column: 1; grid-row: 1; width: 52px; height: 52px; border-radius: 15px; }
  .pm__obj img { width: 44px; height: 44px; }
  .pm__m h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .pm__m > p:not(.pm__res) { grid-column: 1 / -1; }
  .pm__num { display: grid; place-items: center; position: absolute; left: -46px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
    background: #0B2035; color: #E8CE93; font: 600 0.85rem/1 var(--f-texto); box-shadow: 0 0 0 5px #F1E5CC; transition: background-color 400ms, color 400ms; }
  .pm__res { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; grid-column: 1 / -1; margin: 4px 0 0 !important; padding-top: 12px; border-top: 1px solid rgba(11, 32, 53, 0.1); }
  .pm__res b { font: 400 1.35rem/1 var(--f-titulo); letter-spacing: -0.01em; color: #0B2035; }
  .pm__res span { font-size: 0.88rem; line-height: 1.3; color: #5B6875; }
  /* cada etapa entra uma vez quando aparece; o número acende junto */
  .anima .pm--linha .pm__m { opacity: 0; transform: none; translate: 0 28px; transition: opacity 450ms linear, translate 700ms cubic-bezier(.16, 1, .3, 1); }
  .anima .pm--linha .pm__m.vista { opacity: 1; translate: 0 0; }
  .anima .pm--linha .pm__m:not(.vista) .pm__num { background: #F1E5CC; color: #0B2035; }
  .anima .pm--linha .pm__marcos { --pm-p: 0; }
  .anima .pm .pm__aparelho { opacity: 1; translate: none; }
}

/* zzz-mobile.css */
/* ---------- QA mobile (07/10) ----------
   Correções de celular apuradas na varredura página por página (390 × 844 e 360 × 780). Carrega por último (zzz-) para
   vencer o zz-tipografia, que fixava o tamanho dos títulos do topo também no celular. Quase nada muda o computador: o
   resto está dentro de max-width, de (hover: none) ou corrige estado que só aparece no toque. As exceções estão marcadas. */

/* rede de segurança: nada que entra de lado pode alargar a página. Com a página "larga", o Chrome do celular estica o
   cabeçalho e a barra fixa além da tela (o Menu saía cortado) e o dedo arrastava a página para o lado.
   overflow: clip não cria rolagem própria, então os palcos presos (sticky) continuam funcionando. */
main, .rodape { overflow-x: clip; }
/* o questionário: os objetos das cenas ainda não visitadas ficavam com 900 px até o JS dar o tamanho (home e /diagnostico) */
.qz { overflow-x: clip; }
.qz-ob { width: 30%; }
/* ERP: o cartão "Vou trocar de sistema" entrava 48 px pela direita e era ele que deixava a página com 418 px */
@media (max-width: 899px) {
  .anima .ec .ec__lado, .anima .ec .ec__lado--troca { translate: 0 32px; }
}

/* hover que grudava depois do toque (o ícone da prancheta ficava marinho sobre marinho e sumia) */
@media (hover: hover) and (pointer: fine){.link-aval--escuro:hover .link-aval__ic{ color: inherit; }}
.link-aval--escuro:focus-visible .link-aval__ic { color: #0B2035; }
@media (hover: hover) and (pointer: fine) { .link-aval--escuro:hover .link-aval__ic { color: #0B2035; } }
@media (hover: none) {
  /* a faixa de depoimentos parava no primeiro toque e não voltava a andar */
  .dp__faixa:hover:not(.parada) .dp__fila { animation-play-state: running; }
  .pi__migalha a:hover { text-decoration-color: inherit; }
  .in-meio a:hover { text-decoration-thickness: auto; text-underline-offset: auto; text-decoration-color: inherit; }
  /* no toque, o preenchimento de baixo para cima acontece enquanto o dedo aperta (o mesmo do hover do computador) */
  .bs-set__item:not(.on) .bs-set__nome:active .bs-set__pint { transform: scaleY(1); }
  .link-aval:active .link-aval__ic { background: #D8AC52; box-shadow: none; }
}

@media (max-width: 1023px) {
  /* títulos do topo: o zz-tipografia travava em 40–43 px e as linhas (nowrap) passavam da margem em 360 e 320 */
  .bh__titulo { font-size: clamp(1.9rem, 10.2vw, 3.4rem); }
  .ph__titulo { font-size: clamp(1.9rem, 10.2vw, 3.4rem); }
  .ex__titulo { font-size: clamp(1.85rem, 0.3rem + 7.2vw, 3.4rem); }
}

@media (max-width: 899px) {
  /* alvos de toque: 44 px sem mudar o desenho (o padding cresce para fora, a margem negativa devolve o espaço) */
  .faq__r-link, .pv__quem a, .cta-final__contatos a, .erro__links a, .texto-legal a[href^="mailto:"] { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .rodape__col ul { gap: 0; }
  .rodape__col a { display: inline-block; padding-block: 11px; }
  .erro__links { gap: 18px 24px; }

  /* Dúvidas: o título não quebra em três linhas e a resposta usa a largura toda */
  .faq .faq__cabeca h2 { max-width: none; }
  .faq--sanfona .faq__r-dentro { padding: 0 18px !important; }

  /* questionário: Voltar e Avançar não encolhem (no 360 a seta de voltar sumia); a trilha é que cede */
  .qz__volta, .qz__vai { flex: none; }
  .qz__trilha { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .qz__trilha i { flex: 0 1 10px; min-width: 4px; }
  .qz__trilha i.atual { flex-basis: 22px; }
  /* o objeto que entra não voa por cima do título da seção nem do cabeçalho (sem cortar a sombra de baixo) */
  .qz__objs { clip-path: inset(0 0 -60px 0 round var(--qr, 0) var(--qr, 0) 0 0); }

  /* BPO › o que é: o 6º item da tela entrava antes do 4º e do 5º; dois fios paralelos antes de "BPO × Contabilidade" */
  .anima .bv.vista [data-bf-i]:nth-child(6) { transition-delay: 1300ms; }
  .bv__frentes li:last-child { border-bottom: 0; }

  /* BPO › o mês: o título do painel passava por baixo da peça 3D */
  .bm__big { max-width: none; padding-right: 72px; }

  /* Comparativo: o valor não quebra longe do R$ */
  .cp__total b { white-space: nowrap; }

  /* Processos › como acontece: o cartão em foco ganhava borda dourada (borda que acende) */
  .pm__m.ativo { box-shadow: 0 26px 44px -30px rgba(11, 32, 53, 0.55); }
  .pp__pilha { height: 400px; }
}

/* BPO › o mês, sem animação: as etapas não ficam apagadas (só a última aparecia) */
.bm:not(.bm--vivo) .bm__semanas li { opacity: 1; }

/* (vale no computador também) rodapé: os títulos têm espaçamento de rótulo, então ficam em caixa alta como os do contato */
.rodape__titulo { text-transform: uppercase; }

/* ---------- home, do topo a Quem é a Conex ---------- */
/* menu do celular: a página não rola por trás da gaveta */
html.menu-aberto { overflow: hidden; }
.gaveta { overscroll-behavior: contain; }

@media (max-width: 900px) {
  /* hero: no 360 cada linha (nowrap) media 368 px e empurrava o bloco 20 px para a direita, cortando o texto */
  .hpl__titulo { font-size: clamp(2.1rem, calc((100vw - 32px) / 8.7), 3.6rem); }
  .hpl__texto { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .dp__nota a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .cf2-painel__volta { min-height: 44px; }
}
@media (max-width: 767px) {
  /* como funciona: o botão da fase ficava atrás da barra fixa (WhatsApp / Avaliação grátis) */
  .cf2 { --aba: 68px; }
  /* a faixa escura do último cartão saltava no meio da frase: o ponto de 32% vinha antes do de 110 px em cartão baixo */
  .cf2-card__fundo::after { background: linear-gradient(180deg, rgba(8, 22, 38, 0.78) 0, rgba(8, 22, 38, 0.35) 110px, rgba(8, 22, 38, 0.7) max(32%, 140px), rgba(8, 22, 38, 0.94) 60%); }
}

/* Quem é a Conex: a cena que sai termina antes de a outra entrar (por meio segundo as duas apareciam sobrepostas) */
.qx--vivo .qx__cena { transition: opacity 200ms linear, translate 400ms cubic-bezier(.22, 1, .36, 1); }
.qx--vivo[data-cena="1"] [data-qx-cena="1"], .qx--vivo[data-cena="2"] [data-qx-cena="2"], .qx--vivo[data-cena="3"] [data-qx-cena="3"],
.qx--vivo[data-cena="4"] [data-qx-cena="4"], .qx--vivo[data-cena="5"] [data-qx-cena="5"] { transition: opacity 400ms linear 200ms, translate 600ms cubic-bezier(.22, 1, .36, 1) 200ms; }

/* depoimentos sem animação: sem as cópias da faixa infinita e com rolagem lateral de verdade */
@media (prefers-reduced-motion: reduce) {
  .dp-card[aria-hidden="true"] { display: none; }
  .dp__fila { flex-wrap: nowrap; }
  .dp__faixa { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--margem); }
  .dp-card { scroll-snap-align: start; }
}

/* ---------- v26 (JM, 07/10) ---------- */
/* o WhatsApp agora é o botão flutuante no canto: o cabeçalho do celular fica só com a marca e o Menu */
@media (max-width: 1099px) { .topo__mobile .bt-icone { display: none; } }

/* zzzz-m27.css */
/* ---------- v27 (09/10) · QA mobile depois da v26 ----------
   Carrega por último. Só celular e tela baixa; o computador não muda. */

/* Contato: enquanto a prévia do WhatsApp digita, o texto do campo (numa linha só) entrava na medida da coluna do
   cartão e a coluna crescia: o e-mail saía cortado na borda e o telefone e o e-mail ficavam lado a lado */
@media (max-width: 1023px) {
  .cta-final__bloco { grid-template-columns: minmax(0, 1fr); }
  .ct-mini { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .cta-final__contatos a { overflow-wrap: anywhere; }
}
/* 360: "Falar no WhatsApp" quebrava em duas linhas dentro do cartão */
@media (max-width: 379px) {
  .cta-final__acoes .bt--grande { gap: 10px; padding-left: 16px; font-size: 1rem; white-space: nowrap; }
}

/* Como funciona em tela baixa (360 × 640, e o iPhone com as barras do Safari): o último cartão tinha 210 px para 233 px
   de conteúdo e o "Ver as entregas" cortava no pé da tela. Aba e título mais baixos, sem a folga de baixo do palco. */
@media (max-width: 767px) and (max-height: 760px) {
  .cf2 { --aba: 58px; }
  .cf2 h2 { font-size: 1.625rem; }
  .cf2--vivo .cf2__palco { padding-bottom: 0; }
  .cf2__pilha { margin-top: 14px; }
  .cf2-card__topo { height: var(--aba); }
  .cf2-card__frase { font-size: 1.1875rem; }
}

/* Quem é a Conex: a onda da seção seguinte subia 150 px por cima do palco (v26) e, em tela baixa, cobria os números e o
   botão do último quadro. O avanço agora acompanha a altura da tela: nada até 640 px, os mesmos 150 px a partir de 790. */
@media (max-width: 767px) {
  .qx.qx--vivo + .onda.onda--sobre { margin-top: calc(-1 * var(--onda-h) - max(0px, min(150px, 100svh - 640px))); }
}

/* rodapé: alvos de toque com 44 px (Política de privacidade e a marca tinham 24 a 30 px) */
@media (max-width: 899px) {
  .rodape__base .rodape__link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 1099px) { .topo__marca { padding-block: 7px; margin-block: -7px; } }
/* contato: "Ou faça a avaliação gratuita" com 44 px de toque (tinha 36) */
@media (max-width: 899px) { .cta-final__aval { min-height: 44px; } }

/* zzzz-qx-manifesto.css */
/* ---------- Manifesto do Quem é a Conex · v30 (JM, 09/10: "mais dinâmico, fluido, natural e profissional") ----------
   Sai o desfoque e a frase seguinte insinuada. Cada palavra mora numa máscara (.qx-w) e sobe da linha em cascata, como em
   revista; a palavra de ligação ("informação", "clareza") viaja da frase de cima até o lugar dela na de baixo (o JS faz o
   voo) enquanto o fio dourado se desenha. A frase da vez fica em destaque; as anteriores recuam. Sem animação: tudo parado. */
.qx__manifesto { position: relative; }
.qx-w { display: inline-block; vertical-align: top; clip-path: inset(-0.5em -0.6em -0.2em -0.6em); }
.qx-wi { display: inline-block; }
.qx--vivo .qx-frase { opacity: 1; transform: none; transition: opacity 800ms linear; }
.qx--vivo .qx-frase .qx-wi { translate: 0 150%; transition: translate 1000ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0) * 1ms); }
.qx--vivo .qx-frase.cheia .qx-wi { translate: 0 0; }
.qx--vivo .qx-frase.passada { opacity: 0.42; }
/* o lugar da palavra que chega voando fica vazio até o pouso */
.qx--vivo .qx-w--alvo .qx-wi { translate: 0 0; transition: none; }
.qx--vivo .qx-w--alvo .qx-liga { opacity: 0; }
.qx-voo { position: absolute; z-index: 2; margin: 0; white-space: nowrap; pointer-events: none; transform-origin: 0 50%; will-change: transform; }
/* o fio se desenha no mesmo tempo do voo */
.qx--vivo .qx-fio { transition: transform 900ms cubic-bezier(.65, 0, .35, 1), opacity 400ms linear; }

/* zzzzz-v31-a-global-home1.css */
/* v31 a-global-home1 · rodada do JM de 10/10. Este arquivo carrega por último. */

/* ---------- Dúvidas (todas as páginas): a troca é desenhada pelo JS (faqV31Trocar) ---------- */
/* o fio entre as perguntas mora no topo de cada pergunta (e num fio final), para deslizar junto com ela */
.faq--sanfona { --faq-fio: rgba(11, 32, 53, 0.16); }
.faq:not(.tom-marfim) .faq--sanfona { --faq-fio: rgba(255, 255, 255, 0.14); }
.faq--sanfona .faq__r { border-bottom: 0 !important; }
.faq--sanfona .faq__perguntas > .faq__q:not(:first-child) { box-shadow: inset 0 1px 0 var(--faq-fio); }
.faq__fio-fim { display: block; height: 1px; background: var(--faq-fio); }
/* o texto da resposta entra e sai pelas animações do JS; sem a transição antiga, que atrasava o texto */
.faq--sanfona .faq__r-dentro, .faq--sanfona .faq__r--ativa .faq__r-dentro { transition: none; }

/* ---------- botão de WhatsApp do topo (internas e home), no celular ---------- */
/* JM, 10/10: "é pra ter destaque, mas um destaque proporcional, não tão grande e extenso em largura". Sai da largura
   toda e dos 70 px de altura: o botão do tamanho do texto, 56 px de altura (alvo de toque folgado, acima de 44). */
@media (max-width: 899px) {
  :is(.bh__acoes, .ex__acoes, .ph__acoes, .pi__acoes) { width: auto; }
  :is(.bh__acoes, .ex__acoes, .ph__acoes, .pi__acoes, .hpl__acoes) .bt--grande { width: auto; min-height: 56px; padding: 0 7px 0 20px; gap: 12px; font-size: 1rem; justify-content: flex-start; }
  :is(.bh__acoes, .ex__acoes, .ph__acoes, .pi__acoes, .hpl__acoes) .bt--grande .bt__caixa { width: 42px; height: 42px; border-radius: 9px; }
  :is(.bh__acoes, .ex__acoes, .ph__acoes, .pi__acoes, .hpl__acoes) .bt--grande .bt__whats { width: 20px; height: 20px; }
}

/* ---------- Cinco frentes no celular: Gestão eficiente e Treinamento abrem o "o que inclui" no lugar ---------- */
@media (max-width: 899px) {
  .leque .leque__card[data-leque-fica] .lq-verso { display: flex; height: 74%; padding: 14px 11px 12px; gap: 7px; justify-content: flex-start;
    background: #0A2137; translate: 0 101%; transition: translate 460ms cubic-bezier(.22, 1, .36, 1); }
  .leque .leque__card.lq-v31-aberto .lq-verso { translate: 0 0; }
  .lq-verso__tit { font-family: var(--f-titulo); font-size: 1.0625rem; line-height: 1.1; color: #FFFFFF; }
  .leque .leque__card[data-leque-fica] .lq-verso__rot { font-size: 0.625rem; }
  .leque .leque__card[data-leque-fica] .lq-verso__lista { gap: 5px; }
  .leque .leque__card[data-leque-fica] .lq-verso__lista > span { gap: 5px; font-size: 0.75rem; line-height: 1.3; }
  .leque .leque__card[data-leque-fica] .lq-verso__lista svg { width: 13px; height: 13px; }
  .leque .leque__card[data-leque-fica] .lq-verso__ir { display: none; }
  .leque .leque__card[data-leque-fica] .lq-ir svg { transition: rotate 360ms cubic-bezier(.22, 1, .36, 1); }
  .leque .leque__card.lq-v31-aberto .lq-ir svg { rotate: 45deg; }
  .leque .leque__card.lq-v31-aberto .lq-txt { opacity: 0; transition: opacity 160ms linear; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .leque .leque__card[data-leque-fica] .lq-verso { transition: none; } }

/* ---------- Depoimentos no celular: cartões menores, duas fileiras, ritmo de leitura ---------- */
.dp__fila--v31b { display: none; }
@media (max-width: 899px) {
  .dp__faixa--v31 { display: grid; gap: 4px; margin-top: 22px; }
  .dp__faixa--v31 .dp__fila { gap: 12px; padding: 4px 12px 8px 0; animation-duration: 55s; }
  .dp__faixa--v31 .dp__fila--v31b { display: flex; animation-direction: reverse; animation-duration: 62s; }
  .dp__faixa--v31 .dp-card { width: 206px; padding: 14px 13px 13px; border-radius: 16px; }
  .dp__faixa--v31 .dp-card__topo { margin-bottom: 8px; padding-right: 30px; gap: 6px; }
  .dp__faixa--v31 .dp-card__txt { font-size: 0.75rem; line-height: 1.45; }
  .dp__faixa--v31 .dp-card__quem { margin-top: 10px; gap: 9px; }
  .dp__faixa--v31 .dp-card__av { width: 28px; height: 28px; font-size: 0.8125rem; }
  .dp__faixa--v31 .dp-card__nome cite { font-size: 0.8125rem; }
  .dp__faixa--v31 .dp-card__nome span { font-size: 0.75rem; }
  .dp__faixa--v31 .dp-card__aspas { top: 13px; right: 14px; width: 22px; }
}

/* ---------- Quatro resultados: modal do cartão (celular e tablet) ---------- */
html.rcm-aberto, html.rcm-aberto body { overflow: hidden; overscroll-behavior: none; }
.rcm { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 16px; border: 0; background: rgba(4, 13, 24, 0.62);
  display: none; place-items: center; overflow: hidden; color: #F4F7FA; }
.rcm[open] { display: grid; }
.rcm::backdrop { background: transparent; }
.rcm__painel { position: relative; width: min(100%, 460px); max-height: min(86svh, 720px); overflow: hidden auto; overscroll-behavior: contain; border-radius: 26px;
  background: #0B2035; box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.85); transform-origin: 0 0; }
.rcm__fechar { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(7, 22, 38, 0.72); color: #FFFFFF; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rcm__fechar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rcm__fechar:active { scale: 0.94; }
.rcm__fechar:focus-visible { outline: 2px solid #F1DDA8; outline-offset: 2px; }
.rcm__conteudo { display: grid; gap: 0; padding: 0 22px 22px; }
.rcm__foto { position: relative; margin: 0 -22px; height: 200px; overflow: hidden; }
.rcm__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcm__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 32, 53, 0) 40%, rgba(11, 32, 53, 0.85) 82%, #0B2035 100%); }
.rcm__tit { position: relative; margin: -34px 0 0; font-family: var(--f-titulo); font-size: 1.75rem; font-weight: 500; line-height: 1.08; letter-spacing: -0.012em; color: #FFFFFF; }
.rcm__txt { margin: 12px 0 0; font-size: 1rem; line-height: 1.5; color: #D9E5EE; }
.rcm .pl { margin-top: 20px; }
.rcm .rcm__cta { width: 100%; margin-top: 22px; min-width: 0; }
.rcm .rcm__cta .bt__texto { min-width: 0; white-space: normal; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .rcm__fechar:active { scale: none; } }

/* zzzzz-v31-b-home2.css */
/* ===================== v31 · frente b-home2 (JM, 10/10) =====================
   Home, parte 2: Quatro fases, Quem é a Conex, comparativo e a ordem do fim da página. Carrega por último. */

/* ===== 1 · Quatro fases no celular (bloco .fz; a pilha de cartões fica só no computador) ===== */
.fz, .fz__argola { display: none; }
@media (max-width: 899px) {
  .cf2 .cf2__pilha { display: none; }
  /* sem a pilha presa, o palco é só o título e o bloco; overflow clip (e não hidden) para o palco preso funcionar */
  .cf2:not(.cf2--vivo) .cf2__palco { min-height: 0; overflow: clip; padding-bottom: calc(var(--onda-h) + 8px); }
  .fz { display: block; position: relative; z-index: 3; margin: clamp(18px, 3svh, 28px) var(--margem) 0; }
  .fz__lista { margin: 0; padding: 0; list-style: none; }
  /* tablet em pé: o palco não passa de 560 px, centrado */
  .fz { margin-inline: max(var(--margem), calc((100% - 560px) / 2)); }

  /* --- partes de um cartão de fase (A e C usam o cartão inteiro; B usa objeto, nó e texto) --- */
  .fz-c__foto { position: absolute; inset: 0 0 auto; height: var(--fh, 46%); overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 52%, transparent 100%); }
  .fz-c__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
  .fz-c:nth-child(3) .fz-c__foto img { object-position: 64% 60%; }
  .fz-c__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 32, 53, 0.08) 0%, rgba(11, 32, 53, 0.3) 70%, rgba(11, 32, 53, 0.6) 100%); }
  /* a foto ocupa o que sobra acima do texto (o texto tem ~260 px), sem faixa vazia no meio em tela alta */
  :is([data-fases="a"], [data-fases="c"]) .fz--vivo .fz__lista { --fh: max(42%, calc(100% - 262px)); }
  .fz-c__obj { display: block; width: 116px; aspect-ratio: 1; }
  .fz-c__obj img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.45)); }
  .fz-c__txt { display: grid; justify-items: start; gap: 10px; }
  .fz-c__quando { margin: 0; font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase; color: #E8CE93; }
  .fz-c__nome { margin: 0; font: 400 2.5rem/1 var(--f-titulo); letter-spacing: -0.025em; color: #FFFFFF; }
  .fz-c__frase { margin: 0; max-width: 30ch; font: 400 1.1875rem/1.32 var(--f-titulo); color: #E4ECF3; text-wrap: pretty; }
  .fz-c__cta { margin-top: 6px; white-space: nowrap; }
  .fz-c__no { display: none; }

  /* --- índice das quatro fases: o nome e um traço que enche com a rolagem --- */
  .fz__indice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
  .fz__indice li { display: grid; gap: 7px; min-width: 0; font: 600 0.75rem/1.1 var(--f-texto); color: rgba(233, 242, 248, 0.5); transition: color 300ms linear; }
  .fz__indice li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fz__indice li.on { color: #FFFFFF; }
  .fz__indice i { display: block; height: 3px; border-radius: 2px; background: rgba(233, 242, 248, 0.16); overflow: hidden; }
  .fz__indice b { display: block; height: 100%; background: #D8AC52; transform-origin: 0 50%; transform: scaleX(var(--enche, 1)); }
  .fz:not(.fz--vivo) .fz__indice { display: none; }

  /* sem animação (ou movimento reduzido): as quatro fases uma embaixo da outra, inteiras */
  .fz:not(.fz--vivo) .fz__lista { display: grid; gap: 16px; }
  .fz:not(.fz--vivo) .fz-c { position: relative; display: grid; gap: 14px; padding: 18px; border-radius: 22px; background: rgba(6, 20, 33, 0.5); box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.1); }
  .fz:not(.fz--vivo) .fz-c__foto { display: none; }
  .fz:not(.fz--vivo) .fz-c__obj { width: 72px; }

  /* =============== A · palco: um cartão, a fase troca no lugar =============== */
  [data-fases="a"] .fz--vivo .fz__trilho { height: calc(100svh + 3 * 34svh + 16svh); }
  :is([data-fases="a"], [data-fases="c"]) .fz--vivo .fz__palco { position: sticky; top: 0; display: flex; flex-direction: column; height: 100svh;
    padding: calc(var(--altura-topo) + 14px) 0 clamp(14px, 2.4svh, 24px); }
  :is([data-fases="a"], [data-fases="c"]) .fz--vivo .fz__lista { position: relative; flex: 1; min-height: 0; }
  [data-fases="a"] .fz--vivo .fz__lista { border-radius: 26px; overflow: hidden; background: #0B2035;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(233, 242, 248, 0.1); }
  [data-fases="a"] .fz--vivo .fz-c { --d: 0; position: absolute; inset: 0; pointer-events: none; }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="on"] { pointer-events: auto; }
  [data-fases="a"] .fz--vivo .fz-c__foto { opacity: 0; scale: 1.06; translate: 0 calc(var(--d) * -18px); transition: opacity 520ms linear, scale 900ms cubic-bezier(.22, 1, .36, 1); }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="on"] .fz-c__foto { opacity: 1; scale: 1; }
  [data-fases="a"] .fz--vivo .fz-c__obj { position: absolute; right: 14px; top: calc(var(--fh) - 104px); width: 124px; z-index: 2;
    opacity: 0; transform: translateY(calc(var(--d) * -26px)) rotate(calc(var(--d) * -10deg)); scale: 0.55; rotate: -16deg;
    transition: opacity 260ms linear, scale 700ms cubic-bezier(.34, 1.45, .5, 1), rotate 700ms cubic-bezier(.34, 1.45, .5, 1); }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="on"] .fz-c__obj { opacity: 1; scale: 1; rotate: 0deg; transition-delay: 120ms; }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="antes"] .fz-c__obj { rotate: 18deg; scale: 0.7; }
  [data-fases="a"] .fz--vivo .fz-c__txt { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; }
  /* o texto troca no lugar: o que sai sobe e some, o que entra sobe de baixo, linha a linha */
  [data-fases="a"] .fz--vivo .fz-c__txt > * { opacity: 0; translate: 0 18px; transition: opacity 240ms linear, translate 240ms ease-in; }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="antes"] .fz-c__txt > * { translate: 0 -14px; }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="on"] .fz-c__txt > * { opacity: 1; translate: 0 0; transition: opacity 420ms linear, translate 640ms cubic-bezier(.22, 1, .36, 1); }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="on"] .fz-c__txt > :nth-child(1) { transition-delay: 160ms; }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="on"] .fz-c__txt > :nth-child(2) { transition-delay: 220ms; }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="on"] .fz-c__txt > :nth-child(3) { transition-delay: 290ms; }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="on"] .fz-c__txt > :nth-child(4) { transition-delay: 360ms; }

  /* =============== B · linha do tempo vertical, sem prender =============== */
  [data-fases="b"] .fz__indice { display: none; }
  [data-fases="b"] .fz__lista { position: relative; display: grid; gap: clamp(36px, 6svh, 52px); padding: 6px 0 8px 46px; }
  /* o fio: o trilho apagado e o dourado que desce com a rolagem */
  [data-fases="b"] .fz__lista::before, [data-fases="b"] .fz__lista::after { content: ''; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: rgba(233, 242, 248, 0.14); }
  [data-fases="b"] .fz--vivo .fz__lista::after { background: linear-gradient(180deg, #E8CE93, #D8AC52); transform-origin: 50% 0; transform: scaleY(var(--fio, 0)); }
  [data-fases="b"] .fz:not(.fz--vivo) .fz__lista::after { display: none; }
  [data-fases="b"] .fz-c { position: relative; display: grid; gap: 14px; }
  [data-fases="b"] .fz-c__foto { display: none; }
  [data-fases="b"] .fz-c__no { position: absolute; left: -38px; top: 44px; display: block; width: 16px; height: 16px; border-radius: 50%;
    background: #0B2035; box-shadow: inset 0 0 0 2px rgba(233, 242, 248, 0.3); transition: box-shadow 400ms linear, background-color 400ms linear; }
  [data-fases="b"] .fz-c[data-lado="on"] .fz-c__no, [data-fases="b"] .fz:not(.fz--vivo) .fz-c__no { background: #D8AC52; box-shadow: 0 0 0 5px #0B2035, inset 0 0 0 2px #E8CE93; }
  /* o objeto se monta: a placa de vidro abre, o objeto cai girando e assenta, a sombra cresce embaixo */
  [data-fases="b"] .fz-c__obj { position: relative; width: 104px; }
  [data-fases="b"] .fz-c__obj::before { content: ''; position: absolute; inset: 8%; z-index: -1; border-radius: 26px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.32); }
  [data-fases="b"] .fz--vivo .fz-c__obj::before { scale: 0.2; opacity: 0; transition: scale 600ms cubic-bezier(.22, 1, .36, 1), opacity 300ms linear; }
  [data-fases="b"] .fz--vivo .fz-c__obj img { opacity: 0; translate: 0 -46px; rotate: -24deg; scale: 0.6;
    transition: opacity 300ms linear 180ms, translate 820ms cubic-bezier(.34, 1.4, .5, 1) 180ms, rotate 820ms cubic-bezier(.34, 1.4, .5, 1) 180ms, scale 820ms cubic-bezier(.34, 1.4, .5, 1) 180ms; }
  [data-fases="b"] .fz--vivo .fz-c[data-lado="on"] .fz-c__obj::before { scale: 1; opacity: 1; }
  [data-fases="b"] .fz--vivo .fz-c[data-lado="on"] .fz-c__obj img { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
  [data-fases="b"] .fz--vivo .fz-c__txt > * { opacity: 0; translate: 0 14px; transition: opacity 400ms linear, translate 640ms cubic-bezier(.22, 1, .36, 1); }
  [data-fases="b"] .fz--vivo .fz-c[data-lado="on"] .fz-c__txt > * { opacity: 1; translate: 0 0; }
  [data-fases="b"] .fz--vivo .fz-c[data-lado="on"] .fz-c__txt > :nth-child(1) { transition-delay: 380ms; }
  [data-fases="b"] .fz--vivo .fz-c[data-lado="on"] .fz-c__txt > :nth-child(2) { transition-delay: 440ms; }
  [data-fases="b"] .fz--vivo .fz-c[data-lado="on"] .fz-c__txt > :nth-child(3) { transition-delay: 520ms; }
  [data-fases="b"] .fz--vivo .fz-c[data-lado="on"] .fz-c__txt > :nth-child(4) { transition-delay: 600ms; }
  [data-fases="b"] .fz-c__nome { font-size: 2.25rem; }

  /* =============== C · folhinha: as fichas viram para cima, presas pela borda de cima =============== */
  [data-fases="c"] .fz--vivo .fz__trilho { height: calc(100svh + 3 * 36svh + 14svh); }
  [data-fases="c"] .fz--vivo .fz__lista { perspective: 1300px; perspective-origin: 50% 0; margin: 14px 0 22px; }
  [data-fases="c"] .fz--vivo .fz-c { --vira: 0; --fundo: 0; position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: #0B2035;
    box-shadow: 0 24px 40px -26px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(233, 242, 248, 0.12);
    transform-origin: 50% 0; backface-visibility: hidden;
    transform: translateY(calc(min(var(--fundo), 3) * 10px)) scale(calc(1 - min(var(--fundo), 3) * 0.04)) rotateX(calc(var(--vira) * -104deg));
    opacity: calc(1 - max(0, var(--vira) - 0.62) * 3); filter: brightness(calc(1 - min(var(--fundo), 1) * 0.35)); }
  [data-fases="c"] .fz--vivo .fz-c:nth-child(1) { z-index: 4; } [data-fases="c"] .fz--vivo .fz-c:nth-child(2) { z-index: 3; }
  [data-fases="c"] .fz--vivo .fz-c:nth-child(3) { z-index: 2; } [data-fases="c"] .fz--vivo .fz-c:nth-child(4) { z-index: 1; }
  [data-fases="c"] .fz--vivo .fz-c:not([data-lado="on"]) { pointer-events: none; }
  [data-fases="c"] .fz--vivo .fz-c__obj { position: absolute; right: 14px; top: calc(var(--fh) - 104px); width: 120px; z-index: 2; }
  [data-fases="c"] .fz--vivo .fz-c__txt { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; }
  /* a argola da folhinha: os dois elos da marca prendem o bloco na borda de cima */
  [data-fases="c"] .fz--vivo .fz__argola { position: absolute; z-index: 6; left: 50%; top: calc(var(--altura-topo) + 14px + 32px); display: block; translate: -50% 0;
    width: 64px; padding: 6px 10px; border-radius: 14px; background: #0B2035; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(233, 242, 248, 0.14); }
  [data-fases="c"] .fz__elos { display: block; width: 100%; height: auto; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .fz-c__nome { font-size: 2.1rem; }
  .fz-c__frase { font-size: 1.0625rem; }
  .fz-c__txt { gap: 8px; }
  [data-fases="a"] .fz--vivo .fz-c__obj, [data-fases="c"] .fz--vivo .fz-c__obj { width: 96px; top: calc(var(--fh) - 82px); }
}
@media (prefers-reduced-motion: reduce) { .fz *, .fz *::before, .fz *::after { transition: none !important; } }

/* --- 1b · o miolo do painel da fase: quem faz o quê, com os dois meios-elos da marca --- */
@media (max-width: 767px) {
  .cf2-fase__grupos { display: block; }
  .cf2-mo { display: grid; gap: 12px; }
  .cf2-mo__leg { display: flex; justify-content: space-between; align-items: flex-end; margin: 0; font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; }
  .cf2-mo__lc, .cf2-mo__lv { display: inline-flex; align-items: center; gap: 8px; }
  .cf2-mo__lc { color: #8FC0DA; } .cf2-mo__lv { color: #E8CE93; }
  .cf2-mo__marca { width: 28px; height: auto; }
  .cf2-mo__leg b { font: 400 1.375rem/0.8 var(--f-titulo); letter-spacing: 0; color: #FFFFFF; }
  .cf2-mo__barra { display: flex; gap: 4px; height: 8px; margin: 0; }
  .cf2-mo__barra i { flex: 1; border-radius: 4px; background: #5891AF; transform-origin: 0 50%; }
  .cf2-mo__barra i.v { background: #D8AC52; }
  .cf2-mo__lista { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
  .cf2-mo__i { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; font-size: 1rem; line-height: 1.4; color: #FFFFFF; }
  .cf2-mo__i + .cf2-mo__i { border-top: 1px solid rgba(233, 242, 248, 0.1); }
  .cf2-mo__elo { width: 34px; height: auto; overflow: visible; }
  .cf2-mo__elo path { stroke-dasharray: 1; }
  .cf2-mo__elo .apaga { opacity: 0.22; }
  .cf2-mo__i--voce > span { color: #F4E2B4; }
  /* a cada fase que aparece: os trechos da barra enchem em sequência, cada meio-elo se desenha e a entrega entra */
  .anima .cf2-fase:not([hidden]) .cf2-mo__barra i { animation: cf2-mo-enche 520ms cubic-bezier(.22, 1, .36, 1) both; }
  .anima .cf2-fase:not([hidden]) .cf2-mo__elo .acende path { animation: cf2-mo-desenha 700ms cubic-bezier(.65, 0, .35, 1) both; }
  .anima .cf2-fase:not([hidden]) .cf2-mo__elo .acende circle { animation: cf2-mo-ponta 300ms cubic-bezier(.34, 1.5, .5, 1) both; transform-box: fill-box; transform-origin: center; }
  .anima .cf2-fase:not([hidden]) .cf2-mo__i > span { animation: cf2-mo-entra 520ms cubic-bezier(.22, 1, .36, 1) both; }
  .anima .cf2-fase:not([hidden]) .cf2-mo__elo .apaga { animation: cf2-mo-apaga 500ms linear both; }
  .cf2-mo [data-i="0"], .cf2-mo [data-i="0"] path, .cf2-mo [data-i="0"] > span, .cf2-mo [data-i="0"] .apaga { animation-delay: 260ms !important; }
  .cf2-mo [data-i="1"], .cf2-mo [data-i="1"] path, .cf2-mo [data-i="1"] > span, .cf2-mo [data-i="1"] .apaga { animation-delay: 420ms !important; }
  .cf2-mo [data-i="2"], .cf2-mo [data-i="2"] path, .cf2-mo [data-i="2"] > span, .cf2-mo [data-i="2"] .apaga { animation-delay: 580ms !important; }
  .cf2-mo [data-i="0"] circle { animation-delay: 840ms !important; } .cf2-mo [data-i="1"] circle { animation-delay: 1000ms !important; } .cf2-mo [data-i="2"] circle { animation-delay: 1160ms !important; }
}
@keyframes cf2-mo-enche { from { transform: scaleX(0); } }
@keyframes cf2-mo-desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cf2-mo-ponta { from { scale: 0; } }
@keyframes cf2-mo-apaga { from { opacity: 0; } }
@keyframes cf2-mo-entra { from { opacity: 0; translate: 10px 0; } }
@media (prefers-reduced-motion: reduce) { .cf2-mo *, .cf2-mo__elo path, .cf2-mo__elo circle { animation: none !important; } }

/* ===== 2 · Quem é a Conex no celular (componente bh2Quem) ===== */
.qx-passos { display: none; }
@media (max-width: 899px) {
  .qx--m .qx__palco { gap: clamp(72px, 12svh, 112px); padding-top: var(--onda-h); overflow: clip; }
  /* manifesto: um trilho de 250svh com o palco preso; uma frase por vez, no mesmo lugar */
  .qx--m .qx-manif { display: block; align-content: normal; width: 100%; height: calc(100svh + 150svh); }
  .qx-m-palco { position: sticky; top: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center;
    height: 100svh; padding: calc(var(--altura-topo) + 28px) 0 clamp(28px, 6svh, 56px); }
  .qx-m-palco .qx__rot { margin: 0; }
  .qx--m .qx__manifesto { display: grid; width: 100%; font-size: clamp(2.3rem, 1.2rem + 5.4vw, 3rem); line-height: 1.12; }
  .qx--m .qx-fio { display: none; }
  .qx--m .qx__manifesto .qx-frase { grid-area: 1 / 1; align-self: center; }
  .qx--m .qx-frase .qx-wi { translate: 0 125%; opacity: 0; transition: translate 360ms cubic-bezier(.5, 0, .75, 0), opacity 260ms linear; }
  .qx--m .qx-frase[data-passo="antes"] .qx-wi { translate: 0 -70%; opacity: 0; }
  .qx--m .qx-frase[data-passo="on"] .qx-wi { translate: 0 0; opacity: 1; transition: opacity 0ms, translate 1000ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(260ms + var(--d, 0) * 1ms); }
  /* a palavra que passa voando: a de saída some na hora e a de chegada espera o pouso */
  .qx--m .qx-frase[data-passo="antes"] .qx-w:last-child .qx-wi { opacity: 0; transition: none; }
  .qx--m .qx-w--alvo .qx-wi { translate: 0 0; transition: none; }
  .qx--m .qx-w--alvo .qx-liga { opacity: 0; }
  .qx--m .qx-passos { display: flex; gap: 8px; margin: 0; }
  .qx--m .qx-passos i { width: 28px; height: 3px; border-radius: 2px; background: rgba(233, 242, 248, 0.2); transition: background-color 400ms linear; }
  .qx--m .qx-passos i.on { background: #D8AC52; }

  /* as sócias, o que a Conex junta e os números: cada bloco aparece inteiro quando entra na tela */
  .qx.qx--m .qx-pessoa__foto { height: min(50svh, 420px); }
  .qx--m .qx-pessoa__texto { font-size: 1rem; line-height: 1.55; }
  .qx--m .qx__cena:not([data-qx-cena="1"]) > * { opacity: 0; translate: 0 28px; transition: opacity 600ms linear, translate 900ms cubic-bezier(.16, 1, .3, 1); }
  .qx--m .qx__cena.qx-vis > * { opacity: 1; translate: 0 0; }
  .qx--m .qx__cena.qx-vis > :nth-child(2) { transition-delay: 150ms; }
  .qx--m .qx__cena.qx-vis > :nth-child(3) { transition-delay: 280ms; }
  .qx--m .qx__cena.qx-vis > :nth-child(4) { transition-delay: 400ms; }
  .qx--m [data-qx-cena="5"] { gap: 18px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .qx--m .qx-wi, .qx--m .qx__cena > * { transition: none !important; } }
/* computador: o trecho do manifesto ganha +70svh de rolagem (o JS revela a 2ª e a 3ª frase a 45% e 90% de tela) */
@media (min-width: 900px) { .anima .qx.qx--vivo { height: calc(100svh + 4 * 42svh + 96svh); } }

/* ===== 4 · Comparativo (celular e computador) ===== */
/* as marcas planas: a carteira de trabalho (assistente CLT) e os elos vetoriais (Conex), na mesma moldura */
.cp__ficha header, .cp__ficha--clt header { display: flex; align-items: center; gap: 14px; }
.cp__marca { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; }
.cp__ficha--clt .cp__marca { background: #F3EAD7; box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.2); }
.cp__ficha--conex .cp__marca { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.32); }
.cp__marca .cp__ctps { width: 36px; height: 36px; }
.cp__marca .cp__elos { width: 38px; height: auto; }
.cp__seg-bt .cp__ctps, .cp__seg-bt .cp__elos { flex: none; width: 22px; height: 22px; }
.cp__seg-bt .cp__elos { height: auto; }

/* a ficha do assistente: mais contraste com o fundo, o total logo abaixo do nome e a barra do que compõe o custo */
.cp__ficha { align-content: start; }
.cp__ficha--clt { background: #FFFDF8; box-shadow: 0 34px 60px -38px rgba(74, 52, 12, 0.6), inset 0 0 0 1px rgba(11, 32, 53, 0.12); }
.cp__ficha--clt header { border-bottom: 0; padding-bottom: 0; }
.cp__ficha--conex header { border-bottom: 0; padding-bottom: 0; }
.cp__ficha .cp__total { align-items: center; padding: 14px 0; border-block: 1px solid rgba(11, 32, 53, 0.12); }
.cp__ficha--conex .cp__total { border-color: rgba(232, 206, 147, 0.3); }
.cp__ficha--clt .cp__total span { color: #3B4753; }
.cp__parte { display: grid; gap: 8px; }
.cp__barra { display: flex; gap: 3px; height: 12px; margin: 0; overflow: hidden; border-radius: 6px; }
.cp__barra i { display: block; min-width: 0; transform-origin: 0 50%; }
.cp__barra .cp__c--sal { flex: 2000 1 0; } .cp__barra .cp__c--enc { flex: 640 1 0; } .cp__barra .cp__c--pro { flex: 388.89 1 0; }
.cp__barra .cp__c--ben { flex: 900 1 0; } .cp__barra .cp__c--est { flex: 200 1 0; }
.cp__c--sal { background: #3E5A73; } .cp__c--enc { background: #9B3B2E; } .cp__c--pro { background: #C0643F; } .cp__c--ben { background: #D9965C; } .cp__c--est { background: #C9B48E; }
.cp__metade { margin: 0; font-size: 0.875rem; line-height: 1.3; color: #5B6875; }
.cp__metade b { font-weight: 650; color: #3E5A73; }
.cp__ficha--clt dl > div { align-items: flex-start; padding: 10px 0; }
.cp__ficha--clt dl > div:last-child { border-bottom: 0; }
.cp__ficha--clt dt { align-items: flex-start; gap: 10px; color: #0B2035; font-weight: 550; }
.cp__cor { flex: none; width: 10px; height: 10px; margin-top: 0.35em; border-radius: 3px; }
.cp__ficha--clt dt small span { white-space: nowrap; }
.cp__ficha--clt dt small { display: block; margin-top: 3px; font-size: 0.8125rem; font-weight: 400; line-height: 1.35; color: #5B6875; }
.cp__ficha--clt dd { padding-top: 1px; }
/* a barra enche da esquerda para a direita quando a seção entra */
.anima .cp .cp__barra i { transform: scaleX(0); transition: transform 700ms cubic-bezier(.22, 1, .36, 1); }
.anima .cp.vista .cp__barra i { transform: none; }
.anima .cp.vista .cp__barra i:nth-child(2) { transition-delay: 160ms; } .anima .cp.vista .cp__barra i:nth-child(3) { transition-delay: 260ms; }
.anima .cp.vista .cp__barra i:nth-child(4) { transition-delay: 360ms; } .anima .cp.vista .cp__barra i:nth-child(5) { transition-delay: 460ms; }
.anima .cp.vista .cp__barra i:nth-child(1) { transition-delay: 60ms; }

/* a diferença além do preço: uma linha por ponto, o ícone, o assistente em texto e a Conex em marinho, lado a lado */
.cp__dif { gap: 0; max-width: 920px; margin-top: clamp(28px, 4vw, 44px); }
.cp__dif .cp__dif-l { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(11, 32, 53, 0.1); }
.cp__dif .cp__dif-cab { padding: 0 0 8px; border-top: 0; }
.cp__dif .cp__dif-cab > span:first-child { display: block; }
.cp__dif-cab > span { gap: 8px; padding: 0; }
.cp__dif-cab .cp__ctps { width: 20px; height: 20px; }
.cp__dif-cab .cp__elos { width: 24px; height: auto; }
.cp__dif-cab .cp__dif-cc { padding-left: 12px; }
.cp__dif-q { display: flex; align-items: center; gap: 10px; color: #0B2035; }
.cp__dif-q svg { flex: none; width: 30px; height: 30px; }
.cp__dif-q b { font: 600 0.9375rem/1.2 var(--f-texto); }
.cp__dif .cp__a { display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 0.9375rem; line-height: 1.35; color: #5B6875; }
.cp__dif .cp__b { align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 0.9375rem; line-height: 1.3; }
.cp__dif .cp__b svg { margin-top: 0; }
/* a resposta da Conex chega logo depois da linha, do lado do assistente */
.anima .cp .cp__dif-l .cp__b { opacity: 0; translate: -14px 0; transition: opacity 400ms linear, translate 700ms cubic-bezier(.16, 1, .3, 1); }
.anima .cp.vista .cp__dif-l .cp__b { opacity: 1; translate: 0 0; transition-delay: 300ms; }
.anima .cp.vista .cp__dif-l:nth-child(3) .cp__b { transition-delay: 420ms; } .anima .cp.vista .cp__dif-l:nth-child(4) .cp__b { transition-delay: 540ms; }
@media (max-width: 899px) {
  .cp__dif { margin-top: 28px; }
  /* no celular o ponto (ícone e nome) fica na linha de cima e os dois lados embaixo, com a largura toda */
  .cp__dif .cp__dif-l { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 6px 10px; padding: 12px 0; }
  .cp__dif .cp__dif-cab { padding-bottom: 6px; }
  .cp__dif .cp__dif-cab > span:first-child { display: none; }
  .cp__dif-cab > span { font-size: 0.75rem; }
  .cp__dif-cab .cp__dif-cc { padding-left: 10px; }
  .cp__dif-q { grid-column: 1 / -1; gap: 8px; }
  .cp__dif-q svg { width: 24px; height: 24px; }
  .cp__dif-q b { font-size: 0.875rem; }
  .cp__dif .cp__a, .cp__dif .cp__b { font-size: 0.875rem; }
  .cp__dif .cp__b { padding: 9px 10px; gap: 6px; border-radius: 12px; }
  .cp__dif .cp__b svg { width: 15px; height: 15px; }
  .cp--seg .cp__ficha .cp__total { padding: 12px 0; }
  .cp--seg .cp__ficha--clt dl > div { padding: 9px 0; }
}
@media (prefers-reduced-motion: reduce) { .cp__barra i, .cp__dif-l .cp__b { transition: none !important; } }

/* ===== 3 · Ordem do fim da home: o contato vem logo depois das Dúvidas (os dois marinho, sem onda no meio) ===== */
.faq + .cta-final { padding-top: clamp(8px, 2vw, 24px); }

/* zzzzz-v31-c-bpo.css */
/* ---------- v31 c-bpo (JM, 10/10): /bpo-financeiro-recife no celular ----------
   1. .cartao-bpo: o cartão com a identidade da Conex, para trocar os "cartões brancos simples" das internas
   2. topo: o tablet do relatório também no celular, nascendo do pé da primeira tela
   3. o que é: uma frase e o cartão "O que a Conex faz por você" (celular e tablet em pé)
   4. o mês: cartões contínuos com a rolagem (o JS dá a opacidade de cada um)
   5. setores: objetos 3D (Blender) no nicho do arco
   Carrega por último (ordem alfabética). */

/* ---------- 1. cartão Conex ----------
   Marinho em degradê (luz dourada vindo do canto de cima), fio dourado de 1 px por dentro, sombra marinho longa e os
   elos da marca gravados em linha fina no canto de baixo, cortados pela borda (como a marca d'água de uma cédula).
   Variante clara (--claro) para fundo marinho: marfim dourado, o mesmo fio e os elos em ouro velho.
   Nada acende, nada cresce no hover. Uso: <div class="cartao-bpo"> ou <div class="cartao-bpo cartao-bpo--claro"> */
.cartao-bpo { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; color: #F7F3EA;
  background: radial-gradient(120% 70% at 100% 0%, rgba(216, 172, 82, 0.16) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.2), 0 34px 54px -36px rgba(6, 18, 31, 0.9); }
.cartao-bpo::before { content: ''; position: absolute; z-index: -1; right: -16%; bottom: -26%; width: 74%; aspect-ratio: 662 / 412; pointer-events: none;
  background: #E8CE93; opacity: 0.16; -webkit-mask: url('/cartao-elos.svg') center / contain no-repeat; mask: url('/cartao-elos.svg') center / contain no-repeat; }
.cartao-bpo--claro { color: #0B2035;
  background: radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, #FBF6EA 0%, #F4E9D2 60%, #EEDFC1 100%);
  box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.24), 0 34px 54px -36px rgba(0, 0, 0, 0.75); }
.cartao-bpo--claro::before { background: #9A7120; opacity: 0.18; }

/* o cartão do mês adota o cartão Conex claro (no lugar do creme liso) */
.bm__p.cartao-bpo { border-radius: 26px; }
.bm__p.cartao-bpo::before { width: 82%; right: -22%; bottom: -24%; }

/* ---------- 2. topo no celular: o tablet do computador, com o relatório, nascendo do pé da primeira tela ---------- */
@media (max-width: 1023px) {
  .bh__apoio { max-width: 30ch; font-size: 1.12rem; line-height: 1.42; } /* v32 d-bpo: um subtítulo só (saiu o --cel) */
  .bh__grade { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 100svh; padding-bottom: 0; }
  .bh__texto { gap: 14px; }
  .bh__titulo { font-size: clamp(2.15rem, 0.5rem + 8.2vw, 3.4rem); line-height: 1.02; }
  .bh__cena { display: block; position: relative; flex: 1 0 clamp(200px, 36svh, 520px); margin-top: 26px; justify-self: auto; }
  /* o tablet vem do JM inclinado ~11°, tela para a esquerda; aqui fica centrado e cortado pela borda de baixo */
  .bh__tab { position: absolute; top: 0; left: 50%; width: min(460px, 94vw); margin-left: calc(min(460px, 94vw) / -2 + 3vw); }
  .bh__sombra { display: none; }
  /* entrada: chega de baixo, endireitando */
  .anima .bh__cena { translate: 0 90px; rotate: 4deg; animation-delay: 380ms; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .bh__texto { gap: 12px; }
  .bh__titulo { font-size: clamp(2rem, 0.4rem + 7.6vw, 3rem); }
  .bh__cena { margin-top: 20px; }
}

/* ---------- 3. o que é: uma frase e o que a Conex faz por você ---------- */
.bv__uma, .bv-faz { display: none; }
@media (max-width: 1023px) {
  .bv__def, .bv__frentes, .bv__dif, .bv__classe { display: none !important; }
  .bv__verbete { gap: 16px; }
  .bv__uma { display: block; margin: 0; max-width: 30ch; font: 400 1.32rem/1.38 var(--f-titulo); color: #14283B; text-wrap: pretty; }
  .bv-faz { display: grid; gap: 4px; max-width: 520px; margin-top: 8px; padding: 22px 20px 18px; }
  .bv-faz p, .bv-faz ul { margin: 0; padding: 0; list-style: none; }
  .bv-faz__t { font: 500 1.35rem/1.15 var(--f-titulo); letter-spacing: -0.01em; color: #FFFFFF; }
  .bv-faz__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px !important; }
  .bv-faz__lista li { display: grid; justify-items: start; align-content: start; gap: 6px; padding: 14px 10px 16px 0; min-width: 0; }
  .bv-faz__lista li:nth-child(even) { padding-left: 16px; box-shadow: inset 1px 0 0 rgba(232, 206, 147, 0.18); }
  .bv-faz__lista li:nth-child(n+3) { border-top: 1px solid rgba(232, 206, 147, 0.18); }
  .bv-faz__lista img { width: 66px; height: 66px; margin-left: -4px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45)); }
  .bv-faz__lista p { display: grid; gap: 1px; font: 500 0.98rem/1.3 var(--f-texto); color: #C9D8E4; }
  .bv-faz__lista b { font: 500 1.55rem/1.05 var(--f-titulo); letter-spacing: -0.015em; color: #FFFFFF; }
  .bv-faz__voce { display: flex; align-items: center; gap: 12px; margin-top: 6px !important; padding-top: 14px; border-top: 1px solid rgba(232, 206, 147, 0.18); font: 400 1.18rem/1.2 var(--f-titulo); color: #E8CE93; }
  .bv-faz__voce img { width: 40px; height: 40px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45)); }
  /* entrada: o cartão sobe com a seção e os objetos chegam um a um, com um leve passo além */
  .anima .bv .bv-faz__lista img, .anima .bv .bv-faz__voce img { opacity: 0; scale: 0.5; rotate: -14deg; transition: opacity 300ms linear, scale 700ms cubic-bezier(.3, 1.45, .5, 1), rotate 700ms cubic-bezier(.3, 1.45, .5, 1); }
  .anima .bv .bv-faz__lista p { opacity: 0; translate: 0 8px; transition: opacity 400ms linear, translate 600ms cubic-bezier(.16, 1, .3, 1); }
  .anima .bv.vista .bv-faz__lista img, .anima .bv.vista .bv-faz__voce img { opacity: 1; scale: 1; rotate: 0deg; }
  .anima .bv.vista .bv-faz__lista p { opacity: 1; translate: none; }
  .anima .bv.vista .bv-faz__lista li:nth-child(1) > * { transition-delay: 420ms; } .anima .bv.vista .bv-faz__lista li:nth-child(2) > * { transition-delay: 540ms; }
  .anima .bv.vista .bv-faz__lista li:nth-child(3) > * { transition-delay: 660ms; } .anima .bv.vista .bv-faz__lista li:nth-child(4) > * { transition-delay: 780ms; }
  .anima .bv.vista .bv-faz__voce img { transition-delay: 920ms; }
}
@media (max-width: 359px) { .bv-faz__lista b { font-size: 1.35rem; } .bv-faz__lista img { width: 56px; height: 56px; } }

/* ---------- 4. o mês no celular: a fileira anda contínua com a rolagem; a opacidade de cada cartão vem do JS ---------- */
@media (max-width: 1023px) {
  .bm--vivo .bm__p, .bm--vivo .bm__p.on { transition: none; }
}

/* ---------- 5. setores: o objeto 3D de cada setor no nicho do arco (marfim dourado, fio dourado) ----------
   O fundo do arco mora no ::before (para a construção recortar só o arco, nunca o objeto que sai por cima dele) */
.bs-set__arte, .bs-set__arte[class*='bs-set__cor--'] { position: relative; isolation: isolate; background: none; box-shadow: none; }
.bs-set__arte::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, #FBF5E8 0%, #EADBB9 100%); box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.3), 0 18px 26px -18px rgba(0, 0, 0, 0.7); }
.bs-set__arte img, .bs-set__grande img { display: block; height: auto; pointer-events: none; }
.bs-set__arte img { position: absolute; left: -14%; bottom: 6%; width: 128%; max-width: none; filter: drop-shadow(0 8px 8px rgba(11, 32, 53, 0.35)); }
@keyframes v31-bs-obj { from { opacity: 0; scale: 0.55; rotate: -12deg; translate: 0 26px; } 60% { opacity: 1; } to { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0; } }
/* (o objeto do arco fica no lugar por left/width, nunca por translate: a animação mexe no translate) */
@keyframes v31-bs-arco { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (min-width: 900px) {
  .bs-set__s.cartao-bpo { border-radius: 24px; background: linear-gradient(170deg, #132F4B 0%, #0E253C 100%); box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.14), 0 24px 40px -30px rgba(0, 0, 0, 0.8); }
  .bs-set__s.cartao-bpo::before { display: none; }
  .bs-set__s.on .bs-set__arte { opacity: 0.45; }
  /* o palco: arco marinho do cartão Conex, com o objeto grande no alto */
  .bs-set__face, .bs-set__face[class*='bs-set__cor--'] { color: #F7F3EA;
    background: radial-gradient(90% 55% at 50% 30%, rgba(251, 245, 232, 0.14) 0%, rgba(251, 245, 232, 0) 70%), linear-gradient(180deg, #1D456D 0%, #0F2740 100%);
    box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.26), 0 50px 80px -40px rgba(0, 0, 0, 0.8); }
  .bs-set__face[class*='bs-set__cor--'] .bs-set__fn, .bs-set__face[class*='bs-set__cor--'] .bs-set__conex { color: #FFFFFF; }
  .bs-set__face[class*='bs-set__cor--'] .bs-set__rotina { color: #C9D8E4; opacity: 1; }
  .bs-set__face[class*='bs-set__cor--'] .bs-set__conex span { color: #E8CE93; }
  .bs-set__grande img { width: clamp(150px, 15vw, 210px); margin-bottom: 2px; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.45)); }
  /* construção: o objeto chega por baixo, girando um pouco, e assenta */
  .anima .bs-set.vista .bs-set__face.on .bs-set__grande img { animation: v31-bs-obj 900ms cubic-bezier(.3, 1.35, .5, 1) 140ms both; }
}
@media (min-width: 900px) and (max-width: 1199px) { .bs-set__grande img { width: 140px; } }
@media (max-width: 899px) {
  /* o cartão de cada setor é o cartão Conex; o arco é o nicho e o objeto sai por cima dele */
  .bs-set__s.cartao-bpo { border-radius: 24px; padding-top: 46px; }
  .bs-set__s.cartao-bpo::before { width: 90%; right: -26%; bottom: -14%; }
  .bs-set__arte { width: 108px; height: 112px; border-radius: 54px 54px 16px 16px; }
  .bs-set__arte img { left: -16%; width: 132%; bottom: 5%; }
  /* construção (cada cartão, quando entra na tela): o arco se ergue de baixo e o objeto chega girando e assenta */
  .anima .bs-set .bs-set__arte::before { clip-path: inset(100% 0 0 0); }
  .anima .bs-set .bs-set__arte img { opacity: 0; }
  .anima .bs-set.vista .bs-set__s.feito .bs-set__arte::before { animation: v31-bs-arco 650ms cubic-bezier(.65, 0, .25, 1) both; }
  .anima .bs-set.vista .bs-set__s.feito .bs-set__arte img { animation: v31-bs-obj 900ms cubic-bezier(.3, 1.35, .5, 1) 380ms both; }
}
@media (prefers-reduced-motion: reduce) { .bs-set__arte::before, .bs-set__arte img, .bs-set__grande img { animation: none !important; opacity: 1 !important; clip-path: none !important; } }

/* zzzzz-v31-d-erp.css */
/* ---------- v31 d-erp · /implantacao-de-erp (JM, 10/10) ----------
   1. Topo no celular: o módulo Contas a pagar como app de verdade dentro do celular do site (fone-real-dir).
   2/3. Os módulos conversam: o cartão da Conex (.cartao-conex) no lugar do painel branco, com o objeto 3D dos módulos.
   5. Já tem sistema ou vai trocar: a escolha fica; o caminho escolhido vira uma ficha que nasce da aba (pasta),
      com de onde parte e onde chega, e os passos num fio dourado que se desenha a cada troca.
   O que é só do celular fica em @media (max-width: 899px). */

/* ===== 1 · topo (v32 e-erp: o celular com o app saiu; o cartão da implantação está em zzzzzz-v32-e-erp.css) ===== */
@media (max-width: 899px) { .ex__apoio { max-width: 32ch; } }
@keyframes d-erp-sobe { to { opacity: 1; translate: 0 0; } }

/* ===== 2/3 · os módulos conversam: o cartão da Conex ===== */
/* (escopado em .ef: as frentes c e e têm o seu .cartao-conex; o nome se repete, o desenho de cada página fica no lugar) */
.ef .cartao-conex { position: relative; isolation: isolate; overflow: hidden; border-radius: 26px; color: #F7F3EA;
  background: radial-gradient(110% 60% at 88% 0%, rgba(88, 145, 175, 0.24), rgba(88, 145, 175, 0) 62%), linear-gradient(170deg, #12304F 0%, #0B2035 50%, #081A2B 100%);
  box-shadow: 0 34px 60px -38px rgba(11, 32, 53, 0.85); }
/* o fio dourado por dentro da borda, como numa cédula */
.ef .cartao-conex::before { content: ''; position: absolute; inset: 7px; z-index: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(216, 172, 82, 0.34); pointer-events: none; }
.ef .cartao-conex > * { position: relative; z-index: 1; }
.ef .cartao-conex > .cc__textura { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 160px; fill: none; stroke: #D8AC52; opacity: 0.2;
  -webkit-mask-image: linear-gradient(180deg, #000 25%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 25%, rgba(0, 0, 0, 0) 100%); }
.cc__textura path { stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.cc__cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 24px 22px 18px 24px; border-bottom: 1px solid rgba(216, 172, 82, 0.22); }
.ef .cc__rot { margin: 0; font: 600 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.ef .cc__tit { margin: 6px 0 0; font: 400 1.5rem/1.1 var(--f-titulo); letter-spacing: -0.015em; color: #FFFFFF; text-wrap: balance; }
.cc__obj { width: 116px; height: auto; margin: -8px -4px -12px 0; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.45)); }
.cc__pe { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 24px 22px; border-top: 1px solid rgba(216, 172, 82, 0.22); font: 600 0.8rem/1.2 var(--f-texto); color: #C9D8E4; }
.cc__elos { width: 30px; height: auto; flex: none; }
.cc__pe b { margin-left: auto; font-weight: 600; color: #E8CE93; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* os módulos no marinho: nó apagado com aro dourado fino; aceso, dourado com o ícone em marinho */
.ef__cartao .ef__trilho { margin: 0; background: none; box-shadow: none; border-radius: 0; }
.ef__cartao .ef__linha { background: rgba(255, 255, 255, 0.12); }
.ef__cartao .ef__linha i { background: #D8AC52; }
.ef__cartao .ef__no { background: rgba(255, 255, 255, 0.04); color: #8FA5B8; box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.32); }
.ef__cartao .ef__mod.on .ef__no { background: #E8CE93; color: #0B2035; box-shadow: 0 12px 22px -14px rgba(0, 0, 0, 0.8); }
.ef__cartao .ef__ok { background: #0B2035; stroke: #E8CE93; box-shadow: 0 0 0 2px #E8CE93; }
.ef__cartao .ef__mod h3 { color: #FFFFFF; }
.ef__cartao .ef__ex-a { color: rgba(201, 216, 228, 0.5); }
.ef__cartao .ef__ex-b { color: #C9D8E4; }

@media (max-width: 899px) {
  .ee .ef__cab { margin-bottom: 28px; }
  .ef__cartao .ef__trilho { gap: 0; padding: 8px 22px 8px; }
  /* o fio passa pelo centro dos nós (44 px; centro a 22 + 22 do canto) */
  .ef__cartao .ef__linha { left: 43px; top: 42px; bottom: 42px; width: 2px; }
  .ef__cartao .ef__mod { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; padding: 11px 0; }
  .ef__cartao .ef__mod + .ef__mod::after { content: ''; position: absolute; left: 60px; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, 0.07); }
  .ef__cartao .ef__no { width: 44px; height: 44px; border-radius: 50%; }
  .ef__cartao .ef__no .ed-i { width: 20px; height: 20px; }
  .ef__cartao .ef__ok { right: -5px; top: -5px; width: 19px; height: 19px; padding: 3.5px; }
  .ef__cartao .ef__mod h3 { font-size: 1.2rem; line-height: 1.1; }
  .ef__cartao .ef__ex { height: 1.4em; font-size: 0.9rem; line-height: 1.4; }
}
@media (max-width: 380px) {
  .cc__obj { width: 96px; }
  .ef .cc__tit { font-size: 1.32rem; }
  .cc__cab { padding: 22px 18px 16px 20px; }
  .ef__cartao .ef__trilho { padding: 8px 18px; }
  .ef__cartao .ef__linha { left: 39px; }
  .cc__pe { padding: 14px 20px 20px; }
}
@media (min-width: 900px) {
  .cc__cab { padding: 30px 40px 22px 44px; }
  .ef .cc__tit { font-size: 1.9rem; }
  .cc__obj { width: 168px; margin: -14px 0 -18px; }
  .ef__cartao .ef__trilho { padding: 40px 40px 34px; }
  /* centro das colunas (6, com 12 px entre elas) dentro do respiro de 40 px */
  .ef__cartao .ef__linha { left: calc(40px + (100% - 140px) / 12); right: calc(40px + (100% - 140px) / 12); top: 76px; }
  .cc__pe { padding: 18px 44px 26px; }
}

/* ===== 5 · já tem sistema ou vai trocar ===== */
/* de onde parte e onde chega, e os passos com nome (as duas telas) */
.ec__ponta { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: start; gap: 12px; width: 100%; margin: 0; padding: 14px 0; border-block: 1px solid rgba(255, 255, 255, 0.12); }
.ec__ponta span { display: grid; gap: 5px; font: 600 0.98rem/1.25 var(--f-texto); color: #FFFFFF; }
.ec__ponta small { font: 600 0.68rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #E8CE93; }
.ec__seta { align-self: center; width: 24px; height: 12px; fill: none; stroke: #D8AC52; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ec__passos li { display: grid; gap: 2px; }
.ec__passos b { font: 500 1.12rem/1.2 var(--f-titulo); letter-spacing: -0.01em; color: #FFFFFF; }
.ec__passos span { font-size: 0.95rem; line-height: 1.45; color: #C9D8E4; }

@media (max-width: 899px) {
  /* as opções viram abas de pasta: a escolhida tem a cor da ficha e desce até ela, sem fio de ligação */
  .ec--escolha .ec__seg button { min-height: 56px; border-radius: 16px 16px 0 0; }
  .ec--escolha .ec__seg button[aria-selected="false"] { background: #14304C; }
  .ec--escolha .ec__palco { margin-top: 0; }
  .ec--escolha .ec__palco::before { display: none; }
  /* a curva côncava entre a aba escolhida e a ficha (no vão de 10 px entre as abas) */
  .ec--escolha .ec__palco::after { content: ''; position: absolute; z-index: 2; top: -10px; left: calc(50% - 5px); width: 10px; height: 10px; pointer-events: none;
    background: radial-gradient(circle at 100% 0, rgba(241, 229, 204, 0) 9.5px, #F1E5CC 10px); transition: background 300ms; }
  .ec--escolha[data-ec="1"] .ec__palco::after { background: radial-gradient(circle at 0 0, rgba(241, 229, 204, 0) 9.5px, #F1E5CC 10px); }

  /* a ficha do caminho: marfim da Conex, tinta marinho, fios finos */
  .ec--escolha .ec__lado { gap: 0; padding: 24px 20px 20px; border-radius: 0 0 24px 24px; background: #F1E5CC; color: #0B2035;
    box-shadow: 0 34px 56px -34px rgba(0, 0, 0, 0.75); }
  .ec--escolha .ec__lado h3 { font-size: 1.7rem; line-height: 1.08; color: #0B2035; text-wrap: balance; }
  .ec--escolha .ec__ponta { margin-top: 18px; border-color: rgba(11, 32, 53, 0.14); }
  .ec--escolha .ec__ponta span { font-size: 0.95rem; color: #0B2035; }
  .ec--escolha .ec__ponta small { color: #5E450D; }
  .ec--escolha .ec__seta { stroke: #B8862A; }
  /* os passos num fio dourado com nós de aro; cada passo: nome em Newsreader e uma linha */
  .ec--escolha .ec__passos { position: relative; gap: 0; margin: 6px 0 18px; padding-left: 30px; }
  .ec--escolha .ec__passos::before { content: ''; position: absolute; left: 6px; top: 24px; bottom: 30px; width: 2px; border-radius: 2px; background: #C8962F; transform-origin: 50% 0; }
  .ec--escolha .ec__passos li { padding: 12px 0; }
  .ec--escolha .ec__passos li + li { border-top: 1px solid rgba(11, 32, 53, 0.1); }
  .ec--escolha .ec__passos li::before { left: -30px; top: 17px; width: 14px; height: 14px; border-radius: 50%; background: #F1E5CC; box-shadow: inset 0 0 0 2px #C8962F; }
  .ec--escolha .ec__passos b { font-size: 1.18rem; color: #0B2035; }
  .ec--escolha .ec__passos span { font-size: 0.92rem; line-height: 1.4; color: #3B4753; }
  /* no marfim, o WhatsApp volta ao marinho e ocupa a largura da ficha */
  .ec--escolha .ec__lado .bt { display: flex; width: 100%; color: var(--creme); background-color: var(--marinho);
    background-image: linear-gradient(112deg, #071829 0%, #0D2B47 38%, #1D5C90 52%, #0D2B47 66%, #071829 100%); box-shadow: 0 16px 28px -18px rgba(11, 32, 53, 0.9); }
  .ec--escolha .ec__lado .bt .bt__texto { margin-right: auto; }
  .ec--escolha .ec__lado .bt .bt__caixa { background: rgba(244, 247, 250, 0.12); color: var(--creme); }

  /* a cada troca (e quando a seção aparece) o fio se desenha e os passos entram em sequência, no lugar */
  .anima .ec--escolha .ec__lado { transition-delay: 300ms; }
  .anima .ec--escolha:not(.vista) :is(.ec__ponta, .ec__passos li) { opacity: 0; }
  .anima .ec--escolha:not(.vista) .ec__passos::before { scale: 1 0; }
  .anima .ec--escolha.vista .ec__lado.on .ec__ponta { animation: d-erp-entra 520ms cubic-bezier(.16, 1, .3, 1) 260ms both; }
  .anima .ec--escolha.vista .ec__lado.on .ec__passos::before { animation: d-erp-fio 900ms cubic-bezier(.45, 0, .2, 1) 360ms both; }
  .anima .ec--escolha.vista .ec__lado.on .ec__passos li { animation: d-erp-entra 560ms cubic-bezier(.16, 1, .3, 1) 420ms both; }
  .anima .ec--escolha.vista .ec__lado.on .ec__passos li:nth-child(2) { animation-delay: 600ms; }
  .anima .ec--escolha.vista .ec__lado.on .ec__passos li:nth-child(3) { animation-delay: 780ms; }
  .anima .ec--escolha.vista .ec__lado.on .ec__passos li::before { animation: d-erp-no 420ms cubic-bezier(.3, 1.5, .5, 1) 480ms both; }
  .anima .ec--escolha.vista .ec__lado.on .ec__passos li:nth-child(2)::before { animation-delay: 660ms; }
  .anima .ec--escolha.vista .ec__lado.on .ec__passos li:nth-child(3)::before { animation-delay: 840ms; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .ec--escolha .ec__lado .ec__ponta, .ec--escolha .ec__lado .ec__passos li, .ec--escolha .ec__lado .ec__passos::before, .ec--escolha .ec__lado .ec__passos li::before { animation: none !important; opacity: 1 !important; scale: 1 !important; }
}
@keyframes d-erp-entra { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes d-erp-fio { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes d-erp-no { from { scale: 0.3; background: #F1E5CC; } 60% { background: #C8962F; } to { scale: 1; background: #F1E5CC; } }

/* zzzzz-v31-e-processos.css */
/* ---------- v31 · frente e-processos (JM, 10/10) · /mapeamento-de-processos ----------
   1. topo: a TELA do sistema de processos no lugar do POP de papel (.ptl)
   2. .cartao-conex: o cartão com a identidade da Conex (POPs de cada área e etapas do mapeamento)
   3. a emenda entre "Cada processo" e "Como o mapeamento acontece" com o selo dos elos (.pdv), mais curta
   4. "Como o mapeamento acontece" no celular: cartões da marca, com a etapa e o avanço visíveis */

/* ===== 1. Topo: a tela do processo ===== */
.ptl-cena { position: relative; z-index: 2; display: grid; place-items: center; min-width: 0; perspective: 1800px; }
.ptl { --t: #0B2035; --t2: #5B6875; --fio: #E8E2D6; --ouro: #D8AC52; --verde: #2F7A52;
  position: relative; width: min(100%, 600px); font-family: var(--f-texto); color: var(--t); font-variant-numeric: tabular-nums; text-align: left; }
.ptl :where(p, ol) { margin: 0; padding: 0; list-style: none; }
.ptl .ed-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* a moldura de vidro, a mesma do módulo do ERP */
.ptl__janela { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); padding: 7px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 50px 80px -40px rgba(0, 0, 0, 0.8); }
/* menu lateral do sistema: a marca em cima e os módulos; Processos aberto */
.ptl__lado { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0; border-radius: 17px 0 0 17px; background: linear-gradient(180deg, #0E2740 0%, #0B2035 100%); color: #8FA5B8; }
.ptl__lado .ptl__marca { width: 34px; height: auto; margin-bottom: 14px; }
.ptl__lado > .ed-i, .ptl__lado > span { box-sizing: content-box; padding: 9px; border-radius: 10px; }
.ptl__lado > span { display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: #E8CE93; box-shadow: inset 2px 0 0 var(--ouro); }
.ptl__app { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: 0 17px 17px 0; overflow: hidden; background: #F6F2EA; }
.ptl__barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--fio); background: #FBF8F2; }
.ptl__mod { display: flex; align-items: center; gap: 8px; color: #8C7A52; }
.ptl__mod b { font: 600 14px/1 var(--f-texto); color: var(--t); }
.ptl__ver { font: 600 12px/1 var(--f-texto); color: var(--t2); }
.ptl__corpo { display: grid; gap: 12px; padding: 18px 18px 16px; }
.ptl__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ptl__trilha { font: 500 12.5px/1.2 var(--f-texto); color: var(--t2); }
.ptl__estado { display: grid; justify-items: end; font: 600 12.5px/1 var(--f-texto); white-space: nowrap; }
.ptl__estado > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 5px; transition: opacity 400ms, translate 500ms cubic-bezier(.16, 1, .3, 1); }
.ptl__estado-a { color: #8C6A1E; opacity: 0; }
.ptl__estado-b { color: var(--verde); }
.ptl__estado-b .ed-i { width: 14px; height: 14px; stroke-width: 2.4; }
.ptl__tit { margin-top: -6px !important; font: 600 26px/1.1 var(--f-texto); letter-spacing: -0.025em; }
/* o fluxo em tabela: cabeçalho, uma linha por etapa, os nós ligados pelo fio dourado */
.ptl__tabela { border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--fio); }
.ptl__th { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--fio); font: 600 11.5px/1 var(--f-texto); letter-spacing: 0.04em; color: var(--t2); }
.ptl__fluxo li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 11px 14px; }
.ptl__fluxo li + li { border-top: 1px solid #F0EBE1; }
/* o fio entre um nó e o próximo */
.ptl__fluxo li:not(:last-child)::after { content: ''; position: absolute; left: 26.25px; top: calc(50% + 13px); width: 1.5px; height: calc(100% - 26px); background: var(--ouro); transform-origin: 50% 0; transition: scale 380ms cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--d, 0ms) + 260ms); }
.ptl__no { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--t); color: #E8CE93; transition: background-color 350ms, color 350ms, box-shadow 350ms; transition-delay: var(--d, 0ms); }
.ptl__no .ed-i { width: 14px; height: 14px; stroke-width: 2.6; }
.ptl__ult .ptl__no { background: var(--ouro); color: var(--t); }
.ptl__et { display: grid; gap: 4px; min-width: 0; font: 600 14px/1.2 var(--f-texto); }
.ptl__et small, .ptl__prazo { transition: opacity 380ms linear, translate 520ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0ms) + 120ms); }
.ptl__et small { display: flex; align-items: center; gap: 5px; font: 500 12.5px/1.2 var(--f-texto); color: var(--t2); }
.ptl__et small .ed-i { width: 14px; height: 14px; color: #8C7A52; }
.ptl__prazo { font: 600 13px/1 var(--f-texto); color: var(--t); white-space: nowrap; }
.ptl__pe { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0; font: 600 12.5px/1.2 var(--f-texto); color: var(--t); transition: opacity 400ms, translate 500ms cubic-bezier(.16, 1, .3, 1); }
.ptl__pe-elos { width: 22px; height: auto; flex: none; }
.ptl__pe .ptl__ok { margin-left: auto; color: var(--verde); stroke-width: 2.4; }
/* o objeto 3D da página: a prancheta com as tarefas e os responsáveis, presa no canto da tela */
.ptl__obj { position: absolute; z-index: 3; right: -46px; top: -74px; width: 170px; height: auto; pointer-events: none; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.45)); rotate: 8deg; }

/* estado final é o padrão (sem JS); com animação, a tela entra com as etapas ainda sem dono e o JS acende */
.anima .ptl:not(.vivo) .ptl__no { background: #FFFFFF; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(11, 32, 53, 0.28); }
.anima .ptl:not(.vivo) .ptl__fluxo li::after { scale: 1 0; }
.anima .ptl:not(.vivo) :is(.ptl__et small, .ptl__prazo) { opacity: 0; translate: 8px 0; }
.anima .ptl:not(.pronto) .ptl__estado-a { opacity: 1; }
.anima .ptl:not(.pronto) .ptl__estado-b { opacity: 0; translate: 0 6px; }
.anima .ptl:not(.pronto) .ptl__pe { opacity: 0; translate: 0 6px; }
.anima .ptl-cena { opacity: 0; translate: 0 60px; animation: ht-entra 1200ms cubic-bezier(.16, 1, .3, 1) 260ms forwards; }
.anima .ptl__obj { opacity: 0; scale: 0.7; transition: opacity 400ms linear, scale 800ms cubic-bezier(.3, 1.35, .5, 1); }
.anima .ptl.vivo .ptl__obj { opacity: 1; scale: 1; }

@media (min-width: 1024px) {
  .ptl { transform: rotateX(6deg) rotateY(-13deg) rotateZ(1.5deg); transform-style: preserve-3d; }
  /* no computador a prancheta fica no canto de baixo, junto do menu lateral (em cima ela cobria o estado) */
  .ptl__obj { right: auto; top: auto; left: -78px; bottom: -64px; width: 168px; rotate: -8deg; }
}
@media (max-width: 1023px) {
  .ptl-cena { margin-top: 6px; }
  .ptl { width: min(100%, 460px); }
}
@media (max-width: 899px) {
  /* celular: sem o menu lateral; a barra do sistema vira a faixa marinho de cima (como o módulo do ERP) */
  .ptl__janela { grid-template-columns: minmax(0, 1fr); }
  .ptl__lado { display: none; }
  .ptl__app { border-radius: 17px; }
  .ptl__barra { padding: 0 8px 0 14px; height: 48px; border-bottom: 0; background: linear-gradient(180deg, #0E2740 0%, #0B2035 100%); }
  .ptl__mod { color: #E8CE93; }
  .ptl__mod b { color: #FFFFFF; }
  .ptl__ver { padding-right: 76px; color: #8FA5B8; }
  .ptl__corpo { gap: 11px; padding: 14px 12px 12px; }
  .ptl__cab { padding: 0 2px; }
  .ptl__tit { padding: 0 2px; font-size: 23px; }
  .ptl__fluxo li { column-gap: 10px; padding: 10px 12px; }
  .ptl__fluxo li:not(:last-child)::after { left: 24.25px; }
  .ptl__th { padding: 9px 12px; }
  .ptl__et { font-size: 13.5px; }
  .ptl__obj { right: -6px; top: -50px; width: 104px; }
}
@media (max-width: 379px) {
  .ptl__tit { font-size: 21px; }
  .ptl__et { font-size: 13px; }
  .ptl__obj { width: 92px; top: -44px; }
}

/* o topo no celular: menos texto depois do título e a tela logo abaixo do botão */
@media (max-width: 1023px) {
  .ph__grade { gap: 52px; }
}

/* ===== 2. O cartão da Conex ===== */
.cartao-conex { --cc-marinho: #0B2035; --cc-ouro: #D8AC52; --cc-papel: #FBF6EC;
  overflow: hidden; border-radius: 22px; background: var(--cc-papel); color: var(--cc-marinho);
  box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.22), 0 1px 0 rgba(11, 32, 53, 0.05), 0 30px 56px -36px rgba(11, 32, 53, 0.6); }
.cartao-conex__cab { position: relative; z-index: 1; padding: 22px 24px 20px; background: linear-gradient(165deg, #133150 0%, #0B2035 70%); color: #F7F3EA; }
/* a borda de baixo da cabeça é a curva do elo (build/curvas.mjs) e o traço dourado corre por cima dela */
.cartao-conex__fio { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 26px; overflow: visible; pointer-events: none; }
.cartao-conex__curva { fill: var(--cc-marinho); stroke: none; } /* o .pm__trilho (div do método) passa stroke por herança */
.cartao-conex__traco { fill: none; stroke: var(--cc-ouro); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cartao-conex__rot { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.cartao-conex__elos { width: 30px; height: auto; flex: none; }
.cartao-conex__cab h3 { margin: 12px 0 0; font: 400 clamp(1.9rem, 1.4rem + 1.3vw, 2.5rem)/1.02 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; }
.cartao-conex__corpo { display: grid; gap: 14px; padding: 40px 24px 22px; }

/* POPs de cada área: a folha é o cartão da Conex (a pilha e a troca continuam as mesmas) */
.pp__folha.cartao-conex { gap: 0; padding: 0; background: var(--cc-papel);
  box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.22), 0 1px 0 rgba(11, 32, 53, 0.05), 0 30px 60px -36px rgba(11, 32, 53, 0.55); }
.pp__folha.cartao-conex:not(.pp__folha--frente) { filter: brightness(0.96); }
/* só a folha da frente mostra o conteúdo; as de trás são papel da marca (sem o texto cortado aparecendo no pé da pilha) */
.pp__folha.cartao-conex .cartao-conex__corpo { transition: opacity 260ms linear 180ms; }
.pp__folha.cartao-conex:not(.pp__folha--frente) .cartao-conex__corpo { opacity: 0; transition-delay: 0ms; }
.cartao-conex .pp__campos { padding: 0 0 14px; border-block: 0; border-bottom: 1px solid rgba(154, 113, 32, 0.28); }
.cartao-conex .pp__campos div + div { border-left-color: rgba(154, 113, 32, 0.28); }
.cartao-conex .pp__campos dt { color: #7A5A1E; }
.cartao-conex .pp__passos { gap: 0; }
.cartao-conex .pp__passos li { position: relative; gap: 14px; padding: 9px 0; color: #26323E; }
/* os passos ligados pelo mesmo fio dourado */
.cartao-conex .pp__passos li:not(:last-child)::after { content: ''; position: absolute; left: 12px; top: calc(50% + 12px); width: 1.5px; height: calc(100% - 24px); background: rgba(154, 113, 32, 0.45); }
.cartao-conex .pp__caixa { width: 25px; height: 25px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(154, 113, 32, 0.55); color: #E8CE93; }
.cartao-conex.pp__folha--frente .pp__caixa { background: var(--cc-marinho); box-shadow: none; }
.cartao-conex .pp__passos li:last-child .pp__caixa { color: var(--cc-marinho); }
.cartao-conex.pp__folha--frente .pp__passos li:last-child .pp__caixa { background: var(--cc-ouro); }

/* as áreas (os botões que trazem o POP): sem o cartão branco; papel da marca com o fio dourado */
@media (max-width: 1023px) {
  .pp__abas button { background: rgba(251, 246, 236, 0.7); box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.3); }
  .pp__abas button[aria-selected="true"] { box-shadow: inset 0 -2px 0 #D8AC52, 0 14px 24px -16px rgba(11, 32, 53, 0.8); }
  .pp__pint { background: linear-gradient(165deg, #133150 0%, #0B2035 70%); }
}
@media (max-width: 639px) {
  .cartao-conex__cab { padding: 18px 20px 16px; }
  .cartao-conex__cab h3 { margin-top: 10px; font-size: 1.85rem; }
  .cartao-conex__corpo { gap: 12px; padding: 34px 20px 18px; }
  .cartao-conex .pp__campos div { padding: 0 10px 0 0; }
  .cartao-conex .pp__campos div + div { padding-left: 14px; }
  .cartao-conex .pp__campos dd { font-size: 1.05rem; }
  .pp__folha.cartao-conex { width: 92%; }
  .pp__pilha { height: 418px; }
}

/* ===== 3. A emenda com os elos, mais curta ===== */
.pdv { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(48px, 6vw, 88px); }
.pdv__fio { width: clamp(64px, 12vw, 160px); height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, rgba(154, 113, 32, 0), rgba(154, 113, 32, 0.6)); }
.pdv__fio:last-child { background: linear-gradient(270deg, rgba(154, 113, 32, 0), rgba(154, 113, 32, 0.6)); }
.pdv__selo { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #0B2035; box-shadow: 0 0 0 5px rgba(216, 172, 82, 0.2), 0 16px 28px -16px rgba(11, 32, 53, 0.8); }
.pdv__elos { width: 32px; height: auto; }
.pp:has(.pdv) { padding-bottom: clamp(36px, 4vw, 56px); }
.pp:has(.pdv) + .pm:not(.pm--vivo) { padding-top: clamp(36px, 4vw, 56px); }
@media (max-width: 1023px) {
  .pdv { margin-top: 22px; gap: 14px; }
  .pdv__selo { width: 52px; height: 52px; }
  .pdv__elos { width: 28px; }
  .pp:has(.pdv) { padding-bottom: 20px; }
  .pp:has(.pdv) + .pm { padding-top: 26px; }
}
/* computador: o palco preso do método já tem a folga do cabeçalho; a emenda só encosta no topo dele */
@media (min-width: 1024px) {
  .pp:has(.pdv) + .pm--vivo .pm__preso { padding-top: calc(var(--altura-topo) + 10px); }
}

/* ===== 4. Como o mapeamento acontece: cartões da marca ===== */
.pm__seg { display: none; }
.pm__m.cartao-conex { gap: 0; padding: 0; background: var(--cc-papel); overflow: hidden; }
.pm__topo.cartao-conex__cab { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 12px; padding: 18px 18px 16px; }
.pm__topo .pm__obj { grid-column: 1; grid-row: 2; width: 50px; height: 50px; border-radius: 14px; background: rgba(241, 229, 204, 0.12); box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.25); }
.pm__topo .pm__obj img { width: 44px; height: 44px; }
.pm__m .pm__topo h3 { grid-column: 2; grid-row: 2; margin: 0; font: 400 1.32rem/1.1 var(--f-titulo); letter-spacing: -0.01em; color: #FFFFFF; }
.pm__etapa { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; font: 600 0.7rem/1 var(--f-mono) !important; letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93 !important; }
.pm__m > p:not(.pm__res) { margin: 0; padding: 34px 18px 18px; }
@media (min-width: 1024px) {
  /* computador: a mesma cabeça, mais compacta; o texto embaixo */
  .pm__topo.cartao-conex__cab { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 16px 16px 14px; }
  .pm__topo .pm__obj { width: 44px; height: 44px; border-radius: 12px; }
  .pm__topo .pm__obj img { width: 38px; height: 38px; }
  .pm__m .pm__topo h3 { font-size: 1.12rem; }
  .pm__m > p:not(.pm__res) { padding: 28px 18px 18px; }
  .pm__m.cartao-conex.ativo { box-shadow: inset 0 0 0 2px #D8AC52, 0 26px 44px -30px rgba(11, 32, 53, 0.55); }
  /* fora de foco: a cabeça marinho continua inteira (esmaecida ela virava cinza); só o conteúdo esmaece */
  .pm--vivo .pm__m.cartao-conex:not(.ativo) > .pm__topo { opacity: 1; }
  .pm--vivo .pm__m.cartao-conex:not(.ativo) .pm__topo > :not(.cartao-conex__fio) { opacity: 0.5; }
  .pm__topo > * { transition: opacity 380ms; }
}
@media (max-width: 1023px) {
  .pm__seg { display: flex; gap: 4px; }
  .pm__seg i { width: 18px; height: 4px; border-radius: 2px; background: rgba(232, 206, 147, 0.22); }
  .pm__seg i.on { background: #D8AC52; }
  .pm__m.cartao-conex { display: block; padding: 0; border-radius: 22px; overflow: visible;
    box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.22), 0 26px 44px -32px rgba(11, 32, 53, 0.6); }
  .pm__m.cartao-conex.ativo { box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.22), 0 26px 44px -32px rgba(11, 32, 53, 0.6); }
  .pm__topo.cartao-conex__cab { border-radius: 22px 22px 0 0; }
  .pm__m > p:not(.pm__res) { font-size: 0.95rem; line-height: 1.45; color: #3B4753; }
  .pm__m .pm__res { margin: 0 18px !important; padding: 12px 0 16px; border-top: 1px solid rgba(154, 113, 32, 0.28); }
  .pm__res b { color: #0B2035; }
  /* o número na linha do tempo: o mesmo marinho, com o elo de ouro em volta quando a etapa já entrou */
  /* o nó na linha do tempo: a etapa já está escrita no cartão, então o nó não repete o número; marinho com o anel
     dourado quando a etapa entra */
  .pm__num { left: -38px; width: 16px; height: 16px; margin-top: -8px; font-size: 0; box-shadow: 0 0 0 5px #F1E5CC; }
  .anima .pm--linha .pm__m.vista .pm__num { background: #0B2035; box-shadow: 0 0 0 3px #D8AC52, 0 0 0 7px #F1E5CC; }
}

/* ===== 5. Linha fina entre "Cada processo" e "Como o mapeamento acontece" =====
   As duas seções são marfim e se encostam sem onda; a emenda cai numa fração de pixel (ex.: 400,03 px) e, no zoom e
   nas telas de densidade 2,625/3, as duas bordas serrilhadas deixavam ver o fundo escuro da página numa linha de 1 px.
   O método sobe 1 px por baixo da seção de cima: a linha da emenda fica sempre coberta por marfim. */
.pp + .pm { margin-top: -1px; }

/* zzzzz-v31-qz.css */
/* v31 (JM, 10/10, 6A): resultado da avaliação no padrão do diagnóstico da mentoria: nota de 0 a 100, faixa, três pilares
   com barra e as duas primeiras recomendações. Mesmo vocabulário do cartão (linhas creme, selo, marinho e dourado). */
.qz-placar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; margin: 0 0 14px; }
.qz-placar__n { display: grid; place-items: center; align-content: center; width: 92px; height: 92px; margin: 0; border-radius: 50%;
  background: radial-gradient(circle, #FFFCF5 61%, transparent 62%), conic-gradient(var(--qz-cor, #1F5A85) calc(var(--qz-p, 0) * 1turn), rgba(11, 32, 53, 0.1) 0); }
.qz-placar__n b { font: 500 2.4rem/1 var(--f-titulo); color: #0B2035; letter-spacing: -0.02em; }
.qz-placar__n span { margin-top: 2px; font-size: 0.75rem; color: #5C6773; }
.qz-placar__f { display: grid; gap: 8px; justify-items: start; margin: 0; }
.qz-placar__t { font: 400 1.25rem/1.2 var(--f-titulo); color: #0B2035; }
.qz-placar[data-nivel="solida"] { --qz-cor: #1F5A85; } .qz-placar[data-nivel="desenv"] { --qz-cor: #2F6E9C; }
.qz-placar[data-nivel="fragil"] { --qz-cor: #B4862C; } .qz-placar[data-nivel="critica"] { --qz-cor: #0B2035; }
.qz-selo[data-nivel="solida"], .qz-selo[data-nivel="desenv"] { background: #E4EEF5; color: #1F5A85; }
.qz-selo[data-nivel="fragil"] { background: #F6EBD3; color: #8A6417; }
.qz-selo[data-nivel="critica"] { background: #0B2035; color: #E8CE93; }

.qz-razao--pil { gap: 8px; }
.qz-razao--pil li { min-height: 56px; }
.qz-razao--pil .qz-razao__t { display: grid; gap: 7px; }
.qz-pil__barra { display: block; height: 5px; border-radius: 5px; background: rgba(11, 32, 53, 0.1); overflow: hidden; }
.qz-pil__barra i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #1C5182, #D3AB5B); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 900ms cubic-bezier(.22, 1, .36, 1) 400ms; }
.qz-pil__n { font: 600 0.9375rem/1 var(--f-texto); color: #0B2035; font-variant-numeric: tabular-nums; }

.qz-recs__t { margin: 16px 0 6px; font: 700 0.6875rem/1 var(--f-texto); letter-spacing: 0.12em; text-transform: uppercase; color: #8A6417; }
.qz-recs { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: rec; }
.qz-recs li { position: relative; padding: 9px 0 9px 30px; border-top: 1px solid rgba(154, 113, 32, 0.22); font: 400 1.0625rem/1.3 var(--f-titulo); color: #0B2035; counter-increment: rec; }
.qz-recs li::before { content: counter(rec); position: absolute; left: 0; top: 9px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0B2035; color: #E8CE93; font: 600 0.6875rem/1 var(--f-texto); }
.qz-res .qz-res__nota { margin: 12px 0 10px; font-size: 0.8125rem; }

@media (max-width: 899px) {
  .qz-placar { gap: 14px; margin-bottom: 10px; }
  .qz-placar__n { width: 76px; height: 76px; }
  .qz-placar__n b { font-size: 2rem; }
  .qz-placar__t { font-size: 1.0625rem; }
  .qz-razao--pil li { min-height: 50px; }
  .qz-recs__t { margin-top: 12px; }
  .qz-recs li { padding: 7px 0 7px 28px; font-size: 1rem; }
  .qz-recs li::before { top: 7px; }
}

/* no computador o cartão tem altura fixa e a barra flutua embaixo: o resultado fica compacto para caber acima dela */
@media (min-width: 900px) {
  .qz-res .qz__pergunta { font-size: clamp(1.6rem, 1.1rem + 1vw, 2rem); }
  .qz-res .qz__cols { margin-bottom: 10px; }
  .qz-placar { gap: 14px; margin-bottom: 10px; }
  .qz-placar__n { width: 72px; height: 72px; }
  .qz-placar__n b { font-size: 1.9rem; }
  .qz-placar__n span { font-size: 0.6875rem; }
  .qz-placar__t { font-size: 1.125rem; }
  .qz-razao--pil { gap: 6px; }
  .qz-razao--pil li { min-height: 0; padding-block: 6px; }
  .qz-razao--pil .qz-op__ic { width: 34px; height: 34px; }
  .qz-recs__t { margin: 10px 0 4px; }
  .qz-recs li { padding: 6px 0 6px 28px; font-size: 1rem; }
  .qz-recs li::before { top: 6px; }
  .qz-res .qz-res__nota { margin: 8px 0 8px; font-size: 0.75rem; }
}
.qz--fim .qz__barra { opacity: 0; visibility: hidden; transition: opacity 300ms linear, visibility 0s 300ms; }

/* zzzzzz-v32-a-cartoes.css */
/* v32 a-cartoes · rodada do JM de 11/10 (home no celular: cinco frentes, quatro resultados; global: fundo).
   Carrega por último (ordem alfabética). JS em src/js/v31/v32-a-cartoes.js. */

/* =====================================================================================================================
   1 · CINCO FRENTES no celular: dois cartões inteiros por tela, maiores, foto à vista e 3 a 5 palavras sob o título.
   O toque abre o modal do cartão (o "o que inclui" que subia por cima da metade do cartão saiu). Computador igual.
   ===================================================================================================================== */
.v32a-lq-curta { display: none; }
@media (max-width: 899px) {
  /* exatamente dois: o vão entre os cartões é igual à margem, então o terceiro começa na borda da tela e nenhum pedaço
     dele aparece; (tela − três margens) ÷ 2 */
  .leque { --cw: calc((100vw - 3 * var(--margem)) / 2); --ch: calc(var(--cw) * 1.5); }
  .leque .leque__palco { gap: var(--margem); scroll-snap-type: x mandatory; }
  .leque .leque__card { border-radius: 20px; cursor: pointer; }
  .leque .lq-ic, .leque .lq-lin, .leque .lq-lin { display: none; }
  .leque .lq-foto { object-position: 50% 30%; }
  /* o degradê fica só no pé, para a foto aparecer inteira em cima */
  .leque .lq-txt, .leque .leque__card--aberto .lq-txt { gap: 4px; padding: 54px 13px 14px;
    background: linear-gradient(180deg, rgba(8, 24, 40, 0) 0%, rgba(8, 24, 40, 0.72) 42%, rgba(8, 24, 40, 0.94) 100%); }
  .leque .lq-tit { font-size: 1.1875rem; line-height: 1.08; }
  .leque .v32a-lq-curta { display: block; font-size: 0.8125rem; line-height: 1.3; color: #DCE7F0; text-wrap: balance; }
  /* o sinal de abrir: um + no canto (o cartão abre o modal; a página fica no botão do modal) */
  .leque .lq-ir { width: 30px; height: 30px; right: 10px; top: 10px; background: rgba(11, 32, 53, 0.86); color: #F1DDA8;
    box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.32); }
  .leque .lq-ir svg { width: 14px; height: 14px; stroke-width: 2.2; }
  /* o verso e o "fica" da v31 não existem mais no celular */
  .leque .lq-verso { display: none !important; }
}
@media (max-width: 359px) { .leque .lq-tit { font-size: 1.0625rem; } .leque .v32a-lq-curta { font-size: 0.75rem; } }

/* =====================================================================================================================
   2 · QUATRO RESULTADOS no celular e no tablet: a foto ocupa o cartão, o texto desce para o pé, o cartão inteiro abre o
   modal ("Ver detalhes" fica como dica pequena). Computador (hover) igual.
   ===================================================================================================================== */
@media (max-width: 1023px) {
  .rcs .rc { height: clamp(360px, 104vw, 430px); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: scale 140ms ease-out; }
  .rcs .rc:active { scale: 0.985; }
  .rcs .rc__foto { inset: -1px; top: -1px; bottom: auto; height: calc(100% + 2px); }
  .rcs .rc::after { inset: 0; bottom: 0; height: auto;
    background: linear-gradient(180deg, rgba(11, 32, 53, 0) 40%, rgba(11, 32, 53, 0.7) 63%, rgba(11, 32, 53, 0.95) 84%, #0B2035 100%); }
  .rcs .rc__corpo { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0; padding: 0 20px 12px; }
  .rcs .rc__tit { min-height: 0; display: block; font-size: 1.625rem; }
  .rcs .rc__sub { min-height: 0; margin-top: 6px; font-size: 0.9375rem; line-height: 1.38; }
  .rcs .rc__txt, .rcs .rc__mais { display: none; }
  /* a dica: pequena, no pé; o alvo de toque é o cartão inteiro */
  .rcs .rc__abre { min-height: 44px; margin-top: 0; gap: 8px; font-size: 0.8125rem; letter-spacing: 0.03em; }
  .rcs .rc__abre i { width: 22px; height: 22px; box-shadow: inset 0 0 0 1.5px rgba(241, 221, 168, 0.55); }
  .rcs .rc__abre i::before, .rcs .rc__abre i::after { width: 9px; margin-left: -4.5px; }
  .rcs .rc__abre-fecha { display: none !important; }
  .rcs .rc__abre-ver { display: inline !important; }
  .rcs .rc--aberto .rc__abre i { rotate: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .rcs .rc { transition: none; } }

/* =====================================================================================================================
   MODAL (cinco frentes e quatro resultados): o cartão Conex aprovado pelo JM em 11/10 (marinho, fio dourado, a marca
   d'água dos elos em evidência). Só transform e opacidade animam (JS); a página não muda de layout ao abrir/fechar.
   ===================================================================================================================== */
.v32a-m { position: fixed; inset: 0; z-index: 200; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; contain: strict;
  background: transparent; color: #F7F3EA; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none;
  visibility: hidden; pointer-events: none; }
.v32a-m.v32a-m--aberto { visibility: visible; pointer-events: auto; }
.v32a-m::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .v32a-m:not(.v32a-m--aberto) { display: none; } }
.v32a-m__veu { position: fixed; inset: 0; background: rgba(4, 13, 24, 0.66); }
/* 1 px a mais que a tela: o toque fora do painel rola o próprio modal (contido) e não a página de trás */
.v32a-m__palco { position: relative; display: grid; place-items: center; min-height: calc(100% + 1px); padding: 16px; }
.v32a-m__painel { position: relative; isolation: isolate; width: min(100%, 440px); max-height: calc(100svh - 32px); overflow: hidden auto; overscroll-behavior: contain;
  border-radius: 26px; scrollbar-width: none;
  background: radial-gradient(120% 60% at 100% 0%, rgba(216, 172, 82, 0.16) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.22), 0 40px 80px -30px rgba(0, 0, 0, 0.85); }
.v32a-m__painel::-webkit-scrollbar { display: none; }
.v32a-m__painel:focus { outline: none; }
/* a marca d'água dos elos (public/cartao-elos.svg, em ouro), cortada pela borda de baixo, mais visível que a do cartão
   do BPO da v31; é uma camada de fundo do painel (não um ::before), então não aumenta a rolagem interna */
.v32a-m__painel { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='40 26 662 412'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='760' height='480'%3E%3Cg id='e'%3E%3Cpath d='M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6' fill='none' stroke='%23fff' stroke-width='65'/%3E%3Ccircle cx='452.6' cy='239.6' r='32.5' fill='%23fff'/%3E%3Cpath d='M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6' fill='none' stroke='%23000' stroke-width='57'/%3E%3Ccircle cx='452.6' cy='239.6' r='28.5' fill='%23000'/%3E%3C/g%3E%3C/mask%3E%3Cmask id='n' maskUnits='userSpaceOnUse' x='0' y='0' width='760' height='480'%3E%3Cg transform='rotate(180 371 232)'%3E%3Cpath d='M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6' fill='none' stroke='%23fff' stroke-width='65'/%3E%3Ccircle cx='452.6' cy='239.6' r='32.5' fill='%23fff'/%3E%3Cpath d='M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6' fill='none' stroke='%23000' stroke-width='57'/%3E%3Ccircle cx='452.6' cy='239.6' r='28.5' fill='%23000'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Crect x='0' y='0' width='760' height='480' fill='%23E8CE93' fill-opacity='.26' mask='url(%23m)'/%3E%3Crect x='0' y='0' width='760' height='480' fill='%23E8CE93' fill-opacity='.26' mask='url(%23n)'/%3E%3C/svg%3E") right -18% bottom -16% / 86% auto no-repeat,
  radial-gradient(120% 60% at 100% 0%, rgba(216, 172, 82, 0.16) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%); }
.v32a-m__fechar { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: #0B2035; color: #FFFFFF; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.7); -webkit-tap-highlight-color: transparent; }
.v32a-m__fechar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.v32a-m__fechar:active { background: #16375A; }
.v32a-m__fechar:focus { outline: none; }
.v32a-m__fechar:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.v32a-m__foto { position: relative; height: 210px; overflow: hidden; border-radius: 26px 26px 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 52%, transparent 100%); }
.v32a-m__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.v32a-m__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 39, 66, 0) 40%, rgba(14, 39, 66, 0.75) 100%); }
.v32a-m__corpo { position: relative; display: grid; gap: 0; padding: 0 22px 22px; margin-top: -30px; }
.v32a-m__tit { margin: 0; font-family: var(--f-titulo); font-size: 1.875rem; font-weight: 500; line-height: 1.06; letter-spacing: -0.015em; color: #FFFFFF; }
.v32a-m__frase { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: #D9E5EE; }
.v32a-m__lista { display: grid; gap: 10px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid rgba(232, 206, 147, 0.22); }
.v32a-m__lista li { display: flex; align-items: baseline; gap: 10px; font-size: 0.9375rem; line-height: 1.35; font-weight: 500; color: #FFFFFF; }
.v32a-m__lista svg { flex: none; width: 16px; height: 16px; color: #E8CE93; translate: 0 2px; }
.v32a-m__ir { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; margin-top: 22px; padding: 0 8px 0 20px; border-radius: 14px;
  background: #F1DDA8; color: #0B2035; font: 600 1rem/1.2 var(--f-texto); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.v32a-m__ir:active { background: #E2C27E; }
.v32a-m__ir:focus-visible { outline: 2px solid #F1DDA8; outline-offset: 3px; }
.v32a-m__seta { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #0B2035; color: #F1DDA8; }
.v32a-m__seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* resultados: o texto, o placar e o botão de WhatsApp do cartão */
.v32a-m--rc .v32a-m__foto img { object-position: 60% 40%; }
.v32a-m .pl { margin-top: 20px; }
.v32a-m .v32a-m__cta { width: 100%; min-width: 0; margin-top: 22px; }
.v32a-m .v32a-m__cta .bt__texto { min-width: 0; white-space: normal; text-wrap: balance; }
@media (max-width: 389px) {
  .v32a-m__foto { height: 172px; }
  .v32a-m__tit { font-size: 1.625rem; }
  .v32a-m__corpo { padding: 0 18px 18px; }
}

/* =====================================================================================================================
   3a · MONOGRAMA no site todo, espalhado e um pouco aleatório (ladrilho grande gerado por build/v32a-ladrilho-monograma.mjs)
   ===================================================================================================================== */
/* <ladrilho> */
/* ladrilho gerado por build/v32a-ladrilho-monograma.mjs (105 elos em 1200 × 1500) */
:root { --v32a-elos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1200' height='1500'%3E%3Cdefs%3E%3Csymbol id='e' viewBox='52 38 638 388'%3E%3Cpath d='M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6' fill='none' stroke='%23C9AE78' stroke-width='65'/%3E%3Ccircle cx='452.6' cy='239.6' r='32.5' fill='%23C9AE78'/%3E%3Cg transform='rotate(180 371 232)'%3E%3Cpath d='M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6' fill='none' stroke='%23C9AE78' stroke-width='65'/%3E%3Ccircle cx='452.6' cy='239.6' r='32.5' fill='%23C9AE78'/%3E%3C/g%3E%3C/symbol%3E%3C/defs%3E%3Cuse href='%23e' x='505.6' y='379.7' width='45' height='27.37' transform='rotate(4 528.1 393.4)'/%3E%3Cuse href='%23e' x='427.6' y='242.9' width='35' height='21.29' transform='rotate(11 445.1 253.6)'/%3E%3Cuse href='%23e' x='268.0' y='358.7' width='44' height='26.76' transform='rotate(-5 290.0 372.1)'/%3E%3Cuse href='%23e' x='299.1' y='86.6' width='44' height='26.76' transform='rotate(-7 321.1 100.0)'/%3E%3Cuse href='%23e' x='365.1' y='530.1' width='43' height='26.15' transform='rotate(-12 386.6 543.1)'/%3E%3Cuse href='%23e' x='513.4' y='523.5' width='38' height='23.11' transform='rotate(15 532.4 535.1)'/%3E%3Cuse href='%23e' x='184.4' y='510.8' width='32' height='19.46' transform='rotate(-17 200.4 520.6)'/%3E%3Cuse href='%23e' x='116.9' y='327.1' width='35' height='21.29' transform='rotate(18 134.4 337.7)'/%3E%3Cuse href='%23e' x='311.2' y='675.5' width='32' height='19.46' transform='rotate(-13 327.2 685.2)'/%3E%3Cuse href='%23e' x='649.0' y='402.7' width='33' height='20.07' transform='rotate(11 665.5 412.7)'/%3E%3Cuse href='%23e' x='445.3' y='668.7' width='46' height='27.97' transform='rotate(-17 468.3 682.7)'/%3E%3Cuse href='%23e' x='179.8' y='814.8' width='38' height='23.11' transform='rotate(17 198.8 826.3)'/%3E%3Cuse href='%23e' x='46.8' y='925.6' width='40' height='24.33' transform='rotate(-9 66.8 937.8)'/%3E%3Cuse href='%23e' x='156.8' y='988.9' width='38' height='23.11' transform='rotate(-11 175.8 1000.4)'/%3E%3Cuse href='%23e' x='1173.1' y='352.6' width='40' height='24.33' transform='rotate(3 1193.1 364.8)'/%3E%3Cuse href='%23e' x='-26.9' y='352.6' width='40' height='24.33' transform='rotate(3 -6.9 364.8)'/%3E%3Cuse href='%23e' x='12.6' y='515.0' width='40' height='24.33' transform='rotate(-1 32.6 527.2)'/%3E%3Cuse href='%23e' x='1212.6' y='515.0' width='40' height='24.33' transform='rotate(-1 1232.6 527.2)'/%3E%3Cuse href='%23e' x='585.1' y='621.5' width='37' height='22.5' transform='rotate(15 603.6 632.7)'/%3E%3Cuse href='%23e' x='1172.8' y='1056.0' width='37' height='22.5' transform='rotate(-13 1191.3 1067.2)'/%3E%3Cuse href='%23e' x='-27.2' y='1056.0' width='37' height='22.5' transform='rotate(-13 -8.7 1067.2)'/%3E%3Cuse href='%23e' x='357.7' y='974.4' width='43' height='26.15' transform='rotate(-13 379.2 987.4)'/%3E%3Cuse href='%23e' x='99.5' y='131.6' width='45' height='27.37' transform='rotate(12 122.0 145.2)'/%3E%3Cuse href='%23e' x='478.4' y='1056.0' width='46' height='27.97' transform='rotate(-17 501.4 1070.0)'/%3E%3Cuse href='%23e' x='1083.0' y='471.7' width='41' height='24.93' transform='rotate(-11 1103.5 484.2)'/%3E%3Cuse href='%23e' x='460.8' y='790.2' width='41' height='24.93' transform='rotate(2 481.3 802.6)'/%3E%3Cuse href='%23e' x='220.3' y='1074.4' width='43' height='26.15' transform='rotate(-14 241.8 1087.5)'/%3E%3Cuse href='%23e' x='488.7' y='920.3' width='41' height='24.93' transform='rotate(9 509.2 932.8)'/%3E%3Cuse href='%23e' x='428.7' y='1165.9' width='39' height='23.72' transform='rotate(-15 448.2 1177.7)'/%3E%3Cuse href='%23e' x='1065.3' y='366.8' width='34' height='20.68' transform='rotate(-8 1082.3 377.1)'/%3E%3Cuse href='%23e' x='751.9' y='534.4' width='45' height='27.37' transform='rotate(-3 774.4 548.1)'/%3E%3Cuse href='%23e' x='1065.5' y='618.8' width='43' height='26.15' transform='rotate(12 1087.0 631.9)'/%3E%3Cuse href='%23e' x='65.5' y='814.0' width='31' height='18.85' transform='rotate(-5 81.0 823.4)'/%3E%3Cuse href='%23e' x='99.4' y='604.9' width='39' height='23.72' transform='rotate(-17 118.9 616.8)'/%3E%3Cuse href='%23e' x='845.5' y='710.1' width='41' height='24.93' transform='rotate(-4 866.0 722.5)'/%3E%3Cuse href='%23e' x='401.0' y='403.6' width='46' height='27.97' transform='rotate(-15 424.0 417.5)'/%3E%3Cuse href='%23e' x='634.4' y='529.6' width='40' height='24.33' transform='rotate(12 654.4 541.8)'/%3E%3Cuse href='%23e' x='973.7' y='472.3' width='33' height='20.07' transform='rotate(10 990.2 482.3)'/%3E%3Cuse href='%23e' x='674.4' y='735.9' width='35' height='21.29' transform='rotate(-10 691.9 746.6)'/%3E%3Cuse href='%23e' x='200.3' y='668.6' width='38' height='23.11' transform='rotate(-8 219.3 680.1)'/%3E%3Cuse href='%23e' x='330.6' y='1107.2' width='40' height='24.33' transform='rotate(11 350.6 1119.4)'/%3E%3Cuse href='%23e' x='1142.5' y='199.9' width='38' height='23.11' transform='rotate(18 1161.5 211.5)'/%3E%3Cuse href='%23e' x='-57.5' y='199.9' width='38' height='23.11' transform='rotate(18 -38.5 211.5)'/%3E%3Cuse href='%23e' x='839.7' y='323.7' width='36' height='21.89' transform='rotate(-1 857.7 334.6)'/%3E%3Cuse href='%23e' x='224.9' y='254.4' width='43' height='26.15' transform='rotate(-7 246.4 267.5)'/%3E%3Cuse href='%23e' x='102.0' y='433.0' width='32' height='19.46' transform='rotate(-13 118.0 442.8)'/%3E%3Cuse href='%23e' x='634.7' y='1028.3' width='34' height='20.68' transform='rotate(-12 651.7 1038.7)'/%3E%3Cuse href='%23e' x='569.3' y='787.8' width='32' height='19.46' transform='rotate(12 585.3 797.5)'/%3E%3Cuse href='%23e' x='924.9' y='877.3' width='32' height='19.46' transform='rotate(3 940.9 887.0)'/%3E%3Cuse href='%23e' x='338.6' y='826.8' width='37' height='22.5' transform='rotate(-12 357.1 838.1)'/%3E%3Cuse href='%23e' x='222.7' y='1183.1' width='30' height='18.24' transform='rotate(9 237.7 1192.2)'/%3E%3Cuse href='%23e' x='531.7' y='1259.6' width='32' height='19.46' transform='rotate(8 547.7 1269.3)'/%3E%3Cuse href='%23e' x='909.3' y='614.7' width='45' height='27.37' transform='rotate(18 931.8 628.4)'/%3E%3Cuse href='%23e' x='613.4' y='913.2' width='34' height='20.68' transform='rotate(-9 630.4 923.6)'/%3E%3Cuse href='%23e' x='1040.6' y='176.6' width='31' height='18.85' transform='rotate(-6 1056.1 186.0)'/%3E%3Cuse href='%23e' x='1019.0' y='1016.6' width='41' height='24.93'/%3E%3Cuse href='%23e' x='647.4' y='1176.7' width='36' height='21.89' transform='rotate(12 665.4 1187.6)'/%3E%3Cuse href='%23e' x='709.7' y='287.4' width='44' height='26.76' transform='rotate(-3 731.7 300.8)'/%3E%3Cuse href='%23e' x='864.0' y='449.4' width='40' height='24.33' transform='rotate(-12 884.0 461.6)'/%3E%3Cuse href='%23e' x='948.6' y='327.8' width='38' height='23.11' transform='rotate(9 967.6 339.3)'/%3E%3Cuse href='%23e' x='-5.7' y='37.5' width='40' height='24.33' transform='rotate(-6 14.3 49.7)'/%3E%3Cuse href='%23e' x='1194.3' y='37.5' width='40' height='24.33' transform='rotate(-6 1214.3 49.7)'/%3E%3Cuse href='%23e' x='707.9' y='859.4' width='43' height='26.15' transform='rotate(3 729.4 872.5)'/%3E%3Cuse href='%23e' x='895.5' y='161.7' width='30' height='18.24' transform='rotate(18 910.5 170.9)'/%3E%3Cuse href='%23e' x='240.2' y='899.2' width='39' height='23.72' transform='rotate(-14 259.7 911.0)'/%3E%3Cuse href='%23e' x='473.8' y='121.6' width='43' height='26.15' transform='rotate(-6 495.3 134.6)'/%3E%3Cuse href='%23e' x='969.3' y='746.6' width='33' height='20.07' transform='rotate(8 985.8 756.6)'/%3E%3Cuse href='%23e' x='1085.5' y='66.0' width='33' height='20.07' transform='rotate(-14 1102.0 76.0)'/%3E%3Cuse href='%23e' x='1177.6' y='623.6' width='38' height='23.11' transform='rotate(-12 1196.6 635.1)'/%3E%3Cuse href='%23e' x='-22.4' y='623.6' width='38' height='23.11' transform='rotate(-12 -3.4 635.1)'/%3E%3Cuse href='%23e' x='269.0' y='1271.2' width='39' height='23.72' transform='rotate(-5 288.5 1283.0)'/%3E%3Cuse href='%23e' x='1081.3' y='1160.3' width='36' height='21.89' transform='rotate(7 1099.3 1171.2)'/%3E%3Cuse href='%23e' x='980.6' y='18.0' width='43' height='26.15' transform='rotate(15 1002.1 31.1)'/%3E%3Cuse href='%23e' x='980.6' y='1518.0' width='43' height='26.15' transform='rotate(15 1002.1 1531.1)'/%3E%3Cuse href='%23e' x='719.6' y='1323.9' width='42' height='25.54' transform='rotate(16 740.6 1336.7)'/%3E%3Cuse href='%23e' x='595.0' y='241.2' width='37' height='22.5' transform='rotate(15 613.5 252.5)'/%3E%3Cuse href='%23e' x='683.5' y='143.4' width='34' height='20.68' transform='rotate(-13 700.5 153.8)'/%3E%3Cuse href='%23e' x='1154.0' y='798.2' width='43' height='26.15' transform='rotate(3 1175.5 811.3)'/%3E%3Cuse href='%23e' x='-46.0' y='798.2' width='43' height='26.15' transform='rotate(3 -24.5 811.3)'/%3E%3Cuse href='%23e' x='1029.3' y='843.0' width='35' height='21.29' transform='rotate(-6 1046.8 853.7)'/%3E%3Cuse href='%23e' x='105.4' y='1128.2' width='34' height='20.68' transform='rotate(-9 122.4 1138.5)'/%3E%3Cuse href='%23e' x='892.0' y='1302.8' width='35' height='21.29' transform='rotate(16 909.5 1313.4)'/%3E%3Cuse href='%23e' x='789.3' y='112.6' width='44' height='26.76' transform='rotate(-10 811.3 126.0)'/%3E%3Cuse href='%23e' x='12.1' y='1193.0' width='40' height='24.33' transform='rotate(-4 32.1 1205.2)'/%3E%3Cuse href='%23e' x='1212.1' y='1193.0' width='40' height='24.33' transform='rotate(-4 1232.1 1205.2)'/%3E%3Cuse href='%23e' x='1023.4' y='1278.5' width='39' height='23.72' transform='rotate(-10 1042.9 1290.4)'/%3E%3Cuse href='%23e' x='1118.9' y='923.8' width='30' height='18.24' transform='rotate(4 1133.9 932.9)'/%3E%3Cuse href='%23e' x='580.8' y='55.3' width='31' height='18.85' transform='rotate(-12 596.3 64.7)'/%3E%3Cuse href='%23e' x='104.6' y='714.1' width='42' height='25.54' transform='rotate(-9 125.6 726.9)'/%3E%3Cuse href='%23e' x='765.6' y='1207.7' width='37' height='22.5' transform='rotate(7 784.1 1218.9)'/%3E%3Cuse href='%23e' x='819.8' y='835.6' width='43' height='26.15' transform='rotate(-3 841.3 848.7)'/%3E%3Cuse href='%23e' x='719.0' y='637.7' width='33' height='20.07' transform='rotate(9 735.5 647.7)'/%3E%3Cuse href='%23e' x='778.9' y='1075.7' width='33' height='20.07' transform='rotate(17 795.4 1085.7)'/%3E%3Cuse href='%23e' x='943.8' y='1167.9' width='30' height='18.24' transform='rotate(-16 958.8 1177.0)'/%3E%3Cuse href='%23e' x='606.2' y='1395.2' width='45' height='27.37' transform='rotate(2 628.7 1408.9)'/%3E%3Cuse href='%23e' x='726.7' y='966.8' width='43' height='26.15' transform='rotate(-8 748.2 979.8)'/%3E%3Cuse href='%23e' x='423.0' y='-4.4' width='33' height='20.07' transform='rotate(-8 439.5 5.7)'/%3E%3Cuse href='%23e' x='423.0' y='1495.6' width='33' height='20.07' transform='rotate(-8 439.5 1505.7)'/%3E%3Cuse href='%23e' x='837.2' y='1406.3' width='31' height='18.85' transform='rotate(-11 852.7 1415.7)'/%3E%3Cuse href='%23e' x='1029.7' y='1415.4' width='32' height='19.46' transform='rotate(7 1045.7 1425.1)'/%3E%3Cuse href='%23e' x='-11.0' y='1400.9' width='40' height='24.33' transform='rotate(-5 9.0 1413.1)'/%3E%3Cuse href='%23e' x='1189.0' y='1400.9' width='40' height='24.33' transform='rotate(-5 1209.0 1413.1)'/%3E%3Cuse href='%23e' x='722.2' y='-5.1' width='44' height='26.76' transform='rotate(16 744.2 8.2)'/%3E%3Cuse href='%23e' x='722.2' y='1494.9' width='44' height='26.76' transform='rotate(16 744.2 1508.2)'/%3E%3Cuse href='%23e' x='742.6' y='430.1' width='45' height='27.37' transform='rotate(7 765.1 443.8)'/%3E%3Cuse href='%23e' x='864.4' y='24.4' width='44' height='26.76' transform='rotate(13 886.4 37.8)'/%3E%3Cuse href='%23e' x='864.4' y='1524.4' width='44' height='26.76' transform='rotate(13 886.4 1537.8)'/%3E%3Cuse href='%23e' x='915.4' y='1042.6' width='39' height='23.72'/%3E%3Cuse href='%23e' x='98.6' y='1289.3' width='38' height='23.11' transform='rotate(-15 117.6 1300.9)'/%3E%3Cuse href='%23e' x='376.7' y='1278.8' width='35' height='21.29' transform='rotate(-5 394.2 1289.5)'/%3E%3Cuse href='%23e' x='497.0' y='1401.8' width='35' height='21.29' transform='rotate(5 514.5 1412.4)'/%3E%3Cuse href='%23e' x='316.2' y='201.1' width='38' height='23.11' transform='rotate(-13 335.2 212.6)'/%3E%3Cuse href='%23e' x='830.5' y='958.4' width='43' height='26.15' transform='rotate(-8 852.0 971.4)'/%3E%3Cuse href='%23e' x='164.3' y='1458.3' width='32' height='19.46' transform='rotate(-13 180.3 1468.1)'/%3E%3Cuse href='%23e' x='164.3' y='-41.7' width='32' height='19.46' transform='rotate(-13 180.3 -31.9)'/%3E%3Cuse href='%23e' x='1135.1' y='1284.2' width='34' height='20.68' transform='rotate(4 1152.1 1294.5)'/%3E%3Cuse href='%23e' x='334.3' y='1375.7' width='34' height='20.68' transform='rotate(13 351.3 1386.1)'/%3E%3Cuse href='%23e' x='275.6' y='1478.7' width='35' height='21.29' transform='rotate(-5 293.1 1489.3)'/%3E%3Cuse href='%23e' x='275.6' y='-21.3' width='35' height='21.29' transform='rotate(-5 293.1 -10.7)'/%3E%3Cuse href='%23e' x='192.4' y='1342.9' width='39' height='23.72' transform='rotate(-10 211.9 1354.7)'/%3E%3C/svg%3E"); --v32a-elos-marfim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1200' height='1500'%3E%3Cdefs%3E%3Csymbol id='e' viewBox='52 38 638 388'%3E%3Cpath d='M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6' fill='none' stroke='%237A5A1E' stroke-width='65'/%3E%3Ccircle cx='452.6' cy='239.6' r='32.5' fill='%237A5A1E'/%3E%3Cg transform='rotate(180 371 232)'%3E%3Cpath d='M296.01 84.35A155 155 0 1 0 352.6 339.6L452.6 239.6' fill='none' stroke='%237A5A1E' stroke-width='65'/%3E%3Ccircle cx='452.6' cy='239.6' r='32.5' fill='%237A5A1E'/%3E%3C/g%3E%3C/symbol%3E%3C/defs%3E%3Cuse href='%23e' x='509.1' y='381.9' width='38' height='23.11' transform='rotate(-8 528.1 393.4)'/%3E%3Cuse href='%23e' x='427.1' y='242.6' width='36' height='21.89' transform='rotate(16 445.1 253.6)'/%3E%3Cuse href='%23e' x='269.0' y='359.3' width='42' height='25.54' transform='rotate(-7 290.0 372.1)'/%3E%3Cuse href='%23e' x='298.6' y='86.3' width='45' height='27.37' transform='rotate(2 321.1 100.0)'/%3E%3Cuse href='%23e' x='371.6' y='534.0' width='30' height='18.24' transform='rotate(17 386.6 543.1)'/%3E%3Cuse href='%23e' x='512.9' y='523.2' width='39' height='23.72' transform='rotate(-9 532.4 535.1)'/%3E%3Cuse href='%23e' x='178.9' y='507.5' width='43' height='26.15' transform='rotate(4 200.4 520.6)'/%3E%3Cuse href='%23e' x='112.4' y='324.3' width='44' height='26.76' transform='rotate(2 134.4 337.7)'/%3E%3Cuse href='%23e' x='311.7' y='675.8' width='31' height='18.85' transform='rotate(1 327.2 685.2)'/%3E%3Cuse href='%23e' x='648.0' y='402.1' width='35' height='21.29' transform='rotate(-2 665.5 412.7)'/%3E%3Cuse href='%23e' x='450.8' y='672.0' width='35' height='21.29' transform='rotate(7 468.3 682.7)'/%3E%3Cuse href='%23e' x='180.3' y='815.1' width='37' height='22.5' transform='rotate(-4 198.8 826.3)'/%3E%3Cuse href='%23e' x='45.3' y='924.7' width='43' height='26.15' transform='rotate(12 66.8 937.8)'/%3E%3Cuse href='%23e' x='155.8' y='988.2' width='40' height='24.33' transform='rotate(2 175.8 1000.4)'/%3E%3Cuse href='%23e' x='1177.1' y='355.1' width='32' height='19.46' transform='rotate(-16 1193.1 364.8)'/%3E%3Cuse href='%23e' x='-22.9' y='355.1' width='32' height='19.46' transform='rotate(-16 -6.9 364.8)'/%3E%3Cuse href='%23e' x='14.6' y='516.2' width='36' height='21.89' transform='rotate(-11 32.6 527.2)'/%3E%3Cuse href='%23e' x='1214.6' y='516.2' width='36' height='21.89' transform='rotate(-11 1232.6 527.2)'/%3E%3Cuse href='%23e' x='584.6' y='621.2' width='38' height='23.11' transform='rotate(-15 603.6 632.7)'/%3E%3Cuse href='%23e' x='1170.8' y='1054.8' width='41' height='24.93' transform='rotate(6 1191.3 1067.2)'/%3E%3Cuse href='%23e' x='-29.2' y='1054.8' width='41' height='24.93' transform='rotate(6 -8.7 1067.2)'/%3E%3Cuse href='%23e' x='357.7' y='974.4' width='43' height='26.15' transform='rotate(-12 379.2 987.4)'/%3E%3Cuse href='%23e' x='104.5' y='134.6' width='35' height='21.29' transform='rotate(15 122.0 145.2)'/%3E%3Cuse href='%23e' x='478.4' y='1056.0' width='46' height='27.97' transform='rotate(14 501.4 1070.0)'/%3E%3Cuse href='%23e' x='1083.5' y='472.0' width='40' height='24.33' transform='rotate(-12 1103.5 484.2)'/%3E%3Cuse href='%23e' x='464.8' y='792.6' width='33' height='20.07' transform='rotate(-5 481.3 802.6)'/%3E%3Cuse href='%23e' x='226.3' y='1078.1' width='31' height='18.85' transform='rotate(-7 241.8 1087.5)'/%3E%3Cuse href='%23e' x='491.2' y='921.8' width='36' height='21.89' transform='rotate(-11 509.2 932.8)'/%3E%3Cuse href='%23e' x='428.7' y='1165.9' width='39' height='23.72' transform='rotate(-13 448.2 1177.7)'/%3E%3Cuse href='%23e' x='1063.8' y='365.9' width='37' height='22.5' transform='rotate(-6 1082.3 377.1)'/%3E%3Cuse href='%23e' x='757.4' y='537.8' width='34' height='20.68' transform='rotate(-6 774.4 548.1)'/%3E%3Cuse href='%23e' x='1067.5' y='620.0' width='39' height='23.72' transform='rotate(-13 1087.0 631.9)'/%3E%3Cuse href='%23e' x='64.0' y='813.1' width='34' height='20.68' transform='rotate(-13 81.0 823.4)'/%3E%3Cuse href='%23e' x='97.4' y='603.7' width='43' height='26.15' transform='rotate(2 118.9 616.8)'/%3E%3Cuse href='%23e' x='849.0' y='712.2' width='34' height='20.68' transform='rotate(9 866.0 722.5)'/%3E%3Cuse href='%23e' x='402.5' y='404.5' width='43' height='26.15' transform='rotate(-1 424.0 417.5)'/%3E%3Cuse href='%23e' x='635.9' y='530.6' width='37' height='22.5' transform='rotate(-8 654.4 541.8)'/%3E%3Cuse href='%23e' x='971.7' y='471.0' width='37' height='22.5' transform='rotate(-1 990.2 482.3)'/%3E%3Cuse href='%23e' x='673.4' y='735.3' width='37' height='22.5' transform='rotate(-10 691.9 746.6)'/%3E%3Cuse href='%23e' x='199.8' y='668.3' width='39' height='23.72' transform='rotate(18 219.3 680.1)'/%3E%3Cuse href='%23e' x='332.1' y='1108.1' width='37' height='22.5' transform='rotate(3 350.6 1119.4)'/%3E%3Cuse href='%23e' x='1140.5' y='198.7' width='42' height='25.54' transform='rotate(5 1161.5 211.5)'/%3E%3Cuse href='%23e' x='-59.5' y='198.7' width='42' height='25.54' transform='rotate(5 -38.5 211.5)'/%3E%3Cuse href='%23e' x='841.7' y='324.9' width='32' height='19.46' transform='rotate(-3 857.7 334.6)'/%3E%3Cuse href='%23e' x='230.4' y='257.8' width='32' height='19.46' transform='rotate(8 246.4 267.5)'/%3E%3Cuse href='%23e' x='98.0' y='430.6' width='40' height='24.33' transform='rotate(7 118.0 442.8)'/%3E%3Cuse href='%23e' x='636.7' y='1029.6' width='30' height='18.24' transform='rotate(-3 651.7 1038.7)'/%3E%3Cuse href='%23e' x='566.8' y='786.3' width='37' height='22.5' transform='rotate(11 585.3 797.5)'/%3E%3Cuse href='%23e' x='920.4' y='874.5' width='41' height='24.93' transform='rotate(13 940.9 887.0)'/%3E%3Cuse href='%23e' x='337.6' y='826.2' width='39' height='23.72' transform='rotate(16 357.1 838.1)'/%3E%3Cuse href='%23e' x='215.7' y='1178.8' width='44' height='26.76' transform='rotate(7 237.7 1192.2)'/%3E%3Cuse href='%23e' x='531.2' y='1259.3' width='33' height='20.07' transform='rotate(-2 547.7 1269.3)'/%3E%3Cuse href='%23e' x='916.3' y='619.0' width='31' height='18.85' transform='rotate(8 931.8 628.4)'/%3E%3Cuse href='%23e' x='607.4' y='909.6' width='46' height='27.97' transform='rotate(2 630.4 923.6)'/%3E%3Cuse href='%23e' x='1038.6' y='175.4' width='35' height='21.29' transform='rotate(-6 1056.1 186.0)'/%3E%3Cuse href='%23e' x='1021.5' y='1018.1' width='36' height='21.89' transform='rotate(-8 1039.5 1029.1)'/%3E%3Cuse href='%23e' x='644.4' y='1174.8' width='42' height='25.54' transform='rotate(-13 665.4 1187.6)'/%3E%3Cuse href='%23e' x='713.2' y='289.5' width='37' height='22.5' transform='rotate(-5 731.7 300.8)'/%3E%3Cuse href='%23e' x='868.5' y='452.2' width='31' height='18.85' transform='rotate(-2 884.0 461.6)'/%3E%3Cuse href='%23e' x='951.6' y='329.6' width='32' height='19.46' transform='rotate(4 967.6 339.3)'/%3E%3Cuse href='%23e' x='-8.2' y='36.0' width='45' height='27.37' transform='rotate(-14 14.3 49.7)'/%3E%3Cuse href='%23e' x='1191.8' y='36.0' width='45' height='27.37' transform='rotate(-14 1214.3 49.7)'/%3E%3Cuse href='%23e' x='711.9' y='861.8' width='35' height='21.29' transform='rotate(9 729.4 872.5)'/%3E%3Cuse href='%23e' x='889.0' y='157.8' width='43' height='26.15' transform='rotate(-1 910.5 170.9)'/%3E%3Cuse href='%23e' x='239.7' y='898.9' width='40' height='24.33' transform='rotate(-16 259.7 911.0)'/%3E%3Cuse href='%23e' x='475.8' y='122.8' width='39' height='23.72' transform='rotate(14 495.3 134.6)'/%3E%3Cuse href='%23e' x='966.3' y='744.7' width='39' height='23.72' transform='rotate(15 985.8 756.6)'/%3E%3Cuse href='%23e' x='1083.5' y='64.8' width='37' height='22.5' transform='rotate(-14 1102.0 76.0)'/%3E%3Cuse href='%23e' x='1180.6' y='625.4' width='32' height='19.46' transform='rotate(4 1196.6 635.1)'/%3E%3Cuse href='%23e' x='-19.4' y='625.4' width='32' height='19.46' transform='rotate(4 -3.4 635.1)'/%3E%3Cuse href='%23e' x='269.0' y='1271.2' width='39' height='23.72' transform='rotate(-15 288.5 1283.0)'/%3E%3Cuse href='%23e' x='1083.8' y='1161.8' width='31' height='18.85' transform='rotate(-3 1099.3 1171.2)'/%3E%3Cuse href='%23e' x='979.6' y='17.4' width='45' height='27.37' transform='rotate(-16 1002.1 31.1)'/%3E%3Cuse href='%23e' x='979.6' y='1517.4' width='45' height='27.37' transform='rotate(-16 1002.1 1531.1)'/%3E%3Cuse href='%23e' x='720.6' y='1324.5' width='40' height='24.33' transform='rotate(-12 740.6 1336.7)'/%3E%3Cuse href='%23e' x='591.0' y='238.8' width='45' height='27.37' transform='rotate(6 613.5 252.5)'/%3E%3Cuse href='%23e' x='677.5' y='139.8' width='46' height='27.97' transform='rotate(-18 700.5 153.8)'/%3E%3Cuse href='%23e' x='1158.0' y='800.7' width='35' height='21.29' transform='rotate(-3 1175.5 811.3)'/%3E%3Cuse href='%23e' x='-42.0' y='800.7' width='35' height='21.29' transform='rotate(-3 -24.5 811.3)'/%3E%3Cuse href='%23e' x='1027.8' y='842.1' width='38' height='23.11' transform='rotate(-5 1046.8 853.7)'/%3E%3Cuse href='%23e' x='104.9' y='1127.8' width='35' height='21.29' transform='rotate(-5 122.4 1138.5)'/%3E%3Cuse href='%23e' x='888.5' y='1300.7' width='42' height='25.54' transform='rotate(18 909.5 1313.4)'/%3E%3Cuse href='%23e' x='791.8' y='114.1' width='39' height='23.72' transform='rotate(-14 811.3 126.0)'/%3E%3Cuse href='%23e' x='16.6' y='1195.7' width='31' height='18.85' transform='rotate(2 32.1 1205.2)'/%3E%3Cuse href='%23e' x='1216.6' y='1195.7' width='31' height='18.85' transform='rotate(2 1232.1 1205.2)'/%3E%3Cuse href='%23e' x='1020.4' y='1276.7' width='45' height='27.37' transform='rotate(-3 1042.9 1290.4)'/%3E%3Cuse href='%23e' x='1115.4' y='921.7' width='37' height='22.5' transform='rotate(3 1133.9 932.9)'/%3E%3Cuse href='%23e' x='579.8' y='54.7' width='33' height='20.07' transform='rotate(-15 596.3 64.7)'/%3E%3Cuse href='%23e' x='108.6' y='716.6' width='34' height='20.68' transform='rotate(-5 125.6 726.9)'/%3E%3Cuse href='%23e' x='766.6' y='1208.3' width='35' height='21.29' transform='rotate(11 784.1 1218.9)'/%3E%3Cuse href='%23e' x='820.3' y='835.9' width='42' height='25.54' transform='rotate(11 841.3 848.7)'/%3E%3Cuse href='%23e' x='714.0' y='634.7' width='43' height='26.15' transform='rotate(-11 735.5 647.7)'/%3E%3Cuse href='%23e' x='775.4' y='1073.6' width='40' height='24.33' transform='rotate(-6 795.4 1085.7)'/%3E%3Cuse href='%23e' x='938.3' y='1164.5' width='41' height='24.93' transform='rotate(-8 958.8 1177.0)'/%3E%3Cuse href='%23e' x='610.7' y='1397.9' width='36' height='21.89' transform='rotate(3 628.7 1408.9)'/%3E%3Cuse href='%23e' x='732.7' y='970.4' width='31' height='18.85' transform='rotate(16 748.2 979.8)'/%3E%3Cuse href='%23e' x='418.5' y='-7.1' width='42' height='25.54' transform='rotate(17 439.5 5.7)'/%3E%3Cuse href='%23e' x='418.5' y='1492.9' width='42' height='25.54' transform='rotate(17 439.5 1505.7)'/%3E%3Cuse href='%23e' x='834.2' y='1404.5' width='37' height='22.5' transform='rotate(-4 852.7 1415.7)'/%3E%3Cuse href='%23e' x='1026.7' y='1413.6' width='38' height='23.11' transform='rotate(-12 1045.7 1425.1)'/%3E%3Cuse href='%23e' x='-7.5' y='1403.0' width='33' height='20.07' transform='rotate(-9 9.0 1413.1)'/%3E%3Cuse href='%23e' x='1192.5' y='1403.0' width='33' height='20.07' transform='rotate(-9 1209.0 1413.1)'/%3E%3Cuse href='%23e' x='724.7' y='-3.6' width='39' height='23.72' transform='rotate(-12 744.2 8.2)'/%3E%3Cuse href='%23e' x='724.7' y='1496.4' width='39' height='23.72' transform='rotate(-12 744.2 1508.2)'/%3E%3Cuse href='%23e' x='744.6' y='431.4' width='41' height='24.93' transform='rotate(-9 765.1 443.8)'/%3E%3Cuse href='%23e' x='870.4' y='28.1' width='32' height='19.46' transform='rotate(-16 886.4 37.8)'/%3E%3Cuse href='%23e' x='870.4' y='1528.1' width='32' height='19.46' transform='rotate(-16 886.4 1537.8)'/%3E%3Cuse href='%23e' x='917.9' y='1044.1' width='34' height='20.68' transform='rotate(3 934.9 1054.4)'/%3E%3Cuse href='%23e' x='94.6' y='1286.9' width='46' height='27.97' transform='rotate(9 117.6 1300.9)'/%3E%3Cuse href='%23e' x='377.2' y='1279.2' width='34' height='20.68' transform='rotate(17 394.2 1289.5)'/%3E%3Cuse href='%23e' x='495.5' y='1400.9' width='38' height='23.11' transform='rotate(11 514.5 1412.4)'/%3E%3Cuse href='%23e' x='315.2' y='200.4' width='40' height='24.33' transform='rotate(-2 335.2 212.6)'/%3E%3Cuse href='%23e' x='835.0' y='961.1' width='34' height='20.68' transform='rotate(1 852.0 971.4)'/%3E%3Cuse href='%23e' x='158.8' y='1455.0' width='43' height='26.15' transform='rotate(-11 180.3 1468.1)'/%3E%3Cuse href='%23e' x='158.8' y='-45.0' width='43' height='26.15' transform='rotate(-11 180.3 -31.9)'/%3E%3Cuse href='%23e' x='1131.1' y='1281.8' width='42' height='25.54' transform='rotate(6 1152.1 1294.5)'/%3E%3Cuse href='%23e' x='332.3' y='1374.5' width='38' height='23.11' transform='rotate(-11 351.3 1386.1)'/%3E%3Cuse href='%23e' x='274.1' y='1477.8' width='38' height='23.11' transform='rotate(6 293.1 1489.3)'/%3E%3Cuse href='%23e' x='274.1' y='-22.2' width='38' height='23.11' transform='rotate(6 293.1 -10.7)'/%3E%3Cuse href='%23e' x='194.9' y='1344.4' width='34' height='20.68' transform='rotate(-14 211.9 1354.7)'/%3E%3C/svg%3E"); }
.monograma { background-image: var(--v32a-elos); background-size: 1200px 1500px; }
.monograma.monograma--marfim { background-image: var(--v32a-elos-marfim); }
@media (max-width: 767px) { .monograma { background-size: 960px 1200px; } }
/* </ladrilho> */

/* Cobertura: antes cada seção apagava os elos numa faixa de (onda + 24) a (onda + 120) px em cima E embaixo, com onda
   ou sem onda; daí o trecho liso acima do título das quatro fases. Agora cada borda só apaga o que precisa:
   - borda com onda por cima (onda que desce do topo ou que sobe do pé): a máscara segue a própria curva da onda, com
     ~26 px de folga e um esfumado curto, então nenhum elo aparece cortado pela onda e nenhum trecho fica sem elos;
   - borda sem onda (uma seção encostada na outra): só um esfumado de 20 px, para nenhum elo ser cortado em linha reta.
   Três camadas: a faixa de cima (2 × onda), o meio cheio e a faixa de baixo (2 × onda). */
.com-monograma:not(.qx__palco) > .monograma {
  --v32a-mt: linear-gradient(180deg, transparent 0, #000 20px);
  --v32a-mb: linear-gradient(0deg, transparent 0, #000 20px);
  -webkit-mask-image: var(--v32a-mt), linear-gradient(#000 0 0), var(--v32a-mb); mask-image: var(--v32a-mt), linear-gradient(#000 0 0), var(--v32a-mb);
  -webkit-mask-size: 100% calc(2 * var(--onda-h)), 100% calc(100% - 4 * var(--onda-h) + 4px), 100% calc(2 * var(--onda-h));
  mask-size: 100% calc(2 * var(--onda-h)), 100% calc(100% - 4 * var(--onda-h) + 4px), 100% calc(2 * var(--onda-h));
  -webkit-mask-position: 0 0, 0 50%, 0 100%; mask-position: 0 0, 0 50%, 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* a onda que desce do topo (onda--topo-sobre) cobre o começo da seção de baixo */
.onda--topo-sobre + .com-monograma > .monograma {
  --v32a-mt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-300' width='2040' height='1000'%3E%3CfeGaussianBlur stdDeviation='0 14'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' transform='translate(0 40)' d='M-300 40H0C240 0 480 0 720 38C960 76 1200 84 1440 34H1740V700H-300Z'/%3E%3C/svg%3E");
}
/* a onda que sobe do pé (onda--sobre) cobre o fim da seção de cima */
.com-monograma:has(+ .onda--sobre) > .monograma {
  --v32a-mb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -90 1440 180' preserveAspectRatio='none'%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-800' width='2040' height='1000'%3E%3CfeGaussianBlur stdDeviation='0 14'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' transform='translate(0 -40)' d='M-300 44H0C260 84 520 84 760 44C1000 4 1200 0 1440 38H1740V-700H-300Z'/%3E%3C/svg%3E");
}

/* o topo da home (planeta) não tinha a camada: o build agora põe (fundo-elos.mjs, FUNDO += hpl); fica sobre a névoa
   (z 0) e sob o planeta (z 2) */
.hpl > .monograma { z-index: 1; }

/* =====================================================================================================================
   3b · NENHUM FUNDO SE MEXE COM A ROLAGEM
   Regra: o fundo anda junto com o que está na frente dele. Onde a rolagem rola a página, o fundo rola junto (nada de
   background-attachment: fixed, que fazia o fundo ficar parado enquanto o conteúdo passava: paralaxe). Onde um palco
   fica preso (sticky), o fundo fica preso junto, pelo mesmo mecanismo (sticky, feito pelo compositor, sem JS por quadro).
   A seção Quem é a Conex (.qx) é da frente c e não entra aqui.
   ===================================================================================================================== */
.cf2--vivo, .cf2--vivo > .monograma, .cx--vivo > .monograma, .anima .hp, .anima .hp > .monograma, .semana--viva > .monograma,
.ct--vivo > .monograma { background-attachment: scroll !important; }

/* Palcos presos do COMPUTADOR (quatro fases da home; a conversa do Contato no fim de cada página): a camada dos elos da
   seção fica transparente e um ::before dela vira a tela de elos presa (sticky). O JS (v32a-fundo-preso) mede o palco e
   dá --v32a-pt (o "top" em que o fundo prende, para prender no MESMO instante que o palco) e --v32a-ph (a altura, para
   soltar no mesmo instante). Antes: background-attachment: fixed, o fundo parado enquanto a seção entrava e saía.
   A faixa de cima da máscara (a curva da onda) desce junto com o topo da seção enquanto ele sai da tela (--v32a-d). */
.v32a-fundo-preso { --v32a-mt: linear-gradient(180deg, transparent 0, #000 20px); }
.onda--topo-sobre + .v32a-fundo-preso { --v32a-mt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-300' y='-300' width='2040' height='1000'%3E%3CfeGaussianBlur stdDeviation='0 14'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' transform='translate(0 40)' d='M-300 40H0C240 0 480 0 720 38C960 76 1200 84 1440 34H1740V700H-300Z'/%3E%3C/svg%3E"); }
.com-monograma.v32a-fundo-preso > .monograma { background-image: none !important; opacity: 1; -webkit-mask-image: none; mask-image: none; }
.com-monograma.v32a-fundo-preso > .monograma::before { content: ''; position: sticky; top: var(--v32a-pt, 0px); display: block; height: var(--v32a-ph, 100svh);
  background-image: var(--v32a-elos); background-size: 1200px 1500px; background-position: 50% 0; opacity: 0.12;
  -webkit-mask-image: var(--v32a-mt), linear-gradient(#000 0 0), linear-gradient(0deg, transparent 0, #000 20px);
  mask-image: var(--v32a-mt), linear-gradient(#000 0 0), linear-gradient(0deg, transparent 0, #000 20px);
  -webkit-mask-size: 100% calc(2 * var(--onda-h)), 100% calc(100% - 2 * var(--onda-h) - 40px), 100% 40px; mask-size: 100% calc(2 * var(--onda-h)), 100% calc(100% - 2 * var(--onda-h) - 40px), 100% 40px;
  -webkit-mask-position: 0 calc(-1 * var(--v32a-d, 0px)), 0 calc(2 * var(--onda-h) - var(--v32a-d, 0px) - 2px), 0 100%;
  mask-position: 0 calc(-1 * var(--v32a-d, 0px)), 0 calc(2 * var(--onda-h) - var(--v32a-d, 0px) - 2px), 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* a luz da seção das fases passa para o palco (que já fica preso); a seção fica no marinho liso */
@media (min-width: 900px) {
  .anima .cf2.cf2--vivo.v32a-fundo-preso { background: #0B2035; }
  .cf2--vivo.v32a-fundo-preso .cf2__palco { background: radial-gradient(55% 55% at 12% 30%, rgba(46, 111, 163, 0.28), transparent 70%); }
}

/* Quatro fases no CELULAR (palco A, .fz): o cartão fica preso por um trilho; antes os elos e a luz da seção corriam por
   trás dele. Agora o próprio palco preso leva um fundo da largura da tela (marinho e os elos, alinhados com os da
   seção na chegada, pelo --v32a-fz-y do JS); a seção fica só no marinho. O pé do fundo do palco esfuma para a emenda
   com a seção não cortar elo nenhum. A foto do cartão também deixa de derivar com a rolagem (era fundo do cartão). */
@media (max-width: 899px) {
  .cf2[data-fases="a"] { background: #0B2035; }
  [data-fases="a"] .fz--vivo .fz__palco::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none;
    background: #0B2035;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); }
  [data-fases="a"] .fz--vivo .fz__palco::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none;
    background-image: var(--v32a-elos); opacity: 0.12; background-size: var(--v32a-fz-tam, 960px 1200px); background-position: 50% var(--v32a-fz-y, 0px);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); }
  [data-fases="a"] .fz--vivo .fz-c__foto { translate: none !important; }
}

/* a página de privacidade não tem seção (é um <article>): os elos entram num ::before do próprio texto */
.texto-legal { position: relative; isolation: isolate; }
.texto-legal::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--v32a-elos); background-size: 1200px 1500px;
  background-position: 50% 0; opacity: 0.12; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 20px); mask-image: linear-gradient(0deg, transparent 0, #000 20px); }
@media (max-width: 767px) { .texto-legal::before { background-size: 960px 1200px; } }

/* zzzzzz-v32-b-fases-comp.css */
/* ===================== v32 · frente b-fases-comp (JM, 11/10) =====================
   Home: quatro fases (título, painel "A Conex / Você", palco parado, espaços) e o comparativo CLT × Conex.
   Carrega por último (ordem alfabética). */

/* ===== 1a · título das quatro fases: maior no celular, e a segunda metade em dourado itálico (nas duas telas) ===== */
.cf2 .cf2-pal:is([data-i="2"], [data-i="3"], [data-i="4"], [data-i="5"], [data-i="6"], [data-i="7"]) { font-style: italic; color: #E8CE93; }
@media (max-width: 899px) {
  .cf2 h2#como-titulo { max-width: 13ch; font-size: clamp(2.5rem, 1.6rem + 4vw, 3.1rem); line-height: 1.02; letter-spacing: -0.03em; }
  .cf2__cabeca { gap: 14px; }
}

/* ===== 1c · o palco não se mexe com a rolagem: a foto e o objeto ficam parados; só trocam no lugar (esmaecendo) ===== */
@media (max-width: 899px) {
  [data-fases="a"] .fz--vivo .fz-c__foto { translate: none; scale: none; transition: opacity 520ms linear; }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="on"] .fz-c__foto { scale: none; }
  [data-fases="a"] .fz--vivo .fz-c__obj { transform: none; scale: 0.9; rotate: 0deg; transition: opacity 360ms linear, scale 600ms cubic-bezier(.22, 1, .36, 1); }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="on"] .fz-c__obj { scale: 1; rotate: 0deg; }
  [data-fases="a"] .fz--vivo .fz-c[data-lado="antes"] .fz-c__obj { scale: 0.9; rotate: 0deg; }
}

/* ===== 2 · espaços: menos vão em cima do título e entre o fim das fases e a seção seguinte (só o lado das fases) ===== */
@media (max-width: 899px) {
  .cf2.secao { padding-block: 0; }
  .cf2:not(.cf2--vivo) .cf2__palco { padding-top: calc(var(--onda-h) + 30px); padding-bottom: 8px; }
  .cf2 .fz { margin-top: 20px; }
  /* a última fase segura menos tempo antes de a seção soltar (era 16svh) */
  [data-fases="a"] .cf2 .fz--vivo .fz__trilho, .cf2[data-fases="a"] .fz--vivo .fz__trilho { height: calc(100svh + 3 * 34svh + 6svh); }
}

/* ===== 1b · painel da fase: uma linha do que a Conex faz e uma do que fica com você ===== */
@media (max-width: 767px) {
  .cf2-painel .cf2-fase__frase { display: none; }
  /* menos texto na capa (o "quando" repetia o subtítulo) e o objeto 3D solto, sem a placa de vidro que o guardava */
  .cf2-painel .cf2-fase__quando { display: none; }
  .cf2-painel .cf2-fase__cab .cf2-placa { width: 64px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cf2-painel .cf2-fase__cab .cf2-placa img { width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); }
  .cf2-fase__corpo { padding: 6px 20px 18px; }
  .v32b-qf { display: grid; }
  .v32b-qf__l { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0; padding: 16px 0; }
  .v32b-qf__l + .v32b-qf__l { border-top: 1px solid rgba(233, 242, 248, 0.12); }
  .v32b-qf__ic { width: 44px; height: 44px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .v32b-qf__l--conex .v32b-qf__ic { color: #8FC0DA; }
  .v32b-qf__l--voce .v32b-qf__ic { color: #E8CE93; }
  .v32b-qf__ic .d { stroke: #D8AC52; }
  .v32b-qf__l--voce .v32b-qf__ic .d { stroke: #F4E2B4; }
  .v32b-qf__l > span { display: grid; gap: 4px; }
  .v32b-qf__l small { font: 700 0.6875rem/1.2 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase; }
  .v32b-qf__l--conex small { color: #8FC0DA; }
  .v32b-qf__l--voce small { color: #E8CE93; }
  .v32b-qf__l b { font: 400 1.5rem/1.12 var(--f-titulo); letter-spacing: -0.015em; color: #FFFFFF; text-wrap: balance; }
  /* quando a fase aparece: o desenho se traça e a frase entra; a linha de você vem logo depois */
  .v32b-qf__ic [pathLength] { stroke-dasharray: 1; }
  .anima .cf2-fase:not([hidden]) .v32b-qf__ic [pathLength] { animation: v32b-traca 900ms cubic-bezier(.65, 0, .35, 1) both; }
  .anima .cf2-fase:not([hidden]) .v32b-qf__l > span { animation: v32b-entra 600ms cubic-bezier(.22, 1, .36, 1) both; }
  .anima .cf2-fase:not([hidden]) .v32b-qf__l--conex :is(.v32b-qf__ic [pathLength], span) { animation-delay: 260ms; }
  .anima .cf2-fase:not([hidden]) .v32b-qf__l--voce :is(.v32b-qf__ic [pathLength], span) { animation-delay: 520ms; }
  .anima .cf2-fase:not([hidden]) .v32b-qf__ic .d { animation-delay: 620ms !important; }
  .anima .cf2-fase:not([hidden]) .v32b-qf__l--voce .v32b-qf__ic .d { animation-delay: 880ms !important; }
}
@keyframes v32b-traca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes v32b-entra { from { opacity: 0; translate: 12px 0; } }
@media (prefers-reduced-motion: reduce) { .v32b-qf *, .v32b-qf__ic [pathLength] { animation: none !important; stroke-dasharray: none; } }

/* ===== 3 · comparativo ===== */
/* 3a · as duas fichas no padrão de cartão aprovado pelo JM em 11/10 (o mesmo desenho do .cartao-bpo, replicado aqui com
   nome próprio para não depender da frente do BPO): a da Conex marinho, a do assistente na variante clara marfim, as duas
   com a marca d'água dos elos em evidência no canto de baixo, cortada pela borda. Por dentro, fio duplo sob o nome
   (como num demonstrativo), linhas tracejadas e o total. Nada de branco, nada acende. */
.cp .cp__ficha { position: relative; isolation: isolate; overflow: hidden; border-radius: 26px; }
.cp .cp__ficha::before { content: ''; position: absolute; z-index: -1; right: -20%; bottom: -14%; width: 92%; aspect-ratio: 662 / 412; pointer-events: none;
  -webkit-mask: url('/cartao-elos.svg') center / contain no-repeat; mask: url('/cartao-elos.svg') center / contain no-repeat; }
.cp .cp__ficha--conex { color: #F7F3EA;
  background: radial-gradient(120% 70% at 100% 0%, rgba(216, 172, 82, 0.16) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.2), 0 34px 54px -36px rgba(6, 18, 31, 0.9); }
.cp .cp__ficha--conex::before { background: #E8CE93; opacity: 0.22; }
.cp .cp__ficha--clt { color: #0B2035;
  background: radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, #F6EEDC 0%, #EFE2C6 60%, #E8D7B4 100%);
  box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.28), 0 34px 54px -36px rgba(74, 52, 12, 0.55); }
.cp .cp__ficha--clt::before { background: #9A7120; opacity: 0.2; }
.cp .cp__ficha header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 3px double rgba(11, 32, 53, 0.7); }
.cp .cp__ficha--conex header { border-bottom-color: rgba(232, 206, 147, 0.75); }
.cp .cp__quem { font: 500 1.6rem/1.08 var(--f-titulo); letter-spacing: -0.015em; }
.cp .cp__ficha--clt .cp__sub { color: #6E5420; }
/* 3b · os desenhos soltos, sem a caixinha: a carteira de trabalho e os elos entram no canto da ficha */
.cp .cp__ficha header > .cp__ctps { flex: none; width: 58px; height: 58px; margin: -6px -4px -8px 0; rotate: 7deg; filter: drop-shadow(0 8px 10px rgba(74, 52, 12, 0.22)); }
.cp .cp__ficha header > .cp__elos { flex: none; width: 64px; height: auto; margin-right: -2px; }
.cp .cp__ficha .cp__total { padding: 12px 0 14px; border-top: 0; border-bottom: 1px solid rgba(11, 32, 53, 0.16); }
.cp .cp__ficha--conex .cp__total { border-bottom-color: rgba(232, 206, 147, 0.28); }
.cp .cp__ficha--clt .cp__total b { color: #8E3426; }
/* a barra do que compõe o custo, nos tons da marca (marinho ao dourado) */
.cp .cp__barra { gap: 2px; height: 10px; border-radius: 3px; }
.cp .cp__barra .cp__c--sal { background: #0B2035; } .cp .cp__barra .cp__c--enc { background: #3E5A73; } .cp .cp__barra .cp__c--pro { background: #7FA7C2; }
.cp .cp__barra .cp__c--ben { background: #B88A2B; } .cp .cp__barra .cp__c--est { background: #DCC48F; }
.cp .cp__metade { color: #4A5866; }
.cp .cp__metade b { color: #0B2035; }
.cp .cp__ficha--clt dl > div { border-bottom: 1px dashed rgba(11, 32, 53, 0.2); }
.cp .cp__ficha--clt dl > div:last-child { border-bottom: 0; }
.cp .cp__ficha--clt dt small { color: #5A6470; }
/* 3c · um desenho de traço por gasto: marinho, com o detalhe na cor do trecho dele na barra */
.cp__gi { flex: none; width: 26px; height: 26px; margin-top: -2px; fill: none; stroke: #0B2035; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cp__gi .d { stroke: var(--gc, #B88A2B); stroke-width: 1.9; }
.cp__gi--sal { --gc: #B88A2B; } .cp__gi--enc { --gc: #3E5A73; } .cp__gi--pro { --gc: #4F84A6; } .cp__gi--ben { --gc: #B88A2B; } .cp__gi--est { --gc: #A9822F; }
.cp .cp__ficha--conex dt .cp__gi { width: 24px; height: 24px; margin-top: 0; stroke: rgba(232, 206, 147, 0.62); }
.cp .cp__ficha--conex dt .cp__gi .d { stroke: #D8AC52; }
.cp .cp__ficha--conex dt { gap: 10px; }
.cp .cp__ficha--conex dl > div { border-bottom: 1px dashed rgba(232, 206, 147, 0.18); }
@media (max-width: 899px) {
  .cp.cp--seg .cp__ficha header { min-height: 0; padding-bottom: 12px; }
  .cp.cp--seg .cp__quem { font-size: 1.5rem; }
  .cp .cp__ficha header > .cp__ctps { width: 52px; height: 52px; }
  .cp .cp__ficha header > .cp__elos { width: 56px; }
  .cp.cp--seg .cp__total { padding: 10px 0 12px; }
  .cp__gi { width: 24px; height: 24px; }
}

/* 3d · a diferença além do preço: três linhas, cada uma com o desenho do ponto e o contraste curto, do assistente
   (cinza) para a Conex (marinho, Newsreader), ligados por uma seta dourada que se traça */
.cp .v32b-dif { display: grid; gap: 0; max-width: 680px; margin: clamp(32px, 4vw, 48px) auto 0; }
.v32b-dif__cab, .v32b-dif__l { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 12px; align-items: center; }
.v32b-dif__cab { padding: 0 0 10px; border-bottom: 3px double rgba(11, 32, 53, 0.55); }
.v32b-dif__cab > span { display: flex; align-items: center; gap: 8px; font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #5B6875; }
.v32b-dif__cab .v32b-dif__cc { padding-left: 34px; color: #0B2035; }
.v32b-dif__cab .cp__ctps { flex: none; width: 22px; height: 22px; }
.v32b-dif__cab .cp__elos { flex: none; width: 28px; height: auto; }
.v32b-dif__l { grid-template-rows: auto auto; row-gap: 2px; padding: 14px 0; border-bottom: 1px dashed rgba(11, 32, 53, 0.2); }
.v32b-dif__l:last-child { border-bottom: 0; }
.v32b-dif__q { display: contents; }
.v32b-dif__q svg { grid-row: 1 / 3; grid-column: 1; width: 34px; height: 34px; color: #0B2035; }
.v32b-dif__q b { grid-row: 1; grid-column: 2 / 4; font: 700 0.6875rem/1.2 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase; color: #6E5420; }
.v32b-dif__a { grid-row: 2; grid-column: 2; font: 400 1rem/1.25 var(--f-texto); color: #5B6875; }
.v32b-dif__b { grid-row: 2; grid-column: 3; display: flex; align-items: center; gap: 8px; font: 500 1.3125rem/1.15 var(--f-titulo); letter-spacing: -0.01em; color: #0B2035; }
.v32b-dif__seta { flex: none; width: 26px; height: 12px; fill: none; stroke: #B88A2B; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v32b-dif__seta path { stroke-dasharray: 1; }
@media (min-width: 900px) {
  .v32b-dif__cab, .v32b-dif__l { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 18px; }
  .v32b-dif__q svg { width: 38px; height: 38px; }
  .v32b-dif__a { font-size: 1.0625rem; }
  .v32b-dif__b { font-size: 1.5rem; }
}
@media (max-width: 380px) {
  .v32b-dif__cab, .v32b-dif__l { grid-template-columns: 36px minmax(0, 0.9fr) minmax(0, 1.2fr); column-gap: 10px; }
  .v32b-dif__q svg { width: 30px; height: 30px; }
  .v32b-dif__a { font-size: 0.9375rem; }
  .v32b-dif__b { gap: 6px; font-size: 1.1875rem; }
  .v32b-dif__seta { width: 20px; }
  .v32b-dif__cab .v32b-dif__cc { padding-left: 26px; }
}
/* entrada: cada linha entra com o lado do assistente, a seta se traça e a Conex chega */
.anima .cp .v32b-dif__l > * { opacity: 0; transition: opacity 500ms linear; }
.anima .cp .v32b-dif__b { opacity: 0; translate: -10px 0; transition: opacity 400ms linear, translate 700ms cubic-bezier(.16, 1, .3, 1); }
.anima .cp .v32b-dif__seta path { stroke-dashoffset: 1; transition: stroke-dashoffset 600ms cubic-bezier(.65, 0, .35, 1); }
.anima .cp.vista .v32b-dif__l > * { opacity: 1; }
.anima .cp.vista .v32b-dif__b { opacity: 1; translate: 0 0; }
.anima .cp.vista .v32b-dif__seta path { stroke-dashoffset: 0; }
.anima .cp.vista .v32b-dif__l:nth-child(2) > * { transition-delay: 300ms; } .anima .cp.vista .v32b-dif__l:nth-child(2) .v32b-dif__seta path { transition-delay: 500ms; } .anima .cp.vista .v32b-dif__l:nth-child(2) .v32b-dif__b { transition-delay: 800ms; }
.anima .cp.vista .v32b-dif__l:nth-child(3) > * { transition-delay: 600ms; } .anima .cp.vista .v32b-dif__l:nth-child(3) .v32b-dif__seta path { transition-delay: 800ms; } .anima .cp.vista .v32b-dif__l:nth-child(3) .v32b-dif__b { transition-delay: 1100ms; }
.anima .cp.vista .v32b-dif__l:nth-child(4) > * { transition-delay: 900ms; } .anima .cp.vista .v32b-dif__l:nth-child(4) .v32b-dif__seta path { transition-delay: 1100ms; } .anima .cp.vista .v32b-dif__l:nth-child(4) .v32b-dif__b { transition-delay: 1400ms; }
@media (prefers-reduced-motion: reduce) { .v32b-dif__l > *, .v32b-dif__b, .v32b-dif__seta path { transition: none !important; } }

/* zzzzzz-v32-c-quem.css */
/* ===================== v32 · frente c-quem (JM, 11/10): Quem é a Conex no celular =====================
   Bloco .v32c (quem.mjs) com três apresentações por ?quem=a|b|c (JS em src/js/v31/v32-c-quem.js; padrão a).
   Regras do JM: nenhum fundo se mexe (o palco preso leva a cor e o monograma), trilho curto, uma etapa ocupa o lugar da
   anterior, conteúdo cheio e direto, cartões no padrão marinho com a marca d'água dos elos em evidência.
   No computador nada muda: o .v32c some e o .qx__palco de sempre continua. */
.v32c { display: none; }

@media (max-width: 899px) {
  .qx > .qx__palco { display: none; }
  .v32c { position: relative; display: block; padding: 0 0 calc(var(--onda-h) + 8px); color: #FFFFFF; }
  .v32c > .monograma { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px)); mask-image: linear-gradient(180deg, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px)); }

  /* ---------- o cartão Conex (padrão aprovado em 11/10): marinho em degradê, fio dourado por dentro e os elos da marca
     gravados grandes no canto, cortados pela borda, mais à vista que o do BPO da v31 ---------- */
  .v32c-cartao { position: relative; isolation: isolate; overflow: hidden; border-radius: 26px; color: #F7F3EA;
    background: radial-gradient(120% 70% at 100% 0%, rgba(216, 172, 82, 0.16) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%);
    box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.22), 0 34px 54px -36px rgba(0, 0, 0, 0.9); }
  .v32c-cartao::before { content: ''; position: absolute; z-index: -1; right: -22%; bottom: -14%; width: 96%; aspect-ratio: 662 / 412; pointer-events: none;
    background: #E8CE93; opacity: 0.26; -webkit-mask: url('/cartao-elos.svg') center / contain no-repeat; mask: url('/cartao-elos.svg') center / contain no-repeat; }

  /* ---------- peças (servem às três apresentações) ---------- */
  .v32c-m__h { display: flex; flex-direction: column; margin: 0; font: 400 clamp(2.1rem, 0.9rem + 5.8vw, 2.6rem)/1.1 var(--f-titulo); letter-spacing: -0.024em; color: #FFFFFF; text-wrap: balance; }
  .v32c-m__h em { font-style: italic; color: #E8CE93; }
  .v32c-f { display: block; }
  .v32c-fio { display: block; width: 1.5px; height: clamp(18px, 3svh, 30px); margin: clamp(8px, 1.4svh, 12px) 0 clamp(8px, 1.4svh, 12px) 0.15em; border-radius: 1px;
    background: linear-gradient(180deg, #E8CE93, rgba(232, 206, 147, 0.3)); transform-origin: 50% 0; }

  .v32c-p__foto img, .v32c-j__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .v32c-p__foto img { object-position: 50% 16%; }
  [data-v32c-c="2"] .v32c-p__foto img { object-position: 50% 24%; }
  .v32c-p__papel { margin: 0; font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.18em; text-transform: uppercase; color: #E8CE93; }
  .v32c-p__nome { margin: 0; font: 400 clamp(2.2rem, 1.2rem + 4.6vw, 2.7rem)/1 var(--f-titulo); letter-spacing: -0.03em; color: #FFFFFF; }
  .v32c-p__bio { margin: 0; font-size: 0.96875rem; line-height: 1.5; color: #E3ECF3; text-wrap: pretty; }

  .v32c-j__t { margin: 0; font: 400 clamp(1.6rem, 1rem + 2.6vw, 1.95rem)/1.08 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; }
  .v32c-j__lista { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(232, 206, 147, 0.26); }
  .v32c-j__lista li { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(232, 206, 147, 0.26); }
  .v32c-j__lista b { font: 400 1.25rem/1.1 var(--f-titulo); color: #E8CE93; }
  .v32c-j__lista span { font-size: 0.875rem; line-height: 1.35; color: #D5E1EB; }

  .v32c-z__rostos { display: flex; margin: 0; }
  /* os dois rostos recortados da foto de cada sócia (o rosto fica a ~20% do alto da foto) */
  .v32c-z__rostos span { display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px #12304D; background: #0A1D31; }
  .v32c-z__rostos span + span { margin-left: -12px; }
  .v32c-z__rostos img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(2.3); transform-origin: 50% 20%; }
  .v32c-z__rostos span + span img { transform-origin: 50% 22%; }
  .v32c-z__frase { margin: 0; font: 400 clamp(1.8rem, 1rem + 3.4vw, 2.2rem)/1.08 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; }
  .v32c-z__fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0; padding: 0; list-style: none; }
  .v32c-z__fatos li { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid rgba(232, 206, 147, 0.3); }
  .v32c-z__fatos b { font: 400 clamp(1.7rem, 1.1rem + 2.4vw, 2.1rem)/1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; color: #FFFFFF; }
  .v32c-z__fatos span { font-size: 0.8125rem; line-height: 1.35; color: #D5E1EB; }
  .v32c-z__cta .bt { width: 100%; justify-content: center; }

  /* ---------- sem animação (ou movimento reduzido): tudo empilhado, inteiro ---------- */
  .v32c:not(.v32c--vivo) { padding-top: clamp(24px, 4svh, 40px); }
  .v32c:not(.v32c--vivo) .v32c-m { display: grid; gap: 22px; padding: 0 var(--margem) 28px; }
  .v32c:not(.v32c--vivo) .v32c__indice { display: none; }
  .v32c:not(.v32c--vivo) .v32c__cenas { display: grid; gap: 16px; padding: 0 var(--margem); }
  .v32c:not(.v32c--vivo) .v32c-c:not(.v32c-m) { display: grid; gap: 12px; padding: 18px; }
  .v32c:not(.v32c--vivo) .v32c-p__foto { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; }
  .v32c:not(.v32c--vivo) .v32c-p__txt { display: grid; gap: 8px; }
  .v32c:not(.v32c--vivo) .v32c-j__foto { aspect-ratio: 835 / 594; border-radius: 18px; overflow: hidden; }

  /* ---------- vivo: o trilho e o palco preso (comum às três) ---------- */
  .v32c--vivo .v32c__trilho { position: relative; height: calc(100svh + 212svh); }
  .v32c--vivo[data-op="b"] .v32c__trilho { height: calc(100svh + 158svh); }
  /* JM: menos vão entre as fases e esta seção. A e C: o palco sobe por cima do pé vazio das fases (o respiro do cabeçalho
     fica dentro do palco), então o índice nasce logo abaixo da emenda */
  .v32c--vivo:not([data-op="b"]) .v32c__trilho { margin-top: calc(-1 * var(--altura-topo) + 4px); }
  .v32c--vivo .v32c__palco { position: sticky; top: 0; display: flex; flex-direction: column; height: 100svh; overflow: hidden;
    padding: calc(var(--altura-topo) + 10px) var(--margem) 84px; background: #0B2035; }
  .v32c--vivo .v32c__palco > .monograma { -webkit-mask-image: none; mask-image: none; }
  .v32c__indice { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
  .v32c__indice li { display: grid; gap: 7px; min-width: 0; font: 600 0.75rem/1.1 var(--f-texto); color: rgba(233, 242, 248, 0.5); transition: color 300ms linear; }
  .v32c__indice li[hidden] { display: none; }
  .v32c__indice li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v32c__indice li.on { color: #FFFFFF; }
  .v32c__indice i { display: block; height: 3px; border-radius: 2px; background: rgba(233, 242, 248, 0.16); overflow: hidden; }
  .v32c__indice b { display: block; height: 100%; background: #D8AC52; transform-origin: 0 50%; transform: scaleX(var(--enche, 0)); }
  .v32c--vivo .v32c__cenas { position: relative; flex: 1; min-height: 0; margin-top: 12px; }
  .v32c--vivo .v32c__cenas > .v32c-c { position: absolute; inset: 0; }
  .v32c--vivo .v32c-k { will-change: transform, opacity; }

  /* manifesto montando: cada frase sobe e acende com --m (0 → 1), o fio se desenha entre elas */
  .v32c--vivo .v32c-f { opacity: var(--m, 0); transform: translate3d(0, calc((1 - var(--m, 0)) * 26px), 0); }
  .v32c--vivo .v32c-fio { transform: scaleY(var(--m, 0)); }

  /* o manifesto como cartão (A e C): rótulo em cima, as três frases ocupando o cartão */
  .v32c--vivo .v32c-m.v32c-cartao { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 22px 20px 24px; }
  .v32c--vivo .v32c-m.v32c-cartao .v32c-m__h { flex: 1; justify-content: center; }

  /* etapas com foto (A e C): a foto ocupa o cartão, o texto assenta embaixo sobre o marinho */
  .v32c--vivo:not([data-op="b"]) .v32c-p__foto { position: absolute; inset: 0 0 auto; height: 78%; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 48%, transparent 100%); mask-image: linear-gradient(180deg, #000 48%, transparent 100%); }
  .v32c--vivo:not([data-op="b"]) .v32c-p__txt { position: absolute; left: 20px; right: 20px; bottom: 22px; display: grid; gap: 8px; }
  .v32c--vivo:not([data-op="b"]) .v32c-p::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 32, 53, 0) 40%, rgba(11, 32, 53, 0.55) 70%, rgba(10, 29, 49, 0.92) 100%); }
  .v32c--vivo:not([data-op="b"]) .v32c-p__txt { z-index: 1; }

  /* o time: a foto das duas em cima (ocupa o que sobra), título e as cinco frentes embaixo */
  .v32c--vivo .v32c-j { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 20px; }
  .v32c--vivo .v32c-j__foto { flex: 1; min-height: 0; margin: 0 -20px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .v32c--vivo .v32c-j__foto img { object-position: 50% 12%; }

  /* contato: rostos, a frase, quatro fatos e o WhatsApp */
  .v32c--vivo .v32c-z { display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.4svh, 22px); padding: 22px 20px; }

  /* =============== A · palco: a folha que chega cobre a anterior, de baixo para cima =============== */
  .v32c--vivo[data-op="a"] .v32c-c { --in: 1; --out: 0; transform-origin: 50% 0; will-change: transform;
    transform: translate3d(0, calc((1 - var(--in)) * (100% + 140px) - var(--out) * 12px), 0) scale(calc(1 - var(--out) * 0.06)); }
  /* a foto da folha que chega anda um pouco mais devagar que a folha (profundidade) */
  .v32c--vivo[data-op="a"] .v32c-p__foto img, .v32c--vivo[data-op="a"] .v32c-j__foto img { transform: translate3d(0, calc((1 - var(--in)) * -22%), 0) scale(1.06); }
  /* a que fica embaixo escurece e recua de leve enquanto é coberta (a borda de cima aparece atrás da nova) */
  .v32c--vivo[data-op="a"] .v32c-c:not(.v32c-p)::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #061421; opacity: calc(var(--out) * 0.6); }
  .v32c--vivo[data-op="a"] .v32c-p::after { background: linear-gradient(180deg, rgba(6, 20, 33, calc(var(--out) * 0.6)), rgba(6, 20, 33, calc(var(--out) * 0.6))), linear-gradient(180deg, rgba(11, 32, 53, 0) 40%, rgba(11, 32, 53, 0.55) 70%, rgba(10, 29, 49, 0.92) 100%); z-index: 0; }

  /* =============== B · escada + baralho =============== */
  /* o manifesto: três degraus que descem para a direita, cada um com a palavra de ligação puxando o fio do próximo */
  .v32c--vivo[data-op="b"] .v32c-m { display: grid; gap: clamp(18px, 3svh, 28px); padding: 10px var(--margem) clamp(36px, 6svh, 56px); }
  .v32c--vivo[data-op="b"] .v32c-m__h { font-size: clamp(2.2rem, 0.9rem + 6.6vw, 2.8rem); }
  .v32c--vivo[data-op="b"] .v32c-f { position: relative; padding: 14px 0 0; border-top: 1px solid rgba(232, 206, 147, 0.32); }
  .v32c--vivo[data-op="b"] .v32c-f[data-v32c-f="1"] { margin-left: 11%; }
  .v32c--vivo[data-op="b"] .v32c-f[data-v32c-f="2"] { margin-left: 22%; }
  .v32c--vivo[data-op="b"] .v32c-f { transform: translate3d(calc((1 - var(--m, 0)) * -28px), 0, 0); }
  .v32c--vivo[data-op="b"] .v32c-fio { height: clamp(26px, 4svh, 40px); margin-block: 10px; margin-left: calc(11% + 0.15em); }
  .v32c--vivo[data-op="b"] .v32c-fio:nth-child(4) { margin-left: calc(22% + 0.15em); }
  /* o baralho: espaço em cima para as fichas de trás aparecerem pela borda */
  .v32c--vivo[data-op="b"] .v32c__cenas { margin-top: 46px; }
  .v32c--vivo[data-op="b"] .v32c-c { transform-origin: 50% 0; will-change: transform, opacity; }
  /* a ficha da sócia: cargo e nome em cima, a foto no meio, a história embaixo */
  .v32c--vivo[data-op="b"] .v32c-p { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; }
  .v32c--vivo[data-op="b"] .v32c-p__txt { display: contents; }
  .v32c--vivo[data-op="b"] .v32c-p__papel { order: 1; }
  .v32c--vivo[data-op="b"] .v32c-p__nome { order: 2; }
  .v32c--vivo[data-op="b"] .v32c-p__foto { order: 3; flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; }
  .v32c--vivo[data-op="b"] .v32c-p__bio { order: 4; }

  /* =============== C · filme: painéis do tamanho da tela passam para o lado =============== */
  .v32c--vivo[data-op="c"] .v32c__palco { padding-bottom: 0; }
  .v32c--vivo[data-op="c"] .v32c__cenas { margin-inline: calc(-1 * var(--margem)); }
  .v32c--vivo[data-op="c"] .v32c-c { --d: 0; border-radius: 0; box-shadow: none; will-change: transform; }
  .v32c--vivo[data-op="c"] .v32c-c.v32c-cartao { box-shadow: inset 0 1px 0 rgba(232, 206, 147, 0.22); }
  .v32c--vivo[data-op="c"] .v32c-p__foto img, .v32c--vivo[data-op="c"] .v32c-j__foto img { transform: translate3d(calc(var(--d) * 38%), 0, 0) scale(1.12); }
  .v32c--vivo[data-op="c"] .v32c-p__txt { left: var(--margem); right: 76px; bottom: 26px; }
  .v32c--vivo[data-op="c"] .v32c-m.v32c-cartao { padding: 24px var(--margem) 88px; }
  .v32c--vivo[data-op="c"] .v32c-j { padding: 0 var(--margem) 88px; }
  .v32c--vivo[data-op="c"] .v32c-j__foto { margin-inline: calc(-1 * var(--margem)); }
  .v32c--vivo[data-op="c"] .v32c-z { padding: 22px var(--margem) 88px; }

  /* telas baixas (360 × 640): menos texto por linha de folga */
  @media (max-height: 700px) {
    .v32c-p__nome { font-size: 2rem; }
    .v32c-p__bio { font-size: 0.875rem; line-height: 1.45; }
    .v32c-j__lista li { padding: 6px 0; }
    .v32c-j__lista b { font-size: 1.125rem; }
    .v32c-j__lista span { font-size: 0.8125rem; }
    .v32c-z__rostos span { width: 52px; height: 52px; }
    .v32c-z__frase { font-size: 1.6rem; }
    .v32c-z__fatos { gap: 10px 14px; }
    .v32c-z__fatos li { padding-top: 7px; }
    .v32c-z__fatos b { font-size: 1.55rem; }
    .v32c--vivo .v32c__palco { padding-bottom: 76px; }
    .v32c--vivo .v32c-m.v32c-cartao .v32c-m__h { font-size: 2.05rem; }
  }
}

/* zzzzzz-v32-d-bpo.css */
/* ---------- v32 d-bpo (JM, 11/10): /bpo-financeiro-recife ----------
   1. a peça 3D na headline (as moedas, soltas, entre "BPO" e "financeiro"), nas duas telas
   2. topo no celular: o tablet sai; entra o cartão do mês fechado (como o topo de Processos: imita uma tela sem ser tela)
   3. o que é no celular: quatro cartões marinho que se encaixam; a marca d'água dos elos é uma só, cortada pelos quatro
   4. o mês: o objeto do canto do cartão solto, sem a sombra e sem a mancha clara atrás
   Carrega por último (ordem alfabética). */

/* ---------- 1. a peça da headline ---------- */
.v32d-pc { display: inline-block; position: relative; width: 1.22em; height: 0.9em; margin: 0 0.02em; vertical-align: -0.1em; }
.v32d-pc img { position: absolute; left: 50%; top: 50%; width: 1.3em; height: 1.3em; margin: -0.66em 0 0 -0.65em; max-width: none; pointer-events: none; }
/* a linha sobe (ht-sobe) e a peça chega por último, girando um pouco e assentando */
.anima .v32d-pc img { opacity: 0; scale: 0.55; rotate: -16deg; animation: v32d-pc 900ms cubic-bezier(.3, 1.4, .5, 1) 900ms forwards; }
@keyframes v32d-pc { 40% { opacity: 1; } to { opacity: 1; scale: 1; rotate: 0deg; } }

/* ---------- 2. topo no celular: o cartão do mês fechado ---------- */
.v32d-cena { display: none; }
.v32d-tela { --t: #0B2035; --t2: #5B6875; --ouro: #D8AC52; --verde: #2F7A52; position: relative; overflow: hidden; border-radius: 22px; background: #FBF6EC; color: var(--t);
  box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.22), 0 40px 70px -34px rgba(0, 0, 0, 0.75); font-family: var(--f-texto); font-variant-numeric: tabular-nums; }
.v32d-tela :where(p, ul) { margin: 0; padding: 0; list-style: none; }
.v32d-tela svg:not(.v32d-tela__elos):not(.v32d-tela__fio) { width: 14px; height: 14px; }
.v32d-tela__cab { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; background: linear-gradient(165deg, #133150 0%, #0B2035 70%); color: #F7F3EA; }
.v32d-tela__elos { width: 34px; height: auto; flex: none; }
.v32d-tela__t { display: grid; gap: 3px; }
.v32d-tela__t b { font: 600 16px/1.1 var(--f-texto); color: #FFFFFF; }
.v32d-tela__t span { font: 500 12.5px/1.2 var(--f-texto); color: #8FA5B8; }
/* a borda de baixo da cabeça é a curva do elo, com o traço dourado por cima (o mesmo fio do cartão de Processos) */
.v32d-tela__fio { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 22px; overflow: visible; pointer-events: none; }
.v32d-tela__curva { fill: #0B2035; }
.v32d-tela__traco { fill: none; stroke: var(--ouro); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.v32d-tela__corpo { position: relative; isolation: isolate; display: grid; padding: 34px 18px 10px; }
/* a marca d'água dos elos no papel, em ouro velho, cortada pelo canto */
.v32d-tela__corpo::before { content: ''; position: absolute; z-index: -1; right: -24%; bottom: -16%; width: 92%; aspect-ratio: 662 / 412; pointer-events: none;
  background: #9A7120; opacity: 0.3; -webkit-mask: url('/v32-bpo-elos.svg') center / contain no-repeat; mask: url('/v32-bpo-elos.svg') center / contain no-repeat; }
.v32d-tela__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 13px/1.2 var(--f-texto); color: var(--t2); }
.v32d-tela__estado { display: grid; justify-items: end; font: 600 12.5px/1 var(--f-texto); white-space: nowrap; }
.v32d-tela__estado > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 5px; transition: opacity 400ms linear, translate 500ms cubic-bezier(.16, 1, .3, 1); }
.v32d-tela__estado-a { color: #8C6A1E; opacity: 0; }
.v32d-tela__estado-b { color: var(--verde); }
.v32d-tela__estado-b svg { stroke-width: 2.6; }
.v32d-tela__num { margin-top: 4px !important; font: 600 44px/1.05 var(--f-texto); letter-spacing: -0.045em; color: var(--t); }
.v32d-tela__lista { margin-top: 12px !important; }
.v32d-tela__lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 11px 0; border-top: 1px solid rgba(154, 113, 32, 0.22); font: 600 14.5px/1.25 var(--f-texto); color: var(--t); }
.v32d-tela__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--t); color: #E8CE93; transition: background-color 350ms, color 350ms, box-shadow 350ms; }
.v32d-tela__lista li:last-child .v32d-tela__no { background: var(--ouro); color: var(--t); }
/* antes de fechar: os nós vazios, o estado "Em fechamento" (o JS marca um a um e fecha o mês) */
.anima .v32d-tela .v32d-tela__lista li:not(.ok) .v32d-tela__no { background: #FFFFFF; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(11, 32, 53, 0.28); }
.anima .v32d-tela:not(.fechado) .v32d-tela__estado-a { opacity: 1; }
.anima .v32d-tela:not(.fechado) .v32d-tela__estado-b { opacity: 0; translate: 0 6px; }

@media (max-width: 1023px) {
  .bh__cena { display: none; }
  .bh__grade { min-height: 0; padding-bottom: calc(var(--onda-h) + 30px); }
  .v32d-cena { display: grid; justify-items: center; margin-top: 34px; }
  .v32d-tela { width: min(100%, 440px); }
  .anima .v32d-cena { opacity: 0; translate: 0 60px; animation: ht-entra 1200ms cubic-bezier(.16, 1, .3, 1) 520ms forwards; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .v32d-cena { margin-top: 26px; }
}
@media (max-width: 379px) {
  .v32d-tela__cab { padding: 14px 16px 12px; }
  .v32d-tela__corpo { padding: 30px 16px 8px; }
  .v32d-tela__num { font-size: 40px; }
  .v32d-tela__lista li { font-size: 14px; padding: 10px 0; }
}

/* ---------- 3. o que é no celular: quatro cartões que se encaixam ----------
   Cada cartão é o cartão marinho da Conex. A marca d'água é UMA só, do tamanho dos quatro juntos (200% + o vão), e cada
   cartão mostra o seu quarto dela: quando os quatro se encaixam, os elos ficam inteiros no meio. O JS dá o --k de cada
   cartão (0 = afastado, 1 = no lugar) pela rolagem, com amortecimento; o objeto chega quando o cartão assenta. */
.v32d-faz { display: none; }
@media (max-width: 1023px) {
  .bv { overflow-x: clip; }
  .v32d-faz { --g: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--g); max-width: 520px; margin: 10px 0 0; padding: 0; list-style: none; }
  .v32d-faz__c { --k: 1; --dx: 0; --dy: 0; --r: 0; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 16px 16px 20px; border-radius: 22px; color: #F7F3EA;
    background: radial-gradient(120% 70% at 100% 0%, rgba(216, 172, 82, 0.14) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%);
    box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.22), 0 30px 46px -32px rgba(6, 18, 31, 0.9);
    translate: calc((1 - var(--k)) * var(--dx) * 1px) calc((1 - var(--k)) * var(--dy) * 1px); rotate: calc((1 - var(--k)) * var(--r) * 1deg); opacity: min(1, calc(var(--k) * 1.8)); }
  .v32d-faz__c::before { content: ''; position: absolute; z-index: -1; width: calc(200% + var(--g)); height: calc(200% + var(--g)); pointer-events: none;
    background: #E8CE93; opacity: 0.5; -webkit-mask: url('/v32-bpo-elos.svg') center / 96% auto no-repeat; mask: url('/v32-bpo-elos.svg') center / 96% auto no-repeat; }
  .v32d-faz__c:nth-child(1)::before { left: 0; top: 0; } .v32d-faz__c:nth-child(2)::before { right: 0; top: 0; }
  .v32d-faz__c:nth-child(3)::before { left: 0; bottom: 0; } .v32d-faz__c:nth-child(4)::before { right: 0; bottom: 0; }
  /* de onde cada um vem: de baixo e de fora, inclinado para o lado dele */
  .v32d-faz__c:nth-child(1) { --dx: -14; --dy: 34; --r: -5; } .v32d-faz__c:nth-child(2) { --dx: 14; --dy: 34; --r: 5; }
  .v32d-faz__c:nth-child(3) { --dx: -14; --dy: 56; --r: 4; } .v32d-faz__c:nth-child(4) { --dx: 14; --dy: 56; --r: -4; }
  .v32d-faz__c img { display: block; width: 68px; height: 68px; margin: -4px 0 4px -6px; object-fit: contain; }
  .v32d-faz__c h3 { margin: 0; font: 500 1.5rem/1.05 var(--f-titulo); letter-spacing: -0.015em; color: #FFFFFF; }
  .v32d-faz__c p { margin: 0; font: 500 0.95rem/1.38 var(--f-texto); color: #C9D8E4; text-wrap: pretty; }
  /* o objeto chega girando e assenta quando o cartão encaixa (uma vez) */
  .anima .v32d-faz__c img { opacity: 0; scale: 0.5; rotate: -14deg; transition: opacity 300ms linear, scale 800ms cubic-bezier(.3, 1.45, .5, 1), rotate 800ms cubic-bezier(.3, 1.45, .5, 1); }
  .anima .v32d-faz__c.pronto img { opacity: 1; scale: 1; rotate: 0deg; }
}
@media (max-width: 379px) {
  .v32d-faz { --g: 8px; }
  .v32d-faz__c { padding: 14px 13px 18px; border-radius: 20px; }
  .v32d-faz__c img { width: 60px; height: 60px; }
  .v32d-faz__c h3 { font-size: 1.32rem; }
  .v32d-faz__c p { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) { .v32d-faz__c { --k: 1 !important; } .v32d-faz__c img { opacity: 1 !important; scale: 1 !important; rotate: 0deg !important; } }

/* ---------- 4. o mês: o objeto do canto solto (JM: "só o elemento, sem fundo, sem sombra") ---------- */
.bm__obj { filter: none; }
.bm__p.cartao-bpo--claro { background: linear-gradient(165deg, #FBF6EA 0%, #F4E9D2 60%, #EEDFC1 100%); }

/* zzzzzz-v32-e-erp.css */
/* ---------- v32 e-erp · /implantacao-de-erp (JM, 11/10) ----------
   0. .v32e-cartao: o cartão aprovado (marinho com a marca d'água dos elos em evidência) e a variante clara
   1. topo no celular: o cartão da implantação no lugar do celular (.v32e-hc)
   2. o objeto 3D do ERP (o monitor com a engrenagem) solto na última linha do título (as duas telas)
   3. os módulos conversam, no celular: cartões separados ligados pelos elos da marca (.v32e-cd)
   4. sistema configurado pela rotina: a linha do tempo começa na primeira bolinha; cartões marinho; objetos soltos
   5. já tem sistema ou vai trocar, no celular: o seletor da home e três versões (?caminho=a|b|c)
   Carrega por último (ordem alfabética). */

/* ===== 0 · o cartão aprovado ===== */
.v32e-cartao { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; color: #F7F3EA;
  background: radial-gradient(120% 70% at 100% 0%, rgba(216, 172, 82, 0.16) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.2), 0 34px 54px -36px rgba(6, 18, 31, 0.9); }
/* a marca d'água: os elos em linha, cortados pela borda, mais visíveis que no cartão do BPO da v31 (0,16 → 0,26) */
.v32e-cartao::before { content: ''; position: absolute; z-index: -1; right: -14%; bottom: -24%; width: 72%; aspect-ratio: 662 / 412; pointer-events: none;
  background: #E8CE93; opacity: 0.26; -webkit-mask: url('/cartao-elos.svg') center / contain no-repeat; mask: url('/cartao-elos.svg') center / contain no-repeat; }
.v32e-cartao--claro { color: #0B2035;
  background: radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, #FBF6EA 0%, #F4E9D2 60%, #EEDFC1 100%);
  box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.24), 0 34px 54px -36px rgba(0, 0, 0, 0.75); }
.v32e-cartao--claro::before { background: #9A7120; opacity: 0.2; }
.v32e-ok { flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ===== 1 · topo no celular: o cartão da implantação ===== */
.v32e-hc { display: none; }
@media (max-width: 899px) {
  .v32e-hc { display: block; position: relative; z-index: 3; width: min(100% - 2 * var(--margem), 400px); margin: 34px auto 0; text-align: left; }
  .v32e-hc :where(p, ol) { margin: 0; padding: 0; list-style: none; }
  .v32e-hc .ed-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  /* a variante do POP de Processos: cabeça marinho com a curva do elo e o traço dourado, corpo marfim com a marca d'água */
  .v32e-hc__cartao { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: linear-gradient(170deg, #FCF8EF 0%, #F4EAD6 100%); color: #0B2035;
    box-shadow: 0 0 0 1px rgba(232, 206, 147, 0.32), 0 0 0 7px rgba(255, 255, 255, 0.07), 0 50px 80px -40px rgba(0, 0, 0, 0.85); }
  .v32e-hc__cartao::before { content: ''; position: absolute; z-index: -1; right: -18%; bottom: -16%; width: 80%; aspect-ratio: 662 / 412; pointer-events: none;
    background: #9A7120; opacity: 0.17; -webkit-mask: url('/cartao-elos.svg') center / contain no-repeat; mask: url('/cartao-elos.svg') center / contain no-repeat; }
  .v32e-hc__cab { position: relative; z-index: 1; padding: 18px 20px 20px; background: linear-gradient(170deg, #153656 0%, #0B2035 72%); color: #F7F3EA; }
  .v32e-hc__curva { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 22px; overflow: visible; pointer-events: none; }
  .v32e-hc__curva-f { fill: #0B2035; }
  .v32e-hc__curva-t { fill: none; stroke: #D8AC52; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .v32e-hc__rot { display: flex; align-items: center; gap: 10px; font: 600 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
  .v32e-hc__elos { width: 28px; height: auto; flex: none; }
  .v32e-hc__pct { margin-left: auto; font: 600 1.05rem/1 var(--f-texto); letter-spacing: 0; color: #FFFFFF; font-variant-numeric: tabular-nums; }
  .v32e-hc__tit { margin-top: 10px !important; font: 400 1.62rem/1.08 var(--f-titulo); letter-spacing: -0.015em; color: #FFFFFF; }
  .v32e-hc__barra { display: block; height: 3px; margin-top: 14px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
  .v32e-hc__barra i { display: block; height: 100%; border-radius: inherit; background: #D8AC52; transform-origin: 0 50%; scale: var(--v32e-p, 1) 1; }
  /* os módulos: um por linha, com o nó do ícone e a situação */
  .v32e-hc__mods { position: relative; z-index: 1; padding: 30px 18px 4px !important; }
  .v32e-hc__mods li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 2px; }
  .v32e-hc__mods li + li { border-top: 1px solid rgba(154, 113, 32, 0.2); }
  .v32e-hc__no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0B2035; color: #E8CE93; transition: background-color 350ms, color 350ms, box-shadow 350ms; }
  .v32e-hc__no .ed-i { width: 17px; height: 17px; }
  .v32e-hc__n { font: 600 1rem/1.2 var(--f-texto); letter-spacing: -0.01em; }
  .v32e-hc__st { display: grid; justify-items: end; font: 600 0.84rem/1 var(--f-texto); white-space: nowrap; }
  .v32e-hc__st > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 5px; transition: opacity 300ms linear, translate 450ms cubic-bezier(.16, 1, .3, 1); }
  .v32e-hc__st-a { color: #8C6A1E; opacity: 0; translate: 0 -6px; }
  .v32e-hc__st-b { color: #2F7A52; }
  .v32e-hc__st-b .v32e-ok { width: 14px; height: 14px; }
  .v32e-hc__pe { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin: 0 20px !important; padding: 13px 0 18px; border-top: 1px solid rgba(154, 113, 32, 0.32);
    font: 600 0.92rem/1.2 var(--f-texto); color: #0B2035; transition: opacity 350ms linear, translate 500ms cubic-bezier(.16, 1, .3, 1); }
  .v32e-hc__pe .ed-i { color: #8C6A1E; }
  .v32e-hc__pe .v32e-ok { width: 18px; height: 18px; margin-left: auto; color: #2F7A52; }
  /* com animação: o módulo ainda configurando tem o nó vazio e a situação "Configurando" (o JS marca .feito um a um) */
  .anima .v32e-hc:not(.v32e-hc--fim) li[data-v32e-hm]:not(.feito) .v32e-hc__no { background: transparent; color: #8A949E; box-shadow: inset 0 0 0 1.5px rgba(11, 32, 53, 0.22); }
  .anima .v32e-hc:not(.v32e-hc--fim) li[data-v32e-hm]:not(.feito) .v32e-hc__st-a { opacity: 1; translate: 0 0; }
  .anima .v32e-hc:not(.v32e-hc--fim) li[data-v32e-hm]:not(.feito) .v32e-hc__st-b { opacity: 0; translate: 0 6px; }
  .anima .v32e-hc:not(.v32e-hc--fim) .v32e-hc__pe:not(.feito) { opacity: 0; translate: 0 6px; }
  /* entrada: o cartão sobe depois do botão */
  .anima .v32e-hc { opacity: 0; translate: 0 48px; animation: v32e-sobe 1000ms cubic-bezier(.16, 1, .3, 1) 560ms forwards; }
}
@keyframes v32e-sobe { to { opacity: 1; translate: 0 0; } }
@media (max-width: 379px) {
  .v32e-hc__tit { font-size: 1.45rem; }
  .v32e-hc__mods { padding: 28px 14px 2px !important; }
  .v32e-hc__mods li { column-gap: 10px; }
  .v32e-hc__n { font-size: 0.95rem; }
  .v32e-hc__pe { margin: 0 16px !important; }
}

/* ===== 2 · o objeto 3D do ERP na headline (solto, como na home) ===== */
.v32e-l3 { display: inline-flex; align-items: center; justify-content: center; }
.ex .v32e-pc { width: 1.14em; height: 0.86em; margin: 0 0 0 0.1em; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
.ex .v32e-pc img { width: 1.16em; height: 1.16em; margin: -0.6em 0 0 -0.58em; translate: 0 0;
  filter: drop-shadow(0 0.04em 0.04em rgba(0, 0, 0, 0.45)) drop-shadow(0 0.14em 0.18em rgba(0, 0, 0, 0.35)); }
.anima .v32e-l3 .ex__m { animation-delay: 360ms; }
.anima .ex.ex--pecas .v32e-pc { transition-delay: 420ms; }

/* ===== 3 · os módulos conversam, no celular: a corrente de cartões ===== */
.v32e-cd { display: none; }
@media (max-width: 899px) {
  .ef .ef__cartao { display: none; }
  .v32e-cd { --v32e-lado: 16px; display: grid; margin: 0; padding: 0; list-style: none; }
  .v32e-cd__m { --k: 1; position: relative; }
  .v32e-cd__m + .v32e-cd__m { padding-top: 40px; }
  /* os elos da marca, de pé, no eixo dos ícones: a metade azul vem do cartão de cima, a dourada do de baixo */
  .v32e-cd__elo { position: absolute; z-index: 2; left: calc(var(--v32e-lado) + 22px - 27px); top: calc(20px - 16.4px); width: 54px; height: auto; overflow: visible; rotate: 90deg; }
  .v32e-cd__elo-a { fill: #5891AF; stroke: #5891AF; transform: translateX(calc((1 - var(--k)) * -70px)); }
  .v32e-cd__elo-b { fill: #BC8E2E; stroke: #BC8E2E; transform: translateX(calc((1 - var(--k)) * 70px)); }
  .v32e-cd__elo > g { opacity: calc(0.22 + 0.78 * var(--k)); }
  .v32e-cd__c { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; row-gap: 5px; padding: 16px 16px 16px var(--v32e-lado); border-radius: 20px; }
  .v32e-cd__c :where(p) { margin: 0; }
  .v32e-cd__c::before { width: 40%; right: -6%; bottom: -34%; }
  .v32e-cd__no { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #E8CE93; color: #0B2035; box-shadow: 0 12px 22px -14px rgba(0, 0, 0, 0.8); transition: background-color 400ms, color 400ms, box-shadow 400ms; }
  .v32e-cd__no .ed-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .v32e-cd__mod { display: flex; align-items: baseline; gap: 10px; font: 600 0.7rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
  .v32e-cd__mod time { font-weight: 500; letter-spacing: 0.06em; color: #8FA5B8; }
  .v32e-cd__o { display: grid; overflow: hidden; font: 400 1.22rem/1.25 var(--f-titulo); letter-spacing: -0.01em; }
  .v32e-cd__o > span { grid-area: 1 / 1; transition: opacity 350ms linear, translate 550ms cubic-bezier(.16, 1, .3, 1); }
  .v32e-cd__o-a { color: rgba(201, 216, 228, 0.55); opacity: 0; translate: 0 -100%; }
  .v32e-cd__o-b { color: #FFFFFF; }
  .v32e-cd__c > .v32e-ok { grid-column: 3; grid-row: 1 / 3; width: 24px; height: 24px; padding: 4.5px; border-radius: 50%; background: #D8AC52; color: #0B2035; box-sizing: border-box; transition: scale 450ms cubic-bezier(.3, 1.6, .5, 1); }
  /* o módulo que o pedido ainda não alcançou: nó vazio, "Aguardando o pedido", sem o visto */
  .v32e-cd__m:not(.on) .v32e-cd__no { background: rgba(255, 255, 255, 0.04); color: #8FA5B8; box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.32); }
  .v32e-cd__m:not(.on) .v32e-cd__o-a { opacity: 1; translate: 0 0; }
  .v32e-cd__m:not(.on) .v32e-cd__o-b { opacity: 0; translate: 0 100%; }
  .v32e-cd__m:not(.on) .v32e-cd__c > .v32e-ok { scale: 0; }
}
@media (max-width: 379px) {
  .v32e-cd { --v32e-lado: 14px; }
  .v32e-cd__c { column-gap: 12px; }
  .v32e-cd__o { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) { .v32e-cd__o > span, .v32e-cd__no, .v32e-cd__c > .v32e-ok { transition: none !important; } }

/* ===== 4 · sistema configurado pela rotina (as duas telas) ===== */
/* a linha começa na primeira bolinha (o JS acerta o topo pela bolinha; 16 px é o ponto sem JS) */
.eg__fio { top: 16px; }
/* os cartões de cada momento no padrão aprovado; o objeto de cada entrega solto, sem a caixinha */
.eg__fase ul.v32e-cartao { border-radius: 22px; background: radial-gradient(120% 70% at 100% 0%, rgba(216, 172, 82, 0.16) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.2), 0 30px 50px -34px rgba(6, 18, 31, 0.85); }
.eg__fase ul.v32e-cartao::before { width: 64%; right: -12%; bottom: -30%; }
@media (min-width: 900px) { .eg__fase ul.v32e-cartao::before { width: 30%; right: -4%; bottom: -26%; } }
.eg__fase .v32e-cartao li + li { border-top-color: rgba(232, 206, 147, 0.16); }
.eg__fase .v32e-cartao h3 { color: #FFFFFF; }
.eg__fase .v32e-cartao p { color: #C9D8E4; }
.eg__fase .v32e-cartao .eg__obj { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.eg__fase .v32e-cartao .eg__obj img { width: 100%; height: 100%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5)); }
@media (max-width: 899px) {
  .eg__fase .v32e-cartao li { grid-template-columns: 58px minmax(0, 1fr); }
  .eg__fase .v32e-cartao .eg__obj { width: 58px; height: 58px; }
}

/* ===== 5 · já tem sistema ou vai trocar, no celular ===== */
.v32e-cams { display: none; }
@media (max-width: 899px) {
  .ec .ec__escolha, .ec .ec__palco { display: none !important; }
  .v32e-cams { display: block; }
  .v32e-cam { display: none; }
  .ec[data-v32e-op="a"] .v32e-cam--a, .ec[data-v32e-op="b"] .v32e-cam--b, .ec[data-v32e-op="c"] .v32e-cam--c { display: block; }
  .ec--escolha .ec__t, .ec .ec__t { margin-bottom: 22px; }
  .v32e-cam :where(p, ol, h3) { margin: 0; }

  /* o seletor da home: duas opções num trilho; o marcador desliza para baixo da escolhida */
  .v32e-seg { display: grid; justify-items: center; }
  .v32e-seg__trilho { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 420px); padding: 4px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.24); }
  .v32e-seg__bt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 50px; padding: 0 6px; border: 0; border-radius: 12px;
    background: none; color: #C9D8E4; font: 600 0.92rem/1.1 var(--f-texto); white-space: nowrap; cursor: pointer; transition: color 260ms linear; -webkit-tap-highlight-color: transparent; }
  .v32e-seg__bt[aria-pressed="true"] { color: #0B2035; }
  .v32e-seg__bt:active { opacity: 0.8; }
  .v32e-seg__bt:focus-visible { outline: 3px solid #D8AC52; outline-offset: 2px; }
  .v32e-seg__ic { flex: none; width: 21px; height: 21px; }
  .v32e-seg__cursor { position: absolute; z-index: 0; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 12px; background: #F1E5CC;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.6); transition: translate 420ms cubic-bezier(.22, 1, .36, 1); }
  .v32e-cam[data-sel="1"] .v32e-seg__cursor { translate: 100% 0; }

  /* --- a · ficha: as duas no mesmo lugar, a escolhida entra de lado (como no comparativo da home) --- */
  .v32e-ca__mesa { position: relative; display: grid; margin-top: 16px; overflow: clip; overflow-clip-margin: 40px; }
  .v32e-ca__ficha { display: grid; gap: 0; padding: 24px 20px 20px; transition: opacity 260ms linear, translate 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s; }
  .v32e-ca__ficha:not(.on) { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms linear, translate 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 120ms; }
  .v32e-ca__ficha.on { transition-delay: 60ms; }
  .v32e-ca__ficha[data-v32e-lado="0"]:not(.on) { translate: -18px 0; } .v32e-ca__ficha[data-v32e-lado="1"]:not(.on) { translate: 18px 0; }
  .v32e-ca__ficha h3 { font: 400 1.7rem/1.08 var(--f-titulo); letter-spacing: -0.015em; color: #0B2035; text-wrap: balance; }
  .v32e-ca__ponta { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: start; gap: 12px; margin-top: 18px !important; padding: 14px 0; border-block: 1px solid rgba(11, 32, 53, 0.14); }
  .v32e-ca__ponta span { display: grid; gap: 5px; font: 600 0.95rem/1.25 var(--f-texto); color: #0B2035; }
  .v32e-ca__ponta small { font: 600 0.68rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #5E450D; }
  .v32e-ca__ponta .ec__seta { align-self: center; width: 24px; height: 12px; fill: none; stroke: #B8862A; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .v32e-ca__passos { position: relative; display: grid; margin: 6px 0 18px !important; padding: 0 0 0 30px; list-style: none; }
  .v32e-ca__passos::before { content: ''; position: absolute; left: 6px; top: 24px; bottom: 30px; width: 2px; border-radius: 2px; background: #C8962F; }
  .v32e-ca__passos li { position: relative; display: grid; gap: 2px; padding: 12px 0; }
  .v32e-ca__passos li + li { border-top: 1px solid rgba(11, 32, 53, 0.1); }
  .v32e-ca__passos li::before { content: ''; position: absolute; left: -30px; top: 17px; width: 14px; height: 14px; border-radius: 50%; background: #F4E9D2; box-shadow: inset 0 0 0 2px #C8962F; }
  .v32e-ca__passos b { font: 500 1.18rem/1.2 var(--f-titulo); letter-spacing: -0.01em; color: #0B2035; }
  .v32e-ca__passos span { font-size: 0.92rem; line-height: 1.4; color: #3B4753; }
  .v32e-cam .bt { display: flex; width: 100%; }
  .v32e-cam .bt .bt__texto { margin-right: auto; }

  /* --- b · trajeto: um caminho, de onde parte até onde chega; os nomes rolam no lugar a cada troca --- */
  .v32e-cb { margin-top: 16px; padding: 22px 20px 10px; }
  .v32e-cb__t { font: 400 1.6rem/1.1 var(--f-titulo); letter-spacing: -0.015em; color: #FFFFFF; }
  .v32e-cb__rota { position: relative; margin-top: 18px !important; padding: 0; list-style: none; }
  .v32e-cb__rota > li { position: relative; display: grid; gap: 3px; padding: 0 0 18px 36px; }
  /* o fio entre um ponto e o próximo (de centro a centro) */
  .v32e-cb__rota > li:not(:last-child)::after { content: ''; position: absolute; z-index: 0; left: 8px; top: 12px; width: 2px; height: 100%; border-radius: 2px; background: #D8AC52; transform-origin: 50% 0; }
  .v32e-cb__no { position: absolute; z-index: 1; left: 2px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #10294A; box-shadow: inset 0 0 0 2px #D8AC52; }
  .v32e-cb__no--de { background: #D8AC52; box-shadow: 0 0 0 4px rgba(216, 172, 82, 0.18); }
  .v32e-cb__no--ate { left: -6px; top: 0; display: grid; place-items: center; width: 30px; height: 30px; background: #0B2035; box-shadow: inset 0 0 0 1.5px #D8AC52; }
  .v32e-cb__elos { width: 19px; height: auto; }
  .v32e-cb__ponta small { font: 600 0.68rem/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
  .v32e-cb__ponta--ate { padding-top: 4px; padding-bottom: 14px; }
  .v32e-cb__fim { font: 600 1.02rem/1.3 var(--f-texto); color: #FFFFFF; }
  .v32e-cb__n { font: 400 1.32rem/1.15 var(--f-titulo); letter-spacing: -0.01em; color: #FFFFFF; }
  .v32e-cb__d { font-size: 0.92rem; line-height: 1.4; color: #C9D8E4; }
  .v32e-cb__passo { padding-top: 2px; }
  .v32e-cb__zap { display: grid; margin-top: 16px; }
  .v32e-cb__zap-i { grid-area: 1 / 1; transition: opacity 300ms linear, visibility 0s linear 0s; }
  .v32e-cb__zap-i:not(.on) { opacity: 0; visibility: hidden; transition: opacity 200ms linear, visibility 0s linear 200ms; }
  /* cada lugar guarda as duas palavras: a do caminho escolhido aparece; ao trocar, a velha sobe e some, a nova vem de baixo */
  /* (cada palavra rola dentro do próprio recorte: a velha sai inteira por cima enquanto a nova entra por baixo) */
  .v32e-rola { display: grid; align-items: start; overflow: clip; overflow-clip-margin: 3px; }
  .v32e-rola__i { grid-area: 1 / 1; transition: opacity 260ms linear calc(var(--d, 0ms) + 90ms), translate 560ms cubic-bezier(.22, 1, .36, 1) var(--d, 0ms), visibility 0s linear var(--d, 0ms); }
  .v32e-rola__i:not(.on) { opacity: 0; translate: 0 105%; visibility: hidden; transition: opacity 160ms linear var(--d, 0ms), translate 460ms cubic-bezier(.65, 0, .35, 1) var(--d, 0ms), visibility 0s linear calc(var(--d, 0ms) + 460ms); }
  .v32e-rola__i.sai { translate: 0 -105%; }
  /* o fio se desenha de ponto em ponto quando a seção aparece e a cada troca; os pontos assentam junto */
  .anima .v32e-cb__rota.v32e-cb--desenha > li:not(:last-child)::after { animation: v32e-fio 380ms cubic-bezier(.45, 0, .2, 1) both; }
  .anima .v32e-cb__rota.v32e-cb--desenha > li:nth-child(2)::after { animation-delay: 300ms; }
  .anima .v32e-cb__rota.v32e-cb--desenha > li:nth-child(3)::after { animation-delay: 600ms; }
  .anima .v32e-cb__rota.v32e-cb--desenha > li:nth-child(4)::after { animation-delay: 900ms; }
  .anima .v32e-cb__rota.v32e-cb--desenha .v32e-cb__no { animation: v32e-no 420ms cubic-bezier(.3, 1.5, .5, 1) both; }
  .anima .v32e-cb__rota.v32e-cb--desenha > li:nth-child(2) .v32e-cb__no { animation-delay: 300ms; }
  .anima .v32e-cb__rota.v32e-cb--desenha > li:nth-child(3) .v32e-cb__no { animation-delay: 600ms; }
  .anima .v32e-cb__rota.v32e-cb--desenha > li:nth-child(4) .v32e-cb__no { animation-delay: 900ms; }
  .anima .v32e-cb__rota.v32e-cb--desenha > li:nth-child(5) .v32e-cb__no { animation-delay: 1200ms; }

  /* --- c · lado a lado: os dois caminhos numa tabela; o marcador do seletor desce pela coluna escolhida --- */
  .v32e-cc { --q: 66px; position: relative; display: grid; grid-template-columns: var(--q) minmax(0, 1fr) minmax(0, 1fr); padding: 4px; border-radius: 20px;
    background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.22); }
  .v32e-cc__coluna { position: absolute; z-index: 0; left: calc(4px + var(--q)); top: 4px; bottom: 4px; width: calc((100% - 8px - var(--q)) / 2); border-radius: 16px; background: #F1E5CC;
    box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.7); transition: translate 460ms cubic-bezier(.22, 1, .36, 1); }
  .v32e-cam--c[data-sel="1"] .v32e-cc__coluna { translate: 100% 0; }
  .v32e-cc .v32e-seg { grid-column: 2 / 4; position: relative; z-index: 1; }
  .v32e-cc .v32e-seg__trilho { width: 100%; padding: 0; background: none; box-shadow: none; }
  .v32e-cc .v32e-seg__cursor { display: none; }
  .v32e-cc .v32e-seg__bt { flex-direction: column; gap: 6px; min-height: 66px; padding: 10px 4px 8px; font-size: 0.9rem; white-space: normal; text-align: center; }
  .v32e-cc__l { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; border-top: 1px solid rgba(232, 206, 147, 0.14); }
  .v32e-cc__l > span { padding: 13px 10px; }
  .v32e-cc__q { display: grid; justify-items: start; padding-left: 10px !important; font: 600 0.72rem/1.25 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #E8CE93; }
  .v32e-cc__no { width: 12px; height: 12px; margin-left: 4px; border-radius: 50%; box-shadow: inset 0 0 0 2px #D8AC52; }
  .v32e-cc__a, .v32e-cc__b { color: #8FA5B8; transition: color 320ms linear; }
  .v32e-cc__l--ponta :is(.v32e-cc__a, .v32e-cc__b) { font: 600 0.9rem/1.3 var(--f-texto); }
  .v32e-cc__l--passo :is(.v32e-cc__a, .v32e-cc__b) { font: 400 1.22rem/1.1 var(--f-titulo); letter-spacing: -0.01em; }
  .v32e-cam--c:not([data-sel="1"]) .v32e-cc__a, .v32e-cam--c[data-sel="1"] .v32e-cc__b { color: #0B2035; }
  .v32e-cc__res { display: grid; margin-top: 18px; }
  .v32e-cc__res-i { grid-area: 1 / 1; display: grid; gap: 14px; transition: opacity 300ms linear, translate 450ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s; }
  .v32e-cc__res-i:not(.on) { opacity: 0; translate: 0 8px; visibility: hidden; transition: opacity 200ms linear, translate 300ms, visibility 0s linear 200ms; }
  .v32e-cc__res-i p { font: 400 1.4rem/1.15 var(--f-titulo); letter-spacing: -0.01em; color: #FFFFFF; text-align: center; }
}
@media (max-width: 379px) {
  .v32e-seg__bt { gap: 5px; font-size: 0.86rem; }
  .v32e-seg__ic { width: 19px; height: 19px; }
  .v32e-cc { --q: 62px; }
  .v32e-cc__q { padding-left: 8px !important; }
  .v32e-cc__l > span { padding: 12px 8px; }
  .v32e-cc__l--passo :is(.v32e-cc__a, .v32e-cc__b) { font-size: 1.12rem; }
  .v32e-cc__l--ponta :is(.v32e-cc__a, .v32e-cc__b) { font-size: 0.85rem; }
}
@keyframes v32e-fio { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes v32e-no { from { scale: 0.3; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .v32e-seg__cursor, .v32e-cc__coluna, .v32e-rola__i, .v32e-ca__ficha, .v32e-cc__res-i { transition: none !important; }
  .v32e-cb__rota > li::after, .v32e-cb__no { animation: none !important; }
}

/* zzzzzz-v32-f-processos.css */
/* ---------- v32 · frente f-processos (JM, 11/10) · /mapeamento-de-processos ----------
   1. topo: o cartão do processo enxuto (.v32f-tl): três etapas em sequência, quem faz e quando. Sem a prancheta 3D.
   2. o objeto 3D do processo (ic-processo.webp, Blender) dentro do título, solto como na home
   3. as áreas de "O que a empresa recebe": o azul só pinta quando a área é escolhida (nada ao tocar e segurar) */

/* ===== 1. Topo: o cartão do processo ===== */
.v32f-cena { position: relative; z-index: 2; display: grid; place-items: center; min-width: 0; perspective: 1800px; }
.v32f-tl { --t: #0B2035; --t2: #5B6875; --ouro: #D8AC52; --verde: #2F7A52;
  position: relative; width: min(100%, 560px); padding: 7px; border-radius: 24px; font-family: var(--f-texto); color: var(--t); text-align: left;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 50px 80px -40px rgba(0, 0, 0, 0.8); }
.v32f-tl :where(p, ol) { margin: 0; padding: 0; list-style: none; }
.v32f-tl .ed-i { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
/* a faixa marinho: o nome do processo e o estado */
.v32f-tl__barra { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; border-radius: 17px 17px 0 0; background: linear-gradient(180deg, #0E2740 0%, #0B2035 100%); color: #E8CE93; }
.v32f-tl__barra > .ed-i { width: 20px; height: 20px; stroke-width: 1.6; }
.v32f-tl__barra b { font: 600 17px/1 var(--f-texto); letter-spacing: -0.01em; color: #FFFFFF; white-space: nowrap; }
.v32f-tl__estado { display: grid; justify-items: end; margin-left: auto; font: 600 12.5px/1 var(--f-texto); white-space: nowrap; }
.v32f-tl__estado > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 5px; transition: opacity 400ms, translate 500ms cubic-bezier(.16, 1, .3, 1); }
.v32f-tl__estado-a { color: #E8CE93; opacity: 0; }
.v32f-tl__estado-b { color: #8FD3AE; }
.v32f-tl__estado-b .ed-i { width: 14px; height: 14px; stroke-width: 2.6; }
/* o fluxo: três etapas lado a lado, ligadas pelo fio dourado com a seta */
.v32f-tl__fluxo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 26px 14px 8px !important; border-radius: 0 0 17px 17px; background: #F6F2EA; }
.v32f-tl__fluxo li { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 0 4px; text-align: center; }
.v32f-tl__no { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 50%; background: var(--t); color: #E8CE93;
  transition: background-color 350ms, color 350ms, box-shadow 350ms; transition-delay: var(--d, 0ms); }
.v32f-tl__no .ed-i { width: 17px; height: 17px; stroke-width: 2.6; }
.v32f-tl__ult .v32f-tl__no { background: var(--ouro); color: var(--t); }
.v32f-tl__fluxo b { font: 600 17px/1.1 var(--f-texto); letter-spacing: -0.01em; }
.v32f-tl__quem { display: flex; align-items: center; gap: 4px; font: 500 13px/1.2 var(--f-texto); color: var(--t2); white-space: nowrap; }
.v32f-tl__quem .ed-i { width: 14px; height: 14px; stroke-width: 1.7; color: #8C7A52; }
.v32f-tl__prazo { font: 600 13px/1.2 var(--f-texto); color: #7A5A1E; white-space: nowrap; }
/* o fio de um nó ao próximo, com a ponta da seta */
.v32f-tl__fluxo li:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: calc(50% + 25px); width: calc(100% - 50px); height: 2px; border-radius: 2px; background: var(--ouro);
  transform-origin: 0 50%; transition: scale 380ms cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--d, 0ms) + 260ms); }
.v32f-tl__fluxo li:not(:last-child)::before { content: ''; position: absolute; z-index: 1; top: 15px; left: calc(150% - 31px); width: 0; height: 0; border-block: 4px solid transparent; border-left: 6px solid var(--ouro);
  transition: opacity 200ms linear; transition-delay: calc(var(--d, 0ms) + 560ms); }
.v32f-tl__fluxo :is(.v32f-tl__quem, .v32f-tl__prazo) { transition: opacity 380ms linear, translate 520ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0ms) + 120ms); }
.v32f-tl__pe { margin-top: -1px !important; padding: 12px 14px 14px; border-radius: 0 0 17px 17px; background: #F6F2EA; font: 500 12.5px/1.2 var(--f-texto); color: var(--t2); text-align: center;
  transition: opacity 400ms, translate 500ms cubic-bezier(.16, 1, .3, 1); }
.v32f-tl__fluxo { border-radius: 0; }

/* estado final é o padrão (sem JS); com animação, o cartão entra com as etapas sem dono e o JS acende uma a uma */
.anima .v32f-tl:not(.vivo) .v32f-tl__no { background: #FFFFFF; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(11, 32, 53, 0.28); }
.anima .v32f-tl:not(.vivo) .v32f-tl__fluxo li::after { scale: 0 1; }
.anima .v32f-tl:not(.vivo) .v32f-tl__fluxo li::before { opacity: 0; }
.anima .v32f-tl:not(.vivo) :is(.v32f-tl__quem, .v32f-tl__prazo) { opacity: 0; translate: 0 6px; }
.anima .v32f-tl:not(.pronto) .v32f-tl__estado-a { opacity: 1; }
.anima .v32f-tl:not(.pronto) .v32f-tl__estado-b { opacity: 0; translate: 0 6px; }
.anima .v32f-tl:not(.pronto) .v32f-tl__pe { opacity: 0.001; }
.anima .v32f-cena { opacity: 0; translate: 0 60px; animation: ht-entra 1200ms cubic-bezier(.16, 1, .3, 1) 260ms forwards; }

@media (min-width: 1024px) {
  .v32f-tl { width: min(100%, 620px); transform: rotateX(6deg) rotateY(-13deg) rotateZ(1.5deg); transform-style: preserve-3d; }
  .v32f-tl__barra { height: 64px; padding: 0 22px; }
  .v32f-tl__barra b { font-size: 21px; }
  .v32f-tl__estado { font-size: 14px; }
  .v32f-tl__fluxo { padding: 40px 18px 14px !important; }
  .v32f-tl__no { width: 44px; height: 44px; }
  .v32f-tl__fluxo li:not(:last-child)::after { top: 21px; left: calc(50% + 28px); width: calc(100% - 56px); }
  .v32f-tl__fluxo li:not(:last-child)::before { top: 18px; left: calc(150% - 34px); }
  .v32f-tl__fluxo b { font-size: 21px; }
  .v32f-tl__quem, .v32f-tl__prazo { font-size: 15px; }
  .v32f-tl__pe { padding: 16px 18px 18px; font-size: 13px; }
}
@media (max-width: 1023px) {
  .v32f-cena { margin-top: 6px; }
  .v32f-tl { width: min(100%, 460px); }
}
@media (max-width: 379px) {
  .v32f-tl__barra { padding: 0 14px; }
  .v32f-tl__barra b { font-size: 16px; }
  .v32f-tl__fluxo { padding-inline: 8px !important; }
  .v32f-tl__fluxo li { padding: 0 2px; }
  .v32f-tl__fluxo b { font-size: 16px; }
  .v32f-tl__quem, .v32f-tl__prazo { font-size: 12px; }
  .v32f-tl__quem .ed-i { width: 12px; height: 12px; }
}

/* ===== 2. O objeto 3D do processo dentro do título (solto, sem a placa de vidro, como na home) ===== */
.ph .hpl-pc { width: 0.8em; height: 0.86em; margin: 0 0 0 0.12em; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
.ph .hpl-pc img { width: 1.3em; max-width: none; height: 1.3em; margin: -0.4em 0 0 -0.6em; opacity: 1; translate: 0 0;
  filter: drop-shadow(0 0.04em 0.04em rgba(0, 0, 0, 0.45)) drop-shadow(0 0.14em 0.18em rgba(0, 0, 0, 0.35)); }
.ph .ph__l:has(.hpl-pc) { overflow: visible; }

/* ===== 3. As áreas (Contas a pagar, Faturamento, Compras, Admissão): o azul só com a escolha =====
   Ao tocar e segurar, o :active pintava parte do botão (zzz-m-int.css: 16% do azul; processos.css: inteiro) sem a área
   ter sido escolhida. Agora segurar não pinta nada; o azul sobe só quando o clique troca o aria-selected. */
@media (hover: none), (pointer: coarse) {
  .pp__abas button:active:not([aria-selected="true"]) .pp__pint { scale: 1 0; }
  .pp__abas button { -webkit-tap-highlight-color: transparent; }
}
@media (hover: none), (pointer: coarse) {
  .pp__abas button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* ===== 4. Cartões das etapas ("Como o mapeamento acontece"): variante do POP, que fica. Só o objeto 3D sai da
   caixinha de vidro e fica solto na cabeça marinho (padrão do JM de 11/10: elemento 3D sem caixa, fundo ou sombra) ===== */
.pm__topo .pm__obj { background: none; box-shadow: none; border-radius: 0; }
.pm__topo .pm__obj img { width: 50px; height: 50px; max-width: none; }
@media (min-width: 1024px) { .pm__topo .pm__obj img { width: 44px; height: 44px; } }

/* zzzzzz-v32-g-menu.css */
/* v32 g-menu · menu do celular em três estilos (?menu=a|b|c). Marcação em cabecalho-menu.mjs, motor em
   src/js/v31/v32-g-menu.js. O cabeçalho fica por cima (z 50), o menu logo abaixo (z 49), a bolha do WhatsApp (z 40)
   fica sob o véu. Abrir e fechar só com transform e opacidade; nada anima altura. */

/* ---------- botão do cabeçalho: as duas linhas viram um X ---------- */
.topo__menu-linhas i { transition: transform 380ms cubic-bezier(.3, 1.3, .5, 1); }
.topo__menu[aria-expanded="true"] .topo__menu-linhas i:first-child { transform: translateY(3.25px) rotate(45deg); }
.topo__menu[aria-expanded="true"] .topo__menu-linhas i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.topo__menu:active { transform: scale(0.97); }

/* ---------- base comum ---------- */
.v32m { position: fixed; inset: 0; z-index: 49; }
.v32m[hidden] { display: none; }
.v32m:not(.v32m--aberto) { pointer-events: none; } /* saindo: já não segura o toque da página */
@media (min-width: 1100px) { .v32m { display: none; } }
.v32m__veu { position: absolute; inset: 0; background: rgba(3, 10, 18, 0.66); opacity: 0; transition: opacity 280ms linear; }
.v32m--aberto .v32m__veu { opacity: 1; transition-duration: 380ms; }
.v32m--sem-anima, .v32m--sem-anima *, .v32m--sem-anima *::before, .v32m--sem-anima *::after { transition: none !important; animation: none !important; }
.v32m__painel { position: absolute; isolation: isolate; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.v32m__painel--puxando { transition: none !important; }
.v32m__alca, .v32m__cab, .v32m__contato, .v32m__aval--claro { display: none; }
.v32m__lista { display: grid; margin: 0; padding: 0; list-style: none; }
.v32m__item { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.v32m__item:focus-visible { outline: 2px solid #E8CE93; outline-offset: 3px; }
.v32m__txt { display: block; min-width: 0; }
.v32m__nome { display: block; font-family: var(--f-titulo); font-weight: 400; }
.v32m__nome-in { display: inline-block; }
.v32m__linha { display: block; font-family: var(--f-texto); }
.v32m__aqui-elos { display: inline-block; width: 1.05em; height: auto; margin-right: 0.28em; vertical-align: -0.08em; }
.v32m__obj { display: block; height: auto; pointer-events: none; }
.v32m__acoes { display: grid; gap: 10px; justify-items: center; }
.v32m__aval { min-height: 44px; }
.v32m__contato a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.v32m__hora { margin: 0; }

/* ======================================================================================================
   A · FOLHA: sobe de baixo, solta das bordas como a ilha do cabeçalho. Cartão Conex marinho com os elos
   grandes em marca d'água; cada serviço é um cartão com o objeto 3D solto, saindo pela borda. Puxar fecha.
   ====================================================================================================== */
.v32m[data-estilo="a"] .v32m__painel {
  left: var(--moldura); right: var(--moldura); bottom: calc(var(--moldura) + env(safe-area-inset-bottom));
  max-height: calc(100dvh - var(--altura-topo) - var(--moldura) - env(safe-area-inset-bottom));
  padding: 8px 12px 16px; border-radius: 30px; color: #F7F3EA;
  background: url('/v32-menu-elos.svg') right -38% bottom -24px / 128% auto no-repeat,
    radial-gradient(120% 60% at 100% 0%, rgba(216, 172, 82, 0.17) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.24), 0 -10px 60px -18px rgba(0, 0, 0, 0.75);
  transform: translateY(calc(100% + 40px)); transition: transform 320ms cubic-bezier(.5, 0, .75, 0);
}
.v32m--aberto[data-estilo="a"] .v32m__painel { transform: none; transition: transform 620ms cubic-bezier(.2, 1, .3, 1); }
/* a marca d'água entra como fundo (um pseudo-elemento solto daria rolagem ao painel) */
.v32m[data-estilo="a"] .v32m__alca { display: block; width: 46px; height: 5px; margin: 2px auto 14px; border-radius: 3px; background: rgba(232, 206, 147, 0.5); }
.v32m[data-estilo="a"] .v32m__lista { gap: 10px; }
.v32m[data-estilo="a"] .v32m__item {
  display: grid; grid-template-columns: minmax(0, 1fr) 100px; align-items: center; gap: 6px; min-height: 108px; padding: 14px 10px 14px 20px;
  border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.16); transition: background-color 200ms linear, transform 200ms ease;
}
.v32m[data-estilo="a"] .v32m__item:active { transform: scale(0.985); background-color: rgba(255, 255, 255, 0.06); }
.v32m[data-estilo="a"] .v32m__item[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.55); }
.v32m[data-estilo="a"] .v32m__nome { font-size: 1.62rem; line-height: 1.05; letter-spacing: -0.015em; color: #FFFFFF; }
.v32m[data-estilo="a"] .v32m__linha { margin-top: 7px; font-size: 0.9375rem; line-height: 1.3; color: #C9D8E4; }
.v32m[data-estilo="a"] [aria-current] .v32m__nome, .v32m[data-estilo="a"] [aria-current] .v32m__linha { color: #E8CE93; }
.v32m[data-estilo="a"] .v32m__obj { width: 108px; margin: -20px -8px -16px -10px; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.45)); }
.v32m[data-estilo="a"] .v32m__acoes { margin-top: 14px; }
.v32m[data-estilo="a"] .v32m__whats { width: 100%; }
/* cascata: os cartões sobem um a um e o objeto chega girando e assenta (como os setores do BPO) */
.v32m[data-estilo="a"] .v32m__li, .v32m[data-estilo="a"] .v32m__acoes { opacity: 0; transform: translateY(30px); transition: opacity 160ms linear, transform 300ms ease-in; }
.v32m[data-estilo="a"] .v32m__obj { opacity: 0; transform: translateY(18px) rotate(-12deg) scale(0.82); transition: opacity 140ms linear, transform 300ms ease-in; }
.v32m--aberto[data-estilo="a"] .v32m__li, .v32m--aberto[data-estilo="a"] .v32m__acoes { opacity: 1; transform: none; transition: opacity 360ms linear var(--d, 120ms), transform 640ms cubic-bezier(.2, 1, .3, 1) var(--d, 120ms); }
.v32m--aberto[data-estilo="a"] .v32m__obj { opacity: 1; transform: none; transition: opacity 300ms linear calc(var(--d, 120ms) + 90ms), transform 820ms cubic-bezier(.3, 1.45, .5, 1) calc(var(--d, 120ms) + 90ms); }
.v32m[data-estilo="a"] .v32m__li:nth-child(1) { --d: 130ms; }
.v32m[data-estilo="a"] .v32m__li:nth-child(2) { --d: 195ms; }
.v32m[data-estilo="a"] .v32m__li:nth-child(3) { --d: 260ms; }
.v32m[data-estilo="a"] .v32m__acoes { --d: 330ms; }

/* ======================================================================================================
   B · TELA CHEIA: uma cortina marinho desce por trás do cabeçalho, os elos grandes assentam ao fundo, os nomes
   sobem de dentro da linha (Newsreader grande) em cascata e o contato fica no pé.
   ====================================================================================================== */
.v32m[data-estilo="b"] .v32m__veu { background: rgba(3, 10, 18, 0.35); }
.v32m[data-estilo="b"] .v32m__painel {
  inset: 0; display: flex; flex-direction: column;
  padding: calc(var(--altura-topo) + 18px) var(--margem) calc(20px + env(safe-area-inset-bottom)); color: #F7F3EA;
  background: radial-gradient(90% 46% at 100% 0%, rgba(216, 172, 82, 0.15) 0%, rgba(216, 172, 82, 0) 62%), linear-gradient(172deg, #143454 0%, #0B2035 52%, #071729 100%);
  transform: translateY(-100%); transition: transform 400ms cubic-bezier(.65, 0, .85, .25) 80ms;
}
.v32m--aberto[data-estilo="b"] .v32m__painel { transform: none; transition: transform 640ms cubic-bezier(.75, 0, .2, 1); }
.v32m[data-estilo="b"] .v32m__painel::before {
  content: ''; position: absolute; z-index: -1; right: -58%; bottom: 10%; width: 150%; aspect-ratio: 662 / 412; pointer-events: none;
  background: #E8CE93; opacity: 0.12; -webkit-mask: url('/cartao-elos.svg') center / contain no-repeat; mask: url('/cartao-elos.svg') center / contain no-repeat;
  transform: translateY(70px) scale(1.08); transition: transform 400ms ease-in;
}
.v32m--aberto[data-estilo="b"] .v32m__painel::before { transform: none; transition: transform 1400ms cubic-bezier(.2, .8, .2, 1) 200ms; }
.v32m[data-estilo="b"] .v32m__li { border-bottom: 1px solid rgba(232, 206, 147, 0.17); }
.v32m[data-estilo="b"] .v32m__item { padding: 16px 0 15px; }
.v32m[data-estilo="b"] .v32m__nome { overflow: hidden; padding-bottom: 0.06em; font-size: clamp(2.1rem, 1.1rem + 5.2vw, 2.9rem); line-height: 1.04; letter-spacing: -0.025em; color: #FFFFFF; }
.v32m[data-estilo="b"] .v32m__linha { margin-top: 4px; font-size: 0.9375rem; color: #AFC3D5; }
.v32m[data-estilo="b"] [aria-current] .v32m__nome, .v32m[data-estilo="b"] [aria-current] .v32m__linha { color: #E8CE93; }
.v32m[data-estilo="b"] .v32m__item:active .v32m__nome { color: #E8CE93; }
.v32m[data-estilo="b"] .v32m__obj { display: none; }
.v32m[data-estilo="b"] .v32m__acoes { margin-top: auto; padding-top: 26px; }
.v32m[data-estilo="b"] .v32m__whats { width: 100%; }
.v32m[data-estilo="b"] .v32m__contato {
  display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; column-gap: 16px;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(232, 206, 147, 0.17); font-size: 0.9375rem; color: #DDE7F0;
}
.v32m[data-estilo="b"] .v32m__hora { grid-column: 1 / -1; font-size: 0.8125rem; color: #93A9BD; }
/* cascata */
.v32m[data-estilo="b"] .v32m__nome-in { transform: translateY(112%); transition: transform 240ms ease-in; }
.v32m--aberto[data-estilo="b"] .v32m__nome-in { transform: none; transition: transform 760ms cubic-bezier(.2, 1, .3, 1) var(--d, 300ms); }
.v32m[data-estilo="b"] .v32m__linha, .v32m[data-estilo="b"] .v32m__li { transition: opacity 160ms linear; }
.v32m[data-estilo="b"] .v32m__linha { opacity: 0; }
.v32m--aberto[data-estilo="b"] .v32m__linha { opacity: 1; transition: opacity 420ms linear calc(var(--d, 300ms) + 160ms); }
.v32m[data-estilo="b"] .v32m__li { border-bottom-color: rgba(232, 206, 147, 0); }
.v32m--aberto[data-estilo="b"] .v32m__li { border-bottom-color: rgba(232, 206, 147, 0.17); transition: border-color 500ms linear var(--d, 300ms); }
.v32m[data-estilo="b"] .v32m__li:nth-child(1) { --d: 300ms; }
.v32m[data-estilo="b"] .v32m__li:nth-child(2) { --d: 380ms; }
.v32m[data-estilo="b"] .v32m__li:nth-child(3) { --d: 460ms; }
.v32m[data-estilo="b"] .v32m__acoes, .v32m[data-estilo="b"] .v32m__contato { opacity: 0; transform: translateY(16px); transition: opacity 140ms linear, transform 200ms ease-in; }
.v32m--aberto[data-estilo="b"] .v32m__acoes, .v32m--aberto[data-estilo="b"] .v32m__contato { opacity: 1; transform: none; transition: opacity 400ms linear 560ms, transform 700ms cubic-bezier(.2, 1, .3, 1) 560ms; }

/* ======================================================================================================
   C · CARTÃO CONEX: a ilha do cabeçalho abre um cartão logo abaixo, crescendo a partir do botão (o desenho do
   POP de Processos: cabeça marinho com a curva do elo e o traço dourado, corpo marfim). Objetos 3D soltos na lista.
   ====================================================================================================== */
.v32m[data-estilo="c"] .v32m__veu { background: rgba(3, 10, 18, 0.58); }
.v32m[data-estilo="c"] .v32m__painel {
  top: calc(var(--altura-topo) + 2px); left: var(--moldura); right: var(--moldura);
  max-height: calc(100dvh - var(--altura-topo) - 2px - var(--moldura) - env(safe-area-inset-bottom));
  border-radius: 24px; background: #FBF6EC; color: #0B2035;
  box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.22), 0 34px 60px -26px rgba(0, 0, 0, 0.8);
  transform-origin: calc(100% - 46px) -24px; transform: translateY(-6px) scale(0.88); opacity: 0;
  transition: transform 240ms cubic-bezier(.5, 0, .75, 0), opacity 200ms linear 40ms;
}
.v32m--aberto[data-estilo="c"] .v32m__painel { transform: none; opacity: 1; transition: transform 520ms cubic-bezier(.2, 1.15, .35, 1), opacity 140ms linear; }
.v32m[data-estilo="c"] .v32m__cab { display: block; position: relative; z-index: 1; padding: 18px 22px 14px; color: #F7F3EA; background: linear-gradient(165deg, #133150 0%, #0B2035 70%); }
.v32m[data-estilo="c"] .v32m__cab::after {
  content: ''; position: absolute; z-index: -1; right: -22%; top: -40%; width: 84%; aspect-ratio: 662 / 412; pointer-events: none;
  background: #E8CE93; opacity: 0.14; -webkit-mask: url('/cartao-elos.svg') center / contain no-repeat; mask: url('/cartao-elos.svg') center / contain no-repeat;
}
.v32m[data-estilo="c"] .v32m__rot { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.v32m[data-estilo="c"] .v32m__rot-elos { width: 28px; height: auto; flex: none; }
.v32m[data-estilo="c"] .v32m__tit { margin: 10px 0 0; font: 400 2.1rem/1 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; }
.v32m[data-estilo="c"] .v32m__fio { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 22px; overflow: visible; pointer-events: none; }
.v32m[data-estilo="c"] .v32m__curva { fill: #0B2035; }
.v32m[data-estilo="c"] .v32m__traco { fill: none; stroke: #D8AC52; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.v32m[data-estilo="c"] .v32m__lista { padding: 24px 0 2px; }
.v32m[data-estilo="c"] .v32m__li + .v32m__li { border-top: 1px solid rgba(154, 113, 32, 0.24); margin: 0 20px; }
.v32m[data-estilo="c"] .v32m__li:first-child { margin: 0 20px; }
.v32m[data-estilo="c"] .v32m__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 82px; padding: 8px 0; }
.v32m[data-estilo="c"] .v32m__item:focus-visible { outline-color: #9A7120; }
.v32m[data-estilo="c"] .v32m__obj { order: -1; width: 74px; margin: -6px -6px -6px -4px; filter: drop-shadow(0 10px 10px rgba(11, 32, 53, 0.22)); }
.v32m[data-estilo="c"] .v32m__nome { font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.015em; color: #0B2035; }
.v32m[data-estilo="c"] .v32m__linha { margin-top: 5px; font-size: 0.9rem; line-height: 1.3; color: #55606B; }
.v32m[data-estilo="c"] [aria-current] .v32m__nome, .v32m[data-estilo="c"] [aria-current] .v32m__linha { color: #8A6418; }
.v32m[data-estilo="c"] .v32m__item:active .v32m__nome { color: #8A6418; }
.v32m[data-estilo="c"] .v32m__acoes { padding: 12px 20px 4px; }
.v32m[data-estilo="c"] .v32m__whats { width: 100%; color: #F7F3EA; background-color: #0B2035; background-image: linear-gradient(165deg, #133150 0%, #0B2035 70%); }
.v32m[data-estilo="c"] .v32m__whats .bt__caixa { background: #D8AC52; color: #0B2035; }
.v32m[data-estilo="c"] .v32m__aval--escuro { display: none; }
.v32m[data-estilo="c"] .v32m__aval--claro { display: inline-flex; }
.v32m[data-estilo="c"] .v32m__contato {
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; margin: 4px 20px 0; padding: 4px 0 12px;
  border-top: 1px solid rgba(154, 113, 32, 0.24); font-size: 0.9375rem; color: #0B2035;
}
.v32m[data-estilo="c"] .v32m__hora { flex-basis: 100%; text-align: center; font-size: 0.8125rem; color: #6A737C; }
/* cascata curta: o cartão cresce do botão e o conteúdo assenta logo atrás */
.v32m[data-estilo="c"] .v32m__li, .v32m[data-estilo="c"] .v32m__acoes, .v32m[data-estilo="c"] .v32m__contato { opacity: 0; transform: translateY(10px); transition: opacity 120ms linear, transform 200ms ease-in; }
.v32m--aberto[data-estilo="c"] .v32m__li, .v32m--aberto[data-estilo="c"] .v32m__acoes, .v32m--aberto[data-estilo="c"] .v32m__contato { opacity: 1; transform: none; transition: opacity 320ms linear var(--d, 120ms), transform 560ms cubic-bezier(.2, 1, .3, 1) var(--d, 120ms); }
.v32m[data-estilo="c"] .v32m__obj { transform: rotate(-10deg) scale(0.8); transition: transform 200ms ease-in; }
.v32m--aberto[data-estilo="c"] .v32m__obj { transform: none; transition: transform 760ms cubic-bezier(.3, 1.45, .5, 1) calc(var(--d, 120ms) + 60ms); }
.v32m[data-estilo="c"] .v32m__li:nth-child(1) { --d: 140ms; }
.v32m[data-estilo="c"] .v32m__li:nth-child(2) { --d: 190ms; }
.v32m[data-estilo="c"] .v32m__li:nth-child(3) { --d: 240ms; }
.v32m[data-estilo="c"] .v32m__acoes { --d: 290ms; }
.v32m[data-estilo="c"] .v32m__contato { --d: 330ms; }

/* telas estreitas e baixas (360 × 640): tudo cabe sem rolar o painel */
@media (max-width: 379px) {
  .v32m[data-estilo="a"] .v32m__item { grid-template-columns: minmax(0, 1fr) 84px; min-height: 96px; padding-left: 18px; }
  .v32m[data-estilo="a"] .v32m__nome { font-size: 1.45rem; }
  .v32m[data-estilo="a"] .v32m__linha { font-size: 0.875rem; }
  .v32m[data-estilo="a"] .v32m__obj { width: 92px; }
  .v32m[data-estilo="c"] .v32m__item { grid-template-columns: 56px minmax(0, 1fr); }
  .v32m[data-estilo="c"] .v32m__obj { width: 64px; }
  .v32m[data-estilo="c"] .v32m__nome { font-size: 1.36rem; }
}
@media (max-height: 700px) {
  .v32m[data-estilo="a"] .v32m__alca { margin-bottom: 10px; }
  .v32m[data-estilo="a"] .v32m__lista { gap: 8px; }
  .v32m[data-estilo="a"] .v32m__item { min-height: 88px; padding-block: 10px; }
  .v32m[data-estilo="c"] .v32m__cab { padding: 14px 22px 10px; }
  .v32m[data-estilo="c"] .v32m__tit { margin-top: 8px; font-size: 1.8rem; }
  .v32m[data-estilo="c"] .v32m__lista { padding-top: 18px; }
  .v32m[data-estilo="c"] .v32m__item { min-height: 70px; padding: 4px 0; }
  .v32m[data-estilo="c"] .v32m__acoes { padding-top: 8px; gap: 4px; }
  .v32m[data-estilo="c"] .v32m__contato { padding-bottom: 6px; }
}

/* zzzzzz-v32-z-junta.css */
/* v32 junção: o destaque do seletor do comparativo anda e muda de largura junto (largura vem do JS) */
@media (max-width: 899px) {
  .cp__seg-trilho { grid-template-columns: auto auto; }
  .cp__seg-cursor { transition: translate 420ms cubic-bezier(.22, 1, .36, 1), width 420ms cubic-bezier(.22, 1, .36, 1), background-color 300ms linear; }
}

/* zzzzzz-v32-z2-decisoes.css */
/* v32, decisão 6A do JM (11/10): nenhum fundo se mexe, nem a folha marfim do topo do ERP no computador. Em vez de subir
   presa à rolagem, ela aparece no lugar (esmaece) quando o dashboard chega ao marfim (body.ex-marfim, dado pelo JS). */
@media (min-width: 900px) {
  .ex__marfim { translate: none; opacity: 0; transition: opacity 520ms linear; }
  body.ex-marfim .ex__marfim { opacity: 1; }
  .ex__marfim .ex__onda { display: none; }
}

/* zzzzzzz-v33-c-comp.css */
/* ===================== v33 c-comp · comparativo (JM, 11/10) =====================
   1) Cada custo do assistente ganha um objeto 3D do Blender (mesmo padrão dos renders do site), solto, sem caixinha.
      Na ficha da Conex a mesma linha mostra o objeto apagado e riscado por um fio dourado: o custo some (R$ 0).
   2) "Quem faz / Seu tempo / Na falta" viram três cartões marinho com os elos em marca d'água, cada um com o
      contraste em dois objetos: o do assistente apagado, o da Conex inteiro. Entram em sequência na rolagem. */

/* ---------- 1 · objetos por custo ---------- */
.cp .v33c-obj { flex: none; display: block; width: 54px; height: 54px; margin: -10px -2px -10px -6px; object-fit: contain; }
.cp .cp__ficha--clt .v33c-obj { filter: drop-shadow(0 5px 5px rgba(74, 52, 12, 0.2)); }
.cp .cp__ficha--clt dt { align-items: flex-start; gap: 10px; }
.cp .cp__ficha--clt dt > span { padding-top: 5px; }
.cp .cp__ficha--clt dd { padding-top: 6px; }
.cp .cp__ficha--conex dt { align-items: center; gap: 10px; }
.cp .cp__ficha--conex dl > div { padding-block: 9px; }
.cp .cp__ficha--conex .v33c-obj--inc { width: 48px; height: 48px; margin: -8px -2px -8px -4px; filter: drop-shadow(0 6px 8px rgba(3, 10, 20, 0.45)); }

/* o custo que some: objeto apagado (sem cor, transparente) e o fio dourado que o risca na diagonal */
.cp .v33c-zero { position: relative; flex: none; width: 48px; height: 48px; margin: -8px -2px -8px -4px; }
.cp .v33c-zero .v33c-obj { width: 100%; height: 100%; margin: 0; filter: grayscale(1) brightness(1.3); opacity: 0.26;
  transition: filter 900ms linear, opacity 900ms linear; }
.cp .v33c-risco { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); fill: none; stroke: #E0B65E; stroke-width: 2.4; stroke-linecap: round; overflow: visible; }
.cp .v33c-risco path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 620ms cubic-bezier(.65, 0, .35, 1); }
/* com animação: o objeto chega inteiro e só se apaga quando a ficha da Conex aparece (o JS põe .v33c-zerou) */
.anima .cp .cp__ficha--conex:not(.v33c-zerou) .v33c-zero .v33c-obj { filter: none; opacity: 1; }
.anima .cp .cp__ficha--conex:not(.v33c-zerou) .v33c-risco path { stroke-dashoffset: 1; }
.cp .v33c-zerou .v33c-l0:nth-child(2) .v33c-risco path { transition-delay: 180ms; } .cp .v33c-zerou .v33c-l0:nth-child(2) .v33c-obj { transition-delay: 380ms; }
.cp .v33c-zerou .v33c-l0:nth-child(3) .v33c-risco path { transition-delay: 360ms; } .cp .v33c-zerou .v33c-l0:nth-child(3) .v33c-obj { transition-delay: 560ms; }
.cp .v33c-zerou .v33c-l0:nth-child(4) .v33c-risco path { transition-delay: 540ms; } .cp .v33c-zerou .v33c-l0:nth-child(4) .v33c-obj { transition-delay: 740ms; }
.cp .v33c-zerou .v33c-l0:nth-child(1) .v33c-obj { transition-delay: 200ms; }

@media (min-width: 900px) {
  .cp .v33c-obj { width: 58px; height: 58px; margin: -12px -2px -12px -6px; }
  .cp .v33c-zero, .cp .cp__ficha--conex .v33c-obj--inc { width: 50px; height: 50px; margin: -9px -2px -9px -4px; }
}
/* o objeto ocupa mais que o ícone de traço: o detalhe da linha pode quebrar e nada empurra a ficha para fora da tela */
.cp .cp__ficha > *, .cp .cp__ficha dt > span { min-width: 0; }
@media (max-width: 380px) {
  .cp .v33c-obj { width: 44px; height: 44px; margin: -7px -4px -7px -6px; }
  .cp .cp__ficha--clt dt { gap: 8px; }
  .cp .cp__ficha--clt dt small span { white-space: normal; }
  .cp .v33c-zero, .cp .cp__ficha--conex .v33c-obj--inc { width: 44px; height: 44px; margin: -7px -2px -7px -4px; }
}

/* ---------- 2 · a diferença além do preço: três cartões marinho ---------- */
.cp .v33c-dif { max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; }
.v33c-dif__t { margin: 0 0 16px; text-align: center; font: 500 clamp(1.625rem, 1.3rem + 1vw, 2.125rem)/1.1 var(--f-titulo); letter-spacing: -0.015em; color: #0B2035; }
.v33c-dif__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.v33c-cartao { position: relative; isolation: isolate; overflow: hidden; padding: 16px 14px 20px; border-radius: 22px; color: #F7F3EA;
  background: radial-gradient(120% 70% at 100% 0%, rgba(216, 172, 82, 0.16) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.2), 0 30px 46px -34px rgba(6, 18, 31, 0.9); }
/* a marca d'água dos elos em evidência, cortada pela borda de baixo */
.v33c-cartao::before { content: ''; position: absolute; z-index: -1; right: -26%; bottom: -34%; width: 100%; aspect-ratio: 662 / 412; pointer-events: none;
  background: #E8CE93; opacity: 0.22; -webkit-mask: url('/cartao-elos.svg') center / contain no-repeat; mask: url('/cartao-elos.svg') center / contain no-repeat; }
.v33c-cartao__q { margin: 0 0 6px; text-align: center; font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase; color: #E8CE93; }
.v33c-cartao__lados { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); column-gap: 6px; align-items: start; }
.v33c-lado { display: grid; justify-items: center; gap: 3px; margin: 0; text-align: center; }
.v33c-lado__obj { display: block; width: 96px; height: 96px; margin-bottom: 2px; }
.v33c-lado__obj img { display: block; width: 100%; height: 100%; object-fit: contain; }
.v33c-lado--a .v33c-lado__obj img { filter: grayscale(0.75) brightness(0.92); opacity: 0.62; }
.v33c-lado--b .v33c-lado__obj img { filter: drop-shadow(0 10px 12px rgba(3, 10, 20, 0.5)); }
/* a pessoa sozinha fica menor que a equipe (o recorte quadrado deixava a pessoa maior), as duas apoiadas na mesma linha */
.v33c-lado__obj img[src*="pessoa"] { scale: 0.66; translate: 0 16%; }
.v33c-lado__obj img[src*="equipe"] { scale: 1.16; translate: 0 6%; }
.v33c-lado__quem { font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #B4C2CF; }
.v33c-lado--b .v33c-lado__quem { color: #E8CE93; }
.v33c-lado__txt { font: 400 1rem/1.25 var(--f-texto); color: #C9D4DE; text-wrap: balance; }
.v33c-lado--b .v33c-lado__txt { font: 500 1.375rem/1.12 var(--f-titulo); letter-spacing: -0.01em; color: #FFFFFF; }
.v33c-cartao__seta { width: 24px; height: 12px; margin-top: 44px; fill: none; stroke: #D8AC52; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v33c-cartao__seta path { stroke-dasharray: 1; }
@media (min-width: 900px) {
  .v33c-dif__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .v33c-dif__t { margin-bottom: 22px; }
  .v33c-cartao { padding: 20px 16px 24px; }
  .v33c-lado__obj { width: 104px; height: 104px; }
  .v33c-cartao__seta { margin-top: 48px; }
}
@media (max-width: 380px) {
  .v33c-cartao { padding: 14px 10px 18px; }
  .v33c-lado__obj { width: 86px; height: 86px; }
  .v33c-cartao__seta { margin-top: 39px; }
  .v33c-cartao__lados { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); column-gap: 4px; }
  .v33c-cartao__seta { width: 20px; }
  .v33c-lado__txt { font-size: 0.9375rem; }
  .v33c-lado--b .v33c-lado__txt { font-size: 1.25rem; }
}
/* entrada: o cartão chega no lugar; dentro dele o lado do assistente, a seta que se traça e a Conex */
.anima .v33c-cartao { opacity: 0; translate: 0 16px; transition: opacity 600ms linear, translate 900ms cubic-bezier(.16, 1, .3, 1); }
.anima .v33c-cartao .v33c-lado { opacity: 0; transition: opacity 500ms linear; }
.anima .v33c-cartao .v33c-lado--b .v33c-lado__obj { scale: 0.88; transition: scale 900ms cubic-bezier(.16, 1, .3, 1); }
.anima .v33c-cartao .v33c-cartao__seta path { stroke-dashoffset: 1; transition: stroke-dashoffset 600ms cubic-bezier(.65, 0, .35, 1); }
.anima .v33c-cartao.v33c-in { opacity: 1; translate: 0 0; }
.anima .v33c-cartao.v33c-in .v33c-lado { opacity: 1; }
.anima .v33c-cartao.v33c-in .v33c-lado--a { transition-delay: 250ms; }
.anima .v33c-cartao.v33c-in .v33c-cartao__seta path { stroke-dashoffset: 0; transition-delay: 600ms; }
.anima .v33c-cartao.v33c-in .v33c-lado--b { transition-delay: 900ms; }
.anima .v33c-cartao.v33c-in .v33c-lado--b .v33c-lado__obj { scale: 1; transition-delay: 900ms; }
@media (prefers-reduced-motion: reduce) {
  .v33c-cartao, .v33c-cartao *, .cp .v33c-zero *, .cp .v33c-risco path { transition: none !important; }
}

/* zzzzzzz-v33-d-bpo.css */
/* ---------- v33 d-bpo (JM, 11/10): /bpo-financeiro-recife, foco no computador ----------
   1. a peça 3D saiu do título (bpo.mjs; nada aqui)
   2. topo no computador: a tela do tablet vira o software do fechamento (resultado, entrou e saiu, três marcos, caixa)
   3. o que é no computador: as seis frentes numa lista que se abre e troca sozinha; BPO × contabilidade em dois lados
   4. o mês mais rápido: trilho menor e trocas mais curtas (o amortecimento está no site.js)
   5. o que a Conex assume no computador: grade de cinco cartões Conex abertos (as tiras verticais saíram)
   6. setores no computador: o objeto reage quando o setor vem para o palco; sem a tinta clara que subia no cartão
   Carrega por último (ordem alfabética). */

/* ---------- 2. a tela do tablet (desenho em 400 × 580, dentro de .bh__tela) ---------- */
.v33d-app { --t: #0B2035; --t2: #56636F; --t3: #8A949E; --fio: rgba(11, 32, 53, 0.08); --ouro: #D8AC52; --ouro2: #A47A22; --verde: #2F7A52;
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 22px; background: #FCFAF6; color: var(--t); font-family: var(--f-texto); font-variant-numeric: tabular-nums; }
.v33d-app :where(p, ol) { margin: 0; padding: 0; list-style: none; }
.v33d-app__bar { display: flex; align-items: center; gap: 9px; margin: 0 -22px; padding: 17px 22px 14px; background: #FFFFFF; box-shadow: inset 0 -1px 0 var(--fio); }
.v33d-app__elos { flex: none; width: 27px; height: auto; }
.v33d-app__marca { display: flex; align-items: center; gap: 8px; font: 700 13.5px/1 var(--f-texto); letter-spacing: -0.01em; }
.v33d-app__marca span { padding-left: 8px; box-shadow: inset 1px 0 0 rgba(11, 32, 53, 0.16); font-weight: 500; color: var(--t2); }
.v33d-app__per { display: flex; align-items: center; gap: 5px; height: 26px; margin-left: auto !important; padding: 0 8px 0 10px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.14); font: 600 11.5px/1 var(--f-texto); color: var(--t); }
.v33d-app__per svg { width: 11px; height: 11px; color: var(--t2); }
/* blocos separados por fio, sem caixas */
.v33d-app > div:not(.v33d-app__bar) { padding: 16px 0; }
.v33d-app > div + div:not(.v33d-app__res) { box-shadow: inset 0 1px 0 var(--fio); }
.v33d-app__res { padding-top: 20px !important; padding-bottom: 12px !important; }
.v33d-app__rot, .v33d-app__t { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 11.5px/1.2 var(--f-texto); color: var(--t2); }
.v33d-app__t b { font-weight: 500; color: var(--t3); }
.v33d-app__estado { display: grid; justify-items: end; white-space: nowrap; }
.v33d-app__estado > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 4px; transition: opacity 300ms linear, translate 450ms cubic-bezier(.16, 1, .3, 1); }
.v33d-app__estado-a { color: #8C6A1E; opacity: 0; }
.v33d-app__estado-b { color: var(--verde); }
.v33d-app__estado svg { width: 13px; height: 13px; }
.v33d-app__num { margin-top: 8px !important; font: 600 44px/1 var(--f-texto); letter-spacing: -0.045em; color: var(--t); }
.v33d-app__pct { margin-top: 9px !important; font: 500 12px/1.2 var(--f-texto); color: var(--t2); }
.v33d-app__pct b { font-weight: 700; color: var(--ouro2); }
/* entrou e saiu numa barra só: o que entrou é a barra inteira, dividida no que saiu e no que sobrou */
.v33d-app__lin { display: flex; align-items: baseline; justify-content: space-between; font: 600 11.5px/1.2 var(--f-texto); color: var(--t2); }
.v33d-app__lin b { font: 600 14px/1 var(--f-texto); color: var(--t); }
.v33d-app__barra { display: flex; gap: 3px; height: 10px; margin-top: 10px !important; }
.v33d-app__barra i { height: 100%; border-radius: 3px; transform-origin: 0 50%; }
.v33d-app__barra .v33d-app__s { flex: 74; background: var(--t); border-radius: 5px 3px 3px 5px; }
.v33d-app__barra .v33d-app__o { flex: 26; background: var(--ouro); border-radius: 3px 5px 5px 3px; }
.v33d-app__leg { display: flex; justify-content: space-between; margin-top: 10px !important; font: 500 11.5px/1.2 var(--f-texto); color: var(--t2); }
.v33d-app__leg span { display: flex; align-items: center; gap: 6px; }
.v33d-app__leg i { width: 8px; height: 8px; border-radius: 2px; }
.v33d-app__leg .v33d-app__s { background: var(--t); } .v33d-app__leg .v33d-app__o { background: var(--ouro); }
.v33d-app__leg b { font-weight: 600; color: var(--t); }
/* os três marcos do fechamento, ligados por um fio que se enche */
.v33d-app__passos { --v33d-k: 1; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px !important; }
.v33d-app__passos::before, .v33d-app__passos::after { content: ''; position: absolute; left: 16.667%; right: 16.667%; top: 11px; height: 2px; border-radius: 1px; background: rgba(11, 32, 53, 0.1); }
.v33d-app__passos::after { background: var(--ouro); transform-origin: 0 50%; transform: scaleX(var(--v33d-k)); transition: transform 320ms cubic-bezier(.4, 0, .2, 1); }
.v33d-app__passos li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; font: 600 11.5px/1.25 var(--f-texto); color: var(--t); transition: color 250ms linear; }
.v33d-app__passos i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--t); color: #E8CE93; transition: background-color 250ms, color 250ms, box-shadow 250ms, scale 450ms cubic-bezier(.3, 1.6, .5, 1); }
.v33d-app__passos i svg { width: 13px; height: 13px; }
.v33d-app__passos li:last-child i { background: var(--ouro); color: var(--t); }
/* o caixa projetado em linha */
.v33d-app__gw { position: relative; margin-top: 12px; }
.v33d-app__graf { display: block; width: 100%; height: 104px; overflow: visible; }
.v33d-app__grade { fill: none; stroke: rgba(11, 32, 53, 0.13); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.v33d-app__linha { fill: none; stroke: #C8962F; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.v33d-app__ponto { position: absolute; right: -4px; top: calc(4 / 104 * 100% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #C8962F; box-shadow: 0 0 0 3px #FCFAF6; }
.v33d-app__meses { display: flex; justify-content: space-between; margin-top: 8px !important; font: 500 10.5px/1 var(--f-texto); color: var(--t3); }

/* entrada (quando o tablet assenta, o site.js põe .bh--tela): os blocos sobem um a um, a barra se divide, os marcos se
   confirmam (o JS marca .ok), a linha se desenha e o estado passa a "Mês fechado" (.fechado). Uns 1,8 s ao todo */
.anima .v33d-app > * { opacity: 0; translate: 0 10px; transition: opacity 380ms linear, translate 600ms cubic-bezier(.16, 1, .3, 1); }
.anima .bh--tela .v33d-app > * { opacity: 1; translate: none; }
.anima .bh--tela .v33d-app > :nth-child(2) { transition-delay: 70ms; } .anima .bh--tela .v33d-app > :nth-child(3) { transition-delay: 140ms; }
.anima .bh--tela .v33d-app > :nth-child(4) { transition-delay: 210ms; } .anima .bh--tela .v33d-app > :nth-child(5) { transition-delay: 280ms; }
.anima .v33d-app__barra i { scale: 0 1; transition: scale 700ms cubic-bezier(.22, 1, .36, 1) 260ms; }
.anima .v33d-app__barra .v33d-app__o { transition-delay: 520ms; }
.anima .bh--tela .v33d-app__barra i { scale: none; }
.anima .v33d-app__linha { stroke-dashoffset: 1; transition: stroke-dashoffset 1000ms cubic-bezier(.4, 0, .2, 1) 600ms; }
.anima .v33d-app__area { opacity: 0; transition: opacity 600ms linear 1100ms; }
.anima .v33d-app__ponto { opacity: 0; scale: 0.4; transition: opacity 200ms linear 1500ms, scale 450ms cubic-bezier(.3, 1.6, .5, 1) 1500ms; }
.anima .bh--tela .v33d-app__linha { stroke-dashoffset: 0; }
.anima .bh--tela .v33d-app__area, .anima .bh--tela .v33d-app__ponto { opacity: 1; scale: none; }
.anima .v33d-app:not(.fechado) .v33d-app__passos li:not(.ok) i { background: #FFFFFF; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(11, 32, 53, 0.22); scale: 0.86; }
.anima .v33d-app:not(.fechado) .v33d-app__passos li:not(.ok) { color: var(--t3); }
.anima .v33d-app:not(.fechado) .v33d-app__estado-a { opacity: 1; }
.anima .v33d-app:not(.fechado) .v33d-app__estado-b { opacity: 0; translate: 0 5px; }

/* ---------- 3. o que é (computador): a lista que se abre e o BPO × contabilidade ---------- */
.v33d-fr, .v33d-dif { display: none; }
@media (min-width: 1024px) {
  .v33d-fr { display: grid; margin: 2px 0 0; padding: 0; list-style: none; box-shadow: inset 0 1px 0 rgba(11, 32, 53, 0.12); }
  .v33d-fr__i { position: relative; box-shadow: inset 0 -1px 0 rgba(11, 32, 53, 0.12); }
  /* o fio da linha da vez enche enquanto ela está aberta; cheio, a lista passa para a próxima */
  .v33d-fr__i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #C8962F; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
  .v33d-fr--auto .v33d-fr__i.on::after { animation: v33d-fio 4200ms linear forwards; }
  .v33d-fr--parada .v33d-fr__i.on::after { animation-play-state: paused; }
  .v33d-fr__b { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 0; cursor: pointer; font: 600 1.06rem/1.25 var(--f-texto); color: #0B2035; }
  .v33d-fr__b:focus-visible { outline: 2px solid #C8962F; outline-offset: 3px; border-radius: 8px; }
  .v33d-fr__b .bv__ic { transition: background-color 250ms, color 250ms, box-shadow 250ms; }
  .v33d-fr__n { flex: 1; min-width: 0; }
  .v33d-fr__mais { flex: none; width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 50%; color: #0B2035; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.22); transition: background-color 250ms, color 250ms, box-shadow 250ms; }
  .v33d-fr__v { transform-origin: 50% 50%; transform-box: fill-box; transition: transform 350ms cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine){.v33d-fr__b:hover .v33d-fr__mais{ background: #0B2035; color: #E8CE93; box-shadow: none; }}
@media (hover: hover) and (pointer: fine){.v33d-fr__b:hover .bv__ic{ background: #0B2035; color: #E8CE93; box-shadow: none; }}
  .v33d-fr__i.on .bv__ic { background: #0B2035; color: #E8CE93; box-shadow: none; }
  .v33d-fr__i.on .v33d-fr__mais { background: #0B2035; color: #E8CE93; box-shadow: none; }
  .v33d-fr__i.on .v33d-fr__v { transform: scaleY(0); }
  .v33d-fr__i.on .v33d-fr__b { cursor: default; }
  .v33d-fr__c { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms cubic-bezier(.22, 1, .36, 1); }
  .v33d-fr__i.on .v33d-fr__c { grid-template-rows: 1fr; }
  .v33d-fr__c > div { min-height: 0; overflow: hidden; }
  .v33d-fr__c p { margin: 0; padding: 0 44px 15px 50px; font-size: 1rem; line-height: 1.5; color: #3B4753; opacity: 0; translate: 0 -4px; transition: opacity 250ms linear, translate 400ms cubic-bezier(.22, 1, .36, 1); }
  .v33d-fr__i.on .v33d-fr__c p { opacity: 1; translate: none; transition-delay: 120ms; }
  /* a linha da vez acende a mesma linha no celular, como linha escolhida num sistema (fundo marinho, texto claro) */
  .bf-t__lista li { transition: background-color 300ms, box-shadow 300ms, color 300ms; }
  .bf-t__lista li.realce { background: #0B2035; box-shadow: none; color: #FFFFFF; }
  .bf-t__lista li.realce small { color: #C9D8E4; }
  .bf-t__lista li.realce > svg:first-child { background: #1B4670; stroke: #E8CE93; }
  .bf-t__lista li.realce > svg:last-child { background: #E8CE93; color: #0B2035; }
  .bf-t__lista li > svg { transition: background-color 300ms, stroke 300ms, color 300ms; }

  /* BPO × contabilidade: dois lados, cada um com o seu objeto e três exemplos */
  .v33d-dif { display: grid; gap: 22px; margin-top: clamp(56px, 6vw, 92px); }
  .v33d-dif__t { margin: 0; font: 400 clamp(1.7rem, 1.1rem + 1.1vw, 2.35rem)/1.15 var(--f-titulo); letter-spacing: -0.02em; color: #0B2035; text-wrap: balance; }
  .v33d-dif__t span { color: #6A747E; }
  .v33d-dif__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .v33d-dif__c { display: flex; flex-direction: column; padding: 30px 34px 22px; border-radius: 28px; }
  .v33d-dif__c::before { width: 78%; right: -20%; bottom: -30%; opacity: 0.26; }
  .v33d-dif__c.cartao-bpo--claro::before { opacity: 0.22; }
  .v33d-dif__ob { position: absolute; right: clamp(18px, 2.2vw, 34px); top: clamp(14px, 1.6vw, 22px); width: clamp(104px, 9vw, 136px); height: auto; pointer-events: none; }
  .v33d-dif__quem { display: flex; align-items: center; gap: 9px; margin: 0; font: 600 0.74rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
  .v33d-dif__elos { width: 24px; height: auto; }
  .v33d-dif__c h3 { margin: 14px 0 0; font: 400 clamp(2rem, 1.3rem + 1.3vw, 2.7rem)/1.02 var(--f-titulo); letter-spacing: -0.025em; color: #FFFFFF; }
  .v33d-dif__sub { margin: 6px 0 0; font-size: 1.06rem; line-height: 1.4; color: #C9D8E4; }
  .v33d-dif__c ul { display: grid; margin: 22px 0 0; padding: 0; list-style: none; }
  .v33d-dif__c li { display: flex; align-items: center; gap: 11px; padding: 12px 0; box-shadow: inset 0 1px 0 rgba(232, 206, 147, 0.18); font: 500 1.02rem/1.3 var(--f-texto); color: #FFFFFF; }
  .v33d-dif__c li svg { flex: none; width: 22px; height: 22px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: #E8CE93; color: #0B2035; }
  .v33d-dif__c--cont .v33d-dif__quem { color: #85621A; }
  .v33d-dif__c--cont h3 { color: #0B2035; }
  .v33d-dif__c--cont .v33d-dif__sub { color: #56636F; }
  .v33d-dif__c--cont li { color: #26323E; box-shadow: inset 0 1px 0 rgba(154, 113, 32, 0.2); }
  .v33d-dif__c--cont li svg { background: none; color: #85621A; box-shadow: inset 0 0 0 1.5px rgba(154, 113, 32, 0.5); }
  /* entrada: os dois lados sobem, o objeto de cada um chega girando e assenta */
  .anima .v33d-dif > * { opacity: 0; translate: 0 26px; transition: opacity 500ms linear, translate 800ms cubic-bezier(.16, 1, .3, 1); }
  .anima .v33d-dif__c { opacity: 0; translate: 0 34px; transition: opacity 500ms linear, translate 900ms cubic-bezier(.16, 1, .3, 1); }
  .anima .v33d-dif__ob { opacity: 0; scale: 0.55; rotate: -14deg; transition: opacity 300ms linear, scale 800ms cubic-bezier(.3, 1.45, .5, 1), rotate 800ms cubic-bezier(.3, 1.45, .5, 1); }
  .anima .v33d-dif.vista > *, .anima .v33d-dif.vista .v33d-dif__c { opacity: 1; translate: none; }
  .anima .v33d-dif.vista .v33d-dif__par { transition-delay: 80ms; }
  .anima .v33d-dif.vista .v33d-dif__c + .v33d-dif__c { transition-delay: 140ms; }
  .anima .v33d-dif.vista .v33d-dif__ob { opacity: 1; scale: 1; rotate: 0deg; transition-delay: 380ms; }
  .anima .v33d-dif.vista .v33d-dif__c + .v33d-dif__c .v33d-dif__ob { transition-delay: 520ms; }
}
@keyframes v33d-fio { to { transform: scaleX(1); } }

/* ---------- 4. o mês: trilho menor (era 300svh) e trocas mais curtas ---------- */
.bm--vivo .bm__trilho { height: 210svh; }
@media (min-width: 1024px) {
  .bm__p { transition: opacity 300ms cubic-bezier(.4, 0, .2, 1), transform 460ms cubic-bezier(.22, 1, .36, 1), visibility 0s 300ms; }
  .bm__p.on { transition: opacity 300ms cubic-bezier(.4, 0, .2, 1) 50ms, transform 460ms cubic-bezier(.22, 1, .36, 1) 50ms, visibility 0s; }
  .bm__p > * { transition: opacity 300ms, translate 460ms cubic-bezier(.22, 1, .36, 1); }
  .bm__p.on > :nth-child(3) { transition-delay: 40ms; } .bm__p.on > :nth-child(4) { transition-delay: 70ms; } .bm__p.on > :nth-child(5) { transition-delay: 100ms; }
  .bm__p .bm__obj { transition: opacity 300ms, rotate 520ms cubic-bezier(.3, 1.3, .5, 1), scale 520ms cubic-bezier(.3, 1.3, .5, 1); }
  .bm__semanas li { transition: opacity 280ms, box-shadow 280ms; }
  .bm__etapas li { transition: color 280ms; }
}

/* ---------- 5. o que a Conex assume (computador): grade de cinco cartões Conex abertos ---------- */
.v33d-ba { display: none; }
@media (min-width: 900px) {
  .ba .ba__paineis, .ba .ba__nav { display: none; }
  .v33d-ba { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .v33d-ba__c { grid-column: span 2; display: flex; flex-direction: column; min-height: 290px; padding: 28px 28px 24px; border-radius: 26px; }
  .v33d-ba__c--notas, .v33d-ba__c--relatorio { grid-column: span 3; min-height: 236px; }
  .v33d-ba__c::before { width: 84%; right: -24%; bottom: -34%; opacity: 0.3; }
  .v33d-ba__c--notas::before, .v33d-ba__c--relatorio::before { width: 56%; right: -12%; bottom: -40%; }
  .v33d-ba__ob { position: absolute; right: 18px; top: 14px; width: clamp(96px, 8vw, 122px); aspect-ratio: 1; pointer-events: none; }
  .v33d-ba__ob img { display: block; width: 100%; height: 100%; transition: rotate 600ms cubic-bezier(.3, 1.5, .5, 1), translate 600ms cubic-bezier(.3, 1.5, .5, 1), scale 600ms cubic-bezier(.3, 1.5, .5, 1); }
  .v33d-ba__c--notas .v33d-ba__ob, .v33d-ba__c--relatorio .v33d-ba__ob { right: 26px; top: 50%; margin-top: -86px; width: clamp(130px, 11vw, 160px); }
  .v33d-ba__txt { display: grid; gap: 10px; padding-right: clamp(96px, 7.4vw, 108px); }
  .v33d-ba__c--notas .v33d-ba__txt, .v33d-ba__c--relatorio .v33d-ba__txt { padding-right: clamp(150px, 13vw, 190px); }
  .v33d-ba__txt h3 { margin: 6px 0 0; font: 400 clamp(1.7rem, 1.1rem + 0.8vw, 2rem)/1.04 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; }
  .v33d-ba__d { margin: 0; max-width: 36ch; font-size: 1rem; line-height: 1.5; color: #C9D8E4; text-wrap: pretty; }
  .v33d-ba__r { display: grid; gap: 5px; margin: auto 0 0; padding-top: 16px; box-shadow: inset 0 1px 0 rgba(232, 206, 147, 0.2); font-size: 1rem; line-height: 1.45; color: #FFFFFF; }
  .v33d-ba__c--notas .v33d-ba__r, .v33d-ba__c--relatorio .v33d-ba__r { margin-right: clamp(150px, 13vw, 190px); }
  /* o "você recebe" de cada cartão com a mesma altura (duas linhas), para os fios ficarem na mesma linha */
  .v33d-ba__r { min-height: calc(16px + 0.7rem * 1.3 + 5px + 2.9em); align-content: start; }
  .v33d-ba__r span { font: 600 0.7rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
  /* o objeto reage ao ponteiro (gira um pouco e assenta); o cartão não se mexe */
@media (hover: hover) and (pointer: fine){.v33d-ba__c:hover .v33d-ba__ob[data-hover-interno] img{ rotate: -9deg; translate: 0 -6px; scale: 1.07; }}
  /* entrada: os cartões sobem um depois do outro; o objeto de cada um chega girando e assenta */
  .anima .v33d-ba__c { opacity: 0; translate: 0 44px; transition: opacity 500ms linear, translate 900ms cubic-bezier(.16, 1, .3, 1); }
  .anima .v33d-ba__ob { opacity: 0; scale: 0.5; rotate: -16deg; transition: opacity 300ms linear, scale 800ms cubic-bezier(.3, 1.45, .5, 1), rotate 800ms cubic-bezier(.3, 1.45, .5, 1); }
  .anima .v33d-ba.vista .v33d-ba__c { opacity: 1; translate: none; }
  .anima .v33d-ba.vista .v33d-ba__ob { opacity: 1; scale: 1; rotate: 0deg; transition-delay: 300ms; }
  .anima .v33d-ba.vista .v33d-ba__c:nth-child(2) { transition-delay: 80ms; } .anima .v33d-ba.vista .v33d-ba__c:nth-child(2) .v33d-ba__ob { transition-delay: 380ms; }
  .anima .v33d-ba.vista .v33d-ba__c:nth-child(3) { transition-delay: 160ms; } .anima .v33d-ba.vista .v33d-ba__c:nth-child(3) .v33d-ba__ob { transition-delay: 460ms; }
  .anima .v33d-ba.vista .v33d-ba__c:nth-child(4) { transition-delay: 240ms; } .anima .v33d-ba.vista .v33d-ba__c:nth-child(4) .v33d-ba__ob { transition-delay: 540ms; }
  .anima .v33d-ba.vista .v33d-ba__c:nth-child(5) { transition-delay: 320ms; } .anima .v33d-ba.vista .v33d-ba__c:nth-child(5) .v33d-ba__ob { transition-delay: 620ms; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .v33d-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v33d-ba__c, .v33d-ba__c--notas { grid-column: span 1; min-height: 300px; }
  .v33d-ba__c--relatorio { grid-column: span 2; min-height: 240px; }
  .v33d-ba__c--notas .v33d-ba__ob { top: 14px; margin-top: 0; width: 104px; }
  .v33d-ba__c--notas .v33d-ba__txt { padding-right: 104px; }
  .v33d-ba__c--notas .v33d-ba__r { margin-right: 0; }
}

/* ---------- 6. setores (computador): as três frentes de cada setor e o objeto que reage ----------
   Saiu a tinta clara que subia no cartão (genérica). O setor da vez (ponteiro, foco ou clique) fica com o nome claro, as
   frentes em ouro e o objeto pula do nicho, gira e assenta um pouco acima; o cartão não cresce nem acende borda */
.v33d-bs__tags { display: none; }
@media (min-width: 900px) {
  .bs-set .bs-set__pint { display: none; }
  .bs-set .bs-set__s { grid-template-rows: auto auto; row-gap: 3px; padding-block: 16px; overflow: visible; } /* sem a tinta, nada para recortar: o objeto pode sair do cartão ao pular */
  .bs-set .bs-set__s .bs-set__arte { grid-row: 1 / 3; align-self: center; }
  .bs-set .bs-set__s .bs-set__n { align-self: end; }
  .bs-set .bs-set__s:nth-child(n+4) .bs-set__n, .bs-set .bs-set__s:nth-child(n+4) .v33d-bs__tags { grid-column: 2; }
  .bs-set .bs-set__s:nth-child(-n+3) .bs-set__n, .bs-set .bs-set__s:nth-child(-n+3) .v33d-bs__tags { grid-column: 1; }
  .bs-set .bs-set__s:nth-child(-n+3) .bs-set__arte { grid-column: 2; }
  .v33d-bs__tags { display: block; grid-row: 2; align-self: start; margin: 0; font: 600 0.8rem/1.3 var(--f-texto); letter-spacing: 0.01em; color: rgba(201, 216, 228, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 300ms linear; }
  .bs-set .bs-set__s.on .v33d-bs__tags { color: #E8CE93; }
  .bs-set .bs-set__s.on .bs-set__arte { opacity: 1; scale: none; }
  .bs-set .bs-set__arte::before { transition: background 400ms linear; }
  .bs-set .bs-set__s.on .bs-set__arte::before { background: linear-gradient(180deg, #F6E7C4 0%, #DDB664 100%); }
  .bs-set .bs-set__s.on .bs-set__arte img { animation: v33d-bs-pula 760ms cubic-bezier(.3, 1.2, .5, 1) both; }
}
@keyframes v33d-bs-pula { 0% { translate: 0 0; rotate: 0deg; scale: 1; } 40% { translate: 0 -16px; rotate: -12deg; scale: 1.14; } 72% { translate: 0 -5px; rotate: 5deg; scale: 1.06; } 100% { translate: 0 -7px; rotate: 0deg; scale: 1.08; } }
@media (prefers-reduced-motion: reduce) {
  .bs-set .bs-set__s.on .bs-set__arte img { animation: none; }
  .v33d-fr__i::after { display: none; }
}

/* zzzzzzz-v33-e-erp.css */
/* ---------- v33 e-erp · /implantacao-de-erp (JM, 11/10) ----------
   1. a peça 3D saiu do título (erp.mjs; as regras .v32e-l3/.v32e-pc ficaram sem uso)
   2. o painel do topo no computador, refeito: software escuro de verdade nas cores da Conex (.v33e-ed)
   3. (v36 erp: saiu; os módulos no computador estão em zzzzzzzzzz-v36-erp.css)
   Carrega por último (ordem alfabética). */

/* ===== 2 · o painel do topo (1200 × 740 px de desenho; a escala vem do JS do topo) ===== */
.ed.v33e-ed { --v-fundo: #0B1A2A; --v-lado: #08151F; --v-painel: #0F2135; --v-fio: rgba(201, 216, 228, 0.085); --v-tinta: #EEF2F5; --v-cinza: #8FA3B6; --v-apagado: #5F7487;
  --v-ouro: #D8AC52; --v-ouro-claro: #E8CE93; --v-azul: #6FA3C2;
  grid-template-columns: 212px minmax(0, 1fr); background: var(--v-fundo); color: var(--v-tinta); }
.v33e-ed .ed-i { width: 17px; height: 17px; stroke-width: 1.6; }
.v33e-ed :where(p, ul, ol, dl, dd) { margin: 0; padding: 0; list-style: none; }

/* menu lateral: os módulos do sistema, o ativo só com fundo e o ícone em ouro */
.v33e-ed__menu { display: flex; flex-direction: column; gap: 6px; padding: 20px 14px 18px; background: var(--v-lado); box-shadow: inset -1px 0 0 var(--v-fio); }
.v33e-ed__marca { display: flex; align-items: center; gap: 10px; margin-bottom: 18px !important; padding: 8px 8px 8px 6px !important; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--v-fio); }
.v33e-ed__elos { width: 30px; height: auto; flex: none; }
.v33e-ed__marca > span { display: grid; white-space: nowrap; gap: 2px; font: 600 14px/1.15 var(--f-texto); letter-spacing: -0.01em; color: #FFFFFF; }
.v33e-ed__marca small { font: 500 10.5px/1.2 var(--f-texto); letter-spacing: 0; color: #7F93A6; }
.v33e-ed__chev { width: 14px; height: 14px; margin-left: auto; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: #7F93A6; }
.v33e-ed__sec { padding: 0 10px 6px !important; font: 600 10px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--v-apagado); }
.v33e-ed__nav { display: grid; gap: 2px; }
.v33e-ed__nav li { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 10px; border-radius: 9px; font: 500 13.5px/1 var(--f-texto); color: #A9B8C6; }
.v33e-ed__nav li .ed-i { color: #6F8396; }
.v33e-ed__nav li.on { background: rgba(255, 255, 255, 0.065); color: #FFFFFF; }
.v33e-ed__nav li.on .ed-i { color: var(--v-ouro-claro); }
.v33e-ed__pe { display: flex; align-items: center; gap: 11px; margin-top: auto !important; padding: 14px 10px 0 !important; border-top: 1px solid var(--v-fio); color: #A9B8C6; }
.v33e-ed__pe > span { display: grid; gap: 3px; font: 600 12.5px/1.1 var(--f-texto); color: #FFFFFF; }
.v33e-ed__pe small { font: 500 11px/1.2 var(--f-texto); color: #7F93A6; }

/* corpo: barra de cima, e três peças só (saldo, pedido, contas) */
.v33e-ed__corpo { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0 24px 22px; min-width: 0; }
.v33e-ed__topo { display: flex; align-items: center; gap: 10px; height: 62px; margin-bottom: 20px; border-bottom: 1px solid var(--v-fio); }
.v33e-ed__trilha { display: flex; align-items: center; gap: 8px; margin-right: auto !important; font: 500 13px/1 var(--f-texto); color: var(--v-cinza); }
.v33e-ed__trilha span { color: #3E5266; } .v33e-ed__trilha b { font: 600 16px/1 var(--f-texto); letter-spacing: -0.01em; color: #FFFFFF; }
.v33e-ed__sync { display: flex; align-items: center; gap: 7px; margin-right: 8px !important; font: 500 12px/1 var(--f-texto); color: var(--v-cinza); }
.v33e-ed__sync .ed-i { width: 14px; height: 14px; stroke-width: 2.4; color: var(--v-ouro); }
.v33e-ed__busca, .v33e-ed__per { display: flex; align-items: center; gap: 8px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--v-fio); font: 500 12px/1 var(--f-texto); }
.v33e-ed__busca { width: 190px; padding: 0 6px 0 11px; color: #6F8396; }
.v33e-ed__busca .ed-i { width: 14px; height: 14px; }
.v33e-ed__busca kbd { margin-left: auto; padding: 4px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); font: 600 10px/1 var(--f-texto); color: #8193A6; }
.v33e-ed__per { gap: 6px; padding: 0 9px 0 12px; font-weight: 600; color: var(--v-tinta); }
.v33e-ed__per .v33e-ed__chev { margin: 0; }

.v33e-ed__grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); gap: 16px; min-height: 0; }
.v33e-ed__p { min-width: 0; padding: 18px 20px; border-radius: 14px; background: var(--v-painel); box-shadow: inset 0 0 0 1px var(--v-fio), inset 0 1px 0 rgba(255, 255, 255, 0.035); }
.v33e-ed__p > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.v33e-ed__tit { font: 600 13.5px/1.2 var(--f-texto); color: #FFFFFF; }
.v33e-ed__nota { font: 500 11.5px/1 var(--f-texto); color: var(--v-cinza); }
.v33e-ed__rot { font: 600 10.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-cinza); }

/* o saldo: um número grande, o mês numa linha só e a mira que passeia pelos dias */
.v33e-ed__saldo { grid-column: 1; }
.v33e-ed__saldo > header { align-items: flex-start; }
.v33e-ed__num { display: flex; align-items: baseline; gap: 14px; margin-top: 12px !important; }
.v33e-ed__num b { font: 600 40px/1 var(--f-texto); letter-spacing: -0.035em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.v33e-ed__num span { font: 600 12.5px/1 var(--f-texto); color: var(--v-ouro-claro); }
.v33e-ed__res { display: flex; gap: 28px; padding-top: 2px; }
.v33e-ed__res dt { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--f-texto); color: var(--v-cinza); }
.v33e-ed__res dt i { width: 8px; height: 8px; border-radius: 2px; }
.v33e-ed__res dt i.e { background: var(--v-azul); } .v33e-ed__res dt i.s { background: #3E566E; }
.v33e-ed__res dd { margin-top: 7px !important; font: 600 15px/1 var(--f-texto); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.v33e-ed__graf { --x: 580px; --y: 48.4px; position: relative; width: 588px; height: 292px; margin-top: 18px; }
.v33e-g { display: block; overflow: visible; }
.v33e-g__grade line { stroke: rgba(201, 216, 228, 0.09); stroke-width: 1; stroke-dasharray: 2 5; }
.v33e-g text { font: 500 10.5px var(--f-texto); fill: var(--v-apagado); }
.v33e-g__eixo { text-anchor: start; }
.v33e-g__dias text { text-anchor: middle; }
.v33e-g__dias text:first-child { text-anchor: start; } .v33e-g__dias text:last-child { text-anchor: end; }
.v33e-g__linha { fill: none; stroke: var(--v-ouro-claro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
/* a mira: um fio vertical do ponto até a base, o ponto com aro e a etiqueta em marfim */
.v33e-ed__mira { position: absolute; left: -0.5px; top: 0; width: 1px; height: 256px; translate: var(--x) 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(232, 206, 147, 0) 0%, rgba(232, 206, 147, 0.5) 100%); transition: translate 1100ms cubic-bezier(.65, 0, .35, 1); }
.v33e-ed__mira::after { content: ''; position: absolute; left: -5.5px; top: calc(var(--y) - 6px); width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  background: var(--v-painel); box-shadow: inset 0 0 0 2.5px var(--v-ouro-claro); transition: top 1100ms cubic-bezier(.65, 0, .35, 1); }
.v33e-ed__dica { position: absolute; left: var(--x); top: calc(var(--y) - 12px); translate: calc(-100% - 14px) -100%; display: grid; gap: 4px; padding: 8px 11px 9px; border-radius: 9px;
  background: #F4ECDC; color: #0B2035; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.8); white-space: nowrap; transition: left 1100ms cubic-bezier(.65, 0, .35, 1), top 1100ms cubic-bezier(.65, 0, .35, 1); }
.v33e-ed__dica small { font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #7A5E22; }
.v33e-ed__dica b { font: 600 14px/1 var(--f-texto); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* no passeio, a etiqueta some enquanto a mira anda e reaparece no dia novo */
.v33e-ed__graf--anda .v33e-ed__dica { transition: left 1100ms cubic-bezier(.65, 0, .35, 1), top 1100ms cubic-bezier(.65, 0, .35, 1), opacity 260ms linear !important; }
.v33e-ed__graf--anda .v33e-ed__dica--troca { opacity: 0; }

/* o pedido 1042 passando pelos módulos: um fio dourado desce de nó em nó */
.v33e-ed__pedido { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; }
.v33e-ed__pedido ol { --v-pp: 1; position: relative; display: grid; margin-top: 10px !important; }
.v33e-ed__pedido ol::before, .v33e-ed__pedido ol::after { content: ''; position: absolute; left: 62px; top: 36px; bottom: 36px; width: 2px; border-radius: 2px; background: rgba(201, 216, 228, 0.1); }
.v33e-ed__pedido ol::after { background: var(--v-ouro); transform-origin: 50% 0; scale: 1 var(--v-pp); }
.v33e-ed__pedido li { position: relative; z-index: 1; display: grid; grid-template-columns: 34px 34px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 19px 0; }
.v33e-ed__pedido time { font: 600 11.5px/1 var(--f-texto); color: var(--v-cinza); font-variant-numeric: tabular-nums; }
.v33e-ed__no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--v-ouro-claro); color: #0B2035; box-shadow: 0 0 0 4px var(--v-painel); }
.v33e-ed__no .ed-i { width: 16px; height: 16px; stroke-width: 1.8; }
.v33e-ed__passo { display: grid; gap: 4px; } .v33e-ed__passo b { font: 600 13px/1.2 var(--f-texto); color: #FFFFFF; } .v33e-ed__passo small { font: 500 11.5px/1.2 var(--f-texto); color: var(--v-cinza); }
.v33e-ed__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto !important; padding-top: 14px !important; border-top: 1px solid var(--v-fio); }
.v33e-ed__total span { font: 500 12px/1 var(--f-texto); color: var(--v-cinza); }
.v33e-ed__total b { font: 600 16px/1 var(--f-texto); letter-spacing: -0.01em; color: var(--v-ouro-claro); }

/* as contas da semana: tabela com fios, a situação em texto (sem pílula) */
.v33e-ed__contas { grid-column: 1; }
.v33e-ed__contas table { width: 100%; margin-top: 12px; border-collapse: collapse; font: 500 13px/1.2 var(--f-texto); color: #C4D0DB; }
.v33e-ed__contas th { padding: 0 0 9px; font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-apagado); text-align: left; border-bottom: 1px solid var(--v-fio); }
.v33e-ed__contas td { padding: 11px 0; border-bottom: 1px solid rgba(201, 216, 228, 0.055); }
.v33e-ed__contas tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.v33e-ed__contas td:first-child { font-weight: 600; color: #FFFFFF; }
.v33e-ed__contas :is(th, td):nth-child(4) { text-align: right; padding-right: 28px; font-variant-numeric: tabular-nums; }
.v33e-ed__contas td:nth-child(4) { font-weight: 600; color: #FFFFFF; }
.v33e-ed__contas :is(th, td):last-child { width: 104px; }
.v33e-ed__st { display: grid; font-weight: 600; white-space: nowrap; }
.v33e-ed__st > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; transition: opacity 300ms linear, translate 500ms cubic-bezier(.16, 1, .3, 1); }
.v33e-ed__st-a { color: #6F8396; opacity: 0; translate: 0 -6px; }
.v33e-ed__st-b { color: var(--v-ouro-claro); }
.v33e-ed__st-b .ed-i { width: 13px; height: 13px; stroke-width: 2.6; }

/* vida, uma vez, quando o painel entra (ed--vivo, do JS do topo): a linha se desenha, a mira chega a hoje, o pedido
   anda de nó em nó e as contas são conferidas uma a uma */
.anima .v33e-ed .v33e-g__linha { transition: stroke-dashoffset 1700ms cubic-bezier(.45, 0, .2, 1) 200ms; }
.anima .v33e-ed .v33e-g__area { transition: opacity 900ms linear 1100ms; }
.anima .v33e-ed .v33e-ed__dica { transition: left 1100ms cubic-bezier(.65, 0, .35, 1), top 1100ms cubic-bezier(.65, 0, .35, 1), opacity 500ms linear 1700ms; }
.anima .v33e-ed .v33e-ed__mira { transition: translate 1100ms cubic-bezier(.65, 0, .35, 1), opacity 500ms linear 1600ms; }
.anima .v33e-ed:not(.ed--vivo) .v33e-g__linha { stroke-dashoffset: 1; }
.anima .v33e-ed:not(.ed--vivo) .v33e-g__area, .anima .v33e-ed:not(.ed--vivo) :is(.v33e-ed__mira, .v33e-ed__dica) { opacity: 0; }
.anima .v33e-ed .v33e-ed__pedido ol::after { transition: scale 2000ms cubic-bezier(.45, 0, .2, 1) 500ms; }
.anima .v33e-ed:not(.ed--vivo) .v33e-ed__pedido ol::after { scale: 1 0; }
.anima .v33e-ed .v33e-ed__pedido li { transition: opacity 400ms linear; }
.anima .v33e-ed .v33e-ed__no { transition: background-color 400ms, color 400ms; }
.anima .v33e-ed:not(.ed--vivo) .v33e-ed__pedido li { opacity: 0.4; }
.anima .v33e-ed:not(.ed--vivo) .v33e-ed__no { background: #16304A; color: #8FA3B6; }
.anima .v33e-ed .v33e-ed__pedido li:nth-child(2), .anima .v33e-ed .v33e-ed__pedido li:nth-child(2) .v33e-ed__no { transition-delay: 1000ms; }
.anima .v33e-ed .v33e-ed__pedido li:nth-child(3), .anima .v33e-ed .v33e-ed__pedido li:nth-child(3) .v33e-ed__no { transition-delay: 1500ms; }
.anima .v33e-ed .v33e-ed__pedido li:nth-child(4), .anima .v33e-ed .v33e-ed__pedido li:nth-child(4) .v33e-ed__no { transition-delay: 2000ms; }
.anima .v33e-ed .v33e-ed__pedido li:nth-child(5), .anima .v33e-ed .v33e-ed__pedido li:nth-child(5) .v33e-ed__no { transition-delay: 2500ms; }
.anima .v33e-ed .v33e-ed__pedido li:nth-child(1), .anima .v33e-ed .v33e-ed__pedido li:nth-child(1) .v33e-ed__no { transition-delay: 500ms; }
.anima .v33e-ed .v33e-ed__total { transition: opacity 500ms linear 2900ms; }
.anima .v33e-ed:not(.ed--vivo) .v33e-ed__total { opacity: 0; }
.anima .v33e-ed:not(.ed--vivo) .v33e-ed__st-a { opacity: 1; translate: 0 0; }
.anima .v33e-ed:not(.ed--vivo) .v33e-ed__st-b { opacity: 0; translate: 0 6px; }
.anima .v33e-ed tr:nth-child(1) .v33e-ed__st > span { transition-delay: 1300ms; }
.anima .v33e-ed tr:nth-child(2) .v33e-ed__st > span { transition-delay: 1750ms; }
.anima .v33e-ed tr:nth-child(3) .v33e-ed__st > span { transition-delay: 2200ms; }
@media (prefers-reduced-motion: reduce) { .v33e-ed__mira, .v33e-ed__mira::after, .v33e-ed__dica { transition: none !important; } }

/* ===== 3 · v36 erp: o layout de duas fileiras (.v33e-fx) saiu; a seção agora é a linha de zzzzzzzzzz-v36-erp.css ===== */

/* zzzzzzz-v33-p-proc.css */
/* ---------- v33 · frente p-proc (JM, 11/10) · /mapeamento-de-processos ----------
   1. a peça 3D saiu do título (no HTML); nada de CSS
   2. topo no computador: o tablet do site com o processo "Contas a pagar" encaixado no vidro (.v33p-*)
   3. divisória: o selo dos elos sem o halo e sem a sombra (fica o selo e os fios)
   4. "Como o mapeamento acontece" no computador: os cartões num caminho (1 embaixo à esquerda, 2 acima e à direita dele,
      o celular, 3 em cima à direita, 4 descendo) e uma linha só, fina e lisa, que liga os cartões na ordem */

/* ===== 2. O tablet do topo (só do computador; abaixo de 1024 px fica o cartão da v32) ===== */
.v33p-cena { display: none; }
@media (min-width: 1024px) {
  .ph .v32f-cena { display: none; }
  .v33p-cena { position: relative; z-index: 2; display: grid; place-items: center; min-width: 0; }
  .v33p-tab { position: relative; width: min(600px, 40vw, calc((100svh - var(--altura-topo) - 64px) * 0.754)); aspect-ratio: 766 / 1016; rotate: -3deg; }
  .v33p-tab__img, .v33p-tab__vidro { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .v33p-tab__img { z-index: 2; } .v33p-tab__vidro { z-index: 3; opacity: 0.45; }
  .v33p-tab__sombra { position: absolute; left: 8%; right: 12%; bottom: -1%; height: 7%; border-radius: 50%; background: rgba(0, 0, 0, 0.5); filter: blur(28px); }
  /* a tela em 800 × 1160,6: o encaixe (site.js › encaixarTela) a reduz até o vidro, o que deixa o texto nítido */
  .v33p-tab__tela { position: absolute; left: 0; top: 0; z-index: 1; width: 800px; height: 1160.6px; transform-origin: 0 0; overflow: hidden; border-radius: 18px; visibility: hidden; background: #F8F4EB; }
  .v33p--encaixado .v33p-tab__tela { visibility: visible; }
  .anima .v33p-cena { opacity: 0; translate: 0 110px; rotate: 5deg; animation: v33p-chega 1300ms cubic-bezier(.16, 1, .3, 1) 260ms forwards; }
}
@keyframes v33p-chega { to { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* o app: barra de status, o módulo, o processo e a tabela das etapas (linha do tempo até o vencimento) */
.v33p-app { --t: #0B2035; --t2: #5B6875; --fio: #E6DFD1; --ouro: #D8AC52; --ouro-t: #7A5A1E; --verde: #2F7A52;
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 56px; background: linear-gradient(180deg, #FBF8F2 0%, #F4EEE2 100%);
  font-family: var(--f-texto); color: var(--t); text-align: left; font-variant-numeric: tabular-nums; }
.v33p-app :where(p, ol) { margin: 0; padding: 0; list-style: none; }
.v33p-app svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.v33p-app__status { display: flex; align-items: center; justify-content: space-between; height: 64px; padding-top: 6px; font: 600 24px/1 var(--f-texto); }
.v33p-app__bat { width: 40px; height: 20px; stroke-width: 1.4; opacity: 0.85; }
.v33p-app__bat .c { fill: currentColor; stroke: none; }
.v33p-app__barra { display: flex; align-items: center; gap: 18px; padding: 22px 0 28px; border-bottom: 2px solid var(--fio); }
.v33p-app__barra img { width: 64px; height: 64px; object-fit: contain; }
.v33p-app__barra > p:first-of-type { display: grid; gap: 6px; }
.v33p-app__barra b { font: 600 32px/1 var(--f-texto); letter-spacing: -0.01em; }
.v33p-app__barra > p:first-of-type span { font: 500 23px/1 var(--f-texto); color: var(--t2); }
.v33p-app__estado { display: grid; justify-items: end; margin-left: auto !important; font: 600 25px/1 var(--f-texto); white-space: nowrap; }
.v33p-app__estado > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; transition: opacity 400ms, translate 500ms cubic-bezier(.16, 1, .3, 1); }
.v33p-app__estado-a { color: #8C6A1E; opacity: 0; }
.v33p-app__estado-b { color: var(--verde); }
.v33p-app__estado-b svg { width: 28px; height: 28px; stroke-width: 2.6; }
.v33p-app__cab { display: grid; gap: 12px; padding: 52px 0 46px; }
.v33p-app__rot { font: 600 20px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro-t); }
.v33p-app__tit { font: 400 80px/1 var(--f-titulo); letter-spacing: -0.025em; }
.v33p-app__sub { margin-top: 4px !important; font: 500 25px/1.2 var(--f-texto); color: var(--t2); }
/* a tabela: cabeçalho e as etapas; a coluna da etapa leva o nó e o fio dourado até a próxima */
.v33p-app__th, .v33p-app__fluxo li { display: grid; grid-template-columns: 60px minmax(0, 1fr) 214px 172px; align-items: center; column-gap: 20px; }
.v33p-app__th { padding: 0 0 16px; border-bottom: 2px solid var(--fio); font: 600 19px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t2); }
.v33p-app__th span:first-child { grid-column: 1 / 3; }
.v33p-app__th span:last-child { text-align: right; }
.v33p-app__fluxo li { position: relative; height: 170px; border-bottom: 2px solid #EFE9DD; }
.v33p-app__fluxo li > b { font: 600 40px/1 var(--f-texto); letter-spacing: -0.015em; }
.v33p-app__no { position: relative; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--t); color: #E8CE93;
  transition: background-color 350ms, color 350ms, box-shadow 350ms; transition-delay: var(--d, 0ms); }
.v33p-app__no svg { width: 30px; height: 30px; stroke-width: 2.6; }
.v33p-app__fluxo li:nth-child(3) .v33p-app__no { background: var(--ouro); color: var(--t); }
.v33p-app__quem { display: flex; align-items: center; gap: 10px; font: 500 28px/1.1 var(--f-texto); color: var(--t2); white-space: nowrap; }
.v33p-app__quem svg { width: 26px; height: 26px; stroke-width: 1.7; color: #8C7A52; }
.v33p-app__prazo { font: 600 28px/1.1 var(--f-texto); color: var(--ouro-t); text-align: right; white-space: nowrap; }
.v33p-app__fluxo :is(.v33p-app__quem, .v33p-app__prazo) { transition: opacity 380ms linear, translate 520ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0ms) + 120ms); }
/* o fio de um nó ao próximo */
.v33p-app__fluxo li:not(:last-child)::after { content: ''; position: absolute; left: 29px; top: calc(50% + 30px); width: 3px; height: calc(100% - 60px); border-radius: 2px; background: var(--ouro);
  transform-origin: 50% 0; transition: scale 380ms cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--d, 0ms) + 260ms); }
/* o vencimento: o ponto de chegada da linha do tempo */
.v33p-app__fluxo .v33p-app__venc { border-bottom: 0; }
.v33p-app__venc .v33p-app__no { background: transparent; color: var(--ouro-t); box-shadow: inset 0 0 0 3px var(--ouro); }
.v33p-app__venc .v33p-app__no svg { width: 28px; height: 28px; stroke-width: 1.8; }
.v33p-app__venc > b { font-weight: 500 !important; color: var(--t2); }
.v33p-app__venc .v33p-app__prazo { grid-column: 3 / 5; grid-row: 1; color: var(--verde); font-weight: 600; }

/* estado final é o padrão (sem JS); com animação as etapas entram sem dono e o JS acende uma a uma */
.anima .v33p-app:not(.vivo) .v33p-app__fluxo li:not(.v33p-app__venc) .v33p-app__no { background: #FFFFFF; color: transparent; box-shadow: inset 0 0 0 3px rgba(11, 32, 53, 0.22); }
.anima .v33p-app:not(.vivo) .v33p-app__fluxo li::after { scale: 1 0; }
.anima .v33p-app:not(.vivo) .v33p-app__fluxo :is(.v33p-app__quem, .v33p-app__prazo) { opacity: 0; translate: 14px 0; }
.anima .v33p-app:not(.pronto) .v33p-app__estado-a { opacity: 1; }
.anima .v33p-app:not(.pronto) .v33p-app__estado-b { opacity: 0; translate: 0 10px; }

/* ===== 3. Divisória: o selo e os fios, limpos (sem o anel claro e sem a sombra embaixo) ===== */
@media (min-width: 900px) {
  .pdv__selo { box-shadow: none; }
}

/* ===== 4. Como o mapeamento acontece (computador): um caminho ===== */
@media (min-width: 1024px) {
  .pm__palco { width: min(100vw - 64px, 1560px); grid-template-columns: minmax(0, 1fr) clamp(230px, calc((100svh - 330px) * 0.52), 340px) minmax(0, 1fr); grid-template-rows: auto auto; align-items: stretch; column-gap: clamp(20px, 2.6vw, 48px); row-gap: 0; }
  .pm__m--0, .pm__m--1, .pm__m--2, .pm__m--3 { position: relative; top: 0; width: clamp(220px, 17.5vw, 272px); margin: 0; }
  .pm__m--0 { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; }
  .pm__m--1 { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; }
  .pm__m--2 { grid-column: 3; grid-row: 1; justify-self: start; align-self: start; }
  .pm__m--3 { grid-column: 3; grid-row: 2; justify-self: end; align-self: end; }
  .pm__fone { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; }
  .pm__aparelho { width: 100%; }
  .pm__fone::before { display: none; }
  /* a linha: um traço só, fino e de espessura constante; a trilha pontilhada mostra o caminho todo e o ouro avança */
  .pm__onda { z-index: 0; }
  .pm__trilho { stroke: rgba(11, 32, 53, 0.28); stroke-width: 2; stroke-dasharray: 0.1 9; stroke-linecap: round; opacity: 1; }
  .pm__traco { stroke: #C8962F; stroke-width: 3; stroke-linecap: round; opacity: 1; }
  /* hierarquia: a etapa da vez inteira; as que já passaram ficam, mais quietas; as que vêm surgem quando a linha chega */
  .pm__m.cartao-conex.ativo { box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.22), 0 34px 60px -34px rgba(11, 32, 53, 0.7); }
  .pm--vivo .pm__m { transform: none; transition: opacity 520ms cubic-bezier(.22, 1, .36, 1), translate 700ms cubic-bezier(.16, 1, .3, 1), box-shadow 400ms; }
  .pm--vivo .pm__m:not(.ativo) { transform: none; }
  .pm--vivo .pm__m:not(.ativo) > :not(.pm__topo) { opacity: 0.55; }
  .pm--vivo .pm__m.cartao-conex:not(.ativo) .pm__topo > :not(.cartao-conex__fio) { opacity: 0.6; }
  .anima .pm--vivo .pm__m.ativo ~ .pm__m { opacity: 0; translate: 0 22px; }
}

/* v33 p-proc: o "conta paga em dia" do vencimento aparece no fim, junto do "Padronizado" */
.v33p-app__venc .v33p-app__prazo { transition: opacity 400ms linear, translate 500ms cubic-bezier(.16, 1, .3, 1); }
.anima .v33p-app:not(.pronto) .v33p-app__venc .v33p-app__prazo { opacity: 0; translate: 14px 0; }

/* zzzzzzz-v33-q-quem.css */
/* ===================== v33 · frente q-quem (JM, 11/10): Quem é a Conex no celular, opção A =====================
   O manifesto deixa de ser texto solto no cartão marinho: cada frase tem a sua tela do sistema (quem.mjs › v33qTela),
   que troca no mesmo lugar junto com a frase (JS em src/js/v31/v33-q-quem.js). Folha marfim de software real (tabela,
   fios, sem pílula), objeto 3D solto no canto, marca d'água dos elos do cartão por trás. B, C e o computador: nada muda. */
.v33q, .v33q-sub { display: none; }

@media (max-width: 899px) {
  /* trilho da A: três frases presas + as quatro folhas com passo maior (as fotos das sócias entram mais devagar) */
  .v32c--vivo[data-op="a"] .v32c__trilho { height: calc(100svh + 308svh); }

  /* índice: "A Conex" ganha três tracinhos, um por frase */
  .v32c--vivo[data-op="a"] [data-v32c-i="0"] > i:not(.v33q-sub) { display: none; }
  .v32c--vivo[data-op="a"] .v33q-sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; height: 3px; background: none; }
  .v33q-sub b { display: block; height: 3px; border-radius: 2px; transform: none;
    background: linear-gradient(#D8AC52, #D8AC52) 0 0 / calc(var(--f, 0) * 100%) 100% no-repeat, rgba(233, 242, 248, 0.16); }

  /* ---------- o cartão do manifesto: a tela em cima (ocupa o que sobra), a frase embaixo ---------- */
  .v32c--vivo .v32c-m.v33q-vivo { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(14px, 2.2svh, 22px); padding: 18px 18px 22px; }
  .v32c--vivo .v32c-m.v33q-vivo .v33q { display: flex; position: relative; flex: none; flex-direction: column; }
  /* a frase ocupa o que sobra embaixo da tela, centrada nesse vão (é o título da seção: grande) */
  .v32c--vivo .v32c-m.v33q-vivo .v32c-m__h { flex: 1; min-height: 2.2em; display: grid; justify-content: stretch; align-content: center;
    font-size: clamp(2rem, 1.1rem + 3.9vw, 2.5rem); line-height: 1.08; }
  .v32c--vivo .v32c-m.v33q-vivo .v32c-f { grid-area: 1 / 1; will-change: transform, opacity; }
  .v32c--vivo .v32c-m.v33q-vivo .v32c-fio { display: none; }

  /* objeto 3D solto no canto de cima da tela, metade para fora (sem caixa, sem fundo) */
  .v33q-pecas { position: absolute; z-index: 2; top: -26px; right: -8px; width: clamp(96px, 28vw, 118px); aspect-ratio: 1; pointer-events: none; }
  .v33q-peca { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 70%; will-change: transform, opacity; }

  /* ---------- a tela (folha marfim, como o corpo do cartão do BPO) ---------- */
  .v33q-tela { position: relative; display: flex; flex-direction: column; margin-top: clamp(30px, 6vw, 40px); overflow: hidden;
    border-radius: 16px; background: #F7F3EA; color: #0E2742; box-shadow: 0 26px 40px -30px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
  .v33q-tela__cab { display: flex; align-items: center; gap: 10px; padding: 11px clamp(96px, 28vw, 118px) 10px 14px; border-bottom: 1px solid rgba(14, 39, 66, 0.1); }
  .v33q-tela__cab img { flex: none; width: 26px; height: 26px; }
  .v33q-tela__cab p { display: grid; gap: 1px; min-width: 0; margin: 0; }
  .v33q-tela__tits { display: grid; }
  .v33q-tela__tits b { grid-area: 1 / 1; font: 700 0.9375rem/1.2 var(--f-texto); color: #0E2742; white-space: nowrap; will-change: transform, opacity; }
  .v33q-tela__cab small { font: 500 0.75rem/1.2 var(--f-texto); color: #56677A; }
  .v33q-tela__corpo { position: relative; }
  /* a tabela (1ª etapa) dá a altura da tela; as outras duas ocupam o mesmo lugar por cima */
  .v33q-et.v33q-lanc { position: relative; }
  .v33q-et { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 10px 14px 12px; will-change: transform, opacity; }

  /* 1 · lançamentos: tabela de verdade (cabeçalho, linhas com fio, valor alinhado, conciliação) */
  .v33q-lanc__cab, .v33q-lin { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: 10px; }
  .v33q-lanc__cab { margin: 0; padding: 0 0 6px; border-bottom: 1px solid rgba(14, 39, 66, 0.16); font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.1em; text-transform: uppercase; color: #56677A; }
  .v33q-lanc ul { margin: 0; padding: 0; list-style: none; }
  /* cada linha começa como um papel solto (torto, fora de coluna, com sombra) e assenta na tabela com --t (0 → 1) */
  .v33q-lin { --t: 1; position: relative; margin: 0 -8px; padding: 7px 8px; border-bottom: 1px solid rgba(14, 39, 66, calc(0.09 * var(--t)));
    border-radius: calc((1 - var(--t)) * 8px); background: rgba(255, 255, 255, calc(1 - var(--t)));
    box-shadow: 0 8px 16px -10px rgba(14, 39, 66, calc((1 - var(--t)) * 0.55));
    transform: translate3d(calc((1 - var(--t)) * var(--dx, 0px)), calc((1 - var(--t)) * var(--dy, 0px)), 0) rotate(calc((1 - var(--t)) * var(--r, 0deg))); will-change: transform; }
  .v33q-lin:nth-child(1) { --dx: 22px; --dy: 12px; --r: 3deg; }
  .v33q-lin:nth-child(2) { --dx: -16px; --dy: -4px; --r: -4deg; }
  .v33q-lin:nth-child(3) { --dx: 30px; --dy: 10px; --r: 2.5deg; }
  .v33q-lin:nth-child(4) { --dx: -24px; --dy: 4px; --r: -3deg; }
  .v33q-lin:nth-child(5) { --dx: 14px; --dy: -8px; --r: 4deg; }
  .v33q-lin:nth-child(6) { --dx: -28px; --dy: 6px; --r: -2.5deg; }
  .v33q-lin__d { display: grid; min-width: 0; font: 600 0.84375rem/1.2 var(--f-texto); color: #0E2742; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v33q-lin__d small { font: 500 0.71875rem/1.25 var(--f-texto); color: #56677A; opacity: var(--t); }
  .v33q-lin__v { font: 700 0.84375rem/1.2 var(--f-texto); font-variant-numeric: tabular-nums; color: #0E2742; white-space: nowrap; }
  .v33q-lin__v--ent { color: #1D5C86; }
  .v33q-lin__ok { --ok: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0E2742; color: #F7F3EA;
    opacity: var(--ok); transform: scale(calc(0.4 + var(--ok) * 0.6)); }
  .v33q-lin__ok svg { width: 12px; height: 12px; }
  .v33q-lanc__pe { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0; font: 600 0.75rem/1.2 var(--f-texto); color: #56677A; }
  .v33q-lanc__pe b { color: #8A6420; }

  /* 2 · fluxo de caixa: legenda com os totais e barras semana a semana sobre grade */
  .v33q-fluxo { gap: 12px; }
  .v33q-fluxo__leg { display: flex; gap: 18px; margin: 0; }
  .v33q-fluxo__leg > span { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; font: 600 0.75rem/1.2 var(--f-texto); color: #56677A; }
  .v33q-fluxo__leg i { width: 9px; height: 9px; border-radius: 2px; background: #183D62; }
  .v33q-fluxo__b i { background: #8DB4CF; }
  .v33q-fluxo__leg b { grid-column: 1 / -1; font: 700 1.125rem/1.2 var(--f-texto); font-variant-numeric: tabular-nums; color: #0E2742; }
  .v33q-fluxo__graf { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 6px;
    background: repeating-linear-gradient(180deg, rgba(14, 39, 66, 0.08) 0 1px, transparent 1px 25%) 0 6px / 100% calc(100% - 26px) no-repeat; }
  .v33q-sem { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  .v33q-sem__barras { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 0; min-height: 0; border-bottom: 1px solid rgba(14, 39, 66, 0.24); }
  .v33q-barra { --g: 1; display: block; width: clamp(12px, 4vw, 17px); height: calc(var(--h, 0.5) * 100%); border-radius: 4px 4px 0 0; background: #183D62;
    transform: scaleY(var(--g)); transform-origin: 50% 100%; will-change: transform; }
  .v33q-barra--b { background: #8DB4CF; }
  .v33q-sem > span { padding-top: 6px; font: 600 0.75rem/1.2 var(--f-texto); color: #56677A; text-align: center; }

  /* 3 · resultado: um número só, o que saiu e o que sobrou, e o mês fechado */
  .v33q-res { justify-content: center; gap: 10px; padding-inline: 16px; }
  .v33q-res__rot { margin: 0; font: 700 0.75rem/1.2 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #56677A; }
  .v33q-res__num { margin: 0; font: 700 clamp(2.5rem, 1.5rem + 5vw, 3.2rem)/1 var(--f-texto); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: #0E2742; }
  .v33q-res__barra { display: flex; height: 12px; margin-top: 6px; overflow: hidden; border-radius: 6px; background: rgba(14, 39, 66, 0.08); }
  .v33q-res__barra i { display: block; height: 100%; transform-origin: 0 50%; will-change: transform; }
  .v33q-res__saiu { width: 74%; background: #8DB4CF; }
  .v33q-res__sobra { width: 26%; background: #D8AC52; }
  .v33q-res__leg { display: flex; justify-content: space-between; gap: 10px; margin: 0; font: 600 0.78125rem/1.25 var(--f-texto); color: #56677A; }
  .v33q-res__leg b { color: #8A6420; }
  .v33q-res__ok { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid rgba(14, 39, 66, 0.12); font: 600 0.875rem/1.2 var(--f-texto); color: #0E2742; }
  .v33q-res__ok svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #D8AC52; color: #0E2742; }

  /* telas baixas (360 × 640): tabela mais justa */
  @media (max-height: 700px) {
    .v33q-lin { padding-block: 4px; }
    .v33q-lin__d { font-size: 0.8125rem; }
    .v33q-lin__d small { font-size: 0.75rem; }
    .v33q-lin:nth-child(n + 6) { display: none; }
    .v33q-tela__cab { padding-block: 8px; }
    .v33q-res__num { font-size: 2.2rem; }
    .v33q-res__ok { margin-top: 2px; padding-top: 8px; }
    .v32c--vivo .v32c-m.v33q-vivo .v32c-m__h { font-size: 1.625rem; }
  }
}

/* zzzzzzzz-v34.css */
/* v34 (JM, 11/10): Quem é a Conex, opção A. "O time": no lugar da foto montada das duas, os elos da Conex soltos, o
   símbolo de juntar (sem caixinha). "Quem cuida": rostos recortados de verdade (rosto-*.webp), nítidos, com o nome. */
@media (max-width: 899px) {
  .v32c--vivo .v32c-j__foto.v34-j__elos { display: grid; place-items: center; margin: 0; overflow: visible; }
  .v32c-j__foto.v34-j__elos img { width: min(58%, 220px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(4, 14, 26, 0.55)); }
  .v32c--vivo[data-op="a"] .v32c-j__foto.v34-j__elos img { transform: translate3d(0, calc((1 - var(--in, 1)) * 18px), 0) rotate(calc((1 - var(--in, 1)) * -10deg)); }
  .v34-z__rostos { gap: 14px; }
  .v34-z__rostos .v34-rosto { display: grid; justify-items: center; gap: 6px; width: auto; height: auto; overflow: visible; border-radius: 0; box-shadow: none; background: none; }
  .v34-z__rostos .v34-rosto + .v34-rosto { margin-left: 0; }
  .v34-z__rostos .v34-rosto img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; transform: none; box-shadow: 0 0 0 2px #0B2035, 0 0 0 3.5px #D8AC52, 0 10px 18px -8px rgba(4, 14, 26, 0.7); }
  .v34-z__rostos .v34-rosto i { font: 600 0.75rem/1 var(--f-texto); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #E8CE93; }
}

/* v34 (JM, 11/10): o par Mac + iPhone da v33 saiu. Volta o celular de antes (mesma posição e tamanho) e o notebook sai
   até chegar o mockup novo. O notebook continua no HTML, invisível, só para o cálculo do tamanho do celular ficar igual. */
@media (min-width: 900px) { .hpl .hpl-mac, .hpl .hpl-mac * { visibility: hidden !important; } }

/* v34 (JM, 11/10): emenda das quatro fases com o Quem é a Conex no computador. Sobrava uma faixa sem elos (o padding de
   baixo das fases, fora do palco preso) e, logo abaixo, os elos do palco do Quem é cortados em linha reta no topo dele.
   Sem o padding, o fundo preso das fases termina onde o Quem é começa; o topo do Quem é ganha um esfumado curto, então
   nenhum elo aparece cortado. */
@media (min-width: 900px) {
  #como-funciona.cf2 { padding-bottom: 0; }
  .qx__palco > .monograma {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px));
    mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px));
  }
}

/* v34 (JM, 11/10): comparativo no computador, os dois cartões com a mesma altura, e o "R$" do total do assistente na
   letra do texto (a do "R$ 0" da Conex); o cifrão da Newsreader parecia estranho */
@media (min-width: 900px) { .cp__mesa { align-items: stretch; } }
.cp .cp__ficha--clt .cp__total b[data-cp-conta] { font-family: var(--f-texto); font-weight: 600; letter-spacing: -0.03em; }

/* v36 erp: o trilho preso dos "módulos conversam" (v34-fx-trilho) saiu; ver zzzzzzzzzz-v36-erp.css */

/* v34 (JM, 11/10): "Como o mapeamento acontece" no computador. A linha é uma faixa cheia e larga (não um fio fino), com
   o trilho claro por baixo, e ondula mais (o desenho está no v33-p-proc.js). Ao passar por uma etapa, o texto CLAREIA:
   as etapas já percorridas ficam inteiras e nítidas (antes esmaeciam). */
@media (min-width: 900px) {
  .pm .pm__trilho { stroke: rgba(200, 150, 47, 0.2); stroke-width: 14; stroke-dasharray: none; stroke-linecap: round; }
  .pm .pm__traco { stroke: #C8962F; stroke-width: 14; stroke-linecap: round; }
  .pm--vivo .pm__m:not(.ativo) > :not(.pm__topo), .pm--vivo .pm__m.cartao-conex:not(.ativo) .pm__topo > :not(.cartao-conex__fio) { opacity: 1; }
  .pm--vivo .pm__m { transition: opacity 520ms cubic-bezier(.22, 1, .36, 1), translate 700ms cubic-bezier(.16, 1, .3, 1), box-shadow 400ms, filter 500ms; }
  .anima .pm--vivo .pm__m.ativo ~ .pm__m { opacity: 0.35; translate: 0 14px; filter: saturate(0.6); }
}

/* v34 (JM, 11/10): cinco frentes no celular, os cartões ficam parados quando o dedo só passa (arrastando o carrossel);
   nada encolhe nem muda no toque, só o clique abre o modal */
@media (max-width: 899px) { .leque .leque__card:active { scale: none; transition: none; } }

/* zzzzzzzzz-v35-bpo.css */
/* ---------- v35 bpo (JM, 11/10): /bpo-financeiro-recife no celular ----------
   1. topo: sai o brilho dourado atrás do cartão; o cartão vira a tela do app do fechamento (a mesma linguagem da tela do
      tablet do computador, em retrato, sem moldura de aparelho)
   2. um mês: o palco preso à rolagem sai; os cartões viram um carrossel horizontal opcional e a régua de cima se
      preenche conforme ele anda
   Carrega por último (ordem alfabética). O computador (>= 1024) não muda. */

/* ---------- 1. topo ----------
   O cartão é o do topo de Processos (.v32f-tl, zzzzzz-v32-f-processos.css; mesma animação, componente v32f-tl): aqui só
   o lugar dele na página, o mês na faixa e o número do pé. */
.v35b-cena { display: none; }
@media (max-width: 1023px) {
  /* o brilho dourado (radial em 74% 58%) caía bem atrás do cartão: fica só o marinho */
  .bh { background: radial-gradient(60% 70% at 18% 30%, #12304D 0%, rgba(18, 48, 77, 0) 70%), linear-gradient(180deg, #0C2238 0%, #06121F 100%); }
  .v35b-cena { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 34px; }
}
@media (max-width: 1023px) and (max-height: 700px) { .v35b-cena { margin-top: 26px; } }
.v35b-tl .v32f-tl__pe b { font-weight: 700; color: var(--t); font-variant-numeric: tabular-nums; }

/* ---------- 2. um mês no celular: carrossel opcional, a régua segue o carrossel ----------
   O trilho alto e o palco preso saem (a página rola direto); os cartões ficam numa fileira de rolagem lateral com
   encaixe, o primeiro alinhado à margem e o próximo aparecendo cortado. A régua (--bm-q, de 0 a 3) vem do scrollLeft
   (v35-bpo.js). O visual dos cartões não muda. */
.v35b-mes__dica { display: none; }
@media (max-width: 1023px) {
  .bm--vivo .bm__trilho { height: auto; }
  .bm .bm__palco, .bm--vivo .bm__palco { position: relative; top: auto; min-height: 0; align-content: start; padding-block: var(--secao); }
  .bm .bm__regua, .bm:not(.bm--vivo) .bm__regua { display: grid; }
  .bm__etapas li { cursor: pointer; }
  .bm .bm__paineis, .bm:not(.bm--vivo) .bm__paineis { transform: none; will-change: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scroll-padding-inline: var(--margem); -webkit-overflow-scrolling: touch; }
  .bm__paineis::-webkit-scrollbar { display: none; }
  /* o espaço do fim: o último cartão também encaixa na margem, e a rolagem toda vale exatamente três passos */
  .bm__paineis::after { content: ''; flex: 0 0 calc(12% - 12px); }
  .bm .bm__p, .bm .bm__p.on, .bm .bm__p.saiu { scroll-snap-align: start; transition: none; }
  .bm .bm__p:not(.on) > * { opacity: 1; translate: none; }
  /* à esquerda: a direita do pé da tela é do botão do WhatsApp */
  .v35b-mes__dica { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: -8px 0 0; font: 600 0.8rem/1 var(--f-texto); letter-spacing: 0.01em; color: #C9D8E4; opacity: 0.75; transition: opacity 300ms linear; }
  .v35b-mes__dica svg { width: 16px; height: 16px; }
  .v35b-mes__dica.fim { opacity: 0.3; }
}

/* zzzzzzzzz-v35-comp.css */
/* ===================== v35 comp · comparativo (JM, 11/10, iPhone) =====================
   1) Seletor "Contratar assistente | Com a Conex": as duas opções com metade cada (mesma largura) e o destaque deslizando
      de uma metade à outra. Abaixo de 480 px o ícone fica em cima do texto, para o texto caber inteiro numa linha.
   2) "O salário é menos da metade do custo": uma barra só, em duas partes, com rótulo, valor e % em cima de cada parte.
      O tijolo do resto é a mesma cor dos valores dessas quatro linhas na lista abaixo; o marinho, a do salário. */

/* ---------- 1 · seletor em duas metades ---------- */
@media (max-width: 899px) {
  .cp__seg-trilho { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cp__seg-bt { min-width: 0; }
  .cp__seg-cursor { width: calc(50% - 4px); transition: translate 420ms cubic-bezier(.22, 1, .36, 1), background-color 300ms linear; }
}
@media (max-width: 479px) {
  .cp__seg-trilho { width: 100%; }
  .cp__seg-bt { flex-direction: column; gap: 3px; min-height: 56px; padding: 7px 6px 6px; font-size: 0.9375rem; line-height: 1.1; }
  .cp__seg-bt .cp__ctps, .cp__seg-bt .cp__elos { width: 20px; }
  .cp__seg-bt .cp__ctps { height: 20px; }
}
@media (max-width: 339px) {
  .cp__seg-bt { font-size: 0.875rem; }
}

/* ---------- 2 · salário × o resto ---------- */
.cp .v35c-parte { display: grid; gap: 10px; }
.cp .v35c-parte__t { margin: 0; font: 600 0.9375rem/1.3 var(--f-texto); color: #0B2035; }
.cp .v35c-barra { display: grid; grid-template-columns: 2000fr 2128.89fr; column-gap: 3px; row-gap: 7px; align-items: end; }
.cp .v35c-p { display: grid; gap: 1px; margin: 0; min-width: 0; padding-right: 6px; }
.cp .v35c-p__rot { font: 400 0.8125rem/1.25 var(--f-texto); color: #4A5866; text-wrap: balance; }
.cp .v35c-p__v { font: 650 1.0625rem/1.2 var(--f-texto); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp .v35c-p--sal .v35c-p__v { color: #183D62; }
.cp .v35c-p--resto .v35c-p__v { color: #9C3F2B; }
.cp .v35c-b { grid-row: 2; display: flex; align-items: center; height: 32px; padding: 0 10px; font-style: normal; }
.cp .v35c-b span { font: 650 0.875rem/1 var(--f-texto); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.cp .v35c-b--sal { grid-column: 1; border-radius: 8px 0 0 8px; background: #183D62; }
.cp .v35c-b--resto { grid-column: 2; border-radius: 0 8px 8px 0; background: #9C3F2B; }
/* a lista abaixo fala a mesma língua: o valor do salário em marinho, o das outras quatro linhas em tijolo */
.cp .cp__ficha--clt dl > div:first-child dd { color: #183D62; }
.cp .cp__ficha--clt dl > div:not(:first-child) dd { color: #9C3F2B; }
@media (min-width: 900px) {
  .cp .v35c-parte { gap: 12px; }
  .cp .v35c-b { height: 34px; padding: 0 12px; }
}

/* entrada: o marinho se estende, depois o tijolo; os números aparecem quando cada parte chega */
.anima .cp .v35c-b { clip-path: inset(0 100% 0 0); transition: clip-path 800ms cubic-bezier(.22, 1, .36, 1); }
.anima .cp .v35c-b span, .anima .cp .v35c-p { opacity: 0; transition: opacity 400ms linear; }
.anima .cp.vista .v35c-b { clip-path: inset(0 0 0 0); transition-delay: 350ms; }
.anima .cp.vista .v35c-b--resto { transition-delay: 1000ms; }
.anima .cp.vista .v35c-b span, .anima .cp.vista .v35c-p { opacity: 1; }
.anima .cp.vista .v35c-p--sal, .anima .cp.vista .v35c-b--sal span { transition-delay: 800ms; }
.anima .cp.vista .v35c-p--resto, .anima .cp.vista .v35c-b--resto span { transition-delay: 1450ms; }
@media (prefers-reduced-motion: reduce) {
  .cp .v35c-b, .cp .v35c-b span, .cp .v35c-p { transition: none !important; }
}

/* zzzzzzzzz-v35-erp.css */
/* v35 (JM, 11/10): conector tradicional entre os cartões da corrente do ERP no celular (no lugar dos elos da marca) */
@media (max-width: 899px) {
  .v32e-cd__elo.v35e-con { position: absolute; z-index: 2; left: calc(var(--v32e-lado) + 22px - 15px); top: 0; width: 30px; height: 56px; rotate: none; display: grid; place-items: center; overflow: visible; }
  .v35e-con__fio { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: rgba(11, 32, 53, 0.16); }
  .v35e-con__fio::after { content: ''; position: absolute; inset: 0; border-radius: 2px; background: #C8962F; transform-origin: 50% 0; transform: scaleY(var(--k, 1)); }
  .v35e-con__no { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0B2035; box-shadow: 0 0 0 3px #F1E5CC; color: #8FA5B8; transition: background-color 300ms linear, color 300ms linear; }
  .v32e-cd__m + .v32e-cd__m { padding-top: 56px; }
  .v35e-con__no svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .v32e-cd__m.on .v35e-con__no { color: #E8CE93; }
}

/* v35 erp (JM, 11/10): topo no celular com o MESMO cartão do topo de Processos (.v32f-tl, estilos em
   zzzzzz-v32-f-processos.css). Aqui só o lugar dele no hero do ERP; no computador ele não aparece (o topo é o dashboard). */
.ex .v35e-hc { display: none; }
@media (max-width: 899px) {
  .ex .v35e-hc { display: grid; width: min(100% - 2 * var(--margem), 460px); margin: 34px auto 0; }
  .ex .v35e-hc .v32f-tl { width: 100%; }
  /* entra depois do botão, como o cartão anterior */
  .anima .ex .v35e-hc { animation-delay: 560ms; }
}

/* zzzzzzzzz-v35-fases.css */
/* ===================== v35 · frente fases (JM, 11/10, iPhone real) =====================
   Quatro fases no celular (palco A) e o fundo preso. JS em src/js/v31/v35-fases.js. Carrega por último. */

/* A altura que a barra de baixo do Safari pode revelar: com a barra à vista a tela tem 100svh; quando ela recolhe
   (rolando para baixo), 100lvh. O palco preso tem 100svh (o cartão cabe com a barra à vista), então sobrava embaixo
   dele uma faixa de até ~80 px onde aparecia o fundo da seção, rolando, enquanto o resto do fundo ficava parado. */
:root { --v35f-barra: max(0px, calc(100lvh - 100svh)); }

@media (max-width: 899px) {
  /* 1 · o pé das fases tem a altura exata da sobreposição da seção de baixo (medida pelo JS, --v35f-pe): o palco solta
     no pixel em que a seção seguinte encosta nele, e nada cobre o pé do cartão (o botão "Ver as entregas") */
  .cf2[data-fases="a"]:not(.cf2--vivo) .cf2__palco { padding-bottom: max(8px, var(--v35f-pe, 0px)); }

  /* 2 · o fundo do palco preso: o marinho fica opaco até o pé (antes esmaecia nos 44 px de baixo e deixava ver os elos
     da seção correndo por trás, a "fração pequena do fundo que se move") e as duas camadas descem além do palco a
     altura que a barra do Safari revela; só os elos esmaecem, no fim dessa extensão */
  [data-fases="a"] .fz--vivo .fz__palco::before { bottom: calc(-1 * var(--v35f-barra)); -webkit-mask-image: none; mask-image: none; }
  [data-fases="a"] .fz--vivo .fz__palco::after { bottom: calc(-1 * var(--v35f-barra)); }

  /* 3 · foto encolhida pelo JS (data-v35f-justo): o objeto 3D termina 10 px acima do pé da foto, sem tocar o texto */
  [data-fases="a"] .fz--vivo .fz__lista[data-v35f-justo] .fz-c__obj { top: auto; bottom: calc(100% - var(--fh) + 10px); }
  [data-fases="a"] .fz.v35f-aperto .fz-c__obj { width: 84px; }

  /* 4 · tela muito baixa (o JS liga quando a foto ficaria com menos de 34% do cartão): o texto aperta um pouco */
  [data-fases="a"] .fz.v35f-aperto .fz-c__txt { gap: 6px; bottom: 16px; }
  [data-fases="a"] .fz.v35f-aperto .fz-c__nome { font-size: 1.875rem; }
  [data-fases="a"] .fz.v35f-aperto .fz-c__frase { font-size: 1rem; line-height: 1.28; }
  [data-fases="a"] .fz.v35f-aperto .fz-c__quando { font-size: 0.6875rem; }
  [data-fases="a"] .fz.v35f-aperto .fz-c__cta { margin-top: 2px; }
}

/* 5 · BPO, "Um mês da sua empresa" (o único outro palco preso no celular fora do Quem é): os elos do palco também
   descem a altura que a barra do Safari revela, então a faixa sob o palco preso não fica sem elos */
@media (max-width: 899px) {
  .bm--vivo .bm__palco > .monograma { bottom: calc(-1 * var(--v35f-barra));
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 20px); mask-image: linear-gradient(0deg, transparent 0, #000 20px); }
}

/* zzzzzzzzz-v35-mac.css */
/* v35 mac (JM, 11/10): o MacBook novo no hero do computador, à direita, do tamanho do celular (ou o maior que couber sem
   encostar no texto), com o pé na linha do pé do celular; a tela olha para a esquerda (foto espelhada). O celular e o
   notebook antigo (invisível, v34) não mudam. Posição, tamanho e homografia da tela: src/js/v31/v35-mac.js.
   No celular (< 900 px) o Mac não aparece. */
.v35-mac { display: none; }
@media (min-width: 900px) {
  .hpl .v35-mac { display: block; position: absolute; z-index: 3; left: calc(100% - 28px - 32vw); top: 30%; width: 32vw; aspect-ratio: 710 / 639;
    translate: calc(var(--mx) * 16px) calc(var(--my) * 10px); }
  .v35-mac__img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
  /* a tela entra por trás da foto; sem a homografia ainda, fica escondida */
  .v35-mac__tela { position: absolute; left: 0; top: 0; z-index: 1; width: 400px; aspect-ratio: 1000 / 646; transform-origin: 0 0; overflow: hidden;
    container-type: inline-size; background: #0B2035; visibility: hidden; }
  .v35-mac--encaixado .v35-mac__tela { visibility: visible; }
  /* reflexo do vidro, bem leve */
  .v35-mac__tela::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0) 46%); }
  /* sombra no chão, só sob a base (a sombra na própria foto escureceria a tela pelo buraco) */
  .v35-mac__sombra { position: absolute; inset: 0; z-index: 0; filter: blur(16px); translate: 0 3%; }
  .v35-mac__sombra i { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); clip-path: polygon(3% 75%, 57% 98%, 86% 70%, 40% 56%); }

  .anima .hpl .v35-mac { opacity: 0; margin-left: 140px; }
  .anima .hpl--entrou .v35-mac { opacity: 1; margin-left: 0; transition: opacity 900ms ease-out 350ms, margin-left 1400ms cubic-bezier(.16, 1, .3, 1) 350ms; }
}
@media (prefers-reduced-motion: reduce) { .anima .hpl .v35-mac { opacity: 1 !important; margin-left: 0 !important; transition: none !important; } }

/* ---------- o painel (1 cqw = 1% da largura da tela; a caixa tem 100 × 64,6 cqw) ---------- */
.v35m { position: absolute; inset: 0; display: grid; grid-template-rows: 2.7cqw minmax(0, 1fr); font-family: var(--f-texto); color: #F7F1E3;
  background: radial-gradient(70% 60% at 85% 0%, rgba(47, 110, 156, 0.28), transparent 70%), #0B2035; font-variant-numeric: tabular-nums; line-height: 1.15; }
.v35m p, .v35m ul, .v35m dl, .v35m dd { margin: 0; padding: 0; list-style: none; }
.v35m svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* barra do sistema (o notch da foto fica no meio dela) */
.v35m__barra { display: flex; align-items: center; gap: 1.6cqw; padding: 0.3cqw 4cqw 0; background: #050E18; font-size: 1.05cqw; color: rgba(247, 241, 227, 0.62); }
.v35m__barra b { font-weight: 700; color: #F7F1E3; }
.v35m__barra i { margin-left: auto; font-style: normal; }
.v35m__app { display: grid; grid-template-columns: 6.6cqw minmax(0, 1fr); min-height: 0; }
/* lateral só com ícones */
.v35m__lado { display: flex; flex-direction: column; align-items: center; gap: 1.1cqw; padding: 2.2cqw 0; background: #081928; border-right: 0.1cqw solid rgba(247, 241, 227, 0.07); }
.v35m__lado img { width: 3.4cqw; height: 3.4cqw; margin-bottom: 1.2cqw; object-fit: contain; }
.v35m__lado span { display: grid; place-items: center; width: 4.2cqw; height: 4.2cqw; border-radius: 1cqw; color: #7F97AC; }
.v35m__lado span svg { width: 2.1cqw; height: 2.1cqw; }
.v35m__lado span.on { background: rgba(216, 172, 82, 0.16); color: #E8CE93; }
.v35m__corpo { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 1.8cqw; padding: 2.4cqw 2.8cqw 2.6cqw; min-width: 0; min-height: 0; }
.v35m__cab { display: flex; align-items: center; justify-content: space-between; }
.v35m__tit { font: 400 3.3cqw/1 var(--f-titulo); letter-spacing: -0.01em; }
.v35m__mes { display: flex; align-items: center; gap: 0.7cqw; padding: 0.8cqw 1.2cqw; border-radius: 0.8cqw; box-shadow: inset 0 0 0 0.12cqw rgba(247, 241, 227, 0.16); font-size: 1.35cqw; font-weight: 600; }
.v35m__mes svg { width: 1.2cqw; height: 1.2cqw; }
.v35m__rot { font-size: 1.3cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #A9BCCB; }
/* saldo e resultado do mês */
.v35m__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.6cqw; }
.v35m__saldo, .v35m__mesbox, .v35m__fluxo, .v35m__contas { border-radius: 1.3cqw; background: rgba(247, 241, 227, 0.045); box-shadow: inset 0 0 0 0.1cqw rgba(247, 241, 227, 0.08); padding: 1.8cqw 2cqw; min-width: 0; }
.v35m__saldo { display: grid; align-content: space-between; gap: 1cqw; }
.v35m__grande { white-space: nowrap; }
.v35m__grande small { font-size: 2.2cqw; font-weight: 600; color: #C9D8E4; }
.v35m__grande b { font-size: 4.6cqw; font-weight: 700; letter-spacing: -0.03em; }
.v35m__ok { display: flex; align-items: center; gap: 0.6cqw; font-size: 1.25cqw; color: #E8CE93; }
.v35m__ok svg { width: 1.4cqw; height: 1.4cqw; stroke-width: 2.2; }
.v35m__mesbox { display: grid; gap: 1.2cqw; }
.v35m__res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqw; }
.v35m__res dt { font-size: 1.3cqw; color: #A9BCCB; }
.v35m__res dd { margin-top: 0.4cqw; white-space: nowrap; font-size: 1.6cqw; font-weight: 600; color: #C9D8E4; }
.v35m__res dd b { font-size: 2.7cqw; font-weight: 700; letter-spacing: -0.03em; color: #F7F1E3; }
.v35m__res .ouro dd, .v35m__res .ouro dd b { color: #E8CE93; }
/* régua do mês: quanto do que entrou sobrou (26%) */
.v35m__regua { position: relative; height: 0.9cqw; border-radius: 0.45cqw; background: #2F6E9C; overflow: hidden; }
.v35m__regua i { position: absolute; right: 0; top: 0; bottom: 0; width: 26.1%; background: #D8AC52; transform-origin: 100% 50%; }
/* fluxo de caixa e contas a aprovar */
.v35m__baixo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6cqw; min-height: 0; }
.v35m__sub { display: flex; align-items: center; justify-content: space-between; font-size: 1.5cqw; font-weight: 650; }
.v35m__leg { display: flex; gap: 1.4cqw; font-size: 1.15cqw; font-weight: 500; color: #A9BCCB; }
.v35m__leg span { display: flex; align-items: center; gap: 0.5cqw; }
.v35m__leg span::before { content: ''; width: 1cqw; height: 1cqw; border-radius: 0.25cqw; background: #2F6E9C; }
.v35m__leg .sai::before { background: rgba(247, 241, 227, 0.55); }
.v35m__fluxo { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.4cqw; }
.v35m__graf { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; min-height: 0; }
.v35m__grade { position: absolute; left: 0; right: 0; top: 0; bottom: 2.4cqw; background: repeating-linear-gradient(180deg, rgba(247, 241, 227, 0.07) 0 0.1cqw, transparent 0.1cqw 33.33%); border-bottom: 0.1cqw solid rgba(247, 241, 227, 0.16); }
.v35m__sem { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 2.4cqw; min-height: 0; }
.v35m__sem > span { align-self: end; text-align: center; font-size: 1.1cqw; color: #7F97AC; }
.v35m__barras { display: flex; align-items: flex-end; justify-content: center; gap: 0.6cqw; height: 100%; }
.v35m__barras i { width: 2.4cqw; border-radius: 0.5cqw 0.5cqw 0 0; background: #2F6E9C; transform-origin: 50% 100%; }
.v35m__barras i.sai { background: rgba(247, 241, 227, 0.55); }
.v35m-a76 { height: 76%; } .v35m-a63 { height: 63%; } .v35m-a85 { height: 85%; } .v35m-a51 { height: 51%; }
.v35m-a71 { height: 71%; } .v35m-a72 { height: 72%; } .v35m-a89 { height: 89%; }
.v35m__contas { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 0.9cqw; }
.v35m__qtd { display: grid; place-items: center; min-width: 2.2cqw; height: 2.2cqw; border-radius: 0.6cqw; background: rgba(216, 172, 82, 0.18); color: #E8CE93; font-size: 1.2cqw; font-weight: 700; }
.v35m__contas li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1cqw; padding: 0.85cqw 0; border-bottom: 0.1cqw solid rgba(247, 241, 227, 0.08); }
.v35m__contas li span { display: grid; gap: 0.25cqw; font-size: 1.35cqw; font-weight: 600; white-space: nowrap; }
.v35m__contas li small { font-size: 1.05cqw; font-weight: 500; color: #8FA3B5; }
.v35m__contas li b { font-size: 1.4cqw; font-weight: 600; white-space: nowrap; }
.v35m__contas li i { display: grid; place-items: center; width: 1.9cqw; height: 1.9cqw; border-radius: 50%; box-shadow: inset 0 0 0 0.12cqw rgba(247, 241, 227, 0.22); color: #0B2035; }
.v35m__contas li i svg { width: 1.3cqw; height: 1.3cqw; stroke-width: 2.4; opacity: 0; }
.v35m__contas li.ok i { background: #D8AC52; box-shadow: none; }
.v35m__contas li.ok i svg { opacity: 1; }
.v35m__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.2cqw; color: #A9BCCB; }
.v35m__total b { font-size: 1.9cqw; color: #F7F1E3; letter-spacing: -0.02em; }
.v35m__bt { align-self: end; display: grid; place-items: center; height: 3.6cqw; border-radius: 0.9cqw; background: #D8AC52; color: #0B2035; font-size: 1.4cqw; font-weight: 700; }

/* entrada do painel (o JS põe v35m--vivo antes e v35m--on quando o Mac chega): barras crescem, a régua enche, as contas
   ganham o visto uma a uma. Sem JS ou com movimento reduzido: o painel já aparece pronto */
.v35m--vivo .v35m__barras i { transform: scaleY(0); }
.v35m--vivo .v35m__regua i { transform: scaleX(0); }
.v35m--vivo .v35m__contas li { opacity: 0; translate: 0 0.8cqw; }
.v35m--vivo.v35m--on .v35m__barras i { transform: none; transition: transform 900ms cubic-bezier(.22, 1, .36, 1); }
.v35m--vivo.v35m--on .v35m__barras i.sai { transition-delay: 90ms; }
.v35m--vivo.v35m--on .v35m__sem:nth-child(3) i { transition-delay: 110ms; } .v35m--vivo.v35m--on .v35m__sem:nth-child(3) i.sai { transition-delay: 200ms; }
.v35m--vivo.v35m--on .v35m__sem:nth-child(4) i { transition-delay: 220ms; } .v35m--vivo.v35m--on .v35m__sem:nth-child(4) i.sai { transition-delay: 310ms; }
.v35m--vivo.v35m--on .v35m__sem:nth-child(5) i { transition-delay: 330ms; } .v35m--vivo.v35m--on .v35m__sem:nth-child(5) i.sai { transition-delay: 420ms; }
.v35m--vivo.v35m--on .v35m__regua i { transform: none; transition: transform 1100ms cubic-bezier(.22, 1, .36, 1) 300ms; }
.v35m--vivo.v35m--on .v35m__contas li { opacity: 1; translate: 0 0; transition: opacity 400ms ease-out, translate 500ms cubic-bezier(.22, 1, .36, 1); }
.v35m--vivo.v35m--on .v35m__contas li:nth-child(2) { transition-delay: 90ms; } .v35m--vivo.v35m--on .v35m__contas li:nth-child(3) { transition-delay: 180ms; }
.v35m--vivo .v35m__contas li i, .v35m--vivo .v35m__contas li i svg { transition: background-color 260ms, box-shadow 260ms, opacity 260ms; }

/* zzzzzzzzz-v35-quem.css */
/* ===================== v35 · frente quem (JM, 11/10): Quem é a Conex no celular no formato do computador =====================
   Bloco .v35q (quem.mjs › v35qCelular; JS em src/js/v31/v35-quem.js). O palco do computador em versão de celular:
   palco preso com o fundo parado junto, cinco cenas que trocam no mesmo lugar, os cinco traços no pé. Do celular
   anterior ficam só os cartões das sócias (marinho com os elos, .v32c-cartao). No computador nada muda: o .v35q some.
   O palco tem 100lvh (a tela inteira com a barra do Safari recolhida), então nunca sobra uma faixa do fundo de fora
   rolando por baixo dele; o conteúdo mora na .v35q__vista, de 100svh (a área visível com as barras abertas). */
.v35q { display: none; }

@media (max-width: 899px) {
  .v35q { position: relative; display: block; padding: 0 0 calc(var(--onda-h) + 8px); color: #FFFFFF; }
  .v35q > .monograma { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px)); mask-image: linear-gradient(180deg, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px)); }

  /* ---------- peças ---------- */
  /* manifesto: as três frases centradas, a palavra de ligação em dourado, o fio entre elas (como no computador) */
  .v35q-m__h { display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center;
    font: 400 clamp(2.1rem, 0.9rem + 5.8vw, 2.6rem)/1.1 var(--f-titulo); letter-spacing: -0.024em; color: #FFFFFF; text-wrap: balance; }
  .v35q-m__h em { font-style: italic; color: #E8CE93; }
  .v35q-f { display: block; max-width: 16ch; }
  .v35q-w { display: inline-block; vertical-align: top; clip-path: inset(-0.5em -0.6em -0.22em -0.6em); }
  .v35q-wi { display: inline-block; }
  .v35q-fio { display: block; flex: none; width: 1.5px; height: clamp(22px, 3.6svh, 36px); margin: clamp(10px, 1.6svh, 16px) auto; border-radius: 1px;
    background: linear-gradient(180deg, #E8CE93, rgba(232, 206, 147, 0.3)); transform-origin: 50% 0; }

  /* as sócias: o cartão do celular anterior (foto ocupando o cartão, texto assentado embaixo sobre o marinho) */
  .v35q-p__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
  [data-v35q-cena="2"] .v35q-p__foto img { object-position: 50% 24%; }

  /* o que a Conex junta: título centrado e as cinco frentes em linhas com fio dourado */
  .v35q-j__t { margin: 0; text-align: center; font: 400 clamp(1.85rem, 1rem + 3.4vw, 2.3rem)/1.08 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; }
  .v35q-j__lista { width: 100%; max-width: 460px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(232, 206, 147, 0.3); }
  .v35q-j__lista li { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(232, 206, 147, 0.3); }
  .v35q-j__lista b { font: 400 1.375rem/1.1 var(--f-titulo); color: #E8CE93; }
  .v35q-j__lista span { font-size: 0.9375rem; line-height: 1.4; color: #D5E1EB; }

  /* contato: os elos se encaixam, a frase, os quatro números (2 × 2, fio dourado entre as colunas) e o WhatsApp */
  .v35q-elos { width: clamp(78px, 22vw, 96px); height: auto; overflow: visible; }
  .v35q-z__frase { max-width: 15ch; margin: 0; text-align: center; font: 400 clamp(1.9rem, 1rem + 3.6vw, 2.35rem)/1.08 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; }
  .v35q-z__fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(14px, 2.4svh, 22px); width: 100%; max-width: 420px; margin: 0; padding: 0; list-style: none; }
  .v35q-z__fatos li { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 12px; text-align: center; }
  .v35q-z__fatos li:nth-child(even) { border-left: 1px solid rgba(232, 206, 147, 0.35); }
  .v35q-z__fatos b { font: 400 clamp(2rem, 1.2rem + 3.2vw, 2.5rem)/1 var(--f-titulo); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; color: #FFFFFF; }
  .v35q-z__fatos span { max-width: 18ch; font-size: 0.8125rem; line-height: 1.35; color: #D5E1EB; }

  /* ---------- sem animação (ou movimento reduzido): tudo empilhado, inteiro ---------- */
  .v35q:not(.v35q--vivo) { padding-top: var(--secao); }
  .v35q:not(.v35q--vivo) .v35q__cenas { display: grid; gap: 48px; padding: 0 var(--margem); }
  .v35q:not(.v35q--vivo) .v35q-cena { display: grid; justify-items: center; gap: 18px; }
  .v35q:not(.v35q--vivo) .v35q-p { justify-items: stretch; gap: 12px; padding: 18px; }
  .v35q:not(.v35q--vivo) .v35q-p__foto { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; }
  .v35q:not(.v35q--vivo) .v35q-p__txt { display: grid; gap: 8px; }
  .v35q:not(.v35q--vivo) .v35q__marcas { display: none; }

  /* ---------- vivo: trilho, palco preso e a vista ---------- */
  .v35q--vivo .v35q__trilho { position: relative; height: calc(100vh + 280svh); height: calc(100lvh + 280svh); }
  .v35q--vivo .v35q__palco { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden;
    background: radial-gradient(80% 42% at 50% 50svh, rgba(46, 111, 163, 0.2), rgba(46, 111, 163, 0) 72%), #0B2035; }
  .v35q--vivo .v35q__palco > .monograma { -webkit-mask-image: none; mask-image: none; }
  .v35q--vivo .v35q__vista { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100svh;
    padding: calc(var(--altura-topo) + 14px) var(--margem) 0; }
  .v35q--vivo .v35q__cenas { position: relative; flex: 1; min-height: 0; margin-bottom: 84px; }

  /* cada cena no mesmo lugar; só a da vez aparece. A que sai esmaece rápido (e sobe um pouco se a próxima vem depois);
     a que chega espera a outra sair, sobe 20 px e as partes dela entram em cascata (--k) */
  .v35q--vivo .v35q-cena { position: absolute; inset: 0; opacity: 0; visibility: hidden; translate: 0 20px;
    transition: opacity 220ms linear, translate 260ms cubic-bezier(.5, 0, .75, 0), visibility 0s linear 260ms; }
  .v35q--vivo .v35q-cena.antes { translate: 0 -14px; }
  .v35q--vivo .v35q-cena.on { opacity: 1; visibility: visible; translate: 0 0;
    transition: opacity 460ms linear 240ms, translate 820ms cubic-bezier(.16, 1, .3, 1) 240ms, visibility 0s linear 0s; }
  .v35q--vivo .v35q-k { opacity: 0; translate: 0 14px; transition: opacity 0s linear 280ms, translate 0s linear 280ms; }
  .v35q--vivo .v35q-cena.on .v35q-k { opacity: 1; translate: 0 0;
    transition: opacity 520ms linear calc(300ms + var(--k, 0) * 90ms), translate 900ms cubic-bezier(.16, 1, .3, 1) calc(300ms + var(--k, 0) * 90ms); }

  /* 1 · manifesto: centrado na vista; cada frase sobe palavra por palavra quando chega, a anterior recua */
  .v35q--vivo .v35q-m { display: grid; place-items: center; }
  .v35q--vivo .v35q-f { transition: opacity 600ms linear; }
  .v35q--vivo .v35q-f.passada { opacity: 0.42; }
  .v35q--vivo .v35q-wi { translate: 0 120%; transition: translate 380ms cubic-bezier(.5, 0, .75, 0); }
  .v35q--vivo .v35q-f.cheia .v35q-wi { translate: 0 0; transition: translate 1000ms cubic-bezier(.16, 1, .3, 1) calc(120ms + var(--d, 0) * 1ms); }
  .v35q--vivo .v35q-fio { transform: scaleY(0); opacity: 0.4; transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 300ms linear; }
  .v35q--vivo .v35q-fio.cheia { transform: none; opacity: 1; }

  /* 2 e 3 · as sócias: a foto ocupa o cartão e se esvai no marinho; cargo, nome e texto embaixo */
  .v35q--vivo .v35q-p__foto { position: absolute; inset: 0 0 auto; height: 78%; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 48%, transparent 100%); mask-image: linear-gradient(180deg, #000 48%, transparent 100%); }
  .v35q--vivo .v35q-p__foto img { scale: 1.06; transition: scale 0s linear 280ms; }
  .v35q--vivo .v35q-p.on .v35q-p__foto img { scale: 1; transition: scale 1400ms cubic-bezier(.16, 1, .3, 1) 200ms; }
  .v35q--vivo .v35q-p::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 32, 53, 0) 40%, rgba(11, 32, 53, 0.55) 70%, rgba(10, 29, 49, 0.92) 100%); }
  .v35q--vivo .v35q-p__txt { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 22px; display: grid; gap: 8px; }

  /* 4 · o que a Conex junta */
  .v35q--vivo .v35q-j { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3svh, 28px); }

  /* 5 · contato: os elos chegam dos dois lados e se encaixam (o do computador) */
  .v35q--vivo .v35q-z { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2.8svh, 26px); }
  .v35q-elos__a, .v35q-elos__b { transition: translate 0s linear 280ms, opacity 0s linear 280ms; }
  .v35q--vivo .v35q-elos__a { translate: -150px 0; opacity: 0; }
  .v35q--vivo .v35q-elos__b { translate: 150px 0; opacity: 0; }
  .v35q--vivo .v35q-z.on :is(.v35q-elos__a, .v35q-elos__b) { translate: 0 0; opacity: 1;
    transition: translate 1000ms cubic-bezier(.22, 1, .36, 1) 300ms, opacity 500ms linear 300ms; }

  /* os cinco traços, centrados no pé da vista (na altura do botão flutuante do WhatsApp, sem encostar nele) */
  .v35q__marcas { display: flex; gap: 8px; margin: 0; }
  .v35q--vivo .v35q__marcas { position: absolute; left: 50%; bottom: 43px; translate: -50% 0; }
  .v35q__marcas i { display: block; width: 26px; height: 3px; border-radius: 3px; background: rgba(233, 242, 248, 0.2); transition: background-color 400ms linear; }
  .v35q__marcas i.on { background: #D8AC52; }

  /* telas altas (390 × 844 em diante): o time com mais corpo, para a cena não ficar rala */
  @media (min-height: 760px) {
    .v35q-j__t { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 2.5rem); }
    .v35q-j__lista li { grid-template-columns: 9.2rem minmax(0, 1fr); padding: 16px 0; }
    .v35q-j__lista b { font-size: 1.5rem; }
    .v35q-j__lista span { font-size: 1rem; }
  }
  /* telas baixas (360 × 640, Safari com as barras): tudo um pouco mais justo */
  @media (max-height: 700px) {
    .v35q--vivo .v35q__vista { padding-top: calc(var(--altura-topo) + 8px); }
    .v35q--vivo .v35q__cenas { margin-bottom: 78px; }
    .v35q--vivo .v35q__marcas { bottom: 40px; }
    .v35q-m__h { font-size: clamp(1.85rem, 0.9rem + 5vw, 2.2rem); }
    .v35q-j__lista li { padding: 8px 0; }
    .v35q-j__lista b { font-size: 1.2rem; }
    .v35q-j__lista span { font-size: 0.875rem; }
    .v35q-z__frase { font-size: 1.75rem; }
    .v35q-z__fatos b { font-size: 1.85rem; }
  }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .v35q *, .v35q *::after { transition: none !important; } }

/* zzzzzzzzzz-v36-erp.css */
/* ---------- v36 erp · /implantacao-de-erp, "Os módulos conversam entre si" no computador (JM, 11/10) ----------
   "acho que poderiam ser horizontais, uma sequência horizontal [...] não gostei da forma como inicia com um card de pedido
   e no final a logo da conex, simplifique um pouco e deixe uma coisa mais minimalista mesmo"
   Os seis módulos numa linha só, ligados por um fio reto e contínuo que passa pelo centro dos nós. Cada módulo é só o nó
   redondo (ícone de linha), o nome e a frase, sem caixa. Sem o pedido no começo e sem os elos no fim.
   A rolagem leva o fio de nó em nó (v36-erp.js, amortecido); o título e a linha ficam presos num trilho curto e o fundo
   fica parado. No celular nada muda: o trilho e o palco somem do layout (display: contents) e a corrente segue igual.
   Carrega por último (ordem alfabética). */

.v36e { display: none; }
@media (max-width: 899px) { .v36e-trilho, .v36e-palco { display: contents; } }

@media (min-width: 900px) {
  /* o cartão antigo continua no HTML (os componentes ef e dErpConta dependem dele), escondido */
  .ef .ef__cartao { display: none; }

  .v36e { --g: clamp(14px, 1.8vw, 32px); --no: 60px; --f: 1; position: relative; display: block; margin-top: 8px; }
  .v36e :where(ol, p, h3) { margin: 0; padding: 0; list-style: none; }

  /* o fio: do centro do primeiro nó ao centro do último (colunas iguais: o centro da 1ª fica a (largura - 5 vãos) / 12) */
  .v36e__fio { position: absolute; z-index: 0; top: calc(var(--no) / 2 - 1px); left: calc((100% - 5 * var(--g)) / 12); right: calc((100% - 5 * var(--g)) / 12);
    height: 2px; border-radius: 2px; background: rgba(11, 32, 53, 0.13); }
  .v36e__ouro { position: absolute; inset: 0; border-radius: inherit; background: #C8962F; transform-origin: 0 50%; transform: scaleX(var(--f)); }
  /* a ponta do fio: um ponto dourado que só aparece enquanto o fio anda */
  .v36e__fio::after { content: ''; position: absolute; top: 50%; left: calc(var(--f) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: #C8962F; box-shadow: 0 0 0 4px #F1E5CC; opacity: 0; transition: opacity 300ms linear; }
  .v36e--anda .v36e__fio::after { opacity: 1; }

  .v36e__mods { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g); }
  .v36e__m { display: grid; justify-items: center; align-content: start; text-align: center; }

  /* o nó: marinho do cartão da Conex, ícone dourado de linha; o anel marfim faz o fio parar na borda do nó */
  .v36e__no { display: grid; place-items: center; width: var(--no); height: var(--no); border-radius: 50%; color: #E8CE93;
    background: radial-gradient(120% 90% at 80% 0%, rgba(216, 172, 82, 0.2) 0%, rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62 0%, #0E2742 55%, #0A1D31 100%);
    box-shadow: 0 0 0 7px #F1E5CC, inset 0 0 0 1px rgba(232, 206, 147, 0.28), 0 16px 26px -16px rgba(6, 18, 31, 0.85); }
  .v36e__no .ed-i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

  .v36e__m h3 { margin-top: 24px; font: 400 clamp(1.3rem, 0.98rem + 0.55vw, 1.7rem)/1.1 var(--f-titulo); letter-spacing: -0.015em; color: #0B2035; }
  .v36e__m p { max-width: 21ch; margin-top: 8px; font-size: clamp(0.95rem, 0.87rem + 0.14vw, 1.05rem); line-height: 1.45; color: #3B4753; text-wrap: balance; }

  /* --- com a rolagem (só com animação): apagado = nó vazado e nome esmaecido, frase guardada; o fio acende um a um --- */
  .v36e--vivo .v36e__no { transition: background-color 450ms linear, color 450ms linear, box-shadow 450ms linear, scale 600ms cubic-bezier(.3, 1.5, .5, 1); }
  .v36e--vivo .v36e__m h3 { transition: opacity 450ms linear; }
  .v36e--vivo .v36e__m p { transition: opacity 450ms linear, translate 700ms cubic-bezier(.16, 1, .3, 1); }
  .v36e--vivo .v36e__m:not(.on) .v36e__no { background: #F1E5CC; color: rgba(11, 32, 53, 0.34); scale: 0.92;
    box-shadow: 0 0 0 7px #F1E5CC, inset 0 0 0 1.5px rgba(11, 32, 53, 0.2), 0 16px 26px -16px rgba(6, 18, 31, 0); }
  .v36e--vivo .v36e__m:not(.on) h3 { opacity: 0.3; }
  .v36e--vivo .v36e__m:not(.on) p { opacity: 0; translate: 0 10px; }

  /* --- o trilho curto: título + linha presos no meio da tela enquanto o fio anda; o fundo fica parado junto --- */
  .v36e-trilho--vivo { height: calc(var(--v36e-h, 440px) + 46svh); } /* altura, não padding: o sticky não entra no padding do pai */
  .v36e-trilho--vivo > .v36e-palco { position: sticky; top: max(calc(var(--altura-topo) + 28px), calc(50svh - var(--v36e-h, 440px) / 2)); }
  .anima .ee.com-monograma > .monograma { background-attachment: fixed; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .v36e { --no: 52px; }
  .v36e__no .ed-i { width: 21px; height: 21px; }
  .v36e__m h3 { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .v36e-trilho { height: auto !important; } .v36e-palco { position: static; } .v36e * { transition: none !important; } }

/* zzzzzzzzzz-v36-fz.css */
/* v36 fz (JM, 11/10): quatro fases no celular, mais imersivo. A foto ocupa o cartão inteiro (antes parava no meio e o
   resto era marinho liso) e só escurece onde está o texto; o painel aberto de cada fase também: a foto vai até o pé,
   atrás das linhas "A Conex / Você". E sai a sombra embaixo do cartão (fazia uma faixa escura "bugada" no fim). */
@media (max-width: 899px) {
  [data-fases="a"] .fz--vivo .fz__lista { box-shadow: inset 0 0 0 1px rgba(233, 242, 248, 0.1); }
  [data-fases="a"] .fz--vivo .fz-c__foto { height: 100%; }
  [data-fases="a"] .fz--vivo .fz-c__foto::after { background: linear-gradient(180deg, rgba(11, 32, 53, 0.1) 0%, rgba(11, 32, 53, 0.05) 30%, rgba(11, 32, 53, 0.55) 55%, rgba(11, 32, 53, 0.9) 75%, #0B2035 100%); }
  [data-fases="a"] .fz--vivo .fz-c__obj { z-index: 3; }
  .cf2-fase { position: relative; isolation: isolate; }
  /* a capa continua na primeira linha (o título fica nela); a foto e o degradê descem até o pé do painel (altura do
     painel medida no v36-fz.js) */
  .cf2-fase > .cf2-fase__capa { overflow: visible; z-index: 0; }
  .cf2-fase > .cf2-fase__capa > img { z-index: -2; bottom: auto; height: var(--v36-fh, 100%); }
  .cf2-fase > .cf2-fase__capa::after { z-index: -1; bottom: auto; height: var(--v36-fh, 100%); background: linear-gradient(180deg, rgba(11, 32, 53, 0.3) 0%, rgba(11, 32, 53, 0.08) 22%, rgba(11, 32, 53, 0.55) 42%, rgba(11, 32, 53, 0.86) 62%, rgba(11, 32, 53, 0.94) 100%); }
  .cf2-fase { overflow: hidden; }
  .cf2-fase > .cf2-fase__corpo, .cf2-fase > .cf2-fase__nav { position: relative; z-index: 1; background: transparent; }
}

/* zzzzzzzzzz-v36-mac.css */
/* v36 mac (JM, 11/10): o MacBook do hero com a tampa desenhada (aro, moldura, queixo, dobradiça, notch e tela em SVG/HTML,
   nítidos em qualquer DPR) sobre a base da foto recortada por contorno vetorial. Maior que na v35; o celular vai um pouco
   para a direita. Posição, tamanho e homografia: src/js/v31/v36-mac.js. Receita: build/mac-v36/LEIA.md.
   No celular (< 900 px) o Mac não aparece (como antes). */
.v36-mac { display: none; }
@media (min-width: 900px) {
  .hpl .v36-mac { display: block; position: absolute; z-index: 3; left: calc(100% - 28px - 36vw); top: 26%; width: 36vw; aspect-ratio: 1.5; /* v41: o JS dá largura e altura (Mac de frente com a pose do celular) */
    translate: calc(var(--mx) * 16px) calc(var(--my) * 10px); }
  /* v39: o corpo do Mac (tela vazada) por cima; a interface por trás, levada aos 4 cantos da tela pelo JS (sem o JS,
     escondida: o buraco mostra o marinho do vidro) */
  .v39-mac__corpo { position: absolute; left: 0; top: 0; z-index: 2; display: block; max-width: none; transform-origin: 0 0; pointer-events: none;
    visibility: hidden; backface-visibility: hidden; }
  .v36-mac--encaixado .v39-mac__corpo { visibility: visible; }
  .v39-mac__tela { position: absolute; left: 0; top: 0; z-index: 1; width: 600px; height: 375px; transform-origin: 0 0; overflow: hidden;
    container-type: inline-size; background: #0B2035; visibility: hidden; backface-visibility: hidden; }
  .v36-mac--encaixado .v39-mac__tela { visibility: visible; }
  /* reflexo do vidro, bem leve */
  .v39-mac__tela::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: linear-gradient(112deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0) 46%); }
  /* sombra no chão, só sob a base */
  .v36-mac__sombra { position: absolute; inset: 0; z-index: 0; filter: blur(16px); translate: 0 3%; }
  .v36-mac__sombra i { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); clip-path: polygon(90% 77%, 54% 99.5%, 1% 67%, 36% 47.5%) /* v43: a base do Mac espelhado */; }

  .anima .hpl .v36-mac { opacity: 0; margin-left: 140px; }
  .anima .hpl--entrou .v36-mac { opacity: 1; margin-left: 0; transition: opacity 900ms ease-out 350ms, margin-left 1400ms cubic-bezier(.16, 1, .3, 1) 350ms; }

  /* v36 mac: o celular um pouco mais para a direita (o posMac do site.js desconta a margem: o tamanho não muda) */
  .hpl .hpl-fone--esq { margin-left: 56px; }
  .anima .hpl .hpl-fone--esq { margin-left: -84px; }
  .anima .hpl--entrou .hpl-fone--esq { margin-left: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .anima .hpl .v36-mac { opacity: 1 !important; margin-left: 0 !important; transition: none !important; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { .anima .hpl .hpl-fone--esq { margin-left: 56px !important; } }

/* ---------- a interface (1 cqw = 1 % da largura da tela; a caixa tem 100 × 64,85 cqw; o vidro começa a 0,24 cqw) ---------- */
.v36mac { position: absolute; inset: 0; display: grid; grid-template-rows: 3.4cqw minmax(0, 1fr); font-family: var(--f-texto); color: #F7F1E3;
  background: radial-gradient(75% 65% at 88% 0%, rgba(47, 110, 156, 0.3), transparent 70%), linear-gradient(170deg, #0E2740 0%, #0A1D31 80%);
  font-variant-numeric: tabular-nums; line-height: 1.1; -webkit-font-smoothing: antialiased; }
:where(.v36mac) :is(p, ul, dl, dd) { margin: 0; padding: 0; list-style: none; }
.v36mac svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* barra de cima (o notch fica no meio dela) */
.v36mac__barra { display: flex; align-items: center; justify-content: space-between; padding: 0.35cqw 4.4cqw 0 4.2cqw; background: #06111D; font-size: 1.7cqw; color: rgba(247, 241, 227, 0.7); }
.v36mac__barra b { display: flex; align-items: center; gap: 0.7cqw; font-weight: 700; color: #F7F1E3; }
.v36mac__barra img { width: 1.9cqw; height: 1.9cqw; object-fit: contain; }
.v36mac__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 2cqw; padding: 2.3cqw 3cqw 2.7cqw; min-height: 0; }
.v36mac__card { min-width: 0; min-height: 0; padding: 2.1cqw 2.4cqw; border-radius: 1.5cqw; background: rgba(247, 241, 227, 0.06); box-shadow: inset 0 0 0 0.12cqw rgba(247, 241, 227, 0.1); }
.v36mac__rot { font-size: 2.05cqw; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: #BCCBD8; }
/* saldo */
.v36mac__saldo { display: grid; align-content: space-between; gap: 1.1cqw; }
.v36mac__grande { display: flex; align-items: baseline; gap: 0.8cqw; white-space: nowrap; }
.v36mac__grande small { font-size: 2.5cqw; font-weight: 600; color: #C9D8E4; }
.v36mac__grande b { font-size: 5.5cqw; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.v36mac__ok { display: flex; align-items: center; gap: 0.7cqw; font-size: 2cqw; font-weight: 600; color: #E8CE93; }
.v36mac__ok svg { width: 2cqw; height: 2cqw; stroke-width: 2.4; }
/* resultado do mês */
.v36mac__mes { display: grid; align-content: space-between; gap: 1.1cqw; }
.v36mac__res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqw; }
.v36mac__res dt { font-size: 2cqw; font-weight: 500; color: #BCCBD8; }
.v36mac__res dd { display: flex; align-items: baseline; gap: 0.4cqw; margin-top: 0.5cqw; white-space: nowrap; }
.v36mac__res dd small { font-size: 1.5cqw; font-weight: 600; color: #BCCBD8; }
.v36mac__res dd b { font-size: 3.3cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.v36mac__res .ouro dt, .v36mac__res .ouro dd small, .v36mac__res .ouro dd b { color: #E8CE93; }
/* régua: quanto do que entrou sobrou (26 %) */
.v36mac__regua { position: relative; height: 1.2cqw; border-radius: 0.6cqw; background: #2F6E9C; overflow: hidden; }
.v36mac__regua i { position: absolute; right: 0; top: 0; bottom: 0; width: 26.1%; background: #D8AC52; transform-origin: 100% 50%; }
/* fluxo de caixa: 4 semanas, entrou e saiu */
.v36mac__sub { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; font-size: 2.3cqw; font-weight: 650; }
.v36mac__leg { display: flex; gap: 1.4cqw; font-size: 1.85cqw; font-weight: 500; color: #BCCBD8; }
.v36mac__leg span { display: flex; align-items: center; gap: 0.5cqw; }
.v36mac__leg span::before { content: ''; width: 1.2cqw; height: 1.2cqw; border-radius: 0.3cqw; background: #4C8BC0; }
.v36mac__leg .sai::before { background: rgba(247, 241, 227, 0.6); }
.v36mac__fluxo { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.6cqw; }
.v36mac__graf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4cqw; min-height: 0;
  background: linear-gradient(rgba(247, 241, 227, 0.18), rgba(247, 241, 227, 0.18)) 0 calc(100% - 2.6cqw) / 100% 0.12cqw no-repeat; }
.v36mac__sem { display: grid; grid-template-rows: minmax(0, 1fr) 2.6cqw; min-height: 0; }
.v36mac__sem > span { align-self: end; text-align: center; font-size: 1.9cqw; color: #A9BCCB; }
.v36mac__barras { display: flex; align-items: flex-end; justify-content: center; gap: 0.7cqw; height: 100%; }
.v36mac__barras i { width: 3.2cqw; border-radius: 0.6cqw 0.6cqw 0 0; background: #4C8BC0; transform-origin: 50% 100%; }
.v36mac__barras i.sai { background: rgba(247, 241, 227, 0.6); }
.v36mac-h76 { height: 76%; } .v36mac-h63 { height: 63%; } .v36mac-h85 { height: 85%; } .v36mac-h51 { height: 51%; }
.v36mac-h71 { height: 71%; } .v36mac-h72 { height: 72%; } .v36mac-h89 { height: 89%; }
/* contas a aprovar */
.v36mac__contas { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 0.6cqw; }
.v36mac__qtd { display: grid; place-items: center; min-width: 2.8cqw; height: 2.8cqw; border-radius: 0.8cqw; background: rgba(216, 172, 82, 0.2); color: #E8CE93; font-size: 1.7cqw; font-weight: 700; }
.v36mac__sub--junto { justify-content: flex-start; }
/* a tela está em perspectiva (as linhas descem para a direita): nada de valor alinhado lá na direita; o valor fica
   debaixo do nome, o visto na frente */
.v36mac__contas li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.3cqw; padding: 0.75cqw 0; border-bottom: 0.12cqw solid rgba(247, 241, 227, 0.1); }
.v36mac__contas li > span { display: grid; gap: 0.35cqw; min-width: 0; }
.v36mac__contas li b { font-size: 2.15cqw; font-weight: 650; white-space: nowrap; }
.v36mac__contas li span span { font-size: 1.8cqw; color: #A9BCCB; white-space: nowrap; }
.v36mac__contas li em { font-style: normal; font-size: 2.05cqw; font-weight: 650; color: #F7F1E3; }
.v36mac__contas li i { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; box-shadow: inset 0 0 0 0.15cqw rgba(247, 241, 227, 0.28); color: #0B2035; }
.v36mac__contas li i svg { width: 1.8cqw; height: 1.8cqw; stroke-width: 2.6; opacity: 0; }
.v36mac__contas li.ok i { background: #D8AC52; box-shadow: none; }
.v36mac__contas li.ok i svg { opacity: 1; }
.v36mac__total { display: flex; align-items: baseline; gap: 1.2cqw; padding-top: 0.6cqw; font-size: 2cqw; color: #BCCBD8; }
.v36mac__total b { font-size: 2.6cqw; color: #F7F1E3; letter-spacing: -0.02em; }
.v36mac__bt { align-self: end; display: grid; place-items: center; height: 4.8cqw; border-radius: 1.1cqw; background: #D8AC52; color: #0B2035; font-size: 2.2cqw; font-weight: 750; }

/* entrada (uma vez, quando o Mac chega): os números contam, as barras crescem, a régua enche, as contas ganham o visto
   uma a uma. Sem JS ou com movimento reduzido: o painel já aparece pronto */
.v36mac--vivo .v36mac__barras i { transform: scaleY(0); }
.v36mac--vivo .v36mac__regua i { transform: scaleX(0); }
.v36mac--vivo .v36mac__contas li { opacity: 0; translate: 0 1cqw; }
.v36mac--vivo.v36mac--on .v36mac__barras i { transform: none; transition: transform 800ms cubic-bezier(.22, 1, .36, 1); }
.v36mac--vivo.v36mac--on .v36mac__barras i.sai { transition-delay: 80ms; }
.v36mac--vivo.v36mac--on .v36mac__sem:nth-child(2) i { transition-delay: 100ms; } .v36mac--vivo.v36mac--on .v36mac__sem:nth-child(2) i.sai { transition-delay: 180ms; }
.v36mac--vivo.v36mac--on .v36mac__sem:nth-child(3) i { transition-delay: 200ms; } .v36mac--vivo.v36mac--on .v36mac__sem:nth-child(3) i.sai { transition-delay: 280ms; }
.v36mac--vivo.v36mac--on .v36mac__sem:nth-child(4) i { transition-delay: 300ms; } .v36mac--vivo.v36mac--on .v36mac__sem:nth-child(4) i.sai { transition-delay: 380ms; }
.v36mac--vivo.v36mac--on .v36mac__regua i { transform: none; transition: transform 1000ms cubic-bezier(.22, 1, .36, 1) 250ms; }
.v36mac--vivo.v36mac--on .v36mac__contas li { opacity: 1; translate: 0 0; transition: opacity 380ms ease-out, translate 480ms cubic-bezier(.22, 1, .36, 1); }
.v36mac--vivo.v36mac--on .v36mac__contas li:nth-child(2) { transition-delay: 90ms; } .v36mac--vivo.v36mac--on .v36mac__contas li:nth-child(3) { transition-delay: 180ms; }
.v36mac--vivo .v36mac__contas li i, .v36mac--vivo .v36mac__contas li i svg { transition: background-color 240ms, box-shadow 240ms, opacity 240ms; }

/* v39: a tela do MacBook Pro do PSD é 16:10 (100 × 62,5 cqw, antes 64,85) e não tem notch: barra de cima e cartão das
   contas mais justos. Com a tela subindo forte para a direita, a linha "Total" parecia entrar no botão: o total foi para
   o próprio botão ("Aprovar R$ 12.450,00") */
.v39-mac .v36mac { grid-template-rows: 3cqw minmax(0, 1fr); }
/* v40 (JM: 'melhore a parte de cima da tela, onde fica a câmera'): sem a faixa escura da barra, que dobrava a moldura */
.v39-mac .v36mac__barra { background: none; padding-top: 0.9cqw; }
.v39-mac .v36mac__grade { gap: 1.8cqw; padding: 2cqw 3cqw 2.4cqw; }
.v39-mac .v36mac__card { padding: 1.9cqw 2.3cqw; }
.v39-mac .v36mac__contas { gap: 0.3cqw; }
.v39-mac .v36mac__contas li { padding: 0.5cqw 0; }
.v39-mac .v36mac__contas { grid-template-rows: auto auto minmax(0, 1fr); }
.v39-mac .v36mac__bt { height: 4.3cqw; }

/* zzzzzzzzzz-v36-manif.css */
/* ---------- v36 manif · Quem é a Conex no computador (JM, 11/10: "melhore a cadência de apresentação das frases dessa
   seção, ser algo mais dinâmico e não tão rápido, pra o scroll não se perder nas palavras") ----------
   Cada frase tem o próprio trecho de rolagem: entra em 36% de tela (as palavras sobem da máscara, uma depois da outra) e
   fica inteira e parada por ~30% de tela antes da próxima começar. A anterior só recua (42%) quando a próxima começa.
   Quem move as palavras é o src/js/v31/v36-manif.js, com um valor que persegue a rolagem (sem transição de CSS aqui).
   O manifesto foi de 126svh para 175svh de rolagem (+39%); as outras quatro cenas guardam a mesma rolagem de antes.
   Celular: nada muda (o .qx__palco nem aparece lá; o celular é o .v35q). */
@media (min-width: 900px) {
  .anima .qx.qx--vivo.v36m { height: calc(100svh + 312.7svh); }
  .qx.v36m .qx-frase, .qx.v36m .qx-frase .qx-wi, .qx.v36m .qx-fio, .qx.v36m .qx-liga { transition: none !important; }
  .qx.v36m .qx-frase .qx-wi { translate: 0 118%; will-change: translate; }
  .qx.v36m .qx-fio { transform: scaleY(0); opacity: 0.4; }
  /* a palavra de ligação que voa da frase de cima: a cópia mora no h2 e só aparece durante o voo */
  .qx.v36m .v36m-voo { visibility: hidden; left: 0; top: 0; }
  /* medição das posições: tudo no lugar final, por um instante, sem pintar */
  .qx.v36m.v36m--medir .qx-frase .qx-wi { translate: none !important; }
}

/* zzzzzzzzzz-v36-perf.css */
/* ---------- v36 perf (JM, 11/10, iPhone: "tá travando um pouco a construção do elemento do hero do mobile") ----------
   Topo de /bpo-financeiro-recife, /implantacao-de-erp e /mapeamento-de-processos no celular, e a régua do "Um mês" do BPO.
   Nada muda no desenho: só como o navegador chega nele. Carrega por último (ordem alfabética). Notas em docs/NOTAS-v36-perf.md */

@media (max-width: 1023px) {
  /* ===== 1. O cartão do topo (.v32f-tl, o mesmo nas três páginas) =====
     a) A entrada (sobe 60 px e acende) passa de translate para transform, que todo navegador anima na GPU (a animação
        ativa já põe o cartão numa camada própria; will-change foi testado e saiu: a camada criada antes da entrada
        guardava o texto num deslocamento de subpixel e o serrilhado final ficava diferente do de antes).
     b) A entrada espera a liberação do JS (.v36-vai: JS da página montado, fontes prontas, dois quadros pintados; ver
        heroPronto em site.js). Sem JS, o script do <head> tira o .anima em 2,5 s e o cartão aparece parado, como antes. */
  .anima .v32f-cena { translate: none; transform: translateY(60px); animation-name: v36-entra; }
  .anima .v32f-cena:not(.v36-vai) { animation-play-state: paused; }
  /* c) Contenção de layout: o que muda dentro do cartão (etapas, estado, o número que conta no BPO) não refaz o layout
     fora dele. (contain: paint ficou de fora: muda o serrilhado do texto do cartão, e o pedido é visual igual) */
  .v32f-tl { contain: layout; }
  /* d) O fio entre as etapas e as linhas que sobem também por transform (antes: scale e translate) */
  .v32f-tl__fluxo li:not(:last-child)::after { transition-property: transform; }
  .anima .v32f-tl:not(.vivo) .v32f-tl__fluxo li::after { scale: none; transform: scaleX(0); }
  .v32f-tl__fluxo :is(.v32f-tl__quem, .v32f-tl__prazo) { transition-property: opacity, transform; }
  .anima .v32f-tl:not(.vivo) :is(.v32f-tl__quem, .v32f-tl__prazo) { translate: none; transform: translateY(6px); }
  .v32f-tl__estado > span { transition-property: opacity, transform; }
  .anima .v32f-tl:not(.pronto) .v32f-tl__estado-b { translate: none; transform: translateY(6px); }

  /* ===== 2. ERP: as duas luzes do fundo do topo =====
     Eram círculos com filter: blur(60px) animados sem parar (70 e 84 s) atrás do cartão: o desfoque de duas camadas de
     ~1.500 px era refeito a cada quadro. Agora o desfoque vem pronto no próprio degradê (perfil calculado do desfoque
     gaussiano de 60 px sobre o degradê linear de antes, para a luz de 85vmax; diferença < 1 nível de cor) e a camada só
     se move. O elemento cresce 180 px (3 desvios do desfoque) para cada lado, com o mesmo centro, para caber a borda suave. */
  .ex__aura { filter: none; width: calc(85vmax + 360px); height: calc(85vmax + 360px); }
  .ex__aura--a { left: calc(-25vmax - 180px); top: calc(-30vmax - 180px);
    background: radial-gradient(circle calc(42.5vmax + 180px) at 50% 50%, rgba(88, 145, 175, 0.4208) 0, rgba(88, 145, 175, 0.4118) calc(42.5vmax * 0.1), rgba(88, 145, 175, 0.3864) calc(42.5vmax * 0.2), rgba(88, 145, 175, 0.3490) calc(42.5vmax * 0.3), rgba(88, 145, 175, 0.3040) calc(42.5vmax * 0.4), rgba(88, 145, 175, 0.2549) calc(42.5vmax * 0.5), rgba(88, 145, 175, 0.2042) calc(42.5vmax * 0.6), rgba(88, 145, 175, 0.1540) calc(42.5vmax * 0.7), rgba(88, 145, 175, 0.1069) calc(42.5vmax * 0.8), rgba(88, 145, 175, 0.0739) calc(42.5vmax * 0.88), rgba(88, 145, 175, 0.0530) calc(42.5vmax * 0.94), rgba(88, 145, 175, 0.0361) 42.5vmax, rgba(88, 145, 175, 0.0175) calc(42.5vmax + 30px), rgba(88, 145, 175, 0.0072) calc(42.5vmax + 60px), rgba(88, 145, 175, 0.0025) calc(42.5vmax + 90px), rgba(88, 145, 175, 0.0007) calc(42.5vmax + 120px), rgba(88, 145, 175, 0.0002) calc(42.5vmax + 150px), rgba(88, 145, 175, 0) calc(42.5vmax + 180px)); }
  .ex__aura--b { right: calc(-30vmax - 180px); bottom: calc(-40vmax - 180px);
    background: radial-gradient(circle calc(42.5vmax + 180px) at 50% 50%, rgba(216, 172, 82, 0.2142) 0, rgba(216, 172, 82, 0.2096) calc(42.5vmax * 0.1), rgba(216, 172, 82, 0.1967) calc(42.5vmax * 0.2), rgba(216, 172, 82, 0.1777) calc(42.5vmax * 0.3), rgba(216, 172, 82, 0.1547) calc(42.5vmax * 0.4), rgba(216, 172, 82, 0.1298) calc(42.5vmax * 0.5), rgba(216, 172, 82, 0.1040) calc(42.5vmax * 0.6), rgba(216, 172, 82, 0.0784) calc(42.5vmax * 0.7), rgba(216, 172, 82, 0.0544) calc(42.5vmax * 0.8), rgba(216, 172, 82, 0.0376) calc(42.5vmax * 0.88), rgba(216, 172, 82, 0.0270) calc(42.5vmax * 0.94), rgba(216, 172, 82, 0.0184) 42.5vmax, rgba(216, 172, 82, 0.0089) calc(42.5vmax + 30px), rgba(216, 172, 82, 0.0037) calc(42.5vmax + 60px), rgba(216, 172, 82, 0.0013) calc(42.5vmax + 90px), rgba(216, 172, 82, 0.0004) calc(42.5vmax + 120px), rgba(216, 172, 82, 0.0001) calc(42.5vmax + 150px), rgba(216, 172, 82, 0) calc(42.5vmax + 180px)); }

  /* ===== 3. BPO · Um mês: a linha e a marca da régua andam por transform posto pelo JS (v36bMes). Sem will-change: as
     duas são pequenas (repintar custa quase nada) e a camada própria mudava o serrilhado da borda da linha e do anel ===== */
  /* a cor dos rótulos vem do JS pela posição (cruzamento contínuo); a transição de cor do CSS sairia atrasada da régua */
  .bm--vivo .bm__etapas li { transition: none; }
}
@keyframes v36-entra { to { opacity: 1; transform: none; } }

/* zzzzzzzzzz-v36-proc.css */
/* v36 proc (JM, 11/10): "Como o mapeamento acontece" no computador, pela referência "Process section"
   (prints-jm/proc-referencia.png). Sai o celular do centro. Uma onda só, contínua, atravessa a seção de ponta a ponta
   (traçada em v36-proc.js); os quatro nós ficam nos vales e picos, alternando (baixo, alto, baixo, alto), e cada cartão
   fica do lado de fora da curva, junto do seu nó: acima do nó de baixo, abaixo do nó de cima. Os cartões continuam os
   do POP (cabeça marinho com a curva do elo, "Etapa N de 4", objeto 3D, corpo marfim). O ouro avança com a rolagem e
   cada nó e cartão surge quando ele chega; os que já passaram ficam inteiros e claros. Abaixo de 1024 px nada muda. */
.pm__nos { display: none; }
@media (min-width: 1024px) {
  .pm { --pm-w: clamp(232px, 19vw, 292px); --pm-a: clamp(74px, 10.5svh, 112px); --pm-folga: 24px; --pm-ch: 226px; }
  .pm .pm__fone { display: none; }
  .pm .pm__palco, .pm--vivo .pm__palco { display: block; position: relative; width: min(100vw - 64px, 1480px); height: calc(2 * (var(--pm-folga) + var(--pm-ch))); min-height: 0; }
  .pm .pm__cab { margin-bottom: clamp(4px, 1.4svh, 18px); }

  /* a onda: faixa larga e cheia, o trilho claro por baixo e o ouro por cima */
  .pm .pm__onda { left: calc(50% - 50vw); width: 100vw; top: 0; height: 100%; max-width: none; z-index: 0; overflow: hidden; }
  .pm path.pm__trilho { stroke: rgba(200, 150, 47, 0.2); stroke-width: 14; stroke-dasharray: none; stroke-linecap: round; opacity: 1; }
  .pm path.pm__traco { stroke: #C8962F; stroke-width: 14; stroke-linecap: round; opacity: 1; }

  /* os nós: círculo marinho com o objeto da etapa, sem brilho; o anel da cor do fundo faz a faixa entrar no nó */
  .pm__nos { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .pm__no { position: absolute; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #0B2035;
    box-shadow: 0 0 0 5px #F1E5CC, 0 12px 20px -12px rgba(11, 32, 53, 0.55); }
  .pm__no img { width: 36px; height: 36px; object-fit: contain; }
  .pm__no--0 { left: 12.5%; top: calc(50% + var(--pm-a)); }
  .pm__no--1 { left: 37.5%; top: calc(50% - var(--pm-a)); }
  .pm__no--2 { left: 62.5%; top: calc(50% + var(--pm-a)); }
  .pm__no--3 { left: 87.5%; top: calc(50% - var(--pm-a)); }

  /* os cartões: centrados no nó, do lado de fora da curva */
  .pm .pm__palco .pm__m { position: absolute; z-index: 1; top: auto; bottom: auto; width: var(--pm-w); margin: 0 0 0 calc(var(--pm-w) / -2); transform: none; filter: none; }
  .pm .pm__palco .pm__m--0 { left: 12.5%; bottom: calc(50% + var(--pm-folga)); }
  .pm .pm__palco .pm__m--1 { left: 37.5%; top: calc(50% + var(--pm-folga)); }
  .pm .pm__palco .pm__m--2 { left: 62.5%; bottom: calc(50% + var(--pm-folga)); }
  .pm .pm__palco .pm__m--3 { left: 87.5%; top: calc(50% + var(--pm-folga)); }
  /* todas com a mesma sombra (sem a da vez mais funda nem borda que acende) e o conteúdo inteiro */
  .pm .pm__palco .pm__m.cartao-conex, .pm .pm__palco .pm__m.cartao-conex.ativo { box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.22), 0 1px 0 rgba(11, 32, 53, 0.05), 0 30px 56px -36px rgba(11, 32, 53, 0.6); }
  .pm--vivo .pm__palco .pm__m.cartao-conex > *, .pm--vivo .pm__palco .pm__m.cartao-conex .pm__topo > * { opacity: 1; }

  /* trilho de rolagem curto: o ouro começa a andar com a seção ainda entrando (v36pAlvo) e prende só meia tela */
  .pm--vivo div.pm__trilho { height: 150svh; }

  /* surgimento: o nó cresce do ponto da faixa; o cartão sai do lado do nó (sobe o de cima, desce o de baixo) */
  .anima .pm--vivo .pm__no { opacity: 0; scale: 0.4; transition: opacity 260ms linear, scale 620ms cubic-bezier(.16, 1, .3, 1); }
  .anima .pm--vivo .pm__no.v36-on { opacity: 1; scale: 1; }
  .anima .pm--vivo .pm__palco .pm__m { transition: opacity 520ms linear 120ms, translate 820ms cubic-bezier(.16, 1, .3, 1) 120ms; }
  .anima .pm--vivo .pm__palco .pm__m:not(.v36-on) { opacity: 0; translate: 0 18px; filter: none; }
  .anima .pm--vivo .pm__palco .pm__m--1:not(.v36-on), .anima .pm--vivo .pm__palco .pm__m--3:not(.v36-on) { translate: 0 -18px; }
  .anima .pm--vivo .pm__palco .pm__m.v36-on { opacity: 1; translate: 0 0; filter: none; }
}

/* zzzzzzzzzz-v36-quem.css */
/* ===================== v36 · frente quem (JM, 11/10): Quem é a Conex no celular, trocas ligadas à rolagem =====================
   Mesmo bloco .v35q; o JS (src/js/v31/v36-quem.js) escreve transform, opacity e clip-path a cada quadro a partir de um
   valor que persegue a rolagem. Aqui: desligar as transições e deslocamentos de classe do v35 (que eram disparadas por
   limiar), o trilho mais longo para cada cena ficar parada um trecho, os fios das linhas do time como peças que se
   desenham, e o enchimento dos traços do pé. Computador: nada (o .v35q some). */
@media (max-width: 899px) {
  .v35q.v36q--vivo .v35q__trilho { height: calc(100vh + 422svh); height: calc(100lvh + 422svh); /* v37: +70 telas/100 pelas sócias mais lentas */ }

  /* o JS manda: nada de transição nem de translate/scale de classe por baixo */
  .v35q.v36q--vivo :is(.v35q-cena, .v35q-k, .v35q-f, .v35q-wi, .v35q-fio, .v35q-elos__a, .v35q-elos__b, .v35q-p__foto img) {
    transition: none; translate: none; scale: none; }
  .v35q.v36q--vivo .v35q-cena { visibility: hidden; opacity: 0; transform-origin: 50% 55%; backface-visibility: hidden; }
  .v35q.v36q--vivo .v35q-k { opacity: 1; }
  .v35q.v36q--vivo .v35q-wi { will-change: transform; }
  .v35q.v36q--vivo .v35q-p__foto img { transform-origin: 50% 30%; }

  /* o que a Conex junta: a borda de cada linha vira um fio que se desenha da esquerda para a direita */
  .v35q.v36q--vivo .v35q-j__lista { position: relative; border-bottom: 0; }
  .v35q.v36q--vivo .v35q-j__lista li { position: relative; border-top: 0; }
  .v36q-fio { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(232, 206, 147, 0.42); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
  .v36q-fio--fim { top: auto; bottom: 0; }

  /* os traços do pé: trilho apagado, o dourado enche com a cena (--v36q-m de 0 a 1) */
  .v35q.v36q--vivo .v35q__marcas i { position: relative; overflow: hidden; background: rgba(233, 242, 248, 0.2); transition: none; }
  .v35q.v36q--vivo .v35q__marcas i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #D8AC52;
    transform: scaleX(var(--v36q-m, 0)); transform-origin: 0 50%; }
}
.v36q-fio { display: none; }
@media (max-width: 899px) { .v36q--vivo .v36q-fio { display: block; } }

/* zzzzzzzzzz-v36-res.css */
/* v36 res (JM, 11/10): quatro resultados no celular, os cartões ficam parados quando o dedo arrasta o carrossel:
   sem encolher no toque, sem o estado "foco" do desktop mudando o trilho */
@media (max-width: 1023px) {
  .rcs .rc, .rcs .rc:active { scale: none; transition: none; }
  .rcs .rcs--foco .rc, .rcs .rc.rc--on { flex-basis: auto; }
  .rcs .rc__tit { transition: none; }
}
/* a entrada (cartões subindo 60 px) acontecia justamente quando o dedo chegava neles rolando: era o "salto". No celular
   os cartões já estão no lugar; só aparecem por opacidade, sem se mover */
@media (max-width: 1023px) {
  .anima .rcs--espera .rc { opacity: 0; translate: none; }
  .anima .rcs--entra .rc { animation: v36-rc-aparece 420ms linear both; }
}
@keyframes v36-rc-aparece { from { opacity: 0; } to { opacity: 1; } }

/* zzzzzzzzzzz-v42-fundo.css */
/* v42 fundo único (JM, 12/10): o desenho dos elos alinhado pela página inteira (src/js/v31/v42-fundo.js dá --fundo-y a
   cada camada) e, nas emendas entre seções do mesmo tom sem onda (data-emenda-topo / data-emenda-pe), nada de esfumado
   nem de luz própria: o fundo passa de uma seção para a outra sem se notar. Nenhuma camada fica fixa na tela. */
.monograma { background-position: 50% var(--fundo-y, 0px) !important; background-attachment: scroll !important; }
.com-monograma.v32a-fundo-preso > .monograma::before { background-position: 50% var(--fundo-y, 0px) !important; }

/* esfumado das bordas (camada comum: as três faixas da máscara) */
[data-emenda-topo] > .monograma { --v32a-mt: linear-gradient(#000 0 0); }
[data-emenda-pe] > .monograma { --v32a-mb: linear-gradient(#000 0 0); }
/* palco preso com a tela de elos no ::before (quatro fases, contato) */
.v32a-fundo-preso[data-emenda-topo] { --v32a-mt: linear-gradient(#000 0 0); }
.v32a-fundo-preso[data-emenda-pe] > .monograma::before {
  -webkit-mask-image: var(--v32a-mt), linear-gradient(#000 0 0), linear-gradient(#000 0 0) !important;
  mask-image: var(--v32a-mt), linear-gradient(#000 0 0), linear-gradient(#000 0 0) !important; }
/* quatro fases: a luz do palco sai quando a seção emenda com a de baixo (Quem é a Conex) */
.cf2[data-emenda-pe] .cf2__palco { background: none !important; }

/* Quem é a Conex (palco preso): sem a luz do meio, sem o véu marinho do topo e sem o esfumado de cima; o de baixo (a onda
   que sobe para o marfim) fica */
.qx[data-emenda-topo] .qx__palco { background: #0B2035 !important; }
.qx[data-emenda-topo] .qx__palco::before { display: none !important; }
.qx[data-emenda-topo] .qx__palco > .monograma {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px)) !important;
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--onda-h) - 120px), transparent calc(100% - var(--onda-h) - 24px)) !important; }

/* topo do ERP: a folha marfim do fim do palco emenda com a seção marfim de baixo; os elos dela iam esmaecendo ~200 px
   antes do pé (o trecho sem ícones) e o grão dava outra textura */
@media (min-width: 900px) {
  .ex[data-emenda-pe] .monograma--marfim { -webkit-mask-image: none !important; mask-image: none !important; }
  .ex[data-emenda-pe] .ex__grao--marfim { display: none !important; }
}

/* Processos (JM, 12/10: "tire o ícone divisor e diminua o espaçamento da primeira e da segunda seção"): sem o selo, o
   respiro entre "Cada processo" e "Como o mapeamento acontece" encolhe (o pé da primeira e o topo do palco da segunda) */
.pp:has(+ .pm) { padding-top: clamp(56px, 5vw, 76px); padding-bottom: clamp(24px, 2.5vw, 40px); }
/* o palco da segunda fica centrado enquanto preso; ela sobe 100 px por baixo do pé da primeira (o fundo é o mesmo e está
   alinhado, então a sobreposição não aparece; a primeira fica por cima, com as sombras das folhas) */
@media (min-width: 900px) {
  .pp:has(+ .pm) { position: relative; z-index: 2; }
  .pp + .pm { margin-top: -100px; }
}

/* o rodapé tinha um marinho mais escuro (#061421): com o fundo único, ele fica no mesmo marinho das seções de cima */
.rodape.escuro[data-emenda-topo] { background-color: #0B2035 !important; }

/* zzzzzzzzzzzz-v44-mac.css */
/* v44 mac (JM, 12/10): MacBook Pro do PSD MD1167 (o aparelho já olha para a esquerda, nada espelhado) e a tela nova,
   com poucos blocos e letra grande. 1 cqw = 1 % da largura da tela; a tela tem 100 × 64,95 cqw (2000 × 1299). */
.v44-mac .v39-mac__tela { background: #0B2035; }
.v44t { position: absolute; inset: 0; display: grid; grid-template-rows: 6.2cqw minmax(0, 1fr); font-family: var(--f-texto); color: #F7F1E3;
  background: radial-gradient(70% 80% at 85% 0%, rgba(47, 110, 156, 0.32), transparent 70%), linear-gradient(165deg, #0F2A45 0%, #0A1D31 85%);
  font-variant-numeric: tabular-nums; line-height: 1.1; -webkit-font-smoothing: antialiased; }
:where(.v44t) :is(p, ul) { margin: 0; padding: 0; list-style: none; }
.v44t svg { display: block; }
/* barra de cima (o notch fica no meio dela, sem nada embaixo) */
.v44t__barra { display: flex; align-items: center; justify-content: space-between; padding: 0 4.2cqw; font-size: 2.1cqw; color: rgba(247, 241, 227, 0.72); }
.v44t__barra b { display: flex; align-items: center; gap: 1cqw; font-weight: 700; color: #F7F1E3; }
.v44t__barra img { width: 2.6cqw; height: 2.6cqw; object-fit: contain; }
.v44t__grade { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 2.2cqw;
  padding: 0.6cqw 3.6cqw 3.6cqw; min-height: 0; }
.v44t__grade > section { min-width: 0; min-height: 0; border-radius: 2cqw; background: rgba(247, 241, 227, 0.065); box-shadow: inset 0 0 0 0.14cqw rgba(247, 241, 227, 0.1); padding: 2.8cqw 3cqw; }
.v44t__rot { font-size: 2.1cqw; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: #BCCBD8; }
/* saldo + curva (coluna da esquerda, duas linhas) */
.v44t__saldo { grid-row: 1 / 3; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 1.1cqw; }
.v44t__grande { display: flex; align-items: baseline; gap: 1cqw; margin-top: 0.6cqw; font-size: 7.2cqw; font-weight: 700; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
.v44t__grande small, .v44t__sobra small { font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: #C9D8E4; }
.v44t__ok { display: flex; align-items: center; gap: 0.8cqw; font-size: 2.2cqw; font-weight: 600; color: #E8CE93; }
.v44t__ok svg { width: 2.3cqw; height: 2.3cqw; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v44t__graf { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1cqw; min-height: 0; margin-top: 1.4cqw; }
.v44t__graf svg { width: 100%; height: 100%; overflow: visible; }
.v44t__guia { fill: none; stroke: rgba(247, 241, 227, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v44t__linha { fill: none; stroke: #E2BC6A; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.v44t__ponto { position: absolute; right: -0.9cqw; top: calc((100% - 3.4cqw) * 0.107 - 0.9cqw); width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #F1DDA8; box-shadow: 0 0 0 0.7cqw rgba(216, 172, 82, 0.25); }
.v44t__meses { display: flex; justify-content: space-between; font-size: 1.9cqw; color: #A9BCCB; }
/* sobrou no mês */
.v44t__mes { display: grid; gap: 1cqw; align-content: start; }
.v44t__sobra { display: flex; align-items: baseline; gap: 0.8cqw; font-size: 5.6cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #E8CE93; }
.v44t__sobra small { color: #E8CE93; }
.v44t__res { display: flex; flex-wrap: wrap; gap: 0.4cqw 2.2cqw; font-size: 1.95cqw; color: #A9BCCB; }
.v44t__res b { font-weight: 650; color: #F7F1E3; }
/* contas a aprovar */
.v44t__contas { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 0.6cqw; }
.v44t__sub { display: flex; align-items: center; gap: 1.2cqw; font-size: 2.5cqw; font-weight: 650; }
.v44t__sub em { display: grid; place-items: center; min-width: 3cqw; height: 3cqw; border-radius: 0.9cqw; background: rgba(216, 172, 82, 0.2); color: #E8CE93; font-style: normal; font-size: 1.8cqw; font-weight: 700; }
.v44t__contas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.3cqw; padding: 1cqw 0; border-bottom: 0.14cqw solid rgba(247, 241, 227, 0.1); font-size: 2.1cqw; }
.v44t__contas li b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v44t__contas li span { font-weight: 650; white-space: nowrap; }
.v44t__contas li i { display: grid; place-items: center; width: 2.7cqw; height: 2.7cqw; border-radius: 50%; background: #D8AC52; color: #0B2035; }
.v44t__contas li i svg { width: 1.8cqw; height: 1.8cqw; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.v44t__bt { align-self: end; display: grid; place-items: center; height: 5cqw; border-radius: 1.2cqw; background: #D8AC52; color: #0B2035; font-size: 2.3cqw; font-weight: 750; }
/* entrada: a curva se desenha uma vez quando o Mac chega */
.anima .hpl .v44t__linha { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anima .hpl--entrou .v44t__linha { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms cubic-bezier(.22, 1, .36, 1) 1100ms; }
@media (prefers-reduced-motion: reduce) { .anima .hpl .v44t__linha { stroke-dashoffset: 0 !important; transition: none !important; } }

/* sombra no chão: macia, marinho bem escuro (não preto), sob a base, como se o Mac flutuasse sobre a luz do hero */
@media (min-width: 900px) {
  .v44-mac .v36-mac__sombra { filter: blur(26px); translate: 0 5%; opacity: 0.85; }
  .v44-mac .v36-mac__sombra i { background: rgba(2, 9, 18, 0.62); clip-path: polygon(3% 75%, 66% 99%, 88% 79%, 31% 58%); }
}

/* selo "Feito por MXC Digital" no rodapé (skill rodape-rastreavel): discreto, clareia no hover (sem glow) */
.rodape__mxc { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: rgba(233, 242, 248, 0.6); font-size: 0.8125rem;
  text-decoration: none; opacity: 0.62; transition: opacity 260ms ease, color 260ms ease; }
.rodape__mxc img { display: block; width: auto; height: 20px; } .rodape__mxc:focus-visible { opacity: 1; color: #E9F2F8; }
@media (hover: hover) and (pointer: fine){.rodape__mxc:hover{ opacity: 1; color: #E9F2F8; }}
.rodape__mxc:focus-visible { outline: 2px solid #E8CE93; outline-offset: 4px; border-radius: 4px; }
.rodape__base:has(.rodape__mxc) { align-items: center; }

/* zzzzzzzzzzzzz-v45-mobile.css */
/* v45 (JM, 12/10, iPhone): três consertos do celular */

/* 1. cinco frentes: a sombra dos cartões era cortada pelo pé do carrossel (rolagem lateral corta o que passa da caixa);
      o carrossel ganha 40 px a mais embaixo e devolve com margem negativa, então nada muda de lugar */
@media (max-width: 1023px) {
  .leque .leque__palco { padding-bottom: 62px; margin-bottom: -40px; }
}

/* 2. quatro resultados: uma linha marinho aparecia na borda direita do cartão (a foto ficava 1 px curta e o fundo do
      cartão vazava na curva). A foto passa 2 px além de cada borda e o recorte arredondado é feito por máscara, que o
      Safari respeita sem deixar fio */
@media (max-width: 1023px) {
  .rcs .rc { -webkit-mask-image: linear-gradient(#000 0 0); mask-image: linear-gradient(#000 0 0); }
  .rcs .rc__foto { left: -2px; top: -2px; bottom: auto; width: calc(100% + 4px); max-width: none; height: calc(100% + 4px); }
}

/* 3. cartão aberto (cinco frentes e resultados): ao rolar, o cartão subia e saía do véu escuro. Agora a camada do modal
      não rola nem quica (só o painel rola por dentro, se precisar), e a página de trás fica travada (v45-modal.js) */
.v32a-m { overflow: hidden; overscroll-behavior: none; }
.v32a-m__palco { min-height: 100%; height: 100%; }
.v32a-m__painel { overscroll-behavior: none; max-height: calc(100% - 32px); }
html.v45-trava { overflow: hidden; overscroll-behavior: none; }
html.v45-trava body { overscroll-behavior: none; }

/* 4. Quem é a Conex no celular (JM, 12/10): o manifesto continua ligado à rolagem; as sócias, o time e o "nome e rosto"
      aparecem de cara quando a vez deles chega, inteiros, com uma entrada curta (sobe, assenta e acende), sem montar
      peça por peça. A saída é rápida, para a próxima não esperar. (src/js/v31/v36-quem.js marca a cena da vez) */
@media (max-width: 899px) {
  .v35q.v36q--vivo.v45q .v35q-cena.v45q-c { opacity: 0; visibility: hidden; transform: translate3d(0, 24px, 0) scale(0.965);
    transition: opacity 220ms linear, transform 260ms cubic-bezier(.5, 0, .75, 0), visibility 0s linear 260ms; will-change: auto; }
  .v35q.v36q--vivo.v45q .v35q-cena.v45q-c.v45q-on { opacity: 1; visibility: visible; transform: none;
    transition: opacity 420ms cubic-bezier(.22, 1, .36, 1) 60ms, transform 760ms cubic-bezier(.16, 1, .3, 1) 60ms, visibility 0s; }
  /* sócia: a foto já vem inteira e assenta (leve aproximação); cargo, nome e texto quase juntos */
  .v35q.v36q--vivo.v45q .v45q-c .v35q-p__foto img { clip-path: none; transform: scale(1.08); transition: transform 0s linear 260ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-p__foto img { transform: none; transition: transform 1300ms cubic-bezier(.16, 1, .3, 1) 60ms; }
  .v35q.v36q--vivo.v45q .v45q-c :is(.v35q-k, .v35q-j__lista li > b, .v35q-j__lista li > span) { opacity: 0; transform: translate3d(0, 12px, 0);
    transition: opacity 0s linear 260ms, transform 0s linear 260ms; }
  .v35q.v36q--vivo.v45q .v45q-on :is(.v35q-k, .v35q-j__lista li > b, .v35q-j__lista li > span) { opacity: 1; transform: none;
    transition: opacity 420ms linear var(--v45d, 160ms), transform 700ms cubic-bezier(.16, 1, .3, 1) var(--v45d, 160ms); }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-k:nth-child(2) { --v45d: 220ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-k:nth-child(3) { --v45d: 280ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-k:nth-child(4) { --v45d: 340ms; }
  /* o time: as cinco linhas e os fios chegam juntos, em cascata curta */
  .v35q.v36q--vivo.v45q .v45q-c .v36q-fio { transform: scaleX(0); transition: transform 0s linear 260ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v36q-fio { transform: none; transition: transform 640ms cubic-bezier(.65, 0, .35, 1) var(--v45d, 160ms); }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-j__lista li:nth-child(1) { --v45d: 180ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-j__lista li:nth-child(2) { --v45d: 230ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-j__lista li:nth-child(3) { --v45d: 280ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-j__lista li:nth-child(4) { --v45d: 330ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-j__lista li:nth-child(5) { --v45d: 380ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v36q-fio--fim { --v45d: 420ms; }
  /* nome e rosto: os elos se encaixam, a frase, os números (já no valor final) e o WhatsApp */
  .v35q.v36q--vivo.v45q .v45q-c :is(.v35q-elos__a, .v35q-elos__b) { opacity: 0; transition: transform 0s linear 260ms, opacity 0s linear 260ms; }
  .v35q.v36q--vivo.v45q .v45q-c .v35q-elos__a { transform: translateX(-120px); }
  .v35q.v36q--vivo.v45q .v45q-c .v35q-elos__b { transform: translateX(120px); }
  .v35q.v36q--vivo.v45q .v45q-on :is(.v35q-elos__a, .v35q-elos__b) { opacity: 1; transform: none;
    transition: transform 820ms cubic-bezier(.22, 1, .36, 1) 80ms, opacity 360ms linear 80ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-z__fatos li:nth-child(1) { --v45d: 260ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-z__fatos li:nth-child(2) { --v45d: 310ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-z__fatos li:nth-child(3) { --v45d: 360ms; }
  .v35q.v36q--vivo.v45q .v45q-on .v35q-z__cta { --v45d: 420ms; }
  /* os traços do pé enchem com a cena da vez */
  .v35q.v36q--vivo.v45q .v35q__marcas i::after { transition: transform 420ms cubic-bezier(.22, 1, .36, 1); }
}

/* 5. link "avaliação gratuita" (cartão final de todas as páginas, hero, seções): a prancheta 3D real (qz4-tarefas,
      Blender) no lugar do ícone de traço; objeto solto, sem caixinha (padrão aprovado do JM). No hover/toque ela só
      inclina um pouco */
.link-aval .link-aval__ic { width: 40px; height: 40px; border-radius: 0; background: none !important; box-shadow: none !important; overflow: visible; }
.link-aval .link-aval__ic img { display: block; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(4, 13, 24, 0.28));
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1); } .link-aval:focus-visible .link-aval__ic, .link-aval:active .link-aval__ic { rotate: 0deg; }
@media (hover: hover) and (pointer: fine){.link-aval:hover .link-aval__ic{ rotate: 0deg; }} .link-aval:focus-visible .link-aval__ic img, .link-aval:active .link-aval__ic img { transform: rotate(-8deg) translateY(-2px); }
@media (hover: hover) and (pointer: fine){.link-aval:hover .link-aval__ic img{ transform: rotate(-8deg) translateY(-2px); }}
.qz-ob { will-change: transform, opacity; } /* v45: o caminho na roda é só transform */
.qz-passo:not(.on) .qz__realce { opacity: 0 !important; transition: opacity 160ms linear !important; } /* v45: o realce da resposta marcada sai junto com a pergunta */

/* "Preferências de cookies" no rodapé (botão com cara de link do rodapé) */
.rodape__cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.rodape__cookies:focus-visible { outline: 2px solid #E8CE93; outline-offset: 3px; border-radius: 3px; }

/* zzzzzzzzzzzzzz-v46-seo.css */
/* v46 · páginas de busca (src/componentes/v46-seo.mjs): topo marinho com os elos e o cartão da Conex ao lado, corpo de
   leitura no marfim, tabela, lista numerada, grade de frentes, chamada e as sócias. Mesmas fontes, cores e cartão do site. */

/* ---------- topo ---------- */
.ps { position: relative; isolation: isolate; overflow: hidden; color: #F7F3EA;
  background: radial-gradient(60% 70% at 85% 20%, rgba(46, 111, 163, 0.26), transparent 70%), linear-gradient(170deg, #0E2742 0%, #0B2035 60%, #0A1D31 100%);
  padding: calc(var(--altura-topo) + clamp(40px, 6vw, 88px)) 0 clamp(72px, 9vw, 130px); }
.ps__grade { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ps__grade--so { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.ps__migalha { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; font-size: 0.875rem; color: #A9BCCB; }
.ps__migalha a { color: #C9D8E4; text-decoration: none; }
@media (hover: hover) and (pointer: fine){.ps__migalha a:hover{ color: #FFFFFF; }}
.ps__migalha [aria-current] { color: #E8CE93; }
.ps__rot { margin: 0 0 14px; font: 600 0.75rem/1 var(--f-mono, ui-monospace, monospace); letter-spacing: 0.16em; text-transform: uppercase; color: #E8CE93; }
.ps__titulo { margin: 0; font: 400 clamp(2.3rem, 1.4rem + 3.4vw, 4.1rem)/1.04 var(--f-titulo); letter-spacing: -0.022em; color: #FFFFFF; text-wrap: balance; }
.ps__apoio { margin: 22px 0 0; max-width: 40rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: #D2DEEA; }
.ps__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.ps__lado { position: relative; }

/* quem assina */
.ps-autor { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; }
.ps-autor img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(232, 206, 147, 0.6); }
.ps-autor > span { display: grid; gap: 2px; font-size: 0.875rem; color: #A9BCCB; }
.ps-autor b { font-size: 1rem; font-weight: 650; color: #FFFFFF; }

/* o cartão da Conex do topo (classes do POP de Processos: .cartao-conex) */
.ps-cartao { border-radius: 26px; overflow: hidden; background: #FBF6EC; color: #0B2035; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.75); }
.ps-cartao__t { margin: 12px 0 0; font: 400 clamp(1.7rem, 1.3rem + 1.1vw, 2.3rem)/1.05 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; }
.ps-cartao__lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ps-cartao__lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.ps-cartao__lista li > span:last-child { display: grid; gap: 2px; }
.ps-cartao__lista b { font-size: 1rem; font-weight: 650; color: #0B2035; }
.ps-cartao__lista span span { font-size: 0.9375rem; line-height: 1.4; color: #4A5866; }
.ps-cartao__ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #D8AC52; color: #0B2035; }
.ps-cartao__ok svg { width: 15px; height: 15px; }
.ps-cartao__pe { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid rgba(11, 32, 53, 0.12); font-size: 0.9375rem; line-height: 1.45; color: #4A5866; }

/* ---------- corpo de leitura ---------- */
.ps-corpo__col { max-width: 46rem; }
.ps-corpo__rot { margin: 0 0 8px; font: 600 0.75rem/1 var(--f-mono, ui-monospace, monospace); letter-spacing: 0.16em; text-transform: uppercase; color: #8A6A2A; }
.ps-bloco + .ps-bloco { margin-top: clamp(44px, 5vw, 64px); }
.ps-bloco h2 { margin: 0 0 16px; font: 400 clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem)/1.1 var(--f-titulo); letter-spacing: -0.018em; color: #0B2035; text-wrap: balance; }
.ps-bloco p { margin: 0 0 16px; font-size: var(--t-corpo); line-height: 1.7; color: #2E3A46; }
.ps-bloco p b { color: #0B2035; }
.ps-bloco--destaque { padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(11, 32, 53, 0.06), 0 24px 50px -36px rgba(11, 32, 53, 0.4); }
.ps-nota { font-size: 0.9375rem !important; color: #55626E !important; }

/* tabela */
.ps-tab__caixa { margin: 22px 0; overflow-x: auto; border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(11, 32, 53, 0.06), 0 24px 50px -36px rgba(11, 32, 53, 0.4); }
.ps-tab { width: 100%; border-collapse: collapse; font-size: 0.9875rem; color: #2E3A46; }
.ps-tab caption { padding: 16px 20px 0; text-align: left; font-size: 0.8125rem; color: #6B7884; }
.ps-tab th, .ps-tab td { padding: 12px 20px; border-bottom: 1px solid rgba(11, 32, 53, 0.08); text-align: left; font-weight: 400; }
.ps-tab thead th { font: 600 0.75rem/1.2 var(--f-mono, ui-monospace, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: #6B7884; }
.ps-tab td:last-child, .ps-tab thead th:last-child { text-align: right; white-space: nowrap; }
.ps-tab tbody th { color: #0B2035; }
.ps-tab tfoot th, .ps-tab tfoot td { border-bottom: 0; background: #0B2035; color: #FFFFFF; font-weight: 700; }
.ps-tab tfoot td { color: #E8CE93; font-size: 1.125rem; }

/* lista numerada */
.ps-lista { display: grid; gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.ps-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.07); }
.ps-bloco--destaque .ps-lista li { background: #FBF6EC; }
.ps-lista__n { font: 600 0.875rem/1.6 var(--f-mono, ui-monospace, monospace); color: #A07A2E; }
.ps-lista li > span:last-child { display: grid; gap: 3px; }
.ps-lista b { font-size: 1.0625rem; font-weight: 650; color: #0B2035; }
.ps-lista span span { font-size: 0.9875rem; line-height: 1.5; color: #4A5866; }

/* grade das frentes */
.ps-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; margin: 20px 0; padding: 0; list-style: none; }
.ps-grade li { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 18px; background: #0B2035; color: #D2DEEA; }
.ps-grade b { font: 400 1.375rem/1.15 var(--f-titulo); color: #FFFFFF; }
.ps-grade span { font-size: 0.9375rem; line-height: 1.5; }
.ps-grade__r { display: grid; gap: 2px; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(232, 206, 147, 0.22); color: #E8CE93 !important; }
.ps-grade__r i { font: 600 0.6875rem/1.2 var(--f-mono, ui-monospace, monospace); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: #A9BCCB; }

/* chamada no meio do texto */
.ps-chamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 26px 0; padding: 24px 26px; border-radius: 22px;
  background: radial-gradient(80% 120% at 100% 0%, rgba(216, 172, 82, 0.18), transparent 60%), linear-gradient(165deg, #133150, #0B2035); }
.ps-chamada p { display: grid; gap: 4px; margin: 0 !important; max-width: 26rem; color: #C9D8E4 !important; font-size: 0.9875rem !important; line-height: 1.5 !important; }
.ps-chamada b { font: 400 1.375rem/1.2 var(--f-titulo); color: #FFFFFF !important; }

/* link com seta */
.ps-link { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; font-weight: 650; color: #0B2035; text-decoration: none;
  background: linear-gradient(#D8AC52, #D8AC52) 0 100% / 100% 2px no-repeat; padding-bottom: 2px; }
.ps-link span { transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) { .ps-link:hover span { transform: translateX(4px); } }

/* ---------- /sobre: as sócias ---------- */
.ps-socias__t { margin: 0 0 clamp(24px, 3vw, 40px); font: 400 var(--t-h2)/1.05 var(--f-titulo); letter-spacing: -0.02em; color: #0B2035; }
.ps-socias__lista { display: grid; gap: clamp(20px, 3vw, 32px); }
.ps-socia { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3.5vw, 48px); align-items: center; padding: clamp(14px, 1.6vw, 20px);
  border-radius: 28px; background: #0B2035; color: #D2DEEA; scroll-margin-top: calc(var(--altura-topo) + 20px); }
.ps-socia:nth-child(2) .ps-socia__foto { order: 2; }
.ps-socia__foto { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; }
.ps-socia__foto img { width: 100%; height: 100%; object-fit: cover; }
.ps-socia__txt { padding: clamp(8px, 2vw, 28px); }
.ps-socia__papel { margin: 0 0 10px; font: 600 0.75rem/1.3 var(--f-mono, ui-monospace, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.ps-socia h3 { margin: 0 0 16px; font: 400 clamp(2rem, 1.4rem + 1.8vw, 2.9rem)/1.02 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; }
.ps-socia__txt > p:not(.ps-socia__papel) { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.65; }
.ps-socia__cit { margin: 18px 0 0; padding: 0 0 0 18px; border-left: 2px solid #D8AC52; }
.ps-socia__cit p { margin: 0; font: italic 400 1.25rem/1.45 var(--f-titulo); color: #F1DDA8; }

/* ---------- celular ---------- */
@media (max-width: 899px) {
  .ps { padding-top: calc(var(--altura-topo) + 32px); }
  .ps__grade { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ps__acoes { flex-direction: column; align-items: flex-start; }
  .ps-socia { grid-template-columns: minmax(0, 1fr); }
  .ps-socia:nth-child(2) .ps-socia__foto { order: 0; }
  .ps-socia__foto { aspect-ratio: 1 / 1; }
  .ps-socia__foto img { object-position: 50% 22%; }
  .ps-tab th, .ps-tab td { padding: 11px 14px; }
  .ps-chamada { padding: 20px; }
}

/* zzzzzzzzzzzzzzz-v47.css */
/* ---------- v47 sócias · Quem é a Conex no computador (JM, 13/10: "deixa uma animação mais cadenciada e lenta para
   não passar tão rápido nos cards das sócias") ----------
   Cada sócia passa de ~37svh para 110svh de rolagem (cortes no site.js). A entrada do cartão fica em tempos: a foto sobe
   primeiro, depois o papel, o nome letra por letra e, com a rolagem, o texto acende palavra por palavra. A saída é
   curta, para as duas sócias nunca aparecerem juntas. Celular: nada muda (lá é o .v35q). */
@media (min-width: 900px) {
  .anima .qx.qx--vivo.v36m { height: calc(100svh + 458.86svh); }

  /* o cartão que sai some rápido; o que entra espera ele sair e sobe devagar */
  .qx--vivo .qx-pessoa { translate: -50% 40px; transition: opacity 320ms linear, translate 500ms cubic-bezier(.22, 1, .36, 1); }
  .qx--vivo[data-cena="2"] [data-qx-cena="2"], .qx--vivo[data-cena="3"] [data-qx-cena="3"] {
    translate: -50% 0; transition: opacity 900ms linear 320ms, translate 1400ms cubic-bezier(.16, 1, .3, 1) 320ms; }

  .qx--vivo .qx-pessoa__foto { opacity: 0; translate: 0 32px; transition: opacity 300ms linear, translate 500ms cubic-bezier(.22, 1, .36, 1); }
  .qx--vivo[data-cena="2"] [data-qx-cena="2"] .qx-pessoa__foto, .qx--vivo[data-cena="3"] [data-qx-cena="3"] .qx-pessoa__foto {
    opacity: 1; translate: 0 0; transition: opacity 1000ms linear 380ms, translate 1500ms cubic-bezier(.16, 1, .3, 1) 380ms; }

  .qx--vivo .qx-pessoa__papel { opacity: 0; transition: opacity 300ms linear; }
  .qx--vivo[data-cena="2"] [data-qx-cena="2"] .qx-pessoa__papel, .qx--vivo[data-cena="3"] [data-qx-cena="3"] .qx-pessoa__papel {
    opacity: 1; transition: opacity 800ms linear 760ms; }

  /* o nome sobe letra por letra, mais espaçado */
  .qx--vivo .qx-pessoa .qx-l { transition: translate 300ms cubic-bezier(.22, 1, .36, 1); transition-delay: 0ms; }
  .qx--vivo[data-cena="2"] [data-qx-cena="2"] .qx-l, .qx--vivo[data-cena="3"] [data-qx-cena="3"] .qx-l {
    transition: translate 1100ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(900ms + var(--i, 0) * 55ms); }

  /* cada palavra do texto acende mais devagar */
  .qx-pessoa .qx-pal { transition: opacity 700ms linear, color 700ms linear; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .qx--vivo .qx-pessoa__foto, .qx--vivo .qx-pessoa__papel { opacity: 1; translate: none; }
}

/* ---------- v47 selo · rodapé (JM, 13/10: "bota nossa logo feita por MXC Digital no centro do footer e com um tamanho
   um pouco maior"): o selo sai do canto e ganha uma linha própria, centralizada, abaixo do © e dos links; a logo vai de
   20 para 28 px de altura (24 no celular). O link e o UTM continuam os mesmos. ---------- */
.rodape__selo { order: 10; flex-basis: 100%; display: flex; justify-content: center; margin-top: 10px; padding-top: 14px;
  border-top: 1px solid var(--fio-escuro); }
.rodape__selo .rodape__mxc { gap: 12px; font-size: 0.875rem; }
.rodape__selo .rodape__mxc img { height: 28px; }
@media (max-width: 899px) {
  .rodape__selo .rodape__mxc { gap: 10px; }
  .rodape__selo .rodape__mxc img { height: 24px; }
}

/* ---------- v47 páginas de busca · as quatro fases do "Como funciona" em duas colunas (quatro cartões numa grade de três
   deixavam um sozinho embaixo) ---------- */
@media (min-width: 700px) { .ps-grade.v47-fases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v47-fases__n { font: 600 0.6875rem/1.2 var(--f-mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }

/* ---------- v47 celular · Três frentes (JM, 13/10: "do hero para a segunda seção dá uma bugadinha na organização dos
   cards"). Os cartões entravam com translateX(36px) dentro do carrossel com scroll-snap: o navegador reencaixava a
   rolagem lateral a cada quadro (36 → 0 px, de pixel em pixel) enquanto cada cartão fazia a própria translação, e o 2º
   cartão (60 ms) saía antes do 1º (120 ms, herdado do desktop): ele andava para a esquerda e voltava. Agora sobem 18 px
   na vertical (não mexe no encaixe lateral), na ordem; e o título acende sem desfoque (filter pesa no iPhone). */
@media (max-width: 899px) {
  .leque.lq-e0 .leque__card:nth-child(n) { opacity: 0; transform: translate3d(0, 18px, 0); }
  .leque.lq-voa .leque__card { transition: transform 640ms cubic-bezier(.16, 1, .3, 1), opacity 360ms linear; }
  .leque.lq-voa .leque__card:nth-child(1) { transition-delay: 0ms; }
  .leque.lq-voa .leque__card:nth-child(2) { transition-delay: 90ms; }
  .leque.lq-voa .leque__card:nth-child(n + 3) { transition-delay: 180ms; }
  .anima .servicos:not(.lq-visto) .lq-pal { filter: none; }
  .lq-pal { transition: opacity 380ms linear, translate 560ms cubic-bezier(.16, 1, .3, 1), color 520ms linear; }
}

/* ---------- v47 emendas sem onda (JM, 13/10: "na transição das quatro fases para a seção seguinte está cortando os
   ícones da logo no fundo"). A v42 tirava o esfumado nas emendas com [data-emenda-*] > .monograma (0,2,0), mas a regra
   das três faixas é .com-monograma:not(.qx__palco) > .monograma (0,3,0) e ganhava: o pé das quatro fases esmaecia 20 px
   e cortava os elos da emenda. No celular, o Quem é tem a camada dentro do .v35q, que a regra nem alcançava. ---------- */
.com-monograma:not(.qx__palco)[data-emenda-topo] > .monograma { --v32a-mt: linear-gradient(#000 0 0); }
.com-monograma:not(.qx__palco)[data-emenda-pe] > .monograma { --v32a-mb: linear-gradient(#000 0 0); }
.qx[data-emenda-topo] .v35q > .monograma { --v32a-mt: linear-gradient(#000 0 0); }

/* ---------- v47 celular · Quem é: trilho mais curto (o roteiro do v36-quem.js termina em 3,42 telas, era 4,10) ---------- */
@media (max-width: 899px) {
  .v35q.v36q--vivo .v35q__trilho { height: calc(100vh + 306svh); height: calc(100lvh + 306svh); } /* v47b: fim em 2,94 telas */
}

/* ---------- v47 · cartão do topo de BPO, ERP e Processos: entra em 0,7 s sem espera (era 1,2 s depois de 0,26 s) e de
   24 px (era 60 px); as etapas acendem logo em seguida (v32-f-processos.js) ---------- */
.anima .v32f-cena { animation-duration: 700ms; animation-delay: 0ms; }
@keyframes v47-entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.anima .v32f-cena { animation-name: v47-entra; transform: translateY(24px); }
.v32f-tl__fluxo :is(.v32f-tl__quem, .v32f-tl__prazo) { transition-delay: calc(var(--d, 0ms) + 60ms); }

/* ---------- v47 · links internos para as páginas de busca (dados/v46-publicar.mjs › linkavel) ---------- */
/* "Para ler antes de decidir": cartões marinho com objeto 3D, os mesmos do "Também cuidamos de" (.tb), ver v47-seo.css */

/* respostas das Dúvidas: o texto de busca do mesmo assunto */
.faq__r-leia { display: block; width: fit-content; margin-top: 14px; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-color: rgba(180, 136, 47, 0.7); text-underline-offset: 4px; }
.faq.tom-marfim .faq__r-leia, .tom-marfim .faq__r-leia { color: #0B2035; }

/* setores da página de BPO e comparativo da home */
.bs-set__ir, .cp__leia { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-weight: 600; font-size: 0.9375rem; color: inherit; text-decoration: underline; text-decoration-color: rgba(180, 136, 47, 0.7); text-underline-offset: 4px; }
.cp__leia { margin-top: 12px; color: #0B2035; }

/* rodapé com a coluna Conteúdos */
@media (min-width: 900px) { .rodape__grade:has(> nav[aria-label="Conteúdos"]) { grid-template-columns: 1.2fr 0.8fr 1.1fr 1fr; } }

/* ---------- v47 · modal no celular (JM, 13/10: "ao clicar em ver detalhes e fechar, sobe, mexe a tela") ----------
   Com o modal aberto, o html ganhava overflow: hidden (v45). No Safari do iPhone isso mexe nas barras do navegador e
   na altura da tela, e ao soltar a página pulava (mais a correção de posição 0,45 s depois). No toque, quem segura a
   rolagem é o bloqueio do gesto do v45-modal.js (touchmove barrado fora do modal): o overflow sai. No mouse, fica. */
@media (hover: none) and (pointer: coarse) {
  html.v45-trava { overflow: visible; }
}

/* ---------- v47 · BPO › O que é: as seis frentes abertas numa grade (sem accordion); a da vez acende ---------- */
@media (min-width: 1024px) {
  .v33d-fr.v47-fr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; box-shadow: none; }
  .v47-fr__i { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px 18px; border-radius: 18px;
    background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.1); transition: background-color 300ms linear, box-shadow 300ms linear; }
  .v47-fr__i::after { display: none; }
  .v47-fr__i .bv__ic { flex: none; transition: background-color 300ms, color 300ms, box-shadow 300ms; }
  .v47-fr__n { margin: 2px 0 4px; font: 600 1.02rem/1.25 var(--f-texto); color: #0B2035; }
  .v47-fr__i p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: #3B4753; }
  .v47-fr__i.on { background: #0B2035; box-shadow: 0 18px 30px -22px rgba(11, 32, 53, 0.8); }
  .v47-fr__i.on .bv__ic { background: #E8CE93; color: #0B2035; box-shadow: none; }
  .v47-fr__i.on .v47-fr__n { color: #FFFFFF; }
  .v47-fr__i.on p { color: #C9D8E4; }
}

/* ---------- v47 · ERP › Os módulos conversam: os elos ficam parados enquanto o palco está preso (v47-seo.js) ---------- */
@media (min-width: 900px) {
  .ee.com-monograma > .monograma { background-position: 50% calc(var(--fundo-y, 0px) + var(--v47-dy, 0px)) !important; }
}

/* ---------- v47 celular: o cartão do topo das internas e das páginas de busca aparece completo, de uma vez ---------- */
@media (max-width: 1023px) {
  .anima .v32f-cena { animation: none !important; opacity: 1 !important; transform: none !important; translate: none !important; }
  .v32f-tl, .v32f-tl * { transition: none !important; animation: none !important; }
}
/* "Para ler" e "Também cuidamos de" no toque: sem o preenchimento que subia ao encostar o dedo (:active) */
@media (hover: none), (pointer: coarse) {
  .tb__card::before { display: none !important; }
  .tb__card .bt__trilho { translate: none !important; }
}
@media (max-width: 1023px) { .v32f-tl *::before, .v32f-tl *::after { transition: none !important; animation: none !important; } }

/* v48 (JM, 13/10, print do iPhone): ao tocar numa resposta o foco vai para o título da próxima pergunta (leitor de tela)
   e o Safari desenhava a moldura de foco em volta dele. O título não é clicável: foco sem moldura, em qualquer aparelho */
.qz .qz__pergunta:focus, .qz .qz__pergunta:focus-visible, .diag__texto:focus, .diag__texto:focus-visible { outline: none; }

/* zzzzzzzzzzzzzzzz-v47-seo.css */
/* ---------- v47 · páginas de busca no padrão das páginas principais (componentes/v47-seo.mjs) ---------- */

/* topo: o tablet com a tela do sistema (computador) e o cartão de interface (celular) */
.v47t-cena { position: relative; display: grid; place-items: center; }
.v47t-tab { position: relative; width: min(470px, 36vw, calc((100svh - var(--altura-topo) - 90px) * 0.754)); aspect-ratio: 766 / 1016; }
.v47t-img, .v47t-vidro { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.v47t-img { z-index: 2; } .v47t-vidro { z-index: 3; opacity: 0.7; }
.v47t-sombra { position: absolute; left: 6%; right: 10%; bottom: -2%; height: 8%; border-radius: 50%; background: rgba(0, 0, 0, 0.55); filter: blur(26px); }
.v47t-tela { position: absolute; left: 0; top: 0; z-index: 1; width: 400px; height: 580.3px; transform-origin: 0 0; overflow: hidden; border-radius: 8px; visibility: hidden; background: #F8F4EB; }
.v47t--encaixado .v47t-tela { visibility: visible; }
@keyframes v47-tab { to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.anima .v47t-cena { opacity: 0; translate: 0 80px; rotate: 4deg; animation: v47-tab 1000ms cubic-bezier(.16, 1, .3, 1) 160ms forwards; }
@media (min-width: 1024px) { .v47-hero .v47-hero__grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .v47-cel { display: none; } }
@media (max-width: 1023px) { .v47-hero .v47-hero__grade { grid-template-columns: minmax(0, 1fr); } .v47t-cena { display: none; } .v47-cel { margin-top: 30px; } }

/* a tela do sistema (400 × 580) */
.v47a { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: var(--f-texto); color: #0B2035; }
.v47a__bar { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; background: #0B2035; color: #FFFFFF; }
.v47a__elos { display: block; width: 30px; height: auto; }
.v47a__marca { display: grid; gap: 1px; margin: 0; line-height: 1.1; }
.v47a__marca b { font-size: 14px; font-weight: 650; } .v47a__marca span { font-size: 11px; color: #A9BCCB; }
.v47a__per { margin: 0 0 0 auto; font-size: 11px; letter-spacing: 0.04em; color: #E8CE93; }
.v47a__res { margin: 16px 16px 0; padding: 16px 18px 18px; border-radius: 16px; color: #FFFFFF;
  background: radial-gradient(110% 80% at 100% 0%, rgba(216, 172, 82, 0.2), rgba(216, 172, 82, 0) 60%), linear-gradient(165deg, #183D62, #0B2035); }
.v47a__rot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; font: 650 10px/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #A9BCCB; }
.v47a__estado { display: grid; text-transform: none; letter-spacing: 0.02em; font-size: 11px; }
.v47a__estado > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; transition: opacity 400ms linear; }
.v47a__estado svg { width: 12px; height: 12px; }
.v47a__estado-a { color: #E8CE93; } .v47a__estado-b { color: #8FD9AE; opacity: 0; }
.v47a__num { margin: 10px 0 0; font: 400 32px/1.05 var(--f-titulo); letter-spacing: -0.02em; }
.v47a__sub { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: #C9D8E4; }
.v47a__lista { margin: 14px 16px 0; padding: 12px 16px 6px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.08); }
.v47a__t { display: flex; justify-content: space-between; margin: 0 0 4px; font: 650 10px/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #5B6B7B; }
.v47a__t b { color: #B4882F; }
.v47a__lista ul { display: grid; margin: 0; padding: 0; list-style: none; }
.v47a__lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(11, 32, 53, 0.08); }
.v47a__lista li:first-child { border-top: 0; }
.v47a__lista i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0B2035; color: #E8CE93; transition: background-color 300ms linear, color 300ms linear, box-shadow 300ms linear; }
.v47t--vivo .v47a__lista li:nth-child(1) i { transition-delay: 250ms; }
.v47t--vivo .v47a__lista li:nth-child(2) i { transition-delay: 570ms; }
.v47t--vivo .v47a__lista li:nth-child(3) i { transition-delay: 890ms; }
.v47t--vivo .v47a__lista li:nth-child(4) i { transition-delay: 1210ms; }
.v47t--vivo .v47a__lista li:nth-child(5) i { transition-delay: 1530ms; }
.v47t--vivo .v47a__lista li:nth-child(6) i { transition-delay: 1850ms; }

.v47a__lista i svg { width: 12px; height: 12px; }
.v47a__lista li span { display: grid; gap: 1px; min-width: 0; }
.v47a__lista b { font-size: 13px; font-weight: 650; line-height: 1.25; }
.v47a__lista small { font-size: 11px; line-height: 1.3; color: #5B6B7B; }
.v47a__lista em { font-style: normal; font-size: 12px; font-weight: 650; color: #0B2035; white-space: nowrap; }
.v47a__pe { display: flex; align-items: center; gap: 8px; margin: auto 16px 16px; padding: 10px 14px; border-radius: 12px; background: rgba(216, 172, 82, 0.16); font-size: 11.5px; line-height: 1.3; color: #5B4A1E; }
.v47a__pe svg { flex: none; width: 14px; height: 14px; color: #B4882F; }
/* a lista se confere uma linha por vez e o estado muda no fim */
.anima .v47-hero:not(.v47t--vivo) .v47a__lista i { background: #FFFFFF; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(11, 32, 53, 0.25); transition-delay: 0ms; }
.v47a__estado > span { transition-duration: 260ms; }
.v47t--vivo .v47a__estado-a { opacity: 0; transition-delay: 1500ms; }
.v47t--vivo .v47a__estado-b { opacity: 1; transition-delay: 1780ms; }

/* a avaliação vira botão (contorno dourado no marinho) e o rosto de quem assina, maior */
.v47-hero .v47-aval { color: #FFFFFF; background-image: none; box-shadow: inset 0 0 0 1.5px rgba(232, 206, 147, 0.55); }
.v47-hero .v47-aval .bt__caixa { background: #E8CE93; color: #0B2035; }
.v47-autor img { width: 56px; height: 56px; object-fit: cover; box-shadow: 0 0 0 2px rgba(232, 206, 147, 0.75), 0 10px 18px -8px rgba(0, 0, 0, 0.6); }
.v47-autor b { font-size: 1.0625rem; }

/* seções */
.v47s { position: relative; isolation: isolate; padding-block: clamp(64px, 8vw, 120px); }
.v47s--navy { background: #0B2035; color: #FFFFFF; }
.v47s__grade { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1024px) { .v47s:not(.v47s--centro) .v47s__grade { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.v47s__texto { display: grid; gap: 16px; align-content: start; }
.v47s--centro .v47s__texto { justify-items: center; max-width: 48rem; margin-inline: auto; text-align: center; }
.v47s__rot { margin: 0; font: 650 0.75rem/1.2 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #9A7424; }
.v47s--navy .v47s__rot { color: #E8CE93; }
.v47s__t { margin: 0; max-width: 20ch; font: 400 clamp(1.9rem, 1.3rem + 2vw, 2.85rem)/1.08 var(--f-titulo); letter-spacing: -0.02em; color: #0B2035; text-wrap: balance; }
.v47s--navy .v47s__t { color: #FFFFFF; }
.v47s__apoio { display: grid; gap: 12px; }
.v47s__apoio p { margin: 0; max-width: 38rem; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); line-height: 1.6; color: #33414F; }
.v47s--navy .v47s__apoio p { color: #C9D8E4; }
.v47s--centro .v47s__vis { width: 100%; }
.v47-respiro { height: clamp(24px, 4vw, 48px); background: #0B2035; }

/* cartões da Conex com o objeto 3D */
.v47c { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .v47c--2, .v47c--3, .v47c--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .v47c--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v47c--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v47c__i { display: grid; align-content: start; gap: 8px; padding: 22px; text-align: left; }
.v47c__ob { display: block; width: 72px; height: 72px; margin-bottom: 4px; }
.v47c__ob img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.4)); }
.v47c__i h3 { margin: 0; font: 400 1.3rem/1.15 var(--f-titulo); color: #FFFFFF; }
.v47c__i p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: #C9D8E4; }
.v47c__i .v47c__x { margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(232, 206, 147, 0.22); color: #E8CE93; }
.v47c__x span { display: block; margin-bottom: 4px; font: 650 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #A9BCCB; }

/* passos no fio dourado */
.v47p__c h3 { margin: 0; font: 400 1.2rem/1.2 var(--f-titulo); color: #FFFFFF; }
.v47p__c p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: #C9D8E4; }

/* os dois lados (o desenho da página de BPO, que lá só existe no computador): aqui em qualquer largura, e cada bloco
   acende sozinho (data-v47-vista, v47-seo.js) */
.v47-dif { display: grid; gap: 18px; text-align: left; }
.v47s--centro .v47-dif { max-width: 980px; margin-inline: auto; }
.v47-dif__par { display: grid; gap: 14px; }
@media (min-width: 760px) { .v47-dif__par { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.v47-dif .v33d-dif__c { position: relative; display: flex; flex-direction: column; padding: 26px 26px 18px; border-radius: 26px; }
.v47-dif .v33d-dif__c::before { width: 78%; right: -20%; bottom: -30%; opacity: 0.26; }
.v47-dif .v33d-dif__c.cartao-bpo--claro::before { opacity: 0.22; }
.v47-dif .v33d-dif__ob { position: absolute; right: 18px; top: 14px; width: clamp(84px, 9vw, 120px); height: auto; pointer-events: none; }
.v47-dif .v33d-dif__quem { display: flex; align-items: center; gap: 9px; margin: 0; padding-right: 96px; font: 600 0.72rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.v47-dif .v33d-dif__elos { width: 24px; height: auto; }
.v47-dif .v33d-dif__c h3 { margin: 14px 0 0; padding-right: 80px; font: 400 clamp(1.8rem, 1.3rem + 1.1vw, 2.4rem)/1.04 var(--f-titulo); letter-spacing: -0.025em; color: #FFFFFF; }
.v47-dif .v33d-dif__sub { margin: 6px 0 0; font-size: 1.02rem; line-height: 1.4; color: #C9D8E4; }
.v47-dif .v33d-dif__c ul { display: grid; margin: 18px 0 0; padding: 0; list-style: none; }
.v47-dif .v33d-dif__c li { display: flex; align-items: center; gap: 11px; padding: 11px 0; box-shadow: inset 0 1px 0 rgba(232, 206, 147, 0.18); font: 500 1rem/1.3 var(--f-texto); color: #FFFFFF; }
.v47-dif .v33d-dif__c li svg { flex: none; width: 22px; height: 22px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: #E8CE93; color: #0B2035; }
.v47-dif .v33d-dif__c--cont .v33d-dif__quem { color: #85621A; }
.v47-dif .v33d-dif__c--cont h3 { color: #0B2035; }
.v47-dif .v33d-dif__c--cont .v33d-dif__sub { color: #56636F; }
.v47-dif .v33d-dif__c--cont li { color: #26323E; box-shadow: inset 0 1px 0 rgba(154, 113, 32, 0.2); }
.v47-dif .v33d-dif__c--cont li svg { background: none; color: #85621A; box-shadow: inset 0 0 0 1.5px rgba(154, 113, 32, 0.5); }
.anima .v47-dif .v33d-dif__c { opacity: 0; translate: 0 30px; transition: opacity 500ms linear, translate 900ms cubic-bezier(.16, 1, .3, 1); }
.anima .v47-dif .v33d-dif__ob { opacity: 0; scale: 0.55; rotate: -14deg; transition: opacity 300ms linear, scale 800ms cubic-bezier(.3, 1.45, .5, 1), rotate 800ms cubic-bezier(.3, 1.45, .5, 1); }
.anima .v47-dif.vista .v33d-dif__c { opacity: 1; translate: none; }
.anima .v47-dif.vista .v33d-dif__c + .v33d-dif__c { transition-delay: 140ms; }
.anima .v47-dif.vista .v33d-dif__ob { opacity: 1; scale: 1; rotate: 0deg; transition-delay: 380ms; }
.anima .v47-dif.vista .v33d-dif__c + .v33d-dif__c .v33d-dif__ob { transition-delay: 520ms; }
.v47s--navy .v47-dif .v33d-dif__c:not(.cartao-bpo--claro) { box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.32), 0 34px 54px -36px rgba(0, 0, 0, 0.9); }

/* número em destaque */
.v47n { position: relative; display: grid; gap: 8px; padding: clamp(24px, 3vw, 36px); text-align: left; }
.v47n__ob { position: absolute; right: 18px; top: 14px; width: clamp(84px, 9vw, 120px); }
.v47n__ob img { width: 100%; height: auto; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)); }
.v47n__rot { margin: 0; font: 650 0.75rem/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.v47n__v { margin: 6px 0 0; font: 400 clamp(2.4rem, 1.6rem + 3vw, 3.6rem)/1 var(--f-titulo); letter-spacing: -0.02em; color: #FFFFFF; }
.v47n__a { margin: 0; max-width: 32rem; font-size: 0.9375rem; line-height: 1.5; color: #C9D8E4; }

/* chamada do meio */
.v47ch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 24px; text-align: left; }
.v47ch p { margin: 0; max-width: 34rem; font-size: 0.9375rem; line-height: 1.5; color: #C9D8E4; }
.v47ch b { display: block; margin-bottom: 4px; font: 400 1.25rem/1.2 var(--f-titulo); color: #FFFFFF; }

/* link de texto */
.v47-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-weight: 600; color: #0B2035; text-decoration: underline; text-decoration-color: rgba(180, 136, 47, 0.7); text-underline-offset: 4px; }
.v47s--navy .v47-link { color: #E8CE93; }

/* "Para ler antes de decidir": os cartões do .tb, com espaço antes do "Também cuidamos de" */
.tb.lr { margin-top: clamp(44px, 6vw, 72px); }
.tb.lr + .tb { margin-top: clamp(28px, 3vw, 40px); padding-top: 0; border-top: 0; }
@media (min-width: 1024px) { .faq > .envelope > .tb.lr { grid-row: 2; grid-column: 1 / -1; } .faq > .envelope > .tb.lr + .tb { grid-row: 3; } }
@media (max-width: 699px) { .tb.lr .tb__lista { grid-template-columns: minmax(0, 1fr); } }

/* ---------- v47 rodada 2: o que falta saber ([A confirmar: …], componentes/v47-pagina.mjs › ph) e o depoimento ---------- */
.v47-ph { padding: 1px 6px; border-radius: 6px; background: rgba(216, 172, 82, 0.22); box-shadow: inset 0 0 0 1px rgba(216, 172, 82, 0.7); color: inherit; font-style: italic; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.v47q { display: grid; gap: 14px; margin: 0; padding: clamp(24px, 3vw, 36px); text-align: left; }
.v47q__t { margin: 0; font: 400 clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem)/1.3 var(--f-titulo); color: #FFFFFF; }
.v47q__q { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 0.9375rem; color: #C9D8E4; }
.v47q__q b { color: #E8CE93; font-weight: 650; }
.v47q-par { display: grid; gap: 16px; }
@media (min-width: 900px) { .v47q-par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v47s--centro .v47q { max-width: 860px; margin-inline: auto; }
.v47p + .v47q, .v47n + .v47c, .v47n + .v47p, .v47c + .v47ch, .v47p + .v47ch, .v47-dif + .v47ch { margin-top: 16px; }

/* ---------- v47 rodada 3 (JM, 13/10: "alinhe e posicione melhor os cards e deixe as marcas d'água inteiras") ---------- */
/* marca d'água inteira dentro de cada cartão das páginas de busca: pela altura nos cartões baixos e largos (passos,
   chamada, número, depoimento) e pela largura nos cartões da grade */
:is(.v47p__c, .v47ch, .v47n, .v47q).cartao-bpo::before { right: 14px; bottom: auto; top: 12%; height: 76%; width: auto; aspect-ratio: 662 / 412; max-width: 46%; opacity: 0.13; }
.v47c__i.cartao-bpo::before { right: 12px; bottom: 12px; width: min(58%, 190px); height: auto; opacity: 0.13; }
.v47-dif .v33d-dif__c.cartao-bpo::before { right: 14px; bottom: 14px; width: min(52%, 240px); height: auto; }

/* seções centralizadas: os passos lado a lado, número em cima, o fio dourado ligando os números */
@media (min-width: 900px) {
  .v47s--centro .v47ch { max-width: 1080px; margin-inline: auto; }
  .v47s--centro .v47p + .v47ch, .v47s--centro .v47c + .v47ch { margin-top: 22px; }
}
/* o texto dos cartões não passa por cima do desenho mais forte */
.v47p__c > *, .v47ch > *, .v47n > *, .v47q > * { position: relative; z-index: 1; }

/* ---------- v47 · chamada do meio no padrão da home (sem cartão nem marca d'água): o botão e uma linha embaixo ---------- */
.v47ch { display: grid; justify-items: start; gap: 12px; padding: 0; background: none; box-shadow: none; text-align: left; }
.v47ch::before { display: none; }
.v47s--centro .v47ch { justify-items: center; text-align: center; }
.v47ch p { margin: 0; max-width: 36rem; font-size: 0.9375rem; line-height: 1.5; color: #56636F; }
.v47ch b { font-weight: 600; color: #0B2035; }
.v47s--navy .v47ch b { color: #FFFFFF; }
.v47s--navy .v47ch p { color: #A9BCCB; }
.v47ch { margin-top: 28px !important; }

/* ---------- v47 · grades de cartões: a última linha incompleta fica centralizada (JM, 13/10: "centraliza os últimos
   3 cards para não ficar com o último bloco faltando") ---------- */
.v47c { display: flex; flex-wrap: wrap; justify-content: center; }
.v47c > .v47c__i { flex: 0 0 100%; }
@media (min-width: 700px) { .v47c--2 > .v47c__i, .v47c--3 > .v47c__i, .v47c--4 > .v47c__i { flex-basis: calc((100% - 14px) / 2); } }
@media (min-width: 1100px) {
  .v47c--3 > .v47c__i { flex-basis: calc((100% - 2 * 14px) / 3); }
  .v47c--4 > .v47c__i { flex-basis: calc((100% - 3 * 14px) / 4); }
}

/* JM, 10/11: as duas sócias assinam todo artigo (assinaturaSocias em v47-seo.mjs), lado a lado; no celular uma por linha
   quando não cabem. Mesma foto redonda e o mesmo fio dourado da assinatura de uma só */
.v47-autores { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 24px 0 0; }
.v47-autores .ps-autor { margin: 0; }
@media (max-width: 699px) {
  .v47-autores { gap: 12px 22px; }
  .v47-autores .v47-autor img { width: 48px; height: 48px; }
  .v47-autores .v47-autor b { font-size: 1rem; }
}

/* zzzzzzzzzzzzzzzzz-v48.css */
/* ===================== v48 (JM, 13/10) ===================== */
@media (max-width: 899px) {
  /* 1. comparação (assistente × Conex): o seletor fica no topo do bloco, parado; não acompanha a rolagem */
  .cp--seg .cp__seg { position: relative; top: auto; }
}

/* 3. quiz (v48b): a forma é desenhada uma vez num quadrado (o "rotor", posição e tamanho vêm do JS) que gira e estica
      na placa de vídeo; a cor nova é a camada de cima acendendo. Nada é repintado durante a troca */
.qz__rotor { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 50% 50%; will-change: transform; }
.qz__rotor .qz__blob { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qz__rotor .qz__blob--b { opacity: 0; will-change: opacity; }
/* o tema troca letra por letra (opacidade): numa camada própria, só ela repinta, não o cartão inteiro */
.qz__titulos { will-change: transform; }

/* 4. passos das páginas de busca (JM, 13/10: "tira essa enumeração; algo mais autêntico, direto, dinâmico e natural").
      Sem número: um ponto dourado por passo, ligado ao próximo por um fio. Quando o bloco aparece (data-v47-vista →
      .vista), o primeiro ponto acende, o fio se desenha até o próximo, que acende, e assim por diante; cada cartão chega
      junto com o seu ponto. Vertical por padrão; lado a lado nas seções centralizadas do computador. */
.v47p { --passo: 340ms; position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; text-align: left; }
.v47p__i { --d: 0ms; position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 18px; align-items: start; }
.v47p__i:nth-child(2) { --d: calc(var(--passo) * 1); } .v47p__i:nth-child(3) { --d: calc(var(--passo) * 2); }
.v47p__i:nth-child(4) { --d: calc(var(--passo) * 3); } .v47p__i:nth-child(5) { --d: calc(var(--passo) * 4); } .v47p__i:nth-child(6) { --d: calc(var(--passo) * 5); }
/* o ponto: anel dourado; o miolo enche quando chega a vez */
.v47p__m { position: relative; z-index: 1; width: 22px; height: 22px; margin-top: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px #D8AC52; background: #F4EEE2; }
.v47s--navy .v47p__m { background: #0B2035; }
.v47p__m::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #D8AC52; }
/* o fio até o próximo ponto: trilho apagado (::before) e o dourado que se desenha por cima (::after) */
.v47p__i:not(:last-child)::before, .v47p__i:not(:last-child)::after { content: ''; position: absolute; left: 10px; width: 2px; top: 48px; bottom: -26px; border-radius: 2px; }
.v47p__i:not(:last-child)::before { background: rgba(216, 172, 82, 0.22); }
.v47p__i:not(:last-child)::after { background: #D8AC52; transform-origin: 50% 0; }
.v47p__c { display: grid; gap: 6px; padding: 18px 22px; border-radius: 20px; }
.v47p__c.cartao-bpo::before { display: none; } /* sem marca d'água: o cartão é leve, o desenho é o fio */
@media (min-width: 900px) {
  .v47s--centro .v47p { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; max-width: 1080px; margin-inline: auto; }
  .v47s--centro .v47p__i { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; justify-items: center; gap: 18px; text-align: center; }
  .v47s--centro .v47p__m { margin-top: 0; }
  .v47s--centro .v47p__c { width: 100%; height: 100%; align-content: start; padding: 22px 22px 24px; }
  .v47s--centro .v47p__i:not(:last-child)::before, .v47s--centro .v47p__i:not(:last-child)::after { left: calc(50% + 17px); right: calc(-50% + 8px); top: 10px; bottom: auto; width: auto; height: 2px; }
  .v47s--centro .v47p__i:not(:last-child)::after { transform-origin: 0 50%; }
}
/* a chegada (só com animação ligada) */
.anima .v47p__m::after { scale: 0; transition: scale 360ms cubic-bezier(.3, 1.5, .5, 1) calc(120ms + var(--d)); }
.anima .v47p__i:not(:last-child)::after { transform: scaleY(0); transition: transform var(--passo) cubic-bezier(.45, 0, .55, 1) calc(240ms + var(--d)); }
.anima .v47p__c { opacity: 0; translate: 0 14px; transition: opacity 420ms linear calc(100ms + var(--d)), translate 700ms cubic-bezier(.16, 1, .3, 1) calc(100ms + var(--d)); }
@media (min-width: 900px) {
  .anima .v47s--centro .v47p__i:not(:last-child)::after { transform: scaleX(0); }
  .anima .v47s--centro .v47p__c { translate: 0 18px; }
}
.anima .v47p.vista .v47p__m::after { scale: 1; }
.anima .v47p.vista .v47p__i:not(:last-child)::after { transform: none; }
.anima .v47p.vista .v47p__c { opacity: 1; translate: none; }

/* 5. a chamada do meio: centralizada de verdade nas seções centralizadas (sobrava um justify-content: space-between do
      desenho antigo, e a coluna única do grid encostava à esquerda). Frase em cima, botão embaixo, como pede a leitura */
.v47ch { justify-content: start; }
.v47s--centro .v47ch { justify-content: center; }
.v47ch p { order: -1; }

/* 6. os dois lados (BPO × contabilidade etc.): o objeto 3D tem a coluna dele no topo do cartão e nunca passa por cima
      do título */
.v47-dif .v47-dif__cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.v47-dif .v47-dif__cab .v33d-dif__ob { position: static; width: clamp(72px, 7vw, 100px); margin: -8px -6px 0 0; }
.v47-dif .v33d-dif__quem, .v47-dif .v33d-dif__c h3 { padding-right: 0; }

/* 7. quatro fases no celular: o desenho do palco preso agora segue o da página (v32-a-cartoes.js, --v32a-fz-y), então o
      pé dele não esmaece mais (o esmaecido deixava elos pela metade logo abaixo do cartão "Acompanhar") */
@media (max-width: 899px) {
  [data-fases="a"] .fz--vivo .fz__palco::after { -webkit-mask-image: none; mask-image: none; }
}

/* 8. v49 · Quem é a Conex no celular como seção corrida (src/js/v31/v49-quem.js): sem palco preso; vale o layout
      empilhado do v35. Cada peça surge quando entra na tela, no ritmo do .revela do resto do site (opacidade 700 ms,
      subida 1100 ms). Frases: palavra por palavra subindo da linha; fio dourado se desenhando; cartões: sobem e
      assentam, a foto aproxima de leve, cargo, nome e texto em cascata curta; contato: os elos se encaixam */
@media (max-width: 899px) {
  .v35q.v49q .v35q__palco > .monograma { display: none; } /* a camada da seção já cobre: sem desenho dobrado */
  .v35q.v49q .v35q__vista { padding-top: 0; }
  .v35q.v49q .v35q__rot { margin: 0 0 28px; text-align: center; }
  .v35q.v49q .v35q__cenas { gap: 56px; }
  .v35q.v49q .v35q-m { padding-bottom: 8px; }

  .anima .v35q.v49q .v35q-wi { translate: 0 115%; transition: translate 900ms cubic-bezier(.16, 1, .3, 1) var(--d, 0ms); }
  .anima .v35q.v49q .v35q-f.v49-on .v35q-wi { translate: 0 0; }
  .anima .v35q.v49q .v35q-fio { transform: scaleY(0); transition: transform 620ms cubic-bezier(.22, 1, .36, 1); }
  .anima .v35q.v49q .v35q-fio.v49-on { transform: none; }

  .anima .v35q.v49q .v35q-cena:not(.v35q-m) { opacity: 0; translate: 0 56px; transition: opacity 700ms linear, translate 1100ms cubic-bezier(.16, 1, .3, 1); }
  .anima .v35q.v49q .v35q-cena.v49-on { opacity: 1; translate: 0 0; }
  .anima .v35q.v49q .v35q-cena:not(.v35q-m) .v35q-k { opacity: 0; translate: 0 14px; transition: opacity 500ms linear calc(220ms + var(--k, 0ms)), translate 800ms cubic-bezier(.16, 1, .3, 1) calc(220ms + var(--k, 0ms)); }
  .anima .v35q.v49q .v35q-cena.v49-on .v35q-k { opacity: 1; translate: 0 0; }
  .anima .v35q.v49q .v35q-p__foto img { scale: 1.07; transition: scale 1400ms cubic-bezier(.16, 1, .3, 1) 80ms; }
  .anima .v35q.v49q .v35q-p.v49-on .v35q-p__foto img { scale: 1; }
  .anima .v35q.v49q :is(.v35q-elos__a, .v35q-elos__b) { opacity: 0; transition: transform 900ms cubic-bezier(.22, 1, .36, 1) 120ms, opacity 400ms linear 120ms; }
  .anima .v35q.v49q .v35q-elos__a { transform: translateX(-90px); }
  .anima .v35q.v49q .v35q-elos__b { transform: translateX(90px); }
  .anima .v35q.v49q .v35q-z.v49-on :is(.v35q-elos__a, .v35q-elos__b) { opacity: 1; transform: none; }
}

/* 9. v49b (JM, 13/10: "os cards das sócias lado a lado, proporcionais e num bom tamanho, para não ocuparem tanto
      scroll; e uma headline no começo da seção dizendo o que vem depois"). Celular. */
.v49q-cab { display: none; }
@media (max-width: 899px) {
  .v49q-cab { display: grid; justify-items: center; gap: 12px; margin: 0 auto 44px; max-width: 30rem; text-align: center; }
  .v49q-cab__t { margin: 0; font: 400 clamp(2.1rem, 1rem + 5vw, 2.6rem)/1.05 var(--f-titulo); letter-spacing: -0.025em; color: #FFFFFF; text-wrap: balance; }
  .v49q-cab__a { margin: 0; max-width: 30ch; font-size: 1rem; line-height: 1.5; color: #C9D8E4; text-wrap: pretty; }
  .v35q:not(.v35q--vivo) .v35q__rot { margin: 0 0 14px; text-align: center; }
  /* v49c (JM, 13/10: "as sócias uma por linha, com bom tamanho e proporcional"): cartão na largura toda, foto em
     paisagem (4:3, enquadrada no rosto), cargo, nome e texto embaixo */
  .v35q:not(.v35q--vivo) .v35q__cenas { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .v35q:not(.v35q--vivo) .v35q-cena.v35q-j { margin-top: 36px; }
  .v35q:not(.v35q--vivo) .v35q-cena.v35q-z { margin-top: 28px; }
  .v35q:not(.v35q--vivo) .v35q-p { align-content: start; gap: 8px; width: 100%; max-width: 460px; margin-inline: auto; padding: 10px 10px 20px; border-radius: 24px; }
  .v35q:not(.v35q--vivo) .v35q-p__foto { aspect-ratio: 4 / 3; border-radius: 16px; margin-bottom: 8px; }
  .v35q:not(.v35q--vivo) .v35q-p__foto img { object-position: 50% 22%; }
  .v35q:not(.v35q--vivo) [data-v35q-cena="2"] .v35q-p__foto img { object-position: 50% 26%; }
  .v35q:not(.v35q--vivo) .v35q-p__txt { gap: 8px; padding: 0 10px; }
  .v35q:not(.v35q--vivo) .v35q-p .v32c-p__papel { font-size: 0.6875rem; letter-spacing: 0.16em; }
  .v35q:not(.v35q--vivo) .v35q-p .v32c-p__nome { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.3rem); line-height: 1; letter-spacing: -0.025em; }
  .v35q:not(.v35q--vivo) .v35q-p .v32c-p__bio { font-size: 0.9375rem; line-height: 1.5; }
  .v35q:not(.v35q--vivo) .v35q-p.cartao-bpo::before, .v35q:not(.v35q--vivo) .v35q-p.v32c-cartao::before { opacity: 0.1; }
  .v49q-cab__t em { font-style: italic; color: #E8CE93; }

  /* o título surge como as outras peças */
  .anima .v35q.v49q .v49q-cab { opacity: 0; translate: 0 40px; transition: opacity 700ms linear, translate 1100ms cubic-bezier(.16, 1, .3, 1); }
  .anima .v35q.v49q .v49q-cab.v49-on { opacity: 1; translate: 0 0; }
}

/* 10. v49c · Quem é a Conex no computador: a cena 1 deixa de ser o manifesto e vira o título da seção (quem.mjs › CAB).
       Grande, centrado, com a parte que importa em itálico dourado (como as palavras de ligação do manifesto), e a
       linha de apoio dizendo o que vem; os dois acendem com a rolagem como o resto do palco (.qx-pal). A seção encurta
       105svh (só o trecho do manifesto; site.js › CORTES) */
@media (min-width: 900px) {
  .anima .qx.qx--vivo.v36m, .anima .qx.qx--vivo { height: calc(100svh + 318.86svh); }
  .qx-cab { gap: clamp(18px, 2.6svh, 28px); }
  .qx-cab__t { margin: 0; max-width: 15ch; font: 400 clamp(3rem, 1.2rem + 4vw, 5.6rem)/1 var(--f-titulo); letter-spacing: -0.035em; color: #FFFFFF; text-wrap: balance; }
  .qx-cab__t em { font-style: italic; color: #E8CE93; }
  .qx-cab__a { margin: 0; max-width: 36rem; font-size: clamp(1.0625rem, 0.85rem + 0.45vw, 1.3125rem); line-height: 1.55; color: #C9D8E4; text-wrap: pretty; }
  /* v49d (JM, 13/10: "melhore essa linha de caminho após a headline, assim está estranha"): o fio sai do texto (do
     transparente ao dourado) e termina num ponto dourado com um anel fino: lê como "segue para baixo". Ele se desenha
     de cima para baixo quando o título aparece e fica parado (sem brilho nem luz correndo) */
  .qx-cab::after { content: ''; display: block; width: 14px; height: clamp(64px, 9svh, 92px); margin-top: clamp(14px, 2.4svh, 26px);
    background:
      radial-gradient(circle at 50% calc(100% - 7px), #E8CE93 0 3px, transparent 3.6px),
      radial-gradient(circle at 50% calc(100% - 7px), transparent 0 5.4px, rgba(232, 206, 147, 0.5) 5.9px 6.8px, transparent 7.3px),
      linear-gradient(180deg, rgba(232, 206, 147, 0), #E8CE93) 50% 0 / 1.5px calc(100% - 14px) no-repeat; }
  .anima .qx--vivo .qx-cab::after { clip-path: inset(0 0 100% 0); transition: clip-path 0s linear 500ms; }
  .anima .qx--vivo[data-cena="1"] .qx-cab::after { clip-path: inset(0 0 -2px 0); transition: clip-path 1100ms cubic-bezier(.65, 0, .35, 1) 450ms; }
}
/* o título quebra no lugar certo: "Quem está por trás" / "da Conex" */
.qx-cab__t .cab-l, .v49q-cab__t .cab-l { display: block; }
@media (min-width: 900px) { .qx-cab__t { max-width: none; } }

/* 11. v49g · /sobre, as sócias (JM, 13/10): dois cartões do mesmo tamanho lado a lado no computador, um por linha no
       celular; foto em cima, cargo, nome, o selo (anos + áreas), o texto e a frase de cada uma */
.ps-socias__lista { align-items: stretch; }
.ps-socia { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 0; padding: 12px 12px 28px; }
.ps-socia:nth-child(2) .ps-socia__foto { order: 0; }
.ps-socia__foto { aspect-ratio: 3 / 2; border-radius: 18px; }
.ps-socia__foto img { object-position: 50% 20%; }
.ps-socia__txt { padding: 26px clamp(10px, 1.6vw, 20px) 0; }
.ps-socia h3 { margin-bottom: 14px; }
.ps-socia__txt > p:not(.ps-socia__papel):not(.ps-socia__fato) { font-size: 1rem; line-height: 1.62; color: #D5E1EB; }
.ps-socia__cit p { font-size: 1.1875rem; }
@media (min-width: 900px) {
  .ps-socias__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
}
@media (max-width: 899px) {
  .ps-socia { padding: 10px 10px 24px; border-radius: 24px; }
  .ps-socia__foto { aspect-ratio: 4 / 3; }
  .ps-socia__txt { padding: 20px 10px 0; }
  .ps-socia h3 { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.4rem); }
  .ps-socia__txt > p:not(.ps-socia__papel):not(.ps-socia__fato) { font-size: 0.96875rem; }
}

/* v49h (JM, 13/10: "tira esses pins dos cards, cara de IA; melhore a representação dessas infos"; "alinhe melhor
   horizontalmente os textos e melhore a exibição das categorias"): o dado de cada sócia como numa revista, o número
   grande em serifa dourada e, ao lado, "anos de experiência" e as áreas em itálico, entre dois fios finos. No computador
   os dois cartões dividem as mesmas linhas (subgrid): cargo, nome, dado, texto e frase começam na mesma altura */
.ps-socia__fato { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; margin: 0 0 22px !important; padding: 16px 0;
  border-top: 1px solid rgba(232, 206, 147, 0.22); border-bottom: 1px solid rgba(232, 206, 147, 0.22); }
.ps-socia__fato b { font: 400 clamp(2.8rem, 1.9rem + 1.8vw, 3.6rem)/0.85 var(--f-titulo); letter-spacing: -0.035em; color: #E8CE93; }
.ps-socia__fato span { display: grid; gap: 6px; }
.ps-socia__fato small { font: 600 0.6875rem/1.2 var(--f-mono, ui-monospace, monospace); letter-spacing: 0.16em; text-transform: uppercase; color: #A9BCCB; }
.ps-socia__fato em { font: italic 400 clamp(1.125rem, 1rem + 0.35vw, 1.3125rem)/1.25 var(--f-titulo); color: #F7F3EA; }
.ps-socia__bio p { margin: 0 0 12px; font-size: 1rem; line-height: 1.62; color: #D5E1EB; }
.ps-socia__bio p:last-child { margin-bottom: 0; }
.ps-socia__txt { display: contents; }
.ps-socia__txt > * { margin-inline: clamp(10px, 1.6vw, 20px) !important; }
.ps-socia__papel { margin-top: 26px !important; }
.ps-socia__cit { margin-top: 22px !important; align-self: start; }
@media (min-width: 900px) {
  .ps-socias__lista { grid-template-rows: auto; row-gap: 0; }
  .ps-socia { grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  /* JM, 10/11: "falta alinhar horizontalmente os anos de experiência delas": quando as áreas de uma quebram em 2 linhas
     (1280 px), o número descia. Agora o dado ocupa a linha inteira nos dois cartões (fios na mesma altura) e o número
     e o rótulo ficam presos no topo, na mesma altura nas duas */
  .ps-socia__fato { align-self: stretch; align-items: start; }
  .ps-socia__fato b { margin-top: 2px; }
}
@media (max-width: 899px) {
  .ps-socia__papel { margin-top: 20px !important; }
  .ps-socia__bio p { font-size: 0.96875rem; }
}

/* v49i (JM, 13/10: "no mobile, um breve texto inicial e um botão para expandir; cada card vira um modal com mais
   informações; muito texto para um site institucional"). Computador: o card mostra tudo (texto já mais curto) e o botão
   some. Celular: cargo, nome, o dado e a primeira frase; "Conhecer a trajetória" abre o card inteiro numa janela
   (<dialog>, src/js/v31/v49-sobre.js) */
.ps-socia__abre { display: none; }
@media (max-width: 899px) {
  .ps-socia .ps-socia__mais, .ps-socia .ps-socia__cit { display: none; }
  .ps-socia__fato { margin-bottom: 18px !important; }
  .ps-socia__abre { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin-top: 20px !important; padding: 13px 18px; border: 0; border-radius: 14px; cursor: pointer;
    background: rgba(232, 206, 147, 0.1); box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.45); font: 600 0.9375rem/1 var(--f-texto); color: #E8CE93; -webkit-tap-highlight-color: transparent; }
  .ps-socia__abre span { transition: translate 300ms cubic-bezier(.22, 1, .36, 1); }
  .ps-socia__abre:active { background: rgba(232, 206, 147, 0.2); }
  .ps-socia__abre:focus-visible { outline: 2px solid #E8CE93; outline-offset: 3px; }
}
/* a janela (v49k): o modal dos cartões da home (.v32a-m, src/js/v31/v32-a-cartoes.js), com o conteúdo da sócia: a foto
   enquadrada no rosto, o cargo, o nome, o dado dos anos, o texto inteiro e a frase dela */
.v32a-m--socia .v32a-m__foto { height: 230px; }
.v32a-m--socia .v32a-m__foto img { object-position: 50% 18%; }
.v32a-m--socia .v32a-m__corpo { margin-top: -22px; }
.v32a-m--socia .ps-m__papel { margin: 0 0 8px; font: 600 0.6875rem/1.3 var(--f-mono, ui-monospace, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: #E8CE93; }
.v32a-m--socia .ps-socia__fato { margin: 18px 0 6px !important; }
.v32a-m--socia .v32a-m__frase + .v32a-m__frase { margin-top: 10px; }
.v32a-m--socia .ps-socia__cit { margin: 20px 0 4px; padding: 0 0 0 16px; border-left: 2px solid #D8AC52; }
.v32a-m--socia .ps-socia__cit p { margin: 0; font: italic 400 1.125rem/1.45 var(--f-titulo); color: #F1DDA8; }
/* v49l (JM, 13/10: "diminui um pouco a tipografia nos cards da Bárbara e da Erika: o modal rolava só uma palavra;
   principalmente a frase delas; posição fixa no card"): tudo um pouco menor e mais junto, para o card inteiro caber
   na tela do celular sem rolar */
.v32a-m--socia .v32a-m__foto { height: clamp(150px, calc(100svh - 454px), 300px); }
.v32a-m--socia .v32a-m__corpo { padding: 14px 20px 16px; margin-top: 0; }
.v32a-m--socia .ps-m__papel { margin-bottom: 6px; font-size: 0.625rem; }
.v32a-m--socia .v32a-m__tit { font-size: 1.5rem; }
.v32a-m--socia .ps-socia__fato { gap: 14px; margin: 14px 0 4px !important; padding: 12px 0; }
.v32a-m--socia .ps-socia__fato b { font-size: 2.35rem; }
.v32a-m--socia .ps-socia__fato small { font-size: 0.625rem; }
.v32a-m--socia .ps-socia__fato em { font-size: 1rem; }
.v32a-m--socia .v32a-m__frase { margin-top: 10px; font-size: 0.875rem; line-height: 1.5; }
.v32a-m--socia .v32a-m__frase + .v32a-m__frase { margin-top: 8px; }
.v32a-m--socia .ps-socia__cit { margin: 16px 0 0; padding-left: 14px; }
.v32a-m--socia .ps-socia__cit p { font-size: 0.96875rem; line-height: 1.42; }
.v32a-m--socia .v32a-m__foto::after { background: linear-gradient(180deg, rgba(14, 39, 66, 0) 84%, rgba(14, 39, 66, 0.4) 100%); } /* v49m: só a borda de baixo, o pescoço fica à mostra */

/* 12. v49n (JM, 13/10: "seções como essa não podem ficar com o 4º quadrante sobrando; centraliza ou põe mais um
       redirecionamento"): as listas de cartões-link do fim das páginas ("Também cuidamos de" e "Para ler antes de
       decidir") se ajustam à quantidade. 3 cartões: três colunas no computador; em tela média, o 3º fica centralizado
       embaixo. 1 cartão: a largura toda. 2 e 4 seguem em duas colunas. */
@media (min-width: 768px) {
  .tb__lista:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
  .tb__lista:has(> li:nth-child(3):last-child) > li:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
@media (min-width: 1100px) {
  .tb__lista:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb__lista:has(> li:nth-child(3):last-child) > li:last-child { grid-column: auto; justify-self: stretch; width: auto; }
  .tb__lista:has(> li:nth-child(3):last-child) .tb__card { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; }
  .tb__lista:has(> li:nth-child(3):last-child) .tb__obj { width: 72px; height: 72px; }
}

/* 13. v49o/v49t (JM, 13/10: "melhora o layout e a disposição das seções com cards assim; padroniza"; depois "não precisa
       ser tudo em um card só, um processo mais dinâmico"): nas seções de duas colunas (texto de um lado, cartões do
       outro), cada item é um cartão marinho próprio, em linha, empilhado com respiro: objeto 3D à esquerda, título e
       linha, e o valor curto à direita quando houver (a conta do CLT). Os cartões entram um depois do outro quando o
       grupo aparece (data-v47-vista). Seções centralizadas: a grade fica */
.v47s:not(.v47s--centro) .v47c { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
.v47s:not(.v47s--centro) .v47c > .v47c__i { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; column-gap: 18px; row-gap: 3px; align-items: center;
  padding: 16px 22px 16px 16px; border-radius: 20px; }
.v47s:not(.v47s--centro) .v47c > .v47c__i::before { display: none; }
.v47s:not(.v47s--centro) .v47c__ob { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 58px; height: 58px; margin: 0; }
.v47s:not(.v47s--centro) .v47c__i h3 { grid-column: 2; font-size: 1.1875rem; line-height: 1.2; }
.v47s:not(.v47s--centro) .v47c__i p { grid-column: 2; font-size: 0.9375rem; line-height: 1.45; }
.v47s:not(.v47s--centro) .v47c__i .v47c__x { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0; padding: 0 0 0 8px; border: 0; text-align: right; white-space: nowrap;
  font: 400 1.3125rem/1.1 var(--f-titulo); color: #E8CE93; }
.v47s:not(.v47s--centro) .v47c__x span { margin-bottom: 4px; }
.anima .v47s:not(.v47s--centro) .v47c > .v47c__i { opacity: 0; translate: 18px 0; transition: opacity 500ms linear, translate 800ms cubic-bezier(.16, 1, .3, 1); }
.anima .v47s:not(.v47s--centro) .v47c.vista > .v47c__i { opacity: 1; translate: 0 0; }
.anima .v47s:not(.v47s--centro) .v47c.vista > .v47c__i:nth-child(2) { transition-delay: 90ms; }
.anima .v47s:not(.v47s--centro) .v47c.vista > .v47c__i:nth-child(3) { transition-delay: 180ms; }
.anima .v47s:not(.v47s--centro) .v47c.vista > .v47c__i:nth-child(4) { transition-delay: 270ms; }
.anima .v47s:not(.v47s--centro) .v47c.vista > .v47c__i:nth-child(5) { transition-delay: 360ms; }
.anima .v47s:not(.v47s--centro) .v47c.vista > .v47c__i:nth-child(n+6) { transition-delay: 450ms; }
@media (max-width: 559px) {
  .v47s:not(.v47s--centro) .v47c > .v47c__i { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px 14px 12px; }
  .v47s:not(.v47s--centro) .v47c__ob { width: 48px; height: 48px; grid-row: 1 / span 2; align-self: start; }
  .v47s:not(.v47s--centro) .v47c__i .v47c__x { grid-column: 2; grid-row: auto; margin-top: 6px; padding: 0; text-align: left; font-size: 1.125rem; }
}

/* 14. v49p (JM, 13/10: "em todas as páginas, o botão de WhatsApp flutuante na cor e na logo original do WhatsApp,
       pulsando"): o flutuante (fim.mjs › barraMobile) passa a aparecer também no computador, no mesmo desenho do celular
       (verde do WhatsApp, a marca em branco, dois anéis que se abrem). Some sobre o questionário e do contato em diante,
       como no celular (site.js › componente 'barra'); na página do questionário (/diagnostico) ele não existe */
@media (min-width: 1100px) {
  .wf { position: fixed; z-index: 40; right: 28px; bottom: 28px; display: block;
    opacity: 0; scale: 0.6; pointer-events: none; transition: opacity 260ms linear, scale 420ms cubic-bezier(.34, 1.56, .64, 1); }
  .wf[hidden] { display: none; }
  .wf--visivel { opacity: 1; scale: 1; pointer-events: auto; }
  .wf__bt { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #25D366; color: #FFFFFF;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18); transition: scale 200ms cubic-bezier(.34, 1.56, .64, 1); }
  .wf__bt svg { position: relative; z-index: 1; width: 32px; height: 32px; }
  .wf__bt::before, .wf__bt::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #25D366; animation: wf-pulso 2.4s cubic-bezier(.2, .6, .35, 1) infinite; }
  .wf__bt::after { animation-delay: 1.2s; }
@media (hover: hover) and (pointer: fine){.wf__bt:hover{ scale: 1.06; }}
  .wf__bt:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
}

/* 15. v49q · carrossel dos grupos de cartões no celular (src/js/v31/v49-carrossel.js): uma fila que desliza, presa a
       cada cartão, sangrando até a borda da tela, com o próximo cartão aparecendo (82% da largura); embaixo, os pontos
       da posição (o da vez alongado) e um "Deslize" que some depois do primeiro arrasto */
.carr__ind { display: none; }
@media (max-width: 699px) {
  .v47c.carr, .tb__lista.carr { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 12px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem, 16px); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margem, 16px)) !important; padding: 4px var(--margem, 16px) 18px !important; }
  .v47c.carr::-webkit-scrollbar, .tb__lista.carr::-webkit-scrollbar { display: none; }
  .v47c.carr > *, .tb__lista.carr > * { flex: 0 0 82% !important; max-width: 82%; width: auto !important; scroll-snap-align: start; scroll-snap-stop: always; }
  .tb__lista.carr > li > .tb__card { height: 100%; }
  .carr__ind { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 0; color: #0B2035; }
  .carr__ind[hidden] { display: none; }
  .v47s--navy .carr__ind { color: #E8CE93; }
  .carr__pontos { display: flex; gap: 6px; }
  .carr__pontos i { width: 6px; height: 6px; border-radius: 3px; background: currentColor; opacity: 0.28; transition: width 300ms cubic-bezier(.22, 1, .36, 1), opacity 300ms linear; }
  .carr__pontos i.on { width: 20px; opacity: 0.9; }
  .carr__dica { display: inline-flex; align-items: center; gap: 6px; font: 600 0.6875rem/1 var(--f-mono, ui-monospace, monospace); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; transition: opacity 400ms linear; }
  .carr__dica svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: carr-dica 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
  .carr__ind--usado .carr__dica { opacity: 0; }
}
@keyframes carr-dica { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@media (prefers-reduced-motion: reduce) { .carr__dica svg { animation: none; } }
/* a fila do carrossel não pode alargar a coluna da seção (o grid crescia até caber a fila inteira e a página ganhava
   rolagem lateral) */
.v47s__grade > *, .v47s__vis, .v47s__texto { min-width: 0; }

/* 16. v49r · hero da home ao carregar (JM, 13/10, celular: "quando recarrega, tira o glow meio alaranjado do background;
       carregando, só o background; depois surgem os elementos do hero"). O fundo de reserva da névoa (pintado antes do
       WebGL desenhar) era um degradê marrom-dourado: agora é só o marinho. A névoa e o planeta nascem junto com a entrada
       do hero (.hpl--entrou), como o texto; até lá a tela é só o fundo. Sem JS (a trava do <head> tira o .anima em 2,5 s),
       tudo aparece normal */
.hpl__nevoa { background: linear-gradient(180deg, #0C2238 0%, #06121F 100%); }
.anima .hpl__nevoa, .anima .hpl__planeta { opacity: 0; }
.anima .hpl--entrou .hpl__nevoa { opacity: 1; transition: opacity 1200ms linear; }
.anima .hpl--entrou .hpl__planeta { opacity: 1; transition: opacity 900ms linear 200ms; }
@media (max-width: 900px) { .hpl { background: linear-gradient(180deg, #0C2238 0%, #06121F 100%); } }

/* 17. v49s · passos "ricos" (as fases do "Como funciona"): objeto 3D no topo do cartão, o nome da fase, o que a Conex
       faz e, no pé, separado por um fio, a parte do cliente ("Com você"). Lado a lado no computador, no fio dourado */
.v47p__ob { display: block; width: 64px; height: 64px; margin: 0 0 6px; }
.v47p__ob img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.4)); }
.v47p--rico .v47p__c { gap: 8px; padding: 22px 22px 20px; text-align: left; align-content: start; }
.v47p--rico .v47p__c h3 { font-size: 1.25rem; line-height: 1.18; }
.v47p--rico .v47p__c > p:not(.v47p__com) { flex: 1; }
.v47p__com { display: grid; gap: 4px; margin: 10px 0 0 !important; padding-top: 12px; border-top: 1px solid rgba(232, 206, 147, 0.24); font: 400 1.0625rem/1.3 var(--f-titulo) !important; color: #E8CE93 !important; }
.v47p__com span { font: 650 0.625rem/1.2 var(--f-mono, ui-monospace, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: #A9BCCB; }
@media (min-width: 900px) {
  .v47s--centro .v47p--rico .v47p__i { justify-items: stretch; text-align: left; }
  .v47s--centro .v47p--rico .v47p__m { justify-self: center; }
  .v47s--centro .v47p--rico .v47p__c { display: flex; flex-direction: column; }
  .v47s--centro .v47p--rico .v47p__com { margin-top: auto !important; }
}


/* 18. v49u · menu do celular (JM, 13/10): sem anel de foco no toque (só no teclado) e o nome da página com folga embaixo
       para a máscara da entrada não cortar a cedilha de "Implantação" (nem outras letras que descem) */
.v32m__item:focus:not(:focus-visible) { outline: none; }
.v32m[data-estilo="b"] .v32m__nome { padding-bottom: 0.2em; margin-bottom: -0.14em; }

/* 19. v49v · sombra cortada atrás dos cartões no celular (JM, 13/10: "uma borda sombreada por trás do card, como se
       estivesse mal renderizado; varredura no site inteiro; o background totalmente limpo"). A sombra grande (34 a 60 px
       de desfoque) dos cartões era cortada pelos contêineres que rolam de lado (carrosséis) ou recortam o conteúdo, e
       aparecia como uma faixa escura de borda reta. Varredura em todas as páginas (scratchpad/sombra.mjs): no celular os
       cartões ficam sem sombra externa, só com o fio fino de contorno */
@media (max-width: 899px) {
  .cartao-bpo, .tb__card, .bm__p, .bs-set__s, .v32d-faz__c, .v32f-tl, .dp-card, .leque__card {
    box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.16) !important; }
  .cp__ficha { box-shadow: inset 0 0 0 1px rgba(11, 32, 53, 0.12) !important; }
  .cp__ficha--conex { box-shadow: inset 0 0 0 1px rgba(232, 206, 147, 0.3) !important; }
}

/* 20. v49w (JM, 13/10: "no card 'Você manda', no mobile, escurece um pouco a cor para não se misturar com o fundo"):
       sem a sombra (item 19), o cartão claro (o lado "Você manda", "Contabilidade", "Não faz"…) sumia no marfim da
       seção. No celular ele fica um tom de areia mais fundo, com o fio dourado mais firme */
@media (max-width: 899px) {
  .cartao-bpo.cartao-bpo--claro { background: radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, #EADBB8 0%, #E2CDA2 100%);
    box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.42) !important; }
}
/* v49x (JM: "em todos os cards muito claros que se misturam com o fundo, escurece levemente para ter destaque"):
   varredura de contraste no celular (scratchpad/claros.mjs: cartão claro com luminância a menos de 16 do fundo atrás
   dele) achou, além do lado claro dos pares, o cartão de notas do "a Conex assume" e a ficha do CLT do comparativo.
   Os três ganham o mesmo tom de areia e o fio dourado firme */
@media (max-width: 899px) {
  .ba__p.ba__p--notas, .cp__ficha.cp__ficha--clt { background: radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, #EADBB8 0%, #E2CDA2 100%);
    box-shadow: inset 0 0 0 1px rgba(154, 113, 32, 0.42) !important; }
}

/* 21. v49z · o botão "Conhecer a trajetória" no fim do cartão de cada sócia (home › Quem está por trás da Conex), para o
       cartão dela em /sobre. No computador ele acende com a rolagem como o texto (.qx-pal); no celular entra com o cartão */
.qx-pessoa__ir { justify-self: start; margin-top: clamp(14px, 2svh, 22px); }
.v35q-p__ir { justify-self: start; margin-top: 6px; }
.ps-socia { scroll-margin-top: calc(var(--altura-topo, 72px) + 24px); }

/* JM, 10/11: "alinhar esse primeiro card com os outros, a parte inferior alinhada, mesma altura": numa linha, todo cartão
   do "Também cuidamos de" / "Para ler" ocupa a altura do mais alto (o texto mais curto fica centralizado no cartão) */
.tb__lista > li { display: flex; }
.tb__lista > li > .tb__card { flex: 1 1 auto; min-height: 100%; }

/* zzzzzzzzzzzzzzzzzz-v50.css */
/* v50 (15/10, JM: "melhora a qualidade da interface dentro da tela do mockup; o mockup em si não muda"): a interface
   do tablet é desenhada maior e a homografia a reduz até o vidro. Medido no Chrome (scratchpad tab/fatores.mjs): em
   tela comum o melhor é 2× (acima disso o texto serrilha: "em" vira "sm"); em retina, 3× (2× empata com 1×; 4× pesa ~60 MB
   de memória de vídeo por pouco ganho). No WebKit o fator não muda o resultado. O desenho segue sendo o de 400 × 580
   (BPO e páginas de busca) e de 800 × 1160,6 (Processos): só o bloco de dentro ganha zoom. O encaixe lê o tamanho da
   tela no CSS (encaixarTela com w = 0), então a troca de monitor reencaixa sozinha. */
.bh__tela, .v47t-tela { width: 800px; height: 1160.6px; border-radius: 16px; }
.bh__tela > .v33d-app, .v47t-tela > .v47a { zoom: 2; }
@media (min-resolution: 1.5dppx) {
  .bh__tela, .v47t-tela, .v33p-tab__tela { width: 1200px; height: 1740.9px; border-radius: 24px; }
  .bh__tela > .v33d-app, .v47t-tela > .v47a { zoom: 3; }
  .v33p-tab__tela { border-radius: 27px; }
  .v33p-tab__tela > .v33p-app { zoom: 1.5; }
}

/* o caixa projetado do topo de BPO em imagens (componentes/bpo.mjs › GRAF_AREA/GRAF_LINHA): a linha por cima da área,
   mesma entrada de antes (a linha aparece em 1 s depois de 600 ms; a área acende aos 1,1 s) */
.v33d-app__gw { height: 104px; }
.v33d-app__graf { position: absolute; inset: 0; width: 100%; height: 104px; }
.v33d-app__graf--area { opacity: 1; }
.anima .v33d-app__graf--area { opacity: 0; transition: opacity 600ms linear 1100ms; }
.anima .v33d-app__graf--linha { clip-path: inset(-8% 100% -8% 0); transition: clip-path 1000ms cubic-bezier(.4, 0, .2, 1) 600ms; }
.anima .bh--tela .v33d-app__graf--area { opacity: 1; }
.anima .bh--tela .v33d-app__graf--linha { clip-path: inset(-8% -2% -8% 0); }

/* zzzzzzzzzzzzzzzzzzz-v51.css */
/* v51 (Erika, 28/10): a Conex implanta só o administrativo, o financeiro e as vendas. Os módulos do ERP passam de seis
   para quatro (Administrativo → Vendas → Financeiro → Relatórios): grades e fios recalculados para 4 colunas */
@media (min-width: 900px) {
  .ef__trilho { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ef__linha { left: calc(100% / 8); right: calc(100% / 8); }
  .v36e__mods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v36e__fio { left: calc((100% - 3 * var(--g)) / 8); right: calc((100% - 3 * var(--g)) / 8); }
}
/* v51 (JM, 28/10): nomes novos no menu; o rolo do hover tem 1 linha de altura, então o nome nunca quebra */
.menu__rolo > span { white-space: nowrap; }

/* zzzzzzzzzzzzzzzzzzzz-v52.css */
/* v52 · ajustes da Erika (29/10, grupo do WhatsApp + documento "Pontos para serem validados") */

/* "O que a Conex assume": seis frentes (entrou Conciliações). Computador: 3 + 3 cartões iguais; tela média: 2 por linha */
@media (min-width: 900px) {
  .v33d-ba__c--notas, .v33d-ba__c--relatorio { grid-column: span 2; min-height: 290px; }
  .v33d-ba__c--notas::before, .v33d-ba__c--relatorio::before { width: 84%; right: -24%; bottom: -34%; }
  .v33d-ba__c--notas .v33d-ba__ob, .v33d-ba__c--relatorio .v33d-ba__ob { right: 18px; top: 14px; margin-top: 0; width: clamp(96px, 8vw, 122px); }
  .v33d-ba__c--notas .v33d-ba__txt, .v33d-ba__c--relatorio .v33d-ba__txt { padding-right: clamp(96px, 7.4vw, 108px); }
  .v33d-ba__c--notas .v33d-ba__r, .v33d-ba__c--relatorio .v33d-ba__r { margin-right: 0; }
  .anima .v33d-ba.vista .v33d-ba__c:nth-child(6) { transition-delay: 400ms; } .anima .v33d-ba.vista .v33d-ba__c:nth-child(6) .v33d-ba__ob { transition-delay: 700ms; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .v33d-ba__c, .v33d-ba__c--notas, .v33d-ba__c--relatorio { grid-column: span 1; min-height: 300px; }
}

/* setores: embaixo do palco, o que mais a Conex atende (Erika: "o leque é enorme") */
.bs-set__mais { display: grid; justify-items: center; gap: 12px; margin: clamp(36px, 4.5vw, 60px) auto 0; padding-top: clamp(26px, 3vw, 36px); max-width: 860px; text-align: center; box-shadow: inset 0 1px 0 rgba(232, 206, 147, 0.22); }
.bs-set__mais-t { margin: 0; font: 400 clamp(1.45rem, 1.1rem + 0.9vw, 1.9rem)/1.15 var(--f-titulo); letter-spacing: -0.01em; color: #F7F3EA; }
.bs-set__mais-l { margin: 0; max-width: 62ch; font-size: 1.0625rem; line-height: 1.7; color: #C9D8E4; text-wrap: balance; }
.bs-set__mais-l a { color: #F1DDA8; text-decoration: underline; text-decoration-color: rgba(216, 172, 82, 0.55); text-underline-offset: 0.22em; }
@media (hover: hover) and (pointer: fine){.bs-set__mais-l a:hover{ color: #FFFFFF; }}

/* ERP · painel do notebook: as contas financeiras na lateral (conta corrente e cartão, conciliados) */
.v52-ed__sec { margin-top: 14px !important; }
.v52-ed__contas { display: grid; gap: 8px; }
.v52-ed__contas li { display: flex; align-items: flex-start; gap: 12px; padding: 4px 10px; color: #A9B8C6; }
.v52-ed__contas li > .ed-i { margin-top: 1px; color: #6F8396; }
.v52-ed__contas li > span { display: grid; gap: 4px; font: 500 13px/1.1 var(--f-texto); color: #DCE4EB; white-space: nowrap; }
.v52-ed__contas small { display: flex; align-items: center; gap: 4px; font: 600 10.5px/1 var(--f-texto); color: #7FC4A0; }
.v52-ed__contas small .ed-i { width: 11px; height: 11px; stroke-width: 2.4; color: currentColor; }

/* POP no celular: "Conciliação bancária" não cabe numa linha da aba em tela estreita */
@media (max-width: 420px) { .pp__aba-t { white-space: normal; line-height: 1.2; } }

/* gerado */