/* ============================================================================
   INFORA — A ILUSTRAÇÃO DA ASSINATURA DIGITAL (13/09/2026)
   Carregada por index.html (seção #assinatura) e por assinatura-digital.html.

   O que ela mostra é o que o assinador Infora Documentos entrega de verdade
   (desktop/pdf-engine.js): selo com QR na página escolhida, faixa lateral e
   rodapé com o código INF em todas as páginas, e o Anexo I com os dados do
   certificado. Nome, CPF e código são FICTÍCIOS — o código usa o alfabeto
   real (Crockford, sem I, L, O, U) só para não ensinar formato errado.

   🚨 Tudo desenhado em HTML/CSS/SVG, sem imagem: herda a paleta, fica nítido
   em qualquer tela e o texto continua sendo texto.
   🚨 O QR é DE VERDADE e aponta para https://infora.com.br/verificar.html —
   quem apontar a câmera cai na página de verificação, não num código morto.

   ⚠️ CORES LITERAIS, NÃO VARIÁVEIS: o index define --borda/--texto para as
   folhas CLARAS do relatório, e infora.css define os mesmos nomes para o
   fundo ESCURO. Variável aqui mudaria de cor conforme a página que carrega.

   A cena é desenhada numa prancheta fixa de 560 × 440 e encolhida inteira
   por UM número (--f), como o palco do Serasa. Quem carrega a folha decide
   o --f em cada largura; aqui ele nasce 1.
   ========================================================================== */

.ad-palco{position:relative; --f:1; height:calc(440px * var(--f)); display:block;
  text-decoration:none; color:inherit}
.ad-cena{position:absolute; left:50%; top:0; width:560px; height:440px;
  transform:translateX(-50%) scale(var(--f)); transform-origin:50% 0;
  font-family:'Space Grotesk','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  line-height:1.2; color:#0f1a16; text-align:left}
.ad-cena *{box-sizing:border-box; margin:0; padding:0}
.ad-cena svg{display:block; overflow:visible}

/* -- o fundo: halo e arcos, a mesma família do palco do Serasa ------------- */
.ad-halo{position:absolute; left:50px; top:20px; width:460px; height:400px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(31,191,107,.28), rgba(63,217,200,.07) 62%, transparent)}
.ad-arcos{position:absolute; left:40px; top:-20px; width:480px !important; height:480px !important}
.ad-arcos circle{fill:none; stroke:rgba(76,237,153,.15); stroke-width:1}

/* -- as folhas ------------------------------------------------------------- */
.ad-folha{position:absolute; border-radius:4px; overflow:hidden;
  background:linear-gradient(172deg,#ffffff 0%,#f2f7f4 100%);
  box-shadow:0 34px 60px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08)}
.ad-folha--doc{left:92px; top:30px; width:272px; height:386px; transform:rotate(-4deg); z-index:2}
.ad-folha--anexo{left:268px; top:44px; width:236px; height:334px; transform:rotate(6.5deg); z-index:1;
  background:linear-gradient(172deg,#f5f9f7 0%,#e4ede8 100%)}

/* a faixa lateral: em TODAS as páginas, fora do texto original */
.ad-faixa{position:absolute; top:0; right:0; bottom:0; width:17px;
  background:linear-gradient(180deg,#38e6a3,#3fd9c8);
  display:flex; align-items:center; justify-content:center; overflow:hidden}
.ad-faixa span{writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;
  font:700 5.4px/1 'JetBrains Mono',Consolas,ui-monospace,monospace; letter-spacing:.07em; color:#123d2b}

/* o conteúdo do documento — só a textura de um contrato */
.ad-corpo{position:absolute; left:20px; right:32px; top:22px}
.ad-doc-tit{display:block; font-size:8.6px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#0f1a16}
.ad-doc-sub{display:block; font-size:6px; color:#7b8c85; margin-top:3px !important; letter-spacing:.04em}
.ad-linhas{display:grid; gap:5px; margin-top:12px !important}
.ad-linhas i{display:block; height:3.6px; border-radius:2px; background:#dce5e0}
.ad-linhas i:nth-child(3n+2){width:93%}
.ad-linhas i:last-child{width:64%}
.ad-assina{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px !important}
.ad-assina div{border-top:.8px solid #9fb3aa; padding-top:3px !important;
  font-size:5.2px; color:#7b8c85; letter-spacing:.05em; text-transform:uppercase}

/* o rodapé: em TODAS as páginas */
.ad-rodape{position:absolute; left:14px; right:30px; bottom:9px; display:flex; gap:7px; align-items:flex-start;
  border-top:.8px solid #9fc7b3; padding-top:5px !important}
.ad-rodape b{font:700 9.5px/1 'Space Grotesk','Segoe UI',Arial,sans-serif; color:#123d2b; letter-spacing:.01em}
.ad-rodape span{display:block; font-size:4.7px; line-height:1.5; color:#1a4030; letter-spacing:.02em; white-space:nowrap}
.ad-rodape span:first-child{font-weight:700}

/* o Anexo I, atrás */
.ad-anexo-topo{height:9px; background:#123d2b}
.ad-anexo-corpo{position:absolute; left:17px; right:30px; top:24px}
.ad-anexo-tit{display:block; font:700 11px/1 'Space Grotesk','Segoe UI',Arial,sans-serif; color:#123d2b; letter-spacing:.05em}
.ad-anexo-sub{display:block; font-size:5.3px; line-height:1.4; color:#5f6f68; margin:4px 0 9px !important}
.ad-anexo-linha{display:grid; grid-template-columns:48px 1fr; gap:6px; padding:4.2px 0 !important;
  border-bottom:.6px solid #d3dfd9; font-size:5.6px; line-height:1.2}
.ad-anexo-linha span:first-child{color:#7b8c85; letter-spacing:.06em; text-transform:uppercase; font-size:4.9px}
.ad-anexo-linha span:last-child{color:#0f1a16; font-family:'JetBrains Mono',Consolas,ui-monospace,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* -- O SELO — verde da marca em degradê, tinta escura por cima -------------- */
.ad-selo{position:absolute; left:196px; top:286px; width:306px; height:106px; z-index:4;
  transform:rotate(-4deg); border-radius:9px; overflow:hidden; color:#04170d;
  background:linear-gradient(115deg,#2fe08a 0%,#36dcae 55%,#3fd9c8 100%);
  display:grid; grid-template-columns:minmax(0,1fr) 80px; gap:10px;
  padding:10px 11px 10px 17px !important;
  box-shadow:0 24px 44px -14px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.35), 0 0 42px rgba(47,224,138,.25)}
.ad-selo::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#0b2a1d}
.ad-selo-txt{min-width:0}
.ad-selo-marca{display:flex; align-items:center; gap:6px}
.ad-selo-marca svg{width:12px !important; height:13px !important; flex:none}
.ad-selo-marca b{font:700 12.5px/1 'Space Grotesk','Segoe UI',Arial,sans-serif; letter-spacing:.01em}
.ad-selo-marca small{font:700 6.2px/1 'Space Grotesk','Segoe UI',Arial,sans-serif; letter-spacing:.14em;
  padding:3px 5px !important; border-radius:3px; background:#04170d; color:#4ced99; white-space:nowrap}
.ad-selo-nome{display:block; font:700 11.6px/1.15 'Space Grotesk','Segoe UI',Arial,sans-serif; margin-top:7px !important;
  letter-spacing:.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-selo-dado{display:block; font-size:7px; line-height:1.42; color:#0a3321; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ad-selo-nome + .ad-selo-dado{margin-top:2px !important}
.ad-selo-cod{display:inline-block; margin-top:6px !important; padding:3px 6px !important; border-radius:3px;
  font:700 8.4px/1 'JetBrains Mono',Consolas,ui-monospace,monospace; letter-spacing:.05em;
  background:rgba(4,23,13,.9); color:#b9f5d6; white-space:nowrap}
.ad-selo-qr{position:relative; align-self:center; background:#fff; border-radius:6px; padding:5px 5px 4px !important; overflow:hidden}
.ad-selo-qr svg{width:70px !important; height:70px !important; color:#04170d}
.ad-selo-qr svg path{fill:currentColor}
.ad-selo-qr span{display:block; text-align:center; margin-top:3px !important;
  font:700 6px/1 'Space Grotesk','Segoe UI',Arial,sans-serif; letter-spacing:.2em; color:#123d2b}
/* a linha de leitura passando pelo QR — sutil, e some para quem pede menos movimento */
.ad-selo-qr::after{content:""; position:absolute; left:3px; right:3px; top:6px; height:2px;
  background:linear-gradient(90deg,transparent,#1fbf6b,transparent); box-shadow:0 0 8px #2fe08a;
  animation:ad-varre 3.2s ease-in-out infinite}
@keyframes ad-varre{0%,100%{top:6px; opacity:.15} 50%{top:72px; opacity:.95}}

/* -- o código INF numa moldura verde -------------------------------------- */
.ad-codigo{position:absolute; left:276px; top:0; z-index:5; padding:9px 14px 11px !important; border-radius:11px;
  background:rgba(5,12,9,.93); border:1.5px solid #4ced99;
  box-shadow:0 0 0 4px rgba(76,237,153,.1), 0 18px 40px -12px rgba(0,0,0,.85), 0 0 30px rgba(76,237,153,.22)}
.ad-codigo small{display:block; font:700 7.4px/1 'Space Grotesk','Segoe UI',Arial,sans-serif; letter-spacing:.22em;
  color:#4ced99; text-transform:uppercase; margin-bottom:6px !important}
.ad-codigo b{display:block; font:600 14.5px/1 'JetBrains Mono',Consolas,ui-monospace,monospace; letter-spacing:.05em;
  color:#eaf5f0; white-space:nowrap}

/* -- a conferência: o que a página pública responde ----------------------- */
.ad-confere{position:absolute; left:0; top:214px; z-index:5; display:flex; gap:10px; align-items:center;
  padding:10px 15px 10px 10px !important; border-radius:12px; background:rgba(8,18,14,.95);
  border:1px solid rgba(76,237,153,.38); box-shadow:0 18px 40px -12px rgba(0,0,0,.85)}
.ad-confere i{width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,#2fe08a,#3fd9c8)}
.ad-confere i svg{width:14px !important; height:14px !important}
.ad-confere b{display:block; font:700 10.8px/1.2 'Space Grotesk','Segoe UI',Arial,sans-serif; color:#eaf5f0; white-space:nowrap}
.ad-confere span{display:block; font:500 7.6px/1.3 'JetBrains Mono',Consolas,ui-monospace,monospace; color:#8fa79e; margin-top:3px !important; white-space:nowrap}

@media (prefers-reduced-motion:reduce){ .ad-selo-qr::after{animation:none; opacity:0} }