/* Mate London STREET: asfalto, cartaz colado, fita prata, spray. Mesma linguagem dos criativos street. */
@font-face{font-family:Rubik Mono One;src:url(fonts/RubikMonoOne.woff2) format("woff2");font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/Archivo-100_900.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Permanent Marker;src:url(fonts/PermanentMarker.woff2) format("woff2");font-display:swap}
@font-face{font-family:Plex Mono;src:url(fonts/IBMPlexMono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --asfalto:#1c1d1f;--asfalto-2:#26272a;--papel:#efe9dc;--tinta:#111;--giz:#f4f1ea;--giz-2:#b9b6ae;
  --amarelo:#ffe600;--rosa:#d61a32;--sangue-escuro:#8a0a1c;--ciano:#ffe600;--prata:linear-gradient(135deg,#d9dbde,#9fa3a8 45%,#e9eaec 60%,#8e9297);
  --f-mega:"Rubik Mono One",Impact,sans-serif;--f-txt:Archivo,system-ui,sans-serif;--f-spray:"Permanent Marker",cursive;--f-mono:"Plex Mono",ui-monospace,monospace;--f-lux:"Didot","Bodoni 72","Playfair Display",Georgia,"Times New Roman",serif;
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{background:var(--asfalto);color:var(--giz);font:400 17px/1.5 var(--f-txt)}
body::before{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grao{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-999px;top:8px;z-index:200;background:var(--amarelo);color:var(--tinta);padding:10px 16px;font-weight:800}
.pular:focus{left:8px}
.mono{font-family:var(--f-mono)}
.confirmar{border-bottom:1px dashed currentColor}

/* ---------- pedaços comuns ---------- */
.mega{font:400 clamp(56px,13vw,200px)/.86 var(--f-mega);text-transform:uppercase;letter-spacing:-.02em}
.mega.pequeno{font-size:clamp(40px,7vw,104px)}
.mega .l{display:block;overflow:hidden;padding-bottom:.04em}
.contorno{color:transparent;-webkit-text-stroke:2px var(--amarelo)}
.titulo{font:400 clamp(36px,6vw,84px)/.9 var(--f-mega);text-transform:uppercase}
.marcador{font:400 clamp(20px,2.4vw,30px)/1.1 var(--f-spray);color:var(--amarelo);transform:rotate(-3deg);transform-origin:left}
.tag-amarela{display:inline-block;background:var(--amarelo);color:var(--tinta);font:800 13px/1 var(--f-txt);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px 7px;transform:rotate(-1.5deg)}
.tag-amarela.rosa{background:var(--rosa);color:#fff}
.miudo{font:500 12px/1.5 var(--f-mono);color:var(--giz-2);letter-spacing:.02em}
.erro{color:var(--rosa);font-weight:700;min-height:1.4em;margin-top:6px}
.fita-prata{position:absolute;z-index:3;width:84px;height:26px;background:var(--prata);opacity:.92;box-shadow:0 1px 3px #0006;
  clip-path:polygon(4% 0,96% 6%,100% 30%,95% 54%,100% 80%,94% 100%,3% 94%,0 70%,5% 45%,0 18%)}
.fita-prata.fl{top:-10px;left:-22px;transform:rotate(-38deg)}
.fita-prata.fr{top:-10px;right:-22px;transform:rotate(38deg)}
.spray{position:absolute;z-index:4;font:400 clamp(24px,3vw,40px)/1 var(--f-spray);transform:rotate(-8deg);pointer-events:none;
  text-shadow:0 0 18px currentColor;filter:drop-shadow(1px 2px 0 #0008)}
.spray.amarelo{color:var(--amarelo)}.spray.rosa{color:var(--rosa)}.spray.ciano{color:var(--ciano)}

.btn-fita{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 24px;background:var(--giz);color:var(--tinta);
  font:400 clamp(14px,1.4vw,17px)/1 var(--f-mega);text-transform:uppercase;text-decoration:none;transform:rotate(-1.2deg);
  clip-path:polygon(0 6%,3% 0,97% 4%,100% 0,99% 50%,100% 96%,96% 100%,4% 94%,0 100%,1% 50%);transition:transform .2s,background .2s}
.btn-fita.cheio{background:var(--amarelo)}
.btn-fita:hover{transform:rotate(0) scale(1.04);background:var(--rosa);color:#fff}
.btn-fita svg{transition:transform .2s}.btn-fita:hover svg{transform:translateX(4px)}
.btn-spray{min-height:56px;padding:0 8px;font:400 22px/1 var(--f-spray);color:var(--rosa);text-decoration:underline wavy;text-underline-offset:6px}
.btn-spray:hover{color:var(--ciano)}
.link-marcador{font:400 22px/1 var(--f-spray);color:var(--amarelo);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.link-marcador:hover{color:var(--rosa)}
.acoes{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:32px}

/* ---------- abertura (glitch) ---------- */
.intro{position:fixed;inset:0;z-index:150;background:var(--amarelo);display:grid;place-content:center;justify-items:center;gap:8px;color:var(--tinta);pointer-events:none}
.intro-logo{position:relative;font:400 clamp(40px,10vw,140px)/1 var(--f-mega)}
.intro-logo::before,.intro-logo::after{content:attr(data-glitch);position:absolute;inset:0}
.intro-logo::before{color:var(--rosa);mix-blend-mode:multiply;animation:gl1 .3s steps(2) infinite}
.intro-logo::after{color:var(--ciano);mix-blend-mode:multiply;animation:gl2 .3s steps(2) infinite}
@keyframes gl1{0%{transform:translate(-4px,2px);clip-path:inset(0 0 60% 0)}100%{transform:translate(3px,-2px);clip-path:inset(40% 0 0 0)}}
@keyframes gl2{0%{transform:translate(4px,-1px);clip-path:inset(50% 0 0 0)}100%{transform:translate(-3px,2px);clip-path:inset(0 0 45% 0)}}
.intro-sub{font:400 28px/1 var(--f-spray);transform:rotate(-3deg)}
.sem-js .intro,.intro.foi{display:none}

/* ---------- faixa que pisca no topo ---------- */
.faixa-promo{display:block;width:100%;max-width:100vw;contain:paint;overflow:hidden;background:var(--rosa);color:#fff;height:40px;position:relative;text-align:left;
  font:400 13px/40px var(--f-mega);text-transform:uppercase;letter-spacing:.04em;animation:pisca-fundo 1.2s steps(1) infinite}
.faixa-promo .run{display:inline-flex;white-space:nowrap;animation:corre 26s linear infinite}
.faixa-promo .run span{padding-right:24px}
.faixa-codigo{position:absolute;inset:0;display:grid;place-items:center;background:var(--amarelo);color:var(--tinta)}
.faixa-promo.tem-cupom{animation:none;background:var(--amarelo)}
.faixa-promo.tem-cupom .run{visibility:hidden}
@keyframes pisca-fundo{0%{background:var(--rosa);color:#fff}50%{background:var(--amarelo);color:var(--tinta)}}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:24px;padding:12px var(--gut);background:color-mix(in srgb,var(--asfalto) 88%,transparent);backdrop-filter:blur(10px)}
.logo{display:flex;align-items:baseline;gap:8px;background:var(--amarelo);color:var(--tinta);padding:6px 14px 8px;text-decoration:none;transform:rotate(-2deg);transition:transform .2s}
.logo-mate{font:400 28px/1 var(--f-lux)}
.logo-ldn{font:500 11px/1 var(--f-mono);letter-spacing:.25em}
.logo:hover{transform:rotate(2deg) scale(1.05)}
.menu{display:flex;gap:24px;margin-left:auto}
.menu a{font:800 14px/1 var(--f-txt);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:14px 0;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:3px;background:var(--rosa);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.sacola-btn{position:relative;display:grid;place-items:center;width:48px;height:48px;background:var(--giz);color:var(--tinta);border-radius:50%}
.sacola-btn .n{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;border-radius:11px;background:var(--rosa);color:#fff;font:800 12px/22px var(--f-txt);text-align:center}
@media (max-width:640px){.menu{gap:14px}.menu a:nth-child(3){display:none}.menu a{font-size:12px}.logo{font-size:13px}}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(32px,6vw,72px) var(--gut) clamp(56px,8vw,96px);min-height:calc(100svh - 112px)}
.hero-txt .tag-amarela{margin-bottom:24px}
.hero-marcador{margin-top:16px;font-size:clamp(26px,3.4vw,44px)}
.hero-sub{max-width:40ch;margin-top:24px;color:var(--giz-2);font-size:clamp(17px,1.4vw,20px)}
.hero-tela{position:relative;justify-self:center;width:min(100%,380px);padding:12px;background:var(--papel);transform:rotate(2.5deg);box-shadow:0 30px 60px #0008}
.hero-tela video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.hero-spray{bottom:12%;left:-18%;font-size:clamp(34px,4vw,56px)}
@media (max-width:860px){.hero{grid-template-columns:1fr;min-height:0}.hero-tela{width:min(78%,320px);margin-top:16px}.hero-spray{left:-10%}}

/* ---------- fita amarela de obra ---------- */
.fita-amarela{overflow:hidden;contain:paint;background:var(--amarelo);color:var(--tinta);padding:14px 0;font:400 clamp(16px,2vw,24px)/1 var(--f-mega);white-space:nowrap;
  transform:rotate(-2deg) scale(1.04);box-shadow:0 10px 30px #0007;position:relative;z-index:5}
.fita-amarela.torta{transform:rotate(1.6deg) scale(1.04);background:var(--rosa);color:#fff}
.fita-amarela .run{display:inline-flex;animation:corre 30s linear infinite}
.fita-amarela.torta .run{animation-direction:reverse}
.fita-amarela span{padding-right:16px}

/* ---------- vídeo dentro das letras (zoom-through) ---------- */
.zoom{height:190vh;position:relative}
.zoom-palco{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.zoom-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.zoom-mascara{position:absolute;inset:-2px;background:#000;color:#fff;mix-blend-mode:multiply;display:grid;place-content:center;justify-items:center;
  font:400 clamp(64px,17vw,300px)/.84 var(--f-mega);text-align:center;will-change:transform}
.zoom-leg{position:absolute;bottom:8vh;left:var(--gut);z-index:2;font-size:clamp(24px,3vw,40px)}

/* ---------- blocos ---------- */
.bloco{padding:clamp(56px,9vw,128px) var(--gut)}
.bloco-cab{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,64px)}
.lado{max-width:34ch;color:var(--giz-2)}
.topo-pagina{padding-bottom:0}.topo-pagina .tag-amarela{margin-bottom:20px}

/* ---------- parede de cartazes ---------- */
.parede{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(28px,4vw,56px) clamp(20px,3vw,40px)}
.poster{position:relative;display:block;background:var(--papel);color:var(--tinta);padding:12px 12px 16px;text-decoration:none;transform:rotate(var(--r));
  box-shadow:0 14px 30px #0007;transition:transform .35s cubic-bezier(.2,1.6,.4,1),box-shadow .35s}
.poster:hover{transform:rotate(0) translateY(-8px) scale(1.03);box-shadow:0 26px 50px #000a}
.poster .foto{position:relative;aspect-ratio:4/5;overflow:hidden;background:#fff}
.poster .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s,transform .5s}
.poster .foto .b{opacity:0}
.poster:hover .foto .b{opacity:1}.poster:hover .foto .a{transform:scale(1.06)}
.poster .info{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:12px}
.poster h3{font:400 15px/1.1 var(--f-mega);text-transform:uppercase}
.poster .preco{font:500 15px/1 var(--f-mono)}
.poster .spray{top:14px;left:-8px;font-size:30px}

/* ---------- feed de vídeos ---------- */
.feed{overflow:hidden}
.feed-trilho{display:flex;gap:clamp(16px,2vw,28px);width:max-content}
.feed-trilho.um{width:auto;justify-content:center}
.feed-item{position:relative;display:block;width:clamp(280px,30vw,420px);flex:none;background:var(--papel);padding:10px;text-decoration:none;color:var(--tinta);box-shadow:0 18px 40px #0008;transition:transform .3s}
.feed-item:nth-child(odd){transform:rotate(-1.5deg)}.feed-item:nth-child(even){transform:rotate(1.5deg) translateY(24px)}
.feed-item:hover{transform:rotate(0) scale(1.03)}
.feed-item video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.feed-leg{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font:400 14px/1 var(--f-mega);text-transform:uppercase}
@media (max-width:860px){.feed-trilho{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:32px}.feed-item{scroll-snap-align:center;width:min(78vw,420px)}}

/* ---------- drop ---------- */
.drop-bloco{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(64px,10vw,140px) var(--gut);
  background:radial-gradient(circle at 80% 30%,#d61a3233,transparent 55%),var(--asfalto-2)}
.drop-bloco.pagina{min-height:calc(100svh - 112px)}
.drop-txt>p:not(.tag-amarela):not(.marcador){max-width:44ch;color:var(--giz-2);margin-top:20px}
.drop-txt .titulo{margin-top:20px}
.drop-txt .marcador{margin-top:12px;color:var(--rosa)}
.drop-foto{position:relative;background:var(--papel);padding:12px;transform:rotate(-2deg);box-shadow:0 30px 60px #0009;max-width:520px;justify-self:center}
.drop-foto .spray{bottom:8%;right:-6%;font-size:clamp(34px,4vw,58px)}
.relogio{display:flex;gap:10px;margin-top:28px}
.relogio div{background:var(--tinta);border:2px solid var(--rosa);padding:10px 12px;min-width:72px;text-align:center}
.relogio b{display:block;font:400 clamp(26px,3vw,38px)/1 var(--f-mega);color:var(--amarelo)}
.relogio span{font:500 11px/1 var(--f-mono);text-transform:uppercase;color:var(--giz-2)}
@media (max-width:860px){.drop-bloco{grid-template-columns:1fr}.relogio div{min-width:0;flex:1}}

/* ---------- chat ---------- */
.chat{max-width:520px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.msg{max-width:78%;background:var(--asfalto-2);border:1px solid #ffffff1a;padding:12px 16px;border-radius:20px 20px 20px 4px;font-size:18px}
.msg .quem{display:block;font:500 11px/1 var(--f-mono);text-transform:uppercase;color:var(--ciano);margin-bottom:6px}
.msg.minha{align-self:flex-end;background:var(--amarelo);color:var(--tinta);border-radius:20px 20px 4px 20px}
.msg.minha .quem{color:#0009}

/* ---------- vibes / coleções ---------- */
.vibes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:24px}
.vibe{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#fff;text-decoration:none}
.vibe img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .5s;filter:grayscale(1) contrast(1.1)}
.vibe:hover img{transform:scale(1.08);filter:none}
.vibe span{position:absolute;left:12px;bottom:12px;right:12px;font:400 clamp(20px,2vw,28px)/1 var(--f-mega);text-transform:uppercase;background:var(--tinta);color:var(--amarelo);padding:10px 12px;transform:rotate(-2deg)}
.vibe.rosa span{color:var(--rosa)}.vibe.ciano span{color:var(--ciano)}

/* ---------- garantias ---------- */
.garantias{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:2px;padding-top:0}
.garantias>div{background:var(--asfalto-2);padding:28px 24px;border-top:4px solid var(--amarelo)}
.garantias>div:nth-child(2){border-color:var(--rosa)}.garantias>div:nth-child(3){border-color:var(--ciano)}
.garantias b{display:block;font:400 22px/1 var(--f-mega);text-transform:uppercase;margin-bottom:8px}
.garantias span{color:var(--giz-2)}

/* ---------- shop ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.chip{min-height:48px;display:inline-flex;align-items:center;padding:0 18px;border:2px solid var(--giz);border-radius:999px;font:800 14px/1 var(--f-txt);text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.chip:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--tinta)}

/* ---------- produto ---------- */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);padding:clamp(24px,4vw,56px) var(--gut)}
.gal-wrap{position:relative;min-width:0;align-self:start}
.galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;background:#fff}
.galeria::-webkit-scrollbar{display:none}
.galeria img{flex:0 0 100%;width:100%;aspect-ratio:4/5;object-fit:contain;background:#fff;scroll-snap-align:center;scroll-snap-stop:always}
.galeria img[hidden]{display:none}
.gal-seta{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:2px solid #111;background:var(--amarelo,#ffe600);color:#111;font:700 22px/1 sans-serif;display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:3px 3px 0 #111}
.gal-seta:disabled{opacity:.25;cursor:default}
.gal-seta[hidden],.gal-pontos[hidden],.gal-conta[hidden]{display:none}
.gal-seta.ant{left:10px}.gal-seta.prox{right:10px}
.gal-pontos{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.gal-pontos button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:#666;cursor:pointer}
.gal-pontos button[aria-current=true]{background:var(--amarelo,#ffe600);transform:scale(1.3)}
.gal-conta{position:absolute;left:12px;bottom:12px;background:#111;color:#fff;font:600 12px/1 monospace;padding:6px 8px;z-index:2}
.compra{position:sticky;top:96px;align-self:start}
.migalha{font:500 13px/1 var(--f-mono);color:var(--giz-2);margin-bottom:16px}
.compra .marcador{margin-top:12px}
.preco-linha{display:flex;gap:16px;align-items:baseline;margin-top:24px;font-size:28px}
.preco-linha b.riscado{text-decoration:line-through;color:var(--giz-2);font-size:20px}
.preco-linha [data-preco-cupom]{font:400 30px/1 var(--f-mega);color:var(--amarelo)}
.aviso-cupom{margin-top:16px;display:inline-flex;gap:8px;align-items:center;min-height:48px;padding:0 14px;border:2px dashed var(--rosa);color:var(--rosa);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.04em;animation:pisca-borda 1.2s steps(1) infinite}
@keyframes pisca-borda{50%{border-color:var(--amarelo);color:var(--amarelo)}}
fieldset{border:0;margin-top:28px}
legend{font:800 13px/1 var(--f-txt);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.opcoes input{position:absolute;opacity:0}
.opcoes label{min-width:52px;min-height:48px;display:grid;place-items:center;padding:0 14px;border:2px solid #ffffff40;font-weight:800;cursor:pointer;transition:all .15s}
.opcoes input:checked+label{background:var(--amarelo);color:var(--tinta);border-color:var(--amarelo);transform:rotate(-2deg)}
.opcoes input:focus-visible+label{outline:3px solid var(--rosa);outline-offset:2px}
.add{margin-top:28px;width:100%;justify-content:center}
.historia{margin-top:28px;color:var(--giz-2);border-left:4px solid var(--rosa);padding-left:16px}
.etiqueta{margin-top:28px;background:var(--papel);color:var(--tinta);padding:20px}
.etiqueta dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin-top:16px;font:500 14px/1.4 var(--f-mono)}
.etiqueta dt{text-transform:uppercase;color:#0009}
.compra .miudo{margin-top:20px}
@media (max-width:860px){.pdp{grid-template-columns:1fr}.compra{position:static}}

/* ---------- gaveta ---------- */
.veu{position:fixed;inset:0;z-index:100;background:#000a;opacity:0;pointer-events:none;transition:opacity .25s}
.veu.ver{opacity:1;pointer-events:auto}
.gaveta{position:fixed;top:0;right:0;bottom:0;z-index:110;width:min(100%,440px);background:var(--asfalto-2);display:flex;flex-direction:column;transform:translateX(105%);visibility:hidden;transition:transform .4s cubic-bezier(.2,.9,.2,1),visibility 0s .4s}
.gaveta.ver{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.9,.2,1)}
.gaveta header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:2px solid var(--amarelo)}
.gaveta h2{font:400 22px/1 var(--f-mega);text-transform:uppercase}
.fechar{width:48px;height:48px;font-size:32px;line-height:1}
.itens{flex:1;overflow:auto;padding:8px 24px}
.item{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid #ffffff1a}
.item img{background:#fff;aspect-ratio:4/5;object-fit:cover}
.item h3{font:400 13px/1.2 var(--f-mega);text-transform:uppercase}
.item p{font-size:13px;color:var(--giz-2)}
.qtd{display:flex;gap:10px;align-items:center;margin-top:8px}
.qtd button{width:44px;height:44px;border:2px solid #ffffff40;font-size:18px}
.gaveta footer{padding:20px 24px;border-top:1px solid #ffffff1a}
.linha{display:flex;justify-content:space-between;padding:4px 0}
.linha.desconto{color:var(--amarelo)}
.linha.total{font:400 20px/1.6 var(--f-mega)}
.sem-cupom{width:100%;min-height:48px;margin-top:10px;border:2px dashed var(--rosa);color:var(--rosa);font-weight:800;animation:pisca-borda 1.2s steps(1) infinite}
.gaveta .btn-fita{width:100%;justify-content:center;margin-top:14px}
.gaveta .miudo{text-align:center;margin-top:12px}
.vazio-sacola{text-align:center;padding:48px 0}
.vazio-sacola p{font:400 26px/1.1 var(--f-spray);color:var(--amarelo);margin-bottom:16px}

/* ---------- PORTÃO: banner piscando na entrada ---------- */
.portao{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:#000c;opacity:0;pointer-events:none;transition:opacity .3s}
.portao.ver{opacity:1;pointer-events:auto}
.portao-caixa{position:relative;width:min(100%,520px);max-height:calc(100svh - 32px);overflow:auto;background:var(--asfalto);border:4px solid var(--amarelo);padding:clamp(28px,5vw,44px) clamp(20px,4vw,40px);
  text-align:center;animation:pisca-moldura 1s steps(1) infinite;box-shadow:0 0 0 8px var(--tinta),0 0 60px #ffe60055}
.portao-caixa .fita-prata{top:-12px}
@keyframes pisca-moldura{50%{border-color:var(--rosa);box-shadow:0 0 0 8px var(--tinta),0 0 70px #d61a3266}}
.portao .fechar{position:absolute;top:6px;right:6px;color:var(--giz-2)}
.pisca{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 14px;margin:20px 0 8px;font:400 clamp(52px,13vw,92px)/.95 var(--f-mega)}
.pisca-a{color:var(--amarelo);animation:pisca-a 1s steps(1) infinite}
.pisca-b{color:var(--rosa);animation:pisca-b 1s steps(1) infinite}
.pisca .ou{font:400 30px/1 var(--f-spray);color:var(--giz)}
.pisca .off{flex-basis:100%;font-size:.62em;color:var(--giz)}
@keyframes pisca-a{50%{color:var(--giz);text-shadow:0 0 30px var(--amarelo)}}
@keyframes pisca-b{0%{color:var(--giz);text-shadow:0 0 30px var(--rosa)}50%{color:var(--rosa);text-shadow:none}}
.portao .marcador{transform:rotate(-3deg);transform-origin:center}
.portao-sub{color:var(--giz-2);margin:16px auto 0;max-width:36ch}
.portao-form{display:grid;gap:12px;margin-top:24px}
.portao-form input{width:100%;min-height:56px;padding:0 18px;background:var(--giz);color:var(--tinta);border:0;font:600 18px/1 var(--f-txt);transform:rotate(.6deg)}
.portao-form input::placeholder{color:#555}
.portao-form .btn-fita{justify-content:center}
.nao{margin-top:8px;min-height:44px;color:var(--giz-2);text-decoration:underline;font-size:14px}
.portao .miudo{margin-top:8px}
.roleta{margin:28px auto 8px;height:1.1em;overflow:hidden;font:400 clamp(80px,20vw,140px)/1.1 var(--f-mega);color:var(--amarelo)}
.ganhou{margin-top:20px;font:400 clamp(56px,14vw,96px)/.95 var(--f-mega);text-transform:uppercase}
.ganhou [data-pct]{color:var(--amarelo);display:block}
.cupom{display:grid;gap:4px;margin:24px auto 0;padding:16px 28px;border:3px dashed var(--amarelo);background:var(--tinta);min-width:240px}
.cupom b{font:400 34px/1 var(--f-mega);letter-spacing:.06em;color:var(--amarelo)}
.cupom .copiar{font:500 12px/1 var(--f-mono);text-transform:uppercase;color:var(--giz-2)}
.etapa[data-etapa="3"] .btn-fita{margin-top:24px;justify-content:center;width:100%}
.confete{position:fixed;z-index:130;width:10px;height:16px;pointer-events:none;top:0;left:0}

/* ---------- rodapé ---------- */
.rodape{padding:clamp(56px,8vw,96px) var(--gut) 32px;border-top:2px solid #ffffff14;overflow:hidden}
.gigante{font:400 clamp(64px,18vw,300px)/.82 var(--f-mega);color:transparent;-webkit-text-stroke:2px #ffffff26;margin-bottom:48px}
.rodape-grade{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.rodape-grade h2{font:800 13px/1 var(--f-txt);text-transform:uppercase;letter-spacing:.08em;color:var(--giz-2);margin-bottom:12px}
.rodape-grade a{display:block;padding:6px 0;text-decoration:none}
.rodape-grade a:hover{color:var(--amarelo)}
.rodape-grade p:not(.marcador){color:var(--giz-2);margin-top:16px;max-width:36ch}
.legal{margin-top:48px;font:500 12px/1.5 var(--f-mono);color:var(--giz-2)}
@media (max-width:760px){.rodape-grade{grid-template-columns:1fr 1fr}.rodape-grade>div:first-child{grid-column:1/-1}}

/* ---------- cursor adesivo ---------- */
.adesivo{position:fixed;z-index:95;top:0;left:0;pointer-events:none;font:400 15px/1 var(--f-mega);background:var(--amarelo);color:var(--tinta);padding:8px 10px;
  transform:translate(-50%,-50%) scale(0);text-transform:uppercase;white-space:nowrap}
@media (hover:none){.adesivo{display:none}}

/* ---------- menos movimento: nada pisca, nada corre ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .intro{display:none}
  .zoom{height:auto}.zoom-palco{position:relative;height:80svh}
  .faixa-promo{background:var(--rosa)}
}

/* ---------- selos girando ---------- */
.selo-gira{position:absolute;z-index:5;width:120px;height:120px;display:grid;place-items:center;pointer-events:none}
.selo-gira svg{position:absolute;inset:0;width:100%;height:100%;animation:gira 9s linear infinite;background:var(--rosa);border-radius:50%;box-shadow:0 8px 24px #0008}
.selo-gira text{font:400 11.5px var(--f-mega);fill:#fff;letter-spacing:1px}
.selo-gira b{position:relative;font-size:28px;color:var(--amarelo)}
.selo-gira.sg-hero{top:-38px;right:-46px}
.selo-gira.sg-drop{top:-40px;left:-40px}.selo-gira.sg-drop svg{background:var(--amarelo)}.selo-gira.sg-drop text{fill:var(--tinta)}.selo-gira.sg-drop b{color:var(--rosa)}
.selo-gira.pr0{top:-34px;right:-20px;width:96px;height:96px}.selo-gira.pr0 svg{background:var(--tinta)}.selo-gira.pr0 text{fill:var(--amarelo)}
@keyframes gira{to{transform:rotate(360deg)}}
@media (max-width:860px){.selo-gira.sg-hero{right:-18px;top:-30px}}

/* ---------- promoções ---------- */
.promos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:24px}
.promo{position:relative;padding:28px 24px;background:var(--asfalto-2);border:3px solid var(--giz);display:flex;flex-direction:column;gap:14px;align-items:flex-start;transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.promo:hover{transform:translateY(-6px) rotate(-1deg)}
.promo h3{font:400 clamp(24px,2.4vw,32px)/1 var(--f-mega);text-transform:uppercase}
.promo p:not(.tag-amarela){color:var(--giz-2)}
.promo .btn-fita{margin-top:auto}
.promo.p0{background:var(--amarelo);color:var(--tinta);border-color:var(--amarelo);animation:pisca-promo 1.4s steps(1) infinite}
.promo.p0 p:not(.tag-amarela){color:#000b}.promo.p0 .tag-amarela{background:var(--tinta);color:var(--amarelo)}.promo.p0 .btn-fita{background:var(--tinta);color:var(--amarelo)}
.promo.p0 .btn-fita:hover{background:var(--rosa);color:#fff}
.promo.p1{border-color:var(--rosa)}.promo.p2{border-color:var(--ciano)}.promo.p3{border-color:var(--rosa);border-style:dashed}
@keyframes pisca-promo{50%{box-shadow:0 0 0 6px var(--rosa),0 0 50px #d61a3266}}

/* ---------- aviso flutuante que troca sozinho ---------- */
.aviso-gira{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:12px 16px 12px 14px;
  background:var(--tinta);border:2px solid var(--amarelo);font:800 13px/1.2 var(--f-txt);text-transform:uppercase;letter-spacing:.04em;box-shadow:0 10px 30px #0009;transform:rotate(-1deg)}
.aviso-gira [data-aviso]{display:inline-block}
.pulso{flex:none;width:10px;height:10px;border-radius:50%;background:var(--rosa);box-shadow:0 0 0 0 #d61a32;animation:pulso 1.4s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 12px #d61a3200}100%{box-shadow:0 0 0 0 #d61a3200}}
.gaveta.ver~.aviso-gira{display:none}

/* ---------- luxo: serifa itálica no meio da rua ---------- */
.lux{font:400 clamp(22px,2.6vw,36px)/1.15 var(--f-lux);color:var(--giz)}
.lux em{font-style:italic;color:var(--amarelo)}
.hero-lux{margin-top:20px}
.lux-tag{font:italic 400 20px/1 var(--f-lux);color:var(--amarelo);margin-bottom:16px}

/* ---------- manifesto que acende palavra por palavra ---------- */
.manifesto{padding:clamp(80px,12vw,180px) var(--gut);max-width:1300px}
.manifesto-txt{font:400 clamp(34px,5.4vw,84px)/1.08 var(--f-lux)}
.manifesto-txt .w{opacity:.14;transition:opacity .2s}
.manifesto-txt .w:nth-child(n+4):nth-child(-n+7){font-style:italic}

/* ---------- um dia de Mate: trilho de lado, a cor do dia muda ---------- */
.dia{position:relative;background:#232426;transition:background-color .35s}
.dia-palco{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:40px;padding:clamp(48px,6vw,80px) 0;overflow:hidden}
.dia-cab{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:24px;padding:0 var(--gut)}
.dia .lado{color:#fffc}
.dia-trilho{display:flex;gap:clamp(20px,3vw,48px);padding:0 var(--gut);width:max-content}
.momento{position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:end;width:clamp(300px,40vw,560px);flex:none;text-decoration:none;color:#fff}
.hora{position:absolute;top:-28px;left:-8px;z-index:2;font:400 clamp(44px,6vw,92px)/1 var(--f-mega);color:transparent;-webkit-text-stroke:2px #fff}
.momento-foto{width:clamp(160px,18vw,260px);background:var(--papel);padding:8px;transform:rotate(-2deg);box-shadow:0 20px 40px #0006}
.momento:nth-child(even) .momento-foto{transform:rotate(2deg)}
.momento-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#fff}
.lugar{font:800 13px/1 var(--f-txt);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}
.momento .lux{font-size:clamp(20px,2vw,28px)}
.peca{margin-top:12px;font:500 13px/1 var(--f-mono);border-top:1px solid #ffffff55;padding-top:10px}
.dia-relogio{position:absolute;right:var(--gut);top:clamp(48px,6vw,80px);font:400 clamp(20px,2vw,28px)/1 var(--f-mono);background:var(--tinta);color:var(--amarelo);padding:10px 14px}
@media (max-width:860px){.dia-trilho{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:24px}.momento{scroll-snap-align:start;width:86vw}.dia-relogio{display:none}}
@media (prefers-reduced-motion:reduce){.manifesto-txt .w{opacity:1}}

/* ---------- spray de verdade no muro do topo ---------- */
.hero{position:relative}
.spray-tela{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-txt,.hero-tela{position:relative;z-index:1}
.spray-dica{position:absolute;right:var(--gut);top:16px;z-index:2;font:400 18px/1 var(--f-spray);color:var(--ciano);transform:rotate(4deg);opacity:.85}
@media (hover:none){.spray-dica{display:none}}
@media (hover:none){.poster .foto .b{display:none}}
@media (max-width:640px){.pisca{font-size:clamp(44px,13vw,64px)}.portao-caixa{padding:28px 18px}}
.momento{grid-template-rows:auto 1fr}
.hora{position:static;grid-column:1/-1;margin-bottom:-18px;z-index:2}
@media (max-width:860px){
  .aviso-gira{max-width:calc(100vw - 32px);font-size:11px;padding:8px 12px}
  body:has(.pdp) .aviso-gira{display:none}
}

/* ---------- título do topo: BE ORIGINAL cabe em qualquer tela ---------- */
.hero-h1{font-size:clamp(44px,8.2vw,128px)}
.maquina{font:500 13px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--giz-2);margin-bottom:10px}

/* ---------- THE MATE FAMILY: quadro de investigação ---------- */
.caso{padding:clamp(56px,9vw,120px) var(--gut);position:relative}
.caso-cab{display:grid;grid-template-columns:1fr auto;gap:12px 32px;align-items:end;margin-bottom:32px;position:relative}
.caso-cab .maquina,.caso-cab .titulo{grid-column:1}
.caso-cab .lado{grid-column:2;grid-row:2}
.carimbo{position:absolute;right:0;top:-24px;font:400 clamp(22px,3vw,40px)/1 var(--f-mega);color:#d2232a;border:4px solid #d2232a;padding:6px 14px;transform:rotate(8deg);opacity:.85;text-transform:uppercase;mix-blend-mode:screen}
.quadro{position:relative;aspect-ratio:16/10;background:#b89a6a;background-image:radial-gradient(#0000 60%,#0004),repeating-linear-gradient(45deg,#ffffff08 0 2px,#0000 2px 6px);
  box-shadow:inset 0 0 0 14px #5b3d22,inset 0 0 0 18px #3a2614,0 30px 60px #000a;overflow:hidden}
.mapa{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px)}
.tamisa{fill:none;stroke:#4f7e93;stroke-width:26;stroke-linecap:round;opacity:.75}
.rio{font:700 14px var(--f-mono);fill:#2f5566;letter-spacing:4px}
.area{font:700 15px var(--f-mono);paint-order:stroke;stroke:#b89a6a;stroke-width:5px;fill:#3a2a16;letter-spacing:2px;text-anchor:middle}
.linhas line{stroke:#d2232a;stroke-width:2.6;filter:drop-shadow(0 2px 1px #0006)}
.suspeito{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(-3deg);width:clamp(96px,11vw,150px);z-index:2;text-decoration:none;color:var(--tinta);transition:transform .25s}
.suspeito:nth-child(even){transform:translate(-50%,-50%) rotate(4deg)}
.suspeito:hover,.suspeito:focus-visible{transform:translate(-50%,-50%) rotate(0) scale(1.12);z-index:5}
.ficha{display:block;background:#f4efe3;padding:6px 6px 8px;box-shadow:0 10px 20px #0007}
.ficha img{width:100%;aspect-ratio:1;object-fit:cover;background:#fff;filter:contrast(1.05)}
.cargo{display:block;margin-top:6px;font:400 10px/1.1 var(--f-mega);text-transform:uppercase;color:#d2232a}
.nome{display:block;font:800 13px/1.1 var(--f-txt);text-transform:uppercase}
.visto{display:block;font:500 9px/1.3 var(--f-mono);color:#0009}
.valor{display:block;margin-top:4px;font:500 11px/1 var(--f-mono);background:var(--amarelo);padding:4px 5px}
.alfinete{position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff6b6b,#a1121a);box-shadow:0 3px 4px #0008;z-index:3}
.s0 .ficha{outline:3px solid #d2232a}
.caso-pe{margin-top:20px;text-align:center}
@media (max-width:760px){
  .caso-cab{grid-template-columns:1fr}.caso-cab .lado{grid-column:1;grid-row:auto}
  .quadro{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;padding:56px 20px 28px}
  .mapa{opacity:.45}
  .suspeito,.suspeito:nth-child(even){position:relative;left:auto;top:auto;transform:rotate(-2deg);width:auto;min-width:0}
  .ficha img{aspect-ratio:4/5}
  .s0{grid-column:1/-1;width:62%!important;justify-self:center}
  .suspeito:nth-child(even){transform:rotate(2deg)}
  .linhas{display:none}
}

/* ---------- compra rápida ---------- */
.rapida{position:fixed;inset:0;z-index:115;display:grid;place-items:center;padding:16px;pointer-events:none;opacity:0;transition:opacity .2s}
.rapida.ver{pointer-events:auto;opacity:1}
.rapida-caixa{position:relative;width:min(100%,920px);max-height:calc(100svh - 32px);overflow:auto;background:var(--asfalto-2);border:3px solid var(--amarelo);box-shadow:0 0 0 8px var(--tinta),0 30px 80px #000c}
.rapida .fechar{position:absolute;top:6px;right:6px;z-index:2;background:var(--tinta);color:var(--giz)}
.rapida-corpo{display:grid;grid-template-columns:1fr 1fr}
.rapida-fotos{display:grid;gap:4px;background:#fff}
.rapida-fotos img{width:100%;aspect-ratio:4/5;object-fit:cover}
.rapida-fotos img:nth-child(n+2){display:none}
.rapida-info{padding:28px 24px}
.rapida-info .titulo{font-size:clamp(28px,3.4vw,44px)}
.rapida-preco{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-size:24px}
.rapida-preco span{font:400 18px var(--f-mega);color:var(--amarelo)}
.rapida-desc{color:var(--giz-2);margin-top:12px}
.rapida .add{width:100%;justify-content:center;margin-top:20px}
.rapida .link-marcador{margin-top:16px;font-size:18px}
@media (max-width:700px){.rapida-corpo{grid-template-columns:1fr}.rapida-fotos img{aspect-ratio:1}}

/* ---------- pacote e order bump ---------- */
.pacote-pdp{margin-top:14px;padding:10px 12px;border-left:4px solid var(--amarelo);background:#ffe60014;font-size:15px}
.pacote-pdp b{color:var(--amarelo)}
.giria-desc{margin-top:14px;color:var(--giz-2);max-width:46ch}
.bump{margin-top:14px;padding:14px;border:2px dashed var(--amarelo);background:#ffe6000d}
.bump-tit{font:400 16px/1.1 var(--f-mega);text-transform:uppercase;color:var(--amarelo);margin-bottom:10px}
.bump-linha{display:flex;gap:12px;align-items:center}
.bump-linha img{width:56px;height:70px;object-fit:cover;background:#fff;flex:none}
.bump-linha b{display:block;font-size:14px;text-transform:uppercase}
.bump-linha span{display:block;font-size:13px;color:var(--giz-2)}
.bump-linha .bump-preco{color:var(--giz);font-family:var(--f-mono)}
.bump .btn-fita{width:100%;justify-content:center;margin-top:12px;min-height:48px}
.gaveta footer{max-height:62vh;overflow:auto}
/* vermelho-sangue: o brilho do neon vira sangue escorrido, mais denso e escuro */
.faixa-promo{animation-name:pisca-sangue}
@keyframes pisca-sangue{0%{background:var(--rosa);color:#fff}50%{background:var(--amarelo);color:var(--tinta)}}
.spray.rosa{text-shadow:0 0 14px var(--sangue-escuro),0 2px 0 var(--sangue-escuro)}
.drop-bloco{background:radial-gradient(circle at 80% 30%,#8a0a1c55,transparent 60%),var(--asfalto-2)}

/* ---------- rodada 3: sem ciano, sirene, cena do crime, dia mais street ---------- */
.msg .quem{color:var(--amarelo)}
.spray-dica{color:var(--amarelo)}
.promo.p2{border-color:var(--amarelo)}
/* sirene: giroflex vermelho e amarelo; pisca devagar (1 vez por segundo) e com luz suave */
.caso{overflow:hidden}
.caso::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;box-shadow:inset 0 0 120px 10px #d61a3255;animation:sirene-borda 1s steps(1) infinite}
@keyframes sirene-borda{50%{box-shadow:inset 0 0 120px 10px #ffe60040}}
.caso>*{position:relative;z-index:1}
.sirene{position:relative;z-index:3;width:220px;height:30px;margin:0 auto -6px;border-radius:14px 14px 4px 4px;background:#111;display:flex;overflow:visible;box-shadow:0 6px 14px #0009}
.sirene .luz{flex:1;margin:4px;border-radius:10px 10px 2px 2px;position:relative}
.sirene .v{background:#d61a32;animation:luz-v 1s steps(1) infinite}
.sirene .a{background:#ffe600;animation:luz-a 1s steps(1) infinite}
.sirene .luz::after{content:"";position:absolute;left:50%;top:50%;width:600px;height:600px;margin:-300px 0 0 -300px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 70deg,currentColor 80deg 100deg,transparent 110deg 250deg,currentColor 260deg 280deg,transparent 290deg);opacity:.16;animation:gira 1.6s linear infinite}
.sirene .v{color:#d61a32}.sirene .a{color:#ffe600}
.sirene .a::after{animation-direction:reverse}
@keyframes luz-v{0%{filter:brightness(1.4);box-shadow:0 0 30px 8px #d61a32}50%{filter:brightness(.5);box-shadow:none}}
@keyframes luz-a{0%{filter:brightness(.5);box-shadow:none}50%{filter:brightness(1.3);box-shadow:0 0 30px 8px #ffe600}}
.fita-crime{position:absolute;z-index:4;left:-10%;width:120%;background:var(--amarelo);color:var(--tinta);font:400 14px/1 var(--f-mega);padding:8px 0;white-space:nowrap;overflow:hidden;box-shadow:0 6px 12px #0007;pointer-events:none}
.fita-crime span{display:inline-block;animation:corre 22s linear infinite}
.fc1{top:6%;transform:rotate(-4deg)}
.fc2{bottom:7%;transform:rotate(3deg);background:var(--rosa);color:#fff}
.fc2 span{animation-direction:reverse}
.bilhete{position:absolute;z-index:3;background:#fff6a8;color:#222;font:400 18px/1.1 var(--f-spray);padding:10px 12px;box-shadow:0 6px 12px #0006;transform:rotate(-5deg);pointer-events:none}
.b1{right:4%;top:44%}.b2{left:3%;bottom:20%;transform:rotate(4deg)}
.lanterna{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle 190px at var(--mx,50%) var(--my,45%),transparent 0 60%,#000a 100%);transition:opacity .3s}
@media (hover:none){.lanterna{display:none}}
@media (max-width:760px){.fita-crime{font-size:11px}.bilhete{display:none}.sirene{width:160px}}
/* A day in a Mate, mais street */
.dia::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E")}
.hora{font-family:var(--f-spray);color:var(--amarelo);-webkit-text-stroke:0;text-shadow:0 0 18px #ffe60066,3px 3px 0 #0008;transform:rotate(-4deg);display:inline-block}
.placa{display:inline-flex;align-items:center;gap:10px;background:#f4f1ea;color:#111;border:3px solid #111;box-shadow:0 0 0 3px #f4f1ea,0 8px 14px #0007;padding:8px 12px;margin-bottom:12px}
.placa b{font:800 18px/1 var(--f-txt);letter-spacing:.04em}
.placa span{font:800 14px/1 var(--f-txt);color:#d61a32}
.frase-dia{font:400 clamp(18px,1.8vw,24px)/1.25 var(--f-txt);font-weight:700;color:#fff;max-width:26ch}
.peca span{color:var(--amarelo);margin-left:6px}
.momento-foto{position:relative}
.momento-foto .fita-prata{top:-10px;left:-18px}
.logo-mini{position:absolute;right:-10px;bottom:-10px;background:var(--amarelo);color:#111;font:400 18px/1 var(--f-lux);padding:4px 8px;transform:rotate(-6deg)}
/* pacote: barra de progresso fixa */
.pacote-barra{position:fixed;left:16px;bottom:16px;z-index:71;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:10px 14px;background:var(--rosa);color:#fff;
  font:800 13px/1.2 var(--f-txt);text-transform:uppercase;letter-spacing:.03em;box-shadow:0 10px 30px #0009;transform:rotate(-1deg);cursor:pointer}
.pacote-barra i{display:block;width:90px;height:8px;background:#0006;position:relative}
.pacote-barra i b{position:absolute;inset:0 auto 0 0;background:var(--amarelo)}
@media (max-width:860px){body.tem-pacote .aviso-gira{display:none}.pacote-barra{left:12px;right:12px;justify-content:space-between}}
.ganhou{font-size:clamp(34px,7.4vw,58px);line-height:1}.ganhou span{display:block}

/* ---------- 23/10/2026, pedido do Dario: logo branco no preto, topo com foto da coleção, spray mais vivo ---------- */
.logo{background:#0a0a0a;color:#fff;border:2px solid #fff;padding:7px 14px 6px;gap:10px;align-items:center;box-shadow:4px 4px 0 var(--amarelo)}
.logo-mate{font:900 26px/1 var(--f-txt);font-stretch:125%;letter-spacing:.04em;text-transform:uppercase}
.logo-ldn{font:800 11px/1 var(--f-txt);font-stretch:125%;letter-spacing:.32em;color:#fff;opacity:.9}
.logo:hover{transform:rotate(1deg) scale(1.04);box-shadow:6px 6px 0 var(--rosa)}
.logo-mini{background:#0a0a0a;color:#fff;font:900 16px/1 var(--f-txt);letter-spacing:.06em;border:2px solid #fff}
@media (max-width:640px){.logo-mate{font-size:20px}.logo-ldn{font-size:9px;letter-spacing:.24em}.logo{padding:6px 10px 5px}}

.hero-foto{overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{position:absolute;right:0;top:0;height:100%;width:58%;object-fit:cover;object-position:50% 30%;filter:saturate(1.08) contrast(1.06)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#141416 0%,#141416 40%,#141416d9 52%,#14141633 72%,#14141600 100%),linear-gradient(0deg,#141416 0%,#14141600 22%)}
.hero-foto .hero-txt{max-width:720px}
.hero-legenda{position:relative;align-self:end;justify-self:end;text-align:right;z-index:1;padding-bottom:8px}
.hero-legenda .hero-spray{display:none}
.hero-peca{font:700 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#fff;background:#000a;padding:8px 10px;display:inline-block;backdrop-filter:blur(4px)}
.hero-legenda .selo-giro,.hero-legenda [class*="sg-"]{position:absolute;right:0;top:-220px}
@media (max-width:860px){
  .hero-bg img{width:100%;object-position:50% 30%;opacity:.9}
  .hero-bg::after{background:linear-gradient(180deg,#141416f2 0%,#141416e0 38%,#14141680 58%,#14141633 74%,#141416 100%)}
  .hero-legenda{justify-self:start;text-align:left;margin-top:28px}
  .hero-legenda [class*="sg-"]{top:auto;bottom:-10px;right:-20px;transform:scale(.7)}
}

/* spray: dica em adesivo e cursor de lata no topo */
.spray-dica{background:var(--amarelo);color:#111;padding:8px 12px 6px;font-size:20px;box-shadow:3px 3px 0 #000;opacity:1;animation:dica 2.4s ease-in-out infinite}
.spray-dica b{display:inline-block;margin-left:6px;animation:seta 1.2s ease-in-out infinite}
@keyframes dica{50%{transform:rotate(1deg) scale(1.05)}}
@keyframes seta{50%{transform:translateY(5px)}}
@media (hover:hover){.hero-foto{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='14' y='12' width='14' height='24' rx='3' fill='%23ffe600' stroke='%23000' stroke-width='2'/%3E%3Crect x='17' y='7' width='8' height='6' rx='1' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='6' cy='6' r='2' fill='%23ffe600'/%3E%3Ccircle cx='10' cy='3' r='1.4' fill='%23ffe600'/%3E%3Ccircle cx='3' cy='11' r='1.2' fill='%23ffe600'/%3E%3C/svg%3E") 4 4,crosshair}}
@media (prefers-reduced-motion:reduce){.spray-dica,.spray-dica b{animation:none}}
.hero-foto .btn-spray{text-shadow:0 2px 0 #000,0 0 12px #000}.hero-foto .hero-sub{text-shadow:0 1px 8px #000c}

/* 25/10: sem tela de entrada e convite pequeno em vez de pop-up na chegada */
.intro{display:none!important}
.convite{position:fixed;left:12px;bottom:12px;z-index:60;max-width:340px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#111;color:#f4f1ea;border:2px solid var(--amarelo);padding:12px 14px;font:500 14px/1.35 var(--f-txt);box-shadow:4px 4px 0 #000;transform:translateY(140%);transition:transform .35s ease}
.convite.ver{transform:none}
.convite p{margin:0;flex:1 1 180px}
.convite-sim{background:var(--amarelo);color:#111;font-weight:800;padding:8px 12px}
.convite-x{position:absolute;top:2px;right:6px;font-size:18px;color:#f4f1ea}
/* 03/11: carrossel da peça (contador acima dos pontos) e carimbo do mapa sem cobrir o texto no celular */
.gal-conta{bottom:44px}
@media (max-width:860px){.caso .carimbo{position:static;display:inline-block;margin:0 0 14px;font-size:20px;border-width:3px;transform:rotate(-4deg)}}
.gal-gira{position:absolute;right:12px;bottom:44px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:#111;color:#ffe600;border:2px solid #ffe600;padding:8px 12px;font:800 13px/1 var(--f-mega,sans-serif);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;box-shadow:3px 3px 0 #ffe600}
.gal-gira span{font-size:18px}
.gal-gira[hidden]{display:none}
.galeria{transform-origin:50% 50%;backface-visibility:hidden}
.galeria img{cursor:zoom-in}
.gal-tela{position:fixed;inset:0;z-index:200;background:#fff;display:grid;place-items:center;overflow:hidden}
.gal-tela img{max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain;cursor:zoom-in;transition:transform .3s ease}
.gal-tela img.perto{transform:scale(2.4);cursor:zoom-out}
.gal-tela-x{position:fixed;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:2px solid #111;background:#ffe600;color:#111;font:700 28px/1 sans-serif;cursor:pointer;box-shadow:3px 3px 0 #111}
.gal-gira{top:12px;bottom:auto}
/* ---------- avaliações (só reais, de avaliacoes.json) ---------- */
.av-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;align-items:start}
.av-card{margin:0;background:var(--papel);color:var(--tinta);padding:22px;box-shadow:0 18px 40px #0008}
.av-card .av-foto{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;margin-bottom:16px}
.av-card blockquote{margin:0 0 14px;font-size:18px;line-height:1.45}
.av-card figcaption{font-size:14px;line-height:1.4}
.av-selo{display:inline-block;margin-left:8px;background:var(--amarelo);color:var(--tinta);padding:2px 8px;font-weight:700;font-size:12px;text-transform:uppercase}
.av-convite{border:3px dashed var(--amarelo);padding:28px 24px}
.av-convite h3{font:400 clamp(28px,4vw,44px)/1 var(--f-mega);text-transform:uppercase;margin:6px 0 12px}
.av-convite p{margin:0 0 18px;line-height:1.5}
/* 03/11: compra rápida com o mesmo carrossel da página da peça */
.rapida-fotos.galeria{display:flex;gap:0}
.rapida-fotos.galeria img,.rapida-fotos.galeria img:nth-child(n+2){display:block;flex:0 0 100%;object-fit:contain;background:#fff}
.rapida-fotos.galeria img[hidden]{display:none}
.rapida-corpo .gal-wrap{min-width:0}
.gal-etiqueta{position:absolute;left:12px;top:12px;z-index:2;background:#ffe600;color:#111;font:700 11px/1 monospace;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px}
.gal-etiqueta[hidden]{display:none}
.rapida-corpo .gal-gira{top:auto;bottom:44px}
/* ---------- galeria da peça, visual novo (03/11): miniaturas, barra, foto ativa animada ---------- */
.gal-wrap{--gal-ease:cubic-bezier(.22,1,.36,1)}
.galeria{background:#fff;border-radius:4px}
.galeria img{background:#fff;transform:scale(.92);opacity:.35;transition:transform .7s var(--gal-ease),opacity .5s var(--gal-ease)}
.galeria img.ativa{transform:scale(1);opacity:1}
.gal-barra{position:absolute;left:14px;right:14px;top:12px;height:3px;background:#1112;border-radius:3px;overflow:hidden;z-index:3;pointer-events:none}
.gal-barra i{display:block;height:100%;background:#111;transform-origin:left center;transform:scaleX(0);transition:transform .6s var(--gal-ease)}
.gal-barra[hidden]{display:none}
.gal-conta{left:auto;right:14px;top:26px;bottom:auto;background:#111c;color:#fff;font:600 11px/1 ui-monospace,monospace;letter-spacing:.08em;padding:7px 10px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gal-etiqueta{top:26px}
.gal-seta{width:44px;height:44px;border:0;background:#111c;color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s,transform .3s var(--gal-ease),background .2s}
.gal-wrap:hover .gal-seta:not(:disabled),.gal-seta:focus-visible{opacity:1}
.gal-wrap:hover .gal-seta:disabled{opacity:.25}
.gal-seta:hover:not(:disabled){background:var(--amarelo,#ffe600);color:#111}
.gal-seta.ant:hover:not(:disabled){transform:translateY(-50%) translateX(-3px)}
.gal-seta.prox:hover:not(:disabled){transform:translateY(-50%) translateX(3px)}
@media (hover:none){.gal-seta{display:none}}
.gal-gira{top:auto;bottom:14px;right:14px;border:0;border-radius:999px;background:#111c;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:9px 14px}
.gal-gira span{color:var(--amarelo,#ffe600);display:inline-block;transition:transform .5s var(--gal-ease)}
.gal-gira:hover span{transform:rotate(-180deg)}
.gal-miniaturas{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;scroll-behavior:smooth}
.gal-miniaturas::-webkit-scrollbar{display:none}
.gal-miniaturas button{flex:0 0 auto;width:62px;height:76px;border-radius:4px;padding:0;background:#fff;border:2px solid transparent;overflow:hidden;opacity:.55;transform:none;transition:opacity .3s,border-color .3s,transform .3s var(--gal-ease)}
.gal-miniaturas button img{width:100%;height:100%;object-fit:contain;display:block}
.gal-miniaturas button:hover{opacity:.9;transform:translateY(-2px)}
.gal-miniaturas button[aria-current=true]{opacity:1;border-color:var(--amarelo,#ffe600);transform:none;background:#fff}
.rapida-corpo .gal-miniaturas button{width:48px;height:58px}
@media (prefers-reduced-motion:reduce){.galeria img,.galeria img.ativa{transform:none;opacity:1;transition:none}.gal-barra i,.gal-miniaturas button,.gal-seta{transition:none}}
.rapida-corpo .gal-conta{right:auto;left:14px;top:auto;bottom:14px}
/* 03/11: compra rápida, tudo no topo da foto: giro à esquerda, contador antes do X, etiqueta abaixo do giro (nada sobre as miniaturas) */
.rapida-corpo .gal-gira{top:26px;bottom:auto;right:auto;left:14px}
.rapida-corpo .gal-conta{top:26px;bottom:auto;left:auto;right:72px}
.rapida-corpo .gal-etiqueta{top:76px}
/* 03/11: "Turn it" no topo da foto em todo lugar (embaixo cobria as miniaturas e no computador ficava fora da tela) */
.gal-gira{top:26px;bottom:auto;left:14px;right:auto}
.gal-etiqueta{top:76px}
/* ---------- página da peça animada (03/11) ---------- */
.pv-palavra{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.pv-letra{display:inline-block;will-change:transform}
@property --pv-marca{syntax:'<number>';inherits:false;initial-value:1}
.pv-preco{position:relative;z-index:0;padding:0 .15em}
.pv-preco::before{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.22em;background:var(--amarelo,#ffe600);z-index:-1;transform-origin:left center;transform:scaleX(var(--pv-marca,1)) skewX(-12deg)}
.pv-brilho{position:relative;overflow:hidden}
.pv-brilho::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(100deg,#fff0,#fff9,#fff0);transform:skewX(-20deg);animation:pv-brilho 3.6s ease-in-out 1.6s infinite;pointer-events:none}
@keyframes pv-brilho{0%{left:-60%}35%,100%{left:130%}}
.pv-voa{position:fixed;z-index:500;object-fit:contain;background:#fff;border-radius:8px;box-shadow:0 20px 40px #0008;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pv-brilho::after{animation:none;display:none}}
/* ---------- barra de compra fixa no celular (03/11) ---------- */
.barra-compra{display:none}
@media (max-width:860px){
  .barra-compra{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:104;align-items:center;gap:12px;padding:10px 10px 10px 16px;background:#111e;border:2px solid var(--amarelo,#ffe600);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateY(140%);transition:transform .45s cubic-bezier(.22,1,.36,1),bottom .3s}
  .barra-compra.ver{transform:none}
  .bc-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
  .bc-nome{font:800 13px/1.1 var(--f-mega,sans-serif);text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bc-preco{font:700 14px/1.1 ui-monospace,monospace;color:var(--amarelo,#ffe600)}
  .bc-add{flex:0 0 auto;min-height:48px;padding:0 18px;white-space:nowrap}
  .bc-chama{animation:bc-chama .6s ease-in-out 2}
}
@keyframes bc-chama{50%{box-shadow:0 0 0 4px var(--amarelo,#ffe600)}}
@media (prefers-reduced-motion:reduce){.barra-compra{transition:none}.bc-chama{animation:none}}
/* ---------- site todo mais vivo (03/11) ---------- */
.viva-progresso{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;background:var(--amarelo,#ffe600);transform-origin:left center;transform:scaleX(0);pointer-events:none}
@media (hover:none){
  .poster .foto .b{display:block;opacity:0;transition:opacity .45s}
  .poster.mostra-b .foto .b{opacity:1}
  .poster.mostra-b .foto .a{transform:scale(1.06)}
  .vibe img{transition:transform .8s cubic-bezier(.22,1,.36,1),filter .6s}
  .vibe.acesa img{filter:none;transform:scale(1.06)}
}
.viva{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,1,.36,1) var(--viva-atraso,0ms),transform .6s cubic-bezier(.22,1,.36,1) var(--viva-atraso,0ms)}
.viva.viva-ok{opacity:1;transform:none}
.poster .preco.viva{transform:translateY(10px) scale(.8)}
.poster .preco.viva.viva-ok{transform:none}
.vibe span.viva{transform:rotate(-2deg) translateX(-30px)}
.vibe span.viva.viva-ok{transform:rotate(-2deg)}
.av-convite .btn-fita{animation:viva-pulsa 2.8s ease-in-out 1s infinite}
@keyframes viva-pulsa{0%,100%{box-shadow:0 0 0 0 #ffe60000}50%{box-shadow:0 0 0 8px #ffe60033}}
@media (prefers-reduced-motion:reduce){.viva{opacity:1;transform:none;transition:none}.av-convite .btn-fita{animation:none}.viva-progresso{display:none}}
/* ---------- Worn on the street: quadros reais das gravações (03/11) ---------- */
.rua-trilho{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.rua-card{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#111;text-decoration:none}
.rua-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.rua-card:hover img{transform:scale(1.07)}
.rua-card span{position:absolute;left:10px;bottom:10px;background:var(--amarelo,#ffe600);color:var(--tinta,#111);font:800 12px/1 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px}
.rua-card:nth-child(odd){transform:translateY(18px)}
@media (max-width:860px){.rua-trilho{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:24px;scrollbar-width:none}.rua-trilho::-webkit-scrollbar{display:none}.rua-card{flex:0 0 66vw;scroll-snap-align:center}.rua-card:nth-child(odd){transform:none}}
/* ---------- história da marca (03/11) ---------- */
.historia-marca{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,72px);align-items:center}
.hm-foto{position:relative;transform:rotate(-2deg);background:var(--papel,#efe9dc);padding:12px 12px 44px;box-shadow:0 24px 50px #000a}
.hm-foto img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.hm-leg{position:absolute;left:14px;bottom:14px;font:600 12px/1 ui-monospace,monospace;color:var(--tinta,#111);text-transform:uppercase;letter-spacing:.06em}
.hm-txt p{line-height:1.6;margin:0 0 16px;max-width:56ch}
.hm-txt .titulo{margin:12px 0 20px}
.hm-lead{font-size:clamp(20px,2vw,26px);line-height:1.4 !important;color:#fff}
.hm-fecho{font-weight:800;color:var(--amarelo,#ffe600)}
@media (max-width:860px){.historia-marca{grid-template-columns:1fr}.hm-foto{max-width:420px}}
/* tocar na foto do cartaz vira a peça (celular, 03/11) */
.vira-dica{display:none}
@media (hover:none){
  .poster .foto .b{transition:none}
  .vira-dica{display:block;position:absolute;right:8px;top:8px;z-index:2;background:#111d;color:#fff;font:700 11px/1 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-radius:999px;pointer-events:none}
  .poster.mostra-b .vira-dica{background:var(--amarelo,#ffe600);color:#111}
}

/* 05/11: frete e prazo à vista logo abaixo do preço; selos de confiança reais (celular primeiro) */
.frete-pdp{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:.6rem 0 .2rem;padding:10px 12px;border:2px solid var(--amarelo,#ffe600);background:#ffe60014;font-size:.95rem;line-height:1.35}
.frete-pdp b{color:var(--amarelo,#ffe600);font-weight:800}
.frete-pdp span{opacity:.92}
.rapida-info .frete-pdp{font-size:.88rem}
.confia{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:6px;font-size:.88rem;opacity:.92}
.confia li{display:flex;gap:8px;align-items:flex-start}
.confia li::before{content:"";flex:0 0 16px;height:16px;margin-top:2px;background:var(--amarelo,#ffe600);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
#linha-frete small{opacity:.7;font-size:.8em;margin-left:4px}

/* 05/11 (Dario): home por categoria, celular primeiro */
.hero-pb .hero-bg img{filter:none;object-position:50% 40%}
.cat-bloco{padding-top:20px;padding-bottom:0}
.chips-cat{margin-top:0}
.vitrine{padding-top:clamp(40px,6vw,88px);padding-bottom:0}
.vitrine .lado{margin-top:8px}
.vitrine + .garantias{margin-top:clamp(48px,7vw,96px)}
@media (max-width:860px){
  .chips-cat{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:4px var(--gut) 8px;scroll-padding-left:var(--gut)}
  .chips-cat::-webkit-scrollbar{display:none}
  .chips-cat .chip{flex:0 0 auto;min-height:44px;font-size:13px;padding:0 16px}
  .trilho-cel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:10px var(--gut) 18px;scroll-padding-left:var(--gut)}
  .trilho-cel::-webkit-scrollbar{display:none}
  .trilho-cel .poster{flex:0 0 62%;scroll-snap-align:start}
  .vitrine .bloco-cab{margin-bottom:14px}
  .vitrine .titulo{font-size:clamp(30px,9vw,44px)}
  .hero-pb{min-height:0;padding-top:clamp(200px,58vw,320px)}
  .hero-pb .hero-bg img{opacity:1}
  .hero-pb .hero-bg::after{background:linear-gradient(180deg,#14141600 0%,#14141600 30%,#141416b3 55%,#141416 82%)}
}
@media (max-width:860px){
  .trilho-cel .poster{flex:0 0 44%;transform:none;padding:7px 7px 10px;box-shadow:0 10px 24px #0007}
  .trilho-cel .poster:hover{transform:none}
  .trilho-cel .fita-prata,.trilho-cel .vira-dica{display:none}
  .trilho-cel .poster .info{flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px}
  .trilho-cel .poster h3{font-size:12px}
  .trilho-cel .poster .preco{font-size:13px}
  .trilho-cel .poster .spray{font-size:19px;top:8px;left:-4px}
  .trilho-cel .poster .preco.viva{transform:none}
}
@media (max-width:640px){.menu a:nth-child(-n+2){display:none}.menu a:nth-child(3){display:inline-block;white-space:nowrap}}
/* 05/11: nome comprido (Mate Training Shorts) quebrava a palavra no meio; na página da peça o título cabe na coluna */
.pdp .mega.pequeno{font-size:clamp(34px,4.6vw,72px);overflow-wrap:normal;word-break:normal;hyphens:none}
/* 05/11: topo com 4 fotos trocando (crossfade de 20 s, 5 s cada) */
.hero-bg .roda img{opacity:0;animation:roda 20s linear infinite}
.hero-bg .r1 img{animation-delay:-1s}.hero-bg .r2 img{animation-delay:4s}.hero-bg .r3 img{animation-delay:9s}.hero-bg .r4 img{animation-delay:14s}
@keyframes roda{0%{opacity:0}5%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}}
.hero-pb .hero-bg .r1 img{object-position:65% 30%}.hero-pb .hero-bg .r3 img{object-position:70% 40%}
@media (prefers-reduced-motion:reduce){.hero-bg .roda img{animation:none}.hero-bg .r1 img{opacity:1}}

/* ============ 05/11: visual arredondado (Arquiteto: "muito quadrado") ============ */
:root{--raio:22px;--raio-p:14px}
/* botões: pílula, sem a borda rasgada */
.btn-fita{clip-path:none;border-radius:999px;transform:none;padding:0 28px;box-shadow:0 10px 30px #ffe60026}
.btn-fita:hover{transform:translateY(-2px) scale(1.02)}
.btn-fita:not(.cheio){box-shadow:none}
/* etiquetas e selos */
.tag-amarela{border-radius:999px;padding:9px 16px 8px;transform:none}
.logo{border-radius:14px;transform:none}
/* cartões de produto: cantos redondos, retos, sombra macia, sem fita prata */
.poster{border-radius:var(--raio);transform:none;padding:10px 10px 14px;box-shadow:0 14px 34px #0008;transition:transform .25s,box-shadow .25s}
.poster:hover{transform:translateY(-6px);box-shadow:0 22px 48px #000a}
.poster .foto{border-radius:var(--raio-p)}
.poster .info{padding:0 6px}
.fita-prata{display:none}
.poster .spray{left:8px;top:10px}
/* atalhos, tamanhos e cores */
.opcoes label{border-radius:999px;min-width:56px}
.opcoes input:checked+label{transform:none}
/* garantias e blocos */
.garantias{gap:12px}
.garantias>div{border-radius:var(--raio);border-top:0;box-shadow:inset 0 3px 0 var(--amarelo)}
.garantias>div:nth-child(2){box-shadow:inset 0 3px 0 var(--rosa)}
.av-convite{border-radius:var(--raio)}
/* página da peça, sacola e compra rápida */
.galeria{border-radius:var(--raio);overflow:hidden}
.galeria img{border-radius:0}
.gaveta{border-radius:var(--raio) 0 0 var(--raio)}
.item img{border-radius:12px}
.rapida-caixa{border-radius:28px;border-width:2px;box-shadow:0 30px 80px #000c}
.portao-caixa,.convite{border-radius:var(--raio)}
/* mapa da família */
.quadro{border-radius:28px;overflow:hidden}
.suspeito>*{border-radius:12px}
/* topo: foto com cantos no celular */
@media (max-width:860px){.trilho-cel .poster{border-radius:18px;padding:7px 7px 10px}.trilho-cel .poster .foto{border-radius:12px}}

/* ============ 05/11: pegada premium (Arquiteto) ============ */
/* cartão escuro e limpo, foto em fundo branco, tipografia mais fina */
.poster{background:linear-gradient(180deg,#26272b,#1d1e21);color:#f4f1ea;border:1px solid #ffffff14;padding:8px 8px 14px}
.poster:hover{border-color:#ffe60055}
.poster .foto{background:#f6f5f2}
.poster h3{font:700 13px/1.25 var(--f-txt);letter-spacing:.06em;text-transform:uppercase}
.poster .preco{font:500 14px/1 var(--f-mono);color:var(--amarelo)}
.poster .info{margin-top:12px}
/* selo do cartão: etiqueta pequena em vez do rabisco de spray */
.poster .spray{font:800 10px/1 var(--f-txt);letter-spacing:.12em;text-transform:uppercase;background:var(--amarelo);color:#111;padding:6px 10px;border-radius:999px;text-shadow:none;filter:none;transform:none;top:16px;left:16px;right:auto;bottom:auto;clip-path:none;animation:none}
.poster .spray.rosa{background:#fff}
/* cabeçalho de vidro */
.topo{background:color-mix(in srgb,#141416 70%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid #ffffff10}
/* atalhos de categoria */
.chip{border:1px solid #ffffff38;background:#ffffff08;font-weight:700;letter-spacing:.04em}
.chip:hover{background:var(--amarelo);border-color:var(--amarelo)}
/* página da peça: caixas arredondadas e suaves */
.pacote-pdp{border-radius:16px}
.compra .btn-fita{width:100%;justify-content:center}
.barra-compra,.compra-fixa{border-radius:20px}
/* botão do topo não quebra linha no celular */
@media (max-width:640px){.hero .btn-fita{font-size:13px;padding:0 22px;white-space:nowrap;gap:10px;min-height:54px}}
.frete-pdp{border-radius:16px}
.barra-compra{border-radius:22px;border-width:1px;overflow:hidden;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.barra-compra .bc-add{border-radius:999px;clip-path:none}
.gal-conta,.vira-dica{border-radius:999px}
.poster .spray.rosa{background:#111;color:#fff}
.trilho-cel .poster .spray{font-size:9px;top:12px;left:12px;padding:5px 8px;letter-spacing:.1em}
/* 05/11: sacola arredondada */
.qtd button{border-radius:999px;border-width:1px}
.bump{border-radius:20px;border-style:solid;border-width:1px;border-color:#ffe60066}
.bump img{border-radius:12px}
.gaveta header{border-bottom-width:1px}
/* 05/11: bolinhas de cor embaixo de cada peça */
.cores-poster{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 6px 0}
.cor-ponto{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px #ffffff40,inset 0 0 0 1px #0003;cursor:pointer;transition:transform .15s,box-shadow .15s}
.cor-ponto:hover,.cor-ponto.ativa{transform:scale(1.18);box-shadow:0 0 0 2px #1d1e21,0 0 0 3.5px var(--amarelo)}
.cor-mais{font:600 11px/1 var(--f-mono);color:var(--giz-2)}
@media (max-width:860px){.cores-poster{gap:6px;padding:8px 4px 0}.cor-ponto{width:14px;height:14px}}