/* ============================================================
   NOVA BRASILEIRA — COMPONENTES
   Construídos sobre nb-tokens.css. Estética NB.
   ============================================================ */

/* ---------- LAYOUT ---------- */
.nb-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.nb-section { position: relative; padding-block: clamp(72px, 12vh, 150px); }

/* alternância de fundo: escuro / claro / verde */
.bg-carvao { background: var(--carvao); color: var(--branco); }
.bg-carvao-2 { background: var(--carvao-2); color: var(--branco); }
.bg-claro  { background: var(--cinza); color: var(--carvao); }
.bg-verde  { background: var(--verde-8); color: var(--branco); }

/* ---------- EYEBROW / LABEL (caixa-alta técnica) ---------- */
.nb-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-label); font-weight: var(--w-med);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--grafite-aa);
}
.bg-claro .nb-eyebrow { color: #5A5A60; }
.nb-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--verde-6);
  display: inline-block;
}
.nb-eyebrow.no-tick::before { display: none; }

/* ---------- STATUS DOT ---------- */
.nb-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.nb-dot--ativo { background: var(--verde-6); box-shadow: 0 0 0 3px var(--verde-2); }
.nb-dot--pulse { background: var(--verde-6); position: relative; }
.nb-dot--pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--verde-6); animation: nb-pulse 2.4s var(--ease-out) infinite;
}
@keyframes nb-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.nb-dot--idle { background: var(--grafite); }
.nb-dot--erro { background: var(--erro); }

/* ---------- BOTÕES ---------- */
.nb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-weight: var(--w-med); font-size: var(--t-sm); letter-spacing: .01em;
  padding: 14px 22px; border-radius: var(--r-sm);
  transition: background var(--m-hover) var(--ease), color var(--m-hover) var(--ease),
              border-color var(--m-hover) var(--ease), box-shadow var(--m-enter) var(--ease),
              transform var(--m-hover) var(--ease);
  white-space: nowrap;
}
.nb-btn:active { transform: translateY(1px); }

/* primário: carvão com halo verde no hover */
.nb-btn--primary {
  background: var(--branco); color: var(--carvao);
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.nb-btn--primary:hover {
  background: var(--verde-6); color: var(--carvao);
  box-shadow: 0 0 0 1px var(--verde-6), 0 0 38px var(--verde-glow);
}

/* sólido verde (comando) */
.nb-btn--verde { background: var(--verde-6); color: var(--carvao); font-weight: var(--w-semi); }
.nb-btn--verde:hover { background: var(--verde-7); box-shadow: 0 0 38px var(--verde-glow); }

/* fantasma sobre escuro */
.nb-btn--ghost {
  background: transparent; color: var(--branco);
  border: 1px solid var(--line-2);
}
.nb-btn--ghost:hover { border-color: var(--verde-6); color: var(--verde-text); box-shadow: 0 0 0 1px var(--verde-5); }

.bg-claro .nb-btn--ghost { color: var(--carvao); border-color: rgba(0,0,0,.16); }
.bg-claro .nb-btn--ghost:hover { border-color: var(--verde-8); color: var(--verde-8); }

.nb-btn--sm { padding: 9px 14px; font-size: var(--t-xs); }
.nb-btn .ar { transition: transform var(--m-enter) var(--ease-out); }
.nb-btn:hover .ar { transform: translateX(3px); }

/* ---------- DIVISÓRIAS / HAIRLINES ---------- */
.nb-rule { height: 1px; background: var(--line); border: 0; width: 100%; }
.bg-claro .nb-rule { background: rgba(0,0,0,.1); }

/* régua técnica com ticks (barra de calibração) */
.nb-tickline {
  height: 8px; width: 100%;
  background-image: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 100%);
  background-size: 12px 100%;
  border-bottom: 1px solid var(--line);
  opacity: .7;
}

/* ---------- CROP MARKS (marcas de registro) ---------- */
.nb-crop { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: .5; }
.nb-crop::before, .nb-crop::after { content: ""; position: absolute; background: var(--line-2); }
.nb-crop::before { width: 1px; height: 14px; }
.nb-crop::after  { height: 1px; width: 14px; }
.nb-crop--tl { top: -1px; left: -1px; } .nb-crop--tl::before { top: 0; } .nb-crop--tl::after { left: 0; top: 0; }
.nb-crop--tr { top: -1px; right: -1px; } .nb-crop--tr::before { top: 0; right: 0; } .nb-crop--tr::after { right: 0; top: 0; }
.nb-crop--bl { bottom: -1px; left: -1px; } .nb-crop--bl::before { bottom: 0; } .nb-crop--bl::after { bottom: 0; left: 0; }
.nb-crop--br { bottom: -1px; right: -1px; } .nb-crop--br::before { bottom: 0; right: 0; } .nb-crop--br::after { bottom: 0; right: 0; }

/* barra de calibração CMYK — assinatura sóbria, baixa dose */
.nb-cmyk { display: inline-flex; height: 10px; border-radius: 2px; overflow: hidden; }
.nb-cmyk i { width: 10px; height: 100%; display: block; }
.nb-cmyk i:nth-child(1){ background: #2BB6C9; } /* C */
.nb-cmyk i:nth-child(2){ background: #D14F9A; } /* M */
.nb-cmyk i:nth-child(3){ background: var(--amarelo); } /* Y */
.nb-cmyk i:nth-child(4){ background: #2A2A2E; } /* K */

/* ---------- CARDS ---------- */
.nb-card {
  position: relative; background: var(--carvao-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 36px);
  transition: border-color var(--m-enter) var(--ease), transform var(--m-enter) var(--ease-out), background var(--m-enter) var(--ease);
}
.nb-card--int:hover { border-color: var(--line-2); transform: translateY(-3px); }

/* ---------- KPI CARD ---------- */
.nb-kpi { display: flex; flex-direction: column; gap: var(--s-2); }
.nb-kpi__label { font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--grafite-aa); font-weight: var(--w-med); }
.nb-kpi__value { font-weight: var(--w-black); font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: .92; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.nb-kpi__value .u { color: var(--verde-text); }
.nb-kpi__sub { font-size: var(--t-sm); color: var(--grafite-2); font-weight: var(--w-light); }

/* ---------- PROGRESS ---------- */
.nb-progress { height: 3px; background: var(--carvao-3); border-radius: 99px; overflow: hidden; }
.nb-progress > i { display: block; height: 100%; background: var(--verde-6); border-radius: 99px; }

/* ---------- TAG / CHIP ---------- */
.nb-chip {
  display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap;
  font-size: var(--t-xs); font-weight: var(--w-med); letter-spacing: .02em;
  padding: 5px 11px; border-radius: 99px;
  border: 1px solid var(--line-2); color: var(--cinza);
}
.nb-chip--verde { border-color: var(--verde-5); color: var(--verde-text); background: var(--verde-1); }

/* ---------- MONO META ---------- */
.nb-mono { font-feature-settings: "tnum"; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* ---------- FRAME DE IMAGEM (moldura técnica + HUD) ---------- */
.nb-frame { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--carvao-3); }
.nb-frame__meta {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--cinza); letter-spacing: .04em;
  padding: 6px 10px; background: rgba(15,15,18,.62); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}

/* ---------- NB LINE — ícones ---------- */
.nbi { width: 18px; height: 18px; flex: none; display: inline-flex; color: inherit; }
.nbi svg { width: 100%; height: 100%; display: block; }
.nbi--sm { width: 15px; height: 15px; }
.nbi--lg { width: 24px; height: 24px; }
.nbi--xl { width: 30px; height: 30px; }
.nbi--verde { color: var(--verde-text); }
.nbi--grafite { color: var(--grafite); }

/* ícone em "selo" — sempre na própria linha, acima do eyebrow/label */
.nbi-badge { width: 30px; height: 30px; display: flex; align-items: center; justify-content: flex-start; color: var(--verde-text); flex: none; margin-bottom: var(--s-4); }
.nbi-badge .nbi { width: 28px; height: 28px; }
.bg-claro .nbi-badge { color: var(--verde-8); }

/* ============================================================
   POLISH — micro-interações governadas (dentro da marca)
   acessibilidade · profundidade · estados vivos
   ============================================================ */

/* ---------- FOCUS VISIBLE (teclado) — anel verde único ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--carvao), 0 0 0 4px var(--verde-6);
  border-radius: var(--r-sm);
}
.bg-claro a:focus-visible, .bg-claro button:focus-visible {
  box-shadow: 0 0 0 2px var(--cinza), 0 0 0 4px var(--verde-8);
}

/* ---------- BOTÕES: press com mais peso + sheen no sólido ---------- */
.nb-btn { position: relative; overflow: hidden; }
.nb-btn:active { transform: translateY(1px) scale(.985); }
/* varredura de brilho (assinatura, baixa dose) — só nos sólidos */
.nb-btn--primary::after, .nb-btn--verde::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(247,246,243,.28) 50%, transparent 62%);
  transform: translateX(-130%); transition: transform var(--m-slow) var(--ease-out);
}
.nb-btn--primary:hover::after, .nb-btn--verde:hover::after { transform: translateX(130%); }

/* ---------- EYEBROW: tick cresce ao revelar ---------- */
.nb-eyebrow::before { transition: width var(--m-slow) var(--ease-out); }
.nb-anim [data-reveal] .nb-eyebrow::before,
.nb-anim [data-reveal].nb-eyebrow::before { width: 0; }
.nb-anim [data-reveal].is-in .nb-eyebrow::before,
.nb-anim [data-reveal].is-in.nb-eyebrow::before { width: 22px; }

/* ---------- CARDS: lift com sombra + borda viva + brilho de topo ---------- */
.nb-card--int { transition: border-color var(--m-enter) var(--ease), transform var(--m-enter) var(--ease-out), box-shadow var(--m-enter) var(--ease), background var(--m-enter) var(--ease); }
.nb-card--int::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(247,246,243,.05), transparent 30%);
  opacity: 0; transition: opacity var(--m-enter) var(--ease);
}
.nb-card--int:hover {
  border-color: var(--line-2); transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
}
.nb-card--int:hover::before { opacity: 1; }

/* ---------- CHIP: hover ---------- */
.nb-chip { transition: border-color var(--m-hover) var(--ease), color var(--m-hover) var(--ease), background var(--m-hover) var(--ease); }
.nb-chip:hover { border-color: var(--grafite-2); color: var(--branco); }
.nb-chip--verde:hover { border-color: var(--verde-6); color: var(--verde-text); background: var(--verde-2); }

/* ---------- PROGRESS: preenche ao revelar ---------- */
.nb-progress > i { transition: width var(--m-slow) var(--ease-out); }

/* ---------- "AO VIVO": varredura sutil sobre superfície de dado ---------- */
.nb-live { position: relative; overflow: hidden; }
.nb-live::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(91,217,146,.06), transparent);
  animation: nb-scan 4.5s var(--ease) infinite; pointer-events: none;
}
@keyframes nb-scan { 0% { left: -40%; } 60%,100% { left: 120%; } }

/* ---------- SKELETON shimmer (carregamento) ---------- */
.nb-skel { background: linear-gradient(90deg, var(--carvao-3) 0%, var(--carvao-4) 50%, var(--carvao-3) 100%); background-size: 200% 100%; animation: nb-shimmer 1.4s linear infinite; border-radius: var(--r-sm); }
@keyframes nb-shimmer { to { background-position: -200% 0; } }

/* ---------- LINK underline sweep (texto in-flow) ---------- */
.nb-ul { background-image: linear-gradient(var(--verde-6), var(--verde-6)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--m-enter) var(--ease-out); }
.nb-ul:hover { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  .nb-btn--primary::after, .nb-btn--verde::after { display: none; }
  .nb-live::after, .nb-skel { animation: none; }
}

/* Skip navigation */
.sr-skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:999}
.sr-skip:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;padding:12px 20px;background:var(--verde-6);color:var(--carvao);font-weight:700;font-size:var(--t-sm);border-radius:4px;outline:2px solid var(--branco);z-index:9999}