/* Cores e fonte do Manual da Marca v1.1 da Barbearia do Jarbas */
:root {
  --preto: #201E1E;
  --dourado: #EDBF5B;
  --bronze: #C68B3F;
  --branco: #FEFEFE;
  --suave: rgba(254, 254, 254, .74);
  --linha: rgba(237, 191, 91, .24);
  --margem: clamp(22px, 7vw, 112px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font: 400 17px/1.7 Roboto, system-ui, sans-serif;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 5.6vw, 5.4rem); line-height: 1.04; letter-spacing: -.015em; }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.5rem); line-height: 1.1; letter-spacing: -.01em; }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.25; }
:focus-visible { outline: 2px solid var(--dourado); outline-offset: 4px; }

.secao { padding: clamp(72px, 10vw, 152px) var(--margem); }
.ouro { color: var(--dourado); }
.sobretitulo {
  margin: 0 0 20px;
  color: var(--dourado);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}
/* O fio dourado curto repete o detalhe da arte da barbearia */
.fio { display: block; width: 96px; height: 2px; margin-top: 28px; background: var(--dourado); }
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.botao {
  display: inline-block;
  padding: 18px 38px;
  border: 1px solid var(--dourado);
  background: var(--dourado);
  color: var(--preto);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.botao:hover { background: transparent; color: var(--dourado); }
.botao--contorno { padding: 10px 20px; background: transparent; color: var(--dourado); font-size: .88rem; white-space: nowrap; }
.botao--contorno:hover { background: var(--dourado); color: var(--preto); }

/* Topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--margem);
  background: rgba(32, 30, 30, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.marca { font-weight: 500; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.menu { display: flex; gap: 36px; font-size: .92rem; }
.menu a { color: var(--suave); text-decoration: none; white-space: nowrap; transition: color .25s; }
.menu a:hover { color: var(--dourado); }

/* Apresentação: a imagem aparece inteira no computador, e o texto fica abaixo dela */
.hero__foto img { height: auto; aspect-ratio: 2056 / 765; }
.logo--celular { display: none; }
.hero__texto {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  padding: clamp(44px, 5vw, 72px) var(--margem) clamp(56px, 6vw, 88px);
  animation: surgir .9s ease-out both;
}
.hero__intro { margin: 0 0 16px; color: var(--suave); font-size: 1.16rem; }
.hero__oferta { margin: 0 0 28px; color: var(--dourado); font-weight: 500; }
.hero__oferta a { text-underline-offset: 4px; }
@keyframes surgir { from { opacity: 0; transform: translateY(14px); } }

/* Fatos */
.fatos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--linha);
}
.fatos li { padding: 34px clamp(16px, 2.6vw, 40px); border-left: 1px solid var(--linha); color: var(--suave); font-size: .96rem; line-height: 1.4; }
.fatos li:first-child { border-left: 0; padding-left: var(--margem); }
.fatos strong { display: block; margin-bottom: 6px; color: var(--dourado); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 500; }

/* Programa */
.programa { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.programa__cabecalho { position: sticky; top: 112px; }
.modulos article {
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 112px) minmax(0, 1fr);
  gap: 12px;
  padding: 36px 0;
  border-top: 1px solid var(--linha);
}
.modulos article:first-child { padding-top: 0; border-top: 0; }
.num { margin: 0; color: var(--dourado); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.1; }
.modulos ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--suave); font-size: .98rem; line-height: 1.5; }

/* Como funciona */
.como { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 112px); align-items: start; border-top: 1px solid var(--linha); }
.como__foto { aspect-ratio: 3 / 4; }
.como__texto { max-width: 38em; margin: 28px 0 0; color: var(--suave); font-size: 1.08rem; }
.dados { margin: 40px 0 0; }
.dados div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-top: 1px solid var(--linha); }
.dados dt { font-weight: 500; }
.dados dd { margin: 0; color: var(--suave); }

/* Condição especial */
.condicao { border-top: 1px solid var(--linha); background: radial-gradient(60% 70% at 50% 60%, rgba(198, 139, 63, .14), transparent 70%); }
.condicao__cabecalho { margin-bottom: 48px; }
.condicao__opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.condicao__opcao { padding: clamp(28px, 3.5vw, 48px); border: 1px solid var(--dourado); }
.condicao__opcao p { margin: 0; }
.condicao__desconto { color: var(--dourado); font-size: clamp(3rem, 6vw, 5rem); font-weight: 700; line-height: 1; }
.condicao__desconto span { font-size: 1.05rem; font-weight: 500; }
.condicao__opcao p:last-child { margin-top: 20px; color: var(--suave); }
.condicao__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; }
.condicao__rodape p { max-width: 34em; margin: 0; color: var(--suave); }

/* A barbearia */
.barbearia { border-top: 1px solid var(--linha); }
.barbearia__cabecalho { margin-bottom: 56px; }
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.galeria img { height: auto; aspect-ratio: 3 / 4; }
.galeria figcaption { padding-top: 14px; color: var(--suave); font-size: .92rem; }

/* Perguntas frequentes */
.duvidas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; border-top: 1px solid var(--linha); }
.perguntas details { border-top: 1px solid var(--linha); }
.perguntas details:first-child { border-top: 0; }
.perguntas details:first-child summary { padding-top: 0; }
.perguntas summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color .25s;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; color: var(--dourado); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.perguntas details[open] summary::after { content: "–"; }
.perguntas summary:hover, .perguntas details[open] summary { color: var(--dourado); }
.perguntas details > p { max-width: 42em; margin: -6px 40px 24px 0; color: var(--suave); }

/* Contato */
.contato {
  padding: clamp(56px, 7vw, 96px) var(--margem) clamp(80px, 9vw, 136px);
  border-top: 1px solid var(--linha);
  background: radial-gradient(50% 70% at 50% 35%, rgba(198, 139, 63, .16), transparent 70%);
  text-align: center;
}
/* O fundo do logo é o mesmo da página. Com 260 px de arquivo, a parte visível passa dos 160 px do manual. */
.logo { width: 260px; height: 260px; margin: 0 auto 16px; object-fit: contain; mix-blend-mode: lighten; }
.contato p { margin: 18px 0 40px; color: var(--suave); font-size: 1.14rem; }

/* Rodapé */
.rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 30px var(--margem);
  border-top: 1px solid var(--linha);
  color: var(--suave);
  font-size: .9rem;
}
.rodape p { margin: 0; }
.rodape__nome { color: var(--branco); font-weight: 500; }

/* O menu tem seis itens: compacta antes de faltar espaço e some quando não cabe em uma linha */
@media (max-width: 1300px) {
  .topo { gap: 16px; }
  .menu { gap: 16px; font-size: .82rem; }
}

@media (max-width: 1060px) {
  .menu { display: none; }
}

@media (max-width: 960px) {
  .como, .programa, .duvidas { grid-template-columns: minmax(0, 1fr); }
  .hero__texto { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .programa__cabecalho { position: static; }
  .como__foto { aspect-ratio: 4 / 3; }
  .fatos { grid-template-columns: repeat(2, 1fr); }
  .fatos li, .fatos li:first-child { padding: 24px var(--margem); border-left: 0; border-top: 1px solid var(--linha); }
  .fatos li:nth-child(-n+2) { border-top: 0; }
  .fatos li:nth-child(even) { padding-inline: 20px; border-left: 1px solid var(--linha); }
}

/* Abaixo desta largura o logo da imagem ficaria menor que os 160 px mínimos do manual:
   a foto enquadra só o barbeiro e o cliente, e o logo oficial entra abaixo dela */
@media (max-width: 840px) {
  .hero__foto img { aspect-ratio: 4 / 3; object-position: 88% center; }
  .logo--celular { display: block; margin: 20px auto -24px; }
  .hero__texto { padding-top: 24px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .marca { font-size: .95rem; }
  .botao--contorno { padding: 9px 12px; font-size: .8rem; }
  .modulos ul, .galeria, .condicao__opcoes { grid-template-columns: minmax(0, 1fr); }
  .dados div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__texto { animation: none; }
  .botao, .menu a, .perguntas summary { transition: none; }
}