/* Pecas que se repetem pelo site: texturas, monograma, titulos de secao e lema.

   No site de origem os titulos, os botoes e o lema eram IMAGENS prontas, com o
   nome e o emblema do tatuador desenhados nelas. Aqui tudo virou texto de
   verdade, montado com as texturas abaixo: troca-se o texto no index.html ou no
   dados.js e o desenho acompanha. */

/* ---------- texturas (SVG embutido, nenhum arquivo a baixar) ---------- */
:root{
  /* granulado: mascara que abre furinhos no texto, efeito de tinta gasta */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 0 0 0 2.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* ruido de papel: camada de fundo cinza, para superficies cor de osso */
  --ruido:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .06 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* pincelada reta, bordas rasgadas e fiapos na ponta (botoes e faixas) */
  --pincel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 160' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-8%25' y='-30%25' width='116%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .14' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='20' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M34 18 L584 12 L560 146 L12 150 Z'/%3E%3Cpath d='M548 20 L598 22 L597 34 L552 33 Z' opacity='.7'/%3E%3Cpath d='M540 118 L590 112 L588 124 L542 128 Z' opacity='.6'/%3E%3Cpath d='M2 60 L40 58 L40 68 L4 70 Z' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  /* pincelada inclinada, para o texto preto do botao "derrubar" */
  --pincel-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-8%25' y='-30%25' width='116%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .1' numOctaves='3' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='26' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M30 30 C140 14 290 12 392 22 L380 132 C270 150 130 150 10 140 Z'/%3E%3C/svg%3E");
  /* golpe diagonal, afinando nas pontas (atras dos titulos) */
  --golpe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-40%25' width='110%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .2' numOctaves='3' seed='6'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='16' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M0 96 C120 70 300 40 600 14 L600 30 C330 62 150 96 6 116 Z'/%3E%3C/svg%3E");
  /* fita vertical rasgada (molduras do portfolio e titulos) */
  --fita:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 400' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-40%25' y='-5%25' width='180%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12 .02' numOctaves='3' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='14' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M8 0 L52 0 L50 250 L58 330 L40 300 L36 396 L24 330 L12 380 L10 280 Z'/%3E%3C/svg%3E");
}

/* ---------- monograma (enquanto o cliente nao tem logo) ---------- */
/* Desenhado em SVG pelo js/aplicar-dados.js, sempre na cor do texto em volta. */
.monograma{display:block;width:100%;height:100%;overflow:visible}
.monograma .m-borda{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:miter}
.monograma .m-dentro{fill:none;stroke:currentColor;stroke-width:.9;opacity:.55}
.monograma .m-traco{stroke:currentColor;stroke-width:1.4}
.monograma .m-ponto{fill:rgb(var(--acento-vivo))}
.monograma text{fill:currentColor;font-family:var(--serifa);font-weight:700;letter-spacing:.04em}
img.logo-img{width:100%;height:100%;object-fit:contain}

/* ---------- titulo de secao ---------- */
/* Substitui as artes "PORTFOLIO", "DEPOIMENTOS" e "REDES SOCIAIS". Tudo em cqw:
   o titulo cresce e encolhe junto com a largura que a secao der a ele. */
.tit{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;
  container-type:inline-size;margin:0;text-align:center;font-weight:400;pointer-events:none}
.tit__marca{position:relative;z-index:3;width:8cqw;aspect-ratio:100/140;color:var(--osso-2);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.9));margin-bottom:-.6cqw}
.tit__corpo{position:relative;display:flex;align-items:center;justify-content:center;gap:2.6cqw;width:100%}

/* lanca dos lados: haste cor de osso, ponta em losango e uma fita na cor do tema */
.tit__lado{position:relative;flex:none;width:3.4cqw;height:24cqw}
.tit__lado::before{content:"";position:absolute;left:50%;top:9%;bottom:0;width:.42cqw;transform:translateX(-50%);
  background:linear-gradient(#efe4cf,#a8957a 55%,rgba(120,104,84,0))}
.tit__lado::after{content:"";position:absolute;left:50%;top:0;width:1.9cqw;aspect-ratio:1/2.6;transform:translateX(-50%);
  background:linear-gradient(90deg,#d9cbb0,#f6eedf 50%,#9d8b70);clip-path:polygon(50% 0,100% 62%,50% 100%,0 62%)}
.tit__fita{position:absolute;top:22%;width:3cqw;height:62%;background:rgb(var(--acento));
  -webkit-mask:var(--fita) 0 0/100% 100%;mask:var(--fita) 0 0/100% 100%;opacity:.92}
.tit__lado:first-child .tit__fita{left:58%}
.tit__lado:last-child .tit__fita{right:58%;transform:scaleX(-1)}

.tit__nome-caixa{position:relative;flex:0 1 auto;min-width:0}
/* dois golpes de tinta atras da palavra */
.tit__nome-caixa::before,.tit__nome-caixa::after{content:"";position:absolute;pointer-events:none;
  background:rgb(var(--acento));-webkit-mask:var(--golpe) 0 0/100% 100%;mask:var(--golpe) 0 0/100% 100%}
.tit__nome-caixa::before{left:-8%;right:-4%;top:-6%;height:92%;opacity:.88}
.tit__nome-caixa::after{left:12%;right:-12%;top:38%;height:56%;opacity:.5;transform:scaleX(-1) rotate(4deg);
  background:rgb(var(--acento-escuro))}
.tit__nome{position:relative;z-index:1;display:block;white-space:nowrap;
  font-family:var(--serifa);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:.02em;
  font-size:min(14.5cqw,calc(84cqw / var(--n,8) / .76));padding:.06em .04em 0;
  background:linear-gradient(#fbf4e6 10%,#e2d3b6 52%,#a99474 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-mask:var(--grao) 0 0/220px;mask:var(--grao) 0 0/220px;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(0,0,0,.75))}

.tit__sub{position:relative;z-index:2;display:flex;align-items:center;gap:1.6cqw;width:86%;margin-top:.8cqw;
  font-family:var(--serifa);font-weight:700;font-size:2.7cqw;letter-spacing:.26em;text-indent:.26em;
  text-transform:uppercase;white-space:nowrap;color:#e6dac4;text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.9)}
.tit__sub::before,.tit__sub::after{content:"";flex:1;height:.3cqw;min-height:1px;
  background:linear-gradient(to left,#cdbb9c,rgba(205,187,156,0))}
.tit__sub::after{background:linear-gradient(to right,#cdbb9c,rgba(205,187,156,0))}
.tit__tags{position:relative;z-index:2;margin-top:.9cqw;padding:.5em 1.4em;
  font-family:var(--serifa);font-weight:600;font-size:1.9cqw;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;white-space:nowrap;color:#d7c9b0;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.72) 18% 82%,transparent)}
.tit__tags b{color:rgb(var(--acento-vivo));font-weight:400;margin:0 .5em}

/* versao do inicio: sem lancas, com cidade e linhas finas nas laterais */
.tit--hero .tit__marca{width:6.5cqw}
.tit--hero .tit__lado{width:2cqw;height:17cqw}
.tit--hero .tit__lado::before{top:0;width:.25cqw;background:linear-gradient(transparent,#cdbb9c 30% 70%,transparent)}
.tit--hero .tit__lado::after{top:50%;width:1.4cqw;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);
  clip-path:none;background:rgb(var(--acento-vivo));box-shadow:0 0 8px rgb(var(--acento-vivo) / .8)}
.tit--hero .tit__fita{display:none}
.tit--hero .tit__sub{font-size:3cqw;letter-spacing:.2em;text-indent:.2em;width:100%;color:#efe4cf}
.tit__local{position:relative;z-index:2;display:flex;align-items:center;gap:.6em;margin-top:1.2cqw;
  font-family:var(--serifa);font-weight:700;font-size:2.3cqw;letter-spacing:.22em;text-transform:uppercase;
  color:#cdbfa6;text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.9)}
.tit__local svg{width:1.2em;height:1.2em;fill:none;stroke:rgb(var(--acento-vivo));stroke-width:2}
.tit__local::before,.tit__local::after{content:"";width:5cqw;height:1px;background:rgb(var(--acento) / .8)}

/* ---------- lema (abaixo da foto da secao Sobre) ---------- */
.lema{display:flex;flex-direction:column;align-items:flex-start;width:min(118%,400px);
  container-type:inline-size;transform:rotate(-5deg) skewX(-6deg);margin-inline:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.95))}
.lema span{display:block;font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  line-height:.92;letter-spacing:.01em;
  background:linear-gradient(#fbf3e2 20%,#d8c8a8 70%,#b39d7b);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-mask:var(--grao) 0 0/200px;mask:var(--grao) 0 0/200px}
.lema .lema__pre{font-size:8.6cqw;margin-left:4cqw}
.lema .lema__estilos{position:relative;font-size:min(17cqw,calc(96cqw / var(--n,12) / .5));white-space:nowrap}
.lema__risco{display:block;width:96%;height:5cqw;margin:-1cqw 0 0 2cqw;background:rgb(var(--acento));
  -webkit-mask:var(--golpe) 0 0/100% 100%;mask:var(--golpe) 0 0/100% 100%}