:root {
  --azul: #14233f;
  --azul-2: #1d3258;
  --vermelho: #c8372d;
  --branco: #f7f8fa;
  --cinza: #5a6275;
  --linha: #dde1ea;
  --fonte-titulo: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --fonte-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  font-family: var(--fonte-texto);
  color: var(--azul);
  background: var(--branco);
  line-height: 1.6;
  font-size: 1.0625rem;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.05; font-weight: 700; }
h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .5rem; }
h3 { font-size: 1.4rem; margin-bottom: .5rem; }

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.25rem;
  background: var(--azul); color: var(--branco);
}
.marca { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 700; text-decoration: none; }
.marca span { font-weight: 600; color: #aeb8cf; }
.menu { display: flex; align-items: center; gap: 1.5rem; }
.menu a { text-decoration: none; font-weight: 500; }
.menu a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-btn {
  display: none; background: none; border: 1px solid #aeb8cf; color: inherit;
  padding: .35rem .8rem; border-radius: 4px; font: inherit; cursor: pointer;
}

/* Botões */
.btn {
  display: inline-block; padding: .85rem 1.5rem;
  background: var(--vermelho); color: #fff;
  font-weight: 600; text-decoration: none; border-radius: 4px;
  transition: background .2s;
}
.btn:hover { background: #a82c23; }
.btn-pequeno { padding: .45rem 1rem; }
.btn-claro { background: transparent; border: 2px solid currentColor; color: var(--branco); }
.btn-claro:hover { background: rgba(255,255,255,.12); }

/* Hero: poste de barbeiro */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: 78vh; padding: 3rem 1.25rem 3rem 5.5rem;
  background: var(--azul); color: var(--branco);
  overflow: hidden;
}
.poste {
  position: absolute; left: 1.25rem; top: 0; bottom: 0; width: 2.75rem;
  background: repeating-linear-gradient(
    -45deg,
    var(--vermelho) 0 22px, var(--branco) 22px 44px, #3a62b0 44px 66px, var(--branco) 66px 88px
  );
  background-size: 100% 124px;
  animation: gira 2.4s linear infinite;
}
@keyframes gira { to { background-position: 0 124px; } }

.hero-texto { max-width: 38rem; }
.hero h1 { font-size: clamp(2.6rem, 8vw, 4.75rem); margin-bottom: 1rem; }
.lead { font-size: 1.2rem; color: #d3d9e6; margin-bottom: 1.75rem; max-width: 34rem; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.status {
  display: inline-block; margin-bottom: 1rem; padding: .25rem .75rem;
  border-radius: 999px; background: var(--azul-2); font-size: .95rem; font-weight: 500;
}
.status::before {
  content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .5rem;
  border-radius: 50%; background: #8b93a7;
}
.status.aberto::before { background: #3ecf7a; }
.status.fechado::before { background: var(--vermelho); }
.status:empty { display: none; }

/* Seções */
.secao { padding: 4rem 1.25rem; max-width: 62rem; margin: 0 auto; }
.secao-escura { max-width: none; background: var(--azul); color: var(--branco); }
.secao-escura > * { max-width: 62rem; margin-left: auto; margin-right: auto; }
.intro { color: var(--cinza); margin-bottom: 1.5rem; }

/* Serviços */
.grupos { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
details { background: #fff; border: 1px solid var(--linha); border-radius: 6px; }
summary {
  cursor: pointer; padding: 1rem 1.25rem; list-style: none;
  font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.5rem; color: var(--vermelho); }
details[open] summary::after { content: "\2212"; }
details ul { list-style: none; padding: 0 1.25rem 1rem; }
details li { padding: .45rem 0; border-top: 1px solid var(--linha); }

/* Horários */
.tabela { width: 100%; max-width: 30rem; border-collapse: collapse; margin-top: 1rem; }
.tabela th, .tabela td { text-align: left; padding: .85rem 0; border-bottom: 1px solid #34476d; font-weight: 500; }
.tabela td { text-align: right; }
.tabela tr.hoje th, .tabela tr.hoje td { color: #fff; font-weight: 600; }
.tabela tr.hoje th::after { content: " (hoje)"; color: #ff8a80; font-weight: 500; }

/* Contato */
.contato { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.25rem; }
address { font-style: normal; margin-bottom: .75rem; }
.contato p { margin-bottom: .4rem; }
.link { color: var(--vermelho); font-weight: 600; text-underline-offset: 3px; }
.link:hover { color: #a82c23; }

/* Rodapé e botão flutuante */
.rodape { padding: 1.5rem 1.25rem 5rem; text-align: center; font-size: .9rem; color: var(--cinza); border-top: 1px solid var(--linha); }
.flutuante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 20;
  padding: .85rem 1.4rem; background: var(--vermelho); color: #fff;
  font-weight: 600; text-decoration: none; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(20,35,63,.35);
}
.flutuante:hover { background: #a82c23; }

/* Mobile */
@media (max-width: 720px) {
  .menu-btn { display: block; }
  .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--azul); padding: .5rem 1.25rem 1.25rem; border-top: 1px solid #34476d;
  }
  .menu.aberto { display: flex; }
  .menu a { padding: .75rem 0; }
  .menu .btn { text-align: center; margin-top: .5rem; }
  .hero { padding: 2.5rem 1rem 2.5rem 4rem; min-height: 70vh; }
  .poste { left: .75rem; width: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .poste { animation: none; }
  html { scroll-behavior: auto; }
}