/* ═══════════════════════════════════════════════════════════════════════════
   CAMADA DE VIDA — cor, tema por categoria, prateleiras e arte gerada.
   Carregada depois de site.css.

   Três problemas que esta camada resolve:
   1. 26 logos da mesma IDV viram parede uniforme → cada categoria ganha cor.
   2. Grade única de cards é densa e cansa → prateleiras com scroll lateral.
   3. Página sem imagem fica inerte → gradientes, blobs e grão gerados em CSS/SVG.

   Regra que não se quebra: fundo claro. Nada de roxo escuro como superfície.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Rosa e lilás saem do gradiente da própria logo (#D39C9A, #B9A9BE) */
  --rosa-luz:   #FDF2F3;
  --rosa-claro: #F7DDE0;
  --rosa:       #D39C9A;
  --rosa-forte: #B85C6B;   /* texto/ação sobre claro — 4.9:1 */

  --lilas-luz:   #F6F2FA;
  --lilas-claro: #E7DEF0;
  --lilas:       #B9A9BE;
  --lilas-forte: #7A5E86;

  --violeta-luz:   #F3EEFC;
  --violeta-claro: #DFD3F7;
  --violeta-forte: #6E56D6;

  --dourado-luz:   #FCF4E9;
  --dourado-claro: #F2E1C8;
  --dourado-forte: #A8571E;

  --ameixa-luz:   #F9F0F5;
  --ameixa-claro: #EDD9E4;
  --ameixa-forte: #8A4F72;

  /* Acento vigente — cada bloco com .tema-* reescreve estes três */
  --acento:       var(--rosa-forte);
  --acento-luz:   var(--rosa-luz);
  --acento-claro: var(--rosa-claro);
  --acento-puro:  var(--rosa);
}

.tema-rosa     { --acento: var(--rosa-forte);    --acento-luz: var(--rosa-luz);    --acento-claro: var(--rosa-claro);    --acento-puro: var(--rosa); }
.tema-lilas    { --acento: var(--lilas-forte);   --acento-luz: var(--lilas-luz);   --acento-claro: var(--lilas-claro);   --acento-puro: var(--lilas); }
.tema-violeta  { --acento: var(--violeta-forte); --acento-luz: var(--violeta-luz); --acento-claro: var(--violeta-claro); --acento-puro: var(--violet-light); }
.tema-dourado  { --acento: var(--dourado-forte); --acento-luz: var(--dourado-luz); --acento-claro: var(--dourado-claro); --acento-puro: var(--gold); }
.tema-ameixa   { --acento: var(--ameixa-forte);  --acento-luz: var(--ameixa-luz);  --acento-claro: var(--ameixa-claro);  --acento-puro: #A9799A; }

/* ─────────────────────────────────────────── nada de bloco escuro, em lugar nenhum */
.chip[aria-pressed="true"], .chip.is-on {
  background: linear-gradient(135deg, var(--rosa-claro), var(--lilas-claro));
  border-color: var(--acento-puro);
  color: var(--purple);
  font-weight: 600;
}
.skip { background: var(--rosa-forte); color: #fff; }

/* ═══════════════════════════════════════════════════════ arte gerada (sem imagem) */

/* Grão sutil: dá textura de papel e tira o aspecto de tela chapada.
   É um SVG de ruído embutido — não custa requisição nem banda. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .10; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
}
main, .header, .footer { position: relative; z-index: 1; }

/* Manchas de luz que dão profundidade sem escurecer nada.
   Cada seção com .aura recebe duas, posicionadas de forma diferente. */
.aura { position: relative; overflow: hidden; isolation: isolate; }
.aura::before, .aura::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  pointer-events: none; filter: blur(60px);
}
.aura::before {
  width: 62vw; height: 62vw; max-width: 620px; max-height: 620px;
  top: -22%; right: -14%;
  background: radial-gradient(circle, rgba(211,156,154,.42) 0%, rgba(211,156,154,0) 68%);
}
.aura::after {
  width: 54vw; height: 54vw; max-width: 520px; max-height: 520px;
  bottom: -26%; left: -16%;
  background: radial-gradient(circle, rgba(167,133,255,.30) 0%, rgba(167,133,255,0) 68%);
}
.aura-inversa::before { right: auto; left: -16%; background: radial-gradient(circle, rgba(185,169,190,.42) 0%, rgba(185,169,190,0) 68%); }
.aura-inversa::after  { left: auto; right: -14%; background: radial-gradient(circle, rgba(219,160,93,.26) 0%, rgba(219,160,93,0) 68%); }

/* Faixa clara com leve tinta de cor — substitui os blocos brancos chapados */
.band-rosa   { background: linear-gradient(180deg, #FFFFFF 0%, var(--rosa-luz) 100%); }
.band-lilas  { background: linear-gradient(180deg, var(--lilas-luz) 0%, #FFFFFF 100%); }
.band-creme  { background: linear-gradient(180deg, #FFFFFF 0%, var(--dourado-luz) 100%); }

/* Onda divisória entre seções — quebra a monotonia das faixas retas */
.onda { display: block; width: 100%; height: 42px; }
.onda path { fill: currentColor; }

/* ═══════════════════════════════════════════════════════════════ PRATELEIRAS */
/* Uma linha por categoria, rolando na horizontal. Resolve os dois pedidos ao
   mesmo tempo: cabe muito produto sem empilhar, e cada linha tem cara própria. */

.prateleira { margin-bottom: clamp(30px, 5vw, 52px); }

.prateleira-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.prateleira-titulo { display: flex; align-items: center; gap: 10px; margin: 0; }
.prateleira-titulo h3 {
  font-size: clamp(1.15rem, 3.4vw, 1.5rem); margin: 0; line-height: 1.15;
}
.prateleira-selo {
  width: 34px; height: 34px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--acento-claro), var(--acento-luz));
  color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--acento-puro) 40%, transparent);
}
.prateleira-selo svg { width: 18px; height: 18px; }
.prateleira-sub { font-size: .9rem; color: var(--ink-soft); margin: 4px 0 0; max-width: 62ch; }
.prateleira-verTodos { font-size: .88rem; font-weight: 600; color: var(--acento); white-space: nowrap; flex: none; }

/* O trilho */
.trilho-wrap { position: relative; }
.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%;
  gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  padding: 4px var(--pad) 14px; margin-inline: calc(var(--pad) * -1);
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }
@media (min-width: 560px) { .trilho { grid-auto-columns: 44%; } }
@media (min-width: 900px) { .trilho { grid-auto-columns: 30%; } }
@media (min-width: 1180px) { .trilho { grid-auto-columns: 23.5%; } }

/* Sombra de borda avisando que há mais conteúdo para o lado */
.trilho-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 14px; right: calc(var(--pad) * -1);
  width: 48px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ivory));
  opacity: .9;
}
.band-white .trilho-wrap::after { background: linear-gradient(90deg, transparent, #fff); }

/* Setas — só no desktop, onde não há gesto de arrastar */
.trilho-seta {
  display: none; position: absolute; top: 38%; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); color: var(--purple);
  place-items: center; box-shadow: var(--shadow-2);
  transition: all var(--fast);
}
.trilho-seta:hover { border-color: var(--acento-puro); color: var(--acento); transform: scale(1.06); }
.trilho-seta[disabled] { opacity: 0; pointer-events: none; }
.trilho-seta.esq { left: -16px; }
.trilho-seta.dir { right: -16px; }
@media (min-width: 1024px) { .trilho-seta { display: grid; } }

/* ═════════════════════════════════════════════════════ card com tema de categoria */
.card { background: #fff; }

/* O palco herda a cor da categoria: é o que faz um card não parecer o outro */
.card .card-stage {
  background: linear-gradient(150deg, var(--acento-luz) 0%, #FFFFFF 55%, var(--acento-luz) 100%);
  position: relative; overflow: hidden;
}
/* Um halo atrás do símbolo, na cor do tema */
.card .card-stage::before {
  content: ''; position: absolute; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento-puro) 34%, transparent) 0%, transparent 70%);
  filter: blur(14px);
}
.card .card-stage img { position: relative; z-index: 1; }
.card .card-cta { color: var(--acento); }
.card:hover { border-color: color-mix(in srgb, var(--acento-puro) 55%, transparent); }
.card .tag { background: var(--acento-luz); color: var(--acento); border-color: color-mix(in srgb, var(--acento-puro) 30%, transparent); }

/* Fita superior colorida: identifica a categoria de relance */
.card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--acento-puro), color-mix(in srgb, var(--acento-puro) 30%, #fff));
  opacity: 0; transition: opacity var(--slow);
}
.card:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════ portas com cor própria */
.door { position: relative; overflow: hidden; }
.door::before {
  content: ''; position: absolute; z-index: 0; top: -40%; right: -30%;
  width: 200px; height: 200px; border-radius: 50%; filter: blur(34px);
  background: radial-gradient(circle, color-mix(in srgb, var(--acento-puro) 40%, transparent), transparent 70%);
  transition: transform var(--slow);
}
.door:hover::before { transform: scale(1.25); }
.door > * { position: relative; z-index: 1; }
.door .card-cta { color: var(--acento); }
.door::after { background: linear-gradient(180deg, var(--acento-puro), color-mix(in srgb, var(--acento-puro) 30%, #fff)); }

/* ═══════════════════════════════════════════════════════ degraus da escada */
.rung { position: relative; overflow: hidden; }
.rung::after {
  content: ''; position: absolute; inset: auto -20% -40% auto;
  width: 180px; height: 180px; border-radius: 50%; filter: blur(30px); z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento-puro) 34%, transparent), transparent 70%);
}
.rung > * { position: relative; z-index: 1; }
.rung::before { position: relative; z-index: 1; }
.rung .card-cta { color: var(--acento); }

/* ═══════════════════════════════════════════════════════════ hero com mais vida */
.hero::before { display: none; }   /* substituído pela .aura, mais rica */

.hero-visual .placeholder {
  border: 0 !important;
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(211,156,154,.50) 0%, transparent 55%),
    radial-gradient(110% 90% at 82% 78%, rgba(167,133,255,.42) 0%, transparent 58%),
    radial-gradient(90% 80% at 60% 40%, rgba(219,160,93,.26) 0%, transparent 60%),
    linear-gradient(160deg, #FFFFFF, var(--rosa-luz)) !important;
  box-shadow: var(--shadow-2);
}
.hero-visual .placeholder img { opacity: .8 !important; }

/* ═════════════════════════════════════════════════════════ destaque do ecossistema */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: ''; position: absolute; z-index: 0; inset: -30% -20% auto auto;
  width: 380px; height: 380px; border-radius: 50%; filter: blur(50px);
  background: radial-gradient(circle, color-mix(in srgb, var(--acento-puro) 38%, transparent), transparent 70%);
}
.spotlight > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════ respiro */
/* O pedido era "menos amontoado": mais ar entre blocos e menos coisa por tela. */
.band { padding-block: clamp(52px, 9vw, 104px); }
.section-head { margin-bottom: clamp(22px, 3.4vw, 34px); }

/* ═══════════════════════════════════════════════ ajuste fino do card na prateleira */
/* O pedido era "menos amontoado", não "mais alto": o card encolhe sem perder ar. */
.trilho .card-body { padding: 14px 16px 16px; gap: 7px; }
.trilho .card-stage { min-height: 92px; padding: 16px; }
.trilho .card-name { font-size: .98rem; }
.trilho .card-line { font-size: .87rem; line-height: 1.45; }
.trilho .card-cat { font-size: .64rem; }
.trilho .card-foot { padding-top: 11px; }
.trilho .card-price { font-size: 1.02rem; }

/* Padrão geométrico próprio por tema — é o que dá "cara" a cada prateleira
   sem depender de fotografia. Fica atrás do símbolo, bem discreto. */
.card .card-stage::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-repeat: repeat; background-size: 22px 22px;
}
.tema-rosa .card-stage::after {
  background-image: radial-gradient(circle at 50% 50%, rgba(211,156,154,.42) 1.4px, transparent 1.5px);
}
.tema-violeta .card-stage::after {
  background-image: radial-gradient(circle at 50% 50%, rgba(167,133,255,.36) 1.4px, transparent 1.5px);
  background-size: 26px 26px;
}
.tema-dourado .card-stage::after {
  background-image: repeating-linear-gradient(135deg, rgba(219,160,93,.22) 0 1px, transparent 1px 11px);
  background-size: auto;
}
.tema-lilas .card-stage::after {
  background-image: repeating-linear-gradient(45deg, rgba(185,169,190,.26) 0 1px, transparent 1px 12px);
  background-size: auto;
}
.tema-ameixa .card-stage::after {
  background-image: radial-gradient(circle at 50% 50%, rgba(169,121,154,.34) 1.5px, transparent 1.6px);
  background-size: 20px 20px;
}
.card .card-stage img { position: relative; z-index: 2; }

/* Cabeçalho da prateleira mais compacto no desktop */
@media (min-width: 900px) {
  .prateleira-topo { align-items: center; }
  .prateleira-sub { margin-top: 2px; }
}

/* ══════════════════════════════════════════════ botão principal em rosa→ameixa */
/* O dourado da IDV continua como cor de ação nos temas e nas etiquetas, mas o
   botão primário — o maior momento de cor da tela — passa a ser o rosa que ela
   gosta. As duas pontas do gradiente passam em AA com texto branco (5,7 e 7,5). */
.btn {
  background: linear-gradient(135deg, #A8455C 0%, #7A4265 100%);
  box-shadow: 0 1px 2px rgba(51,35,50,.10), 0 8px 20px rgba(122,66,101,.26);
}
.btn:hover {
  background: linear-gradient(135deg, #963C52 0%, #6A385A 100%);
  box-shadow: 0 2px 4px rgba(51,35,50,.10), 0 14px 28px rgba(122,66,101,.32);
}
.btn-ghost, .btn-ghost:hover {
  background: rgba(255,255,255,.72); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--rosa); box-shadow: var(--shadow-1); }
.btn-violet { background: linear-gradient(135deg, #7B5BD6 0%, #A785FF 100%); }
.btn-violet:hover { background: linear-gradient(135deg, #6B4CC4 0%, #9670F5 100%); }

/* ═══════════════════════════════════════════════ mais cor no hero, sobretudo mobile */
.hero { --aura-forca: 1; }
.aura::before { background: radial-gradient(circle, rgba(211,156,154,.62) 0%, rgba(211,156,154,0) 66%); }
.aura::after  { background: radial-gradient(circle, rgba(167,133,255,.46) 0%, rgba(167,133,255,0) 66%); }
.aura-inversa::before { background: radial-gradient(circle, rgba(185,169,190,.58) 0%, rgba(185,169,190,0) 66%); }
.aura-inversa::after  { background: radial-gradient(circle, rgba(219,160,93,.38) 0%, rgba(219,160,93,0) 66%); }

/* Terceira mancha, só no hero: garante cor visível no celular, onde a coluna
   da imagem não aparece. */
.hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 86vw; height: 86vw; max-width: 700px; max-height: 700px;
  left: -34%; top: 26%; border-radius: 50%; filter: blur(70px);
  background: radial-gradient(circle, rgba(167,133,255,.34) 0%, rgba(211,156,154,.22) 45%, transparent 68%);
}
@media (min-width: 900px) { .hero::after { left: auto; right: 6%; top: 8%; } }

/* ══════════════════════════════════════════ fundo do hero: malha de cor visível */
/* Manchas só nas bordas somem no celular. Aqui é uma malha que cobre a seção
   inteira — clara o bastante para o texto, colorida o bastante para ter vida. */
.hero {
  background:
    radial-gradient(88% 62% at 88% 4%,  rgba(211,156,154,.55) 0%, transparent 62%),
    radial-gradient(72% 58% at 4% 42%,  rgba(167,133,255,.34) 0%, transparent 60%),
    radial-gradient(70% 55% at 62% 96%, rgba(219,160,93,.26) 0%, transparent 62%),
    radial-gradient(60% 48% at 30% 8%,  rgba(185,169,190,.34) 0%, transparent 60%),
    linear-gradient(170deg, #FFF9F7 0%, var(--ivory) 62%);
}
.hero::after { display: none; }

/* Transição suave do hero para a faixa seguinte */
.hero + .band { position: relative; }

/* A mesma ideia, mais leve, nas faixas de fecho */
.band-rosa {
  background:
    radial-gradient(70% 55% at 82% 8%, rgba(211,156,154,.34) 0%, transparent 62%),
    radial-gradient(64% 52% at 10% 88%, rgba(185,169,190,.30) 0%, transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--rosa-luz) 100%);
}
.band-lilas {
  background:
    radial-gradient(72% 56% at 14% 10%, rgba(167,133,255,.30) 0%, transparent 62%),
    radial-gradient(66% 54% at 88% 84%, rgba(211,156,154,.30) 0%, transparent 62%),
    linear-gradient(180deg, var(--lilas-luz) 0%, #FFFFFF 100%);
}
.band-creme {
  background:
    radial-gradient(70% 55% at 78% 12%, rgba(219,160,93,.28) 0%, transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--dourado-luz) 100%);
}