html, body {
    overflow-x: hidden;
  }


/* 🎨 Paleta de colores personalizada */
:root {
  --color-primary: #7a5c3d; /* Marrón piedra */
  --color-secondary: #c8b48a; /* Arena */
  --color-accent: #e8dfd3; /* Beige suave */
  --color-bg-light: #fdfaf6; /* Fondo claro */
  --color-bg-dark: #2a2a2a; /* Fondo oscuro */
  --color-text-dark: #1a1a1a;
}
/* Tipografía base */
body {
  font-family: 'Merriweather', serif;
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
}

/* Titulares */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-primary);
}

/* Botones */
button, .btn {
  background-color: var(--color-primary);
  color: white;
  transition: background 0.3s ease;
}
button:hover, .btn:hover {
  background-color: var(--color-secondary);
}

/* Links */
a {
  color: var(--color-primary);
  transition: color 0.3s ease;
}
a:hover {
  color: var(--color-secondary);
}

/* Hero overlay */
.hero-overlay {
  background-color: rgba(0, 0, 0, 0.45);
  padding: 1rem;
  border-radius: 5px;
}