/* Design System — Rosi Ribeiro: Estética Avançada e Beleza */
/* Paleta: tons terrosos, rosados e creme — sofisticação, acolhimento, autoridade */

:root {
  /* Paleta Principal */
  --canvas: #FAF7F5;
  --surface: #FFFFFF;
  --taupe: #B5997F;
  --taupe-dark: #9A7E65;
  --terracotta: #A66B64;
  --terracotta-dark: #8B554F;
  --bronze: #D4A373;
  --bronze-dark: #C39358;
  --text-main: #1F1B18;
  --text-muted: #6E655F;
  --whatsapp: #25D366;

  /* Variações Complementares */
  --taupe-light: #C4AD98;
  --terracotta-light: #C4908A;
  --creme-medio: #F4F0EB;
  --white: #FFFFFF;
}

/* Backgrounds */
.bg-canvas { background-color: var(--canvas); }
.bg-surface { background-color: var(--surface); }
.bg-taupe { background-color: var(--taupe); }
.bg-taupe-dark { background-color: var(--taupe-dark); }
.bg-terracotta { background-color: var(--terracotta); }
.bg-terracotta-dark { background-color: var(--terracotta-dark); }
.bg-bronze { background-color: var(--bronze); }
.bg-creme-medio { background-color: var(--creme-medio); }

/* Texto */
.text-canvas { color: var(--canvas); }
.text-surface { color: var(--surface); }
.text-taupe { color: var(--taupe); }
.text-taupe-dark { color: var(--taupe-dark); }
.text-terracotta { color: var(--terracotta); }
.text-terracotta-dark { color: var(--terracotta-dark); }
.text-bronze { color: var(--bronze); }
.text-bronze-dark { color: var(--bronze-dark); }
.text-main { color: var(--text-main); }
.text-muted { color: var(--text-muted); }

/* Bordas */
.border-terracotta { border-color: var(--terracotta); }
.border-taupe { border-color: var(--taupe); }
.border-bronze { border-color: var(--bronze); }

/* Hover States */
.hover\:bg-taupe-dark:hover { background-color: var(--taupe-dark); }
.hover\:bg-terracotta-dark:hover { background-color: var(--terracotta-dark); }
.hover\:text-terracotta:hover { color: var(--terracotta); }
.hover\:text-taupe:hover { color: var(--taupe); }

/* Transições */
.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Sombras Suaves */
.shadow-soft {
  box-shadow: 0 2px 15px -3px rgba(166, 107, 100, 0.15), 0 4px 6px -2px rgba(166, 107, 100, 0.05);
}

.shadow-card {
  box-shadow: 0 4px 20px -5px rgba(31, 27, 24, 0.1), 0 2px 8px -2px rgba(166, 107, 100, 0.08);
}

/* Animações */
@keyframes pulse-whatsapp {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
}

.animate-pulse-whatsapp {
  animation: pulse-whatsapp 2s infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Tipografia */
.font-serif {
  font-family: 'Cormorant Garamond', 'Cinzel', Georgia, serif;
}

/* Gradientes Decorativos */
.gradient-taupe {
  background: linear-gradient(135deg, var(--taupe) 0%, var(--terracotta) 100%);
}

.gradient-bronze {
  background: linear-gradient(135deg, var(--bronze) 0%, var(--terracotta) 100%);
}

/* Divisor Decorativo */
.divisor-estrela {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.divisor-estrela::before,
.divisor-estrela::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
}

/* Cards */
.card-servico {
  background-color: var(--surface);
  border: 1px solid rgba(181, 153, 127, 0.2);
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

.card-servico:hover {
  border-color: var(--terracotta);
  box-shadow: 0 8px 30px -8px rgba(166, 107, 100, 0.2);
  transform: translateY(-4px);
}

/* Badges */
.badge-taupe {
  background-color: var(--taupe);
  color: var(--white);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-terracotta {
  background-color: var(--terracotta);
  color: var(--white);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Botões */
.btn-primary {
  background-color: var(--terracotta);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--terracotta-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(166, 107, 100, 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: var(--terracotta);
  border: 2px solid var(--terracotta);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--terracotta);
  color: var(--white);
}

.btn-whatsapp {
  background-color: var(--whatsapp);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #1ebe57;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Seções */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--taupe-light), transparent);
  margin: 4rem 0;
}

/* Acordeão FAQ */
details summary {
  cursor: pointer;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] summary .faq-icon {
  transform: rotate(45deg);
}

.faq-icon {
  transition: transform 0.3s ease;
}

/* Tabs de Serviços */
.tab-button {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tab-button.active {
  background-color: var(--terracotta);
  color: var(--white);
}

.tab-button:not(.active) {
  background-color: var(--creme-medio);
  color: var(--text-main);
}

.tab-button:not(.active):hover {
  background-color: var(--taupe-light);
}

/* Imagens */
.img-hero {
  border-radius: 1rem;
  box-shadow: 0 20px 40px -10px rgba(31, 27, 24, 0.2);
}

.img-card {
  border-radius: 0.75rem;
  object-fit: cover;
}

/* Scroll Suave */
html {
  scroll-behavior: smooth;
}

/* Seleção de Texto */
::selection {
  background-color: var(--terracotta);
  color: var(--white);
}