/* Vitrine principal — banner temático (só a home). As cores de fundo, header e texto vêm de
   SHOWCASE em products.js; aqui ficam layout, pilastra e movimento. O resto do site não muda. */
/* A home usa largura total no topo; catalogo e rodape voltam ao mesmo contêiner de antes. */
.home .page { position: relative; isolation: isolate; max-width: none; padding: 0; --hero-h: 720px; --fade-in: clamp(48px, 6vw, 96px); --tail: clamp(380px, 48vw, 700px); --ramp-1: calc(var(--fade-in) + var(--tail)); --foot-ramp: clamp(240px, 26vw, 380px); }
.home .page-inner { max-width: 1560px; margin: 0 auto; padding: 0 5.5vw; }
@media (max-width: 600px) { .home .page-inner { padding: 0 22px; } }

/* Faixa de tema em tela cheia: header + banner formam uma peça só. */
.hero-shell { --u: min(100vw, 1560px); --inset: max(5.5vw, calc((100% - 1560px) / 2 + 5.5vw)); --hero-inset: max(5.5vw, calc((100% - 1560px) / 2 + 85.8px)); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--hero-h); background: #d9f0e4; }
.hero-band { grid-area: 1 / 1; position: relative; z-index: -1; }
/* Header e banner formam um degradê só: a faixa do header desce 72 px sobre o banner e some em curva suave. */
.hero-band .hero-layer { bottom: -72px; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) calc(100% - 110px), rgba(0, 0, 0, 0.972) calc(100% - 99px), rgba(0, 0, 0, 0.896) calc(100% - 88px), rgba(0, 0, 0, 0.784) calc(100% - 77px), rgba(0, 0, 0, 0.648) calc(100% - 66px), rgba(0, 0, 0, 0.5) calc(100% - 55px), rgba(0, 0, 0, 0.352) calc(100% - 44px), rgba(0, 0, 0, 0.216) calc(100% - 33px), rgba(0, 0, 0, 0.104) calc(100% - 22px), rgba(0, 0, 0, 0.028) calc(100% - 11px), rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) calc(100% - 110px), rgba(0, 0, 0, 0.972) calc(100% - 99px), rgba(0, 0, 0, 0.896) calc(100% - 88px), rgba(0, 0, 0, 0.784) calc(100% - 77px), rgba(0, 0, 0, 0.648) calc(100% - 66px), rgba(0, 0, 0, 0.5) calc(100% - 55px), rgba(0, 0, 0, 0.352) calc(100% - 44px), rgba(0, 0, 0, 0.216) calc(100% - 33px), rgba(0, 0, 0, 0.104) calc(100% - 22px), rgba(0, 0, 0, 0.028) calc(100% - 11px), rgba(0, 0, 0, 0) 100%); }
.hero-layer { position: absolute; inset: 0; opacity: 0; will-change: opacity; pointer-events: none; }
/* Uma faixa de cor por tema cobre a página inteira: o degradê do banner desce por trás da seção seguinte,
   assenta num tom claro do tema (em vez de sumir no rosa) e volta a aprofundar suavemente no rodapé.
   --hero-h (altura do banner, medida no JS) mantém a geometria do degradê idêntica à do banner.
   As nuvens ficam presas ao banner e o catálogo desenha por cima. */
.hero-bg .hero-layer { background: radial-gradient(90% calc(var(--hero-h) * .75) at 52% calc(var(--hero-h) * .42), var(--stops)); }
/* As nuvens esmaecem antes do limite do banner, para o corte não virar uma linha. */
.clouds { --cloud-lift:clamp(140px,13vw,180px); position: absolute; top: 0; left: 0; right: 0; height: var(--hero-h); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--cloud-lift) - 110px), transparent calc(100% - var(--cloud-lift))); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--cloud-lift) - 110px), transparent calc(100% - var(--cloud-lift))); }
/* Véu na cor do site (#fff7f5 = --bg): 0% no fim do banner, 56% no miolo da seção, 20% no rodapé (mais tema).
   A rampa do rodapé começa em max(fim da primeira rampa, fim da página − --foot-ramp): nunca se sobrepõem. */
.hero-bg::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--hero-h) - var(--fade-in)); bottom: 0; z-index: 5; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 247, 245, 0) calc(var(--ramp-1) * 0), rgba(255, 247, 245, 0.016) calc(var(--ramp-1) * 0.1), rgba(255, 247, 245, 0.058) calc(var(--ramp-1) * 0.2), rgba(255, 247, 245, 0.121) calc(var(--ramp-1) * 0.3), rgba(255, 247, 245, 0.197) calc(var(--ramp-1) * 0.4), rgba(255, 247, 245, 0.28) calc(var(--ramp-1) * 0.5), rgba(255, 247, 245, 0.363) calc(var(--ramp-1) * 0.6), rgba(255, 247, 245, 0.439) calc(var(--ramp-1) * 0.7), rgba(255, 247, 245, 0.502) calc(var(--ramp-1) * 0.8), rgba(255, 247, 245, 0.544) calc(var(--ramp-1) * 0.9), rgba(255, 247, 245, 0.56) calc(var(--ramp-1) * 1), rgba(255, 247, 245, 0.56) max(var(--ramp-1), calc(100% - var(--foot-ramp))), rgba(255, 247, 245, 0.55) calc(max(var(--ramp-1), calc(100% - var(--foot-ramp))) + (100% - max(var(--ramp-1), calc(100% - var(--foot-ramp)))) * 0.1), rgba(255, 247, 245, 0.523) calc(max(var(--ramp-1), calc(100% - var(--foot-ramp))) + (100% - max(var(--ramp-1), calc(100% - var(--foot-ramp)))) * 0.2), rgba(255, 247, 245, 0.482) calc(max(var(--ramp-1), calc(100% - var(--foot-ramp))) + (100% - max(var(--ramp-1), calc(100% - var(--foot-ramp)))) * 0.3), rgba(255, 247, 245, 0.433) calc(max(var(--ramp-1), calc(100% - var(--foot-ramp))) + (100% - max(var(--ramp-1), calc(100% - var(--foot-ramp)))) * 0.4), rgba(255, 247, 245, 0.38) calc(max(var(--ramp-1), calc(100% - var(--foot-ramp))) + (100% - max(var(--ramp-1), calc(100% - var(--foot-ramp)))) * 0.5), rgba(255, 247, 245, 0.327) calc(max(var(--ramp-1), calc(100% - var(--foot-ramp))) + (100% - max(var(--ramp-1), calc(100% - var(--foot-ramp)))) * 0.6), rgba(255, 247, 245, 0.278) calc(max(var(--ramp-1), calc(100% - var(--foot-ramp))) + (100% - max(var(--ramp-1), calc(100% - var(--foot-ramp)))) * 0.7), rgba(255, 247, 245, 0.237) calc(max(var(--ramp-1), calc(100% - var(--foot-ramp))) + (100% - max(var(--ramp-1), calc(100% - var(--foot-ramp)))) * 0.8), rgba(255, 247, 245, 0.21) calc(max(var(--ramp-1), calc(100% - var(--foot-ramp))) + (100% - max(var(--ramp-1), calc(100% - var(--foot-ramp)))) * 0.9), rgba(255, 247, 245, 0.2) calc(max(var(--ramp-1), calc(100% - var(--foot-ramp))) + (100% - max(var(--ramp-1), calc(100% - var(--foot-ramp)))) * 1)); }
.home .page-inner { position: relative; z-index: 1; }
/* Abaixo do banner seguem o tema do produto ativo: título/apoio, link do catálogo, rodapé e SÓ os dois
   botões do card (Personalize o seu e carrinho). O resto dos cards não é tocado. Sem JS: cores originais. */
.home .catalog-heading .eyebrow, .home .catalog-all, .home footer .signature { color: var(--theme-accent, var(--rose)); }
.home .catalog-heading h2 { color: var(--theme-text, var(--ink)); }
.home .catalog-heading > p, .home .catalog-note, .home footer .footer-copy { color: var(--theme-muted, var(--muted)); }
.home footer .footer-social { color: var(--theme-accent, var(--rose)); }
/* Categoria dos cards, valor "Categoria" e pontinhos do carrossel também seguem o tema. */
.home .product-rail-category, .home .product-rail-active-details strong { color: var(--theme-accent, var(--rose)); }
.home .product-carousel-dots button::after { background: var(--theme-soft, #e8d6da); }
.home .product-carousel-dots button[aria-selected=true]::after { background: var(--theme-accent, var(--rose)); }
/* Card central limpo: a sombra do palco era cortada pela borda dele e desenhava retângulos. Agora o palco só
   recorta na horizontal e a sombra é curta, suave e no tom do tema. Borda e faixa superior no tom do tema. */
@supports (overflow: clip) { .home .product-carousel-stage { overflow-x: clip; overflow-y: visible; } }
.home .product-rail-card { box-shadow: 0 20px 38px -28px var(--theme-glow, #65364914); }
.home .product-rail-card.is-active { border-color: var(--theme-soft, #eadde1); box-shadow: 0 30px 46px -32px var(--theme-glow, #65364925); }
.home .product-rail-card.is-active .product-rail-art { background: linear-gradient(to bottom, var(--theme-wash, #fff) 0%, #fff 82%); }
.home .catalog-home .product-customize, .home .catalog-home .product-cart { background: var(--theme-accent, var(--rose)); box-shadow: 0 6px 15px var(--theme-glow, #b64c6824); }
.home .catalog-home .product-customize:hover, .home .catalog-home .product-cart:hover { background: var(--theme-accent-strong, #9e3e59); box-shadow: 0 10px 18px var(--theme-glow, #b64c6833); }
/* Desktop: cards um pouco menores para o carrossel caber inteiro na tela. */
@media (min-width: 901px) {
  .home .product-carousel-stage { height: 526px; }
  .home .product-rail-card { width: min(300px, 30vw); min-height: 400px; transform: translate(calc(-50% + var(--slot) * 292px + var(--drag)), 38px) scale(.8); }
  .home .product-rail-card.is-active { width: min(372px, 38vw); min-height: 446px; transform: translate(calc(-50% + var(--drag)), 0) scale(1); }
  .home .product-rail-art { height: 196px; }
  .home .product-rail-card.is-active .product-rail-art { height: 212px; }
  .home .product-rail-copy { padding: 14px 20px 16px; }
  .home .product-rail-copy h3 { font-size: 26px; }
  .home .product-rail-active-details > div { min-height: 33px; }
  .home .product-rail-bottom, .home .product-rail-actions { margin-top: 12px; }
}
.cloud { position: absolute; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .64) 46%, rgba(255, 255, 255, .32) 78%, rgba(255, 255, 255, .14) 100%); }
.c1 { left: -7vw; bottom: -10vw; width: 25vw; }
.c2 { left: 9vw; bottom: -14vw; width: 21vw; }
.c3 { right: -8vw; bottom: -12vw; width: 26vw; }
.c4 { right: 15vw; bottom: -16vw; width: 20vw; }
.c5 { left: -12vw; top: 7vw; width: 17vw; }
.c6 { right: -10vw; top: 4vw; width: 15vw; }
/* Keep the airplane's lower clouds beside the pedestal, like petals and ferns. */
.clouds .c1, .clouds .c2, .clouds .c3, .clouds .c4 { translate:0 calc(-1 * var(--cloud-lift)); }
@media (max-width:900px) {
  .clouds { --cloud-lift:clamp(140px,42vw,240px); }
}

/* Header da home: mesma estrutura, fundo transparente sobre a faixa de tema. */
.home .site-header { grid-area: 1 / 1; position: relative; z-index: 2; padding-inline: var(--inset); background: transparent; border-bottom: 0; }
.home .site-header .brand img { mix-blend-mode: normal; }

/* Banner */
.showcase {
  --ped-w: clamp(290px, calc(var(--u) * 0.27), 500px);
  grid-area: 2 / 1; position: relative; z-index: 1; display: grid; align-items: center;
  grid-template-columns: minmax(0, 37fr) minmax(0, 30fr) minmax(0, 33fr); grid-template-rows: 1fr 1fr;
  min-height: clamp(540px, calc(var(--u) * 0.46), 800px); padding: clamp(20px, calc(var(--u) * 0.026), 48px) var(--hero-inset) clamp(36px, calc(var(--u) * 0.042), 72px); overflow-x: clip;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; cursor: grab;
}
.showcase.is-dragging { cursor: grabbing; }
.hero-copy, .hero-palette { position: relative; z-index: 3; display: grid; }
/* Banner limpo: texto e botões juntos à esquerda (ordem de leitura), peça à direita. */
.hero-copy { grid-column: 1; grid-row: 1; align-self: end; justify-items: start; padding-left: clamp(0px, calc(var(--u) * 0.042), 78px); }
.hero-palette { grid-column: 1; grid-row: 2; align-self: start; justify-items: start; padding-left: clamp(0px, calc(var(--u) * 0.042), 78px); margin-top: clamp(18px, calc(var(--u) * 0.016), 30px); }
.hero-stage { grid-column: 2 / 4; grid-row: 1 / 3; position: relative; z-index: 2; height: calc(var(--ped-w) * 1.3); }

/* Textos e paleta do produto ativo (um bloco por produto, empilhados na mesma célula) */
.copy, .palette { grid-area: 1 / 1; will-change: transform, opacity; }
.copy-category { margin: 0; font: 650 clamp(12px, calc(var(--u) * 0.01), 17px) / 1.2 'DM Sans', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.copy-name { margin: clamp(10px, calc(var(--u) * 0.011), 20px) 0 clamp(8px, calc(var(--u) * 0.01), 18px); font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(34px, calc(var(--u) * 0.041), 76px); line-height: 1.02; letter-spacing: -.025em; color: var(--text); }
.copy-sub { margin: 0; max-width: 15em; font: 400 clamp(15px, calc(var(--u) * 0.016), 27px) / 1.3 'DM Sans', sans-serif; color: var(--muted); }
.copy-price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: clamp(12px, calc(var(--u) * 0.012), 20px) 0 0; color: var(--text); }
.copy-price strong { font: 650 clamp(18px, calc(var(--u) * 0.016), 26px) / 1.1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; }
.copy-pix { padding: .35em .75em; border-radius: 999px; background: #13864a; color: #fff; font: 700 clamp(12px, calc(var(--u) * 0.0092), 14px) / 1.1 'DM Sans', sans-serif; letter-spacing: .02em; }
/* O botão e, logo abaixo e centralizado, o link "Ver encaixado". */
.palette { display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: 100%; }
.copy[inert], .palette[inert] { pointer-events: none; }
/* Ação principal, o elemento mais chamativo da vitrine: a cor da peça com um degradê vertical quase imperceptível (mais
   clara no topo, volume), uma sombra viva no próprio tom (flutua sobre o fundo), cantos de 18 px, letra bem espaçada e
   a paleta de cores. No hover sobe em direção a quem olha (3% maior, sombra mais espalhada) e a paleta balança de leve;
   no clique, afunda. */
.palette-button { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 1.75em 0 1.45em; border: 0; border-radius: 18px; background: var(--accent) linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 50%, rgba(0, 0, 0, .04) 100%); color: #fff; font: 650 clamp(15px, calc(var(--u) * 0.0118), 18px) / 1 'DM Sans', sans-serif; letter-spacing: .025em; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .24) inset, 0 10px 25px var(--glow), 0 2px 6px -2px rgba(20, 30, 40, .2); transition: all .3s cubic-bezier(.25, .8, .25, 1); }
.palette-button svg { width: 1.25em; height: 1.25em; flex: none; stroke-width: 1.8; }
.palette-button, .hero-demo-button { white-space: nowrap; }
.palette-button:active { transform: scale(.98); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 5px 14px var(--glow), 0 1px 4px -1px rgba(20, 30, 40, .2); }
@keyframes palette-tilt { 0% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(8deg); } 72% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
.palette-button:focus-visible, .hero-demo-button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
/* Secundária, só nas peças com demonstração: um link discreto com o olho (ver a peça montada), centralizado abaixo do botão. */
.hero-demo-button { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 .9em; border: 0; border-radius: 12px; background: transparent; color: var(--accent); font: 600 clamp(14px, calc(var(--u) * 0.0102), 15px) / 1 'DM Sans', sans-serif; letter-spacing: .02em; cursor: pointer; transition: color .3s ease; }
.hero-demo-button svg { width: 1.3em; height: 1.3em; flex: none; stroke-width: 1.6; transition: transform .3s ease; }
.hero-demo-button > span:first-of-type { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s ease; }
/* Novidade sem compra: no lugar da ação principal, um selo no mesmo tamanho do botão. */
.palette-soon { display: inline-flex; align-items: center; min-height: 52px; padding: 0 1.4em; border-radius: 999px; background: rgba(255, 255, 255, .82); color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent) inset; font: 650 clamp(15px, calc(var(--u) * 0.0118), 18px) / 1 'DM Sans', sans-serif; letter-spacing: .01em; white-space: nowrap; }
/* Na novidade o selo fica onde vai o preço, menor; a ação principal é "Ver em 3D". */
.copy-price .palette-soon { min-height: 34px; padding: 0 1em; font-size: clamp(12px, calc(var(--u) * .009), 14px); letter-spacing: .04em; }
.slot[data-front=true] { cursor: pointer; }

/* Produto + pilastra: um bloco só; a escala nasce na base para a pilastra não sair do chão. */
.slot {
  --ry: calc(var(--ped-w) * .08); --piece-h: calc(var(--ped-w) * .86); --img: calc(var(--piece-h) / var(--art-h));
  position: absolute; bottom: 0; left: 50%; display: block; width: var(--ped-w); height: calc(var(--ped-w) * 1.3); margin-left: calc(var(--ped-w) / -2);
  transform-origin: 50% 100%; will-change: transform, opacity; -webkit-user-drag: none; border-radius: 24px;
}
.slot:not([data-front=true]) { pointer-events: none; }
.ped { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--ped-w) * .54); }
.ped-ground { position: absolute; left: -10%; right: -10%; bottom: calc(var(--ped-w) * -.07); height: calc(var(--ped-w) * .2); background: radial-gradient(closest-side, rgba(40, 62, 90, .26), rgba(40, 62, 90, .1) 58%, transparent 100%); }
.ped-body {
  position: absolute; left: 0; right: 0; top: var(--ry); bottom: 0; border-radius: 0 0 50% 50% / 0 0 var(--ry) var(--ry);
  background: linear-gradient(180deg, transparent 62%, rgba(150, 168, 190, .2) 100%), linear-gradient(90deg, #cbd3dd 0%, #edf0f4 12%, #fff 30%, #fdfefe 58%, #e8ecf1 86%, #cad2dc 100%);
}
.ped-top { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--ry) * 2); border-radius: 50%; background: radial-gradient(ellipse at 50% 42%, #fff 0%, #fff 55%, #eef1f5 100%); box-shadow: inset 0 -3px 8px rgba(110, 130, 155, .16), 0 0 0 1px rgba(255, 255, 255, .7); }
.piece { position: absolute; left: 50%; width: var(--img); height: var(--img); margin-left: calc(var(--img) / -2); bottom: calc(var(--ped-w) * .44 - var(--art-bottom) * var(--img)); }
.piece-shadow { position: absolute; left: 50%; width: calc(var(--art-foot) * var(--img) * 1.02); height: calc(var(--ped-w) * .07); margin-left: calc(var(--art-foot) * var(--img) * -.51); bottom: calc(var(--art-bottom) * var(--img) - var(--ped-w) * .035); background: radial-gradient(closest-side, rgba(30, 45, 70, .32), transparent); transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
/* Profundidade para a leve inclinação do hover (a peça acompanha o cursor, --tilt-x/--tilt-y vêm do JS). */
.slot[data-front=true] .piece { perspective: 1100px; }
.piece img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; opacity: 0; transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.piece img.is-loaded { opacity: 1; }
.slot:focus-visible { outline: 2px solid var(--rose); outline-offset: 6px; }

/* Setas: vidro translúcido nas bordas do banner e chevron fino. No hover o vidro clareia e o chevron anda 3 px para onde aponta. */
.hero-arrow {
  position: absolute; top: 50%; z-index: 6; translate: 0 -50%; display: grid; place-items: center; width: clamp(46px, 3.8vw, 60px); height: clamp(46px, 3.8vw, 60px); padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: var(--theme-text, #1f2a33);
  box-shadow: 0 8px 24px -12px rgba(30, 50, 60, .28); transition: background-color .3s ease, box-shadow .3s ease, scale .3s ease;
}
.hero-arrow svg { width: 32%; height: 32%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: translate .3s ease, opacity .3s ease; }
.hero-prev { left: clamp(10px, 2vw, 36px); }
.hero-next { right: clamp(10px, 2vw, 36px); }
.hero-arrow:active { scale: .94; }
.hero-arrow:focus-visible { outline: 2px solid var(--theme-accent, #1f2a33); outline-offset: 3px; }
@media (hover: hover) {
  .hero-arrow:hover { background: rgba(255, 255, 255, .85); box-shadow: 0 12px 28px -12px rgba(30, 50, 60, .34); }
  .hero-arrow:hover svg { opacity: 1; }
  .hero-prev:hover svg { translate: -3px 0; }
  .hero-next:hover svg { translate: 3px 0; }
  .home .footer-social:hover { background: var(--theme-glow, #fbe9ee); }
  .palette-button:hover { transform: scale(1.03); filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 18px 40px var(--glow), 0 6px 14px -6px rgba(20, 30, 40, .22); }
  /* a paleta ganha vida: um balanço rápido, com um quique no fim */
  .palette-button:hover svg { animation: palette-tilt .6s cubic-bezier(.34, 1.56, .64, 1); }
  .palette-button:hover:active { transform: scale(.98); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 5px 14px var(--glow), 0 1px 4px -1px rgba(20, 30, 40, .2); }
  .hero-demo-button:hover { color: var(--strong); }
  .hero-demo-button:hover > span:first-of-type { background-size: 100% 1px; }
  .hero-demo-button:hover svg { transform: scale(1.08); }
  .slot[data-front=true]:hover .piece img { transform: translateY(-8px) scale(1.012) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
  .slot[data-front=true]:hover .piece-shadow { transform: scale(.94); opacity: .8; }
}

/* Tablet e celular: tudo empilhado — título, peça, cores, setas. */
@media (max-width: 900px) {
  .showcase {
    --ped-w: clamp(210px, 60vw, 340px);
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: start; min-height: 0; padding: clamp(16px, 4vw, 34px) var(--hero-inset) clamp(30px, 8vw, 52px);
  }
  .hero-copy { grid-column: 1 / -1; grid-row: 1; justify-items: center; padding: 0; text-align: center; }
  .copy { justify-items: center; }
  .copy-category { letter-spacing: .26em; }
  .copy-name { font-size: clamp(32px, 9.4vw, 52px); }
  .copy-sub { font-size: clamp(14px, 4vw, 19px); max-width: 17em; }

  .hero-copy { align-self: start; }
  .hero-stage { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(14px, 3vw, 26px); }
  .copy-price { justify-content: center; }
  /* o botão ocupa a linha inteira, com o link logo abaixo; as setas saem do lado dele e flutuam nas bordas da pilastra */
  .hero-palette { grid-column: 1 / -1; grid-row: 3; align-self: start; justify-items: center; padding: 0; margin-top: clamp(20px, 6vw, 34px); }
  .palette { width: min(100%, 340px); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  .palette-button { width: 100%; padding: 0 1.1em; font-size: clamp(15px, 4.1vw, 17px); }
  .hero-demo-button { align-self: center; }
  .hero-arrow { position: static; translate: none; grid-row: 2; align-self: center; z-index: 6; width: 44px; height: 44px; margin: 0; }
  .hero-prev { grid-column: 1; justify-self: start; }
  .hero-next { grid-column: 3; justify-self: end; }
}
@media (max-width: 600px) { .hero-shell { --inset: 22px; --hero-inset: 22px; } }
/* Celulares estreitos (até ~380 px): o rótulo cabe numa linha, sem perder a área de toque. */
@media (max-width: 380px) {
  .palette-button { gap: .45em; padding: 0 .85em; font-size: 14.5px; }
}
@media (max-width: 340px) {
  .palette-button { font-size: 13.5px; padding: 0 .7em; }
  .hero-arrow { width: 40px; height: 40px; }
}
@media (min-width: 901px) and (max-width: 1100px) { .showcase { --ped-w: clamp(250px, 30vw, 330px); } }
@media (prefers-reduced-motion: reduce) {
  .piece img, .piece-shadow, .hero-arrow, .hero-arrow svg, .palette-button, .hero-demo-button, .hero-demo-button svg { transition: none; }
  .palette-button:hover svg { animation: none; }
  .palette-button:active { transform: none; }
  .slot[data-front=true]:hover .piece img, .slot[data-front=true]:hover .piece-shadow { transform: none; opacity: 1; }
}

/* Peripheral petal and fern clouds dissolve into the active theme. */
.hero-scenery { position:absolute; inset:0 0 auto; height:var(--hero-h); overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(#000 66%,transparent 100%); mask-image:linear-gradient(#000 66%,transparent 100%); }
.hero-scenery svg { position:absolute; width:clamp(240px,32vw,510px); }
.hero-scenery .scenery-left { left:-10%; bottom:-90px; transform:rotate(-18deg); }
.hero-scenery .scenery-right { right:-10%; bottom:-125px; transform:scaleX(-1) rotate(-24deg); opacity:.82; }
.scenery-ferns .scenery-left { left:-9%; bottom:-105px; transform:rotate(18deg); }
.scenery-ferns .scenery-right { right:-11%; bottom:-120px; transform:scaleX(-1) rotate(25deg); }
@media(max-width:900px) {
  .hero-scenery .scenery-left { width:61vw; left:-26%; bottom:-40px; }
  .hero-scenery .scenery-right { width:57vw; right:-25%; bottom:-50px; }
  .scenery-ferns .scenery-left { left:-25%; bottom:-36px; }
  .scenery-ferns .scenery-right { right:-26%; bottom:-28px; }
}

/* Nossa coleção: só o card do centro ganha as cores da sua peça (catalog.js põe --rail-own-*, as mesmas do banner); os
   laterais ficam no tom da página (--theme-wash, --rose e --ink, que seguem o banner). As cores são propriedades
   registradas, então deslizam suavemente quando um card vira o do centro, junto com o movimento dele. Continua a foto da
   peça, sem o encaixe, e o card do meio maior, por cima dos vizinhos; botão, categoria e detalhes usam o mesmo tom. */
@property --rail-1 { syntax: '<color>'; inherits: true; initial-value: #fffaf9; }
@property --rail-2 { syntax: '<color>'; inherits: true; initial-value: #fbf1f2; }
@property --rail-3 { syntax: '<color>'; inherits: true; initial-value: #f4e4e7; }
@property --rail-a { syntax: '<color>'; inherits: true; initial-value: #b64c68; }
@property --rail-i { syntax: '<color>'; inherits: true; initial-value: #282326; }
.home .product-rail-card[style*="--rail-own-1"] {
  --rail-1: color-mix(in srgb, var(--theme-wash, #f4e4e7) 22%, #fff); --rail-2: color-mix(in srgb, var(--theme-wash, #f4e4e7) 62%, #fff); --rail-3: var(--theme-wash, #f4e4e7);
  --rail-a: var(--rose, #b64c68); --rail-i: var(--ink, #282326);
  --theme-accent: var(--rail-a); --theme-accent-strong: color-mix(in srgb, var(--rail-a) 78%, #000); --theme-glow: color-mix(in srgb, var(--rail-a) 30%, transparent);
  --line: color-mix(in srgb, var(--rail-i) 13%, transparent); --muted: color-mix(in srgb, var(--rail-i) 68%, transparent);
  border-color: rgba(255, 255, 255, .6); color: var(--rail-i); background: radial-gradient(130% 78% at 50% 20%, var(--rail-1) 0%, var(--rail-2) 52%, var(--rail-3) 100%);
  box-shadow: 0 22px 40px -30px color-mix(in srgb, var(--rail-a) 50%, transparent);
  transition: transform 420ms var(--ease), opacity 360ms ease, filter 360ms ease, box-shadow 420ms var(--ease), --rail-1 .6s ease, --rail-2 .6s ease, --rail-3 .6s ease, --rail-a .6s ease, --rail-i .6s ease;
}
.home .product-rail-card[style*="--rail-own-1"].is-active { --rail-1: var(--rail-own-1); --rail-2: var(--rail-own-2); --rail-3: var(--rail-own-3); --rail-a: var(--rail-own-accent); --rail-i: var(--rail-own-ink); border-color: rgba(255, 255, 255, .75); box-shadow: 0 34px 56px -34px color-mix(in srgb, var(--rail-a) 70%, transparent); }
.home .product-rail-card[style*="--rail-own-1"] .product-rail-art, .home .product-rail-card[style*="--rail-own-1"].is-active .product-rail-art { background: transparent; }
.home .product-rail-card[style*="--rail-own-1"] .product-rail-art img { filter: drop-shadow(0 14px 14px color-mix(in srgb, var(--rail-i) 18%, transparent)); }
@media (prefers-reduced-motion: reduce) {
  .home .product-rail-card[style*="--rail-own-1"] { transition: none; }
}
/* A peça fica dentro do card (2026-10-05: sair por cima poluía a tela). */
/* Os vizinhos menores e recolhidos atrás do card do centro (podem se sobrepor); o do centro maior. A peça fica dentro do card
   e, ao virar a da vez, cresce um pouco com um leve quique; o card desliza com a mesma curva, mais longa. */
.home .product-rail-card[style*="--rail-own-1"] .product-rail-art img { transform: scale(.9); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.34, 1.3, .64, 1), opacity .4s ease; }
.home .product-rail-card[style*="--rail-own-1"].is-active .product-rail-art img { transform: scale(1); }
.home .product-rail-card[style*="--rail-own-1"].is-active .product-rail-art:hover img, .home .product-rail-card[style*="--rail-own-1"].is-active .product-rail-art:focus-visible img { transform: translateY(-4px) scale(1.02); }
.home .product-rail-card[style*="--rail-own-1"] { transition-duration: 560ms, 360ms, 360ms, 560ms, .6s, .6s, .6s, .6s, .6s; transition-timing-function: cubic-bezier(.22, 1.12, .36, 1), ease, ease, var(--ease), ease, ease, ease, ease, ease; }
@media (max-width: 900px) {
  .home .product-rail-card:not(.is-active) { transform: translate(calc(-50% + var(--slot) * min(56vw, 260px) + var(--drag)), 34px) scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .home .product-rail-card[style*="--rail-own-1"] .product-rail-art img { transition: none; }
}