/* topo.css (celular) — a barra do topo (#cab, js/m/topo.js): logo SKNA | Properties e o "Fale conosco", sobre a
   faixa preta do hero (60 de altura + a área segura). O menu é o chip de js/menu.js. A barra inteira não pega
   toque; só o logo e o botão. */
#cab{position:fixed;z-index:50;left:0;right:0;top:0;height:calc(60 * var(--u) + var(--safe-t));pointer-events:none}
.mc__rola,.mc__in{position:absolute;inset:0}
.mc__in{display:flex;align-items:center;justify-content:space-between;padding:var(--safe-t) var(--pad) 0}
/* fundo de tinta: só aparece quando a barra volta fora do topo (no topo, a faixa preta é do próprio hero) */
.mc__fundo{position:absolute;inset:0;background:rgba(12,12,12,.94);opacity:0}

/* logo: a marca desenhada com as letras do logo (App.marcaSvg), de uma cor só, o divisor e "Properties".
   O link tem 44 de altura para o polegar. */
.mc__logo{position:relative;display:flex;align-items:center;height:calc(44 * var(--u));min-height:44px;color:#fff;pointer-events:auto}
.mc__marca{width:calc(64 * var(--u));height:calc(14.9 * var(--u))}
.mc__div{width:1px;height:calc(18 * var(--u));margin:0 calc(10 * var(--u)) 0 calc(11 * var(--u));background:rgba(255,255,255,.32)}
.mc__sub{font-family:var(--f-texto);font-weight:500;font-size:calc(13 * var(--u));letter-spacing:-.01em;line-height:1;color:rgba(255,255,255,.7);
  transform:translateY(calc(1 * var(--u)))}

/* "Fale conosco": o botão do desktop em pílula clara. No toque o verde enche de baixo (a base do totem) e o
   texto passa a tinta, na hora (:active). A área de toque passa de 44 px. */
.mc__btn{position:relative;display:flex;align-items:center;gap:calc(7 * var(--u));height:calc(34 * var(--u));padding:0 calc(12 * var(--u)) 0 calc(13 * var(--u));
  border-radius:calc(12 * var(--u));border:1px solid rgba(255,255,255,.2);color:#fff;isolation:isolate;pointer-events:auto;
  font-family:var(--f-texto);font-weight:600;font-size:calc(12.5 * var(--u));letter-spacing:-.01em;line-height:1;touch-action:manipulation;
  transition:border-color .2s}
/* a área de toque passa de 48 px na altura sem a pílula crescer (o recorte do verde fica no .mc__enche) */
.mc__btn::after{content:'';position:absolute;left:calc(-6 * var(--u));right:calc(-6 * var(--u));top:50%;height:max(48px,100%);transform:translateY(-50%)}
.mc__btn svg{width:calc(13 * var(--u));height:calc(13 * var(--u));flex:none}
.mc__enche{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--c-limao);clip-path:inset(100% 0 0 0);
  transition:clip-path .35s var(--e-expo)}
.mc__btn span,.mc__btn svg{transition:color .2s var(--e-suave)}
.mc__btn:active{border-color:var(--c-limao)}
.mc__btn:active .mc__enche{clip-path:inset(0 0 0 0);transition-duration:.12s}
.mc__btn:active span,.mc__btn:active svg{color:var(--c-ink)}
.mc__logo:active{opacity:.7}