/* ================================
   CONFIGURAÇÕES GERAIS
================================ */
*{
  box-sizing:border-box;
}

/* FUNDO GERAL DO SITE */
body{
  margin:0;
  font-family:Arial, sans-serif;
  background:#0b0b0b; /* cor de fundo geral */
  color:#fff;
}

/* ================================
   TOPO / CAPA (HERO)
================================ */
.hero{
  position:relative;
  text-align:center;
  padding:60px 20px; /* ↑ aumenta/↓ diminui altura do topo */
  background:url('logo.png') center/cover no-repeat; /* imagem de fundo */
}

/* ESCURECE A IMAGEM DE FUNDO */
.hero .overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7); /* ↓ menos escuro | ↑ mais escuro */
}

.hero *{
  position:relative;
}

/* LOGO PRINCIPAL (TOPO) */
.logo{
  width:120px;      /* 🔥 tamanho da logo */
  margin-bottom:20px;
}

/* ================================
   TÍTULOS
================================ */
.titulo{
  text-align:center;
  color:#c8a24a; /* cor dourada */
}

/* ================================
   CARDS DOS SERVIÇOS
================================ */
.cards{
  display:grid;
  grid-template-columns:1fr 1fr; /* duas colunas no celular */
  gap:14px;
  padding:20px;
}

/* BOTÃO / CARD DO CORTE */
.card{
  position:relative;

  /* 🔥 IMAGEM OCUPANDO O BOTÃO TODO */
  background:url('logo.png') center/cover no-repeat;

  border:1px solid #c8a24a;
  border-radius:18px;
  padding:30px 10px; /* altura do botão */
  text-align:center;
  cursor:pointer;
  overflow:hidden;
  transition:0.3s;
}

/* ESCURECE A IMAGEM DO BOTÃO */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65); /* ↓ menos escuro | ↑ mais escuro */
}

/* TEXTO SOBRE A IMAGEM */
.card h3,
.card p{
  position:relative;
  z-index:2;
}

.card h3{
  font-size:16px;
}

.card p{
  font-weight:bold;
  color:#c8a24a;
}

/* EFEITO AO PASSAR O DEDO */
.card:hover{
  transform:scale(1.03);
}

/* ================================
   ESCONDER ELEMENTOS
================================ */
.hidden{
  display:none;
}

/* ================================
   DATA / CALENDÁRIO
================================ */
.data-box{
  text-align:center;
  margin:10px;
}

/* ================================
   HORÁRIOS
================================ */
.horarios{
  display:grid;
  grid-template-columns:repeat(4,1fr); /* 4 horários por linha */
  gap:10px;
  padding:15px;
}

/* BOTÃO DE HORÁRIO */
.hora{
  padding:14px;
  border-radius:12px;
  background:#1f1f1f;
  text-align:center;
  font-weight:bold;
  cursor:pointer;
}

/* HORÁRIO OCUPADO */
.ocupado{
  background:#444;
  color:#777;
  pointer-events:none;
}

/* HORÁRIO SELECIONADO */
.selecionado{
  background:#7b1e1e;
}

/* ================================
   INPUTS
================================ */
input{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:none;
  margin-top:8px;
}

/* ================================
   BOTÕES
================================ */

/* BOTÃO PRINCIPAL (CONFIRMAR) */
.btn-principal{
  margin-top:15px;
  padding:14px;
  border-radius:14px;
  border:none;
  background:#7b1e1e; /* cor principal */
  color:#fff;
  font-weight:bold;
  cursor:pointer;
}

/* BOTÃO SECUNDÁRIO */
.btn-secundario{
  padding:10px;
  border-radius:10px;
  border:1px solid #c8a24a;
  background:none;
  color:#c8a24a;
  cursor:pointer;
}

/* BOTÃO VOLTAR */
.btn-voltar{
  background:none;
  border:none;
  color:#c8a24a;
  margin-bottom:10px;
  cursor:pointer;
}

/* LINK DO PAINEL */
.painel-link{
  display:block;
  text-align:center;
  color:#c8a24a;
  margin:25px;
}

/* ================================
   PAINEL ADMIN
================================ */
.admin-body{
  min-height:100vh;
  background:url('logo.png') center/cover no-repeat;
}

/* CARD CENTRAL DO ADMIN */
.admin-card{
  max-width:520px;
  margin:40px auto;
  background:rgba(0,0,0,.85);
  padding:25px;
  border-radius:16px;
  border:1px solid #c8a24a;
}

/* CABEÇALHO ADMIN */
.admin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO PEQUENA DO ADMIN */
.logo-sm{
  width:60px; /* tamanho da logo no admin */
}

/* SEÇÕES DO ADMIN */
.admin-section{
  margin-top:20px;
}

/* INPUTS LADO A LADO */
.flex{
  display:flex;
  gap:10px;
}

/* LINHAS DA AGENDA */
.linha{
  display:flex;
  justify-content:space-between;
  padding:10px;
  border-bottom:1px solid #333;
}

/* STATUS */
.livre{
  color:#3cb371;
}

.reservado{
  color:#ff6347;
}