/* Importamos tipografías */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@400;700&display=swap');

:root {
  /* Colores base */
  --color-primary-50: #fff7ed;
  --color-primary-100: #ffedd5;
  --color-primary-200: #fed7aa;
  --color-primary-300: #fdba74;
  --color-primary-400: #fb923c;
  --color-primary-500: #f97316;
  --color-primary-600: #ea580c;
  --color-primary-700: #c2410c;
  --color-primary-800: #9a3412;
  --color-primary-900: #7c2d12;

  --color-secondary-50: #fafaf9;
  --color-secondary-100: #f5f5f4;
  --color-secondary-200: #e7e5e4;
  --color-secondary-300: #d6d3d1;
  --color-secondary-400: #a8a29e;
  --color-secondary-500: #78716c;
  --color-secondary-600: #57534e;
  --color-secondary-700: #44403c;
  --color-secondary-800: #292524;
  --color-secondary-900: #1c1917;
}

/* Base tipográfica */
body {
  font-family: 'Inter', sans-serif;
  color: var(--color-secondary-800);
  background-color: var(--color-secondary-50);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', serif;
  color: var(--color-primary-800);
}

/* Hero con gradiente */
.hero-bg {
  background-image: linear-gradient(rgba(255,247,237,0.9), rgba(255,247,237,0.9)),
                    url('../img/hero.jpg'); /* cambia hero.jpg por tu imagen real */
  background-size: cover;
  background-position: center;
}

/* Botones principales */
.btn-primary {
  background-color: var(--color-primary-600);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--color-primary-700);
}

/* Formularios */
input, textarea {
  border: 1px solid var(--color-secondary-300);
  border-radius: 0.375rem;
  padding: 0.5rem;
  width: 100%;
  background-color: white;
  font-family: 'Inter', sans-serif;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-200);
}

/* Footer y prefooter coherentes */
footer {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

footer a {
  color: var(--color-primary-700);
  text-decoration: none;
}
footer a:hover {
  color: var(--color-primary-900);
  text-decoration: underline;
}

section.bg-amber-900 a.btn-primary {
  background-color: white;
  color: var(--color-primary-700);
}
section.bg-amber-900 a.btn-primary:hover {
  background-color: var(--color-primary-200);
}

/* Carrusel de fondo con fade automático */
.carousel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: carouselFade 40s infinite;
  opacity: 0.9;
}

/* Lista de imágenes: cambia las rutas por las tuyas */
@keyframes carouselFade {
  0%   { background-image: url('../img/hero1.jpg'); }
  20%  { background-image: url('../img/hero2.jpg'); }
  40%  { background-image: url('../img/hero3.jpg'); }
  60%  { background-image: url('../img/hero4.jpg'); }
  80%  { background-image: url('../img/hero5.jpg'); }
  100% { background-image: url('../img/hero1.jpg'); }
}