- recua meio
--gap-3 e devolve o mesmo tanto de padding, então o texto não sai do lugar
e a linha cai no centro exato. Mexer em --gap-3 continua certo sozinho — é
a mesma variável nos dois lados da conta.
align-self:stretch é o que faz o filete correr a altura toda da linha. Sem
ele, o align-items:start acima encolhe a
- . É isso que faz ele ocupar a largura inteira. O relative fica
no link, só pra prender o sublinhado embaixo dele. */
.has-mega > a{position:relative}
.has-mega > a::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
background:var(--accent); transform:scaleX(0); transition:transform .2s ease;
}
.has-mega:hover > a::after,.has-mega:focus-within > a::after{transform:scaleX(1)}
.has-mega:hover > a,.has-mega:focus-within > a{color:var(--text)}
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--bg); border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .18s ease, transform .18s ease, visibility .18s;
box-shadow:0 18px 40px rgba(0,0,0,.45);
}
/* Ponte invisível sobre o vão entre o fim do link e o topo do painel: sem ela
o hover cai no meio do caminho e o painel pisca ao descer o cursor.
Altura igual ao padding do header, pra não cobrir o link vizinho. */
.mega::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:.35rem}
.has-mega:hover > .mega,.has-mega:focus-within > .mega{
opacity:1; visibility:visible; transform:translateY(0);
}
/* Uma linha SÓ, qualquer que seja o número de grupos. Com colunas fixas em
4, o masculino (4 grupos + o 'Ver inteiro') estourava pra uma segunda
fila e o painel ficava com o dobro da altura. grid-auto-flow:column põe
todos lado a lado — 5 no masculino e no feminino, 3 no kids, 5 no Sobre —
e o painel para de mudar de tamanho de aba pra aba. */
.mega-inner{
max-width:var(--maxw); margin-inline:auto;
padding:1.4rem 1.25rem 1.6rem;
grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:1.6rem;
}
.mega-col-end{border-left:1px solid var(--line); padding-left:1.4rem}
/* O painel do Sobre não tem sub-item: cada destino é uma coluna de um item
só, e a linha fica com a mesma altura da primeira fila dos outros. */
.mega-linha .mega-inner{padding-block:1.1rem 1.2rem; gap:1.25rem}
}
/* ---------- card grande, do primeiro nível ---------- */
.card-lg{padding:1.75rem 1.6rem; gap:.85rem}
.card-lg .card-title{font-size:var(--t-xl)}
.card-lg .card-mark{width:64%; right:-16%; bottom:-24%}
/* Card de linha com foto, na home (16/10). Fotos de peças da linha trocando a
cada 6 s (script em _layout.mjs): duas
empilhadas, e a troca é só por opacidade, sem deslizar nem crescer — a regra da casa é não gritar. O texto mora num bloco próprio pra o card poder deitar no celular: foto à esquerda, texto à direita, e as três linhas não viram duas telas de rolagem. */ .card-linha .card-foto{margin:-1.75rem -1.6rem .4rem} .card-giro img{position:absolute; inset:0; transition:opacity 1.2s ease} /* 1,2 s: com .7 a troca parecia um corte */ .card-giro img.giro-fora{opacity:0} .card-texto{display:flex; flex-direction:column; gap:.85rem; flex:1} .card-texto p{margin:0} @media (max-width:560px){ .card-linha{display:grid; grid-template-columns:40% 1fr; column-gap:1.1rem; padding:1.25rem 1.25rem 1.25rem 0} .card-linha .card-foto{margin:-1.25rem 0; aspect-ratio:auto} .card-linha .card-texto{gap:.6rem} .card-linha .card-title{font-size:var(--t-lg)} } /* ---------- mural de avaliações ---------- Três colunas que sobem sozinhas. Cada coluna carrega a lista DUAS vezes e anda até translateY(-50%): metade da trilha é exatamente uma cópia mais um gap, então o último quadro é igual ao primeiro e o loop não tem emenda. É por isso que o padding-bottom da trilha TEM que ser igual ao gap — se divergir, o loop pula. Contraste medido sobre --surface (#1F1F1F, L=0,0137): texto #DEDEDE 12,0:1 · nome #DEDEDE 12,0:1 · credencial #A8A8A8 6,9:1 monograma #A8A8A8 sobre --bg 7,5:1. Todos passam AA pra texto normal. */ .av-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--gap) var(--gap-2); flex-wrap:wrap; margin-bottom:var(--gap-3); } .av-cab h2{font-size:var(--t-2xl)} .av-conta{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--label); font-size:var(--t-sm); color:var(--text-2); text-decoration:none; transition:color .2s ease; } .av-conta:hover{color:var(--text)} .av-seta{color:var(--accent); transition:transform .2s ease} .av-conta:hover .av-seta{transform:translateX(3px)} .av-mural{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-2); height:clamp(430px,66vh,640px); overflow:hidden; /* Esvanecimento no topo e no pé: sem ele o card entra e sai cortado a faca. */ -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%); } .av-col{overflow:hidden} /* É a FITA que anda, nunca as trilhas. -50% da fita é uma cópia inteira mais o gap, então o quadro do fim é pixel a pixel o do começo e a volta não tem emenda. Até 28/08 a animação estava em cada .av-trilha, e ali -50% era metade de UMA cópia: a coluna subia meia cópia e voltava a zero de um golpe. Era de onde vinham as travadas. */ .av-fita{animation:av-rola var(--av-dur,56s) linear infinite; will-change:transform} .av-trilha{ display:flex; flex-direction:column; gap:var(--gap-2); padding-bottom:var(--gap-2); } @keyframes av-rola{from{transform:translateY(0)} to{transform:translateY(-50%)}} /* Ponta desce · meio sobe · ponta desce. Com três colunas, nth-child(odd) são a 1 e a 3. O reverse nelas roda a fita de -50% pra 0 — é o mesmo par de quadros lido ao contrário, então continua sem emenda nos dois sentidos. */ .av-col:nth-child(odd) .av-fita{animation-direction:reverse} /* Pausa no hover não é enfeite: sem ela não dá pra ler nem clicar no card. */ .av-mural:hover .av-fita, .av-mural:focus-within .av-fita{animation-play-state:paused} .av-card{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--gap-2); color:inherit; text-decoration:none; transition:border-color .2s ease, background-color .2s ease; } .av-card:hover{border-color:var(--line-strong); background:var(--surface-2)} .av-txt{margin:0; font-size:var(--t-sm); line-height:1.62; color:var(--text)} .av-pe{display:flex; align-items:center; gap:.7rem; margin-top:var(--gap-2)} .av-ini{ width:38px; height:38px; flex:none; border-radius:50%; background:var(--bg); border:1px solid var(--line-strong); display:grid; place-items:center; font-family:var(--label); font-size:var(--t-xs); font-weight:700; letter-spacing:.03em; color:var(--text-2); } .av-quem{flex:1; min-width:0} .av-nome{display:block; font-size:var(--t-sm); font-weight:600; line-height:1.25} .av-cred{display:block; font-size:var(--t-xs); color:var(--text-2); line-height:1.4} .av-g{width:17px; height:17px; flex:none} .av-conta .av-g{width:15px; height:15px} /* Sem movimento — em qualquer largura. As MESMAS três colunas, paradas: não se perde nenhuma das 14. O !important é obrigatório porque a regra global de reduced-motion, lá no topo, já usa !important em animation-duration; sem ele a trilha congelaria no meio do ciclo, cortada. */ @media (prefers-reduced-motion:reduce){ .av-mural{ height:auto; overflow:visible; align-items:start; -webkit-mask-image:none; mask-image:none; } .av-col{display:flex; flex-direction:column; gap:var(--gap-2)} .av-fita{display:contents; animation:none!important; transform:none!important} .av-trilha{display:contents} .av-clone{display:none} } /* Tela estreita: uma coluna, parada, seis avaliações. As outras oito estão no perfil, a um toque no cabeçalho. Duas coisas que NÃO se faz aqui, e as duas por experiência ruim: marquee de coluna única no celular obriga o dedo a competir com a rolagem da página; e lista interna com rolagem própria vira armadilha — pra passar do bloco você tem que exaurir a lista antes. Empilhado e curto resolve os dois. */ @media (max-width:900px){ .av-mural{ grid-template-columns:1fr; gap:var(--gap); height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none; } .av-col{display:contents} .av-fita{display:contents; animation:none!important; transform:none!important} .av-trilha{display:contents} .av-clone{display:none} .av-trilha > .av-card:nth-child(n+3){display:none} .av-cab{margin-bottom:var(--gap-2)} .av-cab h2{font-size:var(--t-xl)} } /* ---------- mapa da loja ---------- iframe do Google Maps. Vem claro e não dá pra tematizar — inverter filtro deixa o texto do mapa ilegível. Fica claro mesmo, emoldurado, lendo como janela e não como remendo. */ .mapa-caixa{ margin-top:var(--gap-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface-2); } .mapa{ display:block; width:100%; border:0; height:clamp(280px,36vw,420px); } /* ---------- ficha da loja ---------- "Endereço" e "Horário" são
de verdade — mesmo elemento, mesma regra e mesma cor de "Acessibilidade", então acompanham qualquer mudança futura de heading sem virar exceção. O dado vem no MESMO tamanho e na MESMA cor do rótulo, e só o peso separa: 700 no título, 400 no dado. Os seletores usam .loja-dado de propósito: .rich p (0,1,1) sobrepõe cor e entrelinha de uma classe solta, e .loja-dado .loja-x (0,2,0) ganha dele. */ /* Endereço · Horário · Acessibilidade sobem um degrau da escala: --t-lg (1,375) pra --t-xl (1,75). A classe existe pra isso ser uma ESCOLHA: /contato/ usa o mesmo .store .rich e cresceria junto sem ninguém pedir. Ele pede — desde 28/08 leva .rich-loja de propósito, pra ler igual a /a-loja/. Quem montar outra página com .store e não quiser o degrau, é só não pôr a classe. O dado fica em --t-lg, então a diferença deixa de ser só de peso. */ .rich-loja h3{font-size:var(--t-xl)} .loja-dado h3{margin-top:0} .loja-dado .loja-forte{ font-family:var(--display); font-size:var(--t-lg); font-weight:400; line-height:1.25; color:var(--text); margin:.5rem 0 0; } .loja-dado .loja-forte + .loja-forte{margin-top:.2rem} .loja-dado .loja-comp{ font-size:var(--t-sm); color:var(--text-2); line-height:1.55; margin:.5rem 0 0; } .loja-foto{ margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface-2); } .loja-foto img{display:block; width:100%; height:auto} /* ---------- história: texto ao lado do retrato ---------- O retrato é 0,687 (960x1398) — alto. Ao lado de UMA seção sobraria meia coluna vazia, então a coluna de texto carrega duas seções e as alturas se aproximam. 1,3fr/1fr põe a foto em ~478px, ou seja ~696px de altura. */ .historia-dupla{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--gap-3); align-items:start; } .historia-foto{ margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface-2); } .historia-foto img{display:block; width:100%; height:auto} .historia-dupla .rich em{color:var(--text); font-style:italic} @media (max-width:820px){ .historia-dupla{grid-template-columns:1fr; gap:var(--gap-2)} .historia-foto{max-width:26rem; margin-inline:auto} } /* ---------- topo com retrato ao lado (página da história) ---------- */ .retrato-topo{ display:grid; grid-template-columns:1.25fr 1fr; gap:var(--gap-3); align-items:center; padding-block:var(--gap-4) var(--gap-3); border-bottom:1px solid var(--line); } .retrato-topo .lede{margin-top:.9rem} .retrato-topo h1{margin-top:.7rem} @media (max-width:820px){ .retrato-topo{grid-template-columns:1fr; align-items:start; gap:var(--gap-2)} .retrato-topo .historia-foto{max-width:22rem; margin-inline:auto} } /* Link de destaque no meio do texto: puxa pra outra página sem virar botão. #F25623 sobre --bg dá 5,23:1. O filete embaixo engrossa no hover em vez de aparecer do nada, pra não piscar. */ .link-fogo{ color:var(--accent); font-weight:600; text-decoration:none; background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat; background-size:100% 1px; background-position:0 100%; transition:color .2s ease, background-size .2s ease; } .link-fogo:hover,.link-fogo:focus-visible{ color:var(--accent-bright); background-size:100% 2px; background-image:linear-gradient(var(--accent-bright),var(--accent-bright)); } /* Diferenciais em lista curta: item de uma linha, sem parágrafo. Três colunas porque frase de quatro palavras numa coluna de 550px deixa metade vazia. O filete laranja do .arg segue marcando cada um. */ .args-curto{grid-template-columns:repeat(3,1fr); gap:var(--gap-2) var(--gap-3)} .args-curto .arg{gap:0; justify-content:center} .args-curto .arg h3{font-size:var(--t-md); line-height:1.3} @media (max-width:900px){.args-curto{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.args-curto{grid-template-columns:1fr}} /* ---------- Linktree ---------- Fundo: o K na parede (16/10). O símbolo da marca gigante, cortado pela borda esquerda e quase da cor do fundo; só a ponta da agulha puxa pro laranja. É o uso que o design-guide prevê pro símbolo ("marca d'água atrás de um card"). Escolhido entre dez ideias de fundo. Entra uma vez, da esquerda pra direita, na direção do traço, e fica parado: a regra da casa é não gritar. Até 16/10 o fundo era uma malha animada de quatro manchas, laranja e cinza, adaptada de um shader que o cliente mandou. Está no git, se precisar voltar. O K é um com o simbolo-k.svg de máscara e um degradê por baixo: um arquivo só, e a cor vem daqui, como manda a regra do vetor no design-guide. O fundo continua o #171717 do kit, o mesmo do header e do rodapé, então não existe emenda de cor na página. CONTRASTE — medido, no pior ponto atrás de cada texto. Sobre o vidro dos atalhos, o #DEDEDE dá 9,78:1 com a ponta laranja atrás e 11,73:1 com o corpo do K. A logo dá 9,81:1 sobre o corpo do K. O pé da página não tem vidro, e com a agulha laranja atrás o #A8A8A8 cairia pra 2,20:1: por isso ele leva um halo da cor do fundo (.lt-pe), que devolve o fundo liso em volta da letra. */ .pg-linktree main{position:relative; z-index:1} .pg-linktree .site-footer{position:relative; z-index:2; background:var(--bg)} .lt-fundo{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--bg); } .lt-k{ position:absolute; top:-8vh; left:-210px; width:max(120vh,900px); aspect-ratio:1; background:linear-gradient(135deg,#282828 38%,#303030 66%,rgba(242,86,35,.75) 100%); -webkit-mask:url(/assets/img/simbolo-k.svg) center/contain no-repeat; mask:url(/assets/img/simbolo-k.svg) center/contain no-repeat; animation:lt-k-entra 1.6s cubic-bezier(.2,.7,0,1) both; } @keyframes lt-k-entra{from{opacity:0; transform:translateX(-5vw)}} /* No computador a coluna fica no meio, e a agulha laranja caía bem embaixo do pé da página. Mais à esquerda, a ponta termina antes da coluna. */ @media (min-width:900px){.lt-k{left:-440px}} /* Grão. É o feTurbulence do shader antigo, virado textura estática: quebra o bandeamento que degradê grande sempre faz em tela de 8 bits. */ .lt-grao{ position:absolute; inset:0; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); } /* prefers-reduced-motion nao precisa de regra aqui: a do topo do arquivo ja congela toda animacao do site com !important. */ /* ---------- Linktree: o palco ---------- */ .lt-palco{ position:relative; z-index:1; min-height:66svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--gap-3); text-align:center; } .lt-marca{margin:0; line-height:0} .lt-logo{height:clamp(52px,13vw,92px); width:auto; color:var(--text); display:block} /* ---------- Linktree: os atalhos (16/10) ---------- O WhatsApp grande, com o número, e os outros três em quadrados lado a lado, ícone em cima do nome. Escolhido entre seis ideias de botão: a lista antiga, quatro caixas iguais com letra de 14px, borda cinza e uma seta miúda, lia como formulário. Vidro só nos quadrados, que precisam se descolar do K atrás; o laranja sólido continua sendo só do WhatsApp. */ .lt-atalhos{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; width:100%; max-width:32rem; margin:0 auto; padding:0; list-style:none; } .lt-atalhos li:first-child{grid-column:1/-1} .lt-atalhos a{ color:var(--text); text-decoration:none; -webkit-tap-highlight-color:transparent; transition:transform .3s cubic-bezier(.32,.72,0,1), background-color .3s cubic-bezier(.32,.72,0,1); } .lt-atalhos a:active{transform:scale(.96)} .lt-ico svg{display:block; width:22px; height:22px} .lt-zap{ display:grid; grid-template-columns:2.75rem 1fr auto; align-items:center; gap:.9rem; padding:.9rem 1.1rem .9rem .9rem; border-radius:14px; text-align:left; background:var(--accent-bright); box-shadow:0 16px 30px -16px rgba(242,86,35,.6); } .lt-atalhos .lt-zap, .lt-atalhos .lt-zap:hover{color:var(--on-accent)} /* 6,34:1; 5,23:1 no hover */ .lt-zap:hover{background:var(--accent)} .lt-zap .lt-ico{display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:50%; background:rgba(23,23,23,.12)} .lt-zap strong{display:block; font:600 var(--t-md)/1.2 var(--body)} .lt-zap small{display:block; font:400 var(--t-sm)/1.35 var(--body)} .lt-seta{width:18px; height:18px; transition:transform .3s cubic-bezier(.32,.72,0,1)} .lt-zap:hover .lt-seta{transform:translateX(3px)} .lt-ladrilho{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; min-height:6.25rem; padding:1rem .5rem; border-radius:14px; text-align:center; font:600 var(--t-sm)/1.2 var(--body); background:rgba(30,30,30,.74); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.05); } .lt-atalhos .lt-ladrilho:hover{color:var(--text); background:rgba(42,42,42,.86)} .lt-ladrilho .lt-ico svg{width:26px; height:26px} .lt-pe{color:var(--text-2); font-size:var(--t-sm); line-height:1.7; margin:0; text-shadow:0 0 3px var(--bg), 0 0 8px var(--bg), 0 0 14px var(--bg)} /* ---------- Linktree: destaque com prazo (aulão de RITBOX, 24/10) ---------- O rosa só existe aqui: é a cor do Outubro Rosa e o que liga o cartão à página de inscrição, que usa o mesmo tom. Sobre o vidro, o rosa dá 5,64:1 no pior caso (a ponta laranja do K passando atrás). O cartão é vidro como os atalhos, com o mesmo raio, pra o laranja continuar sendo só do WhatsApp. Sai junto com o bloco em linktree.mjs depois do evento. */ .lt-evento{ --rosa:#FF8DBB; display:flex; flex-direction:column; gap:.3rem; width:100%; max-width:32rem; padding:1.1rem 1.2rem; text-align:left; text-decoration:none; color:var(--text); background:rgba(36,36,36,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,141,187,.4); border-left:3px solid var(--rosa); border-radius:14px; transition:border-color .18s ease, background-color .18s ease; } .lt-evento:hover{color:var(--text); background:rgba(48,48,48,.86); border-color:var(--rosa)} .lt-evento-olho{ font-family:var(--label); font-size:var(--t-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--rosa); } .lt-evento-titulo{font-family:var(--display); font-size:var(--t-lg); line-height:1.2; letter-spacing:-.02em} .lt-evento-texto{color:var(--text-2); font-size:var(--t-sm); line-height:1.5} .lt-evento-cta{margin-top:.35rem; font-weight:600; font-size:var(--t-sm); color:var(--rosa)} /* ========================================================================== Consentimento de cookies — 2026-09-09 Só existe no HTML quando a medição está ligada (_medicao.mjs, ATIVA). Banner sem medição pediria consentimento pra coisa nenhuma. Ancorado embaixo e centralizado, não em faixa de tela cheia: a faixa cobre o conteúdo em celular e empurra a pessoa a clicar em qualquer coisa pra ler a página — que é o oposto de escolha livre. ========================================================================== */ .consentimento{ position:fixed; left:0; right:0; bottom:0; z-index:60; padding:1rem; display:flex; justify-content:center; } .consentimento-caixa{ width:min(46rem,100%); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); padding:1.25rem 1.35rem; box-shadow:0 10px 40px rgba(0,0,0,.45); } .consentimento-titulo{ font-family:var(--display); font-weight:700; font-size:var(--t-md); color:var(--text); margin:0 0 .4rem; } .consentimento p{color:var(--text-2); font-size:var(--t-sm); line-height:1.6; margin:0} .consentimento a{color:var(--accent)} .consentimento-botoes{display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap} /* Os dois botões dividem a linha em partes iguais no celular. Peso igual é requisito de consentimento livre, não preferência estética. */ .consentimento-botoes .btn{flex:1 1 9rem; justify-content:center} /* O link de rodapé que reabre a escolha — a promessa de revogação da política precisa de um botão, senão é só frase. Herda a cara dos vizinhos do rodapé. */ .link-botao{ background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:inherit; color:inherit; text-decoration:underline; text-underline-offset:2px; } .link-botao:hover{color:var(--accent)} /* `display:flex` acima vence o atributo `hidden` do HTML, que só aplica `display:none` pela folha do navegador. Sem esta linha o banner aparece pra todo mundo, inclusive pra quem já escolheu — e o `hidden` do JS não faz nada. Achado ao testar, em 2026-09-09. */ .consentimento[hidden]{display:none} /* ========================================================================== Catálogo com foto — 25/09, repaginado no mesmo dia. A página da peça segue o desenho de loja grande (referência: a página de produto da Nike): tira de fotos, foto grande com setas, e a coluna de compra ao lado. As fotos tratadas têm parede cinza clara, então no fundo preto do site elas se leem como placa clara — o cinza é igual em todas. ========================================================================== */ .grid-4{grid-template-columns:repeat(4,1fr)} @media (max-width:1020px){.grid-4{grid-template-columns:repeat(3,1fr)}} @media (max-width:860px){.grid-4{grid-template-columns:repeat(2,1fr)}} /* Atalho de tipos na página do grupo: as peças de todos os tipos já estão embaixo, e o chip leva à página de um tipo só. */ .tipos-atalho{margin-top:1.4rem} /* ---------- card de peça ---------- É um
: o link mora no título e se estica por cima do card inteiro (.card-cobre::after), e as setas da foto ficam uma camada acima dele. */ .card-peca:hover{border-color:var(--line-strong); background:var(--surface-2)} .card-peca:hover .card-link{color:var(--accent-bright)} .card-peca:hover .card-foto .card-mark{opacity:.11} .card-peca:has(.card-cobre:focus-visible){border-color:var(--accent)} .card-cobre{color:inherit; text-decoration:none} .card-cobre::after{content:""; position:absolute; inset:0; z-index:1} .card-cobre:focus-visible{outline:none} .card-peca:hover .card-cobre{color:var(--accent-bright)} /* Peça sem foto (regra 4: só aparece na própria prateleira): o símbolo com um aviso, pra vaga vazia não parecer foto que não carregou. */ .card-foto-aviso{ position:absolute; left:0; right:0; bottom:1rem; text-align:center; font-family:var(--label); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); } .card-cores{ font-family:var(--label); font-size:var(--t-xs); letter-spacing:.04em; color:var(--text-2); margin-top:-.35rem; } /* Setas da foto do card. No mouse, aparecem ao passar por cima; no toque, ficam sempre à vista — não existe "passar por cima" no celular. */ .card-seta{ position:absolute; top:50%; z-index:2; transform:translateY(-50%); width:2.25rem; height:2.25rem; border-radius:50%; display:grid; place-items:center; padding:0; cursor:pointer; background:rgba(255,255,255,.92); color:#171717; border:0; box-shadow:0 2px 10px rgba(0,0,0,.25); opacity:0; transition:opacity .15s ease, background-color .15s ease; } .card-seta[hidden]{display:none} .card-seta svg{width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round} .card-seta-ant{left:.6rem} .card-seta-prox{right:.6rem} .card-peca:hover .card-seta,.card-seta:focus-visible{opacity:1} .card-seta:hover{background:#fff} .card-seta:focus-visible{outline:2px solid var(--accent); outline-offset:2px} @media (hover:none){.card-seta{opacity:1}} /* ---------- página da peça ---------- */ .peca-topo{padding-block:1.4rem .2rem} .peca-sec{padding-block:1rem var(--gap-4)} /* A foto grande cabe na tela: a largura sai da altura da janela (4:5), com teto de 620px. Assim ela não passa da dobra num notebook de 768px. */ .peca{ --palco-w:min(44vw, calc((100svh - 8.5rem) * .8), 620px); display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start; } .galeria{display:grid; grid-template-columns:4.5rem var(--palco-w); gap:.75rem; align-items:start} .galeria-vazia{grid-template-columns:var(--palco-w)} /* A tira tem a altura da foto grande e rola por dentro. O truque do absolute: a caixa não tem altura própria, então quem manda na linha é a foto. */ .galeria-tira-caixa{position:relative; align-self:stretch} .galeria-tira{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; list-style:none; margin:0; padding:0 .2rem 0 0; display:flex; flex-direction:column; gap:.5rem; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; } .galeria-tira a{ display:block; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface-2); opacity:.7; transition:opacity .15s ease, border-color .15s ease; } .galeria-tira img{display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover} .galeria-tira a:hover{opacity:1} .galeria-tira a[aria-current="true"]{opacity:1; border-color:var(--text)} .galeria-palco{ position:relative; margin:0; aspect-ratio:4 / 5; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); scroll-margin-top:5.5rem; } .galeria-palco img{display:block; width:100%; height:100%; object-fit:cover} /* Setas da foto grande: as duas no canto de baixo, como na referência. */ .galeria-seta{ position:absolute; bottom:1rem; z-index:1; width:2.75rem; height:2.75rem; border-radius:50%; padding:0; border:0; cursor:pointer; display:grid; place-items:center; background:rgba(255,255,255,.94); color:#171717; box-shadow:0 2px 12px rgba(0,0,0,.25); transition:background-color .15s ease, transform .15s ease; } .galeria-seta[hidden]{display:none} .galeria-seta:hover{background:#fff; transform:scale(1.05)} .galeria-seta:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .galeria-seta svg{width:1.2rem; height:1.2rem; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round} .galeria-ant{right:4.3rem} .galeria-prox{right:1rem} .galeria-contador{ position:absolute; left:1rem; bottom:1.55rem; font-family:var(--label); font-size:var(--t-xs); font-variant-numeric:tabular-nums; background:rgba(23,23,23,.72); color:#fff; padding:.25rem .6rem; border-radius:999px; } /* Coluna de compra. */ .peca-info{display:flex; flex-direction:column; gap:.95rem; max-width:27rem; padding-top:.2rem} .peca-titulo{font-size:var(--t-2xl); line-height:1.08; margin:0} .peca-sub{font-size:var(--t-sm); color:var(--text-2); margin-top:-.55rem} .peca-preco{font-family:var(--label); font-size:var(--t-lg); font-variant-numeric:tabular-nums; color:var(--accent); margin-top:.2rem} .peca-pag{font-size:var(--t-sm); color:var(--text-2); margin-top:-.75rem} .peca-bloco{display:flex; flex-direction:column; gap:.65rem; padding-top:.95rem; border-top:1px solid var(--line)} .peca-rotulo{font-weight:600; color:var(--text)} .peca-rotulo strong{font-weight:400; color:var(--text-2)} .peca-rotulo-linha{display:flex; justify-content:space-between; align-items:baseline; gap:1rem} .peca-rotulo-linha a{font-weight:400; font-size:var(--t-sm); color:var(--text-2); text-decoration:underline} .peca-rotulo-linha a:hover{color:var(--text)} .peca-texto-curto{font-size:var(--t-sm); color:var(--text-2); line-height:1.6} /* Botões de modelo e de tamanho: mesma caixa, marcado = borda clara cheia. */ .peca-opcoes{display:flex; flex-wrap:wrap; gap:.5rem} .peca-tamanhos{display:grid; grid-template-columns:repeat(auto-fill,minmax(4.25rem,1fr)); gap:.5rem} .peca-opcao,.peca-tam{ font-family:var(--body); font-size:var(--t-sm); color:var(--text); background:transparent; border:1px solid var(--line-strong); border-radius:var(--radius); padding:.65rem .95rem; cursor:pointer; transition:border-color .15s ease, background-color .15s ease; } .peca-tam{padding:.8rem .5rem; text-align:center} .peca-opcao:hover,.peca-tam:hover{border-color:var(--text-2)} .peca-opcao[aria-pressed="true"],.peca-tam[aria-pressed="true"]{border-color:var(--text); box-shadow:inset 0 0 0 1px var(--text); background:var(--surface)} .peca-opcao:focus-visible,.peca-tam:focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* Cores: miniatura da própria peça, sempre a foto de frente. */ .peca-cores{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(3.9rem,1fr)); gap:.45rem; } .peca-cores[hidden]{display:none} .peca-cores button{ display:block; width:100%; padding:0; cursor:pointer; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface-2); transition:border-color .15s ease; } .peca-cores img{display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover} .peca-cores button:hover{border-color:var(--text-2)} .peca-cores button[aria-pressed="true"]{border-color:var(--text); box-shadow:0 0 0 1px var(--text)} .peca-cores button:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .peca-cta{width:100%; justify-content:center; border-radius:999px; padding-block:1.05rem; margin-top:.3rem} .peca-nota{font-size:var(--t-xs); color:var(--text-3); text-align:center; margin-top:-.45rem; line-height:1.5} /* Descrição e condições, embaixo, em duas colunas. */ .peca-detalhes{display:grid; grid-template-columns:1.15fr 1fr; gap:var(--gap-3); border-top:1px solid var(--line)} .peca-h2{font-size:var(--t-xl)} .rich .lista-detalhes,.rich .lista-cores{gap:.35rem} .rich .lista-cores strong{font-weight:600} /* As etiquetas da peça moram dentro de .rich, e `.rich ul` (0,1,1) vencia o `.chips` (0,1,0): viravam uma coluna de caixas largas, uma por linha. Estava assim desde antes do catálogo — só ficou visível com a página mais cheia. */ .rich ul.chips{flex-direction:row; flex-wrap:wrap; padding-left:0; gap:.35rem} @media (max-width:860px){ .peca{grid-template-columns:1fr} .galeria{grid-template-columns:1fr} .galeria-tira-caixa{display:none} .peca-info{max-width:none} .peca-titulo{font-size:var(--t-xl)} .peca-detalhes{grid-template-columns:1fr; gap:var(--gap-2)} }
- na altura do próprio texto e
a linha para no meio da página, com cara de corte acidental.
No celular a grade vira uma coluna só, e o mesmo recuo passa pro eixo
vertical: a linha deita e fica no meio do vão entre os dois blocos.
TIPOGRAFIA: o rótulo desce um degrau do
da esquerda (--t-xl -> --t-lg),
ou seja, fica do tamanho do DADO da esquerda. É isso que põe as duas colunas
em primeiro e segundo plano sem precisar de outra família de fonte. Antes o
rótulo era caixa alta miúda em --t-xs, que ao lado de um de 1,75rem
lia como legenda de rodapé, não como par. */
.store dl{
margin:0; display:flex; flex-direction:column; gap:1.6rem;
align-self:stretch;
border-left:1px solid var(--line);
margin-left:calc(var(--gap-3) / -2);
padding-left:calc(var(--gap-3) / 2);
}
@media (max-width:820px){
.store dl{
border-left:0; margin-left:0; padding-left:0;
border-top:1px solid var(--line);
margin-top:calc(var(--gap-3) / -2);
padding-top:calc(var(--gap-3) / 2);
}
}
.store dt{
font-family:var(--display); font-size:var(--t-lg); font-weight:700;
color:var(--text); line-height:1.25; margin-bottom:.45rem;
}
.store dd{margin:0; font-size:var(--t-base); color:var(--text-2); line-height:1.6}
.store dd strong{color:var(--text); font-weight:600}
/* ---------- rodapé ---------- */
.site-footer{border-top:1px solid var(--line); padding-block:var(--gap-4) var(--gap-3); margin-top:var(--gap-4)}
.foot-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-2) var(--gap-3)}
@media (max-width:760px){.foot-cols{grid-template-columns:repeat(2,1fr)}}
.foot-cols h4{
font-family:var(--label); font-weight:400; font-size:var(--t-xs);
letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:.8rem;
}
.foot-cols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.foot-cols a{font-size:var(--t-sm); color:var(--text-2); text-decoration:none}
.foot-cols a:hover{color:var(--text)}
.foot-legal{
margin-top:var(--gap-3); padding-top:var(--gap-2); border-top:1px solid var(--line);
display:flex; flex-wrap:wrap; gap:.5rem var(--gap-2);
font-size:var(--t-xs); color:var(--text-3);
}
/* ---------- WhatsApp flutuante (só celular) ---------- */
.wa-float{
position:fixed; right:1rem; bottom:1rem; z-index:60;
display:none; align-items:center; gap:.5rem;
background:var(--accent-bright); color:var(--on-accent);
font-family:var(--body); font-size:var(--t-sm); font-weight:600;
padding:.8rem 1.1rem; border-radius:999px; text-decoration:none;
box-shadow:0 6px 24px rgba(0,0,0,.45);
}
@media (max-width:860px){.wa-float{display:inline-flex}}
.visually-hidden{
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
position:absolute; left:-9999px; top:0;
background:var(--accent); color:var(--on-accent); padding:.7rem 1rem; z-index:100;
}
.skip-link:focus{left:0}
/* ---------- faixa full-bleed com fundo ---------- */
.band{background:var(--surface); border-block:1px solid var(--line)}
.band > .wrap{padding-block:var(--gap-5)}
.band.band-sm > .wrap{padding-block:var(--gap-4)}
/* ---------- linha de CTAs ---------- */
.cta-row{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:2rem}
/* ---------- conteúdo corrido (FAQ, políticas, categoria) ---------- */
.rich{display:flex; flex-direction:column; gap:1.1rem}
.rich p{color:var(--text-2); line-height:1.7}
.rich h3{margin-top:1.2rem}
.rich ul{margin:0; padding-left:1.15rem; color:var(--text-2); display:flex; flex-direction:column; gap:.45rem}
.rich strong{color:var(--text)}
/* ---------- FAQ ---------- */
.faq{display:flex; flex-direction:column; gap:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0; position:relative;
font-family:var(--display); font-weight:600; font-size:var(--t-base); color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"+"; position:absolute; right:.25rem; top:1rem;
font-family:var(--label); color:var(--accent); font-size:var(--t-md);
}
.faq details[open] summary::after{content:"–"}
.faq details > p{padding:0 0 1.2rem; color:var(--text-2); font-size:var(--t-sm); line-height:1.7; margin:0; max-width:60ch}
/* Resposta em linhas (a grade de tamanhos): uma linha por item, sem marcador. */
.faq details > .faq-linhas{list-style:none; padding:0; margin:-.7rem 0 1.2rem; color:var(--text-2); font-size:var(--t-sm); line-height:1.9}
/* ---------- cabeçalho de página interna ---------- */
.page-head{padding-block:var(--gap-4) var(--gap-3); border-bottom:1px solid var(--line)}
/* Só a migalha: o h1 e a linha de apoio subiram pro hero. */
.page-head-crumb{padding-block:var(--gap-2)}
.page-head h1{margin-block:.7rem .9rem}
.crumb{font-family:var(--label); font-size:var(--t-xs); color:var(--text-3)}
.crumb a{color:var(--text-3); text-decoration:none}
.crumb a:hover{color:var(--text-2)}
/* ---------- ficha de atributos da peça ---------- */
.ficha{width:100%; border-collapse:collapse; font-size:var(--t-sm)}
.ficha th{
text-align:left; font-family:var(--label); font-weight:400; font-size:var(--t-xs);
letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
padding:.65rem 1rem .65rem 0; border-bottom:1px solid var(--line); white-space:nowrap;
}
.ficha td{padding:.65rem 0; border-bottom:1px solid var(--line); color:var(--text-2)}
.ficha tr:last-child th,.ficha tr:last-child td{border-bottom:none}
.scroller{overflow-x:auto}
/* ---------- caixa de consulta da página de peça ---------- */
.buybox{
position:relative; overflow:hidden;
background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.75rem;
}
.buybox > *{position:relative}
@media (min-width:821px){.buybox{position:sticky; top:5.5rem}}
/* ---------- chips clicáveis: consulta direta por subcategoria ---------- */
.chips-link{gap:.5rem}
.chips-link li{padding:0; border:none}
.chips-link a{
display:inline-block; text-decoration:none;
font-family:var(--label); font-size:var(--t-xs); letter-spacing:.03em;
border:1px solid var(--line-strong); border-radius:2px;
padding:.45rem .7rem; color:var(--text-2);
transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.chips-link a:hover{border-color:var(--accent); color:var(--text); background:var(--surface)}
/* ==========================================================================
Cabeçalho e mega-menu.
Desktop: painel abre no hover e no foco de teclado. Celular: e acordeão.
Sem JavaScript nos dois casos.
========================================================================== */
/* Três colunas: logo à esquerda, nav ao lado dela, WhatsApp à direita.
A logo ficava no centro, com `1fr auto 1fr`. Isso só a mantém centrada
ENQUANTO o que está nas laterais couber na própria coluna. Com a entrada de
Acessórios o nav passou a seis itens e estourou o 1fr da esquerda —
minmax(0,1fr) deixa a COLUNA encolher, mas o conteúdo não encolhe junto:
ele transborda por cima do vizinho, e foi assim que a logo apareceu colada
no último item do menu.
Ancorada na esquerda não há centro pra defender. O nav ocupa o vão do meio e
cresce pra dentro dele — item novo no menu não empurra mais nada, que é a
fragilidade que a versão centrada tinha por construção. */
.header-bar{
display:grid; grid-template-columns:auto minmax(0,1fr) auto;
align-items:center; gap:1rem; padding-block:.3rem;
}
.brand{justify-self:start; display:flex; align-items:center; text-decoration:none}
.brand-logo{height:36px; width:auto; color:var(--text); display:block}
@media (max-width:1000px){ .brand-logo{height:30px} }
.header-wa{justify-self:end; font-size:var(--t-sm); padding:.62rem 1.15rem}
/* ---------- gatilho do celular ---------- */
.menu > summary{
list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem;
padding:.6rem .2rem; font-size:var(--t-sm); font-weight:600; color:var(--text);
-webkit-tap-highlight-color:transparent; order:3;
}
.menu > summary::-webkit-details-marker{display:none}
.menu-bars{width:18px; height:2px; background:currentColor; position:relative; display:block}
.menu-bars::before,.menu-bars::after{
content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor;
transition:transform .18s ease;
}
.menu-bars::before{top:-6px}
.menu-bars::after{top:6px}
.menu[open] .menu-bars{background:transparent}
.menu[open] .menu-bars::before{transform:translateY(6px) rotate(45deg)}
.menu[open] .menu-bars::after{transform:translateY(-6px) rotate(-45deg)}
/* ---------- a barra ---------- */
.nav ul{list-style:none; margin:0; padding:0}
.nav-item > a{
display:block; text-decoration:none; font-size:var(--t-base); font-weight:600;
color:var(--text-2); letter-spacing:.02em; transition:color .15s ease;
}
.nav-item > a:hover{color:var(--text)}
/* ---------- o painel ---------- */
.mega-inner{display:grid; gap:1.5rem}
.mega-col{display:flex; flex-direction:column; gap:.3rem}
.mega-head{
font-family:var(--display); font-weight:700; font-size:var(--t-base);
color:var(--text); text-decoration:none; margin-bottom:.1rem;
}
.mega-head:hover{color:var(--accent-bright)}
.mega-col a:not(.mega-head){
font-size:var(--t-sm); color:var(--text-2); text-decoration:none; padding-block:.05rem;
transition:color .15s ease;
}
.mega-col a:not(.mega-head):hover{color:var(--accent-bright)}
.mega-note{font-size:var(--t-xs); color:var(--text-3); line-height:1.55; margin:0}
/* ==========================================================================
CELULAR — acordeão empilhado dentro do
========================================================================== */
/* A quebra do menu subiu de 860 pra 1000 em 28/08, quando o nav mudou de
lado. Com a logo no centro, os cinco itens dividem a metade esquerda em vez
da barra toda: a 861px eles precisavam de ~377px e só sobravam ~301px, e o
que cedia era a logo saindo do centro. */
@media (max-width:1000px){
/* No celular a logo volta pro meio e o hambúrguer assume a coluna 1. Como a
ordem do DOM agora é logo-menu-WhatsApp, o `order` troca os dois primeiros. */
.menu{order:1}
.brand{order:2; justify-self:center}
.header-wa{order:3}
.nav{
position:absolute; left:0; right:0; top:100%; z-index:70;
background:var(--bg); border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
max-height:calc(100vh - 4.5rem); overflow-y:auto;
padding:1rem 1.25rem 1.75rem;
}
.site-header{position:sticky}
.nav ul{display:flex; flex-direction:column; gap:.25rem}
.nav-item > a{padding:.75rem 0; font-size:var(--t-md); color:var(--text)}
.has-mega > a{border-bottom:1px solid var(--line)}
.mega{padding:.85rem 0 1.25rem}
.mega-inner{grid-template-columns:1fr 1fr; gap:1.25rem}
.mega-col-end{grid-column:1 / -1}
.mega-note{display:none}
}
/* ==========================================================================
DESKTOP — barra horizontal, painel em hover/foco
========================================================================== */
@media (min-width:1001px){
.menu::details-content{content-visibility:visible; block-size:auto; opacity:1}
.menu > summary{display:none}
.menu{position:static; justify-self:start; margin-left:.85rem}
.nav ul{display:flex; align-items:center; gap:1.5rem}
.nav-item{position:static}
.nav-item > a{padding:1.05rem 0}
/* O painel se ancora no — que é sticky, logo é bloco contendo — e
não no
e acordeão.
Sem JavaScript nos dois casos.
========================================================================== */
/* Três colunas: logo à esquerda, nav ao lado dela, WhatsApp à direita.
A logo ficava no centro, com `1fr auto 1fr`. Isso só a mantém centrada
ENQUANTO o que está nas laterais couber na própria coluna. Com a entrada de
Acessórios o nav passou a seis itens e estourou o 1fr da esquerda —
minmax(0,1fr) deixa a COLUNA encolher, mas o conteúdo não encolhe junto:
ele transborda por cima do vizinho, e foi assim que a logo apareceu colada
no último item do menu.
Ancorada na esquerda não há centro pra defender. O nav ocupa o vão do meio e
cresce pra dentro dele — item novo no menu não empurra mais nada, que é a
fragilidade que a versão centrada tinha por construção. */
.header-bar{
display:grid; grid-template-columns:auto minmax(0,1fr) auto;
align-items:center; gap:1rem; padding-block:.3rem;
}
.brand{justify-self:start; display:flex; align-items:center; text-decoration:none}
.brand-logo{height:36px; width:auto; color:var(--text); display:block}
@media (max-width:1000px){ .brand-logo{height:30px} }
.header-wa{justify-self:end; font-size:var(--t-sm); padding:.62rem 1.15rem}
/* ---------- gatilho do celular ---------- */
.menu > summary{
list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem;
padding:.6rem .2rem; font-size:var(--t-sm); font-weight:600; color:var(--text);
-webkit-tap-highlight-color:transparent; order:3;
}
.menu > summary::-webkit-details-marker{display:none}
.menu-bars{width:18px; height:2px; background:currentColor; position:relative; display:block}
.menu-bars::before,.menu-bars::after{
content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor;
transition:transform .18s ease;
}
.menu-bars::before{top:-6px}
.menu-bars::after{top:6px}
.menu[open] .menu-bars{background:transparent}
.menu[open] .menu-bars::before{transform:translateY(6px) rotate(45deg)}
.menu[open] .menu-bars::after{transform:translateY(-6px) rotate(-45deg)}
/* ---------- a barra ---------- */
.nav ul{list-style:none; margin:0; padding:0}
.nav-item > a{
display:block; text-decoration:none; font-size:var(--t-base); font-weight:600;
color:var(--text-2); letter-spacing:.02em; transition:color .15s ease;
}
.nav-item > a:hover{color:var(--text)}
/* ---------- o painel ---------- */
.mega-inner{display:grid; gap:1.5rem}
.mega-col{display:flex; flex-direction:column; gap:.3rem}
.mega-head{
font-family:var(--display); font-weight:700; font-size:var(--t-base);
color:var(--text); text-decoration:none; margin-bottom:.1rem;
}
.mega-head:hover{color:var(--accent-bright)}
.mega-col a:not(.mega-head){
font-size:var(--t-sm); color:var(--text-2); text-decoration:none; padding-block:.05rem;
transition:color .15s ease;
}
.mega-col a:not(.mega-head):hover{color:var(--accent-bright)}
.mega-note{font-size:var(--t-xs); color:var(--text-3); line-height:1.55; margin:0}
/* ==========================================================================
CELULAR — acordeão empilhado dentro do
========================================================================== */
/* A quebra do menu subiu de 860 pra 1000 em 28/08, quando o nav mudou de
lado. Com a logo no centro, os cinco itens dividem a metade esquerda em vez
da barra toda: a 861px eles precisavam de ~377px e só sobravam ~301px, e o
que cedia era a logo saindo do centro. */
@media (max-width:1000px){
/* No celular a logo volta pro meio e o hambúrguer assume a coluna 1. Como a
ordem do DOM agora é logo-menu-WhatsApp, o `order` troca os dois primeiros. */
.menu{order:1}
.brand{order:2; justify-self:center}
.header-wa{order:3}
.nav{
position:absolute; left:0; right:0; top:100%; z-index:70;
background:var(--bg); border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
max-height:calc(100vh - 4.5rem); overflow-y:auto;
padding:1rem 1.25rem 1.75rem;
}
.site-header{position:sticky}
.nav ul{display:flex; flex-direction:column; gap:.25rem}
.nav-item > a{padding:.75rem 0; font-size:var(--t-md); color:var(--text)}
.has-mega > a{border-bottom:1px solid var(--line)}
.mega{padding:.85rem 0 1.25rem}
.mega-inner{grid-template-columns:1fr 1fr; gap:1.25rem}
.mega-col-end{grid-column:1 / -1}
.mega-note{display:none}
}
/* ==========================================================================
DESKTOP — barra horizontal, painel em hover/foco
========================================================================== */
@media (min-width:1001px){
.menu::details-content{content-visibility:visible; block-size:auto; opacity:1}
.menu > summary{display:none}
.menu{position:static; justify-self:start; margin-left:.85rem}
.nav ul{display:flex; align-items:center; gap:1.5rem}
.nav-item{position:static}
.nav-item > a{padding:1.05rem 0}
/* O painel se ancora no — que é sticky, logo é bloco contendo — e
não no