/* ==========================================================================
   Buscador de Ofertas — identidade visual Dani Leite (vermelho carmim).
   Tokens de IdentidadeVisual/CORES-E-FONTES.md. Migrado do roxo em 03/08/2026.

   Isto é PAINEL, não land page: a regra 80/20 INVERTE. O neutro (branco quente)
   domina e o vermelho é exceção — só em (1) ação primária, (2) estado ativo e
   (3) alerta. Botão secundário é contorno, nunca preenchido. Se ao apertar os
   olhos a tela virar um borrão vermelho, tem cor demais.
   ========================================================================== */

:root {
  --ground: #FBF6F1;        /* Branco Quente — fundo, o respiro */
  --surface: #FFFFFF;       /* branco puro — cartões destacam sobre o creme */
  --surface-2: #F3E1DB;     /* rosa claro — faixa suave (nunca o #C77E6A em área grande) */
  --ink: #2A1512;           /* Grafite Quente — corpo e dados */
  --muted: #7A5F58;         /* neutro quente — labels e dado secundário */
  --line: #E8D9D2;          /* borda fininha neutra quente */
  --primary: #9C1814;       /* Vermelho Carmim — ação primária / estado ativo */
  --primary-strong: #4A0F0D;/* Ameixa — texto de botão secundário/ghost */
  --accent: #9C1814;        /* CTA (baixar planilha) — mesmo vermelho, sem magenta */
  --plum: #4A0F0D;          /* Ameixa Profundo — topo escuro */
  --lav-on-plum: #E8CFC6;   /* texto claro sobre o ameixa */
  --rosa: #C77E6A;          /* Rosa Queimado — só borda/tag/ícone, nunca área grande */
  --shopee: #EE4D2D;
  --ok: #16A34A;
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-title: "Merriweather", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --maxw: 1180px;
}

/* A identidade não define paleta escura. Estes tons são a versão quente
   equivalente (base ameixa), pra quem usa o sistema em modo escuro não perder
   o tema — mesma lógica: neutro domina, vermelho é acento. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1A0D0B; --surface: #261412; --surface-2: #331B18;
    --ink: #F6EAE4; --muted: #C0A49B; --line: #43231F;
    --primary: #E8635C; --primary-strong: #F0A79F; --accent: #E8635C;
    --lav-on-plum: #E8CFC6;
    --ok: #4ADE80;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 88px; /* espaço pra barra fixa de seleção não cobrir conteúdo */
}

/* h1 em Merriweather (o "ar de revista" da marca). h2/h3 seguem em Poppins:
   aqui eles são rótulo de interface, não título editorial — serifa em label
   de painel pesa e atrapalha a leitura rápida. */
h1 { font-family: var(--font-title); text-wrap: balance; margin: 0; }
h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Rótulo pequeno em caixa alta — sem uso no cabeçalho atual (o título assumiu
   esse papel), mantido para reuso em outras seções. */
.label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 600; color: var(--lav-on-plum);
  display: inline-flex; align-items: center; gap: 8px;
}
/* O arquivo já é a versão branco-quente (#FBF6F1) da identidade — sem filtro,
   senão viraria branco puro e perderia o tom quente da marca.
   Proporção do viewBox é 54×48 (9:8); as medidas abaixo respeitam isso. */
.spark { width: 45px; height: 40px; display: block; flex: none; }

/* ---------- Topo ---------- */
.topo { background: var(--plum); color: #fff; padding: 22px 0 26px; }
/* Símbolo + título na mesma linha. flex-wrap deixa o título cair pra linha de
   baixo em tela estreita em vez de espremer/estourar. */
.topo .marca { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Agora é o título da ferramenta, não uma chamada — por isso vem maior.
   Merriweather 900 pra segurar o peso do serif no fundo escuro.
   Sem margem: o alinhamento vertical quem faz é o flex do .marca. */
.topo h1 {
  font-size: clamp(1.9rem, 5vw, 2.7rem); font-weight: 900;
  letter-spacing: -0.02em; margin: 0; line-height: 1.15;
}

/* Em tela estreita o par símbolo+título não cabe em 375px (medido: sobram 276px
   e o título pede 304px). Encolhe os dois o suficiente pra continuarem na mesma
   linha, em vez de deixar o símbolo órfão numa linha só dele. */
@media (max-width: 430px) {
  .topo .marca { gap: 10px; }
  .spark { width: 34px; height: 30px; }
  .topo h1 { font-size: 1.72rem; }
}
.topo p { color: var(--lav-on-plum); margin: 6px 0 0; font-size: 0.95rem; max-width: 60ch; }

/* ==========================================================================
   Tema por loja — bate o olho e sabe em qual marketplace está.
   Só os tons de FUNDO e o destaque da aba mudam; a marca segue mandando nos
   títulos e no CTA. Estas cores são das LOJAS (Shopee/Amazon/Meli), não da
   identidade da Dani — por isso não migraram pro vermelho: elas identificam
   o marketplace, seria confuso pintá-las de carmim.
   ========================================================================== */

/* Cada loja tem dois tons: o da barra de busca (mais forte) e o do fundo das ofertas
   (bem claro, pra não competir com os cards nem cansar a vista na rolagem).
   O topo com o título NÃO entra no tema — fica sempre no ameixa da marca. */

/* Shopee — salmão/laranja */
body[data-loja="shopee"] {
  --loja-cor: #EE4D2D;
  --loja-fundo: #FFF1ED;
  --loja-ground: #FFF9F7;
  --loja-borda: #FBD5CA;
}
/* Amazon — azul. É o tom que a Dani usa nas artes dela (não o laranja do sorriso). */
body[data-loja="amazon"] {
  --loja-cor: #1240C8;
  --loja-fundo: #EAF2FB;
  --loja-ground: #F6FAFE;
  --loja-borda: #C9DCF2;
}
/* Mercado Livre — amarelo (pronto pra quando entrar) */
body[data-loja="meli"] {
  --loja-cor: #FFE600;
  --loja-fundo: #FFFBE0;
  --loja-ground: #FFFDF2;
  --loja-borda: #F2E6A8;
}

@media (prefers-color-scheme: dark) {
  body[data-loja="shopee"] { --loja-fundo: #241310; --loja-ground: #17100E; --loja-borda: #4A2419; }
  body[data-loja="amazon"] { --loja-fundo: #0E1826; --loja-ground: #0C1119; --loja-borda: #23384F; }
  body[data-loja="meli"]   { --loja-fundo: #23200A; --loja-ground: #171509; --loja-borda: #4A431A; }
}

/* Configuração e busca formam um bloco só, no tom mais forte da loja */
body[data-loja] .config,
body[data-loja] .busca {
  background: var(--loja-fundo);
  border-bottom-color: var(--loja-borda);
}
/* Sem linha entre as duas: elas se leem como uma faixa contínua */
body[data-loja] .config { border-bottom-color: transparent; }
/* Fundo onde as ofertas aparecem: o tom mais claro, aplicado na página inteira */
body[data-loja] { background: var(--loja-ground); }

/* ---------- Abas das lojas (entradas separadas) ---------- */
.lojas { background: var(--plum); border-bottom: 1px solid rgba(255,255,255,0.08); }
.lojas-inner { display: flex; gap: 4px; }

.loja-aba {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  color: var(--lav-on-plum); padding: 13px 22px;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.loja-aba:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* A aba ativa é sublinhada com a cor da própria loja. Regras explícitas por loja em vez
   de var(): a variável vive em body[data-loja] e o valor reserva vencia na prática. */
/* O sublinhado usa a cor da loja, mas numa versão que enxergue sobre o topo escuro
   (#4A0F0D): o azul cheio da Amazon ficaria escuro demais contra o ameixa. */
.loja-aba.ativa { color: #fff; }
body[data-loja="shopee"] .loja-aba.ativa { border-bottom-color: #FF6633; }
body[data-loja="amazon"] .loja-aba.ativa { border-bottom-color: #4C86FF; }
body[data-loja="meli"]   .loja-aba.ativa { border-bottom-color: #FFE600; }

/* ---------- Busca ---------- */
/* Abas + busca grudam juntas no topo ao rolar: assim a loja atual (Shopee/Amazon)
   continua à vista, junto com o campo de busca e os filtros. */
.topo-fixo { position: sticky; top: 0; z-index: 20; box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
.busca { background: var(--surface-2); padding: 22px 0; border-bottom: 1px solid var(--line); }
.busca-linha { display: flex; gap: 8px; }
#campo-busca {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 13px 15px; font-family: var(--font-body); font-size: 1rem;
  background: var(--surface); color: var(--ink);
  transition: border-color 0.15s;
}
#campo-busca::placeholder { color: var(--muted); }
#campo-busca:focus { outline: none; border-color: var(--primary); }

.btn-buscar {
  flex: none; border: none; border-radius: 12px;
  background: var(--primary); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 0 24px; cursor: pointer; transition: filter 0.15s;
}
.btn-buscar:hover:not(:disabled) { filter: brightness(1.08); }
.btn-buscar:disabled { opacity: 0.7; cursor: default; }

.busca-controles {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px;
}
.nichos { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--primary-strong);
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  padding: 7px 15px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.chip:hover { background: var(--surface-2); border-color: var(--primary); }

.ordenar { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.ordenar select {
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 0.88rem; padding: 8px 10px; cursor: pointer;
}

/* Botão que abre o painel de categorias */
.btn-categorias {
  border: 1.5px solid var(--primary); border-radius: 999px;
  background: var(--surface); color: var(--primary-strong);
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  padding: 7px 16px; cursor: pointer; transition: background 0.15s;
}
.btn-categorias:hover { background: var(--surface-2); }
.btn-categorias[aria-expanded="true"] { background: var(--primary); color: #fff; }

/* Painel de categorias */
.painel-categorias {
  margin-top: 12px; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 14px;
}
.busca-categoria {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--ground); color: var(--ink);
  font-family: var(--font-body); font-size: 0.92rem; padding: 10px 12px;
  margin-bottom: 12px;
}
.busca-categoria:focus { outline: none; border-color: var(--primary); }

/* Lista rolável em colunas — cabe muita categoria sem esticar a página */
.cats-lista {
  max-height: 380px; overflow-y: auto; padding-right: 6px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-content: start;
}
.cat-bloco { break-inside: avoid; }
.cat-titulo {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 0 0 6px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.84rem;
  color: var(--primary-strong); border-bottom: 1.5px solid var(--line);
  margin-bottom: 7px;
}
.cat-titulo:hover { color: var(--accent); }
.cat-subs { display: flex; flex-direction: column; gap: 2px; }
.cat-sub {
  text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.82rem; color: var(--muted);
  padding: 4px 6px; border-radius: 7px; transition: background 0.12s, color 0.12s;
}
.cat-sub:hover { background: var(--surface-2); color: var(--primary-strong); }
.cats-vazio { color: var(--muted); font-size: 0.9rem; margin: 8px 0; grid-column: 1 / -1; }

/* Botão que abre o painel de filtros */
.btn-filtros {
  border: 1.5px solid var(--primary); border-radius: 999px;
  background: var(--surface); color: var(--primary-strong);
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  padding: 7px 15px; cursor: pointer; transition: background 0.15s;
}
.btn-filtros:hover { background: var(--surface-2); }
.btn-filtros[aria-expanded="true"] { background: var(--primary); color: #fff; }

/* ---------- Barra de configuração (sempre visível, entre as abas e a busca) ---------- */
.config {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.config-linha {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
}
.cfg { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cfg > label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.76rem;
  color: var(--muted); white-space: nowrap;
}
.cfg > label small { font-weight: 400; }
/* Campos brancos: a faixa agora tem a cor da loja, então eles precisam se destacar
   dela — mesma lógica do campo de busca logo abaixo. */
.cfg input, .cfg select {
  border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 0.9rem; padding: 7px 10px;
  width: 84px;
}
.cfg select { width: auto; cursor: pointer; }
.cfg input:focus, .cfg select:focus { outline: none; border-color: var(--primary); }
.cfg-dupla { display: flex; gap: 6px; align-items: center; }
.cfg-dupla .ate { font-size: 0.78rem; color: var(--muted); }

/* Toggle "Loja oficial" — mesma altura dos outros campos, pra ficar alinhado na linha */
.cfg-toggle {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 0.84rem;
  padding: 7px 12px; white-space: nowrap; height: 34px; box-sizing: border-box;
}
.cfg-toggle input { width: auto; accent-color: var(--primary); cursor: pointer; margin: 0; }

.cfg-acoes { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.cfg-acoes .btn-aplicar-filtros {
  border: none; border-radius: 9px; background: var(--primary); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 0.86rem;
  padding: 9px 20px; cursor: pointer; transition: filter 0.15s;
}
.cfg-acoes .btn-aplicar-filtros:hover { filter: brightness(1.08); }
.cfg-acoes .btn-reset-filtros {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-family: var(--font-body); font-size: 0.82rem; text-decoration: underline; padding: 6px 0;
}
.cfg-acoes .btn-reset-filtros:hover { color: var(--ink); }

@media (max-width: 720px) {
  .config-linha { gap: 10px; }
  .cfg-acoes { margin-left: 0; width: 100%; }
}

/* Painel de filtros (antigo, mantido pro caso de reuso) */
.painel-filtros {
  margin-top: 12px; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 16px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}
.filtro-campo { display: flex; flex-direction: column; gap: 6px; }
.filtro-campo > label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--ink);
}
.filtro-campo > label small { color: var(--muted); font-weight: 400; }
.filtro-campo input, .filtro-campo select {
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--ground); color: var(--ink);
  font-family: var(--font-body); font-size: 0.95rem; padding: 10px 12px;
}
.filtro-campo input:focus, .filtro-campo select:focus { outline: none; border-color: var(--primary); }
.f-comissao-linha { display: flex; gap: 8px; align-items: center; }
.f-comissao-linha input { flex: 1; min-width: 0; }
.f-comissao-linha select { flex: none; cursor: pointer; background: var(--surface); }
.f-comissao-linha .ate { flex: none; font-size: 0.82rem; color: var(--muted); }

.filtro-acoes { display: flex; gap: 10px; align-items: center; grid-column: 1 / -1; }
.btn-reset-filtros {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-family: var(--font-body); font-size: 0.85rem; text-decoration: underline; padding: 6px 0;
}
.btn-reset-filtros:hover { color: var(--ink); }
/* Ação principal do painel: roxo cheio (magenta fica reservado só pro CTA do CSV) */
.btn-aplicar-filtros {
  margin-left: auto; border: none; border-radius: 11px;
  background: var(--primary); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  padding: 11px 22px; cursor: pointer; transition: filter 0.15s;
}
.btn-aplicar-filtros:hover { filter: brightness(1.08); }

/* Resumo do resultado: quantas achou e de quando são os dados */
.resumo {
  margin: 18px 0 -8px; font-size: 0.85rem; color: var(--muted);
}
.resumo b { color: var(--ink); font-weight: 600; }

/* ---------- Estado (carregando / vazio / erro) ---------- */
.estado { text-align: center; padding: 60px 20px; color: var(--muted); }
.estado .spinner-grande {
  width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 16px;
  border: 3px solid var(--line); border-top-color: var(--primary);
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.estado.erro { color: #B91C1C; }
@media (prefers-color-scheme: dark) { .estado.erro { color: #FCA5A5; } }

/* ---------- Grid de ofertas ---------- */
.grid {
  display: grid; gap: 16px; padding: 26px 0;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* Card de oferta — baseado no .sig-card do brand-board da marca */
.card {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 18px; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.card.sel { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(156,24,20,0.18); }

.card-check {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: 26px; height: 26px; cursor: pointer; accent-color: var(--primary);
}
.card .corner {
  position: absolute; top: 0; right: 0; z-index: 2;
  background: var(--primary); color: #fff;
  font-size: 0.72rem; font-weight: 700; font-family: var(--font-display);
  padding: 6px 11px; border-bottom-left-radius: 12px;
}
.card-img {
  aspect-ratio: 1 / 1; width: 100%; object-fit: cover;
  background: var(--surface-2); display: block;
}
.card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-nome {
  font-size: 0.86rem; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.4em;
}
.preco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.preco .de { color: var(--muted); text-decoration: line-through; font-size: 0.82rem; }
/* Preço em grafite, não vermelho: a identidade lista "preço" como corpo, e num
   grid de 50 cartões o preço vermelho + o badge de desconto virariam parede
   vermelha. O peso e o tamanho já dão a hierarquia; o vermelho fica pro badge. */
.preco .por { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.preco .por small { font-size: 0.72rem; font-weight: 600; }

/* Comissão em % e em R$ — destaque, é o dado que decide a oferta.
   nowrap: nome + % + R$ sempre numa linha só (ex.: "Accenda • 14% • R$ 11,19"). */
.comissao {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  background: rgba(22,163,74,0.1); border: 1px solid rgba(22,163,74,0.28);
  color: var(--ok); border-radius: 8px; padding: 4px 8px;
  font-size: 0.7rem; font-weight: 600; font-family: var(--font-display);
  font-variant-numeric: tabular-nums; align-self: stretch;
}
.comissao b { font-weight: 700; }
.comissao .sep { opacity: 0.45; }
/* Conta que paga mais em R$ — realça com estrela pra bater o olho e decidir.
   Estrela (não a palavra "melhor") pra não estourar a largura do card. */
.comissao.melhor {
  background: rgba(22,163,74,0.2); border-color: var(--ok); font-weight: 700;
}
.comissao.melhor::after {
  content: "★"; margin-left: auto; color: #F59E0B; font-size: 0.9rem; line-height: 1;
}

.card-meta { display: flex; gap: 12px; font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.card-meta .estrela { color: #F59E0B; }

.btn-copiar {
  margin-top: auto; border: 1.5px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--primary-strong);
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  padding: 9px; cursor: pointer; transition: background 0.15s;
}
.btn-copiar:hover { background: var(--surface-2); }
.btn-copiar.copiado { color: var(--ok); border-color: var(--ok); }

/* ---------- Carregar mais ---------- */
.mais { text-align: center; padding: 0 0 30px; }
.btn-mais {
  border: 1.5px solid var(--primary); border-radius: 12px;
  background: transparent; color: var(--primary-strong);
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  padding: 12px 28px; cursor: pointer; transition: background 0.15s;
}
.btn-mais:hover { background: var(--surface-2); }

/* ---------- Barra fixa de seleção ---------- */
.barra-sel {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--plum); color: #fff;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.22);
  transform: translateY(100%); transition: transform 0.2s ease-out;
}
.barra-sel.ativa { transform: translateY(0); }
.barra-sel-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 16px;
}
.barra-sel .contador { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.barra-sel .contador b { color: #fff; }
.barra-sel .limpar {
  background: none; border: none; color: var(--lav-on-plum); cursor: pointer;
  font-family: var(--font-body); font-size: 0.85rem; text-decoration: underline; padding: 0;
}

/* CTA — único elemento magenta da tela */
.btn-cta {
  margin-left: auto;
  background: var(--accent); color: #fff; border: none; border-radius: 12px;
  padding: 13px 26px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  transition: transform 0.12s, filter 0.15s;
}
.btn-cta:hover { filter: brightness(1.08); }
.btn-cta:active { transform: scale(0.98); }

@media (max-width: 560px) {
  .barra-sel-inner { flex-wrap: wrap; gap: 10px; }
  .btn-cta { margin-left: 0; width: 100%; }
  .ordenar { margin-left: 0; width: 100%; }
}