/* ============================================================
   NossoClã — Design System oficial
   Paleta, tipografia e componentes definidos pela Roberta.
   ============================================================ */

:root {
  /* Paleta oficial NossoClã */
  --background:    #F2EDE4;
  --foreground:    #73412F;
  --card:          #FFFFFF;
  --primary:       #BF7449;
  --primary-dark:  #9A5A34;
  --primary-light: #D4885A;
  --secondary:     #8FAFC4;
  --muted:         #EAE0D2;
  --muted-fg:      #8C7D30;
  --accent:        #D9C14A;
  --accent-fg:     #73412F;
  --success:       #5C8A4E;
  --success-bg:    #E8F3E6;
  --warning:       #D9A441;
  --warning-bg:    #FDF3DC;
  --danger:        #B3261E;
  --danger-bg:     #FCE8E6;
  --border:        rgba(115,65,47,0.15);
  --border-med:    rgba(115,65,47,0.28);
  --border-strong: rgba(115,65,47,0.40);
  --radius:        14px;

  /* Tipografia */
  --font-heading: 'Nunito', sans-serif;
  --font-body:    'Lora', serif;
  --font-mono:    'DM Mono', monospace;

  /* Texturas SVG inline */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='granite'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23granite)' opacity='0.15'/%3E%3C/svg%3E");
  --wood:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6'%3E%3Cline x1='0' y1='2' x2='120' y2='1.5' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Cline x1='0' y1='4.5' x2='120' y2='5' stroke='rgba(0,0,0,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  --stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='none'/%3E%3Cpath d='M0 4h8M4 0v8' stroke='rgba(115,65,47,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  --parchment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='4' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0.3 0 0 0 0.4  0 0.2 0 0 0.3  0 0 0.1 0 0.2  0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23paper)'/%3E%3C/svg%3E");

  /* Compatibilidade com telas antigas (pré-design system) */
  --cor-borda: var(--border-med);
  --raio-borda: var(--radius);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: #39190D;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}


h1, h2, h3, h4, h5, .label, .section-title, button, .nav, .status-badge {
  font-family: var(--font-heading);
}

h3{
 color: var(--primary);
}

.xp, .saldo, .nivel, .data, .moeda, [class*="valor"] {
  font-family: var(--font-mono);
}

a {
    color: var(--muted);
    text-decoration: none
}

a:hover{
    color: var(--accent);
}

/* ------------------------------------------------------------
   Layout estrutural (cabeçalho, conteúdo, login) — classes
   já usadas nas telas atuais, adaptadas aos novos tokens.
   ------------------------------------------------------------ */
.cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-image: var(--wood), linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
    background-blend-mode: overlay, normal;
    color: white;
}

.cabecalho h1 { margin: 0; font-size: 1.3rem; font-family: var(--font-heading); font-weight: 800; }

.usuario-info { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; font-family: var(--font-heading); }

.link-sair { color: white; text-decoration: underline; }

.conteudo { max-width: 640px; margin: 0 auto; padding: 20px 16px 60px; }

.tela-login {
    max-width: 360px;
    margin: 60px auto;
    padding: 32px 24px;
    background-image: var(--grain), var(--card);
    background-blend-mode: multiply, normal;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-align: center;
    box-shadow: 0 4px 16px rgba(115,65,47,0.10), 0 1px 4px rgba(115,65,47,0.06);
	background-color: #f2eee5;
}

.tela-login img {
    max-width: 100%;
	  mix-blend-mode: darken;
}

.tela-login h1 { margin-bottom: 4px; font-family: var(--font-heading); }

.subtitulo { color: var(--muted-fg); margin-top: 0; margin-bottom: 24px; font-family: var(--font-body); }

.formulario-login { display: flex; flex-direction: column; gap: 6px; text-align: left; }

.formulario-login label { font-size: 0.85rem; margin-top: 10px; font-family: var(--font-heading); color: var(--muted-fg); }

.mensagem-erro {
    color: var(--danger);
    background: var(--danger-bg);
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: var(--font-body);
}

/* ------------------------------------------------------------
   Botões
   ------------------------------------------------------------ */
.botao-primario, .botao-madeira {
  background-image: var(--wood),
    linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 45%, var(--primary-dark) 100%);
  background-blend-mode: overlay, normal;
  color: white;
  border: 1px solid var(--primary-dark);
  border-radius: 12px;
  padding: 13px 20px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--primary-dark),
              0 5px 12px rgba(115,65,47,0.3),
              inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: transform 0.1s, box-shadow 0.1s;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.botao-primario:active, .botao-madeira:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--primary-dark), 0 3px 6px rgba(115,65,47,0.2);
}

.botao-secundario, .botao-pedra {
  background-image: var(--stone),
    linear-gradient(180deg, #EAE0D4 0%, var(--muted) 50%, #D8CCB8 100%);
  background-blend-mode: overlay, normal;
  color: var(--foreground);
  border: 1px solid var(--border-med);
  border-radius: 12px;
  padding: 12px 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border-strong),
              0 4px 10px rgba(115,65,47,0.15),
              inset 0 1px 0 rgba(255,255,255,0.7);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.botao-ouro {
  background-image: var(--wood),
    linear-gradient(180deg, #EDD55A 0%, var(--accent) 50%, var(--warning) 100%);
  background-blend-mode: overlay, normal;
  color: var(--accent-fg);
  border: 1px solid rgba(140,125,48,0.6);
  border-radius: 12px;
  padding: 12px 20px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(140,125,48,0.6),
              0 4px 12px rgba(217,193,74,0.3),
              inset 0 1px 0 rgba(255,255,255,0.4);
}

.botao-sucesso {
  background-image: var(--wood),
    linear-gradient(180deg, #74A860 0%, var(--success) 50%, #4A7040 100%);
  background-blend-mode: overlay, normal;
  color: white;
  border: 1px solid #3A5830;
  border-radius: 12px;
  padding: 12px 20px;
  font-family: var(--font-heading);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 0 #3A5830,
              0 4px 12px rgba(92,138,78,0.3),
              inset 0 1px 0 rgba(255,255,255,0.2);
}

.botao-perigo {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid rgba(179,38,30,0.5);
  border-radius: 10px;
  padding: 9px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.botao-primario--desabilitado, .botao-primario:disabled {
  background-image: var(--stone), var(--muted);
  background-blend-mode: overlay, normal;
  color: var(--muted-fg);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
  cursor: not-allowed;
  opacity: 0.75;
}

/* ------------------------------------------------------------
   Cards
   ------------------------------------------------------------ */
.card, .card-missao, .card-membro, .card-recompensa,
.card-historico, .card-reconhecimento, .card-entrega,
.cartao-personagem {
  background-image: var(--grain), #FFFFFF;
  background-color: var(--card);
  background-blend-mode: multiply, normal;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(115,65,47,0.10),
              0 1px 4px rgba(115,65,47,0.06),
              inset 0 1px 0 rgba(255,255,255,0.8);
}

.cartao-personagem { padding: 20px; margin-bottom: 20px; }
.cartao-personagem h2 { margin: 0 0 10px; font-family: var(--font-heading); }

/* Card do monstro: tom de alerta, destacado dos outros cards */
.cartao-monstro {
  background-image: none;
  background-color: #2A1810;
  border: 2px solid #8C2F2F;
  box-shadow: 0 0 0 1px rgba(140,47,47,0.3),
              0 4px 20px rgba(140,47,47,0.35),
              inset 0 1px 0 rgba(255,255,255,0.05);
  color: #F2EDE4;
  position: relative;
  overflow: hidden;
}

/* Faixa de alerta na lateral esquerda, tipo "invasão" */
.cartao-monstro::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #BF7449, #8C2F2F);
}

.cartao-monstro h2 {
  color: #F2EDE4;
}

.cartao-monstro p {
  color: #D9C4B0;
}

/* Barra: estrutura igual, cor diferente */
.cartao-monstro .barra-xp {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(140,47,47,0.4);
}

.cartao-monstro .barra-xp-preenchida {
  background-image: none;
  box-shadow: 0 0 8px rgba(191,47,47,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Cores por faixa de HP */
.cartao-monstro .barra-xp-preenchida.hp-alta   { background-color: #6B8F3E; } /* verde */
.cartao-monstro .barra-xp-preenchida.hp-media  { background-color: #D98F2A; } /* laranja */
.cartao-monstro .barra-xp-preenchida.hp-baixa  { 
  background-color: #BF3131; 
  animation: pulsar-perigo 1.2s ease-in-out infinite;
}

@keyframes pulsar-perigo {
  0%, 100% { box-shadow: 0 0 8px rgba(191,49,49,0.5); }
  50%      { box-shadow: 0 0 16px rgba(191,49,49,0.9); }
}

.card-missao {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    border-left: 4px solid var(--primary);
}
.card-missao--recognized { border-left-color: var(--success); }
.card-missao--pending_recognition { border-left-color: var(--warning); }
.card-missao--request_reconfirmation { border-left-color: var(--danger); }
.card-missao--available { border-left-color: var(--primary); }
.card-missao--cla { border-left: 4px solid var(--secondary); }

.card-missao--recognized {
  filter: grayscale(0.7) brightness(0.7);
  }

.card-missao--recognized {
    position: relative; /* garante o relative mesmo se a classe vier isolada */
    opacity: 0.75;
    
}
.card-missao--recognized .card-missao-info {
text-decoration: line-through;
}

span.status-badge.status-badge--sucesso {
background: #5C8A4E; text-decoration: none!important; 
padding: 10px; border-radius: 10px; color: #fff;
}


.card-missao__state-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.card-missao__state-icon--available  { background: #F5E8DC; border: 1.5px solid rgba(191,116,73,0.25); }
.card-missao__state-icon--cla        { background: #DFF0FA; border: 1.5px solid rgba(143,175,196,0.25); }
.card-missao__state-icon--pending    { background: var(--warning-bg); border: 1.5px solid rgba(217,164,65,0.25); }
.card-missao__state-icon--recognized { background: var(--success-bg); border: 1.5px solid rgba(92,138,78,0.25); }
.card-missao__state-icon--reconfirm  { background: var(--danger-bg);  border: 1.5px solid rgba(179,38,30,0.25); }

.card-missao__state-label {
  font-family: var(--font-heading);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 999px; padding: 2px 7px;
  border: 1px solid transparent;
}

.card-missao-info strong { display: block; margin-bottom: 2px; font-family: var(--font-heading); color: var(--foreground); }
.card-missao-info p { margin: 2px 0; font-size: 0.85rem; color: var(--muted-fg); font-family: var(--font-body); }
.recompensa { font-size: 0.8rem; color: var(--primary-dark); font-weight: 600; font-family: var(--font-mono); }

.status-badge { font-size: 0.85rem; white-space: nowrap; font-family: var(--font-heading); }
.status-badge--sucesso { color: var(--success); }
.status-badge--atencao { color: var(--danger); }

.empty-state { text-align: center; color: var(--muted-fg); padding: 40px 0; font-family: var(--font-body); }

.acoes-reconhecimento { display: flex; flex-direction: column; gap: 8px; }
.form-reconfirmacao { display: flex; gap: 6px; }

/* ------------------------------------------------------------
   Componentes novos por tela
   ------------------------------------------------------------ */

/* Home — abas de missões */
.tabs-missoes__nav {
  display: flex;
  background-image: var(--stone), var(--muted);
  background-blend-mode: overlay, normal;
  border-radius: 14px; padding: 4px; gap: 4px;
  border: 1px solid var(--border);
  box-shadow: inset 0 2px 4px rgba(115,65,47,0.08);
}
.tabs-missoes__btn {
  flex: 1; border: none; border-radius: 10px; padding: 10px 8px;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  cursor: pointer; background: transparent; color: var(--primary);
}
.tabs-missoes__btn--ativo {
  background-image: var(--wood), linear-gradient(180deg, var(--primary-light), var(--primary));
  background-blend-mode: overlay, normal;
  color: white;
  box-shadow: 0 2px 0 var(--primary-dark),
              0 3px 8px rgba(191,116,73,0.25),
              inset 0 1px 0 rgba(255,255,255,0.15);
}

.guardiao_menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colunas de tamanhos idênticos */
  gap: 12px;
  margin-bottom: 20px;
  max-width: 600px; /* Limita a largura total para não esticar demais em telas grandes */
  margin-left: auto;
  margin-right: auto;
}

/* Meu Clã */
.card-membro { overflow: hidden; }
.card-membro__faixa {
  background-image: var(--stone), var(--muted);
  background-blend-mode: multiply, normal;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.card-membro__saldos { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; }
.badge-guardiao {
  background-image: var(--wood), linear-gradient(135deg, var(--accent), var(--warning));
  background-blend-mode: overlay, normal;
  color: var(--accent-fg);
  font-family: var(--font-heading); font-size: 10px; font-weight: 900;
  border-radius: 999px; padding: 3px 12px;
  border: 1px solid rgba(217,193,74,0.4);
  box-shadow: 0 2px 8px rgba(217,193,74,0.3);
}

/* Mercado */
.lista-recompensas { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
  gap: 12px;
}

.card-recompensa{
  background-image: var(--grain);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  gap: 8px;
  padding: 16px 12px;
  border-left: none;
  border-bottom: 4px solid var(--accent);
  margin-bottom: 0;  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}




.card-recompensa__custo { font-family: var(--font-mono); font-size: 12px; color: var(--primary); }
.secao-sugestoes-recusadas { margin-top: 8px; }
.card-sugestao-recusada {
  background-image: var(--grain), var(--danger-bg);
  background-blend-mode: multiply, normal;
}
.form-sugestao { display: flex; flex-direction: column; gap: 7px; }

.pergaminho-sugestao {
  background-image: 
  var(--parchment), 
  radial-gradient(circle, transparent 60%, rgba(115, 65, 47, 0.08) 100%);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(115, 65, 47, 0.08);
  padding: 10px 20px 30px 20px;
}

/* Histórico */
.lista-historico { display: flex; flex-direction: column; gap: 8px; }
.card-historico__data { font-family: var(--font-mono); font-size: 10px; color: var(--muted-fg); }
.card-historico__status {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 4px 10px;
}
.card-historico__status--entregue  { color: var(--success); background: var(--success-bg); }
.card-historico__status--aguardando { color: var(--warning); background: var(--warning-bg); }

/* Reconhecimento */
.lista-reconhecimento { display: flex; flex-direction: column; gap: 12px; }
.card-reconhecimento { border-radius: var(--radius); overflow: hidden; }
.card-reconhecimento__aventureiro {
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-fg);
}

/* Guardião do Mercado */
.bloco-entregas, .bloco-sugestoes, .bloco-recompensas-ativas { margin-bottom: 20px; }
.bloco-titulo-contador { display: flex; align-items: center; gap: 8px; }
.card-entrega, .card-sugestao-pendente, .card-recompensa-ativa { margin-bottom: 8px; }
.form-aceitar-sugestao, .form-nova-recompensa { display: flex; flex-direction: column; gap: 7px; }

/* Perfil */
.seletor-classe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seletor-titulo { display: flex; flex-direction: column; gap: 6px; }
.conquista-card {
background-color: var(--card);
  background-image: var(--grain);
  background-blend-mode: multiply, normal;
    border-radius: var(--radius); padding: 14px 12px; text-align: center;
  }

.conquista-card--bloqueada { opacity: 0.5; filter: grayscale(30%); }
.conquista-icone { font-size: 26px; margin-bottom: 5px; }
.conquista-recompensa { font-family: var(--font-mono); font-size: 11px; color: var(--primary); }


       .grade-conquistas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .item-classe {
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            padding: 16px 8px; border-radius: var(--radius);
            border: 1.5px solid var(--border); background: var(--card);
            cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem;
            color: var(--foreground);
        }
        .item-classe--selecionada {
            background-image: var(--wood), linear-gradient(180deg, var(--accent), var(--warning));
            background-blend-mode: overlay, normal;
            border-color: rgba(140,125,48,0.6);
            box-shadow: 0 3px 0 rgba(140,125,48,0.6), 0 4px 12px rgba(217,193,74,0.3);
        }
        .item-classe__icone { font-size: 26px; }
        .item-titulo {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 16px; border-radius: var(--radius);
            border: 1.5px solid var(--border); background: var(--card);
            font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem;
        }
        .item-titulo--ativo {
            background-image: var(--wood), linear-gradient(180deg, var(--accent), var(--warning));
            background-blend-mode: overlay, normal;
            border-color: rgba(140,125,48,0.6);
        }
        .item-titulo__nivel { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-fg); }

/* ------------------------------------------------------------
   Formulários / inputs
   ------------------------------------------------------------ */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], textarea, select {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  background-image: var(--grain), var(--muted);
  background-blend-mode: multiply, normal;
  color: var(--foreground);
  box-shadow: inset 0 2px 4px rgba(115,65,47,0.08);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: inset 0 2px 4px rgba(115,65,47,0.08),
              0 0 0 3px rgba(191,116,73,0.15);
}

.formulario-login input { width: 100%; }

/* ------------------------------------------------------------
   Barra de XP e saldos
   ------------------------------------------------------------ */
.barra-xp {
  background: rgba(0,0,0,0.12);
  border-radius: 999px; height: 11px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
}
.barra-xp-preenchida {
  height: 100%;
  background-image: var(--wood),
    linear-gradient(90deg, var(--warning) 0%, var(--accent) 60%, #F0D860 100%);
  background-blend-mode: overlay, normal;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(217,193,74,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: width 0.6s ease;
}

.xp-detalhe { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted-fg); margin: 6px 0 14px; }

.saldos { display: flex; gap: 16px; }
.saldo { font-weight: 600; font-size: 0.95rem; font-family: var(--font-mono); }
.saldo-po { color: var(--primary-dark); }
.saldo-moeda { color: var(--warning); }

/* ------------------------------------------------------------
   Formulários de gestão (Nova/Editar Missão)
   ------------------------------------------------------------ */
.campo { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.campo label { font-size:0.8rem; color: var(--muted-fg); font-family: var(--font-heading); }
.campo input, .campo select, .campo textarea {
    padding:9px 10px; border:1px solid var(--border); border-radius:8px; font-family:inherit; font-size:0.9rem;
}
.linha-campos { display:flex; gap:10px; flex-wrap:wrap; }
.linha-campos .campo { flex:1; min-width:140px; }

/* ------------------------------------------------------------
   Menu inferior fixo (Aventura / Mercado / Clã / Perfil)
   ------------------------------------------------------------ */
body { padding-bottom: 78px; }

.nav-inferior {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background-image: var(--wood), linear-gradient(180deg, var(--primary-dark) 0%, #7C4A2C 100%);
  background-blend-mode: overlay, normal;
  border-top: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
}

.nav-inferior__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  text-decoration: none;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-heading);
}

.nav-inferior__icone { font-size: 20px; line-height: 1; filter: grayscale(60%); opacity: 0.8; }
.nav-inferior__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

.nav-inferior__item--ativo { color: var(--accent); }
.nav-inferior__item--ativo .nav-inferior__icone { filter: none; opacity: 1; }