/* ============================================
   GLOBAL POLISH - Animations & Styles
   ============================================ */

/* Smooth Reveal Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children (for grids) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(n+5) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

/* Elegant Icons (Replacing Emojis) */
.elegant-icon {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Gradient text wrapper for specific icon containers */
.icon-gradient-purple { color: #a855f7; }
.icon-gradient-pink { color: #ec4899; }
.icon-gradient-gold { color: #d4af6e; }
.icon-gradient-blue { color: #3b82f6; }

/* ============================================
   GLASSMORPHISM DESIGN SYSTEM
   Tarjetas, chips de icono, labels y botones
   coherentes para todo el sitio.
   ============================================ */

/* Eyebrow label — reemplaza los H2 con gradiente repetido */
.eyebrow-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f0abfc;
}
.eyebrow-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Glass card — base para cards de contenido (Experiencias, etc.) */
.glass-card {
  position: relative;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1.5rem;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
              0 20px 50px -20px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background 0.35s ease;
}
.glass-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
              0 30px 60px -20px rgba(0, 0, 0, 0.7),
              0 0 40px -10px var(--glow-color, rgba(236, 72, 153, 0.25));
}

/* Glass icon chip — un solo lenguaje visual para todos los iconos */
.glass-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--chip-from, rgba(168,85,247,0.16)), var(--chip-to, rgba(236,72,153,0.10)));
  border: 1px solid var(--chip-border, rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--chip-color, #f3e8ff);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.35s ease;
}
.glass-card:hover .glass-icon-chip {
  transform: scale(1.08) rotate(-3deg);
  border-color: var(--chip-color, rgba(255, 255, 255, 0.3));
}

/* Glass panel — overlay translúcido sobre fotos (Nightlife / Gastronomía) */
.glass-photo-panel {
  background: rgba(8, 4, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-radius: 1.1rem;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}

/* Venue card — fotos de Nightlife/Gastronomía con panel de vidrio flotante */
.venue-card {
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.venue-card:hover {
  transform: translateY(-6px);
}

/* Botón secundario "glass" — para acciones de card (Ver detalle, Más info) */
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.7rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn-glass:hover {
  background: rgba(236, 72, 153, 0.18);
  border-color: rgba(236, 72, 153, 0.45);
  transform: translateY(-1px);
}