/**
 * ═══════════════════════════════════════════════════════════════
 * PALETA DE COLORES - LOEX EXPEDITIONS
 * ═══════════════════════════════════════════════════════════════
 * 
 * COLORES BASE (Principales)
 * ---------------------------
 * Gold (Crayola):    #DEC08E  - Elegancia premium
 * Blood Red:         #5E0202  - Urgencia y acción
 * Dark Green:        #043700  - Naturaleza y confianza
 * 
 * DERIVADOS SUAVES (Tints & Shades)
 * ----------------------------------
 * 
 * FAMILIA GOLD:
 * • Gold Extra Light:  #F5ECDD (10% opacidad - fondos sutiles)
 * • Gold Light:        #E8D4B0 (30% más claro - fondos suaves, iconos)
 * • Gold Medium:       #C9A86A (20% más oscuro - botones, texto)
 * • Gold Dark:         #B89558 (hover states)
 * 
 * FAMILIA GREEN:
 * • Green Extra Light: #E8F5E4 (10% opacidad - fondos sutiles)
 * • Green Light:       #A8D5A0 (tint suave - no usado aún)
 * • Green Medium:      #2C5C24 (50% más claro - principal uso)
 * • Green Dark:        #3D7E33 (hover states)
 * • Green Base:        #043700 (solo badges específicos)
 * 
 * FAMILIA RED:
 * • Red Light:         #8B3A3A (tint suave - no usado aún)
 * • Red Medium:        #7D0303 (hover states)
 * • Red Base:          #5E0202 (precios, alerts)
 * 
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
 * FILTROS - USANDO PALETA OFICIAL
 * ═══════════════════════════════════════════════════════════════ */

/* Hover states para filtros */
.filter-days:hover,
.filter-type:hover {
  background-color: rgba(44, 92, 36, 0.1) !important;
  /* Green Medium 10% */
  color: #2C5C24 !important;
  /* Green Medium */
  border-color: #2C5C24 !important;
  transform: translateY(-1px);
}

.filter-days.active {
  background-color: #2C5C24 !important;
  /* Green Medium */
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(44, 92, 36, 0.25);
}

.filter-type.active {
  background-color: #C9A86A !important;
  /* Gold Medium */
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(201, 168, 106, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
 * TAB BUTTONS (Avistamientos) - USANDO PALETA OFICIAL
 * ═══════════════════════════════════════════════════════════════ */

.tab-btn:hover {
  background-color: #5E0202 !important;
  color: white !important;
  border-color: #5E0202 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(94, 2, 2, 0.2);
}

.tab-btn:hover i {
  color: white !important;
}

.tab-btn.active {
  background-color: #5E0202 !important;
  color: white !important;
  border-color: #5E0202 !important;
  box-shadow: 0 2px 4px rgba(94, 2, 2, 0.25);
}




/* Tab buttons smooth transitions */
.tab-btn {
  position: relative;
  overflow: hidden;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #DEC08E;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.tab-btn.active::after {
  transform: scaleX(1);
}

/* Smooth transitions for all interactive elements */
.filter-days,
.filter-type,
.tab-btn,
button,
a {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gallery item hover effects */
.gallery-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
}

/* Tour card animations */
.tour-card {
  transition: all 0.3s ease;
}

.tour-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ═══════════════════════════════════════════════════════════════
 * BOTONES - USANDO PALETA OFICIAL
 * ═══════════════════════════════════════════════════════════════ */

/* Green Medium → Green Dark */
button[style*="background-color: #2C5C24"]:hover,
a[style*="background-color: #2C5C24"]:hover {
  background-color: #3D7E33 !important;
  /* Green Dark */
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(44, 92, 36, 0.3);
}

/* Gold Medium → Gold Dark */
button[style*="background-color: #C9A86A"]:hover,
a[style*="background-color: #C9A86A"]:hover {
  background-color: #B89558 !important;
  /* Gold Dark */
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(201, 168, 106, 0.35);
}

/* Gold Light → Gold Base */
button[style*="background-color: #E8D4B0"]:hover,
a[style*="background-color: #E8D4B0"]:hover {
  background-color: #DEC08E !important;
  /* Gold Base */
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(232, 212, 176, 0.4);
}

/* Colores base (para badges y elementos fijos) */
button[style*="background-color: #043700"]:hover,
a[style*="background-color: #043700"]:hover {
  background-color: #065A00 !important;
  /* Green Base hover */
}

button[style*="background-color: #DEC08E"]:hover,
a[style*="background-color: #DEC08E"]:hover {
  background-color: #C9A86A !important;
  /* Gold Base → Gold Medium */
}

button[style*="background-color: #5E0202"]:hover,
a[style*="background-color: #5E0202"]:hover {
  background-color: #7D0303 !important;
  /* Red Base → Red Medium */
}

/* Link hover effects */
a[style*="color: #5E0202"]:hover {
  color: #043700 !important;
  opacity: 0.85;
}

/* Reset filters button hover */
#reset-filters:hover {
  color: #2C5C24 !important;
  /* Green Medium */
}

/* ═══════════════════════════════════════════════════════════════
 * TOUR CARDS - USANDO PALETA OFICIAL
 * ═══════════════════════════════════════════════════════════════ */

.tour-card:hover {
  border-color: rgba(44, 92, 36, 0.3) !important;
  /* Green Medium 30% */
  transform: translateY(-2px);
}

.tour-card:hover h3 {
  color: #2C5C24 !important;
  /* Green Medium */
}

/* Badge hover simple */
span[style*="background-color"] {
  transition: all 0.3s ease;
}

.tour-card:hover span[style*="background-color"] {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transform: scale(1.03);
}

/* ═══════════════════════════════════════════════════════════════
 * LODGE CARDS - USANDO PALETA OFICIAL
 * ═══════════════════════════════════════════════════════════════ */

/* Lodge card hover effects */
.group:has(img[alt*="lodge"]):hover,
.group:has(img[alt*="Lodge"]):hover {
  border-color: rgba(44, 92, 36, 0.3) !important;
  /* Green Medium hover */
  transform: translateY(-2px);
}

/* Lodge location icon and link colors */
a[href*="lodge"]:hover,
a[style*="color: #5E0202"]:hover {
  color: #7D0303 !important;
  /* Red Medium hover */
  opacity: 0.9;
}

/* CTA button pulse effect */
@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(94, 2, 2, 0.4);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(94, 2, 2, 0);
  }
}

.cta-button-pulse {
  animation: pulse-glow 2s infinite;
}

/* Focus states for accessibility */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #DEC08E;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Loading animation for async content */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.skeleton-loading {
  animation: shimmer 2s infinite;
  background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-size: 1000px 100%;
}

/* Gallery item hover effects */
.gallery-item:hover .badge {
  background-color: #5E0202 !important;
}

/* Map badge glow effect */
div[style*="rgba(222, 192, 142"]:hover {
  background-color: rgba(222, 192, 142, 0.5) !important;
  box-shadow: 0 0 20px rgba(222, 192, 142, 0.4);
}

/* Hero Section - Slider Controls */
.slider-prev:hover,
.slider-next:hover {
  background-color: rgba(222, 192, 142, 0.3) !important;
  border-color: rgba(222, 192, 142, 0.5) !important;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 0 20px rgba(222, 192, 142, 0.3);
}

.slider-prev:active,
.slider-next:active {
  background-color: rgba(94, 2, 2, 0.2) !important;
  border-color: rgba(94, 2, 2, 0.4) !important;
}

/* Slider dots */
.slider-dot:hover div {
  background-color: rgba(222, 192, 142, 0.4) !important;
}

.slider-dot.active i {
  color: #DEC08E !important;
}

.slider-dot.active:hover i {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(222, 192, 142, 0.6));
}

.slider-dot:hover div {
  background-color: rgba(222, 192, 142, 0.4) !important;
}

/* Success indicators - COLORES SUAVES */
.success-indicator {
  color: #2C5C24;
  background-color: rgba(44, 92, 36, 0.08);
}

/* Premium indicators - COLORES SUAVES */
.premium-indicator {
  color: #5E0202;
  background-color: rgba(232, 212, 176, 0.4);
}

/* Smooth transitions */
div[style*="background-color"] {
  transition: all 0.3s ease;
}