/* ===========================================================
   MNAV — ajustes (endereço + instagram, centralizado sem flutuar)
   Isolado de propósito, carrega DEPOIS do main.css pra sobrepor.
=========================================================== */

/* novos itens (endereço / instagram) — mesmo visual dos existentes */
.mnav__item.mnav__item--instagram:hover { color: #d6249f; }

/* ---------------------------------------------------------------------
   BASE (mobile e desktop): botão "Agendar" na MESMA linha dos outros
   itens — entre os dois grupos —, só que redondo. Nada de
   position:absolute / flutuar por cima: ele é só mais um item do
   flex, com o layout reservando o espaço dele certinho, então nunca
   fica em cima de outro botão.

   Truque pra ele cair no MEIO: o botão central (.mnav__center) é
   irmão de .mnav__list no HTML, não filho dele — então não dá pra
   intercalar com os grupos só com a ordem do DOM. Aqui a gente usa
   `display: contents` no .mnav__list: ele some da árvore de layout
   (sem virar uma caixa), e os dois .mnav__group passam a ser filhos
   diretos do flex .mnav__shell, junto com .mnav__center. Um `order`
   simples posiciona o botão exatamente entre o 1º e o 2º grupo.
   --------------------------------------------------------------------- */
.mnav__shell {
  justify-content: space-around;
  padding: 0 12px;
}

/* .mnav__list some como caixa; os .mnav__group viram filhos diretos
   do flex .mnav__shell, junto com .mnav__center */
.mnav__list {
  display: contents;
}

.mnav__group:nth-of-type(1) { order: 1; } /* Início */
.mnav__group:nth-of-type(2) { order: 2; } /* Contato */
.mnav__center              { order: 3; } /* Agendar */
.mnav__group:nth-of-type(3) { order: 4; } /* Localização */
.mnav__group:nth-of-type(4) { order: 5; } /* Instagram */

/* o anel/recorte atrás do botão só existia pra decorar o efeito de
   "flutuar por cima" — sem isso, não faz mais sentido */
.mnav__shell::before,
.mnav__shell::after {
  display: none;
}

.mnav__center {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  flex-shrink: 0;     /* impede o flex de espremer o círculo e achatar */
  margin: 0;
  width: 52px;
  height: 52px;
}

.mnav__center:hover {
  transform: scale(1.06);
}

.mnav__center:active {
  transform: scale(.95);
}

/* ---------------------------------------------------------------------
   Desktop: barra compacta, centralizada, itens em linha (ícone + label
   lado a lado). O botão continua no meio, mas vira uma pill em vez de
   círculo — cabe melhor ao lado de texto.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
  .mnav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    max-width: none;
  }

  .mnav__shell {
    height: auto;
    padding: 6px;
    gap: 10px;
    justify-content: flex-start;
  }

  .mnav__group {
    gap: 2px;
  }

  .mnav__item {
    flex-direction: row;
    padding: 8px 12px;
    gap: 7px;
    border-radius: 10px;
  }

  .mnav__item i {
    font-size: 15px;
  }

  .mnav__item.is-active {
    transform: none;
    background: rgba(45, 110, 196, .08);
  }

  .mnav__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  .mnav__center {
    flex-direction: row;
    width: auto;
    height: auto;
    padding: 9px 16px;
    border-radius: 999px;
    border: none;
    gap: 7px;
    box-shadow: 0 8px 18px -8px rgba(45, 110, 196, .5);
  }

  .mnav__center:hover {
    transform: translateY(-2px) scale(1.02);
  }

  .mnav__center i {
    font-size: 15px;
  }

  .mnav__center-label {
    display: block;
    font-size: 12px;
  }
}