/* menu.css (celular) — o mesmo menu do desktop (js/menu.js), redesenhado para o polegar: o chip fica no canto de
   baixo à direita, acima da barra de gestos (safe area); o painel abre do chip como uma folha que ocupa a largura
   da tela, com as seções em display e o contato. A rolagem da página fica parada com ele aberto (js/menu.js). */
.mn__caps{position:fixed;z-index:62;right:calc(16 * var(--u));bottom:calc(16 * var(--u) + var(--safe-b));height:calc(54 * var(--u));
  display:flex;align-items:stretch;border-radius:calc(18 * var(--u));background:var(--c-ink);color:#fff;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) calc(-12 * var(--u)) rgba(0,0,0,.5);
  visibility:hidden;opacity:0;transition:border-color .4s,box-shadow .4s;touch-action:manipulation}
.mn__caps::after{content:'';position:absolute;right:calc(8 * var(--u));top:calc(8 * var(--u));width:calc(4 * var(--u));height:calc(4 * var(--u));
  background:var(--c-limao)}
.mn.is-aberto .mn__caps{border-color:transparent;box-shadow:none}
.mn.is-aberto .mn__caps::after{opacity:0}
/* teclado aberto (o campo da vitrine do rodapé põe html.is-digitando): o chip sai do caminho do botão do WhatsApp.
   !important porque a visibilidade do chip é escrita inline pelo GSAP (js/menu.js) */
html.is-digitando .mn__caps{opacity:0 !important;pointer-events:none !important;transition:opacity .2s}

.mn__kbox{position:relative;width:calc(54 * 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(18 * var(--u));right:calc(18 * var(--u));bottom:calc(13 * 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}

.mn__andar{position:relative;display:flex;align-items:center;gap:calc(5 * var(--u));padding:0 calc(16 * var(--u)) 0 calc(12 * 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 var(--e-expo)}
.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 folha =====
   --mu encolhe o conteúdo quando a tela é baixa (iPhone SE): o conteúdo acima da linha do botão mede 560 --mu e
   tem de caber entre o topo (folga 16 + safe area) e a linha do chip. */
.mn__veu{position:fixed;inset:0;z-index:60;background:rgba(8,8,8,.5);opacity:0;pointer-events:none}
.mn.is-aberto .mn__veu{pointer-events:auto}
.mn__painel{--mu:min(var(--u), calc((100svh - 104 * var(--u) - var(--safe-b) - var(--safe-t)) / 560));
  position:fixed;z-index:61;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(16 * var(--u) + var(--safe-b));
  padding:0 calc(22 * var(--mu));color:#fff}
.mn__painel[hidden]{display:none}
.mn__fundo{position:absolute;inset:0;border-radius:calc(22 * var(--u));background:var(--c-ink);border:1px solid rgba(255,255,255,.1)}
.mn__painel > :not(.mn__fundo){position:relative}
.mn__topo{height:calc(58 * var(--mu));display:flex;align-items:center;gap:calc(10 * var(--mu))}
.mn__marca{display:block;width:calc(60 * var(--mu));height:calc(14 * var(--mu))}
.mn__topo i{width:1px;height:calc(16 * var(--mu));background:rgba(255,255,255,.3)}
.mn__topo span{font-family:var(--f-texto);font-size:calc(12 * var(--mu));font-weight:500;color:rgba(255,255,255,.6)}
/* o endereço não cabe na linha do topo do celular: vai para o contato (fica escondido aqui) */
.mn__end{display:none}

.mn__nav{margin-top:calc(6 * var(--mu));display:flex;flex-direction:column}
.mn__it{--linha:1;position:relative;display:flex;align-items:center;height:calc(46 * var(--mu));color:rgba(255,255,255,.42)}
.mn__it + .mn__it::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.09);
  transform:scaleX(var(--linha));transform-origin:0 50%}
.mn__n{display:flex;align-items:center;width:calc(44 * var(--mu));font-family:var(--f-texto);font-size:calc(10.5 * var(--mu));font-weight:600;
  letter-spacing:.06em;color:rgba(255,255,255,.34)}
.mn__n::before{content:'';width:calc(5 * var(--mu));height:calc(5 * var(--mu));margin-right:calc(7 * var(--mu));background:var(--c-limao);
  opacity:0;transform:scale(0);transition:transform .45s var(--e-expo),opacity .2s}
.mn__tx{display:block;overflow:hidden;padding:calc(6 * var(--mu)) 0 calc(9 * var(--mu))}
.mn__txi{display:block;font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;text-transform:uppercase;
  font-size:calc(25 * var(--mu));line-height:1;letter-spacing:-.03em;white-space:nowrap}
.mn__seta{margin-left:auto;width:calc(13 * var(--mu));height:calc(13 * var(--mu));color:var(--c-limao)}
.mn__seta svg{display:block;width:100%;height:100%}
.mn__it.is-atual{color:#fff}
.mn__it.is-atual .mn__n{color:var(--c-limao)}
.mn__it.is-atual .mn__n::before{opacity:1;transform:scale(1)}
/* no toque não há hover: a seta fica à mostra, apagada, e acende na seção atual e no toque */
.mn__it .mn__seta{opacity:.28}
.mn__it.is-atual .mn__seta,.mn__it:active .mn__seta{opacity:1}
.mn__it:active{color:#fff}

.mn__regua{margin-top:calc(18 * 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: dois grupos lado a lado; em cada linha o rótulo fica em cima do valor */
.mn__contato{margin-top:calc(16 * var(--mu));display:grid;grid-template-columns:1fr 1fr;gap:calc(14 * var(--mu))}
.mn__rot{margin-bottom:calc(6 * var(--mu));font-family:var(--f-texto);font-size:calc(9.5 * var(--mu));font-weight:600;letter-spacing:.08em;
  color:rgba(255,255,255,.45)}
.mn__lk{display:block;padding:calc(4 * var(--mu)) 0;font-family:var(--f-texto);font-size:calc(13.5 * var(--mu));line-height:1.25;font-weight:500;
  letter-spacing:-.015em;color:#fff;white-space:nowrap}
.mn__lk span{display:block;font-size:calc(10 * var(--mu));color:rgba(255,255,255,.4);letter-spacing:0}
.mn__lk:active{color:var(--c-limao)}
/* a linha do botão divide a altura com o chip (54 --u), que fica no canto direito dela */
.mn__pe{margin-top:calc(10 * var(--mu));height:calc(54 * var(--u));display:flex;align-items:center}
.mn__cta{display:inline-flex;align-items:center;gap:calc(10 * var(--mu));height:calc(42 * var(--mu));padding:0 calc(18 * var(--mu)) 0 calc(20 * 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}
.mn__cta svg{width:calc(12 * var(--mu));height:calc(12 * var(--mu))}