/* ============================================
   ALDEA KANA - Estilos Personalizados
   Bio Hábitat Properties, S.A. de C.V.
   ============================================ */

:root {
  --color-verde-principal: #4A594B;
  --color-tierra: #625C4A;
  --color-bg-light: #F9F8F5;
  --color-bg-surface: #FFFFFF;
  --color-text-main: #2C332C;
  --color-text-muted: #6E756F;
  --color-accent-gold: #C5A059;
  --status-disponible: #3B7A57;
  --status-reservado: #D99B26;
  --status-vendido: #A94442;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background-color: var(--color-verde-principal);
  color: white;
}

/* Animaciones */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.7s ease-out forwards;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }

/* Efecto Ken Burns para Hero */
@keyframes kenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}
.animate-ken-burns {
  animation: kenBurns 12s ease-in-out infinite alternate;
}

/* Hero Section */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(44, 51, 44, 0.5) 0%,
    rgba(44, 51, 44, 0.35) 50%,
    rgba(44, 51, 44, 0.7) 100%
  );
}

/* Tarjetas de lote */
.lote-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lote-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44, 51, 44, 0.15);
}

/* Sliders */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #e2e8f0;
  border-radius: 5px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-verde-principal);
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Modal/Galería */
.modal-overlay {
  background: rgba(44, 51, 44, 0.85);
  backdrop-filter: blur(4px);
}

/* Efecto ripple en botones */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.2);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-ripple:hover::after {
  opacity: 1;
}

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-light); }
::-webkit-scrollbar-thumb { background: var(--color-verde-principal); border-radius: 4px; }

/* Línea decorativa */
.decorative-line {
  width: 60px;
  height: 3px;
  background: var(--color-accent-gold);
  margin: 0 auto 1.5rem;
}

/* Textura rústica para banners */
.texture-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234A594B' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Mapa de lotes interactivo */
.lote-polygon {
  transition: fill 0.3s ease, stroke 0.3s ease;
  cursor: pointer;
}
.lote-polygon:hover {
  filter: brightness(1.2);
  stroke-width: 3;
}

/* Toast Notifications */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  animation: fadeInUp 0.3s ease-out;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.toast-success { background: var(--status-disponible); }
.toast-error { background: var(--status-vendido); }
.toast-info { background: var(--color-verde-principal); }

/* Loading Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(74, 89, 75, 0.2);
  border-top-color: var(--color-verde-principal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }