/* Barra do topo e menu mobile. */

/* ---------- navbar ---------- */
.topo{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:2rem;padding:clamp(1rem,2.4vw,2rem) clamp(1.2rem,4vw,3.4rem);
  background:linear-gradient(rgba(14,11,8,.55),transparent)}
.marca{display:flex;align-items:center;gap:.8rem}
.marca-logo{display:block;height:clamp(34px,3.4vw,46px);aspect-ratio:100/140;opacity:.95;color:#EDE3D2}
.marca-logo img{width:100%;height:100%;object-fit:contain}
.marca-nome{font-family:var(--nav);font-stretch:125%;font-weight:800;font-size:.86rem;letter-spacing:.22em;
  text-transform:uppercase;color:#EDE3D2;white-space:nowrap}
/* nome de cliente costuma ser mais longo que o do original: em tela media,
   so a marca fica no topo para o menu caber numa linha */
@media (max-width:1100px){.marca-nome{display:none}}
.menu{display:flex;align-items:center;gap:clamp(1.8rem,3.4vw,3.2rem);list-style:none;
  font-family:var(--nav);font-stretch:125%;font-weight:800;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
.menu li:last-child{margin-left:clamp(.4rem,1vw,1rem)}
.menu a{color:rgba(237,227,210,.82);padding:.45em 0;border-bottom:1.5px solid transparent;transition:color .25s,border-color .25s}
.menu a:hover,.menu a:focus-visible{color:#fff;border-color:rgb(var(--acento))}
.menu a.arte{padding:0;border:0}

.abre-menu{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.abre-menu i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--osso);transition:transform .3s,opacity .2s}
.abre-menu i:nth-of-type(1){top:16px}.abre-menu i:nth-of-type(2){top:22px}.abre-menu i:nth-of-type(3){top:28px}
.aberto .abre-menu i:nth-of-type(1){transform:translateY(6px) rotate(45deg)}
.aberto .abre-menu i:nth-of-type(2){opacity:0}
.aberto .abre-menu i:nth-of-type(3){transform:translateY(-6px) rotate(-45deg)}