/* Errô Neo: muro cinza, preto de verdade e tinta só onde o spray passou */
:root {
  --muro: #2b2c2e;
  --muro-fundo: #232426;
  --preto: #000;
  --giz: #f1ece0;
  --giz-2: #c4c0b6;
  --amarelo: #ffc33b;
  --tinta: var(--amarelo);
  --margem: 16px;
  --titulo: "Big Shoulders Stencil", "Archivo Narrow", sans-serif;
  --tag: "Sedgwick Ave Display", cursive;
  --texto: "Archivo Narrow", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--muro) url(img/concreto.webp);
  color: var(--giz);
  font: 400 18px/1.45 var(--texto);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }
section { position: relative; padding: 72px var(--margem); scroll-margin-top: 56px; }
section > *:not(.muro) { position: relative; z-index: 1; }
h2 { font: 800 clamp(48px, 9vw, 96px)/.95 var(--titulo); letter-spacing: .01em; }

/* Frases no muro: preto em cima do cinza, sem disputar com a leitura */
.muro { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: #000; opacity: .42; user-select: none; }
.muro span { position: absolute; line-height: 1; white-space: nowrap; }
.tag { font-family: var(--tag); font-size: clamp(34px, 7vw, 76px); }
.stencil { font-family: var(--titulo); font-weight: 800; font-size: clamp(40px, 8vw, 92px); }
.f1 { top: 12px; right: -8px; transform: rotate(-3deg); }
.f2 { bottom: 26%; right: -4px; transform: rotate(2deg); }
.f3 { bottom: 3%; right: 4px; transform: rotate(-2deg); }
.f4 { top: 90px; right: -1%; transform: rotate(-2deg); }
.f5 { top: 19%; left: 2%; transform: rotate(4deg); }
.f6 { top: 34%; right: 2%; transform: rotate(2deg); }
.f7 { top: 52%; left: 8%; transform: rotate(-3deg); }
.f8 { top: 68%; right: 3%; transform: rotate(3deg); }
.f9 { top: 85%; left: 1%; transform: rotate(-2deg); }
.f10 { top: 8%; right: 1%; transform: rotate(3deg); }
.f11 { bottom: 8%; left: 2%; transform: rotate(-2deg); }
.f12 { top: 12%; left: 3%; transform: rotate(-4deg); }
.f13 { bottom: 10%; right: 2%; transform: rotate(2deg); }

/* Topo */
.topo { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px var(--margem); background: var(--preto); }
.topo-logo img { width: 52px; }
.menu { display: none; gap: 28px; font-weight: 600; }
.menu a, .topo-whats { text-decoration: none; }
.menu a:hover { color: var(--amarelo); }
.topo-whats { padding: 8px 14px; border: 2px solid var(--giz); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.topo-whats:hover { background: var(--giz); color: var(--preto); }

/* Botões */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border: 3px solid var(--giz); color: var(--giz); font-weight: 700; font-size: 19px; text-decoration: none; }
.btn:hover { background: var(--giz); color: var(--preto); }
.btn-tinta { background: var(--amarelo); border-color: var(--amarelo); color: var(--preto); }
.btn-tinta:hover { background: var(--giz); border-color: var(--giz); }

/* Capa */
.capa { display: grid; gap: 8px; padding-top: 32px; padding-bottom: 0; overflow: hidden; }
.capa h1 img { width: min(70vw, 300px); }
.capa-frase { margin-top: 22px; font: 400 clamp(30px, 8vw, 46px)/1.08 var(--tag); }
.capa-sub { margin-top: 12px; max-width: 34ch; color: var(--giz-2); }
.capa .botoes { margin-top: 24px; }
.capa-personagem { position: relative; aspect-ratio: 706 / 1100; width: min(100%, 460px); margin: 24px auto 0; }
.capa-personagem img { width: 100%; height: 100%; }

/* A foto e a tela do spray. A tela é mais alta que a foto: a sobra de baixo é onde a tinta escorre */
.foto { position: relative; aspect-ratio: 4 / 5; background: var(--muro-fundo); }
.foto img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.espera > img { visibility: hidden; }
.spray-tela { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 109.87%; pointer-events: none; }
.escorrido { z-index: 0; top: 100%; height: 9.87%; }

/* Catálogo */
.filtros { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; margin: 24px calc(var(--margem) * -1) 32px; padding: 10px var(--margem); background: var(--muro); }
.filtro { min-height: 44px; padding: 8px 18px; border: 2px solid var(--giz); background: none; color: var(--giz); font: 700 18px var(--texto); cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--giz); color: var(--preto); }
.grade { display: grid; gap: 56px 24px; }
.card { display: flex; flex-direction: column; }
.card[hidden] { display: none; }
.card h3 { margin-top: 44px; font: 800 30px/1.02 var(--titulo); letter-spacing: .01em; }
.preco { margin-top: 6px; color: var(--giz-2); }
.card-cores { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 8px; }
.cores { display: flex; gap: 2px; }
.cor { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.cor::before { content: ""; width: 28px; height: 28px; border: 2px solid var(--giz); background: var(--amostra); }
.cor[aria-pressed="true"]::before { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.cor-nome { margin-bottom: 12px; color: var(--giz-2); font-size: 16px; }
.preco { margin-bottom: 12px; }
.card-cores + .cor-nome { margin-top: -4px; }
.btn-quero { width: 100%; margin-top: auto; background: var(--giz); border-color: var(--giz); color: var(--preto); }
.btn-quero:hover { background: var(--tinta); border-color: var(--tinta); }

/* Tinta de cada coleção e amostra de cada cor */
.t-amarelo { --tinta: #ffc33b; }
.t-magenta { --tinta: #e0457b; }
.t-verde { --tinta: #5fe06c; }
.t-azul { --tinta: #35b5ff; }
.t-laranja { --tinta: #ff7a3d; }
.t-rosa { --tinta: #ff6eb0; }
.c-amarelo { --amostra: #f3aa1f; }
.c-preto { --amostra: #131210; }
.c-offwhite { --amostra: #e6d8c4; }
.c-navy { --amostra: #1a2540; }
.c-brown { --amostra: #51311c; }
.c-lavanda { --amostra: #b09bc4; }
.c-bordo { --amostra: #631e2e; }
.c-azul { --amostra: #0064e6; }
.c-verde { --amostra: #045e41; }
.c-sand { --amostra: #d4b192; }

/* Monte a sua, no meio da página */
.chamada { background: var(--amarelo); color: var(--preto); }
.chamada p { max-width: 46ch; margin-top: 12px; font-size: 20px; }
.chamada .botoes { margin-top: 24px; }
.chamada .btn { border-color: var(--preto); color: var(--preto); }
.chamada .btn-tinta { background: var(--preto); color: var(--giz); }
.chamada .btn:hover { background: var(--giz); border-color: var(--giz); color: var(--preto); }

/* Na rua */
.rua-faixa { display: flex; gap: 12px; margin: 24px calc(var(--margem) * -1) 0; padding: 0 var(--margem) 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.rua-faixa li { flex: 0 0 auto; scroll-snap-align: center; }
.rua-faixa img { width: auto; height: 360px; }

/* A camiseta */
.medidas-corpo { display: grid; gap: 32px; margin-top: 24px; }
.detalhes { margin: 0; }
.detalhes dt { margin-top: 16px; font-weight: 700; font-size: 20px; }
.detalhes dt:first-child { margin-top: 0; }
.detalhes dd { margin: 0; color: var(--giz-2); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { margin-bottom: 8px; text-align: left; color: var(--giz-2); }
th, td { padding: 10px 6px; border-bottom: 2px solid #55565a; text-align: center; }
tbody th { text-align: left; font-weight: 600; }

/* Sobre */
.sobre { display: grid; gap: 32px; background: var(--preto); }
.sobre p { max-width: 42ch; margin-top: 14px; }
.link { display: inline-block; margin-top: 14px; padding: 10px 0; color: var(--amarelo); font-weight: 700; }
.figurinhas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: center; }
.figurinhas li:nth-child(odd) { transform: rotate(-4deg); }
.figurinhas li:nth-child(even) { transform: rotate(3deg); }

/* Como comprar */
.comprar ol { display: grid; gap: 20px; margin-top: 24px; counter-reset: passo; }
.comprar li { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; font-size: 20px; counter-increment: passo; }
.comprar li::before { content: counter(passo); font: 800 44px/1 var(--titulo); color: var(--amarelo); }

/* Fim */
.fim { padding-top: 96px; padding-bottom: 96px; overflow: hidden; text-align: center; }
.fim-frase { font: 400 clamp(40px, 9vw, 84px)/1.05 var(--tag); margin-bottom: 28px; }
.rodape { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--margem); background: var(--preto); }
.rodape img { width: 52px; }
.rodape a { display: inline-block; padding: 12px 0; }

/* WhatsApp flutuante */
.whats-flutuante { position: fixed; right: 16px; bottom: 16px; z-index: 5; display: inline-flex; align-items: center; min-height: 52px; padding: 12px 18px; background: var(--amarelo); color: var(--preto); font-weight: 700; text-decoration: none; transition: transform .2s; }
.whats-flutuante.escondido { transform: translateY(90px); visibility: hidden; }

@media (min-width: 600px) {
  :root { --margem: 32px; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .rua-faixa img { height: 420px; }
  .medidas-corpo { grid-template-columns: 1fr 1fr; gap: 48px; }
  .figurinhas { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1000px) {
  :root { --margem: 56px; }
  .menu { display: flex; }
  .capa { grid-template-columns: 1.15fr 1fr; align-items: end; min-height: calc(100svh - 76px); }
  .capa-texto { align-self: center; padding-bottom: 32px; }
  .capa h1 img { width: min(22vw, 34svh, 320px); }
  .capa-personagem { justify-self: end; width: auto; height: min(calc(100svh - 104px), 760px); margin: 0; }
  .grade { grid-template-columns: repeat(3, 1fr); gap: 72px 32px; }
  .chamada { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 12px 56px; }
  .chamada h2 { grid-row: span 2; }
  .rua-faixa { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 24px 0 0; padding: 0; }
  .rua-faixa img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
  .sobre { grid-template-columns: 1fr 1.3fr; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .whats-flutuante { transition: none; }
}

/* Monte a sua */
.pagina-monte { padding-bottom: 150px; }
.monte { padding: 20px var(--margem) 0; }
.monte h1 { font: 800 clamp(44px, 8vw, 80px)/.95 var(--titulo); }
.abas, .lados { display: flex; gap: 8px; }
.abas { margin-top: 14px; }
.palco { position: sticky; top: 0; z-index: 2; margin: 14px calc(var(--margem) * -1) 0; padding: 8px var(--margem) 10px; background: var(--muro) url(img/concreto.webp); }
.lados { justify-content: center; margin-bottom: 8px; }
.pagina-monte[data-peca="ecobag"] .lados, .pagina-monte[data-peca="ecobag"] .monte-cores { display: none; }
.pecas { display: grid; justify-items: center; }
.peca { position: relative; display: none; width: min(100%, 30svh, 340px); aspect-ratio: 400 / 440; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.peca.ativa { display: block; }
.peca[hidden] { display: none; }
div.peca { cursor: default; }
.peca svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pano { fill: var(--pano, #131210); stroke: var(--traco, #000); stroke-width: 5; stroke-linejoin: round; }
.ecobag .pano { fill: #eadfca; stroke: #000; }
.dobra { fill: #000; opacity: .13; }
.dentro { fill: #000; opacity: .45; stroke: var(--traco, #000); stroke-width: 3; }
.etiqueta { fill: #000; stroke: #fff; stroke-width: 1; }
.costura { fill: none; stroke: var(--traco, #000); stroke-width: 2.5; stroke-linecap: round; opacity: .75; }
.ecobag .costura { stroke: #000; }
.alca { fill: none; stroke: #0a0a0a; stroke-width: 24; stroke-linecap: butt; }

/* A caixa da estampa: a mesma medida pra toda arte */
.estampa { position: absolute; left: 30.75%; top: 21%; width: 38.5%; height: 40%; display: block; }
.peca[data-lado="costas"] .estampa { top: 17%; }
.ecobag .estampa { left: 25%; top: 39%; width: 50%; height: 48%; }
.estampa img { width: 100%; height: 100%; object-fit: contain; }
.estampa:empty { outline: 2px dashed var(--traco, #000); outline-offset: -2px; opacity: .55; }
.ecobag .estampa:empty { outline-color: #000; }

.controles { margin-top: 18px; }
.controles h2 { font-size: 30px; }
.monte-cores { margin-bottom: 22px; }
.monte-cores .cores { margin-top: 6px; }
.monte-cores .cor-nome { margin: 0; }
.aviso { margin-top: 4px; color: var(--giz-2); }
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.arte { position: relative; aspect-ratio: 1; min-height: 44px; padding: 6px; border: 2px solid #55565a; background: var(--muro-fundo); color: var(--giz); cursor: pointer; }
.arte img { width: 100%; height: 100%; object-fit: contain; }
.arte span { position: absolute; left: 0; bottom: 0; padding: 0 5px; background: #000; font-size: 14px; font-weight: 700; }
.arte[aria-pressed="true"] { border-color: var(--amarelo); outline: 2px solid var(--amarelo); }
.sem-arte { font: 700 16px/1.1 var(--texto); }
.pedido { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 6px; padding: 10px var(--margem) 12px; background: var(--preto); }
.resumo-texto { font-size: 16px; line-height: 1.25; }
.pedido .preco { margin: 0; font-size: 15px; }
.pedir { width: 100%; }
.pedir[aria-disabled="true"] { background: #55565a; border-color: #55565a; color: var(--giz-2); cursor: not-allowed; }
.sem-js { margin-top: 16px; }

@media (min-width: 1000px) {
  .pagina-monte { padding-bottom: 40px; }
  .monte-topo { display: flex; align-items: end; justify-content: space-between; }
  .bancada { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 18px; }
  .palco { top: 16px; margin: 0; padding: 0; background: none; }
  .lados { justify-content: flex-start; }
  .pecas { grid-template-columns: 1fr 1fr; gap: 16px; }
  .peca { display: block; width: 100%; }
  button.peca.ativa::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -14px; height: 6px; background: var(--amarelo); }
  .peca.ecobag { grid-column: 1 / -1; width: min(70%, 62svh); }
  .controles { margin-top: 0; }
  .galeria { grid-template-columns: repeat(5, 1fr); }
  .pedido { position: sticky; bottom: 0; grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin: 24px calc(var(--margem) * -1) -40px; }
  .pedir { width: auto; }
}

.nao-achei { display: grid; gap: 16px; justify-items: start; padding: 72px var(--margem); }
.nao-achei h1 { font: 800 clamp(44px, 9vw, 88px)/.95 var(--titulo); }