@font-face { font-family:'Satoshi'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/satoshi-700.woff2) format('woff2'); }
  @font-face { font-family:'Satoshi'; font-style:normal; font-weight:900; font-display:swap; src:url(../fonts/satoshi-900.woff2) format('woff2'); }
  @font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/inter-var.woff2) format('woff2'); }
  :root { --f-display:'Satoshi','Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; --f-sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  html, body { overflow-x:clip; }
  header[id], section[id] { scroll-margin-top:84px; }
  body { background:#F5F4F1; font-family:var(--f-sans); -webkit-font-smoothing:antialiased; color:#0A1114; }
  img { display:block; max-width:100%; }
  a { color:#C93100; text-decoration:none; }
  a:hover { color:#A32700; }
  ::selection { background:#FF3C00; color:#fff; }
  h1,h2,h3 { font-family:var(--f-display); letter-spacing:-.025em; }
  .wrap { max-width:1240px; margin:0 auto; padding:0 48px; }
  .kick { font-size:14px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; }
  .d1 { font-size:clamp(38px,6.4vw,84px); line-height:1.02; }
  .d2 { font-size:clamp(30px,4.2vw,52px); line-height:1.06; }
  .d3 { font-size:clamp(26px,3.4vw,46px); line-height:1.08; }
  .lead { font-size:clamp(17px,1.5vw,24px); line-height:1.5; }
  .sect { padding:clamp(64px,8vw,120px) 0; }
  .g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .g2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .g6 { display:grid; grid-template-columns:repeat(6,1fr); gap:24px; }
  .skip { position:absolute; left:-9999px; top:0; z-index:100; background:#FF3C00; color:#060B0E; padding:12px 20px; border-radius:0 0 10px 0; font-weight:600; }
  .skip:focus { left:0; color:#060B0E; }
  :focus-visible { outline:3px solid #FF3C00; outline-offset:3px; border-radius:4px; }
  .navtoggle { display:none; }
  .btn { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:17px; border-radius:12px; padding:16px 30px; transition:.18s; cursor:pointer; }
  .btn-p { background:#FF3C00; color:#060B0E; }
  .btn-p:hover { background:#e63a00; color:#060B0E; }
  .frame { border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,.08); box-shadow:0 40px 90px -40px rgba(6,11,14,.4); background:#fff; }
  .chrome { display:flex; gap:8px; padding:14px 18px; background:#eceae4; border-bottom:1px solid #e0ddd5; }
  .chrome span { width:12px; height:12px; border-radius:50%; background:#cfccc4; }
  /* Reveals de scroll (só com JS ativo; padrão é visível).
     REDUCED-MOTION EM DOIS NÍVEIS: opacidade nao é movimento e nao dispara sintoma vestibular,
     entao o fade vale para todo mundo. So o deslocamento e a escala ficam atras do portao. */
  .rv-on [data-rv] { opacity:0; transition:opacity .56s cubic-bezier(.16,1,.3,1); transition-delay:var(--rvd, 0ms); }
  .rv-on [data-rv="art"] { transition-duration:.64s; }
  .rv-on [data-rv].rv-in { opacity:1; }
  .rv-on [data-rvg] > * { opacity:0; transition:opacity .52s cubic-bezier(.16,1,.3,1); }
  .rv-on [data-rvg] > *:nth-child(2) { transition-delay:70ms; }
  .rv-on [data-rvg] > *:nth-child(3) { transition-delay:140ms; }
  .rv-on [data-rvg] > *:nth-child(4) { transition-delay:210ms; }
  .rv-on [data-rvg] > *:nth-child(5) { transition-delay:280ms; }
  .rv-on [data-rvg] > *:nth-child(6) { transition-delay:350ms; }
  .rv-on [data-rvg] > *:nth-child(n+7) { transition-delay:380ms; }
  .rv-on [data-rvg].rv-in > * { opacity:1; }
  @media (prefers-reduced-motion: no-preference) {
    .rv-on [data-rv] { transform:translateY(18px); transition:opacity .56s cubic-bezier(.16,1,.3,1), transform .56s cubic-bezier(.16,1,.3,1); transition-delay:var(--rvd, 0ms); }
    .rv-on [data-rv="art"] { transform:translateY(24px) scale(.985); transition-duration:.64s, .64s; }
    .rv-on [data-rv].rv-in { transform:none; }
    .rv-on [data-rvg] > * { transform:translateY(16px); transition:opacity .52s cubic-bezier(.16,1,.3,1), transform .52s cubic-bezier(.16,1,.3,1); }
    .rv-on [data-rvg].rv-in > * { transform:none; }
  }
  /* Planos: PRO protagonista, Corporate companheiro */
  .pl-agrid { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:stretch; }
  @media (max-width:900px) { .pl-agrid { grid-template-columns:1fr; } }
  /* Passos "Como funciona" sincronizados com o ciclo de 17s do demo */
  .cf-step { border-top:2px solid #1e2a2f; padding-top:20px; position:relative; color:#5c6b71; }
  .cf-step:first-child { border-top-color:#FF3C00; color:#FF3C00; }
  .cf-num { font-family:var(--f-display); font-weight:900; font-size:24px; color:inherit; }
  .cf-title { font-family:var(--f-display); font-weight:700; font-size:20px; color:#fff; margin-top:10px; }
  .cf-p { font-size:16px; line-height:1.45; color:#a7c0c9; margin-top:8px; }
  .cf-step:nth-child(1) { animation: cfs1 17s forwards; }
  .cf-step:nth-child(2) { animation: cfs2 17s forwards; }
  .cf-step:nth-child(3) { animation: cfs3 17s forwards; }
  .cf-step:nth-child(4) { animation: cfs4 17s forwards; }
  @keyframes cfs1 { 0%,26.9% { border-top-color:#FF3C00; color:#FF3C00; opacity:1; } 27%,100% { border-top-color:#1e2a2f; color:#5c6b71; opacity:.65; } }
  @keyframes cfs2 { 0%,26.9% { border-top-color:#1e2a2f; color:#5c6b71; opacity:.65; } 27%,53.9% { border-top-color:#FF3C00; color:#FF3C00; opacity:1; } 54%,100% { border-top-color:#1e2a2f; color:#5c6b71; opacity:.65; } }
  @keyframes cfs3 { 0%,53.9% { border-top-color:#1e2a2f; color:#5c6b71; opacity:.65; } 54%,70.9% { border-top-color:#FF3C00; color:#FF3C00; opacity:1; } 71%,100% { border-top-color:#1e2a2f; color:#5c6b71; opacity:.65; } }
  @keyframes cfs4 { 0%,70.9% { border-top-color:#1e2a2f; color:#5c6b71; opacity:.65; } 71%,100% { border-top-color:#FF3C00; color:#FF3C00; opacity:1; } }
  /* Hero */
  .hero-atmo { position:absolute; inset:0; background:radial-gradient(90% 80% at 85% 8%, rgba(3,43,55,.9) 0%, rgba(6,11,14,0) 55%); opacity:.7; }
  .hero-pad { position:relative; padding-top:clamp(72px,9vw,120px); padding-bottom:clamp(64px,8vw,110px); }
  .hero-data { margin-top:60px; }
  .hero-data-kick { font-family:var(--f-sans); font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#FF3C00; margin-bottom:18px; }
  .hero-data-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; max-width:780px; }
  .hero-stat { border-top:1px solid #1e2a2f; padding-top:16px; }
  .hero-stat.is-first { border-top:2px solid #FF3C00; }
  .hero-num { font-family:var(--f-display); font-weight:900; font-size:clamp(28px,3.2vw,38px); color:#fff; line-height:1; }
  .hero-lab { font-size:15px; color:#8a949a; margin-top:6px; }
  /* Demo animation (loop ~17s) */
  @keyframes vDrop { 0%,8%{opacity:0;transform:translateY(14px);} 12%,23%{opacity:1;transform:translateY(0);} 27%,100%{opacity:0;transform:translateY(14px);} }
  @keyframes vSelName { 0%,11%{color:#0A1114;} 15%,100%{color:#C93100;} }
  @keyframes vPlaceholder { 0%,27%{opacity:1;} 31%,52%{opacity:0;} 56%,100%{opacity:1;} }
  @keyframes vPrompt { 0%,28%{opacity:0;} 32%,49%{opacity:1;} 52%,100%{opacity:0;} }
  @keyframes vCaret { 0%,100%{opacity:1;} 50%{opacity:0;} }
  @keyframes vSend { 0%,48%{background:#ffb08f;} 50%,53%{background:#e63a00;} 55%,100%{background:#ffb08f;} }
  @keyframes vUser { 0%,50%{opacity:0;transform:translateY(12px);} 54%,100%{opacity:1;transform:translateY(0);} }
  @keyframes vThink { 0%,55%{opacity:0;} 58%,68%{opacity:1;} 72%,100%{opacity:0;} }
  @keyframes vReply { 0%,70%{opacity:0;transform:translateY(14px);} 74%,100%{opacity:1;transform:translateY(0);} }
  /* Hover e interacoes */
  .btn { will-change:transform; }
  .btn-p:hover { transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(255,60,0,.6); }
  .btn:hover { transform:translateY(-2px); }
  .btn span { transition:transform .18s ease; }
  .btn:hover span { transform:translateX(4px); }
  nav a[href^="#"]:not(.btn) { position:relative; }
  nav a[href^="#"]:not(.btn)::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%; background:#FF3C00; transform:scaleX(0); transform-origin:0 50%; transition:transform .22s ease; }
  nav a[href^="#"]:not(.btn):hover::after { transform:scaleX(1); }
  nav a[href^="#"]:not(.btn):hover { color:#0A1114; }
  .frame { transition:transform .35s ease, box-shadow .35s ease; }
  .frame:hover { transform:translateY(-6px); box-shadow:0 60px 110px -40px rgba(6,11,14,.55); }
  /* card lifts */
  #confianca div[style*="border-radius:16px"], #seguranca div[style*="border-radius:16px"], #servicos .g3 > div, section div[style*="border-radius:18px"] { transition:transform .28s ease, box-shadow .28s ease; }
  #confianca div[style*="border-radius:16px"]:hover, #seguranca div[style*="border-radius:16px"]:hover, #servicos .g3 > div:hover, section div[style*="border-radius:18px"]:hover { transform:translateY(-6px); box-shadow:0 26px 50px -24px rgba(6,11,14,.4); }
  /* scroll reveal */
  @keyframes vFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} }
  .floaty { animation:vFloat 7s ease-in-out infinite; }
  /* Hero encenado */
  @keyframes vIn { from{opacity:0;transform:translateY(26px);} to{opacity:1;transform:none;} }
  .stage > * { animation:vIn .8s cubic-bezier(.22,.61,.36,1) both; }
  .stage > *:nth-child(1){animation-delay:.05s} .stage > *:nth-child(2){animation-delay:.16s}
  .stage > *:nth-child(3){animation-delay:.27s} .stage > *:nth-child(4){animation-delay:.38s}
  .stage > *:nth-child(5){animation-delay:.49s}
  /* Progresso de leitura */
  .progress { position:fixed; top:0; left:0; height:3px; width:100%; background:#FF3C00; z-index:60; transform:scaleX(0); transform-origin:0 0; transition:transform .1s linear; }
  /* Nav condensada e ancora ativa */
  nav { transition:background .25s ease, box-shadow .25s ease; }
  nav.tight { box-shadow:0 8px 26px -18px rgba(6,11,14,.5); }
  nav a.active { color:#0A1114 !important; font-weight:700 !important; }
  nav a.active::after { transform:scaleX(1) !important; }
  /* Chips de especialidade */
  .chip { border:1px solid #dcd9d1; background:transparent; border-radius:100px; padding:12px 22px; font-family:var(--f-display); font-weight:700; font-size:16px; color:#0A1114; cursor:pointer; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
  .chip:hover { transform:translateY(-3px); border-color:#FF3C00; }
  .chip[aria-pressed="true"] { background:#FF3C00; color:#060B0E; border-color:#FF3C00; }
  /* Anotacoes antialucinacao */
  .note { transition:opacity .5s ease, transform .5s ease; }
  .note[data-nv="0"] { opacity:.25; transform:translateY(6px); }
  .note[data-nv="1"] { opacity:1; transform:none; }
  /* Logs de auditoria: painel nativo com dados ilustrativos (substitui screenshot) */
  /* min-width:0 em toda a cadeia: sem isso o min-content da tabela estica o item do grid e o painel e cortado */
  .lg-cell, .lg-panel, .lg-tablewrap { min-width:0; }
  /* Base (e fallback sem subgrid): celula empilha painel + legenda, painel cresce. */
  .lg-cell { display:flex; flex-direction:column; gap:16px; }
  .lg-cell > .frame { flex:1 1 auto; display:flex; flex-direction:column; }
  .lg-tablewrap, .uc-body { flex:1 1 auto; }
  /* Paineis irmaos com a MESMA altura. Só esticar o frame nao basta: as legendas quebram
     em numeros de linha diferentes e cada painel fica com a sobra da propria celula.
     Com subgrid as duas celulas dividem as mesmas trilhas — uma para o painel, outra
     para a legenda — entao painel e legenda alinham independente da quebra de texto. */
  @supports (grid-template-rows: subgrid) {
    @media (min-width:769px) {
      .lg-pair { grid-template-rows:1fr auto; }
      .lg-pair > .lg-cell { display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:16px; }
    }
  }
  .lg-panel { background:#fff; color:#0A1114; }
  .pnl-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px 0; }
  .pnl-title { font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:-.02em; }
  .pnl-sub { font-size:13px; line-height:1.45; color:#5f6764; margin-top:4px; max-width:46ch; }
  .pnl-badge { flex:none; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#5F6764; background:#F5F4F1; border:1px solid #DCD9D1; border-radius:100px; padding:5px 10px; }
  .lg-tabs { display:flex; gap:4px; padding:16px 22px 0; overflow-x:auto; }
  .lg-tab { flex:none; font-size:13px; font-weight:600; color:#5F6764; padding:9px 13px; border-radius:8px 8px 0 0; border-bottom:2px solid transparent; white-space:nowrap; }
  .lg-tab.is-on { color:#0A1114; background:#F5F4F1; border-bottom-color:#FF3C00; }
  .lg-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:14px 22px; border-bottom:1px solid #E5E2DA; }
  .lg-sel { font-size:12px; color:#3A4247; border:1px solid #E5E2DA; border-radius:8px; padding:7px 11px; background:#F5F4F1; white-space:nowrap; }
  .lg-export { margin-left:auto; font-size:12px; font-weight:600; color:#060B0E; background:#FF3C00; border-radius:8px; padding:8px 13px; white-space:nowrap; }
  .lg-tablewrap { overflow-x:auto; }
  /* table-layout:fixed + reticencias: a tabela acompanha a largura do painel em vez de forcar scroll */
  .lg-t { width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
  .lg-t th { text-align:left; font-weight:600; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:#5F6764; padding:10px 14px; border-bottom:1px solid #E5E2DA; }
  .lg-t th:nth-child(1) { width:36%; }
  .lg-t th:nth-child(2) { width:25%; }
  .lg-t th:nth-child(3) { width:21%; }
  .lg-t th:nth-child(4) { width:18%; }
  .lg-t td { padding:9px 14px; border-bottom:1px solid #E5E2DA; color:#3A4247; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lg-t tr:last-child td { border-bottom:0; }
  .lg-file { display:flex; align-items:center; gap:8px; color:#0A1114; font-weight:500; min-width:0; }
  .lg-file svg { flex:none; }
  .lg-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lg-act { display:inline-flex; align-items:center; gap:7px; }
  .lg-act::before { content:""; width:6px; height:6px; border-radius:100px; background:#DCD9D1; flex:none; }
  .lg-act.is-del { color:#C93100; font-weight:600; }
  .lg-act.is-del::before { background:#FF3C00; }
  .lg-t td.lg-when { color:#5F6764; }
  .lg-cap { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  @keyframes lgIn { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
  @keyframes lgInFade { from { opacity:0; } to { opacity:1; } }
  /* o stagger em opacidade vale para todos; so o deslocamento das linhas e o crescimento
     das barras (mudanca de tamanho = movimento) ficam atras do portao */
  .pnl-armed .lg-row { opacity:0; }
  .pnl-run .lg-row { animation:lgInFade .52s cubic-bezier(.16,1,.3,1) both; }
  .pnl-run .lg-row:nth-child(1) { animation-delay:.04s; }
  .pnl-run .lg-row:nth-child(2) { animation-delay:.11s; }
  .pnl-run .lg-row:nth-child(3) { animation-delay:.18s; }
  .pnl-run .lg-row:nth-child(4) { animation-delay:.25s; }
  .pnl-run .lg-row:nth-child(5) { animation-delay:.32s; }
  .pnl-run .lg-row:nth-child(6) { animation-delay:.39s; }
  .pnl-run .lg-row:nth-child(n+7) { animation-delay:.46s; }
  @media (prefers-reduced-motion: no-preference) {
    .pnl-run .lg-row { animation-name:lgIn; }
    /* barras de uso: crescem da esquerda ao entrar em cena.
       :not(.pnl-run) e obrigatorio — sem ele a regra "armed" continua valendo depois do run
       (especificidade maior que a base) e a barra fica travada em scaleX(0). */
    .pnl-armed:not(.pnl-run) .uc-bar i { transform:scaleX(0); }
    .pnl-run .uc-bar i { transition:transform 1.1s cubic-bezier(.16,1,.3,1) .15s; }
  }
  /* Uso de creditos: painel nativo com dados ilustrativos (substitui screenshot) */
  .uc-panel { background:#fff; color:#0A1114; min-width:0; }
  .uc-body { padding:16px 22px 22px; }
  .uc-card { border:1px solid #E5E2DA; border-radius:12px; padding:16px; }
  .uc-cardtitle { font-weight:600; font-size:13px; }
  .uc-carddesc { font-size:12px; line-height:1.45; color:#5F6764; margin-top:3px; }
  .uc-block { background:#F5F4F1; border-radius:8px; padding:14px; margin-top:14px; }
  .uc-lab { font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#5F6764; }
  .uc-figrow { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:5px; }
  .uc-fig { font-family:var(--f-display); font-weight:900; font-size:26px; letter-spacing:-.02em; line-height:1.1; }
  .uc-fig em { font-family:var(--f-sans); font-style:normal; font-weight:400; font-size:13px; color:#5F6764; letter-spacing:0; }
  .uc-pct { flex:none; font-size:11px; font-weight:600; color:#C93100; background:#fff; border:1px solid #E5E2DA; border-radius:100px; padding:3px 9px; }
  .uc-bar { height:8px; border-radius:100px; background:#E5E2DA; margin-top:10px; overflow:hidden; }
  .uc-bar i { display:block; height:100%; width:100%; border-radius:100px; background:#FF3C00; transform:scaleX(var(--v,1)); transform-origin:0 50%; }
  .uc-bar.is-mod i { background:#3A4247; }
  .uc-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; font-size:12px; color:#5F6764; margin-top:8px; }
  .uc-mod { margin-top:16px; }
  .uc-modhead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .uc-modname { font-weight:600; font-size:13px; }
  .uc-modval { font-family:var(--f-display); font-weight:700; font-size:15px; }
  /* Indice do dossie: as 13 especialidades agrupadas pela natureza do trabalho.
     Sem ordinais — a ordem nao carrega informacao; o agrupamento carrega, e quebra
     a lista em 3 blocos de 4-5, dentro do limite de memoria de trabalho. */
  .dossie { margin-top:52px; gap:40px; align-items:start; }
  .dsg-lab { position:relative; font-family:var(--f-sans); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#C93100; padding-bottom:14px; border-bottom:2px solid #FF3C00; }
  .dsg-list { list-style:none; }
  .dsi { position:relative; border-top:1px solid #0A1114; }
  .dsi:first-child { border-top:0; }
  .dsi-t { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; width:100%; padding:15px 0 14px; background:none; border:0; text-align:left; cursor:pointer; color:#5F6764; font-family:inherit; }
  .dsi-h { display:block; min-width:0; }
  .dsi-n { display:block; font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:-.02em; color:#0A1114; transition:color .2s ease; }
  .dsi-d { display:block; font-size:14px; line-height:1.45; color:#5F6764; margin-top:5px; }
  .dsi-i { flex:none; margin-top:7px; transition:transform .3s cubic-bezier(.16,1,.3,1); }
  .dsi-t:hover .dsi-n { color:#C93100; }
  .dsi.is-open .dsi-i { transform:rotate(180deg); }
  /* expansao sem medir altura em JS: 0fr -> 1fr anima; visibility tira do leitor de tela quando fechado */
  .dsi-p { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1), visibility 0s linear .38s; }
  .dsi.is-open .dsi-p { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1), visibility 0s; }
  .dsi-pi { overflow:hidden; }
  .dsi-inv, .dsi-lac { font-size:13.5px; line-height:1.5; color:#3A4247; }
  .dsi-inv { margin-bottom:11px; }
  .dsi-lac { padding-bottom:16px; }
  .dsi-inv b, .dsi-lac b { display:block; font-family:var(--f-sans); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#5F6764; margin-bottom:3px; }
  /* Marcador de lacuna, calibrado para fundo claro: #C93100, nunca #FF3C00 como texto pequeno no Papel.
     isolation:isolate cria o contexto de empilhamento para a tinta (::before, z-index:-1) ficar
     atras do texto sem cair atras do fundo da secao. Estado padrao = ja marcado. */
  .mk { position:relative; isolation:isolate; display:inline-flex; align-items:center; border:1px solid #C93100; color:#C93100; border-radius:7px; padding:1px 7px; font-family:var(--f-display); font-weight:700; font-size:12px; }
  /* a tinta e o proprio Laranja Grifo com alfa: grifo-nevoa (#FDECE5) sobre Papel da 1,045:1,
     invisivel. A 28% o traco le (1,44:1 contra o fundo) e o texto sob ele fica em 6,9:1. */
  .mk::before { content:""; position:absolute; z-index:-1; inset:0; border-radius:6px; background:rgba(255,60,0,.28); transform:scaleX(0); transform-origin:0 50%; opacity:0; }
  /* o traco leva a curva no proprio keyframe: com ease-out exponencial na animacao inteira
     a varredura fecharia nos primeiros 15% e nao leria como traco de caneta */
  @keyframes mkInk {
    0% { transform:scaleX(0); opacity:1; animation-timing-function:cubic-bezier(.4,.1,.3,1); }
    55% { transform:scaleX(1); opacity:1; animation-timing-function:ease-out; }
    100% { transform:scaleX(1); opacity:0; }
  }
  @keyframes mkMark {
    0%,55% { border-color:transparent; color:#3A4247; animation-timing-function:cubic-bezier(.16,1,.3,1); }
    100% { border-color:#C93100; color:#C93100; }
  }
  /* a MARCA resolvendo e so cor e borda — zero movimento, entao roda tambem com
     reduced-motion: o momento sobrevive, so a varredura da tinta e que fica atras do portao */
  .dsi.is-open .mk { animation:mkMark .62s linear .3s both; }
  @media (prefers-reduced-motion: no-preference) {
    /* o grifo passa sobre a lacuna: a nevoa varre o token e a marca resolve atras dela.
       A palavra ja esta legivel o tempo todo — o que chega e a MARCA, nao o texto. */
    .dsi.is-open .mk::before { animation:mkInk .62s linear .3s both; }
  }
  @keyframes dsRule { to { transform:scaleX(1); } }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      /* cada regua se desenha da esquerda conforme a entrada cruza a viewport */
      .dsi:not(:first-child) { border-top-color:transparent; }
      /* o traco fecha enquanto a entrada ainda esta entrando: varias reguas visiveis ao mesmo
         tempo em larguras diferentes leem como bug, nao como efeito */
      .dsi:not(:first-child)::before { content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:#0A1114; transform:scaleX(0); transform-origin:0 50%; animation:dsRule cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 6% entry 62%; }
      .dsg-lab { border-bottom-color:transparent; }
      .dsg-lab::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#FF3C00; transform:scaleX(0); transform-origin:0 50%; animation:dsRule cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 2% entry 48%; }
    }
  }
  @media (max-width:560px){
    .lg-t th:nth-child(4), .lg-t td:nth-child(4) { display:none; }
    .pnl-head, .lg-tabs, .lg-filters { padding-left:14px; padding-right:14px; }
    .lg-t th:nth-child(1) { width:44%; }
    .lg-t th:nth-child(2) { width:30%; }
    .lg-t th:nth-child(3) { width:26%; }
    .pnl-sub { display:none; }
  }
  /* Responsivo */
  @media (max-width:1024px){
    .wrap { padding-left:32px; padding-right:32px; }
    .g3, .g4 { grid-template-columns:repeat(2,1fr); }
    .g6 { grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:1100px){
    .navlinks { position:fixed; inset:76px 0 auto 0; flex-direction:column; align-items:stretch !important; gap:0 !important; background:#F5F4F1; border-bottom:1px solid #e5e2da; padding:12px 22px 22px; display:none !important; }
    .navlinks.open { display:flex !important; }
    .navlinks a { padding:16px 0; border-bottom:1px solid #e5e2da; font-size:18px !important; }
    .navlinks a.btn { justify-content:center; border-bottom:0; margin-top:14px; }
    .navtoggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #dcd9d1; border-radius:11px; background:transparent; cursor:pointer; }
    .demoshell { display:none !important; }
    .demofallback { display:block !important; }
  }
  @media (max-width:768px){
    .wrap { padding-left:22px; padding-right:22px; }
    .g3, .g4, .g2, .g6 { grid-template-columns:1fr; }
    .compare { grid-template-columns:1fr !important; }
    .hero-data-row { grid-template-columns:1fr; gap:18px; }
  }
  @media (max-width:480px){
    .wrap { padding-left:18px; padding-right:18px; }
    .btn { width:100%; justify-content:center; }
  }
  @keyframes vInFade { from { opacity:0; } to { opacity:1; } }
  @media (prefers-reduced-motion: reduce){
    /* Nao e "desligar tudo". O que dispara sintoma vestibular e movimento de area grande,
       deslocamento longo, escala, rotacao e loop infinito — nao opacidade nem cor.
       Entao aqui trocamos movimento por fade e mantemos so o que e seguro. */

    /* demo de 17s: sequencial, longo e em loop — salta para o estado final */
    .vanim, .cf-step { animation-duration:.01s !important; animation-iteration-count:1 !important; animation-fill-mode:forwards !important; }
    /* flutuacao em loop infinito: o pior caso, fica desligada */
    .floaty{ animation:none !important; }
    /* hero: a entrada encenada continua, sem o translateY(26px) */
    .stage > *{ animation-name:vInFade !important; transform:none !important; }
    /* marcadores de lacuna: mantem o fade escalonado, perde o deslocamento */
    .note[data-nv]{ transform:none !important; }
    /* abrir uma entrada muda altura, e altura e movimento: vira instantaneo.
       .dsi-n ficou de fora de proposito — e so cor, continua com transicao. */
    .dsi-p, .dsi-i{ transition:none !important; }
    .progress{ display:none !important; }
    *{ scroll-behavior:auto !important; }
  }