/* vaivém · loja (HTML + CSS + JS, sem bibliotecas) */
:root{
  --papel:#F7F2EA; --areia:#EFE7DA; --fundo:#E6DDCF; --tinta:#2B1A12; --noite:#1A0F0A;
  --ter:#B4532E; --ocre:#C28B3B; --oliva:#5F603B; --linha:#2B1A121F;
  --serif:'Instrument Serif',Georgia,serif; --sans:'Instrument Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(16px,2.4vw,32px); --cab:76px;
  --mola:cubic-bezier(.22,.9,.24,1); --suave:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:var(--cab)}
html.trava{overflow:hidden}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--ter);outline-offset:2px}
[hidden]{display:none!important}
.pular{position:absolute;left:-999px;top:8px;z-index:99;background:var(--noite);color:var(--papel);padding:10px 14px}
.pular:focus{left:8px}
.mono{font-family:var(--mono)}
.nome-marca{text-transform:none}
.mono-s{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.cinza{color:#2B1A12B3}
.ter{color:var(--ter);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.rotulo{margin:0;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.ocre{color:var(--ocre)}
.trilho,.trilho-livre{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.trilho::-webkit-scrollbar,.trilho-livre::-webkit-scrollbar{display:none}
@media (max-width:819px){.so-largo{display:none!important}}
@media (min-width:820px){.so-estreito{display:none!important}}

/* faixa e cabeçalho */
.topo-faixa{height:36px;background:var(--noite);color:var(--areia);display:flex;align-items:center;gap:32px;padding:0 var(--pad);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.faixa-roda{position:relative;flex:1;height:100%}
.faixa-roda span{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(100%);transition:transform .7s var(--mola),opacity .5s}
.faixa-roda span.on{opacity:1;transform:none}
.faixa-roda span.sai{opacity:0;transform:translateY(-100%)}
@media (max-width:819px){.faixa-roda span{justify-content:center}}
.cab{position:sticky;top:0;z-index:20;height:var(--cab);margin-bottom:calc(var(--cab) * -1);color:var(--papel);border-bottom:1px solid transparent;transition:background-color .35s,color .35s,border-color .35s}
.cab.solido{background:var(--papel);color:var(--tinta);border-color:var(--linha)}
.cab-in{height:100%;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.cab-esq{justify-self:start;display:flex;align-items:center}
.cab-dir{justify-self:end;display:flex;align-items:center;gap:clamp(20px,3vw,48px)}
.cab-nav{display:flex;gap:clamp(20px,3vw,48px)}
.cab a{text-decoration:none;height:44px;display:flex;align-items:center}
.marca{gap:9px;letter-spacing:0;text-transform:none}
.marca .logo{width:24px;height:24px}
.marca-nome{font-family:var(--serif);font-size:34px;line-height:1}
.logo{display:block;width:100%;height:100%}

/* hambúrguer: as 3 linhas viram X */
.burger{width:44px;height:44px;margin-left:-10px;display:flex;align-items:center;justify-content:center}
.burger-l{position:relative;width:22px;height:14px;display:block}
.burger-l i{position:absolute;left:0;height:1.4px;background:currentColor;border-radius:1px;transition:transform .45s var(--mola),opacity .25s,width .45s var(--mola),top .45s var(--mola)}
.burger-l i:nth-child(1){top:0;width:22px}
.burger-l i:nth-child(2){top:6.3px;width:22px}
.burger-l i:nth-child(3){top:12.6px;width:14px}
.burger:active .burger-l{transform:scale(.86)}
.burger-l{transition:transform .2s}
.burger.aberto .burger-l i:nth-child(1){top:6.3px;transform:rotate(45deg)}
.burger.aberto .burger-l i:nth-child(2){opacity:0;transform:translateX(-10px)}
.burger.aberto .burger-l i:nth-child(3){top:6.3px;width:22px;transform:rotate(-45deg)}
.burger.solta .burger-l i:nth-child(1){animation:bl1 .5s var(--mola)}
.burger.solta .burger-l i:nth-child(2){animation:bl2 .5s var(--mola)}
.burger.solta .burger-l i:nth-child(3){animation:bl3 .5s var(--mola)}
@keyframes bl1{40%{transform:translateX(4px)}}
@keyframes bl2{40%{transform:translateX(-4px)}}
@keyframes bl3{40%{width:22px}}

/* sacola */
.sacola{position:relative;width:44px;height:44px;margin-right:-10px;display:flex;align-items:center;justify-content:center}
.sacola-ico{width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sacola-alca{transform-origin:12px 8.5px;transform-box:view-box}
.sacola-ico{transform-origin:50% 100%}
.sacola.pula .sacola-ico{animation:sacPula .7s var(--mola)}
.sacola.pula .sacola-alca{animation:alcaBalanca .8s var(--mola)}
.sacola.abre .sacola-alca{animation:alcaSobe .45s var(--mola)}
.sacola.abre .sacola-ico{animation:sacAbre .45s var(--mola)}
@keyframes sacPula{0%{transform:none}18%{transform:scale(1.18,.78)}38%{transform:translateY(-7px) scale(.88,1.14)}58%{transform:translateY(0) scale(1.1,.9)}76%{transform:scale(.97,1.03)}100%{transform:none}}
@keyframes alcaBalanca{0%{transform:none}25%{transform:rotate(-22deg)}50%{transform:rotate(16deg)}72%{transform:rotate(-8deg)}100%{transform:none}}
@keyframes alcaSobe{0%{transform:none}45%{transform:translateY(-3.5px) scaleY(1.25)}100%{transform:none}}
@keyframes sacAbre{0%{transform:none}40%{transform:scale(.9) rotate(-6deg)}100%{transform:none}}
.sacola-n{position:absolute;top:5px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--ter);color:var(--papel);font-size:10px;letter-spacing:0;display:flex;align-items:center;justify-content:center}
.sacola-n.pop{animation:pop .5s var(--mola)}
@keyframes pop{0%{transform:scale(.3)}55%{transform:scale(1.35)}100%{transform:scale(1)}}
.voo{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:44px;height:44px;margin:-22px 0 0 -22px}
.voo>div{width:100%;height:100%}
.voo i{display:block;width:100%;height:100%;border-radius:50%;background:var(--ter) center/cover;box-shadow:0 6px 18px #1A0F0A55;border:2px solid var(--papel)}

/* hero */
.hero{position:relative;height:max(600px,calc(100svh - 36px));overflow:hidden;background:var(--noite);color:var(--papel);touch-action:pan-y}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity 1.4s ease,transform 8s ease-out}
.hero-img.on{opacity:1;transform:scale(1.06)}
.hero-veu{position:absolute;inset:0;background:linear-gradient(90deg,#1A0F0AD9 0%,#1A0F0A80 38%,#1A0F0A14 72%),linear-gradient(180deg,#1A0F0A99 0%,#1A0F0A00 22%)}
.hero-txt{position:absolute;top:var(--cab);bottom:0;left:clamp(20px,8.2vw,132px);right:20px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(22px,2.6vw,36px);padding-bottom:40px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.kicker i{width:28px;height:1px;background:currentColor;display:block;transform-origin:left;}
.hero h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.6vw,112px);line-height:.94;letter-spacing:-.012em;max-width:10.5ch;text-wrap:balance}
.troca{animation:troca .9s var(--mola) both}
.troca-k{animation:troca .9s var(--mola) both}
.troca-k i{animation:risco .9s var(--mola) both}
@keyframes troca{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes risco{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-base{position:absolute;right:0;bottom:0;width:min(540px,46%);display:flex;flex-direction:column;align-items:flex-start}
.pontos{display:flex;gap:2px;padding:0 10px 4px}
.pontos button{height:28px;padding:0 3px;display:flex;align-items:center}
.pontos span{display:block;height:1.5px;width:16px;background:#F7F2EA66;transition:width .5s var(--mola),background .4s;position:relative;overflow:hidden}
.pontos [aria-current="true"] span{width:40px;background:#F7F2EA44}
.pontos [aria-current="true"] span::after{content:"";position:absolute;inset:0;background:var(--papel);transform-origin:left;animation:enche var(--tempo,6.5s) linear forwards}
.hero.pausa .pontos [aria-current="true"] span::after{animation-play-state:paused}
@keyframes enche{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-card{position:relative;width:100%;background:#1A0F0AB8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #F7F2EA26;padding:16px;display:grid;grid-template-columns:132px 1fr;gap:18px}
.hero-card-foto{aspect-ratio:1/1;overflow:hidden;background:var(--areia);display:block}
.hero-card-foto img{width:100%;height:100%;object-fit:cover}
.hero-card-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:4px 2px 0}
.hero-card-txt .mono-s{opacity:.85}
.hero-card-nome{font-family:var(--serif);font-size:clamp(24px,2vw,30px);line-height:1.05;margin-top:10px;text-decoration:none}
.cta{margin-top:auto;padding:12px 0 4px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid #F7F2EA99;transition:border-color .2s,gap .3s var(--mola)}
.cta span{font-size:15px;letter-spacing:0;transition:transform .3s var(--mola)}
@media (hover:hover){.cta:hover{border-color:var(--papel);gap:14px}}
.hero-card.troca-c .hero-card-foto img,.hero-card.troca-c .hero-card-txt>*{animation:troca .8s var(--mola) both}
.hero-card.troca-c .hero-card-txt>*:nth-child(2){animation-delay:.06s}
.hero-card.troca-c .hero-card-txt>*:nth-child(3){animation-delay:.12s}
@media (max-width:819px){
  .botao{letter-spacing:.1em;padding:0 16px}
  .hero-txt{padding-bottom:190px}
  .hero-base{left:12px;right:12px;bottom:12px;width:auto}
  .pontos{padding:0 0 6px}
  .hero-card{grid-template-columns:96px 1fr}
}

/* categorias */
.cats{padding:clamp(56px,6vw,96px) 0 0}
.cats .rotulo{padding:0 var(--pad) 20px}
.trilho{gap:2px;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);padding:0 var(--pad)}
.cat{position:relative;flex:0 0 calc((100% - 6px) / 4.3);scroll-snap-align:start;aspect-ratio:4/5;overflow:hidden;background:var(--areia);color:var(--papel);text-align:left}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.cat:hover img{transform:scale(1.04)}
.cat span{position:absolute;left:0;right:0;bottom:0;padding:64px 16px 16px;background:linear-gradient(0deg,#1A0F0AB3,#1A0F0A00);font-family:var(--serif);font-size:clamp(24px,2vw,30px);line-height:1}
@media (max-width:819px){.cat{flex-basis:64%}}
/* computador: sem título, a faixa de categorias anda sozinha para a esquerda, sem fim */
@media (min-width:820px){
  .cats .rotulo{display:none}
  .cats{overflow:hidden}
  .trilho.esteira{width:max-content;overflow:visible;padding:0;gap:0;scroll-snap-type:none;animation:esteira var(--esteira,60s) linear infinite}
  .trilho.esteira .cat{flex:0 0 calc((100vw - 8px) / 4.3);margin-right:2px}
  .trilho.esteira:hover,.trilho.esteira:focus-within{animation-play-state:paused}
}
@keyframes esteira{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.trilho.esteira{animation:none}}

/* loja */
.loja{padding:clamp(64px,7vw,112px) 0 clamp(64px,6vw,96px)}
.loja-barra{padding:0 var(--pad) 18px;margin-bottom:18px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;border-bottom:1px solid #2B1A121A}
.abas{gap:clamp(16px,2vw,28px);max-width:100%;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.abas button{flex:none;height:40px;color:#2B1A1280;border-bottom:1.5px solid transparent;transition:color .2s,border-color .3s}
.abas button[aria-selected="true"]{color:var(--tinta);border-color:var(--tinta)}
.ajustes{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ordenar{display:flex;align-items:center;gap:6px;opacity:.85}
.ordenar select{font:inherit;letter-spacing:inherit;text-transform:inherit;background:transparent;border:0;border-bottom:1px solid #2B1A1255;border-radius:0;padding:6px 2px;color:var(--tinta);cursor:pointer}
.grade-op{display:flex;gap:2px}
.grade-op button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;opacity:.35;transition:opacity .2s}
.grade-op button[aria-pressed="true"]{opacity:1}
.grade-op svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}
.tamanhos{padding:0 var(--pad) 24px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.tamanhos>span{opacity:.7}
.tamanhos button{height:36px;display:flex;align-items:center;gap:8px;border-bottom:1.5px solid transparent;text-transform:uppercase;letter-spacing:.08em}
.tamanhos button[aria-pressed="true"]{border-color:var(--ter)}
.tamanhos small{font-size:inherit;opacity:.65;text-transform:none}
.cor-botao{display:flex;align-items:center;gap:7px;height:34px;opacity:.85;text-transform:uppercase;letter-spacing:.1em}
.cor-botao[aria-expanded="true"],.cor-botao.ativo{opacity:1}
.cor-ponto{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #2B1A1233}
.cor-ponto.colorido{background:conic-gradient(#B8242B,#E3742C,#E2B53A,#5E8F55,#2F5DA8,#E39AA6,#B8242B)}
.chev{width:6px;height:6px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--mola)}
.cor-botao[aria-expanded="true"] .chev{transform:translateY(1px) rotate(-135deg)}
.cores-filtro{padding:0 var(--pad) 18px;margin-top:-6px;display:flex;align-items:center;justify-content:flex-end;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;animation:coresAbre .35s var(--mola) both}
@keyframes coresAbre{from{opacity:0;transform:translateY(-6px)}}
.cores-lista{gap:10px;padding:4px 3px;margin:-4px 0;max-width:100%}
.cor{flex:none;width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #2B1A1226;opacity:.85;transition:transform .3s var(--mola),box-shadow .25s,opacity .2s;animation:corEntra .4s var(--mola) both;animation-delay:var(--d,0s)}
.cor.colorido{background:conic-gradient(from 20deg,#B8242B,#E3742C,#E2B53A,#5E8F55,#2F5DA8,#9A5BA8,#E39AA6,#B8242B)}
.cor[aria-pressed="true"]{opacity:1;box-shadow:inset 0 0 0 1px #2B1A1226,0 0 0 2px var(--papel),0 0 0 3px var(--tinta)}
@media (hover:hover){.cor:hover{opacity:1;transform:scale(1.2)}}
.cor:active{transform:scale(.9)}
@keyframes corEntra{from{opacity:0;transform:scale(.4)}}
.limpar-cor{flex:none;font-size:10px;letter-spacing:.1em;border-bottom:1px solid currentColor;padding:3px 0;opacity:.6}
@media (max-width:819px){.cores-filtro{justify-content:flex-start}}
.grade{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:2px}
/* computador com 2 por linha: a foto não passa da altura da tela */
@media (min-width:820px){.grade[data-cols="2"] .card-foto{max-height:calc(100svh - 190px)}}
.card{display:flex;flex-direction:column;min-width:0;animation:sobe .55s var(--mola) both;animation-delay:var(--d,0s)}
@keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card-foto{position:relative;aspect-ratio:var(--ratio,2/3);overflow:hidden;background:var(--areia)}
.card-foto>a{position:absolute;inset:0;display:block}
.card-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease,transform .8s var(--suave)}
.card-foto img.b{opacity:0}
@media (hover:hover){.card-foto:hover img.b{opacity:1}.card-foto:hover img{transform:scale(1.02)}}
.selo{position:absolute;top:12px;left:12px;background:var(--papel);font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:5px 8px;pointer-events:none}
.selo-lanc{background:var(--camp,var(--noite));color:var(--papel);font-weight:600}
.selo-kit{background:var(--ter);color:var(--papel);font-weight:600;font-size:11px;letter-spacing:.14em;padding:6px 10px}
.mais1{position:absolute;right:10px;bottom:10px;width:44px;height:44px;background:var(--papel);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform .2s}
@media (hover:hover){.mais1:hover{background:var(--noite);color:var(--papel)}}
.mais1:active{transform:scale(.88)}
.card-txt{padding:14px 14px 30px;display:flex;flex-direction:column;gap:7px;text-decoration:none}
.card-linha{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card-nome{font-size:15px;line-height:1.3}
.card-preco{font-family:var(--mono);font-size:13px;white-space:nowrap}
.card-dim{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#2B1A12B3}
.card.vazio .card-foto{animation:pisca 1.4s ease-in-out infinite}
.card.vazio .card-txt i{display:block;height:12px;width:70%;background:var(--areia);animation:pisca 1.4s ease-in-out infinite}
@keyframes pisca{50%{opacity:.55}}
.grade-msg{grid-column:1/-1;padding:40px var(--pad);text-align:center;font-size:15px}
.mais-wrap{display:flex;justify-content:center;padding-top:40px}
.colchete{position:relative;height:56px;padding:0 40px;display:flex;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.colchete i{position:absolute;top:0;bottom:0;width:7px;border:1px solid currentColor;transition:transform .35s var(--mola)}
.colchete i:first-child{left:0;border-right:0}
.colchete i:last-child{right:0;border-left:0}
@media (hover:hover){.colchete:hover{background:#2B1A120F}.colchete:hover i:first-child{transform:translateX(-4px)}.colchete:hover i:last-child{transform:translateX(4px)}.colchete.claro:hover{background:#F7F2EA1F}}
.colchete.claro{height:60px;padding:0 44px;font-size:13px;margin-top:10px}

/* sobre */
.sobre{background:var(--noite);color:var(--papel);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.sobre-foto{aspect-ratio:4/5;max-height:92svh;width:100%;overflow:hidden}
.sobre-foto img{width:100%;height:100%;object-fit:cover}
.sobre-txt{padding:clamp(48px,7vw,120px) clamp(20px,6vw,112px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:26px}
.sobre h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(42px,4.8vw,80px);line-height:.95;letter-spacing:-.01em;max-width:11ch;text-wrap:balance}
.sobre p{margin:0;font-size:17px;line-height:1.65;max-width:46ch;text-wrap:pretty;color:var(--areia)}
.sobre p.sobre-curto{color:#EFE7DAB3;font-size:15px}
.wa-botao{gap:12px}
.wa-ico{width:20px;height:20px;flex:none;overflow:visible}
.wa-balao{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.wa-fone{fill:currentColor}
@media (hover:hover){.wa-botao:hover .wa-ico{animation:waToca .6s var(--mola)}}
@keyframes waToca{25%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}}
@media (max-width:819px){.sobre-foto{aspect-ratio:2/1;max-height:none}.sobre-foto img{object-position:50% 40%}.sobre-txt{gap:22px}}

/* vídeos */
.videos{padding:clamp(56px,6vw,96px) 0}
.videos-rotulo{padding:0 var(--pad) 20px}
@keyframes respira{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@keyframes selo{0%,100%{opacity:.7;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
.videos-trilho{gap:2px;scroll-snap-type:x mandatory}
.video{flex:1 0 auto;width:max(46%,240px);max-width:360px;scroll-snap-align:start;position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--noite);color:var(--papel);cursor:default}
.video img{width:100%;height:100%;object-fit:cover;filter:blur(12px);transform:scale(1.12)}
.brilho{display:none}
.breve{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:16px;background:#1A0F0A40}
.breve b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid #F7F2EA99;padding:7px 10px;background:#1A0F0A33}
.breve em,.play em{font-style:normal}
.breve em{font-family:var(--serif);font-size:24px;line-height:1.1;max-width:12ch}
.play{display:none;position:absolute;left:0;right:0;bottom:0;padding:64px 16px 16px;background:linear-gradient(0deg,#1A0F0AB3,#1A0F0A00);align-items:center;gap:12px;font-size:14px;line-height:1.25;text-align:left}
.play i{flex:none;width:34px;height:34px;border:1px solid var(--papel);display:flex;align-items:center;justify-content:center}
.play i::after{content:"";border-left:8px solid var(--papel);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.video.pronto{cursor:pointer}
.video.pronto img{filter:none;transform:none;animation:none}
.video.pronto .brilho,.video.pronto .breve{display:none}
.video.pronto .play{display:flex}

/* informações e rodapé */
.info{border-top:1px solid var(--linha);padding:40px var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.info div{display:flex;flex-direction:column;gap:6px}
.info b{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.info span{font-size:14px;color:#2B1A12B3}
.rodape{background:var(--noite);color:var(--areia)}
.rodape-in{padding:56px var(--pad) 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:36px}
.rodape-marca{display:flex;flex-direction:column;gap:14px}
.rodape-marca>div{display:flex;align-items:center;gap:9px;color:var(--papel)}
.rodape-marca .logo{width:28px;height:28px;color:var(--ocre)}
.rodape-marca>div span{font-family:var(--serif);font-size:38px;line-height:1}
.rodape-marca .mono-s{line-height:1.6}
.rodape-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.rodape-t{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ocre);padding-bottom:8px}
.rodape-col a,.rodape-col button,.rodape-col .apagado{font-size:15px;padding:7px 0;text-decoration:none;color:var(--areia)}
.rodape-col a:hover,.rodape-col button:hover{color:var(--papel)}
.apagado{color:#CDBFA9!important}
.rodape-base{border-top:1px solid #EFE7DA26;padding:22px var(--pad) calc(28px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:baseline;color:#CDBFA9}
.rodape-base p{margin:0;max-width:640px;font-size:13px;line-height:1.6;text-wrap:pretty}

/* camadas (menu, peça, sacola, vídeo) */
.camada{position:fixed;inset:0;z-index:50;display:flex}
.veu{position:absolute;inset:0;background:#1A0F0A80;animation:aparece .35s ease both}
.camada.saindo .veu{animation:some .3s ease forwards}
@keyframes aparece{from{opacity:0}}
@keyframes some{to{opacity:0}}
.lado{justify-content:flex-end}
.painel{position:relative;width:min(100%,560px);height:100%;background:var(--papel);display:flex;flex-direction:column;animation:entraD .5s var(--mola) both}
.painel-s{width:min(100%,480px)}
.camada.saindo .painel{animation:saiD .3s var(--suave) forwards}
@keyframes entraD{from{transform:translateX(100%)}}
@keyframes saiD{to{transform:translateX(100%)}}
.painel-cab{height:64px;flex:none;padding:0 8px 0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--linha)}
.x{width:44px;height:44px;font-size:24px;line-height:1;transition:transform .3s var(--mola)}
@media (hover:hover){.x:hover{transform:rotate(90deg)}}
.painel-corpo{flex:1;overflow:auto;overscroll-behavior:contain}
.painel-pe{flex:none;border-top:1px solid var(--linha);padding:14px 20px calc(20px + env(safe-area-inset-bottom));display:flex;gap:10px}
.painel-pe.col{flex-direction:column;gap:12px;padding-top:18px}

/* menu: abre como uma cortina, da esquerda para a direita */
.menu{position:relative;width:min(88%,400px);height:100%;background:var(--papel);display:flex;flex-direction:column;overflow:auto;clip-path:inset(0 0 0 0);animation:cortina .6s var(--mola) both}
.camada.saindo .menu{animation:cortinaFecha .38s var(--suave) forwards}
@keyframes cortina{from{clip-path:inset(0 100% 0 0)}}
@keyframes cortinaFecha{to{clip-path:inset(0 100% 0 0)}}
.menu-cab{height:var(--cab);flex:none;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--linha)}
.menu-cab .burger.aberto .burger-l i{transition-delay:.12s}
.menu-logo{width:26px;height:26px;color:var(--ter);animation:gira .8s var(--mola) .1s both}
@keyframes gira{from{opacity:0;transform:rotate(-90deg) scale(.6)}}
.menu-itens{display:flex;flex-direction:column}
.menu-itens button{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--linha);font-family:var(--serif);font-size:32px;line-height:1;text-align:left;animation:entraItem .55s var(--mola) both;animation-delay:calc(.12s + var(--i) * .045s)}
.menu-itens button span{font-family:var(--sans);font-size:16px;opacity:.5;transition:transform .3s var(--mola),opacity .3s}
.menu-itens button:hover span{transform:translateX(4px);opacity:1}
@keyframes entraItem{from{opacity:0;transform:translateX(-22px)}}
.menu-pe{margin-top:auto;padding:28px 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:14px 22px;font-family:var(--sans);font-size:15px;animation:entraItem .55s var(--mola) both;animation-delay:calc(.12s + var(--i) * .045s)}
.menu-pe a{text-decoration:none;color:#2B1A12CC}
.menu-pe a:hover{color:var(--ter)}

/* peça */
.peca-foto{aspect-ratio:4/5;max-height:62svh;width:100%;overflow:hidden;background:var(--areia)}
.peca-foto img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.peca-miniaturas{display:flex;gap:2px;padding-top:2px}
.peca-miniaturas button{width:72px;height:96px;overflow:hidden;opacity:.55;box-shadow:inset 0 -2px 0 transparent;transition:opacity .2s}
.peca-miniaturas button[aria-current="true"]{opacity:1;box-shadow:inset 0 -2px 0 var(--tinta)}
.peca-miniaturas img{width:100%;height:100%;object-fit:cover}
.peca-info{padding:24px 20px 8px;display:flex;flex-direction:column;gap:20px}
.peca-info>div:first-child{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.peca-linha{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%}
.peca-linha h3{margin:0;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1}
.peca-linha .mono{font-size:16px;white-space:nowrap}
.ultima{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ter);display:flex;align-items:center;gap:8px}
.ultima::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ter);animation:respira 2.4s ease-in-out infinite}
.peca-tams{display:flex;flex-direction:column;gap:10px}
.peca-tams>div{display:flex;gap:6px;flex-wrap:wrap}
.peca-tams button{height:44px;padding:0 16px;border:1px solid var(--tinta);font-family:var(--mono);font-size:12px;transition:background .2s,color .2s}
.peca-tams button[aria-pressed="true"]{background:var(--noite);color:var(--papel)}
.peca-info p{margin:0;font-size:16px;line-height:1.6;text-wrap:pretty}
.specs{display:flex;flex-direction:column;border-top:1px solid #2B1A1222}
.specs div{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid #2B1A1222;font-size:14px}
.specs b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;padding-top:2px}
.peca-duvida{font-size:14px;text-underline-offset:3px;padding:4px 0 16px;color:#2B1A12CC}
.qtd{display:flex;align-items:center;border:1px solid #2B1A1255}
.qtd button{width:44px;height:54px;font-size:18px}
.qtd button:disabled{opacity:.3;cursor:default}
.qtd span{min-width:20px;text-align:center;font-family:var(--mono)}
.botao{flex:1;white-space:nowrap;gap:12px;background:var(--noite);color:var(--papel);height:56px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;padding:0 20px;text-decoration:none;transition:background .25s}
@media (hover:hover){.botao:not(:disabled):hover{background:var(--ter)}}
.botao:disabled{background:#2B1A1266;cursor:default}
a.botao{justify-content:center;flex:none}
@media (hover:hover){a.botao:hover{background:var(--oliva)}}

/* sacola */
.sacola-lista{padding:4px 20px}
.item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid #2B1A1222;align-items:start;animation:sobe .45s var(--mola) both;animation-delay:var(--d,0s)}
.item-foto{width:72px;height:108px;overflow:hidden;background:var(--areia)}
.item-foto img{width:100%;height:100%;object-fit:cover}
.item-meio{display:flex;flex-direction:column;gap:4px;font-size:14px;min-width:0}
.item-meio>span:first-child{font-size:15px}
.item-q{display:flex;align-items:center;gap:6px;padding-top:8px}
.item-q button{width:36px;height:36px;border:1px solid #2B1A1244}
.item-q button:disabled{opacity:.3;cursor:default}
.item-q span{min-width:18px;text-align:center;font-family:var(--mono)}
.item-dir{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.item-dir .mono{font-size:13px;white-space:nowrap}
.item-dir button{font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.item.sai{animation:itemSai .3s var(--suave) forwards}
@keyframes itemSai{to{opacity:0;transform:translateX(30px)}}
.sacola-vazia{flex:1;padding:56px 20px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.vazia-logo{width:44px;height:44px;color:var(--ocre)}
.vazia-t{font-family:var(--serif);font-size:28px}
.borda{border:1px solid var(--tinta);height:48px;padding:0 22px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.sub{display:flex;justify-content:space-between;font-size:16px}
.nota{font-size:13px;line-height:1.5;color:#2B1A12B3}

/* vídeo */
.video-camada{z-index:60;background:#120B07;align-items:center;justify-content:center;animation:aparece .3s ease both}
.video-camada video{height:100%;max-width:100%;aspect-ratio:9/16;object-fit:cover}
.x.claro{position:absolute;top:16px;right:16px;border:1px solid var(--papel);background:#120B0799;color:var(--papel);font-size:22px}

/* aviso "na sacola" */
.aviso{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:45;transform:translateX(-50%);background:var(--noite);color:var(--papel);display:flex;align-items:center;gap:18px;padding:0 8px 0 18px;height:52px;font-size:14px;white-space:nowrap;box-shadow:0 10px 30px #1A0F0A40;animation:avisoEntra .5s var(--mola) both}
.aviso.sai{animation:avisoSai .3s ease forwards}
.aviso button{height:40px;padding:0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid #F7F2EA80}
@keyframes avisoEntra{from{opacity:0;transform:translate(-50%,24px)}}
@keyframes avisoSai{to{opacity:0;transform:translate(-50%,12px)}}
.sem-js{position:fixed;inset:auto 0 0;margin:0;padding:14px;background:var(--noite);color:var(--papel);text-align:center;z-index:99}

/* campanhas (Natal, Dia das Mães...): a cor vem em --camp */
.estrela{width:12px;height:12px;flex:none;fill:currentColor}
.estrela.gira{animation:estrelaGira 6s linear infinite}
@keyframes estrelaGira{to{transform:rotate(360deg)}}
.aba-camp{display:flex;align-items:center;gap:7px;color:var(--camp,#9E2A2B)!important}
.aba-camp[aria-selected="true"]{border-color:var(--camp,#9E2A2B)!important}
.camp-atalhos{padding:0 var(--pad) 22px;display:flex;flex-wrap:wrap;gap:8px;animation:coresAbre .35s var(--mola) both}
.camp-atalhos button{height:34px;padding:0 14px;border:1px solid #2B1A1233;border-radius:999px;font-size:13px;transition:background .2s,color .2s,border-color .2s}
.camp-atalhos button[aria-pressed="true"]{background:var(--camp,#9E2A2B);border-color:var(--camp,#9E2A2B);color:var(--papel)}
.selo-estrela{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;background:var(--papel);color:var(--camp,#9E2A2B);display:flex;align-items:center;justify-content:center;pointer-events:none}
.selo-estrela .estrela{width:14px;height:14px;animation:none}
.nav-camp{display:flex;align-items:center;gap:7px;color:var(--camp,#9E2A2B);text-decoration:none}
.menu-itens .menu-camp{color:var(--camp,#9E2A2B);justify-content:flex-start;gap:12px}
.menu-itens .menu-camp .estrela{width:20px;height:20px}
.menu-itens .menu-camp span{margin-left:auto}
@media (prefers-reduced-motion:reduce){.estrela.gira{animation:none}}
.presente{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.presente input{width:20px;height:20px;accent-color:var(--noite);margin:0}
.bilhete-wrap{display:flex;flex-direction:column;gap:6px;animation:coresAbre .3s var(--mola) both}
.bilhete-wrap textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid #2B1A1233;background:#fff;resize:vertical;min-height:64px;border-radius:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}