/* =========================================================================
   CAFÉ COM PIZZA — COMPONENTES BASE
   Etapa 2 do redesign (ver PLANO-LAYOUT.md). Depende de css/tokens.css.

   Portados de C:\CLIENTES\RASTREIO\apps\web\src\components\ui — as medidas
   são as das classes Tailwind de lá, convertidas:

     h-8/h-10/h-12   →  32 / 40 / 48px
     px-3/px-4/px-6  →  12 / 16 / 24px
     text-xs/sm/base →  12 / 14 / 16px
     p-5             →  20px
     rounded-lg      →  12px   (o config deles redefine lg/md/sm…)
     rounded-xl      →  12px   (…mas xl e 2xl ficam no padrão do Tailwind)
     rounded-2xl     →  16px

   Duas trocas conscientes:
   · o contorno de campo usa `--control` (3,46:1) e não `--input` (1,31:1)
   · onde eles usam `<button role="checkbox">` em React, aqui a caixa é um
     input nativo escondido com um quadrado desenhado ao lado — mesma
     aparência, mas continua sendo um campo de formulário de verdade
   ========================================================================= */

/* =========================================================================
   0. ÍCONES — Lucide, o mesmo conjunto do RASTREIO (ver js/icones.js)
   ========================================================================= */
.icone { display: inline-block; vertical-align: -0.18em; flex: none; }
.btn .icone, .badge .icone, .aviso .icone,
.toast .icone, .campo__marca .icone { vertical-align: 0; }

/* =========================================================================
   1. BOTÃO

   A primária carrega o gradiente 135° — é a régua de calor do sistema:
   quanto mais perto do forno, mais gradiente. As demais são chapadas.
   O hover deles é `opacity-90` na primária e `bg-muted/70` na secundária.
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);

  height: 40px;                    /* h-10 */
  padding-inline: var(--e-4);      /* px-4 */
  border: 0;
  border-radius: var(--radius-lg);

  font-family: var(--fonte);
  font-size: var(--txt-md);        /* text-sm */
  font-weight: var(--peso-medio);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;

  transition: background-color var(--t-rapido) var(--ease),
              opacity var(--t-rapido) var(--ease),
              color var(--t-rapido) var(--ease);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--cor-fundo), 0 0 0 4px var(--cor-anel);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: .5;
}

/* ---- variantes ---- */
.btn--primaria {
  background: var(--gradiente-primaria);
  color: var(--cor-primaria-texto);
}
.btn--primaria:hover { opacity: .9; }

.btn--secundaria {
  background: var(--cor-suave);
  color: var(--cor-texto);
}
.btn--secundaria:hover { background: hsl(var(--muted) / .7); }

.btn--fantasma {
  background: transparent;
  color: var(--cor-texto);
}
.btn--fantasma:hover { background: var(--cor-suave); }

.btn--perigo {
  background: var(--cor-perigo);
  color: var(--cor-perigo-texto);
}
.btn--perigo:hover { opacity: .9; }

/* Contorno não existe no RASTREIO; entra aqui porque a pizzaria tem ações
   de mesmo peso lado a lado ("Ver cardápio" ao lado de "Reservar mesa"),
   e duas fantasmas juntas somem. */
.btn--contorno {
  background: transparent;
  color: var(--cor-texto);
  border: 1px solid var(--cor-controle);
}
.btn--contorno:hover { background: var(--cor-suave); }

/* WhatsApp mantém a cor da marca dele — é reconhecimento, não decoração */
.btn--whats { background: var(--cor-whatsapp); color: var(--cor-whatsapp-texto); }
.btn--whats:hover { opacity: .9; }

/* ---- tamanhos ---- */
.btn--sm { height: 32px; padding-inline: var(--e-3); font-size: var(--txt-md); }
.btn--lg { height: 48px; padding-inline: var(--e-6); font-size: var(--txt-base); }

.btn--bloco { display: flex; width: 100%; }
.btn--icone { width: 40px; padding-inline: 0; }
.btn--icone.btn--sm { width: 32px; }
.btn--icone.btn--lg { width: 48px; }

/* =========================================================================
   2. CAMPO
   ========================================================================= */
.campo { display: grid; gap: 6px; }
.campo + .campo { margin-top: var(--e-4); }

.campo__rotulo {
  font-size: var(--txt-md);
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
}
.campo__dica { font-size: var(--txt-sm); color: var(--cor-suave-texto); line-height: var(--lh-normal); }
.campo__erro { font-size: var(--txt-sm); font-weight: var(--peso-medio); color: var(--cor-perigo); }

.input, .textarea {
  width: 100%;
  height: 40px;                    /* h-10 */
  padding-inline: var(--e-3);      /* px-3 */
  border: 1px solid var(--cor-controle);
  border-radius: var(--radius-lg);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: var(--txt-md);
  outline: none;
  transition: border-color var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease);
}
.textarea { height: auto; min-height: 92px; padding-block: 10px; resize: vertical; line-height: var(--lh-normal); }

.input::placeholder, .textarea::placeholder { color: var(--cor-suave-texto); }

.input:focus-visible, .textarea:focus-visible {
  box-shadow: 0 0 0 2px var(--cor-anel);
  border-color: var(--cor-anel);
}
.input:disabled, .textarea:disabled { cursor: not-allowed; opacity: .5; }

/* Só acusa erro DEPOIS de a pessoa mexer — nunca já ao abrir a tela */
.input:user-invalid, .textarea:user-invalid { border-color: var(--cor-perigo); }

/* Campo com ícone à esquerda (busca) */
.campo--icone { position: relative; }
.campo--icone .input { padding-left: 38px; }
.campo--icone > .icone {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--cor-suave-texto); pointer-events: none;
}

/* =========================================================================
   3. CAIXA DE SELEÇÃO E ESCOLHA ÚNICA

   No RASTREIO é um <button role="checkbox">. Aqui o input nativo continua
   existindo, escondido, e o quadrado é desenhado ao lado — assim o campo
   entra em <form>, participa de validação e funciona sem JavaScript.
   ========================================================================= */
.marcar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  cursor: pointer;
}
.marcar input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.marcar__caixa {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;       /* h-5 w-5 */
  flex: none;
  border: 1px solid var(--cor-controle);
  border-radius: var(--radius-md); /* rounded-md */
  background: var(--cor-fundo);
  color: var(--cor-primaria-texto);
  transition: background-color var(--t-rapido) var(--ease),
              border-color var(--t-rapido) var(--ease);
}
.marcar__caixa .icone { width: 14px; height: 14px; opacity: 0; transition: opacity var(--t-rapido) var(--ease); }

.marcar input:checked + .marcar__caixa {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
}
.marcar input:checked + .marcar__caixa .icone { opacity: 1; }
.marcar input:focus-visible + .marcar__caixa {
  box-shadow: 0 0 0 1px var(--cor-fundo), 0 0 0 3px var(--cor-anel);
}
.marcar input:disabled + .marcar__caixa { opacity: .5; }
.marcar:has(input:disabled) { cursor: not-allowed; }

/* escolha única: mesma caixa, redonda, com um miolo em vez de ícone */
.marcar--radio .marcar__caixa { border-radius: var(--radius-full); }
.marcar--radio .marcar__caixa::after {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cor-primaria-texto);
  transform: scale(0);
  transition: transform var(--t-rapido) var(--ease-saida);
}
.marcar--radio input:checked + .marcar__caixa::after { transform: scale(1); }

.marcar__texto { font-size: var(--txt-md); color: var(--cor-texto); }

/* Escolha em cartão — usada na montagem da pizza (tamanho, borda, massa) */
.opcao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  background: var(--cor-card);
  cursor: pointer;
  transition: border-color var(--t-rapido) var(--ease), background-color var(--t-rapido) var(--ease);
}
.opcao:hover { border-color: var(--cor-controle); }
.opcao:has(input:checked) {
  border-color: var(--cor-primaria);
  background: hsl(var(--primary) / .07);
}
.opcao:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--cor-anel); }

/* O input fica escondido aqui também — quem desenha é a marca ao lado */
.opcao input[type="radio"],
.opcao input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* Dentro do cartão a marca é sempre redonda e ganha miolo ao marcar. Sem
   isto, o cartão fica destacado mas o círculo continua vazio — o estado
   aparecia no contorno e não no controle. */
.opcao .marcar__caixa { border-radius: var(--radius-full); }
.opcao .marcar__caixa::after {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cor-primaria-texto);
  transform: scale(0);
  transition: transform var(--t-rapido) var(--ease-saida);
}
.opcao:has(input:checked) .marcar__caixa {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
}
.opcao:has(input:checked) .marcar__caixa::after { transform: scale(1); }

/* Quando a escolha for múltipla, a marca volta a ser quadrada com o ícone */
.opcao--multipla .marcar__caixa { border-radius: var(--radius-md); }
.opcao--multipla .marcar__caixa::after { display: none; }
.opcao__texto { flex: 1; min-width: 0; }
.opcao__nome { font-size: var(--txt-md); font-weight: var(--peso-medio); color: var(--cor-texto); }
.opcao__sub  { font-size: var(--txt-sm); color: var(--cor-suave-texto); }
.opcao__preco {
  font-size: var(--txt-md); font-weight: var(--peso-semi);
  color: var(--cor-texto); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* =========================================================================
   4. CARTÃO
   ========================================================================= */
.card {
  background: var(--cor-card);
  color: var(--cor-card-texto);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-xl);   /* rounded-2xl = 16px */
  box-shadow: var(--shadow-sm);
}
.card__cab { padding: var(--e-5) var(--e-5) 0; }   /* p-5 pb-0 */
.card__corpo { padding: var(--e-5); }              /* p-5 */

/* =========================================================================
   5. ETIQUETA
   Fundo é a própria cor a 10%, texto é a cor cheia — como no RASTREIO.
   Funciona nos dois temas porque as duas pontas vêm do mesmo token.
   ========================================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;               /* py-0.5 px-2.5 */
  border-radius: var(--radius-full);
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.badge__ponto { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; }

.badge--primaria { background: hsl(var(--primary) / .1); color: var(--cor-primaria); }
.badge--sucesso  { background: hsl(var(--success) / .1); color: var(--cor-sucesso); }
.badge--atencao  { background: hsl(var(--warning) / .1); color: var(--cor-atencao); }
.badge--perigo   { background: hsl(var(--danger)  / .1); color: var(--cor-perigo); }
.badge--suave    { background: var(--cor-suave);         color: var(--cor-suave-texto); }
/* a mostarda entra cheia: é selo de destaque, não estado */
.badge--casa     { background: var(--cor-acento);        color: var(--cor-acento-texto); font-weight: var(--peso-semi); }

/* =========================================================================
   6. AVISO
   Não existe no RASTREIO; segue a mesma gramática da etiqueta — cor a 10%
   no fundo, cor cheia no texto e na borda a 40%.
   ========================================================================= */
.aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid;
  border-radius: var(--radius-xl);
  font-size: var(--txt-md);
  line-height: 1.45;
}
.aviso + .aviso { margin-top: var(--e-2); }
.aviso p, .aviso .aviso__txt { margin: 0; }
.aviso .aviso__txt { flex: 1; }
.aviso b { font-weight: var(--peso-semi); }

/* selo do ícone: círculo tingido com o ícone da cor da variante */
.aviso__ico {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
}
.aviso__ico .icone { width: 19px; height: 19px; }
.aviso > .icone { flex: none; width: 20px; height: 20px; }   /* fallback: ícone solto */

.aviso--info    { background: hsl(var(--primary) / .08); border-color: hsl(var(--primary) / .28); }
.aviso--info    .aviso__ico { background: hsl(var(--primary) / .16); color: var(--cor-primaria-tipo); }
.aviso--info    > .icone { color: var(--cor-primaria-tipo); }
.aviso--sucesso { background: hsl(var(--success) / .1);  border-color: hsl(var(--success) / .3); }
.aviso--sucesso .aviso__ico { background: hsl(var(--success) / .16); color: var(--cor-sucesso); }
.aviso--sucesso > .icone { color: var(--cor-sucesso); }
.aviso--atencao { background: hsl(var(--warning) / .1);  border-color: hsl(var(--warning) / .3); }
.aviso--atencao .aviso__ico { background: hsl(var(--warning) / .18); color: var(--cor-atencao); }
.aviso--atencao > .icone { color: var(--cor-atencao); }
.aviso--perigo  { background: hsl(var(--danger)  / .08); border-color: hsl(var(--danger) / .35); }
.aviso--perigo  .aviso__ico { background: hsl(var(--danger) / .14); color: var(--cor-perigo); }
.aviso--perigo  > .icone { color: var(--cor-perigo); }
.aviso { color: var(--cor-texto); }

/* =========================================================================
   7. TOAST
   Posição, raio e sombra do RASTREIO: fixo embaixo, centralizado, acima da
   barra do celular, com aria-live para o leitor de tela anunciar sem roubar
   o foco.
   ========================================================================= */
.toasts {
  position: fixed;
  inset-inline: 0;
  bottom: calc(env(safe-area-inset-bottom) + 4.5rem);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding-inline: var(--e-4);
  pointer-events: none;
}
@media (min-width: 768px) { .toasts { bottom: var(--e-6); } }

.toast {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  max-width: 100%;
  padding: 10px var(--e-4);          /* py-2.5 px-4 */
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);   /* rounded-xl = 12px */
  background: var(--cor-card);
  color: var(--cor-texto);
  font-size: var(--txt-md);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-entra var(--t-medio) var(--ease-saida);
}
.toast .icone { color: var(--cor-primaria); }
.toast--erro { border-color: hsl(var(--danger) / .4); color: var(--cor-perigo); }
.toast--erro .icone { color: var(--cor-perigo); }
.toast--saindo { animation: toast-sai var(--t-medio) var(--ease) forwards; }

@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-sai   { to   { opacity: 0; transform: translateY(8px); } }

/* =========================================================================
   8. DROPDOWN

   Porte do `Select` de C:\CLIENTES\RASTREIO\...\components\ui\select.tsx.
   Existe pela regra que eles escreveram no próprio CSS: "nada de UI nativa
   crua". O <select> do sistema ignora token, tema e raio — o painel é
   desenhado pelo sistema operacional e não há CSS que o alcance.

   Medidas de lá:
     gatilho   h-10 · rounded-lg · border-input · px-3 · text-sm
     seta      h-4 w-4 · muted-foreground · gira 180° ao abrir
     painel    mt-1 · max-h-60 (240px) · rounded-xl · p-1 · shadow-lg
     item      rounded-lg · px-3 py-2 · text-sm
     ativo     bg-muted
     marcado   bg-primary/10 · font-medium · text-primary + ícone check

   A diferença daqui: o <select> nativo CONTINUA no DOM, escondido. Ele é
   quem guarda o valor, entra no <form> e funciona se o JavaScript falhar —
   o widget é uma camada por cima, não um substituto.
   ========================================================================= */
.sel { position: relative; }

/* O nativo some da vista, mas continua sendo o campo de verdade */
.sel > select {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
/* Sem JavaScript, o nativo volta a aparecer — melhor feio que inutilizável */
.sel:not(.sel--pronto) > select {
  position: static;
  width: 100%; height: 40px;
  opacity: 1; pointer-events: auto;
  padding-inline: var(--e-3);
  border: 1px solid var(--cor-controle);
  border-radius: var(--radius-lg);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: var(--txt-md);
}

.sel__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  width: 100%;
  height: 40px;                       /* h-10 */
  padding-inline: var(--e-3);         /* px-3 */
  border: 1px solid var(--cor-controle);
  border-radius: var(--radius-lg);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: var(--txt-md);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease);
}
.sel__gatilho:focus-visible,
.sel__gatilho[aria-expanded="true"] {
  box-shadow: 0 0 0 2px var(--cor-anel);
  border-color: var(--cor-anel);
}
.sel__gatilho:disabled { cursor: not-allowed; opacity: .5; }

.sel__valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__valor--vazio { color: var(--cor-suave-texto); }

.sel__seta {
  flex: none;
  color: var(--cor-suave-texto);
  transition: transform var(--t-medio) var(--ease);
}
.sel__gatilho[aria-expanded="true"] .sel__seta { transform: rotate(180deg); }

/* ---- painel ---- */
.sel__painel {
  position: absolute;
  z-index: var(--z-modal);
  inset-inline: 0;
  top: calc(100% + 4px);              /* mt-1 */
  max-height: 240px;                  /* max-h-60 */
  overflow-y: auto;
  padding: 4px;                       /* p-1 */
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);    /* rounded-xl = 12px */
  background: var(--cor-card);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
}
/* Sobe quando não há espaço embaixo — a lista nunca deve cobrir o rótulo
   que a pessoa acabou de ler, mas sair da tela é pior. */
.sel__painel--acima { top: auto; bottom: calc(100% + 4px); }

.sel__painel[hidden] { display: none; }

.sel__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  width: 100%;
  padding: var(--e-2) var(--e-3);     /* py-2 px-3 */
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: var(--txt-md);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-rapido) var(--ease);
}
.sel__item:hover,
.sel__item[data-ativo] { background: var(--cor-suave); }

.sel__item[aria-selected="true"] {
  background: hsl(var(--primary) / .1);
  color: var(--cor-primaria);
  font-weight: var(--peso-medio);
}
.sel__item:disabled { opacity: .5; cursor: not-allowed; }
.sel__item:disabled:hover { background: transparent; }

.sel__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__extra {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--cor-suave-texto);
}
.sel__item[aria-selected="true"] .sel__extra { color: inherit; }
.sel__check { flex: none; opacity: 0; }
.sel__item[aria-selected="true"] .sel__check { opacity: 1; }

/* ---- agrupamento (Refrigerantes · Cervejas) ---- */
.sel__grupo {
  padding: var(--e-3) var(--e-3) 4px;
  font-size: var(--txt-2xs);
  font-weight: var(--peso-black);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--cor-suave-texto);
}
.sel__grupo + .sel__item { margin-top: 0; }
li + .sel__grupo { border-top: 1px solid var(--cor-borda); margin-top: 4px; }

.sel__vazio {
  padding: var(--e-3);
  font-size: var(--txt-md);
  color: var(--cor-suave-texto);
  text-align: center;
}

/* =========================================================================
   9. AUXILIARES
   ========================================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.divisor { height: 1px; background: var(--cor-borda); border: 0; margin: var(--e-6) 0; }

/* Números que se alinham em coluna — preço, horário, contador */
.num { font-variant-numeric: tabular-nums; }

/* =========================================================================
   POPUP DE LOJA FECHADA
   Substitui o aviso inline: aparece quando a casa está fechada/pausada,
   sugere fazer pedido OU reservar mesa, e não volta no mesmo dia depois de
   fechado (o cabecalho.js grava a data no localStorage).
   ========================================================================= */
.popup-loja {
  border: none; padding: 0; background: transparent;
  max-width: none; max-height: none; margin: auto;
  width: min(440px, calc(100vw - 32px));
}
.popup-loja::backdrop { background: hsl(var(--shadow-tint) / .55); backdrop-filter: blur(3px); }
.popup-loja__corpo {
  position: relative;
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: clamp(30px, 5vw, 42px) clamp(24px, 4vw, 34px) clamp(24px, 4vw, 32px);
  text-align: center;
}
.popup-loja__fechar {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--cor-borda); border-radius: var(--radius-full);
  background: var(--cor-card); color: var(--cor-texto); cursor: pointer;
  transition: background var(--t-rapido) var(--ease);
}
.popup-loja__fechar:hover { background: var(--cor-suave); }
.popup-loja__ico {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: var(--radius-full);
  background: hsl(var(--primary) / .14); color: var(--cor-primaria-tipo);
}
.popup-loja__titulo { font-size: 1.4rem; font-weight: var(--peso-black); letter-spacing: -.02em; margin: 0; }
.popup-loja__msg { margin: 10px auto 0; max-width: 34ch; color: var(--cor-suave-texto); line-height: 1.55; }
.popup-loja__acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.popup-loja__acoes .btn { width: 100%; justify-content: center; }
.popup-loja__nota { margin: 14px 0 0; font-size: var(--txt-xs); color: var(--cor-suave-texto); }
.popup-loja[open] { animation: popup-loja-in .28s var(--ease-saida); }
@keyframes popup-loja-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}