/* ===== TOKENS (mesma paleta) ===== */
:root{
  --surface:#ffffff;
  --ink:#0b0d13;
  --muted:#667085;
  --primary:#3f2b5a;
  --border:rgba(10,13,18,.08);
}

/* ===== RODAPÉ ===== */
.footer{
  margin-top:40px; background:var(--surface);
  border-top:1px solid var(--border); color:var(--muted);
}
.footer .wrap{
  max-width:1200px; margin:0 auto; padding:28px 20px;
}
.footer .row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px;
}
.footer .col{
  display:flex; flex-direction:column; gap:10px; min-width:240px;
}

/* Título e links */
.footer h4{
  margin:0 0 6px; font-size:14px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--ink);
}
.footer a{
  color:var(--primary); text-decoration:none; font-weight:600;
}
.footer a:hover{ text-decoration:underline }

/* Linha final */
.footer .legal{
  margin-top:16px; padding-top:16px; border-top:1px dashed var(--border);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  font-size:14px;
}
.footer .brand-mini{
  display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800;
}
.footer .brand-mini b{ color:var(--primary) }

/* Mobile */
@media (max-width:760px){
  .footer .row{ gap:24px }
}

/* --- CORREÇÃO DO MENU FIXO MOBILE (Botão Cortado) --- */
@media (max-width: 768px) {
    
    /* 1. Aumenta a altura da barra e permite que elementos saiam dela */
    .bottom-nav, .mobile-bottom-nav, footer.mobile-fixo { 
        height: 75px !important;       /* Aumenta a altura */
        overflow: visible !important;  /* O SEGREDO: Deixa o botão "vazar" pra cima sem cortar */
        padding-bottom: 5px !important;
        align-items: flex-end !important; /* Alinha os itens por baixo */
    }

    /* 2. Ajusta o botão Redondo Roxo (Item Ativo) */
    .mobile-nav-item.active .icon-container,
    .mobile-nav-item.active i,
    .bottom-nav-item.active .icon {
        transform: translateY(-22px) !important; /* Faz ele subir */
        border: 4px solid #fff; /* Cria uma borda branca para destacar do fundo */
        box-shadow: 0 -5px 10px rgba(0,0,0,0.1); /* Sombra suave */
        margin-bottom: 0 !important;
    }

    /* 3. Arruma o Texto "Minha Conta" */
    .mobile-nav-item span, 
    .mobile-nav-item .label,
    .bottom-nav-item span {
        font-size: 10px !important; /* Tamanho seguro */
        line-height: 1.2 !important;
        white-space: nowrap !important; /* Impede que o texto quebre linha */
        width: auto !important; /* Deixa o texto ocupar o espaço que precisa */
        overflow: visible !important; /* Mostra tudo */
    }

    /* Ajuste fino para o texto do item ativo (que subiu) */
    .mobile-nav-item.active span,
    .mobile-nav-item.active .label {
        position: relative;
        bottom: 8px; /* Sobe um pouquinho o texto para ficar perto da bolinha */
        font-weight: bold;
        color: #800080;
    }
}