/* ═══════════════════════════════════════════════════════════════
   main.css — LR Presets Catalog
   Estilos complementarios a Tailwind CDN
   ═══════════════════════════════════════════════════════════════ */

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

/* ─── Base ──────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #0a0a0a;
  color: #e5e5e5;
  min-height: 100vh;
}

/* ─── Scrollbar personalizada ───────────────────────────────── */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ─── Selección de texto ────────────────────────────────────── */

::selection { background: #f59e0b33; color: #f59e0b; }

/* ─── Badges de categoría ───────────────────────────────────── */

.preset-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-seasons  { color: #fbbf24; background: rgba(251,191,36,0.1);  border-color: rgba(251,191,36,0.2);  }
.badge-color    { color: #f472b6; background: rgba(244,114,182,0.1); border-color: rgba(244,114,182,0.2); }
.badge-creative { color: #34d399; background: rgba(52,211,153,0.1);  border-color: rgba(52,211,153,0.2);  }
.badge-bw       { color: #9ca3af; background: rgba(156,163,175,0.1); border-color: rgba(156,163,175,0.2); }

/* ─── Botones de filtro del catálogo ────────────────────────── */

.filter-btn {
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.filter-inactive {
  color: #9ca3af;
  background: transparent;
  border-color: #2a2a2a;
}
.filter-inactive:hover {
  color: #e5e5e5;
  border-color: #404040;
  background: #1a1a1a;
}

.filter-active {
  color: #0a0a0a;
  background: #f5f5f5;
  border-color: #f5f5f5;
}

/* ─── Selector de idioma ────────────────────────────────────── */

.lang-active {
  background: rgba(245,245,245,0.1);
  color: #fff;
}

/* ─── Cards de categoría en landing ────────────────────────── */

.category-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid #1f1f1f;
  padding: 1.5rem;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.category-card.seasons { background: linear-gradient(135deg, #1c1409 0%, #141005 100%); }
.category-card.seasons:hover { border-color: rgba(245,158,11,0.4); }
.category-card.seasons .cat-accent { color: #f59e0b; }
.category-card.seasons .cat-glow  { background: radial-gradient(circle at 80% 20%, rgba(245,158,11,0.12), transparent 60%); }

.category-card.color { background: linear-gradient(135deg, #1c0912 0%, #12091a 100%); }
.category-card.color:hover { border-color: rgba(236,72,153,0.4); }
.category-card.color .cat-accent { color: #ec4899; }
.category-card.color .cat-glow  { background: radial-gradient(circle at 80% 20%, rgba(236,72,153,0.12), transparent 60%); }

.category-card.creative { background: linear-gradient(135deg, #071c12 0%, #0d0b1a 100%); }
.category-card.creative:hover { border-color: rgba(16,185,129,0.4); }
.category-card.creative .cat-accent { color: #10b981; }
.category-card.creative .cat-glow  { background: radial-gradient(circle at 80% 20%, rgba(16,185,129,0.12), transparent 60%); }

.category-card.bw { background: linear-gradient(135deg, #111 0%, #0d0d0d 100%); }
.category-card.bw:hover { border-color: rgba(156,163,175,0.3); }
.category-card.bw .cat-accent { color: #9ca3af; }
.category-card.bw .cat-glow  { background: radial-gradient(circle at 80% 20%, rgba(156,163,175,0.08), transparent 60%); }

.cat-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ─── Hero gradient text ────────────────────────────────────── */

.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #f59e0b 50%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Sección Buy Me a Coffee ───────────────────────────────── */

.coffee-section {
  background: linear-gradient(135deg, #1a1105 0%, #120a00 100%);
  border: 1px solid rgba(245,158,11,0.15);
}

/* ─── Select nativo (filtro de orden) ───────────────────────── */

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px !important;
}

/* ─── Animación de entrada para las cards ───────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 0.4s ease forwards;
}

/* ─── Divisor de sección ────────────────────────────────────── */

.section-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #f59e0b, transparent);
  margin-bottom: 1rem;
}

/* ─── Responsive: ocultar elementos en mobile ───────────────── */

@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}