/* ============================================================
   Ari Boutique: FRONT PRÓPRIO (26/10/2026). Carrega depois do styles.css do modelo
   e muda só o visual: estrutura inspirada nas grifes (topo fino, vídeo em tela cheia,
   grade de categorias, blocos editoriais, seção escura), em branco e dourado.
   Cores e fontes vêm de tema.css (var(--sm-*)). A lógica (app.js) é a do modelo.
   ============================================================ */

/* ====================================================================================
   TODAS AS PALAVRAS EM DOURADO (pedido do dono, 27/10/2026). Vale só para a loja (body.front-ari),
   o painel da dona continua com o texto escuro. Contraste medido (WCAG):
   - texto pequeno #7d5f24: 5,9:1 no branco, 5,4:1 no marfim (mínimo 4,5);
   - títulos grandes #9a7634 (4,2:1) e cursiva #a8833e (3,5:1): só em letra de 24 px ou mais (mínimo 3);
   - sobre o vídeo e o escuro: #ecd29b (7,1:1 até no vídeo médio, 12,7:1 na oferta).
   Os botões dourados viram preto com letra dourada (letra dourada em fundo dourado não se lê).
   ==================================================================================== */
.front-ari {
  --sm-texto: #7d5f24;
  --sm-texto-medio: #7d5f24;
  --sm-texto-fraco: #7d5f24;
  --sm-marca-texto: #7d5f24;
  --sm-sobre-foto: #ecd29b;
  --sm-sobre-foto-fraco: #e3c78f;
  --sm-sobre-foto-acento: #f0d9a8;
  --sm-aviso-texto: #e3c78f;
  --sm-sobre-marca: #e3c78f;
  --sm-grad-marca: linear-gradient(120deg, #1d1b17, #2a251d 55%, #1d1b17);
  --ari-ouro-titulo: #9a7634;
  --ari-ouro-vivo: #a8833e;
  color: var(--sm-texto);
}
.front-ari .titulo-duplo .t1 { color: var(--ari-ouro-titulo); }
.front-ari .gaveta-titulo, .front-ari .sacola-titulo, .front-ari .janela-topo h2, .front-ari .peca-nome { color: var(--ari-ouro-titulo); }
.front-ari input, .front-ari select, .front-ari textarea { color: var(--sm-texto); }
.front-ari ::placeholder { color: #9a7f50; opacity: 1; }
/* botões cheios: preto com letra dourada (o WhatsApp do pedido também) */
.front-ari .btn-primario, .front-ari .btn-wa { background: var(--sm-grad-marca); color: #e3c78f; border-color: #1d1b17; }
.front-ari .btn-contorno { border-color: var(--sm-texto); color: var(--sm-texto); }
/* sobre o fundo escuro da oferta o botão preto sumiria: fica só o contorno dourado
   (o aviso de cookies tem fundo CLARO: lá o botão continua preto com letra dourada) */
.front-ari .promo .btn-primario { background: transparent; border-color: #e3c78f; color: #e3c78f; }
.front-ari .balao { background: #1d1b17; color: #e3c78f; }

/* ---------------------------------------------------- topo fino, marca no centro */
.front-ari .topo { background: rgba(255, 255, 255, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
.front-ari .topo.sobre-foto { background: transparent; color: var(--sm-sobre-foto); }
.front-ari .topo-linha { grid-template-areas: "esq logo acoes"; min-height: 64px; padding-top: 0; padding-bottom: 0; }
.front-ari .topo-esq { grid-area: esq; justify-self: start; display: flex; align-items: center; gap: 2px; margin-left: -8px; }
.front-ari .btn-menu { grid-area: auto; }
.front-ari .btn-com-texto {
  display: inline-flex; align-items: center; gap: 8px;
  width: auto; min-width: var(--sm-alvo); height: var(--sm-alvo); padding: 0 8px;
  border: 0; border-radius: 0; background: none; color: inherit;
}
.front-ari .btn-com-texto:hover { box-shadow: none; color: var(--sm-marca-texto); }
.front-ari .btn-com-texto svg { width: 20px; height: 20px; }
/* topo só com ícones (pedido do dono, 27/10/2026): sem "Menu", "Pesquisar" e "Fale conosco" (virou o ícone do WhatsApp) */
.front-ari .topo-whats svg { width: 21px; height: 21px; }
.front-ari .topo.sobre-foto .btn-com-texto:hover { color: var(--sm-sobre-foto-acento); }
/* sem a faixa de texto "Prévia do site" no topo (ela só existe antes do lançamento) */
.front-ari .faixa-previa { display: none; }
.front-ari .topo-acoes { margin-right: -6px; }
.front-ari .logo-texto { font-size: 30px; color: var(--sm-marca); letter-spacing: .02em; padding: 4px 2px; }
.front-ari .topo.sobre-foto .logo-texto { color: var(--sm-sobre-foto); }
/* logo oficial (imagem, 27/10/2026): exatamente o da loja, sobre o vídeo com uma sombra leve */
.front-ari .logo-img { display: block; width: auto; height: 70px; }
/* sobre o vídeo: um halo claro discreto, como o fundo branco da imagem original, para o dourado aparecer */
.front-ari .topo.sobre-foto .logo-img { filter: drop-shadow(0 0 1px rgba(255, 250, 240, .9)) drop-shadow(0 0 10px rgba(255, 250, 240, .45)); }
.front-ari .rodape .logo-img { height: 96px; }
@media (max-width: 759px) { .front-ari .logo-img { height: 46px; } }
@media (max-width: 374px) { .front-ari .logo-img { height: 40px; } }
.front-ari .balao { background: #1d1b17; color: #e3c78f; box-shadow: none; border-radius: 0; }
@media (max-width: 759px) {
  .front-ari .logo-texto { font-size: 25px; }
  /* 2 ícones de cada lado do logo: sem folga extra, para o logo não encostar no WhatsApp */
  .front-ari .btn-com-texto { padding: 0; min-width: 42px; }
  .front-ari .topo-esq { margin-left: -6px; }
}
@media (min-width: 960px) { .front-ari .logo-texto { font-size: 34px; } }

/* ---------------------------------------------------- títulos e textos: discretos, centrados */
.front-ari .titulo-duplo {
  flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: .28em;
  font-family: var(--sm-fonte-display); font-size: clamp(28px, 3vw, 40px); line-height: 1.15;
  text-transform: none; text-align: center;
}
.front-ari .titulo-duplo .t1 { font-family: var(--sm-fonte-display); font-weight: 400; letter-spacing: 0; }
/* destaque de cada título em cursiva (pedido do dono, 27/10/2026): maior, porque a cursiva tem letra pequena */
.front-ari .titulo-duplo .t2 {
  font-family: var(--ari-fonte-cursiva); font-style: normal; font-weight: 400; font-size: 1.42em; line-height: .95;
  letter-spacing: 0; color: var(--ari-ouro-vivo); padding: 0 .06em;
}
.front-ari .secao-cabeca { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.front-ari .secao-cabeca .texto-leve, .front-ari .editorial-texto .texto-leve { margin: 14px auto 0; max-width: 52ch; font-size: 15px; }
.front-ari .secao-pe { margin-top: 28px; text-align: center; }
.front-ari .link-traco {
  font-family: var(--sm-fonte-texto); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;   /* sem a linha dourada embaixo (pedido do dono, 27/10/2026) */
}
.front-ari .link-traco:hover, .front-ari .link-traco:focus-visible { color: var(--sm-marca-texto); }
.front-ari .faixa { padding: 64px 0; }
@media (min-width: 960px) { .front-ari .faixa { padding: 96px 0; } }

/* ---------------------------------------------------- botões: retos, dourado com texto escuro */
.front-ari .btn { min-height: 50px; font-size: 12px; letter-spacing: .14em; }
.front-ari .btn-primario:hover:not(:disabled), .front-ari .btn-contorno:hover:not(:disabled) { box-shadow: none; }
.front-ari .btn-contorno:hover:not(:disabled) { border-color: var(--sm-marca); }
.front-ari .btn-icone { border-color: var(--sm-borda); }
.front-ari .btn-icone:hover { border-color: var(--sm-marca); box-shadow: none; }

/* ---------------------------------------------------- primeira tela: título curto no centro */
.front-ari .slide-texto { text-align: center; bottom: 72px; }
.front-ari .slide .titulo-duplo { max-width: none; font-size: clamp(32px, 3.8vw, 56px); color: var(--sm-sobre-foto); }
.front-ari .slide .titulo-duplo .t1, .front-ari .slide .titulo-duplo .t2 { color: var(--sm-sobre-foto); text-shadow: none; }
.front-ari .slide-desc { margin: 12px auto 0; max-width: 46ch; font-size: 15px; }
.front-ari .slide .link-traco { color: var(--sm-sobre-foto); }
/* entrada das frases sem recorte: o "entrar" do modelo usa clip-path e cortava o traço inicial
   das letras cursivas ("para" aparecia como "hara" no celular e no tablet) */
.front-ari .slide.ativo .slide-texto .t1, .front-ari .slide.ativo .slide-texto .t2,
.front-ari .slide.ativo .slide-desc, .front-ari .slide.ativo .slide-texto .link-traco { animation-name: ari-entrar; }
@keyframes ari-entrar { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* banner no computador (opção B do dono, 27/10/2026): os 3 vídeos em pé LADO A LADO, todos tocando
   (front.js mantém os três rodando). Só em tela deitada e larga: no celular e no tablet em pé continua
   um vídeo por vez, em tela cheia. */
@media (min-width: 960px) and (min-aspect-ratio: 1/1) {
  .front-ari .hero-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
  .front-ari .slide { position: relative; opacity: 1; visibility: visible; }
  .front-ari .slide img { transform: none; }
  .front-ari .slide-texto { bottom: 64px; padding: 0 24px; }
  .front-ari .slide .titulo-duplo { flex-direction: column; font-size: clamp(26px, 2.5vw, 42px); }
  /* sem a entrada animada a cada troca: os três ficam sempre à vista */
  .front-ari .hero-trilho .slide .slide-texto .t1, .front-ari .hero-trilho .slide .slide-texto .t2,
  .front-ari .hero-trilho .slide .slide-texto .link-traco { animation: none; }
}

/* banner (27/10/2026): frase em cima e só o segmento embaixo; sombra suave para ler sobre roupa clara */
.front-ari .slide .titulo-duplo, .front-ari .slide .link-traco { text-shadow: 0 1px 14px rgba(0, 0, 0, .45), 0 0 2px rgba(0, 0, 0, .25); }
.front-ari .slide .link-traco { display: inline-block; margin-top: 14px; font-size: 14px; letter-spacing: .24em; }
@media (max-width: 759px) { .front-ari .slide-texto { bottom: 60px; } }

/* WhatsApp e Instagram abaixo do vídeo */
.front-ari .redes { padding-top: 32px; padding-bottom: 8px; gap: 12px; }

/* ---------------------------------------------------- grade de categorias (fundo marfim, nome embaixo) */
.cats-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
@media (min-width: 960px) {
  .cats-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 3, 5 ou 6 categorias: 3 por linha, foto quadrada (sem sobra numa linha e sem ficar alta demais) */
  .cats-grade[data-n="3"], .cats-grade[data-n="5"], .cats-grade[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cats-grade[data-n="3"] .cat-foto, .cats-grade[data-n="5"] .cat-foto, .cats-grade[data-n="6"] .cat-foto { aspect-ratio: 1 / 1; }
}
/* celular com 3 ou 5 categorias: o último bloco ocupa a linha toda, deitado (sem meia linha vazia) */
@media (max-width: 959px) {
  .cats-grade[data-n="3"] .cat-tile:last-child, .cats-grade[data-n="5"] .cat-tile:last-child { grid-column: 1 / -1; }
  .cats-grade[data-n="3"] .cat-tile:last-child .cat-foto, .cats-grade[data-n="5"] .cat-tile:last-child .cat-foto { aspect-ratio: 2 / 1; }
}
.cat-tile {
  display: flex; flex-direction: column; min-width: 0; padding: 0;
  border: 0; background: var(--sm-bg); color: var(--sm-texto); text-align: center; cursor: pointer;
}
.cat-foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sm-bg-alt); }
.cat-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--sm-ease); }
.cat-tile:hover .cat-foto img, .cat-tile:focus-visible .cat-foto img { transform: scale(1.04); }
.cat-nome { display: block; padding: 16px 8px 18px; font-size: 13px; font-weight: 600; letter-spacing: .05em; }
.cat-tile:hover .cat-nome { color: var(--sm-marca-texto); }

/* ---------------------------------------------------- carrossel de novidades: 4 por vez no computador */
.front-ari .carrossel-trilho { grid-auto-columns: 62%; gap: 12px; }
@media (min-width: 760px) { .front-ari .carrossel-trilho { grid-auto-columns: calc((100% - 2 * 12px) / 3); } }
@media (min-width: 1100px) { .front-ari .carrossel-trilho { grid-auto-columns: calc((100% - 3 * 12px) / 4); } }
.front-ari .carrossel-setas { justify-content: center; }

/* ---------------------------------------------------- peças: foto em marfim, nome e preço centrados */
.front-ari .grade-produtos { gap: 36px 12px; }
.front-ari .card-foto { background: var(--sm-bg-alt); }
.front-ari .card-corpo { align-items: center; text-align: center; gap: 2px; padding-top: 12px; }
.front-ari .card-cat { font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--sm-texto-fraco); }
.front-ari .card-nome { font-size: 14px; }
.front-ari .precos { justify-content: center; }
.front-ari .preco { font-size: 14px; font-weight: 600; }
.front-ari .preco-consulta { font-family: var(--sm-fonte-texto); font-style: normal; font-size: 13px; }
.front-ari .card .link-traco { align-self: center; }
.front-ari .selo { border-radius: 0; }
.front-ari .sem-foto span { font-family: var(--sm-fonte-texto); font-style: normal; font-size: 13px; }

/* ---------------------------------------------------- editorial: fotos de ponta a ponta, texto embaixo */
.front-ari .editorial { padding: 0 0 72px; }
.front-ari .editorial .mosaico { grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 760px) { .front-ari .editorial .mosaico { grid-template-columns: 1fr 1fr; } }
.front-ari .mosaico img, .front-ari .mosaico .m1, .front-ari .mosaico .m2, .front-ari .mosaico .m3, .front-ari .mosaico .m4 {
  grid-column: auto; grid-row: auto; margin: 0; aspect-ratio: 4 / 5; height: auto; border-radius: 0;
}
.front-ari .mosaico .m3, .front-ari .mosaico .m4 { display: none; }
@media (max-width: 759px) { .front-ari .mosaico .m2 { display: none; } }
.front-ari .editorial-texto { max-width: 680px; margin: 44px auto 0; text-align: center; }

/* ---------------------------------------------------- mais vendidos */
.front-ari .etiqueta-neon { border-color: var(--sm-marca); border-radius: 0; box-shadow: none; color: var(--sm-marca-texto); }
/* números 01-04: contorno dourado mais grosso com sombra escura, para aparecer também sobre foto clara */
.front-ari .rank {
  font-family: var(--sm-fonte-display); font-style: normal; -webkit-text-stroke: 1.6px var(--sm-sobre-foto); text-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)) drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
}

/* ---------------------------------------------------- oferta: a seção escura, preto e dourado */
.front-ari .promo { min-height: 78vh; background: #14120e; }
.front-ari .faixa-promo { display: none; }
.front-ari .promo-conteudo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.front-ari .promo-titulo { font-size: clamp(40px, 6vw, 84px); line-height: 1.05; }
.front-ari .promo-titulo .t1 { color: var(--sm-sobre-foto); }
.front-ari .promo-titulo .t2 { color: var(--sm-sobre-foto-acento); }
.front-ari .promo-texto { margin: 18px auto 0; text-align: center; }
.front-ari .contagem { justify-content: center; }
.front-ari .contagem div { border-color: var(--sm-sobre-foto-acento); border-radius: 0; background: rgba(0, 0, 0, .35); box-shadow: none; }
.front-ari #promoBotao { margin-top: 30px; }

/* ---------------------------------------------------- filtros: pílulas sem linha embaixo (pedido do dono, 27/10/2026) */
.front-ari .chips { gap: 8px 10px; margin-bottom: 40px; border-bottom: 0; }
@media (min-width: 760px) { .front-ari .chips { justify-content: center; } }
.front-ari .chip {
  padding: 0 18px; border: 0; border-radius: 999px; background: none;
  font-family: var(--sm-fonte-texto); font-size: 13px; font-weight: 500; letter-spacing: .03em; text-transform: none;
  color: var(--sm-texto-medio);
}
.front-ari .chip:hover { color: var(--sm-texto); background: var(--sm-bg-alt); }
/* a escolhida fica preenchida em marfim, com o texto escuro */
.front-ari .chip[aria-pressed="true"] { background: var(--sm-card-forte); color: var(--sm-texto); font-weight: 600; }

/* ---------------------------------------------------- sem linha dourada embaixo de nenhuma palavra (pedido do dono, 27/10/2026)
   Links soltos (endereço, rodapé, menu) ficam sem sublinhado. Links DENTRO de um texto (termos no pedido,
   aviso de cookies, páginas legais) continuam sublinhados para quem não distingue cor, mas em cinza, não dourado. */
.front-ari .visite-lista a, .front-ari .rodape-base a { text-decoration: none; }
.front-ari .legal-links a:hover, .front-ari .link-rodape:hover { text-decoration: none; }
.front-ari .gaveta-item { border-bottom: 0; }
.front-ari .ck-aceite a, .front-ari .aviso-cookies-acoes a, .front-ari .nota a {
  color: var(--sm-texto); text-decoration-color: rgba(120, 120, 120, .45); text-underline-offset: 3px;
}

/* ---------------------------------------------------- atendimento: três colunas centradas */
.front-ari .cartao { text-align: center; }
/* fotos do Atendimento (modelos dos 3 segmentos, 27/10/2026): bem verticais, 2:3 para não cortar cabeça nem corpo */
.front-ari .cartao img { aspect-ratio: 2 / 3; height: auto; }   /* height: auto: o atributo height="1000" do HTML venceria o 2:3 */
.front-ari .cartao h3 { font-family: var(--sm-fonte-display); font-size: 22px; font-weight: 400; }
.front-ari .cartao p { max-width: 36ch; margin: 0 auto; }
.front-ari .visite-lista { justify-items: center; }

/* ---------------------------------------------------- menu, sacola e janelas */
.front-ari .gaveta-titulo, .front-ari .sacola-titulo, .front-ari .janela-topo h2 { font-family: var(--sm-fonte-display); font-style: normal; text-transform: none; font-size: 24px; }
.front-ari .gaveta-item { font-size: 16px; letter-spacing: .02em; text-transform: none; }

/* ---------------------------------------------------- rodapé */
.front-ari .rodape { border-top: 1px solid var(--sm-borda); background: var(--sm-bg); }
.front-ari .rodape .logo-texto { font-size: 32px; color: var(--sm-marca); }

/* ====================================================================================
   BOTÕES ANIMADOS (pedido do dono, 27/10/2026): todos reagem ao passar o mouse, ao focar
   pelo teclado e ao tocar. Os que se movem sozinhos (brilho dos botões cheios e pulso do
   WhatsApp) param no botão de pausa do site (.sem-movimento) e em "reduzir movimento" do aparelho.
   ==================================================================================== */
.front-ari { --ari-mola: cubic-bezier(.34, 1.56, .64, 1); }

/* cores ao passar o mouse (valem também com movimento reduzido) */
.front-ari .btn-contorno:hover:not(:disabled), .front-ari .btn-contorno:focus-visible { background: #1d1b17; border-color: #1d1b17; color: #e3c78f; }
.front-ari .link-traco:hover, .front-ari .link-traco:focus-visible { color: var(--sm-marca-texto); }
.front-ari .slide .link-traco:hover, .front-ari .slide .link-traco:focus-visible { color: var(--sm-sobre-foto-acento); }
.front-ari .cat-tile:hover .cat-nome, .front-ari .cat-tile:focus-visible .cat-nome { color: var(--sm-marca-texto); }
.front-ari .gaveta-item:hover, .front-ari .gaveta-sub:hover { color: var(--sm-marca-texto); }

@media (prefers-reduced-motion: no-preference) {
  /* botões cheios e de contorno: sobem com sombra dourada (o brilho do modelo passa junto); ao tocar, afundam */
  .front-ari .btn {
    transition: transform 360ms var(--ari-mola), box-shadow 360ms var(--sm-ease), background-color 240ms var(--sm-ease),
      border-color 240ms var(--sm-ease), color 240ms var(--sm-ease), padding var(--sm-transicao);
  }
  .front-ari .btn:hover:not(:disabled), .front-ari .btn:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(125, 95, 36, .6); }
  .front-ari .btn:active:not(:disabled) { transform: translateY(0) scale(.96); box-shadow: none; transition-duration: 90ms; }
  /* botões cheios (dourado e WhatsApp): um brilho atravessa sozinho de tempos em tempos */
  .front-ari .btn-primario::after, .front-ari .btn-wa::after { animation: ari-brilho 5s var(--sm-ease) 1.2s infinite; }

  /* ícones (topo, setas, fechar, pausa): crescem com mola e encolhem ao tocar */
  .front-ari .btn-icone, .front-ari .btn-sacola, .front-ari .hero-pausa, .front-ari .wa-flutuante {
    transition: transform 360ms var(--ari-mola), color 240ms var(--sm-ease), border-color 240ms var(--sm-ease), background-color 240ms var(--sm-ease);
  }
  .front-ari .btn-icone:hover:not(:disabled), .front-ari .btn-sacola:hover, .front-ari .hero-pausa:hover,
  .front-ari .btn-icone:focus-visible, .front-ari .btn-sacola:focus-visible { transform: scale(1.14); }
  .front-ari .btn-icone:active:not(:disabled), .front-ari .btn-sacola:active, .front-ari .hero-pausa:active { transform: scale(.88); transition-duration: 90ms; }
  .front-ari #btnSacola:hover svg, .front-ari .topo-whats:hover svg { animation: ari-balanco .6s var(--sm-ease); }
  .front-ari #btnBusca:hover svg { animation: ari-lupa .6s var(--sm-ease); }
  /* WhatsApp flutuante: pulso suave em volta, cresce ao passar o mouse */
  .front-ari .wa-flutuante { animation: ari-pulso 2.8s ease-out infinite; }
  .front-ari .wa-flutuante:hover { transform: scale(1.12) rotate(-6deg); }
  .front-ari .wa-flutuante:active { transform: scale(.92); }

  /* links de texto em maiúsculas ("Ver a coleção", "Quero esta peça", segmentos do banner): as letras abrem */
  .front-ari .link-traco { transition: color 240ms var(--sm-ease), letter-spacing 420ms var(--sm-ease), transform 360ms var(--ari-mola); }
  .front-ari .link-traco:hover, .front-ari .link-traco:focus-visible { letter-spacing: .22em; }
  .front-ari .slide .link-traco:hover, .front-ari .slide .link-traco:focus-visible { letter-spacing: .34em; }
  .front-ari .link-traco:active { transform: scale(.95); transition-duration: 90ms; }

  /* filtros, categorias e menu */
  .front-ari .chip { transition: background-color 240ms var(--sm-ease), color 240ms var(--sm-ease), transform 360ms var(--ari-mola); }
  .front-ari .chip:hover { transform: translateY(-2px); }
  .front-ari .chip:active { transform: scale(.94); transition-duration: 90ms; }
  .front-ari .cat-nome { transition: color 240ms var(--sm-ease), letter-spacing 420ms var(--sm-ease); }
  .front-ari .cat-tile:hover .cat-nome, .front-ari .cat-tile:focus-visible .cat-nome { letter-spacing: .12em; }
  .front-ari .cat-tile:active { transform: scale(.98); }
  .front-ari .gaveta-item, .front-ari .gaveta-sub { transition: color 240ms var(--sm-ease), transform 360ms var(--ari-mola); }
  .front-ari .gaveta-item:hover, .front-ari .gaveta-sub:hover { transform: translateX(6px); }
}
/* pausa do site: nada se move sozinho */
.sem-movimento .front-ari .btn-primario::after, .sem-movimento .front-ari .btn-wa::after,
.sem-movimento .front-ari .wa-flutuante { animation: none; }

@keyframes ari-brilho { 0%, 74% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes ari-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sm-whatsapp) 45%, transparent), var(--sm-sombra-lg); }
  70%, 100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--sm-whatsapp) 0%, transparent), var(--sm-sombra-lg); }
}
@keyframes ari-balanco { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } }
@keyframes ari-lupa { 0%, 100% { transform: rotate(0) scale(1); } 45% { transform: rotate(-14deg) scale(1.08); } }