/* ==========================================================================
   VALORA ENGENHARIA E SOLUÇÕES
   Sistema base — prancha técnica
   ========================================================================== */

:root{
  --navy-950:#0A1526; --navy-900:#0F1C33; --navy-850:#111F38; --navy-800:#14233F;
  --navy-700:#1B2E4F; --navy-600:#2B3E60; --navy-500:#3D5378;
  --gold-300:#F0DDA9; --gold-400:#E4C583; --gold-500:#C9A24C; --gold-700:#8F6E28;
  --paper:#EEF1F6; --slate:#8C9AB0; --slate-dim:#5C6C86; --slate-deep:#41506B;

  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --shell:min(1320px,calc(100% - 9vw));
  --rule:1px solid rgba(61,83,120,.34);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--navy-950);color:var(--paper);
  font-family:var(--font-body);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* --- utilitários tipográficos ------------------------------------------- */
.mono{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--slate-dim);
}
.mono--gold{color:var(--gold-500)}
.idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--gold-700)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;margin:0;line-height:1.1}
h2{font-size:clamp(28px,3.6vw,46px)}
h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.01em}
p{margin:0 0 1.15em}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:var(--slate);max-width:60ch}
.muted{color:var(--slate)}
strong{color:var(--paper);font-weight:600}

.shell{width:var(--shell);margin-inline:auto}
.rule{height:1px;background:linear-gradient(90deg,rgba(61,83,120,.5),transparent);border:0;margin:0}

/* --- fundo: grade de prancha -------------------------------------------- */
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(61,83,120,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,83,120,.13) 1px,transparent 1px),
    linear-gradient(rgba(61,83,120,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,83,120,.22) 1px,transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 30%,#000 20%,transparent 76%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 30%,#000 20%,transparent 76%);
}
.reg{position:fixed;width:20px;height:20px;z-index:3;pointer-events:none;opacity:.65}
.reg::before,.reg::after{content:"";position:absolute;background:var(--slate-deep)}
.reg::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%)}
.reg::after{left:50%;top:0;height:100%;width:1px;transform:translateX(-50%)}
.reg.tl{top:22px;left:22px} .reg.tr{top:22px;right:22px}
.reg.bl{bottom:22px;left:22px} .reg.br{bottom:22px;right:22px}

/* --- cabeçalho ----------------------------------------------------------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:32px;
  padding:16px calc((100vw - var(--shell))/2);
  background:rgba(10,21,38,0);border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),padding .35s var(--ease);
}
.site-head.is-stuck{
  background:rgba(10,21,38,.93);backdrop-filter:blur(14px);
  border-bottom:var(--rule);padding-block:11px;
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand svg{height:26px;width:auto}
.brand .wm path{fill:var(--paper)}
.brand .wm path.accent-fill{fill:var(--gold-500)}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate);padding:6px 0;position:relative;transition:color .25s
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold-500);transition:right .3s var(--ease)
}
.nav a:hover{color:var(--paper)} .nav a:hover::after{right:0}
.nav a[aria-current="page"]{color:var(--gold-400)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--gold-700);color:var(--gold-300);
  background:transparent;position:relative;overflow:hidden;transition:color .3s,border-color .3s;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--gold-500);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease);z-index:-1
}
.btn:hover{color:var(--navy-950);border-color:var(--gold-500)}
.btn:hover::before{transform:scaleX(1)}
.btn span{position:relative;z-index:1}
.btn--solid{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-950)}
.btn--solid:hover{background:var(--gold-300);border-color:var(--gold-300);color:var(--navy-950)}
.btn--ghost{border-color:var(--navy-600);color:var(--slate)}
.btn--ghost:hover{color:var(--paper);border-color:var(--slate-dim)}
.btn--ghost::before{background:var(--navy-700)}

/* --- seções -------------------------------------------------------------- */
main{position:relative;z-index:1}
section{position:relative}
.sec{padding-block:clamp(72px,9vw,132px)}
.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:14px}
.sec-head .mono{white-space:nowrap}
.sec-head .line{flex:1;height:1px;background:rgba(61,83,120,.4)}

/* --- revelação ao entrar em cena ---------------------------------------- */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise[data-d="1"]{transition-delay:.09s} .rise[data-d="2"]{transition-delay:.18s}
.rise[data-d="3"]{transition-delay:.27s} .rise[data-d="4"]{transition-delay:.36s}

/* ==========================================================================
   SCROLLYTELLING — elemento fixado que evolui
   ========================================================================== */
.scrolly{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px)}
.scrolly__stage{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:80px 40px;
}
.stage__frame{position:relative;border:var(--rule);background:rgba(15,28,51,.42);padding:16px}
.stage__frame::before,.stage__frame::after{
  content:"";position:absolute;width:9px;height:9px;border:1px solid var(--gold-700)
}
.stage__frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.stage__frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.stage__meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:16px}
.stage__bar{flex:1;height:1px;background:rgba(61,83,120,.4);position:relative}
.stage__bar i{
  position:absolute;inset:0 auto 0 0;background:var(--gold-500);
  width:calc(var(--p,0) * 100%);transition:width .12s linear
}
.stage__caption{
  margin-top:12px;min-height:2.6em;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.1em;color:var(--gold-400);text-transform:uppercase
}

.scrolly__steps{padding-block:20vh 26vh;display:flex;flex-direction:column;gap:19vh}
.step{opacity:.26;transition:opacity .5s var(--ease)}
.step.is-active{opacity:1}
.step__n{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--gold-700);
  display:block;margin-bottom:14px
}
.step.is-active .step__n{color:var(--gold-500)}
.step h3{margin-bottom:12px}
.step p{color:var(--slate);margin-bottom:0}
.step__tag{
  display:inline-block;margin-top:16px;padding:5px 11px;border:1px solid rgba(61,83,120,.55);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-dim)
}

/* camadas do desenho técnico */
.layer{opacity:0;transition:opacity .55s var(--ease)}
.layer.on{opacity:1}
.layer--draw path,.layer--draw line,.layer--draw rect,.layer--draw circle,.layer--draw polyline{
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset .9s var(--ease)
}
.layer--draw.on path,.layer--draw.on line,.layer--draw.on rect,
.layer--draw.on circle,.layer--draw.on polyline{stroke-dashoffset:0}

/* ==========================================================================
   COMPONENTES
   ========================================================================== */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(61,83,120,.34);border:var(--rule)}
.door{
  background:var(--navy-950);padding:clamp(28px,3.4vw,48px);
  display:flex;flex-direction:column;min-height:340px;position:relative;
  transition:background .4s var(--ease)
}
.door:hover{background:var(--navy-900)}
.door__k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--gold-700);text-transform:uppercase}
.door h3{margin:16px 0 12px;font-size:clamp(22px,2.3vw,30px)}
.door p{color:var(--slate);font-size:16px}
.door ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.door ul li{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate-dim);border:1px solid rgba(61,83,120,.45);padding:4px 9px
}
.door__go{margin-top:auto;padding-top:26px;display:flex;align-items:center;gap:10px;color:var(--gold-400);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.door__go svg{transition:transform .3s var(--ease)}
.door:hover .door__go svg{transform:translateX(6px)}

/* método */
.method{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule);border-left:var(--rule)}
.method__i{
  padding:clamp(24px,2.6vw,36px);border-right:var(--rule);border-bottom:var(--rule);
  position:relative;transition:background .45s var(--ease)
}
.method__i:hover{background:rgba(20,35,63,.55)}
.method__i .tick{
  display:block;width:24px;height:2px;margin-bottom:20px;
  background:var(--gold-500);transition:width .45s var(--ease)
}
.method__i:hover .tick{width:56px}
.method__i h4{font-size:18px;margin-bottom:9px;font-family:var(--font-display);font-weight:600}
.method__i p{color:var(--slate);font-size:15px;margin:0;line-height:1.6}

/* lista de atuações */
.areas{border-top:var(--rule)}
.area{
  display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:24px;
  padding:24px 6px;border-bottom:var(--rule);transition:padding-left .35s var(--ease),background .35s
}
.area:hover{padding-left:20px;background:rgba(20,35,63,.5)}
.area__n{font-family:var(--font-mono);font-size:11px;color:var(--gold-700);letter-spacing:.12em}
.area__t{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(17px,1.7vw,21px)}
.area__d{display:block;color:var(--slate-dim);font-size:14.5px;margin-top:4px;line-height:1.5}
.area__arrow{color:var(--slate-deep);transition:color .3s,transform .3s var(--ease)}
.area:hover .area__arrow{color:var(--gold-500);transform:translateX(5px)}

/* números / prova */
.facts--3{grid-template-columns:repeat(3,1fr)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(61,83,120,.3);border:var(--rule)}
.fact{background:var(--navy-950);padding:26px 22px}
.fact b{display:block;font-family:var(--font-display);font-size:clamp(26px,3vw,38px);color:var(--paper);line-height:1;margin-bottom:9px}
.fact span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-dim);line-height:1.5;display:block}

/* nota / callout técnico */
.note{border-left:2px solid var(--gold-700);padding:4px 0 4px 22px;color:var(--slate);font-size:16px}
.note em{color:var(--gold-300);font-style:normal}

/* CTA final */
.cta{border:var(--rule);padding:clamp(34px,4.5vw,64px);position:relative;background:
  radial-gradient(ellipse 70% 130% at 50% 0%,rgba(201,162,76,.09),transparent 62%)}
.cta h2{max-width:18ch;margin-bottom:18px}
.cta__row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* rodapé */
.site-foot{border-top:var(--rule);padding-block:48px 34px;position:relative;z-index:1}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot__grid h5{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate-deep);margin:0 0 14px;font-weight:400}
.foot__grid a,.foot__grid p{display:block;color:var(--slate);font-size:15px;margin:0 0 8px;transition:color .25s}
.foot__grid a:hover{color:var(--gold-400)}
.foot__bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:22px;border-top:var(--rule)}

/* --- responsivo ---------------------------------------------------------- */
@media (max-width:1000px){
  .scrolly{grid-template-columns:1fr}
  .scrolly__stage{
    height:auto;min-height:46vh;top:var(--head-h,62px);padding-block:14px 10px;
    background:var(--navy-950);z-index:20;
    box-shadow:0 18px 26px -18px var(--navy-950)
  }
  .stage__frame{padding:10px}
  .stage__caption{margin-top:8px;min-height:0;font-size:10.5px}
  .scrolly__steps{padding-block:4vh 22vh;gap:0}
  .step{min-height:74vh;display:flex;flex-direction:column;justify-content:flex-start;padding-block:0}
  .method{grid-template-columns:1fr 1fr}
  .facts,.facts--3{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  :root{--shell:calc(100% - 36px)}
  .nav{display:none}
  .site-head{gap:12px;padding-block:10px}
  .site-head .btn{padding:9px 13px;font-size:9.5px;letter-spacing:.11em;white-space:nowrap}
  .brand img:first-child{height:22px !important}
  .brand img:last-child{height:13px !important}
  .step{min-height:72vh}
  .step h3{font-size:21px}
  .cta__row{gap:10px}
  .cta__row .btn{flex:1 1 auto;justify-content:center}
  .doors{grid-template-columns:1fr}
  .method{grid-template-columns:1fr}
  .facts,.facts--3{grid-template-columns:1fr}
  .area{grid-template-columns:40px 1fr auto;gap:14px}
  .reg{display:none}
  .foot__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rise{opacity:1;transform:none}
  .step{opacity:1}
  .layer{opacity:1}
}

/* ==========================================================================
   ACESSIBILIDADE E FOCO
   ========================================================================== */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold-500);color:var(--navy-950);padding:12px 20px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:16px;top:16px}

:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px}
.btn:focus-visible,.door:focus-visible,.area:focus-visible{outline-offset:2px}

/* garante contraste mínimo em texto de apoio quando o usuário força alto contraste */
@media (forced-colors:active){
  .btn,.door,.area,.fact,.method__i{border:1px solid CanvasText}
  .grid-bg,.reg{display:none}
}

/* ==========================================================================
   HERÓI — assinatura animada
   Logo à esquerda e frase à direita. Os dois são desenhados; depois a logo
   encolhe no próprio eixo esquerdo e a frase desliza acompanhando a redução.
   ========================================================================== */
.hero-stage{
  --ciclo:12s;
  --marca-w:clamp(60px,6.6vw,92px);
  --grande:2.6;
  --vao:clamp(18px,2.4vw,40px);
  --recuo:calc(var(--marca-w) * (var(--grande) - 1));

  display:flex;align-items:center;gap:var(--vao);
  margin-top:30px;
  min-height:calc(var(--marca-w) * .905 * var(--grande) + 26px);
  overflow:hidden;
}

.hero-mark{
  position:relative;flex:0 0 auto;
  width:var(--marca-w);aspect-ratio:1/.905;
  transform-origin:left center;
  transform:scale(var(--grande));
  animation:heroMarca var(--ciclo) cubic-bezier(.6,0,.2,1) infinite;
  will-change:transform,opacity;
}
.hero-mark svg,.hero-mark img{position:absolute;inset:0;width:100%;height:100%}

.hm-sketch *{
  fill:none;stroke:var(--gold-400);stroke-width:7;
  stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  animation:heroTraco var(--ciclo) cubic-bezier(.4,0,.2,1) infinite;
}
.hm-final{opacity:0;animation:heroCheio var(--ciclo) ease infinite}

.hero-line{
  font-size:clamp(30px,4.2vw,62px);line-height:1.06;letter-spacing:-.025em;
  margin:0;
  transform:translateX(var(--recuo));
  clip-path:inset(0 100% 0 0);
  animation:heroFrase var(--ciclo) cubic-bezier(.6,0,.2,1) infinite;
  will-change:transform,clip-path;
}
.hero-line span{color:var(--gold-500)}

/* 0–22% traço e frase escritos ao mesmo tempo · 30–38% logo cheia
   46–62% logo encolhe e frase acompanha · 62–90% repouso · 90–100% reinício */
@keyframes heroTraco{
  0%   {opacity:1;stroke-dashoffset:var(--len,600)}
  22%  {opacity:1;stroke-dashoffset:0}
  30%  {opacity:1}
  38%  {opacity:0}
  99%  {opacity:0;stroke-dashoffset:0}
  100% {opacity:1;stroke-dashoffset:var(--len,600)}
}
@keyframes heroCheio{
  0%,30%  {opacity:0}
  38%,99% {opacity:1}
  100%    {opacity:0}
}
@keyframes heroMarca{
  0%      {transform:scale(var(--grande));opacity:0}
  3%,46%  {transform:scale(var(--grande));opacity:1}
  62%,90% {transform:scale(1);opacity:1}
  96%     {transform:scale(1);opacity:0}
  97%,100%{transform:scale(var(--grande));opacity:0}
}
@keyframes heroFrase{
  0%      {transform:translateX(var(--recuo));clip-path:inset(0 100% 0 0);opacity:1}
  26%,46% {transform:translateX(var(--recuo));clip-path:inset(0 0 0 0);opacity:1}
  62%,90% {transform:translateX(0);clip-path:inset(0 0 0 0);opacity:1}
  96%,100%{transform:translateX(0);clip-path:inset(0 0 0 0);opacity:0}
}

@media (max-width:720px){
  .hero-stage{--grande:1.95;--marca-w:54px;--vao:14px;margin-top:22px}
  .hero-line{font-size:clamp(26px,7.6vw,38px)}
}

@media (prefers-reduced-motion:reduce){
  .hero-mark{animation:none;transform:none}
  .hm-sketch{display:none}
  .hm-final{opacity:1;animation:none}
  .hero-line{animation:none;clip-path:none;transform:none}
}

/* ==========================================================================
   ORIENTAÇÃO DE NAVEGAÇÃO
   ========================================================================== */
[id]{scroll-margin-top:150px}

.scroll-hint{
  display:inline-flex;align-items:center;gap:13px;margin-top:36px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate-dim);transition:color .3s
}
.scroll-hint:hover{color:var(--gold-400)}
.scroll-hint i{
  width:1px;height:26px;flex:0 0 auto;
  background:linear-gradient(var(--gold-500),transparent);
  animation:dica 2.4s ease-in-out infinite
}
@keyframes dica{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(8px);opacity:1}}

/* grupos das áreas de atuação */
.grupo + .grupo{margin-top:56px}
.grupo__cab{display:flex;align-items:baseline;gap:18px;margin-bottom:6px}
.grupo__cab h3{font-size:clamp(18px,1.8vw,23px);white-space:nowrap}
.grupo__cab .line{flex:1;height:1px;background:rgba(61,83,120,.35)}
.grupo__sub{color:var(--slate-dim);font-size:15px;margin:0 0 18px;max-width:62ch}

.area{grid-template-columns:64px 1fr auto auto}
.area__cta{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate-deep);white-space:nowrap;transition:color .3s
}
.area:hover .area__cta{color:var(--gold-500)}

/* guia do scrollytelling */
.stage__guia{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap}
.stage__dots{display:flex;gap:4px}
.stage__dots button{
  width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;position:relative
}
.stage__dots button::before{
  content:"";position:absolute;left:2px;right:2px;top:9px;height:2px;
  background:var(--navy-500);transition:background .3s var(--ease),left .3s var(--ease),right .3s var(--ease)
}
.stage__dots button:hover::before{background:var(--slate-dim)}
.stage__dots button[aria-current="true"]::before{background:var(--gold-500);left:0;right:0}
.stage__dica{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate-deep);transition:opacity .6s var(--ease)
}
.stage__dica.oculto{opacity:0}

/* assinatura de desenvolvimento — símbolo e cores oficiais da NodeStack.
   Em repouso a marca fica atenuada para não competir com a do cliente;
   no hover assume a cor cheia: ciano estrutural e âmbar no nó. */
.sig{
  display:inline-flex;align-items:baseline;gap:9px;line-height:1;
  --ns-ciano:#4FC3E8; --ns-ambar:#F2A33C; --ns-bloco:#122D41;
}
/* glifo de assinatura — usa currentColor, então basta trocar a cor do elemento.
   Especificação completa em NodeStack/_Marca/logos/assinatura-nodestack.md */
.sig__mark{flex:0 0 auto;align-self:center;color:var(--slate-deep);transition:color .4s var(--ease)}
.sig:hover .sig__mark,.sig:focus-visible .sig__mark{color:var(--ns-ciano)}

.sig__pre{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:lowercase;color:var(--slate-deep);transition:color .4s var(--ease)
}
.sig__nome{
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.05em;
  display:inline-flex;margin-left:-3px
}
.sig__nome i,.sig__nome b{
  font-style:normal;font-weight:500;color:var(--slate-deep);transition:color .4s var(--ease)
}
.sig:hover .sig__pre,.sig:focus-visible .sig__pre{color:var(--slate-dim)}
.sig:hover .sig__nome i,.sig:focus-visible .sig__nome i{color:var(--paper)}
.sig:hover .sig__nome b,.sig:focus-visible .sig__nome b{color:var(--ns-ciano)}

@media (max-width:720px){
  .area{grid-template-columns:40px 1fr auto;gap:14px}
  .area__cta{display:none}
  .grupo__cab h3{white-space:normal}
}