/* ===========================================================
   dpo.eti.br
   Projeto 77 · site LGPD especialista
   Tema escuro único, deliberado.
   =========================================================== */

:root{
  --ink:#05090B;
  --ground:#080F13;
  --surface:#0E1B20;
  --surface-2:#13252B;
  --line:#1C333A;
  --line-soft:#13272D;

  --text:#E4EFEF;
  --text-dim:#94ABAE;
  --text-faint:#63797D;

  --teal:#2FD3BE;
  --teal-soft:#7FE8DA;
  --teal-deep:#0F8E82;

  --amber:#F2A03D;
  --amber-deep:#B9670F;

  --red:#FF4A3D;
  --red-soft:#FF8C80;
  --red-deep:#A81B10;

  --f-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Cascadia Mono","Cascadia Code",Consolas,ui-monospace,"SF Mono",Menlo,monospace;

  --wrap:1220px;
  --trilho:148px;
  --topo:35px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;font-weight:640;}
h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:.99;letter-spacing:-.036em;max-width:15ch;}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.026em;}
h3{font-size:1.18rem;line-height:1.28;letter-spacing:-.012em;}
p{margin:0 0 1.1em;max-width:66ch;}
em{font-style:normal;color:var(--teal);}
strong{color:#F4FCFB;font-weight:640;}
a{color:var(--teal);}
i[lang]{font-style:italic;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}

.olho{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--teal);margin:0 0 20px;
}
.lede{
  font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.55;
  color:var(--text-dim);max-width:58ch;
}

.pular-para-conteudo{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--teal);color:#04100E;padding:12px 20px;
  font-family:var(--f-mono);font-size:13px;text-decoration:none;
}
.pular-para-conteudo:focus{left:0;}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* ---------------- barra de plantão ---------------- */
.alertbar{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:linear-gradient(90deg,#150E04 0%,#241708 45%,#150E04 100%);
  border-bottom:1px solid #462C0B;
  font-family:var(--f-mono);font-size:12.5px;
  transition:background .8s ease,border-color .8s ease;
}
body.alarme .alertbar{
  background:linear-gradient(90deg,#1A0604 0%,#340C06 45%,#1A0604 100%);
  border-bottom-color:#6E1810;
}
.alertbar__in{
  max-width:var(--wrap);margin:0 auto;padding:9px 28px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none;
  animation:pulsa 2.6s ease-out infinite;transition:background .8s ease;
}
body.alarme .pulse{background:var(--red);animation-duration:1.1s;}
@keyframes pulsa{
  0%{box-shadow:0 0 0 0 rgba(242,160,61,.55);}
  70%{box-shadow:0 0 0 9px rgba(242,160,61,0);}
  100%{box-shadow:0 0 0 0 rgba(242,160,61,0);}
}
.alertbar__label{color:var(--amber);text-transform:uppercase;letter-spacing:.11em;font-weight:600;}
body.alarme .alertbar__label{color:var(--red);}
.alertbar__text{color:#C4AA86;}
.alertbar__cta{
  margin-left:auto;color:#F8DDB4;text-decoration:none;
  border:1px solid #5C3B12;padding:3px 11px;border-radius:2px;
  transition:background .18s ease;
}
.alertbar__cta::after{content:" \2192";}
.alertbar__cta:hover{background:#3A2409;}

/* ---------------- navegação ---------------- */
.nav{
  position:fixed;top:var(--topo);left:0;right:0;z-index:110;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.nav.fixa{background:rgba(8,15,19,.9);backdrop-filter:blur(16px);border-bottom-color:var(--line-soft);}
.nav__in{max-width:var(--wrap);margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:26px;}
/* assinatura tipografica: o nome e a marca */
.brand{display:block;text-decoration:none;line-height:1.1;}
.brand__nome{
  display:block;
  font-family:var(--f-display);
  font-size:16px;font-weight:640;
  letter-spacing:.055em;text-transform:uppercase;
  color:var(--text);
  padding-bottom:6px;
  border-bottom:2px solid var(--teal);
  width:max-content;
}
.brand__funcao{
  display:block;margin-top:7px;
  font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.1em;color:var(--text-faint);
}
.brand__funcao i{font-style:normal;color:var(--line);padding:0 2px;}
.brand:hover .brand__nome{color:var(--teal-soft);}
.nav__links{
  margin:0 0 0 auto;padding:0;list-style:none;
  display:flex;gap:6px;align-items:center;
}
.nav__links a{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--text-dim);text-decoration:none;
  padding:7px 13px;border:1px solid transparent;border-radius:2px;
  transition:color .18s ease,border-color .18s ease;
  display:inline-block;
}
.nav__links a:hover{color:var(--text);}
.nav__links .nav__cta{color:var(--teal);border-color:var(--teal-deep);}
.nav__links .nav__cta:hover{background:rgba(47,211,190,.12);}

/* ---------------- botões ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;
  padding:14px 26px;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid var(--teal-deep);color:var(--teal);background:rgba(8,15,19,.55);
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:rgba(47,211,190,.14);transform:translateY(-1px);}
.btn--cheio{background:var(--teal);color:#04100E;border-color:var(--teal);font-weight:600;}
.btn--cheio:hover{background:var(--teal-soft);}
.btn--vermelho{border-color:var(--amber-deep);color:var(--amber);}
.btn--vermelho:hover{background:rgba(242,160,61,.14);}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0 0;}

/* ---------------- abertura em vídeo ---------------- */
.voo{position:relative;height:1250vh;}
.voo__palco{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink);}
#scrub{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);}
.voo__scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(96deg, rgba(5,9,11,.94) 0%, rgba(5,9,11,.79) 38%, rgba(5,9,11,.26) 72%, rgba(5,9,11,.62) 100%),
    linear-gradient(to top, rgba(5,9,11,.86) 0%, rgba(5,9,11,0) 36%);
}
.voo__alarme{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 50% 50%, rgba(255,74,61,0) 42%, rgba(168,27,16,.5) 100%);
  transition:opacity .9s ease;
}
body.alarme .voo__alarme{opacity:1;animation:alarma 2.4s ease-in-out infinite;}
@keyframes alarma{0%,100%{opacity:.55;}50%{opacity:1;}}
#particulas{position:absolute;inset:0;z-index:3;width:100%;height:100%;opacity:.45;pointer-events:none;}
.voo__grao{
  position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);
}

.capitulos{position:absolute;inset:0;z-index:5;}
.cap{position:absolute;inset:0;display:flex;align-items:center;opacity:0;will-change:opacity,transform;}
.cap__in{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%;}
.cap__n{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);display:flex;align-items:center;gap:13px;margin-bottom:22px;
}
.cap__n::before{content:"";width:26px;height:1px;background:currentColor;}
.cap h2{font-size:clamp(2.2rem,5.6vw,4.5rem);line-height:.99;letter-spacing:-.036em;max-width:15ch;}
.cap p{margin-top:24px;max-width:47ch;font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.55;color:var(--text-dim);}
.cap__lei{
  font-family:var(--f-mono);font-size:12px;color:var(--teal-deep);
  border-left:2px solid var(--teal-deep);padding-left:14px;line-height:1.7;
}
.cap--alerta .cap__n,.cap--alerta h2 em{color:var(--red);}
.cap--alerta .cap__lei{color:var(--red-deep);border-left-color:var(--red-deep);}
.cap__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;}
.cap--alerta .btn--vermelho{border-color:var(--red-deep);color:var(--red-soft);background:rgba(168,27,16,.16);}

.hud{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;}
.hud__l{display:flex;align-items:center;gap:12px;height:52px;}
.hud__l span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-faint);transition:color .35s ease;white-space:nowrap;
}
.hud__l.ativa span{color:var(--teal);}
.hud__l.alerta.ativa span{color:var(--red);}
.hud__l i{width:1px;height:52px;background:var(--line);position:relative;display:block;}
.hud__l i::after{
  content:"";position:absolute;inset:0;background:var(--teal);
  transform:scaleY(0);transform-origin:top;transition:transform .3s linear;
}
.hud__l.passada i::after{transform:scaleY(1);}
.hud__l.alerta i::after{background:var(--red);}

.dica{
  position:absolute;left:28px;bottom:36px;z-index:6;margin:0;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);display:flex;align-items:center;gap:11px;transition:opacity .5s ease;
}
.dica span{display:block;width:34px;height:1px;background:var(--text-faint);
  animation:desliza 2.4s ease-in-out infinite;transform-origin:left;}
@keyframes desliza{0%,100%{transform:scaleX(.3);}50%{transform:scaleX(1);}}

/* progresso do download da abertura.
   Enquanto o Blob nao termina de baixar o scrub nao tem como responder,
   entao a dica de rolagem cede o lugar para a barra, para nao convidar a
   rolar num video que ainda nao anda. */
.carga{
  position:absolute;left:28px;bottom:36px;z-index:7;margin:0;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);display:flex;align-items:center;gap:10px;
  transition:opacity .55s ease;
}
.carga b{color:var(--teal);font-weight:600;font-variant-numeric:tabular-nums;min-width:2.4em;text-align:right;}
.carga i{font-style:normal;}
.carga__b{display:block;width:96px;height:1px;background:var(--line);overflow:hidden;}
.carga__b span{display:block;height:100%;width:0;background:var(--teal);transition:width .18s linear;}
.carga--fim{opacity:0;pointer-events:none;}

/* a dica so aparece quando o video ja esta posicionavel */
.dica{opacity:0;}
body.abertura-pronta .dica{opacity:1;}

.pular{
  position:absolute;right:28px;top:26px;z-index:7;cursor:pointer;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(8,15,19,.6);border:1px solid var(--line);color:var(--text-dim);
  padding:7px 14px;border-radius:2px;backdrop-filter:blur(8px);
  transition:color .2s ease,border-color .2s ease;
}
.pular:hover{color:var(--teal);border-color:var(--teal-deep);}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;}
.hero__fundo{
  position:absolute;inset:0;
  background:var(--ink) url("../img/hero.jpg") center/cover no-repeat;
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg, rgba(5,9,11,.96) 0%, rgba(5,9,11,.88) 34%, rgba(5,9,11,.42) 68%, rgba(5,9,11,.7) 100%),
    linear-gradient(to top, var(--ground) 0%, rgba(8,15,19,0) 34%);
}
.hero__in{position:relative;z-index:2;padding-top:150px;padding-bottom:90px;width:100%;}
.hero .lede{margin-top:28px;}

.numeros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:rgba(8,15,19,.66);backdrop-filter:blur(6px);margin:46px 0 0;
}
.numeros > div{padding:19px 24px;border-right:1px solid var(--line);}
.numeros > div:last-child{border-right:none;}
.numeros dt{font-family:var(--f-mono);font-size:1.5rem;color:var(--teal);font-variant-numeric:tabular-nums;line-height:1.1;}
.numeros dd{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);letter-spacing:.05em;margin:6px 0 0;line-height:1.45;}

/* ---------------- blocos ---------------- */
.bloco{
  display:grid;grid-template-columns:var(--trilho) 1fr;gap:38px;
  padding:112px 28px;position:relative;
}
/* Filho de grade nasce com min-width:auto e nao encolhe abaixo do proprio
   conteudo. Sem isto, a tabela de 560 px de largura minima estica a coluna
   inteira, a pagina fica mais larga que a tela do celular e o texto e
   cortado pelo overflow-x:hidden do corpo, sem sequer permitir rolagem.
   Com min-width:0 a coluna encolhe e quem rola e o invólucro da tabela,
   que ja tem overflow-x:auto. */
.bloco > *{min-width:0;}
.tabela{max-width:100%;}
.trilho{
  font-family:var(--f-mono);font-size:11.5px;line-height:1.75;
  color:var(--text-faint);letter-spacing:.03em;padding-top:8px;
}
.trilho b{display:block;color:var(--teal-deep);font-weight:600;letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px;}
.trilho p{margin:0 0 12px;}

/* definições */
.defs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:34px;
}
.defs article{background:var(--surface);padding:28px 26px;}
.defs h3{color:var(--teal);margin-bottom:12px;}
.defs p{font-size:15.5px;color:var(--text-dim);margin-bottom:.9em;}
.defs p:last-child{margin-bottom:0;}

/* citação normativa */
/* nome tecnico citado no meio do texto, como a chave do armazenamento local */
code{
  font-family:var(--f-mono);font-size:.9em;
  background:rgba(47,211,190,.09);border:1px solid var(--line);
  color:var(--teal);padding:1px 6px;border-radius:2px;
  word-break:break-all;
}

.lei{
  border-left:2px solid var(--teal-deep);
  background:linear-gradient(90deg,rgba(47,211,190,.06),transparent 70%);
  padding:17px 24px;margin:28px 0;
  font-family:var(--f-mono);font-size:13.5px;line-height:1.7;color:var(--text-dim);max-width:70ch;
}
.lei b{color:var(--teal);font-weight:600;display:block;margin-bottom:6px;}
.lei b + b{display:inline;margin:0;}

/* ---------------- faixas ---------------- */
.faixa{
  position:relative;min-height:74vh;display:flex;align-items:center;overflow:hidden;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.faixa__img{position:absolute;inset:-12% 0;background-size:cover;background-position:center;will-change:transform;}
.faixa__scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(5,9,11,.95) 0%, rgba(5,9,11,.8) 45%, rgba(5,9,11,.35) 100%);
}
.faixa__in{position:relative;z-index:2;padding-top:96px;padding-bottom:96px;width:100%;}
.citacao{
  font-family:var(--f-display);font-size:clamp(1.7rem,3.4vw,2.7rem);
  line-height:1.16;letter-spacing:-.025em;max-width:19ch;font-weight:640;margin:0;
}
.citacao__fonte{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--teal-deep);margin:26px 0 0;
}
.faixa__nota{margin:22px 0 0;max-width:46ch;color:var(--text-dim);font-size:15.5px;}

/* ---------------- setores ---------------- */
.setores{margin-top:36px;}
.setores__abas{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px;}
.aba{
  font-family:var(--f-mono);font-size:12.5px;
  background:var(--surface);border:1px solid var(--line);color:var(--text-dim);
  padding:9px 15px;border-radius:2px;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.aba:hover{color:var(--text);border-color:var(--teal-deep);}
.aba[aria-selected="true"]{background:rgba(47,211,190,.13);border-color:var(--teal);color:var(--teal);}

.painel{
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:rgba(14,27,32,.82);
  animation:entra .45s cubic-bezier(.2,.7,.3,1);
}
@keyframes entra{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.painel__topo{padding:24px 28px;border-bottom:1px solid var(--line);background:rgba(19,37,43,.7);}
.painel__topo h3{margin:0;}
.painel__risco{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  display:inline-block;margin-top:11px;padding:3px 10px;border-radius:2px;
  background:rgba(242,160,61,.11);color:var(--amber);border:1px solid var(--amber-deep);
}
.painel__grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));}
.cel{padding:24px 28px;border-right:1px solid var(--line-soft);border-top:1px solid var(--line-soft);}
.cel:last-child{border-right:none;}
.cel h4{
  margin:0 0 12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal-deep);font-weight:600;
}
.cel ul{margin:0;padding-left:17px;font-size:14.5px;line-height:1.62;color:var(--text-dim);}
.cel li{margin-bottom:6px;}
.cel p{font-size:14.5px;color:var(--text-dim);margin:0;line-height:1.62;}
.cel--risco{background:rgba(242,160,61,.04);}
.cel--risco h4{color:var(--amber-deep);}

/* ---------------- cartões ---------------- */
.cartoes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:34px;
}
.cartao{background:var(--surface);padding:30px 28px;transition:background .25s ease;display:flex;flex-direction:column;}
.cartao:hover{background:var(--surface-2);}
.cartao__n{font-family:var(--f-mono);font-size:11px;color:var(--teal-deep);letter-spacing:.11em;margin-bottom:15px;}
.cartao h3{margin-bottom:12px;}
.cartao p{font-size:15px;color:var(--text-dim);margin:0;}
.cartao ul{margin:13px 0 0;padding-left:17px;font-size:14.5px;color:var(--text-dim);line-height:1.6;}
.cartao__link{
  margin-top:auto;padding-top:20px;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.05em;text-decoration:none;
}
.cartao__link::after{content:" \2192";}

.independencia{
  border:1px solid var(--teal-deep);border-radius:3px;
  background:linear-gradient(140deg,rgba(47,211,190,.07),rgba(14,27,32,.8) 62%);
  padding:32px;margin-top:34px;
}
.independencia h3{color:var(--teal);margin-bottom:15px;}
.independencia p{margin:0;color:var(--text-dim);}

.aviso{
  font-family:var(--f-mono);font-size:11.5px;color:var(--text-faint);
  border:1px dashed var(--line);border-radius:3px;padding:14px 18px;margin-top:30px;line-height:1.75;
}

/* ---------------- rodapé ---------------- */
.rodape{border-top:1px solid var(--line);background:var(--ink);padding:56px 0 0;}
.rodape__in{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px;
  font-family:var(--f-mono);font-size:12px;color:var(--text-faint);line-height:1.9;
}
.rodape__in p{margin:0;max-width:none;}
.rodape__nome{color:var(--text);font-size:13px;letter-spacing:.04em;margin-bottom:4px;}
.rodape a{color:var(--text-dim);text-decoration:none;}
.rodape a:hover{color:var(--teal);}
.rodape__fim{
  border-top:1px solid var(--line-soft);margin-top:44px;padding-top:22px;padding-bottom:40px;
  font-family:var(--f-mono);font-size:11px;color:var(--text-faint);
}
.rodape__fim p{margin:0;max-width:none;}

/* ---------------- revelação ---------------- */
/* Aprimoramento progressivo. O conteudo nasce VISIVEL: so fica oculto
   depois que o JavaScript declara, pela classe js-anim no elemento raiz,
   que assumiu a revelacao por rolagem. Assim, se o script nao carregar,
   for barrado ou falhar, o texto continua legivel. Ja custou uma pagina
   em branco fazer o contrario. */
.js-anim .rv{opacity:0;transform:translateY(22px);
    transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);}
.js-anim .rv.vista{opacity:1;transform:none;}

/* ---------------- responsivo ---------------- */
@media (max-width:900px){
  .bloco{grid-template-columns:1fr;gap:22px;padding:76px 28px;}
  .trilho{padding-top:0;}
  .hero__in{padding-top:132px;padding-bottom:76px;}
  .faixa{min-height:auto;}
  .faixa__in{padding-top:76px;padding-bottom:76px;}
  .alertbar__text{display:none;}
  .alertbar__cta{margin-left:auto;}
  /* No celular o menu passava a esconder tres dos quatro itens, deixando so o
     botao do diagnostico, que ainda vazava alguns pixels para fora da tela.
     Quem entrasse pelo telefone nao alcancava Encarregado, Adequacao nem
     Incidente pelo topo, e o caso do incidente e justamente o mais urgente.
     Agora os quatro descem para uma segunda linha, que rola na horizontal
     se nao couber. */
  .nav__in{flex-wrap:wrap;padding:12px 18px 10px;gap:0 12px;}
  .nav__links{
    /* sangra ate as bordas da tela, para os quatro itens caberem sem arrasto */
    margin:9px -18px 0;width:auto;flex:1 0 100%;gap:3px;
    padding:0 18px 2px;
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .nav__links::-webkit-scrollbar{display:none;}
  .nav__links li{flex:none;}
  .nav__links a{font-size:11.5px;padding:6px 9px;letter-spacing:.01em;}
  .brand__funcao{display:none;}
  .brand__nome{font-size:14px;}
  .cel{border-right:none;}
  .numeros > div{border-right:none;border-bottom:1px solid var(--line);}
  .hud{display:none;}
  .cap h2{font-size:clamp(1.9rem,8vw,2.6rem);}
}

@media (prefers-reduced-motion:reduce){
  body:not(.forcar-movimento) *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  body:not(.forcar-movimento) .rv{opacity:1;transform:none;}
  body:not(.forcar-movimento) .voo{height:auto;}
  body:not(.forcar-movimento) .voo__palco{position:relative;height:auto;}
  body:not(.forcar-movimento) #scrub{position:relative;height:56vh;}
  body:not(.forcar-movimento) .capitulos{position:relative;inset:auto;}
  body:not(.forcar-movimento) .cap{position:relative;opacity:1;display:block;padding:64px 28px;border-bottom:1px solid var(--line-soft);}
  body:not(.forcar-movimento) .dica,.hud{display:none;}
}

/* ===========================================================
   /incidente
   =========================================================== */

.olho--alerta{color:var(--amber);}
.hero--alerta h1 em{color:var(--amber);}
.hero__fundo--alerta{background-image:url("../img/faixa-alerta.jpg");}
.faixa--alerta .faixa__scrim{
  background:linear-gradient(90deg, rgba(5,9,11,.95) 0%, rgba(5,9,11,.78) 45%, rgba(20,9,2,.4) 100%);
}
.faixa--alerta .citacao em{color:var(--amber);}
.faixa--alerta .citacao__fonte{color:var(--amber-deep);}

/* teclado 9 */
.nove{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  border:1px solid var(--amber-deep);border-radius:3px;
  background:linear-gradient(120deg,rgba(242,160,61,.1),rgba(5,9,11,.55) 62%);
  backdrop-filter:blur(6px);padding:28px 32px;margin-top:36px;max-width:760px;
}
.nove__tecla{
  width:104px;height:104px;flex:none;
  border:1px solid var(--amber-deep);border-radius:7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(242,160,61,.08);
  box-shadow:inset 0 0 34px rgba(242,160,61,.14);
}
.nove__tecla span{font-family:var(--f-mono);font-size:3.3rem;line-height:1;color:var(--amber);font-weight:600;}
.nove__tecla small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.26em;color:var(--amber-deep);margin-top:5px;}
.nove__txt{flex:1 1 300px;}
.nove__txt p{margin:0;color:var(--text-dim);font-size:15px;}
.nove__num{font-family:var(--f-mono);font-size:1.55rem;margin-bottom:9px !important;}
.nove__num a{color:var(--text);text-decoration:none;}
.nove__num a:hover{color:var(--amber);}

/* linha do tempo */
.tempo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;margin-top:36px;
}
.fase{background:var(--surface);padding:26px 24px;}
.fase__t{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber);margin:0 0 4px;font-weight:600;
}
.fase__sub{
  font-family:var(--f-mono);font-size:10.5px;color:var(--text-faint);
  margin:0 0 16px;letter-spacing:.04em;text-transform:uppercase;
}
.fase ul{margin:0;padding-left:16px;font-size:14px;line-height:1.6;color:var(--text-dim);}
.fase li{margin-bottom:7px;}
.fase--fim{background:linear-gradient(160deg,rgba(242,160,61,.1),var(--surface) 72%);}
.fase--fim .fase__t{color:#FFC97E;}

/* tabela */
.tabela{overflow-x:auto;margin-top:34px;border:1px solid var(--line);border-radius:3px;}
.tabela table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;}
.tabela th,.tabela td{text-align:left;padding:16px 21px;border-bottom:1px solid var(--line-soft);vertical-align:top;}
.tabela thead th{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal-deep);font-weight:600;background:rgba(19,37,43,.6);
}
.tabela tbody th{color:var(--text);font-family:var(--f-mono);font-size:13px;font-weight:400;white-space:nowrap;}
.tabela td{color:var(--text-dim);}
.tabela tr:last-child th,.tabela tr:last-child td{border-bottom:none;}

@media (max-width:900px){
  .nove{padding:22px;gap:20px;}
  .nove__tecla{width:80px;height:80px;}
  .nove__tecla span{font-size:2.4rem;}
}