:root { --nt-estrela: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M46.67 16.44A3.4 3.4 0 0 1 53.33 16.44L56.15 30.35A6 6 0 0 0 63.94 34.85L77.39 30.34A3.4 3.4 0 0 1 80.73 36.11L70.09 45.50A6 6 0 0 0 70.09 54.50L80.73 63.89A3.4 3.4 0 0 1 77.39 69.66L63.94 65.15A6 6 0 0 0 56.15 69.65L53.33 83.56A3.4 3.4 0 0 1 46.67 83.56L43.85 69.65A6 6 0 0 0 36.06 65.15L22.61 69.66A3.4 3.4 0 0 1 19.27 63.89L29.91 54.50A6 6 0 0 0 29.91 45.50L19.27 36.11A3.4 3.4 0 0 1 22.61 30.34L36.06 34.85A6 6 0 0 0 43.85 30.35Z'/></svg>"); --nt-estrela-tile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'><path transform='translate(22 22) scale(.12)' d='M46.67 16.44A3.4 3.4 0 0 1 53.33 16.44L56.15 30.35A6 6 0 0 0 63.94 34.85L77.39 30.34A3.4 3.4 0 0 1 80.73 36.11L70.09 45.50A6 6 0 0 0 70.09 54.50L80.73 63.89A3.4 3.4 0 0 1 77.39 69.66L63.94 65.15A6 6 0 0 0 56.15 69.65L53.33 83.56A3.4 3.4 0 0 1 46.67 83.56L43.85 69.65A6 6 0 0 0 36.06 65.15L22.61 69.66A3.4 3.4 0 0 1 19.27 63.89L29.91 54.50A6 6 0 0 0 29.91 45.50L19.27 36.11A3.4 3.4 0 0 1 22.61 30.34L36.06 34.85A6 6 0 0 0 43.85 30.35Z'/></svg>"); }
/* Notório Studios · bundle.css
   Carregue depois de tokens.css. Toda cor vem de um token; nada aqui funciona só em um tema.
   Prefixo nt-. Estados forçados para documentação: .is-hover .is-focus .is-active .is-loading .is-error .is-selected
   Movimento: transições (não keyframes) para estado; hover só em ponteiro fino; movimento reduzido vira crossfade. */

*, *::before, *::after { box-sizing: border-box; }
:root { --nt-movimento: 1; }
@media (prefers-reduced-motion: reduce) { :root { --nt-movimento: 0; } }
:root[data-movimento="reduzido"], .nt-reduzido { --nt-movimento: 0; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* troca de tema (Notorio.tema): dissolvência curta da página inteira, onde o navegador tem View Transitions */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--duracao-base); animation-timing-function: var(--curva-padrao); }

img, video, svg { max-width: 100%; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; }

/* complementos das classes de tipo geradas por tokens.css */
.rotulo, .rotulo-l { text-transform: uppercase; }
.dado, .metrica-1, .metrica-2, .metrica-3, .matriz, .indice { font-variant-numeric: tabular-nums; }
.letreiro { text-transform: uppercase; color: var(--letreiro); }
.letreiro.is-suave, .nt-ed-letreiro.is-suave { color: var(--letreiro-suave); }
.indice { color: var(--letreiro); }

/* recursos tipográficos das peças editoriais (medidos nos posts do estúdio) */
/* tom duplo: o começo da frase em tinta e a continuação em cinza, no mesmo corpo. Só de 24 px para cima. */
.nt-eco { color: var(--tinta-eco); }
/* imagem em pílula dentro da frase: acompanha o corpo do título; a margem negativa não abre a entrelinha */
.nt-pilula-imagem { display: inline-block; width: 2.4em; height: 1.08em; margin: -.16em .08em; border-radius: var(--raio-pilula); object-fit: cover; vertical-align: -.2em; outline: 1px solid var(--contorno-imagem); outline-offset: -1px; }
/* citação sublinhada em cinza: a frase do estúdio, linha a linha */
.nt-citacao-linha { color: var(--tinta-eco); text-decoration: underline; text-decoration-thickness: max(1px, .05em); text-underline-offset: .16em; text-decoration-skip-ink: none; }

/* grade visível (ligue .is-guias, por exemplo com um switch data-nt-guias): colunas e linha de base por cima do container */
:root { --guia-coluna: color-mix(in srgb, var(--destaque) 9%, transparent); --guia-linha: color-mix(in srgb, var(--destaque) 32%, transparent); --guia-zona: color-mix(in srgb, var(--erro) 30%, transparent); }

/* foco: 2px sólido, 3px afastado, em tudo que é interativo */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.is-focus { outline: 2px solid var(--foco); outline-offset: 3px; }

/* imagem de conteúdo: contorno de 1px por dentro, preto ou branco a 10% */
.nt-midia, .nt-midia > img, .nt-midia > video { outline: 1px solid var(--contorno-imagem); outline-offset: -1px; }

.nt-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* v4.0: sem fonte mono. Dado, código de job e timecode são Inter Tight com algarismos tabulares (--font-mono é apelido da sans). */
.nt-mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.nt-matriz { font-family: var(--font-matriz); }
/* Doto com pontos redondos: o @import já traz a fonte fixa em ROND 100; a regra garante o mesmo desenho se a Doto variável completa for hospedada no site */
.nt-matriz, .metrica-1, .metrica-2, .metrica-3, .matriz, .nt-metrica__valor, .nt-post__metrica, .nt-enquete__opcao b, .nt-faixa__valor, .nt-proposta__total b { font-variation-settings: "ROND" 100; }
.nt-icone { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.nt-icone :is(path, circle, rect, line, polyline) { vector-effect: non-scaling-stroke; }
.nt-icone--s { width: 16px; height: 16px; }
.nt-icone--l { width: 24px; height: 24px; }

/* ---------- Horizonte: o gradiente-assinatura (arquivo Rectangle 51) ---------- */
.nt-horizonte {
  background: linear-gradient(180deg,
    var(--horizonte-0) 0%, var(--horizonte-0) 24.5%,
    var(--horizonte-1) 35%, var(--horizonte-2) 50%,
    var(--horizonte-3) 74%, var(--horizonte-4) 100%);
}
.nt-horizonte--invertido {
  background: linear-gradient(0deg,
    var(--horizonte-0) 0%, var(--horizonte-0) 24.5%,
    var(--horizonte-1) 35%, var(--horizonte-2) 50%,
    var(--horizonte-3) 74%, var(--horizonte-4) 100%);
}
.nt-horizonte--noite { background: linear-gradient(180deg, var(--horizonte-0) 0%, var(--horizonte-0) 30%, var(--horizonte-1) 66%, var(--azul-700) 88%, var(--horizonte-2) 100%); }
.nt-horizonte--brilho { background: radial-gradient(120% 70% at 50% 115%, var(--horizonte-3) 0%, var(--horizonte-2) 28%, var(--horizonte-1) 55%, transparent 78%), var(--horizonte-0); }
.nt-horizonte--nevoa { background: linear-gradient(180deg, var(--neutro-50) 0%, var(--horizonte-4) 46%, var(--horizonte-3) 82%, var(--azul-400) 100%); }

/* grão de película 35mm: pseudo-elemento fixo, sem eventos, nunca em container que rola */
.nt-grao { position: relative; isolation: isolate; }
.nt-grao::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--opacidade-grao); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size: 160px 160px;
}

/* entrada escalonada (better-ui): opacidade + 4px de desfoque + 12px; 100ms entre blocos */
.nt-entra { animation: nt-entra-op var(--duracao-media) var(--curva-entrada) both; animation-delay: calc(var(--i, 0) * 100ms); }
@media (prefers-reduced-motion: no-preference) { :root:not([data-movimento="reduzido"]) .nt-entra { animation-name: nt-entra; } }
@keyframes nt-entra-op { from { opacity: 0; } }
@keyframes nt-entra { from { opacity: 0; filter: blur(4px); transform: translateY(var(--desloc-entrada)); } }

/* carregando: três pontos de matriz */
.nt-carregando { display: inline-flex; gap: 3px; align-items: center; height: 1em; }
.nt-carregando i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: nt-ponto 900ms linear infinite; }
.nt-carregando i:nth-child(2) { animation-delay: 150ms; }
.nt-carregando i:nth-child(3) { animation-delay: 300ms; }
@keyframes nt-ponto { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

@keyframes nt-pulso { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 calc(5px * var(--nt-movimento)) transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes nt-giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nt-carregando i { animation: none; opacity: .6; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --vidro: var(--superficie); }
}

/* rótulo numerado: o número no círculo (o preto da pílula no claro) e o nome ao lado. O catálogo usa nas caixas de
   documentação e o site pessoal nas ofertas, por isso fica no bundle de todos. */
.nt-doc-rotulo { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 16px/1.3 var(--font-sans); letter-spacing: -.005em; color: var(--tinta); }
.nt-doc-rotulo > b { display: grid; place-items: center; flex: none; min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--raio-pilula); background: var(--pilula-circulo); color: var(--pilula-circulo-tinta);
  font: 800 11px/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; }

/* =========================================================
   MARCA (as peças de identidade: logo, estrela, selo e padrão)
   Os quadros de referência das páginas de Marca e Fundamentos estão em 90-doc.css.
   ========================================================= */

/* logo inline: fill = currentColor, a cor vem do contexto */
.nt-logo { display: inline-block; color: inherit; line-height: 0; }
.nt-logo svg { display: block; height: 100%; width: auto; fill: currentColor; }
.nt-logo--completa { height: 56px; }
.nt-logo--reduzida, .nt-logo--compacta { height: 28px; }
.nt-logo--estrela { height: 40px; }

/* estrela ✶: o elemento de apoio e o símbolo */
.nt-estrela { display: inline-block; width: .72em; height: .72em; color: var(--destaque); vertical-align: -.06em; flex: none; line-height: 0; }
.nt-estrela svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.nt-lista-estrela { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-3); }
.nt-lista-estrela > li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.nt-lista-estrela > li::before {
  content: ""; width: 10px; height: 10px; transform: translateY(1px); background: var(--destaque);
  -webkit-mask: var(--nt-estrela) center / contain no-repeat; mask: var(--nt-estrela) center / contain no-repeat;
}
.nt-separador { display: flex; align-items: center; gap: var(--espaco-3); }
.nt-separador::before, .nt-separador::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.nt-separador > .nt-estrela { width: 12px; height: 12px; }
/* padrão: estrelas em grade fixa, uma cor. Use como camada absoluta sobre fundo liso ou Horizonte */
.nt-padrao-estrela {
  background: var(--destaque);
  -webkit-mask: var(--nt-estrela-tile) 0 0 / 56px 56px repeat; mask: var(--nt-estrela-tile) 0 0 / 56px 56px repeat;
}
.nt-padrao-estrela--fino { -webkit-mask-size: 32px 32px; mask-size: 32px 32px; }

/* selo: estrela + anel de pontos + texto circular */
.nt-selo { --s: 168px; position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); color: var(--tinta); flex: none; }
.nt-selo__anel { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) { :root:not([data-movimento="reduzido"]) .nt-selo__anel { animation: nt-giro 32s linear infinite; } }
.nt-selo__anel text { font: 400 9.6px var(--font-sans); letter-spacing: .3em; text-transform: uppercase; fill: currentColor; }
.nt-selo__simbolo { width: 30%; height: auto; fill: currentColor; }
.nt-selo__pontos circle { fill: currentColor; }

/* =========================================================
   COMPONENTES (v4.2): as peças que todo produto usa, na ordem do catálogo
   Os básicos (botão, campos, tag, badge, avatar, menus, navegação, alerta, toast, modal, drawer), depois os estados e o
   envio de arquivos (eram do portal) e, no fim, as superfícies, as pílulas, os dados e o layout de app (vieram do
   financeiro na v3.3). A ordem dentro do arquivo é a de antes, para nenhuma regra mudar de vencedor.
   ========================================================= */

/* ---------- Botão ----------
   v4.0: a pílula do financeiro. Cápsula de 44 px; o ícone mora num círculo de 34 px um tom mais escuro, no começo ou no
   fim. O próprio <svg> vira o círculo (padding e fundo), sem marcação a mais; .nt-btn__circulo e .nt-btn__chip fazem o
   mesmo para quem embrulha o ícone. Primário em primario (preto no claro, papel no escuro), secundário no vidro da pílula
   (branco sobre a página, cinza da página dentro de uma caixa), discreto sem cápsula, vidro escuro sobre imagem. */
.nt-btn {
  --h: 44px; --c: 34px; --px: 18px; --btn-fundo: transparent; --btn-borda: transparent; --btn-circulo: var(--pilula-circulo); --btn-circulo-tinta: var(--pilula-circulo-tinta);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 var(--px);
  border: 0; border-radius: var(--raio-pilula);
  background: var(--btn-fundo); box-shadow: inset 0 0 0 1px var(--btn-borda); color: var(--tinta);
  font: 500 14px/1 var(--font-sans); letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: scale 380ms var(--curva-mola), translate 380ms var(--curva-mola), background-color var(--duracao-rapida) ease-out,
    color var(--duracao-rapida) ease-out, box-shadow var(--duracao-rapida) ease-out;
}
/* o círculo do ícone (e dos três pontos de carregando) */
.nt-btn > svg, .nt-btn > .nt-troca, .nt-btn > .nt-carregando, .nt-btn__circulo, .nt-btn__chip {
  display: grid; place-items: center; flex: none; box-sizing: border-box;
  width: var(--c); height: var(--c); padding: calc((var(--c) - 16px) / 2); border-radius: 50%;
  background: var(--btn-circulo); color: var(--btn-circulo-tinta);
  transition: background-color var(--duracao-rapida) ease-out, scale 380ms var(--curva-mola);
}
.nt-btn > svg { display: block; stroke-width: 1.6; }
.nt-btn > .nt-carregando { display: inline-flex; justify-content: center; gap: 3px; padding: 0; }
.nt-btn__circulo > svg, .nt-btn__chip > svg, .nt-btn > .nt-troca > svg { width: 16px; height: 16px; stroke-width: 1.6; transition: rotate var(--duracao-base) var(--curva-entrada); }
/* com círculo na ponta, a cápsula fica a 5 px dele, como nas pílulas */
/* O bundle.js mede em que ponta está o círculo (o texto não é elemento: só pelo CSS, um ícone sozinho é ao mesmo tempo o
   primeiro e o último filho) e marca .tem-circulo-inicio e .tem-circulo-fim. Sem o script vale o padrão: o ícone no
   começo, e no chip e no link a seta no fim. */
.nt-btn:not(.tem-pontas):not(.nt-btn--chip):not(.nt-btn--link):has(> :is(svg, .nt-troca, .nt-carregando, .nt-btn__circulo, .nt-btn__chip):first-child),
.nt-btn.tem-circulo-inicio { padding-inline-start: calc((var(--h) - var(--c)) / 2); }
.nt-btn:not(.tem-pontas):is(.nt-btn--chip, .nt-btn--link):has(> :is(svg, .nt-btn__chip):last-child),
.nt-btn.tem-circulo-fim { padding-inline-end: calc((var(--h) - var(--c)) / 2); }
.nt-btn--s { --h: 36px; --c: 28px; --px: 14px; font-size: 13px; gap: 8px; }
.nt-btn--l { --h: 52px; --c: 42px; --px: 22px; font-size: 16px; gap: 12px; }
.nt-btn--primario, .nt-btn--forte { --btn-fundo: var(--primario); --btn-circulo: color-mix(in srgb, var(--sobre-primario) 16%, transparent); --btn-circulo-tinta: currentColor; color: var(--sobre-primario); isolation: isolate; overflow: hidden; }
/* O primário acende no hover como um objeto com luz própria: o degradê de caixa do tema oposto entra por baixo (o grafite
   sobre o preto no claro, o preto invertido sobre o papel no escuro), com o fio de luz em cima e um brilho em volta.
   Num ::before, porque degradê não transiciona. */
:root, [data-theme="claro"] { --btn-luz: var(--gradiente-grafite); --btn-luz-sombra: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 22px -10px rgba(0, 0, 2, .6); }
[data-theme="escuro"] { --btn-luz: var(--gradiente-preto-invertido); --btn-luz-sombra: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(11, 13, 16, .1), 0 10px 26px -10px rgba(255, 255, 255, .5); }
:is(.nt-btn--primario, .nt-btn--forte)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--btn-luz); opacity: 0;
  transition: opacity var(--duracao-base) var(--curva-entrada); }
.nt-btn--secundario { --btn-fundo: var(--pilula-fundo); --btn-borda: var(--pilula-borda); }
.nt-btn--discreto { --btn-fundo: transparent; }
.nt-btn--vidro {
  --btn-fundo: rgba(14, 15, 20, .5); --btn-borda: rgba(255, 255, 255, .1); --btn-circulo: rgba(0, 0, 2, .45);
  color: var(--neutro-50); box-shadow: inset 0 0 0 1px var(--btn-borda), inset 0 1px 0 rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* link (v4.0): a pílula de vidro com a seta no círculo da ponta. No hover acende no azul: o degradê da caixa azul entra
   por baixo (opacidade, num ::before, porque degradê não transiciona), o texto vira papel e o círculo da seta clareia. */
.nt-btn--link {
  --btn-fundo: var(--pilula-fundo); --btn-borda: var(--pilula-borda);
  isolation: isolate; overflow: hidden;
}
.nt-btn--link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gradiente-azul); opacity: 0;
  transition: opacity var(--duracao-base) var(--curva-entrada); }
/* só ícone: a cápsula de 44 com o círculo de 34 dentro (o botão de tema do financeiro) */
.nt-btn--icone { width: var(--h); padding: 0 !important; }
/* Pressionar: o botão afunda em 90 ms (escala 0,96, 1 px para baixo, uma sombra por dentro e o círculo encolhendo a 0,9)
   e, ao soltar, volta com a curva-mola (380 ms, uma pequena sobra). Desabilitado nunca afunda. */
.nt-btn:not(:disabled):not([aria-disabled="true"]):active, .nt-btn.is-active { scale: var(--escala-pressao); translate: 0 1px;
  box-shadow: inset 0 0 0 1px var(--btn-borda), inset 0 2px 6px rgba(0, 0, 2, .28);
  transition: scale 90ms ease-out, translate 90ms ease-out, background-color var(--duracao-rapida) ease-out, color var(--duracao-rapida) ease-out, box-shadow 90ms ease-out; }
.nt-btn:not(:disabled):not([aria-disabled="true"]):active > :is(svg, .nt-troca, .nt-btn__circulo, .nt-btn__chip), .nt-btn.is-active > :is(svg, .nt-troca, .nt-btn__circulo, .nt-btn__chip) { scale: .9; transition-duration: var(--duracao-rapida), 90ms; transition-timing-function: ease-out; }
/* para documentação: o botão aperta e solta sozinho, a cada 2 s */
.nt-btn.is-pressionando { animation: nt-pressao 2s ease-out infinite; }
.nt-btn.is-pressionando > :is(svg, .nt-btn__circulo, .nt-btn__chip) { animation: nt-pressao-circulo 2s ease-out infinite; }
@keyframes nt-pressao { 0%, 40%, 100% { scale: 1; translate: 0 0; } 46%, 52% { scale: .96; translate: 0 1px; box-shadow: inset 0 0 0 1px var(--btn-borda), inset 0 2px 6px rgba(0, 0, 2, .28); } 62% { scale: 1.025; translate: 0 0; } 72% { scale: .995; } 80% { scale: 1; } }
@keyframes nt-pressao-circulo { 0%, 40%, 100% { scale: 1; } 46%, 52% { scale: .9; } 64% { scale: 1.06; } 76% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .nt-btn.is-pressionando, .nt-btn.is-pressionando > * { animation: none; } }
:root[data-movimento="reduzido"] :is(.nt-btn.is-pressionando, .nt-btn.is-pressionando > *) { animation: none; }
.nt-btn:disabled, .nt-btn.is-disabled, .nt-btn[aria-disabled="true"] { opacity: var(--opacidade-desabilitado); cursor: not-allowed; }
.nt-btn.is-loading { cursor: progress; }
/* a assinatura dos CTAs: o chip com a seta diagonal na ponta, que gira 45° no hover; no secundário, o chip é preto */
.nt-btn--chip { gap: 14px; }
.nt-btn--secundario > .nt-btn__chip { background: var(--primario); color: var(--sobre-primario); }
.nt-btn-grupo { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }

/* ---------- Campos ----------
   v4.0 (revisto): o campo é uma peça da caixa, como as linhas e pílulas do financeiro. 52 px, cantos de 18 (22 na área
   de texto), o fundo da pílula (branco sobre a página, o cinza da página dentro de uma caixa) e um fio fino. O ícone e o
   chevron moram no círculo de 34 px. Foco: o anel em tinta (preto no claro, papel no escuro), como a pílula marcada.
   O rótulo é o título em sentença dos widgets (13 px, 500). */
.nt-campo { display: grid; gap: 8px; min-width: 0; align-content: start; }
.nt-campo__rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-2); padding-left: 4px; font: 500 13px/1.3 var(--font-sans); color: var(--tinta-2); }
.nt-campo__opcional { font-weight: 400; color: var(--tinta-3); }
.nt-input {
  width: 100%; min-width: 0; height: 52px; padding: 0 18px;
  border: 0; border-radius: 18px;
  background: var(--pilula-fundo); color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 14%, transparent);
  font: 500 15px/1.4 var(--font-sans);
  transition-property: box-shadow, background-color; transition-duration: var(--duracao-instante); transition-timing-function: ease-out;
}
.nt-input::placeholder { color: var(--tinta-3); font-weight: 400; opacity: 1; }
.nt-input:focus, .nt-input.is-focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tinta), 0 0 0 4px color-mix(in srgb, var(--tinta) 9%, transparent); }
.nt-input[aria-invalid="true"], .nt-input.is-error { box-shadow: inset 0 0 0 1.5px var(--erro); }
.nt-input[aria-invalid="true"]:focus, .nt-input.is-error.is-focus { box-shadow: inset 0 0 0 1.5px var(--erro), 0 0 0 4px color-mix(in srgb, var(--erro) 14%, transparent); }
.nt-input:disabled, .nt-input.is-disabled { background: color-mix(in srgb, var(--tinta) 4%, transparent); color: var(--tinta-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 8%, transparent); cursor: not-allowed; }
.nt-input--area { height: auto; min-height: 136px; padding: 14px 18px; border-radius: 22px; line-height: 1.55; resize: vertical; }
/* A área só leitura (um texto pronto para copiar) cresce com o texto, sem barra de rolagem. */
.nt-input--area[readonly] { min-height: 0; field-sizing: content; resize: none; }
.nt-campo__ajuda { margin: 0; padding-left: 4px; font-size: 12.5px; line-height: 1.45; color: var(--tinta-3); }
.nt-campo__erro { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding-left: 4px; font-size: 12.5px; line-height: 1.45; color: var(--erro); }
.nt-campo__erro svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.nt-campo__rodape { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-3); }
/* o contador numa pílula pequena, em pontos */
.nt-campo__conta { margin-left: auto; padding: 5px 10px; border-radius: var(--raio-pilula); background: color-mix(in srgb, var(--tinta) 7%, transparent); font: 800 11px/1 var(--font-matriz); font-variation-settings: "ROND" 100; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-campo__conta.is-limite { background: var(--atencao-suave); color: var(--atencao); }
.nt-input-icone, .nt-select { position: relative; display: block; }
.nt-input-icone > svg, .nt-select > svg { position: absolute; top: 50%; width: 34px; height: 34px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: var(--pilula-circulo); translate: 0 -50%; color: var(--pilula-circulo-tinta); pointer-events: none; }
.nt-input-icone > svg { left: 9px; }
.nt-input-icone > .nt-input { padding-left: 52px; }
.nt-select > select { appearance: none; -webkit-appearance: none; padding-right: 52px; cursor: pointer; text-overflow: ellipsis; }
.nt-select > svg { right: 9px; }

/* Campo em pílula: a pílula de dado do financeiro que se escreve. O ícone no círculo, o rótulo pequeno em cima e o valor
   embaixo; um select dentro ganha o chevron no círculo da ponta. Para busca, filtros e valores nos painéis. */
.nt-campo-pilula { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 52px; padding: 5px 20px 5px 5px; border-radius: var(--raio-pilula);
  background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 14%, transparent); color: var(--tinta); cursor: text;
  transition: box-shadow var(--duracao-instante) ease-out; }
.nt-campo-pilula:has(select) { cursor: pointer; }
.nt-campo-pilula > svg { box-sizing: border-box; flex: none; width: 42px; height: 42px; padding: 12px; border-radius: 50%; background: var(--pilula-circulo); color: var(--pilula-circulo-tinta); }
.nt-campo-pilula > svg:last-child:not(:first-child) { width: 34px; height: 34px; padding: 9px; margin-left: auto; pointer-events: none; }
.nt-campo-pilula:has(> svg:last-child:not(:first-child)) { padding-right: 9px; }
.nt-campo-pilula__texto { display: grid; gap: 3px; flex: 1; min-width: 0; }
.nt-campo-pilula__rotulo { font: 400 11.5px/1 var(--font-sans); color: var(--tinta-3); }
.nt-campo-pilula :is(input, select) { width: 100%; min-width: 0; height: 20px; margin: 0; padding: 0; border: 0; background: none; color: var(--tinta); font: 600 15px/1.2 var(--font-sans); outline: none; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; cursor: inherit; }
.nt-campo-pilula input::placeholder { color: var(--tinta-3); font-weight: 400; opacity: 1; }
.nt-campo-pilula__fim { flex: none; font: 600 13px/1 var(--font-sans); color: var(--tinta-3); white-space: nowrap; }
.nt-campo-pilula:focus-within, .nt-campo-pilula.is-focus { box-shadow: inset 0 0 0 1.5px var(--tinta), 0 0 0 4px color-mix(in srgb, var(--tinta) 9%, transparent); }
.nt-campo-pilula:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px var(--erro); }

/* checkbox, radio e switch: o próprio input estilizado; marcado é primario, como a pílula marcada */
.nt-opcao { display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; font: 500 14.5px/1.45 var(--font-sans); color: var(--tinta); min-width: 0; }
.nt-opcao__texto { display: grid; gap: 2px; min-width: 0; }
.nt-opcao__desc { font-size: 13px; font-weight: 400; color: var(--tinta-3); }
.nt-opcao:has(:disabled) { cursor: not-allowed; color: var(--tinta-3); }
.nt-checkbox, .nt-radio, .nt-switch {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  display: grid; place-content: center; cursor: inherit;
  border: 0; background: var(--pilula-fundo); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 38%, transparent);
  transition-property: background-color, box-shadow; transition-duration: var(--duracao-instante); transition-timing-function: ease-out;
}
.nt-checkbox { width: 22px; height: 22px; border-radius: 7px; }
.nt-checkbox::after {
  content: ""; width: 10px; height: 5.5px; margin-top: -2px;
  border-left: 2px solid var(--sobre-primario); border-bottom: 2px solid var(--sobre-primario);
  opacity: 0; transform: rotate(-45deg) scale(.6);
  transition-property: opacity, transform; transition-duration: var(--duracao-rapida); transition-timing-function: ease-out;
}
.nt-checkbox:checked, .nt-checkbox:indeterminate { background: var(--primario); box-shadow: none; }
.nt-checkbox:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.nt-checkbox:indeterminate::after { width: 10px; height: 0; margin: 0; border-left: 0; opacity: 1; transform: none; }
.nt-radio { width: 22px; height: 22px; border-radius: 50%; }
.nt-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sobre-primario); opacity: 0; transform: scale(.6); transition-property: opacity, transform; transition-duration: var(--duracao-rapida); transition-timing-function: ease-out; }
.nt-radio:checked { background: var(--primario); box-shadow: none; }
.nt-radio:checked::after { opacity: 1; transform: scale(1); }
.nt-opcao > .nt-checkbox, .nt-opcao > .nt-radio { margin-top: 0; }
.nt-switch { position: relative; display: block; width: 48px; height: 28px; border-radius: var(--raio-pilula); background: color-mix(in srgb, var(--tinta) 16%, transparent); box-shadow: none; }
.nt-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--neutro-0); box-shadow: 0 1px 3px rgba(0, 0, 2, .3), 0 0 0 .5px rgba(0, 0, 2, .06);
  transition-property: translate, background-color; transition-duration: var(--duracao-rapida); transition-timing-function: var(--curva-padrao);
}
[data-theme="escuro"] .nt-switch:not(:checked)::after, .nt-switch[data-theme="escuro"]:not(:checked)::after { background: var(--tinta-2); }
.nt-switch:checked { background: var(--primario); }
.nt-switch:checked::after { translate: 20px 0; background: var(--sobre-primario); }
.nt-checkbox:focus-visible, .nt-radio:focus-visible, .nt-switch:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.nt-checkbox:disabled, .nt-radio:disabled, .nt-switch:disabled { opacity: var(--opacidade-desabilitado); }
.nt-checkbox[aria-invalid="true"], .nt-radio[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--erro); }

/* Opção em pílula: a pílula de filtro do financeiro com o controle no círculo; marcada, a pílula inteira vira primario. */
.nt-opcao--pilula { align-items: center; gap: 10px; min-height: 44px; padding: 5px 16px 5px 5px; border-radius: var(--raio-pilula); background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda);
  font-size: 14px; line-height: 1; white-space: nowrap; transition: background-color var(--duracao-instante) ease-out, color var(--duracao-instante) ease-out, box-shadow var(--duracao-instante) ease-out; }
.nt-opcao--pilula > :is(.nt-checkbox, .nt-radio) { width: 34px; height: 34px; border-radius: 50%; background: var(--pilula-circulo); box-shadow: none; }
.nt-opcao--pilula:has(> :checked) { background: var(--primario); box-shadow: none; color: var(--sobre-primario); }
.nt-opcao--pilula > :is(.nt-checkbox, .nt-radio):checked { background: color-mix(in srgb, var(--sobre-primario) 16%, transparent); }
.nt-opcao--pilula > .nt-radio::after { width: 10px; height: 10px; }
.nt-opcao--pilula:has(:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.nt-opcao--pilula > :focus-visible { outline: none; }

/* Opção em linha: uma linha da caixa (a peça de dentro, raio 22) com o texto e a descrição à esquerda e o controle na
   ponta direita, como as linhas do financeiro. Escolhida, ganha o contorno primario. Serve também para o switch. */
.nt-opcao--linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 14px 16px 14px 20px; border-radius: 22px;
  background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda); transition: box-shadow var(--duracao-instante) ease-out; }
.nt-opcao--linha > :is(.nt-checkbox, .nt-radio, .nt-switch) { order: 2; }
.nt-opcao--linha:has(> :is(.nt-checkbox, .nt-radio):checked) { box-shadow: inset 0 0 0 1.5px var(--primario); }
.nt-opcao--linha .nt-opcao__desc { margin-top: 1px; }

.nt-grupo-opcoes { border: 0; margin: 0; padding: 0; display: grid; gap: var(--espaco-3); min-width: 0; }
.nt-grupo-opcoes:has(> .nt-opcao--linha) { gap: 8px; }
.nt-grupo-opcoes:has(> .nt-opcao--pilula) { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-grupo-opcoes > legend { padding: 0 0 0 4px; margin-bottom: 10px; font: 500 13px/1.3 var(--font-sans); color: var(--tinta-2); }
.nt-grupo-opcoes:has(> .nt-opcao--pilula) > legend { width: 100%; }

/* ---------- Tag ----------
   v4.0: a pílula de vidro em tamanho de etiqueta (36 px; 28 na pequena). A contagem ou o ícone vão no círculo à esquerda,
   a contagem em pontos (Doto), como o número da seção do financeiro. Selecionada vira primario. */
.nt-tag {
  --c: 28px; position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border: 0; border-radius: var(--raio-pilula);
  background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda); color: var(--tinta);
  font: 500 13px/1 var(--font-sans); letter-spacing: 0; white-space: nowrap; text-decoration: none;
}
.nt-tag:has(> .nt-tag__conta, > svg) { padding-inline-start: 4px; }
.nt-tag__conta, .nt-tag > svg { order: -1; display: grid; place-items: center; flex: none; box-sizing: border-box; min-width: var(--c); height: var(--c); padding: 0 7px; border-radius: var(--raio-pilula);
  background: var(--pilula-circulo); color: var(--pilula-circulo-tinta); font: 800 11px/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.nt-tag > svg { width: var(--c); padding: 6px; }
.nt-tag--s { --c: 22px; min-height: 28px; padding: 0 11px; font-size: 12px; gap: 6px; }
.nt-tag--s:has(> .nt-tag__conta, > svg) { padding-inline-start: 3px; }
.nt-tag--s .nt-tag__conta { font-size: 10px; padding: 0 5px; }
.nt-tag--s > svg { padding: 4px; }
.nt-tag--suave { box-shadow: none; background: color-mix(in srgb, var(--tinta) 6%, transparent); color: var(--tinta-2); }
button.nt-tag, label.nt-tag { cursor: pointer; transition-property: background-color, color, box-shadow, scale; transition-duration: var(--duracao-instante); transition-timing-function: ease-out; }
button.nt-tag:not(:disabled):active, label.nt-tag:active { scale: var(--escala-pressao); }
.nt-tag[aria-pressed="true"], .nt-tag.is-selected, label.nt-tag:has(input:checked) { background: var(--primario); box-shadow: none; color: var(--sobre-primario); }
.nt-tag:is([aria-pressed="true"], .is-selected) > :is(.nt-tag__conta, svg), label.nt-tag:has(input:checked) > :is(.nt-tag__conta, svg) { background: color-mix(in srgb, var(--sobre-primario) 16%, transparent); color: inherit; }
label.nt-tag > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.nt-tag:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }
.nt-tag:disabled, .nt-tag.is-disabled { opacity: var(--opacidade-desabilitado); cursor: not-allowed; }
.nt-tags { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }

/* ---------- Badge ----------
   v4.0: a pílula de status do financeiro em tamanho compacto (24 px), com o ponto aceso no lugar do ícone. Cápsula
   escura fixa (#0B0D10) com o degradê da cor para a direita, borda e texto na cor e brilho por dentro e por fora: igual
   nos dois temas, sobre a página, a caixa branca ou a capa. --c é a cor (r, g, b) e --t o texto. Com ícone, para os
   status de um processo, use a PilulaStatus (.nt-status). */
.nt-badge {
  --c: var(--status-cinza); --t: var(--status-cinza-texto);
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px 0 8px;
  border: 1px solid rgba(var(--c), .85); border-radius: var(--raio-pilula);
  background: linear-gradient(90deg, rgba(var(--c), .05) 0%, rgba(var(--c), .32) 100%), #0B0D10;
  box-shadow: inset 0 0 10px rgba(var(--c), .22), 0 0 14px -5px rgba(var(--c), .6);
  color: var(--t); font: 500 12px/1 var(--font-sans); white-space: nowrap;
}
.nt-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--c)); color: rgb(var(--c)); box-shadow: 0 0 6px rgba(var(--c), .9); flex: none; }
/* a paleta vem dos tokens status-* (a mesma da pílula de status); info, sucesso, atenção e erro são apelidos */
.nt-badge--info, .nt-badge--azul { --c: var(--status-azul); --t: var(--status-azul-texto); }
.nt-badge--sucesso, .nt-badge--verde { --c: var(--status-verde); --t: var(--status-verde-texto); }
.nt-badge--atencao, .nt-badge--ambar { --c: var(--status-ambar); --t: var(--status-ambar-texto); }
.nt-badge--erro, .nt-badge--vermelho { --c: var(--status-vermelho); --t: var(--status-vermelho-texto); }
.nt-badge--ciano { --c: var(--status-ciano); --t: var(--status-ciano-texto); }
.nt-badge--lilas { --c: var(--status-lilas); --t: var(--status-lilas-texto); }
.nt-badge--amarelo { --c: var(--status-amarelo); --t: var(--status-amarelo-texto); }
.nt-badge--violeta { --c: var(--status-violeta); --t: var(--status-violeta-texto); }
.nt-badge--salmao { --c: var(--status-salmao); --t: var(--status-salmao-texto); }
.nt-badge--rosa { --c: var(--status-rosa); --t: var(--status-rosa-texto); }
.nt-badge--cinza { --c: var(--status-cinza); --t: var(--status-cinza-texto); }
.nt-badge--ao-vivo::before { animation: nt-pulso 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .nt-badge--ao-vivo::before { animation: none; } }
/* sem o degradê: só a borda e o texto na cor, para listas com muitos status juntos */
.nt-badge--contorno { background: #0B0D10; box-shadow: none; }

/* ---------- Avatar ----------
   v4.0: o círculo com luz própria das caixas. Sem foto, as iniciais em papel sobre um degradê: grafite por padrão,
   azul, verde, brasa, roxo, laranja e horizonte nos tons, preto invertido no --claro. A borda de luz vai por cima de
   tudo (::after), inclusive da foto. --anel é a cor que separa os avatares empilhados: a da superfície em volta. */
.nt-avatar {
  --s: 40px; --anel: var(--fundo); position: relative; flex: none;
  display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--gradiente-grafite); color: var(--neutro-50);
  font: 600 calc(var(--s) * .36)/1 var(--font-sans); letter-spacing: -.01em; text-transform: uppercase;
}
.nt-avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 calc(var(--s) * -.28) calc(var(--s) * .5) calc(var(--s) * -.36) rgba(255, 255, 255, .26); }
.nt-avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.nt-avatar--xs { --s: 24px; } .nt-avatar--s { --s: 32px; } .nt-avatar--l { --s: 56px; } .nt-avatar--xl { --s: 80px; } .nt-avatar--2xl { --s: 112px; }
.nt-avatar--azul, .nt-avatar--marinho { background: var(--gradiente-azul); }
.nt-avatar--verde { background: var(--gradiente-verde); }
.nt-avatar--brasa { background: var(--gradiente-brasa); }
.nt-avatar--roxo { background: var(--gradiente-roxo); }
.nt-avatar--laranja { background: var(--gradiente-laranja); }
.nt-avatar--horizonte { background: var(--gradiente-horizonte); }
.nt-avatar--horizonte > svg { width: 46%; height: 46%; fill: currentColor; }
/* a estrela ou um logo do sistema (data-nt-logo) no centro do círculo */
.nt-avatar > [data-nt-logo] { display: block; width: 46%; line-height: 0; }
.nt-avatar > [data-nt-logo] svg { width: 100%; height: auto; fill: currentColor; }
.nt-avatar--claro { background: var(--gradiente-preto-invertido); color: var(--neutro-950); }
.nt-avatar--claro::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(11, 13, 16, .08), inset 0 calc(var(--s) * -.28) calc(var(--s) * .5) calc(var(--s) * -.36) rgba(11, 13, 16, .12); }
/* logo de cliente: o círculo branco com a marca contida */
.nt-avatar--logo { background: var(--neutro-0); color: var(--neutro-950); }
.nt-avatar--logo > img { object-fit: contain; padding: 18%; }
.nt-avatar--logo::after { box-shadow: inset 0 0 0 1px rgba(11, 13, 16, .08); }
/* status: o ponto aceso, com o anel da superfície em volta */
.nt-avatar__status { position: absolute; z-index: 1; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 8px; min-height: 8px; border-radius: 50%;
  background: rgb(74, 222, 128); box-shadow: 0 0 0 2px var(--anel), 0 0 8px rgba(74, 222, 128, .75); }
.nt-avatar__status--ocupado { background: rgb(245, 166, 35); box-shadow: 0 0 0 2px var(--anel), 0 0 8px rgba(245, 166, 35, .75); }
.nt-avatar__status--ausente { background: rgb(160, 160, 168); box-shadow: 0 0 0 2px var(--anel); }
.nt-caixa .nt-avatar, .nt-menu .nt-avatar, .nt-modal__caixa .nt-avatar, .nt-drawer__painel .nt-avatar { --anel: var(--caixa); }

/* Grupo: sobreposição de 28% com o anel da superfície; o resto vira o círculo de vidro com a contagem em pontos.
   Passando o mouse, o grupo abre um pouco. */
.nt-avatares { display: inline-flex; align-items: center; }
.nt-avatares > .nt-avatar { box-shadow: 0 0 0 2px var(--anel); transition: margin var(--duracao-base) var(--curva-entrada); }
.nt-avatares > .nt-avatar + .nt-avatar { margin-left: calc(var(--s) * -.28); }
.nt-avatares__mais { background: var(--pilula-fundo); color: var(--tinta); font: 800 calc(var(--s) * .32)/1 var(--font-matriz); font-variation-settings: "ROND" 100; letter-spacing: .02em; text-transform: none; }
.nt-avatares__mais::after { box-shadow: inset 0 0 0 1px var(--pilula-borda); }
@media (hover: hover) and (pointer: fine) { .nt-avatares:hover > .nt-avatar + .nt-avatar { margin-left: calc(var(--s) * -.1); } }
@media (prefers-reduced-motion: reduce) { .nt-avatares > .nt-avatar { transition: none; } }
/* Na pílula: o avatar ocupa o círculo de 34 px (pessoa, cliente, equipe) */
.nt-pilula > .nt-avatar, .nt-pilula > .nt-avatares > .nt-avatar { --s: 34px; --anel: var(--pilula-fundo); }
.nt-pilula > .nt-avatares > .nt-avatar + .nt-avatar { margin-left: -10px; }

/* ---------- Tooltip: vidro escuro, escala do gatilho, sem atraso depois do primeiro ---------- */
.nt-tooltip {
  position: fixed; z-index: var(--z-tooltip); max-width: 260px; padding: 8px 12px;
  border-radius: 14px; background: rgba(14, 15, 20, .9); color: var(--neutro-50);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 500 13px/1.4 var(--font-sans); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), var(--sombra-2); pointer-events: none;
  opacity: 0; scale: var(--escala-entrada); transform-origin: var(--origem, 50% 100%);
  transition-property: opacity, scale; transition-duration: var(--duracao-rapida); transition-timing-function: ease-out;
}
.nt-tooltip.is-open { opacity: 1; scale: 1; }
.nt-tooltip.is-instante { transition-duration: 0ms; }
@media (prefers-reduced-motion: reduce) { .nt-tooltip { scale: 1; } }
.nt-tooltip--estatico { position: relative; display: inline-block; opacity: 1; scale: 1; }
.nt-tooltip::after { content: ""; position: absolute; left: var(--seta-x, 50%); bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); border-radius: 0 0 2px 0; }
.nt-tooltip[data-lado="baixo"]::after { bottom: auto; top: -4px; border-radius: 2px 0 0 0; }
.nt-tooltip kbd { margin-left: 8px; padding: 3px 7px; border-radius: var(--raio-pilula); background: rgba(255, 255, 255, .12); font: 600 11px/1 var(--font-sans); }

/* ---------- Dropdown / menu: a caixa abre do gatilho ----------
   v4.0: a caixa de cor base (raio 24, a borda de luz e a sombra), itens de 44 px com o ícone no círculo, a seleção no
   cinza de dentro da caixa. */
.nt-dropdown { position: relative; display: inline-block; }
/* barras de rolagem finas, como a da barra lateral do catálogo: sem trilho nem setas, o polegar na tinta a 22% */
.nt-menu__rolagem, .nt-modal__caixa, .nt-drawer__corpo, .nt-rolagem, .nt-tabela { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tinta) 22%, transparent) transparent; }
.nt-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-dropdown);
  min-width: 260px; max-width: min(340px, calc(100vw - 32px)); max-height: min(420px, 70vh); overflow: hidden;
  padding: 10px 6px; display: flex; flex-direction: column;
  border: 0; border-radius: var(--raio-xl); background: var(--caixa); box-shadow: var(--caixa-luz), var(--sombra-2);
  opacity: 0; visibility: hidden; transform-origin: top left;
  scale: var(--escala-entrada); translate: 0 calc(-4px * var(--nt-movimento));
  transition-property: opacity, scale, translate, visibility; transition-duration: var(--duracao-rapida); transition-timing-function: ease-out;
}
/* o miolo que rola: 10 px da borda em cima e embaixo e 6 nas laterais, então a barra fica dentro da curva do canto */
.nt-menu__rolagem { display: grid; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.nt-menu:not(:has(> .nt-menu__rolagem)) { overflow-y: auto; gap: 2px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tinta) 22%, transparent) transparent; }
.nt-dropdown--direita .nt-menu { left: auto; right: 0; transform-origin: top right; }
.nt-dropdown.is-open .nt-menu, .nt-menu.is-open { opacity: 1; visibility: visible; scale: 1; translate: 0 0; transition-duration: var(--duracao-base); transition-timing-function: var(--curva-entrada); }
@media (prefers-reduced-motion: reduce) { .nt-menu { scale: 1; translate: 0 0; } }
.nt-menu--estatico { position: relative; top: 0; opacity: 1; visibility: visible; scale: 1; translate: 0 0; max-height: none; }
.nt-menu__titulo { padding: 10px 12px 6px; font: 500 11px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.nt-menu__item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 5px 14px 5px 5px;
  border: 0; border-radius: 18px; background: none; color: var(--tinta);
  font: 500 14px/1.3 var(--font-sans); text-align: left; text-decoration: none; cursor: pointer;
}
.nt-menu__item:not(:has(> svg:first-child)) { padding-left: 14px; }
.nt-menu__item > svg:first-child { box-sizing: border-box; width: 34px; height: 34px; padding: 9px; flex: none; border-radius: 50%; background: var(--pilula-circulo); color: var(--pilula-circulo-tinta); }
.nt-menu__item:focus-visible, .nt-menu__item.is-hover { background: var(--caixa-dentro); outline: none; }
.nt-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--foco); }
.nt-menu__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-menu__meta { margin-left: auto; padding: 4px 8px; border-radius: var(--raio-pilula); background: var(--caixa-dentro); font: 600 11px/1 var(--font-sans); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.nt-menu__check { width: 16px; height: 16px; margin-left: auto; color: var(--tinta); opacity: 0; }
.nt-menu__item:is([aria-checked="true"], [aria-selected="true"]) .nt-menu__check { opacity: 1; }
.nt-menu__item:is([aria-checked="true"], [aria-selected="true"]) { font-weight: 600; }
/* o menu do select (bundle.js): da largura do campo, abre para cima quando não cabe embaixo */
.nt-menu--select { min-width: max(100%, 220px); }
.nt-menu--acima { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; translate: 0 calc(4px * var(--nt-movimento)); }
.nt-select.is-aberto > .nt-input, .nt-campo-pilula.is-aberto { box-shadow: inset 0 0 0 1.5px var(--tinta), 0 0 0 4px color-mix(in srgb, var(--tinta) 9%, transparent); }
.nt-select > svg, .nt-campo-pilula > svg:last-child:not(:first-child) { transition: rotate var(--duracao-base) var(--curva-entrada), background-color var(--duracao-rapida) ease-out; }
.nt-select.is-aberto > svg, .nt-campo-pilula.is-aberto > svg:last-child:not(:first-child) { rotate: 180deg; background: var(--primario); color: var(--sobre-primario); }
.nt-menu__item--perigo, .nt-menu__item--perigo > svg { color: var(--erro); }
.nt-menu__item--perigo > svg:first-child { background: var(--erro-suave); }
.nt-menu__item[aria-disabled="true"] { opacity: var(--opacidade-desabilitado); cursor: not-allowed; }
.nt-menu__sep { height: 1px; margin: 4px 12px; background: var(--borda); }

/* ---------- Accordion ----------
   v4.0: cada pergunta é a pílula do gatilho do dropdown. Cápsula de vidro de 52 px com o número (ou um ícone) no círculo à
   esquerda e o chevron no círculo da ponta, que gira e vira primario quando abre; o mesmo hover e o mesmo pressionar.
   A resposta abre embaixo numa peça de vidro, entrando com opacidade e 4 px de deslocamento, como o menu do dropdown. */
.nt-accordion { display: grid; gap: 8px; }
/* o item é a pílula: fechado, a cápsula de 52 px; aberto, a mesma peça cresce e guarda a resposta */
.nt-accordion__item { display: grid; min-width: 0; border-radius: 26px; background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda);
  transition: box-shadow var(--duracao-rapida) ease-out, scale 380ms var(--curva-mola); }
.nt-accordion__item.is-open { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.nt-accordion__item:has(.nt-accordion__gatilho:active) { scale: .99; transition-duration: var(--duracao-rapida), 90ms; }
.nt-accordion__gatilho {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 5px 5px 5px 22px;
  border: 0; border-radius: 26px; background: none; color: var(--tinta);
  font: 500 16px/1.3 var(--font-sans); letter-spacing: -.005em; text-align: left; cursor: pointer;
}
.nt-accordion__gatilho:has(> .nt-accordion__circulo) { padding-left: 5px; }
.nt-accordion__circulo { flex: none; display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; border-radius: var(--raio-pilula); background: var(--pilula-circulo); color: var(--pilula-circulo-tinta);
  font: 800 13px/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; transition: background-color var(--duracao-rapida) ease-out; }
.nt-accordion__circulo svg { width: 16px; height: 16px; }
.nt-accordion__icone {
  flex: none; margin-left: auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--pilula-circulo); color: var(--pilula-circulo-tinta);
  transition-property: rotate, background-color, color; transition-duration: var(--duracao-base); transition-timing-function: var(--curva-entrada);
}
.nt-accordion__icone svg { width: 16px; height: 16px; stroke-width: 2; }
.nt-accordion__gatilho[aria-expanded="true"] .nt-accordion__icone { rotate: 180deg; background: var(--primario); color: var(--sobre-primario); }
.nt-accordion__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duracao-base) var(--curva-entrada); }
.nt-accordion__item.is-open .nt-accordion__painel { grid-template-rows: 1fr; }
.nt-accordion__conteudo { overflow: hidden; min-height: 0; }
.nt-accordion__conteudo > div { padding: 2px 64px 20px 22px; color: var(--tinta-2); font-size: 15px; line-height: 1.6; max-width: 76ch;
  opacity: 0; translate: 0 calc(-4px * var(--nt-movimento)); transition: opacity var(--duracao-base) var(--curva-entrada), translate var(--duracao-base) var(--curva-entrada); }
.nt-accordion__item:has(.nt-accordion__circulo) .nt-accordion__conteudo > div { padding-left: 59px; }
.nt-accordion__item.is-open .nt-accordion__conteudo > div { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .nt-accordion__painel, .nt-accordion__conteudo > div, .nt-accordion__icone { transition: none; } }
:root[data-movimento="reduzido"] :is(.nt-accordion__painel, .nt-accordion__conteudo > div, .nt-accordion__icone) { transition: none; }

/* ---------- Tabs: troca imediata ----------
   v4.0: as abas são pílulas de vidro soltas (como os filtros do financeiro), a ativa em primario, a contagem no círculo.
   A variante --pilula é o controle segmentado: um trilho de vidro com a opção marcada em primario. */
.nt-tabs__lista { position: relative; display: flex; flex-wrap: wrap; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.nt-tabs__lista::-webkit-scrollbar { display: none; }
.nt-tab {
  position: relative; display: inline-flex; flex: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--raio-pilula); background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda);
  color: var(--tinta-2); font: 500 14px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  transition-property: color, background-color, box-shadow; transition-duration: var(--duracao-instante); transition-timing-function: ease-out;
}
.nt-tab:has(> .nt-tab__conta) { padding-left: 5px; }
.nt-tab[aria-selected="true"] { background: var(--primario); box-shadow: none; color: var(--sobre-primario); }
.nt-tab:disabled { opacity: var(--opacidade-desabilitado); cursor: not-allowed; }
.nt-tab__conta { order: -1; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: var(--raio-pilula); background: var(--pilula-circulo); color: var(--pilula-circulo-tinta);
  font: 800 13px/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; }
.nt-tab[aria-selected="true"] .nt-tab__conta { background: color-mix(in srgb, var(--sobre-primario) 16%, transparent); color: inherit; }
.nt-tabs__indicador { display: none; }
.nt-tabs__painel { padding-top: var(--espaco-5); }
.nt-tabs--pilula .nt-tabs__lista { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border-radius: var(--raio-pilula); background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda); max-width: 100%; }
.nt-tabs--pilula .nt-tab { min-height: 36px; padding: 0 16px; background: none; box-shadow: none; }
.nt-tabs--pilula .nt-tab[aria-selected="true"] { background: var(--primario); color: var(--sobre-primario); }
/* a pílula marcada desliza até a opção escolhida (o bundle.js cria o indicador e mede a aba); o texto troca de cor junto */
.nt-tabs--pilula .nt-tabs__lista { position: relative; isolation: isolate; }
.nt-tabs--pilula .nt-tabs__indicador { display: block; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; width: 0; height: auto; border-radius: var(--raio-pilula);
  background: var(--primario); box-shadow: 0 4px 12px -6px rgba(0, 0, 2, .45); transform-origin: left;
  transition: transform var(--duracao-media) var(--curva-gaveta), width var(--duracao-media) var(--curva-gaveta); }
.nt-tabs--pilula .tem-indicador .nt-tab[aria-selected="true"] { background: transparent; }
.nt-tabs--pilula .nt-tab { transition-property: color; transition-duration: var(--duracao-base); }
@media (prefers-reduced-motion: reduce) { .nt-tabs--pilula .nt-tabs__indicador { transition: none; } }
:root[data-movimento="reduzido"] .nt-tabs--pilula .nt-tabs__indicador { transition: none; }

/* ---------- Breadcrumbs: o caminho numa cápsula de vidro ---------- */
.nt-breadcrumbs { display: flex; min-width: 0; }
.nt-breadcrumbs ol { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; max-width: 100%; margin: 0; padding: 6px 18px; list-style: none;
  border-radius: 22px; background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda); font: 500 13px/1.3 var(--font-sans); }
.nt-breadcrumbs li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.nt-breadcrumbs li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid var(--tinta-3); border-right: 1.5px solid var(--tinta-3); transform: rotate(45deg); opacity: .7; }
.nt-breadcrumbs a { color: var(--tinta-3); text-decoration: none; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--duracao-instante) ease-out; }
.nt-breadcrumbs [aria-current="page"] { color: var(--tinta); font-weight: 600; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Paginação ----------
   v4.0: círculos de vidro com o número em pontos (Doto), a página atual em primario; o contador compacto é a pílula de
   navegação dos meses do financeiro (os dois círculos são os botões, o número no meio). */
.nt-paginacao { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: max-content !important; max-width: 100%; }
/* a marca da página atual (bundle.js, data-nt="paginacao"): o círculo preto que desliza até a página escolhida */
.nt-paginacao__marca { position: absolute; z-index: -1; top: 0; left: 0; width: 44px; height: 44px; border-radius: var(--raio-pilula); background: var(--primario); box-shadow: 0 4px 12px -6px rgba(0, 0, 2, .45);
  transition: transform var(--duracao-media) var(--curva-gaveta), width var(--duracao-media) var(--curva-gaveta); }
.nt-paginacao.tem-marca .nt-pagina[aria-current="page"] { background: transparent; }
@media (prefers-reduced-motion: reduce) { .nt-paginacao__marca { transition: none; } }
:root[data-movimento="reduzido"] .nt-paginacao__marca { transition: none; }
.nt-pagina {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
  border: 0; border-radius: var(--raio-pilula); background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda); color: var(--tinta-2);
  font: 800 13px/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
  transition: background-color var(--duracao-instante) ease-out, color var(--duracao-media) ease-out, box-shadow var(--duracao-instante) ease-out, scale 380ms var(--curva-mola);
}
.nt-pagina:not(:disabled):active { scale: .92; transition-duration: var(--duracao-instante), var(--duracao-media), var(--duracao-instante), 90ms; }
.nt-pagina[aria-current="page"] { background: var(--primario); box-shadow: none; color: var(--sobre-primario); }
.nt-pagina--seta { color: var(--tinta); padding: 0; }
.nt-pagina--seta svg { box-sizing: border-box; width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: var(--pilula-circulo); color: var(--pilula-circulo-tinta); }
.nt-pagina:disabled { opacity: var(--opacidade-desabilitado); cursor: not-allowed; }
.nt-paginacao__reticencias { min-width: 24px; text-align: center; color: var(--tinta-3); font: 800 13px/1 var(--font-matriz); }
.nt-paginacao__contador { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; min-height: 44px; padding: 0 14px; border-radius: var(--raio-pilula); background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda);
  font: 800 13px/1 var(--font-matriz); font-variation-settings: "ROND" 100; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.nt-paginacao__contador b { display: inline-block; color: var(--tinta); font-weight: 800; }
.nt-paginacao__contador b.is-sobe { animation: nt-conta-sobe var(--duracao-media) var(--curva-entrada); }
.nt-paginacao__contador b.is-desce { animation: nt-conta-desce var(--duracao-media) var(--curva-entrada); }
@keyframes nt-conta-sobe { from { opacity: 0; translate: 0 calc(8px * var(--nt-movimento)); filter: blur(2px); } }
@keyframes nt-conta-desce { from { opacity: 0; translate: 0 calc(-8px * var(--nt-movimento)); filter: blur(2px); } }
/* contador entre as setas: a cápsula única, como a navegação dos meses */
.nt-paginacao:has(> .nt-paginacao__contador) { gap: 0; padding: 5px; border-radius: var(--raio-pilula); background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda); display: inline-flex; }
.nt-paginacao:has(> .nt-paginacao__contador) > * { background: none; box-shadow: none; min-height: 34px; height: 34px; min-width: 34px; }
.nt-paginacao:has(> .nt-paginacao__contador) .nt-pagina--seta svg { width: 34px; height: 34px; }

/* ---------- Alerta ----------
   v4.0: uma caixa (raio 22, a borda de luz) com o ícone no círculo do tom; o tom vem do círculo e de um fio na cor.
   Regra do círculo: o ícone fica no topo, na linha do título, com a mesma folga em cima e à esquerda. */
.nt-alerta {
  --a-cor: var(--pilula-circulo-tinta); --a-suave: var(--pilula-circulo);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 14px 14px 16px; border: 0; border-radius: 22px;
  background: var(--caixa); color: var(--tinta); box-shadow: var(--caixa-luz);
}
.nt-caixa .nt-alerta { background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda); }
.nt-alerta__icone { box-sizing: border-box; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--a-suave); color: var(--a-cor); }
.nt-alerta__titulo { margin: 7px 0 0; font: 600 15px/1.4 var(--font-sans); }
.nt-alerta__texto { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--tinta-2); }
.nt-alerta__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--espaco-3); }
.nt-alerta__acoes .nt-btn { --h: 36px; --c: 28px; --px: 14px; font-size: 13px; }
.nt-alerta__fechar { margin: 0; }
.nt-alerta--info { --a-cor: var(--destaque); --a-suave: var(--destaque-suave); box-shadow: var(--caixa-luz), inset 0 0 0 1px color-mix(in srgb, var(--destaque) 26%, transparent); }
.nt-alerta--sucesso { --a-cor: var(--sucesso); --a-suave: var(--sucesso-suave); box-shadow: var(--caixa-luz), inset 0 0 0 1px color-mix(in srgb, var(--sucesso) 26%, transparent); }
.nt-alerta--atencao { --a-cor: var(--atencao); --a-suave: var(--atencao-suave); box-shadow: var(--caixa-luz), inset 0 0 0 1px color-mix(in srgb, var(--atencao) 26%, transparent); }
.nt-alerta--erro { --a-cor: var(--erro); --a-suave: var(--erro-suave); box-shadow: var(--caixa-luz), inset 0 0 0 1px color-mix(in srgb, var(--erro) 30%, transparent); }

/* ---------- Toast: transição (não keyframes), sai pelo mesmo caminho ----------
   v4.0: uma caixa grafite com luz própria (igual nos dois temas), o ícone no círculo com a cor do status e a barra de
   tempo na linha azul da barra de progresso. Regra do círculo: o ícone no topo, na linha do título. */
.nt-toasts { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.nt-toasts--local { position: absolute; right: 16px; bottom: 16px; }
.nt-toast {
  --c: var(--status-azul);
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px 10px 14px 12px; border: 0; border-radius: 24px;
  background: var(--gradiente-grafite); color: var(--neutro-50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), var(--sombra-3);
  opacity: 1; translate: 0 0;
  transition-property: opacity, translate, filter; transition-duration: var(--duracao-media); transition-timing-function: var(--curva-entrada);
}
@starting-style { .nt-toast { opacity: 0; translate: 0 calc(var(--desloc-entrada) * var(--nt-movimento)); } }
.nt-toast.is-saindo { opacity: 0; translate: 0 calc(var(--desloc-entrada) * var(--nt-movimento)); transition-duration: var(--duracao-rapida); transition-timing-function: ease-out; }
.nt-toast__icone { box-sizing: border-box; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: rgba(var(--c), .16); color: rgb(var(--c)); }
/* sucesso e atenção ganham a caixa do tom (degradê verde e amarelo): o círculo vira o vidro escuro com o ícone claro
   e a barra de tempo fica branca, como a barra de progresso nas caixas coloridas */
.nt-toast--sucesso { --c: var(--status-verde); background: var(--gradiente-verde); }
.nt-toast--atencao { --c: var(--status-ambar); background: var(--gradiente-amarelo); }
:is(.nt-toast--sucesso, .nt-toast--atencao) .nt-toast__icone { background: rgba(0, 0, 2, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--neutro-50); }
:is(.nt-toast--sucesso, .nt-toast--atencao) .nt-toast__texto { color: rgba(245, 245, 243, .82); }
:is(.nt-toast--sucesso, .nt-toast--atencao) .nt-toast__tempo { background: var(--neutro-50); box-shadow: 0 0 8px rgba(255, 255, 255, .5); }
.nt-toast--erro { --c: var(--status-vermelho); }
.nt-toast__titulo { margin: 7px 0 0; font: 600 14.5px/1.4 var(--font-sans); }
.nt-toast__texto { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(245, 245, 243, .7); }
.nt-toast__acao { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--neutro-50); font: 600 13.5px/1.3 var(--font-sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.nt-toast .nt-btn { --btn-circulo: rgba(255, 255, 255, .08); color: var(--neutro-50); }
.nt-toast__fechar { margin-top: 0; }
.nt-toast__tempo { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; border-radius: 2px; background: var(--azul-barra); box-shadow: 0 0 8px rgba(94, 139, 255, .6); transform-origin: left; animation: nt-tempo var(--t, 5s) linear forwards; }
.nt-toast:hover .nt-toast__tempo { animation-play-state: paused; }
@keyframes nt-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Modal: centrado, 0,97 → 1 ----------
   v4.0: a caixa (raio 44, squircle onde o navegador deixa), com a borda de luz da caixa principal. */
.nt-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity var(--duracao-rapida) ease-out, visibility 0s linear var(--duracao-rapida); }
.nt-modal.is-open { visibility: visible; opacity: 1; transition: opacity var(--duracao-media) var(--curva-entrada), visibility 0s; }
.nt-modal--local { position: absolute; }
.nt-modal__veu { position: absolute; inset: 0; background: var(--veu); -webkit-backdrop-filter: blur(var(--desfoque-veu)); backdrop-filter: blur(var(--desfoque-veu)); }
.nt-modal__caixa {
  position: relative; width: min(560px, 100%); max-height: calc(100% - 16px); overflow: auto; overscroll-behavior: contain;
  padding: var(--espaco-7); border-radius: var(--raio-3xl); background: var(--caixa); color: var(--tinta); box-shadow: var(--caixa-luz-principal), var(--sombra-3);
  scale: var(--escala-entrada); transition: scale var(--duracao-rapida) ease-out;
}
@supports (corner-shape: squircle) { .nt-modal__caixa { corner-shape: squircle; border-radius: var(--raio-squircle-s); } }
.nt-modal.is-open .nt-modal__caixa { scale: 1; transition: scale var(--duracao-media) var(--curva-entrada); }
@media (prefers-reduced-motion: reduce) { .nt-modal__caixa { scale: 1; } }
.nt-modal__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--espaco-4); }
.nt-modal__rotulo { font: 500 13px/1.3 var(--font-sans); color: var(--tinta-3); margin: 0 0 6px; }
.nt-modal__titulo { margin: 0; font: 500 28px/1.15 var(--font-sans); letter-spacing: -.02em; }
.nt-modal__corpo { margin-top: var(--espaco-3); color: var(--tinta-2); }
.nt-modal__corpo p { margin: 0 0 var(--espaco-3); }
.nt-modal__rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--espaco-2); margin-top: var(--espaco-7); }
.nt-modal__fechar { margin: -6px -6px 0 0; }
@media (max-width: 600px) {
  .nt-modal { place-items: end stretch; padding: 8px; }
  .nt-modal__caixa { padding: var(--espaco-6); border-radius: var(--raio-2xl); }
  /* v4.5: os botões crescem para encher a linha, mas não encolhem abaixo do texto; o que não couber desce (Salvar não vaza
     do botão quando há Apagar, Cancelar e Salvar). */
  .nt-modal__rodape > .nt-btn { flex: 1 0 auto; }
}

/* ---------- Drawer: entra e sai pela direita, curva de gaveta ----------
   v4.0: a caixa flutuante da barra lateral do financeiro, solta 12 px das bordas, raio 44. */
.nt-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; transition: visibility 0s linear var(--duracao-media); }
.nt-drawer.is-open { visibility: visible; transition: visibility 0s; }
.nt-drawer--local { position: absolute; }
.nt-drawer__veu { position: absolute; inset: 0; background: var(--veu); opacity: 0; transition: opacity var(--duracao-media) ease-out; }
.nt-drawer.is-open .nt-drawer__veu { opacity: 1; transition-duration: var(--duracao-gaveta); }
.nt-drawer__painel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(460px, calc(100% - 24px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--raio-3xl); background: var(--caixa); color: var(--tinta); box-shadow: var(--caixa-luz-principal), var(--sombra-3);
  translate: calc(100% + 24px) 0;
  transition: translate var(--duracao-media) var(--curva-gaveta), opacity var(--duracao-rapida) ease-out;
}
.nt-drawer.is-open .nt-drawer__painel { translate: 0 0; transition-duration: var(--duracao-gaveta), var(--duracao-rapida); }
@media (prefers-reduced-motion: reduce) { .nt-drawer__painel { translate: 0 0; opacity: 0; } .nt-drawer.is-open .nt-drawer__painel { opacity: 1; } }
:root[data-movimento="reduzido"] .nt-drawer__painel { translate: 0 0; opacity: 0; }
:root[data-movimento="reduzido"] .nt-drawer.is-open .nt-drawer__painel { opacity: 1; }
.nt-drawer__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--espaco-4); padding: var(--espaco-6) var(--espaco-5) var(--espaco-3) var(--espaco-6); }
.nt-drawer__titulo { margin: 0; font: 500 24px/1.2 var(--font-sans); letter-spacing: -.015em; }
.nt-drawer__corpo { flex: 1; overflow: auto; overscroll-behavior: contain; padding: var(--espaco-3) var(--espaco-6) var(--espaco-6); display: grid; gap: var(--espaco-5); align-content: start; }
.nt-drawer__rodape { display: flex; flex-wrap: wrap; gap: var(--espaco-2); justify-content: flex-end; padding: var(--espaco-4) var(--espaco-5) var(--espaco-5); }
.nt-drawer__rodape > .nt-btn { flex: 1 0 auto; }

/* ---------- Hover: só em ponteiro fino (no toque, :hover gruda) ---------- */
@media (hover: hover) and (pointer: fine) {
  .nt-btn--primario:hover, .nt-btn--forte:hover { --btn-fundo: var(--primario-hover); --btn-circulo: color-mix(in srgb, var(--sobre-primario) 22%, transparent); box-shadow: var(--btn-luz-sombra); }
  :is(.nt-btn--primario, .nt-btn--forte):hover::before { opacity: 1; }
  .nt-btn--secundario:hover { --btn-borda: color-mix(in srgb, currentColor 28%, transparent); }
  .nt-btn--discreto:hover { --btn-fundo: var(--pilula-fundo); --btn-borda: var(--pilula-borda); }
  .nt-btn--vidro:hover { --btn-borda: rgba(255, 255, 255, .26); }
  .nt-btn:not(.nt-btn--primario):not(.nt-btn--forte):not(.nt-btn--link):hover { --btn-circulo: var(--pilula-circulo-hover); }
  .nt-btn--link:hover { --btn-borda: transparent; --btn-circulo: rgba(255, 255, 255, .16); color: var(--neutro-50); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 20px -10px rgba(37, 70, 217, .7); }
  .nt-btn--link:hover::before { opacity: 1; }
  .nt-btn--chip:hover .nt-btn__chip svg { rotate: calc(45deg * var(--nt-movimento)); }
  .nt-input:not(:focus):not(:disabled):not([aria-invalid="true"]):hover, .nt-campo-pilula:not(:focus-within):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 34%, transparent); }
  .nt-checkbox:hover:not(:checked):not(:disabled), .nt-radio:hover:not(:checked):not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--tinta-2); }
  .nt-opcao--pilula:not(:has(> :checked)):hover, .nt-opcao--linha:not(:has(> :is(.nt-checkbox, .nt-radio):checked)):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
  .nt-opcao--pilula:hover > :is(.nt-checkbox, .nt-radio):not(:checked) { box-shadow: none; background: var(--pilula-circulo-hover); }
  .nt-switch:hover:not(:checked):not(:disabled) { background: color-mix(in srgb, var(--tinta) 24%, transparent); }
  button.nt-tag:not(:disabled):not([aria-pressed="true"]):hover, label.nt-tag:not(:has(input:checked)):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
  .nt-menu__item:hover { background: var(--caixa-dentro); }
  .nt-accordion__item:not(.is-open):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
  .nt-accordion__gatilho:not([aria-expanded="true"]):hover :is(.nt-accordion__icone, .nt-accordion__circulo) { background: var(--pilula-circulo-hover); }
  .nt-tab:not([aria-selected="true"]):not(:disabled):hover { color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
  .nt-tabs--pilula .nt-tab:not([aria-selected="true"]):hover { box-shadow: none; }
  .nt-breadcrumbs a:hover { color: var(--tinta); }
  .nt-pagina:not([aria-current="page"]):not(:disabled):hover { color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
}
/* estados forçados para documentação */
.nt-btn--primario.is-hover { --btn-fundo: var(--primario-hover); --btn-circulo: color-mix(in srgb, var(--sobre-primario) 22%, transparent); box-shadow: var(--btn-luz-sombra); }
.nt-btn--primario.is-hover::before { opacity: 1; }
.nt-btn--secundario.is-hover { --btn-borda: color-mix(in srgb, currentColor 28%, transparent); --btn-circulo: var(--pilula-circulo-hover); }
.nt-btn--discreto.is-hover { --btn-fundo: var(--pilula-fundo); --btn-borda: var(--pilula-borda); --btn-circulo: var(--pilula-circulo-hover); }
.nt-btn--vidro.is-hover { --btn-borda: rgba(255, 255, 255, .26); }
.nt-btn--link.is-hover { --btn-borda: transparent; --btn-circulo: rgba(255, 255, 255, .16); color: var(--neutro-50); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 20px -10px rgba(37, 70, 217, .7); }
.nt-btn--link.is-hover::before { opacity: 1; }
.nt-btn--chip.is-hover .nt-btn__chip svg { rotate: 45deg; }
.nt-input.is-hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 34%, transparent); }
.nt-checkbox.is-hover, .nt-radio.is-hover { box-shadow: inset 0 0 0 1.5px var(--tinta-2); }
.nt-switch.is-hover { background: color-mix(in srgb, var(--tinta) 24%, transparent); }
.nt-tag.is-hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
.nt-tab.is-hover { color: var(--tinta); }
.nt-pagina.is-hover { color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }

/* =========================================================
   ESTADOS E ENVIO DE ARQUIVOS (eram do portal; desde a v4.2, de todos)
   ========================================================= */

/* ---------- Upload de briefing e referências ---------- */
.nt-upload { display: grid; gap: var(--espaco-4); min-width: 0; }
.nt-upload__zona {
  position: relative; display: grid; justify-items: center; gap: 8px; padding: var(--espaco-9) var(--espaco-6); text-align: center;
  border: 0; border-radius: var(--raio-3xl); background: var(--caixa); color: var(--tinta); cursor: pointer;
  box-shadow: var(--caixa-luz);
  transition: box-shadow var(--duracao-rapida), background-color var(--duracao-rapida);
}
/* a borda da zona em pontos (como o resto da barra de progresso), num anel de 2 px por dentro */
.nt-upload__zona::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 38%, transparent) 1px, transparent 1.6px) 0 0 / 7px 7px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.nt-upload__zona:hover, .nt-upload__zona.is-hover { box-shadow: var(--caixa-luz), var(--sombra-2); }
.nt-upload__zona.is-arrastando { background: var(--caixa-dentro); box-shadow: inset 0 0 0 2px var(--azul-barra), 0 0 24px -6px color-mix(in srgb, var(--azul-barra) 60%, transparent); }
.nt-upload__zona:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }
.nt-upload__zona > input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.nt-upload__icone { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 18px; background: var(--caixa-ladrilho); box-shadow: var(--caixa-ladrilho-luz); color: var(--tinta); }
.nt-upload__icone svg { width: 24px; height: 24px; }
.nt-upload__titulo { margin: 0; font: 600 18px/1.35 var(--font-sans); letter-spacing: -.01em; }
.nt-upload__sub { margin: 0; font-size: 14px; color: var(--tinta-2); }
.nt-upload__sub u { text-underline-offset: 3px; color: var(--tinta); }
.nt-upload__formatos { margin: 6px 0 0; font: 500 12px/1.4 var(--font-sans); color: var(--tinta-3); }
.nt-upload__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* cada arquivo é uma linha da caixa (a linha de progresso do financeiro): ladrilho, nome, barra e o fim */
.nt-arquivo { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 10px 10px 10px; border-radius: 22px; }
.nt-arquivo__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--caixa-ladrilho); box-shadow: var(--caixa-ladrilho-luz); color: var(--tinta-2); }
.nt-caixa .nt-arquivo { background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda); }
.nt-arquivo__icone svg { width: 20px; height: 20px; }
.nt-arquivo__info { display: grid; gap: 6px; min-width: 0; }
.nt-arquivo__nome { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.nt-arquivo__nome span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-arquivo__peso { flex: none; font: 500 12px/1.3 var(--font-sans); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.nt-arquivo__barra { position: relative; height: 3px; background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 40%, transparent) 1px, transparent 1.6px) 0 50% / 7px 3px repeat-x; }
.nt-arquivo__barra > i { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; background: var(--azul-barra); box-shadow: 0 0 8px color-mix(in srgb, var(--azul-barra) 50%, transparent); transition: width var(--duracao-base) var(--curva-linear); }
.nt-arquivo__estado { font-size: 12.5px; line-height: 1.4; color: var(--tinta-3); display: flex; align-items: center; gap: 6px; }
.nt-arquivo__estado svg { width: 14px; height: 14px; flex: none; }
.nt-arquivo.is-ok .nt-arquivo__icone { background: var(--sucesso-suave); color: var(--sucesso); box-shadow: none; }
.nt-arquivo.is-ok .nt-arquivo__estado { color: var(--sucesso); }
.nt-arquivo.is-ok .nt-arquivo__barra { display: none; }
.nt-arquivo.is-erro { box-shadow: var(--caixa-luz), inset 0 0 0 1px color-mix(in srgb, var(--erro) 45%, transparent); }
.nt-arquivo.is-erro .nt-arquivo__icone { background: var(--erro-suave); color: var(--erro); box-shadow: none; }
.nt-arquivo.is-erro .nt-arquivo__estado { color: var(--erro); }
.nt-arquivo.is-erro .nt-arquivo__barra { display: none; }

/* ---------- Estado vazio e erro ---------- */
.nt-estado { display: grid; justify-items: center; gap: var(--espaco-3); padding: var(--espaco-10) var(--espaco-6); text-align: center; border: 0; border-radius: var(--raio-3xl); background: var(--caixa); box-shadow: var(--caixa-luz); color: var(--tinta); }
.nt-estado__arte { width: 112px; height: 112px; margin-bottom: var(--espaco-3); color: var(--borda-forte); }
.nt-estado__arte .estrela { fill: var(--destaque); }
.nt-estado__titulo { margin: 0; font: 600 20px/1.3 var(--font-sans); letter-spacing: -.015em; max-width: 30ch; }
.nt-estado__texto { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.nt-estado__acoes { display: flex; gap: var(--espaco-2); flex-wrap: wrap; justify-content: center; margin-top: var(--espaco-3); }
/* v4.0: o erro acende em vermelho como a pílula de status (o badge): o ícone num círculo escuro fixo com o degradê da
   cor, a borda e o brilho por dentro e por fora; a caixa ganha um fio vermelho e um halo suave. Igual nos dois temas. */
.nt-estado--erro { --c: var(--status-vermelho); box-shadow: var(--caixa-luz), inset 0 0 0 1px rgba(var(--c), .38), 0 0 48px -20px rgba(var(--c), .55); }
.nt-estado__icone { --c: var(--status-vermelho); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: var(--espaco-2);
  border: 1px solid rgba(var(--c), .85); background: radial-gradient(circle at 50% 70%, rgba(var(--c), .36) 0%, rgba(var(--c), .1) 70%), #0B0D10;
  box-shadow: inset 0 0 14px rgba(var(--c), .3), 0 0 22px -4px rgba(var(--c), .65); color: var(--status-vermelho-texto); }
.nt-estado__icone svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(var(--c), .6)); }
.nt-estado__codigo { font: 500 12px/1.4 var(--font-sans); color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* ---------- Esqueleto de carregamento ---------- */
.nt-esqueleto { display: grid; gap: var(--espaco-4); }
.nt-esqueleto__bloco, .nt-esqueleto__linha, .nt-esqueleto__circulo {
  background: linear-gradient(90deg, var(--caixa-dentro) 0%, color-mix(in srgb, var(--tinta) 4%, var(--caixa)) 40%, var(--caixa-dentro) 80%) 0 0 / 300% 100%;
  animation: nt-brilho 1.6s linear infinite;
}
.nt-esqueleto__bloco { border-radius: 22px; aspect-ratio: var(--ar, 16 / 10); }
.nt-esqueleto__linha { height: 12px; border-radius: 6px; width: var(--w, 100%); }
.nt-esqueleto__linha--titulo { height: 18px; }
.nt-esqueleto__circulo { width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%; flex: none; }
@keyframes nt-brilho { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .nt-esqueleto__bloco, .nt-esqueleto__linha, .nt-esqueleto__circulo { animation: none; background: var(--caixa-dentro); } }
:root[data-movimento="reduzido"] .nt-esqueleto__bloco, :root[data-movimento="reduzido"] .nt-esqueleto__linha, :root[data-movimento="reduzido"] .nt-esqueleto__circulo { animation: none; background: var(--caixa-dentro); }

/* =========================================================
   SUPERFÍCIES, PÍLULAS, DADOS E LAYOUT DE APP (v3.3, vindos do financeiro; desde a v4.2, de todos)
   ========================================================= */

/* ---------- Painel (v3.3, 2026-10-15): a linguagem do financeiro do estúdio ----------
   Ferramentas e painéis (financeiro, portal): caixas com luz própria sobre a página cinza, números e datas em matriz
   de pontos, pílulas de vidro com o círculo um tom mais escuro, barra de progresso em linha e pontos. A página entra no
   modo painel com .nt-app; o site continua com as regras dele. */

/* Página de painel: desde a v4.0 o sistema inteiro fala a língua do financeiro (fundo #F3F3F5, só Inter Tight), então
   .nt-app só garante o fundo e a matriz de pontos caindo na sans quando falta um glifo. */
.nt-app { background: var(--fundo); color: var(--tinta); font-family: var(--font-sans); --font-matriz: "Doto", var(--font-sans); }
.nt-app .nt-mono { font-variant-numeric: tabular-nums; }

/* As peças de dentro das caixas mudam com o tema (as cores de superfície, pílula e luz são tokens: caixa, caixa-dentro,
   pilula-fundo, pilula-circulo, pilula-borda, caixa-luz, caixa-luz-principal, gradiente-caixa). No claro: ladrilhos de
   ícone brancos, pontos escuros e o botão da seta preto. No escuro: o vidro claro por cima e o botão da seta branco. */
:root, [data-theme="claro"] {
  --caixa-pad: clamp(22px, 2.3vw, 30px);
  --caixa-principal: var(--gradiente-caixa);
  --caixa-dentro-borda-forte: rgba(11, 13, 16, .14);
  --caixa-ladrilho: var(--neutro-0); --caixa-ladrilho-luz: 0 1px 2px rgba(11, 13, 16, .08), inset 0 0 0 1px rgba(11, 13, 16, .05);
  --caixa-ponto: rgba(11, 13, 16, .22);
  --caixa-acao: var(--neutro-1000); --caixa-acao-texto: var(--neutro-50);
  --caixa-alerta: var(--erro);
}
[data-theme="escuro"] {
  --caixa-principal: var(--gradiente-caixa);
  --caixa-dentro-borda-forte: rgba(255, 255, 255, .22);
  --caixa-ladrilho: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); --caixa-ladrilho-luz: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .08);
  --caixa-ponto: rgba(245, 245, 243, .3);
  --caixa-acao: var(--neutro-50); --caixa-acao-texto: var(--neutro-1000);
  --caixa-alerta: var(--brasa-texto);
}

/* Bento: 12 colunas; cada peça diz quantas ocupa (b3 a b12). Uma por linha no celular. */
.nt-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espaco-4); }
.nt-bento > * { min-width: 0; grid-column: span 12; }
@media (min-width: 700px) { .nt-b3, .nt-b4 { grid-column: span 4; } .nt-b5, .nt-b6, .nt-b7 { grid-column: span 6; } .nt-b8 { grid-column: span 8; } .nt-b9, .nt-b12 { grid-column: span 12; } }
/* Pilha (v4.5, vinda do financeiro): uma peça do bento com duas ou mais caixas uma embaixo da outra, ao lado de uma caixa
   alta. Cada caixa fica na altura do que tem; a última cresce até a base alinhar com a vizinha. */
.nt-bento > .nt-pilha { display: flex; flex-direction: column; gap: var(--espaco-4); }
.nt-pilha > :last-child { flex: 1 0 auto; }
@media (min-width: 1100px) { .nt-b3 { grid-column: span 3; } .nt-b5 { grid-column: span 5; } .nt-b7 { grid-column: span 7; } .nt-b9 { grid-column: span 9; } }
/* Grade de cards (listas de cards iguais: clientes, projetos): quantas colunas couberem com a largura mínima do card,
   300 px (240 no --s); uma no celular. Segue a largura do conteúdo, não a da janela, então se ajusta com a lateral. */
.nt-grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min-card, 300px)), 1fr)); gap: var(--espaco-4); }
.nt-grade-cards > * { min-width: 0; }
.nt-grade-cards--s { --min-card: 240px; }

/* ---------- Caixa ----------
   Cor base (sem degradê): branca no claro, grafite no escuro. .is-principal: o degradê do tom, o grão e os cantos
   contínuos; uma por bloco, ou o primeiro bloco da página inteiro. O tom grafite no claro é o gradiente preto invertido
   (centro branco, borda acesa em cinza). Tons coloridos (azul, verde, brasa, roxo, laranja, horizonte) são objetos
   escuros nos dois temas: levam data-theme="escuro". */
.nt-caixa { position: relative; isolation: isolate; min-width: 0; padding: var(--caixa-pad); border-radius: var(--raio-3xl);
  background: var(--caixa); color: var(--tinta); box-shadow: var(--caixa-luz); --opacidade-grao: 0; --pilula-fundo: var(--caixa-dentro); }
.nt-caixa > * { position: relative; z-index: 2; }
.nt-caixa.is-principal { --opacidade-grao: .14; background: var(--caixa-fundo, var(--caixa-principal)); box-shadow: var(--caixa-luz-principal); }
.nt-caixa::after { border-radius: inherit; corner-shape: inherit; }
.nt-caixa--azul.is-principal { --caixa-fundo: var(--gradiente-azul); }
.nt-caixa--verde.is-principal { --caixa-fundo: var(--gradiente-verde); }
.nt-caixa--brasa.is-principal { --caixa-fundo: var(--gradiente-brasa); }
.nt-caixa--roxo.is-principal { --caixa-fundo: var(--gradiente-roxo); }
.nt-caixa--laranja.is-principal { --caixa-fundo: var(--gradiente-laranja); }
.nt-caixa--horizonte.is-principal { --caixa-fundo: var(--gradiente-horizonte); }
/* Nas caixas coloridas o texto secundário é o branco translúcido, que leva a cor da caixa (o cinza do tema escuro some
   no azul e no verde); nas cores de banco a borda é clara e ele sobe. */
:is(.nt-caixa--azul, .nt-caixa--verde, .nt-caixa--brasa, .nt-caixa--horizonte).is-principal { --tinta-2: rgba(245, 245, 243, .66); --tinta-3: rgba(245, 245, 243, .44); }
:is(.nt-caixa--roxo, .nt-caixa--laranja).is-principal { --tinta-2: rgba(245, 245, 243, .86); --tinta-3: rgba(245, 245, 243, .74); }
/* Dentro das caixas coloridas a pílula é o vidro escuro (como as parcelas e a conta da sobra do financeiro): a cor da
   caixa aparece por trás, mais funda, e o valor lê por cima. */
:is(.nt-caixa--azul, .nt-caixa--verde, .nt-caixa--brasa, .nt-caixa--roxo, .nt-caixa--laranja, .nt-caixa--horizonte).is-principal { --pilula-fundo: rgba(20, 22, 30, .42); }
:is(.nt-caixa--azul, .nt-caixa--verde, .nt-caixa--brasa, .nt-caixa--roxo, .nt-caixa--laranja, .nt-caixa--horizonte).is-principal .nt-pilula:not(.nt-pilula--resultado) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Alerta numa caixa de cor base vai para o número, não para o fundo. */
.nt-caixa--brasa:not(.is-principal) .nt-num { color: var(--caixa-alerta); }
.nt-caixa--grafico { min-height: 340px; }
/* Caixa de leitura (lista, texto, tabela por dentro): o conteúdo em pilha com 16 px entre as peças e o título em sentença,
   como o do widget. A caixa vira contêiner, para o número em pontos e as linhas medirem a largura dela. */
.nt-caixa--grade { display: grid; gap: var(--espaco-4); align-content: start; container-type: inline-size; }
.nt-caixa__titulo { margin: 0; font: 500 18px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--tinta); overflow-wrap: anywhere; }
/* Texto corrido numa caixa de leitura (a regra rápida, o que é a página): 16 px, uma linha de leitura confortável. */
.nt-caixa__texto { max-width: 62ch; margin: 0; font-size: 16px; line-height: 1.5; color: var(--tinta-2); }
@supports (corner-shape: squircle) {
  .nt-caixa.is-principal { corner-shape: squircle; border-radius: 80px; }
  @media (max-width: 699px) { .nt-caixa.is-principal { border-radius: 64px; } }
}
@media (max-width: 699px) { .nt-caixa { border-radius: var(--raio-2xl); --caixa-pad: 22px; } }

/* Widget: a caixa com título, o canto (seta ou pílula), o número e o pé. */
.nt-widget { display: flex; flex-direction: column; gap: var(--espaco-4); min-height: 232px; container-type: inline-size; text-decoration: none; }
a.nt-widget { transition: transform var(--duracao-base) var(--curva-entrada), box-shadow var(--duracao-base) var(--curva-entrada); }
a.nt-widget:hover { transform: translateY(-2px); }
a.nt-widget:active { transform: scale(var(--escala-pressao)); }
.nt-widget:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.nt-widget, a.nt-widget:hover, a.nt-widget:active { transform: none; transition: none; } }
.nt-widget__topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--espaco-2) var(--espaco-3); min-height: 44px; }
.nt-widget__titulo { flex: 1 1 12ch; min-width: 0; margin: 0; padding-top: 8px; font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.nt-widget__acao { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--caixa-acao); color: var(--caixa-acao-texto); box-shadow: 0 6px 16px -6px rgba(0, 0, 2, .5); }
.nt-widget__acao .nt-icone { width: 18px; height: 18px; }
.nt-widget__sub { margin: 0; font-size: 13px; color: var(--tinta-2); }
.nt-widget__base, .nt-widget__pares, .nt-widget__fim { margin-top: auto; }
.nt-widget__base { display: grid; gap: 10px; }
.nt-widget__pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: var(--espaco-3); padding-top: var(--espaco-3); margin-bottom: 0; }
.nt-widget__pares > div { display: grid; gap: 2px; min-width: 0; }
.nt-widget__pares dt { order: 2; font-size: 12px; color: var(--tinta-3); }
.nt-widget__pares dd { margin: 0; font-size: clamp(13px, 4.8cqi, 16px); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-widget__legenda { display: flex; justify-content: space-between; gap: var(--espaco-3); font-size: 12px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.nt-widget__legenda > span, .nt-widget__chaves > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.nt-widget__fim { display: grid; gap: 6px; padding-top: var(--espaco-4); }
/* O par que pede atenção ganha o ponto lima antes do valor. */
.nt-widget__pares .is-alerta dd::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--lima); vertical-align: 2px; }
/* Sem dado: a frase do que vai aparecer ali, na base da caixa. */
.nt-widget__vazio { margin: auto 0 0; max-width: 34ch; font-size: 14px; color: var(--tinta-2); }
/* Lista logo abaixo do número (as parcelas de um cartão), com o rótulo pequeno em cima: alinha no topo entre caixas vizinhas. */
.nt-widget__lista { display: grid; margin-top: var(--espaco-2); }
.nt-widget__rotulo { margin: 0 0 2px; font: 400 11px/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
/* As séries de um gráfico (● recebido ○ a receber), embaixo dele. */
.nt-widget__chaves { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--tinta-2); }
/* A pílula do canto em 13 px; na caixa estreita o rótulo apagado some e fica o valor. */
.nt-widget__topo > .nt-pilula { font-size: 13px; }
@container (max-width: 440px) { .nt-widget__topo > .nt-pilula .nt-pilula__nome { display: none; } }
@media (max-width: 699px) { .nt-widget { min-height: 0; gap: var(--espaco-5); } .nt-caixa--grafico { min-height: 0; } }

/* Número em matriz de pontos (Doto): R$ e centavos menores, os centavos apagados; o tamanho segue a caixa (cqi). */
.nt-num { --num: clamp(30px, 16.5cqi, 58px); display: block; font: 800 var(--num)/.95 var(--font-matriz); font-variation-settings: "ROND" 100; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-num--m { --num: clamp(26px, 11cqi, 40px); }
.nt-num__moeda { font-size: .4em; letter-spacing: .02em; }
.nt-num__cent { font-size: .4em; opacity: .5; }

/* ---------- Barra de progresso ----------
   A linha colorida com um círculo na ponta e o que falta em pontos. --f (0 a 1) é o progresso; --m (0 a 1) põe o traço
   lima de um limite (teto, média). Azul nas caixas de cor base e grafite, branca nas caixas coloridas. */
.nt-progresso { --cor: var(--azul-barra); --f: 0; --pontos: currentColor; position: relative; height: 14px; min-width: 56px; }
:is(.nt-caixa--azul, .nt-caixa--verde, .nt-caixa--brasa, .nt-caixa--roxo, .nt-caixa--laranja, .nt-caixa--horizonte).is-principal .nt-progresso { --cor: var(--neutro-50); }
.nt-progresso--tinta { --cor: var(--tinta); }
.nt-progresso::before { content: ""; position: absolute; top: 50%; left: calc(6px + (100% - 12px) * var(--f) + 11px); right: 0; height: 3px; transform: translateY(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--pontos) 45%, transparent) 1px, transparent 1.6px) 0 50% / 7px 3px repeat-x; }
.nt-progresso__linha { position: absolute; z-index: 2; top: 50%; left: 6px; width: calc((100% - 12px) * var(--f)); height: 3px; transform: translateY(-50%); border-radius: 3px; background: var(--cor); }
.nt-progresso__linha::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); border-radius: 50%; background: var(--cor);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 22%, transparent), 0 0 12px color-mix(in srgb, var(--cor) 40%, transparent); }
.nt-progresso__marca { position: absolute; z-index: 1; top: 50%; left: calc(6px + (100% - 12px) * var(--m)); width: 3px; height: 16px; transform: translate(-50%, -50%); border-radius: 2px; background: var(--lima); box-shadow: 0 0 10px rgba(216, 240, 94, .45); }
/* Legenda das barras: o ponto cheio e o traço pontilhado. */
.nt-ponto-cheio { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.nt-traco-pontos { display: inline-block; width: 16px; height: 4px; vertical-align: 2px; background: radial-gradient(circle, color-mix(in srgb, currentColor 55%, transparent) 1px, transparent 1.6px) 0 50% / 5px 4px repeat-x; }
/* O ponto vazado é a segunda série de um gráfico (o trecho vazado das barras); o lima marca o que pede atenção. */
.nt-ponto-cheio--vazado { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.nt-ponto-cheio--lima { margin-right: 6px; background: var(--lima); }

/* ---------- Gráfico de barras ----------
   Barras retangulares grossas até o valor e o resto da escala numa grade de pontos da largura da barra. --altura e --n
   (colunas) vêm do HTML; --f é a altura da barra e --p1 onde termina a primeira série (acima dela, a segunda vazada).
   A coluna em destaque fica em lima com brilho e a etiqueta do valor; as outras num lima apagado até o mouse ou o foco. */
.nt-grafico-barras { --cor: var(--lima); --larg: clamp(10px, calc(60cqi / var(--n, 6)), 28px); display: flex; justify-content: space-around; align-items: flex-end; gap: 6px; margin-top: auto; padding-top: 44px; }
.nt-grafico-barras__col { display: grid; justify-items: center; gap: var(--espaco-3); min-width: 0; border-radius: var(--raio-m); outline: none; }
.nt-grafico-barras__col:focus-visible { box-shadow: 0 0 0 2px var(--foco); }
.nt-grafico-barras__pista { position: relative; width: var(--larg); height: var(--altura, 168px); background: radial-gradient(circle, var(--caixa-ponto) 1px, transparent 1.6px) 50% 0 / 7px 7px repeat; }
.nt-grafico-barras__barra { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; min-height: 4px; height: calc(var(--f) * 100%); border-radius: 6px;
  background: linear-gradient(to top, var(--cor) 0 var(--p1, 100%), var(--caixa) var(--p1, 100%)); box-shadow: inset 0 0 0 1.5px var(--cor); }
.nt-grafico-barras__col:not(.is-destaque) { --cor: color-mix(in oklab, var(--lima) 50%, #0B0D10); }
.nt-grafico-barras__col:not(.is-destaque):is(:hover, :focus-visible) { --cor: color-mix(in oklab, var(--lima) 85%, #0B0D10); }
.nt-grafico-barras__col.is-destaque .nt-grafico-barras__barra { box-shadow: inset 0 0 0 1.5px var(--cor), 0 0 18px rgba(216, 240, 94, .35); }
.nt-grafico-barras__col.is-vazia .nt-grafico-barras__barra { display: none; }
.nt-grafico-barras__etiqueta { position: absolute; left: 50%; bottom: calc(var(--f) * 100% + 10px); z-index: 1; transform: translateX(-50%); padding: 5px 10px; border-radius: var(--raio-pilula); background: var(--neutro-50); color: var(--neutro-1000);
  font: 600 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(0, 0, 2, .6); opacity: 0; pointer-events: none; transition: opacity var(--duracao-rapida) var(--curva-entrada); }
.nt-grafico-barras__col.is-destaque .nt-grafico-barras__etiqueta, .nt-grafico-barras__col:hover .nt-grafico-barras__etiqueta, .nt-grafico-barras__col:focus-visible .nt-grafico-barras__etiqueta { opacity: 1; }
.nt-grafico-barras:has(.nt-grafico-barras__col:hover) .nt-grafico-barras__col.is-destaque:not(:hover) .nt-grafico-barras__etiqueta { opacity: 0; }
.nt-grafico-barras__rotulo { font: 400 11px/1 var(--font-sans); letter-spacing: .04em; color: var(--tinta-3); white-space: nowrap; }
.nt-grafico-barras__col.is-destaque .nt-grafico-barras__rotulo { color: var(--tinta); }
/* O rótulo do mês encolhe com a caixa: "out/26", depois "out", depois "o". */
@container (max-width: 900px) { .nt-grafico-barras__ano { display: none; } }
@container (max-width: 560px) { .nt-grafico-barras__resto { display: none; } }
@media (prefers-reduced-motion: reduce) { .nt-grafico-barras__etiqueta { transition: none; } }

/* ---------- Pílula de vidro ----------
   Cápsula de 44 px com o círculo de 34 px um tom mais escuro (ícone, número da seção ou contagem) e o texto. Branca
   sobre a página no claro e no cinza da página dentro das caixas; vidro escuro no escuro. A marcada (aria-current,
   aria-pressed) e a ação principal (--forte) usam primario. --dado: só informação, sem cursor; --nav: dois círculos
   botão e o rótulo no meio; --icone: só o círculo; --imagem: o vidro escuro fixo por cima de foto. */
.nt-pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-pilula { display: inline-flex; flex: none; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 5px 16px 5px 5px; border: 0; border-radius: var(--raio-pilula);
  background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda); color: var(--tinta); font: 500 14px/1 var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--duracao-rapida) ease, color var(--duracao-rapida) ease, box-shadow var(--duracao-rapida) ease; }
.nt-pilula__circulo { display: grid; place-items: center; flex: none; min-width: 34px; height: 34px; padding: 0 5px; border: 0; border-radius: var(--raio-pilula);
  background: var(--pilula-circulo); color: var(--pilula-circulo-tinta); font: 800 13px/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; transition: background-color var(--duracao-rapida) ease; }
.nt-pilula__circulo .nt-icone { width: 16px; height: 16px; }
.nt-pilula:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
.nt-pilula:is([aria-current="true"], [aria-current="page"], [aria-pressed="true"]), .nt-pilula--forte { background: var(--primario); color: var(--sobre-primario); box-shadow: none; }
.nt-pilula:is([aria-current="true"], [aria-current="page"], [aria-pressed="true"]) .nt-pilula__circulo, .nt-pilula--forte .nt-pilula__circulo { background: color-mix(in srgb, var(--sobre-primario) 16%, transparent); color: inherit; }
.nt-pilula:focus-visible, .nt-pilula__botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.nt-pilula[hidden] { display: none; }
.nt-pilula--dado { cursor: inherit; }
.nt-pilula--dado:hover { box-shadow: inset 0 0 0 1px var(--pilula-borda); }
.nt-pilula--icone { padding: 5px; }
.nt-pilula--nav { gap: 6px; padding: 5px; cursor: default; }
.nt-pilula--nav:hover { box-shadow: inset 0 0 0 1px var(--pilula-borda); }
.nt-pilula__botao { cursor: pointer; }
.nt-pilula__botao:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.nt-pilula__botao.is-desligado { opacity: .35; pointer-events: none; }
.nt-pilula__meio { padding: 0 8px; }
/* Duas linhas (rótulo pequeno em cima, valor embaixo) e valor na ponta (a conta, os passos, o lucro). */
.nt-pilula__texto { display: grid; gap: 4px; min-width: 0; }
.nt-pilula__rotulo { font-size: 11px; line-height: 1; color: var(--tinta-3); font-weight: 400; }
.nt-pilula__valor { font-size: 13px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.nt-pilula--larga { display: flex; width: 100%; padding-right: 18px; white-space: normal; }
.nt-pilula__fim { margin-left: auto; padding-left: 12px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt-pilula__sinal { font: 600 17px/1 var(--font-sans); }
/* O texto de duas linhas quebra quando a pílula fica estreita, e a pílula de dado nunca passa do contêiner. */
.nt-pilula__texto { white-space: normal; }
.nt-pilula--dado { max-width: 100%; }
/* Rótulo apagado de uma linha, ao lado do círculo (a conta da sobra, a pílula do canto do widget: "esta semana"). */
.nt-pilula__nome { min-width: 0; font-size: 13px; line-height: 1.25; color: var(--tinta-2); }
/* O passo: o que fazer em cima e o detalhe apagado embaixo; no passo atrasado (.is-alerta), o detalhe em vermelho. */
.nt-pilula__titulo { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.nt-pilula__detalhe { font-size: 12px; line-height: 1.2; color: var(--tinta-3); }
.nt-pilula.is-alerta .nt-pilula__detalhe { color: var(--erro); }
/* Mês e ano no círculo, como um selo de calendário (as parcelas de um cartão): use com __circulo. */
.nt-pilula__data { place-content: center; justify-items: center; }
.nt-pilula__data b { font: 700 10.5px/1 var(--font-sans); letter-spacing: .02em; }
.nt-pilula__data small { margin-top: 1px; font: 500 8.5px/1 var(--font-sans); opacity: .6; }
/* Pílulas em coluna (a conta, as parcelas, os extras) e em grade de colunas (os próximos passos, 360 px no mínimo). */
.nt-pilulas--coluna, .nt-pilulas--grade { display: grid; margin: 0; padding: 0; list-style: none; }
.nt-pilulas--coluna { gap: 8px; }
.nt-pilulas--coluna > *, .nt-pilulas--grade > * { min-width: 0; }
.nt-pilulas--grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 8px; }
.nt-pilulas--grade > li { display: grid; }
/* Caixa estreita (menos de 280 px de conteúdo): a pílula larga põe o rótulo em cima e o valor embaixo, ao lado do círculo. */
@container (max-width: 280px) {
  .nt-pilulas--coluna > .nt-pilula--larga { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; padding: 6px 14px 6px 5px; border-radius: 24px; }
  .nt-pilulas--coluna > .nt-pilula--larga > .nt-pilula__circulo { grid-row: span 2; }
  .nt-pilulas--coluna > .nt-pilula--larga > .nt-pilula__nome { font-size: 12px; }
  .nt-pilulas--coluna > .nt-pilula--larga > .nt-pilula__fim { margin-left: 0; padding-left: 0; }
}
.nt-pilula--imagem { background: rgba(14, 15, 20, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--neutro-50); }
.nt-pilula--imagem .nt-pilula__circulo { background: rgba(0, 0, 2, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nt-pilula--imagem:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
/* O resultado (lucro): a pílula inteira com a cor do resultado, no brilho das pílulas de status. */
.nt-pilula--resultado { --c: var(--status-cinza); --t: var(--status-cinza-texto); color: var(--t); background: linear-gradient(90deg, rgba(var(--c), .06) 0%, rgba(var(--c), .3) 100%), #0B0D10; }
.nt-pilula--resultado, .nt-pilula--resultado:hover { box-shadow: inset 0 0 0 1px rgba(var(--c), .8), inset 0 0 12px rgba(var(--c), .2), 0 0 16px -6px rgba(var(--c), .6); }
.nt-pilula--resultado.is-positivo { --c: var(--status-verde); --t: var(--status-verde-texto); }
.nt-pilula--resultado.is-negativo { --c: var(--status-vermelho); --t: var(--status-vermelho-texto); }
.nt-pilula--resultado .nt-pilula__circulo { background: rgba(var(--c), .16); color: rgb(var(--c)); }
.nt-pilula--resultado .nt-pilula__nome { font-size: 12px; color: inherit; opacity: .82; }
@media (max-width: 699px) { .nt-pilulas--ancoras { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }
@media (prefers-reduced-motion: reduce) { .nt-pilula, .nt-pilula__circulo { transition: none; } }

/* ---------- Pílula de status ----------
   Cápsula escura com o degradê da cor para a direita, borda e texto na cor, brilho por dentro e por fora, o sinal de
   16 px à esquerda. --c é a cor (r, g, b) e --t o texto. O fundo é fixo: igual nos dois temas. */
.nt-status { --c: var(--status-cinza); --t: var(--status-cinza-texto); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 5px; border-radius: var(--raio-pilula);
  border: 1px solid rgba(var(--c), .85); background: linear-gradient(90deg, rgba(var(--c), .05) 0%, rgba(var(--c), .32) 100%), #0B0D10;
  box-shadow: inset 0 0 10px rgba(var(--c), .22), 0 0 14px -5px rgba(var(--c), .6); color: var(--t); font: 500 12.5px/1 var(--font-sans); white-space: nowrap; text-decoration: none; }
a.nt-status:hover { border-color: rgb(var(--c)); box-shadow: inset 0 0 12px rgba(var(--c), .3), 0 0 16px -4px rgba(var(--c), .75); }
.nt-status__icone { display: grid; place-items: center; flex: none; width: 16px; height: 16px; color: rgb(var(--c)); }
.nt-status__svg { display: block; width: 16px; height: 16px; }
.nt-status__svg .g { fill: none; stroke: #0B0D10; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nt-status__svg .gf { fill: #0B0D10; }
/* a paleta vem dos tokens status-* (a mesma do badge) */
.nt-status--ciano { --c: var(--status-ciano); --t: var(--status-ciano-texto); }
.nt-status--lilas { --c: var(--status-lilas); --t: var(--status-lilas-texto); }
.nt-status--amarelo { --c: var(--status-amarelo); --t: var(--status-amarelo-texto); }
.nt-status--ambar { --c: var(--status-ambar); --t: var(--status-ambar-texto); }
.nt-status--violeta { --c: var(--status-violeta); --t: var(--status-violeta-texto); }
.nt-status--verde { --c: var(--status-verde); --t: var(--status-verde-texto); }
.nt-status--salmao { --c: var(--status-salmao); --t: var(--status-salmao-texto); }
.nt-status--rosa { --c: var(--status-rosa); --t: var(--status-rosa-texto); }
.nt-status--vermelho { --c: var(--status-vermelho); --t: var(--status-vermelho-texto); }
.nt-status--azul { --c: var(--status-azul); --t: var(--status-azul-texto); }
.nt-status--cinza { --c: var(--status-cinza); --t: var(--status-cinza-texto); }

/* ---------- Linha de progresso ----------
   Uma caixa por item: o ícone num ladrilho, o nome (com uma linha embaixo), a barra com a legenda em cima e o valor no
   fim (com uma pílula de status embaixo, se houver). Com menos de 440 px de conteúdo, a barra desce para a segunda linha. */
.nt-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; container-type: inline-size; }
.nt-linha { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(120px, 34%) minmax(108px, auto); grid-template-areas: "icone texto barra valor"; align-items: center; gap: 8px 16px;
  padding: 12px 18px 12px 12px; border-radius: 22px; background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda); }
.nt-linha__icone { grid-area: icone; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--tinta); background: var(--caixa-ladrilho); box-shadow: var(--caixa-ladrilho-luz); }
.nt-linha__icone .nt-icone { width: 22px; height: 22px; }
.nt-linha__texto { grid-area: texto; display: grid; gap: 2px; min-width: 0; }
.nt-linha__nome { font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.nt-linha__sub { font-size: 12px; color: var(--tinta-3); overflow-wrap: anywhere; }
.nt-linha__barra { grid-area: barra; display: grid; gap: 4px; min-width: 0; }
.nt-linha__meta { font-size: 12px; line-height: 1.3; color: var(--tinta-3); text-align: right; }
.nt-linha__fim { grid-area: valor; display: grid; justify-items: end; gap: 6px; }
.nt-linha__valor { font-size: 16px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-linha--resto .nt-linha__nome { color: var(--tinta-2); font-weight: 400; }
/* Linha sem barra (uma lista de projetos, de notas): o ícone, o texto e o fim; a linha inteira pode ser o link. */
.nt-linha--sem-barra { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "icone texto valor"; }
a.nt-linha { color: inherit; text-decoration: none; transition: box-shadow var(--duracao-rapida) ease; }
a.nt-linha:hover { box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda-forte); }
a.nt-linha:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
/* Linha que abre um formulário (v4.5, vinda do financeiro): um botão sem texto cobre a linha toda (o rótulo vai no
   aria-label), com o contorno e o foco da linha-link. */
.nt-linha--editavel { position: relative; transition: box-shadow var(--duracao-rapida) ease; }
.nt-linha--editavel:hover { box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda-forte); }
.nt-linha__abrir { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.nt-linha__abrir:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
@container (max-width: 440px) {
  .nt-linha { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "icone texto valor" "icone barra barra"; }
  .nt-linha__meta { text-align: left; }
}

/* ---------- Capa de página ----------
   Imagem (ou o Horizonte) com o véu; em cima, a área numa pílula à esquerda e os meses e o lápis à direita; embaixo, o
   título grande em matriz de pontos (a data do dia, numa linha só, ou um texto curto). */
.nt-capa { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: clamp(260px, 30vw, 380px); border-radius: var(--raio-xl); overflow: hidden; container-type: inline-size;
  background: var(--neutro-1000); color: var(--neutro-50); }
.nt-capa--sem-imagem { background: linear-gradient(135deg, var(--horizonte-0) 0%, var(--horizonte-1) 45%, var(--horizonte-2) 100%); }
.nt-capa__imagem { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.nt-capa__veu { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 2, .35) 0%, rgba(0, 0, 2, 0) 30%, rgba(0, 0, 2, .72) 100%); pointer-events: none; }
.nt-capa__topo { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-3); padding: var(--espaco-4) var(--espaco-5); }
.nt-capa__direita { display: flex; align-items: center; gap: var(--espaco-2); margin-left: auto; }
.nt-capa__texto { position: relative; z-index: 2; grid-row: 3; display: grid; gap: var(--espaco-3); padding: var(--espaco-5); }
.nt-capa__titulo { --tam: clamp(40px, 9cqi, 112px); margin: 0; max-width: 16ch; font: 800 var(--tam)/.92 var(--font-matriz); font-variation-settings: "ROND" 100; letter-spacing: 0; color: var(--neutro-50); text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 18px rgba(0, 0, 2, .28); }
.nt-capa__titulo--data { --tam: clamp(44px, 13.5cqi, 168px); max-width: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Embaixo do título: o cliente e o status (a página de um projeto). */
.nt-capa__fim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-3); }
/* O estado do envio do lápis ("Enviando…", "Salvo"), ao lado dele; vazio, some. */
.nt-capa__estado { padding: 4px 10px; border-radius: var(--raio-pilula); background: rgba(0, 0, 2, .5); color: var(--neutro-50); font-size: 12px; }
.nt-capa__estado:empty { display: none; }
@media (max-width: 699px) { .nt-capa { min-height: 240px; } .nt-capa__topo { padding: var(--espaco-3) var(--espaco-4); } .nt-capa .nt-pilula__meio { display: none; } }

/* ---------- Cabeçalho de seção do painel ----------
   O número da seção num círculo branco com o número em pontos, do tamanho do corpo do título, e o título ao lado. */
.nt-secao-painel { --h2: clamp(26px, 3.2vw, 36px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espaco-3); }
.nt-secao-painel__cabeca { display: flex; align-items: center; gap: calc(var(--h2) * .32); min-width: 0; }
.nt-secao-painel__num { flex: none; display: grid; place-items: center; width: var(--h2); height: var(--h2); border-radius: 50%; background: var(--neutro-50); color: var(--neutro-1000);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 2, .5), inset 0 0 0 1px rgba(0, 0, 2, .08); font: 800 calc(var(--h2) * .44)/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; }
.nt-secao-painel__titulo { margin: 0; font-size: var(--h2); line-height: 1.1; font-weight: 500; letter-spacing: -.025em; }

/* ---------- Calendário do painel ----------
   O título e o mês em pílulas do mesmo tamanho; os dias da semana em pílulas; células no cinza da caixa; hoje com o
   degradê azul e o dia com dinheiro a receber com o verde (a cor sobe da base e o fio de baixo acende). */
.nt-cal { display: grid; gap: var(--espaco-3); align-content: start; container-type: inline-size; }
.nt-cal__topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espaco-3); }
.nt-cal__mes { min-width: 11ch; text-align: center; text-transform: capitalize; }
.nt-cal__semana, .nt-cal__grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nt-cal__dia-semana { display: flex; justify-content: center; align-items: center; height: 24px; overflow: hidden; border-radius: var(--raio-pilula); background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda);
  font: 500 10.5px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; }
@container (max-width: 420px) { .nt-cal__dia-semana-resto { display: none; } }
.nt-cal__dia { display: grid; align-content: start; gap: 2px; min-height: 76px; min-width: 0; padding: 6px; border-radius: 10px; background: var(--caixa-dentro); }
.nt-cal__dia--vazio { background: transparent; }
.nt-cal__num { font-size: 12px; color: var(--tinta-3); }
.nt-cal__dia:is(.is-hoje, .is-receber) {
  background: radial-gradient(160% 85% at 50% 120%, var(--brilho) 0%, var(--cor) 32%, var(--meio) 62%, transparent 88%), var(--neutro-1000);
  box-shadow: inset 0 -1.5px 0 var(--aro), inset 0 -10px 18px -10px var(--aro), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.nt-cal__dia.is-receber { --brilho: #9BE8C1; --cor: #2FA36B; --meio: #0E3B28; --aro: rgba(170, 240, 205, .75); }
.nt-cal__dia.is-hoje { --brilho: color-mix(in oklab, var(--cobalto) 45%, white); --cor: var(--cobalto); --meio: var(--azul-800); --aro: rgba(196, 206, 255, .8); }
.nt-cal__dia:is(.is-hoje, .is-receber) .nt-cal__num { color: var(--neutro-50); font-weight: 700; }
.nt-cal__chip { display: block; padding: 2px 5px; border-radius: 4px; background: var(--destaque-suave); color: var(--destaque); font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.nt-cal__chip--recebido { background: var(--sucesso-suave); color: var(--sucesso); }
.nt-cal__chip--entrega { background: var(--atencao-suave); color: var(--atencao); }
.nt-cal__chip--orcando { background: var(--superficie-3); color: var(--tinta-2); }
.nt-cal__dia:is(.is-hoje, .is-receber) .nt-cal__chip { background: rgba(255, 255, 255, .12); color: var(--neutro-50); }
/* Legenda em pílulas: a amostra de cada marca no círculo. */
.nt-legenda-painel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nt-legenda-painel > .nt-pilula { white-space: normal; font-size: 13px; }
.nt-legenda-painel__cor { display: block; width: 14px; height: 14px; border-radius: 4px; }
.nt-legenda-painel__cor--hoje { background: linear-gradient(0deg, color-mix(in oklab, var(--cobalto) 45%, white) 0%, var(--cobalto) 45%, #000 100%); }
.nt-legenda-painel__cor--receber { background: linear-gradient(0deg, #9BE8C1 0%, #2FA36B 45%, #000 100%); }
.nt-legenda-painel__cor--recebido { background: var(--sucesso-suave); box-shadow: inset 0 0 0 1.5px var(--sucesso); }
.nt-legenda-painel__cor--orcando { background: var(--superficie-3); box-shadow: inset 0 0 0 1.5px var(--tinta-3); }
.nt-legenda-painel__cor--entrega { background: var(--atencao-suave); box-shadow: inset 0 0 0 1.5px var(--atencao); }
/* O total do dia e o "+N" quando há mais de três chips; nas células coloridas ficam claros. */
.nt-cal__mais, .nt-cal__total { overflow: hidden; font-size: 11px; color: var(--tinta-3); white-space: nowrap; text-overflow: ellipsis; }
.nt-cal__dia:is(.is-hoje, .is-receber) :is(.nt-cal__total, .nt-cal__mais) { color: rgba(245, 245, 243, .8); }
@media (max-width: 600px) { .nt-cal { padding: var(--espaco-3); } .nt-cal__dia { min-height: 54px; padding: 3px 2px; } .nt-cal__chip { font-size: 10px; padding: 1px 3px; } .nt-cal__total { display: none; } }

/* ---------- Linha do tempo do job (TimelineJob; desde a v4.2 em Componentes: o portal e o financeiro usam) ----------
   A do financeiro: etapas feitas em lima e ligadas pela linha lima, a atual com o brilho do círculo da barra, as próximas
   ligadas por pontos. No celular (e na --vertical) a linha desce entre os marcos. */
.nt-timeline { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.nt-timeline__etapa { position: relative; display: grid; gap: var(--espaco-3); align-content: start; padding-right: var(--espaco-4); min-width: 0; }
.nt-timeline__etapa::before { content: ""; position: absolute; top: 16.5px; left: 44px; right: 8px; height: 3px;
  background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 45%, transparent) 1px, transparent 1.6px) 0 50% / 7px 3px repeat-x; }
.nt-timeline__etapa.is-feita::before { background: var(--lima); border-radius: 3px; }
.nt-timeline__etapa.is-atual::before { background: linear-gradient(90deg, var(--lima) 40%, transparent 40%), radial-gradient(circle, color-mix(in srgb, var(--tinta) 45%, transparent) 1px, transparent 1.6px) 0 50% / 7px 3px repeat-x; }
.nt-timeline__etapa:last-child::before { display: none; }
.nt-timeline__marco { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pilula-fundo); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 26%, transparent); color: var(--tinta-3); }
.nt-timeline__marco svg { width: 16px; height: 16px; }
/* No marco cabe um ícone (o portal) ou o número da etapa e o check (o financeiro). */
.nt-timeline__marco { font: 600 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.nt-timeline__etapa.is-feita .nt-timeline__marco { background: var(--lima); box-shadow: inset 0 0 0 1px rgba(11, 13, 16, .12); color: var(--neutro-1000); }
.nt-timeline__etapa.is-atual .nt-timeline__marco { background: var(--lima); box-shadow: 0 0 0 4px rgba(216, 240, 94, .26), 0 0 16px rgba(216, 240, 94, .55), inset 0 0 0 1px rgba(11, 13, 16, .12); color: var(--neutro-1000); }
@keyframes nt-onda { from { transform: scale(.8); opacity: .6; } to { transform: scale(calc(1 + .25 * var(--nt-movimento))); opacity: 0; } }
.nt-timeline__etapa.is-alerta .nt-timeline__marco { background: var(--brasa); box-shadow: 0 0 14px rgba(230, 75, 44, .5); color: var(--neutro-50); }
.nt-timeline__nome { margin: 0; font: 600 15px/1.3 var(--font-sans); }
.nt-timeline__etapa:not(.is-feita):not(.is-atual) .nt-timeline__nome { color: var(--tinta-3); font-weight: 400; }
.nt-timeline__data { margin: 0; font: 500 12px/1.3 var(--font-sans); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.nt-timeline__nota { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
.nt-timeline--vertical { grid-template-columns: 1fr; gap: 0; }
@media (max-width: 760px) { .nt-timeline { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 760px) {
  .nt-timeline__etapa { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--espaco-4); padding: 0 0 var(--espaco-6); }
  .nt-timeline__etapa > :not(.nt-timeline__marco) { grid-column: 2; }
  .nt-timeline__marco { grid-row: span 3; }
  .nt-timeline__etapa::before { top: 42px; bottom: 6px; left: 16.5px; right: auto; width: 3px; height: auto; background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 45%, transparent) 1px, transparent 1.6px) 50% 0 / 3px 7px repeat-y; }
  .nt-timeline__etapa.is-feita::before { background: var(--lima); }
  .nt-timeline__etapa.is-atual::before { background: linear-gradient(180deg, var(--lima) 40%, transparent 40%), radial-gradient(circle, color-mix(in srgb, var(--tinta) 45%, transparent) 1px, transparent 1.6px) 50% 0 / 3px 7px repeat-y; }
}
/* Pela largura da caixa (v4.4.1): numa caixa com menos de 450 px (a de sete colunas do bento numa janela média, com a
   barra lateral aberta) os seis marcos não cabem lado a lado e os nomes e as datas invadiam o vizinho. A linha desce,
   igual ao celular. Vale dentro de qualquer contêiner de largura; a caixa de leitura (nt-caixa--grade) já é um. */
@container (max-width: 449px) {
  .nt-timeline { grid-template-columns: 1fr; gap: 0; }
  .nt-timeline__etapa { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--espaco-4); padding: 0 0 var(--espaco-6); }
  .nt-timeline__etapa > :not(.nt-timeline__marco) { grid-column: 2; }
  .nt-timeline__marco { grid-row: span 3; }
  .nt-timeline__etapa::before { top: 42px; bottom: 6px; left: 16.5px; right: auto; width: 3px; height: auto; background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 45%, transparent) 1px, transparent 1.6px) 50% 0 / 3px 7px repeat-y; }
  .nt-timeline__etapa.is-feita::before { background: var(--lima); }
  .nt-timeline__etapa.is-atual::before { background: linear-gradient(180deg, var(--lima) 40%, transparent 40%), radial-gradient(circle, color-mix(in srgb, var(--tinta) 45%, transparent) 1px, transparent 1.6px) 50% 0 / 3px 7px repeat-y; }
}
.nt-timeline--vertical .nt-timeline__etapa { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--espaco-4); padding: 0 0 var(--espaco-6); }
.nt-timeline--vertical .nt-timeline__etapa > :not(.nt-timeline__marco) { grid-column: 2; }
.nt-timeline--vertical .nt-timeline__marco { grid-row: span 3; }
.nt-timeline--vertical .nt-timeline__etapa::before { top: 42px; bottom: 6px; left: 16.5px; right: auto; width: 3px; height: auto; background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 45%, transparent) 1px, transparent 1.6px) 50% 0 / 3px 7px repeat-y; }
.nt-timeline--vertical .nt-timeline__etapa.is-feita::before { background: var(--lima); }
.nt-timeline--vertical .nt-timeline__etapa.is-atual::before { background: linear-gradient(180deg, var(--lima) 40%, transparent 40%), radial-gradient(circle, color-mix(in srgb, var(--tinta) 45%, transparent) 1px, transparent 1.6px) 50% 0 / 3px 7px repeat-y; }

/* ---------- Passos (v4.2, vinda do catálogo e do financeiro) ----------
   Uma sequência de várias linhas (o passo a passo de um cálculo, como usar): cada passo numa peça de vidro, o número no
   círculo no topo, na linha do título (regra do círculo), o título em negrito e o texto apagado embaixo. */
.nt-passos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nt-passos > li { display: flex; align-items: flex-start; gap: 14px; padding: 10px 22px 10px 10px; border-radius: 26px; background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda); }
.nt-passos > li > b { display: grid; place-items: center; flex: none; min-width: 34px; height: 34px; padding: 0 6px; border-radius: var(--raio-pilula); background: var(--pilula-circulo); color: var(--pilula-circulo-tinta);
  font: 800 12px/1 var(--font-matriz); font-variation-settings: "ROND" 100; }
.nt-passos > li > p { margin: 0; padding-top: 7px; font-size: 14px; line-height: 1.45; color: var(--tinta-2); overflow-wrap: anywhere; }
.nt-passos > li > p > strong { display: block; font-weight: 600; color: var(--tinta); }

/* ---------- Tabela (v4.2, vinda do financeiro) ----------
   A tabela de leitura numa caixa que rola de lado quando não cabe (no celular, a página nunca rola de lado): números à
   direita em algarismos tabulares, a primeira coluna à esquerda e com quebra, o cabeçalho pequeno em caixa-alta apagado,
   um fio entre as linhas e a linha de total (.nt-tabela__total) em negrito no cinza da caixa. Sem grão: ela rola. */
.nt-tabela { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raio-2xl); }
.nt-tabela > table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.nt-tabela :is(th, td) { padding: 10px var(--espaco-4); border-bottom: 1px solid var(--borda); text-align: right; white-space: nowrap; }
.nt-tabela :is(th, td):first-child { min-width: 160px; padding-left: 24px; text-align: left; white-space: normal; }
.nt-tabela :is(th, td):last-child { padding-right: 24px; }
.nt-tabela th { font: 400 11px/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.nt-tabela tr:last-child td { border-bottom: 0; }
.nt-tabela tr.nt-tabela__total td { background: var(--caixa-dentro); font-weight: 600; }

/* ---------- Barra lateral flutuante ----------
   A caixa principal solta 16 px das bordas da janela e presa ao rolar: a logo no centro, a navegação em pílulas (a
   página atual em primario) e o tema embaixo. */
.nt-lateral { position: sticky; top: 16px; display: flex; flex-direction: column; gap: var(--espaco-8); width: 240px; height: calc(100vh - 32px); padding: var(--espaco-7) var(--espaco-5); }
.nt-lateral__marca { align-self: center; display: inline-flex; color: var(--tinta); }
.nt-lateral__nav { display: grid; gap: 2px; }
.nt-lateral__link { display: flex; align-items: center; gap: var(--espaco-3); padding: 10px 12px; border-radius: var(--raio-pilula); color: var(--tinta-2); text-decoration: none; font-weight: 500; }
.nt-lateral__link .nt-icone { width: 20px; height: 20px; flex: none; }
.nt-lateral__link:hover { color: var(--tinta); background: var(--caixa-dentro); }
.nt-lateral__link[aria-current="page"] { color: var(--sobre-primario); background: var(--primario); }
.nt-lateral__base { margin-top: auto; display: grid; justify-items: start; gap: var(--espaco-3); }
@supports (corner-shape: squircle) { .nt-lateral.nt-caixa { corner-shape: squircle; border-radius: 64px; } }
.nt-lateral__nota { margin: 0; font-size: 11px; color: var(--tinta-3); overflow-wrap: anywhere; }
/* A logo da lateral e da barra de cima do celular: 104 px de largura, na cor do texto. */
:is(.nt-lateral__marca, .nt-app__marca) .nt-logo { width: 104px; height: auto; }
:is(.nt-lateral__marca, .nt-app__marca) .nt-logo svg { width: 100%; height: auto; }

/* ---------- Moldura de página (v4.2, vinda do financeiro) ----------
   A grade da ferramenta: no computador (900 px ou mais), a barra lateral flutuante e o conteúdo; no celular, uma barra
   de vidro em cima com a logo e o tema e a navegação embaixo (__barra), com o ícone e o nome, ao alcance do polegar.
   Dentro do conteúdo, a página (até 1240 px), as seções numeradas e o rodapé. */
.nt-app__grade { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.nt-app__grade > .nt-lateral { display: none; }
.nt-app__conteudo { min-width: 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
.nt-app__topo { position: sticky; top: 0; z-index: var(--z-nav); display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--espaco-3)) max(16px, env(safe-area-inset-right, 0px)) var(--espaco-3) max(16px, env(safe-area-inset-left, 0px));
  background: var(--vidro); -webkit-backdrop-filter: blur(var(--desfoque-vidro)); backdrop-filter: blur(var(--desfoque-vidro)); border-bottom: 1px solid var(--borda); }
.nt-app__marca { display: inline-flex; color: var(--tinta); }
.nt-app__barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px;
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 6px) max(8px, env(safe-area-inset-left, 0px));
  background: var(--vidro); -webkit-backdrop-filter: blur(var(--desfoque-vidro)); backdrop-filter: blur(var(--desfoque-vidro)); border-top: 1px solid var(--borda); }
/* Cada página: o ícone em cima do nome; a atual é a pílula em primario, como na lateral. */
.nt-app__aba { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 6px 4px; border-radius: var(--raio-pilula); color: var(--tinta-3); text-decoration: none; font-size: 11px; font-weight: 500; }
.nt-app__aba .nt-icone { width: 22px; height: 22px; }
.nt-app__aba[aria-current="page"] { color: var(--sobre-primario); background: var(--primario); }
@media (min-width: 900px) {
  .nt-app__grade { grid-template-columns: 240px minmax(0, 1fr); }
  .nt-app__grade > .nt-lateral { display: flex; width: auto; margin: 16px 0 16px 16px; }
  .nt-app__topo, .nt-app__barra { display: none; }
  .nt-app__conteudo { padding-bottom: 0; }
}
.nt-app__pagina { display: grid; gap: var(--espaco-8); max-width: 1240px; margin: 0 auto; padding: var(--espaco-6) 16px var(--espaco-10); }
.nt-app__pagina > * { min-width: 0; }
@media (min-width: 900px) { .nt-app__pagina { gap: var(--espaco-9); padding: var(--espaco-8) var(--espaco-8) var(--espaco-12); } }
/* A seção: o cabeçalho numerado (.nt-secao-painel) e o corpo, 16 px entre as peças; a âncora para abaixo da faixa presa. */
.nt-app__secao { display: grid; gap: var(--espaco-4); scroll-margin-top: 88px; }
.nt-app__rodape { max-width: 1240px; margin: 0 auto; padding: var(--espaco-5) 16px var(--espaco-7); border-top: 1px solid var(--borda); font-size: 11px; color: var(--tinta-3); overflow-wrap: anywhere; }
/* As âncoras das seções ficam presas no topo ao rolar (no celular, logo abaixo da barra de cima). */
.nt-app .nt-pilulas--ancoras { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 62px); z-index: calc(var(--z-nav) - 1); padding: 8px 0; background: var(--fundo); }
@media (min-width: 900px) { .nt-app .nt-pilulas--ancoras { top: 0; } }
/* Nota: a linha de apoio de um bloco (de onde vem o número, o que fazer), em 13 px apagado. */
.nt-nota { margin: 0; font-size: 13px; color: var(--tinta-3); overflow-wrap: anywhere; }

/* ---------- Capa de card (v4.2) ----------
   A capa 16:9 dos cards com imagem: solta 8 px (--folga) da borda da caixa, com o canto acompanhando o dela, a imagem
   (ou o Horizonte, sem imagem) e o nome por cima. É a mesma no card de cliente e no data card de projeto (Financeiro) e
   no card de projeto do portal; cada card tem o próprio prefixo (__capa, __imagem) e o próprio véu e título. */
:is(.nt-cliente__capa, .nt-dc__capa, .nt-projeto__capa) { position: relative; isolation: isolate; display: flex; align-items: flex-end; aspect-ratio: 16 / 9; min-width: 0; padding: 14px 18px; border-radius: calc(var(--raio-3xl) - var(--folga)); overflow: hidden;
  background: linear-gradient(135deg, var(--horizonte-0) 0%, var(--horizonte-1) 45%, var(--horizonte-2) 100%); color: var(--neutro-50); }
:is(.nt-cliente__imagem, .nt-dc__imagem, .nt-projeto__imagem) { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
@supports (corner-shape: squircle) { :is(.nt-cliente, .nt-dc, .nt-projeto).is-principal :is(.nt-cliente__capa, .nt-dc__capa, .nt-projeto__capa) { corner-shape: squircle; border-radius: calc(80px - var(--folga)); } }
@media (max-width: 699px) { :is(.nt-cliente__capa, .nt-dc__capa, .nt-projeto__capa) { border-radius: calc(var(--raio-2xl) - var(--folga)); } }

/* =========================================================
   SITE E PORTFÓLIO
   ========================================================= */
.nt-container { width: 100%; max-width: var(--grid-max); margin-inline: auto; padding-inline: var(--grid-margem-celular); }
@media (min-width: 768px) { .nt-container { padding-inline: var(--grid-margem-tablet); } }
@media (min-width: 1200px) { .nt-container { padding-inline: var(--grid-margem-desktop); } }
.nt-grid { display: grid; grid-template-columns: repeat(var(--grid-colunas-celular), minmax(0, 1fr)); gap: var(--grid-calha-celular); }
@media (min-width: 768px) { .nt-grid { grid-template-columns: repeat(var(--grid-colunas-tablet), minmax(0, 1fr)); gap: var(--grid-calha-tablet); } }
@media (min-width: 1200px) { .nt-grid { grid-template-columns: repeat(var(--grid-colunas-desktop), minmax(0, 1fr)); gap: var(--grid-calha-desktop); } }
/* grade visível sobre o container: colunas na calha do breakpoint e a linha de base de 24 px */
.nt-container.is-guias { position: relative; }
.nt-container.is-guias::after {
  --n: var(--grid-colunas-celular); --g: var(--grid-calha-celular);
  content: ''; position: absolute; inset: 0; z-index: var(--z-elevado); pointer-events: none; padding-inline: inherit;
  background-origin: content-box; background-clip: content-box;
  background-image: linear-gradient(to right, var(--guia-coluna) calc(100% - var(--g)), transparent 0), repeating-linear-gradient(to bottom, var(--guia-linha) 0 1px, transparent 1px var(--grid-linha));
  background-size: calc((100% + var(--g)) / var(--n)) 100%, 100% var(--grid-linha);
}
@media (min-width: 768px) { .nt-container.is-guias::after { --n: var(--grid-colunas-tablet); --g: var(--grid-calha-tablet); } }
@media (min-width: 1200px) { .nt-container.is-guias::after { --n: var(--grid-colunas-desktop); --g: var(--grid-calha-desktop); } }
/* ritmo vertical em linhas: 3 no celular, 4 no tablet, 6 no desktop */
.nt-secao { padding-block: var(--ritmo-3); }
@media (min-width: 768px) { .nt-secao { padding-block: var(--ritmo-4); } }
@media (min-width: 1200px) { .nt-secao { padding-block: var(--ritmo-6); } }
.nt-secao__titulo { margin: 0; max-width: 18ch; font: 400 clamp(36px, 4.4vw, 56px)/1.071429 var(--font-sans); letter-spacing: -.03em; }
.nt-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; min-height: 32px; margin: 0; padding: 0 14px; border-radius: var(--raio-pilula);
  background: var(--pilula-fundo); box-shadow: inset 0 0 0 1px var(--pilula-borda); font: 500 13px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
/* v4.1: o eyebrow é uma pílula de vidro pequena, em frase (sem caixa-alta), com a estrela na ponta quando houver */
.nt-eyebrow:has(> .nt-estrela:first-child) { padding-left: 11px; }
.nt-eyebrow .nt-estrela { width: 11px; height: 11px; }

/* ---------- Navegação principal ---------- */
.nt-nav {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4);
  width: min(100% - 32px, 1240px); height: 64px; margin: 0 auto; padding: 0 8px 0 22px;
  border: 1px solid var(--vidro-borda); border-radius: var(--raio-pilula); background: var(--vidro); color: var(--tinta);
  -webkit-backdrop-filter: blur(var(--desfoque-vidro)) saturate(1.4); backdrop-filter: blur(var(--desfoque-vidro)) saturate(1.4);
  box-shadow: var(--sombra-vidro);
  transition: translate var(--duracao-media) var(--curva-entrada);
}
.nt-nav.is-oculta { translate: 0 calc((-100% - 24px) * var(--nt-movimento)); }
.nt-nav__logo { display: flex; align-items: center; height: 20px; color: inherit; flex: none; }
.nt-nav__logo .nt-logo { height: 20px; }
.nt-nav__links { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nt-nav__link {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--raio-pilula);
  color: var(--tinta-2); font: 500 14.5px/1 var(--font-sans); text-decoration: none;
  transition-property: background-color, color; transition-duration: var(--duracao-instante); transition-timing-function: ease-out;
}
.nt-nav__link[aria-current="page"] { color: var(--tinta); background: var(--superficie); box-shadow: var(--sombra-borda); }
.nt-nav__acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.nt-nav__menu { display: none; }
@media (max-width: 900px) {
  .nt-nav { height: 56px; padding: 0 6px 0 18px; }
  .nt-nav__links, .nt-nav__cta { display: none; }
  .nt-nav__menu { display: inline-flex; }
}

/* ---------- Menu mobile em tela cheia: abre como íris a partir do botão ---------- */
.nt-menu-cheio {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: flex; flex-direction: column; gap: var(--espaco-7); padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
  color: var(--tinta); overflow: auto; overscroll-behavior: contain; visibility: hidden;
  clip-path: circle(0% at calc(100% - 46px) 46px);
  transition: clip-path var(--duracao-media) ease-out, visibility 0s linear var(--duracao-media);
}
.nt-menu-cheio--local { position: absolute; }
.nt-menu-cheio.is-open { visibility: visible; clip-path: circle(150% at calc(100% - 46px) 46px); transition: clip-path var(--duracao-gaveta) var(--curva-gaveta), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .nt-menu-cheio { clip-path: none; opacity: 0; transition: opacity var(--duracao-rapida) ease-out, visibility 0s linear var(--duracao-rapida); } .nt-menu-cheio.is-open { opacity: 1; } }
:root[data-movimento="reduzido"] .nt-menu-cheio { clip-path: none; opacity: 0; }
:root[data-movimento="reduzido"] .nt-menu-cheio.is-open { opacity: 1; }
.nt-menu-cheio__topo { display: flex; justify-content: space-between; align-items: center; }
.nt-menu-cheio__links { display: grid; gap: 4px; margin: auto 0 0; padding: 0; list-style: none; }
.nt-menu-cheio__links a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-4); overflow: hidden;
  padding-block: 6px; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
  color: var(--tinta); text-decoration: none; font: 400 clamp(40px, 11vw, 76px)/1.02 var(--font-sans); letter-spacing: -.04em;
}
.nt-menu-cheio__links a > span { display: inline-block; opacity: 0; translate: 0 calc(var(--desloc-entrada) * var(--nt-movimento)); filter: blur(calc(4px * var(--nt-movimento))); transition-property: opacity, translate, filter; transition-duration: var(--duracao-rapida); transition-timing-function: ease-out; }
.nt-menu-cheio.is-open .nt-menu-cheio__links a > span { opacity: 1; translate: 0 0; filter: blur(0); transition-duration: var(--duracao-media); transition-timing-function: var(--curva-entrada); transition-delay: calc(var(--i, 0) * 60ms + 120ms); }
.nt-menu-cheio__links small { font: 400 13px/1 var(--font-sans); color: var(--tinta-2); }
.nt-menu-cheio__rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espaco-4); font: 400 14px/1.5 var(--font-sans); color: var(--tinta-2); }
.nt-menu-cheio__rodape a { color: var(--tinta); text-decoration: none; }

/* ---------- Hero: mídia de verdade, manchete à esquerda, ancorada embaixo ---------- */
.nt-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--espaco-7);
  min-height: clamp(560px, 88dvh, 920px); padding: 96px var(--grid-margem-celular) var(--espaco-9);
  background: var(--neutro-1000); color: var(--tinta);
}
@media (min-width: 768px) { .nt-hero { padding-inline: var(--grid-margem-tablet); } }
@media (min-width: 1200px) { .nt-hero { padding-inline: var(--grid-margem-desktop); } }
.nt-hero--fixo { min-height: 0; height: 680px; }
.nt-hero__midia { position: absolute; inset: 0; z-index: -2; }
.nt-hero__midia > img, .nt-hero__midia > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-hero__veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,2,.45) 0%, rgba(0,0,2,0) 26%, rgba(0,0,2,0) 44%, rgba(0,0,2,.78) 100%); }
.nt-hero__titulo { margin: 0; max-width: 12ch; font: 400 clamp(52px, 8.4vw, 124px)/.92 var(--font-sans); letter-spacing: -.045em; }
.nt-hero__rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--espaco-6); }
.nt-hero__lide { margin: 0; max-width: 40ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--tinta-2); }
.nt-hero__acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); }
.nt-hero .nt-entra { --i: 0; }

/* ---------- Card de case: a imagem fala sozinha; dados embaixo ---------- */
.nt-case { position: relative; display: grid; gap: 14px; min-width: 0; color: var(--tinta); text-decoration: none; }
.nt-case__midia { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--raio-3xl); background: var(--superficie-3); outline: 1px solid var(--contorno-imagem); outline-offset: -1px; }
.nt-case--paisagem .nt-case__midia { aspect-ratio: 16 / 10; }
.nt-case__midia > img, .nt-case__midia > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-case__midia > img:first-child { transition: scale 600ms var(--curva-entrada); }
.nt-case__alt { opacity: 0; transition: opacity var(--duracao-media) var(--curva-padrao); }
.nt-case.is-hover .nt-case__alt, .nt-case:focus-visible .nt-case__alt { opacity: 1; }
/* o trecho do case toca sozinho em loop (padrão desde 2026-10-16): fica por cima da capa assim que começa a tocar, e é
   ele que aproxima no hover. .nt-case--hover volta ao filme só no hover. */
.nt-case:not(.nt-case--hover) .nt-case__alt { transition: opacity var(--duracao-media) var(--curva-padrao), scale 600ms var(--curva-entrada); }
.nt-case:not(.nt-case--hover).is-tocando .nt-case__alt { opacity: 1; }
.nt-case:not(.nt-case--hover):not(.is-tocando) .nt-case__alt { opacity: 0; }
.nt-case__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--espaco-4); align-items: baseline; padding-inline: 6px; }
.nt-case__titulo { margin: 0; font: 500 21px/1.3 var(--font-sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.nt-case__ano { font: 500 14px/1 var(--font-sans); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.nt-case__sub { grid-column: 1 / -1; font-size: 16px; line-height: 1.5; color: var(--tinta-2); }
.nt-case:focus-visible { outline: none; }
.nt-case:focus-visible .nt-case__midia { outline: 2px solid var(--foco); outline-offset: 4px; }

/* ---------- Grid de portfólio ---------- */
.nt-portfolio { display: grid; gap: var(--espaco-7); }
.nt-portfolio__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espaco-4); }
.nt-portfolio__contador { font: 400 13px/1 var(--font-sans); color: var(--tinta-3); }
.nt-portfolio__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espaco-9) var(--espaco-6); align-items: start; }
.nt-portfolio__grade > * { grid-column: span 4; }
.nt-portfolio__grade > .nt-case--paisagem { grid-column: span 8; }
/* paisagem de 8 colunas na mesma altura do retrato de 4 (4:5): a altura sai da largura do próprio card menos a calha,
   então os cards da linha fecham juntos em qualquer largura (com 16:10 a paisagem ficava mais alta por causa da calha) */
@media (min-width: 1101px) { .nt-portfolio__grade:has(> .nt-case:not(.nt-case--paisagem)) > .nt-case--paisagem { container-type: inline-size; } .nt-portfolio__grade:has(> .nt-case:not(.nt-case--paisagem)) > .nt-case--paisagem .nt-case__midia { aspect-ratio: auto; height: calc((100cqw - var(--espaco-6)) / 2 * 1.25); } }
.nt-portfolio__grade > .is-oculto { display: none; }
.nt-portfolio__grade > .is-entrando { animation: nt-entra-op var(--duracao-base) ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
.nt-portfolio__vazio { grid-column: 1 / -1; }
.nt-portfolio__mais { display: flex; justify-content: center; }
@media (max-width: 1100px) { .nt-portfolio__grade > * { grid-column: span 6; } .nt-portfolio__grade > .nt-case--paisagem { grid-column: span 12; } }
/* no celular, uma coluna: as 12 colunas com 11 calhas não cabem em 327 px */
@media (max-width: 640px) { .nt-portfolio__grade { grid-template-columns: minmax(0, 1fr); gap: var(--ritmo-2); } .nt-portfolio__grade > *, .nt-portfolio__grade > .nt-case--paisagem { grid-column: 1 / -1; } }

/* ---------- Página de case ---------- */
.nt-case-abertura { display: grid; gap: var(--espaco-7); }
.nt-case-abertura__titulo { margin: 0; max-width: 14ch; font: 400 clamp(48px, 7.4vw, 112px)/.94 var(--font-sans); letter-spacing: -.04em; }
.nt-case-abertura__lide { margin: 0; max-width: 56ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--tinta-2); }
.nt-case-abertura__midia { position: relative; overflow: hidden; aspect-ratio: 2.39 / 1; border-radius: var(--raio-3xl); background: var(--superficie-3); outline: 1px solid var(--contorno-imagem); outline-offset: -1px; }
.nt-case-abertura__midia > img, .nt-case-abertura__midia > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-case-abertura__ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espaco-6); margin: 0; }
.nt-case-abertura__ficha div { display: grid; gap: 4px; min-width: 0; }
.nt-case-abertura__ficha dt { font-size: 13px; color: var(--tinta-3); }
.nt-case-abertura__ficha dd { margin: 0; font-size: 15px; line-height: 1.45; }
@media (max-width: 860px) { .nt-case-abertura__ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nt-case-abertura__midia { aspect-ratio: 4 / 3; } }
.nt-capitulo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espaco-6); }
.nt-capitulo__rotulo { grid-column: 1 / span 3; position: sticky; top: 104px; align-self: start; margin: 0; font: 500 18px/1.3 var(--font-sans); color: var(--tinta-2); }
.nt-capitulo__corpo { grid-column: 5 / span 8; display: grid; gap: var(--espaco-5); }
.nt-capitulo__destaque { margin: 0; font: 400 clamp(28px, 3.2vw, 44px)/1.08 var(--font-sans); letter-spacing: -.025em; }
.nt-capitulo--ideia .nt-capitulo__destaque { font-size: clamp(40px, 5.4vw, 76px); line-height: .98; letter-spacing: -.035em; }
.nt-capitulo__corpo p:not(.nt-capitulo__destaque) { margin: 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--tinta-2); }
@media (max-width: 860px) { .nt-capitulo__rotulo { position: static; } .nt-capitulo__rotulo, .nt-capitulo__corpo { grid-column: 1 / -1; } }
.nt-galeria { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espaco-6); }
.nt-galeria__item { grid-column: span 6; display: grid; gap: 14px; margin: 0; min-width: 0; }
.nt-galeria__item--cheio { grid-column: 1 / -1; }
.nt-galeria__item--terco { grid-column: span 4; }
.nt-galeria__item--dois-tercos { grid-column: span 8; }
.nt-galeria__midia { overflow: hidden; aspect-ratio: var(--ar, 4 / 5); border-radius: var(--raio-3xl); background: var(--superficie-3); outline: 1px solid var(--contorno-imagem); outline-offset: -1px; }
.nt-galeria__midia > img, .nt-galeria__midia > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-galeria__item figcaption { padding-left: 6px; font-size: 16px; line-height: 1.5; color: var(--tinta-2); } /* v4.0: legenda de leitura (16 px, tinta-2), um pouco para dentro da curva do canto */
@media (max-width: 760px) { .nt-galeria__item, .nt-galeria__item--terco, .nt-galeria__item--dois-tercos { grid-column: 1 / -1; } }
/* ficha técnica em grupos, sem linha por item */
.nt-ficha { display: grid; gap: var(--espaco-7); }
.nt-ficha__titulo { margin: 0; font: 400 clamp(28px, 3vw, 40px)/1.06 var(--font-sans); letter-spacing: -.025em; }
.nt-ficha__grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-7) var(--espaco-6); }
.nt-ficha__grupo { display: grid; gap: var(--espaco-4); align-content: start; padding-top: var(--espaco-4); border-top: 1px solid var(--tinta); }
.nt-ficha__grupo h3 { margin: 0; font: 500 15px/1.3 var(--font-sans); }
.nt-ficha__grupo dl { display: grid; gap: var(--espaco-3); margin: 0; }
.nt-ficha__grupo div { display: grid; gap: 2px; }
.nt-ficha__grupo dt { font-size: 13px; color: var(--tinta-3); }
.nt-ficha__grupo dd { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
@media (max-width: 860px) { .nt-ficha__grupos { grid-template-columns: 1fr; } }
/* resultados */
/* v4.1: cada número numa caixa; o herói na caixa azul com luz própria, o número em branco */
.nt-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.nt-metrica { display: grid; gap: var(--espaco-3); align-content: start; min-width: 0; padding: var(--caixa-pad); border-radius: var(--raio-3xl); background: var(--caixa); color: var(--tinta); box-shadow: var(--caixa-luz); overflow: hidden; }
.nt-metrica__valor { font: 800 clamp(56px, 6.6vw, 96px)/.9 var(--font-matriz); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.nt-metrica__unidade { font-size: .46em; letter-spacing: .02em; margin-left: .08em; }
.nt-metrica__rotulo { margin: 0; max-width: 30ch; font-size: 15px; line-height: 1.45; color: var(--tinta-2); }
.nt-metrica__fonte { font-size: 12px; line-height: 1.4; color: var(--tinta-3); }
.nt-metrica--heroi { grid-column: 1 / -1; }
.nt-metrica--heroi { padding: clamp(28px, 4vw, 48px); background: var(--gradiente-azul); color: var(--neutro-50); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -24px 48px -32px rgba(255, 255, 255, .24), 0 12px 32px -12px rgba(12, 37, 64, .22); }
@supports (corner-shape: squircle) { .nt-metrica--heroi { corner-shape: squircle; border-radius: var(--raio-squircle); } }
.nt-metrica--heroi .nt-metrica__valor { font-size: clamp(96px, 15vw, 200px); color: var(--neutro-50); }
.nt-metrica--heroi .nt-metrica__rotulo { color: rgba(245, 245, 243, .82); }
.nt-metrica--heroi .nt-metrica__fonte { color: rgba(245, 245, 243, .66); }

/* ---------- Player de vídeo ---------- */
.nt-player { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--raio-3xl); background: var(--neutro-1000); color: var(--neutro-50); user-select: none; }
.nt-player > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-player__capa { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border: 0; padding: 0; background: var(--neutro-1000) center / cover no-repeat; color: inherit; cursor: pointer; transition: opacity var(--duracao-media) var(--curva-padrao); }
.nt-player__capa::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,2,0) 40%, rgba(0,0,2,.7)); }
.nt-player__play { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--vidro); border: 1px solid var(--vidro-borda); -webkit-backdrop-filter: blur(var(--desfoque-vidro)); backdrop-filter: blur(var(--desfoque-vidro)); transition: scale var(--duracao-rapida) ease-out; }
.nt-player__play svg { width: 28px; height: 28px; translate: 2px 0; }
.nt-player__capa:active .nt-player__play { scale: var(--escala-pressao); }
.nt-player__info { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--espaco-4); text-align: left; }
.nt-player__titulo { margin: 0; font: 500 clamp(16px, 2vw, 22px)/1.25 var(--font-sans); letter-spacing: -.01em; }
.nt-player__sub { display: block; margin-top: 4px; font-size: 13px; opacity: .82; }
.nt-player__duracao { font: 400 12px/1 var(--font-sans); opacity: .85; }
.nt-player.is-iniciado .nt-player__capa { opacity: 0; pointer-events: none; }
.nt-player__controles {
  position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--raio-pilula);
  background: var(--vidro); border: 1px solid var(--vidro-borda); color: var(--tinta);
  -webkit-backdrop-filter: blur(var(--desfoque-vidro)) saturate(1.3); backdrop-filter: blur(var(--desfoque-vidro)) saturate(1.3);
  opacity: 0; translate: 0 calc(8px * var(--nt-movimento)); pointer-events: none;
  transition-property: opacity, translate; transition-duration: var(--duracao-base); transition-timing-function: ease-out;
}
.nt-player.is-iniciado .nt-player__controles { opacity: 1; translate: 0 0; pointer-events: auto; }
.nt-player.is-iniciado.is-ocioso .nt-player__controles { opacity: 0; translate: 0 calc(8px * var(--nt-movimento)); }
.nt-player__botao { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; transition-property: background-color, scale; transition-duration: var(--duracao-rapida); transition-timing-function: ease-out; }
.nt-player__botao:active { scale: var(--escala-pressao); }
.nt-player__botao svg { width: 20px; height: 20px; }
.nt-player__botao[aria-pressed="true"] { background: color-mix(in srgb, currentColor 18%, transparent); }
.nt-player__botao:focus-visible { outline-offset: 0; }
/* play e pausa ficam os dois no DOM e trocam por crossfade */
.nt-troca { display: grid; place-items: center; }
.nt-troca > svg { grid-area: 1 / 1; transition-property: opacity, scale, filter; transition-duration: var(--duracao-media); transition-timing-function: var(--curva-padrao); }
.nt-troca > svg:last-child, [data-estado="b"] .nt-troca > svg:first-child { opacity: 0; scale: .25; filter: blur(4px); }
[data-estado="b"] .nt-troca > svg:last-child { opacity: 1; scale: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .nt-troca > svg { scale: 1 !important; filter: none !important; } }
.nt-player__tempo { flex: none; padding: 0 8px; font: 400 12.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-player__barra { --p: 0%; flex: 1; min-width: 60px; height: 28px; margin: 0 6px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.nt-player__barra::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, currentColor var(--p), color-mix(in srgb, currentColor 25%, transparent) var(--p)); }
.nt-player__barra::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, currentColor var(--p), color-mix(in srgb, currentColor 25%, transparent) var(--p)); }
.nt-player__barra::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%; background: currentColor; border: 0; }
.nt-player__barra::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: currentColor; border: 0; }
.nt-player__legenda { position: absolute; z-index: 3; left: 50%; bottom: 84px; max-width: min(80%, 720px); padding: 6px 12px; border-radius: 8px; background: rgba(0,0,2,.66); color: var(--neutro-50); font: 500 clamp(14px, 1.7vw, 20px)/1.4 var(--font-sans); text-align: center; transform: translateX(-50%); opacity: 0; transition: opacity var(--duracao-rapida) ease-out; pointer-events: none; }
.nt-player.is-legenda.is-iniciado .nt-player__legenda:not(:empty) { opacity: 1; }
@media (max-width: 560px) { .nt-player { border-radius: var(--raio-2xl); } .nt-player__volume { display: none; } .nt-player__legenda { bottom: 70px; } }

/* ---------- Serviços em bento: 4 frentes, 4 células, fundos diferentes ---------- */
.nt-servicos { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--espaco-4); }
.nt-servicos > :first-child { grid-row: span 2; }
.nt-servicos > :last-child { grid-column: span 2; }
@media (max-width: 900px) { .nt-servicos { grid-template-columns: 1fr 1fr; } .nt-servicos > :first-child { grid-row: auto; grid-column: 1 / -1; } .nt-servicos > :last-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .nt-servicos { grid-template-columns: 1fr; } .nt-servicos > * { grid-column: 1 / -1 !important; } }
.nt-servico {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--espaco-4); min-height: 280px; padding: var(--espaco-7);
  border: 0; border-radius: var(--raio-3xl); background: var(--caixa); box-shadow: var(--caixa-luz); color: var(--tinta); text-decoration: none;
  transition: box-shadow var(--duracao-rapida) ease-out;
}
.nt-servico--midia { color: var(--neutro-50); background: var(--neutro-1000); box-shadow: none; }
.nt-servico__fundo { position: absolute; inset: 0; z-index: -2; }
.nt-servico__fundo > img, .nt-servico__fundo > video { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 600ms var(--curva-entrada); }
.nt-servico--midia::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,2,0) 30%, rgba(0,0,2,.72)); }
.nt-servico__titulo { margin: 0; font: 400 clamp(28px, 2.6vw, 40px)/1 var(--font-sans); letter-spacing: -.03em; }
.nt-servico__texto { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.55; color: inherit; opacity: .78; }
.nt-servico__rodape { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-4); }
.nt-servico__prazo { font-size: 13px; opacity: .78; }
.nt-servico__seta { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); transition-property: background-color, color, rotate, border-color; transition-duration: var(--duracao-base); transition-timing-function: var(--curva-entrada); }
.nt-servico__seta svg { width: 18px; height: 18px; stroke-width: 2; }
.nt-servico.is-hover .nt-servico__seta { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); rotate: 45deg; }

/* ---------- Processo: o nome da etapa é o rótulo ---------- */
/* v4.1: cada etapa numa caixa, com o número no círculo em cima e o prazo numa cápsula, sem linhas */
.nt-processo { counter-reset: nt-etapa; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.nt-etapa { counter-increment: nt-etapa; display: grid; gap: var(--espaco-3); align-content: start; justify-items: start; min-width: 0; padding: 20px 22px 24px; border-radius: 30px; background: var(--caixa); box-shadow: var(--caixa-luz); }
.nt-etapa::before { content: counter(nt-etapa, decimal-leading-zero); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 50%; background: var(--pilula-circulo); color: var(--pilula-circulo-tinta);
  font: 800 12px/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; }
.nt-etapa__titulo { margin: 0; font: 500 20px/1.3 var(--font-sans); letter-spacing: -.01em; }
.nt-etapa__texto { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tinta-2); }
.nt-etapa__prazo { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--raio-pilula); background: var(--caixa-dentro); font: 500 12px/1 var(--font-sans); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .nt-processo { grid-template-columns: 1fr; } }

/* ---------- Muro de logos: só logos ---------- */
/* v4.1: cada marca numa caixa, separadas por espaço, sem a grade de linhas */
.nt-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; gap: 10px; }
.nt-logos > li { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; overflow: hidden; aspect-ratio: 2 / 1; padding: var(--espaco-4); border-radius: 26px; background: var(--caixa); box-shadow: var(--caixa-luz); color: var(--tinta-3); transition: color var(--duracao-instante) ease-out; }
@media (max-width: 720px) { .nt-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nt-logos--faixa { display: flex; overflow: hidden; gap: 0; background: none; border-radius: 0; box-shadow: none; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.nt-logos__trilho { display: flex; flex: none; align-items: center; gap: var(--espaco-12); padding-right: var(--espaco-12); color: var(--tinta-3); }
@media (prefers-reduced-motion: no-preference) { :root:not([data-movimento="reduzido"]) .nt-logos__trilho { animation: nt-faixa 40s linear infinite; } }
@media (prefers-reduced-motion: reduce) { .nt-logos__trilho[aria-hidden="true"] { display: none; } .nt-logos--faixa { flex-wrap: wrap; } }
.nt-logos--faixa:hover .nt-logos__trilho { animation-play-state: paused; }
@keyframes nt-faixa { to { transform: translateX(-100%); } }
/* marcas de clientes FICTÍCIOS (símbolo + nome em SVG). Substitua pelos SVG oficiais. */
.nt-marca-cliente { display: block; height: 28px; width: auto; fill: currentColor; }

/* ---------- Depoimento: até 3 linhas, aspas tipográficas ---------- */
.nt-depoimento { display: grid; gap: var(--espaco-7); max-width: 1000px; margin: 0; }
.nt-depoimento__texto { margin: 0; font: 400 clamp(26px, 3vw, 40px)/1.15 var(--font-sans); letter-spacing: -.025em; text-wrap: pretty; text-indent: -.42em; }
.nt-depoimento__autor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-4); }
.nt-depoimento__pessoa { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nt-depoimento__nome { margin: 0; font: 500 15px/1.35 var(--font-sans); }
.nt-depoimento__cargo { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--tinta-3); }

/* ---------- Bloco CTA ----------
   v4.0: a chamada final é uma caixa com luz própria sobre o Horizonte: canto de 44 (o contínuo de 80 onde o navegador
   deixa), o fio de luz em cima, o contato em pílulas de vidro escuro e o CTA no tamanho grande. */
.nt-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--espaco-8); padding: clamp(28px, 5vw, 72px); border-radius: var(--raio-3xl); color: var(--tinta);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -24px 48px -32px rgba(255, 255, 255, .24); }
@supports (corner-shape: squircle) { .nt-cta { corner-shape: squircle; border-radius: var(--raio-squircle-l); } @media (max-width: 699px) { .nt-cta { border-radius: var(--raio-squircle-s); } } }
.nt-cta::after { border-radius: inherit; corner-shape: inherit; }
.nt-cta__titulo { margin: 0; max-width: 13ch; font: 400 clamp(44px, 7vw, 104px)/.94 var(--font-sans); letter-spacing: -.04em; }
.nt-cta__rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--espaco-5); }
.nt-cta__contato { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 640px; font-size: 15px; line-height: 1.45; color: var(--tinta-2); }
.nt-cta__contato > span { flex-basis: 100%; margin-bottom: 4px; }
.nt-cta__contato a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: var(--raio-pilula);
  background: rgba(14, 15, 20, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--neutro-50); font: 500 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap; transition: box-shadow var(--duracao-rapida) ease-out; }
.nt-cta__contato a:has(> svg:first-child) { padding-left: 5px; }
.nt-cta__contato a > svg { box-sizing: border-box; width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: rgba(0, 0, 2, .45); flex: none; }
.nt-cta .nt-btn { --h: 52px; --c: 42px; --px: 22px; font-size: 16px; }
.nt-cta .nt-selo { position: absolute; top: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px); --s: clamp(120px, 14vw, 176px); color: var(--tinta-2); }
@media (max-width: 640px) { .nt-cta .nt-selo { display: none; } .nt-cta__contato a { white-space: normal; overflow-wrap: anywhere; } }

/* ---------- Formulário de contato ----------
   v4.0: o formulário mora numa caixa (cor base, raio 44): o título com o prazo de resposta em cima, os campos em duas
   colunas, o envio numa peça de dentro da caixa e a confirmação numa caixa verde com luz própria. */
.nt-contato { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding: var(--caixa-pad); border-radius: var(--raio-3xl);
  background: var(--caixa); color: var(--tinta); box-shadow: var(--caixa-luz); --pilula-fundo: var(--caixa-dentro); }
.nt-contato__cheio { grid-column: 1 / -1; }
.nt-contato__topo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding-bottom: 4px; }
.nt-contato__topo h3 { margin: 0; font: 500 clamp(22px, 2.4vw, 28px)/1.15 var(--font-sans); letter-spacing: -.02em; }
.nt-contato__envio { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espaco-4);
  padding: 8px 8px 8px 20px; border-radius: 26px; background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda); }
.nt-contato__envio .nt-checkbox { --pilula-fundo: var(--caixa); }
.nt-contato__envio .nt-btn { --h: 52px; --c: 42px; --px: 22px; font-size: 15px; }
.nt-contato__sucesso { grid-column: 1 / -1; display: grid; gap: var(--espaco-3); justify-items: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--raio-3xl);
  background: var(--gradiente-verde); color: var(--neutro-50); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nt-contato__sucesso[hidden] { display: none; }
.nt-contato__sucesso svg { box-sizing: border-box; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: var(--neutro-50); }
.nt-contato__sucesso h3 { margin: 0; font: 500 26px/1.15 var(--font-sans); letter-spacing: -.02em; }
.nt-contato__sucesso p { margin: 0; max-width: 56ch; color: rgba(245, 245, 243, .82); }
@media (max-width: 640px) { .nt-contato { grid-template-columns: 1fr; border-radius: var(--raio-2xl); } .nt-contato__envio { border-radius: 22px; padding: 14px; } .nt-contato__envio .nt-btn { width: 100%; } }

/* ---------- Rodapé ----------
   v4.0: o rodapé é uma caixa flutuante, como a barra lateral do financeiro: solta 16 px das bordas da janela, raio 44
   (o canto contínuo de 80), a luz no lugar da borda. Dentro, o claim terminando no logo, as colunas com links de leitura
   e a linha de base com "Voltar ao topo" numa pílula. */
.nt-rodape { display: grid; gap: var(--espaco-10); margin: 0 16px 16px; padding: var(--espaco-10) var(--grid-margem-celular) var(--espaco-5); border-radius: var(--raio-3xl);
  background: var(--caixa); color: var(--tinta); box-shadow: var(--caixa-luz); }
@supports (corner-shape: squircle) { .nt-rodape { corner-shape: squircle; border-radius: var(--raio-squircle); } @media (max-width: 699px) { .nt-rodape { border-radius: var(--raio-squircle-s); } } }
@media (min-width: 768px) { .nt-rodape { padding-inline: var(--grid-margem-tablet); } }
@media (min-width: 1200px) { .nt-rodape { padding-inline: var(--grid-margem-desktop); } }
.nt-rodape__colunas { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--espaco-7); }
.nt-rodape__colunas--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* abertura com o claim: a frase e o logo reduzido completam a mesma oração ("é preciso ser" + Notório).
   O respiro entre os dois é a área de proteção x (51% da altura do logo = 8,6% da largura do reduzido);
   margem em % segue a largura, então vale em qualquer tela. */
.nt-rodape__assinatura { display: grid; }
.nt-rodape__frase { margin: 0; font: 400 clamp(36px, 4.4vw, 56px)/1.071429 var(--font-sans); letter-spacing: -.03em; }
.nt-rodape__assinatura .nt-rodape__marca { margin-top: 8.6%; }
.nt-rodape__chamada { display: grid; gap: var(--espaco-4); align-content: start; max-width: 420px; }
.nt-rodape__chamada p { margin: 0; font: 400 26px/1.15 var(--font-sans); letter-spacing: -.02em; }
.nt-rodape__news { display: flex; gap: 8px; }
.nt-rodape__news .nt-input { height: 44px; border-radius: var(--raio-pilula); padding-left: 18px; }
.nt-rodape__titulo { margin: 0 0 var(--espaco-4); font: 500 13px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.nt-rodape ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nt-rodape a { color: var(--tinta); text-decoration: none; font: 500 17px/1.35 var(--font-sans); letter-spacing: -.005em; overflow-wrap: anywhere; transition: color var(--duracao-instante) ease-out; }
/* tinta do logo grande: concreto sobre o claro, névoa sobre o escuro (regra de tintas do logo) */
.nt-rodape { --rodape-marca: var(--neutro-400); }
[data-theme="escuro"] .nt-rodape, .nt-rodape[data-theme="escuro"] { --rodape-marca: var(--azul-300); }
.nt-rodape__marca { color: var(--rodape-marca); line-height: 0; }
.nt-rodape__marca svg { width: 100%; height: auto; fill: currentColor; display: block; }
.nt-rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espaco-3) var(--espaco-6); padding-top: var(--espaco-5); font-size: 14px; color: var(--tinta-3); }
.nt-rodape__base a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--raio-pilula); background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda);
  font: 500 14px/1 var(--font-sans); color: var(--tinta); transition: box-shadow var(--duracao-rapida) ease-out; }
@media (max-width: 860px) { .nt-rodape__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nt-rodape__chamada { grid-column: 1 / -1; } }
@media (max-width: 699px) { .nt-rodape { margin: 0 8px 8px; border-radius: var(--raio-2xl); } }

/* ---------- Hover (ponteiro fino) ---------- */
@media (hover: hover) and (pointer: fine) {
  .nt-nav__link:not([aria-current="page"]):hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 7%, transparent); }
  .nt-case:hover .nt-case__alt { opacity: 1; }
  .nt-case:hover .nt-case__midia > img:first-child { scale: calc(1 + .03 * var(--nt-movimento)); }
  .nt-case:not(.nt-case--hover):hover .nt-case__alt { scale: calc(1 + .03 * var(--nt-movimento)); }
  .nt-servico:hover { box-shadow: var(--caixa-luz), var(--sombra-2); }
  .nt-servico--midia:hover { box-shadow: var(--sombra-2); }
  .nt-servico:hover .nt-servico__fundo > * { scale: calc(1 + .03 * var(--nt-movimento)); }
  .nt-servico:hover .nt-servico__seta { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); rotate: calc(45deg * var(--nt-movimento)); }
  .nt-servico--midia:hover .nt-servico__seta { background: var(--neutro-50); border-color: var(--neutro-50); color: var(--neutro-950); }
  .nt-logos > li:hover { color: var(--tinta); }
  .nt-rodape ul a:hover { color: var(--tinta-2); }
  .nt-rodape__base a:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
  .nt-cta__contato a:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .07); }
}
.nt-case.is-hover .nt-case__midia > img:first-child { scale: 1.03; }
.nt-servico.is-hover { box-shadow: var(--sombra-borda-hover), var(--sombra-2); }
.nt-nav__link.is-hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 7%, transparent); }

/* v4.0: a mídia dos cases (o cartão, a abertura, a galeria e o player) tem o canto das caixas com degradê: 44 px e, onde
   o navegador deixa, o canto contínuo (squircle) de 80; 32 e 64 no celular. */
@media (max-width: 699px) { :is(.nt-case__midia, .nt-case-abertura__midia, .nt-galeria__midia) { border-radius: var(--raio-2xl); } }
@supports (corner-shape: squircle) {
  :is(.nt-case__midia, .nt-case-abertura__midia, .nt-galeria__midia, .nt-player) { corner-shape: squircle; border-radius: var(--raio-squircle); }
  @media (max-width: 699px) { :is(.nt-case__midia, .nt-case-abertura__midia, .nt-galeria__midia, .nt-player) { border-radius: var(--raio-squircle-s); } }
}

/* =========================================================
   REDES SOCIAIS
   Medidas em "px de design" (1080 de largura; 1920 no 16:9) via unidades de container:
   calc(N * var(--px)). Renderize o .nt-post a 1080px de largura para exportar 1:1.
   ========================================================= */
.nt-post { container-type: inline-size; width: 100%; min-width: 0; }
.nt-post__tela {
  --px: calc(100cqw / 1080);
  /* grade modular de cada formato (Müller-Brockmann): margens --gx e --gy, --gc colunas x --gr campos, calha de 30 (uma linha) */
  --gx: 60; --gy: 75; --gc: 6; --gr: 4;
  --margem: calc(var(--gx) * var(--px));
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: calc(30 * var(--px));
  aspect-ratio: 1 / 1; padding: calc(var(--gy) * var(--px)) var(--margem);
  background: var(--neutro-1000); color: var(--neutro-50);
  font-family: var(--font-sans); line-height: 1.2;
}
.nt-post--4x5 .nt-post__tela { --gy: 60; --gr: 6; aspect-ratio: 4 / 5; }
/* 3:4, o formato da grade do perfil: a mesma grade 6 x 6 do 4:5, com 105 em cima e embaixo */
.nt-post--3x4 .nt-post__tela { --gy: 105; --gr: 6; aspect-ratio: 3 / 4; }
/* 9:16: o conteúdo fica fora das zonas de interface (--zt em cima, --zb embaixo). Stories: 270 e 384 (14% e 20%) */
.nt-post--9x16 .nt-post__tela { --gy: 135; --gr: 8; --zt: 270; --zb: 384; aspect-ratio: 9 / 16; padding: calc(var(--zt) * var(--px)) var(--margem) calc(var(--zb) * var(--px)); }
/* Reels: 672 embaixo (35%, legenda e áudio) e a coluna 6 livre para os botões da direita */
.nt-post--reels .nt-post__tela { --zb: 672; padding-right: calc(225 * var(--px)); }
.nt-post--16x9 .nt-post__tela { --px: calc(100cqw / 1920); --gx: 105; --gy: 75; --gc: 12; --gr: 4; aspect-ratio: 16 / 9; }
.nt-post [contenteditable]:focus { outline: 1px dashed color-mix(in srgb, currentColor 60%, transparent); outline-offset: 4px; }

.nt-post__fundo { position: absolute; inset: 0; z-index: -2; }
.nt-post__fundo > img, .nt-post__fundo > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-post__veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,2,.42) 0%, rgba(0,0,2,0) 24%, rgba(0,0,2,0) 48%, rgba(0,0,2,.78) 100%); }
.nt-post__topo { display: flex; justify-content: space-between; align-items: center; gap: calc(24 * var(--px)); }
.nt-post__marca { height: calc(30 * var(--px)); line-height: 0; color: inherit; flex: none; }
.nt-post__marca svg { height: 100%; width: auto; fill: currentColor; display: block; }
.nt-post__canto, .nt-post__rotulo, .nt-post__rodape { font-family: var(--font-sans); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.nt-post__canto { font-size: calc(22 * var(--px)); opacity: .86; text-align: right; }
.nt-post__rotulo { font-size: calc(22 * var(--px)); opacity: .86; display: flex; align-items: center; gap: calc(12 * var(--px)); }
.nt-post__rotulo .nt-estrela { width: calc(22 * var(--px)); height: calc(18 * var(--px)); color: currentColor; }
.nt-post__meio { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.nt-post__base { display: grid; gap: calc(28 * var(--px)); }
.nt-post__titulo { margin: 0; font-weight: 400; font-size: calc(96 * var(--px)); line-height: .9375; letter-spacing: -.04em; text-wrap: balance; }
.nt-post__titulo--xl { font-size: calc(132 * var(--px)); line-height: .9; letter-spacing: -.045em; }
.nt-post__titulo--m { font-size: calc(72 * var(--px)); line-height: 1.041667; letter-spacing: -.03em; }
.nt-post__texto { margin: 0; font-size: calc(34 * var(--px)); line-height: 1.35; letter-spacing: -.01em; max-width: 26em; opacity: .9; }
.nt-post__rodape { display: flex; justify-content: space-between; align-items: center; gap: calc(24 * var(--px)); font-size: calc(20 * var(--px)); opacity: .8; }
.nt-post__pagina { font-variant-numeric: tabular-nums; }
.nt-post__tag { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); height: calc(52 * var(--px)); padding: 0 calc(24 * var(--px)); border-radius: 999px; background: rgba(245,245,243,.16); border: 1px solid rgba(245,245,243,.32); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: calc(24 * var(--px)); font-weight: 500; letter-spacing: -.005em; width: max-content; }
.nt-post__tag .nt-estrela { width: calc(18 * var(--px)); height: calc(14 * var(--px)); color: var(--azul-300); }
.nt-post__pilula { display: inline-flex; align-items: center; gap: calc(20 * var(--px)); height: calc(92 * var(--px)); padding: 0 calc(10 * var(--px)) 0 calc(40 * var(--px)); border-radius: 999px; background: var(--neutro-50); color: var(--neutro-950); font-size: calc(32 * var(--px)); font-weight: 500; width: max-content; }
.nt-post__pilula i { display: grid; place-items: center; width: calc(72 * var(--px)); height: calc(72 * var(--px)); border-radius: 50%; background: var(--neutro-950); color: var(--neutro-50); }
.nt-post__pilula svg { width: 40%; height: 40%; }
.nt-post__pilula--escura { background: var(--neutro-950); color: var(--neutro-50); }
.nt-post__pilula--escura i { background: var(--neutro-50); color: var(--neutro-950); }

/* fundos claros (manifesto, névoa) */
.nt-post--claro .nt-post__tela { background: var(--horizonte-4); color: var(--neutro-950); }
.nt-post--claro .nt-post__tag { background: rgba(11,13,16,.06); border-color: rgba(11,13,16,.18); }
.nt-post--claro .nt-post__pilula { background: var(--neutro-950); color: var(--neutro-50); }
.nt-post--claro .nt-post__pilula i { background: var(--neutro-50); color: var(--neutro-950); }

/* número grande em matriz */
.nt-post__metrica { font-family: var(--font-matriz); font-weight: 800; font-size: calc(300 * var(--px)); line-height: .82; letter-spacing: -.01em; }

/* guias de área de segurança (ligue com .is-guias no .nt-post) */
.nt-post__guias { display: none; position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.nt-post.is-guias .nt-post__guias { display: block; }
/* a grade modular: colunas e campos em ciano, linha de base a cada 30, margem tracejada */
.nt-post__guias::before {
  --cal: calc(30 * var(--px));
  content: ""; position: absolute; inset: calc(var(--gy) * var(--px)) calc(var(--gx) * var(--px)); outline: 1px dashed #FF5C3D;
  background-image: linear-gradient(to right, rgba(61,214,255,.16) calc(100% - var(--cal)), transparent 0), linear-gradient(to bottom, rgba(61,214,255,.16) calc(100% - var(--cal)), transparent 0), repeating-linear-gradient(to bottom, rgba(61,214,255,.42) 0 1px, transparent 1px var(--cal));
  background-size: calc((100% + var(--cal)) / var(--gc)) 100%, 100% calc((100% + var(--cal)) / var(--gr)), 100% var(--cal);
}
.nt-post--16x9 .nt-post__guias::after { content: ""; position: absolute; inset: 10% 10%; border: 1px dashed #FFB23D; }
.nt-post--9x16 .nt-post__guias::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--zt) * var(--px)); background: repeating-linear-gradient(135deg, rgba(255,92,61,.28) 0 8px, transparent 8px 16px); }
.nt-post__guia-base { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--zb, 384) * var(--px)); background: repeating-linear-gradient(135deg, rgba(255,92,61,.28) 0 8px, transparent 8px 16px); }
/* Reels: os botões da direita, de 880 até a zona de baixo */
.nt-post--reels .nt-post__guias { background: repeating-linear-gradient(135deg, rgba(255,92,61,.28) 0 8px, transparent 8px 16px) right calc(880 * var(--px)) / calc(120 * var(--px)) calc(368 * var(--px)) no-repeat; }
/* cortes da capa em 9:16: 4:5 no feed (guia-grade) e 3:4 na grade do perfil (guia-perfil) */
.nt-post__guia-grade { position: absolute; left: 0; right: 0; top: calc(285 * var(--px)); height: calc(1350 * var(--px)); border-block: 1px dashed #3DD6FF; }
.nt-post__guia-perfil { position: absolute; left: 0; right: 0; top: calc(240 * var(--px)); height: calc(1440 * var(--px)); border-block: 1px dashed #FFB23D; }
.nt-post__guia-nome { position: absolute; left: 8px; top: 8px; padding: 2px 6px; border-radius: 4px; background: #FF5C3D; color: #fff; font: 600 10px/1.3 var(--font-sans); letter-spacing: .04em; }

/* antes / depois */
.nt-antesdepois { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: 1fr 1fr; }
.nt-antesdepois > figure { position: relative; margin: 0; overflow: hidden; }
.nt-antesdepois img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-antesdepois figcaption { position: absolute; top: calc(170 * var(--px)); left: calc(36 * var(--px)); font: 400 calc(22 * var(--px))/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; padding: calc(12 * var(--px)) calc(18 * var(--px)); border-radius: 999px; background: rgba(0,0,2,.5); color: var(--neutro-50); }
.nt-antesdepois > figure + figure { border-left: calc(4 * var(--px)) solid var(--neutro-50); }

/* comparador interativo (site) */
.nt-comparador { --pos: 50%; position: relative; overflow: hidden; border-radius: var(--raio-xl); aspect-ratio: var(--ar, 4 / 5); background: var(--superficie-3); touch-action: pan-y; user-select: none; }
.nt-comparador > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-comparador__depois { clip-path: inset(0 0 0 var(--pos)); }
.nt-comparador__linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--neutro-50); pointer-events: none; }
.nt-comparador__alca { position: absolute; top: 50%; left: var(--pos); display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--neutro-50); color: var(--neutro-950); box-shadow: var(--sombra-2); pointer-events: none; }
.nt-comparador__alca svg { width: 22px; height: 22px; }
.nt-comparador > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.nt-comparador:has(input:focus-visible) .nt-comparador__alca { outline: 2px solid var(--foco); outline-offset: 3px; }
.nt-comparador__rotulo { position: absolute; top: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,2,.55); color: var(--neutro-50); font: 400 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }

/* processo de IA */
.nt-processo-ia { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--px)); }
.nt-processo-ia > figure { margin: 0; display: grid; gap: calc(14 * var(--px)); }
.nt-processo-ia__img { aspect-ratio: 1; border-radius: calc(28 * var(--px)); overflow: hidden; background: var(--neutro-900); }
.nt-processo-ia__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-processo-ia figcaption { display: flex; justify-content: space-between; font: 400 calc(20 * var(--px))/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; opacity: .86; }

/* prompt → resultado */
.nt-prompt { padding: calc(32 * var(--px)) calc(36 * var(--px)); border-radius: calc(36 * var(--px)); background: rgba(16,21,29,.62); border: 1px solid rgba(245,245,243,.16); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font: 400 calc(25 * var(--px))/1.5 var(--font-sans); letter-spacing: 0; color: var(--neutro-50); }
.nt-prompt__cabeca { display: flex; justify-content: space-between; margin-bottom: calc(16 * var(--px)); font-size: calc(19 * var(--px)); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.nt-prompt mark { background: rgba(151,174,198,.26); color: inherit; border-radius: 4px; padding: 0 .2em; }

/* enquete do story */
.nt-enquete { display: grid; gap: calc(18 * var(--px)); padding: calc(40 * var(--px)); border-radius: calc(44 * var(--px)); background: rgba(245,245,243,.92); color: var(--neutro-950); box-shadow: 0 30px 80px -30px rgba(0,0,2,.6); }
.nt-enquete__pergunta { margin: 0 0 calc(8 * var(--px)); font-size: calc(48 * var(--px)); line-height: 1.08; letter-spacing: -.03em; font-weight: 400; text-align: center; }
.nt-enquete__opcao { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; height: calc(104 * var(--px)); padding: 0 calc(36 * var(--px)); border: 0; border-radius: 999px; background: rgba(11,13,16,.07); color: inherit; font: 500 calc(34 * var(--px))/1 var(--font-sans); cursor: pointer; }
.nt-enquete__opcao::before { content: ""; position: absolute; inset: 0; z-index: 0; width: var(--v, 0%); background: color-mix(in srgb, var(--azul-500) 22%, transparent); transition: width var(--duracao-gaveta) var(--curva-entrada); }
.nt-enquete__opcao > * { position: relative; z-index: 1; }
.nt-enquete__opcao b { font: 700 calc(34 * var(--px))/1 var(--font-matriz); opacity: 0; transition: opacity var(--duracao-base); }
.nt-enquete.is-votada .nt-enquete__opcao b { opacity: 1; }
.nt-enquete.is-votada .nt-enquete__opcao { cursor: default; }
.nt-enquete__opcao.is-escolhida::before { background: color-mix(in srgb, var(--azul-500) 40%, transparent); }

/* cartão de vidro sobre imagem (story imagem) */
.nt-post__vidro { padding: calc(36 * var(--px)) calc(40 * var(--px)); border-radius: calc(44 * var(--px)); background: rgba(16,21,29,.5); border: 1px solid rgba(245,245,243,.16); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); }

/* thumbnail 16:9 */
.nt-thumb__grade { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: 1fr 1.05fr; }
.nt-thumb__grade > div { position: relative; overflow: hidden; }
.nt-thumb__grade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-thumb__duracao { position: absolute; right: calc(28 * var(--px)); bottom: calc(28 * var(--px)); padding: calc(8 * var(--px)) calc(14 * var(--px)); border-radius: calc(10 * var(--px)); background: rgba(0,0,2,.8); color: var(--neutro-50); font: 500 calc(26 * var(--px))/1 var(--font-sans); }

/* =========================================================
   POST EDITORIAL: os posts claros do estúdio (tom duplo, letreiro, índice, citação sublinhada)
   1080 x 1350: moldura de 15 em fundo, cartão em superficie com margem de 45, grade de 6 colunas x 6 campos
   (campo 135 x 180, calha 30 = uma linha), linha de base 30 sobre a unidade 5. Posicione os blocos pelas linhas
   da grade (grid-area: campo / coluna / campo / coluna) e ligue .is-guias no .nt-editorial para ver a grade.
   ========================================================= */
.nt-editorial { container-type: inline-size; width: 100%; min-width: 0; }
.nt-editorial__tela { --px: calc(100cqw / 1080); --my: 45; --linhas: 6; position: relative; aspect-ratio: 4 / 5; padding: calc(15 * var(--px)); background: var(--fundo); color: var(--tinta); font-family: var(--font-sans); }
.nt-editorial__cartao {
  --cal: calc(30 * var(--px));
  position: relative; height: 100%; overflow: hidden; padding: calc(var(--my) * var(--px)) calc(45 * var(--px)); border-radius: calc(24 * var(--px)); background: var(--superficie);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(var(--linhas), minmax(0, 1fr)); gap: var(--cal);
  font-size: calc(27 * var(--px)); line-height: calc(30 * var(--px));
}
.nt-editorial__cartao > * { min-width: 0; margin: 0; }
.nt-editorial__topo { font-weight: 400; grid-column: 1 / -1; grid-row: 1; align-self: start; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--cal); letter-spacing: -.01em; }
.nt-editorial__marca { justify-self: start; height: calc(24 * var(--px)); line-height: 0; color: var(--tinta); }
.nt-editorial__marca svg { height: 100%; width: auto; fill: currentColor; display: block; }
.nt-editorial__acao { justify-self: end; display: inline-flex; align-items: center; gap: calc(10 * var(--px)); height: calc(45 * var(--px)); padding: 0 calc(20 * var(--px)); border-radius: var(--raio-pilula); background: var(--fundo); box-shadow: inset 0 0 0 1px var(--borda); font-size: calc(18 * var(--px)); line-height: 1; }
.nt-editorial__acao .nt-icone { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
/* escala do post, na unidade 5: entrelinhas de 30 (uma linha), 40, 45, 60, 80, 100 e 150 */
.nt-ed-manchete { font-weight: 400; font-size: calc(72 * var(--px)); line-height: calc(80 * var(--px)); letter-spacing: -.035em; }
.nt-ed-titulo-claro { font-weight: 400; font-size: calc(100 * var(--px)); line-height: calc(100 * var(--px)); letter-spacing: -.045em; color: var(--letreiro); }
.nt-ed-subtitulo { font-weight: 400; font-size: calc(40 * var(--px)); line-height: calc(45 * var(--px)); letter-spacing: -.02em; }
.nt-ed-corpo-l { font-weight: 400; font-size: calc(36 * var(--px)); line-height: calc(40 * var(--px)); letter-spacing: -.015em; color: var(--tinta-2); }
.nt-ed-corpo { font-weight: 400; font-size: calc(27 * var(--px)); line-height: calc(30 * var(--px)); color: var(--tinta-2); }
.nt-ed-corpo + .nt-ed-corpo, .nt-ed-corpo-l + .nt-ed-corpo-l { margin-top: var(--cal); }
.nt-editorial .nt-eco { color: var(--tinta-eco); }
.nt-ed-letreiro { font-weight: 700; font-size: calc(180 * var(--px)); line-height: calc(150 * var(--px)); letter-spacing: -.04em; text-transform: uppercase; color: var(--letreiro); white-space: nowrap; }
.nt-ed-indice { font-weight: 400; font-family: var(--font-sans); font-size: calc(26 * var(--px)); line-height: calc(30 * var(--px)); letter-spacing: .04em; color: var(--letreiro); }
.nt-ed-citacao { font-weight: 400; font-size: calc(40 * var(--px)); line-height: calc(60 * var(--px)); letter-spacing: -.02em; }
.nt-ed-aspas { font-size: calc(90 * var(--px)); line-height: calc(60 * var(--px)); color: var(--tinta-3); }
.nt-ed-faixa { font-weight: 400; font-size: calc(24 * var(--px)); line-height: calc(36 * var(--px)); letter-spacing: .01em; text-transform: uppercase; text-align: center; }
.nt-ed-faixa > span { padding: calc(3 * var(--px)) calc(14 * var(--px)); border-radius: calc(12 * var(--px)); background: var(--letreiro-suave); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nt-ed-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(15 * var(--px)) calc(20 * var(--px)); padding: 0; list-style: none; }
.nt-ed-tags > li { display: inline-flex; align-items: center; height: calc(45 * var(--px)); padding: 0 calc(24 * var(--px)); border-radius: var(--raio-pilula); background: var(--fundo); font-size: calc(18 * var(--px)); line-height: 1; color: var(--tinta); }
.nt-ed-pontos { display: flex; justify-content: center; gap: calc(36 * var(--px)); font-size: calc(22 * var(--px)); line-height: calc(30 * var(--px)); color: var(--tinta-2); }
.nt-ed-pontos > span { display: inline-flex; align-items: center; gap: calc(8 * var(--px)); }
.nt-ed-pontos > span::before { content: ""; width: calc(15 * var(--px)); height: calc(15 * var(--px)); border-radius: 50%; background: var(--letreiro-suave); }
.nt-ed-pontos > [aria-current]::before { background: var(--azul-300); }
/* imagem em pontos (matriz, como a Doto e a vinheta): PNG transparente com pontos em carbono */
.nt-ed-pontilhado { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
[data-theme="escuro"] .nt-ed-pontilhado { filter: invert(.93); }
/* a grade 6 x 6 visível: colunas, campos e linha de base */
.nt-editorial.is-guias .nt-editorial__cartao::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; padding: calc(var(--my) * var(--px)) calc(45 * var(--px));
  background-origin: content-box; background-clip: content-box;
  background-image: linear-gradient(to right, var(--guia-coluna) calc(100% - var(--cal)), transparent 0), linear-gradient(to bottom, var(--guia-coluna) calc(100% - var(--cal)), transparent 0), repeating-linear-gradient(to bottom, var(--guia-linha) 0 1px, transparent 1px var(--cal));
  background-size: calc((100% + var(--cal)) / 6) 100%, 100% calc((100% + var(--cal)) / var(--linhas)), 100% var(--cal);
}
/* imagem dentro da grade: cantos arredondados (24, o raio do cartão), contorno de 1 px por dentro */
.nt-ed-imagem { overflow: hidden; border-radius: calc(24 * var(--px)); background: var(--superficie-3); outline: 1px solid var(--contorno-imagem); outline-offset: -1px; }
.nt-ed-imagem > img, .nt-ed-imagem > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* formatos digitais: a mesma grade de campos 135 x 180, outra altura e outras zonas.
   3:4 (perfil): 6 campos, 105 em cima e embaixo. 9:16 (stories e reels): 8 campos, 135 em cima e embaixo. */
.nt-editorial--3x4 .nt-editorial__tela { aspect-ratio: 3 / 4; --my: 90; }
.nt-editorial--9x16 .nt-editorial__tela { aspect-ratio: 9 / 16; --my: 120; --linhas: 8; }
.nt-editorial--9x16 { --zt: 270; --zb: 384; --zd: 0; }
.nt-editorial--reels { --zb: 672; --zd: 120; }
/* com a grade ligada: zonas de interface hachuradas e cortes da plataforma tracejados */
.nt-editorial.is-guias .nt-editorial__tela::before, .nt-editorial--9x16.is-guias .nt-editorial__tela::after { content: ""; position: absolute; z-index: 8; pointer-events: none; }
.nt-editorial.is-guias .nt-editorial__tela::before { top: 0; bottom: 0; left: calc(34 * var(--px)); right: calc(34 * var(--px)); border-inline: max(1px, calc(3 * var(--px))) dashed var(--atencao); }
.nt-editorial--3x4.is-guias .nt-editorial__tela::before, .nt-editorial--9x16.is-guias .nt-editorial__tela::before { content: none; }
.nt-editorial--reels.is-guias .nt-editorial__tela::before { content: ""; left: 0; right: 0; top: calc(240 * var(--px)); bottom: calc(240 * var(--px)); border: 0; border-block: max(1px, calc(3 * var(--px))) dashed var(--atencao); }
.nt-editorial--9x16.is-guias .nt-editorial__tela::after {
  --hachura: repeating-linear-gradient(135deg, var(--guia-zona) 0 calc(10 * var(--px)), transparent 0 calc(20 * var(--px)));
  inset: 0;
  background: var(--hachura) top / 100% calc(var(--zt) * var(--px)) no-repeat, var(--hachura) bottom / 100% calc(var(--zb) * var(--px)) no-repeat, var(--hachura) right calc(880 * var(--px)) / calc(var(--zd) * var(--px)) calc(368 * var(--px)) no-repeat;
}

/* =========================================================
   REGRA VISUAL: as regras da grade em pranchas de certo e errado. Cada prancha é um .nt-editorial com .is-guias;
   o texto corrido vira barras na linha de base (.nt-regra__linhas), o erro leva contorno tracejado (.nt-regra__falha)
   e os espaços medidos levam cota (.nt-regra__cota).
   ========================================================= */
.nt-regra { display: grid; gap: var(--ritmo-1); align-content: start; min-width: 0; }
.nt-regra__cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espaco-1) var(--espaco-4); align-items: start; }
/* v4.0: o número da regra no círculo, no topo, na linha do título (regra do círculo) */
.nt-regra__num { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; border-radius: var(--raio-pilula); background: var(--pilula-circulo); color: var(--pilula-circulo-tinta);
  font: 800 13px/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; }
.nt-regra__cab > h3 { padding-top: 9px; }
.nt-regra__cab > :first-child { grid-row: span 2; }
.nt-regra__cab > * { margin: 0; }
.nt-regra__cab > p:last-child { color: var(--tinta-2); max-width: 60ch; }
.nt-regra__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-calha-desktop); }
.nt-regra__exemplo { margin: 0; min-width: 0; display: grid; gap: var(--espaco-3); align-content: start; }
/* v4.0: o veredito é o badge aceso (Certo em verde, Errado em vermelho) com o texto embaixo */
.nt-regra__veredito { display: grid; gap: 8px; justify-items: start; font: 400 13px/20px var(--font-sans); color: var(--tinta-2); }
@media (max-width: 640px) { .nt-regra__par { grid-template-columns: minmax(0, 1fr); } }
/* na prancha, a grade fica por baixo: a foto cobre os campos e o texto assenta por cima das linhas */
.nt-regra__exemplo .nt-editorial__cartao { isolation: isolate; }
.nt-regra__exemplo .nt-editorial.is-guias .nt-editorial__cartao::after { z-index: -1; }
.nt-regra__exemplo .nt-editorial.is-guias .nt-editorial__tela::before { content: none; }
/* texto corrido em barras: uma linha de 30 por <i>, a barra assenta na linha de base; --w encurta a linha, --lh muda a entrelinha */
.nt-regra__linhas { display: grid; align-content: start; }
.nt-regra__linhas > i { display: block; width: var(--w, 100%); height: calc(var(--lh, 30) * var(--px)); }
.nt-regra__linhas > i::before { content: ""; display: block; height: calc(12 * var(--px)); margin-top: calc((var(--lh, 30) - 20) * var(--px)); border-radius: calc(3 * var(--px)); background: var(--letreiro); }
.nt-regra__linhas.is-centro > i { margin-inline: auto; }
/* o que quebra a regra: contorno tracejado em erro, por cima da grade */
.nt-regra__falha { position: relative; z-index: 6; outline: max(1.5px, calc(5 * var(--px))) dashed var(--erro); outline-offset: calc(8 * var(--px)); }
/* cota de espaço entre blocos, com o valor em unidades da prancha */
.nt-regra__cota { --c: var(--destaque); position: relative; z-index: 6; flex: none; display: flex; align-items: center; height: calc(var(--h) * var(--px)); padding-left: calc(24 * var(--px)); color: var(--c); font: 400 max(10px, calc(32 * var(--px)))/1 var(--font-sans); }
.nt-regra__cota::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(12 * var(--px)); border: max(1px, calc(3 * var(--px))) solid currentColor; border-right: 0; }
.nt-regra__cota.is-errado { --c: var(--erro); }

/* =========================================================
   MOTION E AUDIOVISUAL
   Peças de vídeo são arte fixa: escuras por definição (Abismo/Horizonte), independentes do tema da interface.
   ========================================================= */
.nt-palco { --px: calc(100cqw / 1920); container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--raio-l); background: var(--neutro-1000); color: var(--neutro-50); }
.nt-palco__cena { position: absolute; inset: 0; }
.nt-palco__cena > img, .nt-palco__cena > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-palco__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); margin-top: var(--espaco-3); }
.nt-palco__tempo { margin-left: auto; font: 400 12px/1 var(--font-sans); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.nt-palco-envelope { display: grid; gap: 0; }

/* ---------- Vinheta do logo ---------- */
.nt-vinheta { position: absolute; inset: 0; display: grid; place-items: center; }
.nt-vinheta svg { width: 54%; height: auto; overflow: visible; }
.nt-vinheta__pontos circle { fill: var(--azul-300); }
.nt-vinheta__marca { fill: var(--neutro-50); }
.nt-vinheta__studios circle { fill: var(--neutro-50); }
.nt-vinheta__assina { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font: 400 calc(22 * var(--px))/1 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--azul-300); }

/* ---------- Lower third ----------
   v4.0: uma pílula de vidro escuro, como as pílulas sobre imagem: a estrela no círculo da ponta (branca, o círculo um tom
   mais escuro), o nome e o cargo ao lado. A cápsula abre por máscara a partir do círculo. Medidas em px de 1920. */
.nt-lt { --lt-folga: calc(12 * var(--px)); --lt-circulo: calc(94 * var(--px));
  position: absolute; left: calc(120 * var(--px)); bottom: calc(108 * var(--px)); display: grid; align-items: center; color: var(--neutro-50); }
.nt-lt > * { grid-area: 1 / 1; }
.nt-lt__marca { position: relative; z-index: 1; justify-self: start; display: grid; place-items: center; width: var(--lt-circulo); height: var(--lt-circulo); margin-left: var(--lt-folga);
  border-radius: 50%; background: rgba(0, 0, 2, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nt-lt__marca svg { width: 44%; height: auto; fill: var(--neutro-50); }
.nt-lt__corpo { display: grid; align-content: center; gap: calc(8 * var(--px)); min-height: calc(var(--lt-circulo) + 2 * var(--lt-folga));
  padding: calc(18 * var(--px)) calc(56 * var(--px)) calc(18 * var(--px)) calc(var(--lt-folga) + var(--lt-circulo) + 28 * var(--px));
  border-radius: var(--raio-pilula); background: rgba(14, 15, 20, .5); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .07), 0 calc(20 * var(--px)) calc(60 * var(--px)) calc(-20 * var(--px)) rgba(0, 0, 2, .45);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.nt-lt__linha1 { display: block; font: 500 calc(46 * var(--px))/1.05 var(--font-sans); letter-spacing: -.02em; white-space: nowrap; }
.nt-lt__linha2 { display: block; font: 500 calc(24 * var(--px))/1.2 var(--font-sans); letter-spacing: 0; color: rgba(245, 245, 243, .72); white-space: nowrap; }
.nt-lt__linha1 > span, .nt-lt__linha2 > span { display: inline-block; }
.nt-lt--direita { left: auto; right: calc(120 * var(--px)); text-align: right; }
.nt-lt--direita .nt-lt__marca { justify-self: end; margin: 0 var(--lt-folga) 0 0; }
.nt-lt--direita .nt-lt__corpo { padding-left: calc(56 * var(--px)); padding-right: calc(var(--lt-folga) + var(--lt-circulo) + 28 * var(--px)); }

/* ---------- Revelação de texto ---------- */
.nt-revela { margin: 0; }
.nt-revela .nt-r-palavra { display: inline-block; white-space: pre; }
.nt-revela .nt-r-linha { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.nt-revela .nt-r-linha > span { display: block; }
.nt-revela--mascara { -webkit-mask-image: linear-gradient(90deg, #000 0 var(--m, 100%), transparent calc(var(--m, 100%) + 12%)); mask-image: linear-gradient(90deg, #000 0 var(--m, 100%), transparent calc(var(--m, 100%) + 12%)); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.nt-revela-palco { display: grid; place-items: center start; min-height: 220px; padding: var(--espaco-7); border-radius: var(--raio-l); background: var(--neutro-1000); color: var(--neutro-50); overflow: hidden; }
.nt-revela-palco .nt-revela { font: 400 clamp(32px, 5vw, 64px)/1 var(--font-sans); letter-spacing: -.035em; max-width: 16ch; }

/* ---------- Transições ---------- */
.nt-transicao .nt-palco__cena { will-change: transform, opacity, clip-path, filter; }
.nt-transicao__cortina { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; }
.nt-transicao__nevoa { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(80% 80% at 50% 50%, var(--neutro-50), var(--horizonte-4) 50%, var(--horizonte-3)); }
.nt-transicao__nome { position: absolute; z-index: 6; left: calc(56 * var(--px)); top: calc(48 * var(--px)); padding: 6px 10px; border-radius: 999px; background: rgba(0,0,2,.5); font: 400 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Cartelas ---------- */
.nt-cartela { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(96 * var(--px)) calc(120 * var(--px)); }
.nt-cartela__topo, .nt-cartela__base { display: flex; justify-content: space-between; gap: calc(40 * var(--px)); font: 400 calc(22 * var(--px))/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-300); }
.nt-cartela__titulo { margin: 0; font: 400 calc(168 * var(--px))/.9 var(--font-sans); letter-spacing: -.045em; max-width: 12ch; }
.nt-cartela__sub { margin: calc(28 * var(--px)) 0 0; font: 400 calc(34 * var(--px))/1.35 var(--font-sans); color: var(--azul-200); }
.nt-cartela--final { align-items: center; justify-content: center; gap: calc(48 * var(--px)); text-align: center; }
.nt-cartela--final svg { width: calc(760 * var(--px)); height: auto; fill: var(--neutro-50); }
.nt-cartela--final .nt-cartela__linha { font: 400 calc(30 * var(--px))/1.4 var(--font-sans); color: var(--azul-200); }
.nt-cartela--final .nt-cartela__base { position: absolute; left: calc(120 * var(--px)); right: calc(120 * var(--px)); bottom: calc(96 * var(--px)); }
.nt-creditos { position: absolute; inset: 0; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.nt-creditos__rolo { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: calc(56 * var(--px)); justify-items: center; padding-bottom: calc(120 * var(--px)); animation: nt-creditos var(--dur, 22s) linear infinite; }
.nt-creditos__bloco { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--px)) calc(48 * var(--px)); width: calc(1000 * var(--px)); }
.nt-creditos__bloco dt { text-align: right; font: 400 calc(22 * var(--px))/1.5 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--azul-300); }
.nt-creditos__bloco dd { margin: 0; font: 400 calc(30 * var(--px))/1.3 var(--font-sans); }
.nt-creditos__titulo { font: 400 calc(64 * var(--px))/1 var(--font-sans); letter-spacing: -.03em; }
@keyframes nt-creditos { to { transform: translateY(calc(-100% - 100cqh)); } }
.nt-palco .nt-creditos__rolo { animation-name: nt-creditos-palco; }
@keyframes nt-creditos-palco { to { transform: translateY(calc(-100% - 56.25cqw)); } }
@media (prefers-reduced-motion: reduce) { .nt-creditos__rolo { animation: none; top: 6%; } }
:root[data-movimento="reduzido"] .nt-creditos__rolo, .nt-reduzido .nt-creditos__rolo { animation: none; top: 6%; }

/* ---------- Molduras de proporção ---------- */
.nt-moldura { --px: calc(100cqw / 1920); container-type: inline-size; position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--raio-l); background: var(--neutro-900); color: var(--neutro-50); }
.nt-moldura__imagem { position: absolute; inset: 0; }
.nt-moldura__imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-moldura__janela { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 100vmax rgba(0,0,2,.86); }
.nt-moldura--239 .nt-moldura__janela { width: 100%; aspect-ratio: 2.39 / 1; }
.nt-moldura--169 .nt-moldura__janela { width: 100%; height: 100%; }
.nt-moldura--916 .nt-moldura__janela { height: 100%; aspect-ratio: 9 / 16; }
.nt-moldura--45 .nt-moldura__janela { height: 100%; aspect-ratio: 4 / 5; }
.nt-moldura__acao, .nt-moldura__titulo { position: absolute; border: 1px dashed; pointer-events: none; }
.nt-moldura__acao { inset: 3.5%; border-color: rgba(151,174,198,.9); }
.nt-moldura__titulo { inset: 10%; border-color: rgba(255,178,61,.9); }
.nt-moldura__terco { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(245,245,243,.28) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(245,245,243,.28) 0 calc(66.66% + .5px), transparent 0),
  linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(245,245,243,.28) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(245,245,243,.28) 0 calc(66.66% + .5px), transparent 0); }
.nt-moldura__cruz { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; pointer-events: none; background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; opacity: .7; }
.nt-moldura__nome { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; gap: 8px; }
.nt-moldura__nome span { padding: 4px 8px; border-radius: 999px; background: rgba(0,0,2,.6); font: 400 10.5px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.nt-moldura__nome .is-acao { color: var(--azul-300); }
.nt-moldura__nome .is-titulo { color: #FFB23D; }
.nt-moldura:not(.is-guias) .nt-moldura__acao, .nt-moldura:not(.is-guias) .nt-moldura__titulo, .nt-moldura:not(.is-guias) .nt-moldura__terco, .nt-moldura:not(.is-guias) .nt-moldura__cruz { display: none; }

/* =========================================================
   PORTAL DO CLIENTE (era Plataforma; os estados e o envio de arquivos foram para 10-componentes.css na v4.2)
   v4.0: as peças do portal moram nas caixas do financeiro (raio 44, cor base com a borda de luz, uma principal por
   bloco), com as linhas de dentro no cinza da caixa, a barra de progresso em linha e pontos e a linha do tempo em lima.
   ========================================================= */
.nt-painel, .nt-projeto, .nt-entrega, .nt-aprovacao, .nt-proposta, .nt-arquivo {
  border: 0; background: var(--caixa); color: var(--tinta); box-shadow: var(--caixa-luz); min-width: 0;
}
.nt-painel { display: grid; gap: var(--espaco-5); padding: var(--caixa-pad); border-radius: var(--raio-3xl); }
.nt-painel__rotulo { margin: 0; font: 500 11px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.nt-painel__titulo { margin: 0; font: 500 22px/1.25 var(--font-sans); letter-spacing: -.015em; overflow-wrap: anywhere; }

/* ---------- Card de projeto ----------
   v4.0 (2026-10-16): a estética do DataCardProjeto do painel. Capa 16:9 solta 8 px da borda, com o canto acompanhando o
   da caixa e o título por cima; o menu de ações numa pílula de vidro sobre a capa (fora dela, para o menu não ser
   cortado). Embaixo: o cliente com o avatar, o badge e a etapa, as cinco etapas em linha e pontos, prazo e equipe em
   pílulas de dado e a última atividade com o ícone no círculo. */
.nt-projeto {
  --folga: 8px; position: relative; display: grid; gap: var(--espaco-4); padding: var(--folga) var(--folga) var(--caixa-pad); border-radius: var(--raio-3xl); container-type: inline-size; align-content: start;
  transition: box-shadow var(--duracao-rapida) ease-out, transform var(--duracao-base) var(--curva-entrada);
}
.nt-projeto > :not(.nt-projeto__capa):not(.nt-projeto__acoes) { margin-inline: calc(var(--caixa-pad) - var(--folga)); }
a.nt-projeto { text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) { a.nt-projeto:hover, .nt-projeto[tabindex]:hover { box-shadow: var(--caixa-luz), var(--sombra-2); transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .nt-projeto { transition: box-shadow var(--duracao-rapida) ease-out; } a.nt-projeto:hover { transform: none; } }
.nt-projeto.is-hover { box-shadow: var(--caixa-luz), var(--sombra-2); }
.nt-projeto.is-selected { box-shadow: inset 0 0 0 2px var(--primario), var(--sombra-1); }
.nt-projeto__veu { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 2, .2) 0%, rgba(0, 0, 2, 0) 34%, rgba(0, 0, 2, .66) 100%); pointer-events: none; }
.nt-projeto__titulo { position: relative; z-index: 2; margin: 0; max-width: calc(100% - 8px); font: 600 clamp(18px, 7.4cqi, 26px)/1.12 var(--font-sans); letter-spacing: -.02em; color: var(--neutro-50); text-shadow: 0 1px 2px rgba(0, 0, 2, .3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.nt-projeto > .nt-projeto__acoes { position: absolute; z-index: 3; top: calc(var(--folga) + 12px); right: calc(var(--folga) + 12px); }
.nt-projeto__quem { display: flex; align-items: center; gap: var(--espaco-3); min-width: 0; }
.nt-projeto__quem > div { min-width: 0; }
.nt-projeto__cliente { margin: 0; font: 600 14px/1.3 var(--font-sans); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-projeto__id { margin: 0; font-size: 11px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.nt-projeto__etapa { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-3); flex-wrap: wrap; }
.nt-projeto__passo { font: 500 12.5px/1.3 var(--font-sans); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* as etapas na estética da barra de progresso: feitas em linha azul, a atual até onde chegou e o resto em pontos */
.nt-progresso-etapas { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.nt-progresso-etapas > li { height: 3px; border-radius: 3px; background: radial-gradient(circle, color-mix(in srgb, currentColor 40%, transparent) 1px, transparent 1.6px) 0 50% / 7px 3px repeat-x; }
.nt-progresso-etapas > li.is-feita { background: var(--azul-barra); }
.nt-progresso-etapas > li.is-atual { background: linear-gradient(90deg, var(--azul-barra) var(--p, 50%), transparent var(--p, 50%)), radial-gradient(circle, color-mix(in srgb, currentColor 40%, transparent) 1px, transparent 1.6px) 0 50% / 7px 3px repeat-x;
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--azul-barra) 60%, transparent); }
/* prazo e equipe em pílulas de dado; o prazo atrasado vira a pílula de resultado vermelha */
.nt-projeto__dados { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nt-projeto__dados > .nt-pilula { padding-right: 14px; }
.nt-projeto__prazo { min-width: 0; }
.nt-projeto__prazo .nt-pilula__valor { white-space: nowrap; }
.nt-projeto__prazo-rel { color: var(--tinta-3); font-weight: 400; }
.nt-projeto__prazo.is-negativo .nt-pilula__rotulo, .nt-projeto__prazo.is-negativo .nt-projeto__prazo-rel { color: inherit; opacity: .82; }
.nt-projeto__equipe { padding-left: 5px; }
/* a última atividade: o ícone no círculo, no topo, na linha do texto (regra do círculo) */
.nt-projeto__atividade { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; margin-block: 0; padding: 8px 16px 8px 8px; border-radius: 22px;
  background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda); font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); }
.nt-projeto__atividade > svg { box-sizing: border-box; width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--pilula-circulo); color: var(--pilula-circulo-tinta); }
.nt-projeto__atividade > span { padding-top: 4px; }
.nt-projeto__atividade b { color: var(--tinta); font-weight: 600; }
/* carregando: a capa e as linhas no mesmo desenho */
.nt-projeto .nt-esqueleto__capa { display: block; aspect-ratio: 16 / 9; border-radius: calc(var(--raio-3xl) - var(--folga)); }

/* ---------- Card de entrega ----------
   A mídia solta 8 px da borda da caixa, com o canto acompanhando o dela (como o card de cliente); o tipo e o play em
   vidro escuro por cima. */
.nt-entrega { --folga: 8px; display: grid; gap: 0; padding: var(--folga); overflow: hidden; border-radius: var(--raio-3xl); }
.nt-entrega__midia { position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--raio-3xl) - var(--folga)); background: var(--caixa-dentro); overflow: hidden; }
.nt-entrega__midia > img, .nt-entrega__midia > video { outline: 1px solid var(--contorno-imagem); outline-offset: -1px; }
.nt-entrega__midia > img, .nt-entrega__midia > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-entrega__tipo { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 4px; border-radius: 999px;
  background: rgba(14, 15, 20, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--neutro-50); font: 500 12px/1 var(--font-sans); }
.nt-entrega__tipo svg { box-sizing: border-box; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(0, 0, 2, .45); }
.nt-entrega__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 0; border-radius: 50%;
  background: rgba(14, 15, 20, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .1); color: var(--neutro-50); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; }
.nt-entrega__play svg { width: 20px; height: 20px; margin-left: 2px; }
.nt-entrega__corpo { display: grid; gap: var(--espaco-4); padding: var(--espaco-5) calc(var(--caixa-pad) - var(--folga)) calc(var(--caixa-pad) - var(--folga)); }
.nt-entrega__linha { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-3); flex-wrap: wrap; }
.nt-entrega__codigo { margin: 0; font: 500 12px/1 var(--font-sans); letter-spacing: .02em; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.nt-entrega__titulo { margin: 0; font: 600 18px/1.3 var(--font-sans); letter-spacing: -.015em; overflow-wrap: anywhere; }
.nt-entrega__meta { display: flex; align-items: center; gap: var(--espaco-3); flex-wrap: wrap; }
.nt-versao { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border: 0; border-radius: var(--raio-pilula); background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda); color: var(--tinta); font: 800 12px/1 var(--font-matriz); font-variation-settings: "ROND" 100; cursor: pointer; }
.nt-versao svg { box-sizing: border-box; width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--pilula-circulo); color: var(--pilula-circulo-tinta); }
.nt-versao:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
.nt-entrega__comentarios { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); font-size: 13.5px; text-decoration: none; }
.nt-entrega__comentarios svg { width: 16px; height: 16px; }
.nt-entrega__comentarios:hover { color: var(--tinta); }
.nt-entrega__acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nt-entrega__acoes > .nt-btn:not(.nt-btn--icone) { flex: 1; }
.nt-entrega__nota { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: 18px; font-size: 13.5px; line-height: 1.45; }
.nt-entrega__nota svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.nt-entrega__nota--sucesso { background: var(--sucesso-suave); color: var(--tinta); }
.nt-entrega__nota--sucesso svg { color: var(--sucesso); }
.nt-entrega__nota--atencao { background: var(--atencao-suave); color: var(--tinta); }
.nt-entrega__nota--atencao svg { color: var(--atencao); }
.nt-entrega--lista { grid-template-columns: 220px minmax(0, 1fr); }
.nt-entrega--lista .nt-entrega__midia { aspect-ratio: auto; height: 100%; }
@media (max-width: 560px) { .nt-entrega--lista { grid-template-columns: 1fr; } .nt-entrega--lista .nt-entrega__midia { aspect-ratio: 16 / 10; } }

/* ---------- Solicitação de aprovação ---------- */
.nt-aprovacao { display: grid; gap: var(--espaco-5); padding: var(--caixa-pad); border-radius: var(--raio-3xl); }
.nt-aprovacao__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--espaco-4); flex-wrap: wrap; }
.nt-aprovacao__prazo { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1.3 var(--font-sans); color: var(--atencao); }
.nt-aprovacao__prazo svg { width: 16px; height: 16px; }
.nt-aprovacao__miniaturas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.nt-aprovacao__miniaturas > div { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--caixa-dentro); }
.nt-aprovacao__miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-aprovacao__resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.nt-aprovacao__resumo div { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 18px; background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda); }
.nt-aprovacao__resumo dt { font: 500 12px/1.3 var(--font-sans); color: var(--tinta-3); }
.nt-aprovacao__resumo dd { margin: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.nt-aprovacao__texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta-2); max-width: 64ch; }
.nt-aprovacao__acoes { display: flex; gap: var(--espaco-2); flex-wrap: wrap; }
.nt-aprovacao__confirmado { display: none; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--sucesso-suave); }
.nt-aprovacao__confirmado svg { width: 22px; height: 22px; color: var(--sucesso); flex: none; }
.nt-aprovacao.is-aprovado .nt-aprovacao__confirmado { display: flex; }
.nt-aprovacao.is-aprovado .nt-aprovacao__acoes, .nt-aprovacao.is-aprovado .nt-aprovacao__ajuste { display: none; }
@media (max-width: 640px) { .nt-aprovacao__resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nt-aprovacao__miniaturas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nt-aprovacao__acoes > .nt-btn { flex: 1; } }

/* ---------- Resumo de proposta ---------- */
.nt-proposta { display: grid; gap: var(--espaco-7); padding: clamp(24px, 3vw, 40px); border-radius: var(--raio-3xl); }
@supports (corner-shape: squircle) { .nt-proposta { corner-shape: squircle; border-radius: var(--raio-squircle); } }
/* v4.0 (2026-10-16): o topo em pílulas de dado (proposta, cliente, validade), o título e quem enviou */
.nt-proposta__cabeca { display: grid; gap: var(--espaco-4); }
.nt-proposta__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nt-proposta__topo > .nt-badge { margin-left: auto; }
.nt-proposta__titulo { margin: 0; max-width: 22ch; font: 500 clamp(28px, 3.4vw, 44px)/1.04 var(--font-sans); letter-spacing: -.03em; text-wrap: balance; }
.nt-proposta__autor { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; color: var(--tinta-2); }
.nt-proposta__autor b { color: var(--tinta); font-weight: 600; }
.nt-proposta__colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--espaco-7); }
.nt-proposta__secao { display: grid; gap: var(--espaco-4); align-content: start; min-width: 0; }
/* rótulo de seção: o número no círculo (regra do círculo) e o nome em frase */
.nt-proposta__subtitulo { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 15px/1.3 var(--font-sans); letter-spacing: -.005em; color: var(--tinta); }
.nt-proposta__subtitulo > b { display: grid; place-items: center; flex: none; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--raio-pilula); background: var(--pilula-circulo); color: var(--pilula-circulo-tinta);
  font: 800 11px/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; }
/* escopo: cada entrega com o check no círculo, sem linha entre elas */
.nt-proposta__escopo { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; font-size: 15px; line-height: 1.45; }
.nt-proposta__escopo > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.nt-proposta__escopo > li > svg { box-sizing: border-box; width: 24px; height: 24px; padding: 6px; border-radius: 50%; background: var(--pilula-circulo); color: var(--pilula-circulo-tinta); }
.nt-faixas { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
/* cada faixa é uma peça de dentro da caixa (raio 26, folga 14); a escolhida ganha o contorno primario, como a pílula marcada */
.nt-faixa { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 22px 14px 14px; border: 0; border-radius: 26px;
  background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda); cursor: pointer; transition: box-shadow var(--duracao-rapida), background-color var(--duracao-rapida); }
.nt-faixa:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 28%, transparent); }
.nt-faixa:has(input:checked) { background: var(--pilula-fundo); box-shadow: inset 0 0 0 2px var(--primario), var(--sombra-1); }
.nt-faixa__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 16px/1.3 var(--font-sans); }
.nt-faixa__desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--tinta-2); }
.nt-faixa__valor { display: grid; justify-items: end; gap: 6px; text-align: right; font: 800 22px/1.1 var(--font-matriz); font-variation-settings: "ROND" 100; white-space: nowrap; }
.nt-faixa__valor small { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--raio-pilula); background: color-mix(in srgb, var(--tinta) 7%, transparent); font: 500 11.5px/1 var(--font-sans); color: var(--tinta-2); }
/* prazo: as datas-chave em pílulas de dado ligadas por uma seta, como o período do data card */
.nt-proposta__prazo { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nt-proposta__prazo > li:not(.nt-proposta__seta) { flex: 1 1 0; min-width: 0; }
.nt-proposta__prazo .nt-pilula { width: 100%; padding-right: 14px; }
.nt-proposta__seta { display: grid; place-items: center; flex: none; color: var(--tinta-3); }
.nt-proposta__seta svg { width: 16px; height: 16px; }
/* o total numa peça de dentro da caixa: o valor em pontos à esquerda, as duas saídas à direita */
.nt-proposta__rodape { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-5); flex-wrap: wrap; padding: 20px 20px 20px 26px; border-radius: 30px;
  background: var(--caixa-dentro); box-shadow: inset 0 0 0 1px var(--caixa-dentro-borda); }
.nt-proposta__total { display: grid; gap: 8px; }
.nt-proposta__total > span:first-child { font: 500 13.5px/1.3 var(--font-sans); color: var(--tinta-2); }
.nt-proposta__total b { font: 800 clamp(36px, 4.6vw, 56px)/1 var(--font-matriz); font-variation-settings: "ROND" 100; font-variant-numeric: tabular-nums; }
.nt-proposta__rodape .nt-btn { --h: 52px; --c: 42px; --px: 22px; font-size: 15px; }
@media (max-width: 760px) { .nt-proposta__colunas { grid-template-columns: 1fr; } .nt-proposta__prazo { flex-direction: column; align-items: stretch; } .nt-proposta__prazo > li:not(.nt-proposta__seta) { flex: none; } .nt-proposta__seta { transform: rotate(90deg); } .nt-proposta__topo > .nt-badge { margin-left: 0; } }
/* faixa estreita: o valor desce para baixo do nome, e o total encolhe para caber em pontos */
@media (max-width: 560px) { .nt-faixa { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .nt-faixa__valor { grid-column: 2; justify-items: start; text-align: left; } .nt-proposta__total b { font-size: 30px; } .nt-proposta__rodape { padding: 18px; } .nt-proposta__rodape .nt-btn-grupo { width: 100%; } }

/* =========================================================
   FINANCEIRO (v4.2): as peças que são só do financeiro do estúdio
   O card de cliente, o data card de projeto, o insight e os cálculos do mês. A capa 16:9 com o nome por cima é a capa de card de 10-componentes.css,
   a mesma do card de projeto do portal. O resto da linguagem do financeiro também está lá.
   ========================================================= */

/* ---------- Card de cliente e capa dos cards ----------
   Capa 16:9 solta 8 px da borda da caixa, com o canto acompanhando o dela; só o nome por cima. O lápis da capa fica
   escondido até o mouse passar sobre ela (no toque, sempre à vista). O resto vem dentro da caixa. O data card de projeto
   usa a mesma capa (__capa, __imagem, __veu, __editar com o prefixo nt-dc). */
.nt-cliente { --folga: 8px; display: grid; gap: var(--espaco-3); padding: var(--folga) var(--folga) var(--caixa-pad); align-content: start; }
:is(.nt-cliente__veu, .nt-dc__veu) { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 2, .18) 0%, rgba(0, 0, 2, 0) 34%, rgba(0, 0, 2, .62) 100%); pointer-events: none; }
.nt-cliente__nome { position: relative; z-index: 2; margin: 0; font-size: 21px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--neutro-50); text-shadow: 0 1px 2px rgba(0, 0, 2, .3); overflow-wrap: anywhere; }
:is(.nt-cliente__editar, .nt-dc__editar) { position: absolute; z-index: 3; top: 12px; right: 12px; }
@media (hover: hover) { :is(.nt-cliente__editar, .nt-dc__editar) { opacity: 0; transition: opacity var(--duracao-rapida) ease; } :is(.nt-cliente__capa, .nt-dc__capa):is(:hover, :focus-within) :is(.nt-cliente__editar, .nt-dc__editar) { opacity: 1; } }
.nt-cliente > :not(.nt-cliente__capa, .nt-cliente__link, .nt-cliente__editar) { margin-inline: calc(var(--caixa-pad) - var(--folga)); }
.nt-cliente__meta { margin: 4px 0 0; font-size: 13px; color: var(--tinta-3); }
.nt-cliente__campos, .nt-dc__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-3); margin: 0; }
.nt-cliente__campos { padding-top: var(--espaco-3); border-top: 1px solid var(--borda); }
:is(.nt-cliente__campos, .nt-dc__campos) > div { display: grid; gap: 2px; min-width: 0; }
:is(.nt-cliente__campos, .nt-dc__campos) dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
:is(.nt-cliente__campos, .nt-dc__campos) dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nt-dc__campos dd { font-size: 13px; font-weight: 500; }

/* ---------- Data card de projeto ----------
   A capa 16:9 com o nome grande por cima (a mesma do card de cliente), o cliente, as pílulas de status, o valor em pontos,
   o período em duas pílulas ligadas por uma seta, os detalhes numa grade e o lucro real numa pílula com a cor do resultado.
   Sem capa, o nome fica no topo da caixa. */
.nt-dc { display: grid; gap: var(--espaco-4); container-type: inline-size; }
.nt-dc__titulo { margin: 0; font-size: clamp(22px, 8.5cqi, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; overflow-wrap: anywhere; text-wrap: balance; }
.nt-dc:has(> .nt-dc__capa) { --folga: 8px; padding: var(--folga) var(--folga) var(--caixa-pad); }
.nt-dc:has(> .nt-dc__capa) > :not(.nt-dc__capa) { margin-inline: calc(var(--caixa-pad) - var(--folga)); }
.nt-dc:has(> .nt-dc__capa) > .nt-pilula--larga { width: auto; }
.nt-dc__capa .nt-dc__titulo { position: relative; z-index: 2; max-width: calc(100% - 48px); color: var(--neutro-50); text-shadow: 0 1px 2px rgba(0, 0, 2, .3); }
.nt-dc__quem { display: flex; align-items: center; gap: var(--espaco-3); }
.nt-dc__cliente { margin: 0; font-weight: 600; font-size: 14px; }
.nt-dc__id { margin: 0; font-size: 11px; color: var(--tinta-3); }
.nt-dc__selos { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-dc__sub { font-size: 12px; color: var(--tinta-3); }
.nt-dc__periodo { display: flex; align-items: center; gap: 6px; padding-top: var(--espaco-4); border-top: 1px solid var(--borda); }
.nt-dc__periodo > .nt-pilula { flex: 1 1 0; min-width: 0; gap: 8px; padding-right: 12px; }
.nt-dc__seta { display: grid; place-items: center; flex: none; color: var(--tinta-3); }
.nt-dc__seta .nt-icone { width: 16px; height: 16px; }
@container (max-width: 300px) { .nt-dc__periodo { flex-direction: column; align-items: stretch; } .nt-dc__seta { transform: rotate(90deg); } }
@container (min-width: 440px) { .nt-dc__campos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Insight ----------
   Uma regra sobre os dados que pede atenção, numa caixa: o ponto do tom ao lado do título e a frase embaixo. O primeiro
   insight é o maior (oito colunas no computador). Tom erro na caixa brasa (com .nt-caixa--brasa); atenção, sucesso e
   info na cor base, com o ponto na cor do tom. */
.nt-insights { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espaco-4); }
.nt-insight { grid-column: span 12; display: grid; gap: 8px; align-content: start; }
@media (min-width: 700px) { .nt-insight { grid-column: span 6; } .nt-insight:first-child { grid-column: span 12; } }
@media (min-width: 1100px) { .nt-insight { grid-column: span 4; } .nt-insight:first-child { grid-column: span 8; } }
.nt-insight::before { content: ""; position: absolute; z-index: 3; top: calc(var(--caixa-pad) + 7px); left: var(--caixa-pad); width: 10px; height: 10px; border-radius: 50%; background: var(--destaque); }
.nt-insight--atencao::before { background: var(--atencao); }
.nt-insight--sucesso::before { background: var(--sucesso); }
.nt-insight--erro::before { background: var(--caixa-alerta); }
.nt-insight--erro.is-principal::before { background: var(--neutro-50); }
.nt-insight__titulo { margin: 0; padding-left: 22px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.nt-insight:first-child .nt-insight__titulo { font-size: clamp(20px, 2.2vw, 26px); }
.nt-insight__texto { margin: 0; padding-left: 22px; font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }

/* ---------- Cálculos ----------
   Os números de apoio do mês em ladrilhos (cada um uma caixa pequena de raio 28): o que é, o valor e de onde ele vem.
   Duas colunas no celular; no computador, quantas couberem com 210 px no mínimo. */
.nt-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-3); margin: 0; }
@media (min-width: 700px) { .nt-calc { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.nt-calc__item { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border-radius: 28px; }
.nt-calc__item dt { font-size: 14px; font-weight: 500; color: var(--tinta-2); }
.nt-calc__item dd { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nt-calc__item dd small { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--tinta-3); }
@supports (corner-shape: squircle) {
  .nt-calc__item.is-principal { border-radius: 48px; }
  @media (max-width: 699px) { .nt-calc__item.is-principal { border-radius: 40px; } }
}

/* ---------- O card inteiro como link (a lista de projetos e a de clientes) e a logo na capa ----------
   O data card pode ser todo o link para a página do projeto (nt-dc__link envolve a capa e o resto), e o card de cliente
   o link para a página do cliente (nt-cliente__link, v4.4); o lápis fica fora do link, irmão dele, posto sobre a capa,
   para trocar a imagem sem abrir a página. Sem capa própria nem do cliente, a logo do cliente entra centrada sobre o
   Horizonte (__imagem--logo). */
.nt-cliente:has(> .nt-cliente__link) { padding: 0; }
.nt-cliente__link { display: grid; gap: var(--espaco-3); align-content: start; min-width: 0; padding: var(--folga) var(--folga) var(--caixa-pad); border-radius: inherit; color: inherit; text-decoration: none; }
.nt-cliente__link:hover { box-shadow: var(--sombra-2); }
.nt-cliente__link > :not(.nt-cliente__capa) { margin-inline: calc(var(--caixa-pad) - var(--folga)); }
.nt-cliente > .nt-cliente__editar { top: calc(var(--folga) + 12px); right: calc(var(--folga) + 12px); }
.nt-dc:has(> .nt-dc__link) { --folga: 8px; padding: 0; }
.nt-dc__link { display: grid; gap: var(--espaco-4); min-width: 0; padding: var(--caixa-pad); border-radius: inherit; color: inherit; text-decoration: none; }
.nt-dc__link:hover { box-shadow: var(--sombra-2); }
.nt-dc__link:has(> .nt-dc__capa) { padding: var(--folga) var(--folga) var(--caixa-pad); }
.nt-dc__link:has(> .nt-dc__capa) > :not(.nt-dc__capa) { margin-inline: calc(var(--caixa-pad) - var(--folga)); }
.nt-dc__link:has(> .nt-dc__capa) > .nt-pilula--larga { width: auto; }
:is(.nt-cliente__editar, .nt-dc__editar) { display: flex; align-items: center; gap: 6px; }
.nt-dc > .nt-dc__editar { top: calc(var(--folga) + 12px); right: calc(var(--folga) + 12px); }
@media (hover: hover) {
  .nt-dc:has(.nt-dc__capa:hover) > .nt-dc__editar, .nt-dc > .nt-dc__editar:is(:hover, :focus-within),
  .nt-cliente:has(.nt-cliente__capa:hover) > .nt-cliente__editar, .nt-cliente > .nt-cliente__editar:is(:hover, :focus-within),
  :is(.nt-cliente__editar, .nt-dc__editar):has(.nt-capa__estado:not(:empty)) { opacity: 1; }
}
:is(.nt-cliente__imagem--logo, .nt-dc__imagem--logo) { object-fit: contain; padding: 14% 24% 26%; }