/* Template "beleza-barbearia" — pele do ID Barber Club.
   Barbearia clássica à noite: preto, vermelho-madeira, creme, latão.
   Regras do brand-kit.md: escudo, faixa inclinada, riscas de poste, cantos retos (4px). Vibe masculina. */
:root {
  --preto: #141211;
  --carvao: #1E1A18;
  --redwood: #622010;      /* blocos: faixa, escudo, cartão */
  --vermelho: #B8432F;     /* riscas do poste e grafismos (não texto pequeno) */
  --cobre: #E3A57F;        /* acento em texto sobre preto */
  --creme: #FFF4DC;
  --cinza: #B0B6B6;
  --linha: rgba(255, 244, 220, .16);

  --slab: "Alfa Slab One", "Rockwell", Georgia, serif;
  --cond: "Oswald", "Arial Narrow", sans-serif;
  --texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margem: 20px;
  --raio: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0B0A09; color: var(--creme); font: 400 16px/1.55 var(--texto); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, figure { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--cobre); outline-offset: 3px; }

.bio { position: relative; max-width: 480px; min-height: 100vh; margin: 0 auto; background: var(--preto); overflow: hidden; }

/* ---------- Escudo ---------- */
.escudo { display: block; width: 104px; height: auto; margin: 0 auto; overflow: visible; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); }
.escudo__fundo { fill: var(--redwood); }
.escudo__linha { fill: none; stroke: var(--creme); stroke-width: 2; }
.escudo__letras { font: 400 44px var(--slab); fill: var(--creme); letter-spacing: 1px; }
.escudo__bigode { fill: var(--creme); }
.escudo--pequeno { width: 64px; filter: none; }

/* ---------- Capa ---------- */
.capa { position: relative; min-height: 560px; display: flex; align-items: flex-end; }
.capa__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(.35) contrast(1.1); }
.capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 17, .55) 0%, rgba(20, 18, 17, .2) 30%, rgba(20, 18, 17, .85) 62%, var(--preto) 100%); }
.capa__miolo { position: relative; z-index: 1; width: 100%; padding: 24px var(--margem) 54px; text-align: center; }
.letreiro {
  position: absolute; z-index: 2; top: 16px; right: var(--margem);
  display: inline-flex; flex-direction: column; align-items: center; padding: 6px 12px;
  border: 2px solid var(--cinza); border-radius: var(--raio); background: rgba(20, 18, 17, .7);
  font: 600 11px/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--cinza);
}
.letreiro b { font: 600 18px/1 var(--cond); letter-spacing: .2em; }
.letreiro--aberto { border-color: var(--cobre); color: var(--cobre); box-shadow: 0 0 18px rgba(227, 165, 127, .35), inset 0 0 12px rgba(227, 165, 127, .2); }
.letreiro--aberto b { text-shadow: 0 0 10px rgba(227, 165, 127, .8); }
.capa__nome { margin-top: 14px; font: 400 40px/1 var(--slab); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.capa__selos { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; font: 600 13px var(--cond); letter-spacing: .3em; text-transform: uppercase; color: var(--cinza); }
.capa__selos i { width: 6px; height: 6px; background: var(--vermelho); transform: rotate(45deg); }
.capa__frase { margin-top: 18px; font: 500 22px/1.25 var(--cond); letter-spacing: .02em; text-transform: uppercase; color: var(--cobre); }

/* faixa inclinada com o nome a correr */
.faixa { position: relative; z-index: 2; margin: -22px -20px 0; padding: 10px 0; background: var(--redwood); transform: rotate(-4deg); border-top: 2px solid var(--creme); border-bottom: 2px solid var(--creme); overflow: hidden; }
.faixa__trilho { display: flex; width: max-content; animation: correr 26s linear infinite; }
.faixa span { padding-right: 8px; font: 400 15px/1 var(--slab); letter-spacing: .06em; white-space: nowrap; color: var(--creme); }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- Botões ---------- */
.acoes { padding: 40px var(--margem) 0; text-align: center; }
.acoes__sub { max-width: 32ch; margin: 0 auto 20px; font-size: 15.5px; color: var(--cinza); }
.principal {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 62px; padding: 12px 20px; border-radius: var(--raio);
  background: var(--creme); color: var(--preto);
  font: 600 19px var(--cond); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  box-shadow: 6px 6px 0 var(--redwood);
  transition: transform .15s ease, box-shadow .15s ease;
}
.principal svg { width: 22px; height: 22px; flex: none; }
.principal:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--redwood); }
.principal--escuro { margin-top: 16px; background: var(--preto); color: var(--creme); box-shadow: 6px 6px 0 var(--creme); }
.principal--escuro:active { box-shadow: 3px 3px 0 var(--creme); }
.acoes__legenda { margin-top: 12px; font-size: 13.5px; color: var(--cinza); }
.secundarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.secundario { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 2px solid var(--linha); border-radius: var(--raio); font: 600 14px var(--cond); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: border-color .2s ease; }
.secundario svg { width: 18px; height: 18px; color: var(--cobre); }

/* riscas de poste de barbeiro */
.poste { display: block; width: 46px; height: 12px; background: repeating-linear-gradient(-45deg, var(--vermelho) 0 6px, var(--creme) 6px 12px, var(--redwood) 12px 18px, var(--creme) 18px 24px); border-radius: 2px; }
.poste--largo { width: 100%; height: 10px; margin-bottom: 26px; border-radius: 0; }

/* ---------- Tabela de preços ---------- */
.quadro { margin: 44px var(--margem) 0; padding: 22px 18px 16px; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--carvao); }
.quadro__cabeca { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.quadro__cabeca h2 { font: 400 22px var(--slab); letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.precos__linha { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding: 12px 0; border-bottom: 1px dashed var(--linha); text-decoration: none; }
.precos li:last-child .precos__linha { border-bottom: 0; }
.precos__nome { font: 600 17px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.precos__fio { border-bottom: 2px dotted rgba(255, 244, 220, .35); transform: translateY(-4px); }
.precos__valor { font: 400 20px var(--slab); color: var(--cobre); white-space: nowrap; }
.precos__info { grid-column: 1 / -1; font-size: 14px; color: var(--cinza); }
.quadro__nota { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font: 500 12px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); }
.quadro__nota svg { width: 16px; height: 16px; color: var(--cobre); }

/* ---------- Cartão de cliente ---------- */
.cartao { margin: 40px var(--margem) 0; border-radius: var(--raio); background: var(--redwood); overflow: hidden; }
.cartao__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; filter: grayscale(.3) contrast(1.05); }
.cartao__txt { padding: 20px 18px 24px; }
.etiqueta { font: 600 12px var(--cond); letter-spacing: .3em; text-transform: uppercase; color: var(--creme); opacity: .85; }
.cartao__titulo { margin: 6px 0 12px; font: 400 27px/1.1 var(--slab); }
.cartao p { font-size: 15px; }
.carimbos { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 14px; }
.carimbos i { aspect-ratio: 1; border: 2px dashed rgba(255, 244, 220, .6); border-radius: 50%; }
.carimbos i:last-child { border-style: solid; background: var(--creme); }

/* ---------- Galeria ---------- */
.bloco { padding: 44px var(--margem) 0; }
.titulo { margin-bottom: 14px; font: 400 26px var(--slab); text-transform: uppercase; letter-spacing: .02em; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.galeria img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--raio); filter: grayscale(.3) contrast(1.05); }
.galeria figcaption { margin-top: 6px; font: 500 12px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }

/* ---------- Informações ---------- */
.info { display: grid; gap: 16px; padding: 18px; border: 2px solid var(--linha); border-radius: var(--raio); }
.info__bloco + .info__bloco { padding-top: 14px; border-top: 1px dashed var(--linha); }
.info h3 { margin-bottom: 6px; font: 600 13px var(--cond); letter-spacing: .24em; text-transform: uppercase; color: var(--cobre); }
.par { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.par span { color: var(--cinza); }
.par b { font-weight: 600; text-align: right; }
.texto-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 14px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--cobre); text-underline-offset: 4px; }
.texto-link svg { width: 16px; height: 16px; }

/* ---------- Rodapé ---------- */
.rodape { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 48px; padding: 0 0 104px; text-align: center; font: 600 12px var(--cond); letter-spacing: .24em; text-transform: uppercase; color: var(--cinza); }
.rodape p { padding: 0 var(--margem); }
.rodape__assinatura { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 400 13px var(--texto); letter-spacing: 0; text-transform: none; color: var(--creme); text-underline-offset: 4px; }

/* ---------- Barra fixa ---------- */
.barra {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: min(calc(100% - 24px), 456px); min-height: 56px; border-radius: var(--raio);
  background: var(--creme); color: var(--preto);
  font: 600 17px var(--cond); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  box-shadow: 5px 5px 0 var(--redwood);
  transform: translate(-50%, 160%); transition: transform .35s ease;
}
.barra svg { width: 20px; height: 20px; }
.barra--visivel { transform: translate(-50%, 0); }

/* movimento: seco e rápido, como um corte à navalha */
.revelar { opacity: 0; transform: translateX(-18px); transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
.revelar--in { opacity: 1; transform: none; }

@media (hover: hover) {
  .principal:hover { filter: brightness(.95); }
  .secundario:hover { border-color: var(--cobre); }
  .precos__linha:hover .precos__nome { color: var(--cobre); }
}
@media (min-width: 520px) {
  body { padding: 28px 0; }
  .bio { min-height: 0; border-radius: 6px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); }
}
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
  .faixa__trilho { animation: none; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Paletas do simulador (data-paleta no <html>) ---------- */
:root[data-paleta="2"] { /* Navy */
  --preto: #0D121B;
  --carvao: #172030;
  --redwood: #1F3B5C;
  --vermelho: #3F6FA0;
  --cobre: #9DBCE0;
  --creme: #F3ECDC;
  --cinza: #AEB6C2;
}
:root[data-paleta="3"] { /* Verde garrafa */
  --preto: #0D1511;
  --carvao: #16221B;
  --redwood: #1E4D3A;
  --vermelho: #3E8A63;
  --cobre: #D2BC82;
  --creme: #F2EBD9;
  --cinza: #B2B9B3;
}