:root {
  --primary: #bfa88f;
  --secondary: #333;
  --background: #faf8f5;
  --font-main: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  --bg-1: #e7e7e7;
  --bg-2: #f1f2f3;
}

* {
  box-sizing: border-box;
}

.hero-bg {
  background-image: url('../assets/images/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 700px;
}

.text-shadow-lg {
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--secondary);
  background: var(--background);
  line-height: 1.6;
}

h1, h2 {
  font-family: var(--font-main);
  font-weight: 500;
}

.hero {
  text-align: center;
  padding: 4rem 1rem;
}

/* Animaciones sutiles */
.animate-fade-in,
.animate-slide-up,
.animate-slide-left,
.animate-slide-right,
.animate-scale,
.animate-delay {
  opacity: 0;
  transition: all 1s ease-out;
}

.animate-fade-in {
  transform: translateY(0);
}

.animate-slide-up {
  transform: translateY(30px);
}

.animate-slide-left {
  transform: translateX(-30px);
}

.animate-slide-right {
  transform: translateX(30px);
}

.animate-scale {
  transform: scale(0.9);
}

.animate-visible {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) !important;
}

/* Transición suave para imágenes */
img {
  transition: opacity 0.3s ease-in-out;
}

/* Animación de altura para expansión suave */
.expand-height {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 1s ease-out, opacity 0.9s ease-out, transform 0.9s ease-out;
}

.expand-height.expanded {
  max-height: 500px;
  opacity: 1;
}

.bg-1 {
  background-color: var(--bg-1);
}

.bg-2 {
  background-color: var(--bg-2);
}