/* Danfe Digital — landing da solução */
.solucao--danfe{
  /* tokens do painel escuro: usados na abertura e no painel do fechamento */
  --painel-fundo:#0C2030;
  --painel-hora:#8D99A8;
  --visto:#18CF7C;

  --hero-navy:#0B2157;
  --hero-blue:#2C6BD8;
  --hero-blue-2:#5A93EA;
  --hero-muted:#60729A;
  --hero-grid:rgba(44,107,216,.10);
}
[data-theme="dark"] .solucao--danfe{
  --painel-fundo:#0E1B2B;
  --hero-navy:#EDF1F7;
  --hero-blue:#4E8CF0;
  --hero-blue-2:#8FB6F7;
  --hero-muted:#8A9AB4;
  --hero-grid:rgba(78,140,240,.11);
}

/* Abertura — painel de documentos e chamada editorial */
.hero--danfe{
  /* o marfim da referência abriria um bloco branco no meio de uma página */
  --marfim:transparent;
  --grafite:var(--hero-navy);

  background:none;
  min-height:0;
  padding-block:clamp(40px,7vh,86px) clamp(48px,9vh,110px);
  display:block;
}

/* a marca-d'água das setas não pertence a esta abertura; a grade técnica fica, porque */
.hero--danfe .hero__marca{display:none}

.hero--danfe .hero__interno{max-width:1360px;text-align:left}

/* Abertura — painel de documentos e chamada editorial */
.hero--danfe{
  --marfim:transparent;
  --grafite:var(--hero-navy);

  background:none;
  min-height:0;
  padding-block:clamp(40px,7vh,86px) clamp(48px,9vh,110px);
  display:block;
}
/* a marca-d'água das setas não pertence a esta abertura */
.hero--danfe .hero__marca{display:none}

.hero--danfe .hero__interno{max-width:1360px;text-align:left}

/* ---------- painel de documentos ---------- */
.painel{
  position:relative;
  display:grid;grid-template-columns:repeat(5,1fr);
  border-radius:10px;overflow:hidden;
  /* o azul-marinho da identidade, no lugar do grafite anterior */
  background:#0B2157;
  padding-block:clamp(18px,2.4vw,26px);
}
[data-theme="dark"] .painel{
  border:1px solid color-mix(in srgb,var(--hero-blue) 22%,#1D2C40);
}
.painel li{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.4vw,15px);
  padding-inline:clamp(8px,1.4vw,20px);
  border-left:1px solid rgba(255,255,255,.08);
  transition:opacity 300ms var(--ease);
}
.painel li:first-child{border-left:0}

/* Fio verde sob a coluna sob o ponteiro; as outras recuam */
.painel li::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(-1 * clamp(18px,2.4vw,26px));
  height:2px;background:var(--visto);
  transform:scaleX(0);transform-origin:center;
  transition:transform 340ms var(--ease);
}
.painel:hover li{opacity:.4}
.painel li:hover{opacity:1}
.painel li:hover::after{transform:scaleX(1)}
.painel li:hover .painel__visto{transform:scale(1.12)}
.painel li:hover .painel__quando{color:var(--visto)}

.painel__sigla{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(.8rem,1.35vw,1.05rem);letter-spacing:-.01em;
  color:#fff;
}

/* o slot guarda o anel e o visto no mesmo lugar: sem ele a coluna pularia de altura */
.painel__slot{
  position:relative;display:grid;place-items:center;
  width:clamp(20px,2.4vw,32px);height:clamp(20px,2.4vw,32px);
}
.painel__visto{
  grid-area:1/1;width:100%;height:auto;
  color:var(--visto);
  transition:transform 320ms var(--ease);
}
/* anel girando enquanto o documento ainda está sendo buscado */
.painel__carga{
  grid-area:1/1;width:78%;height:78%;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:var(--visto);
  opacity:0;
}

.painel__quando{
  font-family:var(--font-body);font-size:clamp(.7rem,1vw,.85rem);
  color:var(--painel-hora);
  transition:color 260ms var(--ease);
}

/* observação discreta, sob o painel */
.painel__nota{
  margin-top:12px;text-align:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);
}

/* Captura acontecendo: o anel gira, o visto é riscado por cima e a palavra entra */
.hero.armar .painel__visto path{stroke-dasharray:36;stroke-dashoffset:36}
.hero.armar .painel__quando{opacity:0}
.hero.armar .painel__carga{opacity:1;animation:carga-gira 1400ms linear infinite}

.hero.armar.entrou .painel__carga{
  animation:carga-gira 1400ms linear infinite,
            carga-sai 420ms cubic-bezier(.4,0,.2,1) forwards;
}
.hero.armar.entrou .painel li:nth-child(1) .painel__carga{animation-delay:0ms,420ms}
.hero.armar.entrou .painel li:nth-child(2) .painel__carga{animation-delay:0ms,860ms}
.hero.armar.entrou .painel li:nth-child(3) .painel__carga{animation-delay:0ms,1300ms}
.hero.armar.entrou .painel li:nth-child(4) .painel__carga{animation-delay:0ms,1740ms}
.hero.armar.entrou .painel li:nth-child(5) .painel__carga{animation-delay:0ms,2180ms}

.hero.armar.entrou .painel__visto path{
  animation:visto-risca 720ms cubic-bezier(.32,0,.18,1) forwards;
}
.hero.armar.entrou .painel li:nth-child(1) .painel__visto path{animation-delay:600ms}
.hero.armar.entrou .painel li:nth-child(2) .painel__visto path{animation-delay:1040ms}
.hero.armar.entrou .painel li:nth-child(3) .painel__visto path{animation-delay:1480ms}
.hero.armar.entrou .painel li:nth-child(4) .painel__visto path{animation-delay:1920ms}
.hero.armar.entrou .painel li:nth-child(5) .painel__visto path{animation-delay:2360ms}

.hero.armar.entrou .painel__quando{
  animation:quando-surge 520ms cubic-bezier(.3,0,.2,1) forwards;
}
.hero.armar.entrou .painel li:nth-child(1) .painel__quando{animation-delay:1080ms}
.hero.armar.entrou .painel li:nth-child(2) .painel__quando{animation-delay:1520ms}
.hero.armar.entrou .painel li:nth-child(3) .painel__quando{animation-delay:1960ms}
.hero.armar.entrou .painel li:nth-child(4) .painel__quando{animation-delay:2400ms}
.hero.armar.entrou .painel li:nth-child(5) .painel__quando{animation-delay:2840ms}

@keyframes carga-gira{to{transform:rotate(360deg)}}
@keyframes carga-sai{to{opacity:0;transform:scale(.62)}}
@keyframes visto-risca{to{stroke-dashoffset:0}}
@keyframes quando-surge{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* o fio que fecha: percorre a base e se recolhe */
.painel__fio{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,var(--visto) 18%,var(--visto) 82%,transparent);
  transform:scaleX(0);transform-origin:left center;opacity:0;
}
.hero.armar.entrou .painel__fio{
  animation:fio-fecha 2000ms cubic-bezier(.4,0,.25,1) 2900ms forwards;
}
@keyframes fio-fecha{
  0%{transform:scaleX(0);transform-origin:left center;opacity:1}
  42%{transform:scaleX(1);transform-origin:left center;opacity:1}
  43%{transform:scaleX(1);transform-origin:right center}
  92%{transform:scaleX(0);transform-origin:right center;opacity:1}
  100%{transform:scaleX(0);opacity:0}
}

/* ---------- composição inferior ---------- */
.abertura-danfe{
  margin-top:clamp(44px,7vw,104px);
}

.abertura-danfe__titulo{
  position:relative;padding-left:clamp(18px,2vw,30px);
  font-family:var(--font-display);font-weight:600;
  /* o teto do corpo é ditado pela coluna, não pela tela: acima de 1600px o contêiner */
  font-size:clamp(2.15rem,4.55vw,4.9rem);line-height:1;letter-spacing:-.042em;
  color:var(--grafite);
}
/* fio azul antes da manchete: a única cor da composição */
.abertura-danfe__titulo::before{
  content:"";position:absolute;left:0;top:.09em;bottom:.12em;width:2px;
  background:var(--hero-blue);
}

/* ---------- entrada, uma vez ---------- */
.hero.armar .painel,
.hero.armar .abertura-danfe{opacity:0;transform:translateY(12px)}
.hero.armar.entrou .painel,
.hero.armar.entrou .abertura-danfe{
  opacity:1;transform:none;
  transition:opacity 560ms var(--ease),transform 660ms var(--ease);
}
.hero.armar.entrou .abertura-danfe{transition-delay:140ms}

/* ---------- telas estreitas ---------- */
@media (max-width:760px){
  .painel{padding-block:16px}
  .painel li::after{bottom:-16px}
  .painel__nota{font-size:9.5px;letter-spacing:.1em}
  .painel li{gap:8px;padding-inline:6px}
}

@media (prefers-reduced-motion:reduce){
  .hero .painel__visto path{stroke-dashoffset:0}
  .hero .painel__quando{opacity:1}
  .hero .painel__carga,
  .hero .painel__fio{display:none}
}

.dores{padding-block:clamp(44px,6vw,96px)}

/* O problema que atrasa o fechamento */
.dores__topo{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(28px,5vw,72px);
  margin-bottom:0;
}

.dores__texto .rotulo{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:18px;
}
.dores__texto h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.12;letter-spacing:-.035em;
  color:var(--hero-navy);margin-bottom:16px;
}
.dores__texto h2 em{font-style:normal;color:#C62828}
[data-theme="dark"] .dores__texto h2 em{color:#EF5350}
.dores__lede{
  font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.65;
  color:var(--hero-muted);max-width:44ch;
}

/* ---------- painel do fechamento ---------- Superfície de vidro escurecido */
.fecha{
  perspective:1500px;
  filter:drop-shadow(0 40px 60px rgba(11,33,87,.28));
}
[data-theme="dark"] .fecha{filter:drop-shadow(0 40px 70px rgba(0,0,0,.6))}

.fecha__vidro{
  position:relative;aspect-ratio:1.5/1;
  border-radius:22px;overflow:hidden;
  padding:clamp(16px,2vw,26px);
  display:flex;flex-direction:column;
  background:
    linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#223C61 0%,#1B2E49 58%,#16263D 100%);
  border:1px solid rgba(120,168,220,.22);
  transform:rotateY(-6deg) rotateX(2.5deg);
  transform-origin:right center;
}
/* iluminação azul saindo das bordas internas */
.fecha__vidro::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
             inset 0 0 60px rgba(67,142,204,.14);
}
/* ---------- detalhes técnicos do topo ---------- */
.fecha__topo{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);
  padding-bottom:clamp(12px,1.6vw,18px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.fecha__titulo{
  font-family:var(--font-mono);font-size:clamp(8px,.72vw,10px);
  letter-spacing:.2em;text-transform:uppercase;
  color:#93AECB;white-space:nowrap;
}
.fecha__reguas{display:flex;align-items:center;gap:5px;flex:1}
.fecha__reguas i{display:block;height:1px;border-radius:1px;background:rgba(255,255,255,.13)}
.fecha__reguas i:nth-child(1){flex:1}
.fecha__reguas i:nth-child(2){width:16px}
.fecha__reguas i:nth-child(3){width:6px}
.fecha__estado{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#438ECC;box-shadow:0 0 0 3px rgba(67,142,204,.18);
}

/* ---------- corpo ---------- */
.fecha__corpo{
  position:relative;z-index:1;flex:1;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(78px,9vw,124px);
  align-items:center;gap:clamp(12px,2vw,28px);
  padding-top:clamp(10px,1.4vw,18px);
}

/* ---------- indicador circular ---------- */
.fecha__anel{position:relative;display:grid;place-items:center}
.fecha__anel svg{width:100%;height:auto;max-width:min(100%,300px);display:block}
.anel__feito{
  stroke-dasharray:578.1;stroke-dashoffset:578.1;
}
.anel__falta{opacity:0}

.anel__centro{
  position:absolute;display:flex;flex-direction:column;align-items:center;
  gap:clamp(7px,.9vw,11px);text-align:center;
}
.anel__pendentes{
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:#16263D;border:1px solid #EF5350;color:#EF5350;
  font-family:var(--font-mono);font-weight:400;
  font-size:clamp(7.5px,.72vw,10px);letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;opacity:0;
}
.anel__estado{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:clamp(7px,.64vw,9px);
  letter-spacing:.14em;text-transform:uppercase;color:#7C93AF;
  white-space:nowrap;opacity:0;
}
.anel__estado svg{width:11px;height:11px;flex:none}

/* ---------- coluna de documentos ---------- */
.fecha__docs{display:flex;flex-direction:column}
.fecha__docs .doc{
  position:relative;
  height:clamp(21px,2.5vw,32px);border-radius:4px;
  padding:clamp(3px,.4vw,5px) clamp(5px,.7vw,8px);
  background:linear-gradient(160deg,#FFF,#EDF1F6);
  /* a sombra é o que separa um cartão do outro na pilha */
  box-shadow:0 -1px 0 rgba(8,18,32,.10),0 5px 10px rgba(8,18,32,.30);
  /* sobreposição pequena: pilha sem fundir os cartões */
  margin-top:clamp(-4px,-.4vw,-3px);
  opacity:0;transform:translateX(12px);
}
.fecha__docs .doc:first-child{margin-top:0}
/* os ausentes não se sobrepõem: o vazio precisa ser contável */
.fecha__docs .doc--falta{
  height:clamp(19px,2.2vw,28px);
  margin-top:clamp(5px,.6vw,7px);
}
.fecha__docs .doc--falta:first-of-type{margin-top:clamp(10px,1.3vw,15px)}
/* dobra no canto superior direito */
/* a aba dobrada: triângulo claro no canto, com um fio de sombra */
.doc__dobra{
  position:absolute;top:0;right:0;width:9px;height:9px;
  background:linear-gradient(225deg,#DCE4EE 0%,#B9C7D9 100%);
  clip-path:polygon(100% 0, 100% 100%, 0 0);
  border-top-right-radius:4px;
  filter:drop-shadow(-1px 1px 1px rgba(8,18,32,.12));
}
.fecha__docs .doc b{
  display:block;font-family:var(--font-mono);font-weight:400;
  font-size:clamp(5px,.5vw,6.5px);letter-spacing:.08em;text-transform:uppercase;
  color:#7E90A8;margin-bottom:clamp(2px,.3vw,3.5px);
}
.fecha__docs .doc i{
  display:block;height:1.5px;border-radius:2px;background:#CFD9E6;
  margin-bottom:2px;
}
.fecha__docs .doc i:first-of-type{width:72%;background:#A9B9CD}
.fecha__docs .doc i:last-of-type{width:44%}

.fecha__docs .doc--falta{
  background:rgba(239,83,80,.06);box-shadow:none;
  border:1px dashed rgba(239,83,80,.68);
  transform:none;
}

/* ---------- a cena se monta uma vez ---------- */
.fecha.armado.entrou .anel__feito{
  animation:anel-desenha 1600ms cubic-bezier(.34,0,.18,1) 380ms forwards;
}
.fecha.armado.entrou .anel__falta{animation:surge 620ms var(--ease) 2020ms forwards}
.fecha.armado.entrou .anel__pendentes{
  animation:surge 540ms var(--ease) 2200ms forwards,
            pendente-pulsa 2400ms var(--ease) 2800ms 2;
}
.fecha.armado.entrou .anel__estado{animation:surge 540ms var(--ease) 2420ms forwards}
.fecha.armado.entrou .doc{animation:doc-entra 480ms var(--ease) forwards}
.fecha.armado.entrou .doc:nth-child(1){animation-delay:560ms}
.fecha.armado.entrou .doc:nth-child(2){animation-delay:700ms}
.fecha.armado.entrou .doc:nth-child(3){animation-delay:840ms}
.fecha.armado.entrou .doc:nth-child(4){animation-delay:980ms}
.fecha.armado.entrou .doc--falta{animation:surge 520ms var(--ease) forwards}
.fecha.armado.entrou .doc--falta:nth-child(5){animation-delay:2020ms}
.fecha.armado.entrou .doc--falta:nth-child(6){animation-delay:2140ms}
.fecha.armado.entrou .doc--falta:nth-child(7){animation-delay:2260ms}

/* sobra o vão dos documentos que não vieram */
@keyframes anel-desenha{to{stroke-dashoffset:112.4}}
@keyframes surge{to{opacity:1}}
@keyframes doc-entra{to{opacity:1;transform:none}}
@keyframes pendente-pulsa{
  0%,100%{box-shadow:0 0 0 0 rgba(239,83,80,0)}
  50%{box-shadow:0 0 0 7px rgba(239,83,80,.15)}
}

@media (max-width:900px){
  .dores__topo{grid-template-columns:1fr;gap:30px}
  /* sem inclinação e com sombra menor: em tela pequena a perspectiva rouba largura útil */
  .fecha{perspective:none;filter:drop-shadow(0 18px 30px rgba(11,33,87,.20))}
  .fecha__vidro{transform:none}
  .fecha__corpo{grid-template-columns:minmax(0,1fr) 104px}
}
@media (max-width:520px){
  .fecha__vidro{aspect-ratio:auto}
  .fecha__corpo{grid-template-columns:1fr;gap:18px}
  .fecha__anel svg{max-width:200px;margin-inline:auto}
  .fecha__docs{flex-direction:row;flex-wrap:wrap;gap:6px}
  .fecha__docs .doc{flex:1 1 calc(25% - 5px);min-width:0;margin-top:0;height:38px}
  .fecha__docs .doc--falta{flex:1 1 calc(33% - 5px)}
}
@media (prefers-reduced-motion:reduce){
  .fecha .anel__feito{stroke-dashoffset:112.4}
  .fecha .anel__falta,.fecha .anel__pendentes,
  .fecha .anel__estado,.fecha .doc{opacity:1;transform:none}
}

/* Um dia no escritório — cinco comparações */
.dia{max-width:1300px;margin-inline:auto}
.dia__janela{display:block}

.dia__trilha{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.4vw,20px);
}
.dia__trilha[aria-hidden]{display:none}

.momento{
  position:relative;
  display:grid;grid-template-rows:auto 1fr;gap:0;
  padding:clamp(20px,2vw,26px) clamp(18px,1.9vw,24px) clamp(18px,1.9vw,24px);
  border-radius:16px;background:var(--bg);overflow:hidden;
  box-shadow:0 1px 2px rgba(11,33,87,.04),
             0 14px 30px -20px rgba(11,33,87,.24);
  transition:transform 340ms var(--ease),box-shadow 340ms var(--ease);
}
@supports (grid-template-rows:subgrid){
  .dia__trilha{grid-template-rows:auto 1fr}
  .momento{grid-row:span 2;grid-template-rows:subgrid}
}
/* fio de acento no topo, o mesmo gesto dos painéis do projeto */
.momento::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--hero-blue),var(--hero-blue-2));
  opacity:.9;
}
.momento:hover{
  transform:translateY(-5px);
  box-shadow:0 2px 5px rgba(11,33,87,.05),
             0 26px 44px -22px rgba(11,33,87,.3);
}
[data-theme="dark"] .momento{
  background:#0D1626;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 16px 32px -20px rgba(0,0,0,.85);
}

/* o tema vem depois do rótulo: primeiro se diz de que lado é a frase, depois o assunto */
.momento__tema{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.88rem,1vw,1rem);letter-spacing:-.015em;
  color:var(--hero-navy);
  margin-bottom:clamp(6px,.7vw,9px);
}

/* ---------- o que acontece com o produto ---------- Sem faixa de fundo: o destaque */
.momento__depois{padding-bottom:clamp(16px,1.7vw,20px)}
.momento__antes .momento__selo{color:var(--muted-2)}
.momento__antes p{color:var(--muted-2);font-size:12.4px;line-height:1.55}

/* ---------- a rotina sem ele: fecha o cartão ---------- */
.momento__antes{
  position:relative;padding-top:clamp(14px,1.5vw,17px);
  border-top:1px solid var(--line-soft);
}
.momento__depois .momento__selo{color:var(--hero-blue);font-weight:500}
/* a frase principal: maior, mais escura e mais encorpada */
.momento__depois p{
  color:var(--hero-navy);font-size:14px;line-height:1.52;font-weight:450;
  letter-spacing:-.005em;
}

.momento__selo{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:clamp(7px,.85vw,9px);
}
.momento__selo svg{width:14px;height:14px;flex:none}
.momento__antes .momento__selo svg{opacity:.5}
.momento p{font-size:12.8px;line-height:1.6}

/* ---------- carrossel quando os cinco não cabem ---------- */
@media (max-width:1180px){
  .dia__janela{
    display:flex;gap:clamp(12px,2vw,20px);overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .dia__trilha{
    display:flex;flex:none;gap:clamp(12px,2vw,20px);
    animation:dia-anda 38s linear infinite;
  }
  .dia__trilha[aria-hidden]{display:flex}
  .dia__janela:hover .dia__trilha{animation-play-state:paused}
  .momento{
    width:clamp(240px,32vw,290px);flex:none;
    display:flex;flex-direction:column;
  }
  .momento__antes{flex:1}
}
@keyframes dia-anda{from{transform:translateX(0)}to{transform:translateX(-100%)}}

@media (hover:none){
  /* sem ponteiro não há pausa: a fila pode ser arrastada com o dedo */
  .dia__janela{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .dia__janela::-webkit-scrollbar{display:none}
  .momento{scroll-snap-align:center;width:min(76vw,290px)}
}
@media (prefers-reduced-motion:reduce){
  .dia__trilha{animation:none}
}

/* Telas estreitas */
@media (max-width:1000px){
  .docs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .docs{grid-template-columns:repeat(2,1fr)}
  .dia{grid-template-columns:1fr;gap:32px}
}
@media (max-width:460px){
  .docs{grid-template-columns:1fr}
}

/* Centralização — os cinco tipos ligados ao painel */
.central{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.62fr) clamp(40px,4.4vw,80px) minmax(0,1.72fr);
  align-items:center;gap:0;
  max-width:1320px;margin-inline:auto;
}

/* ---------- os cinco tipos ---------- */
.tipos{grid-column:1;display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px)}
.tipos li{
  position:relative;
  display:flex;align-items:flex-start;gap:clamp(10px,1.2vw,16px);
  padding:clamp(11px,1.3vw,16px) clamp(14px,1.6vw,20px);
  border:1px solid var(--line-soft);border-radius:12px;
  background-color:var(--panel-base);background-image:var(--panel);
  transition:border-color 280ms var(--ease),transform 320ms var(--ease);
}
.tipos li:hover{
  border-color:color-mix(in srgb,var(--hero-blue) 45%,transparent);
  transform:translateX(3px);
}
/* a sigla é o que identifica o documento de relance: ganha selo próprio */
.tipos__sigla{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:clamp(52px,5.2vw,66px);padding:5px 9px;border-radius:7px;
  /* mesmo azul-marinho do painel da abertura, com a sigla em branco */
  background:#0B2157;
  border:1px solid #0B2157;
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(10.5px,1.05vw,12.5px);letter-spacing:.06em;
  color:#fff;
  transition:background 280ms var(--ease),border-color 280ms var(--ease),
             box-shadow 280ms var(--ease);
}
[data-theme="dark"] .tipos__sigla{
  background:#12224A;border-color:color-mix(in srgb,var(--hero-blue) 30%,#1D2C40);
}
.tipos li:hover .tipos__sigla{
  background:var(--hero-blue);border-color:var(--hero-blue);
  box-shadow:0 4px 12px -6px color-mix(in srgb,var(--hero-blue) 80%,transparent);
}
.tipos__texto b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(.9rem,1.1vw,1rem);letter-spacing:-.015em;
  color:var(--hero-navy);margin-bottom:3px;
}
.tipos__texto > span{font-size:13px;line-height:1.55;color:var(--hero-muted)}
/* marca nos dois que os concorrentes não capturam */
.tipos__marca{
  display:block;margin-top:7px;padding-top:6px;
  border-top:1px dashed color-mix(in srgb,var(--hero-blue) 28%,transparent);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hero-blue);font-style:normal;
}
/* o nó de onde o fio sai */
.tipos__no{
  position:absolute;right:-5px;top:50%;width:9px;height:9px;margin-top:-4.5px;
  border-radius:50%;background:var(--hero-blue);
  box-shadow:0 0 0 4px var(--bg);
  opacity:0;transform:scale(.4);
}

/* ---------- os fios ---------- */
/* a camada dos fios cobre a seção inteira: assim cada traçado pode ir do nó do cartão */
.central__linhas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.central__fio,.central__pulso{fill:none;vector-effect:non-scaling-stroke}
.central__fio{
  stroke:color-mix(in srgb,var(--hero-blue) 26%,transparent);stroke-width:1.4;
  stroke-dasharray:var(--comp);stroke-dashoffset:var(--comp);
}
/* pacote: um traço que corre pela linha até a tela, sem parar */
.central__pulso{
  stroke:var(--hero-blue);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:30 var(--comp);stroke-dashoffset:30;opacity:0;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--hero-blue) 55%,transparent));
}
/* o fio acende junto com a passagem do pacote */
.central__fio{transition:stroke 400ms var(--ease)}
.central.armado.entrou .central__fio{
  animation:fio-risca 700ms var(--ease) forwards,
            fio-brilha 1700ms var(--ease) infinite;
}

/* ---------- a tela do sistema ---------- */
/* a camada dos fios é absoluta, então sai do fluxo da grade: a tela precisa declarar */
.central__tela{grid-column:3;margin:0;position:relative}
/* porta de entrada: pulsa a cada pacote que chega */
.central__porta{
  position:absolute;left:0;top:50%;width:10px;height:10px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--hero-blue);opacity:0;z-index:2;
}
.central__janela{
  position:relative;width:100%;aspect-ratio:2024/777;
  border-radius:12px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 26px 50px -34px rgba(11,33,87,.42);
  background:url(../img/danfe/tela-nfe.webp) top center/100% auto no-repeat #fff;
  background-image:image-set(
    url(../img/danfe/tela-nfe.avif) type("image/avif"),
    url(../img/danfe/tela-nfe.webp) type("image/webp"));
  padding-top:clamp(18px,2vw,26px);
}
[data-theme="dark"] .central__janela{
  border-color:color-mix(in srgb,var(--hero-blue) 26%,#1D2C40);
  box-shadow:0 26px 50px -34px rgba(0,0,0,.7);
}
/* barra de janela por cima da captura, para ela ler como aplicação */
.central__barra{
  position:absolute;top:0;left:0;right:0;height:clamp(18px,2vw,26px);
  display:flex;align-items:center;gap:5px;padding-inline:11px;
  background:#EEF1F6;border-bottom:1px solid #DDE3EC;
}
.central__barra i{width:7px;height:7px;border-radius:50%;background:#C7CFDB}
.central__tela figcaption{
  margin-top:10px;text-align:right;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);
}

/* ---------- a cena roda uma vez ---------- */
.central.armado .tipos li{opacity:0;transform:translateX(-10px)}
.central.armado.entrou .tipos li{
  opacity:1;transform:none;
  transition:opacity 460ms var(--ease),transform 520ms var(--ease);
}
.central.armado.entrou .tipos li:nth-child(1){transition-delay:0ms}
.central.armado.entrou .tipos li:nth-child(2){transition-delay:110ms}
.central.armado.entrou .tipos li:nth-child(3){transition-delay:220ms}
.central.armado.entrou .tipos li:nth-child(4){transition-delay:330ms}
.central.armado.entrou .tipos li:nth-child(5){transition-delay:440ms}

.central.armado .central__janela{opacity:0;transform:translateX(14px)}
.central.armado.entrou .central__janela{
  opacity:1;transform:none;
  transition:opacity 620ms var(--ease) 260ms,transform 700ms var(--ease) 260ms;
}

.central.armado.entrou .tipos__no{animation:no-acende 380ms var(--ease) forwards}
.central.armado.entrou .tipos li:nth-child(1) .tipos__no{animation-delay:620ms}
.central.armado.entrou .tipos li:nth-child(2) .tipos__no{animation-delay:740ms}
.central.armado.entrou .tipos li:nth-child(3) .tipos__no{animation-delay:860ms}
.central.armado.entrou .tipos li:nth-child(4) .tipos__no{animation-delay:980ms}
.central.armado.entrou .tipos li:nth-child(5) .tipos__no{animation-delay:1100ms}

.central.armado.entrou .central__fio{animation:fio-risca 700ms var(--ease) forwards}
.central.armado.entrou .central__fio:nth-of-type(1){animation-delay:700ms}
.central.armado.entrou .central__fio:nth-of-type(2){animation-delay:820ms}
.central.armado.entrou .central__fio:nth-of-type(3){animation-delay:940ms}
.central.armado.entrou .central__fio:nth-of-type(4){animation-delay:1060ms}
.central.armado.entrou .central__fio:nth-of-type(5){animation-delay:1180ms}

.central.armado.entrou .central__pulso{
  animation:fio-pulsa 1700ms cubic-bezier(.5,0,.35,1) infinite;
}
.central.armado.entrou .central__pulso:nth-of-type(6){animation-delay:1400ms}
.central.armado.entrou .central__pulso:nth-of-type(7){animation-delay:1570ms}
.central.armado.entrou .central__pulso:nth-of-type(8){animation-delay:1740ms}
.central.armado.entrou .central__pulso:nth-of-type(9){animation-delay:1910ms}
.central.armado.entrou .central__pulso:nth-of-type(10){animation-delay:2080ms}
/* a segunda leva sai na metade do ciclo da primeira */
.central.armado.entrou .central__pulso:nth-of-type(11){animation-delay:2250ms}
.central.armado.entrou .central__pulso:nth-of-type(12){animation-delay:2420ms}
.central.armado.entrou .central__pulso:nth-of-type(13){animation-delay:2590ms}
.central.armado.entrou .central__pulso:nth-of-type(14){animation-delay:2760ms}
.central.armado.entrou .central__pulso:nth-of-type(15){animation-delay:2930ms}

.central.armado.entrou .central__fio:nth-of-type(1){animation-delay:700ms,2100ms}
.central.armado.entrou .central__fio:nth-of-type(2){animation-delay:820ms,2270ms}
.central.armado.entrou .central__fio:nth-of-type(3){animation-delay:940ms,2440ms}
.central.armado.entrou .central__fio:nth-of-type(4){animation-delay:1060ms,2610ms}
.central.armado.entrou .central__fio:nth-of-type(5){animation-delay:1180ms,2780ms}

@keyframes fio-brilha{
  0%,72%{stroke:color-mix(in srgb,var(--hero-blue) 26%,transparent)}
  84%{stroke:color-mix(in srgb,var(--hero-blue) 62%,transparent)}
  100%{stroke:color-mix(in srgb,var(--hero-blue) 26%,transparent)}
}

/* a porta acende no instante em que cada pacote chega */
.central.armado.entrou .central__porta{
  animation:porta-recebe 1700ms var(--ease) 2200ms infinite;
}
@keyframes porta-recebe{
  0%,26%{opacity:0;box-shadow:0 0 0 0 color-mix(in srgb,var(--hero-blue) 45%,transparent)}
  34%{opacity:1;box-shadow:0 0 0 5px color-mix(in srgb,var(--hero-blue) 22%,transparent)}
  52%{opacity:.5;box-shadow:0 0 0 9px color-mix(in srgb,var(--hero-blue) 0%,transparent)}
  70%,100%{opacity:0;box-shadow:0 0 0 0 color-mix(in srgb,var(--hero-blue) 0%,transparent)}
}

@keyframes no-acende{to{opacity:1;transform:none}}
@keyframes fio-risca{to{stroke-dashoffset:0}}
@keyframes fio-pulsa{
  0%{opacity:0;stroke-dashoffset:30}
  10%{opacity:1}
  70%{opacity:1;stroke-dashoffset:calc(-1 * var(--comp))}
  72%,100%{opacity:0;stroke-dashoffset:calc(-1 * var(--comp))}
}

@media (max-width:900px){
  .central{grid-template-columns:1fr;gap:26px}
  /* em coluna única os fios apontariam para o lado errado */
  .central__linhas,.tipos__no{display:none}
  .central__tela figcaption{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .central.armado .tipos li,
  .central.armado .central__janela{opacity:1;transform:none}
  .central .central__fio{stroke-dashoffset:0}
  .central .central__pulso,
  .central .central__porta{display:none}
  .central .tipos__no{opacity:1;transform:none}
}