/* ══════════════════════════════════════════════════════════════════════════
   Catálogo de marcas — /marcas
   Estilo da rota dinâmica que lista as casas de perfumaria. Lê os tokens de
   `tokens.css` (paleta VENICE) e não redefine nenhum: aqui só entram as regras
   próprias desta tela.

   A ordem de carga é tokens → header → marcas → rodape.

   O gesto da capa é o da casa — o painel verde-escuro de `.guia-capa`,
   `.guias-topo` e `.perf-capa`: raio, brilho de ouro no canto, eyebrow com
   traço, título em serifada branca. Aqui ele ganha a contagem de casas, que é
   o que a página tem de próprio.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ O FUNDO DA PÁGINA ══════════════════════════════════════════════════════
   Toda folha de página define o `body` — home.css, ofertas.css, doc.css,
   fila.css, 404.css, perfume.css. O `perfume.css` ficou sem esta regra por um
   tempo e a página caiu no branco padrão do navegador enquanto o cabeçalho
   fixo pintava a faixa quente por cima; o dono viu na hora. Esta folha nasce
   com ela. */
body{
  background:var(--papel);color:var(--tinta);font-family:var(--font-sans);
  line-height:1.6;min-height:100vh;display:flex;flex-direction:column;
  overflow-x:hidden;
}

.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;
}

/* O cabeçalho único (`_header.html`) usa `.container`, e cada página define a
   sua na própria folha. Esta é a desta tela, na mesma largura da vitrine. */
.container{width:100%;max-width:1360px;margin:0 auto;padding:0 1.5rem}

/* `flex:1 0 auto` empurra o rodapé para o pé da janela nas páginas curtas. */
.marcas{flex:1 0 auto;padding:0 0 5rem}

/* ── a volta ─────────────────────────────────────────────────────────────── */
.marcas-volta{
  display:flex;align-items:center;gap:.4rem;width:fit-content;
  margin:2.1rem 0 .9rem;
  font-size:.78rem;font-weight:700;color:var(--verde-principal);
  text-decoration:none;letter-spacing:.01em;
}
.marcas-volta svg{transition:transform .2s var(--ease)}
.marcas-volta:hover svg{transform:translateX(-3px)}
.marcas-volta:hover{color:var(--verde-escuro)}
@media (prefers-reduced-motion:reduce){.marcas-volta:hover svg{transform:none}}

/* ── a capa ──────────────────────────────────────────────────────────────── */
.marcas-capa{
  position:relative;overflow:hidden;
  background:var(--verde-fundo);border-radius:var(--radius-xl);
  padding:2.4rem 2.6rem;margin:0 0 1.35rem;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.3fr);
  gap:0 2.75rem;align-items:center;
}
/* O mesmo brilho do hero e do `.guias-topo`: ouro no canto, sem imagem. */
.marcas-capa::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 110% at 100% 0%,rgba(198,169,114,.14),transparent 62%)}
.marcas-capa>*{position:relative;z-index:1}

.marcas-capa-esq{display:flex;align-items:center;gap:1.75rem;min-width:0}
.marcas-capa-info{min-width:0}
.marcas-tema{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ouro-claro);
}
.marcas-tema::before{content:'';width:14px;height:2px;border-radius:2px;
  background:currentColor;flex-shrink:0}
.marcas-capa h1{
  margin:.7rem 0 0;
  font-family:var(--font-serif);font-size:clamp(1.9rem,4vw,2.7rem);
  font-weight:500;letter-spacing:-.03em;line-height:1.12;color:#fff;
  text-wrap:balance;
}
.marcas-lead{
  margin:.85rem 0 0;font-size:.98rem;line-height:1.6;color:#D8E2D9;
  max-width:58ch;text-wrap:pretty;
}

/* A régua do hero: filete entre os itens, sem pílula e sem fundo — o mesmo
   gesto dos `.hero-selos` da home e dos `.perf-selos`. */
.marcas-selos{display:flex;flex-wrap:wrap;margin-top:1.35rem}
.marcas-selo{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;
  font-weight:600;color:rgba(244,239,228,.72);padding:0 1.05rem}
.marcas-selo:first-child{padding-left:0}
.marcas-selo + .marcas-selo{border-left:1px solid rgba(198,169,114,.4)}
.marcas-selo svg{width:15px;height:15px;color:var(--ouro-claro);flex-shrink:0}

/* A coluna da contagem: o filete à esquerda é o do `.guias-conta`. */
.marcas-conta{padding-left:2rem;border-left:1px solid rgba(255,255,255,.16)}
.marcas-conta-rot{
  margin:0;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:var(--ouro-claro);
}
.marcas-conta-val{
  margin:.5rem 0 0;font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:clamp(2.1rem,4.4vw,3rem);font-weight:700;line-height:1;color:#fff;
}
.marcas-conta-val small{font-size:.42em;font-weight:500;color:rgba(244,239,228,.6);
  margin-left:.15em}
.marcas-conta-nota{margin:.6rem 0 0;font-size:.78rem;line-height:1.45;
  color:rgba(244,239,228,.66);max-width:22ch}

/* ── a faixa de dados ────────────────────────────────────────────────────── */
/* O gesto do `.painel` da fila e do `.perf-painel`: células separadas por 1px
   de linha, ícone no traço da casa, número em mono. */
.marcas-painel{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--linha);border:1px solid var(--linha);
  border-radius:var(--radius-md);overflow:hidden;margin:0 0 1.35rem;
}
.marcas-cel{display:flex;align-items:center;gap:.7rem;padding:1rem 1.2rem;
  background:var(--bg-card,#fff)}
.marcas-cel-ico{display:flex;color:var(--ouro-texto);flex-shrink:0}
.marcas-cel-ico svg{width:16px;height:16px}
.marcas-cel-txt{min-width:0}
.marcas-cel-txt b{display:block;font-family:var(--font-data);
  font-variant-numeric:tabular-nums;font-size:.98rem;font-weight:700;
  color:var(--tinta);line-height:1.25}
.marcas-cel-txt span{display:block;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-55)}
.marcas-cel-txt small{display:block;font-size:.73rem;color:var(--tinta-70);
  line-height:1.35;margin-top:.1rem}

/* ── a barra de filtro ───────────────────────────────────────────────────── */
.marcas-barra{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.85rem 1rem;margin:0 0 1.35rem;
  background:#fff;border:1px solid var(--linha);border-radius:var(--radius-lg);
}
.marcas-busca{position:relative;display:flex;align-items:center;gap:.55rem;
  flex:1 1 260px;min-width:0}
.marcas-busca svg{color:var(--tinta-55);flex-shrink:0}
.marcas-busca input{
  flex:1 1 auto;min-width:0;height:42px;padding:0 2.4rem 0 .1rem;
  border:none;background:transparent;outline:none;
  font-family:inherit;font-size:.9rem;color:var(--tinta);
}
.marcas-busca input::placeholder{color:var(--tinta-55)}
.marcas-limpar{
  position:absolute;right:0;display:none;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:none;border-radius:var(--radius-pill);
  background:var(--papel-2);color:var(--tinta-70);cursor:pointer;
  font-family:inherit;font-size:.72rem;transition:var(--t-fast);
}
.marcas-limpar.vis{display:inline-flex}
.marcas-limpar:hover{background:var(--creme);color:var(--tinta)}

.marcas-toggle{
  display:inline-flex;align-items:center;gap:.45rem;min-height:42px;
  padding:.4rem .95rem;background:var(--verde-salvia-claro);
  border:1px solid var(--linha);border-radius:var(--radius-pill);
  font-family:inherit;font-size:.79rem;font-weight:600;color:var(--verde);
  cursor:pointer;transition:var(--t-fast);white-space:nowrap;
}
.marcas-toggle:hover{background:#fff;border-color:var(--ouro-claro);color:var(--verde-fundo)}
.marcas-toggle[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.marcas-toggle:active{transform:scale(.97)}

.marcas-contagem{
  margin-left:auto;font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:.78rem;color:var(--tinta-70);white-space:nowrap;
}
.marcas-contagem b{color:var(--verde);font-weight:700}

/* ── a grade de casas ────────────────────────────────────────────────────── */
.marcas-grade{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));
  gap:.85rem;
}

.marca-card{
  display:flex;align-items:center;gap:.85rem;min-height:82px;
  padding:.85rem .95rem;background:#fff;
  border:1px solid var(--linha);border-radius:var(--radius-lg);
  text-decoration:none;color:inherit;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
/* O mesmo levante dos cards da vitrine: borda de ouro e 3px acima. */
a.marca-card:hover{border-color:var(--ouro-claro);transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(19,26,21,.07)}
a.marca-card:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
@media (prefers-reduced-motion:reduce){a.marca-card:hover{transform:none}}

/* O prato branco do produto: o mesmo fundo do `.mini-foto` da home e do
   `.perf-prato`. O creme é o papel da página; o frasco precisa de branco sob
   ele para o vidro claro não ficar amarelado. */
.marca-prato{
  flex-shrink:0;width:54px;height:54px;display:flex;align-items:center;
  justify-content:center;background:#fff;border:1px solid var(--linha);
  border-radius:var(--radius-md);padding:4px;
}
.marca-prato img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}
/* Sem foto, a inicial em serifada: 33 das 93 casas não têm imagem de anúncio, e
   quadrado branco vazio lê como imagem quebrada. */
.marca-mono{
  font-family:var(--font-serif);font-size:1.15rem;font-weight:600;
  color:var(--verde);letter-spacing:.02em;line-height:1;
}

.marca-txt{min-width:0;display:flex;flex-direction:column;gap:.15rem}.marca-nome{
  font-size:.9rem;font-weight:700;color:var(--tinta);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.marca-meta{
  font-size:.74rem;color:var(--tinta-70);line-height:1.35;
  font-variant-numeric:tabular-nums;
}

/* Casa sem oferta viva: o card fica, esmaecido, e diz por quê. Não vira link —
   `/ofertas?marca=<slug>` abriria grade vazia, e grade vazia é soft-404. */
.marca-card.sem-oferta{background:var(--papel-2);border-style:dashed}
.marca-card.sem-oferta .marca-nome{color:var(--tinta-70)}
.marca-card.sem-oferta .marca-meta{color:var(--tinta-55)}
.marca-card.sem-oferta .marca-prato{background:transparent;border-color:transparent}
.marca-card.sem-oferta .marca-mono{color:var(--tinta-55)}

/* `display:flex` do card vence o `display:none` que o navegador dá a
   `[hidden]`, então o filtro do `marcas.js` precisa desta regra para esconder
   de verdade. Sem ela, filtrar não tira nada da tela. */
.marca-card[hidden]{display:none}

.marcas-sem-resultado{
  margin:1.6rem 0 0;padding:1.1rem 1.25rem;
  background:var(--leitura-bg);border:1px solid var(--leitura-borda);
  border-radius:var(--radius-md);font-size:.85rem;line-height:1.5;
  color:var(--leitura);
}
.marcas-vazio{
  grid-column:1/-1;text-align:center;padding:3rem 1.5rem;
  background:#fff;border:1px solid var(--linha);border-radius:var(--radius-xl);
  color:var(--tinta-70);font-size:.9rem;
}

/* ── telas estreitas ─────────────────────────────────────────────────────── */
@media (max-width:900px){
  .marcas-capa{grid-template-columns:minmax(0,1fr);gap:1.75rem 0;padding:2rem 1.6rem}
  .marcas-conta{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.16);
    padding-top:1.35rem}
  .marcas-conta-nota{max-width:none}
}
@media (max-width:620px){
  .marcas-volta{margin-top:1.5rem}
  .marcas-capa{padding:1.6rem 1.25rem;border-radius:var(--radius-lg)}
  .marcas-painel{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .marcas-cel{padding:.85rem .95rem}
  .marcas-grade{grid-template-columns:1fr;gap:.7rem}
  .marcas-contagem{margin-left:0;width:100%}
}