/*
 * Layout base das campanhas sazonais da A.R Personalizados.
 *
 * Neutro de proposito: cores, ornamentos e texturas vem do tema.css de cada campanha,
 * atraves das variaveis abaixo. Trocar de Dia dos Professores para Natal nao deve exigir
 * nenhuma alteracao neste arquivo.
 */

:root {
  /* a campanha sobrescreve tudo isto em tema.css */
  --fundo: #fdf7f4;
  --fundo-alt: #f6ebe6;
  --papel: #ffffff;
  --tinta: #382723;
  --tinta-suave: #6b5048;
  --tinta-fraca: #907a73;
  --marca: #b96876;
  --marca-forte: #a15b6c;
  --marca-clara: #f1dce2;
  --apoio: #c9937b;
  --acento: #2f5d4f;
  --acento-claro: #dceaf4;
  --linha: rgba(107, 80, 72, .14);
  --linha-forte: rgba(107, 80, 72, .24);

  --serifada: "Playfair Display", Georgia, serif;
  --texto: "Poppins", "Segoe UI", Arial, sans-serif;

  --raio: 18px;
  --raio-g: 26px;
  --sombra: 0 12px 34px rgba(91, 58, 50, .10);
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.62;
  color: var(--tinta);
  /* a textura da pagina e do tema da campanha; sem tema, fica so a cor de fundo */
  background-color: var(--fundo);
  background-image: var(--pagina-textura, none);
  background-size: var(--pagina-textura-tam, auto);
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--serifada); line-height: 1.14; margin: 0; font-weight: 600; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--marca-forte); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------------- botoes */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .84rem; font-weight: 600; letter-spacing: .2px;
  cursor: pointer; text-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--marca); color: #fff; }
.btn-principal:hover { background: var(--marca-forte); }
.btn-contorno { background: transparent; border-color: var(--linha-forte); color: var(--tinta); }
.btn-contorno:hover { border-color: var(--marca); color: var(--marca-forte); }
.btn-seta { transition: transform .2s ease; }
.btn:hover .btn-seta { transform: translateX(3px); }

/* ---------------------------------------------------------------- cabecalho */

.topo {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  max-width: var(--max); margin: 0 auto;
}
.topo-marca { display: flex; align-items: center; gap: 11px; }
.topo-marca img { width: 40px; height: 40px; border-radius: 50%; }
.topo-marca span { display: flex; flex-direction: column; line-height: 1.08; }
.topo-marca strong { font-family: var(--serifada); font-size: 1rem; font-weight: 700; }
.topo-marca small { font-size: .6rem; letter-spacing: 2.2px; text-transform: uppercase; color: var(--tinta-fraca); }
.topo-link {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 4px;
  font-size: .76rem; font-weight: 600; color: var(--tinta-suave);
}
.topo-link:hover { color: var(--marca-forte); }

/* Abaixo de 430px o nome da marca e o link quebravam em duas linhas cada um. */
@media (max-width: 430px) {
  .topo { gap: 10px; padding: 14px 16px; }
  .topo-marca { gap: 9px; }
  .topo-marca img { width: 36px; height: 36px; }
  .topo-marca strong { font-size: .92rem; white-space: nowrap; }
  .topo-marca small { font-size: .55rem; letter-spacing: 1.8px; }
  .topo-link { font-size: .72rem; white-space: nowrap; }
}

/* --------------------------------------------------------------------- hero */

.hero { position: relative; overflow: hidden; background: var(--hero-fundo, var(--fundo-alt)); }
.hero-conteudo {
  position: relative; z-index: 2;
  max-width: 680px; margin: 0 auto;
  /* o rodape reserva a faixa decorativa que o tema ancora no fim do hero */
  padding: 30px 20px 60px;
  text-align: center;
}
.hero-eyebrow {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 16px; border-radius: 999px;
  border: 1px solid var(--hero-eyebrow-borda, var(--linha-forte));
  font-size: .62rem; letter-spacing: 3.4px; text-transform: uppercase; font-weight: 600;
  color: var(--hero-eyebrow-cor, var(--apoio));
}
.hero h1 { font-size: 2.1rem; letter-spacing: -.4px; }
.hero-ano {
  display: block; margin-top: 4px;
  font-family: var(--serifada); font-size: 2.7rem; font-style: italic; font-weight: 600;
  color: var(--marca);
}
.hero-frase {
  margin: 14px auto 0; max-width: 420px;
  font-size: .9rem; color: var(--tinta-suave);
}
.hero-regua { display: block; width: 128px; height: 9px; margin: 18px auto 0; opacity: .5; }

/* Ambientacao do hero: sempre atras do conteudo e sem capturar clique.
   Onde cada cena fica, com que forma e com que cor, e assunto do tema da campanha. */
.hero-cena { position: absolute; z-index: 1; pointer-events: none; }

/* Acabamento da base do hero (onda, recorte, faixa). O desenho vem do tema;
   sem tema declarado, nao aparece nada. */
.hero-borda {
  position: absolute; left: 0; right: 0; bottom: -1px;
  z-index: 2; display: block;
  width: 100%; height: var(--hero-borda-altura, 40px);
  pointer-events: none;
}

/* a transicao do hero para a vitrine precisa ser continua, sem vao morto */
.hero + .secao { padding-top: 24px; }

/* ------------------------------------------------------------------ secoes */

.secao { padding: 62px 0; }
.secao-cabeca { text-align: center; max-width: 560px; margin: 0 auto 34px; }
.secao-cabeca h2 { font-size: 1.7rem; }
.secao-intro { margin: 0; font-size: 1.02rem; color: var(--tinta-suave); font-family: var(--serifada); font-style: italic; }

/* -------------------------------------------------------------- produtos */

/* barra de filtros da colecao + leitura do resultado */
.nav-categorias { margin: 0 0 6px; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); }
.colecao-contagem { margin: 0 0 20px; font-size: .76rem; color: var(--tinta-fraca); text-align: center; }
.colecao-vazio {
  margin: 28px 0 0; padding: 30px 20px; text-align: center;
  border: 1px dashed var(--linha-forte); border-radius: var(--raio);
  font-size: .85rem; color: var(--tinta-suave);
}

.destaques { display: grid; gap: 24px; }

.produto {
  display: flex; flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.produto:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--marca-clara); }

.produto-foto { position: relative; background: var(--fundo-alt); }
/* O palco define a caixa da foto; as camadas ficam empilhadas dentro dele.
   Como a altura e do palco, o crossfade nunca mexe na altura do cartao. */
.foto-palco { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; }
.foto-camada {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* object-position vem do produto (campo "foco"), foto a foto */
  opacity: 0;
  transition: opacity .9s ease-in-out;
}
.foto-camada { z-index: 2; }
.foto-camada.ativa { opacity: 1; }

/* Galeria: toda foto do produto vira miniatura clicavel. A tira fica sob a foto,
   dentro do cartao, para nao cobrir o produto. */
.galeria-thumbs {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px 2px;
  background: var(--papel);
}
.galeria-thumb {
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--linha-forte); border-radius: 9px;
  background: var(--fundo-alt); overflow: hidden; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.galeria-thumb img { width: 100%; height: 100%; object-fit: cover; }
.galeria-thumb:hover { border-color: var(--marca); }
.galeria-thumb.ativa { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-clara); }

/* --------------------------------------------------------- foto ampliada */

.foto-palco[data-produto] { cursor: zoom-in; }
.foto-palco[data-produto]:focus-visible {
  outline: 2px solid var(--marca-forte);
  outline-offset: -3px;
}

.foto-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: 40px 72px;
  background: rgba(38, 27, 24, .9);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity .2s ease;
}
.foto-lightbox[hidden] { display: none; }
.foto-lightbox.aberto { opacity: 1; }

.foto-lightbox-imagem {
  display: block;
  width: auto; height: auto;
  max-width: min(92vw, 1500px);
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  user-select: none;
  touch-action: pan-y pinch-zoom;
  transform: scale(.985);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}
.foto-lightbox.aberto .foto-lightbox-imagem { transform: none; }

.foto-lightbox-fechar,
.foto-lightbox-nav {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--tinta);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.foto-lightbox-fechar:hover,
.foto-lightbox-nav:hover { background: #fff; }
.foto-lightbox-fechar:focus-visible,
.foto-lightbox-nav:focus-visible { outline-color: #fff; }

.foto-lightbox-fechar {
  top: max(18px, env(safe-area-inset-top, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
  width: 46px; height: 46px;
  font: 400 2rem/1 var(--texto);
}
.foto-lightbox-fechar:hover { transform: rotate(90deg); }

.foto-lightbox-nav {
  top: 50%;
  width: 50px; height: 50px;
  font: 400 2.4rem/1 var(--serifada);
  transform: translateY(-50%);
}
.foto-lightbox-nav:hover { transform: translateY(-50%) scale(1.05); }
.foto-lightbox-anterior { left: max(18px, env(safe-area-inset-left, 0px)); }
.foto-lightbox-proxima { right: max(18px, env(safe-area-inset-right, 0px)); }

.foto-lightbox-contador {
  position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(38, 27, 24, .7);
  color: #fff;
  font-size: .7rem; font-weight: 600; letter-spacing: .8px;
  backdrop-filter: blur(6px);
}

@media (max-width: 600px) {
  .foto-lightbox { padding: 54px 16px 58px; }
  .foto-lightbox-imagem {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 112px);
    max-height: calc(100dvh - 112px);
    border-radius: 11px;
  }
  .foto-lightbox-fechar {
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    width: 42px; height: 42px; font-size: 1.8rem;
  }
  .foto-lightbox-nav { width: 42px; height: 42px; font-size: 2rem; }
  .foto-lightbox-anterior { left: 8px; }
  .foto-lightbox-proxima { right: 8px; }
  .foto-lightbox-contador { bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
}

.produto-corpo { display: flex; flex-direction: column; flex: 1; padding: 16px 17px 18px; }
.produto-corpo h3 { font-size: 1.08rem; margin-bottom: 6px; }
.produto-descricao { margin: 0 0 10px; font-size: .82rem; color: var(--tinta-suave); }

.detalhes { margin: 0 0 12px; padding: 0; list-style: none; }
.detalhes li {
  position: relative; padding-left: 14px; margin-bottom: 3px;
  font-size: .76rem; color: var(--tinta-fraca);
}
.detalhes li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--marca-clara);
}

.preco { margin: auto 0 0; padding-top: 10px; }
.preco strong { font-family: var(--serifada); font-size: 1.5rem; color: var(--marca-forte); }
.preco-consulta {
  font-family: var(--texto); font-size: .78rem; font-weight: 600;
  color: var(--apoio); letter-spacing: .3px;
}
.preco-opcoes { margin: auto 0 0; padding: 10px 0 0; list-style: none; }
.preco-opcoes li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px dashed var(--linha);
}
.preco-opcoes li:last-child { border-bottom: 0; }
.preco-opcoes span { font-size: .76rem; color: var(--tinta-suave); }
.preco-opcoes strong { font-family: var(--serifada); font-size: 1.18rem; color: var(--marca-forte); }

/* ---------------------------------------------- comparacao "sem/com" em colunas
   UMA grade de duas colunas, com as celulas como filhas diretas. Cada informacao
   equivalente ocupa a mesma linha, e a linha assume a altura da maior celula —
   por isso um cabecalho que quebra em duas linhas nao desalinha o que vem abaixo.
   Nao ha ajuste por produto: a estrutura e a mesma para todos. */
.preco-grupos {
  position: relative;
  margin: 12px 0 13px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
/* o fio entre as colunas e um so, continuo, e nao depende das celulas */
.preco-grupos::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--linha);
}
.preco-celula { min-width: 0; }
.preco-celula:nth-child(odd) { padding-right: 13px; }
.preco-celula:nth-child(even) { padding-left: 13px; }

.preco-grupo-titulo {
  font-family: var(--texto); font-size: .62rem; font-weight: 700;
  line-height: 1.25; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--apoio);
}
/* linha auxiliar: existe nas duas colunas, mesmo vazia, para nao deslocar nada */
.preco-grupo-nota {
  font-size: .7rem; line-height: 1.25; color: var(--tinta-fraca);
  padding-top: 4px;
}
.preco-grupo-rotulo {
  font-size: .74rem; line-height: 1.3; color: var(--tinta-suave);
  padding-top: 8px;
}
/* por padrao so o rotulo inteiro aparece; as media queries trocam pela forma
   curta ou abreviada conforme a largura da coluna */
.preco-grupo-rotulo .rotulo-curto,
.preco-grupo-rotulo .rotulo-mini { display: none; }

.preco-grupo-valor {
  font-family: var(--serifada); font-size: 1.18rem; color: var(--marca-forte);
  line-height: 1.25;
}
/* a tabela fica junto das informacoes do produto; a sobra vai para o botao,
   que continua ancorado na base do cartao */
.produto-corpo .preco-grupos + .btn { margin-top: auto; }

.produto .btn { margin-top: 13px; width: 100%; min-height: 44px; font-size: .79rem; }

/* destaque editorial: foto grande ao lado do texto */
.produto-destaque .foto-palco { aspect-ratio: 4 / 5; }
.produto-selo {
  display: inline-block; align-self: flex-start; margin-bottom: 10px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--marca-clara); color: var(--marca-forte);
  font-size: .58rem; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700;
}
.produto-destaque .produto-corpo { padding: 20px 20px 22px; }
.produto-destaque .produto-corpo h3 { font-size: 1.4rem; }

.grade { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); margin-top: 20px; }

/* ---------------------------------------------------------------- artes */

.artes {
  position: relative;
  padding: 34px 24px;
  border-radius: var(--raio-g);
  background: var(--artes-fundo, var(--acento));
  color: var(--artes-texto, #f7f3ec);
  overflow: hidden;
}
.artes h2 { font-size: 1.45rem; margin-bottom: 14px; color: inherit; }
.artes p { margin: 0 0 12px; font-size: .85rem; opacity: .9; }
.artes-destaque {
  display: block; margin: 18px 0; padding: 15px 18px;
  border-left: 3px solid var(--artes-realce, #e9c46a);
  border-radius: 8px;
  background: rgba(255, 255, 255, .09);
  font-family: var(--serifada); font-size: 1.08rem; line-height: 1.35;
  color: #fff; opacity: 1;
}
.artes-complemento { margin-bottom: 0 !important; font-size: .82rem !important; }

/* ---------------------------------------------------------------- regras */

.regras { background: var(--fundo-alt); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.regras-eyebrow {
  display: block; margin-bottom: 6px;
  font-size: .62rem; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--apoio); font-weight: 600;
}
.regras-grade { display: grid; gap: 14px; grid-template-columns: 1fr; }
.regra {
  padding: 18px 19px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.regra strong {
  display: block; margin-bottom: 8px;
  font-size: .68rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--marca-forte);
}
.regra p { margin: 0 0 9px; font-size: .81rem; color: var(--tinta-suave); }
.regra p:last-child { margin-bottom: 0; }
.regras-nota { margin: 18px 0 0; text-align: center; font-size: .76rem; color: var(--tinta-fraca); }

/* ------------------------------------------------------------ fechamento */

.fechamento { text-align: center; padding: 62px 0; }
.fechamento h2 { font-size: 1.85rem; margin-bottom: 12px; }
.fechamento p { margin: 0 auto 24px; max-width: 440px; font-size: .87rem; color: var(--tinta-suave); }
.fechamento-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- rodape */

.rodape {
  padding: 26px 0 30px;
  border-top: 1px solid var(--linha);
  font-size: .76rem; color: var(--tinta-fraca);
  text-align: center;
}
.rodape strong { font-family: var(--serifada); font-size: .95rem; color: var(--tinta); font-weight: 600; }
.rodape a { color: var(--marca-forte); font-weight: 600; }
.rodape-linha { margin: 6px 0 0; }




/* ---- foto em duas camadas (modo "fundo") ----------------------------------
   A caixa do destaque no desktop e deitada e as fotos sao retrato. Em vez de
   cortar (cover) ou deixar faixa vazia (contain), a propria foto entra duas vezes:
   desfocada preenchendo a caixa e nitida por cima, inteira e grande.
   Fora do desktop nada disso vale: o fundo some e a foto volta a cover. */
.foto-fundo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
  opacity: 0;
  z-index: 0;
  transition: opacity .9s ease-in-out;
}
.foto-fundo.ativa { opacity: 1; }

@media (min-width: 1100px) {
  .produto-destaque .foto-palco.tem-fundo .foto-fundo {
    display: block;
    /* desfoque moderado + cor puxada para tras: e extensao, nao concorrente */
    filter: blur(22px) saturate(.42) brightness(1.14) contrast(.82);
    transform: scale(1.18);
  }

  /* vela creme/rose por cima do fundo, para ele nao disputar com a foto nitida */
  .produto-destaque .foto-palco.tem-fundo::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: var(--foto-vela, linear-gradient(180deg, rgba(253,247,242,.66) 0%, rgba(248,236,228,.74) 100%));
    pointer-events: none;
  }

  /* a foto nitida: inteira, centralizada, ocupando toda a altura util */
  .produto-destaque .foto-palco.tem-fundo .foto-camada.foto-nitida {
    object-fit: contain;
    object-position: 50% 50% !important;
    padding: 10px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(91, 58, 50, .16));
  }
  .produto-destaque .foto-palco.tem-fundo:hover .foto-camada.foto-nitida.ativa {
    transform: scale(1.03);
  }
}

/* Foto que perderia o produto no recorte: aparece inteira, centralizada, sobre o
   fundo do proprio cartao. So entra onde a caixa do destaque fica deitada. */
@media (min-width: 1100px) {
  .produto-destaque .foto-camada.foto-inteira {
    object-fit: contain;
    padding: 14px;
  }
  .produto-destaque .produto-foto:has(.foto-inteira.ativa) { background: var(--foto-fundo, #fbf3ee); }
  /* zoom menor na foto inteira: com contain um zoom forte encostaria nas bordas */
  .produto-destaque .produto-foto:hover .foto-camada.foto-inteira.ativa { transform: scale(1.025); }
}

/* ------------------------------------------------------- acabamento e ritmo */

/* Barra de filtros fixa. A sentinela (vazia) so serve de gatilho para o JS saber
   quando a barra encostou no topo. */
.nav-sentinela { height: 1px; margin: 0; }

.nav-categorias {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.nav-categorias.fixada {
  box-shadow: 0 6px 22px rgba(91, 58, 50, .10);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}

/* Entrada dos cards: curta e discreta. O atraso por card vem do JS. */
.produto {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1),
              box-shadow .22s ease, border-color .22s ease;
}
.produto.revelado { opacity: 1; transform: none; }
/* o hover de elevacao continua valendo depois de revelado */
.produto.revelado:hover { transform: translateY(-3px); }

/* Zoom leve da foto no hover — so onde existe cursor de verdade.
   O zoom e no elemento, entao object-position (ponto focal) e o crossfade seguem iguais. */
@media (hover: hover) and (pointer: fine) {
  .foto-camada { transition: opacity .9s ease-in-out, transform .6s cubic-bezier(.22, .61, .36, 1); }
  .produto-foto:hover .foto-camada.ativa { transform: scale(1.045); }
}

/* Ritmo entre blocos: divisoria fina e discreta entre as grandes secoes. */
.secao + .secao { position: relative; }
.secao + .secao::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(280px, 46%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--linha-forte), transparent);
}

/* Scrollbar discreta, so no desktop com mouse. */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--marca-clara) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--marca-clara);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--marca); background-clip: content-box; }
}

@media (prefers-reduced-motion: reduce) {
  .produto { opacity: 1; transform: none; transition: none; }
  .produto.revelado:hover { transform: none; }
  .produto-foto:hover .foto-camada.ativa { transform: none; }
  .nav-categorias { transition: none; }
}




/* ------------------------------------------------------------- responsivo */

/* No celular a grade tem duas colunas estreitas: a tipografia precisa acompanhar,
   senao nome, preco e botao quebram em varias linhas. Os destaques, que ocupam a
   largura inteira, mantem a escala normal. */
@media (max-width: 699px) {
  .grade { gap: 13px; }
  .grade .produto-corpo { padding: 12px 12px 14px; }
  .grade .produto-corpo h3 { font-size: .92rem; line-height: 1.25; }
  .grade .produto-descricao { margin-bottom: 8px; font-size: .75rem; }
  .grade .detalhes { margin-bottom: 9px; }
  .grade .detalhes li { padding-left: 11px; font-size: .7rem; }
  .grade .preco { padding-top: 6px; }
  .grade .preco strong { font-size: 1.15rem; }
  .grade .preco-consulta { font-size: .72rem; }
  .grade .btn {
    margin-top: 10px; min-height: 40px; padding: 0 10px;
    font-size: .73rem; gap: 6px; white-space: nowrap;
  }
  .galeria-thumbs { gap: 5px; padding: 7px 8px 1px; }
  .galeria-thumb { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------ celular
   Ate 600px o catalogo vira UMA coluna. Com o cartao ocupando a largura util,
   a tipografia reduzida que existe para a grade de duas colunas deixa de fazer
   sentido: aqui ela volta ao tamanho confortavel. Nada disto alcanca o desktop. */
@media (max-width: 600px) {
  /* ---------------------------------------------- grade comum: duas colunas
     Os cartoes sao desenhados para a coluna estreita — nao sao os do desktop
     espremidos: foto mais baixa, tipografia propria e espacos economicos. */
  .grade { grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 18px; }
  /* quadrada na grade estreita: deixa dois produtos por linha e quatro por tela */
  .grade .foto-palco { aspect-ratio: 1 / 1; }

  .grade .produto-corpo { padding: 9px 9px 10px; }
  .grade .produto-corpo h3 {
    font-size: .84rem; line-height: 1.25; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .grade .produto-descricao {
    margin-bottom: 6px; font-size: .71rem; line-height: 1.38;
    /* O teto existe so para o caso extremo: a altura da linha ja e definida
       pelo cartao vizinho mais alto, entao soltar ate quatro linhas nao custa
       pixel nenhum e evita cortar a descricao no meio da informacao. */
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .grade .detalhes { margin-bottom: 7px; }
  .grade .detalhes li { padding-left: 10px; margin-bottom: 2px; font-size: .67rem; line-height: 1.35; }
  .grade .detalhes li::before { width: 4px; height: 4px; top: .58em; }
  /* Numa linha de dois, o cartao mais curto herda a altura do vizinho e sobra
     espaco acima do preco. A fina linha de base ancora o bloco de preco na mesma
     altura nos dois cartoes: o respiro passa a ler como composicao, nao buraco. */
  .grade .preco,
  .grade .preco-opcoes { border-top: 1px solid var(--linha); padding-top: 9px; }
  /* Na coluna estreita a tabela de opcoes encolhe junto com o resto do cartao;
     a linha de base acompanha a dos demais produtos da grade. */
  .grade .preco-grupos { border-top: 1px solid var(--linha); padding-top: 9px; margin-top: 10px; }
  .grade .preco-celula:nth-child(odd) { padding-right: 5px; }
  .grade .preco-celula:nth-child(even) { padding-left: 5px; }
  .grade .preco-grupo-titulo { font-size: .52rem; letter-spacing: .2px; line-height: 1.2; }
  .grade .preco-grupo-nota { font-size: .56rem; padding-top: 3px; }
  .grade .preco-grupo-rotulo { font-size: .6rem; line-height: 1.2; padding-top: 6px; }
  .grade .preco-grupo-valor { font-size: .9rem; }

  .grade .preco strong { font-size: 1.02rem; }
  .grade .preco small { font-size: .6rem; }
  .grade .preco-consulta { font-size: .7rem; }
  .grade .preco-opcoes li { padding: 3px 0; }
  .grade .preco-opcoes span { font-size: .66rem; }
  .grade .preco-opcoes strong { font-size: .92rem; }
  .grade .btn {
    margin-top: 8px; min-height: 38px; padding: 0 8px;
    font-size: .69rem; gap: 4px; white-space: nowrap;
  }
  .grade .galeria-thumbs { gap: 4px; padding: 6px 6px 0; }
  .grade .galeria-thumb { width: 28px; height: 28px; border-radius: 6px; }


  /* --------------------------------- recorte "Destaques": uma coluna compacta
     Com o recorte de destaques ativo a grade vira coluna unica. O cartao daqui
     nao e o editorial gigante nem o da grade de dois: recupera o selo e a
     largura inteira, mas com foto deitada e altura contida — da para ver um
     produto inteiro e o comeco do proximo na mesma tela. O prefixo .grade
     garante que estas regras vencam as da grade de duas colunas acima. */
  .grade.grade-realce { grid-template-columns: 1fr; gap: 12px; }
  .grade.grade-realce .foto-palco { aspect-ratio: 3 / 2; }
  .grade.grade-realce .produto-corpo { padding: 13px 15px 14px; }
  /* nesta largura o nome e a descricao cabem inteiros: nada de corte */
  .grade.grade-realce .produto-corpo h3 {
    display: block; font-size: 1.06rem; line-height: 1.22; margin-bottom: 5px;
  }
  .grade.grade-realce .produto-descricao {
    display: block; font-size: .8rem; line-height: 1.45; margin-bottom: 7px;
  }
  .grade.grade-realce .detalhes { margin-bottom: 7px; }
  .grade.grade-realce .detalhes li {
    padding-left: 12px; margin-bottom: 3px; font-size: .74rem; line-height: 1.4;
  }
  /* a linha de base do preco existe para emparelhar cartoes lado a lado;
     em coluna unica ela nao tem par, entao sai */
  .grade.grade-realce .preco,
  .grade.grade-realce .preco-opcoes { border-top: 0; padding-top: 8px; }
  .grade.grade-realce .preco strong { font-size: 1.3rem; }
  .grade.grade-realce .preco small { font-size: .68rem; }
  .grade.grade-realce .preco-consulta { font-size: .8rem; }
  .grade.grade-realce .preco-opcoes li { padding: 5px 0; }
  .grade.grade-realce .preco-opcoes span { font-size: .76rem; }
  .grade.grade-realce .preco-opcoes strong { font-size: 1.1rem; }
  .grade.grade-realce .btn {
    margin-top: 10px; min-height: 44px; padding: 0 14px; font-size: .78rem; gap: 6px;
  }

  /* ------------------------------------- destaques: seguem em coluna unica
     Sao os tres produtos valorizados da colecao e continuam ocupando a largura
     inteira, com foto e tipografia maiores que a grade. O que encolhe aqui e so
     o espaco morto: a foto deixa de ser vertical (4/5 custava 450px de altura
     num cartao de 362px de largura) e os respiros internos ficam mais curtos. */
  .destaques { gap: 14px; margin-bottom: 4px; }
  .produto-destaque .foto-palco { aspect-ratio: 1 / 1; }
  .produto-destaque .produto-corpo { padding: 12px 15px 13px; }
  .produto-destaque .produto-corpo h3 { font-size: 1.18rem; margin-bottom: 5px; }
  .produto-destaque .produto-descricao { font-size: .85rem; margin-bottom: 7px; }
  .produto-destaque .detalhes { margin-bottom: 6px; }
  .produto-destaque .preco { padding-top: 8px; }
  .produto-destaque .btn { margin-top: 9px; min-height: 44px; font-size: .82rem; }

  /* ------------------------------------------------------ respiro lateral */
  .container { padding: 0 14px; }

  /* --------------------------------------------------------- hero compacto
     A regua encolhe e a vitrine sobe: a passagem do hero para os filtros
     fica continua, sem a faixa vazia que existia entre os dois. */
  .hero-regua { width: 104px; height: 7px; margin-top: 13px; }
  .hero + .secao { padding-top: 14px; }
  .hero + .secao .secao-cabeca { margin-bottom: 14px; }
  .colecao-contagem { margin-bottom: 12px; }

  /* ------------------------------------------ filtros: todos na mesma linha
     A barra encolhe fonte, padding e espaco ate caber os seis itens sem rolar.
     Se ainda assim nao couber (telas muito estreitas), a rolagem lateral segue
     valendo como rede de seguranca — nada fica inacessivel. */
  /* 'safe center' centraliza quando sobra espaco, mas volta a alinhar pela
     esquerda se faltar — sem isso o primeiro filtro fica cortado e inalcancavel. */
  .nav-trilho { padding: 7px 5px; gap: 2px; justify-content: center; justify-content: safe center; }
  .nav-item {
    padding: 0 5px; min-height: 34px;
    font-size: .64rem; letter-spacing: -.15px;
  }

  /* ------------------------------------- componentes comuns aos dois destaques
     O cartao de realce (recorte Destaques) e o editorial (vitrine sem filtro)
     usam o MESMO selo e a MESMA miniatura: mesma medida, mesmo raio, mesmo
     respiro. Antes cada um tinha o seu valor, herdado das rodadas anteriores.
     O raio das miniaturas segue a proporcao da base (9px para 44px): 7px para
     34px e 6px para os 28px da grade. */
  .produto-destaque .produto-selo,
  .grade.grade-realce .produto-selo { margin-bottom: 6px; padding: 4px 12px; font-size: .58rem; }
  .produto-destaque .galeria-thumbs,
  .grade.grade-realce .galeria-thumbs { gap: 5px; padding: 5px 9px 0; }
  .produto-destaque .galeria-thumb,
  .grade.grade-realce .galeria-thumb { width: 34px; height: 34px; border-radius: 7px; }
  /* o marcador acompanha o corpo do texto: grade e realce usam a mesma escala */
  .grade .detalhes li::before,
  .grade.grade-realce .detalhes li::before { width: 4px; height: 4px; top: .58em; }

  /* --------------------------------------------------- secoes informativas */
  .secao { padding: 40px 0; }
  .secao-cabeca { margin-bottom: 22px; }

  .artes { padding: 20px 16px; border-radius: var(--raio); }
  .artes h2 { font-size: 1.18rem; margin-bottom: 9px; }
  .artes p { margin-bottom: 8px; font-size: .79rem; line-height: 1.5; }
  .artes-destaque { margin: 12px 0; padding: 11px 13px; font-size: .98rem; line-height: 1.3; }
  .artes-complemento { font-size: .76rem !important; }

  /* O corpo do texto fica como esta — o que encolhe e so o espaco entre e ao
     redor dos cartoes, que e onde havia sobra. */
  .secao.regras { padding: 32px 0 34px; }
  .secao.regras .secao-cabeca { margin-bottom: 18px; }
  /* A secao vira duas colunas no celular: quatro cartoes em duas linhas em vez
     de quatro linhas. O texto encolhe pouco — o que paga a conta e o padding.
     Com numero impar de cartoes o ultimo ocupa a linha inteira, para nunca
     sobrar um cartao estreito sozinho. */
  /* alturas naturais: esticar o cartao curto ate o do lado abria um vao de
     quase 100px dentro dele. Os topos seguem alinhados, que e o que da a leitura
     de linha; o rodape de cada cartao acompanha o proprio texto. */
  .regras-grade { grid-template-columns: repeat(2, 1fr); gap: 8px; align-items: start; }
  .regra:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .regra { padding: 11px 11px 12px; border-radius: var(--raio-sm, 12px); }
  .regra strong { margin-bottom: 4px; font-size: .6rem; letter-spacing: .9px; }
  /* coluna estreita: hifenizacao evita os rios de espaco em branco */
  .regra p {
    margin-bottom: 6px; font-size: .72rem; line-height: 1.42;
    hyphens: auto; -webkit-hyphens: auto;
  }
  .regra p:last-child { margin-bottom: 0; }
  .regras-nota { margin-top: 11px; font-size: .7rem; }

  /* ------------------------------------------------------------ CTA final */
  .fechamento { padding: 42px 0; }
  .fechamento h2 { font-size: 1.6rem; margin-bottom: 9px; }
  .fechamento p { margin-bottom: 18px; font-size: .83rem; }
  .fechamento-acoes { flex-direction: column; align-items: stretch; gap: 9px; }
  .fechamento-acoes .btn { width: 100%; min-height: 48px; }
}

/* Os seis filtros precisam caber numa linha so. Abaixo de 460px a barra passa a
   sangrar ate a borda da tela: a pista ganha os 28px da calha lateral, e essa
   folga e gasta em separacao entre os rotulos e num corpo de texto um pouco
   maior — nao em vao. A fonte de cada degrau e a maior que ainda cabe. */
@media (max-width: 460px) {
  .nav-categorias { width: calc(100% + 28px); margin-inline: -14px; }
  .nav-trilho { padding: 7px 0; gap: 0; }
  .nav-item { padding: 0 3px; font-size: .66rem; }
}
@media (max-width: 400px) {
  .nav-item { padding: 0 3px; font-size: .63rem; letter-spacing: -.2px; }
}
/* Na grade de dois produtos por linha a coluna interna fica com cerca de 60px:
   o rotulo passa a usar a forma abreviada (Kit 10 un.). O alinhamento entre as
   colunas nao depende disso — quem garante e a grade unica. */
@media (max-width: 600px) {
  .grade .preco-grupo-rotulo .rotulo-longo,
  .grade .preco-grupo-rotulo .rotulo-curto { display: none; }
  .grade .preco-grupo-rotulo .rotulo-mini { display: inline; }
}
@media (max-width: 370px) {
  .nav-item { padding: 0 3px; font-size: .59rem; letter-spacing: -.25px; }
}
/* Abaixo de 340px (aparelhos antigos) nem o menor corpo de texto legivel cabe:
   ali a barra volta a rolar lateralmente, com todos os filtros acessiveis. */
@media (max-width: 340px) {
  .nav-item { padding: 0 2px; font-size: .55rem; }
}

/* O cartao de realce e uma solucao de celular. No desktop o recorte de destaques
   continua sendo a grade de sempre, entao o selo extra nao aparece por la. */
@media (min-width: 601px) {
  .grade-realce .produto-selo { display: none; }
}

@media (min-width: 700px) {
  .container { padding: 0 28px; }
  .hero-conteudo { padding: 44px 28px 46px; max-width: 620px; }
  .hero h1 { font-size: 3.1rem; }
  .hero-ano { font-size: 3.8rem; }
  .secao { padding: 86px 0; }
  .secao-cabeca h2 { font-size: 2rem; }
  .secao-intro { font-size: 1.15rem; }
  .grade { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
  .destaques { gap: 34px; }

  .produto-destaque { flex-direction: row; align-items: stretch; }
  .produto-destaque.invertido { flex-direction: row-reverse; }
  /* A altura da faixa vem do texto; a foto preenche a coluna. Sem isto cada destaque
     ficava com uma altura diferente, conforme a proporcao natural da imagem. */
  /* mais alta e um pouco mais estreita: recorte menos agressivo em foto retrato */
  .produto-destaque .produto-foto { flex: 0 0 40%; position: relative; min-height: 420px; }
  .produto-destaque .foto-palco { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  /* na faixa de destaque a foto ocupa a coluna inteira: a tira flutua no canto */
  .produto-destaque .galeria-thumbs {
    position: absolute; left: 12px; bottom: 12px;
    z-index: 3;
    padding: 6px; border-radius: 12px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(4px);
    box-shadow: var(--sombra);
  }
  .produto-destaque .produto-corpo { justify-content: center; padding: 30px 34px; }
  .produto-destaque.invertido .produto-corpo { padding-left: 48px; }
  .produto-destaque .produto-corpo h3 { font-size: 1.75rem; }
  .produto-destaque .produto-descricao { font-size: .88rem; }
  .produto-destaque .btn { width: auto; align-self: flex-start; padding: 0 28px; }
  /* no destaque o corpo ja e centralizado: empurrar o preco para baixo abriria um vao */
  .produto-destaque .preco,
  .produto-destaque .preco-opcoes { margin-top: 4px; }
  .produto-destaque .preco-opcoes { max-width: 340px; }


  .artes { padding: 46px 48px; }
  .artes h2 { font-size: 1.8rem; }
  .artes-destaque { font-size: 1.3rem; padding: 18px 22px; }
  .regras-grade { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .regra-larga { grid-column: 1 / -1; }
  .fechamento h2 { font-size: 2.4rem; }
}

/* O rotulo longo so cabe na coluna larga do desktop (>=1340px). Abaixo disso
   entra a versao curta, e o corpo do texto acompanha a coluna que encolhe. */
@media (max-width: 1339px) {
  .preco-grupo-rotulo .rotulo-longo { display: none; }
  .preco-grupo-rotulo .rotulo-curto { display: inline; }
}
@media (max-width: 999px) {
  .preco-grupo-rotulo { font-size: .66rem; }
  .preco-grupo-nota { font-size: .64rem; }
  .preco-grupo-valor { font-size: 1.05rem; }
}

@media (min-width: 1000px) {
  .regras-grade { grid-template-columns: repeat(3, 1fr); }
  .regra-larga { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .foto-camada, .foto-fundo { transition: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------- atalhos flutuantes
   Voltar ao topo (so ate 600px, canto inferior esquerdo) e WhatsApp (todas as
   larguras, canto inferior direito). Os dois sao criados pelo motor, nao pelo
   HTML da campanha. Somem quando o CTA final entra em cena — ver campanha.js. */

/* marca os 600px de rolagem que liberam o atalho de topo; fora do fluxo */
.atalho-sentinela {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 600px;
  visibility: hidden; pointer-events: none;
}

.atalho {
  position: fixed;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  box-shadow: 0 5px 16px rgba(91, 58, 50, .14);
  cursor: pointer;
  /* nasce oculto: quem libera e o observador de rolagem */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .24s ease, transform .24s ease, visibility .24s,
              background-color .2s ease, border-color .2s ease;
}
.atalho.visivel { opacity: 1; visibility: visible; transform: none; }
.atalho:focus-visible { outline: 2px solid var(--marca-forte); outline-offset: 3px; }

.atalho-topo {
  /* no desktop nao existe: la a rolagem e curta e ha barra do navegador */
  display: none;
  left: 14px; bottom: 14px;
  background: var(--papel);
  color: var(--marca-forte);
}
/* a seta e so um tracinho: peso medio pesa menos que o 700 anterior, e o -1px
   corrige o desalinhamento optico do glifo, que nasce baixo na caixa de texto */
.atalho-seta { font-size: 1.1rem; line-height: 1; font-weight: 500; transform: translateY(-1px); }
.atalho-topo:hover { border-color: var(--marca); }

/* verde oficial do WhatsApp: o reconhecimento aqui vale mais que a paleta da
   campanha — e o unico elemento da pagina que nao e rose, de proposito */
.atalho-zap {
  right: 14px; bottom: 14px;
  background: #25d366;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 16px rgba(29, 125, 63, .24);
}
.atalho-zap svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.atalho-zap:hover { background: #1da851; }

@media (max-width: 600px) {
  .atalho-topo { display: grid; }
  /* sobem um pouco para nao morder o rodape dos cards; env() acrescenta a
     faixa da barra inferior nos aparelhos que a tem, e vale 0 nos que nao tem */
  .atalho-topo,
  .atalho-zap { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .atalho { transition: none; }
}