/* SIBERYON — folha de estilo compartilhada pelo site, portal e painel.
   Versão na URL (estilo.css?v=N): troque o número a cada alteração,
   porque o servidor manda o navegador guardar arquivos estáticos por 1 ano. */

:root{
  /* paleta oficial SIBERYON */
  --grafite:#080D12;
  --roxo-profundo:#6D28D9;
  --roxo-neon:#A855F7;
  --ciano:#00E5FF;
  --esmeralda:#00C896;
  --off-white:#F4F6F7;
  --branco:#FFFFFF;

  --bg:var(--grafite);
  --bg-soft:#0B121A;
  --card:#0D141C;
  --fg:var(--off-white);
  --muted:#94A3B4;
  --line:rgba(148,163,180,.16);
  --line-strong:rgba(168,85,247,.42);

  --grad:linear-gradient(100deg,#A855F7 0%,#6D28D9 48%,#00E5FF 100%);
  --grad-simple:linear-gradient(100deg,#A855F7,#00E5FF);
  --grad-symbol:linear-gradient(135deg,#B026FF,#6D28D9 38%,#00E5FF 72%,#00C896);

  --ok:#00C896;
  --warn:#F2B84B;
  --crit:#FF5D73;
  --info:#00E5FF;

  --display:"Montserrat","Poppins","Century Gothic","Futura","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* as âncoras param abaixo das barras fixas, e não escondidas atrás delas */
section[id],[id="top"]{scroll-margin-top:8.5rem}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:600}
p{margin:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
input,textarea,select,button{font:inherit;color:inherit}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:1.6rem}
.grad-bg{background-image:var(--grad)}
.grad-text{background-image:var(--grad-simple);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
.mark{flex:none;display:inline-block;background-repeat:no-repeat;background-position:center;background-size:contain;background-image:url("/img/marca.webp?v=1")}
.mark.hd{width:40px;height:40px}
.mark.hero{width:160px;height:200px;filter:drop-shadow(0 0 38px rgba(109,40,217,.42))}
.mark.sm{width:30px;height:30px}
/* Assinatura oficial da marca — arte vetorizada do banner, usada em TODA ocorrência do nome.
   O texto continua no HTML (leitores de tela e impressão), apenas visualmente substituído. */
.wordmark{display:inline-block;vertical-align:middle;text-indent:-9999px;overflow:hidden;
  white-space:nowrap;height:1em;width:calc(1em * 785 / 91);
  background:url("/img/logotipo.png?v=1") no-repeat left center;background-size:contain}
.wordmark-desc{display:block;text-indent:-9999px;overflow:hidden;white-space:nowrap;
  height:1em;width:calc(1em * 784 / 37);
  background:url("/img/logotipo-desc.png?v=1") no-repeat left center;background-size:contain}

/* ---------- componentes compartilhados ---------- */
.label{display:flex;align-items:center;gap:.85rem}
.label .rule{display:block;height:2px;width:2.4rem;border-radius:2px}
.label .txt{font-size:.67rem;font-weight:600;text-transform:uppercase;letter-spacing:.26em;color:#C3CBDD}
.pill{display:inline-flex;align-items:center;gap:.65rem;border:1px solid var(--line-strong);border-radius:999px;
  padding:.58rem 1.1rem;font-size:.86rem;white-space:nowrap;transition:background-color .2s}
.pill:hover{background:rgba(168,85,247,.12)}
.btn{display:inline-flex;align-items:center;gap:.7rem;border-radius:999px;border:0;cursor:pointer;
  padding:.8rem 1rem .8rem 1.5rem;font-size:.88rem;font-weight:600;color:#fff;
  box-shadow:0 10px 30px rgba(109,40,217,.32)}
.chev{display:inline-flex;height:1.45rem;width:1.45rem;align-items:center;justify-content:center;border-radius:999px;
  border:1px solid rgba(255,255,255,.25)}
.btn .chev{background:rgba(255,255,255,.16);border-color:transparent}
.card{border:1px solid var(--line);border-radius:var(--r);background:
    radial-gradient(420px 180px at 0% 0%,rgba(109,40,217,.14),transparent 70%),
    linear-gradient(160deg,rgba(13,20,28,.96),rgba(8,13,18,.96));padding:1.5rem}
.tag{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.16rem .6rem;
  font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line)}
.t-ok{color:var(--ok);border-color:rgba(0,200,150,.4);background:rgba(0,200,150,.1)}
.t-run{color:var(--ciano);border-color:rgba(0,229,255,.4);background:rgba(0,229,255,.1)}
.t-wait{color:var(--warn);border-color:rgba(242,184,75,.42);background:rgba(242,184,75,.1)}
.t-crit{color:var(--crit);border-color:rgba(255,93,115,.42);background:rgba(255,93,115,.1)}
.t-idle{color:var(--muted);background:rgba(148,163,180,.08)}
.t-purple{color:#C4A5FF;border-color:rgba(168,85,247,.45);background:rgba(168,85,247,.12)}
.bar{height:8px;border-radius:999px;background:rgba(148,163,180,.16);overflow:hidden}
.bar > span{display:block;height:100%;border-radius:999px;background-image:var(--grad-simple)}
.bar.sm{height:6px}
.demo{display:inline-flex;align-items:center;gap:.45rem;border:1px dashed rgba(242,184,75,.5);color:var(--warn);
  border-radius:999px;padding:.2rem .7rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.grid{display:grid;gap:1.2rem}
.kpi{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:1.1rem 1.2rem}
.kpi .n{font-family:var(--display);font-size:1.75rem;font-weight:700;line-height:1.1}
.kpi .k{margin-block-start:.25rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
th,td{text-align:start;padding:.72rem .8rem;font-size:.83rem;border-block-end:1px solid var(--line);vertical-align:top}
th{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
tbody tr:last-child td{border-block-end:0}
.scroll-x{overflow-x:auto}
.field{display:flex;flex-direction:column;gap:.4rem}
.field span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{background:#070C12;border:1px solid var(--line);border-radius:10px;
  padding:.7rem .85rem;font-size:.87rem;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid rgba(0,229,255,.45);outline-offset:1px}

/* ---------- SITE ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(8,13,18,.9);border-block-end:1px solid var(--line);backdrop-filter:blur(14px)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1rem}
.brand{display:flex;align-items:center;gap:.8rem}
.brand .wordmark{font-size:1.5rem}
nav.main{display:flex;align-items:center;gap:2rem;margin-inline-start:auto}
nav.main a{display:inline-flex;align-items:center;gap:.3rem;font-size:.89rem;color:#DCE3EE}
nav.main a:hover{color:#fff}
.hero{position:relative;overflow:hidden;border-block-end:1px solid var(--line);background:
  radial-gradient(1000px 480px at 86% 20%,rgba(109,40,217,.28),transparent 62%),
  radial-gradient(700px 400px at 96% 74%,rgba(0,229,255,.12),transparent 65%),
  linear-gradient(180deg,#0A1018,#080D12)}
/* os feixes geométricos somem onde a arte da marca começa, evitando sobreposição */
.beams{position:absolute;inset:0;pointer-events:none;opacity:.7;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 38%,transparent 56%);
  mask-image:linear-gradient(to right,#000 0,#000 38%,transparent 56%)}
.hero .wrap{position:relative;display:grid;gap:3rem;align-items:center;padding-block:4.2rem 4.6rem}
.hero h1{margin-block-start:1.5rem;font-size:clamp(2.2rem,4.5vw,3.3rem);line-height:1.14;letter-spacing:-.015em;font-weight:700}
.hero .lead{margin-block-start:1.4rem;max-width:31rem;font-size:.94rem;color:#B4BECE}
.hero .actions{margin-block-start:2rem;display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
/* composição vetorial da marca, integrada à lateral do hero (nítida em qualquer tela) */
.hero-art{position:relative;display:grid;place-items:center;min-height:19rem;isolation:isolate}
.hero-art .art-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%)}
.art-lockup{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1.3rem;text-align:start}
.mark.art{width:104px;height:130px;filter:drop-shadow(0 0 26px rgba(109,40,217,.45))}
.art-name{font-size:clamp(2.2rem,5vw,3.3rem);margin:0}
.art-tag{margin-block-start:1.1rem;font-size:clamp(.62rem,1.15vw,.8rem);opacity:.92}
section.pad{padding-block:4.2rem}
.sec-head{display:grid;gap:1.6rem;align-items:end}
.sec-head h2{margin-block-start:1.35rem;font-size:clamp(1.7rem,3.2vw,2.25rem);line-height:1.22;font-weight:600}
.sec-head .support{font-size:.9rem;color:#A9B3C5;max-width:24rem}
.svc{display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.svc:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.tile{display:inline-flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:.8rem;border:1px solid rgba(255,255,255,.10)}
.tile.v{background:linear-gradient(150deg,rgba(109,40,217,.6),rgba(24,16,46,.7));color:#D9C8FF}
.tile.c{background:linear-gradient(150deg,rgba(0,229,255,.36),rgba(8,30,44,.7));color:#B6F3FF}
.tile.t{background:linear-gradient(150deg,rgba(0,200,150,.36),rgba(7,32,30,.7));color:#B3F5E8}
.svc h3{margin-block-start:1.3rem;font-size:1rem}
.svc .sub{margin-block-start:.22rem;font-size:.84rem;font-weight:600;color:#E3E9F2}
.svc .desc{margin-block-start:.8rem;flex:1;font-size:.85rem;color:#A3AEC3}
.why{position:relative;overflow:hidden;border-block:1px solid var(--line);
  background:radial-gradient(900px 420px at 4% 50%,rgba(0,229,255,.10),transparent 62%),var(--bg)}
.why .curves{position:absolute;inset-block:0;inset-inline-start:0;width:38%;pointer-events:none;opacity:.6}
.why .wrap{position:relative;display:grid;gap:2.4rem;padding-block:3.4rem}
.why h2{margin-block-start:1.3rem;font-size:clamp(1.55rem,2.9vw,2rem);line-height:1.25}
.diffs{display:grid;gap:1.5rem}
.diff{padding-inline-start:1.3rem;border-inline-start:1px solid var(--line)}
.diff:first-child{padding-inline-start:0;border-inline-start:0}
.diff .ico{color:var(--ciano)}
.diff h3{margin-block-start:.8rem;font-size:.88rem}
.diff p{margin-block-start:.45rem;font-size:.79rem;color:var(--muted)}
.quote{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.3;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:1.2rem}
.chip{border:1px solid var(--line);border-radius:999px;padding:.3rem .85rem;font-size:.76rem;color:#C3CCDA}
.case{border:1px dashed rgba(148,163,180,.32);border-radius:var(--r);padding:1.4rem;background:rgba(13,20,28,.5)}
.case h3{font-size:.98rem}
.case dl{margin:1rem 0 0;display:grid;gap:.55rem}
.case dt{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.case dd{margin:0;font-size:.83rem;color:#AEB8C8}
footer.site{background:#070B10;border-block-start:1px solid var(--line)}
footer.site .wrap{display:grid;gap:1.6rem;padding-block:2.2rem}
footer.site .links{display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.85rem;color:#B8C2D2}
footer.site .links a:hover{color:#fff}
.legal{border-block-start:1px solid var(--line);padding-block:1rem;font-size:.75rem;color:var(--muted)}

/* ---------- LOGIN ---------- */
.login{min-height:82vh;display:grid;place-items:center;padding-block:3rem;background:
  radial-gradient(760px 420px at 50% 10%,rgba(109,40,217,.24),transparent 62%),
  radial-gradient(620px 380px at 50% 95%,rgba(0,229,255,.10),transparent 65%),var(--bg)}
.login .box{width:min(420px,92vw);text-align:center}
.login form{margin-block-start:1.6rem;display:grid;gap:1rem;text-align:start}
.login .links{margin-block-start:1.3rem;display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);gap:1rem}
.login .links a:hover{color:#fff}
.note{margin-block-start:1.4rem;font-size:.74rem;color:var(--muted);line-height:1.55}

/* ---------- APP (portal / admin) ---------- */
.app{min-height:100vh;background:var(--bg)}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.4rem;background:rgba(8,13,18,.92);border-block-end:1px solid var(--line);backdrop-filter:blur(12px)}
.topbar .brand .wordmark{font-size:1.18rem}
.topbar .ctx{font-size:.78rem;color:var(--muted);padding-inline-start:1rem;border-inline-start:1px solid var(--line)}
.topbar .right{margin-inline-start:auto;display:flex;align-items:center;gap:.9rem}
.bell{position:relative;display:inline-flex;color:#CBD5E1}
.bell .dot{position:absolute;inset-block-start:-6px;inset-inline-end:-8px;min-width:17px;height:17px;border-radius:999px;
  background:var(--crit);color:#fff;font-size:.62rem;font-weight:700;display:grid;place-items:center;padding-inline:4px}
.avatar{display:flex;align-items:center;gap:.6rem;font-size:.8rem}
.avatar .circle{height:30px;width:30px;border-radius:999px;background-image:var(--grad);display:grid;place-items:center;
  font-size:.72rem;font-weight:700;color:#fff}
.shell{display:grid;gap:0}
.side{border-inline-end:1px solid var(--line);background:#0A0F15;padding:1.2rem 1rem}
.side .grp{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:.4rem .6rem .5rem}
.side a{display:flex;align-items:center;gap:.65rem;border-radius:10px;padding:.55rem .6rem;font-size:.85rem;color:#C6CFDC}
.side a:hover{background:rgba(148,163,180,.08);color:#fff}
.side a.on{background:linear-gradient(100deg,rgba(168,85,217,.22),rgba(0,229,255,.12));color:#fff;font-weight:600}
.side a .d{height:6px;width:6px;border-radius:999px;background:var(--muted)}
.side a.on .d{background-image:var(--grad-simple)}
.content{padding:1.6rem 1.4rem 3rem;min-width:0}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.page-head h2{font-size:1.4rem}
.page-head p{font-size:.85rem;color:var(--muted);margin-block-start:.3rem}
.block{margin-block-start:1.8rem}
.block > h3{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-block-end:.85rem}

.hero-kpi{display:grid;gap:1.2rem}
.progress-card{display:grid;gap:1rem}
.progress-card .pct{font-family:var(--display);font-size:3rem;font-weight:700;line-height:1}
.timeline{display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding-block:1rem;border-block-end:1px solid var(--line)}
.step:last-child{border-block-end:0}
.step .num{width:2.3rem;height:2.3rem;border-radius:10px;display:grid;place-items:center;font-family:var(--display);
  font-size:.82rem;font-weight:700;border:1px solid var(--line);color:var(--muted)}
.step.done .num{background:rgba(0,200,150,.14);border-color:rgba(0,200,150,.4);color:var(--ok)}
.step.now .num{background-image:var(--grad);border-color:transparent;color:#fff}
.step h4{font-size:.9rem}
.step .meta{margin-block-start:.3rem;display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.74rem;color:var(--muted)}
.step .desc{margin-block-start:.45rem;font-size:.82rem;color:#A9B3C5}

.gantt{display:grid;gap:.55rem}
.gantt .row{display:grid;grid-template-columns:minmax(9rem,1fr) 3fr;gap:.9rem;align-items:center;font-size:.8rem}
.gantt .track{position:relative;height:16px;border-radius:6px;background:rgba(148,163,180,.1);overflow:hidden}
.gantt .seg{position:absolute;inset-block:0;border-radius:6px;background-image:var(--grad-simple);opacity:.9}
.gantt .seg.idle{background:rgba(148,163,180,.28)}
.gantt .seg.ok{background:linear-gradient(100deg,#00C896,#00E5FF)}
.months{display:grid;grid-template-columns:minmax(9rem,1fr) 3fr;gap:.9rem;font-size:.66rem;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;margin-block-end:.3rem}
.months .m{display:flex;justify-content:space-between}

.notif{display:grid;gap:.7rem}
.notif .item{display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:start;border:1px solid var(--line);
  border-radius:12px;padding:.85rem 1rem;background:var(--card);font-size:.85rem}
.notif .item.unread{border-color:rgba(0,229,255,.35);background:linear-gradient(100deg,rgba(0,229,255,.07),transparent)}
.notif .dot{margin-block-start:.45rem;height:8px;width:8px;border-radius:999px;background:rgba(148,163,180,.4)}
.notif .item.unread .dot{background-image:var(--grad-simple)}
.notif time{font-size:.72rem;color:var(--muted);white-space:nowrap}

.docs{display:grid;gap:.7rem}
.doc{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;border:1px solid var(--line);
  border-radius:12px;padding:.8rem 1rem;background:var(--card)}
.doc .ic{color:var(--ciano)}
.doc .nm{font-size:.87rem}
.doc .mt{font-size:.72rem;color:var(--muted)}

.matrix td:first-child{font-weight:600}
.yes{color:var(--ok);font-weight:700}
.no{color:var(--crit);font-weight:700}
.part{color:var(--warn);font-weight:700}

.flow{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.8rem}
.flow .n{border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;background:var(--card)}
.flow .ar{color:var(--muted)}

.tenant{display:grid;gap:1rem}
.tenant .col{border:1px solid var(--line);border-radius:var(--r);padding:1rem;background:var(--card)}
.tenant .col h4{font-size:.85rem}
.tenant .col ul{margin:.7rem 0 0;padding-inline-start:1.1rem;font-size:.8rem;color:var(--muted)}
.barrier{display:grid;place-items:center;font-size:.72rem;color:var(--crit);letter-spacing:.12em;text-transform:uppercase}

.ent{display:flex;flex-wrap:wrap;gap:.45rem}
.ent code{border:1px solid var(--line);border-radius:8px;padding:.22rem .6rem;font-size:.75rem;color:#C4A5FF;background:rgba(168,85,247,.08)}

/* ---------- responsivo ---------- */
@media (min-width:700px){
  .cards-3{grid-template-columns:repeat(2,1fr)}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .diffs{grid-template-columns:repeat(2,1fr)}
  .diff:nth-child(3){padding-inline-start:0;border-inline-start:0}
  .form-2{grid-template-columns:repeat(2,1fr)}
  .tenant{grid-template-columns:1fr auto 1fr}
  .barrier{writing-mode:vertical-rl}
}
@media (min-width:1000px){
  .hero .wrap{grid-template-columns:1.05fr 1fr;padding-block:5rem 5.5rem}
  /* a arte sangra até a borda direita da tela e se dissolve no fundo à esquerda */
  .hero-art{align-self:stretch;min-height:26rem;margin-inline-end:calc(50% - 50vw);margin-block:-2rem}
  .hero-art .art-bg{
    -webkit-mask-image:
      linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 12%,#000 32%),
      linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 12%,#000 32%),
      linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
    mask-composite:intersect}
  /* o conjunto símbolo + assinatura encosta no início da coluna, e não no centro da área sangrada */
  .hero-art{justify-items:start}
  .art-lockup{gap:2.2rem;justify-content:flex-start;padding-inline:0;
    margin-inline-start:clamp(-5rem,-5vw,-2rem)}
  .mark.art{width:118px;height:147px}
  .sec-head{grid-template-columns:1.15fr .85fr}
  .cards-3{grid-template-columns:repeat(3,1fr)}
  .cards-4{grid-template-columns:repeat(4,1fr)}
  .diffs{grid-template-columns:repeat(4,1fr)}
  .diff:nth-child(3){padding-inline-start:1.3rem;border-inline-start:1px solid var(--line)}
  .why .wrap{grid-template-columns:.9fr 1.6fr;gap:3.4rem;padding-block:4rem}
  .shell{grid-template-columns:248px 1fr}
  .content{padding:2rem 2.2rem 4rem}
  .hero-kpi{grid-template-columns:1.15fr 2fr}
  .split{grid-template-columns:1fr 1fr}
  footer.site .wrap{grid-template-columns:auto 1fr auto;align-items:center}
}
@media (max-width:999px){ nav.main{display:none} .side{border-inline-end:0;border-block-end:1px solid var(--line)} }

@media print{
  body{background:#fff;color:#111}
  .proto,.beams,.why .curves,.side{display:none}
  .view{display:block !important}
  header.site,.topbar{position:static;background:#fff}
  .card,.kpi,.doc,.notif .item{background:#fff;border-color:#ddd}
  .muted,.step .desc,.svc .desc,.hero .lead{color:#444}
  .grad-text{color:#6D28D9;background:none;-webkit-text-fill-color:currentColor}
  .wordmark,.wordmark-desc{text-indent:0;background:none;width:auto;height:auto;color:#111;
    font-family:var(--display);font-weight:500;letter-spacing:.28em;text-transform:uppercase}
}

/* conjunto da marca na página de acesso — mesmo lockup da página inicial */
.acesso-lockup{display:flex;align-items:center;justify-content:center;gap:1.2rem;text-align:start}
.acesso-mark{display:block;width:auto;height:104px;filter:drop-shadow(0 0 30px rgba(109,40,217,.45))}
.acesso-sub{margin-block-start:.75rem;font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.26em;text-transform:uppercase;color:#C3CBDD}

/* ---------- Dashboard do cliente ---------- */
.eyebrow{font-family:var(--display);font-size:.64rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.dash-hero{display:grid;gap:1.6rem;align-items:center;
  background:radial-gradient(520px 220px at 0% 0%,rgba(109,40,217,.20),transparent 70%),
    linear-gradient(160deg,rgba(13,20,28,.96),rgba(8,13,18,.96))}
.dash-title{margin-block-start:.5rem;font-size:1.12rem}
.dash-ring{position:relative;display:grid;place-items:center;width:190px;height:190px;justify-self:center}
.dash-ring svg{width:100%;height:100%}
.dash-ring-txt{position:absolute;text-align:center;line-height:1}
.dash-ring-txt .pct{font-family:var(--display);font-size:2.6rem;font-weight:700;line-height:1;
  letter-spacing:.01em;display:block}
/* o símbolo de porcentagem sai do recorte do gradiente (que o deixava irregular)
   e recebe cor sólida, tamanho menor e respiro em relação ao número */
.pct-s{font-size:.62em;font-weight:500;margin-inline-start:.30em;vertical-align:.30em;letter-spacing:0;
  -webkit-background-clip:border-box;background-clip:border-box;background-image:none;
  color:#9F7BEA;-webkit-text-fill-color:#9F7BEA}
.dash-ring-txt .eyebrow{display:block;margin-block-start:.55rem;font-size:.6rem;letter-spacing:.22em}
.dash-meta{display:grid;gap:1.1rem}
.dash-strong{margin-block-start:.35rem;font-size:.9rem;font-weight:600;color:var(--off-white)}

.kpis .kpi{display:block}
.kpi-link{transition:border-color .2s,transform .2s}
.kpi-link:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.kpi-ic{display:inline-flex;height:2rem;width:2rem;align-items:center;justify-content:center;
  border-radius:.6rem;border:1px solid var(--line);margin-block-end:.7rem}
.ic-crit{color:var(--crit);background:rgba(255,93,115,.10)}
.ic-warn{color:var(--warn);background:rgba(242,184,75,.10)}
.ic-ok{color:var(--ok);background:rgba(0,200,150,.10)}

.card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card-head h4{font-size:.95rem}
.mini-link{font-size:.76rem;color:#C4A5FF;white-space:nowrap}
.mini-link:hover{color:#fff}

.lista,.passos{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.85rem}
/* coluna fixa para a etiqueta, para que os títulos comecem sempre na mesma posição */
.lista li{display:grid;grid-template-columns:5.6rem 1fr;gap:.85rem;align-items:start}
.lista li > .tag{justify-content:center;width:100%;padding-inline:.4rem;margin-block-start:.12rem}
.li-t{font-size:.86rem;line-height:1.45}
.li-s{margin-block-start:.2rem;font-size:.76rem;color:var(--muted)}
.passos li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  padding-block-end:.85rem}
.passos li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:5px;top:1.1rem;bottom:0;
  width:1px;background:var(--line)}
.passos .p-d{margin-block-start:.35rem;height:11px;width:11px;border-radius:999px;
  border:2px solid rgba(148,163,180,.45);background:var(--card);z-index:1}
.passos .done .p-d{border-color:var(--ok);background:var(--ok)}
.passos .now .p-d{border-color:transparent;background-image:var(--grad-simple);
  box-shadow:0 0 0 4px rgba(109,40,217,.22)}

@media (min-width:760px){
  .dash-hero{grid-template-columns:1.3fr auto}
  .dash-meta{grid-column:1 / -1;grid-template-columns:repeat(3,1fr);
    padding-block-start:1.3rem;border-block-start:1px solid var(--line)}
}
@media (min-width:1100px){
  .dash-hero{grid-template-columns:1.15fr auto 1.25fr;gap:2.2rem}
  .dash-meta{grid-column:auto;grid-template-columns:1fr;padding-block-start:0;border-block-start:0;
    padding-inline-start:2rem;border-inline-start:1px solid var(--line)}
}

/* sino e identificação do usuário como atalhos clicáveis */
a.bell,a.avatar{transition:color .2s,opacity .2s}
a.bell:hover{color:#fff}
a.avatar:hover{opacity:.85}

/* lista de próximos passos com rolagem própria */
.passos-rol{max-height:15rem;overflow-y:auto;margin-block-start:1rem;padding-inline-end:.55rem;
  scrollbar-width:thin;scrollbar-color:rgba(168,85,247,.55) transparent}
.passos-rol .passos{margin-block-start:0}
.passos-rol::-webkit-scrollbar{width:7px}
.passos-rol::-webkit-scrollbar-track{background:rgba(148,163,180,.10);border-radius:999px}
.passos-rol::-webkit-scrollbar-thumb{background-image:var(--grad-simple);border-radius:999px}

/* lista do escopo do projeto */
.escopo{margin:.65rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem;
  font-size:.84rem;color:#A9B3C5}
.escopo li{position:relative;padding-inline-start:1.3rem;line-height:1.55}
.escopo li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;
  height:6px;width:6px;border-radius:999px;background-image:var(--grad-simple)}
.escopo.fora li::before{background:none;border:1px solid rgba(148,163,180,.5)}

/* ---------- gráfico de evolução (SVG, interativo por hover/foco) ---------- */
.chart-wrap{margin-block-start:1.1rem;overflow-x:auto}
.chart{display:block;width:100%;min-width:520px;height:auto;margin-inline:auto}
.chart .grid line{stroke:rgba(148,163,180,.14);stroke-width:1}
.chart .ax{fill:var(--muted);font-family:var(--body);font-size:11px}
.chart .l-real{fill:none;stroke:url(#ln);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart .a-real{fill:url(#ar)}
.chart .dot{fill:#0B121A;stroke:url(#ln);stroke-width:3;transition:r .15s}
.chart .hit{fill:transparent;cursor:pointer}
.chart .gd{stroke:rgba(168,85,247,.45);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .15s}
.chart .tip{opacity:0;pointer-events:none;transition:opacity .15s}
.chart .tip rect{fill:#0F1620;stroke:rgba(168,85,247,.5)}
.chart .tip text{fill:var(--off-white);font-family:var(--body);font-size:11.5px}
.chart .tip text.v{fill:var(--muted);font-size:11px}
.chart .pt:hover .tip,.chart .pt:focus .tip,.chart .pt:focus-within .tip{opacity:1}
.chart .pt:hover .gd,.chart .pt:focus .gd{opacity:1}
.chart .pt:hover .dot{r:7}
.chart .pt{outline:none}

.lg{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.lg::before{content:"";height:3px;width:18px;border-radius:2px}
.lg-real::before{background-image:var(--grad-simple)}

.chart-foot{display:grid;gap:1rem;margin-block-start:1.2rem;padding-block-start:1.1rem;
  border-block-start:1px solid var(--line)}
@media (min-width:600px){ .chart-foot{grid-template-columns:repeat(3,1fr)} }

/* ---------- envio de evidências pelo cliente ---------- */
.col-env{white-space:nowrap}
.up{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  border:1px dashed rgba(168,85,247,.55);border-radius:999px;padding:.42rem .9rem;
  font-size:.76rem;font-weight:600;color:#C4A5FF;background:rgba(168,85,247,.07);
  transition:background-color .2s,border-color .2s,color .2s}
.up:hover{background:rgba(168,85,247,.16);border-color:rgba(168,85,247,.9);color:#fff}
.up-in{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.up-in:focus + .up-hint,.up-in:focus-visible + .up-hint{color:#C4A5FF}
.up-in:focus ~ .up,.up-in:focus-visible ~ .up{outline:2px solid rgba(0,229,255,.5);outline-offset:2px}
.up-hint{display:block;margin-block-start:.4rem;font-size:.68rem;color:var(--muted)}

/* ---------- barra de contexto do administrador (cliente/projeto) ---------- */
.tenant-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-block-end:1.6rem;
  border:1px solid rgba(168,85,247,.28);border-radius:12px;padding:.8rem 1rem;
  background:linear-gradient(100deg,rgba(109,40,217,.16),rgba(0,229,255,.05))}
.tenant-bar .tb-l{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.tenant-bar .tb-r{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-inline-start:auto}
.tb-sel select{background:#070C12;border:1px solid var(--line);border-radius:9px;
  padding:.42rem .7rem;font-size:.82rem;max-width:16rem}
.tb-sel select:focus{outline:2px solid rgba(0,229,255,.45);outline-offset:1px}
.pill.sm{padding:.42rem .9rem;font-size:.78rem;gap:.45rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* formulários de edição do painel */
.check{display:flex;align-items:center;gap:.55rem;margin-block-start:.85rem;font-size:.83rem;color:#C3CCDA}
.check input{accent-color:#A855F7;width:15px;height:15px}
.acoes{display:flex;flex-wrap:wrap;gap:.7rem;margin-block-start:1.3rem}
.up-box{margin-block-start:1.1rem;border:1px dashed rgba(168,85,247,.4);border-radius:12px;
  padding:1rem;text-align:center;background:rgba(168,85,247,.05)}
.up-box .up-hint{margin-block-start:.55rem}

/* páginas independentes: não há mais alternância de telas por CSS */
.view{display:block}
.proto{display:none}
.logout{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);
  border-radius:999px;padding:.4rem 1rem;font-size:.78rem;color:#C7D0DE;transition:border-color .2s,color .2s}
.logout:hover{border-color:var(--line-strong);color:#fff}
.demo-hint{margin-block-start:1.2rem;border:1px dashed rgba(242,184,75,.45);border-radius:12px;
  padding:.85rem 1rem;font-size:.76rem;color:#C9D2E4;text-align:start;line-height:1.6}
.demo-hint strong{color:var(--warn)}
.demo-hint code{color:#C4A5FF}
.erro{display:none;margin-block-start:.2rem;font-size:.78rem;color:var(--crit)}
.erro.on{display:block}

/* =====================================================================
   RESPONSIVIDADE EM SMARTPHONE E TABLET — fase 1
   Larguras de referência: 360, 390, 414 (celular), 768 (tablet), 1024+.
   ===================================================================== */

/* rede de segurança: nenhum elemento decorativo cria rolagem lateral.
   Aplicado no body, o overflow passa para a janela e não quebra o sticky. */
body{overflow-x:hidden}
img,svg{max-width:100%}

/* ---------- botão de menu (site e área logada) ---------- */
.menu-btn{display:none;flex:none;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:12px;background:transparent;color:#DCE3EE;cursor:pointer;
  transition:border-color .2s,background-color .2s}
.menu-btn:hover{border-color:var(--line-strong)}
.menu-btn:focus-visible{outline:2px solid rgba(0,229,255,.55);outline-offset:2px}
.menu-ic,.menu-ic::before,.menu-ic::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
.menu-ic{position:relative;transition:background-color .2s}
.menu-ic::before,.menu-ic::after{content:"";position:absolute;left:0;transition:transform .2s}
.menu-ic::before{top:-6px}
.menu-ic::after{top:6px}
/* vira um "x" quando o menu está aberto */
[aria-expanded="true"] .menu-ic{background:transparent}
[aria-expanded="true"] .menu-ic::before{transform:translateY(6px) rotate(45deg)}
[aria-expanded="true"] .menu-ic::after{transform:translateY(-6px) rotate(-45deg)}

.so-movel,nav.main a.so-movel{display:none}   /* só aparece dentro do menu do celular */
.menu-fundo{display:none}

/* ---------- até 999px: tablet e celular ---------- */
@media (max-width:999px){
  .menu-btn{display:inline-flex}

  /* site: o menu principal vira um painel abaixo do cabeçalho */
  header.site .wrap{gap:.9rem}
  header.site nav.main{display:none;position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;padding:.4rem 1.1rem 1rem;
    background:rgba(8,13,18,.98);border-block-end:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,0,0,.45)}
  header.site.aberto nav.main{display:flex}
  header.site nav.main a{padding:.9rem .2rem;font-size:1rem;border-block-end:1px solid var(--line)}
  header.site nav.main a:last-child{border-block-end:0}
  header.site nav.main .so-movel{display:flex;color:#C4A5FF}

  /* área logada: o menu lateral vira gaveta que desliza da esquerda */
  .side{position:fixed;top:0;bottom:0;left:0;z-index:70;width:min(84vw,300px);
    overflow-y:auto;overscroll-behavior:contain;padding:1.2rem 1rem 2rem;
    border-inline-end:1px solid var(--line);border-block-end:0;
    transform:translateX(-102%);visibility:hidden;
    transition:transform .25s ease,visibility 0s linear .25s}
  body.menu-aberto .side{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  .side a{padding:.8rem .7rem;font-size:.95rem}
  .menu-fundo{display:block;position:fixed;inset:0;z-index:65;background:rgba(3,6,10,.62);
    opacity:0;pointer-events:none;transition:opacity .25s}
  body.menu-aberto .menu-fundo{opacity:1;pointer-events:auto}
  body.menu-aberto{overflow:hidden}

  .topbar{padding:.6rem 1rem;gap:.7rem}

  /* campos com 16px: abaixo disso o iPhone aproxima a tela ao tocar no campo */
  .field input,.field textarea,.field select,.tb-sel select{font-size:16px}
  .check{min-height:44px;margin-block-start:.4rem}
  .check input{width:20px;height:20px;flex:none}
  .btn,.pill{min-height:44px}
  .pill.sm,.logout{min-height:38px}
}

/* ---------- até 700px: celular ---------- */
@media (max-width:700px){
  /* barra superior: o contexto (empresa) desce para uma segunda linha
     e o nome do usuário dá lugar só às iniciais */
  .topbar .ctx{order:10;flex-basis:100%;padding-inline-start:0;border-inline-start:0;
    font-size:.74rem;line-height:1.4}
  .topbar .right{gap:.6rem}
  .avatar{font-size:0;gap:0}
  .avatar .circle{font-size:.72rem;height:34px;width:34px}
  .logout{padding:.35rem .8rem}

  .content{padding:1.2rem 1rem 2.5rem}
  .page-head h2{font-size:1.25rem}
  .page-head .btn{width:100%;justify-content:center}
  .block{margin-block-start:1.4rem}
  .card{padding:1.1rem}
  .kpi{padding:.95rem 1rem}
  .kpi .n{font-size:1.5rem}
  .kpi .k{font-size:.68rem;letter-spacing:.06em;line-height:1.35}

  /* barra "Trabalhando em": seletores ocupam a largura toda */
  .tenant-bar{padding:.75rem;gap:.7rem}
  .tenant-bar .tb-l,.tenant-bar .tb-r{width:100%;margin-inline-start:0}
  .tb-sel{flex:1 1 100%}
  .tb-sel select{width:100%;max-width:none;padding:.6rem .7rem}

  /* tabelas: rolam na horizontal dentro do cartão, sem quebrar a página */
  .scroll-x{-webkit-overflow-scrolling:touch}
  .scroll-x table{min-width:640px}
  th,td{padding:.65rem .7rem}

  .gantt .row,.months{grid-template-columns:minmax(6.5rem,1fr) 2fr;gap:.6rem}
  .lista li{grid-template-columns:5rem 1fr;gap:.7rem}
  .notif .item{grid-template-columns:auto 1fr}
  .notif .item > :last-child{grid-column:2}
  .doc{grid-template-columns:auto 1fr}
  .doc > :last-child{grid-column:1 / -1;justify-self:start}
  .dash-ring{width:160px;height:160px}
  .dash-ring-txt .pct{font-size:2.2rem}
  .acoes .btn,.acoes .pill{flex:1 1 auto;justify-content:center}
}

/* indicadores em duas colunas no celular (uma coluna só abaixo de 380px) */
@media (min-width:380px) and (max-width:699px){
  .cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- até 560px: site institucional e tela de acesso ---------- */
@media (max-width:560px){
  .wrap{padding-inline:1.1rem}
  header.site .wrap{padding-block:.75rem}
  header.site .pill{display:none}          /* "Área do Cliente" vai para dentro do menu */
  header.site .brand .wordmark{font-size:1.2rem}
  .mark.hd{width:32px;height:32px}

  section.pad{padding-block:3rem}
  .hero .wrap{padding-block:2.6rem 3rem;gap:2rem}
  .hero h1{font-size:clamp(1.85rem,8.4vw,2.2rem);margin-block-start:1.2rem}
  .hero .actions .btn,.hero .actions .pill{width:100%;justify-content:center}
  .hero-art{min-height:13rem}
  .art-lockup{flex-direction:column;gap:1rem;text-align:center;padding:.5rem}
  .mark.art{width:78px;height:98px}
  .art-name{font-size:clamp(1.6rem,8vw,2rem)}
  .art-tag{font-size:.6rem;margin-block-start:.8rem}
  .sec-head h2{font-size:clamp(1.5rem,7vw,1.75rem)}
  .why .wrap{padding-block:2.6rem}
  .diff{padding-inline-start:0;border-inline-start:0}
  #contato form .btn{width:100%;justify-content:center}

  .login{padding-block:2rem;min-height:100vh;min-height:100dvh}
  .acesso-lockup{gap:.9rem}
  .acesso-mark{height:80px}
  .login .links{flex-direction:column;align-items:center;gap:.7rem}
}

/* ---------- até 480px: celulares estreitos ---------- */
@media (max-width:480px){
  .topbar .brand .wordmark{display:none}   /* fica só o símbolo */
}

/* tela de acesso: tamanho do nome no computador (antes estava fixo no HTML) */
.acesso-nome{font-size:1.6rem}
@media (max-width:560px){ .acesso-nome{font-size:1.35rem} }

/* menos movimento para quem pediu isso ao sistema operacional */
@media (prefers-reduced-motion:reduce){
  .side,.menu-fundo,.menu-ic,.menu-ic::before,.menu-ic::after{transition:none}
  html{scroll-behavior:auto}
}

/* impressão: o botão de menu e a gaveta não aparecem */
@media print{
  .menu-btn,.menu-fundo{display:none !important}
}

/* =====================================================================
   Fase 2 — tela de Configurações
   ===================================================================== */
.cfg-topo{display:grid;gap:.8rem;margin-block-end:1.1rem}
.cfg-topo .tag{justify-self:start}
.cfg-nota{font-size:.8rem;line-height:1.6}
.cfg-nota code,.cfg-lista code{border:1px solid var(--line);border-radius:6px;padding:.05rem .4rem;
  font-size:.76rem;color:#C4A5FF;background:rgba(168,85,247,.08)}
.cfg-lista{display:grid;grid-template-columns:minmax(8.5rem,auto) 1fr;gap:.6rem 1.4rem;margin:0;font-size:.86rem}
.cfg-lista dt{color:var(--muted);font-size:.78rem;letter-spacing:.04em}
.cfg-lista dd{margin:0;overflow-wrap:anywhere}
.card > .cfg-nota{margin-block-start:1rem}
.cfg-teste{display:grid;gap:.8rem;margin-block-start:1.4rem;padding-block-start:1.2rem;border-block-start:1px solid var(--line)}
.cfg-teste .btn{justify-self:start}
.cfg-msg{margin-block-start:.9rem;font-size:.84rem;border-radius:10px;padding:.7rem .9rem;overflow-wrap:anywhere}
.cfg-msg.ok{color:var(--ok);background:rgba(0,200,150,.08);border:1px solid rgba(0,200,150,.35)}
.cfg-msg.falha{color:var(--crit);background:rgba(255,93,115,.08);border:1px solid rgba(255,93,115,.35)}
.btn:disabled,.pill:disabled{opacity:.55;cursor:not-allowed}
@media (min-width:700px){ .cfg-teste{grid-template-columns:1fr auto;align-items:end} }
@media (max-width:560px){
  .cfg-lista{grid-template-columns:1fr;gap:.15rem}
  .cfg-lista dd{margin-block-end:.55rem}
  .cfg-teste .btn{width:100%;justify-content:center}
}

/* =====================================================================
   Correções da fase 2
   ===================================================================== */
/* o atributo hidden precisa vencer classes que definem display (ex.: .tag) */
[hidden]{display:none !important}
/* botões com aparência de pílula não herdam o fundo cinza do navegador */
button.pill{background:transparent;cursor:pointer}
button.pill:hover{background:rgba(168,85,247,.12)}

/* =====================================================================
   Fase 3 — cadastros do painel
   ===================================================================== */
button.mini-link{background:none;border:0;padding:0;font:inherit;font-size:.76rem;cursor:pointer}
button.mini-link:disabled{opacity:.55;cursor:wait}
.acoes-linha{white-space:nowrap;color:var(--muted)}
.campo-info{font-size:.84rem;color:#C3CCDA;padding-block:.7rem}
form.card .cfg-msg{margin-block-start:1rem}
#bloco-form{scroll-margin-top:6rem}
#bloco-acessos{scroll-margin-top:6rem}

/* página de convite */
.convite-card{display:grid;gap:1rem;text-align:start;margin-block-start:1.6rem}
.convite-titulo{font-size:1.15rem;line-height:1.35}
.convite-sub{margin-block-start:-.4rem;font-size:.86rem}
.convite-btn{justify-content:center;padding-inline:1.5rem;margin-block-start:.3rem}
.field input[readonly]{opacity:.7}
.regras-senha{margin:0;padding:0;list-style:none;display:grid;gap:.3rem;font-size:.78rem;color:var(--muted)}
.regras-senha li{position:relative;padding-inline-start:1.3rem}
.regras-senha li::before{content:"";position:absolute;inset-inline-start:0;top:.42em;width:9px;height:9px;
  border-radius:999px;border:1.5px solid rgba(148,163,180,.55)}
.regras-senha li.ok{color:var(--ok)}
.regras-senha li.ok::before{border-color:var(--ok);background:var(--ok)}

/* =====================================================================
   Fase 4 — portal do cliente e Meu Perfil
   ===================================================================== */
.cab-direita{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;justify-content:flex-end}
.portal-vazio{margin-block-start:1.6rem;text-align:center;padding:2.2rem 1.4rem}
.anel{position:absolute;inset:0}
.anel svg{width:100%;height:100%;display:block}
.dash-ring{position:relative}
.portal-texto{margin-block-start:.7rem;font-size:.88rem;color:#B4BECE;line-height:1.65;white-space:pre-line}
.portal-bloco .muted{margin-block-start:.6rem;font-size:.84rem}
.pf-pilha{display:grid;gap:.9rem;margin-block-start:1rem}
.notif .item-botao{width:100%;text-align:start;font:inherit;color:inherit;cursor:pointer}
.notif .item-botao:hover{border-color:var(--line-strong)}
.notif .item-botao:focus-visible{outline:2px solid rgba(0,229,255,.5);outline-offset:2px}
@media (max-width:700px){
  .cab-direita{width:100%;justify-content:flex-start}
  .cab-direita .tb-sel{flex:1 1 100%}
}

/* ===== Fase 5: documentos, evidências e troca de e-mail ===== */
.envio-progresso{margin-block-start:.7rem;max-width:320px}
.envio-progresso > span{transition:width .2s ease}
.troca-pendente{display:block;margin-block-start:.25rem;font-size:.72rem;color:#FBBF24}
tr.linha-destaque > td{background:rgba(168,85,247,.12)}
.doc a.tag{text-decoration:none;cursor:pointer}
.doc a.tag:hover{filter:brightness(1.15)}
.doc .mini-link{white-space:nowrap}
.up-box .up-in + .up{margin-inline-end:.6rem}
.convite-destaque{font-weight:700;font-size:1.05rem;word-break:break-all;margin:.4rem 0 1rem;color:#fff}