/* ============================================================
   DETETIVE VIRTUAL — FOLHA PRINCIPAL DO SITE
   Direção "Perito Forense Premium". Toda cor, tamanho e espaço vem
   de css/tokens.css — não há valor solto aqui.

   Ordem das camadas (define a prioridade, não a especificidade):
     reset      → normalizações de elemento
     base       → tipografia e elementos nus
     layout     → contêineres e o esqueleto da página
     components → tudo que tem classe própria
     utilities  → helpers de uma linha, sempre vencem componentes
     print      → laudo impresso, vence todo o resto

   Responsividade é mobile-first: o padrão é a tela pequena e os
   `@media (min-width: …)` só ADICIONAM em telas maiores.
   Pontos de quebra: 30rem (480) · 48rem (768) · 64rem (1024)
   ============================================================ */

@layer reset, base, layout, components, utilities, print;

/* ══════════════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════════════ */
@layer reset {
  /* Sem reset global em `*`: ele não pode ser sobrescrito por
     camadas de menor prioridade nem por web components. */
  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
  }

  ul, ol {
    padding: 0;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  img, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    border: none;
    background: none;
  }

  table {
    border-collapse: collapse;
  }
}

/* ══════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════ */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    /* Fundo chapado de navy com uma leve elevação no topo. Sem grade,
       sem brilho ciano — a profundidade vem das superfícies. */
    background-color: var(--dv-bg);
    background-image: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--dv-surface) 55%, transparent),
      transparent 22rem
    );
    background-repeat: no-repeat;
    color: var(--dv-text);
    font-family: var(--dv-f-ui);
    font-size: var(--dv-t-base);
    line-height: var(--dv-lh-base);
    min-block-size: 100dvh;
    padding-block-end: var(--dv-s-12);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-family: var(--dv-f-display);
    font-weight: 600;
    line-height: var(--dv-lh-tight);
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: var(--dv-accent);
    text-underline-offset: 0.2em;
  }

  /* Anel de foco único para todo o site. Nunca removemos o indicador:
     trocamos por um mais legível sobre o navy. */
  :focus-visible {
    outline: var(--dv-ring-w) solid var(--dv-accent);
    outline-offset: var(--dv-ring-off);
    border-radius: var(--dv-r-sm);
  }

  ::selection {
    background: color-mix(in oklab, var(--dv-brand) 35%, transparent);
    color: var(--dv-ink);
  }

  /* Barras de rolagem internas seguem a paleta. */
  * {
    scrollbar-color: var(--dv-border-strong) transparent;
  }
}

/* ══════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════ */
@layer layout {
  .app-container {
    max-inline-size: var(--dv-w-page);
    margin-inline: auto;
    margin-block: var(--dv-s-5);
    padding-inline: var(--dv-pad-page);
  }

  /* ── Faixa superior de status ── */
  .top-bar {
    background: color-mix(in oklab, var(--dv-bg) 92%, black);
    border-block-end: 1px solid var(--dv-border);
    font-size: var(--dv-t-xs);
    padding: var(--dv-s-2) var(--dv-pad-page);
  }

  .top-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--dv-s-2) var(--dv-s-4);
    max-inline-size: var(--dv-w-page);
    margin-inline: auto;
    text-align: center;
  }

  @media (min-width: 48rem) {
    .top-container {
      justify-content: space-between;
      text-align: start;
    }
  }

  /* ── Cabeçalho ── */
  .main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--dv-s-3);
    margin-block-end: var(--dv-s-6);
  }

  .logo-area {
    display: flex;
    align-items: center;
    gap: var(--dv-s-3);
    min-inline-size: 0;
  }

  @media (min-width: 48rem) {
    .logo-area { gap: var(--dv-s-4); }
  }
}

/* ══════════════════════════════════════════════════════════
   COMPONENTES
   ══════════════════════════════════════════════════════════ */
@layer components {

  /* ─────────────────────────────────────────────
     Faixa de status e prova social
     ───────────────────────────────────────────── */
  .status-indicator {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    color: var(--dv-success);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
  }

  .pulse-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--dv-success);
    animation: pulse 2s var(--dv-ease) infinite;
  }

  @keyframes pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.35; }
    100% { opacity: 1; }
  }

  .live-counter span { color: var(--dv-text-muted); }
  .live-counter b {
    color: var(--dv-text-soft);
    font-variant-numeric: tabular-nums;
  }

  .ssl-badge {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    color: var(--dv-text-muted);
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wide);
  }



  /* ─────────────────────────────────────────────
     Identidade do cabeçalho
     ───────────────────────────────────────────── */
  .badge-icon {
    inline-size: 3rem;
    block-size: 3rem;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: var(--dv-accent);
    background: var(--dv-accent-quiet);
    border: 1px solid var(--dv-line-accent);
    border-radius: var(--dv-r);
  }

  @media (min-width: 48rem) {
    .badge-icon {
      inline-size: 3.5rem;
      block-size: 3.5rem;
      font-size: 1.6rem;
    }
  }

  .logo-titles h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dv-s-2);
    font-size: var(--dv-t-xl);
    letter-spacing: 0.01em;
    color: var(--dv-text);
  }

  /* Selo "PRO FORENSE": contorno discreto, sem gradiente vazado. */
  .tag-pro {
    font-family: var(--dv-f-ui);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    color: var(--dv-accent);
    background: var(--dv-accent-quiet);
    border: 1px solid var(--dv-line-accent);
    padding: 0.15rem 0.5rem;
    border-radius: var(--dv-r-sm);
    white-space: nowrap;
  }

  .logo-titles p {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-sm);
    margin-block-start: var(--dv-s-1);
  }

  .btn-history {
    padding: var(--dv-s-2) var(--dv-s-4);
    min-block-size: var(--dv-tap);
    color: var(--dv-text-soft);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r-sm);
    font-size: var(--dv-t-xs);
    font-weight: 600;
    letter-spacing: var(--dv-ls-wide);
    transition: background var(--dv-dur) var(--dv-ease),
                border-color var(--dv-dur) var(--dv-ease);
  }

  .btn-history i { margin-inline-end: var(--dv-s-2); }

  .btn-history:hover {
    background: var(--dv-surface-3);
    border-color: var(--dv-border-strong);
  }

  /* ─────────────────────────────────────────────
     Cards de seção
     ───────────────────────────────────────────── */
  .search-card,
  .preview-card,
  .report-card {
    background: var(--dv-card-bg);
    border: 1px solid var(--dv-card-border);
    border-radius: var(--dv-card-radius);
    padding: var(--dv-pad-card);
    margin-block-end: var(--dv-s-6);
    box-shadow: var(--dv-shadow);
  }

  /* ═══════════════════════════════════════════════════════════
     O DOCUMENTO

     A prévia e o dossiê não são telas do sistema: são o papel que
     o usuário veio buscar. Trocando a camada semântica de tokens
     aqui, todo componente lá dentro vira sua versão sobre papel —
     é o que a tokenização das fases anteriores comprou.
     ═══════════════════════════════════════════════════════════ */
  .preview-card,
  .report-section > .report-card {
    color-scheme: light;

    --dv-surface:       var(--dv-paper);
    --dv-surface-2:     var(--dv-paper-2);
    --dv-surface-3:     var(--dv-paper-3);
    --dv-border:        var(--dv-paper-rule);
    --dv-border-strong: color-mix(in oklab, var(--dv-paper-rule) 70%, black);

    --dv-text:       var(--dv-paper-ink);
    --dv-text-soft:  var(--dv-paper-ink-2);
    --dv-text-muted: var(--dv-paper-muted);

    --dv-accent:       var(--dv-paper-brand);
    --dv-accent-hover: color-mix(in oklab, var(--dv-paper-brand) 80%, black);
    --dv-accent-quiet: color-mix(in oklab, var(--dv-paper-brand) 9%, var(--dv-paper));
    /* As semânticas de papel são escuras, então o texto sobre elas é claro. */
    --dv-text-on-brand:   var(--dv-paper);
    --dv-text-on-success: var(--dv-paper);
    --dv-text-on-amber:   var(--dv-paper);

    --dv-amber:   var(--dv-paper-amber);
    --dv-success: var(--dv-paper-success);
    --dv-warning: var(--dv-paper-amber);
    --dv-danger:  var(--dv-paper-danger);

    --dv-fill-subtle:  color-mix(in oklab, var(--dv-paper-ink) 4%, transparent);
    --dv-fill-quiet:   color-mix(in oklab, var(--dv-paper-ink) 7%, transparent);
    --dv-fill-accent:  color-mix(in oklab, var(--dv-paper-brand) 10%, transparent);
    --dv-fill-success: color-mix(in oklab, var(--dv-paper-success) 10%, transparent);
    --dv-fill-amber:   color-mix(in oklab, var(--dv-paper-amber) 12%, transparent);
    --dv-fill-danger:  color-mix(in oklab, var(--dv-paper-danger) 10%, transparent);

    --dv-line-subtle: color-mix(in oklab, var(--dv-paper-ink) 12%, transparent);
    --dv-line-accent: color-mix(in oklab, var(--dv-paper-brand) 45%, transparent);
    --dv-line-amber:  color-mix(in oklab, var(--dv-paper-amber) 45%, transparent);
    --dv-line-danger: color-mix(in oklab, var(--dv-paper-danger) 45%, transparent);

    --dv-field-bg:     var(--dv-paper-2);
    --dv-field-border: var(--dv-paper-rule);

    background: var(--dv-paper);
    color: var(--dv-paper-ink);
    border: none;
    border-radius: 2px;
    /* A folha projeta sombra sobre o navy — é uma folha, não um painel. */
    box-shadow: 0 1px 0 color-mix(in oklab, var(--dv-paper-ink) 25%, transparent),
                0 18px 44px rgb(0 0 0 / 0.5);
  }

  /* Margem esquerda do formulário oficial: a régua que diz "isto é um
     documento em branco preenchido", não uma página web. */
  .preview-card::before,
  .report-section > .report-card::before {
    content: '';
    position: absolute;
    /* Começa e termina depois da curva: sem isso a régua escapava pelo
       canto e era preciso `overflow: hidden`, que matava o sticky do
       índice do relatório. */
    inset-block: var(--dv-card-radius);
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--dv-brand-deep);
  }

  .preview-card,
  .report-section > .report-card { position: relative; }

  /* Cabeçalho de card com a estética de laudo: serifado, régua embaixo. */
  /* O hero é quem fala alto; o cabeçalho do card apenas organiza. */
  .card-header {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    color: var(--dv-text-soft);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-md);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
    padding-block-end: var(--dv-s-3);
    margin-block-end: var(--dv-s-3);
    border-block-end: 1px solid var(--dv-border);
  }

  .card-header i { color: var(--dv-accent); }

  .search-desc {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-sm);
    margin-block-end: var(--dv-s-5);
  }



  /* ─────────────────────────────────────────────
     Avisos da interface (no lugar do alert nativo)
     ───────────────────────────────────────────── */
  #avisos {
    position: fixed;
    inset-block-start: var(--dv-s-3);
    inset-inline: var(--dv-s-3);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-2);
    pointer-events: none;
  }

  @media (min-width: 48rem) {
    #avisos {
      inset-inline: auto var(--dv-s-6);
      inset-block-start: var(--dv-s-6);
      max-inline-size: 26rem;
    }
  }

  .aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--dv-s-3);
    padding: var(--dv-s-3) var(--dv-s-4);
    pointer-events: auto;
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border-strong);
    border-inline-start: 3px solid var(--dv-accent);
    border-radius: var(--dv-r-sm);
    box-shadow: var(--dv-shadow);
    color: var(--dv-text-soft);
    font-size: var(--dv-t-sm);
    animation: avisoEntra var(--dv-dur) var(--dv-ease);
  }

  .aviso-erro { border-inline-start-color: var(--dv-danger); }
  .aviso-ok { border-inline-start-color: var(--dv-success); }
  .aviso-txt { flex: 1; }

  .aviso-x {
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-muted);
    font-size: 1.1rem;
    line-height: 1;
  }

  .aviso-x:hover { color: var(--dv-text); }
  .aviso.saindo { animation: avisoSai 0.2s var(--dv-ease) forwards; }

  @keyframes avisoEntra {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: none; }
  }

  @keyframes avisoSai {
    to { opacity: 0; transform: translateY(-0.5rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    .aviso, .aviso.saindo { animation: none; }
  }

  /* Erro de preenchimento, colado ao campo que o causou. */
  .input-group.com-erro input {
    border-color: var(--dv-danger);
  }

  .input-group.com-erro input:focus {
    outline-color: color-mix(in oklab, var(--dv-danger) 55%, transparent);
  }

  .campo-erro {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    margin-block-start: var(--dv-s-1);
    color: var(--dv-danger);
    font-size: var(--dv-t-xs);
  }

  .campo-erro::before {
    content: '!';
    inline-size: 1rem;
    block-size: 1rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dv-danger);
    color: var(--dv-bg);
    font-weight: 700;
    font-size: 0.7rem;
  }

  /* ─────────────────────────────────────────────
     Hero — a folha tarjada é a tese do produto
     ───────────────────────────────────────────── */
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dv-s-6);
    align-items: center;
    margin-block-end: var(--dv-s-8);
  }

  @media (min-width: 64rem) {
    .hero {
      grid-template-columns: 1.05fr 0.95fr;
      gap: var(--dv-s-10);
      margin-block-end: var(--dv-s-10);
    }
  }

  .hero-eyebrow {
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wider);
    text-transform: uppercase;
    color: var(--dv-accent);
    margin-block-end: var(--dv-s-3);
  }

  .hero-titulo {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-3xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--dv-text);
  }

  .hero-sub {
    margin-block-start: var(--dv-s-4);
    max-inline-size: 46ch;
    color: var(--dv-text-soft);
    font-size: var(--dv-t-md);
  }

  /* O espécime: papel de verdade, tarja de verdade — os mesmos
     componentes do laudo, em miniatura. */
  .espécime { margin: 0; }

  .esp-folha {
    position: relative;
    overflow: hidden;
    padding: var(--dv-s-5);
    background: var(--dv-paper);
    color: var(--dv-paper-ink);
    border-radius: 2px;
    box-shadow: 0 1px 0 color-mix(in oklab, var(--dv-paper-ink) 25%, transparent),
                0 18px 44px rgb(0 0 0 / 0.5);
    /* leve inclinação: é uma folha sobre a mesa, não um painel */
    rotate: -0.6deg;
  }

  .esp-folha::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--dv-brand-deep);
  }

  .esp-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--dv-s-2);
    padding-block-end: var(--dv-s-3);
    margin-block-end: var(--dv-s-3);
    border-block-end: 3px double color-mix(in oklab, var(--dv-paper-rule) 80%, black);
  }

  .esp-titulo {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-sm);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
  }

  .esp-meta {
    margin-inline-start: auto;
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    color: var(--dv-paper-muted);
  }

  .esp-linha {
    display: grid;
    grid-template-columns: minmax(4.5rem, 6rem) 1fr;
    align-items: center;
    gap: var(--dv-s-4);
    padding-block: var(--dv-s-2);
    border-block-end: 1px solid var(--dv-paper-rule);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-xs);
  }

  .esp-k {
    color: var(--dv-paper-muted);
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
  }

  .esp-tarja {
    display: block;
    block-size: 0.95rem;
    inline-size: var(--w, 60%);
    background: var(--dv-redact);
    border-radius: 1px;
  }

  .esp-rodape {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    margin-block-start: var(--dv-s-4);
    font-size: var(--dv-t-2xs);
    color: var(--dv-paper-muted);
  }

  .espécime figcaption {
    margin-block-start: var(--dv-s-4);
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
    text-align: center;
  }

  @media (min-width: 64rem) {
    .espécime figcaption { text-align: start; }
  }

  @media (prefers-reduced-motion: reduce) {
    .esp-folha { rotate: none; }
  }

  /* ─────────────────────────────────────────────
     Abas de busca
     ───────────────────────────────────────────── */
  /* Seis rótulos curtos cabem em duas colunas até no celular menor;
     empilhados, comiam a primeira tela inteira antes do campo. */
  .search-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dv-s-2);
    margin-block-end: var(--dv-s-5);
  }

  /* 3+3 fecha a grade; auto-fit deixava 4+2 desalinhado. */
  @media (min-width: 48rem) {
    .search-tabs { grid-template-columns: repeat(3, 1fr); }
  }

  .search-tab {
    padding: var(--dv-s-3);
    min-block-size: var(--dv-tap);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-muted);
    font-weight: 600;
    font-size: var(--dv-t-xs);
    letter-spacing: var(--dv-ls-wide);
    text-align: start;
    transition: color var(--dv-dur) var(--dv-ease),
                border-color var(--dv-dur) var(--dv-ease),
                background var(--dv-dur) var(--dv-ease);
  }

  .search-tab i { margin-inline-end: var(--dv-s-2); }

  .search-tab:hover:not(.active) {
    color: var(--dv-text-soft);
    border-color: var(--dv-border-strong);
  }

  .search-tab.active {
    background: var(--dv-accent-quiet);
    border-color: var(--dv-accent);
    color: var(--dv-accent);
  }

  /* Badge "Em breve" dentro das tabs */
  .tab-badge-soon {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: hsl(35 90% 50% / .2);
    color: hsl(35 90% 65%);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    margin-inline-start: 0.3em;
    vertical-align: middle;
    line-height: 1.5;
  }

  /* Botão de submit desabilitado (tabs "Em breve") */
  .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
  }

  /* ─────────────────────────────────────────────
     Formulário de busca
     ───────────────────────────────────────────── */
  .search-form {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-4);
  }

  .input-group {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-2);
  }

  .input-group label {
    font-size: var(--dv-t-xs);
    font-weight: 600;
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
    color: var(--dv-text-muted);
  }

  .input-group input {
    background: var(--dv-field-bg);
    border: 1px solid var(--dv-field-border);
    border-radius: var(--dv-r-sm);
    padding: var(--dv-s-3) var(--dv-s-4);
    min-block-size: var(--dv-tap);
    color: var(--dv-text);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-md);
    transition: border-color var(--dv-dur) var(--dv-ease);
  }

  .input-group input::placeholder { color: var(--dv-text-muted); }

  .input-group input:focus {
    border-color: var(--dv-accent);
    outline: var(--dv-ring-w) solid var(--dv-ring);
    outline-offset: 0;
  }

  /* ─────────────────────────────────────────────
     Botões
     ───────────────────────────────────────────── */
  .btn-primary,
  .btn-pulse-green,
  .btn-primary-discount,
  .btn-primary-upsell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dv-s-3);
    inline-size: 100%;
    min-block-size: var(--dv-tap);
    padding: var(--dv-s-4) var(--dv-s-6);
    border-radius: var(--dv-r-sm);
    font-family: var(--dv-f-ui);
    font-size: var(--dv-t-md);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--dv-text-on-brand);
    background: var(--dv-accent);
    box-shadow: var(--dv-shadow-sm);
    transition: filter var(--dv-dur) var(--dv-ease),
                transform var(--dv-dur) var(--dv-ease);
  }

  .btn-primary:hover,
  .btn-pulse-green:hover,
  .btn-primary-discount:hover,
  .btn-primary-upsell:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }

  /* Ação de compra: verde semântico, sem brilho. */
  .btn-pulse-green {
    background: var(--dv-success);
    color: var(--dv-text-on-success);
    font-size: var(--dv-t-lg);
    padding-block: var(--dv-s-5);
  }

  /* Oferta com urgência. */
  .btn-primary-discount {
    background: var(--dv-danger);
    color: #FFFFFF;
  }

  /* Upgrade / upsell premium. */
  .btn-primary-upsell {
    background: var(--dv-amber);
    color: var(--dv-text-on-amber);
  }

  .btn-print {
    display: inline-flex;
    align-items: center;
    gap: var(--dv-s-2);
    padding: var(--dv-s-2) var(--dv-s-4);
    min-block-size: var(--dv-tap);
    background: transparent;
    border: 1px solid var(--dv-border-strong);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-soft);
    font-size: var(--dv-t-xs);
    font-weight: 600;
    letter-spacing: var(--dv-ls-wide);
    transition: background var(--dv-dur) var(--dv-ease),
                color var(--dv-dur) var(--dv-ease);
  }

  .btn-print:hover {
    background: var(--dv-accent);
    border-color: var(--dv-accent);
    color: var(--dv-text-on-brand);
  }

  .trust-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dv-s-3) var(--dv-s-5);
    margin-block-start: var(--dv-s-5);
  }

  .trust-item {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
  }

  .trust-item i { color: var(--dv-success); }

  /* ─────────────────────────────────────────────
     Varredura (radar)
     ───────────────────────────────────────────── */
  .radar-section {
    text-align: center;
    padding: var(--dv-s-10) var(--dv-s-4);
  }

  .radar-box {
    inline-size: clamp(7rem, 30vw, 10rem);
    aspect-ratio: 1;
    margin-inline: auto;
    margin-block-end: var(--dv-s-6);
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--dv-line-accent);
    background: radial-gradient(
      circle,
      color-mix(in oklab, var(--dv-brand) 10%, transparent) 0%,
      var(--dv-surface) 100%
    );
  }

  .radar-sweep {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 50%;
    block-size: 50%;
    background: linear-gradient(
      45deg,
      color-mix(in oklab, var(--dv-brand) 45%, transparent) 0%,
      transparent 70%
    );
    transform-origin: 0 0;
    animation: radarSpin 2.4s linear infinite;
  }

  @keyframes radarSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .radar-grid {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, transparent 30%, var(--dv-line-accent) 31%, transparent 32%),
      radial-gradient(circle at 50% 50%, transparent 60%, var(--dv-line-accent) 61%, transparent 62%);
  }

  .radar-dot {
    position: absolute;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: 50%;
    background: var(--dv-success);
  }

  .dot1 { inset-block-start: 30%; inset-inline-start: 40%; }
  .dot2 { inset-block-start: 65%; inset-inline-start: 70%; }
  .dot3 { inset-block-start: 50%; inset-inline-start: 25%; }

  .scanning-info h3 {
    font-size: var(--dv-t-lg);
    color: var(--dv-text);
    margin-block-end: var(--dv-s-3);
  }

  .progress-bar-bg {
    inline-size: 100%;
    max-inline-size: 25rem;
    block-size: 0.375rem;
    margin-inline: auto;
    margin-block-end: var(--dv-s-3);
    background: var(--dv-surface-3);
    border-radius: var(--dv-r-pill);
    overflow: hidden;
  }

  .progress-bar-fill {
    inline-size: 0;
    block-size: 100%;
    background: var(--dv-accent);
    transition: inline-size var(--dv-dur-slow) var(--dv-ease);
  }

  .scan-subtext {
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
    font-family: var(--dv-f-mono);
  }

  /* ─────────────────────────────────────────────
     Prévia — alvo localizado
     ───────────────────────────────────────────── */
  .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dv-s-2);
    margin-block-end: var(--dv-s-5);
  }

  .target-found-tag {
    padding: var(--dv-s-1) var(--dv-s-3);
    background: var(--dv-fill-success);
    border: 1px solid color-mix(in oklab, var(--dv-success) 45%, transparent);
    border-radius: var(--dv-r-pill);
    color: var(--dv-success);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
  }

  .security-level {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-2xs);
    font-weight: 600;
    letter-spacing: var(--dv-ls-wide);
  }

  .target-summary-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dv-s-4);
    padding: var(--dv-s-5);
    margin-block-end: var(--dv-s-6);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r);
  }

  @media (min-width: 30rem) {
    .target-summary-box {
      flex-direction: row;
      align-items: center;
      text-align: start;
      gap: var(--dv-s-5);
    }
  }

  .summary-avatar {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dv-accent-quiet);
    border: 1px solid var(--dv-line-accent);
    color: var(--dv-accent);
    font-size: 1.5rem;
  }

  @media (min-width: 48rem) {
    .summary-avatar {
      inline-size: 4.375rem;
      block-size: 4.375rem;
      font-size: 2rem;
    }
  }

  .summary-details { flex: 1; min-inline-size: 0; }

  .detail-label {
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
    letter-spacing: var(--dv-ls-wider);
    text-transform: uppercase;
  }

  .detail-value {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-xl);
    line-height: var(--dv-lh-tight);
    color: var(--dv-text);
    margin-block-end: var(--dv-s-2);
    overflow-wrap: break-word;
  }

  .masked-text {
    font-family: var(--dv-f-mono);
    letter-spacing: 0.12em;
    color: var(--dv-accent);
  }

  .summary-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dv-s-2) var(--dv-s-5);
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
  }

  @media (min-width: 30rem) {
    .summary-grid { justify-content: flex-start; }
  }

  .summary-grid b { color: var(--dv-text-soft); }

  .locked-title {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-lg);
    color: var(--dv-text);
    margin-block-end: var(--dv-s-4);
  }

  .locked-title i { color: var(--dv-amber); }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dv-s-3);
    margin-block-end: var(--dv-s-6);
  }

  @media (min-width: 30rem) {
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  }

  .stat-card {
    padding: var(--dv-s-4);
    text-align: center;
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r);
  }

  .stat-card i {
    font-size: 1.2rem;
    color: var(--dv-accent);
    margin-block-end: var(--dv-s-2);
  }

  .stat-num {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dv-text);
  }

  .stat-lbl {
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
  }

  .cta-unlock-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dv-s-4);
    padding: var(--dv-s-6);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-line-accent);
    border-radius: var(--dv-r-lg);
  }

  .cta-text h3 {
    font-size: var(--dv-t-lg);
    color: var(--dv-text);
  }

  .cta-text p {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-sm);
    margin-block-start: var(--dv-s-1);
  }

  /* ─────────────────────────────────────────────
     Menu de itens bloqueados (o "cardápio" da prévia)
     ───────────────────────────────────────────── */
  .locked-menu-head {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-1);
    margin-block-end: var(--dv-s-4);
  }

  .locked-menu-title {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-lg);
    font-weight: 600;
    color: var(--dv-text);
  }

  .locked-menu-title i { color: var(--dv-amber); }

  .locked-menu-head > span {
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
  }

  .locked-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dv-s-3);
    margin-block-end: var(--dv-s-5);
  }

  @media (min-width: 30rem) {
    .locked-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  }

  .locked-item {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-2);
    padding: var(--dv-s-4);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r);
    transition: border-color var(--dv-dur) var(--dv-ease),
                transform var(--dv-dur) var(--dv-ease);
  }

  .locked-item:hover {
    border-color: var(--dv-line-amber);
    transform: translateY(-2px);
  }

  .li-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dv-s-2);
  }

  .li-icon {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--dv-r-sm);
    background: var(--dv-fill-amber);
    color: var(--dv-amber);
    font-size: 0.9rem;
  }

  .li-price {
    padding: 0.15rem var(--dv-s-3);
    background: var(--dv-fill-amber);
    border: 1px solid var(--dv-line-amber);
    border-radius: var(--dv-r-pill);
    color: var(--dv-amber);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    white-space: nowrap;
  }

  .li-name {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--dv-text);
  }

  .li-desc {
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
    line-height: var(--dv-lh-snug);
  }

  .li-sample {
    position: relative;
    padding: var(--dv-s-3);
    background: var(--dv-bg);
    border: 1px dashed var(--dv-border);
    border-radius: var(--dv-r-sm);
    overflow: hidden;
  }

  /* A amostra da prévia usa a mesma tarja do dossiê: é a mesma
     linguagem antes e depois do pagamento. */
  .locked-blur span {
    display: block;
    user-select: none;
    pointer-events: none;
    background: var(--dv-redact);
    color: transparent;
    border-radius: 1px;
    padding-block: 0.2rem;
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-xs);
    white-space: nowrap;
    overflow: hidden;
  }

  .li-lock {
    position: absolute;
    inset-inline-end: var(--dv-s-2);
    inset-block-start: 50%;
    transform: translateY(-50%);
    padding: var(--dv-s-2);
    border-radius: 50%;
    background: var(--dv-surface-3);
    color: var(--dv-amber);
    font-size: 0.85rem;
  }

  .li-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dv-s-2);
    margin-block-start: auto;
  }

  .li-qtd {
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
  }

  .li-btn {
    padding: var(--dv-s-2) var(--dv-s-3);
    min-block-size: 2rem;
    background: var(--dv-fill-accent);
    border: 1px solid var(--dv-line-accent);
    border-radius: var(--dv-r-sm);
    color: var(--dv-accent);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    white-space: nowrap;
    transition: background var(--dv-dur) var(--dv-ease),
                color var(--dv-dur) var(--dv-ease);
  }

  .li-btn:hover {
    background: var(--dv-accent);
    color: var(--dv-text-on-brand);
  }

  /* ─────────────────────────────────────────────
     Banner "liberar tudo"
     ───────────────────────────────────────────── */
  .unlock-all-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--dv-s-4);
    padding: var(--dv-s-5);
    margin-block-end: var(--dv-s-5);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-line-amber);
    border-radius: var(--dv-r-lg);
  }

  @media (min-width: 48rem) {
    .unlock-all-box {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .unlock-all-info {
    display: flex;
    align-items: center;
    gap: var(--dv-s-3);
  }

  .unlock-all-info > i {
    font-size: 1.6rem;
    color: var(--dv-amber);
  }

  .unlock-all-info b {
    display: block;
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-md);
    color: var(--dv-text);
    margin-block-end: var(--dv-s-1);
  }

  .unlock-all-info span {
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
  }

  .basic-modules-block {
    margin-block-start: var(--dv-s-6);
    padding-block-start: var(--dv-s-5);
    border-block-start: 1px solid var(--dv-border);
  }

  .basic-modules-sub {
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
    margin: var(--dv-s-2) 0 var(--dv-s-4);
  }

  /* ─────────────────────────────────────────────
     Dossiê — cabeçalho e blocos
     ───────────────────────────────────────────── */
  /* ── Cabeçalho do documento ──
     Regra dupla no rodapé, como timbre de laudo: a folha se apresenta
     antes de dizer qualquer coisa. */
  .report-top-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--dv-s-4);
    padding-block-end: var(--dv-s-3);
    margin-block-end: var(--dv-s-6);
    border-block-end: 3px double var(--dv-border-strong);
  }

  .report-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dv-s-2);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-md);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
    color: var(--dv-text);
  }

  .report-badge i { color: var(--dv-accent); }

  /* Linha de identificação da folha: protocolo, emissão, escopo.
     Preenchida pelo app.js quando o laudo é montado. */
  .doc-meta {
    flex-basis: 100%;
    order: 3;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dv-s-1) var(--dv-s-5);
    margin-block-start: var(--dv-s-1);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
  }

  .doc-meta b {
    color: var(--dv-text-soft);
    font-weight: 500;
  }

  .doc-meta .doc-classif {
    color: var(--dv-danger);
    font-weight: 600;
    letter-spacing: var(--dv-ls-wide);
  }

  .badge-refreshed {
    display: inline-flex;
    align-items: center;
    gap: var(--dv-s-1);
    padding: 0.15rem var(--dv-s-3);
    border: 1px solid var(--dv-line-accent);
    border-radius: var(--dv-r-pill);
    color: var(--dv-accent);
    font-family: var(--dv-f-ui);
    font-size: var(--dv-t-2xs);
    font-weight: 600;
    letter-spacing: var(--dv-ls-wide);
  }

  .dossier-block { margin-block-end: var(--dv-s-8); }

  .dossier-block h3 {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    font-size: var(--dv-t-lg);
    color: var(--dv-text);
    margin-block-end: var(--dv-s-4);
  }

  .dossier-block h3 i { color: var(--dv-accent); }

  .target-profile-card {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-5);
    padding: var(--dv-s-5);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r);
  }

  @media (min-width: 48rem) {
    .target-profile-card { flex-direction: row; }
  }

  .profile-photo-container {
    inline-size: 100%;
    max-inline-size: 10rem;
    margin-inline: auto;
    text-align: center;
  }

  @media (min-width: 48rem) {
    .profile-photo-container {
      inline-size: 10rem;
      flex: none;
      margin-inline: 0;
    }
  }

  .profile-photo-container img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--dv-r-sm);
    border: 1px solid var(--dv-border-strong);
  }

  .photo-badge {
    display: inline-block;
    margin-block-start: var(--dv-s-2);
    padding: 0.1rem var(--dv-s-2);
    background: var(--dv-accent-quiet);
    border: 1px solid var(--dv-line-accent);
    border-radius: var(--dv-r-sm);
    color: var(--dv-accent);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
  }

  .profile-info-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dv-s-3) var(--dv-s-4);
    min-inline-size: 0;
  }

  @media (min-width: 30rem) {
    .profile-info-grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  }

  /* Par rótulo/valor — a unidade básica do laudo. */
  .info-field {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-inline-size: 0;
  }

  .info-field.wide { grid-column: 1 / -1; }

  .info-field label {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-2xs);
    font-weight: 600;
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
  }

  .info-field span {
    color: var(--dv-text);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-sm);
    overflow-wrap: break-word;
  }

  .cnh-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dv-s-3) var(--dv-s-4);
    padding: var(--dv-s-4) var(--dv-s-5);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-line-amber);
    border-radius: var(--dv-r);
  }

  @media (min-width: 30rem) {
    .cnh-card { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  }

  /* ── BNMP: nada consta (neutro) vs. mandado localizado (alerta) ── */
  .bnmp-card {
    display: flex;
    align-items: center;
    gap: var(--dv-s-4);
    padding: var(--dv-s-5);
    background: var(--dv-fill-success);
    border: 1px solid color-mix(in oklab, var(--dv-success) 40%, transparent);
    border-radius: var(--dv-r);
  }

  .bnmp-card.alert {
    background: var(--dv-fill-danger);
    border-color: var(--dv-line-danger);
  }

  .bnmp-icon {
    font-size: 1.8rem;
    flex: none;
    color: var(--dv-success);
  }

  .bnmp-card.alert .bnmp-icon { color: var(--dv-danger); }

  .bnmp-details b {
    color: var(--dv-text);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-md);
  }

  .bnmp-details p {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-xs);
    margin-block-start: var(--dv-s-1);
  }

  /* ─────────────────────────────────────────────
     Tabelas de dados
     ───────────────────────────────────────────── */
  .table-responsive {
    overflow-x: auto;
    /* Deixa claro que há mais conteúdo à direita no celular. */
    border-radius: var(--dv-r-sm);
    scrollbar-width: thin;
  }

  .data-table {
    inline-size: 100%;
    min-inline-size: 32rem;
    font-size: var(--dv-t-sm);
  }

  .data-table th {
    padding: var(--dv-s-3) var(--dv-s-4);
    background: var(--dv-surface-3);
    color: var(--dv-text-soft);
    text-align: start;
    font-family: var(--dv-f-ui);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .data-table td {
    padding: var(--dv-s-3) var(--dv-s-4);
    border-block-end: 1px solid var(--dv-border);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-xs);
    color: var(--dv-text-soft);
    vertical-align: top;
  }

  /* ── Tabela como lista de cartões (até 48rem) ──
     Em 390px a caixa de conteúdo tem 288px e as tabelas do laudo medem de
     512 a 747px: eram 18 gestos laterais independentes para ler o documento
     recém-comprado, com o dado mais valioso na coluna cortada.
     Cada linha vira um cartão e cada célula ganha o nome da sua coluna, que
     o JS carimba em data-rotulo a partir do <thead> (ver rotulaCelulas). */
  @media (max-width: 47.99rem) {
    .data-table {
      min-inline-size: 0;
      display: block;
    }

    .data-table thead {
      /* Escondido do olho, não do leitor de tela: o rótulo de cada célula
         vem do próprio th, então o cabeçalho continua sendo a fonte. */
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .data-table tbody { display: block; }

    .data-table tbody tr {
      display: grid;
      gap: 0.15rem;
      padding: var(--dv-s-3) var(--dv-s-4);
      margin-block-end: var(--dv-s-2);
      background: var(--dv-surface-2);
      border: 1px solid var(--dv-border);
      border-radius: var(--dv-r);
    }

    .data-table tbody tr:last-child { margin-block-end: 0; }

    .data-table td {
      display: grid;
      grid-template-columns: minmax(6.5rem, 38%) 1fr;
      gap: var(--dv-s-3);
      align-items: baseline;
      padding: 0.1rem 0;
      border-block-end: 0;
      overflow-wrap: anywhere;
    }

    .data-table td[data-rotulo]::before {
      content: attr(data-rotulo);
      font-family: var(--dv-f-ui);
      font-size: var(--dv-t-2xs);
      font-weight: 700;
      letter-spacing: var(--dv-ls-wide);
      text-transform: uppercase;
      color: var(--dv-text-muted);
    }

    /* Célula com colspan é linha de "nenhum registro": ocupa tudo. */
    .data-table td[colspan] {
      grid-template-columns: 1fr;
      text-align: center;
      color: var(--dv-text-muted);
    }

    /* Sem cabeçalho visível, a caixa não precisa mais rolar de lado. */
    .table-responsive { overflow-x: visible; }
  }

  .badge-leak-pwd {
    padding: 0.1rem var(--dv-s-2);
    background: var(--dv-fill-danger);
    border: 1px solid var(--dv-line-danger);
    border-radius: var(--dv-r-sm);
    color: var(--dv-danger);
    font-family: var(--dv-f-mono);
    font-weight: 700;
  }

  /* ─────────────────────────────────────────────
     Grades de cards (veículos, parentes, endereços)
     ───────────────────────────────────────────── */
  .vehicles-grid,
  .relatives-grid,
  .addresses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dv-s-3);
  }

  @media (min-width: 30rem) {
    .vehicles-grid,
    .relatives-grid,
    .addresses-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  }

  .card-item {
    display: flex;
    align-items: center;
    gap: var(--dv-s-3);
    padding: var(--dv-s-4);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r);
  }

  .card-item img {
    inline-size: 4rem;
    block-size: 4rem;
    flex: none;
    object-fit: cover;
    border-radius: var(--dv-r-sm);
    border: 1px solid var(--dv-border);
  }

  .card-item-info {
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
    min-inline-size: 0;
  }

  .card-item-info b {
    display: block;
    color: var(--dv-text);
    font-family: var(--dv-f-ui);
    font-size: var(--dv-t-sm);
  }


  /* ─────────────────────────────────────────────
     Cabeçalho de modal — a mesma voz do documento

     Os modais eram centralizados, com selo colorido e título de
     página de preços: pareciam outro produto colado no meio do
     funil. Agora abrem como o laudo abre — sobrescrito em mono,
     título alinhado à esquerda e régua dupla embaixo.
     ───────────────────────────────────────────── */
  .modal-cab {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-2);
    padding-block-end: var(--dv-s-4);
    margin-block-end: var(--dv-s-5);
    padding-inline-end: var(--dv-s-8);
    border-block-end: 3px double var(--dv-border-strong);
  }

  .modal-eyebrow {
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wider);
    text-transform: uppercase;
    color: var(--dv-accent);
  }

  .modal-cab h2 {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-xl);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.12;
    text-transform: uppercase;
    color: var(--dv-text);
  }

  .modal-cab p {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-sm);
    max-inline-size: 62ch;
  }

  /* Modal largo: os três planos precisam caber lado a lado para
     poderem ser comparados. Empilhados viravam uma rolagem longa. */
  .modal-box.modal-largo { inline-size: min(58rem, 100%); }

  /* ─────────────────────────────────────────────
     Plano = quanto do documento sai da tarja

     Antes, cada cartão trazia uma miniatura do laudo com seis linhas
     tarjadas. Bonito, e caro: os três cartões somavam 1000px de altura
     numa janela de 1000px, então ninguém comparava — decidia rolando.

     A miniatura virou uma régua: a parte clara é o que o plano abre, a
     escura é o que continua tarjado. Diz a mesma coisa em 6px de altura,
     e agora com o NÚMERO ao lado, que vem calculado do servidor.
     ───────────────────────────────────────────── */
  .tier-medidor {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
  }

  .tm-barra {
    flex: 1;
    block-size: 0.4rem;
    border-radius: 1px;
    /* O fundo é a tarja: o que não for preenchido continua censurado. */
    background: var(--dv-redact);
    overflow: hidden;
  }

  .tm-aberto {
    display: block;
    block-size: 100%;
    inline-size: 0;
    background: var(--dv-paper);
    transition: inline-size 600ms var(--dv-ease);
  }

  .tm-rotulo {
    flex: none;
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--dv-ls-wide);
    /* Precisa passar no mínimo também sobre o cartão em destaque. */
    color: var(--dv-text-soft);
  }

  @media (prefers-reduced-motion: reduce) {
    .tm-aberto { transition: none; }
  }

  /* Uma linha, não um parágrafo: o caminho de subir de plano é informação
     útil na hora de escolher, mas não pode competir com os cartões. */
  .tier-escada {
    margin-block-start: var(--dv-s-3);
    text-align: center;
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
  }

  /* Selo do plano recomendado: marca de documento, não pílula de loja. */
  .badge-popular {
    align-self: flex-start;
    padding: 0.1rem var(--dv-s-2);
    background: transparent;
    border: 1px solid var(--dv-accent);
    border-radius: var(--dv-r-sm);
    color: var(--dv-accent);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    font-weight: 500;
    letter-spacing: var(--dv-ls-wide);
  }

  /* Aviso de prazo: linha de despacho, não caixa de alarme. */
  .timer-box {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    padding: var(--dv-s-3) 0 0;
    margin-block-start: var(--dv-s-5);
    margin-block-end: 0;
    border-block-start: 1px solid var(--dv-border);
    border-inline: none;
    border-block-end: none;
    background: none;
    border-radius: 0;
    text-align: start;
    color: var(--dv-text-muted);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wide);
  }

  .timer-box b { color: var(--dv-amber); }

  .small-guarantee {
    margin-block-start: var(--dv-s-3);
    text-align: start;
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wide);
    color: var(--dv-text-muted);
  }

  /* ── Blocos internos de modal alinhados à esquerda ── */
  .pix-header,
  .discount-header,
  .upsell-price-box { text-align: start; }

  .price-comparison { justify-content: flex-start; }

  .qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dv-s-2);
  }

  .qr-legenda {
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
    color: var(--dv-text-muted);
  }

  /* ─────────────────────────────────────────────
     Modais
     ───────────────────────────────────────────── */
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: var(--dv-s-2);
    background: color-mix(in oklab, var(--dv-bg) 82%, black);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  @media (min-width: 48rem) {
    .modal-overlay {
      padding: var(--dv-s-4);
      backdrop-filter: blur(8px);
    }
  }

  .modal-box {
    position: relative;
    inline-size: min(30rem, 100%);
    max-block-size: calc(100dvh - var(--dv-s-4));
    margin: auto;
    padding: var(--dv-s-5) var(--dv-s-4);
    overflow-y: auto;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border-strong);
    border-radius: var(--dv-r);
    box-shadow: var(--dv-shadow-lg);
    animation: modalIn var(--dv-dur-slow) var(--dv-ease);
  }

  @media (min-width: 48rem) {
    .modal-box {
      padding: var(--dv-s-8);
      border-radius: var(--dv-r-lg);
      max-block-size: calc(100dvh - var(--dv-s-8));
    }
  }

  @keyframes modalIn {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: none; }
  }

  body.modal-open { overflow: hidden; }

  .modal-close {
    position: absolute;
    inset-block-start: var(--dv-s-2);
    inset-inline-end: var(--dv-s-2);
    inline-size: var(--dv-tap);
    block-size: var(--dv-tap);
    display: grid;
    place-items: center;
    color: var(--dv-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    border-radius: var(--dv-r-sm);
  }

  .modal-close:hover { color: var(--dv-text); }

  /* ── Modal de desconto ── */
  .discount-header {
    text-align: center;
    margin-block-end: var(--dv-s-5);
  }

  .badge-fire {
    display: inline-block;
    margin-block-end: var(--dv-s-2);
    padding: var(--dv-s-1) var(--dv-s-3);
    background: var(--dv-fill-danger);
    border: 1px solid var(--dv-line-danger);
    border-radius: var(--dv-r-pill);
    color: var(--dv-danger);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
  }

  .discount-header h2 {
    font-size: var(--dv-t-xl);
    color: var(--dv-text);
  }

  .price-comparison {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--dv-s-5);
    margin-block-end: var(--dv-s-5);
  }

  .old-price span {
    text-decoration: line-through;
    color: var(--dv-text-muted);
    font-size: var(--dv-t-md);
  }

  .new-price small {
    display: block;
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
  }

  .new-price h3 {
    font-size: var(--dv-t-2xl);
    color: var(--dv-success);
    font-variant-numeric: tabular-nums;
  }

  /* Linha de despacho, não caixa de alarme: o prazo informa, não grita.
     A definição de aparência fica em "Cabeçalho de modal", acima. */
  .timer-box {
    font-variant-numeric: tabular-nums;
  }

  /* Aparência definida em "Cabeçalho de modal": alinhada à esquerda,
     como o resto do documento. */
  .small-guarantee { margin-block-start: var(--dv-s-3); }

  /* ── Modal PIX ── */
  .pix-header {
    text-align: center;
    margin-block-end: var(--dv-s-4);
  }

  .pix-amount-tag {
    padding: var(--dv-s-2);
    margin-block-end: var(--dv-s-4);
    text-align: center;
    background: var(--dv-accent-quiet);
    border: 1px solid var(--dv-line-accent);
    border-radius: var(--dv-r-sm);
    color: var(--dv-accent);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-lg);
    font-variant-numeric: tabular-nums;
  }

  .qr-container {
    text-align: center;
    margin-block-end: var(--dv-s-4);
  }

  .qr-container img {
    inline-size: clamp(9rem, 45vw, 11.25rem);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: var(--dv-r-sm);
    /* Fundo branco é requisito de leitura do QR, não decisão de tema. */
    border: 4px solid #FFFFFF;
    background: #FFFFFF;
  }

  .pix-code-box label {
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
  }

  .code-input-row {
    display: flex;
    gap: var(--dv-s-2);
    margin-block-start: var(--dv-s-1);
  }

  .code-input-row input {
    flex: 1;
    min-inline-size: 0;
    padding: var(--dv-s-3);
    background: var(--dv-bg);
    border: 1px solid var(--dv-field-border);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-soft);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-xs);
  }

  .btn-copy {
    flex: none;
    padding-inline: var(--dv-s-4);
    min-block-size: var(--dv-tap);
    background: var(--dv-accent);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-on-brand);
    font-weight: 700;
    font-size: var(--dv-t-xs);
  }

  .pix-status-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dv-s-2);
    margin-block-start: var(--dv-s-4);
    font-size: var(--dv-t-sm);
    color: var(--dv-amber);
  }

  .spinner {
    inline-size: 1rem;
    block-size: 1rem;
    flex: none;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .dev-helper-box {
    margin-block-start: var(--dv-s-5);
    padding-block-start: var(--dv-s-4);
    text-align: center;
    border-block-start: 1px dashed var(--dv-border);
  }

  .btn-dev-pay {
    inline-size: 100%;
    min-block-size: var(--dv-tap);
    padding: var(--dv-s-3) var(--dv-s-4);
    background: var(--dv-fill-amber);
    border: 1px solid var(--dv-line-amber);
    border-radius: var(--dv-r-sm);
    color: var(--dv-amber);
    font-size: var(--dv-t-xs);
    font-weight: 700;
  }

  /* ── Modal de upsell ── */
  .upsell-badge {
    display: inline-block;
    margin-block-end: var(--dv-s-3);
    padding: var(--dv-s-1) var(--dv-s-3);
    background: var(--dv-fill-amber);
    border: 1px solid var(--dv-line-amber);
    border-radius: var(--dv-r-pill);
    color: var(--dv-amber);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
  }

  .modal-upsell h2 {
    font-size: var(--dv-t-xl);
    color: var(--dv-text);
    margin-block-end: var(--dv-s-3);
  }

  .upsell-desc {
    font-size: var(--dv-t-sm);
    color: var(--dv-text-muted);
    margin-block-end: var(--dv-s-4);
  }

  .upsell-features {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-3);
    margin-block-end: var(--dv-s-5);
    font-size: var(--dv-t-sm);
  }

  .uf-item {
    display: flex;
    align-items: center;
    gap: var(--dv-s-3);
    color: var(--dv-text-soft);
  }

  .uf-item i { color: var(--dv-success); }

  .upsell-price-box {
    text-align: center;
    margin-block-end: var(--dv-s-4);
  }

  .upsell-old {
    margin-inline-end: var(--dv-s-2);
    text-decoration: line-through;
    color: var(--dv-text-muted);
    font-size: var(--dv-t-sm);
  }

  .upsell-new {
    color: var(--dv-success);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-lg);
    font-weight: 700;
  }

  .btn-link-decline {
    inline-size: 100%;
    min-block-size: var(--dv-tap);
    margin-block-start: var(--dv-s-2);
    color: var(--dv-text-muted);
    font-size: var(--dv-t-xs);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .btn-link-decline:hover { color: var(--dv-text-soft); }

  /* ─────────────────────────────────────────────
     Prova social e cupom
     ───────────────────────────────────────────── */
  .proof-counter {
    margin-block-start: var(--dv-s-5);
    padding: var(--dv-s-3) var(--dv-s-4);
    text-align: center;
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-muted);
    font-size: var(--dv-t-xs);
  }

  .proof-counter i {
    margin-inline-end: var(--dv-s-2);
    color: var(--dv-success);
  }

  .proof-counter b {
    color: var(--dv-text-soft);
    font-variant-numeric: tabular-nums;
  }

  .coupon-box { margin: var(--dv-s-4) 0 var(--dv-s-1); }

  .coupon-row {
    display: flex;
    gap: var(--dv-s-2);
  }

  .coupon-row input {
    flex: 1;
    min-inline-size: 0;
    padding: var(--dv-s-3);
    min-block-size: var(--dv-tap);
    background: var(--dv-bg);
    border: 1px solid var(--dv-field-border);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-sm);
    text-transform: uppercase;
  }

  .coupon-row input:focus {
    border-color: var(--dv-accent);
    outline: var(--dv-ring-w) solid var(--dv-ring);
    outline-offset: 0;
  }

  .btn-coupon {
    flex: none;
    padding: var(--dv-s-3) var(--dv-s-4);
    min-block-size: var(--dv-tap);
    background: transparent;
    border: 1px solid var(--dv-border-strong);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-soft);
    font-size: var(--dv-t-xs);
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--dv-dur) var(--dv-ease),
                color var(--dv-dur) var(--dv-ease);
  }

  .btn-coupon:hover {
    background: var(--dv-accent);
    border-color: var(--dv-accent);
    color: var(--dv-text-on-brand);
  }

  .coupon-status {
    margin-block-start: var(--dv-s-2);
    font-size: var(--dv-t-xs);
    min-block-size: 1.125rem;
  }

  .coupon-ok  { color: var(--dv-success); }
  .coupon-err { color: var(--dv-danger); }

  /* Campo de entrega por E-mail ou WhatsApp */
  .contact-delivery-box {
    margin: var(--dv-s-4) 0 var(--dv-s-2);
    padding: var(--dv-s-3);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border-strong);
    border-radius: var(--dv-r);
  }

  .contact-delivery-label {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    font-size: var(--dv-t-xs);
    font-weight: 600;
    color: var(--dv-text-soft);
    margin-block-end: var(--dv-s-2);
  }

  .contact-delivery-row {
    display: flex;
    gap: var(--dv-s-2);
  }

  .contact-delivery-row input {
    flex: 1;
    min-inline-size: 0;
    padding: var(--dv-s-2) var(--dv-s-3);
    min-block-size: var(--dv-tap);
    background: var(--dv-bg);
    border: 1px solid var(--dv-field-border);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text);
    font-size: var(--dv-t-xs);
  }

  .contact-delivery-row input:focus {
    outline: none;
    border-color: var(--dv-accent);
  }

  .btn-delivery-save {
    flex: none;
    padding: var(--dv-s-2) var(--dv-s-4);
    min-block-size: var(--dv-tap);
    background: var(--dv-accent);
    border: none;
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-on-brand);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    transition: filter var(--dv-dur) var(--dv-ease);
  }

  .btn-delivery-save:hover {
    filter: brightness(1.1);
  }

  .contact-delivery-status {
    margin-block-start: var(--dv-s-2);
    font-size: var(--dv-t-2xs);
    min-block-size: 1.25rem;
    line-height: var(--dv-lh-snug);
  }

  .delivery-ok  { color: var(--dv-success); font-weight: 600; }
  .delivery-err { color: var(--dv-danger); }

  /* ─────────────────────────────────────────────
     Selo de busca reversa
     ───────────────────────────────────────────── */
  .match-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dv-s-2);
    margin: var(--dv-s-3) 0 var(--dv-s-1);
    padding: var(--dv-s-2) var(--dv-s-4);
    background: var(--dv-fill-amber);
    border: 1px solid var(--dv-line-amber);
    border-radius: var(--dv-r-pill);
    color: var(--dv-amber);
    font-size: var(--dv-t-xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
  }

  /* ─────────────────────────────────────────────
     Bloco de módulo travado (venda unitária)
     ───────────────────────────────────────────── */
  .module-lock-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dv-s-4);
    margin: var(--dv-s-2) 0;
    padding: var(--dv-s-5);
    background: var(--dv-surface-2);
    border: 1px dashed var(--dv-line-amber);
    border-radius: var(--dv-r);
  }

  @media (min-width: 30rem) {
    .module-lock-card {
      flex-direction: row;
      align-items: center;
    }
  }

  /* A célula que hospeda o card dentro de uma tabela não desenha fundo
     próprio — quem tem superfície é o card. */
  .module-lock-row td { background: transparent; }

  .module-lock-icon {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--dv-r);
    background: var(--dv-fill-amber);
    color: var(--dv-amber);
    font-size: 1.1rem;
  }

  .module-lock-info b {
    color: var(--dv-text);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-md);
  }

  .module-lock-info p {
    margin: var(--dv-s-1) 0 var(--dv-s-3);
    color: var(--dv-text-muted);
    font-size: var(--dv-t-xs);
  }

  .btn-module-buy {
    padding: var(--dv-s-2) var(--dv-s-5);
    min-block-size: var(--dv-tap);
    background: var(--dv-success);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-on-success);
    font-size: var(--dv-t-xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    transition: filter var(--dv-dur) var(--dv-ease);
  }

  .btn-module-buy:hover { filter: brightness(1.08); }

  /* ─────────────────────────────────────────────
     Propensões
     ───────────────────────────────────────────── */
  .propensoes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dv-s-2);
  }

  @media (min-width: 30rem) {
    .propensoes-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  }

  .propensao-item {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    padding: var(--dv-s-3);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r-sm);
    font-size: var(--dv-t-xs);
  }

  .propensao-item .prop-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    flex: none;
    border-radius: 50%;
  }

  .propensao-item .prop-dot.yes { background: var(--dv-success); }
  .propensao-item .prop-dot.no  { background: var(--dv-border-strong); }

  .propensao-item .prop-name {
    color: var(--dv-text-soft);
    text-transform: capitalize;
  }

  .propensao-item .prop-score {
    margin-inline-start: auto;
    color: var(--dv-amber);
    font-family: var(--dv-f-mono);
    font-weight: 700;
  }

  /* ─────────────────────────────────────────────
     Linha do tempo
     ───────────────────────────────────────────── */
  .timeline {
    position: relative;
    padding-inline-start: var(--dv-s-6);
  }

  .timeline::before {
    content: '';
    position: absolute;
    inset-inline-start: 0.3rem;
    inset-block: var(--dv-s-1);
    inline-size: 1px;
    background: var(--dv-border-strong);
  }

  .timeline-item {
    position: relative;
    padding: var(--dv-s-3) 0;
    border-block-end: 1px solid var(--dv-border);
  }

  .timeline-item:last-child { border-block-end: none; }

  .timeline-item::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(var(--dv-s-6) * -1 + 0.05rem);
    inset-block-start: var(--dv-s-4);
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--dv-accent);
  }

  .timeline-item .tl-date {
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    color: var(--dv-accent);
    font-weight: 600;
  }

  .timeline-item .tl-cat {
    display: inline-block;
    margin-inline-start: var(--dv-s-2);
    padding: 0.05rem var(--dv-s-2);
    background: var(--dv-accent-quiet);
    border-radius: var(--dv-r-sm);
    color: var(--dv-accent);
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wide);
  }

  .timeline-item .tl-desc {
    margin-block-start: var(--dv-s-1);
    font-size: var(--dv-t-sm);
    color: var(--dv-text-soft);
  }

  .timeline-item .tl-desc b { color: var(--dv-text); }

  .timeline-item .tl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dv-s-1) var(--dv-s-4);
    margin-block-start: var(--dv-s-1);
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
  }

  .timeline-item .tl-meta span b {
    color: var(--dv-text-soft);
    font-weight: 600;
  }

  .timeline-item .tl-photo {
    margin-block-start: var(--dv-s-2);
    inline-size: 4rem;
    block-size: 4rem;
    object-fit: cover;
    border-radius: var(--dv-r-sm);
    border: 1px solid var(--dv-border);
  }

  /* ─────────────────────────────────────────────
     Naturalidade
     ───────────────────────────────────────────── */
  .naturalidade-card {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-4);
  }

  @media (min-width: 48rem) {
    .naturalidade-card {
      flex-direction: row;
      align-items: flex-start;
    }
  }

  .naturalidade-card .nat-imgs {
    display: flex;
    gap: var(--dv-s-2);
  }

  @media (min-width: 48rem) {
    .naturalidade-card .nat-imgs {
      flex-direction: column;
      inline-size: 8.75rem;
      flex: none;
    }
  }

  .naturalidade-card .nat-imgs img {
    inline-size: 100%;
    border-radius: var(--dv-r-sm);
    border: 1px solid var(--dv-border);
  }

  .naturalidade-card .nat-info {
    flex: 1;
    min-inline-size: 0;
  }

  .naturalidade-card .nat-info h4 {
    margin-block-end: var(--dv-s-2);
    color: var(--dv-text);
    font-size: var(--dv-t-md);
  }

  .naturalidade-card .nat-info p {
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
  }

  .naturalidade-card .nat-destaques {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--dv-s-2);
    margin-block-start: var(--dv-s-3);
  }

  .naturalidade-card .nat-destaques div {
    padding: var(--dv-s-2) var(--dv-s-3);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r-sm);
    font-size: var(--dv-t-2xs);
  }

  .naturalidade-card .nat-destaques b {
    display: block;
    margin-block-end: 0.1rem;
    color: var(--dv-text-muted);
    font-size: var(--dv-t-2xs);
    text-transform: uppercase;
    letter-spacing: var(--dv-ls-wide);
  }

  /* ─────────────────────────────────────────────
     Documentos e galeria
     ───────────────────────────────────────────── */
  .docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: var(--dv-s-2);
  }

  .docs-grid img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--dv-r-sm);
    border: 1px solid var(--dv-border);
    cursor: pointer;
    transition: transform var(--dv-dur) var(--dv-ease),
                border-color var(--dv-dur) var(--dv-ease);
  }

  .docs-grid img:hover {
    transform: scale(1.03);
    border-color: var(--dv-accent);
  }

  .company-logo-placeholder {
    inline-size: 100%;
    min-block-size: 10rem;
    display: grid;
    place-items: center;
    background: var(--dv-surface-2);
    border: 1px dashed var(--dv-border-strong);
    border-radius: var(--dv-r);
    color: var(--dv-text-muted);
    font-size: 2.5rem;
  }

  /* ─────────────────────────────────────────────
     Histórico e estados vazios
     ───────────────────────────────────────────── */
  .history-section .report-card { padding: var(--dv-pad-card); }
  .history-section .data-table td { vertical-align: middle; }

  .btn-reopen {
    padding: var(--dv-s-2) var(--dv-s-3);
    min-block-size: 2rem;
    background: var(--dv-fill-accent);
    border: 1px solid var(--dv-line-accent);
    border-radius: var(--dv-r-sm);
    color: var(--dv-accent);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--dv-dur) var(--dv-ease),
                color var(--dv-dur) var(--dv-ease);
  }

  .btn-reopen:hover {
    background: var(--dv-accent);
    color: var(--dv-text-on-brand);
  }

  .empty-state {
    margin: var(--dv-s-2) 0;
    padding: var(--dv-s-5);
    text-align: center;
    color: var(--dv-text-muted);
    font-size: var(--dv-t-sm);
    border: 1px dashed var(--dv-border);
    border-radius: var(--dv-r-sm);
  }

  /* ─────────────────────────────────────────────
     Créditos
     ───────────────────────────────────────────── */
  .credit-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--dv-s-3);
    padding: var(--dv-s-3) var(--dv-s-4);
    margin-block-end: var(--dv-s-4);
    background: var(--dv-fill-amber);
    border: 1px solid var(--dv-line-amber);
    border-radius: var(--dv-r);
  }

  @media (min-width: 30rem) {
    .credit-banner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .credit-info {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    color: var(--dv-text-soft);
    font-size: var(--dv-t-sm);
  }

  .credit-info i {
    color: var(--dv-amber);
    font-size: 1.1rem;
  }

  .btn-credit {
    padding: var(--dv-s-2) var(--dv-s-4);
    min-block-size: var(--dv-tap);
    background: transparent;
    border: 1px solid var(--dv-line-amber);
    border-radius: var(--dv-r-sm);
    color: var(--dv-amber);
    font-size: var(--dv-t-xs);
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--dv-dur) var(--dv-ease);
  }

  .btn-credit:hover { background: var(--dv-fill-amber); }

  .credit-hint {
    margin-block-start: var(--dv-s-4);
    padding: var(--dv-s-3) var(--dv-s-4);
    background: var(--dv-fill-amber);
    border: 1px dashed var(--dv-line-amber);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-soft);
    font-size: var(--dv-t-sm);
  }

  .credit-hint b { color: var(--dv-amber); }

  /* ─────────────────────────────────────────────
     Seletor de planos
     ───────────────────────────────────────────── */
  /* No celular os três planos empilhados somavam quase mil pixels: para
     comparar o primeiro com o terceiro era preciso rolar e lembrar. Viram
     uma faixa que desliza de lado, com encaixe — a altura passa a ser a de
     UM cartão, e a comparação vira um gesto em vez de memória. */
  .tier-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dv-s-3);
    padding-inline: 2px;
    margin-inline: -2px;
  }

  /* O plano em destaque vem primeiro no celular. Numa pilha vertical, a
     ordem é a recomendação: quem rola de cima para baixo lê o sugerido
     antes de comparar. No desktop a ordem volta a ser a da escada de preço,
     porque aí os três são vistos de uma vez. */
  .tier-list > .tier-card.tier-destaque { order: -1; }

  /* Três colunas fixas, não auto-fit: a escolha aqui é uma comparação, e
     comparar exige ver os três ao mesmo tempo. Com auto-fit, larguras
     intermediárias quebravam para duas colunas e o terceiro plano — o mais
     caro — caía sozinho na linha de baixo, fora do campo de visão. */
  @media (min-width: 48rem) {
    .tier-list {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--dv-s-2);
      align-items: stretch;
    }

    .tier-list > .tier-card.tier-destaque { order: 0; }
  }

  .tier-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-2);
    padding: var(--dv-s-4);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r);
    transition: border-color var(--dv-dur) var(--dv-ease),
                transform var(--dv-dur) var(--dv-ease);
  }

  .tier-card:hover {
    transform: translateY(-2px);
    border-color: var(--dv-border-strong);
  }

  /* O plano recomendado ganha a cor da marca; o topo, a maior. */
  .tier-card.tier-destaque {
    border-color: var(--dv-accent);
    background: var(--dv-accent-quiet);
  }

  .tier-card.tier-tudo {
    border-color: var(--dv-line-amber);
    background: var(--dv-fill-amber);
  }

  .tier-head {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .tier-head b {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-md);
    color: var(--dv-text);
    letter-spacing: 0.02em;
  }

  .tier-price {
    color: var(--dv-text);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .tier-card.tier-tudo .tier-price { color: var(--dv-amber); }

  .tier-price s {
    margin-inline-start: var(--dv-s-2);
    /* O muted media 4.39:1 sobre o card em destaque — abaixo do mínimo.
       É um preço: precisa ser lido, mesmo riscado. */
    color: var(--dv-text-soft);
    font-family: var(--dv-f-ui);
    font-size: var(--dv-t-xs);
    font-weight: 400;
  }

  .tier-card ul {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-1);
    flex: 1;
    margin: 0;
    padding-inline-start: var(--dv-s-4);
  }

  .tier-card li {
    /* São os argumentos de venda do plano: precisam passar no mínimo de
       contraste também sobre o card em destaque. */
    color: var(--dv-text-soft);
    font-size: var(--dv-t-xs);
    line-height: var(--dv-lh-snug);
  }

  .btn-tier {
    padding: var(--dv-s-3) var(--dv-s-4);
    min-block-size: var(--dv-tap);
    background: var(--dv-accent);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-on-brand);
    font-size: var(--dv-t-sm);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    transition: filter var(--dv-dur) var(--dv-ease);
  }

  .tier-card.tier-tudo .btn-tier {
    background: var(--dv-amber);
    color: var(--dv-text-on-amber);
  }

  .btn-tier:hover { filter: brightness(1.08); }

  .badge-popular {
    align-self: flex-start;
    padding: 0.1rem var(--dv-s-3);
    background: var(--dv-accent);
    border-radius: var(--dv-r-pill);
    color: var(--dv-text-on-brand);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
  }

  /* ─────────────────────────────────────────────
     Bloco de Planos no topo da Prévia (Mobile & Desktop)
     ───────────────────────────────────────────── */
  .preview-plans-block {
    margin-block: var(--dv-s-4);
    padding: var(--dv-s-4);
    background: var(--dv-surface);
    border: 1px solid var(--dv-border-strong);
    border-radius: var(--dv-r);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  @media (min-width: 48rem) {
    .preview-plans-block {
      padding: var(--dv-s-5);
      margin-block: var(--dv-s-6);
    }
  }

  .preview-plans-head {
    margin-block-end: var(--dv-s-4);
    text-align: center;
  }

  .preview-plans-head h3 {
    font-size: var(--dv-t-md);
    color: var(--dv-text);
    margin-block-end: var(--dv-s-1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dv-s-2);
  }

  @media (min-width: 48rem) {
    .preview-plans-head h3 {
      font-size: var(--dv-t-lg);
    }
  }

  .preview-plans-head p {
    font-size: var(--dv-t-xs);
    color: var(--dv-text-soft);
    max-width: 38rem;
    margin-inline: auto;
    line-height: var(--dv-lh-base);
  }

  /* Badges no topo dos cards de plano */
  .tier-badge-top {
    position: absolute;
    top: -12px;
    right: 12px;
    padding: 2px 10px;
    background: var(--dv-accent);
    color: var(--dv-text-on-brand);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: var(--dv-ls-wide);
    border-radius: var(--dv-r-pill);
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
  }

  .tier-badge-top.gold {
    background: var(--dv-amber);
    color: var(--dv-text-on-amber);
  }

  .preview-tier-list .tier-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .preview-tier-list .tier-card ul {
    list-style: none;
    padding: 0;
    margin-block: var(--dv-s-3);
  }

  .preview-tier-list .tier-card li {
    display: flex;
    align-items: flex-start;
    gap: var(--dv-s-2);
    margin-block-end: var(--dv-s-2);
    font-size: var(--dv-t-xs);
    line-height: var(--dv-lh-snug);
  }

  .preview-tier-list .tier-card li i {
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 0.85rem;
  }

  .btn-tier-primary {
    background: var(--dv-surface-3);
    border: 1px solid var(--dv-border-strong);
    color: var(--dv-text);
  }

  .btn-tier-primary:hover {
    background: var(--dv-surface-2);
    border-color: var(--dv-accent);
    color: var(--dv-accent);
  }

  .btn-tier-highlight {
    background: var(--dv-accent);
    color: var(--dv-text-on-brand);
  }

  .btn-tier-gold {
    background: var(--dv-amber);
    color: var(--dv-text-on-amber);
  }

  /* ─────────────────────────────────────────────
     Barra do bundle de módulos
     ───────────────────────────────────────────── */
  .module-bundle-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--dv-s-3);
    padding: var(--dv-s-4);
    margin-block-end: var(--dv-s-4);
    background: var(--dv-fill-accent);
    border: 1px dashed var(--dv-line-accent);
    border-radius: var(--dv-r);
  }

  @media (min-width: 30rem) {
    .module-bundle-bar {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .mb-info {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-1);
  }

  .mb-info b {
    color: var(--dv-text);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-md);
  }

  .mb-info span {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-xs);
  }

  /* ─────────────────────────────────────────────
     Cross-sell
     ───────────────────────────────────────────── */
  .cross-person {
    display: flex;
    align-items: center;
    gap: var(--dv-s-3);
    padding: var(--dv-s-3) var(--dv-s-4);
    margin-block-end: var(--dv-s-2);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r-sm);
  }

  .cross-avatar {
    inline-size: 2.625rem;
    block-size: 2.625rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dv-accent-quiet);
    color: var(--dv-accent);
  }

  .cross-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-inline-size: 0;
  }

  .cross-info b {
    color: var(--dv-text);
    font-size: var(--dv-t-sm);
  }

  .cross-info span {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-xs);
  }

  /* ─────────────────────────────────────────────
     Visão dos tiers BÁSICO / ESSENCIAL
     ───────────────────────────────────────────── */
  .basic-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dv-s-4);
    padding: var(--dv-s-5);
    border-block-end: 1px solid var(--dv-border);
  }

  @media (min-width: 30rem) {
    .basic-hero {
      flex-direction: row;
      text-align: start;
    }
  }

  .basic-hero img,
  .basic-avatar {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
  }

  .basic-avatar {
    display: grid;
    place-items: center;
    background: var(--dv-accent-quiet);
    border: 1px solid var(--dv-line-accent);
    color: var(--dv-accent);
    font-size: 1.75rem;
  }

  .basic-hero-info {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-1);
    min-inline-size: 0;
  }

  .basic-hero-info h2 {
    color: var(--dv-text);
    font-size: var(--dv-t-xl);
    overflow-wrap: break-word;
  }

  .basic-hero-info span {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-sm);
  }

  .basic-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dv-s-3);
    padding: var(--dv-s-5);
  }

  @media (min-width: 30rem) {
    .basic-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  }

  .basic-card {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-1);
    padding: var(--dv-s-4);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r-sm);
  }

  .basic-card b {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-2xs);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
  }

  .basic-card span {
    color: var(--dv-text);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-sm);
    overflow-wrap: break-word;
  }

  .basic-counters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dv-s-2);
    padding: 0 var(--dv-s-5) var(--dv-s-5);
  }

  @media (min-width: 30rem) {
    .basic-counters { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
  }

  .basic-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: var(--dv-s-3);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r-sm);
  }

  .basic-counter b {
    color: var(--dv-accent);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-lg);
    font-variant-numeric: tabular-nums;
  }

  .basic-counter span {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-2xs);
    text-transform: uppercase;
    letter-spacing: var(--dv-ls-wide);
    text-align: center;
  }

  .basic-destaques {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-2);
    padding: 0 var(--dv-s-5) var(--dv-s-5);
  }

  .basic-destaque {
    display: flex;
    align-items: center;
    gap: var(--dv-s-2);
    padding: var(--dv-s-3) var(--dv-s-4);
    background: var(--dv-surface-2);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-muted);
    font-size: var(--dv-t-sm);
  }

  .basic-destaque b { color: var(--dv-text); }

  .basic-upsell-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dv-s-2);
    padding: var(--dv-s-6) var(--dv-s-5);
    border-block-start: 1px dashed var(--dv-border);
  }

  .basic-upsell-bar b { color: var(--dv-text); }

  .basic-upsell-bar p {
    margin-block-end: var(--dv-s-3);
    color: var(--dv-text-muted);
    font-size: var(--dv-t-sm);
  }

  .basic-upsell-bar p b { color: var(--dv-accent); }

  .basic-cadastral {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dv-s-3);
    padding: var(--dv-s-5) var(--dv-s-5) 0;
  }

  @media (min-width: 30rem) {
    .basic-cadastral { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  }

  .essential-upgrade {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dv-s-4);
    margin: 0 var(--dv-s-5) var(--dv-s-5);
    padding: var(--dv-s-4) var(--dv-s-5);
    background: var(--dv-fill-amber);
    border: 1px dashed var(--dv-line-amber);
    border-radius: var(--dv-r);
  }

  .essential-upgrade > i {
    color: var(--dv-amber);
    font-size: 1.3rem;
  }

  .essential-upgrade > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-inline-size: 11rem;
  }

  .essential-upgrade b {
    color: var(--dv-amber);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-md);
  }

  .essential-upgrade span {
    color: var(--dv-text-muted);
    font-size: var(--dv-t-xs);
  }

  /* ─────────────────────────────────────────────
     Relatório reorganizado — resumo, índice, grupos
     ───────────────────────────────────────────── */
  .report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: var(--dv-s-2);
    margin: var(--dv-s-1) 0 var(--dv-s-4);
  }

  .rs-tile {
    padding: var(--dv-s-3) var(--dv-s-4);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r);
  }

  .rs-v {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dv-text);
  }

  .rs-l {
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--dv-ls-wide);
  }

  /* Índice grudento: no celular é a única navegação viável num
     documento com 35 blocos. */
  .report-index {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    display: flex;
    gap: var(--dv-s-2);
    overflow-x: auto;
    padding: var(--dv-s-3) 0;
    margin-block-end: var(--dv-s-3);
    background: color-mix(in oklab, var(--dv-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--dv-border);
    scrollbar-width: none;
  }

  .ri-chip {
    flex: none;
    white-space: nowrap;
    text-decoration: none;
    padding: var(--dv-s-2) var(--dv-s-3);
    /* O projeto define 44px como alvo mínimo de toque; estes chips eram os
       únicos elementos da página abaixo disso. */
    min-block-size: var(--dv-tap);
    display: inline-flex;
    align-items: center;
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r-pill);
    color: var(--dv-text-soft);
    font-size: var(--dv-t-xs);
    font-weight: 600;
    transition: border-color var(--dv-dur) var(--dv-ease),
                color var(--dv-dur) var(--dv-ease);
  }

  .ri-chip:hover {
    border-color: var(--dv-accent);
    color: var(--dv-accent);
  }

  .ri-chip span { opacity: 0.75; }

  #reportGroups {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-3);
  }

  /* A numeração das seções não é enfeite: um laudo é numerado, e o
     contador do CSS mantém isso verdadeiro mesmo quando o conjunto de
     seções muda conforme o plano contratado. */
  .report-section > .report-card { counter-reset: secao; }

  .rgroup {
    scroll-margin-block-start: calc(var(--dv-index-h) + var(--dv-s-3));
    counter-increment: secao;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r-sm);
    overflow: hidden;
    scroll-margin-top: calc(var(--dv-index-h) + var(--dv-s-3));
  }

  .rg-title::before {
    content: '§' counter(secao, decimal-leading-zero);
    margin-inline-end: var(--dv-s-3);
    font-family: var(--dv-f-mono);
    font-size: 0.72em;
    font-weight: 400;
    color: var(--dv-accent);
    letter-spacing: 0.02em;
  }

  .rgroup > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--dv-s-3);
    padding: var(--dv-s-4) var(--dv-s-5);
    min-block-size: var(--dv-tap);
  }

  .rgroup > summary::-webkit-details-marker { display: none; }
  .rgroup > summary:hover { background: var(--dv-surface-2); }

  .rg-title {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-md);
    font-weight: 600;
    color: var(--dv-text);
  }

  .rg-cnt {
    margin-inline-start: auto;
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    color: var(--dv-text-muted);
  }

  .rg-chev {
    color: var(--dv-text-muted);
    transition: transform var(--dv-dur) var(--dv-ease);
  }

  .rgroup[open] > summary .rg-chev { transform: rotate(180deg); }

  .rgroup-body {
    padding: var(--dv-s-1) var(--dv-s-5) var(--dv-s-5);
    border-block-start: 1px solid var(--dv-border);
  }

  /* Bloco sem dado nenhum não entra no documento. Não é o mesmo que
     bloco tarjado: aquele tem conteúdo — a tarja. */
  .dossier-block.sem-dado { display: none; }

  /* ── Ofertas, depois do documento ──
     Separadas por uma régua clara: fica evidente onde o laudo termina
     e onde começa a venda. */
  .report-ofertas {
    margin-block-start: var(--dv-s-10);
    padding-block-start: var(--dv-s-6);
    border-block-start: 3px double var(--dv-border-strong);
  }

  .ofertas-titulo {
    font-size: var(--dv-t-lg);
    color: var(--dv-text);
    margin-block-end: var(--dv-s-2);
  }

  .report-ofertas > .module-bundle-bar,
  .report-ofertas > .basic-modules-block { margin-block-start: var(--dv-s-4); }
  .report-ofertas > .basic-modules-block:first-of-type { border-block-start: none; padding-block-start: 0; }

  /* Dentro de um grupo o bloco vira seção fluida, sem card duplicado. */
  .rgroup-body .dossier-block {
    margin: var(--dv-s-4) 0 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }

  .rgroup-body .dossier-block:first-child { margin-block-start: var(--dv-s-3); }
  .rgroup-body .dossier-block > h3 { font-size: var(--dv-t-md); }

  /* ═══════════════════════════════════════════════════════════
     A TARJA — a assinatura do produto

     O que está bloqueado não some nem borra: fica tarjado, com o
     rótulo do campo à vista. Você lê exatamente O QUE está sendo
     retido, e não pode ler o valor. Borrão diz "quebrou"; tarja diz
     "alguém decidiu que você não vê isto" — e é essa segunda frase
     que vende.
     ═══════════════════════════════════════════════════════════ */
  .panel-locked { position: relative; }

  /* O conteúdo real do bloco travado vem vazio do servidor; some do
     fluxo e deixa só título, tarjas e a chamada. */
  .panel-locked > *:not(h3):not(.panel-lock-ph):not(.panel-lock-ov) {
    display: none;
  }

  .panel-lock-ph {
    margin-block-start: var(--dv-s-3);
    user-select: none;
  }

  .plk-row {
    display: grid;
    grid-template-columns: minmax(6.5rem, 9rem) 1fr;
    align-items: center;
    gap: var(--dv-s-4);
    padding: var(--dv-s-3) 0;
    border-block-end: 1px solid var(--dv-border);
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-xs);
  }

  .plk-row:last-child { border-block-end: none; }

  /* O rótulo fica legível — é ele que dá o tamanho da perda. */
  .plk-row .plk-k {
    color: var(--dv-text-muted);
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* A tarja propriamente dita: barra sólida, canto vivo, sobre o papel. */
  .plk-row span:not(.plk-k) {
    display: block;
    background: var(--dv-redact);
    color: transparent;
    border-radius: 1px;
    padding-block: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    /* larguras irregulares, como carimbo aplicado à mão */
    inline-size: var(--plk-w, 62%);
    max-inline-size: 100%;
  }

  .plk-row:nth-child(2n)   span:not(.plk-k) { --plk-w: 78%; }
  .plk-row:nth-child(3n)   span:not(.plk-k) { --plk-w: 45%; }
  .plk-row:nth-child(4n+1) span:not(.plk-k) { --plk-w: 88%; }

  /* A chamada não cobre as tarjas — ela vem logo abaixo, como o
     despacho no rodapé de uma folha. */
  .panel-lock-ov {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dv-s-3);
    margin-block-start: var(--dv-s-4);
    padding: var(--dv-s-4);
    background: var(--dv-fill-amber);
    border: 1px solid var(--dv-line-amber);
    border-inline-start: 3px solid var(--dv-amber);
    border-radius: 0 var(--dv-r-sm) var(--dv-r-sm) 0;
  }

  @media (min-width: 30rem) {
    .panel-lock-ov {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .plk-ic {
    inline-size: 2rem;
    block-size: 2rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--dv-r-sm);
    background: var(--dv-amber);
    color: var(--dv-paper);
    font-size: 0.9rem;
  }

  .plk-txt {
    flex: 1;
    font-size: var(--dv-t-sm);
    font-weight: 600;
    color: var(--dv-text-soft);
  }

  .panel-unlock-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--dv-s-2);
    flex: none;
    padding: var(--dv-s-3) var(--dv-s-5);
    min-block-size: var(--dv-tap);
    background: var(--dv-accent);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-on-brand);
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-sm);
    font-weight: 700;
    letter-spacing: var(--dv-ls-wide);
    transition: filter var(--dv-dur) var(--dv-ease),
                transform var(--dv-dur) var(--dv-ease);
  }

  .panel-unlock-btn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
  }

  /* O momento de pagamento: a tarja é retirada da esquerda para a
     direita, revelando o dado. É o único movimento orquestrado do
     produto — todo o resto é quieto. */
  .dossier-block.unredacted { animation: unredact 0.55s var(--dv-ease) both; }

  @keyframes unredact {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .dossier-block.unredacted { animation: none; }
  }
}

/* ══════════════════════════════════════════════════════════
   UTILITÁRIOS — vencem componentes por estarem em camada acima,
   sem precisar de !important.
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   COMPONENTES ADICIONADOS NA AUDITORIA DE USABILIDADE
   ══════════════════════════════════════════════════════════ */
@layer components {

  /* ── Apêndice da cidade natal ──
     Rotulado como o que é, e recolhido: o laudo não deve abrir com o lema
     do município no lugar do dado do alvo. */
  .nat-municipio {
    margin-block-start: var(--dv-s-4);
    border: 1px dashed var(--dv-card-border);
    border-radius: var(--dv-r-sm);
  }

  .nat-municipio > summary {
    padding: var(--dv-s-3) var(--dv-s-4);
    min-block-size: var(--dv-tap);
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: var(--dv-f-ui);
    font-size: var(--dv-t-xs);
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
    color: var(--dv-text-muted);
  }

  .nat-municipio > summary::-webkit-details-marker { display: none; }
  .nat-municipio > summary::before { content: '▸'; margin-inline-end: var(--dv-s-2); }
  .nat-municipio[open] > summary::before { content: '▾'; }
  .nat-municipio > *:not(summary) { padding-inline: var(--dv-s-4); }
  .nat-municipio > *:last-child { padding-block-end: var(--dv-s-4); }

  /* ── Tabela longa: primeiras linhas + botão com a contagem ──
     Virar tabela em cartão resolveu o arrastar lateral no celular mas
     esticou o laudo de 21.667 para 36.149 px. Quem quer as 24 linhas abre;
     quem só quer saber que existem 24 lê isso no botão. */
  .data-table tbody tr.tbl-oculta,
  .tbl-oculta { display: none; }

  .tbl-mais {
    inline-size: 100%;
    min-block-size: var(--dv-tap);
    margin-block-start: var(--dv-s-2);
    padding: var(--dv-s-2) var(--dv-s-4);
    background: var(--dv-fill-subtle);
    border: 1px dashed var(--dv-card-border);
    border-radius: var(--dv-r-sm);
    color: var(--dv-accent);
    font-family: var(--dv-f-ui);
    font-size: var(--dv-t-xs);
    font-weight: 600;
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
    transition: border-color var(--dv-dur) var(--dv-ease);
  }

  .tbl-mais:hover { border-color: var(--dv-accent); }

  /* No papel, o laudo sai inteiro: não existe "mostrar mais" impresso. */
  @media print {
    .data-table tbody tr.tbl-oculta,
    .tbl-oculta { display: table-row; }
    .tbl-mais { display: none; }
  }

  /* ── Ações do cabeçalho (nova consulta, créditos) ──
     O .header-actions existia vazio no HTML: o cabeçalho não oferecia
     nenhuma ação, e por isso não havia caminho de volta para a busca. */
  .header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dv-s-2);
    align-items: center;
  }

  .btn-header {
    display: inline-flex;
    align-items: center;
    gap: var(--dv-s-2);
    min-block-size: var(--dv-tap);
    padding-inline: var(--dv-s-4);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border-strong);
    border-radius: var(--dv-r-pill);
    color: var(--dv-text-soft);
    font-size: var(--dv-t-sm);
    font-weight: 600;
    transition: border-color var(--dv-dur) var(--dv-ease),
                color var(--dv-dur) var(--dv-ease);
  }

  .btn-header:hover {
    border-color: var(--dv-accent);
    color: var(--dv-text);
  }

  /* ── Imagem que não carregou ──
     Documento sério assinala a lacuna. A moldura vazia com o texto
     alternativo à mostra, logo abaixo do selo "FOTO OFICIAL PERICIAL",
     fazia o laudo parecer falso já no primeiro bloco. */
  .img-vazia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dv-s-1);
    min-block-size: 5rem;
    padding: var(--dv-s-4);
    background: var(--dv-fill-subtle);
    border: 1px dashed var(--dv-card-border);
    border-radius: var(--dv-r-sm);
    color: var(--dv-text-muted);
    font-family: var(--dv-f-ui);
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
  }

  .img-vazia i { font-size: 1.15rem; opacity: 0.65; }

  /* ── Resumo do checkout PIX ──
     A tela do pagamento só dizia o valor: nem o item, nem o alvo, nem quem
     apareceria como recebedor no app do banco. */
  .pix-resumo {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-block-end: var(--dv-s-3);
    margin-block-end: var(--dv-s-3);
    border-block-end: 1px solid var(--dv-border);
    text-align: center;
  }

  .pix-resumo-item {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-md);
    font-weight: 600;
    color: var(--dv-text);
  }

  .pix-resumo-alvo {
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
  }

  .pix-resumo-alvo:empty { display: none; }

  .qr-recebedor {
    display: block;
    margin-block-start: var(--dv-s-2);
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
    text-align: center;
  }

  .qr-recebedor b { color: var(--dv-text-soft); font-family: var(--dv-f-mono); }

  .pix-tranquiliza {
    margin-block-start: var(--dv-s-3);
    font-size: var(--dv-t-xs);
    line-height: var(--dv-lh-snug);
    color: var(--dv-text-muted);
    text-align: center;
  }

  /* ── Rodapé institucional ──
     Não havia rodapé, termos, privacidade nem contato em página nenhuma do
     site principal — o que trava gateway, reprova conta de anúncio e é
     exatamente o que o comprador procura antes de digitar um CPF. */
  .rodape {
    max-inline-size: var(--dv-w-page);
    margin-inline: auto;
    padding: var(--dv-s-8) var(--dv-pad-page) var(--dv-s-10);
    border-block-start: 1px solid var(--dv-border);
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-4);
  }

  .rodape-conteudo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dv-s-4) var(--dv-s-8);
    justify-content: space-between;
    align-items: flex-start;
  }

  .rodape-marca {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-1);
  }

  .rodape-marca b {
    font-family: var(--dv-f-display);
    font-size: var(--dv-t-base);
    letter-spacing: var(--dv-ls-wide);
    color: var(--dv-text);
  }

  .rodape-marca span {
    font-size: var(--dv-t-sm);
    color: var(--dv-text-muted);
  }

  .rodape-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dv-s-2) var(--dv-s-5);
  }

  .rodape-links a {
    min-block-size: var(--dv-tap);
    display: inline-flex;
    align-items: center;
    font-size: var(--dv-t-sm);
    color: var(--dv-text-soft);
    text-decoration: none;
  }

  .rodape-links a:hover { color: var(--dv-accent); text-decoration: underline; }

  .rodape-aviso {
    max-inline-size: var(--dv-w-prose);
    font-size: var(--dv-t-xs);
    line-height: var(--dv-lh-base);
    color: var(--dv-text-muted);
  }

  .rodape-fim {
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wide);
    color: var(--dv-text-muted);
  }
}

/* ── Páginas legais (termos, privacidade) ──
   Mesmo sistema de tokens, largura de leitura em vez de largura de app. */
@layer components {
  .doc-legal {
    max-inline-size: 48rem;
    margin-inline: auto;
    padding: var(--dv-s-6) var(--dv-pad-page) var(--dv-s-12);
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-8);
  }

  .doc-voltar a {
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
    text-decoration: none;
  }
  .doc-voltar a:hover { color: var(--dv-accent); }

  .doc-cab { display: flex; flex-direction: column; gap: var(--dv-s-2); }

  .doc-eyebrow {
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wider);
    text-transform: uppercase;
    color: var(--dv-accent);
  }

  .doc-legal h1 { font-size: var(--dv-t-2xl); }

  .doc-vigencia {
    font-family: var(--dv-f-mono);
    font-size: var(--dv-t-xs);
    color: var(--dv-text-muted);
  }

  .doc-aviso {
    padding: var(--dv-s-4);
    background: var(--dv-fill-amber);
    border: 1px solid var(--dv-line-amber);
    border-radius: var(--dv-r);
    font-size: var(--dv-t-sm);
    line-height: var(--dv-lh-base);
    color: var(--dv-text-soft);
  }
  .doc-aviso b { color: var(--dv-amber); }

  .doc-legal section { display: flex; flex-direction: column; gap: var(--dv-s-3); }

  .doc-legal h2 {
    font-size: var(--dv-t-lg);
    padding-block-end: var(--dv-s-2);
    border-block-end: 1px solid var(--dv-border);
  }

  .doc-legal p,
  .doc-legal li {
    max-inline-size: var(--dv-w-prose);
    font-size: var(--dv-t-base);
    line-height: var(--dv-lh-base);
    color: var(--dv-text-soft);
  }

  .doc-legal ul {
    display: flex;
    flex-direction: column;
    gap: var(--dv-s-2);
    padding-inline-start: var(--dv-s-5);
    list-style: disc;
  }

  .doc-legal b { color: var(--dv-text); }

  .doc-legal code {
    font-family: var(--dv-f-mono);
    font-size: 0.875em;
    padding: 0.1em 0.4em;
    background: var(--dv-fill-amber);
    border-radius: var(--dv-r-sm);
    color: var(--dv-amber);
  }

  .doc-tabela {
    inline-size: 100%;
    font-size: var(--dv-t-sm);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-r);
    overflow: hidden;
  }

  .doc-tabela th {
    padding: var(--dv-s-3);
    background: var(--dv-surface-2);
    text-align: start;
    font-size: var(--dv-t-2xs);
    letter-spacing: var(--dv-ls-wide);
    text-transform: uppercase;
    color: var(--dv-text-muted);
  }

  .doc-tabela td {
    padding: var(--dv-s-3);
    border-block-start: 1px solid var(--dv-border);
    color: var(--dv-text-soft);
    vertical-align: top;
  }

  /* No celular, cada linha da tabela vira bloco — mesma solução do laudo. */
  @media (max-width: 40rem) {
    .doc-tabela, .doc-tabela tbody, .doc-tabela tr, .doc-tabela td { display: block; }
    .doc-tabela thead { display: none; }
    .doc-tabela tr { border-block-start: 1px solid var(--dv-border); padding-block: var(--dv-s-2); }
    .doc-tabela td { border-block-start: 0; padding-block: var(--dv-s-1); }
  }

  .doc-fim {
    padding-block-start: var(--dv-s-5);
    border-block-start: 1px solid var(--dv-border);
    font-size: var(--dv-t-sm);
    color: var(--dv-text-muted);
  }
  .doc-fim a { color: var(--dv-text-soft); }
}

@layer utilities {
  .hidden { display: none; }

  /* Os nomes vêm do tema antigo e continuam no HTML/JS; o valor agora é
     semântico. `text-cyan` = acento da marca, não mais o ciano neon. */
  .text-cyan  { color: var(--dv-accent); }
  .text-green { color: var(--dv-success); }
  .text-gold  { color: var(--dv-amber); }
  .text-red   { color: var(--dv-danger); }
  .text-muted { color: var(--dv-text-muted); }
}

/* Alvos de toque maiores em telas sensíveis ao toque. */
@media (pointer: coarse) {
  @layer utilities {
    .li-btn,
    .btn-reopen,
    .ri-chip { min-block-size: var(--dv-tap); }
  }
}

/* ══════════════════════════════════════════════════════════
   IMPRESSÃO — o laudo em papel. Camada mais alta: dispensa
   !important para vencer todo o resto.
   ══════════════════════════════════════════════════════════ */
@layer print {
  @media print {
    body {
      background: #FFFFFF;
      background-image: none;
      color: #000000;
    }

    .top-bar,
    .main-header,
    .search-card,
    .preview-card,
    .btn-print,
    .modal-overlay,
    .report-index {
      display: none;
    }

    .report-card {
      border: none;
      box-shadow: none;
      background: #FFFFFF;
      color: #000000;
      padding: 0;
    }

    .rgroup,
    .rs-tile,
    .card-item,
    .basic-card {
      border-color: #999999;
      background: #FFFFFF;
      break-inside: avoid;
    }

    .info-field span,
    .data-table td,
    .card-item-info b,
    .rg-title,
    .rs-v { color: #000000; }

    .info-field label,
    .rs-l { color: #444444; }

    .data-table th {
      background: #EEEEEE;
      color: #000000;
    }

    .badge-leak-pwd {
      border-color: #000000;
      color: #CC0000;
      background: none;
    }

    /* Grupos colapsados precisam abrir no papel. */
    .rgroup > summary { display: none; }
    .rgroup-body { display: block; }
  }
}
}

/* ═══════════════════════════════════════════════════════════════
   LOADING SCREEN — Investigação em Andamento
   ═══════════════════════════════════════════════════════════════ */

.loading-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.loading-card {
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 16px;
  padding: 3rem 2.5rem;
  max-width: 520px;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(57, 190, 220, 0.08), 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ── Radar ── */
.loading-radar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 2rem;
  position: relative;
  background: radial-gradient(circle, rgba(57, 190, 220, 0.06) 0%, transparent 70%);
}

.radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(57, 190, 220, 0.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.ring-1 { width: 60px; height: 60px; border-color: rgba(57, 190, 220, 0.25); }
.ring-2 { width: 100px; height: 100px; }
.ring-3 { width: 140px; height: 140px; border-color: rgba(57, 190, 220, 0.1); }

.radar-sweep {
  position: absolute;
  top: 50%; left: 50%;
  width: 50%;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--dv-brand) 0%, transparent 100%);
  animation: radarSweep 2.5s linear infinite;
  z-index: 2;
}

.radar-sweep::after {
  content: '';
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 60px;
  background: conic-gradient(from 0deg, transparent 0%, rgba(57, 190, 220, 0.12) 30%, transparent 100%);
  transform-origin: left center;
}

@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.radar-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: var(--dv-brand-tint);
  border: 2px solid var(--dv-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  animation: radarPulse 2s ease-in-out infinite;
}

.radar-center i {
  font-size: 1.1rem;
  color: var(--dv-brand-strong);
}

@keyframes radarPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57, 190, 220, 0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(57, 190, 220, 0); }
}

/* ── Texto ── */
.loading-title {
  font-family: 'Archivo', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dv-ink);
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
}

.loading-subtitle {
  font-size: 0.95rem;
  color: var(--dv-brand-strong);
  margin: 0 0 1.5rem;
  font-weight: 500;
}

/* ── Barra de progresso ── */
.loading-progress-track {
  width: 100%;
  height: 6px;
  background: var(--dv-surface-2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.loading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--dv-brand-deep), var(--dv-brand), var(--dv-brand-strong));
  border-radius: 3px;
  transition: width 0.4s ease;
  position: relative;
  box-shadow: 0 0 8px rgba(57, 190, 220, 0.5);
}

.loading-percent {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: var(--dv-brand);
  font-weight: 600;
  display: block;
  margin-bottom: 1.5rem;
}

/* ── Steps ── */
.loading-steps {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

.loading-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--dv-surface-2);
  border: 1px solid transparent;
  opacity: 0.35;
  transition: all 0.5s ease;
}

.loading-step.active {
  opacity: 1;
  border-color: var(--dv-brand-deep);
  background: var(--dv-brand-tint);
}

.loading-step.done {
  opacity: 0.7;
  border-color: transparent;
}

.loading-step.done .step-icon {
  background: var(--dv-success);
  color: #fff;
}

.loading-step.done .step-icon i::before {
  content: "\f00c"; /* fa-check */
}

.step-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dv-surface-3);
  color: var(--dv-brand);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: all 0.4s ease;
}

.loading-step.active .step-icon {
  background: var(--dv-brand);
  color: #fff;
  animation: stepGlow 1.5s ease-in-out infinite;
}

@keyframes stepGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57, 190, 220, 0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(57, 190, 220, 0); }
}

.loading-step span {
  font-size: 0.88rem;
  color: var(--dv-ink-soft);
  font-weight: 500;
}

.loading-step.active span {
  color: var(--dv-ink);
}

/* ── Disclaimer ── */
.loading-disclaimer {
  font-size: 0.78rem;
  color: var(--dv-muted);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.loading-disclaimer i {
  color: var(--dv-success);
  font-size: 0.7rem;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .loading-card {
    padding: 2rem 1.2rem;
  }
  .loading-radar {
    width: 110px;
    height: 110px;
  }
  .ring-1 { width: 46px; height: 46px; }
  .ring-2 { width: 78px; height: 78px; }
  .ring-3 { width: 110px; height: 110px; }
  .radar-center { width: 36px; height: 36px; }
  .loading-title { font-size: 1.1rem; }
  .loading-step { padding: 0.5rem 0.6rem; }
  .step-icon { width: 28px; height: 28px; font-size: 0.75rem; }
  .loading-step span { font-size: 0.82rem; }
}