/* menu.css — menu suspenso (js/menu.js). Um chip no canto de baixo à direita: o K com o fio do progresso embaixo
   e o andar (número da seção) como um painel de elevador. O painel abre do mesmo canto, em tinta, com as seções em
   display e o contato. Medidas em px do vídeo (--u); o conteúdo do painel usa --mu (abaixo). */
.mn__caps{position:fixed;z-index:62;right:calc(28 * var(--u));bottom:calc(28 * var(--u));height:calc(56 * var(--u));
  display:flex;align-items:stretch;padding:0;border-radius:calc(18 * var(--u));background:var(--c-ink);color:#fff;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-14 * var(--u)) rgba(0,0,0,.45);
  cursor:pointer;visibility:hidden;opacity:0;transition:background-color .35s cubic-bezier(.25,.46,.45,.94),border-color .4s,box-shadow .4s}
.mn__caps:hover{background:#1b1c1c}
.mn__caps:focus-visible{outline:2px solid var(--c-limao);outline-offset:calc(3 * var(--u))}
/* o quadrado verde da marca acende no canto do chip no hover */
.mn__caps::after{content:'';position:absolute;right:calc(9 * var(--u));top:calc(9 * var(--u));width:calc(4 * var(--u));height:calc(4 * var(--u));
  background:var(--c-limao);transform:scale(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.mn__caps:hover::after,.mn__caps:focus-visible::after{transform:scale(1)}
.mn.is-aberto .mn__caps{border-color:transparent;box-shadow:none}

/* o K, menor, com o fio do progresso crescendo embaixo dele (sobre um trilho apagado) */
.mn__kbox{position:relative;width:calc(56 * var(--u));display:grid;place-items:center}
.mn__k{display:block;width:calc(17 * var(--u));height:calc(17 * var(--u));margin-top:calc(-5 * var(--u));overflow:visible}
.mn__prog,.mn__kbox::after{position:absolute;left:calc(19 * var(--u));right:calc(19 * var(--u));bottom:calc(14 * var(--u));height:calc(1.5 * var(--u))}
.mn__kbox::after{content:'';background:rgba(255,255,255,.16)}
.mn__prog{z-index:1;background:var(--c-limao);transform-origin:0 50%;transform:scaleX(0)}
.mn__prog,.mn__kbox::after{transition:opacity .3s}
.mn.is-aberto .mn__prog,.mn.is-aberto .mn__kbox::after{opacity:0}

/* o andar: setinha e dois algarismos, cada um numa janela de uma linha (só o que muda rola) */
.mn__andar{position:relative;display:flex;align-items:center;gap:calc(5 * var(--u));padding:0 calc(17 * var(--u)) 0 calc(13 * var(--u))}
.mn__andar::before{content:'';position:absolute;left:0;top:calc(15 * var(--u));bottom:calc(15 * var(--u));width:1px;background:rgba(255,255,255,.13)}
.mn__dir{width:0;height:0;margin-right:calc(3 * var(--u));border-left:calc(4 * var(--u)) solid transparent;border-right:calc(4 * var(--u)) solid transparent;
  border-top:calc(5 * var(--u)) solid rgba(255,255,255,.28);transition:border-top-color .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.mn__dir.is-sobe{transform:rotate(180deg)}
.mn__dir.is-anda{border-top-color:var(--c-limao)}
.mn__dig{position:relative;display:block;overflow:hidden;width:calc(14 * var(--u));height:calc(24 * var(--u));
  font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;font-size:calc(25 * var(--u));line-height:calc(24 * var(--u))}
.mn__dig b{position:absolute;left:0;right:0;top:0;text-align:center;font-weight:inherit}

/* ===== véu e painel =====
   --mu: a unidade do conteúdo do painel. É o --u, mas encolhe quando a janela é baixa para a largura: o conteúdo
   acima da linha do botão mede 640 --mu e tem de caber entre a margem de cima (28) e a linha do chip (28 + 56). */
.mn__veu{position:fixed;inset:0;z-index:60;background:rgba(8,8,8,.42);opacity:0;pointer-events:none}
.mn.is-aberto .mn__veu{pointer-events:auto}
.mn__painel{--mu:min(var(--u), calc((100vh - 112 * var(--u)) / 640));
  position:fixed;z-index:61;right:calc(28 * var(--u));bottom:calc(28 * var(--u));width:calc(600 * var(--u));
  padding:0 calc(34 * var(--mu));color:#fff}
.mn__painel[hidden]{display:none}
/* o fundo é a única camada recortada na abertura (menu.js): o conteúdo entra por cima, inteiro */
.mn__fundo{position:absolute;inset:0;border-radius:calc(22 * var(--u));background:var(--c-ink);border:1px solid rgba(255,255,255,.08)}
.mn__painel > :not(.mn__fundo){position:relative}
.mn__topo{height:calc(64 * var(--mu));display:flex;align-items:center;gap:calc(12 * var(--mu))}
.mn__marca{display:block;width:calc(65 * var(--mu));height:calc(15 * var(--mu))}
.mn__topo i{width:1px;height:calc(18 * var(--mu));background:rgba(255,255,255,.3)}
.mn__topo span{font-family:var(--f-texto);font-size:calc(12.5 * var(--mu));font-weight:500;color:rgba(255,255,255,.6)}
.mn__end{margin-left:auto;font-family:var(--f-texto);font-size:calc(11.5 * var(--mu));color:rgba(255,255,255,.4);white-space:nowrap}

/* seções: índice, nome em display (sobe de dentro do recorte ao abrir), a seta que entra no hover e o fio
   entre as seções, que se desenha da esquerda na abertura (--linha) */
.mn__nav{margin-top:calc(22 * var(--mu));display:flex;flex-direction:column}
.mn__it{--linha:1;position:relative;display:flex;align-items:center;height:calc(50 * var(--mu));color:rgba(255,255,255,.38);
  transition:color .35s cubic-bezier(.25,.46,.45,.94)}
.mn__it + .mn__it::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.08);
  transform:scaleX(var(--linha));transform-origin:0 50%}
.mn__n{display:flex;align-items:center;width:calc(52 * var(--mu));font-family:var(--f-texto);font-size:calc(11 * var(--mu));font-weight:600;
  letter-spacing:.06em;color:rgba(255,255,255,.32);transition:color .35s}
.mn__n::before{content:'';width:calc(5 * var(--mu));height:calc(5 * var(--mu));margin-right:calc(8 * var(--mu));background:var(--c-limao);
  opacity:0;transform:scale(0);transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .2s}
.mn__tx{display:block;overflow:hidden;padding:calc(6 * var(--mu)) 0 calc(10 * var(--mu));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.mn__txi{display:block;font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;text-transform:uppercase;
  font-size:calc(31 * var(--mu));line-height:1;letter-spacing:-.03em;white-space:nowrap}
.mn__seta{margin-left:auto;width:calc(14 * var(--mu));height:calc(14 * var(--mu));color:var(--c-limao);opacity:0;
  transform:translate(calc(-10 * var(--mu)),calc(10 * var(--mu)));transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1)}
.mn__seta svg{display:block;width:100%;height:100%}
.mn__it:hover,.mn__it:focus-visible,.mn__it.is-atual{color:#fff}
.mn__it.is-atual .mn__n{color:var(--c-limao)}
.mn__it.is-atual .mn__n::before,.mn__it:hover .mn__n::before,.mn__it:focus-visible .mn__n::before{opacity:1;transform:scale(1)}
.mn__it:hover .mn__tx,.mn__it:focus-visible .mn__tx{transform:translateX(calc(10 * var(--mu)))}
.mn__it:hover .mn__seta,.mn__it:focus-visible .mn__seta{opacity:1;transform:none}
.mn__it:focus-visible{outline:none}

/* régua: o quadrado verde e o fio que se desenha a partir dele */
.mn__regua{margin-top:calc(24 * var(--mu));height:calc(10 * var(--mu))}
.mn__regua b{position:absolute;left:0;top:0;width:calc(10 * var(--mu));height:calc(10 * var(--mu));background:var(--c-limao)}
.mn__regua i{position:absolute;left:calc(18 * var(--mu));right:0;top:calc(4.5 * var(--mu));height:1px;background:rgba(255,255,255,.22);transform-origin:0 50%}

/* contato */
.mn__contato{margin-top:calc(22 * var(--mu));display:grid;grid-template-columns:1fr 1fr;gap:calc(24 * var(--mu))}
.mn__rot{margin-bottom:calc(10 * var(--mu));font-family:var(--f-texto);font-size:calc(10 * var(--mu));font-weight:600;letter-spacing:.08em;
  color:rgba(255,255,255,.45)}
.mn__lk{display:block;font-family:var(--f-texto);font-size:calc(15 * var(--mu));line-height:calc(27 * var(--mu));font-weight:500;
  letter-spacing:-.015em;color:#fff;white-space:nowrap;transition:color .3s}
.mn__lk span{display:inline-block;width:calc(74 * var(--mu));font-size:calc(11 * var(--mu));color:rgba(255,255,255,.4);letter-spacing:0}
.mn__lk:hover,.mn__lk:focus-visible{color:var(--c-limao)}
/* a linha do botão divide a altura com o chip (56 --u), que fica no canto direito dela */
.mn__pe{margin-top:calc(14 * var(--mu));height:calc(56 * var(--u));display:flex;align-items:center}
.mn__cta{display:inline-flex;align-items:center;gap:calc(12 * var(--mu));height:calc(42 * var(--mu));padding:0 calc(20 * var(--mu)) 0 calc(22 * var(--mu));
  border-radius:calc(14 * var(--mu));background:var(--c-limao);color:var(--c-ink);font-family:var(--f-texto);font-size:calc(13.5 * var(--mu));
  font-weight:600;letter-spacing:-.01em;transition:background-color .35s cubic-bezier(.25,.46,.45,.94)}
.mn__cta svg{width:calc(12 * var(--mu));height:calc(12 * var(--mu));transition:transform .45s cubic-bezier(.16,1,.3,1)}
.mn__cta:hover{background:#fff}
.mn__cta:hover svg{transform:translate(calc(2 * var(--mu)),calc(-2 * var(--mu)))}
.mn__cta:focus-visible,.mn__lk:focus-visible{outline:2px solid var(--c-limao);outline-offset:calc(3 * var(--mu))}