/* ==========================================================================
   MENU DO SITE — barra superior, cabeçalho e menu do celular
   ==========================================================================
   Arquivo próprio porque as três landing pages copiadas (sacolas, pastas e
   flyers-panfletos-e-folders) também usam este menu, e elas têm CSS próprio:
   carregar o site.css inteiro nelas repintaria a página toda.

   Por isso aqui tudo fica preso ao .topbar, ao .site-header ou ao .mobile-nav,
   e as cores vêm com valor de reserva — nas LPs as variáveis do design system
   não existem.  Nada daqui escapa para o resto da página.
   ========================================================================== */

/* A largura da página: só dentro do menu, para não mexer nos .container-ds
   que as LPs já usam no corpo delas. */
.topbar > .container-ds,
.site-header > .container-ds { max-width:1280px; margin:0 auto; padding:0 24px; }

/* ---------- Barra superior ---------- */
.topbar { background:#181817; color:rgba(255,255,255,.72); font-size:.74rem; }
.topbar__inner { display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:38px; }
.topbar a { color:rgba(255,255,255,.72); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.topbar a:hover { color:var(--color-accent,#F5E022); }
.topbar__items { display:flex; align-items:center; gap:22px; }
@media(max-width:860px){ .topbar .hide-sm { display:none !important; } }
@media(max-width:520px){
  .topbar__inner { justify-content:center; }
  .topbar__items { gap:16px; }
}

/* ---------- Cabeçalho ---------- */
.site-header { position:sticky; top:0; z-index:50; background:rgba(240,242,255,.88);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(24,24,23,.07);
  transition:background .5s, border-color .5s, box-shadow .5s; }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px; }
.site-header .brand { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.site-header .brand img { height:42px; width:auto; object-fit:contain; display:block;
  transition:opacity .2s; }
.main-nav { display:none; align-items:center; gap:30px; }
.main-nav a { font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(24,24,23,.5); text-decoration:none; position:relative; transition:color .2s; padding:6px 0; }
.main-nav a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:var(--color-primary,#639AD0); border-radius:2px; transition:width .3s cubic-bezier(.16,1,.3,1); }
.main-nav a:hover, .main-nav a.is-active { color:#181817; }
.main-nav a.is-active::after, .main-nav a:hover::after { width:100%; }
.header-actions { display:flex; align-items:center; gap:10px; position:relative; }
@media(min-width:1000px){ .main-nav { display:flex; } .menu-toggle { display:none !important; } }

/* ---------- Selo de 50 anos no cabeçalho ---------- */
/* Sobe para o menu quando o selo grande da página sai da tela, e daí acompanha
   o visitante pelo site inteiro.
   Fica FORA DO FLUXO, ancorado à esquerda do botão de orçamento: aparecendo e
   sumindo, não empurra nada — o menu não dá solavanco enquanto se rola.
   Classes e animações com nome próprio porque o selo grande mora no site.css,
   que as três landing pages não carregam. */
.selo-menu {
  position:absolute; right:100%; top:50%; margin-right:15px;
  width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.32)) drop-shadow(0 0 9px rgba(212,175,55,.45));
  /* parte de baixo e um pouco torto: parece que subiu da página */
  opacity:0; visibility:hidden;
  transform:translateY(calc(-50% + 15px)) scale(.5) rotate(-20deg);
  transition:opacity .4s ease,
             transform .6s cubic-bezier(.34,1.42,.5,1),
             visibility 0s linear .4s;
}
.selo-menu.is-in {
  opacity:1; visibility:visible;
  transform:translateY(-50%) scale(1) rotate(0deg);
  transition:opacity .4s ease,
             transform .6s cubic-bezier(.34,1.42,.5,1),
             visibility 0s;
  animation:selo-menu-chega .9s ease-out 1;   /* brilho de chegada, uma vez */
}
/* aro metálico girando */
.selo-menu::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,
    #7a5c12 0%, #f8e79b 10%, #d4af37 22%, #fff6d0 33%,
    #a8791a 45%, #f8e79b 57%, #d4af37 70%, #fff6d0 82%, #7a5c12 100%);
  animation:selo-menu-gira 9s linear infinite;
}
/* aro tracejado externo */
.selo-menu::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px dashed rgba(212,175,55,.5);
  animation:selo-menu-gira 26s linear infinite reverse;
}
.selo-menu__miolo {
  position:relative; z-index:2; width:calc(100% - 5px); height:calc(100% - 5px);
  border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 32% 26%, #2d2a22 0%, #16150f 72%);
  border:1px solid rgba(248,231,155,.35);
  box-shadow:inset 0 1px 6px rgba(0,0,0,.6);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1; text-align:center;
}
/* brilho passando pelo vidro */
.selo-menu__miolo::after {
  content:''; position:absolute; top:-60%; left:-130%;
  width:55%; height:220%; transform:rotate(18deg); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,248,220,.45), transparent);
  animation:selo-menu-brilho 5s ease-in-out infinite;
}
.selo-menu__num {
  font-family:'Oswald',sans-serif; font-size:1.18rem; font-weight:700; letter-spacing:-.02em;
  background:linear-gradient(160deg,#fff6d0 0%,#f0d071 35%,#d4af37 62%,#a8791a 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.selo-menu__anos {
  font-family:'Oswald',sans-serif; font-size:.46rem; font-weight:600;
  letter-spacing:.18em; padding-left:.18em; color:#f4e3ab; margin-top:1px;
}
@keyframes selo-menu-gira   { to { transform:rotate(360deg) } }
@keyframes selo-menu-brilho { 0%{left:-130%} 45%,100%{left:190%} }
@keyframes selo-menu-chega {
  0%   { filter:drop-shadow(0 4px 10px rgba(0,0,0,.32)) drop-shadow(0 0 0 rgba(212,175,55,0)); }
  35%  { filter:drop-shadow(0 4px 10px rgba(0,0,0,.32)) drop-shadow(0 0 22px rgba(212,175,55,.95)); }
  100% { filter:drop-shadow(0 4px 10px rgba(0,0,0,.32)) drop-shadow(0 0 9px rgba(212,175,55,.45)); }
}
/* No celular o selo continua, um pouco menor, no espaço que o botão só-ícone
   liberou. Abaixo de 360px ele encostaria na logo, então some. */
@media(max-width:700px){
  .selo-menu { width:44px; height:44px; margin-right:12px; }
  .selo-menu__num  { font-size:1.04rem; }
  .selo-menu__anos { font-size:.42rem; }
}
@media(max-width:359px){ .selo-menu { display:none; } }
/* quem pediu menos movimento no sistema não vê o selo girando nem chegando */
@media(prefers-reduced-motion:reduce){
  .selo-menu, .selo-menu::before, .selo-menu::after, .selo-menu__miolo::after {
    animation:none !important;
  }
  .selo-menu { transition-duration:.01ms; transform:translateY(-50%) scale(1); }
}

/* Botão de orçamento do cabeçalho.
   Preso ao .site-header porque pastas e panfletos definem o próprio .btn-wa:
   sem isso, o botão do menu sairia com a cara da LP em vez da do site. */
.site-header .btn-wa { position:relative; display:inline-flex; align-items:center;
  justify-content:center; gap:7px; padding:10px 20px; border-radius:9999px;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; text-decoration:none; background:linear-gradient(135deg,#25D366,#0da84e);
  border:none; cursor:pointer; box-shadow:0 8px 30px -8px rgba(37,211,102,.45);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.site-header .btn-wa:hover { transform:translateY(-2px) scale(1.02);
  box-shadow:0 16px 44px -8px rgba(37,211,102,.55); }
.site-header .btn-wa::after { content:none; }   /* panfletos põe um brilho no ::after */
/* A LP de panfletos tem, na regra de celular dela:
     .btn-wa { padding:14px 26px !important; font-size:.88rem !important; width:100% }
   Serve para os botões do corpo da página dela, que ocupam a largura toda. Mas
   o !important passa por cima da linha acima e incha o botão do menu de 142
   para 181px, empurrando o sanduíche para fora da tela. Daí o !important aqui:
   é o único jeito de o menu se defender de uma regra de página. */
@media(max-width:768px){
  .site-header .btn-wa { padding:10px 20px !important; font-size:.72rem !important;
    width:auto !important; }
}
/* No celular o cabeçalho tem pouco espaço: o botão vira só o ícone, num círculo.
   Isso libera cerca de 100px — o suficiente para o selo de 50 anos também caber. */
@media(max-width:600px){
  .site-header .btn-wa { width:44px !important; height:44px !important;
    padding:0 !important; gap:0 !important; border-radius:50% !important; }
  .site-header .btn-wa svg { width:20px; height:20px; }
  /* O rótulo sai da vista mas continua existindo: sem ele o link ficaria sem
     nome nenhum para quem usa leitor de tela. */
  .site-header .btn-wa span { position:absolute; width:1px; height:1px; padding:0;
    margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
}

/* ---------- Ao rolar: barra escura e logo branca ---------- */
/* A troca da logo é feita no menu.js. */
.site-header.scrolled { background:rgba(24,24,23,.96); border-bottom-color:rgba(255,255,255,.06);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.55); }
.site-header.scrolled .main-nav a { color:rgba(255,255,255,.5); }
.site-header.scrolled .main-nav a:hover,
.site-header.scrolled .main-nav a.is-active { color:#fff; }
.site-header.scrolled .menu-toggle { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); }
.site-header.scrolled .menu-toggle span { background:rgba(255,255,255,.75); }
.mobile-nav.scrolled { background:rgba(24,24,23,.97); }
.mobile-nav.scrolled.is-open { border-bottom-color:rgba(255,255,255,.07); }
.mobile-nav.scrolled a { color:rgba(255,255,255,.6); border-bottom-color:rgba(255,255,255,.07); }
.mobile-nav.scrolled a:hover { color:#fff; background:rgba(255,255,255,.04); }

/* ---------- Botão sanduíche ---------- */
/* 44px é o mínimo que a Apple recomenda para alvo de toque. Só aparece abaixo
   de 1000px, então o tamanho não afeta o computador. */
.menu-toggle { width:44px; height:44px; border-radius:11px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; border:1px solid rgba(24,24,23,.12);
  background:rgba(255,255,255,.7); cursor:pointer; transition:all .2s; }
.menu-toggle:hover { border-color:rgba(99,154,208,.5); background:rgba(99,154,208,.08); }
.menu-toggle span { width:17px; height:1.5px; background:rgba(24,24,23,.6); border-radius:2px;
  display:block; transition:all .3s; }

/* ---------- Menu do celular ---------- */
.mobile-nav { position:fixed; left:0; right:0; top:0; z-index:49; background:rgba(240,242,255,.98);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;
  max-height:0; overflow:hidden; visibility:hidden; pointer-events:none;
  transition:max-height .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s; }
.mobile-nav.is-open { visibility:visible; pointer-events:auto;
  border-bottom-color:rgba(24,24,23,.07);
  box-shadow:0 14px 30px -16px rgba(24,24,23,.3);
  transition:max-height .35s cubic-bezier(.16,1,.3,1), visibility 0s; }
@media(min-width:1000px){ .mobile-nav { display:none !important; } }
.mobile-nav a { display:flex; align-items:center; gap:10px; padding:15px 24px; font-size:.78rem;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(24,24,23,.55);
  text-decoration:none; border-bottom:1px solid rgba(24,24,23,.06); }
.mobile-nav a:hover { color:#181817; background:rgba(24,24,23,.03); }

/* ---------- Barra de rolagem da página ---------- */
/* Mora aqui, e não no styles.css, porque este é o único CSS que TODAS as
   páginas carregam — inclusive as 3 LPs (sacolas, pastas, flyers), que têm
   folha de estilo própria.
   O seletor começa com `html` de propósito: as LPs declaram
   `::-webkit-scrollbar { width:5px }` no estilo delas, e `html::-webkit-scrollbar`
   é mais específico, então ganha a disputa sem precisar de !important e sem
   depender da ordem em que os arquivos entram.
   Barras DENTRO de caixas (galerias que rolam de lado) continuam finas: quem
   cuida delas é o seletor sem `html`, no styles.css e nas próprias LPs.
   Largura de 15px para dar pra pegar e arrastar com o mouse, em vez de
   depender da rodinha. A borda da cor do trilho afina a aparência sem reduzir
   a área de clique. */
html::-webkit-scrollbar { width:15px; }
html::-webkit-scrollbar-track { background:#E8EAF6; }
html::-webkit-scrollbar-thumb { background:#9BAFD4; border-radius:10px;
  border:3px solid #E8EAF6; }
html::-webkit-scrollbar-thumb:hover { background:#7A94BE; }
/* Firefox ignora as regras acima; esta é a que vale lá. */
html { scrollbar-width:auto; scrollbar-color:#9BAFD4 #E8EAF6; }