/* solucao.css — landing page de uma solução */

.solucao--danfe{--acc:var(--c-danfe)}
.solucao--radar{--acc:var(--c-radar)}
.solucao--tributare{--acc:var(--c-tributare)}

/* Hero da landing — headline, fluxo e trilho */
.solucao--tributare{
  --hero-navy:#0B2157;
  --hero-blue:#1268E8;
  --hero-blue-2:#3E8FF2;
  --hero-muted:#60729A;
  --hero-grid:rgba(18,104,232,.11);

  /* papel e fio das peças que andam na esteira */
  --hero-papel:#FFFFFF;
  --hero-fio:rgba(11,33,87,.24);
  --hero-sombra:rgba(11,18,32,.12);
  --hero-on-blue:#FFFFFF;

  /* ---- o relógio do hero ---- Uma única cadência governa esteira, estações e guia */
  --ciclo:8.6s;
  --passo:190ms;   /* distância, no tempo, entre uma nota e a seguinte */
  --abre:1.25s;    /* espera a entrada da página terminar */
  --t2:2.1s;       /* a leva cruza a estação 02 */
  --t3:4.9s;       /* a última nota é absorvida na estação 03 */

  /* A cor da perda */
  --ag-perda:#A4522A;
  --ag-perda-fraca:rgba(164,82,42,.11);
  --ag-hachura:rgba(11,33,87,.13);
  --ag-sombra:rgba(11,18,32,.34);
  --ag-fds:rgba(11,33,87,.035);
  --ag-brilho:rgba(255,255,255,.55);
}
[data-theme="dark"] .solucao--tributare{
  --hero-navy:#EDF1F7;
  --hero-blue:#5CC6F2;
  --hero-blue-2:#8FDCFB;
  --hero-muted:#8A9AB4;
  --hero-grid:rgba(92,198,242,.12);

  --hero-papel:#0D1A2E;
  --hero-fio:rgba(237,241,247,.22);
  --hero-sombra:rgba(0,0,0,.5);
  --hero-on-blue:#06283D;

  --ag-perda:#E2A06A;
  --ag-perda-fraca:rgba(226,160,106,.13);
  --ag-hachura:rgba(237,241,247,.12);
  --ag-sombra:rgba(0,0,0,.72);
  --ag-fds:rgba(255,255,255,.028);
  --ag-brilho:rgba(255,255,255,.085);
}

.hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  min-height:calc(100dvh - var(--header-h));
  padding-block:clamp(36px,6vh,72px);
}

/* grade técnica: forte nas bordas, quase invisível no centro */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(90deg,var(--hero-grid) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,var(--hero-grid) 0 1px,transparent 1px 88px);
  -webkit-mask-image:radial-gradient(112% 88% at 50% 48%,transparent 26%,#000 82%);
          mask-image:radial-gradient(112% 88% at 50% 48%,transparent 26%,#000 82%);
}
.hero__interno{position:relative;z-index:1;text-align:center;max-width:1200px}

/* ---------- headline ---------- */
.hero__titulo{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.05rem,5vw,4.6rem);line-height:1.0;letter-spacing:-.045em;
  margin-bottom:clamp(16px,2.4vh,26px);
}
.hero__l1,.hero__l2{display:block}
.hero__l1{color:var(--hero-navy)}
.hero__l2{color:var(--hero-blue)}

.hero__apoio{
  font-size:clamp(.95rem,1.5vw,1.3rem);color:var(--hero-navy);
  margin-bottom:clamp(30px,5vh,60px);
}
.hero__apoio b{color:var(--hero-blue);font-weight:inherit}

/* ---------- as três etapas ---------- */
.fluxo-auto{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,3vw,32px);
  max-width:1080px;margin-inline:auto;
}
.fluxo-auto li{display:flex;flex-direction:column;align-items:center;gap:2px}
.fluxo-auto__n{
  font-family:var(--font-mono);font-size:clamp(.8rem,1.1vw,1rem);
  letter-spacing:.06em;color:var(--hero-blue);
}
.fluxo-auto__verbo{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2.4vw,2.1rem);letter-spacing:-.03em;color:var(--hero-navy);
  /* a palavra acende quando a leva passa pela estação dela: é o que costura o texto à */
  animation:etapa-ativa var(--ciclo) var(--ease) var(--abre) infinite;
}
.fluxo-auto li:nth-child(2) .fluxo-auto__verbo{animation-delay:calc(var(--abre) + var(--t2))}
/* a terceira não apaga junto: fica acesa enquanto a guia está pronta, que é o estado */
.fluxo-auto li:nth-child(3) .fluxo-auto__verbo{animation-name:etapa-final}

@keyframes etapa-ativa{
  0%,2%    {color:var(--hero-navy)}
  8%,17%   {color:var(--hero-blue)}
  26%,100% {color:var(--hero-navy)}
}
@keyframes etapa-final{
  0%,56%   {color:var(--hero-navy)}
  61%,88%  {color:var(--hero-blue)}
  95%,100% {color:var(--hero-navy)}
}
.fluxo-auto__desc{
  font-size:clamp(.8rem,1.05vw,.95rem);color:var(--hero-muted);
}
.fluxo-auto__desc b{color:var(--hero-blue);font-weight:inherit}

/* A esteira — da importação à guia */
.trilho{
  position:relative;height:clamp(34px,5vh,46px);
  max-width:1080px;margin:clamp(14px,2.6vh,26px) auto 0;
  --pos1:16.6667%; --pos2:50%; --pos3:83.3333%;
}

/* A superfície da esteira: dois fios paralelos que esmaecem nas pontas */
.trilho::before{
  content:"";position:absolute;
  left:calc(var(--pos1) - 46px);right:calc(100% - var(--pos3) - 52px);
  top:0;bottom:0;pointer-events:none;
  border-top:1px solid var(--hero-grid);
  border-bottom:1px solid var(--hero-grid);
  background:linear-gradient(180deg,
    transparent,color-mix(in srgb,var(--hero-blue) 4%,transparent),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}

/* ---------- a linha ---------- Duas camadas sobrepostas: a fria, que está sempre lá */
.trilho__linha{
  position:absolute;left:var(--pos1);right:calc(100% - var(--pos3));top:50%;height:1px;
  background:var(--hero-blue);opacity:.28;transform-origin:left center;
}
.trilho__preenche{
  position:absolute;left:var(--pos1);right:calc(100% - var(--pos3));top:50%;
  height:2px;margin-top:-1px;border-radius:2px;
  transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--hero-blue) 28%,transparent),
    var(--hero-blue));
  box-shadow:0 0 10px -1px color-mix(in srgb,var(--hero-blue) 45%,transparent);
  animation:esteira-preenche var(--ciclo) linear var(--abre) infinite;
}
@keyframes esteira-preenche{
  0%,5%    {transform:scaleX(0);opacity:1}
  44%,88%  {transform:scaleX(1);opacity:1}
  93%      {transform:scaleX(1);opacity:0}
  94%,100% {transform:scaleX(0);opacity:0}
}

/* ---------- as estações ---------- */
.trilho__no{
  position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--hero-blue);
}
.trilho__no--1{left:var(--pos1)}
.trilho__no--2{left:var(--pos2)}

/* O anel sai da estação quando a leva passa por ela */
.trilho__no::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--hero-blue);opacity:0;
  animation:no-onda var(--ciclo) var(--ease) var(--abre) infinite;
}
.trilho__no--2::after{animation-delay:calc(var(--abre) + var(--t2))}
@keyframes no-onda{
  0%       {opacity:.7;transform:scale(.5)}
  13%      {opacity:0;transform:scale(2.2)}
  100%     {opacity:0;transform:scale(2.2)}
}

/* ---------- as notas que percorrem a esteira ---------- Cinco, não uma: o argumento */
.nota{
  position:absolute;top:50%;left:var(--pos1);
  width:28px;height:20px;margin:-10px 0 0 -14px;
  border-radius:3px;overflow:hidden;opacity:0;
  background:var(--hero-papel);
  border:1px solid var(--hero-fio);
  box-shadow:0 2px 5px -2px var(--hero-sombra);
  animation:nota-percurso var(--ciclo) linear
            calc(var(--abre) + var(--i) * var(--passo)) infinite;
}
/* A posição de cada nota na caravana */
.nota--1{--i:0} .nota--2{--i:1} .nota--3{--i:2} .nota--4{--i:3} .nota--5{--i:4}

/* As linhas escritas na nota, em duas tintas sobrepostas: a cinza está sempre lá, a */
.nota::before,
.nota::after{
  content:"";position:absolute;inset:4px 4px 4px 5px;
  background:
    linear-gradient(var(--tinta),var(--tinta)) 0 0/100% 1.6px no-repeat,
    linear-gradient(var(--tinta),var(--tinta)) 0 4.2px/72% 1.6px no-repeat,
    linear-gradient(var(--tinta),var(--tinta)) 0 8.4px/46% 1.6px no-repeat;
}
.nota::before{--tinta:color-mix(in srgb,var(--hero-muted) 58%,transparent)}
/* a tarja da esquerda é o que se vê de longe; as linhas azuis, de perto */
.nota::after{
  --tinta:var(--hero-blue);opacity:0;inset:0;
  background:
    linear-gradient(var(--tinta),var(--tinta)) 0 0/2.5px 100% no-repeat,
    linear-gradient(var(--tinta),var(--tinta)) 5px 4px/17px 1.6px no-repeat,
    linear-gradient(var(--tinta),var(--tinta)) 5px 8.2px/12px 1.6px no-repeat,
    linear-gradient(var(--tinta),var(--tinta)) 5px 12.4px/8px 1.6px no-repeat;
  animation:nota-regra var(--ciclo) linear
            calc(var(--abre) + var(--i) * var(--passo)) infinite;
}

/* A nota chega de fora e de cima, como arquivo que cai na pasta; atravessa em */
@keyframes nota-percurso{
  0%    {left:var(--pos1);opacity:0;
         transform:translate(-20px,-13px) scale(.7);border-color:var(--hero-fio)}
  5%    {left:var(--pos1);opacity:1;
         transform:translate(0,0) scale(1);border-color:var(--hero-fio)}
  6%    {left:var(--pos1)}
  24%   {border-color:var(--hero-fio)}
  28%   {border-color:color-mix(in srgb,var(--hero-blue) 65%,transparent)}
  44%   {left:calc(var(--pos3) - 52px);opacity:1;transform:translate(0,0) scale(1)}
  48%   {left:calc(var(--pos3) - 34px);opacity:0;transform:translate(0,0) scale(.22)}
  100%  {left:calc(var(--pos3) - 34px);opacity:0;transform:translate(0,0) scale(.22)}
}
@keyframes nota-regra{
  0%,24%   {opacity:0}
  28%,100% {opacity:1}
}

/* ---------- a guia ---------- Fica sempre na tela, vazia, no lugar da terceira */
.guia{
  position:absolute;left:var(--pos3);top:50%;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px 5px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--hero-fio);
  background:var(--hero-papel);
  color:var(--hero-muted);
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.09em;
  transform:translate(-50%,-50%);
  animation:guia-pronta var(--ciclo) var(--ease) var(--abre) infinite;
}
.guia b{font-weight:500}
.guia__visto{width:12px;height:12px}
.guia__visto path{
  stroke-dasharray:16;stroke-dashoffset:16;
  animation:visto-desenha var(--ciclo) var(--ease) var(--abre) infinite;
}
/* o anel que sai da guia no instante em que ela fecha */
.guia::after{
  content:"";position:absolute;inset:-1px;border-radius:999px;
  border:1px solid var(--hero-blue);opacity:0;
  animation:guia-onda var(--ciclo) var(--ease) var(--abre) infinite;
}

@keyframes guia-pronta{
  0%,55%{
    border-color:var(--hero-fio);background:var(--hero-papel);
    color:var(--hero-muted);box-shadow:0 1px 3px -1px var(--hero-sombra);
    transform:translate(-50%,-50%) scale(1);
  }
  60%{
    border-color:var(--hero-blue);background:var(--hero-blue);
    color:var(--hero-on-blue);
    box-shadow:0 8px 24px -8px color-mix(in srgb,var(--hero-blue) 75%,transparent);
    transform:translate(-50%,-50%) scale(1.09);
  }
  65%,88%{
    border-color:var(--hero-blue);background:var(--hero-blue);
    color:var(--hero-on-blue);
    box-shadow:0 6px 18px -8px color-mix(in srgb,var(--hero-blue) 60%,transparent);
    transform:translate(-50%,-50%) scale(1);
  }
  95%,100%{
    border-color:var(--hero-fio);background:var(--hero-papel);
    color:var(--hero-muted);box-shadow:0 1px 3px -1px var(--hero-sombra);
    transform:translate(-50%,-50%) scale(1);
  }
}
@keyframes visto-desenha{
  0%,56%   {stroke-dashoffset:16;opacity:.4}
  64%,88%  {stroke-dashoffset:0;opacity:1}
  94%,100% {stroke-dashoffset:16;opacity:.4}
}
@keyframes guia-onda{
  0%,57%   {opacity:0;transform:scale(.92)}
  61%      {opacity:.65;transform:scale(1)}
  72%,100% {opacity:0;transform:scale(1.55)}
}

/* ---------- entrada ---------- */
/* o estado inicial só é armado pelo JS: sem script, o hero nasce pronto */
.hero.armar .hero__titulo,
.hero.armar .hero__apoio,
.hero.armar .fluxo-auto li,
.hero.armar .hero__nota{opacity:0;transform:translateY(10px)}
.hero.armar .trilho__linha{transform:scaleX(0)}
.hero.armar .trilho__no{transform:scale(0)}
.hero.armar .guia{transform:translate(-50%,-50%) scale(.7);opacity:0}
.trilho__linha{transform:scaleX(1)}
.trilho__no{transform:scale(1)}
.hero.armar.entrou .hero__titulo,
.hero.armar.entrou .hero__apoio,
.hero.armar.entrou .fluxo-auto li,
.hero.armar.entrou .hero__nota{
  opacity:1;transform:none;
  transition:opacity 520ms var(--ease),transform 620ms var(--ease);
}
.hero.armar.entrou .hero__apoio{transition-delay:110ms}
.hero.armar.entrou .fluxo-auto li:nth-child(1){transition-delay:200ms}
.hero.armar.entrou .fluxo-auto li:nth-child(2){transition-delay:280ms}
.hero.armar.entrou .fluxo-auto li:nth-child(3){transition-delay:360ms}
.hero.armar.entrou .hero__nota{transition-delay:520ms}

.hero.armar.entrou .trilho__linha{animation:trilho-desenha 620ms var(--ease) 420ms forwards}
.hero.armar.entrou .trilho__no{animation:trilho-no 360ms var(--ease) forwards}
.hero.armar.entrou .trilho__no--1{animation-delay:460ms}
.hero.armar.entrou .trilho__no--2{animation-delay:700ms}
/* a guia entra por transição, e não por animação, para não disputar o transform com o */
.hero.armar.entrou .guia{
  opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity 420ms var(--ease) 940ms,transform 520ms var(--ease) 940ms;
}

@keyframes trilho-desenha{to{transform:scaleX(1)}}
@keyframes trilho-no{from{transform:scale(0)}60%{transform:scale(1.35)}to{transform:scale(1)}}

/* ---------- telas médias ---------- */
@media (max-width:900px){
  .fluxo-auto{gap:14px}
  .fluxo-auto__desc{max-width:20ch}

  /* Pista mais curta, caravana mais curta */
  .solucao--tributare{--passo:253ms}   /* 4 notas */
  .nota--5{display:none}
}
@media (max-width:760px){
  .solucao--tributare{--passo:380ms}   /* 3 notas */
  .nota--4{display:none}
}

/* ---------- celular: linha do tempo vertical ---------- */
@media (max-width:620px){
  .hero{min-height:0;padding-block:44px 52px}
  .hero__interno{text-align:center}
  .hero__apoio{margin-bottom:34px}

  .fluxo-auto{
    grid-template-columns:1fr;gap:0;
    text-align:left;max-width:340px;
    padding-left:26px;position:relative;
  }
  .fluxo-auto::before{
    content:"";position:absolute;left:4px;top:6px;bottom:14px;width:1px;
    background:var(--hero-blue);opacity:.4;transform-origin:top;
  }
  .hero.armar .fluxo-auto::before{transform:scaleY(0)}
  .hero.armar .fluxo-auto li::before{transform:scale(0)}
  .hero.armar.entrou .fluxo-auto::before{animation:trilho-desce 700ms var(--ease) 380ms forwards}
  @keyframes trilho-desce{to{transform:scaleY(1)}}

  .fluxo-auto li{
    align-items:flex-start;position:relative;
    padding-bottom:22px;
  }
  .fluxo-auto li::before{
    content:"";position:absolute;left:-26px;top:7px;width:9px;height:9px;border-radius:50%;
    background:var(--hero-blue);
  }
  .hero.armar.entrou .fluxo-auto li::before{animation:trilho-no 360ms var(--ease) forwards}
  .hero.armar.entrou .fluxo-auto li:nth-child(1)::before{animation-delay:520ms}
  .hero.armar.entrou .fluxo-auto li:nth-child(2)::before{animation-delay:700ms}
  .hero.armar.entrou .fluxo-auto li:nth-child(3)::before{animation-delay:880ms}
  .fluxo-auto__desc{max-width:none}

  /* No celular a lista já é vertical, então as estações não teriam coluna para marcar */
  .solucao--tributare{--passo:760ms}   /* 2 notas */
  .trilho{
    --pos1:9%; --pos2:44%; --pos3:74%;
    height:34px;max-width:320px;margin-top:22px;
  }
  .trilho::before{left:0;right:0}
  .trilho__no{display:none}
  .nota--3,.nota--4,.nota--5{display:none}
  .guia{font-size:10.5px;padding:4px 10px 4px 8px}

  .hero__nota{margin-top:6px}
}

.hero__nota{
  margin-top:clamp(26px,5vh,52px);
  font-size:12.5px;line-height:1.5;color:var(--hero-muted);
}

/* ---------- menos movimento ---------- */
/* Sem movimento a cena não desaparece: ela descansa no estado final, com a linha */
@media (prefers-reduced-motion:reduce){
  .hero__titulo,.hero__apoio,.fluxo-auto li,.hero__nota{opacity:1;transform:none}
  .hero .trilho__linha{transform:scaleX(1)}
  .hero .trilho__no{transform:scale(1)}
  .hero .trilho__preenche{transform:scaleX(1)}
  .hero .nota{display:none}
  .hero .fluxo-auto li:nth-child(3) .fluxo-auto__verbo{color:var(--hero-blue)}
  .hero .guia{
    opacity:1;transform:translate(-50%,-50%);
    border-color:var(--hero-blue);background:var(--hero-blue);color:var(--hero-on-blue);
  }
  .hero .guia::after{display:none}
  .hero .guia__visto path{stroke-dashoffset:0}
  .hero .fluxo-auto::before{transform:scaleY(1)}
  .hero *{animation:none!important;transition:none!important}
}

/* ---------- rótulo de seção, entre fios ---------- */
.rotulo{
  display:flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);
}
.rotulo::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.rotulo--centro{justify-content:center}
.rotulo--centro::before,
.rotulo--centro::after{content:"";flex:0 0 clamp(28px,8vw,90px);height:1px;background:var(--line-soft)}

/* Abertura */
.abertura{
  text-align:center;
  padding-top:clamp(40px,5vw,72px);
  padding-bottom:clamp(34px,4vw,54px);
}

.abertura__marca{
  height:clamp(72px,8vw,108px);width:auto;
  margin:clamp(30px,4vw,46px) auto clamp(22px,2.6vw,30px);
}

/* selo de escopo: o estado é uma restrição de produto, não um detalhe */
.selo{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--acc);border-radius:var(--radius);
  overflow:hidden;font-family:var(--font-mono);
}
.selo__uf{
  display:grid;place-items:center;
  padding:0 12px;font-size:13px;font-weight:500;letter-spacing:.1em;
  color:var(--on-acc);background:var(--acc);
}
.selo__texto{
  padding:9px 14px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acc);
}

.abertura__titulo{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,3.9vw,3.5rem);line-height:1.03;letter-spacing:-.038em;
  margin:clamp(26px,3vw,36px) auto 20px;max-width:24ch;
}
.abertura__titulo em{font-style:normal;color:var(--muted-2)}

.abertura__lede{
  color:var(--muted);font-size:clamp(1rem,1.2vw,1.0625rem);line-height:1.65;
  max-width:58ch;margin:0 auto;
}

.abertura__acoes{
  display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,38px);
}
.abertura__acoes .button--solid{background:var(--acc);color:var(--on-acc);padding:15px 26px}
.abertura__acoes .button--solid:hover{filter:brightness(1.06)}

.link-externo{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;color:var(--fg);
  border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:border-color 200ms var(--ease);
}
.link-externo svg{width:13px;height:13px;opacity:.7}
.link-externo:hover{border-color:var(--fg)}

/* ---------- faixa de dados ---------- */
.faixa{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--line-soft);
}
.faixa div{
  padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,24px);
  border-left:1px solid var(--line-soft);
}
.faixa div:first-child{border-left:0}
.faixa dt{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;
}
.faixa dd{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.faixa dd b{color:var(--acc);font-weight:inherit}

/* Demonstrativo — o elemento que carrega a página */
.bloco{padding-block:clamp(44px,5.4vw,76px)}
#duvidas{padding-bottom:clamp(26px,3.2vw,44px)}
#duvidas{padding-bottom:clamp(28px,3.4vw,48px)}

.demonstrativo__cabeca{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,30px);
}
.demonstrativo__cabeca h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.025em;
}
.demonstrativo__cabeca p{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);
}

.linhas{border-top:1px solid var(--line)}
.linhas li{
  display:grid;
  grid-template-columns:44px minmax(210px,1fr) minmax(0,1.35fr) 118px;
  align-items:baseline;gap:clamp(14px,2vw,28px);
  padding:clamp(15px,1.8vw,19px) 0;
  border-bottom:1px solid var(--line-soft);
  transition:background 240ms var(--ease);
}
.linhas li:hover{background:var(--hover-weak)}

.linhas__n{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:var(--muted-2);font-variant-numeric:tabular-nums;
}
.linhas h3{font-size:15.5px;font-weight:500;letter-spacing:-.005em}
.linhas p{font-size:13.5px;line-height:1.55;color:var(--muted)}
.linhas__estado{
  justify-self:end;text-align:right;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);
}

/* fio duplo antes do total, como no fechamento de um livro fiscal */
.total{
  position:relative;
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:baseline;gap:clamp(14px,2vw,28px);
  padding-top:clamp(18px,2vw,24px);margin-top:5px;
  border-top:1px solid var(--line);
}
.total::before{
  content:"";position:absolute;top:-5px;left:0;right:0;height:1px;background:var(--line);
}
.total__sinal{font-family:var(--font-mono);font-size:13px;color:var(--acc)}
.total__nome{font-size:15.5px;font-weight:500}
.total__valor{
  justify-self:end;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.1rem,1.6vw,1.375rem);letter-spacing:-.02em;color:var(--acc);
  font-variant-numeric:tabular-nums;
}

/* Escopo do estado */
.escopo{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,54px);align-items:center;
  padding:clamp(28px,3.4vw,42px);
  border:1px solid var(--line);border-radius:var(--radius);
  background-color:var(--panel-base);background-image:var(--panel);
  position:relative;overflow:hidden;
}
.escopo::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 0,var(--acc) 26px,transparent 76%);
}
.escopo__uf{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(3.5rem,7vw,5.5rem);line-height:.9;letter-spacing:-.05em;
  color:var(--acc);
}
.escopo h2{
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,1.8vw,1.5rem);
  letter-spacing:-.02em;margin-bottom:10px;
}
.escopo > div p{color:var(--muted);font-size:14.5px;line-height:1.62;max-width:62ch}

/* Fluxo — a trilha percorrida por um documento */
.fluxo{
  --g:clamp(18px,2.4vw,30px);
  --passo:calc((100% + var(--g)) / 4);   /* distância entre dois nós */
  --tempo:760ms;                          /* duração de cada trecho da trilha */
  --passeio:calc(var(--tempo) * 11);      /* ciclo completo do pacote */
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);
  position:relative;
}

.fluxo li{position:relative;padding-top:26px}

/* trecho da trilha, ancorado no nó da esquerda */
.fluxo li::before{
  content:"";position:absolute;top:4px;left:0;height:1px;
  width:calc(100% + var(--g));
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--acc) 55%,transparent) 0,
    var(--line) 30%,var(--line) 100%);
  transform-origin:left center;
}
.fluxo li:last-child::before{
  width:100%;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--acc) 55%,transparent) 0,
    var(--line) 30%,transparent 100%);
}

/* nó */
.fluxo li::after{
  content:"";position:absolute;top:0;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 4px var(--bg);
}

.fluxo__n{
  display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--muted-2);margin-bottom:10px;
}
.fluxo h3{font-size:15px;font-weight:500;margin-bottom:6px}
.fluxo p{font-size:13.5px;line-height:1.58;color:var(--muted)}

/* ---------- o pacote ---------- */
.pacote{
  position:absolute;top:-6px;left:0;z-index:2;
  display:grid;place-items:center;
  height:21px;min-width:62px;padding:0 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  background-color:var(--bg);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--acc);white-space:nowrap;
  opacity:0;                              /* só aparece durante o percurso */
}
.pacote i{grid-area:1/1;font-style:normal;opacity:0}

/* ---------- estado inicial, armado pelo JS ---------- */
.fluxo.armado li::before{transform:scaleX(0)}
.fluxo.armado li::after{transform:scale(0)}
.fluxo.armado .fluxo__n,
.fluxo.armado h3,
.fluxo.armado p{opacity:0;transform:translateY(6px)}

/* ---------- a trilha corre ---------- */
.fluxo.armado.entrou li::before{animation:trecho var(--tempo) cubic-bezier(.4,0,.2,1) forwards}
.fluxo.armado.entrou li::after{animation:no 380ms var(--ease) forwards}
.fluxo.armado.entrou .fluxo__n,
.fluxo.armado.entrou h3,
.fluxo.armado.entrou p{animation:texto 460ms var(--ease) forwards}

.fluxo.armado.entrou li:nth-of-type(2)::before{animation-delay:calc(var(--tempo) * 1)}
.fluxo.armado.entrou li:nth-of-type(3)::before{animation-delay:calc(var(--tempo) * 2)}
.fluxo.armado.entrou li:nth-of-type(4)::before{animation-delay:calc(var(--tempo) * 3)}

.fluxo.armado.entrou li:nth-of-type(2)::after{animation-delay:calc(var(--tempo) * 1)}
.fluxo.armado.entrou li:nth-of-type(3)::after{animation-delay:calc(var(--tempo) * 2)}
.fluxo.armado.entrou li:nth-of-type(4)::after{animation-delay:calc(var(--tempo) * 3)}

.fluxo.armado.entrou li:nth-of-type(1) :is(.fluxo__n,h3,p){animation-delay:180ms}
.fluxo.armado.entrou li:nth-of-type(2) :is(.fluxo__n,h3,p){animation-delay:calc(var(--tempo) * 1 + 180ms)}
.fluxo.armado.entrou li:nth-of-type(3) :is(.fluxo__n,h3,p){animation-delay:calc(var(--tempo) * 2 + 180ms)}
.fluxo.armado.entrou li:nth-of-type(4) :is(.fluxo__n,h3,p){animation-delay:calc(var(--tempo) * 3 + 180ms)}

/* o pacote anda de nó em nó, parando em cada um, e recomeça */
.fluxo.armado.entrou .pacote{animation:anda calc(var(--tempo) * 4) var(--ease) infinite}
.fluxo.armado.entrou .pacote i{animation:rotulo var(--passeio) linear infinite}
.fluxo.armado.entrou .pacote i:nth-child(1){animation-name:rotulo-1}
.fluxo.armado.entrou .pacote i:nth-child(2){animation-name:rotulo-2}
.fluxo.armado.entrou .pacote i:nth-child(3){animation-name:rotulo-3}
.fluxo.armado.entrou .pacote i:nth-child(4){animation-name:rotulo-4}

@keyframes trecho{to{transform:scaleX(1)}}
@keyframes no{
  0%{transform:scale(0)}
  55%{transform:scale(1.5)}
  100%{transform:scale(1)}
}
@keyframes texto{to{opacity:1;transform:none}}

/* Ao chegar, o pacote assume a cor cheia — a guia saiu — e volta ao início para a */
.fluxo.armado.entrou .pacote{
  animation:anda var(--passeio) cubic-bezier(.62,0,.28,1) infinite;
}
.fluxo.armado.entrou .pacote i{animation-duration:var(--passeio)}

@keyframes anda{
  0%   {opacity:0;left:0;background-color:var(--bg);color:var(--acc);
        border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
  4%   {opacity:1;left:0}
  12%  {left:0}
  22%  {left:var(--passo)}
  30%  {left:var(--passo)}
  40%  {left:calc(var(--passo) * 2)}
  48%  {left:calc(var(--passo) * 2)}
  58%  {left:calc(var(--passo) * 3);background-color:var(--bg);color:var(--acc)}
  64%  {background-color:var(--acc);color:var(--on-acc);border-color:var(--acc)}
  86%  {opacity:1;left:calc(var(--passo) * 3);
        background-color:var(--acc);color:var(--on-acc);border-color:var(--acc)}
  92%,100%{opacity:0;left:calc(var(--passo) * 3);
        background-color:var(--acc);color:var(--on-acc);border-color:var(--acc)}
}

/* rótulos acompanhando o novo ciclo */
@keyframes rotulo-1{0%,16%{opacity:1}19%,100%{opacity:0}}
@keyframes rotulo-2{0%,16%{opacity:0}19%,34%{opacity:1}37%,100%{opacity:0}}
@keyframes rotulo-3{0%,34%{opacity:0}37%,52%{opacity:1}55%,100%{opacity:0}}
@keyframes rotulo-4{0%,52%{opacity:0}55%,100%{opacity:1}}

/* Fecho — a última chamada */
.fecho{
  position:relative;text-align:center;
  padding:clamp(40px,5.5vw,72px) clamp(20px,4vw,40px) clamp(48px,7vw,96px);
  border-top:1px solid var(--line-soft);
}
/* clarão discreto atrás do botão, para o olho cair nele */
.fecho::after{
  content:"";position:absolute;left:50%;top:52%;width:min(720px,80%);aspect-ratio:2/1;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb,var(--hero-blue) 8%,transparent),transparent 70%);
}
.fecho > *{position:relative;z-index:1}

.fecho__rotulo{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:20px;
}

.fecho h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.06;letter-spacing:-.038em;
  color:var(--hero-navy);margin-bottom:18px;
}
.fecho h2 em{font-style:normal;color:var(--hero-blue)}

.fecho__lede{
  color:var(--hero-muted);font-size:clamp(.95rem,1.2vw,1.0625rem);line-height:1.6;
  max-width:56ch;margin:0 auto clamp(28px,3.4vw,38px);
}

.fecho .button--solid{
  background:var(--hero-blue);color:#fff;padding:16px 32px;font-size:15px;
  box-shadow:0 14px 30px -16px color-mix(in srgb,var(--hero-blue) 70%,transparent);
}
.fecho .button--solid:hover{filter:brightness(1.07)}
[data-theme="dark"] .fecho .button--solid{color:var(--on-acc)}

.fecho__marcas{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;
  margin-top:24px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);
}
.fecho__marcas span{display:flex;align-items:center;gap:22px}
.fecho__marcas span + span::before{
  content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;
}

/* Telas estreitas */
@media (max-width:900px){
  .faixa{grid-template-columns:repeat(2,1fr)}
  .faixa div:nth-child(3){border-left:0}
  .faixa div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}

  .linhas li{
    grid-template-columns:44px 1fr;
    grid-template-areas:"n nome" ". desc" ". estado";
    gap:4px clamp(14px,2vw,28px);
  }
  .linhas__n{grid-area:n}
  .linhas h3{grid-area:nome}
  .linhas p{grid-area:desc;margin-top:4px}
  .linhas__estado{grid-area:estado;justify-self:start;text-align:left;margin-top:8px}

  .fluxo{grid-template-columns:1fr}
  .fluxo li{padding-top:22px}
  .fluxo li::before,
  .fluxo li:last-child::before{width:100%}
  .pacote{display:none}
}

@media (max-width:520px){
  .selo__texto{font-size:10px;letter-spacing:.06em}
}

/* A dor — duas colunas ocupando quase uma tela */
.dor{
  display:grid;grid-template-columns:1fr 1.08fr;
  align-items:center;gap:clamp(24px,4vw,56px);
  min-height:clamp(480px,70vh,740px);
  padding-block:clamp(40px,6vw,80px);
}

.dor__titulo{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,3.1vw,2.85rem);line-height:1.14;letter-spacing:-.036em;
  color:var(--hero-navy);margin-bottom:clamp(16px,2vw,24px);
}
.dor__titulo em{font-style:normal;color:var(--hero-blue)}

.dor__lede{
  color:var(--hero-muted);font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.65;
  max-width:46ch;
}

/* As medidas internas do cartão moram aqui, e não na `.agenda`, porque o fio que sai */
.dor__cena{
  position:relative;width:100%;max-width:520px;margin-inline:auto;
  --ag-pad:clamp(18px,2.1vw,26px);    /* respiro interno do cartão */
  --ag-cab:24px;                      /* altura do cabeçalho */
  --ag-vao:clamp(12px,1.5vw,17px);    /* cabeçalho até a faixa de dias */
  --ag-dias:17px;                     /* faixa seg..dom */
  /* Calendário de mesa é largo e baixo */
  --ag-linha:clamp(30px,3.3vw,36px);  /* uma semana sem compromisso */
  --ag-sem1:calc(var(--ag-linha) + 14px);
  --ag-barra:15px;                    /* altura de um compromisso */
  --ag-base:20px;                     /* base do compromisso na semana */
  --ag-giro:-6.5deg;                  /* quanto o cartão se abre para o texto */
  /* A curva de um dia sendo tomado: sai rápido, chega devagar e para */
  --ag-avanco:cubic-bezier(.32,.86,.28,1);
  perspective:1700px;
}

/* Ele encosta na altura exata da barra da apuração: a palavra "dias" da pergunta */
.dor__fio{
  position:absolute;right:100%;
  top:calc(var(--ag-pad) + var(--ag-cab) + var(--ag-vao) + var(--ag-dias)
           + var(--ag-sem1) - var(--ag-base) + var(--ag-barra) / 2);
  width:clamp(56px,9vw,150px);height:1.5px;margin-top:-.75px;border-radius:2px;
  background:linear-gradient(270deg,
    var(--ag-perda),
    color-mix(in srgb,var(--ag-perda) 45%,transparent) 58%,
    color-mix(in srgb,var(--ag-perda) 0%,transparent));
}

/* A agenda — o mês do escritório sendo comido pela apuração */
.agenda{
  position:relative;
  padding:var(--ag-pad);
  border:1px solid var(--line);border-radius:var(--radius);
  background-color:var(--panel-base);background-image:var(--panel);
  /* Gira sobre a própria borda direita: a esquerda afunda e o cartão deixa de ser um */
  transform:rotateY(var(--ag-giro));
  transform-origin:right center;
  box-shadow:22px 30px 60px -34px var(--ag-sombra);
  transition:transform 620ms var(--ease),box-shadow 620ms var(--ease),
             opacity 560ms var(--ease);
  --ag-ciclo:12s;
  /* os três degraus caem em 10%, 20% e 30% do ciclo; tudo que acontece junto com eles */
}

.agenda__cabeca{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:var(--ag-cab);margin-bottom:var(--ag-vao);
}
.agenda__rotulo{
  font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
/* O selo diz a causa, não o sintoma: o mês fica assim porque não há automação */
.agenda__chip{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--ag-perda);background:var(--ag-perda-fraca);
  border:1px solid color-mix(in srgb,var(--ag-perda) 28%,transparent);
  border-radius:999px;padding:4px 10px;
}

/* ---------- a semana ---------- Sete colunas de número já leem como mês, mas não */
.agenda__dias{
  display:grid;grid-template-columns:repeat(7,1fr);
  height:var(--ag-dias);align-items:end;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
  color:var(--muted-2);
}
.agenda__dias span{padding-left:8px}
.agenda__dias .fds{opacity:.55}

/* ---------- o mês ---------- Sem cabeçalho de dias da semana: ele obrigaria a */
.agenda__grade{
  position:relative;
  display:grid;grid-template-columns:repeat(7,1fr);
  grid-template-rows:var(--ag-sem1) repeat(4,var(--ag-linha));
  /* A faixa do fim de semana dá ritmo vertical às quatro semanas que não têm */
  background:linear-gradient(90deg,
    transparent 0 71.428%,var(--ag-fds) 71.428% 100%);
}
.agenda__grade i.dia--fds{color:var(--muted-2)}
.agenda__grade i{
  position:relative;
  font-family:var(--font-mono);font-style:normal;
  font-size:clamp(9px,.8vw,10.5px);letter-spacing:.02em;
  color:var(--muted);
  padding:3px 0 0 8px;
  /* O pautado voltou a ser borda de célula porque as semanas deixaram de ter a mesma */
  border-top:1px solid var(--line-soft);
}

/* ---------- os compromissos da semana ---------- A versão anterior era uma hachura */
.agenda__tarefa{
  position:absolute;top:calc(var(--ag-sem1) - var(--ag-base));height:var(--ag-barra);
  display:flex;align-items:center;overflow:hidden;
  border-radius:3px;
  font-family:var(--font-body);font-size:clamp(8.5px,.72vw,9.8px);
  font-weight:500;letter-spacing:.005em;white-space:nowrap;
}
.agenda__tarefa b{position:relative;z-index:1;font-weight:500;padding-inline:6px}
/* Encurtado agora para dois dias úteis, o compromisso da direita deixa de caber o */
.agenda__tarefa .curto{display:none}

/* 42,857% é 3 das 7 colunas — a semana de trabalho que a apuração toma */
.agenda__tarefa--icms{
  left:0;width:42.857%;
  border:1px dashed color-mix(in srgb,var(--ag-perda) 45%,transparent);
  color:var(--ag-perda);
}
/* Termina na sexta, não no domingo: o que a apuração espreme são os dias úteis, e */
.agenda__tarefa--resto{
  left:calc(42.857% + 4px);right:calc(28.572% + 4px);
  border:1px dashed var(--line);
  color:var(--muted-2);
}

/* O preenchimento avança um dia por vez dentro do compromisso já desenhado */
.agenda__enche{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:
    repeating-linear-gradient(135deg,
      var(--ag-hachura) 0 1.5px,transparent 1.5px 7px) left top/9.9px 9.9px,
    var(--ag-perda-fraca);
  will-change:width;
  animation:agenda-come var(--ag-ciclo) linear infinite;   /* a curva está nos quadros */
}
/* a aresta do dia que acabou de ser consumido pisca no instante do degrau */
.agenda__enche::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:2px;
  background:var(--ag-perda);
  animation:agenda-aresta var(--ag-ciclo) var(--ag-avanco) infinite;
}

@keyframes agenda-come{
  0%       {width:0;opacity:1;animation-timing-function:var(--ag-avanco)}
  5%       {width:33.333%;animation-timing-function:linear}
  11%      {width:33.333%;animation-timing-function:var(--ag-avanco)}
  16%      {width:66.667%;animation-timing-function:linear}
  22%      {width:66.667%;animation-timing-function:var(--ag-avanco)}
  27%,90%  {width:100%;opacity:1}
  97%,100% {width:100%;opacity:0}
}
@keyframes agenda-aresta{
  0%,1%    {opacity:0;box-shadow:none}
  5%       {opacity:1;box-shadow:0 0 10px 1px var(--ag-perda)}
  11%,13%  {opacity:.4;box-shadow:none}
  16%      {opacity:1;box-shadow:0 0 10px 1px var(--ag-perda)}
  22%,24%  {opacity:.4;box-shadow:none}
  27%      {opacity:1;box-shadow:0 0 13px 1px var(--ag-perda)}
  36%,90%  {opacity:.5;box-shadow:none}
  97%,100% {opacity:0;box-shadow:none}
}

/* ---------- os dias riscados ---------- Um dia consumido é um dia riscado na agenda */
.dia--p1::after,
.dia--p2::after,
.dia--p3::after{
  content:"";position:absolute;left:7.5px;top:9px;width:13.5px;height:1.2px;
  background:var(--ag-perda);transform:scaleX(0);transform-origin:left center;
}
.dia--p1::after{animation:risco-1 var(--ag-ciclo) var(--ag-avanco) infinite}
.dia--p2::after{animation:risco-2 var(--ag-ciclo) var(--ag-avanco) infinite}
.dia--p3::after{animation:risco-3 var(--ag-ciclo) var(--ag-avanco) infinite}
@keyframes risco-1{0%,3%{transform:scaleX(0)}  8%,90%{transform:scaleX(1)}  97%,100%{transform:scaleX(0)}}
@keyframes risco-2{0%,14%{transform:scaleX(0)} 19%,90%{transform:scaleX(1)} 97%,100%{transform:scaleX(0)}}
@keyframes risco-3{0%,25%{transform:scaleX(0)} 30%,90%{transform:scaleX(1)} 97%,100%{transform:scaleX(0)}}

/* ---------- a medida, nos dois cenários ---------- Sozinho, o calendário não dizia */
.agenda__pe{
  position:relative;margin-top:clamp(16px,1.8vw,22px);padding-top:16px;
  border-top:1px solid var(--line);
  display:grid;gap:9px;
}
.agenda__pe::before{
  content:"";position:absolute;left:0;right:0;top:-3px;height:1px;
  background:var(--line-soft);
}

.agenda__medida{
  display:flex;align-items:center;gap:clamp(8px,1vw,14px);
  will-change:opacity,transform;
  animation:agenda-medida var(--ag-ciclo) var(--ag-avanco) infinite;
}
.agenda__medida--auto{animation-name:agenda-medida-2}

.agenda__medida-rotulo{
  flex:0 0 clamp(74px,8.4vw,102px);
  font-size:clamp(9.5px,.8vw,10.5px);line-height:1.25;color:var(--muted);
}
.agenda__medida-barra{
  flex:1;height:9px;border-radius:2px;overflow:hidden;
  background:var(--hover-weak);
}
.agenda__medida-valor{
  flex:0 0 auto;min-width:clamp(50px,5.4vw,66px);text-align:right;
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(11.5px,1vw,13px);letter-spacing:.03em;
}

/* A régua cheia é a apuração como ela é hoje; o traço é a mesma apuração automatizada */
.agenda__medida--hoje .agenda__medida-barra i{
  display:block;height:100%;width:100%;
  background:
    repeating-linear-gradient(135deg,
      var(--ag-hachura) 0 1.5px,transparent 1.5px 7px) left top/9.9px 9.9px,
    color-mix(in srgb,var(--ag-perda) 30%,transparent);
}
.agenda__medida--hoje .agenda__medida-valor{color:var(--ag-perda)}

.agenda__medida--auto .agenda__medida-barra i{
  display:block;height:100%;width:9px;border-radius:2px;
  background:var(--hero-blue);
  box-shadow:0 0 10px -1px color-mix(in srgb,var(--hero-blue) 70%,transparent);
}
.agenda__medida--auto .agenda__medida-valor{color:var(--hero-blue)}
.agenda__medida--auto .agenda__medida-rotulo{color:var(--hero-blue)}

.agenda__nota{
  font-size:11.5px;line-height:1.45;color:var(--muted-2);
  animation:agenda-nota var(--ag-ciclo) var(--ag-avanco) infinite;
}

@keyframes agenda-medida{
  0%,30%   {opacity:0;transform:translate3d(-10px,0,0)}
  39%,90%  {opacity:1;transform:none}
  97%,100% {opacity:0;transform:translate3d(-10px,0,0)}
}
@keyframes agenda-medida-2{
  0%,42%   {opacity:0;transform:translate3d(-10px,0,0)}
  51%,90%  {opacity:1;transform:none}
  97%,100% {opacity:0;transform:translate3d(-10px,0,0)}
}
@keyframes agenda-nota{
  0%,56%   {opacity:0}
  64%,90%  {opacity:1}
  97%,100% {opacity:0}
}

/* ---------- o cartão responde ao cursor ---------- Ele já está girado; no hover gira */
.agenda::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;
  background:linear-gradient(104deg,
    transparent 34%,var(--ag-brilho) 47%,transparent 61%);
  background-size:280% 100%;background-position:128% 0;background-repeat:no-repeat;
  transition:background-position 900ms var(--ease),opacity 320ms var(--ease);
}
.agenda:hover,
.agenda.armado.entrou:hover{
  transform:rotateY(-2.4deg) translateY(-7px);
  box-shadow:30px 48px 86px -38px var(--ag-sombra);
}
.agenda:hover::after{opacity:1;background-position:-72% 0}

/* No hover a apuração fecha o contorno e ganha peso: o que está sob o cursor é o */
.agenda:hover .agenda__tarefa--icms{
  border-style:solid;
  border-color:color-mix(in srgb,var(--ag-perda) 70%,transparent);
}
.agenda:hover .agenda__medida--auto .agenda__medida-barra i{
  box-shadow:0 0 16px 1px color-mix(in srgb,var(--hero-blue) 85%,transparent);
}

/* ---------- a cena espera ser vista ---------- As animações são infinitas e */
.agenda.armado{opacity:0;transform:rotateY(var(--ag-giro)) translateY(16px)}
.agenda.armado .agenda__enche,
.agenda.armado .agenda__enche::after,
.agenda.armado .dia--p1::after,
.agenda.armado .dia--p2::after,
.agenda.armado .dia--p3::after,
.agenda.armado .agenda__medida,
.agenda.armado .agenda__nota{animation-play-state:paused}

.agenda.armado.entrou{
  opacity:1;transform:rotateY(var(--ag-giro));
}
.agenda.armado.entrou .agenda__enche,
.agenda.armado.entrou .agenda__enche::after,
.agenda.armado.entrou .dia--p1::after,
.agenda.armado.entrou .dia--p2::after,
.agenda.armado.entrou .dia--p3::after,
.agenda.armado.entrou .agenda__medida,
.agenda.armado.entrou .agenda__nota{animation-play-state:running}

/* Em coluna estreita o cabeçalho do cartão quebrava em duas linhas e desencostava o */
@media (max-width:560px){
  .agenda__rotulo{font-size:9px;letter-spacing:.07em}
  .agenda__chip{font-size:8.5px;letter-spacing:.05em;padding:3px 8px}
  .agenda__medida-rotulo{flex-basis:82px;font-size:9px}
  .agenda__tarefa .longo{display:none}
  .agenda__tarefa .curto{display:inline}
}

/* Sem movimento a cena descansa no estado final: a semana comprometida, os três dias */
@media (prefers-reduced-motion:reduce){
  .agenda{transition:none}
  .agenda::after{display:none}
  .agenda:hover,.agenda.armado.entrou:hover{transform:rotateY(var(--ag-giro))}
  .agenda.armado{opacity:1;transform:rotateY(var(--ag-giro))}
  .agenda__enche{width:100%;animation:none}
  .agenda__enche::after{opacity:.5;animation:none}
  .dia--p1::after,.dia--p2::after,.dia--p3::after{transform:scaleX(1);animation:none}
  .agenda__medida,.agenda__nota{opacity:1;transform:none;animation:none}
}

@media (max-width:900px){
  .dor{grid-template-columns:1fr;min-height:0;gap:20px;padding-block:44px 24px}
  /* Empilhado não há duas colunas para o fio costurar, e o giro sai junto: sem texto ao */
  .dor__fio{display:none}
  .dor__cena{--ag-giro:0deg;perspective:none}
  .agenda{box-shadow:var(--shadow-card)}
  .dor__lede{max-width:none}
  .dor__cena{max-width:560px;margin-inline:auto}
  /* as quebras seguem o desenho da peça; em coluna única atrapalhariam */
  .quebra{display:none}
}

/* O motor — as duas telas do Tributare, com a cena rodando dentro */
.motor{--tt-ciclo:17s;--tt-curva:cubic-bezier(.32,.86,.28,1)}
.tt-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Os três atos e a base legal */
.atos{
  position:relative;max-width:1000px;
  margin:0 auto clamp(22px,2.8vw,34px);
  --at-no:11px;
}

/* ---------- o trilho ---------- */
.atos__trilho{
  position:relative;height:var(--at-no);
  /* começa e termina no centro das colunas das pontas, e não na borda do bloco: assim */
  margin:0 16.667% clamp(14px,1.6vw,18px);
}
.atos__linha{
  position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;
  background:var(--line);
}
/* o percurso: a aresta da frente é o que viaja, e ela leva um brilho */
.atos__fill{
  position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;
  border-radius:2px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--hero-blue) 22%,transparent),var(--hero-blue));
  animation:at-fill var(--tt-ciclo) var(--tt-curva) infinite;
}
.atos__fill::after{
  content:"";position:absolute;right:-1px;top:-3px;width:4px;height:8px;
  border-radius:2px;background:var(--hero-blue);
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--hero-blue) 85%,transparent);
}
@keyframes at-fill{
  0%,3%    {width:0;opacity:1}
  21%      {width:0}
  28%      {width:50%}
  55%      {width:50%}
  63%      {width:100%}
  90%      {width:100%;opacity:1}
  96%,100% {width:100%;opacity:0}
}

.atos__no{
  position:absolute;top:50%;width:var(--at-no);height:var(--at-no);
  margin:calc(var(--at-no) / -2) 0 0 calc(var(--at-no) / -2);
  border-radius:50%;background:var(--bg);
  border:1.5px solid var(--line);
}
.atos__no--1{left:0}
.atos__no--2{left:50%}
.atos__no--3{left:100%}
/* miolo que acende quando a estação está em cena */
.atos__no::before{
  content:"";position:absolute;inset:2px;border-radius:50%;
  background:var(--hero-blue);transform:scale(0);
  animation:at-no var(--tt-ciclo) var(--tt-curva) infinite;
}
/* anel que sai da estação no instante em que o percurso chega nela */
.atos__no::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;opacity:0;
  border:1px solid var(--hero-blue);
  animation:at-onda var(--tt-ciclo) var(--tt-curva) infinite;
}
.atos__no--2::before,.atos__no--2::after{animation-name:at-no-2,at-onda-2}
.atos__no--2::before{animation-name:at-no-2}
.atos__no--2::after{animation-name:at-onda-2}
.atos__no--3::before{animation-name:at-no-3}
.atos__no--3::after{animation-name:at-onda-3}

@keyframes at-no  {0%,1%{transform:scale(0)}  5%,21%{transform:scale(1)} 27%,100%{transform:scale(0)}}
@keyframes at-no-2{0%,24%{transform:scale(0)} 29%,55%{transform:scale(1)} 61%,100%{transform:scale(0)}}
@keyframes at-no-3{0%,59%{transform:scale(0)} 64%,90%{transform:scale(1)} 96%,100%{transform:scale(0)}}
@keyframes at-onda  {0%,1%{opacity:.8;transform:scale(.4)}   9%,100%{opacity:0;transform:scale(2.3)}}
@keyframes at-onda-2{0%,25%{opacity:.8;transform:scale(.4)} 33%,100%{opacity:0;transform:scale(2.3)}}
@keyframes at-onda-3{0%,60%{opacity:.8;transform:scale(.4)} 68%,100%{opacity:0;transform:scale(2.3)}}

/* ---------- os passos ---------- */
.atos__passos{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,28px);text-align:center;
}
.ato{display:grid;gap:3px;justify-items:center}
.ato__n{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--muted-2);
  animation:at-rot var(--tt-ciclo) var(--tt-curva) infinite;
}
.ato b{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.98rem,1.3vw,1.18rem);letter-spacing:-.02em;color:var(--hero-navy);
  animation:at-tit var(--tt-ciclo) var(--tt-curva) infinite;
}
.ato__d{font-size:12.5px;line-height:1.5;color:var(--muted);max-width:26ch}

.ato--2 .ato__n{animation-name:at-rot-2}
.ato--3 .ato__n{animation-name:at-rot-3}
.ato--2 b{animation-name:at-tit-2}
.ato--3 b{animation-name:at-tit-3}

@keyframes at-rot  {0%,1%{color:var(--muted-2)}  5%,21%{color:var(--hero-blue)} 27%,100%{color:var(--muted-2)}}
@keyframes at-rot-2{0%,24%{color:var(--muted-2)} 29%,55%{color:var(--hero-blue)} 61%,100%{color:var(--muted-2)}}
@keyframes at-rot-3{0%,59%{color:var(--muted-2)} 64%,90%{color:var(--hero-blue)} 96%,100%{color:var(--muted-2)}}
@keyframes at-tit  {0%,1%{color:var(--hero-navy)}  5%,21%{color:var(--hero-blue)} 27%,100%{color:var(--hero-navy)}}
@keyframes at-tit-2{0%,24%{color:var(--hero-navy)} 29%,55%{color:var(--hero-blue)} 61%,100%{color:var(--hero-navy)}}
@keyframes at-tit-3{0%,59%{color:var(--hero-navy)} 64%,90%{color:var(--hero-blue)} 96%,100%{color:var(--hero-navy)}}

/* A base legal — o que sustenta o cálculo */
.base{
  position:relative;margin-top:clamp(18px,2.2vw,26px);
  padding:clamp(13px,1.5vw,17px) clamp(14px,1.8vw,22px) clamp(14px,1.7vw,19px);
  border:1px solid var(--line);border-radius:12px;
  background-color:var(--panel-base);background-image:var(--panel);
}
/* A seta que prende o bloco à estação 02 */
.base::before,
.base::after{
  content:"";position:absolute;left:50%;top:-9px;z-index:1;
  width:17px;height:17px;margin-left:-8.5px;
  transform:rotate(45deg);border-radius:3px;
}
.base::before{background:var(--line)}
.base::after{top:-7.4px;background-color:var(--panel-base);background-image:var(--panel)}

.base__rot{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:clamp(10px,1.2vw,14px);
}
.base__rot::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.base__escudo{
  width:14px;height:14px;flex:none;color:var(--hero-blue);
  animation:at-escudo var(--tt-ciclo) var(--tt-curva) infinite;
}
@keyframes at-escudo{
  0%,24%   {opacity:.45;filter:none}
  30%,55%  {opacity:1;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--hero-blue) 70%,transparent))}
  62%,100% {opacity:.8;filter:none}
}

.base__lista{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.1vw,14px);
}
.base .fonte{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:8px;row-gap:1px;
  padding:9px 11px;border-radius:9px;
  border:1px solid var(--line-soft);background:var(--hover-weak);
  animation:at-fonte var(--tt-ciclo) var(--tt-curva) infinite;
  animation-delay:calc(var(--k) * 210ms);
}
.base .fonte b{
  grid-column:2;font-size:12px;font-weight:600;letter-spacing:-.01em;
  color:var(--fg-2);
}
.base .fonte span{
  grid-column:2;font-family:var(--font-mono);font-size:9.5px;
  color:var(--muted-2);
}
.base__visto{
  grid-row:1 / span 2;display:grid;place-items:center;
  width:17px;height:17px;border-radius:50%;
  border:1px solid var(--line);color:#fff;background:transparent;
  animation:at-visto var(--tt-ciclo) var(--tt-curva) infinite;
  animation-delay:calc(var(--k) * 210ms);
}
.base__visto svg{width:10px;height:10px;stroke-dasharray:16;stroke-dashoffset:16;
  animation:at-risco var(--tt-ciclo) var(--tt-curva) infinite;
  animation-delay:calc(var(--k) * 210ms);
}

@keyframes at-fonte{
  0%,25%   {border-color:var(--line-soft);background:var(--hover-weak);box-shadow:none}
  30%      {border-color:color-mix(in srgb,var(--hero-blue) 60%,transparent);
            background:color-mix(in srgb,var(--hero-blue) 10%,transparent);
            box-shadow:0 0 20px -6px color-mix(in srgb,var(--hero-blue) 90%,transparent)}
  36%,90%  {border-color:color-mix(in srgb,var(--hero-blue) 32%,transparent);
            background:color-mix(in srgb,var(--hero-blue) 6%,transparent);box-shadow:none}
  97%,100% {border-color:var(--line-soft);background:var(--hover-weak);box-shadow:none}
}
@keyframes at-visto{
  0%,26%   {background:transparent;border-color:var(--line)}
  31%,90%  {background:var(--hero-blue);border-color:var(--hero-blue)}
  97%,100% {background:transparent;border-color:var(--line)}
}
@keyframes at-risco{
  0%,27%   {stroke-dashoffset:16}
  34%,90%  {stroke-dashoffset:0}
  97%,100% {stroke-dashoffset:16}
}

/* a varredura que atravessa o bloco quando a consulta começa: é o gesto de */
.base__varredura{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  border-radius:inherit;
  background:linear-gradient(104deg,transparent 38%,
    color-mix(in srgb,var(--hero-blue) 14%,transparent) 50%,transparent 62%);
  background-size:260% 100%;background-repeat:no-repeat;
  animation:at-varre var(--tt-ciclo) linear infinite;
}
@keyframes at-varre{
  0%,23%   {opacity:0;background-position:130% 0}
  25%      {opacity:1}
  36%      {opacity:1;background-position:-70% 0}
  38%,100% {opacity:0;background-position:-70% 0}
}

/* A janela */
.tt{
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);
  background:#FFFFFF;
  box-shadow:0 34px 70px -40px rgba(11,18,32,.5);
  /* medidas do sistema recriado */
  --tt-cor:#333A45;        /* texto */
  --tt-cinza:#6C757D;      /* botão neutro */
  --tt-fio:#DDE1E6;        /* fio de tabela */
  --tt-fundo:#F7F8FA;      /* fundo de cabeçalho e campo */
  --tt-azul:#337AB7;
  --tt-ciano:#5BC0DE;
  --tt-verde:#5CB85C;
  --tt-ambar:#F0AD4E;
  --tt-vermelho:#E4574C;
  --tt-t:clamp(6.6px,.58vw,8.6px);   /* corpo das tabelas */
}
[data-theme="dark"] .tt{border-color:rgba(255,255,255,.14);box-shadow:0 34px 80px -40px #000}

.tt__chrome{
  display:flex;align-items:center;gap:10px;
  padding:0 12px;height:26px;
  background:var(--tt-fundo);border-bottom:1px solid var(--tt-fio);
}
.tt__pontos{display:flex;gap:5px}
.tt__pontos i{width:7px;height:7px;border-radius:50%;background:#D6DAE0}
.tt__url{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:#98A0AC;
}

.tt__palco{position:relative;padding:10px 10px 12px}
.tt-vista{transition:none}
.tt-vista--notas{
  position:relative;z-index:1;
  animation:tt-notas var(--tt-ciclo) var(--tt-curva) infinite;
}
.tt-vista--itens{
  position:absolute;inset:10px 10px 12px;z-index:2;opacity:0;
  animation:tt-itens var(--tt-ciclo) var(--tt-curva) infinite;
}
/* A altura do palco é a da tela de notas, que é a maior */
@keyframes tt-notas{
  0%,21%   {opacity:1;transform:translate3d(0,0,0)}
  26%,56%  {opacity:0;transform:translate3d(-2.2%,0,0)}
  61%,100% {opacity:1;transform:translate3d(0,0,0)}
}
@keyframes tt-itens{
  0%,23%   {opacity:0;transform:translate3d(2.2%,0,0)}
  28%,55%  {opacity:1;transform:translate3d(0,0,0)}
  59%,100% {opacity:0;transform:translate3d(2.2%,0,0)}
}

/* Peças comuns do sistema recriado */
.tt *{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.tt__palco{color:var(--tt-cor)}

.tt-barra{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding-bottom:9px;border-bottom:1px solid var(--tt-fio);
}
.tt-barra__titulo{
  display:flex;align-items:center;gap:6px;
  font-size:clamp(9px,.78vw,11.5px);font-weight:700;letter-spacing:.02em;
  color:#3E4652;text-transform:uppercase;
}
.tt-barra__ico{width:11px;height:11px;color:#8A929E}
.tt-barra__acoes{display:flex;gap:4px;flex-wrap:wrap}

.tt-bt{
  display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
  padding:4px 7px;border-radius:3px;
  font-size:clamp(6.8px,.6vw,8.8px);color:#fff;background:var(--tt-cinza);
}
.tt-bt i{font-style:normal;opacity:.75}
.tt-bt b{font-weight:700}
.tt-bt--dae{background:var(--tt-vermelho)}
.tt-bt--escuro{background:#55606E}
.tt-bt--verde{background:#3FA34D}
.tt-bt--vermelho{background:#D9534F}

.tt-filtros{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 0}
.tt-rot{
  padding:4px 7px;border-radius:3px 0 0 3px;
  background:var(--tt-fundo);border:1px solid var(--tt-fio);
  font-size:clamp(6.8px,.6vw,8.8px);color:#5C646F;white-space:nowrap;
}
.tt-campo{
  display:inline-flex;align-items:center;gap:6px;justify-content:space-between;
  padding:4px 7px;border-radius:3px;border:1px solid var(--tt-fio);background:#fff;
  font-size:clamp(6.8px,.6vw,8.8px);color:#3E4652;white-space:nowrap;
}
.tt-campo i{font-style:normal;color:#9AA2AE}
.tt-campo--largo{flex:1 1 150px;min-width:0}
.tt-campo--ie{color:#2E7D32;font-weight:600}
.tt-campo--qtd{background:#EAF6EA;color:#2E7D32;font-weight:600;min-width:34px;justify-content:center}
.tt-campo--busca{color:#A8AEB8;min-width:90px}

/* ---------- a faixa de totais ---------- */
.tt-totais{
  display:grid;grid-template-columns:repeat(8,1fr);gap:6px;
  padding:9px 0 11px;
}
.tt-tot__rot{
  font-size:clamp(6.2px,.55vw,8px);color:#6C757D;
  margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tt-tot__campo{
  display:flex;align-items:stretch;border:1px solid var(--tt-fio);border-radius:3px;
  background:#fff;overflow:hidden;
}
.tt-tot__campo span{
  padding:4px 5px;background:var(--tt-fundo);border-right:1px solid var(--tt-fio);
  font-size:clamp(6.4px,.55vw,8.2px);color:#8A929E;
}
.tt-tot__campo i{
  padding:4px 5px;background:#9AA2AE;color:#fff;font-style:normal;
  font-size:clamp(6.4px,.55vw,8.2px);
}
/* O valor só aparece no terceiro ato: enquanto o cálculo não rodou, o campo fica como */
.tt-tot__campo b{
  flex:1;text-align:right;padding:4px 6px;
  font-size:clamp(6.8px,.6vw,8.8px);font-weight:600;color:#3E4652;
  opacity:0;
  animation:tt-total var(--tt-ciclo) var(--tt-curva) infinite;
  animation-delay:calc(var(--k) * 90ms);
}
@keyframes tt-total{
  0%,63%   {opacity:0;background:transparent}
  66%      {opacity:1;background:#FFF6DB}
  72%,100% {opacity:1;background:transparent}
}

/* ---------- as tabelas ---------- */
.tt-tabela{
  width:100%;border-collapse:collapse;table-layout:fixed;
  font-size:var(--tt-t);
}
.tt-tabela th{
  padding:5px 4px;text-align:center;font-weight:600;color:#4A525E;
  background:var(--tt-fundo);border:1px solid var(--tt-fio);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tt-tabela td{
  padding:4px;text-align:center;border:1px solid var(--tt-fio);
  color:#3E4652;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* As cores de célula precisam do prefixo da tabela: `.tt-tabela td` já define uma */
.tt-esq{text-align:left!important}
.tt-dir{text-align:right!important}
.tt-tabela .tt-azul{color:var(--tt-azul)}
.tt-tabela .tt-verde{color:#2E9B6A}
.tt-tabela .tt-laranja{color:#E08A20}
.tt-tabela .tt-forte{font-weight:700}
.tt-tabela .tt-deb{color:#D9534F;font-weight:700}
.tt-tabela .tt-cred{color:#2E9B6A;font-weight:700}
.tt-tabela .tt-imp{font-weight:700}
.tt-chk{width:20px}
.tt-chk span{display:block;width:8px;height:8px;margin:0 auto;border:1px solid #C3C9D2;border-radius:2px;background:#fff}
.tt-info{color:var(--tt-azul);font-weight:700;font-style:italic;margin-left:4px}
.tt-menu{
  display:inline-block;width:9px;height:8px;margin-left:4px;vertical-align:-1px;
  background:linear-gradient(#8A929E,#8A929E) 0 1px/100% 1.2px no-repeat,
             linear-gradient(#8A929E,#8A929E) 0 4px/100% 1.2px no-repeat,
             linear-gradient(#8A929E,#8A929E) 0 7px/100% 1.2px no-repeat;
}
.tt-flag{
  display:inline-block;width:7px;height:7px;margin-left:3px;vertical-align:-1px;
  border-radius:1px;background:var(--tt-azul);
}
.tt-selo{
  display:inline-grid;padding:2px 6px;border-radius:3px;color:#fff;
  font-size:calc(var(--tt-t) * .96);line-height:1.35;
  background:var(--tt-ambar);
  animation:tt-selo-cor var(--tt-ciclo) var(--tt-curva) infinite;
  animation-delay:calc(var(--k) * 150ms);
}
.tt-selo i,.tt-selo b{
  grid-area:1/1;font-style:normal;font-weight:600;
  animation:tt-selo-txt var(--tt-ciclo) var(--tt-curva) infinite;
  animation-delay:calc(var(--k) * 150ms);
}
.tt-selo b{animation-name:tt-selo-txt-2}
/* A nota entra em Análise e só vira Processado depois que o cálculo rodou e o */
@keyframes tt-selo-cor{
  0%,62%   {background:var(--tt-ambar)}
  67%,100% {background:var(--tt-verde)}
}
@keyframes tt-selo-txt  {0%,62%{opacity:1} 66%,100%{opacity:0}}
@keyframes tt-selo-txt-2{0%,63%{opacity:0} 67%,100%{opacity:1}}

.tt-acoes{white-space:nowrap}
.tt-ac{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:11px;margin:0 1px;border-radius:2px;
  background:var(--tt-ciano);color:#fff;vertical-align:middle;
}
.tt-ac svg{width:8px;height:8px}
.tt-ac--cha{background:#4FB3D0}

/* ---------- tela 1: as linhas chegam ---------- */
/* Uma coluna só fica sem medida — Emitente na tela 1, Descrição na tela 2 —, e é para */
.tt-tabela--notas th:nth-child(1){width:20px}
.tt-tabela--notas th:nth-child(2){width:54px}
.tt-tabela--notas th:nth-child(4){width:32px}
.tt-tabela--notas th:nth-child(5){width:54px}
.tt-tabela--notas th:nth-child(6){width:48px}
.tt-tabela--notas th:nth-child(7){width:66px}
.tt-tabela--notas th:nth-child(8){width:76px}
.tt-tabela--notas th:nth-child(9){width:84px}
.tt-tabela--notas th:nth-child(10){width:74px}
.tt-tabela--notas th:nth-child(11){width:50px}
.tt-tabela--notas th:nth-child(12){width:70px}
.tt-tabela--notas th:nth-child(13){width:40px}
.tt-tabela--notas th:nth-child(14){width:78px}

.tt-tabela--itens th:nth-child(1){width:18px}
.tt-tabela--itens th:nth-child(2){width:22px}
.tt-tabela--itens th:nth-child(4){width:34px}
.tt-tabela--itens th:nth-child(5){width:58px}
.tt-tabela--itens th:nth-child(6){width:72px}
.tt-tabela--itens th:nth-child(7){width:48px}
.tt-tabela--itens th:nth-child(8){width:36px}
.tt-tabela--itens th:nth-child(9){width:30px}
.tt-tabela--itens th:nth-child(10){width:40px}
.tt-tabela--itens th:nth-child(11){width:36px}
.tt-tabela--itens th:nth-child(12){width:44px}
.tt-tabela--itens th:nth-child(13){width:50px}
.tt-tabela--itens th:nth-child(14){width:38px}
.tt-tabela--itens th:nth-child(15){width:46px}
.tt-tabela--itens th:nth-child(16){width:50px}
.tt-tabela--itens th:nth-child(17){width:46px}
.tt-tabela--itens th:nth-child(18){width:46px}
.tt-tabela--itens th:nth-child(19){width:48px}
.tt-tabela--itens th:nth-child(20){width:30px}
.tt-tabela--itens th:nth-child(21){width:46px}
.tt-tabela--itens th:nth-child(22){width:40px}

/* A base é invisível: sem ela, a linha cujo atraso ainda não começou aparece pronta */
.tt-tabela--notas tbody tr{
  opacity:0;
  animation:tt-linha var(--tt-ciclo) var(--tt-curva) infinite;
  animation-delay:calc(var(--k) * 374ms);
}
@keyframes tt-linha{
  0%,4%    {opacity:0;transform:translate3d(0,-5px,0)}
  9%,100%  {opacity:1;transform:none}
}
.tt-bt--vermelho[data-importar]{
  animation:tt-pulsa var(--tt-ciclo) var(--tt-curva) infinite;
}
.tt-bt--dae{animation:tt-pulsa-dae var(--tt-ciclo) var(--tt-curva) infinite}
@keyframes tt-pulsa{
  0%,2%    {box-shadow:0 0 0 0 rgba(217,83,79,.55)}
  7%       {box-shadow:0 0 0 7px rgba(217,83,79,0)}
  100%     {box-shadow:0 0 0 0 rgba(217,83,79,0)}
}
@keyframes tt-pulsa-dae{
  0%,70%   {box-shadow:0 0 0 0 rgba(228,87,76,.55)}
  75%      {box-shadow:0 0 0 8px rgba(228,87,76,0)}
  100%     {box-shadow:0 0 0 0 rgba(228,87,76,0)}
}

/* ---------- tela 2: a regra sendo aplicada ---------- */
.tt-vista--itens{position:absolute}
.tt-abas{border-bottom:1px solid var(--tt-fio);display:flex}
.tt-aba{
  padding:4px 12px;border:1px solid var(--tt-fio);border-bottom:0;
  border-radius:3px 3px 0 0;background:#fff;margin-bottom:-1px;
  font-size:clamp(6.8px,.6vw,8.8px);color:#3E4652;
}
.tt-busca{display:flex;justify-content:flex-end;align-items:center;gap:0;padding:7px 0 8px}
.tt-busca .tt-rot{border-right:0}
.tt-busca .tt-campo{border-radius:0 3px 3px 0}

.tt-linha--foco{background:#FCF8E3;box-shadow:inset 0 0 0 1.5px #E8C34A}

/* As colunas calculadas nascem vazias e são preenchidas quando o feixe passa pela */
.tt-calc{
  opacity:0;
  animation:tt-calc var(--tt-ciclo) var(--tt-curva) infinite;
  animation-delay:calc(var(--k) * 340ms);
}
@keyframes tt-calc{
  0%,31%   {opacity:0;background:transparent}
  35%      {opacity:1;background:#E8F2FB}
  41%,100% {opacity:1;background:transparent}
}
.tt-ncm{
  animation:tt-ncm var(--tt-ciclo) var(--tt-curva) infinite;
  animation-delay:calc(var(--k) * 340ms);
}
@keyframes tt-ncm{
  0%,29%   {background:transparent;box-shadow:none}
  32%      {background:#FFF3CD;box-shadow:inset 0 0 0 1px #E8C34A}
  38%,100% {background:#FFFAEB;box-shadow:none}
}

/* o feixe que desce sobre a lista, do mesmo jeito que o scanner do Radar360: o que */
.tt-scanner{
  position:absolute;left:0;right:0;height:42px;pointer-events:none;opacity:0;
  border-bottom:1px solid color-mix(in srgb,var(--hero-blue) 70%,transparent);
  background:linear-gradient(180deg,transparent,
    color-mix(in srgb,var(--hero-blue) 10%,transparent));
  animation:tt-scan var(--tt-ciclo) linear infinite;
}
@keyframes tt-scan{
  0%,28%   {opacity:0;top:22%}
  30%      {opacity:1}
  52%      {opacity:1}
  55%,100% {opacity:0;top:100%}
}

/* o rodapé da listagem, como na tela: também é ele que dá o vão onde o recibo pousa */
.tt-rodape{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 2px 2px;
  font-size:clamp(6.6px,.58vw,8.6px);color:#6C757D;
}
.tt-rodape b{color:var(--tt-azul);font-weight:600}
.tt-pag{display:inline-flex;gap:0}
.tt-pag i,.tt-pag b{
  display:grid;place-items:center;min-width:16px;height:14px;padding:0 4px;
  border:1px solid var(--tt-fio);font-style:normal;background:#fff;color:#6C757D;
}
.tt-pag b{background:var(--tt-azul);border-color:var(--tt-azul);color:#fff;font-weight:600}

/* ---------- o recibo do terceiro ato ---------- */
.tt-recibo{
  position:absolute;right:14px;bottom:10px;z-index:3;opacity:0;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:7px;
  background:#2E9B6A;color:#fff;
  font-size:clamp(8px,.72vw,10.5px);font-weight:600;letter-spacing:.01em;
  box-shadow:0 12px 26px -12px rgba(46,155,106,.9);
  animation:tt-recibo var(--tt-ciclo) var(--tt-curva) infinite;
}
.tt-recibo svg{width:12px;height:12px}
@keyframes tt-recibo{
  0%,72%   {opacity:0;transform:translate3d(0,10px,0) scale(.96)}
  77%      {opacity:1;transform:translate3d(0,0,0) scale(1.03)}
  80%,91%  {opacity:1;transform:translate3d(0,0,0) scale(1)}
  96%,100% {opacity:0;transform:translate3d(0,10px,0) scale(.96)}
}

.motor__pe{
  margin-top:clamp(18px,2.2vw,26px);text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--muted);
  max-width:56ch;margin-inline:auto;
}

/* ---------- a cena espera ser vista ---------- */
.tt.armado{opacity:0;transform:translateY(16px);
  transition:opacity 640ms var(--ease),transform 720ms var(--ease)}
.tt.armado *{animation-play-state:paused}
.tt.armado.entrou{opacity:1;transform:none}
.tt.armado.entrou *{animation-play-state:running}

/* ---------- telas menores ---------- Cortar colunas resolveria mais fácil, mas o */
@media (max-width:1000px){
  .base__lista{grid-template-columns:repeat(2,1fr)}
  .tt-totais{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  /* Em coluna única o trilho horizontal perde o sentido: as estações não teriam três */
  .atos__trilho{display:none}
  .atos__passos{grid-template-columns:1fr;gap:16px;text-align:left}
  .ato{justify-items:start}
  .ato__d{max-width:none}
  .base::before,.base::after{display:none}
  .base__lista{grid-template-columns:1fr}
}
@media (max-width:720px){
  .tt-totais{grid-template-columns:repeat(2,1fr)}
  .tt__palco{padding:7px 7px 9px}
  .tt-vista--itens{inset:7px 7px 9px}
  .tt-barra__acoes .tt-bt:nth-child(n+5){display:none}

  /* Aqui as colunas saem mesmo */
  .tt-tabela{table-layout:auto}
  .tt-tabela th{width:auto!important}
  .tt-chk{display:none}
  .tt-corta{display:none}
  .tt-tabela--notas th:nth-child(4),.tt-tabela--notas td:nth-child(4),
  .tt-tabela--notas th:nth-child(5),.tt-tabela--notas td:nth-child(5),
  .tt-tabela--notas th:nth-child(6),.tt-tabela--notas td:nth-child(6),
  .tt-tabela--notas th:nth-child(7),.tt-tabela--notas td:nth-child(7),
  .tt-tabela--notas th:nth-child(10),.tt-tabela--notas td:nth-child(10),
  .tt-tabela--notas th:nth-child(11),.tt-tabela--notas td:nth-child(11),
  .tt-tabela--notas th:nth-child(13),.tt-tabela--notas td:nth-child(13){display:none}

  /* Na tela de itens ficam NCM, valor e as três colunas do cálculo, que é o que a seção */
  .tt-tabela--itens th:nth-child(4),.tt-tabela--itens td:nth-child(4),
  .tt-tabela--itens th:nth-child(5),.tt-tabela--itens td:nth-child(5),
  .tt-tabela--itens th:nth-child(8),.tt-tabela--itens td:nth-child(8),
  .tt-tabela--itens th:nth-child(9),.tt-tabela--itens td:nth-child(9),
  .tt-tabela--itens th:nth-child(10),.tt-tabela--itens td:nth-child(10),
  .tt-tabela--itens th:nth-child(11),.tt-tabela--itens td:nth-child(11),
  .tt-tabela--itens th:nth-child(12),.tt-tabela--itens td:nth-child(12),
  .tt-tabela--itens th:nth-child(13),.tt-tabela--itens td:nth-child(13),
  .tt-tabela--itens th:nth-child(14),.tt-tabela--itens td:nth-child(14),
  .tt-tabela--itens th:nth-child(16),.tt-tabela--itens td:nth-child(16),
  .tt-tabela--itens th:nth-child(17),.tt-tabela--itens td:nth-child(17),
  .tt-tabela--itens th:nth-child(20),.tt-tabela--itens td:nth-child(20),
  .tt-tabela--itens th:nth-child(21),.tt-tabela--itens td:nth-child(21),
  .tt-tabela--itens th:nth-child(22),.tt-tabela--itens td:nth-child(22){display:none}
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .tt.armado{opacity:1;transform:none}
  .tt *{animation:none!important}
  .tt-vista--itens{display:none}
  .tt-tot__campo b,.tt-calc{opacity:1}
  .tt-selo{background:var(--tt-verde)}
  .tt-selo i{opacity:0}
  .tt-selo b{opacity:1}
  .tt-scanner,.tt-recibo{display:none}
  .atos__fill{width:100%}
  .atos__no::before{transform:scale(1)}
  .atos__no::after,.base__varredura{display:none}
  .ato__n,.ato b{color:var(--hero-blue)}
  .base .fonte{border-color:color-mix(in srgb,var(--hero-blue) 32%,transparent);
    background:color-mix(in srgb,var(--hero-blue) 6%,transparent)}
  .base__visto{background:var(--hero-blue);border-color:var(--hero-blue)}
  .base__visto svg{stroke-dashoffset:0}
}

/* Comparação */
.confronto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.confronto__lado{
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background-color:var(--panel-base);background-image:var(--panel);
}
.confronto__lado--tributare{border-color:var(--line);position:relative;overflow:hidden}
.confronto__lado--tributare::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 0,var(--acc) 26px,transparent 76%);
}
.confronto__rotulo{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;
}
.confronto__lado--tributare .confronto__rotulo{color:var(--acc)}
.confronto__lado li{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
  font-size:13.5px;line-height:1.55;color:var(--muted);
}
.confronto__lado li:last-child{border-bottom:0}
.confronto__lado li::before{
  content:"";width:14px;height:14px;flex:0 0 14px;margin-top:3px;background:var(--muted-2);
  -webkit-mask:var(--icon-alerta) center/14px 14px no-repeat;mask:var(--icon-alerta) center/14px 14px no-repeat;
}
.confronto__lado--tributare li{color:var(--fg-2)}
.confronto__lado--tributare li::before{
  background:var(--acc);
  -webkit-mask:var(--icon-check) center/14px 14px no-repeat;mask:var(--icon-check) center/14px 14px no-repeat;
}

/* Dúvidas — duas colunas, para a seção caber num relance */
.duvidas{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(28px,4vw,60px);align-items:start;
  max-width:1080px;margin-inline:auto;
}
/* Duas colunas independentes: em grade compartilhada, abrir um item empurraria a */
.duvidas__coluna{display:flex;flex-direction:column}

.duvidas details{
  border-top:1px solid var(--line-soft);
  transition:border-color 240ms var(--ease);
}
.duvidas__coluna details:last-child{border-bottom:1px solid var(--line-soft)}
.duvidas details[open]{border-top-color:color-mix(in srgb,var(--hero-blue) 45%,transparent)}

.duvidas summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 2px;font-size:14.5px;font-weight:500;cursor:pointer;list-style:none;
  transition:color 220ms var(--ease);
}
.duvidas summary::-webkit-details-marker{display:none}

/* sinal de mais que vira traço: diz "abre e fecha" melhor que uma seta */
.duvidas summary::after{
  content:"";flex:none;width:11px;height:11px;
  background:
    linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat;
  color:var(--muted-2);
  transition:transform 260ms var(--ease),background-size 260ms var(--ease),color 220ms var(--ease);
}
.duvidas details[open] summary::after{
  transform:rotate(90deg);
  background-size:0 1.5px, 1.5px 11px;   /* some a barra horizontal; a vertical, girada, vira o traço */
}
.duvidas summary:hover{color:var(--hero-blue)}
.duvidas summary:hover::after{color:var(--hero-blue)}
.duvidas details[open] summary{color:var(--hero-navy)}
.duvidas details[open] summary::after{color:var(--hero-blue)}

.duvidas p{
  padding:0 0 16px;max-width:52ch;
  font-size:13.5px;line-height:1.65;color:var(--muted);
}

@media (max-width:820px){
  .duvidas{grid-template-columns:1fr;gap:0}
  .duvidas p{max-width:none}
  /* a segunda coluna encosta na primeira sem repetir o fio */
  .duvidas__coluna:first-child details:last-child{border-bottom:0}
}
/* Telas estreitas */
@media (max-width:900px){
  .confronto{grid-template-columns:1fr}
}

@media (max-width:820px){
  .duvidas{grid-template-columns:1fr;gap:0}
  .duvidas p{max-width:none}
  /* a segunda coluna encosta na primeira sem repetir o fio do topo */
  .duvidas__coluna + .duvidas__coluna details:first-child{border-top:1px solid var(--line-soft)}
}

/* Selo do escopo — uma linha, centralizada */
.faixa-uf{padding-block:clamp(10px,2vh,22px);display:flex;justify-content:center}

.selo-uf{
  display:inline-flex;align-items:center;gap:11px;
  padding:8px 18px;
  border:1px solid color-mix(in srgb,var(--hero-blue) 20%,var(--line));
  border-radius:999px;
  font-size:clamp(.82rem,1vw,.95rem);font-weight:500;letter-spacing:-.005em;
  color:var(--hero-navy);
}

.selo-uf__bandeira{
  width:22px;height:auto;flex:none;
  border-radius:2px;
  outline:1px solid rgba(11,33,87,.16);outline-offset:-1px;
}
[data-theme="dark"] .selo-uf__bandeira{outline-color:rgba(255,255,255,.22)}

/* ---------- entrada ---------- */
.selo-uf{opacity:1}
.selo-uf.armar{opacity:0;transform:translateY(8px)}
.selo-uf.armar.entrou{
  opacity:1;transform:none;
  transition:opacity 420ms var(--ease),transform 520ms var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .selo-uf.armar{opacity:1;transform:none}
}

/* Botão flutuante */
.flutuante{
  position:fixed;right:clamp(16px,2.4vw,26px);bottom:clamp(16px,2.4vw,26px);z-index:8;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:-.005em;
  /* cor cheia da marca: é a única chamada visível enquanto o visitante percorre o miolo */
  color:#fff;
  background:var(--hero-blue);
  border:1px solid color-mix(in srgb,var(--hero-blue) 80%,#000);
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--hero-blue) 75%,transparent),
             0 2px 5px rgba(11,33,87,.18);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);
  transition:opacity 320ms var(--ease),transform 380ms var(--ease),
             visibility 0s linear 380ms,box-shadow 240ms var(--ease),filter 220ms var(--ease);
}
/* halo pulsando devagar, uma vez a cada ciclo longo: chama sem agitar */
.flutuante::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--hero-blue) 55%,transparent);
}
.flutuante.visivel::after{animation:flutua-halo 4.6s var(--ease) 1s infinite}
@keyframes flutua-halo{
  0%,72%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hero-blue) 50%,transparent)}
  86%{box-shadow:0 0 0 9px color-mix(in srgb,var(--hero-blue) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hero-blue) 0%,transparent)}
}
@media (prefers-reduced-motion:reduce){ .flutuante.visivel::after{animation:none} }
.flutuante.visivel{
  opacity:1;visibility:visible;transform:none;
  transition:opacity 320ms var(--ease),transform 380ms var(--ease),
             visibility 0s,filter 220ms var(--ease);
}
.flutuante:hover{
  filter:brightness(1.08);
  box-shadow:0 14px 28px -12px color-mix(in srgb,var(--hero-blue) 85%,transparent),
             0 2px 5px rgba(11,33,87,.2);
}
.flutuante svg{width:13px;height:13px;transition:transform 260ms var(--ease)}
.flutuante:hover svg{transform:translateX(3px)}
[data-theme="dark"] .flutuante{
  color:var(--on-acc);
  border-color:color-mix(in srgb,var(--hero-blue) 70%,#000);
  box-shadow:0 12px 26px -14px color-mix(in srgb,var(--hero-blue) 60%,transparent),
             0 2px 6px rgba(0,0,0,.5);
}

@media (max-width:560px){
  .flutuante{right:14px;bottom:14px;padding:11px;font-size:12.5px}
  .flutuante__texto{display:none}          /* no celular, só a seta */
  .flutuante svg{width:16px;height:16px}
}

@media (prefers-reduced-motion:reduce){
  .flutuante{transition:opacity 1ms,visibility 1ms;transform:none}
}

/* título de seção centralizado */
.demonstrativo__cabeca--centro{
  flex-direction:column;align-items:center;text-align:center;gap:8px;
}
.demonstrativo__cabeca--centro h2{margin:0}

/* Depoimentos — três falas em colunas, sem moldura */
.vozes{padding-block:clamp(40px,5.4vw,76px)}

/* Carrossel contínuo: as falas caminham devagar e param quando o ponteiro entra na */
.vozes__janela{
  display:flex;gap:clamp(24px,3vw,44px);
  overflow:hidden;   /* a máscara esconde, mas quem corta o layout é isto */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.vozes__trilha{
  display:flex;align-items:stretch;gap:clamp(24px,3vw,44px);flex:none;
  animation:vozes-anda 46s linear infinite;
}
.vozes:hover .vozes__trilha{animation-play-state:paused}
@keyframes vozes-anda{from{transform:translateX(0)}to{transform:translateX(-100%)}}

.vozes__trilha li{
  flex:none;width:clamp(290px,25vw,380px);
  border-top:1px solid color-mix(in srgb,var(--hero-blue) 30%,var(--line-soft));
  padding-top:clamp(18px,2.2vw,26px);
  display:flex;flex-direction:column;
  transition:opacity 320ms var(--ease),border-color 320ms var(--ease),
             transform 380ms var(--ease);
}
/* ao parar, tudo recua e só a fala sob o ponteiro fica de pé */
.vozes:hover .vozes__trilha li{opacity:.4}
.vozes .vozes__trilha li:hover{
  opacity:1;transform:translateY(-4px);
  border-top-color:var(--hero-blue);
}
.vozes__trilha li:hover blockquote{color:var(--hero-navy)}
.vozes__trilha li:hover blockquote::before{
  color:color-mix(in srgb,var(--hero-blue) 30%,transparent);
}
.vozes__trilha li:hover .voz__marca{
  border-color:var(--hero-blue);
  background:color-mix(in srgb,var(--hero-blue) 10%,transparent);
}

.vozes blockquote{
  position:relative;
  font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.6;
  color:var(--hero-navy);
  margin-bottom:clamp(18px,2.4vw,26px);
}
/* aspa como marca-d'água, atrás do texto */
.vozes blockquote::before{
  content:"“";position:absolute;left:-4px;top:-26px;z-index:-1;
  font-family:var(--font-display);font-size:4.5rem;line-height:1;
  color:color-mix(in srgb,var(--hero-blue) 14%,transparent);
}

.voz__quem{
  display:flex;align-items:center;gap:11px;margin-top:auto;
}
.voz__marca{
  display:grid;place-items:center;flex:none;width:32px;height:32px;
  border:1px solid color-mix(in srgb,var(--hero-blue) 32%,var(--line));
  border-radius:50%;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--hero-blue);
}
.voz__id{display:block}
.voz__id b{
  display:block;font-family:var(--font-body);
  font-size:13.5px;font-weight:600;color:var(--hero-navy);
  margin-bottom:3px;
}
/* cargo, escritório e cidade em linhas próprias: com tudo numa linha só, umas */
.voz__id i{
  display:block;font-style:normal;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  line-height:1.55;color:var(--muted-2);
}

@media (prefers-reduced-motion:reduce){
  .vozes__trilha{animation:none}
  .vozes__janela{overflow-x:auto}
}
@media (max-width:900px){
  .vozes__trilha li{width:min(78vw,320px)}
  .vozes blockquote{margin-bottom:16px}
}

/* Marca-d'água do produto no hero */
.hero__marca{
  /* canto inferior direito, fora da coluna de texto e abaixo do trilho */
  position:absolute;right:clamp(-34px,-1.6vw,4px);bottom:clamp(14px,3vh,38px);
  width:clamp(240px,26vw,430px);aspect-ratio:442/288;
  pointer-events:none;z-index:0;
  background:url(../img/tributare/simbolo.webp) center/contain no-repeat;
  opacity:.5;
  /* esmaece para a direita, para não terminar num corte reto na borda */
  -webkit-mask-image:linear-gradient(100deg,#000 45%,transparent 98%);
          mask-image:linear-gradient(100deg,#000 45%,transparent 98%);
}
[data-theme="dark"] .hero__marca{opacity:.22}

@media (max-width:900px){ .hero__marca{display:none} }
@media (prefers-reduced-motion:no-preference){
  .hero.armar .hero__marca{opacity:0}
  .hero.armar.entrou .hero__marca{
    opacity:.5;transition:opacity 900ms var(--ease) 700ms;
  }
  [data-theme="dark"] .hero.armar.entrou .hero__marca{opacity:.22}
}