@import url('https://fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

:root {
  --color-primary: #642c0a;
  --color-secondary: #a66826;
  --color-surface: #fff9ec;
  --color-cream: #f7f0dd;
  --color-border: #e6dbc3;
  --color-text: #1e1c10;
  --color-muted: #53433c;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

.font-serif-brand {
  font-family: 'Caudex', serif;
}

/* Efecto de cristal esmerilado para el Header */
.header-glass {
  background-color: rgba(255, 249, 236, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(230, 219, 195, 0.6);
}

/* Fondo Hero con superposición fotográfica */
.hero-overlay {
  background-image: linear-gradient(
      to right,
      rgba(30, 20, 15, 0.94) 0%,
      rgba(50, 30, 20, 0.84) 45%,
      rgba(40, 25, 18, 0.5) 80%,
      rgba(20, 15, 10, 0.3) 100%
    ),
    url('../assets/images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
}

/* Transición suave para tarjetas de producto */
.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(100, 44, 10, 0.1);
}