/* ==========================================================================
   CRIS MASSOTERAPIA — MEU ESPAÇO GAIA
   Folha de Estilos Principal (Inspirada na estética Calmora Therapy)
   ========================================================================== */

:root {
  --bg-warm: #FAF7F2;
  --bg-soft: #F3EFE6;
  --terracotta: #B77A6C;
  --terracotta-dark: #8F4C3E;
  --terracotta-light: #F4E8E5;
  --sage-light: #E2E7DF;
  --sage: #6E7F6B;
  --sage-dark: #52614F;
  --espresso: #2D2424;
  --coffee: #5A4D4D;
  --border-warm: #E6DFD5;
}

/* ==========================================================================
   1. CONFIGURAÇÕES GERAIS E ROLAGEM SUAVE
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background-color: var(--bg-warm);
  color: var(--espresso);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .font-serif-display {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Seleção de texto personalizada */
::selection {
  background-color: var(--terracotta);
  color: #ffffff;
}

/* Barra de rolagem refinada */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-warm);
}

::-webkit-scrollbar-thumb {
  background: #D5C9BC;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--terracotta);
}

/* ==========================================================================
   2. MOLDURAS E CARTÕES ARQUEADOS (ESTILO ARQUITETÔNICO CALMORA)
   ========================================================================== */

/* Moldura em arco superior para imagens principais */
.arch-frame {
  border-radius: 260px 260px 24px 24px;
}

/* Moldura oval/arco orgânico para a seção Sobre */
.arch-portrait {
  border-radius: 280px 280px 40px 40px;
}

/* Cartões de serviços com topo arqueado */
.arch-card {
  border-radius: 150px 150px 24px 24px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.arch-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -12px rgba(45, 36, 36, 0.09);
}

/* Cartão em destaque (Mais Procurado) */
.arch-card-featured {
  border-radius: 150px 150px 24px 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF5F2 100%);
  box-shadow: 0 20px 45px -10px rgba(183, 122, 108, 0.16);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.arch-card-featured:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 55px -10px rgba(143, 76, 62, 0.22);
}

/* ==========================================================================
   3. NAVBAR E EFEITO GLASSMORPHISM
   ========================================================================== */
.navbar-glass {
  background-color: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.35s ease;
}

.navbar-scrolled {
  background-color: rgba(250, 247, 242, 0.96);
  box-shadow: 0 8px 30px rgba(45, 36, 36, 0.05);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Sublinhado elegante nos links do menu */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--terracotta-dark);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ==========================================================================
   4. ANIMAÇÕES DE REVELAÇÃO NO SCROLL E EFEITOS VISUAIS
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}

/* Animação pulsante suave do botão flutuante de WhatsApp */
@keyframes pulse-soft {
  0% {
    box-shadow: 0 0 0 0 rgba(110, 127, 107, 0.55);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(110, 127, 107, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(110, 127, 107, 0);
  }
}

.whatsapp-float {
  animation: pulse-soft 2.6s infinite;
}

/* Decoração orgânica de fundo */
.organic-blob {
  filter: blur(65px);
  pointer-events: none;
  z-index: 0;
}