/* Cores do tema da pagina */
:root {
  --cor-principal: #914600da;
  --cor-principal-hover: #a85a1ada;
  --cor-principal-active: #6e3500da;
}

/* Estilo do menu */
.navbar {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.navbar-toggler {
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Estilo para o botão personalizado */
.btn-person {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cor-principal);
  --bs-btn-border-color: var(--cor-principal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cor-principal-hover);
  --bs-btn-hover-border-color: var(--cor-principal-hover);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cor-principal-active);
  --bs-btn-active-border-color: var(--cor-principal-active);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--cor-principal);
  --bs-btn-disabled-border-color: var(--cor-principal);
}

/* Estilo para o botão outline personalizado */
.btn-outline-person {
  --bs-btn-color: var(--cor-principal);
  --bs-btn-border-color: var(--cor-principal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cor-principal);
  --bs-btn-hover-border-color: var(--cor-principal);
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cor-principal);
  --bs-btn-active-border-color: var(--cor-principal);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--cor-principal);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--cor-principal);
  --bs-gradient: none;
}

/* Estilo para o botão personalizado */
.btn-custom {
  background-color: var(--cor-principal);
  /* Cor de fundo */
  border-color: var(--cor-principal);
  /* Cor da borda */
  color: #ffffff;
  /* Cor do texto */
  font-size: 18px;
  /* Tamanho da fonte */
  font-weight: 0;
  /* Peso da fonte */
  padding: 10px 20px;
  /* Padding do botão */
  text-align: center;
  /* Alinhamento do texto */
  /* text-transform: uppercase;  Transformação do texto para maiúsculas */
  border-radius: 10px;
  /* Borda arredondada */
  transition: all 0.3s ease;
  /* Transição suave */
}

/* Efeito de hover (passar o mouse sobre o botão) */
.btn-custom:hover {
  background-color: var(--cor-principal-hover);
  /* Cor de fundo ao passar o mouse */
  border-color: var(--cor-principal-hover);
  /* Cor da borda ao passar o mouse */
  color: #ffffff;
  /* Cor do texto ao passar o mouse */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Sombra leve ao passar o mouse */
}

/* Efeito de foco (ao clicar no botão) */
.btn-custom:focus {
  outline: none;
  /* Remove a linha de contorno padrão do Bootstrap */
  box-shadow: 0 0 10px rgba(116, 80, 58, 0.25);
  /* Sombra de foco personalizada */
}

/* Efeito de desabilitado (quando o botão estiver desabilitado) */
.btn-custom:disabled {
  background-color: #d3d3d3;
  /* Cor de fundo quando desabilitado */
  border-color: #d3d3d3;
  /* Cor da borda quando desabilitado */
  color: #aaa;
  /* Cor do texto quando desabilitado */
  cursor: not-allowed;
  /* Cursor desabilitado */
}

/* Definindo a cor do texto para uma classe com prefixo text- */
.text-primary-custom {
  color: var(--cor-principal);
  /* Cor de texto personalizada */
  /* user-select: none;  Impede a seleção do texto (evita a mudança de cor ao arrastar) */
}

/* Efeito de hover (passar o mouse sobre o botão) */
.text-primary-custom:hover {
  background-color: transparent;
  /* Cor de fundo ao passar o mouse */
  border-color: transparent;
  /* Cor da borda ao passar o mouse */
  color: var(--cor-principal);
  /* Cor do texto ao passar o mouse */
}

/* Efeito para texto selecionado - evita a cor preta ao selecionar o texto */
.text-primary-custom::selection {
  background-color: transparent;
  /* Fundo transparente na seleção */
  color: var(--cor-principal);
  /* Mantém a cor do texto ao selecionar */
}

/* Garantindo que o texto não fique preto ao selecionar (em todos os navegadores) */
.text-primary-custom::-moz-selection {
  background-color: transparent;
  /* Fundo transparente na seleção no Firefox */
  color: var(--cor-principal);
  /* Cor do texto no Firefox */
}

/* Garantindo a cor do texto mesmo ao focar no link (evita a cor preta no foco) */
.text-primary-custom:focus {
  outline: none;
  /* Remove o contorno padrão de foco */
  color: var(--cor-principal);
  /* Garante a cor personalizada ao focar */
}

/* Evita mudanças de cor ao clicar no link ou elemento */
.text-primary-custom:active {
  color: var(--cor-principal);
  /* Garante a cor personalizada ao clicar */
}

/* Botao WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25d366;
  color: white;
  font-size: 22px;
  padding: 12px 16px;
  border-radius: 50%;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.card-custom {
  transition: all 0.3s ease;
  cursor: pointer;
}

.card-custom:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.card-custom i {
  display: inline-block;
  transition: all 0.3s ease;
}

.card-custom:hover i {
  transform: scale(1.1) rotate(-5deg);
  color: var(--cor-principal);
}

/* .card-tag{
  display:inline-block;
  font-size:12px;
  padding:4px 10px;
  border-radius:20px;
  background:#f3f3f3;
  color:#555;
  margin-bottom:10px;
} */

.card-tag{
  display: inline-block;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  font-weight: 500;
  letter-spacing: .3px;
  border: 1px solid transparent;
}

.card-tag{
  transition: all 0.25s ease;
}

.card-custom:hover .card-tag{
  transform: translateY(-1px);
}

.tag-capilar{
  background: #fff0e8;
  color: #8f3b14;
  border-color: #efc2a8;
}

.tag-facial{
  background: #fff0f5;
  color: #b03060;
  border-color: #f3c6d6;
}

.tag-corporal{
  background: #f0f7ff;
  color: #1e5aa8;
  border-color: #cfe3ff;
}

.tag-pele{
  background: #f1fbf3;
  color: #2e7d32;
  border-color: #cfead5;
}

.tag-avancado{
  background: #f6f1ff;
  color: #6a3dbf;
  border-color: #e2d4ff;
}