/* Hallmark v2.0.0 | scope: app | theme: Atelier (dealt 3/3, seed atendimento-corretora-calmo-confi-1a75) | genre: editorial | signature: o caminho do dinheiro, linha do tempo com a data calculada */
/* waive F5: atalhos redondos pedidos pelo autor da marca */
/* critique: uma ficha de papel por pedido; a data final é a coisa maior da tela; nada pisca, porque quem lê está com medo */

@import url("tokens.css");


*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink-2);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55;
}
body.calmo { font-size: 1.125rem; }
h1, h2, h3, p { margin: 0; text-wrap: balance; }
li, small, button, .quadro-nome, .passo, .nota, .ds-cor b { text-wrap: balance; }
.corpo p, .turno { text-wrap: pretty; }
button, select, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--color-ink); text-decoration-color: var(--color-azul); }
::selection { background: var(--color-ciano); color: var(--color-ink); }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
textarea { caret-color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* página do design system */
.ds { max-width: var(--largura); margin: 0 auto; padding: 1.5rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.ds h1 { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; color: var(--color-ink); }
.ds h2 { margin-top: 1rem; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-ink); }
.ds code { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.ds-cores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.ds-cor { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; font-size: var(--text-sm); color: var(--color-ink); }
.ds-cor span { height: 4rem; border: 1px solid var(--color-rule); border-radius: var(--radius); }
.ds-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ds-layouts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.tela-modelo > h3 { margin-bottom: 0.5rem; font-weight: 600; color: var(--color-ink); }
.modelo-topo { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border-radius: var(--radius) var(--radius) 0 0; background: var(--color-ink); color: var(--color-paper); }
.modelo-marca { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.busca { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border-radius: 22px; background: var(--color-paper); color: var(--color-muted); }
.modelo-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.botao-contorno { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--color-paper); border-radius: 22px; font-weight: 600; }
.faixa-pedido { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; background: var(--color-destaque); color: var(--color-ink); }
.modelo-lista { padding: 1rem; border-radius: 0 0 var(--radius) var(--radius); background: var(--color-card); }
.modelo-lista h4 { margin: 0.5rem 0 0.25rem; font-weight: 400; color: var(--color-muted); }
.modelo-lista ul { list-style: none; margin: 0; padding: 0; }
button.botao-contorno { background: none; color: var(--color-paper); transition: background-color 180ms, color 180ms, transform var(--dur); }
button.botao-contorno:hover { background: var(--color-paper); color: var(--color-ink); }
button.botao-contorno:active { transform: scale(0.97); }
.linha-menu { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.625rem; padding: 0.5rem 0; color: var(--color-ink); }
.linha-icone { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); background: var(--color-paper-2); }
.linha-icone .icone-pacote { width: 22px; height: 22px; }
.linha-texto { display: flex; flex-direction: column; min-width: 0; }
.linha-texto b { font-weight: 600; }
.linha-texto small { color: var(--color-muted); }
.linha-menu .valor { font-weight: 800; }
.bento-corpo { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.625rem; border-radius: 0 0 var(--radius) var(--radius); background: var(--color-paper-2); }
.bento-total { padding: 1rem; border-radius: var(--radius); background: var(--color-ink); color: var(--color-paper); }
.tela-bento .faixa-pedido { border-radius: var(--radius); }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.bento-item { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; border-radius: var(--radius); background: var(--color-card); color: var(--color-ink); }
.bento-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.selo { padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--color-paper-2); font-size: 0.8125rem; }
.bento-item .valor { font-weight: 800; }
.orb.ds-orb { position: relative; right: auto; bottom: auto; display: block; }
.ds-secao { display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: 4.5rem; }
.ds-nav { display: flex; gap: 0.25rem; margin: 0 -1rem; padding: 0.5rem 1rem; overflow-x: auto; scrollbar-width: none; background: var(--color-paper); }
.ds-nav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.875rem; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-card); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: background-color 200ms, border-color 200ms, transform var(--dur); }
.ds-nav a:hover { background: var(--color-paper-2); border-color: var(--color-accent); }
.ds-nav a:active { transform: scale(0.97); }
.ds-nav a[aria-current="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.topo a, .ds a:not(.ds-nav a) { text-underline-offset: 3px; transition: color 200ms, text-decoration-color 200ms; }
html { scroll-behavior: smooth; }
@supports (animation-timeline: view()) {
}

/* configurações */
#configuracoes { max-width: var(--largura); margin: 0 auto; padding: 1.5rem 1rem 6rem; display: flex; flex-direction: column; gap: 0.75rem; }
#configuracoes h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--color-ink); }
#configuracoes .linha-extrato { align-items: center; }
.chave { flex: none; width: 24px; height: 24px; accent-color: var(--color-ink); }

/* aviso de golpe */
.pare { position: fixed; z-index: 20; inset: 0; overflow-y: auto; background: var(--color-paper); color: var(--color-ink); }
.pare[hidden] { display: none; }
.pare-dentro { max-width: var(--largura); min-height: 100%; margin: 0 auto; padding: 2rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 1rem; }
.pare h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); text-wrap: balance; }
.pare-forte { font-size: 1.125rem; }
.pare p { text-wrap: pretty; }
.pare-acoes { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pare-botao { min-height: 52px; padding: 0.25rem 1rem; border: 0; border-radius: 999px; background: var(--color-ink); color: var(--color-paper); font-weight: 800; }
.pare-sair { min-height: 44px; border: 0; border-radius: var(--radius); background: none; color: var(--color-ink); font-weight: 600; transition: background-color 180ms; }
.pare-sair:hover { background: var(--color-destaque); }

/* página do design system */
.ds .ds-nav { position: static; flex-direction: column; flex-wrap: nowrap; gap: 1rem; margin: 0; padding: 0.5rem 0 0; overflow: visible; background: none; }
.ds-logo-topo { display: block; width: auto; height: 3.5rem; }
.ds-logos { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.ds-logos figure { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.ds-logo-fundo { display: grid; place-items: center; min-height: 12rem; padding: 1.5rem; border-radius: var(--radius); background: var(--color-ink); }
.ds-logo-fundo img { display: block; width: min(100%, 20rem); height: auto; }
.ds-logo-fundo.claro { background: var(--color-paper); }
.ds-logo-fundo.claro img { width: 6rem; }
.ds-lado { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0; background: var(--color-card); }
.ds-busca { width: 100%; min-height: 44px; padding: 0 0.875rem; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-card); color: var(--color-ink); font: inherit; }
.ds-sem-item { display: none; font-size: var(--text-sm); color: var(--color-muted); }
.ds-indice { max-height: calc(100vh - 6rem); overflow-y: auto; padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--color-paper); }
.ds-indice summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; font-weight: 800; color: var(--color-ink); }
.ds-indice-grupo { display: flex; flex-direction: column; gap: 0.125rem; }
.ds-indice-grupo b { color: var(--color-ink); }
.ds-indice-grupo span { margin-top: 0.5rem; font-size: var(--text-sm); color: var(--color-muted); }
.ds .ds-nav a { min-height: 36px; padding: 0 0.625rem; border: 0; background: none; font-size: var(--text-sm); }
.ds .ds-nav a[aria-current="true"] { background: var(--color-destaque); color: var(--color-ink); }
.ds-layout { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.ds-conteudo { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.ds-grupo { margin: 1rem 0 -1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--color-ink); font-size: var(--text-xl) !important; }
.ds-secao h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-ink); }
.ds-secao h4 { margin-top: 0.5rem; font-size: var(--text-base); font-weight: 800; color: var(--color-ink); }
body:not(:has(.home)) .ds-lado { background: var(--color-paper); }
@media (min-width: 60rem) { body:not(:has(.home)) .ds-lado { background: var(--color-card); } }
.ds-amostra { max-width: 375px; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius); background: var(--color-paper); }
.ds-amostra-larga { max-width: none; }
.ds-amostra .menu-base, .ds-amostra .pare { position: static; left: auto; width: 100%; transform: none; }
.ds-amostra .chat { position: static; inset: auto; width: 100%; height: 36rem; border-radius: var(--radius); max-height: none; transform: none; animation: none; box-shadow: var(--sombra); }
.ds-amostra .pare-dentro { min-height: 36rem; }
.ds-amostra .orb { width: 80px; min-height: 56px; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0; border: 0; background: none; color: var(--color-muted); font-size: 0.75rem; font-weight: 600; }
.ds-escuro { padding: 0.75rem; border-radius: var(--radius); background: var(--color-ink); }
.ds-codigo summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--color-ink); }
.ds-codigo-bloco { position: relative; min-width: 0; }
.ds-codigo-bloco code { padding: 0; background: none; color: var(--color-paper); }
.ds-codigo-bloco pre { max-height: 22rem; margin: 0; overflow: auto; padding: 3rem 1rem 1rem; border-radius: var(--radius); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }
.ds-copiar { position: absolute; top: 0.5rem; right: 0.75rem; min-height: 32px; padding: 0.125rem 0.75rem; border: 0; border-radius: var(--radius); background: var(--color-card); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.ds-tabela { overflow-x: auto; }
.ds-tabela table { width: 100%; border-collapse: collapse; }
.ds-tabela th, .ds-tabela td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: top; }
.ds-icones { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ds-icones li { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.ds-icones .icone-pacote { width: 32px; height: 32px; color: var(--color-ink); }

.botao-contorno { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.botao-contorno svg { flex: none; }

.destaque .ficha-meta { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.ds .home-topo .home-ola { color: var(--color-paper); }

/* respiro da carteira */
.carteira { display: flex; flex-direction: column; gap: 0.75rem; }
.carteira-titulo { margin-bottom: 0.25rem; }
.carteira-total + .notas { padding: 0.25rem 0.75rem 0; }
.atalhos { gap: 0.75rem; }
.perguntas { display: flex; flex-direction: column; gap: 1rem; }

/* home: partes só do desktop */
.barra-topo, .painel-desktop, .rodape-home { display: none; }
.home > .destaque { width: calc(100% - 2rem); max-width: calc(var(--largura) - 2rem); margin: 1.25rem auto 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.ds-telas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.ds-tela { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; margin: 0; }
.ds-tela figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.ds-moldura { position: relative; overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper); }
.ds-moldura iframe { display: block; border: 0; }
.ds-celular { width: min(100%, 300px); }
.ds-celular .ds-moldura { aspect-ratio: 375 / 760; }
.ds-largo { width: 100%; }
.ds-largo .ds-moldura { aspect-ratio: 1440 / 900; }
.ds-moldura iframe[data-largura] { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

.pensando { display: inline-flex; padding: 0.25rem 0; }
.pensando svg { display: block; width: 2.25rem; height: auto; }
.pensando .sementes { transform: none; transition: none; }
.pensando .sementes path { fill: var(--color-ink); }

/* apresentação */
.deck { background: var(--color-paper); }
.slide { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding: 3rem max(1.25rem, calc(50% - 38rem)) 5rem; background: var(--color-paper); color: var(--color-ink); font-size: 1.125rem; }
.slide h1, .slide h2 { margin: 0; max-width: 24ch; font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.slide h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.slide h2 { font-size: clamp(2rem, 4.6vw, 3.75rem); }
.slide p { margin: 0; text-wrap: balance; }
.slide a { color: inherit; text-underline-offset: 3px; }
.slide-grande { max-width: 34ch; font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.3; }
.slide-nota { color: var(--color-muted); font-size: 1rem; }
.slide.escuro { background: var(--color-ink); color: var(--color-paper); }
.slide.escuro .numeros > div { background: var(--color-ink-2); }
.slide.escuro .numeros span { color: var(--color-paper); }
.slide.laranja { background: var(--color-accent); }
.capa-logo { display: block; width: min(100%, 22rem); height: auto; margin-left: -1rem; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.numeros-coluna { grid-template-columns: minmax(0, 1fr); }
.numeros > div { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border-radius: var(--radius); background: var(--color-card); }
.numeros strong { font-family: var(--font-display); font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1.1; }
.numeros span { color: var(--color-muted); }
.duas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.slide-lista { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding-left: 1.25rem; }
.alavancas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.alavancas li { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border-radius: var(--radius); background: var(--color-card); }
.alavancas strong { font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.cartoes-slide { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.cartoes-slide article { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border-radius: var(--radius); background: var(--color-card); }
.cartoes-slide h3 { margin: 0; font-size: 1.375rem; font-weight: 800; }
.moldura-largo { width: 100%; aspect-ratio: 1440 / 900; }
/* slides do Figma */
.slide { position: relative; }
.slide:not(.capa) { justify-content: flex-start; }
.slide:not(.capa) > h2 { margin-bottom: auto; }
.slide:not(.capa) > :last-child:not(.slide-assinatura), .slide:not(.capa) > :nth-last-child(2):has(+ .slide-assinatura) { margin-bottom: auto; }
.slide-assinatura { position: absolute; top: 1rem; right: max(1.25rem, calc(50% - 38rem)); display: block; width: 5.5rem; height: auto; }
.slide-corpo { max-width: 58ch; font-size: clamp(1.125rem, 1.9vw, 1.5rem); line-height: 1.4; }
.slide-largo { max-width: 46ch; }
.slide.escuro .slide-corpo { color: var(--color-paper); }
.fecho { max-width: 26ch; }
.qr-slide { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.qr-item { display: flex; flex-direction: column; gap: 0.375rem; width: clamp(7rem, 22vh, 10.5rem); color: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; }
.qr-item img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.fecho-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.fecho-links a { text-decoration: none; }
.identidade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.identidade-marca { display: flex; flex-direction: column; gap: 1.5rem; }
.identidade-marca img { display: block; width: clamp(6rem, 12vw, 10rem); height: auto; }
.identidade-dados { display: flex; flex-direction: column; gap: 1.5rem; }
.paleta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.paleta li { display: flex; flex-direction: column; gap: 0.5rem; }
.paleta span { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--color-rule); }
.identidade-frase { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.15; }
.identidade-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; margin: 0; }
.identidade-lista dt { font-weight: 800; }
.identidade-lista dd { margin: 0; line-height: 1.3; text-wrap: balance; }
.logo-versoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; font-size: 1rem; }
.logo-versoes li { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.logo-versoes span { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.logo-versoes img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.fundo-claro { background: var(--color-destaque); }
.fundo-escuro { background: var(--color-ink); }
.numeros.cinco, .numeros.quatro, .numeros.tres { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.cartoes-slide article { min-width: 0; }
.cartoes-slide b { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; line-height: 1; }
.cartoes-slide small { font-size: 1rem; font-weight: 800; }
.cartoes-slide article > strong { margin-top: auto; padding-top: 0.5rem; overflow-wrap: anywhere; font-size: 1rem; }
.slide:not(.escuro) .cartoes-slide article { background: var(--color-destaque); }
.slide.escuro .cartoes-slide article { background: var(--color-ink-2); }
.slide:not(.escuro) .numeros > div { background: var(--color-destaque); }
.slide:not(.escuro) .numeros span { color: var(--color-ink); }
.telas-slide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; margin: 0; }
.telas-slide figure, .largas-slide figure { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; min-width: 0; }
.telas-slide img, .largas-slide img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.telas-slide img { outline: 1px solid var(--color-rule); }
.telas-slide figcaption { font-size: 1rem; line-height: 1.3; text-wrap: balance; }
.largas-slide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.largas-slide figcaption { font-size: 1.125rem; line-height: 1.35; text-wrap: balance; }
.conta-slide, .escopo-slide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.conta-linhas { margin: 0; padding: 0.5rem 1.5rem; border-radius: var(--radius); background: var(--color-destaque); }
.conta-linhas div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; padding: 0.75rem 0; }
.conta-linhas dd { margin: 0; color: var(--color-ink); font-weight: 800; white-space: nowrap; }
.conta-linhas .total { border-block: 1px solid var(--color-rule); }
.conta-linhas .total dt { font-weight: 800; }
.conta-linhas .total dd { font-size: 1.75rem; }
.cartao-laranja, .escopo-slide article { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border-radius: var(--radius); }
.escopo-slide article { background: var(--color-ink-2); }
.cartao-laranja, .escopo-slide .cartao-laranja { background: var(--color-accent); color: var(--color-ink); }
.cartao-laranja h3, .escopo-slide h3 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.escopo-slide ul { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; padding-left: 1.125rem; }
.tabela-rolagem { max-width: 100%; overflow-x: auto; border-radius: var(--radius); background: var(--color-destaque); }
.tabela-slide { width: 100%; min-width: 34rem; border-collapse: collapse; }
.tabela-slide th, .tabela-slide td { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: top; }
.tabela-slide thead th { font-size: 1rem; }
.tabela-slide tbody tr:last-child > * { border-bottom: 0; }

.deck-controles { position: fixed; z-index: 4; right: 1rem; bottom: 1rem; display: none; align-items: center; gap: 0.25rem; padding: 0.25rem; border-radius: var(--radius); background: var(--color-card); color: var(--color-ink); box-shadow: var(--sombra); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.deck-controles button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius); background: none; color: var(--color-ink); transition: background-color 180ms; }
.deck-controles button:hover:not(:disabled) { background: var(--color-destaque); }
.deck-controles button[hidden] { display: none; }
.deck-controles button:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; }

/* conversa com uma pessoa */
.chat-simbolo { transition: background-color 320ms, color 320ms; }
.chat-quem { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.chat-quem h2 { margin-right: 0; line-height: 1.15; }
.chat-quem small { color: var(--color-muted); font-size: 0.75rem; font-weight: 600; }
.passagem { align-self: center; padding: 0.25rem 0.75rem; border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-sm); text-align: center; text-wrap: balance; }
.cartao-entrega { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; border-radius: var(--radius); background: var(--color-card); color: var(--color-ink); box-shadow: var(--sombra); }
.cartao-entrega h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: 800; }
.cartao-entrega a { align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; }
.aguardando { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--color-muted); font-size: var(--text-sm); }
.aguardando .chip { margin-left: auto; }
.bolha.equipe { align-self: flex-start; max-width: 85%; gap: 0.125rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); }
.bolha-nome { font-size: 0.75rem; font-weight: 800; }
.resposta { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.turnos { max-height: 16rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.turno.minha { align-self: flex-end; max-width: 85%; padding: 0.5rem 0.75rem; border-radius: var(--radius); background: var(--color-paper-2); }
.responder { display: flex; align-items: flex-end; gap: 0.5rem; }
.responder textarea { flex: 1; min-width: 0; min-height: 44px; padding: 0.625rem 0.75rem; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-card); color: var(--color-ink); font: inherit; resize: vertical; }

#lista { max-height: 40vh; overflow-y: auto; }
#lista > * { flex: none; }

/* menu inferior */
.menu-base { position: fixed; z-index: 3; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom)); background: var(--color-card); box-shadow: 0 -6px 20px -14px var(--color-ink); }
.menu-base > * { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--color-muted); font-size: 0.75rem; font-weight: 600; line-height: 1.2; text-decoration: none; touch-action: manipulation; transition: background-color 180ms, color 180ms; }
.menu-base > *:hover { background: var(--color-destaque); color: var(--color-ink); }
.menu-base > [aria-current="page"] { background: var(--color-destaque); color: var(--color-ink); }
.menu-base .icone-pacote { width: 24px; height: 24px; }
.carteira { scroll-margin-top: 1rem; }

/* carregamento */
.carregando { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: var(--color-ink); transition: opacity 800ms ease-in-out; }
.carregando svg { display: block; width: min(80vw, 28rem); height: auto; }
.sementes { transform: translateX(189px); transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); }
.sementes path { fill: var(--color-accent); opacity: 0.15; animation: semente 960ms linear infinite; animation-delay: calc(var(--n) * 120ms); }
.nome path { fill: var(--color-vermelho); }
.nome { opacity: 0; transition: opacity 700ms ease-out 350ms; }
.carregando.pronto .sementes { transform: none; }
.carregando.pronto .sementes path { animation: none; opacity: 1; }
.carregando.pronto .nome { opacity: 1; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pulso { 0% { opacity: 0.6; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes semente { 0%, 45% { opacity: 1; } 100% { opacity: 0.15; } }
.aguarde[hidden] { display: none; }
.aguarde svg { width: 7rem; }
.aguarde .sementes { transform: none; transition: none; }
.voltar { flex: none; width: 44px; height: 44px; margin-left: -0.625rem; display: grid; place-items: center; border-radius: 50%; color: var(--color-paper); transition: background-color 200ms, color 200ms; }
.voltar:hover { background: var(--color-ciano); color: var(--color-ink); }
.extrato { max-width: var(--largura); margin: 0 auto; padding: 1.5rem 1rem 6rem; display: flex; flex-direction: column; gap: 0.75rem; }
.extrato h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--color-ink); }
.lista-extrato { list-style: none; margin: 0; padding: 0; }
.linha-extrato { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-rule); }
.linha-extrato h2 { font-size: var(--text-base); font-weight: 600; color: var(--color-ink); }
.linha-extrato .dinheiro { flex: none; font-weight: 800; }
a.atalho { text-decoration: none; }
.carregando.fim { opacity: 0; pointer-events: none; }

/* faixa de demonstração: ferramenta de teste, fora do app */
.demo-faixa { background: var(--color-azul); color: var(--color-demo-ink); font-size: var(--text-sm); }
.demo-dentro { max-width: var(--largura); margin: 0 auto; padding: 0 1rem; }
.demo-abrir { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0; border: 0; background: none; color: inherit; font-weight: 600; }
.demo-abrir svg { transition: transform 200ms; }
.demo-abrir[aria-expanded="true"] svg { transform: rotate(180deg); }
.demo-faixa .demo { padding-bottom: 0.5rem; }
.demo-faixa .demo label { color: var(--color-demo-ink); }
.sem-demo .demo-faixa .demo { display: none; }

/* topo */
.topo { background: var(--color-ink); color: var(--color-paper); }
.topo a { color: var(--color-paper); }
.topo-dentro { max-width: var(--largura); margin: 0 auto; padding: 0.625rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.painel-pagina .topo-dentro { max-width: 76rem; }
.marca { margin-right: auto; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1; }
.marca small { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); margin-left: 0.5rem; }
.demo { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.demo label { font-size: var(--text-sm); color: var(--color-paper); display: flex; gap: 0.375rem; align-items: center; }
.demo select { min-height: 36px; max-width: 11rem; padding: 0 0.375rem; color: var(--color-ink); background: var(--color-card); border: 1px solid var(--color-rule); border-radius: var(--radius); }

/* início */
.home-dentro { max-width: var(--largura); margin: 0 auto; padding: 0 1rem; }
.home-topo { background: var(--color-ink); color: var(--color-paper); padding: 0.5rem 0 1.25rem; }
.home-linha { display: flex; align-items: center; gap: 0.75rem; }
.home-linha .icone { margin-left: auto; }
.avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-card); color: var(--color-ink); transition: background-color var(--dur); }
.avatar:hover { background: var(--color-ciano); }
.icone { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--color-paper); transition: background-color var(--dur); }
.icone:hover { background: var(--color-ciano); color: var(--color-ink); }
.icone[aria-pressed="true"] { background: var(--color-card); color: var(--color-ink); }
.home-ola { font-size: var(--text-lg); font-weight: 800; color: var(--color-paper); }
.home-corpo { display: flex; flex-direction: column; gap: 2rem; padding-top: 1.25rem; padding-bottom: 5.5rem; }
.saldo { color: var(--color-muted); }
.saldo-valor { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-ink); }
.saldo-data { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.2; color: var(--color-ink); }
.home.oculto .valor { color: transparent; user-select: none; border-radius: var(--radius); background: var(--color-paper-2); }
.atalhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.atalho { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.75rem 0.25rem; border: 1px solid var(--color-ambar); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); line-height: 1.3; text-align: center; }
.atalho-icone { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--color-paper-2); transition: background-color var(--dur); }
.icone-pacote { width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; }
.atalho.principal .atalho-icone { background: var(--color-ciano); }
.atalho:hover .atalho-icone { background: var(--color-ciano); }
.atalho { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 180ms, border-color 180ms, transform var(--dur); }
.atalho:hover { background: var(--color-destaque); border-color: var(--color-accent); }
.atalho:active { background: var(--color-accent); border-color: var(--color-accent); transform: scale(0.97); }
.atalho:active .atalho-icone { background: var(--color-card); }
.caixinhas-titulo { margin-bottom: 0.5rem; font-size: var(--text-base); font-weight: 800; color: var(--color-ink); }
.quadros { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.625rem; padding-bottom: 0.25rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.quadro.aberta { flex-basis: min(21rem, 100%); }
.quadro { flex: 0 0 calc((100% - 1rem) / 3); min-width: 0; scroll-snap-align: start; background: var(--color-paper); border: 1px solid var(--color-ambar); border-radius: var(--radius); overflow: hidden; transition: border-color var(--dur); }
.quadro:hover { background: var(--color-destaque); border-color: var(--color-accent); }
.quadro:active { background: var(--color-destaque); }
.quadro.aberta { background: var(--color-card); border-color: var(--color-accent); }
.quadro-topo { width: 100%; height: 100%; aspect-ratio: 610 / 742; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; border: 0; background: none; color: var(--color-ink); text-align: left; }
.quadro.aberta .quadro-topo { aspect-ratio: auto; height: auto; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.75rem; padding: 0.625rem 0.75rem; }
.quadro-nome { font-size: 0.8125rem; line-height: 1.2; color: var(--color-muted); overflow-wrap: break-word; }
.quadro-valor { margin-top: auto; font-size: var(--text-sm); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ink); }
.quadro-taxa { font-size: 0.8125rem; color: var(--color-muted); }
.quadro.aberta .quadro-valor { margin-top: 0; }
.quadro-abre { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 240ms, visibility 240ms; }
.quadro.aberta .quadro-abre { grid-template-rows: 1fr; visibility: visible; }
.quadro-linha { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.625rem; }
.quadro.aberta .quadro-linha { padding: 0.25rem 0.75rem 0.75rem; }
.carteira { display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--text-sm); color: var(--color-muted); }
.setores { display: flex; align-items: center; gap: 1rem; max-width: 26rem; margin: 0.75rem 0 0.25rem; }
.pizza { flex: none; width: 6.5rem; height: 6.5rem; border-radius: 50%; }
.setores-legenda { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.setores-legenda li { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.setor-cor { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.setores-legenda .valor { font-weight: 600; color: var(--color-ink); }
.home.oculto .pizza { filter: grayscale(1); opacity: 0.4; }
.carteira-titulo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.625rem; }
.carteira-titulo .caixinhas-titulo { margin: 0; }
.vista-seletor { flex: none; min-height: 36px; padding: 0 0.375rem; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-card); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
[data-painel] { display: none; }
.carteira[data-vista="caixinhas"] [data-painel="caixinhas"], .carteira[data-vista="lista"] [data-painel="lista"], .carteira[data-vista="grafico"] [data-painel="grafico"] { display: block; animation: entra 240ms ease-out both; }
.linha-dinheiro { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-rule); }
.linha-topo { display: flex; justify-content: space-between; gap: 0.75rem; }
.linha-topo h3 { font-size: var(--text-base); font-weight: 600; color: var(--color-ink); }
.linha-topo .valor { flex: none; font-weight: 800; color: var(--color-ink); }
.topo-rotulo { margin-top: 0.75rem; color: var(--color-paper); }
.topo-total { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-paper); }
.destaque { --faixa: var(--color-accent); padding: 0.75rem 1rem 0.25rem; border-radius: var(--radius); background: var(--faixa); color: var(--color-ink); }
.destaque[data-situacao="analise"] { --faixa: var(--color-alerta-fundo); }
.destaque[data-situacao="atrasado"] { --faixa: var(--color-status-atraso); }
.destaque[data-situacao="concluido"] { --faixa: var(--color-paper-2); }
.destaque[data-situacao="recusado"] { --faixa: var(--color-status-recusado); }
.destaque-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.destaque-fechar { width: 44px; height: 44px; margin: -0.5rem -0.75rem -0.5rem 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--color-ink); transition: background-color 180ms; }
.destaque-fechar:hover { background: var(--color-destaque); }
.destaque .ficha { padding: 0.5rem 0 0.75rem; background: none; box-shadow: none; }
.destaque .ficha.atrasada { box-shadow: none; background: none; }
.destaque .ficha h3, .destaque .ficha .ficha-meta, .destaque .ficha .notas { color: var(--color-ink); }
.destaque .ficha h3, .destaque .ficha .ficha-meta, .destaque .ficha .rastreio li, .destaque .ficha .nota, .destaque .ficha .notas { color: var(--color-ink); }
.destaque .ficha .rastreio li::after { background: var(--color-ink); }
.destaque .ficha .marco { background: var(--faixa); border-color: var(--color-ink); }
.destaque .ficha .feita .marco { background: var(--color-ink); }
.destaque .ficha .agora .marco { background: var(--color-ciano); }
.carteira-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.75rem; margin-top: 0.375rem; padding: 0.625rem 0.75rem; border-radius: 10px; background: var(--color-paper-2); }
.carteira > .notas { padding: 0.375rem 0.75rem 0; }
.carteira-total .valor { font-weight: 800; color: var(--color-ink); }

.home-corpo > *, .ds > h1, .ds > p, .ds > .ds-nav { animation: entra 420ms ease-out both; }
.home-corpo > :nth-child(2) { animation-delay: 60ms; }
.home-corpo > :nth-child(3) { animation-delay: 120ms; }
.home-corpo > :nth-child(4) { animation-delay: 180ms; }
.home-corpo > :nth-child(n + 5) { animation-delay: 240ms; }
.chat { animation: entra 240ms ease-out both; }
.bolha { animation: entra 240ms ease-out both; }

/* conversa */
.app { display: flex; flex-direction: column; min-height: 100dvh; }
.fio { flex: 1; min-height: 0; overflow-y: auto; width: 100%; padding: 1rem 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.bolha { max-width: 100%; display: flex; flex-direction: column; gap: 0.625rem; }
.bolha.cliente { align-self: flex-end; max-width: 85%; background: var(--color-ink); color: var(--color-paper); padding: 0.5rem 0.75rem; border-radius: var(--radius); overflow-wrap: anywhere; }
.bolha.cliente p { text-wrap: pretty; }
.bolha .corpo { display: flex; flex-direction: column; gap: 0.5rem; color: var(--color-ink); }
.bolha .corpo ul { margin: 0; padding-left: 1.125rem; }
.bolha .corpo strong { font-weight: 600; }
.bolha .corpo table { border-collapse: collapse; }
.bolha .corpo td { border-bottom: 1px solid var(--color-rule); padding: 0.25rem 1rem 0.25rem 0; }
.saudacao { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.1; color: var(--color-ink); }
.conta-linha { color: var(--color-muted); }

.fontes { font-size: var(--text-sm); color: var(--color-muted); }
.fontes summary { min-height: 28px; cursor: pointer; }
.fontes-lista { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding-top: 0.25rem; }
.fonte { background: none; border: 0; padding: 0; min-height: 28px; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-azul); text-underline-offset: 2px; text-align: left; }
.artigo { border-left: 2px solid var(--color-rule); padding-left: 0.75rem; font-size: var(--text-sm); }

.chips { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.chip { min-height: 40px; padding: 0.25rem 0.75rem; background: var(--color-card); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: var(--radius); transition: background-color var(--dur), border-color var(--dur); }
.chip { max-width: 100%; font-size: 0.875rem; font-weight: 600; line-height: 1.25; text-align: left; text-wrap: wrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 180ms, border-color 180ms, transform var(--dur); }
.chip:hover { background: var(--color-destaque); border-color: var(--color-accent); }
.chip:active { background: var(--color-accent); border-color: var(--color-accent); transform: scale(0.97); }
.chip.escolhido { background: var(--color-accent); border-color: var(--color-accent); }
.chip:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: default; }

/* ficha */
.ficha { background: var(--color-card); box-shadow: var(--sombra); border-radius: var(--radius); padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ficha h3 { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); }
.ficha.atrasada { background: var(--color-atraso-fundo); box-shadow: inset 0 0 0 1px var(--color-atraso); }
.quando { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.1; color: var(--color-ink); }
.ficha-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; font-size: var(--text-sm); color: var(--color-muted); }
.dinheiro { color: var(--color-ink); font-weight: 600; }
.rastreio { list-style: none; margin: 0.375rem 0 0; padding: 0; display: flex; }
.rastreio li { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; padding-right: 0.625rem; font-size: 0.8125rem; line-height: 1.25; color: var(--color-muted); }
.rastreio li::after { content: ""; position: absolute; left: 1.125rem; right: 0; top: 0.5rem; height: 2px; background: var(--color-rule); }
.rastreio li:last-child::after { display: none; }
.rastreio .feita::after { background: var(--color-accent); }
.marco { width: 1.125rem; height: 1.125rem; margin-bottom: 0.375rem; border: 2px solid var(--color-rule); border-radius: 50%; background: var(--color-card); }
.rastreio .feita .marco { background: var(--color-accent); border-color: var(--color-accent); }
.rastreio .agora .marco { background: var(--color-ciano); border-color: var(--color-ink); }
.rastreio .agora, .rastreio .feita { color: var(--color-ink); }
.rastreio .agora .passo { font-weight: 800; }
.rastreio time { font-variant-numeric: tabular-nums; color: var(--color-ink); }
.rastreio .dinheiro { font-size: 0.75rem; white-space: nowrap; }
.rastreio .nota { color: var(--color-muted); }
.notas { font-size: var(--text-sm); color: var(--color-muted); }

.tabela { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tabela td { padding: 0.3125rem 0; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela.soma tr:last-child td { color: var(--color-ink); font-weight: 600; }
.tabela td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 1rem; color: var(--color-ink); }

.aviso { background: var(--color-alerta-fundo); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-alerta); border-radius: var(--radius); padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.625rem; align-items: flex-start; }
.aviso strong { font-weight: 600; }
.botao-forte { min-height: 44px; padding: 0.25rem 1rem; font-weight: 800; background: var(--color-alerta); color: var(--color-ink); border: 0; border-radius: var(--radius); }
.botao-forte:hover { background: var(--color-atraso); }
.botao-forte:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: default; }

/* rodapé fixo com a saída */
.chat[hidden] { display: none; }
.orb[hidden] { display: none; }
.orb-disco { position: relative; display: block; width: 40px; height: 40px; margin-top: -16px; border-radius: 50%; color: var(--color-orb); transition: transform 180ms; }
.orb-disco svg { position: relative; display: block; width: 100%; height: 100%; }
.orb-disco::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-orb); animation: pulso 2200ms ease-out infinite; }
.orb:hover .orb-disco { transform: scale(1.06); }
.orb:active .orb-disco { transform: scale(0.96); }
.orb-raios { fill: var(--color-accent); }
.base-pessoa { white-space: nowrap; min-height: 40px; padding: 0 0.875rem; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-card); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; transition: background-color 200ms, border-color 200ms, transform var(--dur); }
.base-pessoa:hover { background: var(--color-paper-2); border-color: var(--color-accent); }
.base-pessoa:active { transform: scale(0.97); }
.chat { position: fixed; z-index: 5; inset: 0; width: 100%; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--color-paper); box-shadow: 0 0 0 100vmax var(--color-veu), 0 16px 48px -12px var(--color-ink); }
.chat-topo { display: flex; align-items: center; gap: 0.5rem; padding: calc(0.5rem + env(safe-area-inset-top)) 0.25rem 0.5rem 0.75rem; }
.chat-topo .base-pessoa { padding: 0 0.625rem; }
.chat-simbolo { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--color-orb); }
.chat-topo { transition: background-color 420ms; }
.chat.humano .chat-topo { background: var(--color-paper-2); }
.chat.humano .chat-simbolo { background: var(--color-ink); color: var(--color-paper); }
.chat.humano .chat-simbolo svg { width: 20px; height: 20px; }
.chat.humano .chat-topo .base-pessoa { display: none; }
.chat.seguranca .chat-topo { background: var(--color-alerta-fundo); }
.chat-topo h2 { margin-right: auto; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--color-ink); }
.chat-fechar { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--color-ink); }
.chat-fechar:hover { background: var(--color-paper-2); }
.chat-base { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem 1rem calc(0.25rem + env(safe-area-inset-bottom)); }
.mais { font-size: var(--text-sm); color: var(--color-muted); }
.mais summary { min-height: 44px; display: flex; align-items: center; gap: 0.25rem; cursor: pointer; list-style: none; }
.mais summary::-webkit-details-marker { display: none; }
.mais summary:hover { color: var(--color-ink); }
.mais-fechar, .mais[open] .mais-abrir { display: none; }
.mais[open] .mais-fechar { display: inline; }
.mais-seta { transition: transform 180ms; }
.mais[open] .mais-seta { transform: rotate(180deg); }
.mais[open] > :not(summary) { animation: entra 200ms ease-out both; }
.chat .ficha { box-shadow: none; border-radius: var(--radius); }
.chat .fio { scrollbar-width: thin; }
.campo { display: flex; gap: 0.5rem; }
.microfone { position: absolute; right: 2px; bottom: 2px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--color-ink); transition: background-color 200ms; }
.microfone[hidden] { display: none; }
.microfone:hover { background: var(--color-paper-2); }
.microfone[aria-pressed="true"] { background: var(--color-alerta); border-color: var(--color-alerta); }
.campo-texto { position: relative; flex: 1; min-width: 0; display: flex; }
.campo textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 7rem; resize: none; overflow-y: hidden; padding: 0.5625rem 3rem 0.5625rem 0.75rem; background: var(--color-card); border: 1px solid var(--color-rule); border-radius: var(--radius); }
.campo textarea::placeholder { white-space: nowrap; }
.primario { min-height: 44px; padding: 0 1rem; font-weight: 800; background: var(--color-accent); color: var(--color-accent-ink); border: 0; border-radius: var(--radius); transition: background-color var(--dur); }
.enviar-icone { flex: none; width: 44px; padding: 0; display: grid; place-items: center; }
.primario:hover { background: var(--color-ciano); }
.primario:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: default; }
.saidas { display: flex; flex-wrap: wrap; gap: 0 0.875rem; align-items: center; font-size: var(--text-sm); }
.saidas button { background: none; border: 0; padding: 0; min-height: 36px; color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
.saidas button:hover { text-decoration-color: var(--color-azul); }
.saidas .pessoa { font-weight: 600; }
.horario { font-size: var(--text-sm); color: var(--color-muted); }

/* painel */
.painel { max-width: 76rem; margin: 0 auto; padding: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.fila { display: flex; flex-direction: column; gap: 0.5rem; }
.fila h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--color-ink); }
.item { display: flex; flex-direction: column; gap: 0.125rem; width: 100%; min-height: 44px; text-align: left; padding: 0.5rem 0.75rem; background: var(--color-card); border: 1px solid var(--color-rule); border-radius: var(--radius); color: var(--color-ink); transition: border-color var(--dur); }
.item:hover, .item[aria-current="true"] { border-color: var(--color-accent); }
.item small { color: var(--color-muted); font-size: var(--text-sm); }
.item.prioridade { border-color: var(--color-atraso); background: var(--color-atraso-fundo); }
.item.seguranca { border-color: var(--color-alerta); background: var(--color-alerta-fundo); }
.vazio { color: var(--color-muted); }
.caso { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.caso h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.1; color: var(--color-ink); }
.caso h3.secao { font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); color: var(--color-ink); }
.colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.coluna { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.turno { font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.turno b { font-weight: 600; color: var(--color-ink); }
.dados { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem 1rem; margin: 0; font-size: var(--text-sm); }
.dados dt { color: var(--color-muted); }
.dados dd { margin: 0; color: var(--color-ink); }
.esqueleto { height: 3.5rem; background: var(--color-paper-2); border-radius: var(--radius); }

@media (min-width: 60rem) {
  .chat { left: auto; right: 0; width: 30rem; }
  .ds-amostra .chat { width: 100%; }
  .painel-pagina { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  .painel-pagina .painel { flex: 1; width: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .painel-pagina .painel > .fila { min-height: 0; }
  .painel-pagina #lista { flex: 1; min-height: 0; max-height: none; }
  .painel-pagina .caso { min-height: 0; overflow-y: auto; padding-right: 0.5rem; }
  .deck-controles { display: flex; }
  .slide:not(.capa) { padding-top: 2.5rem; }
  .slide-assinatura { top: 1.75rem; width: 9rem; }
  .logo-versoes { grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 1.125rem; }
  .identidade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4rem; align-items: center; }
  .paleta { grid-template-columns: repeat(6, minmax(0, 1fr)); font-size: 1rem; }
  .paleta span { aspect-ratio: 2 / 1; }
  .identidade-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; font-size: 1.125rem; }
  .telas-slide { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: start; }
  .telas-slide figure { width: min(100%, calc((100vh - 15rem) * 0.46)); }
  .largas-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .largas-slide figure { max-width: calc((100vh - 18rem) * 1.62); }
  .conta-slide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .escopo-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros.cinco, .cartoes-slide.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .numeros.quatro, .cartoes-slide.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .numeros.tres, .cartoes-slide.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cartoes-slide.quatro, .escopo-slide, .tabela-slide, .conta-slide .cartao-laranja { font-size: 1.125rem; }
  .cartoes-slide.cinco { font-size: 1.1875rem; }
  .cartoes-slide.tres { font-size: 1.25rem; }
  .slide { display: none; height: 100vh; min-height: 0; padding-top: 2rem; padding-bottom: 3.5rem; overflow: hidden; }
  .slide.atual { display: flex; }
  .slide { font-size: 1.375rem; }
  .slide-nota { font-size: 1.125rem; }
  .slide-lista { gap: 1.25rem; }
  .slide.atual > * { animation: entra 320ms ease-out both; }
  .duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  .duas.produto { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .ds { max-width: 76rem; padding: 2rem 1.5rem 4rem; }
  body:has(.ds-layout) .topo-dentro { max-width: 76rem; padding-inline: 1.5rem; }
  .ds-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }
  .ds-lado { top: 0; padding-top: 1rem; }
  .ds-indice { padding: 1rem; }
  .ds-indice summary { display: none; }
  .ds-grupo:first-child { margin-top: 0; }
  #status .ds-amostra { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
  body:has(> .barra-topo) { display: flex; flex-direction: column; min-height: 100vh; }
  body:has(> .barra-topo) > main { flex: 1; width: 100%; }
  body:has(> .barra-topo) > .topo { display: none; }
  .extrato, #configuracoes { max-width: 76rem; min-height: 60vh; padding: 2rem 1.5rem 3rem; gap: 1.25rem; }
  .extrato .saldo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); }
  .extrato .saldo .dinheiro { font-weight: 800; }
  .linha-extrato { align-items: center; padding: 1rem 0; }
  .rodape-dentro a { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-ink); font-weight: 600; }
  body { background: var(--color-card); }
  body:has(.barra-topo) .menu-base, .home > .home-topo { display: none; }
  .barra-topo { display: block; background: var(--color-ink); color: var(--color-paper); }
  .barra-dentro { max-width: 76rem; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
  .barra-logo { flex: none; display: block; }
  .barra-logo img { display: block; width: auto; height: 3rem; }
  .busca-topo { flex: 0 1 26rem; min-height: 44px; display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; border-radius: 22px; background: var(--color-paper); color: var(--color-ink); }
  .busca-topo input { flex: 1; min-width: 0; border: 0; background: none; color: var(--color-ink); font: inherit; outline: none; }
  .busca-topo input::placeholder { color: var(--color-muted); }
  .busca-topo:focus-within { box-shadow: 0 0 0 2px var(--color-focus); }
  .menu-topo { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
  .menu-topo > * { min-height: 40px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.875rem; border: 0; border-radius: var(--radius); background: none; color: var(--color-paper); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: background-color 180ms; }
  .menu-topo > :hover, .menu-topo > [aria-current="page"] { background: var(--color-ink-2); }
  .menu-topo > [aria-current="page"] { font-weight: 800; }
  .menu-topo .orb-disco { width: 24px; height: 24px; margin: 0; color: var(--color-paper); }
  .menu-topo .orb-disco::before { display: none; }
  .menu-topo .orb-raios { fill: var(--color-ink); }
  .barra-nome { margin-left: 0.75rem; font-size: var(--text-sm); font-weight: 600; }
  .home > .destaque { position: relative; width: auto; max-width: none; margin: 0; padding: 1.75rem max(3.5rem, calc(50% - 36.5rem)) 1.75rem max(1.5rem, calc(50% - 36.5rem)); border-radius: 0; }
  .home > .destaque .destaque-fechar { position: absolute; top: 0.75rem; right: 0.75rem; margin: 0; }
  .home > .destaque .ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); column-gap: 2.5rem; align-items: start; padding: 0.5rem 0 0; }
  .home > .destaque .ficha > * { grid-column: 1; }
  .home > .destaque .ficha .rastreio { --faixa: var(--color-card); grid-column: 2; grid-row: 1 / span 4; margin-top: -1.75rem; padding: 1.25rem 1.25rem 1rem; border-radius: var(--radius); background: var(--color-card); }
  .home-corpo { display: block; max-width: 76rem; padding: 2rem 1.5rem 3rem; }
  .home-corpo > :not(.painel-desktop):not(.ficha) { display: none; }
  .home-corpo > .ficha { margin-top: 1.5rem; }
  .painel-desktop { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 2rem; align-items: start; }
  .painel-principal, .painel-lateral { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
  .saldo-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; border-radius: var(--radius); background: var(--color-ink); color: var(--color-paper); }
  .saldo-card .topo-rotulo { margin-top: 0; }
  .saldo-card .modelo-acoes { flex: none; display: flex; gap: 1rem; margin-top: 0; }
  .saldo-card .botao-contorno { min-width: 9rem; padding: 0 1.25rem; background: none; color: var(--color-paper); transition: background-color 180ms, color 180ms; }
  .saldo-card .botao-contorno:hover { background: var(--color-paper); color: var(--color-ink); }
  .conta-linha { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); text-decoration: none; transition: background-color 180ms; }
  .conta-linha:hover { background: var(--color-destaque); }
  .conta-texto { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
  .conta-texto small { color: var(--color-muted); font-size: var(--text-sm); }
  .tabela-produtos { scroll-margin-top: 1rem; overflow-x: auto; }
  .tabela-produtos table { width: 100%; border-collapse: collapse; }
  .tabela-produtos th { padding: 0 1rem 0.75rem 0; border-bottom: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; text-align: left; }
  .tabela-produtos td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink); vertical-align: middle; }
  .tabela-produtos td:last-child, .tabela-produtos th:last-child { width: 44px; padding-right: 0; }
  .produto-nome { font-weight: 600; }
  .tabela-produtos td:not(.produto-nome), .tabela-produtos th { white-space: nowrap; }
  .produto-celula { display: flex; align-items: center; gap: 0.75rem; }
  .produto-celula .linha-icone { flex: none; }
  .painel-principal .conta-linha .valor, .tabela-produtos .valor { font-weight: 800; color: var(--color-ink); }
  .lateral-card h3 .icone-pacote { flex: none; }
  .linha-abrir { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--color-ink); transition: background-color 180ms; }
  .linha-abrir:hover { background: var(--color-destaque); }
  .novo-produto { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem 0 0; border: 0; border-radius: var(--radius); background: none; color: var(--color-ink); font-weight: 600; }
  .novo-produto:hover { text-decoration: underline; text-underline-offset: 3px; }
  .lateral-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); }
  .lateral-card h3 { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: var(--text-base); font-weight: 800; }
  .lateral-card .icone-pacote { width: 20px; height: 20px; }
  .lateral-valor { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; }
  .rodape-home { display: block; background: var(--color-paper); color: var(--color-muted); font-size: var(--text-sm); }
  .rodape-dentro { max-width: 76rem; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
  .rodape-dentro button { min-height: 44px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; border: 0; background: none; color: var(--color-ink); font-weight: 600; }
  .rodape-dentro button:hover { text-decoration: underline; text-underline-offset: 3px; }
  .menu-base { left: 50%; right: auto; bottom: 0.75rem; width: 32rem; transform: translateX(-50%); padding: 0.25rem; border-radius: var(--radius); box-shadow: var(--sombra); }
  .home-dentro, .demo-dentro { max-width: 76rem; }
  .ds-layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quadro:not(.aberta) .quadro-topo { aspect-ratio: auto; min-height: 9rem; }
  .painel { grid-template-columns: 20rem minmax(0, 1fr); }
  .colunas { grid-template-columns: minmax(0, 1fr) 22rem; }
}
@media (max-width: 22.5rem) {
  .chat-topo .base-pessoa { white-space: normal; line-height: 1.15; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-corpo > *, .ds > *, .ds-secao, .chat, .bolha, .orb-disco::before, .mais[open] > :not(summary), .slide.atual > * { animation: none; }
  .orb-disco::before { opacity: 0; }
  .sementes path { animation: none; opacity: 1; }
  .sementes, .nome { transition: none; }
  * { transition: none !important; scroll-behavior: auto !important; }
}