/* =============================================================================
 * polish-2026.css — Camada de POLIMENTO + SISTEMA VISUAL LINEAR (carregada por
 * último em TODAS as páginas; portanto vence a cascata).
 *
 * DESIGN READ: produto trust-first REGULADO (assinatura eletrônica, validade
 * jurídica no BR) para signatários/jurídico/empresas.
 *   → Linguagem calma e precisa, estética "clean SaaS" estilo Linear (2026).
 *   → MOVIMENTO CONTIDO e proposital (nunca "gerado por IA"; corroi confiança).
 *   → Acessibilidade forte (WCAG AA), micro-interações refinadas.
 *
 * ESTRUTURA:
 *   PARTE A — QUALITY FLOOR (acessibilidade, movimento, átomos de interação).
 *   PARTE B — SISTEMA VISUAL LINEAR (paleta, tipografia, chrome, componentes).
 *
 * A Parte B reescreve, de cima para baixo, os estilos base de cada página
 * (navbar, footer, botões, cards, hero, formulários, pricing, status...) com
 * uma direção única e coesa — sem depender de reescrever o HTML de 44 páginas.
 * ========================================================================== */


/* ============================================================================
 * PARTE A — QUALITY FLOOR
 * ========================================================================== */

:root {
  /* Curvas de movimento (tokens fortes — não usar ease-in em UI). */
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* saída enfática/expressiva */
  --ds-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);  /* padrão bidirecional */
  --ds-ease-in-out: cubic-bezier(0.65, 0.0, 0.35, 1);
  /* Escala de duração curta (produto sério: rápido = confiável). */
  --ds-dur-fast: 120ms;
  --ds-dur-base: 200ms;
  --ds-dur-slow: 320ms;
  /* Anel de foco acessível (contraste alto, visível em fundo claro/escuro). */
  --ds-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
  --ds-focus-ring-dark: 0 0 0 2px #0b1220, 0 0 0 4px #60a5fa;

  /* ---- Sistema visual LINEAR (Parte B) ---- */
  /* Paleta neutra fria (zinc/slate — fria e estável, banco de confiança). */
  --ln-bg: #fafafa;
  --ln-bg-subtle: #f5f5f4;
  --ln-surface: #ffffff;
  --ln-surface-raised: #ffffff;
  --ln-border: #e7e5e4;
  --ln-border-strong: #d6d3d1;
  --ln-text: #18181b;
  --ln-text-soft: #52525b;
  --ln-text-faint: #9ca3af;
  /* Acento único: AZUL elétrico refinado (fidelidade à marca, não purple-IA). */
  --ln-accent: #2563eb;
  --ln-accent-strong: #1d4ed8;
  --ln-accent-soft: #eff6ff;
  --ln-accent-border: #bfdbfe;
  --ln-ring: rgba(37, 99, 235, 0.35);
  /* Sucesso / erro (dados de status — contidos, desaturados). */
  --ln-success: #059669;
  --ln-success-soft: #ecfdf5;
  --ln-error: #dc2626;
  --ln-error-soft: #fef2f2;
  --ln-warning: #d97706;
  --ln-warning-soft: #fffbeb;

  /* Tipografia */
  --ln-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ln-font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
  --ln-display: 3.25rem;
  --ln-display-mobile: 2.4rem;
  --ln-title: 2rem;
  --ln-h2: 1.6rem;

  /* Geometria Linear: cantos constantes e pequenos. */
  --ln-radius-sm: 6px;
  --ln-radius: 10px;
  --ln-radius-lg: 14px;
  --ln-radius-xl: 20px;

  /* Sombras suaves, tintadas ao neutro (sem preto puro). */
  --ln-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
  --ln-shadow: 0 1px 2px rgba(24, 24, 27, 0.05), 0 4px 16px rgba(24, 24, 27, 0.06);
  --ln-shadow-lg: 0 2px 4px rgba(24, 24, 27, 0.04), 0 16px 48px rgba(24, 24, 27, 0.10);

  /* Transições */
  --ln-t: all 180ms cubic-bezier(0.4, 0.0, 0.2, 1);

  --ln-container: 1200px;
  --ln-container-wide: 1400px;
}

[data-theme='dark'] {
  --ln-bg: #0c0c0f;
  --ln-bg-subtle: #131316;
  --ln-surface: #17171b;
  --ln-surface-raised: #1c1c21;
  --ln-border: #26262b;
  --ln-border-strong: #34343a;
  --ln-text: #f4f4f5;
  --ln-text-soft: #a1a1aa;
  --ln-text-faint: #6b6b72;
  --ln-accent: #5b8def;
  --ln-accent-strong: #7da4f5;
  --ln-accent-soft: #101728;
  --ln-accent-border: #233049;
  --ln-ring: rgba(91, 141, 239, 0.45);
  --ln-success: #34d399;
  --ln-success-soft: #06251a;
  --ln-error: #f87171;
  --ln-error-soft: #2a0f12;
  --ln-warning: #fbbf24;
  --ln-warning-soft: #2a2006;
  --ln-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ln-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
  --ln-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------------------
 * 1) Quality floor — FOCO DE TECLADO VISÍVEL (acessibilidade, WCAG 2.4.7).
 * ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.cp-mini-btn:focus-visible,
.nav-link:focus-visible,
.navbar-link:focus-visible,
.nav-item:focus-visible,
.sidebar-link:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible,
  .btn:focus-visible,
  .cp-mini-btn:focus-visible,
  .nav-link:focus-visible,
  .navbar-link:focus-visible,
  .nav-item:focus-visible,
  .sidebar-link:focus-visible {
    box-shadow: var(--ds-focus-ring-dark);
  }
}

/* ---------------------------------------------------------------------------
 * 2) Transições coerentes em elementos interativos — curva/duração como token.
 * ------------------------------------------------------------------------- */
.btn,
button,
[role="button"],
.card,
.cp-card,
.cp-step,
.doc-card,
.stat-card,
a.nav-link,
.navbar-link,
.nav-item,
.sidebar-link,
.tile,
.status-card {
  transition:
    background-color var(--ds-dur-base) var(--ds-ease-standard),
    border-color var(--ds-dur-base) var(--ds-ease-standard),
    color var(--ds-dur-base) var(--ds-ease-standard),
    box-shadow var(--ds-dur-base) var(--ds-ease-out),
    transform var(--ds-dur-fast) var(--ds-ease-out);
}

/* Micro-interação de PRESSÃO (feedback tátil sutil no clique). */
.btn:active,
button:active,
[role="button"]:active {
  transform: translateY(1px) scale(0.995);
}


/* ============================================================================
 * PARTE B — SISTEMA VISUAL LINEAR (2026)
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 3) Base global — core visual.
 * ------------------------------------------------------------------------- */
body {
  background-color: var(--ln-bg) !important;
  color: var(--ln-text) !important;
  font-family: var(--ln-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
}

::selection {
  background: var(--ln-accent);
  color: #fff;
}

[data-theme='dark'] body {
  color-scheme: dark;
}

/* Tipografia de exibição — controlada por peso/escala, não por "grito". */
h1, h2, h3, .hero-title, .hero h1, .section-title, .page-title,
.text-6xl, .text-5xl, .text-4xl {
  color: var(--ln-text);
  letter-spacing: -0.03em;
  line-height: 1.06;
  font-weight: 700;
  text-wrap: balance;
}
h2, .text-4xl, .text-3xl {
  letter-spacing: -0.025em;
}
h1 { font-size: var(--ln-display-mobile); }
h2 { font-size: var(--ln-title); }
p { color: var(--ln-text-soft); }

@media (min-width: 768px) {
  h1 { font-size: var(--ln-display); }
}

/* ---------------------------------------------------------------------------
 * 4) Barra de navegação — frosted, hairline, altura constante (Linear).
 *    Cobre o navbar clássico do design-system E o legado do index (#navbar).
 * ------------------------------------------------------------------------- */
.navbar,
#navbar,
.navbar-ultra {
  background: rgba(250, 250, 250, 0.82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ln-border) !important;
  box-shadow: none !important;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 200ms, border-color 200ms;
}
[data-theme='dark'] .navbar,
[data-theme='dark'] #navbar,
[data-theme='dark'] .navbar-ultra {
  background: rgba(12, 12, 15, 0.82) !important;
}

.navbar-container,
.navbar-container-ultra {
  height: 100%;
  max-width: var(--ln-container-wide);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Marca — símbolo próprio (SVG), substituindo o emoji 📄 cru do index.
   Um quadrado arredondado azul com um check branco: confiável, linear, legível. */
.ln-logo-mark {
  --ln-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='2' width='28' height='28' rx='8' fill='%232563eb'/%3E%3Cpath d='M10.5 16.5l4 4 7.5-8.5' stroke='white' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask: var(--ln-mark) no-repeat center / contain;
  mask: var(--ln-mark) no-repeat center / contain;
  background: currentColor;
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-block;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ln-text) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.navbar-logo,
.footer-logo,
.brand-logo,
.logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='2' width='28' height='28' rx='8' fill='%232563eb'/%3E%3Cpath d='M10.5 16.5l4 4 7.5-8.5' stroke='white' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
[data-theme='dark'] .navbar-logo,
[data-theme='dark'] .footer-logo {
  filter: brightness(1.05);
}

/* Marcas de texto (DocuSafe puro, sem elemento .navbar-logo) ganham um
   quadrado de acento à esquerda — consistência visual em todo o site. */
.navbar-brand:not(:has(.navbar-logo))::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--ln-accent);
  flex: none;
  display: inline-block;
}

/* Links de navegação */
.navbar .navbar-link,
.nav-link,
.navbar-link {
  color: var(--ln-text-soft) !important;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ln-radius-sm);
  text-decoration: none;
  transition: var(--ln-t);
  white-space: nowrap;
}
.navbar .navbar-link:hover,
.nav-link:hover,
.navbar-link:hover {
  color: var(--ln-text) !important;
  background: var(--ln-bg-subtle);
}
.navbar .navbar-link[aria-current],
.nav-link.active,
.navbar-link.active {
  color: var(--ln-text) !important;
}

/* ---------------------------------------------------------------------------
 * 5) Botões — Linear: superfície clara + border + hover sólido; um CTAs primário.
 * ------------------------------------------------------------------------- */
.btn,
a.btn,
[class*="btn-primary"],
[class*="btn-secondary"],
[class*="btn-outline"],
[class*="btn-ghost"],
[class*="btn-dark"],
.cta-button {
  font-family: var(--ln-font);
  font-weight: 600 !important;
  font-size: 0.925rem !important;
  line-height: 1;
  border-radius: var(--ln-radius-sm) !important;
  padding: 0.72rem 1.15rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
  white-space: nowrap;
}

.btn-primary,
a.btn-primary,
[class*="btn-primary"] {
  background: var(--ln-accent) !important;
  color: #fff !important;
  border-color: var(--ln-accent) !important;
}
.btn-primary:hover,
a.btn-primary:hover,
[class*="btn-primary"]:hover {
  background: var(--ln-accent-strong) !important;
  border-color: var(--ln-accent-strong) !important;
  box-shadow: 0 2px 8px var(--ln-ring);
  transform: translateY(-1px);
}

.btn-secondary,
a.btn-secondary,
[class*="btn-outline"],
[class*="btn-ghost"] {
  background: var(--ln-surface) !important;
  color: var(--ln-text) !important;
  border-color: var(--ln-border-strong) !important;
}
.btn-secondary:hover,
a.btn-secondary:hover,
[class*="btn-outline"]:hover,
[class*="btn-ghost"]:hover {
  background: var(--ln-bg-subtle) !important;
  border-color: var(--ln-border-strong) !important;
}

/* ---------------------------------------------------------------------------
 * 6) Cards & contêineres elevados.
 * ------------------------------------------------------------------------- */
.card,
.card-ultra,
.feature-card,
.feature-card-ultra,
.doc-card,
.cp-card,
.stat-card,
.status-card,
.tile,
.dashboard-mockup {
  background: var(--ln-surface) !important;
  border: 1px solid var(--ln-border) !important;
  border-radius: var(--ln-radius-lg) !important;
  box-shadow: var(--ln-shadow-sm) !important;
}
/* Sem cartões que "flutuam" com gradientes/glows (anti-slop). */
.card:hover,
.feature-card:hover,
.feature-card-ultra:hover,
.doc-card:hover,
.cp-card:hover,
.status-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ln-shadow) !important;
  border-color: var(--ln-border-strong) !important;
}

/* Section header — sem eyebrow sobrecarregado, headline limpa. */
.section-header,
.section-title,
.page-title {
  text-align: center;
}
.section-header h2,
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}

/* Badges de hero/section — pill calmo, não brilhante. */
.hero-badge,
.section-badge,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ln-surface) !important;
  color: var(--ln-text-soft) !important;
  border: 1px solid var(--ln-border) !important;
  border-radius: 999px !important;
  padding: 0.4rem 0.9rem !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  box-shadow: var(--ln-shadow-sm) !important;
}

/* ---------------------------------------------------------------------------
 * 7) Hero — layout limpo, split quando desktop, conteúdo respira.
 * ------------------------------------------------------------------------- */
.hero,
.hero-ultra,
#main-content {
  background: var(--ln-bg) !important;
  color: var(--ln-text);
}
.hero-container,
.hero-container-ultra {
  max-width: var(--ln-container-wide);
  margin-inline: auto;
}
.hero-title,
.hero-title-ultra,
.hero h1,
.hero-text-block h1 {
  font-size: clamp(2.3rem, 5.5vw, 4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
}
.hero-title .highlight,
.hero-title-highlight,
.hero-title-accent,
.hero .highlight {
  background: none;
  -webkit-text-fill-color: var(--ln-accent);
  color: var(--ln-accent);
  font-weight: 700;
}
.hero-subtitle,
.hero-subtitle-ultra,
.hero-text-block p {
  color: var(--ln-text-soft) !important;
  font-size: 1.12rem;
  line-height: 1.65;
  max-width: 60ch;
}

/* Lista de itens de confiança do hero (AES-256, LGPD...) — checkmarks limpos. */
.hero-trust-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--ln-text-soft);
  font-size: 0.9rem;
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * 8) Rodapés — unifica os vários modelos em um visual coeso.
 * ------------------------------------------------------------------------- */
.footer,
.main-footer,
footer.footer,
footer.glass-morphism {
  background: var(--ln-bg-subtle) !important;
  color: var(--ln-text-soft) !important;
  border-top: 1px solid var(--ln-border) !important;
}
.footer a,
.main-footer a,
footer a,
.footer-grid a,
.footer-column a {
  color: var(--ln-text-soft) !important;
  text-decoration: none;
  transition: color 150ms;
}
.footer a:hover,
.main-footer a:hover,
.footer-grid a:hover,
.footer-column a:hover {
  color: var(--ln-text) !important;
}
.footer h4,
.footer h5,
.main-footer h4,
.footer-column h4,
.footer-heading {
  color: var(--ln-text) !important;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
}
.footer-bottom {
  border-top: 1px solid var(--ln-border) !important;
  color: var(--ln-text-faint) !important;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
 * 9) Formulários / inputs — labels acima, foco claro, contraste AA.
 * ------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
select, textarea, .form-control, .input, .field {
  background: var(--ln-surface) !important;
  color: var(--ln-text) !important;
  border: 1px solid var(--ln-border-strong) !important;
  border-radius: var(--ln-radius-sm) !important;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  font-family: var(--ln-font);
  transition: border-color 160ms, box-shadow 160ms;
}
input:focus, select:focus, textarea:focus, .form-control:focus, .input:focus {
  outline: none;
  border-color: var(--ln-accent) !important;
  box-shadow: 0 0 0 3px var(--ln-ring);
}
input::placeholder, textarea::placeholder {
  color: var(--ln-text-faint);
}
label {
  color: var(--ln-text);
  font-weight: 500;
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------------------
 * 10) Status cards (página /status — testável: 3 cards + IDs de badge).
 * ------------------------------------------------------------------------- */
.status-card {
  background: var(--ln-surface) !important;
  border: 1px solid var(--ln-border) !important;
  border-radius: var(--ln-radius-lg) !important;
  box-shadow: var(--ln-shadow-sm) !important;
  padding: 1.5rem;
}
.status-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ln-text) !important;
  margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * 11) Pricing — cards com destaque só no plano destacado (não em todos).
 * ------------------------------------------------------------------------- */
.pricing-card,
.pricing-plan,
.price-card,
.plan-card {
  background: var(--ln-surface) !important;
  border: 1px solid var(--ln-border) !important;
  border-radius: var(--ln-radius-xl) !important;
  box-shadow: var(--ln-shadow-sm) !important;
}
.pricing-card.featured,
.pricing-card[class*="featured"],
.plan-card[class*="popular"],
.plan-card[class*="featured"] {
  border: 1.5px solid var(--ln-accent) !important;
  box-shadow: 0 0 0 1px var(--ln-accent-border), var(--ln-shadow-lg) !important;
}
.price-amount, .plan-price, .price-value {
  color: var(--ln-text) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ---------------------------------------------------------------------------
 * 12) Modais — contrato de fechamento preservado (.modal + .modal-close).
 * ------------------------------------------------------------------------- */
.modal {
  background: rgba(24, 24, 27, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal-content, .modal-box {
  background: var(--ln-surface) !important;
  border: 1px solid var(--ln-border) !important;
  border-radius: var(--ln-radius-lg) !important;
  box-shadow: var(--ln-shadow-lg) !important;
}

/* ---------------------------------------------------------------------------
 * 13) Sidebar do app — visual de linha de comando calmo.
 * ------------------------------------------------------------------------- */
.sidebar, .sidebar-nav, aside {
  background: var(--ln-bg-subtle) !important;
  border-right: 1px solid var(--ln-border) !important;
}
.sidebar-nav .nav-item,
.sidebar .nav-item,
.nav-item {
  color: var(--ln-text-soft) !important;
  border-radius: var(--ln-radius-sm);
  font-weight: 500;
}
.sidebar-nav .nav-item:hover,
.sidebar .nav-item:hover,
.nav-item:hover {
  background: var(--ln-surface) !important;
  color: var(--ln-text) !important;
}
.sidebar-nav .nav-item.active,
.sidebar .nav-item.active,
.nav-item.active {
  background: var(--ln-accent-soft) !important;
  color: var(--ln-accent) !important;
  font-weight: 600;
}
[data-theme='dark'] .sidebar-nav .nav-item.active,
[data-theme='dark'] .sidebar .nav-item.active {
  background: var(--ln-accent-soft) !important;
  color: var(--ln-accent) !important;
}

/* ---------------------------------------------------------------------------
 * 14) Tabelas — hairlines, sem zebra pesada.
 * ------------------------------------------------------------------------- */
table, .table {
  border-collapse: collapse;
  width: 100%;
}
.table th, table th {
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ln-text-faint);
  font-weight: 600;
  border-bottom: 1px solid var(--ln-border-strong);
  padding: 0.6rem 0.75rem;
}
.table td, table td {
  border-bottom: 1px solid var(--ln-border);
  padding: 0.75rem;
  color: var(--ln-text-soft);
  font-size: 0.93rem;
}

/* ---------------------------------------------------------------------------
 * 15) Motion: revelação discreta na entrada (opt-in .ln-reveal) e refine hover.
 * ------------------------------------------------------------------------- */
@keyframes lnReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.ln-reveal {
  animation: lnReveal 460ms var(--ds-ease-out) both;
}
.ln-reveal-1 { animation-delay: 60ms; }
.ln-reveal-2 { animation-delay: 120ms; }
.ln-reveal-3 { animation-delay: 180ms; }

/* Keep the original ds-reveal contract available. */
.ds-reveal { animation: lnReveal var(--ds-dur-slow) var(--ds-ease-out) both; }
.ds-reveal-1 { animation-delay: 40ms; }
.ds-reveal-2 { animation-delay: 90ms; }
.ds-reveal-3 { animation-delay: 140ms; }

/* ---------------------------------------------------------------------------
 * 16) reduced-motion — zera movimento; mantém cor instantânea (a11y).
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn, button, [role="button"], .card, .cp-card, .cp-step, .doc-card,
  .stat-card, .status-card, .navbar, #navbar, .nav-link, .navbar-link,
  .nav-item, .sidebar-link, .ds-reveal, .ln-reveal, .tile,
  .ln-reveal-1, .ln-reveal-2, .ln-reveal-3,
  .ds-reveal-1, .ds-reveal-2, .ds-reveal-3 {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn:active, button:active, [role="button"]:active,
  .card:hover, .cp-card:hover, .doc-card:hover,
  .status-card:hover, .tile:hover,
  .btn-primary:hover, .btn-secondary:hover {
    transform: none !important;
  }
  body { scroll-behavior: auto; }
}