@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300;400;600;800&display=swap');

/* Variables de Color (Cálidos, Nostálgicos, Tierra) */
:root {
  --color-terracota: #B74F3B;
  --color-ambar: #D98324;
  --color-tierra: #8C5A45;
  --color-arena: #F4ECE1;
  --color-oliva: #7B8C5A;
  --color-oscuro: #3A2E2A;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--color-arena);
  color: var(--color-oscuro);
}

h1, h2, h3, .font-serif {
  font-family: 'Lora', serif;
}

/* Transiciones de vistas para la SPA */
.view-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.98);
}

.view-section.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.hidden {
  display: none !important;
}

/* Carrusel de Fondo Animado */
.slideshow-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: slideAnimation 24s infinite;
}

/* Fotos del Cañón del Chicamocha, Girón Colonial y Panorámica */
.slide-1 {
  background-image: url('https://images.unsplash.com/photo-1596431940984-7a32d1e2e7a3?q=80&w=2000&auto=format&fit=crop');
  animation-delay: 0s;
}

.slide-2 {
  background-image: url('https://images.unsplash.com/photo-1588636734563-39f20e4d7734?q=80&w=2000&auto=format&fit=crop');
  animation-delay: 8s;
}

.slide-3 {
  background-image: url('https://images.unsplash.com/photo-1519077227690-343209867761?q=80&w=2000&auto=format&fit=crop');
  animation-delay: 16s;
}

@keyframes slideAnimation {
  0% { opacity: 0; transform: scale(1); }
  10% { opacity: 1; }
  33% { opacity: 1; }
  43% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1); }
}

/* Tarjetas Estilo Polaroid / Recuerdo */
.memory-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 10px 15px rgba(183, 79, 59, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(183, 79, 59, 0.1);
  cursor: pointer;
}

.memory-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0,0,0,0.1), 0 15px 25px rgba(183, 79, 59, 0.2);
}

/* Ajustes del slider para móviles */
input[type=range] {
  -webkit-appearance: none;
  background: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--color-terracota);
  cursor: pointer;
  margin-top: -10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  border: 2px solid white;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: rgba(183, 79, 59, 0.3);
  border-radius: 3px;
}

/* Custom Scrollbar para un look más limpio */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent; 
}
::-webkit-scrollbar-thumb {
  background: rgba(183, 79, 59, 0.3); 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(183, 79, 59, 0.6); 
}