/* Tema de barbearia clássica: fundo carvão, detalhes em dourado/latão, títulos serifados
   e a faixa listrada do poste de barbeiro. Os nomes das classes (ex.: .btn-ouro) são usados pelo HTML. */
:root {
  --bg: #0f0e0d;
  --surface: #191715;
  --surface-2: #211e1b;
  --campo: #131110;
  --line: #322c26;
  --line-soft: #27231f;
  --creme: #f3ece0;
  --texto: #ddd5c8;
  --muda: #9a8f80;
  --ouro: #c8a25c;
  --ouro-claro: #e0c48a;
  --ouro-escuro: #a8843f;
  --ouro-fundo: rgba(200, 162, 92, .09);
  --vermelho: #b3282d;
  --azul-poste: #1f3a6e;
  --erro: #e5484d;
  --ok: #4caf7a;
  --raio: 10px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --rotulo: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --largura: 1200px;
  --gutter: max(16px, calc((100% - var(--largura)) / 2));
  /* faixa do poste de barbeiro */
  --poste: repeating-linear-gradient(-45deg, var(--vermelho) 0 12px, var(--creme) 12px 24px, var(--azul-poste) 24px 36px, var(--creme) 36px 48px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; color: var(--creme); }
.ouro { color: var(--ouro); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
::selection { background: var(--ouro); color: #1a1408; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px var(--gutter) 12px;
  background: rgba(15, 14, 13, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--poste); }
.topo-in { display: contents; }
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo {
  width: 48px; height: 48px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center;
  font: 700 1.05rem var(--serif);
  color: var(--ouro);
  background: var(--surface);
  border: 1px solid var(--ouro);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(200, 162, 92, .35);
}
.logo img { width: 100%; height: 100%; object-fit: cover; }
.marca h1 { font-size: 1.25rem; line-height: 1.15; }
.endereco { margin: 2px 0 0; font-size: .78rem; color: var(--muda); }
.endereco[hidden] { display: none; }
.menu { display: flex; align-items: center; gap: 22px; }
.menu-link, .link-admin { font: 500 .85rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto); }
.menu-link:hover, .link-admin:hover { color: var(--ouro); }

/* ---------- botões ---------- */
.btn-ouro, .btn-claro {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; cursor: pointer;
  font: 500 .92rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; text-align: center;
  border-radius: 4px; padding: 11px 22px;
  transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn-ouro { color: #1a1408; background: linear-gradient(180deg, var(--ouro-claro), var(--ouro)); border-color: var(--ouro); }
.btn-ouro:hover:not(:disabled) { background: var(--ouro-claro); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(200, 162, 92, .25); }
.btn-ouro:disabled { opacity: .35; cursor: not-allowed; }
.btn-claro { color: var(--creme); background: transparent; border-color: rgba(243, 236, 224, .35); }
.btn-claro:hover { border-color: var(--ouro); color: var(--ouro); }
.peq { padding: 8px 16px; font-size: .82rem; }
.grande { padding: 15px 30px; font-size: .95rem; }
.cheio { width: 100%; }

/* ---------- banner ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 88px var(--gutter) 96px;
  background:
    radial-gradient(700px 380px at 80% 30%, rgba(200, 162, 92, .14), transparent 65%),
    radial-gradient(900px 500px at 10% 110%, rgba(179, 40, 45, .10), transparent 60%),
    linear-gradient(180deg, #171513 0%, #0f0e0d 100%);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  /* tesoura grande e discreta ao fundo */
  content: ""; position: absolute; left: 44%; top: 50%; width: 360px; height: 360px; margin-top: -180px; opacity: .05; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a25c' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-20deg);
}
.hero::after {
  /* textura sutil */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 4px);
}
.hero-in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: center;
}
.tag {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px;
  font: 500 .8rem var(--rotulo); letter-spacing: .3em; text-transform: uppercase;
  color: var(--ouro);
}
.tag::before, .tag::after { content: ""; width: 34px; height: 1px; background: var(--ouro); }
.tag:empty { display: none; }
.hero h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; font-weight: 800; letter-spacing: -.01em; }
.hero .ouro { display: block; font-style: italic; font-weight: 700; color: var(--ouro); }
.hero p { margin: 22px 0 32px; max-width: 540px; color: var(--muda); font-size: 1.08rem; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.difs { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 36px 0 0; padding: 0; list-style: none; }
.difs li { display: flex; align-items: center; gap: 10px; font: 500 .82rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto); }
.difs li::before { content: "\2726"; color: var(--ouro); font-size: .8rem; }

.hero-card {
  position: relative; padding: 32px 30px 28px;
  background: rgba(25, 23, 21, .85);
  border: 1px solid rgba(200, 162, 92, .35);
  box-shadow: var(--sombra);
}
.hero-card::before {
  /* moldura interna fina, como em placa antiga */
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(200, 162, 92, .15); pointer-events: none;
}
.hero-card h3 { font-size: 1.35rem; margin-bottom: 22px; text-align: center; }
.hero-card ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: passo; }
.hero-card li { position: relative; padding-left: 50px; counter-increment: passo; }
.hero-card li::before {
  content: counter(passo); position: absolute; left: 0; top: 2px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font: 700 1rem var(--serif);
  color: var(--ouro); border: 1px solid var(--ouro);
}
.hero-card strong { display: block; font-weight: 600; color: var(--creme); }
.hero-card li span { display: block; font-size: .85rem; color: var(--muda); }
.hero-card-rodape { margin: 24px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; font: 500 .78rem var(--rotulo) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro) !important; }
.hero-card-rodape:empty { display: none; }

/* ---------- seções ---------- */
main { max-width: calc(var(--largura) + 32px); margin: 0 auto; padding: 0 16px 80px; }
.secao { padding-top: 76px; }
.secao-cab { margin-bottom: 34px; text-align: center; }
.sobretitulo {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 8px;
  font: 500 .78rem var(--rotulo); letter-spacing: .3em; text-transform: uppercase; color: var(--ouro);
}
.sobretitulo::before, .sobretitulo::after { content: ""; width: 34px; height: 1px; background: var(--ouro); }
.secao-cab h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }

/* tabela de preços (estilo cardápio) */
.vitrine {
  position: relative; list-style: none; margin: 0; padding: 22px 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); column-gap: 64px;
  background: var(--surface); border: 1px solid rgba(200, 162, 92, .3);
}
.vitrine::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(200, 162, 92, .12); pointer-events: none; }
.vitrine-item {
  display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 18px 0;
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.vitrine-item:hover .vitrine-nome strong { color: var(--ouro); }
.vitrine-nome strong { display: block; font: 700 1.12rem var(--serif); color: var(--creme); transition: color .15s; }
.vitrine-nome small { font: 500 .72rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--muda); }
.vitrine-linha { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(200, 162, 92, .4); transform: translateY(-7px); }
.vitrine-preco { font: 600 1.15rem var(--rotulo); letter-spacing: .04em; color: var(--ouro); white-space: nowrap; }

/* ---------- agendamento ---------- */
.grade { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 28px; align-items: start; text-align: left; }
.passos { display: grid; gap: 20px; }

.bloco {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio); padding: 26px;
}
.bloco h3 {
  display: flex; align-items: center; gap: 14px;
  font-size: 1.2rem;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.num {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font: 700 .95rem var(--serif); color: #1a1408;
  background: var(--ouro);
}

/* cartões de escolha */
.cards { display: grid; gap: 12px; }
.cards-prof { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cards-serv { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.card {
  position: relative;
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; color: inherit; font: inherit; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px;
  transition: border-color .15s, background .15s;
}
.card:hover { border-color: rgba(200, 162, 92, .6); }
.card[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); box-shadow: 0 0 0 1px var(--ouro) inset; }
.card[aria-pressed="true"]::after {
  content: "\2713"; position: absolute; top: -9px; right: -9px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  color: #1a1408; background: var(--ouro); box-shadow: 0 0 0 3px var(--surface);
}
.avatar {
  width: 54px; height: 54px; flex: none; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center;
  font: 700 1.05rem var(--serif); color: var(--ouro);
  background: var(--bg); border: 1px solid var(--ouro);
}
.card strong { display: block; font-weight: 600; color: var(--creme); }
.card small { display: block; color: var(--muda); font-size: .8rem; line-height: 1.3; }
.serv { justify-content: space-between; }
.serv .preco { font: 600 1rem var(--rotulo); letter-spacing: .04em; color: var(--ouro); white-space: nowrap; }

/* campos (bloco, não grid, para o "(opcional)" ficar na linha do rótulo) */
.campo { display: block; font: 500 .78rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto); }
.campo > input, .campo > textarea { display: block; width: 100%; margin-top: 7px; }
.opt { color: var(--muda); font: 400 .78rem var(--sans); letter-spacing: 0; text-transform: none; }
input, textarea {
  font: 400 .95rem var(--sans); color: var(--creme);
  background: var(--campo); border: 1px solid var(--line); border-radius: 6px; padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #6d6458; }
input:focus, textarea:focus { outline: 0; border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(200, 162, 92, .18); }
#data { max-width: 240px; }

/* horários */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; margin-top: 18px; }
.dica { grid-column: 1 / -1; color: var(--muda); font-size: .92rem; }
.slot {
  padding: 10px 0; font: 500 .95rem var(--rotulo); letter-spacing: .06em; color: var(--texto); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  transition: border-color .15s, background .15s, color .15s;
}
.slot:hover { border-color: var(--ouro); color: var(--ouro); }
.slot[aria-pressed="true"] { background: var(--ouro); border-color: var(--ouro); color: #1a1408; }

form { display: grid; gap: 16px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* resumo (como um recibo) */
.resumo {
  position: sticky; top: 96px; overflow: hidden;
  background: var(--surface); border: 1px solid rgba(200, 162, 92, .35); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.resumo::before { content: ""; display: block; height: 6px; background: var(--poste); }
.resumo h3 { padding: 20px 24px 6px; font-size: 1.3rem; text-align: center; }
.resumo-corpo { padding: 4px 24px 24px; }
.resumo dl { margin: 0 0 22px; }
.resumo dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: .94rem; }
.resumo dt { color: var(--muda); }
.resumo dd { margin: 0; font-weight: 600; text-align: right; color: var(--creme); }
.resumo dd.ouro { color: var(--ouro); }
.resumo .total { border-bottom: 0; padding-top: 18px; align-items: baseline; }
.resumo .total dt { font: 500 .85rem var(--rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--texto); }
.resumo .total dd { font: 600 1.7rem var(--rotulo); color: var(--ouro); }
.resumo-nota { margin: 14px 0 0; font-size: .8rem; color: var(--muda); text-align: center; }
#msg { margin: 12px 0 0; min-height: 1.4em; font-weight: 500; text-align: center; font-size: .92rem; }
#msg:empty { min-height: 0; margin: 0; }
#msg.err { color: var(--erro); }
#msg.ok { color: var(--ok); }

/* ---------- rodapé ---------- */
.rodape { position: relative; color: var(--muda); background: #0a0908; font-size: .9rem; border-top: 1px solid var(--line); }
.rodape::before { content: ""; display: block; height: 6px; background: var(--poste); }
.rodape-in {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px;
  padding: 48px var(--gutter) 36px;
}
.rodape p { margin: 6px 0 0; }
.rodape a:hover { color: var(--ouro); }
.rodape-nome { font: 700 1.3rem var(--serif); color: var(--creme); }
.rodape-titulo { font: 500 .78rem var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); }
.rodape-base { margin: 0; padding: 18px var(--gutter); border-top: 1px solid var(--line-soft); font-size: .8rem; text-align: center; }

/* ---------- sucesso ---------- */
.sucesso { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.sucesso[hidden] { display: none; }
.sucesso-caixa {
  max-width: 420px; text-align: center; padding: 38px 30px;
  background: var(--surface); border: 1px solid rgba(200, 162, 92, .4); border-radius: var(--raio); box-shadow: var(--sombra);
}
.check {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.8rem; color: #1a1408;
  background: var(--ouro); box-shadow: 0 0 0 8px rgba(200, 162, 92, .15);
}
.sucesso-caixa h3 { font-size: 1.5rem; }
.sucesso-caixa p { color: var(--muda); margin: 12px 0 24px; }

/* ---------- admin ---------- */
.admin-barra { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.admin-barra .campo { min-width: 200px; }
.tabela-rolagem { overflow-x: auto; margin-top: 22px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 500 .78rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); background: #0a0908; }
td { color: var(--texto); }
tbody tr:nth-child(even) td { background: var(--surface-2); }
td small { display: block; color: var(--muda); max-width: 320px; }
.selo { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #1a1408; background: var(--ouro); }
.selo.ok { background: var(--ok); }
.selo.cancel { background: var(--erro); color: #fff; }
.riscado td { opacity: .5; text-decoration: line-through; }
/* o painel não tem banner: o conteúdo começa logo abaixo do topo */
.topo + main { padding-top: 32px; }
.topo + main .bloco + .bloco { margin-top: 24px; }

/* ---------- admin: configurações ---------- */
.config { display: grid; gap: 18px; }
.config .bloco-titulo, .config h3 { margin-bottom: 0; }
.config .dica { margin: 0; }
.config-linha { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; }
.config-linha > .campo { flex: 1 1 260px; }
.imagem-campo { display: grid; gap: 7px; }
.campo-titulo { font: 500 .78rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto); }
.imagem-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.previa {
  width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  font: 700 1.1rem var(--serif); color: var(--ouro);
  background: var(--bg); border: 1px solid var(--ouro);
}
.previa img { width: 100%; height: 100%; object-fit: cover; }
.subtitulo { margin: 6px 0 0; font: 700 1.1rem var(--serif); color: var(--ouro); }
.config-textos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.config-textos .largo { grid-column: 1 / -1; }
.config-profs { display: grid; gap: 14px; }
.config-prof {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
}
.config-prof-campos { flex: 1 1 280px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.config-prof-campos .imagem-linha { grid-column: 1 / -1; }
.btn-sec {
  display: inline-block; cursor: pointer; padding: 8px 14px; border-radius: 4px;
  font: 500 .8rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ouro); background: transparent; border: 1px solid var(--ouro);
}
.btn-sec:hover { background: var(--ouro-fundo); }
.btn-sec:focus-within { box-shadow: 0 0 0 3px rgba(200, 162, 92, .25); }
.btn-link { border: 0; background: none; padding: 4px; cursor: pointer; font: 500 .88rem var(--sans); color: var(--erro); }
.btn-link:hover { text-decoration: underline; }
.config > .btn-ouro { justify-self: start; }
#cfg-msg { margin: 0; min-height: 1.4em; font-weight: 500; }
#cfg-msg.err { color: var(--erro); }
#cfg-msg.ok { color: var(--ok); }

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; gap: 44px; }
  .hero-card { max-width: 520px; }
  .grade { grid-template-columns: 1fr; }
  .resumo { position: static; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 80px; }
  .topo { padding-top: 16px; padding-bottom: 10px; }
  .menu-link { display: none; }
  .marca h1 { font-size: 1.05rem; }
  .logo { width: 42px; height: 42px; }
  .hero { padding: 56px 16px 64px; text-align: center; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-acoes, .difs { justify-content: center; }
  .hero-acoes .grande { flex: 1 1 100%; }
  .hero-card { text-align: left; padding: 26px 22px; }
  .hero::before { left: auto; right: -80px; width: 280px; height: 280px; }
  .secao { padding-top: 56px; }
  .vitrine { padding: 10px 20px; }
  .vitrine-nome strong { font-size: 1rem; }
  .bloco { padding: 20px; }
  .duas { grid-template-columns: 1fr; }
  .rodape-in { grid-template-columns: 1fr; gap: 22px; padding-top: 36px; }
}