/* ============================================================
   🎨 VARIÁVEIS
============================================================ */
:root {
  --marrom-escuro: #8C4F2A;
  --marrom-claro: #B28E6C;
  --bege-amadeirado: #846F5E;
  --cinza-claro: #F0F0F0;
}

/* ============================================================
   🧱 BASE
============================================================ */
body {
  scroll-behavior: smooth;
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--cinza-claro);
  overflow-x: hidden;
}

h2 {
  color: var(--marrom-escuro);
}

/* ============================================================
   🧭 NAVBAR
============================================================ */
.navbar {
  background: linear-gradient(135deg, #5a2f1a 0%, #3e1f12 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
}

.navbar-nav .nav-link {
  color: #f5e9df !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #d8b08c !important;
}

.navbar-nav .nav-link::after {
  background: #d8b08c;
}

.navbar-brand img {
  filter: brightness(1.1);
}

.navbar-toggler {
  border-color: rgba(255,255,255,0.2);
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* ============================================================
   🧩 SEÇÕES
============================================================ */
section {
  min-height: 100vh;
  padding: 100px 0;
  display: flex;
  align-items: center;
}

section.conteudo-normal {
  min-height: auto;
  padding: 80px 0;
  display: block;
}

/* ============================================================
   🌿 HOME
============================================================ */

.home-hero {
  position: relative;
  min-height: 100vh; /* 🔥 ocupa a tela inteira */
  display: flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

/* 📸 IMAGEM BACKGROUND */
.home-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.home-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 🔥 cobre toda a área */
}

/* 🔥 OVERLAY ESCURO PARA LEGIBILIDADE */
.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

/* 📄 CONTEÚDO */
.home-hero .container {
  position: relative;
  z-index: 2;
}

/*ttexto justificado*/
.text-justificado{
  text-align: justify;
}

/* TÍTULO */
.titulo-principal {
  color: #fff;
  font-weight: 700;
  text-align: left;
}

/* TEXTOS */
.subtitulo {
  color: #f1e9e4;
}

.descricao {
  color: #e0d6cf;
}

/* 🔥 JUSTIFICADO + ALINHADO À ESQUERDA */
.subtitulo,
.descricao,
.texto-extra {
  text-align: justify;
}

/* TEXTO EXTRA */
.texto-extra {
  color: #ffffff;
  opacity: 0.95;
}

/* BOTÃO (mantém seu estilo) */
.btn-agendar {
  background: #c8a27a;
  color: #fff;
  border: none;
}

.btn-agendar:hover {
  background: #b8936d;
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .home-hero {
    padding: 60px 20px;
    min-height: auto;
  }

  .titulo-principal {
    font-size: 1.6rem;
  }
}


.home-bg picture,
.home-bg img {
  width: 100%;
  height: 100%;
  display: block;
}

.home-bg img {
  object-fit: cover;
}

@media (max-width: 768px) {
  .home-bg img {
    object-position: bottom center; /* foca na pessoa */
  }
}
/* ============================================================
   🔘 BOTÕES
============================================================ */
.btn-agendar {
  background: var(--marrom-escuro);
  color:#fff;
  border-radius:40px;
  padding:14px 40px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  min-width:320px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  transition:.3s;
}

.btn-agendar:hover {
  background:#B28E6C;
  transform:scale(1.07);
}

.btn-agendar .subtexto {
  font-size:.85rem;
}

/* ============================================================
   🎞️ ANIMAÇÕES
============================================================ */
@keyframes pulse {
  0%{transform:scale(1)}
  70%{transform:scale(1.05)}
  100%{transform:scale(1)}
}

.pulse {
  animation: pulse 2s infinite;
}

/* ============================================================
   🧑‍🤝‍🧑 CLIENTES / CARDS
============================================================ */
.card-cliente {
  background: linear-gradient(145deg,#F9F4EF,#F2E6DA);
  border-radius:18px;
  padding:30px;
  width:340px;
  height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(140,79,42,.15);
  transition:.4s;
}

.card-cliente:hover {
  transform:translateY(-8px) scale(1.05);
}

/* ============================================================
   📅 AGENDA (CARROSSEL)
============================================================ */
.carrossel-container {
  display:flex;
  overflow-x:auto;
  gap:12px;
  scroll-snap-type:x mandatory;
}

.dia-card {
  width:180px;
  background:#fff;
  border-radius:10px;
  padding:10px;
  flex:0 0 auto;
}

.horario {
  padding:8px;
  margin-bottom:6px;
  text-align:center;
  border-radius:4px;
}

.disponivel { background:#d4edda; }
.agendado { background:#f8d7da; }
.bloqueado { background:#eee; }

/* ============================================================
   🌟 VANTAGENS
============================================================ */
.card-vantagens {
  background:#fff;
  padding:20px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
}

/* ============================================================
   🦶 FOOTER
============================================================ */
footer {
  background: var(--marrom-escuro);
  color:#fff;
}

/* ============================================================
   📱 RESPONSIVO
============================================================ */
@media(max-width:991px){
  #home .titulo-principal,
  #home .subtitulo,
  #home .descricao {
    max-width:100%;
    text-align:center;
  }
}

@media(max-width:768px){
  section { padding:60px 0; }
  .titulo-principal { font-size:1.8rem; }
  .dia-card { width:140px; }
}

@media(max-width:480px){
  .dia-card { width:120px; }
}

/* ============================================================
   ⭐ AVALIAÇÃO (VERSÃO PROFISSIONAL)
============================================================ */

/* Container (opcional mas recomendado) */
#avaliacaoModal .text-center {
  user-select: none;
}

/* Estrela base */
.star {
  font-size: 45px;              /* tamanho ideal */
  cursor: pointer;
  color: #dcdcdc;               /* cinza mais suave */
  transition: all 0.2s ease;
  display: inline-block;
  margin: 0 6px;                /* espaçamento */
  padding: 6px;                 /* área de clique maior */
  border-radius: 8px;           /* suaviza hover */
}

/* Hover (pré-visualização) */
.star.hovered {
  color: #ffc107;
  transform: scale(1.2);
}

/* Selecionado (nota escolhida) */
.star.selected {
  color: #ffc107;
  transform: scale(1.15);
}

/* Hover geral (quando passa rápido) */
.star:hover {
  transform: scale(1.25);
}

/* Efeito suave ao clicar */
.star:active {
  transform: scale(0.95);
}

/* Texto da nota (feedback) */
#textoNota {
  font-size: 14px;
  letter-spacing: 0.5px;
  min-height: 20px; /* evita pulo de layout */
}

/* Melhor responsividade */
@media (max-width: 480px) {
  .star {
    font-size: 38px;
    margin: 0 4px;
    padding: 4px;
  }
}


/*======================================
AGENDA
=========================================*/
.dia-card {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06);
  transition: 0.3s;
  cursor: pointer;
}

.dia-card:hover {
  background: #f1fff0;
  transform: translateX(5px);
}
/* Quando agenda aberta */
.dia-card.aberto {
  border: 2px solid #28a745;
  color: #28a745;
}

/* Quando agenda fechada */
.dia-card.fechado {
  border: 2px solid #dc3545;
  color: #dc3545;
  opacity: 0.6;
}