/* CABEÇALHO — fonte única e responsiva.
   Diretrizes WCAG AA, hit-areas >= 44px, micro-interações táteis (Emil Kowalski / 12-principles). */

/* A voz da marca. Estava repetida no <style> de cada página com @font-face —
   e faltava nas três institucionais, onde o logo caía para Playfair Display.
   Aqui é uma vez só, para as 21 páginas. */
@font-face{
  font-family:'Material Lettering';
  src:url('/fonts/material-lettering.woff2') format('woff2'),
      url('/fonts/material-lettering.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap;
}

.site-header{
  --h-bg:var(--bg-principal,var(--bg,#F5F5EF));
  --h-texto:var(--texto-principal,var(--texto,#263229));
  --h-texto2:var(--texto-secundario,var(--texto2,#4D574E));
  --h-borda:var(--borda-suave,var(--borda,rgba(100,130,103,.16)));
  --h-verde:var(--verde-principal,#3F6048);
  --h-verde-hover:#263D2E;
  --h-salvia:var(--verde-salvia-claro,var(--verde-salvia,#EBF0E7));
  --h-ease:var(--ease,cubic-bezier(.16,1,.3,1));
  --h-t:background-color .18s var(--h-ease),border-color .18s var(--h-ease),color .18s var(--h-ease),box-shadow .18s var(--h-ease);
  --h-brand:var(--font-brand,'Material Lettering','Playfair Display',Georgia,serif);
  --h-sans:var(--font-sans,'Plus Jakarta Sans',system-ui,-apple-system,sans-serif);
  --h-largura:var(--pagina-largura,1360px);
  --h-radius:var(--radius-pill,9999px);

  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--h-bg) 96%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--h-borda);font-family:var(--h-sans);
}
@supports not (background:color-mix(in srgb,red 50%,blue)){.site-header{background:var(--h-bg)}}

.header-inner{
  width:100%;max-width:var(--h-largura);margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:76px;
}

.header-marca-bloco{
  display:flex;align-items:center;gap:.9rem;flex-shrink:0;
}

.logo-link{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0;position:relative}
/* O logo mede 36px (30px abaixo de 420px) e o alvo de toque precisa de 44.
   Pseudo-elemento em vez de `min-height`: o cabeçalho já é a peça mais alta da
   página na faixa de 768–900px, e um alvo que ocupasse espaço real somaria
   mais altura a ele. O alvo cresce em volta, o desenho não se move. */
.logo-link::after{content:'';position:absolute;left:-6px;right:-6px;top:50%;
  transform:translateY(-50%);height:44px;min-height:44px}
.logo-link img{width:36px;height:36px;border-radius:9px;display:block}
.logo-type{font-family:var(--h-brand);font-size:1.36rem;font-weight:700;color:var(--h-texto);line-height:1}
.logo-type small{display:block;font-family:var(--h-sans);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--h-texto2);margin-top:3px}

/* Badge ao vivo com pulsing dot e contador integrado */
.header-live-badge{
  display:inline-flex;align-items:center;gap:.42rem;padding:.32rem .75rem;
  background:rgba(107,34,51,.07);border:1px solid rgba(107,34,51,.30);border-radius:var(--h-radius);
  font-size:.73rem;font-weight:700;color:var(--vinho,#6B2233);letter-spacing:.01em;
  white-space:nowrap;user-select:none;
}
.header-live-badge .dot-pulse{
  width:7px;height:7px;border-radius:50%;background:var(--vinho,#6B2233);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(107,34,51,.4);
  animation:headerPulse 2s infinite cubic-bezier(.45,0,.55,1);
}
@keyframes headerPulse{
  0%{box-shadow:0 0 0 0 rgba(107,34,51,.5)}
  70%{box-shadow:0 0 0 6px rgba(107,34,51,0)}
  100%{box-shadow:0 0 0 0 rgba(107,34,51,0)}
}
/* O separador entre o contador e o texto media 2,33:1 sobre o antigo verde.
   No vinho ele usa 78% de opacidade: sobre o fundo do badge da 5,6:1 e
   continua sendo o mesmo tom de apoio. */
.header-live-badge .live-sep{color:rgba(107,34,51,.78)}
/* O contador do cabeçalho é dado: entra na voz mono, como o preço. */
.header-live-badge .live-count{font-family:var(--font-data,'JetBrains Mono',ui-monospace,monospace);font-variant-numeric:tabular-nums;font-weight:700;color:var(--vinho,#6B2233);letter-spacing:-.02em}

/* ── BARRA DE BUSCA CENTRAL ── */
.header-busca{
  flex:1;max-width:480px;margin:0 .5rem;
}
.busca-wrap{
  position:relative;display:flex;align-items:center;width:100%;
}
.busca-icone{
  position:absolute;left:1rem;width:18px;height:18px;color:var(--h-texto2);
  pointer-events:none;transition:var(--h-t);
}
.busca-wrap input{
  width:100%;height:44px;padding:0 1.25rem 0 2.85rem;
  background:#FFFFFF;border:1px solid var(--h-borda);border-radius:var(--h-radius);
  font-family:var(--h-sans);font-size:.9rem;color:var(--h-texto);
  box-shadow:0 1px 3px rgba(0,0,0,.03);transition:var(--h-t);
}
/* O fallback era #7D8A7E — 3,62:1 sobre o branco do campo, abaixo de 4,5:1.
   Só mordia nas institucionais (404, fila, privacidade, quem-somos, termos),
   que declaram `--texto3` e não `--texto-terciario`. #6B776C dá 4,69:1. */
.busca-wrap input::placeholder{color:var(--texto-terciario,var(--texto3,#6B776C));font-weight:400}
.busca-wrap input:hover{border-color:rgba(100,130,103,.35)}
.busca-wrap input:focus{
  outline:none;border-color:var(--h-verde);
  box-shadow:0 0 0 3px rgba(26,51,38,.12);background:#fff;
}
/* `+` nunca casava: o ícone vem ANTES do input no HTML (`_header.html:22`), e o
   combinador de irmão seguinte só olha para frente. A lupa nunca acendia ao
   focar o campo. `:focus-within` no invólucro independe da ordem. */
.busca-wrap:focus-within .busca-icone{color:var(--h-verde)}

/* ── NAVEGAÇÃO ── */
.nav{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.nav a{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:600;
  color:var(--h-texto2);text-decoration:none;padding:.5rem .9rem;min-height:44px;
  border-radius:var(--h-radius);transition:var(--h-t);white-space:nowrap;
}
.nav a svg{width:17px;height:17px;flex-shrink:0}
.nav a:hover{background:var(--h-salvia);color:var(--h-verde)}
.nav a:active{transform:scale(0.96)}
.nav a[aria-current="page"]{color:var(--h-verde);background:var(--h-salvia);font-weight:700}

/* Botão Alertas com destaque */
.btn-nav-fav{
  background:rgba(255,255,255,.8);border:1px solid var(--h-borda);
}
.btn-nav-fav:hover{
  background:#fff;border-color:rgba(100,130,103,.35);box-shadow:0 2px 6px rgba(0,0,0,.04);
}

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

/* ══ RESPONSIVO ══════════════════════════════════════════════════════════
   Do maior para o menor, e cada faixa só define o que muda. Medições que
   fixaram os pontos de quebra:

     1080px  badge "Ao vivo" sai — é o elemento mais largo e o menos essencial.
             Com ele o cabeçalho em linha única pedia ~1260px de conteúdo.
      900px  o cabeçalho passa a DUAS linhas: marca + busca em cima, navegação
             embaixo. Antes eram três (marca / busca / navegação) e o cabeçalho
             ficava com 170px — 19% de uma tela de 900, mais de 20% num celular.
             O subtítulo "/ radar de ofertas" sai junto: medido, ele deixava a
             marca com 358px numa tela de 390 e era o que forçava a terceira.
      420px  só aperto fino de logo e itens. */

@media (max-width:1080px){
  .header-live-badge{display:none}
  .nav a{padding:.55rem .65rem;font-size:.82rem;min-height:44px}
  .header-busca{flex:1 1 200px;max-width:320px;min-width:0}
  .header-inner{gap:1rem}
}

@media (max-width:900px){
  .header-inner{min-height:0;flex-wrap:wrap;padding:.6rem 1rem;gap:.5rem .7rem;row-gap:.4rem}
  .header-marca-bloco{flex:0 0 auto;min-width:0}
  .logo-type{font-size:1.22rem}
  .logo-type small{display:none}
  /* A busca fica na primeira linha, ao lado da marca, e só cai se não couber
     — o `flex-basis` pequeno é o que permite isso em 360px. */
  .header-busca{order:2;flex:1 1 120px;max-width:100%;min-width:96px;margin:0}
  .nav{order:3;width:100%;margin-left:0;justify-content:flex-start;
    overflow-x:auto;scrollbar-width:none;padding-bottom:.15rem;
    -webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:.55rem .6rem;font-size:.81rem;min-height:44px}
}

@media (max-width:420px){
  .header-inner{padding:.55rem .85rem}
  .logo-link img{width:30px;height:30px}
  .logo-type{font-size:1.1rem}
  .header-busca{flex:1 1 96px;min-width:80px}
  .nav a{padding:.5rem .5rem;font-size:.78rem;min-height:44px}
  .nav a svg{width:15px;height:15px}
}


/* ══ SUGESTÕES DA BUSCA ══════════════════════════════════════════════════
   O painel abre ancorado ao campo. No cabeçalho fixo ele precisa vencer o
   `overflow` do container e ficar acima do conteúdo, daí o `position:absolute`
   no `.busca-wrap` (que é o pai posicionado) e o z-index alto. */
.busca-wrap{position:relative}
.busca-sugestoes{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:320;
  margin:0;padding:.3rem;list-style:none;background:#fff;border:1px solid var(--h-borda,rgba(100,130,103,.16));
  border-radius:14px;box-shadow:0 20px 44px -10px rgba(28,40,31,.24);
  max-height:min(60vh,360px);overflow-y:auto}
.busca-sugestoes[hidden]{display:none}

.sug{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;
  padding:.5rem .6rem;border-radius:9px;cursor:pointer;font-size:.85rem;
  color:var(--h-texto,#263229)}
.sug.ativo,.sug:hover{background:var(--h-salvia,var(--verde-salvia-claro,#EBF0E7))}
.sug-ico{display:inline-flex;color:var(--h-verde,#3F6048);opacity:.75}
.sug-ico svg{width:16px;height:16px}
.sug-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sug-casa{font-size:.74rem;color:var(--h-texto2,#4D574E);white-space:nowrap}
/* A nota de aproximação é UMA, no pé da lista.
   Antes era um selo por linha — "POR APROXIMAÇÃO" em maiúscula, negrito e
   letra espaçada, embaixo de cada nome. Medido em 01/11/2026, um termo com
   quatro resultados virava quatro selos idênticos, e o selo disputava atenção
   com o nome do perfume, que é o que a pessoa veio ver. */
.sug-nota{grid-column:1/-1;margin-top:.15rem;padding:.45rem .6rem .25rem;
  border-top:1px solid var(--h-borda,rgba(100,130,103,.16));
  font-size:.72rem;color:var(--h-texto2,#4D574E);opacity:.85;cursor:default}
/* Sugestão de MARCA: o texto é o nome da casa e a coluna da direita diz o
   tamanho dela — é o que decide se vale clicar. */
.sug-marca .sug-txt{font-weight:700}
.sug-marca .sug-casa{font-size:.68rem;opacity:.75}

@media (max-width:900px){
  .busca-sugestoes{max-height:min(52vh,300px)}
  .sug{font-size:.82rem;padding:.55rem .5rem}
  .sug-casa{display:none}
}

/* ══ CAMPOS DE TEXTO A 16px NO CELULAR ═════════════════════════════════════
   O Safari do iOS da zoom automatico ao focar campo com fonte abaixo de 16px.
   Medido em 01/11/2026 a 390px: o campo do cabecalho e o do painel estavam a
   14px, e o seletor de ordem a 13px — os tres disparavam o zoom e a pagina
   saltava debaixo do dedo. 16px so no celular; no desktop nada muda. */
@media (max-width:820px){
  .busca-wrap input,.busca input,.ordenar select{font-size:16px}
}