/* Caveira Store 2026 · base (das telas do card #16) */
:root{
  --preto:#0a0a0a; --carvao:#151515; --grafite:#1f1f1f; --linha:#2e2e2e;
  --osso:#ece5d3; --prata:#a9a9a9; --sangue:#b3121b; --sangue-h:#d21a24; --latao:#b08d57; --ok:#4fbf6a;
  --f-rock:'Pirata One',serif; --f-tit:'Oswald',sans-serif; --f-txt:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--preto);color:var(--osso);font:15px/1.6 var(--f-txt);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.c{max-width:1240px;margin:0 auto;padding:0 16px}
.rock{font-family:var(--f-rock);font-weight:400;letter-spacing:.01em}
h1,h2,h3{font-family:var(--f-tit);text-transform:uppercase;letter-spacing:.04em;line-height:1.1;margin:0}
.muted{color:var(--prata)}

/* faixa e cabeçalho */
.faixa{background:var(--sangue);color:#fff;text-align:center;font:600 12px var(--f-txt);letter-spacing:.06em;text-transform:uppercase;padding:7px 16px}
.topo{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--linha)}
.topo .c{display:flex;align-items:center;gap:20px;height:68px}
.logo{font:34px/1 var(--f-rock);color:#fff;white-space:nowrap}
.logo span{color:var(--sangue)}
.menu{display:flex;gap:22px;font:500 14px var(--f-tit);text-transform:uppercase;letter-spacing:.1em;color:var(--prata);margin-left:12px}
.menu a:hover,.menu a.on{color:#fff}
.menu a.on{box-shadow:inset 0 -2px 0 var(--sangue);padding-bottom:4px}
.icones{margin-left:auto;display:flex;gap:6px;align-items:center}
.ic{width:40px;height:40px;display:grid;place-items:center;border-radius:2px;color:var(--osso);position:relative}
.ic:hover{background:var(--grafite)}
.ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.ic b{position:absolute;top:4px;right:2px;background:var(--sangue);color:#fff;font:700 10px var(--f-txt);border-radius:9px;min-width:17px;height:17px;display:grid;place-items:center}
.burger{display:none}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--sangue);color:#fff;font:700 15px var(--f-tit);text-transform:uppercase;letter-spacing:.12em;padding:14px 26px;border:0;border-radius:2px;cursor:pointer}
.btn:hover{background:var(--sangue-h)}
.btn.osso{background:transparent;color:var(--osso);box-shadow:inset 0 0 0 1px var(--osso)}
.btn.osso:hover{background:var(--osso);color:var(--preto)}
.btn.full{width:100%}

/* títulos de seção */
.sec{padding:56px 0}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-h h2{font-size:clamp(22px,3vw,30px)}
.sec-h h2 small{display:block;font:400 14px var(--f-txt);text-transform:none;letter-spacing:0;color:var(--prata);margin-top:6px}
.sec-h a{font:500 13px var(--f-tit);text-transform:uppercase;letter-spacing:.1em;color:var(--prata);white-space:nowrap}
.sec-h a:hover{color:#fff}
.risco{height:2px;width:56px;background:var(--sangue);margin:10px 0 0}

/* card de produto */
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.p{position:relative;display:flex;flex-direction:column}
.p .foto{position:relative;aspect-ratio:1/1;background:var(--carvao);overflow:hidden;border-radius:2px}
.p .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.p:hover .foto img{transform:scale(1.05)}
.selo{position:absolute;top:10px;left:10px;background:var(--sangue);color:#fff;font:700 11px var(--f-tit);letter-spacing:.12em;text-transform:uppercase;padding:3px 8px}
.selo.lat{background:var(--latao);color:#111}
.p .add{position:absolute;left:10px;right:10px;bottom:10px;opacity:0;transform:translateY(8px);transition:.25s;padding:11px}
.p:hover .add{opacity:1;transform:none}
.p .info{padding:12px 2px 0}
.p .cat{font:500 11px var(--f-tit);letter-spacing:.14em;text-transform:uppercase;color:var(--prata)}
.p h3{font:500 15px/1.35 var(--f-txt);text-transform:none;letter-spacing:0;margin:4px 0 8px;color:var(--osso)}
.preco{font:700 19px var(--f-tit);color:#fff;letter-spacing:.02em;white-space:nowrap}
.preco s{font:400 13px var(--f-txt);color:var(--prata);margin-right:6px}
.parc{font-size:12px;color:var(--prata)}
.cores{display:flex;gap:5px;margin-top:8px}
.cores i{width:12px;height:12px;border-radius:50%;border:1px solid #555}

/* garantias */
.garantias{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.garantias div{display:flex;gap:12px;align-items:center;padding:20px 16px;border-right:1px solid var(--linha)}
.garantias div:last-child{border-right:0}
.garantias svg{width:30px;height:30px;stroke:var(--sangue);fill:none;stroke-width:1.5;flex:none}
.garantias b{display:block;font:500 14px var(--f-tit);text-transform:uppercase;letter-spacing:.08em;color:#fff}
.garantias span{font-size:12px;color:var(--prata)}

/* rodapé */
.rodape{background:#060606;border-top:1px solid var(--linha);margin-top:40px;padding:48px 0 24px;font-size:14px;color:var(--prata);
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px)}
.rodape .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:32px}
.rodape h4{font:500 14px var(--f-tit);text-transform:uppercase;letter-spacing:.12em;color:#fff;margin:0 0 12px}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin:6px 0}
.rodape a:hover{color:#fff}
.news{display:flex;margin-top:10px}
.news input{flex:1;min-width:0;background:var(--carvao);border:1px solid var(--linha);color:var(--osso);padding:12px;font:14px var(--f-txt)}
.news .btn{padding:12px 16px;font-size:13px}
.pags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pags span{border:1px solid var(--linha);padding:4px 10px;font:600 12px var(--f-txt);color:var(--osso)}
.copy{border-top:1px solid var(--linha);margin-top:36px;padding-top:18px;font-size:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:1000px){
  .grade{grid-template-columns:repeat(3,1fr)}
  .rodape .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .menu{display:none}
  .burger{display:grid}
  .topo .c{height:58px;gap:8px}
  .logo{font-size:28px}
  .ic.so-pc{display:none}
  .grade{grid-template-columns:repeat(2,1fr);gap:12px}
  .p .add{display:none}
  .p h3{font-size:13px}
  .preco{font-size:17px}
  .garantias{grid-template-columns:1fr 1fr}
  .garantias div:nth-child(2){border-right:0}
  .garantias div:nth-child(-n+2){border-bottom:1px solid var(--linha)}
  .sec{padding:40px 0}
  .rodape .cols{grid-template-columns:1fr}
}

/* home */
.hero{position:relative;min-height:min(78vh,640px);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--linha);
 background:radial-gradient(ellipse at 72% 50%,#2a0b0d 0,#0a0a0a 58%)}
.hero .c{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;width:100%}
.hero .kick{font:500 13px var(--f-tit);letter-spacing:.24em;text-transform:uppercase;color:var(--sangue-h)}
.hero h1{font:clamp(52px,8vw,104px)/.92 var(--f-rock);text-transform:none;letter-spacing:0;color:#fff;margin:14px 0 18px}
.hero p{max-width:440px;color:var(--prata);font-size:17px;margin:0 0 28px}
.hero .acoes{display:flex;gap:12px;flex-wrap:wrap}
.hero .arte{position:relative;aspect-ratio:1/1;max-width:520px;justify-self:end;width:100%}
.hero .arte img{width:88%;height:88%;object-fit:cover;position:relative;z-index:1;border:1px solid #333}
.hero .arte:before{content:'';position:absolute;left:12%;top:12%;width:88%;height:88%;background:var(--sangue);z-index:0}
.hero .etiqueta{position:absolute;left:-4%;bottom:18%;background:var(--preto);border:1px solid var(--linha);padding:12px 16px}
.hero .etiqueta b{display:block;font:700 22px var(--f-tit);color:#fff}.hero .etiqueta span{font-size:12px;color:var(--prata)}
.ruido{position:absolute;inset:0;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")}
.trilho{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#333 transparent}
.trilho>*{scroll-snap-align:start}
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cat-b{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--carvao);border:1px solid var(--linha)}
.cat-b img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:.4s;filter:grayscale(.3)}
.cat-b:hover img{opacity:.8;transform:scale(1.04)}
.cat-b span{position:absolute;left:14px;bottom:14px;font:500 22px var(--f-tit);text-transform:uppercase;letter-spacing:.08em;color:#fff}
.cat-b span small{display:block;font:400 12px var(--f-txt);letter-spacing:0;text-transform:none;color:var(--osso)}
.cat-b:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.85))}
.cat-b span{z-index:1}
.manifesto{position:relative;text-align:center;padding:80px 16px;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);overflow:hidden;
 background:repeating-linear-gradient(115deg,rgba(255,255,255,.015) 0 2px,transparent 2px 7px),#0d0d0d}
.manifesto h2{font:clamp(40px,6vw,76px)/1 var(--f-rock);text-transform:none;letter-spacing:0;color:#fff}
.manifesto p{max-width:560px;margin:16px auto 0;color:var(--prata)}
.provas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prova{background:var(--carvao);border:1px solid var(--linha);padding:22px}
.prova .ph{aspect-ratio:1/1;background:#1b1b1b;display:grid;place-items:center;color:#555;font-size:12px;margin-bottom:14px;text-align:center;padding:12px}
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post .ph{aspect-ratio:16/10;background:linear-gradient(135deg,#1a1a1a,#262626);margin-bottom:12px;display:grid;place-items:center}
.post .ph svg{width:46px;height:46px;stroke:#3a3a3a;fill:none;stroke-width:1.2}
.post .cat{font:500 11px var(--f-tit);letter-spacing:.14em;text-transform:uppercase;color:var(--sangue-h)}
.post h3{font:500 17px/1.3 var(--f-tit);margin:6px 0}
@media (max-width:1000px){.cats{grid-template-columns:repeat(3,1fr)}.trilho{grid-auto-columns:calc((100% - 40px)/3)}}
@media (max-width:760px){.hero .c{grid-template-columns:1fr}.hero .arte{order:-1;max-width:340px;justify-self:center;margin-top:16px}.hero{min-height:0;padding:8px 0 40px}
.trilho{grid-auto-columns:46%;gap:12px}.cats{grid-template-columns:repeat(2,1fr)}.cats a:last-child{grid-column:span 2;aspect-ratio:2/1}.provas,.blog{grid-template-columns:1fr}.hero .etiqueta{right:0;bottom:4%}}

/* logo em SVG (card #45; caveira escorrendo do card #57) */
.logo{display:flex;align-items:center;line-height:0}
.logo img{height:52px;width:auto}
.logo-rod img{height:60px}
@media (max-width:900px){.topo .logo img{height:40px}}

/* banner rotativo da home (card #45) */
.hero .vitrine .slides{position:absolute;inset:0}
.hero .vitrine .slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.hero .vitrine .slide.on{opacity:1;visibility:visible;transition:opacity .6s ease}
.hero .vitrine .slide img{width:88%;height:88%;object-fit:cover;position:relative;z-index:1;border:1px solid #333;background:var(--carvao)}
.hero .vitrine .etiqueta{z-index:2;max-width:70%}
.hero .vitrine .etiqueta span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero .vitrine .seta{position:absolute;z-index:3;top:44%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--linha);background:rgba(10,10,10,.82);color:var(--osso);cursor:pointer;padding:0;border-radius:2px}
.hero .vitrine .seta:hover,.hero .vitrine .seta:focus-visible{background:var(--sangue);border-color:var(--sangue);color:#fff}
.hero .vitrine .seta svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.hero .vitrine .ant{left:-22px}.hero .vitrine .prox{right:calc(12% - 22px)}
.hero .vitrine .pontos{position:absolute;z-index:3;left:12%;right:0;bottom:-2px;display:flex;justify-content:center;gap:6px}
.hero .vitrine .pontos button{width:24px;height:24px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.hero .vitrine .pontos button:after{content:'';width:8px;height:8px;background:var(--prata);opacity:.5;transition:all .2s}
.hero .vitrine .pontos button[aria-current]:after{background:var(--sangue-h);opacity:1;width:20px}
@media (max-width:760px){.hero .vitrine .ant{left:-8px}.hero .vitrine .prox{right:calc(12% - 8px)}.hero .vitrine .pontos{bottom:-30px;left:0}.hero .vitrine{margin-bottom:28px}}
@media (prefers-reduced-motion:reduce){.hero .vitrine .slide,.hero .vitrine .slide.on{transition:none}}

.manifesto .kick{margin-bottom:14px;font:500 13px var(--f-tit);letter-spacing:.24em;text-transform:uppercase;color:var(--sangue-h)}
.numeros{display:flex;justify-content:center;gap:clamp(20px,5vw,64px);margin-top:34px;flex-wrap:wrap}
.numeros b{display:block;font:clamp(30px,4vw,46px)/1 var(--f-rock);color:#fff}
.numeros span{font-size:12px;color:var(--prata);text-transform:uppercase;letter-spacing:.08em}