/*
Theme Name: ewforex
Theme URI: https://ewforex.net
Author: ewforex
Description: Tema WordPress que replica el diseño del proyecto React/Tailwind.
Version: 1.0.0
Text Domain: ewforex
*/

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

:root {
  --background: 222 47% 7%;
  --foreground: 210 40% 96%;
  --card: 222 41% 10%;
  --card-foreground: 210 40% 96%;
  --popover: 222 41% 10%;
  --popover-foreground: 210 40% 96%;
  --primary: 38 92% 55%;
  --primary-foreground: 222 47% 7%;
  --secondary: 222 30% 16%;
  --secondary-foreground: 210 40% 90%;
  --muted: 222 30% 14%;
  --muted-foreground: 215 20% 55%;
  --accent: 166 100% 42%;
  --accent-foreground: 222 47% 7%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 222 30% 18%;
  --input: 222 30% 18%;
  --ring: 38 92% 55%;
  --radius: 0.75rem;
  --sidebar-background: 222 41% 10%;
  --sidebar-foreground: 210 40% 96%;
  --sidebar-primary: 38 92% 55%;
  --sidebar-primary-foreground: 222 47% 7%;
  --sidebar-accent: 222 30% 16%;
  --sidebar-accent-foreground: 210 40% 96%;
  --sidebar-border: 222 30% 18%;
  --sidebar-ring: 38 92% 55%;
  --gold: 38 92% 55%;
  --gold-glow: 38 92% 65%;
  --mint: 166 100% 42%;
  --surface-glass: 222 41% 12%;
  --gradient-hero: linear-gradient(135deg, hsl(222 47% 7%) 0%, hsl(222 41% 14%) 100%);
  --gradient-gold: linear-gradient(135deg, hsl(38 92% 55%), hsl(28 90% 50%));
  --gradient-card-hover: linear-gradient(135deg, hsl(222 41% 14%), hsl(222 30% 18%));
  --shadow-card: 0 4px 24px -4px hsl(0 0% 0% / 0.4);
  --shadow-card-hover: 0 12px 40px -8px hsl(38 92% 55% / 0.15);
  --shadow-glow: 0 0 30px hsl(38 92% 55% / 0.1);
}

* { border-color: hsl(var(--border)); }
html, body { height: 100%; }
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Inter', system-ui, sans-serif;
}
.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.bg-popover { background-color: hsl(var(--popover)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.bg-muted { background-color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.bg-accent { background-color: hsl(var(--accent)); }
.text-accent { color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
.border-border { border-color: hsl(var(--border)); }

.text-foreground-soft { color: hsl(var(--foreground) / 0.85); }
.text-shadow-strong { text-shadow: 0 2px 8px hsl(var(--background) / 0.6), 0 1px 2px hsl(var(--background) / 0.8); }

.glass-surface {
  background: hsl(var(--surface-glass) / 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--border) / 0.5);
}

.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

nav ul, nav li, footer ul, footer li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Semi-transparente para texto sobre imágenes claras */
.bg-overlay-soft {
  background-color: hsl(var(--background) / 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid hsl(var(--border) / 0.3);
}

.bg-overlay-strong {
  background-color: hsl(var(--background) / 0.8);
  backdrop-filter: blur(6px);
  border: 1px solid hsl(var(--border) / 0.35);
  box-shadow: 0 8px 32px hsl(0 0% 0% / 0.45);
}

.category-scroll { scrollbar-color: hsl(var(--primary)) transparent; scrollbar-width: thin; }
.category-scroll::-webkit-scrollbar { height: 8px; }
.category-scroll::-webkit-scrollbar-track { background: transparent; }
.category-scroll::-webkit-scrollbar-thumb { background: hsl(var(--primary) / 0.7); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
.category-scroll::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary)); }