/*
Theme Name: Minier-Theme
Description: Tema personalizado para Inoxsoluciones Minier
Author: Minier
Version: 1.0.0
*/
@import "tailwindcss";

@theme {
  /* Tema Inoxsoluciones Minier: Tonos acero, plateados y azul industrial */
  --color-primary: #0284c7; /* Azul Acero */
  --color-primary-hover: #0369a1; /* Azul más oscuro para hover */
  --color-surface-dark: #0f172a; /* Pizarra oscuro (fondo principal) */
  --color-surface: #1e293b; /* Pizarra medio */
  --color-surface-light: #334155; /* Pizarra claro */
  --color-metal: #94a3b8; /* Tono metálico base */
  --color-metal-light: #f8fafc; /* Inox pulido brillante */
  
  --font-sans: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  --animate-fade-in-up: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

:root {
  color-scheme: dark;
}

body {
  background-color: var(--color-surface-dark);
  color: var(--color-metal-light);
  overflow-x: hidden;
  font-family: var(--font-sans);
}

.gsap-reveal {
  opacity: 0;
  visibility: hidden;
}

/* Base interactive elements */
.btn-primary {
  @apply bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-mono text-xs md:text-sm uppercase tracking-widest px-8 py-4 transition-all duration-300 transform hover:scale-[1.02] inline-block font-bold;
}

.btn-secondary {
  @apply bg-transparent border border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-[var(--color-primary)] hover:text-white font-mono text-xs md:text-sm uppercase tracking-widest px-8 py-4 transition-all duration-300 inline-block font-bold;
}

/* Drag and Drop Zone */
.drag-zone {
  @apply border-2 border-dashed border-[var(--color-metal)] flex flex-col items-center justify-center p-12 bg-[var(--color-surface)]/50 hover:bg-[var(--color-surface)] hover:border-[var(--color-primary)] transition-colors duration-300 cursor-pointer text-center;
}

/* Nav links */
.nav-link {
  @apply text-sm uppercase tracking-wider text-[var(--color-metal-light)] hover:text-[var(--color-primary)] transition-colors relative font-mono;
}
.nav-link::after {
  content: '';
  @apply absolute -bottom-1 left-0 w-0 h-0.5 bg-[var(--color-primary)] transition-all duration-300;
}
.nav-link:hover::after {
  @apply w-full;
}
.nav-link.active {
  @apply text-[var(--color-primary)];
}
.nav-link.active::after {
  @apply w-full;
}

/* Swiper Pagination Overrides */
.swiper-pagination-bullet {
  background: var(--color-metal) !important;
  opacity: 0.5 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}
.swiper-pagination-bullet-active {
  background: var(--color-primary) !important;
  opacity: 1 !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* =========================================================
   Menú de navegación — Generado por wp_nav_menu()
   Estas reglas garantizan el layout horizontal sin depender
   de que Tailwind CDN detecte clases dinámicas del servidor.
   ========================================================= */
#site-navigation ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#site-navigation ul li {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

#site-navigation ul li a {
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1; /* slate-300 */
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
  padding: 0.25rem 0;
}

#site-navigation ul li a:hover {
  color: #ffffff;
}

#site-navigation ul li.current-menu-item a {
  color: #ffffff;
  border-bottom: 2px solid var(--color-primary);
}