/* ============================================================
   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; }
}
/* 4 categorias (03/11/2026, pedido do dono: Casual, Fitness, Praia e Acessórios): uma linha só em qualquer tela */
.cats-grade[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 759px) {
  .cats-grade[data-n="4"] .cat-nome { padding: 10px 2px 12px; font-size: 11px; letter-spacing: .02em; }
}
.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); } }

/* ====================================================================================
   VITRINE VIVA, CATÁLOGO EM SOBREPOSIÇÃO E GALERIA (pedido do dono, 01/11/2026).
   Fotos de campanha da própria loja (Nuvemshop). Camadas criadas pelo front.js.
   ==================================================================================== */

/* ---------------------------------------------------- banner da loja (entre as redes e as coleções)
   A imagem (1600 x 900) tem um "Compre agora" desenhado de x 883 a 1258 e y 503 a 572 (centro 66,9% e 59,7%).
   O botão de verdade fica exatamente por cima, com as mesmas cores do desenho (fundo da parede #6a6551,
   borda #ddc6a4, letra creme), e cresce junto com a imagem (unidade cqw). No celular ele tem um tamanho
   mínimo para dar para tocar e cobre o desenhado com folga. */
.front-ari .banner-loja { position: relative; container-type: inline-size; margin-top: 40px; line-height: 0; background: #6a6551; }
.front-ari .banner-loja img { display: block; width: 100%; height: auto; }
.front-ari .banner-loja-btn {
  position: absolute; left: 66.9%; top: 59.7%; transform: translate(-50%, -50%);
  width: max(24.4%, 156px); height: max(8.6%, 40px);
  display: inline-flex; align-items: center; justify-content: center; gap: .9em; overflow: hidden;
  border: max(1px, .1cqw) solid #ddc6a4; border-radius: 999px; background: #6a6551; color: #fbf5e1;
  font-family: 'Helvetica Neue', Arial, system-ui, sans-serif; font-size: max(11px, 1.2cqw); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none; line-height: 1; white-space: nowrap;
  box-shadow: 0 .6cqw 1.6cqw -.8cqw rgba(0, 0, 0, .45);
}
.front-ari .banner-loja-btn svg { flex: none; width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* brilho que atravessa (como os outros botões da Ari) */
.front-ari .banner-loja-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 245, 220, .35) 50%, transparent 70%);
  transform: translateX(-130%) skewX(-18deg);
}
.front-ari .banner-loja-btn:hover, .front-ari .banner-loja-btn:focus-visible { background: #ddc6a4; color: #2b281f; }
.front-ari .banner-loja-btn:focus-visible { outline: 2px solid #fbf5e1; outline-offset: 3px; }
@media (max-width: 759px) { .front-ari .banner-loja { margin-top: 28px; } .front-ari .banner-loja-btn { letter-spacing: .16em; gap: .6em; } }
@media (prefers-reduced-motion: no-preference) {
  .front-ari .banner-loja-btn {
    transition: transform 360ms var(--ari-mola), background-color 240ms var(--sm-ease), color 240ms var(--sm-ease), box-shadow 360ms var(--sm-ease);
  }
  .front-ari .banner-loja-btn:hover, .front-ari .banner-loja-btn:focus-visible { transform: translate(-50%, calc(-50% - 3px)); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55); }
  .front-ari .banner-loja-btn:active { transform: translate(-50%, -50%) scale(.95); transition-duration: 90ms; }
  .front-ari .banner-loja-btn svg { transition: transform 360ms var(--ari-mola); }
  .front-ari .banner-loja-btn:hover svg { transform: translateX(4px); }
  .front-ari .banner-loja-btn::after { animation: ari-brilho 5s var(--sm-ease) 1.6s infinite; }
}
.sem-movimento .front-ari .banner-loja-btn::after { animation: none; }

/* banner menor (pedido do dono, 02/11/2026): centralizado, até 1080 px, com margem dos lados */
.front-ari .banner-loja {
  width: min(100% - 40px, 1080px); margin-left: auto; margin-right: auto; overflow: hidden;
  box-shadow: 0 34px 60px -42px rgba(29, 27, 23, .7);
}
@media (min-width: 960px) { .front-ari .banner-loja { margin-top: 56px; } }
/* "Todas as peças" vem logo depois (02/11/2026): respiro branco entre o banner e a foto de fundo do catálogo */
.front-ari .banner-loja { margin-bottom: 32px; }
@media (min-width: 960px) { .front-ari .banner-loja { margin-bottom: 56px; } }
.front-ari .banner-loja-btn { z-index: 2; }

/* montagem em tiras (front.js põe vai-montar, depois montando, depois montado) */
.front-ari .banner-loja picture { display: block; transition: opacity .5s var(--sm-ease); }
.front-ari .banner-loja.vai-montar picture { opacity: 0; }
.front-ari .banner-loja .tiras { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); pointer-events: none; }
.front-ari .banner-loja .tiras i {
  display: block; height: 100%; margin-right: -1px; background-repeat: no-repeat;
  opacity: 0; transform: translateY(calc(var(--de) * 104%));
  transition: transform 1s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 110ms), opacity .6s var(--sm-ease) calc(var(--i) * 110ms);
}
.front-ari .banner-loja.montando .tiras i { opacity: 1; transform: none; }
.front-ari .banner-loja.vai-montar .banner-loja-btn { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
@media (prefers-reduced-motion: no-preference) {
  .front-ari .banner-loja.montado .banner-loja-btn {
    transition: opacity .7s var(--sm-ease), transform 360ms var(--ari-mola), background-color 240ms var(--sm-ease), color 240ms var(--sm-ease), box-shadow 360ms var(--sm-ease);
  }
}

/* brilho dourado que segue o mouse (só computador) */
.front-ari .banner-loja::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 236, 200, .2), transparent 34%);
  mix-blend-mode: screen; transition: opacity .5s var(--sm-ease);
}
@media (hover: hover) { .front-ari .banner-loja:hover::after { opacity: 1; } }

/* títulos palavra por palavra: saem de um leve desfoque, uma depois da outra */
.front-ari .por-palavra .palavra {
  display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px);
  transition: opacity .8s var(--sm-ease), transform .8s var(--sm-ease), filter .8s var(--sm-ease);
  transition-delay: calc(var(--k, 0) * 90ms + 120ms);
}
.front-ari .por-palavra.entrou .palavra { opacity: 1; transform: none; filter: none; }

/* texto do mosaico: as palavras passam do dourado claro ao dourado forte com a rolagem */
.front-ari #edTexto.preenche .palavra { color: #b39a68; transition: color .45s var(--sm-ease); }
.front-ari #edTexto.preenche .palavra.cheia { color: var(--sm-texto); }

/* pausa do site: tudo aparece pronto */
.sem-movimento .front-ari .por-palavra .palavra { opacity: 1; transform: none; filter: none; transition: none; }
.sem-movimento .front-ari #edTexto.preenche .palavra { color: var(--sm-texto); }
.sem-movimento .front-ari .banner-loja.vai-montar picture { opacity: 1; }
.sem-movimento .front-ari .banner-loja.vai-montar .banner-loja-btn { opacity: 1; transform: translate(-50%, -50%); }

/* ---------------------------------------------------- primeira tela em vídeo (03/11/2026, arsenal: cortina que revela + desfoque que resolve)
   Cada vídeo abre de baixo para cima saindo de um desfoque, um depois do outro (--i vem do app.js). */
@media (prefers-reduced-motion: no-preference) {
  .front-ari .slide .hero-video { animation: ari-cortina 1.5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 240ms + 80ms); }
  /* título do vídeo: palavra por palavra depois que a cortina abre */
  .front-ari #hero .por-palavra .palavra { transition-delay: calc(var(--k, 0) * 110ms + 900ms); }
}
.sem-movimento .front-ari .slide .hero-video { animation: none; }
@keyframes ari-cortina {
  from { clip-path: inset(100% 0 0 0); filter: blur(18px); transform: scale(1.14); }
  55% { filter: blur(5px); }
  to { clip-path: inset(0 0 0 0); filter: blur(0); transform: scale(1); }
}

/* ---------------------------------------------------- catálogo: o palco fica parado, as peças passam por cima */
/* clip-path: o palco tem a altura da tela e, no fim da seção, passaria por cima da seção seguinte
   (cobrindo e roubando o toque de "Nossas coleções"). O recorte o prende à seção sem desligar o sticky
   (overflow: hidden desligaria). */
.front-ari #colecao.sobreposta { position: relative; isolation: isolate; clip-path: inset(0); padding: 0 0 88px; background: #1d1b17; }
/* fotos em pé: no computador o palco vira colunas lado a lado (uma foto esticada na tela larga mostraria só o tronco) */
.front-ari .palco {
  position: sticky; top: 0; z-index: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
  height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden;
}
.front-ari .palco-col { position: relative; overflow: hidden; }
.front-ari .palco img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.8s var(--sm-ease);
}
.front-ari .palco img.saindo { opacity: 1; z-index: 1; }
.front-ari .palco img.ativa { opacity: 1; z-index: 2; }
/* véu: escurece o alto (onde fica o título) e um pouco o resto, para o branco das peças se destacar */
.front-ari .palco::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(20, 18, 14, .5) 0%, rgba(20, 18, 14, .12) 42%, rgba(20, 18, 14, .3) 100%);
}
.front-ari #colecao.sobreposta > .container { position: relative; z-index: 1; }

/* título sobre a foto: abre a seção na altura das dunas, em dourado claro */
.front-ari .sobreposta .colecao-cabeca { padding-top: 34vh; padding-top: 34svh; margin-bottom: 32px; }
.front-ari .sobreposta .colecao-cabeca .titulo-duplo {
  font-size: clamp(36px, 4.6vw, 64px);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .3);
}
.front-ari .sobreposta .colecao-cabeca .t1, .front-ari .sobreposta .colecao-cabeca .t2 { color: var(--sm-sobre-foto); }
.front-ari .sobreposta #colecaoSub { color: #f3ede2; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

/* filtros: uma faixa branca translúcida flutuando sobre a foto */
.front-ari .sobreposta .chips {
  width: fit-content; max-width: 100%; margin: 0 auto 36px; padding: 6px;
  background: rgba(255, 255, 255, .9); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6);
}
@media (max-width: 759px) {
  .front-ari .sobreposta .chips { width: auto; max-width: none; margin: 0 -20px 24px; padding: 8px 20px; border-radius: 0; }
}

/* peças: fichas brancas flutuando, a duna aparece entre elas */
.front-ari .sobreposta .grade-produtos { gap: 22px; }
.front-ari .sobreposta .card { background: #fff; padding: 10px 10px 18px; box-shadow: 0 28px 50px -30px rgba(0, 0, 0, .7); }
.front-ari .sobreposta .card-corpo { padding-left: 4px; padding-right: 4px; }
@media (max-width: 759px) {
  .front-ari .sobreposta .grade-produtos { gap: 10px; }
  .front-ari .sobreposta .card { padding: 6px 6px 14px; }
}
.front-ari .sobreposta .vazio { background: #fff; padding: 32px 20px; }
.front-ari .sobreposta .mais .btn { background: #fff; border-color: #fff; }
.front-ari .sobreposta .mais .btn:hover:not(:disabled), .front-ari .sobreposta .mais .btn:focus-visible { background: #1d1b17; border-color: #1d1b17; color: #e3c78f; }

/* ---------------------------------------------------- card: a segunda foto aparece ao passar o mouse */
.front-ari .card-foto .selo, .front-ari .card-foto .rank { z-index: 3; }
.front-ari .card-foto .foto-2 {
  position: absolute; inset: 0; z-index: 2; display: block;
  opacity: 0; transition: opacity .55s var(--sm-ease);
}
.front-ari .card-foto .foto-2 img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .front-ari .card:hover .foto-2.pronta, .front-ari .card-abrir:focus-visible .foto-2.pronta { opacity: 1; }
}

/* ---------------------------------------------------- galeria da janela da peça */
.front-ari .peca-foto.galeria { display: grid; grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
.front-ari .galeria-trilho {
  grid-area: 1 / 1; display: flex; aspect-ratio: 4 / 5; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--sm-bg-alt);
}
.front-ari .galeria-trilho::-webkit-scrollbar { display: none; }
.front-ari .galeria-trilho:focus-visible { outline: 2px solid var(--sm-foco); outline-offset: 3px; }
.front-ari .galeria-foto { flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.front-ari .galeria-foto img { width: 100%; height: 100%; object-fit: cover; }
.front-ari .galeria-seta {
  grid-area: 1 / 1; align-self: center; z-index: 1; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--sm-marca-texto); cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55);
}
.front-ari .galeria-seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.front-ari .galeria-ant { justify-self: start; margin-left: 12px; }
.front-ari .galeria-prox { justify-self: end; margin-right: 12px; }
.front-ari .galeria-seta:disabled { opacity: 0; pointer-events: none; }
.front-ari .galeria-seta:focus-visible { outline: 2px solid var(--sm-foco); outline-offset: 2px; }
.front-ari .galeria-conta {
  grid-area: 1 / 1; align-self: end; justify-self: center; margin-bottom: 12px; z-index: 1;
  padding: 3px 12px; border-radius: 999px; background: rgba(29, 27, 23, .62); color: #f3ede2;
  font-size: 12px; letter-spacing: .04em; pointer-events: none;
}
.front-ari .galeria-minis { grid-area: 2 / 1; display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.front-ari .galeria-mini {
  flex: 0 0 56px; height: 70px; padding: 0; border: 1px solid transparent; background: var(--sm-bg-alt);
  cursor: pointer; opacity: .55; transition: opacity 240ms var(--sm-ease), border-color 240ms var(--sm-ease);
}
.front-ari .galeria-mini img { width: 100%; height: 100%; object-fit: cover; }
.front-ari .galeria-mini:hover, .front-ari .galeria-mini[aria-current="true"] { opacity: 1; }
.front-ari .galeria-mini[aria-current="true"] { border-color: var(--sm-marca); }
.front-ari .galeria-mini:focus-visible { outline: 2px solid var(--sm-foco); outline-offset: 2px; opacity: 1; }

/* ---------------------------------------------------- movimento (só com "reduzir movimento" desligado e sem a pausa) */
@media (prefers-reduced-motion: no-preference) {
  /* zoom lento: a foto à vista vai chegando perto; continua durante a troca (a classe "saindo" mantém a animação) */
  .front-ari .palco img.ativa, .front-ari .palco img.saindo { animation: ari-zoom 16s linear both; }
  /* fichas sobem por cima da duna ao entrar na tela (o revelar do modelo põe a classe "visivel" e anima o transform;
     o levantar do mouse usa "translate", que soma com a animação em vez de brigar com ela) */
  .front-ari.anima .sobreposta .card, .anima .front-ari .sobreposta .card { transform: translateY(72px); }
  .front-ari.anima .sobreposta .card.visivel, .anima .front-ari .sobreposta .card.visivel { animation-name: ari-subir; animation-duration: 1s; }
  .front-ari .sobreposta .card { transition: translate 420ms var(--ari-mola), box-shadow 420ms var(--sm-ease); }
  .front-ari .galeria-seta { transition: transform 360ms var(--ari-mola), opacity 240ms var(--sm-ease); }
  .front-ari .galeria-seta:hover { transform: scale(1.1); }
  .front-ari .galeria-seta:active { transform: scale(.9); transition-duration: 90ms; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .front-ari .sobreposta .card:hover { translate: 0 -6px; box-shadow: 0 36px 60px -30px rgba(0, 0, 0, .8); }
}
.sem-movimento .front-ari .palco img { animation: none; }
@keyframes ari-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes ari-subir { from { opacity: 0; transform: translateY(72px); } to { opacity: 1; transform: none; } }

/* ====================================================================================
   ANIMAÇÕES DO ARSENAL (03/11/2026, _ferramentas/animacoes/CATALOGO.md): só as que combinam com a boutique.
   j12 luz que segue o mouse (cards das peças), a24 inclinar em 3D (categorias), j11 arrastar com inércia
   (novidades). O JS está no front.js; aqui só o visual. Sem movimento: nada disso aparece.
   ==================================================================================== */
/* j12: luz dourada suave na foto da peça, seguindo o mouse (o JS só escreve --lx e --ly) */
.front-ari .card-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 40%), rgba(255, 236, 196, .34), rgba(227, 199, 143, .1) 45%, transparent 70%);
  mix-blend-mode: soft-light; transition: opacity .45s var(--sm-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .front-ari .card:hover .card-foto::after { opacity: 1; }
  /* a24: a foto da categoria inclina para o lado do mouse (o JS escreve --rx e --ry) */
  .front-ari .cat-foto { transition: transform .5s var(--ari-mola); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .front-ari .cat-tile.inclinando .cat-foto { transition-duration: .12s; }
  /* j11: o carrossel de novidades se arrasta com o mouse */
  .front-ari #gradeDestaques.arrastavel { cursor: grab; }
  .front-ari #gradeDestaques.arrastando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .front-ari #gradeDestaques.arrastando * { pointer-events: none; }
}
.sem-movimento .front-ari .card-foto::after { display: none; }
.sem-movimento .front-ari .cat-foto { transform: none; }

/* ====================================================================================
   VÍDEOS DAS SEÇÕES (pedido do dono, 03/11/2026)
   (A faixa larga do Setor 2 entre "Nossas coleções" e "Novidades" saiu a pedido do dono, 03/11/2026.)
   Editorial: os 2 vídeos no lugar das 2 fotos (no celular os dois aparecem lado a lado).
   Os vídeos só tocam quando estão na tela (front.js, data-auto). Entrada do arsenal: a21 cortina que
   revela + a26 desfoque que resolve, só com movimento ligado.
   ==================================================================================== */
.front-ari .mosaico.com-video .ed-video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; background: #1d1b17; }
@media (max-width: 759px) {
  .front-ari .editorial .mosaico.com-video { grid-template-columns: 1fr 1fr; }
  .front-ari .mosaico.com-video .m2 { display: block; }
  .front-ari .mosaico.com-video .ed-video { aspect-ratio: 9 / 16; }
}

@media (prefers-reduced-motion: no-preference) {
  /* editorial: cada vídeo abre de baixo para cima, um depois do outro */
  .front-ari .mosaico.com-video.vai-revelar .ed-video { clip-path: inset(100% 0 0 0); filter: blur(14px); }
  .front-ari .mosaico.com-video.entrou .ed-video { clip-path: inset(0 0 0 0); filter: none; transition: clip-path 1.4s cubic-bezier(.16, 1, .3, 1), filter 1.4s var(--sm-ease); }
  .front-ari .mosaico.com-video.entrou .m2 { transition-delay: .25s; }
}
.sem-movimento .front-ari .mosaico.com-video .ed-video { clip-path: none; filter: none; }

/* categoria ainda sem peça (03/11/2026, ex.: Praia): convite para o WhatsApp em vez de "nada encontrado" */
.front-ari .vazio-breve { grid-column: 1 / -1; max-width: 520px; margin: 0 auto; text-align: center; }
.front-ari .vazio-breve p { margin: 0 0 8px; }
.front-ari .vazio-breve .btn { margin-top: 12px; }

/* ====================================================================================
   CELULAR MAIS PARECIDO COM O COMPUTADOR (pedido do dono, 03/11/2026)
   Topo: barra mais alta, logo maior e um pouco mais para baixo. Peças: 3 por linha (coleção e mais vendidos)
   e 3 por vez nas novidades, com textos do card ajustados à largura (o botão pode quebrar em 2 linhas).
   ==================================================================================== */
@media (max-width: 759px) {
  .front-ari .topo-linha { min-height: 78px; }
  .front-ari .topo .logo { padding-top: 6px; }
  .front-ari .topo .logo-img { height: 54px; }

  .front-ari .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 8px; }
  .front-ari .sobreposta .grade-produtos { gap: 8px; }
  .front-ari .sobreposta .card { padding: 4px 4px 10px; }
  .front-ari .carrossel-trilho { grid-auto-columns: calc((100% - 2 * 8px) / 3); gap: 8px; }
  .front-ari .card-corpo { padding-top: 8px; gap: 1px; }
  .front-ari .card-cat { font-size: 8.5px; letter-spacing: .08em; }
  .front-ari .card-nome { font-size: 11px; line-height: 1.3; min-height: 2.6em; }
  .front-ari .precos { gap: 4px; }
  .front-ari .preco { font-size: 12px; }
  .front-ari .preco-de { font-size: 10.5px; }
  .front-ari .card .link-mini { max-width: 7.5em; margin-top: 4px; font-size: 9.5px; letter-spacing: .05em; line-height: 1.25; white-space: normal; text-align: center; justify-content: center; }
  .front-ari .selo { top: 5px; left: 5px; padding: 2px 5px; font-size: 8px; letter-spacing: .06em; }
  .front-ari .rank { left: 6px; font-size: 34px; }
}
@media (max-width: 389px) { .front-ari .topo .logo-img { height: 50px; } }
@media (max-width: 374px) { .front-ari .topo .logo-img { height: 46px; } }