/*
  Home da Barbearia Brother (BROTHERS-50).
  Estilo tirado das referências de estúdio de tatuagem que o Alan mandou:
  - palavra gigante em caixa alta com o logo na frente (ref. Mafia e Joker);
  - faixa escura em 4 colunas numeradas (ref. Mafia);
  - bloco bronze deslocado atrás da foto e botões retos cheio/contorno (ref. portfólio preto e vermelho);
  - letreiro de tatuagem nos sobretítulos e destaque quente (ref. tatuador laranja);
  - galeria de ponta a ponta sem margem (ref. Your Tattoo).
  Regra: tudo reto. Nenhum border-radius, nem em botão nem em foto.
*/
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; }
/* Âncoras do menu param abaixo do topo fixo, sem esconder o título da seção (BROTHERS-53). */
section[id], footer[id] { scroll-margin-top: 7rem; }
body {
  margin: 0;
  background: var(--cor-preto);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cor-destaque); }
a:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 0; background: var(--cor-destaque); color: var(--cor-sobre-destaque); padding: .5rem 1rem; z-index: 20; }
.pular:focus { left: 0; }

/* Peças comuns */
.sobretitulo {
  font-family: var(--fonte-titulo);
  color: var(--cor-destaque);
  font-size: 1.15rem;
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .5rem;
}
.sobretitulo::before { content: ""; width: 2.5rem; height: 2px; background: var(--cor-destaque); }
.titulo, .hero__palavra, .chamada h2, .diferenciais h2, .servico h3, .rodape__nome {
  font-family: var(--fonte-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: .01em;
}
.titulo { font-size: clamp(2.8rem, 8vw, 5.5rem); }
.titulo em { font-style: normal; color: var(--cor-destaque); }
.aviso { font-size: .85rem; color: var(--cor-texto-suave); font-style: italic; margin-top: 1rem; }
.secao { max-width: var(--largura-max); margin: 0 auto; padding: var(--espaco-5) var(--espaco-2); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .8rem 1.6rem;
  border: 2px solid var(--cor-destaque);
  background: var(--cor-destaque); color: var(--cor-sobre-destaque);
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem;
  text-decoration: none;
  position: relative; isolation: isolate; overflow: hidden;
  transition: color .3s, border-color .3s;
  --preenche: var(--cor-texto);
}
/* Hover: uma faixa de cor entra deslizando da esquerda e a seta anda para frente. */
.botao::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--preenche);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.7, 0, .2, 1);
}
.botao:hover::before, .botao:focus-visible::before { transform: scaleX(1); }
.botao:hover { border-color: var(--preenche); }
.botao span[aria-hidden] { transition: translate .3s; }
.botao:hover span[aria-hidden] { translate: 5px 0; }
.botao--contorno { background: transparent; color: var(--cor-destaque); --preenche: var(--cor-destaque); }
.botao--contorno:hover, .botao--contorno:focus-visible { color: var(--cor-sobre-destaque); }
.botao--pequeno { min-height: 44px; padding: .5rem 1rem; font-size: .8rem; }
.botao--escuro { background: var(--cor-preto); border-color: var(--cor-preto); color: var(--cor-texto); }
.botao--escuro:hover, .botao--escuro:focus-visible { color: var(--cor-preto); }
.link-seta {
  color: var(--cor-texto); text-decoration: none; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .9rem; padding: .7rem 0; border-bottom: 2px solid var(--cor-texto);
}
.link-seta:hover { color: var(--cor-destaque); border-color: var(--cor-destaque); }

/* Faixa e topo */
.faixa {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem var(--espaco-2);
  background: #000; color: var(--cor-texto-suave);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
}
.faixa a { color: var(--cor-texto); text-decoration: none; }
/* Topo (BROTHERS-53), no estilo da referência Mafia.
   O topo mantém a altura de antes (--topo-altura) e o emblema fica solto por cima, em position absolute:
   começa com uma margem em cima e metade dele passa para fora do topo, por cima do hero (pedido do Alan).
   A conta é top = altura do topo - metade do emblema. Ao rolar (.rolou) os dois encolhem juntos. */
.topo {
  --topo-altura: 64px; --emblema: 88px;
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem;
  height: var(--topo-altura);
  padding: 0 var(--espaco-2);
  background: rgba(11, 9, 8, .94);
  border-bottom: 1px solid var(--cor-borda);
  transition: height .3s ease;
}
.topo.rolou { --topo-altura: 56px; --emblema: 72px; }
.topo__marca {
  position: absolute; left: 50%; top: calc(var(--topo-altura) - var(--emblema) / 2); z-index: 1;
  translate: -50% 0; display: block; line-height: 0;
  transition: top .3s ease;
}
.topo__marca img {
  width: var(--emblema); height: var(--emblema);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
  transition: width .3s ease, height .3s ease;
}
/* No celular a seta do Agendar sai, para o botão não encostar no emblema. */
@media (max-width: 819px) { .topo .botao span { display: none; } }
.topo__nav--esq { grid-column: 1; }
.topo__dir { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--espaco-3); }
.topo__nav { display: none; gap: var(--espaco-3); }
.topo__nav a { color: var(--cor-texto); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; padding: .5rem 0; }
.topo__nav a:hover, .topo__nav a[aria-current="true"] { color: var(--cor-destaque); }
@media (min-width: 820px) {
  .topo { --topo-altura: 84px; --emblema: 120px; gap: var(--espaco-3); }
  .topo.rolou { --topo-altura: 64px; --emblema: 88px; }
  .topo__nav { display: flex; }
}

/* Hero: palavra gigante com o logo na frente */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* Em cima, espaço a mais para a metade do emblema que sai do topo (BROTHERS-53). */
  padding: calc(var(--espaco-4) + 1.5rem) var(--espaco-2) var(--espaco-4);
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
}
/* Textura de concreto riscado (enviada pelo Alan) por baixo, escurecida para o texto manter o contraste AA.
   Ela anda mais devagar que a rolagem: é a camada mais "funda" do hero. */
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero::before {
  inset: -15% 0 -15% 0;
  background: url("/assets/img/textura-banner.jpg") center / cover;
  translate: 0 calc(var(--rolagem, 0) * .25px);
}
.hero::after {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(208, 146, 79, .22), transparent 60%),
    linear-gradient(180deg, rgba(23, 17, 13, .84), rgba(11, 9, 8, .93));
}
.hero__chamada {
  font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; line-height: 1.7;
  max-width: var(--largura-max); margin: 0 auto;
}
.hero__chamada::after { content: ""; display: block; width: 2.5rem; height: 2px; background: var(--cor-destaque); margin-top: .9rem; }
.hero__palco { display: grid; place-items: center; margin: var(--espaco-3) auto 0; max-width: 1400px; }
.hero__palco > * { grid-area: 1 / 1; }
.hero__palavra {
  font-size: clamp(5.2rem, 24vw, 21rem);
  line-height: .85;
  color: var(--cor-texto);
  align-self: start;
  translate: 0 calc(var(--rolagem, 0) * .4px);
  animation: palavra-entra 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
.hero__logo {
  position: relative;
  width: min(62vw, 440px);
  margin-top: clamp(2.8rem, 12vw, 10rem);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .7));
  translate: 0 calc(var(--rolagem, 0) * -.08px);
  animation: logo-entra 1s .35s cubic-bezier(.2, .9, .3, 1.15) both;
}
@keyframes palavra-entra { from { opacity: 0; transform: scale(1.12); filter: blur(8px); } }
@keyframes logo-entra { from { opacity: 0; transform: translateY(-60px) rotate(-4deg); } }
.hero__rodape {
  max-width: var(--largura-max); margin: var(--espaco-3) auto 0;
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--espaco-3);
}
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-3); }
.hero__selo {
  font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; text-align: right;
  border-bottom: 2px solid var(--cor-destaque); padding-bottom: .4rem;
}

/* Faixa de diferenciais */
.diferenciais {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  background: #000;
}
.diferenciais li { padding: var(--espaco-4) var(--espaco-3); border-bottom: 1px solid var(--cor-borda); }
.diferenciais__num { display: block; font-family: var(--fonte-titulo); color: var(--cor-destaque); font-size: 1.1rem; margin-bottom: .6rem; }
.diferenciais h2 { font-size: 1.7rem; margin-bottom: .4rem; }
.diferenciais p { color: var(--cor-texto-suave); font-size: .95rem; }
@media (min-width: 640px) { .diferenciais { grid-template-columns: 1fr 1fr; } .diferenciais li { border-right: 1px solid var(--cor-borda); } }
@media (min-width: 1000px) { .diferenciais { grid-template-columns: repeat(4, 1fr); } .diferenciais li { border-bottom: 0; } }

/* A casa: foto em P&B com bloco bronze deslocado */
.sobre { display: grid; gap: var(--espaco-5); align-items: center; }
.sobre__foto { position: relative; margin: 0 1.25rem 1.25rem 0; }
.sobre__foto::before {
  content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  background: var(--cor-destaque);
}
.sobre__foto img { position: relative; width: 100%; filter: grayscale(1) contrast(1.15); transition: filter .4s; }
.sobre__foto:hover img { filter: none; }
/* Retrato do Roger sobre o canto da foto do salão, com moldura escura */
.sobre__roger { position: absolute; left: -.5rem; bottom: -2.75rem; width: min(34%, 190px); margin: 0; z-index: 1; }
.sobre__roger img { aspect-ratio: 3 / 4; object-fit: cover; border: 4px solid var(--cor-fundo); }
.sobre__roger figcaption {
  padding: .1rem .6rem .45rem; margin-top: -1px;
  background: var(--cor-fundo); color: var(--cor-destaque);
  font-family: var(--fonte-titulo); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
}
.sobre__texto { display: grid; gap: var(--espaco-3); justify-items: start; }
.sobre__texto > p:not(.sobretitulo):not(.aviso) { color: var(--cor-texto-suave); max-width: 46ch; }
.sobre__texto .aviso { margin-top: 0; }
@media (min-width: 900px) { .sobre { grid-template-columns: 1.1fr 1fr; } }

/* Serviços: cards retos e escuros */
.cabeca { margin-bottom: var(--espaco-4); }
.servicos { display: grid; gap: 1px; background: var(--cor-borda); border: 1px solid var(--cor-borda); }
.servico { position: relative; background: var(--cor-fundo); padding: var(--espaco-4) var(--espaco-3) var(--espaco-3); display: flex; flex-direction: column; gap: .6rem; overflow: hidden; }
.servico__num {
  position: absolute; right: .6rem; top: -.4rem;
  font-family: var(--fonte-display); font-size: 6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--cor-borda);
}
.servico h3 { position: relative; font-size: 2.2rem; }
.servico__desc { position: relative; color: var(--cor-texto-suave); flex: 1; }
.servico__base { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: var(--espaco-2); padding-top: var(--espaco-2); border-top: 1px solid var(--cor-borda); }
.servico__preco { font-family: var(--fonte-display); font-size: 1.6rem; color: var(--cor-destaque); }
.servico__preco small { font-family: var(--fonte-texto); font-size: .85rem; color: var(--cor-texto-suave); margin-left: .3rem; }
@media (min-width: 820px) { .servicos { grid-template-columns: repeat(3, 1fr); } }

/* Galeria de ponta a ponta */
.galeria { border-top: 1px solid var(--cor-borda); }
.galeria .cabeca { padding-bottom: 0; margin-bottom: var(--espaco-4); }
/* As colunas acompanham o número de fotos (até 4), para 1 ou 2 fotos não deixarem buraco. */
.galeria__grade { display: grid; grid-template-columns: repeat(min(var(--colunas, 2), 2), 1fr); }
.galeria__item { margin: 0; aspect-ratio: 1; overflow: hidden; }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); transition: filter .4s, transform .4s; }
.galeria__item:hover img { filter: none; transform: scale(1.04); }
@media (min-width: 820px) { .galeria__grade { grid-template-columns: repeat(var(--colunas, 4), 1fr); } }
/* Etiqueta Antes/Depois no canto da foto */
.galeria__etiqueta {
  position: absolute; left: 0; top: 0; padding: .35rem .7rem;
  background: var(--cor-fundo); color: var(--cor-destaque);
  font-family: var(--fonte-titulo); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
}
.galeria__item:has(.galeria__etiqueta) { position: relative; }
/* 7, 11... fotos: a primeira ocupa duas linhas e a grade fecha sem buraco. */
.galeria__grade--destaque .galeria__item:first-child { grid-row: span 2; aspect-ratio: auto; }
/* Foto sozinha não vira um quadrado do tamanho da tela. */
.galeria__grade[style*="--colunas: 1"] .galeria__item { aspect-ratio: 16 / 7; }

/* Chamada final em bronze */
.chamada {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-3);
  padding: var(--espaco-5) max(var(--espaco-2), calc((100% - var(--largura-max)) / 2 + var(--espaco-2)));
  background: var(--cor-destaque); color: var(--cor-sobre-destaque);
}
.chamada h2 { font-size: clamp(2.6rem, 8vw, 5rem); }

/* Rodapé */
.rodape { background: #000; border-top: 1px solid var(--cor-borda); }
.rodape__grade {
  max-width: var(--largura-max); margin: 0 auto;
  display: grid; gap: var(--espaco-4); grid-template-columns: 1fr;
  padding: var(--espaco-5) var(--espaco-2) var(--espaco-4);
}
.rodape h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--cor-texto-suave); margin-bottom: .6rem; }
.rodape__nome { font-size: 1.8rem; margin-top: .8rem; }
.rodape__fim { text-align: center; color: var(--cor-texto-suave); font-size: .85rem; padding: var(--espaco-2); border-top: 1px solid var(--cor-borda); }
@media (min-width: 720px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* Celular: a faixa fica só com o agendar e o selo alinha à esquerda */
@media (max-width: 519px) {
  .faixa { justify-content: center; }
  .faixa p:first-child { display: none; }
  .hero__selo { text-align: left; }
}

/* ===== Movimento (BROTHERS-51) ===== */

/* Entrada ao rolar. Só esconde quando o JS está ligado (classe .js no <html>), senão tudo aparece. */
.js [data-revela] {
  opacity: 0; transform: translateY(44px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--atraso, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--atraso, 0ms);
}
.js [data-revela].visivel { opacity: 1; transform: none; }

/* Letreiro correndo: duas cópias iguais, o trilho anda metade da largura e recomeça sem emenda. */
.letreiro { overflow: hidden; background: var(--cor-destaque); color: var(--cor-sobre-destaque); padding: .8rem 0; border-block: 1px solid #000; }
.letreiro__trilho { display: flex; width: max-content; animation: letreiro-corre 38s linear infinite; }
.letreiro__copia { display: flex; align-items: center; }
.letreiro span {
  font-family: var(--fonte-display); text-transform: uppercase; white-space: nowrap;
  font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1; padding: 0 .55em;
}
.letreiro .letreiro__estrela { font-family: var(--fonte-texto); font-size: clamp(1rem, 2.4vw, 1.5rem); padding: 0; }
.letreiro:hover .letreiro__trilho { animation-play-state: paused; }
.letreiro--contorno { background: #000; border-color: var(--cor-borda); }
.letreiro--contorno .letreiro__trilho { animation-direction: reverse; animation-duration: 46s; }
.letreiro--contorno span { color: transparent; -webkit-text-stroke: 1px var(--cor-texto-suave); }
.letreiro--contorno .letreiro__estrela { color: var(--cor-destaque); -webkit-text-stroke: 0; }
@keyframes letreiro-corre { to { transform: translateX(-50%); } }

/* Hover mais forte */
.topo__nav a { position: relative; }
.topo__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 2px; background: var(--cor-destaque);
  transform: scaleX(0); transform-origin: right; transition: transform .3s;
}
.topo__nav a:hover::after, .topo__nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

.diferenciais li { position: relative; transition: background .3s; }
.diferenciais li::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--cor-destaque);
  transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.7, 0, .2, 1);
}
.diferenciais li:hover { background: #15100c; }
.diferenciais li:hover::before { transform: scaleX(1); }
.diferenciais__num { transition: translate .3s; }
.diferenciais li:hover .diferenciais__num { translate: 8px 0; }

.servico { transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.servico:hover { translate: 0 -8px; box-shadow: inset 0 0 0 2px var(--cor-destaque), 0 22px 40px rgba(0, 0, 0, .55); z-index: 1; }
.servico__num { transition: -webkit-text-stroke-color .35s, translate .5s; }
.servico:hover .servico__num { -webkit-text-stroke-color: var(--cor-destaque); translate: -6px 4px; }

.galeria__item { position: relative; }

.sobre__foto::before { transition: translate .5s cubic-bezier(.2, .7, .2, 1); }
.sobre__foto:hover::before { translate: 10px 10px; }

/* Cursor quadrado bronze (criado pelo home.js só em mouse). Vira losango sobre links e botões. */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  opacity: 0; transition: opacity .2s;
}
.cursor::before {
  content: ""; position: absolute; inset: 0; border: 2px solid var(--cor-destaque);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s;
}
.cursor.ativo { opacity: 1; }
.cursor.sobre-link::before { transform: rotate(45deg) scale(1.5); background: rgba(208, 146, 79, .18); }

/* Quem pede menos movimento no sistema recebe a página parada e inteira. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js [data-revela] { opacity: 1; transform: none; }
  .hero::before, .hero__palavra, .hero__logo { translate: none; }
}