/* Caminho: public_html/assets/css/cardapio.css
   Interface do cliente. Mobile first de verdade: tudo começa em uma coluna,
   com alvo de toque mínimo de 48px e a ação principal sempre ao alcance do polegar. */

/* ==================================================================
   CABEÇALHO
   ================================================================== */
.topo {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecalho);
  padding-top: var(--safe-cima);
  transition: box-shadow var(--d-media) var(--easing-suave),
              background var(--d-media) var(--easing-suave);
}

.topo.encolhido { box-shadow: var(--sombra-2); }

.topo-interno {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) 0;
}

/* As regras da marca vivem em base.css, que é carregado por todas as telas.
   Aqui ficam apenas os ajustes exclusivos do cabeçalho do cardápio. */
.topo-interno .marca-logo img { height: clamp(40px, 8vw, 56px); }

.acoes-topo { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }

.botao-icone {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--superficie);
  border: 1px solid var(--borda);
  transition: transform var(--d-rapida) var(--easing), background var(--d-rapida) var(--easing-suave);
}

.botao-icone:hover { transform: translateY(-2px); background: var(--superficie-forte); }
.botao-icone svg { width: 22px; height: 22px; }

/* ==================================================================
   HERO
   ================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding: var(--e-7) 0 var(--e-6);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 20% 0%, var(--hero-2) 0%, transparent 65%),
    radial-gradient(55% 45% at 85% 15%, var(--hero-3) 0%, transparent 60%),
    linear-gradient(180deg, var(--hero-1) 0%, var(--fundo) 78%);
  animation: respira 18s var(--easing-suave) infinite alternate;
}

@keyframes respira {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.08) translateY(-2%); }
}

/* Blob organico, desenhado em SVG inline no HTML */
.hero-blob {
  position: absolute;
  z-index: -1;
  inset: auto -18% -30% auto;
  width: min(70vw, 460px);
  opacity: 0.5;
  filter: blur(2px);
  animation: gira 40s linear infinite;
  pointer-events: none;
}

@keyframes gira {
  to { transform: rotate(360deg); }
}

.hero h1 {
  font-size: var(--t-3xl);
  margin-bottom: var(--e-3);
}

/* No celular a chamada não pode empurrar o botão principal para baixo da
   dobra. Aqui ela cede um pouco de tamanho para o cliente ver o título,
   a promessa e o botão sem precisar rolar. */
@media (max-width: 460px) {
  .hero h1 { font-size: clamp(1.95rem, 1.35rem + 3.4vw, 2.40rem); }
  .hero-texto { font-size: var(--t-md); }
}

.hero h1 .destaque {
  background: linear-gradient(100deg, var(--marca-forte), var(--acento));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-texto {
  color: var(--texto-2);
  max-width: var(--largura-texto);
  font-size: var(--t-lg);
  margin-bottom: var(--e-5);
}

.hero-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); }
.hero-chips .selo img, .hero-chips .status-loja img { width: 18px; height: 18px; }

.hero-acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Status aberto ou fechado */
.status-loja {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  border: 1px solid var(--borda);
  background: var(--superficie);
}

.status-loja.aberta { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.status-loja.fechada { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 45%, transparent); }

/* ==================================================================
   BUSCA E NAVEGAÇÃO DE CATEGORIAS
   ================================================================== */
/* As alturas do cabeçalho e da barra de categorias são medidas em tempo real
   pelo JavaScript e gravadas em --altura-topo e --altura-nav. Assim o título da
   categoria nunca fica escondido atrás da barra, em nenhum tamanho de tela. */
.barra-navegacao {
  position: sticky;
  top: var(--altura-topo, 86px);
  z-index: var(--z-sticky);
  padding: var(--e-2) 0;
  margin-bottom: var(--e-4);
}

.busca-caixa { position: relative; margin-bottom: var(--e-2); }

.busca-caixa svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--texto-3);
  pointer-events: none;
}

.busca-caixa .entrada { padding-left: 44px; border-radius: var(--r-pill); }

.abas-categorias { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.abas-categorias::-webkit-scrollbar { display: none; }

.aba {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem 0.5rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--superficie);
  border: 1px solid var(--borda);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  transition: all var(--d-rapida) var(--easing-suave);
}

.aba[aria-current="true"] {
  background: var(--marca);
  color: var(--marca-texto);
  border-color: transparent;
  box-shadow: var(--sombra-marca);
}

.aba img { width: 22px; height: 22px; flex: none; }

/* A aba sem ícone não pode ficar com o recuo sobrando do lado esquerdo */
.aba:not(:has(img)) { padding-left: 1.05rem; }

/* ==================================================================
   SEÇÕES E CARDS DE PRODUTO
   ================================================================== */
.secao-categoria {
  scroll-margin-top: calc(var(--altura-topo, 86px) + var(--altura-nav, 118px) + var(--e-3));
  margin-bottom: var(--e-7);
}

.cabecalho-secao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  flex-wrap: wrap;
}

.cabecalho-secao h2 { font-size: var(--t-xl); }
.cabecalho-secao p { color: var(--texto-3); font-size: var(--t-sm); flex: 1 1 220px; }

/* O ícone da categoria ganha uma placa arredondada com um leve brilho da marca */
.cabecalho-secao .icone-selo {
  background: linear-gradient(150deg, var(--marca-suave), var(--acento-suave));
  border-color: var(--borda-forte);
}

.secao-categoria:hover .cabecalho-secao .icone-selo { transform: rotate(-6deg) scale(1.06); }

.grade-produtos {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) { .grade-produtos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grade-produtos { grid-template-columns: repeat(3, 1fr); } }

/* Em tela larga, três colunas deixam cada card esticado demais e o
   restante da tela vazio. Quatro colunas mantêm o card na proporção
   que ele foi desenhado e enchem a página de cardápio, que é o que a
   pessoa veio ver. */
@media (min-width: 1400px) { .grade-produtos { grid-template-columns: repeat(4, 1fr); } }

.produto {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--r-lg);
  background: var(--superficie);
  border: 1px solid var(--borda);
  text-align: left;
  width: 100%;
  transition: transform var(--d-media) var(--easing),
              border-color var(--d-media) var(--easing-suave),
              box-shadow var(--d-media) var(--easing);
  overflow: hidden;
}

@media (hover: hover) {
  .produto:hover {
    transform: translateY(-4px);
    border-color: var(--borda-forte);
    box-shadow: var(--sombra-2);
  }
  .produto:hover .produto-foto img { transform: scale(1.07); }
}

.produto:active { transform: scale(0.99); }

.produto-info { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }

.produto-nome {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  font-size: var(--t-md);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.produto-desc {
  font-size: var(--t-sm);
  color: var(--texto-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.produto-preco { margin-top: auto; display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.produto-preco strong { font-size: var(--t-lg); font-family: var(--fonte-titulo); letter-spacing: -0.02em; }
.produto-preco .apartir { font-size: var(--t-xs); color: var(--texto-3); }
.produto-preco .antigo { font-size: var(--t-sm); color: var(--texto-3); text-decoration: line-through; }

.produto-foto {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--fundo-3);
  align-self: center;
}

.produto-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-lenta) var(--easing);
}

.produto-selos { position: absolute; top: var(--e-2); left: var(--e-2); display: flex; gap: 4px; flex-wrap: wrap; z-index: 2; }

.produto.esgotado { opacity: 0.5; pointer-events: none; }

.mais-btn {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--marca);
  color: var(--marca-texto);
  box-shadow: var(--sombra-marca);
  font-size: 1.15rem;
  line-height: 1;
  z-index: 2;
}

/* Vitrine horizontal dos destaques */
.vitrine { margin-bottom: var(--e-7); }

.destaque-card {
  position: relative;
  width: 240px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--borda);
  background: var(--fundo-2);
  text-align: left;
}

.destaque-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.destaque-card .corpo { padding: var(--e-3); }

/* ==================================================================
   MODAL DE PRODUTO E GAVETAS
   ================================================================== */
.sobreposicao {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: color-mix(in srgb, #000 62%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  align-items: end;
  animation: aparecer var(--d-media) var(--easing-suave);
}

@media (min-width: 760px) { .sobreposicao { align-items: center; justify-items: center; } }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.painel {
  width: 100%;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  background: var(--fundo-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border: 1px solid var(--borda);
  border-bottom: 0;
  overflow: hidden;
  animation: sobeGaveta var(--d-media) var(--easing);
}

@media (min-width: 760px) {
  .painel { max-width: 620px; border-radius: var(--r-xl); border-bottom: 1px solid var(--borda); }
}

@keyframes sobeGaveta {
  from { transform: translateY(26px); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

.painel-puxador {
  width: 46px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--borda-forte);
  margin: var(--e-2) auto 0;
  flex: none;
}

.painel-topo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borda);
  flex: none;
}

.painel-topo h2 { font-size: var(--t-lg); }
.painel-corpo { padding: var(--e-4); overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.painel-rodape {
  padding: var(--e-3) var(--e-4) calc(var(--e-4) + var(--safe-baixo));
  border-top: 1px solid var(--borda);
  background: var(--fundo-2);
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex: none;
}

.capa-produto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-md);
  margin-bottom: var(--e-4);
  background: var(--fundo-3);
}

.grupo-opcoes { margin-bottom: var(--e-5); }

.grupo-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
  position: sticky;
  top: -1px;
  background: var(--fundo-2);
  padding-block: var(--e-2);
  z-index: 2;
}

.grupo-cabecalho h3 { font-size: var(--t-md); }
.lista-opcoes { display: grid; gap: var(--e-2); }

/* Contador de quantidade */
.contador {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--borda);
  background: var(--fundo-3);
  flex: none;
}

.contador button {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  background: var(--superficie-forte);
  transition: background var(--d-rapida) var(--easing-suave), transform var(--d-rapida) var(--easing);
}

.contador button:hover { background: var(--marca); color: var(--marca-texto); }
.contador button:active { transform: scale(0.9); }
.contador span { min-width: 28px; text-align: center; font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }

/* ==================================================================
   CARRINHO
   ================================================================== */
.barra-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-barra);
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + var(--safe-baixo));
  transform: translateY(140%);
  transition: transform var(--d-media) var(--easing);
}

.barra-inferior.visivel { transform: none; }

.barra-conteudo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: min(100% , var(--largura-max));
  margin-inline: auto;
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  border-radius: var(--r-pill);
  background: var(--fundo-3);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-2);
}

.item-carrinho {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--borda);
}

.item-carrinho:last-of-type { border-bottom: 0; }
.item-carrinho .opcoes-resumo { font-size: var(--t-xs); color: var(--texto-3); }

/* Item que faltou continua na lista, riscado. Some da conta, não some da
   história: o cliente precisa reconhecer o que pediu e ver o que mudou. */
.item-carrinho.item-faltou { opacity: 0.65; }
.item-carrinho.item-faltou strong { text-decoration: line-through; }
.item-carrinho.item-faltou .selo { text-decoration: none; margin-left: var(--e-2); }

.totais { display: grid; gap: var(--e-2); padding-top: var(--e-3); border-top: 1px dashed var(--borda-forte); }
.totais .linha-entre span:first-child { color: var(--texto-2); }
.totais .total-final { font-size: var(--t-lg); font-weight: var(--peso-black); font-family: var(--fonte-titulo); }

.vazio {
  text-align: center;
  padding: var(--e-7) var(--e-4);
  color: var(--texto-3);
}

.vazio svg { width: 72px; height: 72px; margin: 0 auto var(--e-4); opacity: 0.35; }
.vazio img.icone-xl { margin: 0 auto var(--e-4); opacity: 0.9; }

/* Faixa de confiança do hero: três motivos para pedir aqui e não no marketplace */
.tres-motivos {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
  margin-top: var(--e-6);
}

@media (min-width: 620px) { .tres-motivos { grid-template-columns: repeat(3, 1fr); } }

.motivo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--r-md);
  background: var(--superficie);
  border: 1px solid var(--borda);
}

.motivo strong { display: block; font-size: var(--t-sm); }
.motivo span { font-size: var(--t-xs); color: var(--texto-3); }

/* ==================================================================
   CHECKOUT
   ================================================================== */
.passos { display: flex; gap: var(--e-2); margin-bottom: var(--e-4); }

.passo {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--borda);
  overflow: hidden;
}

.passo::after {
  content: "";
  display: block;
  height: 100%;
  width: 0;
  background: var(--marca);
  transition: width var(--d-lenta) var(--easing);
}

.passo.ativo::after, .passo.feito::after { width: 100%; }

.escolha-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); margin-bottom: var(--e-4); }

.escolha-entrega label {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: var(--e-3);
  text-align: center;
  border-radius: var(--r-md);
  border: 1px solid var(--borda);
  background: var(--fundo-2);
  cursor: pointer;
  transition: all var(--d-rapida) var(--easing-suave);
}

.escolha-entrega label:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.escolha-entrega input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-entrega img { margin-bottom: 4px; }
.escolha-entrega strong { font-size: var(--t-sm); }
.escolha-entrega small { color: var(--texto-3); font-size: var(--t-xs); }

/* Aviso de quando a loja esta trabalhando com uma forma só de atendimento */
.aviso-bloco {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3);
  margin-bottom: var(--e-4);
  border-radius: var(--r-md);
  border: 1px solid var(--marca);
  background: var(--marca-suave);
  line-height: 1.45;
}

.aviso-bloco small { color: var(--texto-2); font-size: var(--t-xs); }
.aviso-bloco img { flex: none; margin-top: 2px; }

/* Versão de atenção: usada quando algo do pedido mudou depois de feito,
   como um item que acabou na cozinha. Precisa parar o olho do cliente
   antes de ele conferir a lista, por isso a cor de alerta. */
.aviso-bloco-alerta {
  border-color: var(--alerta);
  background: color-mix(in srgb, var(--alerta) 12%, transparent);
  margin-top: var(--e-4);
}

.aviso-bloco-alerta strong { display: block; margin-bottom: 2px; }
.aviso-bloco-alerta span { display: block; font-size: var(--t-sm); color: var(--texto-2); }

/* ==================================================================
   SELETOR DE TEMA
   ================================================================== */
.temas-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
@media (min-width: 520px) { .temas-grade { grid-template-columns: repeat(3, 1fr); } }

.tema-card {
  border-radius: var(--r-md);
  border: 2px solid var(--borda);
  padding: var(--e-3);
  text-align: left;
  transition: transform var(--d-rapida) var(--easing), border-color var(--d-rapida) var(--easing-suave);
}

.tema-card:hover { transform: translateY(-3px); }
.tema-card[aria-current="true"] { border-color: var(--marca); box-shadow: var(--sombra-marca); }

.tema-amostra { display: flex; gap: 6px; margin-bottom: var(--e-2); }
.tema-amostra i { width: 26px; height: 26px; border-radius: 8px; display: block; border: 1px solid rgba(255,255,255,0.14); }
.tema-nome { font-size: var(--t-sm); font-weight: var(--peso-forte); }
.tema-desc { font-size: var(--t-xs); color: var(--texto-3); }

/* ==================================================================
   RODAPE
   ================================================================== */
.rodape {
  margin-top: var(--e-8);
  padding: var(--e-7) 0 calc(var(--e-9) + var(--safe-baixo));
  border-top: 1px solid var(--borda);
  background: var(--fundo-2);
}

.rodape-grade { display: grid; gap: var(--e-5); }
@media (min-width: 720px) { .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape h3 { font-size: var(--t-md); margin-bottom: var(--e-3); }
.rodape a:hover { color: var(--marca-forte); }
.rodape p, .rodape li { color: var(--texto-3); font-size: var(--t-sm); }
.rodape ul { list-style: none; padding: 0; display: grid; gap: var(--e-2); }

.assinatura {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borda);
  font-size: var(--t-xs);
  color: var(--texto-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: space-between;
}

/* ==================================================================
   BANNER LGPD
   ================================================================== */
.lgpd {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  bottom: calc(var(--e-3) + var(--safe-baixo));
  /* Abaixo do modal de proposito: o aviso nunca pode cobrir o botão
     de adicionar ao carrinho nem o de finalizar o pedido. */
  z-index: var(--z-barra);
  width: min(94vw, 520px);
  padding: var(--e-4);
  border-radius: var(--r-lg);
  transition: transform var(--d-lenta) var(--easing);
}

.lgpd.visivel { transform: translateX(-50%); }

/* Com itens no carrinho, a barra flutuante ocupa a base da tela.
   O aviso sobe para não cobrir o botão de ver o carrinho. */
body.com-carrinho .lgpd { bottom: calc(var(--e-3) + 86px + var(--safe-baixo)); }

/* Enquanto houver uma gaveta ou modal aberto, o aviso sai da frente. */
body.modal-aberto .lgpd,
body.modal-aberto .barra-inferior { transform: translateX(-50%) translateY(180%); }

body.modal-aberto .barra-inferior { transform: translateY(180%); }

/* ==================================================================
   ACOMPANHAMENTO DO PEDIDO
   ================================================================== */
.trilha { display: grid; gap: 0; margin: var(--e-5) 0; }

.trilha-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--e-3);
  padding-bottom: var(--e-5);
  position: relative;
}

.trilha-item::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--borda);
}

.trilha-item:last-child::before { display: none; }

.trilha-bola {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fundo-3);
  border: 2px solid var(--borda);
  font-size: var(--t-sm);
  z-index: 1;
}

.trilha-item.feito .trilha-bola { background: var(--ok); border-color: var(--ok); color: #05170e; }
.trilha-item.atual .trilha-bola { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); animation: pulsaBola 1.8s var(--easing-suave) infinite; }

@keyframes pulsaBola {
  0%, 100% { box-shadow: 0 0 0 0 var(--marca-suave); }
  50% { box-shadow: 0 0 0 12px transparent; }
}

.trilha-item h4 { font-size: var(--t-md); }
.trilha-item p { font-size: var(--t-sm); color: var(--texto-3); }

/* ==================================================================
   TÍTULO DE BLOCO COM ÍCONE
   Usado no checkout e nas gavetas, para dar ritmo visual à leitura.
   ================================================================== */
.titulo-bloco {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-md);
  margin-bottom: var(--e-3);
}

/* ==================================================================
   ACOMPANHAMENTO: ÍCONE DENTRO DA BOLA DA TRILHA
   ================================================================== */
.trilha-bola img { width: 20px; height: 20px; }
.trilha-item.feito .trilha-bola img,
.trilha-item.atual .trilha-bola img { filter: none; }
.trilha-item:not(.feito):not(.atual) .trilha-bola img { opacity: 0.45; filter: grayscale(1); }

/* ==================================================================
   RODAPÉ COM SELO ORIENTAL
   ================================================================== */
.rodape-selo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
  font-size: var(--t-xs);
  color: var(--texto-3);
}

.rodape-selo img { width: 26px; height: 26px; }